/* ============================================================
   ACID TETRIS - interface styling
   ============================================================ */

:root{
  --ink:#e9dcff;
  --dim:#9d8fc4;
  --menu:#b09ae8;
  --menu-hot:#ffe9ff;
  --acid-red:#c8182c;
  --acid-blue:#2b3cff;
  --panel-bg:rgba(10,3,24,.72);
  --panel-line:rgba(178,107,255,.45);
  --glow:0 0 18px rgba(178,107,255,.55);
  --pf-x:0px; --pf-y:0px; --pf-w:0px; --pf-h:0px; --u:24px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  background:#05010e;
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

#stage{position:fixed;inset:0;overflow:hidden}

canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#scene{display:none}          /* fed to the GL compositor; shown only as a fallback */
body.no-gl #scene{display:block}
body.no-gl #gl{display:none}

/* ------------------------------------------------------------
   Screens
   ------------------------------------------------------------ */
#screens{position:absolute;inset:0;pointer-events:none}

.screen{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;align-items:center;
  /* "safe" keeps the top of an overflowing screen reachable instead of
     clipping it above the scroll origin; ignored by browsers without it */
  justify-content:center;
  justify-content:safe center;
  gap:clamp(14px,2.4vh,30px);
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  pointer-events:auto;
  overflow-y:auto;
  background:radial-gradient(120% 90% at 50% 45%,rgba(4,0,12,.30),rgba(3,0,10,.86));
  backdrop-filter:blur(3px) saturate(1.3);
  animation:screenIn .28s ease-out both;
}
.screen.active{display:flex}
@keyframes screenIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}

body.playing .screen{background:radial-gradient(120% 90% at 50% 45%,rgba(4,0,12,.44),rgba(3,0,10,.9))}

/* ------------------------------------------------------------
   Logo  -  red 3D "ACID" over big blue outlined "TETRIS"
   ------------------------------------------------------------ */
.logo{
  text-align:center;line-height:.86;user-select:none;
  filter:drop-shadow(0 0 26px rgba(43,60,255,.45));
  animation:logoBreathe 7s ease-in-out infinite;
}
.logo.small{transform:scale(.56);margin:-3vh 0 -4vh}
@keyframes logoBreathe{
  0%,100%{transform:perspective(700px) rotateX(0deg) scale(1)}
  50%{transform:perspective(700px) rotateX(4deg) scale(1.015)}
}
.logo.small{animation:none}

.logo-acid{
  font-size:clamp(26px,5.4vw,64px);
  font-weight:900;letter-spacing:.14em;
  color:#e8324a;
  -webkit-text-stroke:1px #6b0410;
  text-shadow:
    0 2px 0 #a41123, 0 3px 0 #8d0e1d, 0 4px 0 #760b18,
    0 6px 12px rgba(200,24,44,.7),
    0 0 34px rgba(255,60,90,.85);
  margin-bottom:.06em;
  animation:acidHue 9s linear infinite;
}
@keyframes acidHue{
  0%,100%{filter:hue-rotate(0deg)}
  50%{filter:hue-rotate(-22deg) brightness(1.15)}
}

.logo-tetris{
  position:relative;
  font-size:clamp(64px,15.5vw,190px);
  font-weight:900;letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:clamp(2px,.34vw,4px) #3b4dff;
  text-shadow:0 0 40px rgba(43,60,255,.75),0 0 90px rgba(80,40,255,.45);
}
.logo-tetris::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:transparent;
  -webkit-text-stroke:clamp(1px,.2vw,2px) #b26bff;
  opacity:.55;
  transform:translate(3px,-3px);
  animation:tetrisDrift 6s ease-in-out infinite alternate;
}
@keyframes tetrisDrift{
  from{transform:translate(3px,-3px);opacity:.35}
  to{transform:translate(-4px,4px);opacity:.7}
}
body.sober .logo,body.sober .logo-acid,body.sober .logo-tetris::after{animation:none}

/* ------------------------------------------------------------
   Menus
   ------------------------------------------------------------ */
.menu{display:flex;flex-direction:column;align-items:center;gap:.12em}
.menu.compact{gap:.05em;margin-top:.6em}

