/* ============================================================
   P5 BATTLE UI v2 — THROWAWAY PROTOTYPE (Luna asset slots)
   palette: #080808 / #ed0015 / #f5f5f2
   all animations: transform / opacity only
   ============================================================ */
:root{
  --bg:#080808;
  --red:#ed0015;
  --white:#f5f5f2;
  --gray:#8a8a85;
  --panel:#0d0d0d;
  --disp:"Arial Black","Arial Narrow Bold",Impact,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{max-width:100%}
html,body{overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--mono);
  overflow:hidden;
  min-height:100vh;
}
a{color:inherit}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
}
::selection{background:var(--red);color:#fff}

/* ============================================================
   LANDING BATTLE COMPOSITION
   // landing: emblem composition (figure removed 2026-08-08)
   ============================================================ */
.battle{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 34%, rgba(237,0,21,.10), transparent 46%),
    var(--bg);
}

/* ---- Luna asset slot #2: full-screen battle background art ---- */
.bg-art{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
  opacity:.45;
}

/* ---- background decorations (cleaned: one ghost word, one halftone
       wedge, 3 deliberate red streaks, 2 ink splats, 2 torn panels) ---- */
.bg{position:absolute;inset:0;pointer-events:none;z-index:1}
.word{
  position:absolute;
  font:900 italic clamp(110px,21vw,330px)/0.78 var(--disp);
  color:transparent;
  -webkit-text-stroke:2px rgba(245,245,242,.07);
  letter-spacing:-.045em;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
}
.word-target{left:22%;top:20%;transform:rotate(-6deg);font-size:clamp(150px,28vw,430px);-webkit-text-stroke:2px rgba(245,245,242,.05)}
/* diagonal halftone wedge */
.wedge{
  position:absolute;left:-8%;top:36%;
  width:68%;height:24%;
  background:radial-gradient(circle, rgba(245,245,242,.30) 1px, transparent 1.6px);
  background-size:13px 13px;
  opacity:.22;
  transform:rotate(-16deg);
  clip-path:polygon(0 0,100% 0,74% 100%,0 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);
          mask-image:linear-gradient(90deg,#000 20%,transparent);
}
.speed-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* layered ink splats */
.splat{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.s1{width:520px;height:440px;left:-150px;top:10%;background:#0d0d0d;clip-path:polygon(14% 8%,40% 0,64% 10%,88% 3%,100% 30%,91% 55%,100% 79%,76% 100%,50% 89%,24% 100%,3% 81%,11% 53%,0 28%)}
.s2{width:600px;height:520px;right:-180px;bottom:4%;background:#111;clip-path:polygon(10% 0,36% 6%,60% 0,84% 12%,100% 38%,90% 64%,100% 90%,72% 100%,44% 88%,18% 100%,0 74%,8% 40%,0 16%)}
.panel{
  position:absolute;background:#0d0d0d;
  border:1px solid rgba(245,245,242,.10);
  pointer-events:none;
}
.panel-a{width:420px;height:580px;left:-90px;top:-70px;transform:rotate(7deg);clip-path:polygon(2% 0,100% 0,100% 12%,94% 30%,100% 56%,88% 100%,0 96%,0 24%)}
.panel-b{width:360px;height:520px;right:-70px;bottom:-80px;transform:rotate(-8deg);clip-path:polygon(0 0,98% 0,100% 34%,90% 60%,100% 100%,4% 96%,0 40%)}

/* ---- hero composition: emblem + title, ONE unit ---- */
.hero{
  position:absolute;
  left:52%;top:44%;
  transform:translate(-50%,-50%) rotate(-2deg);
  z-index:12;
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  will-change:transform;
}
.emblem-stage{position:relative;margin-bottom:-7vh}
/* emblem (Luna slot #1 repurposed: assets/battle-emblem.svg + inline fallback) */
.emblem{
  position:relative;z-index:1;
  height:38vh;width:auto;
  display:block;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.65));
  user-select:none;
  -webkit-user-drag:none;
}
/* red focus-slash behind the emblem */
.focus-slash{
  position:absolute;z-index:0;
  left:2%;top:-6%;width:96%;height:112%;
  background:linear-gradient(165deg, rgba(237,0,21,.85) 0%, rgba(237,0,21,.38) 46%, rgba(237,0,21,.10) 100%);
  clip-path:polygon(26% 0,100% 0,72% 100%,0 100%);
  transform:rotate(-8deg);
  pointer-events:none;
}
.focus-slash::after{
  content:"";position:absolute;left:8%;top:18%;width:3px;height:66%;
  background:rgba(245,245,242,.5);
  transform:rotate(8deg);
}
.title-block{position:relative;z-index:2;text-align:center}
.hero-name{
  font:900 italic clamp(64px,8vw,110px)/0.85 var(--disp);
  letter-spacing:-.02em;
  color:var(--white);
  text-shadow:6px 6px 0 rgba(237,0,21,.85);
  white-space:nowrap;
}
/* red-slash band behind "PHANTOM OF THE WEB" */
.hero-slash{
  position:relative;display:inline-block;
  margin-top:14px;padding:7px 24px;
}
.hero-slash::before{
  content:"";position:absolute;inset:0;
  background:var(--red);
  transform:skewX(-18deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.hero-phrase{
  position:relative;z-index:1;
  font:900 italic clamp(18px,2.2vw,30px)/1 var(--disp);
  letter-spacing:.05em;
  color:var(--white);
  white-space:nowrap;
}
.hero-meta{
  margin-top:16px;
  font:700 clamp(11px,1.1vw,13px)/1.6 var(--mono);
  letter-spacing:.22em;
  color:#d6d6cf;
}
.hero-meta b{color:var(--red);font-weight:900}
.hero-sub{
  margin-top:8px;
  font:400 clamp(11px,1.05vw,13px)/1.5 var(--mono);
  letter-spacing:.08em;
  color:var(--gray);
}

/* ---- HUD ---- */
.hud{
  position:absolute;
  left:20px;bottom:14px;
  z-index:25;
  width:min(320px,36vw);
  background:rgba(10,10,10,.72);
  border:1px solid rgba(245,245,242,.35);
  padding:12px 14px 10px;
  clip-path:polygon(2% 0,100% 0,98% 100%,0 100%,2% 72%);
  box-shadow:8px 10px 0 rgba(0,0,0,.45);
}
.turn{
  display:inline-block;
  margin-bottom:8px;
  font:900 12px/1 var(--mono);
  letter-spacing:.34em;
  color:#fff;background:var(--red);
  padding:5px 11px 5px 14px;
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
  animation:turnblink 1.5s steps(2,end) infinite;
}
@keyframes turnblink{50%{opacity:.2}}
.hud-name{
  display:flex;justify-content:space-between;align-items:baseline;
  font:900 italic 20px/1 var(--disp);
  letter-spacing:-.01em;
  margin-bottom:9px;
}
.hud-name .lv{color:var(--red);font:800 13px/1 var(--mono);letter-spacing:.14em}
.barrow{display:flex;align-items:center;gap:8px;margin-top:7px}
.bar-tag{
  font:900 12px/1 var(--mono);letter-spacing:.1em;
  width:24px;color:var(--white);
}
.hp .bar-tag{color:var(--red)}
.sp .bar-tag{color:#cfcfc8}
.bar{
  position:relative;flex:1;height:18px;
  background:#171717;
  border:1px solid rgba(245,245,242,.55);
  clip-path:polygon(2% 18%,96% 0,100% 46%,97% 100%,0 82%,3% 52%);
}
.bar .fill{
  position:absolute;left:0;top:0;bottom:0;
  width:var(--w);
  clip-path:polygon(2% 18%,96% 0,100% 46%,97% 100%,0 82%,3% 52%);
  transition:width .7s cubic-bezier(.22,1,.36,1);
}
.hp .fill{background:var(--red)}
.sp .fill{
  background:var(--white);
  background-image:repeating-linear-gradient(-45deg, rgba(237,0,21,.55) 0 6px, transparent 6px 12px);
}
/* animated jagged damage ticks (segmented notches) */
.bar::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 7px, rgba(8,8,8,.9) 7px 9px);
  animation:tick-pulse 2.3s ease-in-out infinite;
}
@keyframes tick-pulse{0%,100%{opacity:.95}50%{opacity:.5}}
.bar::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:4px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(245,245,242,.4) 0 2px, transparent 2px 11px);
}
.hud-stars{margin-top:10px;display:grid;gap:2px}
.hud-stars span{
  display:flex;justify-content:space-between;gap:10px;
  font:700 10.5px/1.5 var(--mono);
  letter-spacing:.08em;
  color:#b9b9b2;
}
.hud-stars b{color:var(--red);font-weight:900;letter-spacing:.02em}
.hud-stars i{color:#555;font-style:normal;font-weight:900}
.hud-readout{
  margin-top:10px;
  font:700 11px/1 var(--mono);
  letter-spacing:.14em;
  color:#cfcfc9;
  white-space:nowrap;
}
.hud-readout b{color:var(--red);font-weight:900}
@media (max-width:900px){
  .hud-readout{font-size:9.5px;letter-spacing:.08em;white-space:normal}
}

/* ============================================================
   BATTLE COMMANDS (wrapped so the red splash can escape clip-path)
   Two disciplined vertical clusters flanking the emblem:
   LEFT RAIL: PERSONA/ABOUT, ATTACK/PROJECTS, SKILLS/ARSENAL (top→bottom)
   RIGHT RAIL: ITEM/BLOG, TACTICS/EXPERIENCE, GUARD/CONTACT (top→bottom)
   ============================================================ */
.cmds{position:absolute;inset:0;z-index:30;pointer-events:none}
/* translucent dark polygon behind each rail — reads as an intentional group */
.rail{
  position:absolute;top:9%;bottom:16%;
  width:min(250px,17vw);
  background:rgba(13,13,13,.62);
  border:1px solid rgba(245,245,242,.07);
  pointer-events:none;
}
.rail-left{left:3.5%;transform:rotate(-2deg);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%,6% 82%)}
.rail-right{right:3.5%;transform:rotate(2deg);clip-path:polygon(0 0,96% 0,100% 100%,4% 100%,0 18%)}
.cmdwrap{
  position:absolute;z-index:1;
  pointer-events:none;
}
/* LEFT RAIL (top→bottom) */
.cmdwrap[data-cmd="persona"]{left:5%;top:10%}
.cmdwrap[data-cmd="attack"]{left:5%;top:38%}
.cmdwrap[data-cmd="skills"]{left:5%;top:66%}
/* RIGHT RAIL (top→bottom) */
.cmdwrap[data-cmd="item"]{right:5%;top:66%}
.cmdwrap[data-cmd="tactics"]{right:5%;top:38%}
.cmdwrap[data-cmd="guard"]{right:5%;top:10%}
.cmds.hot .cmdwrap:not(.hot){transform:translateX(8px)}
.cmds.hot .cmdwrap.hot{transform:translate(-8px,-6px)}
/* red selection splash — rotated polygon + radial burst, escapes clip-path */
.cmd-splash{
  position:absolute;z-index:0;pointer-events:none;
  inset:-12px -14px;
  opacity:0;
  transform:scale(.5) rotate(-8deg);
  transition:transform .2s cubic-bezier(.22,1.28,.36,1),opacity .15s ease;
  background:radial-gradient(circle at 50% 42%, rgba(237,0,21,.95) 0%, rgba(237,0,21,.35) 42%, transparent 72%);
  clip-path:polygon(12% 0,100% 0,88% 100%,0 100%,10% 55%);
}
.cmdwrap:hover .cmd-splash,.cmdwrap.hot .cmd-splash{opacity:1;transform:scale(1) rotate(0deg)}
.cmd{
  position:relative;z-index:1;
  pointer-events:auto;
  display:block;
  background:var(--panel);
  border:2px solid var(--white);
  color:var(--white);
  text-decoration:none;
  padding:13px 22px 15px 28px;
  clip-path:polygon(3.5% 0,100% 0,96.5% 100%,0 100%,3% 60%);
  box-shadow:7px 9px 0 rgba(0,0,0,.55);
  transition:transform .18s cubic-bezier(.22,1.28,.36,1);
  transform:rotate(var(--r,0deg));
}
.cmd:hover,.cmd.hot,.cmd:focus-visible{
  background:var(--red);
  border-color:var(--red);
  transform:rotate(var(--r,0deg)) scale(1.06);
  filter:drop-shadow(0 0 14px rgba(237,0,21,.8));
}
.cmd:focus-visible{outline:3px solid var(--red);outline-offset:4px}
/* P5-style letter shortcut badge — red parallelogram top-right, mirrors the
   classic Persona command badge. The letter is the ONLY shortcut binding
   (numbers removed 2026-08-08). aria-hidden: the command keeps its name. */
.cmd-key{
  position:absolute;top:7px;right:10px;
  font:800 12px/1 var(--mono);
  color:#fff;background:var(--red);
  padding:3px 6px;
  letter-spacing:.05em;
  pointer-events:none;
  user-select:none;
  clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);
}
.cmd:hover .cmd-key,.cmd.hot .cmd-key,.cmd:focus-visible .cmd-key{
  background:var(--white);color:var(--red);
}
.cmd-big{
  display:block;
  font:900 italic clamp(25px,2.5vw,38px)/0.95 var(--disp);
  letter-spacing:-.02em;
  text-shadow:2px 2px 0 #000;
}
.cmd[data-cmd="attack"] .cmd-big{font-size:clamp(34px,3.4vw,52px)}
/* persistent tiny descriptor under the command name */
.cmd-sub{
  display:block;margin-top:6px;
  font:700 10.5px/1 var(--mono);
  letter-spacing:.26em;
  color:#9a9a93;
}
.cmd-sub::before{content:"> ";color:var(--red);font-weight:900}
.cmd:hover .cmd-sub,.cmd.hot .cmd-sub,.cmd:focus-visible .cmd-sub{color:#fff}
.cmd:hover .cmd-sub::before,.cmd.hot .cmd-sub::before,.cmd:focus-visible .cmd-sub::before{color:#fff}
/* white italic sub-flourish on hover (absolute — no layout shift) */
.cmd-flourish{
  position:absolute;top:4px;left:50%;
  transform:translate(-50%,-5px);
  opacity:0;
  font:italic 800 10.5px/1 var(--mono);
  letter-spacing:.22em;color:#fff;
  white-space:nowrap;pointer-events:none;
  transition:transform .16s ease,opacity .16s ease;
}
.cmd:hover .cmd-flourish,.cmd.hot .cmd-flourish,.cmd:focus-visible .cmd-flourish{
  transform:translate(-50%,0);opacity:1;
}
/* base rotations */
.cmd[data-cmd="persona"]{--r:-5deg}
.cmd[data-cmd="item"]{--r:4deg}
.cmd[data-cmd="attack"]{--r:-2deg}
.cmd[data-cmd="tactics"]{--r:2.5deg}
.cmd[data-cmd="skills"]{--r:-4deg}
.cmd[data-cmd="guard"]{--r:4deg}

/* ============================================================
   BATTLE INTRO (turn-start): slash sweep → LEFT rail commands slam
   in (stagger 60ms) → RIGHT rail commands slam in (stagger 60ms)
   → emblem+title pop (scale 1.15→1, rotate settle) → HUD pops.
   Total < 900ms. Transform/opacity only.
   ============================================================ */
#intro-slash{
  position:absolute;left:50%;top:-30%;
  width:13vw;height:160%;
  z-index:85;pointer-events:none;
  opacity:0;
  transform:translateX(-70vw) rotate(16deg);
}
#intro-slash .b{position:absolute;inset:0;background:var(--red)}
#intro-slash .w{position:absolute;inset:0;width:22%;left:9%;background:var(--white);opacity:.9}
.battle.intro #intro-slash{animation:intro-sweep .3s cubic-bezier(.6,0,.3,1) 10ms both}
@keyframes intro-sweep{
  0%{transform:translateX(-70vw) rotate(16deg);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(70vw) rotate(16deg);opacity:0}
}
.battle.intro .cmd{animation:cmd-slam .18s cubic-bezier(.22,1.28,.36,1) var(--d,0ms) backwards}
@keyframes cmd-slam{
  from{transform:rotate(calc(var(--r,0deg) - 10deg)) scale(1.15);opacity:0}
  to{transform:rotate(var(--r,0deg)) scale(1);opacity:1}
}
.battle.intro .hero{animation:hero-pop .32s cubic-bezier(.22,1.28,.36,1) 440ms backwards}
@keyframes hero-pop{
  from{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(-7deg)}
  to{opacity:1;transform:translate(-50%,-50%) rotate(-2deg)}
}
.battle.intro .hud{animation:hud-pop .26s cubic-bezier(.22,1.28,.36,1) 560ms backwards}
@keyframes hud-pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* ---- transition slash ---- */
.slash{
  position:fixed;inset:0;z-index:90;
  pointer-events:none;
  opacity:0;
  transition:opacity .04s linear;
}
.slash .bar{
  position:absolute;left:50%;top:-30%;
  width:9vw;height:160%;
  background:var(--red);
  transform:translateX(-50%) rotate(22deg) scaleY(0);
  transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.9,.25,1);
}
.slash .bar.w{
  background:var(--white);width:1.6vw;
  transition-delay:.06s;
}
.slash .bar.r2{transition-delay:.1s;background:var(--red);opacity:.75}
.slash.on{opacity:1}
.slash.on .bar{transform:translateX(-50%) rotate(22deg) scaleY(1)}

