/* Pinned, unmodified OFL fonts; provenance and licenses: assets/fonts/README.md.
   Swap keeps the application usable when a font is slow or unavailable. Native
   face resources await these same CSS faces before sampling/rasterizing text. */
@font-face {
  font-family: Fraunces;
  src: url('/assets/fonts/fraunces-bbda7253.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-87b37a2d.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-italic-87b37a2d.woff2') format('woff2');
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* Device card size: the Card size setting writes --card-scale on :root.
     Measures are whole pixels, as the native scene rounds them, so layout
     never snaps a card away from its painted position. */
  --card-scale: 1;
  --card-width: round(calc(8rem * var(--card-scale)), 1px);
  --card-height: round(calc(11.2rem * var(--card-scale)), 1px);
  /* A square slot fits a card turned sideways by exhaustion. */
  --card-slot: calc(var(--card-height) + 2 * var(--card-edge));
  --card-tuck: round(calc(4rem * var(--card-scale)), 1px);
  /* Cost, attack and health sit across the frame; regions leave them room. */
  --card-edge: round(calc(.7rem * var(--card-scale)), 1px);
  /* Card colours, shared by colour-toned faces and tabletop playmats. */
  --card-colour-neutral: #aaa397;
  --card-colour-green: #59b769;
  --card-colour-blue: #568fef;
  --card-colour-black: #6c6180;
  --card-colour-purple: #d28fe6;
  --card-colour-red: #e06c5c;
  --card-colour-white: #eae4d3;
  /* Width of a drawer docked beside the tabletop, and of the space it covers. */
  --side-drawer-width: min(24rem, calc(100vw - 3rem));
  /* Charcoal and slate from entry to table, with restrained blue controls.
     Faction colours, physical gold and semantic status colours stay distinct. */
  --color-canvas: #10141c;
  --color-surface: #191f2a;
  --color-surface-raised: #222b39;
  --color-surface-hover: #2b3748;
  --color-felt: #171e28;
  --color-border: #354052;
  --color-border-strong: #56657b;
  --color-rule: #829cc34a;
  /* Card identity and rules panels over artwork, and their near-neutral
     text, which cooldown grayscale leaves unchanged. */
  --card-ink: #16202f;
  --card-text: #f4f5f9;
  --card-title-top: #29384d;
  --card-rules-top: #e7ebf1;
  --card-rules-bottom: #cfd8e4;
  --card-rules-ink: #263247;
  --card-type-ink: #47566b;
  --card-rules-border: #718197;
  --color-text: #edf0f6;
  --color-text-secondary: #bcc7d8;
  --color-muted: #8e9caf;
  --color-primary: #345d90;
  --color-primary-hover: #4273ad;
  --color-focus: #98bdeb;
  --color-accent: #a5bddc;
  --color-target: #75cbd0;
  --color-target-glow: #75cbd073;
  --font-display: Fraunces, Georgia, 'Times New Roman', serif;
  --font-reading: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  --color-danger-border: #b84a3e;
  --color-danger: #f08670;
  --color-warning-border: #b08a45;
  --color-warning: #ebc46c;
  --color-active: #5fb58e;
  --color-warning-glow: rgb(235 196 108 / 40%);
  --color-success-border: #3f8566;
  --color-success-surface: #15342a;
  --color-success: #94d4b2;
  --color-warning-surface: #3e321b;
  --color-on-primary: #f5f7fc;
  --color-backdrop: rgb(4 9 10 / 68%);
  --shadow-panel: 0 1rem 3rem rgb(0 0 0 / 35%);
  --radius-panel: .65rem;
  --radius-control: .4rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  color-scheme: dark;
  font-family: var(--font-reading);
  background: var(--color-canvas);
  color: var(--color-text);
  line-height: 1.45;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(ellipse at 20% 0, var(--color-surface-raised) 0, transparent 52rem);
}

h1, h2 { font-family: var(--font-display); font-weight: 500; }
h1 { letter-spacing: -.025em; }
h3, h4 { font-family: var(--font-display); font-weight: 600; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }

button {
  font: inherit;
  font-family: var(--font-reading);
  font-weight: 600;
}

input {
  font: inherit;
}

select {
  font: inherit;
}

button {
  border: 1px solid var(--color-accent);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-control);
  padding: .65rem .85rem;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

button:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-canvas);
  color: var(--color-text);
  border-radius: var(--radius-control);
  padding: .62rem .7rem;
}

select {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-canvas);
  color: var(--color-text);
  border-radius: var(--radius-control);
  padding: .62rem .7rem;
}

input:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

a { color: var(--color-focus); text-underline-offset: .2em; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
button[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}

/* An accepted card whose arrival playback has not shown yet keeps its slot. */
[data-presentation-pending] { visibility: hidden; }

/* Card back for hidden-card animation copies; native backs read these rules,
   so keep the hatch-then-radial background, inset border and emblem. */
[data-card-back] { width:112px; height:160px; border-radius:9px; overflow:hidden; color:#fff; box-shadow:0 3px 8px #0009; font:600 13px system-ui; }
[data-card-back] { position:relative; display:grid; place-content:center; border:1px solid #6b6248; background:repeating-linear-gradient(45deg,transparent,transparent 5px,#dec18a0a 5px,#dec18a0a 6px),radial-gradient(ellipse at 50% 35%,#24403c,#0c1817 80%); }
[data-card-back]::before { content:""; position:absolute; inset:.45rem; border:1px solid #5d5640; border-radius:.2rem; }
[data-card-back-emblem] { display:grid; width:3.5rem; height:3.5rem; place-items:center; border:1px solid #a58f5f; transform:rotate(45deg); }
[data-card-back-emblem] span { transform:rotate(-45deg); color:#e2cf9f; font:2rem var(--font-display); }
[data-card-back-title] { position:absolute; bottom:1.2rem; width:100%; text-align:center; font-size:.55rem; letter-spacing:.24em; color:#b9a77c; }