/* Arcade home page: the arcade floor. A neon sign, then an aisle of cabinets (a carousel):
   the chosen one stands in front, its neighbors sit to the sides, angled like cabinets down an aisle.
   The cabinets themselves are drawn by shared/cabinets.js + shared/cabinets.css. */

/* THE CHECKERED FLOOR'S VISIBILITY: 0 = no checks, 1 = the strongest. Used by both the 3D floor (arcade3d.js) and
   the 2D one below. Change the number and reload. (It was .35 until the checks were made a little more visible.) */
:root{--floor-checks:.55}

/* the neon sign's size (--logo) and the cabinet size: as big as fits, leaving room for the sign above and the
   description below (the room for the sign grows with it, so a bigger sign never pushes START off the screen) */
.floor-page{
  --logo:clamp(36px, min(10.2vw, 11vh), 96px);
  --cab-w:clamp(180px, min(64vw, calc((100vh - 320px - max(0px, (var(--logo) - 57px) * 1.1)) / 2)), 290px);
  --step:calc(var(--cab-w) * .9);          /* distance from the front cabinet to its neighbors */
  overflow-x:hidden;
}
@supports (height:100svh){ .floor-page{--logo:clamp(36px, min(10.2vw, 11svh), 96px);
  --cab-w:clamp(180px, min(64vw, calc((100svh - 320px - max(0px, (var(--logo) - 57px) * 1.1)) / 2)), 290px)} }

/* ---------- the room: dark, a little haze, light pooling on the floor ---------- */
.room{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 34% at 50% 44%, rgba(184,107,255,.14), transparent 70%),        /* haze */
    radial-gradient(50% 22% at 18% 8%, rgba(255,79,179,.12), transparent 70%),
    radial-gradient(50% 22% at 82% 8%, rgba(58,232,255,.1), transparent 70%),
    linear-gradient(180deg, var(--deep) 0, var(--floor) 58%, var(--floor-2) 76%, var(--deep) 100%)}
/* the floor: a faint checkerboard receding under the cabinets */
.room::after{content:"";position:absolute;left:-20%;right:-20%;bottom:0;height:34%;opacity:var(--floor-checks,.55);
  background:repeating-conic-gradient(var(--floor-3) 0 25%, transparent 0 50%) 0 0/64px 64px;
  transform:perspective(300px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%)}

/* ---------- THE TOP BAR (lobby, zones, ALL GAMES): back, where you are, TUNE UP, ALL GAMES, your player, sound ----------
   --z (the zone's color) tints it inside a zone */
.fbar{position:relative;z-index:20;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))}
.fb-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.fbar .sound-ctl{padding:0}
.fb-back,.fb-btn,.fb-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;
  border:2px solid var(--z,var(--cyan));background:var(--deep);color:var(--text-hi);font:700 15px var(--text);letter-spacing:.03em;text-decoration:none;cursor:pointer}
.fb-back{font-family:var(--display);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--z-hi,var(--cyan-hi));box-shadow:0 0 10px color-mix(in srgb,var(--z,var(--cyan)) 45%,transparent)}
.fb-back[hidden],.fb-btn[hidden],.fb-title[hidden]{display:none}
.fb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fb-tune{border-color:var(--green-ink);color:var(--green-hi)}
.fb-all{border-color:var(--yellow-ink);color:var(--yellow-hi)}
.fb-full{border-color:var(--pink-ink);color:var(--pink-hi)}
.fb-btn:hover,.fb-back:hover,.fb-chip:hover{background:var(--floor-3)}
.fb-chip{border-color:var(--line);padding:4px 14px 4px 4px}
.fb-chip .chip-pic{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--floor-3);display:grid;place-items:center}
.fb-chip .chip-pic .pt-box{width:34px}
.fb-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(20px,3.6vw,30px);letter-spacing:.05em;text-transform:uppercase;line-height:1.1;
  color:var(--z-hi,var(--text-hi));text-shadow:0 0 4px var(--z,transparent),0 0 16px var(--z-ink,transparent)}
@media (max-width:640px){ .fb-btn span,.fb-chip .chip-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fb-btn,.fb-chip{padding:6px 10px} .fb-title{order:3;width:100%;text-align:center} }

/* ---------- neon sign ---------- */
.sign{text-align:center;padding:0 16px 4px}
.neon{font-family:var(--neon-font);font-weight:400;font-size:var(--logo,48px);line-height:1.1;letter-spacing:.04em;
  color:var(--pink-hi);text-shadow:0 0 2px var(--pink-hi),0 0 8px var(--pink),0 0 22px var(--pink-ink)}
