/* Hallmark · v2.0.0 · shape: app screen · genre: playful · theme: custom · redesign: restyle · posture: restrained */
/* Hallmark · critique: replaced jittery 3D tarot-fan hover transforms, neon zero-offset glows, eyebrows, tracked micro-labels, and raw hex literals with stationary Apple hit-boxes, OKLCH materials, optical SF typography, and concentric radii */

@property --value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  /* Scale & Apple Motion Tokens */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 90ms;
  --dur-micro: 150ms;
  --dur-short: 220ms;

  /* Concentric Apple Radii (inner = outer - padding) */
  --radius-panel: 20px;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* Apple SF Optical Typography Stack */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --font-outlier: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Semantic Status Accents (OKLCH, high legibility across themes) */
  --color-health: oklch(64% 0.155 160);
  --color-health-soft: oklch(64% 0.155 160 / 0.14);
  --color-health-border: oklch(64% 0.155 160 / 0.38);
  --color-joy: oklch(72% 0.165 78);
  --color-mind: oklch(66% 0.145 238);
  --color-mind-soft: oklch(66% 0.145 238 / 0.12);
  --color-mind-border: oklch(66% 0.145 238 / 0.34);
  --color-bonds: oklch(66% 0.175 350);
  --color-violet: oklch(68% 0.16 302);
  --color-violet-soft: oklch(68% 0.16 302 / 0.14);
  --color-violet-border: oklch(68% 0.16 302 / 0.38);
  --prismatic-surface: linear-gradient(135deg, oklch(84% 0.145 84 / 0.22) 0%, oklch(76% 0.14 68 / 0.12) 100%);
  --shadow-prismatic: 0 8px 22px oklch(58% 0.145 78 / 0.22), inset 0 1px 0 var(--color-specular);
  --color-danger: oklch(62% 0.19 22);
  --color-danger-soft: oklch(62% 0.19 22 / 0.12);
  --color-success: oklch(66% 0.155 156);

  /* Deep Space Observatory Constants (3D Earth viewport & Cinema HUD) */
  --cosmos-void: oklch(11% 0.022 260);
  --cosmos-vignette:
    linear-gradient(90deg, oklch(10% 0.022 260 / 0.84) 0%, oklch(10% 0.022 260 / 0.12) 33%, oklch(10% 0.022 260 / 0.12) 67%, oklch(10% 0.022 260 / 0.86) 100%),
    radial-gradient(circle at 50% 50%, oklch(10% 0.02 260 / 0) 46%, oklch(9% 0.02 260 / 0.68) 100%);
  --hud-glass: oklch(16.5% 0.024 258 / 0.78);
  --hud-glass-solid: oklch(16.5% 0.024 258);
  --hud-elevated: oklch(21.5% 0.026 258 / 0.86);
  --hud-ink: oklch(97% 0.008 90);
  --hud-ink-secondary: oklch(83% 0.016 250);
  --hud-border: oklch(96% 0.01 90 / 0.14);
  --hud-border-strong: oklch(83% 0.155 84 / 0.62);
  --hud-specular: oklch(99% 0.006 90 / 0.14);
  --hud-gold: oklch(84% 0.155 84);
  --hud-gold-soft: oklch(82% 0.155 84 / 0.16);
  --hud-sky: oklch(78% 0.12 232);
  --panorama-sky: oklch(48% 0.16 254);

  /* Light Mode Defaults (Apple Warm Alabaster & Refined Amber) */
  --color-paper: oklch(96.6% 0.009 84);
  --color-paper-2: oklch(98.6% 0.006 84 / 0.84);
  --color-paper-solid: oklch(98.8% 0.006 84);
  --color-paper-3: oklch(94.2% 0.011 84);
  --color-card: oklch(99.4% 0.005 84);
  --color-card-hover: oklch(99.8% 0.005 84);
  --color-ink: oklch(20.5% 0.022 256);
  --color-ink-2: oklch(34% 0.022 256);
  --color-muted: oklch(46% 0.02 256);
  --color-rule: oklch(24% 0.02 256 / 0.12);
  --color-border-strong: oklch(58% 0.145 74 / 0.55);
  --color-specular: oklch(99.8% 0.005 90 / 0.75);
  --color-accent: oklch(58% 0.15 72);
  --color-accent-strong: oklch(50% 0.145 68);
  --color-accent-soft: oklch(76% 0.15 80 / 0.16);
  --color-accent-ink: oklch(99% 0.006 90);
  --color-focus: oklch(56% 0.17 250);
  --color-topbar: oklch(98.2% 0.007 84 / 0.8);
  --color-topbar-solid: oklch(98.5% 0.007 84);
  --color-topbar-ink: oklch(20% 0.022 256);
  --color-topbar-sub: oklch(45% 0.02 256);
  --color-segment-track: oklch(91.8% 0.012 84);
  --color-segment-thumb: oklch(99.6% 0.005 84);
  --color-reward-ink: oklch(37% 0.115 160);
  --color-scrim: oklch(14% 0.02 258 / 0.52);

  --cta-gradient: linear-gradient(180deg, oklch(78% 0.155 80) 0%, oklch(67% 0.155 70) 100%);
  --cta-gradient-hover: linear-gradient(180deg, oklch(81% 0.155 82) 0%, oklch(70% 0.155 72) 100%);
  --cta-ink: oklch(17% 0.025 70);
  --bar-gradient: linear-gradient(90deg, oklch(68% 0.145 235) 0%, oklch(79% 0.155 82) 100%);
  --sweetspot-gradient: linear-gradient(90deg, oklch(78% 0.155 82 / 0.45), oklch(86% 0.16 86), oklch(78% 0.155 82 / 0.45));
  --page-wash:
    radial-gradient(circle at 14% 8%, oklch(76% 0.08 235 / 0.1), oklch(96.6% 0.009 84 / 0) 44%),
    radial-gradient(circle at 86% 90%, oklch(82% 0.1 82 / 0.12), oklch(96.6% 0.009 84 / 0) 46%);

  --shadow-panel: 0 10px 30px oklch(18% 0.02 256 / 0.07), inset 0 1px 0 var(--color-specular);
  --shadow-card: 0 2px 8px oklch(18% 0.02 256 / 0.06), inset 0 1px 0 var(--color-specular);
  --shadow-card-hover: 0 10px 24px oklch(18% 0.02 256 / 0.12), inset 0 1px 0 var(--color-specular);
  --shadow-cta: 0 8px 22px oklch(55% 0.14 72 / 0.26), inset 0 1px 0 oklch(99% 0.01 90 / 0.45);
  --shadow-segment: 0 1px 4px oklch(18% 0.02 256 / 0.12);
  --shadow-modal: 0 24px 64px oklch(12% 0.02 258 / 0.28), inset 0 1px 0 var(--color-specular);
  --shadow-hud: 0 14px 36px oklch(6% 0.015 260 / 0.46), 0 0 0 1px var(--hud-border), inset 0 1px 0 var(--hud-specular);
  --scroll-shadow-top: radial-gradient(farthest-side at 50% 0, oklch(18% 0.02 256 / 0.16), oklch(18% 0.02 256 / 0));
  --scroll-shadow-bottom: radial-gradient(farthest-side at 50% 100%, oklch(18% 0.02 256 / 0.16), oklch(18% 0.02 256 / 0));

  color-scheme: light dark;
  accent-color: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --color-paper: oklch(14.2% 0.02 258);
    --color-paper-2: oklch(18.5% 0.022 258 / 0.8);
    --color-paper-solid: oklch(18.8% 0.022 258);
    --color-paper-3: oklch(22.2% 0.024 258);
    --color-card: oklch(21.2% 0.024 258);
    --color-card-hover: oklch(23.8% 0.026 258);
    --color-ink: oklch(96.5% 0.008 90);
    --color-ink-2: oklch(86% 0.014 252);
    --color-muted: oklch(74% 0.018 252);
    --color-rule: oklch(96% 0.008 90 / 0.13);
    --color-border-strong: oklch(82% 0.155 84 / 0.58);
    --color-specular: oklch(99% 0.006 90 / 0.11);
    --color-accent: oklch(82% 0.155 84);
    --color-accent-strong: oklch(86% 0.155 86);
    --color-accent-soft: oklch(82% 0.155 84 / 0.16);
    --color-accent-ink: oklch(17% 0.025 72);
    --color-focus: oklch(76% 0.135 235);
    --color-topbar: oklch(15.5% 0.022 258 / 0.78);
    --color-topbar-solid: oklch(16% 0.022 258);
    --color-topbar-ink: oklch(96.8% 0.008 90);
    --color-topbar-sub: oklch(76% 0.016 252);
    --color-segment-track: oklch(15.5% 0.02 258);
    --color-segment-thumb: oklch(26.5% 0.026 258);
    --color-reward-ink: oklch(83% 0.13 160);
    --color-scrim: oklch(8% 0.02 260 / 0.72);

    --page-wash:
      radial-gradient(circle at 15% 10%, oklch(65% 0.12 238 / 0.09), oklch(14.2% 0.02 258 / 0) 44%),
      radial-gradient(circle at 85% 88%, oklch(78% 0.14 82 / 0.08), oklch(14.2% 0.02 258 / 0) 46%);

    --shadow-panel: 0 14px 36px oklch(6% 0.015 260 / 0.42), inset 0 1px 0 var(--color-specular);
    --shadow-card: 0 6px 18px oklch(6% 0.015 260 / 0.32), inset 0 1px 0 var(--color-specular);
    --shadow-card-hover: 0 12px 28px oklch(6% 0.015 260 / 0.48), inset 0 1px 0 oklch(99% 0.006 90 / 0.2);
    --shadow-segment: 0 2px 6px oklch(6% 0.015 260 / 0.42), inset 0 1px 0 var(--color-specular);
    --shadow-modal: 0 28px 72px oklch(5% 0.015 260 / 0.68), inset 0 1px 0 var(--color-specular);
    --scroll-shadow-top: radial-gradient(farthest-side at 50% 0, oklch(5% 0.015 260 / 0.44), oklch(5% 0.015 260 / 0));
    --scroll-shadow-bottom: radial-gradient(farthest-side at 50% 100%, oklch(5% 0.015 260 / 0.44), oklch(5% 0.015 260 / 0));
  }
}

