:root {
  --europa-borders-color: var(--europa-color-border);
  --europa-borders-style: solid;
  --europa-borders-width: 1px;
  --europa-color-accent: #f59e0b;
  --europa-color-accent-active: #d97706;
  --europa-color-accent-glow: rgba(245, 158, 11, 0.08);
  --europa-color-accent-glow-strong: rgba(245, 158, 11, 0.3);
  --europa-color-banner: #d97706;
  --europa-color-blue: #2563eb;
  --europa-color-border: #374151;
  --europa-color-capture-effect: rgba(16, 185, 129, 0.55);
  --europa-color-card-hover-border: #f59e0b;
  --europa-color-chip-bg: #111827;
  --europa-color-chip-text: #f9fafb;
  --europa-color-city: #fbbf24;
  --europa-color-city-glow: #ff6b6b;
  --europa-color-city-glow-strong: #ff4444;
  --europa-color-combat-effect: rgba(239, 68, 68, 0.55);
  --europa-color-divider: #374151;
  --europa-color-error: #dc6966;
  --europa-color-error-active: #ad5553;
  --europa-color-error-bg: #32191a;
  --europa-color-error-border: #5b3231;
  --europa-color-error-hover: #e89590;
  --europa-color-error-text: #fca5a5;
  --europa-color-focus-ring: #ffffff;
  --europa-color-generic-effect: rgba(148, 163, 184, 0.45);
  --europa-color-green: #059669;
  --europa-color-green-glow: rgba(5, 150, 105, 0.5);
  --europa-color-info: #dca12e;
  --europa-color-info-active: #ad872f;
  --europa-color-info-bg: #302311;
  --europa-color-info-border: #5b461d;
  --europa-color-info-hover: #e8c35e;
  --europa-color-overlay-soft: rgba(26, 34, 51, 0.6);
  --europa-color-overlay-strong: rgba(26, 34, 51, 0.75);
  /* page-bg: the outermost page background (lobby, manual pages) */
  --europa-color-page-bg: #0b0f19;
  --europa-color-pipe-downhill: #059669;
  --europa-color-pipe-flat: #f59e0b;
  --europa-color-pipe-outline: rgba(0, 0, 0, 0.7);
  --europa-color-pipe-stalled: #9ca3af;
  --europa-color-pipe-uphill: #dc2626;
  --europa-color-player-color1: #dc2626;
  --europa-color-player-color2: #2563eb;
  --europa-color-player-color3: #059669;
  --europa-color-player-color4: #d97706;
  --europa-color-red: #dc2626;
  --europa-color-success: #059669;
  --europa-color-success-active: #1b7154;
  --europa-color-success-bg: #11221d;
  --europa-color-success-border: #173f31;
  --europa-color-success-hover: #3aa07a;
  --europa-color-surface: #111827;
  --europa-color-surface-raised: #1f2937;
  --europa-color-text-link: #f59e0b;
  --europa-color-text-muted: #9ca3af;
  --europa-color-text-primary: #f9fafb;
  --europa-color-text-secondary: #e5e7eb;
  /* void-bg: the board/canvas recessed background (distinct from page-bg) */
  --europa-color-void-bg: #1a2233;
  --europa-color-void-gradient-center: #1e2940;
  --europa-color-void-gradient-edge: #151c2a;
  --europa-color-warning: #dcaa37;
  --europa-color-warning-active: #ad872f;
  --europa-color-warning-bg: #312512;
  --europa-color-warning-border: #5b4920;
  --europa-color-warning-hover: #e8c35e;
  --europa-color-water: #1d4ed8;
  --europa-color-water-deep: #1e3a5f;
  --europa-color-water-shallow: #4a90d9;
  --europa-control-height-default: 32px;
  --europa-control-height-lg: 40px;
  --europa-control-height-sm: 24px;
  --europa-control-height-xs: 16px;
  --europa-focus-ring-color: #ffffff;
  --europa-focus-ring-dark-color: #111827;
  --europa-focus-ring-light-color: #ffffff;
  --europa-focus-ring-offset: 2px;
  --europa-focus-ring-style: solid;
  --europa-focus-ring-width: 2px;
  --europa-motion-duration: 120ms;
  --europa-motion-duration-ms: 120;
  --europa-motion-easing: ease;
  --europa-motion-easing-in-out: ease-in-out;
  --europa-motion-easing-linear: linear;
  --europa-motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --europa-motion-spin-duration: 1.2s;
  --europa-motion-transition-default: 120ms;
  --europa-motion-transition-fast: 80ms;
  --europa-motion-transition-slow: 200ms;
  --europa-motion-transition-spring: 300ms;
  --europa-radii-card: 6px;
  --europa-radii-input: 4px;
  --europa-radii-pill: 999px;
  --europa-radii-plate: 8px;
  --europa-radii-sm: 3px;
  --europa-shadows-board: inset 0 1px 4px rgba(0, 0, 0, 0.3);
  --europa-shadows-card-active: 0 2px 4px rgba(0, 0, 0, 0.25);
  --europa-shadows-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
  --europa-shadows-hud: 0 2px 8px rgba(0, 0, 0, 0.25);
  --europa-shadows-modal: 0 8px 32px rgba(0, 0, 0, 0.4);
  --europa-shadows-plate: 0 2px 8px rgba(0, 0, 0, 0.2);
  --europa-spacing-lg: 1rem;
  --europa-spacing-md: 0.75rem;
  --europa-spacing-sm: 0.5rem;
  --europa-spacing-xl: 1.25rem;
  --europa-spacing-xs: 0.25rem;
  --europa-typography-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --europa-typography-font-stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --europa-typography-heading: 1.5rem;
  --europa-typography-line-height-normal: 1.2;
  --europa-typography-line-height-relaxed: 1.4;
  --europa-typography-size-base: 0.9rem;
  --europa-typography-size-chip: 11px;
  --europa-typography-size-lg: 1.05rem;
  --europa-typography-size-md: 0.95rem;
  --europa-typography-size-reserve: 9px;
  --europa-typography-size-sm: 0.85rem;
  --europa-typography-size-xl: 1.1rem;
  --europa-typography-size-xs: 0.75rem;
  --europa-typography-size2xl: 1.2rem;
  --europa-typography-size3xl: 1.5rem;
  --europa-typography-subheading: 1.2rem;
  --europa-typography-tracking-normal: 0;
  --europa-typography-tracking-tight: -0.025em;
  --europa-typography-tracking-wide: 0.05em;
}

