/* ================================================================== *
* gameu theme v1 — shared visual language for TV lobby + phone *
* controller. Frozen surface (per Q93 versioning); breaking changes *
* ship at /lib/gameu-theme-v2.css. *
* *
* USAGE *
* *
* *
* *
* Then either: *
* - Use the design tokens (CSS custom properties) to style your own *
* components — every value below has a single point of override. *
* - Use the .gameu-* component classes for ready-made primitives *
* (cards, buttons, pills, portraits, peer chips, hero corners). *
* *
* SCOPE *
* *
* The tokens are unconditional (defined on :root). Component classes *
* are namespaced `.gameu-*` to avoid collision with caller styles. *
* Iterate by editing this file; both surfaces pick up the change on *
* page reload. *
* ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Luckiest+Guy&display=swap');
/* ================================================================== *
* 1. DESIGN TOKENS *
* ================================================================== */
:root {
/* Palette ------------------------------------------------------- */
--gameu-cyan: #0FB7E8;
--gameu-cyan-deep: #069BC9;
--gameu-navy: #11173F;
--gameu-yellow: #FFD93D;
--gameu-yellow-deep: #FFC700;
--gameu-orange: #F26B1F;
--gameu-green: #2FBC55;
--gameu-pink: #C879D6;
--gameu-red: #E04657;
--gameu-white: #FFFFFF;
/* Typography ---------------------------------------------------- */
--gameu-font-display: 'Lilita One', 'Bowlby One', 'Fredoka', system-ui, sans-serif;
--gameu-font-button: 'Luckiest Guy', 'Lilita One', system-ui, sans-serif;
/* Borders / strokes -------------------------------------------- */
--gameu-stroke-thin: 4px;
--gameu-stroke: 6px;
--gameu-stroke-bold: 8px;
/* Radii --------------------------------------------------------- */
--gameu-radius-sm: 16px;
--gameu-radius-md: 22px;
--gameu-radius-lg: 28px;
--gameu-radius-xl: 36px;
/* Shadows (sharp / cartoon — no blur) -------------------------- */
--gameu-shadow-sm: 3px 4px 0 var(--gameu-navy);
--gameu-shadow-md: 6px 6px 0 var(--gameu-navy);
--gameu-shadow-lg: 8px 10px 0 var(--gameu-navy);
/* Halftone dot field (background) ------------------------------ */
--gameu-halftone-color: rgba(255, 243, 150, 0.32);
--gameu-halftone-color-faint: rgba(255, 243, 150, 0.14);
/* Animation timings -------------------------------------------- */
--gameu-tap-duration: 0.08s;
--gameu-bounce-duration: 1.2s;
}
/* ================================================================== *
* 2. STAGE — full-screen cyan halftone background *
* ================================================================== *
* Apply to or any container that should adopt the full gameu *
* visual base. Pair with `