.neon span{color:var(--cyan-hi);text-shadow:0 0 2px var(--cyan-hi),0 0 8px var(--cyan),0 0 22px var(--cyan-ink)}
.neon span{animation:flicker 7s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:1}91%{opacity:.55}92%{opacity:1}94%{opacity:.7}95%{opacity:1}}
.sign p{margin:4px auto 0;max-width:40ch;color:var(--text-lo);font-size:17px}

/* ---------- A ZONE: the carousel with only its cabinets (there's no big sign here, so the cabinets get its room) ---------- */
.floor-page.v-zone{--cab-w:clamp(180px, min(64vw, calc((100vh - 300px) / 2)), 290px)}
@supports (height:100svh){ .floor-page.v-zone{--cab-w:clamp(180px, min(64vw, calc((100svh - 300px) / 2)), 290px)} }
.zone[hidden],.lobby[hidden],.allg[hidden]{display:none}
.zone.single .nav,.zone.single .lights{display:none}
.aisle-flags{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:6px;pointer-events:none}
.slot.nofit .cab{filter:brightness(.5) saturate(.45)}

/* ---------- THE FULL ARCADE (#full-arcade): every cabinet in one carousel, a zone tag under each, the jump strip ---------- */
.floor-page.v-full{--cab-w:clamp(170px, min(60vw, calc((100vh - 380px) / 2.1)), 280px)}
@supports (height:100svh){ .floor-page.v-full{--cab-w:clamp(170px, min(60vw, calc((100svh - 380px) / 2.1)), 280px)} }
.v-full .aisle{height:calc(var(--cab-w) * 2.2)}
.v-full .lights{display:none}
.cab-ztag{position:absolute;left:50%;top:calc(var(--cab-w) * 2.02);transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.info-tags .ztag{font-size:13px}
.jump-strip{display:flex;align-items:stretch;gap:6px;max-width:100%;margin:6px auto 0;padding:6px 16px 10px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.jump-strip[hidden]{display:none}
.jump-strip::before,.jump-strip::after{content:"";flex:1 0 0}          /* centered when it fits, scrolls when it doesn't */
.jg{flex:none;display:flex;flex-direction:column;gap:3px;padding-left:6px;border-left:3px solid var(--z)}
.jg-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--z-hi);white-space:nowrap;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.jg-row{display:flex;gap:5px}
.jump{flex:none;width:90px;min-height:44px;padding:3px;border-radius:10px;border:2px solid var(--floor-3);background:var(--deep);cursor:pointer;display:grid;place-items:center}
.jump .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:6px}
.jump .mq-wait{background:var(--floor-2)}
.jump:hover{border-color:var(--z)}
.jump.nofit .mq-thumb{opacity:.5;filter:saturate(.35)}
.jump[aria-current="true"]{border-color:var(--z-hi);box-shadow:0 0 0 2px var(--z),0 0 14px var(--z)}
.jump:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
@media (max-width:640px){ .jump{width:74px} .jg-name{font-size:10px} .jump-strip{padding:4px 12px 8px} }
.start3d.nofit,.cab-start.nofit{filter:saturate(.35) brightness(.8)}
.info-tags{margin:0 0 8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.info-tags:empty{display:none}
.info-tags .as-note{color:var(--yellow-hi);font-weight:700}

/* ---------- badges and tags (lobby, zones, ALL GAMES) ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font:400 12px var(--display);letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.b-assigned{background:var(--yellow);color:var(--deep);box-shadow:var(--glow-yellow)}
.b-2p{background:var(--pink);color:var(--deep)}
.fit-tag{display:inline-block;padding:3px 9px;border-radius:8px;border:2px solid var(--amber);color:var(--amber-hi);background:var(--deep);font-weight:700;font-size:13px}

/* ---------- carousel ---------- */
.carousel{position:relative;margin-top:14px}
.aisle{position:relative;height:calc(var(--cab-w) * 2.08);perspective:1000px;perspective-origin:50% 40%;touch-action:pan-y;overflow:hidden;
  -webkit-user-select:none;user-select:none}
.slot{position:absolute;top:0;left:50%;width:var(--cab-w);margin-left:calc(var(--cab-w) / -2);
  transition:transform .42s cubic-bezier(.25,.8,.3,1),opacity .42s;will-change:transform}
.slot.jump{transition:none}
.slot[data-d="0"]{z-index:5}
.slot[data-d="-1"]{transform:translateX(calc(var(--step) * -1)) translateZ(-180px) rotateY(-34deg);opacity:.5;z-index:4;cursor:pointer}
.slot[data-d="1"]{transform:translateX(var(--step)) translateZ(-180px) rotateY(34deg);opacity:.5;z-index:4;cursor:pointer}
.slot[data-d="-2"]{transform:translateX(calc(var(--step) * -1.75)) translateZ(-420px) rotateY(-40deg);opacity:.22;z-index:3;cursor:pointer}
.slot[data-d="2"]{transform:translateX(calc(var(--step) * 1.75)) translateZ(-420px) rotateY(40deg);opacity:.22;z-index:3;cursor:pointer}
.slot[data-d="-3"]{transform:translateX(calc(var(--step) * -2.4)) translateZ(-600px) rotateY(-44deg);opacity:0;visibility:hidden}
.slot[data-d="3"]{transform:translateX(calc(var(--step) * 2.4)) translateZ(-600px) rotateY(44deg);opacity:0;visibility:hidden}
.slot:not([data-d="0"]) .cab-start{pointer-events:none}
.slot:not([data-d="0"]) .cab::after{opacity:.15}

/* 3D view (arcade3d.js): the canvas fills the aisle; START is a real link placed over the front cabinet */
.aisle.loading-3d .slot{visibility:hidden}
.aisle.is-3d .slot{display:none}
.floor3d{position:absolute;inset:0;display:block;cursor:pointer;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.start3d{position:absolute;z-index:6;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-width:120px;min-height:48px;padding:8px 26px;
  font-family:var(--display);font-size:20px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--deep);background:var(--t,var(--yellow));
  border:3px solid var(--t-hi,var(--yellow-hi));border-radius:999px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),var(--t-glow,var(--glow-yellow))}