/**
 * Component and layout catalog for the shareable design system (spec 012,
 * FR-006 / FR-007). Each declaration composes only Europa design tokens
 * for color/spacing/radii/border/shadow/typography/focus — no hex/rgb
 * literals outside the :root block emitted by scripts/build-css.ts.
 *
 * Sections are ordered deterministically (base → surfaces → buttons → HUD →
 * lobby → badge/chip → modal → grid → typography → focus/motion → waiting →
 * documentation prose) so the concatenated dist/design.css is reproducible.
 */

/* ── 1. Base / layout containers ──────────────────────────────────────── */
.europa-page {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--europa-spacing-lg);
    padding: var(--europa-spacing-lg);
    font-family: var(--europa-typography-font-stack);
    background-color: var(--europa-color-page-bg);
    color: var(--europa-color-text-secondary);
    line-height: var(--europa-typography-line-height-relaxed);
}

.europa-stack {
    display: flex;
    flex-direction: column;
    gap: var(--europa-spacing-md);
}

.europa-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--europa-spacing-lg);
}

/* centered flex-wrap board layout (page-level composition) */
.europa-board-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    gap: var(--europa-spacing-lg);
    padding: var(--europa-spacing-lg);
}

/* ── 2. Surfaces — card / plate ───────────────────────────────────────── */
.europa-card {
    padding: var(--europa-spacing-md);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-card);
    box-shadow: var(--europa-shadows-plate);
}

