/* GOAT Plays hub (/plays, /nl/plays): a neon arcade lobby (30 Oct 2026). One lit cabinet with the poster on its CRT, the select screen beside it.
   Hover, focus and press only change glow, border, colour or brightness: nothing moves, scales or zooms. */
.gh-hub{--gh-cy:#5ee7ff;--gh-line:rgba(255,255,255,.12);--gh-txt:rgba(255,255,255,.8)}
.gh-hub a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.gh-hub .gp-bar{position:relative;z-index:3}
.gh-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gh-in{max-width:980px;margin:0 auto;padding:0 16px}

/* the lobby: a dark room with wall tiles and neon spill; it slides up under the header */
.gh-lobby{position:relative;overflow:hidden;margin-top:-80px;padding:104px 0 70px;background:radial-gradient(60% 50% at 24% 45%,rgba(255,31,180,.17),transparent 70%),radial-gradient(45% 45% at 82% 28%,rgba(94,231,255,.09),transparent 70%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(180deg,#0b0810,#100b14 78%,var(--bg))}
.gh-lobby::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;background:linear-gradient(180deg,rgba(22,18,16,0),var(--bg))}
.gh-floor{position:absolute;left:0;bottom:0;width:100%;height:170px;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 55%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 55%,transparent)}
.gh-floor path{fill:none;stroke:rgba(255,31,180,.45);stroke-width:1;vector-effect:non-scaling-stroke}
/* pixel dust drifting up from the floor: each speck is a 5px square sliding up a thin column, stepped like an 8-bit sprite */
.gh-px{position:absolute;inset:0;pointer-events:none}
.gh-px i{position:absolute;bottom:56px;left:var(--x);width:5px;height:64%;opacity:0;background:linear-gradient(var(--c),var(--c)) no-repeat 0 100%/5px 5px;animation:gh-up var(--d) steps(56) var(--t) infinite,gh-fade var(--d) linear var(--t) infinite}
.gh-px i:nth-child(1){--x:3%;--c:#ff1fb4;--d:13s;--t:-3s}.gh-px i:nth-child(2){--x:8%;--c:#5ee7ff;--d:16s;--t:-9s}.gh-px i:nth-child(3){--x:13%;--c:#EEB92E;--d:12s;--t:-6s}
.gh-px i:nth-child(4){--x:87%;--c:#ff1fb4;--d:15s;--t:-1s}.gh-px i:nth-child(5){--x:92%;--c:#5ee7ff;--d:13s;--t:-11s}.gh-px i:nth-child(6){--x:97%;--c:#fff;--d:16s;--t:-5s}
@keyframes gh-up{to{background-position:0 -6px}}
@keyframes gh-fade{0%,100%{opacity:0}14%,72%{opacity:.85}}
@keyframes gh-blink{50%{opacity:.55}}

.gh-stage{position:relative;z-index:1;display:grid;gap:30px;justify-items:center}
@media (min-width:900px){.gh-stage{grid-template-columns:auto minmax(0,1fr);gap:52px;align-items:center;justify-items:stretch}.gh-cabw{width:min(440px,max(250px,calc((100vh - 288px) / 1.5 + 36px)));width:min(440px,max(250px,calc((100svh - 288px) / 1.5 + 36px)))}.gh-45 .gh-cabw{width:min(440px,max(250px,calc((100vh - 288px) / 1.25 + 36px)));width:min(440px,max(250px,calc((100svh - 288px) / 1.25 + 36px)))}}

/* the cabinet: marquee, CRT, control panel; pink and cyan side trim light up the wall */
.gh-cabw{position:relative;width:100%;max-width:min(440px,max(250px,calc((100vh - 288px) / 1.5 + 36px)));max-width:min(440px,max(250px,calc((100svh - 288px) / 1.5 + 36px)))}
.gh-45 .gh-cabw{max-width:min(440px,max(250px,calc((100vh - 288px) / 1.25 + 36px)));max-width:min(440px,max(250px,calc((100svh - 288px) / 1.25 + 36px)))}
.gh-amb{position:absolute;inset:-20% -72% -12%;pointer-events:none;opacity:.7;-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent);mask-image:radial-gradient(closest-side,#000 50%,transparent)}
.gh-amb img{position:absolute;left:26%;top:13%;width:48%;height:74%;object-fit:cover;filter:blur(60px) saturate(1.5)}
.gh-cab::after{content:'';position:absolute;z-index:-1;left:-25%;right:-25%;bottom:-38px;height:76px;pointer-events:none;background:radial-gradient(45% 50% at 32% 50%,rgba(255,31,180,.4),transparent 70%),radial-gradient(45% 50% at 68% 50%,rgba(94,231,255,.3),transparent 70%)}
.gh-cab{position:relative;padding:10px;border-radius:24px 24px 14px 14px;background:linear-gradient(180deg,#261d2b,#17121b 50%,#110d14);box-shadow:inset 3px 0 0 var(--pink),inset -3px 0 0 var(--gh-cy),inset 0 1px 0 rgba(255,255,255,.1),-24px 0 60px -20px rgba(255,31,180,.7),24px 0 60px -20px rgba(94,231,255,.55),0 40px 60px -24px #000}
/* marquee: an LED sign; the h1 text stays real text for readers and search */
.gh-marq{margin:0 0 10px;padding:10px 12px;border-radius:16px 16px 8px 8px;line-height:0;background:radial-gradient(80% 140% at 50% 0,rgba(255,31,180,.2),transparent 70%),#09060b;box-shadow:inset 0 0 0 1px rgba(255,31,180,.45),inset 0 -10px 20px rgba(0,0,0,.6),0 0 30px rgba(255,31,180,.3)}
.gh-marq svg{display:block;width:100%;max-width:330px;height:auto;margin:0 auto}
/* CRT: bezel, poster, scanlines, curved-glass vignette and glare */
.gh-bez{padding:8px;border-radius:20px;background:linear-gradient(180deg,#060408,#120e15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 2px 12px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.gh-scr{position:relative;display:block;overflow:hidden;border-radius:16px/20px;background:#000;box-shadow:0 0 26px rgba(255,31,180,.4),0 0 70px rgba(94,231,255,.14);transition:box-shadow .25s,filter .25s}
.gh-scr{aspect-ratio:2/3}.gh-45 .gh-scr{aspect-ratio:4/5}
.gh-scr picture{display:block;height:100%}
.gh-scr img{display:block;width:100%;height:100%;object-fit:cover}
.gh-scr::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px)}
.gh-scr::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(158deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 24%,transparent 38%),radial-gradient(130% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.55));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 40px rgba(0,0,0,.55)}
@media (hover:hover){.gh-scr:hover{filter:brightness(1.08);box-shadow:0 0 36px rgba(255,31,180,.65),0 0 90px rgba(94,231,255,.25)}}
.gh-scr:focus-visible{outline-offset:4px}
/* control panel: joystick, buttons, and a real start button */
.gh-cp{display:flex;align-items:center;gap:16px;margin-top:10px;padding:10px 10px 10px 18px;border-radius:10px 10px 12px 12px;background:linear-gradient(180deg,#2e2434,#18131c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.4)}
.gh-stick{position:relative;flex:none;width:30px;height:42px;background:linear-gradient(90deg,#8d8594,#e2dbe6,#8d8594) 13px 16px/4px 20px no-repeat,radial-gradient(15px 5px at 50% 36px,#050406 92%,transparent)}
.gh-stick::before{content:'';position:absolute;left:4px;top:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffd3ef 0 9%,var(--pink) 42%,#6e0949);box-shadow:0 0 14px rgba(255,31,180,.55)}
.gh-btns{display:flex;gap:9px;min-width:0;overflow:hidden;padding:6px 4px;margin:-6px -4px}
.gh-btns i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 9%,var(--c) 40%,#111 125%);box-shadow:0 0 10px var(--c),inset 0 -2px 0 rgba(0,0,0,.35)}
.gh-btns i:nth-child(1){--c:var(--gh-cy)}.gh-btns i:nth-child(2){--c:var(--accent)}.gh-btns i:nth-child(3){--c:#9aff5e}
.gh-1p{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;background:var(--pink);color:#17060f;font:700 12px/1 var(--mono);letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 20px rgba(255,31,180,.55);transition:box-shadow .2s,filter .2s}
@media (hover:hover){.gh-1p:hover,.gh-start:hover{filter:brightness(1.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 3px rgba(255,31,180,.3),0 0 36px rgba(255,31,180,.85)}}
.gh-1p:active,.gh-start:active{filter:brightness(.88)}
.gh-1p,.gh-start{background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%);white-space:nowrap}

/* the select screen */
.gh-sel{position:relative;width:100%;max-width:560px}
.gh-sel-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 12px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--gh-cy)}
.gh-cur{color:var(--pink);animation:gh-blink 1s steps(1) infinite}
.gh-free{margin-left:auto;padding:6px 8px 5px;border:1px solid rgba(238,185,46,.55);border-radius:4px;font-size:10px;letter-spacing:2px;color:var(--accent)}
.gh-slots{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.gh-on{padding:20px 20px 22px;border:1px solid rgba(255,31,180,.8);border-radius:16px;background:linear-gradient(180deg,#2a0f24,#120c16 45%);box-shadow:0 0 0 4px rgba(255,31,180,.08),0 0 44px rgba(255,31,180,.22)}
.gh-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gh-no{display:inline-block;padding:5px 7px 4px;border-radius:4px;background:var(--pink);color:#17060f;font:700 11px/1 var(--mono);letter-spacing:1px}
.gh-name{margin:0;font:700 clamp(28px,7.4vw,40px)/1.05 var(--mono);letter-spacing:1px;text-transform:uppercase;text-shadow:0 0 20px rgba(255,31,180,.5)}
.gh-tag{display:block;width:100%;font:700 11px/1.4 var(--mono);letter-spacing:4px;text-transform:uppercase;color:var(--pink)}
.gh-txt{margin:14px 0;color:var(--gh-txt);font-size:14.5px;line-height:1.6}
.gh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.gh-chips li{padding:7px 9px 6px;border:1px solid var(--gh-line);border-radius:6px;background:rgba(255,255,255,.03);font-size:11px;line-height:1;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.88)}
.gh-chips li::before{content:'';display:inline-block;width:5px;height:5px;margin:0 7px 1px 0;background:var(--gh-cy)}
.gh-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.gh-start{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;border-radius:10px;background:var(--pink);color:#17060f;font:700 15px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 28px rgba(255,31,180,.6);transition:box-shadow .2s,filter .2s}
.gh-hint{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media (max-width:899px),(hover:none),(pointer:coarse){.gh-hint{display:none}}
.gh-hub kbd{display:inline-block;min-width:24px;padding:4px 6px 3px;border:1px solid rgba(255,255,255,.32);border-bottom-width:3px;border-radius:5px;background:#1d1720;color:#fff;font:700 11px/1.1 var(--mono);text-align:center;letter-spacing:.5px;text-transform:none}
.gh-p2 a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:58px;padding:12px 16px;border:1px dashed rgba(238,185,46,.55);border-radius:14px;background:#110c15;color:#fff;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.gh-p2 .gh-no{background:none;box-shadow:inset 0 0 0 1px rgba(238,185,46,.75);color:var(--accent)}
.gh-p2 b{font-size:14px;letter-spacing:1.5px;text-transform:uppercase}
.gh-coin{margin-left:auto;white-space:nowrap;font:700 11px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--accent);animation:gh-blink 1.6s ease-in-out infinite}
@media (hover:hover){.gh-p2 a:hover{border-style:solid;border-color:var(--accent);box-shadow:0 0 26px rgba(238,185,46,.25)}}
/* hi-score: the player's own best from the game (this device only), never a made-up table */
.gh-hi{display:flex;align-items:center;gap:18px;margin-top:12px;padding:14px 16px;border:1px solid var(--gh-line);border-radius:14px;background:#0e0a11}
.gh-hi-n{flex:none}
.gh-hi-k{display:block;margin-bottom:7px;font:700 10px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--gh-cy)}
.gh-hi-v{display:block;font:700 26px/1 var(--mono);letter-spacing:3px;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(238,185,46,.6)}
.gh-hi-v i{font-style:normal;opacity:.35}
.gh-hi p{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.7)}

/* inside the machine: the eleven games as a stage-select grid, the websites and the moves */
.gh-inside{padding:58px 0 0}
.gh-kick{margin:0 0 10px;font:700 11px/1.4 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--gh-cy)}
.gh-h2{margin:0 0 12px;font:700 clamp(24px,5.6vw,38px)/1.15 var(--mono);letter-spacing:.5px}
.gh-h2 em{font-style:normal;color:var(--pink);text-shadow:0 0 18px rgba(255,31,180,.45)}
.gh-lead{max-width:660px;margin:0 0 26px;color:var(--gh-txt)}
.gh-lv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 26px;padding:0;list-style:none;counter-reset:gh}
@media (min-width:640px){.gh-lv{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.gh-lv{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
.gh-lv li{counter-increment:gh;padding:12px 13px 13px;border:1px solid var(--gh-line);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.gh-lv li::before{content:counter(gh,decimal-leading-zero);display:block;margin-bottom:7px;font-size:10px;line-height:1;letter-spacing:2px;color:var(--gh-cy)}
.gh-lv b{display:block;font-size:13px;line-height:1.3;letter-spacing:1.5px;text-transform:uppercase}
.gh-lv span{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.62)}
.gh-lv .gh-boss{border-color:rgba(255,31,180,.7);background:linear-gradient(180deg,rgba(255,31,180,.16),rgba(255,31,180,.04));box-shadow:0 0 26px rgba(255,31,180,.15)}
.gh-lv .gh-boss::before{content:attr(data-k);text-transform:uppercase;color:var(--pink)}
.gh-sites{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}
.gh-sites li{padding:7px 10px 6px;border:1px solid rgba(94,231,255,.28);border-radius:999px;font-size:12px;line-height:1;color:rgba(255,255,255,.86)}
.gh-moves{display:grid;gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:760px){.gh-moves{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gh-moves li{padding:14px 16px;border:1px solid var(--gh-line);border-radius:12px;font-size:13.5px;line-height:1.55;color:var(--gh-txt)}
.gh-moves b{display:block;margin-bottom:6px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}

/* slot 02: the studio's pitch, an empty cabinet waiting for player 2 */
.gh-p2s{padding:58px 0 0}
.gh-p2g{display:grid;gap:24px;align-items:center}
@media (min-width:760px){.gh-p2g{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px}}
.gh-crt{padding:10px;border-radius:22px;background:linear-gradient(180deg,#261d2b,#120e15);box-shadow:inset 3px 0 0 var(--accent),inset -3px 0 0 var(--accent),inset 0 1px 0 rgba(255,255,255,.1),0 0 50px -12px rgba(238,185,46,.4)}
.gh-crt-s{display:grid;place-content:center;gap:12px;aspect-ratio:16/10;overflow:hidden;border-radius:16px/20px;text-align:center;background:radial-gradient(70% 60% at 50% 45%,rgba(238,185,46,.14),transparent 70%),repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#07050a;box-shadow:inset 0 0 50px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.08)}
.gh-door{display:flex;justify-content:center;gap:22px;margin-top:10px;padding:12px;border-radius:10px 10px 12px 12px;background:linear-gradient(180deg,#2e2434,#18131c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.4)}
.gh-door i{position:relative;width:36px;height:48px;border-radius:6px;background:linear-gradient(180deg,#3b3142,#211a26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 0 rgba(0,0,0,.4)}
.gh-door i::before{content:'';position:absolute;left:16px;top:9px;width:4px;height:17px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.gh-door i::after{content:'';position:absolute;left:9px;right:9px;bottom:8px;height:6px;border-radius:2px;background:#0a080c;box-shadow:inset 0 1px 2px #000}
.gh-crt b{font:700 clamp(18px,4.6vw,26px)/1 var(--mono);letter-spacing:5px;text-transform:uppercase;color:var(--accent);text-shadow:0 0 16px rgba(238,185,46,.75);animation:gh-blink 1.6s ease-in-out infinite}
.gh-crt span{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.gh-p2t p{max-width:520px;margin:0 0 20px;color:var(--gh-txt)}
.gh-p2t .gh-kick{margin-bottom:10px;color:var(--accent)}
.gh-gold{min-height:48px;padding:17px 26px;background:var(--accent);color:#161210;transition:box-shadow .2s,filter .2s}
@media (hover:hover){.gh-gold:hover{filter:brightness(1.08);box-shadow:0 0 0 3px rgba(238,185,46,.3),0 0 30px rgba(238,185,46,.45)}}

@media (prefers-reduced-motion:reduce){.gh-px{display:none}.gh-cur,.gh-coin,.gh-crt b{animation:none}.gh-scr,.gh-1p,.gh-start,.gh-p2 a,.gh-gold{transition:none}}