.fps3d{position:absolute;left:8px;bottom:8px;z-index:7;padding:4px 8px;border-radius:6px;background:var(--deep);color:var(--text-lo);font-size:13px;font-variant-numeric:tabular-nums}
.start3d:hover{background:var(--t-hi,var(--yellow-hi))}
.start3d:focus-visible{outline:4px solid var(--text-hi);outline-offset:4px}

/* big arrow buttons, level with the cabinet's screen */
.nav{position:absolute;top:calc(var(--cab-w) * .62);z-index:10;display:grid;place-items:center;width:56px;height:56px;padding:0;border-radius:50%;
  background:var(--deep);border:3px solid var(--cyan);color:var(--cyan-hi);box-shadow:var(--glow-cyan)}
.nav svg{width:26px;height:26px;fill:currentColor}
.nav:hover{background:var(--cyan);color:var(--deep)}
.nav:active{transform:scale(.94)}
.nav:disabled{opacity:.3;cursor:default;box-shadow:none}
.nav:disabled:hover{background:var(--deep);color:var(--cyan-hi)}
.nav:disabled:active{transform:none}
.nav-prev{left:max(16px, calc(50% - var(--cab-w) * 1.55))}
.nav-next{right:max(16px, calc(50% - var(--cab-w) * 1.55))}

/* indicator lights */
.lights{display:flex;justify-content:center;gap:4px;margin-top:4px}
.light{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:50%}
.light i{display:block;width:16px;height:16px;border-radius:50%;background:var(--led-off);border:2px solid var(--floor-3)}
.light:hover i{background:var(--text-dim)}
.light[aria-current="true"] i{background:var(--yellow);border-color:var(--yellow-hi);box-shadow:var(--glow-yellow)}

/* ---------- about the front game (real text, AA contrast) ---------- */
.info{max-width:560px;margin:4px auto 0;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center}
.info-skill{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.info-name{font-family:var(--display);font-weight:400;font-size:clamp(24px,5vw,32px);line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:var(--text-hi);margin:2px 0 6px}
.info-blurb{margin:0;color:var(--text-lo);font-size:17px}
.hiscore{display:inline-block;margin:0 0 10px;padding:6px 14px;border:2px solid var(--yellow-ink);border-radius:10px;background:var(--deep);
  font-weight:700;font-size:16px;letter-spacing:.04em;color:var(--text-hi);font-variant-numeric:tabular-nums}
.hiscore b{font-family:var(--display);font-weight:400;color:var(--yellow);letter-spacing:.08em}
.hiscore .star{color:var(--yellow);text-shadow:0 0 6px rgba(255,225,77,.6)}
.hiscore .who{color:var(--text-lo);font-weight:400}
.hiscore .scales-note{display:block;margin-top:2px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--text-lo)}
.hiscore .np-link{color:var(--yellow-hi);font-weight:700;text-underline-offset:3px}
.note{color:var(--text-lo);font-size:15px;text-align:center;margin:0 16px 24px}

