/* ==========================================================================
   PokerStacker — Design System (Phase A: redesign tokens)
   Three skins, one schema. Default: felt.
   Source: .gsd/redesign/tokens.css
   ========================================================================== */

:root,
body[data-skin="felt"] {
  /* Surfaces */
  --bg:          oklch(20% 0.020 155);    /* deep felt */
  --bg-2:        oklch(24% 0.022 155);    /* subtle lift */
  --surface:     oklch(28% 0.025 155);    /* card */
  --surface-2:   oklch(33% 0.028 155);    /* hover/input */
  --surface-3:   oklch(40% 0.030 155);
  --border:      oklch(38% 0.028 155);    /* hairlines */
  --border-soft: oklch(30% 0.024 155);

  /* Text */
  --fg:          oklch(95% 0.012 80);     /* warm paper */
  --fg-strong:   oklch(98% 0.010 80);
  --muted:       oklch(74% 0.018 85);     /* AA on bg */
  --muted-2:     oklch(56% 0.020 85);     /* tertiary */

  /* Accent (single) */
  --accent:      oklch(78% 0.105 85);     /* champagne brass */
  --accent-dim:  oklch(60% 0.085 85);
  --accent-ink:  oklch(20% 0.020 155);    /* text-on-accent */

  /* Semantics */
  --danger:      oklch(56% 0.135 25);     /* oxblood */
  --danger-dim:  oklch(40% 0.110 25);
  --success:     oklch(74% 0.130 145);    /* moss */
  --info:        oklch(68% 0.080 240);

  /* Suits */
  --suit-red:    oklch(60% 0.165 25);
  --suit-black:  var(--fg);

  /* Typography */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-0: 0 0 0 1px var(--border-soft);
  --shadow-1: 0 1px 0 0 var(--border-soft), 0 8px 24px -16px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 0 var(--border), 0 24px 60px -28px rgba(0,0,0,0.75);

  /* Layout */
  --content-max: 1200px;
  --doc-gutter:  clamp(24px, 6vw, 64px);
  --section-pad: clamp(80px, 12vw, 160px);

  /* Type scale */
  --text-xs:  11px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  22px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* --- Phase A legacy aliases (removed in Phase B as component CSS migrates) --- */
  --font:         var(--font-sans);
  --muted-soft:   var(--muted);
  --r-xl:         var(--r-lg);
  --shadow-sm:    var(--shadow-1);
  --shadow-md:    var(--shadow-2);
  --tab-bar-height: 4rem;
}

/* ---------- TERMINAL skin (alt) ---------- */
body[data-skin="terminal"] {
  --bg:          #050505;
  --bg-2:        #0a0a0a;
  --surface:     #111111;
  --surface-2:   #181818;
  --surface-3:   #232323;
  --border:      #2a2a2a;
  --border-soft: #1a1a1a;

  --fg:          #e8e8e8;
  --fg-strong:   #ffffff;
  --muted:       #9a9a9a;
  --muted-2:     #5e5e5e;

  --accent:      #7df48f;      /* phosphor */
  --accent-dim:  #4ea65c;
  --accent-ink:  #050505;

  --danger:      #ff5a5f;
  --danger-dim:  #a83339;
  --success:     #7df48f;

  --suit-red:    #ff5a5f;
  --suit-black:  var(--fg);

  --font-display: 'Geist Mono', ui-monospace, monospace;
  --font-sans:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
}

/* ---------- PAPER skin (alt) ---------- */
body[data-skin="paper"] {
  --bg:          #f4f1ea;
  --bg-2:        #efeadf;
  --surface:     #ffffff;
  --surface-2:   #f7f3ea;
  --surface-3:   #e9e2d2;
  --border:      #d8cfb9;
  --border-soft: #e6dec8;

  --fg:          #1a1814;
  --fg-strong:   #000000;
  --muted:       #5a544a;
  --muted-2:     #8b8475;

  --accent:      #a8443a;      /* oxblood */
  --accent-dim:  #7a2f27;
  --accent-ink:  #ffffff;

  --danger:      #a8443a;
  --danger-dim:  #7a2f27;
  --success:     #4a7a3a;

  --suit-red:    #a8443a;
  --suit-black:  #1a1814;
}

/* ==========================================================================
   Reset & bas
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin-top: 0;
  margin-bottom: var(--sp-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

p { margin-top: 0; margin-bottom: var(--sp-4); }

/* Shared marketing topbar (shown on /play landing) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: none;
}
.brand svg { color: var(--accent); }
.brand em { font-style: italic; color: var(--accent); }
.topbar nav {
  display: inline-flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-items: center;
}
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
}
.topbar nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0;
}
.topbar nav a:hover { color: var(--accent); }
.topbar nav a.is-active { color: var(--accent); }
.topbar nav a.is-active::after { opacity: 1; }
.topbar nav a.cta {
  background: var(--accent);
  color: var(--accent-on, oklch(12% 0.005 155));
  border: 1px solid var(--accent);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--accent) 40%, transparent);
}
.topbar nav a.cta::after { display: none; }
.topbar nav a.cta:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.topbar nav .cta.is-active {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 880px) {
  .topbar { padding: 14px 20px; }
  .topbar nav { gap: 14px; }
  .topbar nav a:not(.is-active) { display: none; }
}

.ps-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  line-height: 1;
  text-transform: none;
}
.ps-brand__mark {
  color: var(--accent);
  flex-shrink: 0;
}
.ps-brand__text {
  font-size: 18px;
}
.ps-brand__text em {
  font-style: italic;
  color: var(--accent);
}
.ps-brand__text span {
  font-style: normal;
}
.ps-brand--lg .ps-brand__text { font-size: 24px; }
.ps-brand--xl .ps-brand__text { font-size: 32px; }

/* ==========================================================================
   Layout-container (centrerad på desktop)
   ========================================================================== */

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4);
  padding-bottom: calc(var(--tab-bar-height) + var(--sp-4) + env(safe-area-inset-bottom));
}

/* ==========================================================================
   Focus-states — synliga men eleganta
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Inputs
   ========================================================================== */

/* Base — every text/number input and explicit .input */
input[type="number"],
input[type="text"],
.input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  -webkit-appearance: none;
}

input[type="number"]:focus,
input[type="text"]:focus,
.input:focus {
  border-color: var(--accent);
  background: var(--bg-2);
}

input::placeholder,
.input::placeholder { color: var(--muted-2); }

/* Money input — Instrument Serif italic, big */
input.input--money,
.input.input--money {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  padding: 12px 16px;
  text-align: left;
}

