:root{
  --bg:#160a2e; --bg2:#0d0622; --purple:#7a3cff; --cyan:#0ff0fc; --pink:#ff4d6d;
  --gold:#ffd84d; --green:#3df58a; --ink:#e8dcff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'VT323',monospace; color:var(--ink); background:var(--bg2);
  background-image:
    radial-gradient(circle at 50% -10%,rgba(122,60,255,.40),transparent 60%),
    radial-gradient(circle at 50% 120%,rgba(15,240,252,.20),transparent 55%),
    linear-gradient(180deg,#0d0622 0%,#160a2e 60%,#1a0c38 100%);
  min-height:100%; display:flex; flex-direction:column; align-items:center;
  -webkit-font-smoothing:none; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,240,252,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,60,255,.18) 1px,transparent 1px);
  background-size:40px 40px;
  transform:perspective(380px) rotateX(64deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(transparent,#000 70%);
  mask-image:linear-gradient(transparent,#000 70%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px);
   
  mix-blend-mode:multiply;
}
@keyframes flick{0%,97%{opacity:1}98%{opacity:.82}99%{opacity:1}100%{opacity:.92}}

 
.sub{ font-family:'Audiowide',system-ui,sans-serif; font-size:13px; letter-spacing:10px;
   
  color:var(--pink); margin-top:8px; text-shadow:0 0 10px rgba(255,77,109,.7); }
@keyframes huePulse{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(-25deg)}}

.layout{ display:flex; gap:16px; align-items:flex-start; justify-content:center; width:100%; max-width:1040px; padding:0 12px; position:relative; z-index:1; }
.wrap{ flex:1 1 auto; max-width:480px; padding:14px 0; }

 
.queue{ flex:0 0 244px; width:244px; border:2px solid var(--purple); border-radius:14px;
  background:linear-gradient(180deg,rgba(122,60,255,.13),rgba(13,6,34,.72));
  padding:14px; box-shadow:0 0 26px rgba(122,60,255,.28); margin-top:14px; }
.qhead{ font-family:'Audiowide',system-ui,sans-serif; font-size:12px; color:var(--cyan); letter-spacing:1px;
  display:flex; align-items:center; gap:9px; text-shadow:0 0 10px rgba(15,240,252,.5); }
.qdot{ width:9px;height:9px;border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); animation:blink 1s steps(2) infinite; }
.qcount{ font-size:18px; color:#c2a9ff; margin:9px 0 11px; }
.qcount b{ color:var(--cyan); }
.qlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.qrow{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:10px;
  background:rgba(122,60,255,.08); border:1px solid rgba(122,60,255,.25); transition:all .35s ease; }
.qrow.you{ border-color:var(--cyan); background:rgba(15,240,252,.12); box-shadow:0 0 14px rgba(15,240,252,.3); }
.qrow.live{ border-color:var(--pink); background:rgba(255,77,109,.16); box-shadow:0 0 16px rgba(255,77,109,.35); }
.qpos{ font-size:17px; color:#8f74c9; width:22px; text-align:center; }
.qrow.live .qpos{ color:var(--pink); } .qrow.you .qpos{ color:var(--cyan); }
.qav{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-family:'Audiowide',system-ui,sans-serif; font-size:11px; color:#0a0518; box-shadow:0 0 8px rgba(0,0,0,.4); }
.qname{ font-size:19px; color:var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow.you .qname{ color:var(--cyan); font-weight:bold; }
.qtag{ font-family:'Audiowide',system-ui,sans-serif; font-size:9px; color:var(--pink); white-space:nowrap; }
 
.qlist li{ display:flex; align-items:center; gap:9px; padding:3px 2px; }
.qlist li .rk{ flex:0 0 auto; min-width:26px; text-align:right; font-size:17px; color:#8f74c9; }
.qlist li .qn{ flex:1; font-size:19px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qlist li.live .rk, .qlist li.live .qn{ color:var(--pink); }
.qlist li.live .qn{ font-weight:bold; }
.qlist li.you .rk, .qlist li.you .qn{ color:var(--green); }
.qlist li.you .qn{ font-weight:bold; }
.qpaid{ flex:0 0 auto; font-family:'Audiowide',system-ui,sans-serif; font-size:11px; font-weight:bold;
  color:var(--gold); border:1px solid rgba(255,216,77,.5); border-radius:6px; padding:0 6px;
  box-shadow:0 0 8px rgba(255,216,77,.3); }
 
.qfoot .u{ font-size:.6em; opacity:.85; margin-right:1px; }
.qfoot{ font-size:17px; color:#a187d6; margin-top:13px; border-top:1px solid rgba(122,60,255,.25); padding-top:11px; line-height:1.5; }
.qfoot b{ color:var(--gold); }

 
.lbside{ flex:0 0 320px; width:320px; border:2px solid var(--gold); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,216,77,.10),rgba(13,6,34,.72));
  padding:14px; box-shadow:0 0 26px rgba(255,216,77,.22); margin-top:14px; }
.lbside .qhead{ color:var(--gold); text-shadow:0 0 10px rgba(255,216,77,.5); }
 
.lbtabs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:11px 0; }
.lbtabs button{ font-family:'VT323',monospace; font-size:13px; letter-spacing:0; cursor:pointer; color:#c2a9ff; white-space:nowrap;
  background:rgba(122,60,255,.12); border:1px solid rgba(122,60,255,.4); border-radius:7px; padding:6px 4px; transition:.12s; }
.lbtabs button.on{ color:#0a0518; background:linear-gradient(90deg,var(--gold),#ff8a5c); border-color:var(--gold); font-weight:bold; }
.sidelist{ list-style:none; margin:0; padding:0; }
.sidelist li{ display:flex; align-items:center; gap:6px; padding:5px 6px; font-size:15px; border-bottom:1px solid rgba(255,216,77,.12); }
.sidelist li:last-child{ border-bottom:none; }
.sidelist li .rk{ color:var(--gold); width:24px; text-align:center; font-family:'Audiowide',system-ui,sans-serif; font-size:10px; }
.sidelist li .nm{ flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidelist li .sc{ color:var(--pink); font-size:13px; white-space:nowrap; }
.sidelist li.me{ background:rgba(15,240,252,.12); border-radius:6px; }
.sidelist li.me .nm{ color:var(--cyan); font-weight:bold; }
.sidelist .empty{ color:#8f74c9; font-size:16px; line-height:1.4; }

@media(max-width:980px){
   
  .layout{ flex-direction:column; align-items:center; margin-top:14px; }
  .queue{ flex:none; width:100%; max-width:480px; order:-1; margin-top:0; }
  .lbside{ flex:none; width:100%; max-width:480px; margin-top:0; }
  .wrap{ width:100%; }
}

 
#menu{ display:grid; gap:14px; }
.gcard{ position:relative; cursor:pointer; overflow:hidden;
  background:linear-gradient(180deg,rgba(122,60,255,.14),rgba(13,6,34,.65));
  border-radius:14px; padding:18px 20px; transition:transform .14s,box-shadow .14s,border-color .14s; }
.gcard::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg); transition:left .5s ease; }
.gcard:hover{ transform:translateY(-4px) scale(1.01); border-color:var(--cyan); box-shadow:0 0 28px rgba(15,240,252,.42); }
.gcard:hover::before{ left:120%; }
.gcard .gname{ font-size:36px; color:var(--cyan); text-shadow:0 0 12px rgba(15,240,252,.6); line-height:1 }
.gcard .gdesc{ font-size:18px; color:#c2a9ff; margin-top:5px }
.gcard .play{ position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:'Audiowide',system-ui,sans-serif; font-size:11px; color:#160a2e;
  background:linear-gradient(90deg,var(--cyan),var(--purple)); padding:9px 13px; border-radius:8px; box-shadow:0 0 14px rgba(15,240,252,.5); }
.gcard.lbcard{ border-color:var(--gold); background:linear-gradient(180deg,rgba(255,216,77,.12),rgba(13,6,34,.65)); }
.gcard.lbcard .gname{ color:var(--gold); text-shadow:0 0 12px rgba(255,216,77,.6); }
.gcard.lbcard .play{ background:linear-gradient(90deg,var(--gold),#ff8a5c); box-shadow:0 0 14px rgba(255,216,77,.5); }
.note{ text-align:center; font-size:17px; color:#a187d6; margin-top:8px; line-height:1.4 }

 
#gameWrap{ display:none; flex-direction:column; align-items:center; width:100%; }
.bar{ width:100%; max-width:480px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 10px; gap:8px; }
.bar .gtitle{ font-family:'Audiowide',system-ui,sans-serif; font-size:14px; color:var(--cyan); text-shadow:0 0 10px rgba(15,240,252,.6); letter-spacing:1px }
.bar .hud{ font-size:22px; white-space:nowrap }
.bar .hud span{ color:var(--pink) } .bar .hud .lv{ color:var(--gold) } .bar .hud .tm{ color:var(--green) }
.bar .hud{ font-size:20px }
.backbtn{ font-family:inherit; font-size:20px; cursor:pointer; color:#c9a7ff; background:transparent; border:2px solid var(--purple); border-radius:8px; padding:5px 12px; transition:.12s }
.backbtn:hover{ border-color:var(--cyan); color:#fff; box-shadow:0 0 14px rgba(15,240,252,.4) }

.stage{ position:relative; width:100%; max-width:430px; padding:10px; border-radius:18px; touch-action:none;
  background:radial-gradient(circle at 50% 30%,rgba(122,60,255,.18),rgba(8,4,18,.9));
  box-shadow:0 0 40px rgba(122,60,255,.35), inset 0 0 60px rgba(0,0,0,.6); }
canvas{ width:100%; height:auto; display:block; image-rendering:pixelated;
  border:2px solid var(--purple); border-radius:12px; background:#0a0518; box-shadow:0 0 30px rgba(122,60,255,.5); }
.crt{ position:absolute; inset:10px; border-radius:12px; pointer-events:none; z-index:5;
  background:radial-gradient(120% 120% at 50% 50%,transparent 60%,rgba(0,0,0,.55) 100%),linear-gradient(120deg,rgba(255,255,255,.06),transparent 30%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.5); }
.overlay{ position:absolute; inset:10px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  background:rgba(10,5,24,.86); border-radius:12px; z-index:6; }
.overlay .big{ font-family:'Audiowide',system-ui,sans-serif; font-size:28px; color:var(--pink); text-shadow:0 0 18px rgba(255,77,109,.7); animation:pop .3s ease }
.overlay .big.win{ color:var(--gold); text-shadow:0 0 18px rgba(255,216,77,.8) }
.overlay .sc{ font-size:28px; color:var(--cyan); margin-top:4px }
.overlay .note2{ font-size:18px; color:var(--gold); }
.overlay .hint{ font-size:20px; color:#b79bff; margin-top:8px; animation:blink 1s steps(2) infinite }
 
.overlay .tcard{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; overflow:hidden; border-radius:12px; isolation:isolate;
  background:radial-gradient(120% 80% at 50% 22%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%); }
 
.overlay .tc-sun{ position:absolute; z-index:0; top:34%; left:50%; width:230px; height:230px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, #fff 0%, var(--acc) 42%, transparent 70%);
  filter:blur(7px); opacity:.30; animation:tcSun 2.4s ease-in-out infinite; }
 
.overlay .tc-grid{ position:absolute; z-index:0; left:-25%; right:-25%; bottom:-12%; height:48%;
  background:repeating-linear-gradient(90deg, transparent 0 40px, var(--acc) 40px 41px),
             repeating-linear-gradient(0deg, transparent 0 26px, var(--acc) 26px 27px);
  transform:perspective(300px) rotateX(64deg); transform-origin:bottom center; opacity:.16;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 88%); mask-image:linear-gradient(to top,#000,transparent 88%);
  animation:tcGrid 1.1s linear infinite; }
 
.overlay .tc-name{ position:relative; z-index:1; font-family:'Audiowide',system-ui,sans-serif; font-size:48px; letter-spacing:4px; color:#fff;
  text-shadow:0 0 6px #fff, 0 0 16px var(--acc), 0 0 40px var(--acc), 2px 0 rgba(255,46,136,.45), -2px 0 rgba(15,240,252,.45);
  animation:tcIn .5s cubic-bezier(.2,1.3,.35,1) both, tcFlicker 2.4s steps(1) .55s infinite; }
 
.overlay .tc-rule{ position:relative; z-index:1; width:0; height:2px; background:var(--acc); border-radius:2px;
  box-shadow:0 0 10px var(--acc), 0 0 22px var(--acc); animation:tcRule .55s ease .25s both; }
.overlay .tc-tag{ position:relative; z-index:1; font-family:'VT323',monospace; font-size:22px; letter-spacing:3px; text-transform:uppercase;
  color:#eaf6ff; opacity:0; animation:tcFade .4s ease .55s both; }
.overlay .tc-press{ position:relative; z-index:1; margin-top:8px; font-family:'Audiowide',system-ui,sans-serif; font-size:12px; letter-spacing:3px;
  color:#b79bff; opacity:0; animation:tcFade .4s ease .85s both, blink 1.1s steps(2) 1.25s infinite; }
@keyframes tcIn{ 0%{ transform:scale(.55); opacity:0; filter:blur(6px) } 100%{ transform:scale(1); opacity:1; filter:none } }
@keyframes tcRule{ to{ width:60% } }
@keyframes tcFade{ to{ opacity:1 } }
@keyframes tcSun{ 0%,100%{ opacity:.26; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:.46; transform:translate(-50%,-50%) scale(1.08) } }
@keyframes tcGrid{ to{ transform:perspective(300px) rotateX(64deg) translateY(27px) } }
@keyframes tcFlicker{ 0%,17%,20%,100%{ opacity:1 } 18%{ opacity:.7 } 19%{ opacity:.92 } }
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes blink{50%{opacity:.25}}
.flash{ position:absolute; inset:10px; border-radius:12px; pointer-events:none; z-index:7; background:#fff; opacity:0; }

 
.controls{ width:100%; max-width:430px; margin-top:16px; display:none; align-items:center; justify-content:space-between; gap:10px; }
.dpad{ display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,48px); gap:6px }
.dpad button{ font-family:inherit; font-size:24px; color:var(--cyan); touch-action:none;
  background:rgba(122,60,255,.16); border:2px solid var(--purple); border-radius:10px; cursor:pointer; transition:.08s }
.dpad button:active{ background:var(--purple); color:#fff; box-shadow:0 0 16px rgba(122,60,255,.7); transform:scale(.94) }
.dpad .up{ grid-column:2; grid-row:1 } .dpad .left{ grid-column:1; grid-row:2 }
.dpad .right{ grid-column:3; grid-row:2 } .dpad .down{ grid-column:2; grid-row:3 }
.dpad .mid{ grid-column:2; grid-row:2; border-color:rgba(122,60,255,.4); background:rgba(122,60,255,.06); cursor:default }
 
.act{ font-family:'Audiowide',system-ui,sans-serif; font-size:18px; letter-spacing:1px; line-height:1; color:var(--cyan);
  font-weight:bold; text-align:center; touch-action:none; -webkit-user-select:none; user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:104px; min-height:60px; padding:10px 20px;
  background:rgba(122,60,255,.16); border:2px solid var(--purple); border-radius:14px; cursor:pointer;
  box-shadow:0 0 14px rgba(122,60,255,.35); transition:transform .08s, box-shadow .12s, background .12s, border-color .12s }
 
.act .sub{ font-size:inherit; letter-spacing:inherit; font-weight:inherit; color:inherit;
  opacity:1; text-shadow:none; animation:none; margin-top:0 }
.act:hover{ border-color:var(--cyan); box-shadow:0 0 20px rgba(15,240,252,.5) }
.act:active{ background:var(--purple); color:#fff; transform:scale(.96); box-shadow:0 0 18px rgba(122,60,255,.7) }
.kbd{ text-align:center; font-size:16px; color:#8a70c6; margin-top:12px }
.mbar{ display:none; }
.mbar .mbig{ font-size:26px; color:var(--cyan); letter-spacing:4px; }
@media (max-width:760px){
   
  .controls{ display:flex; }
  .mbar{ display:none; }             
  .kbd{ display:none; }
   
  #gameWrap:not(.vert) .dpad{ display:flex; justify-content:center; gap:10px; }
  #gameWrap:not(.vert) .dpad .up,
  #gameWrap:not(.vert) .dpad .down{ display:none; }
}

 
@media (max-width:760px){
  body.playing{ overflow:hidden; height:100dvh; }
  body.playing #appHeader{ display:none; }            
  body.playing .queue, body.playing .lbside{ display:none; }
  body.playing #footer{ display:none; }
  body.playing .audio-controls{ display:none; }
  body.playing .layout{ padding:0; gap:0; height:100dvh; }
  body.playing .wrap{ padding:0; height:100dvh; max-width:none; }
   
  body.playing #gameWrap{ position:relative; height:100dvh; justify-content:flex-start; gap:10px;
    padding:46px 0 calc(10px + env(safe-area-inset-bottom)); }
  body.playing .bar{ flex:0 0 auto; max-width:none; padding:4px 10px 6px; }
   
  body.playing .stage{ flex:0 0 auto; max-width:none; width:100%;
    display:flex; align-items:center; justify-content:center; padding:6px; }
  body.playing .stage canvas{ width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 300px); }
  body.playing .crt, body.playing .overlay, body.playing .flash{ inset:6px; }
   
   
  body.playing .controls{ flex:0 0 auto; margin-top:0; max-width:none; padding:0 16px; gap:16px; justify-content:center; }
  body.playing .dpad{ grid-template-columns:repeat(3,68px); grid-template-rows:repeat(3,68px); gap:8px; }
  body.playing .dpad button{ width:68px; height:68px; font-size:34px; border-radius:14px; }
   
  body.playing .act{ position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:9;
    flex-direction:row; gap:7px; min-width:0; min-height:0; padding:8px 20px; font-size:15px; border-radius:12px; }
  body.playing .act:active{ transform:translateX(-50%) scale(.96); }
   
  body.playing #gameWrap:not(.vert) .controls{ align-items:center; padding:0 22px; }
  body.playing #gameWrap:not(.vert) .dpad{ display:flex; width:100%; justify-content:space-between; gap:0; }
  body.playing #gameWrap:not(.vert) .dpad .mid{ display:none; }
   
  body.playing #gameWrap.vert .controls{ align-items:center; padding:0 22px; }
  body.playing #gameWrap.vert .dpad{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:0; }
  body.playing #gameWrap.vert .dpad .mid{ display:none; }
  body.playing #gameWrap.vert .dpad .left{ order:1 }
  body.playing #gameWrap.vert .dpad .up{ order:2 }
  body.playing #gameWrap.vert .dpad .down{ order:3 }
  body.playing #gameWrap.vert .dpad .right{ order:4 }
   
  body.playing #gameWrap.fire:not(.vert) .dpad{ gap:16px; }
  body.playing #gameWrap.fire:not(.vert) .dpad .mid{ display:flex; align-items:center; justify-content:center;
    flex:1 1 auto; width:auto; height:68px; font-size:0; cursor:pointer; border-color:var(--pink);
    background:rgba(255,77,109,.18); box-shadow:0 0 14px rgba(255,77,109,.35); }
  body.playing #gameWrap.fire:not(.vert) .dpad .mid::after{ content:'FIRE'; font-size:20px;
    font-family:'Audiowide',system-ui,sans-serif; letter-spacing:2px; color:var(--pink); }
  body.playing #gameWrap.fire:not(.vert) .dpad .mid:active{ background:var(--pink);
    box-shadow:0 0 18px rgba(255,77,109,.7); transform:scale(.94); }
  body.playing #gameWrap.fire:not(.vert) .dpad .mid:active::after{ color:#160a2e; }
}

 
#boardView{ display:none; }
.board-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.board-head .bt{ font-family:'Audiowide',system-ui,sans-serif; font-size:16px; color:var(--gold); text-shadow:0 0 12px rgba(255,216,77,.6); }
.board-head .board-spacer{ width:60px; }    
.lb{ border:2px solid var(--purple); border-radius:12px; padding:12px 14px; margin-bottom:14px;
  background:linear-gradient(180deg,rgba(122,60,255,.10),rgba(13,6,34,.6)); }
.lb h3{ margin:0 0 8px; font-family:'Audiowide',system-ui,sans-serif; font-size:13px; color:var(--cyan); }
.lb ol{ margin:0; padding:0; list-style:none; }
.lb li{ display:flex; align-items:center; gap:8px; padding:5px 6px; font-size:20px; border-bottom:1px solid rgba(122,60,255,.15); }
.lb li:last-child{ border-bottom:none; }
.lb li .rk{ color:var(--gold); width:30px; text-align:center; font-family:'Audiowide',system-ui,sans-serif; font-size:12px; }
.lb li .nm{ flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb li .sc{ color:var(--pink); }
.lb li.me{ background:rgba(15,240,252,.12); border-radius:6px; }
.lb li.me .nm{ color:var(--cyan); font-weight:bold; }
.lb .empty{ color:#8f74c9; font-size:18px; }

 
.sound{ position:fixed; top:16px; right:16px; z-index:70; font-family:inherit; font-size:22px; cursor:pointer;
  color:var(--cyan); background:rgba(13,6,34,.7); border:2px solid var(--purple); border-radius:10px; padding:4px 12px; }
.sound:hover{ border-color:var(--cyan); box-shadow:0 0 14px rgba(15,240,252,.4) }
.sound svg{ width:20px; height:20px; display:block }    
.userbtn{ position:fixed; top:16px; left:16px; z-index:70; font-family:inherit; font-size:20px; cursor:pointer; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--gold); background:rgba(13,6,34,.7); border:2px solid var(--purple); border-radius:10px; padding:4px 12px; }
.userbtn:hover{ border-color:var(--gold); box-shadow:0 0 14px rgba(255,216,77,.4); }
.modal{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; background:rgba(6,3,16,.82); }
.modal .mc{ width:300px; border:2px solid var(--cyan); border-radius:14px; padding:22px; background:linear-gradient(180deg,#1a0c38,#0d0622); box-shadow:0 0 34px rgba(15,240,252,.45); text-align:center; }
.modal h2{ font-family:'Audiowide',system-ui,sans-serif; font-size:14px; color:var(--cyan); margin:0 0 6px; }
.modal p{ font-size:17px; color:#b79bff; margin:0 0 14px; }
.modal input{ width:100%; font-family:'VT323',monospace; font-size:24px; padding:8px 10px; border-radius:8px; border:2px solid var(--purple); background:#0a0518; color:var(--ink); outline:none; text-align:center; }
.modal input:focus{ border-color:var(--cyan); box-shadow:0 0 12px rgba(15,240,252,.4); }
.modal .mb{ margin-top:16px; display:flex; gap:8px; }
.modal button{ flex:1; font-family:'Audiowide',system-ui,sans-serif; font-size:11px; padding:13px 8px; border:none; border-radius:8px; cursor:pointer; }
.modal .ok{ background:linear-gradient(90deg,var(--cyan),var(--purple)); color:#0a0518; }
.modal .cancel{ background:transparent; border:2px solid var(--purple); color:#c9a7ff; }

 
.homelink{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:70;
  font-family:'Audiowide',system-ui,sans-serif; font-size:13px; letter-spacing:1px; text-decoration:none;
  color:#0a0518; background:var(--cyan); padding:8px 14px; border-radius:8px;
  box-shadow:0 0 14px rgba(15,240,252,.6); }
.homelink:hover{ background:#fff; }
.qtoast{ position:fixed; left:50%; top:64px; transform:translateX(-50%) translateY(-12px);
  z-index:90; font-family:'Audiowide',system-ui,sans-serif; font-size:13px; letter-spacing:1px;
  color:#0a0518; background:var(--gold); padding:10px 18px; border-radius:10px;
  box-shadow:0 0 22px rgba(255,216,77,.7); opacity:0; pointer-events:none; transition:.25s; }
.qtoast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

 
.langsel{ position:fixed; top:18px; right:70px; z-index:71; display:flex; gap:4px; }
.langsel button{ font-family:'Audiowide',system-ui,sans-serif; font-size:11px; padding:5px 8px; cursor:pointer;
  color:#9a7bd0; background:transparent; border:1px solid var(--purple); border-radius:6px; }
.langsel button.on{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 8px rgba(15,240,252,.4); }

 
.langsel{display:none}

 
body{font-family:'Audiowide',system-ui,sans-serif}
.lbtabs button{font-family:'Audiowide',system-ui,sans-serif}
 
#gameWrap, #gameWrap *{font-family:'VT323',monospace}
 
#gameWrap, #gameWrap *, .gcard, .backbtn{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}

 
 
.sound.floating{ top:auto; right:auto; bottom:16px; left:16px; z-index:80;
  background:rgba(20,8,40,.85); border:1px solid var(--purple); border-radius:10px;
  padding:6px 11px; font-family:'Audiowide',system-ui,sans-serif; font-size:14px; color:var(--cyan);
  box-shadow:0 0 12px rgba(122,60,255,.35); }
 
.audio-controls{ position:fixed; bottom:16px; left:16px; z-index:80; display:flex; gap:8px; }
.audio-controls .sound.floating{ position:static; bottom:auto; left:auto; }

 
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-48px;z-index:9999;background:var(--cyan);
  color:#04222a;padding:9px 14px;border-radius:8px;font-family:'Audiowide',system-ui,sans-serif;
  font-size:13px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible,
.gcard:focus-visible,.backbtn:focus-visible,.dpad button:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
 
.langsel button,.lbtabs button{min-width:24px;min-height:24px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

 
@media (max-width:880px){
  html,body{overflow-x:hidden;overscroll-behavior:none}
  body{touch-action:pan-y}
}
 
body.playing .stage,#mbar{touch-action:none}