/* one cabinet at a time on phones: the neighbors step out of view, the arrows sit beside it */
@media (max-width:599px){
  .floor-page{--step:calc(var(--cab-w) * 1.5)}
  .slot:not([data-d="0"]){opacity:0;visibility:hidden}
  .nav{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  .neon span{animation:none}
  .slot{transition:none}
  .aisle.fade{animation:fade .25s ease-out}
  @keyframes fade{from{opacity:0}}
}

/* ---------- PRESS START: the attract screen on the first visit (arcade.js). A real button covering everything. ---------- */
.press-start{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,40px);
  width:100%;margin:0;padding:24px 16px;border:0;cursor:pointer;color:var(--text-hi);font:inherit;text-align:center;
  background:radial-gradient(60% 40% at 50% 42%, rgba(184,107,255,.16), transparent 70%),linear-gradient(180deg,var(--deep),var(--floor) 70%,var(--deep))}
.press-start[hidden]{display:none}
.press-start:focus-visible{outline:3px solid var(--cyan);outline-offset:-10px}
.ps-sign{font-size:clamp(40px,min(11vw,12vh),110px)}
.ps-start{font-family:var(--display);font-size:clamp(26px,5.5vw,48px);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow-hi);text-shadow:var(--glow-yellow)}
.ps-hint{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo)}
@media (prefers-reduced-motion:no-preference){
  .ps-start{animation:ps-blink 1.1s steps(1) infinite}
  .press-start.go{animation:ps-flash .32s ease-out forwards}
}
@keyframes ps-blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
@keyframes ps-flash{0%{background:var(--white-hi);opacity:1}35%{opacity:.9}100%{opacity:0}}
.press-start.go{pointer-events:auto}

/* ---------- SELECT YOUR PLAYER as a view on this page (select-player/player.js + style.css) ----------
   It covers the floor and scrolls by itself; the floor behind it is hidden (and the 3D view stops drawing). */
.sp-view{position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--deep),var(--floor) 60%,var(--deep))}
/* overlays added to the page (the skins catch-up card, BACKUP / RESTORE, "Create your player?") go above the view */
body.in-select>.overlay{z-index:40}
.sp-view[hidden]{display:none}
body.in-select{overflow:hidden}
body.in-select>.sign,body.in-select>main,body.in-select>#soundCtl{visibility:hidden}
body.in-select>.fbar,body.in-select>.lobby,body.in-select>main,body.in-select>.allg{visibility:hidden}
.sp-view.pick .sp-marquee{width:auto;height:auto;justify-content:center}
.sp-view.pick .sp-arcade{margin:0 auto;text-align:center;font-size:clamp(26px,min(5vw,6vh),48px);white-space:nowrap}

/* ---------- THE ZONE LOBBY (lobby.js): a dark arcade wall, one neon sign per zone. Flat HTML/CSS, no 3D. ---------- */
.lobby{padding:0 max(16px,env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.lobby .sign{--logo:clamp(34px, min(8.5vw, 8vh), 80px)}
.lobby-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1100px;margin:10px auto 14px}
.lobby-cards[hidden]{display:none}
.lcard{flex:1 1 320px;max-width:520px;display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;text-align:left;cursor:pointer;
  border:2px solid var(--z,var(--cyan));background:linear-gradient(90deg,var(--deep),var(--floor-2));color:var(--text-hi)}
.lc-assigned{border-color:var(--yellow);box-shadow:var(--glow-yellow),inset 0 0 18px color-mix(in srgb,var(--yellow) 18%,transparent)}
.lc-pic{flex:0 0 min(46%,220px)}
.lc-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:8px}
.lc-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-label{font:400 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--z-hi,var(--cyan-hi))}
.lc-assigned .lc-label{color:var(--yellow-hi)}
.lc-name{font:400 clamp(17px,2.4vw,22px) var(--display);letter-spacing:.03em;text-transform:uppercase}
.lc-note{color:var(--yellow-hi);font-weight:700;font-size:15px}
.lcard:hover{background:var(--floor-3)}

