/* ═══════════════════════════════════════════════════════════════════════════ Themes. Loaded last so it wins on colour without touching layout. style.css owns structure and declares the design tokens; this file redefines those tokens per theme and adds the skin rules a token can't express — a moulded plastic frame, an outlined display face, a per-side accent. The canvas half of each theme (mino palette, cell bevel, well texture) is in theme.js, because neither renderer can read CSS variables. Change one, check the other. Selected by [data-theme] on , set by the inline script in index.html before first paint and made authoritative by theme.js. ═══════════════════════════════════════════════════════════════════════════ */ /* ╔═════════════════════════════════════════════════════════════════════════╗ ║ ARCADE CABINET — the default. ║ ║ ║ ║ Tetris Battle's vernacular: a grass-green field, each playfield a piece ║ ║ of glossy moulded plastic with the Next/Hold pods bolted on, and chunky ║ ║ outlined lettering. Three light sources are consistent throughout — ║ ║ a specular strip along the top of every raised surface, a dark lip along ║ ║ the bottom, and a hard near-black keyline around everything. ║ ╚═════════════════════════════════════════════════════════════════════════╝ */ :root[data-theme="arcade"] { --bg: #8ecb2c; --bg-image: radial-gradient(150% 92% at 50% 122%, rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(180deg, #5da416 0%, #7ec024 32%, #a8d857 64%, #dcf0a8 100%); --panel: linear-gradient(180deg, #fffef7, #f0f5da); --panel-2: #e9f0d3; --panel-3: #dce7bd; --well: #ffffff; --board: #20242a; --text: #16300b; --muted: #4d7526; --accent: #ffc21a; --accent-2: #ff8a17; --accent-3: #e93fae; --on-accent: #2b2000; /* Gold is unreadable as text on cream, so light surfaces get this instead. */ --accent-ink: #8a5c00; --danger: #f0453c; --danger-2: #8a1a13; --warn: #ff8a17; --gold: #ffc21a; --ok: #4c9f1c; --border: rgba(20, 38, 12, 0.24); --border-hover: rgba(20, 38, 12, 0.55); --scrim: rgba(13, 19, 9, 0.86); --scrim-modal: rgba(26, 48, 10, 0.62); --shadow-panel: 0 7px 0 rgba(20, 38, 12, 0.16), 0 26px 40px rgba(38, 74, 14, 0.3); --font-display: "Arial Black", "Arial Bold", Gadget, system-ui, sans-serif; --display-transform: uppercase; --display-weight: 900; --display-spacing: 0.5px; /* The outline ring. -webkit-text-stroke draws the stroke *over* the glyph and thins it; a text-shadow ring surrounds it instead, which is how the Flash original did it. */ --ink-out: #10210a; --outline: 2px 0 var(--ink-out), -2px 0 var(--ink-out), 0 2px var(--ink-out), 0 -2px var(--ink-out), 1.5px 1.5px var(--ink-out), -1.5px 1.5px var(--ink-out), 1.5px -1.5px var(--ink-out), -1.5px -1.5px var(--ink-out); --outline-drop: 0 4px 0 rgba(16, 33, 10, 0.34); /* Moulded plastic: the rig, its pods, and the lip under a button. */ --shell: linear-gradient(180deg, #626c78 0%, #3a424b 5%, #262c33 26%, #171b20 100%); --shell-edge: #0d1116; --shell-ink: #eaf4d7; --shell-muted: #a7ba90; --pod: linear-gradient(180deg, #39414a 0%, #262c33 40%, #1a1f25 100%); --btn-face: linear-gradient(180deg, #ffffff, #e6efd0); --btn-lip: #14260c; } /* A vignette over the field. Negative z-index paints above the body background but below content, so it needs no wrapper element. */ :root[data-theme="arcade"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 40%, transparent 46%, rgba(24, 46, 8, 0.26) 100%); } /* ── display type ───────────────────────────────────────────────────────── */ /* h1 in style.css clips a gradient to the text, so the gradient has to be cleared here as well as the transparent fill. */ :root[data-theme="arcade"] h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; text-shadow: var(--outline), var(--outline-drop); font-size: 2.5rem; } :root[data-theme="arcade"] .tagline { font-weight: 700; color: #4d7526; } /* ── menu card ──────────────────────────────────────────────────────────── */ :root[data-theme="arcade"] #menu { border: 3px solid var(--btn-lip); border-radius: 22px; } :root[data-theme="arcade"] #mascot { filter: drop-shadow(0 7px 10px rgba(20, 50, 6, 0.35)); } :root[data-theme="arcade"] .divider { font-weight: 800; color: #6b8f3d; } :root[data-theme="arcade"] .divider::before, :root[data-theme="arcade"] .divider::after { background: #b9d089; } /* ── buttons: a face, a lip, and travel when pressed ───────────────────── */ :root[data-theme="arcade"] button { font-weight: 800; border: 2px solid var(--btn-lip); border-radius: 13px; background: var(--btn-face); color: #1d3a10; box-shadow: 0 3px 0 var(--btn-lip); transition: transform 0.07s ease, background 0.15s ease, box-shadow 0.07s ease; } :root[data-theme="arcade"] button:hover { background: linear-gradient(180deg, #ffffff, #dfeac4); border-color: var(--btn-lip); transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-lip); } :root[data-theme="arcade"] button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--btn-lip); } :root[data-theme="arcade"] button.primary { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.5px; font-size: 1.05rem; color: #fff; text-shadow: var(--outline); background: linear-gradient(180deg, #ffe066 0%, #ffc21a 46%, #f08c07 100%); border: 2px solid var(--btn-lip); box-shadow: 0 4px 0 var(--btn-lip), inset 0 2px 0 rgba(255, 255, 255, 0.55); } :root[data-theme="arcade"] button.primary:hover { filter: none; background: linear-gradient(180deg, #ffe680 0%, #ffcb37 46%, #f79a12 100%); box-shadow: 0 5px 0 var(--btn-lip), inset 0 2px 0 rgba(255, 255, 255, 0.6); } :root[data-theme="arcade"] button.primary:active { box-shadow: 0 0 0 var(--btn-lip), inset 0 2px 0 rgba(255, 255, 255, 0.4); } :root[data-theme="arcade"] button.ghost { background: #eef3e0; box-shadow: 0 2px 0 var(--btn-lip); color: #3f6b1f; } :root[data-theme="arcade"] button.ghost:hover { background: #e3ecd0; color: #1d3a10; } :root[data-theme="arcade"] .name-input, :root[data-theme="arcade"] .join-row input { border: 2px solid var(--btn-lip); border-radius: 11px; font-weight: 700; } /* ── the rig: one piece of moulded plastic ──────────────────────────────── */ :root[data-theme="arcade"] .player { background: var(--shell); border: 3px solid var(--shell-edge); border-radius: 26px; padding: 14px 12px 16px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 8px 0 rgba(13, 17, 22, 0.22), 0 22px 32px rgba(28, 60, 10, 0.34); } /* An *outset* ring on the canvas itself. Inset shadows are painted under a canvas's own bitmap and never show, and putting the ring on .board-wrap would frame the nameplate too — the playfield has to read as its own recessed part. */ :root[data-theme="arcade"] canvas.board { border-radius: 5px; box-shadow: 0 0 0 3px var(--shell-edge), 0 3px 8px rgba(0, 0, 0, 0.55); } :root[data-theme="arcade"] .board-wrap { padding-top: 2px; } :root[data-theme="arcade"] .name-tag { margin-bottom: 11px; padding: 6px 12px 7px; border-radius: 11px; background: linear-gradient(180deg, #1c2127, #0f1216); border: 2px solid var(--shell-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 7px rgba(0, 0, 0, 0.55); font-size: 1.3rem; line-height: 1.15; } :root[data-theme="arcade"] .side h3 { color: var(--shell-muted); font-weight: 800; } :root[data-theme="arcade"] .slot { background: var(--pod); border: 2px solid var(--shell-edge); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26); } :root[data-theme="arcade"] .stat .label { color: var(--shell-muted); font-weight: 800; } :root[data-theme="arcade"] .stat .value { font-family: var(--font-display); color: #fff; text-shadow: var(--outline); font-variant-numeric: tabular-nums; } :root[data-theme="arcade"] .name-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.5px; color: #fff; text-shadow: var(--outline); } :root[data-theme="arcade"] .badge { background: linear-gradient(180deg, #f4f8e6, #dbe6c2); color: #3f6b1f; font-weight: 800; letter-spacing: 0.04em; border: 1.5px solid var(--shell-edge); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } :root[data-theme="arcade"] .garbage-meter { background: #14181d; border: 2px solid var(--shell-edge); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6); } /* The burger sits on the green field, not on the rig, so it keeps the cream button face — only its bars need to change from near-white to the ink. */ :root[data-theme="arcade"] .burger span { background: #1d3a10; } :root[data-theme="arcade"] .burger:hover span { background: #8a5c00; } /* Nudge the combo readout clear of the taller nameplate. */ :root[data-theme="arcade"] .combo-indicator { top: 54px; } /* ── in-play callouts: outlined, never gradient-clipped ────────────────── */ :root[data-theme="arcade"] .combo-indicator .c, :root[data-theme="arcade"] .combo-indicator .b, :root[data-theme="arcade"] .clear-popup .pl, :root[data-theme="arcade"] .clear-popup .pp, :root[data-theme="arcade"] .countdown span.go { background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-family: var(--font-display); } :root[data-theme="arcade"] .combo-indicator .c { color: #fff; text-shadow: var(--outline); } :root[data-theme="arcade"] .combo-indicator .b { color: var(--gold); text-shadow: var(--outline); } :root[data-theme="arcade"] .clear-popup .pl { color: #fff; text-shadow: var(--outline), var(--outline-drop); } :root[data-theme="arcade"] .clear-popup .pp { color: var(--gold); text-shadow: var(--outline); } :root[data-theme="arcade"] .countdown span, :root[data-theme="arcade"] .countdown span.go { font-family: var(--font-display); color: var(--gold); text-shadow: var(--outline), 0 8px 0 rgba(16, 33, 10, 0.3); } :root[data-theme="arcade"] .overlay .big { font-family: var(--font-display); text-transform: uppercase; color: #fff; text-shadow: var(--outline); } :root[data-theme="arcade"] .overlay.win .big { color: #a8e83e; } :root[data-theme="arcade"] .overlay.lose .big { color: #ff8a8a; } :root[data-theme="arcade"] .overlay .ov-btn { font-family: var(--font-display); text-transform: uppercase; color: #fff; text-shadow: var(--outline); background: linear-gradient(180deg, #ffe066 0%, #ffc21a 46%, #f08c07 100%); border: 2px solid var(--btn-lip); box-shadow: 0 4px 0 var(--btn-lip), inset 0 2px 0 rgba(255, 255, 255, 0.55); } :root[data-theme="arcade"] .overlay .ov-btn-extra { background: var(--btn-face); color: #1d3a10; text-shadow: none; font-family: inherit; text-transform: none; } /* ── the round clock and KO counter ─────────────────────────────────────── */ /* The clock is the loudest number on screen in the original, sat in its own plate between the two nameplates. */ :root[data-theme="arcade"] .match-clock { padding: 4px 18px 6px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #2c333b, #171b20); border: 3px solid var(--shell-edge); border-top: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 6px 14px rgba(28, 60, 10, 0.3); } :root[data-theme="arcade"] .mc-label { color: var(--shell-muted); font-weight: 800; } :root[data-theme="arcade"] .mc-time { font-family: var(--font-display); color: var(--gold); text-shadow: var(--outline); font-size: 2.2rem; } :root[data-theme="arcade"] .match-clock.urgent .mc-time { color: #ff6b5e; } :root[data-theme="arcade"] .ko-pip { background: #14181d; border: 2px solid var(--shell-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } :root[data-theme="arcade"] .ko-pip.on { background: radial-gradient(circle at 40% 30%, #fff3b0, var(--gold)); border-color: var(--shell-edge); box-shadow: 0 0 9px rgba(255, 194, 26, 0.9); } :root[data-theme="arcade"] .ko-flash { font-family: var(--font-display); color: #fff; text-shadow: var(--outline), 0 0 26px rgba(255, 90, 60, 0.9); } :root[data-theme="night"] .mc-label { font-family: var(--font-display); letter-spacing: 0.22em; } :root[data-theme="night"] .mc-time { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: -0.03em; } :root[data-theme="night"] .ko-pip { background: rgba(255, 255, 255, 0.07); } /* Your pips light in your own colour, theirs in theirs — same rule as the rim. */ :root[data-theme="night"] .player .ko-pip.on { background: var(--side); border-color: var(--side); box-shadow: 0 0 9px color-mix(in srgb, var(--side) 70%, transparent); } :root[data-theme="night"] .ko-flash { font-family: var(--font-display); letter-spacing: 0.08em; color: var(--danger); text-shadow: 0 0 26px rgba(255, 84, 112, 0.7); } /* ── light-surface accents ──────────────────────────────────────────────── */ :root[data-theme="arcade"] .lb-val, :root[data-theme="arcade"] .pz-goal, :root[data-theme="arcade"] .modal-card .room-code, :root[data-theme="arcade"] .spec-toast { color: var(--accent-ink); } :root[data-theme="arcade"] .lb-col h4 { color: #4d7526; } :root[data-theme="arcade"] .modal-card h2 { font-family: var(--font-display); text-transform: uppercase; color: #1d3a10; } :root[data-theme="arcade"] .modal-card { border: 3px solid var(--btn-lip); } :root[data-theme="arcade"] .netline .chip, :root[data-theme="arcade"] .controls-hint kbd { background: #eef3e0; border: 1.5px solid rgba(20, 38, 12, 0.4); color: #3f6b1f; font-weight: 700; } :root[data-theme="arcade"] .chat-head { background: #e4ecca; } :root[data-theme="arcade"] .chat { border: 2px solid var(--btn-lip); } :root[data-theme="arcade"] .chat-msg.mine .txt { background: linear-gradient(180deg, #ffd970, #f6b511); color: #2b2000; font-weight: 600; } /* The specials panel is mounted inside the rig's side column, so it has to be another pod — a cream card there reads as a hole in the moulding. */ :root[data-theme="arcade"] .side .spec-bar { background: var(--pod); border: 2px solid var(--shell-edge); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26); } :root[data-theme="arcade"] .side .spec-meter { background: #14181d; border: 1px solid var(--shell-edge); } :root[data-theme="arcade"] .spec-slot { background: linear-gradient(180deg, #2f363e, #171b20); border: 2px solid var(--shell-edge); color: var(--shell-ink); } :root[data-theme="arcade"] .spec-slot.ready { border-color: var(--gold); background: linear-gradient(180deg, #4a4227, #2a2415); } :root[data-theme="arcade"] .spec-slot .sk { color: var(--shell-muted); } /* The floating toast is over the field, not in the rig, so it stays cream. */ :root[data-theme="arcade"] .side .spec-toast { border: 2px solid var(--btn-lip); } /* ╔═════════════════════════════════════════════════════════════════════════╗ ║ NIGHT MATCH — the option. ║ ║ ║ ║ Dark, but committed instead of hedged. One accent per side — yours mint, ║ ║ theirs coral — carried through the board's rim light, the nameplate and ║ ║ the garbage meter, so you never lose track of whose stack is whose. ║ ║ Condensed uppercase labels, tabular figures, and no gradients anywhere. ║ ╚═════════════════════════════════════════════════════════════════════════╝ */ :root[data-theme="night"] { --bg: #0a0c12; --bg-image: radial-gradient(900px 520px at 50% -12%, #1d2440, transparent), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 44px); --panel: linear-gradient(180deg, #141926, #0d111b); --panel-2: rgba(255, 255, 255, 0.045); --panel-3: rgba(255, 255, 255, 0.085); --well: #070910; --board: #070910; --text: #eef1f6; --muted: #7f8798; --accent: #3ddc97; --accent-2: #35c6e8; --accent-3: #b96ae8; --on-accent: #05130c; --accent-ink: #3ddc97; --danger: #ff5470; --danger-2: #6d1526; --warn: #e8bd2e; --gold: #e8bd2e; --ok: #3ddc97; --border: rgba(255, 255, 255, 0.07); --border-hover: rgba(255, 255, 255, 0.18); --scrim: rgba(6, 8, 14, 0.84); --scrim-modal: rgba(4, 6, 12, 0.76); --shadow-panel: 0 24px 44px rgba(0, 0, 0, 0.55); --font-display: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", system-ui, sans-serif; --display-transform: uppercase; --display-weight: 700; --display-spacing: 0.09em; --side-you: #3ddc97; --side-them: #ff5470; --side: var(--side-you); } :root[data-theme="night"] h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); font-size: 2.5rem; } /* A short mint rule instead of a gradient fill — the accent is spent on one mark rather than smeared across the wordmark. */ :root[data-theme="night"] h1::after { content: ""; display: block; width: 56px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--accent); } :root[data-theme="night"] #menu { border-radius: 12px; } :root[data-theme="night"] #mascot { filter: drop-shadow(0 6px 18px rgba(61, 220, 151, 0.22)); } :root[data-theme="night"] button { border-radius: 7px; letter-spacing: 0.02em; } :root[data-theme="night"] button:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: rgba(61, 220, 151, 0.09); } :root[data-theme="night"] button.primary { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; font-size: 1.05rem; background: var(--accent); color: var(--on-accent); } :root[data-theme="night"] button.primary:hover { filter: brightness(1.08); } :root[data-theme="night"] .name-input, :root[data-theme="night"] .join-row input { border-radius: 7px; } :root[data-theme="night"] .divider { letter-spacing: 0.18em; } /* ── per-side identity ──────────────────────────────────────────────────── */ :root[data-theme="night"] .player { position: relative; border-radius: 12px; --side: var(--side-them); } :root[data-theme="night"] .player.mine { --side: var(--side-you); } /* A single hairline of the side's colour along the top of the rig. */ :root[data-theme="night"] .player::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: var(--side); } /* The rim light is the whole point of the per-side colour, so it has to be visible without lighting up the stack next to it: a hard 1px edge plus a short, low glow. */ :root[data-theme="night"] canvas.board { border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--side) 62%, transparent), 0 0 18px -4px color-mix(in srgb, var(--side) 45%, transparent); } :root[data-theme="night"] .name-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; /* Condensed reads smaller per pixel than the body face, so it needs the size to hold its own against the board beside it. */ font-size: 1.25rem; color: var(--side); /* A hairline under the name separates it from the well without adding a second panel — the rig is already one flat surface here. */ padding-bottom: 7px; margin-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--side) 22%, transparent); } :root[data-theme="night"] .side h3 { font-family: var(--font-display); letter-spacing: 0.16em; font-weight: 700; } :root[data-theme="night"] .slot { border-radius: 8px; } :root[data-theme="night"] .stat .label { font-family: var(--font-display); letter-spacing: 0.14em; } /* Condensed rather than monospaced: the mono stacks available here slash their zero, which reads as a glyph error in a score. tabular-nums still keeps the digits from jittering as the number climbs. */ :root[data-theme="night"] .stat .value { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; font-size: 1.5rem; } :root[data-theme="night"] .garbage-meter .fill { background: linear-gradient(180deg, var(--side), color-mix(in srgb, var(--side) 45%, #000)); } :root[data-theme="night"] .badge { font-family: var(--font-display); letter-spacing: 0.1em; } :root[data-theme="night"] .burger:hover span { background: var(--accent); } /* ── in-play callouts: solid colour, no gradient clipping ──────────────── */ :root[data-theme="night"] .combo-indicator .c, :root[data-theme="night"] .combo-indicator .b, :root[data-theme="night"] .clear-popup .pl { background: none; -webkit-background-clip: border-box; background-clip: border-box; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; } :root[data-theme="night"] .combo-indicator .c { color: var(--accent); filter: drop-shadow(0 0 12px rgba(61, 220, 151, 0.55)); } :root[data-theme="night"] .combo-indicator .b { color: var(--gold); filter: drop-shadow(0 0 12px rgba(232, 189, 46, 0.5)); } :root[data-theme="night"] .clear-popup .pl { color: var(--text); filter: drop-shadow(0 0 16px rgba(61, 220, 151, 0.45)); } :root[data-theme="night"] .clear-popup .pp { color: var(--gold); } :root[data-theme="night"] .countdown span { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: -0.03em; text-shadow: 0 0 30px rgba(61, 220, 151, 0.55), 0 6px 24px rgba(0, 0, 0, 0.6); } :root[data-theme="night"] .countdown span.go { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); } :root[data-theme="night"] .overlay .big { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; } :root[data-theme="night"] .overlay .ov-btn { background: var(--accent); color: var(--on-accent); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; } :root[data-theme="night"] .chat-msg.mine .txt { background: var(--accent); color: var(--on-accent); } :root[data-theme="night"] .spec-meter-fill { background: var(--accent); } :root[data-theme="night"] .modal-card h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; } :root[data-theme="night"] .lb-col h4 { font-family: var(--font-display); letter-spacing: 0.14em; } /* ── settings dialog: controls that are