/* ==========================================================================
   nameonwheel — design system
   One stylesheet, no framework. Logical properties throughout so LTR and RTL
   share this file (no separate -rtl build).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Neutrals */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #eef0f3;
  --text: #16181d;
  --text-muted: #5b6472;
  --text-faint: #858e9c;
  --border: #e2e5ea;
  --border-strong: #cfd4dc;

  /* Brand — kept in the same blue family as before, a touch richer */
  --brand: #2563eb;
  --brand-hover: #1d4fd7;
  --brand-active: #1a45bd;
  --brand-soft: #e8efff;
  --brand-text: #ffffff;
  --focus: #2563eb;

  /* Semantic */
  --success: #16a34a;
  --success-soft: #e4f7ea;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --warning: #d97706;
  --warning-soft: #fdf1de;

  /* Shape */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);

  /* Rhythm */
  --gap: 1rem;
  --page-max: 62rem;

  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 32%, transparent);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1116;
  --surface: #171a21;
  --surface-2: #1d212a;
  --surface-3: #252a35;
  --text: #e9ecf1;
  --text-muted: #a2abba;
  --text-faint: #7d8797;
  --border: #2a2f3a;
  --border-strong: #3a4150;

  --brand: #5b8cff;
  --brand-hover: #6f9bff;
  --brand-active: #4a7cf5;
  --brand-soft: #1b2540;
  --brand-text: #0b1020;
  --focus: #5b8cff;

  --success: #35c46a;
  --success-soft: #122b1c;
  --danger: #f26262;
  --danger-soft: #2e1618;
  --warning: #f0a63c;
  --warning-soft: #2c2011;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { fill: currentColor; flex: none; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
}

p { margin: 0; }

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--brand-hover); }

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

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

::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: .5rem;
  top: -4rem;
  z-index: 200;
  padding: .6rem 1rem;
  background: var(--brand);
  color: var(--brand-text);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: .5rem; color: var(--brand-text); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

.page {
  flex: 1 0 auto;
  padding-block: 1.5rem 3rem;
}

.stack > * + * { margin-block-start: var(--stack-gap, 1rem); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, .5rem);
  align-items: center;
}

.section { margin-block-start: 2.5rem; }

.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 2rem;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: static;
  z-index: 50;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 3.75rem;
  padding-inline: .75rem;
  max-width: var(--page-max);
  margin-inline: auto;
}

.site-header__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: clamp(1rem, .78rem + 1.05vw, 1.4rem);
  font-weight: 700;
  padding-inline: .25rem;
}

.site-header__side {
  display: flex;
  align-items: center;
  gap: .125rem;
  flex: none;
}

/* Icon button — used for menu, theme, language */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}
.icon-btn[aria-expanded="true"] {
  background: var(--surface-3);
  color: var(--text);
}
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

.icon-btn--bordered {
  border-color: var(--border);
  background: var(--surface);
}
.icon-btn--bordered:hover { border-color: var(--border-strong); }

/* Theme toggle swaps its two glyphs */
[data-theme="dark"] .icon-sun,
:root:not([data-theme="dark"]) .icon-moon { display: none; }

/* --------------------------------------------------------------------------
   5. Dropdown (language switcher)
   -------------------------------------------------------------------------- */
.dropdown { position: relative; }

.dropdown__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .4rem);
  z-index: 60;
  min-width: 12rem;
  max-height: min(60vh, 21rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: .375rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-.35rem);
  transition: opacity .14s ease, transform .14s ease;
}
.dropdown__menu[hidden] { display: none; }
.dropdown.is-open .dropdown__menu { opacity: 1; transform: none; }

