/* Palette, typefaces and design tokens live in theme.css — loaded before this
file by every page, so the standalone tools share one source of truth.
--gold-dark is kept here as an alias: only in-game HUD rules still use it. */
:root { --gold-dark: var(--gold-deep); }
/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--ink);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Every component used to declare its own `.hidden { display:none }`, which meant
a missed declaration left a modal permanently on screen. One global rule now. */
.hidden { display: none !important; }
/* Sprite icons carry no intrinsic size — without this they render at the SVG
default 300x150 and blow up whatever contains them. */
.nav-icon, .hero-icon, .nav-chevron, .hero-chevron, .ui-icon {
display: block;
flex: none;
width: 18px;
height: 18px;
fill: none;
}
/* Scrollbars. The default white Windows bar was the loudest thing on the
Options panel. Scoped to the out-of-game shell so the HUD keeps its own. */
.options-body, .customize-card-scroll, .stats-shell, .browser-container,
.lobby-list, .replay-list, #leaderboard-rows, .horn-modal-body, .horn-modal-card,
.modal-card, .options-overlay, .modal-overlay, .tut-welcome-card, .customize-stage,
#screen-stats, #screen-replays, #screen-leaderboard, .menu-shell,
.chat-dock-roster, .chat-dock-log {
scrollbar-width: thin;
scrollbar-color: rgba(168, 212, 232, 0.28) transparent;
}
.options-body::-webkit-scrollbar, .customize-card-scroll::-webkit-scrollbar,
.stats-shell::-webkit-scrollbar, .browser-container::-webkit-scrollbar,
.lobby-list::-webkit-scrollbar, .replay-list::-webkit-scrollbar,
#leaderboard-rows::-webkit-scrollbar, .horn-modal-body::-webkit-scrollbar,
.horn-modal-card::-webkit-scrollbar, .modal-card::-webkit-scrollbar,
.options-overlay::-webkit-scrollbar, .modal-overlay::-webkit-scrollbar,
.tut-welcome-card::-webkit-scrollbar,
#screen-stats::-webkit-scrollbar, #screen-replays::-webkit-scrollbar,
#screen-leaderboard::-webkit-scrollbar, .menu-shell::-webkit-scrollbar,
.chat-dock-roster::-webkit-scrollbar, .chat-dock-log::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.options-body::-webkit-scrollbar-track, .customize-card-scroll::-webkit-scrollbar-track,
.stats-shell::-webkit-scrollbar-track, .browser-container::-webkit-scrollbar-track,
.lobby-list::-webkit-scrollbar-track, .replay-list::-webkit-scrollbar-track,
#leaderboard-rows::-webkit-scrollbar-track, .horn-modal-body::-webkit-scrollbar-track,
.horn-modal-card::-webkit-scrollbar-track, .modal-card::-webkit-scrollbar-track,
.options-overlay::-webkit-scrollbar-track, .modal-overlay::-webkit-scrollbar-track,
.tut-welcome-card::-webkit-scrollbar-track,
#screen-stats::-webkit-scrollbar-track, #screen-replays::-webkit-scrollbar-track,
#screen-leaderboard::-webkit-scrollbar-track, .menu-shell::-webkit-scrollbar-track,
.chat-dock-roster::-webkit-scrollbar-track, .chat-dock-log::-webkit-scrollbar-track {
background: transparent;
}
.options-body::-webkit-scrollbar-thumb, .customize-card-scroll::-webkit-scrollbar-thumb,
.stats-shell::-webkit-scrollbar-thumb, .browser-container::-webkit-scrollbar-thumb,
.lobby-list::-webkit-scrollbar-thumb, .replay-list::-webkit-scrollbar-thumb,
#leaderboard-rows::-webkit-scrollbar-thumb, .horn-modal-body::-webkit-scrollbar-thumb,
.horn-modal-card::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb,
.options-overlay::-webkit-scrollbar-thumb, .modal-overlay::-webkit-scrollbar-thumb,
.tut-welcome-card::-webkit-scrollbar-thumb,
#screen-stats::-webkit-scrollbar-thumb, #screen-replays::-webkit-scrollbar-thumb,
#screen-leaderboard::-webkit-scrollbar-thumb, .menu-shell::-webkit-scrollbar-thumb,
.chat-dock-roster::-webkit-scrollbar-thumb, .chat-dock-log::-webkit-scrollbar-thumb {
background: rgba(168, 212, 232, 0.22);
border-radius: 4px;
}
.options-body::-webkit-scrollbar-thumb:hover, .customize-card-scroll::-webkit-scrollbar-thumb:hover,
.stats-shell::-webkit-scrollbar-thumb:hover, .replay-list::-webkit-scrollbar-thumb:hover,
#leaderboard-rows::-webkit-scrollbar-thumb:hover, #screen-stats::-webkit-scrollbar-thumb:hover {
background: rgba(168, 212, 232, 0.4);
}
/* Focus is invisible today. One cold ring, everywhere, keyboard-only. */
:focus-visible {
outline: 2px solid var(--ice);
outline-offset: 2px;
border-radius: 2px;
}
/* Screens */
.screen {
display: none;
position: fixed;
inset: 0;
align-items: center;
justify-content: center;
}
.screen.active { display: flex; }
/* Menu depth field. Sits behind everything in the menu and never takes input.
Content inside .menu-shell already establishes its own stacking, so only the
canvas needs pinning to the back. */
.menu-bg-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.2s ease;
}
.menu-bg-canvas.is-on { opacity: 1; }
/* The menu backdrop: pre-recorded arena loops (game.js menuArena*). Two ids outrank the generic
"#screen-menu > *" stacking rule below, which would otherwise lift it over the menu. */
#screen-menu > #menu-arena {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.6s ease;
overflow: hidden;
}
#screen-menu > #menu-arena.is-on { opacity: 1; }
#menu-arena .menu-arena-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
#menu-arena .menu-arena-video.is-front { opacity: 1; }
/* Keeps the menu readable over a bright arena: darker at the rails where the panels sit. */
#menu-arena::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 45%, rgba(4, 8, 14, 0.1) 0%, rgba(4, 8, 14, 0.58) 100%),
linear-gradient(90deg, rgba(4, 8, 14, 0.55) 0%, rgba(4, 8, 14, 0.08) 38%, rgba(4, 8, 14, 0.08) 62%, rgba(4, 8, 14, 0.5) 100%);
}
/* Snow belongs outdoors: once the arena is up, the blizzard goes. */
#screen-menu.menu-video-on .menu-bg-canvas { opacity: 0; }
/* Excludes .top-banner: those are position:fixed full-width top banners; without
the exclusion this id-specificity rule forces them relative, dropping them into
the centered flex row so they render off to the left instead of across the top. */
#screen-menu > *:not(.menu-bg-canvas):not(.top-banner) { position: relative; z-index: 1; }
/* Decoration only — motion-sensitive users lose nothing by not having it. */
@media (prefers-reduced-motion: reduce) {
.menu-bg-canvas { display: none; }
}
/* Game: mouse is for aim/shoot — don't highlight HUD, faceoff timer, etc. Chat stays selectable. */
#screen-game.active #game-content {
-webkit-user-select: none;
user-select: none;
}
#screen-game.active #game-content input,
#screen-game.active #game-content textarea,
#screen-game.active #game-content [contenteditable="true"] {
-webkit-user-select: text;
user-select: text;
}
#screen-game.active #game-chat-messages,
#screen-game.active #game-chat-history-list {
-webkit-user-select: text;
user-select: text;
}
/* ===========================================================================
ARENA BACKDROP
---------------------------------------------------------------------------
The out-of-game UI is the ice sheet seen from above at arena-night lighting,
with the interface laid over it like a broadcast overlay. Everything here is
CSS gradients — no images, no canvas, no per-frame cost.
Geometry, not decoration: one faceoff circle (cropped by the viewport, so it
reads as part of a larger rink), the center red line, and a rim of cold light
from the roof. This is the one place the design is allowed to be bold.
=========================================================================== */
.arena-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background:
/* roof light pooling toward the center of the sheet */
radial-gradient(120% 90% at 50% 8%, rgba(92, 150, 190, 0.16) 0%, transparent 55%),
/* cold bounce off the ice at the bottom */
radial-gradient(80% 55% at 50% 108%, rgba(60, 110, 150, 0.13) 0%, transparent 60%),
linear-gradient(178deg, #0a121d 0%, var(--ink) 58%, #04070c 100%);
}
/* Faceoff circle — red ring, cropped left so it feels like rink geometry
continuing past the frame rather than a centered graphic. */
.arena-bg::before {
content: '';
position: absolute;
left: -14vmax;
top: 50%;
width: 78vmax;
height: 78vmax;
margin-top: -39vmax;
border-radius: 50%;
border: 2px solid rgba(226, 69, 63, 0.09);
box-shadow: inset 0 0 0 1px rgba(226, 69, 63, 0.035);
animation: arenaDrift 52s ease-in-out infinite alternate;
}
/* Center red line + a blue line, both barely there. */
.arena-bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(226, 69, 63, 0.09) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(90deg, transparent 0 calc(22% - 1px), rgba(62, 134, 232, 0.055) calc(22% - 1px) calc(22% + 1px), transparent calc(22% + 1px)),
linear-gradient(90deg, transparent 0 calc(78% - 1px), rgba(62, 134, 232, 0.055) calc(78% - 1px) calc(78% + 1px), transparent calc(78% + 1px));
}
/* Vignette, so panels always sit on the darkest part of the frame. */
.arena-vignette {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(78% 68% at 50% 45%, transparent 30%, rgba(3, 5, 9, 0.72) 100%);
}
@keyframes arenaDrift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(2.4vmax, -1.6vmax, 0) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
.arena-bg::before { animation: none; }
}
/* Menu screens sit above the backdrop. */
#screen-name, #screen-menu, #screen-browser, #screen-lobby,
#screen-customize, #screen-stats, #screen-leaderboard, #screen-replays {
z-index: 1;
}
/* ===========================================================================
WORDMARK
Archivo Black cut tight, a hairline rule, then HOCKEY tracked wide in the
condensed data face. The rule is the lockup — it's what makes it read as a
mark rather than two lines of text.
=========================================================================== */
.logo { line-height: 1; }
.logo-zealot {
display: block;
font-family: var(--font-menu-display);
font-size: clamp(2.6rem, 5.4vw, 4.2rem);
letter-spacing: -0.005em;
line-height: 0.92;
background: linear-gradient(168deg, #ffffff 0%, var(--ice) 46%, #7fb2cc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 3px 18px rgba(120, 190, 230, 0.18));
}
.logo-hockey {
display: block;
position: relative;
margin-top: 0.42em;
padding-top: 0.42em;
font-family: var(--font-data);
font-weight: 600;
font-size: clamp(0.85rem, 1.5vw, 1.15rem);
letter-spacing: 0.62em;
text-indent: 0.62em; /* optical: cancels the trailing letter-space */
color: var(--ice-cool);
}
.logo-hockey::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--gold) 0%, rgba(242, 193, 78, 0.15) 45%, transparent 100%);
}
/* Centered variant, used on the login card and the tutorial welcome modal. */
.logo--center { text-align: center; }
.logo--center .logo-hockey::before {
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.tagline {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ice-dim);
}
/* Build number beside the credit. Deliberately dimmer and non-uppercase-tracked so it reads
as metadata, not as part of the byline. */
.menu-version {
margin-left: 0.6em;
color: rgba(125, 153, 173, 0.42);
letter-spacing: 0.08em;
}
.menu-version::before {
content: "·";
margin-right: 0.6em;
opacity: 0.7;
}
/* Small "switch server" link under the byline — present, but never louder than the footer. */
.menu-region-switch {
align-self: flex-start;
margin: 2px 0 0;
padding: 4px 10px;
background: transparent;
border: 1px solid rgba(125, 153, 173, 0.28);
border-radius: 4px;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(125, 153, 173, 0.75);
cursor: pointer;
}
.menu-region-switch:hover:not(:disabled),
.menu-region-switch:focus-visible { color: var(--ice, #e6f1f7); border-color: rgba(125, 153, 173, 0.6); }
.menu-region-switch:disabled { opacity: 0.45; cursor: default; }
.menu-region-switch[hidden] { display: none; }
.menu-region-switch .rs-here { font-weight: 700; }
.menu-footer {
margin: 0;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(125, 153, 173, 0.55);
}
/* Small all-caps label that sits above a heading or field group. */
.eyebrow {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ice-dim);
}
/* ===========================================================================
PANELS — rink boards
A hard cold line along the top edge (the boards' kick plate) instead of a
uniform outline. That single asymmetry is what stops these reading as
generic dark cards.
=========================================================================== */
.panel,
.center-card {
position: relative;
background:
linear-gradient(180deg, rgba(168, 212, 232, 0.045) 0%, transparent 120px),
var(--rink);
border: 1px solid var(--edge);
border-top: 2px solid var(--edge-hi);
border-radius: var(--radius);
box-shadow: var(--shadow-panel);
}
.center-card {
padding: 36px 40px;
width: 100%;
max-width: 420px;
max-height: calc(100dvh - 48px);
display: flex;
flex-direction: column;
gap: 14px;
}
/* ===========================================================================
FORMS
=========================================================================== */
.form-group { display: flex; flex-direction: column; gap: 6px; }
input[type="text"],
input[type="password"] {
background: var(--rink-deep);
border: 1px solid var(--edge);
border-radius: var(--radius);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
padding: 12px 14px;
width: 100%;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input[type="text"]:focus,
input[type="password"]:focus {
border-color: rgba(168, 212, 232, 0.5);
background: #0a1119;
box-shadow: 0 0 0 3px rgba(168, 212, 232, 0.09);
}
input[type="text"]::placeholder,
input[type="password"]::placeholder { color: rgba(125, 153, 173, 0.7); }
.error-msg {
color: #ff8080;
font-size: 0.85rem;
min-height: 18px;
letter-spacing: 0.01em;
}
/* ===========================================================================
BUTTONS — three tiers
Everything used to be one .btn, so Ranked and Options carried identical
weight. Tiers: hero (Ranked only) > primary (filled) > nav row (quiet).
The shared cue is a left "goal light" spine that brightens on hover.
=========================================================================== */
.btn {
position: relative;
border: none;
border-radius: var(--radius);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.09em;
padding: 12px 20px;
text-transform: uppercase;
transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease,
box-shadow 0.16s ease, border-color 0.16s ease;
width: 100%;
/* Fallback so a .btn with no variant class renders as a panel button rather
than the browser's default white — #btn-refresh was doing exactly that. */
background: var(--rink-hi);
color: var(--text);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 4px 14px -4px rgba(62, 134, 232, 0.5);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(180deg, #5698f0 0%, #2e6fc4 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 22px -6px rgba(62, 134, 232, 0.6);
}
.btn-secondary {
background: var(--rink-hi);
color: var(--text);
border: 1px solid var(--edge);
}
.btn-secondary:hover:not(:disabled) {
background: #1b2735;
border-color: rgba(168, 212, 232, 0.28);
}
.btn-gold {
background: linear-gradient(180deg, var(--gold) 0%, #d9a52f 100%);
color: #191203;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 14px -4px var(--gold-glow);
}
.btn-gold:hover:not(:disabled) {
background: linear-gradient(180deg, #ffd166 0%, var(--gold) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 24px -6px var(--gold-glow);
}
.btn-ghost {
background: transparent;
color: var(--ice-dim);
border: 1px solid var(--edge);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: rgba(168, 212, 232, 0.3); }
.btn-small { font-size: 0.78rem; padding: 8px 14px; width: auto; letter-spacing: 0.08em; }
.btn-red { background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%); color: #fff; }
.btn-blue { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%); color: #fff; }
.btn-grey { background: var(--rink-hi); color: var(--ice-dim); border: 1px solid var(--edge); }
/* ── Nav row: the quiet tier. Left-aligned label, chevron on the right, gold
spine that grows on hover. Used for the main menu's secondary actions. ── */
.btn-nav {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 16px 13px 18px;
background: linear-gradient(90deg, rgba(20, 30, 44, 0.9) 0%, rgba(12, 19, 31, 0.55) 100%);
border: 1px solid var(--edge);
border-left: 3px solid rgba(168, 212, 232, 0.22);
border-radius: var(--radius);
color: var(--text);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: left;
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease, color 0.16s ease;
}
.btn-nav .nav-icon { flex: none; width: 18px; height: 18px; color: var(--ice-cool); transition: color 0.16s ease; }
.btn-nav .nav-label { flex: 1; }
/* Chevron stays last even when a row adds a trailing tag via ::after. */
.btn-nav .nav-chevron { order: 9; }
/* Live lobby / game counts on the Browse row. */
.nav-badges { display: flex; gap: 6px; }
.nav-badge {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
white-space: nowrap;
}
.nav-badge--open { color: #8be0a4; background: rgba(63, 185, 107, 0.16); border: 1px solid rgba(63, 185, 107, 0.3); }
.nav-badge--live { color: #9ccbff; background: rgba(62, 134, 232, 0.16); border: 1px solid rgba(62, 134, 232, 0.35); }
.nav-badge--queue { color: #f4d27a; background: rgba(242, 193, 78, 0.16); border: 1px solid rgba(242, 193, 78, 0.4); }
/* Live matchmaking-queue count on the Ranked hero row. */
.hero-badges { display: flex; flex: none; gap: 6px; }
.btn-nav .nav-chevron {
flex: none;
width: 14px;
height: 14px;
color: rgba(125, 153, 173, 0.6);
transition: transform 0.16s ease, color 0.16s ease;
}
.btn-nav:hover {
background: linear-gradient(90deg, rgba(30, 43, 60, 0.95) 0%, rgba(16, 25, 38, 0.6) 100%);
border-color: rgba(168, 212, 232, 0.26);
border-left-color: var(--gold);
transform: translateX(2px);
}
.btn-nav:hover .nav-icon { color: var(--gold); }
.btn-nav:hover .nav-chevron { color: var(--gold); transform: translateX(3px); }
.btn-nav:active { transform: translateX(0); }
/* ── Hero: Ranked only. Everything about it is bigger — height, type, the spine
and a gold wash — so the primary action never competes with the rest. ── */
.btn-hero {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 20px 22px;
background:
linear-gradient(90deg, rgba(242, 193, 78, 0.14) 0%, rgba(242, 193, 78, 0.03) 42%, transparent 75%),
linear-gradient(180deg, var(--rink-hi) 0%, #101927 100%);
border: 1px solid rgba(242, 193, 78, 0.3);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
color: var(--text);
text-align: left;
cursor: pointer;
overflow: hidden;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.14s ease, box-shadow 0.2s ease;
}
.btn-hero .hero-icon { flex: none; width: 30px; height: 30px; color: var(--gold); }
.btn-hero .hero-text { flex: 1; min-width: 0; }
.btn-hero .hero-title {
display: block;
font-family: var(--font-menu-display);
font-size: 1.5rem;
line-height: 1.04;
letter-spacing: 0.005em;
color: var(--ice-bright);
}
.btn-hero .hero-sub {
display: block;
margin-top: 5px;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-hero .hero-chevron { flex: none; width: 20px; height: 20px; color: var(--gold); transition: transform 0.18s ease; }
.btn-hero:hover {
background:
linear-gradient(90deg, rgba(242, 193, 78, 0.22) 0%, rgba(242, 193, 78, 0.06) 42%, transparent 75%),
linear-gradient(180deg, #1a2536 0%, #131d2c 100%);
border-color: rgba(242, 193, 78, 0.55);
box-shadow: 0 10px 34px -12px var(--gold-glow);
transform: translateY(-2px);
}
.btn-hero:hover .hero-chevron { transform: translateX(4px); }
.btn-hero:active { transform: translateY(0); }
/* ===========================================================================
LOGIN SCREEN
=========================================================================== */
.login-card { max-width: 400px; gap: 12px; }
.login-brand { margin-bottom: 14px; text-align: center; }
.login-brand .tagline { margin-bottom: 14px; }
.login-card .logo-zealot { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
/* ===========================================================================
MAIN MENU
Two rails: identity on the left, actions on the right. The eight identical
stacked buttons this replaces gave Ranked and Options the same weight.
=========================================================================== */
.menu-shell {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(340px, 420px);
gap: clamp(32px, 5vw, 72px);
align-items: center;
width: 100%;
max-width: 900px;
padding: 24px;
max-height: 100dvh;
}
.menu-brand {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.menu-actions {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.menu-nav { display: flex; flex-direction: column; gap: 7px; }
/* ── Identity card ──
Name, region and whatever ranked/stats data the client already has. Rows are
hidden rather than showing "—" when a value hasn't loaded. */
.identity-card { padding: 16px 18px; }
.identity-top { display: flex; align-items: center; gap: 12px; }
/* The profile crest that used to sit here was removed: with the tier badge on
the rank row carrying the card's visual identity, a generic user glyph was
just noise. The name leads on its own. */
/* Tier badge. An extracted PNG built by tierBadgeHTML() in tier-badges.js —
the artwork carries its own colour, so there is nothing to theme here.
width/height come from attributes; object-fit guards against a non-square
source sneaking in and stretching. */
.tier-badge {
display: inline-block;
vertical-align: -0.28em;
flex: none;
object-fit: contain;
}
.intro-player-name .tier-badge { margin-right: 6px; }
/* Flex-centred on the awards card, so the global baseline nudge would push them off. */
.awards-mvp .tier-badge,
.awards-row .tier-badge { vertical-align: baseline; }
/* The badge is its own artwork, so the crest drops the framing it used to give
the generic user glyph. */
.identity-who { flex: 1; min-width: 0; }
.identity-name {
margin: 0;
font-family: var(--font-menu-display);
font-size: 1.15rem;
line-height: 1.15;
color: var(--ice-bright);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.identity-region { margin: 3px 0 0; font-size: 0.68rem; }
.identity-region:empty { display: none; }
.identity-signout {
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
background: transparent;
border: 1px solid var(--edge);
border-radius: var(--radius);
color: var(--ice-dim);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.identity-signout:hover { color: #ff9a92; border-color: rgba(226, 69, 63, 0.5); background: rgba(226, 69, 63, 0.08); }
/* ── Rank progress ──
Tier name, XP bar, and the named next reward. Gold reads as "reward track",
matching the Ranked hero tile. */
.identity-rank {
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid var(--edge);
}
.identity-rank[hidden] { display: none; }
.identity-rank-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 7px;
}
/* Badge + tier name read as one unit, so they sit tight together and the XP
count keeps the far side. Centre-aligned against a baseline-aligned row. */
.identity-rank-badge {
flex: none;
align-self: center;
display: inline-flex;
margin-right: -2px;
}
/* Sized here as well as by the width/height attributes: the celebration repaints this element
during a rank-up, and a CSS floor means the badge can never end up a different size than the
one the menu drew. */
.identity-rank-badge .tier-badge { width: 46px; height: 46px; }
.identity-rank-badge:empty { display: none; }
.identity-rank-head .identity-rank-label { margin-right: auto; }
.identity-rank-label {
font-family: var(--font-menu-display);
font-size: 1.18rem;
letter-spacing: 0.01em;
/* Green, matching the bar beneath it and the +XP pop: rank IS the XP track. Gold is reserved
for credits, so having the division name in gold read as a currency label. */
color: var(--xp-green);
}
/* The post-match animation retypes this every frame while the bar climbs. It is a flex item in
a space-between row, so without a stable width the badge and tier name shuffle sideways on
every tick — read as the whole bar being jumpy. tabular-nums fixes the digit width; min-width
absorbs a digit count changing (99 -> 100). */
.identity-rank-xp {
font-variant-numeric: tabular-nums;
min-width: 11ch;
text-align: right;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.76rem;
letter-spacing: 0.06em;
color: var(--ice-bright);
white-space: nowrap;
}
.identity-rank-track {
height: 6px;
border-radius: 3px;
background: var(--rink-deep);
border: 1px solid var(--edge);
overflow: hidden;
}
.identity-rank-fill {
height: 100%;
width: 0;
border-radius: 3px;
background: linear-gradient(90deg, var(--xp-green-deep), var(--xp-green));
/* Slow enough to read as filling, not snapping — the end-of-match award
animates this same bar (via transform; see setFill in game.js). */
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
backface-visibility: hidden; /* keeps the scaled edge from shimmering on subpixel steps */
}
.identity-rank-next {
margin: 7px 0 0;
font-size: 0.76rem;
line-height: 1.35;
color: var(--ice-bright);
}
.identity-rank-next:empty { display: none; }
.identity-stats {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 2px;
margin: 14px 0 0;
}
.identity-stats:not(:has(.identity-stat:not([hidden]))) { display: none; }
.identity-stat {
padding: 9px 10px;
background: var(--rink-deep);
border-radius: var(--radius);
border-top: 1px solid var(--edge);
text-align: center;
}
.identity-stat[hidden] { display: none; }
.identity-stat dt {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.66rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ice-bright);
}
.identity-stat dd {
margin: 3px 0 0;
font-family: var(--font-menu-display);
font-size: 1.2rem;
line-height: 1;
color: var(--ice-bright);
}
.identity-stat--gold dd { color: var(--gold); }
/* ── Menu responsive ──
Collapses on narrow OR short viewports, because the failure mode we care
about is a 720p-tall window, not a narrow one. */
@media (max-width: 900px), (max-height: 640px) {
.menu-shell {
grid-template-columns: minmax(0, 440px);
justify-content: center;
gap: 20px;
align-content: center;
overflow-y: auto;
}
.menu-brand { gap: 14px; text-align: center; }
.menu-brand .logo { text-align: center; }
.menu-brand .logo-hockey::before {
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.menu-footer { order: 3; }
.menu-region-switch { order: 4; align-self: center; }
}
/* Short-but-wide (720p windows, Steam Deck docked): tighten instead of scroll. */
@media (max-height: 780px) and (min-width: 901px) {
.menu-shell { gap: 40px; }
.btn-hero { padding: 15px 20px; }
.btn-hero .hero-title { font-size: 1.3rem; }
.btn-nav { padding: 10px 14px 10px 16px; }
.menu-nav { gap: 6px; }
.identity-card { padding: 13px 15px; }
.menu-brand { gap: 18px; }
}
/* ===========================================================================
TOP BANNERS + BROWSER GATE
Were fully inline-styled, so they picked up none of the theme.
Visibility is still toggled from game.js showScreen('menu') — classes here
only cover appearance.
=========================================================================== */
.top-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9996;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px 14px;
padding: 9px 16px;
font-size: 0.86rem;
line-height: 1.4;
text-align: center;
border-bottom: 1px solid;
backdrop-filter: blur(6px);
}
#ios-add-to-home-banner { z-index: 9997; }
.top-banner--tip { background: rgba(18, 40, 26, 0.94); color: #cfe9d6; border-bottom-color: rgba(63, 185, 107, 0.35); }
.top-banner--warn { background: rgba(58, 16, 15, 0.95); color: #f6d8d6; border-bottom-color: rgba(226, 69, 63, 0.5); }
.top-banner--info { background: rgba(10, 24, 40, 0.95); color: #c6dcee; border-bottom-color: rgba(62, 134, 232, 0.4); }
.top-banner strong { font-weight: 600; color: #fff; }
.top-banner-cta {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none;
padding: 4px 12px;
border-radius: var(--radius);
white-space: nowrap;
transition: filter 0.15s;
}
.top-banner--warn .top-banner-cta { background: var(--red); color: #fff; }
.top-banner--info .top-banner-cta { background: rgba(62, 134, 232, 0.25); color: #9ccbff; border: 1px solid rgba(62, 134, 232, 0.5); }
.top-banner-cta:hover { filter: brightness(1.15); }
.top-banner-dismiss {
background: none;
border: 1px solid currentColor;
border-radius: var(--radius);
color: inherit;
opacity: 0.7;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.76rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 10px;
cursor: pointer;
transition: opacity 0.15s;
}
.top-banner-dismiss:hover { opacity: 1; }
.gate-notice {
margin-top: 4px;
padding: 16px 18px;
background: rgba(58, 16, 15, 0.5);
border: 1px solid rgba(226, 69, 63, 0.4);
border-left: 3px solid var(--red);
border-radius: var(--radius);
color: #f6d8d6;
}
.gate-notice-title {
margin: 0 0 6px;
font-family: var(--font-menu-display);
font-size: 1rem;
color: #ffd9d6;
}
.gate-notice-body { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.5; }
.gate-notice-cta { display: block; text-align: center; text-decoration: none; padding: 10px 16px; }
/* ===========================================================================
MENU MUSIC WIDGET
Deliberately quiet: at rest it's a speaker glyph and the track name in muted
text, so it doesn't compete with the menu. It opens on hover/focus, and
announces itself for a few seconds when a track changes. Sits under any top
banner via --top-banner-offset, which game.js keeps in sync.
=========================================================================== */
.music-widget {
position: fixed;
top: calc(var(--top-banner-offset, 0px) + 14px);
/* Sits to the LEFT of the global chat dock rather than on top of it. The offset is 0
whenever the dock is hidden or collapsed, so this is exactly the old position then. */
right: calc(14px + var(--chat-dock-offset, 0px));
transition: right 0.18s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
z-index: 9995;
width: max-content;
max-width: 260px;
border-radius: var(--radius);
border: 1px solid transparent;
background: transparent;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* ── Resting handle ── */
.music-widget-handle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
background: none;
border: none;
border-radius: var(--radius);
color: var(--ice-dim);
font-family: var(--font-data);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.06em;
cursor: pointer;
opacity: 0.62;
transition: opacity 0.2s ease, color 0.2s ease;
}
.music-widget-handle .ui-icon { width: 15px; height: 15px; }
.music-widget-now {
max-width: 168px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Open: the panel carries the track name, so drop it from the handle rather than
printing the same title twice. Fixed width while open keeps it from jittering
as titles of different lengths come and go. */
.music-widget:hover,
.music-widget:focus-within,
.music-widget.is-open { width: 236px; }
.music-widget:hover .music-widget-now,
.music-widget:focus-within .music-widget-now,
.music-widget.is-open .music-widget-now { display: none; }
/* One speaker glyph or the other, never both. */
.music-widget-speaker-off { display: none; }
.music-widget.is-muted .music-widget-speaker { display: none; }
.music-widget.is-muted .music-widget-speaker-off { display: block; }
.music-widget.is-muted .music-widget-now { display: none; }
/* ── Open: hover, keyboard focus, or the post-track-change announce ── */
.music-widget:hover,
.music-widget:focus-within,
.music-widget.is-open {
background: var(--rink);
border-color: var(--edge);
box-shadow: var(--shadow-panel);
}
.music-widget:hover .music-widget-handle,
.music-widget:focus-within .music-widget-handle,
.music-widget.is-open .music-widget-handle { opacity: 1; color: var(--text); }
.music-widget-panel {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.24s ease, opacity 0.2s ease;
opacity: 0;
}
.music-widget:hover .music-widget-panel,
.music-widget:focus-within .music-widget-panel,
.music-widget.is-open .music-widget-panel { grid-template-rows: 1fr; opacity: 1; }
.music-widget-panel > * { min-height: 0; }
/* Padding lives on the inner wrapper so the collapsed state is truly 0 height. */
.music-widget-panel-inner { overflow: hidden; }
.music-widget-eyebrow {
margin: 0 12px;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.62rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
}
.music-widget-title {
margin: 4px 12px 0;
font-family: var(--font-menu-display);
font-size: 0.92rem;
line-height: 1.2;
color: var(--ice-bright);
overflow-wrap: anywhere;
}
.music-widget-artist {
margin: 2px 12px 0;
font-size: 0.78rem;
line-height: 1.3;
color: var(--ice-dim);
overflow-wrap: anywhere;
}
.music-widget-artist:empty { display: none; }
/* ── Volume ── */
.music-widget-vol {
display: flex;
align-items: center;
gap: 8px;
margin: 11px 12px 0;
}
.music-widget-vol input[type="range"] {
appearance: none;
-webkit-appearance: none;
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--rink-deep);
border: 1px solid var(--edge);
cursor: pointer;
}
.music-widget-vol input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--ice);
border: 2px solid #0a1119;
box-shadow: 0 0 0 1px var(--edge-hi);
cursor: pointer;
transition: background 0.15s;
}
.music-widget-vol input[type="range"]:hover::-webkit-slider-thumb { background: var(--gold); }
.music-widget-vol input[type="range"]::-moz-range-thumb {
width: 11px; height: 11px; border-radius: 50%;
background: var(--ice); border: 2px solid #0a1119; cursor: pointer;
}
.music-widget-vol-val {
min-width: 34px;
text-align: right;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.76rem;
color: var(--gold);
}
/* ── Buttons ── */
.music-widget-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin: 9px 12px 11px;
}
.music-widget-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 8px;
background: var(--rink-hi);
border: 1px solid var(--edge);
border-radius: var(--radius);
color: var(--ice-dim);
font-family: var(--font-data);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.music-widget-btn .ui-icon { width: 12px; height: 12px; }
.music-widget-btn:hover { color: var(--text); border-color: rgba(168, 212, 232, 0.32); background: #1b2735; }
/* Screen-reader-only label for the volume input. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Narrow windows: the widget would crowd centered content, so drop the track
name and leave just the speaker. */
@media (max-width: 900px) {
.music-widget-now { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.music-widget, .music-widget-panel { transition: none; }
}
/* Menu/lobby ping readout. Was inline-styled. */
.menu-ping-display {
position: fixed;
top: 8px;
left: 8px;
z-index: 9999;
padding: 3px 8px;
border-radius: var(--radius);
background: rgba(6, 10, 17, 0.6);
border: 1px solid var(--edge);
color: var(--ice-dim);
font-family: var(--font-data);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.08em;
pointer-events: none;
}
/* Browser Screen */
.browser-container {
background: var(--rink);
border: 1px solid var(--edge);
border-top: 2px solid var(--edge-hi);
border-radius: var(--radius);
width: min(760px, 95vw);
max-height: calc(100dvh - 48px);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-panel);
overflow-x: hidden;
overflow-y: auto;
}
.browser-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
border-bottom: 1px solid var(--edge);
background: linear-gradient(180deg, rgba(168, 212, 232, 0.05), transparent);
}
.browser-heading .eyebrow { font-size: 0.66rem; margin-bottom: 3px; }
.browser-header h2 {
font-family: var(--font-menu-display);
font-size: 1.4rem;
line-height: 1;
letter-spacing: 0.01em;
color: var(--ice-bright);
}
.header-actions { display: flex; gap: 8px; }
.lobby-list {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.lobby-list::-webkit-scrollbar { width: 6px; }
.lobby-list::-webkit-scrollbar-track { background: transparent; }
.lobby-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.empty-state {
color: var(--ice-dim);
text-align: center;
padding: 36px 16px;
font-size: 0.92rem;
}
.lobby-item {
background: var(--rink-hi);
border: 1px solid var(--edge);
border-left: 3px solid rgba(168, 212, 232, 0.22);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 13px 16px;
cursor: pointer;
transition: border-color 0.16s, background 0.16s, transform 0.12s;
}
.lobby-item:hover {
border-color: rgba(168, 212, 232, 0.3);
border-left-color: var(--gold);
background: #1b2735;
transform: translateX(2px);
}
.lobby-item-name {
font-family: var(--font-menu-display);
font-size: 1rem;
letter-spacing: 0.01em;
color: var(--ice-bright);
}
.lobby-item-info {
color: var(--ice-dim);
font-family: var(--font-data);
font-size: 0.86rem;
letter-spacing: 0.05em;
margin-top: 3px;
}
.lobby-item-btn { flex-shrink: 0; }
.menu-activity-hint {
color: var(--muted);
font-size: 0.82rem;
text-align: center;
margin: 4px 0 0;
min-height: 1.2em;
}
/* Players-online line, sits just above the "Created by Eric" footer. */
.menu-online-status {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-family: var(--font-data);
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--muted);
}
.menu-online-status[hidden] { display: none; }
.menu-online-status .online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #3fb96b;
box-shadow: 0 0 8px rgba(63, 185, 107, 0.85);
animation: online-pulse 2.4s ease-in-out infinite;
}
@keyframes online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Over the video backdrop the dim footer lines vanish: give them a small dark glass chip and
brighter text (only while a clip is showing — the snow field is dark enough without). */
#screen-menu.menu-video-on .menu-online-status,
#screen-menu.menu-video-on .menu-footer {
width: fit-content;
padding: 5px 11px;
border-radius: 6px;
background: rgba(5, 9, 16, 0.66);
border: 1px solid rgba(125, 153, 173, 0.18);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#screen-menu.menu-video-on .menu-online-status { color: #c9d6e2; }
#screen-menu.menu-video-on .menu-footer { margin-top: 6px; color: rgba(190, 210, 226, 0.88); }
#screen-menu.menu-video-on .menu-version { color: rgba(160, 186, 206, 0.72); }
#screen-menu.menu-video-on .menu-region-switch { background: rgba(5, 9, 16, 0.66); color: rgba(190, 210, 226, 0.88); }
/* Asset-preload bar along the very bottom: a centered "Loading sounds… 35%"
caption above a chunky gold progress line, on a soft dark band so it clearly
reads as loading without covering the menu. */
.asset-preload {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
pointer-events: none;
padding-top: 14px;
background: linear-gradient(to top, rgba(6, 12, 20, 0.9), rgba(6, 12, 20, 0));
transition: opacity 0.4s ease;
}
.asset-preload[hidden] { display: none; }
.asset-preload.is-fading { opacity: 0; }
.asset-preload-row {
display: flex;
justify-content: center;
align-items: baseline;
gap: 10px;
padding: 0 12px 7px;
font-family: var(--font-data);
font-size: 1.02rem;
letter-spacing: 0.03em;
color: rgba(210, 232, 248, 0.95);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.asset-preload-label { font-weight: 600; }
.asset-preload-pct {
color: var(--gold);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.asset-preload-track {
width: 100%;
height: 7px;
background: rgba(255, 255, 255, 0.12);
}
.asset-preload-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--gold), #ffe9a8);
box-shadow: 0 0 14px rgba(242, 193, 78, 0.8);
transition: width 0.25s ease;
}
.browser-section {
border-bottom: 1px solid var(--border);
}
.browser-section:last-of-type {
border-bottom: none;
}
.browser-section-title {
font-family: var(--font-data);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--ice-cool);
padding: 14px 16px 6px;
margin: 0;
}
.browser-section-hint {
font-family: var(--font-body);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--ice-dim);
font-size: 0.78rem;
}
.browser-live-note {
font-size: 0.75rem;
color: var(--muted);
padding: 0 16px 12px;
margin: 0;
opacity: 0.9;
}
.active-game-item {
background: var(--rink-hi);
border: 1px solid var(--edge);
border-left: 3px solid var(--red);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
}
.active-game-item-main { min-width: 0; flex: 1; }
.active-game-score {
flex-shrink: 0;
font-size: 1.35rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.active-game-score .score-red { color: var(--red); }
.active-game-score .score-blue { color: var(--blue); }
.active-game-score .score-sep {
color: var(--muted);
margin: 0 4px;
font-weight: 600;
}
.browser-container .lobby-list {
flex: none;
max-height: min(280px, 38vh);
}
/* Lobby Room Screen */
.lobby-room {
background: var(--rink);
border: 1px solid var(--edge);
border-top: 2px solid var(--edge-hi);
border-radius: var(--radius);
width: min(940px, 95vw);
max-height: calc(100dvh - 40px);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-panel);
overflow: visible;
}
.lobby-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
}
.lobby-header h2 { font-size: 1.1rem; }
.teams-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
flex: 1;
overflow: visible;
}
/* Team columns carry their own color at the top edge — the rink's own coding,
so you can tell the three columns apart before reading a word. */
.team-column {
padding: 14px 16px 16px;
border-right: 1px solid var(--edge);
border-top: 2px solid transparent;
display: flex;
flex-direction: column;
overflow: visible;
}
.team-column:last-child { border-right: none; }
#team-red { border-top-color: var(--red); background: linear-gradient(180deg, rgba(226, 69, 63, 0.06), transparent 120px); }
#team-blue { border-top-color: var(--blue); background: linear-gradient(180deg, rgba(62, 134, 232, 0.06), transparent 120px); }
#team-spectator { border-top-color: rgba(168, 212, 232, 0.3); }
.team-header {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-data);
font-weight: 600;
font-size: 0.86rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 12px;
color: var(--ice-cool);
}
.team-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.team-dot.red { background: var(--red); }
.team-dot.blue { background: var(--blue); }
.team-dot.grey { background: #555; }
.player-list {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
flex: 1;
}
.player-chip {
background: var(--rink-hi);
border: 1px solid var(--edge);
border-radius: var(--radius);
padding: 10px 12px;
}
/* ── Team XP boost ──
A team boost pays everyone in the match but charges only its owner, so the
roster marks who is covering it. Cyan rather than team blue — see --boost. */
.player-chip--teamboost {
border-color: var(--boost);
box-shadow: 0 0 0 1px var(--boost-glow), 0 0 14px -2px var(--boost-glow);
background:
linear-gradient(180deg, rgba(90, 217, 240, 0.10), rgba(90, 217, 240, 0)) ,
var(--rink-hi);
}
.player-chip-boost {
flex: none;
font-family: var(--font-data);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.12em;
white-space: nowrap;
color: var(--boost);
background: var(--boost-deep);
border: 1px solid var(--boost-glow);
border-radius: 3px;
padding: 2px 6px;
}
.lobby-boost-banner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
margin-bottom: 10px;
padding: 8px 12px;
font-family: var(--font-body);
font-size: 0.84rem;
color: var(--ice);
background: linear-gradient(90deg, rgba(90, 217, 240, 0.14), rgba(90, 217, 240, 0.03));
border: 1px solid var(--boost-glow);
border-left: 3px solid var(--boost);
border-radius: var(--radius);
}
.lobby-boost-line { display: flex; align-items: center; gap: 9px; }
.lobby-boost-banner strong { color: var(--boost); font-weight: 700; }
.lobby-boost-banner-icon { color: var(--boost); font-size: 1rem; line-height: 1; }
/* Your own boost is green, matching its chip on the menu card and separating
"what you bought" from "what the room is getting". */
.lobby-boost-line--mine strong,
.lobby-boost-line--mine .lobby-boost-banner-icon { color: var(--xp-green); }
.player-chip-boost--personal {
color: var(--xp-green);
background: #0a2418;
border-color: rgba(110, 232, 154, 0.35);
}
/* Results chip: same shape as the first-match-of-day one, cyan instead of green. */
.end-progress-bonus--boost {
color: #06222b;
background: var(--boost);
}
/* Menu identity card: your own active boosts, counting down. */
.identity-boosts {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.identity-boost {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 3px 8px;
border-radius: 3px;
font-family: var(--font-data);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--boost-deep);
border: 1px solid var(--boost-glow);
}
.identity-boost-name { font-weight: 700; color: var(--boost); }
.identity-boost-left { color: var(--ice-bright); letter-spacing: 0.04em; }
.identity-boost--xp { border-color: rgba(110, 232, 154, 0.35); background: #0a2418; }
.identity-boost--xp .identity-boost-name { color: var(--xp-green); }
/* Last match on the clock: say it in the colour that means "act now". */
.identity-boost--last { border-color: var(--gold); }
.identity-boost--last .identity-boost-left { color: var(--gold); }
/* ── Goalie bot tier picker (lobby) ──
Built in game.js and appended to , so it can't inherit the lobby panel's
styles — it needs its own rules rather than the inline CSS it used to carry. */
.bot-goalie-dropdown {
position: fixed;
z-index: 9999;
min-width: 190px;
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--rink);
border: 1px solid var(--edge);
border-top: 2px solid var(--edge-hi);
border-radius: var(--radius);
box-shadow: var(--shadow-modal);
}
.bot-goalie-option {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 9px 11px;
background: transparent;
border: none;
border-radius: 3px;
color: var(--text);
text-align: left;
cursor: pointer;
transition: background 0.14s, color 0.14s;
}
.bot-goalie-option:hover { background: rgba(168, 212, 232, 0.09); }
.bot-goalie-option-name {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bot-goalie-option-note {
font-family: var(--font-data);
font-weight: 600;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ice-dim);
}
/* Easiest reads green, hardest gold — the difficulty is legible before the label. */
.bot-goalie-option:first-child .bot-goalie-option-note { color: var(--green); }
.bot-goalie-option:last-child .bot-goalie-option-note { color: var(--gold); }
.player-chip-bot {
border-left: 3px solid rgba(255, 220, 60, 0.7);
background: rgba(255, 220, 60, 0.05);
}
.player-chip-name {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 10px;
}
/* Name-only chip: nothing under it to separate from. */
.player-chip-name:last-child { margin-bottom: 0; }
.player-chip-name-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ranked chip: the badge owns a fixed right-hand gutter and is centred on the WHOLE chip,
so it stays put whether the chip is just a name or a name plus the host's team/kick row.
Out of flow on purpose — in flow it centred on the name row and rode the top edge. The
fixed gutter is also what lines the badges up down the roster, whatever the name lengths. */
.player-chip { position: relative; }
.player-chip--ranked {
padding-right: 74px;
min-height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
.player-chip-rank {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
line-height: 0;
}
/* width/height attributes on the ![]()
already reserve the space; these are the render
size and a guard for a chip squeezed narrower than its gutter. */
.player-chip-rank .tier-badge {
vertical-align: middle;
width: 50px;
height: 50px;
max-width: 100%;
}
.player-chip-name--promote-host {
cursor: context-menu;
border-radius: 4px;
outline-offset: 2px;
}
.player-chip-name--promote-host:hover {
background: rgba(255, 255, 255, 0.06);
}
.lobby-host-context-menu {
position: fixed;
/* Above the chat dock (9994), the music widget (9995) and the ping display (9999).
At 2500 this menu opened UNDERNEATH the dock — the roster right-click looked like it
did nothing at all, because the menu was rendering behind the panel it was opened
from. A context menu belongs on top of whatever it was summoned over. */
z-index: 10050;
min-width: 168px;
padding: 4px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.lobby-host-context-menu-item {
display: block;
width: 100%;
margin: 0;
padding: 10px 12px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 0.88rem;
font-weight: 600;
text-align: left;
cursor: pointer;
}
/* Shown rather than hidden when unavailable — "Invite to Game" greyed with a reason is
more useful than a menu whose items move around depending on where you are. */
.lobby-host-context-menu-item[disabled] {
opacity: 0.42;
cursor: default;
}
.lobby-host-context-menu-item[disabled]:hover { background: transparent; color: var(--text); }
.lobby-host-context-menu-item:hover {
background: rgba(76, 143, 227, 0.22);
color: #e6edf7;
}
.chip-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-actions .btn {
font-size: 0.7rem;
padding: 4px 10px;
width: auto;
direction: ltr;
unicode-bidi: isolate;
}
.lobby-status {
padding: 12px 24px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 0.85rem;
text-align: center;
}
/* Game Screen */
.game-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
gap: 0;
background: var(--bg);
overflow: hidden;
}
#game-content {
display: flex;
flex-direction: column;
align-items: center;
transform-origin: center center;
}
/* Fullscreen (desktop): bounding box is logical rink only; HUD + shot clock sit over the top of the ice
so scale uses 16:9 and fills 16:9 displays without side letterboxing. Width/height set in game.js. */
#game-content.fullscreen-stack-as-overlay {
display: block;
position: relative;
flex: none;
align-items: stretch;
max-width: none;
box-sizing: border-box;
}
#game-content.fullscreen-stack-as-overlay .hud {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: none;
z-index: 25;
border-radius: 10px 10px 0 0;
}
#game-content.fullscreen-stack-as-overlay #shot-clock-bar {
position: absolute;
top: var(--fs-hud-h, 48px);
left: 0;
width: 100%;
max-width: none;
z-index: 24;
}
#game-content.fullscreen-stack-as-overlay .canvas-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
aspect-ratio: unset;
}
.hud {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
background: var(--panel);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 10px 10px 0 0;
width: min(1173px, 100vw);
/* More top room and extra right padding so HUD buttons don't overlap scores. */
padding: 4px 72px 6px 24px;
position: relative;
}
.btn-fullscreen {
position: absolute;
right: 10px;
/* Place controls in the seam between HUD and rink (not over score text). */
top: calc(100% + 4px);
z-index: 20;
background: var(--panel2);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-size: 1rem;
cursor: pointer;
padding: 3px 7px;
line-height: 1;
transition: color 0.15s, border-color 0.15s;
}
.btn-fullscreen:hover { color: var(--text); border-color: var(--blue); }
.btn-game-menu {
position: absolute;
right: 44px;
/* Place controls in the seam between HUD and rink (not over score text). */
top: calc(100% + 4px);
z-index: 20;
background: var(--panel2);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--muted);
cursor: pointer;
font-size: 1.1rem;
padding: 3px 8px;
line-height: 1;
transition: color 0.15s, border-color 0.15s;
}
.btn-game-menu:hover { color: var(--text); border-color: var(--blue); }
.game-menu-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
display: flex;
align-items: center;
justify-content: center;
/* Above .game-intro-overlay (55) AND .pause-overlay (60) — the menu (and Options from it)
must stay reachable while the game is paused. */
z-index: 70;
}
.game-menu-overlay.hidden { display: none; }
.game-menu-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 48px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 260px;
align-items: center;
}
.game-menu-card h2 { font-size: 1.6rem; font-family: var(--font-menu-display); letter-spacing: 3px; margin-bottom: 6px; }
.game-menu-main.hidden { display: none !important; }
.game-menu-vote-kick-panel { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 280px; max-width: 360px; }
.game-menu-vote-kick-panel.hidden { display: none !important; }
.vote-kick-title { font-size: 1.15rem; letter-spacing: 1px; margin: 0; }
.vote-kick-hint { font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.3; }
.vote-kick-player-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.vote-kick-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
}
.vote-kick-row-name { font-size: 0.9rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-kick-row-name.team-red { color: var(--red); }
.vote-kick-row-name.team-blue { color: var(--blue); }
.vote-kick-empty { font-size: 0.85rem; color: var(--muted, #8b949e); padding: 6px 2px; }
/* Report panel. Rows are selectable rather than instant-action: unlike vote-kick,
reporting needs a target AND a reason before anything is sent. */
.report-row { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.report-row:hover { border-color: var(--muted, #8b949e); }
.report-row--on { border-color: var(--red); background: rgba(248, 81, 73, 0.12); }
.report-reason {
width: 100%;
margin-top: 10px;
padding: 8px 10px;
background: var(--panel2);
border: 1px solid var(--border);
border-radius: 6px;
color: inherit;
font: inherit;
font-size: 0.88rem;
resize: vertical;
outline: none;
}
.report-reason:focus { border-color: var(--muted, #8b949e); }
.report-foot { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.report-count { font-size: 0.72rem; color: var(--muted, #8b949e); }
.report-status { font-size: 0.78rem; margin-left: auto; text-align: right; }
.report-status--error { color: var(--red); }
.report-status--ok { color: var(--green); }
.report-actions { display: flex; gap: 8px; margin-top: 10px; }
.report-actions .btn { flex: 1; }
.vote-kick-banner {
position: absolute;
top: 8px;
left: 8px;
z-index: 60;
max-width: min(340px, calc(100% - 16px));
background: rgba(22, 27, 34, 0.95);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.vote-kick-banner.hidden { display: none; }
.vote-kick-banner-text { font-size: 0.85rem; line-height: 1.35; margin-bottom: 8px; color: var(--text); }
.vote-kick-banner-actions { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.vote-kick-banner-actions.hidden { display: none !important; }
.vote-kick-banner-note { font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; min-height: 1em; }
.vote-kick-banner-time { font-size: 0.8rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.btn-danger { background: #7a1a1a; border-color: #c0392b; color: #fff; }
.btn-danger:hover { background: #a02020; border-color: #e74c3c; }
.hud-center {
display: flex;
align-items: center;
gap: 0;
}
.hud-scoreboard {
display: flex;
align-items: center;
gap: 8px;
}
.hud-divider {
width: 1px;
height: 28px;
background: var(--border);
margin: 0 18px;
}
.hud-clock-block {
text-align: center;
}
.hud-period-block {
text-align: center;
display: flex;
flex-direction: column;
line-height: 1.05;
}
.team-label {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 3px;
}
.team-label.red { color: var(--red); }
.team-label.blue { color: var(--blue); }
.score-num {
font-family: var(--font-display);
font-size: 2rem;
color: var(--text);
min-width: 28px;
text-align: center;
}
.score-dash {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--muted);
margin: 0 2px;
}
#game-clock {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--gold);
letter-spacing: 2px;
}
#game-period {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 2px;
color: var(--muted);
text-transform: uppercase;
}
.hud-shot-counter {
margin-top: 1px;
font-size: 0.7rem;
letter-spacing: 0.7px;
color: #9fb0c7;
}
.canvas-container {
position: relative;
width: min(1173px, 100vw);
aspect-ratio: 16 / 9;
flex-shrink: 0;
cursor: crosshair; /* JS swaps in the player's custom cursor; canvases inherit it */
}
#game-canvas {
display: block;
width: 100%;
height: auto;
border-radius: 0 0 10px 10px;
cursor: inherit;
}
#game-canvas:hover { cursor: inherit; }
/* 3D renderer: WebGL fills the rink area; 2D canvas stays for overlay pixels only */
body.renderer-3d-active #game-canvas {
opacity: 0;
pointer-events: none;
position: absolute;
width: 1px;
height: 1px;
left: 0;
top: 0;
overflow: hidden;
}
#game-3d-canvas {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
border-radius: 0 0 10px 10px;
cursor: inherit;
z-index: 1;
object-fit: fill;
}
#game-3d-canvas.active {
display: block;
}
/* Desktop ability row in 3D (matches canvas drawCooldownBox) */
/* ── Spectator Puck Cam toggle ──
Bottom-centre of the rink view. Low-contrast at rest so it reads as chrome
rather than gameplay; it only firms up on hover or when it's actually on. */
/* The row owns the placement; the buttons just sit in it. They were each absolutely
positioned at bottom-centre, so they landed on the same pixel and the later one in the
DOM covered the other. */
.spectator-cam-bar {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 40;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none; /* the bar is only a layout box — clicks belong to the buttons */
}
.spectator-puckcam-btn {
position: relative;
pointer-events: auto;
display: flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
background: rgba(6, 10, 17, 0.55);
border: 1px solid rgba(160, 205, 230, 0.18);
border-radius: 999px;
color: var(--ice-dim);
font-family: var(--font-data);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
opacity: 0.68;
backdrop-filter: blur(4px);
transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.spectator-puckcam-btn .ui-icon { width: 13px; height: 13px; }
.spectator-puckcam-btn:hover {
opacity: 1;
color: var(--text);
border-color: rgba(160, 205, 230, 0.36);
background: rgba(6, 10, 17, 0.78);
}
/* "On" used to be light gold on a 55%-opaque pill: over bright ice the yellow washed out and
an engaged toggle read as off. Now the pill goes near-opaque dark with a saturated green rim
and near-white text, so the state is unmistakable on ice, boards or crowd. */
.spectator-puckcam-btn.active {
opacity: 1;
color: #eafaf1;
border-color: #21a35a;
background: rgba(5, 24, 15, 0.92);
box-shadow: 0 0 0 1px rgba(33, 163, 90, 0.45), 0 2px 12px rgba(0, 0, 0, 0.55);
}
.spectator-puckcam-btn.active:hover {
color: #fff;
border-color: #2bc46d;
background: rgba(7, 32, 20, 0.95);
}
.canvas-container .desktop-ability-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
gap: 8px 10px;
padding: 0 8px;
pointer-events: none;
z-index: 6;
}
.desktop-ability-overlay.hidden {
display: none !important;
}
.canvas-container .stick-zone-hud {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 92px;
pointer-events: none;
z-index: 7;
padding: 6px 8px 4px;
border-radius: 10px;
background: rgba(6, 20, 10, 0.62);
border: 1px solid rgba(70, 200, 110, 0.45);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.canvas-container .stick-zone-hud canvas {
display: block;
width: 110px;
height: 75px;
}
.desktop-ability-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
min-width: 48px;
}
.desktop-ability-box {
position: relative;
width: 44px;
height: 44px;
border-radius: 6px;
box-sizing: border-box;
background: rgba(10, 10, 20, 0.85);
border: 2px solid #555;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.desktop-ability-box[data-state="ready"],
.desktop-ability-box[data-state="active"] {
background: rgba(20, 20, 40, 0.85);
border-color: var(--ability-color, #44ccff);
box-shadow: 0 0 10px color-mix(in srgb, var(--ability-color, #44ccff) 45%, transparent);
}
.desktop-ability-box.unavailable {
opacity: 0.38;
filter: grayscale(0.35);
}
.desktop-ability-fill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
border-radius: 0 0 4px 4px;
pointer-events: none;
}
/* Progress toward an EXTRA charge while the ability is still usable (goalie boost, 1 of 2 held).
Same translucent blue rise the 2D canvas HUD draws; sits above the normal fill. */
.desktop-ability-recharge {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
background: rgba(100, 220, 255, 0.28);
border-radius: 0 0 4px 4px;
pointer-events: none;
}
.desktop-ability-count {
position: absolute;
top: 3px;
right: 4px;
font: 700 11px Impact, sans-serif;
color: var(--ability-color, #44ccff);
text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
z-index: 1;
}
.desktop-ability-key {
position: relative;
z-index: 2;
font: bold 18px Impact, Arial Black, sans-serif;
color: #555;
line-height: 1;
}
.desktop-ability-box[data-state="ready"] .desktop-ability-key,
.desktop-ability-box[data-state="active"] .desktop-ability-key {
font-size: 22px;
font-weight: bold;
color: var(--ability-color, #44ccff);
text-shadow: 0 0 8px var(--ability-color, #44ccff);
}
.desktop-ability-label {
font: 600 10px Segoe UI, system-ui, sans-serif;
color: #0a0a0a;
text-align: center;
max-width: 72px;
line-height: 1.1;
}
.desktop-ability-overlay.desktop-ability-over-black .desktop-ability-label {
color: #f2f6fc;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Desktop shot meters in 3D (aligned with drawShotBars) */
.canvas-container .desktop-shot-overlay {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 118px;
width: min(380px, calc(100% - 24px));
display: flex;
flex-direction: column;
gap: 5px;
pointer-events: none;
z-index: 6;
}
.desktop-shot-overlay.hidden {
display: none !important;
}
.desktop-shot-bar {
box-sizing: border-box;
border-radius: 5px;
background: rgba(0, 0, 0, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 1px;
}
.desktop-shot-bar-power {
height: 20px;
}
.desktop-shot-bar-distance {
height: 13px;
}
.desktop-shot-fill {
height: 100%;
border-radius: 3px;
width: 0%;
min-width: 0;
transition: width 0.04s linear, background 0.04s linear;
}
/* Recenter hints — shared pill */
.canvas-container .third-person-recenter-hint {
position: absolute;
z-index: 8;
border-radius: 999px;
background: rgba(12, 18, 28, 0.88);
border: 1px solid rgba(120, 145, 178, 0.35);
color: var(--text);
text-align: center;
pointer-events: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Third-person chase: above ability row, not dead center */
.canvas-container #third-person-recenter-hint.third-person-recenter-hint {
left: 50%;
top: auto;
bottom: calc(86px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
max-width: min(520px, calc(100% - 24px));
padding: 9px 18px;
font-size: 0.97rem;
font-weight: 600;
line-height: 1.35;
}
/* Regular pan/zoom: large, true viewport center of rink area */
.canvas-container #regular-view-recenter-hint.third-person-recenter-hint {
left: 50%;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
max-width: min(720px, calc(100% - 40px));
padding: clamp(18px, 3.5vw, 28px) clamp(28px, 5vw, 48px);
font-size: clamp(1.35rem, 3.5vw, 2.05rem);
font-weight: 700;
line-height: 1.3;
}
.canvas-container .third-person-recenter-hint.hidden {
display: none !important;
}
.recenter-hint-inner {
color: var(--muted);
}
#regular-view-recenter-hint .recenter-hint-inner {
color: var(--text);
font-size: 1em;
}
.recenter-kbd {
display: inline-block;
padding: 2px 8px;
margin: 0 2px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--panel2);
color: var(--text);
font-size: 0.8em;
font-family: ui-monospace, Consolas, monospace;
font-weight: 600;
}
#regular-view-recenter-hint .recenter-kbd {
padding: 0.2em 0.55em;
font-size: 0.72em;
vertical-align: middle;
}
#third-person-recenter-hint .recenter-kbd {
font-size: 0.7em;
}
/* Ping / hint — lives IN the scoreboard bar, top-left, same plane as the other HUD text */
/* Left end of the HUD bar: the ping readout, then the Quick Match invite button. One
absolutely-positioned row rather than two absolute elements, so the button always lands
just past the ping text — "Ping: 123 ms · Germany" is far wider than the F1 hint, and a
fixed offset would have them overlap on the longer string. Absolute (not an in-flow flex
child) because .hud centres its only in-flow child: adding one here would shove the
scoreboard off-centre. */
.hud-left {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
pointer-events: none; /* layout box only — clicks belong to the button inside it */
z-index: 2; /* over the bar, under the absolutely-placed HUD buttons */
}
.hud-ping {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 1px;
color: #fff;
white-space: nowrap;
pointer-events: none;
}
/* Goal Banner */
.goal-banner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-size: 3.85rem;
letter-spacing: 3px;
/* Black outline (matches player-name stroke) + colored glow */
text-shadow:
-3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
-3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
0 0 30px currentColor, 0 4px 12px rgba(0,0,0,0.8);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
white-space: pre-line;
line-height: 1.05;
text-align: center;
}
.goal-banner.show { opacity: 1; animation: goalPop 0.3s ease-out; }
.goal-banner.hidden { display: none; }
.goal-banner.goal-red { color: var(--red); }
.goal-banner.goal-blue { color: var(--blue); }
.goal-banner.goal-own { color: #f07820; }
/* Boss down. Same green as the checkpoint word (.gnt-cp-word) — the two land 900ms apart
and both mean "that is banked", so they read as one beat rather than two systems. */
.goal-banner.gnt-green { color: #6cf59b; }
@keyframes goalPop {
0% { transform: translate(-50%, -50%) scale(0.5); }
60% { transform: translate(-50%, -50%) scale(1.1); }
100% { transform: translate(-50%, -50%) scale(1); }
}
/* Goal banner must paint above 3D canvas (z-index 1) and its overlay canvas (z-index 3) */
.goal-banner { z-index: 4; }
/* Hat trick: bigger pop-in + pulsing gold glow layered over the team color */
.goal-banner.show.goal-hattrick {
animation: goalPopBig 0.45s ease-out, hatTrickGlow 0.8s ease-in-out 0.45s infinite alternate;
}
@keyframes goalPopBig {
0% { transform: translate(-50%, -50%) scale(0.35); }
55% { transform: translate(-50%, -50%) scale(1.18); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes hatTrickGlow {
from {
text-shadow:
-3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
-3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
0 0 26px currentColor, 0 0 34px rgba(212, 175, 55, 0.5), 0 4px 12px rgba(0,0,0,0.8);
}
to {
text-shadow:
-3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
-3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
0 0 34px currentColor, 0 0 64px rgba(255, 224, 138, 0.95), 0 4px 12px rgba(0,0,0,0.8);
}
}
/* Faceoff countdown — DOM overlay used in 3D mode (2D mode draws on canvas) */
.countdown-overlay {
position: absolute;
pointer-events: none;
z-index: 4;
font: 88px/1 var(--font-display);
color: #44ee44;
/* Black outline (matches player-name stroke) + green glow */
text-shadow:
-3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
-3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
0 0 20px #44ee44;
text-align: center;
transform: translateX(-50%);
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.countdown-overlay.hidden { display: none; }
/* Ping (3D) / goalie opt-in toast — top-left of the rink view.
Fullscreen: sit below HUD + shot-clock bar so it is not covered by the HUD (z-index 25). */
.game-notice-overlay {
position: absolute;
top: 6px;
left: 6px;
right: auto;
text-align: left;
pointer-events: none;
z-index: 12;
font: bold 15px/1.4 'Segoe UI', sans-serif;
background: rgba(0,0,0,0.62);
padding: 4px 8px;
border-radius: 4px;
color: #e0e0e0;
box-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
#game-content.fullscreen-stack-as-overlay .game-notice-overlay {
top: calc(var(--fs-hud-h, 48px) + 6px + 6px);
}
.game-notice-overlay.hidden { display: none; }
/* Goalie rotation panel — same corner as .game-notice-overlay (opt-in toast); below it in z-order */
.goalie-rotation-overlay-dom {
position: absolute;
top: 6px;
left: 6px;
pointer-events: none;
z-index: 11;
display: flex;
flex-direction: column;
gap: 8px;
}
#game-content.fullscreen-stack-as-overlay .goalie-rotation-overlay-dom {
top: calc(var(--fs-hud-h, 48px) + 6px + 6px);
}
.goalie-rotation-overlay-dom.hidden { display: none; }
.goalie-rotation-block {
background: rgba(0,0,0,0.62);
border: 1.4px solid currentColor;
padding: 6px 8px;
font: 12px 'Segoe UI', sans-serif;
min-width: 200px;
}
.goalie-rotation-title {
font-weight: bold;
margin-bottom: 4px;
}
.goalie-rotation-row { padding: 1px 0; color: #dbe7fb; white-space: nowrap; }
.goalie-rotation-row.current { background: rgba(255,255,255,0.14); color: #fff4a3; }
/* Offscreen puck arrow indicator */
.offscreen-puck-indicator {
position: absolute;
width: 42px;
height: 30px;
pointer-events: none;
/* Must paint above the in-canvas HUD layers that ring the edges it clamps to:
ability bar (6), stick-zone HUD (7), minimap (4), goal banner (4). The fullscreen
scoreboard (25) stays above — the layout clamps below it instead. */
z-index: 20;
}
.offscreen-puck-indicator.hidden { display: none; }
.offscreen-puck-indicator--third-person { width: 126px; height: 90px; }
.offscreen-puck-indicator-arrow {
width: 100%;
height: 100%;
/* Arrow pointing right — rotated inline by JS to point toward puck */
clip-path: polygon(93% 50%, 21% 17%, 32% 37%, 0% 37%, 0% 63%, 32% 63%, 21% 83%);
background: linear-gradient(90deg, #6aa5ff, #b4eaff, #ecfbff);
filter: drop-shadow(0 0 5px rgba(120,220,255,0.85));
}
/* Third-person minimap — bottom-right corner */
.third-person-minimap-wrap {
position: absolute;
bottom: 14px;
right: 14px;
pointer-events: none;
z-index: 4;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.third-person-minimap-wrap.hidden { display: none; }
/* One-timer bars — 2D mode only; 3D draws these on WebGL overlay canvas */
.onetime-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.onetime-overlay.hidden { display: none; }
.onetime-player-bar {
position: absolute;
width: 60px;
height: 4px;
background: rgba(0,0,0,0.6);
border-radius: 4px;
overflow: hidden;
transform: translateX(-50%);
}
.onetime-player-bar-fill {
height: 100%;
background: #f0c040;
border-radius: 4px;
transition: width 0.04s linear;
}
/* End Overlay */
.end-overlay {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
}
.end-overlay.hidden { display: none; }
/* Game-end celebration handoff: the results slide up over the winners' huddle behind them */
.end-overlay.end-slide-in { animation: endSlideIn 0.6s ease-out; }
@keyframes endSlideIn {
from { opacity: 0; transform: translateY(42px); }
to { opacity: 1; transform: translateY(0); }
}
/* MVP banner — bottom of the screen during the winners' celebration (below the end overlay,
which covers it when the results card slides in) */
#end-mvp-banner {
position: fixed;
left: 50%;
bottom: 34px;
transform: translateX(-50%);
z-index: 9;
background: linear-gradient(180deg, rgba(26, 21, 6, 0.93), rgba(12, 10, 4, 0.93));
border: 1px solid #d4af37;
border-radius: 12px;
padding: 10px 30px 12px;
text-align: center;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(212, 175, 55, 0.28);
pointer-events: none;
}
#end-mvp-banner.hidden { display: none; }
#end-mvp-banner .mvp-crown { font-size: 26px; line-height: 1; }
#end-mvp-banner .mvp-label {
color: #d4af37;
font-family: var(--font-display);
letter-spacing: 6px;
font-weight: 800;
font-size: 0.85rem;
margin-top: 2px;
}
#end-mvp-banner .mvp-name { color: #fff; font-weight: 700; font-size: 1.25rem; margin-top: 2px; }
#end-mvp-banner .mvp-stats { color: #cfc6a4; font-size: 0.85rem; margin-top: 4px; }
#end-mvp-banner .mvp-stats b { color: #ffe08a; }
#end-mvp-banner.mvp-in { animation: mvpSlideUp 0.55s ease-out; }
@keyframes mvpSlideUp {
from { opacity: 0; transform: translate(-50%, 30px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ── Match awards — the honours card between the huddle and the Play of the Game ──
Sits at z 2900, just under the POTG package (3000) that replaces it, and above all
game chrome. The whole card is ~3.6s of screen time, so everything cascades in fast
and nothing waits on anything else: the panel is already settling while the rows are
still arriving. --aw-team is set from JS to the MVP's team colour. */
.awards-overlay {
position: fixed;
inset: 0;
z-index: 2900;
--aw-team: #d4af37;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background:
radial-gradient(80% 60% at 50% 50%, rgba(4, 6, 11, 0.72), rgba(4, 6, 11, 0.93) 70%);
animation: awFadeIn 0.3s ease-out;
font-family: var(--font-display);
}
.awards-overlay.hidden { display: none; }
.awards-overlay.awards-out { opacity: 0; transition: opacity 0.42s ease; }
@keyframes awFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Single light sweep across the card as it lands — the one flourish that sells it. */
.awards-sweep {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 38%, rgba(255, 230, 160, 0.13) 48%, transparent 58%);
transform: translateX(-100%);
animation: awSweep 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
@keyframes awSweep { to { transform: translateX(100%); } }
.awards-panel {
position: relative;
width: min(680px, 92vw);
padding: 26px 32px 28px;
border-radius: 18px;
border: 1px solid rgba(212, 175, 55, 0.55);
background: linear-gradient(180deg, rgba(20, 17, 8, 0.96), rgba(9, 9, 12, 0.97));
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.75),
0 0 40px rgba(212, 175, 55, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: awPanelIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes awPanelIn {
from { opacity: 0; transform: translateY(26px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.awards-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.awards-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.65), transparent);
}
.awards-title {
color: #d4af37;
font-size: 1rem;
font-weight: 800;
letter-spacing: 8px;
white-space: nowrap;
}
/* MVP hero block — deliberately the only thing on the card with a portrait-sized name. */
.awards-mvp {
position: relative;
border-radius: 14px;
padding: 18px 22px 19px;
margin-bottom: 14px;
text-align: center;
border: 1px solid color-mix(in srgb, var(--aw-team) 60%, rgba(212, 175, 55, 0.4));
/* Neutral base, team colour on top. A gold-brown base swallowed the blue tint entirely and
made a blue MVP read olive, while red just got warmer — the two teams have to look as
different here as they do on the ice. */
background:
radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--aw-team) 34%, transparent), transparent 72%),
linear-gradient(180deg, rgba(17, 18, 24, 0.88), rgba(9, 9, 13, 0.92));
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45);
opacity: 0;
animation: awRowIn 0.46s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.awards-mvp:empty { display: none; }
.awards-mvp .aw-mvp-crown {
font-size: 32px;
line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.awards-mvp .aw-mvp-label {
color: #d4af37;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 6px;
margin-top: 4px;
}
.awards-mvp .aw-mvp-name > span { overflow-wrap: anywhere; }
.awards-mvp .aw-mvp-name {
/* Flex so the rank badge sits centred beside the name rather than riding the text
baseline — at 2.35rem an inline badge floats visibly off-centre. */
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #fff;
font-size: 2.35rem;
font-weight: 800;
line-height: 1.15;
margin-top: 3px;
/* text-shadow, not drop-shadow: a filter on a gradient-clipped text node paints nothing. */
text-shadow: 0 2px 14px color-mix(in srgb, var(--aw-team) 60%, transparent), 0 1px 2px #000;
}
.awards-mvp .aw-mvp-line {
color: #cfc6a4;
font-size: 1rem;
letter-spacing: 2px;
margin-top: 7px;
}
.awards-mvp .aw-mvp-line b { color: #ffe08a; }
.awards-list { display: flex; flex-direction: column; gap: 8px; }
.awards-row {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 12px;
padding: 11px 16px;
border-radius: 10px;
border-left: 4px solid var(--aw-row-team, #d4af37);
background: linear-gradient(90deg, color-mix(in srgb, var(--aw-row-team, #d4af37) 13%, transparent), rgba(255, 255, 255, 0.035) 45%);
opacity: 0;
animation: awRowIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes awRowIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.awards-row .aw-icon { font-size: 22px; line-height: 1; text-align: center; }
.awards-row .aw-text { min-width: 0; }
.awards-row .aw-label {
color: #a49b80;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 3.5px;
}
.awards-row .aw-name {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: #fff;
font-size: 1.22rem;
font-weight: 700;
line-height: 1.2;
}
/* Truncation moves to the text node: the badge is flex:none and must never be squeezed. */
.awards-row .aw-name > span {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.awards-row .aw-value {
color: #ffe08a;
font-size: 1.7rem;
font-weight: 800;
letter-spacing: 0.5px;
text-shadow: 0 0 14px rgba(255, 224, 138, 0.3);
}
@media (max-width: 700px) {
.awards-panel { padding: 18px 18px 20px; }
.awards-title { letter-spacing: 4px; font-size: 0.8rem; }
.awards-mvp .aw-mvp-name { font-size: 1.6rem; }
.awards-row .aw-name { font-size: 1rem; }
.awards-row .aw-value { font-size: 1.25rem; }
}
/* ── Play of the Game — end-of-game broadcast package ──────────────────────────
Full-screen stinger title card, then the captured goal clip with broadcast chrome
(letterbox bars, lower-third, live REPLAY bug, slow-mo chip). --potg-team is set
from JS to the scoring team's color. Sits above the results card (z 10) while it
plays; game.js hides it before the results reveal. */
.potg-overlay {
position: fixed;
inset: 0;
/* Above ALL game chrome (fullscreen-stack HUD, panels at z 2000) — the POTG package
owns the whole frame; the results card (z 10) appears after it hides. */
z-index: 3000;
--potg-team: #d4af37;
background:
radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--potg-team) 16%, transparent), transparent 60%),
radial-gradient(100% 80% at 50% -20%, rgba(212, 175, 55, 0.10), transparent 55%),
#04060b;
overflow: hidden;
animation: potgFadeIn 0.35s ease-out;
transition: opacity 0.45s ease;
font-family: var(--font-display);
}
.potg-overlay.hidden { display: none; }
.potg-overlay.potg-out { opacity: 0; pointer-events: none; }
@keyframes potgFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Stinger title card */
.potg-stinger {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
padding: 24px;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.potg-overlay.potg-stage-video .potg-stinger,
.potg-overlay.potg-stage-cine .potg-stinger {
opacity: 0;
transform: scale(1.06);
pointer-events: none;
}
/* Cut flash between angles. Sits above everything but the skip button, opaque at
the instant of the switch then falling away fast — long enough to hide the
camera change, short enough to read as a cut rather than a fade. */
.potg-cut-flash {
position: absolute;
inset: 0;
/* Above the video + 3D scene, deliberately BELOW the skip button — blacking out
the only escape from the highlight, even for 0.4s, would be hostile. */
z-index: 3;
background: #000;
opacity: 0;
pointer-events: none;
}
.potg-cut-flash--on { animation: potgCutFlash 0.42s ease-out both; }
@keyframes potgCutFlash {
0% { opacity: 1; }
55% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.potg-cut-flash--on { animation-duration: 0.2s; }
}
/* Cinematic angle: the live 3D scene shows through — overlay goes transparent and only
the broadcast chrome (letterbox bars, badges, lower-third) stays on top. */
.potg-overlay.potg-stage-cine { background: transparent; }
.potg-overlay.potg-stage-cine .potg-video-wrap { opacity: 1; }
.potg-overlay.potg-stage-cine #potg-video { display: none; }
.potg-eyebrow {
color: #cfc6a4;
font-size: clamp(0.8rem, 1.6vw, 1.05rem);
letter-spacing: 7px;
animation: potgRise 0.5s ease-out both;
}
.potg-title {
font-size: clamp(3rem, 9vw, 7rem);
line-height: 0.95;
letter-spacing: 6px;
font-style: italic;
background: linear-gradient(100deg, #8a6d1f 0%, #ffe9a3 22%, #d4af37 45%, #fff6d8 60%, #d4af37 78%, #8a6d1f 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 6px 24px rgba(212, 175, 55, 0.35));
animation: potgRise 0.5s ease-out 0.12s both, potgShine 2.4s linear 0.5s infinite;
}
@keyframes potgShine {
from { background-position: 125% 0; }
to { background-position: -125% 0; }
}
.potg-title-bar {
width: min(520px, 60vw);
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--potg-team), transparent);
box-shadow: 0 0 18px var(--potg-team);
animation: potgBarGrow 0.6s ease-out 0.3s both;
}
@keyframes potgBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.potg-stinger-scorer {
color: #fff;
font-size: clamp(1.6rem, 4vw, 2.8rem);
letter-spacing: 4px;
text-shadow: 0 0 22px color-mix(in srgb, var(--potg-team) 70%, transparent);
animation: potgRise 0.5s ease-out 0.42s both;
}
.potg-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
animation: potgRise 0.5s ease-out 0.55s both;
}
.potg-tag {
color: #ffe08a;
border: 1px solid #d4af37;
border-radius: 999px;
padding: 4px 14px 3px;
font-size: clamp(0.8rem, 1.6vw, 1rem);
letter-spacing: 3px;
background: rgba(212, 175, 55, 0.10);
box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}
@keyframes potgRise {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
/* Replay stage */
.potg-video-wrap {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.potg-overlay.potg-stage-video .potg-video-wrap { opacity: 1; }
#potg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.potg-letterbox {
position: absolute;
left: 0;
right: 0;
height: clamp(40px, 8vh, 84px);
background: linear-gradient(180deg, rgba(2, 3, 6, 0.96), rgba(2, 3, 6, 0.55));
pointer-events: none;
}
.potg-letterbox-top { top: 0; }
.potg-letterbox-bottom { bottom: 0; transform: rotate(180deg); }
/* Explicit skip control, top-left above the stage badge. Deliberately understated — it's an
escape hatch, not a call to action; the highlight is the point of the screen. */
.potg-skip-btn {
position: absolute;
/* Above the cut flash — see .potg-cut-flash. */
z-index: 6;
top: clamp(10px, 2.2vh, 22px);
left: clamp(14px, 2.5vw, 30px);
padding: 10px 22px 9px;
font-family: inherit;
font-size: 1.15rem;
letter-spacing: 3px;
color: rgba(255, 224, 138, 0.72);
background: rgba(8, 8, 12, 0.72);
border: 1px solid rgba(212, 175, 55, 0.45);
border-radius: 4px;
cursor: pointer;
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.potg-skip-btn:hover,
.potg-skip-btn:focus-visible {
color: #ffe08a;
border-color: #d4af37;
background: rgba(20, 18, 12, 0.9);
}
.potg-badge {
position: absolute;
/* Sits below the skip button, which owns the top-left corner. */
top: clamp(64px, 9vh, 88px);
left: clamp(14px, 2.5vw, 30px);
color: #ffe08a;
border: 1px solid #d4af37;
border-left: 4px solid var(--potg-team);
border-radius: 4px;
padding: 5px 12px 4px;
font-size: 0.95rem;
letter-spacing: 3px;
background: rgba(8, 8, 12, 0.75);
}
.potg-live {
position: absolute;
top: clamp(10px, 2.2vh, 22px);
right: clamp(14px, 2.5vw, 30px);
display: flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 0.95rem;
letter-spacing: 3px;
padding: 5px 12px 4px;
border-radius: 4px;
background: rgba(8, 8, 12, 0.75);
border: 1px solid #444;
}
.potg-live-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #e34c4c;
box-shadow: 0 0 10px #e34c4c;
animation: potgLivePulse 1.1s ease-in-out infinite;
}
@keyframes potgLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.potg-slomo {
position: absolute;
top: clamp(48px, 8vh, 78px);
right: clamp(14px, 2.5vw, 30px);
color: #ffe08a;
font-size: 0.9rem;
letter-spacing: 4px;
padding: 3px 10px 2px;
border-radius: 4px;
background: rgba(8, 8, 12, 0.8);
border: 1px solid #d4af37;
animation: potgLivePulse 0.9s ease-in-out infinite;
}
.potg-slomo.hidden { display: none; }
.potg-lower-third {
position: absolute;
left: clamp(14px, 2.5vw, 30px);
bottom: clamp(14px, 3vh, 30px);
display: flex;
align-items: stretch;
gap: 12px;
background: linear-gradient(90deg, rgba(6, 8, 14, 0.92), rgba(6, 8, 14, 0.65) 78%, transparent);
border-radius: 6px;
padding: 10px 34px 10px 0;
animation: potgLtIn 0.45s ease-out 0.25s both;
}
@keyframes potgLtIn {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
.potg-lt-bar {
width: 6px;
border-radius: 3px;
background: var(--potg-team);
box-shadow: 0 0 14px var(--potg-team);
}
.potg-lt-main { display: flex; flex-direction: column; justify-content: center; }
.potg-lt-scorer {
color: #fff;
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
letter-spacing: 3px;
line-height: 1.05;
}
.potg-lt-sub { color: #b9c2cc; font-size: clamp(0.85rem, 1.5vw, 1rem); letter-spacing: 2.5px; }
.potg-lt-chips { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.potg-chip {
color: #ffe08a;
border: 1px solid rgba(212, 175, 55, 0.7);
border-radius: 999px;
padding: 3px 11px 2px;
font-size: 0.85rem;
letter-spacing: 2px;
background: rgba(212, 175, 55, 0.10);
white-space: nowrap;
}
.potg-score-chip {
position: absolute;
right: clamp(14px, 2.5vw, 30px);
bottom: clamp(14px, 3vh, 30px);
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px 7px;
border-radius: 6px;
background: rgba(6, 8, 14, 0.88);
border: 1px solid #333a45;
font-size: clamp(1rem, 2vw, 1.3rem);
letter-spacing: 2.5px;
animation: potgLtIn 0.45s ease-out 0.35s both;
}
.potg-score-team.red { color: var(--red); }
.potg-score-team.blue { color: var(--blue); }
.potg-score-dash { color: #8b949e; }
.potg-score-clock {
color: #cfc6a4;
font-size: 0.8em;
border-left: 1px solid #333a45;
padding-left: 10px;
margin-left: 2px;
}
/* Narrow screens: the build-up chips would collide with the score chip — drop them
(the stinger already sold the story) and shrink the skip button out of the way. */
@media (max-width: 900px) {
.potg-lt-chips { display: none; }
.potg-skip-btn { font-size: 0.95rem; letter-spacing: 2px; padding: 8px 16px 7px; }
}
.end-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 48px;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 320px;
width: min(1560px, 96vw);
max-width: 100%;
}
.end-card h2 { font-size: 2rem; font-family: var(--font-display); letter-spacing: 3px; }
.end-score { font-size: 1.1rem; color: var(--muted); }
.end-score strong { color: var(--text); }
/* Play Again (matchmaking results only). Deliberately louder than Return to Menu
sitting under it — this is the action we want, so it reads as the primary and
the quit button drops to a quiet outline beside it. */
.btn-play-again {
background: linear-gradient(180deg, #4fd483 0%, var(--green, #3fb96b) 100%);
color: #07200f;
font-size: 1.05rem;
font-weight: 700;
padding: 15px 24px;
letter-spacing: 0.14em;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 6px 20px -5px rgba(63, 185, 107, 0.6);
}
.btn-play-again:hover:not(:disabled) {
background: linear-gradient(180deg, #66e199 0%, #46c877 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) inset, 0 10px 28px -6px rgba(63, 185, 107, 0.7);
}
.btn-play-again.hidden { display: none; }
/* With Play Again present, Return to Menu is the secondary way out. */
.end-card .btn-play-again:not(.hidden) + #btn-return {
background: transparent;
color: var(--ice-dim);
border: 1px solid var(--edge);
box-shadow: none;
}
.end-card .btn-play-again:not(.hidden) + #btn-return:hover:not(:disabled) {
background: var(--rink-hi);
color: var(--text);
}
/* Period Break Overlay */
.period-break-overlay {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0,0,0,0.82);
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.period-break-overlay.hidden { display: none; }
.break-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 14px;
width: min(1560px, 99vw);
box-shadow: 0 16px 60px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
min-height: 0;
max-height: min(94vh, 900px);
max-height: min(94dvh, 900px);
overflow: hidden;
}
.break-card h2 {
font-size: 1.6rem;
font-family: var(--font-display);
letter-spacing: 3px;
flex-shrink: 0;
}
.break-subtitle {
margin-top: 2px;
color: var(--muted);
font-size: 0.82rem;
flex-shrink: 0;
}
.break-teams {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
min-width: 0;
}
.break-team {
background: var(--panel2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 6px 6px 4px;
min-width: 0;
}
.break-team-title {
font-family: var(--font-display);
letter-spacing: 3px;
font-size: 1.02rem;
margin-bottom: 3px;
}
.break-team.break-red .break-team-title { color: var(--red); }
.break-team.break-blue .break-team-title { color: var(--blue); }
.break-player-row {
display: flex;
gap: 5px;
padding: 3px 2px;
border-top: 1px solid rgba(255,255,255,0.06);
min-width: 0;
}
.break-player-row:first-child { border-top: none; }
.break-player-name {
width: 82px;
flex-shrink: 0;
font-weight: 700;
color: var(--text);
letter-spacing: 0.3px;
font-size: 0.93rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.break-leader-crown {
color: #f0c040;
font-size: 0.88rem;
vertical-align: baseline;
}
.break-player-stats {
flex: 1;
display: grid;
/* 12 stats + wider PTS column (last) so blue-side box score doesn’t clip */
grid-template-columns: repeat(12, minmax(26px, 1fr)) minmax(48px, 1.5fr);
gap: 2px;
min-width: 0;
}
.break-stat-cell {
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 5px;
padding: 3px 2px 2px;
text-align: center;
position: relative;
cursor: help;
}
.break-stat-cell::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
background: rgba(10, 12, 16, 0.98);
color: #e6edf7;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
padding: 6px 8px;
font-size: 0.8rem;
line-height: 1.2;
letter-spacing: 0.2px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 5;
}
.break-stat-cell:hover::after {
opacity: 1;
}
/* SA is the one tooltip that can't be centred. It carries the counts inline ("Save
Percentage (Shots Saved: 9, Goals Allowed: 2)"), so it is several times wider than
every other one, and it sits in the 12th of 13 columns — centred on its own cell, half
of it hung off the right edge of the blue team's panel and got clipped. Anchoring the
RIGHT edge to the cell instead makes it grow leftward, which cannot clip no matter how
many shots the goalie faced. Deliberately only this cell: the rest are short enough
that centring reads better. */
.break-stat-cell--savePct::after {
left: auto;
right: 0;
transform: none;
}
.break-stat-label {
font-size: 0.55rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1;
}
.break-stat-value {
margin-top: 1px;
font-family: var(--font-display);
font-size: 0.85rem;
line-height: 1;
color: var(--text);
}
.break-stat-cell--points {
border-color: rgba(240, 192, 64, 0.45);
background: linear-gradient(180deg, rgba(240, 192, 64, 0.18), rgba(0, 0, 0, 0.22));
}
.break-stat-label--points {
color: #ffd77a;
font-size: 0.56rem;
letter-spacing: 0.5px;
}
.break-stat-value--points {
color: #ffd77a;
font-size: 0.95rem;
font-weight: 900;
}
.break-stat-value--best {
font-weight: 800;
color: #3fb950;
}
.break-stat-value--worst {
color: #e34c4c;
}
/* Period break — tabs & shot map */
.break-tabs {
display: flex;
gap: 6px;
margin: 8px 0 6px;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
flex-shrink: 0;
}
.break-tab {
flex: 1;
max-width: 220px;
padding: 10px 14px;
border: none;
border-radius: 10px 10px 0 0;
background: rgba(0, 0, 0, 0.2);
color: var(--muted);
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.break-tab:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.04);
}
.break-tab-active {
color: #e6edf7;
background: linear-gradient(180deg, rgba(76, 143, 227, 0.22), rgba(22, 27, 34, 0.95));
box-shadow: 0 -2px 0 0 var(--blue) inset;
}
.break-tab-panel-hidden,
.break-tab-panel[hidden] {
display: none !important;
}
/* Box score tab: fill card below tabs, scroll if roster is tall */
#break-tab-stats:not(.break-tab-panel-hidden):not([hidden]) {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ── Goal Replay Tab ─────────────────────────────────────────────────────── */
.replay-period-tabs {
display: flex;
gap: 3px;
flex-wrap: wrap;
justify-content: flex-end;
}
.replay-period-tab {
padding: 1px 6px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.14);
background: transparent;
color: var(--muted);
font-family: var(--font-display);
font-size: 0.62rem;
letter-spacing: 1px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
line-height: 1.6;
}
.replay-period-tab:hover {
background: rgba(255,255,255,0.06);
color: var(--text);
}
.replay-period-tab-active {
background: rgba(76,143,227,0.2);
border-color: var(--blue);
color: #e6edf7;
}
#break-tab-replay:not(.break-tab-panel-hidden):not([hidden]) {
flex: 1 1 auto;
min-height: min(52vh, 460px);
min-height: min(52dvh, 460px);
overflow: hidden;
display: flex;
}
.replay-layout {
display: flex;
gap: 10px;
flex: 1;
min-height: 0;
padding: 4px 0 2px;
}
.replay-player-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.replay-video-wrap {
position: relative;
flex: 1;
background: #000814;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 30px rgba(0,0,0,0.7);
min-height: 120px;
}
/* "REPLAY" broadcast badge */
.replay-badge {
position: absolute;
top: 10px;
left: 12px;
background: #f0c040;
color: #000;
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 3px;
padding: 3px 9px 2px;
border-radius: 3px;
z-index: 10;
animation: replayBadgePulse 1.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes replayBadgePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* No goals fallback */
.replay-no-goals {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 0.88rem;
font-style: italic;
}
.replay-no-goals.hidden { display: none; }
/* Goal list sidebar */
.replay-list-col {
width: 175px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
overflow: hidden;
}
.replay-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
font-family: var(--font-display);
letter-spacing: 3px;
font-size: 0.68rem;
color: var(--muted);
padding: 7px 10px 6px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0;
}
.replay-goal-list {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.replay-goal-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
transition: background 0.12s;
position: relative;
user-select: none;
}
.replay-goal-item:hover { background: rgba(255,255,255,0.05); }
.replay-goal-item.replay-active { background: rgba(76,143,227,0.13); }
.replay-goal-item.replay-active::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--blue);
border-radius: 0 2px 2px 0;
}
.replay-goal-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.replay-goal-dot.red { background: var(--red); box-shadow: 0 0 4px var(--red); }
.replay-goal-dot.blue { background: var(--blue); box-shadow: 0 0 4px var(--blue); }
.replay-goal-details { flex: 1; min-width: 0; }
.replay-goal-scorer {
font-size: 0.81rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.replay-goal-score {
font-size: 0.7rem;
color: #f0c040;
letter-spacing: 0.4px;
margin-top: 1px;
}
.replay-goal-num {
font-family: var(--font-display);
font-size: 0.7rem;
color: var(--muted);
flex-shrink: 0;
letter-spacing: 1px;
}
.replay-goal-item.replay-active .replay-goal-num {
color: var(--blue);
animation: replayNumPulse 1.1s ease-in-out infinite;
}
@keyframes replayNumPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Replay tab button — subtle play-icon accent */
.break-tab-replay-btn { gap: 4px; }
/* Shot map tab: column layout — toolbar strip, then chart | insights.
break-card only has max-height, so flex-basis 0 + min-height 0 collapsed the body to 0px. */
#break-tab-shotmap:not(.break-tab-panel-hidden):not([hidden]) {
flex: 1 1 auto;
min-height: min(52vh, 480px);
min-height: min(52dvh, 480px);
display: flex;
flex-direction: column;
overflow: hidden;
gap: 6px;
}
.break-shotmap-toolbar {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: flex-end;
margin-bottom: 12px;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}
#break-tab-shotmap .break-shotmap-toolbar {
flex-shrink: 0;
gap: 8px 14px;
margin-bottom: 0;
padding: 6px 10px;
border-radius: 8px;
}
/* Left: chart grows; right: insights scroll — min-height so grid gets real space without a fixed card height */
.break-shotmap-body {
flex: 1 1 auto;
min-height: min(44vh, 400px);
min-height: min(44dvh, 400px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
gap: 10px;
align-items: stretch;
}
.break-shotmap-chart-col {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
gap: 6px;
}
.break-shotmap-insights-col {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.break-shotmap-insights-col .break-insights {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin-top: 0;
overflow: hidden;
}
.break-shotmap-insights-col .break-insights-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-right: 4px;
}
.break-shotmap-label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--muted);
}
#break-tab-shotmap .break-shotmap-label {
gap: 2px;
font-size: 0.58rem;
letter-spacing: 0.55px;
}
.break-shotmap-select {
min-width: 140px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 0.88rem;
font-family: inherit;
cursor: pointer;
}
#break-tab-shotmap .break-shotmap-select {
min-width: 118px;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.72rem;
}
/* Custom select dropdowns — replaces native