/* ===================== SWING — neon dusk ===================== */
:root{
  --bg:#140F2E;
  --ink:#0C0920;
  --paper:#F5EEFF;
  --muted:#A99CD0;
  --cyan:#5CE0D8;
  --coral:#FF6E6E;
  --lime:#BCFF5C;
  --gold:#FFC24B;
  --pink:#FF5CA8;
  --violet:#7A5CFF;
  --panel:rgba(22,16,48,.86);
  --line:rgba(140,120,220,.22);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }   /* author display rules must not defeat the hidden attribute */
html,body{ height:100%; overflow:hidden; background:var(--bg); }
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--paper);
  position:fixed; inset:0;
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'Chivo Mono',ui-monospace,monospace; }
.hide{ display:none !important; }
a{ color:var(--cyan); text-decoration:none; }

#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ---------------- no canvas ---------------- */
#nogl{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:50; text-align:center; padding:24px; }
#nogl p{ color:var(--muted); line-height:1.6; margin-top:14px; }
.wordmark-mini{ font-family:'Bungee',cursive; font-size:26px; letter-spacing:2px; display:flex; gap:2px; justify-content:center; }
.wordmark-mini span{ color:var(--paper); }
.wordmark-mini span:nth-child(3n){ color:var(--cyan); }
.wordmark-mini.sm{ font-size:20px; }

/* ==================== HUD ==================== */
#hud{ position:fixed; inset:0; z-index:20; pointer-events:none; }
#hud button{ pointer-events:auto; }

#distWrap{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); left:0; right:0;
  text-align:center; font-family:'Bungee',cursive;
  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 24px rgba(92,224,216,.35);
  line-height:1;
}
#distV{ font-size:15vw; letter-spacing:1px; }
#distWrap .unit{ font-size:5vw; color:var(--cyan); margin-left:4px; }

#multWrap{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); left:14px;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
#multWrap svg{ position:absolute; inset:0; width:52px; height:52px; transform:rotate(-90deg); }
#multWrap .ring-bg{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:5; }
#multArc{ fill:none; stroke:var(--gold); stroke-width:5; stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:119.4; transition:stroke-dashoffset .1s linear; }
#multV{ font-family:'Bungee',cursive; font-size:19px; color:var(--gold); z-index:1; }
#multWrap.hot #multV{ color:#fff; }
#multWrap.hot #multArc{ stroke:var(--coral); }

#pbFlag{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 20px); right:64px;
  font-size:12px; color:var(--muted); background:rgba(0,0,0,.28);
  padding:3px 8px; border-radius:8px; border:1px solid var(--line);
}
#pbFlag::before{ content:'PB '; color:var(--cyan); }

#banner{
  position:absolute; top:31%; left:50%; transform:translate(-50%,-50%);
  font-family:'Bungee',cursive; font-size:9vw; color:var(--gold);
  text-shadow:0 4px 0 rgba(0,0,0,.4); white-space:nowrap; text-align:center;
}

#topRight{ position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:12px; display:flex; gap:8px; }
#topRight button{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:rgba(14,10,32,.5); color:var(--paper); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
#topRight button:active{ transform:scale(.92); }
#muteBtn.off{ color:var(--muted); opacity:.55; }

#popupLayer{ position:absolute; inset:0; overflow:hidden; }
.pop{
  position:absolute; font-family:'Bungee',cursive; font-size:22px; color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.4); white-space:nowrap;
  animation:popRise 1s cubic-bezier(.2,.8,.3,1) forwards; will-change:transform,opacity;
}
.pop.cyan{ color:var(--cyan); } .pop.coral{ color:var(--coral); } .pop.lime{ color:var(--lime); }
.pop.sm{ font-size:16px; }
@keyframes popRise{ 0%{ transform:translate(-50%,0) scale(.6); opacity:0; } 18%{ transform:translate(-50%,-14px) scale(1.15); opacity:1; } 100%{ transform:translate(-50%,-58px) scale(1); opacity:0; } }

#keyHints{
  position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--muted); background:rgba(0,0,0,.3); padding:6px 12px; border-radius:20px;
  border:1px solid var(--line); white-space:nowrap;
}