.dropdown__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .625rem;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .9375rem;
  white-space: nowrap;
}
.dropdown__item:hover { background: var(--surface-3); color: var(--text); }
.dropdown__item[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.dropdown__item small { color: var(--text-faint); font-size: .75rem; }

/* With two dozen languages a single column is a long scroll, so the menu
   splits into two columns wherever there is room for them. */
.dropdown__menu--grid {
  max-height: min(70vh, 26rem);
}
@media (min-width: 26rem) {
  .dropdown__menu--grid {
    display: grid;
    /* Column-major, so the first column holds the first half of the list
       rather than the order zigzagging across the two columns. --menu-rows is
       set from the locale count in the layout. */
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--menu-rows, 12), auto);
    gap: 0 .25rem;
    min-width: 24rem;
  }
}

/* --------------------------------------------------------------------------
   6. Drawer (tools menu)
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.drawer.is-open { display: block; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 20, .5);
  opacity: 0;
  transition: opacity .22s ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(20rem, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
[dir="rtl"] .drawer__panel { transform: translateX(100%); }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .875rem 1rem;
  border-block-end: 1px solid var(--border);
}
.drawer__title { font-size: 1rem; font-weight: 700; }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .75rem;
}

/* --------------------------------------------------------------------------
   7. Nav list (drawer items)
   -------------------------------------------------------------------------- */
.navlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.navlist__link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: background .14s, color .14s;
}
.navlist__link:hover { background: var(--surface-3); color: var(--text); }
.navlist__link[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.navlist__link svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-faint);
}
.navlist__link[aria-current="page"] svg,
.navlist__link:hover svg { color: inherit; }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem 1rem;
  min-height: 2.625rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background .14s, border-color .14s, color .14s, transform .08s, box-shadow .14s;
}
.btn svg { width: 1.0625rem; height: 1.0625rem; }
.btn:hover { background: var(--surface-3); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-text);
  --btn-bd: var(--brand);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-text);
}
.btn--primary:active { background: var(--brand-active); }

.btn--soft {
  --btn-bg: var(--brand-soft);
  --btn-fg: var(--brand);
  --btn-bd: transparent;
}
.btn--soft:hover {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  color: var(--brand);
}

.btn--ghost {
  --btn-bd: transparent;
  --btn-bg: transparent;
  --btn-fg: var(--text-muted);
}
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }

.btn--danger {
  --btn-bg: transparent;
  --btn-fg: var(--danger);
  --btn-bd: color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.btn--lg {
  padding: .8rem 1.5rem;
  min-height: 3.25rem;
  font-size: 1.0625rem;
  border-radius: var(--r-lg);
}
.btn--lg svg { width: 1.25rem; height: 1.25rem; }

.btn--sm {
  padding: .35rem .7rem;
  min-height: 2.125rem;
  font-size: .8438rem;
  border-radius: var(--r-sm);
  gap: .35rem;
}
.btn--sm svg { width: .9375rem; height: .9375rem; }

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.field { display: block; }
/* Stacked fields get rhythm; fields laid out by a grid get it from `gap`,
   so cancel the margin there or the columns lose their shared baseline. */
.field + .field { margin-block-start: 1rem; }
.grid > .field + .field,
.cluster > .field + .field { margin-block-start: 0; }

.label {
  display: block;
  margin-block-end: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.hint {
  margin-block-start: .375rem;
  font-size: .8125rem;
  color: var(--text-faint);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: .6rem .8rem;
  min-height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  transition: border-color .14s, box-shadow .14s;
  appearance: none;
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--text-faint); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}

.textarea {
  min-height: 8.5rem;
  line-height: 1.7;
  resize: vertical;
  font-variant-ligatures: none;
}

.select {
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b6472'%3E%3Cpath d='M4.2 6.2a1 1 0 0 1 1.4 0L8 8.6l2.4-2.4a1 1 0 1 1 1.4 1.4l-3.1 3.1a1 1 0 0 1-1.4 0L4.2 7.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1.15rem;
}
[dir="rtl"] .select { background-position: left .7rem center; }
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a2abba'%3E%3Cpath d='M4.2 6.2a1 1 0 0 1 1.4 0L8 8.6l2.4-2.4a1 1 0 1 1 1.4 1.4l-3.1 3.1a1 1 0 0 1-1.4 0L4.2 7.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
}

