/* =============================================================================
██╗ ██╗ █████╗ ██████╗ ██████╗ ██████╗ ██╗██████╗ ██████╗ ███████╗
╚██╗ ██╔╝██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██╔════╝
╚████╔╝ ███████║██████╔╝██║ ██║██████╔╝██║██████╔╝██║ ██║███████╗
╚██╔╝ ██╔══██║██╔══██╗██║ ██║██╔══██╗██║██╔══██╗██║ ██║╚════██║
██║ ██║ ██║██║ ██║██████╔╝██████╔╝██║██║ ██║██████╔╝███████║
╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚═════╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝
YARDBIRD'S GAMES — style.css
Modern Light Theme · Single-file design system
=============================================================================
ARCHITECTURE AT A GLANCE
─────────────────────────────────────────────────────────────────────────────
This file is structured in 12 logical sections top-to-bottom, matching the
order components appear in index.html:
SECTION 1 — CSS Custom Properties (Design Tokens)
SECTION 2 — Global Reset & Body
SECTION 3 — Layout Shell (.game-wrapper, .container)
SECTION 4 — Header & Navigation
SECTION 5 — Buttons
SECTION 6 — Form Controls (Pills, Cards, Inputs)
SECTION 7 — Play Screen Components (Prompt, Timer, Score, Visualizer)
SECTION 8 — Multiple Choice Buttons
SECTION 9 — Finale Screen (Playlist export box)
SECTION 10 — Modals (Overlays, Stats, Trophies)
SECTION 11 — Game-Card Cartridge Tiles (Main Menu)
SECTION 12 — Screen Transitions & Responsive Overrides
DESIGN PHILOSOPHY
─────────────────────────────────────────────────────────────────────────────
· Light-mode-first canvas: The .container is white (#ffffff). All colours
are defined in :root and consumed via var(--token) so a dark-mode
toggle only needs to override the root block.
· Touch-first interactions: Every interactive element has a :active rule,
-webkit-tap-highlight-color: transparent on *, and touch-action:
manipulation on body to kill the 300ms tap delay.
· Cartridge-agnostic: No class is hard-tied to a specific game.
All cartridges reuse the same .mc-btn, .score-pill, .timer-bar-fill, etc.
· !important usage policy: Only used where JS inline styles or highly
specific selectors would otherwise win (e.g., .hidden, .game-card hover,
client-mode overrides). Avoid adding new !important rules.
============================================================================= */
/* =============================================================================
SECTION 1 — CSS CUSTOM PROPERTIES (Design Tokens)
─────────────────────────────────────────────────────────────────────────────
All colour, shadow, and dynamic-state values live here.
JS reads/writes --active-vis at runtime via:
document.documentElement.style.setProperty('--active-vis', color)
to tint the audio visualizer bars with the active player's colour.
COLOUR RATIONALE:
--primary #6e45e2 Deep violet — brand identity, primary actions
--secondary #88d3ce Soft teal — body gradient end-stop only
--dark-text #2d3436 Near-black — all body copy on the white canvas
--card-bg #ffffff The container surface (white card on gradient bg)
--surface #fdfdfd Slightly-off-white for nested cards/inputs
--border-light #eeeeee Hairline borders; light enough to recede visually
--success #00b894 Mint green — correct answer feedback
--fail #d63031 Crimson — wrong answer feedback
--brand-glow rgba(110,69,226,0.3) Purple shadow used on all CTAs
PLAYER COLOURS (--p1 … --p4):
Assigned in order as players join a room (state.js `colors` array maps
to these variables). Darkened relative to a typical neon palette so
they remain readable as text on the white canvas.
============================================================================= */
:root {
/* ── Core Palette ─────────────────────────────────── */
--primary: #6e45e2; /* Brand violet — buttons, borders, focus rings */
--secondary: #88d3ce; /* Teal — body background gradient only */
--dark-text: #2d3436; /* Near-black body copy on white canvas */
--light-text: #ffffff; /* White text (buttons, overlays) */
--card-bg: #ffffff; /* .container background */
--surface: #fdfdfd; /* Nested card / input background */
--border-light: #eeeeee; /* Hairline borders — recedes on white */
--success: #00b894; /* Mint — correct answer state */
--fail: #d63031; /* Red — wrong answer state */
--brand-glow: rgba(110, 69, 226, 0.3); /* Violet box-shadow on CTAs */
--text-muted: #888888; /* Secondary labels, descriptions */
/* ── Player Colours (indexed 1-4, assigned by join order) ── */
--p1: #6e45e2; /* P1 — Purple (matches --primary) */
--p2: #00b894; /* P2 — Mint (matches --success) */
--p3: #e84393; /* P3 — Hot pink */
--p4: #f39c12; /* P4 — Amber — also used for bonus round labels */
/* ── Dynamic State Token ──────────────────────────── */
/* Set at runtime by JS to match the active player's colour.
Controls .visualizer .vis-bar fill during audio playback.
Default = --primary (Player 1 / solo mode). */
--active-vis: var(--primary);
}
/* =============================================================================
SECTION 2 — GLOBAL RESET & BODY
─────────────────────────────────────────────────────────────────────────────
* reset:
· box-sizing: border-box on every element so padding never
overflows a container unexpectedly.
· -webkit-tap-highlight-color: transparent removes the grey
flash on mobile tap — essential for a game feel.
· outline: none removes browser focus rings globally.
(Accessibility note: if you add keyboard support later,
restore outlines for :focus-visible selectors.)
body:
· The purple-to-teal gradient fills the viewport behind the
white .container card; visible as the "frame" on desktop.
· display:flex + justify-content:center centres .game-wrapper.
· user-select: none prevents accidental text selection during
rapid tapping in MC and math rounds.
· touch-action: manipulation eliminates the 300ms tap delay
on iOS/Android without needing a FastClick library.
============================================================================= */
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent; /* No grey flash on mobile tap */
outline: none; /* Remove default focus rings */
}
body {
/* Diagonal gradient — visible as frame behind the white card */
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: var(--dark-text);
font-family: 'Segoe UI', system-ui, sans-serif;
margin: 0;
display: flex;
justify-content: center; /* Centre .game-wrapper horizontally */
min-height: 100vh; /* Full viewport height always */
padding: 10px; /* Breathing room at viewport edges */
-webkit-user-select: none; /* Prevent text selection on iOS */
user-select: none;
touch-action: manipulation; /* Kill 300ms tap delay everywhere */
}
/* =============================================================================
SECTION 3 — LAYOUT SHELL (.game-wrapper · .container)
─────────────────────────────────────────────────────────────────────────────
.game-wrapper
· A thin centering band that constrains max-width to 600px.
· On desktop this creates the "phone in a frame" look.
· On mobile it fills the viewport edge-to-edge.
.container
· THE white card — the game's visible canvas.
· display:flex + flex-direction:column allows each child screen
(#setup-screen, #play-screen, etc.) to use flex:1 and fill the
remaining height without hard-coding pixel heights.
· min-height:85vh keeps the card tall even when content is sparse
(e.g., the daily button screen between rounds).
· border-radius:20px + box-shadow gives the card a lifted feel
against the gradient backdrop.
Screen utility rules:
· The four main screens (#play-screen, #final-screen, etc.) use
flex:1 and justify-content:center so their content is always
vertically centred inside the card regardless of how much content
is on screen at any time.
· .hidden { display:none !important } — the single visibility toggle
used by showModal(), hideModal(), and all screen transitions in JS.
The !important ensures inline styles from JS never accidentally
override a hidden element.
============================================================================= */
.game-wrapper {
width: 100%;
max-width: 600px; /* Caps the app at a phone-width column on wide screens */
display: flex;
justify-content: center;
}
/* The white card — all game screens live inside this */
.container {
background: var(--card-bg);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
text-align: center;
border: none;
width: 100%;
flex: 1 1 100%;
max-width: 600px;
min-height: 85vh; /* Keep card tall even with sparse content */
margin-bottom: 20px;
align-self: center;
display: flex;
flex-direction: column; /* Children stack vertically; screens use flex:1 */
}
/* Each screen fills remaining container height and centres its content */
#play-screen,
#final-screen,
#setup-screen,
#main-menu-screen {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Master visibility toggle — used by showModal() / hideModal() / all JS screens.
!important wins over any specificity or inline style. */
.hidden { display: none !important; }
/* =============================================================================
SECTION 4 — HEADER & NAVIGATION
─────────────────────────────────────────────────────────────────────────────
#game-header
· position:relative is the anchor for the absolutely-positioned
icon buttons (.header-btn) that flank the title.
· min-height:40px matches the button diameter so the row never
collapses when the title is short.
.header-btn
· All three icon buttons (☰ menu, ℹ info, 📊 stats) share this class.
· Circular pill with a subtle border; positioned absolutely so they
don't affect the title's horizontal centering.
· position offsets are set per-ID (#info-btn, #stats-btn) below.
· JS calls element.classList.add/remove('hidden') to show/hide
individual buttons depending on the active screen.
#main-title
· Gradient text via -webkit-background-clip:text + transparent fill.
· Padding: left 45px (clears ☰ button) / right 80px (clears two
right-side buttons).
· On the home screen (.home-screen modifier added by JS) padding resets
to 0 and the title fills the full width centred.
#final-subtitle
· display:none !important — always hidden.
Content is injected by JS but visually suppressed; acts as a
data carrier read by share/stats logic without being seen.
NOTE: If you want the subtitle visible in a future design, just
remove this rule.
============================================================================= */
#game-header {
position: relative; /* Anchor for absolutely-positioned icon buttons */
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px; /* Prevents row collapse when title is empty */
}
/* Shared style for all three header icon buttons (☰ ℹ 📊) */
.header-btn {
position: absolute; /* Float left/right without disturbing the title */
width: 32px;
height: 32px;
border-radius: 50%; /* Perfect circle */
background: var(--surface);
border: 2px solid var(--border-light);
color: var(--text-muted);
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding-bottom: 2px; /* Optical vertical centering for text glyphs */
}
.header-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: scale(1.1);
background: white;
}
/* Individual button positions (both measured from the right edge) */
#info-btn { right: 40px; } /* ℹ — second from right; leaves room for 📊 */
#stats-btn { right: 0; font-size: 0.9rem; } /* 📊 — far right corner */
/* Note: ☰ menu button uses inline style="left:0" in index.html */
/* Page title — gradient clipped text technique */
#main-title {
margin: 0;
font-size: 2.2rem;
line-height: 1.2;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 4px;
padding: 0 80px 0 45px; /* Clears ☰ left (45px) and ℹ/📊 right (80px) */
text-align: center;
/* Gradient text — visible on WebKit and most modern browsers */
background: linear-gradient(135deg, var(--primary), #8e2de2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* #final-subtitle: always hidden — acts as a data carrier for JS only.
Remove this rule if you want it visible in a future redesign. */
#final-subtitle { display: none !important; }
/* ── HOME SCREEN MODIFIER ───────────────────────────────────────────────────
Added/removed by updatePlatformUI() in ui.js when navigating to/from
the main menu. On the home screen the title expands to fill the full
header width (no flanking buttons needed) and the ℹ info button shifts
all the way right to compensate. */
#game-header.home-screen #info-btn {
right: 0 !important; /* Shift ℹ to far right when ☰ and 📊 are hidden */
}
#game-header.home-screen #main-title {
font-size: 1.9rem !important;
letter-spacing: 5px;
padding: 0 !important; /* Remove side padding — title owns the full row */
}
/* ── SECTION LABEL ──────────────────────────────────────────────────────────
Small uppercase caption above mode/difficulty/rounds selectors.
Used in setup-screen only. Left-aligned for scannability. */
.section-label {
display: block;
text-align: left;
font-size: 0.75rem;
color: var(--text-muted);
margin: 25px 0 10px 0;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}
/* =============================================================================
SECTION 5 — BUTTONS
─────────────────────────────────────────────────────────────────────────────
Button hierarchy (from most to least prominent):
.btn — Base class. Full-width, uppercase, rounded.
All button variants extend this.
.btn-daily — Purple CTA for the "Today Three" daily challenge.
Same colour as .btn-main but used only for that
single feature so it can be restyled independently.
.btn-main — Primary action button (Play, Submit, Join, etc.).
Purple fill, white text, brand-glow box-shadow.
.btn-alt — Secondary/ghost button (Multiple Choice lifeline,
Back to Solo, etc.). Surface fill with a border.
.btn-reset — Destructive/minor action (Reset Stats, End Game).
Grey fill, red text. Smaller than primary buttons.
Disabled state:
#start-multiplayer-btn:disabled — the "Start Game" button in the
host lobby is disabled until ≥1 player joins. Overrides all hover
and shadow rules with !important because specificity would otherwise
let :hover rules fire on disabled buttons in some browsers.
Separator:
.separator-line is a thin replacement used between the daily
button and the custom game section on the setup screen.
============================================================================= */
/* Base button — all variants compose on top of this */
.btn {
cursor: pointer;
border: none;
border-radius: 12px;
font-weight: 800;
text-transform: uppercase;
transition: 0.2s;
padding: 18px;
width: 100%;
font-size: 1.1rem;
}
/* Daily challenge CTA — identical to btn-main visually; kept separate
so it can be uniquely greyed out when already played today. */
.btn-daily {
background: var(--primary);
color: #fff;
box-shadow: 0 4px 15px var(--brand-glow);
margin-bottom: 5px;
}
.btn-daily:hover {
box-shadow: 0 6px 20px var(--brand-glow);
transform: translateY(-2px);
}
/* Primary CTA — all main action buttons */
.btn-main {
background: var(--primary);
color: white;
font-size: 1.2rem;
box-shadow: 0 4px 15px var(--brand-glow);
}
.btn-main:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--brand-glow);
}
/* Multiplayer Start button locked until players join —
!important needed to override .btn-main hover rules above */
#start-multiplayer-btn:disabled {
background: #e0e0e0 !important;
color: #a0a0a0 !important;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Ghost / secondary button — lifeline, back, cancel actions */
.btn-alt {
background: var(--surface);
color: var(--dark-text);
border: 2px solid var(--border-light);
font-size: 0.9rem;
}
.btn-alt:hover {
border-color: var(--primary);
color: var(--primary);
}
/* Destructive/minor action — reset stats, end game, back links.
width:auto + min-width:120px keeps it compact next to primary buttons. */
.btn-reset {
background: #f0f0f0;
color: var(--fail);
font-size: 0.8rem;
padding: 10px;
border: 2px solid #f0f0f0;
margin-top: 20px;
width: auto;
min-width: 120px;
}
.btn-reset:hover {
background: #fff;
border-color: var(--fail);
}
/* Visual divider — used between daily button and custom game section */
.separator-line {
height: 2px;
background: var(--border-light);
border-radius: 2px;
margin: 25px 0;
border: none;
}
/* =============================================================================
SECTION 6 — FORM CONTROLS (Pills · Cards · Inputs)
─────────────────────────────────────────────────────────────────────────────
THREE CONTROL TYPES for selecting game options:
A) PILLS (.pill / .pill-grid / .pill-group)
· Used for: Round count (5/10/15/20) and sub-genre selection.
· .pill-group — flex row, wraps on overflow.
· .pill-grid — 2-column CSS grid for the rounds picker.
· .pill.active — filled with --primary; used as the "selected" state.
· .pill-wide — wider variant for text-heavy sub-option labels.
B) SELECT CARDS (.select-card / .card-group)
· Used for: Game Mode and Difficulty selectors.
· .card-group — vertical flex column; built by buildSetupScreen() in ui.js.
· .select-card.active — shows a 6px left accent bar via ::before pseudo.
This is a standard "selected tab" pattern; the bar uses position:absolute
on the card (which has overflow:hidden to clip it cleanly).
C) TEXT INPUTS (input[type="text/number"], select)
· Unified appearance: white bg, light border, rounded corners.
· -webkit-appearance:none / appearance:none removes OS-native styling
(particularly important for iOS number inputs and selects).
· Focus ring uses box-shadow (not outline) so it honours border-radius.
· The