/* Mono input — for URLs */
input.input--mono,
.input.input--mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Field wrapper */
.field {
  display: block;
  margin-bottom: var(--sp-5);
}
.field > span,
.field > label,
.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
fieldset.field {
  border: none;
  padding: 0;
  margin-bottom: var(--sp-5);
}
fieldset.field legend {
  padding: 0;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Unified .payout-board: one component used by wizard step 4 and the
   info-tab settings. Houses presets + 3 slots + live bar visualizer. */
.payout-board {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.payout-board > .field__label { margin: 0; }

.payout-slots,
.payout-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.payout-slot,
.payout-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.payout-slot__rank,
.payout-input > span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
}
.payout-slot__suffix {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-align: center;
}
.payout-slot input,
.payout-input input {
  width: 100%;
  padding: 10px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  outline: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.payout-slot input:focus,
.payout-input input:focus {
  border-color: var(--accent);
  background: var(--bg-2);
}
.payout-slot input::-webkit-outer-spin-button,
.payout-slot input::-webkit-inner-spin-button,
.payout-input input::-webkit-outer-spin-button,
.payout-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Live bar visualizer — segments grow to their pct via JS-set flex,
   draggable handles between segments let you rebalance directly. */
.payout-bar {
  position: relative;
  height: 22px;
  display: flex;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  touch-action: none;
}
.payout-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-ink);
  flex: 0 0 0;
  transition: flex 0.3s var(--ease);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.payout-bar__seg:first-of-type { border-radius: 5px 0 0 5px; }
.payout-bar__seg:last-of-type { border-radius: 0 5px 5px 0; }
.payout-bar__seg--1 { background: var(--accent); }
.payout-bar__seg--2 { background: color-mix(in oklab, var(--accent) 65%, black); }
.payout-bar__seg--3 { background: color-mix(in oklab, var(--accent) 40%, black); }
/* While dragging, freeze the flex transition so the bar tracks the
   pointer instead of easing behind it. */
.payout-bar[data-dragging] .payout-bar__seg { transition: none; }

/* Draggable boundary handles. Positioned by JS via style.left = `${pct}%`.
   Visible grip via ::after; wide invisible hit-target via padding. */
.payout-bar__handle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 22px;
  margin-left: -11px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
}
/* Override the global button:hover lift — the grip itself is the
   hover affordance, the handle's hit-target stays transparent. */
.payout-bar__handle:hover,
.payout-bar__handle:active,
.payout-bar__handle:focus-visible {
  background: transparent;
  border-color: transparent;
  transform: none;
}
.payout-bar__handle[hidden] { display: none; }
.payout-bar__handle::after {
  content: '';
  width: 4px;
  height: 28px;
  background: var(--fg-strong);
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bg) 60%, transparent);
  transition: transform 0.12s var(--ease), background 0.12s var(--ease);
}
.payout-bar__handle:hover::after,
.payout-bar__handle:focus-visible::after {
  transform: scaleY(1.1);
}
.payout-bar__handle:focus-visible {
  outline: none;
}
.payout-fix {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--accent);
  border: 1px dashed var(--accent-dim);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  min-width: 3rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-style 0.12s;
}
.payout-fix:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-style: solid;
  border-color: var(--accent);
}

.payout-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.payout-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.payout-chip:hover { background: var(--surface-3); color: var(--fg); }
.payout-chip.active,
.payout-chip.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

.payout-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-top: var(--sp-2);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.payout-sum[data-state="ok"] { color: var(--success); }
.payout-sum[data-state="warn"] { color: var(--danger); }
.payout-sum__value {
  color: var(--success);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.payout-sum[data-state="warn"] .payout-sum__value { color: var(--danger); }

.payout-board--editorial {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  display: grid;
  gap: var(--sp-5);
}

.payout-board__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.payout-board__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
  text-transform: none;
}
.payout-board__title em { font-style: italic; color: var(--accent); }
.payout-board__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  letter-spacing: 0.04em;
}

.payout-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-5);
}
@media (max-width: 720px) {
  .payout-grid { grid-template-columns: 1fr; }
}

.payout-viz {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}
.payout-viz__pot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.payout-viz__pot-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.payout-viz__pot-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.payout-list {
  display: grid;
  gap: 6px;
}
.payout-line {
  display: grid;
  grid-template-columns: 28px 60px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.payout-line__rank {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
}
.payout-line__label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.payout-line__bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.payout-line__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s var(--ease);
}
.payout-line__amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}

/* ==========================================================================
   Knapp-system
   ========================================================================== */

/* Base — every <button> and explicit .btn */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.08s var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button:hover,
.btn:hover { background: var(--surface-3); border-color: var(--accent-dim); }
button:active,
.btn:active { transform: translateY(1px); }

/* Primary — editorial pill, serif italic, champagne glow */
button.primary,
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  padding: 16px 28px;
  letter-spacing: 0;
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--accent) 50%, transparent);
}
button.primary:hover,
.btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* Ghost — secondary, recedes */
.btn--ghost {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--muted);
}
.btn--ghost:hover { color: var(--fg); border-color: var(--border); background: var(--surface); }

/* Danger — destructive only */
button.danger,
.btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-dim);
  font-weight: 600;
}
button.danger:hover,
.btn--danger:hover { background: color-mix(in oklab, var(--danger) 14%, transparent); }

/* Sizes */
button.btn-sm {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
}
.btn--lg {
  padding: 18px 26px;
  font-size: 16px;
}
.btn--block { width: 100%; }
button.wide { flex: 1; }

/* Icon-only — 40×40 square */
.icon-btn,
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  border-radius: var(--r-md);
  font-size: 18px;
}
.icon-btn:hover,
.btn--icon:hover { background: var(--surface-2); border-color: var(--border-soft); }

/* Key — italic display CTA ("Deal me in", "Shuffle up") */
.btn--key {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  padding: 16px 28px;
  letter-spacing: 0;
}

/* Error text */
.error { color: var(--danger); font-size: 0.85rem; margin-top: var(--sp-1); }

/* ==========================================================================
   Timer-vy
   ========================================================================== */

.timer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.timer-level {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.timer-level strong { color: var(--accent); font-weight: 600; }

.timer-clock {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(96px, 28vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin: var(--sp-2) 0;
}
.timer-clock--warn { color: var(--accent); }

.timer-blinds {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: 4px;
}
.timer-blinds__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.timer-blinds__value {
  font-family: var(--font-mono);
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.bba-accent { color: var(--accent); }
.bba-accent small {
  font-size: 0.6em;
  letter-spacing: 0.08em;
  vertical-align: baseline;
}

.timer-next {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--sp-5);
  letter-spacing: 0.04em;
}
.timer-next strong { color: var(--fg); font-weight: 600; }

.timer-bba {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-top: 2px;
  text-align: center;
}
.timer-bba__label { opacity: 0.6; margin-right: 4px; }

.timer-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 6px;
  margin-bottom: var(--sp-5);
}
.timer-controls button {
  padding: var(--sp-3);
  font-size: 14px;
}

.timer-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding-block: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.6);
  margin-bottom: var(--sp-5);
}

.players-section {
  margin-bottom: var(--sp-4);
}

/* Legacy controls — kept for player-mode CSS references */
.controls {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Pott-sammanfattning */
.pot-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}

.pot-total {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
}
.pot-total strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}

#payout-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
#payout-list li {
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
#payout-list li .payout-place {
  min-width: 2rem;
}
#payout-list li .payout-pct {
  color: var(--muted-2);
  font-size: 0.8125rem;
  margin-left: auto;
}
#payout-list li strong {
  color: var(--fg);
  min-width: 4.5rem;
  text-align: right;
}

/* ==========================================================================
   Player-summary pill
   ========================================================================== */

.player-summary {
  background: var(--surface);
  color: var(--muted);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-4) 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Banner (color-up & pot-preview)
   ========================================================================== */