/* Number input: hide spinners, we supply our own stepper */
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper {
  display: flex;
  align-items: center;
  gap: .375rem;
  max-width: 13rem;
}
.stepper .input {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.stepper__btn {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.stepper__btn:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--text-faint);
}
.stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.stepper__btn svg { width: 1.05rem; height: 1.05rem; }

/* Switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-muted);
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.switch__track {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  background: var(--border-strong);
  transition: background .18s;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(1rem); }
[dir="rtl"] .switch input:checked + .switch__track::after { transform: translateX(-1rem); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }
.switch:hover { color: var(--text); }

/* Segmented control */
.segmented {
  display: inline-flex;
  padding: .25rem;
  gap: .125rem;
  background: var(--surface-3);
  border-radius: var(--r);
}
.segmented__btn {
  padding: .4rem .85rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.segmented__btn:hover { color: var(--text); }
.segmented__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   10. Cards & panels
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.card--flush { padding: 0; overflow: hidden; }
.card--raised { box-shadow: var(--shadow); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1rem, .55rem + 2vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}

.panel__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-block-end: .875rem;
}

/* --------------------------------------------------------------------------
   11. Result display — the big number/word a tool spits out
   -------------------------------------------------------------------------- */
.result {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  align-items: center;
}

.result__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: .5rem .9rem;
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: clamp(1.1rem, .9rem + .9vw, 1.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: pop .28s cubic-bezier(.2, 1.4, .4, 1) backwards;
}

@keyframes pop {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}

.stat-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  text-align: center;
}
.stat + .stat { border-inline-start: 1px solid var(--border); }
.stat { padding: .875rem .5rem; }
.stat__value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: .8125rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Table
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.table th,
.table td {
  padding: .7rem .9rem;
  text-align: start;
  border-block-end: 1px solid var(--border);
}
.table th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { font-variant-numeric: tabular-nums; color: var(--text-muted); width: 1%; white-space: nowrap; }

/* --------------------------------------------------------------------------
   13. Modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal.is-open { display: flex; }

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 20, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__box {
  position: relative;
  width: min(30rem, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(.94) translateY(.5rem);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, 1.2, .4, 1);
}
.modal.is-open .modal__box { opacity: 1; transform: none; }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
}
.modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}
.modal__body {
  padding: .5rem 1.5rem 1.5rem;
  text-align: center;
}
.modal__result {
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.modal__foot {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 0 1.25rem 1.25rem;
}
.modal__foot .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   14. Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 1.25rem;
  z-index: 200;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.toast__msg {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: var(--r-full);
  background: #16181d;
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .2s, transform .2s;
}
[data-theme="dark"] .toast__msg { background: #f2f4f8; color: #101319; }
.toast.is-visible .toast__msg { opacity: 1; transform: none; }
.toast__msg svg { width: 1.05rem; height: 1.05rem; }

/* --------------------------------------------------------------------------
   15. Article / prose — the SEO content
   -------------------------------------------------------------------------- */
