/* ── Pixel Brawler – Premium CSS ── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#ef4444;--red-dark:#b91c1c;
  --blue:#3b82f6;--blue-dark:#1d4ed8;
  --gold:#f0c040;--energy:#a855f7;
  --bg:#0a0e1a;--panel:rgba(15,20,35,.85);
  --text:#e2e8f0;--muted:#64748b;
  --radius:8px;
}
body{background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;
  min-height:100vh;font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden}

/* ── Screens ── */
.screen{width:100%;display:flex;align-items:center;justify-content:center;min-height:100vh;
  animation:fadeIn .4s ease}
.screen.hidden{display:none}
@keyframes fadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ── Title Screen ── */
.title-content{text-align:center;padding:40px}
.game-title{font-size:3.5rem;font-weight:900;letter-spacing:4px;color:var(--text);
  text-shadow:0 0 30px rgba(240,192,64,.3)}
.game-title span{color:var(--gold)}
.subtitle{color:var(--muted);font-size:1.1rem;margin:10px 0 30px;letter-spacing:2px}

.title-fighters{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:30px}
.preview-fighter{font-size:3rem;width:90px;height:90px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;animation:float 2s ease-in-out infinite}
.preview-fighter.red{background:rgba(239,68,68,.15);border:2px solid var(--red);animation-delay:.2s}
.preview-fighter.blue{background:rgba(59,130,246,.15);border:2px solid var(--blue)}
.vs-text{font-size:2rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(240,192,64,.5)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── Buttons ── */
.btn{padding:14px 40px;border:none;border-radius:var(--radius);font-size:1.1rem;font-weight:700;
  cursor:pointer;letter-spacing:2px;transition:all .2s;text-transform:uppercase}
.btn-primary{background:linear-gradient(135deg,var(--gold),#e6a800);color:#111;
  box-shadow:0 4px 20px rgba(240,192,64,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(240,192,64,.5)}
.btn-secondary{background:transparent;color:var(--muted);border:2px solid var(--muted);margin-left:12px}
.btn-secondary:hover{border-color:var(--text);color:var(--text)}

/* ── Mode Select ── */
.mode-select{display:flex;gap:16px;justify-content:center;margin-bottom:16px}
.btn-cpu{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.btn-cpu:hover{box-shadow:0 6px 30px rgba(59,130,246,.5)}

/* ── Difficulty Select ── */
.difficulty-select{margin-bottom:16px;animation:fadeIn .3s ease}
.difficulty-select.hidden{display:none}
.diff-label{color:var(--muted);font-size:.9rem;margin-bottom:10px;letter-spacing:1px}
.diff-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.btn-diff{padding:10px 24px;font-size:.85rem;background:#1e293b;color:var(--text);border:2px solid #334155;
  letter-spacing:1px}
.btn-diff:hover,.btn-diff.active{border-color:var(--gold);color:var(--gold);
  box-shadow:0 0 15px rgba(240,192,64,.2)}
.btn-go{font-size:1rem;padding:12px 36px}

/* ── Win Record ── */
.win-record{margin-top:20px;font-size:.85rem;color:var(--muted);letter-spacing:1px}

/* ── Story Button ── */
.btn-story{background:linear-gradient(135deg,#8b5cf6,#6d28d9);margin-top:12px}
.btn-story:hover{box-shadow:0 6px 30px rgba(139,92,246,.5)}
.btn-sm{padding:8px 20px;font-size:.85rem}

/* ── Story Screen ── */
.story-content{width:100%;max-width:900px;padding:30px;text-align:center}
.story-title{font-size:2.2rem;font-weight:900;color:var(--gold);letter-spacing:3px;margin-bottom:6px;
  text-shadow:0 0 20px rgba(240,192,64,.3)}
.story-subtitle{color:var(--muted);font-size:.95rem;margin-bottom:24px;letter-spacing:1px}

/* ── Story Map ── */
.story-map{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px;padding:20px;
  background:var(--panel);border-radius:var(--radius);border:2px solid #1e293b}
.story-node{position:relative;padding:14px 8px;border-radius:var(--radius);text-align:center;
  cursor:pointer;transition:all .2s;border:2px solid #334155;background:#0f172a}
.story-node .node-num{font-size:.7rem;color:var(--muted);letter-spacing:1px}
.story-node .node-name{font-size:.75rem;font-weight:700;color:var(--text);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-node .node-emoji{font-size:1.6rem;margin-bottom:2px}
.story-node.locked{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
.story-node.locked .node-emoji::after{content:'🔒';position:absolute;right:4px;top:4px;font-size:.7rem}
.story-node.completed{border-color:#22c55e;background:rgba(34,197,94,.08)}
.story-node.completed .node-name{color:#22c55e}
.story-node.current{border-color:var(--gold);box-shadow:0 0 15px rgba(240,192,64,.3);
  animation:currentPulse 1.5s ease infinite}
.story-node.boss{border-color:#ef4444}
.story-node.boss.current{box-shadow:0 0 15px rgba(239,68,68,.4)}
.story-node:not(.locked):hover{transform:translateY(-3px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
@keyframes currentPulse{0%,100%{box-shadow:0 0 10px rgba(240,192,64,.2)}50%{box-shadow:0 0 20px rgba(240,192,64,.5)}}

/* ── Story Dialog ── */
.story-dialog{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--panel);
  border-radius:var(--radius);border:2px solid #334155;margin-bottom:16px;text-align:left;
  animation:fadeIn .4s ease}
.story-dialog.hidden{display:none}
.dialog-portrait{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:2rem;border:3px solid var(--gold);background:#0f172a;flex-shrink:0}
.dialog-box{flex:1}
.dialog-name{font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:2px;margin-bottom:6px}
.dialog-text{font-size:.9rem;color:var(--text);line-height:1.5;margin-bottom:10px}
.story-buttons{display:flex;justify-content:center;gap:12px}

/* ── Story Level Info (in-game) ── */
.story-level-info{text-align:center;font-size:.75rem;font-weight:700;color:var(--energy);
  letter-spacing:2px;margin-bottom:4px}
.story-level-info.hidden{display:none}

/* ── Pause Overlay ── */
.pause-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);z-index:30;border-radius:var(--radius);backdrop-filter:blur(4px)}
.pause-overlay.hidden{display:none}
.pause-content{text-align:center}
.pause-content h2{font-size:2.5rem;color:var(--text);margin-bottom:20px;letter-spacing:4px}
.pause-content .btn{display:block;margin:10px auto;min-width:200px}

/* ── Timer ── */
.timer-display{font-size:1.6rem;font-weight:900;color:var(--text);letter-spacing:2px;line-height:1}
.timer-display.timer-low{color:var(--red);animation:timerPulse .5s ease infinite}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Game Wrap ── */
.game-wrap{width:100%;max-width:1000px;padding:10px;position:relative}

/* ── HUD ── */
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.player-hud{flex:1}
.player-hud.right{text-align:right}
.player-name{font-size:.75rem;font-weight:700;letter-spacing:3px;color:var(--muted);margin-bottom:4px;text-transform:uppercase}
.health-container{display:flex;align-items:center;gap:8px}
.player-hud.right .health-container{flex-direction:row-reverse}
.health-bar{flex:1;height:22px;background:#1e293b;border-radius:4px;overflow:hidden;border:2px solid #334155;
  position:relative}
.health-bar .bar{height:100%;transition:width .15s ease-out;position:relative}
.red-bar{background:linear-gradient(180deg,#f87171,var(--red),var(--red-dark));width:100%}
.blue-bar{background:linear-gradient(180deg,#60a5fa,var(--blue),var(--blue-dark));width:100%;float:right}
.hp-text{font-size:.85rem;font-weight:700;min-width:30px;color:var(--text)}
.energy-bar{height:6px;background:#1e293b;border-radius:3px;overflow:hidden;margin-top:3px;
  border:1px solid #334155}
.energy-bar .bar{height:100%;width:0%;transition:width .1s;background:linear-gradient(90deg,#7c3aed,var(--energy),#c084fc)}

.round-info{text-align:center;min-width:100px;padding-top:2px}
.round-num{font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:2px}
.score-pips{font-size:1rem;letter-spacing:2px;margin-top:2px}
.pips{color:var(--muted)}
.pip-sep{color:#334155;margin:0 6px}

/* ── Canvas ── */
#gameCanvas{display:block;width:100%;border-radius:var(--radius);border:2px solid #1e293b;
  background:#0f1629;box-shadow:0 8px 40px rgba(0,0,0,.5)}

/* ── Combo Display ── */
.combo-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:2.5rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(240,192,64,.6);
  pointer-events:none;animation:comboPop .6s ease forwards;z-index:10}
.combo-display.hidden{display:none}
@keyframes comboPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
  100%{opacity:0;transform:translate(-50%,-70%) scale(1)}
}

/* ── Round Overlay ── */
.round-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);z-index:20;border-radius:var(--radius)}
.round-overlay.hidden{display:none}
.round-text{font-size:3.5rem;font-weight:900;color:var(--gold);text-transform:uppercase;
  letter-spacing:6px;text-shadow:0 0 40px rgba(240,192,64,.5);animation:roundIn .8s ease forwards}
@keyframes roundIn{
  0%{opacity:0;transform:scale(2)}
  40%{opacity:1;transform:scale(1)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.8)}
}

/* ── Controls Bar ── */
.controls-bar{display:flex;justify-content:space-between;gap:20px;margin-top:10px;padding:8px 16px;
  background:var(--panel);border-radius:var(--radius);font-size:.75rem;color:var(--muted)}
.ctrl-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ctrl-label{font-weight:700;color:var(--text);margin-right:6px}
kbd{display:inline-block;padding:2px 7px;background:#1e293b;border:1px solid #334155;border-radius:4px;
  font-size:.7rem;font-family:inherit;color:var(--text);min-width:22px;text-align:center}

/* ── Result Screen ── */
.result-content{text-align:center;padding:40px}
.result-title{font-size:2.8rem;font-weight:900;margin-bottom:20px;
  background:linear-gradient(135deg,var(--gold),#f97316);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.result-stats{color:var(--muted);font-size:1rem;margin-bottom:30px;line-height:1.8}

/* ── Screen Shake ── */
@keyframes screenShake{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,3px)}
  80%{transform:translate(2px,-1px)}
}
.shake{animation:screenShake .15s ease}

/* ── Responsive ── */
@media(max-width:700px){
  .game-title{font-size:2.2rem}
  .controls-bar{flex-direction:column;gap:8px}
  .hud-top{flex-wrap:wrap}
  .round-info{order:-1;width:100%;margin-bottom:4px}
}