:root { color-scheme:dark; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif; color:#eef7ff; background:#090d18; -webkit-text-size-adjust:100%; }
* { box-sizing:border-box; }
body { margin:0; }
.hockey-shell { max-width:450px; margin:auto; padding:2px 2px max(2px,env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 0,#22304966,transparent 60%),#090d18; }
.table-frame { width:min(100%,var(--hockey-frame-width,100%)); margin:0 auto; padding:1px; border:1px solid #c5a464; border-radius:22px; background:linear-gradient(135deg,#6f593b,#172437 25%,#26364b 70%,#9b7545); box-shadow:0 0 0 2px #090d18,0 0 0 3px #3c485c,0 8px 24px #0008; }
.scoreboard { display:grid; grid-template-columns:29px auto 34px minmax(0,1fr) 44px; align-items:center; gap:0 4px; grid-template-rows:44px; padding:0 4px; margin:0 auto; border-radius:17px 17px 0 0; background:linear-gradient(#1c283b,#101826); }
.scoreboard strong { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; height:35px; font-size:24px; font-weight:850; font-variant-numeric:tabular-nums; line-height:1; }
.scoreboard .score-divider { color:#637087; font-size:17px; font-weight:400; }
.score-player { color:#86f4ff; text-shadow:0 0 12px #3cceff66; }
.score-opponent { color:#ffb4db; text-shadow:0 0 12px #ff469b66; }
.player-mark { position:relative; display:grid; place-items:center; width:29px; height:29px; border:1px solid #b3f9ff; border-radius:50%; background:#1b586c; font-size:0; box-shadow:0 0 10px #2ee9ff30; }
.player-mark::before { content:""; width:20px; height:20px; border-radius:50%; border:2px solid #49d9ee; background:#153347; }
.player-mark::after { content:""; position:absolute; width:10px; height:10px; border-radius:50%; border:1px solid #bdfbff; background:#409bad; }
.portrait { width:34px; height:34px; object-fit:contain; border-radius:50%; border:1px solid #f8b0d6; background:#492a48; box-shadow:0 0 10px #ff63b828; }
.portrait.cheer { transform:rotate(-10deg) scale(1.08); }
button { font:inherit; cursor:pointer; border:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#pause { grid-column:5; grid-row:1; width:44px; height:44px; padding:0; color:#eddbb2; background:transparent; border-radius:10px; font-size:18px; font-weight:700; }
#pause:disabled { opacity:.35; cursor:default; }
.table { position:relative; width:100%; margin:0; aspect-ratio:2/3; border-radius:4px 4px 17px 17px; background:#101b2d; box-shadow:inset 0 0 0 1px #66d9ff60; overflow:hidden; }
canvas { display:block; width:100%; height:100%; touch-action:none; outline-offset:-5px; }
.overlay { position:absolute; z-index:2; inset:0; display:grid; place-items:center; padding:12px; background:#070d1c55; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.overlay[hidden] { display:none; }
.panel { position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; width:min(100%,230px); padding:27px 12px 23px; border:1px solid #ab8c58; border-radius:24px; background:radial-gradient(ellipse at 50% 0,#30415a,#111c30 75%); box-shadow:0 0 0 3px #09101b90,0 16px 36px #0006,inset 0 1px #ecd6a130; }
.panel::before { content:""; position:absolute; inset:6px; border:1px solid #b1976730; border-radius:18px; pointer-events:none; }
.panel p { margin:0; color:#f8e3b4; font-size:clamp(17px,4.8vw,22px); font-weight:800; letter-spacing:.06em; text-shadow:0 2px 8px #0008; }
.play { display:grid; place-items:center; width:100%; min-height:48px; padding:12px; flex-shrink:0; border:2px solid #fff0bd; border-radius:14px; background:linear-gradient(135deg,#f1d18b,#bd873f); color:#182131; font-size:18px; font-weight:800; line-height:1.2; box-shadow:0 4px 0 #80552f,0 0 0 6px #dcb76a15,0 0 26px #f6c86f30,inset 0 2px #fff7; }
.play:active { transform:translateY(2px); box-shadow:0 2px 0 #80552f,0 0 0 6px #dcb76a15; }
.panel small { font-size:11px; color:#a6b6ca; letter-spacing:.06em; }
.goal-flash { --goal-color:#52e4ff; position:absolute; z-index:1; inset:0; pointer-events:none; display:grid; place-items:center; color:#fff0bd; font-size:clamp(24px,8vw,36px); font-weight:900; letter-spacing:.08em; text-shadow:0 2px 8px #000; opacity:0; box-shadow:inset 0 0 45px -10px var(--goal-color); border:2px solid var(--goal-color); border-radius:inherit; }
.goal-flash.show { animation:goal .7s ease-out; }
.goal-flash.opponent { --goal-color:#ff7abc; }
.goal-flash::after { content:""; position:absolute; left:50%; top:50%; width:90px; height:90px; border:2px solid #fff1bd; border-radius:50%; box-shadow:0 0 20px #f3cd7340; transform:translate(-50%,-50%); }
.goal-flash.show::after { animation:goal-ring .7s ease-out both; }
@keyframes goal { 0%,15% { opacity:.85; } 100% { opacity:0; } }
@keyframes goal-ring { from { transform:translate(-50%,-50%) scale(.65); opacity:.9; } to { transform:translate(-50%,-50%) scale(2.1); opacity:0; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
button:focus-visible,canvas:focus-visible { outline:2px solid #fff0bc; outline-offset:-3px; }
@media (hover:hover) { .play:hover { filter:brightness(1.12); } #pause:not(:disabled):hover { background:#ffffff0e; } }
@media (max-height:650px) { .panel { gap:12px; padding:18px 10px; }.play { font-size:17px; } }
@media (prefers-reduced-motion:no-preference) { .portrait,.play { transition:transform .15s,filter .15s; } }
@media (prefers-reduced-motion:reduce) { .goal-flash.show { animation:goal-reduced .7s step-end; }.goal-flash.show::after { animation:none; display:none; }.portrait.cheer { transform:none; } }

@keyframes goal-reduced { from { opacity:1; box-shadow:none; } to { opacity:0; box-shadow:none; } }

.difficulty-control { display:grid; gap:8px; width:100%; color:#c8d4e5; text-align:center; font-size:11px; }
.difficulty-control[hidden] { display:none; }
.difficulty-control select { width:100%; min-height:44px; padding:8px 12px; border:1px solid #bd9a5d; border-radius:12px; background:#0a1526; color:#ffe6b1; font:inherit; font-size:15px; font-weight:700; }
.difficulty-control select:focus-visible { outline:2px solid #60e8ff; outline-offset:2px; }
.difficulty-control small { font-size:10px; letter-spacing:0; }
.goal-flash.bank { --goal-color:#ffd477; color:#ffe4a0; text-shadow:0 2px 8px #000,0 0 18px #ffc75d88; }
.table-frame { border-color:#e2bf7c; background:linear-gradient(135deg,#cba261,#1a2942 24%,#132334 72%,#b3894f); }

.opponent-dialogue { grid-column:4; grid-row:1; width:100%; min-width:0; margin:0; padding:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#ffd4e9; font-size:12px; line-height:1.4; text-align:center; overflow-wrap:anywhere; }
#opponent-control { gap:4px; }
.panel { max-height:100%; overflow-y:auto; gap:12px; padding-top:20px; padding-bottom:18px; }
@media (max-height:650px) { .panel { gap:8px; padding:14px 10px; } .difficulty-control { gap:4px; } }

/* Full dialogue stays readable in the existing start / pause / result panel. */
.panel > * { flex-shrink:0; }
.panel .panel-dialogue { width:100%; color:#ffd4e9; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; text-align:center; overflow-wrap:anywhere; }
/* A short portrait viewport also narrows the 2:3 rink. Keep scores clear of
   the portrait while preserving the 44px pause target. */
@media (max-height:520px) {
    .scoreboard { grid-template-columns:24px auto 28px minmax(0,1fr) 44px; column-gap:4px; padding-inline:4px; }
    .scoreboard strong { font-size:20px; gap:4px; }
    .scoreboard .score-divider { font-size:15px; }
    .player-mark { width:24px; height:24px; }
    .player-mark::before { width:16px; height:16px; }
    .portrait { width:28px; height:28px; }
}

#progress { text-align:center; line-height:1.5; letter-spacing:0; color:#ffe6b1; }
#progress[hidden] { display:none; }
/* Only settings scroll, keeping the start / rematch button within the panel. */
.panel .match-settings { display:grid; gap:10px; width:100%; min-height:0; flex-shrink:1; overflow-y:auto; overscroll-behavior:contain; padding:2px; }