/* Colors and font come from the active theme (data/themes/*.json) via these variables; the defaults below only show before the theme loads. */ :root { --edge-ramp: 0px; /* Whiteboard theme values, so nothing flashes before the theme applies. */ --bg: #e9ecef; --panel: #ffffff; --text: #1d2733; --muted: #4f5b67; /* darker for sun (design review X-5) */ --accent: #1d5fd1; --surround: #eef0ee; color-scheme: light; --font: ui-rounded, -apple-system, system-ui, sans-serif; --caption-bg: #000000b3; --caption-text: #fff; } [hidden] { display: none !important; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { /* The board's surround colour, so letterboxing reads as part of the pitch. */ background: var(--surround); color: var(--text); font-family: var(--font); height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; } button { font: inherit; color: inherit; border: 0; cursor: pointer; } /* body turns off text selection (so drags on the board don't select text); on iPad that also blocks typing — text fields must opt back in. */ input, textarea { -webkit-user-select: text; user-select: text; } button:active { transform: scale(0.96); } body[data-view="lineup"] .plays-only, body[data-view="lineup"] .log-only, body[data-view="plays"] .lineup-only, body[data-view="plays"] .log-only, body[data-view="log"] .lineup-only, body[data-view="log"] .plays-only, body[data-view="log"] #board { display: none !important; } body:not([data-view="stats"]) .stats-only, body[data-view="stats"] .lineup-only, body[data-view="stats"] .plays-only, body[data-view="stats"] .log-only, body[data-view="stats"] .roster-only, body[data-view="stats"] .board-only, body[data-view="stats"] #board, body:not([data-view="roster"]) .roster-only, body[data-view="roster"] .lineup-only, body[data-view="roster"] .plays-only, body[data-view="roster"] .log-only, body[data-view="roster"] #board { display: none !important; } /* Phones: no whiteboard at all. */ body[data-device="phone"] #board, body[data-device="phone"] #transport { display: none !important; } /* Screens: teams → team → game. */ body:not([data-screen="game"]) .game-only, body:not([data-screen="game"]) #board, body[data-screen="game"] .home-only { display: none !important; } #board { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; } #board .token { cursor: pointer; } #board .token.dragging { opacity: 0.85; } #board.hide-them .kind-them { display: none; } /* ------------------------------------------------ floating controls */ /* Solid (no backdrop blur) and never centred with a transform: both make text render soft on iPad. */ .float { position: fixed; z-index: 5; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 1px 3px #0000001f; border-radius: 999px; transition: opacity 0.4s; } #menuBtn { top: calc(env(safe-area-inset-top) + 22px); right: max(10px, env(safe-area-inset-right)); width: 44px; height: 44px; font-size: 20px; opacity: 0.7; } /* Names ↔ initials on the whiteboard: one tap, next to the menu. */ #namesBtn { top: calc(env(safe-area-inset-top) + 22px); right: calc(max(10px, env(safe-area-inset-right)) + 52px); height: 44px; padding: 0 14px; font-size: 15px; font-weight: 800; color: var(--accent); opacity: 0.85; } #namesBtn[aria-pressed="false"] { color: var(--muted); } /* iPad lineup: the formation, one tap from the board (left of Names). */ #formBtn { top: calc(env(safe-area-inset-top) + 22px); right: calc(max(10px, env(safe-area-inset-right)) + 150px); height: 44px; padding: 0 14px; font-size: 15px; font-weight: 800; opacity: 0.85; } body:not([data-view="lineup"]) .lineup-only { display: none !important; } body[data-view="log"] .board-only, body[data-view="roster"] .board-only, body[data-device="phone"] .board-only { display: none !important; } body.playing #namesBtn { opacity: 0.3; } #transport { bottom: max(10px, env(safe-area-inset-bottom)); right: max(10px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 2px; padding: 4px; } #transport button { width: 56px; height: 56px; border-radius: 999px; background: transparent; font-size: 24px; } #transport #playPause { background: var(--accent); color: var(--bg); } #beatCount { padding: 0 12px 0 6px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 15px; } /* Get out of the way while a play is running. */ body.playing #transport, body.playing #menuBtn { opacity: 0.3; } #caption { position: fixed; z-index: 4; top: calc(max(10px, env(safe-area-inset-top)) + 56px); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: min(760px, calc(100vw - 140px)); padding: 10px 20px; border-radius: 14px; background: var(--caption-bg); color: var(--caption-text); font-size: clamp(17px, 2.3vw, 26px); font-weight: 700; line-height: 1.25; text-align: center; pointer-events: none; } /* ------------------------------------------------ player picker */ #picker { position: fixed; z-index: 10; width: min(480px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; padding: 14px; border-radius: 20px; background: var(--panel); box-shadow: 0 20px 60px #0009; } #picker header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 22px; } #picker .title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } #picker .title small { color: var(--muted); font-size: 14px; } #picker .rename { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font: inherit; font-size: 20px; } #picker h4 { margin: 12px 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #picker .inspot { display: grid; gap: 6px; } #picker .chip { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 18px; font-weight: 600; } #picker .chip.starter { outline: 2px solid var(--accent); } #picker .chip b { color: var(--accent); min-width: 1.6em; font-size: 20px; } #picker .chip small { margin-left: auto; color: var(--muted); font-size: 13px; } #picker .chip .icon { width: 44px; height: 44px; border-radius: 10px; background: transparent; color: var(--accent); font-size: 22px; } #picker .chip small + .icon, #picker .chip span + .icon { margin-left: auto; } #picker .chip small + .icon { margin-left: 0; } #picker .empty { margin: 12px 4px 4px; color: var(--muted); font-size: 16px; } #picker .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } #picker .grid.all { margin-top: 10px; grid-template-columns: repeat(3, 1fr); } #picker .pick { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 19px; font-weight: 600; text-align: left; } #picker .pick b { font-size: 24px; min-width: 1.6em; color: var(--accent); } #picker .pick small { margin-left: auto; color: var(--muted); font-size: 13px; } #picker .more, #picker .ghost { background: transparent; color: var(--accent); font-weight: 600; min-height: 44px; padding: 0 10px; } #picker .more { width: 100%; margin-top: 6px; } /* ------------------------------------------------ menu (all settings) */ #menu { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(420px, 100vw); border: 0; /* --edge-ramp: keep the header below iPadOS's glass band (see below). */ padding: calc(max(16px, env(safe-area-inset-top)) + var(--edge-ramp)) 18px 24px; background: var(--panel); color: var(--text); overflow-y: auto; } #menu::backdrop { background: #0006; } #menu header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } #menu header strong { font-size: 22px; } #menu h3 { margin: 18px 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg button, #menu .close, .plays button { min-height: 46px; padding: 0 16px; border-radius: 12px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 17px; font-weight: 600; } .seg button.danger { color: #ff8a80; } .seg button.danger.armed { background: #d93a32; color: #fff; } .seg button.on { background: var(--accent); color: var(--bg); } .seg.big button { flex: 1; min-height: 52px; font-size: 19px; } #menu .close { background: transparent; color: var(--accent); padding: 0 6px; } #menu input.text { flex: 1; min-width: 120px; height: 46px; padding: 0 12px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font: inherit; font-size: 17px; } #menu input[type="date"], #menu input[type="time"] { flex: 0 1 auto; min-width: 0; } .avail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .avail button { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 16px; font-weight: 600; text-align: left; } .avail button b { color: var(--accent); min-width: 1.6em; } .avail button.out { opacity: 0.45; text-decoration: line-through; background: transparent; outline: 1px dashed var(--muted); } .plays { display: grid; gap: 8px; margin-top: 8px; } .plays button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; text-align: left; padding: 8px 14px; } .plays button small { color: var(--muted); font-weight: 400; font-size: 13px; } .plays button.on { outline: 3px solid var(--accent); } .chips button { min-height: 36px; font-size: 14px; padding: 0 12px; } .fatal { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 48px) 24px 24px; display: grid; gap: 14px; } .fatal h2 { margin: 0; font-size: 26px; } .fatal p { margin: 0; font-size: 17px; color: var(--muted); } .fatal button { min-height: 54px; border-radius: 16px; font-size: 18px; font-weight: 800; background: var(--accent); color: #fff; } .fatal pre { margin: 0; white-space: pre-wrap; font-size: 13px; color: var(--muted); } button:focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------ game log */ #log { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); padding: calc(max(16px, env(safe-area-inset-top)) + 56px) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); } #log .wrap { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } #log .board { text-align: center; padding: 8px 60px 0; } /* Name · score · name: the score sits in a center column of its own, so it stays centered however long either name is; a long name wraps (three lines at most) instead of pushing the score aside (Ryan, 2026-10-21). */ #log .teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; font-size: clamp(20px, 3vw, 28px); font-weight: 700; } #log .teams .score { display: flex; align-items: center; gap: 18px; } #log .teams .name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: break-word; line-height: 1.15; } #log .teams .name.us { text-align: right; } #log .teams .name.them { text-align: left; } #log .teams .n { font-size: clamp(44px, 7vw, 64px); font-variant-numeric: tabular-nums; min-width: 1ch; } #log .teams .them { color: var(--muted); } #log .when { color: var(--muted); font-size: 15px; margin-top: 2px; } #log .clock { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } #log .clock .time { font-size: clamp(34px, 6vw, 52px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } #log .clock .period { color: var(--muted); font-size: 17px; font-weight: 600; } #log button { border-radius: 14px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 18px; font-weight: 700; min-height: 52px; padding: 0 18px; } #log button.primary { background: var(--accent); color: var(--bg); } #log .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #log .actions .big { min-height: 84px; font-size: 22px; } #log .actions .keeper { grid-column: 1 / -1; min-height: 60px; } #log .actions .keeper small { color: var(--muted); font-weight: 600; margin-right: 8px; } #log h3 { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #log ol.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #log ol.events li { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); } #log ol.events li .at { min-width: 4.2em; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; } #log ol.events li .what { flex: 1; font-size: 18px; font-weight: 600; } #log ol.events li .what small { display: block; color: var(--muted); font-weight: 500; font-size: 14px; } #log ol.events li .danger { min-height: 40px; padding: 0 12px; font-size: 15px; color: #ff8a80; background: transparent; } #log ol.events li .danger.armed { background: #d93a32; color: #fff; } #log .gk { display: flex; flex-wrap: wrap; gap: 6px; } #log .gk span { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 15px; } #log .empty { color: var(--muted); } #logPick { /* Long rosters / short phones: the list scrolls, the title stays put. */ width: min(560px, 94vw); max-height: min(86vh, 86dvh); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 22px; padding: 0 18px 18px; background: var(--panel); color: var(--text); } #logPick::backdrop { background: #0008; } #logPick header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 -18px 12px; padding: 16px 18px 10px; background: var(--panel); font-size: 21px; font-weight: 700; } #logPick .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } #logPick .grid button, #logPick .none { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 18px; font-weight: 600; text-align: left; } #logPick .grid button b { color: var(--accent); min-width: 1.6em; font-size: 22px; } #logPick .grid button.on-field { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); } #logPick .none { width: 100%; margin-top: 10px; justify-content: center; color: var(--accent); } #logPick .close { background: transparent; color: var(--accent); font-size: 17px; font-weight: 700; min-height: 44px; padding: 0 6px; } /* ------------------------------------------------ game top bar */ /* Solid strip behind the game's top bar — a real element (#topStrip): iOS ignores pseudo-elements when it samples the top edge's colour. */ #topStrip { position: fixed; z-index: 4; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top) + var(--edge-ramp) + 72px); background-color: var(--surround); /* opaque, no backdrop-filter */ } #backBtn { top: calc(env(safe-area-inset-top) + 22px); left: max(10px, env(safe-area-inset-left)); height: 44px; padding: 0 16px 0 12px; max-width: 34vw; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #backBtn small { color: var(--muted); font-weight: 600; margin-left: 6px; } #modes { top: calc(env(safe-area-inset-top) + 22px); left: 0; right: 0; margin-inline: auto; width: max-content; display: flex; padding: 3px; gap: 2px; } #modes button { height: 38px; padding: 0 16px; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 700; } #modes button.on { background: var(--accent); color: var(--bg); } #lockBadge { top: calc(env(safe-area-inset-top) + 22px); right: calc(max(10px, env(safe-area-inset-right)) + 54px); height: 44px; padding: 0 14px; font-size: 15px; font-weight: 700; } #lockBadge.editing { background: #d93a32; color: #fff; } @media (max-width: 700px) { #backBtn small { display: none; } #modes button { padding: 0 11px; font-size: 15px; } } /* ------------------------------------------------ home: teams + team */ #home { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); } #home .wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; } #home h1 { margin: 8px 0 0; font-size: 32px; } #home h2 { margin: 14px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #home .top { display: flex; align-items: center; gap: 10px; min-height: 48px; } #home .top .back { background: transparent; color: var(--accent); font-size: 18px; font-weight: 700; padding: 0 6px; min-height: 44px; } #home .title { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 800; } #home .title button { background: transparent; color: var(--accent); font-size: 16px; font-weight: 700; min-height: 44px; } #home .title input { font: inherit; font-size: 26px; width: 10ch; padding: 4px 10px; border-radius: 10px; border: 2px solid var(--accent); background: transparent; color: var(--text); } #home .card { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border-radius: 18px; text-align: left; background: color-mix(in srgb, var(--text) 8%, transparent); min-height: 76px; } #home .card .main { flex: 1; min-width: 0; } #home .card strong { display: block; font-size: 21px; } #home .card small { display: block; color: var(--muted); font-size: 15px; margin-top: 3px; } #home .card .side { text-align: right; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } #home .card .side small { font-size: 13px; font-weight: 700; } #home .card .side small.pens { margin-top: 2px; font-size: 13px; font-weight: 700; } /* The status chip leads the date line; team cards: whole words per part, the last game on its own line. */ #home .card small.when .chip { margin: 0 8px 0 0; vertical-align: 1px; } #home .card small.parts span { white-space: nowrap; } #home .card small.lastGame b { color: var(--text); font-variant-numeric: tabular-nums; } #home .card small.lastGame .res { font-size: 12px; padding: 0 5px; vertical-align: 1px; } #home .card.continue { background: var(--accent); color: var(--bg); } #home .card.continue small { color: color-mix(in srgb, var(--bg) 70%, transparent); } #home .new { width: 100%; min-height: 64px; border-radius: 18px; background: var(--accent); color: var(--bg); font-size: 21px; font-weight: 800; } #home .chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 3px; margin-left: 8px; } #home .chip.live { background: #d93a32; color: #fff; } #home .chip.final { background: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); } #home .chip.half { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); } /* W / D / L as a colored pill everywhere (design review P-TM4). */ #home .res { display: inline-block; min-width: 1.6em; margin-right: 6px; padding: 1px 6px; border-radius: 8px; font-size: 13px; font-weight: 800; text-align: center; color: #fff; } #home .res.W { background: #1f9d55; } #home .res.L { background: #d12a2a; } #home .res.D { background: #6b7280; } #home .roster { display: flex; flex-wrap: wrap; gap: 6px; } #home .roster span { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 15px; } #home .roster b { color: var(--accent); margin-right: 6px; } #home .empty { color: var(--muted); margin: 0; } #newGame { width: min(520px, 94vw); border: 0; border-radius: 22px; padding: 20px; background: var(--panel); color: var(--text); } #newGame::backdrop { background: #0008; } #newGame header { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 800; margin-bottom: 8px; } #newGame label { display: block; margin: 14px 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #newGame input { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 0; font: inherit; font-size: 18px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } #newGame .row { display: flex; gap: 10px; } #newGame .row > div { flex: 1; } #newGame .seg button { min-height: 46px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 16px; font-weight: 700; } #newGame .seg button.on { background: var(--accent); color: var(--bg); } #newGame .go { width: 100%; margin-top: 20px; min-height: 58px; border-radius: 16px; background: var(--accent); color: var(--bg); font-size: 20px; font-weight: 800; } #newGame .close { background: transparent; color: var(--accent); font-size: 17px; font-weight: 700; min-height: 44px; } .lock-note { color: var(--muted); margin: 6px 0 0; } .lock-note.error { color: #d12a2a; font-weight: 600; } #newGame label.adult { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); margin-top: 14px; } #newGame label.adult input { width: 22px; height: 22px; flex: none; margin: 0; } #home .card::after { content: "›"; font-size: 28px; color: var(--muted); margin-left: 4px; } #home .card.continue::after { color: var(--bg); } /* ------------------------------------------------ phone roster */ #rosterView { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); padding: calc(max(16px, env(safe-area-inset-top)) + 56px) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); } #rosterView .wrap { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #rosterView h3 { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #rosterView ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #rosterView ol.lineup li { display: grid; grid-template-columns: 4.5em 1fr; gap: 4px 10px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); } #rosterView ol.lineup .pos { color: var(--accent); font-weight: 800; } #rosterView ol.lineup .who { font-weight: 600; font-size: 17px; } #rosterView ol.lineup li small { grid-column: 2; color: var(--muted); } #rosterView .avail button { min-height: 50px; } #newGame img.qr { display: block; width: min(320px, 70vw); margin: 14px auto; border-radius: 12px; background: #fff; } /* Phone-sized screens: tighter top bar, full-width buttons. */ @media (max-width: 520px) { #backBtn { max-width: 30vw; padding: 0 10px; } #modes button { padding: 0 12px; } #log .actions .big { min-height: 72px; font-size: 19px; } #log .clock .time { font-size: 40px; } } #home .new.subtle { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); min-height: 54px; font-size: 18px; } #home h2 .inline { margin-left: 10px; background: transparent; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #newGame textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; font: inherit; font-size: 17px; resize: vertical; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } #newGame .rows { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; } #newGame .rows .row { display: flex; gap: 6px; align-items: center; } #newGame .rows input.num { width: 4.2em; flex: none; text-align: center; } #newGame .rows button.rm { flex: none; min-height: 44px; padding: 0 10px; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; } #newGame .rows .close { font-size: 24px; min-width: 44px; } #newGame .qr { width: min(300px, 70vw); margin: 14px auto; padding: 8px; border-radius: 12px; background: #fff; } #newGame .qr svg { display: block; width: 100%; height: auto; } #newGame p.lock-note { font-size: 15px; } .toast { position: fixed; z-index: 50; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 24px; max-width: 90vw; padding: 12px 18px; border-radius: 14px; background: #000d; color: #fff; font-size: 16px; font-weight: 600; } .toast.error { background: #d93a32; color: #fff; white-space: normal; text-align: center; } /* Part of the header: scrolls away with ‹ Teams and the tabs instead of floating over the list (Ryan, 2026-10-20). #home is the scroll container, so absolute = moves with the page. */ #home .homeMenu { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 22px); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 999px; font-size: 20px; background: color-mix(in srgb, var(--text) 8%, transparent); } #home .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Fixed box from the first frame (no jump when the camera starts): square, capped by the screen height. */ #newGame video.scan { display: block; width: min(100%, 60vh); aspect-ratio: 1; margin: 0 auto; border-radius: 14px; background: #000; object-fit: cover; } #home .link { background: transparent; color: var(--accent); font-size: 16px; font-weight: 700; min-height: 40px; justify-self: center; } #home .joinLinks { display: flex; justify-content: center; align-items: center; gap: 2px; color: var(--muted); } #home .joinLinks .link { padding: 0 8px; } #home .card.install { background: color-mix(in srgb, var(--accent) 14%, transparent); } #newGame ol.steps { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 10px; font-size: 17px; line-height: 1.35; } #newGame .pointer { position: fixed; top: 6px; right: 70px; padding: 8px 14px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; } #log .clock .time { background: transparent; padding: 0 6px; min-height: 0; border-radius: 12px; font-size: clamp(34px, 6vw, 52px); font-weight: 800; font-variant-numeric: tabular-nums; } #log .clock .time.stoppage { color: #d12a2a; } #log .clock .mode { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* "1st half · TIME LEFT" on a phone (one line). */ @media (max-width: 520px) { #log .clock .meta .mode::before { content: "· "; } } #log .halfLen { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 700; } #log .halfLen button { min-height: 40px; min-width: 44px; padding: 0; font-size: 22px; } #newGame .row > div.narrow { flex: 0 0 6.5em; } #log .clock button.subtle { background: transparent; color: var(--accent); font-size: 16px; } #log .adjust { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); } #log .adjust .nudges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } #log .adjust .nudges button { min-height: 60px; font-size: 20px; } #log .adjust .set { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-weight: 700; } #log .adjust .set input { width: 4.2em; height: 52px; text-align: center; border: 0; border-radius: 12px; font: inherit; font-size: 24px; font-weight: 800; background: var(--panel); color: var(--text); font-variant-numeric: tabular-nums; } #log .adjust .set b { font-size: 24px; color: var(--text); } #log .adjust .restart { display: flex; justify-content: center; } #log .adjust .restart button { background: transparent; color: #d12a2a; font-size: 16px; min-height: 44px; } #log .adjust .restart button.armed { background: #d93a32; color: #fff; } #log .clock button.danger { color: inherit; } #log .clock button.danger.armed { background: #d93a32; color: #fff; } #log ol.events li .at small { display: block; font-size: 12px; font-weight: 600; opacity: 0.8; } /* ------------------------------------------------ clock pop-over */ #clockDlg { width: min(560px, 94vw); border: 0; border-radius: 24px; padding: 20px; background: var(--panel); color: var(--text); } #clockDlg::backdrop { background: #000a; } #clockDlg header { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 800; } #clockDlg .close { background: transparent; color: var(--accent); font-size: 18px; font-weight: 800; min-height: 44px; } #clockDlg .label { margin-top: 10px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #clockDlg .bigtime { text-align: center; font-size: clamp(64px, 18vw, 96px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } #clockDlg .bigtime.stoppage { color: #d12a2a; } #clockDlg .nudges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } #clockDlg .nudges button { min-height: 68px; border-radius: 16px; font-size: 21px; font-weight: 800; background: color-mix(in srgb, var(--text) 10%, transparent); } #clockDlg .set { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--muted); font-weight: 700; } #clockDlg .set input { width: 4.4em; height: 56px; text-align: center; border: 0; border-radius: 14px; font: inherit; font-size: 26px; font-weight: 800; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-variant-numeric: tabular-nums; } #clockDlg .set b { font-size: 26px; color: var(--text); } #clockDlg .set button { min-height: 56px; padding: 0 22px; border-radius: 14px; font-size: 19px; font-weight: 800; background: var(--accent); color: #fff; } #clockDlg .restart { display: flex; justify-content: center; margin-top: 14px; } #clockDlg .restart button { min-height: 48px; padding: 0 16px; border-radius: 12px; background: transparent; color: #d12a2a; font-size: 16px; font-weight: 700; } #clockDlg .restart button.armed { background: #d93a32; color: #fff; } #clockDlg .restart.pause button, #log .adjust .restart.pause button { color: var(--accent); } /* ------------------------------------------------ live roster */ .live { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--text) 5%, transparent); } .live.off { grid-template-columns: 1fr auto; align-items: center; gap: 14px; } .live.off strong { display: block; font-size: 18px; } .live.off small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; } /* Game tab before kickoff: "Lineup 3-3-2 · 9 of 9 set ›" → the Players tab. */ #log .lineupRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } #log .lineupRow b { color: var(--accent); font-weight: 700; white-space: nowrap; } .live.off button { min-height: 52px; padding: 0 18px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 800; } :is(#log, #rosterView) .live.off button.subtle { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } /* "Turn off" */ .live h3 { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .live h3 small { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; opacity: 0.85; } .live ol.field { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; } .live ol.field button { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 14px; border-radius: 14px; background: var(--panel); font-size: 17px; font-weight: 600; text-align: left; } .live .pos { color: var(--accent); font-weight: 800; } .live .pt { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 800; } .live .bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; } .live .bench button { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 16px; font-weight: 600; text-align: left; } .live .bench b { color: var(--accent); min-width: 1.6em; } /* Bench chips: the jersey number after the name, small and quiet. */ :is(.live .bench, .minipitch .chips) b.num { min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); } .live .bench small { margin-left: auto; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; } .live .liveFoot { display: flex; justify-content: flex-end; } .live .liveFoot button { background: transparent; color: var(--muted); font-size: 14px; min-height: 40px; } .live .liveFoot button.armed { background: #d93a32; color: #fff; } #logPick .grid button small { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; } #log .teams .opp-unused { background: transparent; font: inherit; color: var(--muted); padding: 0 4px; min-height: 0; border-bottom: 2px dashed color-mix(in srgb, var(--muted) 50%, transparent); border-radius: 0; } #log .teams .oppEdit { font: inherit; width: 8em; padding: 2px 8px; border-radius: 10px; border: 2px solid var(--accent); background: var(--panel); color: var(--text); } @media (max-width: 520px) { .live.off { grid-template-columns: 1fr; } .live ol.field { grid-template-columns: 1fr; } #clockDlg { padding: 16px; } #clockDlg .nudges button { min-height: 60px; font-size: 18px; } } #menu .halfLen { align-items: center; } #menu .halfLen span { font-weight: 700; margin-right: 6px; } #menu .halfLen button { min-width: 52px; font-size: 22px; } #clockDlg .bigtime:focus { outline: none; } /* Clock block: meta (mode · half) / big time / controls. A row on iPad, stacked on phones. */ #log .clock .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } #log .clock .ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } @media (max-width: 520px) { #log .clock { flex-direction: column; gap: 4px; } #log .clock .meta { flex-direction: row; gap: 10px; align-items: baseline; } #log .clock .time { font-size: 56px; line-height: 1.05; } #log .board { padding: 4px 0 0; } #log .teams, #log .teams .score { font-size: 17px; gap: 10px; } #log .teams .n { font-size: 46px; } #log .actions .big { min-height: 64px; font-size: 18px; } } #menu header strong:focus { outline: none; } @media (max-width: 520px) { #newGame .row { flex-wrap: wrap; row-gap: 0; } /* the labels' own margin spaces wrapped lines, as elsewhere */ #newGame .row > div { flex: 1 1 40%; } #newGame .row > div:first-child { flex-basis: 100%; } } #logPick header span:focus, #newGame header span:focus { outline: none; } /* iOS gives date/time inputs a fixed intrinsic width — let them size to the layout. */ input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; } #newGame input { box-sizing: border-box; } dialog header [tabindex="-1"]:focus { outline: none; } #newGame input[type="date"], #newGame input[type="time"] { line-height: 50px; text-align: left; } /* Play controls go in the corner the play leaves empty (placeTransport). */ #transport[data-corner="top-right"] { bottom: auto; top: calc(env(safe-area-inset-top) + 82px); } #transport[data-corner="bottom-left"] { right: auto; left: max(10px, env(safe-area-inset-left)); } #transport[data-corner="top-left"] { bottom: auto; right: auto; top: calc(env(safe-area-inset-top) + 82px); left: max(10px, env(safe-area-inset-left)); } .live .liveHead { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } #log .live .liveHead .linkish { background: transparent; color: var(--accent); font-weight: 800; min-height: 36px; padding: 0 6px; font-size: 16px; } .live .liveHead .fm { font-weight: 800; } .live .liveHead .subtle { background: transparent; color: var(--accent); font-weight: 800; min-height: 40px; } .banner { padding: 12px 16px; border-radius: 14px; background: #fff3cd; color: #6b4e00; font-weight: 800; border: 1px solid #f0d58a; } .banner small { font-weight: 600; } #home .chipsel { display: flex; flex-wrap: wrap; gap: 6px; } #home .chipsel button { min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 800; background: color-mix(in srgb, var(--text) 8%, transparent); } #home .chipsel button.on { background: var(--accent); color: #fff; } #home .playdown { display: grid; gap: 8px; } #home .playdown label { display: flex; align-items: center; gap: 10px; font-weight: 600; } #home .playdown input { width: 4.5em; height: 44px; text-align: center; border: 0; border-radius: 10px; font: inherit; font-weight: 800; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } #newGame .go:disabled { opacity: 0.5; } /* Home Screen web app on iOS/iPadOS 26: the system draws a glass "scroll edge" band (~40pt) over the top of the page and blurs what's under it. No setting turns it off — keep controls below it. */ @media (display-mode: standalone) and (min-width: 700px) and (min-height: 600px) { /* iPad only: iPhones use a lighter ("soft") edge effect WebKit can hide, so they don't need the extra space. */ @supports (-webkit-touch-callout: none) { :root { --edge-ramp: 44px; } } } /* Game bar buttons: the same height as the teams / team bars (--nav-top, below), not 22 px lower. */ #backBtn, #lockBadge, #menuBtn, #namesBtn, #formBtn { top: calc(var(--nav-top) + 2px) !important; } #modes { top: calc(var(--nav-top) - 1px) !important; } #transport[data-corner="top-right"], #transport[data-corner="top-left"] { top: calc(env(safe-area-inset-top) + var(--edge-ramp) + 82px); } #caption { top: calc(max(10px, env(safe-area-inset-top)) + var(--edge-ramp) + 66px); } #log, #rosterView, #statsView { padding-top: calc(max(16px, env(safe-area-inset-top)) + var(--edge-ramp) + 66px); } #home { padding-top: calc(max(20px, env(safe-area-inset-top)) + var(--edge-ramp)); } #home .homeMenu { top: calc(max(12px, env(safe-area-inset-top)) + var(--edge-ramp)); } .live .line h4 { margin: 6px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #log .overtime { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff3cd; border: 1px solid #f0d58a; color: #6b4e00; } #log .overtime strong { font-size: 18px; } #log .overtime .row { display: flex; flex-wrap: wrap; gap: 8px; } #log .overtime .row button { min-height: 52px; padding: 0 16px; border-radius: 14px; font-size: 17px; font-weight: 800; background: #fff; color: #6b4e00; } #log .overtime .row button.primary { background: var(--accent); color: #fff; } #log .overtime .row button.ghost { background: transparent; } #clockDlg .endat { display: flex; justify-content: center; margin-top: 14px; } #clockDlg .endat button { min-height: 52px; padding: 0 18px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 800; } #menu .playdown { display: grid; gap: 8px; } #menu .playdown label { display: flex; align-items: center; gap: 10px; font-weight: 600; } #menu .playdown input { width: 4.5em; height: 44px; text-align: center; border: 0; border-radius: 10px; font: inherit; font-weight: 800; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } #newGame .seg button:disabled { opacity: 0.55; } #logPick .none.extra { background: var(--accent); color: #fff; font-weight: 800; } /* The less likely answers (a penalty saved / missed) under the main one. */ #logPick .none.extra.secondary { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } #logPick .none.quiet { background: none; min-height: 40px; margin-top: 2px; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: underline; } #logPick .grid:empty { display: none; } /* Log entries: label column + title + details, no emoji. */ #log ol.events li .what { display: flex; align-items: flex-start; gap: 12px; } #log ol.events li .tag { flex: 0 0 auto; min-width: 5.4em; margin-top: 2px; padding: 3px 8px; border-radius: 7px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; } #log ol.events li .tag.for { background: var(--accent); color: #fff; } #log ol.events li .tag.against { background: #d12a2a; color: #fff; } #log ol.events li .tag.info { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); } #log ol.events li .body { display: grid; gap: 1px; min-width: 0; } #log ol.events li .body .title { font-size: 18px; font-weight: 700; } #log ol.events li .body small { color: var(--muted); font-size: 14px; font-weight: 500; } @media (max-width: 520px) { #log ol.events li .tag { min-width: 4.6em; font-size: 10px; } #log ol.events li .body .title { font-size: 16px; } } /* A goal logged "pick later": the scorer is still to pick (game.js fixScorer). */ #log .needScorer { color: #d93a32; } #log ol.events li button.title.needScorer { background: transparent; padding: 0; min-height: 32px; text-align: left; font: inherit; font-size: 18px; font-weight: 700; color: #d93a32; } @media (max-width: 520px) { /* Phones: label above the title so names get the full width. */ #log ol.events li { gap: 8px; padding: 10px 6px 10px 10px; } #log ol.events li .at { min-width: 2.9em; font-size: 13px; } #log ol.events li .what { flex-direction: column; gap: 4px; } #log ol.events li .tag { min-width: 0; margin-top: 0; } #log ol.events li .danger { min-height: 36px; padding: 0 8px; font-size: 13px; } } .finalRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent); font-weight: 800; } .finalRow button { min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 800; } .finalRow.editing { background: #fde8e7; color: #9b1c1c; } .finalRow.editing button { background: #d12a2a; } /* #log button (an id) beats .finalRow button: restate it so Edit / Done read as buttons, not disabled chips. */ #log .finalRow button { background: var(--accent); color: #fff; } #log .finalRow.editing button { background: #d12a2a; } /* Game section of the menu */ #menu .gameDetails .form { display: grid; gap: 8px; } #menu .gameDetails .frow { display: grid; grid-template-columns: 6em 1fr; align-items: center; gap: 10px; font-weight: 700; color: var(--muted); } #menu .gameDetails .frow input.text { width: 100%; min-width: 0; color: var(--text); } #menu .gameDetails .frow select.jersey { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font: inherit; font-size: 17px; font-weight: 400; } #menu .gameDetails input[type="date"], #menu .gameDetails input[type="time"] { line-height: 46px; text-align: left; } #menu .gameDetails .stepper { display: flex; align-items: center; gap: 8px; color: var(--text); } #menu .gameDetails .stepper button { min-width: 48px; min-height: 44px; font-size: 22px; border-radius: 12px; background: color-mix(in srgb, var(--text) 10%, transparent); } #menu .gameDetails .stepper b { min-width: 4.2em; text-align: center; } #menu .gameDetails .summary { margin: 0 0 10px; font-size: 17px; font-weight: 700; } #menu .seg button.primaryish { background: var(--accent); color: #fff; } #menu .danger-zone { margin-top: 14px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } #menu .danger-zone { display: flex; flex-wrap: wrap; gap: 4px 16px; } #newGame .danger-zone { margin-top: 16px; padding-top: 10px; display: flex; justify-content: center; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } #newGame .danger-zone button { background: transparent; color: #d12a2a; min-height: 44px; padding: 0 12px; font-size: 15px; border-radius: 10px; } #newGame .danger-zone button.armed { background: #d93a32; color: #fff; } #menu .gameDetails .summaryRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #menu .gameDetails .summaryRow .link { flex: none; min-height: 40px; padding: 0 10px; background: transparent; color: var(--accent); font-weight: 700; } #menu .danger-zone button { background: transparent; color: #d12a2a; min-height: 44px; padding: 0 4px; font-size: 15px; } #menu .danger-zone button.armed { background: #d93a32; color: #fff; padding: 0 12px; } #menu .danger-zone button.armed { background: #d93a32; color: #fff; padding: 0 14px; } /* Phones: the menu is the full screen width. */ @media (max-width: 520px) { #menu { width: 100vw; max-width: 100vw; margin: 0; } } /* Team page: Games | Roster */ #home .teambar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; padding-right: 52px; } #home .teambar .back { justify-self: start; background: transparent; color: var(--accent); font-size: 18px; font-weight: 700; padding: 0 6px; min-height: 44px; } #home .teambar .switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); box-shadow: 0 1px 3px #0000001f; } #home .teambar .switch button { height: 38px; padding: 0 18px; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 700; } #home .teambar .switch button.on { background: var(--accent); color: #fff; } #home .rtable { display: grid; gap: 4px; } #home .rhead, #home .rrow { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) repeat(5, 2.9rem); align-items: center; gap: 4px; padding: 0 10px; } #home .rhead { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } #home .rhead .th { background: transparent; color: inherit; font: inherit; padding: 6px 0; text-align: center; } #home .rhead .th:first-child { text-align: left; } #home .rhead .th.on { color: var(--accent); } #home .rrow { min-height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 17px; } #home .rrow b { color: var(--accent); } #home .rrow .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #home .rrow span:not(.nm) { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; } #home .rhead > span { text-align: left; } /* Wide screens (phone sideways, iPad): the desktop's Players columns too. */ #home .rtable .w, #home p.empty.w { display: none; } @media (min-width: 700px) { #home .rhead, #home .rrow { grid-template-columns: 2.4rem minmax(6rem, 1fr) repeat(12, minmax(2.5rem, 3.1rem)); gap: 4px; } #home .rtable .w { display: block; } #home p.empty.w { display: block; } } @media (max-width: 520px) { #home .rhead, #home .rrow { grid-template-columns: 2.4em 1fr repeat(4, 2.6em); padding: 0 8px; gap: 4px; font-size: 15px; } #home .rhead .gk, #home .rrow .gk { display: none; } } #home .teambar .back { white-space: nowrap; } /* The smallest phones (320 px): back buttons are just "‹" so they don't run under the Games | Roster / Game | Players switch; the player card's availability choices share the row (review 2026-10-21). */ @media (max-width: 359px) { #home .teambar .back .lbl, #backBtn .lbl { display: none; } #home .teambar .back { font-size: 22px; padding: 0 10px; } #modes button { padding: 0 10px; font-size: 14px; } } .availSeg { display: flex; gap: 6px; } .availSeg button { flex: 1 1 auto; min-width: 0; padding-left: 8px !important; padding-right: 8px !important; white-space: nowrap; } @media (max-width: 359px) { .availSeg button { font-size: 13px !important; white-space: normal !important; line-height: 1.15; padding-left: 6px !important; padding-right: 6px !important; } } @media (max-width: 520px) { #home .teambar { grid-template-columns: auto 1fr; gap: 8px; } #home .teambar .switch { justify-self: center; } #home .teambar .switch button { padding: 0 14px; font-size: 15px; } } /* Phone pregame lineup (Roster tab) — same look as the live roster */ #rosterView .pregame { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--text) 5%, transparent); } #rosterView .pregame h3 { margin: 0; } #rosterView .pregame .seg { display: flex; flex-wrap: wrap; gap: 6px; } #rosterView .pregame .formrow { display: flex; align-items: flex-start; gap: 8px; } #rosterView .pregame .formrow .seg { flex: 1; } #rosterView .pregame .formrow > .danger { flex: none; min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 800; background: color-mix(in srgb, var(--text) 8%, transparent); color: #d93a32; } #rosterView .pregame .formrow > .auto { flex: none; min-height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 800; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } #rosterView .pregame .formrow > .danger.armed { background: #d93a32; color: #fff; } #rosterView .pregame .seg button { min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 800; background: color-mix(in srgb, var(--text) 8%, transparent); } #rosterView .pregame .seg button.on { background: var(--accent); color: #fff; } #rosterView .pregame .line h4 { margin: 6px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #rosterView .pregame ol.field { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #rosterView .pregame ol.field button { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 14px; border-radius: 14px; background: var(--panel); font-size: 17px; font-weight: 600; text-align: left; } #rosterView .pregame .pos { color: var(--accent); font-weight: 800; } #rosterView .pregame ol.field small { color: var(--muted); font-weight: 800; } #log .events small.by { display: block; font-size: 12px; opacity: 0.7; } /* Team settings: coaches & devices */ #menu .coaches, #menu .devices { display: grid; gap: 6px; } #menu .coaches .row, #menu .devices .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 6px 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 16px; font-weight: 600; } #menu .devices select { min-height: 40px; border-radius: 10px; border: 0; padding: 0 10px; font: inherit; font-size: 15px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } #menu .coaches input.name { flex: 1; min-width: 0; height: 40px; background: transparent; font-weight: 600; } #menu .devices .row { flex-wrap: wrap; padding: 8px 8px 8px 14px; } #menu .devices .who { flex: 1 1 160px; min-width: 0; } #menu .devices .who small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); } #menu .devices .acts { display: flex; gap: 6px; margin-left: auto; } #menu .devices .acts button { min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 14px; } /* Main page: who's coaching on this device */ #home .coach-card { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, transparent); } #home .coach-card small { color: var(--muted); } #home .coach-card.set { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; background: transparent; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } #home .coach-card .link { min-height: 36px; } #home button.coach-card.set { width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--text); text-align: left; cursor: pointer; } #home button.coach-card.set small { color: var(--accent); font-weight: 700; padding-right: 8px; } /* ------------------------------------------------ sub pop-ups (tap a player) */ #logPick h3 { margin: 4px 0 10px; font-size: 18px; } #logPick h4 { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #logPick .grid.likely { grid-template-columns: 1fr; } #logPick .grid.likely button { outline: 2px solid var(--accent); } #logPick .grid.swap { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } #logPick .grid.swap button { min-height: 48px; font-size: 16px; } #logPick .grid.swap button b { font-size: 15px; min-width: 2.6em; } #logPick .when { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } #logPick .when span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 4px; } #logPick .when button { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 6px; border: 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); } #logPick .when button.on { background: var(--accent); color: var(--bg); } .toast.undo { display: flex; align-items: center; gap: 14px; bottom: calc(20px + env(safe-area-inset-bottom)); } .toast.undo button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; font: inherit; font-weight: 800; color: #fff; background: var(--accent); white-space: nowrap; flex: none; } /* Message and buttons on one line on a phone (review 2026-10-21: "Tigers / scored" wrapped). */ @media (max-width: 420px) { .toast.undo { gap: 10px; padding: 10px 12px; } .toast.undo button { padding: 0 12px; } } #newGame .momentRow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } #newGame .momentRow button { min-height: 52px; min-width: 48px; border-radius: 12px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 18px; font-weight: 800; } #newGame .momentRow .minute { min-width: 2.4em; text-align: center; font-size: 34px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------ stats */ #log ol.events li button.at { min-height: 40px; padding: 0 8px; border-radius: 10px; font-size: 15px; color: var(--accent); background: transparent; text-decoration: underline dotted; text-underline-offset: 3px; } #log .board .scorers { margin-top: 6px; font-size: 16px; font-weight: 700; } #log .board .scorers small { display: block; color: var(--muted); font-weight: 600; font-size: 14px; } #home .card small.scorers { display: block; margin-top: 2px; } .gstats summary { cursor: pointer; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px 0; } .stable { display: grid; gap: 4px; } /* Fixed px columns: the header has a smaller font, so em widths would drift. */ .stable .shead, .stable .srow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 44px); align-items: center; gap: 4px; padding: 0 12px; } .stable .shead { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .stable .shead span:not(:first-child), .stable .srow span:not(.nm) { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; } .stable .srow { min-height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 16px; } .stable .srow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .stable .srow .nm small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; } .gstats .note { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; } .gstats.pstats .plines { display: grid; gap: 4px; } .gstats.pstats .plines > div { display: flex; justify-content: space-between; gap: 12px; min-height: 40px; align-items: center; padding: 0 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 16px; } .gstats.pstats .plines b { font-variant-numeric: tabular-nums; text-align: right; } #newGame .ptotals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 14px; text-align: center; } #newGame .ptotals b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; } #newGame .ptotals small { color: var(--muted); font-size: 12px; font-weight: 700; } #newGame .stable { max-height: 55vh; overflow-y: auto; } #home button.rrow { width: 100%; border: 0; color: inherit; font: inherit; font-size: 17px; text-align: left; cursor: pointer; } @media (max-width: 520px) { #home button.rrow { font-size: 15px; } } #newGame .stable .shead, #newGame .stable .srow { grid-template-columns: minmax(0, 1fr) repeat(4, 38px); padding: 6px 10px; } #newGame .stable .srow .nm { white-space: normal; } /* ------------------------------------------------ sync status (tap to sync now) */ /* 44 px: it's a tap target ("tap to sync now"; review 2026-10-21). */ .syncPill { justify-self: center; min-height: 44px; padding: 4px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); cursor: pointer; } :is(#log, #rosterView, #home, #menu) .syncPill { min-height: 44px; padding: 4px 14px; font-size: 14px; border-radius: 999px; } :is(#log, #rosterView, #home, #menu) .syncPill[data-kind="ok"] { color: #1a7f37; } :is(#log, #rosterView, #home, #menu) .syncPill[data-kind="bad"] { color: #fff; background: #d93a32; } #home .syncPill { justify-self: start; margin: -6px 0 4px; } #menu .syncPill { justify-self: start; margin: 2px 0 8px; } button.srow { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } #rosterView .gstats h3 { margin: 6px 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #newGame .stable .srow.cur { outline: 2px solid var(--accent); } #newGame h3 { margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #newGame .plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } #newGame .plist li { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 16px; font-weight: 600; } #newGame .plist li b { min-width: 2.8em; color: var(--accent); } #newGame .plist li small { margin-left: auto; color: var(--muted); font-weight: 700; } #newGame .ptotals:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } #newGame .seg button.check, #menu .seg button.check { text-align: left; } #newGame .seg button.check { margin-top: 14px; width: 100%; } .seg button.check small { margin-left: 10px; color: var(--muted); font-size: 14px; font-weight: 600; } .seg button.check.on small { color: inherit; opacity: 0.8; } #log .overtime .msg { display: grid; gap: 2px; } #log .overtime .msg span { font-size: 16px; font-weight: 600; } #log .overtime .msg .t { font-variant-numeric: tabular-nums; font-weight: 800; } #logPick .grid.swap button.likely { outline: 2px solid var(--accent); } #logPick h4:first-of-type { margin-top: 4px; } #log .logHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } #log .logHead h3 { margin: 0; } #log .logFilter { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); } #log .logFilter button { min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: 15px; background: transparent; } #log .logFilter button.on { background: var(--accent); color: var(--bg); } /* ------------------------------------------------ feedback */ #newGame textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; font: inherit; font-size: 17px; resize: vertical; background: var(--panel); color: var(--text); } /* Tournament checkbox: a drawn box (no ☐/☑ glyphs — iOS turns those into emoji). */ .seg button.check { display: inline-flex; align-items: center; gap: 10px; } .seg button.check .box { flex: none; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 5px; position: relative; } .seg button.check.on .box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .seg button.check { display: flex; width: 100%; text-align: left; } .seg button.check .lbl small { display: block; margin-left: 0; } /* Season switcher under the team name, and the season list. */ #home .seasonPick { align-self: flex-start; margin: -4px 0 6px; padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .seasonList { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; } .seasonList button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; text-align: left; } .seasonList button small { opacity: 0.7; font-weight: 500; } /* Coaches & devices: each person with their devices underneath. */ .person .pdevices { list-style: none; margin: -2px 0 8px 14px; padding: 0; color: var(--muted); font-size: 14px; display: grid; gap: 2px; } /* Penalty shootout panel (Log), and the Penalty action. */ #log .shootout { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 10%, transparent); } #log .shootout .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; } #log .shootout .head .score { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; } #log .shootout .row { display: flex; align-items: center; gap: 10px; } #log .shootout .side { min-width: 7em; font-weight: 700; } #log .shootout .kicks { display: flex; flex-wrap: wrap; gap: 6px; } #log .shootout .kick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; } #log .shootout .kick.scored { background: #1f9d55; border-color: #1f9d55; } #log .shootout .kick.saved, #log .shootout .kick.missed { background: #d12a2a; border-color: #d12a2a; } #log .shootout .kick.empty { opacity: 0.4; } #log .shootout .status { margin: 0; font-weight: 700; } #log .actions .pkBtn { min-height: 52px; } #log .shootout .gk .linkish { background: transparent; color: var(--accent); font-weight: 700; padding: 4px 6px; min-height: 0; } #logPick .grid.dim button { opacity: 0.55; } /* Phone pregame lineup as a mini-pitch (game.js phonePitch). Colours from the theme. */ .viewSeg { justify-self: start; } .minipitch { display: grid; gap: 10px; } .minipitch .turf { position: relative; width: 100%; margin: 6px 0; border-radius: 12px; background: var(--pitch-bg); } .minipitch svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--pitch-line); stroke-width: 0.3; vector-effect: non-scaling-stroke; opacity: 0.55; } .minipitch .spot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 78px; min-height: 64px; padding: 0; background: none; color: var(--token); } .minipitch .spot b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--token); background: var(--pitch-bg); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .minipitch .spot span { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; padding: 0 4px; border-radius: 6px; background: color-mix(in srgb, var(--pitch-bg) 85%, transparent); } .minipitch .spot small { position: absolute; top: -4px; right: 10px; min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--token); color: var(--pitch-bg); font-size: 11px; font-weight: 800; } .minipitch .spot.empty b { border-style: dashed; font-size: 12px; color: var(--muted); border-color: var(--muted); } .minipitch .spot.empty span { color: var(--muted); font-weight: 700; } .minipitch .bench h4 { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .minipitch .chips { display: flex; flex-wrap: wrap; gap: 6px; } .minipitch .chips button { min-height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--text) 8%, transparent); } .minipitch .chips b { color: var(--accent); } /* Game types (team.js gameTypePicker) and practice (game.js renderPractice). */ .typePick { display: grid; gap: 6px; } .typePick .seg.types { display: flex; flex-wrap: wrap; gap: 6px; } .typePick .typeNote { color: var(--muted); font-size: 13px; } #home .card small.gtype { color: var(--muted); font-weight: 700; } #log .practice .ptally { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 5%, transparent); } #log .practice .ptally h3 { margin: 0 0 4px; } #log .practice .prow { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; } #log .practice .prow b { font-variant-numeric: tabular-nums; } #newGame .typeList { display: grid; gap: 8px; margin-top: 6px; } #newGame .typeList button { display: grid; gap: 2px; text-align: left; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent); } #newGame .typeList strong { font-size: 18px; } #newGame .typeList small { color: var(--muted); font-size: 14px; } #newGame p.typeNote { margin: 0; color: var(--muted); font-size: 14px; } #newGame header .back { margin-right: auto; padding-right: 8px; } #newGame header:has(.back) span { flex: 1; text-align: center; font-size: 18px; } #log .live .viewSeg { display: flex; gap: 6px; margin: 4px 0; } #log .live .viewSeg button { min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 800; background: color-mix(in srgb, var(--text) 8%, transparent); } #log .live .viewSeg button.on { background: var(--accent); color: #fff; } /* The game screen's button style must not reach the pitch spots. */ #log .minipitch .spot, #rosterView .minipitch .spot { background: none; min-height: 0; padding: 0; gap: 1px; box-shadow: none; } /* Practice (beta): practice.js */ .beta { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } #log .practice .drill { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, transparent); } #log .practice .drill .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; } #log .practice .drill .head .score { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } #log .practice .drill .head .unit { color: var(--muted); font-size: 13px; } #log .practice .drill .row.gk { display: flex; align-items: center; gap: 10px; } #log .practice .drill .row.gk .side { min-width: 5em; font-weight: 700; } #log .practice .drill .linkish { background: transparent; color: var(--accent); font-weight: 700; padding: 4px 6px; min-height: 0; } #log .practice .drill .seg { display: flex; gap: 8px; } #log .practice .drill .seg button { flex: 1; } #log .practice .drill > button { justify-self: start; } #log .practice em.pb { margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: #1f9d55; } #log .practice .addDrill { width: 100%; min-height: 52px; border-radius: 16px; font-weight: 800; font-size: 17px; background: transparent; border: 2px dashed color-mix(in srgb, var(--text) 25%, transparent); color: var(--accent); } #logPick .grid.attend button.away { opacity: 0.45; } #logPick .grid.attend button small { color: #d12a2a; } #logPick input.askInput { width: 100%; height: 54px; padding: 0 14px; border-radius: 12px; border: 0; font: inherit; font-size: 20px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); margin: 6px 0 10px; } #home .practiceStats h2 .beta { vertical-align: 4px; } #home .practiceStats .skillBest { margin: 6px 2px; font-size: 15px; } #home .practiceStats .stable .shead, #home .practiceStats .stable .srow { grid-template-columns: minmax(0, 1fr) repeat(3, 56px); } #log .practice .drill .remove { justify-self: end; color: var(--muted); font-size: 14px; } #newGame .seg { display: flex; flex-wrap: wrap; gap: 6px; } #log .practice .drillLog { display: grid; gap: 8px; } #log .practice .drillLog h3 { margin: 4px 0 0; } #log .practice .drillLog details { border-radius: 16px; background: color-mix(in srgb, var(--text) 5%, transparent); padding: 12px 16px; } #log .practice .drillLog summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 16px; } #log .practice .drillLog summary::-webkit-details-marker { display: none; } #log .practice .drillLog summary span { color: var(--muted); font-weight: 700; text-align: right; } #log .practice .drillLog details .drill { background: none; padding: 8px 0 0; } #log .practice .drillLog details .drill .head { display: none; } #log .practice .drill .gkline { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; } #log .practice .drill .gkline b { color: var(--muted); font-size: 14px; } #log .practice .drill .seg { flex-wrap: wrap; } #log .practice .drill .seg .primary { flex-basis: 100%; } #log .practice .drill .seg button { white-space: nowrap; padding: 0 10px; } /* Menus (☰), design pass 2026-10-20: each h3 section is a card (core.js menuGroups); on/off settings are switch rows (toggleRow); every menu ends with the same App card (home.js appFooter). */ #menu { background: var(--bg); } #menu header { position: sticky; top: calc(-1 * max(16px, env(safe-area-inset-top))); z-index: 2; margin: 0 -18px 6px; padding: 8px 18px 10px; background: var(--bg); } #menu header .title { display: grid; min-width: 0; } #menu header .title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #menu header .title small { color: var(--muted); font-size: 14px; font-weight: 600; } #menu .mgroup { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px 14px 14px; border-radius: 18px; background: var(--panel); } #menu .mgroup > h3 { margin: 0 0 2px; } #menu .mgroup > p.lock-note, #menu .mgroup > .lock-note { margin: 0; } #menu .mgroup .seg button { background: color-mix(in srgb, var(--text) 7%, transparent); } #menu .mgroup .seg button.on { background: var(--accent); color: var(--bg); } /* Primary actions in menu cards (Finish game, Edit this game, Save) keep their fill — the card's gray button rule above would otherwise win (same specificity, later) and make them look disabled (review 2026-10-21 P1). */ #menu .mgroup .seg button.primaryish { background: var(--accent); color: #fff; } #menu .mgroup .danger-zone { margin: 0; padding: 0; border: 0; } #menu .mgroup.danger { background: color-mix(in srgb, #d12a2a 6%, var(--panel)); } #menu .mgroup.app .syncPill { margin: 2px 0 0; } #menu .mgroup p.sub { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); } #menu .gameDetails { display: grid; gap: 8px; } #menu .gameDetails > h3 { margin: 0 0 2px; } #menu .gameDetails .summary { margin: 0; } .toggleRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 4px 0; background: none; text-align: left; font-size: 17px; font-weight: 600; color: var(--text); } .toggleRow .lbl { display: grid; } .toggleRow .lbl small { color: var(--muted); font-size: 13px; font-weight: 500; } .toggleRow .switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background 0.15s; } .toggleRow .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform 0.15s; } .toggleRow.on .switch { background: #34c759; } .toggleRow.on .switch::after { transform: translateX(20px); } @media (prefers-reduced-motion: reduce) { .toggleRow .switch, .toggleRow .switch::after { transition: none; } } #menu .mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0; background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 600; text-align: left; } #menu .mrow + .mrow { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } #menu .mrow b { color: var(--muted); font-weight: 600; white-space: nowrap; } #menu button.mrow b { color: var(--accent); } /* A text box in a row looks like one (review 2026-10-21: "Name: U11" read as a plain value). */ #menu .mrow input.text { flex: 0 1 60%; min-width: 0; width: 0; /* same: large text pushed the rows past their card */ text-align: right; background: color-mix(in srgb, var(--text) 6%, transparent); padding: 0 10px; height: 40px; border-radius: 10px; } #menu .mrow input.text:focus { outline: 2px solid var(--accent); outline-offset: 0; } #menu .gameDetails .mrow.shootoutRow { margin-top: 8px; } #menu .mgroup.danger .danger-zone { display: grid; gap: 0; } #menu .mgroup.danger .danger-zone button { justify-self: stretch; text-align: left; min-height: 48px; padding: 0; font-size: 17px; font-weight: 600; border-radius: 10px; } #menu .mgroup.danger .danger-zone button + button { border-top: 1px solid color-mix(in srgb, #d12a2a 12%, transparent); border-radius: 0; } #menu .mgroup.danger .danger-zone button.armed { padding: 0 14px; border-radius: 10px; } #menu .gameDetails .flabel { margin-top: 6px; font-weight: 700; color: var(--muted); } /* Sub-pages of ☰ (Coaches & devices) and the Seasons sheet. */ #menu .mgroups { display: contents; } #menu header.sub strong { flex: 1; text-align: center; font-size: 18px; } #menu .mgroup .devices { gap: 0; } #menu .mgroup .devices .row, #menu .mgroup .person > .row { background: none; padding: 8px 0; border-radius: 0; } #menu .mgroup .devices > * + * { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } #menu .mgroup .person .pdevices { margin: -4px 0 8px 0; } #menu .mgroup .devices .acts button { background: color-mix(in srgb, var(--text) 7%, transparent); } #menu .mgroup .seg button.danger { color: #d12a2a; } #menu .acctActs { display: grid; } #menu .acctActs .mrow { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 0; } #menu .acctActs .mrow.signout { color: var(--accent); } #menu .acctActs .mrow.delete { color: #d12a2a; } #menu .acctActs .mrow.armed { background: #d93a32; color: #fff; padding: 0 12px; border-radius: 10px; } #menu .mgroup > .mrow b { max-width: 65%; overflow: hidden; text-overflow: ellipsis; } .seasonList { gap: 0; padding: 4px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 5%, transparent); } .seasonList button { min-height: 52px; padding: 10px 0; border-radius: 0; background: none; font-size: 17px; font-weight: 600; color: var(--text); } .seasonList button + button { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .seasonList button.on { background: none; color: var(--accent); } .seasonList button em { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); } #menu .mgroup .devices .acts { flex-wrap: wrap; justify-content: flex-end; } #menu .mgroup .devices .acts button { white-space: nowrap; } #menu .mgroup .devices .acts button.danger { color: #d12a2a; } #menu .mgroup .seg button.lockBtn:not(.armed) { color: var(--accent); } #menu .planTeam { display: grid; gap: 4px; padding: 6px 0; } #menu .planTeam + .planTeam { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); padding-top: 10px; } #menu .planTeam small { color: var(--muted); font-size: 14px; } #menu .planTeam .seg { margin-top: 4px; } #menu .mgroup.danger .lock-note { margin: 0 0 8px; color: var(--text); } #menu .mgroup.danger .danger-zone button:disabled { opacity: 0.4; } #home .card small.gtype .track { color: var(--muted); font-weight: 600; } #log .trackNote { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 15px; color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent); } /* Link a computer (access.js linkSendDialog). */ #newGame p.linkAsk { margin: 4px 0 12px; font-size: 17px; line-height: 1.4; } #newGame p.linkWarn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-weight: 700; color: #b3261e; background: color-mix(in srgb, #d12a2a 10%, transparent); } #newGame .go.warnGo { background: #b3261e; } #newGame .numPick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; } #newGame .numPick button { min-height: 72px; border-radius: 16px; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); } /* Sign in with your other phone (access.js signInDialog viaPhone → qrSignInPanel). */ #newGame .go.viaPhone { margin-top: 12px; } #newGame p.orLine { margin: 18px 0 4px; text-align: center; color: var(--muted); font-size: 15px; font-weight: 600; } #newGame ol.qrSteps { margin: 4px 0 6px; padding-left: 1.3em; display: grid; gap: 6px; font-size: 16px; line-height: 1.35; } #newGame .linkbox.qrSignIn { display: grid; justify-items: center; gap: 4px; margin-bottom: 12px; } #newGame .linkbox.qrSignIn .qr { margin: 10px auto 4px; } #newGame .qrNumber { display: grid; justify-items: center; gap: 2px; } #newGame .qrNumber small { color: var(--muted); font-size: 14px; font-weight: 600; } #newGame .qrNumber b { font-size: 44px; font-weight: 800; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; line-height: 1.1; } #log .board .wx { margin-top: 2px; font-size: 13px; color: var(--muted); } #newGame table.tGames { width: 100%; border-collapse: collapse; } #newGame table.tGames td { padding: 3px 4px 3px 0; vertical-align: middle; } #newGame table.tGames select { width: 100%; height: 50px; padding: 0 10px; border-radius: 12px; border: 0; font: inherit; font-size: 16px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } #newGame table.tGames td:first-child { width: 8.2em; } #newGame table.tGames td:nth-child(2) { width: 7.6em; } #newGame table.tGames input { padding: 0 10px; font-size: 16px; } #newGame table.tGames button.rm { font-size: 14px; color: var(--muted); padding: 0 4px; background: none; } #newGame table.tGames td:last-child { width: 1%; } /* Injured / out for the season (model.js absences). */ .avail button small, #home .rrow .nm small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; } #home .rrow.absent { opacity: 0.6; } #home .rrow .nm small { overflow: hidden; text-overflow: ellipsis; } .pstatus { margin-top: 14px; } .pstatus .frow { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 10px; margin-top: 8px; } .pstatus .frow input { height: 44px; } /* Section headings (Available / Injured / Out for the season) read as headings, the column header as a pinned label bar — they must never look alike. */ #home .rtable .rsec { display: flex; align-items: center; gap: 8px; margin: 14px 2px 4px; padding: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } #home .rtable .rsec .count { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); } #home .rtable .rhead { min-height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 88%, var(--text)); } #newGame > #newGameBody > select, #newGame .mergePreview + .go { margin-top: 0; } #newGame #newGameBody > select { width: 100%; height: 50px; padding: 0 12px; border-radius: 12px; border: 0; font: inherit; font-size: 16px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } #newGame .mergePreview { margin: 12px 0; font-size: 15px; } /* Phone Edit players: "played here before?" under a new row. */ #newGame .rows .sameHint { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -2px 0 6px 4.6em; font-size: 14px; color: var(--muted); } #newGame .rows .sameHint button { min-height: 36px; padding: 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: inherit; font-weight: 700; } /* Edit players: number, name and Remove stay on one line (the narrow-screen .row wrap is for forms). */ #newGame .rows .row { flex-wrap: nowrap; } #newGame .rows .row input:not(.num) { flex: 1; min-width: 0; width: auto; } #newGame .rows > div { min-width: 0; } /* Goal pickers: the usual answer first ("No assist"), the PK beside it (design review P-G3). */ #logPick .firstRow { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin: 2px 0 10px; } #logPick .firstRow .none { margin-top: 0; } #logPick .firstRow .none:not(.quiet) { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 800; } #logPick .firstRow .none.quiet { min-height: 52px; margin: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); text-decoration: none; color: var(--text); } #logPick .none.more { margin-top: 8px; } /* Live game layout (design review P-G1/P-G8): pinned mini scoreboard, a small row for the rarer actions, and a clear break state at half time / full time. */ #log .miniBoard { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); top: calc(max(16px, env(safe-area-inset-top)) + 52px); width: min(760px, calc(100% - 32px)); min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; border-radius: 14px; background: var(--panel, var(--bg)); color: var(--text); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); font-size: 17px; } #log .miniBoard[hidden] { display: none; } #log .miniBoard span { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; } #log .miniBoard .t { color: var(--text); margin-left: auto; } #log .minirow { display: flex; gap: 8px; } #log .minirow > button { flex: 1; min-height: 46px; font-size: 16px; } /* The smallest phones (320 px): the live buttons and the clock nudges stay on one line (review 2026-10-21). */ @media (max-width: 360px) { #log .actions .big { font-size: 17px; padding: 0 6px; white-space: nowrap; } #log .minirow > button { padding: 0 6px; font-size: 15px; white-space: nowrap; } #clockDlg .nudges { gap: 6px; } #clockDlg .nudges button { padding: 0 2px; font-size: 16px; white-space: nowrap; } #clockDlg .set { gap: 6px; } #clockDlg .set > span { white-space: nowrap; } #clockDlg .set input { width: 3.8em; } #clockDlg .set button { padding: 0 16px; } } #log .clock.break { flex-direction: column; gap: 10px; } #log .breakLabel { font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -0.01em; } #log .clock.break .ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } #log .breakStrip { text-align: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); } #log .breakStrip small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; margin-bottom: 4px; } #log .breakStrip div { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; font-size: 17px; } #log .teams .n.them { color: var(--text); } /* both scores read the same (design review P-G10) */ /* Phone sideways: the desktop's stats tabs on the Roster tab. */ #home .statTabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } #home .statTabs button { min-height: 40px; padding: 0 14px; font-size: 15px; } /* Laid out like the desktop's Stats page (statviews.js STAT_TABS): two columns row by row, wide tables across both, column tabs (Scoring) as columns. */ #home .phoneStats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; align-items: start; } #home .phoneStats > .wide { grid-column: 1 / -1; } #home .phoneStats.cols { grid-auto-flow: row; } #home .phoneStats.cols .col { display: grid; gap: 12px; align-content: start; min-width: 0; } #home .phoneStats > .pstat:is(.fairness, .positions) { align-self: stretch; } #home .pstat { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 5%, transparent); } #home .pstat h3 { margin: 0 0 2px; font-size: 16px; } #home .pstat .note { margin: 0 0 8px; color: var(--muted); font-size: 13px; } #home .pstat .scroll { overflow-x: auto; } #home .pstat table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } #home .pstat th, #home .pstat td { padding: 5px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } #home .pstat thead th { color: var(--muted); font-size: 12px; font-weight: 700; } #home .pstat .nm { text-align: left; font-weight: 600; } #home .title .seasonPick { margin: 0; align-self: center; padding: 4px 6px; } @media (orientation: landscape) and (max-height: 560px) { #home .title { font-size: 22px; } #home .wrap { gap: 8px; } } /* Coach name: the app's standard rounded field (design review P-T3). */ #home .coach-card .seg { display: flex; gap: 8px; } /* width: 0 — an input's natural width (~20 characters) set the row's minimum; with large text it pushed the whole teams screen past a 360 px phone (Android QA 2026-10-22). It still fills the row (flex: 1). */ #home .coach-card input.text { flex: 1; min-width: 0; width: 0; height: 48px; padding: 0 14px; border-radius: 12px; border: 0; font: inherit; font-size: 17px; background: var(--panel); color: var(--text); } #home .coach-card .primaryish { min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; } #home .intro { margin: -6px 0 4px; color: var(--muted); font-size: 16px; } #home .pair .primaryJoin { background: var(--accent); color: #fff; } /* On the blue "continue" cards every status reads as a light pill, and small text stays legible (design review P-T4). */ #home .card.continue .chip.half, #home .card.continue .chip.final { background: rgba(255, 255, 255, 0.9); color: #10305f; } #home .card.continue small, #home .card.continue small .track { color: rgba(255, 255, 255, 0.85); } @media (max-width: 520px) { #home .gkNote { display: none; } } /* The floating ☰ never sits on top of an open pop-up (design review P-N3). */ body:has(dialog[open]) #menuBtn { visibility: hidden; } /* Player card (design review P-TM10): availability on one row, quiet result pill in each game row. */ .pstatus .seg { flex-wrap: nowrap; } .pstatus .seg button { flex: 1; min-width: 0; padding: 0 8px; font-size: 15px; white-space: nowrap; } #newGame .srow .nm small .res { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 6px; color: #fff; font-weight: 800; text-align: center; } #newGame .srow .nm small .res.W { background: #1f9d55; } #newGame .srow .nm small .res.L { background: #d12a2a; } #newGame .srow .nm small .res.D { background: #6b7280; } #newGame .showAll { margin: 8px auto 0; display: block; } #menu .seg.multi button { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text) 22%, transparent); } #menu .seg.multi button.on { background: var(--accent); color: #fff; box-shadow: none; } #menu .playdown label { display: grid; grid-template-columns: 1fr 5em; align-items: center; gap: 10px; } #menu .playdown input { width: 100%; text-align: center; } /* The form's main button stays in reach at the bottom of long sheets (design review P-N2). */ #newGame .go { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 16px var(--panel, #fff); } .minipitch .planned { margin: 8px 2px 0; font-size: 14px; color: var(--muted); } .minipitch .planned b { color: var(--text); } /* Pregame card (design review P-L2): Pitch | List as a small segmented switch in the header, formations in one scrolling row, Clear as a quiet link at the end. */ .pregameHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .seg.viewSeg { display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); } .seg.viewSeg button { min-height: 34px; padding: 0 14px; border-radius: 999px; background: transparent; font-size: 15px; } .seg.viewSeg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .seg.formScroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .seg.formScroll button { flex: none; } .pregame .clearLineup { display: block; margin: 10px auto 0; background: transparent; color: var(--muted); font-size: 15px; text-decoration: underline; min-height: 40px; } /* Phone held sideways on the teams / team screens: no floating ☰ over the stats tables (Ryan, 2026-10-20). Upright brings it back; games keep it (Finish game, details live there). */ @media (orientation: landscape) and (max-height: 560px) { body[data-screen="team"] #menuBtn, body[data-screen="teams"] #menuBtn { display: none; } } /* Phone appearance (☰ → App: Auto / Light / Dark): the colors are set by app.js applyTheme (the theme writes them inline on , dark when chosen). The root itself takes them too, so no light band shows behind the status bar or when the page is pulled. The desktop has its own switch (html[data-pscheme="off"]). */ html:not([data-pscheme="off"]) { background: var(--surround); } #home .card.continue, #home .card.continue::after { color: #fff; } #log button.primary, #home .new:not(.subtle) { color: #fff; } .pregame .formrow .seg.formScroll { flex-wrap: nowrap; overflow-x: auto; } .pregame .formrow { min-width: 0; } .pregame .formrow .seg.formScroll button { flex: none; } #rosterView .pregame .formrow .seg.formScroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body[data-screen="game"] #log .syncPill[data-quiet] { display: none; } body[data-screen="game"][data-sync="bad"] #menuBtn::after { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #d93a32; box-shadow: 0 0 0 2px var(--bg); } /* Tabs used at the field are full-size touch targets (design review X-8); white on blue in both schemes. */ .teambar .switch button, #modes button { height: 44px; min-height: 44px; } #modes button.on, .teambar .switch button.on { color: #fff; } /* Practice quick entry (design review P-P1): a row per player, results one tap away. */ #log .practice .quickList { display: grid; gap: 6px; margin-top: 8px; } #log .practice .qrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); } #log .practice .qrow .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } #log .practice .qrow .who b { color: var(--accent); margin-right: 4px; } #log .practice .qrow .who small { color: var(--muted); } #log .practice .qbtns { display: flex; gap: 6px; flex: none; } #log .practice .qbtns button.q { min-height: 44px; padding: 0 12px; font-size: 15px; } #log .practice .qbtns button.q.scored, #log .practice .qbtns button.q.goal { background: #1f9d55; color: #fff; } #log .practice .qbtns .qnum { width: 5em; height: 44px; padding: 0 10px; border-radius: 12px; border: 0; font: inherit; background: var(--panel); color: var(--text); } #menu .schemeSeg { margin-top: 2px; } #menu .schemeSeg button.on { background: var(--accent); color: #fff; } /* Roster sideways = stats only: no floating ☰ either (the team-screen rule already hides it sideways). */ @media (orientation: landscape) and (max-height: 560px) { #home .wrap.statsOnly .title { font-size: 18px; } #home .wrap.statsOnly .coach-card { display: none; } body[data-screen="team"] #home .homeMenu, body[data-screen="teams"] #home .homeMenu { display: none; } } /* Sideways stats: team, season and the stat tabs stick to the top (long tabs like Trends), below the notch / status bar like the other top bars (review 2026-10-21). */ #home .wrap.statsOnly .statsHead { position: sticky; top: 0; z-index: 5; display: grid; gap: 6px; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: var(--nav-top) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); background: var(--bg); } #home .wrap.statsOnly .statsHead .statTabs { margin-bottom: 0; } /* Sortable roster headings: a small mark on the column it's sorted by. */ #home .rhead .th.on::after { content: "\25BE"; margin-left: 1px; font-size: 0.9em; } #home .title .seasonText { font-size: 16px; font-weight: 700; color: var(--muted); } /* Phone pop-ups are iOS-style bottom sheets (Ryan, 2026-10-20: centered cards over the half-visible page looked unfinished): full width from the bottom, rounded top, a grab handle, the page behind dimmed and blurred, a short slide up. Bigger screens keep the centered card. */ @media (max-width: 600px) { #newGame, #logPick, #clockDlg { width: 100vw; max-width: 100vw; margin: auto 0 0; box-sizing: border-box; max-height: min(92vh, 92dvh); overflow-y: auto; overscroll-behavior: contain; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); } #newGame::before, #logPick::before, #clockDlg::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); } #logPick::before { margin-top: 10px; } #newGame[open], #logPick[open], #clockDlg[open] { animation: pbSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } } #newGame::backdrop, #logPick::backdrop, #clockDlg::backdrop, #menu::backdrop { background: rgba(10, 14, 20, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @keyframes pbSheetUp { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { #newGame[open], #logPick[open], #clockDlg[open] { animation: none; } } /* One top bar for every phone screen (Ryan, 2026-10-20): it starts right under the status bar (the team page's height, closer to the top than the old game bar), buttons centered in a 48 px band: --nav-top = where the band starts. Teams / team: a sticky bar inside the scrolling page (.titlebar, .teambar, with the ☰ in it). Game: the fixed buttons and the solid #topStrip behind them. */ :root { --nav-top: calc(max(12px, env(safe-area-inset-top)) + var(--edge-ramp)); } #home { padding-top: 0; } #home .titlebar, #home .teambar { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: var(--nav-top) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); min-height: 48px; background: var(--bg); } #home .titlebar { display: flex; align-items: center; justify-content: space-between; } #home .titlebar h1 { margin: 0; } #home .teambar { grid-template-columns: 1fr auto 1fr; padding-right: max(16px, env(safe-area-inset-right)); } #home .titlebar .homeMenu, #home .teambar .homeMenu { position: static; justify-self: end; flex: none; } #backBtn, #lockBadge, #menuBtn, #namesBtn, #formBtn { top: calc(var(--nav-top) + 2px); } #modes { top: calc(var(--nav-top) - 1px); } #topStrip { height: calc(var(--nav-top) + 54px); } #log, #rosterView, #statsView { padding-top: calc(var(--nav-top) + 62px); } #log .miniBoard { top: calc(var(--nav-top) + 54px); } @media (max-width: 520px) { #home .teambar { grid-template-columns: auto 1fr auto; } } /* The game's back button reads like the team page's "‹ Teams": plain accent text, no pill. */ #backBtn { background: transparent; box-shadow: none; color: var(--accent); font-size: 18px; padding: 0 6px; } #menuBtn { opacity: 1; } /* Bottom sheets sit above the iOS keyboard (--kb, app.js) instead of under it. */ @media (max-width: 600px) { #newGame, #logPick, #clockDlg { margin-bottom: var(--kb, 0px); max-height: calc(min(92vh, 92dvh) - var(--kb, 0px)); transition: margin-bottom 0.2s ease; } } /* ---- Stats charts (js/statviews.js): the desktop Stats page and the phone held sideways. */ :is(#desktop, #home) .hlegend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 2px 0 8px; } :is(#desktop, #home) .hlegend .key { width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; } :is(#desktop, #home) .hlegend .key:first-child { margin-left: 0; } :is(#desktop, #home) .key.for, :is(#desktop, #home) .vbars i.for { background: var(--accent); } :is(#desktop, #home) .key.against, :is(#desktop, #home) .vbars i.against { background: var(--loss, #d12a2a); } /* Fairness: horizontal bars with the equal-share line. */ :is(#desktop, #home) .hbars { display: grid; gap: 5px; padding-bottom: 8px; } :is(#desktop, #home) .hlegend .eqkey { width: 2px; height: 12px; background: var(--text); opacity: 0.55; } :is(#desktop, #home) .hrow { display: grid; grid-template-columns: minmax(6em, 10em) minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: 14px; } :is(#desktop, #home) .hrow .who { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#desktop, #home) .hrow .track { position: relative; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); } :is(#desktop, #home) .hrow .track i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); } :is(#desktop, #home) .hrow .track::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(var(--eq) * 100%); width: 2px; background: var(--text); opacity: 0.55; } :is(#desktop, #home) .hrow.low .track i { background: #e8890c; } :is(#desktop, #home) .hlegend .key.low { background: #e8890c; margin-left: 14px; } :is(#desktop, #home) .hrow .val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } /* Goals by 10 minutes: paired columns, the halves apart. */ :is(#desktop, #home) .vhalves { display: flex; gap: 18px; padding-bottom: 6px; } :is(#desktop, #home) .vhalf { flex: 1; min-width: 0; } :is(#desktop, #home) .vcols { display: flex; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } :is(#desktop, #home) .vcol { flex: 1; display: grid; grid-template-rows: 120px auto; padding-top: 18px; } /* room for the tallest bar's number */ :is(#desktop, #home) .vbars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; } :is(#desktop, #home) .vbars i { position: relative; width: 40%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; } :is(#desktop, #home) .vbars i b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); padding-bottom: 2px; } :is(#desktop, #home) .vcol small { text-align: center; font-size: 11px; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; } :is(#desktop, #home) .vlabel { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); margin: 4px 0 0; } /* Tiles: streaks, comebacks. */ :is(#desktop, #home) .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding-bottom: 8px; } :is(#desktop, #home) .tile { background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 10px; padding: 10px 12px; } :is(#desktop, #home) .tile .big { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } :is(#desktop, #home) .tile .lbl { font-size: 13px; font-weight: 600; margin-top: 2px; } :is(#desktop, #home) .tile small { font-size: 12px; color: var(--muted); } :is(#desktop, #home) .tile.wide { grid-column: span 2; } :is(#desktop, #home) .tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } :is(#desktop, #home) .tiles.five .tile { padding: 10px; } :is(#desktop, #home) .last5 { display: inline-flex; gap: 4px; font-size: 22px; } :is(#desktop, #home) .last5 b { width: 1.1em; text-align: center; } /* one width per letter: W and L space evenly */ /* Record splits: a won / drawn / lost bar after the label. */ :is(#desktop, #home) :is(td, th).rec { width: 90px; padding-left: 4px; padding-right: 4px; } :is(#desktop, #home) .recbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); gap: 1px; } :is(#desktop, #home) .recbar i.W { background: var(--win, #1f9d55); } :is(#desktop, #home) .recbar i.D { background: color-mix(in srgb, var(--muted) 55%, transparent); } :is(#desktop, #home) .recbar i.L { background: var(--loss, #d12a2a); } /* Minutes by position: each cell shaded by its share of the player's minutes. */ :is(#desktop, #home) td.heat { background: color-mix(in srgb, var(--accent) var(--heat), transparent); } /* The season strip (Overview). */ :is(#desktop, #home) .stat.strip { margin: 0 0 12px; } :is(#desktop, #home) .gstrip { display: flex; align-items: stretch; gap: 4px; height: 118px; padding: 4px 0 8px; } /* !important: the app's general button rule (#desktop main button:not(…)…) is more specific. */ #desktop main .gstrip button.gb { min-height: 0 !important; padding: 0 !important; background: transparent !important; cursor: pointer; flex: 1; position: relative; border-radius: 4px !important; } :is(#desktop, #home) .gstrip .gb small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } #desktop main .gstrip button.gb:hover { background: color-mix(in srgb, var(--text) 8%, transparent) !important; } :is(#desktop, #home) .gstrip .gb:focus-visible { outline: 3px solid var(--accent); } :is(#desktop, #home) .gstrip .gb::before { content: ""; position: absolute; left: 0; right: 0; top: 44%; height: 1px; background: color-mix(in srgb, var(--text) 10%, transparent); } /* The line sits at 44% (the score label takes the bottom); bars reach 40% either way. */ /* Games spread across the card's width; a bar stays a bar (≤ 36 px) however few games there are. */ :is(#desktop, #home) .gstrip .gb i { position: absolute; left: 50%; width: min(56%, 36px); transform: translateX(-50%); border-radius: 3px; height: calc(max(var(--h), 0.08) * 40%); } :is(#desktop, #home) .gstrip .gb.W i { bottom: 56%; background: var(--win, #1f9d55); } :is(#desktop, #home) .gstrip .gb.L i { top: 44%; background: var(--loss, #d12a2a); } /* A draw: a short gray tick on the axis. */ :is(#desktop, #home) .gstrip .gb.D i { top: calc(44% - 1.5px); height: 3px; width: min(40%, 22px); border-radius: 2px; background: var(--muted); } /* Phone sideways: the same charts, a little tighter. */ #home .phoneStats .last5 .res.W { color: var(--win, #1f9d55); } #home .phoneStats .last5 .res.L { color: var(--loss, #d12a2a); } #home .phoneStats .last5 .res.D { color: var(--muted); } #home .phoneStats .hrow { grid-template-columns: minmax(5em, 8em) minmax(0, 1fr) 3em; font-size: 14px; } #home .phoneStats .vcol { grid-template-rows: 90px auto; } #home .phoneStats .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } #home .phoneStats .tile .big { font-size: 22px; } #home .phoneStats .strip header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } #home .phoneStats .strip header small { font-size: 12px; } #home .phoneStats .gstrip { height: 100px; } #home .phoneStats .gstrip .gb { flex: 1; max-width: 48px; position: relative; } #home .phoneStats td.rec { min-width: 64px; } /* Game ☰ → Invite (parentstats.js): who, then what a parent logs; the "Shared with" list. */ #newGame .inviteOpts { display: grid; gap: 10px; margin: 6px 0 4px; } #newGame .inviteOpt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px 12px 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); } #newGame .inviteOpt .txt { display: grid; gap: 3px; flex: 1; min-width: 0; } #newGame .inviteOpt b { font-size: 17px; } #newGame .inviteOpt small { color: var(--muted); font-size: 14px; line-height: 1.3; } #newGame .inviteOpt .chev { flex: none; color: var(--muted); font-size: 22px; } #newGame .inviteOpt:disabled { opacity: 0.55; } #newGame .inviteOpt:disabled .chev { visibility: hidden; } #newGame .inviteSets { display: grid; gap: 4px; margin: 4px 0 8px; } /* "What they log": Back / Cancel never wrap at 320 px; room above the button. */ #newGame header.inviteHead .close { white-space: nowrap; } #newGame header.inviteHead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #newGame p.inviteNote { margin-bottom: 12px; } #newGame p.pickOne { margin: 0 0 8px; text-align: center; font-size: 14px; } #newGame .seg button.primary { flex: 1; min-height: 50px; background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; } #newGame .seg button.primary:disabled { opacity: 0.4; } /* Each shared link: one row (who / what, its status) that opens its sheet. */ #menu button.shared { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; text-align: left; background: none; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 0; min-height: 56px; } #menu .shared .who { display: grid; gap: 2px; min-width: 0; } #menu .shared .who b { font-size: 16px; } #menu .shared .who small { color: var(--muted); font-size: 13px; } #menu .shared .chev { color: var(--muted); font-size: 22px; } #menu .sharedRows { display: grid; } #menu .sharedRows > button.shared:first-child { border-top: 0; padding-top: 0; } /* A parent link's sheet (parentstats.js statLinkDialog): QR, Send, a line, then this link's actions. */ #newGame .linkSheet { display: grid; gap: 12px; } #newGame .linkSheet .qr { justify-self: center; width: min(260px, 70vw); } #newGame .sendLink { width: 100%; min-height: 50px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; } #newGame .linkSheet .lock-note { margin: 0; text-align: center; } #newGame .linkActions { display: grid; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } #newGame .linkActions h4 { margin: 0; font-size: 13px; color: var(--muted); } #newGame .linkAct { display: grid; gap: 4px; } #newGame .linkActions button { width: 100%; min-height: 46px; border-radius: 12px; font-weight: 700; background: color-mix(in srgb, var(--text) 7%, transparent); } #newGame .linkAct small { color: var(--muted); font-size: 13px; padding: 0 4px; } #newGame .linkActions button.danger { color: var(--loss, #d12a2a); } #newGame .linkSheet .inUse { margin: 0; text-align: center; font-size: 17px; } #newGame .linkSheet .qrFold { display: grid; gap: 10px; } #newGame .linkSheet .qrFold summary { cursor: pointer; color: var(--accent); font-weight: 700; text-align: center; padding: 8px 0; } #newGame .linkSheet .qrFold[open] { gap: 12px; } #newGame header .title { display: grid; min-width: 0; } #newGame header .title strong { font-size: 22px; } #newGame header .title small { font-size: 13px; font-weight: 600; color: var(--muted); } /* ------------------------------------------------ Stats tab: a coach's phone logging parent stats (coachstats.js) */ #statsView { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); padding: calc(max(16px, env(safe-area-inset-top)) + 56px) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); } #statsView .wrap { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #statsView .statBoard { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--panel); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); font-size: 17px; } #statsView .statBoard span { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; } #statsView h3 { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #statsView .pad { display: grid; gap: 8px; } #statsView .pad .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #statsView .pad button.stat { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 64px; padding: 8px; border-radius: 16px; font-size: 18px; font-weight: 800; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } #statsView .pad button.stat.big { min-height: 84px; font-size: 21px; } #statsView .pad button.stat.save { background: var(--accent); color: #fff; } #statsView .pad button.stat small { font-size: 13px; font-weight: 600; opacity: 0.75; } #statsView ol.mine { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #statsView ol.mine button { display: flex; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font-size: 16px; font-weight: 600; text-align: left; } #statsView ol.mine .when { color: var(--muted); font-variant-numeric: tabular-nums; } #statsView .empty { margin: 0; color: var(--muted); } #statsView .tabEnd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; } #statsView .tabEnd button { min-height: 44px; padding: 0 14px; border-radius: 12px; font-weight: 700; } #statsView .tabEnd .subtle:not(.danger) { background: transparent; color: var(--accent); padding: 0; } /* "Who took it?" — a sheet over the bottom of the tab; skips itself after 8 s (the bar). */ #statsView .cpick { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; display: grid; gap: 8px; padding: 14px max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-radius: 20px 20px 0 0; background: var(--panel); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25); } #statsView .cpick .pickHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; } #statsView .cpick .skip { min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } #statsView .cpick .skip.wide { width: 100%; } #statsView .cpick .pickBar { height: 4px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: cpickBar linear forwards; } @keyframes cpickBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } #statsView .cpick h4 { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #statsView .cpick .names { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; } #statsView .cpick .names button { min-height: 48px; border-radius: 12px; font-size: 16px; font-weight: 700; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } /* Three tabs on a phone: the back button is just "‹" (as on the smallest phones). */ #backBtn.short .lbl, #backBtn.short small { display: none; } /* A set someone else already logs (coachstats.js takenRow): no switch, says who has it. */ .takenRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; opacity: 0.85; } .takenRow .lbl { display: grid; color: var(--muted); font-weight: 700; } .takenRow .lbl small { color: var(--muted); font-size: 13px; font-weight: 500; } .takenRow .inUse { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); } /* Game ☰ → Tracking: the stats row reads like the switch row above it (label, small line under it). */ #menu .mrow.statsRow .lbl { display: grid; text-align: left; } #menu .mrow.statsRow .lbl small { color: var(--muted); font-size: 13px; font-weight: 500; } #menu .toggleRow.armed .lbl small { color: #d93a32; font-weight: 700; } /* ---- Hockey game screen (sports/hockey/game.js, 2026-10-28). Phone-first, readable in a cold rink: the time left is the biggest thing on screen, Start / Stop sit right under it, shots are two big counters with one-tap logging. Reuses the soccer game's .board, .clock, .actions, .minirow, log rows. */ #log .hockey .clock.hclock { flex-direction: column; gap: 6px; } #log .hockey .clock .meta { flex-direction: row; gap: 10px; align-items: baseline; } #log .hockey .clock .time { font-size: clamp(64px, 20vw, 96px); line-height: 1.05; font-weight: 800; letter-spacing: 0.01em; } #log .hockey .clock .time.idle { color: var(--muted); } #log .hockey .clock .time.stopped { color: #d12a2a; } #log .hockey .clock .ctl { margin-top: 4px; width: 100%; } #log .hockey .clock .ctl button.start, #log .hockey .clock .ctl button.stop { flex: 1 1 auto; min-width: 46%; min-height: 72px; font-size: 24px; font-weight: 800; border-radius: 18px; } #log .hockey .clock .ctl button.stop { background: #d12a2a; color: #fff; } #log .hockey .clock .ctl button.subtle { min-height: 52px; font-size: 16px; } #log .hockey .clock.break .ctl button.start { min-width: 70%; } #log .hockey .horn { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: #fff3cd; border: 1px solid #f0d58a; color: #6b4e00; } #log .hockey .horn strong { font-size: 17px; } #log .hockey .horn span { font-size: 15px; font-weight: 600; } /* The penalty box: PP (they're short) in the accent, PK (we are) in red; the time counts down on game time. */ #log .hockey .box { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } #log .hockey .box[hidden] { display: none; } #log .hockey .box .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 16px; font-weight: 800; } #log .hockey .box .chip.pk { background: color-mix(in srgb, #d12a2a 14%, transparent); color: #d12a2a; } #log .hockey .box .chip .t { font-variant-numeric: tabular-nums; font-size: 18px; } #log .hockey .box .chip small { font-size: 13px; font-weight: 700; opacity: 0.85; } #log .hockey .actions.shots { margin-top: -4px; } #log .hockey .actions .shot { display: flex; flex-direction: column; justify-content: center; gap: 0; min-height: 76px; line-height: 1.1; } #log .hockey .actions .shot small { font-size: 14px; font-weight: 700; color: var(--muted); } #log .hockey .actions .shot b { font-size: 30px; font-variant-numeric: tabular-nums; } #log .hockey .shotLine { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } #log .hockey .shotLine small { display: block; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } #log .hockey ol.events li .at { min-width: 5.6em; } #log .hockey ol.events li button.later { background: transparent; padding: 0; min-height: 28px; text-align: left; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); } #rosterView .hockey .rtable { display: grid; gap: 6px; } #rosterView .hockey .rhead, #rosterView .hockey .rrow { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) repeat(3, 2.6em); align-items: center; gap: 6px; } #rosterView .hockey .rhead { padding: 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } #rosterView .hockey .rrow { min-height: 46px; padding: 6px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 17px; font-weight: 600; } #rosterView .hockey .rrow b { color: var(--accent); } #rosterView .hockey .rrow span:not(.nm), #rosterView .hockey .rhead span:not(:nth-child(2)) { text-align: right; font-variant-numeric: tabular-nums; } #rosterView .hockey .rrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The team's Roster tab (sports/hockey/team.js): # · name · GP G A P (PIM once there is one) — on every width. */ #home .rtable.hockey .rhead, #home .rtable.hockey .rrow { grid-template-columns: 2.4rem minmax(0, 1fr) repeat(auto-fit, minmax(2.4rem, 2.9rem)); } @media (max-width: 520px) { #home .rtable.hockey .rhead, #home .rtable.hockey .rrow { grid-template-columns: 2.4em minmax(0, 1fr) repeat(auto-fit, minmax(2.2em, 2.6em)); } } @media (max-width: 420px) { #log .hockey .clock .ctl button.start, #log .hockey .clock .ctl button.stop { min-height: 64px; font-size: 21px; } #log .hockey .actions .shot b { font-size: 26px; } }