/* v4.1 visuals + camera/KO polish */
:root{ --panel:#161b26; --accent:#ffd100; --accent2:#ff5e00; --muted:#98a2b3; --white:#f5f7fb; --flash:#fff7; --tint:0deg; }
*{box-sizing:border-box}
body{ margin:0; background:linear-gradient(180deg,#0c0f18,#151b2a 55%,#0c0f18); color:var(--white);
  font-family: 'Press Start 2P', system-ui, Arial, sans-serif; image-rendering: pixelated; }

.titlebar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:4px solid var(--accent);
  background:linear-gradient(180deg,#1b2230,#0f1420); gap:12px }
.titlebar h1{margin:0; font-size:20px; letter-spacing:2px;}
.titlebar h1 small{font-size:12px; color:var(--muted); margin-left:10px}
.pixel{ text-shadow: 2px 2px 0 #000; }
.badge{ font-size:12px; color:#cfe6ff; background:#0b111b; border:1px solid #243047; padding:6px 8px; border-radius:8px }

.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.btn{ background:var(--accent2); color:#000; border:none; padding:10px 12px; font-weight:700; cursor:pointer; border-radius:6px; box-shadow:0 3px 0 #000; }
.btn.emph{ background:var(--accent); }
.btn.ghost{ background:transparent; color:var(--white); outline:1px solid var(--muted); }

.scenario{display:flex; gap:6px; align-items:center; background:#0e1522; border:1px solid #222; padding:6px 8px; border-radius:8px}
.pill{ font-size:12px; padding:6px 8px; border-radius:999px; background:#22314a; border:1px solid #000; color:#fff; cursor:pointer }
.pill.on{ outline:2px solid var(--accent) }

.modes{ display:flex; gap:8px; align-items:center; padding:8px 16px; border-bottom:2px solid #000; background:#0f1420; }
.tab{ background:#1c2435; color:#fff; border:2px solid #000; padding:8px 10px; border-radius:8px; cursor:pointer }
.tab.active{ outline:2px solid var(--accent) }
.spacer{ flex:1 }

.game-frame{max-width:1200px; margin:0 auto; padding-bottom:40px}
.layout{display:grid; grid-template-columns: 1fr 1.3fr 1fr; gap:16px; padding:16px}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ min-height:auto }
}
.panel{background:var(--panel); border:3px solid #000; border-radius:10px; padding:12px; min-height:420px}
.panel-title{margin:4px 0 12px 0}
.list{display:grid; grid-template-columns:1fr; gap:8px; max-height:60vh; overflow:auto; padding-right:6px}
.list.small{ max-height:240px }

.card{display:flex; gap:10px; background:#0f131c; border:2px solid #000; border-radius:10px; padding:8px; align-items:center }
.card .avatar{ width:56px; height:56px; border-radius:8px; background: linear-gradient(135deg,#fb8500,#ffb703); box-shadow: inset 0 0 0 3px #000; position:relative }
.card .meta{display:flex; flex-direction:column; gap:6px; width:100%}
.card .name{font-size:12px; color:#fff; text-shadow:1px 1px 0 #000}
.pill{display:inline-block; background:#222a38; padding:3px 6px; border-radius:6px; font-size:10px; margin-right:6px}
.money{display:flex; gap:12px; font-size:11px}
.money .salary{color:#41d66e}
.money .cost{color:#ff6b6b}

.hud{ position:relative; height:80px; display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; gap:8px; }
.hud .bar{ width:44%; display:flex; flex-direction:column; gap:6px; }
.hud .bar .name{ font-size:10px; background:#000a; padding:4px 6px; border-radius:6px; }
.hud .bar .stats{ font-size:10px; color:#cfe6ff; opacity:.9; }
.hud .hp{ width:100%; height:14px; background:#2a2f3d; border:2px solid #000; border-radius:8px; position:relative; overflow:hidden; }
.hud .hp > div{ position:absolute; left:0; top:0; bottom:0; width:100%; background: linear-gradient(90deg,#41d66e,#ffd100); transition: width 200ms ease; }
.meter{ width:66px; height:10px; background:#2a2f3d; border:2px solid #000; border-radius:8px; overflow:hidden }
.meter > div{ height:100%; width:0%; background: linear-gradient(90deg,#6ae,#0ff); transition: width 180ms ease; }

.hud .timer{ min-width:48px; text-align:center; font-size:18px; color:var(--accent); text-shadow:2px 2px 0 #000; }

.stage-wrap{ position:relative; }
.flash{ position:absolute; inset:0; background: transparent; pointer-events:none; z-index:6; }
.flash.on{ background: var(--flash); animation: flashFade 220ms ease-out forwards; }
@keyframes flashFade{ 0%{opacity:1} 100%{opacity:0} }

.stage{ position:relative; height:380px; border:3px solid #000; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#0a0e16,#111827 60%,#0a0e16);
  filter: hue-rotate(var(--tint));
}
.stage.shake{ animation: shake 220ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake{
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(2px, -1px); }
  30%, 50%, 70% { transform: translate(-1px, 2px); }
  40%, 60% { transform: translate(1px, -2px); }
}
.camera{ position:absolute; inset:0; transform-origin: center center; will-change: transform; }

.bg.layer.far{ position:absolute; inset:0; background:
  radial-gradient(120px 80px at 20% 20%, #23304a, transparent 60%),
  radial-gradient(140px 90px at 80% 15%, #1e2842, transparent 60%); opacity:.6; }
.bg.layer.mid{ position:absolute; inset:0; background:
  radial-gradient(200px 120px at 50% 40%, #1b253a, transparent 60%),
  radial-gradient(220px 140px at 30% 65%, #1a2236, transparent 60%); opacity:.85; }
.crowd{ position:absolute; left:0; right:0; bottom:90px; height:60px; display:flex; gap:6px; padding:0 8px; align-items:flex-end; opacity:.85; }
.crowd .fan{ width:6px; height:10px; background:#2b3550; border:2px solid #000; border-radius:2px; animation: crowdBob 1.6s ease-in-out infinite; }
.crowd .fan:nth-child(odd){ height:12px; background:#364167; animation-duration:1.9s; }
.crowd .fan::after{ content:''; display:block; width:8px; height:6px; margin:-8px auto 0; background:#ffb703; border:2px solid #000; border-radius:2px; transform-origin: left center; animation: wave 2.4s ease-in-out infinite; }
@keyframes crowdBob{ 0%{transform:translateY(0)} 50%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
@keyframes wave{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(-25deg) } }

.ground{ position:absolute; left:0; right:0; bottom:0; height:90px;
  background: repeating-linear-gradient(90deg,#383f54 0 12px,#2e3447 12px 24px);
  box-shadow: inset 0 8px 0 rgba(0,0,0,.3); }

.fighter{ position:absolute; bottom:76px; width:170px; height:230px; will-change: transform; }
#fighterA{ left:60px; }
.fighter.flipped{ right:60px; transform:scaleX(-1); }

.fighter .rig{ position:absolute; inset:0; transform-origin: bottom center; }
.fighter.ko .rig{ animation: koWhole 800ms ease forwards, koBounce 650ms 800ms cubic-bezier(.2,.6,.3,1.2) forwards; }
@keyframes koWhole{ 0%{ transform: rotate(0deg) translateY(0); } 50%{ transform: rotate(60deg) translateY(6px); } 100%{ transform: rotate(90deg) translateY(24px); } }
@keyframes koBounce{ 0%{ transform: rotate(90deg) translateY(24px); } 45%{ transform: rotate(90deg) translateY(12px); } 100%{ transform: rotate(90deg) translateY(24px); } }
.fighter.knockback .rig{ animation: knockback 240ms ease-out; }
@keyframes knockback{ 0%{ transform: translateX(0)} 100%{ transform: translateX(16px)} }

.spark{ position:absolute; width:10px; height:10px; background:#fff; border:2px solid #000; border-radius:2px;
  box-shadow: 0 0 0 2px #ff0a; animation: spark 280ms ease-out forwards; pointer-events:none; z-index:7; }

.fighter .sprite{ position:absolute; image-rendering: pixelated; }
.fighter .shadow{ width:110px; height:18px; left:30px; bottom:-10px; background: radial-gradient(ellipse at center, #0006, transparent 60%); filter: blur(1px); }
.fighter .head{ width:42px; height:42px; left:64px; top:0; background:#ffdfb8; border:4px solid #000; border-radius:6px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.fighter .torso{ width:86px; height:86px; left:42px; top:44px; border:4px solid #000; border-radius:8px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.25); }
.fighter .torso.blue{ background-color:#4f77ff; }
.fighter .torso.red{ background-color:#e24d4d; }
.fighter .arm{ width:22px; height:66px; top:54px; background:#ffdfb8; border:4px solid #000; border-radius:8px; transform-origin: top center; }
.fighter .arm.left{ left:18px; }
.fighter .arm.right{ left:128px; }
.fighter .leg{ width:28px; height:80px; top:124px; background:#2f3545; border:4px solid #000; border-radius:8px; transform-origin: top center; }
.fighter .leg.left{ left:54px; }
.fighter .leg.right{ left:94px; }

.fighter .label{ position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); font-size:10px; background:#000a; padding:4px 6px; border-radius:6px; }

.idle .arm.left{ animation: idleArm 1.8s ease-in-out infinite; }
.idle .arm.right{ animation: idleArm 1.8s ease-in-out infinite reverse; }
@keyframes idleArm{ 0%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} 100%{transform:rotate(-4deg)} }

.punch{ animation: punch 420ms ease-out; }
@keyframes punch{ 0%{ transform: rotate(0deg) translateX(0); } 30%{ transform: rotate(-45deg) translateX(6px); } 100%{ transform: rotate(0deg) translateX(0); } }
.kick{ animation: kick 520ms ease-out; transform-origin: top center; }
@keyframes kick{ 0%{ transform: rotate(0deg); } 35%{ transform: rotate(-60deg); } 100%{ transform: rotate(0deg); } }
.super{ animation: superMove 720ms ease-out; }
@keyframes superMove{ 0%{ transform: scale(1) rotate(0) } 35%{ transform: scale(1.05) rotate(-6deg) } 70%{ transform: scale(1.12) rotate(6deg) } 100%{ transform: scale(1) rotate(0) } }
.hit{ animation: hit 260ms ease-out; }
@keyframes hit{ 0%{ transform: translateX(0); } 50%{ transform: translateX(14px); } 100%{ transform: translateX(0); } }

.result{ margin-top:8px; font-size:14px; background:#000d; padding:8px 12px; border-radius:8px; border:2px solid var(--accent); text-align:center; }
.winner{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#0b0f17e6; border:3px solid var(--accent); border-radius:12px; padding:16px 20px; z-index:8; width:min(520px,90%); text-align:center; }
.winner h3{ margin:0 0 6px 0 }
.winner p{ margin:6px 0 }
.hidden{ display:none; }

.quiz .q{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.controls{display:flex; justify-content:center; margin:8px 0; gap:8px }
.hint{color:var(--muted); font-size:12px}

.modal{ position:fixed; inset:0; background:#0008; display:flex; align-items:center; justify-content:center; z-index:10; }
.modal.hidden{ display:none }
.modal-card{ background:#0f1420; border:2px solid #000; border-radius:10px; padding:16px; width:min(720px,90%); }
.banner{ margin-top:8px; background:#0b111b; border:1px solid #223146; padding:10px; border-radius:8px; font-size:12px; color:#d6f0ff }