/* Tint default — color-up info, pot preview */
.banner {
  background: color-mix(in oklab, var(--accent) 16%, var(--bg-2));
  border: 1px solid var(--accent-dim);
  color: var(--fg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  line-height: 1.45;
}
.banner__text {
  flex: 1;
  min-width: 0;
}
.banner__text strong { color: var(--accent); font-weight: 700; }
.banner .btn { flex-shrink: 0; white-space: nowrap; }

/* Solid — must-acknowledge (color-up "Done", forced confirmation) */
.banner--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.banner--solid .banner__text { color: var(--accent-ink); }
.banner--solid .banner__text strong { color: var(--accent-ink); }
.banner--solid button {
  background: color-mix(in oklab, var(--accent-ink) 22%, transparent);
  color: var(--accent-ink);
  border-color: transparent;
  font-size: 0.875rem;
  padding: var(--sp-1) var(--sp-3);
}
.banner--solid button:hover { background: color-mix(in oklab, var(--accent-ink) 32%, transparent); }

/* ==========================================================================
   Spelare-lista
   ========================================================================== */

#player-list,
.row-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Row — applies to existing #player-list li + new .row markup */
#player-list li,
.row {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  flex-wrap: nowrap;
}
.row__suit {
  font-size: 20px;
  color: var(--muted-2);
  line-height: 1;
}
.row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#player-list .player-name,
.row__name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#player-list .player-meta,
.row__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#player-list .eliminated .player-name,
.row--eliminated .row__name {
  text-decoration: line-through;
  text-decoration-color: var(--muted-2);
  color: var(--muted);
}
#player-list .eliminated .player-meta,
.row--eliminated .row__meta {
  color: var(--muted-2);
}
#player-list .eliminated .place-badge {
  opacity: 0.85;
}
.row--eliminated .row__suit { color: var(--danger-dim); }
.row--winner {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface));
  border-color: var(--accent-dim);
}
.row--winner .row__name { color: var(--accent); }

#player-list .actions,
.row__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
#player-list .actions button {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  min-height: 44px;
}

/* Rebuy = accent tint, positive action */
#player-list .btn-rebuy {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
  border-color: var(--accent-dim);
  font-weight: 600;
}
#player-list .btn-rebuy:hover {
  background: color-mix(in oklab, var(--accent) 24%, transparent);
}

/* Eliminate = destructive, danger outline */
#player-list .btn-eliminate {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-dim);
  font-weight: 500;
}
#player-list .btn-eliminate:hover {
  background: color-mix(in oklab, var(--danger) 14%, transparent);
}

/* − / + Rebuy group sticks together */
#player-list .rebuy-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
#player-list .rebuy-group .btn-remove-rebuy {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  color: var(--accent);
  border-color: var(--accent-dim);
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  min-width: 2rem;
}
#player-list .rebuy-group .btn-remove-rebuy:hover {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}
#player-list .rebuy-group .btn-rebuy {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Persistent undo on eliminated players */
#player-list .btn-undo-eliminate {
  background: color-mix(in oklab, var(--danger) 6%, transparent);
  color: var(--danger);
  border-color: var(--danger-dim);
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
}
#player-list .btn-undo-eliminate:hover {
  background: color-mix(in oklab, var(--danger) 18%, transparent);
}

/* Rebuy-back: distinct from a normal +Rebuy, signals the player will
   be brought back into the active list */
#player-list .btn-rebuy-back {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
}
#player-list .btn-rebuy-back:hover {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Wrapper som centrerar Avsluta-turnering-CTA */
.cta-row {
  display: flex;
  justify-content: center;
  margin: var(--sp-4) 0;
}

/* Side-by-side CTA-par — primary dominant, danger sekundär.
   Primary får 2/3 av bredden, danger 1/3, så hierarkin hålls visuellt. */
.cta-pair {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.cta-pair button.primary {
  flex: 2 1 0;
}
.cta-pair button.danger {
  flex: 1 1 0;
  padding-inline: var(--sp-3);
  font-size: 0.875rem;
}

.place-badge,
.place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 10px;
  background: var(--surface-3);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.place--gold {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ==========================================================================
   Struktur-tabell
   ========================================================================== */

#structure-table,
.struct {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
#structure-table th,
.struct th,
.struct td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
#structure-table th,
.struct th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  background: var(--bg-2);
}
#structure-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
#structure-table tr:last-child td,
.struct tr:last-child td { border-bottom: none; }
#structure-table tr.current,
.struct tr.is-current {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 600;
}
/* Accent stripe on the current row — guides the eye without stealing space */
#structure-table tr.current td:first-child,
.struct tr.is-current td:first-child {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
/* Color-up row = last level before a chip-denom change. Accent-dim bottom
   border + ↓ glyph cue the "minimum chip raises after this row". */
#structure-table tr.color-up,
.struct tr.is-color-up { /* no bg tint — rely on border alone */ }
#structure-table tr.color-up td,
.struct tr.is-color-up td {
  border-bottom-color: var(--accent-dim);
}
#structure-table tr.color-up td:first-child::after,
.struct tr.is-color-up td:first-child::after {
  content: ' ↓';
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   Info-sektioner
   ========================================================================== */

.info-section {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.info-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Monospace URL */
#qr-code {
  display: flex;
  justify-content: flex-start;
  padding: var(--sp-3);
  background: #fff;
  border-radius: var(--r-md);
  width: fit-content;
  margin-bottom: var(--sp-3);
}
.url-display {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  word-break: break-all;
  color: var(--muted);
}

/* ==========================================================================
   Tab-bar (bottom navigation)
   ========================================================================== */

.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-top: 1px solid var(--border-soft);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
}

/* Begränsa tab-bar på desktop */
.tabs > * {
  max-width: var(--content-max);
  width: 100%;
  display: flex;
}

.tabs a {
  flex: 1;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: color 0.15s var(--ease);
  position: relative;
}

.tabs a:hover { color: var(--fg); }

.tabs a small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-sans);
  font-weight: 600;
}

.tabs a.active {
  color: var(--accent);
}

/* Active indicator — small accent bar above the active tab */
.tabs a.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* ≥720px: side-anchored nav rail (per HANDOFF) */
@media (min-width: 720px) {
  :root {
    --nav-rail-width: 88px;
  }

  .tabs {
    top: 0;
    bottom: 0;
    right: auto;
    width: var(--nav-rail-width);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: var(--bg-2);
    border-top: none;
    border-right: 1px solid var(--border-soft);
    padding: var(--sp-6) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .tabs > * {
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: var(--sp-2);
  }
  .tabs a {
    flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-2);
    gap: 6px;
    font-size: 1.5rem;
  }
  .tabs a small { font-size: 10px; }
  /* Active indicator: vertical bar on the right edge */
  .tabs a.active::before {
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
  }

  /* Shift the main content rightward to make room for the rail —
     ONLY when the rail is actually visible. The wizard hides #view-main
     (which contains .tabs), so during wizard we want a full-width
     canvas, not a phantom 88px gutter. */
  body:has(#view-main:not([hidden])) { padding-left: var(--nav-rail-width); }
  body:has(#view-main:not([hidden])) .toast { left: calc(var(--nav-rail-width) + var(--sp-4)); }
  body:has(#view-main:not([hidden])) .net-status { right: 16px; }
  /* No bottom bar on desktop — only clear bottom padding on the main
     view (which used to host the tab bar). Wizard keeps its own
     breathing room from #view-wizard. */
  #view-main.view { padding-bottom: env(safe-area-inset-bottom); }
}

.tab-panel {
  padding-bottom: var(--sp-4);
}

/* ==========================================================================
   Sub-tabs (Timer / Spelare / Struktur)
   ========================================================================== */

.subtabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.subtabs a,
.seg__item {
  flex: 1;
  text-align: center;
  padding: 8px 14px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.12s var(--ease), background 0.12s var(--ease);
}

.subtabs a:hover,
.seg__item:hover {
  color: var(--fg);
}

.subtabs a.active,
.seg__item.is-active {
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--sp-4));
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--surface-3);
  color: var(--fg);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-md);
  z-index: 200;
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid var(--border);
}