/* ============================================================
   SCENES (battle states) — diagonal clip + slit reveal
   ============================================================ */
.scene{
  position:fixed;inset:0;z-index:40;
  visibility:hidden;opacity:0;
  transform:translateX(5%) rotate(1.4deg) scaleY(.02);
  clip-path:polygon(0 0,100% 1.4%,100% 100%,0 98.6%);
  transition:opacity .32s ease,transform .32s cubic-bezier(.22,.9,.3,1),visibility 0s linear .32s;
  overflow-y:auto;overflow-x:hidden;
  background:var(--bg);
  pointer-events:none;
}
.scene.active{
  visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .32s ease,transform .32s cubic-bezier(.22,.9,.3,1),visibility 0s;
}
.scene.leaving{transform:translateX(-4%) rotate(-1.2deg) scaleY(.99);opacity:0}
.scene:focus{outline:none}
.scene-inner{
  position:relative;
  max-width:1200px;margin:0 auto;
  padding:98px 48px 170px; /* top padding clears the fixed RETURN button */
  min-height:100vh;
  overflow:hidden;
}
.scene-word{
  position:absolute;top:8%;right:-4%;
  font:900 italic clamp(90px,16vw,250px)/1 var(--disp);
  color:transparent;-webkit-text-stroke:1.5px rgba(245,245,242,.07);
  pointer-events:none;user-select:none;white-space:nowrap;
  transform:rotate(-5deg);z-index:0;
}
.scene-kicker{
  font:800 12.5px/1 var(--mono);
  letter-spacing:.32em;color:var(--red);
  margin:0 0 20px;text-transform:uppercase;
}
.scene h1{
  position:relative;z-index:1;
  font:900 italic clamp(44px,7.6vw,128px)/0.88 var(--disp);
  letter-spacing:-.035em;
  color:var(--white);
  margin:0 0 44px;
  text-shadow:6px 6px 0 rgba(237,0,21,.85);
  max-width:16ch;
}
.scene h1 em{color:var(--red);font-style:italic}
.scene h1:hover{animation:jitter .22s steps(2,end) infinite}
@keyframes jitter{0%{transform:translate(0,0)}33%{transform:translate(2px,-1px)}66%{transform:translate(-2px,1px)}100%{transform:translate(0,0)}}
/* typography scales toward camera on scene entry */
.scene.active.anim .scene-head{animation:head-cam .2s ease-out both}
@keyframes head-cam{from{transform:scale(1);opacity:0}to{transform:scale(1.06);opacity:1}}