.prose {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.prose > * + * { margin-block-start: 1.1rem; }

.prose h2 {
  margin-block-start: 2.4rem;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
  color: var(--text);
  scroll-margin-top: 1rem;
}
.prose h2:first-child { margin-block-start: 0; }

.prose h3 {
  margin-block-start: 1.9rem;
  font-size: 1.125rem;
  color: var(--text);
  scroll-margin-top: 1rem;
}

.prose ul,
.prose ol {
  margin-block: 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.prose li::marker { color: var(--text-faint); }
.prose li > ul,
.prose li > ol { margin-block-start: .5rem; }

.prose strong { color: var(--text); font-weight: 650; }

/* Example lists inside articles (names, weights) read better as chips */
.prose .example-list {
  list-style: none;
  padding: .9rem 1.1rem;
  margin-block-start: .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: .9375rem;
  gap: .3rem;
}
.prose .example-list li::marker { content: none; }

/* --------------------------------------------------------------------------
   16. Share row
   -------------------------------------------------------------------------- */
.share { margin-block-start: 3rem; padding-block-start: 2rem; border-block-start: 1px solid var(--border); }
.share__title { font-size: 1.0625rem; font-weight: 700; margin-block-end: .875rem; }

.share__btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.share__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: transform .14s, border-color .14s, color .14s, background .14s;
}
.share__btn svg { width: 1.25rem; height: 1.25rem; }
.share__btn:hover {
  transform: translateY(-2px);
  border-color: currentColor;
  color: var(--share-color, var(--brand));
  background: color-mix(in srgb, var(--share-color, var(--brand)) 10%, var(--surface));
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  flex: none;
  margin-block-start: auto;
  background: var(--surface);
  border-block-start: 1px solid var(--border);
  padding-block: 2rem;
  font-size: .9375rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding-block: .2rem;
}
.footer-nav a:hover { color: var(--brand); text-decoration: underline; }

.site-footer__legal {
  text-align: center;
  color: var(--text-faint);
  font-size: .875rem;
}
.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}
.site-footer__legal a { color: var(--text-faint); text-decoration: none; }
.site-footer__legal a:hover { color: var(--brand); text-decoration: underline; }

/* --------------------------------------------------------------------------
   18. Utilities (deliberately minimal)
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.grow { flex: 1 1 auto; min-width: 0; }
[hidden] { display: none !important; }

.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 13rem), 1fr));
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   20. Tool components
   ========================================================================== */

/* --- Wheel ---------------------------------------------------------------- */
.wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  margin-inline: auto;
  aspect-ratio: 1;
  touch-action: manipulation;
}

.wheel-stage__canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  background: var(--surface-3);
  box-shadow:
    0 0 0 8px var(--surface),
    0 0 0 10px var(--border),
    var(--shadow);
  transition: box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.wheel-stage__canvas:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 8px var(--surface),
    0 0 0 11px var(--brand),
    var(--shadow);
}

/* Hub — the click target in the middle */
.wheel-hub {
  position: absolute;
  z-index: 3;
  width: 22%;
  height: 22%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  font-size: clamp(.7rem, .45rem + 1vw, .95rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 .25rem .75rem rgba(16, 24, 40, .25);
  transition: transform .14s, color .14s;
}
.wheel-hub:hover:not(:disabled) { transform: scale(1.06); }
.wheel-hub:active:not(:disabled) { transform: scale(.97); }
.wheel-hub:disabled { cursor: default; color: var(--text-faint); }

/* Pointer at 3 o'clock. Deliberately physical, not logical: the wheel engine
   always reads the winner from the slice at angle 0, so a pointer that
   mirrored itself under RTL would point at a different slice than the one
   announced. A prize wheel reads the same way in every language. */
.wheel-pointer {
  position: absolute;
  z-index: 4;
  right: -2px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: .85rem solid transparent;
  border-bottom: .85rem solid transparent;
  border-right: 1.5rem solid var(--text);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  pointer-events: none;
}

/* --- Entry editor --------------------------------------------------------- */
.entries__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  margin-block-start: .5rem;
  font-size: .8125rem;
  color: var(--text-faint);
}

/* --- Coin ----------------------------------------------------------------- */
.coin-stage {
  display: grid;
  place-items: center;
  padding-block: 2.5rem;
  perspective: 1000px;
}

.coin {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform-style: preserve-3d;
  transition: transform 0s;
}
.coin.is-flipping { transition: transform 2.4s cubic-bezier(.3, .05, .2, 1); }

