/* ══════════ $IPPONS ARCADE — brand tokens ══════════ */
:root{
  /* Robinhood-gold on black. Judo green is kept for tatami + belt only. */
  --lime:#FFD200;          /* chrome accent (gold) */
  --lime-hot:#FFE55C;
  --green:#E0A700;         /* deep gold */
  --green-dk:#8A6200;
  --gold:#FFD200;
  --gold-hot:#FFE55C;
  --gold-dk:#8A6200;
  --amber:#F5A300;
  --judo:#9BE84C;
  --red:#FF4133;
  --blue:#2B5BE2;
  --ink:#07060A;
  --ink-2:#0F0C06;
  --panel:#12100A;
  --line:rgba(255,210,0,.26);
  --white:#FFF6E0;
  --dim:#8A7742;
  --px:'Press Start 2P', ui-monospace, monospace;
  --rd:'VT323', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(125% 85% at 50% -8%, #241B04 0%, #0C0A06 55%, #000 100%);
  color:var(--white);
  font-family:var(--rd);
  font-size:20px;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
}
b{color:var(--white)}
.lime{color:var(--lime)}
.gold{color:var(--gold)}
.judo{color:var(--judo)}
.red{color:var(--red)}
.dim{color:var(--dim)}

/* ── CRT overlay ── */
.crt{position:fixed;inset:0;pointer-events:none;z-index:900}
.scanlines{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.30) 0 1px,rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply;opacity:.42}
.vignette{position:absolute;inset:0;
  background:radial-gradient(88% 78% at 50% 45%,transparent 52%,rgba(0,0,0,.55) 100%)}

/* ── sound rail ── */
.rail{position:fixed;top:10px;right:12px;z-index:950;display:flex;gap:8px;align-items:center}
.rail-btn,.rail-chip{
  font-family:var(--px);font-size:8px;letter-spacing:.5px;
  background:rgba(6,16,6,.85);border:2px solid var(--line);color:var(--lime);
  padding:8px 10px;cursor:pointer}
.rail-chip{color:var(--dim);border-color:rgba(92,122,76,.35)}
.rail-chip b{color:var(--lime)}
.rail-btn:hover{border-color:var(--lime);color:var(--lime-hot)}

/* ── screens ── */
.screen{display:none;min-height:100vh;padding:56px 18px 40px;
  align-items:center;justify-content:center}