/* ==================== intro ==================== */
#intro{
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 8%, #3A1E63 0%, #1A1440 46%, #0E0A24 100%);
}
.wm{ text-align:center; width:min(90vw,440px); padding:20px; }
.wm-word{ font-family:'Bungee',cursive; font-size:min(24vw,120px); line-height:.9; display:flex; justify-content:center; gap:.02em; }
.wm .wl{ display:inline-block; animation:wlDrop .6s cubic-bezier(.2,1.3,.4,1) backwards; }
.wm .w0{ color:var(--coral); animation-delay:.02s; }
.wm .w1{ color:var(--gold); animation-delay:.09s; }
.wm .w2{ color:var(--lime); animation-delay:.16s; }
.wm .w3{ color:var(--cyan); animation-delay:.23s; }
.wm .w4{ color:var(--violet); animation-delay:.30s; }
@keyframes wlDrop{ 0%{ transform:translateY(-40px) rotate(-8deg); opacity:0; } 100%{ transform:none; opacity:1; } }
.wm-arc{ width:70%; max-width:280px; height:auto; margin:-6px auto 2px; display:block; }
.wm-tag{ font-family:'Chivo Mono',monospace; color:var(--cyan); letter-spacing:3px; font-size:13px; text-transform:uppercase; margin-bottom:26px; }
.intro-btns{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.intro-hint{ color:var(--muted); font-size:12px; margin-top:18px; opacity:.8; }

/* ==================== buttons ==================== */
.big-btn{
  font-family:'Bungee',cursive; font-size:22px; letter-spacing:1px;
  color:var(--ink); background:linear-gradient(180deg,#6CE9E0,#37C9BF);
  border:none; border-radius:16px; padding:16px 40px; cursor:pointer;
  box-shadow:0 5px 0 #1E8A82, 0 8px 22px rgba(0,0,0,.4);
  width:min(78vw,320px); position:relative; transition:transform .05s, box-shadow .05s;
}
.big-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #1E8A82, 0 3px 10px rgba(0,0,0,.4); }
.big-btn.ghost{
  color:var(--paper); background:rgba(255,255,255,.06);
  box-shadow:0 4px 0 rgba(0,0,0,.35); border:1px solid var(--line);
}
.big-btn .dot{ position:absolute; top:8px; right:12px; width:11px; height:11px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); }
.text-btn{ background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:8px; letter-spacing:2px; text-transform:uppercase; }
.text-btn:active{ color:var(--paper); }

/* ==================== panels ==================== */
.panel{
  position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  background:rgba(10,7,26,.78); backdrop-filter:blur(8px); padding:16px; overflow-y:auto;
}
.panel-inner{
  width:min(94vw,440px); background:var(--panel); border:1px solid var(--line);
  border-radius:24px; padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 18px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); max-height:96vh;
}
.kicker{ color:var(--cyan); letter-spacing:3px; font-size:12px; text-transform:uppercase; }
.sheet-btns{ display:flex; flex-direction:column; gap:10px; width:100%; align-items:center; }
.sheet-btns.row{ flex-direction:row; justify-content:center; flex-wrap:wrap; }
.sheet-btns.row .big-btn{ width:auto; flex:1; min-width:130px; font-size:17px; padding:14px 18px; }
.foot{ font-size:11px; color:var(--muted); margin-top:2px; }
.foot a{ color:var(--muted); }
.fine{ font-size:11px; color:var(--muted); text-align:center; }

.best-strip{ display:flex; gap:12px; width:100%; }
.stat{ flex:1; background:rgba(0,0,0,.24); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; }
.stat b{ font-family:'Bungee',cursive; font-size:26px; display:block; color:var(--gold); }
.stat span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

.setRow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.tog{
  font-family:'Chivo Mono',monospace; font-size:12px; letter-spacing:1px;
  padding:11px 8px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.2); color:var(--muted); cursor:pointer; text-align:center;
}
.tog.on{ color:var(--ink); background:var(--cyan); border-color:var(--cyan); font-weight:700; }

/* achievements */
#achGrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; width:100%; }
.ach{
  aspect-ratio:1; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:20px; position:relative;
  filter:grayscale(1) opacity(.4);
}
.ach.got{ filter:none; background:rgba(255,194,75,.12); border-color:rgba(255,194,75,.5); }
.ach .tip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#000; color:#fff; font-size:10px; font-family:'Chivo Mono',monospace;
  padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; max-width:150px; white-space:normal; width:max-content; text-align:center;
}
.ach:hover .tip, .ach:active .tip{ opacity:1; }

/* skins */
#skinStage{ width:150px; height:130px; }
#skinStage canvas{ width:100%; height:100%; }
.g-nav{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px; }
.g-nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--paper); font-size:18px; cursor:pointer; flex:none; }
.g-nav button:active{ transform:scale(.9); }
.g-nav button:disabled{ opacity:.3; }
.g-title{ text-align:center; flex:1; }
.g-title b{ font-family:'Bungee',cursive; font-size:22px; display:block; }
.g-title span{ font-size:12px; color:var(--muted); }
#skDots{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
#skDots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); }
#skDots i.on{ background:var(--cyan); }
#skDots i.lock{ background:rgba(255,255,255,.08); }

/* daily */
#dailyInfo{ text-align:center; }
#dailyInfo .big{ font-family:'Bungee',cursive; font-size:34px; color:var(--gold); }
#dailyInfo .lbl{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; }
#dailyInfo .mods{ font-size:13px; color:var(--cyan); margin-top:8px; font-family:'Chivo Mono',monospace; }
#dailyBoard{ width:100%; display:flex; flex-direction:column; gap:5px; }
.dRow{ display:flex; justify-content:space-between; font-family:'Chivo Mono',monospace; font-size:13px; padding:6px 10px; background:rgba(0,0,0,.2); border-radius:8px; }
.dRow.me{ background:rgba(92,224,216,.14); color:var(--cyan); }

/* result card */
#card{ width:min(78vw,300px); height:auto; aspect-ratio:1; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.5); }

/* ==================== responsive ==================== */
/* wide / desktop */
@media (min-aspect-ratio:1.3/1){
  #distV{ font-size:min(9vh,88px); }
  #distWrap .unit{ font-size:min(3vh,26px); }
  #banner{ font-size:min(7vh,60px); }
  .keyHints{ display:block; }
}
/* foldable / square-ish */
@media (min-aspect-ratio:0.8/1) and (max-aspect-ratio:1.3/1){
  #distV{ font-size:11vw; }
  #distWrap .unit{ font-size:3.6vw; }
  #banner{ font-size:6.5vw; }
}
@media (min-width:820px){
  #card{ width:340px; }
}