/* ================================================================
   SHELL — awakening cutscene · HUD nav · audio toggle · monarch mode
   ================================================================ */

/* ---------- boot / awakening ---------- */
#boot{position:fixed;inset:0;z-index:var(--z-boot);background:var(--void);
  display:grid;place-items:center;cursor:pointer;transition:opacity .5s var(--ease-slide)}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-box{width:min(660px,90vw);padding:28px 30px;position:relative;
  border:1px solid var(--line);background:rgba(9,13,24,.86)}
.boot-box::before,.boot-box::after{content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--sys-cyan)}
.boot-box::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.boot-box::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.boot-t{font-family:var(--font-sys);font-size:11px;letter-spacing:.4em;color:var(--sys-cyan);margin-bottom:8px}
.boot-jp{font-family:var(--font-jp);font-size:10px;letter-spacing:.5em;color:var(--dim);margin-bottom:18px}
.boot-log{min-height:200px;font-size:13px;color:var(--dim);line-height:1.9}
.boot-log .ln{display:block;white-space:pre-wrap}
.boot-log .ln b{color:var(--sys-cyan);font-weight:400}
.boot-log .ln.ok{color:var(--sys-green)}
.boot-log .ln.warn{color:var(--sys-gold)}
.boot-log .ln.grant{color:var(--bright);font-family:var(--font-sys);font-weight:900;
  letter-spacing:.3em;font-size:19px;margin-top:14px;text-shadow:0 0 24px var(--sys-cyan)}
.boot-cur{display:inline-block;width:9px;height:14px;background:var(--sys-cyan);
  vertical-align:-2px;animation:sayBlink 1s steps(1) infinite}
.boot-skip{position:absolute;bottom:10px;right:14px;font-size:10px;color:var(--dim);letter-spacing:.16em}

/* ---------- HUD ---------- */
#hud{position:sticky;top:0;z-index:var(--z-hud);background:rgba(4,6,12,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dim)}
.hud-in{display:flex;align-items:center;gap:16px;padding:9px 20px;
  max-width:1200px;margin:0 auto;font-size:var(--fs-hud);letter-spacing:.12em}
.hud-sig{font-family:var(--font-sys);font-size:10px;letter-spacing:.3em;color:var(--sys-cyan);white-space:nowrap}
.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--sys-green);
  box-shadow:0 0 8px var(--sys-green);animation:pulse 2.2s infinite;flex:none}
#hud nav{margin-left:auto;display:flex;gap:3px;flex-wrap:wrap}
#hud nav a{position:relative;color:var(--dim);padding:6px 9px;transition:color .2s}
#hud nav a .jpn{display:block;font-family:var(--font-jp);font-size:8px;letter-spacing:.24em;opacity:.6}
#hud nav a:hover,#hud nav a.here{color:var(--sys-cyan);text-shadow:0 0 12px rgba(53,224,255,.5)}
#hud nav a.here::after{content:"";position:absolute;inset:auto 6px -1px;height:2px;background:var(--sys-cyan)}
.hud-btns{display:flex;gap:6px}
.hud-tg{border:1px solid var(--line-dim);color:var(--dim);padding:5px 9px;font-size:10px;
  letter-spacing:.14em;transition:all .2s}
.hud-tg:hover{color:var(--sys-cyan);border-color:var(--line)}
.hud-tg[aria-pressed="true"]{color:var(--sys-green);border-color:rgba(61,220,151,.45)}
#hud .prog{height:2px;background:linear-gradient(90deg,var(--sys-cyan),var(--sys-violet));
  width:var(--p,0%);transition:width .1s linear}
@media(max-width:900px){ #hud nav{display:none} }

/* ---------- monarch mode (konami) ---------- */
body.monarch{--sys-cyan:#c07bff;--sys-green:#ff7bd5;--line:rgba(192,123,255,.3);
  --line-dim:rgba(192,123,255,.14)}
body.monarch #record{filter:hue-rotate(-28deg) saturate(1.25)}
body.monarch #ign{filter:drop-shadow(0 0 22px #c07bff) drop-shadow(0 6px 10px rgba(0,0,0,.55))}