.europa-plate {
    padding: var(--europa-spacing-md);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-plate);
    box-shadow: var(--europa-shadows-plate);
}

/* ── 3. Buttons — primary / secondary / ghost + states ─────────────────── */
.europa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--europa-spacing-xs);
    padding: var(--europa-spacing-xs) var(--europa-spacing-sm);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-input);
    background-color: var(--europa-color-surface-raised);
    color: var(--europa-color-text-primary);
    font-family: var(--europa-typography-font-stack);
    font-size: var(--europa-typography-size-sm);
    line-height: var(--europa-typography-line-height-normal);
    cursor: pointer;
}

.europa-button--primary {
    background-color: var(--europa-color-accent);
    color: var(--europa-color-surface);
    border-color: var(--europa-color-accent);
}

.europa-button--secondary {
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-primary);
    border-color: var(--europa-color-border);
}

.europa-button--ghost {
    background-color: transparent;
    color: var(--europa-color-text-primary);
    border-color: var(--europa-color-border);
}

.europa-button:disabled,
.europa-button--primary:disabled,
.europa-button--secondary:disabled,
.europa-button--ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.europa-button:focus-visible,
.europa-button--primary:focus-visible,
.europa-button--secondary:focus-visible,
.europa-button--ghost:focus-visible {
    outline: var(--europa-focus-ring-width) var(--europa-focus-ring-style) var(--europa-focus-ring-color);
    outline-offset: var(--europa-focus-ring-offset);
}

/* ── 3b. Button state variants — success / warning / error / info ──────── */
.europa-button--success {
    background-color: var(--europa-color-success);
    color: var(--europa-color-surface);
    border-color: var(--europa-color-success);
}

.europa-button--success:hover {
    background-color: var(--europa-color-success-hover);
    border-color: var(--europa-color-success-hover);
}

.europa-button--success:active {
    background-color: var(--europa-color-success-active);
    border-color: var(--europa-color-success-active);
}

.europa-button--warning {
    background-color: var(--europa-color-warning);
    color: var(--europa-color-surface);
    border-color: var(--europa-color-warning);
}

.europa-button--warning:hover {
    background-color: var(--europa-color-warning-hover);
    border-color: var(--europa-color-warning-hover);
}

.europa-button--warning:active {
    background-color: var(--europa-color-warning-active);
    border-color: var(--europa-color-warning-active);
}

.europa-button--error {
    background-color: var(--europa-color-error);
    color: var(--europa-color-surface);
    border-color: var(--europa-color-error);
}

.europa-button--error:hover {
    background-color: var(--europa-color-error-hover);
    border-color: var(--europa-color-error-hover);
}

.europa-button--error:active {
    background-color: var(--europa-color-error-active);
    border-color: var(--europa-color-error-active);
}

.europa-button--info {
    background-color: var(--europa-color-info);
    color: var(--europa-color-surface);
    border-color: var(--europa-color-info);
}

.europa-button--info:hover {
    background-color: var(--europa-color-info-hover);
    border-color: var(--europa-color-info-hover);
}

.europa-button--info:active {
    background-color: var(--europa-color-info-active);
    border-color: var(--europa-color-info-active);
}

.europa-button--success:focus-visible,
.europa-button--warning:focus-visible,
.europa-button--error:focus-visible,
.europa-button--info:focus-visible {
    outline: var(--europa-focus-ring-width) var(--europa-focus-ring-style) var(--europa-focus-ring-color);
    outline-offset: var(--europa-focus-ring-offset);
}

/* ── 3c. Button size modifiers — sm / lg (control-height tokens) ──────── */
.europa-button--sm {
    min-height: var(--europa-control-height-sm);
}

.europa-button--lg {
    min-height: var(--europa-control-height-lg);
}

