/* docs/features/technical/game-shell/ */ /* * Shared warm gold / parchment palette for the game shell and in-stage surfaces. * :root fallbacks support topnav/mobile chrome outside .game-stage and DevTools. */ :root { --gs-gold-rgb: 210, 165, 95; --gs-gold-bright-rgb: 255, 220, 165; --gs-gold-alt-rgb: 245, 215, 160; --gs-gold-soft-rgb: 243, 205, 131; --gs-gold-warm-rgb: 255, 200, 120; --gs-gold-glow-rgb: 255, 214, 153; --gs-gold-accent-rgb: 255, 170, 80; --gs-bronze-rgb: 118, 54, 40; --gs-bronze-deep-rgb: 44, 20, 18; --gs-platinum-rgb: 168, 196, 238; --gs-platinum-shine-rgb: 232, 242, 255; --gs-platinum-bright-rgb: 196, 218, 252; --gs-platinum-blue-rgb: 118, 164, 232; --gs-platinum-deep-rgb: 36, 58, 102; --gs-panel-rgb: 8, 10, 16; --gs-text-body: #f0e8dc; --gs-text: #f5ead2; --gs-text-nav: #e8cf9f; --gs-text-nav-hover: #ffe9c4; --gs-text-bright: #fff3da; --gs-text-gold: #f3cd83; --gs-text-warm: #ffdeaf; --gs-text-ui: #f0dfc2; --gs-text-muted: #e9d7b8; --gs-text-secondary: #e6d6b8; --gs-text-dim: #c8baa0; --gs-text-label: #f3e0be; --gs-text-stat: #e8d4b0; --gs-text-value: #f2e6d4; --gs-text-endscreen: #f5e5c9; --gs-text-reward: #ffd9a3; --gs-text-door: #d4b88a; --gs-text-bronze: #c48662; --gs-text-platinum: #e8f2ff; --gs-text-platinum-ink: #152238; --gs-text-platinum-muted: #2a3f5c; --gs-text-hub: #c9a86a; --gs-text-hub-hover: #ffd27a; --gs-text-hud-accent: #ffe2b8; --gs-stat-gold: rgba(201, 168, 108, 0.78); --gs-bg-flash: rgba(30, 20, 44, 0.74); --gs-text-flash: #f2e5cd; --gs-border-error: rgba(210, 95, 95, 0.52); --gs-bg-error: rgba(42, 10, 18, 0.72); --gs-text-error: #ffd5d5; --gs-border-hud: rgba(255, 205, 140, 0.5); --gs-border-gold-hover-strong: rgba(255, 220, 180, 0.55); --gs-border-gold: rgba(var(--gs-gold-rgb), 0.48); --gs-border-gold-hover: rgba(var(--gs-gold-warm-rgb), 0.58); --gs-border-gold-active: rgba(var(--gs-gold-warm-rgb), 0.62); --gs-border-gold-medium: rgba(var(--gs-gold-rgb), 0.38); --gs-border-gold-soft: rgba(var(--gs-gold-rgb), 0.35); --gs-border-gold-panel: rgba(var(--gs-gold-rgb), 0.32); --gs-border-gold-accent: rgba(var(--gs-gold-rgb), 0.42); --gs-border-gold-tooltip: rgba(var(--gs-gold-rgb), 0.46); --gs-border-gold-faint: rgba(var(--gs-gold-rgb), 0.28); --gs-border-gold-whisper: rgba(var(--gs-gold-rgb), 0.25); --gs-border-gold-dim: rgba(var(--gs-gold-rgb), 0.22); --gs-border-gold-warm-subtle: rgba(var(--gs-gold-warm-rgb), 0.12); --gs-border-gold-bright: rgba(var(--gs-gold-bright-rgb), 0.45); --gs-border-gold-bright-strong: rgba(var(--gs-gold-bright-rgb), 0.72); --gs-border-gold-bright-hover: rgba(var(--gs-gold-bright-rgb), 0.62); --gs-border-gold-bright-focus: rgba(var(--gs-gold-bright-rgb), 0.9); --gs-border-gold-bright-medium: rgba(var(--gs-gold-bright-rgb), 0.35); --gs-border-gold-bright-subtle: rgba(var(--gs-gold-bright-rgb), 0.28); --gs-border-gold-bright-soft: rgba(var(--gs-gold-bright-rgb), 0.3); --gs-border-gold-bright-light: rgba(var(--gs-gold-bright-rgb), 0.38); --gs-border-gold-bright-faint: rgba(var(--gs-gold-bright-rgb), 0.2); --gs-border-gold-bright-ghost: rgba(var(--gs-gold-alt-rgb), 0.12); --gs-border-gold-bright-whisper: rgba(var(--gs-gold-alt-rgb), 0.14); --gs-border-gold-bright-dim: rgba(var(--gs-gold-alt-rgb), 0.18); --gs-border-gold-playable: rgba(255, 220, 160, 0.62); --gs-border-gold-playable-hover: rgba(255, 235, 185, 0.95); --gs-border-bronze: rgba(var(--gs-bronze-rgb), 0.42); --gs-border-bronze-dim: rgba(var(--gs-bronze-rgb), 0.28); --gs-border-platinum: rgba(var(--gs-platinum-blue-rgb), 0.58); --gs-border-platinum-dim: rgba(var(--gs-platinum-deep-rgb), 0.42); --gs-ring-gold: rgba(var(--gs-gold-bright-rgb), 0.92); --gs-ring-gold-soft: rgba(var(--gs-gold-bright-rgb), 0.2); --gs-focus-outline: rgba(255, 220, 170, 0.9); --gs-focus-outline-soft: rgba(255, 210, 150, 0.55); --gs-focus-outline-strong: rgba(var(--gs-gold-bright-rgb), 0.8); --gs-panel-bg: rgba(var(--gs-panel-rgb), 0.32); --gs-panel-bg-solid: rgba(var(--gs-panel-rgb), 0.72); --gs-panel-bg-raised: rgba(20, 24, 36, 0.82); --gs-panel-bg-dark: rgba(10, 14, 22, 0.96); --gs-shell-chrome-bg: rgba(8, 5, 14, 0.88); --gs-tile-bg: rgba(10, 14, 20, 0.7); --gs-scrim: rgba(4, 6, 12, 0.45); --gs-scrim-heavy: rgba(4, 8, 16, 0.62); --gs-dialog-scrim: rgba(4, 2, 12, 0.88); --gs-inset-gold: rgba(255, 215, 160, 0.08); --gs-inset-gold-hover: rgba(255, 220, 180, 0.11); --gs-inset-board: rgba(255, 215, 170, 0.03); --gs-bg-gold-active: rgba(42, 32, 18, 0.88); --gs-bg-gold-active-glow: rgba(var(--gs-gold-accent-rgb), 0.22); --gs-bg-gold-playable: rgba(255, 210, 140, 0.14); --gs-bg-gold-playable-hover: rgba(255, 218, 152, 0.26); --gs-bg-gold-tint: rgba(var(--gs-gold-warm-rgb), 0.08); --gs-gradient-gold-divider: linear-gradient( 90deg, rgba(var(--gs-gold-soft-rgb), 0.1) 0%, rgba(var(--gs-gold-soft-rgb), 0.7) 50%, rgba(var(--gs-gold-soft-rgb), 0.1) 100% ); /* Default in-stage progress meter fill (tax, unlocks, production collect, …). Opaque so dual-bar layers (gold earned + purple increment) do not bleed through each other. */ --gs-progress-fill: linear-gradient( 90deg, rgb(113, 84, 49), rgb(193, 166, 108) ); --gs-progress-track-bg: rgba(6, 4, 12, 0.85); --gs-progress-track-border: rgba(255, 210, 160, 0.25); --gs-shadow-text-glow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 8px rgba(var(--gs-gold-glow-rgb), 0.65), 0 0 14px rgba(var(--gs-gold-glow-rgb), 0.45); --gs-shadow-nav-hover: 0 0 22px rgba(var(--gs-gold-accent-rgb), 0.14); --gs-shadow-nav-active-ring: 0 0 0 2px rgba(var(--gs-gold-accent-rgb), 0.16); } .town-field.game-stage { container-type: size; container-name: game-stage; /* * Canonical stage units (16:9 locked). Shell-sized (static) UI uses --gs-* against * this frame; it does not rescale inside nested containers (e.g. gamecard). * Only slot-relative objects (card face cqw) opt into a local CQ on purpose. * * No mark-to-select in the playfield: selection fights drag (hand deploy, etc.) * and has no gameplay use. Opt text fields back in below. */ user-select: none; -webkit-user-select: none; --gs-u-w: 1cqw; --gs-u-h: 1cqh; /* Hairlines (floored so borders stay visible on tiny stages) */ --gs-hairline: calc(var(--gs-u-h) * 0.1); --gs-stroke: calc(var(--gs-u-h) * 0.2); /* Corner radii */ --gs-radius-xs: calc(var(--gs-u-h) * 0.42); --gs-radius-sm: calc(var(--gs-u-h) * 0.58); --gs-radius-md: calc(var(--gs-u-h) * 0.75); --gs-radius-lg: calc(var(--gs-u-h) * 0.95); /* Text scale inside the stage (prefer these tokens over one-off font-size calcs). */ --gs-text-2xs: calc(var(--gs-u-h) * 1.45); --gs-text-xs: calc(var(--gs-u-h) * 1.75); --gs-text-sm: calc(var(--gs-u-h) * 2.35); --gs-text-md: calc(var(--gs-u-h) * 2.55); --gs-text-lg: calc(var(--gs-u-h) * 2.95); --gs-text-xl: calc(var(--gs-u-h) * 3.35); } /* Editable / copyable surfaces inside the stage (chat, forms). */ .town-field.game-stage input, .town-field.game-stage textarea, .town-field.game-stage select, .town-field.game-stage [contenteditable="true"] { user-select: text; -webkit-user-select: text; } /* * Native image drag ghosts steal HTML5 card-wrapper drag (combat hand deploy). * Do not blanket every stage ``img`` — armory gear icons opt into * ``-webkit-user-drag: element`` on the icon itself. */ .town-field.game-stage .game-card img, .town-field.game-stage .game-card canvas, .town-field.game-stage .combat-unit img, .town-field.game-stage .combat-unit canvas { -webkit-user-drag: none; }