:root[data-scheme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(14.2% 0.02 258);
  --color-paper-2: oklch(18.5% 0.022 258 / 0.8);
  --color-paper-solid: oklch(18.8% 0.022 258);
  --color-paper-3: oklch(22.2% 0.024 258);
  --color-card: oklch(21.2% 0.024 258);
  --color-card-hover: oklch(23.8% 0.026 258);
  --color-ink: oklch(96.5% 0.008 90);
  --color-ink-2: oklch(86% 0.014 252);
  --color-muted: oklch(74% 0.018 252);
  --color-rule: oklch(96% 0.008 90 / 0.13);
  --color-border-strong: oklch(82% 0.155 84 / 0.58);
  --color-specular: oklch(99% 0.006 90 / 0.11);
  --color-accent: oklch(82% 0.155 84);
  --color-accent-strong: oklch(86% 0.155 86);
  --color-accent-soft: oklch(82% 0.155 84 / 0.16);
  --color-accent-ink: oklch(17% 0.025 72);
  --color-focus: oklch(76% 0.135 235);
  --color-topbar: oklch(15.5% 0.022 258 / 0.78);
  --color-topbar-solid: oklch(16% 0.022 258);
  --color-topbar-ink: oklch(96.8% 0.008 90);
  --color-topbar-sub: oklch(76% 0.016 252);
  --color-segment-track: oklch(15.5% 0.02 258);
  --color-segment-thumb: oklch(26.5% 0.026 258);
  --color-reward-ink: oklch(83% 0.13 160);
  --color-scrim: oklch(8% 0.02 260 / 0.72);

  --page-wash:
    radial-gradient(circle at 15% 10%, oklch(65% 0.12 238 / 0.09), oklch(14.2% 0.02 258 / 0) 44%),
    radial-gradient(circle at 85% 88%, oklch(78% 0.14 82 / 0.08), oklch(14.2% 0.02 258 / 0) 46%);

  --shadow-panel: 0 14px 36px oklch(6% 0.015 260 / 0.42), inset 0 1px 0 var(--color-specular);
  --shadow-card: 0 6px 18px oklch(6% 0.015 260 / 0.32), inset 0 1px 0 var(--color-specular);
  --shadow-card-hover: 0 12px 28px oklch(6% 0.015 260 / 0.48), inset 0 1px 0 oklch(99% 0.006 90 / 0.2);
  --shadow-segment: 0 2px 6px oklch(6% 0.015 260 / 0.42), inset 0 1px 0 var(--color-specular);
  --shadow-modal: 0 28px 72px oklch(5% 0.015 260 / 0.68), inset 0 1px 0 var(--color-specular);
  --scroll-shadow-top: radial-gradient(farthest-side at 50% 0, oklch(5% 0.015 260 / 0.44), oklch(5% 0.015 260 / 0));
  --scroll-shadow-bottom: radial-gradient(farthest-side at 50% 100%, oklch(5% 0.015 260 / 0.44), oklch(5% 0.015 260 / 0));
}

:root[data-scheme="light"] {
  color-scheme: light;
}

/* ============ BASE & FLOOR INVARIANTS ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-block-size: 100dvh;
  overflow-x: clip;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.52;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  background-image: var(--page-wash);
  text-align: start;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  overflow-wrap: break-word;
  min-inline-size: 0;
}

h1,
h2 {
  text-wrap: balance;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

input,
textarea {
  caret-color: var(--color-accent);
}

canvas,
svg {
  display: block;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: 0.44;
  cursor: not-allowed;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  transition: none;
}

/* Preserve native content-visibility behavior for hidden="until-found" tab panels */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mwg-display-probe {
  transition: display 1s allow-discrete !important;
  display: block;
}

.mwg-display-probe-hidden {
  display: none;
}

.loom-svg {
  inline-size: 100%;
  block-size: auto;
}

.loom-node {
  cursor: pointer;
}

/* Tabular numbers on every numeric readout so figures never jump horizontally */
.seal-val,
.mono-tag,
.vital-val,
.era-year-stamp,
.dossier-metric-top strong,
.reveal-metric-val,
.roulette-country,
.birth-reveal-country,
#hudAgeBadge,
.pulse-readout,
.death-karma-val,
.story-age-pill,
.story-age-tag {
  font-variant-numeric: tabular-nums;
}

/* Shared SVG Glyph Sizing */
.ui-glyph,
.btn-glyph,
.seal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.02rem;
  block-size: 1.02rem;
  flex-shrink: 0;
}

.ui-glyph svg,
.btn-glyph svg,
.seal-icon svg {
  inline-size: 100%;
  block-size: 100%;
}

/* Clean untracked natural-case labels (Hallmark Gate 67 + Apple Typography §15) */
.section-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0;
  font-weight: 650;
  color: var(--color-ink-2);
}

.observatory-screen .section-label,
.odyssey-overlay .section-label {
  color: var(--hud-gold);
}

.step-pill {
  display: inline-flex;
  align-items: center;
  padding-block: 0.2rem;
  padding-inline: 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--hud-gold-soft);
  border: 1px solid var(--hud-border-strong);
  color: var(--hud-gold);
  font-size: 0.8rem;
  letter-spacing: 0;
  font-weight: 650;
}

.mono-tag {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--color-muted);
}

.observatory-screen .mono-tag,
.odyssey-overlay .mono-tag {
  color: var(--hud-ink-secondary);
}

/* ============ APPLE TRANSLUCENT TOP ADVENTURE BAR ============ */
.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: 0.56rem;
  padding-inline: 1.25rem;
  background: var(--color-topbar);
  color: var(--color-topbar-ink);
  border-block-end: 1px solid var(--color-rule);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  min-inline-size: 0;
}

.brand-sigil {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.brand-sigil svg {
  inline-size: 100%;
  block-size: 100%;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--color-topbar-ink);
  line-height: 1.2;
}

.brand-sub {
  font-size: 0.75rem;
  color: var(--color-topbar-sub);
  letter-spacing: 0;
}

.telemetry-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.28rem;
  padding-inline: 0.78rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  font-size: 0.78rem;
  color: var(--color-ink-2);
  min-inline-size: 0;
}

.telemetry-pill .btn-glyph {
  color: var(--color-accent);
}

@media (max-width: 1060px) {
  .telemetry-pill {
    display: none;
  }
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

/* ============ VIEWPORT-AWARE QUICK GUIDE POPOVER (declarative-dialog-popover-control + viewport-aware-dropdowns) ============ */
#btnQuickGuide {
  anchor-name: --quick-guide-btn;
}

.quick-guide-popover {
  max-inline-size: min(25.5rem, calc(100vw - 1.5rem));
  inline-size: 100%;
  padding: var(--space-md) 1.15rem;
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transition-property: opacity, scale, display, overlay;
  transition-duration: var(--dur-short);
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;

  @media (prefers-reduced-motion: no-preference) {
    scale: 0.96;
  }
}

.quick-guide-popover:is(:popover-open, .\:popover-open, [data-popover-open]) {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    scale: 1;

    @starting-style {
      scale: 0.96;
    }
  }
}

@supports (position-area: block-end) {
  .quick-guide-popover {
    position-anchor: --quick-guide-btn;
    inset: auto;
    margin: 0;
    margin-block-start: var(--space-xs);
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
}

.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: 0.68rem;
}

.popover-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.016em;
  color: var(--color-ink);
}

.popover-tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.popover-tip-card {
  padding: 0.58rem 0.72rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
}

.popover-tip-heading {
  display: block;
  font-size: 0.82rem;
  font-weight: 720;
  color: var(--color-accent);
  margin-block-end: 0.16rem;
}

.popover-tip-copy {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.48;
  color: var(--color-ink-2);
}

/* ============ APPLE CONTROLS & INSTANT TACTILE PRESS (apple-design §1) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.15rem;
  padding-block: 0.36rem;
  padding-inline: 0.82rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  font-size: 0.84rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1.28;
  box-shadow: var(--shadow-card);
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out);
}

.btn:hover:not(:disabled) {
  background: var(--color-card-hover);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.btn:active:not(:disabled) {
  scale: 0.97;
  transition-duration: var(--dur-press);
}

.btn-xs {
  min-block-size: 1.84rem;
  padding-block: 0.24rem;
  padding-inline: 0.65rem;
  font-size: 0.78rem;
  border-radius: 8px;
}

.btn-lg {
  min-block-size: 2.9rem;
  padding-block: 0.68rem;
  padding-inline: 1.7rem;
  font-size: 1.02rem;
  border-radius: var(--radius-card);
}

.btn-block {
  inline-size: 100%;
}

.btn-icon-only {
  padding-inline: 0.56rem;
}

.btn-ghost {
  background: var(--color-paper-3);
  color: var(--color-ink);
  border-color: var(--color-rule);
  box-shadow: none;
}

.observatory-screen .btn-ghost,
.odyssey-overlay .btn-ghost {
  background: var(--hud-elevated);
  color: var(--hud-ink);
  border-color: var(--hud-border);
}

.observatory-screen .btn-subtle {
  background: var(--hud-elevated);
  color: var(--hud-ink);
  border-color: var(--hud-border);
  box-shadow: none;
}

.btn-subtle {
  background: var(--color-paper-3);
  border-color: var(--color-rule);
  color: var(--color-ink);
  box-shadow: none;
}

.btn-brass {
  background: var(--cta-gradient);
  color: var(--cta-ink);
  border-color: var(--hud-border-strong);
  font-weight: 700;
  box-shadow: var(--shadow-cta);
}

.btn-brass:hover:not(:disabled) {
  background: var(--cta-gradient-hover);
  border-color: var(--hud-gold);
  box-shadow: var(--shadow-cta);
}

.resource-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-block-size: 1.98rem;
  padding-block: 0.24rem;
  padding-inline: 0.66rem;
  border-radius: var(--radius-control);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  color: var(--color-ink);
  font-size: 0.81rem;
  font-weight: 650;
}

.seal-gold {
  background: var(--color-accent-soft);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.seal-gold .seal-icon {
  color: var(--color-accent);
}

.seal-lbl {
  font-weight: 550;
  font-size: 0.76rem;
  color: var(--color-muted);
}

.app-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ============ SCREEN 1: 3D SPINNING EARTH ADVENTURE LOBBY ============ */
.observatory-screen {
  position: relative;
  flex: 1;
  min-block-size: calc(100dvh - 6.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}

.cosmos-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cosmos-void);
}

