/* ============================================================================
   ULTRAMAN — NINE TRIALS
   Console UI skin: beveled steel frames, cut corners, cyan HUD glow.
   ========================================================================== */
:root{
  /* space + steel */
  --bg-0:#03060d;
  --bg-1:#070f1c;
  --steel-0:#31465f;
  --steel-1:#1d2c41;
  --steel-2:#111d2e;
  --steel-3:#070d17;
  --fill-0:#0a1322;
  --fill-1:#050a13;

  /* accents */
  --cyan:#3fd0ff;
  --cyan-dk:#1b6f96;
  --blue:#2f6fe0;
  --green:#39e07a;
  --amber:#ffc63d;
  --red:#ff3a4d;
  --violet:#9a6cff;

  /* type */
  --text:#e2ecfa;
  --muted:#7f95b5;
  --dim:#55698a;

  --line:rgba(63,208,255,.22);
  --line-soft:rgba(120,170,255,.13);
  --glass:rgba(8,15,26,.78);

  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ch:16px;          /* cut-corner size for panels */
  --ch-s:9px;         /* cut-corner size for buttons */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;overflow:hidden}
canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.hidden{display:none !important}
button{font-family:inherit}

/* chamfer helpers */
.chamfer{clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.chamfer-s{clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s))}