/* ── 4. HUD chrome ─────────────────────────────────────────────────────── */
.europa-hud {
    display: flex;
    flex-direction: column;
    gap: var(--europa-spacing-xs);
    min-width: 12rem;
    padding: var(--europa-spacing-md) var(--europa-spacing-lg);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border-radius: var(--europa-radii-card);
    font-size: var(--europa-typography-size-base);
    line-height: var(--europa-typography-line-height-normal);
}

.europa-hud__title {
    margin: 0;
    font-size: var(--europa-typography-size-lg);
    color: var(--europa-color-text-primary);
    line-height: var(--europa-typography-line-height-normal);
}

.europa-hud__version {
    color: var(--europa-color-text-muted);
    font-size: var(--europa-typography-size-xs);
}

.europa-hud__section {
    display: flex;
    flex-direction: column;
    gap: var(--europa-spacing-xs);
}

/* ── 5. Banners ────────────────────────────────────────────────────────── */
.europa-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: var(--europa-spacing-sm) var(--europa-spacing-lg);
    background-color: var(--europa-color-banner);
    color: var(--europa-color-surface);
    font-family: var(--europa-typography-font-stack);
    font-size: var(--europa-typography-size-base);
    font-weight: 700;
    text-align: center;
    line-height: var(--europa-typography-line-height-normal);
}

/* Variant modifiers — calmer blue for status (polite), urgent red for alert
   (assertive). Background colors use existing semantic tokens; text color
   stays --europa-color-surface for sufficient contrast on both fills. */
.europa-banner--status {
    background-color: var(--europa-color-info);
}

.europa-banner--alert {
    background-color: var(--europa-color-error);
}

/* ── 6. Lobby chrome — page / grid / card / row / badge / empty / superseded ─ */
.europa-lobby {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--europa-spacing-lg);
    padding: var(--europa-spacing-md) var(--europa-spacing-lg);
}

.europa-lobby__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--europa-spacing-lg);
    align-items: start;
}

.europa-lobby__card {
    padding: var(--europa-spacing-md) var(--europa-spacing-lg);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-plate);
    box-shadow: var(--europa-shadows-plate);
}

.europa-lobby__card--wide {
    grid-column: 1 / -1;
}

.europa-lobby__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--europa-spacing-sm);
    padding: var(--europa-spacing-sm) var(--europa-spacing-md);
    background-color: var(--europa-color-void-bg);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-card);
    color: var(--europa-color-text-secondary);
    font-size: var(--europa-typography-size-sm);
}

.europa-lobby__badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--europa-spacing-xs);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-accent);
    border-radius: var(--europa-radii-pill);
    color: var(--europa-color-city);
    font-size: var(--europa-typography-size-xs);
    font-weight: 700;
    line-height: var(--europa-typography-line-height-normal);
}

.europa-lobby__row-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--europa-spacing-xs);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-accent);
    border-radius: var(--europa-radii-pill);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-city);
    font-size: var(--europa-typography-size-xs);
    font-weight: 700;
}

.europa-lobby__empty {
    margin: 0;
    padding: var(--europa-spacing-md);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-card);
    color: var(--europa-color-text-muted);
    font-size: var(--europa-typography-size-sm);
    text-align: center;
}

.europa-lobby__superseded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--europa-spacing-sm);
    padding: var(--europa-spacing-md) var(--europa-spacing-lg);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-banner);
    border-radius: var(--europa-radii-plate);
    font-size: var(--europa-typography-size-sm);
}

/* ── 7. Badge / chip ───────────────────────────────────────────────────── */
.europa-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2ch;
    padding: var(--europa-spacing-xs) var(--europa-spacing-sm);
    background-color: var(--europa-color-chip-bg);
    color: var(--europa-color-chip-text);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-pill);
    font-size: var(--europa-typography-size-chip);
    font-weight: 700;
    line-height: var(--europa-typography-line-height-normal);
    text-align: center;
}

