/* * Brand theming: every color below is a CSS custom property so a brand can * be "dropped in" by adding a `:root[data-brand="..."]` block that * redefines them — nothing else in this file needs to change. `data-brand` * is set on by the inline script in index.html's , as early as * possible so there's no flash of the wrong brand's colors. * * Canvas drawing (prototype/game.js) reads a few of these live via * getComputedStyle so the world border/grid stay in sync with whichever * brand is active without duplicating hex values in JS. */ :root { /* Operation Ouch (default) — colors researched from bbc.co.uk/cbbc/shows/operation-ouch */ --brand-bg: #fdf3f8; --brand-bg-light: #f8e9f2; --brand-ink: #2a1030; --brand-muted: #7a5a72; --brand-note: #9a7d93; --brand-border: #ecd7e6; --brand-primary: #16408d; --brand-primary-light: #3a63b0; --brand-secondary-bg: #eaf0fc; --brand-cta: #b20544; --brand-cta-deep: #8f0436; --brand-cta-shadow: #6e0329; --brand-accent: #a182f4; --brand-grid: #ece3f9; --brand-panel-shadow: rgba(22, 64, 141, 0.25); /* In-game arena palette, read by game.js/fx.js for the WebGL underlay. Deliberately dark (a Geometry Wars-style neon look needs a dark ground for the glows to read against) but built from the brand's own primary/ CTA/accent hues so the arena is unmistakably still this brand — the light --brand-* colors above stay in use for all the UI chrome. */ --arena-bg: #0a0d2b; --arena-grid: #35408f; --arena-grid-major: #8b7cff; --arena-nebula-a: #16408d; --arena-nebula-b: #b20544; --arena-border: #a182f4; /* Button "treatment" — deliberately different per brand, not just recolored: Operation Ouch reads as friendly rounded plastic/capsule (clinical, approachable); Horrible Histories (below) reads as a stamped wax-sealed plaque (theatrical, regal). */ --btn-radius: 999px; --btn-border: none; --btn-text-transform: none; --btn-letter-spacing: normal; /* Splash-screen background photo — real production art (see wip/operation-ouch/candidates/MANIFEST.md), layered under the gradient above via .splash's background-image stack. */ --splash-image: url("/assets/images/operation-ouch/splash-background.jpg"); --panel-image: none; } :root[data-brand="horrible-histories"] { /* colors researched from bbc.co.uk/cbbc/shows/horrible-histories */ --brand-bg: #f6ecd8; --brand-bg-light: #fbf3e2; --brand-ink: #2b1a12; --brand-muted: #7a6350; --brand-note: #8a7052; --brand-border: #e3d2ae; --brand-primary: #472f27; --brand-primary-light: #6b4a3d; --brand-secondary-bg: #f1e6cd; --brand-cta: #810e1f; --brand-cta-deep: #5c0a16; --brand-cta-shadow: #400712; --brand-accent: #c9a227; --brand-grid: #ecd9b8; --brand-panel-shadow: rgba(71, 47, 39, 0.25); --arena-bg: #160b08; --arena-grid: #5e3b25; --arena-grid-major: #c9a227; --arena-nebula-a: #4a2a1f; --arena-nebula-b: #810e1f; --arena-border: #e0b64a; --btn-radius: 8px; --btn-border: 3px solid var(--brand-ink); --btn-text-transform: uppercase; --btn-letter-spacing: 0.04em; /* Real production art — see wip/horrible-histories/candidates/MANIFEST.md */ --splash-image: url("/assets/images/horrible-histories/splash-background.jpg"); --panel-image: url("/assets/images/horrible-histories/gameover-panel-background.png"); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--brand-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--brand-ink); } #fx, #game { position: fixed; inset: 0; display: block; } #fx { pointer-events: none; background: var(--arena-bg); } #game { background: transparent; } /* No WebGL: game.js adds this class and draws a plain grid itself. */ html.no-fx #fx { display: none; } html.no-fx #game { background: var(--arena-bg); } .hidden { display: none !important; } /* ---- HUD ---- */ #hud { position: fixed; inset: 0; pointer-events: none; padding: 16px; } #hud-top { display: flex; align-items: center; gap: 12px; } #size-readout { background: var(--brand-primary); color: white; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transform-origin: left center; } @keyframes hud-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } } #size-readout.bump { animation: hud-bump 0.28s cubic-bezier(0.2, 1.6, 0.4, 1); } #powerup-tray { display: flex; gap: 8px; } .powerup-chip { width: 40px; height: 40px; border-radius: 50%; background: white; border: 3px solid var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: relative; } .powerup-chip img { width: 28px; height: 28px; object-fit: contain; } .powerup-chip .timer { position: absolute; bottom: -6px; font-size: 10px; background: var(--brand-ink); color: white; padding: 0 4px; border-radius: 6px; } #leaderboard { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.92); border: 2px solid var(--brand-primary); border-radius: 14px; padding: 12px 16px; min-width: 240px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } #leaderboard h2 { margin: 0 0 8px 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-primary); } #leaderboard-list { margin: 0; padding: 0; list-style: none; font-size: 14px; } #leaderboard-list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; } #leaderboard-list li.is-you { font-weight: 700; color: var(--brand-cta); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent); border-radius: 8px; } .lb-avatar { flex-shrink: 0; width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 2px solid rgba(0, 0, 0, 0.2); box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.4); } .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-score { font-weight: 700; flex-shrink: 0; } /* On a phone-sized touch screen the leaderboard (top-right, 240px+ wide) eats a big chunk of the limited vertical view — hide it there entirely rather than shrinking it into illegibility. Two queries (comma = OR) catch both portrait (narrow width) and landscape (short height) phones; `pointer: coarse` keeps this from also firing for someone just resizing a desktop browser window narrow. */ @media (pointer: coarse) and (max-width: 820px), (pointer: coarse) and (max-height: 500px) { #leaderboard { display: none; } } /* ---- Virtual joystick (touch only, see game.js) ---- */ .joystick-base, .joystick-knob { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; /* Positioned via inline left/top (the touch anchor point) — this centers the element ON that point rather than anchoring its top-left corner. */ transform: translate(-50%, -50%); z-index: 5; } .joystick-base { /* Diameter must match 2 * JOYSTICK_MAX_RADIUS in game.js. */ width: 120px; height: 120px; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.35); } .joystick-knob { width: 56px; height: 56px; background: rgba(255, 255, 255, 0.55); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } /* ---- Overlays ---- */ .overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% 20%, var(--brand-bg-light) 0%, var(--brand-bg) 70%); display: flex; align-items: center; justify-content: center; z-index: 10; } /* ---- Splash screen ---- */ .splash { /* .overlay (also applied to this element) already sets position: fixed — that's what anchors ::before below, so this rule deliberately doesn't touch position itself. */ background-image: var(--splash-image); background-size: cover; background-position: center; z-index: 20; flex-direction: column; gap: 28px; } .splash::before { /* A translucent veil of the brand gradient over the photo — keeps the splash screen's own color identity and text legibility while still letting the real production artwork read through. */ content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--brand-primary), var(--brand-cta)); opacity: 0.5; z-index: -1; } .splash-content { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 24px; text-align: center; } .logo-wrap { width: min(320px, 80vw); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); animation: splash-pulse 2.4s ease-in-out infinite; } .brand-logo { display: none; width: 100%; height: auto; } :root[data-brand="operation-ouch"] #logo-operation-ouch, :root[data-brand="horrible-histories"] #logo-horrible-histories { display: block; } @keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .splash-tagline { color: white; font-size: 18px; font-weight: 600; max-width: 380px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .splash .primary-btn { width: auto; min-width: 220px; background: white; color: var(--brand-primary); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); } .splash .primary-btn:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); } .panel { /* --panel-image defaults to none (Operation Ouch has no unflagged panel-background candidate — see MANIFEST.md), so this stays a plain white card for that brand; Horrible Histories layers real parchment texture art in behind the same white base. */ background-color: white; background-image: var(--panel-image); background-size: cover; background-position: center; border-radius: 20px; padding: 32px 36px; max-width: 420px; width: calc(100% - 48px); box-shadow: 0 12px 32px var(--brand-panel-shadow); text-align: center; /* Re-runs every time the panel's overlay goes display:none -> shown, so the start and game-over screens both pop in rather than just appear. */ animation: panel-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; } @keyframes panel-in { from { opacity: 0; transform: scale(0.88) translateY(14px); } to { opacity: 1; transform: none; } } .panel h1 { margin: 0 0 4px 0; color: var(--brand-primary); font-size: 28px; } .panel h1 span:last-child { color: var(--brand-cta); } .tagline { color: var(--brand-muted); margin-top: 0; margin-bottom: 20px; } .field-row { display: flex; flex-direction: column; gap: 4px; text-align: left; margin-bottom: 14px; } .field-row label { font-size: 12px; color: var(--brand-muted); font-weight: 600; } input { font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--brand-border); outline: none; font-family: inherit; } input:focus { border-color: var(--brand-primary-light); } .primary-btn { width: 100%; font-size: 18px; font-weight: 700; color: white; background: linear-gradient(180deg, var(--brand-cta), var(--brand-cta-deep)); border: var(--btn-border); border-radius: var(--btn-radius); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); padding: 14px; cursor: pointer; box-shadow: 0 4px 0 var(--brand-cta-shadow); } .primary-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--brand-cta-shadow); } .secondary-btn { font-size: 14px; font-weight: 600; color: var(--brand-primary); background: var(--brand-secondary-bg); border: 2px solid var(--brand-primary-light); border-radius: var(--btn-radius); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); padding: 10px 12px; cursor: pointer; white-space: nowrap; } .lobby-box { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--brand-border); } .lobby-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .lobby-row input { flex: 1; min-width: 0; text-transform: uppercase; } .lobby-code { font-weight: 700; letter-spacing: 0.1em; background: var(--brand-accent); padding: 8px 10px; border-radius: 8px; color: var(--brand-ink); } .lobby-note { font-size: 11px; color: var(--brand-note); text-align: left; margin: 6px 0 0 0; } .how-to-play { margin-top: 18px; text-align: left; font-size: 13px; color: var(--brand-muted); } .how-to-play summary { cursor: pointer; font-weight: 600; color: var(--brand-primary); } .how-to-play ul { margin: 8px 0 0 0; padding-left: 18px; } .brand-switcher { margin: 16px 0 0 0; font-size: 11px; color: var(--brand-note); } .brand-switcher a { color: var(--brand-primary); font-weight: 600; } #brand-switcher-current { font-weight: 700; color: var(--brand-ink); } #game-over-stats { color: var(--brand-muted); margin-bottom: 20px; } .gameover-banner { display: none; max-width: 260px; width: 100%; height: auto; margin: 0 auto 12px; } :root[data-brand="operation-ouch"] #gameover-banner-operation-ouch { display: block; }