/* ===== War Room Theme for Map Room ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&family=Special+Elite&display=swap');
:root {
/* === Base Palette === */
--bg-primary: #18161a;
--bg-secondary: #1e1c20;
--bg-tertiary: #242228;
--bg-overlay: rgba(15, 15, 10, 0.85);
--bg-modal: #2e2e24;
--bg-dark: #141214; /* dark background — darker than bg-primary, for pill/chip text on bright backgrounds */
--bg-darkest: #0a0a08;
--bg-warm-card: #3a382e; /* warm dark card/panel background (FieldManualPanel, TutorialOverlay) */
--bg-warm-card-deep: #353228; /* deeper warm dark panel background */
/* === Surface Colors === */
--surface-panel: rgba(255,255,255,0.04);
--surface-card: rgba(255,255,255,0.04);
--surface-mid: rgba(255,255,255,0.07); /* mid-level surface — between card and hover, for inactive pill/chip backgrounds */
--surface-input: #2a2a22;
--surface-hover: #45423a;
--surface-disabled-mid: #3a3a3a;
/* === Border Colors === */
--border-primary: rgba(255,255,255,0.08);
--border-secondary: rgba(255,255,255,0.06);
--border-accent: rgba(196,164,74,0.25);
--border-modal: #6b6040;
--border-tan-08: rgba(100,90,60,0.08); /* very subtle warm tan divider (row separators) */
--border-tan-12: rgba(100,90,60,0.12); /* warm tan card border */
--border-tan-20: rgba(100,90,60,0.2); /* medium warm tan border */
/* === Text Colors === */
--text-primary: rgba(255,255,255,0.9);
--text-secondary: rgba(255,255,255,0.6);
--text-muted: rgba(255,255,255,0.4);
--text-heading: #c4a44a;
--text-accent: #d4a038;
--text-warning: #ff9800; /* warning text color — amber/orange for alerts and dispute labels */
/* === Accent Colors === */
--accent-gold: #e8d48b;
--accent-gold-bright: #f0dfa0;
--accent-brass: #b89a3a;
--accent-amber: #c87533; /* warm amber — warning/beta notices (between brass and red) */
--accent-red: #a04040;
--accent-red-bright: #c05050;
--accent-danger: #c45252; /* danger accent (red-tinted) — for inline danger labels/icons */
--accent-blue: #5a7a9a;
--accent-green: #5a8a4a;
--color-on-gold: #1a1a10; /* dark text for use on gold/accent backgrounds */
/* === Alliance Colors === */
--alliance-axis: #a04040;
--alliance-allies: #5a8a4a;
/* === Phase Colors === */
/* === Shadows === */
--shadow-md: 0 2px 8px rgba(0,0,0,0.5);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.6);
--shadow-inset: inset 0 1px 3px rgba(0,0,0,0.5);
/* === Typography === */
--font-heading: 'Cinzel', 'Georgia', 'Times New Roman', serif;
--font-body: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
--font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;
--font-diary: 'Special Elite', 'Courier New', monospace;
/* === Fluid Text Scale (Utopia-style clamp tokens) === */
--text-xs: clamp(0.5625rem, 0.52rem + 0.13vw, 0.6875rem); /* ~9–11px */
--text-sm: clamp(0.6875rem, 0.63rem + 0.18vw, 0.8125rem); /* ~11–13px */
--text-base: clamp(0.8125rem, 0.71rem + 0.32vw, 1.0625rem); /* ~13–17px */
--text-lg: clamp(1rem, 0.87rem + 0.41vw, 1.3125rem); /* ~16–21px */
--text-xl: clamp(1.1875rem, 1.04rem + 0.47vw, 1.625rem); /* ~19–26px */
--text-2xl: clamp(1.5rem, 1.3rem + 0.63vw, 2.125rem); /* ~24–34px */
/* === Fluid Spacing === */
--space-xs: clamp(0.25rem, 0.21rem + 0.13vw, 0.375rem);
--space-sm: clamp(0.5rem, 0.43rem + 0.22vw, 0.6875rem);
--space-md: clamp(0.75rem, 0.65rem + 0.32vw, 1.0625rem);
--space-lg: clamp(1rem, 0.87rem + 0.41vw, 1.3125rem);
--space-xl: clamp(1.5rem, 1.3rem + 0.63vw, 2rem);
/* === Safe Area Insets (iOS Dynamic Island / notch) ===
* Single source of truth — every component composes with these vars instead
* of writing env(safe-area-inset-*) inline. env() is the only raw value
* permitted by lint:tokens (check-tokens.sh), so it lives here only. */
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
/* === Transitions === */
--transition-fast: 150ms ease;
--transition-normal: 200ms ease;
/* === Border Radius === */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 10px;
/* === Button Presets === */
--btn-bg: rgba(255,255,255,0.05);
--btn-bg-primary: rgba(196,164,74,0.2);
--btn-bg-primary-dark: rgba(196,164,74,0.1);
--btn-bg-danger: rgba(180,60,60,0.2);
--btn-bg-success: #2a5a3a;
--btn-text: rgba(255,255,255,0.8);
--btn-primary-grad-top: #8b7a3a; /* primary gradient button — top stop */
--btn-primary-grad-bot: #6b5a2a; /* primary gradient button — bottom stop */
--btn-primary-border: #a08a40; /* primary gradient button border */
/* === Status/Semantic Colors === */
--color-success: #4caf50;
--color-warning: #ff8c00;
--color-hit: #e05050;
--color-miss: #666666;
--color-info-text: #c0b890;
--color-danger: #ff4444;
--color-danger-soft: #ff6b6b;
--color-info: #5090d0;
--color-casualty: #c06050;
--color-parchment: #c0b890;
--color-valid: #40a060;
--color-success-bright: #44cc88;
--color-white: #ffffff;
--color-black: #000000;
/* === Indicator / Demo Colors === */
--color-teal: #2a8a9a; /* teal — intelligence/stealth/convoy/recon indicators */
--color-teal-dark: #2a6a7a; /* darker teal — convoy zone dashed borders */
--color-teal-light: #40aacc; /* lighter teal — convoy zone inner border */
--color-stat-defense: #7a9aba; /* defense stat on unit cards */
--color-stat-green: #7aaa6a; /* HP/green stat on unit cards */
--color-chip-bg: #2c2c38; /* unit chip demo background */
--color-chip-border: #6e6e82; /* unit chip demo border */
--color-chip-stack: #3a8a45; /* unit chip stack-count dot */
--color-kamikaze: #8b3030; /* kamikaze marker dark red */
--color-kamikaze-text: #ffaaaa; /* kamikaze label light red */
--color-ghost-text: rgba(160,150,120,0.5); /* ghost unit demo label */
--color-fog-text: rgba(180,180,180,0.5); /* fog-of-war demo symbol */
/* === Extended Accent Colors === */
--accent-blue-light: #7ab0d0;
--bg-elevated: #444;
/* === Combat/Overlay Colors === */
--color-amphibious: #5090c0;
--color-draw: #c0a040;
--color-hover-active: #4080d0;
--color-sbr-aa: #d09050;
--color-sbr-bombing: #d0c060;
/* === Battle Board Gradient Stops === */
--gradient-battle-header-top: #3a2a18; /* warm amber — top of battle board headers */
--gradient-battle-header-bot: #2a1c10; /* warm amber — bottom of battle board headers */
/* === Map Feature Indicators === */
--color-blockade: #88ddff;
--color-convoy: #66ccee;
--color-installations: #88aacc;
/* === Log/Diary Entry Type Colors === */
--color-log-dice: #8898a8;
--color-log-purchase: #80a870;
--color-log-placement: #7898b0;
--color-log-income: #c8b040;
/* === Note Type Colors === */
--color-note-move: #5080e0;
--color-note-strategy: #a070d0;
/* === Lobby Colors === */
--color-lobby-title: #f0e0a0;
--color-lobby-subtitle: #a09070;
--lobby-input-bg: rgba(26, 26, 20, 0.9);
--lobby-input-border: rgba(90, 85, 64, 0.6);
--lobby-muted-bg: rgba(51, 51, 42, 0.8);
--lobby-axis-selected-bg: rgba(139, 0, 0, 0.8);
--lobby-allies-selected-bg: rgba(0, 51, 102, 0.8);
--lobby-axis-mine-bg: rgba(139, 0, 0, 0.3);
--lobby-allies-mine-bg: rgba(0, 51, 102, 0.3);
--gradient-lobby-resume: linear-gradient(180deg, #3a6b3a 0%, #2a5a2a 50%, #204a20 100%);
--lobby-tagline-color: rgba(144, 128, 96, 0.6);
/* === Toggle === */
--toggle-knob: #888;
--toggle-knob-on: #80c080;
/* === Tooltip / Popover === */
--surface-tooltip: rgba(25, 24, 18, 0.93);
--tooltip-border: #444;
--tooltip-text: #ddd;
--tooltip-divider: #333;
/* === Map === */
--map-bg: #1a2028;
--map-battle: #c05050;
--map-valid-dest: #6a9a5a;
/* === Arrow Glow === */
/* === Z-Index Scale === */
--z-search: 20;
--z-toast: 900;
--z-sidebar: 50;
--z-battle: 1000;
--z-overlay: 1100;
--z-sidebar-backdrop: 4000;
--z-menu-backdrop: 5000;
--z-menu: 5001;
--z-debug: 5002;
--z-settings: 6000;
--z-dialog: 6001;
--z-dialog-confirm: 6002;
--z-phone-shell: 6500; /* fullscreen purchase shell — above dialogs, below modals */
--z-modal: 7000;
--z-cover: 8000;
/* === Overlay Tints (semi-transparent color tokens) === */
/* Black-scrim ladder — canonical opacity rungs at 0.1 deciles (10–90).
This is the only dark-scrim ramp; pick the nearest rung, do not add
off-grid steps. See docs/styling/conventions.md §5.6. */
--overlay-dark-10: rgba(0,0,0,0.1);
--overlay-dark-20: rgba(0,0,0,0.2);
--overlay-dark-30: rgba(0,0,0,0.3);
--overlay-dark-40: rgba(0,0,0,0.4);
--overlay-dark-50: rgba(0,0,0,0.5);
--overlay-dark-60: rgba(0,0,0,0.6);
--overlay-dark-70: rgba(0,0,0,0.7);
--overlay-dark-80: rgba(0,0,0,0.8);
--overlay-dark-90: rgba(0,0,0,0.9);
--overlay-light-08: rgba(255,255,255,0.08);
--overlay-light-20: rgba(255,255,255,0.2);
--overlay-gold-04: rgba(196,164,74,0.04);
--overlay-gold-08: rgba(196,164,74,0.08);
--overlay-gold-12: rgba(196,164,74,0.12);
--overlay-gold-15: rgba(196,164,74,0.15);
--overlay-gold-25: rgba(196,164,74,0.25);
--overlay-gold-40: rgba(196,164,74,0.4);
--overlay-blue-08: rgba(90,122,154,0.08); /* accent-blue at 8% */
--overlay-blue-10: rgba(77,171,247,0.1);
--overlay-blue-20: rgba(77,171,247,0.2);
--overlay-navy-15: rgba(80,130,196,0.15);
--overlay-navy-20: rgba(76,100,180,0.2);
--overlay-success-08: rgba(76,175,80,0.08); /* color-success at 8% */
--overlay-success-15: rgba(76,175,80,0.15); /* color-success at 15% */
--overlay-green-15: rgba(90,138,74,0.15); /* accent-green at 15% */
--overlay-danger-10: rgba(255,68,68,0.1);
--overlay-danger-15: rgba(180,60,60,0.15);
--overlay-danger-40: rgba(120,30,30,0.4);
--overlay-danger-50: rgba(180,60,60,0.5);
--overlay-panel-brown: rgba(40,35,30,0.7);
--gradient-bar-top: rgba(40,35,30,0.96); /* stage/preview bar gradient top */
--gradient-bar-bot: rgba(30,26,22,0.98); /* stage/preview bar gradient bottom */
/* === Die Colors (#2585 Option A — physical top-lit dice, militaria
* palette aligned to #2580. The *-bg tokens are gradients so the die
* face reads as a lit physical object; hue still encodes outcome
* (hit = glossy red, miss = cool pale, damage = brass, dimmed = faded)
* and border/glow/pip depth reinforce the signal. Only ever consumed
* as `background:` in Die.tsx — safe as gradients. Hit = gallery row 5
* (casino glossy red, cream recessed pips, strong top sheen) — #2585.) === */
--color-die-dimmed-bg: linear-gradient(155deg, #3a342b 0%, #2b261f 55%, #211d17 100%);
--color-die-damage-bg: linear-gradient(155deg, #efce86 0%, #c79a48 44%, #8a6324 100%);
--color-die-hit-bg: linear-gradient(155deg, #ef6a5f 0%, #cc352f 40%, #7a1818 100%);
--color-die-hit-border: #5a1414;
--color-die-miss-bg: linear-gradient(155deg, #dad9d2 0%, #bcbbb1 46%, #8d8c82 100%);
--color-die-miss-border: #5b5a51;
--glow-hit: 0 0 8px rgba(192,48,48,0.4);
/* === Extended Status Colors === */
--color-warning-soft: #ff9966; /* pulsing timer warning color */
--color-warning-muted: #ffaa44; /* air unit remaining movement */
--color-warning-error: #ffaa88; /* air landing error text */
--color-stat-hp: #a050d0; /* unit stat card HP color */
/* === Extended Light Overlays === */
--overlay-light-02: rgba(255,255,255,0.02);
--overlay-light-03: rgba(255,255,255,0.03);
--overlay-light-04: rgba(255,255,255,0.04);
--overlay-light-10: rgba(255,255,255,0.1);
/* === Extended Gold Overlays (accent-gold = rgb(196,164,74)) === */
--overlay-gold-10: rgba(196,164,74,0.1);
--overlay-gold-20: rgba(196,164,74,0.2);
--overlay-gold-30: rgba(196,164,74,0.3);
--overlay-gold-accent-10: rgba(212,160,32,0.1); /* text-accent at 10% */
--overlay-gold-accent-20: rgba(212,160,32,0.2); /* text-accent at 20% */
/* === Hit/Danger Overlays === */
--overlay-hit-18: rgba(224,80,80,0.18);
--overlay-danger-18: rgba(180,40,40,0.18);
--overlay-danger-35: rgba(200,60,60,0.35);
--overlay-danger-dark-30: rgba(80,30,30,0.3); /* dark danger background */
--overlay-border-30: rgba(90,85,64,0.3); /* border-primary at 30% */
--overlay-casualty-20: rgba(160,64,64,0.2); /* casualty selection highlight */
--overlay-danger-ruby-25: rgba(233,69,96,0.25); /* ruby danger accent */
/* === Ocean/Amphibious Overlays === */
/* Canonical ocean-blue scrim — single RGB (80,144,192) at 10/15/20/30. */
--overlay-ocean-10: rgba(80,144,192,0.1);
--overlay-ocean-15: rgba(80,144,192,0.15);
--overlay-ocean-20: rgba(80,144,192,0.2);
--overlay-ocean-30: rgba(80,144,192,0.3);
--overlay-ocean-dark-30: rgba(20,30,40,0.3);
--overlay-ocean-dark-50: rgba(20,30,40,0.5);
--overlay-ocean-dark-60: rgba(20,30,40,0.6);
/* === SBR / Battle Result Overlays === */
--overlay-sbr-dark: rgba(10,8,5,0.93);
--overlay-battle-screen: rgba(10,8,5,0.92); /* full-screen battle/combat backdrop */
--overlay-win-green: rgba(20,60,20,0.5);
--overlay-loss-red: rgba(60,20,20,0.5);
--overlay-battle-draw-1: rgba(80,80,60,0.3);
--overlay-battle-draw-2: rgba(40,40,30,0.3);
/* === Misc Overlays === */
--overlay-info-30: rgba(77,120,160,0.3);
--overlay-parchment-05: rgba(200,184,120,0.05);
--overlay-search-bg: rgba(30,28,20,0.95);
--overlay-minimap-bg: rgba(10,16,40,0.9);
--overlay-map-dark: rgba(30,28,22,0.85);
/* === Map Drawing Constants === */
--color-link-water: #4080a0; /* neighbor water territory link */
--color-link-land: #a0a0cc; /* neighbor land territory link */
--overlay-blue-25: rgba(77,171,247,0.25);
--overlay-casualty-12: rgba(160,64,64,0.12);
--overlay-amber-12: rgba(200,130,40,0.12); /* rocket attack amber accent */
--overlay-attacker-15: rgba(224,96,64,0.15); /* color-attacker at 15% */
--overlay-attacker-30: rgba(224,96,64,0.3); /* color-attacker at 30% */
--overlay-bright-green-12: rgba(68,204,136,0.12); /* color-success-bright at 12% */
--overlay-bright-green-15: rgba(68,204,136,0.15); /* color-success-bright at 15% */
--overlay-bright-green-25: rgba(68,204,136,0.25); /* color-success-bright at 25% */
--overlay-bright-green-30: rgba(68,204,136,0.3); /* color-success-bright at 30% */
--overlay-warning-15: rgba(255,140,0,0.15); /* color-warning at 15% */
--overlay-warning-08: rgba(255,140,0,0.08); /* color-warning at 8% — arrow/damage demo bg */
--overlay-warning-25: rgba(255,140,0,0.25); /* color-warning at 25% — arrow/damage demo border */
--gradient-panel-top-82: rgba(40,35,30,0.82); /* bottom panel gradient top (translucent) */
--gradient-panel-bot-88: rgba(30,26,22,0.88); /* bottom panel gradient bottom (translucent) */
/* === Indicator Demo Overlays (FieldManualPanel / HelpSidebarTab swatches) === */
--overlay-green-10: rgba(90,138,74,0.1); /* accent-green at 10% — chevron demo bg */
--overlay-green-30: rgba(90,138,74,0.3); /* accent-green at 30% — chevron demo border */
--overlay-teal-08: rgba(42,106,122,0.08); /* teal at 8% — convoy/stealth demo bg */
--overlay-teal-10: rgba(42,138,154,0.1); /* lighter teal at 10% — recon demo bg */
--overlay-teal-30: rgba(42,106,122,0.3); /* teal at 30% — stealth demo border */
--overlay-teal-dark-70: rgba(26,74,90,0.7); /* dark teal at 70% — convoy inner circle */
--overlay-crimson-08: rgba(139,48,48,0.08); /* crimson at 8% — kamikaze demo bg */
--overlay-crimson-35: rgba(139,48,48,0.35); /* crimson at 35% — kamikaze dashed border */
--overlay-crimson-70: rgba(139,48,48,0.7); /* crimson at 70% — kamikaze inner circle */
--overlay-casualty-35: rgba(160,64,64,0.35); /* casualty red at 35% — battle demo border */
--overlay-bronze-12: rgba(80,70,50,0.12); /* bronze at 12% — chip/ghost demo bg */
--overlay-ghost-30: rgba(120,110,80,0.3); /* ghost-tan at 30% — ghost demo dashed border */
--overlay-fog-border: rgba(80,80,80,0.4); /* mid-gray at 40% — fog demo border */
--overlay-amber-25: rgba(200,130,40,0.25); /* amber at 25% — damage indicator border */
--overlay-blue-slate-15: rgba(90,122,154,0.15); /* slate-blue at 15% — move-phase tag bg */
--overlay-blue-slate-25: rgba(90,122,154,0.25); /* slate-blue at 25% — move-phase tag border */
/* === Device Safe-Area Insets (viewport-fit=cover required in ) ===
* Single source of truth — reference these vars everywhere instead of env() directly.
* Default 0px so non-notch devices are unaffected. */
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
}
/* === Safe Area Utility Classes ===
* Use these on edge-anchored chrome elements so they clear the Dynamic Island
* and home indicator. Full-bleed backdrops (PixiMapView, overlay scrims) must
* NOT use these — they should bleed to the physical edge. */
.safe-inset-l { padding-left: var(--safe-l); }
.safe-inset-r { padding-right: var(--safe-r); }
.safe-inset-t { padding-top: var(--safe-t); }
.safe-inset-b { padding-bottom: var(--safe-b); }
.safe-inset-x { padding-left: var(--safe-l); padding-right: var(--safe-r); }
.safe-inset-y { padding-top: var(--safe-t); padding-bottom: var(--safe-b); }
/* === Tighter text tokens for narrow viewports (≤ 1024px, e.g. iPhone landscape) === */
@media (max-width: 1024px) {
:root {
--text-xs: clamp(0.5rem, 0.46rem + 0.13vw, 0.625rem);
--text-sm: clamp(0.5625rem, 0.52rem + 0.18vw, 0.6875rem);
--text-base: clamp(0.6875rem, 0.63rem + 0.32vw, 0.8125rem);
--text-lg: clamp(0.875rem, 0.81rem + 0.41vw, 1rem);
--text-xl: clamp(1rem, 0.93rem + 0.47vw, 1.1875rem);
}
}
/* === Safe-Area Utility Classes ===
* Compose these onto any element that touches a screen edge.
* Composes with existing padding via calc(token + var(--safe-*)) in inline styles. */
.safe-inset-x { padding-left: var(--safe-l); padding-right: var(--safe-r); }
.safe-inset-left { padding-left: var(--safe-l); }
.safe-inset-right { padding-right: var(--safe-r); }
.safe-inset-top { padding-top: var(--safe-t); }
.safe-inset-bottom { padding-bottom: var(--safe-b); }
/* === Root Font Size === */
html {
/* Fixed 16px base — fluid sizing lives in --text-* / --space-* tokens,
not the root, to avoid double-scaling clamp-inside-clamp.
--text-scale (set by manual text-size preference) still works as a multiplier. */
font-size: calc(16px * var(--text-scale, 1));
}
/* === Global Overrides === */
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
}
/* Global film grain — subtle noise over all surfaces for analog richness */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
mix-blend-mode: overlay;
}
/* === Keyboard Focus === */
/* Suppress browser default outline for mouse/touch users */
*:focus:not(:focus-visible) {
outline: none;
}
/* Gold ring for keyboard navigation — matches war-room accent */
*:focus-visible {
outline: 2px solid var(--accent-gold);
outline-offset: 2px;
}
/*
* === Hover Convention ===
*
* Default: filter: brightness(1.15) — works on any solid background.
* Ghost/transparent elements: background swap to show interactivity.
* Semantic buttons (danger, acknowledge): explicit color changes allowed.
* Text-only feedback (dismiss, ghost-danger): color change only.
*/
/* === Beveled Button (Crisp Contrast: subtle surface) === */
.btn-bevel {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
cursor: pointer;
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
font-family: var(--font-body);
}
.btn-bevel:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.btn-bevel:active:not(:disabled) {
transform: translateY(0);
}
.btn-bevel:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* === END PHASE Button (Crisp Contrast: gold gradient) === */
.btn-end-phase {
background: linear-gradient(180deg, rgba(196,164,74,0.2) 0%, rgba(196,164,74,0.1) 100%);
color: var(--accent-gold);
border: 1px solid rgba(196,164,74,0.35);
border-radius: var(--radius-md);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all var(--transition-normal);
}
.btn-end-phase:hover:not(:disabled) {
border-color: rgba(196,164,74,0.5);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transform: translateY(-1px);
}
.btn-end-phase:active:not(:disabled) {
transform: translateY(0);
}
.btn-end-phase:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* === Panel (Crisp Contrast: clean gradient, no texture) === */
.panel-leather {
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 14px;
}
/* === Panel Section === */
.panel-section {
padding: 14px;
}
/* === Category Headers === */
.category-dot {
width: 10px;
height: 10px;
border-radius: 3px;
box-shadow: 0 0 4px currentColor;
}
.category-label {
font-weight: 600;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.9);
}
/* === Numbered Item Badges === */
.item-badge {
width: 22px;
height: 22px;
border-radius: 4px;
background: rgba(196,164,74,0.15);
color: var(--accent-gold);
font-size: 11px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.item-row {
border-radius: 6px;
background: rgba(255,255,255,0.03);
padding: 8px 10px;
}
/* === Hit Category Chips === */
.chip-sub { background: rgba(74,158,255,0.12); border: 1px solid rgba(74,158,255,0.3); color: #7ab8ff; }
.chip-air { background: rgba(255,152,0,0.15); border: 1px solid rgba(255,152,0,0.4); color: #ffb74d; }
.chip-surface { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.chip-aa { background: rgba(212,160,32,0.12); border: 1px solid rgba(212,160,32,0.3); color: #e8d48b; }
.chip-active { font-weight: bold; }
.chip-sub.chip-active { box-shadow: 0 0 8px rgba(74,158,255,0.15); }
.chip-air.chip-active { box-shadow: 0 0 8px rgba(255,152,0,0.15); }
.chip-aa.chip-active { box-shadow: 0 0 8px rgba(212,160,32,0.15); }
/* === Unit Miniature Effect === */
.unit-miniature {
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.6))
contrast(1.15)
brightness(1.05);
image-rendering: auto;
}
.unit-miniature:hover {
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.7))
contrast(1.2)
brightness(1.15);
}
/* === Heading Font === */
.heading-ww2 {
font-family: var(--font-heading);
color: var(--text-heading);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* === Phase Chips === */
.phase-chip {
padding: 2px 5px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
line-height: 1.2;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
border: 1px solid var(--border-secondary);
cursor: default;
user-select: none;
font: inherit;
}
.phase-chip--active {
background: linear-gradient(180deg, rgba(196,164,74,0.12) 0%, rgba(196,164,74,0.06) 100%);
color: var(--accent-gold);
border-color: var(--border-accent);
padding: 1px 10px;
line-height: 16px;
font-size: var(--text-sm);
position: relative;
z-index: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
}
.phase-chip-help-icon {
opacity: 0.65;
font-size: 0.75em;
font-weight: bold;
text-transform: none;
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
border: 1px solid currentColor;
line-height: 1;
flex-shrink: 0;
}
.phase-chip--activating {
animation: phaseActivate 0.4s ease-out;
}
/* === Scrollbar === */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-tertiary);
}
::-webkit-scrollbar-thumb {
background: var(--border-primary);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--border-accent);
}
.lobby-splash-exit {
animation: lobby-splashFadeOut 0.6s ease-out forwards;
}
/* Lobby split panel base styles */
.lobby-panel-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 50%;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
overflow: hidden;
z-index: 1;
}
.lobby-panel-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 50%;
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;
z-index: 1;
}
.lobby-diagonal {
position: fixed;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
transform: skewX(-5deg);
background: linear-gradient(to bottom, rgba(196,165,74,0.1), rgba(196,165,74,0.6), rgba(196,165,74,0.1));
box-shadow: 0 0 20px rgba(196,165,74,0.3), 0 0 60px rgba(196,165,74,0.1);
z-index: 2;
animation: lobby-diagonalGlow 4s ease-in-out infinite;
pointer-events: none;
}
/* Lobby: mobile — stack panels top/bottom */
@media (max-width: 600px) {
.lobby-panel-left {
width: 100% !important;
height: 55vh !important;
bottom: 45vh !important;
top: 0 !important;
clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%) !important;
}
.lobby-panel-right {
width: 100% !important;
height: 55vh !important;
top: 45vh !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%) !important;
}
.lobby-diagonal {
top: 50% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 6px !important;
transform: skewY(-3deg) !important;
box-shadow: 0 0 12px 2px rgba(196,165,74,0.5), 0 0 24px 4px rgba(196,165,74,0.25), 0 0 40px 8px rgba(196,165,74,0.1) !important;
}
.lobby-center-content {
top: 50% !important;
}
.lobby-center-content::before {
content: '';
position: absolute;
inset: -24px -32px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
z-index: -1;
}
/* iOS Safari: disable backdrop-filter (freezes main thread on M1 iPad) */
@supports (-webkit-touch-callout: none) {
.lobby-center-content::before {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(0, 0, 0, 0.72);
}
}
/* Subtitle: reduce bottom margin */
.lobby-center-content > h1 + div {
margin-bottom: 24px !important;
}
/* Decorative line: reduce bottom margin */
.lobby-center-content > h1 + div + div {
margin-bottom: 16px !important;
}
}
/* === Dice Animation === */
.dice-rolling {
display: inline-block;
animation: diceRoll 0.5s ease-out;
}
.dice-tumble {
animation: diceTumble 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dice-hit {
color: var(--color-hit);
text-shadow: 0 0 6px rgba(224, 80, 80, 0.6);
animation: hitPulse 0.4s ease-out;
}
.dice-miss {
color: var(--color-miss);
animation: missFall 0.3s ease-out forwards;
}
/* === Rolling Table (center column felt background) === */
.rolling-table {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
radial-gradient(ellipse 120% 80% at 50% 40%, rgba(52, 78, 52, 0.35) 0%, transparent 70%),
linear-gradient(180deg, #1c2418 0%, #1a1e14 40%, #181a12 100%);
position: relative;
}
.rolling-table::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow:
inset 0 8px 20px rgba(0, 0, 0, 0.5),
inset 0 -8px 20px rgba(0, 0, 0, 0.4),
inset 8px 0 16px rgba(0, 0, 0, 0.3),
inset -8px 0 16px rgba(0, 0, 0, 0.3);
border-radius: inherit;
z-index: 0;
}
.rolling-table > * {
position: relative;
z-index: 1;
}
/* === Drag ghost chip — GPU compositor hint ===
will-change:transform promotes the ghost group to a compositor layer so iOS
Safari can repaint it without repainting the full map SVG. The SVG transform
attribute is still used for positioning (correct SVG user-space coords). */
.drag-ghost { will-change: transform; }
/* === Map LOD — hide the raster shadow overlay during pan/zoom gestures ===
The .map-zooming class is added to the SVG by useD3Zoom when the map is
actually panning/zooming and removed 50 ms after it settles. Only the
large raster shadow overlay is hidden — it is the most expensive element
to composite on each frame. Territory labels and unit chips remain
visible throughout; SVG viewport culling (MapView) keeps their count low
enough that pan performance is acceptable without hiding them. */
.map-lod-shadow { transition: opacity 0.12s ease-out; }
.map-zooming .map-lod-shadow { opacity: 0; pointer-events: none; }
/* === Map Viewport — vintage cartography styling === */
.map-viewport::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
z-index: 10;
}
/* === Acknowledge Hits Button === */
.btn-acknowledge-hits {
font-family: var(--font-heading);
letter-spacing: 0.5px;
text-transform: uppercase;
border: 2px solid var(--accent-red);
background: linear-gradient(180deg, rgba(224, 80, 80, 0.18) 0%, rgba(180, 50, 50, 0.12) 100%);
color: var(--accent-red-bright);
box-shadow: 0 0 12px rgba(224, 80, 80, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn-acknowledge-hits:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(224, 80, 80, 0.28) 0%, rgba(180, 50, 50, 0.2) 100%);
box-shadow: 0 0 20px rgba(224, 80, 80, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn-acknowledge-hits:active:not(:disabled) {
transform: scale(0.97);
}
.btn-acknowledge-hits--zero {
border-color: var(--border-accent);
background: linear-gradient(180deg, rgba(196, 164, 74, 0.12) 0%, rgba(160, 130, 50, 0.08) 100%);
color: var(--accent-gold);
box-shadow: 0 0 8px rgba(196, 164, 74, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-acknowledge-hits--zero:hover:not(:disabled) {
background: linear-gradient(180deg, rgba(196, 164, 74, 0.2) 0%, rgba(160, 130, 50, 0.14) 100%);
box-shadow: 0 0 16px rgba(196, 164, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* === Battle Board === */
.battle-power-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 34px;
background: var(--bg-tertiary);
border: 1px solid var(--border-accent);
border-radius: var(--radius-sm);
color: var(--accent-gold);
font-size: var(--text-lg);
font-weight: 700;
flex-shrink: 0;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.battle-unit-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid var(--border-secondary);
transition: background var(--transition-fast);
}
.battle-unit-row:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
.battle-noncombatant {
opacity: 0.4;
font-style: italic;
}
/* === Button Size Variants === */
.btn-sm {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
border-radius: var(--radius-sm);
}
.btn-md {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
border-radius: var(--radius-md);
}
/* === Button Color Variants === */
.btn-primary {
background: var(--btn-bg-primary);
color: var(--text-primary);
border: 1px solid var(--accent-brass);
transition: background var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
}
.btn-danger {
background: linear-gradient(180deg, rgba(180,60,60,0.2) 0%, rgba(180,60,60,0.1) 100%);
color: #e8a0a0;
border: 1px solid rgba(180,60,60,0.35);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-danger:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn-danger:active:not(:disabled) {
transform: translateY(0);
}
.btn-danger:disabled {
opacity: 0.4;
cursor: default;
transform: none;
}
.btn-success {
background: var(--btn-bg-success);
color: var(--text-primary);
border: 1px solid var(--accent-green);
transition: background var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
}
.btn-ghost {
background: transparent;
color: rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.08);
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-ghost:hover:not(:disabled) {
background: var(--surface-hover);
color: var(--text-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.btn-ghost:active:not(:disabled) {
transform: translateY(0);
}
.btn-ghost:disabled {
opacity: 0.4;
cursor: default;
transform: none;
}
/* === Button Shape Variants === */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: var(--radius-sm);
transition: background var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
}
.btn-stepper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
font-size: var(--text-base);
line-height: 22px;
text-align: center;
border-radius: var(--radius-sm);
background: var(--btn-bg);
color: var(--btn-text);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
}
/* === Base Panel Button === */
.btn {
padding: 4px 10px;
font-size: var(--text-sm);
background: var(--btn-bg);
color: var(--btn-text);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition-fast);
}
.btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
filter: brightness(1.1);
}
.btn:active:not(:disabled) {
transform: translateY(1px);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* === Compact Button === */
.btn-xs {
padding: 2px 6px;
font-size: var(--text-xs);
}
/* === Header/Overlay Button === */
.btn-header {
padding: 2px 8px;
font-size: var(--text-xs);
color: var(--text-primary);
background: var(--btn-bg);
border: 1px solid var(--border-primary);
border-radius: var(--radius-sm);
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: var(--transition-fast);
}
/* === Overlay Close Button (shared across info panels) === */
.btn-close-overlay {
padding: 2px var(--space-sm);
font-size: var(--text-sm);
color: var(--text-primary);
background: var(--btn-bg-danger);
border: 1px solid var(--accent-red);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition-fast);
}
.btn-close-overlay:hover {
filter: brightness(1.15);
}
/* === Lobby / Auth Button === */
.btn-lobby {
background: linear-gradient(180deg, var(--border-accent) 0%, var(--btn-bg-primary) 50%, #5a4a20 100%);
color: var(--color-lobby-title);
border: 2px solid var(--border-accent);
border-top-color: var(--accent-gold);
border-bottom-color: var(--btn-bg-primary);
border-radius: 5px;
cursor: pointer;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 1px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5);
transition: var(--transition-fast);
}
.btn-lobby:hover:not(.btn-lobby--disabled) {
transform: translateY(-1px);
filter: brightness(1.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.6);
}
.btn-lobby--disabled {
background: var(--surface-input);
color: var(--text-muted);
border-color: var(--btn-bg);
cursor: not-allowed;
box-shadow: none;
}
/* === Debug Panel Button === */
.btn-debug {
background: var(--btn-bg);
border: 1px solid var(--border-primary);
border-radius: 3px;
color: var(--text-primary);
cursor: pointer;
font-size: var(--text-xs);
font-family: var(--font-mono);
padding: 2px 5px;
line-height: 16px;
min-width: 22px;
text-align: center;
transition: var(--transition-fast);
}
/* === Panel Overlay === */
.panel-overlay {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
var(--bg-overlay);
background-size: 200px 200px, 100% 100%;
border: 1px solid var(--border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-lg);
max-height: 90vh;
max-height: 90dvh;
overflow: hidden;
display: flex;
flex-direction: column;
overscroll-behavior: contain;
}
/* === Card === */
.card {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
var(--bg-tertiary);
background-size: 150px 150px, 100% 100%;
border: 1px solid var(--border-secondary);
border-radius: var(--radius-md);
padding: var(--space-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover {
border-color: var(--border-accent);
box-shadow: 0 0 8px rgba(196, 164, 74, 0.1);
}
/* === Modal Backdrop === */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
}
/* === Toast === */
.toast {
background: var(--surface-panel);
color: var(--text-primary);
border: 1px solid var(--border-primary);
border-left: 3px solid var(--accent-gold);
border-radius: 2px;
box-shadow: var(--shadow-lg);
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-base);
z-index: var(--z-toast);
position: relative;
overflow: hidden;
}
.toast::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
135deg,
rgba(196, 164, 74, 0.03) 0px,
transparent 2px,
transparent 6px
);
pointer-events: none;
}
/* === Divider === */
.divider {
border: none;
border-top: 1px solid var(--border-secondary);
margin: var(--space-md) 0;
}
/* === Menu Item === */
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
font-size: var(--text-base);
color: var(--text-primary);
border-left: 2px solid transparent;
cursor: pointer;
border: none;
background: transparent;
width: 100%;
text-align: left;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.menu-item:hover {
background: var(--surface-panel);
border-left-color: var(--accent-gold);
}
/* === Toggle Switch === */
.toggle-switch {
width: 36px;
height: 18px;
border-radius: 9px;
border: 1px solid var(--border-primary);
background: var(--btn-bg);
position: relative;
cursor: pointer;
transition: background var(--transition-normal);
flex-shrink: 0;
padding: 0;
}
.toggle-switch--on {
background: var(--btn-bg-success);
}
.toggle-switch--lg {
width: 40px;
height: 20px;
border-radius: 10px;
}
.toggle-knob {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--toggle-knob);
position: absolute;
top: 1px;
left: 1px;
transition: left var(--transition-normal), background var(--transition-normal);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.toggle-switch--on .toggle-knob {
background: var(--toggle-knob-on);
left: 19px;
}
.toggle-switch--lg .toggle-knob {
width: 16px;
height: 16px;
}
.toggle-switch--lg.toggle-switch--on .toggle-knob {
left: 21px;
}
/* === Toast Variants === */
.toast--success::before,
.toast--error::before,
.toast--info::before {
display: block;
font-size: var(--text-xs);
font-variant: small-caps;
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 4px;
}
.toast--success {
background: var(--bg-tertiary);
border-left-color: var(--accent-green);
box-shadow: 0 4px 20px rgba(76, 175, 80, 0.3), 0 0 40px rgba(76, 175, 80, 0.1);
}
.toast--success::before {
content: 'DISPATCH';
color: var(--accent-green);
}
.toast--error {
background: var(--bg-tertiary);
border-left-color: var(--accent-red-bright);
box-shadow: 0 4px 20px rgba(192, 64, 64, 0.3), 0 0 40px rgba(192, 64, 64, 0.1);
}
.toast--error::before {
content: 'ALERT';
color: var(--accent-red-bright);
}
.toast--info::before {
content: 'NOTICE';
color: var(--accent-gold);
}
/* === Stepper Button Hover === */
.btn-stepper-hover {
transition: filter var(--transition-fast);
}
.btn-stepper-hover:hover:not(:disabled) {
filter: brightness(1.15);
}
/* === Shared StepperPill button affordance (hover + focus ring) === */
.stepper-pill-btn {
transition: filter var(--transition-fast);
}
.stepper-pill-btn:hover:not(:disabled) {
filter: brightness(1.15);
}
.stepper-pill-btn:focus-visible {
outline: 2px solid var(--accent-gold);
outline-offset: -2px;
position: relative;
z-index: 1;
}
/* === Hover Highlight (interactive list item bg on hover) === */
.hover-highlight:hover {
background: var(--btn-bg);
}
/* === Save/Load Slot Row States === */
.slot-row-hover {
background: transparent;
border-left: 2px solid transparent;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.slot-row-hover:hover {
background: var(--surface-hover);
border-left-color: var(--accent-gold);
}
.slot-row-selected {
background: var(--surface-panel);
transition: background var(--transition-fast);
}
/* === Auto-save Row === */
.slot-autosave-row {
background: var(--bg-tertiary);
border-left: 2px solid transparent;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.slot-autosave-row:hover {
background: var(--surface-hover);
border-left-color: var(--accent-gold);
}
/* === Ghost Button Danger Variant === */
.btn-ghost-danger {
color: var(--text-muted);
}
.btn-ghost-danger:hover {
color: var(--accent-red-bright);
}
/* === Dismiss Button (icon button with muted → primary on hover) === */
.btn-dismiss {
color: var(--text-muted);
transition: color var(--transition-fast);
}
.btn-dismiss:hover {
color: var(--text-primary);
}
/* === Search Result Item === */
.search-result-item:hover {
background: var(--surface-hover);
}
/* === Toolbar Title (game name in top bar) === */
.toolbar-left {
flex: 1;
display: flex;
align-items: baseline;
gap: var(--space-xs);
min-width: 0;
}
.toolbar-title {
flex: 0 0 auto;
font-size: var(--text-sm);
font-weight: 700;
color: var(--accent-gold);
font-family: var(--font-heading);
white-space: nowrap;
}
.toolbar-game-name {
font-size: var(--text-xs);
font-weight: 400;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
min-width: 0;
}
/* === Responsive Toolbar Collapse === */
@media (max-width: 560px) {
.toolbar-income {
display: none !important;
}
}
@media (max-width: 500px) {
.toolbar-title,
.toolbar-game-name {
display: none !important;
}
.board-phase-row {
display: none !important;
}
}
@media (max-width: 440px) {
.toolbar-title,
.toolbar-game-name {
display: none !important;
}
}
/* === Sidebar Toggle Tab (mobile drawer mode) === */
.sidebar-toggle-tab {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: var(--z-sidebar-backdrop);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
padding: 12px 6px;
cursor: pointer;
color: var(--accent-gold);
font-size: var(--text-lg);
box-shadow: var(--shadow-md);
transition: filter var(--transition-fast);
line-height: 1;
}
.sidebar-toggle-tab:hover {
filter: brightness(1.15);
}
/* === Loading Shimmer === */
.shimmer {
background: linear-gradient(
90deg,
var(--bg-tertiary) 0%,
var(--bg-secondary) 40%,
var(--surface-card) 50%,
var(--bg-secondary) 60%,
var(--bg-tertiary) 100%
);
background-size: 200% 100%;
animation: shimmer 1.6s ease-in-out infinite;
border-radius: var(--radius-sm);
}
/* === Radio Shimmer — gold-tinted variant for game-context loading === */
.shimmer-radio {
background: linear-gradient(
90deg,
var(--bg-tertiary) 0%,
rgba(196, 164, 74, 0.06) 45%,
rgba(196, 164, 74, 0.10) 50%,
rgba(196, 164, 74, 0.06) 55%,
var(--bg-tertiary) 100%
);
background-size: 200% 100%;
animation: shimmer 2s ease-in-out infinite;
border-radius: var(--radius-sm);
}
/* === Waiting Room — radio/telegraph status indicator === */
.waiting-status {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 3px;
color: var(--accent-gold);
animation: transmit 2s ease-in-out infinite;
text-align: center;
margin-bottom: var(--space-sm);
}
/* === Signal Strength Indicator === */
.signal-bars {
display: inline-flex;
gap: 3px;
align-items: flex-end;
height: 14px;
margin-left: var(--space-xs);
vertical-align: middle;
}
.signal-bar {
width: 3px;
background: var(--accent-gold);
border-radius: 1px;
opacity: 0.25;
transition: opacity 0.3s ease;
}
.signal-bar--active {
opacity: 1;
}
.signal-bar:nth-child(1) { height: 4px; }
.signal-bar:nth-child(2) { height: 7px; }
.signal-bar:nth-child(3) { height: 10px; }
.signal-bar:nth-child(4) { height: 14px; }
/* === Error Banner === */
.error-banner {
background: rgba(160, 64, 64, 0.12);
border: 1px solid rgba(192, 80, 80, 0.3);
border-left: 3px solid var(--accent-red-bright);
border-radius: var(--radius-sm);
color: var(--accent-red-bright);
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
}
/* ═══════════════════════════════════════════════════════════════
ANIMATION KEYFRAMES
All @keyframes consolidated here, grouped by category.
prefers-reduced-motion coverage is handled globally below.
═══════════════════════════════════════════════════════════════ */
/* --- Entrance: elements appearing on screen --- */
/* fadeIn — simple opacity entrance
Duration: varies | Easing: varies
Consumers: general-purpose utility */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* toastSlideIn — telegram-style slide from right
Duration: 0.4s | Easing: ease-out
Consumers: TechBreakthroughToast, InvalidMoveToast, TransportLoadToast, IncomeBanner */
@keyframes toastSlideIn {
0% { transform: translateX(100%); opacity: 0; }
60% { transform: translateX(-4px); opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
/* slideUp — panel/element slides up into view
Duration: 0.2s | Easing: ease
Consumers: PhasePanel */
@keyframes slideUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* slideUpBar — bottom bar entrance from below
Duration: 200ms | Easing: ease-out
Consumers: AttackPreviewBar, StagePreviewBar, TerritoryBottomPanel */
@keyframes slideUpBar {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* slideInRight — element slides in from the right
Duration: varies | Easing: varies
Consumers: general-purpose utility */
@keyframes slideInRight {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
/* arrowAppear — movement arrow fade-in on the map
Duration: 0.35s | Easing: ease-out
Consumers: MapView .arrow-appear */
@keyframes arrowAppear {
from { opacity: 0; }
to { opacity: 1; }
}
/* lobby-titleFade — lobby title/subtitle scale-up entrance
Duration: 1.2–1.5s | Easing: ease-out
Consumers: LobbyPage (title, subtitle, divider) */
@keyframes lobby-titleFade {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
/* lobby-ctaFade — delayed fade-in for lobby CTA text
Duration: 2.5s | Easing: ease
Consumers: LobbyPage (CTA section) */
@keyframes lobby-ctaFade {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
/* lobby-menuSlideUp — lobby menu items slide up with staggered delay
Duration: 0.5–0.8s | Easing: ease-out
Consumers: LobbyPage (menu items, game list, auth section) */
@keyframes lobby-menuSlideUp {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
/* --- Exit: elements leaving the screen --- */
/* fadeOut — simple opacity exit
Duration: varies | Easing: varies
Consumers: general-purpose utility */
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* slideOutRight — element slides out to the right
Duration: varies | Easing: varies
Consumers: general-purpose utility */
@keyframes slideOutRight {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
/* slideInLeft — element slides in from the left edge
Duration: varies | Easing: varies
Consumers: HamburgerMenu (settings panel, gear-triggered) */
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
/* slideOutLeft — element slides out to the left edge
Duration: varies | Easing: varies
Consumers: HamburgerMenu (settings panel, gear-triggered) */
@keyframes slideOutLeft {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* lobby-splashFadeOut — splash screen fade-out on lobby load
Duration: 0.6s | Easing: ease-out
Consumers: .lobby-splash-exit */
@keyframes lobby-splashFadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* --- Feedback: response to user actions --- */
/* phaseActivate — brief flash when a phase chip becomes active
Duration: 0.4s | Easing: ease-out
Consumers: .phase-chip--activating */
@keyframes phaseActivate {
0% { opacity: 1; }
20% { opacity: 0.6; }
100% { opacity: 1; }
}
/* diceTumble — bouncy dice entry with rotation and scale
Duration: 0.45s | Easing: cubic-bezier(0.34, 1.56, 0.64, 1)
Consumers: .dice-tumble */
@keyframes diceTumble {
0% { transform: translateY(-8px) rotate(-15deg) scale(0.6); opacity: 0; }
25% { transform: translateY(3px) rotate(12deg) scale(1.15); opacity: 0.7; }
50% { transform: translateY(-2px) rotate(-6deg) scale(0.95); opacity: 0.9; }
75% { transform: translateY(1px) rotate(3deg) scale(1.05); }
100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}
/* hitPulse — red glow behind hit dice on landing
Duration: 0.4s | Easing: ease-out
Consumers: .dice-hit */
@keyframes hitPulse {
0% { box-shadow: 0 0 0 rgba(224, 80, 80, 0); }
30% { box-shadow: 0 0 12px rgba(224, 80, 80, 0.5); }
100% { box-shadow: 0 0 4px rgba(224, 80, 80, 0.2); }
}
@keyframes presencePulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(196, 82, 82, 0.9); }
50% { box-shadow: 0 0 0 6px rgba(196, 82, 82, 0); }
}
/* missFall — subtle downward drift and fade for missed dice
Duration: 0.3s | Easing: ease-out
Consumers: .dice-miss */
@keyframes missFall {
0% { transform: translateY(0); opacity: 0.8; }
100% { transform: translateY(2px); opacity: 0.5; }
}
/* diceRoll — rapid spin and scale during dice roll
Duration: 0.5s | Easing: ease-out
Consumers: .dice-rolling */
@keyframes diceRoll {
0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
20% { transform: rotate(72deg) scale(1.3); opacity: 0.6; }
40% { transform: rotate(144deg) scale(0.8); }
60% { transform: rotate(216deg) scale(1.2); }
80% { transform: rotate(288deg) scale(0.9); }
100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
/* shimmer — loading skeleton sweep effect
Duration: 1.6s | Easing: ease-in-out | Iterations: infinite
Consumers: .shimmer */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* transmit — pulsing opacity for radio/telegraph status text
Duration: 2s | Easing: ease-in-out | Iterations: infinite
Consumers: .waiting-status */
@keyframes transmit {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* --- Attention: draw the user's eye --- */
/* turnPulse — pulsing opacity for turn indicator
Duration: varies | Easing: varies
Consumers: (available for turn-related highlights) */
@keyframes turnPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* arrowPulse — subtle opacity pulse for arrow indicators
Duration: varies | Easing: varies
Consumers: (available for arrow-related highlights) */
@keyframes arrowPulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.6; }
}
/* lobby-ctaPulse — gentle scale+opacity pulse on lobby CTA
Duration: 3s | Easing: ease-in-out | Iterations: infinite
Consumers: LobbyPage (CTA button) */
@keyframes lobby-ctaPulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
}
/* lobby-diagonalGlow — pulsing glow on diagonal separator line
Duration: 4s | Easing: ease-in-out | Iterations: infinite
Consumers: LobbyPage (diagonal divider) */
@keyframes lobby-diagonalGlow {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* --- Ambient: continuous background motion --- */
/* lobby-subtlePan — slow scale/translate drift on lobby backgrounds
Duration: 25s | Easing: ease-in-out | Iterations: infinite
Consumers: LobbyPage (background panels, forward and reverse) */
@keyframes lobby-subtlePan {
0% { transform: scale(1.08) translateY(0); }
50% { transform: scale(1.12) translateY(-1%); }
100% { transform: scale(1.08) translateY(0); }
}
/* spin-dash — DEPRECATED: was used for must-land dashed ring, replaced by SVG animate halo.
Kept for backwards compat in case any other consumer references it. */
@keyframes spin-dash {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* lobby-slideLeft — slide-in from left edge
Duration: varies | Easing: varies
Consumers: LobbyPage (left panel entrance) */
@keyframes lobby-slideLeft {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
/* lobby-slideRight — slide-in from right edge
Duration: varies | Easing: varies
Consumers: LobbyPage (right panel entrance) */
@keyframes lobby-slideRight {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
/* arrow-appear — helper class for arrowAppear keyframe */
.arrow-appear {
animation: arrowAppear 0.35s ease-out forwards;
}
/* typewriter-in — clip-path reveal for new war diary entries
Duration: 0.3s | Easing: ease-out
Consumers: .tan-line-new */
@keyframes typewriter-in {
from { clip-path: inset(0 100% 0 0); opacity: 0.6; }
to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.tan-line-new {
animation: typewriter-in 0.3s ease-out;
}
/* === Reduced Motion ===
* Respect the user's OS-level "Reduce motion" preference.
* Collapses all CSS animations to a single instant frame and
* removes transition durations so state changes appear immediately.
* JS animations (useMovementAnimation, D3 zoom) check
* matchMedia('(prefers-reduced-motion: reduce)') separately.
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* === Panel Layout Utilities === */
.panel-row {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.panel-row-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-col {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.flex-1-min0 {
flex: 1;
min-width: 0;
}
/* === War Diary Panel === */
.wdiary-round-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--space-xs) var(--space-sm);
border-bottom: 1px solid var(--btn-bg);
font-size: var(--text-sm);
font-weight: bold;
color: var(--accent-gold);
}
.wdiary-nav-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-sm);
padding: 0 var(--space-xs);
line-height: 1;
}
.wdiary-filter-bar {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-bottom: 1px solid var(--btn-bg);
flex-wrap: wrap;
}
.wdiary-view-toggle {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: 2px var(--space-sm);
border-bottom: 1px solid var(--btn-bg);
font-size: var(--text-xs);
}
.wdiary-toggle-btn {
background: none;
border: 1px solid var(--border-primary);
border-radius: 3px;
color: var(--text-muted);
cursor: pointer;
font-size: var(--text-xs);
padding: 1px 6px;
font-family: var(--font-mono);
position: relative;
}
.wdiary-toggle-btn::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-gold);
transition: width var(--transition-normal), left var(--transition-normal);
}
.wdiary-toggle-btn:hover::after,
.wdiary-toggle-btn--active::after {
width: 100%;
left: 0;
}
.wdiary-toggle-btn--active {
background: var(--btn-bg);
color: var(--text-primary);
}
/* === Game Log === */
.gamelog-scroll,
.wdiary-body {
font-family: var(--font-diary);
background: linear-gradient(180deg, rgba(40,38,30,0.4) 0%, rgba(35,33,26,0.3) 100%);
}
.gamelog-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
line-height: 1.6;
}
.wdiary-body {
flex: 1;
min-height: 0;
overflow-y: auto;
font-size: var(--text-xs);
line-height: 1.5;
}
/* Details disclosure button inside BattleEntryCard / SBREntryCard */
.wdiary-details-btn {
background: rgba(196, 165, 74, 0.08);
border: 1px solid rgba(196, 165, 74, 0.25);
border-radius: 3px;
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-sm);
padding: 4px 10px;
margin-top: 4px;
margin-left: 10px;
display: inline-block;
letter-spacing: 0.3px;
}
.wdiary-details-btn:hover {
background: rgba(196, 165, 74, 0.15);
color: var(--accent-gold);
border-color: rgba(196, 165, 74, 0.45);
}
.tan-line-phase {
color: var(--text-primary);
font-weight: bold;
margin-top: var(--space-sm);
padding-top: var(--space-xs);
display: flex;
align-items: center;
gap: 0.5em;
text-transform: uppercase;
font-size: calc(var(--text-xs) * 0.9);
letter-spacing: 0.08em;
white-space: nowrap;
}
.tan-line-phase::before,
.tan-line-phase::after {
content: '';
flex: 1;
border-top: 1px solid var(--tooltip-divider);
}
.tan-line-phase::before {
max-width: 1.5em;
}
.tan-line-move { color: var(--text-secondary); }
.tan-line-battle { color: var(--text-accent); font-weight: bold; }
.tan-line-dice { color: var(--color-log-dice); }
.tan-line-outcome { color: var(--text-secondary); }
.tan-line-purchase { color: var(--color-log-purchase); }
.tan-line-placement { color: var(--color-log-placement); }
.tan-line-income { color: var(--color-log-income); }
.tan-line-text { color: var(--text-secondary); }
.tan-line--highlighted {
background: var(--tooltip-divider);
border-radius: 2px;
margin: 0 -4px;
padding: 0 4px;
}
.tan-line-phase.tan-line--highlighted {
padding: 2px 4px;
}
/* === Chat Panel === */
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.chat-tab-bar {
display: flex;
padding: var(--space-xs) var(--space-sm) 0;
border-bottom: 1px solid var(--border-primary);
}
.chat-tab {
padding: 3px 10px;
font-size: var(--text-xs);
font-weight: normal;
background: transparent;
border: 1px solid var(--border-primary);
border-bottom-color: var(--border-primary);
border-radius: 3px 3px 0 0;
color: var(--text-muted);
cursor: pointer;
margin-right: 2px;
position: relative;
}
.chat-tab::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-gold);
transition: width var(--transition-normal), left var(--transition-normal);
}
.chat-tab:hover::after,
.chat-tab--active::after {
width: 100%;
left: 0;
}
.chat-tab--active {
font-weight: bold;
background: var(--btn-bg);
border-bottom-color: var(--btn-bg);
color: var(--accent-gold-bright);
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
}
.chat-emoji-picker {
position: absolute;
bottom: 44px;
left: 4px;
right: 4px;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 4px;
padding: 6px;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 2px;
z-index: 100;
}
.chat-emoji-btn {
background: none;
border: none;
cursor: pointer;
font-size: var(--text-lg);
padding: 2px;
border-radius: 3px;
line-height: 1;
}
.chat-input-row {
display: flex;
border-top: 1px solid var(--btn-bg);
padding: var(--space-xs);
gap: var(--space-xs);
}
.chat-emoji-toggle {
background: var(--surface-input);
border: 1px solid var(--border-primary);
border-radius: 3px;
font-size: var(--text-base);
padding: 2px 6px;
cursor: pointer;
line-height: 1;
}
.chat-emoji-toggle--active {
background: var(--btn-bg);
}
.chat-text-input {
flex: 1;
background: var(--surface-input);
border: 1px solid var(--border-primary);
border-radius: 3px;
color: var(--text-primary);
font-size: var(--text-sm);
padding: var(--space-xs) 6px;
outline: none;
}
.chat-send-btn {
background: var(--surface-input);
border: 1px solid var(--border-primary);
border-radius: 3px;
color: var(--text-muted);
font-size: var(--text-sm);
padding: var(--space-xs) var(--space-sm);
cursor: default;
}
.chat-send-btn--active {
background: var(--btn-bg-primary);
color: var(--accent-gold-bright);
cursor: pointer;
}
/* === Badge === */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: var(--text-xs);
font-weight: 600;
border-radius: var(--radius-sm);
background: var(--surface-card);
color: var(--text-primary);
border: 1px solid var(--border-secondary);
line-height: 1.4;
}
.badge-success {
background: rgba(90, 138, 74, 0.2);
color: var(--color-success-bright);
border-color: var(--accent-green);
}
.badge-danger {
background: rgba(160, 64, 64, 0.2);
color: var(--accent-red-bright);
border-color: var(--accent-red);
}
.badge-info {
background: rgba(90, 122, 154, 0.2);
color: var(--accent-blue-light);
border-color: var(--accent-blue);
}
.badge-warning {
background: rgba(255, 140, 0, 0.15);
color: var(--color-warning);
border-color: var(--color-warning);
}
/* === MapRoomBoard === */
/* Loading state before game state is available */
.board-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-secondary);
}
/* Hidden file input (load-from-file) */
.board-file-input-hidden {
display: none;
}
/* Main content area: map fills full width; sidebar floats absolutely over the right edge */
.board-main-content {
flex: 1;
min-height: 0;
display: flex;
position: relative;
/* Keep map/UI clear of the notch when Dynamic Island is on the left in landscape */
padding-left: var(--safe-l);
}
/* Map wrapper (fills remaining width) */
.board-map-wrapper {
flex: 1;
min-height: 0;
position: relative;
}
/* Disconnection warning banner */
.board-disconnected-banner {
background: var(--accent-red);
color: var(--text-primary);
padding: 6px var(--space-md);
text-align: center;
font-size: var(--font-body);
font-size: var(--text-base);
font-weight: bold;
flex-shrink: 0;
}
/* Turn-tracker center group (flag strip with borders) */
.board-turn-tracker {
display: flex;
align-items: center;
gap: 2px;
border-left: 1px solid var(--border-secondary);
border-right: 1px solid var(--border-secondary);
padding-left: var(--space-sm);
padding-right: var(--space-sm);
min-width: 0;
}
/* IPC income badge in the toolbar */
.board-income-badge {
font-weight: 600;
color: var(--accent-gold);
margin-left: 6px;
white-space: nowrap;
background: rgba(196,164,74,0.12);
border: 1px solid rgba(196,164,74,0.3);
border-radius: var(--radius-sm);
padding: 1px 5px;
line-height: 16px;
}
/* Phase chip row (toolbar right-of-center group) */
.board-phase-row {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-left: var(--space-sm);
}
/* Right end of toolbar (undo/redo, fullscreen, chat, hamburger) */
.board-toolbar-right {
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-xs);
}
/* Chat panel unread badge (absolute-positioned dot) */
.board-chat-unread-badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--accent-red-bright);
color: var(--text-primary);
border-radius: 8px;
padding: 0 var(--space-xs);
font-size: var(--text-xs);
font-weight: bold;
min-width: 14px;
text-align: center;
}
/* Chat side panel container */
.board-chat-panel {
width: 220px;
flex-shrink: 0;
background: var(--bg-tertiary);
border-left: 1px solid var(--btn-bg);
display: flex;
flex-direction: column;
}
/* Chat side panel header row */
.board-chat-header {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
font-weight: bold;
color: var(--accent-gold);
border-bottom: 1px solid var(--btn-bg);
display: flex;
justify-content: space-between;
align-items: center;
}
/* Chat close button */
.board-chat-close-btn {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: var(--text-base);
padding: 0 2px;
line-height: 1;
}
/* Resume-game prompt overlay backdrop */
.board-resume-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
}
/* Resume-game prompt dialog box */
.board-resume-dialog {
background: var(--bg-primary);
border: 2px solid var(--btn-bg-primary);
border-radius: 8px;
padding: var(--space-xl);
max-width: 340px;
text-align: center;
}
/* Notes header row (Round label + Add button) */
.board-notes-header {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
color: var(--text-muted);
border-bottom: 1px solid var(--btn-bg);
display: flex;
justify-content: space-between;
align-items: center;
}
/* Notes Add button (text-only ghost) */
.board-notes-add-btn {
background: none;
border: none;
color: var(--accent-gold);
cursor: pointer;
font-size: var(--text-sm);
padding: 0;
line-height: 1;
font-weight: bold;
}
/* Sidebar icon strip (horizontal tab rail across the top of the panel) */
.board-sidebar-icon-strip {
flex-shrink: 0;
display: flex;
flex-direction: row;
background: rgba(36, 34, 40, 0.7);
}
/* Sidebar icon strip: with bottom border (when expanded) */
.board-sidebar-icon-strip--expanded {
border-bottom: 1px solid var(--btn-bg);
}
/* Sidebar content area background — 70% opaque so map is faintly visible beneath */
.board-sidebar-content {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0; /* needed in flex-column parent so scroll child can shrink */
background: rgba(30, 28, 32, 0.7);
}
/* Sidebar phase name header (when phases tab active) */
.board-sidebar-phase-header {
padding: 6px calc(10px + var(--safe-r)) 6px 10px;
font-size: var(--text-sm);
font-weight: 700;
font-family: var(--font-heading);
letter-spacing: 0.5px;
color: var(--accent-gold);
border-bottom: 1px solid var(--btn-bg);
flex-shrink: 0;
}
/* Phase indicator pill inside sidebar phase header */
.board-phase-indicator-pill {
font-size: 12px;
font-weight: 600;
color: var(--accent-gold);
background: rgba(196,164,74,0.12);
border: 1px solid rgba(196,164,74,0.3);
border-radius: var(--radius-sm);
padding: 1px 5px;
line-height: 16px;
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Sidebar scrollable phase content */
.board-sidebar-scroll {
flex: 1;
overflow-y: auto;
/* Pad right for Dynamic Island / notch in landscape; content stays 10px from edge otherwise */
padding: 6px calc(10px + var(--safe-r)) 6px 10px;
}
/* Sidebar End Phase footer area */
.board-sidebar-footer {
/* Pad bottom for home indicator. This element is a flex child of PhasePanelShell,
which itself sits inside .board-sidebar-scroll. That scroll container's own
padding already reserves the horizontal safe-area on the right, so using a plain
10px here avoids doubling the inset — the parent's padding box does the work. */
padding: var(--space-sm) 10px calc(var(--space-sm) + var(--safe-b)) 10px;
border-top: 1px solid var(--btn-bg);
flex-shrink: 0;
}
/* Short landscape (iPhone-class): ~75% density scale for right-side panel
content. Text tokens shrink so stats/list rows don't collide in a
height-constrained panel (#2597 fix #3); space tokens tighten so padding
feels proportionate at narrow viewport widths (#2728). Scoped to
.board-sidebar-content so desktop / portrait / tablet are unaffected. */
@media (orientation: landscape) and (max-height: 500px) {
.board-sidebar-content {
--text-xs: 0.5rem; /* ~8px */
--text-sm: 0.5625rem; /* ~9px */
--text-base: 0.625rem; /* ~10px */
--space-xs: 0.1875rem; /* 3px — ~75% of global min (4px) */
--space-sm: 0.375rem; /* 6px — ~75% of global min (8px) */
--space-md: 0.5625rem; /* 9px — ~75% of global min (12px) */
--space-lg: 0.75rem; /* 12px — ~75% of global min (16px) */
}
/* Tighten hardcoded pixel paddings on sidebar structural elements (#2728).
These use fixed px values so they are not reached by --space-* overrides above. */
.board-sidebar-phase-header {
padding-top: 3px;
padding-bottom: 3px;
}
.board-phase-indicator-pill {
font-size: 9px;
line-height: 13px;
}
.board-sidebar-scroll {
padding-top: 4px;
padding-bottom: 4px;
}
}
/* Pending moves summary header row (queued count + Review button) */
.board-moves-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-xs);
}
/* Phase warning buttons row */
.board-warning-btn-row {
display: flex;
gap: 6px;
}
/* Purchase summary / NCM summary modal header */
.board-modal-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-secondary);
text-align: center;
}
/* Purchase summary / NCM summary modal footer (action buttons) */
.board-modal-footer {
padding: var(--space-sm) var(--space-lg) var(--space-md);
border-top: 1px solid var(--border-primary);
display: flex;
gap: var(--space-sm);
}
/* Purchase summary unit list */
.board-purchase-list {
padding: var(--space-md) 18px;
}
/* Purchase summary unit row */
.board-purchase-unit-row {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
font-size: var(--text-sm);
color: var(--color-parchment);
}
/* NCM summary move list container */
.board-ncm-list {
padding: var(--space-md) 18px;
max-height: 50vh;
overflow-y: auto;
overscroll-behavior: contain;
}
@media (orientation: landscape) and (max-height: 500px) {
.board-ncm-list {
max-height: 30vh;
}
}
/* NCM summary destination row header */
.board-ncm-dest-header {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* NCM summary unit entry row */
.board-ncm-unit-row {
display: flex;
align-items: center;
gap: 6px;
margin-left: var(--space-lg);
margin-bottom: 2px;
font-size: var(--text-sm);
color: var(--color-parchment);
}
/* NCM summary air units section */
.board-ncm-air-section {
padding: var(--space-sm) 18px;
border-top: 1px solid var(--border-primary);
}
/* NCM summary individual air unit row */
.board-ncm-air-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
font-size: var(--text-sm);
}
/* === CombatBoard === */
/* Root combat board overlay (fixed full-screen grid).
* Rows: tribunal header / rank grid (1fr) / nation row (atk · action · def).
* The transient battle footer floats above the nation-row as an absolute
* overlay (.combat-floating-footer) so it never reserves vertical space —
* critical on iPhone landscape where the footer is empty most of the time
* (active player has roll/decision UI in the nation row's action cell;
* inactive player only sees an ambient "Awaiting decision…" badge). */
.combat-root {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 8, 5, 0.92);
z-index: var(--z-battle);
display: grid;
grid-template-rows: auto 1fr;
font-family: var(--font-body);
}
/* Main columns wrapper (fills center grid row) */
.combat-columns-outer {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
/* Three-column flex row */
.combat-columns-inner {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
overflow: hidden;
max-height: 100%;
}
/* "No units" placeholder inside attacker/defender column */
.combat-no-units {
padding: var(--space-lg);
font-size: var(--text-base);
color: var(--text-muted);
text-align: center;
}
/* Left portion of the header (title + round badge) */
.combat-header-left {
display: flex;
align-items: center;
gap: var(--space-sm);
flex: 1;
min-width: 0;
}
/* Right portion of the header (simulate + close buttons) */
.combat-header-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* Floating footer overlay — renders only when there's transient content
* (round-0 Start Battle, post-AA Continue, SBR buttons, "Awaiting decision…").
*
* Rendered as a child of .combat-aa42-nation-row (which is position:
* relative). Anchored with `bottom: 100%` so its bottom edge sits exactly
* at the nation-row's top edge — automatic lockstep regardless of how
* tall either box grows. Earlier attempts (matching `bottom: 3.5rem` to
* the row's `min-height`, or using `grid-row: 2; align-self: end` in
* .combat-root) failed: the first matched only the minimum and broke
* when the row grew; the second collided with .combat-root's auto-flow
* and pushed the rank grid + nation-row into trailing implicit rows
* (huge empty space in the middle). */
.combat-floating-footer {
position: absolute;
bottom: calc(100% + 0.25rem); /* sits just above the nation-row's top edge */
left: 50%;
transform: translateX(-50%);
z-index: 5;
max-width: min(92%, 640px);
white-space: nowrap;
background: rgba(20, 16, 12, 0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid var(--border-accent);
border-radius: var(--radius-md);
padding: 0.3rem 1rem;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.combat-floating-footer {
bottom: calc(100% + 0.15rem);
padding: 0.2rem 0.6rem;
max-width: 96vw;
border-radius: var(--radius-sm);
}
}
/* Footer action buttons row */
.combat-footer-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
align-items: center;
}
/* Dice power-level label ("@3:") above dice group */
.combat-dice-power-label {
color: var(--text-muted);
font-size: var(--text-xs);
margin-bottom: var(--space-xs);
}
/* Dice group row (wrap of Die components) */
.combat-dice-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
}
/* Individual die + count pair */
.combat-die-pair {
display: flex;
align-items: center;
gap: 3px;
}
/* Phase banner — full-width with gradient and strong border */
.combat-phase-banner {
width: 100%;
}
/* Dramatic hit counter reveal */
.combat-hit-reveal {
animation: hitRevealPulse 0.4s ease-out;
}
@keyframes hitRevealPulse {
0% { transform: scale(0.8); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
/* Large roll button */
.combat-roll-btn-large {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.combat-roll-btn-large:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 0 20px var(--overlay-gold-15);
}
/* Collapsed center column — vertically centered content */
.combat-center-collapsed {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
}
/* Rotated step label inside collapsed center column */
.combat-center-step-label {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 0.6875rem;
color: var(--text-muted);
font-family: var(--font-heading);
letter-spacing: 1px;
white-space: nowrap;
}
/* Rotated hit counts inside collapsed center column */
.combat-center-hit-counts {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 0.625rem;
white-space: nowrap;
}
/* "Awaiting decision..." italic hint in floating footer. Sized to feel
* like a status badge (slim, ambient) rather than a primary header — the
* old clamp peaked at 19px italic which dominated the overlay. */
.combat-awaiting-hint {
font-size: clamp(0.8125rem, 0.74rem + 0.18vw, 0.95rem);
color: var(--text-secondary);
font-style: italic;
letter-spacing: 0.02em;
}
/* === CombatBoard tablet (≤ 1024px) === */
@media (max-width: 1024px) {
.combat-dice-row {
gap: 5px;
}
.combat-die-pair {
gap: 2px;
}
.combat-dice-power-label {
font-size: 0.625rem;
margin-bottom: 2px;
}
}
/* === CombatBoard mobile (phones ≤ 768px) === */
@media (max-width: 768px) {
/* Tighter dice spacing on phones */
.combat-dice-row {
gap: 3px;
}
.combat-die-pair {
gap: 1px;
}
/* Larger touch targets for +/- casualty steppers (44px minimum) */
.btn-stepper {
width: 40px !important;
height: 40px !important;
font-size: 1.25rem !important;
border-radius: var(--radius-md) !important;
}
/* Phase banners: tighter on phones */
.combat-phase-banner {
padding: 6px 8px !important;
}
.combat-phase-banner > div:first-child {
font-size: 0.875rem !important;
letter-spacing: 1px !important;
}
/* Footer buttons: stack on phones if multiple appear (rare; one button
* is the common case). Slim badge-sized padding matches the floating
* overlay context — buttons are not stretched to the overlay edges. */
.combat-footer-actions {
flex-direction: column;
gap: var(--space-xs);
}
/* Roll button: smaller on phones */
.combat-roll-btn-large {
font-size: 0.875rem !important;
padding: 10px 20px !important;
}
}
/* Observer mode — non-acting player sees a slim inline status line */
.combat-observer-status {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
color: var(--text-muted);
font-style: italic;
min-height: 1.75rem;
}
.combat-observer-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-blue-gray, #5a7a9a);
flex: 0 0 auto;
animation: combat-observer-pulse-anim 1.6s ease-in-out infinite;
}
.combat-observer-text {
line-height: 1.4;
}
@keyframes combat-observer-pulse-anim {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
/* Active-player left-border accent */
.combat-active-badge {
border-left: 3px solid var(--accent-green);
padding-left: var(--space-sm);
}
/* === LobbyPage === */
/* Full-screen fixed overlay (shared base for all lobby views) */
.lobby-screen {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Splash screen root — full screen, pointer, flex row */
.lobby-splash-screen {
position: fixed;
inset: 0;
z-index: 10;
display: flex;
cursor: pointer;
user-select: none;
}
/* Dark base layer behind split panels */
.lobby-bg-dark {
position: fixed;
inset: 0;
z-index: 0;
background: var(--bg-darkest);
}
/* Poster image layer (used inside left and right split panels) */
.lobby-poster-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
animation: lobby-subtlePan 25s ease-in-out infinite;
transform-origin: center center;
}
/* Reverse pan direction for allies side */
.lobby-poster-image--reverse {
animation-direction: reverse;
}
/* Dark gradient overlay on Axis (left) panel */
.lobby-panel-overlay-axis {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}
/* Dark gradient overlay on Allies (right) panel */
.lobby-panel-overlay-allies {
position: absolute;
inset: 0;
background: linear-gradient(to left, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}
/* Red tint overlay for Axis panel */
.lobby-panel-tint-axis {
position: absolute;
inset: 0;
background: rgba(80,0,0,0.15);
}
/* Blue tint overlay for Allies panel */
.lobby-panel-tint-allies {
position: absolute;
inset: 0;
background: rgba(0,0,60,0.15);
}
/* Full-screen vignette (radial darkening toward edges) */
.lobby-vignette {
position: fixed;
inset: 0;
z-index: 2;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.9) 100%);
pointer-events: none;
}
/* Centered content overlay on splash screen */
.lobby-splash-center {
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 0 20px;
}
/* Main title on splash */
.lobby-title-main {
font-family: var(--font-heading);
font-size: clamp(40px, 9vw, 84px);
font-weight: 900;
color: var(--accent-gold);
text-shadow: 0 0 50px rgba(196,165,74,0.4), 0 4px 16px rgba(0,0,0,0.9);
margin: 0 0 6px 0;
letter-spacing: 8px;
line-height: 1;
animation: lobby-titleFade 1.5s ease-out 0.1s both;
}
/* Subtitle on splash ("Global 1940") */
.lobby-subtitle-splash {
font-family: var(--font-heading);
font-size: clamp(14px, 2.8vw, 24px);
color: var(--text-primary);
letter-spacing: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,0.9);
margin-bottom: 50px;
animation: lobby-titleFade 1.2s ease-out 0.5s both;
}
/* Decorative gold horizontal rule on splash */
.lobby-decorative-line {
width: 100px;
height: 1px;
background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
margin: 0 auto 30px;
animation: lobby-titleFade 1.2s ease-out 0.7s both;
}
/* CTA text ("Command Your Forces") */
.lobby-cta {
font-family: var(--font-heading);
font-size: clamp(11px, 1.8vw, 15px);
color: var(--accent-gold);
letter-spacing: 3px;
text-transform: uppercase;
animation: lobby-ctaFade 2.5s ease-out both, lobby-ctaPulse 3s ease-in-out 2.5s infinite;
text-shadow: 0 0 20px rgba(196,165,74,0.3);
}
/* Main menu content wrapper with slide-up animation */
.lobby-menu-card {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
animation: lobby-menuSlideUp 0.8s ease-out both;
width: 100%;
max-width: 420px;
padding: 0 20px;
}
@media (max-height: 500px) and (orientation: landscape) {
.lobby-menu-card {
max-width: 640px;
padding: 0 12px;
}
}
/* Frosted-glass backdrop behind main menu content */
.lobby-backdrop-card {
position: absolute;
inset: -30px -40px;
background: rgba(10,10,8,0.75);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(196,165,74,0.15);
z-index: -1;
}
/* iOS Safari: disable backdrop-filter (freezes main thread on M1 iPad) */
@supports (-webkit-touch-callout: none) {
.lobby-backdrop-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Frosted-glass backdrop for create/waiting panels (tighter inset) */
.lobby-backdrop-card--sm {
position: absolute;
inset: -20px -30px;
background: rgba(10,10,8,0.8);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(196,165,74,0.1);
z-index: -1;
}
@supports (-webkit-touch-callout: none) {
.lobby-backdrop-card--sm { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Main menu title */
.lobby-menu-title {
font-family: var(--font-heading);
font-size: clamp(24px, 5vw, 36px);
font-weight: 900;
color: var(--accent-gold);
text-shadow: 0 0 20px rgba(196,165,74,0.2);
margin: 0 0 var(--space-xs) 0;
letter-spacing: 5px;
}
/* Settings gear button */
.lobby-settings-btn {
background: rgba(26,26,20,0.6);
border: 1px solid rgba(196,165,74,0.3);
color: var(--accent-gold);
border-radius: 6px;
padding: var(--space-sm) 20px;
font-size: var(--text-base);
cursor: pointer;
font-family: var(--font-heading);
letter-spacing: 2px;
}
/* Sign-out anchor link */
.lobby-signout-link {
color: var(--text-muted);
font-size: var(--text-sm);
font-family: var(--font-heading);
letter-spacing: 1px;
text-decoration: none;
}
/* Footer tagline ("N powers / 361 territories...") */
.lobby-footer-tagline {
margin-top: var(--space-lg);
font-size: var(--text-sm);
color: var(--lobby-tagline-color);
}
/* Options/Create/Waiting view wrapper (with slide-up animation) */
.lobby-view-wrapper {
position: relative;
z-index: 10;
animation: lobby-menuSlideUp 0.5s ease-out both;
padding: 20px;
}
.lobby-view-wrapper--options {
padding: 0;
}
@media (max-height: 500px) and (orientation: landscape) {
.lobby-view-wrapper--options {
padding: 12px 0;
}
}
/* Section heading inside create/waiting views */
.lobby-section-heading {
color: var(--accent-gold);
margin-bottom: var(--space-xs);
font-family: var(--font-heading);
text-align: center;
}
/* Match ID display row */
.lobby-match-id-row {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: 20px;
justify-content: center;
}
/* Match ID label */
.lobby-match-id-label {
color: var(--text-muted);
font-size: var(--text-base);
}
/* Match ID code block */
.lobby-match-id-code {
background: rgba(51,51,42,0.8);
padding: var(--space-xs) 10px;
border-radius: 4px;
color: var(--accent-blue);
font-size: var(--text-lg);
letter-spacing: 1px;
}
/* Copy-to-clipboard button */
.lobby-copy-btn {
background: none;
border: 1px solid var(--border-primary);
color: var(--text-secondary);
border-radius: 4px;
padding: 2px var(--space-sm);
font-size: var(--text-sm);
cursor: pointer;
}
/* Create-view content container */
.lobby-create-section {
width: 400px;
max-width: 90vw;
margin-bottom: var(--space-lg);
}
/* Sub-label above a list or control group */
.lobby-section-label {
font-size: var(--text-base);
color: var(--text-secondary);
margin-bottom: var(--space-sm);
}
/* Row of quick-preset buttons */
.lobby-preset-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: var(--space-lg);
}
/* Individual quick-preset button */
.lobby-preset-btn {
background: rgba(51,51,42,0.8);
border: 1px solid var(--tooltip-divider);
color: var(--border-secondary);
border-radius: 4px;
padding: var(--space-xs) 10px;
font-size: var(--text-sm);
cursor: pointer;
}
/* 2-column power selection grid */
.lobby-power-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* Inline error message */
.lobby-error-msg {
color: var(--accent-red-bright);
font-size: var(--text-sm);
}
/* Error message with spacing and centering (used in create/waiting views) */
.lobby-error-msg--spaced {
color: var(--accent-red-bright);
font-size: var(--text-sm);
margin-bottom: var(--space-sm);
text-align: center;
}
/* Row for primary action buttons (Back / Claim) */
.lobby-action-row {
display: flex;
gap: 8px;
justify-content: center;
}
/* Waiting room player list container */
.lobby-waiting-list {
width: 350px;
max-width: 90vw;
margin-bottom: 20px;
}
/* "All players joined!" success message */
.lobby-all-joined-msg {
color: var(--accent-green);
margin-bottom: var(--space-md);
font-size: var(--text-base);
font-weight: bold;
text-align: center;
}
/* Center-aligned button container */
.lobby-btn-center {
text-align: center;
}
/* "Online Multiplayer" section label */
.lobby-multiplayer-label {
font-size: var(--text-sm);
color: var(--text-muted);
margin-bottom: var(--space-xs);
font-family: var(--font-heading);
letter-spacing: 2px;
}
/* Gold rule section divider in menu */
.lobby-divider {
border-top: 1px solid rgba(196,165,74,0.2);
margin: var(--space-xs) 0;
}
/* Portrait/desktop vertical menu column */
.lobby-menu-col {
display: flex;
flex-direction: column;
gap: var(--space-md);
width: 100%;
}
/* Landscape vertical menu column (tighter gaps) */
.lobby-menu-col--landscape {
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
}
/* Landscape 2-column hotseat + online grid */
.lobby-landscape-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: start;
}
/* Right column in landscape grid (online multiplayer controls) */
.lobby-online-col {
display: flex;
flex-direction: column;
gap: 6px;
}
/* "Online Multiplayer" label in landscape layout */
.lobby-online-label {
font-size: var(--text-xs);
color: var(--text-muted);
font-family: var(--font-heading);
letter-spacing: 2px;
}
/* Match-ID input + Join button row (portrait) */
.lobby-join-row {
display: flex;
gap: var(--space-sm);
align-items: center;
}
/* Match-ID input + Join button row (landscape, tighter) */
.lobby-join-row--landscape {
display: flex;
gap: 6px;
align-items: center;
}
/* Footer row (settings button + sign-out link) */
.lobby-footer-row {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: 30px;
}
@media (max-height: 500px) and (orientation: landscape) {
.lobby-footer-row {
margin-top: 8px;
}
}
/* Lobby form input */
.lobby-input {
background: var(--lobby-input-bg);
color: var(--text-primary);
border: 1px solid var(--lobby-input-border);
border-radius: 4px;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
width: 100%;
box-sizing: border-box;
}
.lobby-input[readonly] {
opacity: 0.7;
cursor: default;
}
/* Lobby subtitle ("Global 1940") */
.lobby-menu-subtitle {
font-family: var(--font-heading);
font-size: clamp(11px, 1.8vw, 14px);
color: var(--color-lobby-subtitle);
letter-spacing: 3px;
margin-bottom: 32px;
}
@media (max-height: 500px) and (orientation: landscape) {
.lobby-menu-subtitle {
margin-bottom: 8px;
}
}
/* Resume match button (green variant of btn-lobby) */
.btn-lobby--resume {
background: var(--gradient-lobby-resume);
border: 2px solid var(--accent-green);
font-size: var(--text-lg);
padding: 18px 24px;
width: 100%;
text-align: center;
}
@media (max-height: 500px) and (orientation: landscape) {
.btn-lobby--resume {
font-size: var(--text-sm);
padding: 8px 16px;
}
}
/* Muted/back button variant of btn-lobby */
.btn-lobby--muted {
background: var(--lobby-muted-bg);
border: 1px solid var(--border-primary);
padding: 8px 16px;
font-size: var(--text-base);
}
/* Sub-line inside a btn-lobby (e.g. "All players on one device") */
.btn-lobby__sub {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-xs);
font-weight: 400;
}
/* Sub-line in success color (e.g. match details under Resume) */
.btn-lobby__sub--success {
font-size: var(--text-sm);
color: var(--color-success);
margin-top: var(--space-xs);
font-weight: 400;
}
/* Power selection button in create/join view */
.lobby-power-btn {
background: var(--lobby-muted-bg);
border: 1px solid var(--tooltip-divider);
color: var(--tooltip-text);
border-radius: 4px;
padding: 6px 10px;
font-size: var(--text-sm);
cursor: pointer;
text-align: left;
}
.lobby-power-btn[data-selected="true"][data-axis="true"] {
background: var(--lobby-axis-selected-bg);
border-color: var(--accent-red-bright);
}
.lobby-power-btn[data-selected="true"][data-axis="false"] {
background: var(--lobby-allies-selected-bg);
border-color: var(--accent-blue);
}
.lobby-power-btn[data-other="true"] {
color: var(--text-muted);
cursor: not-allowed;
}
.lobby-power-btn__name {
font-weight: normal;
}
.lobby-power-btn[data-selected="true"] .lobby-power-btn__name {
font-weight: bold;
}
.lobby-power-btn__badge {
float: right;
font-size: var(--text-xs);
}
.lobby-power-btn__badge--you {
color: var(--accent-green);
}
.lobby-power-btn__badge--other {
color: var(--text-muted);
}
/* Player row in waiting room */
.lobby-player-row {
display: flex;
justify-content: space-between;
padding: var(--space-xs) var(--space-sm);
background: transparent;
border-radius: 3px;
margin-bottom: 2px;
font-size: var(--text-base);
}
.lobby-player-row[data-mine="true"][data-axis="true"] {
background: var(--lobby-axis-mine-bg);
}
.lobby-player-row[data-mine="true"][data-axis="false"] {
background: var(--lobby-allies-mine-bg);
}
.lobby-player-name[data-axis="true"] {
color: var(--color-danger-soft);
}
.lobby-player-name[data-axis="false"] {
color: var(--accent-blue);
}
.lobby-player-claim[data-claimed="true"] {
color: var(--accent-green);
}
.lobby-player-claim[data-claimed="false"] {
color: var(--text-muted);
}
/* Join count line in waiting room */
.lobby-join-count {
font-size: var(--text-base);
color: var(--text-secondary);
margin-bottom: var(--space-md);
text-align: center;
}
/* Screen variant with scroll (options/create views) */
.lobby-screen--scroll {
overflow: auto;
}
/* On compact height, don't center vertically — let content start at top so it's scrollable */
@media (max-height: 600px) {
.lobby-screen--scroll {
justify-content: flex-start;
padding-top: 16px;
padding-bottom: 16px;
}
}
/* === GameOptionsPanel === */
.options-card {
background: linear-gradient(170deg, rgba(18, 16, 12, 0.95) 0%, rgba(8, 8, 6, 0.97) 100%);
border: 1px solid rgba(196, 165, 74, 0.3);
border-top: 2px solid rgba(196, 165, 74, 0.5);
border-radius: 4px;
backdrop-filter: blur(16px);
padding: 0;
min-width: 380px;
max-width: 760px;
width: min(calc(100vw - 40px), 760px);
display: flex;
flex-direction: column;
gap: 0;
box-shadow:
0 0 40px rgba(0, 0, 0, 0.6),
0 0 80px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(196, 165, 74, 0.15);
overflow: hidden;
}
/* iOS Safari: disable backdrop-filter on .options-card (freezes main thread on M1 iPad) */
@supports (-webkit-touch-callout: none) {
.options-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 520px) {
.options-card {
min-width: auto;
max-width: 500px;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.options-card {
min-width: auto;
width: min(calc(100vw - 32px), 760px);
max-width: 760px;
}
}
/* Game name input (inside options card for online game creation) */
.options-game-name-row {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 24px 16px;
background: linear-gradient(180deg, rgba(196, 165, 74, 0.06) 0%, transparent 100%);
border-bottom: 1px solid rgba(196, 165, 74, 0.12);
}
.options-game-name-label {
font-family: var(--font-heading);
font-size: var(--text-xs);
color: var(--accent-gold);
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
}
.options-game-name-input {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(196, 165, 74, 0.2);
border-radius: 3px;
padding: 12px 16px;
font-size: var(--text-lg);
color: var(--color-lobby-title);
font-family: var(--font-heading);
font-weight: 400;
letter-spacing: 0.5px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.options-game-name-input:focus {
border-color: rgba(196, 165, 74, 0.5);
box-shadow: 0 0 12px rgba(196, 165, 74, 0.1);
}
.options-game-name-input::placeholder {
color: var(--text-muted);
font-weight: 400;
}
.option-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-md) 0;
border-bottom: 1px solid rgba(196, 165, 74, 0.06);
}
.option-row--wide {
grid-column: 1 / -1;
}
.option-row--sub {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-lg);
padding: 10px 0 10px 20px;
border-bottom: 1px solid rgba(196,165,74,0.05);
border-left: 2px solid rgba(196,165,74,0.15);
margin-left: var(--space-sm);
grid-column: 1 / -1;
}
.option-label {
flex: 1;
}
.option-label__title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: 3px;
font-family: var(--font-body);
}
.option-label__title--active {
color: var(--text-primary);
}
.option-label__title--inactive {
color: var(--text-muted);
}
.option-label__desc {
font-size: var(--text-sm);
color: rgba(160, 152, 120, 0.6);
line-height: 1.4;
}
.toggle-btn {
width: 40px;
height: 22px;
border-radius: 11px;
border: 1px solid var(--border-primary);
background: var(--surface-input);
position: relative;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
flex-shrink: 0;
margin-top: 2px;
}
.toggle-btn[data-on="true"] {
border-color: var(--accent-green);
background: var(--btn-bg-success);
}
.toggle-knob {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-miss);
position: absolute;
top: 2px;
left: 2px;
transition: left 0.2s, background 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.toggle-knob[data-on="true"] {
background: var(--color-success);
left: 20px;
}
.options-action-row {
display: flex;
gap: 12px;
align-items: stretch;
}
.options-confirm-btn {
background: linear-gradient(180deg, #8b7a3a 0%, #6b5a2a 40%, #5a4a20 100%);
color: var(--color-lobby-title);
border: 1px solid rgba(196, 165, 74, 0.5);
border-radius: 3px;
padding: 14px var(--space-xl);
font-size: var(--text-lg);
cursor: pointer;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
flex: 1;
transition: filter 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.options-confirm-btn:hover {
filter: brightness(1.1);
box-shadow: 0 2px 16px rgba(196, 165, 74, 0.2);
}
@media (max-height: 500px) and (orientation: landscape) {
.options-confirm-btn {
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-base);
}
}
.options-resume-btn {
background: var(--gradient-lobby-resume);
color: var(--color-success-bright);
border: 1px solid rgba(90, 138, 74, 0.5);
border-radius: 3px;
padding: 14px var(--space-xl);
font-size: var(--text-lg);
cursor: pointer;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
width: 100%;
margin: 16px 24px 0;
width: calc(100% - 48px);
}
@media (max-height: 500px) and (orientation: landscape) {
.options-resume-btn {
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-base);
}
}
.options-load-btn {
background: rgba(40, 38, 30, 0.8);
color: var(--text-secondary);
border: 1px solid rgba(196, 165, 74, 0.15);
border-radius: 3px;
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-base);
cursor: pointer;
font-family: var(--font-heading);
letter-spacing: 1px;
width: calc(100% - 48px);
margin: 0 24px;
transition: border-color 0.15s;
}
.options-load-btn:hover {
border-color: rgba(196, 165, 74, 0.35);
}
@media (max-height: 500px) and (orientation: landscape) {
.options-load-btn {
padding: 6px var(--space-md);
}
}
.options-back-btn {
background: transparent;
color: var(--text-muted);
border: 1px solid rgba(196, 165, 74, 0.1);
border-radius: 3px;
padding: var(--space-sm) var(--space-xl);
font-size: var(--text-sm);
cursor: pointer;
font-family: var(--font-heading);
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.options-back-btn:hover {
color: var(--text-secondary);
border-color: rgba(196, 165, 74, 0.25);
}
@media (max-height: 500px) and (orientation: landscape) {
.options-back-btn {
padding: 6px var(--space-md);
}
}
.options-separator {
border-top: 1px solid rgba(196, 165, 74, 0.08);
margin: 12px 24px;
}
.options-expanded-card {
border: none;
border-radius: 0;
overflow: hidden;
background: transparent;
}
.options-expanded-header {
background: linear-gradient(90deg, rgba(196,165,74,0.1) 0%, rgba(196,165,74,0.03) 100%);
border-bottom: 1px solid rgba(196, 165, 74, 0.15);
border-top: 1px solid rgba(196, 165, 74, 0.08);
padding: 12px 24px;
cursor: pointer;
color: var(--accent-gold);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-xs);
letter-spacing: 3px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.options-expand-arrow {
font-size: 0.5rem;
opacity: 0.5;
font-family: var(--font-mono);
}
.options-body {
padding: 8px 24px 4px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 32px;
}
@media (max-width: 520px) {
.options-body {
grid-template-columns: 1fr;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.options-body {
padding: 8px;
}
}
.options-begin-section {
padding: 16px 24px 20px;
border-top: 1px solid rgba(196, 165, 74, 0.12);
}
@media (max-height: 500px) and (orientation: landscape) {
.options-begin-section {
padding: 8px;
}
}
.options-landscape-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 6px;
}
.options-landscape-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm) 10px;
background: rgba(26, 26, 20, 0.4);
border-radius: 3px;
border: 1px solid rgba(196, 165, 74, 0.08);
}
.options-landscape-cell--col {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.options-timer-row {
display: flex;
gap: 3px;
flex-wrap: wrap;
}
.options-segment-group {
display: flex;
gap: var(--space-xs);
}
.options-segment-btn {
flex: 1;
padding: 5px 0;
font-size: var(--text-sm);
font-weight: 400;
color: var(--color-miss);
background: rgba(30, 28, 22, 0.6);
border: 1px solid rgba(196, 165, 74, 0.1);
border-radius: 3px;
cursor: pointer;
font-family: var(--font-heading);
letter-spacing: 0.5px;
text-transform: capitalize;
text-align: center;
transition: border-color 0.15s, color 0.15s;
}
.options-segment-btn:hover {
border-color: rgba(196, 165, 74, 0.25);
}
.options-segment-btn--active {
font-weight: 700;
color: var(--accent-gold);
background: rgba(196, 165, 74, 0.1);
border-color: rgba(196, 165, 74, 0.4);
}
.options-segment-btn--sm {
flex: none;
padding: 3px 6px;
font-size: var(--text-xs);
}
.options-fog-sub {
border: 1px solid rgba(196, 165, 74, 0.08);
border-radius: 3px;
padding: var(--space-sm);
margin-bottom: 6px;
background: rgba(26, 26, 20, 0.4);
}
.options-fog-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
/* === TerritoryBottomPanel === */
/* Compact strip inner flex row */
.territory-strip-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
user-select: none;
min-height: 44px;
}
/* Flag image in compact strip (24px) */
.territory-flag-img {
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 3px;
border: 1px solid rgba(255,255,255,0.2);
flex-shrink: 0;
}
/* Flag image in expanded header (36px) */
.territory-flag-img--lg {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.2);
flex-shrink: 0;
}
/* Territory name in compact strip */
.territory-name-compact {
font-weight: bold;
font-size: var(--text-sm);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Phase info span in compact strip */
.territory-strip-info {
font-size: var(--text-sm);
color: var(--text-secondary);
white-space: nowrap;
flex: 1;
}
/* Compact strip primary action button (gold) */
.territory-strip-action-btn {
padding: var(--space-xs) 10px;
font-size: var(--text-xs);
font-weight: bold;
background: var(--accent-gold);
color: var(--color-on-gold);
border: none;
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* Chevron / close buttons inside compact strip */
.territory-strip-icon-btn {
padding: var(--space-xs) 6px;
color: var(--text-muted);
cursor: pointer;
background: none;
border: none;
line-height: 1;
flex-shrink: 0;
}
/* Left section of expanded header (flag + name block) */
.territory-header-left {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--space-md);
min-width: 0;
}
/* Name + IPC + markers row inside expanded header */
.territory-name-row {
display: flex;
align-items: center;
gap: 6px;
}
/* Owner/metadata row under territory name */
.territory-meta-row {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: 1px;
display: flex;
gap: var(--space-sm);
align-items: center;
}
/* Units center section (combat + installations + AV/DV) */
.territory-units-center {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* Individual unit group block */
.territory-unit-group {
flex: 0 1 auto;
padding: var(--space-xs) var(--space-sm);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-sm);
}
/* Unit group section label */
.territory-unit-group-label {
font-size: var(--text-xs);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
padding-bottom: 3px;
border-bottom: 1px solid rgba(196, 164, 74, 0.2);
}
/* Unit group items row */
.territory-unit-row {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
align-items: center;
}
/* Single unit entry (icon + count + name) */
.territory-unit-entry {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-base);
color: var(--tooltip-text);
padding: 3px 6px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.territory-unit-entry:hover {
background: rgba(196, 164, 74, 0.08);
}
/* Responsive garrison — tablet */
@media (min-width: 481px) and (max-width: 1024px) {
.territory-unit-entry {
gap: 5px;
padding: 4px 8px;
font-size: var(--text-lg);
}
}
/* Responsive garrison — mobile */
@media (max-width: 480px) {
.territory-unit-entry {
gap: 6px;
padding: 6px 8px;
font-size: var(--text-lg);
}
.territory-unit-group-label {
font-size: var(--text-sm);
margin-bottom: 8px;
}
}
/* Fog of war intel block */
.territory-fog-block {
flex: 0 0 auto;
}
/* "Last seen Turn N" label */
.territory-fog-label {
font-size: var(--text-xs);
color: var(--text-secondary);
font-style: italic;
margin-bottom: 3px;
}
/* Fog unit summary row */
.territory-fog-units {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
/* Single fog unit entry (faded) */
.territory-fog-unit-entry {
display: inline-flex;
align-items: center;
gap: 3px;
opacity: 0.8;
}
/* AV/DV summary block */
.territory-avdv {
flex: 0 0 auto;
display: flex;
gap: 10px;
align-items: center;
}
/* Right controls section (collapse + close buttons) */
.territory-panel-controls {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--space-sm);
}
/* Relationship badge (Own/Allied/Enemy) */
.territory-rel-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 2px;
margin-left: 2px;
}
.territory-rel-own {
background: rgba(90, 158, 111, 0.15);
color: var(--color-valid);
border: 1px solid rgba(90, 158, 111, 0.25);
}
.territory-rel-allied {
background: rgba(91, 138, 191, 0.15);
color: var(--color-info);
border: 1px solid rgba(91, 138, 191, 0.25);
}
.territory-rel-enemy {
background: rgba(196, 71, 58, 0.12);
color: var(--color-hit);
border: 1px solid rgba(196, 71, 58, 0.2);
}
/* Incoming units badge */
.territory-incoming-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(201, 168, 76, 0.15);
border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: 3px;
padding: 3px 8px;
font-size: var(--text-sm);
font-weight: 700;
color: var(--accent-gold, #d4a843);
white-space: nowrap;
animation: incomingPulse 2s ease-in-out infinite;
}
.territory-incoming-arrow {
animation: incomingSlide 1.2s ease-in-out infinite;
}
@keyframes incomingPulse {
0%, 100% { box-shadow: 0 0 0 rgba(201, 168, 76, 0); }
50% { box-shadow: 0 0 8px rgba(201, 168, 76, 0.15); }
}
@keyframes incomingSlide {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
/* Full-width section divider for phase-actions area */
.territory-section-divider {
width: 100%;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: var(--space-sm);
}
/* Full-width section divider for notes area (tighter padding) */
.territory-notes-divider {
width: 100%;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 6px;
}
/* Notes section toggle header row */
.territory-notes-header {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
user-select: none;
}
/* Individual note item row */
.territory-note-item {
padding: var(--space-xs) var(--space-sm);
border-radius: 4px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-secondary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
/* Note add/edit form container */
.territory-note-form {
padding: 6px;
border-radius: 4px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-primary);
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
/* Note form select element */
.territory-note-select {
background: var(--btn-bg);
color: var(--text-primary);
border: 1px solid var(--border-primary);
border-radius: 4px;
padding: 3px 6px;
font-size: var(--text-sm);
}
/* Note form text input */
.territory-note-text-input {
flex: 1;
min-width: 120px;
background: var(--btn-bg);
color: var(--text-primary);
border: 1px solid var(--border-primary);
border-radius: 4px;
padding: 3px 6px;
font-size: var(--text-sm);
font-family: inherit;
}
/* Phase section heading (e.g. "Declare War", "Plan Attack") */
.territory-phase-heading {
font-size: var(--text-xs);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(196, 164, 74, 0.25);
}
/* Phase description text */
.territory-phase-desc {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: 6px;
}
/* Inline unit tag (icon + name, e.g. cargo items) */
.territory-unit-tag {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: var(--text-xs);
color: var(--text-secondary);
}
/* Transport management card */
.territory-transport-card {
margin-bottom: 6px;
padding: var(--space-xs) 6px;
background: rgba(80,144,208,0.08);
border-radius: 3px;
border: 1px solid rgba(80,144,208,0.2);
}
/* Transport card header (icon + name + capacity) */
.territory-transport-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
/* Transport cargo grid */
.territory-transport-cargo {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-bottom: var(--space-xs);
}
/* Unit selector sub-section in sea zones */
.territory-unit-selector-sub {
margin-top: 6px;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 6px;
}
/* SBR / recon eligible aircraft list */
.territory-bomber-list {
display: flex;
flex-direction: column;
gap: 3px;
}
/* Battle combatant sides wrapper */
.territory-battle-sides {
display: flex;
gap: var(--space-xl);
flex-wrap: wrap;
}
/* Unit type list inside a combatant side */
.territory-combatant-list {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Single combatant type entry (icon + count) */
.territory-combatant-entry {
display: inline-flex;
align-items: center;
gap: 3px;
}
/* Placement stepper row */
.territory-placement-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 4px var(--space-xs);
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.territory-placement-row:hover {
background: rgba(196, 164, 74, 0.08);
}
.territory-placement-row--active {
background: rgba(196, 164, 74, 0.15);
}
/* Responsive placement row — tablet */
@media (min-width: 481px) and (max-width: 1024px) {
.territory-placement-row {
gap: var(--space-md);
padding: 6px var(--space-sm);
min-height: 40px;
}
}
/* Responsive placement row — mobile */
@media (max-width: 480px) {
.territory-placement-row {
gap: var(--space-md);
padding: 8px var(--space-sm);
min-height: 48px;
}
}
/* Note count badge button in compact strip */
.territory-notes-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
font-size: var(--text-xs);
font-weight: bold;
background: rgba(192,160,64,0.15);
color: var(--accent-gold-bright);
border: 1px solid rgba(192,160,64,0.3);
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* Unload / load-adjacent button row */
.territory-transport-btn-row {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
/* Load-from-adjacent section */
.territory-load-section {
margin-top: var(--space-xs);
}
/* "N units assigned to this raid" note */
.territory-sbr-assigned {
margin-bottom: 6px;
}
/* SBR undo button row */
.territory-sbr-undo-row {
display: flex;
gap: var(--space-xs);
margin-top: 6px;
}
/* Attack planner button row */
.territory-attack-btn-row {
display: flex;
gap: 6px;
}
/* Win-bar percentage annotation */
.territory-winbar-pct {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 2px;
}
/* Win-bar wrapper with bottom margin */
.territory-winbar-block {
margin-bottom: var(--space-sm);
}
/* Recon aircraft list */
.territory-recon-list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
/* Adjacent territory load label */
.territory-load-label {
font-size: var(--text-xs);
color: var(--text-muted);
margin-bottom: 3px;
}
/* ===== SBR Battle Board ===== */
/* Three-column section layout (air / aa / bombing) */
.sbr-section-layout {
display: flex;
gap: var(--space-lg);
}
@media (max-width: 768px) {
.sbr-section-layout { flex-direction: column; }
}
/* Side panels (attacker / defender columns) */
.sbr-side-panel {
flex: 1;
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: var(--space-md);
}
@media (max-width: 768px) {
.sbr-side-panel { flex: none; }
}
/* Center column (actions / dice / decisions) */
.sbr-center-col {
flex: 2;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
@media (max-width: 768px) {
.sbr-center-col { flex: none; order: -1; }
}
/* Section header (uppercase label above unit lists) */
.sbr-section-header {
font-size: var(--text-sm);
font-weight: bold;
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
/* Mobile summary header (collapsible) */
.sbr-mobile-summary {
font-size: var(--text-sm);
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
margin-bottom: var(--space-xs);
}
/* Unit row: icon + name inline */
.sbr-unit-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
}
/* Unit display name text */
.sbr-unit-name {
font-size: var(--text-base);
color: var(--text-primary);
}
/* Dice results panel */
.sbr-dice-panel {
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: var(--space-lg);
}
/* Dice results title */
.sbr-dice-title {
font-size: var(--text-base);
font-weight: bold;
color: var(--accent-gold);
margin-bottom: 10px;
text-align: center;
}
/* Footer action buttons — responsive sizing */
.sbr-footer-btn {
font-size: 1rem;
padding: 10px 40px;
}
@media (max-width: 768px) {
.sbr-footer-btn {
font-size: 0.875rem;
padding: 8px 24px;
}
}
/* Invalid-move reason banner */
.territory-invalid-move {
background: rgba(180,40,40,0.18);
border: 1px solid rgba(200,60,60,0.35);
border-radius: 3px;
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
color: var(--color-danger-soft);
flex: 0 0 auto;
}
/* ===================================================================
UNIFIED GAME LOBBY
=================================================================== */
.unified-lobby {
background: #08090d;
color: #e8e4d8;
font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
min-height: 100vh;
min-height: 100dvh;
}
/* ── Top Bar ── */
.unified-topbar {
background: linear-gradient(180deg, #14161e 0%, #10121a 100%);
border-bottom: 1px solid #2a3045;
padding: 0 24px;
height: 48px;
display: flex;
align-items: center;
gap: 16px;
position: sticky;
top: 0;
z-index: 100;
}
.unified-topbar-logo {
font-family: 'Oswald', sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: #c8a84a;
letter-spacing: 2px;
text-transform: uppercase;
white-space: nowrap;
}
.unified-topbar-nav {
display: flex;
gap: 2px;
margin-left: 24px;
}
.unified-topbar-nav-item {
font-family: 'Oswald', sans-serif;
font-size: 0.8125rem;
font-weight: 500;
color: #585868;
text-transform: uppercase;
letter-spacing: 1px;
padding: 14px;
border: none;
border-bottom: 2px solid transparent;
background: none;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.unified-topbar-nav-item:hover { color: #9898a0; }
.unified-topbar-nav-item.active {
color: #c8a84a;
border-bottom-color: #c8a84a;
}
.unified-topbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.unified-topbar-user {
font-size: 0.8125rem;
color: #9898a0;
}
.unified-topbar-name-input {
font-size: 0.8125rem;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid #2a3045;
background: #1a1e2a;
color: #e8e4d8;
width: 130px;
}
.unified-topbar-name-input::placeholder { color: #585868; }
.unified-topbar-settings {
font-size: 1rem;
padding: 4px 8px;
border: 1px solid #2a3045;
border-radius: 4px;
background: transparent;
color: #9898a0;
cursor: pointer;
transition: color 0.15s;
}
.unified-topbar-settings:hover { color: #c8a84a; }
.unified-topbar-name-input--error {
border-color: #b83028 !important;
box-shadow: 0 0 6px rgba(184,48,40,0.4);
animation: unified-shake 0.3s ease-in-out;
}
@keyframes unified-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.unified-error-banner {
background: rgba(184,48,40,0.15);
border-bottom: 1px solid rgba(184,48,40,0.3);
color: #e84040;
font-size: 0.8125rem;
padding: 8px 24px;
text-align: center;
}
/* Session resume banner — appears when a validated session is found on load */
.unified-resume-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
background: rgba(58, 107, 58, 0.25);
border: 1px solid var(--accent-green);
border-radius: 4px;
padding: var(--space-sm) var(--space-md);
margin: var(--space-sm) var(--space-md) 0;
font-size: var(--text-sm);
}
.unified-resume-banner--checking {
color: var(--text-secondary);
font-style: italic;
justify-content: center;
border-color: var(--border-secondary);
background: transparent;
}
.unified-resume-banner__info {
display: flex;
flex-direction: column;
gap: 2px;
}
.unified-resume-banner__label {
color: var(--accent-green);
font-weight: bold;
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 1px;
}
.unified-resume-banner__nations {
color: var(--text-secondary);
font-size: var(--text-xs);
}
.unified-resume-banner__btn {
background: var(--gradient-lobby-resume);
color: var(--color-success-bright);
border: 1px solid rgba(90, 138, 74, 0.5);
border-radius: 3px;
padding: var(--space-xs) var(--space-md);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.unified-resume-banner__btn:hover {
filter: brightness(1.1);
}
/* ── Page Layout ── */
.unified-page {
max-width: 960px;
margin: 0 auto;
padding: 32px 24px;
}
.unified-page-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.unified-page-title {
font-family: 'Oswald', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: #e8e4d8;
text-transform: uppercase;
letter-spacing: 2px;
}
/* ── Filter Tabs ── */
.unified-filter-tabs {
display: flex;
gap: 4px;
margin-left: auto;
flex-wrap: wrap;
}
.unified-filter-tab {
font-family: 'Oswald', sans-serif;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 6px 12px;
border-radius: 4px;
background: transparent;
color: #585868;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.unified-filter-tab:hover { color: #9898a0; }
.unified-filter-tab.active {
color: #c8a84a;
background: rgba(200,168,74,0.08);
border-color: rgba(200,168,74,0.2);
}
.unified-filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
font-size: 0.625rem;
font-weight: 700;
background: #c8a84a;
color: #1a1510;
border-radius: 9px;
padding: 0 5px;
margin-left: 5px;
line-height: 1;
}
/* ── Game Cards ── */
.unified-game-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.unified-game-card {
background: #1e2330;
border: 1px solid #2a3045;
border-radius: 8px;
padding: 16px 20px;
transition: background 0.15s, border-color 0.15s;
cursor: pointer;
position: relative;
}
.unified-game-card:hover {
background: #242a38;
border-color: #353a50;
}
.unified-game-card:hover .unified-delete-btn {
opacity: 1;
}
.unified-game-card.your-turn {
border-color: rgba(232,200,90,0.35);
box-shadow: 0 0 20px rgba(232,200,90,0.15), inset 0 0 20px rgba(232,200,90,0.15);
}
.unified-game-card.your-turn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #c8a84a, transparent);
border-radius: 8px 8px 0 0;
}
.unified-game-card-left {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.unified-game-card-top {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.unified-game-name {
font-family: 'Oswald', sans-serif;
font-size: 1.0625rem;
font-weight: 600;
color: #e8e4d8;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Turn status badges */
.unified-turn-badge {
font-family: 'Oswald', sans-serif;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 3px 10px;
border-radius: 3px;
white-space: nowrap;
}
.unified-turn-badge.your-turn {
background: #c8a84a;
color: #1a1510;
}
.unified-turn-badge.waiting {
background: #2a2f40;
color: #585868;
}
.unified-turn-badge.filling {
background: rgba(72,136,204,0.15);
color: #4888cc;
}
.unified-turn-badge.hotseat {
background: rgba(72,136,204,0.15);
color: #4888cc;
letter-spacing: 1px;
}
.unified-round-badge {
font-family: 'Oswald', sans-serif;
font-size: 0.625rem;
font-weight: 600;
color: #c8a84a;
background: rgba(200,168,74,0.1);
border: 1px solid rgba(200,168,74,0.2);
border-radius: 3px;
padding: 2px 8px;
letter-spacing: 0.5px;
white-space: nowrap;
}
/* Turn info row */
.unified-game-turn-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
}
.unified-current-power {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
}
.unified-power-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.unified-phase-label {
color: #585868;
font-style: italic;
}
/* Game metadata row */
.unified-game-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.75rem;
color: #585868;
flex-wrap: wrap;
}
.unified-game-meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.unified-autosave-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #3a8a45;
flex-shrink: 0;
}
/* Player roster strip */
.unified-player-roster {
display: flex;
gap: 3px;
margin-top: 4px;
}
.unified-roster-pip {
width: 20px;
height: 6px;
border-radius: 3px;
opacity: 0.5;
transition: opacity 0.15s;
}
.unified-roster-pip.active {
opacity: 1;
box-shadow: 0 0 6px currentColor;
}
.unified-roster-pip.mine {
border: 1px solid white;
}
/* ── Delete Button (hover-reveal on cards) ── */
.unified-delete-btn {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 4px;
border: 1px solid transparent;
background: rgba(160, 64, 64, 0.15);
color: #a06060;
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, width 0.2s;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
font-family: var(--font-heading);
}
.unified-delete-btn:hover {
background: rgba(160, 64, 64, 0.3);
color: #d06060;
border-color: rgba(160, 64, 64, 0.3);
}
/* ── Lobby Delete Confirmation Modal ── */
.lobby-delete-modal {
max-width: 380px;
width: 90%;
padding: 0;
animation: fadeIn 0.15s ease-out;
}
.lobby-delete-modal-header {
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border-primary);
text-align: center;
}
.lobby-delete-modal-title {
font-size: var(--text-lg);
font-weight: 700;
color: #e07070;
font-family: var(--font-heading);
letter-spacing: 0.5px;
}
.lobby-delete-modal-body {
padding: 20px 20px 16px;
text-align: center;
}
.lobby-delete-modal-message {
font-size: var(--text-base);
color: var(--text-secondary);
line-height: 1.5;
}
.lobby-delete-modal-game-info {
margin-top: var(--space-sm);
font-size: var(--text-sm);
color: var(--text-muted);
}
.lobby-delete-modal-match-id {
font-family: monospace;
color: var(--text-secondary);
}
.lobby-delete-modal-footer {
padding: 12px 20px 16px;
border-top: 1px solid var(--border-primary);
display: flex;
justify-content: space-between;
gap: var(--space-md);
}
.lobby-delete-modal-btn-cancel {
flex: 1;
padding: 10px 0;
font-size: var(--text-base);
background: var(--surface-panel);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.lobby-delete-modal-btn-cancel:hover {
background: var(--surface-raised);
color: var(--text-primary);
}
.lobby-delete-modal-btn-delete {
flex: 1;
padding: 10px 0;
font-size: var(--text-base);
font-weight: 700;
background: rgba(160, 40, 40, 0.4);
color: #ff8888;
border: 1px solid rgba(200, 60, 60, 0.5);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lobby-delete-modal-btn-delete:hover {
background: rgba(180, 50, 50, 0.6);
color: #ffaaaa;
border-color: rgba(220, 80, 80, 0.7);
}
/* ── Join by ID ── */
.unified-join-by-id {
display: flex;
align-items: center;
gap: 6px;
}
.unified-join-by-id-input {
font-family: var(--font-body);
font-size: var(--text-sm);
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #353a50;
background: rgba(20, 22, 32, 0.8);
color: #c8c8d8;
width: 180px;
}
.unified-join-by-id-input::placeholder { color: #585868; }
.unified-join-by-id-btn {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 12px;
border-radius: 4px;
border: 1px solid #c8a84a;
background: transparent;
color: #c8a84a;
cursor: pointer;
transition: background 0.15s;
}
.unified-join-by-id-btn:hover:not(:disabled) { background: rgba(200, 168, 74, 0.15); }
.unified-join-by-id-btn:disabled { opacity: 0.4; cursor: default; }
/* ── Empty State ── */
.unified-empty-state {
text-align: center;
padding: 60px 20px;
color: #585868;
}
.unified-empty-text {
font-size: 0.9375rem;
margin-bottom: 16px;
}
.unified-empty-btn {
font-family: 'Oswald', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 24px;
border-radius: 4px;
background: #c8a84a;
color: #1a1510;
border: none;
cursor: pointer;
}
/* ── New Game Buttons ── */
.unified-new-game-section {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #1c2030;
display: flex;
gap: 12px;
}
.unified-new-game-btn {
font-family: 'Oswald', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 24px;
border-radius: 6px;
border: 1px dashed #2a3045;
background: transparent;
color: #585868;
cursor: pointer;
transition: all 0.15s;
flex: 1;
text-align: center;
}
.unified-new-game-btn:hover {
border-color: #c8a84a;
color: #c8a84a;
background: rgba(200,168,74,0.05);
}
.unified-new-game-sub {
display: block;
font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
font-size: 0.6875rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #585868;
margin-top: 4px;
}
/* ── Browse Open Games ── */
.unified-open-header {
display: flex;
gap: 16px;
padding: 0 16px 4px;
font-family: 'Oswald', sans-serif;
font-size: 0.6875rem;
color: #585868;
text-transform: uppercase;
letter-spacing: 1px;
}
.unified-open-game-row {
background: #1e2330;
border: 1px solid #2a3045;
border-radius: 6px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 16px;
transition: background 0.15s;
cursor: pointer;
}
.unified-open-game-row:hover {
background: #242a38;
}
.unified-open-game-name {
font-family: 'Oswald', sans-serif;
font-size: 0.9375rem;
font-weight: 600;
color: #e8e4d8;
min-width: 160px;
}
.unified-open-game-host {
font-size: 0.75rem;
color: #9898a0;
min-width: 100px;
}
.unified-open-game-slots {
display: flex;
gap: 3px;
align-items: center;
flex: 1;
}
.unified-slot-pip {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #585868;
}
.unified-slot-pip.filled {
background: #3a8a45;
border-color: #3a8a45;
}
.unified-slot-pip.open {
background: transparent;
}
.unified-slot-count {
font-size: 0.6875rem;
color: #585868;
margin-left: 4px;
}
.unified-open-game-age {
font-size: 0.6875rem;
color: #585868;
min-width: 60px;
text-align: right;
}
.unified-join-btn {
font-family: 'Oswald', sans-serif;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 14px;
border-radius: 4px;
background: #3a8a45;
color: white;
border: none;
cursor: pointer;
transition: background 0.15s;
}
.unified-join-btn:hover {
background: #50b858;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.unified-page-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.unified-filter-tabs {
margin-left: 0;
}
.unified-new-game-section {
flex-direction: column;
}
.unified-open-game-row {
flex-wrap: wrap;
}
}
/* ── Compact height (phone landscape / ≤600px tall) ── */
@media (max-height: 600px) {
.unified-page {
padding: 12px 16px;
}
.unified-page-header {
margin-bottom: 10px;
}
.unified-page-title {
font-size: 1rem;
}
.unified-empty-state {
padding: 20px;
}
.unified-new-game-section {
margin-top: 12px;
padding-top: 12px;
}
.unified-game-card {
padding: 10px 14px;
}
.unified-game-list {
gap: 6px;
}
.unified-topbar {
height: 40px;
}
}
/* ============================================================
* Combat Board — AA 1942 Theatrical Wartime Tribunal (#2314)
* ============================================================
* Side-coded color hierarchy, oversized phase prompts, full-bleed
* atmosphere (flag watermark + tracer SVG + grain). Center column
* is the STAGE, not a dice ledger. Gold reserved for critical
* decisions; sustained warm tint on attacker, cool on defender.
*/
:root {
/* Side accent palette — distinct from per-nation attColor/defColor. */
--combat-aa42-atk: #c45252; /* deep crimson — attacker side */
--combat-aa42-atk-glow: #e07070; /* highlight glow */
--combat-aa42-def: #8aa4c2; /* steel blue — defender side */
--combat-aa42-def-glow: #b0c8de; /* highlight glow */
/* CONTINUE / primary CTA tribunal red. */
--combat-aa42-cta: #b03838;
--combat-aa42-cta-hover: #c64545;
}
/* Darken the combat root and add atmospheric layers — radial vignette plus
* a soft warm horizon glow at the bottom give the room some depth without
* stealing focus from the chips. */
.combat-root {
background:
/* horizon glow — warm pool at the bottom */
radial-gradient(ellipse 80% 30% at 50% 100%, rgba(180, 100, 50, 0.10), transparent 70%),
/* center spotlight — slight brightness in the middle */
radial-gradient(ellipse 90% 60% at 50% 45%, rgba(60, 50, 40, 0.4), transparent 70%),
/* base */
radial-gradient(ellipse 120% 80% at 50% 50%, rgba(20, 16, 12, 0.94), rgba(4, 3, 2, 0.98)),
rgba(6, 5, 3, 0.96);
}
/* Film grain — slightly more present (was 0.06) for tactile feel.
* SVG turbulence data URI; mix-blend overlay so it sits on warm darks
* without crushing chip detail. */
.combat-root::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.085;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* Vignette — darker corners, brighter middle, gives the board depth. */
.combat-root::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(ellipse 70% 75% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
/* Ensure descendants still receive pointer events above ::before. */
.combat-root > * {
position: relative;
z-index: 2;
}
/* === Tribunal header — giant ATTACKER · TERRITORY · DEFENDER bar === */
.combat-aa42-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
/* Header background spans the full viewport, but the content box is
* pulled inward on widescreens so atk/def col-heads sit over the
* (centered) rank-grid + casualty-col band, not at the screen edges.
* 1432px target = rank-grid max 1240px + casualty cols 2×96px. The
* close-button controls are position:absolute and stay at the far
* right corner regardless. Vertical padding kept tight (2px) — the
* col-head pills carry their own vertical breathing room. */
padding: 2px max(22px, calc((100vw - 1432px) / 2 + 22px));
background: linear-gradient(180deg, #15110b 0%, #0a0807 100%);
border-bottom: 1px solid var(--border-accent);
position: relative;
}
.combat-aa42-header-side {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 0;
}
.combat-aa42-header-label {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.25rem, 0.95rem + 1.0vw, 1.85rem); /* 20–30px */
letter-spacing: 0.18em;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.combat-aa42-header-label--atk { color: var(--combat-aa42-atk-glow); }
.combat-aa42-header-label--def { color: var(--combat-aa42-def-glow); }
.combat-aa42-header-action {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 999px;
display: inline-block;
animation: combatAa42ActionPulse 2.4s ease-in-out infinite;
}
.combat-aa42-header-action--atk {
color: #fff5f0;
background: linear-gradient(135deg, var(--combat-aa42-atk) 0%, #6e1f1f 100%);
box-shadow: 0 0 12px rgba(196,82,82,0.55);
}
.combat-aa42-header-action--def {
color: #f0f6fb;
background: linear-gradient(135deg, var(--combat-aa42-def) 0%, #3a536e 100%);
box-shadow: 0 0 12px rgba(138,164,194,0.5);
}
@keyframes combatAa42ActionPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.combat-aa42-header-side-nation {
margin-top: 2px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.05em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
}
.combat-aa42-header-side-nation img {
width: 18px;
height: auto;
border-radius: 2px;
flex-shrink: 0;
}
.combat-aa42-header-center {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.combat-aa42-header-territory {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-gold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 32vw;
}
.combat-aa42-header-meta {
display: flex;
gap: 8px;
align-items: center;
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.combat-aa42-header-round {
background: var(--accent-gold);
color: var(--color-on-gold);
padding: 1px 8px;
border-radius: 8px;
font-weight: 700;
font-size: 0.6875rem;
}
.combat-aa42-header-step {
color: var(--text-secondary);
font-weight: 600;
}
.combat-aa42-header-controls {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: flex;
gap: 4px;
z-index: 4;
}
.combat-aa42-header-ctrl {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.55);
font-size: 0.6875rem;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: var(--radius-xs);
cursor: pointer;
font-family: var(--font-body);
transition: all var(--transition-fast);
}
.combat-aa42-header-ctrl:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.18);
}
.combat-aa42-header-ctrl--close {
font-size: 1rem;
line-height: 1;
padding: 2px 9px;
color: rgba(255,255,255,0.65);
}
@media (max-width: 768px) {
.combat-aa42-header {
padding: 3px 8px;
gap: 6px;
}
.combat-aa42-header-action {
font-size: 0.6875rem;
padding: 2px 8px;
letter-spacing: 0.12em;
}
.combat-aa42-header-territory { font-size: 0.8125rem; letter-spacing: 0.08em; }
.combat-aa42-header-meta { font-size: 0.625rem; }
.combat-aa42-header-round { font-size: 0.625rem; padding: 1px 6px; }
.combat-aa42-header-controls { right: 3px; }
}
/* === Rank grid — five-column layout ===
* col 1 : atk dice (right-justified to spine)
* col 2 : atk units (horizontal chip row; +/- steppers under each chip)
* col 3 : spine medallion (rank + hit count)
* col 4 : def units (horizontal chip row; +/- steppers under each chip)
* col 5 : def dice (left-justified to spine)
*/
/* Outer shell — wraps the rank grid and flanks it with two casualty
* columns. Flexbox + `justify-content: center` means the casualty cols
* hug the (max-capped) rank grid in the middle of the shell instead of
* being pushed to the screen edges; on widescreens the empty space sits
* on the outer edges, not between the cas col and the bands.
*
* The shell paints a subtle warm-camo backdrop. Layered radial gradients
* tile to give a mottled blob pattern — visible only in the outer void
* areas, since the rank grid and casualty cols paint opaque backgrounds
* over the top. */
.combat-aa42-board-shell {
/* Stretch to fill the 1fr grid row (default) — the rank rows are
* vertically centered inside the rank-grid via `align-content: center`
* (set on `.combat-aa42-board` below), so empty space splits evenly
* above and below the rows and reads as atmospheric backdrop instead
* of a hard "board ends here" cliff. No max-height — that produced an
* ugly large void below a capped shell on tall windows.
*
* padding-bottom is just a small safe-area-aware clearance — the rank
* rows are free to use the formerly-reserved bottom band (they stay
* centered via `align-content: center`, so they breathe lower rather
* than clip). The nation-row overlay floats above on its own z-index. */
flex: 1;
min-height: 0;
padding-bottom: calc(0.75rem + var(--safe-b));
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: center;
isolation: isolate;
background-color: #100a06;
background-image:
radial-gradient(ellipse 60px 45px at 12% 22%, rgba(72, 50, 30, 0.55), transparent 70%),
radial-gradient(ellipse 90px 55px at 78% 38%, rgba(54, 38, 22, 0.50), transparent 72%),
radial-gradient(ellipse 70px 50px at 32% 70%, rgba(86, 58, 36, 0.45), transparent 70%),
radial-gradient(ellipse 100px 60px at 88% 80%, rgba(48, 32, 20, 0.55), transparent 72%),
radial-gradient(ellipse 75px 50px at 55% 12%, rgba(60, 42, 26, 0.40), transparent 70%),
radial-gradient(ellipse 80px 60px at 8% 90%, rgba(64, 44, 28, 0.45), transparent 70%);
background-size: 360px 280px;
background-repeat: repeat;
}
.combat-aa42-board {
position: relative;
/* Cap the rank-grid width so chips/dice/spine cluster as one focused
* battlefield strip on widescreens (issue #2314 — rec A). The shell is
* a flex row centered on the page, so the cap simply bounds how much
* width this flex child takes; the casualty cols hug the bands.
*
* #2316: dropped the 720px clamp floor (overflowed on phone portrait —
* any viewport <720px would force the board wider than the screen and
* hose the layout). Also dropped `width: 100%` — combined with
* `flex: 1 1 auto` and `max-width: clamp(...)` it creates a redundant
* trio that Firefox iOS computes incorrectly during the first paint
* after an SPA state transition into the battle modal, leaving the
* grid collapsed against the casualty column. The flex algorithm
* already grows the item to fill available space; removing the
* explicit width lets it settle on the right size on first paint. */
flex: 1 1 auto;
max-width: min(78vw, 1240px);
display: grid;
/* Dice columns are fixed-width — sized to fit 4 dice across in a single row.
* If a power group rolls more than 4 dice, they wrap to a second row inside
* the cell, but the cell width itself doesn't grow. The multiplier sits as a
* badge on the die's upper-right corner so dice keep a predictable size.
*
* Unit columns are `minmax(0, max-content)` (rec B) so they only take the
* width their chips actually need — chips snap inward toward the dice
* instead of leaving a wide empty 1fr strip on the outer edge. */
grid-template-columns:
minmax(0, max-content) /* atk units (outer) */
clamp(150px, 14vw, 220px) /* atk dice (inner, fixed) */
auto /* spine medallion */
clamp(150px, 14vw, 220px) /* def dice (inner, fixed) */
minmax(0, max-content); /* def units (outer) */
/* Center the content tracks within the (capped) grid box — when chips
* are sparse, the whole row hugs the spine instead of drifting outward. */
justify-content: center;
/* Center the rank rows vertically with a fixed compact gap so they
* sit as one tight battlefield in the middle of the available height.
* Empty space splits evenly above and below the rows; the warm
* atmospheric gradient fills both halves so neither one reads as a
* "void". */
align-content: center;
row-gap: clamp(10px, 1.4vh, 22px);
overflow-y: auto;
overflow-x: hidden;
isolation: isolate;
/* Layered atmospheric background — fills the FULL board height, including
* the empty space below the rank rows. Side washes give warm/cool tints,
* the center has a faint gold trace, and the base is a soft warm-to-cool
* vertical gradient instead of pitch black. */
background:
/* atk warm wash from left edge */
linear-gradient(90deg,
rgba(196, 82, 82, 0.22) 0%,
rgba(196, 82, 82, 0.10) 18%,
transparent 36%),
/* def cool wash from right edge */
linear-gradient(270deg,
rgba(138, 164, 194, 0.20) 0%,
rgba(138, 164, 194, 0.09) 18%,
transparent 36%),
/* horizon glow at the bottom — pool of warm light */
radial-gradient(ellipse 70% 32% at 50% 100%,
rgba(180, 110, 60, 0.18),
transparent 70%),
/* faint vertical highlight in the center */
linear-gradient(180deg,
rgba(212, 175, 55, 0.05) 0%,
transparent 60%),
/* base — warm-to-deep vertical fade (no longer flat black) */
linear-gradient(180deg, #1d130d 0%, #100a06 50%, #06040a 100%);
}
/* Side-zone backdrops — cover the full atk/def grid columns (1-2 and 4-5). */
.combat-aa42-zone {
grid-row: 1 / -1;
position: relative;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* Zones now contribute mostly to is-active glows + flag/tracer hosting.
* The base atmosphere is painted by .combat-aa42-board's own background so it
* fills the entire board height (including empty space below the rank rows). */
.combat-aa42-zone--atk {
grid-column: 1 / 3;
background: linear-gradient(180deg, rgba(196,82,82,0.10) 0%, transparent 60%);
}
.combat-aa42-zone--center {
grid-column: 3;
border-left: 1px solid var(--border-primary);
border-right: 1px solid var(--border-primary);
/* No fill — rank-cell--center carries the band gradient per row so the
* spine reads as part of the same horizontal stripe as the side cells,
* matching the tabletop combat-board look (issue #2314 reference). */
}
.combat-aa42-zone--def {
grid-column: 4 / 6;
background: linear-gradient(180deg, rgba(138,164,194,0.09) 0%, transparent 60%);
}
.combat-aa42-zone--atk.is-active {
box-shadow: inset 0 0 80px rgba(196,82,82,0.22);
}
.combat-aa42-zone--def.is-active {
box-shadow: inset 0 0 80px rgba(138,164,194,0.20);
}
.combat-aa42-zone--atk.is-mine { border-right: 1px solid var(--combat-aa42-atk); }
.combat-aa42-zone--def.is-mine { border-left: 1px solid var(--combat-aa42-def); }
/* Cells over the side zones share a higher stacking context. */
.combat-aa42-board > :not(.combat-aa42-zone) {
position: relative;
z-index: 1;
}
.combat-aa42-board-row-span { grid-column: 1 / -1; }
.combat-aa42-board-row-span--center { grid-column: 3; }
.combat-aa42-board-row-atk { grid-column: 1 / 3; }
.combat-aa42-board-row-def { grid-column: 4 / 6; }
/* Center "spine" cell — a thin column of rank-number medallions. */
.combat-aa42-rank-cell {
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid var(--border-secondary);
min-width: 0;
}
.combat-aa42-rank-cell--center {
align-items: center;
justify-content: center;
padding: 6px 6px;
gap: 4px;
/* Band gradient is shared with the side cells (see grouped rule above). */
}
.combat-aa42-rank-medallion-stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.combat-aa42-rank-hits {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.combat-aa42-rank-hits-side {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 5px;
border-radius: 6px;
}
.combat-aa42-rank-hits-side--atk {
color: #fff5f0;
background: linear-gradient(135deg, var(--combat-aa42-atk) 0%, #6e1f1f 100%);
box-shadow: 0 0 6px rgba(196,82,82,0.45);
}
.combat-aa42-rank-hits-side--def {
color: #f0f6fb;
background: linear-gradient(135deg, var(--combat-aa42-def) 0%, #3a536e 100%);
box-shadow: 0 0 6px rgba(138,164,194,0.4);
}
.combat-aa42-rank-cell--blank {
min-height: 28px;
opacity: 0.35;
}
.combat-aa42-rank-blank-label {
text-align: center;
font-size: 0.625rem;
color: rgba(255,255,255,0.25);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px;
}
/* Rank-spine coin — embossed rank number on a dark medallion with gold trim.
* The number sits in relief (light highlight from the top, dark shadow at the
* bottom). A thin inner gold ring sits a few pixels inside the outer border
* for the classic coin / medal look. Glows in the firing side's color when
* that side is actively rolling. */
.combat-aa42-rank-coin {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* Fluid sizing — linear 44px @ 360vw → 60px @ 1600vw to track the
* chip size range (useFluidPx(44, 60) in CombatBoard.tsx). The
* `calc(intercept + slope·vw)` form ensures the medallion grows in
* lockstep with the chips at every viewport width, instead of clamping
* to floor/ceiling like the bare `Xvw` form did. */
width: clamp(44px, calc(39.4px + 1.29vw), 60px);
height: clamp(44px, calc(39.4px + 1.29vw), 60px);
border-radius: 50%;
font-family: var(--font-heading);
font-weight: 700;
/* Number scales 22px → 30px across the same range (≈half the coin
* diameter, classic embossed-coin typography). */
font-size: clamp(22px, calc(19.7px + 0.645vw), 30px);
color: var(--accent-gold);
background:
radial-gradient(circle at 30% 25%, rgba(255,225,160,0.10), transparent 65%),
linear-gradient(180deg, #2a2114 0%, #14100a 100%);
border: 1.5px solid var(--accent-gold);
letter-spacing: 0.02em;
box-shadow:
/* outer rim shadow for depth */
0 2px 5px rgba(0, 0, 0, 0.55),
/* inset top highlight (rim catches light) */
inset 0 1px 0 rgba(255, 235, 180, 0.35),
/* inset bottom shadow (rim falls into shadow) */
inset 0 -2px 3px rgba(0, 0, 0, 0.55);
/* embossed number — light highlight up, dark shadow down */
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.6),
0 1px 0 rgba(255, 235, 180, 0.32),
0 0 6px rgba(212, 175, 55, 0.4);
transition: filter var(--transition-normal);
}
/* Inner gold ring — sits a few pixels in from the outer rim, classic
* coin/medal styling. Pure decoration; no clicks, no layout. */
.combat-aa42-rank-coin::before {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.55);
box-shadow: inset 0 0 3px rgba(212, 175, 55, 0.18);
pointer-events: none;
}
.combat-aa42-rank-coin.is-firing-atk {
filter:
drop-shadow(0 0 12px rgba(196, 82, 82, 0.9));
}
.combat-aa42-rank-coin.is-firing-def {
filter:
drop-shadow(0 0 12px rgba(138, 164, 194, 0.9));
}
/* === Per-cell rank pieces (dice / casualty stack / units) ===
*
* Each rank row gets a horizontal "battle band" — a darker stripe with
* soft top/bottom fade and a faint warm glow at the top edge, so units
* sit on a defined band rather than floating in space. The atk-units,
* atk-dice, center spine, def-dice, and def-units cells in a row share
* the same vertical gradient stops, so the band reads as continuous
* across the whole width. Inspired by tabletop war-game combat boards
* (see issue #2314 reference). */
.combat-aa42-rank-units-cell,
.combat-aa42-rank-dice-cell,
.combat-aa42-rank-cell {
background:
/* faint warm light pooling at the top edge of the band */
linear-gradient(180deg,
rgba(255, 180, 120, 0.06) 0%,
transparent 18%),
/* core band — darkest in the middle, fading at top/bottom */
linear-gradient(180deg,
transparent 0%,
rgba(28, 14, 10, 0.55) 18%,
rgba(38, 18, 14, 0.70) 50%,
rgba(28, 14, 10, 0.55) 82%,
transparent 100%);
/* inset top sheen — picks up like firelight catching dust */
box-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.05);
}
.combat-aa42-rank-units-cell {
align-self: stretch;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.combat-aa42-rank-units-cell--atk { padding-right: 4px; }
.combat-aa42-rank-units-cell--def { padding-left: 4px; }
/* Dice cell — fixed width sized for 4 dice across; wraps to a second row if
* needed. Atk: right-justified to spine; def: left-justified to spine. */
.combat-aa42-rank-dice-cell {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
align-self: stretch;
gap: 4px;
padding: 6px 8px;
}
.combat-aa42-rank-dice-cell--atk {
justify-content: flex-end;
}
.combat-aa42-rank-dice-cell--def {
justify-content: flex-start;
}
/* === Outer casualty columns (sit OUTSIDE the rank grid) ===
*
* Lives in `.combat-aa42-board-shell` cols 1 and 3. The rank grid stays
* untouched (5 internal cols); the casualty cols sit alongside its bands.
* Layout per side (atk left / def right):
* - Vertical "CASUALTIES" label on the OUTER edge, rotated -90° (atk)
* or +90° (def) via `writing-mode: sideways-*`.
* - Chip stack flush to the INNER edge (close to the rank chips), so
* casualties sit next to the units they were drawn from. */
.combat-aa42-casualty-col {
/* Stacked layout: chips on top (rendered first in JSX), vertical
* "Casualty Zone" label at the bottom. Width is fluid; flex-shrink: 0
* keeps the column from collapsing when the rank grid is wide. */
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 4px;
gap: 8px;
width: clamp(56px, 6vw, 96px);
flex-shrink: 0;
position: relative;
overflow: hidden;
/* Opaque base so the camo backdrop on `.combat-aa42-board-shell` only
* shows through in the outer void areas, not behind the chips. */
background:
linear-gradient(180deg, rgba(36, 22, 14, 0.55), rgba(24, 14, 8, 0.40)),
#0d0805;
}
.combat-aa42-casualty-col--atk {
border-right: 1px solid rgba(196, 82, 82, 0.30);
box-shadow: inset -10px 0 18px -12px rgba(196, 82, 82, 0.30);
}
.combat-aa42-casualty-col--def {
border-left: 1px solid rgba(138, 164, 194, 0.30);
box-shadow: inset 10px 0 18px -12px rgba(138, 164, 194, 0.28);
}
.combat-aa42-casualty-label {
/* Embossed watermark — sits absolutely centered in the casualty column
* as a decorative engraved-stone effect. Chips draw on top of it via a
* higher z-index; overlap is fine, the label is purely decorative. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
font-family: var(--font-heading);
font-size: clamp(1.0rem, 1.05vw, 1.5rem);
letter-spacing: 0.22em;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
/* Faint fill + paired highlight/shadow gives the text a pressed-in,
* stamped-into-leather look. */
color: rgba(255, 220, 170, 0.10);
text-shadow:
0 1px 0 rgba(255, 240, 200, 0.22),
0 -1px 0 rgba(0, 0, 0, 0.65),
0 0 8px rgba(0, 0, 0, 0.45);
}
.combat-aa42-casualty-col--atk .combat-aa42-casualty-label {
/* sideways-lr: text reads bottom-up (head tilts left) */
writing-mode: sideways-lr;
}
.combat-aa42-casualty-col--def .combat-aa42-casualty-label {
/* sideways-rl: text reads top-down (head tilts right) */
writing-mode: sideways-rl;
}
.combat-aa42-casualty-chips {
display: flex;
flex-direction: column;
gap: 6px;
/* Fill the full column height — chips can stack top-to-bottom and
* happily overlap the embossed label, which is a watermark only. */
flex: 1 1 auto;
width: 100%;
position: relative;
z-index: 1;
overflow-y: auto;
/* Soft top/bottom mask so a long stack fades into the column edges. */
mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
/* Hide native scrollbars — fade is enough visual cue. */
scrollbar-width: none;
}
.combat-aa42-casualty-chips::-webkit-scrollbar { display: none; }
/* Right-justify atk chips toward the inner edge (= toward rank grid). */
.combat-aa42-casualty-col--atk .combat-aa42-casualty-chips {
align-items: flex-end;
}
/* Left-justify def chips toward the inner edge. */
.combat-aa42-casualty-col--def .combat-aa42-casualty-chips {
align-items: flex-start;
}
/* Each die wrapper — relative-positioned so the multiplier badge anchors on
* the upper-right corner. Predictable size = die size only (no inline text). */
.combat-aa42-rank-die {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
.combat-aa42-rank-die-mult {
position: absolute;
top: -5px;
right: -7px;
z-index: 2;
pointer-events: none;
background: rgba(0, 0, 0, 0.92);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
padding: 2px 4px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.25);
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Horizontal chip row inside a unit cell. Each chip column = icon + (optional +/-). */
.combat-aa42-rank-chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
padding: 6px 10px;
align-items: flex-start;
align-self: center;
width: 100%;
}
.combat-aa42-rank-chip-row--atk { justify-content: flex-end; }
.combat-aa42-rank-chip-row--def { justify-content: flex-start; }
.combat-aa42-chip-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.combat-aa42-chip-col--selected {
/* Subtle highlight when this chip has a non-zero casualty selection */
}
/* Clickable chip during casualty mode — gentle glow to indicate it's an
* eligible casualty target for the current hit category. */
.combat-aa42-chip-col--clickable {
filter: drop-shadow(0 0 4px rgba(255,210,120,0.55));
}
.combat-aa42-chip-col--clickable:hover {
filter: drop-shadow(0 0 8px rgba(255,225,160,0.8));
}
/* === Casualty adjust overlay — popup anchored on a chip when it's clicked
* in casualty mode. Saves the always-visible +/- vertical space. === */
.combat-aa42-cas-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,0.5);
}
.combat-aa42-cas-overlay {
position: fixed;
z-index: 10000;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto auto;
gap: 6px 12px;
align-items: center;
justify-items: center;
/* Fully opaque background — no bleed-through from underlying chips. */
background: #0c0a08;
border: 1px solid var(--accent-gold);
border-radius: var(--radius-md);
padding: 10px 14px;
min-width: 180px;
box-shadow: 0 10px 28px rgba(0,0,0,0.85);
pointer-events: auto;
}
.combat-aa42-cas-overlay-num {
grid-column: 2;
grid-row: 1 / 3;
font-family: var(--font-heading);
font-weight: 700;
font-size: 2.25rem;
color: var(--accent-gold);
line-height: 1;
text-shadow: 0 0 18px var(--overlay-gold-40);
}
.combat-aa42-cas-overlay-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.85);
padding: 4px 10px;
border-radius: var(--radius-xs);
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.combat-aa42-cas-overlay-btn:hover:not(:disabled) {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.32);
}
.combat-aa42-cas-overlay-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.combat-aa42-cas-overlay-step {
width: 32px;
height: 32px;
font-size: 1.1rem;
padding: 0;
border-radius: 50%;
}
.combat-aa42-cas-overlay-step--minus { grid-column: 1; grid-row: 1; }
.combat-aa42-cas-overlay-step--plus { grid-column: 3; grid-row: 1; }
.combat-aa42-cas-overlay-min { grid-column: 1; grid-row: 2; }
.combat-aa42-cas-overlay-max { grid-column: 3; grid-row: 2; }
.combat-aa42-cas-overlay-actions {
grid-column: 1 / -1;
grid-row: 3;
display: flex;
gap: 8px;
justify-content: center;
margin-top: 4px;
}
.combat-aa42-cas-overlay-action {
width: 38px;
height: 30px;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
cursor: pointer;
border: 1px solid;
font-weight: 700;
transition: all var(--transition-fast);
}
.combat-aa42-cas-overlay-action--confirm {
background: #2a8a3a;
border-color: #4ab84a;
color: #fff;
}
.combat-aa42-cas-overlay-action--confirm:hover { background: #34a345; }
.combat-aa42-cas-overlay-action--cancel {
background: #8a2a2a;
border-color: #c64545;
color: #fff;
}
.combat-aa42-cas-overlay-action--cancel:hover { background: #a33434; }
/* Fire overlay — anchored to the upper-left corner of the unit chip when this
* unit type has casualties applied this round. Sized roughly to match the
* count-pill medallion. The number of casualties is centered on the flame;
* suppressed when count == 1. Inline styles set the precise width/height. */
.combat-aa42-chip-fire {
position: absolute;
top: -6px;
left: -6px;
pointer-events: none;
z-index: 12;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.combat-aa42-chip-fire-count {
position: absolute;
/* Visual center of the flame falls below geometric center — yellow core
* sits in the lower half of the icon. */
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
font-family: var(--font-heading);
font-weight: 700;
line-height: 1;
text-shadow: 0 0 2px rgba(255,235,200,0.85);
}
/* Damage badge — small red ½ disc anchored to the bottom-left corner of
* 2-hit unit chips (battleships, carriers) when the unit has taken its
* first hit and is operating at reduced HP. Pure visual; not interactive. */
.combat-aa42-chip-damage {
position: absolute;
bottom: -4px;
right: -4px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.78rem;
line-height: 1;
color: #fff;
background: linear-gradient(135deg, #d04a4a 0%, #6e1f1f 100%);
border: 1.5px solid rgba(255, 220, 200, 0.75);
box-shadow:
0 0 6px rgba(208, 74, 74, 0.65),
inset 0 -1px 1px rgba(0, 0, 0, 0.45);
pointer-events: none;
z-index: 11;
}
.combat-aa42-chip-amphi {
position: absolute;
bottom: -4px;
left: -4px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
line-height: 1;
color: #fff;
background: var(--color-amphibious, #5090c0);
border: 1.5px solid rgba(160, 220, 255, 0.65);
box-shadow:
0 0 5px rgba(80, 144, 192, 0.6),
inset 0 -1px 1px rgba(0, 0, 0, 0.35);
pointer-events: none;
z-index: 11;
}
/* AA-fire halos: green ring on AA guns that are firing, red ring on enemy
* air units that could be hit. Anchored just outside the chip's globe disc. */
.combat-aa42-chip-halo {
position: absolute;
inset: -4px;
border-radius: 50%;
pointer-events: none;
z-index: 2;
animation: combatAa42HaloPulse 2.4s ease-in-out infinite;
}
.combat-aa42-chip-halo--green {
border: 2px solid rgba(110, 220, 110, 0.9);
box-shadow:
0 0 14px rgba(110, 220, 110, 0.55),
inset 0 0 6px rgba(110, 220, 110, 0.35);
}
.combat-aa42-chip-halo--red {
border: 2px solid rgba(220, 80, 80, 0.9);
box-shadow:
0 0 14px rgba(220, 80, 80, 0.55),
inset 0 0 6px rgba(220, 80, 80, 0.35);
}
@keyframes combatAa42HaloPulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* Right-justify the DEF loss summary (atk left-justified is the default). */
.combat-aa42-loss-cell--def :first-child {
justify-content: flex-end;
}
/* Right-justify attacker unit content (anchored against the spine).
* Defender stays default (left-justified, naturally anchored against the spine
* since it's on the right side of the grid). */
.combat-aa42-rank-units-cell--atk div[style*="flex: 1"] {
flex: 0 1 auto !important;
}
.combat-aa42-rank-units-cell--atk > div > div > div {
justify-content: flex-end;
}
/* Nation row — separate three-column layout above the rank grid.
* Independent of the rank-grid's 7-col layout so the action cell can take
* 2/3 of the width without inflating the spine column below. */
.combat-aa42-nation-row {
display: grid;
/* Symmetric 1fr / auto / 1fr so the center action cell stays viewport-
* centered regardless of which side has an action badge. Sides hug their
* outer edges via .combat-aa42-nation-row-side justify-content. */
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
/* Chrome-less: the old center-band border/gradient was vestigial decoration
* (#2580). The row is now just a transparent positioning container for the
* passive stage display + the floating "Awaiting decision" hint. */
/* Out of grid flow — floats as an overlay above the board-shell so its
* height changes never cause the rank rows above to reflow/bounce. The
* rank grid is allowed to extend under this overlay (it stays centered
* via align-content, so it breathes lower rather than clipping). */
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
min-height: 3.5rem;
}
@media (max-width: 768px) {
.combat-aa42-nation-row {
min-height: 2.75rem;
}
}
.combat-aa42-nation-row .combat-aa42-col-head--atk { color: var(--combat-aa42-atk); }
.combat-aa42-nation-row .combat-aa42-col-head--def { color: var(--combat-aa42-def); }
.combat-aa42-action-cell {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 1px 10px;
}
.combat-aa42-action-cell:empty { background: transparent; }
@media (max-width: 768px) {
.combat-aa42-action-cell { padding: 2px 6px; gap: 6px; }
}
/* Side slots in the bottom nation row — host the action badges (Roll Attack,
* Select Casualties, Submerge?, etc.) on each side. */
.combat-aa42-nation-row-side {
display: flex;
align-items: center;
padding: 2px 10px;
min-width: 0;
}
/* Pull the action badges toward the middle of the row — atk hugs the
* right edge of its side cell, def hugs the left edge — so they sit
* close to the central decision buttons instead of the screen edges. */
.combat-aa42-nation-row-side--atk { justify-content: flex-end; }
.combat-aa42-nation-row-side--def { justify-content: flex-start; }
/* Simulate button — small icon-style button that floats at the right edge
* of the action cell so it sits next to whatever decision buttons are there
* (Press Attack/Retreat, Confirm Casualties, Roll, etc.). */
.combat-aa42-simulate-btn {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 0.75rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
padding: 4px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.combat-aa42-simulate-btn:hover {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.25);
}
/* === Action bar — horizontal row at the bottom of the stage panel === */
.combat-aa42-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 8px 16px;
flex-wrap: wrap;
}
.combat-aa42-action-bar-left {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.combat-aa42-action-bar-right {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
.combat-aa42-stage-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px;
gap: 8px;
min-height: 80px;
}
.combat-aa42-stage-body--decisions {
align-items: stretch;
justify-content: flex-start;
text-align: left;
}
.combat-aa42-stage-hit-reveal {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.18em;
text-align: center;
font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2.5rem);
color: var(--accent-gold);
text-shadow: 0 0 28px var(--overlay-gold-40);
}
.combat-aa42-stage-hit-reveal.is-zero {
color: var(--text-muted);
text-shadow: none;
}
/* Live running tally of both sides' hits — visible whenever either has fired. */
.combat-aa42-stage-totals {
display: flex;
align-items: stretch;
justify-content: center;
gap: 18px;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.combat-aa42-stage-totals-side {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 2px 14px;
min-width: 90px;
}
.combat-aa42-stage-totals-side + .combat-aa42-stage-totals-side {
border-left: 1px solid var(--border-primary);
}
.combat-aa42-stage-totals-label {
font-size: 0.6875rem;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.45);
font-weight: 600;
}
.combat-aa42-stage-totals-value {
font-size: clamp(1.25rem, 0.85rem + 1.1vw, 2rem);
line-height: 1;
}
.combat-aa42-stage-totals-side--atk .combat-aa42-stage-totals-value {
color: var(--combat-aa42-atk-glow);
text-shadow: 0 0 18px rgba(196,82,82,0.45);
}
.combat-aa42-stage-totals-side--def .combat-aa42-stage-totals-value {
color: var(--combat-aa42-def-glow);
text-shadow: 0 0 18px rgba(138,164,194,0.4);
}
.combat-aa42-stage-totals-suffix {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.4);
margin-top: 2px;
}
@media (max-width: 768px) {
.combat-aa42-board {
grid-template-columns:
minmax(0, max-content)
clamp(110px, 30vw, 140px)
auto
clamp(110px, 30vw, 140px)
minmax(0, max-content);
}
}
/* Height-constrained viewports (e.g. iPhone landscape ~390px tall):
* tighten row gap and per-cell padding so 4 rank rows + noncombatants
* row + footer all fit without scrolling. Pairs with the chip/dice
* shrink in CombatBoardContent (isDiceMobileCollapsible). */
@media (max-height: 600px) {
.combat-aa42-board {
row-gap: 4px;
}
.combat-aa42-rank-cell--center,
.combat-aa42-rank-dice-cell {
padding-top: 3px;
padding-bottom: 3px;
}
.combat-aa42-rank-chip-row {
padding: 3px 8px;
gap: 6px 10px;
}
}
/* Flag watermark — bigger, more atmospheric. The map underneath is veiled
* by combat-root's near-black backdrop, so the flag can breathe at 28%. */
.combat-aa42-flag {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.combat-aa42-flag-bg {
position: absolute;
top: 40%;
left: 50%;
width: 70%;
max-width: 460px;
aspect-ratio: 2 / 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.42;
filter: contrast(1.0) saturate(0.95) brightness(0.95);
/* Slow ken-burns drift — gentle scale + translate for life. */
animation: combatAa42FlagDrift 36s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes combatAa42FlagDrift {
0% { transform: translate(-50%, -50%) scale(1.00) translate(0px, 0px); }
50% { transform: translate(-50%, -50%) scale(1.06) translate(-12px, 6px); }
100% { transform: translate(-50%, -50%) scale(1.02) translate(8px, -4px); }
}
.combat-aa42-flag.is-passive .combat-aa42-flag-bg {
opacity: 0.18;
filter: grayscale(35%) contrast(0.9) brightness(0.7);
}
.combat-aa42-flag-secondary {
position: absolute;
bottom: 8%;
right: 6%;
width: 32%;
max-width: 220px;
aspect-ratio: 2 / 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.22;
filter: contrast(0.95) saturate(0.9) brightness(0.85);
pointer-events: none;
}
/* Tracer-fire texture — single inline SVG of light streaks at low opacity.
* Sits between the flag and the unit rows, gives each side a sense of motion. */
.combat-aa42-tracers {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.18;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
mix-blend-mode: screen;
}
.combat-aa42-tracers--def {
transform: scaleX(-1);
opacity: 0.14;
filter: hue-rotate(180deg) saturate(0.4);
}
/* === Tribunal column header — anchored above unit rows === */
.combat-aa42-col-head {
position: relative;
z-index: 2;
padding: 3px 14px;
border-bottom: 1.5px solid currentColor;
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
}
.combat-aa42-col-head--atk { color: var(--combat-aa42-atk); }
.combat-aa42-col-head--def { color: var(--combat-aa42-def); }
.combat-aa42-col-head-flag {
width: clamp(22px, 1.6vw, 32px);
height: auto;
border-radius: 2px;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.15);
}
.combat-aa42-col-head-text {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.combat-aa42-col-head-nation {
font-family: var(--font-heading);
/* 14px → 22px across viewport so the col-head reads at desktop scale. */
font-size: clamp(0.875rem, 0.75rem + 0.55vw, 1.4rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.1;
color: rgba(255,255,255,0.92);
}
.combat-aa42-col-head-count {
font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.9rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
/* Total hits badge — side-coded pill in the column header. Acts as a
* dropdown trigger: click to expand a per-rank breakdown panel that drops
* into the unit area below. */
.combat-aa42-col-head-hits {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(0.625rem, 0.55rem + 0.28vw, 0.95rem);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 9px;
border-radius: 999px;
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: filter var(--transition-fast);
}
.combat-aa42-col-head-hits:hover { filter: brightness(1.1); }
.combat-aa42-col-head-hits.is-open {
filter: brightness(1.2);
box-shadow: 0 0 12px currentColor;
}
.combat-aa42-col-head-hits-chev {
font-size: 0.5625rem;
opacity: 0.85;
display: inline-block;
transition: transform var(--transition-fast);
}
.combat-aa42-col-head-hits.is-open .combat-aa42-col-head-hits-chev {
transform: rotate(180deg);
}
.combat-aa42-col-head--atk .combat-aa42-col-head-hits {
background: linear-gradient(135deg, var(--combat-aa42-atk) 0%, #6e1f1f 100%);
color: #fff5f0;
box-shadow: 0 0 6px rgba(196, 82, 82, 0.45);
border: 1px solid rgba(255, 180, 180, 0.35);
}
.combat-aa42-col-head--def .combat-aa42-col-head-hits {
background: linear-gradient(135deg, var(--combat-aa42-def) 0%, #3a536e 100%);
color: #f0f6fb;
box-shadow: 0 0 6px rgba(138, 164, 194, 0.4);
border: 1px solid rgba(200, 220, 240, 0.35);
}
/* Backdrop captures clicks outside the dropdown to close it. Rendered via
* portal at document.body so it sits above all rank-grid stacking contexts. */
.combat-aa42-col-head-hits-backdrop {
position: fixed;
inset: 0;
z-index: 9998;
background: transparent;
}
/* Dropdown panel — fixed positioning + portal so it floats above all sibling
* grid rows (rank grid, footer). Coordinates set inline from the anchor's
* bounding rect at click time. */
.combat-aa42-col-head-hits-panel {
position: fixed;
z-index: 9999;
min-width: 160px;
background: #0d0a07;
border: 1px solid var(--accent-gold);
border-radius: var(--radius-md);
padding: 8px 10px;
box-shadow: 0 10px 28px rgba(0,0,0,0.85);
font-family: var(--font-body);
}
.combat-aa42-col-head-hits-panel-title {
font-family: var(--font-heading);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-gold);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(212,175,55,0.25);
}
.combat-aa42-col-head-hits-panel-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.combat-aa42-col-head-hits-panel-list li {
display: flex;
justify-content: space-between;
gap: 16px;
font-size: 0.75rem;
}
.combat-aa42-col-head-hits-panel-power {
font-family: var(--font-heading);
font-weight: 700;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
}
.combat-aa42-col-head-hits-panel-count {
color: var(--text-primary);
font-weight: 600;
}
.combat-aa42-col-head--atk .combat-aa42-col-head-hits-panel-count {
color: var(--combat-aa42-atk-glow);
}
.combat-aa42-col-head--def .combat-aa42-col-head-hits-panel-count {
color: var(--combat-aa42-def-glow);
}
.combat-aa42-col-head-hits-panel-empty {
font-size: 0.75rem;
color: var(--text-muted);
font-style: italic;
}
@media (max-width: 768px) {
.combat-aa42-col-head { padding: 3px 8px; gap: 6px; }
.combat-aa42-col-head-flag { width: 18px; }
.combat-aa42-col-head-nation { font-size: 0.75rem; letter-spacing: 0.06em; }
.combat-aa42-col-head-count { font-size: 0.5625rem; }
}
/* === Per-row hit count badge (anchored right on the unit row) === */
.combat-aa42-row {
position: relative;
}
.combat-aa42-row-hits {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-family: var(--font-heading);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 8px;
white-space: nowrap;
z-index: 3;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.combat-aa42-row--atk .combat-aa42-row-hits {
right: 6px;
background: linear-gradient(135deg, var(--combat-aa42-atk) 0%, #6e1f1f 100%);
color: #fff5f0;
border: 1px solid rgba(255,180,180,0.45);
box-shadow: 0 0 10px rgba(196,82,82,0.4);
}
.combat-aa42-row--def .combat-aa42-row-hits {
right: 6px;
background: linear-gradient(135deg, var(--combat-aa42-def) 0%, #3a536e 100%);
color: #f0f6fb;
border: 1px solid rgba(200,220,240,0.45);
box-shadow: 0 0 10px rgba(138,164,194,0.35);
}
/* === Center column — the STAGE === */
/* Oversized phase prompt sitting above the dice grid. */
.combat-aa42-stage-prompt {
text-align: center;
padding: 14px var(--space-lg) 8px;
position: relative;
z-index: 2;
}
.combat-aa42-stage-prompt-label {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.25rem, 0.85rem + 1.4vw, 2rem); /* 20–32px */
letter-spacing: 0.12em;
line-height: 1.05;
text-transform: uppercase;
text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.combat-aa42-stage-prompt-label--atk { color: var(--combat-aa42-atk-glow); }
.combat-aa42-stage-prompt-label--def { color: var(--combat-aa42-def-glow); }
.combat-aa42-stage-prompt-label--neutral { color: var(--accent-gold); }
.combat-aa42-stage-prompt-owner {
display: block;
margin-top: 4px;
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.combat-aa42-stage-prompt-rule {
margin: 8px auto 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.4;
}
/* === CONTINUE primary CTA (post-roll, war-room red) === */
.combat-aa42-continue {
display: block;
width: 100%;
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff8f4;
background: linear-gradient(180deg, var(--combat-aa42-cta-hover) 0%, var(--combat-aa42-cta) 100%);
border: 1px solid rgba(255,180,180,0.35);
border-top-color: rgba(255,200,200,0.55);
border-bottom-color: rgba(0,0,0,0.4);
border-radius: var(--radius-sm);
padding: 14px 20px;
cursor: pointer;
box-shadow:
0 2px 12px rgba(176,56,56,0.45),
inset 0 1px 0 rgba(255,255,255,0.18),
inset 0 -2px 0 rgba(0,0,0,0.25);
transition: all var(--transition-normal);
}
.combat-aa42-continue:hover:not(:disabled) {
background: linear-gradient(180deg, #d65656 0%, var(--combat-aa42-cta-hover) 100%);
box-shadow:
0 4px 18px rgba(176,56,56,0.6),
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -2px 0 rgba(0,0,0,0.2);
transform: translateY(-1px);
}
.combat-aa42-continue:active:not(:disabled) {
transform: translateY(0);
box-shadow:
0 1px 6px rgba(176,56,56,0.45),
inset 0 2px 4px rgba(0,0,0,0.35);
}
.combat-aa42-continue:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.combat-aa42-continue-wrap {
position: sticky;
bottom: 0;
z-index: 3;
background: linear-gradient(to top, var(--bg-darkest) 75%, transparent);
padding: 10px 16px 8px;
}
/* === Battle action frame (#2580) — center-stage caption + thumb-corner
* primary + persistent ghost left cluster. Single layout for all viewports;
* env(safe-area-inset-*) is 0 on non-notch devices and the rail-edge anchor
* keeps spacing. Dice render inline in the rank rows (not here), so the
* bottom band is reclaimed for the rank grid; the bottom-CENTER stays free
* of interactive elements (primary = bottom-right, secondary = bottom-left)
* so the iOS home-indicator gesture is unobstructed. === */
.combat-action-frame {
position: absolute;
inset: 0;
pointer-events: none; /* regions re-enable; empty space stays click-through */
/* Above .combat-aa42-nation-row (z-index 3) and the now-expanded board-shell
* content so the caption/primary/secondary always float clearly on top. */
z-index: 6;
}
.combat-action-caption {
position: absolute;
/* Anchored flush to the battle header's measured bottom edge
* (--combat-header-bottom, set in CombatBoard.tsx) with a small breathing
* gap. Falls back to a fixed offset when the var is unset. */
top: calc(var(--combat-header-bottom, 3.25rem) + 0.4rem);
left: 50%;
transform: translateX(-50%);
max-width: min(70vw, 30rem);
text-align: center;
pointer-events: none;
font-family: var(--font-heading);
font-style: italic;
font-weight: 600;
font-size: clamp(0.875rem, 0.75rem + 0.6vw, 1.125rem);
letter-spacing: 0.04em;
color: var(--text-secondary);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
margin: 0;
}
.combat-action-caption__icon { margin-right: 0.4em; opacity: 0.85; }
.combat-action-primary {
position: absolute;
/* Align the button's right edge to the def casualty-col's outer (right)
* edge (--combat-rail-right, set in CombatBoard.tsx). max() with a
* safe-area floor so it never clips under a notch if the rail computes
* to ~0; falls back to 1rem when the rail vars are unset (SBR/finished). */
right: max(calc(var(--safe-r) + 0.25rem), var(--combat-rail-right, 1rem));
bottom: calc(1rem + var(--safe-b));
pointer-events: auto;
min-width: 120px;
min-height: 48px;
padding: 0 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #2e1f0c;
background:
repeating-linear-gradient(90deg, rgba(255, 248, 225, 0.05) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #e7c878 0%, #c79a48 42%, #9a6f2c 72%, #7c5620 100%);
border: 1px solid #5a3f1a;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(255, 244, 210, 0.6),
inset 0 -2px 3px rgba(60, 38, 12, 0.55),
0 3px 9px rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 0 rgba(255, 238, 200, 0.45);
cursor: pointer;
transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.combat-action-primary:hover:not(:disabled) { filter: brightness(1.06) saturate(1.04); }
.combat-action-primary:active:not(:disabled) {
transform: translateY(1px);
box-shadow:
inset 0 2px 4px rgba(50, 32, 10, 0.6),
inset 0 1px 0 rgba(255, 244, 210, 0.3),
0 1px 4px rgba(0, 0, 0, 0.5);
}
.combat-action-primary:disabled { opacity: 0.5; filter: grayscale(0.55) brightness(0.9); cursor: default; }
.combat-action-primary[data-variant='danger'] {
background:
repeating-linear-gradient(90deg, rgba(255, 235, 235, 0.04) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #c97a5a 0%, #a85436 45%, #7d3a22 100%);
color: #2a120b;
border-color: #5a2a1a;
text-shadow: 0 1px 0 rgba(255, 210, 190, 0.4);
}
.combat-action-primary[data-variant='success'] {
background:
repeating-linear-gradient(90deg, rgba(235, 255, 235, 0.04) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #9ec27e 0%, #6f9a52 45%, #4d7236 100%);
color: #16240f;
border-color: #39521f;
text-shadow: 0 1px 0 rgba(225, 245, 205, 0.4);
}
.combat-action-secondary-cluster {
position: absolute;
/* Align the cluster's left edge to the atk casualty-col's outer (left)
* edge (--combat-rail-left). Same safe-area floor + fallback as primary. */
left: max(calc(var(--safe-l) + 0.25rem), var(--combat-rail-left, 1rem));
bottom: calc(1rem + var(--safe-b));
pointer-events: auto;
display: flex;
gap: 6px;
flex-wrap: wrap;
max-width: 45vw;
}
.combat-action-secondary {
min-height: 44px;
min-width: 56px;
padding: 0 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-gold, #caa86a);
background: linear-gradient(180deg, #1d140c 0%, #140d07 100%);
border: 1px solid #6f552f;
border-radius: 5px;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.6),
inset 0 -1px 0 rgba(140, 104, 52, 0.25),
0 1px 3px rgba(0, 0, 0, 0.4);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
cursor: pointer;
white-space: nowrap;
transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.combat-action-secondary:hover:not(:disabled) {
color: #f0d8a2;
border-color: #9a7a44;
background: linear-gradient(180deg, #241910 0%, #180f08 100%);
}
.combat-action-secondary:active:not(:disabled) {
transform: translateY(1px);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.combat-action-secondary:disabled { opacity: 0.4; cursor: default; }