@import url('../_shared/arcade.css?v=20260607c');
:root{ --accent:#ffb054; --accent2:#ff5a3c; --gold:#ffd24a; --time:#6ce0ff; }
.game-shell{ background:radial-gradient(circle at 50% 8%,#3a1d10 0%,#1c0e08 46%,#0a0503 100%); }

/* Three.js canvas fills the play area */
.game-wrap{display:block;background:#0a0503}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ── HUD vitals ─────────────────────────────────────────────────────────── */
.vitals{display:flex;flex-direction:column;gap:5px;min-width:150px;max-width:230px;flex:1}
.bar{position:relative;height:14px;border-radius:8px;background:rgba(8,6,14,.72);border:1px solid rgba(255,255,255,.16);overflow:hidden;backdrop-filter:blur(6px)}
.bar.meter{height:9px}
.bar-fill{position:absolute;inset:1px;border-radius:7px;transform-origin:left center;transition:transform .12s ease-out}
.bar.hp .bar-fill{background:linear-gradient(90deg,#ff4a5c,#ff8a50)}
.bar.hp .bar-fill.low{background:linear-gradient(90deg,#ff2038,#ff5a3c);animation:hpblink .6s ease-in-out infinite}
@keyframes hpblink{50%{filter:brightness(1.6)}}
.bar.meter .bar-fill{background:linear-gradient(90deg,#2f9fbf,var(--time))}
.bar.meter.ready{border-color:var(--time);box-shadow:0 0 14px -2px var(--time)}
.bar.meter.ready .bar-fill{animation:hpblink .5s ease-in-out infinite}
.meter-glyph{position:absolute;right:4px;top:50%;transform:translateY(-52%);font-size:.6rem;font-weight:1000;color:var(--time);text-shadow:0 0 8px rgba(108,224,255,.8);line-height:1}
.meter-glyph.cooling{color:var(--muted);text-shadow:none}

/* ── Boss bar ───────────────────────────────────────────────────────────── */
.boss-bar{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:min(480px,74vw);opacity:0;transition:opacity .5s;pointer-events:none;text-align:center}
.boss-bar.show{opacity:1}
.boss-name{font-size:.72rem;font-weight:1000;letter-spacing:.3em;color:var(--gold);text-shadow:0 0 14px rgba(255,210,74,.7);margin-bottom:4px}
.boss-track{height:10px;border-radius:6px;background:rgba(8,6,14,.75);border:1px solid rgba(255,210,74,.5);overflow:hidden}
.boss-fill{height:100%;border-radius:5px;transform-origin:left center;background:linear-gradient(90deg,#b8860b,var(--gold));transition:transform .18s ease-out}

/* ── Zone banner ────────────────────────────────────────────────────────── */
.zone-banner{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:clamp(1.3rem,6vw,2.6rem);
  font-weight:1000;letter-spacing:.34em;text-indent:.34em;color:var(--gold);pointer-events:none;
  text-shadow:0 0 30px rgba(255,176,84,.75),0 2px 10px rgba(0,0,0,.8);opacity:0;transform:scale(.86);transition:opacity .35s,transform .45s}
.zone-banner.show{opacity:1;transform:scale(1)}

/* ── Rewind prompt ──────────────────────────────────────────────────────── */
.rewind-prompt{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.8);z-index:22;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.rewind-prompt.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.rewind-prompt p{margin-top:8px;color:var(--time);font-size:.78rem;font-weight:700;text-shadow:0 0 12px rgba(108,224,255,.7)}
.rewind-btn{border:2px solid var(--time);border-radius:16px;padding:.9rem 1.6rem;font-size:1.1rem;font-weight:1000;letter-spacing:.1em;
  color:#04121a;background:linear-gradient(135deg,#9deeff,var(--time));box-shadow:0 0 34px rgba(108,224,255,.55);animation:rewpulse .7s ease-in-out infinite}
@keyframes rewpulse{50%{transform:scale(1.06);box-shadow:0 0 50px rgba(108,224,255,.85)}}

/* ── Damage / time overlays ─────────────────────────────────────────────── */
.dmg-flash{position:absolute;inset:0;z-index:13;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 130px 36px rgba(255,58,60,.65);transition:opacity .09s}
.dmg-flash.show{opacity:1}
.time-vignette{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;transition:opacity .3s;
  box-shadow:inset 0 0 150px 40px rgba(108,224,255,.45);background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(30,120,160,.18))}
body.time-fracture .time-vignette,body.time-rewind .time-vignette{opacity:1}
body.low-hp .dmg-flash{opacity:.45}

/* ── Touch controls ─────────────────────────────────────────────────────── */
.ctrl-left,.ctrl-right{position:absolute;bottom:max(18px,calc(14px + var(--safe-bottom)));z-index:14;display:none;gap:10px;pointer-events:none}
.ctrl-left.playing,.ctrl-right.playing{display:flex}
.ctrl-left{left:14px}
.ctrl-right{right:14px;display:none;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;width:196px}
.ctrl-right.playing{display:flex}
.ctrl-btn{pointer-events:all;touch-action:none;user-select:none;-webkit-user-select:none;border:2px solid rgba(255,255,255,.18);color:var(--text);
  background:rgba(14,8,4,.62);backdrop-filter:blur(8px);font-weight:1000;display:grid;place-items:center;border-radius:50%}
.ctrl-btn.move{width:64px;height:64px;font-size:1.3rem}
.ctrl-btn.big{width:62px;height:62px;font-size:1.5rem}
.ctrl-btn.small{width:48px;height:48px;font-size:1.05rem}
.ctrl-btn.time{border-color:rgba(108,224,255,.55);color:var(--time)}
.ctrl-btn:active,.ctrl-btn.active{transform:scale(.93);background:rgba(255,176,84,.3);border-color:var(--accent)}
.ctrl-btn.time:active,.ctrl-btn.time.active{background:rgba(108,224,255,.3);border-color:var(--time)}

/* ── Panel flavor ───────────────────────────────────────────────────────── */
.panel h1{background:linear-gradient(135deg,#ffe0a8,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text}
.logo-orb{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 40px rgba(255,138,60,.55)}
.menu-actions .primary{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 14px 36px rgba(255,110,60,.3);color:#1a0a04}
.newbest-tag{display:inline-block;margin:2px 0 6px;padding:.22rem .7rem;border-radius:999px;font-weight:1000;
  font-size:.66rem;letter-spacing:.16em;color:#0a0420;background:linear-gradient(90deg,var(--gold),#ffe89a);
  box-shadow:0 0 22px -4px var(--gold)}
kbd{display:inline-block;padding:.06rem .38rem;border-radius:6px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);font-family:inherit;font-size:.82em;font-weight:800}

/* ── AAA pass: display type ─────────────────────────────────────────────── */
.panel h1,.panel h2,.zone-banner,.boss-name,.final-score,.game-bar-title,.title-sub,.combo-chip{
  font-family:'Syne','Segoe UI',system-ui,sans-serif}
.panel h1{letter-spacing:-.02em}
.title-sub{margin-top:6px;font-weight:800;font-size:.8rem;letter-spacing:.52em;text-indent:.52em;color:var(--gold);
  text-shadow:0 0 18px rgba(255,210,74,.55)}

/* ornate gold-framed panel */
.panel.ornate{position:relative;border:1px solid rgba(255,178,84,.35);
  box-shadow:0 24px 90px rgba(0,0,0,.65),0 0 60px rgba(255,138,60,.12),inset 0 0 40px rgba(255,138,60,.05)}
.panel.ornate::before,.panel.ornate::after{content:'';position:absolute;width:26px;height:26px;pointer-events:none;
  border:2px solid var(--gold);opacity:.8}
.panel.ornate::before{left:10px;top:10px;border-right:none;border-bottom:none;border-top-left-radius:14px}
.panel.ornate::after{right:10px;bottom:10px;border-left:none;border-top:none;border-bottom-right-radius:14px}

/* cinematic letterbox bars */
.cine-bar{position:absolute;left:0;right:0;height:0;z-index:18;background:#000;pointer-events:none;
  transition:height .6s cubic-bezier(.6,0,.3,1)}
.cine-top{top:0}.cine-bot{bottom:0}
body.cine .cine-top,body.cine .cine-bot{height:9%}

/* subtle always-on film grade */
.grade{position:absolute;inset:0;z-index:11;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(6,2,0,.36) 100%);mix-blend-mode:multiply}

/* parry white flash */
body.parry-flash .game-wrap::after{content:'';position:absolute;inset:0;z-index:15;pointer-events:none;
  background:rgba(255,244,214,.55);animation:parryflash .18s ease-out forwards}
@keyframes parryflash{0%{opacity:1}100%{opacity:0}}

/* combo counter */
.combo-chip{position:absolute;right:14px;top:96px;pointer-events:none;opacity:0;transform:translateY(-6px) scale(.85);
  transition:opacity .18s,transform .2s;text-align:right;font-weight:800;font-size:1.05rem;letter-spacing:.08em;color:#ffe4b8;
  text-shadow:0 0 16px rgba(255,176,84,.7),0 2px 6px rgba(0,0,0,.8)}
.combo-chip.show{opacity:1;transform:translateY(0) scale(1)}
.combo-chip b{font-size:1.9rem;color:var(--gold)}
.combo-chip i{display:block;font-style:normal;font-size:.62rem;letter-spacing:.34em;color:var(--accent2);
  text-shadow:0 0 12px rgba(255,90,60,.8)}
.combo-chip.hot b{color:#fff;text-shadow:0 0 22px var(--accent2)}
.combo-chip.pop b{display:inline-block;animation:combopop .18s ease-out}
@keyframes combopop{0%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ornate vitals: angled ends + gold frame + segment ticks */
.bar{border:1px solid rgba(255,178,84,.4);border-radius:3px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%)}
.bar-fill{border-radius:2px}
.bar.hp{background:linear-gradient(180deg,rgba(20,8,4,.85),rgba(8,4,2,.85))}
.bar.hp::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(0,0,0,.45) 24px 25px)}
.bar.meter::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(0,0,0,.45) 30px 31px)}

/* menu embers */
.embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.screen{isolation:isolate}
.embers i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#ffd9a0 0%,#ff8a3c 60%,transparent 70%);
  filter:blur(.4px);opacity:0;animation:ember 7s linear infinite}
.embers i:nth-child(1){left:8%;animation-delay:0s;animation-duration:6.2s}
.embers i:nth-child(2){left:19%;animation-delay:2.1s;animation-duration:7.4s}
.embers i:nth-child(3){left:31%;animation-delay:4.3s;animation-duration:6.8s}
.embers i:nth-child(4){left:42%;animation-delay:1.2s;animation-duration:8.2s}
.embers i:nth-child(5){left:52%;animation-delay:5.4s;animation-duration:6.4s}
.embers i:nth-child(6){left:61%;animation-delay:.7s;animation-duration:7.8s}
.embers i:nth-child(7){left:70%;animation-delay:3.5s;animation-duration:6.6s}
.embers i:nth-child(8){left:79%;animation-delay:2.8s;animation-duration:8.6s}
.embers i:nth-child(9){left:88%;animation-delay:4.9s;animation-duration:7s}
.embers i:nth-child(10){left:95%;animation-delay:1.8s;animation-duration:6s}
@keyframes ember{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  8%{opacity:.9}
  60%{opacity:.55}
  100%{transform:translateY(-105vh) translateX(24px) scale(.4);opacity:0}}

@media (max-width:560px){
  .player-pill{display:none}
  .hud-chip b{font-size:.88rem}
  .vitals{min-width:120px}
  .hud-hint{display:none}
  .boss-bar{top:52px;width:min(360px,68vw)}
  .combo-chip{top:120px}
  .combo-chip b{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .rewind-btn,.bar.hp .bar-fill.low,.bar.meter.ready .bar-fill,.embers i,.combo-chip.pop b{animation:none}
  .zone-banner{transition:opacity .2s}
  .cine-bar{transition:none}
  body.parry-flash .game-wrap::after{animation:none;opacity:0}
}