.screen.is-active{display:flex;animation:fadein .35s steps(4)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.cab{
  width:min(1120px,100%);
  border:3px solid var(--line);
  background:
    linear-gradient(180deg,rgba(60,45,6,.55),rgba(12,10,6,.94)),
    repeating-linear-gradient(90deg,rgba(255,210,0,.035) 0 2px,transparent 2px 6px);
  box-shadow:0 0 0 1px #000, 0 0 46px rgba(255,190,0,.13), inset 0 0 60px rgba(0,0,0,.72);
  padding:18px 20px 22px;position:relative;
}
.cab::before,.cab::after{content:'';position:absolute;width:10px;height:10px;background:var(--lime);opacity:.7}
.cab::before{top:-3px;left:-3px}
.cab::after{bottom:-3px;right:-3px}
.cab-narrow{width:min(720px,100%);text-align:center}
.cab-fight{width:min(980px,100%)}

/* ── top hud strip ── */
.hud-strip{display:flex;justify-content:space-between;font-family:var(--px);font-size:9px;
  letter-spacing:1px;color:var(--white);margin-bottom:8px}
.hud-mid{color:var(--dim)}
.kobar{display:flex;align-items:stretch;height:14px;margin-bottom:20px;gap:4px}
.kobar-l,.kobar-r{flex:1;border:2px solid #000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.kobar-l{background:linear-gradient(180deg,var(--gold-hot),var(--amber))}
.kobar-r{background:linear-gradient(180deg,#FF5A4A,#9B1710)}
.kobar-ko{font-family:var(--px);font-size:9px;color:var(--red);background:#0B0B0B;
  border:2px solid var(--line);padding:1px 8px;display:flex;align-items:center}

/* ── landing ── */
.landing-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start}
.eyebrow{font-family:var(--px);font-size:9px;color:var(--lime);letter-spacing:2px;
  border-left:3px solid var(--lime);padding-left:8px;margin-bottom:14px}
.eyebrow.center{border:0;padding:0;text-align:center}

.logo-lock{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.lock-mark{display:block;width:clamp(50px,8.4vw,88px);flex:none;
  filter:drop-shadow(0 0 14px rgba(255,210,0,.45))}
.lock-mark svg,.rail-mark svg,.stage-bug svg,.prize-mark svg{display:block}
.lock-mark svg{width:100%;height:auto}
.rail-mark{display:inline-block;vertical-align:-2px;margin-right:6px}
.stage-bug{position:absolute;right:14px;bottom:12px;opacity:.5;pointer-events:none}
.prize-mark{display:inline-block;margin-bottom:2px;
  filter:drop-shadow(0 0 16px rgba(255,210,0,.5))}

.logo{
  font-family:var(--px);font-size:clamp(38px,7.4vw,78px);line-height:.92;margin:0;
  color:var(--gold);letter-spacing:2px;transform:skewX(-7deg);
  text-shadow:
    4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000,
    7px 7px 0 #6B4C00, 0 0 30px rgba(255,210,0,.55);
  animation:flick 5s steps(1) infinite;
}
@keyframes flick{0%,96%{opacity:1}97%{opacity:.72}98%{opacity:1}99%{opacity:.85}}
.logo-sub{font-family:var(--px);font-size:9px;color:var(--white);letter-spacing:3px;
  margin:12px 0 20px;opacity:.85}

.prize-box{border:2px dashed var(--line);padding:14px 16px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(255,196,0,.06),transparent)}
.prize-label{font-family:var(--px);font-size:8px;letter-spacing:2px;color:var(--dim)}
.prize-amount{font-family:var(--px);font-size:clamp(20px,3.4vw,34px);color:var(--gold);
  margin:8px 0;text-shadow:3px 3px 0 #000,0 0 24px rgba(255,210,0,.5)}
.prize-amount .tick{color:var(--white);font-size:.55em}

.pitch{font-size:22px;line-height:1.35;color:#E8DCB8;margin:0 0 20px;max-width:46ch}
.pitch b{color:var(--gold)}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cta-row.center{justify-content:center}
.btn{font-family:var(--px);font-size:11px;letter-spacing:1px;padding:16px 20px;
  border:3px solid #000;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .06s steps(2), filter .12s}
.btn-primary{background:linear-gradient(180deg,#FFE04A,var(--gold));color:#140F00;
  box-shadow:0 6px 0 var(--gold-dk),0 0 30px rgba(255,210,0,.4)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-dk)}
.btn-ghost{background:transparent;color:var(--lime);border-color:var(--lime);
  box-shadow:0 6px 0 var(--green-dk)}
.btn-ghost:hover{background:rgba(255,210,0,.12)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-dk)}
.btn.big{font-size:14px;padding:20px 34px;margin-top:18px}

.ca-box{display:flex;align-items:center;gap:10px;border:2px solid var(--line);
  background:rgba(0,0,0,.5);padding:10px 12px;margin-bottom:14px;flex-wrap:wrap}
.ca-label{font-family:var(--px);font-size:8px;color:var(--lime)}
#caText{font-family:var(--rd);font-size:19px;color:#E5D6A8;word-break:break-all;flex:1;min-width:180px}
.ca-copy{font-family:var(--px);font-size:8px;background:var(--green-dk);color:var(--lime);
  border:2px solid var(--lime);padding:8px 10px;cursor:pointer}
.ca-copy:hover{background:var(--gold);color:#140F00}

.fine{display:flex;gap:16px;flex-wrap:wrap;font-size:17px;color:var(--dim);letter-spacing:.5px}
.fine.center{justify-content:center;margin-top:18px}

/* ── landing right ── */
.poster{border:3px solid var(--line);background:#000;padding:10px;position:relative}
.poster canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.poster-cap{font-family:var(--px);font-size:8px;color:var(--red);text-align:center;
  margin-top:8px;letter-spacing:1px}
.stat-cards{display:grid;gap:8px;margin-top:14px}
.stat{display:flex;justify-content:space-between;align-items:center;
  border:2px solid rgba(255,210,0,.18);padding:9px 12px;background:rgba(0,0,0,.35)}
.stat span{font-family:var(--px);font-size:8px;color:var(--dim)}
.stat b{font-family:var(--px);font-size:9px;color:var(--lime)}

/* ── marquee ── */
.marquee{overflow:hidden;border-top:2px solid var(--line);border-bottom:2px solid var(--line);
  margin-top:24px;padding:8px 0;background:rgba(0,0,0,.4)}
.marquee-track{white-space:nowrap;font-family:var(--px);font-size:9px;color:var(--lime);
  letter-spacing:2px;animation:slide 22s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.insert-coin{text-align:center;font-family:var(--px);font-size:9px;color:var(--white);
  margin-top:14px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.15}}

/* ── fight hud ── */
.fight-hud{margin-bottom:12px}
.fh-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fh-name{font-family:var(--px);font-size:10px;color:var(--lime)}
.fh-name.fh-r{color:#7FA2FF}
.fh-time{font-family:var(--px);text-align:center;color:var(--white)}
.fh-time small{display:block;font-size:8px;color:var(--dim);margin-bottom:4px}
.fh-time b{font-size:20px;color:var(--gold)}
.fh-bars{margin:8px 0}
.hpwrap{flex:1;height:16px;border:2px solid #000;background:#2A0B0B;
  box-shadow:0 0 0 2px var(--line);overflow:hidden}
.hpwrap.rev{transform:scaleX(-1)}
.hp{height:100%;width:100%;transition:width .18s steps(4)}
.hp-p{background:linear-gradient(180deg,var(--gold-hot),var(--amber))}
.hp-c{background:linear-gradient(180deg,#6E93FF,#1E3EA8)}
.fh-vs{font-family:var(--px);font-size:9px;color:var(--dim)}
.fh-sub{font-family:var(--px);font-size:8px;color:var(--dim);letter-spacing:1px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);
  margin-left:5px;box-shadow:0 0 8px var(--gold)}
.dim-dot{background:transparent;border:2px solid var(--dim);box-shadow:none;width:7px;height:7px}
.dim-dot.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px var(--gold)}

/* ── stage ── */
.stage{position:relative;border:3px solid var(--line);background:#000;padding:6px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.9),0 0 32px rgba(255,190,0,.12)}
#game{display:block;width:100%;height:auto;image-rendering:pixelated}

/* ── meters ── */
.meters{margin-top:12px}
.meter-top{display:flex;justify-content:space-between;font-family:var(--px);font-size:8px;
  color:var(--dim);margin-bottom:6px}
.meter-top b{color:var(--lime)}
.meter-bar{height:18px;border:2px solid #000;box-shadow:0 0 0 2px var(--line);
  background:#101810;position:relative;overflow:hidden}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dk),var(--gold));
  transition:width .1s linear}
.meter-fill.hot{background:linear-gradient(90deg,var(--gold),#FFFDF0);animation:pulse .4s steps(2) infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.meter-notch{position:absolute;top:0;bottom:0;left:70%;width:2px;background:var(--white);opacity:.85}

/* ── controls ── */
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.key{background:rgba(10,24,10,.9);border:3px solid var(--line);color:var(--white);
  padding:12px 8px;cursor:pointer;text-align:center;transition:transform .05s steps(2)}
.key b{display:block;font-family:var(--px);font-size:12px;color:var(--lime);margin-bottom:6px}
.key span{font-family:var(--px);font-size:7px;color:var(--dim);letter-spacing:1px}
.key:hover{border-color:var(--lime)}
.key:active,.key.down{transform:translateY(3px);background:rgba(255,210,0,.18)}
.key-hot b{color:var(--gold)}
.key-hot{border-color:rgba(255,196,0,.5)}

.range-chip{font-family:var(--px);font-size:8px;color:#140F00;background:var(--gold);
  padding:5px 8px;letter-spacing:1px}
.range-chip.out{background:transparent;color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}

.tips{display:grid;gap:6px;margin-top:14px;font-size:18px;color:var(--dim)}
.tips b{color:var(--white)}

/* ── result ── */
.result-art.long{font-size:clamp(17px,3.6vw,34px);letter-spacing:1px}
.result-art{font-family:var(--px);font-size:clamp(30px,7vw,64px);
  line-height:1.05;word-break:break-word;color:var(--gold);
  text-shadow:4px 4px 0 #000,0 0 34px rgba(255,210,0,.55);margin:10px 0 6px;
  animation:slam .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes slam{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.92)}100%{transform:scale(1);opacity:1}}
.result-title{font-family:var(--px);font-size:14px;color:var(--white);letter-spacing:2px;margin:6px 0 14px}
.result-text{font-size:22px;color:#E8DCB8;margin:0 auto 18px;max-width:52ch;line-height:1.35}
.result-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.rs{border:2px solid var(--line);padding:10px 14px;background:rgba(0,0,0,.4)}
.rs span{display:block;font-family:var(--px);font-size:7px;color:var(--dim);margin-bottom:6px}
.rs b{font-family:var(--px);font-size:11px;color:var(--lime)}

/* ── wheel ── */
.wheel-title{font-family:var(--px);font-size:clamp(16px,3.2vw,26px);color:var(--gold);
  text-shadow:3px 3px 0 #000;margin:10px 0 20px;letter-spacing:1px}
.wheel-wrap{position:relative;width:min(420px,86vw);margin:0 auto;aspect-ratio:1}
#wheelCanvas{width:100%;height:100%;display:block;image-rendering:auto;
  filter:drop-shadow(0 0 28px rgba(255,210,0,.28))}
.wheel-peg{position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:26px solid var(--gold);z-index:3;filter:drop-shadow(0 2px 0 #000)}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22%;aspect-ratio:1;border-radius:50%;background:#08120A;border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--gold);
  z-index:2;box-shadow:0 0 22px rgba(255,210,0,.45)}

.wheel-shout{position:absolute;inset:-10% -30%;display:none;z-index:5;pointer-events:none;
  align-content:center;justify-items:center;gap:10px;
  background:radial-gradient(46% 34% at 50% 50%,rgba(4,3,1,.98) 0%,rgba(4,3,1,.95) 52%,rgba(4,3,1,.6) 74%,transparent 88%)}
.wheel-shout.on{display:grid;animation:shoutin .18s steps(3)}
@keyframes shoutin{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}
.wheel-shout b{font-family:var(--px);font-size:clamp(15px,3.4vw,30px);color:var(--gold);
  white-space:nowrap;letter-spacing:1px;
  text-shadow:4px 4px 0 #000,0 0 34px rgba(255,210,0,.75);
  animation:shoutwob .1s steps(2) infinite}
.wheel-shout small{font-family:var(--px);font-size:clamp(8px,1.5vw,12px);color:var(--white);
  text-shadow:2px 2px 0 #000}
@keyframes shoutwob{0%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px) scale(1.03)}}

/* ── prize ── */
.prize-won{margin:14px 0 10px}
.prize-won-amount{font-family:var(--px);font-size:clamp(28px,7vw,60px);color:var(--gold);
  text-shadow:4px 4px 0 #000,0 0 38px rgba(255,210,0,.6);animation:slam .5s cubic-bezier(.2,1.6,.4,1)}
.prize-won-tick{font-family:var(--px);font-size:13px;color:var(--white);letter-spacing:3px;margin-top:10px}
.ticket{border:2px dashed var(--line);padding:12px 16px;margin:20px auto;max-width:420px;
  background:rgba(0,0,0,.4)}
.ticket-row{display:flex;justify-content:space-between;font-family:var(--px);font-size:8px;
  padding:7px 0;border-bottom:1px dotted rgba(255,210,0,.2);color:var(--dim)}
.ticket-row:last-child{border:0}
.ticket-row b{color:var(--white)}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;width:6px;height:10px;top:-20px;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(120vh) rotate(540deg)}}

/* ── responsive ── */
@media(max-width:880px){
  .landing-grid{grid-template-columns:1fr}
  .landing-right{order:-1}
  .poster{max-width:320px;margin:0 auto}
  .stat-cards{max-width:320px;margin:14px auto 0}
}
@media(max-width:700px){
  .controls{grid-template-columns:repeat(3,1fr)}
  .controls .key:nth-child(1),.controls .key:nth-child(2){grid-column:span 1}
  .controls .key:nth-child(5){grid-column:span 3}
}
@media(max-width:560px){
  body{font-size:18px}
  .screen{padding:52px 10px 30px}
  .cab{padding:14px 12px 18px}
  .btn{font-size:10px;padding:14px 14px;width:100%;text-align:center}
  .controls{gap:6px}
  .key b{font-size:10px}
  .key span{font-size:6px}
  .fine{font-size:15px;gap:8px}
  .tips{font-size:16px}
}