.cosmos-canvas {
  inline-size: 100%;
  block-size: 100%;
  touch-action: none;
}

.cosmos-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--cosmos-vignette);
}

.observatory-hud {
  position: relative;
  z-index: 5;
  inline-size: 100%;
  max-inline-size: 90rem;
  margin-inline: auto;
  padding-block: var(--space-md);
  padding-inline: 1.25rem;
  display: grid;
  grid-template-columns: minmax(16rem, 24.5rem) minmax(3.5rem, 1fr) minmax(17rem, 25.5rem);
  align-items: start;
  gap: var(--space-md);
  pointer-events: none;
}

.obs-wing {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-inline-size: 0;
}

.obs-wing-left {
  grid-column: 1;
}

.obs-wing-right {
  grid-column: 3;
}

@media (max-width: 860px) {
  .observatory-hud {
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: 16rem;
  }
  .obs-wing-left,
  .obs-wing-right {
    grid-column: 1;
  }
}

.hero-plate,
.intel-dossier,
.constellation-ledger,
.loadout-module {
  padding: var(--space-md) 1.15rem;
  background: var(--hud-glass);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hud);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--hud-ink);
}

.hero-plate {
  padding: 1.2rem 1.3rem;
}

.hero-title {
  margin: 0 0 0.48rem;
  font-size: clamp(1.48rem, 1.05rem + 1.25vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  font-weight: 760;
  color: var(--hud-ink);
}

.hero-lead {
  margin: 0;
  max-inline-size: 54ch;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--hud-ink-secondary);
  text-wrap: pretty;
}

.dossier-header,
.module-head,
.ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: 0.58rem;
}

.sub-module-head {
  margin-block-start: 0.78rem;
}

.sub-module-head-lg {
  margin-block-start: 1.15rem;
}

.dossier-title-group {
  min-inline-size: 0;
}

.dossier-country-title {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 740;
  letter-spacing: -0.018em;
  color: var(--hud-gold);
  line-height: 1.2;
}

.dossier-kicker-note {
  margin: 0.14rem 0 0;
  font-size: 0.76rem;
  color: var(--hud-ink-secondary);
}

.dossier-summary {
  margin: 0 0 0.65rem;
  font-size: 0.84rem;
  color: var(--hud-ink-secondary);
  line-height: 1.48;
}

.dossier-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.8rem;
}

.dossier-metric {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.dossier-metric-top {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--hud-ink);
}

.dossier-bar-track {
  block-size: 0.4rem;
  background: var(--hud-border);
  border-radius: var(--radius-sm);
  overflow: clip;
}

.dossier-bar-fill {
  block-size: 100%;
  background: var(--bar-gradient);
}

.dossier-footer {
  margin-block-start: var(--space-sm);
}

/* Native Searchable Country Secrets Accordion (modern-web-guidance: accordion) */
.country-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-block-start: 0.72rem;
}

.mwg-disclosure {
  border-radius: var(--radius-card);
  border: 1px solid var(--hud-border);
  background: var(--hud-elevated);
  color: var(--hud-ink);
  overflow: clip;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.mwg-disclosure[open] {
  border-color: var(--hud-border-strong);
}

.mwg-disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55ch;
  padding: 0.54rem 0.72rem;
  font-size: 0.8rem;
  font-weight: 680;
  color: var(--hud-gold);
  cursor: pointer;
  user-select: none;
}

.mwg-disclosure > summary::-webkit-details-marker {
  display: none;
}

.mwg-disclosure > summary:hover {
  background: var(--hud-gold-soft);
}

.mwg-disclosure > summary::before {
  content: "";
  inline-size: 0.98em;
  block-size: 0.98em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("./src/chevron-down.svg") no-repeat center / contain;
  mask: url("./src/chevron-down.svg") no-repeat center / contain;
  rotate: -90deg;

  @media (prefers-reduced-motion: no-preference) {
    transition: rotate 0.2s var(--ease-out);
  }
}

.mwg-disclosure > summary:dir(rtl)::before {
  rotate: 90deg;
}

.mwg-disclosure[open] > summary::before {
  rotate: 0deg;
}

.mwg-disclosure::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}

.mwg-disclosure:not([open])::details-content {
  block-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .mwg-disclosure::details-content {
    transition: block-size, content-visibility, display;
    transition-duration: 0.26s;
    transition-timing-function: var(--ease-in-out);
    transition-behavior: allow-discrete;
  }
}

.mwg-disclosure-body {
  padding: 0 0.72rem 0.62rem;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--hud-ink-secondary);
}

.mwg-disclosure-body p {
  margin: 0;
}

.module-hint {
  font-size: 0.76rem;
  color: var(--hud-ink-secondary);
}

/* Era Cards (Concentric 12px inside 20px panel, instant tactile press) */
.era-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr));
  gap: var(--space-xs);
}

.era-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 0.24rem;
  padding: 0.68rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--hud-border);
  background: var(--hud-elevated);
  color: var(--hud-ink);
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

.era-card:hover:not(:disabled) {
  border-color: var(--hud-border-strong);
}

.era-card:active:not(:disabled) {
  scale: 0.975;
  transition-duration: var(--dur-press);
}

.era-card.is-active {
  border-color: var(--hud-gold);
  background: var(--hud-gold-soft);
}

.era-year-stamp {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--hud-gold);
}

.era-name {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.era-desc {
  font-size: 0.74rem;
  color: var(--hud-ink-secondary);
  line-height: 1.38;
}

.era-status-tag {
  margin-block-start: auto;
  padding-block-start: 0.24rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--hud-sky);
}

/* Relic Sockets */
.relic-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.relic-slot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: start;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-card);
  border: 1px dashed var(--hud-border);
  background: var(--hud-elevated);
  color: var(--hud-ink);
  min-inline-size: 0;
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

.relic-slot:hover {
  border-color: var(--hud-border-strong);
}

.relic-slot:active {
  scale: 0.975;
  transition-duration: var(--dur-press);
}

.relic-slot.is-equipped {
  border-style: solid;
  border-color: var(--hud-border-strong);
  background: var(--hud-gold-soft);
}

.relic-slot-body {
  min-inline-size: 0;
}

.relic-slot-title {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--hud-gold);
}

.relic-slot-desc {
  font-size: 0.74rem;
  color: var(--hud-ink-secondary);
  line-height: 1.35;
}

.relic-slot-empty-label {
  font-size: 0.78rem;
  color: var(--hud-ink-secondary);
  font-weight: 600;
}

.relic-emblem-mini {
  inline-size: 2.4rem;
  block-size: 1.9rem;
  color: var(--hud-gold);
  flex-shrink: 0;
}

.relic-emblem-faded {
  opacity: 0.5;
}

.relic-emblem-mini svg {
  inline-size: 100%;
  block-size: 100%;
}

/* Apple Hero Primary CTA Card-Button (Concentric 12px inside 20px module) */
.apple-hero-cta {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.85rem;
  padding-inline: 1.15rem;
  margin-block-end: 0.6rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--hud-border-strong);
  background: var(--cta-gradient);
  color: var(--cta-ink);
  box-shadow: var(--shadow-cta);
  text-align: start;
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    background var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out);
}

.apple-hero-cta:hover {
  background: var(--cta-gradient-hover);
}

.apple-hero-cta:active {
  scale: 0.978;
  transition-duration: var(--dur-press);
}

.cta-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-inline-size: 0;
}

.cta-kicker {
  font-size: 0.76rem;
  font-weight: 650;
  opacity: 0.86;
}

.cta-main {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.cta-icon-circle {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
  background: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cta-icon-circle svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.secondary-launch-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.past-constellations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.star-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding-block: 0.24rem;
  padding-inline: 0.62rem;
  border-radius: var(--radius-pill);
  background: var(--hud-elevated);
  border: 1px solid var(--hud-border);
  font-size: 0.78rem;
  color: var(--hud-ink);
}

.theatre-screen .star-chip {
  background: var(--color-paper-3);
  border-color: var(--color-rule);
  color: var(--color-ink);
}

/* ============ REINCARNATION ODYSSEY CINEMA OVERLAY ============ */
.odyssey-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: auto;
  background: var(--cosmos-vignette);
}

.letterbox-bar {
  padding-block: 0.85rem;
  padding-inline: var(--space-lg);
  background: var(--hud-glass);
  color: var(--hud-ink);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.letterbox-top {
  border-block-end: 1px solid var(--hud-border);
}

.letterbox-bottom {
  border-block-start: 1px solid var(--hud-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.odyssey-top-telemetry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 0.45rem;
}

.odyssey-progress-track {
  block-size: 0.32rem;
  background: var(--hud-border);
  border-radius: var(--radius-sm);
  overflow: clip;
}

.odyssey-progress-fill {
  inline-size: 0%;
  block-size: 100%;
  background: var(--bar-gradient);
  transition: inline-size 120ms linear;
}

.odyssey-flight-hud {
  margin-block-start: auto;
  margin-block-end: var(--space-lg);
  align-self: center;
  inline-size: min(35rem, calc(100% - 2rem));
  text-align: center;
}

.roulette-card {
  padding: 1.1rem var(--space-lg);
  background: var(--hud-glass);
  color: var(--hud-ink);
  border: 1px solid var(--hud-border-strong);
  border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}

.roulette-kicker {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--hud-sky);
}

.roulette-country {
  margin-block: var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.35rem);
  font-weight: 760;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  color: var(--hud-gold);
  line-height: 1.16;
}

.roulette-meta {
  font-size: 0.84rem;
  color: var(--hud-ink);
}

.roulette-stats {
  margin-block-start: var(--space-2xs);
  font-size: 0.84rem;
  color: var(--hud-ink-secondary);
}

/* Birth Welcome Card */
.birth-reveal-dossier {
  margin: auto;
  inline-size: min(44rem, calc(100% - 2rem));
  padding: 1.65rem 2rem;
  background: var(--hud-glass);
  border: 1px solid var(--hud-border-strong);
  border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  text-align: center;
  color: var(--hud-ink);
}