.coin__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  padding: 1rem;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.coin__face--heads {
  background: radial-gradient(circle at 32% 28%, #fde68a, #f2b705 55%, #b8860b);
  color: #6b4708;
  box-shadow: inset 0 0 0 .5rem rgba(255, 255, 255, .35), 0 .6rem 1.5rem rgba(0, 0, 0, .3);
}
.coin__face--tails {
  transform: rotateX(180deg);
  background: radial-gradient(circle at 32% 28%, #e8eaee, #b6bcc7 55%, #7d8593);
  color: #2f3542;
  box-shadow: inset 0 0 0 .5rem rgba(255, 255, 255, .45), 0 .6rem 1.5rem rgba(0, 0, 0, .3);
}

/* --- Dice ----------------------------------------------------------------- */
.dice-tray {
  --die: clamp(3.25rem, 2.4rem + 3.6vw, 5.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  /* Holds one row of dice from the start, so the roll that runs on load
     drops into space that is already there. */
  min-height: calc(var(--die) + 2.5rem + 4px);
  padding: 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.die {
  /* Everything is derived from --die (declared on .dice-tray): percentage
     padding would resolve against the tray's width, not the die's, and blow
     the whole thing up. */
  width: var(--die);
  height: var(--die);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: calc(var(--die) * .05);
  padding: calc(var(--die) * .13);
  border-radius: calc(var(--die) * .2);
  background: #fff;
  color: #16181d;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(0, 0, 0, .1);
  animation: die-in .35s cubic-bezier(.2, 1.3, .4, 1) backwards;
}

.pip {
  border-radius: 50%;
  background: currentColor;
}
.die.is-rolling { animation: die-roll .55s ease-in-out infinite; }

@keyframes die-in {
  from { opacity: 0; transform: scale(.6) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}
@keyframes die-roll {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-.5rem); }
}

/* --- Rock paper scissors -------------------------------------------------- */
.rps-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.rps-side__label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
}
.rps-side__score {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rps-side__hand {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 3rem + 12vw, 7rem);
  aspect-ratio: 1;
  margin: .75rem auto 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
}
.rps-side__hand svg { width: 55%; height: 55%; }
.rps-side__hand.is-shaking { animation: rps-shake .3s ease-in-out infinite; }
@keyframes rps-shake {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(14deg); }
}
.rps-vs {
  font-size: .875rem;
  font-weight: 800;
  color: var(--text-faint);
  letter-spacing: .06em;
}

.rps-verdict {
  margin-block: 1.25rem;
  padding: .7rem 1rem;
  border-radius: var(--r);
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-muted);
  transition: background .2s, color .2s;
}
.rps-verdict[data-state="win"] { background: var(--success-soft); color: var(--success); }
.rps-verdict[data-state="lose"] { background: var(--danger-soft); color: var(--danger); }

.rps-picks {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.rps-pick {
  display: grid;
  place-items: center;
  gap: .35rem;
  width: 5.5rem;
  padding: .9rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 600;
  transition: transform .14s, border-color .14s, color .14s, background .14s;
}
.rps-pick svg { width: 2rem; height: 2rem; }
.rps-pick:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.rps-pick:disabled { opacity: .55; cursor: not-allowed; }

/* --- Colors --------------------------------------------------------------- */
.swatch {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  animation: pop .3s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.swatch__chip {
  /* It is a <button>, so it needs the block/width reset to fill the card. */
  display: block;
  width: 100%;
  height: 8.5rem;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--border);
  position: relative;
  cursor: pointer;
}
.swatch__lock {
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .82);
  color: #16181d;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s, background .14s;
}
.swatch:hover .swatch__lock,
.swatch__lock:focus-visible,
.swatch__lock[aria-pressed="true"] { opacity: 1; }
.swatch__lock:hover { background: #fff; }
.swatch__lock svg { width: 1rem; height: 1rem; }

.swatch__body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem .85rem .85rem;
}
.swatch__hex {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.swatch__meta {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-faint);
}

.copy-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .875rem;
}
.copy-row__value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* --- Word / letter output ------------------------------------------------- */
.token-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.token {
  padding: .45rem .8rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.0625rem;
  font-weight: 600;
  animation: pop .26s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.token--letter {
  min-width: 2.75rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.375rem;
  font-weight: 800;
}

/* Empty state */
.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-faint);
  font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   21. Result history
   -------------------------------------------------------------------------- */