.mi{
  position:relative;
  background:none;border:0;cursor:pointer;
  font:inherit;font-weight:800;
  font-size:clamp(17px,2.5vw,30px);
  letter-spacing:.04em;
  color:var(--menu);
  padding:.14em 1.6em;
  text-shadow:0 0 12px rgba(140,90,255,.55);
  transition:color .12s,transform .12s,text-shadow .12s;
  white-space:nowrap;
}
.mi:hover,.mi.sel{
  color:var(--menu-hot);
  text-shadow:0 0 10px #fff,0 0 26px #d07bff,0 0 48px #7a3cff;
  transform:scale(1.045);
}
.mi.sel::before,.mi.sel::after{
  content:"\25B8";position:absolute;top:50%;transform:translateY(-50%);
  color:#ff4fd8;text-shadow:0 0 12px #ff4fd8;
  animation:pulseArrow .9s ease-in-out infinite;
}
.mi.sel::before{left:.2em}
.mi.sel::after{right:.2em;transform:translateY(-50%) scaleX(-1)}
@keyframes pulseArrow{0%,100%{opacity:.35}50%{opacity:1}}
.mi span{color:#ffd9f4}
.mi[disabled]{opacity:.35;cursor:default}

.hint{
  font-size:clamp(11px,1.35vw,14px);
  color:var(--dim);letter-spacing:.1em;text-transform:uppercase;
}
.hint .k{
  display:inline-block;margin:0 .35em;padding:.12em .5em;
  border:1px solid var(--panel-line);border-radius:5px;
  color:var(--ink);background:rgba(178,107,255,.1);
}

/* ------------------------------------------------------------
   Panels
   ------------------------------------------------------------ */
.panel{
  width:min(560px,92vw);
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  border-radius:16px;
  padding:clamp(18px,3vw,32px);
  box-shadow:var(--glow),inset 0 0 60px rgba(120,40,255,.14);
  text-align:center;
  display:flex;flex-direction:column;gap:14px;
}
.panel.wide{width:min(760px,94vw);text-align:left}
.panel.warn{border-color:rgba(255,90,120,.5);box-shadow:0 0 24px rgba(255,60,90,.35)}

.panel h2{
  font-size:clamp(19px,2.7vw,30px);letter-spacing:.12em;
  color:#fff;text-shadow:0 0 14px #b26bff,0 0 34px #6a2bff;
}
.panel p{font-size:clamp(13px,1.6vw,16px);line-height:1.6}
.dim{color:var(--dim)}
code,kbd{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.92em;
  background:rgba(178,107,255,.14);border:1px solid var(--panel-line);
  border-radius:5px;padding:.08em .42em;color:#ffd9f4;
}

.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.row.col{flex-direction:column;align-items:stretch}

.btn{
  font:inherit;font-weight:700;font-size:clamp(13px,1.6vw,16px);
  letter-spacing:.06em;
  color:var(--ink);
  background:rgba(178,107,255,.1);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:.72em 1.3em;cursor:pointer;
  transition:transform .12s,background .12s,box-shadow .12s;
}
.btn:hover,.btn.sel{background:rgba(178,107,255,.26);transform:translateY(-1px);box-shadow:0 0 18px rgba(178,107,255,.5)}
.btn.primary{
  background:linear-gradient(100deg,#ff2d95,#7a3cff 55%,#00e5ff);
  color:#0b0018;border-color:transparent;font-weight:900;
  box-shadow:0 0 24px rgba(255,45,149,.45);
}
.btn.primary:hover{filter:brightness(1.12)}

/* ------------------------------------------------------------
   Lists (tracks, bindings, scores)
   ------------------------------------------------------------ */
.tracklist,.bindlist,.scores,.credits{list-style:none;max-height:44vh;overflow-y:auto;padding-right:4px}
.tracklist li,.bindlist li,.credits li{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:.55em .7em;border-bottom:1px dashed rgba(178,107,255,.22);
  font-size:clamp(12px,1.5vw,15px);
}
.tracklist li{cursor:pointer;border-radius:8px}
.tracklist li:hover{background:rgba(178,107,255,.14)}
.tracklist li.playing{background:rgba(255,45,149,.18);color:#fff}
.tracklist li.playing::before{content:"\25B6\FE0E";color:#ff4fd8;margin-right:.2em}
.tracklist .len{color:var(--dim);font-variant-numeric:tabular-nums}
.tracklist .empty{justify-content:center;color:var(--dim);cursor:default}

.bindlist li{cursor:pointer;border-radius:8px}
.bindlist li:hover,.bindlist li.sel{background:rgba(178,107,255,.16)}
.bindlist li.listening{background:rgba(255,45,149,.22);animation:listenPulse .7s ease-in-out infinite}
@keyframes listenPulse{0%,100%{opacity:.7}50%{opacity:1}}
.bindlist .act{font-weight:700;letter-spacing:.05em}
.bindlist .keys{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bindlist .keys span{
  background:rgba(178,107,255,.16);border:1px solid var(--panel-line);
  border-radius:6px;padding:.16em .5em;min-width:2.6em;text-align:center;
  font-family:ui-monospace,Consolas,monospace;font-size:.9em;color:#ffd9f4;
}
.bindlist .keys span.pad{background:rgba(0,229,255,.14);border-color:rgba(0,229,255,.4);color:#c9f7ff}

.scores li{
  display:flex;gap:14px;align-items:baseline;
  padding:.42em .7em;border-bottom:1px dashed rgba(178,107,255,.22);
  font-variant-numeric:tabular-nums;font-size:clamp(12px,1.6vw,16px);
}
.scores li .rank{width:2.2em;color:var(--dim)}
.scores li .who{flex:1;font-weight:700;letter-spacing:.05em}
.scores li .sc{color:#ffd9f4;font-weight:800}
.scores li .meta{color:var(--dim);width:9em;text-align:right}
.scores li.fresh{color:#fff;text-shadow:0 0 12px #ff4fd8}
.credits li{border-bottom:1px dashed rgba(178,107,255,.16)}
.credits em{color:var(--dim);font-style:normal;text-align:right}

.finals{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;
  font-variant-numeric:tabular-nums;margin:2px 0;
}
.finals div{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px dashed rgba(178,107,255,.22);padding:.3em 0;font-size:clamp(12px,1.5vw,15px)}
.finals b{color:#ffd9f4}

#hs-name{
  font:inherit;font-weight:800;letter-spacing:.22em;text-align:center;text-transform:uppercase;
  background:rgba(178,107,255,.12);border:1px solid var(--panel-line);border-radius:10px;
  color:#fff;padding:.5em;width:100%;
}
#hs-name:focus{outline:2px solid #ff4fd8;outline-offset:2px}

/* ------------------------------------------------------------
   Glitch heading
   ------------------------------------------------------------ */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;
}
.glitch::before{color:#00e5ff;transform:translate(-2px,1px);opacity:.75;animation:gl1 2.4s infinite steps(2)}
.glitch::after{color:#ff2d95;transform:translate(2px,-1px);opacity:.75;animation:gl2 3.1s infinite steps(2)}
@keyframes gl1{0%,92%,100%{clip-path:inset(0 0 0 0)}94%{clip-path:inset(42% 0 38% 0)}96%{clip-path:inset(12% 0 76% 0)}}
@keyframes gl2{0%,90%,100%{clip-path:inset(0 0 0 0)}93%{clip-path:inset(66% 0 12% 0)}97%{clip-path:inset(28% 0 58% 0)}}
body.sober .glitch::before,body.sober .glitch::after{display:none}

/* ------------------------------------------------------------
   Banners / toasts
   ------------------------------------------------------------ */
#banner{
  position:absolute;left:50%;top:16%;transform:translateX(-50%);
  pointer-events:none;text-align:center;z-index:5;
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.bnr{
  font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(18px,3.4vw,44px);
  color:#fff;
  text-shadow:0 0 12px #fff,0 0 30px #ff2d95,0 0 60px #7a3cff;
  animation:bnr 1.5s cubic-bezier(.2,.9,.2,1) forwards;
  white-space:nowrap;
}
.bnr.sub{font-size:clamp(12px,1.9vw,22px);letter-spacing:.3em;color:#ffd9f4;text-shadow:0 0 14px #b26bff}
@keyframes bnr{
  0%{opacity:0;transform:scale(.6) rotate(-4deg)}
  16%{opacity:1;transform:scale(1.12) rotate(1deg)}
  30%{transform:scale(1)}
  74%{opacity:1}
  100%{opacity:0;transform:scale(1.08) translateY(-26px)}
}

#nowplaying,#padtoast{
  position:absolute;bottom:14px;left:14px;z-index:6;
  background:rgba(10,3,24,.74);border:1px solid var(--panel-line);border-radius:10px;
  padding:.5em .9em;font-size:13px;color:var(--ink);
  box-shadow:var(--glow);pointer-events:none;
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;
  max-width:min(420px,60vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#padtoast{bottom:auto;top:14px;left:auto;right:14px}
#nowplaying.show,#padtoast.show{opacity:1;transform:none}
#nowplaying b{color:#ff8fe0}



/* ------------------------------------------------------------
   Touch controls
   ------------------------------------------------------------ */
#touch{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  padding:8px 8px max(8px,env(safe-area-inset-bottom));
  pointer-events:none;
}
body.touch.playing #touch{display:grid}
#touch[hidden]{display:none}
#touch button{
  pointer-events:auto;
  font:inherit;font-weight:800;font-size:15px;
  color:var(--ink);background:rgba(12,4,28,.6);
  border:1px solid var(--panel-line);border-radius:12px;
  padding:14px 0;backdrop-filter:blur(4px);
  touch-action:none;user-select:none;
}
#touch button:active{background:rgba(178,107,255,.35);transform:scale(.96)}
#touch button.wide{grid-column:span 3}
#touch button[data-touch="soft"]{grid-column:span 2}
#touch button[data-touch="pause"]{grid-column:span 1}

/* ------------------------------------------------------------
   Scrollbars
   ------------------------------------------------------------ */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(178,107,255,.06)}
::-webkit-scrollbar-thumb{background:rgba(178,107,255,.4);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,45,149,.6)}

/* short viewports: tighten everything so the long menus fit without scrolling */
@media (max-height:820px){
  .logo.small{transform:scale(.44);margin:-6vh 0 -7vh}
  .menu{gap:0}
  .mi{font-size:clamp(15px,2.1vw,24px);padding:.10em 1.5em}
  .screen{gap:clamp(8px,1.4vh,18px)}
  .tracklist,.bindlist,.scores,.credits{max-height:38vh}
  .panel{padding:clamp(14px,2vw,22px);gap:10px}
}
@media (max-height:640px){
  .logo.small{display:none}
  .hint{display:none}
  .mi{font-size:clamp(14px,1.9vw,20px)}
}

@media (max-width:560px){
  .panel{padding:16px}
  .finals{grid-template-columns:1fr}
  .mi{padding:.14em 1.2em}
}
@media (prefers-reduced-motion:reduce){
  .logo,.logo-acid,.logo-tetris::after,.glitch::before,.glitch::after{animation:none}
}