: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));
  --color-canvas: #0d1117;
  --color-surface: #161b22;
  --color-surface-raised: #21262d;
  --color-border: #30363d;
  --color-border-strong: #484f58;
  --color-text: #e6edf3;
  --color-text-secondary: #b1bac4;
  --color-muted: #8b949e;
  --color-primary: #1f6feb;
  --color-focus: #388bfd;
  --color-danger-border: #da3633;
  --color-danger: #ff7b72;
  --color-warning-border: #d29922;
  --color-warning: #f2cc60;
  --color-active: #3fb950;
  --color-warning-glow: rgb(242 204 96 / 42%);
  --color-success-border: #238636;
  --color-success-surface: #173b24;
  --color-success: #7ee787;
  --color-warning-surface: #5a4318;
  --color-on-primary: #fff;
  --color-backdrop: rgb(0 0 0 / 65%);
  --shadow-panel: 0 1rem 3rem rgb(0 0 0 / 35%);
  --radius-panel: .8rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: var(--color-canvas);
  color: var(--color-text);
  line-height: 1.45;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

button {
  font: inherit;
}

input {
  font: inherit;
}

select {
  font: inherit;
}

button {
  border: 1px solid var(--color-focus);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: .45rem;
  padding: .65rem .85rem;
  cursor: pointer;
}

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

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: .45rem;
  padding: .62rem .7rem;
}

select {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-canvas);
  color: var(--color-text);
  border-radius: .45rem;
  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; }

/* 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. */
[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 #6c777e; background:repeating-linear-gradient(45deg,transparent,transparent 5px,#b8c9d108 5px,#b8c9d108 6px),radial-gradient(ellipse at 50% 35%,#324956,#101b27 80%); }
[data-card-back]::before { content:""; position:absolute; inset:.45rem; border:1px solid #65717c; border-radius:.2rem; }
[data-card-back-emblem] { display:grid; width:3.5rem; height:3.5rem; place-items:center; border:1px solid #88969c; transform:rotate(45deg); }
[data-card-back-emblem] span { transform:rotate(-45deg); color:#d0d8d4; font:2rem Georgia,serif; }
[data-card-back-title] { position:absolute; bottom:1.2rem; width:100%; text-align:center; font-size:.55rem; letter-spacing:.24em; color:#a5b2b9; }