.europa-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--europa-spacing-xs);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-muted);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-pill);
    font-size: var(--europa-typography-size-xs);
    font-weight: 700;
    line-height: var(--europa-typography-line-height-normal);
}

/* ── 7b. Fog Overlay — semi-transparent fog-of-war indicator ───── */
.europa-fog-overlay {
    position: absolute;
    inset: 0;
    background: var(--europa-color-overlay-soft);
    pointer-events: none;
}

/* ── 8. Modal — backdrop / dialog / title / body / actions / button ───── */
.europa-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--europa-color-overlay-strong);
}

.europa-modal {
    max-width: 24rem;
    width: 100%;
    padding: var(--europa-spacing-xl) var(--europa-spacing-lg);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-plate);
    box-shadow: var(--europa-shadows-modal);
}

.europa-modal__dialog {
    max-width: 24rem;
    width: 100%;
    padding: var(--europa-spacing-xl) var(--europa-spacing-lg);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-secondary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-plate);
    box-shadow: var(--europa-shadows-modal);
}

.europa-modal__title {
    margin: 0 0 var(--europa-spacing-sm);
    font-size: var(--europa-typography-size-xl);
    color: var(--europa-color-text-primary);
    line-height: var(--europa-typography-line-height-normal);
    font-weight: 700;
}

.europa-modal__body {
    margin: 0 0 var(--europa-spacing-lg);
    font-size: var(--europa-typography-size-base);
    color: var(--europa-color-text-secondary);
    line-height: var(--europa-typography-line-height-relaxed);
}

.europa-modal__actions {
    display: flex;
    gap: var(--europa-spacing-sm);
    justify-content: flex-end;
}

.europa-modal__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--europa-spacing-xs) var(--europa-spacing-sm);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-input);
    background-color: var(--europa-color-surface-raised);
    color: var(--europa-color-text-primary);
    font-size: var(--europa-typography-size-sm);
    line-height: var(--europa-typography-line-height-normal);
    cursor: pointer;
}

.europa-modal__button:focus-visible {
    outline: var(--europa-focus-ring-width) var(--europa-focus-ring-style) var(--europa-focus-ring-color);
    outline-offset: var(--europa-focus-ring-offset);
}

/* ── 9. Grid — lobby grid and board-adjacent stacks ───────────────────── */
.europa-grid {
    display: grid;
    gap: var(--europa-spacing-md);
    align-items: start;
}

.europa-grid--sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--europa-spacing-sm);
}

.europa-grid--wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--europa-spacing-md);
}

/* ── 10. Typography — heading / muted / meta / mono ────────────────────── */
.europa-typography--heading {
    font-family: var(--europa-typography-font-stack);
    font-size: var(--europa-typography-size3xl);
    color: var(--europa-color-text-primary);
    line-height: var(--europa-typography-line-height-normal);
    font-weight: 700;
}

.europa-typography--muted {
    color: var(--europa-color-text-muted);
    font-size: var(--europa-typography-size-sm);
    line-height: var(--europa-typography-line-height-relaxed);
}

.europa-typography--meta {
    color: var(--europa-color-text-muted);
    font-size: var(--europa-typography-size-xs);
    line-height: var(--europa-typography-line-height-normal);
}

.europa-typography--mono {
    font-family: var(--europa-typography-font-mono);
    font-size: var(--europa-typography-size-sm);
    color: var(--europa-color-text-secondary);
    line-height: var(--europa-typography-line-height-normal);
}

/* ── 11. Focus / motion a11y gates (FR-016, G-07) ──────────────────────── */
*:focus-visible,
.europa-focus-ring {
    outline: var(--europa-focus-ring-width) var(--europa-focus-ring-style) var(--europa-color-focus-ring);
    outline-offset: var(--europa-focus-ring-offset);
}