.toast button {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-4);
  font-size: 0.875rem;
  border-color: var(--accent);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

/* ==========================================================================
   Statistik
   ========================================================================== */

#stats-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

#stats-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

.stats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.stats-name { font-weight: 700; font-size: 1rem; }
.stats-net {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.stats-net.net-positive { color: var(--success); }
.stats-net.net-negative { color: var(--danger); }
.stats-net.net-zero     { color: var(--muted); }
.stats-net-arrow { font-weight: 900; margin-right: 0.1em; }
.stats-meta { color: var(--muted); font-size: 0.8125rem; }

/* ==========================================================================
   Avräkning / Settlements
   ========================================================================== */

#settlements-list,
#session-settlements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

#settlements-list li,
#session-settlements-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9375rem;
}

.settle-amount,
#session-settlements-list .settle-amount {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ==========================================================================
   Deltagar-pool (chips/tags)
   ========================================================================== */

.participant-pool {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.participant-pool li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.participant-pool button.remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  transition: color 0.12s;
}
.participant-pool button.remove:hover { color: var(--danger); }
.participant-pool button.remove:active { transform: none; }

/* Lägg-till-rad (participant pool — wizard-add-row is defined in wizard block) */
.participant-pool-add {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.participant-pool-add input {
  flex: 1;
  min-width: 0;
}
.participant-pool-add > button {
  flex: 0 0 auto;
  width: auto;
  min-width: 3rem;
  padding: var(--sp-2) var(--sp-4);
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  border-radius: var(--r-md);
}
.participant-pool-add > button:hover { background: color-mix(in oklab, var(--accent) 88%, white 12%); }

/* ==========================================================================
   Session-context-bar (högst upp i main-vy)
   ========================================================================== */

.session-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  padding-right: 76px;
  margin-bottom: var(--sp-4);
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.12s;
}
.session-context:hover { background: var(--surface-2); }
.session-context strong { color: var(--accent); }
#session-context-net { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Wizard
   ========================================================================== */

#view-wizard {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

/* Segmented progress */
.wiz-progress {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sp-6);
}
.wiz-progress__seg {
  flex: 1;
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  transition: background 0.3s var(--ease);
}
.wiz-progress__seg.is-done,
.wiz-progress__seg.is-current { background: var(--accent); }

.wiz-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--sp-2);
}
.wiz-title em {
  font-style: italic;
  color: var(--accent);
}

.wiz-help {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 var(--sp-5);
}

/* Step-container */
.wizard-step {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wizard-step[hidden] { display: none !important; }

/* Step-label (steg X av 4) */
.wizard-step-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-2);
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   Landing — editorial hero
   ========================================================================== */

.view--landing {
  padding: var(--sp-6) var(--sp-5) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 720px;
}
.view--landing .landing-footer {
  margin-top: auto;
  padding: 40px 0 0;
  text-align: center;
  border-top: 1px solid var(--border-soft);
}
.view--landing .landing-footer a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.view--landing .landing-footer a:hover { color: var(--accent); }

.landing-brand { margin-bottom: var(--sp-4); }

.landing-hero-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-hero {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 48px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.landing-hero em {
  font-style: italic;
  color: var(--accent);
}

.landing-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}

.landing-cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.landing-cta-row .primary {
  font-size: 20px;
}

.landing-feature-row {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-soft);
}

.landing-feature {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.landing-feature > span {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.2;
}
.landing-feature strong {
  color: var(--fg);
  font-weight: 600;
}

#my-sessions-list:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-4);
}

.my-sessions-heading {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
}
.my-sessions-heading::before,
.my-sessions-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.landing-session {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.3s, transform 0.3s;
  position: relative;
}
.landing-session:hover {
  background: var(--surface-2);
  border-color: var(--accent-dim);
}
.landing-session:active { transform: scale(0.998); }
.landing-session.is-forgetting {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
}
.landing-session__suit {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}
.landing-session__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.landing-session__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-session__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.landing-session__when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  align-self: center;
}
.landing-session__delete {
  background: transparent;
  border: none;
  color: var(--muted-2);
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing-session:hover .landing-session__delete { opacity: 1; }
.landing-session__delete:hover {
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 14%, transparent);
}
.landing-session--confirm {
  grid-template-columns: 1fr auto auto;
  background: color-mix(in oklab, var(--danger) 8%, var(--surface));
  border-color: var(--danger-dim);
  cursor: default;
}
.landing-session--confirm:hover {
  background: color-mix(in oklab, var(--danger) 8%, var(--surface));
  border-color: var(--danger-dim);
}
.landing-session__confirm-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.4;
}
.landing-session__confirm-text strong {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--danger);
  font-weight: 400;
}
.landing-session__btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
}
.landing-session__btn:hover { color: var(--fg); border-color: var(--accent-dim); }
.landing-session__btn--danger {
  color: var(--danger);
  border-color: var(--danger-dim);
}
.landing-session__btn--danger:hover {
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: var(--danger);
}

/* Välkommen-steg */
.wizard-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-4);
}

.wizard-logo {
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px color-mix(in oklab, var(--accent) 35%, transparent));
}

.wizard-welcome h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}

.wizard-welcome p {
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 340px;
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.wizard-welcome .wizard-next {
  max-width: 280px;
  width: 100%;
}

/* Nav-knappar */
.wizard-nav {
  display: flex;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-6);
}
.wizard-nav .wizard-prev {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wizard-nav .wizard-prev:hover {
  border-color: var(--border);
  color: var(--fg);
}
.wizard-nav .wizard-next,
.wizard-nav > button.primary {
  flex: 1;
  height: 52px;
  font-size: var(--text-md);
}

/* Session-datum — see .session-date in Wizard Step 01 block above */

/* Wizard steg 3: Attendance-lista som tappable cards */
#wizard-attendance-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

#wizard-attendance-list li {
  position: relative;
  cursor: pointer;
}

#wizard-attendance-list li label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: background 0.15s;
  font-weight: 500;
  font-size: 1rem;
  -webkit-tap-highlight-color: transparent;
}

#wizard-attendance-list li label:hover {
  background: var(--surface-2);
}

/* Dold native checkbox */
#wizard-attendance-list li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox indicator */
#wizard-attendance-list li label::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--muted-2);
  border-radius: 5px;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}

#wizard-attendance-list li input[type="checkbox"]:checked + label::before {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l4 4 6-7' stroke='%230a0a0a' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus-state för dold checkbox */
#wizard-attendance-list li input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Wizard pott-preview */
#wizard-pot-preview {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  color: var(--accent);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
#wizard-pot-preview .pot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  font-size: 0.9375rem;
}
#wizard-pot-preview .pot-row:first-child {
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-1);
  font-size: 1rem;
}
#wizard-pot-preview .pot-row strong {
  font-weight: 700;
}
#wizard-pot-preview .pot-row span {
  color: var(--accent-dim);
}
#wizard-pot-preview .pot-row:first-child span {
  color: var(--accent);
}

/* ==========================================================================
   Session-flik
   ========================================================================== */

/* Netto-lista i session */
#session-net-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

#session-net-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Session tournaments-lista */
#session-tournaments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

#session-tournaments-list li {
  list-style: none;
  font-size: 0.9375rem;
}
#session-tournaments-list li.tournament-empty {
  color: var(--muted);
  font-size: 0.875rem;
  padding: var(--sp-3) var(--sp-4);
}

