/* 猎空舞模拟器 — interface in the language of Overwatch's own HUD: skewed parallelograms, heavy italic type,
   Tracer orange on deep navy glass, her three blink chevrons as the only ornament. */
:root{
  --orange:#f99e1a; --orange2:#ffb84d; --cyan:#3fd0ff; --gold:#ffd34d; --navy:#0e1626; --navy2:#16213a; --line:rgba(255,255,255,.18);
  --white:#f4f6fb; --dim:#94a0b8; --red:#ff5a5a;
  --panel:rgba(14,22,38,.86); --panel2:rgba(22,33,58,.92);
  --skew:-12deg;
  --cn:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --num:"Bahnschrift","DIN Alternate","DIN Condensed","Roboto Condensed","Arial Narrow",var(--cn);
  --st:env(safe-area-inset-top); --sb:env(safe-area-inset-bottom);
  --ease:cubic-bezier(.2,.9,.25,1);
  --accent:var(--orange);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;background:#070b14;color:var(--white);overflow:hidden;font-family:var(--cn);user-select:none;-webkit-user-select:none}
body{display:grid;place-items:center;background:radial-gradient(120% 80% at 50% 0%,#132038 0%,#070b14 70%)}
#app{position:relative;height:100%;width:100%;overflow:hidden;background:#05070d;touch-action:none}
#app[data-tier="3"]{--accent:var(--gold)}
#three,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{z-index:3;pointer-events:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
svg{display:block}
.num{font-family:var(--num);font-weight:700;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.cap{font-family:var(--num);font-size:10px;font-weight:700;font-style:italic;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim)}
/* the shared shapes: a skewed slab whose content is un-skewed */
.slab{transform:skewX(var(--skew))} .slab>*{display:block;transform:skewX(calc(var(--skew) * -1))}
.chev{display:inline-flex;gap:3px;vertical-align:middle}
.chev i{width:7px;height:12px;background:var(--orange);clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
.chev i:nth-child(2){opacity:.7} .chev i:nth-child(3){opacity:.4}

#grade{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(130% 90% at 50% 40%,transparent 60%,rgba(0,0,0,.42) 100%)}
#flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:#fff;opacity:0}

/* ---------------- HUD ---------------- */
.hud{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
#app[data-mode=play] .hud,#app[data-mode=pause] .hud{opacity:1}
#app[data-mode=tutorial] #keysHint.hud{opacity:1}
.tshadow{text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.35)}
#progressWrap{position:absolute;z-index:4;left:0;right:0;top:0;height:4px;background:rgba(255,255,255,.12);opacity:0;transition:opacity .4s}
#app[data-mode=play] #progressWrap,#app[data-mode=pause] #progressWrap{opacity:1}
#progress{height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--orange)}

#pauseBtn{position:absolute;z-index:5;left:12px;top:calc(14px + var(--st));width:42px;height:34px;display:grid;place-items:center;background:var(--panel);
  border:1.5px solid var(--line);transform:skewX(var(--skew));opacity:0;pointer-events:none;transition:opacity .4s}
#pauseBtn svg{transform:skewX(12deg)}
#app[data-mode=play] #pauseBtn{opacity:1;pointer-events:auto}
#songChip{left:62px;top:calc(18px + var(--st));font-size:11px;font-weight:700;color:var(--dim);line-height:1.2}
#songChip b{display:block;color:var(--white);font-size:13px;font-style:italic}

#scoreBox{right:14px;top:calc(10px + var(--st));text-align:right}
#score{display:block;font-size:38px;line-height:1;font-weight:700;color:var(--white)}
#mult{display:inline-block;margin-top:4px;padding:1px 10px;font-size:14px;color:#1a1004;background:var(--accent);transform:skewX(var(--skew))}

#heat{left:12px;top:38%;display:flex;flex-direction:column;gap:6px}
#heatBar{position:relative;width:96px;height:8px;background:rgba(255,255,255,.14);transform:skewX(var(--skew));overflow:hidden}
#heatFill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);transition:transform .25s var(--ease);background:linear-gradient(90deg,var(--orange),var(--gold))}
#heatTicks{position:absolute;left:12px;top:calc(38% + 12px);display:flex;gap:4px}
#heatTicks i{width:21px;height:4px;background:rgba(255,255,255,.2);transform:skewX(var(--skew))}
#heatTicks i.on{background:var(--accent)}
#tierName{display:block;font-size:16px;font-weight:900;font-style:italic;color:var(--accent);letter-spacing:1px}
#tierEn{display:block;font-family:var(--num);font-style:italic;font-size:9px;letter-spacing:2px;color:var(--dim)}

#combo{right:14px;top:40%;text-align:right;opacity:0 !important;transition:opacity .25s}
#app[data-mode=play] #combo.on{opacity:1 !important}
#combo.pop #comboNum{animation:pop .2s var(--ease)}
#combo.break #comboNum{animation:shakeX .3s}
@keyframes pop{from{transform:scale(1.25)}}
@keyframes shakeX{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#comboNum{display:block;font-size:60px;line-height:.9;font-weight:700;color:var(--white);transform-origin:right center}
#app[data-tier="3"] #comboNum{color:var(--gold)}
#combo .cap{color:var(--accent)}

#bomb{position:absolute;z-index:5;right:12px;bottom:calc(12px + var(--sb));width:74px;height:74px;opacity:0;pointer-events:none;transition:opacity .4s,transform .15s}
#app[data-mode=play] #bomb{opacity:1;pointer-events:auto}
#bomb:active{transform:scale(.93)}
#bomb svg.ring{position:absolute;inset:0;width:100%;height:100%}
#bombRing{transition:stroke-dashoffset .25s}
#bombCore{position:absolute;inset:10px;border-radius:50%;background:var(--panel);border:1.5px solid var(--line);display:grid;place-items:center;align-content:center;transition:background .3s}
#bombCore svg{width:24px;height:24px;color:var(--white)}
#bombPct{font-size:11px;color:var(--dim)}
#bomb.ready #bombCore{background:var(--orange);border-color:#fff} #bomb.ready #bombCore svg,#bomb.ready #bombPct{color:#1a1004}
#bomb.ready{animation:ready .6s ease-in-out infinite alternate}
@keyframes ready{to{transform:scale(1.08)}}
#bomb.live #bombCore{animation:live .25s steps(2) infinite}
@keyframes live{50%{background:var(--gold)}}
#keysHint{left:0;right:0;bottom:calc(10px + var(--sb));text-align:center;font-size:11px;color:var(--dim);font-weight:700}
#app[data-mode=play] #keysHint{animation:keysAway 9s forwards}
@keyframes keysAway{0%,80%{opacity:1}100%{opacity:0}}
@media (pointer:coarse){#keysHint{display:none}}
kbd{display:inline-block;min-width:18px;padding:0 5px;margin:0 1px;background:var(--panel2);color:var(--white);border:1px solid var(--line);font-family:var(--num);font-size:11px;font-style:normal}

/* banner: slides in from the left in the top band */
#banner{position:absolute;z-index:5;left:0;top:calc(62px + var(--st));pointer-events:none;opacity:0}
#banner .slab{display:flex;align-items:center;gap:10px;padding:5px 18px 6px 22px;background:var(--panel);border-left:4px solid var(--accent)}
#banner[data-color=gold] .slab{border-color:var(--gold)} #banner[data-color=cyan] .slab{border-color:var(--cyan)} #banner[data-color=white] .slab{border-color:#fff}
#banner.show{animation:bannerIn 1.5s var(--ease) forwards}
@keyframes bannerIn{0%{opacity:0;transform:translateX(-40px)}12%{opacity:1;transform:none}84%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-20px)}}
#bannerTitle{font-size:17px;font-weight:900;font-style:italic;letter-spacing:1px;white-space:nowrap}
#banner[data-color=gold] #bannerTitle{color:var(--gold)} #banner[data-color=orange] #bannerTitle{color:var(--orange)} #banner[data-color=cyan] #bannerTitle{color:var(--cyan)}
#bannerSub{font-family:var(--num);font-style:italic;font-size:10px;letter-spacing:2px;color:var(--dim);white-space:nowrap}
#deltas{position:absolute;z-index:5;right:14px;top:calc(40% + 86px);width:160px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none}
.delta{font-family:var(--num);font-weight:700;font-style:italic;font-size:15px;color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.5);animation:delta .9s ease-out forwards}
.delta[data-color=cyan]{color:var(--cyan)} .delta[data-color=orange]{color:var(--orange)} .delta[data-color=white]{color:#fff}
@keyframes delta{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}

/* ---------------- screens ---------------- */
.screen{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:stretch;
  padding:calc(20px + var(--st)) 18px calc(18px + var(--sb));opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.screen.on{opacity:1;pointer-events:auto}
.fade{background:linear-gradient(180deg,rgba(7,11,20,.55) 0%,transparent 22%,transparent 40%,rgba(7,11,20,.85) 66%,rgba(7,11,20,.96) 100%)}
.dim{background:rgba(7,11,20,.7);align-items:center}

/* logo: 猎空舞 big italic, 模拟器 on an orange slab, chevrons */
.logo{line-height:1;position:relative}
.logo .en{font-family:var(--num);font-style:italic;font-weight:700;font-size:11px;letter-spacing:5px;color:var(--orange);display:flex;align-items:center;gap:8px}
.logo h1{margin:6px 0 0;display:flex;align-items:flex-end;gap:8px;font-size:58px;font-weight:900;font-style:italic;letter-spacing:2px;line-height:1;color:var(--white);
  text-shadow:0 3px 0 rgba(0,0,0,.35)}
.logo h1 .sim{display:inline-block;margin-bottom:6px;padding:3px 12px 4px;font-size:20px;letter-spacing:3px;color:#1a1004;background:var(--orange);transform:skewX(var(--skew));text-shadow:none}
.logo h1 .sim span{display:block;transform:skewX(12deg)}
.skins{margin-top:8px;font-size:11px;color:var(--dim);font-weight:700}
.skins b{color:var(--white)}

.menu{margin-top:auto;width:100%;max-width:380px;align-self:center;display:grid;gap:10px}
.cta{position:relative;height:58px;background:var(--orange);color:#1a1004;font-size:24px;font-weight:900;font-style:italic;letter-spacing:8px;transform:skewX(var(--skew));
  box-shadow:0 8px 24px rgba(249,158,26,.28);transition:filter .12s,transform .12s}
.cta span{display:flex;align-items:center;justify-content:center;gap:12px;transform:skewX(12deg)}
.cta:hover{filter:brightness(1.07)} .cta:active{transform:skewX(var(--skew)) scale(.98)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ghost{height:44px;background:var(--panel);border:1.5px solid var(--line);color:var(--white);font-weight:700;letter-spacing:2px;font-size:14px;transform:skewX(var(--skew));transition:background .15s,border-color .15s}
.ghost span{display:flex;gap:7px;align-items:center;justify-content:center;transform:skewX(12deg)}
.ghost:hover{border-color:rgba(255,255,255,.4)} .ghost:active{background:var(--panel2)}
.card{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--panel);border-left:3px solid var(--orange)}
.card .num{font-size:24px}
.chips{display:flex;gap:6px;justify-content:center}
.chips button{flex:1;padding:7px 0;background:var(--panel);border:1.5px solid var(--line);font-weight:700;font-size:13px;letter-spacing:2px;transform:skewX(var(--skew))}
.chips button>*,.chips button{font-style:italic}
.chips button.on{background:var(--white);color:var(--navy);border-color:var(--white)}
.foot{margin-top:10px;font-size:10px;color:rgba(148,160,184,.7);text-align:center;line-height:1.5}

.sheet{width:min(100%,370px);margin:auto 0;background:var(--panel2);border:1.5px solid var(--line);border-top:3px solid var(--orange);padding:18px 16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(14px);transition:transform .4s var(--ease);max-height:calc(100% - 20px);overflow:auto}
.screen.on .sheet{transform:none}
.sheet h2{margin:0 0 14px;font-size:22px;font-weight:900;font-style:italic;letter-spacing:3px;display:flex;align-items:center;gap:10px}
.sheet h2 em{font-style:inherit;color:var(--orange)}
.tips{display:grid;gap:8px}
.tip{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:8px 10px;background:rgba(255,255,255,.04);border-left:3px solid var(--orange)}
.tip canvas{width:48px;height:48px}
.tip b{display:block;font-size:14px;font-style:italic;margin-bottom:2px} .tip p{margin:0;font-size:12px;color:var(--dim);line-height:1.5}
.scale{margin-top:12px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.scale i{font-size:11px;font-weight:700;padding:2px 8px;background:rgba(255,255,255,.08)}
.scale i[data-j=crit]{color:var(--gold)} .scale i[data-j=perfect]{color:var(--orange)} .scale i[data-j=great]{color:var(--cyan)} .scale i[data-j=miss]{color:#b7a9e6}
.keys{margin-top:10px;font-size:11px;color:var(--dim);text-align:center;line-height:2}
.sheet .menu{margin-top:16px}
.setting{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;gap:10px}
.setting small{display:block;font-weight:400;font-size:11px;color:var(--dim)}
.setting .chips{flex:0 0 150px}
.toggle{width:46px;height:24px;background:rgba(255,255,255,.14);position:relative;transition:background .2s;flex:none;transform:skewX(var(--skew))}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;transition:transform .2s var(--ease)}
.toggle[aria-checked=true]{background:var(--orange)} .toggle[aria-checked=true]::after{transform:translateX(22px)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:30px;height:28px;background:var(--panel);border:1.5px solid var(--line);font-weight:900;transform:skewX(var(--skew))}
.stepper span{min-width:62px;text-align:center;font-family:var(--num);font-style:italic}

/* loading / gate */
#loading{justify-content:center;align-items:center;gap:20px;background:#070b14}
#loadBar{width:220px;height:6px;background:rgba(255,255,255,.12);overflow:hidden;transform:skewX(var(--skew))}
#loadBar i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s}
#loadText{font-size:12px;letter-spacing:4px;font-weight:700;color:var(--dim)}
#loadTip{position:absolute;bottom:calc(30px + var(--sb));left:26px;right:26px;text-align:center;font-size:12px;color:var(--dim);line-height:1.6}
#loading.ready{cursor:pointer}
#loading.ready #loadText{font-size:15px;color:var(--white);animation:blinkTxt 1s ease-in-out infinite alternate}
@keyframes blinkTxt{from{opacity:.4}to{opacity:1}}

/* intro: Tracer's lines in a subtitle panel at the bottom, like an in-game voice line */
#intro{justify-content:flex-end;padding-bottom:calc(24px + var(--sb))}
#introSkip{position:absolute;right:16px;top:calc(16px + var(--st));font-size:12px;font-weight:700;letter-spacing:2px;padding:5px 14px;background:var(--panel);border:1.5px solid var(--line);transform:skewX(var(--skew))}
#introBubble{position:relative;width:100%;max-width:400px;align-self:center;background:var(--panel2);border:1.5px solid var(--line);border-left:4px solid var(--orange);padding:14px 16px 12px;cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
#introBubble.pop{animation:lineIn .35s var(--ease)}
@keyframes lineIn{from{opacity:0;transform:translateY(10px)}}
#introBubble .who{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#introBubble .who b{font-size:15px;font-style:italic;color:var(--orange)} #introBubble .who span{font-family:var(--num);font-style:italic;font-size:10px;letter-spacing:3px;color:var(--dim)}
#introText{margin:0;font-size:16px;font-weight:600;line-height:1.65;min-height:3.3em;color:var(--white)}
#introNext{text-align:right;font-size:11px;font-weight:700;color:var(--dim);animation:blinkTxt .8s ease-in-out infinite alternate}
.row2{display:grid;gap:8px;margin-top:10px}
.row2 .cta{height:50px;font-size:19px;letter-spacing:5px}
.row2 .ghost{height:40px;font-size:13px}
@media (pointer:fine){#vibeRow{display:none}}

/* title / song select */
#title .top{display:flex;justify-content:space-between;align-items:flex-start}
#songs{display:grid;gap:6px}
.song{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;padding:8px 16px 8px 14px;background:var(--panel);border-left:3px solid transparent;
  transform:skewX(var(--skew));transition:background .15s,border-color .15s,transform .15s}
.song>*{transform:skewX(12deg)}
.song .meta b{display:block;font-size:15px;font-style:italic;line-height:1.2} .song .meta small{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.song .bpm{font-family:var(--num);font-style:italic;font-size:11px;color:var(--dim)}
.song.on{background:var(--panel2);border-left-color:var(--c);transform:skewX(var(--skew)) translateX(6px)}
.song.on .meta b{color:var(--c)}
#app[data-tutored="0"] #tutBtn{border-color:var(--orange);color:var(--orange)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cta.busy{opacity:.6;pointer-events:none}

/* tutorial: the same subtitle panel as the intro; top of the screen while notes fly, bottom while she talks */
#tutCard{position:absolute;z-index:5;left:12px;right:12px;top:calc(12px + var(--st));display:none;max-width:420px;margin:0 auto;
  background:var(--panel2);border:1.5px solid var(--line);border-left:4px solid var(--orange);padding:10px 14px 10px;cursor:pointer;box-shadow:0 16px 40px rgba(0,0,0,.4)}
#tutCard.low{top:auto;bottom:calc(24px + var(--sb))}
#app[data-mode=tutorial] #tutCard.show{display:block;animation:lineIn .35s var(--ease)}
#tutCard .who{display:flex;align-items:center;gap:8px;margin-bottom:4px}
#tutCard .who b{font-size:15px;font-style:italic;color:var(--orange)} #tutCard .who span{font-family:var(--num);font-style:italic;font-size:10px;letter-spacing:3px;color:var(--dim)}
#tutCard .who i{margin-left:auto;font-size:11px;color:var(--dim)}
#tutSkip{font-size:11px;font-weight:700;padding:2px 10px;background:var(--panel);border:1px solid var(--line);transform:skewX(var(--skew))}
#tutText{margin:0;font-size:15px;font-weight:600;line-height:1.6;color:var(--white);min-height:1.6em}
#tutCard.low #tutText{font-size:16px;min-height:3.2em}
#tutNext{text-align:right;font-size:11px;font-weight:700;color:var(--orange);animation:blinkTxt .8s ease-in-out infinite alternate}
#app[data-mode=tutorial] #keysHint{opacity:1;animation:none}

/* results */
#results{justify-content:flex-end;align-items:center}
#resSong{align-self:stretch;max-width:380px;margin:0 auto 6px;font-size:12px;font-weight:700;color:var(--dim);letter-spacing:1px;width:100%}
.resHead{display:flex;align-items:flex-end;justify-content:space-between;width:100%;max-width:380px;margin-bottom:12px}
#resRank{font-family:var(--num);font-style:italic;font-weight:700;font-size:104px;line-height:.8;color:var(--gold);text-shadow:0 0 30px rgba(255,211,77,.35)}
#resRank[data-rank=A]{color:var(--orange)} #resRank[data-rank=B],#resRank[data-rank=C]{color:var(--white);text-shadow:none}
#resBadges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.badge{font-style:italic;font-size:11px;font-weight:900;letter-spacing:2px;padding:3px 10px;background:var(--white);color:var(--navy);transform:skewX(var(--skew))}
.badge.ap{background:var(--gold)} .badge.fc{background:var(--cyan)} .badge.new{background:var(--orange)}
.resScore{text-align:right}
#resScore{display:block;font-size:44px;line-height:1;font-weight:700}
#resAcc{display:inline-block;margin-top:6px;font-family:var(--num);font-style:italic;font-weight:700;font-size:18px;color:var(--orange)}
#resStats{width:100%;max-width:380px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
#resStats div{background:var(--panel);padding:6px 10px;border-left:2px solid var(--line)}
#resStats div[data-j=crit]{border-color:var(--gold)} #resStats div[data-j=perfect]{border-color:var(--orange)} #resStats div[data-j=great]{border-color:var(--cyan)} #resStats div[data-j=miss]{border-color:#b7a9e6}
#resStats span{display:block;font-size:10px;letter-spacing:1px;font-weight:700;color:var(--dim)}
#resStats b{font-family:var(--num);font-style:italic;font-size:20px}
#results .menu{margin-top:0}

/* title: one song card with arrows (room for her on the stage), caption of what she is dancing */
.songPick{display:grid;grid-template-columns:34px 1fr 34px;gap:6px;align-items:stretch}
.songPick>button{background:var(--panel);border:1.5px solid var(--line);font-size:22px;font-weight:900;color:var(--white);transform:skewX(var(--skew))}
.songPick>button:active{background:var(--panel2)}
#songs .song:not(.on){display:none}
#songs .song.on{transform:skewX(var(--skew))}
#nowDancing{position:absolute;left:18px;top:34%;line-height:1.15;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.6)}
#nowDancing b{display:block;font-size:24px;font-style:italic;font-weight:900;color:var(--orange)}
#nowDancing small{display:block;font-family:var(--num);font-style:italic;font-size:10px;letter-spacing:2px;color:var(--white)}
#nowDancing.pop{animation:lineIn .4s var(--ease)}
.foot .skins{color:inherit}

.pcKeys{margin-top:8px;text-align:center;font-size:11px;color:var(--dim)}
@media (pointer:coarse){.pcKeys{display:none}}
/* phones: no callouts, magnifier or text selection on long presses, no rubber-band scrolling */
html,body,#app{-webkit-touch-callout:none;overscroll-behavior:none}
button{touch-action:manipulation}