.birth-reveal-country {
  margin: 0 0 0.24rem;
  font-size: clamp(1.85rem, 1.25rem + 2vw, 2.9rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--hud-gold);
  line-height: 1.14;
}

.reveal-kicker {
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--hud-sky);
  margin-block-end: 0.35rem;
}

.reveal-subline {
  font-size: 1rem;
  color: var(--hud-ink);
  margin-block-end: 1.15rem;
  line-height: 1.5;
}

.reveal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.65rem;
  margin-block-end: 1.1rem;
}

.reveal-metric-cell {
  padding: 0.68rem 0.78rem;
  background: var(--hud-elevated);
  border: 1px solid var(--hud-border);
  border-radius: var(--radius-card);
}

.reveal-metric-lbl {
  font-size: 0.76rem;
  color: var(--hud-ink-secondary);
}

.reveal-metric-val {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 740;
  color: var(--hud-ink);
  margin-block-start: 0.18rem;
}

.reveal-twins-strip {
  padding: 0.85rem;
  background: var(--hud-elevated);
  border: 1px solid var(--color-violet-border);
  border-radius: var(--radius-card);
  margin-block-end: 1.25rem;
}

.reveal-twins-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.52rem;
  margin-block-start: 0.52rem;
  font-size: 0.84rem;
}

/* ============ SCREEN 2: APPLE-GRADE STORYBOOK LIFE STAGE ============ */
.theatre-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-inline-size: 90rem;
  inline-size: 100%;
  margin-inline: auto;
  padding: 0.8rem 1.25rem 1.25rem;
  gap: 0.78rem;
}

.hud-bar {
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0.68rem var(--space-md);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
}

.hud-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.identity-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 740;
  letter-spacing: -0.018em;
  line-height: 1.22;
}

.identity-sub {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.hud-act-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.act-roman {
  font-size: 0.84rem;
  color: var(--color-accent);
  font-weight: 700;
}

.age-horizon-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-strong);
  font-size: 0.86rem;
}

.horizon-divider {
  inline-size: 1px;
  block-size: 0.82rem;
  background: var(--color-rule);
}

.hud-resources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.theatre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17.2rem, 21rem);
  gap: 0.88rem;
  align-items: start;
}

@media (max-width: 880px) {
  .theatre-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wing-panel {
  padding: 0.85rem 0.95rem var(--space-md);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  min-inline-size: 0;
}

/* ============ APPLE SEGMENTED CONTROL TABS (modern-web-guidance: tabs) ============ */
.dock-tablist {
  display: flex;
  gap: 0.2rem;
  padding: 0.22rem;
  border-radius: var(--radius-control);
  background: var(--color-segment-track);
  border: 1px solid var(--color-rule);
  overflow-x: auto;
  scrollbar-width: none;
}

.dock-tablist::-webkit-scrollbar {
  display: none;
}

.dock-tablist [role="tab"] {
  flex: 1 0 auto;
  position: relative;
  min-block-size: 2.15rem;
  padding-block: 0.36rem;
  padding-inline: 0.62rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  scale: 1;
  transition:
    color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out),
    scale var(--dur-press) var(--ease-out);
}

.dock-tablist [role="tab"]:hover {
  color: var(--color-ink);
}

.dock-tablist [role="tab"]:active {
  scale: 0.975;
}

/* Selected tab styled from aria-selected with zero dimension shift + border underline for forced-colors */
.dock-tablist [role="tab"][aria-selected="true"] {
  color: var(--color-ink);
  background: var(--color-segment-thumb);
  box-shadow: var(--shadow-segment);

  &::after {
    content: "";
    position: absolute;
    inset-inline: 22%;
    inset-block-end: 0.14rem;
    border-block-end: 2px solid var(--color-accent);
    border-radius: var(--radius-pill);
    scale: 1 1;
    opacity: 1;

    @media (prefers-reduced-motion: no-preference) {
      transition:
        scale var(--dur-short) var(--ease-out),
        opacity var(--dur-short) var(--ease-out);

      @starting-style {
        scale: 0.35 1;
        opacity: 0;
      }
    }
  }
}

/* Shared grid cell for tabpanels; zero padding/border/margin/bg on [role="tabpanel"] itself */
.tab-panels-grid {
  display: grid;
}

.tab-panels-grid > [role="tabpanel"] {
  grid-area: 1 / 1;
  min-inline-size: 0;
}

.tab-panels-grid > [role="tabpanel"][hidden] {
  pointer-events: none;
  max-block-size: 0;
  overflow: clip;
}

.tab-panel-inner {
  padding-block-start: 0.78rem;
}

.dock-helper-note {
  margin: 0 0 0.62rem;
  font-size: 0.8rem;
  line-height: 1.48;
  color: var(--color-muted);
}

/* Horizontal 4-Vital Strip atop Main Stage */
.vitals-strip-wrap {
  min-inline-size: 0;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.58rem;
}

@media (max-width: 560px) {
  .vitals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vital-box {
  padding: 0.56rem 0.66rem;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.vital-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-size: 0.83rem;
  font-weight: 700;
  margin-block-end: 0.14rem;
}

.vital-val {
  color: var(--color-ink);
  font-weight: 750;
}

.vital-sub-hint {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-block-end: 0.32rem;
}

.vital-label-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.vital-label-text {
  color: var(--color-ink);
}

.vital-tone-health { color: var(--color-health); }
.vital-tone-joy { color: var(--color-joy); }
.vital-tone-mind { color: var(--color-mind); }
.vital-tone-bonds { color: var(--color-bonds); }

.vital-bar {
  block-size: 0.42rem;
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
  overflow: clip;
}

.vital-fill {
  block-size: 100%;
  border-radius: var(--radius-sm);
  transition: inline-size 260ms var(--ease-out);
}

.vital-fill-health { background: var(--color-health); }
.vital-fill-joy { background: var(--color-joy); }
.vital-fill-mind { background: var(--color-mind); }
.vital-fill-bonds { background: var(--color-bonds); }

/* Same-Second Friends Mini Globe & Cards */
.mini-globe-wrap {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  border-radius: var(--radius-card);
  background: var(--cosmos-void);
  border: 1px solid var(--color-rule);
  margin-block-end: 0.58rem;
  overflow: clip;
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 10.5rem;
}

.mini-globe-canvas {
  inline-size: 100%;
  block-size: 100%;
  touch-action: none;
}

.twins-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.twin-card {
  padding: 0.6rem 0.72rem;
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  font-size: 0.8rem;
  line-height: 1.46;
}

.twin-card.is-crisis {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.twin-card.is-dead {
  opacity: 0.6;
}

.twin-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.twin-name-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.twin-icon-ok { color: var(--color-violet); }
.twin-icon-crisis { color: var(--color-danger); }
.twin-icon-dead { color: var(--color-muted); }

.twin-status-copy {
  color: var(--color-muted);
  margin-block-start: 0.24rem;
}

.twin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-block-start: 0.46rem;
}

/* Center Stage: Bright Storybook Panorama + Full-Width Story Caption Below */
.center-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.stage-story-bundle {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-rule);
  overflow: clip;
  background: var(--color-card);
  color: var(--color-ink);
}

.panorama-frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 24 / 7.2;
  min-block-size: 9.6rem;
  max-block-size: 13rem;
  background: var(--panorama-sky);
  overflow: clip;
}

.panorama-canvas {
  inline-size: 100%;
  block-size: 100%;
}

.storybook-caption-bar {
  padding: 0.7rem var(--space-md);
  background: var(--color-card);
  color: var(--color-ink);
  border-block-start: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.vignette-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.story-age-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.62rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.vignette-prose {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.56;
  color: var(--color-ink);
  font-weight: 500;
}

.crossroad-alert-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.72rem var(--space-md);
  border-radius: var(--radius-card);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-strong);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ============ ZERO-JITTER APPLE ACTION CARDS & COACH BANNER ============ */
.tarot-deck-zone {
  padding: 0.9rem 1.05rem 1.05rem;
  background: var(--color-paper-solid);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  container: deck / inline-size;
}

.turn-coach-banner {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  min-block-size: 2.55rem;
  padding: 0.48rem 0.85rem;
  margin-block-end: 0.68rem;
  border-radius: var(--radius-card);
  background: var(--color-mind-soft);
  border: 1px solid var(--color-mind-border);
  font-size: 0.87rem;
  font-weight: 650;
  color: var(--color-ink);
}

.coach-glyph {
  color: var(--color-mind);
}

.turn-coach-banner.is-ready-advance {
  background: var(--color-accent-soft);
  border-color: var(--color-border-strong);
}

.turn-coach-banner.is-ready-advance .coach-glyph {
  color: var(--color-accent);
}

.deck-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  min-block-size: 2.25rem;
  margin-block-end: 0.65rem;
}

.deck-status-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.deck-heading {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 740;
  letter-spacing: -0.015em;
}

.played-tags-readout {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.deck-actions-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.combo-preview-pill {
  padding: 0.22rem 0.66rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.tarot-fan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.68rem;
  padding-block: 0.15rem 0.65rem;
}

@container deck (inline-size < 470px) {
  .tarot-fan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Stationary Outer Hit-Box (.tarot-card) + Inner Apple Surface (.tarot-card-surface):
 * Outer <button> never moves or rotates on :hover, eliminating edge-oscillation jitter 100%.
 * Inner surface carries identity transforms (individual-transform-properties) so stacking context never flips.
 */
.tarot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: none;
  color: var(--color-ink);
  text-align: start;
  min-inline-size: 0;
}

.tarot-card-surface {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-sm) 0.78rem 0.82rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  translate: 0 0;
  scale: 1;
  transition:
    translate 170ms var(--ease-out),
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out),
    box-shadow 170ms var(--ease-out);
}

.tarot-card:hover:not(:disabled) .tarot-card-surface {
  border-color: var(--color-border-strong);
  background: var(--color-card-hover);
  box-shadow: var(--shadow-card-hover);

  @media (prefers-reduced-motion: no-preference) {
    translate: 0 -2px;
  }
}

.tarot-card:active:not(:disabled) .tarot-card-surface {
  translate: 0 0;
  scale: 0.98;
  transition-duration: var(--dur-press);
}

.tarot-card.is-combo-ready .tarot-card-surface {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.tarot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-block-end: 0.4rem;
}