.tournament-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tournament-row > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tournament-row > summary::-webkit-details-marker { display: none; }
.tournament-row > summary::marker { content: ''; }
.tournament-row > summary:hover { background: rgba(255,255,255,0.02); }
.tournament-row .tournament-status { color: var(--muted); }
.tournament-row--folded {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  opacity: 0.6;
}
.tournament-row--folded .tournament-status { flex: 1; }
.tournament-row .tournament-pending { color: var(--accent); font-weight: 600; }
.tournament-row .caret {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 1.125rem;
  transition: transform 0.15s;
}
.tournament-row[open] > summary .caret { transform: rotate(90deg); }

.tournament-detail {
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
}
.tournament-detail-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.tournament-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Resultat-tabell för avslutade turneringar — ger pedagogiska kolumner
   istället för "X inköp · ±Y kr · Z kr"-pärlband. */
.tournament-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tournament-result-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.tournament-result-table td {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--surface-2);
  vertical-align: middle;
}
.tournament-result-table tr:last-child td { border-bottom: none; }
.tournament-result-table tr.eliminated .result-name {
  text-decoration: line-through;
  color: var(--muted);
}
.tournament-result-table .result-name {
  font-weight: 500;
  word-break: break-word;
}
.tournament-result-table .result-num,
.tournament-result-table th.result-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tournament-result-table .positive { color: var(--success); }
.tournament-result-table .negative { color: var(--danger); }

/* Tidslinje för en turnering — horisontell stripe från start till slut.
   Markörer: rebuy (gul) och eliminate (röd). Caps på vänster/höger. */
.timeline {
  position: relative;
  height: 36px;
  margin: var(--sp-2) var(--sp-2) var(--sp-4) var(--sp-2);
}
.timeline-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--surface-3);
  transform: translateY(-50%);
  border-radius: 2px;
}
.timeline-cap,
.timeline-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  pointer-events: auto;
}
/* timeline-dot är en button — nollställ button-defaults */
button.timeline-dot {
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
}
button.timeline-dot:active { transform: translate(-50%, -50%) scale(1.3); }
button.timeline-dot:hover,
button.timeline-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
/* Tooltip — visas över markören vid hover (desktop) eller focus (tap på mobil) */
button.timeline-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  color: var(--fg);
  font-size: 0.75rem;
  font-weight: 500;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
/* Liten pil under tooltip-bubblan */
button.timeline-dot::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--surface-3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10;
}
button.timeline-dot:hover::after,
button.timeline-dot:hover::before,
button.timeline-dot:focus::after,
button.timeline-dot:focus::before {
  opacity: 1;
}
.timeline-cap--start { left: 0; background: var(--success); }
.timeline-cap--end { left: 100%; background: var(--muted); }
.timeline-cap--end.timeline-cap--pending {
  background: transparent;
  border-color: var(--muted-2);
}
.timeline-dot--rebuy { background: var(--accent); }
.timeline-dot--eliminate { background: var(--danger); }
.timeline-dot--level {
  background: var(--muted);
  width: 6px;
  height: 6px;
  border-width: 1px;
  opacity: 0.7;
}
.timeline-pause {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    var(--accent-dim) 0 3px,
    transparent 3px 6px
  );
  opacity: 0.5;
  border-radius: 2px;
  pointer-events: none;
}
.timeline-bounds {
  position: absolute;
  top: calc(50% + 12px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tournament-detail-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.875rem;
}
.tournament-detail-list li:not(:has(.place-badge)) {
  grid-template-columns: 1fr auto;
}
.tournament-detail-list li.eliminated {
  opacity: 0.7;
}
.tournament-detail-list li.eliminated .player-name {
  text-decoration: line-through;
}
.tournament-detail-list .player-name { font-weight: 500; }
.tournament-detail-list .player-meta {
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* Tidigare sessioner */
#past-sessions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.past-session-row .past-session-meta {
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.past-session-row .past-session-meta strong { color: var(--fg); }

.past-session-row > summary .btn-icon-danger {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-sm, 6px);
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.past-session-row > summary .btn-icon-danger:hover,
.past-session-row > summary .btn-icon-danger:focus-visible {
  color: var(--danger, #e34d4d);
  border-color: var(--danger, #e34d4d);
  background: rgba(227, 77, 77, 0.08);
}

.past-session-tournaments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.past-session-tournaments li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.875rem;
}
.past-session-tournaments li strong {
  color: var(--fg);
  min-width: 2rem;
}
.past-session-tournaments .tournament-status {
  color: var(--muted);
}
.past-session-tournaments .tournament-empty {
  color: var(--muted);
  font-style: italic;
}

/* ==========================================================================
   Pott/Avräkning — info-card med expanderbar förklaring
   ========================================================================== */

.session-money-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.money-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.money-card-label,
.money-card__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0;
}

.money-card-value,
.money-card__value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.money-card-value.accent,
.money-card__value--accent { color: var(--accent); }

.money-card__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
}

/* Info-toggle för förklaring */
.money-info-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--sp-1) 0;
  cursor: pointer;
  transition: color 0.12s;
}
.money-info-toggle:hover { color: var(--fg); background: transparent; }
.money-info-toggle:active { transform: none; }
.money-info-toggle .toggle-icon {
  font-size: 0.75rem;
  transition: transform 0.15s var(--ease);
  display: inline-block;
}
.money-info-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(90deg);
}

.money-info-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-top: var(--sp-2);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}
.money-info-box strong { color: var(--fg); }

/* ==========================================================================
   Empty-states
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--muted);
  gap: var(--sp-3);
}

.empty-state-icon {
  font-size: 3rem;
  opacity: 0.5;
  line-height: 1;
  color: var(--muted-2);
}
.empty-state-icon--hearts,
.empty-state-icon--diamonds { color: var(--suit-red); opacity: 0.6; }
.empty-state-icon--clubs,
.empty-state-icon--spades { color: var(--suit-black); opacity: 0.5; }

/* Tab glyphs — quietly semantic suits, override to accent when active */
.tab-glyph {
  font-size: 1.5rem;
  line-height: 1;
  display: inline-block;
}
.tab-glyph--hearts,
.tab-glyph--diamonds { color: var(--suit-red); }
.tab-glyph--clubs,
.tab-glyph--spades { color: var(--suit-black); }
.tabs a.active .tab-glyph { color: var(--accent); }

.empty-state-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fg);
  opacity: 0.6;
}

.empty-state-desc {
  font-size: 0.8125rem;
  max-width: 240px;
  line-height: 1.5;
}

.empty-state-cta {
  display: inline-block;
  margin-top: var(--sp-3);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1rem;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.empty-state-cta:hover { background: color-mix(in oklab, var(--accent) 88%, white 12%); }

/* ==========================================================================
   Ready-state — tournament created but not yet started
   ========================================================================== */

.ready-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-3);
}

.ready-state-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.ready-state-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.ready-state-meta {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: var(--sp-4);
}

.ready-state-blinds {
  width: 100%;
  max-width: 320px;
  padding: var(--sp-5) var(--sp-4);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}

.ready-state-blinds-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}

.ready-state-blinds-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-1);
}

.ready-state-blinds-duration {
  font-size: 0.8125rem;
  color: var(--muted);
}

.ready-state-cta {
  width: 100%;
  max-width: 320px;
}

.ready-state-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 280px;
  line-height: 1.5;
  margin-top: var(--sp-3);
}

