/* ========================================
   Wings of Glory Solo App - Custom Styles
   WWI Era (1910s) Vintage Design
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */
:root {
    /* ===== Base Color Palette ===== */
    --vintage-paper: #e8e4d8;
    --aged-paper: #d4d8dc;
    --vintage-blue: #3b5875;
    --vintage-navy: #2c4057;
    --dark-blue: #1a2838;
    --steel-blue: #5a7a99;
    --vintage-red: #8b3a3a;
    --accent-blue: #4a6b7c;
    --muted-blue: #6d8299;

    /* Semantic Colors */
    --hp-green: #3e4c34;
    --damage-red: #7a3030;
    --maneuver-blue: #2f4862;

    /* ===== Vintage Component Colors ===== */
    /* Brass */
    --vintage-brass-light: #B8956A;
    --vintage-brass-medium: #9B7A4F;
    --vintage-brass-dark: #8B6A3F;
    --vintage-brass-border: #6B5A3F;

    /* Bronze */
    --vintage-bronze-light: #786850;
    --vintage-bronze-medium: #7B6A4F;
    --vintage-bronze-dark: #6B5A3F;
    --vintage-bronze-border: #5B4A2F;

    /* Gold */
    --vintage-gold-light: #E8C570;
    --vintage-gold-medium: #D8B560;
    --vintage-gold-dark: #C8A550;

    /* Steel */
    --vintage-steel-light: #8B8B8B;
    --vintage-steel-medium: #5A5A5A;
    --vintage-steel-dark: #3A3A3A;

    /* Gunmetal */
    --vintage-gunmetal-light: #5A524A;
    --vintage-gunmetal-medium: #4A423A;
    --vintage-gunmetal-dark: #3A322A;
    --vintage-gunmetal-border: #2A2218;

    /* Bakelite */
    --vintage-bakelite-light: #5A4436;
    --vintage-bakelite-medium: #4A3526;
    --vintage-bakelite-dark: #3A2516;
    --vintage-bakelite-border: #2A1510;

    /* Lever */
    --vintage-lever-light: #4A4A4A;
    --vintage-lever-dark: #2A2A2A;

    /* ===== Polished Metals (Buttons) ===== */
    /* Polished Brass (btn-primary) */
    --polished-brass-light: #D4B896;
    --polished-brass-medium: #C4A886;
    --polished-brass-dark: #B49876;
    --polished-brass-border: #A48866;

    /* Oxidized Copper (btn-danger) */
    --copper-light: #965F4C;
    --copper-medium: #985F4A;
    --copper-dark: #884F3A;
    --copper-border: #783F2A;

    /* Aged Bronze (btn-warning) */
    --aged-bronze-light: #806B47;
    --aged-bronze-medium: #8B7550;
    --aged-bronze-dark: #7B6540;
    --aged-bronze-border: #6B5530;

    /* ===== Wood Panel Colors ===== */
    /* Mahogany (dark wood for borders/frames) */
    --wood-mahogany-dark: #5C3317;
    --wood-mahogany-medium: #6B3E26;
    --wood-mahogany-light: #7A4A35;
    --wood-frame-dark: #3D2210;
    --wood-frame-edge: #6B3E26;

    /* Ash (lighter inset panels for modal body) */
    --wood-ash-dark: #AC9470;
    --wood-ash-medium: #C0A880;
    --wood-ash-light: #D4BC90;

    /* ===== Text Colors ===== */
    --vintage-text-light: #FFF5E8;
    --vintage-text-dark: #1A0F00;
    --vintage-text-label: #E8E0D0;

    /* ===== Keyboard Focus Ring ===== */
    /* Gold on the dark surfaces (page, mahogany); light surfaces (brass plates, ash wood)
       set it to dark: the ring needs 3:1 against what is around it */
    --focus-ring-color: var(--vintage-gold-light);
    --focus-ring-color-on-light: var(--vintage-text-dark);

    /* ===== Gradient Definitions ===== */
    /* Component Gradients */
    --gradient-rivet: radial-gradient(circle, var(--vintage-steel-light) 0%, var(--vintage-steel-medium) 50%, var(--vintage-steel-dark) 100%);
    --gradient-rivet-dark: radial-gradient(circle, #6A6A6A 0%, #4A4A4A 50%, #2A2A2A 100%);
    --gradient-brass-housing: linear-gradient(135deg, var(--vintage-brass-light) 0%, var(--vintage-brass-dark) 100%);
    --gradient-bronze-plate: linear-gradient(135deg, var(--vintage-bronze-light) 0%, var(--vintage-bronze-dark) 100%);
    --gradient-gold-active: linear-gradient(135deg, var(--vintage-gold-light) 0%, var(--vintage-gold-dark) 100%);
    --gradient-blue-active: linear-gradient(135deg, var(--steel-blue) 0%, var(--maneuver-blue) 100%);
    --gradient-blue-dark: linear-gradient(135deg, var(--maneuver-blue) 0%, var(--dark-blue) 100%);
    --gradient-gunmetal-plate: linear-gradient(180deg, var(--vintage-gunmetal-light) 0%, var(--vintage-gunmetal-dark) 100%);
    --gradient-bakelite-knob: linear-gradient(135deg, var(--vintage-bakelite-light) 0%, var(--vintage-bakelite-dark) 100%);
    --gradient-lever: linear-gradient(90deg, var(--vintage-lever-dark) 0%, var(--vintage-lever-light) 100%);

    /* Button Gradients */
    --gradient-polished-brass: linear-gradient(135deg, var(--polished-brass-light) 0%, var(--polished-brass-dark) 100%);
    --gradient-polished-brass-hover: linear-gradient(135deg, #E4C8A6 0%, #C4A886 100%);
    --gradient-oxidized-copper: linear-gradient(135deg, var(--copper-light) 0%, var(--copper-dark) 100%);
    --gradient-oxidized-copper-hover: linear-gradient(135deg, #9A6350 0%, #884F3A 100%);
    --gradient-oxidized-copper-active: linear-gradient(135deg, #D89580 0%, #B87560 100%);
    --gradient-aged-bronze: linear-gradient(135deg, var(--aged-bronze-light) 0%, var(--aged-bronze-dark) 100%);
    --gradient-aged-bronze-hover: linear-gradient(135deg, #826D49 0%, #76623F 100%);
    --gradient-aged-bronze-active: linear-gradient(135deg, #D8B580 0%, #B89560 100%);
    --gradient-bronze-plate-hover: linear-gradient(135deg, #7E6D53 0%, #6E5D42 100%);

    /* Paper and Form Gradients */
    --gradient-paper-light: linear-gradient(135deg, #E8E4D8 0%, #D8D4C8 100%);
    --gradient-input-default: linear-gradient(135deg, #D8D4C8 0%, #E8E4D8 100%);
    --gradient-input-focus: linear-gradient(135deg, #E8E4D8 0%, #F5F1E5 100%);

    /* Wood Grain Gradients */
    --gradient-wood-mahogany: linear-gradient(135deg, var(--wood-mahogany-medium) 0%, var(--wood-mahogany-dark) 90%, var(--wood-mahogany-medium) 100%);
    --gradient-wood-ash: linear-gradient(90deg, var(--wood-ash-medium) 0%, var(--wood-ash-dark) 50%, var(--wood-ash-medium) 100%);

    /* Wood Grain Texture (fine grain overlay) */
    --texture-wood-grain-horizontal: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 3px);
    --texture-wood-grain-vertical: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 3px);

    /* ===== Shadow System ===== */
    --shadow-raised: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-raised-strong: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-very-subtle: 0 1px 2px rgba(0, 0, 0, 0.6);
    --inset-highlight: inset 0 1px 2px rgba(255, 255, 255, 0.3);
    --inset-highlight-subtle: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    --inset-highlight-very-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --inset-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    --inset-shadow-subtle: inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    --inset-shadow-flat: inset 0 -1px 2px rgba(0, 0, 0, 0.5);

    /* Button Shadows */
    --btn-active-glow: 0 0 16px rgba(255, 170, 70, 0.6), 0 4px 12px rgba(0, 0, 0, 0.6);
    --btn-shadow-default: 0 2px 4px rgba(0, 0, 0, 0.3);
    --btn-shadow-hover-base: 0 3px 6px rgba(0, 0, 0, 0.4);
    --btn-shadow-hover-gold: 0 3px 6px rgba(0, 0, 0, 0.4);
    --btn-shadow-hover-copper: 0 3px 6px rgba(0, 0, 0, 0.4);
    --btn-shadow-hover-bronze: 0 3px 6px rgba(0, 0, 0, 0.4);
    --btn-shadow-outline-default: 0 2px 4px rgba(0, 0, 0, 0.3);
    --btn-shadow-focus-gold: 0 0 0 0.2rem rgba(216, 181, 96, 0.4);
    --btn-shadow-focus-copper: 0 0 0 0.2rem rgba(220, 100, 80, 0.4);
    --btn-shadow-focus-bronze: 0 0 0 0.2rem rgba(255, 150, 60, 0.4);
    --btn-shadow-focus-danger: 0 0 0 0.2rem rgba(220, 100, 80, 0.4);
    --btn-shadow-active-gold: 0 1px 2px rgba(0, 0, 0, 0.4);
    --btn-shadow-active-danger: 0 1px 2px rgba(0, 0, 0, 0.4);
    --btn-shadow-active-warning: 0 1px 2px rgba(0, 0, 0, 0.4);

    /* ===== Active Border Colors ===== */
    --copper-active-border: #C88570;
    --bronze-active-border: #C8A570;

    /* ===== Layout & Spacing ===== */
    --border-radius-sm: 2px;         /* Small elements: buttons, inputs, modal inner */
    --border-radius-md: 3px;         /* Medium elements: modals */
    --border-radius: 4px;            /* Default border radius */
    --border-radius-lg: 6px;         /* Large elements: button groups */
    --border-radius-xl: 8px;         /* Extra large elements: toggle housing */
    --card-border-radius: 20px;      /* Cards and rounded panels */

    /* Modal Spacing System */
    --modal-outer-gap: 6px;
    --modal-section-padding-y: 10px;
    --modal-section-padding-x: 16px;
    --modal-body-padding: 16px;
    --modal-body-margin-y: 8px;
    --modal-border-radius: var(--border-radius-md);
    --modal-inner-border-radius: var(--border-radius-sm);

    /* ===== Animation Durations ===== */
    --guns-jam-token-appear-duration: 0.4s;
    --guns-jam-token-disappear-duration: 2s;
    --smoke-token-disappear-duration: 2s;
    --btn-transition: all 0.2s ease;

    /* ===== Plane Colors - Paul Tol's Bright Palette (Colorblind-Friendly) ===== */
    --plane-color-0: #4477AA;  /* Blue */
    --plane-color-1: #EE6677;  /* Red */
    --plane-color-2: #228833;  /* Green */
    --plane-color-3: #CCBB44;  /* Yellow */
    --plane-color-4: #66CCEE;  /* Cyan */
    --plane-color-5: #AA3377;  /* Purple */
    --plane-color-6: #BBBBBB;  /* Grey */
    --plane-color-7: #EE7733;  /* Orange */
    --plane-color-8: #009988;  /* Teal */
    --plane-color-9: #997700;  /* Olive */
    --plane-color-10: #994455; /* Wine */
    --plane-color-11: #004488; /* Dark Blue */
    --plane-color-12: #EECC66; /* Light Yellow */
    --plane-color-13: #661100; /* Brown */
    --plane-color-14: #332288; /* Indigo */
    --plane-color-15: #88CCEE; /* Light Cyan */
    /* A balloon has no plane color: its indicator in modal titles is grey */
    --balloon-color: #cccccc;

    /* Clock of the Plan Turn modal (dial in index.html, hours drawn by plan-turn-controls.js) */
    --clock-tick-hour: #000000;
    --clock-tick-minute: #666666;
    --clock-radial-line: #9B5F47;
    --clock-hand: #000;
    --clock-number: #000000;
    --clock-hub: #B8B8B0;
    --clock-hub-edge: #808080;
    --clock-hub-center: #404040;

    /* ===== Plane Card Dimensions ===== */
    --plane-card-border-width: 2px;
    --plane-card-body-border-width: 8px;
    --plane-card-body-margin: 4px 4px 0 4px;
    --plane-card-body-padding: 12px 12px;
    --plane-card-footer-margin: 2px 4px 4px 4px;
    --plane-card-footer-padding: 8px 12px;
    --plane-card-footer-bg: linear-gradient(90deg, #4A2B1A 0%, #3A1F10 50%, #4A2B1A 100%);
    /* Grey veil over an eliminated card: light enough that the stats keep 3:1 */
    --eliminated-card-veil: linear-gradient(rgba(160, 160, 160, 0.4), rgba(160, 160, 160, 0.4));

    /* ===== Drawn Maneuver Card ===== */
    --card-face-ink: #000;
    --card-face-outline: #fff;

    /* ===== Toggle Component Sizing ===== */
    --toggle-housing-size: 60px;
    --toggle-label-width: 100px;
    --toggle-label-height: 60px;
    --toggle-gap: 8px;
    --toggle-rivet-size: 3px;
    --toggle-rivet-offset: 45px;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: linear-gradient(180deg, var(--vintage-blue) 0%, var(--dark-blue) 100%);
    background-image:
        linear-gradient(180deg, rgba(59, 88, 117, 0.95) 0%, rgba(26, 40, 56, 0.95) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
    min-height: 100vh;
    color: var(--vintage-paper);
    margin: 0;
    padding: 0;
}

.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
}

/* ========================================
   HEADER
   ======================================== */
.app-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--vintage-paper);
    margin: 5px 0;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.05em;
    font-variant: small-caps;
    border-bottom: 1px solid var(--vintage-brass-light);
    padding-bottom: 5px;
}

/* ========================================
   BUTTONS - SHARED STYLES
   ======================================== */
.btn-primary,
.btn-secondary,
.btn-light,
.btn-danger,
.btn-warning,
.btn-outline-danger,
.input-group .btn-outline-secondary {
    font-family: 'Georgia', 'Times New Roman', serif;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The themes' gradients are the whole background: no Bootstrap color under them */
.btn-primary,
.btn-secondary,
.btn-light,
.btn-danger,
.btn-warning,
.btn-outline-danger,
.btn-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-disabled-bg: transparent;
}

/* Bootstrap draws a button from its --bs-btn-* variables in every state (hover,
   keyboard focus, pressed, checked, disabled). Each theme below sets them: its text
   and border colors, then its gradient on top as the background image (Bootstrap only
   sets the background color under it). No !important is needed against Bootstrap. */

/* Primary Button - Polished Brass */
.btn-primary {
    --bs-btn-color: var(--vintage-text-dark);
    --bs-btn-hover-color: var(--vintage-text-dark);
    --bs-btn-active-color: var(--vintage-text-dark);
    --bs-btn-disabled-color: var(--vintage-text-dark);
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: var(--polished-brass-border);
    --bs-btn-hover-border-color: var(--polished-brass-border);
    --bs-btn-active-border-color: var(--vintage-gold-medium);
    --bs-btn-disabled-border-color: var(--polished-brass-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-default);
    --bs-btn-font-weight: bold;
    background: var(--gradient-polished-brass);
    box-shadow: var(--btn-shadow-default);
    transition: var(--btn-transition);
}

/* Hover effects only with a mouse: on a touch screen :hover sticks after a tap.
   Every :hover rule in this file is inside such a block (a test checks). */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        background: var(--gradient-polished-brass-hover);
        box-shadow: var(--btn-shadow-hover-gold);
        transform: translateY(-1px);
    }
}

.btn-primary:focus {
    background: var(--gradient-polished-brass);
    box-shadow: var(--btn-shadow-focus-gold);
}

.btn-primary:active,
.btn-primary.active {
    --bs-btn-border-width: 2px;
    background: var(--gradient-gold-active);
    box-shadow: var(--btn-shadow-active-gold);
    transform: scale(1.02);
}

/* Secondary & Light Buttons (vintage toggle style) */
.btn-secondary,
.btn-light {
    --bs-btn-color: var(--vintage-text-light);
    --bs-btn-hover-color: var(--vintage-text-light);
    --bs-btn-active-color: var(--vintage-text-dark);
    --bs-btn-disabled-color: var(--vintage-text-light);
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: var(--vintage-bronze-border);
    --bs-btn-hover-border-color: var(--vintage-bronze-border);
    --bs-btn-active-border-color: var(--vintage-gold-medium);
    --bs-btn-disabled-border-color: var(--vintage-bronze-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-default);
    --bs-btn-font-weight: bold;
    background: var(--gradient-bronze-plate);
    box-shadow: var(--btn-shadow-default);
    transition: var(--btn-transition);
}

@media (hover: hover) and (pointer: fine) {
    .btn-secondary:hover,
    .btn-light:hover {
        background: var(--gradient-bronze-plate-hover);
        box-shadow: var(--btn-shadow-hover-gold);
        transform: translateY(-1px);
    }
}

.btn-secondary:focus,
.btn-light:focus {
    background: var(--gradient-bronze-plate);
    box-shadow: var(--btn-shadow-focus-gold);
}

.btn-secondary:active,
.btn-secondary.active,
.btn-light:active,
.btn-light.active {
    background: var(--gradient-gold-active);
    box-shadow: var(--btn-shadow-active-gold);
    transform: scale(1.02);
}

/* Danger Button - Oxidized Copper */
.btn-danger {
    --bs-btn-color: var(--vintage-text-light);
    --bs-btn-hover-color: var(--vintage-text-light);
    --bs-btn-active-color: var(--vintage-text-dark);
    --bs-btn-disabled-color: var(--vintage-text-light);
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: var(--copper-border);
    --bs-btn-hover-border-color: var(--copper-border);
    --bs-btn-active-border-color: var(--copper-active-border);
    --bs-btn-disabled-border-color: var(--copper-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-default);
    --bs-btn-font-weight: bold;
    background: var(--gradient-oxidized-copper);
    box-shadow: var(--btn-shadow-default);
    transition: var(--btn-transition);
}

@media (hover: hover) and (pointer: fine) {
    .btn-danger:hover {
        background: var(--gradient-oxidized-copper-hover);
        box-shadow: var(--btn-shadow-hover-copper);
        transform: translateY(-1px);
    }
}

.btn-danger:focus {
    background: var(--gradient-oxidized-copper);
    box-shadow: var(--btn-shadow-focus-copper);
}

.btn-danger:active,
.btn-danger.active {
    --bs-btn-border-width: 2px;
    background: var(--gradient-oxidized-copper-active);
    box-shadow: var(--btn-shadow-active-danger);
    transform: scale(1.02);
}

/* Outline Danger Button - Oxidized Copper Frame */
.btn-outline-danger {
    --bs-btn-color: var(--copper-dark);
    --bs-btn-hover-color: var(--copper-dark);
    --bs-btn-active-color: var(--vintage-text-light);
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: var(--copper-border);
    --bs-btn-hover-border-color: var(--copper-border);
    --bs-btn-active-border-color: var(--copper-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-outline-default);
    --bs-btn-font-weight: 600;
    background: var(--gradient-paper-light);
    box-shadow: var(--btn-shadow-outline-default);
}

.btn-outline-danger:active,
.btn-outline-danger.active {
    background: var(--gradient-oxidized-copper);
    box-shadow: var(--btn-shadow-focus-danger);
}

/* Outline Secondary Button - Bronze Frame */
.btn-outline-secondary {
    --bs-btn-color: var(--vintage-bronze-dark);
    --bs-btn-hover-color: var(--vintage-bronze-dark);
    --bs-btn-active-color: var(--vintage-text-light);
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: var(--vintage-bronze-border);
    --bs-btn-hover-border-color: var(--vintage-bronze-border);
    --bs-btn-active-border-color: var(--vintage-bronze-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-outline-default);
    --bs-btn-font-weight: 600;
    background: var(--gradient-paper-light);
    box-shadow: var(--btn-shadow-outline-default);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background: var(--gradient-bronze-plate);
    box-shadow: var(--btn-shadow-default);
}

/* Warning Button - Aged Bronze */
.btn-warning {
    --bs-btn-color: var(--vintage-text-light);
    --bs-btn-hover-color: var(--vintage-text-light);
    --bs-btn-active-color: var(--vintage-text-dark);
    --bs-btn-disabled-color: var(--vintage-text-light);
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: var(--aged-bronze-border);
    --bs-btn-hover-border-color: var(--aged-bronze-border);
    --bs-btn-active-border-color: var(--bronze-active-border);
    --bs-btn-disabled-border-color: var(--aged-bronze-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-default);
    --bs-btn-font-weight: bold;
    background: var(--gradient-aged-bronze);
    box-shadow: var(--btn-shadow-default);
    transition: var(--btn-transition);
}

@media (hover: hover) and (pointer: fine) {
    .btn-warning:hover {
        background: var(--gradient-aged-bronze-hover);
        box-shadow: var(--btn-shadow-hover-bronze);
        transform: translateY(-1px);
    }
}

.btn-warning:focus {
    background: var(--gradient-aged-bronze);
    box-shadow: var(--btn-shadow-focus-bronze);
}

.btn-warning:active,
.btn-warning.active {
    --bs-btn-border-width: 2px;
    background: var(--gradient-aged-bronze-active);
    box-shadow: var(--btn-shadow-active-warning);
    transform: scale(1.02);
}

/* Button Close */
.btn-close {
    filter: invert(1) grayscale(1) brightness(0.5);
}

/* Input Group Buttons (-/+ and the random name): bronze plates in every state */
.input-group .btn-outline-secondary {
    --bs-btn-color: var(--vintage-text-light);
    --bs-btn-hover-color: var(--vintage-text-light);
    --bs-btn-active-color: var(--vintage-text-light);
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: var(--vintage-bronze-border);
    --bs-btn-hover-border-color: var(--vintage-bronze-border);
    --bs-btn-active-border-color: var(--vintage-bronze-border);
    --bs-btn-focus-box-shadow: var(--btn-shadow-default);
    --bs-btn-font-weight: bold;
    background: var(--gradient-bronze-plate);
    box-shadow: var(--btn-shadow-default);
    touch-action: manipulation;
}

/* Button Groups - Vintage Toggle Style */
.btn-group {
    display: flex;
    gap: 4px;
}

/* Bootstrap squares the inner corners of grouped buttons with more specific rules */
.btn-group .btn {
    position: relative;
    border-radius: var(--border-radius-lg) !important;
}

.btn-group .btn-check:checked + .btn-secondary,
.btn-group .btn-check:checked + .btn-light {
    background: var(--gradient-gold-active);
    border: 2px solid var(--vintage-gold-medium);
    color: var(--vintage-text-dark);
    box-shadow: var(--btn-active-glow);
    z-index: 2;
}

/* ========================================
   MODALS - Wooden Cockpit Panel
   ======================================== */
.modal-content {
    /* Mahogany wood with fine grain texture */
    background:
        var(--texture-wood-grain-horizontal),
        var(--gradient-wood-mahogany);

    /* Dark wood frame border */
    border: 5px solid var(--wood-frame-dark);
    border-radius: var(--modal-border-radius);

    /* Varnished depth and shadow - simplified for performance */
    box-shadow:
        0 0 0 2px var(--wood-frame-dark),
        0 12px 36px rgba(0, 0, 0, 0.8);

    color: var(--vintage-text-dark);
    position: relative;
    overflow: visible;
}

.modal-header {
    /* Raised brass nameplate */
    background: var(--gradient-polished-brass);

    /* Remove Bootstrap defaults */
    border: none;
    border-bottom: 2px solid var(--polished-brass-border);

    /* Spacing and shape */
    margin: var(--modal-outer-gap) var(--modal-outer-gap) 0 var(--modal-outer-gap);
    padding: var(--modal-section-padding-y) var(--modal-section-padding-x);
    border-radius: var(--modal-inner-border-radius);

    /* Raised brass plate effect - simplified for performance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

}

.modal-title {
    color: var(--vintage-text-dark);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3);
    font-size: 1rem;
}

/* Modal body - Inset ash wood panel */
.modal-body {
    /* Lighter ash wood - texture removed for performance */
    background: var(--gradient-wood-ash);

    /* Inset panel effect */
    margin: var(--modal-body-margin-y) var(--modal-outer-gap);
    padding: var(--modal-body-padding);
    border: 2px solid var(--wood-frame-dark);
    border-radius: var(--modal-inner-border-radius);

    /* Recessed panel depth - simplified for performance */
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.modal-footer {
    /* Same mahogany wood as main panel */
    background: inherit;

    /* Remove Bootstrap defaults */
    border: none;

    /* Spacing */
    margin: 0 var(--modal-outer-gap) var(--modal-outer-gap) var(--modal-outer-gap);
    padding: var(--modal-section-padding-y) var(--modal-section-padding-x);
}

/* Close button styling */
.modal-header .btn-close {
    filter: grayscale(100%) brightness(0%);
}

/* Modal Icons */
.modal-header-insignia {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* ========================================
   FORMS
   ======================================== */
.form-label {
    color: var(--dark-blue);
    font-size: 1rem;
    margin-bottom: 2px;
    font-weight: 600;
    background: transparent;
    padding: 4px 12px;
    display: inline-block;
    text-transform: uppercase;
}

.form-text {
    font-size: 1em;
    color: var(--vintage-text-dark);
}

.form-label i {
    margin-right: 5px;
}

/* Form Controls - Recessed Metal Panel */
.form-control {
    background: var(--gradient-input-default);
    border: 2px solid var(--wood-frame-dark);
    color: var(--dark-blue);
    border-radius: var(--border-radius-sm);
    /* Simplified for performance - reduced from 3 to 1 shadow */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 5px 12px;
    line-height: 1.5;
}

/* The focus ring is the :focus-visible outline (section ACCESSIBILITY), not Bootstrap's glow */
.form-control:focus {
    background: var(--gradient-input-focus);
    border-color: var(--vintage-gold-medium);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Form Label Colors - Apply to icons only */
.label-maneuver {
    color: var(--dark-blue);
}

.label-maneuver i {
    color: var(--maneuver-blue);
}

.label-hp {
    color: var(--dark-blue);
}

.label-hp i {
    color: var(--hp-green);
}

.label-damage {
    color: var(--dark-blue);
}

.label-damage i {
    color: var(--damage-red);
}

/* ========================================
   CUSTOM COLOR DROPDOWN
   ======================================== */
.custom-color-dropdown {
    position: relative;
    width: 100%;
}

.color-dropdown-selected {
    width: 100%;
    display: flex;
    align-items: center;
    height: calc(1.5em + 0.75rem + 4px);
}

.color-bar-display {
    height: 100%;
    flex: 1;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.2);
    min-height: 20px;
}

.color-dropdown-options {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: var(--vintage-paper);
    border: 2px solid var(--steel-blue);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
}

.custom-color-dropdown.open .color-dropdown-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.color-option {
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    aspect-ratio: 1;
    border-radius: var(--border-radius);
    border: 2px solid rgba(0, 0, 0, 0.2);
}

@media (hover: hover) and (pointer: fine) {
    .color-option:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        border-color: var(--dark-blue);
    }
}

/* ========================================
   INSIGNIA SELECTION
   ======================================== */
.insignia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 12px;
}

.insignia-btn {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-bronze-plate);
    border-radius: var(--border-radius);
    border: 2px solid var(--vintage-bronze-border);
    color: var(--vintage-text-light);
    box-shadow: var(--btn-shadow-default);
    transition: var(--btn-transition);
    font-weight: bold;
    text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
    .insignia-btn:hover {
        background: var(--gradient-bronze-plate-hover);
        border-color: var(--vintage-bronze-border);
        box-shadow: var(--btn-shadow-hover-gold);
        transform: translateY(-1px);
    }
}

.btn-check:checked + .insignia-btn {
    background: var(--gradient-gold-active);
    border: 2px solid var(--vintage-gold-medium);
    color: var(--vintage-text-dark);
    box-shadow: var(--btn-active-glow);
    z-index: 2;
}

.insignia-icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    display: block;
}

/* ========================================
   MANEUVER DECK SELECTION
   ======================================== */
.maneuver-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 12px;
}

.maneuver-deck-card {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 5 / 7; /* Playing card proportions: 2.5" x 3.5" */
    border: 1px solid var(--dark-blue);
    border-radius: var(--border-radius);
    /* background-color: var(--aged-paper); */
    background: var(--gradient-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: bold;
    /* color: var(--dark-blue); */
    color: var(--vintage-text-light);
    font-family: 'Georgia', 'Times New Roman', serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .maneuver-deck-card:hover {
        border-color: var(--steel-blue);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
}

.btn-check:checked + .maneuver-deck-card {
    background: var(--gradient-gold-active);
    border: 2px solid var(--vintage-gold-medium);
    color: var(--vintage-text-dark);
    box-shadow: var(--btn-active-glow);
    z-index: 2;
}

/* ========================================
   SHUFFLED DECKS (K, XA, XB)
   Special styling for decks using draw/discard system
   ======================================== */
/* K, XA, XB decks use steel-blue background to differentiate from strategy-based decks
   (after the hover rule, same specificity: a shuffled deck keeps its border on hover) */
.maneuver-deck-card.maneuver-deck-card-shuffled {
    background: var(--gradient-blue-active);
    border-color: var(--maneuver-blue);
}

/* ========================================
   PLANES GRID
   ======================================== */
.planes-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
}

/* ========================================
   PLANE CARDS
   ======================================== */

/* Plane card container (mahogany wood frame) */
.plane-card {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    /* Mahogany wood with fine grain texture - matching modal */
    background:
        var(--texture-wood-grain-horizontal),
        var(--gradient-wood-mahogany);
    /* Slim dark wood frame border */
    border: var(--plane-card-border-width) solid var(--wood-frame-dark);
    border-radius: var(--border-radius-md);
    /* Varnished depth and shadow */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}

/* Plane card header (polished brass nameplate - LIGHT) */
.plane-card .card-body {
    background: var(--gradient-polished-brass);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: var(--plane-card-body-margin);
    padding: var(--plane-card-body-padding);
}

/* Each plane card's color: renderPlaneCard adds the class of its color index */
.plane-card-color-0 { --plane-color: var(--plane-color-0); }
.plane-card-color-1 { --plane-color: var(--plane-color-1); }
.plane-card-color-2 { --plane-color: var(--plane-color-2); }
.plane-card-color-3 { --plane-color: var(--plane-color-3); }
.plane-card-color-4 { --plane-color: var(--plane-color-4); }
.plane-card-color-5 { --plane-color: var(--plane-color-5); }
.plane-card-color-6 { --plane-color: var(--plane-color-6); }
.plane-card-color-7 { --plane-color: var(--plane-color-7); }
.plane-card-color-8 { --plane-color: var(--plane-color-8); }
.plane-card-color-9 { --plane-color: var(--plane-color-9); }
.plane-card-color-10 { --plane-color: var(--plane-color-10); }
.plane-card-color-11 { --plane-color: var(--plane-color-11); }
.plane-card-color-12 { --plane-color: var(--plane-color-12); }
.plane-card-color-13 { --plane-color: var(--plane-color-13); }
.plane-card-color-14 { --plane-color: var(--plane-color-14); }
.plane-card-color-15 { --plane-color: var(--plane-color-15); }

/* Color stripe on plane card header */
.plane-card .card-body.plane-card-body-stripe,
.plane-card.plane-card-eliminated .card-body {
    border-left: var(--plane-card-body-border-width) solid var(--plane-color);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 2px 0 4px rgba(0, 0, 0, 0.2);
}

/* Plane card body (dark reddish mahogany panel - DARK) */
.plane-card .card-footer {
    background: var(--plane-card-footer-bg);
    margin: var(--plane-card-footer-margin);
    padding: var(--plane-card-footer-padding);
    border: 1px solid var(--wood-frame-dark);
    border-radius: var(--border-radius-sm);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ========================================
   PLANE CARD HEADER ELEMENTS
   ======================================== */
.plane-insignia {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.plane-text-info {
    display: flex;
    flex-direction: column;
}

.plane-model {
    font-size: 1.44rem;
    font-weight: 700;
    /* Dark text on brass background - matching modal title */
    color: var(--vintage-text-dark);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3);
}

.pilot-name {
    font-size: 1.1rem;
    /* Dark text on brass background */
    color: var(--vintage-text-dark);
    margin: 5px 0 0 0;
    font-style: italic;
}

/* Eliminated plane or balloon: a grey veil over the card, the name struck through, the
   insignia faded. Not opacity on the card: a child can't be more opaque than its parent,
   so the buttons and their focus ring faded too, and the stats fell below 3:1 */
.plane-card.plane-card-eliminated {
    background:
        var(--eliminated-card-veil),
        var(--texture-wood-grain-horizontal),
        var(--gradient-wood-mahogany);
}

.plane-card.plane-card-eliminated .card-body {
    background: var(--eliminated-card-veil), var(--gradient-polished-brass);
}

.plane-model-eliminated {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.plane-insignia-faded {
    opacity: 0.4;
}

/* ========================================
   PLANE STATS
   ======================================== */
.plane-stats {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3);
}

.stat-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stat-group > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-item {
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1;
    min-width: 40px;
    text-align: center;
}

/* Stat Colors */
.stat-turns,
.icon-turns {
    color: var(--vintage-navy);
}

.stat-maneuver,
.icon-maneuver {
    color: var(--maneuver-blue);
}

.stat-damage,
.icon-damage {
    color: var(--damage-red);
}

.stat-hp,
.icon-hp {
    color: var(--hp-green);
}

.stat-damage-received {
    color: var(--damage-red);
}

.stat-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    min-width: 40px;
    height: 30px;
}

.damage-deck-icon {
    width: 54px;
    height: 54px;
}

/* ========================================
   TOKENS (Guns Jam, Smoke, Fire, Wounded)
   ======================================== */
.guns-jam-tokens,
.smoke-tokens,
.fire-tokens,
.wounded-pilot-tokens,
.damaged-engine-tokens {
    display: flex;
    gap: 8px;
    align-items: center;
}

.guns-jam-token,
.smoke-token,
.fire-token,
.wounded-pilot-token,
.damaged-engine-token {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guns-jam-token {
    position: relative;
}

.smoke-token,
.fire-token,
.wounded-pilot-token,
.damaged-engine-token {
    border: 3px solid var(--vintage-red);
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.3);
}

/* Wounded crew token wrapper for multi-crew planes with crew numbers */
.wounded-crew-token-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Crew number label (Roman numerals) below wounded crew token */
.crew-number-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--vintage-text-dark);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    font-family: 'Georgia', serif;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Guns Jam Token Icons */
.guns-jam-token .fa-crosshairs {
    position: absolute;
    font-size: 42px;
    color: #000;
}

.guns-jam-token .fa-xmark {
    position: absolute;
    font-size: 54px;
    color: var(--vintage-red);
    font-weight: bold;
}

/* Small Tokens (for casualty report) */
.guns-jam-token-small,
.boom-token-small {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.guns-jam-token-small .fa-crosshairs {
    position: absolute;
    font-size: 24px;
    color: #000;
}

.guns-jam-token-small .fa-xmark {
    position: absolute;
    font-size: 30px;
    color: var(--vintage-red);
    font-weight: bold;
}

.boom-token-small .fa-burst {
    font-size: 24px;
    color: var(--vintage-red);
}

/* ========================================
   MANEUVER CARDS
   ======================================== */
.maneuver-cards-container {
    position: relative;
    margin: 0px 0;
}

.maneuver-cards {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.maneuver-card-slot {
    width: 88px;
    height: 136px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--aged-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

.maneuver-card-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A revealed card is drawn (card-face.js): the shared background, the arrow of its
   maneuver and its deck and number, on the 480×720 card the images had */
@font-face {
    font-family: 'Besley';
    src: url('../vendor/besley/besley-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

.card-face {
    display: block;
    width: 100%;
    height: 100%;
}

.card-face-arrow {
    fill: none;
    stroke: var(--card-face-ink);
    stroke-width: 24px; /* ARROW_WIDTH in card-face.js */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-face-label {
    font-family: 'Besley', Georgia, serif;
    font-weight: 700;
    font-size: 133px; /* capitals about a seventh of the card height */
    word-spacing: -6px; /* a tight gap between deck and number: the longest label fits the card */
    text-anchor: middle;
    fill: var(--card-face-ink);
    stroke: var(--card-face-outline);
    stroke-width: 13px; /* half under the letters: a 6.5 outline */
    stroke-linejoin: round;
    paint-order: stroke;
}

/* Balloon Image Container (horizontal orientation, same size as maneuver card) */
.balloon-image-container {
    width: 136px;
    height: 88px;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--aged-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

.balloon-image-container img.balloon-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Maneuver Cards Overlay */
.maneuver-cards-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    /* backdrop-filter removed for performance - was causing 100-200ms delay on slow devices */
    z-index: 10;
}

.overlay-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--vintage-blue);
    color: var(--vintage-paper);
    padding: 12px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.overlay-message i {
    font-size: 1.2rem;
}

/* ========================================
   PLANE ACTION BUTTONS
   ======================================== */
.plane-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, auto));
    gap: 10px;
    width: 100%;
}

.plane-actions .btn {
    /* white-space: nowrap; */
    word-break: keep-all;
    overflow-wrap: normal;
    max-width: 300px;
}

/* ========================================
   PLAN TURN MODAL
   ======================================== */
.plane-color-indicator {
    width: 8px;
    height: 30px;
    background-color: var(--balloon-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.plan-turn-insignia {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* ========================================
   VINTAGE TOGGLE SWITCHES
   ======================================== */

/* ========================================
   VINTAGE TOGGLE SYSTEM
   ======================================== */
.vintage-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.vintage-toggle-housing {
    position: relative;
    background: var(--gradient-brass-housing);
    border: 2px solid var(--vintage-brass-border);
    border-radius: var(--border-radius-xl);
    padding: 12px 10px;
    box-shadow:
        var(--shadow-raised),
        var(--inset-highlight),
        var(--inset-shadow);
    width: var(--toggle-housing-size);
    height: var(--toggle-housing-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .vintage-toggle-housing:hover {
        box-shadow:
            0 6px 12px rgba(0, 0, 0, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* Four corner rivets for housing */
.vintage-toggle-housing::before,
.vintage-toggle-housing::after {
    content: '';
    position: absolute;
    width: var(--toggle-rivet-size);
    height: var(--toggle-rivet-size);
    background: var(--gradient-rivet);
    border-radius: 50%;
    top: 5px;
}

.vintage-toggle-housing::before {
    left: 5px;
}

.vintage-toggle-housing::after {
    right: 5px;
}

/* Each rivet draws the one below it too: a shadow --toggle-rivet-offset lower */
.vintage-toggle-housing::before,
.vintage-toggle-housing::after,
.toggle-label-plate::before,
.toggle-label-plate::after {
    box-shadow:
        inset 0 0.5px 0.5px rgba(0, 0, 0, 0.5),
        0 var(--toggle-rivet-offset) 0 0 var(--vintage-steel-light),
        0 var(--toggle-rivet-offset) 0 0.5px var(--vintage-steel-medium),
        inset 0 calc(var(--toggle-rivet-offset) + 0.5px) 0.5px rgba(0, 0, 0, 0.5);
}

/* Patina effect overlay */
.vintage-toggle-housing .patina-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(90, 107, 74, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(90, 107, 74, 0.1) 0%, transparent 35%);
    border-radius: var(--border-radius-lg);
    pointer-events: none;
}

/* Toggle base (mounting point) */
.vintage-toggle-base {
    position: relative;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #3A3A3A 0%, #2A2A2A 50%, #1A1A1A 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center mounting rivet */
.vintage-toggle-base::after {
    content: '';
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--vintage-steel-medium) 0%, var(--vintage-steel-dark) 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Toggle lever/stick */
.vintage-toggle-lever {
    position: absolute;
    width: 5px;
    height: 35px;
    background: var(--gradient-lever);
    border-radius: var(--border-radius-md);
    bottom: 10px;
    left: 50%;
    transform-origin: bottom center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

/* Bakelite handle on lever tip */
.toggle-lever-knob {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: var(--gradient-bakelite-knob);
    border: 2px solid var(--vintage-bakelite-border);
    border-radius: 50%;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4);
    overflow: visible;
}

/* Glare effect on knob */
.toggle-lever-knob::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    background: radial-gradient(ellipse at 40% 35%,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.1) 45%,
        transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(0.3px);
}

@media (hover: hover) and (pointer: fine) {
    .vintage-toggle-lever:hover .toggle-lever-knob {
        background: linear-gradient(135deg, #6A5446 0%, #5A4536 50%, #4A3526 100%);
    }
}

.vintage-toggle-lever:active .toggle-lever-knob {
    transform: translateX(-50%) scale(0.9);
}

/* Horizontal toggle lever positions */
.vintage-toggle-lever.horizontal {
    margin-left: -4px;
}

.vintage-toggle-lever.horizontal.position-left {
    transform: rotate(-60deg);
}

.vintage-toggle-lever.horizontal.position-right {
    transform: rotate(60deg);
}

/* Toggle wrapper for positioning */
.vintage-toggle-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Name plate / Data plate (non-interactive label) */
.toggle-title-plate {
    position: relative;
    background: var(--gradient-gunmetal-plate);
    border: 1px solid var(--vintage-gunmetal-border);
    border-radius: var(--border-radius-sm);
    padding: 4px 16px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--vintage-text-label);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    box-shadow:
        var(--shadow-very-subtle),
        var(--inset-highlight-very-subtle),
        var(--inset-shadow-flat);
    text-align: center;
    display: block;
    width: fit-content;
    margin: 0 auto 12px auto;
}

/* Rivets for title plate - flatter, simpler */
.toggle-title-plate::before,
.toggle-title-plate::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--gradient-rivet-dark);
    border-radius: 50%;
    top: 3px;
    box-shadow: inset 0 0.5px 0.5px rgba(0, 0, 0, 0.6);
}

.toggle-title-plate::before {
    left: 6px;
}

.toggle-title-plate::after {
    right: 6px;
}

/* Individual label plates */
.toggle-label-plates {
    display: flex;
    align-items: center;
    gap: var(--toggle-gap);
    margin-top: 0;
}

.toggle-label-plate {
    position: relative;
    background: var(--gradient-bronze-plate);
    border: 1px solid var(--vintage-bronze-border);
    border-radius: var(--border-radius-xl);
    padding: 6px 8px;
    width: var(--toggle-label-width);
    height: var(--toggle-label-height);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--vintage-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-shadow: none;
    box-shadow:
        var(--shadow-subtle),
        var(--inset-highlight-subtle),
        var(--inset-shadow-subtle);
    text-align: center;
    user-select: none;
    transition: var(--btn-transition);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    hyphens: auto;
}

/* Rivets for label plates */
.toggle-label-plate::before,
.toggle-label-plate::after {
    content: '';
    position: absolute;
    width: var(--toggle-rivet-size);
    height: var(--toggle-rivet-size);
    background: var(--gradient-rivet);
    border-radius: 50%;
    top: 5px;
    z-index: 1;
}

.toggle-label-plate::before {
    left: 7px;
}

.toggle-label-plate::after {
    right: 7px;
}

@media (hover: hover) and (pointer: fine) {
    .toggle-label-plate:hover {
        background: linear-gradient(135deg, #9B8A6F 0%, #8B7A5F 50%, #7B6A4F 100%);
        box-shadow:
            0 0 15px rgba(255, 180, 80, 0.3),
            0 3px 6px rgba(0, 0, 0, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }
}

.toggle-label-plate.active {
    background: var(--gradient-gold-active);
    color: var(--vintage-text-dark);
    border-color: var(--vintage-gold-medium);
    border-width: 2px;
    text-shadow: 0 1px 2px rgba(255, 200, 100, 0.3);
    opacity: 1;
    box-shadow: var(--btn-active-glow);
    transform: scale(1.03);
}

/* ========================================
   RESPONSIVE STYLES - Vintage Toggles
   ======================================== */

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .vintage-toggle-container {
        gap: 8px;
    }

    .toggle-title-plate {
        font-size: 11px;
        padding: 5px 10px;
        letter-spacing: 0.5px;
    }

    .toggle-label-plates {
        gap: 6px;
    }

    .toggle-label-plate {
        width: 70px;
        height: 50px;
        font-size: 12px;
        padding: 4px 6px;
        letter-spacing: 0.2px;
    }

    .vintage-toggle-housing {
        width: 50px;
        height: 50px;
        padding: 10px 8px;
    }

    .vintage-toggle-lever {
        width: 4px;
        height: 28px;
        bottom: 8px;
    }

    .toggle-lever-knob {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }

    .toggle-lever-knob::after {
        width: 6px;
        height: 6px;
    }

    /* Adjust rivet positions for smaller plates */
    .toggle-label-plate,
    .vintage-toggle-housing {
        --toggle-rivet-offset: 37px;
    }

    .toggle-label-plate::before {
        left: 6px;
    }

    .toggle-label-plate::after {
        right: 6px;
    }

    .vintage-toggle-housing::before {
        left: 4px;
    }

    .vintage-toggle-housing::after {
        right: 4px;
    }
}

/* Medium devices (tablets, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .toggle-label-plate {
        width: 85px;
        height: 55px;
        font-size: 14px;
    }

    .vintage-toggle-housing {
        width: 55px;
        height: 55px;
    }

    .vintage-toggle-lever {
        height: 32px;
    }

    .toggle-lever-knob {
        width: 13px;
        height: 13px;
    }

    .toggle-label-plates {
        gap: 7px;
    }
}

/* Large devices (desktops, 992px and up) - default styles apply */

/* ========================================
   DEAL DAMAGE MODAL
   ======================================== */
.damage-card-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.damage-card-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.damage-card-btn {
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Georgia', 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-sm);
    width: 100%;
}

/* ========================================
   JAM GUNS POSITION MODAL
   ======================================== */
.jam-guns-position-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* Wrapper for guns jammed tokens with position labels */
.guns-jam-token-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 2px;
}

/* Position badge - custom octagon shape */
.position-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
}

.position-badge .octagon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--vintage-red);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.position-badge .position-number {
    position: relative;
    z-index: 1;
    color: var(--vintage-paper);
    font-weight: 500;
    font-family: 'Times New Roman', serif;
    font-size: 2em;
    /* transform: translateY(-0.1em); */
}

/* Smaller badge for token labels */
.position-badge-small {
    width: 1.4em;
    height: 1.4em;
}

/* The number stays inside the octagon: light on red, never on the card behind it */
.position-badge-small .position-number {
    font-size: 15px;
    font-weight: bold;
}

/* ========================================
   CASUALTY REPORT MODAL
   ======================================== */
.casualty-details {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--dark-blue);
}

.casualty-details strong {
    font-weight: 600;
}

.damage-cards-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vintage-brass-border);
}

.damage-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.damage-card-display {
    position: relative;
    width: 60px;
    height: 84px;
    aspect-ratio: 5 / 7; /* Playing card proportions */
    border: 3px solid var(--vintage-red);
    border-radius: var(--border-radius);
    background-color: var(--vintage-paper);
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--dark-blue);
    font-family: 'Georgia', 'Times New Roman', serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.damage-value {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

/* ========================================
   CLOCK SELECTOR - RFC Military Watch
   ======================================== */
.clock-selector {
    max-width: 300px;
    margin: 0 auto;
    position: relative;
}

.clock-face {
    width: 100%;
    height: auto;
    cursor: pointer;
    user-select: none;
    /* Drop-shadow removed for performance - was causing 10-15ms delay */
}

.clock-face circle[r="95"] {
    fill: #FAFAF8;
    stroke: var(--vintage-gold-dark);
    stroke-width: 4;
}

/* Clock Hour Sectors */
@media (hover: hover) and (pointer: fine) {
    .hour-sector:hover {
        fill: rgba(232, 232, 224, 0.3);
    }
}

.hour-sector.selected {
    fill: rgba(232, 197, 112, 0.5);
    /* Simplified from 3 drop-shadows to 1 for performance (30-50ms improvement) */
    filter: drop-shadow(0 0 8px rgba(255, 180, 80, 0.6));
}

/* Clock Hour Text */
.clock-hour.selected .hour-text {
    fill: var(--vintage-text-dark);
    font-weight: 900;
    /* Drop-shadow removed for performance */
}

.hour-text {
    /* No transition - instant visual feedback */
    font-size: 20px;
    font-weight: 900;
    fill: var(--clock-number);
    font-family: 'Arial Black', 'Arial', sans-serif;
}

/* Clock ticks, radial lines and center hub */
.clock-tick-hour {
    stroke: var(--clock-tick-hour);
    stroke-width: 5;
}

.clock-tick-minute {
    stroke: var(--clock-tick-minute);
    stroke-width: 1;
}

.hour-radial-line {
    stroke: var(--clock-radial-line);
    stroke-width: 1;
    opacity: 0.3;
}

.clock-hub {
    fill: var(--clock-hub);
    stroke: var(--clock-hub-edge);
    stroke-width: 1;
}

.clock-hub-center {
    fill: var(--clock-hub-center);
}

/* Clock Radial Lines */
.hour-radial-line.selected {
    stroke: var(--vintage-gold-medium);
    stroke-width: 2;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 180, 80, 0.5));
}

/* Clock Indicator Hand */
#selectedIndicator {
    stroke: var(--clock-hand);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ========================================
   SCOREBOARD - 1920s Vintage Style
   ======================================== */
.scoreboard-container {
    display: flex;
    justify-content: center;
    margin: 20px auto auto;
}

.scoreboard {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Mahogany wood with fine grain texture */
    background:
        var(--texture-wood-grain-horizontal),
        var(--gradient-wood-mahogany);

    /* Dark wood frame border */
    border: 5px solid var(--wood-frame-dark);
    border-radius: var(--border-radius-md);
    padding: 12px 12px;

    /* Varnished depth and shadow */
    box-shadow:
        0 0 0 1px var(--wood-frame-edge),
        0 0 0 2px var(--wood-frame-dark),
        0 12px 36px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(139, 90, 60, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.15);
    position: relative;
}

.scoreboard::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(139, 90, 60, 0.3);
    border-radius: var(--border-radius-sm);
    pointer-events: none;
}

.scoreboard-display {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Almost black background with subtle texture */
    background: linear-gradient(180deg, #0a0805 0%, #000000 100%);

    /* Inset panel effect */
    border: 2px solid var(--wood-frame-dark);
    border-radius: var(--border-radius-sm);
    padding: 12px 20px;

    /* Deep recessed panel depth */
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.9),
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(139, 90, 60, 0.3);
}

.score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.team-label {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.score-red .team-label {
    color: #d4654a;
}

.score-blue .team-label {
    color: #5a8eb5;
}

.score-value {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 72px;
    font-weight: bold;
    line-height: 0.8;
    text-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 2px 4px rgba(0, 0, 0, 0.8);
    min-width: 90px;
    text-align: center;
}

.score-red .score-value {
    color: #ff6b4a;
}

.score-blue .score-value {
    color: #6ab3ff;
}

/* Turn Counter (replaces divider) */
.turn-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    /* Gold numbers on the dark display (a light brass panel behind them would be unreadable) */
    border-radius: var(--border-radius-sm);
    box-shadow:
        inset 0 1px 5px var(--vintage-gold-dark);
}

.turn-label {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 12px;
    font-weight: bold;
    color: var(--vintage-gold-light);
    letter-spacing: 1px;
}

.turn-value {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    color: var(--vintage-gold-light);
    text-shadow:
        0 0 3px currentColor,
        0 0 6px currentColor;
    min-width: 30px;
    text-align: center;
    transition: transform 0.3s ease;
}

/* Turn counter increment animation (keyframes below, shared with the plane's turn stat) */
.turn-increment-animation {
    animation: turnIncrement 0.4s ease-in-out;
}

.score-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.score-btn {
    width: 64px;
    height: 42px;
    /* Bronze plate gradient */
    background: var(--gradient-bronze-plate);
    border: 1px solid var(--vintage-bronze-border);
    border-radius: var(--border-radius);
    color: var(--vintage-text-light);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--btn-transition);
    touch-action: manipulation;
    text-transform: uppercase;
    box-shadow: var(--btn-shadow-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-btn:active {
    background: var(--gradient-gold-active);
    border: 2px solid var(--vintage-gold-medium);
    color: var(--vintage-text-dark);
    box-shadow: var(--btn-shadow-active-gold);
    transform: scale(1.02);
}

.score-btn i {
    pointer-events: none;
}

/* Phones: the scoreboard fits the screen width (no sideways scrolling, WCAG 1.4.10) */
@media (max-width: 479.98px) {
    .scoreboard {
        gap: 6px;
        padding: 8px;
    }

    .scoreboard-display {
        gap: 6px;
        padding: 8px;
    }

    .score-btn {
        width: 44px;
        height: 40px;
    }

    .score-value {
        font-size: 56px;
        min-width: 64px;
    }

    .turn-counter {
        padding: 6px 8px;
    }
}

/* ========================================
   MODAL CONTENT TEXT (Reusable)
   ======================================== */
.modal-content-text {
    overflow-y: auto;
}

.modal-content-text .h4 {
    color: var(--dark-blue);
    margin-top: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.modal-content-text .h5 {
    margin-top: 15px;
    font-weight: 600;
}

.modal-content-text ul {
    line-height: 1.8;
}

.modal-content-text p,
.modal-content-text li {
    color: var(--dark-blue);
}

/* Modal content links - dark color for contrast on wood-ash background */
.modal-content-text a {
    color: #241810;
}

/* Empty State links - light color for contrast on blue gradient background */
.empty-state a {
    color: #FFF9E6;
}

/* Default link color fallback */
a {
    color: var(--vintage-gold-medium);
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Token Animations */
@keyframes tokenAppear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tokenDisappear {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    30% {
        transform: scale(1.4);
    }
    90% {
        opacity: 0.2;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.guns-jam-token.token-appearing,
.smoke-token.token-appearing,
.fire-token.token-appearing,
.wounded-pilot-token.token-appearing {
    /* "both": a token waiting for its staggered start (animation-delay) stays hidden */
    animation: tokenAppear var(--guns-jam-token-appear-duration) ease-out both;
}

.guns-jam-token.token-disappearing,
.smoke-token.token-disappearing,
.fire-token.token-disappearing {
    animation: tokenDisappear var(--guns-jam-token-disappear-duration) ease-in infinite;
}

/* Card Flip Animation */
@keyframes cardFlip {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

.maneuver-card-slot.flipping {
    animation: cardFlip 0.6s ease-in-out;
}

.maneuver-card-slot.flipping-quick {
    animation: cardFlip 0.35s ease-in-out;
}

/* Damage Impact Animation */
@keyframes damageImpact {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        filter: brightness(1);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-2px, 0) rotate(-2deg);
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(220, 53, 69, 0.8));
    }
    20%, 40%, 60%, 80% {
        transform: translate(2px, 0) rotate(2deg);
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(220, 53, 69, 0.8));
    }
    25%, 75% {
        filter: brightness(2) drop-shadow(0 0 12px rgba(255, 0, 0, 1));
    }
}

.stat-group.damage-hit {
    animation: damageImpact 0.8s ease-in-out;
}

/* Turn Counter Animation: the scoreboard's turn counter and the turn stat on plane cards */
@keyframes turnIncrement {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.15);
        filter: brightness(1.4) drop-shadow(0 0 8px rgba(44, 64, 87, 0.8));
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.stat-group.turn-increment {
    animation: turnIncrement 1.8s ease-in-out;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
h6 {
    font-weight: bold;
}

/* Empty State */
.empty-state {
    text-align: justify;
    color: var(--vintage-paper);
    padding: 10px 10px;
    font-size: 1rem;
    max-width: 600px;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

/* ========================================
   BUY ME A COFFEE BUTTON - Glowing Call-to-Action
   ======================================== */
.bmc-button {
    display: inline-block;
    padding: 0px 0px;
    border-radius: var(--border-radius-lg);
    transition: all 0.3s ease;
    text-decoration: none;
    /* Subtle ambient glow */
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 1);
}

/* Focus state for keyboard navigation */
.bmc-button:focus,
.bmc-button:focus-visible {
    outline: 3px solid var(--vintage-gold-light);
    outline-offset: 4px;
    box-shadow:
        4px 4px 4px rgba(0, 0, 0, 1),
        0 0 0 0.2rem rgba(232, 197, 112, 0.4);
}

/* Hover effects only on devices with hover capability (desktop) */
@media (hover: hover) and (pointer: fine) {
    .bmc-button:hover {
        /* Enhanced glow on hover */
        box-shadow:
            0 6px 12px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 221, 87, 0.5),
            0 0 60px rgba(255, 221, 87, 0.3);
        transform: translateY(-3px) scale(1.05);
    }

    .bmc-button:hover img {
        filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 221, 87, 0.6));
    }
}

/* Active state for all devices (touch and click) */
.bmc-button:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(255, 221, 87, 0.4);
}

.bmc-button img {
    height: 60px;
    display: block;
    transition: filter 0.3s ease;
}

/* ========================================
   ACCESSIBILITY (WCAG 2.1 AA)
   ======================================== */

/* Keyboard focus is always visible (2.4.7): a ring around the focused control, 3:1
   against what is around it (1.4.11) — gold on the dark surfaces, dark on the light ones.
   Radio buttons styled as buttons (.btn-check) show it on their label. */
.modal-header,
.modal-body,
.plane-card .card-body {
    --focus-ring-color: var(--focus-ring-color-on-light);
}

:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.btn-check:focus-visible + .maneuver-deck-card,
.btn-check:focus-visible + .insignia-btn {
    outline: 3px solid var(--focus-ring-color) !important;
    outline-offset: 2px;
}

/* Plan Turn toggles: the radio button is hidden, its lever shows the focus */
.toggle-label-plates:has(input:focus-visible) .vintage-toggle-housing {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 3px;
}

/* Clock sectors are SVG radio buttons: the focused hour gets an edge in the ring color */
.hour-sector:focus {
    outline: none;
}

.hour-sector:focus-visible {
    outline: none !important;
    stroke: var(--focus-ring-color);
    stroke-width: 3;
}

/* The next maneuver card to reveal is a button that looks like the card */
.maneuver-card-button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.maneuver-card-button img {
    display: block;
}

/* The card slot clips what is outside it: the focus ring goes inside the card, on its
   light back */
.maneuver-card-button {
    --focus-ring-color: var(--focus-ring-color-on-light);
}

.maneuver-card-button:focus-visible {
    outline-offset: -5px;
}

/* The balloon's damage resistance: a narrow -/+ field */
.hp-input-group {
    max-width: 200px;
}

/* Shown while the game cannot be saved: over everything, an open modal too */
.save-warning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1090;
}

/* A planned card that cannot be revealed yet: dimmed, so the next card stands out */
.maneuver-card-locked {
    filter: grayscale(0.5) brightness(0.6);
}

/* Players who ask for less motion get none (2.3.3): no shaking, flipping or pulsing */
@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;
    }
}