:root{--font-narrow: "arial-narrow", "Archivo Narrow", "Arial Narrow", "Roboto Condensed", "open-sans", Arial, sans-serif;--font-body: "open-sans", "Open Sans", Arial, "Trebuchet MS", "Segoe UI", Helvetica, sans-serif;--navy: #003642;--navy-deep: #00222b;--gold: #e1be69;--coral: #e7787f;--teal: #65b1a5;--cream: #f4ead6;--panel: rgba(0, 28, 36, .82);--panel-border: rgba(255, 255, 255, .08)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);overflow:hidden;background:#2a2028;color:#fff}#game-container{width:100vw;height:100vh;position:relative}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#0000 50%,#2e100e8c)}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:opacity .8s ease}#ui-overlay>*{pointer-events:auto}.intro-active #ui-overlay{opacity:0}.intro-active #ui-overlay>*{pointer-events:none}.btn{display:inline-block;padding:10px 30px;border:none;border-radius:5px;background:var(--gold);color:var(--navy);font-family:var(--font-narrow);font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 6px 18px #00000059}.btn:hover{transform:scale(1.08);box-shadow:0 10px 26px #0006}.btn:active{transform:scale(1.02)}.btn-large{padding:14px 44px;font-size:22px}.btn-secondary{background:#001c24cc;color:var(--cream);border:1px solid rgba(244,234,214,.35);backdrop-filter:blur(10px)}.btn-secondary:hover{background:#003642e6;border-color:var(--cream)}#hud{position:absolute;bottom:20px;left:20px;min-width:250px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;backdrop-filter:blur(12px);box-shadow:0 10px 30px #00000059;overflow:hidden}.hud-players{display:grid;grid-template-columns:1fr 1fr}.hud-player{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 18px 14px;opacity:.55;transition:opacity .3s ease,background-color .3s ease}.hud-player+.hud-player{border-left:1px solid var(--panel-border)}.hud-player.active{opacity:1;background:#ffffff0a}.hud-player:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--player-colour);transform:scaleX(0);transition:transform .3s ease}.hud-player.active:before{transform:scaleX(1)}#player1-score{--player-colour: var(--coral)}#player2-score{--player-colour: var(--teal)}.player-name{font-family:var(--font-narrow);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--player-colour)}.hud-player .score{font-family:var(--font-narrow);font-size:46px;font-weight:700;line-height:1;color:#fff}.pucks{display:flex;gap:5px;margin-top:2px}.pucks i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--player-colour);opacity:.45}.pucks i.filled{background:var(--player-colour);opacity:1}.hud-footer{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 16px 10px;text-align:center;border-top:1px solid var(--panel-border);background:#00000040;font-family:var(--font-narrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase}#current-player{font-size:14px}.player1-turn #current-player{color:var(--coral)}.player2-turn #current-player{color:var(--teal)}#target-score{font-size:12px;color:#ffffff80}#instructions{position:absolute;bottom:30px;left:50%;transform:translate(-50%);padding:12px 28px;border-radius:8px;background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(12px);text-align:center}#instructions p{font-family:var(--font-narrow);font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}#instructions.waiting #instructions-main{color:var(--teal)}#instructions.waiting #instructions-hint:empty{display:none}#instructions .hint{margin-top:3px;font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#fff9}#power-indicator{position:absolute;bottom:120px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}#power-bar{width:220px;height:14px;background:#00000080;border-radius:7px;overflow:hidden;border:1.5px solid rgba(255,255,255,.25)}#power-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--coral));transition:width .05s ease-out}#power-text{font-family:var(--font-narrow);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.5)}#round-end,#game-over{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:320px;padding:32px 44px 36px;border-radius:8px;background:#001c24eb;border:1px solid var(--panel-border);backdrop-filter:blur(20px);box-shadow:0 20px 60px #00000080;text-align:center;max-width:calc(100vw - 24px);max-height:calc(100vh - 20px);overflow-y:auto}#round-end h2,#game-over h2{font-family:var(--font-narrow);font-size:34px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}#round-end h3{font-family:var(--font-narrow);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff80;margin:14px 0 6px}.score-row{display:flex;justify-content:space-between;gap:12px;padding:4px 12px;font-family:var(--font-narrow);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.player1-color{color:var(--coral)}.player2-color{color:var(--teal)}#winner-text{font-family:var(--font-narrow);font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}#final-scores{margin-bottom:26px;font-size:16px;color:#fffc}#final-scores p{margin:6px 0}#round-end .btn,#game-over .btn{margin-top:16px}#camera-toggle-btn{position:absolute;bottom:30px;right:20px;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:5px;border:1px solid var(--panel-border);background:var(--panel);color:#fff;font-family:var(--font-narrow);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(10px);transition:transform .2s ease,background-color .2s ease,border-color .2s ease}#camera-toggle-btn:hover{background:#65b1a54d;border-color:var(--teal);transform:scale(1.05)}#camera-toggle-btn:active{transform:scale(.98)}#camera-toggle-btn svg{flex-shrink:0}#camera-label{white-space:nowrap}#loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#2a2028;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;z-index:1000}.loader{width:56px;height:56px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loading-screen p{font-family:var(--font-narrow);font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}#intro{position:absolute;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center;padding-bottom:48px;pointer-events:none;opacity:1;transition:opacity .5s ease}#intro.fade-out{opacity:0}#intro-cta{pointer-events:auto;animation:introPulse 2s ease-in-out infinite}#intro-modes{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 30px 20px;border-radius:10px;background:#001c24d1;border:1px solid var(--panel-border);backdrop-filter:blur(14px);box-shadow:0 18px 50px #00000073;animation:introRise .35s ease-out;text-align:center}#intro-modes-title{font-family:var(--font-narrow);font-size:17px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}#intro-mode-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}#intro-modes-hint{max-width:340px;font-size:12px;line-height:1.5;color:#ffffff8c}@keyframes introRise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}#intro.fade-out #intro-cta{pointer-events:none}@keyframes introPulse{0%,to{transform:scale(1);box-shadow:0 6px 18px #00000059}50%{transform:scale(1.06);box-shadow:0 8px 30px #e1be6973}}.hidden,[hidden]{display:none!important}#direction-arrow{position:absolute;pointer-events:none;display:none}@media (max-width: 768px),(max-height: 560px){#hud{bottom:10px;left:10px;min-width:0;border-radius:6px}.hud-player{padding:6px 10px 5px;gap:3px}.player-name{font-size:10px;letter-spacing:.08em}.hud-player .score{font-size:22px}.pucks{gap:3px}.pucks i{width:6px;height:6px}.hud-footer{padding:4px 10px 5px;gap:1px}#current-player{font-size:11px}#target-score{font-size:9px}#instructions{bottom:auto;top:12px;max-width:calc(100vw - 150px);padding:8px 14px}#instructions p{font-size:13px}#power-bar{width:160px}#camera-toggle-btn{bottom:12px;right:12px;padding:7px 12px;font-size:12px}}@media (max-width: 768px){.btn-large{padding:12px 34px;font-size:18px}#intro-modes{padding:18px 20px 16px;gap:12px;max-width:calc(100vw - 32px)}#intro-mode-buttons{flex-direction:column;width:100%}#intro-modes-hint{font-size:11px}}@media (max-width: 768px),(max-height: 560px){#round-end,#game-over{min-width:min(300px,calc(100vw - 24px));padding:18px 22px 20px;border-radius:6px}#round-end h2,#game-over h2{font-size:22px;margin-bottom:10px}#round-end h3{font-size:11px;margin:8px 0 4px}.score-row{font-size:15px;padding:3px 8px}#winner-text{font-size:18px;margin-bottom:10px}#final-scores{font-size:14px;margin-bottom:16px}#round-end .btn,#game-over .btn{margin-top:12px}}@media (max-height: 560px){#round-end{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start;min-width:min(400px,calc(100vw - 24px))}#round-number{grid-column:1 / -1}#next-round-btn{grid-column:1 / -1;justify-self:center}}