.europa-focus-ring:focus-visible {
    outline: var(--europa-focus-ring-width) var(--europa-focus-ring-style) var(--europa-focus-ring-color);
    outline-offset: var(--europa-focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

.europa-waiting--reduced,
.europa-waiting--reduced *,
.europa-waiting--reduced *::before,
.europa-waiting--reduced *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
}

/* ── 12. Waiting overlay — plate / spinner / text ─────────────────────── */
/* Structural styles for the waiting-family (spec 014, D-6 gap). The root
   .europa-waiting positioning (absolute, inset, z-index, background) is
   game-specific and lives in the host's consumer-local stylesheet. These
   rules provide the shared visual language so <europa-waiting> works in
   the manual, non-React toolchains, and any host. */
.europa-waiting__plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--europa-spacing-md);
    min-width: 280px;
    padding: var(--europa-spacing-lg) var(--europa-spacing-xl);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-primary);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-plate);
}

/* Subtle spinner ring (decorative; aria-hidden in the component). */
.europa-waiting__pulse {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--europa-color-border);
    border-top-color: var(--europa-color-accent);
    animation: europa-spin var(--europa-motion-spin-duration) var(--europa-motion-easing-linear) infinite;
}

@keyframes europa-spin {
    to {
        transform: rotate(360deg);
    }
}

.europa-waiting__text {
    margin: 0;
    font-size: var(--europa-typography-size-md);
    font-weight: 600;
}

/* ── 13. Documentation prose (scoped under .europa-page) — T-030 ─────────── */
/* Styles markdown-rendered elements for the player manual (spec 012, T-030).
   Every declaration uses ONLY --europa-* tokens — no hex/rgb literals. These
   rules are scoped to .europa-page so they never affect the console, which
   does not wrap its chrome in .europa-page (it uses europa-lobby/europa-hud/
   europa-card/etc. directly). The manual body carries .europa-page via
   docs/manual/_layouts/default.html, so every manual page shares the console's
   dark-slate design language for headings, paragraphs, tables, lists, code,
   blockquotes, links, and rules. */
.europa-page h1,
.europa-page h2,
.europa-page h3 {
    color: var(--europa-color-text-primary);
    font-family: var(--europa-typography-font-stack);
    font-weight: 700;
    line-height: var(--europa-typography-line-height-normal);
    margin: 0 0 var(--europa-spacing-md);
}

.europa-page h1 {
    font-size: var(--europa-typography-size3xl);
}

.europa-page h2 {
    font-size: var(--europa-typography-size2xl);
}

.europa-page h3 {
    font-size: var(--europa-typography-size-xl);
}

.europa-page p {
    color: var(--europa-color-text-secondary);
    line-height: var(--europa-typography-line-height-relaxed);
    margin: 0 0 var(--europa-spacing-md);
}

.europa-page ul,
.europa-page ol {
    color: var(--europa-color-text-secondary);
    line-height: var(--europa-typography-line-height-relaxed);
    margin: 0 0 var(--europa-spacing-md);
    padding-left: var(--europa-spacing-lg);
}

.europa-page li {
    margin: 0 0 var(--europa-spacing-xs);
}

.europa-page a {
    color: var(--europa-color-accent);
    text-decoration: underline;
}

.europa-page a:hover {
    color: var(--europa-color-city);
}

.europa-page code {
    font-family: var(--europa-typography-font-mono);
    font-size: var(--europa-typography-size-sm);
    background-color: var(--europa-color-surface-raised);
    color: var(--europa-color-text-primary);
    padding: var(--europa-spacing-xs);
    border-radius: var(--europa-radii-input);
}

.europa-page pre {
    font-family: var(--europa-typography-font-mono);
    background-color: var(--europa-color-void-bg);
    color: var(--europa-color-text-primary);
    padding: var(--europa-spacing-md);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    border-radius: var(--europa-radii-input);
    overflow-x: auto;
    margin: 0 0 var(--europa-spacing-md);
}