/* scene nav (quick command switch) */
.scene-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:7px;
  padding:12px 18px;
  background:#0a0a0a;
  border-top:1px solid rgba(245,245,242,.16);
}
.scene-nav a{
  font:700 11.5px/1 var(--mono);
  letter-spacing:.12em;
  color:var(--white);
  text-decoration:none;
  background:var(--panel);
  border:1px solid rgba(245,245,242,.4);
  padding:11px 12px;
  transition:transform .15s,opacity .15s;
}
.scene-nav a b{color:var(--red);margin-right:6px}
.scene-nav a:hover,.scene-nav a:focus-visible{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.scene-nav a.current{background:var(--red);border-color:var(--red)}

/* ---------- ATTACK / PROJECTS ---------- */
.targets{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:26px;
}
.target{
  position:relative;grid-column:span 4;
  background:var(--panel);
  border:2px solid var(--white);
  color:var(--white);
  padding:26px 24px 30px;
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%,4% 70%);
  box-shadow:8px 10px 0 rgba(0,0,0,.5);
  transition:transform .2s ease,opacity .2s ease;
}
.target:nth-of-type(1){transform:rotate(-1.6deg)}
.target:nth-of-type(2){transform:rotate(1.3deg)}
.target:nth-of-type(3){transform:rotate(-.9deg)}
.target:nth-of-type(4){transform:rotate(1.7deg)}
.target:nth-of-type(5){transform:rotate(-1.3deg)}
.target:hover{transform:rotate(0deg) scale(1.03);z-index:2}
.targets:has(.target:hover) .target:not(:hover){opacity:.8}
.target.critical{border-color:var(--red);background:#150a0c;filter:drop-shadow(0 0 9px rgba(237,0,21,.4))}
.t-num{
  font:900 italic clamp(34px,3.4vw,54px)/1 var(--disp);
  color:transparent;-webkit-text-stroke:2px rgba(237,0,21,.85);
  display:block;margin-bottom:14px;
}
.target h3{font:900 italic clamp(22px,2.4vw,34px)/1 var(--disp);letter-spacing:-.01em;margin-bottom:8px}
.t-stack{font:700 12px/1.6 var(--mono);color:#b9b9b2;letter-spacing:.06em;margin-bottom:10px}
.t-status{font:700 12px/1.6 var(--mono);letter-spacing:.14em;color:#8a8a85}
.t-status strong{color:var(--red)}
.t-impact{
  margin-top:12px;
  font:italic 700 14.5px/1.55 var(--disp);
  color:#e8e8e2;
  font-family:var(--disp);
}
.t-big{
  position:absolute;right:12px;bottom:-16px;
  font:900 italic 110px/1 var(--disp);
  color:rgba(237,0,21,.17);
  opacity:0;transform:scale(.8);
  transition:opacity .22s,transform .22s;
  pointer-events:none;user-select:none;z-index:0;
}
.target:hover .t-big{opacity:1;transform:scale(1)}
.t-cross{
  position:absolute;top:12px;right:14px;width:20px;height:20px;
  opacity:0;transform:scale(.4) rotate(45deg);
  transition:opacity .2s,transform .2s;
  border:2px solid var(--red);border-radius:50%;
  pointer-events:none;
}
.t-cross::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px;background:var(--red);transform:translate(-50%,-50%)}
.t-cross::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:22px;background:var(--red);transform:translate(-50%,-50%)}
.target:hover .t-cross{opacity:1;transform:scale(1) rotate(45deg)}
/* lock-on pulsing ring on the CRITICAL! target */
.lockring{
  position:absolute;top:-13px;right:-11px;
  width:36px;height:36px;pointer-events:none;
  border:2px solid var(--red);border-radius:50%;
  animation:lock-pulse 1.1s ease-in-out infinite;
}
.lockring::before{
  content:"";position:absolute;left:50%;top:50%;
  width:46px;height:2px;background:var(--red);
  transform:translate(-50%,-50%) rotate(45deg);
}
.lockring::after{
  content:"";position:absolute;left:50%;top:50%;
  width:2px;height:46px;background:var(--red);
  transform:translate(-50%,-50%) rotate(45deg);
}
@keyframes lock-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.3);opacity:.3}}
.t-cta{
  display:inline-block;margin-top:18px;
  font:800 12.5px/1 var(--mono);letter-spacing:.2em;
  color:#080808;background:var(--red);
  padding:12px 16px;text-decoration:none;
  clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:transform .15s;
}
.t-cta:hover,.t-cta:focus-visible{background:var(--white);color:var(--red);transform:translateX(4px)}
.t-flash{
  position:absolute;top:12px;right:12px;
  background:var(--red);color:#fff;
  font:900 italic 13px/1 var(--disp);
  padding:6px 10px;
  transform:rotate(5deg);
  animation:flashblink 1.05s steps(2,start) infinite;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  letter-spacing:.04em;
}
@keyframes flashblink{50%{opacity:.12}}
.t-hit{
  position:absolute;top:auto;bottom:-18px;left:14px;
  font:800 12px/1 var(--mono);letter-spacing:.18em;color:var(--red);
  opacity:0;transform:translateY(6px);
  transition:opacity .18s,transform .18s;
  pointer-events:none;white-space:nowrap;
}
.target.critical:hover .t-hit{opacity:1;transform:none}
.t-cursor{
  position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  z-index:80;pointer-events:none;opacity:0;transition:opacity .15s;
}
.t-cursor.on{opacity:1}
.t-cursor::before{content:"";position:absolute;inset:0;border:2px solid var(--red);border-radius:50%;animation:cursor-spin 1.1s linear infinite}
.t-cursor::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--red);transform:translate(-50%,-50%)}
@keyframes cursor-spin{to{transform:rotate(360deg)}}