.ready-state-qr {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.ready-state-qr-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.ready-state-qr-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.ready-state-qr-code img {
  border-radius: var(--r-sm);
}
.ready-state-qr-url {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-all;
}

/* ==========================================================================
   Session editorial — italic title + suit-sectitles
   ========================================================================== */

.sess-head {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sess-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--sp-5);
}
.sess-title em {
  font-style: italic;
  color: var(--accent);
}

.sess-sectitle {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-5) 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sess-sectitle__suit {
  color: var(--accent);
  font-size: 13px;
}

/* ==========================================================================
   Info v2 — Share hero + QR card + stack + settings + danger zone
   ========================================================================== */

.share-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--sp-5);
}
.share-hero__title {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  font-style: normal;
}
.share-hero__title em { font-style: italic; color: var(--accent); }
.share-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.4;
  text-wrap: balance;
}

/* Ticket card */
.ss-ticket {
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in oklab, var(--accent) 8%, var(--surface)) 0%,
      var(--surface) 60%);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 20px 40px -20px rgba(0,0,0,0.6),
    inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
}
.ss-ticket__stripe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border-soft));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.ss-ticket__stripe strong { color: var(--accent); font-weight: 600; }
.ss-ticket__col {
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
/* Perforation between stacked mobile sections */
.ss-ticket__col + .ss-ticket__col {
  border-top: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--border-soft));
}
/* Mobile: URL bar before cast tiles */
.ss-ticket__urlbar { order: 2; }
.ss-ticket__col--cast { order: 3; }
.ss-sigil { order: 4; }
.ss-qrwrap { width: 190px; position: relative; margin: 0 auto; }
.ss-qr {
  background: #fff;
  border-radius: var(--r-md);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 100%;
}
.ss-qr img {
  display: block;
  max-width: 100%;
  height: auto;
}
.ss-qrcap {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}
.ss-qrcap strong {
  color: var(--accent);
  font-style: normal;
  font-weight: 400;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Cast to TV tiles */
.ss-cast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 100%;
}
.ss-cast__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ss-cast__eyebrow::before,
.ss-cast__eyebrow::after {
  content: "";
  width: 18px;
  height: 1px;
  background: color-mix(in oklab, var(--accent) 40%, var(--border-soft));
}
.ss-tiles {
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;
}
.ss-tile {
  width: 54px;
  height: 70px;
  border-radius: 8px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 8%, var(--surface)) 0%,
      var(--bg) 100%);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--accent) 30%, transparent),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 8px 18px -12px rgba(0,0,0,0.7);
}
.ss-tile::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: 1px;
  background: color-mix(in oklab, var(--accent) 25%, transparent);
}
.ss-tile__char {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.ss-cast__url {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}
.ss-cast__url a { text-decoration: none; color: inherit; }
.ss-cast__url code {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--fg-strong);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
}
.ss-cast__url a:hover code { border-color: var(--accent); }

/* URL bar + share */
.ss-ticket__urlbar {
  position: relative;
  padding: 18px;
  border-top: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--border-soft));
  display: flex;
  align-items: center;
  gap: 14px;
}
.ss-urlstrip {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ss-urlstrip__url {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.ss-urlstrip__copy {
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 18px;
  cursor: pointer;
}
.ss-urlstrip__copy:hover { opacity: 0.9; }
.ss-shareghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  flex: none;
}
.ss-shareghost__ico { color: var(--accent); font-style: normal; }
.ss-sigil {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 0 0 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: color-mix(in oklab, var(--accent) 50%, var(--muted-2));
  letter-spacing: 0.2em;
}
.ss-sigil .red { color: var(--suit-red); }

/* Desktop: two-column ticket layout */
@media (min-width: 640px) {
  .ss-ticket {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto auto;
  }
  .ss-ticket__stripe { grid-column: 1 / -1; }
  .ss-ticket__col { padding: 36px 32px 28px; }
  .ss-ticket__col + .ss-ticket__col {
    border-top: none;
    border-left: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--border-soft));
  }
  .ss-ticket__urlbar { grid-column: 1 / -1; order: unset; }
  .ss-ticket__col--cast { order: unset; }
  .ss-sigil { grid-column: 1 / -1; padding: 6px 0 12px; order: unset; }
  .ss-qrwrap { width: 220px; }
}

.stack-table { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.stack-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-family: var(--font-sans);
  font-size: 14px;
}
.stack-row:last-child { border-bottom: none; }
.stack-row__chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
}
.stack-row__chip--white { color: #d8d2c3; background: transparent; }
.stack-row__chip--red { color: var(--suit-red); background: var(--suit-red); }
.stack-row__chip--green { color: var(--success); background: var(--success); }
.stack-row__chip--black { color: var(--fg); background: var(--fg); }
.stack-row__chip--blue { color: var(--info); background: var(--info); }
.stack-row__name { color: var(--fg); }
.stack-row__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stack-total {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.stack-total__sigma {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  text-align: center;
}
.stack-total__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stack-total__value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.setting-row:last-child { border-bottom: none; }
.setting-row__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.setting-row__value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.payout-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.payout-preview__bar {
  width: 60px;
  height: 4px;
  display: inline-flex;
  border-radius: 2px;
  overflow: hidden;
}
.payout-preview__seg { background: var(--accent); }
.payout-preview__seg--2 { background: color-mix(in oklab, var(--accent) 65%, black); }
.payout-preview__seg--3 { background: color-mix(in oklab, var(--accent) 40%, black); }

.sess-sectitle__suit--danger { color: var(--danger); }

.danger-zone {
  padding: 16px;
  background: var(--bg-2);
  border: 1px dashed color-mix(in oklab, var(--danger) 30%, var(--border-soft));
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.danger-zone__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin: -4px 0 4px;
  line-height: 1.4;
}
.danger-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.danger-action:last-child { border-bottom: none; }
.danger-action__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.danger-action__title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg); }
.danger-action__meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.danger-action__btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger-dim);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.danger-action__btn:hover {
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: var(--danger);
}

.sess-net-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--border-soft);
  font-family: var(--font-sans);
  font-size: 12px;
}
.sess-net-row:last-child { border-bottom: none; }
.sess-net-row__suit { color: var(--muted-2); }
.sess-net-row__name { color: var(--fg); font-weight: 500; }
.sess-net-row__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sess-net-row__value--pos { color: var(--success); }
.sess-net-row__value--neg { color: var(--danger); }

/* ==========================================================================
   Hjälpklasser
   ========================================================================== */

.player-meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tournament summary — shown in the Timer sub-panel when endedAt is set
   ========================================================================== */

.t-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
}
.t-summary__head { display: flex; flex-direction: column; gap: var(--sp-1); }
.t-summary__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-summary__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.t-summary__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
}

.t-summary__results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.t-summary__row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.t-summary__row--winner {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface));
  border-color: var(--accent-dim);
}
.t-summary__name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-summary__row--winner .t-summary__name { color: var(--accent); }
.t-summary__prize {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}
.t-summary__net {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}
.t-summary__net[data-net="pos"] { color: var(--success); }
.t-summary__net[data-net="neg"] { color: var(--danger); }

.t-summary__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.t-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t-summary__stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-summary__stat-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.t-summary__cta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.t-summary__cta .primary { flex: 1; }

/* ==========================================================================
   TV / cast view — full-bleed editorial layout
   Container queries scale to any cast resolution (cqw = width, cqh = height).
   ========================================================================== */