.history {
  display: none;
  margin-block-start: 2.5rem;
}
.history.is-visible { display: block; }

/* Revealed before first paint for a visitor who already has a saved log, with
   --history-rows carrying the row count so the space is reserved rather than
   claimed after the deferred script runs. See partials/history-reserve. */
[data-has-history] .history { display: block; }
[data-has-history] .history .table-wrap {
  /* Header + rows, but never past the scroll cap below, so a long log reserves
     exactly the height it will actually occupy. Rounding up is safe: the
     min-height applies before and after the script runs, so both states match. */
  min-height: min(calc(2.6rem + var(--history-rows, 0) * 3.05rem), 19rem);
}

/* Bound the log so a long session cannot push the article off the page. */
.history .table-wrap {
  max-height: 19rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.history .table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   22. Reserved space for tool output
   Deferred scripts fill these regions after first paint, so each one holds a
   box the same size as the content that lands in it. --reserve is set per
   tool where the default output is taller than one row.
   -------------------------------------------------------------------------- */
.output {
  min-height: var(--reserve, 3.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-content: flex-start;
}
.output:empty::before,
.output--empty::before {
  content: attr(data-empty);
  color: var(--text-faint);
  font-size: .9375rem;
  align-self: center;
  width: 100%;
  text-align: center;
}

/* Single-line result readouts (dice total, coin face). Reserving the line box
   means going from empty to filled changes nothing about the layout. */
.readout {
  min-height: 1.25em;
  text-align: center;
}

/* Skeleton colour cards — see partials/swatch-skeleton. */
.swatch--skeleton { animation: none; }
.swatch--skeleton .swatch__chip {
  background: var(--surface-3);
  cursor: default;
}
.swatch--skeleton .swatch__hex,
.swatch--skeleton .swatch__meta { color: transparent; }

/* ==========================================================================
   23. Wheel: modes, options, saved wheels, images
   ========================================================================== */

/* Disclosure for the advanced panel — keeps the default view uncluttered. */
.disclosure {
  margin-block-start: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "";
  margin-inline-start: auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
}
.disclosure[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.disclosure > summary:hover { color: var(--text); }
.disclosure__body {
  padding: 0 .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.option__label {
  display: block;
  margin-block-end: .45rem;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
}

/* Range slider */
.range {
  width: 100%;
  max-width: 22rem;
  accent-color: var(--brand);
  height: 1.5rem;
}

/* Theme swatches */
.swatch-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .6rem .35rem .35rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.swatch-btn:hover { border-color: var(--text-faint); color: var(--text); }
.swatch-btn[aria-pressed="true"] {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.swatch-btn__dots {
  display: flex;
  flex: none;
}
.swatch-btn__dots i {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 2px solid var(--surface);
  margin-inline-start: -.35rem;
}
.swatch-btn__dots i:first-child { margin-inline-start: 0; }

/* Tally scoreboard */
.tally { display: none; margin-block-start: 2.5rem; }
.tally.is-visible { display: block; }
.tally__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tally__row {
  display: grid;
  grid-template-columns: minmax(5rem, 12rem) 1fr auto;
  align-items: center;
  gap: .75rem;
}
.tally__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tally__bar {
  height: .75rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.tally__bar > span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand);
  transition: width .3s ease;
}
.tally__count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 2ch;
  text-align: end;
}

/* Saved wheels + image rows share this row shape */
.saved-row,
.image-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.saved-row__name,
.image-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: .9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 16rem;
  overflow-y: auto;
}
.image-row__thumb {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  background: var(--surface-3) center / cover no-repeat;
  border: 1px solid var(--border);
}

/* Fullscreen presentation mode */
.wheel-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  background: var(--bg);
  padding: 2vmin;
}
.wheel-stage:fullscreen .wheel-stage__canvas {
  width: min(92vmin, 92vh);
  height: min(92vmin, 92vh);
}
.wheel-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  background: var(--bg);
}