.tarot-roman {
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--color-muted);
}

.tarot-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.12rem var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-strong);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-accent);
}

.tarot-art-plate {
  padding-block: 0.26rem;
  margin-block-end: 0.42rem;
  border-radius: var(--radius-control);
  background: var(--cosmos-void);
  border: 1px solid var(--hud-border);
  display: grid;
  place-items: center;
}

.tarot-art-svg {
  inline-size: 100%;
  max-inline-size: 4.8rem;
  block-size: auto;
}

.tarot-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 740;
  letter-spacing: -0.014em;
  line-height: 1.26;
  margin-block-end: 0.24rem;
}

.tarot-desc {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.44;
  margin-block-end: 0.46rem;
}

.tarot-desc-tight {
  margin-block-end: 0;
}

/* Explicit Kid-Friendly Reward Pills on Every Card */
.effect-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-block-end: 0.45rem;
}

.effect-pill {
  padding: 0.13rem 0.46rem;
  border-radius: var(--radius-sm);
  background: var(--color-health-soft);
  border: 1px solid var(--color-health-border);
  color: var(--color-reward-ink);
  font-size: 0.73rem;
  font-weight: 700;
}

.tarot-tags {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.tag-pill {
  padding: 0.12rem 0.44rem;
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: 0.71rem;
  font-weight: 650;
}

.combo-callout-badge {
  inline-size: 100%;
  margin-block-start: 0.38rem;
  padding: 0.22rem 0.46rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.combo-callout-pair {
  border-style: dashed;
  opacity: 0.88;
}

.chapter-advance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-block-start: 0.68rem;
  border-block-start: 1px solid var(--color-rule);
}

.deck-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.btn-advance {
  padding-inline: 1.45rem;
  font-size: 0.94rem;
}

.btn-advance.is-ready-glow {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Gentle Star Summary Card */
.death-summary-card {
  padding: 1.3rem 1.45rem;
  border-radius: var(--radius-panel);
  background: var(--hud-glass-solid);
  border: 1px solid var(--hud-border-strong);
  color: var(--hud-ink);
}

.death-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.death-orb-group {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.death-orb-badge {
  inline-size: 3.3rem;
  block-size: 3.3rem;
  border-radius: var(--radius-card);
  background: var(--hud-gold-soft);
  border: 1.5px solid var(--hud-gold);
  display: grid;
  place-items: center;
  color: var(--hud-gold);
  flex-shrink: 0;
}

.death-title {
  margin: 0.14rem 0;
  font-size: 1.34rem;
  font-weight: 760;
  color: var(--hud-gold);
}

.death-sub {
  font-size: 0.88rem;
  color: var(--hud-ink-secondary);
}

.death-karma-box {
  text-align: end;
}

.death-karma-val {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 780;
  color: var(--hud-gold);
}

.death-badges-row {
  margin-block-start: var(--space-sm);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.death-actions-row {
  margin-block-start: var(--space-md);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ============ TIME MACHINE BUBBLES + LOOM + DIARY ============ */
.timemachine-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.age-bubble-btn {
  padding: 0.3rem 0.68rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-rule);
  background: none;
  color: var(--color-ink);
  font-size: 0.78rem;
  font-weight: 650;
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

.age-bubble-btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-accent-soft);
}

.age-bubble-btn:active {
  scale: 0.965;
  transition-duration: var(--dur-press);
}

.loom-box {
  border-radius: var(--radius-card);
  background: var(--cosmos-void);
  border: 1px solid var(--color-rule);
  padding: 0.55rem;
  overflow-x: auto;
  overscroll-behavior: contain;
}

.loom-node-inspector {
  margin-block-start: 0.44rem;
  padding: 0.46rem 0.65rem;
  border-radius: var(--radius-control);
  background: var(--color-card);
  border: 1px solid var(--color-rule);
  font-size: 0.76rem;
  color: var(--color-muted);
}

.sparkline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.legend-item {
  white-space: nowrap;
}

.legend-health { color: var(--color-health); }
.legend-joy { color: var(--color-joy); }
.legend-mind { color: var(--color-mind); }
.legend-bonds { color: var(--color-bonds); }

/* ============ SCROLLABILITY AFFORDANCE HINTS (modern-web-guidance: scrollability-affordance-hints) ============ */
.story-feed,
.scroll-shadow-port {
  display: block;
  overflow-y: auto;
  container-type: scroll-state;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.story-feed {
  max-block-size: min(62dvh, 28rem);
  padding-inline-end: 0.35rem;
}

.dock-story-feed {
  max-block-size: 24rem;
}

.scroll-shadow-port {
  max-block-size: 22rem;
}

.story-feed::before,
.story-feed::after,
.scroll-shadow-port::before,
.scroll-shadow-port::after {
  content: "";
  display: block;
  position: sticky;
  block-size: var(--space-sm);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}

.story-feed::before,
.scroll-shadow-port::before {
  inset-block-start: 0;
  margin-block-end: calc(-1 * var(--space-sm));
  background: var(--scroll-shadow-top);
}

.story-feed::after,
.scroll-shadow-port::after {
  inset-block-end: 0;
  margin-block-start: calc(-1 * var(--space-sm));
  background: var(--scroll-shadow-bottom);
}

@container scroll-state(scrollable: block-start) {
  .story-feed::before,
  .scroll-shadow-port::before {
    opacity: 1;
  }
}

@container scroll-state(scrollable: block-end) {
  .story-feed::after,
  .scroll-shadow-port::after {
    opacity: 1;
  }
}

@supports not (container-type: scroll-state) {
  .story-feed::before,
  .story-feed::after,
  .scroll-shadow-port::before,
  .scroll-shadow-port::after {
    animation: show-scroll-shadow linear both;
    animation-timeline: scroll();
  }

  .story-feed::before,
  .scroll-shadow-port::before {
    animation-range: 0 2rem;
  }

  .story-feed::after,
  .scroll-shadow-port::after {
    animation-direction: reverse;
    animation-range: calc(100% - 2rem) 100%;
  }
}

@keyframes show-scroll-shadow {
  to {
    opacity: 1;
  }
}

.story-item {
  padding: 0.58rem 0.74rem;
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  font-size: 0.84rem;
  line-height: 1.52;
}

.story-item + .story-item {
  margin-block-start: var(--space-xs);
}

.story-item.kind-combo,
.story-item.kind-fork,
.story-item.kind-crossroad {
  border-color: var(--color-border-strong);
  background: var(--color-accent-soft);
}

.story-age-tag {
  display: inline-block;
  margin-inline-end: 0.46rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* ============ TOP-LAYER APPLE SHEET DIALOGS ============ */
dialog {
  max-inline-size: min(43rem, calc(100% - 1.75rem));
  inline-size: 100%;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: 1.4rem 1.55rem;
  background: var(--color-paper-solid);
  color: var(--color-ink);
  box-shadow: var(--shadow-modal);

  opacity: 0;
  transition-property: opacity, transform, display, overlay;
  transition-duration: var(--dur-short);
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;

  @media (prefers-reduced-motion: no-preference) {
    transform: scale(0.96);
  }
}

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: oklch(14% 0.02 258 / 0);
  transition-property: background-color, display, overlay;
  transition-duration: var(--dur-short);
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;
}

:is(dialog[open]):where(:not([data-closing])) {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    transform: scale(1);

    @starting-style {
      transform: scale(0.96);
    }
  }

  &::backdrop {
    background-color: var(--color-scrim);

    @starting-style {
      background-color: oklch(14% 0.02 258 / 0);
    }
  }
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-block-end: 0.88rem;
}

.dialog-title {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.dialog-sub {
  margin: 0.24rem 0 0;
  font-size: 0.86rem;
  color: var(--color-muted);
}

.crossroad-prose {
  margin: 0 0 var(--space-sm);
  max-inline-size: 62ch;
  font-size: 0.96rem;
  line-height: 1.6;
}

.intel-callout {
  padding: 0.78rem 0.95rem;
  border-radius: var(--radius-card);
  background: var(--color-mind-soft);
  color: var(--color-ink);
  border: 1px solid var(--color-mind-border);
  font-size: 0.86rem;
  line-height: 1.52;
  margin-block: var(--space-sm);
}

.callout-title {
  display: block;
  margin-block-end: 0.34rem;
  font-size: 0.92rem;
}

.callout-desc {
  margin: 0 0 0.72rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Light-Orb Minigame & Faceted D12 Dice Arena */
.pulse-bar-box {
  margin-block: var(--space-sm);
  padding: 0.85rem 0.98rem;
  border-radius: var(--radius-card);
  background: var(--hud-glass-solid);
  border: 1px solid var(--hud-border-strong);
  color: var(--hud-ink);
}

.pulse-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.84rem;
}

.pulse-readout {
  font-weight: 750;
  color: var(--hud-gold);
}

.pulse-track {
  position: relative;
  block-size: 1.05rem;
  border-radius: var(--radius-sm);
  background: var(--hud-elevated);
  overflow: clip;
  margin-block: 0.6rem;
}

.pulse-sweetspot {
  position: absolute;
  inset-inline-start: 41%;
  inline-size: 18%;
  inset-block: 0;
  background: var(--sweetspot-gradient);
}

.pulse-cursor {
  position: absolute;
  inset-inline-start: 10%;
  inset-block: 0;
  inline-size: 0.46rem;
  border-radius: var(--radius-sm);
  background: var(--hud-sky);
}

.dice-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block: 0.85rem;
  padding: 0.95rem;
  border-radius: var(--radius-card);
  background: var(--hud-glass-solid);
  border: 1px solid var(--hud-border-strong);
  color: var(--hud-ink);
}

.dice-breakdown {
  text-align: start;
  font-size: 0.88rem;
}

.dice-math-line {
  color: var(--hud-ink-secondary);
  font-weight: 600;
}

.dice-outcome-line {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 760;
  margin-block-start: var(--space-2xs);
}

.dice-outcome-pass { color: var(--color-success); }
.dice-outcome-fail { color: var(--color-danger); }

.d12-svg {
  inline-size: 4.4rem;
  block-size: 4.4rem;
}

.choice-stack {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  margin-block-start: var(--space-sm);
}

.choice-btn {
  text-align: start;
  padding: 0.82rem var(--space-md);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: none;
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

.choice-btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-card-hover);
}

.choice-btn:active {
  scale: 0.985;
  transition-duration: var(--dur-press);
}

.choice-btn-title {
  font-size: 0.94rem;
}

.choice-btn-badge {
  color: var(--color-accent);
}

.choice-btn-sub {
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* Sanctum & Atlas Grids */
.sanctum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.2rem, 1fr));
  gap: 0.65rem;
  margin-block-start: 0.65rem;
}

