/* v2 review overrides. Loads after styles.css; each block is liftable on its own. */

/* 1. Hero: room for Nobu. The maze is placed from the top so the ghost's room
   always sits below the copy, instead of floating up from the stage bottom. */
.journey{height:200svh;min-height:1200px}
.hero-copy{top:clamp(96px,13svh,130px)}
.hero-copy>.eyebrow{margin-bottom:18px}
h1{max-width:680px;gap:16px}
.intro{font-size:15px;margin-top:22px}
.maze-shell{inset:auto;top:calc(max(56%,480px) - 310px);left:50%;width:1080px;margin-left:-540px}
.nobu-note{top:calc(max(56%,480px) + 60px)}
.journey-message{top:17%}
.maze-walls .wall-outer{stroke:#2b5740}
.maze-walls .wall-inner{stroke:#3d8560}
.dot-field{opacity:.7}
.maze-labels{opacity:1}
@media(min-width:1500px){.maze-shell{width:1300px;margin-left:-650px;top:calc(max(56%,480px) - 374px)}}
@media(max-width:1000px){.maze-shell{width:1000px;margin-left:-500px;top:calc(max(56%,480px) - 288px)}}
@media(max-width:760px){.maze-shell{width:820px;margin-left:-410px;top:calc(max(54%,400px) - 236px)}.nobu-note{top:calc(max(54%,400px) + 50px)}}

/* Hero B: editorial split. Copy left, Nobu's room nudged right. */
body[data-hero=b] .hero-copy{text-align:left;left:4.6%;width:min(560px,52%);top:clamp(110px,15svh,150px)}
body[data-hero=b] h1{max-width:none;padding:0;margin:0;gap:14px}
body[data-hero=b] .second-line{margin:0}
body[data-hero=b] .intro{max-width:420px;margin-left:0}
body[data-hero=b] .maze-shell{margin-left:calc(-540px + 9vw);top:calc(max(52%,440px) - 310px)}
body[data-hero=b] .nobu-note{left:calc(50% + 9vw + 115px);top:calc(max(52%,440px) + 60px)}
body[data-hero=b] .journey-message{left:4.6%;right:auto;width:min(560px,52%);text-align:left}
body[data-hero=b] .journey-message .pixel-title{margin:0}
@media(min-width:1500px){body[data-hero=b] .maze-shell{margin-left:calc(-650px + 9vw);top:calc(max(52%,440px) - 374px)}}
@media(max-width:1000px){body[data-hero=b] .maze-shell{margin-left:calc(-500px + 9vw);top:calc(max(52%,440px) - 288px)}}
@media(max-width:760px){
  body[data-hero=b] .hero-copy{left:0;width:100%;text-align:center;top:126px}
  body[data-hero=b] h1{padding:0 6%}body[data-hero=b] .second-line{margin:auto}body[data-hero=b] .intro{margin:27px auto 0}
  body[data-hero=b] .maze-shell{margin-left:-410px;top:calc(max(54%,400px) - 236px)}
  body[data-hero=b] .nobu-note{left:calc(50% + 80px);top:calc(max(54%,400px) + 50px)}
  body[data-hero=b] .journey-message{left:7%;right:7%;width:auto;text-align:center}
}

/* 2. Cabinet screens A: same demos, nothing under 9px. */
body[data-screen=a] .monitor-top{font-size:10px}
body[data-screen=a] .monitor-top>span{font-size:8px}
body[data-screen=a] .screen-bottom{font-size:10px}
body[data-screen=a] .workflow-demo{font-size:11px;margin:16px 0}
body[data-screen=a] .flow-box{padding:7px 14px}
body[data-screen=a] .flow-split{font-size:9px}
body[data-screen=a] .flow-split>span{padding:7px 6px}
body[data-screen=a] .chart-demo{font-size:11px;margin:18px 5px}
body[data-screen=a] .chart-bars{height:90px}
body[data-screen=a] .integration-demo,body[data-screen=a] .system{font-size:11px}
body[data-screen=a] .sync-label{font-size:9px}
body[data-screen=a] .coin-slot{font-size:9px}
body[data-screen=a] .cabinet-base{font-size:11px}
body[data-screen=a] .arcade-floor{font-size:10px}

/* Cabinet screens B: attract mode. No status bar, demo fills the glass,
   the tagline becomes a solid accent strip. */
body[data-screen=b] .monitor{background:#04100b;border-width:2px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 10%,transparent)}
body[data-screen=b] .monitor:after{background:repeating-linear-gradient(transparent 0,transparent 2px,#0003 2px,#0003 3px)}
body[data-screen=b] .monitor-top{display:none}
body[data-screen=b] .workflow-demo{transform:scale(1.2);transform-origin:top center;margin:22px 0 0}
body[data-screen=b] .chart-demo{transform:scale(1.1);transform-origin:top center;margin:14px 12px 0}
body[data-screen=b] .integration-demo{transform:scale(1.1);transform-origin:center 40%}
body[data-screen=b] .flow-split{font-size:8px}
body[data-screen=b] .sync-label{letter-spacing:.5px;white-space:nowrap}
body[data-screen=b] .screen-bottom{bottom:0;padding:9px 0;background:var(--accent);color:var(--bg);font-weight:bold;font-size:9px;letter-spacing:2px}
body[data-screen=b] .coin-slot{font-size:9px}
body[data-screen=b] .cabinet-base{font-size:11px}
body[data-screen=b] .arcade-floor{font-size:10px}

/* 3. Finale A: the power-up lives in a console panel. Geometry is unchanged
   (chase-story measures .finale-stage), the panel is drawn around it. */
body[data-finale=a] .nobu-answer{margin-bottom:52px}
body[data-finale=a] .finale-stage{margin-bottom:56px}
body[data-finale=a] .finale-stage::before{content:'';position:absolute;inset:-22px -28px;border:1px solid var(--line);background:#091b12;pointer-events:none}
body[data-finale=a] .finale-caption{color:var(--mint)}
body[data-finale=a] .finale-platform{left:0;right:0}
body[data-finale=a] #finale-status{top:132px}

/* Finale B: HUD line. Caption and status share the top rule, Nobu answers
   from a speech box with the ghost restored. */
body[data-finale=b] .nobu-answer{border:1px solid var(--line);padding:14px 22px;max-width:520px;min-height:0;gap:16px;margin:22px auto 40px}
body[data-finale=b] .nobu-answer>svg{display:block}
body[data-finale=b] .nobu-answer p{text-align:left;margin:0}
body[data-finale=b] .finale-caption{color:var(--mint)}
body[data-finale=b] #finale-status{top:0;left:auto;right:0;width:auto;text-align:right}
body[data-finale=b] .finale-stage::after{content:'';position:absolute;left:0;right:0;top:22px;border-top:1px solid var(--line)}
body[data-finale=b] .finale-platform{left:0;right:0}

/* Review-only switcher. */
.variant-switch{position:fixed;top:110px;right:29px;z-index:33;display:flex;flex-direction:column;align-items:stretch;gap:6px;font:10px var(--mono);letter-spacing:1px;color:var(--muted);box-shadow:0 0 0 6px var(--bg);background:var(--bg)}
.variant-switch>span{padding:0 2px 4px}
.variant-switch button{display:flex;justify-content:space-between;border:1px solid var(--line);background:var(--bg);padding:9px 10px;font:inherit;letter-spacing:inherit;color:var(--muted)}
.variant-switch button:hover{border-color:var(--mint)}
.variant-switch b{color:var(--orange);margin-left:6px}
@media(max-width:760px){.variant-switch{top:90px;right:6%}.variant-switch>span{display:none}}

/* More scroll room under the finale so the last leg is not compressed. */
.footer{padding-bottom:max(200px,calc(36svh - 120px))}

/* Arcade HUD in the maze corners. Score follows the pellets the chaser has eaten. */
.hud{font-family:var(--mono)}
.hud-small{font-size:10px;letter-spacing:2px;fill:var(--orange);animation:hud-blink 1.2s steps(1) infinite}
.hud-label{font-size:9px;letter-spacing:1.5px;fill:var(--mint)}
.hud-score{font-size:34px;font-weight:bold;fill:var(--ink)}
@keyframes hud-blink{50%{opacity:0}}
.motion-off .hud-small{animation:none}
@media(max-width:760px){.hud-label{display:none}.hud-score{font-size:30px}}

/* Header: arcade menu. Pixel brand, numbered mono nav, coin-slot contact button, language switch. */
.header{border-bottom:0;height:88px}
.header::after{content:'';position:absolute;left:4.6%;right:4.6%;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}
.brand{gap:11px}
.brand .pixel-title{display:block;color:var(--ink)}
.brand .pixel-title svg{height:15px;width:auto;fill:currentColor;stroke:none}
.brand .brand-dot{color:var(--orange);margin-left:-8px}
nav{gap:34px}
nav a{display:flex;align-items:center;gap:9px;font:11px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);position:relative}
nav a i{font-style:normal;color:var(--orange);font-size:9px}
nav a span{color:inherit;padding:0}
nav a b{color:var(--orange);font-weight:400}
nav a::before{content:'▸';position:absolute;left:-15px;color:var(--mint);opacity:0}
nav a:hover{color:var(--mint)}
nav a:hover::before{opacity:1;animation:hud-blink 1s steps(1) infinite}
.lang-toggle{display:flex;gap:6px;align-items:center;border:1px solid var(--line);background:transparent;padding:10px 11px;font:10px var(--mono);letter-spacing:1px;color:var(--muted)}
.lang-toggle i{font-style:normal;opacity:.5}
.lang-toggle [aria-current=true]{color:var(--mint)}
.lang-toggle:hover{border-color:var(--mint)}
.nav-contact{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;text-align:left;padding:8px 14px 9px;font:700 12px var(--mono);letter-spacing:.4px;box-shadow:4px 4px 0 #754c2f;transition:background .15s}
.nav-contact small{grid-column:1/-1;font:9px var(--mono);letter-spacing:2px;font-weight:400;color:#3a2412}
.nav-contact span{margin:0;color:inherit}
.nav-contact b{font-weight:400}
.nav-contact:hover{background:#ffb576;border-color:#ffb576}
@media(max-width:760px){.header{height:78px}nav{gap:12px}.brand .pixel-title svg{height:12px}.nav-contact{padding:7px 11px 8px;font-size:11px}.nav-contact small{display:none}.lang-toggle{padding:9px}}

/* Stage-clear interstitial. Appears at the end of the hero, once the maze has faded. */
.stage-clear{position:absolute;top:50%;transform:translateY(-52%);left:15%;right:15%;text-align:center;opacity:0;z-index:4;pointer-events:none;display:grid;justify-items:center;gap:24px}
.level-select{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(960px,100%);margin-top:14px}
.level-select a{display:flex;align-items:center;gap:12px;padding:17px 16px;border:1px solid var(--line);background:#0d1c16;font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);text-align:left;white-space:nowrap;transition:border-color .15s,transform .15s}
.level-select a i{font-style:normal;color:var(--orange);font-size:9px}
.level-select a b{margin-left:auto;color:var(--mint);font-weight:400}
.level-select a:hover{border-color:var(--mint);transform:translateY(-2px)}
.level-select a:hover b{animation:hud-blink 1s steps(1) infinite}
.clear-hint{font:9px var(--mono);letter-spacing:1.5px;color:var(--muted)}
.stage-clear .eyebrow{margin:0;animation:hud-blink 1.4s steps(1) infinite}
.stage-clear .pixel-title{width:min(640px,100%);color:var(--ink)}
.clear-line{font:11px var(--mono);letter-spacing:1.5px;color:var(--muted)}
.clear-line b{color:var(--orange);font-weight:400}
.motion-off .stage-clear .eyebrow{animation:none}
@media(max-width:760px){.stage-clear{left:7%;right:7%;gap:16px}.clear-line{font-size:9px;letter-spacing:1px}.level-select{grid-template-columns:1fr 1fr;gap:8px}.level-select a{padding:12px 14px;font-size:10px}.clear-hint{display:none}}
.marquee>span[data-i18n]{font:inherit}

/* High scores: the client list as an arcade leaderboard. Rows light up as the chase passes. */
.scores-section{padding:110px 0 70px;border-top:1px solid var(--line)}
.scores-section .demo-note{margin-bottom:40px}
.score-board{border:1px solid var(--line);background:#091b12}
.score-head,.score-row{display:grid;grid-template-columns:64px 44px minmax(0,1.3fr) 150px minmax(0,1.8fr);align-items:center;gap:22px;padding:18px 26px;border-top:1px solid var(--line);text-align:left}
.score-head{border-top:0;padding:14px 26px;font:9px var(--mono);letter-spacing:1.5px;color:var(--muted);background:var(--bg)}
.score-row{--accent:var(--orange);color:var(--ink);transition:background .2s,box-shadow .2s}
.score-row:hover,.score-row.chase-active{background:#0d1c16;box-shadow:inset 3px 0 0 var(--accent)}
.score-rank{font:bold 15px var(--mono);letter-spacing:1px;color:var(--orange)}
.score-avatar svg{display:block;width:34px;height:38px;overflow:visible}
.score-avatar .ghost-body{stroke-width:5;filter:none}
.score-avatar .ghost-eyes{stroke-width:9;filter:none;animation:none}
.score-player strong{display:block;font:bold 18px var(--mono);letter-spacing:3px;color:var(--accent)}
.score-player>span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.score-stage{font:10px var(--mono);letter-spacing:1.5px;color:var(--accent)}
.score-cleared{font-size:13px;line-height:1.55;color:#c2d0c4;text-wrap:pretty}
.score-enter{--accent:var(--ink);width:100%;background:transparent;border:0;border-top:1px solid var(--line);font:inherit;cursor:pointer}
.score-enter .cursor{font-style:normal;color:var(--orange);animation:hud-blink 1s steps(1) infinite}
.score-enter .score-cta{font:bold 11px var(--mono);letter-spacing:1.5px;color:var(--orange)}
.score-enter:hover{background:#0d1c16;box-shadow:inset 3px 0 0 var(--orange)}
.score-enter:hover .score-cta{color:#ffb576}
.scores-section .arcade-floor{margin-top:26px}
.motion-off .score-enter .cursor{animation:none}
@media(max-width:1000px){.level-select{grid-template-columns:repeat(2,minmax(0,1fr));width:min(560px,100%)}.score-head,.score-row{grid-template-columns:56px 40px minmax(0,1.2fr) 120px minmax(0,1.6fr);gap:16px;padding:16px 18px}.score-head{padding:12px 18px}}
@media(max-width:760px){
  .scores-section{padding:70px 0 40px}
  .score-head{display:none}
  .score-row{grid-template-columns:40px 34px minmax(0,1fr);grid-template-rows:auto auto;row-gap:10px;column-gap:14px;padding:16px 14px}
  .score-rank{font-size:13px}.score-avatar svg{width:28px;height:32px}
  .score-player strong{font-size:16px}.score-player>span{font-size:12px}
  .score-stage{grid-column:3;font-size:9px}
  .score-cleared{grid-column:3;font-size:12px}
  .score-enter .score-stage{display:none}
}