/* ---------- PERSONA / ABOUT ---------- */
.arcana{
  position:relative;z-index:1;
  max-width:820px;
  border-top:2px solid var(--red);
}
.arc-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:22px;
  padding:17px 0;
  border-bottom:1px solid rgba(245,245,242,.18);
}
.arc-row dt{
  font:800 13px/1 var(--mono);letter-spacing:.26em;color:var(--red);
  flex:0 0 auto;padding-top:2px;
}
.arc-row dd{
  font:900 italic clamp(20px,2.6vw,34px)/1.05 var(--disp);
  letter-spacing:-.01em;text-align:right;
}
.arc-row.weak dd{color:#8a8a85;text-decoration:line-through 2px rgba(237,0,21,.5)}
.bio{
  position:relative;z-index:1;
  max-width:640px;margin-top:44px;padding-left:22px;
  border-left:4px solid var(--red);
  font:400 15px/1.75 var(--mono);
  color:#d6d6cf;
}
.bio b{color:var(--white)}
.bio .bio-quote{display:block;margin-top:16px;color:var(--red);font-style:italic}

/* face sketch slot — Luna art (assets/battle-face.svg); hidden until present */
.face-frame{
  float:right;width:min(240px,28vw);
  margin:0 0 20px 28px;
  border:1px solid var(--red);
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%,2% 82%);
  background:rgba(10,10,10,.6);
  padding:10px;
}
.face-frame img{display:block;width:100%;height:auto;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
@media (max-width:820px){
  .face-frame{float:none;width:min(240px,62vw);margin:0 auto 22px}
}

/* ---------- SKILLS / CONFIDANT GALLERY ---------- */
#scene-skills h1{margin-bottom:6px}
#scene-skills .scene-kicker{margin-bottom:12px}
.conf-sub{
  position:relative;z-index:1;
  font:700 clamp(11px,1.1vw,13px)/1.6 var(--mono);
  letter-spacing:.26em;color:var(--gray);
  margin:0 0 22px;
}
.conf-sub b{color:var(--white)}
.conf-count{
  position:relative;z-index:1;
  display:inline-block;
  font:800 12px/1 var(--mono);letter-spacing:.3em;color:#fff;
  background:var(--red);
  padding:9px 16px 9px 18px;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  margin-bottom:44px;
}
/* skills header entrance: zoom settles back to scale(1) so the scaled box
   never overlaps the gallery below (other scenes keep the shared head-cam) */
#scene-skills.scene.active.anim .scene-head{animation:head-cam-settle .2s ease-out both}
/* scene pages: the landing chrome (hero with the ARNOL slash band, cmds,
   hud, bg deco) stays hidden so nothing flashes mid-navigation; the intro
   sweep plays over the scene instead. */
body[data-scene^="scene-"] .hero,
body[data-scene^="scene-"] .cmds,
body[data-scene^="scene-"] .hud,
body[data-scene^="scene-"] .bg{visibility:hidden}
/* scene pages: clean left-to-right reveal (no slash band).
   The scenes live OUTSIDE .battle (siblings), so the marker class rides
   on <body>. */
body.scene-enter .scene.active.anim .scene-head{animation:none}
body.scene-enter .scene.active.anim .scene-inner{
  animation:scene-in-l2r .45s cubic-bezier(.22,1.28,.36,1) both;
}
@keyframes scene-in-l2r{
  from{transform:translateX(-3.5%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

@keyframes head-cam-settle{from{transform:scale(1.05);opacity:0}to{transform:scale(1);opacity:1}}
.confidants{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:34px 40px;
  padding:4px 8px 40px 6px;
}
.confidant{
  position:relative;
  background:var(--panel);
  border:2px solid var(--white);
  color:var(--white);
  padding:0 24px 24px;
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%,4% 70%);
  box-shadow:4px 5px 4px rgba(0,0,0,.38); /* soft shadow — must not cover the rank box of the card below */
  cursor:pointer;
  text-align:left;
  transition:transform .2s cubic-bezier(.22,1.28,.36,1),opacity .2s ease;
}
.confidant:nth-of-type(odd){transform:rotate(-1.2deg)}
.confidant:nth-of-type(even){transform:rotate(1.1deg)}
.confidant:nth-of-type(4n+2){transform:rotate(1.6deg)}
.confidant:nth-of-type(4n+3){transform:rotate(-1.5deg)}
.confidant:hover,.confidant:focus-visible{
  border-color:var(--red);background:#150a0c;
  transform:rotate(0deg) scale(1.03);z-index:2;
  filter:drop-shadow(0 0 12px rgba(237,0,21,.35));
}
.confidants:has(.confidant:hover) .confidant:not(:hover){opacity:.75}
/* arcana strip: dark by default, floods red on hover/focus */
.conf-arcana{
  display:flex;align-items:center;gap:10px;
  background:#101010;
  margin:0 -24px 16px;
  padding:10px 14px 10px 18px;
  border-bottom:2px solid var(--red);
  clip-path:polygon(0 0,100% 0,95% 100%,0 100%,4% 50%);
  transition:background .18s ease,color .18s ease;
}
.confidant:hover .conf-arcana,.confidant:focus-visible .conf-arcana{background:var(--red)}
.conf-symbol{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.conf-symbol svg{width:20px;height:20px;display:block}
.conf-arcana-name{
  font:800 12px/1 var(--mono);
  letter-spacing:.28em;color:var(--red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .18s ease;
}
.confidant:hover .conf-arcana-name,.confidant:focus-visible .conf-arcana-name{color:#fff}
.conf-skill{
  font:900 italic clamp(22px,2.3vw,32px)/1 var(--disp);
  letter-spacing:-.02em;color:var(--white);
  margin:0 0 13px;
  text-shadow:2px 2px 0 #000;
}
.conf-rank{display:flex;align-items:center;gap:4px;margin-bottom:14px}
.conf-rank .seg{
  flex:1;height:9px;
  background:#1c1c1c;
  border:1px solid rgba(245,245,242,.32);
  transition:background .15s,border-color .15s;
}
.conf-rank .seg.on{background:var(--red);border-color:var(--red)}
.conf-rank-label{
  flex:0 0 auto;margin-left:8px;
  font:800 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--gray);
  white-space:nowrap;
}
.confidant:hover .conf-rank-label{color:#fff}
.conf-ability{
  font:400 12px/1.55 var(--mono);
  color:#9a9a93;letter-spacing:.03em;
  margin-top:7px;
}
.conf-ability::before{content:"> ";color:var(--red);font-weight:800}
.confidant:hover .conf-ability{color:#c9c9c2}
/* confidant detail panel (reuses story chrome) */
#confidant .story-panel{max-width:620px}
.confidant-hero{display:flex;align-items:center;gap:24px;margin-bottom:20px}
.confidant-emblem{
  flex:0 0 auto;width:92px;height:92px;
  display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;border:1px solid rgba(245,245,242,.22);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%,6% 55%);
  filter:drop-shadow(0 0 10px rgba(237,0,21,.45));
}
.confidant-emblem svg{width:64px;height:64px;display:block}
#confidant .story-meta{margin:0 0 8px}
#confidant h2{font-size:clamp(24px,3.2vw,38px);margin-bottom:0}
.confidant-rank{display:flex;gap:4px;margin:20px 0 10px}
.confidant-rank .seg{
  flex:1;height:11px;
  background:#1c1c1c;
  border:1px solid rgba(245,245,242,.32);
}
.confidant-rank .seg.on{background:var(--red);border-color:var(--red)}
.confidant-rank-note{
  font:800 11.5px/1 var(--mono);letter-spacing:.24em;color:var(--gray);
  margin-bottom:22px;
}
#confidant .conf-ability{font-size:13px;color:#d6d6cf;margin:0 0 14px;padding-left:14px;border-left:3px solid var(--red)}
#confidant .conf-ability::before{content:""}
#confidant .conf-ability b{color:var(--white);font-weight:800}
.confidant-bond{
  margin-top:26px;padding-top:18px;
  border-top:2px solid var(--red);
  display:flex;justify-content:space-between;align-items:baseline;
  font:800 13px/1 var(--mono);letter-spacing:.3em;color:var(--gray);
}
.confidant-bond b{color:var(--red);font-weight:900;font-size:15px}

/* ---------- TACTICS / EXPERIENCE ---------- */
.missions{position:relative;z-index:1;list-style:none;padding:0}
.mission{
  position:relative;
  max-width:620px;
  margin:0 auto 46px;
  background:var(--panel);
  border:2px solid var(--white);
  padding:26px 30px;
  clip-path:polygon(2% 0,100% 0,98% 100%,0 100%,3% 66%);
  box-shadow:8px 10px 0 rgba(0,0,0,.5);
}
.mission:nth-of-type(odd){transform:rotate(-1.5deg);margin-left:-46px}
.mission:nth-of-type(even){transform:rotate(1.2deg);margin-left:60px}
.mission.active{border-color:var(--red);background:#140a0c;box-shadow:10px 12px 0 rgba(0,0,0,.55),0 0 22px rgba(237,0,21,.22)}
.m-code{font:800 12px/1 var(--mono);letter-spacing:.3em;color:var(--red)}
.mission h3{font:900 italic clamp(24px,3vw,40px)/1 var(--disp);margin:10px 0 6px;letter-spacing:-.01em}
.m-role{font:700 14px/1.5 var(--mono);color:#d6d6cf;margin-bottom:12px}
.m-positions{
  margin:2px 0 10px;padding:4px 0 4px 16px;
  border-left:2px solid rgba(237,0,21,.55);
  display:grid;gap:5px;
}
.m-pos{font:700 12.5px/1.5 var(--mono);color:#d6d6cf;letter-spacing:.05em}
.m-pos span{color:#8a8a85;font-weight:700}
.m-role .m-dur,.m-pos .m-dur{color:#8a8a85;font-weight:700}
.m-row{font:400 12.5px/1.8 var(--mono);color:#9a9a93;letter-spacing:.05em}
.m-row b{color:var(--white);font-weight:800}
.m-status{display:inline-block;margin-top:12px;font:800 12px/1 var(--mono);letter-spacing:.22em;color:#8a8a85}
.m-status strong{color:var(--red)}
/* red slash separators between missions */
.m-slash{
  display:block;width:130px;height:6px;
  margin:-32px auto 12px;
  background:var(--red);
  transform:rotate(-24deg);
  clip-path:polygon(0 0,100% 42%,100% 100%,0 58%);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  pointer-events:none;
}

/* ---------- ITEM / BLOG ---------- */
.inv{
  position:relative;z-index:1;
  list-style:none;display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}
.inv-item{
  position:relative;
  background:var(--panel);
  border:2px solid var(--white);
  padding:22px 24px 24px;
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%,3.5% 62%);
  box-shadow:7px 9px 0 rgba(0,0,0,.5);
  text-align:left;
}
button.inv-item{
  font-family:inherit;color:inherit;cursor:pointer;
  transition:transform .18s;
}
button.inv-item:hover,button.inv-item:focus-visible{
  background:#160a0d;border-color:var(--red);transform:rotate(-.6deg) scale(1.02);
}
.inv-code{font:800 12px/1 var(--mono);letter-spacing:.26em;color:var(--red);display:block;margin-bottom:10px}
.inv-item h3{font:900 italic clamp(19px,2.2vw,28px)/1.12 var(--disp);letter-spacing:-.01em;margin-bottom:12px}
.inv-meta{font:400 12px/1.9 var(--mono);color:#9a9a93;letter-spacing:.06em}
.inv-meta b{color:var(--white)}
.inv-excerpt{
  margin-top:6px;
  font:400 12px/1.6 var(--mono);
  color:#9a9a93;letter-spacing:.04em;
}
.inv-item{display:block;text-decoration:none;color:inherit}
.inv-item:hover h3,.inv-item:focus-visible h3{color:var(--red)}
.story-data.article-body{display:block;max-width:720px;margin:0 auto} /* beats .story-data{display:none} */
.article-body h1,.article-body h2,.article-body h3{
  font:900 italic clamp(20px,2.6vw,30px)/1.15 var(--disp);
  margin:1.4em 0 .5em;color:var(--white);
}
.article-body p{margin:0 0 1em}
.article-body a{color:var(--red);text-decoration:underline}
.article-body pre{
  background:#0d0d0d;border:1px solid rgba(237,0,21,.4);
  padding:16px;overflow-x:auto;
  font:400 13px/1.6 var(--mono);
}
.article-body code{font-family:var(--mono);font-size:.92em}
.article-body pre code{color:#e8e8e2}
.article-body pre .c{color:#7a7a73}
.article-body pre .k{color:var(--red);font-weight:800}
.article-body blockquote{
  border-left:3px solid var(--red);padding-left:16px;color:#b9b9b2;
  font-style:italic;margin:0 0 1em;
}
.article-body ul,.article-body ol{margin:0 0 1em;padding-left:1.4em}
.article-body li{margin-bottom:.4em}
.article-body img{max-width:100%;border:1px solid var(--line)}
.article-body hr{border:none;border-top:1px solid var(--line);margin:1.6em 0}
.inv-open{
  display:block;margin-top:14px;
  font:800 12px/1 var(--mono);letter-spacing:.22em;color:var(--red);
  opacity:0;transform:translateX(-6px);
  transition:opacity .18s,transform .18s;
}
button.inv-item:hover .inv-open,button.inv-item:focus-visible .inv-open{opacity:1;transform:none}
.inv-lock{
  display:inline-block;margin-top:14px;
  font:800 11px/1 var(--mono);letter-spacing:.2em;color:#9a9a93;
  border:1px solid rgba(245,245,242,.2);
  padding:7px 10px;
}
.inv-item:nth-of-type(1){transform:rotate(-1.2deg)}
.inv-item:nth-of-type(2){transform:rotate(.9deg)}
.inv-item:nth-of-type(3){transform:rotate(1.4deg)}
.inv-item:nth-of-type(4){transform:rotate(-1deg)}
.inv-item:nth-of-type(5){transform:rotate(1.1deg)}
.inv-item:nth-of-type(6){transform:rotate(-1.5deg)}

/* story overlay */
.story{
  position:fixed;inset:0;z-index:60;
  background:rgba(8,8,8,.95);
  visibility:hidden;opacity:0;
  transition:opacity .22s,visibility 0s linear .22s;
  overflow-y:auto;overflow-x:hidden;
}
.story.open{visibility:visible;opacity:1;transition:opacity .22s,visibility 0s}
.story-panel{
  position:relative;
  max-width:780px;margin:52px auto;
  background:var(--panel);
  border:2px solid var(--white);
  padding:44px 46px 50px;
  clip-path:polygon(2% 0,100% 0,98% 100%,0 100%,3% 76%);
  box-shadow:12px 14px 0 rgba(0,0,0,.55);
}
.story-close{
  position:sticky;top:0;z-index:2;
  font:800 13px/1 var(--mono);letter-spacing:.2em;
  background:var(--red);color:#fff;
  border:0;padding:13px 18px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:transform .15s;
}
.story-close:hover,.story-close:focus-visible{background:var(--white);color:var(--red);transform:translateY(2px)}
.story-meta{font:800 12px/1 var(--mono);letter-spacing:.28em;color:var(--red);margin:24px 0 14px;text-transform:uppercase}
.story h2{font:900 italic clamp(26px,3.4vw,46px)/1 var(--disp);letter-spacing:-.02em;margin-bottom:20px}
.story p{font:400 15px/1.8 var(--mono);color:#d6d6cf;margin-bottom:16px}
.story pre{
  background:#0a0a0a;border:1px solid rgba(245,245,242,.22);
  padding:20px;margin:22px 0;overflow-x:auto;
  font:12.5px/1.65 var(--mono);color:var(--white);
  box-shadow:inset 4px 0 0 var(--red);
}
.story pre .c{color:#7a7a73}
.story pre .k{color:var(--red);font-weight:800}
.story-data{display:none}
.story.open .story-data.active{display:block}

/* ---------- GUARD / CONTACT ---------- */
.contact-sub{
  position:relative;z-index:1;
  font:700 15px/1.6 var(--mono);color:#b9b9b2;
  letter-spacing:.08em;margin-bottom:44px;
}
.contact-list{position:relative;z-index:1;list-style:none;padding:0;max-width:760px}
.contact-list li{position:relative;margin-bottom:24px}
.contact-list a{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font:900 italic clamp(26px,3.6vw,52px)/1 var(--disp);
  letter-spacing:-.015em;
  color:var(--white);
  background:var(--panel);
  border:2px solid var(--white);
  padding:22px 30px;
  text-decoration:none;
  clip-path:polygon(2% 0,100% 0,98% 100%,0 100%,3% 68%);
  box-shadow:8px 10px 0 rgba(0,0,0,.5);
  transition:transform .18s;
}
.contact-list a::before{
  content:"";position:absolute;left:-14px;top:50%;
  width:0;height:5px;background:var(--red);transform:translateY(-50%);
  transition:width .2s;
}
.contact-list a span{
  font:700 14px/1 var(--mono);letter-spacing:.1em;color:var(--gray);
  transition:opacity .18s,transform .18s;
}
/* red swoosh underline on hover */
.contact-list a::after{
  content:"";position:absolute;left:6px;bottom:10px;
  width:62%;height:6px;
  background:var(--red);
  border-radius:60% 8% 60% 8%/100% 40% 100% 40%;
  transform:scaleX(0) rotate(-2deg);
  transform-origin:left center;
  transition:transform .2s cubic-bezier(.22,1.28,.36,1);
  pointer-events:none;
}
.contact-list a:hover,.contact-list a:focus-visible{
  background:var(--red);border-color:var(--red);color:#fff;
  transform:rotate(-1.2deg) scale(1.03) translateX(10px);
}
.contact-list a:hover::before,.contact-list a:focus-visible::before{width:44px}
.contact-list a:hover::after,.contact-list a:focus-visible::after{transform:scaleX(1) rotate(-2deg)}
.contact-list a:hover span,.contact-list a:focus-visible span{color:#fff}
.contact-list li:nth-of-type(2) a{transform:rotate(.8deg)}
.contact-list li:nth-of-type(3) a{transform:rotate(-1deg)}
.contact-list li:nth-of-type(2) a:hover,.contact-list li:nth-of-type(2) a:focus-visible{transform:rotate(.8deg) scale(1.03) translateX(10px)}
.contact-list li:nth-of-type(3) a:hover,.contact-list li:nth-of-type(3) a:focus-visible{transform:rotate(-1deg) scale(1.03) translateX(10px)}

/* ---- SFX mute toggle — synthesized sounds, no samples ---- */
#sfx-toggle{
  position:fixed;right:18px;top:16px;z-index:55;
  background:#050505;color:#fff;
  border:none;border-left:3px solid var(--red);
  outline:1px solid rgba(245,245,242,.4);
  font:700 10px/1 var(--mono);
  letter-spacing:.18em;padding:8px 13px 8px 15px;
  cursor:pointer;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:background .12s,color .12s;
}
#sfx-toggle:hover{background:var(--red)}
#sfx-toggle:focus-visible{outline:3px solid var(--red);outline-offset:2px}
#sfx-toggle.muted{color:var(--gray);border-left-color:var(--gray)}

/* ============================================================
   KEYBOARD POINTER (P5 lock-on bracket) + BACK NAV + MISSION
   ============================================================ */
#ptr,#ptr-ghost{
  position:fixed;left:0;top:0;z-index:50;
  pointer-events:none;
  will-change:transform;
  transition:transform .18s cubic-bezier(.22,1.28,.36,1),opacity .1s ease;
}
#ptr-ghost{z-index:49;opacity:0;transition:transform .18s cubic-bezier(.22,1.28,.36,1),opacity .14s ease}
#ptr-ghost.on{opacity:.38}
#ptr.hidden{opacity:0}
#ptr.no-anim,#ptr-ghost.no-anim{transition:none}
/* jagged lock-on frame — stepped (sawtooth) corners */
.ptr-frame{
  position:absolute;inset:0;
  border:3px solid var(--red);
  clip-path:polygon(
    0 12px, 5px 5px, 12px 0,
    calc(100% - 12px) 0, calc(100% - 5px) 5px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 5px) calc(100% - 5px), calc(100% - 12px) 100%,
    12px 100%, 5px calc(100% - 5px), 0 calc(100% - 12px)
  );
  filter:drop-shadow(0 0 6px rgba(237,0,21,.65));
}
/* keyboard pointer hidden on touch / narrow layouts (arrows still work) */
@media (max-width:900px),(hover:none){ #ptr,#ptr-ghost{display:none} }

/* ---- RETURN / BACK TO FIELD affordance (every scene) ---- */
#back-btn{
  position:fixed;left:14px;top:14px;z-index:48;
  display:none;
  align-items:center;gap:9px;
  font:800 12px/1 var(--mono);letter-spacing:.2em;
  color:var(--white);
  background:rgba(10,10,10,.88);
  border:1px solid var(--red);
  border-left:4px solid var(--red);
  padding:12px 14px;
  cursor:pointer;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:transform .15s,background .15s;
}
body.in-scene #back-btn{display:inline-flex}
body.story-open #back-btn{display:none}
#back-btn:hover,#back-btn:focus-visible{background:var(--red);transform:translateY(-2px)}
#back-btn .back-hint{
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;
  color:var(--gray);
  border:1px solid rgba(245,245,242,.25);
  padding:5px 6px;white-space:nowrap;
}
#back-btn:hover .back-hint,#back-btn:focus-visible .back-hint{color:#fff;border-color:rgba(255,255,255,.65)}
@media (max-width:900px){ #back-btn{min-height:44px} }
@media (max-width:900px){
  #sfx-toggle{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
  .scene-nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- mission detail overlay (reuses the story chrome) ---- */
#mission .story-panel{max-width:660px}
#mission .m-row{font:400 12.5px/1.8 var(--mono);color:#9a9a93;letter-spacing:.05em;margin-bottom:10px}
#mission .m-row b{color:var(--white);font-weight:800}
#mission .t-impact{font:italic 700 14.5px/1.55 var(--disp);color:#e8e8e2;margin-top:16px}
/* scene rows are pointer targets — show a subtle ring when focused */
.target:focus-visible,.confidant:focus-visible,.mission:focus-visible,.inv-item:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .emblem{height:33vh}
  .emblem-stage{margin-bottom:-5vh}
  .hero-name{font-size:clamp(48px,7.4vw,80px)}
  .hero-phrase{font-size:clamp(16px,2.4vw,24px)}
  .rail{width:min(220px,20vw)}
  .cmdwrap[data-cmd="persona"]{left:4%}
  .cmdwrap[data-cmd="attack"]{left:4%}
  .cmdwrap[data-cmd="skills"]{left:4%}
  .cmdwrap[data-cmd="item"]{right:4%}
  .cmdwrap[data-cmd="tactics"]{right:4%}
  .cmdwrap[data-cmd="guard"]{right:4%}
  .scene-inner{padding:48px 28px 196px}
  /* all targets span 4: 6 projects render as 3x2 */
  .mission:nth-of-type(odd){margin-left:-20px}
  .mission:nth-of-type(even){margin-left:20px}
  .confidants{grid-template-columns:1fr;gap:24px}
  .confidant{transform:rotate(-.8deg)!important}
}
@media (max-width:820px){
  html{overflow:hidden}
  body{overflow:hidden}
  .battle{height:100vh;height:100dvh;min-height:640px}
  /* background cleanup on handheld: smaller ghost word, no right-edge bleed */
  .word-target{left:6%;top:12%;font-size:clamp(70px,22vw,150px);-webkit-text-stroke:1.5px rgba(245,245,242,.05)}
  .splat.s2,.panel-b{display:none}
  /* hero: emblem ~32vh + title stacked, top of viewport */
  .hero{left:50%;top:22%;transform:translate(-50%,-50%);width:100%}
  .emblem{height:27vh}
  .emblem-stage{margin-bottom:-4vh}
  .hero-name{font-size:clamp(40px,12.5vw,58px);text-shadow:4px 4px 0 rgba(237,0,21,.85)}
  .hero-slash{margin-top:10px;padding:5px 14px}
  .hero-phrase{font-size:clamp(13px,4.2vw,18px);letter-spacing:.03em}
  .hero-meta{margin-top:10px;font-size:9.5px;letter-spacing:.14em;line-height:1.7;padding:0 14px}
  .hero-sub{margin-top:4px;font-size:10px;padding:0 14px}
  /* commands: 2-col handheld grid over lower portion (targets stay ≥44px) */
  .cmds{
    position:absolute;inset:auto 0 0 0;top:50%;
    display:grid;grid-template-columns:1fr 1fr;
    gap:8px;padding:10px 12px 176px;
    align-content:start;
  }
  .rail{display:none}
  .cmdwrap{position:static}
  .cmds.hot .cmdwrap:not(.hot){transform:none}
  .cmds.hot .cmdwrap.hot{transform:none}
  .cmd{
    min-height:44px;
    padding:10px 14px 11px 22px;
    width:100%;
  }
  .cmd-big{font-size:clamp(18px,5.8vw,24px)!important}
  .cmd-sub{font-size:10px;letter-spacing:.16em;margin-top:5px}
  .cmd-key{top:5px;right:9px;font-size:10px;padding:2px 5px}
  #sfx-toggle{right:10px;top:10px;font-size:9px;letter-spacing:.14em;padding:6px 9px 6px 11px}
  /* HUD bottom */
  .hud{
    left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:auto;
    padding:10px 12px 9px;
  }
  .hud-stars{grid-template-columns:1fr 1fr;gap:2px 14px}
  .hud-stars span:nth-child(5){grid-column:span 2}
  .slash .bar{width:16vw}
  #intro-slash{width:22vw}
  /* scenes */
  .scene-inner{padding:76px 18px 210px} /* top padding clears the RETURN button */
  .scene h1{font-size:clamp(36px,11vw,54px);margin-bottom:32px}
  .targets{grid-template-columns:1fr;gap:20px}
  .target,.target:nth-of-type(4),.target:nth-of-type(5){grid-column:span 1}
  .target{transform:rotate(-.8deg)!important}
  .mission{max-width:100%;margin-left:0!important}
  .mission:nth-of-type(odd){transform:rotate(-1deg)}
  .mission:nth-of-type(even){transform:rotate(.8deg)}
  .inv{grid-template-columns:1fr;gap:18px}
  .arc-row{flex-direction:column;gap:6px;align-items:flex-start}
  .arc-row dd{text-align:left}
  .contact-list a{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px}
  .story-panel{margin:24px 12px;padding:30px 24px}
  .scene-nav{padding:10px 12px;gap:6px}
  .scene-nav a{padding:12px 10px}
}

/* ---- short screens (small handhelds, landscape phones) ----
   The 3-row command grid must clear the HUD at the bottom; on short
   viewports the hero + commands shrink and the cmd sub-labels drop. */
@media (max-height:700px) and (max-width:900px){
  .hero{top:27%}
  .emblem{height:19vh}
  .emblem-stage{margin-bottom:-2vh}
  .hero-name{font-size:clamp(32px,10vw,44px)}
  .hero-slash{margin-top:6px;padding:4px 10px}
  .hero-meta{margin-top:6px;font-size:8.5px}
  .hero-sub{font-size:9px}
  .cmds{top:46%;padding:8px 10px 0}
  .cmd{min-height:38px;padding:7px 10px 8px 16px}
  .cmd-big{font-size:clamp(15px,5vw,19px)!important}
  .cmd-sub{display:none}
  .cmd-key{top:4px;right:7px;font-size:9px;padding:2px 4px}
  #battle{min-height:0}
  .hud{padding:6px 10px;bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
  .hud-name{font-size:11px;margin-bottom:4px}
  .barrow{margin-top:4px}
  .hud-readout{display:none}
}

/* ============================================================
   COMPOSITION V3 — DESKTOP (>= 1200px)
   Inward rails (12%/13%) → ONE designed canvas. Enlarged,
   optically-centered hero with clean emblem↔title air. Faint
   ghost word clipped to the left edge. Central P5 slash accent
   behind the emblem. Bigger commands. Mobile/tablet untouched.
   ============================================================ */
.p5-slash{display:none}
@media (min-width:1200px){
  /* ghost word: mass pushed to the left edge, faded before the
     center so it never muddies the emblem face (stroke stays .045) */
  .word-target{
    left:-6%;top:12%;
    font-size:clamp(150px,26vw,400px);
    -webkit-text-stroke:2px rgba(245,245,242,.045);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 26%,transparent 44%);
            mask-image:linear-gradient(90deg,#000 0%,#000 26%,transparent 44%);
  }
  /* central P5 slash accent: large skewed red band, low-key,
     spanning the upper-middle behind the emblem (shown only ≥1200px;
     base rule hides it below, so tablet/mobile stay unchanged) */
  .p5-slash{
    display:block;
    position:absolute;left:6%;right:6%;top:3%;height:36%;
    background:linear-gradient(100deg, rgba(237,0,21,.40) 0%, rgba(237,0,21,.14) 46%, rgba(237,0,21,.04) 100%);
    clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);
    transform:rotate(-6deg);
    pointer-events:none;
  }
  /* hero: bigger type, optically centered, small gap under emblem.
     Sizing is constrained by the 3rd command row: the title-block must
     clear the inner edges of SKILLS/GUARD at every width. Measured at
     1440 the free gap is ~567px, so the title stack (name is 5.25em/
     char intrinsic in Arial Black) is capped at ~89-93px there — 9vw
     would overlap GUARD by ~109px. Phrase/meta/sub are tuned so the
     name stays the widest child of the block. */
  .hero{left:52%;top:48%}
  .emblem{height:clamp(300px,40vh,520px)}
  .emblem-stage{margin-bottom:8px}
  .hero-name{font-size:clamp(88px,6.2vw,130px)}
  .hero-phrase{font-size:clamp(24px,2.2vw,40px)}
  .hero-slash{margin-top:14px;padding:7px 14px}
  .hero-meta{font-size:clamp(12px,0.9vw,13px);letter-spacing:.05em}
  .hero-sub{font-size:clamp(11.5px,0.9vw,12.5px);letter-spacing:.02em}
  /* rails + commands pulled inward (commands sit on the rail edge;
     3rd row lifted 66%→60% so the taller v3 commands clear the HUD) */
  .rail{width:min(220px,16vw)}
  .rail-left{left:12%}
  .rail-right{right:12%}
  .cmdwrap[data-cmd="persona"]{left:12%}
  .cmdwrap[data-cmd="attack"]{left:12%}
  .cmdwrap[data-cmd="skills"]{left:12%;top:60%}
  .cmdwrap[data-cmd="guard"]{right:12%}
  .cmdwrap[data-cmd="tactics"]{right:12%}
  .cmdwrap[data-cmd="item"]{right:12%;top:60%}
  .cmd-big{font-size:clamp(40px,3.8vw,56px)}
  .cmd[data-cmd="attack"] .cmd-big{font-size:clamp(50px,4.8vw,72px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- experience: career total + ladder pinnacle ---------- */
.exp-total{font:700 13px/1.6 var(--mono);color:#b9b9b2;letter-spacing:.08em;margin-bottom:30px}
.exp-total b{color:var(--red)}
.m-pos.pinnacle{color:var(--red)}
.m-pos.pinnacle span{color:#ff9aa4}
.m-pos.pinnacle::after{content:" ▲ PINNACLE";font-size:10px;letter-spacing:.18em;color:var(--red)}