.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);max-width:1100px;margin:0 auto}
@media (orientation:portrait),(max-width:700px){ .zones{grid-template-columns:repeat(2,minmax(0,1fr))} }
.zsign{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:clamp(150px,22vh,220px);padding:16px 12px 12px;
  border-radius:20px;border:3px solid var(--z);cursor:pointer;color:var(--text-hi);text-align:center;
  background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--z) 16%,transparent),transparent 70%),var(--deep);
  box-shadow:0 0 0 3px var(--deep),0 0 18px color-mix(in srgb,var(--z) 45%,transparent),inset 0 0 22px color-mix(in srgb,var(--z) 14%,transparent)}
.zsign:hover,.zsign:focus-visible{background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--z) 26%,transparent),transparent 72%),var(--deep)}
.zsign:focus-visible{outline:4px solid var(--text-hi);outline-offset:4px}
.zsign:active{transform:scale(.98)}
.zs-name{font:400 clamp(20px,3.2vw,34px) var(--display);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;color:var(--z-hi);
  text-shadow:0 0 3px var(--z-hi),0 0 12px var(--z),0 0 26px var(--z-ink)}
.zs-tag{color:var(--text-lo);font-size:clamp(13px,1.6vw,16px);max-width:32ch}
.zs-cabs{display:flex;align-items:flex-end;gap:6px;height:clamp(34px,6vh,54px);margin-top:2px}
.cab-sil{height:100%;width:auto;overflow:visible}
.cab-sil path{fill:var(--cab-face);stroke:var(--t);stroke-width:14;stroke-linejoin:round}
.zs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;font-size:15px;color:var(--text-lo)}
.zs-stars{font-variant-numeric:tabular-nums;color:var(--text-hi)}
.zs-stars .star,.gc-stars .star{color:var(--yellow);text-shadow:0 0 6px rgba(255,225,77,.6)}
.zsign .b-assigned{position:absolute;top:-11px;right:14px}
/* each sign turns on with a short, gentle flicker (twice, once per page load, one after another, only the sign itself:
   well under 3 flashes a second), then hums: a slow breathing glow */
@media (prefers-reduced-motion:no-preference){
  .zsign.flick{animation:zs-on 1s linear both;animation-delay:calc(var(--i) * .16s)}
  .zs-name{animation:zs-hum 4.5s ease-in-out infinite}
}
@keyframes zs-on{0%{opacity:.18}18%{opacity:.7}30%{opacity:.35}55%{opacity:1}66%{opacity:.8}100%{opacity:1}}
@keyframes zs-hum{0%,100%{text-shadow:0 0 3px var(--z-hi),0 0 12px var(--z),0 0 26px var(--z-ink)}50%{text-shadow:0 0 3px var(--z-hi),0 0 8px var(--z),0 0 18px var(--z-ink)}}

/* ---------- ALL GAMES (lobby.js): every game once, as a card; the page scrolls ---------- */
.allg{padding:4px max(16px,env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.allg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;max-width:1200px;margin:0 auto}
.gcard{display:flex;flex-direction:column;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;color:var(--text-hi);
  border:2px solid var(--z,var(--line));background:var(--floor-2);box-shadow:0 0 12px color-mix(in srgb,var(--z,transparent) 30%,transparent)}
.gcard:hover{background:var(--floor-3)}
.gcard:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
.gc-pic{position:relative;display:block}
.gc-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1}
.gc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.gc-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;flex:none}
.gc-body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.gc-name{font:400 19px var(--display);letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.gc-skill{color:var(--text-lo);font-size:14px}
.gc-zones{display:flex;flex-wrap:wrap;gap:4px}
.ztag{padding:2px 8px;border-radius:999px;border:2px solid var(--z);color:var(--z-hi);font-size:12px;font-weight:700;background:var(--deep)}
.gc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px;font-size:15px}
.gc-stars{font-variant-numeric:tabular-nums}
.gc-sum{color:var(--text-lo);font-size:14px}
.mq-none{display:grid;place-items:center;aspect-ratio:4/1;background:var(--deep);font:400 18px var(--display)}
/* a game that doesn't suit the instrument: still there, dimmed, with its tag (the tag stays bright to read) */
.nofit .mq-thumb,.nofit .gc-name,.nofit .lc-name,.nofit .gc-skill{opacity:.5;filter:saturate(.35)}

/* the "doesn't suit your instrument" panel */
.fit-panel .fit-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:10px;margin-bottom:12px}
.fit-panel p{color:var(--text-hi)}