.ach-card-locked {
  opacity: 0.62;
}

.ach-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.86rem;
}

.ach-title-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.ach-icon-done { color: var(--color-accent); }
.ach-icon-locked { color: var(--color-muted); }

.ach-desc-copy {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-block-start: 0.24rem;
}

.atlas-search-row {
  margin-block-end: 0.65rem;
}

.atlas-search-input {
  inline-size: 100%;
  padding: 0.62rem 0.88rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  font-size: 0.9rem;
}

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-xs);
}

.atlas-item {
  padding: 0.58rem 0.74rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  text-align: start;
  font-size: 0.84rem;
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

/* Defer rendering off-screen items strictly below the 6-row fold (defer-rendering-heavy-content) */
.atlas-item:nth-child(n + 19) {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 3.85rem;
}

.atlas-item:hover {
  border-color: var(--color-border-strong);
  background: var(--color-card-hover);
}

.atlas-item:active {
  scale: 0.98;
  transition-duration: var(--dur-press);
}

.atlas-item.is-visited {
  border-color: var(--color-border-strong);
}

.atlas-item-head {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  font-weight: 700;
}

.atlas-visited-badge {
  color: var(--color-accent);
  font-size: 0.74rem;
}

.atlas-item-meta {
  margin-block-start: 0.22rem;
}

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

.settings-group-label {
  margin-block-end: 0.45rem;
}

.btn-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* ============ APPLE ACCESSIBILITY SIGNALS (§14) ============ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .apple-hero-cta,
  .era-card,
  .relic-slot,
  .tarot-card-surface,
  .choice-btn,
  .atlas-item,
  .age-bubble-btn,
  .dock-tablist [role="tab"] {
    transition-duration: 60ms;
    translate: 0 0 !important;
    scale: 1 !important;
  }
  dialog,
  dialog::backdrop,
  .quick-guide-popover {
    transition-duration: 80ms;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .hud-bar,
  .wing-panel,
  .tarot-deck-zone,
  .quick-guide-popover {
    background: var(--color-paper-solid);
    color: var(--color-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero-plate,
  .intel-dossier,
  .constellation-ledger,
  .loadout-module,
  .letterbox-bar,
  .roulette-card,
  .birth-reveal-dossier {
    background: var(--hud-glass-solid);
    color: var(--hud-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .btn,
  .tarot-card-surface,
  .wing-panel,
  .hud-bar,
  .tarot-deck-zone,
  .hero-plate,
  .intel-dossier,
  .constellation-ledger,
  .loadout-module,
  .choice-btn,
  .atlas-item,
  .mwg-disclosure,
  .quick-guide-popover,
  dialog {
    border-width: 1.5px;
    border-color: var(--color-ink-2);
  }
}

@media (forced-colors: active) {
  .btn,
  .tarot-card-surface,
  .wing-panel,
  .intel-dossier,
  .loadout-module,
  .era-card,
  .choice-btn,
  .mwg-disclosure,
  .quick-guide-popover,
  dialog {
    border: 1px solid ButtonBorder;
  }
  .era-card.is-active,
  .tarot-card.is-combo-ready .tarot-card-surface {
    outline: 2px solid Highlight;
  }
  .dock-tablist [role="tab"][aria-selected="true"]::after {
    border-block-end-color: Highlight;
  }
}

/* ============ V6 ADDICTIVE CORE LOOP & CREATOR PASS EXTENSIONS ============ */

/* Home Companion Banner & Studio CTA */
.home-pet-banner {
  margin-block-start: var(--space-xs);
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.54rem 0.72rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--hud-border);
  background: var(--hud-elevated);
  color: var(--hud-ink);
  text-align: start;
  cursor: pointer;
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

.home-pet-banner:hover {
  border-color: var(--hud-border-strong);
}

.home-pet-banner:active {
  scale: 0.985;
  transition-duration: var(--dur-press);
}

.home-pet-avatar {
  inline-size: 2.35rem;
  block-size: 2.35rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--hud-gold-soft);
}

.home-pet-avatar svg {
  inline-size: 2rem;
  block-size: 2rem;
}

.home-pet-copy {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.home-pet-copy strong {
  font-size: 0.84rem;
  color: var(--hud-gold);
}

.home-pet-copy span {
  font-size: 0.75rem;
  color: var(--hud-ink-secondary);
}

.studio-launch-btn {
  margin-block-start: var(--space-xs);
  justify-content: center;
}

/* Life's 3 Little Dreams Strip + Native <progress> (modern-web-guidance: progress) */
.dreams-strip {
  padding: 0.64rem 0.82rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-card);
}

.dreams-strip.is-grand-slam {
  border-color: var(--color-border-strong);
  background: var(--color-accent-soft);
}

.dreams-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: var(--space-xs);
}

.dreams-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.dream-crown-glyph {
  color: var(--color-accent);
}

.dreams-heading {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 740;
  color: var(--color-ink);
}

.dreams-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

@media (max-width: 720px) {
  .dreams-grid {
    grid-template-columns: 1fr;
  }
}

.dream-item {
  padding: 0.48rem 0.62rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.dream-item.is-done {
  border-color: var(--color-health-border);
  background: var(--color-health-soft);
}

.dream-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 680;
  color: var(--color-ink);
}

.dream-item-count {
  font-family: var(--font-outlier);
  font-size: 0.74rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.dream-item.is-done .dream-item-count {
  color: var(--color-reward-ink);
  font-weight: 750;
}

/* Custom Horizontal <progress> — ungrouped browser pseudo-elements (modern-web-guidance: progress) */
progress.dream-progress {
  --progress-bar-radius: 999px;
  --progress-bar-track: var(--color-paper-3);
  --progress-bar-fill: var(--color-accent);
  appearance: none;
  border: 0 solid;
  overflow: clip;
  inline-size: 100%;
  block-size: 0.44rem;
  border-radius: var(--progress-bar-radius);
  background: var(--progress-bar-track);
  display: block;
}

.dream-item.is-done progress.dream-progress {
  --progress-bar-fill: var(--color-health);
}

progress.dream-progress::-webkit-progress-bar {
  background: transparent;
}

progress.dream-progress::-webkit-progress-value {
  background: var(--progress-bar-fill);
  border-radius: var(--progress-bar-radius);
}

progress.dream-progress::-moz-progress-bar {
  background: var(--progress-bar-fill);
  border-radius: var(--progress-bar-radius);
}

/* World Wave Modifier Bar + Seed PK Chip */
.world-wave-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs) 0.7rem;
  margin-block-end: 0.54rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-mind-border);
  background: var(--color-mind-soft);
}

.world-wave-bar.is-meteor-wave {
  border-color: var(--color-violet-border);
  background: var(--color-violet-soft);
}

.wave-info {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-inline-size: 0;
}

.wave-glyph {
  color: var(--color-mind);
  flex-shrink: 0;
}

.world-wave-bar.is-meteor-wave .wave-glyph {
  color: var(--color-violet);
}

.wave-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.42rem;
  font-size: 0.8rem;
}

.wave-copy strong {
  color: var(--color-ink);
  font-weight: 740;
}

.wave-copy span {
  color: var(--color-ink-2);
}

.seed-chip-btn code {
  font-family: var(--font-outlier);
  font-size: 0.74rem;
}

/* 0-Energy Prismatic Miracle Foil Card (Stationary outer hit-box!) */
.tarot-card.is-prismatic .tarot-card-surface {
  border-width: 1.5px;
  border-color: var(--color-accent);
  background: var(--prismatic-surface), var(--color-card);
  box-shadow: var(--shadow-prismatic);
}

.prismatic-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.14rem 0.48rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 740;
  background: var(--color-violet-soft);
  border: 1px solid var(--color-violet-border);
  color: var(--color-ink);
}

.tarot-cost-free {
  background: var(--color-health-soft);
  border-color: var(--color-health-border);
  color: var(--color-reward-ink);
}

/* Pass, Gacha, Passport & Studio Dialog */
.pass-dialog {
  inline-size: min(58rem, calc(100vw - 1.5rem));
}

.storybook-dialog {
  inline-size: min(56rem, calc(100vw - 1.5rem));
}

.pass-tablist {
  margin-block-end: 0.85rem;
}

.gacha-machine-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-strong);
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.gacha-machine-copy {
  flex: 1 1 20rem;
  min-inline-size: 0;
}

.subpanel-heading {
  margin: 0 0 0.28rem;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 750;
  color: var(--color-ink);
}

.subpanel-desc {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--color-ink-2);
}

.gacha-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-start: 0.55rem;
}

.gacha-result-banner {
  margin-block-start: 0.62rem;
  padding: 0.58rem var(--space-sm);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-health-border);
  background: var(--color-card);
  font-size: 0.84rem;
  color: var(--color-ink);
}

.pet-card-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.pet-card-illust {
  inline-size: 2.8rem;
  block-size: 2.8rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.pet-card-illust svg {
  inline-size: 2.35rem;
  block-size: 2.35rem;
}

.globe-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
  margin-block-start: 0.58rem;
}

/* Semantic Circular Progress Ring (modern-web-guidance: progress-ring) */
.passport-section-panel {
  margin-block-start: var(--space-md);
  padding: 0.95rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  display: grid;
  grid-template-columns: minmax(12rem, 14.5rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}

@media (max-width: 720px) {
  .passport-section-panel {
    grid-template-columns: 1fr;
  }
}

.passport-ring-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}

.passport-ring-caption strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-ink);
}