#view-tv {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 80% at 70% 30%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at 15% 90%, var(--bg-2), transparent 70%),
    var(--bg);
  color: var(--fg);
  overflow: hidden;
  z-index: 50;
  container-type: size;
  container-name: tv;
}

/* TV mode hides everything else — no tab bar, no net-status, no padding */
body[data-mode="tv"] { padding-left: 0 !important; }
body[data-mode="tv"] .tabs,
body[data-mode="tv"] .net-status,
body[data-mode="tv"] .player-banner { display: none !important; }

/* Background watermark — gigantic italic spade */
.tv-watermark {
  position: absolute;
  right: -10cqw;
  bottom: -30cqh;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 110cqh;
  line-height: 0.78;
  color: color-mix(in oklab, var(--accent) 6%, transparent);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Quiet pip pattern, bottom-left corner */
.tv__pips {
  position: absolute;
  left: 4cqw;
  bottom: 3cqh;
  display: flex;
  gap: 1cqw;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3cqw;
  color: color-mix(in oklab, var(--accent) 30%, transparent);
  z-index: 0;
}
.tv__pips span:nth-child(2) { color: color-mix(in oklab, var(--suit-red) 30%, transparent); }
.tv__pips span:nth-child(4) { color: color-mix(in oklab, var(--suit-red) 30%, transparent); }

/* Stage grid */
.tv__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 3cqh 4cqw;
  gap: 2cqh;
}

/* TOP META BAR */
.tv-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2cqw;
}
.tv-meta__left {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  font-family: var(--font-display);
  color: var(--muted);
}
.tv-meta__left svg { color: var(--accent); }
.tv-meta__brand {
  font-size: 2.2cqw;
  letter-spacing: -0.01em;
}
.tv-meta__brand em { font-style: italic; color: var(--accent); }

.tv-meta__center {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8cqw;
  font-family: var(--font-mono);
  font-size: 1.05cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-meta__center strong {
  color: var(--accent);
  font-weight: 600;
}
.tv-meta__sep { color: var(--muted-2); }

.tv-meta__right {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  justify-content: flex-end;
}
.tv-meta__time {
  font-family: var(--font-mono);
  font-size: 1.4cqw;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tv-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.4cqh 1cqw;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border-soft));
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.95cqw;
  letter-spacing: 0.16em;
  color: var(--fg);
  text-transform: uppercase;
}
.tv-live__dot {
  width: 0.6cqw;
  height: 0.6cqw;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 1cqw var(--success);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* CENTER — clock + blinds + sidekick
   Reserved 4th row for sidekick so toggling it doesn't shift anything. */
.tv-clock-section {
  display: grid;
  grid-template-rows: 1fr auto auto 4cqh;
  align-items: center;
  justify-items: center;
  gap: 1cqh;
}
.tv-clock-section > .tv-clock { align-self: end; }
.tv-clock-section > .tv-blinds { align-self: start; }
.tv-eyebrow {
  font-family: var(--font-mono);
  font-size: 1.1cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
}
.tv-eyebrow::before, .tv-eyebrow::after {
  content: '';
  width: 2.4cqw;
  height: 1px;
  background: var(--accent);
}

.tv-clock {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 34cqh;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin: -1cqh 0 0;
}
.tv-clock--warn { color: var(--accent); }
.tv-clock--winner {
  font-size: 20cqh;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.tv-blinds {
  display: flex;
  align-items: baseline;
  gap: 2cqw;
  margin-top: -1cqh;
}
.tv-blinds__label {
  font-family: var(--font-sans);
  font-size: 1.2cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-blinds__value {
  font-family: var(--font-mono);
  font-size: 4.8cqw;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tv-blinds__next {
  font-family: var(--font-mono);
  font-size: 1.4cqw;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin-left: 0.6cqw;
  align-self: end;
  padding-bottom: 0.6cqw;
}

.tv-bba {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  margin-top: 4px;
  text-align: center;
}
.tv-bba__label { opacity: 0.6; margin-right: 4px; }

.tv-clock-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4cqw;
  color: var(--muted);
  max-width: 60cqw;
  text-align: center;
  line-height: 1.3;
  align-self: start;
  transition: opacity 0.3s var(--ease);
}
.tv-clock-sub[hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
}
.tv-clock-sub strong {
  color: var(--accent);
  font-weight: 400;
}

/* BOTTOM — two editorial stat cards + QR card */
.tv-lower {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr auto;
  gap: 1.2cqw;
  align-items: stretch;
}
.tv-stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1cqw;
  padding: 1.6cqh 1.6cqw;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.4cqh;
  min-height: 0;
}
.tv-stat--accent {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border-color: var(--accent-dim);
}
.tv-stat__head {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
}
.tv-stat__suit {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6cqw;
  line-height: 1;
}
.tv-stat__suit--red { color: var(--suit-red); }
.tv-stat__label {
  font-family: var(--font-sans);
  font-size: 1cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-stat__value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 6.5cqw;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tv-stat--accent .tv-stat__value { color: var(--accent); }
.tv-stat__sub {
  font-family: var(--font-mono);
  font-size: 1cqw;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: auto;
  transition: opacity 0.3s var(--ease);
}
.tv-stat__sub[hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
}
.tv-stat__sub strong { color: var(--fg); font-weight: 600; }

/* QR card */
.tv-qr-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1cqw;
  padding: 1.6cqh 1.4cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}
.tv-qr-card__qr {
  width: 12cqh;
  height: 12cqh;
  background: #fff;
  padding: 0.6cqh;
  border-radius: 0.4cqw;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv-qr-card__qr img { width: 100%; height: 100%; }
.tv-qr-card__copy {
  display: flex;
  flex-direction: column;
  gap: 0.4cqh;
  max-width: 16cqw;
  min-width: 0;
}
.tv-qr-card__head {
  font-family: var(--font-sans);
  font-size: 1cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-qr-card__url {
  font-family: var(--font-mono);
  font-size: 0.85cqw;
  color: var(--accent);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Desktop-förbättringar (≥ 640px)
   ========================================================================== */

@media (min-width: 640px) {
  :root {
    --tab-bar-height: 4.5rem;
  }

  .view {
    padding: var(--sp-6) var(--sp-6);
    padding-bottom: calc(var(--tab-bar-height) + var(--sp-6) + env(safe-area-inset-bottom));
  }

  #view-wizard {
    padding: var(--sp-8) var(--sp-6);
  }

  .wizard-welcome {
    padding: var(--sp-12) var(--sp-6);
  }

  .wizard-welcome h1 { font-size: 3rem; }
  .wizard-welcome .wizard-next { max-width: 320px; }

  .timer-clock {
    font-size: clamp(5rem, 15vw, 9rem);
  }

  .tabs a {
    font-size: 1.5rem;
    padding: var(--sp-3) var(--sp-4) var(--sp-3);
  }

  .timer-controls button {
    padding: var(--sp-4) var(--sp-5);
  }
}

@media (min-width: 820px) {
  /* Visa en centrerad kolumn — innehållet ska INTE stretcha till 100%.
     Letterbox bg is just the canvas — the centered column already gets
     a hairline border on each side from the felt-on-felt contrast. */
  body {
    background: var(--bg);
  }

  .view,
  #view-wizard {
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
  }

  /* Tab-bar is already a side rail at ≥720px (see earlier @media block).
     No additional letterbox tab styling at ≥820 — the rail covers
     desktop navigation. */
}

/* ---- Server-shared sessions: status indicator + role-based UI ---- */

/* Hide the LIVE pill during wizard setup — it lands on top of the
   progress bar and adds noise to the editorial setup flow. */
body:has(#view-wizard:not([hidden])) .net-status { display: none; }

.net-status {
  position: fixed;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  z-index: 1000;
  pointer-events: none;
}
.net-status.hidden { display: none; }
.net-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: none;
}
.net-status[data-status="connected"] .net-status__dot {
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in oklab, var(--success) 60%, transparent);
}
.net-status[data-status="connecting"] .net-status__dot,
.net-status[data-status="disconnected"] .net-status__dot {
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 50%, transparent);
}
.net-status[data-status="error"] .net-status__dot {
  background: var(--danger);
  box-shadow: 0 0 8px color-mix(in oklab, var(--danger) 60%, transparent);
}

.player-banner {
  display: none;
  text-align: center;
  padding: 8px;
  background: var(--bg-2);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
}
body[data-role="player"] .player-banner { display: block; }

/* Player-mode: timer-controls and color-up ack are visible-but-disabled
   — they show what the host is doing so viewers see the live state.
   Mute is synced, viewers see whether host has muted. */
body[data-role="player"] .controls,
body[data-role="player"] #color-up-ack,
body[data-role="player"] #btn-mute {
  pointer-events: none;
  opacity: 0.4;
}