/* Mode hint: all three are in the HTML, CSS reveals the active one. The head
   script sets data-wheel-mode before first paint, so the correct line is there
   from the start instead of being written in afterwards. */
.mode-hint { display: none; }
:root:not([data-wheel-mode]) .mode-hint[data-for="normal"],
[data-wheel-mode="normal"] .mode-hint[data-for="normal"],
[data-wheel-mode="elimination"] .mode-hint[data-for="elimination"],
[data-wheel-mode="tally"] .mode-hint[data-for="tally"] { display: block; }

/* Tally board revealed and sized pre-paint for a visitor who already has one. */
[data-has-tally] .tally { display: block; }
[data-has-tally] .tally__list {
  min-height: calc(var(--tally-rows, 0) * 1.7rem + max(var(--tally-rows, 1) - 1, 0) * .5rem);
}

/* Team generator cards */
.team-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: .9rem 1rem 1rem;
  animation: pop .3s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.team-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  margin-block-end: .6rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--border);
}
.team-card__count {
  margin-inline-start: auto;
  padding: .1rem .5rem;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.team-card__list {
  margin: 0;
  padding-inline-start: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .9375rem;
}
.team-card__list li::marker { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Magic 8 ball */
.ball-stage {
  display: grid;
  place-items: center;
  padding-block: 1.5rem 2.5rem;
}
.eight-ball {
  width: clamp(13rem, 58vmin, 19rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: radial-gradient(circle at 34% 26%, #55555f, #1b1b20 58%, #050507);
  box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, .45), inset 0 -1rem 2rem rgba(0, 0, 0, .6);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s;
}
.eight-ball:hover { transform: scale(1.02); }
.eight-ball:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.eight-ball.is-shaking { animation: ball-shake .9s ease-in-out; }

@keyframes ball-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-5%, 2%) rotate(-7deg); }
  35% { transform: translate(5%, -2%) rotate(7deg); }
  55% { transform: translate(-4%, 3%) rotate(-5deg); }
  75% { transform: translate(3%, -1%) rotate(4deg); }
}

.eight-ball__window {
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 12%;
  margin: 0;
  text-align: center;
  background: radial-gradient(circle at 40% 34%, #2b4f9e, #10224d 70%);
  box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, .6);
  color: #fff;
  font-weight: 700;
  font-size: clamp(.9rem, .55rem + 1.5vw, 1.15rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: opacity .25s;
}
/* Before the first question the window shows the printed 8, big. */
.eight-ball__window.is-idle { font-size: clamp(2.5rem, 1.5rem + 4vw, 3.5rem); }
.eight-ball__window.is-fading { opacity: 0; }

/* Truth or dare */
.prompt-card {
  --tod: var(--brand);
  display: grid;
  place-content: center;
  gap: .75rem;
  text-align: center;
  min-height: 15rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-block-start: 4px solid var(--tod);
}
.prompt-card[data-kind="truth"] { --tod: #2563eb; }
.prompt-card[data-kind="dare"] { --tod: #db2777; }
.prompt-card.is-new { animation: pop .32s cubic-bezier(.2, 1.3, .4, 1); }

.prompt-card__kind {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tod);
}
.prompt-card__text {
  font-size: clamp(1.15rem, .9rem + 1.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
  max-width: 34rem;
  overflow-wrap: anywhere;
}

.tod-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-block-start: 1.25rem;
}
.tod-btn { font-size: 1.125rem; }
.tod-btn--truth {
  --btn-bg: #2563eb;
  --btn-fg: #fff;
  --btn-bd: #2563eb;
}
.tod-btn--truth:hover { background: #1d4fd7; border-color: #1d4fd7; color: #fff; }
.tod-btn--dare {
  --btn-bg: #db2777;
  --btn-fg: #fff;
  --btn-bd: #db2777;
}
.tod-btn--dare:hover { background: #be185d; border-color: #be185d; color: #fff; }