:root{--bg:#03101e;--panel:#07172a;--panel2:#0a2039;--line:#244b70;--cyan:#5ce6ff;--gold:#f5c65d;--green:#33d889;--red:#ef586c;--text:#f6fbff;--muted:#8ca4bf}
*{box-sizing:border-box}html{background:#020914}body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -10%,#0b3a5b 0,#06192b 27rem,#020914 72rem);min-height:100vh}.hidden{display:none!important}
.app-shell{width:min(1320px,calc(100% - 24px));margin:auto}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #153853}.brand{display:block;width:230px;height:64px;overflow:hidden}.brand img{width:200px;height:60px;object-fit:contain;transform:scale(1.7);transform-origin:left center}.top-actions{display:flex;gap:8px}.top-actions a,.top-actions button{border:1px solid #285476;background:#081a2e;color:#dff6ff;border-radius:999px;padding:9px 12px;text-decoration:none;cursor:pointer}
.hero{text-align:center;padding:34px 12px 26px}.eyebrow{color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.18em}.hero h1{font-size:clamp(46px,8vw,94px);line-height:.86;margin:12px 0 14px;letter-spacing:-.045em;background:linear-gradient(#fff,#c5e6ff 48%,#6e9dc5);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 9px 25px #0008)}.hero p{max-width:800px;margin:auto;color:#aac0d4;line-height:1.55}
.panel{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#0a2038ee,#051323f5);box-shadow:0 28px 80px #0008;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #1e405e}.panel-head>div{display:flex;align-items:center;gap:10px}.panel-head span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0e4163;color:var(--cyan);font-weight:1000}.panel-head h2{margin:0;font-size:1.1rem}.panel-head small{color:#7fa0ba}
.setup{padding-bottom:22px}.team-pickers{display:grid;grid-template-columns:1fr 70px 1fr;gap:14px;align-items:end;padding:22px}.team-pickers label{font-size:.73rem;font-weight:900;letter-spacing:.13em;color:#8ea6be}.team-pickers select{display:block;width:100%;margin-top:7px;border:1px solid #2b567a;background:#06172a;color:#fff;border-radius:14px;padding:13px;font-size:1rem}.versus{text-align:center;font-weight:1000;color:var(--gold);padding-bottom:13px}.preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 22px 18px}.preview-team{border:1px solid #234664;border-radius:16px;background:#061628;padding:14px}.preview-team strong{display:block;font-size:1.05rem}.preview-team small{display:block;color:#8ca4bc;margin-top:4px}.preview-team .players{margin-top:10px;font-size:.8rem;color:#c8d6e4;line-height:1.6}
button.primary,.primary{border:0;background:linear-gradient(135deg,#f1ba47,#ffdc8d);color:#231600;font-weight:1000}.setup>.primary{display:block;margin:auto;padding:13px 21px;border-radius:13px;cursor:pointer}
.game{margin-top:18px}.shootout-board{display:grid;gap:8px;margin-bottom:12px}.score-row{display:grid;grid-template-columns:minmax(210px,.9fr) 70px 1.8fr;align-items:center;gap:10px;border:1px solid #224664;background:#061426;border-radius:17px;padding:11px 13px}.score-row.active{border-color:#54dfff;box-shadow:0 0 22px #44d7ff19}.score-team{font-weight:950}.score-team small{display:block;color:#7790aa;font-weight:600;margin-top:2px}.score-num{font-size:1.7rem;font-weight:1000;text-align:center}.kick-list{display:flex;gap:6px;flex-wrap:wrap}.kick{flex:1 1 78px;max-width:130px;min-width:58px;border:1px solid #33465f;background:#0a1b30;color:#748aa3;border-radius:10px;padding:6px 7px;font-size:.68rem;text-align:center}.kick b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kick.good{background:#0b3828;border-color:#32c87f;color:#6bf0a8}.kick.bad{background:#3b1520;border-color:#d95168;color:#ff8ea0}.kick.now{border-color:#58defc;color:#e7fbff;box-shadow:0 0 14px #4ad6ff25}.kick.extra{outline:1px dashed #e0b852;outline-offset:2px}
.game-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.65fr);gap:14px}.stage-card,.control-card{border:1px solid #244a6b;border-radius:22px;background:#061426;overflow:hidden}.stage-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 15px;border-bottom:1px solid #1d3d58}.stage-head b{display:block}.stage-head small{color:#7793ad}.pressure{border:1px solid #805f25;border-radius:999px;color:#ffd673;padding:6px 9px;font-size:.72rem;font-weight:900;letter-spacing:.1em}.phaser-mount{width:100%;aspect-ratio:16/9;background:#020914;position:relative}.phaser-mount canvas{width:100%!important;height:100%!important;display:block}.aim-help{text-align:center;color:#718aa2;padding:9px;font-size:.78rem}.control-card{padding:13px}.control-block{border:1px solid #203d58;border-radius:15px;background:#08192c;padding:12px;margin-bottom:9px}.control-block strong{display:block;margin-top:3px;font-size:1.08rem}.control-block small{color:#839bb3}.mini-label{font-size:.68rem;font-weight:900;color:#60dff6;letter-spacing:.12em}.control-line{display:flex;align-items:center;justify-content:space-between}.control-line b{color:#f6cf76}.micro-grid{margin-top:8px;height:26px;border-radius:7px;background:linear-gradient(rgba(91,213,249,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(91,213,249,.13) 1px,transparent 1px);background-size:10px 10px;border:1px solid #1e435f;display:grid;grid-template-columns:repeat(10,1fr)}input[type=range]{width:100%;accent-color:#f5c75f}.power-scale{display:flex;justify-content:space-between;font-size:.61rem;color:#677f98}.shoot{width:100%;border:0;border-radius:14px;padding:14px;background:linear-gradient(135deg,#f0b946,#ffdc8b);color:#211300;font-weight:1000;font-size:1.05rem;cursor:pointer}.shoot:disabled{opacity:.38}.commentary{margin-top:9px;border:1px solid #21425f;background:#05111f;border-radius:13px;padding:12px;color:#aec0d0;line-height:1.45;min-height:68px}
.result{margin-top:18px}.result>#winnerCard,.result>.panel-head+div{margin:0}.winner-wrap{display:grid;grid-template-columns:1fr 50px 1fr;gap:12px;padding:20px}.winner-team{border-radius:19px;padding:18px;text-align:center;border:1px solid #294865;background:#09192c}.winner-team.win{background:linear-gradient(180deg,#11603e,#082d21);border-color:#35ce86}.winner-team.lose{background:linear-gradient(180deg,#702132,#311018);border-color:#df596d}.winner-team .flag{font-size:2rem}.winner-team h3{margin:7px 0}.winner-team strong{font-size:2.5rem}.winner-team span{display:inline-block;margin-top:8px;border-radius:999px;padding:5px 8px;font-size:.7rem;font-weight:1000;background:#ffffff12}.winner-vs{display:grid;place-items:center;color:#66819b;font-weight:1000}.shot-log{display:grid;gap:7px;padding:0 20px 20px}.log-row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;border:1px solid #1d3a55;background:#061426;border-radius:12px;padding:8px 10px;font-size:.8rem}.log-row .mark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:1000}.log-row.good .mark{background:#31cf82;color:#062519}.log-row.bad .mark{background:#e3556b;color:#30070e}.log-row small{display:block;color:#7890aa}.result-actions{display:flex;gap:9px;justify-content:center;padding:0 20px 22px}.result-actions button{border:1px solid #315474;background:#0b2035;color:#fff;border-radius:12px;padding:12px 16px;font-weight:900;cursor:pointer}
footer{text-align:center;color:#58728a;padding:34px 10px;font-size:.76rem}
@media(max-width:860px){.game-grid{grid-template-columns:1fr}.control-card{display:grid;grid-template-columns:1fr 1fr;gap:8px}.control-block{margin:0}.shoot,.commentary{grid-column:1/-1}.score-row{grid-template-columns:1fr 50px}.kick-list{grid-column:1/-1}.team-pickers{grid-template-columns:1fr}.versus{padding:0}.preview{grid-template-columns:1fr}}
@media(max-width:560px){.app-shell{width:min(100% - 12px,1320px)}.hero{padding-top:22px}.hero h1{font-size:52px}.control-card{grid-template-columns:1fr}.shoot,.commentary{grid-column:auto}.winner-wrap{grid-template-columns:1fr 28px 1fr;padding:12px}.winner-team{padding:11px}.winner-team strong{font-size:1.8rem}.kick{flex-basis:52px;font-size:.61rem}.score-team{font-size:.88rem}}
/* V5 mobile game HUD + stronger visual hierarchy */
.mobile-shotbar{display:none}
.stage-card{position:relative}
.phaser-mount{min-height:0}
.turn-toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:8;max-width:86%;padding:8px 14px;border-radius:999px;border:1px solid #50dfff;background:rgba(3,17,31,.86);backdrop-filter:blur(8px);font-size:.76rem;font-weight:950;letter-spacing:.04em;pointer-events:none}
.control-card{align-self:start}
@media(max-width:860px){
  .game-grid{display:block}
  .control-card{margin-top:10px;display:grid;grid-template-columns:1fr 1fr}
  .mobile-shotbar{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 12px 12px;border-top:1px solid #1f4664;background:#061426}
  .mobile-shotbar input{grid-column:1/-1}
  .mobile-power-line{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;color:#b8cce0}
  .mobile-power-line span{color:#f7cc70;font-weight:1000}
  .mobile-shotbar .shoot{grid-column:1/-1;min-height:52px;font-size:1.02rem}
  .control-card .control-block:nth-child(3),.control-card .control-block:nth-child(4),.control-card>.shoot{display:none}
  .commentary{grid-column:1/-1}
}
@media(max-width:560px){
  .hero{padding-bottom:14px}.hero p{font-size:.9rem}
  .shootout-board{position:sticky;top:0;z-index:12;background:#020914;padding-top:4px}
  .score-row{padding:8px 9px;border-radius:13px}
  .score-team{font-size:.78rem}.score-team small{font-size:.65rem}
  .score-num{font-size:1.3rem}
  .kick{min-width:45px;padding:5px 4px}
  .stage-head{padding:9px 10px}.stage-head b{font-size:.9rem}.stage-head small{font-size:.7rem}
  .phaser-mount{aspect-ratio:4/3}
  .aim-help{font-size:.72rem}
  .control-card{grid-template-columns:1fr 1fr;padding:8px}
  .control-block{padding:9px}
  .control-block strong{font-size:.9rem}
  .control-block small{font-size:.7rem}
}