:root{--paper: #f4e9d8;--ink: #1b2430;--accent-red: #d6222e;--accent-gold: #e2a33b;--accent-blue: #2a6fb0;--line: #c9b998;--card-shadow: 0 10px 0 rgba(27, 36, 48, .15);font-family:Arial Black,Arial,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:#10161c;color:var(--ink);width:100%;height:100%;overflow:hidden}#app{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center}#screen-root{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5}#game-root{position:relative;width:1280px;max-width:100vw;height:720px;max-height:100vh;margin:auto}#game-root canvas{width:100%;height:100%;display:block}.screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#2a3a46,#10161c 70%);padding:20px;overflow-y:auto}.poster-card{background:var(--paper);border:4px solid var(--ink);border-radius:18px;box-shadow:var(--card-shadow);padding:32px 40px;max-width:640px;width:100%;text-align:center}.poster-card-wide{max-width:860px}.title-lockup{font-size:52px;letter-spacing:2px;margin:0 0 8px;color:var(--accent-red);text-shadow:3px 3px 0 var(--ink)}.tagline{font-family:Georgia,serif;font-weight:400;font-style:italic;color:var(--ink);margin:0 0 24px}.section-title{margin:0 0 20px;font-size:28px;color:var(--accent-blue);text-shadow:2px 2px 0 var(--ink)}.section-subtitle{margin:20px 0 8px;font-size:14px;letter-spacing:1px;color:var(--ink)}.menu-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}.btn{font-family:inherit;font-size:16px;padding:12px 22px;border-radius:10px;border:3px solid var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .08s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.btn-primary{background:var(--accent-red);color:#fff}.btn-secondary{background:#fff;color:var(--ink)}.fine-print{font-family:Georgia,serif;font-weight:400;font-size:12px;color:#6b5c3f;margin-top:20px}.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:8px}.team-card{display:flex;gap:12px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:12px;cursor:pointer;text-align:left;font-family:inherit}.team-card-selected{outline:4px solid var(--accent-gold)}.team-crest{width:56px;height:56px;flex-shrink:0;border-radius:10px;border:3px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.team-crest-portrait{width:100%;height:100%;object-fit:contain;object-position:bottom;image-rendering:pixelated}.team-card-body h3{margin:0 0 2px;font-size:16px}.team-identity-label{font-size:11px;letter-spacing:.5px;color:var(--accent-blue);margin:0 0 4px;font-weight:700}.team-tagline{font-family:Georgia,serif;font-weight:400;font-size:12px;margin:0;color:#444}.difficulty-grid{display:flex;gap:12px;justify-content:center}.difficulty-card{background:#fff;border:3px solid var(--ink);border-radius:10px;padding:16px 24px;cursor:pointer;font-family:inherit;font-size:16px}.difficulty-card-selected{outline:4px solid var(--accent-gold)}.speed-row{display:flex;gap:8px;justify-content:center}.speed-pill{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 16px;cursor:pointer;font-family:inherit}.speed-pill-selected{background:var(--accent-blue);color:#fff}.controls-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}.controls-columns h3{color:var(--accent-blue);margin:0 0 8px}.controls-list{list-style:none;padding:0;margin:0}.controls-list li{display:flex;justify-content:space-between;gap:12px;font-family:Georgia,serif;font-weight:400;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}.controls-hint{font-family:Georgia,serif;font-style:italic;font-size:13px;color:var(--ink-soft, #5a5347);margin:10px 0 0}.results-card{max-width:480px}.results-headline{font-size:44px;margin:0 0 8px;text-shadow:3px 3px 0 var(--ink)}.results-win{color:var(--accent-gold)}.results-loss{color:var(--accent-red)}.results-tie{color:var(--accent-blue)}.ot-badge{font-family:Georgia,serif;font-style:italic;margin:0 0 12px}.results-score{display:flex;gap:16px;align-items:baseline;justify-content:center;font-size:24px;margin-bottom:8px}.hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;font-family:inherit;color:#fff}.hud-top{position:absolute;top:10px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;background:#10161cbf;border:2px solid #fff;border-radius:10px;padding:6px 14px;pointer-events:auto}.hud-team{min-width:40px;text-align:center}.hud-abbr{font-size:16px;letter-spacing:1px}.hud-center{display:flex;flex-direction:column;align-items:center;min-width:90px}.hud-score{font-size:20px}.hud-clock{font-size:14px;color:var(--accent-gold)}.hud-period{font-size:10px;letter-spacing:1px;color:#ccc}.hud-pause-btn{background:#ffffff26;border:2px solid #fff;color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit}.hud-bottom{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:4px;width:220px}.hud-bar-track{height:8px;border:2px solid #fff;border-radius:5px;overflow:hidden;background:#0006}.hud-bar-fill{height:100%;width:0%}.sprint-fill{background:var(--accent-blue)}.charge-fill{background:var(--accent-red)}.charge-track{transition:opacity .2s ease}.hud-commentary{position:absolute;top:60px;left:50%;transform:translate(-50%);background:#10161cd9;border:2px solid var(--accent-gold);border-radius:8px;padding:6px 14px;font-family:Georgia,serif;font-style:italic;font-size:14px;opacity:0;transition:opacity .3s ease}.hud-commentary-visible{opacity:1}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0a0e12b3}.pause-card{max-width:420px}.pause-sliders,.pause-toggles{display:flex;flex-direction:column;gap:10px;text-align:left;margin:16px 0;font-family:Georgia,serif;font-weight:400;font-size:14px}.pause-sliders label,.pause-toggles label{display:flex;align-items:center;justify-content:space-between;gap:10px}