.europa-page pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.europa-page blockquote {
    margin: 0 0 var(--europa-spacing-md);
    padding: var(--europa-spacing-sm) var(--europa-spacing-md);
    border-left: var(--europa-spacing-xs) var(--europa-borders-style) var(--europa-color-accent);
    color: var(--europa-color-text-muted);
}

.europa-page hr {
    border: none;
    border-top: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
    margin: var(--europa-spacing-lg) 0;
}

/* Token-styled table — opt-in via Kramdown `{: .europa-table }` (T-030) and
   also applied by the scoped `.europa-page table` rules below so every manual
   table shares the dark-slate treatment regardless of explicit opt-in. */
.europa-page table,
.europa-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--europa-spacing-md);
    color: var(--europa-color-text-secondary);
    font-size: var(--europa-typography-size-sm);
    line-height: var(--europa-typography-line-height-normal);
}

.europa-page th,
.europa-table th {
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-primary);
    text-align: left;
    font-weight: 700;
    padding: var(--europa-spacing-sm) var(--europa-spacing-md);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
}

.europa-page td,
.europa-table td {
    padding: var(--europa-spacing-sm) var(--europa-spacing-md);
    border: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-border);
}

.europa-page tbody tr:nth-child(even) td,
.europa-table tbody tr:nth-child(even) td {
    background-color: var(--europa-color-surface-raised);
}

/* ── 14. Link — FR-017 ─────────────────────────────────────────────────── */
.europa-link {
    color: var(--europa-color-text-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color var(--europa-motion-transition-fast) var(--europa-motion-easing),
        border-color var(--europa-motion-transition-fast) var(--europa-motion-easing);
}

.europa-link:hover {
    color: var(--europa-color-text-link);
    border-bottom-color: var(--europa-color-text-link);
}

.europa-link:visited {
    color: var(--europa-color-text-muted);
}

.europa-link:focus-visible {
    outline: var(--europa-focus-ring-width) var(--europa-focus-ring-style) var(--europa-focus-ring-light-color);
    outline-offset: var(--europa-focus-ring-offset);
}

/* ── 15. Divider — FR-018 ──────────────────────────────────────────────── */
.europa-divider {
    border: none;
    border-top: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-divider);
    margin: var(--europa-spacing-lg) 0;
}

.europa-divider--success {
    border-top-color: var(--europa-color-success);
}

.europa-divider--error {
    border-top-color: var(--europa-color-error);
}

.europa-divider--warning {
    border-top-color: var(--europa-color-warning);
}

/* ── 16. Tooltip — FR-019 (CSS-only, data-tooltip attribute) ────────────── */
.europa-tooltip {
    position: relative;
}

/* Tooltip body */
.europa-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--europa-spacing-xs) var(--europa-spacing-sm);
    background-color: var(--europa-color-surface);
    color: var(--europa-color-text-primary);
    border-radius: var(--europa-radii-sm);
    font-size: var(--europa-typography-size-xs);
    line-height: var(--europa-typography-line-height-normal);
    white-space: nowrap;
    box-shadow: var(--europa-shadows-plate);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--europa-motion-transition-fast) var(--europa-motion-easing),
        visibility var(--europa-motion-transition-fast) var(--europa-motion-easing);
}

/* Tooltip arrow */
.europa-tooltip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--europa-color-surface);
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--europa-motion-transition-fast) var(--europa-motion-easing),
        visibility var(--europa-motion-transition-fast) var(--europa-motion-easing);
}

.europa-tooltip:hover::after,
.europa-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .europa-tooltip::after,
    .europa-tooltip::before {
        transition: none;
    }
}

/* ── 17. Badge status variants — FR-020 ────────────────────────────────── */
.europa-badge--success {
    background-color: var(--europa-color-success-bg);
    color: var(--europa-color-success);
    border-color: var(--europa-color-success-border);
}

.europa-badge--warning {
    background-color: var(--europa-color-warning-bg);
    color: var(--europa-color-warning);
    border-color: var(--europa-color-warning-border);
}