/* Player-mode: hide actions and CTAs that have no meaning for a viewer.
   Avoids the "looks-clickable-but-broken" trap of dimmed buttons. */
body[data-role="player"] [data-rebuy],
body[data-role="player"] [data-remove-rebuy],
body[data-role="player"] [data-eliminate],
body[data-role="player"] [data-undo-eliminate],
body[data-role="player"] [data-remove-participant],
body[data-role="player"] #btn-end-tournament,
body[data-role="player"] #btn-view-summary,
body[data-role="player"] #btn-start-first-level,
body[data-role="player"] #btn-save-settings,
body[data-role="player"] #btn-add-participant,
body[data-role="player"] #participant-pool-input,
body[data-role="player"] #btn-new-tournament-in-session,
body[data-role="player"] #btn-new-session,
body[data-role="player"] #btn-end-session,
body[data-role="player"] #btn-reset,
body[data-role="player"] #btn-reset-all {
  display: none;
}

/* Player-mode: hide whole sections that don't apply to viewers. */
body[data-role="player"] #settings-section,
body[data-role="player"] #reset-tournament-section,
body[data-role="player"] .cta-pair,
body[data-role="player"] .cta-row,
body[data-role="player"] .participant-pool-add,
body[data-role="player"] .ready-state-cta,
body[data-role="player"] .ready-state-hint {
  display: none;
}

/* Player-mode: the action <div> on player list items collapses when
   all its children are hidden — strip the padding so rows stay tight. */
body[data-role="player"] #player-list .actions { display: none; }

/* My-sessions-lista på landing */
#my-sessions-list { width: 100%; margin-top: 24px; }
.my-sessions-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  margin: 0 0 8px;
}
.my-sessions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.my-session {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
}
.my-session__open {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; border: none; background: transparent; color: inherit; cursor: pointer; text-align: left;
}
.my-session__open:hover { background: rgba(255,255,255,0.06); }
.my-session__label { font-size: 14px; font-weight: 500; }
.my-session__when { font-size: 12px; color: var(--text-muted, #888); }
.my-session__delete {
  background: transparent; border: none; color: var(--text-muted, #888); cursor: pointer;
  font-size: 18px; padding: 0 14px;
}
.my-session__delete:hover { color: #ef4444; }
.my-sessions-hint {
  font-size: 11px; color: var(--text-muted, #888); margin: 8px 0 0; line-height: 1.4;
}

/* ==========================================================================
   Wizard · Step 01 — Player list (rows, not chips)
   ========================================================================== */

.player-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-list li { position: relative; }

.player-list input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.player-list label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
  font-weight: 500;
  font-size: 16px;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
.player-list label:hover { background: var(--surface-2); }

.player-list label::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--muted-2);
  background: transparent;
  transition: background 120ms, border-color 120ms;
}
.player-list input:checked + label {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
}
.player-list input:checked + label::before {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F1714' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.player-list__name { flex: 1; min-width: 0; }
.player-list__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.session-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.session-date::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
  min-width: 24px;
}

.wizard-add-row {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.wizard-add-row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--sp-4);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  outline: none;
}
.wizard-add-row input::placeholder { color: var(--muted-2); font-style: italic; }
.wizard-add-row input:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.wizard-add-row > button {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wizard-add-row > button:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.player-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-4) 0 var(--sp-3);
}
.player-count strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
}
.player-count::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
  align-self: center;
}

.wiz-foot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--muted-2);
  line-height: 1.4;
  margin-top: 2px;
}

/* ==========================================================================
   Wizard · Step 02 — Blind structure presets
   ========================================================================== */

.preset-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.preset {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.preset:hover { background: var(--surface-2); border-color: var(--border); }

.preset__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.preset__rune {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--muted-2);
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  transition: color 120ms var(--ease);
}

.preset__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--fg-strong);
  font-weight: 400;
}

.preset__dur {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.preset__meta {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-2);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.preset__meta b { color: var(--muted); font-weight: 500; }

.preset.is-selected {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
}
.preset.is-selected .preset__name,
.preset.is-selected .preset__rune { color: var(--accent); }
.preset.is-selected .preset__meta b { color: var(--fg); }

.preset__body {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--border));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.preset__body[hidden] { display: none; }

.preset__details { display: block; }
.preset__details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  user-select: none;
}
.preset__details > summary::-webkit-details-marker { display: none; }
.preset__details > summary::marker { content: ''; }
.preset__details-chev {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  transition: transform 150ms var(--ease);
  color: var(--accent);
}
.preset__details[open] .preset__details-chev { transform: rotate(90deg); }
.preset__details[open] > summary { padding-bottom: 10px; }
.preset__details > .preset__table { margin-top: 4px; }

.preset__table {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-collapse: collapse;
  color: var(--fg);
}
.preset__table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted-2);
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.preset__table th:nth-child(3),
.preset__table td:nth-child(3),
.preset__table th:nth-child(4),
.preset__table td:nth-child(4) { text-align: right; padding-right: 0; }
.preset__table td {
  padding: 3px 8px 3px 0;
  font-variant-numeric: tabular-nums;
}
.preset__table tr.is-color-up td {
  border-top: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.preset__table tr.ante-level td.ante { color: var(--accent); }
.preset__table tr.is-current td { color: var(--accent); font-weight: 500; }
.preset__table td.dash { color: var(--muted-2); }

/* ==========================================================================
   Wizard · Step 02 — BBA inline switch (per-preset)
   ========================================================================== */

.bba-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
}
.bba-inline__copy { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bba-inline__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.bba-inline__label .tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.bba-inline__help {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--muted-2);
  line-height: 1.35;
}
.bba-inline__input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.bba-inline__input:checked ~ .switch {
  background: var(--accent);
  border-color: var(--accent);
}
.bba-inline__input:checked ~ .switch::after {
  background: var(--accent-ink);
}
.bba-inline__input:focus-visible ~ .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch.switch--sm { width: 36px; height: 22px; border-radius: 11px; }
.switch.switch--sm::after { width: 16px; height: 16px; top: 2px; left: 2px; }
.bba-inline__input:checked ~ .switch.switch--sm::after { left: 16px; }

.switch {
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  position: relative;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fg);
  transition: left 150ms var(--ease), background 150ms var(--ease);
}