.passport-ring-caption p {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.progress-ring-wrapper {
  position: relative;
  display: grid;
  place-items: center;
}

progress.progress-ring::-webkit-progress-bar {
  display: none;
  background: none;
}

progress.progress-ring::-webkit-progress-value {
  display: none;
  background: none;
}

progress.progress-ring::-moz-progress-bar {
  display: none;
  background: none;
}

progress.progress-ring::slider-fill {
  display: none;
  background: none;
}

progress.progress-ring {
  --size: 118px;
  --thickness: 13px;
  --max: 172;
  --track-color: var(--color-paper-3);
  --fill-color: var(--color-accent);
  --value: attr(value type(<number>));
  appearance: none;
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  background: conic-gradient(
    var(--fill-color) calc((var(--value) / var(--max)) * 100%),
    var(--track-color) 0
  );
  background-clip: border-area;
  border: var(--thickness) solid transparent;
  background-origin: border-box;
  transition: --value 0s ease-in-out;

  @media (prefers-reduced-motion: no-preference) {
    transition-duration: 0.4s;
  }

  @supports not (background-clip: border-area) {
    -webkit-mask-image: radial-gradient(
      transparent calc(50% - var(--thickness)),
      black calc(50% - var(--thickness) + 0.5px)
    );
    mask-image: radial-gradient(
      transparent calc(50% - var(--thickness)),
      black calc(50% - var(--thickness) + 0.5px)
    );
    border: 0;
  }

  @media (forced-colors: active) {
    forced-color-adjust: none;
    --fill-color: CanvasText;
    --track-color: Canvas;
  }
}

.progress-ring-content {
  position: absolute;
  font-family: var(--font-outlier);
  font-size: 0.92rem;
  font-weight: 760;
  color: var(--color-ink);
}

.passport-regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-xs);
}

.passport-region-card {
  padding: 0.54rem 0.66rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.79rem;
}

.passport-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  font-weight: 700;
  color: var(--color-ink);
}

/* Forms & Choice Cards (modern-web-guidance: forms + card) */
.studio-panel {
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  margin-block-end: 0.85rem;
}

.studio-vip-panel {
  border-color: var(--color-border-strong);
}

.studio-vip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.studio-unlock-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: 0.65rem;
}

.studio-unlock-callout p {
  margin: 0;
  font-size: 0.82rem;
}

.mwg-form {
  margin-block-start: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.form-row-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (max-width: 680px) {
  .form-row-2col {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
}

.form-field label {
  font-size: 0.82rem;
  font-weight: 680;
  color: var(--color-ink);
}

.form-field input[type="text"] {
  font: inherit;
  font-size: max(1rem, 1em);
  padding: 0.62rem 0.78rem;
  min-block-size: 48px;
  box-sizing: border-box;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--color-rule);
  background: var(--color-paper-solid);
  color: var(--color-ink);
}

@media (pointer: coarse) {
  .form-field input[type="text"] {
    min-block-size: 52px;
  }
}

.form-field input[type="text"]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Non-intrusive validation styling — never raw :invalid alone */
.form-field input[type="text"]:user-invalid,
.form-field input[type="text"][aria-invalid="true"] {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.field-hint {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.field-error {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 680;
  color: var(--color-danger);
}

.choice-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.choice-fieldset legend {
  padding: 0;
  margin-block-end: 0.38rem;
  font-size: 0.82rem;
  font-weight: 680;
  color: var(--color-ink);
}

.choice-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Stationary Choice Card — constant 2px border so selection never jumps layout (modern-web-guidance: card) */
.choice-card {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-block-size: 48px;
  padding: 0.44rem 0.76rem;
  border-radius: var(--radius-control);
  border: 2px solid var(--color-rule);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);

  &:has(> :checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
  }

  &:has(> :focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
}

.choice-card input[type="radio"] {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.form-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

/* Supporter Pass Tier Comparison Cards */
.vip-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 720px) {
  .vip-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.tier-card {
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tier-card-vip {
  border: 2px solid var(--color-accent);
  background:
    linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-card) 48%);
  box-shadow: var(--shadow-card-hover);
}

.tier-card hgroup h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--color-ink);
}

.tier-card hgroup p {
  margin: 0.22rem 0 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-accent);
}

.tier-perk-list {
  margin: 0;
  padding-inline-start: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  font-size: 0.83rem;
  line-height: 1.48;
  color: var(--color-ink-2);
  flex: 1;
}

.pass-reset-btn {
  margin-block-start: 0.45rem;
}

/* Wonder Score & Seed Duel Box inside Death Summary */
.wonder-score-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0.62rem 0;
  padding: 0.58rem 0.78rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background: var(--color-accent-soft);
}

.wonder-score-main strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
}

.wonder-score-main span {
  display: block;
  font-size: 0.78rem;
  color: var(--color-ink-2);
}

/* Illustrated Printable Keepsake Storybook */
.storybook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.storybook-pages-host {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 0.8rem;
}

.storybook-page {
  padding: var(--space-md) 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-strong);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: var(--shadow-card);
}

.storybook-page-cover {
  background:
    linear-gradient(155deg, var(--color-accent-soft) 0%, var(--color-paper-solid) 65%);
}

.storybook-page-num {
  font-family: var(--font-outlier);
  font-size: 0.74rem;
  color: var(--color-accent);
  font-weight: 740;
}

.storybook-page h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--color-ink);
}

.storybook-page p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.56;
  color: var(--color-ink-2);
}

@media print {
  .topbar,
  .app-stage,
  .storybook-actions {
    display: none !important;
  }
  dialog.storybook-dialog[open] {
    position: static;
    max-block-size: none;
    inline-size: 100%;
    border: 0;
    box-shadow: none;
  }
}


/* ============ V7 GLOBAL SITE HEADER & RESPONSIVE NAVBAR (modern-web-guidance: navbar) ============ */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 44;
  background: var(--color-topbar);
  color: var(--color-topbar-ink);
  border-block-end: 1px solid var(--color-rule);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.site-header.is-measuring * {
  transition: none !important;
}

.header-inner {
  max-inline-size: 92rem;
  margin-inline: auto;
  padding-block: 0.46rem;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  overflow: visible;
}

/* Keep the row's natural width measurable (navbar) */
.header-inner > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
  text-decoration: none;
  color: var(--color-topbar-ink);
}

.site-logo:hover .brand-title {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  align-items: center;
}

.site-header .menu-button {
  anchor-name: --menu-button;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-block-size: 2.1rem;
  padding-block: 0.32rem;
  padding-inline: 0.78rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  font-size: 0.84rem;
  font-weight: 650;
}

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

/* Narrow Layout: Popover Navigation with preceding fixed fallback before anchor() (navbar) */
.site-header .site-menu {
  list-style: none;
  padding: 0.65rem;
  margin: 0;
  position: fixed;
  inset: auto;
  inset-block-start: 3.45rem;
  inset-block-start: anchor(--menu-button bottom);
  inset-inline-end: var(--space-md);
  inline-size: min(82dvw, 22.5rem);
  max-inline-size: calc(100dvw - 2rem);
  block-size: fit-content;
  max-block-size: calc(100dvh - 5rem);
  margin-block-start: var(--space-xs);
  overflow: auto;
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  box-shadow: var(--shadow-modal);
}

.site-menu > li {
  margin: 0;
}

.site-menu a,
.site-header .dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.38rem;
  inline-size: 100%;
  padding-block: 0.44rem;
  padding-inline: 0.72rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
}

.site-menu a:hover,
.site-header .dropdown-trigger:hover {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

/* Current page indicator: non-color cue (font-weight + bottom border >= 3:1 contrast) */
.site-menu a[aria-current="page"] {
  font-weight: 760;
  background: var(--color-accent-soft);
  border-color: var(--color-border-strong);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 2px;
}

.dropdown-chevron {
  inline-size: 0.88rem;
  block-size: 0.88rem;
  transition: rotate var(--dur-micro) var(--ease-out);
}

.dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
  rotate: 180deg;
}

/* Narrow layout nested language list */
.site-header .dropdown-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0.42rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem;
}

.site-header .dropdown-list a {
  padding-block: 0.34rem;
  padding-inline: 0.56rem;
  font-size: 0.8rem;
}

/* Wide Layout: Inline Navigation when row fits (navbar) */
.site-header.is-wide .menu-button {
  display: none;
}

.site-header.is-wide .site-menu {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  max-block-size: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.site-header.is-wide .site-menu::backdrop {
  display: none;
}

.site-header.is-wide .site-menu > li > a,
.site-header.is-wide .dropdown-trigger {
  inline-size: auto;
  padding-block: 0.36rem;
  padding-inline: 0.68rem;
}

.site-header.is-wide .nav-dropdown {
  position: relative;
}

.site-header.is-wide .dropdown-list[popover] {
  position: absolute;
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block, flip-inline;
  inset: auto;
  height: auto;
  inline-size: max-content;
  min-inline-size: 22rem;
  max-inline-size: min(38rem, calc(100dvw - 2rem));
  margin-block-start: var(--space-xs);
  padding: 0.62rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  box-shadow: var(--shadow-modal);
  overflow: visible;
}

@supports not (position-area: block-end) {
  .site-header.is-wide .dropdown-list[popover] {
    position: fixed;
    margin: 0;
  }
}

.site-header.is-wide .dropdown-list::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: 0.55rem;
}

.site-header.is-wide .dropdown-list:not(:is(:popover-open, .\:popover-open)) {
  display: none;
}

.site-header.is-wide .dropdown-list:is(:popover-open, .\:popover-open) {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.6rem, 1fr));
  gap: 0.22rem;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header:not(.is-wide) .site-menu[popover],
  .site-header.is-wide .dropdown-list[popover] {
    opacity: 0;
    translate: 0 -0.35rem;
    transition: opacity var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out), display var(--dur-micro) var(--ease-out), overlay var(--dur-micro) var(--ease-out);
    transition-behavior: allow-discrete;
  }

  .site-header:not(.is-wide) .site-menu[popover]:is(:popover-open, .\:popover-open),
  .site-header.is-wide .dropdown-list[popover]:is(:popover-open, .\:popover-open) {
    opacity: 1;
    translate: 0 0;

    @starting-style {
      opacity: 0;
      translate: 0 -0.35rem;
    }
  }
}

@media (forced-colors: active) {
  .site-menu a[aria-current="page"] {
    border: 2px solid CanvasText;
    text-decoration: underline;
  }
}

/* ============ BREADCRUMBS (modern-web-guidance: breadcrumbs) ============ */
.breadcrumb {
  margin-block-end: 0.9rem;
}