.europa-badge--error {
    background-color: var(--europa-color-error-bg);
    color: var(--europa-color-error);
    border-color: var(--europa-color-error-border);
}

.europa-badge--info {
    background-color: var(--europa-color-info-bg);
    color: var(--europa-color-info);
    border-color: var(--europa-color-info-border);
}

.europa-badge--accent {
    background-color: var(--europa-color-chip-bg);
    color: var(--europa-color-accent);
    border-color: var(--europa-color-accent);
}

/* ── 18. Empty state — FR-021 ──────────────────────────────────────────── */
.europa-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--europa-spacing-md);
    padding: var(--europa-spacing-xl);
    text-align: center;
    color: var(--europa-color-text-muted);
}

.europa-empty-state__icon {
    font-size: 2rem;
    line-height: 1;
}

.europa-empty-state__title {
    margin: 0;
    font-size: var(--europa-typography-size-lg);
    color: var(--europa-color-text-secondary);
    font-weight: 600;
}

.europa-empty-state__message {
    margin: 0;
    font-size: var(--europa-typography-size-sm);
    max-width: 24rem;
}

/* ── 19. Typography utilities — FR-040a ────────────────────────────────── */
.europa-heading-1 {
    font-size: var(--europa-typography-size3xl);
    line-height: var(--europa-typography-line-height-normal);
    letter-spacing: var(--europa-typography-tracking-tight);
    font-weight: 700;
    color: var(--europa-color-text-primary);
}

.europa-heading-2 {
    font-size: var(--europa-typography-size2xl);
    line-height: var(--europa-typography-line-height-normal);
    letter-spacing: var(--europa-typography-tracking-tight);
    font-weight: 700;
    color: var(--europa-color-text-primary);
}

.europa-heading-3 {
    font-size: var(--europa-typography-size-xl);
    line-height: var(--europa-typography-line-height-normal);
    letter-spacing: var(--europa-typography-tracking-tight);
    font-weight: 700;
    color: var(--europa-color-text-primary);
}

.europa-subheading {
    font-size: var(--europa-typography-size2xl);
    line-height: var(--europa-typography-line-height-normal);
    letter-spacing: var(--europa-typography-tracking-normal);
    font-weight: 600;
    color: var(--europa-color-text-secondary);
}

.europa-body {
    font-size: var(--europa-typography-size-base);
    line-height: var(--europa-typography-line-height-relaxed);
    letter-spacing: var(--europa-typography-tracking-normal);
    font-weight: 400;
    color: var(--europa-color-text-secondary);
}

.europa-body-sm {
    font-size: var(--europa-typography-size-sm);
    line-height: var(--europa-typography-line-height-relaxed);
    letter-spacing: var(--europa-typography-tracking-normal);
    font-weight: 400;
    color: var(--europa-color-text-secondary);
}

.europa-caption {
    font-size: var(--europa-typography-size-xs);
    line-height: var(--europa-typography-line-height-normal);
    letter-spacing: var(--europa-typography-tracking-wide);
    font-weight: 400;
    color: var(--europa-color-text-muted);
}

/* ── 20. Footer — FR-038 ───────────────────────────────────────────────── */
.europa-footer {
    display: flex;
    justify-content: center;
    padding: var(--europa-spacing-md) var(--europa-spacing-lg);
    border-top: var(--europa-borders-width) var(--europa-borders-style) var(--europa-color-divider);
    color: var(--europa-color-text-muted);
    font-size: var(--europa-typography-size-xs);
    text-align: center;
}

.europa-footer__links {
    display: flex;
    justify-content: center;
    gap: var(--europa-spacing-md);
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ── 21. Layout utilities — FR-039 ─────────────────────────────────────── */
.europa-layout-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--europa-spacing-lg);
}

.europa-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--europa-spacing-lg);
}

.europa-layout-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--europa-spacing-lg);
    align-items: start;
}