/* ---------- shared space backdrop ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 76% -14%,rgba(48,118,196,.40) 0%,rgba(18,48,92,.14) 38%,transparent 62%),
    radial-gradient(90% 70% at 8% 112%,rgba(122,52,190,.20) 0%,transparent 58%),
    linear-gradient(180deg,#061021 0%,#03080f 52%,#010307 100%);
  animation:fadein .3s ease}
.screen::before{ /* star field */
  content:"";position:absolute;inset:-10%;pointer-events:none;opacity:.75;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 68% 12%,#cfe6ff,transparent),
    radial-gradient(1.8px 1.8px at 84% 38%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 32% 64%,#dbe9ff,transparent),
    radial-gradient(1.5px 1.5px at 52% 82%,#fff,transparent),
    radial-gradient(1px 1px at 92% 72%,#bcd6ff,transparent),
    radial-gradient(1.3px 1.3px at 22% 88%,#fff,transparent),
    radial-gradient(1px 1px at 44% 8%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 6% 52%,#cfe6ff,transparent),
    radial-gradient(1.1px 1.1px at 78% 92%,#fff,transparent);
  background-size:520px 520px,380px 380px,640px 640px,300px 300px,700px 700px,440px 440px,560px 560px,260px 260px,600px 600px,480px 480px;
  background-repeat:repeat}
.screen::after{ /* planet limb + scanlines */
  content:"";position:absolute;left:-20%;right:-20%;top:-58vh;height:96vh;border-radius:50%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(96,158,232,.20) 0%,rgba(50,104,178,.07) 42%,transparent 72%);
  box-shadow:inset 0 -60px 120px rgba(120,190,255,.22)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- panels ---------- */
.panel{position:relative;z-index:2;width:min(700px,92vw);max-height:94vh;overflow:hidden;
  padding:30px 34px 26px;
  --ch:16px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:linear-gradient(180deg,var(--steel-0) 0%,var(--steel-1) 4%,var(--steel-2) 18%,var(--steel-3) 100%);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(63,208,255,.13))}
.panel::before{ /* inner console fill */
  content:"";position:absolute;inset:4px;z-index:0;--ch:13px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:
    linear-gradient(180deg,rgba(20,40,66,.55),rgba(5,10,19,.92) 26%,rgba(4,8,15,.96)),
    linear-gradient(180deg,#081020,#04080f);
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.16),inset 0 0 60px rgba(0,0,0,.6)}
.panel::after{ /* corner brackets + scanlines */
  content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;opacity:.6;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left 0 top 0/22px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left 0 top 0/2px 22px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right 0 top 0/22px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right 0 top 0/2px 22px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left 0 bottom 0/22px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left 0 bottom 0/2px 22px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right 0 bottom 0/22px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right 0 bottom 0/2px 22px no-repeat}
.panel > *{position:relative;z-index:1}
.panel.wide{width:min(1000px,95vw)}

.panel h2{position:relative;font-size:20px;letter-spacing:.24em;font-weight:800;text-transform:uppercase;
  color:#eef7ff;padding:2px 0 13px 18px;margin-bottom:16px;text-shadow:0 0 20px rgba(63,208,255,.5)}
.panel h2::before{content:"";position:absolute;left:0;top:4px;width:4px;height:20px;
  background:linear-gradient(180deg,var(--cyan),rgba(63,208,255,.1));box-shadow:0 0 14px var(--cyan)}
.panel h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(63,208,255,.8),rgba(63,208,255,.18) 45%,rgba(63,208,255,0))}
.panel h2.danger{color:#ffe0e4;text-shadow:0 0 24px rgba(255,58,77,.75)}
.panel h2.danger::before{background:linear-gradient(180deg,var(--red),rgba(255,58,77,.1));box-shadow:0 0 14px var(--red)}
.panel h2.danger::after{background:linear-gradient(90deg,rgba(255,58,77,.8),rgba(255,58,77,.14) 45%,transparent)}
.panel .note{font-size:13px;line-height:1.7;color:#a4b8d4;margin-top:12px}
.panel .note b{color:var(--cyan)}
.panel-foot{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.panel-foot.small{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.12em;
  border-top:0;padding-top:6px}

/* ---------- buttons ---------- */
.btn{position:relative;appearance:none;border:0;cursor:pointer;color:#e6f1ff;
  padding:13px 26px 13px 30px;font-weight:800;letter-spacing:.16em;font-size:12.5px;text-transform:uppercase;
  --ch-s:9px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(180deg,#22344c 0%,#132135 52%,#0a1321 100%);
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.34),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -10px 20px rgba(0,0,0,.45);
  transition:transform .14s,box-shadow .14s,background .14s,filter .14s}
.btn::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;
  background:var(--cyan);opacity:.35;transform:rotate(45deg);
  box-shadow:0 0 10px var(--cyan);transition:.14s}
.btn:hover{background:linear-gradient(180deg,#28485f,#122a3c 55%,#08131d);color:#fff;
  box-shadow:inset 0 0 0 1px var(--cyan),inset 0 0 22px rgba(63,208,255,.22),inset 0 1px 0 rgba(255,255,255,.12);
  filter:drop-shadow(0 0 14px rgba(63,208,255,.4));transform:translateY(-1px)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#1d5f8f 0%,#123c66 50%,#08213d 100%);color:#fdfeff;
  box-shadow:inset 0 0 0 1px rgba(120,220,255,.65),inset 0 0 26px rgba(63,208,255,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.primary::before{background:#eafcff;opacity:1;box-shadow:0 0 14px #eafcff}
.btn.primary:hover{background:linear-gradient(180deg,#2b86bf,#155080 55%,#0a2b4d);
  filter:drop-shadow(0 0 20px rgba(63,208,255,.6))}

/* ---------- title ---------- */
#title{background:
  radial-gradient(120% 80% at 74% -16%,rgba(56,132,214,.45) 0%,rgba(20,54,102,.16) 40%,transparent 64%),
  radial-gradient(80% 60% at 4% 116%,rgba(126,54,196,.22) 0%,transparent 60%),
  linear-gradient(180deg,#071427,#03080f 55%,#010205 100%)}
.title-bg{position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(63,208,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,208,255,.05) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
  mask-image:radial-gradient(72% 62% at 50% 42%,#000 2%,transparent 80%)}
.title-art{position:absolute;right:1vw;bottom:0;height:90vh;width:min(48vw,660px);
  background-size:contain;background-repeat:no-repeat;background-position:right bottom;opacity:.95;
  filter:drop-shadow(0 0 70px rgba(63,208,255,.3)) saturate(.92);pointer-events:none}
.title-inner{position:relative;z-index:3;width:min(1180px,94vw);display:flex;flex-direction:column;gap:26px}
.logo-sub{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.46em;color:#8fb6d8;
  padding:5px 14px;margin-bottom:12px;--ch-s:7px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(90deg,rgba(63,208,255,.18),rgba(63,208,255,.02));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.3)}
.logo h1{font-size:clamp(50px,10.5vw,132px);line-height:.86;font-weight:900;letter-spacing:.01em;
  background:linear-gradient(180deg,#ffffff 0%,#dcecff 34%,#8fb2d8 52%,#f2f9ff 62%,#b9d3ef 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 42px rgba(96,168,255,.45)) drop-shadow(0 10px 26px rgba(0,0,0,.75))}
.logo h1 span{background:linear-gradient(180deg,#ff8f9a 0%,#ff2f42 45%,#8e0f1c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,58,77,.65))}
.logo-tag{display:block;margin-top:14px;padding-top:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.3em;
  color:#93aecd;border-top:1px solid var(--line-soft);max-width:560px}
.menu{display:flex;gap:12px;flex-wrap:wrap}
.title .menu .btn{min-width:238px}
.title-foot{max-width:660px;margin-top:2px}
.disclaimer{font-size:11px;line-height:1.65;color:#5f7391;max-width:620px}
.hintline{font-size:12.5px;color:#9db2d0;margin-top:10px}
.hintline b{color:var(--cyan)}

/* ---------- controls ---------- */
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:52vh;overflow:auto;padding-right:4px}
.ctrl{position:relative;display:flex;flex-direction:column;gap:3px;padding:9px 12px 9px 14px;
  background:linear-gradient(90deg,rgba(24,44,70,.55),rgba(9,16,28,.5));
  box-shadow:inset 0 0 0 1px rgba(120,170,255,.14),inset 0 1px 0 rgba(255,255,255,.04)}
.ctrl::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:linear-gradient(180deg,var(--cyan),rgba(63,208,255,.05))}
.ctrl b{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase}
.ctrl span{font-size:12.5px;color:#a7bad6}

/* ---------- stage select ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-height:54vh;overflow:auto;padding-right:6px}
.stage-card{position:relative;text-align:left;padding:13px 14px 12px;cursor:pointer;color:inherit;border:0;
  --ch-s:10px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(180deg,rgba(34,54,80,.66),rgba(10,17,29,.82));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.2),inset 0 1px 0 rgba(255,255,255,.06);
  transition:.15s}
.stage-card:hover{background:linear-gradient(180deg,rgba(44,86,120,.72),rgba(12,26,42,.9));
  box-shadow:inset 0 0 0 1px var(--cyan),inset 0 0 24px rgba(63,208,255,.16);
  filter:drop-shadow(0 0 12px rgba(63,208,255,.3));transform:translateY(-2px)}
.stage-card.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.85)}
.stage-card.locked::after{content:"LOCKED";position:absolute;right:10px;bottom:8px;font-family:var(--mono);
  font-size:9px;letter-spacing:.24em;color:#8b9cb5;border:1px solid rgba(140,160,190,.35);padding:2px 6px}
.stage-card .sc-n{font-family:var(--mono);font-size:10px;color:var(--cyan);letter-spacing:.26em;opacity:.9}
.stage-card .sc-t{font-size:14.5px;font-weight:800;letter-spacing:.07em;margin:4px 0 5px;color:#fff;
  text-shadow:0 0 16px rgba(63,208,255,.35)}
.stage-card .sc-d{font-size:11px;color:#94a9c6;line-height:1.45;min-height:32px}
.stage-card .sc-b{margin-top:9px;padding-top:8px;border-top:1px solid rgba(63,208,255,.16);
  font-family:var(--mono);font-size:10px;color:#ff8b96;letter-spacing:.14em}
.stage-card .sc-diff{position:absolute;top:12px;right:13px;font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;color:#9db4d2;border:1px solid rgba(140,170,200,.3);padding:2px 5px}
.stage-card .sc-diff.hard{color:#ffc63d;border-color:rgba(255,198,61,.45)}
.stage-card .sc-diff.extreme{color:#ff6b7a;border-color:rgba(255,58,77,.5)}
.stage-card .sc-star{margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:.12em}

/* ---------- upgrade ---------- */
.upgrade{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:15px}
.up-title{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:#8fa6c9;margin-bottom:11px}
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.up-card{position:relative;padding:12px 12px 12px 34px;cursor:pointer;text-align:left;color:inherit;border:0;
  --ch-s:9px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(180deg,rgba(32,52,78,.6),rgba(9,16,28,.82));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.18);transition:.15s}
.up-card::before{content:attr(data-i);position:absolute;left:9px;top:12px;width:16px;height:16px;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--cyan);
  background:rgba(63,208,255,.1);box-shadow:inset 0 0 0 1px rgba(63,208,255,.4)}
.up-card:hover{box-shadow:inset 0 0 0 1px var(--cyan),inset 0 0 22px rgba(63,208,255,.14);
  filter:drop-shadow(0 0 12px rgba(63,208,255,.28));transform:translateY(-2px)}
.up-card.sel{box-shadow:inset 0 0 0 1px var(--amber),inset 0 0 26px rgba(255,198,61,.18);
  filter:drop-shadow(0 0 14px rgba(255,198,61,.34))}
.up-card b{display:block;font-size:12.5px;letter-spacing:.08em;margin-bottom:4px;color:#fff}
.up-card span{font-size:11px;color:#94a9c6;line-height:1.45}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;font-family:var(--mono);font-size:12.5px;
  margin-top:12px;border-top:1px solid var(--line-soft)}
.stats .k,.stats .v{padding:8px 2px;border-bottom:1px solid rgba(120,170,255,.1)}
.stats .k{color:#8299bb;letter-spacing:.1em}
.stats .v{color:#eaf4ff;text-align:right;font-weight:700}
.clear-badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.36em;padding:6px 15px;
  margin-bottom:14px;color:#d6f6ff;--ch-s:7px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(90deg,rgba(63,208,255,.28),rgba(63,208,255,.06));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.55),0 0 22px rgba(63,208,255,.25)}
.clear-badge.gold{color:#fff3d2;
  background:linear-gradient(90deg,rgba(255,198,61,.3),rgba(255,198,61,.06));
  box-shadow:inset 0 0 0 1px rgba(255,198,61,.6),0 0 26px rgba(255,198,61,.3)}

/* ===================== HUD ===================== */
#hud{position:absolute;inset:0;z-index:20;pointer-events:none;font-family:var(--mono);
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hud-tl{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:9px}

.hero-card{position:relative;display:flex;align-items:center;gap:12px;padding:9px 16px 9px 9px;
  --ch-s:11px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(90deg,rgba(22,44,72,.9) 0%,rgba(8,15,26,.72) 60%,rgba(8,15,26,.35) 100%);
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.3),inset 0 1px 0 rgba(255,255,255,.07)}
.hero-card img{width:44px;height:58px;object-fit:cover;object-position:top center;background:#08111e;
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.35);filter:saturate(1.05)}
.hero-info{display:flex;flex-direction:column;gap:5px;min-width:216px}
.hero-name{font-size:11px;letter-spacing:.28em;color:#d8e8fb}
.bar{position:relative;height:12px;overflow:hidden;background:rgba(4,9,17,.85);
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.25)}
.bar::after{ /* segment ticks */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(2,5,10,.85) 7px 9px)}
.bar-en{height:8px}
.bar-fill{position:absolute;inset:0;width:100%;transform-origin:left center;
  background:linear-gradient(90deg,#1e9e57,#39e07a 65%,#8ff6b0);transition:transform .18s ease;
  box-shadow:0 0 12px rgba(57,224,122,.5)}
.bar-en .bar-fill{background:linear-gradient(90deg,#2b6ef0,#3fd0ff);box-shadow:0 0 12px rgba(63,208,255,.55)}
.bar-ghost{position:absolute;inset:0;background:rgba(255,255,255,.55);transform-origin:left;
  transform:scaleX(1);transition:transform .7s ease .18s}
.bar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:.16em;color:#eef8ff;text-shadow:0 1px 2px #000}
.bar.low .bar-fill{background:linear-gradient(90deg,#c8121f,#ff5a68);box-shadow:0 0 14px rgba(255,58,77,.6)}

.timer{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(2,6,12,.95) 42%,rgba(63,208,255,.08) 46%,transparent 60%),
    repeating-conic-gradient(rgba(63,208,255,.5) 0 3deg,transparent 3deg 15deg);
  box-shadow:0 0 0 1px rgba(63,208,255,.35),0 0 18px rgba(63,208,255,.3)}
.timer-core{width:17px;height:17px;border-radius:50%;background:#39e07a;box-shadow:0 0 16px #39e07a}
.timer.warn .timer-core{background:#ffc63d;box-shadow:0 0 16px #ffc63d}
.timer.warn{box-shadow:0 0 0 1px rgba(255,198,61,.45),0 0 18px rgba(255,198,61,.3)}
.timer.crit .timer-core{background:#ff2a3c;box-shadow:0 0 20px #ff2a3c;animation:pulse .45s infinite}
.timer.crit{box-shadow:0 0 0 1px rgba(255,58,77,.6),0 0 24px rgba(255,58,77,.45)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

.ultra-clock{display:flex;align-items:center;gap:10px;width:max-content;padding:6px 14px;--ch-s:8px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(90deg,rgba(20,40,66,.85),rgba(7,13,23,.6));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.26)}
.uc-label{font-size:9.5px;letter-spacing:.26em;color:#8aa4c6}
.uc-time{font-size:17px;font-weight:700;color:#eaf4ff;letter-spacing:.06em}
.ultra-clock.danger{box-shadow:inset 0 0 0 1px rgba(255,58,77,.6),0 0 18px rgba(255,58,77,.28)}
.ultra-clock.danger .uc-time{color:#ff6b7a;animation:pulse .7s infinite}

.hud-tr{position:absolute;top:14px;right:14px;text-align:right;display:flex;flex-direction:column;
  gap:5px;align-items:flex-end}
.stage-label{font-size:10px;letter-spacing:.34em;color:#8aa4c6}
.stage-name{font-size:19px;font-weight:800;letter-spacing:.12em;color:#fff;
  text-shadow:0 0 22px rgba(63,208,255,.5),0 2px 12px rgba(0,0,0,.95)}
.obj{font-size:11px;color:var(--cyan);letter-spacing:.08em;font-family:var(--sans)}
.score-row{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.score{font-size:23px;font-weight:700;color:var(--amber);font-family:var(--mono);
  text-shadow:0 0 18px rgba(255,198,61,.55)}
.score-cap{font-size:9px;letter-spacing:.26em;color:#8aa4c6}
.wave-row{display:flex;gap:5px;margin-top:5px}
.wave-pip{width:20px;height:5px;background:rgba(255,255,255,.14);
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.wave-pip.on{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.wave-pip.done{background:rgba(57,224,122,.9);box-shadow:0 0 8px rgba(57,224,122,.6)}

.combo{position:absolute;left:50%;top:18%;transform:translateX(-50%);text-align:center;
  text-shadow:0 4px 30px rgba(0,0,0,.9)}
.combo span#comboNum{font-size:58px;font-weight:900;color:#fff;font-family:var(--mono);letter-spacing:-.03em;
  text-shadow:0 0 26px rgba(63,208,255,.75),0 4px 26px rgba(0,0,0,.9)}
.combo-x{font-size:15px;letter-spacing:.26em;color:var(--amber);margin-left:6px}
.combo-rank{font-size:13px;letter-spacing:.4em;color:var(--cyan);margin-top:-6px}
.combo.pop{animation:pop .22s ease}
@keyframes pop{0%{transform:translateX(-50%) scale(1.35)}100%{transform:translateX(-50%) scale(1)}}

.hint{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);font-family:var(--sans);font-size:13.5px;
  color:#e6f1ff;padding:9px 20px 9px 24px;--ch-s:8px;max-width:70vw;text-align:center;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(90deg,rgba(18,40,66,.92),rgba(6,11,20,.82));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.34);transition:opacity .3s;opacity:0}
.hint::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;
  background:var(--cyan);transform:rotate(45deg);box-shadow:0 0 10px var(--cyan)}
.hint.show{opacity:1}

.bossbar{position:absolute;left:50%;top:70px;transform:translateX(-50%);width:min(660px,74vw);text-align:center}
.boss-name{font-size:15px;letter-spacing:.32em;color:#ffe2e6;margin-bottom:6px;
  text-shadow:0 0 22px rgba(255,58,77,.8)}
.boss-hp{position:relative;height:13px;overflow:hidden;background:rgba(4,7,14,.9);
  box-shadow:inset 0 0 0 1px rgba(255,58,77,.55),0 0 20px rgba(255,58,77,.22)}
.boss-hp::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(2,4,9,.85) 11px 14px)}
.boss-hp-fill{height:100%;width:100%;transform-origin:left;
  background:linear-gradient(90deg,#7d0d19,#ff3a4d 60%,#ff98a3);box-shadow:0 0 16px rgba(255,58,77,.6)}
.boss-phase{font-size:10px;letter-spacing:.3em;color:#ff9aa4;margin-top:5px}

.finisher{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px}
.fin-key{width:56px;height:56px;display:grid;place-items:center;font-size:25px;font-weight:800;color:#fff;
  --ch-s:12px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(180deg,#ff5a68,#8e0f1c);
  box-shadow:inset 0 0 0 1px rgba(255,180,190,.85),0 0 36px rgba(255,58,77,.8);
  animation:pulse .6s infinite}
.fin-text{font-size:12px;letter-spacing:.36em;color:#ffe2e6;text-shadow:0 0 18px rgba(255,58,77,.8)}

.actionbar{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);display:flex;gap:6px;
  flex-wrap:nowrap;justify-content:center;opacity:.66;white-space:nowrap}
.act{position:relative;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;color:#b7c8e2;padding:5px 10px 5px 5px;--ch-s:6px;
  clip-path:polygon(var(--ch-s) 0,100% 0,100% calc(100% - var(--ch-s)),calc(100% - var(--ch-s)) 100%,0 100%,0 var(--ch-s));
  background:linear-gradient(90deg,rgba(18,34,56,.85),rgba(6,11,20,.7));
  box-shadow:inset 0 0 0 1px rgba(63,208,255,.22)}
.act b{display:grid;place-items:center;min-width:16px;height:15px;padding:0 3px;font-size:9px;font-weight:700;
  color:var(--cyan);background:rgba(63,208,255,.12);box-shadow:inset 0 0 0 1px rgba(63,208,255,.5)}
.act.cool{opacity:.32;filter:saturate(.4)}
.dbg{position:absolute;bottom:7px;left:9px;font-size:9.5px;color:#3f5273;font-family:var(--mono);
  letter-spacing:.06em}

/* ---------- toast ---------- */
#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);text-align:center;z-index:35;
  animation:toastin 2.8s ease forwards;pointer-events:none;padding:16px 46px}
#toast::before,#toast::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,208,255,.85),transparent)}
#toast::before{top:0}
#toast::after{bottom:0}
@keyframes toastin{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1.02)}}
.toast-stage{font-family:var(--mono);font-size:12px;letter-spacing:.52em;color:var(--cyan);
  text-shadow:0 0 18px rgba(63,208,255,.7)}
.toast-name{font-size:clamp(32px,6vw,64px);font-weight:900;letter-spacing:.02em;margin:6px 0;color:#fff;
  text-shadow:0 0 46px rgba(96,168,255,.6),0 8px 30px #000}
.toast-sub{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:#93a6c2}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:38;transition:opacity .12s}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#010307;z-index:60;
  align-content:center;gap:18px}
.spin{width:52px;height:52px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 40deg,rgba(63,208,255,.9) 90deg,transparent 150deg);
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-text{font-family:var(--mono);font-size:11.5px;letter-spacing:.44em;color:#6f88ad}

@media (max-width:900px){
  .ctrl-grid{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr 1fr}
  .up-grid{grid-template-columns:1fr}
  .title-art{opacity:.32;width:84vw;height:58vh}
  .actionbar{display:none}
  .hero-info{min-width:150px}
  .stats{grid-template-columns:1fr}
  .title .menu .btn{min-width:100%}
}