:root{--bg:#0a0a18;--neon:#ffd23f;--pink:#ff4fa3;--cyan:#4fd8ff;--card:#14143a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:#fff;font-family:ui-monospace,"Courier New",monospace;-webkit-user-select:none;user-select:none}
body{overflow-x:hidden;min-height:100vh;min-height:100dvh}
.sky{position:fixed;inset:0;background:linear-gradient(#0a0a18 0%,#1a1050 45%,#7a2a78 75%,#ff7a50 100%);z-index:-3}
.sky:after{content:"";position:absolute;left:50%;bottom:26%;width:min(46vw,380px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(#fff3a0,#ff6a8a);box-shadow:0 0 90px #ff6a8a99;
  -webkit-mask:repeating-linear-gradient(#000 0 14px,transparent 14px 18px);mask:repeating-linear-gradient(#000 0 14px,transparent 14px 18px);opacity:.55}
.grid{position:fixed;left:-50%;right:-50%;bottom:0;height:34vh;z-index:-2;background:
  linear-gradient(transparent 0,rgba(255,79,163,.55) 1px,transparent 2px) 0 0/100% 38px,
  linear-gradient(90deg,transparent 0,rgba(255,79,163,.55) 1px,transparent 2px) 0 0/60px 100%;
  transform:perspective(300px) rotateX(58deg);transform-origin:50% 0;animation:gridmove 1.2s linear infinite;
  -webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%);top:auto;bottom:-8vh}
@keyframes gridmove{to{background-position:0 38px,0 0}}
.scan{position:fixed;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.18) 2px 3px);mix-blend-mode:multiply}
main{max-width:1100px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
header{text-align:center;padding:22px 0 10px}
.kicker{color:var(--cyan);letter-spacing:.35em;font-weight:800;font-size:13px;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
h1{margin:6px 0 4px;font-size:clamp(38px,9vw,86px);line-height:1;letter-spacing:.04em;font-weight:900;text-transform:uppercase}
h1 span:first-child{color:var(--neon);text-shadow:4px 4px 0 #b3322c,8px 8px 0 #1a0a40}
h1 span:last-child{color:#fff;text-shadow:4px 4px 0 #3a6ad8,8px 8px 0 #1a0a40}
.sub{margin:8px auto 0;max-width:560px;color:#ffe9b0;font-size:clamp(12px,2.6vw,16px);text-shadow:2px 2px 0 #000}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px;padding:28px 4px;flex:1;align-content:start}
.card{position:relative;display:block;text-align:left;font:inherit;color:inherit;padding:0;border:3px solid #6a78ff;border-radius:14px;overflow:hidden;cursor:pointer;
  background:var(--card);box-shadow:0 8px 0 #060618,0 0 0 0 transparent;transition:transform .12s,box-shadow .12s,border-color .12s}
.card:hover,.card:focus-visible,.card.sel{transform:translateY(-6px) scale(1.02);border-color:var(--neon);box-shadow:0 14px 0 #060618,0 0 36px #ffd23f88;outline:none}
.card:active{transform:translateY(-2px) scale(.99)}
.thumb{position:relative;aspect-ratio:16/10;background:#000 center/cover no-repeat}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(10,10,40,.9)),repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.15) 2px 3px)}
.badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--pink);color:#fff;font-weight:900;font-size:12px;letter-spacing:.1em;padding:3px 8px;border-radius:6px;box-shadow:2px 2px 0 #000}
.play{position:absolute;right:12px;bottom:10px;z-index:2;color:var(--neon);font-weight:900;letter-spacing:.14em;font-size:14px;text-shadow:2px 2px 0 #000;opacity:0;transform:translateX(8px);transition:.15s}
.card:hover .play,.card.sel .play,.card:focus-visible .play{opacity:1;transform:none}
@media (pointer:coarse){.play{opacity:1;transform:none}}
.info{padding:12px 14px 14px}
.info h2{margin:0;font-size:20px;letter-spacing:.04em;color:var(--neon);text-transform:uppercase;text-shadow:2px 2px 0 #000}
.meta{margin:2px 0 8px;font-size:12px;color:var(--cyan)}
.info p{margin:0 0 10px;font-size:13px;line-height:1.45;color:#d8dcff}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags i{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border:1px solid #6a78ff;border-radius:99px;color:#b8c0ff}
.card.locked{cursor:default;border-style:dashed;border-color:#3a4080;filter:saturate(.5)}
.card.locked:hover{transform:none;box-shadow:0 8px 0 #060618;border-color:#3a4080}
.card.locked .thumb{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#0d0d2a 0 12px,#12123a 12px 24px)}
.card.locked .thumb:after{display:none}
.card.locked .q{font-size:64px;font-weight:900;color:#3a4080;text-shadow:3px 3px 0 #000;animation:blink 2s steps(2) infinite}
.card.locked h2{color:#6a72b8}
footer{text-align:center;padding:10px 0 4px;font-size:12px;color:#c8c0e0;display:flex;flex-direction:column;gap:4px}
.credit{opacity:.6;font-size:11px}
.touch-only{display:none}
@media (pointer:coarse){.touch-only{display:inline}.desktop-only{display:none}}

/* ---- game stage (iframe overlay) */
#stage{position:fixed;inset:0;z-index:100;background:#000}
#stage[hidden]{display:none}
#stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0a0a18}
#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--neon);font-weight:900;letter-spacing:.3em;font-size:20px;background:#0a0a18;z-index:2;transition:opacity .35s}
#loading.gone{opacity:0;pointer-events:none}

/* short landscape phones: compact header so the shelf is visible straight away */
@media (max-height:500px){
  header{padding:8px 0 0}.kicker{font-size:10px}h1{font-size:clamp(28px,7vh,44px);margin:2px 0}
  .sub{font-size:11px;margin-top:2px}.shelf{padding:14px 4px;gap:16px}footer{font-size:10px}
}

/* ---- game variants (CLASSIC / 2026) */
.variants{display:flex;gap:8px;margin-top:12px}
.vbtn{flex:1;font:800 12px/1 ui-monospace,monospace;letter-spacing:.12em;padding:9px 6px;border-radius:8px;border:2px solid;cursor:pointer;color:#fff;transition:transform .1s,filter .1s}
.vbtn.v-classic{background:#3a2a7a;border-color:#8581e1;box-shadow:0 3px 0 #1a1050}
.vbtn.v-2026{background:#7a2a5a;border-color:#ff4fa3;box-shadow:0 3px 0 #40102c}
.vbtn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.25)}
.vbtn:active:not(:disabled){transform:translateY(1px)}
.vbtn:disabled{cursor:default;opacity:.42;background:#1a1a3a;border-style:dashed;border-color:#4a5090;box-shadow:none}