.breadcrumb > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb > ol > li {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

/* Empty alt text after slash hides divider from screen readers (breadcrumbs) */
.breadcrumb > ol > li + li::before {
  content: "/" / "";
  color: var(--color-muted);
  font-weight: 600;
}

.breadcrumb > ol > li > a {
  color: var(--color-ink-2);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  padding-block: 0.16rem;
  padding-inline: 0.3rem;
  border-radius: var(--radius-sm);
}

.breadcrumb > ol > li > a:hover {
  color: var(--color-ink);
  background: var(--color-accent-soft);
}

.breadcrumb > ol > li > a[aria-current="page"] {
  font-weight: 760;
  color: var(--color-ink);
  text-decoration-thickness: 2px;
}

.breadcrumb > ol > li > a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .breadcrumb > ol > li > a[aria-current="page"] {
    border: 1px solid CanvasText;
    text-decoration: underline;
  }
}

/* ============ 2D6 LUCKY BOOST DICE MINIGAME TRAY ============ */
.lucky-dice-box {
  margin-block: var(--space-sm);
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius-card);
  background: var(--hud-glass-solid);
  border: 1px solid var(--hud-border-strong);
  color: var(--hud-ink);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.lucky-dice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lucky-dice-title-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.92rem;
  color: var(--hud-ink);
}

.lucky-dice-title-pair .btn-glyph {
  color: var(--hud-gold);
}

.lucky-dice-tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.72rem 0.85rem;
  border-radius: var(--radius-control);
  background: var(--hud-elevated);
  border: 1px solid var(--hud-border);
}

.lucky-dice-pair {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.boost-die-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-inline-size: 4.9rem;
  min-block-size: 5.1rem;
  padding: 0.42rem var(--space-xs);
  border-radius: var(--radius-card);
  border: 1px solid var(--hud-border);
  background: var(--hud-glass);
  color: var(--hud-ink);
  scale: 1;
  transition:
    scale var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}

.boost-die-btn:hover:not(:disabled) {
  border-color: var(--hud-gold);
  background: var(--hud-gold-soft);
}

.boost-die-btn:active:not(:disabled) {
  scale: 0.96;
}

.boost-die-btn.is-held {
  border-color: var(--hud-gold);
  background: var(--hud-gold-soft);
  box-shadow: 0 0 0 1px var(--hud-gold);
}

.boost-die-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d6-pip-svg {
  inline-size: 3.35rem;
  block-size: 3.35rem;
}

.boost-die-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hud-ink-secondary);
}

.boost-die-btn.is-held .boost-die-tag {
  color: var(--hud-gold);
}

.lucky-dice-actions {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  flex: 1;
  min-inline-size: 11.5rem;
}

.lucky-dice-hint {
  margin: 0;
  color: var(--hud-ink-secondary);
  line-height: 1.44;
}

@keyframes diceTumble {
  0% { rotate: 0deg; scale: 1; }
  25% { rotate: -9deg; scale: 1.05; }
  50% { rotate: 8deg; scale: 0.97; }
  75% { rotate: -5deg; scale: 1.03; }
  100% { rotate: 0deg; scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .boost-die-btn.is-tumbling {
    animation: diceTumble 180ms var(--ease-in-out) infinite;
  }
}

/* ============ MEMBER HUB & CLOUD KEEP DIALOG (#memberDialog) ============ */
.member-dialog {
  max-inline-size: min(50rem, calc(100% - var(--space-lg)));
}

.member-status-banner {
  padding: 0.62rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-mind-border);
  background: var(--color-mind-soft);
  color: var(--color-ink);
  font-size: 0.84rem;
  font-weight: 600;
  margin-block-end: 0.72rem;
}

.member-status-banner.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.member-auth-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.78rem 0.92rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  margin-block-end: var(--space-sm);
}

.member-auth-info {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.member-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.password-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}

.password-input-row .studio-input {
  flex: 1;
}

.vault-actions-row,
.community-compose-actions,
.cloud-life-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.48rem;
  margin-block-start: 0.45rem;
}

.cloud-keep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: 0.65rem;
}

.cloud-keep-list,
.community-posts-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-block-start: 0.55rem;
}

.cloud-life-row,
.community-note-card {
  padding: 0.72rem 0.88rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-solid);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
}

.cloud-life-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cloud-life-meta {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.community-note-head,
.community-note-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.community-note-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.54;
  color: var(--color-ink);
}

.studio-textarea {
  resize: vertical;
  min-block-size: 4.5rem;
}

.community-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
}

.short-share-result {
  margin-block-start: 0.65rem;
  padding: 0.68rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.short-share-link {
  color: var(--color-ink);
  font-weight: 700;
  font-family: var(--font-outlier);
  font-size: 0.84rem;
}

.gallery-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.58rem;
  margin-block-start: 0.6rem;
}

/* ============ CRAWLABLE SSR KNOWLEDGE DECK & GLOBAL FOOTER ============ */
.ssr-knowledge-deck {
  border-block-start: 1px solid var(--color-rule);
  background: var(--color-paper-solid);
  padding-block: 2.4rem;
  padding-inline: 1.25rem;
}

.ssr-deck-inner {
  max-inline-size: 76rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.ssr-deck-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.82rem);
}

.ssr-deck-header p {
  margin: 0.45rem 0 0;
  max-inline-size: 68ch;
  color: var(--color-ink-2);
}

.ssr-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.88rem;
}

.ssr-pillar-card {
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

.ssr-pillar-card h3 {
  margin: 0 0 0.38rem;
  font-size: 1.02rem;
}

.ssr-pillar-card p {
  margin: 0 0 0.58rem;
  font-size: 0.86rem;
  color: var(--color-ink-2);
  line-height: 1.56;
}

.ssr-pillar-card a,
.ssr-country-links-bar a {
  color: var(--color-accent-strong);
  font-weight: 680;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.ssr-country-links-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.58rem 0.9rem;
  padding-block-start: 0.65rem;
  border-block-start: 1px solid var(--color-rule);
}

.site-footer {
  border-block-start: 1px solid var(--color-rule);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  padding-block: 2rem;
  padding-inline: 1.25rem;
  margin-block-start: auto;
}

.site-footer-inner {
  max-inline-size: 82rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer-brand p {
  margin: 0.28rem 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
  max-inline-size: 72ch;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem var(--space-md);
}

.site-footer-links a {
  color: var(--color-ink-2);
  font-size: 0.83rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer-links a:hover {
  color: var(--color-ink);
}

/* ============ EDITORIAL & PROGRAMMATIC SUBPAGE ARCHITECTURE ============ */
.subpage-main {
  flex: 1;
  inline-size: 100%;
  max-inline-size: 74rem;
  margin-inline: auto;
  padding-block: 1.8rem 3rem;
  padding-inline: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.doc-hero {
  padding: 1.55rem 1.75rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.doc-hero h1 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.16;
}

.doc-lead {
  margin: 0;
  max-inline-size: 68ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--color-ink-2);
}

.doc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: 0.35rem;
}

.doc-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-md);
}

.doc-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.9rem;
}

.doc-card {
  padding: 1.2rem 1.35rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.doc-card h2,
.doc-card h3 {
  margin: 0;
  line-height: 1.26;
}

.doc-card h2 {
  font-size: 1.26rem;
}

.doc-card h3 {
  font-size: 1.04rem;
}

.doc-card p,
.doc-card li {
  font-size: 0.93rem;
  line-height: 1.64;
  color: var(--color-ink-2);
}

.doc-card p {
  margin: 0;
  max-inline-size: 70ch;
}

.doc-card ul,
.doc-card ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.country-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.78rem;
}

.country-stat-tile {
  padding: 0.95rem 1.08rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}

.country-stat-val {
  font-family: var(--font-display);
  font-size: 1.48rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.country-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
}

.country-hub-toolbar .studio-input {
  flex: 1;
  min-inline-size: 14rem;
}

.country-region-group {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.country-region-heading {
  margin: 0;
  font-size: 1.18rem;
  color: var(--color-ink);
}

.country-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.72rem;
}

.country-dir-card {
  padding: 0.88rem var(--space-md);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.country-dir-card:nth-child(n + 25) {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 5.4rem;
}

.country-dir-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-card-hover);
}

.country-dir-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-weight: 740;
}

.compare-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-block-end: 0.65rem;
}

.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 0.64rem 0.88rem;
  border-block-end: 1px solid var(--color-rule);
  text-align: start;
}

.data-table th {
  font-weight: 720;
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.faq-item {
  padding: 0.88rem 1.05rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
}

.faq-item h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}

.faq-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-2);
  line-height: 1.58;
}

.code-block {
  margin: 0;
  padding: 0.85rem var(--space-md);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: 0.82rem;
  overflow-x: auto;
}

@media print {
  .site-header,
  .site-footer,
  .doc-hero-actions {
    display: none !important;
  }
  .subpage-main {
    max-inline-size: none;
    padding: 0;
  }
}

/* Additional SSR Deck & Member Hub Card Refinements */
.ssr-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 820px) {
  .ssr-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ssr-deck-title {
  margin-block: var(--space-2xs) var(--space-xs);
  margin-inline: 0;
  font-size: clamp(1.38rem, 2.2vw, 1.85rem);
  line-height: 1.2;
}

.ssr-deck-lead {
  margin: 0;
  color: var(--color-ink-2);
  line-height: 1.62;
  max-inline-size: 66ch;
}

.ssr-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.65rem;
}

.ssr-stat-card {
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.ssr-stat-card strong {
  font-family: var(--font-display);
  font-size: 1.26rem;
  color: var(--color-accent-strong);
}

.ssr-stat-card span {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.42;
}

.ssr-columns-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 0.88rem;
}

.ssr-feature-box,
.gallery-room-card {
  padding: var(--space-md) 1.12rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.ssr-feature-box h3 {
  margin: 0;
  font-size: 1.02rem;
}

.ssr-feature-box p,
.gallery-room-epitaph {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-ink-2);
  line-height: 1.56;
}

.text-link {
  color: var(--color-accent-strong);
  font-weight: 680;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.member-empty-note {
  margin: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.community-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#shortShareUrlInput {
  flex: 1;
  min-inline-size: 13rem;
  padding: 0.45rem 0.72rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: 0.82rem;
}