/* /settings, the DMCA form on /dmca, and the staff DMCA queue.
 *
 * Token-only: every colour comes from --ww-* / --club-* so the midnight
 * theme flows through. The field, toggle and check components are defined
 * here once and shared by those three surfaces.
 */

.ww-account {
  max-width: 46rem;
}

.ww-account-title {
  margin: 0;
  font-family: var(--ww-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ww-ink);
}

.ww-account-lede {
  margin: 0.5rem 0 0;
  color: var(--ww-ink-soft);
}

.ww-account-lede a,
.ww-account-note a {
  color: var(--club-brass);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ww-account-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--club-brass);
}

.ww-account-heading {
  margin: 0 0 0.5rem;
  font-family: var(--ww-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ww-ink);
}

.ww-account-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ww-line);
}

.ww-account-note,
.ww-account-empty {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ww-ink-soft);
  max-width: 62ch;
}

.ww-account-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--ww-warning-text);
  background: color-mix(in oklch, var(--ww-warning-text) 10%, var(--ww-paper-2));
  color: var(--ww-ink);
}

.ww-account-banner p {
  margin: 0;
  color: var(--ww-ink-soft);
}

/* -- forms ---------------------------------------------------------------- */

.ww-form {
  display: grid;
  gap: 1rem;
}

.ww-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 40rem) {
  .ww-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ww-field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.ww-field-label {
  font-weight: 600;
  color: var(--ww-ink);
}

.ww-field-input {
  inline-size: 100%;
  min-height: var(--ww-control-min);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out);
}

textarea.ww-field-input {
  resize: vertical;
}

@media (hover: hover) {
  .ww-field-input:hover {
    border-color: color-mix(in oklch, var(--ww-line) 50%, var(--club-brass));
  }
}

.ww-field-input:focus-visible {
  border-color: var(--club-brass);
}

.ww-field-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ww-field-input[aria-invalid="true"] {
  border-color: var(--ww-danger);
}

.ww-field-hint {
  min-height: 1lh;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ww-ink-soft);
}

.ww-field-hint.is-error {
  color: var(--ww-danger-text);
}

.ww-form-errors {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--ww-danger);
  background: color-mix(in oklch, var(--ww-danger) 10%, var(--ww-paper-2));
  color: var(--ww-ink);
}

.ww-form-errors ul {
  margin: 0.375rem 0 0;
  padding-inline-start: 1.25rem;
  list-style: disc;
  color: var(--ww-danger-text);
}

.ww-form-attest {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  border: 0;
}

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

.ww-form-actions form {
  display: contents;
}

/* A checkbox with a sentence beside it. The box keeps the browser's own
   states (hover, focus ring, disabled); only its colour and size are set. */
.ww-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem;
  min-height: var(--ww-control-min);
  cursor: pointer;
  color: var(--ww-ink);
  line-height: 1.5;
}

.ww-check input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--club-brass);
  cursor: pointer;
}

.ww-check input:disabled,
.ww-check input:disabled + span {
  cursor: not-allowed;
  opacity: 0.55;
}

/* -- preference switches --------------------------------------------------- */

.ww-pref-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.ww-pref-group + .ww-pref-group {
  margin-top: 0.75rem;
}

.ww-pref-legend {
  margin-bottom: 0.25rem;
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--club-brass);
}

.ww-pref-row {
  border-bottom: 1px solid color-mix(in oklch, var(--ww-line) 60%, transparent);
}

/* The real checkbox stays in the accessibility tree and the tab order; the
   track beside it is its picture. */
.ww-toggle-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ww-pref-label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: var(--ww-control-min);
  padding-block: 0.5rem;
  cursor: pointer;
  color: var(--ww-ink);
}

.ww-toggle-track {
  position: relative;
  flex: none;
  inline-size: 2.5rem;
  block-size: 1.5rem;
  border: 1px solid var(--ww-line);
  border-radius: 999px;
  background: color-mix(in oklch, var(--ww-line) 55%, var(--ww-paper));
  transition: background-color var(--ww-dur-short) var(--ww-ease-in-out),
              border-color var(--ww-dur-short) var(--ww-ease-in-out);
}

.ww-toggle-thumb {
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: var(--ww-ink-soft);
  transition: transform var(--ww-dur-short) var(--ww-ease-in-out),
              background-color var(--ww-dur-short) var(--ww-ease-in-out);
}

.ww-toggle-input:checked + .ww-pref-label .ww-toggle-track {
  border-color: var(--club-brass);
  background: color-mix(in oklch, var(--club-brass) 35%, var(--ww-paper));
}

.ww-toggle-input:checked + .ww-pref-label .ww-toggle-thumb {
  transform: translateX(1rem);
  background: var(--club-brass-lit, var(--club-brass));
}

@media (hover: hover) {
  .ww-pref-label:hover .ww-toggle-track {
    border-color: color-mix(in oklch, var(--ww-line) 40%, var(--club-brass));
  }
}

.ww-pref-label:active .ww-toggle-thumb {
  inline-size: 1.125rem;
}

.ww-toggle-input:focus-visible + .ww-pref-label .ww-toggle-track {
  outline: 3px solid var(--ww-focus);
  outline-offset: 3px;
}

.ww-toggle-input:disabled + .ww-pref-label {
  cursor: not-allowed;
  opacity: 0.55;
}

/* -- settings history ------------------------------------------------------ */

.ww-history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-history-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid color-mix(in oklch, var(--ww-line) 60%, transparent);
  font-size: 0.875rem;
  color: var(--ww-ink);
}

@media (min-width: 40rem) {
  .ww-history-row {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  }
}

.ww-history-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--ww-mono);
  font-size: 0.8125rem;
}

.ww-history-state.is-on { color: var(--ww-success-text); }
.ww-history-state.is-off { color: var(--ww-ink-soft); }

.ww-history-time {
  grid-column: 2;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--ww-ink-soft);
}

@media (min-width: 40rem) {
  .ww-history-time {
    grid-column: auto;
  }
}

/* -- destructive button ---------------------------------------------------- */

.ww-account .ww-btn-danger {
  border-color: var(--ww-danger);
  background: transparent;
  color: var(--ww-danger-text);
}

@media (hover: hover) {
  .ww-account .ww-btn-danger:hover {
    background: color-mix(in oklch, var(--ww-danger) 14%, transparent);
  }
}

.ww-account .ww-btn-danger:active {
  transform: translateY(1px);
  background: color-mix(in oklch, var(--ww-danger) 22%, transparent);
}

.ww-account .ww-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -- staff DMCA queue -------------------------------------------------------- */

.ww-staff-table {
  inline-size: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--ww-ink);
}

.ww-staff-table th,
.ww-staff-table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--ww-line);
  text-align: start;
  vertical-align: top;
}

.ww-staff-table th {
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.ww-staff-url {
  overflow-wrap: anywhere;
}

.ww-staff-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0;
}

@media (min-width: 40rem) {
  .ww-staff-facts {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

.ww-staff-facts dt {
  font-weight: 600;
  color: var(--ww-ink-soft);
}

.ww-staff-facts dd {
  margin: 0 0 0.5rem;
  color: var(--ww-ink);
}
/* Achievements & Prize Counter Showcase */

.ww-achieve-summary {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ww-achieve-stat {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.25rem;
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  min-width: 8rem;
}

.ww-achieve-stat__value {
  font-family: var(--ww-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ww-gold);
  font-variant-numeric: tabular-nums;
}

.ww-achieve-stat__label {
  font-size: 0.8rem;
  color: var(--ww-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ww-prizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.ww-prize-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  position: relative;
  transition: var(--ww-transition-panel);
}

.ww-prize-card.is-owned {
  border-color: color-mix(in oklch, var(--ww-gold) 40%, var(--ww-line));
  background: color-mix(in oklch, var(--ww-paper) 92%, var(--ww-gold));
}

.ww-prize-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  color: var(--ww-gold);
  font-size: 1.5rem;
  margin-bottom: 0.85rem;
}

.ww-prize-card.is-owned .ww-prize-badge {
  background: var(--ww-gold);
  color: var(--ww-paper);
  border-color: var(--ww-gold);
}

.ww-prize-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ww-prize-name {
  font-family: var(--ww-font);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--ww-ink);
}

.ww-prize-desc {
  font-size: 0.88rem;
  color: var(--ww-ink-soft);
  margin: 0 0 1rem;
  flex: 1;
}

.ww-prize-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ww-line);
}

.ww-prize-cost {
  font-family: var(--ww-mono);
  font-weight: 700;
  color: var(--ww-emerald);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ww-cat-group {
  margin-bottom: 2rem;
}

.ww-cat-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--ww-gold);
  font-size: 1.15rem;
}

.ww-cat-header h3 {
  margin: 0;
  font-family: var(--ww-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ww-ink);
}

.ww-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.ww-achieve-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  transition: var(--ww-transition-panel);
}

.ww-achieve-card.is-unlocked {
  border-color: color-mix(in oklch, var(--ww-emerald) 50%, var(--ww-line));
  background: color-mix(in oklch, var(--ww-paper) 94%, var(--ww-emerald));
}

.ww-achieve-card.is-locked {
  opacity: 0.65;
}

.ww-achieve-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  color: var(--ww-ink-soft);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ww-achieve-card.is-unlocked .ww-achieve-icon {
  background: color-mix(in oklch, var(--ww-emerald) 20%, var(--ww-paper-2));
  color: var(--ww-emerald);
  border-color: var(--ww-emerald);
}

.ww-stamp-mark {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--ww-gold);
  color: var(--ww-paper);
  border-radius: 50%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.ww-achieve-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ww-achieve-title {
  margin: 0 0 0.25rem;
  font-family: var(--ww-font);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ww-ink);
}

.ww-achieve-desc {
  font-size: 0.82rem;
  color: var(--ww-ink-soft);
  margin: 0 0 0.65rem;
  line-height: 1.35;
}

.ww-achieve-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  margin-top: auto;
}

.ww-achieve-reward {
  font-family: var(--ww-mono);
  font-weight: 700;
  color: var(--ww-emerald);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ww-achieve-date {
  color: var(--ww-ink-soft);
}

.ww-achieve-status {
  color: var(--ww-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.ww-badge--owned {
  background: color-mix(in oklch, var(--ww-gold) 20%, var(--ww-paper));
  color: var(--ww-gold);
  border: 1px solid var(--ww-gold);
  padding: 0.25rem 0.65rem;
  border-radius: var(--ww-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Real-Time Achievement Toast Notification */
.ww-achievement-toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.35rem;
  background: var(--ww-navy);
  color: var(--ww-paper);
  border: 2px solid var(--ww-gold);
  border-radius: var(--ww-radius);
  box-shadow: 0 10px 30px var(--ww-shadow), 0 0 16px var(--ww-gold);
  transform: translateY(-150%);
  opacity: 0;
  transition: transform var(--ww-dur-short) var(--ww-ease-play), opacity var(--ww-dur-short) var(--ww-ease-out);
  pointer-events: none;
  max-width: 380px;
}

.ww-achievement-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ww-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-gold);
  color: var(--ww-paper);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.ww-toast-body {
  display: flex;
  flex-direction: column;
}

.ww-toast-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ww-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}

.ww-toast-title {
  font-family: var(--ww-font);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--ww-paper);
}

.ww-toast-reward {
  font-family: var(--ww-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ww-emerald);
  margin-top: 0.25rem;
}
/* The admin metrics dashboard (/admin). Builds on the account page's title
   and lede and the staff table (account_settings.css); everything here is
   the dashboard's own: the window switch, headline figures, daily bar charts
   and breakdown grids. Figures are mono and tabular so columns of numbers
   line up and a changing count never shifts its neighbours. */

.ww-admin {
  max-width: 72rem;
}

.ww-admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

/* --- Window switch ------------------------------------------------------- */

.ww-admin-window {
  display: inline-flex;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  overflow: hidden;
}

.ww-admin-window-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ww-control-min);
  padding: 0 0.875rem;
  font-family: var(--ww-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--ww-ink-soft);
  text-decoration: none;
  transition: color var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-admin-window-link + .ww-admin-window-link {
  border-inline-start: 1px solid var(--ww-line);
}

@media (hover: hover) {
  .ww-admin-window-link:hover {
    color: var(--ww-ink);
    background: color-mix(in oklch, var(--ww-paper-2) 70%, var(--club-brass));
  }
}

.ww-admin-window-link:active {
  transform: translateY(1px);
}

.ww-admin-window-link[aria-current="page"] {
  color: var(--ww-ink);
  background: var(--ww-paper-2);
  box-shadow: inset 0 -2px 0 var(--club-brass);
}

/* --- Headline figures ---------------------------------------------------- */

.ww-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 1.75rem 0 0;
}

.ww-admin-stats--compact {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.ww-admin-stat {
  padding-top: 0.625rem;
  border-top: 1px solid var(--club-brass-dim);
}

.ww-admin-stat dt {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ww-ink-soft);
}

.ww-admin-stat dd {
  margin: 0.25rem 0 0;
  font-family: var(--ww-mono);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ww-ink);
}

.ww-admin-stats--compact .ww-admin-stat dd {
  font-size: 1.375rem;
}

.ww-admin-stat dd.ww-admin-stat-note {
  margin-top: 0.25rem;
  font-family: var(--ww-font);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ww-ink-soft);
}

.ww-admin-stat dd a {
  color: var(--club-brass);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Sections ------------------------------------------------------------ */

.ww-admin-section {
  margin-top: 3rem;
}

.ww-admin-h2 {
  margin: 0 0 0.75rem;
  font-family: var(--ww-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ww-ink);
}

.ww-admin section .ww-admin-h2 {
  margin-top: 2rem;
  font-size: 1.125rem;
}

.ww-admin-note {
  max-width: 70ch;
  margin: 0.75rem 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ww-ink-soft);
}

.ww-admin-note a {
  color: var(--club-brass);
}

.ww-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 2rem;
  align-items: start;
}

.ww-admin-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2rem;
}

@media (min-width: 48rem) {
  .ww-admin-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Tables -------------------------------------------------------------- */

.ww-admin .ww-staff-table caption {
  caption-side: top;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  text-align: start;
  color: var(--ww-ink-soft);
}

/* Row headers read as labels, not as the column headers' small capitals. */
.ww-admin .ww-staff-table tbody th {
  font-family: var(--ww-font);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ww-ink);
}

.ww-admin .ww-staff-table a {
  color: var(--ww-ink);
  text-decoration: underline;
  text-decoration-color: var(--club-brass-dim);
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .ww-admin .ww-staff-table a:hover {
    text-decoration-color: var(--club-brass);
  }
}

.ww-admin-num {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

/* The staff table aligns every cell to the start; figures read from the end. */
.ww-admin .ww-staff-table .ww-admin-num {
  text-align: end;
}

.ww-admin-idle {
  margin-top: 0.5rem;
}

.ww-admin-idle summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--ww-control-min);
  font-size: 0.875rem;
  color: var(--ww-ink-soft);
  cursor: pointer;
}

@media (hover: hover) {
  .ww-admin-idle summary:hover {
    color: var(--ww-ink);
  }
}

.ww-admin-idle-list {
  columns: 14rem;
  column-gap: 2rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.9;
}

.ww-admin-idle-list a {
  color: var(--ww-ink);
  text-decoration-color: var(--club-brass-dim);
  text-underline-offset: 0.2em;
}

.ww-admin-idle-list span {
  color: var(--ww-ink-soft);
}

/* A wide table scrolls inside its own frame; the page never does. */
.ww-admin-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
}

.ww-admin-games td {
  white-space: nowrap;
}

/* --- Daily bar chart ----------------------------------------------------- */

.ww-admin-chart {
  margin: 1.25rem 0 0;
}

.ww-admin-chart-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.ww-admin-chart-title {
  color: var(--ww-ink);
}

.ww-admin-chart-total {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink-soft);
}

.ww-admin-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 7rem;
  border-bottom: 1px solid var(--ww-line);
}

.ww-admin-bars--dense {
  gap: 1px;
}

.ww-admin-bar {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--v) * 100%);
  background: var(--club-brass);
  border-radius: 4px 4px 0 0;
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-admin-bars--dense .ww-admin-bar {
  border-radius: 2px 2px 0 0;
}

.ww-admin-bar--zero {
  background: transparent;
}

@media (hover: hover) {
  .ww-admin-bar:hover {
    background: var(--club-brass-lit);
  }
}

.ww-admin-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  color: var(--ww-ink-soft);
}

.ww-admin-chart-table summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--ww-control-min);
  font-size: 0.8125rem;
  color: var(--ww-ink-soft);
  cursor: pointer;
}

@media (hover: hover) {
  .ww-admin-chart-table summary:hover {
    color: var(--ww-ink);
  }
}

.ww-admin-chart-table .ww-staff-table {
  margin-top: 0;
  max-width: 24rem;
}

/* An empty breakdown sits level with the tables beside it. */
.ww-admin-grid > .ww-account-empty {
  margin-top: 1.75rem;
}

.ww-admin > .ww-account-empty {
  margin-top: 1.25rem;
}
.arcade-catalog,.arcade-open-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.arcade-ticket,.arcade-open-match{display:flex;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--ww-border,#334155);border-radius:1rem;background:#111827;color:#e5e7eb}.arcade-ticket>i{font-size:2rem;color:#38bdf8}.arcade-ticket div{flex:1}.arcade-ticket h2,.arcade-ticket p{margin:.2rem 0}.arcade-ticket small{color:#fbbf24;text-transform:uppercase;letter-spacing:.08em}.arcade-ticket-actions{display:flex;flex-direction:column;gap:.5rem;flex:0 0 auto;min-width:170px}.arcade-ticket-actions form{margin:0}.arcade-practice-form{display:flex;flex-direction:column;gap:.5rem}.arcade-open-match{justify-content:space-between}.arcade-open-match span{display:block;color:#94a3b8}.arcade-match-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:1rem}.arcade-stage{background:#030712;padding:1rem;border-radius:1rem;box-shadow:0 0 40px #0ea5e933}.arcade-stage canvas{display:block;width:100%;aspect-ratio:16/9;background:#07111f;border:1px solid #334155;border-radius:.75rem;outline:none}.arcade-stage canvas:focus{border-color:#38bdf8}.arcade-help{display:flex;justify-content:space-between;gap:1rem;color:#94a3b8;padding:.75rem .25rem 0}@media(max-width:760px){.arcade-ticket{flex-direction:column;align-items:stretch;text-align:center}.arcade-ticket-actions{min-width:0}.arcade-help{flex-direction:column}.arcade-match-head{flex-direction:column;gap:1rem}}



/* CRT Scanline Filter & Barcade Overlay */
body.ww-crt-active::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  background:
    repeating-linear-gradient(
      0deg,
      var(--ww-crt-scanline) 0px,
      var(--ww-crt-scanline) 1px,
      transparent 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at center,
      transparent 55%,
      color-mix(in oklch, var(--ww-navy) 45%, transparent) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  body.ww-crt-active::after {
    background: repeating-linear-gradient(
      0deg,
      var(--ww-crt-scanline) 0px,
      var(--ww-crt-scanline) 1px,
      transparent 1px,
      transparent 3px
    );
  }
}

.ww-arcade-bezel {
  position: relative;
  border: 8px solid var(--ww-arcade-bezel);
  border-radius: var(--ww-radius);
  background: var(--ww-navy);
  box-shadow: none;
  overflow: hidden;
}

.ww-arcade-marquee {
  flex-wrap: wrap;
  gap: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: var(--ww-paper-2);
  border-bottom: 2px solid var(--ww-line);
  color: var(--ww-ink);
}

.ww-arcade-marquee__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ww-display);
  font-size: 1.15rem;
  color: var(--ww-gold);
}

.ww-arcade-marquee__meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ww-arcade-token-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ww-mono);
  font-size: 0.85rem;
  color: var(--ww-gold);
  background: color-mix(in oklch, var(--ww-paper) 80%, var(--ww-gold));
  padding: 0.25rem 0.65rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
}

.ww-arcade-token-slot strong {
  color: var(--ww-ink);
  font-weight: 700;
}

.ww-arcade-screen {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cabinet-ratio, 16 / 9);
  background: var(--ww-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A fixed-ratio 2D screen is as wide as the bezel only until it would be
   taller than the window less the chrome above it (topbar and marquee): past
   that the height stops and the width follows the ratio, centred. A tall
   board (Strongbox, 640 x 600) used to run 750 x 700 and lose its bottom
   rows off a 1280 x 900 window. The 3D stages, the text/Hondel screens and a
   `--fit` screen (Emerald Sweep widens its own ratio to the room below the
   marquee, and would read this cap as a narrow page) size themselves; full
   screen has its own rule below. */
.ww-arcade-screen:not(.ww-arcade-screen--kart, .ww-arcade-screen--stage, .ww-arcade-screen--fit, .ww-arcade-screen--text, .ww-hondel-screen) {
  --screen-max-h: max(18rem, calc(100dvh - 16rem));
  width: min(100%, calc(var(--screen-max-h) * var(--cabinet-ratio, 16 / 9)));
  max-height: var(--screen-max-h);
  margin-inline: auto;
}
/* On a desk the whole board should be on screen as the page lands: the
   topbar, page head and marquee above it take about 28rem. A phone scrolls
   to its board anyway, so it keeps the board wide and only stops it growing
   past one window. */
@media (min-width: 48rem) {
  .ww-arcade-screen:not(.ww-arcade-screen--kart, .ww-arcade-screen--stage, .ww-arcade-screen--fit, .ww-arcade-screen--text, .ww-hondel-screen) {
    --screen-max-h: max(18rem, calc(100dvh - 28rem));
  }
}

.ww-arcade-screen canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.ww-arcade-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ww-arcade-viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.ww-arcade-unsupported {
  display: grid;
  place-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--ww-ink-soft);
  gap: 0.75rem;
}

.ww-arcade-unsupported h3 {
  color: var(--ww-gold);
  font-size: 1.25rem;
  margin: 0;
}

.ww-arcade-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--ww-paper-2);
  border-top: 1px solid var(--ww-line);
}

.ww-arcade-key-group {
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ww-ink-soft);
}

.ww-arcade-key-pair { max-width: 100%; }
.ww-arcade-key-pair kbd { margin-inline-end: 0.3rem; }

/* The controller legend stays out of the bar until a pad is connected. */
.ww-arcade-key-group[hidden] { display: none; }

.ww-arcade-key-group kbd {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  font-family: var(--ww-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ww-ink);
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
}

/* The marquee's switches: CRT, full screen, and a cabinet's own sound (Neon
   City Racing). */
.ww-crt-toggle,
.ww-fullscreen-toggle,
.ww-cabinet-sound {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--ww-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ww-ink);
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

@media (hover: hover) {
  .ww-crt-toggle:hover,
  .ww-fullscreen-toggle:hover,
  .ww-cabinet-sound:hover {
    border-color: var(--ww-gold);
    color: var(--ww-gold);
  }
}

.ww-crt-toggle:focus-visible,
.ww-fullscreen-toggle:focus-visible,
.ww-cabinet-sound:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

.ww-crt-toggle:active,
.ww-fullscreen-toggle:active,
.ww-cabinet-sound:active {
  transform: translateY(1px);
}

/* The switch reads pressed once the browser is actually full screen. */
.ww-fullscreen-toggle[aria-pressed="true"] {
  border-color: var(--ww-gold);
  color: var(--ww-gold);
}

.ww-section-subtitle {
  color: var(--ww-ink-soft);
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.ww-arcade-cartridge-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ww-arcade-select {
  font-family: var(--ww-mono);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  color: var(--ww-ink);
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  outline: none;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

@media (hover: hover) {
  .ww-arcade-select:hover {
    border-color: var(--ww-gold);
    color: var(--ww-gold);
  }
}

.ww-arcade-select:focus-visible {
  outline: 3px solid var(--ww-focus, var(--ww-gold));
  outline-offset: 2px;
}

.ww-arcade-select:active {
  transform: translateY(1px);
}

.ww-arcade-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ww-arcade-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: color-mix(in oklch, var(--ww-navy) 90%, transparent);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  max-width: 480px;
  width: 90%;
  margin: auto;
}

.ww-arcade-loading-spinner {
  font-size: 2.25rem;
  color: var(--ww-gold);
}

.ww-arcade-loading-box h3 {
  font-family: var(--ww-display);
  font-size: 1.25rem;
  color: var(--ww-paper);
  margin: 0;
}

.ww-arcade-loading-box p {
  font-size: 0.88rem;
  color: var(--ww-ink-soft);
  margin: 0;
}

.ww-arcade-progress-track {
  width: 100%;
  height: 8px;
  background: var(--ww-navy-2);
  border: 1px solid var(--ww-line);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.ww-arcade-progress-bar {
  height: 100%;
  background: var(--ww-emerald);
  border-radius: 9999px;
  transition: width var(--ww-dur-short) var(--ww-ease-out);
}

.ww-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ww-spec-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink);
  font-size: 0.9rem;
}

.ww-spec-card i {
  color: var(--ww-emerald);
  font-size: 1.1rem;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .ww-arcade-marquee {
  flex-wrap: wrap;
  gap: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ww-arcade-marquee__meta {
  flex-wrap: wrap;
  justify-content: flex-end;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}



/* Physical verbs stay within reach even when a cabinet uses a canvas. */
.ww-cabinet-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--ww-line);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
}
.ww-cabinet-commands .ww-btn { min-width: var(--ww-control-min); white-space: nowrap; }
.ww-cabinet-commands [aria-pressed="true"] { border-color: var(--club-brass-lit); background: var(--ww-navy-2); color: var(--ww-ink); }
/* Gamepad layout for the action cabinets: a d-pad cross under the thumb on
   the left, the three verbs stacked for the thumb on the right, and Start on
   its own above. The buttons keep their order in the DOM (and so the tab
   order: start, directions, actions); only the grid places them. */
.ww-cabinet-commands--pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--ww-control-min), 3.25rem)) minmax(0, 1fr);
  grid-template-areas:
    "start start start a1"
    ".     up    .     a2"
    "left  .     right a3"
    ".     down  .     .";
  column-gap: 0.4rem;
  row-gap: 0.4rem;
  align-items: stretch;
}
.ww-cabinet-commands--pad .ww-btn { margin: 0; min-height: var(--ww-control-min); padding-inline: 0.5rem; }
.ww-cabinet-commands--pad [data-key="start"] { grid-area: start; }
.ww-cabinet-commands--pad [data-key="arrowup"] { grid-area: up; }
.ww-cabinet-commands--pad [data-key="arrowleft"] { grid-area: left; }
.ww-cabinet-commands--pad [data-key="arrowright"] { grid-area: right; }
.ww-cabinet-commands--pad [data-key="arrowdown"] { grid-area: down; }
.ww-cabinet-commands--pad [data-key=" "] { grid-area: a1; }
.ww-cabinet-commands--pad [data-key="x"] { grid-area: a2; }
.ww-cabinet-commands--pad [data-key="c"] { grid-area: a3; }
.ww-cabinet-commands--pad [data-key=" "],
.ww-cabinet-commands--pad [data-key="x"],
.ww-cabinet-commands--pad [data-key="c"] { margin-left: auto; width: min(100%, 14rem); }
/* A held action button reads as held, like a pressed arcade button. */
.ww-cabinet-commands--pad .ww-btn[data-held="true"] { transform: translateY(1px); border-color: var(--club-brass-lit); background: var(--ww-navy-2); color: var(--ww-ink); }
/* Neon City Racing: the two steer buttons hold the outer edges at every width --
   left under the left thumb, right under the right -- with the verbs between
   them. On a phone the steer buttons run two rows tall. */
.ww-cabinet-commands--kart {
  display: grid;
  grid-template-columns: minmax(var(--ww-control-min), 1fr) repeat(3, minmax(0, 1fr)) minmax(var(--ww-control-min), 1fr);
  grid-template-areas: "left drift item brake right";
  gap: 0.5rem;
}
@media (max-width: 30rem) {
  .ww-cabinet-commands--kart {
    grid-template-columns: minmax(var(--ww-control-min), 1.25fr) repeat(2, minmax(0, 1fr)) minmax(var(--ww-control-min), 1.25fr);
    grid-template-areas:
      "left drift item  right"
      "left brake brake right";
  }
}
.ww-cabinet-commands--kart .ww-btn { margin: 0; min-width: 0; min-height: var(--ww-control-min); padding-inline: 0.5rem; }
.ww-cabinet-commands--kart [data-key="arrowleft"] { grid-area: left; }
.ww-cabinet-commands--kart [data-key="drift"] { grid-area: drift; }
.ww-cabinet-commands--kart [data-key="item"] { grid-area: item; }
.ww-cabinet-commands--kart [data-key="brake"] { grid-area: brake; }
.ww-cabinet-commands--kart [data-key="arrowright"] { grid-area: right; }
.ww-cabinet-commands--kart .ww-btn[data-held="true"] { transform: translateY(1px); border-color: var(--club-brass-lit); background: var(--ww-navy-2); color: var(--ww-ink); }
/* Neon City Racing draws its HUD in the viewport's own pixels and its camera
   takes any aspect (kart_controller.js), so its screen is sized to the window
   rather than to 640 x 420: as wide as the page allows on a desk, with the
   height kept short enough that the steer buttons stay on screen below it,
   and on a phone held upright about square instead of a 342 x 224 strip. */
/* The other 3D cabinets (bumper, bomb pass, skywing, firefight) render at the
   box's real resolution and gain field of view from a bigger screen, so they
   share the kart's screen: as wide as the desk allows, sized to the viewport
   height rather than a fixed strip. `--stage` is the shared class; the kart
   keeps its own name only because it is the one that names it in the catalog. */
.ww-arcade-screen--kart,
.ww-arcade-screen--stage {
  aspect-ratio: auto;
  height: clamp(14rem, calc(100dvh - 10rem), 66cqi);
}
@media (max-width: 30rem) {
  .ww-arcade-screen--kart,
  .ww-arcade-screen--stage {
    height: clamp(14rem, calc(100dvh - 15rem - var(--ww-dock) - var(--ww-safe-bottom)), 106cqi);
  }
}
/* A cabinet canvas is a play surface: a drag steers the game, never the page.
   Every cabinet takes its pointer input on the canvas, command bar or not. */
.ww-arcade-screen canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* The result card sits over the screen, which is short on a phone, so it
   scales its heading to the screen and scrolls rather than clipping. */
.ww-arcade-screen .ww-arena-result { overflow-y: auto; padding: 1rem; }
.ww-arcade-screen .ww-arena-result h2 { font-size: clamp(1.5rem, 5vw, 3rem); }
.ww-arcade-screen .ww-arena-result p { font-size: clamp(0.9rem, 2.4vw, 1.1rem); margin-block: 0.25rem; }
.ww-cabinet-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.75rem; margin-top: 0.75rem; }
.ww-arcade-screen .ww-cabinet-result-actions .ww-btn { margin-top: 0; min-height: var(--ww-control-min); white-space: nowrap; }
.ww-cabinet-result-form { display: contents; }
.ww-arcade-status-info { flex-basis: 100%; min-height: 2.5em; }
.ww-crt-toggle:disabled,
.ww-fullscreen-toggle:disabled,
.ww-cabinet-sound:disabled { opacity: 0.6; cursor: not-allowed; }

.ww-arcade-bezel:has(.ww-cabinet-commands) { max-width: 48rem; margin-inline: auto; }
/* After the 48rem command-bar cabinet (same specificity, so order decides):
   the 3D cabinets take the wider bezel. Kart and bumper/bomb have a command
   bar too, so they must come after the 48rem rule to win. */
.ww-arcade-bezel:has(.ww-arcade-screen--kart),
.ww-arcade-bezel:has(.ww-arcade-screen--stage) { max-width: 72rem; container-type: inline-size; }

/* Full screen fills the browser with the whole bezel so a cabinet's command
   bar and legend stay reachable. The screen grows to the space it is given:
   the 3D stages fill it (their camera follows the box), while a fixed-ratio 2D
   screen keeps its shape and letterboxes rather than stretching its art. */
.ww-arcade-bezel:fullscreen {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  background: var(--ww-navy-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  overflow: auto;
}
.ww-arcade-bezel:fullscreen .ww-arcade-screen {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.ww-arcade-bezel:fullscreen .ww-arcade-screen--kart,
.ww-arcade-bezel:fullscreen .ww-arcade-screen--stage {
  width: 100%;
  aspect-ratio: auto;
}
.arcade-match-head h1 { font-family: var(--ww-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin-block: 0.25rem 0.5rem; }
.ww-cabinet-connection {
  margin: 0;
  padding: .65rem 1rem;
  color: var(--ww-ink);
  background: var(--ww-paper-2);
  border-bottom: 1px solid var(--ww-line);
  font-variant-numeric: tabular-nums;
}

/* N-human (4-8) live table: the gather/ready roster and the settled standings.
   Tokens only; the buttons carry their states through the shared .ww-btn rules. */
.ww-gather__count { color: var(--ww-ink-soft); margin-block: 0.25rem 1rem; }
.ww-gather__count strong { color: var(--ww-ink); font-variant-numeric: tabular-nums; }
.ww-gather__note { color: var(--ww-ink-soft); margin-block: 0.5rem; }
.ww-gather__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: center; margin-top: 1rem; }
.ww-seat-roster,
.ww-seat-standings { list-style: none; margin: 0 auto; padding: 0; max-width: 26rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ww-seat-row,
.ww-seat-standings li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.9rem; min-height: var(--ww-control-min);
  background: var(--ww-paper-2); border: 1px solid var(--ww-line); border-radius: var(--ww-radius-sm);
}
.ww-seat-row.is-open { border-style: dashed; color: var(--ww-ink-soft); }
.ww-seat-row.is-ready { border-color: color-mix(in oklch, var(--ww-line) 55%, var(--ww-emerald)); }
.ww-seat-row.is-you { box-shadow: inset 0.2rem 0 0 var(--ww-gold); }
.ww-seat-n {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 1.6rem; block-size: 1.6rem; flex: none;
  background: var(--ww-navy); color: var(--ww-paper);
  border-radius: 999px; font-family: var(--ww-mono); font-size: 0.8rem; font-weight: 700;
}
.ww-seat-name { flex: 1 1 auto; color: var(--ww-ink); }
.ww-seat-flag { font-family: var(--ww-mono); font-size: 0.72rem; font-weight: 700; color: var(--ww-emerald); text-transform: uppercase; letter-spacing: 0.04em; }
.ww-seat-flag.is-waiting { color: var(--ww-ink-soft); }
.ww-seat-standings { margin-top: 0.75rem; }
.ww-seat-standings .ww-seat-score { font-family: var(--ww-mono); font-weight: 700; color: var(--ww-ink); font-variant-numeric: tabular-nums; }

/* The settled table. One centred column -- verdict, score, the cabinet's own
   account, the rating note -- and the next moves centred under it, so the
   heading and the buttons share an axis instead of the buttons hugging the
   left edge under a centred heading. */
.arcade-result { text-align: center; padding: 2rem 1rem 0.5rem; max-width: 40rem; margin-inline: auto; }
.arcade-result h2 { font-family: var(--ww-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; margin-block: 0.25rem 0.5rem; color: var(--ww-ink); }
.arcade-result__score { margin: 0; color: var(--ww-ink-soft); font-size: 0.9rem; }
.arcade-result__line { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.25rem; color: var(--ww-ink); font-size: 1rem; }
.arcade-result__line strong { font-family: var(--ww-mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--ww-ink); }
.arcade-result__summary { margin: 1rem auto 0; padding-top: 0.75rem; border-top: 1px solid var(--ww-line); max-width: 32rem; }
.arcade-result__summary p { margin: 0.25rem 0; color: var(--ww-ink); font-variant-numeric: tabular-nums; }
.arcade-result__note { margin: 0.75rem 0 0; color: var(--ww-ink-soft); font-size: 0.9rem; }
.arcade-result__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.25rem; }
.arcade-result__actions form { margin: 0; }
.arcade-result__actions .ww-btn { margin-top: 0; white-space: nowrap; }
.arcade-result__actions .ww-rematch-pending { flex-basis: 100%; text-align: center; margin: 0; }

/* The page head: the blurb takes the room, the way back keeps its one line.
   A long blurb (Disc Drift, Velvet Pool, Bomb Pass) used to squeeze
   "All cabinets" onto two lines. */
.arcade-match-head { gap: 1rem 1.5rem; }
.arcade-match-head > div { flex: 1 1 auto; min-width: 0; }
.arcade-match-head > .ww-btn { flex: none; white-space: nowrap; }
/* Ranked arena: lobby, challenge list and the live match page.
   The local practice arena's own styles live in lobby.css alongside the other
   game lobbies; these are the pieces only online play needs. */

.ww-arena-hero-rating {
  display: inline-flex;
  flex-direction: column;
  margin-top: 1rem;
  padding: .7rem 1.1rem;
  border: 1px solid color-mix(in oklch, currentColor 25%, transparent);
  border-radius: .9rem;
  background: color-mix(in oklch, currentColor 10%, transparent);
}
.ww-arena-hero-rating span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.ww-arena-hero-rating strong { font-size: 1.8rem; font-weight: 900; line-height: 1.1; }
.ww-arena-hero-rating small { opacity: .8; }

/* The roster is a radio group that looks like cards. The input itself is
   visually hidden rather than removed, so it keeps its place in the tab order
   and still answers to the keyboard. */
.ww-roster-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ww-roster-card {
  position: relative;
  min-height: 4.5rem;
  cursor: pointer;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), box-shadow var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-roster-card:hover { transform: translateY(-1px); border-color: var(--ww-gold); background: var(--ww-paper-2); }
}
.ww-roster-card:has(.ww-roster-radio:checked),
.ww-roster-card.is-chosen {
  border-color: var(--accent, var(--ww-gold));
  box-shadow: inset 0 0 0 1px var(--accent, var(--ww-gold));
}
.ww-roster-card:has(.ww-roster-radio:focus-visible) { outline: 3px solid var(--ww-focus); outline-offset: 3px; }
.ww-roster-avatar {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 999px;
  /* The accent behind this varies per fighter, so the initial carries a ring
     and a text shadow rather than betting on one ink reading on all of them. */
  color: var(--ww-owner-1-ink);
  text-shadow: 0 1px 2px color-mix(in oklch, var(--ww-navy) 85%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ww-navy) 35%, transparent);
  font-weight: 900;
}

.ww-roster-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.ww-stage-origin {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--ww-mono, monospace);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.4rem;
  border-radius: var(--ww-radius-sm, 4px);
  /* The stage picker is a light card inside a dark app, so the themed soft ink
     resolves to the wrong end of the palette here and measured 1.71:1. Deriving
     both from the card's own colour keeps the chip muted on either surface. */
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.ww-arena-queue { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.ww-arena-lobby-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ww-arena-panel {
  padding: 1.25rem;
  border: 1px solid var(--ww-line);
  border-radius: 1rem;
  background: var(--ww-paper);
  color: var(--ww-ink);
}
.ww-arena-panel .ww-kicker,
.ww-roster .ww-kicker { color: var(--ww-gold); }
.ww-arena-panel .ww-section-title { color: var(--ww-ink); }
.ww-arena-challenge-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.ww-arena-challenge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .75rem;
  border: 1px solid var(--ww-line);
  border-left: 4px solid var(--accent, var(--ww-gold));
  border-radius: .7rem;
  background: var(--ww-paper-2);
  color: inherit;
}
.ww-arena-challenge.is-link {
  text-decoration: none;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out), box-shadow var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-arena-challenge.is-link:hover {
    transform: translateX(1px);
    border-color: var(--ww-gold);
    background: var(--ww-paper);
  }
}
.ww-arena-challenge.is-link:active { transform: translateY(1px); }
.ww-arena-challenge.is-link:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 3px;
  background: var(--ww-paper);
}
.ww-arena-challenge strong { display: block; }
.ww-arena-challenge span { display: block; color: var(--ww-ink-soft); font-size: .85rem; }
.ww-arena-challenge small { color: var(--ww-success-text); font-weight: 800; }

.ww-arena-status-dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--ww-ink-soft); }
.ww-arena-status-dot.is-waiting { background: var(--ww-gold); }
.ww-arena-status-dot.is-in_progress { background: var(--ww-emerald); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ww-emerald) 18%, transparent); }
.ww-arena-status-dot.is-completed { background: color-mix(in oklch, var(--ww-ink-soft) 55%, transparent); }

.ww-arena-empty { padding: 2rem 1rem; color: var(--ww-ink-soft); text-align: center; }
.ww-arena-empty h3 { font-weight: 800; color: var(--ww-ink); }

.ww-arena-waiting {
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--ww-line);
  border-radius: 1rem;
  background: var(--ww-paper);
  color: var(--ww-ink);
  text-align: center;
}
.ww-arena-waiting h2 { font-size: 1.6rem; font-weight: 900; }
.ww-arena-waiting p { margin-top: .4rem; color: var(--ww-ink-soft); }
.ww-arena-waiting .ww-kicker { color: var(--ww-gold); }
.ww-arena-waiting .ww-roster-grid,
.ww-arena-waiting .ww-stage-row { text-align: left; }
/* Scoped to the panel so it outranks `.ww-arena-waiting p` by specificity,
   not by force. */
.ww-arena-waiting .ww-arena-stake { color: var(--ww-success-text); font-weight: 700; }

.ww-arena-match-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ww-arena-back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.ww-arena-match-stage { color: var(--ww-ink-soft); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }

/* The link readout sits on the navy controls bar in both themes, so it takes
   the navy chip's ink; quality is carried by the word as well as the edge. */
.ww-netplay-state {
  padding: .3rem .6rem;
  border: 1px solid var(--ww-owner-1-border);
  border-radius: 999px;
  color: var(--ww-owner-1-ink);
  font-variant-numeric: tabular-nums;
}
.ww-netplay-state[data-quality="good"] {
  border-color: var(--ww-emerald);
  color: color-mix(in oklch, var(--ww-emerald) 45%, var(--ww-owner-1-ink));
  background: color-mix(in oklch, var(--ww-emerald) 14%, transparent);
}
.ww-netplay-state[data-quality="waiting"] { border-color: var(--ww-ink-soft); color: color-mix(in oklch, var(--ww-owner-1-ink) 78%, var(--ww-owner-1-bg)); }
.ww-netplay-state[data-quality="poor"] { border-color: var(--ww-gold); color: color-mix(in oklch, var(--ww-gold) 70%, var(--ww-owner-1-ink)); }
.ww-netplay-state[data-quality="lost"] { border-color: var(--ww-danger); color: color-mix(in oklch, var(--ww-danger) 55%, var(--ww-owner-1-ink)); }

.ww-stage-chip { position: relative; min-height: 3rem; cursor: pointer; }
/* A stage is a card in a grid, not an inline chip: the name over its blurb,
   left-aligned, each card the same width. Scoped to the row so it outranks the
   theme's inline pill (.ww-filter-chip in zz-midnight) by specificity, and so
   the rules toggle above it keeps its own chip treatment. */
.ww-stage-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .6rem;
  margin-top: .75rem;
}
.ww-stage-row .ww-stage-chip {
  display: grid;
  align-content: start;
  gap: .2rem;
  padding: .7rem .85rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  font-size: .9rem;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}
.ww-stage-row .ww-stage-chip b { font-weight: 800; }
.ww-stage-row .ww-stage-chip small { margin-top: 0; font-size: .78rem; line-height: 1.35; }
@media (hover: hover) {
  .ww-stage-row .ww-stage-chip:hover { transform: translateY(-1px); border-color: var(--ww-gold); }
}
.ww-stage-row .ww-stage-chip:active { transform: translateY(1px); }
.ww-stage-row .ww-stage-chip:is(:has(.ww-roster-radio:checked), .is-active, [aria-pressed="true"]) {
  border-color: var(--ww-gold);
  box-shadow: inset 0 0 0 1px var(--ww-gold);
}
.ww-stage-row .ww-stage-chip:has(.ww-roster-radio:disabled) { opacity: .5; cursor: not-allowed; }
.ww-stage-chip:has(.ww-roster-radio:checked) { border-color: var(--ww-gold); background: var(--ww-paper-2); color: var(--ww-ink); }
.ww-stage-chip:has(.ww-roster-radio:focus-visible) { outline: 3px solid var(--ww-focus); outline-offset: 3px; }
.ww-stage-chip small { display: block; margin-top: .2rem; color: var(--ww-ink-soft); font-weight: 600; }

@media (max-width: 860px) {
  .ww-arena-lobby-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ww-arena-panel,
  .ww-arena-waiting { padding: 1rem; }
  .ww-arena-queue { display: grid; grid-template-columns: 1fr; }
  .ww-arena-queue .ww-btn { width: 100%; }
  .ww-arena-challenge { grid-template-columns: auto minmax(0, 1fr); }
  .ww-arena-challenge > form,
  .ww-arena-challenge > .fa-chevron-right { grid-column: 1 / -1; }
  .ww-arena-challenge > form .ww-btn { width: 100%; }
  .ww-arena-match-nav { align-items: flex-start; flex-direction: column; gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-roster-card,
  .ww-arena-challenge.is-link { transition: none; }
  .ww-roster-card:hover,
  .ww-arena-challenge.is-link:hover { transform: none; }
  .ww-arena-status-dot.is-in_progress { box-shadow: none; }
}

@media (forced-colors: active) {
  .ww-roster-card:has(.ww-roster-radio:checked),
  .ww-roster-card.is-chosen,
  .ww-stage-chip:has(.ww-roster-radio:checked) {
    border: 3px solid Highlight;
    forced-color-adjust: auto;
  }
  .ww-arena-status-dot { border: 2px solid CanvasText; }
  .ww-arena-status-dot.is-waiting,
  .ww-arena-status-dot.is-in_progress { background: Highlight; }
  .ww-netplay-state { border-color: CanvasText; color: CanvasText; }
}

/* Mobile players get the same complete move set as keyboard/gamepad players. */
.ww-touch-controls { display: none; }

@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .ww-touch-controls {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 1.5fr);
    gap: 1rem;
    padding: .85rem;
    color: var(--ww-owner-1-ink);
    background: var(--ww-owner-1-bg);
    border-top: 1px solid var(--ww-owner-1-border);
    touch-action: none;
    user-select: none;
  }
  .ww-touch-controls__move,
  .ww-touch-controls__actions { display: grid; gap: .55rem; }
  .ww-touch-controls__move { grid-template-columns: repeat(3, 1fr); }
  .ww-touch-controls__actions { grid-template-columns: repeat(2, 1fr); }
  .ww-touch-control {
    min-width: 3.2rem;
    min-height: 3.2rem;
    padding: .6rem;
    color: var(--ww-owner-1-ink);
    background: linear-gradient(color-mix(in oklch, var(--ww-owner-1-bg) 82%, var(--ww-owner-1-ink)), var(--ww-owner-1-bg));
    border: 2px solid color-mix(in oklch, var(--ww-owner-1-ink) 38%, var(--ww-owner-1-bg));
    border-radius: .85rem;
    box-shadow: inset 0 1px color-mix(in oklch, var(--ww-owner-1-ink) 12%, transparent), 0 4px 0 var(--ww-navy);
    font-size: .75rem;
    font-weight: 900;
    touch-action: none;
  }
  .ww-touch-control--jump { border-color: var(--ww-sky); }
  .ww-touch-control--quick { border-color: var(--ww-emerald); }
  .ww-touch-control--heavy { border-color: var(--ww-gold); }
  .ww-touch-control--guard { border-color: var(--ww-violet); }
  .ww-touch-control--special { border-color: var(--ww-danger); }
  .ww-touch-control.is-pressed,
  .ww-touch-control:active { transform: translateY(3px); filter: brightness(1.25); box-shadow: inset 0 2px 5px color-mix(in oklch, var(--ww-navy) 35%, transparent); }
}

@media (max-width: 430px) {
  .ww-touch-controls { grid-template-columns: 1fr; }
  .ww-arena-viewport { min-height: 250px; }
}

@media (max-width: 40rem) {
  .ww-roster .ww-section-header { display: block; }
  .ww-roster-hint { margin-top: .6rem; }
  .ww-arena-match-nav { flex-wrap: wrap; }
}

/* The stage is its own stacking context, so nothing it draws can climb out
   of it. The select, stage and VS overlays sit at z-index 100 inside the
   playfield -- the same number the sticky .ww-topbar carries (layout.css) --
   and with both in the page's root stacking context the later element in the
   document won the tie: scrolled so the stage passed under the header, the
   STAGE SELECT banner painted straight over the topbar, hiding the sound,
   walk and emerald chips. Isolating the playfield scopes every z-index
   inside it without disturbing their order (the highest inside is 100, the
   lowest 2). */
.ww-arena-playfield { isolation: isolate; }

/* In-Game Fighting Game Character & Stage Select Overlays */
.ww-arena-select-overlay,
.ww-arena-stage-overlay,
.ww-arena-vs-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Every overlay sits on navy in both themes, so it takes the navy chip's
     ink; --ww-paper flips to near-black in midnight and hid every label. */
  color: var(--ww-owner-1-ink);
}

.ww-arena-select-overlay {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  padding: 0.5rem 0.75rem;
}

.ww-arena-vs-overlay {
  padding: 1.25rem;
  background: color-mix(in oklch, var(--ww-navy) 90%, transparent);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

/* Stage select keeps the stage itself in view: the highlighted stage is built
   live behind the cards, so the cards sit on a band at the bottom. */
.ww-arena-stage-overlay {
  justify-content: flex-end;
  padding: .75rem;
  background: linear-gradient(to top, color-mix(in oklch, var(--ww-navy) 94%, transparent) 0%, color-mix(in oklch, var(--ww-navy) 70%, transparent) 55%, transparent 100%);
  pointer-events: auto;
}
.ww-arena-stage-overlay .ww-arena-select-header { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); background: color-mix(in oklch, var(--ww-navy) 85%, transparent); }

.ww-arena-select-overlay[hidden],
.ww-arena-stage-overlay[hidden],
.ww-arena-vs-overlay[hidden] {
  display: none;
}

.ww-arena-select-header {
  pointer-events: auto;
  text-align: center;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--ww-navy) 88%, transparent) 0%, transparent 100%);
  padding: 0.5rem 1rem 0.75rem;
  border-radius: var(--ww-radius-sm);
}

.ww-arena-select-title {
  font-family: var(--ww-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ww-gold);
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px var(--ww-navy);
}

.ww-arena-select-sub {
  font-size: 0.75rem;
  color: color-mix(in oklch, var(--ww-owner-1-ink) 80%, transparent);
  margin: 0.15rem 0 0;
  letter-spacing: 0.04em;
}

.ww-arena-select-preview {
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .4rem;
}

.ww-preview-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.85rem;
  color: var(--ww-owner-1-ink);
  background: color-mix(in oklch, var(--ww-owner-1-bg) 90%, transparent);
  border: 1.5px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  transition: var(--ww-transition-chrome);
  user-select: none;
}

.ww-preview-card:hover {
  transform: translateY(-1px);
}

.ww-preview-card.p1 {
  border-color: var(--ww-blue);
}

.ww-preview-card.p2 {
  border-color: var(--ww-gold);
}

.ww-preview-badge {
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: var(--ww-radius-sm);
}

.ww-preview-card.p1 .ww-preview-badge {
  background: var(--ww-blue);
  color: var(--ww-paper);
}

.ww-preview-card.p2 .ww-preview-badge {
  background: var(--ww-gold);
  color: var(--ww-navy);
}

.ww-arena-select-dock {
  pointer-events: auto;
  margin-top: auto;
  background: linear-gradient(to top, color-mix(in oklch, var(--ww-navy) 95%, transparent) 0%, color-mix(in oklch, var(--ww-navy) 82%, transparent) 80%, transparent 100%);
  padding: 0.65rem 0.75rem 0.5rem;
  border-radius: 0 0 var(--ww-radius-sm) var(--ww-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ww-arena-select-slot-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ww-slot-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in oklch, var(--ww-owner-1-ink) 80%, transparent);
}

.ww-arena-select-slot-bar .ww-btn.is-active {
  background: var(--ww-gold);
  color: var(--ww-navy);
  border-color: var(--ww-gold);
  font-weight: 900;
}

.ww-arena-select-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  max-width: 820px;
  /* Four rows: the 21-fighter roster's last row otherwise sat below the
     scroll fold, behind the footer, where nobody would find it. */
  max-height: 11rem;
  overflow-y: auto;
  margin: 0 auto;
  padding: 0.2rem 0.25rem;
  scrollbar-width: thin;
}

.ww-select-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--ww-navy) 70%, var(--ww-paper-2));
  border: 1.5px solid color-mix(in oklch, var(--accent, var(--ww-line)) 50%, transparent);
  cursor: pointer;
  transition: var(--ww-transition-chrome);
  user-select: none;
}

@media (hover: hover) {
  .ww-select-cell:hover {
    border-color: var(--accent, var(--ww-gold));
    transform: translateY(-1px);
    background: color-mix(in oklch, var(--accent, var(--ww-navy)) 25%, var(--ww-paper-2));
  }
}

.ww-select-cell:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

.ww-select-cell:active {
  transform: translateY(0);
}

.ww-select-cell.is-p1-hover {
  border-color: var(--ww-blue);
  box-shadow: 0 0 10px var(--ww-blue);
}

.ww-select-cell.is-p2-hover {
  border-color: var(--ww-gold);
  box-shadow: 0 0 10px var(--ww-gold);
}

.ww-select-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ww-paper);
  flex-shrink: 0;
}

.ww-select-name {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ww-token-marker {
  position: absolute;
  top: -0.35rem;
  padding: 0.05rem 0.28rem;
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-mono);
  font-size: 0.6rem;
  font-weight: 800;
  display: none;
  z-index: 2;
}

.ww-token-marker.is-p1 {
  left: -0.2rem;
  background: var(--ww-blue);
  color: var(--ww-paper);
}

.ww-token-marker.is-p2 {
  right: -0.2rem;
  background: var(--ww-gold);
  color: var(--ww-paper);
}

.ww-select-cell.is-p1-hover .ww-token-marker.is-p1,
.ww-select-cell.is-p2-hover .ww-token-marker.is-p2 {
  display: block;
}

.ww-arena-select-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.75rem;
  padding-top: 0.2rem;
}
.ww-arena-select-footer .ww-arena-ready-ribbon { flex: 1 0 100%; }

/* Stage Select Overlay */
.ww-arena-stage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .5rem;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto .4rem;
}

.ww-arena-stage-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: var(--ww-control-min);
  padding: .55rem .7rem;
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  border: 2px solid var(--ww-owner-1-border);
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: var(--ww-transition-chrome);
}
.ww-arena-stage-card strong { font-size: .9rem; }
.ww-arena-stage-card small { font-size: .72rem; opacity: .85; line-height: 1.25; }
.ww-arena-stage-card.is-random { border-style: dashed; }
/* Over the canvas the cards are one low row of names: the blurbs doubled the
   band's height and it covered the fighters' feet and the stage floor. The
   banner above names the highlighted stage. */
/* Eleven stages and Random are two rows of names on a desktop's stage, set
   tight so the band stays under the bottom third; each card keeps the full
   control height for a finger. */
.ww-arena-stage-overlay .ww-arena-stage-cards { grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); gap: .35rem; max-width: none; }
.ww-arena-stage-overlay .ww-arena-stage-card { justify-content: center; padding: .3rem .5rem; }
.ww-arena-stage-overlay .ww-arena-stage-card strong { font-size: .78rem; line-height: 1.15; }
.ww-arena-stage-overlay .ww-arena-stage-card small { display: none; }

@media (hover: hover) {
  .ww-arena-stage-card:hover { border-color: var(--ww-gold); transform: translateY(-1px); }
}
.ww-arena-stage-card:active { transform: translateY(1px); }
.ww-arena-stage-card:disabled { opacity: .5; cursor: not-allowed; }

.ww-arena-stage-card.is-active {
  border-color: var(--ww-gold);
  background: color-mix(in oklch, var(--ww-gold) 20%, var(--ww-owner-1-bg));
}

/* VS Screen Overlay */
.ww-arena-vs-overlay {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ww-vs-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

.ww-vs-fighter h2 {
  font-family: var(--ww-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0;
}

/* The fighter is what the announcer calls, so it takes the headline; the
   player piloting it is the smaller line beneath. */
.ww-vs-fighter-pilot {
  display: block;
  font-family: var(--ww-mono);
  font-size: 0.85rem;
  color: var(--ww-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.25rem;
}

.ww-vs-badge {
  font-family: var(--ww-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--ww-gold);
  font-style: italic;
}

.ww-vs-stage {
  font-family: var(--ww-mono);
  font-size: 1rem;
  color: var(--ww-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1.5rem;
}

.ww-vs-call {
  font-family: var(--ww-font);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--ww-gold);
  letter-spacing: 0.08em;
  margin: 0;
}

/* Super Meter & EX Controls */
.ww-super-meter {
  display: inline-block;
  font-family: var(--ww-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ww-ink-soft);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  padding: 0.15rem 0.45rem;
  border-radius: var(--ww-radius-sm);
  margin-top: 0.25rem;
  transition: var(--ww-transition-chrome);
}

.ww-super-meter.is-ready {
  color: var(--ww-gold);
  border-color: var(--ww-gold);
  background: color-mix(in oklch, var(--ww-gold) 15%, var(--ww-paper-2));
  box-shadow: 0 0 10px var(--ww-gold);
  animation: ww-super-pulse 1s ease-in-out infinite alternate;
}

@keyframes ww-super-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.ww-touch-control--super {
  background: var(--ww-gold);
  color: var(--ww-paper);
}

@media (hover: hover) {
  .ww-touch-control--super:hover {
    background: color-mix(in oklch, var(--ww-gold) 85%, var(--ww-ink));
  }
}

.ww-touch-control--super:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

.ww-touch-control--super:active {
  transform: scale(0.95);
}

.ww-touch-control--super:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Pre-fight room: who has readied. The panel is light in both themes (see
   .ww-arena-waiting), so the rows take the cream owner-two ink rather than the
   theme ink, which flips to near-white in midnight. Readiness is carried by the
   icon and the word, not by the border colour alone. */
.ww-arena-ready-list {
  display: grid;
  gap: .5rem;
  max-width: 34rem;
  margin: 1rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.ww-arena-ready-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon name state" "icon fighter state";
  align-items: center;
  column-gap: .75rem;
  padding: .6rem .85rem;
  border: 1px solid color-mix(in oklch, var(--ww-owner-2-ink) 22%, transparent);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-owner-2-ink);
  background: var(--ww-owner-2-bg);
}
.ww-arena-ready-list li > i { grid-area: icon; font-size: 1.2rem; }
.ww-arena-ready-name { grid-area: name; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-arena-ready-fighter { grid-area: fighter; font-size: .85rem; }
.ww-arena-ready-list li > b { grid-area: state; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.ww-arena-ready-list li.is-ready { border-color: var(--ww-emerald-deep); box-shadow: inset 4px 0 0 var(--ww-emerald-deep); }
.ww-arena-ready-note { flex-basis: 100%; margin: 0; color: var(--ww-owner-2-ink); font-weight: 600; }
.ww-arena-prefight .ww-arena-queue { justify-content: center; flex-wrap: wrap; }
.ww-arena-status-dot.is-joined { background: var(--ww-sky); }

/* CPU level: a 1-9 stepper beside the CPU toggle, for the right-hand CPU.
   Each side's own level is on fighter select. */
.ww-cpu-level { display: inline-flex; align-items: center; gap: .35rem; }
.ww-cpu-level__step { min-width: var(--ww-control-min); padding-inline: .5rem; font-weight: 800; }
.ww-cpu-level__step:disabled { opacity: .5; cursor: not-allowed; }
.ww-cpu-level__value { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.ww-cpu-level__value b { display: inline-block; min-width: 1.2ch; font-variant-numeric: tabular-nums; }

/* Damage pops: the figure a hit added, rising off the fighter who took it. A
   solid dark chip rather than outlined text keeps it legible on every stage,
   bright sky or black ink pool alike. */
.ww-arena-pops { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ww-arena-pop {
  position: absolute;
  padding: .15rem .45rem;
  border: 1px solid var(--ww-owner-1-border);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  font: 800 1rem/1.1 var(--ww-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: ww-arena-pop 900ms var(--ww-ease-out) forwards;
}
.ww-arena-pop.is-heavy { border-color: var(--ww-gold); font-size: 1.35rem; }
.ww-arena-pop.is-blocked { border-color: var(--ww-sky); font-size: .8rem; }
@keyframes ww-arena-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}
/* A combo: hits in a row from one fighter on a victim who never got free,
   from the second on. One count per victim, beside its head on the side it
   is flying to (the damage pops climb from the head's middle), or over or
   under it where a crowd leaves no room, moved there every frame by the
   controller's transform. The attacker's port and colour name whose combo
   it is, and its pointer whose head; the count bumps on each hit and fades
   once the victim is free. */
.ww-arena-combos { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ww-arena-combo {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  padding: .12rem .5rem .16rem;
  border: 2px solid var(--accent, var(--ww-gold));
  border-radius: var(--ww-radius-sm);
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  white-space: nowrap;
  transition: opacity var(--ww-dur-long) var(--ww-ease-in);
}
.ww-arena-combo b {
  display: inline-block;
  color: var(--ww-gold);
  font: 800 1.35rem/1 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
.ww-arena-combo small { font: 700 .66rem/1 var(--ww-mono); letter-spacing: .06em; text-transform: uppercase; }
.ww-arena-combo .ww-arena-combo-by { letter-spacing: 0; }
.ww-arena-combo.is-bump b { animation: ww-arena-combo-bump var(--ww-dur-short) var(--ww-ease-play); }
.ww-arena-combo.is-done { opacity: 0; }
/* It points at its victim's head, since in a crowd a count can sit as near
   another fighter as its own. The controller names the edge (data-tip) and
   sets --tip-at, the share along it, and --tip-skew, the lean toward the
   head. The pointer is the border's colour and grows out of it; skewed about
   its base, the base stays on the edge. */
.ww-arena-combo[data-tip]::after {
  content: "";
  position: absolute;
  --tip-long: .45rem;
  --tip-wide: .65rem;
  background: var(--accent, var(--ww-gold));
}
.ww-arena-combo[data-tip="left"]::after,
.ww-arena-combo[data-tip="right"]::after {
  top: calc(var(--tip-at, .5) * 100%);
  width: var(--tip-long);
  height: var(--tip-wide);
  transform: translateY(-50%) skewY(var(--tip-skew, 0deg));
}
.ww-arena-combo[data-tip="left"]::after { right: 100%; clip-path: polygon(100% 0, 0 50%, 100% 100%); transform-origin: 100% 50%; }
.ww-arena-combo[data-tip="right"]::after { left: 100%; clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%; }
.ww-arena-combo[data-tip="top"]::after,
.ww-arena-combo[data-tip="bottom"]::after {
  left: calc(var(--tip-at, .5) * 100%);
  width: var(--tip-wide);
  height: var(--tip-long);
  transform: translateX(-50%) skewX(var(--tip-skew, 0deg));
}
.ww-arena-combo[data-tip="top"]::after { bottom: 100%; clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: 50% 100%; }
.ww-arena-combo[data-tip="bottom"]::after { top: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
@keyframes ww-arena-combo-bump {
  from { transform: scale(1.4); }
  to { transform: scale(1); }
}
@media (max-width: 430px) {
  .ww-arena-combo { gap: .2rem; padding: .08rem .35rem .1rem; }
  .ww-arena-combo b { font-size: 1.05rem; }
  .ww-arena-combo small { font-size: .58rem; }
  .ww-arena-combo[data-tip]::after { --tip-long: .38rem; --tip-wide: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ww-arena-combo.is-bump b { animation: none; }
}
.ww-damage-meter.is-hit { animation: ww-damage-jolt 260ms var(--ww-ease-play); }
@keyframes ww-damage-jolt {
  0% { transform: scale(1); }
  35% { transform: scale(1.22) rotate(-3deg); }
  100% { transform: scale(1); }
}

/* Six actions on the touch pad, two to a row. Super says when it is armed
   rather than looking live all match. */
.ww-touch-control--super[data-ready="false"] { opacity: .6; }
.ww-touch-control--super.is-ready { opacity: 1; box-shadow: inset 0 0 0 2px var(--ww-owner-1-ink); }
@media (prefers-reduced-motion: reduce) {
  .ww-super-meter.is-ready { animation: none; }
}

/* The reconnect notice borrows the result overlay's frame but is a status, not
   a victory: the result screen's poster-sized headline wrapped "Waiting for
   your rival" onto two lines and shouted a routine pause. */
.ww-arena-result.ww-arena-reconnect h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); text-transform: none; }
.ww-arena-result.ww-arena-reconnect p { max-width: 34rem; }

/* Why a finished online match did or did not count. Sits on the light result
   panel in both themes, so it takes the cream owner-two ink. */
.ww-arena-waiting .ww-arena-result-reason { max-width: 36rem; margin: .6rem auto 0; color: var(--ww-ink); font-weight: 600; }
.ww-arena-result .ww-arena-result-reason { max-width: 32rem; font-size: .95rem; }

/* ---------------------------------------------------------------- rules flow
   Everything the match itself says on the stage: the countdown and the
   GAME!/TIME! call, the clock, markers for fighters the camera has lost, the
   results card, pause, and the rule and CPU controls on fighter select. */

.ww-arena-stage-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }

.ww-arena-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ww-gold);
  font: 900 clamp(2.6rem, 11vw, 6.5rem)/1 var(--ww-display);
  font-style: italic;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 2px var(--ww-navy);
  paint-order: stroke fill;
}
.ww-arena-banner[hidden] { display: none; }
.ww-arena-banner.is-in { animation: ww-arena-banner-in var(--ww-dur-long) var(--ww-ease-play); }
.ww-arena-banner[data-kind="go"] { color: var(--ww-owner-1-ink); }
.ww-arena-banner[data-kind="game"] { font-size: clamp(3.2rem, 14vw, 8rem); }
.ww-arena-banner[data-kind="sudden"] { color: var(--ww-danger); font-size: clamp(1.8rem, 7vw, 4.5rem); }
@keyframes ww-arena-banner-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ww-arena-clock {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .15rem .6rem;
  border: 1px solid var(--ww-owner-1-border);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  font: 800 1rem/1.2 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
.ww-arena-clock[hidden] { display: none; }
.ww-arena-clock.is-low { border-color: var(--ww-danger); }

/* A fighter off camera: a disc on the nearest edge in their colour, with how
   far past the frame they are. */
.ww-arena-offscreen {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: -1.45rem 0 0 -1.45rem;
  border: 3px solid var(--accent, var(--ww-gold));
  border-radius: 50%;
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  line-height: 1;
}
.ww-arena-offscreen[hidden] { display: none; }
.ww-arena-offscreen b { font: 800 .8rem/1 var(--ww-mono); }
.ww-arena-offscreen small { font: 700 .62rem/1 var(--ww-mono); }

/* Results card: places, KOs, falls, self-destructs and damage dealt. */
.ww-arena-results {
  margin: .75rem auto 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ww-arena-results caption { padding-bottom: .4rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ww-arena-results th,
.ww-arena-results td { padding: .3rem .9rem; border-bottom: 1px solid color-mix(in oklch, currentColor 22%, transparent); text-align: center; }
.ww-arena-results tbody th { text-align: left; font-weight: 600; }
.ww-arena-results thead th { font-weight: 800; }
.ww-arena-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

.ww-arena-pause {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5rem;
  padding: 1.5rem;
  color: var(--ww-owner-1-ink);
  background: color-mix(in oklch, var(--ww-owner-1-bg) 78%, transparent);
  text-align: center;
}
.ww-arena-pause[hidden] { display: none; }
.ww-arena-pause h2 { margin: 0 0 .5rem; font: 900 clamp(2rem, 6vw, 3.5rem)/1 var(--ww-display); }
.ww-arena-pause-hint { margin-top: .5rem; font-size: .85rem; }

/* The rules pill on fighter select: stock or time, stocks, time limit. */
.ww-arena-rules-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
  margin-top: .35rem;
  padding: .2rem .5rem;
  border: 1px solid var(--ww-gold);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  font-size: .85rem;
}
.ww-arena-pill-group { display: inline-flex; align-items: center; gap: .3rem; }
.ww-arena-pill-group[hidden] { display: none; }
.ww-arena-pill-group b { min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.ww-arena-rules-pill button,
.ww-slot-controls button {
  position: relative;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 .45rem;
  border: 1px solid var(--ww-owner-1-border);
  border-radius: var(--ww-radius-sm);
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}
/* Drawn at 2rem so the pill stays one line, but touched at the 44px the
   controls floor asks for: the hit area grows without the visual. */
.ww-arena-rules-pill button::before,
.ww-slot-controls button::before { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) {
  .ww-arena-rules-pill button:hover,
  .ww-slot-controls button:hover { border-color: var(--ww-gold); }
}
.ww-arena-rules-pill button:active,
.ww-slot-controls button:active { transform: translateY(1px); }
.ww-arena-rules-pill button:disabled,
.ww-slot-controls button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* A crowd seat's HMN/CPU switch with no keys and no pad: greyed by the
   app-wide [aria-disabled] rule but still pressable, so a tap is answered
   with why (the panel's lock line and the status). It neither lifts nor
   presses in. */
.ww-slot-controls button[aria-disabled="true"] { cursor: not-allowed; transform: none; }
@media (hover: hover) {
  .ww-slot-controls button[aria-disabled="true"]:hover { border-color: var(--ww-owner-1-border); }
}
.ww-arena-pill-mode { text-transform: uppercase; letter-spacing: .06em; }

/* Each side's panel on fighter select: HMN or CPU, level, what the CPU does,
   and whether the pick is locked. */
.ww-preview-card { flex: 1 1 0; flex-wrap: wrap; max-width: 24rem; }
.ww-preview-card.is-active { outline: 2px solid var(--ww-gold); outline-offset: 2px; }
.ww-preview-card.is-cpu { border-style: dashed; }
.ww-slot-lock { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ww-preview-card.is-locked .ww-slot-lock { color: var(--ww-gold); opacity: 1; }
.ww-preview-card.is-refused .ww-slot-lock { color: color-mix(in oklch, var(--ww-danger) 55%, var(--ww-owner-1-ink)); opacity: 1; }
.ww-slot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; width: 100%; }
.ww-slot-cpu { display: inline-flex; align-items: center; gap: .3rem; }
.ww-slot-cpu[hidden] { display: none; }
.ww-slot-cpu b { font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ww-slot-kind { font-family: var(--ww-mono); letter-spacing: .06em; }

.ww-select-cell.is-p1-locked .ww-token-marker.is-p1,
.ww-select-cell.is-p2-locked .ww-token-marker.is-p2 { outline: 2px solid var(--ww-paper); }

.ww-arena-ready-ribbon {
  margin: 0;
  padding: .3rem;
  color: var(--ww-navy);
  background: var(--ww-gold);
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}
.ww-arena-ready-ribbon[hidden] { display: none; }

/* Pre-fight rules (online). */
.ww-arena-rules-mode { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; border: 0; }
.ww-arena-rules-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .75rem; }
.ww-arena-rules-field { display: grid; gap: .25rem; font-size: .85rem; font-weight: 700; text-align: left; }
.ww-arena-rules-input {
  min-height: var(--ww-control-min);
  min-width: 7rem;
  padding: .4rem .6rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink);
  background: var(--ww-paper);
  font: inherit;
}
.ww-arena-rules-input:disabled { opacity: .5; cursor: not-allowed; }
.ww-arena-rules-summary { font-weight: 800; }

@media (max-width: 560px) {
  /* A phone's stage is 250px tall. Confined to it, fighter select showed 9 of
     19 fighters and left the READY ribbon and Start below a scroll fold inside
     the canvas. On a phone both select screens leave the canvas to the
     fighters (or the stage being browsed) and sit under it in the page, the
     way a handheld puts the roster on its lower screen. The poster title
     goes: the status line above already says it. */
  .ww-arena-select-overlay,
  .ww-arena-stage-overlay {
    position: static;
    justify-content: flex-start;
    gap: .5rem;
    padding: .5rem .5rem 0;
    overflow: visible;
    color: var(--ww-owner-1-ink);
    background: var(--ww-navy);
    pointer-events: auto;
  }
  .ww-arena-select-overlay .ww-arena-select-title { display: none; }
  .ww-arena-select-overlay .ww-arena-select-header { background: none; }
  .ww-arena-select-dock { margin-top: 0; padding: 0; background: none; }
  .ww-arena-select-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
  }
  .ww-arena-select-overlay .ww-select-cell { min-width: 0; min-height: var(--ww-control-min); padding: .25rem .35rem; }
  .ww-arena-select-overlay .ww-select-name { min-width: 0; line-height: 1.15; white-space: normal; }
  /* Start and the READY ribbon come before the roster rather than after it:
     under a 250px canvas, a footer below 19 fighters is a scroll away. */
  .ww-arena-select-overlay .ww-arena-select-footer { order: -1; padding: 0 0 .25rem; }
  .ww-arena-select-header { padding: .25rem .5rem; }
  .ww-arena-rules-pill { gap: .25rem .5rem; font-size: .78rem; }
  .ww-preview-card { padding: .3rem .45rem; gap: .3rem; }
  /* The results card now carries a table, so on a phone's 250px stage it
     scrolls from the top instead of spilling out of both ends. Scoped past
     lobby.css, which defines the result overlay one file later. */
  .ww-arena-playfield .ww-arena-result { place-content: start center; overflow-y: auto; padding: .75rem; }
  .ww-arena-playfield .ww-arena-result h2 { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .ww-arena-playfield .ww-arena-result p { font-size: .9rem; }
  .ww-arena-results th,
  .ww-arena-results td { padding: .2rem .6rem; }
  /* Even scrolling, the table pushed the verdict line and Continue below the
     stage's bottom edge, clipped with no sign there was more. On a phone the
     outcome and the way on come first; the numbers follow underneath. */
  .ww-arena-playfield .ww-arena-result-stats { order: 1; }
  .ww-arena-playfield .ww-arena-result .ww-arena-result-actions .ww-btn { margin-top: .5rem; }
  /* Stage select's banner stays over the top of the canvas (the playfield is
     its containing block); the cards sit under it, so the stage and fighters
     are in view while browsing. They used to cover the whole canvas. */
  .ww-arena-stage-overlay .ww-arena-select-header { padding: .15rem .75rem .25rem; }
  .ww-arena-stage-overlay .ww-arena-select-header .ww-kicker { margin: 0; font-size: .62rem; }
  .ww-arena-stage-overlay .ww-arena-select-header .ww-arena-select-title { font-size: 1rem; white-space: nowrap; }
  .ww-arena-stage-overlay .ww-arena-select-sub { display: none; }
  .ww-arena-stage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ww-arena-stage-card { padding: .4rem .55rem; }
}

/* ---------------------------------------------------------------- HUD
   Damage, stocks and super over the bottom of the stage, one plate per side,
   as Smash 64 and Melee put the percentages -- not a strip above the play
   that cost a third of a phone's stage. Both plates are one surface; the
   fighter's colour is the tag and the edge, never the ink. The percentage is
   a heavy outlined italic that reddens as it climbs; stocks are heads of the
   fighter (rendered from the model by the controller), a disc in their
   colour until the head is drawn. Scoped past lobby.css, which still styles
   the old strip one file later. */
.ww-arena-shell > .ww-arena-status {
  min-width: 0;
  min-height: 2.1rem;
  padding: .35rem .75rem;
  border-bottom: 1px solid var(--ww-owner-1-border);
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  font: 700 .9rem/1.4 var(--ww-font);
  letter-spacing: .02em;
  text-align: center;
  text-shadow: none;
}
/* In the fight the strip gives its height back to the stage: no text sits
   over or above play. It stays in the accessibility tree (phases, KOs). */
.ww-arena-shell > .ww-arena-status.is-fighting {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ww-arena-playfield .ww-arena-hud {
  position: absolute;
  inset: auto .5rem .5rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .5rem;
  padding: 0;
  background: none;
  pointer-events: none;
}
.ww-arena-playfield .ww-arena-hud.is-idle { visibility: hidden; }
.ww-arena-playfield .ww-arena-hud > .ww-fighter-hud {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "damage tag name" "damage stocks stocks" "super super super";
  align-items: center;
  gap: .12rem .45rem;
  min-width: 0;
  max-width: 48%;
  padding: .3rem .6rem .4rem;
  border: 1px solid var(--ww-owner-1-border);
  border-top: 3px solid var(--accent, var(--ww-gold));
  border-radius: var(--ww-radius-sm);
  color: var(--ww-owner-1-ink);
  background: color-mix(in oklch, var(--ww-owner-1-bg) 90%, transparent);
  text-align: left;
}
.ww-arena-playfield .ww-arena-hud > .ww-fighter-hud strong {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ww-fighter-tag {
  grid-area: tag;
  padding: 0 .3rem;
  border: 1px solid var(--accent, var(--ww-gold));
  border-radius: .3rem;
  font: 800 .66rem/1.35 var(--ww-mono);
}
.ww-arena-playfield .ww-arena-hud > .ww-fighter-hud .ww-damage-meter {
  grid-area: damage;
  min-width: 3ch;
  color: color-mix(in oklch, var(--ww-danger) calc(var(--damage, 0) * 100%), var(--ww-owner-1-ink));
  font: italic 900 clamp(2rem, 4.6vw, 3rem)/.95 var(--ww-font);
  font-variant-numeric: tabular-nums;
  text-align: right;
  -webkit-text-stroke: .08em var(--ww-navy);
  paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--ww-navy);
}
.ww-arena-playfield .ww-arena-hud > .ww-fighter-hud small.ww-stocks {
  grid-area: stocks;
  display: flex;
  align-items: center;
  gap: .2rem;
  min-height: 1.3rem;
  color: var(--ww-owner-1-ink);
  font: 800 .78rem/1 var(--ww-mono);
  letter-spacing: 0;
}
.ww-stock {
  display: block;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--accent, var(--ww-gold));
  border-radius: 50%;
  background: var(--portrait, none) center / cover no-repeat var(--accent, var(--ww-gold));
}
.ww-arena-playfield .ww-arena-hud > .ww-fighter-hud .ww-super-meter {
  grid-area: super;
  justify-self: start;
  margin: 0;
  padding: .02rem .35rem;
  font-size: .62rem;
}

@media (max-width: 560px) {
  /* A phone's stage is 250px tall: the plates lose the name (the select
     screen and the tag say who is who) and shrink to two short rows. */
  .ww-arena-playfield .ww-arena-hud { inset: auto .3rem .3rem; }
  .ww-arena-playfield .ww-arena-hud > .ww-fighter-hud {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "damage tag" "damage stocks" "super super";
    padding: .2rem .45rem .3rem;
  }
  .ww-arena-playfield .ww-arena-hud > .ww-fighter-hud strong { display: none; }
  .ww-fighter-tag { justify-self: start; }
  .ww-arena-playfield .ww-arena-hud > .ww-fighter-hud .ww-damage-meter { font-size: 1.7rem; }
  .ww-stock { width: 1rem; height: 1rem; border-width: 1.5px; }
  .ww-arena-playfield .ww-arena-hud > .ww-fighter-hud .ww-super-meter { font-size: .56rem; }
}

@media (max-width: 430px) {
  /* The controller draws a 250px canvas here (resize()); lobby.css's 360px
     floor loads later and left the plates 110px below it, in a dead strip. */
  .ww-arena-playfield > .ww-arena-viewport { min-height: 250px; }
}

/* A free-for-all's plates (data-field 3-8, set by the controller) share the
   bottom of the stage in equal columns. Three or four keep the duel's plate a
   size down; five to eight stack theirs -- tag and name, the percentage, the
   stock heads, the meter -- so eight fit across a desktop stage. The duel's
   plates (data-field 2, and the online match, which sets none) are the rules
   above, untouched. */
.ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud {
  flex: 1 1 0;
  max-width: none;
}
.ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"]) > .ww-fighter-hud .ww-damage-meter { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) { gap: .35rem; }
.ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tag name" "damage damage" "stocks stocks" "super super";
  gap: .1rem .3rem;
  padding: .25rem .35rem .3rem;
}
.ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud .ww-damage-meter {
  min-width: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  text-align: left;
}
.ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud small.ww-stocks { min-height: 1rem; gap: .12rem; }
.ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) .ww-stock { width: .95rem; height: .95rem; }
.ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud .ww-super-meter { padding: 0 .25rem; font-size: .56rem; }

@media (max-width: 560px) {
  /* A phone's stage is 250px tall and 390 wide. Three or four plates put
     the tag and the stock heads on one line over the percentage. */
  .ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"]) { gap: .3rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"]) > .ww-fighter-hud {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "tag stocks" "damage damage" "super super";
    gap: .08rem .3rem;
    padding: .2rem .3rem .25rem;
  }
  .ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"]) > .ww-fighter-hud .ww-damage-meter { min-width: 0; font-size: 1.35rem; text-align: left; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"]) .ww-stock { width: .8rem; height: .8rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="3"], [data-field="4"]) > .ww-fighter-hud .ww-super-meter { padding: 0 .2rem; font-size: .5rem; }

  /* Five to eight get about 40px each: one column, the percentage sized so
     three digits ("157%") still fit, the heads overlapping like a stack of
     coins, and the meter drawn as a bar (--super, from the controller) with
     its words kept for screen readers. */
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) { inset: auto .25rem .25rem; gap: .2rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "damage" "stocks" "super";
    gap: .08rem;
    padding: .15rem .15rem .2rem;
  }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) .ww-fighter-tag { padding: 0 .2rem; font-size: .58rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud .ww-damage-meter { font-size: .8rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud small.ww-stocks { min-height: .6rem; gap: 0; font-size: .6rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) .ww-stock { width: .55rem; height: .55rem; border-width: 1px; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) .ww-stock + .ww-stock { margin-left: -.15rem; }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud .ww-super-meter {
    justify-self: stretch;
    height: .2rem;
    margin: .05rem 0 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: transparent;
    background: linear-gradient(to right, var(--ww-gold) calc(var(--super, 0) * 100%), color-mix(in oklch, var(--ww-owner-1-ink) 22%, transparent) 0);
    font-size: 0;
    line-height: 0;
  }
  .ww-arena-playfield .ww-arena-hud:is([data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-fighter-hud .ww-super-meter.is-ready { box-shadow: none; }
}

/* A free-for-all's seats on fighter select: a grid of compact panels, four
   across (two on a phone), each held to two lines -- the name cut short
   rather than the panel pushed taller -- so eight leave room on a desktop
   stage for the roster and Start below them. Its results table tightens to
   fit a column per fighter on a phone. */
.ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
}
.ww-arena-select-preview[data-field="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-preview-card { min-width: 0; max-width: none; gap: .2rem .4rem; padding: .3rem .4rem; }
.ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-preview-card strong { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) :is(.ww-slot-controls, .ww-slot-cpu) { gap: .2rem; }
/* The CPU's level and behaviour flow in the same row as HMN/CPU, wrapping
   button by button, instead of dropping to a line of their own first. */
.ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) .ww-slot-cpu:not([hidden]) { display: contents; }
.ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) .ww-slot-controls button { padding-inline: .35rem; }
/* P1 and P2 wear their grid tokens' blue and gold. Seats 3-8 have no token
   on the grid; each wears its pick's colour (--accent, from the controller),
   the colour that tags its plate and ring in the fight, its badge outlined
   the way the plate's tag is. */
.ww-preview-card:is(.p3, .p4, .p5, .p6, .p7, .p8) { border-color: var(--accent, var(--ww-line)); }
.ww-preview-card:is(.p3, .p4, .p5, .p6, .p7, .p8) .ww-preview-badge { padding-block: .1rem; border: 1px solid var(--accent, var(--ww-line)); }
/* A crowd's "Picking for" names the seat that is up; the seat panels above
   are the switch. On a desktop stage the bar is drawn over the canvas, and a
   crowd's line-up fills the middle of it, so the line sits on the seat
   panels' own tone instead of on whichever pale model stands behind it (the
   duel's P1/P2 buttons brought their fill with them). A label, not a
   control: tone and radius, no border to read as a button. */
.ww-arena-select-slot-bar.is-crowd {
  flex-wrap: wrap;
  align-self: center;
  max-width: 100%;
  gap: .25rem .5rem;
  padding: .3rem .7rem;
  color: var(--ww-owner-1-ink);
  background: color-mix(in oklch, var(--ww-owner-1-bg) 90%, transparent);
  border-radius: var(--ww-radius-sm);
}
.ww-arena-select-slot-bar.is-crowd > .ww-btn { display: none; }
.ww-slot-hint { display: inline-flex; align-items: baseline; gap: .5rem; color: var(--ww-owner-1-ink); font-size: .8rem; font-weight: 600; }
.ww-slot-hint b { color: var(--ww-gold); font: 800 .85rem/1 var(--ww-mono); }
.ww-arena-results.is-crowd th,
.ww-arena-results.is-crowd td { padding: .25rem .5rem; }
@media (max-width: 560px) {
  .ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two panels across leave a pick's name about 50px beside READY. The name
     gets the badge's line to itself, and READY / CHOOSING moves to the end
     of the controls, which flow in the panel's own rows. */
  .ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-preview-card { column-gap: .2rem; }
  .ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-preview-card strong { flex-basis: calc(100% - 3rem); }
  .ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-preview-card .ww-slot-controls { display: contents; }
  .ww-arena-select-preview:is([data-field="3"], [data-field="4"], [data-field="5"], [data-field="6"], [data-field="7"], [data-field="8"]) > .ww-preview-card .ww-slot-lock { order: 1; margin-left: auto; white-space: nowrap; }
  .ww-arena-results.is-crowd { font-size: .78rem; }
  .ww-arena-results.is-crowd th,
  .ww-arena-results.is-crowd td { padding: .2rem .25rem; }
}

@media (forced-colors: active) {
  .ww-arena-playfield .ww-arena-hud > .ww-fighter-hud { border-color: CanvasText; forced-color-adjust: auto; }
  .ww-stock { border-color: CanvasText; background: CanvasText; }
}

/* "Press any key": the practice match holds here until the browser lets it
   make a sound (see startWhenHeard). Smaller than a count, so the line fits
   a phone's stage. */
.ww-arena-banner[data-kind="ready"] { font-size: clamp(1.6rem, 6.5vw, 3.6rem); }

/* The Sound panel in the controls row: a disclosure, so it costs one button
   until opened, then takes the row's full width for four sliders. It stays a
   block, not a flex row: Chromium wraps a <details>' content in its own
   ::details-content box, so as a flex container the open panel was one item
   beside a summary stretched into a pillar, never wrapping under it. */
.ww-arena-mixer[open] { display: block; flex-basis: 100%; text-align: center; }
.ww-arena-mixer[open] > .ww-arena-mixer-panel { margin-top: .5rem; text-align: start; }
.ww-arena-mixer > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.ww-arena-mixer > summary::-webkit-details-marker { display: none; }
.ww-arena-mixer[open] > summary { border-color: var(--ww-gold); }
.ww-arena-mixer-panel {
  display: grid;
  flex-basis: 100%;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: .5rem 1.25rem;
  padding: .6rem .75rem;
  border-top: 1px solid var(--ww-owner-1-border);
  color: var(--ww-owner-1-ink);
}
.ww-arena-mixer-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: .5rem;
  min-height: var(--ww-control-min);
  font-weight: 700;
}
.ww-arena-mixer-row output { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ww-arena-mixer-row input[type="range"] {
  width: 100%;
  min-height: var(--ww-control-min);
  margin: 0;
  accent-color: var(--ww-gold);
  cursor: pointer;
}
.ww-arena-mixer-row input[type="range"]:hover { filter: brightness(1.12); }
.ww-arena-mixer-row input[type="range"]:active { cursor: grabbing; }
.ww-arena-mixer-row input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
.ww-arena-mixer-note { grid-column: 1 / -1; margin: 0; color: var(--ww-gold); font-size: .8rem; font-weight: 700; }
.ww-arena-mixer-note[hidden] { display: none; }
/* "Tap to hear": the browser has not let the page make a sound yet. */
.ww-arena-mixer-lock { font-size: .75rem; font-weight: 600; text-transform: none; }
.ww-arena-mixer-lock::before { content: "\00b7"; margin-right: .35rem; }
.ww-arena-mixer-lock[hidden] { display: none; }

/* ---------------------------------------------------------------- select room
   Online fighter select (arena_matches/_select_room): the practice select
   screen's parts on a navy stage of their own, since there is no canvas
   behind them yet. Everything sits on navy in both themes, so it carries the
   navy chip's ink. */
.ww-arena-room {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .5rem;
  padding: .75rem;
  color: var(--ww-owner-1-ink);
  background: var(--ww-owner-1-bg);
  border: 1px solid var(--ww-owner-1-border);
  border-radius: var(--ww-radius);
  text-align: left;
}
.ww-arena-room p { margin: 0; color: inherit; }
.ww-arena-room .ww-arena-select-header { padding: .25rem .5rem .5rem; }
.ww-arena-room .ww-arena-select-preview { margin-top: 0; }
.ww-arena-room .ww-preview-card { cursor: default; }
.ww-arena-room .ww-preview-card:hover { transform: none; }
.ww-arena-room .ww-preview-card.is-mine { outline: 2px solid var(--ww-gold); outline-offset: 2px; }
.ww-arena-room-who { font-size: .78rem; font-weight: 600; overflow-wrap: anywhere; }
.ww-arena-room .ww-arena-select-dock { margin-top: 0; background: none; padding: 0; }
.ww-arena-room .ww-arena-select-grid { max-height: none; overflow: visible; }
.ww-arena-room .ww-select-cell { min-height: var(--ww-control-min); padding: .35rem .6rem; color: inherit; font: inherit; }
.ww-arena-room .ww-select-cell:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ww-arena-room .ww-select-cell.is-p1-locked,
.ww-arena-room .ww-select-cell.is-p2-locked { background: color-mix(in oklch, var(--accent, var(--ww-gold)) 30%, var(--ww-owner-1-bg)); }
.ww-arena-room-status { text-align: center; font-weight: 600; min-height: 1.5em; }
.ww-arena-room .ww-arena-select-sub { text-align: center; }
.ww-arena-room .ww-arena-select-sub kbd { color: var(--ww-owner-1-ink); }
.ww-arena-room .ww-arena-rules-summary { margin: 0; font-weight: 800; }
.ww-arena-pill-note { font-size: .72rem; opacity: .85; }
.ww-arena-room-stages { display: flex; flex-direction: column; gap: .4rem; }
.ww-arena-room-stages .ww-arena-stage-cards { margin-bottom: 0; }
.ww-arena-stage-card.is-rival-pick { box-shadow: inset 0 0 0 1px var(--ww-gold); }
.ww-arena-rival-pick {
  align-self: flex-start;
  margin-top: .15rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ww-gold);
}
.ww-arena-waiting.ww-arena-prefight { padding: 1rem .75rem 1.5rem; }

/* Full screen (arena_matches/_fullscreen) takes the whole .ww-arena: the stage
   grows into every row the control bar and touch pad leave, and the viewport
   is handed that box outright so arena#resize can fit the canvas to it (no
   taller than 16:9, centred, the rest letterboxed in the stage's own navy). */
.ww-arena:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--ww-navy);
  overflow: auto;
}
.ww-arena:fullscreen > .ww-arena-shell {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.ww-arena:fullscreen .ww-arena-playfield { flex: 1 1 0; min-height: 0; }
.ww-arena:fullscreen .ww-arena-playfield > .ww-arena-viewport {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 0;
}
/* On a touch screen the key legend only costs stage: it wrapped to 420px on a
   390px phone and left the fight 140px tall. The stage keeps a floor there and
   the bar and pad scroll under it instead. */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .ww-arena:fullscreen .ww-arena-controls > .ww-control-card { display: none; }
  .ww-arena:fullscreen > .ww-arena-shell,
  .ww-arena:fullscreen .ww-arena-playfield { flex: 1 0 auto; }
  .ww-arena:fullscreen .ww-arena-playfield { min-height: min(56.25vw, 60dvh); }
}
/* Practice's roster and stage pickers live inside .ww-arena (Stimulus scope);
   full screen keeps to the fight, where fighter select covers both. */
.ww-arena:fullscreen > :is(.ww-roster, .ww-stage-picker) { display: none; }
.ww-arena-fullscreen[aria-pressed="true"] { border-color: var(--ww-gold); }
/* Keep the rank readable alongside a stable, locally vendored unit emblem. */
.ww-marshal-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  pointer-events: none;
}
.ww-marshal-piece > i { font-size: clamp(.8rem, 1.8vw, 1.5rem); }
.ww-marshal-rank {
  font-family: var(--ww-mono);
  font-size: clamp(.65rem, 1.2vw, .9rem);
  font-variant-numeric: tabular-nums;
}
.ww-strategy-board--marshal .ww-board-cell { position: relative; }
.ww-strategy-board--marshal .ww-board-cell::after {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: .5rem;
}
.ww-rank-legend dt { display: flex; align-items: center; gap: .3rem; }
.ww-rank-legend dt i { width: 1.25em; text-align: center; }

/* Player scorebar representations & color indicators */
.ww-board-player {
  position: relative;
  transition: var(--ww-transition-chrome);
}
.ww-board-player--active {
  box-shadow: 0 0 0 2px var(--ww-emerald), 0 4px 14px rgba(34, 197, 94, 0.18);
}
.ww-board-player--thinking {
  border-color: var(--ww-blue) !important;
  box-shadow: 0 0 0 2px var(--ww-blue), 0 4px 14px rgba(79, 145, 255, 0.18);
}
.ww-player-you-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--club-brass) 22%, transparent);
  color: var(--club-brass-lit);
  border: 1px solid color-mix(in oklch, var(--club-brass) 50%, transparent);
}
.ww-player-stone-indicator {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.ww-player-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}
.ww-stone-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.ww-stone-badge--1 {
  background: var(--ww-owner-1-bg);
  color: var(--ww-owner-1-ink);
  border: 1px solid var(--ww-owner-1-border);
}
.ww-stone-badge--2 {
  background: var(--ww-owner-2-bg);
  color: var(--ww-owner-2-ink);
  border: 1px solid var(--ww-owner-2-border);
}
.ww-turn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ww-emerald) 20%, transparent);
  color: var(--ww-emerald);
  border: 1px solid color-mix(in oklch, var(--ww-emerald) 40%, transparent);
}
.ww-turn-pill--thinking {
  background: color-mix(in oklch, var(--ww-blue) 20%, transparent);
  color: var(--ww-blue);
  border-color: color-mix(in oklch, var(--ww-blue) 40%, transparent);
}

/* Turn banner & instructions */
.ww-turn-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  margin: 1rem 0;
  border-radius: var(--ww-radius-sm);
  transition: var(--ww-transition-panel);
}
.ww-turn-banner--your-turn {
  background: color-mix(in oklch, var(--ww-emerald) 12%, var(--ww-paper-2));
  border: 1.5px solid color-mix(in oklch, var(--ww-emerald) 60%, var(--ww-line));
  color: var(--ww-ink);
}
.ww-turn-banner--opponent-turn {
  background: color-mix(in oklch, var(--ww-blue) 10%, var(--ww-paper-2));
  border: 1.5px solid color-mix(in oklch, var(--ww-blue) 40%, var(--ww-line));
  color: var(--ww-ink-soft);
}
.ww-turn-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ww-turn-banner--your-turn .ww-turn-banner-badge {
  background: var(--ww-emerald);
  color: #071426;
}
.ww-turn-banner--opponent-turn .ww-turn-banner-badge {
  background: color-mix(in oklch, var(--ww-blue) 22%, transparent);
  color: var(--ww-blue);
  border: 1px solid color-mix(in oklch, var(--ww-blue) 50%, transparent);
}
.ww-turn-banner-message {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Loading / thinking dots animation */
.ww-thinking-dots {
  display: inline-flex;
  gap: 0.15rem;
  letter-spacing: 0;
}
.ww-thinking-dots span {
  display: inline-block;
  animation: ww-dot-pulse 1.4s var(--ww-ease-in-out) infinite;
}
.ww-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.ww-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ww-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.15); }
}

.ww-turn-spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid color-mix(in oklch, var(--ww-blue) 30%, transparent);
  border-top-color: var(--ww-blue);
  border-radius: 50%;
  animation: ww-spin 0.8s linear infinite;
}
@keyframes ww-spin {
  to { transform: rotate(360deg); }
}

/* Graphic marker for last move */
.ww-board-cell--last-move {
  position: relative;
  outline: 2px solid var(--club-brass-lit);
  outline-offset: -2px;
}
.ww-last-move-marker {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-last-move-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--club-brass-lit);
  box-shadow: 0 0 6px var(--club-brass);
}
.ww-last-move-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--club-brass-lit);
  animation: ww-last-move-ping 2.2s var(--ww-ease-out) infinite;
}
@keyframes ww-last-move-ping {
  0% { transform: scale(0.6); opacity: 1; }
  60% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Animations for WordBot moves and flipped stones */
.ww-bot-move-enter {
  animation: ww-bot-piece-drop var(--ww-dur-short) var(--ww-ease-play) forwards;
}
@keyframes ww-bot-piece-drop {
  0% { transform: scale(0.2); opacity: 0.2; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ww-cell-flip {
  animation: ww-stone-flip var(--ww-dur-short) var(--ww-ease-play) forwards;
}
@keyframes ww-stone-flip {
  0% { transform: scale(1) rotateY(0deg); }
  50% { transform: scale(1.18) rotateY(90deg); filter: brightness(1.25); }
  100% { transform: scale(1) rotateY(0deg); }
}

.ww-route--last-claimed {
  box-shadow: 0 0 0 3px var(--club-brass-lit);
}

@media (prefers-reduced-motion: reduce) {
  .ww-thinking-dots span { animation: none !important; opacity: 1; }
  .ww-turn-spinner { animation: none !important; }
  .ww-last-move-ring { animation: none !important; opacity: 0.6; }
  .ww-bot-move-enter { animation: none !important; }
  .ww-cell-flip { animation: none !important; }
}

/* Orbit Checkers Docks */
.ww-orbit-dock {
  position: relative;
}
.ww-board-cell.ww-orbit-dock--1 {
  background: color-mix(in oklch, var(--ww-blue) 12%, var(--ww-paper-2));
  border-color: color-mix(in oklch, var(--ww-blue) 35%, var(--ww-line));
}
.ww-board-cell.ww-orbit-dock--2 {
  background: color-mix(in oklch, var(--club-brass) 12%, var(--ww-paper-2));
  border-color: color-mix(in oklch, var(--club-brass) 35%, var(--ww-line));
}
.ww-orbit-dock-target {
  font-size: clamp(0.7rem, 1.4vw, 1.1rem);
  opacity: 0.45;
  pointer-events: none;
}
.ww-orbit-dock-target--1 { color: var(--ww-blue); }
.ww-orbit-dock-target--2 { color: var(--club-brass-lit); }

.ww-orbit-piece {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.85rem, 1.8vw, 1.4rem);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Reversi (Tideflip) Stones
   The cell already carries .ww-owner-N, whose Midnight fill is forced flat; the
   stone must not carry it too or its own shading is painted over and an
   Obsidian stone vanishes into the walnut. A lit crown and a brass hairline
   are what separate a dark stone from a dark board. */
.ww-board-stone {
  display: inline-block;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  transition: transform var(--ww-dur-micro) var(--ww-ease-out);
}
.ww-board-cell.ww-owner-1 .ww-board-stone {
  background: radial-gradient(circle at 35% 30%,
    color-mix(in oklch, var(--ww-owner-1-ink) 38%, var(--ww-owner-1-bg)),
    var(--ww-owner-1-bg) 58%,
    color-mix(in oklch, var(--ww-owner-1-bg) 70%, black) 100%);
  border: 1.5px solid var(--club-brass);
}
.ww-board-cell.ww-owner-2 .ww-board-stone {
  background: radial-gradient(circle at 35% 30%,
    color-mix(in oklch, var(--ww-owner-2-bg) 60%, white),
    var(--ww-owner-2-bg) 60%,
    color-mix(in oklch, var(--ww-owner-2-bg) 78%, var(--ww-owner-2-ink)) 100%);
  border: 1.5px solid color-mix(in oklch, var(--club-brass-lit) 70%, transparent);
}

/* Archipelago Tile & Settlement Graphics */
.ww-archipelago-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: clamp(0.9rem, 2vw, 1.35rem);
}
.ww-archipelago-tile--wood {
  color: var(--ww-emerald);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.ww-archipelago-tile--stone {
  color: var(--club-brass-lit);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.ww-archipelago-depleted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.65rem;
  color: var(--ww-line);
  opacity: 0.5;
}
.ww-archipelago-settlement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: clamp(0.95rem, 2.2vw, 1.5rem);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}


/* ===========================================================================
   Board Arcade, second pass: drag, travel, fights, islands, rails and town.
   Every colour below is a token or a mix of tokens; the rail colours are the
   club's own metals and jewels so a route card and its line read as one.
   ========================================================================= */

.ww-score-figure { font-variant-numeric: tabular-nums; }

.ww-final-turn-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .75rem 0 0;
  padding: .6rem .9rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid color-mix(in oklch, var(--club-brass) 60%, transparent);
  background: color-mix(in oklch, var(--club-brass) 14%, var(--ww-paper-2));
  color: var(--ww-ink);
  font-weight: 700;
}
.ww-final-turn-banner i { color: var(--club-brass-lit); }

.ww-rank-key { margin-top: .5rem; }

/* --- Drag ----------------------------------------------------------------- */
.ww-strategy-board[data-variant="orbit"] .ww-board-cell--legal,
.ww-strategy-board[data-variant="marshal"] .ww-board-cell--legal {
  touch-action: none;
  cursor: grab;
}
.ww-board-cell.is-drag-source > span { opacity: .3; }
.ww-board-cell.is-drag-over { background: color-mix(in oklch, var(--club-celadon) 26%, transparent); }
.ww-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  pointer-events: none;
  cursor: grabbing;
  transform-origin: center;
}
.ww-drag-ghost > span { transform: scale(1.18); filter: drop-shadow(0 6px 10px color-mix(in oklch, var(--club-walnut) 80%, transparent)); }
.ww-drag-ghost .ww-marshal-piece {
  padding: .3rem .45rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-owner-1-bg);
  color: var(--ww-owner-1-ink);
  border: 1px solid var(--club-brass);
}
.ww-drag-ghost[data-owner="2"] .ww-marshal-piece { background: var(--ww-owner-2-bg); color: var(--ww-owner-2-ink); }
.ww-drag-ghost .ww-orbit-piece { font-size: clamp(1.1rem, 2.4vw, 1.8rem); color: var(--ww-owner-1-ink); }
.ww-drag-ghost[data-owner="2"] .ww-orbit-piece { color: var(--club-travertine); }

.ww-orbit-piece.is-travelling,
.ww-marshal-piece.is-travelling { position: relative; z-index: 5; }
.ww-strategy-board[data-variant="orbit"],
.ww-strategy-board[data-variant="marshal"] { overflow: visible; }

/* Digits after every owned cell were a colour-blind aid; stones, pegs and
   icon units already differ in shape and tone, and the digit sat on them. */
.ww-strategy-board[data-variant="reversi"] .ww-board-cell.ww-owner-1::after,
.ww-strategy-board[data-variant="reversi"] .ww-board-cell.ww-owner-2::after,
.ww-strategy-board[data-variant="orbit"] .ww-board-cell.ww-owner-1::after,
.ww-strategy-board[data-variant="orbit"] .ww-board-cell.ww-owner-2::after { content: none; }

/* --- Tideflip hints ------------------------------------------------------- */
.ww-flip-hint {
  font-family: var(--ww-mono);
  font-size: clamp(.62rem, 1.3vw, .85rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--club-celadon);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-board-cell:hover .ww-flip-hint { opacity: 1; }
}
.ww-board-cell:focus-visible .ww-flip-hint { opacity: 1; }

/* --- Marshals: lakes and fights -------------------------------------------- */
.ww-board-cell.ww-marshal-lake,
.ww-board-cell.ww-marshal-lake:disabled {
  background: color-mix(in oklch, var(--ww-blue) 30%, var(--club-walnut));
  cursor: not-allowed;
}
.ww-marshal-lake-mark { color: color-mix(in oklch, var(--ww-sky) 70%, transparent); pointer-events: none; }

.ww-battle-clash {
  position: absolute;
  inset: -40% -60%;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  pointer-events: none;
  animation: ww-clash-in var(--ww-dur-long) var(--ww-ease-play) both, ww-clash-out var(--ww-dur-short) var(--ww-ease-in) 1.2s forwards;
}
.ww-battle-clash i { color: var(--club-brass-lit); font-size: .9rem; }
.ww-battle-chip {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .3rem;
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-mono);
  font-weight: 800;
  background: var(--ww-owner-1-bg);
  color: var(--ww-owner-1-ink);
  border: 1px solid var(--club-brass);
}
.ww-battle-chip[data-owner="2"] { background: var(--ww-owner-2-bg); color: var(--ww-owner-2-ink); }
.ww-battle-clash--attacker .ww-battle-chip:last-child,
.ww-battle-clash--defender .ww-battle-chip:first-child,
.ww-battle-clash--trade .ww-battle-chip {
  animation: ww-chip-fall var(--ww-dur-long) var(--ww-ease-in) .55s forwards;
}
@keyframes ww-clash-in {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ww-clash-out { to { opacity: 0; } }
@keyframes ww-chip-fall {
  to { opacity: .15; transform: translateY(.5rem) rotate(-14deg); }
}

/* --- Archipelago ------------------------------------------------------------ */
.ww-island-tide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  margin: .9rem 0 0;
  font-size: .9rem;
}
.ww-island-tide i { color: var(--ww-sky); }

.ww-strategy-board[data-variant="archipelago"] {
  gap: 2px;
  padding: 2px;
  background-image: none;
  background-color: color-mix(in oklch, var(--ww-blue) 42%, var(--ww-navy));
}
.ww-board-cell.ww-island-tile { position: relative; border-radius: 18%; }
.ww-board-cell.ww-island-tile--water,
.ww-board-cell.ww-island-tile--water:nth-child(odd) {
  background:
    repeating-linear-gradient(170deg, transparent 0 7px, color-mix(in oklch, var(--ww-sky) 16%, transparent) 7px 8px),
    color-mix(in oklch, var(--ww-blue) 42%, var(--ww-navy));
  border-color: transparent;
  border-radius: 0;
}
.ww-board-cell.ww-island-tile--wood,
.ww-board-cell.ww-island-tile--wood:nth-child(odd) { background: color-mix(in oklch, var(--club-jade) 70%, var(--club-walnut)); }
.ww-board-cell.ww-island-tile--stone,
.ww-board-cell.ww-island-tile--stone:nth-child(odd) { background: color-mix(in oklch, var(--club-brass) 34%, var(--club-walnut)); }
.ww-board-cell.ww-island-tile--settled,
.ww-board-cell.ww-island-tile--harbor { background: color-mix(in oklch, var(--club-brass) 20%, var(--club-walnut)); }
.ww-board-cell.ww-island-tile--owned-1 { box-shadow: inset 0 0 0 3px var(--ww-owner-1-border, var(--club-brass)); }
.ww-board-cell.ww-island-tile--owned-2 { box-shadow: inset 0 0 0 3px var(--club-travertine); }
.ww-board-cell.ww-island-tile--resting .ww-archipelago-tile { opacity: .38; }
.ww-board-cell.ww-island-tile--storm-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--ww-ink-soft) 22%, transparent) 0 3px, transparent 3px 7px);
  pointer-events: none;
}
.ww-archipelago-settlement[data-owner="1"] { color: var(--ww-owner-1-ink); }
.ww-archipelago-settlement[data-owner="2"] { color: var(--club-travertine); }
.ww-board-cell.ww-island-tile--owned-1 .ww-archipelago-settlement {
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
  border-radius: 30%;
  background: var(--ww-owner-1-bg);
}
.ww-board-cell.ww-island-tile--owned-2 .ww-archipelago-settlement {
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
  border-radius: 30%;
  background: var(--ww-owner-2-bg);
  color: var(--ww-owner-2-ink);
}
.ww-island-rest,
.ww-island-yield {
  position: absolute;
  font-family: var(--ww-mono);
  font-size: clamp(.55rem, 1.1vw, .72rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.ww-island-rest { bottom: 3px; right: 4px; color: var(--ww-ink-soft); }
.ww-island-yield { top: 3px; left: 4px; color: var(--club-brass-lit); }
.ww-island-storm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ww-sky);
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  pointer-events: none;
  animation: ww-storm-drift 2.4s var(--ww-ease-in-out) infinite alternate;
}
@keyframes ww-storm-drift { to { transform: translateY(-3px); } }
.ww-board-tool i { margin-right: .3rem; }
.ww-board-tool:disabled { opacity: .5; cursor: not-allowed; }

/* --- Railbound ----------------------------------------------------------------- */
.ww-rail {
  --rail-brass: var(--club-brass-lit);
  --rail-jade: var(--ww-emerald);
  --rail-oxblood: color-mix(in oklch, var(--ww-danger) 75%, var(--club-oxblood));
  --rail-sky: var(--ww-sky);
  --rail-any: color-mix(in oklch, var(--ww-ink-soft) 70%, transparent);
  --rail-wild: var(--club-travertine);
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
}
.ww-rail-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}
.ww-rail-tickets {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ww-rail-ticket {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: var(--ww-radius-sm);
  border: 1px dashed color-mix(in oklch, var(--club-brass) 60%, transparent);
  background: color-mix(in oklch, var(--club-brass) 9%, var(--ww-paper-2));
  color: var(--ww-ink);
  font-size: .85rem;
}
.ww-rail-ticket i { color: var(--club-brass-lit); }
.ww-rail-ticket strong { font-variant-numeric: tabular-nums; }
.ww-rail-ticket.is-done { border-style: solid; border-color: var(--ww-emerald); }
.ww-rail-ticket.is-done i { color: var(--ww-emerald); }

.ww-rail-map {
  border-radius: var(--ww-radius);
  border: 1px solid color-mix(in oklch, var(--club-brass) 35%, transparent);
  background-color: color-mix(in oklch, var(--club-jade) 22%, var(--ww-navy));
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  padding: .4rem;
}
.ww-rail-map svg { display: block; width: 100%; max-width: 46rem; height: auto; margin: 0 auto; overflow: visible; }
.ww-rail-car {
  stroke: var(--rail-colour, var(--rail-any));
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .8;
  transition: stroke-width var(--ww-dur-micro) var(--ww-ease-out), opacity var(--ww-dur-micro) var(--ww-ease-out);
}
.ww-rail-route--brass { --rail-colour: var(--rail-brass); }
.ww-rail-route--jade { --rail-colour: var(--rail-jade); }
.ww-rail-route--oxblood { --rail-colour: var(--rail-oxblood); }
.ww-rail-route--sky { --rail-colour: var(--rail-sky); }
.ww-rail-route--any { --rail-colour: var(--rail-any); }
.ww-rail-route.is-owned .ww-rail-car { stroke-width: 2.6; opacity: 1; stroke-linecap: butt; }
.ww-rail-route.is-owner-1 .ww-rail-car { stroke: var(--ww-owner-1-bg); filter: drop-shadow(0 0 .35px var(--club-brass-lit)); }
.ww-rail-route.is-owner-2 .ww-rail-car { stroke: var(--club-travertine); }
.ww-rail-route.is-wanted:not(.is-owned) .ww-rail-car { stroke-dasharray: .9 .5; opacity: 1; }
.ww-rail-hit { stroke: transparent; stroke-width: 6; }
.ww-rail-route.is-claimable { cursor: pointer; outline: none; }
.ww-rail-route.is-claimable .ww-rail-car { stroke-width: 2.2; opacity: 1; animation: ww-rail-ready 1.6s var(--ww-ease-in-out) infinite alternate; }
@media (hover: hover) {
  .ww-rail-route.is-claimable:hover .ww-rail-car { stroke-width: 3.2; }
}
.ww-rail-route.is-claimable:focus-visible .ww-rail-car { stroke-width: 3.2; stroke: var(--ww-focus); animation: none; }
.ww-rail-route.is-claimable:active .ww-rail-car,
.ww-rail-route.is-claiming .ww-rail-car { stroke-width: 3.6; animation: none; }
.ww-rail-route.is-last .ww-rail-car { animation: ww-rail-lay var(--ww-dur-long) var(--ww-ease-play) both; }
.ww-rail-route.is-last .ww-rail-car:nth-of-type(2) { animation-delay: 90ms; }
.ww-rail-route.is-last .ww-rail-car:nth-of-type(3) { animation-delay: 180ms; }
.ww-rail-route.is-last .ww-rail-car:nth-of-type(4) { animation-delay: 270ms; }
@keyframes ww-rail-ready { to { opacity: .6; } }
@keyframes ww-rail-lay {
  from { opacity: 0; stroke-width: 5; }
  to { opacity: 1; }
}
.ww-rail-city circle { fill: var(--ww-navy); stroke: var(--club-brass-lit); stroke-width: .6; }
.ww-rail-city.is-ticket circle { fill: var(--club-brass); }
.ww-rail-city text {
  fill: var(--ww-ink);
  font-family: var(--ww-font);
  font-size: 2.8px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--ww-navy);
  stroke-width: .7px;
}

.ww-rail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: var(--ww-ink-soft);
}
.ww-rail-swatch i { margin-right: .3rem; }
.ww-rail-swatch--brass i { color: var(--rail-brass); }
.ww-rail-swatch--jade i { color: var(--rail-jade); }
.ww-rail-swatch--oxblood i { color: var(--rail-oxblood); }
.ww-rail-swatch--sky i { color: var(--rail-sky); }
.ww-rail-swatch--any i { color: var(--ww-ink-soft); }

.ww-rail-hand,
.ww-rail-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.ww-rail-hand .ww-rail-label,
.ww-rail-market .ww-rail-label { flex: 0 0 100%; }
.ww-rail-market form { margin: 0; }
.ww-rail-card {
  --card-colour: var(--rail-any);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  min-width: 3.6rem;
  padding: .35rem .7rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid color-mix(in oklch, var(--card-colour) 70%, transparent);
  border-left-width: 5px;
  background: color-mix(in oklch, var(--card-colour) 12%, var(--ww-paper-2));
  color: var(--ww-ink);
  font-weight: 700;
  font-size: .85rem;
  text-transform: capitalize;
}
.ww-rail-card i { color: var(--card-colour); }
.ww-rail-card strong { font-variant-numeric: tabular-nums; font-family: var(--ww-mono); }
.ww-rail-card.is-empty { opacity: .45; }
.ww-rail-card--brass { --card-colour: var(--rail-brass); }
.ww-rail-card--jade { --card-colour: var(--rail-jade); }
.ww-rail-card--oxblood { --card-colour: var(--rail-oxblood); }
.ww-rail-card--sky { --card-colour: var(--rail-sky); }
.ww-rail-card--wild { --card-colour: var(--rail-wild); }
.ww-rail-card--deck { --card-colour: var(--club-brass); }
.ww-rail-card--take {
  cursor: pointer;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-rail-card--take:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in oklch, var(--card-colour) 24%, var(--ww-paper-2)); }
}
.ww-rail-card--take:active:not(:disabled) { transform: translateY(1px); }
.ww-rail-card--take:disabled { opacity: .4; cursor: not-allowed; }

.ww-rail-claims {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .5rem;
}
.ww-rail-claims form { margin: 0; }
.ww-rail-claims .ww-route {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
}
.ww-rail-claims .ww-route--wanted { border-style: solid; border-color: var(--club-brass-lit); }
.ww-rail-claims .ww-route--brass i { color: var(--rail-brass); }
.ww-rail-claims .ww-route--jade i { color: var(--rail-jade); }
.ww-rail-claims .ww-route--oxblood i { color: var(--rail-oxblood); }
.ww-rail-claims .ww-route--sky i { color: var(--rail-sky); }
@media (hover: hover) {
  .ww-rail-claims .ww-route:hover { border-color: var(--club-brass-lit); }
}
.ww-rail-claims .ww-route:active { transform: translateY(1px); }

/* --- Scrolltown ------------------------------------------------------------------ */
.ww-town-board {
  --town-ink: var(--club-walnut);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(4.6rem, auto));
  gap: .3rem;
  margin-top: 1rem;
  padding: .45rem;
  border-radius: var(--ww-radius);
  border: 3px solid color-mix(in oklch, var(--club-walnut) 70%, var(--club-brass));
  background-color: color-mix(in oklch, var(--club-travertine) 80%, var(--club-walnut));
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: multiply;
}
.ww-town-space {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .3rem .35rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid color-mix(in oklch, var(--club-walnut) 22%, transparent);
  background: var(--club-travertine);
  color: var(--town-ink);
  font-size: .68rem;
  line-height: 1.15;
  overflow: hidden;
}
.ww-town-space strong { display: block; font-weight: 700; overflow-wrap: anywhere; }
.ww-town-space small { display: block; margin-top: auto; font-weight: 700; color: color-mix(in oklch, var(--club-walnut) 78%, transparent); }
.ww-town-number { font-family: var(--ww-mono); font-size: .6rem; color: color-mix(in oklch, var(--club-walnut) 70%, transparent); }
.ww-town-space--event { background: color-mix(in oklch, var(--club-oxblood) 16%, var(--club-travertine)); }
.ww-town-space--bonus { background: color-mix(in oklch, var(--club-jade) 18%, var(--club-travertine)); }
.ww-town-space--rest { background: color-mix(in oklch, var(--ww-blue) 14%, var(--club-travertine)); }
.ww-town-space--start { background: color-mix(in oklch, var(--club-brass) 34%, var(--club-travertine)); }
.ww-town-space--owned-1 { box-shadow: inset 0 0 0 3px var(--ww-owner-1-bg); }
.ww-town-space--owned-2 { box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--club-brass) 70%, var(--club-walnut)); }
.ww-town-space.is-upgraded small i { color: var(--club-oxblood); }
.ww-town-space.is-offer { outline: 3px solid var(--club-brass); outline-offset: 1px; z-index: 1; }
.ww-town-space.is-bought { animation: ww-town-bought var(--ww-dur-long) var(--ww-ease-play); }
.ww-town-effect { font-family: var(--ww-mono); }
.ww-town-tokens { position: absolute; right: .2rem; bottom: .2rem; display: flex; gap: .15rem; }
.ww-town-token {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 800;
  background: var(--ww-owner-1-bg);
  color: var(--ww-owner-1-ink);
  border: 2px solid var(--club-brass);
}
.ww-town-token[data-owner="2"] { background: var(--ww-owner-2-bg); color: var(--ww-owner-2-ink); border-color: var(--club-walnut); }
.ww-town-token.is-arriving { animation: ww-town-hop var(--ww-dur-long) var(--ww-ease-play); }
.ww-town-centre {
  grid-row: 2 / 7;
  grid-column: 2 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  padding: .6rem;
  color: var(--town-ink);
}
.ww-town-centre .ww-waiting-banner { margin: 0; }
.ww-town-feed {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: var(--ww-radius-sm);
  background: var(--club-travertine);
  color: var(--club-walnut);
  border: 1px solid color-mix(in oklch, var(--club-brass) 50%, transparent);
  font-size: .9rem;
}
.ww-town-die {
  display: grid;
  flex: 0 0 2.6rem;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .5rem;
  background: var(--club-travertine);
  border: 2px solid var(--club-walnut);
  font-family: var(--ww-mono);
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--club-walnut);
}
.ww-town-die.is-rolling { animation: ww-town-roll 520ms var(--ww-ease-out); }
@keyframes ww-town-roll {
  0% { transform: rotate(0) scale(.8); }
  40% { transform: rotate(200deg) scale(1.12); }
  75% { transform: rotate(340deg) scale(.96); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes ww-town-hop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-.8rem) scale(1.15); }
  100% { transform: translateY(0); }
}
@keyframes ww-town-bought {
  50% { transform: scale(1.08); }
}
@media (max-width: 40rem) {
  .ww-town-board { grid-template-rows: repeat(7, minmax(3.4rem, auto)); gap: .18rem; padding: .25rem; }
  .ww-town-space { padding: .15rem .2rem; font-size: .5rem; }
  .ww-town-space strong { font-size: .5rem; }
  .ww-town-space small { font-size: .5rem; }
  .ww-town-token { width: 1rem; height: 1rem; font-size: .55rem; border-width: 1px; }
  .ww-town-centre { padding: .25rem; gap: .35rem; }
  .ww-town-feed { font-size: .75rem; padding: .45rem; }
  .ww-town-centre .ww-board-actions { margin: 0; gap: .35rem; }
}

/* --- Result ------------------------------------------------------------------------ */
.ww-board-win-shimmer { animation: ww-board-shimmer 900ms var(--ww-ease-out) var(--ww-win-delay, 0ms) both; }
@keyframes ww-board-shimmer {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.55) drop-shadow(0 0 6px var(--club-brass)); transform: translateY(-2px); }
  100% { filter: brightness(1); transform: none; }
}

.ww-town-number { display: flex; align-items: center; gap: .25rem; }
.ww-town-number i { font-size: .62rem; opacity: .8; }
.ww-town-action {
  min-height: 44px;
  border: 2px solid var(--club-walnut);
  background: var(--club-travertine);
  color: var(--club-walnut);
  font-weight: 700;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}
.ww-town-action--primary { background: var(--club-walnut); color: var(--club-travertine); }
@media (hover: hover) {
  .ww-town-action:hover { transform: translateY(-1px); background: color-mix(in oklch, var(--club-brass) 30%, var(--club-travertine)); }
  .ww-town-action--primary:hover { background: color-mix(in oklch, var(--club-brass) 25%, var(--club-walnut)); }
}
.ww-town-action:active { transform: translateY(1px); }
.ww-town-action:focus-visible { outline-color: var(--ww-blue-deep, var(--ww-blue)); }
.ww-town-action:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 40rem) {
  .ww-town-space strong { display: none; }
  .ww-town-number { flex-direction: column; align-items: flex-start; font-size: .55rem; }
  .ww-town-number i { font-size: .8rem; }
  .ww-town-action { font-size: .85rem; }
}

/* --- Homestretch (Parcheesi) ------------------------------------------------------ */
.ww-homestretch-cell { align-items: center; justify-content: center; min-height: 3rem; }
.ww-homestretch-cell .ww-town-number { display: flex; align-items: center; gap: .2rem; }
.ww-homestretch-cell.is-safe { background: color-mix(in oklch, var(--club-jade) 20%, var(--club-travertine)); }
.ww-homestretch-cell.is-safe .ww-town-number i { color: var(--club-jade); }
.ww-homestretch-cell.is-entry .ww-town-number i { color: var(--club-brass); }
.ww-homestretch-cell.is-blockade { box-shadow: inset 0 0 0 3px var(--club-oxblood); }
.ww-homestretch .ww-town-tokens { position: static; margin-top: .15rem; justify-content: center; }

.ww-homestretch-centre { gap: .5rem; }
.ww-homestretch-lane {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .5rem;
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--club-travertine) 88%, var(--club-walnut));
  border: 1px solid color-mix(in oklch, var(--club-brass) 45%, transparent);
  color: var(--club-walnut);
}
.ww-homestretch-lane-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem; }
.ww-homestretch-lane-body { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ww-homestretch-nest,
.ww-homestretch-home { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-family: var(--ww-mono); }
.ww-homestretch-home.is-won { color: var(--club-jade); }
.ww-homestretch-column { display: inline-flex; gap: .2rem; }
.ww-homestretch-column-cell {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--ww-radius-sm);
  border: 1px dashed color-mix(in oklch, var(--club-walnut) 40%, transparent);
  font-weight: 800;
  font-size: .7rem;
  color: var(--club-walnut);
}
.ww-homestretch-column-cell.is-filled { background: var(--club-brass); border-style: solid; }

.ww-homestretch-dice { display: inline-flex; gap: .35rem; }
.ww-homestretch-die { flex: 0 0 2rem; width: 2rem; height: 2rem; font-size: 1rem; }
.ww-homestretch-moves { flex-direction: column; align-items: stretch; gap: .35rem; }
.ww-homestretch-moves .ww-town-action { width: 100%; justify-content: flex-start; text-align: left; }

@media (max-width: 40rem) {
  .ww-homestretch-column-cell { width: 1.2rem; height: 1.2rem; font-size: .6rem; }
  .ww-homestretch-lane { padding: .35rem; }
  .ww-homestretch-die { flex-basis: 1.7rem; width: 1.7rem; height: 1.7rem; font-size: .85rem; }
}

/* --- Seedfall (Mancala) ----------------------------------------------------------- */
.ww-mancala-board {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: stretch;
  margin-top: 1rem;
  padding: .6rem;
  border-radius: var(--ww-radius);
  border: 3px solid color-mix(in oklch, var(--club-walnut) 70%, var(--club-brass));
  background-color: color-mix(in oklch, var(--club-travertine) 80%, var(--club-walnut));
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: multiply;
}
.ww-mancala-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 3.4rem;
  padding: .6rem .4rem;
  border-radius: 1.6rem;
  border: 2px solid var(--club-brass);
  font-family: var(--ww-mono);
}
.ww-mancala-store-count { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.ww-mancala-store-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; opacity: .8; }
.ww-mancala-rows { display: grid; grid-template-rows: 1fr 1fr; gap: .45rem; }
.ww-mancala-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.ww-mancala-pit-form { display: contents; }
.ww-mancala-pit {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: var(--ww-control-min, 2.75rem);
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--club-walnut) 45%, transparent);
  background: var(--club-travertine);
  color: var(--club-walnut);
  font-family: var(--ww-mono);
}
.ww-mancala-pit--1 { box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--ww-owner-1-bg) 40%, transparent); }
.ww-mancala-pit--2 { box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--club-brass) 55%, transparent); }
.ww-mancala-pit.is-empty { opacity: .55; }
.ww-mancala-pit.is-last { outline: 3px solid var(--club-brass); outline-offset: 1px; }
.ww-mancala-seeds { font-size: 1.25rem; font-weight: 800; }
button.ww-mancala-pit { cursor: pointer; transition: transform var(--ww-dur-quick, 120ms) var(--ww-ease-out, ease), box-shadow var(--ww-dur-quick, 120ms) var(--ww-ease-out, ease); }
button.ww-mancala-pit.is-mine { border-color: var(--club-brass); background: color-mix(in oklch, var(--club-brass) 22%, var(--club-travertine)); }
button.ww-mancala-pit:hover { transform: translateY(-2px); box-shadow: 0 4px 10px color-mix(in oklch, var(--club-walnut) 40%, transparent); }
button.ww-mancala-pit:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 2px; }
button.ww-mancala-pit:active { transform: translateY(0) scale(.96); }
button.ww-mancala-pit:disabled { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
.ww-mancala .ww-town-feed { margin-top: .8rem; }

@media (max-width: 40rem) {
  .ww-mancala-board { gap: .3rem; padding: .35rem; }
  .ww-mancala-row { gap: .28rem; }
  .ww-mancala-store { min-width: 2.6rem; padding: .4rem .25rem; }
  .ww-mancala-store-count { font-size: 1.4rem; }
  .ww-mancala-seeds { font-size: 1rem; }
}

/* --- Millstone (Nine Men's Morris) ------------------------------------------------ */
.ww-mill-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  aspect-ratio: 1;
  width: min(100%, 30rem);
  margin: 1rem auto 0;
  padding: 0;
  border-radius: var(--ww-radius);
  border: 3px solid color-mix(in oklch, var(--club-walnut) 70%, var(--club-brass));
  background-color: color-mix(in oklch, var(--club-travertine) 80%, var(--club-walnut));
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: multiply;
}
.ww-mill-lines { position: absolute; inset: 6%; width: 88%; height: 88%; pointer-events: none; }
.ww-mill-lines line { stroke: color-mix(in oklch, var(--club-walnut) 60%, var(--club-brass)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ww-mill-slot { display: grid; place-items: center; min-width: 0; }
.ww-mill-form { display: contents; }
.ww-mill-point, .ww-mill-action {
  display: grid;
  place-items: center;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  color: var(--ww-owner-1-ink);
  font-weight: 800;
  line-height: 1;
}
.ww-mill-point.is-empty, .ww-mill-action.is-empty {
  width: 34%;
  background: color-mix(in oklch, var(--club-walnut) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--club-walnut) 45%, transparent);
}
.ww-mill-point.ww-owner-1, .ww-mill-action.ww-owner-1 { border-color: var(--club-brass); box-shadow: 0 2px 4px color-mix(in oklch, var(--club-walnut) 40%, transparent); }
.ww-mill-point.ww-owner-2, .ww-mill-action.ww-owner-2 { border-color: var(--club-walnut); box-shadow: 0 2px 4px color-mix(in oklch, var(--club-walnut) 40%, transparent); }
.ww-mill-point.is-mill, .ww-mill-action.is-mill { box-shadow: 0 0 0 3px var(--club-brass); }
button.ww-mill-action { cursor: pointer; transition: transform var(--ww-dur-quick, 120ms) var(--ww-ease-out, ease); }
button.ww-mill-action:hover { transform: scale(1.12); }
button.ww-mill-action:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 2px; }
button.ww-mill-action:active { transform: scale(0.94); }
.ww-mill-action.is-dest { width: 44%; background: color-mix(in oklch, var(--club-jade) 34%, var(--club-travertine)); box-shadow: 0 0 0 2px var(--club-jade); }
.ww-mill-action.is-selected { box-shadow: 0 0 0 3px var(--club-brass); outline: 2px dashed var(--club-brass); outline-offset: 2px; }
.ww-mill-action.is-target { box-shadow: 0 0 0 3px var(--club-oxblood); color: var(--club-travertine); background: color-mix(in oklch, var(--club-oxblood) 40%, transparent); }
.ww-mill-feed { max-width: 30rem; margin: 0.8rem auto 0; }

@media (max-width: 40rem) {
  .ww-mill-board { width: 100%; }
}
.bortochi { max-width: 62rem; margin: 0 auto; padding: 1rem 1rem calc(1rem + var(--ww-dock) + var(--ww-safe-bottom)); }
.bortochi h1 { font-family: var(--ww-display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; margin-bottom: .6rem; }
.bortochi-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.bortochi-lesson { flex: 1 1 16rem; min-width: 0; }
.bortochi label { display: block; margin-bottom: .4rem; }
.bortochi select, .bortochi input { width: 100%; min-height: var(--ww-control-min); border: 1px solid var(--ww-line); border-radius: var(--ww-radius-sm); background: var(--ww-paper); color: var(--ww-ink); padding: .6rem; }
.bortochi select:active, .bortochi input:active { border-color: var(--ww-gold); }
.bortochi input:disabled { opacity: .55; cursor: not-allowed; }
.bortochi input[aria-invalid="true"] { border-color: var(--ww-danger-text); }
@media (hover: hover) { .bortochi select:hover, .bortochi input:enabled:hover { border-color: var(--ww-gold); } }
.bortochi-tip, .bortochi-feedback { min-height: 2lh; }
.bortochi-stage { height: clamp(14rem, 34vw, 24rem); position: relative; overflow: hidden; background: var(--ww-navy); color: var(--club-travertine); border-radius: var(--ww-radius-sm); }
.bortochi-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bortochi-progress { width: 100%; height: .6rem; accent-color: var(--ww-gold); display: block; margin-block: .8rem; }
.bortochi-stats { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; }
.bortochi-prompt { font-family: var(--ww-mono); font-size: clamp(1.2rem, 3vw, 1.65rem); line-height: 1.8; overflow-wrap: normal; padding-block: .5rem; min-height: 1.8em; margin-block: .4rem; }
.bortochi-prompt .typed { color: var(--ww-success-text); }
.bortochi-prompt .current { color: var(--ww-ink); background: var(--ww-paper-2); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; }
.bortochi-keyboard { display: grid; gap: .3rem; margin-block: 1rem; }
.bortochi-keyboard-row { display: flex; justify-content: center; gap: .25rem; }
.bortochi-keyboard kbd { flex: 0 1 2.8rem; min-width: 0; text-align: center; padding: .4rem 0; border: 1px solid var(--ww-line); border-radius: var(--ww-radius-sm); font-family: var(--ww-mono); }
.bortochi-keyboard kbd.current { background: var(--ww-ink); color: var(--ww-paper); border-color: var(--ww-gold); }
.bortochi-keyboard kbd.space { flex-basis: 14rem; }
.bortochi-result { border-top: 1px solid var(--club-brass); margin-top: 1rem; padding-top: 1rem; }
.bortochi-note { font-size: .85rem; margin-top: 1.5rem; }
.bortochi-stage-heading h2 { font-family: var(--ww-display); font-size: 1.4rem; font-weight: 800; }
.bortochi-stage-heading p { margin-block: .3rem .75rem; }
.bortochi-teaching { border-top: 1px solid var(--ww-line); margin-top: 1rem; padding-top: 1rem; }
.bortochi-record { font-size: .9rem; margin-block: .6rem; }
.bortochi-stage canvas { image-rendering: pixelated; }

.bortochi-final-speed { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; margin-block: .75rem; }
.bortochi-final-speed strong { font: 800 clamp(2rem, 5vw, 3rem) var(--ww-mono); font-variant-numeric: tabular-nums; color: var(--ww-ink); }
.card-table-guide{margin:0 auto 22px;border:1px solid #fff7df44;border-radius:14px;background:#11182ed9}.card-table-guide summary{display:flex;gap:12px;align-items:center;padding:13px 18px;cursor:pointer}.card-table-guide summary strong{font-size:13px}.card-table-guide__body{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;padding:0 18px 16px;color:#d8f3ed;font-size:12px}.card-table-guide__stakes{grid-column:1/-1;padding-top:9px;border-top:1px solid #fff7df22;color:var(--card-gold)}.card-action-hint{margin:9px auto 0;color:#bce8df;font-size:11px}.card-game-ticket__objective{position:relative;display:block;max-width:82%;margin-top:8px;color:#45606d;font-weight:600}@media(max-width:560px){.card-table-guide__body{grid-template-columns:1fr}}
:root{--card-ink:#182741;--card-cream:#fff7df;--card-pink:#ff6f91;--card-aqua:#72dfd0;--card-gold:#ffd166;--card-night:#11182e}
.card-arcade,.card-table-page{position:relative;min-height:100dvh;overflow:hidden;color:var(--card-ink);background:linear-gradient(180deg,#a9e9e2 0,#ceeae2 25%,#ffd9b7 58%,#29254b 58.2%,#10172c 100%);font-family:"IBM Plex Mono",monospace}
.card-sky{position:absolute;inset:0;width:100%;height:650px;pointer-events:none;mix-blend-mode:multiply}.card-arcade__inner{position:relative;z-index:1;max-width:1240px;margin:auto;padding:54px 26px 120px}.card-kicker{font-size:10px;font-weight:600;letter-spacing:.2em}.card-marquee{position:relative;display:grid;grid-template-columns:120px 1fr 200px;gap:32px;align-items:center;min-height:290px;padding:40px 48px;overflow:hidden;border:3px solid var(--card-ink);border-radius:38px 6px 38px 6px;background:#fff7dce8;box-shadow:10px 10px 0 var(--card-ink),18px 18px 0 var(--card-pink)}
.card-marquee:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,#1726420b 6px);pointer-events:none}.card-marquee__station{writing-mode:vertical-rl;transform:rotate(180deg);font:22px "Archivo Black";letter-spacing:.12em;color:var(--card-pink)}.card-marquee h1{margin:4px 0;font:clamp(60px,9vw,118px)/.84 "Archivo Black";letter-spacing:-.07em;text-transform:uppercase}.card-marquee p{max-width:620px;margin-top:22px;font-size:15px}.card-marquee__sun{display:grid;aspect-ratio:1;place-items:center;border-radius:50%;background:repeating-linear-gradient(0deg,var(--card-pink) 0 10px,transparent 11px 17px),linear-gradient(var(--card-gold),var(--card-pink));box-shadow:0 0 0 14px #72dfd055}.card-marquee__sun span{width:45%;border-top:3px solid var(--card-ink)}
.card-family-nav{position:sticky;z-index:5;top:10px;display:flex;gap:4px;width:max-content;max-width:100%;margin:34px auto;padding:6px;overflow:auto;border:2px solid var(--card-ink);border-radius:30px;background:#fff7dfef;box-shadow:5px 5px 0 var(--card-ink)}.card-family-nav a{padding:9px 17px;border-radius:22px;font-size:11px;font-weight:600;text-transform:uppercase}.card-family-nav a:hover{color:#fff;background:var(--card-ink)}.card-family{scroll-margin-top:90px;margin:45px 0}.card-family__heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px;color:var(--card-cream)}.card-family__heading span{font:32px "Archivo Black";text-transform:uppercase}.card-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card-game-ticket{position:relative;min-height:300px;padding:24px;overflow:hidden;border:2px solid var(--card-ink);border-radius:4px 24px 4px 24px;background:var(--card-cream);box-shadow:7px 7px 0 var(--card-ink);transition:transform .2s,box-shadow .2s}.card-game-ticket:nth-child(3n+2){background:#d8f3ed}.card-game-ticket:nth-child(3n+3){background:#ffd6df}.card-game-ticket:hover{transform:translate(-3px,-5px) rotate(-.4deg);box-shadow:11px 13px 0 var(--card-ink)}.card-game-ticket__top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em}.card-game-ticket__glyph{position:absolute;right:13px;top:35px;color:#ff6f9124;font:160px Georgia;transform:rotate(12deg)}.card-game-ticket h2{position:relative;max-width:85%;margin:44px 0 10px;font:26px/1 "Archivo Black";text-transform:uppercase}.card-game-ticket p{position:relative;max-width:85%;min-height:55px;font-size:12px}.card-game-ticket__actions{position:absolute;right:22px;bottom:22px;left:22px;display:flex;gap:14px;align-items:center}.card-play-btn,.card-side-btn,.card-mini-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:2px solid var(--card-ink);border-radius:3px;color:var(--card-cream);background:var(--card-ink);box-shadow:4px 4px 0 var(--card-pink);font-weight:600;cursor:pointer}.card-side-btn{color:var(--card-ink);background:var(--card-aqua);box-shadow:none}.card-mini-btn{padding:7px 10px;font-size:10px}.card-text-link{border-bottom:1px solid;font-size:11px}.card-lobby-band{display:grid;grid-template-columns:260px 1fr;gap:30px;margin-top:80px;padding:34px;border:2px solid var(--card-ink);background:#d8f3ed;box-shadow:10px 10px 0 var(--card-pink)}.card-lobby-band h2,.card-history h2{font:34px "Archivo Black";text-transform:uppercase}.card-open-row{display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:center;padding:12px;border-bottom:1px dashed #18274166}.card-open-row__lamp{width:9px;height:9px;border-radius:50%;background:#43bd80;box-shadow:0 0 0 5px #43bd8033}.card-open-row small{display:block}.card-empty-frequency{text-align:center}.card-empty-frequency span{font:28px "Archivo Black"}.card-history{margin-top:70px;color:var(--card-cream)}.card-history__rail{display:flex;gap:12px;overflow:auto;padding:12px 0}.card-history-chip{min-width:200px;padding:16px;border:1px solid #fff7df77;background:#11182ecc}.card-history-chip span,.card-history-chip strong{display:block}.card-history-chip strong{color:var(--card-aqua);font-size:10px}
.card-new-table{position:relative;z-index:1;display:grid;min-height:80vh;place-items:center}.card-new-table__ticket{width:min(550px,calc(100% - 30px));padding:50px;border:3px solid var(--card-ink);border-radius:4px 35px;background:var(--card-cream);box-shadow:13px 13px 0 var(--card-pink)}.card-new-table h1{margin:8px 0;font:48px/1 "Archivo Black";text-transform:uppercase}.card-field,.card-check{display:block;margin:24px 0}.card-field span{display:block;margin-bottom:6px}.card-field input{width:100%;padding:12px;border:2px solid}.card-check input{margin-right:8px}
.card-table-page{background:radial-gradient(circle at 50% 20%,#254f62,#171934 54%,#090e1f);color:var(--card-cream)}.card-table-nav{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid #fff7df33;font-size:11px;letter-spacing:.12em}.card-table-main{position:relative;z-index:2;max-width:1150px;margin:auto;padding:25px 20px 80px}.card-table{perspective:1200px}.card-table__felt{position:relative;min-height:760px;padding:30px;border:4px solid #e2b36c;border-radius:48% / 20%;background:radial-gradient(ellipse at center,#26736b,#164b50 65%,#112f38);box-shadow:inset 0 0 0 8px #0b242b,inset 0 0 80px #061416aa,0 30px 80px #0008}.card-table__felt:after{content:"NIGHT DECK · NO DRINKS ON FELT ·";position:absolute;inset:34% 20% auto;text-align:center;color:#ffffff14;font:18px "Archivo Black";letter-spacing:.2em;transform:rotate(-4deg);pointer-events:none}.card-seat{position:absolute;z-index:3;left:50%;display:flex;gap:10px;align-items:center;transform:translateX(-50%)}.card-seat--north{top:25px}.card-seat--south{position:static;justify-content:center;margin-bottom:12px;transform:none}.card-seat__badge{display:grid;width:38px;aspect-ratio:1;place-items:center;border:2px solid var(--card-gold);border-radius:50%;background:var(--card-night);font-weight:600}.card-seat strong,.card-seat small{display:block}.card-seat small{color:#aee7dc}.card-turn-pulse{padding:5px 8px;border-radius:20px;color:var(--card-ink);background:var(--card-gold);font-size:9px}.card-opponent-hand,.card-player-hand,.card-community{display:flex;justify-content:center}.card-opponent-hand{position:absolute;z-index:2;top:90px;right:15%;left:15%;transform:scale(.72)}.card-player-hand{min-height:150px;align-items:end}.card-community{position:relative;z-index:2;min-height:120px;gap:9px}.card-table-center{position:absolute;z-index:2;top:280px;right:15%;left:15%;text-align:center}.card-table-center__meta{display:flex;justify-content:center;gap:20px;margin-bottom:12px;color:#b9e8df;font-size:10px;letter-spacing:.15em}.playing-card{position:relative;width:82px;aspect-ratio:.7;margin-left:-18px;border:2px solid #182741;border-radius:7px;color:var(--card-ink);background:#fffdf3;box-shadow:0 7px 0 #c8bfa7,0 10px 20px #0018;transform:translateY(80px) rotate(calc((var(--deal-index,0) - 3) * 2deg));opacity:0;transition:transform .35s cubic-bezier(.2,.9,.2,1.2),opacity .2s}.playing-card:first-child{margin-left:0}.playing-card.is-dealt{transform:translateY(0) rotate(calc((var(--deal-index,0) - 3) * 2deg));opacity:1;transition-delay:calc(var(--deal-index,0) * 45ms)}.playing-card.is-selected{transform:translateY(-16px);outline:3px solid var(--card-gold)}.playing-card.is-red{color:#c22947}.playing-card__rank{position:absolute;top:7px;left:8px;font:bold 17px Georgia}.playing-card__suit{position:absolute;top:24px;left:8px;font-size:15px}.playing-card__pip{position:absolute;inset:0;display:grid;place-items:center;font-size:38px}.playing-card__back{position:absolute;inset:4px;display:grid;place-items:center;border:2px solid #fff7df;border-radius:4px;background:repeating-linear-gradient(45deg,#ff6f91 0 5px,#182741 6px 11px)}.playing-card__back span{display:grid;width:36px;aspect-ratio:1;place-items:center;border-radius:50%;color:#182741;background:#ffd166;font:bold 10px "IBM Plex Mono"}.playing-card__select{position:absolute;z-index:4;inset:0;cursor:pointer}.playing-card__select input{position:absolute;right:5px;bottom:5px;width:18px;height:18px}.card-action-console{position:absolute;z-index:4;right:8%;bottom:32px;left:8%;text-align:center}.card-action-console__buttons{display:flex;justify-content:center;gap:12px;margin-top:16px}.card-action-console__waiting{margin-top:15px;color:#bce8df}.card-action-console__waiting span{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--card-gold);box-shadow:0 0 0 5px #ffd16633}.card-waiting{position:absolute;z-index:3;inset:180px 20%;text-align:center}.card-waiting h2,.card-showdown h2{font:34px "Archivo Black";text-transform:uppercase}.card-deck-stack{position:relative;width:80px;height:100px;margin:0 auto 30px}.card-deck-stack span{position:absolute;inset:0;border:3px solid var(--card-cream);border-radius:6px;background:repeating-linear-gradient(45deg,#ff6f91 0 5px,#182741 6px 11px);transform:translate(calc(var(--i,0)*3px),calc(var(--i,0)*-3px))}.card-showdown{padding:25px;color:var(--card-ink);border:3px double var(--card-ink);background:var(--card-gold);box-shadow:7px 7px 0 var(--card-pink)}.card-resign{position:absolute;right:30px;bottom:20px;z-index:5;color:#f3faf7;font-size:10px;text-decoration:underline}.card-table-error{margin:0 auto 15px;padding:12px;border:1px solid #ff6f91;color:#fff;background:#7f2344}.card-table-chat{max-width:680px;margin:30px auto}.card-arcade--quiet{min-height:100vh}
@media(max-width:850px){.card-game-grid{grid-template-columns:1fr 1fr}.card-marquee{grid-template-columns:50px 1fr}.card-marquee__sun{display:none}.card-lobby-band{grid-template-columns:1fr}.card-table__felt{min-height:680px;border-radius:60px}.playing-card{width:66px}.card-table-center{top:250px;right:5%;left:5%}.card-action-console{right:3%;left:3%}}
@media(max-width:560px){.card-table__felt:after{display:none}.card-arcade__inner{padding:25px 12px 100px}.card-marquee{min-height:330px;padding:25px 18px;grid-template-columns:25px 1fr;border-radius:25px 4px}.card-marquee h1{font-size:56px}.card-marquee__station{font-size:13px}.card-game-grid{grid-template-columns:1fr}.card-game-ticket{min-height:260px}.card-family-nav{justify-content:start;margin:25px 0}.card-table-main{padding:10px 5px 60px}.card-table__felt{min-height:650px;padding:10px;border-width:2px}.playing-card{width:54px;margin-left:-13px}.playing-card__rank{font-size:13px}.playing-card__pip{font-size:27px}.card-opponent-hand{right:2%;left:2%}.card-player-hand{overflow-x:auto;justify-content:start;padding:10px 25px}.card-action-console__buttons{flex-wrap:wrap}.card-seat--south{flex-wrap:wrap;text-align:center}.card-waiting{inset:170px 8%}.card-new-table__ticket{padding:30px 22px}}
@media(prefers-reduced-motion:reduce){.playing-card,.playing-card.is-dealt,.card-game-ticket{transition:none;transform:none;opacity:1}.card-sky{opacity:.35}}
.solitaire-foundations{position:absolute;top:-20px;right:0;display:flex;gap:4px}.solitaire-foundation{display:grid;width:48px;aspect-ratio:.7;place-items:center;border:1px dashed #fff7df77;border-radius:5px}.solitaire-foundation .playing-card{width:48px;margin:0}.solitaire-tableau{position:absolute;top:145px;right:0;left:0;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.solitaire-column{min-height:80px}.solitaire-column .playing-card{width:50px;margin:0 auto -48px}.solitaire-column .playing-card:last-child{margin-bottom:0}

/* Moon Market counter: three face-up stalls, each priced by its suit. */
.moon-market{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.moon-stall{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:2px solid var(--card-ink);border-radius:6px;background:var(--card-cream);box-shadow:4px 4px 0 var(--card-pink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.moon-stall:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--card-pink)}
.moon-stall small{color:var(--card-ink);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.card-market-ticker{margin:8px auto 0;color:#bce8df;font-size:11px;text-align:center}
.card-market-ticker em{display:block;color:#ffd6df;font-style:normal}
.solitaire-empty{display:grid;place-items:center;width:46px;height:64px;border:2px dashed #ffffff55;border-radius:5px;color:#ffffff77;font:16px "Archivo Black"}

/* The felt stacks its regions by hand: the action console (z-index 4) sits over
   the centre of the table (z-index 2) so a player's own hand always reads in
   front of the community cards. Once the hand is settled the showdown lives in
   that centre, and its rematch and lobby buttons were landing underneath the
   console -- visible, but taking clicks on `.card-player-hand` instead. A
   finished table promotes the centre above the console. Nothing in the console
   is interactive at that point, so nothing is lost behind it. */
.card-table-center--final { z-index: 6; }

/* --- Night Deck tables: shared play surface (cards worker, Sept 16) -------------
   The play form wraps the felt's regions so drag-and-drop and the action
   buttons share one submit; it must not become a flex item of its own. */
.card-play-form { display: contents; }

/* Cards already on the felt before a Turbo replace settle in place; only new
   cards run the deal transition. */
.card-table .playing-card.is-settled { transition: none; }
.card-table .playing-card.is-draggable { cursor: grab; touch-action: none; }
.card-table .playing-card.is-lifted { opacity: .35; }
.card-drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 60; margin: 0; opacity: 1;
  pointer-events: none; cursor: grabbing;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--ww-navy) 70%, transparent);
}
.card-table [data-card-drop].is-drop-ready { outline: 2px dashed var(--club-brass); outline-offset: 6px; }
.card-table [data-card-drop].is-drop-over { outline: 3px solid var(--club-brass-lit); transform: scale(1.03); }
.card-table .playing-card.is-selected { outline: 3px solid var(--club-brass-lit); outline-offset: 2px; }
.card-table .playing-card.is-winning { outline: 3px solid var(--club-brass-lit); outline-offset: 2px; transform: translateY(-6px); }
.card-table .playing-card.is-deadwood { filter: saturate(.55) brightness(.86); }
.card-table .playing-card.is-laid-off { outline: 2px dashed var(--club-celadon); outline-offset: 1px; }
.card-table .playing-card.is-mini { width: 38px; margin-left: -10px; }
.card-table .playing-card.is-mini:first-child { margin-left: 0; }
.card-table .playing-card.is-mini .playing-card__rank { font-size: 11px; }
.card-table .playing-card.is-mini .playing-card__suit { width: 8px; height: 8px; }
.card-table .playing-card.is-mini .playing-card__corner--lower,
.card-table .playing-card.is-mini .playing-card__pip { display: none; }

.card-bets, .card-tell, .card-ticker { flex-basis: 100%; margin: 0; color: var(--club-celadon); font-size: 12px; text-align: center; }
.card-bets { display: flex; justify-content: center; gap: 18px; }
.card-bets span { display: inline-flex; gap: 6px; align-items: baseline; }
.card-bets strong { color: var(--card-cream); font: 600 15px var(--ww-mono); font-variant-numeric: tabular-nums; }
.card-bets .is-live strong { color: var(--club-brass-lit); }
.card-ticker { display: grid; gap: 2px; padding: 0; list-style: none; }
.card-ticker li:last-child { color: var(--card-cream); }
.card-ticker b { color: var(--club-brass-lit); font-weight: 600; }
.card-tell b { color: var(--club-brass-lit); }
.card-hand-label { color: var(--club-brass-lit); }
.card-button-chip {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px;
  border-radius: 50%; color: var(--card-ink); background: var(--club-brass-lit);
  font: 700 11px var(--ww-font); vertical-align: middle;
}
.card-muck { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--club-celadon); }
.card-muck .playing-card { width: 34px; transform: rotate(-12deg); }

.card-recap {
  flex-basis: 100%; max-width: 620px; margin: 0 auto; padding: 0 14px;
  border: 1px solid var(--club-brass-dim); border-radius: 12px;
  color: var(--card-cream); background: color-mix(in oklch, var(--ww-navy) 55%, transparent);
  text-align: left;
}
.card-recap.is-fresh { border-color: var(--club-brass); }
.card-recap summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; min-height: 44px; cursor: pointer; }
.card-recap summary strong { font-size: 14px; }
.card-recap__body { display: grid; gap: 10px; padding-bottom: 12px; }
.card-recap__seat p { margin: 0 0 4px; font-size: 12px; }
.card-recap__seat b { margin-right: 6px; color: var(--club-brass-lit); }
.card-recap__seat small { color: var(--club-celadon); }
.card-recap__cards { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }

.card-fold-btn { color: var(--card-cream); background: transparent; }

/* Shared states for the table's own controls. */
.card-table :is(.card-play-btn, .card-side-btn, .gin-pile, .moon-stall) {
  min-height: var(--ww-control-min, 44px);
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-short) var(--ww-ease-out);
}
@media (hover: hover) {
  .card-table :is(.card-play-btn, .card-side-btn, .gin-pile, .moon-stall):hover:not(:disabled) { transform: translateY(-1px); border-color: var(--club-brass-lit); }
}
.card-table :is(.card-play-btn, .card-side-btn, .gin-pile, .moon-stall):active:not(:disabled) { transform: translateY(1px); }
.card-table :is(.card-play-btn, .card-side-btn, .moon-stall):disabled { opacity: .5; cursor: not-allowed; }

/* --- Gin ------------------------------------------------------------------ */
.gin-piles { display: flex; justify-content: center; gap: 22px; flex-basis: 100%; }
.gin-pile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px;
  border: 1px solid var(--club-brass-dim); border-radius: 10px;
  color: var(--club-celadon); background: color-mix(in oklch, var(--ww-navy) 35%, transparent); cursor: pointer;
}
.gin-pile:disabled { cursor: default; }
.gin-pile .playing-card { width: 64px; margin: 0; }
.gin-pile small { font-size: 11px; }
.gin-pile--empty { min-width: 84px; min-height: 120px; justify-content: center; border-style: dashed; }
.gin-hand { gap: 16px; align-items: flex-end; }
.gin-group { display: flex; }
.gin-group .playing-card { margin-left: -22px; }
.gin-group .playing-card:first-child { margin-left: 0; }
.gin-group--deadwood { padding-left: 14px; border-left: 1px dashed var(--club-brass-dim); }
@media (max-width: 560px) {
  .gin-hand { gap: 10px; }
  .gin-group .playing-card { margin-left: -24px; }
  .gin-pile .playing-card { width: 50px; }
}

/* --- War of Bids ------------------------------------------------------------ */
.bid-rival { flex-wrap: wrap; gap: 4px; }
.bid-rival .playing-card.is-mini { margin-left: 0; }
.bid-prize {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 18px;
  border: 1px solid var(--club-brass); border-radius: 14px; background: color-mix(in oklch, var(--ww-navy) 40%, transparent);
}
.bid-prize__cards { display: flex; }
.bid-prize__cards .playing-card { width: 82px; margin-left: -40px; }
.bid-prize__cards .playing-card:first-child { margin-left: 0; }
.bid-prize__value { margin: 0; color: var(--card-cream); font-size: 13px; }
.bid-prize__value strong { margin-right: 6px; color: var(--club-brass-lit); font: 700 28px var(--ww-display); font-variant-numeric: tabular-nums; }
.bid-committed { display: flex; flex-basis: 100%; justify-content: center; gap: 16px; color: var(--club-celadon); font-size: 12px; }
.bid-committed .is-in { color: var(--club-brass-lit); }
.bid-hand .playing-card { margin-left: -30px; }
.bid-hand .playing-card:first-child { margin-left: 0; }
@media (max-width: 560px) {
  .bid-hand { flex-wrap: wrap; justify-content: center; row-gap: 10px; overflow: visible; }
  .bid-hand .playing-card { width: 44px; margin-left: -12px; }
  .bid-prize__cards .playing-card { width: 60px; margin-left: -30px; }
}

/* --- Signal Fire -------------------------------------------------------------- */
.signal-fires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex-basis: 100%; max-width: 620px; margin: 0 auto; }
.signal-fire {
  display: grid; gap: 8px; padding: 12px; border: 1px solid var(--club-brass-dim); border-radius: 12px;
  color: var(--card-cream); background: color-mix(in oklch, var(--ww-navy) 40%, transparent); text-align: left;
}
.signal-fire__head { display: flex; align-items: baseline; gap: 8px; }
.signal-fire__head strong { margin-left: auto; font: 700 30px var(--ww-display); font-variant-numeric: tabular-nums; }
.signal-fire__head small { color: var(--club-celadon); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.signal-fire--danger { border-color: var(--club-oxblood); }
.signal-fire--danger .signal-fire__head small { color: var(--ww-danger); }
.signal-fire--banked { border-color: var(--club-brass); }
.signal-fire--burned { border-style: dashed; }
.signal-fire--burned .signal-fire__head strong { color: var(--ww-danger); }
.signal-meter { position: relative; height: 12px; overflow: hidden; border: 1px solid var(--club-brass-dim); border-radius: 6px; background: var(--ww-navy); }
.signal-meter__fill {
  position: absolute; inset: 0; transform-origin: left center;
  transform: scaleX(calc(var(--signal) / var(--signal-limit)));
  background: linear-gradient(90deg, var(--club-brass), var(--club-oxblood));
  transition: transform var(--ww-dur-long) var(--ww-ease-play);
}
.signal-meter__floor { position: absolute; top: -2px; bottom: -2px; left: calc(var(--signal-floor) / var(--signal-limit) * 100%); width: 2px; background: var(--card-cream); }
.signal-fire__pile { display: flex; align-items: center; gap: 10px; min-height: 64px; color: var(--club-celadon); font-size: 11px; }
.signal-fire__pile .playing-card { width: 44px; margin: 0; }
.signal-fire__pile .playing-card.is-fresh { animation: signal-drop var(--ww-dur-long) var(--ww-ease-play); }
@keyframes signal-drop { from { transform: translateY(-18px) rotate(-8deg); opacity: 0; } }
@media (max-width: 560px) {
  .signal-fires { grid-template-columns: 1fr; }
  .signal-fire__head strong { font-size: 24px; }
}

/* --- Moon Market ------------------------------------------------------------- */
.moon-ledger { width: min(100%, 420px); margin: 0 auto; border-collapse: collapse; color: var(--card-cream); font-size: 13px; }
.moon-ledger :is(th, td) { padding: 6px 8px; border-bottom: 1px solid var(--club-brass-dim); text-align: right; }
.moon-ledger :is(thead th) { color: var(--club-celadon); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.moon-ledger tbody th, .moon-ledger tfoot th { text-align: left; font-weight: 600; }
.moon-ledger td { font-variant-numeric: tabular-nums; }
.moon-ledger td strong { font: 700 16px var(--ww-mono); }
.moon-ledger td small { margin-left: 4px; color: var(--club-brass-lit); }
.moon-ledger .is-leading { color: var(--club-brass-lit); font-weight: 700; }
.moon-suit { display: inline-block; width: 1.2em; }
.moon-suit.is-red { color: var(--ww-danger); }
.moon-stall:disabled { cursor: default; }
.moon-stall__gain { color: var(--club-oxblood); }
.moon-sell { white-space: nowrap; }

/* The select box stays for keyboards and screen readers, but the card itself
   shows the selection (lift and brass ring) and takes the focus ring. */
.card-table .playing-card__select input { opacity: 0; }
.card-table .card-recap .playing-card.is-mini { margin-left: 0; }
.moon-ledger thead th:first-child { text-align: left; }
@media (max-width: 560px) {
  .gin-group .playing-card { margin-left: -29px; }
  .gin-hand { gap: 8px; padding-inline: 2px; }
  .moon-market { gap: 8px; flex-wrap: nowrap; }
  .moon-stall { padding: 6px; }
  .moon-stall .playing-card { width: 48px; }
  .moon-stall small { font-size: 9px; }
}
.signal-fire__pile .playing-card { width: 52px; }
.signal-fire__pile .playing-card .playing-card__corner--lower { display: none; }
.card-table .is-bumped { animation: card-bump var(--ww-dur-long) var(--ww-ease-play); }
@keyframes card-bump { 40% { transform: scale(1.12); } }
.card-recap summary.is-bumped { animation-name: card-recap-in; }
@keyframes card-recap-in { from { opacity: 0; transform: translateY(-8px); } }

/* --- Moonlight Eights ------------------------------------------------------------- */
.eights-pile { display: flex; justify-content: center; align-items: flex-start; gap: 26px; flex-wrap: wrap; }
.eights-stock, .eights-discard { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eights-stock small, .eights-discard small { color: #bce8df; font-size: 11px; }
.eights-suit-tag {
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--card-gold);
  background: #11182ecc;
  color: var(--card-cream);
  font-weight: 700;
}
.eights-suit-tag--h, .eights-suit-tag--d { color: var(--card-pink); }
.eights-suit-btn { font-weight: 700; }
.eights-suit-btn--h, .eights-suit-btn--d { color: #c22947; }
.eights-board .playing-card.is-fresh { animation: card-eights-land .5s cubic-bezier(.2,.9,.2,1.2); }
@keyframes card-eights-land { from { transform: translateY(-14px) rotate(-6deg); } to { transform: translateY(0) rotate(0); } }
@media (max-width: 560px) { .eights-pile { gap: 14px; } }

/* --- Vingt-Un ---------------------------------------------------------------------- */
.vingtun-hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 600px; margin: 0 auto; }
.vingtun-seat { padding: 10px; border: 1px solid #fff7df33; border-radius: 12px; background: #11182e99; }
.vingtun-seat.is-bust { border-color: var(--card-pink); }
.vingtun-seat__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vingtun-lead { padding: 2px 7px; border-radius: 12px; background: var(--card-gold); color: var(--card-ink); font-size: 9px; font-weight: 700; }
.vingtun-total { margin-left: auto; font: 22px "IBM Plex Mono", monospace; font-weight: 700; color: var(--card-gold); }
.vingtun-total.is-bust { color: var(--card-pink); }
.vingtun-cards { display: flex; justify-content: center; min-height: 90px; }
.vingtun-seat small { display: block; margin-top: 6px; color: #bce8df; font-size: 11px; }
@media (max-width: 560px) { .vingtun-hands { gap: 8px; } .vingtun-cards { transform: scale(0.82); transform-origin: top center; } }

/* --- Sixty-Six --------------------------------------------------------------------- */
.sixtysix-table { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; }
.sixtysix-trump, .sixtysix-trick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sixtysix-trump small, .sixtysix-trick small, .sixtysix-score small { color: #bce8df; font-size: 11px; }
.sixtysix-trump-card { transform: rotate(90deg) scale(0.72); }
.sixtysix-empty { min-height: 90px; display: grid; place-items: center; width: 70px; border: 1px dashed #fff7df44; border-radius: 8px; }
.sixtysix-scores { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
.sixtysix-score { display: flex; flex-direction: column; align-items: center; }
.sixtysix-score strong { font: 22px "IBM Plex Mono", monospace; font-weight: 700; color: var(--card-gold); }
@media (max-width: 560px) { .sixtysix-table { gap: 14px; } }
/* Cardboard Box — Parlor, Diorama, Daily Delivery & Trading Post Stylesheet
   Follows WordWrangle European Members' Club Design System Tokens */

.cb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* Header & Delivery Stamp Bar */
.cb-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--ww-line);
  padding-bottom: 1.5rem;
}

.cb-title-group {
  max-width: 640px;
}

.cb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--club-brass);
  margin-bottom: 0.25rem;
}

.cb-title {
  font-family: var(--ww-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ww-ink);
  margin: 0 0 0.5rem;
}

.cb-subtitle {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ww-ink-soft);
  margin: 0;
}

.cb-stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.cb-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  font-family: var(--ww-mono);
  font-size: 0.8125rem;
  color: var(--ww-ink);
  min-height: var(--ww-control-min);
}

.cb-stat-pill strong {
  font-size: 0.9375rem;
  color: var(--club-brass);
}

/* Tab Navigation */
.cb-nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ww-line);
  margin-bottom: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.cb-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: var(--ww-font);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ww-ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  min-height: var(--ww-control-min);
  transition: color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .cb-nav-tab:hover {
    color: var(--ww-ink);
    border-bottom-color: var(--ww-line);
  }
}

.cb-nav-tab--active {
  color: var(--club-brass);
  border-bottom-color: var(--club-brass);
  font-weight: 600;
}

/* Two-Column Parlor Layout */
.cb-parlor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .cb-parlor-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

/* 3D Diorama Stage Card */
.cb-stage-card {
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.cb-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cb-stage-title {
  font-family: var(--ww-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ww-ink);
  margin: 0;
}

.cb-stage-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cb-stage-canvas-mount {
  width: 100%;
  height: 480px;
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--ww-paper) 80%, black);
  cursor: grab;
  position: relative;
}

.cb-stage-canvas-mount:active {
  cursor: grabbing;
}

/* Action Banner in Stage */
.cb-stage-banner {
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  border: 1px solid var(--club-brass);
  font-size: 0.875rem;
  color: var(--ww-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cb-toolbar-actions {
  display: inline-flex;
  gap: 0.375rem;
}

/* Buttons */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-font);
  font-size: 0.875rem;
  font-weight: 500;
  min-height: var(--ww-control-min);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--ww-line);
  background: var(--ww-paper);
  color: var(--ww-ink);
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .cb-btn:hover {
    background: var(--ww-paper-2);
    border-color: var(--club-brass);
  }
}

.cb-btn:active {
  transform: translateY(1px);
}

.cb-btn:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

.cb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cb-btn--primary {
  background: var(--club-brass);
  border-color: var(--club-brass);
  color: var(--ww-navy);
  font-weight: 600;
}

@media (hover: hover) {
  .cb-btn--primary:hover {
    background: color-mix(in oklch, var(--club-brass) 85%, white);
    border-color: var(--club-brass);
  }
}

.cb-btn--danger {
  border-color: var(--ww-danger);
  color: var(--ww-danger-text);
}

@media (hover: hover) {
  .cb-btn--danger:hover {
    background: color-mix(in oklch, var(--ww-danger) 15%, var(--ww-paper));
  }
}

.cb-btn--sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  min-height: 36px;
}

/* Side Column: Today's Delivery & Collection Chest */
.cb-side-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Unboxing Parcel Card */
.cb-parcel-card {
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1.25rem;
  position: relative;
}

.cb-parcel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cb-parcel-canvas-mount {
  width: 100%;
  height: 280px;
  background: color-mix(in oklch, var(--ww-paper) 90%, black);
  border-radius: var(--ww-radius-sm);
  margin-bottom: 1rem;
  position: relative;
}

.cb-parcel-prompt {
  font-size: 0.875rem;
  color: var(--ww-ink-soft);
  margin-bottom: 0.75rem;
  text-align: center;
}

.cb-parcel-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

/* Result Reveal Card */
.cb-reveal-card {
  background: color-mix(in oklch, var(--ww-paper) 80%, black);
  border: 1px solid var(--club-brass);
  border-radius: var(--ww-radius-sm);
  padding: 1rem;
  margin-top: 1rem;
}

.cb-reveal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.cb-reveal-title {
  font-family: var(--ww-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ww-ink);
  margin: 0;
}

.cb-reveal-blurb {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ww-ink-soft);
  margin: 0 0 0.75rem;
}

.cb-reveal-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  color: var(--ww-ink-soft);
}

/* Stamped Postal Receipt (for already unboxed days) */
.cb-receipt-card {
  background: var(--ww-paper-2);
  border: 1px dashed var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1.25rem;
  position: relative;
}

.cb-stamp-badge {
  display: inline-block;
  border: 2px solid var(--club-brass);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-family: var(--ww-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--club-brass);
  letter-spacing: 0.08em;
  transform: rotate(-3deg);
  margin-bottom: 0.75rem;
}

/* Collection Chest Items Grid */
.cb-chest-card {
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1.25rem;
}

.cb-chest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cb-chest-title {
  font-family: var(--ww-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ww-ink);
  margin: 0;
}

.cb-chest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.cb-item-card {
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  cursor: pointer;
  position: relative;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .cb-item-card:hover {
    transform: translateY(-2px);
    border-color: var(--club-brass);
  }
}

.cb-item-card--common { border-top: 3px solid var(--ww-line); }
.cb-item-card--uncommon { border-top: 3px solid var(--ww-emerald); }
.cb-item-card--rare { border-top: 3px solid var(--ww-blue); }
.cb-item-card--vintage { border-top: 3px solid var(--ww-violet); }
.cb-item-card--mythic { border-top: 3px solid var(--club-brass); }

.cb-item-icon {
  font-size: 1.5rem;
  color: var(--club-brass);
  margin: 0.25rem 0;
}

.cb-item-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ww-ink);
  line-height: 1.2;
}

.cb-item-condition {
  font-family: var(--ww-mono);
  font-size: 0.6875rem;
  color: var(--ww-ink-soft);
}

/* Rarity Pills */
.cb-rarity-pill {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 2px;
  font-family: var(--ww-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cb-rarity-pill--common { background: color-mix(in oklch, var(--ww-line) 30%, transparent); color: var(--ww-ink-soft); }
.cb-rarity-pill--uncommon { background: color-mix(in oklch, var(--ww-emerald) 20%, transparent); color: var(--ww-emerald); }
.cb-rarity-pill--rare { background: color-mix(in oklch, var(--ww-blue) 20%, transparent); color: var(--ww-blue); }
.cb-rarity-pill--vintage { background: color-mix(in oklch, var(--ww-violet) 20%, transparent); color: var(--ww-violet); }
.cb-rarity-pill--mythic { background: color-mix(in oklch, var(--club-brass) 25%, transparent); color: var(--club-brass); }

/* Inspect Modal Dialog */
.cb-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 520px;
  width: 90%;
  background: var(--ww-paper);
  color: var(--ww-ink);
  border: 1px solid var(--club-brass);
  border-radius: var(--ww-radius);
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.cb-dialog::backdrop {
  background: rgba(4, 10, 20, 0.75);
  backdrop-filter: blur(4px);
}

.cb-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cb-dialog-title {
  font-family: var(--ww-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.cb-dialog-3d-mount {
  width: 100%;
  height: 220px;
  background: color-mix(in oklch, var(--ww-paper-2) 80%, black);
  border-radius: var(--ww-radius-sm);
  margin-bottom: 1rem;
  position: relative;
}

.cb-inspect-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
}

.cb-inspect-meta-label {
  font-family: var(--ww-mono);
  font-size: 0.6875rem;
  color: var(--ww-ink-soft);
  text-transform: uppercase;
}

.cb-inspect-meta-val {
  color: var(--ww-ink);
  font-weight: 500;
}

/* Trading Post Styles */
.cb-trade-card {
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.cb-trade-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cb-trader-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--club-brass);
}

.cb-trade-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .cb-trade-row {
    grid-template-columns: 1fr;
  }
}

.cb-swap-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--club-brass);
}

.cb-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--ww-line);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
}

.cb-empty-icon {
  font-size: 2.5rem;
  color: var(--club-brass);
  margin-bottom: 0.75rem;
}
/* The Emerald Lounge tables (casino_games/_table): Pixel Slots, Power Pair,
   Island Shuffle. The frame is `.ww-casino-table`, whose material lives in
   zzz-club; everything inside uses the `casino-` names, so none of the older
   `.ww-reel` / `.ww-flip-card` / `.ww-egg` rules still in the theme layers
   reach it. Game motion (a reel, a card) may overshoot; the buttons and the
   status lines move like chrome. */

.casino-table {
  display: grid;
  gap: 1.1rem;
}

.casino-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.casino-head h1 {
  margin: .15rem 0 0;
  font-family: var(--ww-display);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ww-ink);
}

.casino-stake {
  margin: 0;
  font-family: var(--ww-mono);
  font-size: .78rem;
  color: var(--club-brass-lit);
  font-variant-numeric: tabular-nums;
}

.casino-error {
  margin: 0;
  padding: .6rem .8rem;
  border-left: 3px solid var(--ww-danger);
  color: var(--ww-danger-text);
  background: color-mix(in oklch, var(--ww-danger) 10%, transparent);
}

.casino-status,
.casino-note,
.casino-turn {
  margin: 0;
  color: var(--ww-ink);
  font-weight: 650;
  line-height: 1.4;
}

.casino-note { color: var(--ww-ink-soft); font-weight: 500; font-size: .92rem; }

.casino-status.is-pending,
.casino-slot-outcome.is-pending { visibility: hidden; }

.casino-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.casino-actions form { margin: 0; }

.casino-outcome {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--club-brass-dim);
  color: var(--ww-ink);
}

.casino-outcome > span { color: var(--ww-ink-soft); }
.casino-outcome.is-win { border-top-color: var(--club-brass); }
.casino-outcome .casino-actions { margin-top: .5rem; }

/* --- Lobby ------------------------------------------------------------------ */

/* The stake row wraps so the two-player choice gets its own line instead of
   being squeezed between the select and Play in a narrow card. */
.ww-casino-bet { flex-wrap: wrap; align-items: center; }

.casino-bet-table {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: .5rem;
  min-height: var(--ww-control-min);
  font-size: .92rem;
  color: var(--ww-ink);
  cursor: pointer;
}

/* --- Pixel Slots ---------------------------------------------------------- */

.casino-machine {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1.4rem 1rem 1.2rem;
  border: 1px solid var(--club-brass-dim);
  border-top-color: var(--club-brass);
  border-radius: var(--ww-radius);
  color: var(--ww-ink);
  background: color-mix(in oklch, var(--ww-navy) 88%, var(--club-walnut));
}

.casino-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 6.25rem));
  gap: .6rem;
  justify-content: center;
}

.casino-reel {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: .7rem;
  border: 1px solid var(--club-brass-dim);
  color: var(--club-brass-lit);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--ww-navy) 70%, transparent), transparent 28%, transparent 72%, color-mix(in oklch, var(--ww-navy) 70%, transparent)),
    color-mix(in oklch, var(--club-walnut) 60%, var(--ww-navy));
  font-size: clamp(.9rem, 3.4vw, 1.15rem);
}

.casino-reel--cherry { color: color-mix(in oklch, var(--ww-danger) 80%, var(--club-travertine)); }
.casino-reel--lemon { color: var(--ww-gold); }
.casino-reel--diamond { color: var(--ww-sky); }
.casino-reel--seven { color: var(--club-brass-lit); }

.casino-reel__final,
.casino-reel__strip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.casino-reel__final .ww-mark { width: 3.2em; height: 3.2em; }

.casino-reel__strip {
  inset: 0 0 auto;
  grid-auto-rows: 5.2em;
  opacity: 0;
  color: var(--club-brass-lit);
}

.casino-reel__strip .ww-mark { width: 2.6em; height: 2.6em; opacity: .7; }

.casino-machine.is-idle .casino-reel__final { opacity: .45; }

/* Spinning: the drawn strip scrolls, the resting mark waits out of sight. The
   loop is functional -- it runs only while the server's answer is being
   staged -- so it is the one infinite animation on the table. */
.casino-reel.is-spinning .casino-reel__final { opacity: 0; }
.casino-reel.is-spinning .casino-reel__strip {
  opacity: 1;
  animation: casino-reel-roll 360ms linear infinite;
  animation-delay: var(--casino-reel-offset, 0ms);
}

.casino-reel.is-anticipating {
  border-color: var(--club-brass);
  box-shadow: inset 0 0 0 1px var(--club-brass);
}

.casino-reel.is-anticipating .casino-reel__strip { animation-duration: 520ms; }

.casino-reel.is-landed .casino-reel__final {
  animation: casino-reel-land var(--ww-dur-long) var(--ww-ease-play) both;
}

@keyframes casino-reel-roll {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

@keyframes casino-reel-land {
  0% { transform: translateY(-42%); opacity: .2; }
  60% { transform: translateY(6%); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.casino-machine.is-win.is-settled:not(.is-spinning) .casino-reels {
  border-radius: .9rem;
  outline: 1px solid var(--club-brass);
  outline-offset: .35rem;
}

.casino-slot-outcome {
  display: grid;
  gap: .2rem;
  min-height: 3.2rem;
  text-align: center;
  color: var(--ww-ink);
}

.casino-slot-outcome span { color: var(--ww-ink-soft); font-size: .92rem; }
.casino-machine.is-win .casino-slot-outcome strong { color: var(--club-brass-lit); }

.casino-machine__controls { display: grid; justify-items: center; gap: .5rem; }
.casino-machine__controls form { margin: 0; }
.casino-spin { min-width: 13rem; }

.casino-paytable {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  color: var(--ww-ink);
  font-variant-numeric: tabular-nums;
}

.casino-paytable caption {
  padding-bottom: .5rem;
  text-align: left;
  font-weight: 700;
  color: var(--ww-ink);
}

.casino-paytable th,
.casino-paytable td {
  padding: .45rem .5rem;
  border-top: 1px solid var(--ww-line);
  text-align: left;
}

.casino-paytable thead th { color: var(--ww-ink-soft); font-weight: 600; font-size: .8rem; }
.casino-paytable td { font-family: var(--ww-mono); white-space: nowrap; }
.casino-paytable tbody th { font-weight: 600; }
.casino-paytable tbody th > span:last-child { display: block; }

.casino-paytable__marks {
  display: flex;
  gap: .15rem;
  color: var(--club-brass-lit);
  font-size: 1.1rem;
}

.casino-paytable tr.is-hit th,
.casino-paytable tr.is-hit td {
  color: var(--club-brass-lit);
  background: color-mix(in oklch, var(--club-brass) 12%, transparent);
}

@media (min-width: 40rem) {
  .casino-paytable__marks { display: inline-flex; min-width: 4.2rem; margin-right: .5rem; vertical-align: middle; }
  .casino-paytable tbody th > span:last-child { display: inline; vertical-align: middle; }
  .casino-reels { grid-template-columns: repeat(3, minmax(0, 7.75rem)); gap: .8rem; }
  .casino-reel { font-size: 1.35rem; }
}

/* --- Power Pair ------------------------------------------------------------- */

.casino-pair-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
}

.casino-turns {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.casino-turns__pip {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  border: 1px solid var(--club-brass);
}

.casino-turns__pip.is-used { background: var(--club-brass); }

.casino-turns__label {
  margin-left: .4rem;
  font-family: var(--ww-mono);
  font-size: .85rem;
  color: var(--ww-ink-soft);
  font-variant-numeric: tabular-nums;
}

.casino-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.casino-tiers li {
  display: grid;
  padding: .3rem .6rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  font-size: .78rem;
  color: var(--ww-ink-soft);
}

.casino-tiers strong { color: var(--ww-ink); font-size: .9rem; }
.casino-tiers li.is-live { border-color: var(--club-brass); }
.casino-tiers li.is-live strong { color: var(--club-brass-lit); }
.casino-tiers li.is-gone { opacity: .55; }
.casino-tiers li.is-gone strong { text-decoration: line-through; }

.casino-score {
  display: flex;
  gap: .5rem;
}

.casino-score > div {
  display: grid;
  min-width: 6.5rem;
  padding: .35rem .7rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
}

.casino-score > div.is-turn { border-color: var(--club-brass); }
.casino-score span { font-size: .8rem; color: var(--ww-ink-soft); }
.casino-score strong { font-family: var(--ww-mono); font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.casino-pair-form { margin: 0; }

.casino-pair-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  max-width: 32rem;
  margin-inline: auto;
  perspective: 900px;
}

@media (max-width: 30rem) {
  .casino-pair-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
}

.casino-card {
  position: relative;
  display: block;
  min-height: var(--ww-control-min);
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: none;
  color: var(--ww-ink);
  cursor: pointer;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out);
}

/* A face-up card is not a broken control, it is a card that has been played:
   it keeps full ink. (The global disabled treatment would grey the faces.) */
.casino-table .casino-card:disabled { cursor: default; filter: none; opacity: 1; }

.casino-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--ww-dur-long) var(--ww-ease-play);
}

.casino-card__back,
.casino-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.casino-card__back {
  border: 1px solid var(--club-brass-dim);
  background-color: var(--club-oxblood);
  background-image: var(--club-card-back);
  background-size: cover;
  border-radius: .75rem;
}

.casino-card__number {
  position: absolute;
  top: .35rem;
  left: .45rem;
  padding: 0 .3rem;
  border-radius: .3rem;
  font-family: var(--ww-mono);
  font-size: .72rem;
  color: var(--club-travertine);
  background: color-mix(in oklch, var(--club-walnut) 70%, transparent);
}

.casino-card__face {
  transform: rotateY(180deg);
  border: 1px solid var(--club-brass);
  border-radius: .75rem;
  color: var(--club-walnut);
  background: var(--club-travertine);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
}

.casino-card__face .ww-mark { width: 1.35em; height: 1.35em; }

.casino-card.is-up .casino-card__inner,
.casino-card.is-peek .casino-card__inner { transform: rotateY(180deg); }

.casino-card.is-veiled:not(.is-peek) .casino-card__inner { transform: none; }

.casino-card.is-matched .casino-card__face {
  border-color: var(--club-jade);
  color: var(--club-jade);
  background: var(--club-celadon);
}

.casino-card.is-unclaimed .casino-card__face { opacity: .6; }

.casino-card.is-fresh .casino-card__inner { animation: casino-card-turn var(--ww-dur-long) var(--ww-ease-play) both; }
.casino-card.is-flipping .casino-card__inner { transform: rotateY(90deg); transition-duration: var(--ww-dur-short); }
.casino-card.is-pop .casino-card__face { animation: casino-card-pop var(--ww-dur-long) var(--ww-ease-play) both; }

@keyframes casino-card-turn {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(180deg); }
}

@keyframes casino-card-pop {
  0% { transform: rotateY(180deg) scale(1); }
  45% { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}

@media (hover: hover) {
  .casino-card:not([disabled]):hover { transform: translateY(-2px); }
  .casino-card:not([disabled]):hover .casino-card__back { border-color: var(--club-brass); }
}

.casino-card:not([disabled]):active { transform: translateY(1px); }

.casino-table.is-replaying .casino-card { cursor: progress; }

/* --- Island Shuffle --------------------------------------------------------- */

.casino-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.casino-ladder__rung {
  display: grid;
  gap: .05rem;
  padding: .45rem .55rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink-soft);
  font-variant-numeric: tabular-nums;
}

.casino-ladder__stage { font-size: .72rem; }
.casino-ladder__rung strong { font-family: var(--ww-mono); font-size: 1.15rem; color: var(--ww-ink); }
.casino-ladder__rung small { font-family: var(--ww-mono); font-size: .75rem; }
.casino-ladder__rung.is-current { border-color: var(--club-brass); }
.casino-ladder__rung.is-current strong { color: var(--club-brass-lit); }
.casino-ladder__rung.is-found { border-color: var(--club-jade); background: color-mix(in oklch, var(--club-jade) 22%, transparent); }

.casino-spots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.casino-spot-form { display: grid; margin: 0; }

.casino-spot {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .3rem;
  min-height: 9rem;
  padding: 1rem .5rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius);
  color: var(--club-brass-lit);
  background: color-mix(in oklch, var(--ww-navy-2) 85%, var(--club-walnut));
  text-align: center;
  font: inherit;
}

.casino-spot strong { color: var(--ww-ink); font-size: 1rem; }
.casino-spot small { color: var(--ww-ink-soft); font-size: .78rem; font-weight: 600; }
.casino-spot .casino-spot__mark { width: 3.4rem; height: 3.4rem; }

button.casino-spot {
  cursor: pointer;
  transition: transform var(--ww-dur-short) var(--ww-ease-out), border-color var(--ww-dur-short) var(--ww-ease-out);
}

@media (hover: hover) {
  button.casino-spot:not([disabled]):hover { transform: translateY(-3px); border-color: var(--club-brass); }
}

button.casino-spot:active,
button.casino-spot.is-pressed { transform: translateY(1px); }
button.casino-spot[disabled] { cursor: not-allowed; opacity: .6; }

.casino-spot.is-picked { border-color: var(--club-brass); box-shadow: inset 0 0 0 1px var(--club-brass); }
.casino-spot.is-opened { opacity: .6; border-style: dashed; }
.casino-spot.is-opened .casino-spot__mark { opacity: .35; }

.casino-spot.is-prize {
  border-color: var(--club-brass-lit);
  color: var(--club-walnut);
  background: var(--club-brass-lit);
}

.casino-spot.is-prize strong,
.casino-spot.is-prize small { color: var(--club-walnut); }

.casino-spot.is-fresh .casino-spot__mark { animation: casino-spot-lift var(--ww-dur-long) var(--ww-ease-play) both; }

@keyframes casino-spot-lift {
  from { transform: translateY(35%) scale(.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.casino-trail {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: var(--ww-ink-soft);
}

.casino-trail li { padding-left: .7rem; border-left: 2px solid var(--club-brass-dim); }
.casino-trail li.is-found { border-left-color: var(--club-jade); }
.casino-trail li.is-found strong { color: var(--ww-success-text); }
.casino-trail li.is-missed strong { color: var(--ww-danger-text); }

@media (max-width: 30rem) {
  .casino-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casino-spots { gap: .45rem; }
  .casino-spot { min-height: 7.5rem; padding-inline: .25rem; }
  .casino-spot .casino-spot__mark { width: 2.6rem; height: 2.6rem; }
  .casino-actions > form, .casino-actions > .ww-btn { flex: 1 1 100%; }
  .casino-actions .ww-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .casino-card__inner { transition: none; }
  .casino-reel.is-spinning .casino-reel__strip { animation: none; }
}

/* The lobby's odds panel. It was the one pale-mint block left in the room;
   it is a hairline section like every other rule sheet now. */
.casino-odds {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink);
  background: color-mix(in oklch, var(--ww-navy-2) 70%, transparent);
}

.casino-odds summary {
  min-height: var(--ww-control-min);
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--club-brass-lit);
}

@media (hover: hover) {
  .casino-odds summary:hover { color: var(--ww-ink); }
}

.casino-odds p {
  margin-top: .6rem;
  max-width: 68ch;
  line-height: 1.55;
  color: var(--ww-ink-soft);
}
/* The private-invitation panel (shared/_challenge_link). It is shown by every
   game while a private match waits, so it lands on walnut, felt, slate and
   paper alike -- tokens only, no surface of its own beyond a quiet inset. */
.ww-invite {
  margin: .9rem 0 0;
  padding: .85rem .95rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  text-align: left;
}
.ww-invite-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
}
.ww-invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
/* The link is long and never typed into, so it may shrink to its ellipsis
   before the two buttons beside it give up any width. */
.ww-invite-field {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  font: .875rem/1.4 var(--ww-mono);
  text-overflow: ellipsis;
}
.ww-invite-note {
  margin: .55rem 0 0;
  font-size: .75rem;
  color: var(--ww-ink-soft);
}
/* The feedback line is coloured globally for the dark result-share card; on
   this panel it has to follow whichever ink the panel itself is carrying. */
.ww-invite .ww-share-feedback { color: var(--ww-ink-soft); }

/* The ways to hand the link over. On a phone the two links sit side by side
   at half the panel each; they never wrap their labels. */
.ww-invite-send {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: .5rem;
  margin-top: .75rem;
}
.ww-invite-send-link {
  justify-content: center;
  gap: .45rem;
  white-space: nowrap;
}
.ww-invite-email {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ww-line);
}
/* Typed into, unlike the link field, so it takes the body face and the
   16px floor that keeps iOS from zooming the page on focus. */
.ww-invite-email .ww-invite-field {
  font: 1rem/1.4 var(--ww-font);
  min-height: var(--ww-control-min);
}
.ww-invite-email .ww-invite-field:user-invalid {
  border-color: var(--ww-danger);
}
.ww-invite-mode {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin: 0 0 .7rem;
  font-size: .875rem;
  color: var(--ww-ink);
}
.ww-invite-mode i { color: var(--club-brass); }
/* Chat + panel styling */

.ww-panel {
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
  overflow: hidden;
}

.ww-panel-header {
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(99, 102, 241, 0.10));
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

.ww-panel-title {
  font-weight: 800;
  color: #111827;
}

.ww-panel-subtitle {
  font-size: 0.85rem;
  color: #4b5563;
  margin-top: 0.2rem;
}

.ww-chat-messages {
  max-height: 280px;
  overflow: auto;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(249, 250, 251, 0.92), rgba(255, 255, 255, 0.96));
}

.ww-chat-form {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(229, 231, 235, 0.8);
  background: rgba(255, 255, 255, 0.96);
}

.ww-chat-presets {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem 0.25rem 1rem;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(229, 231, 235, 0.8);
}

.ww-btn-sm {
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.ww-chat-input {
  flex: 1;
  border: 1px solid rgba(209, 213, 219, 0.9);
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  outline: none;
}

.ww-chat-input:focus {
  border-color: rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.ww-message {
  padding: 0.55rem 0.7rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(229, 231, 235, 0.9);
  background: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.5rem;
}

.ww-message-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.ww-message-user {
  font-weight: 800;
  color: #111827;
  font-size: 0.85rem;
}

.ww-message-time {
  color: #6b7280;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ww-message-body {
  color: #111827;
}

.ww-message--ping {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(238, 242, 255, 0.75);
}

/* "WordBot is typing": three dots that breathe in turn. Under reduced motion
   the global guard stops them, leaving three still dots -- still readable. */
.ww-message--typing .ww-message-body {
  display: flex;
  align-items: center;
  min-height: 1.5em;
}

.ww-typing-dots {
  display: inline-flex;
  gap: 0.28rem;
}

.ww-typing-dots span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: ww-typing-dot 1.2s var(--ww-ease-in-out) infinite;
}

.ww-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.ww-typing-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes ww-typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 0.9; transform: translateY(-2px); }
}

.ww-message--system {
  border-style: dashed;
  background: rgba(243, 244, 246, 0.9);
  color: #374151;
}

/* Make "off" toggles look muted without needing icons */
.medium-actions .is-off {
  opacity: 0.55;
  filter: grayscale(30%);
}


/* One line standing in for a chat or voice panel the player switched off in
   settings. Quiet on purpose: it is a note, not an upsell. */
.ww-chat-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink-soft);
  font-size: 0.9rem;
}

.ww-chat-note a {
  color: var(--ww-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .ww-chat-note a:hover { color: var(--ww-blue); }
}

.ww-chat-note a:active { color: var(--ww-blue-deep); }

/* Chat below a full-width board (Wordweave, Trivia, Pinpoint). The column
   matches the reading width of the other tables' chat. */
.ww-match-talk {
  width: min(100%, 48rem);
  margin: 1.5rem auto 0;
  padding-inline: 1rem;
  padding-block-end: 1.5rem;
}
/* The app-wide confirm (shared/_confirm_dialog, models/confirm_dialog.js).
   Every `data-turbo-confirm` lands here instead of the browser's confirm().
   The buttons are ordinary .ww-btn controls, so their hover, focus-visible,
   active and disabled states come from the theme layers; this sheet owns the
   surface, the rhythm, and the destructive variant only. */

.ww-confirm {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(26rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  color: var(--ww-ink);
  background-color: var(--ww-navy-2);
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  border: 1px solid var(--club-brass-dim);
  border-top-color: var(--club-brass);
  border-radius: var(--ww-radius-sm);
}

.ww-confirm::backdrop {
  background: color-mix(in oklch, var(--ww-navy) 78%, transparent);
}

.ww-confirm[open] { animation: ww-confirm-in var(--ww-dur-short) var(--ww-ease-out) both; }
.ww-confirm[open]::backdrop { animation: ww-confirm-fade var(--ww-dur-short) var(--ww-ease-out) both; }

@keyframes ww-confirm-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ww-confirm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ww-confirm__form { padding: 1.35rem 1.35rem 1.2rem; }

.ww-confirm__title {
  margin: 0;
  font-family: var(--ww-display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ww-ink);
}

.ww-confirm__detail {
  margin: .5rem 0 0;
  font-size: .94rem;
  line-height: 1.45;
  color: var(--ww-ink-soft);
}

.ww-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1.25rem;
}

.ww-confirm__actions .ww-btn {
  min-height: var(--ww-control-min);
  white-space: nowrap;
}

/* The pressed-in state is shared with every .ww-btn; the destructive confirm
   swaps the brass-lit border for the danger hue so the two answers never read
   as equal weight. It is a line, not a fill -- the house primary stays. */
.ww-confirm--destructive .ww-confirm__accept {
  border-color: color-mix(in oklch, var(--ww-danger) 60%, transparent);
}

@media (hover: hover) {
  .ww-confirm--destructive .ww-confirm__accept:hover {
    border-color: var(--ww-danger);
  }
}

@media (max-width: 24rem) {
  .ww-confirm__actions { flex-direction: column-reverse; }
  .ww-confirm__actions .ww-btn { width: 100%; }
}
/* The correspondence board (correspondence/index). It borrows the lobby's
   hero, sections and challenge cards; what is here is the posting form and
   the rows, which carry a cover and a standing badge instead of an avatar. */

.ww-post-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .ww-post-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
}

.ww-post-form {
  display: grid;
  gap: .75rem;
}
.ww-post-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ww-ink);
}
.ww-post-select {
  width: 100%;
  min-height: var(--ww-control-min);
  /* 16px keeps iOS from zooming the page when the select opens. */
  font: 1rem/1.3 var(--ww-font);
  color: var(--ww-ink);
  background-color: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: .5rem .75rem;
}
.ww-post-choice {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ww-post-choice legend { margin-bottom: .25rem; }
.ww-post-option {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  min-height: var(--ww-control-min);
  padding: .6rem .75rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  cursor: pointer;
  transition: border-color var(--ww-dur-short) var(--ww-ease-out), background-color var(--ww-dur-short) var(--ww-ease-out);
}
.ww-post-option input { margin-top: .2rem; accent-color: var(--club-brass); inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.ww-post-option span { display: grid; gap: .1rem; }
.ww-post-option small { color: var(--ww-ink-soft); font-size: .8rem; }
.ww-post-option:has(input:checked) {
  border-color: var(--club-brass);
  background: color-mix(in oklch, var(--ww-paper) 88%, var(--club-brass));
}
.ww-post-option:has(input:focus-visible) {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}
@media (hover: hover) {
  .ww-post-option:hover { border-color: color-mix(in oklch, var(--ww-line) 50%, var(--club-brass)); }
}
.ww-post-option:active { transform: translateY(1px); }
.ww-post-form .ww-btn { justify-self: start; }
.ww-post-footnote {
  margin: .85rem 0 0;
  font-size: .8rem;
  color: var(--ww-ink-soft);
  overflow-wrap: anywhere;
}

.ww-post-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .ww-post-list--board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
}
.ww-post-row {
  gap: .75rem;
  min-width: 0;
  text-decoration: none;
}
.ww-post-cover {
  flex: none;
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
}
.ww-post-row-body {
  display: grid;
  gap: .1rem;
  flex: 1 1 auto;
  min-width: 0;
}
/* A game's name is the point of the row, so it wraps to a second line on a
   phone rather than losing its end to the badge; the byline can give way. */
.ww-post-row-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
}
.ww-post-row-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ww-post-row-meta { font-size: .8rem; color: var(--ww-ink-soft); }
.ww-post-accept { flex: none; margin: 0; }

.ww-post-badge {
  flex: none;
  padding: .25rem .55rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ww-ink-soft);
}
.ww-post-badge--turn {
  border-color: var(--ww-emerald-deep);
  background: var(--ww-emerald-deep);
  color: var(--ww-paper);
}
.ww-post-badge--won {
  border-color: var(--club-brass);
  color: var(--ww-ink);
}
/* Draw & Guess: a room with players down one side, the canvas in the middle,
   and the chat down the other -- the shape of every Pictionary room since
   Yahoo! Graffiti. The canvas is paper, so it stays white in the dark theme;
   everything around it is the club's slate and brass. */

/* One screen tall on a desktop, so a long chat scrolls inside its panel
   instead of stretching the page and the canvas with it. */
.dg-page { display: flex; flex-direction: column; height: 100dvh; }
.dg-page > .ww-topbar { flex-shrink: 0; }
.dg-page > .ww-layout { min-height: 0; }
.dg-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }

.dg-room {
  --dg-hairline: color-mix(in oklch, var(--club-brass) 34%, transparent);
  --dg-panel: var(--ww-paper-2);
  --dg-paper: var(--club-travertine);
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem;
  color: var(--ww-ink);
}

.dg-seat-0 { --dg-seat: var(--ww-sky); }
.dg-seat-1 { --dg-seat: var(--ww-danger); }
.dg-seat-2 { --dg-seat: var(--ww-emerald); }
.dg-seat-3 { --dg-seat: var(--ww-gold); }
.dg-seat-4 { --dg-seat: var(--ww-violet); }
.dg-seat-5 { --dg-seat: var(--club-celadon); }
.dg-seat-6 { --dg-seat: var(--club-brass); }
.dg-seat-7 { --dg-seat: var(--ww-blue); }

.dg-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--dg-seat, var(--ww-ink-soft));
  color: var(--ww-navy);
  font-weight: 800;
  font-size: 0.9rem;
}

/* --- Header: round, the word or its blanks, the clock ------------------- */

.dg-header {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) minmax(8rem, 19rem);
  align-items: center;
  gap: 0.75rem;
  min-height: 5.6rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--dg-panel);
}

.dg-header > div { display: grid; gap: 0.1rem; min-width: 0; }
.dg-header-word { justify-items: center; text-align: center; }
.dg-header-clock { justify-items: end; }

.dg-header-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.dg-header-round strong { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; }

.dg-word {
  font-family: var(--ww-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.dg-word--muted { color: var(--ww-ink-soft); }

.dg-hint {
  font-family: var(--ww-mono);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dg-letter-count { color: var(--ww-ink-soft); font-family: var(--ww-mono); font-size: 0.85rem; }

.dg-clock {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  line-height: 1;
}

.dg-room.is-hurrying .dg-clock { color: var(--ww-danger-text); }

.dg-clock-bar {
  width: 100%;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ww-ink) 12%, transparent);
  overflow: hidden;
}

.dg-clock-bar span {
  display: block;
  height: 100%;
  background: var(--club-brass);
  transform-origin: left center;
  transition: transform 250ms linear;
}

.dg-room.is-hurrying .dg-clock-bar span { background: var(--ww-danger); }

/* --- Layout -------------------------------------------------------------- */

.dg-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(16rem, 19rem);
  gap: 0.75rem;
}

.dg-side,
.dg-chat {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dg-stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: size;
}

/* --- Players ------------------------------------------------------------ */

.dg-players {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--dg-panel);
}

.dg-player-list { list-style: none; margin: 0; padding: 0.35rem; display: grid; gap: 0.2rem; }

.dg-player {
  display: grid;
  grid-template-columns: 1.1rem auto minmax(0, 1fr) auto;
  grid-template-areas: "rank avatar name state" "rank avatar score state";
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border-radius: calc(var(--ww-radius-sm) - 2px);
}

.dg-player.is-you { background: color-mix(in oklch, var(--club-brass) 12%, transparent); }
.dg-player.is-drawing { box-shadow: inset 3px 0 0 var(--club-brass); }
.dg-player.is-solved { background: color-mix(in oklch, var(--ww-emerald) 16%, transparent); }
.dg-player.is-gone { opacity: 0.5; }

.dg-player-rank { grid-area: rank; color: var(--ww-ink-soft); font-family: var(--ww-mono); font-size: 0.75rem; }
.dg-player .dg-avatar { grid-area: avatar; }
.dg-player-name { grid-area: name; overflow: hidden; font-weight: 700; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.dg-player-score { grid-area: score; display: flex; gap: 0.35rem; align-items: baseline; font-family: var(--ww-mono); font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--ww-ink-soft); }
.dg-player-score strong { color: var(--ww-ink); }
.dg-gain { color: var(--ww-success-text); font-weight: 700; animation: dg-pop var(--ww-dur-long) var(--ww-ease-play) both; }
.dg-player-state { grid-area: state; color: var(--club-brass-lit); }
.dg-player.is-solved .dg-player-state { color: var(--ww-success-text); }

.dg-badge {
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border: 1px solid var(--ww-line);
  border-radius: 999px;
  color: var(--ww-ink-soft);
  font-size: 0.65rem;
  font-weight: 600;
  vertical-align: middle;
}

.dg-leave {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: transparent;
  color: var(--ww-ink-soft);
  font-weight: 600;
  transition: color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .dg-leave:hover { color: var(--ww-ink); border-color: var(--club-brass); }
}

.dg-leave:active { transform: translateY(1px); }

/* --- Canvas ----------------------------------------------------------------- */

.dg-canvas-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  --dg-tools: 0rem;
}

.dg-canvas-wrap:has(.dg-tools) { --dg-tools: 7.6rem; }

.dg-canvas-frame {
  position: relative;
  width: min(100cqw, (100cqh - var(--dg-tools)) * 4 / 3);
  aspect-ratio: 4 / 3;
  flex: none;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius-sm);
  overflow: hidden;
  background: var(--dg-paper);
}

.dg-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}

.dg-canvas[tabindex="0"] { cursor: none; }
.dg-canvas[data-tool="fill"] { cursor: cell; }
.dg-canvas:focus-visible { outline-offset: -4px !important; }

.dg-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dg-cursor-size, 10px);
  height: var(--dg-cursor-size, 10px);
  margin: calc(var(--dg-cursor-size, 10px) / -2) 0 0 calc(var(--dg-cursor-size, 10px) / -2);
  border: 1.5px solid var(--ww-navy);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--dg-paper);
  pointer-events: none;
  transform: translate(-100px, -100px);
}

.dg-canvas[data-tool="fill"] + .dg-cursor { display: none; }

/* Word choices need their own height on small screens; the drawing's 4:3
   crop must not hide a choice or the pass button. */
.dg-phase--choosing .dg-canvas-frame { aspect-ratio: auto; }
.dg-phase--choosing .dg-canvas { position: absolute; inset: 0; }
.dg-phase--choosing .dg-overlay {
  position: relative;
  min-height: 16rem;
  background: var(--ww-paper-2);
  color: var(--ww-ink);
}

.dg-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in oklch, var(--ww-navy) 72%, transparent);
  color: var(--ww-ink);
  animation: dg-fade var(--ww-dur-short) var(--ww-ease-out) both;
}

.dg-overlay-title {
  font-family: var(--ww-display);
  font-size: clamp(1.6rem, 5cqw, 3rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
}

.dg-overlay-kicker {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--club-brass-lit);
}

.dg-overlay-note { display: grid; justify-items: center; gap: 0.7rem; text-align: center; font-size: 1.05rem; }

.dg-choose { display: grid; gap: 1rem; justify-items: center; }
.dg-choose-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.dg-choose-words form { margin: 0; }

.dg-choose-word {
  min-width: 9rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--club-brass);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  font-family: var(--ww-display);
  font-size: 1.35rem;
  font-weight: 700;
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out);
  animation: dg-pop var(--ww-dur-long) var(--ww-ease-play) both;
}

.dg-choose-words form:nth-child(2) .dg-choose-word { animation-delay: 60ms; }
.dg-choose-words form:nth-child(3) .dg-choose-word { animation-delay: 120ms; }

@media (hover: hover) {
  .dg-choose-word:hover { background: color-mix(in oklch, var(--club-brass) 22%, var(--ww-paper)); }
}

.dg-choose-word:active { transform: translateY(1px); }

/* The end of a turn is a card on solid slate, not a veil over the drawing:
   the picture comes back small beside the word. */
.dg-overlay--reveal { background: var(--ww-navy); }

.dg-turn-reveal {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  width: min(24rem, 100%);
  padding: 1rem 1.25rem;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  animation: dg-pop var(--ww-dur-long) var(--ww-ease-play) both;
}

.dg-turn-thumb {
  width: min(12rem, 60%);
  aspect-ratio: 4 / 3;
  border-radius: var(--ww-radius-sm);
  background: var(--dg-paper);
}

.dg-turn-points li { animation: dg-fade var(--ww-dur-short) var(--ww-ease-out) both; }
.dg-turn-points li:nth-child(2) { animation-delay: 120ms; }
.dg-turn-points li:nth-child(3) { animation-delay: 240ms; }
.dg-turn-points li:nth-child(n+4) { animation-delay: 360ms; }

/* The latest guesses, over the foot of the canvas, for a drawer whose chat
   is off screen. Shown on phones only. */
.dg-latest {
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.4rem;
  display: none;
  gap: 0.15rem;
  pointer-events: none;
}

.dg-latest .dg-line {
  justify-self: start;
  max-width: 100%;
  padding: 0.1rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in oklch, var(--ww-navy) 86%, transparent);
  color: var(--ww-ink);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-line .dg-line-name { color: var(--dg-seat, var(--ww-ink)); }
.dg-line--correct .dg-line-name { color: inherit; }
.dg-line--private { color: var(--ww-warning-text); }
.dg-player.is-away .dg-avatar { opacity: 0.5; }

.dg-kick { position: relative; }
.dg-kick summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; color: var(--ww-ink-soft); list-style: none; }
.dg-kick summary::-webkit-details-marker { display: none; }
.dg-kick form { position: absolute; right: 0; top: 100%; z-index: 5; margin: 0; }

.dg-kick-button {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--ww-danger);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-danger-text);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .dg-kick-button:hover { background: var(--ww-paper-2); }
}

.dg-kick-button:active { transform: translateY(1px); }
.dg-turn-reveal .dg-overlay-title { animation: dg-stamp var(--ww-dur-long) var(--ww-ease-play) 80ms both; }
.dg-turn-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; width: 100%; }
.dg-turn-points li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--ww-line); }
.dg-turn-points strong { font-family: var(--ww-mono); color: var(--ww-success-text); }
.dg-turn-points li.dg-turn-none { justify-content: center; color: var(--ww-ink-soft); border: 0; }

/* --- Tools ------------------------------------------------------------------ */

.dg-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.9rem;
  width: min(100cqw, 46rem);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--dg-panel);
}

.dg-tool-group { display: flex; gap: 0.3rem; }

.dg-tool,
.dg-size {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out);
}

.dg-size span {
  width: var(--dg-dot);
  height: var(--dg-dot);
  border-radius: 50%;
  background: var(--ww-ink);
}

@media (hover: hover) {
  .dg-tool:hover:not(:disabled),
  .dg-size:hover { border-color: var(--club-brass); }
}

.dg-tool:active,
.dg-size:active { transform: translateY(1px); }
.dg-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.dg-tool[aria-pressed="true"],
.dg-size[aria-pressed="true"] { border-color: var(--club-brass); background: color-mix(in oklch, var(--club-brass) 22%, var(--ww-paper)); color: var(--club-brass-lit); }

.dg-palette {
  display: grid;
  grid-template-columns: repeat(10, 1.55rem);
  gap: 0.2rem;
}

.dg-swatch {
  position: relative;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid color-mix(in oklch, var(--ww-ink) 25%, transparent);
  border-radius: 0.3rem;
  background: var(--dg-swatch);
  transition: transform var(--ww-dur-micro) var(--ww-ease-out);
}

/* The swatches are small; the touch target is not. */
.dg-swatch::before { content: ""; position: absolute; inset: -0.2rem; }

@media (hover: hover) {
  .dg-swatch:hover { transform: scale(1.12); }
}

.dg-swatch:active { transform: scale(0.95); }
.dg-swatch[aria-pressed="true"] { outline: 2px solid var(--club-brass-lit); outline-offset: 2px; z-index: 1; }

.dg-keys { width: min(100cqw, 46rem); font-size: 0.8rem; color: var(--ww-ink-soft); }

/* Keyboard drawing help is for keyboards; a touch screen without one does
   not need it taking a row under the canvas. */
@media (pointer: coarse) and (hover: none) {
  .dg-keys { display: none; }
}
.dg-keys summary { cursor: pointer; min-height: 2rem; display: flex; align-items: center; }
.dg-keys kbd { padding: 0 0.3rem; border: 1px solid var(--ww-line); border-radius: 0.25rem; font-family: var(--ww-mono); color: var(--ww-ink); }

/* --- Chat ----------------------------------------------------------------- */

.dg-chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--dg-panel);
  overflow: hidden;
}

.dg-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.dg-line { line-height: 1.35; animation: dg-fade var(--ww-dur-short) var(--ww-ease-out) both; }
.dg-line strong { margin-right: 0.25rem; }
.dg-line--system { color: var(--ww-ink-soft); font-style: italic; font-size: 0.82rem; }
.dg-line--correct { color: var(--ww-success-text); font-weight: 600; }
.dg-line--correct i { margin-right: 0.25rem; }
.dg-line--secret { color: var(--club-celadon); }
.dg-line--secret i { margin-right: 0.25rem; font-size: 0.75rem; }
.dg-line.is-close { color: var(--ww-warning-text); }
.dg-line-close { margin-left: 0.35rem; font-weight: 700; }
.dg-line-points { margin-left: 0.35rem; font-family: var(--ww-mono); }

.dg-chat-form {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem;
  border-top: 1px solid var(--ww-line);
}

.dg-chat-input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  font-size: 1rem;
}

.dg-chat-input[aria-invalid="true"] { border-color: var(--ww-danger); }
.dg-chat-send { min-width: 2.75rem; padding-inline: 0.8rem; }

.dg-chat-error {
  min-height: 1lh;
  margin: 0;
  padding: 0 0.6rem 0.4rem;
  color: var(--ww-danger-text);
  font-size: 0.8rem;
}

/* --- Waiting room, results, cards ---------------------------------------- */

.dg-card,
.dg-waiting {
  display: grid;
  gap: 0.9rem;
  align-content: center;
  width: min(34rem, 100%);
  margin: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius);
  background: var(--dg-panel);
}

.dg-card--narrow { width: min(30rem, calc(100% - 2rem)); }
.dg-card p,
.dg-waiting p { color: var(--ww-ink-soft); }

.dg-card-title {
  font-family: var(--ww-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
}

.dg-waiting-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.dg-waiting-actions form { margin: 0; }
.dg-rules { font-size: 0.88rem; }

.dg-results {
  grid-row: 1 / -1;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  width: min(60rem, 100%);
  margin: 0 auto;
  padding-block: 1rem 2rem;
}

.dg-results-head { text-align: center; display: grid; gap: 0.25rem; }

.dg-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 12rem));
  justify-content: center;
  align-items: end;
  gap: 0.75rem;
}

.dg-podium-step { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.dg-podium-1 { order: 2; }
.dg-podium-2 { order: 1; }
.dg-podium-3 { order: 3; }
.dg-podium-step .dg-avatar { width: 3rem; height: 3rem; font-size: 1.3rem; }
.dg-podium-1 .dg-avatar { width: 3.8rem; height: 3.8rem; font-size: 1.6rem; }
.dg-podium-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-podium-score { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; color: var(--ww-ink-soft); }

.dg-podium-block {
  width: 100%;
  display: grid;
  place-items: center;
  border: 1px solid var(--dg-hairline);
  border-bottom: 0;
  border-radius: var(--ww-radius-sm) var(--ww-radius-sm) 0 0;
  background: color-mix(in oklch, var(--dg-seat) 30%, var(--dg-panel));
  font-family: var(--ww-display);
  font-size: 1.6rem;
  font-weight: 800;
  animation: dg-rise var(--ww-dur-long) var(--ww-ease-out) both;
  transform-origin: bottom center;
}

.dg-podium-1 .dg-podium-block { height: 7rem; animation-delay: 240ms; }
.dg-podium-2 .dg-podium-block { height: 5rem; animation-delay: 120ms; }
.dg-podium-3 .dg-podium-block { height: 3.6rem; }

.dg-standings { width: min(24rem, 100%); margin: 0 auto; display: grid; gap: 0.3rem; }
.dg-standings li { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--ww-line); }
.dg-standings strong { font-family: var(--ww-mono); }

.dg-results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.dg-results-actions form { margin: 0; }

.dg-gallery { display: grid; gap: 0.75rem; }
.dg-gallery-title { font-family: var(--ww-display); font-size: 1.4rem; font-weight: 700; text-align: center; }
.dg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.dg-gallery-item { margin: 0; display: grid; gap: 0.35rem; }

.dg-gallery-canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--dg-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--dg-paper);
}

.dg-gallery-item figcaption { display: grid; font-size: 0.85rem; }
.dg-gallery-item figcaption span { color: var(--ww-ink-soft); }

/* --- Lobby ---------------------------------------------------------------- */

.dg-lobby { display: grid; gap: 1.5rem; }

.dg-lobby-head h1 {
  font-family: var(--ww-display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 0.95;
}

.dg-lobby-head p { max-width: 46rem; margin-top: 0.6rem; color: var(--ww-ink-soft); font-size: 1.05rem; }

.dg-lobby-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.dg-lobby-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in oklch, var(--club-brass) 34%, transparent);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
}

.dg-lobby-card p { color: var(--ww-ink-soft); }
.dg-lobby-card > form { margin: 0; }
.dg-lobby-title { font-family: var(--ww-display); font-size: 1.5rem; font-weight: 700; }

.dg-create summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; color: var(--club-brass-lit); font-weight: 600; }
.dg-create-form { display: grid; gap: 0.9rem; }

.dg-setup-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.dg-setup-legend { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ww-ink-soft); }

.dg-segment { display: flex; flex-wrap: wrap; gap: 0.35rem; border: 0; padding: 0; margin: 0; }
.dg-segment legend { width: 100%; }
.dg-choice-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.dg-segment-option {
  min-height: 2.75rem;
  min-width: 3rem;
  display: grid;
  place-items: center;
  padding: 0 0.8rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  cursor: pointer;
  font-weight: 600;
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .dg-segment-option:hover { border-color: color-mix(in oklch, var(--club-brass) 50%, transparent); }
}

.dg-choice-radio:checked + .dg-segment-option { border-color: var(--club-brass); background: color-mix(in oklch, var(--club-brass) 14%, var(--ww-paper)); }
.dg-choice-radio:focus-visible + .dg-segment-option { outline: 3px solid var(--ww-focus); outline-offset: 2px; }

.dg-private { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
.dg-private input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; flex: none; }
.dg-private span { display: grid; gap: 0.15rem; }
.dg-private small { color: var(--ww-ink-soft); }

.dg-room-list { display: grid; gap: 0.5rem; }

.dg-room-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out);
}

a.dg-room-row:active { transform: translateY(1px); }

@media (hover: hover) {
  a.dg-room-row:hover { border-color: var(--club-brass); }
}

.dg-room-row form { margin: 0 0 0 auto; }
.dg-room-avatars { display: flex; }
.dg-room-avatars .dg-avatar { width: 1.7rem; height: 1.7rem; font-size: 0.75rem; margin-left: -0.35rem; border: 2px solid var(--ww-paper-2); }
.dg-room-avatars .dg-avatar:first-child { margin-left: 0; }
.dg-room-info { display: grid; gap: 0.1rem; min-width: 0; }
.dg-room-info small { color: var(--ww-ink-soft); }
.dg-room-full,
.dg-room-open { margin-left: auto; color: var(--club-brass-lit); font-weight: 600; font-size: 0.85rem; }
.dg-empty p { color: var(--ww-ink-soft); }

@keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dg-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes dg-stamp { from { opacity: 0; transform: scale(1.4) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes dg-rise { from { transform: scaleY(0); } to { transform: none; } }

/* --- Narrower screens ------------------------------------------------------ */

@media (max-width: 70rem) {
  .dg-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); grid-template-rows: auto minmax(0, 1fr); }
  .dg-side { grid-column: 1 / -1; grid-row: 1; }
  .dg-players { flex: none; }
  .dg-player-list { display: flex; overflow-x: auto; }
  .dg-player { grid-template-columns: auto auto; grid-template-areas: "avatar name" "avatar score"; flex: none; }
  .dg-player-rank, .dg-player-state { display: none; }
  .dg-stage { grid-row: 2; }
  .dg-chat { grid-row: 2; }
  .dg-header { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.dg-room--completed,
.dg-room--waiting { overflow-y: auto; }

@media (max-width: 47.5rem) {
  .dg-page { height: auto; min-height: 100dvh; }
  .dg-room { flex: none; padding: 0.5rem; gap: 0.5rem; }
  .dg-layout { display: flex; flex-direction: column; }
  .dg-stage { container-type: inline-size; }
  .dg-canvas-wrap { height: auto; }
  .dg-canvas-frame { width: 100%; }
  .dg-tools { width: 100%; justify-content: flex-start; }
  /* One scrolling row each for tools and colours, so the drawer's chat is
     not pushed off the bottom of the phone. */
  .dg-tools { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .dg-palette { display: flex; gap: 0.25rem; flex: none; }
  .dg-swatch { width: 2rem; height: 2rem; flex: none; }
  .dg-keys { width: 100%; }
  .dg-latest { display: grid; }
  .dg-chat-log { max-height: 34dvh; min-height: 9rem; }
  .dg-header { padding: 0.5rem 0.7rem; }
  .dg-header > .dg-header-round { display: none; }
  .dg-header { grid-template-columns: minmax(0, 1fr) auto; }
  .dg-header-word { justify-items: start; text-align: left; }
  .dg-lobby-grid,
  .dg-setup-row { grid-template-columns: minmax(0, 1fr); }
  .dg-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Site-wide feedback tab. Closed, it sits in the corner as a small handle;
   open, the form slides up over the page. Shell chrome, not a game surface. */

.ww-feedback {
  position: fixed;
  right: 0.75rem;
  bottom: calc(0.7rem + var(--ww-safe-bottom));
  z-index: 140;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  width: min(22rem, calc(100% - 1.5rem));
  pointer-events: none;
}

.ww-feedback__tab,
.ww-feedback__panel,
.ww-feedback__close,
.ww-feedback__send,
.ww-feedback__thanks {
  pointer-events: auto;
}

/* Draw's chat composer occupies the bottom-right corner. Leave its send
   button clear while keeping feedback available just above it. */
body:has(.dg-page) .ww-feedback {
  bottom: calc(6rem + var(--ww-safe-bottom));
}

@media (max-width: 47.5rem) {
  body:has(.dg-page) .ww-feedback {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0.75rem 0.75rem calc(0.75rem + var(--ww-safe-bottom)) auto;
  }
}

@media (max-width: 768px) {
  body:has(.ww-dock) .ww-feedback {
    bottom: calc(var(--ww-dock) + var(--ww-safe-bottom) + 0.55rem);
  }
}

/* A phone Worduel fills the screen down to the letter tracker's last row, and
   the tab closes to its icon to fit the corner that row leaves empty. The
   label stays as the button's accessible name. */
@media (max-width: 40rem) {
  body:has(.ww-worduel .ww-letter-notes) .ww-feedback__tab { padding-inline: 0.65rem; }
  body:has(.ww-worduel .ww-letter-notes) .ww-feedback__icons .fa-volume-high { display: none; }
  body:has(.ww-worduel .ww-letter-notes) .ww-feedback__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.ww-feedback__drawer {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  left: 0;
  opacity: 0;
  transform: translateY(0.65rem);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ww-dur-short) var(--ww-ease-out),
    transform var(--ww-dur-long) var(--ww-ease-out),
    visibility 0s linear var(--ww-dur-long);
}

.ww-feedback.is-open .ww-feedback__drawer {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--ww-dur-short) var(--ww-ease-out),
    transform var(--ww-dur-long) var(--ww-ease-out),
    visibility 0s linear 0s;
}

.ww-feedback__panel {
  color: var(--ww-ink);
  background-color: var(--ww-paper-2);
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  border: 1px solid var(--club-brass-dim);
  border-top-color: var(--club-brass);
  border-radius: var(--ww-radius-sm);
  padding: 0.95rem 1rem 1rem;
  max-height: calc(100dvh - 7.5rem - var(--ww-safe-bottom));
  overflow: auto;
}

@media (max-width: 768px) {
  .ww-feedback__panel {
    max-height: calc(100dvh - var(--ww-safe-bottom) - 6.5rem);
  }

  body:has(.ww-dock) .ww-feedback__panel {
    max-height: calc(100dvh - var(--ww-dock) - var(--ww-safe-bottom) - 6.5rem);
  }
}

.ww-feedback__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ww-feedback__title {
  margin: 0;
  font-family: var(--ww-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ww-ink);
}

.ww-feedback__close {
  flex: 0 0 auto;
  width: var(--ww-control-min);
  height: var(--ww-control-min);
  margin: -0.2rem -0.25rem 0 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ww-radius-sm);
  background: transparent;
  color: var(--ww-ink-soft);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .ww-feedback__close:hover {
    color: var(--ww-ink);
    border-color: var(--club-brass-dim);
  }
}

.ww-feedback__close:active {
  transform: translateY(1px);
}

.ww-feedback__lede {
  margin: 0.35rem 0 0.85rem;
  color: var(--ww-ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

.ww-feedback__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
}

.ww-feedback__field label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ww-ink);
}

.ww-feedback__optional {
  font-weight: 500;
  color: var(--ww-ink-soft);
}

.ww-feedback__field textarea,
.ww-feedback__field input[type="email"] {
  width: 100%;
  min-height: var(--ww-control-min);
  padding: 0.55rem 0.7rem;
  resize: vertical;
}

.ww-feedback__field textarea {
  min-height: 6.5rem;
}

@media (max-width: 768px) {
  .ww-feedback__field textarea {
    min-height: 4.25rem;
  }
}

.ww-feedback__hint {
  margin: 0;
  min-height: 1lh;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ww-ink-soft);
}

.ww-feedback__hint.is-error,
.ww-feedback__status.is-error {
  color: var(--ww-danger-text);
}

.ww-feedback__status {
  margin: 0 0 0.55rem;
  min-height: 1lh;
  font-size: 0.82rem;
  color: var(--ww-ink-soft);
}

.ww-feedback__actions {
  display: flex;
  justify-content: flex-end;
}

.ww-feedback__send {
  min-height: var(--ww-control-min);
  white-space: nowrap;
}

.ww-feedback__send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ww-feedback__thanks:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 0.15rem;
}

.ww-feedback__thanks p {
  margin: 0;
  font-size: 0.98rem;
}

.ww-feedback__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ww-feedback__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--ww-control-min);
  padding: 0 0.7rem 0 0.55rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background-color: var(--ww-paper-2);
  color: var(--ww-ink);
  font-family: var(--ww-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  margin-left: auto;
}

.ww-feedback__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--club-brass-lit);
}

.ww-feedback__icons i {
  font-size: 0.82rem;
  pointer-events: none;
}

@media (hover: hover) {
  .ww-feedback__tab:hover {
    border-color: var(--club-brass);
    color: var(--ww-ink);
  }

  .ww-feedback__tab:hover .ww-feedback__icons {
    color: var(--club-brass);
  }
}

.ww-feedback__tab:active {
  transform: translateY(1px);
}

.ww-feedback.is-open .ww-feedback__tab {
  border-color: var(--club-brass);
}

.ww-feedback__tab:disabled,
.ww-feedback__close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Crossfire Club: the match setup under the cabinet screen, and the settled
   scoreboard with its awards and kill matrix. The option groups reuse the
   practice picker's radio component (.ww-difficulty), so they look and
   behave like every other difficulty choice in the club. */

.ff-setup {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.25rem 1.1rem;
  border-top: 1px solid var(--ww-line);
  background: var(--ww-navy);
  color: var(--ww-ink);
}

.ff-setup[hidden] { display: none; }

.ff-setup__head h2 {
  margin: 0;
  font-family: var(--ww-display);
  font-size: 1.15rem;
  color: var(--ww-gold);
}

.ff-setup__head p {
  margin: 0.25rem 0 0;
  max-width: 62ch;
  color: var(--ww-ink-soft);
  font-size: 0.9rem;
}

.ff-setup .ww-difficulty__options {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.ff-setup .ww-difficulty__option small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .ff-setup .ww-difficulty__radio:not(:checked):not(:disabled) + .ww-difficulty__option:hover {
    background: color-mix(in oklch, var(--club-brass) 18%, transparent);
  }
}

.ff-setup .ww-difficulty__radio:not(:disabled) + .ww-difficulty__option:active {
  transform: translateY(1px);
}

.ff-setup .ww-difficulty__radio:disabled + .ww-difficulty__option {
  cursor: not-allowed;
  opacity: 0.6;
}

.ff-setup .ww-difficulty__radio:disabled:checked + .ww-difficulty__option {
  opacity: 1;
}

.ff-setup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: end;
  justify-content: space-between;
}

.ff-setup__range {
  display: grid;
  gap: 0.35rem;
  min-width: min(100%, 16rem);
  color: var(--ww-ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ff-setup__range output {
  margin-left: 0.4rem;
  color: var(--ww-ink);
  font-family: var(--ww-mono);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.ff-setup__range input[type="range"] {
  width: 100%;
  min-height: var(--ww-control-min);
  accent-color: var(--club-brass);
  cursor: pointer;
}

.ff-setup__range input[type="range"]:disabled { cursor: not-allowed; opacity: 0.6; }

.ff-setup__start { min-width: 12rem; }

.ff-setup__wait {
  margin: 0;
  color: var(--ww-ink-soft);
}

/* The settled page: standings, awards and who-killed-whom. */
.ff-board {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}

.ff-board__meta {
  margin: 0;
  color: var(--ww-ink-soft);
}

.ff-board__flag {
  margin: 0;
  color: var(--ww-warning-text);
}

.ff-board__scroll {
  overflow-x: auto;
  max-width: 100%;
}

.ff-board table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ff-board th,
.ff-board td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--ww-line);
  text-align: left;
  white-space: nowrap;
}

.ff-board thead th {
  color: var(--ww-ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ff-board td.ff-num,
.ff-board th.ff-num {
  text-align: right;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
}

.ff-board__award {
  color: var(--ww-gold);
  font-weight: 700;
}

.ff-board__award small {
  display: block;
  color: var(--ww-ink-soft);
  font-weight: 500;
}

.ff-board tbody th {
  color: var(--ww-ink);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ff-board tbody th small {
  margin-left: 0.3rem;
  color: var(--ww-ink-soft);
  font-weight: 500;
}

.ff-board__you td,
.ff-board__you th { background: color-mix(in oklch, var(--club-brass) 12%, transparent); }

.ff-board h2 {
  margin: 0;
  font-family: var(--ww-display);
  font-size: 1.3rem;
  color: var(--ww-gold);
}

.ff-board table.ff-matrix { width: auto; }
.ff-matrix td.ff-num { min-width: 3rem; }
.ff-matrix td.ff-self { color: var(--ww-ink-soft); }
.ff-matrix caption {
  caption-side: top;
  padding-bottom: 0.4rem;
  color: var(--ww-ink-soft);
  font-size: 0.85rem;
  text-align: left;
}
/* The capsule machine on /cardboard_box.
 *
 * It sits inside the diorama's stage card, so it is separated by a hairline
 * rather than boxed again. Buttons, rarity pills and the reveal card are the
 * cardboard box's own (cb-btn, cb-rarity-pill, cb-reveal-card); this file
 * only lays out the window, the counters and the pity track, and plays the
 * split.
 */

.cb-gacha {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ww-line);
}

.cb-gacha-header {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.875rem;
}

.cb-gacha-header .cb-stage-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cb-gacha-header .cb-stage-title i {
  color: var(--club-brass);
}

.cb-gacha-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ww-ink-soft);
  max-width: 60ch;
}

.cb-gacha-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

@media (min-width: 40rem) {
  .cb-gacha-body {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* The window: two copies of one capsule, each clipped to a half, so the cap
   can lift away from the cup on the brass seam. */
.cb-gacha-window {
  position: relative;
  justify-self: center;
  inline-size: 7.5rem;
  block-size: 7.5rem;
}

.cb-gacha-half {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.cb-gacha-half--cap {
  clip-path: inset(0 0 50% 0);
  transform-origin: 90% 50%;
  transition: transform var(--ww-dur-long) var(--ww-ease-play),
              opacity var(--ww-dur-long) var(--ww-ease-out);
}

.cb-gacha-half--cup {
  clip-path: inset(50% 0 0 0);
}

.cb-gacha-window.is-turning {
  animation: cb-gacha-rattle var(--ww-dur-short) var(--ww-ease-in-out) 3;
}

.cb-gacha-window.is-open .cb-gacha-half--cap {
  transform: translate(0.75rem, -1.25rem) rotate(24deg);
  opacity: 0.85;
}

@keyframes cb-gacha-rattle {
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.cb-gacha-controls {
  display: grid;
  gap: 0.875rem;
  min-width: 0;
}

.cb-gacha-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.cb-gacha-stat {
  display: grid;
  gap: 0.125rem;
}

.cb-gacha-stat dt {
  font-family: var(--ww-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.cb-gacha-stat dd {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-family: var(--ww-mono);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink);
}

.cb-gacha-ticket {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.cb-gacha-pity {
  display: grid;
  gap: 0.375rem;
}

.cb-gacha-pity-track {
  position: relative;
  block-size: 0.375rem;
  border-radius: 2px;
  background: color-mix(in oklch, var(--ww-line) 60%, transparent);
  overflow: hidden;
}

.cb-gacha-pity-fill {
  position: absolute;
  inset: 0;
  background: var(--club-brass);
  transform-origin: left center;
  transform: scaleX(var(--pity, 0));
  transition: transform var(--ww-dur-long) var(--ww-ease-out);
}

.cb-gacha-pity-caption {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ww-ink-soft);
}

.cb-gacha-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* The machine sits in the diorama column, which stays narrow even on a wide
   screen, so the four ways of paying are always a 2 x 2 block. */

.cb-gacha-form,
.cb-gacha-form .cb-btn {
  inline-size: 100%;
}

.cb-gacha-form .cb-btn {
  white-space: nowrap;
}

.cb-gacha-form .cb-btn[aria-busy="true"] {
  cursor: progress;
}

.cb-gacha-reveal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.cb-gacha-reveal:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

.cb-gacha-error {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid var(--ww-danger);
  background: color-mix(in oklch, var(--ww-danger) 10%, var(--ww-paper-2));
  color: var(--ww-danger-text);
  font-size: 0.875rem;
}
/* Gadget Works: a toy-plastic science workshop. The warehouse and the lock
   diagrams are drawn art with their own palette (models/gadget_art.js,
   models/gadget_lock_view.js); everything here is page chrome on the tokens. */
.gw { --gw-key: color-mix(in oklch, var(--ww-navy) 70%, var(--ww-ink)); --gw-bronze: color-mix(in oklch, var(--ww-gold) 55%, var(--club-oxblood)); --gw-silver: color-mix(in oklch, var(--ww-paper) 55%, var(--ww-ink-soft));
  max-width: 68rem; margin: 0 auto; padding: 1.25rem 1rem calc(2rem + var(--ww-dock) + var(--ww-safe-bottom)); color: var(--ww-ink); }
.gw-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gw-heading { flex: 1 1 26rem; min-width: 0; }
.gw-kicker { font-family: var(--ww-mono); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ww-ink-soft); margin-bottom: .3rem; }
.gw h1 { font-family: var(--ww-display); font-weight: 800; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; margin-bottom: .5rem; }
.gw h2, .gw-puzzle h2 { font-family: var(--ww-display); font-weight: 800; font-size: 1.45rem; line-height: 1.2; margin-bottom: .65rem; }
.gw h3 { font-family: var(--ww-display); font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; }
.gw-lede { max-width: 46rem; }

.gw-cups { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.gw-cup { font-family: var(--ww-mono); font-weight: 700; font-size: .85rem; padding: .45rem .8rem; border-radius: 999px; border: 2px dashed var(--ww-line); color: var(--ww-ink-soft); }
.gw-cup.is-won { border-style: solid; color: var(--ww-navy); box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--ww-ink) 25%, transparent); }
.gw-cup-bronze.is-won { background: var(--gw-bronze); border-color: var(--gw-bronze); color: var(--ww-paper); }
.gw-cup-silver.is-won { background: var(--gw-silver); border-color: var(--gw-silver); }
.gw-cup-gold.is-won { background: var(--ww-gold); border-color: var(--ww-gold); }

/* The cabinet: a moulded bezel round the warehouse. */
.gw-stage { position: relative; padding: .5rem; border-radius: calc(var(--ww-radius) + .5rem); background: var(--gw-key); box-shadow: inset 0 2px 0 color-mix(in oklch, var(--ww-paper) 18%, transparent), 0 6px 0 color-mix(in oklch, var(--ww-ink) 45%, transparent), var(--ww-shadow); }
.gw-scene { display: block; width: 100%; height: auto; aspect-ratio: 960 / 580; border-radius: var(--ww-radius-sm); background: var(--ww-navy); touch-action: manipulation; cursor: pointer; }
.gw-scene:focus-visible { outline: 3px solid var(--ww-gold); outline-offset: 3px; }
.gw-status { min-height: 2.6em; margin: .75rem 0 .25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pad buttons: chunky plastic keys that press down. */
.gw-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); gap: .5rem; margin: .5rem 0; }
.gw-pad .ww-btn { min-height: max(3rem, var(--ww-control-min)); justify-content: center; gap: .35rem; font-weight: 700; box-shadow: 0 4px 0 color-mix(in oklch, var(--ww-ink) 35%, transparent); transition: transform var(--ww-dur-micro) var(--ww-ease-out), box-shadow var(--ww-dur-micro) var(--ww-ease-out); }
.gw-pad .ww-btn:active:enabled { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in oklch, var(--ww-ink) 35%, transparent); }
.gw-help { color: var(--ww-ink-soft); font-size: .92rem; line-height: 1.9; }
.gw-help kbd { font-family: var(--ww-mono); font-size: .8rem; padding: .05rem .4rem; border: 1px solid var(--ww-line); border-bottom-width: 3px; border-radius: 5px; background: var(--ww-paper-2); color: var(--ww-ink); }
@media (max-width: 40rem) {
  .gw-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gw-pad-open { grid-column: 1 / -1; }
}

/* Workbench */
.gw-bench { margin-top: 1.75rem; padding: 1.25rem; border-radius: var(--ww-radius); background: var(--ww-paper-2); border: 1px solid var(--ww-line); }
.gw-bench-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 48rem) { .gw-bench-grid { grid-template-columns: minmax(0, 1fr); } }
.gw-car-view, .gw-reward-car { display: block; width: 100%; height: auto; aspect-ratio: 360 / 150; border-radius: var(--ww-radius-sm); }
.gw-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .75rem; margin-top: .75rem; align-items: center; font-size: .92rem; }
.gw-stats dt { color: var(--ww-ink-soft); }
.gw-stats dd { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--ww-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gw-stats meter { flex: 1 1 auto; min-width: 3rem; height: .7rem; accent-color: var(--ww-emerald); }
.gw-stats .gw-stats-empty { grid-column: 1 / -1; white-space: normal; font-family: var(--ww-font); }
.gw-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; align-content: start; }
.gw-slot-parts { display: flex; flex-direction: column; gap: .4rem; }
.gw-slot-missing { font-size: .88rem; color: var(--ww-ink-soft); }
.gw-part, .gw-track { display: flex; flex-direction: column; align-items: start; text-align: left; gap: .1rem; min-height: var(--ww-control-min); padding: .5rem .75rem; white-space: normal; }
.gw-part-stats, .gw-track-meta { font-family: var(--ww-mono); font-size: .78rem; color: var(--ww-ink-soft); }
.gw-part-name, .gw-track-name { font-weight: 700; }
.gw-part[aria-pressed="true"], .gw-track[aria-pressed="true"], .gw-lock-btn[aria-pressed="true"] { border-color: var(--ww-emerald); box-shadow: inset 0 0 0 2px var(--ww-emerald); }
.gw-part[aria-pressed="true"] .gw-part-name::before { content: "✓ "; color: var(--ww-success-text); }
.gw-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.gw-track-cup { font-family: var(--ww-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gw-track-bronze .gw-track-cup { color: var(--ww-warning-text); }
.gw-track-gold .gw-track-cup { color: var(--ww-warning-text); }
.gw-race-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1rem; }
.gw-race { min-height: max(3rem, var(--ww-control-min)); font-weight: 800; box-shadow: 0 4px 0 color-mix(in oklch, var(--ww-ink) 35%, transparent); }
.gw-race:active:enabled { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in oklch, var(--ww-ink) 35%, transparent); }
.gw-race-note { flex: 1 1 18rem; color: var(--ww-ink-soft); }
.gw-result { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--ww-radius-sm); border: 2px solid var(--ww-line); background: var(--ww-paper); }
.gw-result[data-outcome="won"] { border-color: var(--ww-emerald); }
.gw-result:focus-visible { outline: 3px solid var(--ww-gold); outline-offset: 3px; }
.gw-result-title { font-size: 1.35rem; }
.gw-result-times { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; margin-bottom: .75rem; }
.gw-splits { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: .75rem; font-size: .92rem; }
.gw-splits caption { text-align: left; color: var(--ww-ink-soft); margin-bottom: .3rem; }
.gw-splits th, .gw-splits td { padding: .35rem .5rem; border-bottom: 1px solid var(--ww-line); text-align: left; }
.gw-advice { font-weight: 600; }
.gw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
.gw-foot-note { flex: 1 1 18rem; color: var(--ww-ink-soft); font-size: .9rem; }

/* Lock dialog */
.gw-puzzle { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(42rem, calc(100% - 1.5rem)); max-height: 94dvh; overflow: auto; padding: 1.25rem; border: 0; border-radius: var(--ww-radius); background: var(--ww-paper); color: var(--ww-ink); box-shadow: 0 0 0 .4rem var(--gw-key), var(--ww-shadow); }
.gw-puzzle::backdrop { background: color-mix(in oklch, var(--ww-navy) 78%, transparent); }
.gw-puzzle[open] { animation: gw-pop var(--ww-dur-short) var(--ww-ease-play); }
.gw-intro { margin-bottom: .75rem; }
.gw-diagram { display: block; width: 100%; height: auto; }
.gw-diagram [data-switch] { cursor: pointer; }
.gw-lock-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 .25rem; }
.gw-lock-btn { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; background: var(--ww-paper-2); border: 1px solid var(--ww-line); box-shadow: 0 3px 0 color-mix(in oklch, var(--ww-ink) 30%, transparent); }
.gw-lock-btn:active:enabled { box-shadow: 0 1px 0 color-mix(in oklch, var(--ww-ink) 30%, transparent); }
.gw-feedback { min-height: 3em; margin: .5rem 0; font-weight: 600; }
.gw-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.gw-reward p { margin: .75rem 0; }
.gw-shake { animation: gw-shake .32s var(--ww-ease-out); }

.gw .ww-btn, .gw-puzzle .ww-btn { min-height: var(--ww-control-min); }
.gw button:active:enabled, .gw-puzzle button:active:enabled { transform: translateY(1px); }
.gw button:disabled, .gw-puzzle button:disabled { opacity: .55; cursor: not-allowed; }
.gw button:focus-visible, .gw-puzzle button:focus-visible { outline: 3px solid var(--ww-gold); outline-offset: 2px; }
@media (hover: hover) { .gw button:enabled:hover, .gw-puzzle button:enabled:hover { border-color: var(--club-brass); } }

/* Diagram motion: the beam settles, the ball rolls, gears and motors turn. */
.gw-tilt { transform-box: view-box; transform-origin: 210px 96px; transition: transform var(--ww-dur-long) var(--ww-ease-play); }
.gw-ball { transition: transform .6s var(--ww-ease-in-out); }
.gw-spin { transform-box: fill-box; transform-origin: center; animation: gw-spin var(--spin, 2s) linear infinite; }
.gw-spin-ccw { animation-direction: reverse; }
.gw-glow { animation: gw-glow 1.2s ease-in-out infinite alternate; }
@keyframes gw-spin { to { transform: rotate(1turn); } }
@keyframes gw-glow { from { opacity: .75; } to { opacity: 1; } }
@keyframes gw-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes gw-pop { from { transform: scale(.94); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gw-spin, .gw-glow, .gw-shake, .gw-puzzle[open] { animation: none; }
  .gw-tilt, .gw-ball { transition: none; }
}
html.ww-reduced-motion .gw-spin, html.ww-reduced-motion .gw-glow, html.ww-reduced-motion .gw-shake, html.ww-reduced-motion .gw-puzzle[open] { animation: none; }
html.ww-reduced-motion .gw-tilt, html.ww-reduced-motion .gw-ball { transition: none; }
.gw-part, .gw-track { background: var(--ww-paper); border: 1px solid var(--ww-line); }
@media (max-width: 40rem) {
  .gw-puzzle { width: calc(100% - .75rem); padding: 1rem .75rem; }
}
.gw-pitch { transform-origin: 200px 112px; }
.gw-panel { transform-box: view-box; }
.gw-needle { transition: transform var(--ww-dur-short) var(--ww-ease-out); }
.gw-wind { animation: gw-wind .6s linear infinite; }
.gw-bubble { animation: gw-bubble 1.6s ease-in infinite; animation-delay: var(--d, 0s); transform-box: fill-box; }
@keyframes gw-wind { from { transform: translateX(30px); opacity: 0; } 50% { opacity: .8; } to { transform: translateX(-40px); opacity: 0; } }
@keyframes gw-bubble { from { transform: translateY(60px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gw-wind, .gw-bubble { animation: none; } }
html.ww-reduced-motion .gw-wind, html.ww-reduced-motion .gw-bubble { animation: none; }

/* Workshop switcher: three buildings, each tinted like its warehouse. */
.gw-buildings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.gw-building { display: flex; flex-direction: column; align-items: start; text-align: left; gap: .1rem; padding: .55rem .8rem; white-space: normal; background: var(--ww-paper); border: 1px solid var(--ww-line); border-top: 4px solid var(--gw-tint, var(--ww-line)); }
.gw-building-garage { --gw-tint: var(--club-oxblood); }
.gw-building-hangar { --gw-tint: var(--ww-blue); }
.gw-building-greenhouse { --gw-tint: var(--ww-emerald); }
.gw-building[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gw-tint); border-color: var(--gw-tint); }
.gw-building-name { font-family: var(--ww-display); font-weight: 800; font-size: 1.05rem; }
.gw-building-meta { font-size: .8rem; color: var(--ww-ink-soft); }
@media (max-width: 40rem) { .gw-building-meta { display: none; } .gw-building { align-items: center; text-align: center; } }
/* In-match banners + small game polish */

@keyframes ww-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0.0); }
  50% { transform: scale(1.01); box-shadow: 0 10px 28px rgba(16, 185, 129, 0.14); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0.0); }
}

@keyframes ww-pop {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0px); opacity: 1; }
}

/* ===== GUESS TILE ANIMATIONS ===== */

@keyframes ww-tile-flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes ww-tile-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ww-score-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ww-glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8); }
}

.ww-guess-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  max-width: 100%;
}

.ww-guess-tiles {
  display: flex;
  gap: 0.35rem;
}

.ww-guess-tile {
  width: clamp(2.35rem, 12vw, 3.35rem);
  height: clamp(2.35rem, 12vw, 3.35rem);
  perspective: 600px;
}

.ww-guess-tile-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  border-radius: 0.5rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: #334155;
  transition: var(--ww-transition-panel);
  transform-style: preserve-3d;
}

.ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner {
  animation: ww-tile-flip 0.4s ease-out forwards;
  animation-delay: var(--delay, 0ms);
  background: var(--ww-sheet-tile);
  border-color: #1d4ed8;
  color: var(--ww-sheet-tile-ink);
  box-shadow: none;
}

.ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.ww-guess-letter {
  display: block;
  line-height: 1;
  font-family: ui-monospace, monospace;
}

.ww-guess-score-badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  opacity: 0;
  transform: scale(0.5);
  /* A score landing is game motion, so the scale is allowed to overshoot; the
     fade underneath it is not, or the badge reads as two separate events. */
  transition:
    opacity var(--ww-dur-long) var(--ww-ease-out),
    transform var(--ww-dur-long) var(--ww-ease-play);
}

.ww-guess-score-badge.ww-score-visible {
  animation: ww-score-pop var(--ww-dur-long) var(--ww-ease-play) forwards;
}

.ww-score-num {
  font-weight: 900;
  font-size: 1.1rem;
  color: #1d4ed8;
  min-width: 1.2rem;
  text-align: center;
}

.ww-score-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.ww-guess-score-badge.ww-score-hot {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}

.ww-guess-score-badge.ww-score-hot .ww-score-num {
  color: var(--ww-sheet-score);
}

.ww-guess-score-badge.ww-score-perfect {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #22c55e;
  animation: ww-score-pop 0.4s ease-out forwards, ww-glow-pulse 1.5s ease-in-out infinite 0.4s;
}

.ww-guess-score-badge.ww-score-perfect .ww-score-num {
  color: var(--ww-sheet-score);
}

.ww-guess-row--anagram .ww-guess-tile-inner,
.ww-guess-row--anagram .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner {
  background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  border-color: #b45309;
  color: white;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.ww-guess-row--won .ww-guess-tile-inner,
.ww-guess-row--won .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner {
  background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
  border-color: #15803d;
  color: white;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.ww-guess-row--cold .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner {
  background: linear-gradient(145deg, #64748b 0%, #475569 100%);
  border-color: #334155;
  color: white;
  box-shadow: 0 2px 8px rgba(71, 85, 105, 0.25);
}

.ww-guess-row--cold.ww-guess-row--old .ww-guess-tile-inner {
  background: linear-gradient(145deg, #64748b 0%, #475569 100%);
  border-color: #334155;
  box-shadow: 0 2px 6px rgba(71, 85, 105, 0.2);
}

/* Your own guesses echo the letter tracker, so a letter crossed out on the
   keyboard is crossed out in every word that holds it. A won or all-letters
   row keeps its own colour: its letters are already settled. */
.ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile.ww-tile-revealed.ww-guess-tile--out .ww-guess-tile-inner {
  background: var(--ww-mark-out);
  border-color: color-mix(in oklch, var(--ww-mark-out) 70%, var(--ww-mark-out-ink));
  color: var(--ww-mark-out-ink);
  box-shadow: none;
}

.ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile.ww-tile-revealed.ww-guess-tile--out .ww-guess-letter {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile.ww-tile-revealed.ww-guess-tile--maybe .ww-guess-tile-inner {
  background: var(--ww-mark-maybe);
  border-color: color-mix(in oklch, var(--ww-mark-maybe) 70%, var(--ww-mark-maybe-ink));
  color: var(--ww-mark-maybe-ink);
  box-shadow: none;
}

.ww-guess-score-badge.ww-score-cold {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #94a3b8;
}

.ww-guess-score-badge.ww-score-cold .ww-score-num {
  color: var(--ww-sheet-score);
}

.ww-guess-row--shake {
  animation: ww-shake 0.45s ease-out;
}

/* Older guess items - no animation, already revealed */
.ww-guess-row--old {
  opacity: 1;
}

/* The comment above was the intent; nothing had ever carried it out. Old rows
   are server-rendered with `ww-tile-revealed` to get their revealed colours,
   and that class also carries the flip -- so every replacement of #game_board,
   which is what every opponent guess does over the cable, re-flipped the whole
   score sheet, staggered 100ms a tile. A word turns over once, when it is
   answered. */
.ww-guess-row--old .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner {
  animation: none;
}

.ww-guess-row--old .ww-guess-tile-inner {
  background: var(--ww-sheet-tile);
  border-color: #1d4ed8;
  color: var(--ww-sheet-tile-ink);
  box-shadow: none;
}

/* New guess - animate in */
.ww-guess-row--new {
  animation: ww-pop 0.3s ease-out;
}

/* ===== CONFETTI CELEBRATION ===== */

@keyframes ww-confetti-fall {
  0% {
    transform: translateY(var(--y)) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(calc(var(--x) * 0.2 - 10vw)) rotate(720deg);
    opacity: 0;
  }
}

.ww-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.ww-confetti {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: var(--color);
  animation: ww-confetti-fall var(--duration) ease-out var(--delay) forwards;
}

.ww-confetti[data-shape="circle"] {
  border-radius: 50%;
}

.ww-confetti[data-shape="rectangle"] {
  width: calc(var(--size) * 0.4);
  height: var(--size);
}

/* ===== WIN/LOSE BANNERS ENHANCED ===== */

@keyframes ww-win-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); }
}

@keyframes ww-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.ww-banner--win {
  animation: ww-pop 220ms ease-out both, ww-win-glow 2s ease-in-out infinite;
}

.ww-banner--lose {
  animation: ww-pop 220ms ease-out both, ww-shake 0.5s ease-out;
}

/* ===== TURN INDICATOR PULSE ===== */

@keyframes ww-turn-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
}

.ww-your-turn-indicator {
  animation: ww-turn-pulse 2s ease-in-out infinite;
}

/* ===== RESULT WORD TILES ===== */

.ww-word-reveal {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}

.ww-result-tile {
  width: clamp(2.3rem, 8vw, 3rem);
  height: clamp(2.3rem, 8vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-family: ui-monospace, monospace;
  border-radius: 0.55rem;
  border: 2px solid;
}

.ww-result-tile--yours {
  background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #3b82f6;
  color: #1e40af;
}

.ww-result-tile--opponent {
  background: linear-gradient(145deg, #fecaca 0%, #fca5a5 100%);
  border-color: #ef4444;
  color: #7f1d1d;
}

/* ===== TURN/WAIT ICONS ===== */

.ww-turn-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
}

.ww-wait-spinner {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== EMERALD REWARD BOX ===== */

@keyframes ww-emerald-shine {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

.ww-emerald-reward .ww-emerald-icon {
  animation: ww-emerald-shine 1.5s ease-in-out infinite;
}

/* ===== TIMER DISPLAY ===== */

/* The timer sits on a game panel, so it takes its surface and its ink from the
   same tokens that panel does. It used to be a near-white box with near-black
   figures -- a light-theme treatment frozen into a component layer -- which
   left pale ink on white wherever the theme override did not reach it. A rule
   that sets a surface sets the ink on it in the same place. */
.ww-timer-display {
  padding: 0.4rem 0.8rem;
  background: color-mix(in oklch, var(--ww-paper-2) 88%, transparent);
  color: var(--ww-ink-soft);
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
}

.ww-timer-value {
  font-weight: 900;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink);
}

.ww-timer-display.ww-timer-warning .ww-timer-value {
  color: var(--ww-danger-text);
  animation: ww-pulse 1s ease-in-out infinite;
}

/* ===== TIP BOX ===== */

.ww-tip-box {
  background: linear-gradient(145deg, rgba(239, 246, 255, 0.8) 0%, rgba(219, 234, 254, 0.6) 100%);
}

/* ===== LETTER TRACKER LEGEND ===== */

.ww-legend-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 2px solid #cbd5e1;
}

.ww-legend-unmarked {
  background: #f3f4f6;
  border-color: #93c5fd;
}

.ww-legend-eliminated {
  background: #fecaca;
  border-color: #ef4444;
  position: relative;
}

.ww-legend-eliminated::before,
.ww-legend-eliminated::after {
  content: '';
  position: absolute;
  background-color: #ef4444;
  width: 70%;
  height: 2px;
  top: 50%;
  left: 15%;
}

.ww-legend-eliminated::before {
  transform: translateY(-50%) rotate(45deg);
}

.ww-legend-eliminated::after {
  transform: translateY(-50%) rotate(-45deg);
}

.ww-legend-selected {
  background: #dbeafe;
  border-color: #3b82f6;
  box-shadow: 0 0 4px #3b82f6;
}

/* ===== SOUND TOGGLE ===== */

.ww-sound-toggle {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: var(--ww-transition-panel);
}

.ww-sound-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* ===== SMALL BUTTON ===== */

.ww-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

.ww-btn-sm:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

/* ===== LETTER TRACKER PANEL ===== */

.ww-letter-tracker-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

/* ===== GUESS INPUT ENHANCEMENTS ===== */

.ww-guess-input {
  font-family: ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
}

.ww-guess-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ww-guess-input::placeholder {
  letter-spacing: 0.1em;
  font-weight: 400;
}

/* ===== LOADING STATE ===== */

@keyframes ww-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ww-is-loading {
  position: relative;
  color: transparent !important;
}

.ww-is-loading::after {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  top: 50%;
  left: 50%;
  margin-left: -0.6rem;
  margin-top: -0.6rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: ww-spin 0.6s linear infinite;
}

/* ===== KEYBOARD HINTS ===== */

.ww-input-hint kbd {
  font-family: ui-monospace, monospace;
  background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===== ACCESSIBILITY ===== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible for keyboard navigation */
.ww-btn:focus-visible,
.ww-letter-btn:focus-visible,
.ww-guess-input:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== GUESS COLUMN STYLES ===== */

.ww-guess-column {
  min-height: 8rem;
}

/* A modern version of the paper Jotto score sheet: both players' test words
   stay parallel so each exchange can be compared at a glance. */
.ww-sheet-header {
  padding: 1rem 1.25rem .8rem;
  border-bottom: 1px solid #d7cdbb;
  background: #fbf7ed;
  color: #754f3b;
  text-align: center;
}

.ww-sheet-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ww-sheet-rule { flex: 1; height: 1px; background: #c9715b; }

.ww-candidate-count {
  display: inline-block;
  margin-top: .45rem;
  color: #72665b;
  font-size: .75rem;
  letter-spacing: 0;
  text-transform: none;
}

.ww-score-sheet {
  padding: 1rem;
  overflow-x: auto;
  background-color: #fffdf7;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3.05rem, rgba(87, 137, 174, .11) 3.05rem, rgba(87, 137, 174, .11) 3.1rem);
}

.ww-score-sheet-grid {
  display: grid;
  grid-template-columns: minmax(17rem, 1fr) minmax(17rem, 1fr);
  min-width: 35rem;
  border: 1px solid #d9cdbb;
  border-radius: .55rem;
  overflow: hidden;
  background: rgba(255, 253, 247, .86);
}

.ww-guess-column { padding: .8rem; }
.ww-guess-column--mine { border-right: 2px solid #c9715b; }

.ww-guess-column-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.8rem;
  padding: 0 .15rem .65rem;
  border-bottom: 1px solid #d9cdbb;
}

.ww-sheet-player { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.ww-sheet-player strong { color: #4a3e36; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.ww-sheet-player span { color: var(--ww-sheet-muted); font-size: .75rem; }

.ww-avatar-badge {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
}

.ww-avatar-badge--you {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.ww-avatar-badge--opponent {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.ww-guess-count {
  font-size: 0.8rem;
  color: #52606f;
  font-weight: 400;
}

.ww-empty-guesses {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px dashed #e5e7eb;
}

.ww-empty-guesses-sm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px dashed #e5e7eb;
}

.ww-guess-scroll {
  max-height: 24rem;
  overflow-y: auto;
}

.ww-score-sheet .ww-guess-row { gap: .45rem; min-height: 3.1rem; padding: .35rem 0; }
.ww-score-sheet .ww-guess-tiles { gap: .18rem; }
.ww-score-sheet .ww-guess-tile { width: clamp(1.75rem, 2.6vw, 2.35rem); height: clamp(1.75rem, 2.6vw, 2.35rem); }
.ww-score-sheet .ww-guess-tile-inner { border-width: 1px; border-radius: .25rem; font-size: .95rem; box-shadow: none; }
.ww-score-sheet .ww-guess-score-badge { margin-left: auto; padding: .3rem .5rem; border-radius: .35rem; }
.ww-score-sheet .ww-score-label { display: none; }

/* On a phone the two columns cannot both hold a five-letter word: at 390px the
   28rem grid overflowed its own scroller and printed CRAN, GUTS, RUBB -- the
   one thing a deduction game cannot do is show four fifths of a word. The
   columns stack instead, so each word is whole and the sheet scrolls the way
   the rest of the page does. */
@media (max-width: 640px) {
  .ww-score-sheet { padding: .65rem; overflow-x: visible; }
  .ww-score-sheet-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .ww-guess-column { padding: .6rem; min-height: 0; }
  .ww-guess-column--mine { border-right: 0; border-bottom: 2px solid #c9715b; }
  .ww-guess-scroll { max-height: 15rem; }
  .ww-score-sheet .ww-guess-tile { width: 2.1rem; height: 2.1rem; }
  .ww-score-sheet .ww-guess-tile-inner { font-size: .95rem; }
}

/* ===== STATUS MESSAGES ===== */

.ww-status-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ww-ink-soft);
}

.ww-action-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.ww-action-banner--action {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.ww-action-banner--waiting {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.ww-wager-info {
  font-size: 0.85rem;
}

/* ===== WAITING ANIMATIONS ===== */

@keyframes ww-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.ww-waiting-animation {
  animation: ww-float 2s ease-in-out infinite;
}

/* ===== WORD FORM STYLES ===== */

.ww-word-form-icon {
  animation: ww-float 3s ease-in-out infinite;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .ww-guess-tile {
    width: 2.4rem;
    height: 2.4rem;
  }
  
  .ww-guess-letter {
    font-size: 1rem;
  }
  
  .ww-result-tile {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
  
  .ww-letter-btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
}

.ww-banner {
  border-radius: 0.9rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(229, 231, 235, 0.9);
  background: rgba(255, 255, 255, 0.96);
  animation: ww-pop 220ms ease-out both;
}

.ww-banner--turn {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(236, 253, 245, 0.9);
  animation: ww-pop 220ms ease-out both, ww-pulse 1400ms ease-in-out infinite;
}

.ww-banner--wait {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.92);
}

.ww-banner--win {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(240, 253, 244, 0.92);
}

.ww-banner--lose {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(254, 242, 242, 0.92);
}

.ww-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.15rem 0.6rem;
  font-weight: 800;
  font-size: 0.78rem;
  border: 1px solid rgba(229, 231, 235, 0.9);
  background: rgba(255, 255, 255, 0.85);
}

.ww-pill--rated {
  border-color: rgba(16, 185, 129, 0.35);
  color: #047857;
  background: rgba(236, 253, 245, 0.85);
}

/* Guess CTA */
.ww-guess-panel--active {
  border: 1px solid rgba(16, 185, 129, 0.30);
  background: rgba(236, 253, 245, 0.55);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.10);
}

.ww-guess-panel--inactive {
  opacity: 0.88;
}

.ww-guess-submit {
  width: 100%;
}

/* Contextual rules: keyboard-accessible details instead of hover-only tooltips. */
.ww-help-popover {
  position: relative;
}

.ww-help-popover summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: #1e40af;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.ww-help-popover summary::-webkit-details-marker {
  display: none;
}

.ww-help-popover summary:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.ww-help-popover-content {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(20rem, 80vw);
  padding: 0.9rem;
  border: 1px solid #c7d2fe;
  border-radius: 0.75rem;
  background: white;
  color: #334155;
  font-size: 0.8rem;
  line-height: 1.45;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.ww-help-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A restrained tile entrance gives Ghost the tactile feel of a word-grid game. */
@keyframes ww-letter-land {
  from { opacity: 0; transform: translateY(-5px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ww-ghost-fragment .ww-result-tile {
  animation: ww-letter-land 200ms ease-out both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.ww-ghost-fragment .ww-result-tile:last-child {
  animation-name: ww-letter-land, ww-tile-bounce;
  animation-duration: 200ms, 320ms;
  animation-timing-function: ease-out, ease;
  animation-fill-mode: both, none;
  animation-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms + 160ms);
}

.ww-ghost-resolve {
  animation: ww-pop 220ms ease-out both;
}

.ww-ghost-resolve--win {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.ww-ghost-resolve--fail {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #7f1d1d;
}

.ww-banner--win {
  animation: ww-pop 280ms ease-out both, ww-pulse 1.6s ease-in-out 2;
}

.ww-banner--turn {
  animation: ww-pulse 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ww-banner--turn,
  .ww-banner--win,
  .ww-ghost-fragment .ww-result-tile,
  .ww-ghost-fragment .ww-result-tile:last-child,
  .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner {
    animation: none !important;
  }
}
/* A public game page shares its start options with the launcher dialog. */
.ww-game-page {
  width: min(100%, 44rem);
  margin-inline: auto;
  padding: 1.5rem 1rem 4rem;
  color: var(--ww-ink);
}
.ww-game-page__trail { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ww-game-page > .ww-launch { padding: 1.5rem 0; }
.ww-game-page .ww-launch__head { padding-right: 0; }
.ww-game-page h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.ww-game-page__rules { border-top: 1px solid var(--club-brass-dim); padding-top: 1.5rem; }
.ww-game-page__rules h2 { margin: 0 0 1rem; font: 700 1.4rem/1.2 var(--ww-display); }
.ww-game-page__rules p, .ww-game-page__guest { color: var(--ww-ink-soft); line-height: 1.65; }
.ww-game-page__rules p { margin: 0 0 1rem; }
.ww-game-page__guest { margin-top: 1.5rem; font-size: .9rem; }
/* Ghost: the G-H-O-S-T letters each player has taken, and the banner that
   says how the last round ended. The fragment tiles keep their rules in
   game_fx.css. */

.gh-lives {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ww-line);
}

.gh-lives-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  grid-column: 1;
  min-width: 0;
}

.gh-lives-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.gh-lives-row.is-turn .gh-lives-name::after {
  content: " · to move";
  font-weight: 500;
  color: var(--ww-ink-soft);
}

.gh-lives-tiles {
  display: inline-flex;
  gap: 0.25rem;
  flex: none;
}

.gh-life {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px dashed color-mix(in oklch, var(--ww-line) 80%, var(--club-brass));
  border-radius: 0.3rem;
  font-family: var(--ww-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: color-mix(in oklch, var(--ww-ink-soft) 45%, transparent);
}

.gh-life.is-taken {
  border: 1px solid var(--club-brass);
  background: color-mix(in oklch, var(--club-oxblood) 70%, var(--ww-navy));
  color: var(--ww-paper);
  animation: gh-life-taken var(--ww-dur-long) var(--ww-ease-play) both;
}

.gh-round {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--ww-ink-soft);
}

.gh-round-result {
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--club-brass);
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--ww-paper-2) 85%, transparent);
  font-size: 0.9rem;
}

@keyframes gh-life-taken {
  from { transform: rotateY(90deg); }
  to { transform: none; }
}
/* Leave room for Hondel's readable game panel and separate thumb controls. */
@media (any-pointer: coarse) and (orientation: portrait) {
  .ww-arcade-screen.ww-hondel-screen {
    height: max(34rem, 70dvh);
    aspect-ratio: auto;
  }
}
html, body {
  font-family: "Outfit", "Inter", ui-rounded, system-ui, sans-serif;
  font-optical-sizing: auto;
}

.font-inter,
.ww-display {
  font-family: "Fraunces", "Outfit", ui-serif, Georgia, serif;
}
/* Jotto game styles - Modern muted blue theme */

.jotto-header {
  background-color: #3b82f6;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  text-align: center;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
}

.jotto-logo {
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Letter tracker styles */
.letter-btn .btn {
  background-color: #f3f4f6;
  color: #1e40af;
  border: 2px solid #93c5fd;
  border-radius: 0.5rem;
  transition: var(--ww-transition-panel);
}

.letter-btn .btn:hover {
  transform: scale(1.05);
  background-color: #dbeafe;
  border-color: #60a5fa;
}

.letter-btn.eliminated .btn {
  position: relative;
}

.letter-btn.eliminated .btn::before,
.letter-btn.eliminated .btn::after {
  content: '';
  position: absolute;
  background-color: #ef4444;
  width: 80%;
  height: 3px;
  top: 50%;
  border-radius: 1px;
}

.letter-btn.eliminated .btn::before {
  transform: translateY(-50%) rotate(45deg);
}

.letter-btn.eliminated .btn::after {
  transform: translateY(-50%) rotate(-45deg);
}

.letter-btn.selected .btn {
  background-color: #dbeafe;
  border-color: #3b82f6;
  box-shadow: 0 0 5px #3b82f6;
}

/* Jotto scorecard styles */
.jotto-scorecard {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.jotto-scorecard th, 
.jotto-scorecard td {
  border: 1px solid #bfdbfe;
  padding: 0.75rem;
  text-align: center;
}

.jotto-scorecard th {
  background-color: #3b82f6;
  color: white;
  font-weight: 500;
}

.jotto-scorecard .score-column {
  background-color: #2563eb;
  color: white;
  font-weight: bold;
}

.jotto-scorecard .letter-cell {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f3f4f6;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.jotto-scorecard .jots-cell {
  background-color: #dbeafe;
  color: #1e40af;
  font-weight: 500;
}

/* Guess history styles */
.guess-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  transition: var(--ww-transition-panel);
}

.guess-item:hover {
  background-color: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.guess-word {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #1e40af;
}

.guess-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6;
  color: white;
  font-weight: bold;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 1rem;
}

.matches-label {
  margin-left: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
}
/* ===== Worduel table: guess panel, letter tracker, daily result ======== */

.ww-guess-form-wrap { padding: 1rem; }

.ww-guess-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ww-guess-panel-header .ww-timer-display { margin: 0; }

.ww-guess-panel-body { padding: 1rem; }

.ww-guess-panel .ww-slots { margin-bottom: 0.25rem; }

.ww-slots.is-invalid .ww-slots-stack {
  animation: ww-shake 0.45s var(--ww-ease-out);
}

.ww-guess-help {
  min-height: 1lh;
  margin: 0.35rem 0 0.85rem;
  font-size: 0.78rem;
  text-align: center;
  color: var(--ww-ink-soft);
}

.ww-guess-help.is-error { color: var(--ww-danger-text); font-weight: 700; }

.ww-guess-submit { display: flex; justify-content: center; }

/* --- Letter tracker controls -------------------------------------------- */

.ww-wordkeys-swatch {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.25rem;
  font-family: var(--ww-mono);
  font-size: 0.65rem;
  font-weight: 800;
}

.ww-wordkeys-swatch--out {
  background: var(--ww-mark-out);
  color: var(--ww-mark-out-ink);
  text-decoration: line-through;
}

.ww-wordkeys-swatch--maybe {
  background: var(--ww-mark-maybe);
  color: var(--ww-mark-maybe-ink);
}

.ww-wordkeys-swatch--in {
  background: var(--ww-mark-in);
  color: var(--ww-mark-in-ink);
}

.ww-wordkeys-reset {
  display: inline-grid;
  place-items: center;
  min-width: var(--ww-control-min);
  min-height: var(--ww-control-min);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: transparent;
  color: var(--ww-ink-soft);
  cursor: pointer;
  transition: color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .ww-wordkeys-reset:hover { color: var(--ww-ink); border-color: var(--ww-ink-soft); }
}

.ww-wordkeys-reset:active { transform: translateY(1px); }

/* Give the guess field more room on phones. */
@media (max-width: 40rem) {
  .ww-guess-form-wrap { padding: 0.5rem; }
  .ww-guess-panel-body { padding: 0.75rem 0.5rem; }
  .ww-guess-panel .ww-panel-header { padding: 0.7rem 0.85rem; }
  .ww-guess-panel .ww-panel-subtitle { font-size: 0.78rem; }
}

/* The dedicated tracker stays outside the streamed board, so taking a turn
   never hides the player's notes. Marks also appear on their own guesses. */
.ww-letter-notes { padding: 1rem; }

.ww-letter-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ww-letter-notes-help,
.ww-letter-notes-legend {
  color: var(--ww-ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.5rem 0 0.75rem;
}

.ww-letter-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ww-control-min), 1fr));
  gap: 0.3rem;
}

.ww-tracker-key {
  position: relative;
  width: 100%;
  min-width: var(--ww-control-min);
  min-height: var(--ww-control-min);
  padding: 0.25rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  font-family: var(--ww-mono);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .ww-tracker-key:not(:disabled):hover { border-color: var(--ww-ink-soft); }
}

.ww-tracker-key:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 3px; }
.ww-tracker-key:not(:disabled):active { transform: translateY(1px); }
.ww-tracker-key:disabled { opacity: 0.5; cursor: not-allowed; }

.ww-tracker-letter.eliminated .ww-tracker-key {
  background: var(--ww-mark-out);
  color: var(--ww-mark-out-ink);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.ww-tracker-letter.selected .ww-tracker-key {
  background: var(--ww-mark-maybe);
  color: var(--ww-mark-maybe-ink);
}

.ww-tracker-letter.selected .ww-tracker-key::after {
  content: "?";
  position: absolute;
  top: 0.1rem;
  right: 0.25rem;
  font-size: 0.7rem;
}

/* Confirmed carries a tick as well as the fill, so it reads without colour. */
.ww-tracker-letter.confirmed .ww-tracker-key {
  background: var(--ww-mark-in);
  color: var(--ww-mark-in-ink);
}

.ww-tracker-letter.confirmed .ww-tracker-key::after {
  content: "\2713";
  position: absolute;
  top: 0.1rem;
  right: 0.25rem;
  font-size: 0.7rem;
}

.ww-letter-notes-legend,
.ww-letter-notes-legend > span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ww-letter-notes-legend { flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0; }

/* --- Folding sections ------------------------------------------------------ */

/* The two score-sheet columns and the letter tracker are <details>. On a phone
   they are the three tall things between the guess field and the bottom of the
   page, and a player watching one of them should not have to scroll the other
   two. The native marker goes; the caret on the right turns instead, so a
   header keeps the same left edge open or shut. */
.ww-worduel summary.ww-guess-column-header,
.ww-worduel summary.ww-letter-notes-header {
  cursor: pointer;
  list-style: none;
}

.ww-worduel summary.ww-guess-column-header::-webkit-details-marker,
.ww-worduel summary.ww-letter-notes-header::-webkit-details-marker { display: none; }

.ww-worduel summary.ww-letter-notes-header { min-height: var(--ww-control-min); }

.ww-fold-caret {
  flex: none;
  padding: 0 0.35rem;
  color: var(--ww-ink-soft);
  font-size: 0.8rem;
  transition: transform var(--ww-dur-short) var(--ww-ease-in-out), color var(--ww-dur-micro) var(--ww-ease-out);
}

details[open] > summary .ww-fold-caret { transform: rotate(180deg); }

@media (hover: hover) {
  .ww-worduel summary:hover .ww-fold-caret { color: var(--ww-ink); }
}

/* The reset lives in the fold's content, so it hides with the keys, but is
   drawn at the end of the header row rather than spending a row of its own.
   The summary leaves room for it. */
.ww-letter-notes { position: relative; }
.ww-letter-notes-bar { margin-bottom: 0.75rem; }
.ww-letter-notes-bar .ww-letter-notes-legend { margin: 0; }
.ww-letter-notes-bar .ww-wordkeys-reset { position: absolute; top: 1rem; right: 1.25rem; }
.ww-letter-notes-fold > summary { padding-right: calc(var(--ww-control-min) + 0.5rem); }

/* The status card's Guess link lands the section below the sticky match
   header, not under it. */
.ww-worduel :is(#guess_form, .ww-guess-column, .ww-letter-notes) {
  scroll-margin-top: calc(var(--ww-topbar) + 1rem);
}

/* --- Word-pick deadline --------------------------------------------------- */

.ww-word-deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ww-line);
  border-radius: 999px;
  color: var(--ww-ink);
  font-size: 0.85rem;
}

.ww-word-deadline .ww-timer-value { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; }
.ww-word-deadline.ww-timer-warning .ww-timer-value { color: var(--ww-danger-text); }

.ww-word-deadline-note {
  max-width: 34rem;
  margin: 0.5rem auto 0;
  font-size: 0.75rem;
  color: var(--ww-ink-soft);
}

/* --- Daily result ---------------------------------------------------------- */

.ww-daily-result {
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem;
  color: var(--ww-ink);
  border-bottom: 1px solid var(--ww-line);
  animation: ww-pop var(--ww-dur-long) var(--ww-ease-play) both;
}

.ww-daily-result-head .ww-kicker { margin: 0; }

.ww-daily-result-title {
  margin: 0.2rem 0 0.35rem;
  font-family: var(--ww-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.ww-daily-result-sub { margin: 0; color: var(--ww-ink-soft); }

.ww-daily-word {
  font-family: var(--ww-mono);
  letter-spacing: 0.12em;
  color: var(--ww-gold);
}

.ww-daily-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--ww-line);
}

.ww-daily-stat {
  padding: 0.6rem 0.25rem;
  text-align: center;
}

.ww-daily-stat + .ww-daily-stat { border-left: 1px solid var(--ww-line); }

.ww-daily-stat dd {
  margin: 0;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.ww-daily-stat dt {
  font-size: 0.72rem;
  color: var(--ww-ink-soft);
}

.ww-daily-dist { margin: 0; }

.ww-daily-dist figcaption {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ww-ink-soft);
}

.ww-daily-bars {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-daily-bar {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.ww-daily-bar-label {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  text-align: right;
  color: var(--ww-ink-soft);
}

.ww-daily-bar-track { display: block; }

.ww-daily-bar-fill {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: max(1.8rem, var(--share));
  min-height: 1.5rem;
  padding-inline: 0.45rem;
  border-radius: 0 4px 4px 0;
  background: color-mix(in oklch, var(--ww-ink-soft) 35%, var(--ww-paper-2));
  transform-origin: left center;
  animation: ww-daily-grow var(--ww-dur-long) var(--ww-ease-out) both;
}

.ww-daily-bar:nth-child(2) .ww-daily-bar-fill { animation-delay: 40ms; }
.ww-daily-bar:nth-child(3) .ww-daily-bar-fill { animation-delay: 80ms; }
.ww-daily-bar:nth-child(4) .ww-daily-bar-fill { animation-delay: 120ms; }
.ww-daily-bar:nth-child(5) .ww-daily-bar-fill { animation-delay: 160ms; }
.ww-daily-bar:nth-child(6) .ww-daily-bar-fill { animation-delay: 200ms; }

.ww-daily-bar-count {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ww-ink);
}

.ww-daily-bar.is-today .ww-daily-bar-fill { background: var(--ww-emerald-deep); }
.ww-daily-bar.is-today .ww-daily-bar-count { color: var(--ww-paper); }
.ww-daily-bar.is-today .ww-daily-bar-label { color: var(--ww-ink); font-weight: 800; }

@keyframes ww-daily-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.ww-daily-result-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ww-tip-box {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink-soft);
  font-size: .8rem;
}

.ww-tip-box > i { color: var(--ww-blue); }

/* Worduel's table layout. The notebook belongs beside the words it marks;
   status and conversation occupy the smaller rail on desktop. */
.ww-worduel-match-number {
  font-family: var(--ww-mono);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink-soft);
  white-space: nowrap;
}

.ww-worduel .ww-game-topbar-title { display: grid; gap: .1rem; }
.ww-worduel .ww-game-title { font-size: 1.25rem; }
.ww-worduel .ww-game-grid > * { min-width: 0; }
/* Status is streamed, so these also respond when a live match finishes. */
.ww-worduel .ww-game-grid:has(.ww-status-pill--completed) .ww-grid-status { order: 0; }
.ww-worduel .ww-game-grid:has(.ww-status-pill--waiting, .ww-status-pill--joined, .ww-status-pill--cancelled) .ww-grid-tracker { display: none; }

.ww-worduel .ww-worduel-board { border-radius: var(--ww-radius-sm); container-type: inline-size; }
.ww-worduel .ww-guess-form-wrap { padding: 0; }
.ww-worduel .ww-guess-panel { border: 0; border-radius: 0; }
.ww-worduel .ww-guess-panel-header { padding: 1rem 1.25rem; }
.ww-worduel .ww-guess-panel-body { padding: 1.25rem; }
.ww-worduel .ww-guess-panel .ww-panel-title { font-family: var(--ww-display); font-size: 1.25rem; }
.ww-worduel .ww-guess-help { max-width: 29rem; margin: .8rem auto 1rem; }
.ww-worduel .ww-slot { border-radius: .3rem; }
.ww-worduel .ww-slots-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }

.ww-worduel .ww-sheet-header { padding: 1rem; }
.ww-worduel .ww-sheet-title { margin: 0; font-family: var(--ww-font); letter-spacing: .12em; }
.ww-worduel .ww-score-sheet { padding: .75rem; overflow: visible; }
.ww-worduel .ww-score-sheet-grid {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border: 0;
  border-radius: 0;
}
.ww-worduel .ww-guess-column { min-width: 0; min-height: 0; padding: .5rem; }
.ww-worduel .ww-guess-column--mine { border-right: 0; border-bottom-width: 1px; border-bottom-style: solid; }
.ww-worduel .ww-sheet-player strong { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.ww-worduel .ww-guess-scroll { padding-block: .5rem; }
.ww-worduel .ww-score-sheet .ww-guess-row { justify-content: flex-start; gap: .5rem; margin: 0; padding: .5rem 0; border-radius: 0; }
.ww-worduel .ww-score-sheet .ww-guess-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 1;
  gap: .35rem;
  min-width: 0;
  max-width: 17rem;
}
.ww-worduel .ww-score-sheet .ww-guess-tile { width: 100%; height: auto; aspect-ratio: 1; }
.ww-worduel .ww-score-sheet .ww-guess-tile-inner { font-family: var(--ww-display); font-size: 1.2rem; }
/* Letters and pencil marks share one face. Keeping children in separate 3D
   planes drops the lettering when Chromium repaints a scrolled marked row. */
.ww-worduel .ww-guess-tile-inner { transform-style: flat; }
.ww-worduel .ww-guess-letter { font-family: inherit; }
.ww-worduel .ww-score-sheet .ww-guess-score-badge {
  justify-content: center;
  margin-left: 0;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 2px solid;
  border-radius: 50%;
}
.ww-worduel .ww-score-num { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; }
.ww-worduel .ww-score-sheet .ww-score-label {
  /* Retain the spoken distinction between five shared letters and a win. */
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ww-worduel .ww-empty-guesses-sm { min-height: 4.5rem; padding: 1rem 0; font-size: .8rem; }
.ww-worduel .ww-letter-notes { padding: 1rem 1.25rem 1.25rem; }
.ww-worduel .ww-letter-notes-grid {
  /* Two complete alphabet rows when space permits, with 44px keys below. */
  grid-template-columns: repeat(auto-fit, minmax(max(var(--ww-control-min), calc((100% - 3rem) / 13)), 1fr));
  gap: .25rem;
}
.ww-worduel .ww-letter-notes .ww-tracker-key { border-radius: .25rem; font-family: var(--ww-display); font-weight: 800; }
.ww-worduel .ww-wordkeys-reset:disabled { opacity: .5; cursor: not-allowed; }
.ww-worduel .ww-word-reveal { gap: .2rem; }
.ww-worduel .ww-game-result-words > .grid { grid-template-columns: minmax(0, 1fr); }
.ww-worduel .ww-result-tile { width: 1.9rem; height: 2.2rem; font-family: var(--ww-display); border-radius: .25rem; }

@container (min-width: 34rem) {
  .ww-worduel .ww-score-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ww-worduel .ww-guess-column { padding: .5rem .75rem; }
  .ww-worduel .ww-guess-column--mine { border-bottom: 0; border-right-width: 1px; border-right-style: solid; }
}

@media (min-width: 64.0625rem) {
  .ww-worduel .ww-grid-board { grid-area: board; }
  .ww-worduel .ww-grid-status { grid-area: status; }
  .ww-worduel .ww-grid-tracker { grid-area: tracker; }
  .ww-worduel .ww-grid-chat { grid-area: chat; }
}

/* --- One-screen table ------------------------------------------------------ */

/* A turn is: read the score sheet, mark letters, type a guess. They used to be
   a scroll apart at every width (a jump bar used to ferry a phone between
   them, and on a desktop the tracker sat under the fold). Now all three share
   one screen: the guess field and its submit sit on one row, the sheet's
   columns sit side by side and scroll inside themselves -- each column's
   height is whatever the viewport leaves once the fixed parts are placed,
   never under two rows -- and the tracker keeps its 44px keys. */
.ww-worduel #worduel-guess-form {
  display: grid;
  grid-template-columns: minmax(0, 20rem) auto;
  grid-template-areas: "error error" "slots submit" "help help";
  justify-content: center;
  align-items: center;
  column-gap: .75rem;
}
.ww-worduel #worduel-guess-form #guess_error { grid-area: error; margin-bottom: .5rem; }
.ww-worduel #worduel-guess-form .ww-slots { grid-area: slots; margin: 0; }
.ww-worduel #worduel-guess-form .ww-guess-submit { grid-area: submit; }
.ww-worduel #worduel-guess-form .ww-guess-help { grid-area: help; margin: .5rem auto 0; }
.ww-worduel .ww-slots-stack { width: 100%; }
.ww-worduel .ww-guess-submit .ww-btn { white-space: nowrap; }

.ww-worduel .ww-sheet-header { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; }
.ww-worduel .ww-sheet-title { flex: 1; min-width: 0; }
.ww-worduel .ww-candidate-count { flex: none; margin: 0; }
.ww-worduel .ww-guess-scroll { overflow-y: auto; overscroll-behavior: contain; }

/* On the opponent's turn the field is disabled, so the waiting banner stands
   in for the row of empty tiles instead of stacking above it. */
.ww-worduel .ww-guess-panel--inactive #worduel-guess-form { display: none; }
.ww-worduel .ww-guess-panel-body .ww-banner--wait { margin-bottom: 0; padding: .6rem .85rem; text-align: center; }

@media (min-width: 40.0625rem) {
  .ww-worduel .ww-guess-panel-header { padding: .75rem 1.25rem; }
  .ww-worduel .ww-guess-panel-body { padding: .9rem 1.25rem; }
  .ww-worduel .ww-score-sheet { padding: .25rem .75rem .5rem; }
  .ww-worduel .ww-guess-column-header { min-height: var(--ww-control-min); padding-bottom: .4rem; }
  .ww-worduel .ww-score-sheet .ww-guess-row { padding: .25rem 0; }
  .ww-worduel .ww-score-sheet .ww-guess-tiles { max-width: 13rem; }
  .ww-worduel .ww-score-sheet .ww-guess-tile-inner { font-size: 1rem; }
  .ww-worduel .ww-score-sheet .ww-guess-score-badge { width: 1.9rem; height: 1.9rem; }
  .ww-worduel .ww-letter-notes { padding: .5rem 1.25rem 1rem; }
  .ww-worduel .ww-letter-notes-bar .ww-wordkeys-reset { top: .5rem; }
  .ww-worduel .ww-letter-notes-help { margin: .1rem 0 .5rem; }
  .ww-worduel .ww-letter-notes-bar { margin-bottom: .5rem; }
}

/* A single column -- phone or tablet -- stacks board, tracker, then status
   and chat below the fold. */
@media (max-width: 64rem) {
  .ww-worduel .ww-guess-scroll { max-height: max(6rem, calc(100dvh - 42rem)); }
}

/* The waiting banner is shorter than the row of tiles it replaces. */
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .ww-worduel:has(.ww-guess-panel--inactive) .ww-guess-scroll { max-height: max(6rem, calc(100dvh - 39.5rem)); }
}

/* Desktop: the board and tracker fill the left column to the foot of the
   screen; status and chat share the rail, and the chat's messages scroll
   inside it rather than lengthening the page. Only a live match is held to
   the viewport -- a result panel is allowed to run long. */
@media (min-width: 64.0625rem) {
  /* Setup, waiting rooms and results keep the plain two-row table: board and
     status, then tracker and chat. */
  .ww-worduel .ww-game-grid {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "board status" "tracker chat";
  }
  /* A live match: the board spans beside status and the top of the chat, the
     tracker sits under it, and the grid is at least one screen tall. It is a
     minimum, not a height: the middle row takes the slack, and a board that
     outgrows the screen (an error banner) lengthens the page rather than
     sliding under the tracker. The chat is size-contained so its messages
     never stretch the grid; it fills whatever its rows come to. */
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) {
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "board status" "board chat" "tracker chat";
    min-height: max(32rem, calc(100dvh - var(--ww-topbar) - 3rem));
  }
  /* A result panel runs long; the tracker follows the board rather than
     waiting for the panel to end. */
  .ww-worduel .ww-game-grid:has(.ww-status-pill--completed) {
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "board status" "tracker status" ". chat";
  }
  /* The board fills its rows, so spare height is ruled sheet, not a gap. */
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) .ww-grid-board { align-self: stretch; display: flex; flex-direction: column; }
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) .ww-grid-board > .ww-worduel-board { flex: 1; }
  /* The guess field is beside the status card, so its jump link is noise. */
  .ww-worduel .ww-your-turn-indicator a[href="#game_board"] { display: none; }
  /* The rail stops short of the feedback tab in the corner, which would
     otherwise sit on the Send button. */
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) .ww-grid-chat { align-self: stretch; min-height: 0; margin-bottom: 3.25rem; overflow: hidden; contain: size; }
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) .ww-chat-panel { height: 100%; overflow-y: auto; }
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) .ww-chat-panel .ww-chat { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  /* On a short screen the message log gives way first, so the field to type
     into is never the part cut off. */
  .ww-worduel .ww-game-grid:has(.ww-status-pill--in_progress) .ww-chat-panel .ww-chat-messages { flex: 1; min-height: 0; max-height: none; }
  /* Quick replies stay one row in the narrow rail; the rest scroll sideways. */
  .ww-worduel .ww-chat-presets { flex: none; flex-wrap: nowrap; overflow-x: auto; }
  .ww-worduel .ww-chat-presets .ww-btn { flex: none; }
  .ww-worduel .ww-guess-scroll { max-height: max(6rem, calc(100dvh - 41.5rem)); }
  .ww-worduel:has(.ww-guess-panel--inactive) .ww-guess-scroll { max-height: max(6rem, calc(100dvh - 39rem)); }
}

/* Beside the site sidebar (inline above 1100px) the board column loses
   280px. A slimmer status column and a tighter key gap keep the alphabet on
   two rows of 44px keys, so the tracker still ends above the fold. */
@media (min-width: 68.8125rem) {
  .ww-worduel:has(#primary-sidebar) .ww-game-grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem); }
  .ww-worduel:has(#primary-sidebar) .ww-letter-notes-grid { gap: .125rem; }
}

/* A short desktop (a 1366x768 laptop leaves ~650px of page) drops the
   standing hints -- both are repeated in Quick rules and the tip -- and the
   column captions, so two rows of each column still fit above the tracker. */
@media (min-width: 64.0625rem) and (max-height: 47.5rem) {
  .ww-worduel .ww-guess-panel-header { padding-block: .5rem; }
  .ww-worduel .ww-guess-panel-body { padding-block: .6rem; }
  .ww-worduel .ww-guess-help:not(.is-error) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ww-worduel .ww-sheet-player span { display: none; }
  .ww-worduel .ww-letter-notes-help { display: none; }
  .ww-worduel .ww-chat-presets { display: none; }
  .ww-worduel .ww-guess-scroll { max-height: max(6rem, calc(100dvh - 36rem)); }
  .ww-worduel:has(.ww-guess-panel--inactive) .ww-guess-scroll { max-height: max(6rem, calc(100dvh - 35rem)); }
}

/* Phone: the same table, tighter. */
@media (max-width: 40rem) {
  .ww-worduel .ww-main-inner { padding: .5rem .5rem 1rem; }
  .ww-worduel .ww-game-grid { gap: .5rem; }

  /* Guess field: title and timer on one line, submit beside the tiles. */
  .ww-worduel .ww-guess-panel-header { flex-wrap: nowrap; gap: .5rem; padding: .5rem .75rem; }
  .ww-worduel .ww-guess-panel .ww-panel-title { font-size: 1rem; }
  /* The guess number is the count on your column of the sheet. */
  .ww-worduel .ww-guess-panel .ww-panel-subtitle { display: none; }
  /* The clock keeps its role and name; the visible label goes, since the
     waiting banner already says whose turn it is. */
  .ww-worduel .ww-guess-panel-header .ww-timer-display { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; white-space: nowrap; }
  .ww-worduel .ww-guess-panel-header .ww-timer-display > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ww-worduel .ww-guess-panel-header .ww-timer-value { font-size: 1rem; }
  .ww-worduel .ww-guess-panel-body { padding: .5rem .75rem .6rem; }
  .ww-worduel .ww-guess-panel-body .ww-banner--wait { padding: .45rem .6rem; font-size: .8rem; }
  .ww-worduel #worduel-guess-form { grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; }
  .ww-worduel .ww-slots-row { gap: .3rem; }
  .ww-worduel .ww-guess-submit .ww-btn { padding-inline: .8rem; }
  /* The standing hint stays for screen readers and is in Quick rules below; an
     error still shows. */
  .ww-worduel .ww-guess-help:not(.is-error) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ww-worduel #worduel-guess-form .ww-guess-help.is-error { min-height: 0; margin: .4rem 0 0; }

  .ww-worduel .ww-sheet-header { gap: .6rem; padding: .45rem .75rem; }
  .ww-worduel .ww-sheet-title { gap: .5rem; font-size: .66rem; }
  .ww-worduel .ww-candidate-count { font-size: .7rem; }
  .ww-worduel .ww-score-sheet { padding: 0 .4rem .4rem; }
  .ww-worduel .ww-score-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ww-worduel .ww-guess-column { padding: 0 .35rem; }
  .ww-worduel .ww-guess-column--mine { border-bottom: 0; border-right-width: 1px; border-right-style: solid; }
  .ww-worduel .ww-guess-column-header { min-height: var(--ww-control-min); gap: .3rem; padding: 0; }
  .ww-worduel .ww-sheet-player strong { font-size: .8rem; }
  .ww-worduel .ww-sheet-player span { display: none; }
  .ww-worduel .ww-guess-count { font-size: .72rem; }
  .ww-worduel .ww-guess-scroll { max-height: max(4.25rem, calc(100dvh - 37rem)); padding-block: .25rem; }
  .ww-worduel .ww-score-sheet .ww-guess-row { gap: .25rem; min-height: 0; padding: .12rem 0; }
  .ww-worduel .ww-score-sheet .ww-guess-tiles { gap: .12rem; }
  .ww-worduel .ww-score-sheet .ww-guess-tile-inner { font-size: .8rem; box-shadow: inset 0 -2px var(--ww-tile-edge); }
  .ww-worduel .ww-score-sheet .ww-guess-score-badge { flex: none; width: 1.6rem; height: 1.6rem; border-width: 1px; font-size: .75rem; }
  .ww-worduel .ww-empty-guesses-sm { min-height: 2.5rem; padding: .5rem 0; font-size: .72rem; }

  /* Tracker: header, legend, four rows of keys. */
  .ww-worduel .ww-letter-notes { padding: 0 .5rem .5rem; }
  .ww-worduel .ww-letter-notes-help { display: none; }
  .ww-worduel .ww-letter-notes-grid { grid-template-columns: repeat(auto-fill, minmax(var(--ww-control-min), 1fr)); gap: .2rem; }
  .ww-worduel .ww-letter-notes .ww-tracker-key { font-size: .95rem; }
  .ww-worduel .ww-letter-notes-bar { margin-bottom: .4rem; }
  .ww-worduel .ww-letter-notes-bar .ww-wordkeys-reset { top: 0; right: .5rem; }
  .ww-worduel .ww-letter-notes-legend { gap: .25rem .75rem; font-size: .72rem; }
}

/* Below ~340px of board two columns squeeze a word into 16px tiles; stack them
   and let the page scroll instead. */
@media (max-width: 40rem) {
  @container (max-width: 21rem) {
    .ww-worduel .ww-score-sheet-grid { grid-template-columns: minmax(0, 1fr); }
    .ww-worduel .ww-guess-column--mine { border-right: 0; border-bottom-width: 1px; border-bottom-style: solid; }
    .ww-worduel .ww-score-sheet .ww-guess-tiles { max-width: 10rem; }
  }
}
/* ===== APP SHELL LAYOUT ===== */

.ww-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ===== TOP BAR ===== */

.ww-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 1rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* topbar-autohide tucks the bar away while the page scrolls down. It
     leaves on the exit curve and comes back on the entering one. */
  transition: transform var(--ww-dur-short) var(--ww-ease-out);
}

/* Doubled class: the club layer's drop shadow would otherwise hang below the
   tucked bar as a dark band. Still focusable, so Tab brings it back. */
.ww-topbar.ww-topbar--tucked {
  transform: translateY(-100%);
  box-shadow: none;
  transition-duration: calc(var(--ww-dur-short) * .75);
  transition-timing-function: var(--ww-ease-in);
}

.ww-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ww-topbar-logo {
  font-family: var(--ww-display, inherit);
  font-size: 1.35rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.04em;
  text-transform: none;
  text-decoration: none;
}

.ww-topbar-logo.ww-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ww-topbar-logo:hover {
  color: #a5b4fc;
}

.ww-topbar-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--ww-blue-deep);
  color: var(--ww-paper);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ww-topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ww-topbar-link {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  transition: var(--ww-transition-chrome);
}

.ww-topbar-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.ww-topbar-link--active {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.ww-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ww-topbar-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ww-topbar-stat-value {
  font-weight: 700;
  color: white;
  font-variant-numeric: tabular-nums;
}

.ww-topbar-stat-icon {
  color: #10b981;
}

.ww-topbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

.ww-topbar-user:hover {
  background: rgba(255, 255, 255, 0.12);
}

.ww-topbar-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--ww-blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ww-paper);
  font-size: 0.7rem;
  font-weight: 700;
}

.ww-topbar-username {
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ww-menu-toggle {
  display: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

/* ===== MAIN LAYOUT WITH SIDEBAR ===== */

.ww-layout {
  flex: 1;
  display: flex;
}

/* Whatever main a game's own shell brings (the Medallion hall, the loom,
   the felt) takes the room beside the sidebar and centres within it. */
.ww-layout > main {
  flex: 1 1 auto;
  min-width: 0;
  /* A shell's `margin: auto` means centre across, not down the length of
     the sidebar beside it. */
  margin-block: 0;
}

.ww-sidebar {
  width: 280px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.ww-sidebar-section {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.ww-sidebar-section:last-child {
  border-bottom: none;
}

.ww-sidebar-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.ww-sidebar-cta {
  width: 100%;
  padding: 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.ww-sidebar-cta + .ww-sidebar-cta {
  margin-top: 0.5rem;
}

.ww-sidebar-cta--secondary {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  box-shadow: 0 3px 10px rgba(15, 118, 110, 0.2);
  font-weight: 600;
}

.ww-sidebar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.35);
}

.ww-sidebar-cta i {
  font-size: 1.1rem;
}

.ww-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: var(--ww-transition-chrome);
}

.ww-sidebar-link:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.ww-sidebar-link--active {
  background: #dbeafe;
  color: #1d4ed8;
}

.ww-sidebar-link i {
  width: 1.25rem;
  text-align: center;
  color: #94a3b8;
}

.ww-sidebar-link:hover i,
.ww-sidebar-link--active i {
  color: inherit;
}

/* A second-level nav entry: the practice arena sits under ranked play rather
   than competing with it for attention. */
.ww-sidebar-link--sub {
  padding-left: 2.1rem;
  font-size: .85rem;
  opacity: .82;
}

/* Folding shelves. The summary carries the section title, so a folded shelf
   reads like the old static heading plus a count and a chevron. Only the
   chevron moves; the shelf itself opens instantly so a long list never
   animates its height. */
.ww-sidebar-shelves {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.ww-sidebar-shelf + .ww-sidebar-shelf {
  border-top: 1px solid color-mix(in oklch, var(--ww-line) 60%, transparent);
}

.ww-sidebar-shelf__summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--ww-control-min);
  padding: 0 .75rem;
  margin: 0 -.75rem;
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  color: var(--ww-ink-soft);
  list-style: none;
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out),
              color var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-sidebar-shelf__summary::-webkit-details-marker { display: none; }

.ww-sidebar-shelf__summary .ww-sidebar-title {
  margin-bottom: 0;
  min-width: 0;
  color: inherit;
}

.ww-sidebar-shelf__count {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ww-sidebar-shelf__summary::after {
  content: "";
  flex: 0 0 auto;
  width: .4rem;
  height: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ww-dur-short) var(--ww-ease-in-out);
}

.ww-sidebar-shelf[open] > .ww-sidebar-shelf__summary { color: var(--ww-ink); }

.ww-sidebar-shelf[open] > .ww-sidebar-shelf__summary::after {
  transform: translateY(1px) rotate(-135deg);
}

@media (hover: hover) {
  .ww-sidebar-shelf__summary:hover {
    color: var(--ww-ink);
    background: color-mix(in oklch, var(--ww-line) 45%, transparent);
  }
}

.ww-sidebar-shelf__summary:active { transform: translateY(1px); }

.ww-sidebar-shelf__list {
  display: grid;
  gap: .1rem;
  padding: .15rem 0 .6rem;
}

/* ===== MAIN CONTENT ===== */

.ww-main {
  flex: 1;
  overflow-y: auto;
  background: #f1f5f9;
}

.ww-main-inner {
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ===== LOBBY GRID ===== */

.ww-lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.ww-lobby-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 1rem;
  padding: 2rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.ww-lobby-hero-content h1 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.ww-lobby-hero-content p {
  color: #94a3b8;
  max-width: 400px;
}

.ww-lobby-hero-stats {
  display: flex;
  gap: 1rem;
}

.ww-hero-stat {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  text-align: center;
  min-width: 90px;
}

.ww-hero-stat-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  font-variant-numeric: tabular-nums;
}

.ww-hero-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.ww-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ww-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}

.ww-section-count {
  font-size: 0.8rem;
  color: #64748b;
  padding: 0.2rem 0.5rem;
  background: #e2e8f0;
  border-radius: 1rem;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 1024px) {
  .ww-game-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .ww-game-grid > .ww-grid-status,
  .ww-game-grid > .ww-grid-board,
  .ww-game-grid > .ww-grid-guesses,
  .ww-game-grid > .ww-grid-chat {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  
  .ww-lobby-grid {
    grid-template-columns: 1fr;
  }
}

/* The full desktop chrome needs considerably more room than the game boards.
   Collapse it before navigation and account controls begin competing. */
@media (max-width: 1100px) {
  .ww-menu-toggle {
    display: flex;
  }
  
  .ww-topbar-nav {
    display: none;
  }
  
  .ww-topbar-stat {
    display: none;
  }
  
  .ww-topbar-username {
    display: none;
  }
  
  .ww-sidebar {
    position: fixed;
    top: 4rem;
    left: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--ww-dur-short) var(--ww-ease-out);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    /* The dock sits over the drawer's foot; keep the last shelf above it. */
    padding-bottom: calc(var(--ww-dock) + var(--ww-safe-bottom) + 0.75rem);
  }
  
  .ww-sidebar--open {
    transform: translateX(0);
  }
  
  .ww-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 4rem;
    background: rgba(0, 0, 0, 0.4);
    z-index: 80;
  }
  
  .ww-sidebar--open + .ww-sidebar-overlay {
    display: block;
  }
  
  .ww-main-inner {
    padding: 1rem;
  }
  
  .ww-lobby-hero {
    padding: 1.25rem;
    flex-direction: column;
    text-align: center;
  }
  
  .ww-lobby-hero-content h1 {
    font-size: 1.5rem;
  }
  
  .ww-lobby-hero-stats {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .ww-hero-stat {
    min-width: 70px;
    padding: 0.75rem;
  }
  
  .ww-hero-stat-value {
    font-size: 1.25rem;
  }
}

/* ===== OVERLAY CHROME (wide window, mouse) =====
   With a pointer that can hover, the sidebar floats over the page as glass
   and the top bar, once the page is scrolled past it, tucks itself away, so a
   game gets the whole window and the chrome is one nudge to an edge away. A
   lip of each stays on screen as its handle. The bar stays sticky: at the top
   of a page it takes its own room rather than lying over the first heading.
   topbar-autohide and sidebar own the timing; touch keeps the drawer, since
   nothing there can hover an edge. */
@media (min-width: 1101px) and (hover: hover) {
  .ww-topbar.ww-topbar--tucked {
    transform: translateY(calc(-100% + var(--ww-chrome-lip)));
  }

  .ww-menu-toggle {
    display: flex;
  }

  /* Above the bar, full height: an open sidebar is the thing in use. */
  .ww-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 110;
    transform: translateX(calc(-100% + var(--ww-chrome-lip)));
    transition: transform calc(var(--ww-dur-short) * .75) var(--ww-ease-in);
  }

  .ww-sidebar.ww-sidebar--shown {
    transform: none;
    transition: transform var(--ww-dur-short) var(--ww-ease-out);
  }
}

/* ===== UTILITY: SCROLLBAR ===== */

.ww-sidebar::-webkit-scrollbar,
.ww-main::-webkit-scrollbar {
  width: 6px;
}

.ww-sidebar::-webkit-scrollbar-track,
.ww-main::-webkit-scrollbar-track {
  background: transparent;
}

.ww-sidebar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.ww-main::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 3px;
}

/* ===== SIDEBAR STATS ===== */

.ww-sidebar-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ww-sidebar-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--ww-paper);
  color: var(--ww-ink);
  border-radius: 0.5rem;
  border: 1px solid var(--ww-line);
}

.ww-sidebar-stat-label {
  font-size: 0.8rem;
  color: var(--ww-ink-soft);
}

.ww-sidebar-stat-val {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ww-ink);
  font-variant-numeric: tabular-nums;
}

/* ===== SIDEBAR MATCH ITEMS ===== */

.ww-sidebar-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: var(--ww-transition-chrome);
}

.ww-sidebar-match:hover {
  border-color: #93c5fd;
  background: #f0f9ff;
}

.ww-sidebar-match-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ww-sidebar-match-vs {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.ww-sidebar-turn-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #059669;
  background: #d1fae5;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  display: inline-block;
  width: fit-content;
}

/* ===== GAME TOP BAR ===== */

.ww-game-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 1rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ww-game-topbar-left,
.ww-game-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.ww-game-topbar-right {
  justify-content: flex-end;
}

.ww-game-topbar-center {
  flex: 2;
  display: flex;
  justify-content: center;
}

.ww-back-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #94a3b8;
  transition: var(--ww-transition-chrome);
}

.ww-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.ww-game-topbar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ww-game-title {
  font-weight: 700;
  color: white;
  font-size: 0.9rem;
}

.ww-rated-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
}

.ww-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

.ww-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* ===== VS DISPLAY ===== */

.ww-vs-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ww-player-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ww-player-tag--you {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

.ww-player-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ww-you-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.2);
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
}

.ww-vs-text {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

/* ===== GAME SIDEBAR ===== */

.ww-game-sidebar {
  width: 260px;
  background: #f8fafc;
}

.ww-game-info-card {
  background: white;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.ww-game-info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.ww-game-info-row:last-child {
  border-bottom: none;
}

.ww-info-label {
  font-size: 0.8rem;
  color: #64748b;
}

.ww-info-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
}

.ww-status-pill {
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.ww-status-pill--waiting {
  background: #fef3c7;
  color: #92400e;
}

.ww-status-pill--joined {
  background: #dbeafe;
  color: #1e40af;
}

.ww-status-pill--in_progress {
  background: #dcfce7;
  color: #166534;
}

.ww-status-pill--completed {
  background: #f3f4f6;
  color: #374151;
}

/* ===== LETTER GRID (SIDEBAR) ===== */

.ww-letter-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.25rem;
}

.ww-letter-btn-sm {
  aspect-ratio: 1;
}

.ww-letter-mini {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

.ww-letter-mini:hover {
  background: #f1f5f9;
}

.ww-letter-btn-sm.eliminated .ww-letter-mini {
  background: #fecaca;
  border-color: #ef4444;
  color: #b91c1c;
  text-decoration: line-through;
}

.ww-letter-btn-sm.selected .ww-letter-mini {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.ww-legend-mini {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--ww-ink-soft);
}

.ww-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.15rem;
}

.ww-legend-dot--elim {
  background: #ef4444;
}

.ww-legend-dot--sel {
  background: #3b82f6;
}

.ww-btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.3rem;
  color: #64748b;
  cursor: pointer;
}

.ww-btn-xs:hover {
  background: #e2e8f0;
}

/* ===== GAME PANELS ===== */

.ww-game-panel {
  /* Live tables host this class on <turbo-frame>, which defaults to inline.
     Without a block box the panel background never paints, so Worduel's walnut
     (and every other table material) falls through to the navy room. */
  display: block;
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  height: 100%;
}

.ww-panel-header-compact {
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  font-size: 0.85rem;
  color: #475569;
  flex-wrap: wrap;
  row-gap: 0.45rem;
}

.ww-panel-header-compact > * { white-space: nowrap; }

.ww-chat-panel {
  display: flex;
  flex-direction: column;
}

.ww-chat-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 0.5rem 0;
}

/* ===== GAME GRID RESPONSIVE =====
 *
 * Worduel's table only. Two equal columns gave a clock, a turn banner and a
 * resign button the same half of a 1280px screen as the board -- the status
 * panel stretched to a full viewport of empty navy while the score sheet was
 * squeezed into 590px and clipped its own tiles. The status and the match's
 * side panel are a rail; the board is the game and takes the rest.
 *
 * `align-items: start` keeps each panel the height of its contents rather
 * than stretching it to match the tallest cell.
 */

.ww-game-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 1rem;
}

.ww-grid-status {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.ww-grid-board {
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
}

.ww-grid-tracker {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.ww-grid-chat {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.ww-hide-mobile {
  display: block;
}

@media (max-width: 1024px) {
  .ww-game-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }
  
  .ww-grid-status,
  .ww-grid-board,
  .ww-grid-tracker,
  .ww-grid-chat {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  
  .ww-hide-mobile {
    display: none;
  }
  
  .ww-game-sidebar {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .ww-game-topbar-center {
    display: none;
  }
  
  .ww-game-topbar {
    height: 3rem;
  }
  
  .ww-player-name {
    max-width: 70px;
  }

  /* Worduel has no sidebar: keep both players in a compact header row. */
  .ww-worduel .ww-game-topbar {
    height: auto;
    min-height: 3.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block: 0.5rem;
  }

  .ww-worduel .ww-game-topbar-center {
    display: flex;
    flex: 1 0 100%;
    order: 1;
  }
}

/* ===== GAME MAIN AREA ===== */

.ww-game-main {
  background: #f1f5f9;
}
.ww-skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #111827;
  color: white;
  transform: translateY(-200%);
}

.ww-skip-link:focus {
  transform: translateY(0);
}
.ww-reduced-motion *,
.ww-reduced-motion *::before,
.ww-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

/* The overflow disclosure shares the shell palette even inside Wordweave. */
.ww-topbar-more { position: relative; }
.ww-topbar-more__summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--ww-control-min);
  list-style: none;
  white-space: nowrap;
}
.ww-topbar-more__summary::-webkit-details-marker { display: none; }
.ww-topbar-more__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 2;
  display: grid;
  gap: .15rem;
  min-width: 16rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 32rem);
  overflow: auto;
  padding: .4rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
}
.ww-topbar-more:not([open]) .ww-topbar-more__panel { display: none; }
.ww-topbar-more__shelf { border-radius: var(--ww-radius-sm); }
.ww-topbar-more__shelf + .ww-topbar-more__shelf { border-top: 1px solid var(--ww-line); }
.ww-topbar-more__shelf__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--ww-control-min);
  padding: .45rem .65rem;
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.ww-topbar-more__shelf__summary::-webkit-details-marker { display: none; }
.ww-topbar-more__shelf__summary::after {
  content: "";
  flex: 0 0 auto;
  width: .4rem;
  height: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--ww-dur-short) var(--ww-ease-in-out);
}
.ww-topbar-more__shelf[open] > .ww-topbar-more__shelf__summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.ww-topbar-more__shelf__title { min-width: 0; }
.ww-topbar-more__shelf__count {
  margin-left: auto;
  color: var(--ww-ink-soft);
  font-weight: 600;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.ww-topbar-more__list {
  display: grid;
  gap: .05rem;
  padding: 0 0 .25rem;
}
@media (hover: hover) {
  .ww-topbar-more__shelf__summary:hover { background: var(--ww-paper); color: var(--ww-gold); }
}
.ww-topbar-more__shelf__summary:active { transform: translateY(1px); }
.ww-topbar-more__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--ww-control-min);
  padding: .5rem .75rem;
  color: var(--ww-ink);
  border-radius: var(--ww-radius-sm);
  white-space: nowrap;
}
.ww-topbar-more__link i { width: 1.25em; text-align: center; }
.ww-topbar-more__link--active { background: var(--ww-paper); text-decoration: underline; }
@media (hover: hover) {
  .ww-topbar-more__link:hover { background: var(--ww-paper); color: var(--ww-gold); }
}
.ww-topbar-more__link:active { transform: translateY(1px); }
.ww-topbar-more__summary:active { transform: translateY(1px); }
.ww-topbar-more__link[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* Trophies sits under the catalog, set off as a club link rather than a game. */
.ww-topbar-more__link--club { margin-top: .3rem; border-top: 1px solid var(--ww-line); border-top-left-radius: 0; border-top-right-radius: 0; }
/* The active marker is a block under the label on a plain link, but the
   summary is a flex row, where it became a trailing dash that widened "More"
   enough to push the last link onto a second row. */
.ww-topbar-more__summary { position: relative; }
.ww-topbar-more__summary.ww-topbar-link--active::after {
  position: absolute;
  bottom: .45rem;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}
/* One row from 1101px, where the nav takes its own line: tighten the links
   rather than let the last one wrap. */
@media (min-width: 1101px) and (max-width: 1279px) {
  .ww-topbar-nav { gap: .1rem; }
  .ww-topbar-link { padding-inline: .55rem; }
}

/* ===== SITE FOOTER ===== */

.ww-site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.15rem;
  padding: 1.15rem 1rem calc(1.15rem + var(--ww-safe-bottom));
  border-top: 1px solid var(--ww-line);
  color: var(--ww-ink-soft);
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 768px) {
  .ww-site-footer {
    flex-direction: column;
    padding-bottom: calc(var(--ww-dock) + var(--ww-safe-bottom) + 1rem);
  }
}

.ww-site-footer-legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.4rem;
}

.ww-site-footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  min-height: var(--ww-control-min);
  display: inline-flex;
  align-items: center;
  padding-inline: 0.25rem;
  border-radius: var(--ww-radius-sm);
}

@media (hover: hover) {
  .ww-site-footer-legal a:hover {
    color: var(--ww-ink);
  }
}

.ww-site-footer-legal a:active {
  transform: translateY(1px);
}

.ww-site-footer-dmca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.ww-site-footer-dmca i {
  font-size: 0.85em;
}

/* ===== CONTROLLER ON A PAGE (pad_nav_controller) ===== */

/* The cursor a stick steers over a map, a drawing or a framed game. */
.ww-pad-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--ww-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ww-ink), inset 0 0 0 2px var(--ww-ink);
  pointer-events: none;
}
.ww-pad-cursor::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--ww-focus);
}
.ww-pad-cursor.is-pressed { scale: .8; }
/* ===== The game library (/play) =====
 *
 * The front door: tonight's daily and the matches waiting on the player, then
 * the collection as shelves of cover plates. A tile is one link -- plate, name,
 * blurb, meta -- with no box drawn round it; the plate is the object and the
 * type sits under it the way a title sits under a game box on a shelf.
 *
 * Everything here consumes tokens. The plates themselves are generated by
 * lib/cover_gen.rb (`bin/rails assets:covers`).
 */

/* The shell is a flex column, so without an explicit width the page would
   size to its content -- and a phone shelf's content is a very long row. */
.ww-library {
  box-sizing: border-box;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 5rem;
  color: var(--ww-ink);
}

/* Beside the sidebar the library is the flexible column; min-width: 0 lets a
   long shelf row scroll inside it instead of pushing the page wide. */
.ww-layout > .ww-library {
  flex: 1;
  min-width: 0;
}

/* Author display rules would otherwise beat the UA's [hidden]. */
.ww-library [hidden] { display: none; }

.ww-library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--club-brass-dim);
}
.ww-library-head h1 {
  margin: 0;
  font: 700 clamp(1.9rem, 4vw, 2.8rem)/1.05 var(--ww-display);
}
.ww-library-count {
  margin: 0;
  color: var(--ww-ink-soft);
  font: 500 .8rem/1.2 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Tonight: the daily plate and the "Your move" rail ------------------- */

.ww-library-tonight {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.ww-library-tonight--solo { grid-template-columns: minmax(0, 1fr); }

.ww-library-daily {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  border: 1px solid color-mix(in oklch, var(--club-brass) 45%, transparent);
  border-radius: var(--ww-radius);
  color: var(--club-travertine);
  background-color: color-mix(in oklch, var(--club-jade) 72%, var(--ww-navy));
  background-image: var(--club-felt);
  background-size: 300px 300px;
  background-blend-mode: overlay;
}
.ww-library-daily h2 {
  margin: .1rem 0 .35rem;
  font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--ww-display);
  color: var(--club-travertine);
}
.ww-library-daily__number {
  margin: 0;
  color: var(--club-brass-lit);
  font: 700 .95rem/1 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
.ww-library-daily__state {
  margin: 0 0 1rem;
  color: var(--club-travertine);
  font-size: 1rem;
}
.ww-library-daily__stats {
  display: flex;
  gap: 1.75rem;
  margin: 0 0 1.25rem;
}
.ww-library-daily__stats div { display: flex; flex-direction: column-reverse; gap: .15rem; }
.ww-library-daily__stats dt {
  color: var(--club-celadon);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.ww-library-daily__stats dd {
  margin: 0;
  color: var(--club-travertine);
  font: 700 1.6rem/1 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
.ww-library-daily form { margin: 0; }
.ww-library-daily__action { min-width: 10rem; }
.ww-library-daily__art {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in oklch, var(--club-brass) 55%, transparent);
  border-radius: var(--ww-radius-sm);
  transform: rotate(-2deg);
}

.ww-library-moves {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.1rem 1.1rem .6rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius);
  color: var(--ww-ink);
  background: var(--ww-paper-2);
}
.ww-library-moves__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}
.ww-library-moves h2 { margin: 0; font: 700 1.35rem/1.1 var(--ww-display); }
.ww-library-moves__count {
  color: var(--club-brass-lit);
  font: 600 .78rem/1.2 var(--ww-mono);
  white-space: nowrap;
}
.ww-library-resume { margin: 0; padding: 0; list-style: none; }
.ww-library-resume li + li { border-top: 1px solid var(--ww-line); }

.ww-library-match {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: var(--ww-control-min);
  padding: .55rem .5rem;
  border-radius: var(--ww-radius-sm);
  color: var(--ww-ink);
  text-decoration: none;
  transition: background-color var(--ww-dur-short) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out);
}
.ww-library-match__art {
  display: block;
  width: 4rem;
  height: 3rem;
  border-radius: .35rem;
  border: 1px solid var(--club-brass-dim);
}
.ww-library-match__body { display: grid; gap: .1rem; min-width: 0; }
.ww-library-match__name { font-weight: 700; line-height: 1.2; }
.ww-library-match__rival,
.ww-library-match__status {
  overflow: hidden;
  color: var(--ww-ink-soft);
  font-size: .85rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ww-library-match--yours { box-shadow: inset 3px 0 0 var(--club-brass); }
.ww-library-match--yours .ww-library-match__status { color: var(--club-brass-lit); font-weight: 600; }
.ww-library-match__go { color: var(--ww-ink-soft); font-size: .8rem; }
@media (hover: hover) {
  .ww-library-match:hover { background: color-mix(in oklch, var(--ww-ink) 7%, transparent); }
  .ww-library-match:hover .ww-library-match__go { color: var(--club-brass-lit); }
}
.ww-library-match:active { transform: translateY(1px); background: color-mix(in oklch, var(--ww-ink) 11%, transparent); }

.ww-library-more { margin-top: .25rem; border-top: 1px solid var(--ww-line); }
.ww-library-more__summary {
  display: flex;
  align-items: center;
  min-height: var(--ww-control-min);
  padding: 0 .5rem;
  border-radius: var(--ww-radius-sm);
  color: var(--club-brass-lit);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ww-library-more__summary::-webkit-details-marker { display: none; }
.ww-library-more__summary::after {
  content: "";
  width: .45rem;
  height: .45rem;
  margin-left: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ww-dur-short) var(--ww-ease-in-out);
}
.ww-library-more[open] > .ww-library-more__summary::after { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) {
  .ww-library-more__summary:hover { background: color-mix(in oklch, var(--ww-ink) 7%, transparent); }
}
.ww-library-more__summary:active { background: color-mix(in oklch, var(--ww-ink) 11%, transparent); }

.ww-library-empty { display: grid; gap: .5rem; justify-items: start; padding: .25rem 0 .75rem; }
.ww-library-empty p { margin: 0; color: var(--ww-ink-soft); }
.ww-library-empty .ww-library-empty__lead { color: var(--ww-ink); font-weight: 600; }
.ww-library-empty .ww-btn { margin-top: .5rem; }

/* --- Browsing: chips, search, status ------------------------------------- */

.ww-library-browse { margin-top: 2.25rem; }

.ww-library-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.ww-library-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ww-library-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--ww-control-min);
  padding: 0 1.05rem;
  border: 1px solid color-mix(in oklch, var(--club-brass) 45%, transparent);
  border-radius: 999px;
  color: var(--ww-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ww-dur-short) var(--ww-ease-out), border-color var(--ww-dur-short) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-library-chip:hover { border-color: var(--club-brass); background: color-mix(in oklch, var(--club-brass) 12%, transparent); }
}
.ww-library-chip:active { transform: translateY(1px); background: color-mix(in oklch, var(--club-brass) 20%, transparent); }
.ww-library-chip[aria-current="true"] {
  border-color: var(--club-brass);
  color: var(--club-walnut);
  background: var(--club-brass);
}
.ww-library-chip[aria-current="true"]:active { background: color-mix(in oklch, var(--club-brass) 85%, var(--club-walnut)); }

.ww-library-search { display: grid; gap: .35rem; width: min(100%, 20rem); margin: 0; }
.ww-library-search__label { color: var(--ww-ink-soft); font-size: .85rem; font-weight: 600; }
.ww-library-search__field { position: relative; }
.ww-library-search__field i {
  position: absolute;
  top: 50%;
  left: .9rem;
  color: var(--ww-ink-soft);
  font-size: .85rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.ww-library-search input[type="search"] {
  width: 100%;
  min-height: var(--ww-control-min);
  padding: 0 .9rem 0 2.4rem;
  border: 1px solid color-mix(in oklch, var(--ww-ink) 28%, transparent);
  border-radius: 999px;
  color: var(--ww-ink);
  background: var(--ww-paper);
  font: inherit;
  transition: border-color var(--ww-dur-short) var(--ww-ease-out);
}
.ww-library-search input[type="search"]::placeholder { color: var(--ww-ink-soft); }
@media (hover: hover) {
  .ww-library-search input[type="search"]:hover { border-color: color-mix(in oklch, var(--club-brass) 70%, transparent); }
}
.ww-library-search input[type="search"]:focus { border-color: var(--club-brass); }

.ww-library-statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
  min-height: var(--ww-control-min);
  margin: .5rem 0 .25rem;
}
.ww-library-status {
  margin: 0;
  color: var(--ww-ink-soft);
  font: 500 .82rem/1.3 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
.ww-library-clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--ww-control-min);
  padding: 0 .4rem;
  color: var(--club-brass-lit);
  font-weight: 600;
  text-underline-offset: .2em;
}
@media (hover: hover) {
  .ww-library-clear:hover { color: var(--ww-ink); }
}
.ww-library-clear:active { transform: translateY(1px); }
.ww-library-random {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--ww-control-min);
  margin-left: auto;
  white-space: nowrap;
}
.ww-library-random[hidden] { display: none; }

.ww-library-none {
  display: grid;
  justify-items: start;
  gap: .5rem;
  margin: 1rem 0;
  padding: 1.5rem;
  border: 1px dashed color-mix(in oklch, var(--club-brass) 45%, transparent);
  border-radius: var(--ww-radius);
}
.ww-library-none h3 { margin: 0; font: 700 1.3rem/1.2 var(--ww-display); }
.ww-library-none p { margin: 0 0 .5rem; color: var(--ww-ink-soft); }

/* --- Shelves ------------------------------------------------------------- */

.ww-library-shelf { margin-top: 2rem; }
/* Author display on the row would otherwise beat the UA's closed-details hide. */
.ww-library-shelf:not([open]) > .ww-library-shelf__row { display: none; }
.ww-library-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--club-brass-dim);
  cursor: pointer;
  list-style: none;
  border-radius: var(--ww-radius-sm);
  transition: background-color var(--ww-dur-short) var(--ww-ease-out);
}
.ww-library-shelf__head::-webkit-details-marker { display: none; }
.ww-library-shelf__head h2 { margin: 0; font: 700 1.5rem/1.1 var(--ww-display); }
.ww-library-shelf__count {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ww-ink-soft);
  font: 500 .8rem/1 var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
.ww-library-shelf__count::after {
  content: "";
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ww-dur-short) var(--ww-ease-in-out);
}
.ww-library-shelf[open] > .ww-library-shelf__head .ww-library-shelf__count::after {
  transform: translateY(2px) rotate(-135deg);
}
@media (hover: hover) {
  .ww-library-shelf__head:hover { background: color-mix(in oklch, var(--ww-ink) 5%, transparent); }
}
.ww-library-shelf__head:active { background: color-mix(in oklch, var(--ww-ink) 9%, transparent); }

.ww-library-shelf__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ww-library-tile { min-width: 0; }
.ww-library-tile--pick { grid-column: span 2; grid-row: span 2; }
/* A shelf too short to fill a second row would leave the pick standing beside
   an empty one. */
.ww-library-shelf--short .ww-library-tile--pick { grid-row: auto; }

.ww-library-tile__link {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  color: var(--ww-ink);
  text-decoration: none;
  border-radius: var(--ww-radius-sm);
}
.ww-library-tile__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-navy-2);
  transition: border-color var(--ww-dur-short) var(--ww-ease-out), transform var(--ww-dur-short) var(--ww-ease-out);
}
.ww-library-tile__text { display: grid; gap: .2rem; min-width: 0; }
.ww-library-tile__name {
  margin: 0;
  font: 700 1.08rem/1.2 var(--ww-display);
  color: var(--ww-ink);
}
.ww-library-tile__blurb {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ww-ink-soft);
  font-size: .86rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ww-library-tile__meta {
  overflow: hidden;
  color: var(--club-celadon);
  font: 500 .74rem/1.3 var(--ww-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ww-library-tile__pick {
  color: var(--club-brass-lit);
  font: 700 .74rem/1.3 var(--ww-mono);
}
.ww-library-tile--pick .ww-library-tile__name { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.ww-library-tile--pick .ww-library-tile__blurb { font-size: .95rem; -webkit-line-clamp: 3; }
.ww-library-tile--pick .ww-library-tile__art { border-color: color-mix(in oklch, var(--club-brass) 55%, transparent); }

@media (hover: hover) {
  .ww-library-tile__link:hover .ww-library-tile__art { border-color: var(--club-brass); transform: translateY(-3px); }
  .ww-library-tile__link:hover .ww-library-tile__name { text-decoration: underline; text-decoration-color: var(--club-brass); text-underline-offset: .18em; }
}
.ww-library-tile__link:active .ww-library-tile__art { transform: translateY(0); border-color: var(--club-brass-lit); }

/* Two rows to a shelf. library_controller#clamp marks a row that runs to a
   third, measures it, and tags the tiles from the third row on; the third
   shows as a blurred, fading peek and the shelf opens on hover or when focus
   moves into it. Only where there is a hover and the shelf is a grid -- a
   touch screen can't hover, and a phone shelf is one swipeable row anyway.
   The clip margin keeps the first row's hover lift and focus rings uncut; the
   fade has already reached transparent by then. */
@media (hover: hover) and (min-width: 48.01rem) {
  .ww-library-shelf__row--clamped {
    max-height: var(--shelf-clamp);
    overflow: clip;
    overflow-clip-margin: .5rem;
    transition: max-height var(--ww-dur-long) var(--ww-ease-in-out) 160ms;
  }
  .ww-library-shelf__row--clamped .ww-library-tile--beyond {
    filter: blur(3px);
    opacity: .75;
    mask-image: linear-gradient(to bottom, var(--ww-ink), transparent var(--shelf-peek));
    transition: filter var(--ww-dur-short) var(--ww-ease-out), opacity var(--ww-dur-short) var(--ww-ease-out);
  }
  .ww-library-shelf__row--clamped:is(:hover, :focus-within) {
    max-height: var(--shelf-open);
    transition-delay: 0s;
  }
  .ww-library-shelf__row--clamped:is(:hover, :focus-within) .ww-library-tile--beyond {
    filter: none;
    opacity: 1;
    mask-image: none;
  }
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 64rem) {
  .ww-library-tonight { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .ww-library { padding: 1.25rem 1rem 4rem; }
  .ww-library-daily { grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1rem; padding: 1.1rem; }
  .ww-library-daily__stats { gap: 1.1rem; }
  .ww-library-daily__stats dd { font-size: 1.3rem; }
  .ww-library-daily__action { width: 100%; }
  .ww-library-daily__art { align-self: start; }

  /* Chips become one swipeable row rather than wrapping into three. */
  .ww-library-chips {
    flex-wrap: nowrap;
    width: calc(100% + 2rem);
    margin-inline: -1rem;
    padding: 0 1rem .25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ww-library-search { width: 100%; }

  /* Each shelf is a horizontal, snapping row, so the whole collection is a
     handful of thumb swipes instead of one very long column. */
  .ww-library-shelf__row {
    display: flex;
    gap: .9rem;
    margin-inline: -1rem;
    padding: 0 1rem .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--club-brass-dim) transparent;
  }
  .ww-library-tile { flex: 0 0 10rem; scroll-snap-align: start; }
  .ww-library-tile--pick { flex-basis: 15rem; }
}

/* --- Launcher ------------------------------------------------------------ */
/* A tile's start options in a dialog (library/launch, game_launch_controller).
   The surface matches the app-wide confirm; the controls inside are ordinary
   .ww-btn and .ww-difficulty, so their hover, focus-visible, active and
   disabled states come from the theme layers. This owns surface and rhythm. */

.ww-launch-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  color: var(--ww-ink);
  background-color: var(--ww-navy-2);
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  border: 1px solid var(--club-brass-dim);
  border-top-color: var(--club-brass);
  border-radius: var(--ww-radius-sm);
}
.ww-launch-dialog::backdrop { background: color-mix(in oklch, var(--ww-navy) 78%, transparent); }
.ww-launch-dialog[open] { animation: ww-launch-in var(--ww-dur-short) var(--ww-ease-out) both; }
.ww-launch-dialog[open]::backdrop { animation: ww-launch-fade var(--ww-dur-short) var(--ww-ease-out) both; }
@keyframes ww-launch-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes ww-launch-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ww-launch-dialog__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 0;
}
.ww-launch-dialog__close {
  display: grid;
  place-items: center;
  width: var(--ww-control-min);
  height: var(--ww-control-min);
  margin: .35rem .35rem 0 0;
  color: var(--ww-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  transition: color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-launch-dialog__close:hover { color: var(--ww-ink); border-color: var(--club-brass-dim); }
}
.ww-launch-dialog__close:active { color: var(--club-brass-lit); transform: translateY(1px); }
.ww-launch-dialog__close:disabled { opacity: .5; cursor: not-allowed; }

.ww-launch { display: grid; gap: 1rem; padding: 1.35rem 1.35rem 1.2rem; }
.ww-launch__head {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  padding-right: 2.5rem;
}
.ww-launch__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-navy);
}
.ww-launch__title { display: grid; gap: .25rem; min-width: 0; }
.ww-launch__meta {
  margin: 0;
  color: var(--club-celadon);
  font: 500 .74rem/1.3 var(--ww-mono);
}
.ww-launch__name {
  margin: 0;
  color: var(--ww-ink);
  font: 700 1.35rem/1.2 var(--ww-display);
}
.ww-launch__blurb {
  margin: 0;
  color: var(--ww-ink-soft);
  font-size: .94rem;
  line-height: 1.45;
}
.ww-launch--loading { padding-right: 3.5rem; }
.ww-launch--loading .ww-launch__blurb { color: var(--ww-ink-soft); }

.ww-launch__form { display: grid; gap: 1rem; margin: 0; }
.ww-launch__field { display: grid; gap: .4rem; min-width: 0; }
.ww-launch__field label { color: var(--ww-ink-soft); font-size: .9rem; }
.ww-launch__field select { width: 100%; min-width: 0; }
.ww-launch__practice { margin: 0; padding-top: 1rem; border-top: 1px solid var(--club-brass-dim); }
.ww-launch__practice .ww-practice-form__submit { width: 100%; margin-top: .75rem; }

.ww-launch__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .6rem;
}
.ww-launch__action { margin: 0; }
.ww-launch__actions .ww-btn {
  width: 100%;
  min-height: var(--ww-control-min);
  white-space: nowrap;
  text-align: center;
}
.ww-launch__note { margin: 0; color: var(--ww-ink-soft); font-size: .84rem; line-height: 1.4; }

.ww-launch__lobby {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  justify-self: start;
  min-height: var(--ww-control-min);
  color: var(--club-brass-lit);
  font-size: .9rem;
  text-decoration: underline;
  text-decoration-color: var(--club-brass-dim);
  text-underline-offset: .2em;
}
@media (hover: hover) {
  .ww-launch__lobby:hover { text-decoration-color: var(--club-brass-lit); }
}
.ww-launch__lobby:active { color: var(--club-brass); }
.ww-launch__lobby i { font-size: .8em; }

@media (max-width: 24rem) {
  .ww-launch { padding: 1.1rem 1rem 1rem; }
  .ww-launch__head { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; }
}
/* Lobby polish + animations (no extra deps) */

.ww-hidden {
  display: none !important;
}

/* ===== LOBBY SECTION ===== */

.ww-lobby-section {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ww-matches-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ===== EMPTY STATE ===== */

.ww-empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.ww-empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 1.5rem;
}

.ww-empty-state h3 {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.ww-empty-state p {
  color: #64748b;
  font-size: 0.9rem;
}

/* ===== LIVE INDICATOR ===== */

.ww-live-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
}

.ww-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #10b981;
  animation: ww-pulse-dot 1.5s ease-in-out infinite;
}

@keyframes ww-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.ww-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.6rem 1rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), box-shadow var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ww-btn[disabled],
.ww-btn.ww-is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.ww-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.ww-btn:active {
  transform: translateY(0px) scale(0.99);
}

.ww-btn-primary {
  background: var(--ww-blue);
  color: var(--ww-paper);
}

.ww-btn-secondary {
  background: #eef2ff;
  color: #3730a3;
}

.ww-btn-lg {
  padding: 0.8rem 1.2rem;
}

/* Primary CTA should feel bigger */
.ww-btn-primary.ww-btn-lg {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.ww-badge {
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.ww-badge-you {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.ww-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 250, 251, 0.92) 100%);
  border: 1px solid rgba(229, 231, 235, 0.9);
  transition: transform var(--ww-dur-short) var(--ww-ease-out), box-shadow var(--ww-dur-short) var(--ww-ease-out), border-color var(--ww-dur-short) var(--ww-ease-out);
}

.ww-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

.ww-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(800px circle at 20% 0%, rgba(59, 130, 246, 0.15), transparent 60%),
    radial-gradient(800px circle at 80% 100%, rgba(99, 102, 241, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity var(--ww-dur-short) var(--ww-ease-out);
  pointer-events: none;
}

.ww-card:hover::before {
  opacity: 1;
}

@keyframes ww-pop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

.ww-animate-in {
  animation: ww-pop-in 240ms ease-out both;
}

/* Chess-site style hero + profile */
.ww-hero {
  border-radius: 1.2rem;
  overflow: hidden;
  background: radial-gradient(900px circle at 10% 10%, rgba(99, 102, 241, 0.55), transparent 50%),
    radial-gradient(900px circle at 90% 90%, rgba(37, 99, 235, 0.55), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #111827 55%, #0b1220 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.25);
}

.ww-hero-inner {
  padding: 1.4rem 1.5rem;
}

.ww-profile {
  min-width: 280px;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  padding: 1rem 1rem;
}

.ww-stat {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.75rem 0.75rem;
}

.ww-stat-label {
  color: rgba(199, 210, 254, 0.85);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ww-stat-value {
  color: white;
  font-weight: 900;
  font-size: 1.25rem;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.ww-empty {
  border-radius: 1rem;
  border: 1px dashed rgba(99, 102, 241, 0.35);
  background: rgba(238, 242, 255, 0.55);
  padding: 1.25rem 1.1rem;
}

/* ===== MATCH CARD ENHANCEMENTS ===== */

.ww-card--active {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.9) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.ww-match-avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  font-size: 0.9rem;
}

.ww-status-badge {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ww-status-badge--waiting {
  background: #fef3c7;
  color: #92400e;
}

.ww-status-badge--joined {
  background: #dbeafe;
  color: #1e40af;
}

.ww-status-badge--in-progress {
  background: #dcfce7;
  color: #166534;
}

.ww-status-badge--completed {
  background: #f3f4f6;
  color: #374151;
}

.ww-result-badge {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ww-result-badge--win {
  background: #dcfce7;
  color: #166534;
}

.ww-result-badge--loss {
  background: #fee2e2;
  color: #991b1b;
}

.ww-turn-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  animation: ww-pop-in 240ms ease-out both;
}

.ww-turn-badge--word {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* ===== CHALLENGE CARDS (OPEN CHALLENGES) ===== */

.ww-challenge-card {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: white;
  border: 1px solid #e5e7eb;
  transition: var(--ww-transition-chrome);
}

.ww-challenge-card:hover {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.ww-challenge-card--own {
  opacity: 0.6;
  background: #f9fafb;
}

.ww-challenger-avatar {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ww-blue-deep);
  color: var(--ww-paper);
  font-size: 0.8rem;
}

.ww-rating-badge {
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: #f3f4f6;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.ww-wager-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ww-own-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ww-btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.ww-empty-challenges {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #fafafa;
  border-radius: 0.75rem;
  border: 1px dashed #e5e7eb;
}

/* ===== CREATE CHALLENGE PAGE ===== */

.ww-create-icon {
  animation: ww-pop-in 400ms ease-out both;
}

.ww-step-num {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ww-balance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: white;
  border-radius: 0.4rem;
  border: 1px solid #d1fae5;
}

.ww-wager-input {
  background: white;
  font-variant-numeric: tabular-nums;
}

.ww-wager-input:focus {
  outline: none;
}

.ww-quick-wager {
  padding: 0.3rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: white;
  border: 1px solid #d1fae5;
  color: #047857;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}

.ww-quick-wager:hover {
  background: #ecfdf5;
  border-color: #10b981;
}

.ww-quick-wager:active {
  transform: scale(0.95);
}

/* ===== PANEL STYLES (shared) ===== */

.ww-panel {
  border-radius: 0.75rem;
  background: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.ww-panel-header {
  padding: 1rem;
  background: linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
  border-bottom: 1px solid #e5e7eb;
}

.ww-panel-title {
  font-weight: 700;
  font-size: 1rem;
  color: #1f2937;
}

.ww-panel-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.15rem;
}

.ww-discover,.ww-game-card,.ww-board-shell{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.ww-discover-catalog{display:grid;gap:.35rem;margin-top:1rem}
.ww-discover-shelf{border:1px solid var(--ww-line);border-radius:var(--ww-radius-sm);background:color-mix(in oklch,var(--ww-paper-2) 70%,transparent)}
.ww-discover-shelf__summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:var(--ww-control-min);padding:.7rem 1rem;border-radius:var(--ww-radius-sm);color:var(--ww-ink);font-weight:700;cursor:pointer;list-style:none}
.ww-discover-shelf__summary::-webkit-details-marker{display:none}
.ww-discover-shelf__summary::after{content:"";flex:0 0 auto;width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--ww-dur-short) var(--ww-ease-in-out)}
.ww-discover-shelf[open]>.ww-discover-shelf__summary::after{transform:translateY(2px) rotate(-135deg)}
.ww-discover-shelf__title{font-family:var(--ww-display);font-size:1.05rem}
.ww-discover-shelf__count{margin-left:auto;color:var(--ww-ink-soft);font-weight:600;font-size:.8rem;font-variant-numeric:tabular-nums}
@media (hover:hover){.ww-discover-shelf__summary:hover{background:color-mix(in oklch,var(--ww-ink) 6%,transparent)}}
.ww-discover-shelf__summary:active{transform:translateY(1px);background:color-mix(in oklch,var(--ww-ink) 10%,transparent)}
.ww-discover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;padding:.15rem .85rem 1rem}
.ww-discover-card{min-height:7rem;display:flex;flex-direction:column;gap:.3rem;justify-content:center;padding:1rem;border-radius:.8rem;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;transition:var(--ww-transition-chrome)}
.ww-discover-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.1)}
.ww-discover-card--active{box-shadow:inset 3px 0 0 var(--club-brass)}
.ww-discover-card i{font-size:1.35rem;color:var(--ww-blue-deep)}
.ww-discover-card span{color:#64748b;font-size:.82rem}
.ww-game-filter{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 1rem}.ww-filter-chip{white-space:nowrap;border:1px solid #cbd5e1;border-radius:999px;padding:.5rem .85rem;font-weight:700;color:#475569;background:#fff}.ww-filter-chip--active{color:var(--ww-paper);background:var(--ww-blue-deep);border-color:var(--ww-blue-deep)}.ww-game-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.ww-game-card{display:flex;flex-direction:column;min-height:19rem}.ww-game-card h2{font-size:1.45rem;font-weight:800;margin:.35rem 0}.ww-game-card-icon{width:3rem;height:3rem;display:grid;place-items:center;border-radius:.8rem;color:var(--ww-paper);background:var(--ww-blue-deep);margin-bottom:1rem}.ww-game-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:1rem}.ww-game-card-meta span{padding:.25rem .45rem;border-radius:.35rem;background:#f1f5f9;color:#475569;font-size:.72rem;font-weight:700}.ww-game-card-actions{display:flex;gap:.5rem;margin-top:1rem}.ww-rank-legend{display:flex;flex-wrap:wrap;gap:.35rem .75rem;margin:.75rem 0}.ww-rank-legend>div{display:flex;align-items:baseline;gap:.35rem}.ww-rank-legend dt{font-weight:700;min-width:1.1em;text-align:center}.ww-rank-legend dd{margin:0;color:var(--ww-muted,#64748b)}
.ww-board-header,.ww-board-scorebar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.ww-board-scorebar{margin-bottom:1rem}.ww-board-player{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border:2px solid transparent;border-radius:.75rem}.ww-board-player--active{border-color:#22c55e;background:#f0fdf4}.ww-strategy-board{display:grid;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));width:min(100%,38rem);aspect-ratio:1;margin:1rem auto;border:4px solid #334155;border-radius:.5rem;overflow:hidden}.ww-board-cell{min-width:0;border:1px solid rgba(15,23,42,.13);background:#e2e8f0;color:#fff;font-weight:900;font-size:clamp(.7rem,2vw,1.1rem);cursor:pointer}.ww-board-cell:nth-child(odd){background:#cbd5e1}.ww-board-cell:hover,.ww-board-cell:focus-visible{outline:3px solid #f59e0b;outline-offset:-3px;z-index:1}.ww-owner-1{background:var(--ww-owner-1-bg)!important;color:var(--ww-owner-1-ink)!important}.ww-owner-2{background:var(--ww-owner-2-bg)!important;color:var(--ww-owner-2-ink)!important}.ww-board-cell--selected{box-shadow:inset 0 0 0 4px #facc15}.ww-board-cell--destination{box-shadow:inset 0 0 0 4px #22c55e}.ww-move-form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}.ww-route-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.65rem;padding:2rem;border-radius:1rem;background:linear-gradient(135deg,#dbeafe,#dcfce7)}.ww-route{width:100%;padding:.75rem;border:3px dashed #64748b;border-radius:999px;background:#fff;font-weight:800}.ww-waiting-banner{text-align:center;padding:1rem;border-radius:.75rem;background:#f8fafc;color:#475569;font-weight:700}.ww-board-promo{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem;border-radius:1.25rem;color:#fff;background:linear-gradient(135deg,#172554,#312e81 55%,#581c87)}
.ww-board-cell--destination-option{box-shadow:inset 0 0 0 4px #22c55e,0 0 18px rgba(34,197,94,.75);animation:ww-legal-pulse 1.2s ease-in-out infinite}.ww-board-cell:disabled:not(.ww-board-cell--destination-option){cursor:default;opacity:.72}.ww-board-tools{display:flex;gap:.5rem;padding:.35rem;border-radius:999px;background:#e2e8f0}.ww-board-tool{padding:.55rem .9rem;border-radius:999px;font-weight:800;color:#475569}.ww-board-tool.is-active{color:#fff;background:#334155;box-shadow:0 2px 8px rgba(15,23,42,.25)}@keyframes ww-legal-pulse{50%{filter:brightness(1.18)}}@media(prefers-reduced-motion:reduce){.ww-board-cell--destination-option{animation:none}}
@media(max-width:760px){.ww-discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-game-card-actions,.ww-board-promo{align-items:stretch;flex-direction:column}.ww-board-shell{padding:.75rem}}

.ww-game-card-meta { margin-top: 1rem; padding-top: 0; }
.ww-game-card-rating { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 1rem; color: #64748b; font-size: .78rem; }
.ww-game-card-rating strong { color: var(--ww-ink); font-size: 1.15rem; }
.ww-board-rules { margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #f8fafc; }
.ww-board-rules summary { cursor: pointer; font-weight: 800; color: #334155; }
.ww-board-rules p { margin-top: .5rem; color: #475569; line-height: 1.5; }
.ww-resource-line { display: flex; gap: .65rem; margin-top: .2rem; color: #475569; font-size: .78rem; font-weight: 700; }
.ww-board-cell:disabled { cursor: not-allowed; opacity: .72; }
.ww-board-cell--legal { opacity: 1 !important; box-shadow: inset 0 0 0 3px #22c55e; }
.ww-board-cell--revealed { box-shadow: inset 0 0 0 2px #f59e0b; }
.ww-battle-report { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; padding: .7rem 1rem; border-radius: .8rem; background: var(--ww-paper-2); border: 1px solid var(--ww-line); color: var(--ww-ink); font-size: .85rem; font-weight: 600; }
.ww-battle-report i { color: var(--club-brass-lit); }
.ww-route-map { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ww-route--express { border-color: #f59e0b; font-weight: 800; }

.ww-scrolltown-feed { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; padding: .85rem 1rem; border-radius: .85rem; background: #fff7ed; color: #7c2d12; border: 1px solid #fed7aa; }
.ww-die { display: grid; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .55rem; background: #fff; border: 2px solid #fb923c; font-size: 1.15rem; font-weight: 900; box-shadow: 2px 2px 0 #fdba74; }
.ww-scrolltown-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; padding: 1rem; border-radius: 1.2rem; background: #fef3c7; border: 4px solid #422006; }
.ww-scrolltown-space { position: relative; min-height: 6.5rem; padding: .65rem; border-radius: .75rem; background: #fff; border: 2px solid #e7e5e4; color: #292524; font-size: .75rem; box-shadow: 0 2px 0 rgba(66,32,6,.15); }
.ww-scrolltown-space strong { display: block; margin-top: .25rem; line-height: 1.2; }
.ww-scrolltown-space small { display: block; margin-top: .35rem; color: #78716c; }
.ww-scrolltown-space--event { background: #fce7f3; border-color: #f9a8d4; }
.ww-scrolltown-space--bonus { background: #dcfce7; border-color: #86efac; }
.ww-scrolltown-space--rest { background: #e0f2fe; border-color: #7dd3fc; }
.ww-scrolltown-space--start { background: #ede9fe; border-color: #c4b5fd; }
.ww-scrolltown-space--owned-1 { box-shadow: inset 0 0 0 3px #4f46e5; }
.ww-scrolltown-space--owned-2 { box-shadow: inset 0 0 0 3px #e11d48; }
.ww-scrolltown-number { color: #a8a29e; font-weight: 900; }
.ww-scrolltown-token { display: inline-grid; width: 1.55rem; height: 1.55rem; place-items: center; margin: .4rem .15rem 0 0; border-radius: 999px; font-weight: 900; font-size: .7rem; }
.ww-roll-btn { display: block; min-width: 12rem; margin: 1rem auto 0; }
@media (max-width: 760px) { .ww-scrolltown-board { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .65rem; } .ww-scrolltown-space { min-height: 5.75rem; } }

/* Emerald lounge */
.ww-casino-hero,.ww-arena-hero{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem;border-radius:1.2rem;color:#fff;background:linear-gradient(135deg,#052e16,#065f46 55%,#134e4a);box-shadow:0 14px 35px rgba(6,78,59,.2)}.ww-casino-hero h1,.ww-arena-hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;line-height:1}.ww-casino-balance{display:flex;flex-direction:column;padding:1rem 1.4rem;border:1px solid rgba(255,255,255,.25);border-radius:1rem;background:rgba(255,255,255,.1)}.ww-casino-balance strong{font-size:1.7rem}.ww-casino-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.25rem}.ww-casino-card,.ww-casino-table{padding:1.4rem;border:1px solid #d1fae5;border-radius:1rem;background:#fff;box-shadow:0 8px 24px rgba(6,78,59,.08)}.ww-casino-card>i{font-size:1.8rem;color:#059669}.ww-casino-card h2{margin-top:.75rem;font-size:1.35rem;font-weight:900}.ww-casino-card p{min-height:3rem;margin-top:.35rem;color:#475569}.ww-casino-card small{display:block;color:var(--ww-emerald);font-weight:700}.ww-casino-bet{display:flex;gap:.5rem;margin-top:1rem}.ww-fair-play{margin-top:1rem;padding:1rem;border-radius:.8rem;background:#ecfdf5;color:#065f46}.ww-fair-play summary{cursor:pointer;font-weight:800}.ww-fair-play p{margin-top:.6rem;line-height:1.55}.ww-casino-history{margin-top:1rem}.ww-casino-history-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;padding:.7rem;border-top:1px solid #e2e8f0}.ww-reels{display:flex;justify-content:center;gap:1rem;margin:2rem 0}.ww-reels>span{display:grid;width:6rem;height:7rem;place-items:center;border:4px solid #064e3b;border-radius:1rem;background:#f0fdf4;font-size:3rem;box-shadow:inset 0 0 20px rgba(6,78,59,.15)}.ww-eggs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}.ww-egg{padding:1.25rem;border:2px solid #a7f3d0;border-radius:1rem;background:#ecfdf5}.ww-egg span{display:block;font-size:3.5rem}.ww-egg strong{display:block}.ww-egg--coral{background:#fff1f2}.ww-egg--sunny{background:#fefce8}.ww-flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.5rem}.ww-flip-card input{position:absolute;opacity:0}.ww-flip-card>span{display:grid;aspect-ratio:1;place-items:center;border:3px solid #059669;border-radius:.8rem;background:#064e3b;color:#fff;font-size:2rem;font-weight:900;cursor:pointer}.ww-flip-card input:checked+span{outline:4px solid #fbbf24}.ww-flip-card--matched>span{background:#d1fae5;color:#064e3b}.ww-casino-result{display:flex;flex-direction:column;align-items:center;margin-top:1.5rem;padding:1rem;border-radius:.8rem;background:#f8fafc;text-align:center}.ww-casino-result--done{background:#ecfdf5;color:#065f46}

/* Three.js arena */
.ww-arena-hero{display:block;background:linear-gradient(135deg,#111827,#312e81 58%,#7c2d12)}.ww-arena-hero h1,.ww-arena-hero p{color:#fff}.ww-arena-shell{margin-top:1rem;overflow:hidden;border:1px solid #334155;border-radius:1rem;background:#020617;box-shadow:0 16px 40px rgba(15,23,42,.25)}.ww-arena-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.75rem;color:#fff;background:#0f172a}.ww-fighter-hud{display:grid;grid-template-columns:1fr auto;gap:.15rem .75rem;padding:.5rem .75rem;border-radius:.6rem}.ww-fighter-hud small{grid-column:1/-1}.ww-fighter-hud:last-child{text-align:right}.ww-arena-status{font-weight:900;text-align:center}.ww-arena-viewport{width:100%;min-height:360px;outline:none}.ww-arena-viewport:focus-visible{box-shadow:inset 0 0 0 4px #fbbf24}.ww-arena-viewport canvas{display:block;width:100%!important}.ww-arena-controls{display:flex;justify-content:center;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:.75rem;color:#cbd5e1;background:#0f172a;font-size:.8rem}/* Arena choices use the same surfaces and ink as the game lobby. */
.ww-roster, .ww-stage-picker {
  padding: 1.25rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  background: var(--ww-paper);
  color: var(--ww-ink);
}
.ww-roster .ww-section-title, .ww-stage-picker .ww-section-title,
.ww-roster-card strong { color: var(--ww-ink); }
.ww-roster-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.ww-roster-card { padding: .75rem; border-radius: var(--ww-radius-sm); background: var(--ww-paper-2); border: 1px solid var(--ww-line); color: var(--ww-ink); }
.ww-roster-actions { display: flex; gap: .35rem; margin-top: .5rem; }
.ww-roster-card button {
  min-width: var(--ww-control-min); min-height: var(--ww-control-min);
  padding: .4rem; border: 1px solid var(--ww-line); border-radius: var(--ww-radius-sm);
  background: var(--ww-paper); color: var(--ww-ink); font-size: .8rem; font-weight: 800;
}
.ww-roster-card button[aria-pressed="true"] { border-color: var(--ww-gold); color: var(--ww-gold); }
.ww-roster-card button:active { transform: translateY(1px); }
.ww-roster-card button:disabled { opacity: .5; cursor: not-allowed; }
.ww-stage-picker .ww-filter-chip { border-color: var(--ww-line); background: var(--ww-paper-2); color: var(--ww-ink); }
@media (hover: hover) {
  .ww-roster-card button:hover { border-color: var(--ww-gold); background: var(--ww-paper-2); }
}

.ww-arena-unsupported{display:grid;min-height:360px;place-content:center;padding:2rem;color:#cbd5e1;text-align:center;line-height:1.6}.ww-arena-playfield{position:relative}.ww-damage-meter{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:950;line-height:1;color:color-mix(in srgb,#ef4444 calc(var(--damage,0)*100%),#fff);font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(239,68,68,.3)}.ww-fighter-hud small{color:#fbbf24;letter-spacing:.2em}.ww-arena-result{position:absolute;z-index:3;inset:0;display:grid;place-content:center;justify-items:center;padding:2rem;color:#fff;text-align:center;background:rgba(2,6,23,.82);backdrop-filter:blur(7px);animation:ww-arena-result-in .35s ease-out}.ww-arena-result[hidden]{display:none}.ww-arena-result h2{margin:.25rem 0;font-size:clamp(2.3rem,7vw,5rem);font-weight:950;text-transform:uppercase;text-shadow:0 4px 0 #7c2d12}.ww-arena-result p{font-size:1.1rem}.ww-arena-result .ww-btn{margin-top:1.25rem}.ww-gamepad-state{padding:.3rem .6rem;border:1px solid #334155;border-radius:999px;color:#a5f3fc}@keyframes ww-arena-result-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
.ww-control-card{display:flex;align-items:center;justify-content:center;gap:.35rem;flex-wrap:wrap}.ww-control-card b{margin-right:.2rem;color:#fff}.ww-control-card kbd{min-width:1.7rem;padding:.18rem .38rem;border:1px solid #64748b;border-bottom-width:3px;border-radius:.3rem;background:#1e293b;color:#fff;font:800 .7rem/1.2 ui-monospace,monospace;text-align:center}.ww-arena-status{min-width:7rem;font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.06em;text-shadow:0 2px 12px rgba(34,211,238,.6)}
.ww-cpu-toggle[aria-pressed="true"]{border-color:#67e8f9;background:#0e7490;color:#fff;box-shadow:0 0 0 2px rgba(103,232,249,.25),0 0 18px rgba(34,211,238,.25)}
@media(max-width:760px){.ww-casino-hero{align-items:flex-start;flex-direction:column}.ww-casino-grid{grid-template-columns:1fr}.ww-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-arena-hud{grid-template-columns:1fr 1fr}.ww-arena-status{grid-column:1/-1;grid-row:2}.ww-flip-grid{gap:.4rem}.ww-reels>span{width:4.5rem;height:5.5rem}.ww-casino-history-row{grid-template-columns:1fr auto}}
/* ===== The open shelf =====
 *
 * Other people's games, hosted under their licences: the credits panel under
 * each cabinet, the /credits page that lists them all, and the text-adventure
 * screen, which needs height rather than a TV's proportions on a phone.
 */

.ww-open-credits {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--club-brass-dim);
  color: var(--ww-ink);
}

.ww-open-credits__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .75rem 1.5rem;
  margin: .75rem 0 0;
}
.ww-open-credits__list dt {
  color: var(--ww-ink-soft);
  font: 600 .75rem/1.2 var(--ww-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ww-open-credits__list dd { margin: .2rem 0 0; }

.ww-open-credits__links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: .9rem 0 0;
}
.ww-open-credits__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ww-control-min);
  color: var(--ww-ink);
  text-decoration: underline;
  text-decoration-color: var(--club-brass);
  text-underline-offset: .2em;
  transition: text-decoration-color var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-open-credits__links a:hover { text-decoration-color: var(--ww-ink); }
}

.ww-credits__games,
.ww-credits__runtimes {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.ww-credits__game {
  padding: 1rem 0;
  border-bottom: 1px solid var(--club-brass-dim);
}
.ww-credits__game h3 { margin: 0; font: 700 1.2rem/1.2 var(--ww-display); }
.ww-credits__game h3 a { color: var(--ww-ink); }
.ww-credits__runtimes li { margin: .6rem 0; line-height: 1.5; }

/* A text adventure on a phone wants rows of type, not a 4:3 sliver. */
@media (max-width: 40rem) {
  .ww-arcade-screen.ww-arcade-screen--text {
    height: 70dvh;
    aspect-ratio: auto;
  }
}

/* Desktop builds under a cabinet that ships them (Nethweaver). */
.ww-downloads {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--club-brass-dim);
  color: var(--ww-ink);
}
.ww-downloads__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem 1.5rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.ww-downloads__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--ww-control-min);
  color: var(--ww-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--club-brass);
  text-underline-offset: .2em;
}
.ww-downloads__size,
.ww-downloads__note {
  color: var(--ww-ink-soft);
  font: .75rem/1.3 var(--ww-mono);
}
.ww-downloads__note { display: block; }
/* Pinpoint: a street to read, a map to pin, a reveal, and a summary.
   The street fills the screen the way GeoGuessr's does; everything else floats
   over it on dark glass with a brass hairline, so the picture stays the thing
   you look at. Colours are tokens; the map draws its own palette from the
   custom properties declared on .pp-map. */

/* The match page is exactly one screen tall: the site header takes what it
   takes, and the board -- street, reveal or summary -- fills the rest, so the
   Guess button is never below the fold. */
.pp-page { display: flex; flex-direction: column; height: 100dvh; }
.pp-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.pp-main > .pp-board { flex: 1; min-height: 0; }

.pp-board {
  --pp-glass: color-mix(in oklch, var(--ww-navy) 82%, transparent);
  --pp-glass-strong: color-mix(in oklch, var(--ww-navy) 94%, transparent);
  --pp-hairline: color-mix(in oklch, var(--club-brass) 38%, transparent);
  --pp-one: var(--ww-sky);
  --pp-two: var(--ww-danger);
  --pp-answer: var(--ww-emerald);
  --pp-mine: var(--ww-gold);
  display: grid;
  color: var(--ww-ink);
}

/* --- Cards (waiting, cancelled, spectating) ----------------------------- */

.pp-card {
  display: grid;
  gap: 0.9rem;
  margin: clamp(1rem, 5vw, 3rem) auto;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
}

.pp-card--narrow { width: min(34rem, calc(100% - 2rem)); }

.pp-card-title {
  font-family: var(--ww-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
}

.pp-card p { color: var(--ww-ink-soft); }

/* --- The stage: the street and everything floating over it -------------- */

.pp-stage {
  position: relative;
  height: 100%;
  min-height: 24rem;
  overflow: hidden;
  background: var(--ww-navy);
  color: var(--ww-ink);
  isolation: isolate;
}

.pp-scene-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.pp-stage.is-dragging .pp-scene-view { cursor: grabbing; }
.pp-stage--nmpz .pp-scene-view { cursor: default; }
.pp-scene-view:focus-visible { outline-offset: -6px !important; }

.pp-scene-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  background: var(--ww-navy);
  color: var(--ww-ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  z-index: 1;
}

.pp-scene-loading[hidden] { display: none; }

.pp-scene-loading-mark {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--pp-hairline);
  border-top-color: var(--club-brass);
  border-radius: 50%;
  animation: pp-spin 900ms linear infinite;
}

@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp-stage-top {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  justify-items: end;
  gap: 0.5rem;
  max-width: calc(100% - 1.5rem);
  pointer-events: none;
}

.pp-stage-top > * { pointer-events: auto; }

.pp-hud {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass);
  color: var(--ww-ink);
  overflow: hidden;
}

.pp-hud-cell {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.9rem;
  min-width: 4.5rem;
}

.pp-hud-cell + .pp-hud-cell { border-left: 1px solid var(--ww-line); }

.pp-hud-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.pp-hud-cell strong {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  white-space: nowrap;
}

.pp-hud-timer.ww-timer-warning strong { color: var(--ww-danger-text); }

/* Duel health */
.pp-health {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.75rem;
  width: min(30rem, 100%);
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass);
}

.pp-health-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.5rem; }
.pp-health-side.is-player-one { --pp-pin: var(--pp-one); }
.pp-health-side.is-player-two { --pp-pin: var(--pp-two); }

.pp-health-name {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-health-bar {
  position: relative;
  grid-column: 1 / -1;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ww-ink) 14%, transparent);
  overflow: hidden;
}

.pp-health-fill,
.pp-health-lost {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
}

.pp-health-lost { background: var(--ww-ink); transform: scaleX(var(--pp-health-before, var(--pp-health))); opacity: 0.55; }
.pp-health-fill { background: var(--pp-pin); transform: scaleX(var(--pp-health)); }
.pp-health-side.is-hit .pp-health-lost { animation: pp-health-drain var(--ww-dur-long) var(--ww-ease-in-out) 900ms both; }

@keyframes pp-health-drain {
  from { transform: scaleX(var(--pp-health-before)); }
  to { transform: scaleX(var(--pp-health)); }
}

.pp-health-value {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.pp-health-damage {
  margin-left: 0.3rem;
  color: var(--ww-danger-text);
  font-weight: 700;
}

.pp-health-multiplier {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ww-warning-text);
}

/* Compass and view tools, top left. */
.pp-compass {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  left: 0.75rem;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--pp-hairline);
  border-radius: 50%;
  background: var(--pp-glass);
  pointer-events: none;
}

.pp-compass-rose { position: absolute; inset: 0; }

.pp-compass-n,
.pp-compass-s {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 0.42rem solid transparent;
  border-right: 0.42rem solid transparent;
  translate: -50% 0;
}

.pp-compass-n {
  top: 0.3rem;
  border-bottom: 1.1rem solid var(--ww-danger);
  font-size: 0;
}

.pp-compass-s {
  bottom: 0.3rem;
  border-top: 1.1rem solid var(--ww-ink-soft);
}

.pp-scene-tools {
  position: absolute;
  z-index: 3;
  top: 4.6rem;
  left: 0.75rem;
  display: grid;
  gap: 0.4rem;
}

.pp-tool {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass);
  color: var(--ww-ink);
  font-size: 0.95rem;
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .pp-tool:hover { background: var(--pp-glass-strong); border-color: var(--club-brass); }
}

.pp-tool:active { transform: translateY(1px); }
.pp-tool:disabled { opacity: 0.5; cursor: not-allowed; }
.pp-tool[aria-pressed="true"] { border-color: var(--club-brass); color: var(--club-brass-lit); }

/* Arrows along the road: each sits on a ring around the bottom centre, turned
   to the direction it will move you. */
.pp-move {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.25rem;
  width: 8rem;
  height: 8rem;
  translate: -50% 0;
  pointer-events: none;
}

.pp-move-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border: 2px solid color-mix(in oklch, var(--ww-ink) 70%, transparent);
  border-radius: 50%;
  background: color-mix(in oklch, var(--ww-navy) 55%, transparent);
  color: var(--ww-ink);
  font-size: 1.1rem;
  pointer-events: auto;
  /* Out along the ring at the road's bearing, then turned back upright so the
     button stays a circle; only the arrow inside turns. */
  transform: rotate(var(--pp-arrow, 0deg)) translateY(-2.4rem) rotate(calc(-1 * var(--pp-arrow, 0deg)));
}

.pp-move-arrow i {
  display: block;
  transform: rotate(var(--pp-arrow, 0deg));
  transition: background-color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .pp-move-arrow:hover { background: color-mix(in oklch, var(--club-brass) 45%, var(--ww-navy)); border-color: var(--club-brass-lit); }
}

.pp-move-arrow:active { background: var(--club-brass); color: var(--ww-navy); }
.pp-stage.is-loading .pp-move-arrow { opacity: 0.4; }

.pp-scene-notes {
  position: absolute;
  z-index: 3;
  left: 0.75rem;
  bottom: 0.75rem;
  max-width: min(26rem, calc(100% - 23rem));
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass);
  font-size: 0.85rem;
}

.pp-scene-notes summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  cursor: pointer;
  color: var(--ww-ink-soft);
}

.pp-scene-notes p { padding: 0 0.9rem 0.8rem; line-height: 1.45; }

/* Out of the way of the compass and tools: bottom left, above the notes. */
.pp-concede-form {
  position: absolute;
  z-index: 3;
  left: 0.75rem;
  bottom: 4rem;
}

.pp-scene-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.5rem;
  background: var(--ww-navy);
  color: var(--ww-ink);
  text-align: center;
}

.pp-scene-error[hidden] { display: none; }

.pp-concede {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--pp-hairline);
  border-radius: 999px;
  background: var(--pp-glass);
  color: var(--ww-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .pp-concede:hover { color: var(--ww-ink); border-color: var(--club-brass); }
}

.pp-concede:active { transform: translateY(1px); }

.pp-locked {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: min(24rem, calc(100% - 1.5rem));
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass-strong);
}

.pp-locked i { color: var(--pp-mine); font-size: 1.5rem; }

.pp-pinned-banner {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ww-danger);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass-strong);
  color: var(--ww-danger-text);
  font-weight: 700;
  animation: pp-pin-drop var(--ww-dur-long) var(--ww-ease-play) both;
}
.pp-locked div { display: grid; gap: 0.15rem; }
.pp-locked span { color: var(--ww-ink-soft); font-size: 0.85rem; }

/* --- The guess map: a corner map that grows while you use it ------------- */

.pp-guess {
  position: absolute;
  z-index: 4;
  right: 0.75rem;
  bottom: 0.75rem;
}

.pp-guess-panel {
  display: grid;
  gap: 0.5rem;
  width: 22rem;
  opacity: 0.88;
  transition: opacity var(--ww-dur-short) var(--ww-ease-out);
}

.pp-guess-bar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.8rem;
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  background: var(--pp-glass-strong);
}
.pp-guess-title { flex: 1; font-weight: 700; }
.pp-guess-grow { display: grid; }
.pp-guess-close { display: none; }

.pp-guess .pp-map { height: 14rem; }

.pp-guess:hover .pp-guess-panel,
.pp-guess:focus-within .pp-guess-panel,
.pp-guess.is-expanded .pp-guess-panel { width: min(40rem, calc(100vw - 1.5rem)); opacity: 1; }

.pp-guess:hover .pp-map,
.pp-guess:focus-within .pp-map,
.pp-guess.is-expanded .pp-map { height: min(28rem, calc(100dvh - var(--ww-topbar) - 9rem)); }

.pp-guess:hover .pp-guess-bar,
.pp-guess:focus-within .pp-guess-bar,
.pp-guess.is-expanded .pp-guess-bar { display: flex; }

.pp-guess-button { width: 100%; }
.pp-guess-button:disabled { opacity: 0.75; }
.pp-map-open { display: none; }

/* --- The map itself ------------------------------------------------------ */

.pp-map {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pp-hairline);
  border-radius: var(--ww-radius-sm);
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  --pp-ocean: color-mix(in oklch, var(--ww-navy) 62%, var(--ww-sky));
  --pp-land: color-mix(in oklch, var(--club-travertine) 86%, var(--ww-emerald));
  --pp-border: color-mix(in oklch, var(--ww-navy) 40%, var(--pp-land));
  --pp-graticule: color-mix(in oklch, var(--ww-ink) 10%, transparent);
  --pp-label: color-mix(in oklch, var(--ww-navy) 80%, var(--pp-land));
  --pp-water-label: color-mix(in oklch, var(--ww-ink) 55%, var(--pp-ocean));
  --pp-halo: color-mix(in oklch, var(--club-travertine) 80%, transparent);
  font-family: var(--ww-font);
}

.pp-map-tiles { position: absolute; inset: 0; }
.pp-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pp-map.is-offline::after {
  content: "Map outlines could not load. Pan and pin still work.";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 0.5rem 0.8rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  font-size: 0.85rem;
}

.pp-map-tools {
  position: absolute;
  z-index: 5;
  top: 0.5rem;
  left: 0.5rem;
  display: grid;
  gap: 0.3rem;
}

.pp-attribution {
  position: absolute;
  z-index: 5;
  right: 0.35rem;
  bottom: 0.25rem;
  padding: 0 0.3rem;
  border-radius: 0.25rem;
  background: var(--club-travertine);
  color: var(--ww-navy);
  font-size: 0.62rem;
  pointer-events: none;
}

/* A pin is a zero-size anchor at the exact coordinate; its teardrop is drawn
   above it with the tip on the point. */
.pp-map-pin {
  position: absolute;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
  --pp-pin: var(--pp-mine);
}

.pp-map-pin::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: -2rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--ww-navy);
  border-radius: 50% 50% 50% 0;
  background: var(--pp-pin);
  transform: rotate(-45deg);
}

.pp-map-pin::after {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: -1.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ww-navy);
}

.pp-map-pin--guess.is-player-one { --pp-pin: var(--pp-one); }
.pp-map-pin--guess.is-player-two { --pp-pin: var(--pp-two); }
.pp-map-pin--small::before { left: -0.6rem; top: -1.5rem; width: 1.2rem; height: 1.2rem; }
.pp-map-pin--small::after { display: none; }
.pp-map-pin.is-dropped::before { animation: pp-pin-drop var(--ww-dur-short) var(--ww-ease-play) both; }

@keyframes pp-pin-drop {
  from { opacity: 0; translate: 0 -1rem; }
  to { opacity: 1; translate: 0 0; }
}

.pp-map-flag {
  position: absolute;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pp-map-flag::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -2.1rem;
  width: 2px;
  height: 2.1rem;
  background: var(--ww-navy);
}

.pp-map-flag::after {
  content: "";
  position: absolute;
  left: 1px;
  top: -2.1rem;
  width: 1.3rem;
  height: 0.9rem;
  border: 1px solid var(--ww-navy);
  background: var(--pp-answer);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pp-map-flag--numbered::after { width: 1.5rem; height: 1.1rem; clip-path: none; border-radius: 0 3px 3px 0; }

.pp-map-flag--numbered span {
  position: absolute;
  z-index: 1;
  left: 1px;
  top: -2.1rem;
  width: 1.5rem;
  height: 1.1rem;
  color: var(--ww-navy);
  font-family: var(--ww-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.pp-player-key {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--pp-pin, var(--ww-ink-soft));
}

.is-player-one { --pp-pin: var(--pp-one); }
.is-player-two { --pp-pin: var(--pp-two); }

/* --- The reveal: map beside a result card -------------------------------- */

.pp-reveal,
.pp-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  height: 100%;
  background: var(--ww-navy);
}

.pp-map--reveal,
.pp-map--summary {
  min-height: 24rem;
  border: 0;
  border-radius: 0;
  cursor: grab;
}

.pp-reveal-card,
.pp-summary-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--pp-hairline);
  background: var(--ww-paper);
  color: var(--ww-ink);
  overflow-y: auto;
}

.pp-reveal-round {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--club-brass-lit);
}

.pp-reveal-place,
.pp-summary-title {
  font-family: var(--ww-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.02;
  margin-top: 0.2rem;
}

.pp-summary-title { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; }
.pp-summary-title:not(:has(.pp-summary-out-of)) { font-family: var(--ww-display); }
.pp-summary-out-of { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ww-ink-soft); }

.pp-reveal-line { color: var(--ww-ink-soft); margin-top: 0.35rem; }

.pp-reveal-rows { display: grid; gap: 0.8rem; }

.pp-reveal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 0.75rem;
  align-items: baseline;
}

.pp-reveal-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-reveal-distance { color: var(--ww-ink-soft); font-family: var(--ww-mono); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.pp-scorebar {
  position: relative;
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ww-ink) 12%, transparent);
  overflow: hidden;
}

.pp-scorebar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pp-pin);
  transform-origin: left center;
  transform: scaleX(var(--pp-score));
  animation: pp-score-fill 1100ms var(--ww-ease-out) 350ms both;
}

@keyframes pp-score-fill { from { transform: scaleX(0); } }

.pp-reveal-points {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
}

.pp-reveal-damage { font-weight: 700; color: var(--ww-warning-text); }

.pp-reveal-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
}

.pp-reveal-actions .pp-hud { justify-self: start; }
.pp-next-form .ww-btn { width: 100%; }
.pp-waiting { color: var(--ww-ink-soft); }

.pp-final-scores { display: grid; gap: 0.5rem; }

.pp-final-score {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
}

.pp-final-score strong { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; font-size: 1.3rem; }

.pp-recap { display: grid; gap: 0.35rem; list-style: none; padding: 0; }

.pp-recap-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--ww-line);
}

.pp-recap-number {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--pp-answer);
  color: var(--ww-navy);
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.pp-recap-place { font-weight: 600; }
.pp-recap-scores { display: grid; gap: 0.1rem; text-align: right; }
.pp-recap-scores span { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: baseline; }
.pp-recap-scores strong { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; color: var(--pp-pin); }
.pp-recap-scores small { color: var(--ww-ink-soft); font-size: 0.75rem; }

.pp-result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }

/* --- Lobby ---------------------------------------------------------------- */

/* One track that may shrink below its content: the map row scrolls sideways
   on a phone, and must not widen the page to its own length. */
.pp-lobby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

.pp-lobby-head h1 {
  font-family: var(--ww-display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 0.95;
}

.pp-lobby-head p { max-width: 46rem; margin-top: 0.6rem; color: var(--ww-ink-soft); font-size: 1.05rem; }

.pp-lobby-form {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--pp-hairline, var(--ww-line));
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  --pp-hairline: color-mix(in oklch, var(--club-brass) 38%, transparent);
}

.pp-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pp-lobby-form,
.pp-setup > * { min-width: 0; }
.pp-lobby-form { grid-template-columns: minmax(0, 1fr); }
.pp-setup-legend { display: block; margin-bottom: 0.45rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ww-ink-soft); }

.pp-choice-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.pp-map-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; }

.pp-map-choice,
.pp-segment-option {
  display: grid;
  gap: 0.2rem;
  min-height: 4.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  cursor: pointer;
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out), background-color var(--ww-dur-micro) var(--ww-ease-out);
}

.pp-map-choice small,
.pp-segment-option small { color: var(--ww-ink-soft); font-size: 0.8rem; }

@media (hover: hover) {
  .pp-map-choice:hover,
  .pp-segment-option:hover { border-color: var(--pp-hairline); }
}

.pp-choice-radio:checked + .pp-map-choice,
.pp-choice-radio:checked + .pp-segment-option {
  border-color: var(--club-brass);
  background: color-mix(in oklch, var(--club-brass) 12%, var(--ww-paper));
}

.pp-choice-radio:focus-visible + .pp-map-choice,
.pp-choice-radio:focus-visible + .pp-segment-option { outline: 3px solid var(--ww-focus); outline-offset: 2px; }

.pp-setup-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pp-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.pp-segment legend { grid-column: 1 / -1; }

.pp-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
}

.pp-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ww-line); }
.pp-start-group { display: grid; gap: 0.75rem; align-content: start; }
.pp-start-title { font-family: var(--ww-display); font-size: 1.35rem; font-weight: 700; }
.pp-start-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pp-start-note { color: var(--ww-ink-soft); font-size: 0.85rem; }

.pp-open-list { display: grid; gap: 0.5rem; }

.pp-open-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out);
}

a.pp-open-row:active { transform: translateY(1px); }

@media (hover: hover) {
  a.pp-open-row:hover { border-color: var(--club-brass); }
}

.pp-open-row div { display: grid; gap: 0.15rem; min-width: 0; }
.pp-open-row small { color: var(--ww-ink-soft); font-size: 0.8rem; }
.pp-open-status { color: var(--club-brass-lit); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.pp-empty p { color: var(--ww-ink-soft); }

.pp-private-toggle { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--ww-line); border-radius: var(--ww-radius-sm); cursor: pointer; }
.pp-private-toggle input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; }
.pp-private-toggle span { display: grid; gap: 0.2rem; }
.pp-private-toggle small { color: var(--ww-ink-soft); }

/* --- Phones ------------------------------------------------------------- */

@media (max-width: 47.5rem) {
  .pp-stage { min-height: 22rem; }
  .pp-stage-top { left: 4.4rem; right: 0.5rem; top: 0.5rem; }
  .pp-hud-cell { padding: 0.35rem 0.6rem; min-width: 0; }
  .pp-hud-cell strong { font-size: 0.9rem; }
  .pp-compass { top: 0.5rem; left: 0.5rem; }
  .pp-scene-tools { top: 4.2rem; left: 0.5rem; }
  .pp-concede-form { left: 0.5rem; top: auto; bottom: 4rem; }
  .pp-scene-notes { left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 8rem); }
  .pp-move { bottom: 4.5rem; }

  .pp-guess { inset: 0; right: 0; bottom: 0; pointer-events: none; }
  .pp-guess-panel { display: none; }
  .pp-guess.is-open { pointer-events: auto; background: color-mix(in oklch, var(--ww-navy) 55%, transparent); }

  .pp-guess.is-open .pp-guess-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: auto;
    padding: 0.75rem 0.75rem calc(0.75rem + var(--ww-safe-bottom));
    border-top: 1px solid var(--pp-hairline);
    border-radius: var(--ww-radius) var(--ww-radius) 0 0;
    background: var(--ww-paper);
    opacity: 1;
  }

  .pp-guess.is-open .pp-guess-bar { display: flex; }
  .pp-guess .pp-guess-grow { display: none; }
  .pp-guess .pp-guess-close { display: grid; }
  .pp-guess.is-open .pp-map,
  .pp-guess:hover .pp-map,
  .pp-guess:focus-within .pp-map { height: min(26rem, 58dvh); }
  .pp-guess:hover .pp-guess-panel,
  .pp-guess:focus-within .pp-guess-panel { width: auto; }

  .pp-map-open {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: inline-flex;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .pp-guess.is-open .pp-map-open { display: none; }
  .pp-locked { left: 0.5rem; right: 0.5rem; bottom: 3.9rem; max-width: none; }

  .pp-reveal,
  .pp-summary { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }

  .pp-map--reveal,
  .pp-map--summary { min-height: 0; height: 46dvh; }

  .pp-reveal-card,
  .pp-summary-card { border-left: 0; border-top: 1px solid var(--pp-hairline); }

  .pp-setup-row,
  .pp-start { grid-template-columns: minmax(0, 1fr); }
}

/* --- Daily challenge and challenge boards --------------------------------- */

.pp-daily {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--club-brass);
  border-radius: var(--ww-radius);
  background: color-mix(in oklch, var(--club-brass) 8%, var(--ww-paper-2));
}

.pp-daily-info { display: grid; gap: 0.6rem; justify-items: start; }
.pp-daily-info p:not(.pp-reveal-round) { color: var(--ww-ink-soft); }

.pp-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; counter-reset: pp-board; }

.pp-board-list li {
  counter-increment: pp-board;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--ww-line);
}

.pp-board-list li::before { content: counter(pp-board); color: var(--ww-ink-soft); font-family: var(--ww-mono); font-size: 0.8rem; }
.pp-board-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-board-list li strong { font-family: var(--ww-mono); font-variant-numeric: tabular-nums; }
.pp-board-list li.is-you { color: var(--club-brass-lit); }

.pp-share { display: grid; gap: 0.4rem; }
.pp-share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-share-row .pp-select { flex: 1 1 16rem; }

@media (max-width: 47.5rem) {
  .pp-daily { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the maps scroll sideways, so the ways to start stay near the top. */
  .pp-map-choices { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.25rem; }
  .pp-map-choice { flex: 0 0 11rem; scroll-snap-align: start; min-height: 3.6rem; }
}

/* Match chat folds into a drawer on the map's bottom edge: the map owns the
   viewport, so open talk scrolls inside its own capped height. */
.pp-main > .ww-match-talk--dock {
  flex: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--club-brass-dim);
  background: var(--ww-navy);
  color: var(--ww-ink);
}

.ww-match-talk--dock > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--ww-control-min);
  padding-inline: 1rem;
  cursor: pointer;
}

@media (hover: hover) {
  .ww-match-talk--dock > summary:hover { color: var(--ww-ink); background: color-mix(in oklch, var(--ww-navy) 80%, var(--club-brass)); }
}

.ww-match-talk--dock > .ww-match-talk__body {
  max-height: 45dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 1rem 1rem;
}

/* Same reading column as the other tables' chat, not the map's full width. */
.ww-match-talk--dock > .ww-match-talk__body > * {
  max-width: 48rem;
  margin-inline: auto;
}
/* Lobby choices share the club palette and keep explanations beside actions. */
.ww-play-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.ww-play-choice {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid #3b506a;
  border-radius: 1rem;
  background: #13253b;
  color: #f4f7fb;
}
.ww-play-choice h2 {
  margin: .35rem 0 .65rem;
  font: 600 1.4rem/1.2 var(--ww-display);
}
.ww-play-choice > p:not(.ww-kicker) { margin: 0 0 1.2rem; color: #c0cede; }
.ww-play-choice > form, .ww-play-choice > .ww-btn { margin-top: auto; }
.ww-play-choice form { display: grid; gap: .5rem; }
.ww-play-choice label { font-size: .875rem; font-weight: 600; color: #dce6f3; }
.ww-play-choice select { width: 100%; min-width: 0; margin-bottom: .35rem; }
.ww-play-choice .ww-btn { width: 100%; white-space: normal; text-align: center; }
.ww-choice-link {
  display: block;
  margin-top: .6rem;
  padding: .65rem .25rem;
  color: #b8d6ff;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.ww-play-note { margin: 1rem 0 1.75rem; font-size: .875rem; color: #bfcddd; }
.ww-lobby-hero .ww-lobby-footnote { margin-top: .8rem; font-size: .875rem; color: #c6d7eb; }
.ww-resume-match {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid #6386ad;
  border-radius: .85rem;
  background: #183450;
  color: #f5f8fc;
}
.ww-resume-match p { margin: .15rem 0 0; color: #c9d9ec; }
.ww-resume-match .ww-btn { flex-shrink: 0; }
@media (max-width: 1100px) {
  .ww-play-choices { grid-template-columns: 1fr; }
  .ww-play-choice { padding: 1.15rem; }
}
@media (max-width: 480px) {
  .ww-resume-match { align-items: stretch; flex-direction: column; }
}
.ww-retro-viewport {
  min-height: 18rem;
}

.ww-retro-empty {
  padding: 1.5rem;
  max-width: 34rem;
  color: var(--ww-ink);
  text-align: center;
}

.ww-retro-empty p:first-child {
  font-family: var(--ww-display);
  font-size: 1.5rem;
}

.ww-retro-player {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
}

.ww-retro-document {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ww-navy);
  color: var(--ww-ink);
}

.ww-retro-document #retro-game {
  position: fixed;
  inset: 0;
}

[data-controller~="retro-rom"] .ww-arcade-status-info {
  overflow-wrap: anywhere;
}

.ww-retro-invite, .ww-retro-files {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
  min-width: 0;
}
.ww-retro-room label { display: block; margin-bottom: 0.35rem; }
.ww-retro-room input { width: 100%; min-width: 0; max-width: 100%; }
.ww-retro-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ww-retro-connection { min-height: 3lh; overflow-wrap: anywhere; }
.ww-retro-net-document { display: flex; flex-direction: column; height: 100dvh; }
.ww-retro-net-document canvas {
  display: block; width: 100%; min-height: 0; flex: 1; object-fit: contain;
  image-rendering: pixelated;
}
.ww-retro-pad {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem;
  padding: 0.4rem; background: var(--ww-paper); color: var(--ww-ink);
}
.ww-retro-pad button { min-width: 44px; min-height: 44px; touch-action: none; user-select: none; }
@media (min-width: 48rem) {
  .ww-retro-invite { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}
/* Rooms: minimal layout polish */

.room {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.media {
  display: grid;
  gap: 1rem;
}

.ww-rtc-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .ww-rtc-media {
    grid-template-columns: 1fr;
  }
}

.ww-rtc-controls {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1rem 0 1rem;
  flex-wrap: wrap;
}

.ww-rtc-options {
  display: flex;
  gap: 0.9rem;
  padding: 0.6rem 1rem;
  flex-wrap: wrap;
  color: var(--ww-ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.ww-option input {
  margin-right: 0.35rem;
}

.ww-rtc-devices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.6rem 1rem 0.9rem 1rem;
}

.ww-device {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--ww-ink);
  font-size: 0.85rem;
}

@media (min-width: 36rem) {
  .ww-rtc-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ww-device select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: 0.55rem 0.65rem;
  color: var(--ww-ink);
  background: var(--ww-paper-2);
}

.ww-device-note {
  grid-column: 1 / -1;
  color: var(--ww-ink-soft);
  font-size: 0.8rem;
}

.ww-ptt {
  white-space: nowrap;
}

.medium {
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  padding: 0.75rem;
}

/* A video frame is letterboxed in the darkest ink the theme has; no raw
   black, and short enough at 390px that the chat below stays in view. */
.medium video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 340px;
  background: var(--ww-navy);
  border-radius: var(--ww-radius-sm);
  object-fit: cover;
}

.medium-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}


/* The folded voice room sits above a match's chat on every surface. */
.ww-voice-slot {
  margin-block-end: 1rem;
}

.ww-voice-video > summary {
  display: flex;
  align-items: center;
  min-height: var(--ww-control-min);
}

/* Before Join there is nothing to show; an empty 16:9 frame reads as broken. */
.ww-rtc-room:not(.is-live) .medium--local {
  display: none;
}

.ww-rtc-status {
  margin: 0;
  padding: 0.5rem 1rem 0;
}

.ww-rtc-status:empty {
  display: none;
}

.ww-device-note a {
  color: var(--ww-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .ww-device-note a:hover { color: var(--ww-blue); }
}
/* ===== Shelf lab (/play/lab) =====
 *
 * An unlinked sandbox for other ways to lay out the collection: a turning
 * wheel of cover plates and a dense wall that reflows. The motion is game
 * motion -- dealt plates may overshoot -- but the chrome around it (mode and
 * shelf buttons) keeps the quiet house treatment. Everything consumes tokens.
 */

.ww-lab {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 6rem;
  color: var(--ww-ink);
  overflow-x: clip;
}
.ww-lab [hidden] { display: none; }

.ww-lab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.75rem 0 1rem;
  border-bottom: 1px solid var(--club-brass-dim);
}
.ww-lab-head h1 {
  margin: 0;
  font: 800 clamp(2rem, 4.5vw, 3rem)/1 var(--ww-display);
}
.ww-lab-head p {
  max-width: 34rem;
  margin: .5rem 0 0;
  color: var(--ww-ink-soft);
}

/* --- Mode and shelf buttons: plain chrome -------------------------------- */

.ww-lab-modes {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--club-brass-dim);
  border-radius: 999px;
}
.ww-lab-mode,
.ww-lab-shelf {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--ww-control-min);
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ww-ink-soft);
  font: 600 .9rem/1 var(--ww-font);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--ww-dur-micro) var(--ww-ease-out),
    background-color var(--ww-dur-micro) var(--ww-ease-out),
    border-color var(--ww-dur-micro) var(--ww-ease-out),
    transform var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-lab-mode:hover,
  .ww-lab-shelf:hover { color: var(--ww-ink); border-color: var(--club-brass-dim); }
}
.ww-lab-mode:active,
.ww-lab-shelf:active { transform: translateY(1px); }
.ww-lab-mode[aria-pressed="true"],
.ww-lab-shelf[aria-pressed="true"] {
  background: var(--club-brass);
  color: var(--club-walnut);
  border-color: var(--club-brass);
}
.ww-lab-mode:disabled,
.ww-lab-shelf:disabled { opacity: .5; cursor: not-allowed; }

.ww-lab-shelves {
  display: flex;
  gap: .35rem;
  margin: 1rem 0 0;
  padding-bottom: .25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ww-lab-shelf { padding: 0 .9rem; font-size: .85rem; }
.ww-lab-shelf__count {
  font: 500 .75rem/1 var(--ww-mono);
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* --- Wheel --------------------------------------------------------------- */

.ww-lab-wheel { margin-top: 1.5rem; }

.ww-lab-wheel__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}

.ww-lab-wheel__track {
  --card: min(16rem, 62vw);
  display: flex;
  gap: 0;
  margin: 0;
  padding: 2.5rem calc(50% - var(--card) / 2) 2rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ww-lab-wheel__track::-webkit-scrollbar { display: none; }
.ww-lab-wheel__track:focus-visible { outline-offset: -3px; }

.ww-lab-wheel__item {
  --d: 0;
  --ad: 0;
  position: relative;
  flex: 0 0 var(--card);
  scroll-snap-align: center;
  /* Neighbours tuck behind the middle card, rotate away from it and sink. */
  margin-inline: calc(var(--card) * -.08);
  transform:
    perspective(60rem)
    translateZ(calc(var(--ad) * -7rem))
    rotateY(calc(var(--d) * -34deg));
  opacity: calc(1 - var(--ad) * .22);
}
.ww-lab-wheel__card {
  display: block;
  color: var(--ww-ink);
  text-decoration: none;
  border-radius: var(--ww-radius);
}
.ww-lab-wheel__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  transition: border-color var(--ww-dur-short) var(--ww-ease-out);
}
.ww-lab-wheel__item[aria-current="true"] img { border-color: var(--club-brass); }
.ww-lab-wheel__name {
  display: block;
  margin-top: .6rem;
  overflow: hidden;
  font: 700 .95rem/1.2 var(--ww-font);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: calc(1 - var(--ad) * 1.2);
}

.ww-lab-wheel__step {
  display: grid;
  place-items: center;
  width: var(--ww-control-min);
  height: var(--ww-control-min);
  border: 1px solid var(--club-brass-dim);
  border-radius: 50%;
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  cursor: pointer;
  transition:
    border-color var(--ww-dur-micro) var(--ww-ease-out),
    transform var(--ww-dur-micro) var(--ww-ease-out);
}
@media (hover: hover) { .ww-lab-wheel__step:hover { border-color: var(--club-brass); } }
.ww-lab-wheel__step:active { transform: scale(.94); }
.ww-lab-wheel__step:disabled { opacity: .45; cursor: not-allowed; }

.ww-lab-wheel__caption {
  display: grid;
  justify-items: start;
  gap: .4rem;
  max-width: 36rem;
  min-height: 11rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.ww-lab-wheel__title { margin: 0; font: 700 1.6rem/1.1 var(--ww-display); }
.ww-lab-wheel__blurb { margin: 0; }
.ww-lab-wheel__meta {
  margin: 0;
  color: var(--ww-ink-soft);
  font: 500 .8rem/1.3 var(--ww-mono);
}
.ww-lab-wheel__go { margin-top: .4rem; }

/* --- Wall ---------------------------------------------------------------- */

.ww-lab-wall { margin-top: 1.25rem; }

.ww-lab-wall__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1rem;
}
.ww-lab-wall__size {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font: 600 .85rem/1 var(--ww-font);
}
.ww-lab-wall__size input {
  width: min(14rem, 50vw);
  min-height: var(--ww-control-min);
  accent-color: var(--club-brass);
}

.ww-lab-wall__grid {
  --brick: 10rem;
  --gap: .6rem;
  display: grid;
  /* Never fewer than two columns, so a two-wide plate can always fit. */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--brick), calc(50% - var(--gap) / 2)), 1fr));
  grid-auto-rows: calc(var(--brick) * .36);
  grid-auto-flow: dense;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-lab-brick {
  position: relative;
  display: grid;
  grid-row: span 2;
  min-width: 0;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  overflow: hidden;
  transition: border-color var(--ww-dur-short) var(--ww-ease-out);
}
.ww-lab-brick--tall { grid-row: span 4; }
.ww-lab-brick--wide { grid-column: span 2; }
.ww-lab-brick--lg { grid-column: span 2; grid-row: span 4; }
.ww-lab-brick--open {
  grid-column: span 3;
  grid-row: span 7;
  grid-template-rows: minmax(0, 1fr) auto;
  border-color: var(--club-brass);
}
.ww-lab-wall__grid[data-cols="2"] .ww-lab-brick--open { grid-column: span 2; }

.ww-lab-brick__face {
  position: relative;
  display: block;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ww-lab-brick__face:focus-visible { outline-offset: -3px; }
.ww-lab-brick__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ww-dur-long) var(--ww-ease-out);
}
@media (hover: hover) {
  .ww-lab-brick:hover { border-color: var(--club-brass); }
  .ww-lab-brick:hover .ww-lab-brick__face img { transform: scale(1.04); }
}
.ww-lab-brick__face:active img { transform: scale(.98); }

/* An opened plate shows its whole cover rather than a crop of it. */
.ww-lab-brick--open .ww-lab-brick__face img { object-fit: contain; }

.ww-lab-brick__name {
  position: absolute;
  inset: auto 0 0;
  padding: .4rem .6rem;
  overflow: hidden;
  border-top: 1px solid var(--club-brass-dim);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  font: 700 .82rem/1.2 var(--ww-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ww-lab-brick--lg .ww-lab-brick__name,
.ww-lab-brick--open .ww-lab-brick__name { font: 700 1.05rem/1.2 var(--ww-display); }

.ww-lab-brick__more { display: none; }
.ww-lab-brick--open .ww-lab-brick__more {
  display: grid;
  justify-items: start;
  gap: .5rem;
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--club-brass-dim);
}
.ww-lab-brick__more p { margin: 0; font-size: .92rem; line-height: 1.4; }
.ww-lab-brick__meta { color: var(--ww-ink-soft); font: 500 .78rem/1.3 var(--ww-mono); }

/* --- Chip, the mascot ---------------------------------------------------- */

/* The element's origin is the point between its feet, so a translate to an
   element's top edge stands it on that edge. */
.ww-lab-mascot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 4rem;
  height: 4.5rem;
  margin: -4.5rem 0 0 -2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ww-lab-mascot__face {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform var(--ww-dur-short) var(--ww-ease-out);
}
.ww-lab-mascot__face--left { transform: scaleX(-1); }
.ww-lab-mascot__body {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
}
.ww-lab-mascot__chip { fill: var(--club-oxblood); }
.ww-lab-mascot__notches { fill: none; stroke: var(--club-travertine); stroke-width: 5; }
.ww-lab-mascot__rim { fill: none; stroke: var(--club-brass); stroke-width: 2.5; }
.ww-lab-mascot__inlay { fill: var(--club-oxblood); stroke: var(--club-brass-lit); stroke-width: 1.2; }
.ww-lab-mascot__white { fill: var(--club-travertine); }
.ww-lab-mascot__eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.ww-lab-mascot__pupils { fill: var(--club-walnut); transition: transform var(--ww-dur-micro) var(--ww-ease-out); }
.ww-lab-mascot__mouth { fill: none; stroke: var(--club-travertine); stroke-width: 1.8; stroke-linecap: round; }
.ww-lab-mascot__tie,
.ww-lab-mascot__knot { fill: var(--club-brass); }
.ww-lab-mascot__foot { fill: var(--club-walnut); stroke: var(--club-brass); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 50%; }

/* Tucked feet in the air. */
.ww-lab-mascot--air .ww-lab-mascot__foot--l { transform: translate(2px, -3px) rotate(-20deg); }
.ww-lab-mascot--air .ww-lab-mascot__foot--r { transform: translate(-2px, -3px) rotate(20deg); }
.ww-lab-mascot__foot { transition: transform var(--ww-dur-micro) var(--ww-ease-out); }

@media (hover: hover) {
  .ww-lab-mascot:hover .ww-lab-mascot__body { transform: translateY(-3px); transition: transform var(--ww-dur-short) var(--ww-ease-play); }
}
.ww-lab-mascot:active .ww-lab-mascot__body { transform: scale(1.08, .9); }

.ww-lab-mascot__say {
  position: absolute;
  bottom: calc(100% + .4rem);
  left: 50%;
  width: max-content;
  max-width: 14rem;
  padding: .45rem .7rem;
  border: 1px solid var(--club-brass);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  font: 600 .82rem/1.25 var(--ww-font);
  opacity: 0;
  transform: translate(-50%, .4rem);
  pointer-events: none;
  transition:
    opacity var(--ww-dur-short) var(--ww-ease-out),
    transform var(--ww-dur-short) var(--ww-ease-play);
}
.ww-lab-mascot__say--on { opacity: 1; transform: translate(-50%, 0); }

.ww-lab-sparks {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .ww-lab { padding: 1rem 1rem 6rem; }
  .ww-lab-head { padding-top: 2.75rem; }
  .ww-lab-wheel__step { display: none; }
  .ww-lab-wheel__stage { grid-template-columns: minmax(0, 1fr); }
  .ww-lab-wheel__track { grid-column: 1; }
  .ww-lab-wall__grid { --gap: .4rem; }
}
/* Surfaces a friend lands on from a shared link: the invitation page and the
   result-share row. Colours come from the token root (z-visual / zz-midnight). */

.invite-cover {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin: 0 auto 1.25rem;
  border: 2px solid var(--club-brass);
  border-radius: var(--ww-radius-sm);
}

.invite-blurb {
  margin-top: 0.75rem;
  color: var(--ww-ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.invite-note {
  margin-top: 1rem;
  color: var(--ww-ink-soft);
  font-size: 0.85rem;
}

/* Rivals: one row per person, name and record on the left, actions right;
   below 640px the actions drop under the name. */

.rivals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.rivals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--ww-paper);
  color: var(--ww-ink);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
}

.rivals-row__who {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.rivals-row__name {
  font-family: var(--ww-display);
  font-weight: 700;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.rivals-row__record strong {
  font-family: var(--ww-mono);
  font-size: 0.95rem;
}

.rivals-row__last {
  font-size: 0.85rem;
}

.rivals-row__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.rivals-row__form { display: contents; }

.rivals-empty {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  max-width: 34rem;
}

.rivals-empty__title {
  font-family: var(--ww-display);
  font-weight: 700;
  font-size: 1.25rem;
}

@media (max-width: 640px) {
  .rivals-row {
    flex-direction: column;
    align-items: stretch;
  }

  .rivals-row__actions > * { flex: 1; }
}

.rivals-soft { color: var(--ww-ink-soft); }
/* A growing card desk: every exposed rank remains a full touch target. */
.solitaire-desk {
  --desk-card-width: 72px;
  --desk-card-height: 104px;
  max-width: 850px;
  margin: 0 auto;
  padding: 26px;
  border: 1px solid var(--club-brass-dim);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 25%, color-mix(in oklch, var(--club-felt, #1a4d40) 80%, #0d2924), var(--ww-navy-2));
  color: var(--ww-paper);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--club-brass) 20%, transparent), 0 18px 48px rgba(0, 0, 0, 0.45);
  font-family: var(--ww-font);
}
.solitaire-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.solitaire-heading h1 { margin: 4px 0; font: 600 clamp(2rem, 5vw, 3rem) var(--ww-display); }
.solitaire-heading p { margin: 0; color: var(--ww-ink-soft); }
.solitaire-stats { display: flex; gap: 20px; align-items: center; }
.solitaire-stats span { display: grid; gap: 2px; font-size: .8rem; color: var(--ww-ink-soft); }
.solitaire-stats strong { font: 500 1.35rem var(--ww-mono, monospace); color: var(--ww-paper); }
.solitaire-guide { margin: 18px 0; border-block: 1px solid color-mix(in oklch, var(--ww-line) 60%, transparent); }
.solitaire-guide summary { min-height: 44px; padding: 10px 0; font-weight: 600; cursor: pointer; }
.solitaire-guide p { max-width: 68ch; margin: 0 0 12px; }
.solitaire-scroll { overflow-x: auto; padding: 6px; margin: 0 -6px; scrollbar-width: thin; }
.solitaire-surface { min-width: 332px; }
.solitaire-top-row, .solitaire-tableau { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.solitaire-stock-area { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.solitaire-homes { grid-column: 4 / 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.solitaire-desk .solitaire-tableau { position: static; margin-top: 24px; }
.solitaire-desk .solitaire-column { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.solitaire-stock, .solitaire-home, .solitaire-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--desk-card-width); height: var(--desk-card-height); max-width: 100%;
  margin: 0 auto; padding: 0; border: 1px solid var(--club-brass-dim); border-radius: 7px;
  background: var(--ww-navy-2); color: var(--ww-ink-soft);
  transition: transform var(--ww-dur-micro, 120ms) var(--ww-ease-out, ease-out),
              border-color var(--ww-dur-short, 220ms) var(--ww-ease-out, ease-out),
              box-shadow var(--ww-dur-short, 220ms) var(--ww-ease-out, ease-out);
}
.solitaire-stock {
  background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--ww-navy) 75%, black) 0 6px, var(--ww-navy-2) 6px 7px);
  color: var(--ww-paper);
  border: 2px solid var(--club-brass-lit);
  cursor: pointer;
}
@media (hover: hover) {
  .solitaire-stock:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--club-brass) 30%, transparent);
  }
}
.solitaire-stock:active:not(:disabled) {
  transform: translateY(1px);
}
.solitaire-stock > span { font: 600 1.5rem var(--ww-display); }
.solitaire-home > span { font-size: 1.8rem; }
.solitaire-home small, .solitaire-stock small { font-size: .75rem; }
.solitaire-column-target {
  width: var(--desk-card-width); min-height: 44px; margin-bottom: 8px;
  border: 1px solid var(--club-brass-dim); border-radius: 6px;
  color: var(--ww-ink-soft); background: var(--ww-navy-2);
}
.solitaire-desk .solitaire-card-button {
  position: relative; display: block; width: var(--desk-card-width); height: var(--desk-card-height);
  padding: 0; border: 0; border-radius: 7px; background: transparent;
  cursor: pointer; touch-action: manipulation; flex-shrink: 0;
  transition: transform var(--ww-dur-micro, 120ms) var(--ww-ease-out, ease-out);
}
@media (hover: hover) {
  .solitaire-desk .solitaire-card-button:hover:not(:disabled) {
    transform: translateY(-3px);
  }
}
.solitaire-desk .solitaire-card-button:active:not(:disabled) {
  transform: translateY(1px);
}
.solitaire-desk .playing-card { display: block; position: relative; width: var(--desk-card-width); height: var(--desk-card-height); margin: 0; transform: none; opacity: 1; animation: none; transition: none; pointer-events: none; }
.solitaire-desk .playing-card__rank { left: 6px; top: 4px; font-size: 18px; }
.solitaire-desk .playing-card__suit { right: 6px; left: auto; top: 4px; font-size: 18px; }
.solitaire-desk .playing-card__pip { font-size: 30px; }
.solitaire-desk .solitaire-column .solitaire-card-button { margin-bottom: calc(44px - var(--desk-card-height)); }
.solitaire-desk .solitaire-column > :last-child { margin-bottom: 0; }
.solitaire-covered { height: 18px; flex-shrink: 0; }
.solitaire-desk .solitaire-card-button[aria-pressed="true"] { outline: 3px solid var(--club-brass); outline-offset: 2px; z-index: 2; transform: translateY(-4px); }
.solitaire-desk .solitaire-card-button[aria-pressed="true"] .playing-card { background: color-mix(in oklch, var(--ww-paper) 92%, var(--ww-gold)); }
.solitaire-desk .is-destination {
  border: 2px solid var(--club-brass);
  background: color-mix(in oklch, var(--ww-emerald) 25%, var(--ww-navy-2));
  color: var(--ww-paper);
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in oklch, var(--club-brass) 30%, transparent);
}
.solitaire-desk .solitaire-card-button:focus-visible { z-index: 3; outline: 3px solid var(--ww-focus); outline-offset: 2px; }
.solitaire-desk button:disabled { opacity: 1; filter: none; cursor: default; }
.solitaire-desk .solitaire-column-target:disabled { border-color: transparent; background: transparent; }
.solitaire-desk .solitaire-home:disabled { border-style: dashed; }
.solitaire-hint { min-height: 3em; margin: 22px 0 12px; color: var(--ww-ink-soft); }
.solitaire-toolbar, .solitaire-manual { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.solitaire-toolbar :is(button, a), .solitaire-manual :is(button, select) { min-height: 44px; }
.solitaire-toolbar button:disabled { opacity: .55; }
.solitaire-result { margin: 18px 0; padding: 18px; border: 1px solid var(--club-brass); border-radius: 10px; background: color-mix(in oklch, var(--ww-navy-2) 90%, black); }
.solitaire-result h2 { font: 600 1.6rem var(--ww-display); margin: 4px 0 10px; }
.ww-table-replay { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 18px 0; }
.ww-table-replay p { flex-basis: 100%; margin: 0; }
@media (max-width: 600px) {
  .solitaire-desk { --desk-card-width: 44px; --desk-card-height: 68px; padding: 14px 8px; border-radius: 12px; }
  .solitaire-heading, .solitaire-stats, .solitaire-guide, .solitaire-toolbar, .solitaire-hint { margin-inline: 4px; }
  .solitaire-stats { gap: 24px; }
  .solitaire-desk .playing-card__rank, .solitaire-desk .playing-card__suit { font-size: 15px; }
  .solitaire-desk .playing-card__pip { font-size: 24px; }
  .solitaire-home small { font-size: .6rem; }
  .solitaire-toolbar { gap: 8px; }
}
@media (forced-colors: active) {
  .solitaire-desk .is-destination, .solitaire-desk .solitaire-card-button[aria-pressed="true"] { outline: 3px solid Highlight; }
  .solitaire-desk .playing-card { border: 1px solid CanvasText; }
}

/* Legibility on the desk. The desk is dark felt in every theme, but its text
   used --ww-paper and --ww-ink-soft, which are the page's dark surface and a
   mid grey under the midnight palette: the title, score numerals and the
   disclosure labels read dark on dark. They take the card room's cream and
   celadon instead. */
.solitaire-desk { color: var(--card-cream); }
.solitaire-heading p,
.solitaire-stats span,
.solitaire-hint,
.solitaire-home small,
.solitaire-stock small { color: var(--club-celadon); }
.solitaire-heading h1,
.solitaire-stats strong,
.solitaire-guide summary,
.solitaire-result h2 { color: var(--card-cream); }
.solitaire-stats strong { font-variant-numeric: tabular-nums; }
.solitaire-desk .is-destination { color: var(--card-cream); }

/* Drag: the lifted run stays as a ghost in place, a copy follows the pointer,
   and whole columns and foundations accept a drop. */
.solitaire-desk { position: relative; }
.solitaire-desk .solitaire-card-button:not(:disabled) { touch-action: none; }
.solitaire-desk .is-lifted { opacity: .35; }
.solitaire-drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 60; display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.solitaire-drag-ghost .solitaire-card-button { opacity: 1; transform: rotate(-2deg); }
.solitaire-desk :is(.solitaire-column, .solitaire-home).is-drop-over { outline: 2px solid var(--club-brass-lit); outline-offset: 3px; border-radius: 8px; }
.solitaire-result.is-won { border-color: var(--club-brass-lit); }
.solitaire-result.is-won h2 { color: var(--club-brass-lit); }

/* The win cascade: foundation cards bounce off the desk floor. */
.solitaire-cascade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.solitaire-desk .solitaire-cascade__card { position: absolute; top: 0; left: 0; margin: 0; }
/* Medallion — eight tiles: two brass, six around */

.sb-shell {
  min-height: 100dvh;
  background: var(--ww-paper);
  color: var(--ww-ink);
  display: flex;
  flex-direction: column;
  /* The shaded underside of a brass cell, derived so it follows the metal. */
  --sb-brass-edge: color-mix(in oklch, var(--club-brass) 72%, var(--ww-wood-recess));
}

.sb-shell .text-muted { color: var(--ww-ink-soft); }
.sb-shell .text-gold { color: var(--club-brass-lit); }
.sb-shell .text-danger { color: var(--ww-danger-text); }

/* --- Lobby Surface -------------------------------------------------------- */

.sb-lobby {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  width: 100%;
}

.sb-hero {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  margin-bottom: 2rem;
}

@media (min-width: 48rem) {
  .sb-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sb-hero__copy {
  max-width: 540px;
}

.sb-eyebrow {
  display: inline-block;
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--club-brass-lit);
  margin-bottom: 0.5rem;
}

.sb-hero h1 {
  font-family: var(--ww-display);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ww-ink);
  margin: 0 0 0.75rem;
}

.sb-hero p {
  color: var(--ww-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.sb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ww-control-min, 44px);
  padding: 0.6rem 1.25rem;
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-font);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ww-dur-micro) var(--ww-ease-out),
              transform var(--ww-dur-micro) var(--ww-ease-out),
              border-color var(--ww-dur-micro) var(--ww-ease-out);
  border: 1px solid transparent;
}

.sb-btn--primary {
  background: var(--club-brass);
  color: var(--ww-tile-ink);
  border-color: var(--club-brass-lit);
}

@media (hover: hover) {
  .sb-btn--primary:hover {
    background: var(--club-brass-lit);
  }
}

.sb-btn--primary:active {
  transform: translateY(1px);
}

.sb-btn--ghost {
  background: transparent;
  color: var(--ww-ink);
  border-color: var(--ww-line);
}

@media (hover: hover) {
  .sb-btn--ghost:hover {
    background: var(--ww-paper-2);
    border-color: var(--club-brass);
  }
}

.sb-btn--ghost:active {
  transform: translateY(1px);
}

.sb-btn:disabled, .sb-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Smaller in type and padding only; the 44px hit target stays. */
.sb-btn--sm {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

.sb-count {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink-soft);
}

.sb-match-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sb-match-info p {
  margin: 0;
  font-size: 0.85rem;
}

.sb-match__names {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.9rem;
}

.sb-empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

.sb-lobby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .sb-lobby-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sb-panel {
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.sb-panel__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ww-line);
  padding-bottom: 0.75rem;
}

.sb-panel__heading h2 {
  font-family: var(--ww-display);
  font-size: 1.3rem;
  margin: 0;
  color: var(--ww-ink);
}

.sb-match-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sb-match-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--ww-paper);
  color: var(--ww-ink);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  text-decoration: none;
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .sb-match-item:hover {
    border-color: var(--club-brass);
  }
}

/* --- Play Surface & Table ------------------------------------------------- */

.sb-table {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 1rem calc(var(--ww-dock, 56px) + 2rem);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sb-table__layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 52rem) {
  .sb-table__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
  }
}

.sb-board-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* --- Rank Progress Bar ---------------------------------------------------- */

.sb-rank-card {
  width: 100%;
  max-width: 420px;
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 0.85rem 1rem;
}

.sb-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.sb-rank-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sb-rank-title strong {
  font-family: var(--ww-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--club-brass-lit);
}

.sb-rank-points {
  font-family: var(--ww-mono);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink);
}

.sb-rank-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--ww-paper);
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  margin: 0.5rem 0;
}

.sb-rank-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--club-brass-dim), var(--club-brass));
  border-radius: var(--ww-radius-sm);
}

.sb-rank-pips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sb-rank-pip {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  transform: translate(-50%, -50%);
  transition: background var(--ww-dur-micro) var(--ww-ease-out),
              border-color var(--ww-dur-micro) var(--ww-ease-out),
              transform var(--ww-dur-micro) var(--ww-ease-out);
}

.sb-rank-pip.is-achieved {
  background: var(--club-brass);
  border-color: var(--club-brass-lit);
}

.sb-rank-pip.is-current {
  width: 12px;
  height: 12px;
  background: var(--club-brass-lit);
  border-color: var(--ww-paper);
  box-shadow: 0 0 0 2px var(--club-brass);
  z-index: 2;
}

.sb-rank-footer {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ww-ink);
  opacity: 0.82;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Duel Scoreboard ------------------------------------------------------ */

.sb-duel-status {
  width: 100%;
  max-width: 420px;
  padding: 0.85rem 1rem;
  gap: 0.6rem;
}

.sb-duel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.sb-duel-header .sb-eyebrow {
  margin-bottom: 0;
}

.sb-timer {
  font-family: var(--ww-mono);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink);
}

.sb-timer.is-urgent {
  color: var(--ww-danger-text);
}

.sb-status-badge {
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.sb-duel-scores {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.sb-duel-seat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sb-duel-seat.is-opp {
  text-align: right;
}

.sb-seat-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ww-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-seat-score {
  font-family: var(--ww-display);
  font-size: 1.6rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--club-brass-lit);
}

.sb-seat-words {
  font-size: 0.8rem;
  color: var(--ww-ink-soft);
  font-variant-numeric: tabular-nums;
}

.sb-duel-vs {
  font-family: var(--ww-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.sb-waiting {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.sb-waiting__note {
  margin: 0;
  color: var(--ww-ink-soft);
  font-size: 0.9rem;
}

/* --- Word Input Display & Toast ------------------------------------------- */

.sb-display-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  min-height: 52px;
}

.sb-input-display {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  color: var(--ww-ink);
  text-align: center;
}

.sb-entry-label {
  font-family: var(--ww-font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ww-ink-soft);
  margin: 0 0 0.35rem;
  text-align: center;
}

.sb-entry {
  width: 100%;
  min-height: 52px;
  padding: 0.4rem 0.75rem;
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  box-shadow: none;
  color: var(--ww-ink);
  caret-color: var(--club-brass-lit);
  font-family: var(--ww-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: border-color var(--ww-dur-micro) var(--ww-ease-out),
              background var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .sb-entry:hover:not(:disabled) {
    border-color: var(--club-brass);
    background: var(--ww-paper-2);
  }
}

.sb-entry:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes sb-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.sb-input-display.is-shaking {
  animation: sb-shake 0.35s var(--ww-ease-out);
}

.sb-toast-container {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-toast-item {
  padding: 0.35rem 0.85rem;
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-font);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity var(--ww-dur-short) var(--ww-ease-out),
              transform var(--ww-dur-short) var(--ww-ease-play);
}

.sb-toast-item.ww-toast--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sb-toast-item.ww-toast--out {
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
}

.sb-toast-item.is-info {
  background: var(--club-brass);
  color: var(--ww-tile-ink);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--club-brass) 25%, transparent);
}

.sb-toast-item.is-info.is-pangram {
  background: var(--club-brass-lit);
  border: 1px solid var(--club-brass);
  box-shadow: 0 6px 16px color-mix(in oklch, var(--club-brass) 40%, transparent);
}

.sb-toast-item.is-error {
  background: var(--ww-paper-2);
  color: var(--ww-danger-text);
  border: 1px solid var(--ww-line);
}

/* --- Medallion ----------------------------------------------------------- */

.sb-hive {
  --sb-hive-size: 268px;
  --sb-outer-size: 60px;
  --sb-center-size: 68px;
  --sb-radius: 86px;
  --sb-core: 0px;
  position: relative;
  width: var(--sb-hive-size);
  height: var(--sb-hive-size);
  user-select: none;
  touch-action: manipulation;
  padding: 0;
}

.sb-hive::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--club-brass) 16%, var(--ww-paper-2));
  border: 1px solid var(--club-brass-dim);
  pointer-events: none;
  z-index: 0;
}

.sb-hive.is-shuffling .sb-cell--outer {
  transition: transform var(--ww-dur-short) var(--ww-ease-play);
}

.sb-cell {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  border: 1px solid var(--club-brass);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ww-display);
  font-size: 1.55rem;
  font-weight: 700;
  border-radius: 50%;
  clip-path: circle(50%);
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--ww-dur-micro) var(--ww-ease-out),
              border-color var(--ww-dur-micro) var(--ww-ease-out),
              transform var(--ww-dur-micro) var(--ww-ease-out);
}

.sb-cell--outer {
  width: var(--sb-outer-size);
  height: var(--sb-outer-size);
  margin-left: calc(var(--sb-outer-size) / -2);
  margin-top: calc(var(--sb-outer-size) / -2);
  background: var(--ww-tile-face);
  color: var(--ww-tile-ink);
  box-shadow: 0 2px 0 var(--ww-tile-edge);
}

.sb-hive--medallion .sb-cell--outer {
  --sb-dx: 0px;
  --sb-dy: 0px;
  transform: translate(var(--sb-dx), var(--sb-dy));
}
.sb-hive--medallion .sb-cell--outer[data-slot="0"] { --sb-dx: 0px; --sb-dy: calc(-1 * var(--sb-radius)); }
.sb-hive--medallion .sb-cell--outer[data-slot="1"] { --sb-dx: calc(0.7818 * var(--sb-radius)); --sb-dy: calc(-0.6235 * var(--sb-radius)); }
.sb-hive--medallion .sb-cell--outer[data-slot="2"] { --sb-dx: calc(0.9749 * var(--sb-radius)); --sb-dy: calc(0.2225 * var(--sb-radius)); }
.sb-hive--medallion .sb-cell--outer[data-slot="3"] { --sb-dx: calc(0.4339 * var(--sb-radius)); --sb-dy: calc(0.9010 * var(--sb-radius)); }
.sb-hive--medallion .sb-cell--outer[data-slot="4"] { --sb-dx: calc(-0.4339 * var(--sb-radius)); --sb-dy: calc(0.9010 * var(--sb-radius)); }
.sb-hive--medallion .sb-cell--outer[data-slot="5"] { --sb-dx: calc(-0.9749 * var(--sb-radius)); --sb-dy: calc(0.2225 * var(--sb-radius)); }
.sb-hive--medallion .sb-cell--outer[data-slot="6"] { --sb-dx: calc(-0.7818 * var(--sb-radius)); --sb-dy: calc(-0.6235 * var(--sb-radius)); }

.sb-hive--medallion .sb-cell--center {
  --sb-dx: 0px;
  --sb-dy: 0px;
  transform: translate(var(--sb-dx), var(--sb-dy));
}

.sb-hive--halo {
  --sb-hive-size: 252px;
  --sb-radius: 78px;
}

.sb-hive--halo .sb-cell--outer[data-slot="0"] { transform: translateY(calc(-1 * var(--sb-radius))); }
.sb-hive--halo .sb-cell--outer[data-slot="1"] { transform: translate(calc(0.866 * var(--sb-radius)), calc(-0.5 * var(--sb-radius))); }
.sb-hive--halo .sb-cell--outer[data-slot="2"] { transform: translate(calc(0.866 * var(--sb-radius)), calc(0.5 * var(--sb-radius))); }
.sb-hive--halo .sb-cell--outer[data-slot="3"] { transform: translateY(var(--sb-radius)); }
.sb-hive--halo .sb-cell--outer[data-slot="4"] { transform: translate(calc(-0.866 * var(--sb-radius)), calc(0.5 * var(--sb-radius))); }
.sb-hive--halo .sb-cell--outer[data-slot="5"] { transform: translate(calc(-0.866 * var(--sb-radius)), calc(-0.5 * var(--sb-radius))); }

.sb-hive--halo .sb-cell--center {
  --sb-dx: 0px;
  --sb-dy: 0px;
  transform: translate(var(--sb-dx), var(--sb-dy));
}
.sb-hive--halo .sb-cell--center[data-slot="0"] { --sb-dx: calc(-0.42 * var(--sb-center-size)); }
.sb-hive--halo .sb-cell--center[data-slot="1"] { --sb-dx: calc(0.42 * var(--sb-center-size)); }

@media (hover: hover) {
  .sb-hive--medallion .sb-cell--outer:hover:not(:disabled) {
    transform: translate(var(--sb-dx), calc(var(--sb-dy) - 1px));
  }

  .sb-cell--outer:hover:not(:disabled) {
    background: color-mix(in oklch, var(--ww-tile-face) 55%, var(--ww-paper));
    border-color: var(--club-brass-lit);
  }

  .sb-hive--medallion .sb-cell--center:hover:not(:disabled),
  .sb-hive--halo .sb-cell--center:hover:not(:disabled) {
    transform: translate(var(--sb-dx), calc(var(--sb-dy) - 1px));
  }
}

.sb-cell--center {
  width: var(--sb-center-size);
  height: var(--sb-center-size);
  margin-left: calc(var(--sb-center-size) / -2);
  margin-top: calc(var(--sb-center-size) / -2);
  background: var(--club-brass);
  color: var(--ww-wood-recess);
  border-color: var(--club-brass-lit);
  box-shadow: 0 2px 0 var(--sb-brass-edge);
  z-index: 2;
  font-size: 1.45rem;
}

@media (hover: hover) {
  .sb-cell--center:hover:not(:disabled) {
    background: var(--club-brass-lit);
  }
}

.sb-cell:active:not(:disabled), .sb-cell.is-pressed:not(:disabled) {
  box-shadow: 0 1px 0 var(--ww-tile-edge);
}

.sb-hive--medallion .sb-cell--outer:active:not(:disabled),
.sb-hive--medallion .sb-cell--outer.is-pressed:not(:disabled) {
  transform: translate(var(--sb-dx), calc(var(--sb-dy) + 1px)) scale(0.98);
}

.sb-hive--medallion .sb-cell--center:active:not(:disabled),
.sb-hive--medallion .sb-cell--center.is-pressed:not(:disabled),
.sb-hive--halo .sb-cell--center:active:not(:disabled),
.sb-hive--halo .sb-cell--center.is-pressed:not(:disabled) {
  transform: translate(var(--sb-dx), calc(var(--sb-dy) + 1px)) scale(0.98);
  box-shadow: 0 1px 0 var(--sb-brass-edge);
}

.sb-cell:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.sb-cell:focus-visible {
  outline: none;
}

.sb-cell:focus-visible .sb-cell-letter {
  outline: 3px solid var(--ww-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

.sb-cell--center:focus-visible .sb-cell-letter {
  outline-color: var(--ww-blue);
}

/* --- Controls Bar --------------------------------------------------------- */

.sb-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 360px;
}

.sb-btn-ctrl {
  min-height: var(--ww-control-min, 44px);
  padding: 0.5rem 1.1rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  color: var(--ww-ink);
  font-family: var(--ww-font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background var(--ww-dur-micro) var(--ww-ease-out),
              border-color var(--ww-dur-micro) var(--ww-ease-out),
              transform var(--ww-dur-micro) var(--ww-ease-out);
}

@media (hover: hover) {
  .sb-btn-ctrl:hover:not(:disabled) {
    border-color: var(--club-brass);
    background: var(--ww-paper);
  }
}

.sb-btn-ctrl:active:not(:disabled) {
  transform: translateY(1px);
}

.sb-btn-ctrl:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sb-btn-ctrl--enter {
  background: var(--club-brass);
  color: var(--ww-tile-ink);
  border-color: var(--club-brass-lit);
}

@media (hover: hover) {
  .sb-btn-ctrl--enter:hover:not(:disabled) {
    background: var(--club-brass-lit);
  }
}

/* --- Found Words Panel ---------------------------------------------------- */

.sb-words-panel {
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sb-words-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sb-words-header h3 {
  font-family: var(--ww-display);
  font-size: 1.15rem;
  margin: 0;
  color: var(--ww-ink);
}

.sb-words-count {
  font-family: var(--ww-mono);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink);
  opacity: 0.82;
  font-weight: 500;
  margin-left: 0.4rem;
}

.sb-words-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sb-words-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.25rem;
}

.sb-word-pill {
  padding: 0.35rem 0.65rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  font-family: var(--ww-font);
  font-size: 0.85rem;
  color: var(--ww-ink);
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out),
              background var(--ww-dur-micro) var(--ww-ease-out);
}

@keyframes sb-word-appear {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.sb-word-pill:first-child {
  animation: sb-word-appear 200ms var(--ww-ease-play);
}

.sb-word-pill.is-pangram {
  background: var(--club-brass);
  color: var(--ww-tile-ink);
  font-weight: 700;
  border-color: var(--club-brass-lit);
}

/* Extra credit: accepted, scored, but outside the medallion's total. */
.sb-word-pill.is-bonus:not(.is-pangram) {
  border-color: var(--club-jade);
  box-shadow: inset 2px 0 0 var(--club-jade);
}

.sb-bonus-words {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sb-bonus-heading {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ww-ink-soft);
}

.sb-word-pill.is-missed {
  opacity: 0.75;
  background: var(--ww-paper-2);
  color: var(--ww-ink-soft);
  border-style: dashed;
}

.sb-game-over-banner {
  border-top: 1px solid var(--ww-line);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sb-game-over-banner h4 {
  font-family: var(--ww-display);
  font-size: 1.2rem;
  margin: 0;
  color: var(--ww-ink);
}

.sb-missed-words summary {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ww-ink);
  min-height: var(--ww-control-min, 44px);
  display: flex;
  align-items: center;
}

.sb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.sb-actions form {
  display: contents;
}

.sb-actions .ww-rematch-pending {
  margin: 0;
  color: var(--ww-ink-soft);
  font-size: 0.9rem;
}

/* --- Hints Modal Dialog --------------------------------------------------- */

.sb-hints-dialog {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  padding: 1.5rem;
  max-width: 520px;
  width: 90vw;
  box-shadow: var(--ww-shadow);
}

.sb-hints-dialog::backdrop {
  background: color-mix(in oklch, var(--ww-navy) 78%, transparent);
  backdrop-filter: blur(2px);
}

.sb-hints-dialog header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ww-line);
  padding-bottom: 0.5rem;
}

.sb-hints-dialog header h3 {
  color: var(--ww-ink);
  margin: 0;
}

.sb-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ww-mono);
  font-size: 0.85rem;
  margin: 1rem 0;
}

.sb-matrix-table th, .sb-matrix-table td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  border: 1px solid var(--ww-line);
  font-variant-numeric: tabular-nums;
}

.sb-matrix-table th {
  background: var(--ww-paper);
  color: var(--club-brass-lit);
}

.sb-two-letter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sb-two-letter-tag {
  font-family: var(--ww-mono);
  font-size: 0.85rem;
  background: var(--ww-paper);
  color: var(--ww-ink);
  padding: 0.25rem 0.5rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  font-variant-numeric: tabular-nums;
}
/* Toast notifications (Turbo friendly) */

.ww-toasts {
  position: fixed;
  top: 4.75rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(420px, calc(100vw - 2rem));
}

.ww-toast {
  border-radius: 0.9rem;
  border: 1px solid rgba(229, 231, 235, 0.9);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.16);
  padding: 0.75rem 0.85rem;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--ww-dur-short) var(--ww-ease-out), transform var(--ww-dur-short) var(--ww-ease-out);
}

.ww-toast--in {
  opacity: 1;
  transform: translateY(0px);
}

.ww-toast--out {
  opacity: 0;
  transform: translateY(-6px);
}

.ww-toast--notice {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(236, 253, 245, 0.92);
}

.ww-toast--alert,
.ww-toast--error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(254, 242, 242, 0.92);
}

.ww-toast-body {
  color: #111827;
  font-weight: 650;
}

.ww-toast-close {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
}

.ww-toast-close:hover {
  color: #111827;
}
/* Triad Tactics: three baize fronts, travertine card stock, brass for whoever
   holds a front. Material (grain, felt) is laid in zzz-club.css.erb. */

.triad-table {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius);
  background-color: var(--ww-paper-2);
  color: var(--ww-ink);
}

.triad-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
}

.triad-seat { display: grid; gap: .1rem; }
.triad-seat--rival { text-align: right; }
.triad-seat__name { font-weight: 700; }
.triad-seat__points {
  font-family: var(--ww-display);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--club-brass-lit);
}
.triad-seat small,
.triad-clock small { color: var(--ww-ink-soft); font-size: .8rem; }
.triad-clock { display: grid; text-align: center; gap: .1rem; }
.triad-clock strong { font-variant-numeric: tabular-nums; }

.triad-turn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink-soft);
}
.triad-turn strong { color: var(--ww-ink); }
.triad-turn.is-yours {
  border-color: color-mix(in oklch, var(--club-jade) 70%, var(--club-brass));
  background: color-mix(in oklch, var(--club-jade) 30%, var(--ww-paper));
  color: var(--ww-ink);
}

.triad-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.triad-lane {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto 1fr auto;
  gap: .5rem;
  min-height: 25rem;
  padding: .75rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background-color: color-mix(in oklch, var(--club-jade) 55%, var(--ww-navy));
  color: var(--ww-ink);
  transition: var(--ww-transition-chrome);
}
.triad-lane.is-mine { border-color: color-mix(in oklch, var(--club-brass) 65%, transparent); }
.triad-lane.is-theirs { border-color: color-mix(in oklch, var(--club-oxblood) 80%, var(--ww-ink) 10%); }
.triad-lane.is-armed { cursor: pointer; }
.triad-lane.is-armed::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px dashed color-mix(in oklch, var(--club-brass-lit) 70%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) {
  .triad-lane.is-armed:hover { background-color: color-mix(in oklch, var(--club-jade) 70%, var(--ww-navy)); }
}
.triad-lane.is-hovered {
  background-color: color-mix(in oklch, var(--club-jade) 80%, var(--ww-navy));
  box-shadow: inset 0 0 0 2px var(--club-brass);
}
.triad-lane.is-receiving { box-shadow: inset 0 0 0 2px var(--club-brass-lit); }
.triad-lane.is-refused { animation: triad-refuse var(--ww-dur-short) var(--ww-ease-out); }
.triad-lane.is-full .triad-slot { display: none; }

@keyframes triad-refuse {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.triad-front { text-align: center; }
.triad-front h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-family: var(--ww-display);
  font-size: 1.15rem;
}
.triad-front p { margin: .15rem 0 0; font-size: .8rem; color: color-mix(in oklch, var(--ww-ink) 80%, var(--club-celadon)); }
.triad-front__value {
  padding: .05rem .4rem;
  border: 1px solid var(--club-brass);
  border-radius: 99px;
  font-family: var(--ww-font);
  font-size: .7rem;
  font-weight: 800;
  color: var(--club-brass-lit);
}

.triad-side {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: .35rem;
  min-height: 4.5rem;
}
.triad-side--rival { align-content: flex-end; }

.triad-slot {
  width: 3.4rem;
  height: 4.4rem;
  border: 1px dashed color-mix(in oklch, var(--club-celadon) 35%, transparent);
  border-radius: .45rem;
}

.triad-total {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .4rem;
  padding: .3rem 0;
  border-block: 1px solid color-mix(in oklch, var(--club-brass) 25%, transparent);
}
.triad-total__side {
  font-family: var(--ww-display);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: color-mix(in oklch, var(--ww-ink) 75%, transparent);
}
.triad-total__side small {
  display: block;
  font-family: var(--ww-font);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--club-celadon);
}
.triad-total__side.is-leading { color: var(--club-brass-lit); font-weight: 800; }
.triad-total__verdict { font-size: .72rem; font-weight: 700; color: var(--club-celadon); white-space: nowrap; }

/* Card stock. Hand cards carry their rule text; cards on a front show only
   power and name, with the rule in the title. */
.triad-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .1rem;
  width: 3.4rem;
  height: 4.4rem;
  padding: .25rem;
  border: 1px solid var(--club-walnut);
  border-bottom: 3px solid var(--club-jade);
  border-radius: .45rem;
  background: var(--club-travertine);
  color: var(--club-walnut);
  text-align: center;
}
.triad-card--rival { border-bottom-color: var(--club-oxblood); background: color-mix(in oklch, var(--club-travertine) 88%, var(--club-oxblood)); }
.triad-card__power {
  font-family: var(--ww-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.triad-card__power.is-up { color: var(--club-jade); }
.triad-card__power.is-up::after { content: "▲"; font-size: .5em; vertical-align: super; }
.triad-card__power.is-down { color: var(--club-oxblood); }
.triad-card__power.is-down::after { content: "▼"; font-size: .5em; vertical-align: super; }
.triad-card__name { font-size: .68rem; font-weight: 700; line-height: 1.1; }
.triad-card__text { font-size: .72rem; line-height: 1.25; color: color-mix(in oklch, var(--club-walnut) 80%, transparent); }

.triad-card.is-fresh { animation: triad-deal var(--ww-dur-long) var(--ww-ease-play); }
@keyframes triad-deal {
  from { opacity: 0; transform: translateY(-18px) scale(1.12) rotate(-4deg); }
  to { opacity: 1; transform: none; }
}

.triad-deploy {
  min-height: var(--ww-control-min);
  padding: .4rem .6rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--ww-navy) 70%, transparent);
  color: var(--club-brass-lit);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  transition: var(--ww-transition-chrome);
}
@media (hover: hover) {
  .triad-deploy:hover { border-color: var(--club-brass); background: var(--ww-navy); }
}
.triad-deploy:active { transform: translateY(1px); }
.triad-deploy:disabled { opacity: .5; cursor: not-allowed; }

.triad-hand {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr auto;
  align-items: center;
  gap: .75rem 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
}
.triad-hand__head { display: grid; gap: .2rem; }
.triad-hand__head span { font-size: .85rem; color: var(--ww-ink-soft); }
.triad-play-form { margin: 0; }
.triad-card-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.triad-card-picker.is-waiting { opacity: .7; }
.triad-card--hand {
  width: 7rem;
  height: auto;
  min-height: 7.5rem;
  align-content: start;
  padding: .45rem .5rem .55rem;
}
.triad-card--hand .triad-card__power { font-size: 1.7rem; }
.triad-card--hand .triad-card__name { font-size: .85rem; }

.triad-card-choice { position: relative; cursor: grab; touch-action: none; }
.triad-card-choice input { position: absolute; opacity: 0; pointer-events: none; }
.triad-card-choice .triad-card { transition: var(--ww-transition-chrome); }
@media (hover: hover) {
  .triad-card-choice:hover .triad-card { transform: translateY(-3px); }
}
.triad-card-choice input:checked + .triad-card {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px var(--club-brass), 0 6px 0 -2px var(--club-brass-dim);
}
.triad-card-choice input:focus-visible + .triad-card { outline: 3px solid var(--ww-focus); outline-offset: 3px; }
.triad-card-choice.is-lifted .triad-card { opacity: .35; }

.triad-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 14px 24px -8px oklch(0.1 0.03 265 / 0.6);
}

.triad-hold { white-space: nowrap; }

.triad-result {
  padding: 1rem 1.25rem;
  border: 1px solid var(--club-brass-dim);
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, var(--club-jade) 30%, var(--ww-paper));
  color: var(--ww-ink);
}
.triad-result h2 { margin: .2rem 0; font-family: var(--ww-display); font-size: 1.6rem; }
.triad-result p { margin: .2rem 0 0; }

.triad-rules {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
}
.triad-rules summary { min-height: var(--ww-control-min); display: flex; align-items: center; padding: 0 1rem; cursor: pointer; font-weight: 800; color: var(--club-brass-lit); }
.triad-rules__body { display: grid; gap: .5rem; padding: 0 1rem 1rem; font-size: .92rem; color: var(--ww-ink-soft); }
.triad-rules__body p { margin: 0; }
.triad-rules__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .3rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.triad-rules__cards strong { color: var(--ww-ink); margin-right: .35rem; }

@media (max-width: 760px) {
  .triad-table { padding: .6rem; gap: .6rem; }
  .triad-lanes { gap: .35rem; }
  .triad-lane { min-height: 19rem; padding: .45rem .25rem; gap: .35rem; }
  .triad-front h3 { font-size: .85rem; flex-direction: column; gap: .1rem; }
  .triad-front p { font-size: .66rem; }
  .triad-side { gap: .2rem; min-height: 3.2rem; }
  .triad-card, .triad-slot { width: 2.35rem; height: 3.1rem; }
  .triad-card__power { font-size: 1rem; }
  .triad-card__name { font-size: .5rem; }
  .triad-total__side { font-size: 1.1rem; }
  .triad-total__side small { font-size: .5rem; overflow: hidden; text-overflow: ellipsis; }
  .triad-total__verdict { font-size: .6rem; }
  .triad-deploy { font-size: .68rem; padding: .3rem; }
  .triad-hand { grid-template-columns: 1fr; padding: .6rem; }
  .triad-card-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .triad-card--hand { width: 100%; min-height: 6.4rem; padding: .35rem .3rem .45rem; }
  .triad-card--hand .triad-card__text { font-size: .62rem; }
  .triad-card--hand .triad-card__name { font-size: .8rem; }
  .triad-seat__points { font-size: 1.2rem; }
  .triad-clock small { display: none; }
}
.tr-hero {
  padding: 2rem;
  border-radius: var(--ww-radius);
  color: var(--ww-ink);
  background:
    radial-gradient(circle at 85% 20%, color-mix(in oklch, var(--ww-blue) 40%, transparent) 0 4%, transparent 5%),
    linear-gradient(135deg, var(--ww-navy), var(--ww-navy-2));
  box-shadow: var(--ww-shadow);
}

.tr-hero h1 {
  font-family: var(--ww-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  margin: 0.3rem 0 0.8rem;
  color: var(--ww-ink);
}

.tr-hero p {
  color: var(--ww-ink-soft);
  max-width: 44rem;
}

.tr-board {
  display: grid;
  gap: 1.25rem;
}

.tr-round-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.tr-category-title {
  font-family: var(--ww-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--ww-ink);
  line-height: 1.1;
  margin-top: 0.25rem;
}

.tr-source-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in oklch, var(--ww-blue) 18%, transparent);
  color: var(--ww-blue);
  border: 1px solid color-mix(in oklch, var(--ww-blue) 35%, transparent);
}

.tr-scoreboard {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tr-score-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
  font-weight: 700;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink);
}

.tr-clue-card {
  background: color-mix(in oklch, var(--ww-navy) 92%, var(--ww-blue-deep));
  border: 2px solid color-mix(in oklch, var(--club-brass) 55%, var(--ww-line));
  border-radius: var(--ww-radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--ww-shadow);
  text-align: center;
}

.tr-clue-text {
  font-family: var(--ww-display);
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ww-ink);
  margin: 0;
}

.tr-choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  border: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 640px) {
  .tr-choices-grid {
    grid-template-columns: 1fr;
  }
}

.tr-choice-card {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--ww-paper);
  border: 1.5px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
  user-select: none;
  transition: var(--ww-transition-chrome);
  color: var(--ww-ink);
}

@media (hover: hover) {
  .tr-choice-card:hover {
    border-color: var(--club-brass);
    background: color-mix(in oklch, var(--ww-paper) 90%, var(--club-brass));
  }
}

.tr-choice-card:has(:focus-visible) {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

.tr-choice-card:active {
  transform: translateY(1px);
}

.tr-choice-card:has(:checked) {
  border-color: var(--ww-blue);
  background: color-mix(in oklch, var(--ww-blue) 15%, var(--ww-paper));
}

.tr-choice-letter {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  background: color-mix(in oklch, var(--ww-ink) 10%, transparent);
  color: var(--ww-ink);
  flex-shrink: 0;
}

.tr-choice-text {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.tr-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tr-reveal-panel {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
}

.tr-reveal-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tr-reveal-choices {
  display: grid;
  gap: 0.65rem;
}

.tr-reveal-choice {
  padding: 0.85rem 1.15rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  background: var(--ww-paper);
}

.tr-reveal-choice.is-correct-answer {
  border-color: var(--ww-emerald);
  background: color-mix(in oklch, var(--ww-emerald) 16%, var(--ww-paper));
  color: var(--ww-ink);
}

.tr-reveal-choice.is-wrong-answer {
  border-color: var(--ww-danger);
  background: color-mix(in oklch, var(--ww-danger) 14%, var(--ww-paper));
  color: var(--ww-ink);
}

.tr-badge-correct {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ww-emerald);
}

.tr-choice-voters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.tr-voter-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ww-ink) 12%, transparent);
  color: var(--ww-ink);
}

.tr-result-card {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: var(--ww-radius);
  background: var(--ww-paper-2);
  border: 1px solid var(--ww-line);
}

.tr-result-card h1 {
  font-family: var(--ww-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--ww-ink);
}

.tr-final-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 32rem;
  margin: 1.5rem auto 0;
}

.tr-score-pill {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
}

.tr-score-pill strong {
  font-size: 2rem;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ww-gold);
}

.tr-recap {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.tr-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  border: 1px solid var(--ww-line);
  flex-wrap: wrap;
}

.tr-recap-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 36rem;
}

.tr-recap-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ww-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tr-recap-clue {
  font-size: 0.95rem;
  color: var(--ww-ink);
}

.tr-recap-answer {
  font-size: 0.85rem;
  color: var(--ww-ink-soft);
}

.tr-recap-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
}

.tr-player-recap.is-correct {
  color: var(--ww-emerald);
  font-weight: 700;
}

.tr-player-recap.is-wrong {
  color: var(--ww-ink-soft);
}

.tr-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* One-tap answers: each choice card is a submit button. */
button.tr-choice-card {
  width: 100%;
  font: inherit;
  text-align: left;
}

button.tr-choice-card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tr-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tr-timer .ww-timer-value {
  font-family: var(--ww-mono);
  font-variant-numeric: tabular-nums;
}
/* ===== Turntables: the lazy susan and the spiral stair =====
 *
 * Two ways of standing several choices up so they move, without ever hiding
 * one behind another:
 *
 * .ww-susan  -- a few big choices on one turntable (lazy_susan_controller).
 *               A scroll-snap row; the controller hands each seat its
 *               distance from the middle as --d / --ad and the plate's turn
 *               as --spin. A split-flap departures board reads the front seat.
 * .ww-stair  -- a card's action stack as a short spiral round a brass newel
 *               (stair_controller). --phase follows the card through the
 *               viewport; --i is each step's place on the stair.
 *
 * Layout and motion live here. What the plate, the treads and the buttons are
 * made of -- brass, walnut, clear coloured plastic -- is in zzz-club.css.erb.
 * Without JavaScript both fall back to a plain row and a plain stack.
 */

/* ----- Lazy susan ----- */

.ww-susan {
  --seat: min(22rem, 72vw);
  position: relative;
  display: block;
  margin: 0 0 1.25rem;
}

.ww-susan__board {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin: 0 auto .35rem;
  width: fit-content;
  max-width: 100%;
  padding: .4rem;
  border-radius: .35rem;
  font: 700 clamp(.62rem, 2.7vw, 1.02rem)/1 var(--ww-mono);
  perspective: 300px;
}

.ww-susan__board span {
  flex: 0 0 auto;
  width: 1.2em;
  display: grid;
  place-items: center;
  height: 1.75em;
  border-radius: 2px;
  transform-origin: 50% 50%;
}

.ww-susan__board span.is-flipping { animation: ww-flap 90ms var(--ww-ease-in); }

@keyframes ww-flap {
  from { transform: rotateX(-88deg); }
  to { transform: rotateX(0deg); }
}

.ww-susan__track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem calc(50% - var(--seat) / 2) 3.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}
.ww-susan__track::-webkit-scrollbar { display: none; }
.ww-susan__track:focus-visible { outline-offset: -3px; }
/* Once the controller turns the seats, it also brings the nearest one to the
   front itself. CSS snap would measure the seats as they stand swung round the
   rim, so the last few, folded in behind their neighbours, had no snap point
   of their own and could never face you. Drifting, snap would also yank the
   track back to the last seat on each frame. */
.ww-susan.is-turning .ww-susan__track { scroll-snap-type: none; }
.ww-susan.is-drifting .ww-susan__track { cursor: grab; }
.ww-susan.is-grabbed .ww-susan__track { cursor: grabbing; user-select: none; }
.ww-susan.is-grabbed .ww-susan__seat a { pointer-events: none; }

.ww-susan__seat {
  flex: 0 0 var(--seat);
  scroll-snap-align: center;
  transform:
    rotateY(calc(var(--d, 0) * -26deg))
    translateZ(calc(var(--ad, 0) * -80px))
    translateY(calc(var(--ad, 0) * 1.1rem));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Chunky controls on the seats: a seat round the rim sits back in
   perspective, and its controls must still measure a full finger target. */
/* The selector out-specifies application.css's input:not(...) target rule. */
.ww-susan__seat :is(.ww-btn, select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.wp-cell)) { min-height: 3.1rem; }

/* A seat with a cover: the art across the top, the play button on the floor
   so every seat's button sits at the same height round the rim. */
.ww-susan__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: .5rem 0 .75rem;
  border-radius: .5rem;
}
.ww-susan__seat:has(.ww-susan__cover) { display: flex; flex-direction: column; }
.ww-susan__seat:has(.ww-susan__cover) > :last-child { margin-top: auto; padding-top: 1.25rem; }
/* With a hundred seats the tallest blurb sets every seat's height; clamp it
   so one long description does not leave the rest standing half empty. */
.ww-susan__cover ~ h2 + p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ww-susan__meta { font: 600 .8rem/1.3 var(--ww-mono); letter-spacing: .04em; opacity: .8; }

/* Small tables: seats a little narrower than the table so each neighbour
   shows its edge round the rim. */
.ww-susan--compact { --seat: min(19rem, 78vw); }

/* The plate under the seats: a disc laid nearly flat (the tilt is on the
   holder, the turn on the disc, so the turn stays in the plane of the table). */
.ww-susan__plate {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 3.1rem;
  width: min(44rem, 118%);
  aspect-ratio: 1;
  translate: -50% 50%;
  transform: perspective(1400px) rotateX(81deg);
  pointer-events: none;
}

.ww-susan__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(var(--spin, 0deg));
}

.ww-susan__dial {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  margin-top: -1.6rem;
}

.ww-susan__pip {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
}
/* The stud is small; the finger target is not. */
.ww-susan__pip::before { content: ""; position: absolute; inset: -.85rem -.4rem; }

.ww-susan__turn {
  display: grid;
  place-items: center;
  width: var(--ww-control-min);
  height: var(--ww-control-min);
  padding: 0;
  border-radius: 50%;
}

/* Without the controller, or before it connects: a plain row. */
.ww-susan:not(.is-turning) .ww-susan__seat { transform: none; }
.ww-susan:not(.is-turning) :is(.ww-susan__dial, .ww-susan__board) { visibility: hidden; }

/* ----- Spiral stair ----- */

.ww-stair {
  --phase: 0;
  position: relative;
  display: grid;
  gap: .6rem;
  margin-top: .9rem;
  padding: .35rem 0 .2rem 1.35rem;
  perspective: 700px;
  perspective-origin: 0% 50%;
}

.ww-stair > * { min-width: 0; }

/* The newel post and its cap. */
.ww-stair::before,
.ww-stair::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.ww-stair::before { left: .3rem; top: .2rem; bottom: .3rem; width: .4rem; border-radius: 99px; }
.ww-stair::after { left: .12rem; top: -.45rem; width: .76rem; aspect-ratio: 1; border-radius: 50%; }

.ww-stair__step {
  --turn: calc(var(--phase) * 110deg + var(--i, 0) * 60deg);
  position: relative;
  transform-origin: 0% 50%;
  transform:
    rotateY(calc(sin(var(--turn)) * 30deg))
    translateX(calc((1 - cos(var(--turn))) * 7px));
  transition: transform var(--ww-dur-short) var(--ww-ease-out);
}

/* The bracket from the post to each tread. */
.ww-stair__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.05rem;
  width: 1.05rem;
  height: 3px;
  border-radius: 2px;
  translate: 0 -50%;
  pointer-events: none;
}

.ww-stair__step:focus-within { transform: translateZ(16px); transition-duration: var(--ww-dur-micro); }
@media (hover: hover) {
  .ww-stair__step:hover { transform: translateZ(16px); transition-duration: var(--ww-dur-micro); }
}

.ww-stair .ww-btn,
.ww-stair :is(.card-play-btn, .card-side-btn, .card-text-link) {
  width: 100%;
  white-space: nowrap;
}
.ww-stair form { margin: 0; }
.ww-stair .ww-practice-form { margin-top: 0; }
.ww-stair .card-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ww-control-min);
}

/* Two short actions can share a tread. */
.ww-stair__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
/*!
 * Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2026 Fonticons, Inc.
 */
.fa,.fa-brands,.fa-classic,.fa-regular,.fa-solid,.fab,.far,.fas{--_fa-family:var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free"));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:var(--fa-display,inline-block);font-family:var(--_fa-family);font-feature-settings:normal;font-style:normal;font-synthesis:none;font-variant:normal;font-weight:var(--fa-style,900);line-height:1;text-align:center;text-rendering:auto;width:var(--fa-width,1.25em)}:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)/""}@supports not (content:""/""){:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)}}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-width-auto{--fa-width:auto}.fa-fw,.fa-width-fixed{--fa-width:1.25em}.fa-canvas-square{padding-block:.125em;margin-block-end:-.125em}.fa-canvas-roomy{padding-block:.25em;padding-inline:.125em;margin-block-end:-.25em;box-sizing:content-box}.fa-ul{list-style-type:none;margin-inline-start:var(--fa-li-margin,2.5em);padding-inline-start:0}.fa-ul>li{position:relative}.fa-li{inset-inline-start:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.0625em) var(--fa-border-style,solid) var(--fa-border-color,#eee);box-sizing:var(--fa-border-box-sizing,content-box);padding:var(--fa-border-padding,.1875em .25em)}.fa-pull-left,.fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.fa-pull-end,.fa-pull-right{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-flip{animation-name:fa-flip;animation-duration:var(--fa-animation-duration,1.5s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-flip,.fa-flip-360{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-flip-360{animation-name:fa-flip-360;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,.75s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-spin{animation-name:fa-spin;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}.fa-spin-snap{animation-name:fa-spin-snap;animation-duration:var(--fa-animation-duration,3s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-snap,.fa-spin-snap-4{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin-snap-4{animation-name:fa-spin-snap-4;animation-duration:var(--fa-animation-duration,2.4s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-snap-8{animation-name:fa-spin-snap-8;animation-duration:var(--fa-animation-duration,4s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-buzz,.fa-spin-snap-8{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-buzz{animation-name:fa-buzz;animation-duration:var(--fa-animation-duration,.6s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-wag{animation-name:fa-wag;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,.9s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-out);transform-origin:bottom center}.fa-float{animation-name:fa-float;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,3s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out);will-change:transform}.fa-swing{animation-name:fa-swing;animation-duration:var(--fa-animation-duration,1.2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-out);transform-origin:top center}.fa-jello,.fa-swing{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-jello{animation-name:fa-jello;animation-duration:var(--fa-animation-duration,.9s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-out)}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-buzz,.fa-fade,.fa-flip,.fa-flip-360,.fa-float,.fa-jello,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse,.fa-spin-snap,.fa-spin-snap-4,.fa-spin-snap-8,.fa-swing,.fa-wag{animation:none!important;transition:none!important}}@keyframes fa-beat{0%{transform:scale(1)}25%{transform:scale(calc(var(--fa-beat-scale, 1.25)*1.25))}45%{transform:scale(calc(var(--fa-beat-scale, 1.22)*1.22))}65%{transform:scale(calc(var(--fa-beat-scale, 1.25)*1.25))}90%{transform:scale(1)}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0);animation-timing-function:var(--fa-animation-timing)}14%{transform:scale(var(--fa-bounce-start-scale-x,1.06),var(--fa-bounce-start-scale-y,.94)) translateY(var(--fa-bounce-anticipation,3px));animation-timing-function:cubic-bezier(.33,0,.66,.33)}32%{transform:scale(var(--fa-bounce-jump-scale-x,.94),var(--fa-bounce-jump-scale-y,1.12)) translateY(calc(var(--fa-bounce-height, .5em)*-1));animation-timing-function:cubic-bezier(.33,.66,.66,1)}52%{transform:scale(1) translateY(calc(var(--fa-bounce-height, .5em)*-1*1.1));animation-timing-function:cubic-bezier(.5,0,1,.5)}70%{transform:scale(var(--fa-bounce-land-scale-x,1.06),var(--fa-bounce-land-scale-y,.92)) translateY(0);animation-timing-function:cubic-bezier(.33,.33,.66,1)}85%{transform:scale(.98,1.04) translateY(calc(-2px*var(--fa-bounce-rebound, 1)));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{0%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,0,.4,1)}40%{opacity:var(--fa-fade-opacity,.4);transform:scale(.98);animation-timing-function:cubic-bezier(.4,0,.6,1)}to{opacity:1;transform:scale(1)}}@keyframes fa-beat-fade{0%{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1);animation-timing-function:cubic-bezier(.2,0,.4,1)}25%{opacity:calc(var(--fa-beat-fade-opacity, .4) + .4);transform:scale(var(--fa-beat-fade-scale,1.28));animation-timing-function:cubic-bezier(.4,0,.6,1)}45%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.25));animation-timing-function:cubic-bezier(.4,0,.2,1)}65%{opacity:calc(var(--fa-beat-fade-opacity, .4) + .4);transform:scale(var(--fa-beat-fade-scale,1.28));animation-timing-function:cubic-bezier(.4,0,.6,1)}to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}}@keyframes fa-flip{0%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.2,0,.4,1)}8%{transform:perspective(2em) scale(var(--fa-flip-anticipation-scale,.95)) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.33,0,.66,.33)}35%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*0.6));animation-timing-function:linear}65%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*0.5));animation-timing-function:cubic-bezier(.33,.66,.66,1)}92%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*var(--fa-flip-overshoot, 1.04)));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-1turn))}}@keyframes fa-flip-360{0%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.2,0,.4,1)}8%{transform:perspective(2em) scale(var(--fa-flip-anticipation-scale,.95)) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.33,0,.66,.33)}50%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*0.6));animation-timing-function:cubic-bezier(.33,.66,.66,1)}80%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*var(--fa-flip-overshoot, 1.04)));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-1turn))}}@keyframes fa-shake{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,0,.8,1)}8%{transform:rotate(35deg) translateX(1px);animation-timing-function:cubic-bezier(.3,0,.7,1)}20%{transform:rotate(-22deg) translateX(-1px);animation-timing-function:cubic-bezier(.3,0,.7,1)}35%{transform:rotate(15deg) translateX(1px);animation-timing-function:cubic-bezier(.3,0,.7,1)}50%{transform:rotate(-9deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}65%{transform:rotate(5deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}78%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}90%{transform:rotate(1deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fa-spin-snap{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.2,1)}12%{transform:rotate(60deg);animation-timing-function:cubic-bezier(.8,0,1,1)}16.67%{transform:rotate(60deg);animation-timing-function:cubic-bezier(0,0,.2,1)}28.67%{transform:rotate(120deg);animation-timing-function:cubic-bezier(.8,0,1,1)}33.33%{transform:rotate(120deg);animation-timing-function:cubic-bezier(0,0,.2,1)}45.33%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(0,0,.2,1)}62%{transform:rotate(240deg);animation-timing-function:cubic-bezier(.8,0,1,1)}66.67%{transform:rotate(240deg);animation-timing-function:cubic-bezier(0,0,.2,1)}78.67%{transform:rotate(300deg);animation-timing-function:cubic-bezier(.8,0,1,1)}83.33%{transform:rotate(300deg);animation-timing-function:cubic-bezier(0,0,.2,1)}95.33%{transform:rotate(1turn);animation-timing-function:cubic-bezier(.8,0,1,1)}to{transform:rotate(1turn)}}@keyframes fa-spin-snap-4{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.2,1)}15%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.8,0,1,1)}25%{transform:rotate(90deg);animation-timing-function:cubic-bezier(0,0,.2,1)}40%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(0,0,.2,1)}65%{transform:rotate(270deg);animation-timing-function:cubic-bezier(.8,0,1,1)}75%{transform:rotate(270deg);animation-timing-function:cubic-bezier(0,0,.2,1)}90%{transform:rotate(1turn);animation-timing-function:cubic-bezier(.8,0,1,1)}to{transform:rotate(1turn)}}@keyframes fa-spin-snap-8{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.2,1)}9%{transform:rotate(45deg);animation-timing-function:cubic-bezier(.8,0,1,1)}12.5%{transform:rotate(45deg);animation-timing-function:cubic-bezier(0,0,.2,1)}21.5%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.8,0,1,1)}25%{transform:rotate(90deg);animation-timing-function:cubic-bezier(0,0,.2,1)}34%{transform:rotate(135deg);animation-timing-function:cubic-bezier(.8,0,1,1)}37.5%{transform:rotate(135deg);animation-timing-function:cubic-bezier(0,0,.2,1)}46.5%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(0,0,.2,1)}59%{transform:rotate(225deg);animation-timing-function:cubic-bezier(.8,0,1,1)}62.5%{transform:rotate(225deg);animation-timing-function:cubic-bezier(0,0,.2,1)}71.5%{transform:rotate(270deg);animation-timing-function:cubic-bezier(.8,0,1,1)}75%{transform:rotate(270deg);animation-timing-function:cubic-bezier(0,0,.2,1)}84%{transform:rotate(315deg);animation-timing-function:cubic-bezier(.8,0,1,1)}87.5%{transform:rotate(315deg);animation-timing-function:cubic-bezier(0,0,.2,1)}96.5%{transform:rotate(1turn);animation-timing-function:cubic-bezier(.8,0,1,1)}to{transform:rotate(1turn)}}@keyframes fa-buzz{0%{transform:translateX(0) rotate(0deg);animation-timing-function:cubic-bezier(.1,0,.9,1)}5%{transform:translateX(var(--fa-buzz-distance,4px)) rotate(.5deg)}10%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*-1)) rotate(-.5deg)}15%{transform:translateX(var(--fa-buzz-distance,4px)) rotate(.3deg)}20%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*-1)) rotate(-.3deg)}25%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*0.7)) rotate(.2deg)}30%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*-1*0.7)) rotate(-.2deg)}35%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*0.4)) rotate(.1deg)}40%{transform:translateX(0) rotate(0deg)}to{transform:translateX(0) rotate(0deg)}}@keyframes fa-wag{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,0,.6,1)}12%{transform:rotate(var(--fa-wag-angle,12deg));animation-timing-function:cubic-bezier(.4,0,.2,1)}24%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.2,0,.6,1)}36%{transform:rotate(calc(var(--fa-wag-angle, 12deg)*0.85));animation-timing-function:cubic-bezier(.4,0,.2,1)}48%{transform:rotate(1deg);animation-timing-function:cubic-bezier(.2,0,.6,1)}58%{transform:rotate(calc(var(--fa-wag-angle, 12deg)*0.6));animation-timing-function:cubic-bezier(.4,0,.2,1)}68%{transform:rotate(0deg)}to{transform:rotate(0deg)}}@keyframes fa-float{0%{transform:translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x,1.02),var(--fa-float-squash-y,.98));animation-timing-function:cubic-bezier(.33,0,.66,.33)}15%{transform:translateY(calc(var(--fa-float-height, 6px)*-0.4)) translateX(var(--fa-float-drift,1px)) rotate(var(--fa-float-tilt,1deg)) scale(1);animation-timing-function:cubic-bezier(.33,.66,.66,1)}35%{transform:translateY(calc(var(--fa-float-height, 6px)*-1)) translateX(0) rotate(0deg) scale(var(--fa-float-stretch-x,.98),var(--fa-float-stretch-y,1.03));animation-timing-function:cubic-bezier(.5,0,.5,0)}50%{transform:translateY(calc(var(--fa-float-height, 6px)*-0.92)) translateX(calc(var(--fa-float-drift, 1px)*-0.5)) rotate(calc(var(--fa-float-tilt, 1deg)*-0.5)) scale(.995,1.01);animation-timing-function:cubic-bezier(.33,0,.66,.33)}70%{transform:translateY(calc(var(--fa-float-height, 6px)*-0.3)) translateX(calc(var(--fa-float-drift, 1px)*-1)) rotate(calc(var(--fa-float-tilt, 1deg)*-1)) scale(1);animation-timing-function:cubic-bezier(.33,.66,.66,1)}90%{transform:translateY(calc(var(--fa-float-height, 6px)*0.05)) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x,1.02),var(--fa-float-squash-y,.98));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x,1.02),var(--fa-float-squash-y,.98))}}@keyframes fa-swing{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,0,.8,1)}8%{transform:rotate(var(--fa-swing-angle,22deg));animation-timing-function:cubic-bezier(.3,0,.7,1)}18%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*-1*0.85));animation-timing-function:cubic-bezier(.3,0,.7,1)}28%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*0.65));animation-timing-function:cubic-bezier(.35,0,.65,1)}38%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*-1*0.45));animation-timing-function:cubic-bezier(.4,0,.6,1)}48%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*0.25));animation-timing-function:cubic-bezier(.4,0,.6,1)}56%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*-1*0.1));animation-timing-function:cubic-bezier(.4,0,.6,1)}64%{transform:rotate(0deg)}to{transform:rotate(0deg)}}@keyframes fa-jello{0%{transform:scale(1);animation-timing-function:cubic-bezier(.2,0,.8,1)}12%{transform:scale(var(--fa-jello-scale-x,1.15),calc(2 - var(--fa-jello-scale-x, 1.15)));animation-timing-function:cubic-bezier(.3,0,.7,1)}24%{transform:scale(calc(2 - var(--fa-jello-scale-y, 1.12)),var(--fa-jello-scale-y,1.12));animation-timing-function:cubic-bezier(.3,0,.7,1)}36%{transform:scale(calc(.5 + var(--fa-jello-scale-x, 1.15)*0.5),calc(1.5 - var(--fa-jello-scale-x, 1.15)*0.5));animation-timing-function:cubic-bezier(.4,0,.6,1)}48%{transform:scale(calc(1.3 - var(--fa-jello-scale-y, 1.12)*0.3),calc(.7 + var(--fa-jello-scale-y, 1.12)*0.3));animation-timing-function:cubic-bezier(.4,0,.6,1)}58%{transform:scale(1.02,.98);animation-timing-function:cubic-bezier(.4,0,.2,1)}68%{transform:scale(1)}to{transform:scale(1)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{--fa-width:100%;inset:0;position:absolute;text-align:center;width:var(--fa-width);z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0{--fa:"\30 "}.fa-1{--fa:"\31 "}.fa-2{--fa:"\32 "}.fa-3{--fa:"\33 "}.fa-4{--fa:"\34 "}.fa-5{--fa:"\35 "}.fa-6{--fa:"\36 "}.fa-7{--fa:"\37 "}.fa-8{--fa:"\38 "}.fa-9{--fa:"\39 "}.fa-exclamation{--fa:"\!"}.fa-hashtag{--fa:"\#"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\$"}.fa-percent,.fa-percentage{--fa:"\%"}.fa-asterisk{--fa:"\*"}.fa-add,.fa-plus{--fa:"\+"}.fa-less-than{--fa:"\<"}.fa-equals{--fa:"\="}.fa-greater-than{--fa:"\>"}.fa-question{--fa:"\?"}.fa-at{--fa:"\@"}.fa-a{--fa:"A"}.fa-b{--fa:"B"}.fa-c{--fa:"C"}.fa-d{--fa:"D"}.fa-e{--fa:"E"}.fa-f{--fa:"F"}.fa-g{--fa:"G"}.fa-h{--fa:"H"}.fa-i{--fa:"I"}.fa-j{--fa:"J"}.fa-k{--fa:"K"}.fa-l{--fa:"L"}.fa-m{--fa:"M"}.fa-n{--fa:"N"}.fa-o{--fa:"O"}.fa-p{--fa:"P"}.fa-q{--fa:"Q"}.fa-r{--fa:"R"}.fa-s{--fa:"S"}.fa-t{--fa:"T"}.fa-u{--fa:"U"}.fa-v{--fa:"V"}.fa-w{--fa:"W"}.fa-x{--fa:"X"}.fa-y{--fa:"Y"}.fa-z{--fa:"Z"}.fa-faucet{--fa:"\e005"}.fa-faucet-drip{--fa:"\e006"}.fa-house-chimney-window{--fa:"\e00d"}.fa-house-signal{--fa:"\e012"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040"}.fa-trailer{--fa:"\e041"}.fa-bacteria{--fa:"\e059"}.fa-bacterium{--fa:"\e05a"}.fa-box-tissue{--fa:"\e05b"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-hand-sparkles{--fa:"\e05d"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e"}.fa-handshake-alt-slash,.fa-handshake-simple-slash,.fa-handshake-slash{--fa:"\e060"}.fa-head-side-cough{--fa:"\e061"}.fa-head-side-cough-slash{--fa:"\e062"}.fa-head-side-mask{--fa:"\e063"}.fa-head-side-virus{--fa:"\e064"}.fa-house-chimney-user{--fa:"\e065"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066"}.fa-lungs-virus{--fa:"\e067"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068"}.fa-plane-slash{--fa:"\e069"}.fa-pump-medical{--fa:"\e06a"}.fa-pump-soap{--fa:"\e06b"}.fa-shield-virus{--fa:"\e06c"}.fa-sink{--fa:"\e06d"}.fa-soap{--fa:"\e06e"}.fa-stopwatch-20{--fa:"\e06f"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070"}.fa-store-slash{--fa:"\e071"}.fa-toilet-paper-slash{--fa:"\e072"}.fa-users-slash{--fa:"\e073"}.fa-virus{--fa:"\e074"}.fa-virus-slash{--fa:"\e075"}.fa-viruses{--fa:"\e076"}.fa-vest{--fa:"\e085"}.fa-vest-patches{--fa:"\e086"}.fa-arrow-trend-down{--fa:"\e097"}.fa-arrow-trend-up{--fa:"\e098"}.fa-arrow-up-from-bracket{--fa:"\e09a"}.fa-austral-sign{--fa:"\e0a9"}.fa-baht-sign{--fa:"\e0ac"}.fa-bitcoin-sign{--fa:"\e0b4"}.fa-bolt-lightning{--fa:"\e0b7"}.fa-book-bookmark{--fa:"\e0bb"}.fa-camera-rotate{--fa:"\e0d8"}.fa-cedi-sign{--fa:"\e0df"}.fa-chart-column{--fa:"\e0e3"}.fa-chart-gantt{--fa:"\e0e4"}.fa-clapperboard{--fa:"\e131"}.fa-closed-captioning-slash{--fa:"\e135"}.fa-clover{--fa:"\e139"}.fa-code-compare{--fa:"\e13a"}.fa-code-fork{--fa:"\e13b"}.fa-code-pull-request{--fa:"\e13c"}.fa-colon-sign{--fa:"\e140"}.fa-cruzeiro-sign{--fa:"\e152"}.fa-display{--fa:"\e163"}.fa-dong-sign{--fa:"\e169"}.fa-elevator{--fa:"\e16d"}.fa-filter-circle-xmark{--fa:"\e17b"}.fa-florin-sign{--fa:"\e184"}.fa-folder-closed{--fa:"\e185"}.fa-franc-sign{--fa:"\e18f"}.fa-guarani-sign{--fa:"\e19a"}.fa-gun{--fa:"\e19b"}.fa-hands-clapping{--fa:"\e1a8"}.fa-home-user,.fa-house-user{--fa:"\e1b0"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc"}.fa-kip-sign{--fa:"\e1c4"}.fa-lari-sign{--fa:"\e1c8"}.fa-litecoin-sign{--fa:"\e1d3"}.fa-manat-sign{--fa:"\e1d5"}.fa-mask-face{--fa:"\e1d7"}.fa-mill-sign{--fa:"\e1ed"}.fa-money-bills{--fa:"\e1f3"}.fa-naira-sign{--fa:"\e1f6"}.fa-notdef{--fa:"\e1fe"}.fa-panorama{--fa:"\e209"}.fa-peseta-sign{--fa:"\e221"}.fa-peso-sign{--fa:"\e222"}.fa-plane-up{--fa:"\e22d"}.fa-rupiah-sign{--fa:"\e23d"}.fa-stairs{--fa:"\e289"}.fa-timeline{--fa:"\e29c"}.fa-truck-front{--fa:"\e2b7"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb"}.fa-vault{--fa:"\e2c5"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce"}.fa-bangladeshi-taka-sign{--fa:"\e2e6"}.fa-bowl-rice{--fa:"\e2eb"}.fa-person-pregnant{--fa:"\e31e"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af"}.fa-house-crack{--fa:"\e3b1"}.fa-house-medical{--fa:"\e3b2"}.fa-cent-sign{--fa:"\e3f5"}.fa-plus-minus{--fa:"\e43c"}.fa-sailboat{--fa:"\e445"}.fa-section{--fa:"\e447"}.fa-shrimp{--fa:"\e448"}.fa-brazilian-real-sign{--fa:"\e46c"}.fa-chart-simple{--fa:"\e473"}.fa-diagram-next{--fa:"\e476"}.fa-diagram-predecessor{--fa:"\e477"}.fa-diagram-successor{--fa:"\e47a"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b"}.fa-bug-slash{--fa:"\e490"}.fa-file-circle-plus{--fa:"\e494"}.fa-shop-lock{--fa:"\e4a5"}.fa-virus-covid{--fa:"\e4a8"}.fa-virus-covid-slash{--fa:"\e4a9"}.fa-anchor-circle-check{--fa:"\e4aa"}.fa-anchor-circle-exclamation{--fa:"\e4ab"}.fa-anchor-circle-xmark{--fa:"\e4ac"}.fa-anchor-lock{--fa:"\e4ad"}.fa-arrow-down-up-across-line{--fa:"\e4af"}.fa-arrow-down-up-lock{--fa:"\e4b0"}.fa-arrow-right-to-city{--fa:"\e4b3"}.fa-arrow-up-from-ground-water{--fa:"\e4b5"}.fa-arrow-up-from-water-pump{--fa:"\e4b6"}.fa-arrow-up-right-dots{--fa:"\e4b7"}.fa-arrows-down-to-line{--fa:"\e4b8"}.fa-arrows-down-to-people{--fa:"\e4b9"}.fa-arrows-left-right-to-line{--fa:"\e4ba"}.fa-arrows-spin{--fa:"\e4bb"}.fa-arrows-split-up-and-left{--fa:"\e4bc"}.fa-arrows-to-circle{--fa:"\e4bd"}.fa-arrows-to-dot{--fa:"\e4be"}.fa-arrows-to-eye{--fa:"\e4bf"}.fa-arrows-turn-right{--fa:"\e4c0"}.fa-arrows-turn-to-dots{--fa:"\e4c1"}.fa-arrows-up-to-line{--fa:"\e4c2"}.fa-bore-hole{--fa:"\e4c3"}.fa-bottle-droplet{--fa:"\e4c4"}.fa-bottle-water{--fa:"\e4c5"}.fa-bowl-food{--fa:"\e4c6"}.fa-boxes-packing{--fa:"\e4c7"}.fa-bridge{--fa:"\e4c8"}.fa-bridge-circle-check{--fa:"\e4c9"}.fa-bridge-circle-exclamation{--fa:"\e4ca"}.fa-bridge-circle-xmark{--fa:"\e4cb"}.fa-bridge-lock{--fa:"\e4cc"}.fa-bridge-water{--fa:"\e4ce"}.fa-bucket{--fa:"\e4cf"}.fa-bugs{--fa:"\e4d0"}.fa-building-circle-arrow-right{--fa:"\e4d1"}.fa-building-circle-check{--fa:"\e4d2"}.fa-building-circle-exclamation{--fa:"\e4d3"}.fa-building-circle-xmark{--fa:"\e4d4"}.fa-building-flag{--fa:"\e4d5"}.fa-building-lock{--fa:"\e4d6"}.fa-building-ngo{--fa:"\e4d7"}.fa-building-shield{--fa:"\e4d8"}.fa-building-un{--fa:"\e4d9"}.fa-building-user{--fa:"\e4da"}.fa-building-wheat{--fa:"\e4db"}.fa-burst{--fa:"\e4dc"}.fa-car-on{--fa:"\e4dd"}.fa-car-tunnel{--fa:"\e4de"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0"}.fa-children{--fa:"\e4e1"}.fa-circle-nodes{--fa:"\e4e2"}.fa-clipboard-question{--fa:"\e4e3"}.fa-cloud-showers-water{--fa:"\e4e4"}.fa-computer{--fa:"\e4e5"}.fa-cubes-stacked{--fa:"\e4e6"}.fa-envelope-circle-check{--fa:"\e4e8"}.fa-explosion{--fa:"\e4e9"}.fa-ferry{--fa:"\e4ea"}.fa-file-circle-exclamation{--fa:"\e4eb"}.fa-file-circle-minus{--fa:"\e4ed"}.fa-file-circle-question{--fa:"\e4ef"}.fa-file-shield{--fa:"\e4f0"}.fa-fire-burner{--fa:"\e4f1"}.fa-fish-fins{--fa:"\e4f2"}.fa-flask-vial{--fa:"\e4f3"}.fa-glass-water{--fa:"\e4f4"}.fa-glass-water-droplet{--fa:"\e4f5"}.fa-group-arrows-rotate{--fa:"\e4f6"}.fa-hand-holding-hand{--fa:"\e4f7"}.fa-handcuffs{--fa:"\e4f8"}.fa-hands-bound{--fa:"\e4f9"}.fa-hands-holding-child{--fa:"\e4fa"}.fa-hands-holding-circle{--fa:"\e4fb"}.fa-heart-circle-bolt{--fa:"\e4fc"}.fa-heart-circle-check{--fa:"\e4fd"}.fa-heart-circle-exclamation{--fa:"\e4fe"}.fa-heart-circle-minus{--fa:"\e4ff"}.fa-heart-circle-plus{--fa:"\e500"}.fa-heart-circle-xmark{--fa:"\e501"}.fa-helicopter-symbol{--fa:"\e502"}.fa-helmet-un{--fa:"\e503"}.fa-hill-avalanche{--fa:"\e507"}.fa-hill-rockslide{--fa:"\e508"}.fa-house-circle-check{--fa:"\e509"}.fa-house-circle-exclamation{--fa:"\e50a"}.fa-house-circle-xmark{--fa:"\e50b"}.fa-house-fire{--fa:"\e50c"}.fa-house-flag{--fa:"\e50d"}.fa-house-flood-water{--fa:"\e50e"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f"}.fa-house-lock{--fa:"\e510"}.fa-house-medical-circle-check{--fa:"\e511"}.fa-house-medical-circle-exclamation{--fa:"\e512"}.fa-house-medical-circle-xmark{--fa:"\e513"}.fa-house-medical-flag{--fa:"\e514"}.fa-house-tsunami{--fa:"\e515"}.fa-jar{--fa:"\e516"}.fa-jar-wheat{--fa:"\e517"}.fa-jet-fighter-up{--fa:"\e518"}.fa-jug-detergent{--fa:"\e519"}.fa-kitchen-set{--fa:"\e51a"}.fa-land-mine-on{--fa:"\e51b"}.fa-landmark-flag{--fa:"\e51c"}.fa-laptop-file{--fa:"\e51d"}.fa-lines-leaning{--fa:"\e51e"}.fa-location-pin-lock{--fa:"\e51f"}.fa-locust{--fa:"\e520"}.fa-magnifying-glass-arrow-right{--fa:"\e521"}.fa-magnifying-glass-chart{--fa:"\e522"}.fa-mars-and-venus-burst{--fa:"\e523"}.fa-mask-ventilator{--fa:"\e524"}.fa-mattress-pillow{--fa:"\e525"}.fa-mobile-retro{--fa:"\e527"}.fa-money-bill-transfer{--fa:"\e528"}.fa-money-bill-trend-up{--fa:"\e529"}.fa-money-bill-wheat{--fa:"\e52a"}.fa-mosquito{--fa:"\e52b"}.fa-mosquito-net{--fa:"\e52c"}.fa-mound{--fa:"\e52d"}.fa-mountain-city{--fa:"\e52e"}.fa-mountain-sun{--fa:"\e52f"}.fa-oil-well{--fa:"\e532"}.fa-people-group{--fa:"\e533"}.fa-people-line{--fa:"\e534"}.fa-people-pulling{--fa:"\e535"}.fa-people-robbery{--fa:"\e536"}.fa-people-roof{--fa:"\e537"}.fa-person-arrow-down-to-line{--fa:"\e538"}.fa-person-arrow-up-from-line{--fa:"\e539"}.fa-person-breastfeeding{--fa:"\e53a"}.fa-person-burst{--fa:"\e53b"}.fa-person-cane{--fa:"\e53c"}.fa-person-chalkboard{--fa:"\e53d"}.fa-person-circle-check{--fa:"\e53e"}.fa-person-circle-exclamation{--fa:"\e53f"}.fa-person-circle-minus{--fa:"\e540"}.fa-person-circle-plus{--fa:"\e541"}.fa-person-circle-question{--fa:"\e542"}.fa-person-circle-xmark{--fa:"\e543"}.fa-person-dress-burst{--fa:"\e544"}.fa-person-drowning{--fa:"\e545"}.fa-person-falling{--fa:"\e546"}.fa-person-falling-burst{--fa:"\e547"}.fa-person-half-dress{--fa:"\e548"}.fa-person-harassing{--fa:"\e549"}.fa-person-military-pointing{--fa:"\e54a"}.fa-person-military-rifle{--fa:"\e54b"}.fa-person-military-to-person{--fa:"\e54c"}.fa-person-rays{--fa:"\e54d"}.fa-person-rifle{--fa:"\e54e"}.fa-person-shelter{--fa:"\e54f"}.fa-person-walking-arrow-loop-left{--fa:"\e551"}.fa-person-walking-arrow-right{--fa:"\e552"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553"}.fa-person-walking-luggage{--fa:"\e554"}.fa-plane-circle-check{--fa:"\e555"}.fa-plane-circle-exclamation{--fa:"\e556"}.fa-plane-circle-xmark{--fa:"\e557"}.fa-plane-lock{--fa:"\e558"}.fa-plate-wheat{--fa:"\e55a"}.fa-plug-circle-bolt{--fa:"\e55b"}.fa-plug-circle-check{--fa:"\e55c"}.fa-plug-circle-exclamation{--fa:"\e55d"}.fa-plug-circle-minus{--fa:"\e55e"}.fa-plug-circle-plus{--fa:"\e55f"}.fa-plug-circle-xmark{--fa:"\e560"}.fa-ranking-star{--fa:"\e561"}.fa-road-barrier{--fa:"\e562"}.fa-road-bridge{--fa:"\e563"}.fa-road-circle-check{--fa:"\e564"}.fa-road-circle-exclamation{--fa:"\e565"}.fa-road-circle-xmark{--fa:"\e566"}.fa-road-lock{--fa:"\e567"}.fa-road-spikes{--fa:"\e568"}.fa-rug{--fa:"\e569"}.fa-sack-xmark{--fa:"\e56a"}.fa-school-circle-check{--fa:"\e56b"}.fa-school-circle-exclamation{--fa:"\e56c"}.fa-school-circle-xmark{--fa:"\e56d"}.fa-school-flag{--fa:"\e56e"}.fa-school-lock{--fa:"\e56f"}.fa-sheet-plastic{--fa:"\e571"}.fa-shield-cat{--fa:"\e572"}.fa-shield-dog{--fa:"\e573"}.fa-shield-heart{--fa:"\e574"}.fa-square-nfi{--fa:"\e576"}.fa-square-person-confined{--fa:"\e577"}.fa-square-virus{--fa:"\e578"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579"}.fa-sun-plant-wilt{--fa:"\e57a"}.fa-tarp{--fa:"\e57b"}.fa-tarp-droplet{--fa:"\e57c"}.fa-tent{--fa:"\e57d"}.fa-tent-arrow-down-to-line{--fa:"\e57e"}.fa-tent-arrow-left-right{--fa:"\e57f"}.fa-tent-arrow-turn-left{--fa:"\e580"}.fa-tent-arrows-down{--fa:"\e581"}.fa-tents{--fa:"\e582"}.fa-toilet-portable{--fa:"\e583"}.fa-toilets-portable{--fa:"\e584"}.fa-tower-cell{--fa:"\e585"}.fa-tower-observation{--fa:"\e586"}.fa-tree-city{--fa:"\e587"}.fa-trowel{--fa:"\e589"}.fa-trowel-bricks{--fa:"\e58a"}.fa-truck-arrow-right{--fa:"\e58b"}.fa-truck-droplet{--fa:"\e58c"}.fa-truck-field{--fa:"\e58d"}.fa-truck-field-un{--fa:"\e58e"}.fa-truck-plane{--fa:"\e58f"}.fa-users-between-lines{--fa:"\e591"}.fa-users-line{--fa:"\e592"}.fa-users-rays{--fa:"\e593"}.fa-users-rectangle{--fa:"\e594"}.fa-users-viewfinder{--fa:"\e595"}.fa-vial-circle-check{--fa:"\e596"}.fa-vial-virus{--fa:"\e597"}.fa-wheat-awn-circle-exclamation{--fa:"\e598"}.fa-worm{--fa:"\e599"}.fa-xmarks-lines{--fa:"\e59a"}.fa-child-dress{--fa:"\e59c"}.fa-child-reaching{--fa:"\e59d"}.fa-file-circle-check{--fa:"\e5a0"}.fa-file-circle-xmark{--fa:"\e5a1"}.fa-person-through-window{--fa:"\e5a9"}.fa-plant-wilt{--fa:"\e5aa"}.fa-stapler{--fa:"\e5af"}.fa-train-tram{--fa:"\e5b4"}.fa-table-cells-column-lock{--fa:"\e678"}.fa-table-cells-row-lock{--fa:"\e67a"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f"}.fa-table-cells-row-unlock{--fa:"\e691"}.fa-chart-diagram{--fa:"\e695"}.fa-comment-nodes{--fa:"\e696"}.fa-file-fragment{--fa:"\e697"}.fa-file-half-dashed{--fa:"\e698"}.fa-hexagon-nodes{--fa:"\e699"}.fa-hexagon-nodes-bolt{--fa:"\e69a"}.fa-square-binary{--fa:"\e69b"}.fa-pentagon{--fa:"\e790"}.fa-non-binary{--fa:"\e807"}.fa-spiral{--fa:"\e80a"}.fa-picture-in-picture{--fa:"\e80b"}.fa-mobile-vibrate{--fa:"\e816"}.fa-single-quote-left{--fa:"\e81b"}.fa-single-quote-right{--fa:"\e81c"}.fa-bus-side{--fa:"\e81d"}.fa-heptagon,.fa-septagon{--fa:"\e820"}.fa-aquarius{--fa:"\e845"}.fa-aries{--fa:"\e846"}.fa-cancer{--fa:"\e847"}.fa-capricorn{--fa:"\e848"}.fa-gemini{--fa:"\e849"}.fa-leo{--fa:"\e84a"}.fa-libra{--fa:"\e84b"}.fa-pisces{--fa:"\e84c"}.fa-sagittarius{--fa:"\e84d"}.fa-scorpio{--fa:"\e84e"}.fa-taurus{--fa:"\e84f"}.fa-virgo{--fa:"\e850"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000"}.fa-music{--fa:"\f001"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-heart{--fa:"\f004"}.fa-star{--fa:"\f005"}.fa-user,.fa-user-alt,.fa-user-large{--fa:"\f007"}.fa-film,.fa-film-alt,.fa-film-simple{--fa:"\f008"}.fa-table-cells-large,.fa-th-large{--fa:"\f009"}.fa-table-cells,.fa-th{--fa:"\f00a"}.fa-table-list,.fa-th-list{--fa:"\f00b"}.fa-check{--fa:"\f00c"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010"}.fa-power-off{--fa:"\f011"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012"}.fa-cog,.fa-gear{--fa:"\f013"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-road{--fa:"\f018"}.fa-download{--fa:"\f019"}.fa-inbox{--fa:"\f01c"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022"}.fa-lock{--fa:"\f023"}.fa-flag{--fa:"\f024"}.fa-headphones,.fa-headphones-alt,.fa-headphones-simple{--fa:"\f025"}.fa-volume-off{--fa:"\f026"}.fa-volume-down,.fa-volume-low{--fa:"\f027"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-qrcode{--fa:"\f029"}.fa-barcode{--fa:"\f02a"}.fa-tag{--fa:"\f02b"}.fa-tags{--fa:"\f02c"}.fa-book{--fa:"\f02d"}.fa-bookmark{--fa:"\f02e"}.fa-print{--fa:"\f02f"}.fa-camera,.fa-camera-alt{--fa:"\f030"}.fa-font{--fa:"\f031"}.fa-bold{--fa:"\f032"}.fa-italic{--fa:"\f033"}.fa-text-height{--fa:"\f034"}.fa-text-width{--fa:"\f035"}.fa-align-left{--fa:"\f036"}.fa-align-center{--fa:"\f037"}.fa-align-right{--fa:"\f038"}.fa-align-justify{--fa:"\f039"}.fa-list,.fa-list-squares{--fa:"\f03a"}.fa-dedent,.fa-outdent{--fa:"\f03b"}.fa-indent{--fa:"\f03c"}.fa-video,.fa-video-camera{--fa:"\f03d"}.fa-image{--fa:"\f03e"}.fa-location-pin,.fa-map-marker{--fa:"\f041"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042"}.fa-droplet,.fa-tint{--fa:"\f043"}.fa-edit,.fa-pen-to-square{--fa:"\f044"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047"}.fa-backward-step,.fa-step-backward{--fa:"\f048"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049"}.fa-backward{--fa:"\f04a"}.fa-play{--fa:"\f04b"}.fa-pause{--fa:"\f04c"}.fa-stop{--fa:"\f04d"}.fa-forward{--fa:"\f04e"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050"}.fa-forward-step,.fa-step-forward{--fa:"\f051"}.fa-eject{--fa:"\f052"}.fa-chevron-left{--fa:"\f053"}.fa-chevron-right{--fa:"\f054"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-check-circle,.fa-circle-check{--fa:"\f058"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-crosshairs{--fa:"\f05b"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-arrow-left{--fa:"\f060"}.fa-arrow-right{--fa:"\f061"}.fa-arrow-up{--fa:"\f062"}.fa-arrow-down{--fa:"\f063"}.fa-mail-forward,.fa-share{--fa:"\f064"}.fa-expand{--fa:"\f065"}.fa-compress{--fa:"\f066"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a"}.fa-gift{--fa:"\f06b"}.fa-leaf{--fa:"\f06c"}.fa-fire{--fa:"\f06d"}.fa-eye{--fa:"\f06e"}.fa-eye-slash{--fa:"\f070"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-plane{--fa:"\f072"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073"}.fa-random,.fa-shuffle{--fa:"\f074"}.fa-comment{--fa:"\f075"}.fa-magnet{--fa:"\f076"}.fa-chevron-up{--fa:"\f077"}.fa-chevron-down{--fa:"\f078"}.fa-retweet{--fa:"\f079"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-folder-open{--fa:"\f07c"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080"}.fa-camera-retro{--fa:"\f083"}.fa-key{--fa:"\f084"}.fa-cogs,.fa-gears{--fa:"\f085"}.fa-comments{--fa:"\f086"}.fa-star-half{--fa:"\f089"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090"}.fa-trophy{--fa:"\f091"}.fa-upload{--fa:"\f093"}.fa-lemon{--fa:"\f094"}.fa-phone{--fa:"\f095"}.fa-phone-square,.fa-square-phone{--fa:"\f098"}.fa-unlock{--fa:"\f09c"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-feed,.fa-rss{--fa:"\f09e"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0"}.fa-bullhorn{--fa:"\f0a1"}.fa-certificate{--fa:"\f0a3"}.fa-hand-point-right{--fa:"\f0a4"}.fa-hand-point-left{--fa:"\f0a5"}.fa-hand-point-up{--fa:"\f0a6"}.fa-hand-point-down{--fa:"\f0a7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab"}.fa-globe{--fa:"\f0ac"}.fa-wrench{--fa:"\f0ad"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-filter{--fa:"\f0b0"}.fa-briefcase{--fa:"\f0b1"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2"}.fa-users{--fa:"\f0c0"}.fa-chain,.fa-link{--fa:"\f0c1"}.fa-cloud{--fa:"\f0c2"}.fa-flask{--fa:"\f0c3"}.fa-cut,.fa-scissors{--fa:"\f0c4"}.fa-copy{--fa:"\f0c5"}.fa-paperclip{--fa:"\f0c6"}.fa-floppy-disk,.fa-save{--fa:"\f0c7"}.fa-square{--fa:"\f0c8"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb"}.fa-strikethrough{--fa:"\f0cc"}.fa-underline{--fa:"\f0cd"}.fa-table{--fa:"\f0ce"}.fa-magic,.fa-wand-magic{--fa:"\f0d0"}.fa-truck{--fa:"\f0d1"}.fa-money-bill{--fa:"\f0d6"}.fa-caret-down{--fa:"\f0d7"}.fa-caret-up{--fa:"\f0d8"}.fa-caret-left{--fa:"\f0d9"}.fa-caret-right{--fa:"\f0da"}.fa-columns,.fa-table-columns{--fa:"\f0db"}.fa-sort,.fa-unsorted{--fa:"\f0dc"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de"}.fa-envelope{--fa:"\f0e0"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2"}.fa-gavel,.fa-legal{--fa:"\f0e3"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-sitemap{--fa:"\f0e8"}.fa-umbrella{--fa:"\f0e9"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea"}.fa-lightbulb{--fa:"\f0eb"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-stethoscope{--fa:"\f0f1"}.fa-suitcase{--fa:"\f0f2"}.fa-bell{--fa:"\f0f3"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc"}.fa-h-square,.fa-square-h{--fa:"\f0fd"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103"}.fa-angle-left{--fa:"\f104"}.fa-angle-right{--fa:"\f105"}.fa-angle-up{--fa:"\f106"}.fa-angle-down{--fa:"\f107"}.fa-laptop{--fa:"\f109"}.fa-tablet-button{--fa:"\f10a"}.fa-mobile-button{--fa:"\f10b"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e"}.fa-spinner{--fa:"\f110"}.fa-circle{--fa:"\f111"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-face-frown,.fa-frown{--fa:"\f119"}.fa-face-meh,.fa-meh{--fa:"\f11a"}.fa-gamepad{--fa:"\f11b"}.fa-keyboard{--fa:"\f11c"}.fa-flag-checkered{--fa:"\f11e"}.fa-terminal{--fa:"\f120"}.fa-code{--fa:"\f121"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122"}.fa-location-arrow{--fa:"\f124"}.fa-crop{--fa:"\f125"}.fa-code-branch{--fa:"\f126"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127"}.fa-info{--fa:"\f129"}.fa-superscript{--fa:"\f12b"}.fa-subscript{--fa:"\f12c"}.fa-eraser{--fa:"\f12d"}.fa-puzzle-piece{--fa:"\f12e"}.fa-microphone{--fa:"\f130"}.fa-microphone-slash{--fa:"\f131"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-calendar{--fa:"\f133"}.fa-fire-extinguisher{--fa:"\f134"}.fa-rocket{--fa:"\f135"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a"}.fa-anchor{--fa:"\f13d"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e"}.fa-bullseye{--fa:"\f140"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142"}.fa-rss-square,.fa-square-rss{--fa:"\f143"}.fa-circle-play,.fa-play-circle{--fa:"\f144"}.fa-ticket{--fa:"\f145"}.fa-minus-square,.fa-square-minus{--fa:"\f146"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149"}.fa-check-square,.fa-square-check{--fa:"\f14a"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-compass{--fa:"\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154"}.fa-rupee,.fa-rupee-sign{--fa:"\f156"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159"}.fa-file{--fa:"\f15b"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163"}.fa-thumbs-up{--fa:"\f164"}.fa-thumbs-down{--fa:"\f165"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178"}.fa-female,.fa-person-dress{--fa:"\f182"}.fa-male,.fa-person{--fa:"\f183"}.fa-sun{--fa:"\f185"}.fa-moon{--fa:"\f186"}.fa-archive,.fa-box-archive{--fa:"\f187"}.fa-bug{--fa:"\f188"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192"}.fa-wheelchair{--fa:"\f193"}.fa-lira-sign{--fa:"\f195"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-language{--fa:"\f1ab"}.fa-fax{--fa:"\f1ac"}.fa-building{--fa:"\f1ad"}.fa-child{--fa:"\f1ae"}.fa-paw{--fa:"\f1b0"}.fa-cube{--fa:"\f1b2"}.fa-cubes{--fa:"\f1b3"}.fa-recycle{--fa:"\f1b8"}.fa-automobile,.fa-car{--fa:"\f1b9"}.fa-cab,.fa-taxi{--fa:"\f1ba"}.fa-tree{--fa:"\f1bb"}.fa-database{--fa:"\f1c0"}.fa-file-pdf{--fa:"\f1c1"}.fa-file-word{--fa:"\f1c2"}.fa-file-excel{--fa:"\f1c3"}.fa-file-powerpoint{--fa:"\f1c4"}.fa-file-image{--fa:"\f1c5"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6"}.fa-file-audio{--fa:"\f1c7"}.fa-file-video{--fa:"\f1c8"}.fa-file-code{--fa:"\f1c9"}.fa-life-ring{--fa:"\f1cd"}.fa-circle-notch{--fa:"\f1ce"}.fa-paper-plane{--fa:"\f1d8"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-header,.fa-heading{--fa:"\f1dc"}.fa-paragraph{--fa:"\f1dd"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1"}.fa-bomb{--fa:"\f1e2"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3"}.fa-teletype,.fa-tty{--fa:"\f1e4"}.fa-binoculars{--fa:"\f1e5"}.fa-plug{--fa:"\f1e6"}.fa-newspaper{--fa:"\f1ea"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb"}.fa-calculator{--fa:"\f1ec"}.fa-bell-slash{--fa:"\f1f6"}.fa-trash{--fa:"\f1f8"}.fa-copyright{--fa:"\f1f9"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-toggle-off{--fa:"\f204"}.fa-toggle-on{--fa:"\f205"}.fa-bicycle{--fa:"\f206"}.fa-bus{--fa:"\f207"}.fa-closed-captioning{--fa:"\f20a"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b"}.fa-cart-plus{--fa:"\f217"}.fa-cart-arrow-down{--fa:"\f218"}.fa-diamond{--fa:"\f219"}.fa-ship{--fa:"\f21a"}.fa-user-secret{--fa:"\f21b"}.fa-motorcycle{--fa:"\f21c"}.fa-street-view{--fa:"\f21d"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-venus{--fa:"\f221"}.fa-mars{--fa:"\f222"}.fa-mercury{--fa:"\f223"}.fa-mars-and-venus{--fa:"\f224"}.fa-transgender,.fa-transgender-alt{--fa:"\f225"}.fa-venus-double{--fa:"\f226"}.fa-mars-double{--fa:"\f227"}.fa-venus-mars{--fa:"\f228"}.fa-mars-stroke{--fa:"\f229"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b"}.fa-neuter{--fa:"\f22c"}.fa-genderless{--fa:"\f22d"}.fa-server{--fa:"\f233"}.fa-user-plus{--fa:"\f234"}.fa-user-times,.fa-user-xmark{--fa:"\f235"}.fa-bed{--fa:"\f236"}.fa-train{--fa:"\f238"}.fa-subway,.fa-train-subway{--fa:"\f239"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241"}.fa-battery-3,.fa-battery-half{--fa:"\f242"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243"}.fa-battery-0,.fa-battery-empty{--fa:"\f244"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245"}.fa-i-cursor{--fa:"\f246"}.fa-object-group{--fa:"\f247"}.fa-object-ungroup{--fa:"\f248"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249"}.fa-clone{--fa:"\f24d"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255"}.fa-hand,.fa-hand-paper{--fa:"\f256"}.fa-hand-scissors{--fa:"\f257"}.fa-hand-lizard{--fa:"\f258"}.fa-hand-spock{--fa:"\f259"}.fa-hand-pointer{--fa:"\f25a"}.fa-hand-peace{--fa:"\f25b"}.fa-trademark{--fa:"\f25c"}.fa-registered{--fa:"\f25d"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c"}.fa-calendar-plus{--fa:"\f271"}.fa-calendar-minus{--fa:"\f272"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273"}.fa-calendar-check{--fa:"\f274"}.fa-industry{--fa:"\f275"}.fa-map-pin{--fa:"\f276"}.fa-map-signs,.fa-signs-post{--fa:"\f277"}.fa-map{--fa:"\f279"}.fa-comment-alt,.fa-message{--fa:"\f27a"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291"}.fa-universal-access{--fa:"\f29a"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d"}.fa-audio-description{--fa:"\f29e"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0"}.fa-braille{--fa:"\f2a1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8"}.fa-handshake,.fa-handshake-alt,.fa-handshake-simple{--fa:"\f2b5"}.fa-envelope-open{--fa:"\f2b6"}.fa-address-book,.fa-contact-book{--fa:"\f2b9"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd"}.fa-id-badge{--fa:"\f2c1"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb"}.fa-shower{--fa:"\f2cc"}.fa-bath,.fa-bathtub{--fa:"\f2cd"}.fa-podcast{--fa:"\f2ce"}.fa-window-maximize{--fa:"\f2d0"}.fa-window-minimize{--fa:"\f2d1"}.fa-window-restore{--fa:"\f2d2"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3"}.fa-microchip{--fa:"\f2db"}.fa-snowflake{--fa:"\f2dc"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5"}.fa-cutlery,.fa-utensils{--fa:"\f2e7"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-stopwatch{--fa:"\f2f2"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9"}.fa-poo{--fa:"\f2fe"}.fa-images{--fa:"\f302"}.fa-pencil,.fa-pencil-alt{--fa:"\f303"}.fa-pen{--fa:"\f304"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305"}.fa-octagon{--fa:"\f306"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c"}.fa-hexagon{--fa:"\f312"}.fa-file-edit,.fa-file-pen{--fa:"\f31c"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e"}.fa-clipboard{--fa:"\f328"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338"}.fa-alarm-clock{--fa:"\f34e"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360"}.fa-exchange-alt,.fa-right-left{--fa:"\f362"}.fa-repeat{--fa:"\f363"}.fa-code-commit{--fa:"\f386"}.fa-code-merge{--fa:"\f387"}.fa-desktop,.fa-desktop-alt{--fa:"\f390"}.fa-gem{--fa:"\f3a5"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf"}.fa-lock-open{--fa:"\f3c1"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1"}.fa-phone-slash{--fa:"\f3dd"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0"}.fa-mail-reply,.fa-reply{--fa:"\f3e5"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424"}.fa-baseball-bat-ball{--fa:"\f432"}.fa-baseball,.fa-baseball-ball{--fa:"\f433"}.fa-basketball,.fa-basketball-ball{--fa:"\f434"}.fa-bowling-ball{--fa:"\f436"}.fa-chess{--fa:"\f439"}.fa-chess-bishop{--fa:"\f43a"}.fa-chess-board{--fa:"\f43c"}.fa-chess-king{--fa:"\f43f"}.fa-chess-knight{--fa:"\f441"}.fa-chess-pawn{--fa:"\f443"}.fa-chess-queen{--fa:"\f445"}.fa-chess-rook{--fa:"\f447"}.fa-dumbbell{--fa:"\f44b"}.fa-football,.fa-football-ball{--fa:"\f44e"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450"}.fa-hockey-puck{--fa:"\f453"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458"}.fa-square-full{--fa:"\f45c"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f"}.fa-allergies,.fa-hand-dots{--fa:"\f461"}.fa-band-aid,.fa-bandage{--fa:"\f462"}.fa-box{--fa:"\f466"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468"}.fa-briefcase-medical{--fa:"\f469"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a"}.fa-capsules{--fa:"\f46b"}.fa-clipboard-check{--fa:"\f46c"}.fa-clipboard-list{--fa:"\f46d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470"}.fa-dna{--fa:"\f471"}.fa-dolly,.fa-dolly-box{--fa:"\f472"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474"}.fa-file-medical{--fa:"\f477"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478"}.fa-first-aid,.fa-kit-medical{--fa:"\f479"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f"}.fa-notes-medical{--fa:"\f481"}.fa-pallet{--fa:"\f482"}.fa-pills{--fa:"\f484"}.fa-prescription-bottle{--fa:"\f485"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486"}.fa-bed-pulse,.fa-procedures{--fa:"\f487"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b"}.fa-smoking{--fa:"\f48d"}.fa-syringe{--fa:"\f48e"}.fa-tablets{--fa:"\f490"}.fa-thermometer{--fa:"\f491"}.fa-vial{--fa:"\f492"}.fa-vials{--fa:"\f493"}.fa-warehouse{--fa:"\f494"}.fa-weight,.fa-weight-scale{--fa:"\f496"}.fa-x-ray{--fa:"\f497"}.fa-box-open{--fa:"\f49e"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad"}.fa-comment-slash{--fa:"\f4b3"}.fa-couch{--fa:"\f4b8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9"}.fa-dove{--fa:"\f4ba"}.fa-hand-holding{--fa:"\f4bd"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1"}.fa-hands-holding{--fa:"\f4c2"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4"}.fa-parachute-box{--fa:"\f4cd"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce"}.fa-piggy-bank{--fa:"\f4d3"}.fa-ribbon{--fa:"\f4d6"}.fa-route{--fa:"\f4d7"}.fa-seedling,.fa-sprout{--fa:"\f4d8"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da"}.fa-tape{--fa:"\f4db"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de"}.fa-truck-moving{--fa:"\f4df"}.fa-video-slash{--fa:"\f4e2"}.fa-wine-glass{--fa:"\f4e3"}.fa-user-astronaut{--fa:"\f4fb"}.fa-user-check{--fa:"\f4fc"}.fa-user-clock{--fa:"\f4fd"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff"}.fa-user-friends,.fa-user-group{--fa:"\f500"}.fa-user-graduate{--fa:"\f501"}.fa-user-lock{--fa:"\f502"}.fa-user-minus{--fa:"\f503"}.fa-user-ninja{--fa:"\f504"}.fa-user-shield{--fa:"\f505"}.fa-user-alt-slash,.fa-user-large-slash,.fa-user-slash{--fa:"\f506"}.fa-user-tag{--fa:"\f507"}.fa-user-tie{--fa:"\f508"}.fa-users-cog,.fa-users-gear{--fa:"\f509"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516"}.fa-blender{--fa:"\f517"}.fa-book-open{--fa:"\f518"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519"}.fa-broom{--fa:"\f51a"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c"}.fa-church{--fa:"\f51d"}.fa-coins{--fa:"\f51e"}.fa-compact-disc{--fa:"\f51f"}.fa-crow{--fa:"\f520"}.fa-crown{--fa:"\f521"}.fa-dice{--fa:"\f522"}.fa-dice-five{--fa:"\f523"}.fa-dice-four{--fa:"\f524"}.fa-dice-one{--fa:"\f525"}.fa-dice-six{--fa:"\f526"}.fa-dice-three{--fa:"\f527"}.fa-dice-two{--fa:"\f528"}.fa-divide{--fa:"\f529"}.fa-door-closed{--fa:"\f52a"}.fa-door-open{--fa:"\f52b"}.fa-feather{--fa:"\f52d"}.fa-frog{--fa:"\f52e"}.fa-gas-pump{--fa:"\f52f"}.fa-glasses{--fa:"\f530"}.fa-greater-than-equal{--fa:"\f532"}.fa-helicopter{--fa:"\f533"}.fa-infinity{--fa:"\f534"}.fa-kiwi-bird{--fa:"\f535"}.fa-less-than-equal{--fa:"\f537"}.fa-memory{--fa:"\f538"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539"}.fa-money-bill-wave{--fa:"\f53a"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b"}.fa-money-check{--fa:"\f53c"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d"}.fa-not-equal{--fa:"\f53e"}.fa-palette{--fa:"\f53f"}.fa-parking,.fa-square-parking{--fa:"\f540"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542"}.fa-receipt{--fa:"\f543"}.fa-robot{--fa:"\f544"}.fa-ruler{--fa:"\f545"}.fa-ruler-combined{--fa:"\f546"}.fa-ruler-horizontal{--fa:"\f547"}.fa-ruler-vertical{--fa:"\f548"}.fa-school{--fa:"\f549"}.fa-screwdriver{--fa:"\f54a"}.fa-shoe-prints{--fa:"\f54b"}.fa-skull{--fa:"\f54c"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d"}.fa-store{--fa:"\f54e"}.fa-shop,.fa-store-alt{--fa:"\f54f"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-stroopwafel{--fa:"\f551"}.fa-toolbox{--fa:"\f552"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-wallet{--fa:"\f555"}.fa-angry,.fa-face-angry{--fa:"\f556"}.fa-archway{--fa:"\f557"}.fa-atlas,.fa-book-atlas{--fa:"\f558"}.fa-award{--fa:"\f559"}.fa-backspace,.fa-delete-left{--fa:"\f55a"}.fa-bezier-curve{--fa:"\f55b"}.fa-bong{--fa:"\f55c"}.fa-brush{--fa:"\f55d"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e"}.fa-cannabis{--fa:"\f55f"}.fa-check-double{--fa:"\f560"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562"}.fa-cookie{--fa:"\f563"}.fa-cookie-bite{--fa:"\f564"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568"}.fa-drum{--fa:"\f569"}.fa-drum-steelpan{--fa:"\f56a"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b"}.fa-file-contract{--fa:"\f56c"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f"}.fa-file-invoice{--fa:"\f570"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-file-prescription{--fa:"\f572"}.fa-file-signature{--fa:"\f573"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574"}.fa-fill{--fa:"\f575"}.fa-fill-drip{--fa:"\f576"}.fa-fingerprint{--fa:"\f577"}.fa-fish{--fa:"\f578"}.fa-face-flushed,.fa-flushed{--fa:"\f579"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e"}.fa-face-grimace,.fa-grimace{--fa:"\f57f"}.fa-face-grin,.fa-grin{--fa:"\f580"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c"}.fa-grid-horizontal,.fa-grip,.fa-grip-horizontal{--fa:"\f58d"}.fa-grid-vertical,.fa-grip-vertical{--fa:"\f58e"}.fa-headset{--fa:"\f590"}.fa-highlighter{--fa:"\f591"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593"}.fa-hotel{--fa:"\f594"}.fa-joint{--fa:"\f595"}.fa-face-kiss,.fa-kiss{--fa:"\f596"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598"}.fa-face-laugh,.fa-laugh{--fa:"\f599"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d"}.fa-map-location,.fa-map-marked{--fa:"\f59f"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0"}.fa-marker{--fa:"\f5a1"}.fa-medal{--fa:"\f5a2"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5"}.fa-monument{--fa:"\f5a6"}.fa-mortar-pestle{--fa:"\f5a7"}.fa-paint-roller{--fa:"\f5aa"}.fa-passport{--fa:"\f5ab"}.fa-pen-fancy{--fa:"\f5ac"}.fa-pen-nib{--fa:"\f5ad"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae"}.fa-plane-arrival{--fa:"\f5af"}.fa-plane-departure{--fa:"\f5b0"}.fa-prescription{--fa:"\f5b1"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6"}.fa-signature{--fa:"\f5b7"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8"}.fa-solar-panel{--fa:"\f5ba"}.fa-lotus,.fa-spa{--fa:"\f5bb"}.fa-splotch{--fa:"\f5bc"}.fa-spray-can{--fa:"\f5bd"}.fa-stamp{--fa:"\f5bf"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0"}.fa-suitcase-rolling{--fa:"\f5c1"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2"}.fa-swatchbook{--fa:"\f5c3"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7"}.fa-face-tired,.fa-tired{--fa:"\f5c8"}.fa-tooth{--fa:"\f5c9"}.fa-umbrella-beach{--fa:"\f5ca"}.fa-weight-hanging{--fa:"\f5cd"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1"}.fa-atom{--fa:"\f5d2"}.fa-bone{--fa:"\f5d7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da"}.fa-brain{--fa:"\f5dc"}.fa-car-alt,.fa-car-rear{--fa:"\f5de"}.fa-battery-car,.fa-car-battery{--fa:"\f5df"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1"}.fa-car-side{--fa:"\f5e4"}.fa-charging-station{--fa:"\f5e7"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb"}.fa-draw-polygon,.fa-vector-polygon{--fa:"\f5ee"}.fa-laptop-code{--fa:"\f5fc"}.fa-layer-group{--fa:"\f5fd"}.fa-location,.fa-location-crosshairs{--fa:"\f601"}.fa-lungs{--fa:"\f604"}.fa-microscope{--fa:"\f610"}.fa-oil-can{--fa:"\f613"}.fa-poop{--fa:"\f619"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f"}.fa-star-of-life{--fa:"\f621"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a"}.fa-teeth{--fa:"\f62e"}.fa-teeth-open{--fa:"\f62f"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630"}.fa-traffic-light{--fa:"\f637"}.fa-truck-monster{--fa:"\f63b"}.fa-truck-pickup{--fa:"\f63c"}.fa-ad,.fa-rectangle-ad{--fa:"\f641"}.fa-ankh{--fa:"\f644"}.fa-bible,.fa-book-bible{--fa:"\f647"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a"}.fa-city{--fa:"\f64f"}.fa-comment-dollar{--fa:"\f651"}.fa-comments-dollar{--fa:"\f653"}.fa-cross{--fa:"\f654"}.fa-dharmachakra{--fa:"\f655"}.fa-envelope-open-text{--fa:"\f658"}.fa-folder-minus{--fa:"\f65d"}.fa-folder-plus{--fa:"\f65e"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662"}.fa-gopuram{--fa:"\f664"}.fa-hamsa{--fa:"\f665"}.fa-bahai,.fa-haykal{--fa:"\f666"}.fa-jedi{--fa:"\f669"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a"}.fa-kaaba{--fa:"\f66b"}.fa-khanda{--fa:"\f66d"}.fa-landmark{--fa:"\f66f"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674"}.fa-menorah{--fa:"\f676"}.fa-mosque{--fa:"\f678"}.fa-om{--fa:"\f679"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b"}.fa-peace{--fa:"\f67c"}.fa-place-of-worship{--fa:"\f67f"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682"}.fa-person-praying,.fa-pray{--fa:"\f683"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684"}.fa-book-quran,.fa-quran{--fa:"\f687"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689"}.fa-socks{--fa:"\f696"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698"}.fa-star-and-crescent{--fa:"\f699"}.fa-star-of-david{--fa:"\f69a"}.fa-synagogue{--fa:"\f69b"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0"}.fa-torii-gate{--fa:"\f6a1"}.fa-vihara{--fa:"\f6a7"}.fa-volume,.fa-volume-medium{--fa:"\f6a8"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9"}.fa-yin-yang{--fa:"\f6ad"}.fa-blender-phone{--fa:"\f6b6"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7"}.fa-campground{--fa:"\f6bb"}.fa-cat{--fa:"\f6be"}.fa-chair{--fa:"\f6c0"}.fa-cloud-moon{--fa:"\f6c3"}.fa-cloud-sun{--fa:"\f6c4"}.fa-cow{--fa:"\f6c8"}.fa-dice-d20{--fa:"\f6cf"}.fa-dice-d6{--fa:"\f6d1"}.fa-dog{--fa:"\f6d3"}.fa-dragon{--fa:"\f6d5"}.fa-drumstick-bite{--fa:"\f6d7"}.fa-dungeon{--fa:"\f6d9"}.fa-file-csv{--fa:"\f6dd"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de"}.fa-ghost{--fa:"\f6e2"}.fa-hammer{--fa:"\f6e3"}.fa-hanukiah{--fa:"\f6e6"}.fa-hat-wizard{--fa:"\f6e8"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec"}.fa-hippo{--fa:"\f6ed"}.fa-horse{--fa:"\f6f0"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2"}.fa-mask{--fa:"\f6fa"}.fa-mountain{--fa:"\f6fc"}.fa-network-wired{--fa:"\f6ff"}.fa-otter{--fa:"\f700"}.fa-ring{--fa:"\f70b"}.fa-person-running,.fa-running{--fa:"\f70c"}.fa-scroll{--fa:"\f70e"}.fa-skull-crossbones{--fa:"\f714"}.fa-slash{--fa:"\f715"}.fa-spider{--fa:"\f717"}.fa-toilet-paper,.fa-toilet-paper-alt,.fa-toilet-paper-blank{--fa:"\f71e"}.fa-tractor{--fa:"\f722"}.fa-user-injured{--fa:"\f728"}.fa-vr-cardboard{--fa:"\f729"}.fa-wand-sparkles{--fa:"\f72b"}.fa-wind{--fa:"\f72e"}.fa-wine-bottle{--fa:"\f72f"}.fa-cloud-meatball{--fa:"\f73b"}.fa-cloud-moon-rain{--fa:"\f73c"}.fa-cloud-rain{--fa:"\f73d"}.fa-cloud-showers-heavy{--fa:"\f740"}.fa-cloud-sun-rain{--fa:"\f743"}.fa-democrat{--fa:"\f747"}.fa-flag-usa{--fa:"\f74d"}.fa-hurricane{--fa:"\f751"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752"}.fa-meteor{--fa:"\f753"}.fa-person-booth{--fa:"\f756"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a"}.fa-rainbow{--fa:"\f75b"}.fa-republican{--fa:"\f75e"}.fa-smog{--fa:"\f75f"}.fa-temperature-high{--fa:"\f769"}.fa-temperature-low{--fa:"\f76b"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c"}.fa-tornado{--fa:"\f76f"}.fa-volcano{--fa:"\f770"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772"}.fa-water{--fa:"\f773"}.fa-baby{--fa:"\f77c"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d"}.fa-biohazard{--fa:"\f780"}.fa-blog{--fa:"\f781"}.fa-calendar-day{--fa:"\f783"}.fa-calendar-week{--fa:"\f784"}.fa-candy-cane{--fa:"\f786"}.fa-carrot{--fa:"\f787"}.fa-cash-register{--fa:"\f788"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c"}.fa-dumpster{--fa:"\f793"}.fa-dumpster-fire{--fa:"\f794"}.fa-ethernet{--fa:"\f796"}.fa-gifts{--fa:"\f79c"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2"}.fa-grip-lines{--fa:"\f7a4"}.fa-grip-lines-vertical{--fa:"\f7a5"}.fa-guitar{--fa:"\f7a6"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9"}.fa-holly-berry{--fa:"\f7aa"}.fa-horse-head{--fa:"\f7ab"}.fa-icicles{--fa:"\f7ad"}.fa-igloo{--fa:"\f7ae"}.fa-mitten{--fa:"\f7b5"}.fa-mug-hot{--fa:"\f7b6"}.fa-radiation{--fa:"\f7b9"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba"}.fa-restroom{--fa:"\f7bd"}.fa-satellite{--fa:"\f7bf"}.fa-satellite-dish{--fa:"\f7c0"}.fa-sd-card{--fa:"\f7c2"}.fa-sim-card{--fa:"\f7c4"}.fa-person-skating,.fa-skating{--fa:"\f7c5"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca"}.fa-sleigh{--fa:"\f7cc"}.fa-comment-sms,.fa-sms{--fa:"\f7cd"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce"}.fa-snowman{--fa:"\f7d0"}.fa-snowplow{--fa:"\f7d2"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7"}.fa-toilet{--fa:"\f7d8"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-cable-car,.fa-tram{--fa:"\f7da"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4"}.fa-bacon{--fa:"\f7e5"}.fa-book-medical{--fa:"\f7e6"}.fa-bread-slice{--fa:"\f7ec"}.fa-cheese{--fa:"\f7ef"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2"}.fa-clipboard-user{--fa:"\f7f3"}.fa-comment-medical{--fa:"\f7f5"}.fa-crutch{--fa:"\f7f7"}.fa-disease{--fa:"\f7fa"}.fa-egg{--fa:"\f7fb"}.fa-folder-tree{--fa:"\f802"}.fa-burger,.fa-hamburger{--fa:"\f805"}.fa-hand-middle-finger{--fa:"\f806"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807"}.fa-hospital-user{--fa:"\f80d"}.fa-hotdog{--fa:"\f80f"}.fa-ice-cream{--fa:"\f810"}.fa-laptop-medical{--fa:"\f812"}.fa-pager{--fa:"\f815"}.fa-pepper-hot{--fa:"\f816"}.fa-pizza-slice{--fa:"\f818"}.fa-sack-dollar{--fa:"\f81d"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a"}.fa-user-nurse{--fa:"\f82f"}.fa-wave-square{--fa:"\f83e"}.fa-biking,.fa-person-biking{--fa:"\f84a"}.fa-border-all{--fa:"\f84c"}.fa-border-none{--fa:"\f850"}.fa-border-style,.fa-border-top-left{--fa:"\f853"}.fa-digging,.fa-person-digging{--fa:"\f85e"}.fa-fan{--fa:"\f863"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b"}.fa-photo-film,.fa-photo-video{--fa:"\f87c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887"}.fa-spell-check{--fa:"\f891"}.fa-voicemail{--fa:"\f897"}.fa-hat-cowboy{--fa:"\f8c0"}.fa-hat-cowboy-side{--fa:"\f8c1"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc"}.fa-radio{--fa:"\f8d7"}.fa-record-vinyl{--fa:"\f8d9"}.fa-walkie-talkie{--fa:"\f8ef"}.fa-caravan{--fa:"\f8ff"}
:host,:root{--fa-family-brands:"Font Awesome 7 Brands";--fa-font-brands:normal 400 1em/1 var(--fa-family-brands)}@font-face{font-family:"Font Awesome 7 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fa-brands-400-d021aea486533f52f184ee071234522ef6aac85d88fff2a4d76098d5f9b106d9.woff2)}.fa-brands,.fa-classic.fa-brands,.fab{--fa-family:var(--fa-family-brands);--fa-style:400}.fa-firefox-browser{--fa:"\e007"}.fa-ideal{--fa:"\e013"}.fa-microblog{--fa:"\e01a"}.fa-pied-piper-square,.fa-square-pied-piper{--fa:"\e01e"}.fa-unity{--fa:"\e049"}.fa-dailymotion{--fa:"\e052"}.fa-instagram-square,.fa-square-instagram{--fa:"\e055"}.fa-mixer{--fa:"\e056"}.fa-shopify{--fa:"\e057"}.fa-deezer{--fa:"\e077"}.fa-edge-legacy{--fa:"\e078"}.fa-google-pay{--fa:"\e079"}.fa-rust{--fa:"\e07a"}.fa-tiktok{--fa:"\e07b"}.fa-unsplash{--fa:"\e07c"}.fa-cloudflare{--fa:"\e07d"}.fa-guilded{--fa:"\e07e"}.fa-hive{--fa:"\e07f"}.fa-42-group,.fa-innosoft{--fa:"\e080"}.fa-instalod{--fa:"\e081"}.fa-octopus-deploy{--fa:"\e082"}.fa-perbyte{--fa:"\e083"}.fa-uncharted{--fa:"\e084"}.fa-watchman-monitoring{--fa:"\e087"}.fa-wodu{--fa:"\e088"}.fa-wirsindhandwerk,.fa-wsh{--fa:"\e2d0"}.fa-bots{--fa:"\e340"}.fa-cmplid{--fa:"\e360"}.fa-bilibili{--fa:"\e3d9"}.fa-golang{--fa:"\e40f"}.fa-pix{--fa:"\e43a"}.fa-sitrox{--fa:"\e44a"}.fa-hashnode{--fa:"\e499"}.fa-meta{--fa:"\e49b"}.fa-padlet{--fa:"\e4a0"}.fa-nfc-directional{--fa:"\e530"}.fa-nfc-symbol{--fa:"\e531"}.fa-screenpal{--fa:"\e570"}.fa-space-awesome{--fa:"\e5ac"}.fa-square-font-awesome{--fa:"\e5ad"}.fa-gitlab-square,.fa-square-gitlab{--fa:"\e5ae"}.fa-odysee{--fa:"\e5c6"}.fa-stubber{--fa:"\e5c7"}.fa-debian{--fa:"\e60b"}.fa-shoelace{--fa:"\e60c"}.fa-threads{--fa:"\e618"}.fa-square-threads{--fa:"\e619"}.fa-square-x-twitter{--fa:"\e61a"}.fa-x-twitter{--fa:"\e61b"}.fa-opensuse{--fa:"\e62b"}.fa-letterboxd{--fa:"\e62d"}.fa-square-letterboxd{--fa:"\e62e"}.fa-mintbit{--fa:"\e62f"}.fa-google-scholar{--fa:"\e63b"}.fa-brave{--fa:"\e63c"}.fa-brave-reverse{--fa:"\e63d"}.fa-pixiv{--fa:"\e640"}.fa-upwork{--fa:"\e641"}.fa-webflow{--fa:"\e65c"}.fa-signal-messenger{--fa:"\e663"}.fa-bluesky{--fa:"\e671"}.fa-jxl{--fa:"\e67b"}.fa-square-upwork{--fa:"\e67c"}.fa-web-awesome{--fa:"\e682"}.fa-square-web-awesome{--fa:"\e683"}.fa-square-web-awesome-stroke{--fa:"\e684"}.fa-dart-lang{--fa:"\e693"}.fa-flutter{--fa:"\e694"}.fa-files-pinwheel{--fa:"\e69f"}.fa-css{--fa:"\e6a2"}.fa-square-bluesky{--fa:"\e6a3"}.fa-openai{--fa:"\e7cf"}.fa-square-linkedin{--fa:"\e7d0"}.fa-cash-app{--fa:"\e7d4"}.fa-disqus{--fa:"\e7d5"}.fa-11ty,.fa-eleventy{--fa:"\e7d6"}.fa-kakao-talk{--fa:"\e7d7"}.fa-linktree{--fa:"\e7d8"}.fa-notion{--fa:"\e7d9"}.fa-pandora{--fa:"\e7da"}.fa-pixelfed{--fa:"\e7db"}.fa-tidal{--fa:"\e7dc"}.fa-vsco{--fa:"\e7dd"}.fa-w3c{--fa:"\e7de"}.fa-lumon{--fa:"\e7e2"}.fa-lumon-drop{--fa:"\e7e3"}.fa-square-figma{--fa:"\e7e4"}.fa-tex{--fa:"\e7ff"}.fa-duolingo{--fa:"\e812"}.fa-supportnow{--fa:"\e833"}.fa-tor-browser{--fa:"\e838"}.fa-typescript{--fa:"\e840"}.fa-square-deskpro{--fa:"\e844"}.fa-circle-zulip{--fa:"\e851"}.fa-julia{--fa:"\e852"}.fa-zulip{--fa:"\e853"}.fa-unison{--fa:"\e854"}.fa-bgg,.fa-board-game-geek{--fa:"\e855"}.fa-ko-fi{--fa:"\e856"}.fa-kubernetes{--fa:"\e857"}.fa-postgresql{--fa:"\e858"}.fa-scaleway{--fa:"\e859"}.fa-venmo{--fa:"\e85a"}.fa-venmo-v{--fa:"\e85b"}.fa-unreal-engine{--fa:"\e85c"}.fa-globaleaks{--fa:"\e85d"}.fa-solana{--fa:"\e85e"}.fa-threema{--fa:"\e85f"}.fa-forgejo{--fa:"\e860"}.fa-claude{--fa:"\e861"}.fa-gitee{--fa:"\e863"}.fa-xmpp{--fa:"\e864"}.fa-fediverse{--fa:"\e865"}.fa-tailwind-css{--fa:"\e866"}.fa-arch-linux{--fa:"\e867"}.fa-svelte{--fa:"\e868"}.fa-hugging-face{--fa:"\e869"}.fa-leetcode{--fa:"\e86a"}.fa-openstreetmap{--fa:"\e86b"}.fa-ultralytics{--fa:"\e86d"}.fa-ultralytics-hub{--fa:"\e86e"}.fa-ultralytics-yolo{--fa:"\e86f"}.fa-obsidian{--fa:"\e879"}.fa-zoom{--fa:"\e87b"}.fa-vim{--fa:"\e88a"}.fa-symfonycasts{--fa:"\e8ab"}.fa-build-awesome{--fa:"\e8ac"}.fa-codeberg{--fa:"\e8ad"}.fa-devpost{--fa:"\e8ae"}.fa-internet-archive{--fa:"\e8b1"}.fa-lets-encrypt{--fa:"\e8b2"}.fa-matrix{--fa:"\e8b3"}.fa-mattermost{--fa:"\e8b4"}.fa-nextcloud{--fa:"\e8b5"}.fa-roblox-creator-studio{--fa:"\e8b6"}.fa-square-build-awesome-stroke{--fa:"\e8b7"}.fa-substack{--fa:"\e8b8"}.fa-tesla{--fa:"\e8b9"}.fa-xrp{--fa:"\e8ba"}.fa-xrpl{--fa:"\e8bb"}.fa-youtube-shorts{--fa:"\e8bc"}.fa-ror{--fa:"\e8bd"}.fa-visual-studio{--fa:"\e8be"}.fa-dolibarr{--fa:"\e8bf"}.fa-obs-studio{--fa:"\e8c0"}.fa-storybook{--fa:"\e8c1"}.fa-a11y-project{--fa:"\e8c2"}.fa-copilot{--fa:"\e8c7"}.fa-square-twitter,.fa-twitter-square{--fa:"\f081"}.fa-facebook-square,.fa-square-facebook{--fa:"\f082"}.fa-linkedin{--fa:"\f08c"}.fa-github-square,.fa-square-github{--fa:"\f092"}.fa-twitter{--fa:"\f099"}.fa-facebook{--fa:"\f09a"}.fa-github{--fa:"\f09b"}.fa-pinterest{--fa:"\f0d2"}.fa-pinterest-square,.fa-square-pinterest{--fa:"\f0d3"}.fa-google-plus-square,.fa-square-google-plus{--fa:"\f0d4"}.fa-google-plus-g{--fa:"\f0d5"}.fa-linkedin-in{--fa:"\f0e1"}.fa-github-alt{--fa:"\f113"}.fa-maxcdn{--fa:"\f136"}.fa-html5{--fa:"\f13b"}.fa-css3{--fa:"\f13c"}.fa-btc{--fa:"\f15a"}.fa-youtube{--fa:"\f167"}.fa-xing{--fa:"\f168"}.fa-square-xing,.fa-xing-square{--fa:"\f169"}.fa-dropbox{--fa:"\f16b"}.fa-stack-overflow{--fa:"\f16c"}.fa-instagram{--fa:"\f16d"}.fa-flickr{--fa:"\f16e"}.fa-adn{--fa:"\f170"}.fa-bitbucket{--fa:"\f171"}.fa-tumblr{--fa:"\f173"}.fa-square-tumblr,.fa-tumblr-square{--fa:"\f174"}.fa-apple{--fa:"\f179"}.fa-windows{--fa:"\f17a"}.fa-android{--fa:"\f17b"}.fa-linux{--fa:"\f17c"}.fa-dribbble{--fa:"\f17d"}.fa-skype{--fa:"\f17e"}.fa-foursquare{--fa:"\f180"}.fa-trello{--fa:"\f181"}.fa-gratipay{--fa:"\f184"}.fa-vk{--fa:"\f189"}.fa-weibo{--fa:"\f18a"}.fa-renren{--fa:"\f18b"}.fa-pagelines{--fa:"\f18c"}.fa-stack-exchange{--fa:"\f18d"}.fa-square-vimeo,.fa-vimeo-square{--fa:"\f194"}.fa-slack,.fa-slack-hash{--fa:"\f198"}.fa-wordpress{--fa:"\f19a"}.fa-openid{--fa:"\f19b"}.fa-yahoo{--fa:"\f19e"}.fa-google{--fa:"\f1a0"}.fa-reddit{--fa:"\f1a1"}.fa-reddit-square,.fa-square-reddit{--fa:"\f1a2"}.fa-stumbleupon-circle{--fa:"\f1a3"}.fa-stumbleupon{--fa:"\f1a4"}.fa-delicious{--fa:"\f1a5"}.fa-digg{--fa:"\f1a6"}.fa-pied-piper-pp{--fa:"\f1a7"}.fa-pied-piper-alt{--fa:"\f1a8"}.fa-drupal{--fa:"\f1a9"}.fa-joomla{--fa:"\f1aa"}.fa-behance{--fa:"\f1b4"}.fa-behance-square,.fa-square-behance{--fa:"\f1b5"}.fa-steam{--fa:"\f1b6"}.fa-square-steam,.fa-steam-square{--fa:"\f1b7"}.fa-spotify{--fa:"\f1bc"}.fa-deviantart{--fa:"\f1bd"}.fa-soundcloud{--fa:"\f1be"}.fa-vine{--fa:"\f1ca"}.fa-codepen{--fa:"\f1cb"}.fa-jsfiddle{--fa:"\f1cc"}.fa-rebel{--fa:"\f1d0"}.fa-empire{--fa:"\f1d1"}.fa-git-square,.fa-square-git{--fa:"\f1d2"}.fa-git{--fa:"\f1d3"}.fa-hacker-news{--fa:"\f1d4"}.fa-tencent-weibo{--fa:"\f1d5"}.fa-qq{--fa:"\f1d6"}.fa-weixin{--fa:"\f1d7"}.fa-slideshare{--fa:"\f1e7"}.fa-twitch{--fa:"\f1e8"}.fa-yelp{--fa:"\f1e9"}.fa-paypal{--fa:"\f1ed"}.fa-google-wallet{--fa:"\f1ee"}.fa-cc-visa{--fa:"\f1f0"}.fa-cc-mastercard{--fa:"\f1f1"}.fa-cc-discover{--fa:"\f1f2"}.fa-cc-amex{--fa:"\f1f3"}.fa-cc-paypal{--fa:"\f1f4"}.fa-cc-stripe{--fa:"\f1f5"}.fa-lastfm{--fa:"\f202"}.fa-lastfm-square,.fa-square-lastfm{--fa:"\f203"}.fa-ioxhost{--fa:"\f208"}.fa-angellist{--fa:"\f209"}.fa-buysellads{--fa:"\f20d"}.fa-connectdevelop{--fa:"\f20e"}.fa-dashcube{--fa:"\f210"}.fa-forumbee{--fa:"\f211"}.fa-leanpub{--fa:"\f212"}.fa-sellsy{--fa:"\f213"}.fa-shirtsinbulk{--fa:"\f214"}.fa-simplybuilt{--fa:"\f215"}.fa-skyatlas{--fa:"\f216"}.fa-pinterest-p{--fa:"\f231"}.fa-whatsapp{--fa:"\f232"}.fa-viacoin{--fa:"\f237"}.fa-medium,.fa-medium-m{--fa:"\f23a"}.fa-y-combinator{--fa:"\f23b"}.fa-optin-monster{--fa:"\f23c"}.fa-opencart{--fa:"\f23d"}.fa-expeditedssl{--fa:"\f23e"}.fa-cc-jcb{--fa:"\f24b"}.fa-cc-diners-club{--fa:"\f24c"}.fa-creative-commons{--fa:"\f25e"}.fa-gg{--fa:"\f260"}.fa-gg-circle{--fa:"\f261"}.fa-odnoklassniki{--fa:"\f263"}.fa-odnoklassniki-square,.fa-square-odnoklassniki{--fa:"\f264"}.fa-get-pocket{--fa:"\f265"}.fa-wikipedia-w{--fa:"\f266"}.fa-safari{--fa:"\f267"}.fa-chrome{--fa:"\f268"}.fa-firefox{--fa:"\f269"}.fa-opera{--fa:"\f26a"}.fa-internet-explorer{--fa:"\f26b"}.fa-contao{--fa:"\f26d"}.fa-500px{--fa:"\f26e"}.fa-amazon{--fa:"\f270"}.fa-houzz{--fa:"\f27c"}.fa-vimeo-v{--fa:"\f27d"}.fa-black-tie{--fa:"\f27e"}.fa-fonticons{--fa:"\f280"}.fa-reddit-alien{--fa:"\f281"}.fa-edge{--fa:"\f282"}.fa-codiepie{--fa:"\f284"}.fa-modx{--fa:"\f285"}.fa-fort-awesome{--fa:"\f286"}.fa-usb{--fa:"\f287"}.fa-product-hunt{--fa:"\f288"}.fa-mixcloud{--fa:"\f289"}.fa-scribd{--fa:"\f28a"}.fa-bluetooth{--fa:"\f293"}.fa-bluetooth-b{--fa:"\f294"}.fa-gitlab{--fa:"\f296"}.fa-wpbeginner{--fa:"\f297"}.fa-wpforms{--fa:"\f298"}.fa-envira{--fa:"\f299"}.fa-glide{--fa:"\f2a5"}.fa-glide-g{--fa:"\f2a6"}.fa-viadeo{--fa:"\f2a9"}.fa-square-viadeo,.fa-viadeo-square{--fa:"\f2aa"}.fa-snapchat,.fa-snapchat-ghost{--fa:"\f2ab"}.fa-snapchat-square,.fa-square-snapchat{--fa:"\f2ad"}.fa-pied-piper{--fa:"\f2ae"}.fa-first-order{--fa:"\f2b0"}.fa-yoast{--fa:"\f2b1"}.fa-themeisle{--fa:"\f2b2"}.fa-google-plus{--fa:"\f2b3"}.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full{--fa:"\f2b4"}.fa-linode{--fa:"\f2b8"}.fa-quora{--fa:"\f2c4"}.fa-free-code-camp{--fa:"\f2c5"}.fa-telegram,.fa-telegram-plane{--fa:"\f2c6"}.fa-bandcamp{--fa:"\f2d5"}.fa-grav{--fa:"\f2d6"}.fa-etsy{--fa:"\f2d7"}.fa-imdb{--fa:"\f2d8"}.fa-ravelry{--fa:"\f2d9"}.fa-sellcast{--fa:"\f2da"}.fa-superpowers{--fa:"\f2dd"}.fa-wpexplorer{--fa:"\f2de"}.fa-meetup{--fa:"\f2e0"}.fa-font-awesome-alt,.fa-square-font-awesome-stroke{--fa:"\f35c"}.fa-accessible-icon{--fa:"\f368"}.fa-accusoft{--fa:"\f369"}.fa-adversal{--fa:"\f36a"}.fa-affiliatetheme{--fa:"\f36b"}.fa-algolia{--fa:"\f36c"}.fa-amilia{--fa:"\f36d"}.fa-angrycreative{--fa:"\f36e"}.fa-app-store{--fa:"\f36f"}.fa-app-store-ios{--fa:"\f370"}.fa-apper{--fa:"\f371"}.fa-asymmetrik{--fa:"\f372"}.fa-audible{--fa:"\f373"}.fa-avianex{--fa:"\f374"}.fa-aws{--fa:"\f375"}.fa-bimobject{--fa:"\f378"}.fa-bitcoin{--fa:"\f379"}.fa-bity{--fa:"\f37a"}.fa-blackberry{--fa:"\f37b"}.fa-blogger{--fa:"\f37c"}.fa-blogger-b{--fa:"\f37d"}.fa-buromobelexperte{--fa:"\f37f"}.fa-centercode{--fa:"\f380"}.fa-cloudscale{--fa:"\f383"}.fa-cloudsmith{--fa:"\f384"}.fa-cloudversify{--fa:"\f385"}.fa-cpanel{--fa:"\f388"}.fa-css3-alt{--fa:"\f38b"}.fa-cuttlefish{--fa:"\f38c"}.fa-d-and-d{--fa:"\f38d"}.fa-deploydog{--fa:"\f38e"}.fa-deskpro{--fa:"\f38f"}.fa-digital-ocean{--fa:"\f391"}.fa-discord{--fa:"\f392"}.fa-discourse{--fa:"\f393"}.fa-dochub{--fa:"\f394"}.fa-docker{--fa:"\f395"}.fa-draft2digital{--fa:"\f396"}.fa-dribbble-square,.fa-square-dribbble{--fa:"\f397"}.fa-dyalog{--fa:"\f399"}.fa-earlybirds{--fa:"\f39a"}.fa-erlang{--fa:"\f39d"}.fa-facebook-f{--fa:"\f39e"}.fa-facebook-messenger{--fa:"\f39f"}.fa-firstdraft{--fa:"\f3a1"}.fa-fonticons-fi{--fa:"\f3a2"}.fa-fort-awesome-alt{--fa:"\f3a3"}.fa-freebsd{--fa:"\f3a4"}.fa-gitkraken{--fa:"\f3a6"}.fa-gofore{--fa:"\f3a7"}.fa-goodreads{--fa:"\f3a8"}.fa-goodreads-g{--fa:"\f3a9"}.fa-google-drive{--fa:"\f3aa"}.fa-google-play{--fa:"\f3ab"}.fa-gripfire{--fa:"\f3ac"}.fa-grunt{--fa:"\f3ad"}.fa-gulp{--fa:"\f3ae"}.fa-hacker-news-square,.fa-square-hacker-news{--fa:"\f3af"}.fa-hire-a-helper{--fa:"\f3b0"}.fa-hotjar{--fa:"\f3b1"}.fa-hubspot{--fa:"\f3b2"}.fa-itunes{--fa:"\f3b4"}.fa-itunes-note{--fa:"\f3b5"}.fa-jenkins{--fa:"\f3b6"}.fa-joget{--fa:"\f3b7"}.fa-js{--fa:"\f3b8"}.fa-js-square,.fa-square-js{--fa:"\f3b9"}.fa-keycdn{--fa:"\f3ba"}.fa-kickstarter,.fa-square-kickstarter{--fa:"\f3bb"}.fa-kickstarter-k{--fa:"\f3bc"}.fa-laravel{--fa:"\f3bd"}.fa-line{--fa:"\f3c0"}.fa-lyft{--fa:"\f3c3"}.fa-magento{--fa:"\f3c4"}.fa-medapps{--fa:"\f3c6"}.fa-medrt{--fa:"\f3c8"}.fa-microsoft{--fa:"\f3ca"}.fa-mix{--fa:"\f3cb"}.fa-mizuni{--fa:"\f3cc"}.fa-monero{--fa:"\f3d0"}.fa-napster{--fa:"\f3d2"}.fa-node-js{--fa:"\f3d3"}.fa-npm{--fa:"\f3d4"}.fa-ns8{--fa:"\f3d5"}.fa-nutritionix{--fa:"\f3d6"}.fa-page4{--fa:"\f3d7"}.fa-palfed{--fa:"\f3d8"}.fa-patreon{--fa:"\f3d9"}.fa-periscope{--fa:"\f3da"}.fa-phabricator{--fa:"\f3db"}.fa-phoenix-framework{--fa:"\f3dc"}.fa-playstation{--fa:"\f3df"}.fa-pushed{--fa:"\f3e1"}.fa-python{--fa:"\f3e2"}.fa-red-river{--fa:"\f3e3"}.fa-rendact,.fa-wpressr{--fa:"\f3e4"}.fa-replyd{--fa:"\f3e6"}.fa-resolving{--fa:"\f3e7"}.fa-rocketchat{--fa:"\f3e8"}.fa-rockrms{--fa:"\f3e9"}.fa-schlix{--fa:"\f3ea"}.fa-searchengin{--fa:"\f3eb"}.fa-servicestack{--fa:"\f3ec"}.fa-sistrix{--fa:"\f3ee"}.fa-speakap{--fa:"\f3f3"}.fa-staylinked{--fa:"\f3f5"}.fa-steam-symbol{--fa:"\f3f6"}.fa-sticker-mule{--fa:"\f3f7"}.fa-studiovinari{--fa:"\f3f8"}.fa-supple{--fa:"\f3f9"}.fa-uber{--fa:"\f402"}.fa-uikit{--fa:"\f403"}.fa-uniregistry{--fa:"\f404"}.fa-untappd{--fa:"\f405"}.fa-ussunnah{--fa:"\f407"}.fa-vaadin{--fa:"\f408"}.fa-viber{--fa:"\f409"}.fa-vimeo{--fa:"\f40a"}.fa-vnv{--fa:"\f40b"}.fa-square-whatsapp,.fa-whatsapp-square{--fa:"\f40c"}.fa-whmcs{--fa:"\f40d"}.fa-wordpress-simple{--fa:"\f411"}.fa-xbox{--fa:"\f412"}.fa-yandex{--fa:"\f413"}.fa-yandex-international{--fa:"\f414"}.fa-apple-pay{--fa:"\f415"}.fa-cc-apple-pay{--fa:"\f416"}.fa-fly{--fa:"\f417"}.fa-node{--fa:"\f419"}.fa-osi{--fa:"\f41a"}.fa-react{--fa:"\f41b"}.fa-autoprefixer{--fa:"\f41c"}.fa-less{--fa:"\f41d"}.fa-sass{--fa:"\f41e"}.fa-vuejs{--fa:"\f41f"}.fa-angular{--fa:"\f420"}.fa-aviato{--fa:"\f421"}.fa-ember{--fa:"\f423"}.fa-gitter{--fa:"\f426"}.fa-hooli{--fa:"\f427"}.fa-strava{--fa:"\f428"}.fa-stripe{--fa:"\f429"}.fa-stripe-s{--fa:"\f42a"}.fa-typo3{--fa:"\f42b"}.fa-amazon-pay{--fa:"\f42c"}.fa-cc-amazon-pay{--fa:"\f42d"}.fa-ethereum{--fa:"\f42e"}.fa-korvue{--fa:"\f42f"}.fa-elementor{--fa:"\f430"}.fa-square-youtube,.fa-youtube-square{--fa:"\f431"}.fa-flipboard{--fa:"\f44d"}.fa-hips{--fa:"\f452"}.fa-php{--fa:"\f457"}.fa-quinscape{--fa:"\f459"}.fa-readme{--fa:"\f4d5"}.fa-java{--fa:"\f4e4"}.fa-pied-piper-hat{--fa:"\f4e5"}.fa-creative-commons-by{--fa:"\f4e7"}.fa-creative-commons-nc{--fa:"\f4e8"}.fa-creative-commons-nc-eu{--fa:"\f4e9"}.fa-creative-commons-nc-jp{--fa:"\f4ea"}.fa-creative-commons-nd{--fa:"\f4eb"}.fa-creative-commons-pd{--fa:"\f4ec"}.fa-creative-commons-pd-alt{--fa:"\f4ed"}.fa-creative-commons-remix{--fa:"\f4ee"}.fa-creative-commons-sa{--fa:"\f4ef"}.fa-creative-commons-sampling{--fa:"\f4f0"}.fa-creative-commons-sampling-plus{--fa:"\f4f1"}.fa-creative-commons-share{--fa:"\f4f2"}.fa-creative-commons-zero{--fa:"\f4f3"}.fa-ebay{--fa:"\f4f4"}.fa-keybase{--fa:"\f4f5"}.fa-mastodon{--fa:"\f4f6"}.fa-r-project{--fa:"\f4f7"}.fa-researchgate{--fa:"\f4f8"}.fa-teamspeak{--fa:"\f4f9"}.fa-first-order-alt{--fa:"\f50a"}.fa-fulcrum{--fa:"\f50b"}.fa-galactic-republic{--fa:"\f50c"}.fa-galactic-senate{--fa:"\f50d"}.fa-jedi-order{--fa:"\f50e"}.fa-mandalorian{--fa:"\f50f"}.fa-old-republic{--fa:"\f510"}.fa-phoenix-squadron{--fa:"\f511"}.fa-sith{--fa:"\f512"}.fa-trade-federation{--fa:"\f513"}.fa-wolf-pack-battalion{--fa:"\f514"}.fa-hornbill{--fa:"\f592"}.fa-mailchimp{--fa:"\f59e"}.fa-megaport{--fa:"\f5a3"}.fa-nimblr{--fa:"\f5a8"}.fa-rev{--fa:"\f5b2"}.fa-shopware{--fa:"\f5b5"}.fa-squarespace{--fa:"\f5be"}.fa-themeco{--fa:"\f5c6"}.fa-weebly{--fa:"\f5cc"}.fa-wix{--fa:"\f5cf"}.fa-ello{--fa:"\f5f1"}.fa-hackerrank{--fa:"\f5f7"}.fa-kaggle{--fa:"\f5fa"}.fa-markdown{--fa:"\f60f"}.fa-neos{--fa:"\f612"}.fa-zhihu{--fa:"\f63f"}.fa-alipay{--fa:"\f642"}.fa-the-red-yeti{--fa:"\f69d"}.fa-critical-role{--fa:"\f6c9"}.fa-d-and-d-beyond{--fa:"\f6ca"}.fa-dev{--fa:"\f6cc"}.fa-fantasy-flight-games{--fa:"\f6dc"}.fa-wizards-of-the-coast{--fa:"\f730"}.fa-think-peaks{--fa:"\f731"}.fa-reacteurope{--fa:"\f75d"}.fa-artstation{--fa:"\f77a"}.fa-atlassian{--fa:"\f77b"}.fa-canadian-maple-leaf{--fa:"\f785"}.fa-centos{--fa:"\f789"}.fa-confluence{--fa:"\f78d"}.fa-dhl{--fa:"\f790"}.fa-diaspora{--fa:"\f791"}.fa-fedex{--fa:"\f797"}.fa-fedora{--fa:"\f798"}.fa-figma{--fa:"\f799"}.fa-intercom{--fa:"\f7af"}.fa-invision{--fa:"\f7b0"}.fa-jira{--fa:"\f7b1"}.fa-mendeley{--fa:"\f7b3"}.fa-raspberry-pi{--fa:"\f7bb"}.fa-redhat{--fa:"\f7bc"}.fa-sketch{--fa:"\f7c6"}.fa-sourcetree{--fa:"\f7d3"}.fa-suse{--fa:"\f7d6"}.fa-ubuntu{--fa:"\f7df"}.fa-ups{--fa:"\f7e0"}.fa-usps{--fa:"\f7e1"}.fa-yarn{--fa:"\f7e3"}.fa-airbnb{--fa:"\f834"}.fa-battle-net{--fa:"\f835"}.fa-bootstrap{--fa:"\f836"}.fa-buffer{--fa:"\f837"}.fa-chromecast{--fa:"\f838"}.fa-evernote{--fa:"\f839"}.fa-itch-io{--fa:"\f83a"}.fa-salesforce{--fa:"\f83b"}.fa-speaker-deck{--fa:"\f83c"}.fa-symfony{--fa:"\f83d"}.fa-waze{--fa:"\f83f"}.fa-yammer{--fa:"\f840"}.fa-git-alt{--fa:"\f841"}.fa-stackpath{--fa:"\f842"}.fa-cotton-bureau{--fa:"\f89e"}.fa-buy-n-large{--fa:"\f8a6"}.fa-mdb{--fa:"\f8ca"}.fa-orcid{--fa:"\f8d2"}.fa-swift{--fa:"\f8e1"}.fa-umbraco{--fa:"\f8e8"}:host,:root{--fa-font-regular:normal 400 1em/1 var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fa-regular-400-896c3ca9d34b690912782fbc3ee45e7d5b539976e0535bc54809db1ebff7b88c.woff2)}.far{--fa-family:var(--fa-family-classic)}.fa-regular,.far{--fa-style:400}:host,:root{--fa-family-classic:"Font Awesome 7 Free";--fa-font-solid:normal 900 1em/1 var(--fa-family-classic);--fa-style-family-classic:var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight:900;font-display:block;src:url(/assets/fa-solid-900-caf247d6fb3d41b05bbdd623b627639ed9e76b1204d99f85d26f3cb589559101.woff2)}.fas{--fa-style:900}.fa-classic,.fas{--fa-family:var(--fa-family-classic)}.fa-solid{--fa-style:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(/assets/fa-brands-400-d021aea486533f52f184ee071234522ef6aac85d88fff2a4d76098d5f9b106d9.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(/assets/fa-solid-900-caf247d6fb3d41b05bbdd623b627639ed9e76b1204d99f85d26f3cb589559101.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(/assets/fa-regular-400-896c3ca9d34b690912782fbc3ee45e7d5b539976e0535bc54809db1ebff7b88c.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-solid-900-caf247d6fb3d41b05bbdd623b627639ed9e76b1204d99f85d26f3cb589559101.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-brands-400-d021aea486533f52f184ee071234522ef6aac85d88fff2a4d76098d5f9b106d9.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-regular-400-896c3ca9d34b690912782fbc3ee45e7d5b539976e0535bc54809db1ebff7b88c.woff2) format("woff2");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(/assets/fa-v4compatibility-268e36e04c427c436eafa410b46c8037f21e1dce2ffae15a6a056f21db4cc2bf.woff2) format("woff2");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
/* Self-hosted Latin subsets. Versions and licenses: vendor/licenses/fonts/README.md */

  
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/outfit-latin-400-normal-553344b37a5f54a778401dc939d1edbf7db164af1ea40ca60abc042ce4de19d1.woff2) format("woff2");
}
  
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/outfit-latin-500-normal-33d6ee607387333791c451b8a8ac1dd839a3517090f426c19219b509b53306cf.woff2) format("woff2");
}
  
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/outfit-latin-600-normal-691dfd3e0e60e1eaa6015fa7ff86697f7ef4e750979905d755a49023b61e13ae.woff2) format("woff2");
}
  
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/outfit-latin-700-normal-18485a673f6eed80d03f15d121d70dec89f2bdb98cabb49d5b21d2f6f2edc024.woff2) format("woff2");
}
  
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/outfit-latin-800-normal-a34f7009d3fb65d70bf42a67b9e0d6370513725ecf17ffb04726cfc60a0158d6.woff2) format("woff2");
}
  

  
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fraunces-latin-600-normal-0b5c1cadad0aa861a6d64c5f4b937f5f0b1fe63eda555c002a79793275cf8c42.woff2) format("woff2");
}
  
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fraunces-latin-700-normal-c1f5074f2df918f057573ed7000c76395115e7fe06c06719b87230b801629a82.woff2) format("woff2");
}
  
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/fraunces-latin-800-normal-a35c7b3d7aba82f3133b9ea29ae2401093fa66a4289fb20f4c37c097d3bbf756.woff2) format("woff2");
}
  

  
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/archivo-black-latin-400-normal-8107794c8163fce5c92ef60a2d4c9a469ab52c167e1741cdf77a74e4ac27b2bd.woff2) format("woff2");
}
  

  
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/ibm-plex-mono-latin-400-normal-bf724fb240693409729589ab1cd2fc22a9f9d70492d255e2fcf5631cf294654b.woff2) format("woff2");
}
  
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/ibm-plex-mono-latin-500-normal-da9fca28b8d867e1e314d92d78aa3c813e6b9d76a128d17642c4eaa7c8aedc84.woff2) format("woff2");
}
  
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-mono-latin-600-normal-60a8ebc58c4bce48ebe0ef736ef93b5772f79d9c57692c9f7e86c26957444b07.woff2) format("woff2");
}
  

  
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/dm-mono-latin-400-normal-349b20028e250551e483cec05dc2df5f90cf768d454e46572b60e9e850da104f.woff2) format("woff2");
}
  
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/dm-mono-latin-500-normal-eead7e74c589a3474c2e51b32b4364f6f401ddb303359b7babbe17498c6cbdb0.woff2) format("woff2");
}
  
/* Word-puzzle family: Rackrace, Lattice, Tangle, Ink, Headings, Kindred, Motif, Perimeter, Cipher, Finder, Rungs */

.wp-shell .sb-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wp-table {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  width: 100%;
}

.wp-board {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wp-copy { color: var(--ww-ink-soft); margin: 0 0 0.75rem; max-width: 40rem; }
.wp-acc {
  font-family: var(--ww-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--club-brass-lit);
  margin: 0 0 0.35rem;
}
.wp-kicker { margin: 0; }
.wp-score { font-variant-numeric: tabular-nums; }
.wp-catalog {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-family: var(--ww-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink-soft);
  margin: 0 0 0.75rem;
}
.wp-letter {
  font-family: var(--ww-display);
  font-size: 2rem;
  color: var(--club-brass-lit);
}

.wp-tiles, .wp-mesh, .wp-kindred-tiles {
  display: grid;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.wp-tiles { grid-template-columns: repeat(7, minmax(2.6rem, 1fr)); max-width: 22rem; }

.wp-tile, .wp-kindred-tile {
  min-height: var(--ww-control-min);
  min-width: var(--ww-control-min);
  border: 1px solid var(--ww-line);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
  font-family: var(--ww-display);
  font-size: 1.15rem;
  cursor: pointer;
}

.wp-tile:disabled, .wp-kindred-tile:disabled { opacity: 0.55; cursor: not-allowed; }

@media (hover: hover) {
  .wp-tile:hover:not(:disabled), .wp-kindred-tile:hover:not(:disabled) {
    border-color: var(--club-brass);
    transform: translateY(-1px);
  }
}

.wp-tile:focus-visible, .wp-kindred-tile:focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 3px;
}

.wp-tile:active:not(:disabled), .wp-kindred-tile:active:not(:disabled) {
  transform: translateY(1px);
}

.wp-kindred-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 4.6rem;
  padding: 0.45rem 0.55rem 0.4rem;
  text-align: left;
  border-color: var(--club-brass);
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--club-travertine) 70%, var(--ww-paper));
}

.wp-kindred-tile__acc {
  font-family: var(--ww-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
}

.wp-kindred-tile__word {
  font-family: var(--ww-display);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--ww-ink);
  overflow-wrap: anywhere;
}

.wp-kindred-tile.is-selected {
  border-color: var(--club-brass-lit);
  background: color-mix(in oklch, var(--club-brass) 18%, var(--ww-paper-2));
  color: var(--ww-ink);
}

.wp-kindred-tile.is-solved {
  background: color-mix(in oklch, var(--club-jade) 28%, var(--ww-paper-2));
}

.wp-kindred-miss {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ww-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ww-ink-soft);
  margin: 0 0 0.75rem;
}

.wp-kindred-miss__pips {
  display: flex;
  gap: 0.3rem;
}

.wp-kindred-miss__pips i {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--club-brass);
  background: transparent;
  display: inline-block;
}

.wp-kindred-miss__pips i.is-spent {
  background: var(--club-oxblood);
  border-color: var(--club-oxblood);
}

.wp-kindred-plaques {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: grid;
  gap: 0.4rem;
}

.wp-kindred-plaque {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.7rem 0.5rem;
  border: 1px solid var(--club-brass-dim);
}

.wp-kindred-plaque__wing {
  font-family: var(--ww-display);
  font-size: 1rem;
}

.wp-kindred-plaque__list {
  font-family: var(--ww-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.wp-kindred-plaque--1 {
  background: color-mix(in oklch, var(--club-brass) 28%, var(--ww-paper-2));
  color: var(--ww-ink);
}

.wp-kindred-plaque--2 {
  background: color-mix(in oklch, var(--club-celadon) 42%, var(--ww-paper-2));
  color: var(--ww-ink);
}

.wp-kindred-plaque--3 {
  background: color-mix(in oklch, var(--club-oxblood) 78%, var(--ww-navy));
  color: var(--ww-wood-ink);
}

.wp-kindred-plaque--4 {
  background: color-mix(in oklch, var(--ww-navy) 82%, var(--ww-blue));
  color: var(--ww-wood-ink);
}

.wp-slots { display: grid; gap: 0.35rem; margin: 0.75rem 0; }
.wp-slot { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ww-line); padding: 0.25rem 0; }
.wp-found { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.wp-found li { font-family: var(--ww-mono); font-size: 0.85rem; }

.wp-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.wp-inline-form input[type="text"], .wp-rung, .wp-cell, .wp-heading-list input {
  min-height: var(--ww-control-min);
  border: 1px solid var(--ww-line);
  background: var(--ww-paper);
  color: var(--ww-ink);
  padding: 0 0.6rem;
  font-family: var(--ww-mono);
}

.wp-knots { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.wp-knot { display: flex; gap: 0.25rem; font-family: var(--ww-display); font-size: 1.4rem; }
.wp-punchline { font-family: var(--ww-display); font-size: 1.4rem; letter-spacing: 0.04em; }
.wp-circled {
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--club-brass);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wp-clues {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .wp-clues { grid-template-columns: 1fr 1fr; }
}
.wp-clue-col h3 { font-family: var(--ww-display); margin: 0 0 0.4rem; }
.wp-clue-col ol { margin: 0; padding-left: 1.4rem; color: var(--ww-ink-soft); }
.wp-labels { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; counter-reset: clue; }
.wp-label {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: 0.4rem;
  align-items: baseline;
}
.wp-label__no {
  font-family: var(--ww-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--club-brass-lit);
}
.wp-label__line { color: var(--ww-ink-soft); font-size: 0.92rem; }

.wp-grid { border-collapse: collapse; margin: 0; background: var(--ww-paper); }
.wp-grid td {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid color-mix(in oklch, var(--club-brass) 55%, var(--ww-line));
  position: relative;
  padding: 0;
}
.wp-black {
  background: var(--ww-sheet-ink);
  color: var(--ww-sheet);
}
.wp-num {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.6rem;
  font-family: var(--ww-mono);
  color: var(--ww-ink-soft);
}
.wp-cell {
  width: 100%;
  height: 100%;
  border: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.1rem;
  padding: 0;
  min-height: var(--ww-control-min);
  background: var(--ww-paper);
  color: var(--ww-ink);
}
.wp-ink-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.wp-kindred-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .wp-kindred-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wp-mesh--mosaic {
  grid-template-columns: repeat(var(--wp-mosaic-cols, 6), minmax(2.2rem, 1fr));
  max-width: 18.5rem;
  gap: 0.22rem;
}

.wp-motif .wp-tile {
  border-color: var(--club-brass);
  background: color-mix(in oklch, var(--ww-navy) 88%, var(--club-brass));
  color: var(--ww-wood-ink);
  font-size: 1.05rem;
}

.wp-motif .wp-tile.is-found {
  background: color-mix(in oklch, var(--club-celadon) 35%, var(--ww-navy));
  color: var(--club-celadon);
  opacity: 1;
}

.wp-heading-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.wp-heading-list label { display: grid; gap: 0.25rem; }

.wp-frame {
  display: grid;
  grid-template-columns: auto minmax(5.5rem, 1fr) auto;
  grid-template-rows: auto minmax(5.5rem, 1fr) auto;
  gap: 0.35rem;
  max-width: 22rem;
  margin: 1rem 0;
  padding: 0.7rem;
  border: 6px double var(--club-brass);
  background: color-mix(in oklch, var(--ww-navy) 92%, var(--club-walnut));
  color: var(--ww-wood-ink);
}

.wp-rail {
  display: flex;
  gap: 0.28rem;
  justify-content: center;
  align-items: center;
}

.wp-rail--top { grid-column: 1 / -1; grid-row: 1; }
.wp-rail--bottom { grid-column: 1 / -1; grid-row: 3; }
.wp-rail--left { grid-column: 1; grid-row: 2; flex-direction: column; }
.wp-rail--right { grid-column: 3; grid-row: 2; flex-direction: column; }

.wp-mat {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem;
  text-align: center;
  background: color-mix(in oklch, var(--club-oxblood) 55%, var(--ww-navy));
  color: var(--ww-wood-ink);
  border: 1px solid var(--club-brass-dim);
}

.wp-mat__kicker {
  font-family: var(--ww-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--club-brass-lit);
}

.wp-mat__count { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wp-mat__par { font-size: 0.78rem; color: var(--club-celadon); }

.wp-rail-tile {
  min-width: var(--ww-control-min);
  background: color-mix(in oklch, var(--club-brass) 22%, var(--ww-navy));
  color: var(--ww-wood-ink);
  border-color: var(--club-brass);
}

.wp-rail-tile.is-spent { opacity: 0.4; }

.wp-encoded, .wp-decoded { letter-spacing: 0.08em; line-height: 1.6; word-break: break-word; }
.wp-search { font-family: var(--ww-mono); overflow-x: auto; }
.wp-search-row { display: flex; }
.wp-search-cell {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ww-line);
}
.wp-wordlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-wordlist .is-found { color: var(--ww-ink-soft); }
.wp-ladder { list-style: none; padding: 0; display: grid; gap: 0.4rem; max-width: 16rem; }
.wp-result { display: grid; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ww-line); }

.wp-toast-ok { color: var(--ww-success-text); }
.wp-toast-error { color: var(--ww-danger-text); }

@media (max-width: 24.99rem) {
  .wp-frame { max-width: 100%; }
  .wp-mesh--mosaic { max-width: 100%; }
}

/* The printed sheet every Ink size shares. A newspaper crossword: newsprint,
 * ink-black squares, hairline rules, a heavier outer border, the current word
 * lit pale blue and the square in hand yellow. --wp-cell scales the whole grid
 * so a 21x21 fits a 390px phone without sideways scrolling. */
.wp-sheet {
  --wp-cell: min(2.4rem, calc((100vw - 3.25rem) / var(--wp-n, 15)));
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.wp-sheet--21 { --wp-cell: min(1.85rem, calc((100vw - 3.25rem) / 21)); }
.wp-sheet__bar {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0;
  padding: 0.5rem 0.75rem;
  min-height: 2.6rem;
  background: var(--ww-sheet-word);
  color: var(--ww-sheet-ink);
  border-radius: var(--ww-radius-sm);
  font-size: 0.95rem;
}
.wp-sheet__bar-no { font-weight: 700; white-space: nowrap; }
.wp-sheet__body { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 64rem) {
  .wp-sheet--21 .wp-sheet__body { grid-template-columns: auto minmax(0, 1fr); }
}
.wp-sheet__grid { display: grid; gap: 0.6rem; justify-items: start; }
.wp-sheet .wp-grid {
  background: var(--ww-sheet);
  border: 2px solid var(--ww-sheet-ink);
}
.wp-sheet .wp-grid td {
  width: var(--wp-cell);
  height: var(--wp-cell);
  border: 1px solid var(--ww-sheet-rule);
}
.wp-sheet .wp-white { background: var(--ww-sheet); }
.wp-sheet .wp-white.is-word { background: var(--ww-sheet-word); }
.wp-sheet .wp-white.is-cursor { background: var(--ww-sheet-cursor); }
.wp-sheet .wp-num {
  top: 0;
  left: 0.12em;
  font-family: var(--ww-font);
  font-size: calc(var(--wp-cell) * 0.3);
  line-height: 1.1;
  color: var(--ww-sheet-ink);
  pointer-events: none;
}
.wp-sheet .wp-cell {
  display: block;
  box-sizing: border-box;
  width: var(--wp-cell);
  height: var(--wp-cell);
  min-height: 0;
  padding-top: calc(var(--wp-cell) * 0.16);
  font-family: var(--ww-font);
  font-size: calc(var(--wp-cell) * 0.58);
  font-weight: 600;
  background: transparent;
  color: var(--ww-sheet-ink);
  caret-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.wp-sheet .wp-cell:focus-visible { outline: 2px solid var(--ww-sheet-ink); outline-offset: -2px; }
.wp-sheet .wp-cell:disabled { cursor: default; color: var(--ww-sheet-ink); }
.wp-sheet .wp-white.is-wrong .wp-cell { color: var(--ww-sheet-wrong); text-decoration: line-through; }
.wp-sheet .wp-clues { max-height: none; }
@media (min-width: 64rem) {
  .wp-sheet--21 .wp-clues { max-height: calc(var(--wp-cell) * 21 + 4rem); overflow-y: auto; }
}
.wp-sheet .wp-clue-col h3 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ww-line);
  padding-bottom: 0.3rem;
}
.wp-sheet .wp-label { grid-template-columns: 2rem 1fr; padding: 0.2rem 0.35rem; border-radius: var(--ww-radius-sm); cursor: pointer; }
.wp-sheet .wp-label:hover { background: color-mix(in oklch, var(--ww-sheet-word) 22%, transparent); }
.wp-sheet .wp-label.is-current { background: color-mix(in oklch, var(--ww-sheet-word) 38%, transparent); }
.wp-sheet .wp-label.is-current .wp-label__line { color: var(--ww-ink); }
.wp-sheet .wp-label__no { font-family: var(--ww-font); font-size: 0.85rem; font-weight: 700; color: var(--ww-ink); }

.wp-masthead {
  border-top: 3px double var(--club-brass);
  border-bottom: 1px solid var(--club-brass);
  padding: 0.6rem 0;
  margin-bottom: 0.25rem;
}
.wp-masthead__kicker {
  margin: 0;
  font-family: var(--ww-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--club-brass-lit);
}
.wp-masthead__title { margin: 0.15rem 0; font-family: var(--ww-display); font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.15; }
.wp-masthead__byline { margin: 0; font-size: 0.85rem; color: var(--ww-ink-soft); }
.wp-theme-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--club-brass);
  background: var(--ww-paper-2);
  color: var(--ww-ink);
}
.wp-theme-note h3 { margin: 0 0 0.3rem; font-family: var(--ww-display); font-size: 1rem; }
.wp-theme-note p { margin: 0; color: var(--ww-ink-soft); }

/* --- Ziggurat (word pyramid) ------------------------------------------------------ */
.wp-ziggurat-stack { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.wp-ziggurat-course { display: flex; justify-content: center; }
.wp-ziggurat-course strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ww-control-min);
  padding: 0 0.85rem;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  background: color-mix(in oklch, var(--ww-gold) 22%, var(--ww-paper));
  letter-spacing: 0.2em;
  font-weight: 700;
}
.wp-ziggurat-course--base strong { background: color-mix(in oklch, var(--ww-gold) 42%, var(--ww-paper)); }
.wp-ziggurat-input {
  min-height: var(--ww-control-min);
  width: calc(var(--course-len, 5) * 1.4rem + 0.8rem);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-paper);
  color: var(--ww-ink);
  font-family: var(--ww-mono);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0 0.4rem;
}
.wp-ziggurat-input:hover { border-color: color-mix(in oklch, var(--ww-line) 60%, var(--ww-blue)); }
.wp-ziggurat-input:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 2px; }
.wp-ziggurat form { margin-top: 0.9rem; text-align: center; }

.weave-shell { min-height: 100dvh; color: #15352f; background: #f2eee5; font-family: Inter, sans-serif; }
.weave-shell--game { background: #173c35; }
.weave-lobby, .weave-form-page { max-width: 1180px; margin: auto; padding: 44px 28px 100px; }
.weave-eyebrow { display: block; font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .18em; color: #c2411f; }
.weave-hero { min-height: 390px; overflow: hidden; position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; padding: 58px 7%; border-radius: 4px 4px 70px 4px; color: #fff8ea; background: #173c35; box-shadow: 0 20px 50px #173c3526; }
.weave-hero:after { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#f7d36b 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(90deg, transparent, #000); }
.weave-hero__copy { position: relative; z-index: 1; max-width: 650px; }
.weave-hero h1, .weave-form-card h1, .weave-result h2, .weave-opponent-turn h2, .weave-waiting h1, .weave-rules-sheet h2 { margin: 12px 0; font: 700 clamp(42px, 6vw, 76px)/.98 Fraunces, serif; letter-spacing: -.045em; }
.weave-hero p { max-width: 570px; margin: 20px 0; font-size: 18px; line-height: 1.65; color: #d6e4dc; }
.weave-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.weave-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; border: 1px solid #ffffff33; border-radius: 3px; font-weight: 700; cursor: pointer; transition: var(--ww-transition-panel); }
.weave-button:hover { transform: translateY(-2px); }
.weave-button--bright { border-color: #f4c95d; color: #173c35; background: #f4c95d; box-shadow: 5px 5px 0 #d9573f; }
.weave-button--ghost { color: inherit; background: transparent; }
/* --ghost is drawn for the dark hero: on the cream result tray its white
   hairline vanishes and the control reads as stray text between two filled
   buttons. --outline is the tray's secondary, bordered in whatever ink the
   surface is already using, so it stays a visible control on either. */
.weave-button--outline { color: inherit; background: transparent; border-color: currentColor; }
@media (hover: hover) {
  .weave-button--outline:hover { background: color-mix(in oklch, currentColor 12%, transparent); }
}
.weave-button--outline:active { transform: translateY(1px); }
.weave-hero__mark { z-index: 1; display: grid; grid-template-columns: repeat(3, 64px); gap: 9px; justify-content: center; transform: rotate(4deg); }
.weave-hero__mark span { display: grid; aspect-ratio: 1; place-items: center; border-radius: 7px; color: #173c35; background: hsl(calc(42 + var(--i) * 4), 73%, calc(70% + var(--i) * 1%)); font: 700 27px Fraunces, serif; box-shadow: 5px 6px 0 #0a2621; }
.weave-lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.weave-panel { padding: 28px; border: 1px solid #d8d0c0; border-radius: 4px; background: #faf7f0; }
.weave-panel__heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #ddd5c6; }
.weave-panel h2 { margin: 5px 0 0; font: 600 28px Fraunces, serif; }
.weave-count { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: #173c35; font: 500 13px "DM Mono"; }
.weave-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #d9573f; box-shadow: 0 0 0 7px #d9573f1d; }
.weave-match-list { display: grid; gap: 2px; margin-top: 12px; }
.weave-match { display: flex; min-height: 68px; gap: 14px; align-items: center; padding: 11px 8px; border-bottom: 1px solid #e5ded1; transition: var(--ww-transition-chrome); }
a.weave-match:hover { padding-left: 14px; color: #d9573f; }
.weave-match__orb { width: 13px; height: 13px; border: 2px solid #9caa9f; border-radius: 50%; }
.weave-match__orb.is-in_progress { border-color: #d9573f; background: #d9573f; }
.weave-match__names { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.weave-match__names span { color: #54615a; font-size: 12px; }
.weave-avatar { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: #173c35; font-weight: 800; }
.weave-avatar--coral { background: #c2411f; }.weave-avatar--mint { color: #173c35; background: #86c8ad; }
.weave-mini-button { padding: 8px 14px; border: 1px solid #173c35; border-radius: 3px; font-weight: 700; }
.weave-empty { padding: 45px 10px 25px; text-align: center; color: #54615a; }.weave-empty>span { font-size: 42px; }.weave-empty h3 { margin: 8px 0 2px; color: #173c35; font: 600 22px Fraunces; }
.weave-form-page { display: grid; min-height: 75vh; place-items: center; }.weave-form-card { max-width: 570px; padding: 48px; border: 1px solid #d8d0c0; background: #faf7f0; box-shadow: 12px 12px 0 #173c35; }.weave-form-card h1 { font-size: 52px; }.weave-toggle { display: block; margin: 30px 0; padding: 20px; border: 1px solid #d8d0c0; }.weave-toggle input { margin-right: 12px; }.weave-toggle small { display: block; margin-left: 27px; color: #728078; }

.weave-game-page { max-width: 1320px; margin: auto; padding: 22px 28px 60px; }.weave-game-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; color: #c7d9d1; font: 500 12px "DM Mono"; letter-spacing: .12em; }.weave-back,.weave-rules { padding: 8px; }.weave-rules { border-bottom: 1px solid #789188; }
.weave-scorebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 760px; margin: 0 auto 20px; color: #eff4ed; }.weave-player { display: flex; align-items: center; gap: 12px; opacity: .65; }.weave-player--right { justify-content: flex-end; }.weave-player.is-turn { opacity: 1; }.weave-player__text { display: flex; flex-direction: column; }.weave-player__text span { color: #b6cbc2; font-size: 12px; }.weave-player__text strong { font: 700 27px Fraunces; }.weave-turn-label { padding: 5px 8px; border-radius: 20px; color: #173c35; background: #f4c95d; font: 500 9px "DM Mono"; }.weave-versus { margin: 0 34px; color: #f4c95d; font-size: 24px; }
.weave-play-layout { display: grid; grid-template-columns: minmax(450px, 760px) minmax(290px, 370px); gap: 30px; justify-content: center; }.weave-board-help { display: flex; justify-content: space-between; margin-bottom: 9px; color: #9ab3aa; font-size: 11px; }.weave-board { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 8px; border-radius: 7px; background: #0b2a25; box-shadow: 0 20px 50px #06181480; }.weave-cell { position: relative; aspect-ratio: 1; border: 1px solid #31594f; border-radius: 3px; color: #eaf1e9; background: #21473f; transition: var(--ww-transition-chrome); }.weave-cell:hover,.weave-cell.is-start { z-index: 1; border-color: #f4c95d; box-shadow: inset 0 0 0 2px #f4c95d; }.weave-cell.has-letter { color: #173c35; border: 0; background: #eadfbf; box-shadow: inset 0 -4px 0 #c7b98f; }.weave-cell.is-coral { border-top: 4px solid #d9573f; }.weave-cell.is-mint { border-top: 4px solid #6bb89a; }.weave-cell>span { font: 700 clamp(18px, 3vw, 34px) Fraunces; }.weave-cell>small { position: absolute; right: 7px; bottom: 5px; font: 500 9px "DM Mono"; }.weave-cell.is-heart { color: #f4c95d; }.weave-cell.is-preview:not(.has-letter) { background: #496d55; box-shadow: inset 0 0 0 2px #f4c95d; }
.weave-tray { min-height: 500px; padding: 28px; border-radius: 5px; background: #f5f0e4; box-shadow: 12px 12px 0 #0d2d27; }.weave-rack { display: flex; gap: 6px; margin: 14px 0 24px; }.weave-tile { position: relative; flex: 1; aspect-ratio: .86; border-radius: 4px; color: #173c35; background: #efdb9f; box-shadow: 0 4px 0 #c8ad66; }.weave-tile:hover { transform: translateY(-3px); }.weave-tile span { font: 700 clamp(19px, 2vw, 27px) Fraunces; }.weave-tile small { position: absolute; right: 4px; bottom: 3px; font: 8px "DM Mono"; }.weave-word-input { display: flex; border-bottom: 2px solid #173c35; }.weave-word-input input { width: 100%; padding: 12px 4px; outline: 0; color: #173c35; background: transparent; font: 600 24px "DM Mono"; text-transform: uppercase; }.weave-word-input button { font-size: 24px; }.weave-directions { margin: 20px 0; }.weave-directions legend { margin-bottom: 8px; color: #58675f; font: 500 10px "DM Mono"; letter-spacing: .15em; }.weave-directions>label { display: inline-block; margin-right: 5px; }.weave-directions input { position: absolute; opacity: 0; }.weave-directions span { display: inline-flex; gap: 7px; padding: 8px 10px; border: 1px solid #c5bdad; border-radius: 30px; font-size: 11px; cursor: pointer; }.weave-directions input:checked+span { color: #fff; border-color: #173c35; background: #173c35; }.weave-projection { display: flex; justify-content: space-between; margin: 18px 0 10px; color: #58675f; font-size: 11px; }.weave-projection strong { color: #173c35; }.weave-projection strong.is-error { color: #b2331f; }.weave-submit { width: 100%; padding: 14px; color: #173c35; border-radius: 3px; background: #f4c95d; box-shadow: 4px 4px 0 #d9573f; font-weight: 800; }.weave-pass { display: block; margin: 16px auto 0; color: #5b6b64; font-size: 11px; text-decoration: underline; }.weave-recent { margin-top: 26px; padding-top: 20px; border-top: 1px solid #d5ccbb; }.weave-recent h3 { margin-bottom: 8px; font: 600 17px Fraunces; }.weave-history-row { display: grid; grid-template-columns: 1fr 1fr auto; padding: 6px 0; font: 500 11px "DM Mono"; }.weave-history-row small { color: #5b6b64; }.weave-history-row strong { color: #c2411f; }.weave-recent-empty { margin: 0; color: #5b6b64; font: 500 11px/1.5 "DM Mono", monospace; }
.weave-opponent-turn,.weave-result { padding: 45px 5px; text-align: center; }.weave-opponent-turn h2,.weave-result h2 { font-size: 37px; }.weave-pulse { width: 55px; aspect-ratio: 1; margin: 0 auto 30px; border: 2px solid #d9573f; border-radius: 50%; box-shadow: 0 0 0 10px #d9573f22,0 0 0 20px #d9573f11; }.weave-waiting { max-width: 700px; margin: 80px auto; text-align: center; color: #f2eee5; }.weave-waiting__rings { display: grid; width: 90px; aspect-ratio: 1; margin: 0 auto 30px; place-items: center; border: 1px solid #f4c95d; border-radius: 50%; box-shadow: 0 0 0 14px #f4c95d12,0 0 0 28px #f4c95d08; font: 700 35px Fraunces; }.weave-waiting h1 { font-size: 52px; }.weave-waiting p { color: #b7ccc3; }.weave-share-link { margin-top: 30px; padding: 15px; border: 1px dashed #718f85; font: 12px "DM Mono"; overflow-wrap: anywhere; }
.weave-rules-sheet { position: fixed; z-index: 20; top: 50%; left: 50%; width: min(480px, calc(100% - 32px)); padding: 45px; transform: translate(-50%,-50%); border-radius: 5px; background: #f5f0e4; box-shadow: 0 0 0 100vmax #071c18cc; }.weave-rules-sheet[hidden] { display: none; }.weave-rules-sheet>button { position: absolute; top: 15px; right: 20px; font-size: 24px; }.weave-rules-sheet h2 { font-size: 38px; }.weave-rules-sheet li { margin: 12px 0; color: #596a62; }
@media(max-width:900px){.weave-hero{grid-template-columns:1fr}.weave-hero__mark{display:none}.weave-lobby-grid{grid-template-columns:1fr}.weave-play-layout{grid-template-columns:1fr}.weave-tray{min-height:0}.weave-game-page{padding:15px 10px 40px}.weave-board-help{padding:0 5px}}
@media(max-width:540px){.weave-lobby{padding:24px 14px 90px}.weave-hero{min-height:440px;padding:42px 25px}.weave-hero h1{font-size:48px}.weave-panel{padding:20px 14px}.weave-play-layout{display:block}.weave-board-wrap{margin:0 -3px 16px}.weave-board{gap:2px;padding:4px}.weave-cell>small{right:3px;bottom:2px}.weave-tray{padding:23px 18px}.weave-scorebar{grid-template-columns:1fr 20px 1fr}.weave-versus{margin:0}.weave-turn-label{display:none}.weave-avatar{width:34px}.weave-player__text strong{font-size:22px}}

.weave-tile.is-used { opacity: .52; transform: translateY(3px); box-shadow: inset 0 2px 6px rgb(15 23 42 / 22%); }
.weave-tile[draggable="true"] { cursor: grab; user-select: none; }
.weave-tile:active, .weave-tile.is-dragging { cursor: grabbing; opacity: .5; transform: scale(.96); }
.weave-cell.is-dragover { z-index: 2; border-color: #f4c95d; background: #2c584e; box-shadow: inset 0 0 0 3px #f4c95d; }
.weave-word-input.is-dragover,
#wordweave_board .weave-word-input input.is-dragover { outline: 2px dashed #173c35; outline-offset: 2px; }
.weave-tile.is-dragover { outline: 2px dashed #173c35; outline-offset: 2px; }
.weave-ghost-letter { font: 700 clamp(18px, 3vw, 34px) Fraunces; color: #f4c95d; pointer-events: none; }
.weave-drag-ghost {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 50px;
  border-radius: 4px;
  color: #173c35;
  background: #efdb9f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 0 #c8ad66;
  font: 700 24px Fraunces, serif;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.weave-error { max-width: 760px; margin: 0 auto 16px; padding: 12px 16px; border: 1px solid #f0a294; border-radius: 4px; color: #7f2018; background: #fff0ec; font-weight: 700; }
.weave-cell:focus-visible { z-index: 2; outline-color: #f4c95d; }

.weave-shell :is(button, a, input):focus-visible { outline: 3px solid #176b5c; outline-offset: 3px; }
.weave-shell--game :is(button, a, input):focus-visible { outline-color: #f4c95d; }
.weave-directions input:focus-visible + span { outline: 3px solid #176b5c; outline-offset: 3px; }

.weave-shell .ww-topbar-logo { color: #f2eee5; }
.weave-shell .ww-topbar {
  height: auto;
  min-height: var(--ww-topbar);
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: .5rem;
}
/* The club chrome is translucent navy, tuned over the midnight page; over
   Wordweave's light paper it turns to grey, so here it is solid. */
.weave-shell .ww-topbar,
.weave-shell .ww-sidebar { background: var(--ww-navy); }
.weave-shell .ww-topbar-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; }
#wordweave_board .weave-word-input input {
  min-width: 0;
  color: #173c35;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.weave-shell .weave-word-input input::placeholder { color: #596a62; }

@media (max-width: 760px) {
  .weave-shell .ww-topbar-badge { display: none; }
  .weave-shell .ww-topbar-actions { width: 100%; justify-content: flex-end; gap: .5rem; }
  .weave-player__text { min-width: 0; }
  .weave-player__text span { overflow-wrap: anywhere; }
}

@media (prefers-contrast: more) {
  .weave-cell { border-width: 2px; }
  .weave-player { opacity: .82; }
  .weave-player.is-turn { outline: 2px solid #f4c95d; outline-offset: 4px; }
}

@media (forced-colors: active) {
  .weave-cell, .weave-tile, .weave-button, .weave-submit { border: 2px solid ButtonText; forced-color-adjust: auto; }
  .weave-cell.is-coral { border-top: 6px double Highlight; }
  .weave-cell.is-mint { border-top: 6px solid Highlight; }
  .weave-cell.is-dragover { outline: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .weave-shell *, .weave-shell *::before, .weave-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .weave-button:hover, .weave-tile:hover, .weave-tile.is-dragging { transform: none; }
}
.weave-turn-outs { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media(max-width:520px){.weave-turn-outs{grid-template-columns:1fr}}
.weave-shell--game .weave-eyebrow,
.weave-hero .weave-eyebrow,
.weave-waiting .weave-eyebrow { color: #f6a894; }
.weave-tray .weave-eyebrow { color: #c2411f; }

/* Turn clock and bag count. */
.weave-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}

.weave-timer .ww-timer-value,
.weave-bag {
  font-variant-numeric: tabular-nums;
}

.weave-bag {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
/* WordWrangle game styles - Modern muted blue theme */

.wordwrangle-header {
  background-color: #3b82f6;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  text-align: center;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
}

.wordwrangle-logo {
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Letter tracker styles */
.letter-btn .btn {
  background-color: #f3f4f6;
  color: #1e40af;
  border: 2px solid #93c5fd;
  border-radius: 0.5rem;
  transition: var(--ww-transition-panel);
}

.letter-btn .btn:hover {
  transform: scale(1.05);
  background-color: #dbeafe;
  border-color: #60a5fa;
}

.letter-btn.eliminated .btn {
  position: relative;
}

.letter-btn.eliminated .btn::before,
.letter-btn.eliminated .btn::after {
  content: '';
  position: absolute;
  background-color: #ef4444;
  width: 80%;
  height: 3px;
  top: 50%;
  border-radius: 1px;
}

.letter-btn.eliminated .btn::before {
  transform: translateY(-50%) rotate(45deg);
}

.letter-btn.eliminated .btn::after {
  transform: translateY(-50%) rotate(-45deg);
}

.letter-btn.selected .btn {
  background-color: #dbeafe;
  border-color: #3b82f6;
  box-shadow: 0 0 5px #3b82f6;
}

/* Letter tracker row (single line, scroll if needed) */
.ww-letter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.ww-letter-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* WordWrangle scorecard styles */
.wordwrangle-scorecard {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.wordwrangle-scorecard th, 
.wordwrangle-scorecard td {
  border: 1px solid #bfdbfe;
  padding: 0.75rem;
  text-align: center;
}

.wordwrangle-scorecard th {
  background-color: #3b82f6;
  color: white;
  font-weight: 500;
}

.wordwrangle-scorecard .score-column {
  background-color: #2563eb;
  color: white;
  font-weight: bold;
}

.wordwrangle-scorecard .letter-cell {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f3f4f6;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.wordwrangle-scorecard .jots-cell {
  background-color: #dbeafe;
  color: #1e40af;
  font-weight: 500;
}

/* Guess history styles */
.guess-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  transition: var(--ww-transition-panel);
}

.guess-item:hover {
  background-color: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.guess-word {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #1e40af;
}

.guess-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6;
  color: white;
  font-weight: bold;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 1rem;
}

.matches-label {
  margin-left: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
}
 :root {
  /* Worduel's walnut table and ivory pieces, shared with its library cover. */
  --ww-wood-ink: #efe7d6;
  --ww-wood-muted: #cabcaa;
  /* Ink's printed sheet: a newspaper page stays newsprint in either theme,
     so these match in z-visual.css and zz-midnight.css. */
  --ww-sheet: oklch(0.975 0.008 85);
  --ww-sheet-ink: oklch(0.17 0.01 260);
  --ww-sheet-soft: oklch(0.42 0.01 260);
  --ww-sheet-rule: oklch(0.6 0.01 260);
  --ww-sheet-word: oklch(0.9 0.05 235);
  --ww-sheet-cursor: oklch(0.88 0.14 95);
  --ww-sheet-wrong: oklch(0.52 0.19 28);
  --ww-wood-recess: #1c150e;
  --ww-wood-edge: #79613d;
  --ww-tile-face: #efe7d6;
  --ww-tile-edge: #cfc3a8;
  --ww-tile-ink: #1c150e;
  --ww-pencil-out: #862639;
  --ww-pencil-maybe: #1f5f4e;
  /* Score-sheet paper stays light in both themes. */
  --ww-sheet-muted: #62564b;
  --ww-sheet-score: #435168;
  --ww-sheet-tile: #234878;
  --ww-sheet-tile-ink: #f7f4ed;
  --ww-weave-paper: #f5f0e4;
  /* Letter-tracker marks: the keyboard key and every score-sheet tile that
     carries the same letter wear the same mark. */
  --ww-mark-out: oklch(0.72 0.12 25);
  --ww-mark-out-ink: var(--ww-paper);
  --ww-mark-maybe: var(--ww-blue-deep);
  --ww-mark-maybe-ink: var(--ww-paper);
  --ww-mark-in: var(--ww-emerald-deep);
  --ww-mark-in-ink: var(--ww-paper);
  color-scheme: light;
  --ww-ink: oklch(0.23 0.04 265);
  --ww-ink-soft: oklch(0.38 0.03 265);
  --ww-paper: oklch(0.985 0.01 260);
  --ww-paper-2: oklch(0.96 0.025 265);
  --ww-line: color-mix(in oklch, var(--ww-ink) 10%, transparent);
  --ww-blue: oklch(0.62 0.19 255);
  --ww-blue-deep: oklch(0.51 0.23 277);
  --ww-navy: #0f172a;
  --ww-navy-2: #1e293b;
  --ww-emerald: oklch(0.72 0.17 155);
  --ww-emerald-deep: oklch(0.52 0.14 155);
  --ww-gold: oklch(0.82 0.16 85);
  --ww-violet: oklch(0.58 0.2 277);
  --ww-sky: oklch(0.68 0.14 250);
  --ww-danger: oklch(0.64 0.2 25);
  /* State text, dark enough to read on paper. Midnight redefines all three;
     without a light-theme value a rule using them resolved to nothing. */
  --ww-success-text: oklch(0.48 0.13 165);
  --ww-warning-text: oklch(0.5 0.12 75);
  --ww-danger-text: oklch(0.5 0.18 25);
  --ww-radius: 1.15rem;
  --ww-radius-sm: 0.85rem;
  --ww-shadow: 0 18px 50px oklch(0.3 0.06 265 / 0.14);
  --ww-owner-1-bg: #14243b;
  --ww-owner-1-ink: #ffffff;
  --ww-owner-1-border: rgba(201, 164, 76, 0.4);
  --ww-owner-2-bg: #f5eedf;
  --ww-owner-2-ink: #1c150e;
  --ww-owner-2-border: rgba(44, 26, 14, 0.35);
  --ww-crt-scanline: rgba(0, 0, 0, 0.16);
  --ww-neon-glow: rgba(85, 217, 174, 0.25);
  --ww-arcade-bezel: #1b263b;

  /* Motion. Chrome moves quietly; the games are allowed character. The four
     easings were already in the sheets as four hand-typed beziers spelled three
     different ways -- naming them is what stops the fifth from being invented.
     --ww-ease-play is the only one that overshoots: cards, tiles and chips may
     use it, a dropdown or a toast may not. Exits run at ~75% of the enter. */
  --ww-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ww-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ww-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ww-ease-play: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --ww-dur-micro: 120ms;
  --ww-dur-short: 220ms;
  --ww-dur-long: 420ms;

  /* The two lists that replaced `transition: all`. `all` animates whatever
     happens to change, which on a control meant it was also watching the
     layout box -- and it silently pretended to animate the gradient
     backgrounds, which do not interpolate. Naming the six properties a control
     actually shifts is both cheaper and more honest. Chrome is for buttons,
     links and chips; panel is for cards and tiles, which are larger and read
     better a little slower. */
  --ww-transition-chrome:
    color var(--ww-dur-micro) var(--ww-ease-out),
    background-color var(--ww-dur-micro) var(--ww-ease-out),
    border-color var(--ww-dur-micro) var(--ww-ease-out),
    box-shadow var(--ww-dur-micro) var(--ww-ease-out),
    opacity var(--ww-dur-micro) var(--ww-ease-out),
    transform var(--ww-dur-micro) var(--ww-ease-out);
  --ww-transition-panel:
    color var(--ww-dur-short) var(--ww-ease-out),
    background-color var(--ww-dur-short) var(--ww-ease-out),
    border-color var(--ww-dur-short) var(--ww-ease-out),
    box-shadow var(--ww-dur-short) var(--ww-ease-out),
    opacity var(--ww-dur-short) var(--ww-ease-out),
    transform var(--ww-dur-short) var(--ww-ease-out);
  --ww-font: "Outfit", "Inter", ui-rounded, system-ui, sans-serif;
  --ww-display: "Fraunces", "Outfit", ui-serif, Georgia, serif;
  --ww-mono: "ui-monospace", "Cascadia Code", "SF Mono", monospace;
  --ww-dock: 4.35rem;
  --ww-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ww-safe-left: env(safe-area-inset-left, 0px);
  --ww-safe-right: env(safe-area-inset-right, 0px);
  --ww-topbar: 4.15rem;
  /* How much of a tucked top bar or sidebar stays on screen as its handle. */
  --ww-chrome-lip: 6px;
}

html.ww-root {
  hanging-punctuation: first last;
  interpolate-size: allow-keywords;
}

.ww-body,
body {
  min-height: 100dvh;
  font-family: var(--ww-font);
  color: var(--ww-ink);
  background:
    radial-gradient(1200px 700px at 8% -10%, oklch(0.9 0.1 255 / 0.55), transparent 55%),
    radial-gradient(900px 600px at 108% 0%, oklch(0.88 0.12 277 / 0.45), transparent 50%),
    radial-gradient(700px 500px at 50% 120%, oklch(0.93 0.06 240 / 0.4), transparent 55%),
    var(--ww-paper);
  background-attachment: fixed;
}

.ww-body #main-content {
  padding-bottom: calc(var(--ww-dock) + var(--ww-safe-bottom) + 0.75rem);
}

@media (min-width: 769px) {
  .ww-body #main-content {
    padding-bottom: 0;
  }
}

h1, h2, .ww-display {
  font-family: var(--ww-display);
  letter-spacing: -0.03em;
}

/* ===== Wordle-style letter slots =====
 *
 * The tiles are the field. A decorative tile row above a separate text box
 * asks a player to look at one thing and type into another, and it was the
 * only control in the collection that offered two affordances for one
 * decision. The real <input> is still here -- labeled, focusable, and the
 * thing Capybara and screen readers address -- but it is laid over the tiles
 * with transparent text and no caret of its own, so what a player sees, taps
 * and types into is one object. The active tile carries the caret instead.
 */

.ww-slots {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.ww-slots-stack {
  position: relative;
  width: min(100%, 20rem);
}

.ww-slots-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.6rem, 1fr));
  gap: 0.4rem;
  width: 100%;
}

.ww-slot {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  border: 2px solid color-mix(in oklch, var(--ww-ink) 18%, white);
  background: color-mix(in oklch, white 82%, var(--ww-paper));
  font-family: var(--ww-mono);
  font-weight: 800;
  font-size: clamp(1.15rem, 4vw, 1.65rem);
  text-transform: uppercase;
  color: var(--ww-ink);
  box-shadow: inset 0 -3px 0 oklch(0.8 0.02 250 / 0.5);
  transition:
    transform var(--ww-dur-short) var(--ww-ease-out),
    border-color var(--ww-dur-short) var(--ww-ease-out),
    background var(--ww-dur-short) var(--ww-ease-out),
    box-shadow var(--ww-dur-short) var(--ww-ease-out);
}

.ww-slot.is-filled {
  border-color: var(--ww-ink);
  background: white;
  transform: scale(1.04);
  animation: ww-slot-pop 180ms var(--ww-ease-play);
}

/* The caret. `is-active` marks the next empty tile; it only blinks while the
   field behind it actually holds focus, so an unfocused form is not still
   claiming to be taking input. */
.ww-slots-stack:focus-within .ww-slot.is-active {
  border-color: var(--ww-blue-deep);
  box-shadow: 0 0 0 4px oklch(0.62 0.19 255 / 0.28);
}

.ww-slots-stack:focus-within .ww-slot.is-active::after {
  content: "";
  width: 2px;
  height: 55%;
  border-radius: 2px;
  background: var(--ww-blue-deep);
  animation: ww-caret-blink 1.06s steps(1, end) infinite;
}

/* Unfocused, the next tile is merely indicated -- enough to say "start here"
   without imitating a live cursor. */
.ww-slot.is-active {
  border-color: color-mix(in oklch, var(--ww-blue-deep) 55%, white);
}

.ww-slot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  box-shadow: none;
  color: transparent;
  caret-color: transparent;
  font-family: var(--ww-mono);
  font-size: clamp(1.15rem, 4vw, 1.65rem);
  text-align: center;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  cursor: text;
  /* iOS refuses to zoom a field it can read at 16px or more; the transparent
     text is still measured. */
  -webkit-text-fill-color: transparent;
}

.ww-slot-input::placeholder { color: transparent; }
.ww-slot-input::selection { background: transparent; }

.ww-slot-input:focus {
  outline: none;
  box-shadow: none;
}

.ww-slot-input:disabled {
  cursor: default;
}

.ww-slots-stack:has(.ww-slot-input:disabled) .ww-slot { opacity: 0.55; }

@keyframes ww-slot-pop {
  from { transform: scale(1.18); }
  to { transform: scale(1.04); }
}

@keyframes ww-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ===== Marketing hero ===== */

.ww-home {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.ww-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

.ww-wordmark-tiles {
  display: flex;
  gap: 0.18rem;
}

.ww-wordmark-tile {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.28rem;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: white;
  background: var(--ww-ink);
}

.ww-wordmark-tile:nth-child(2) { background: var(--ww-blue); }
.ww-wordmark-tile:nth-child(4) { background: var(--ww-blue-deep); }

.ww-home-nav-link {
  color: var(--ww-ink-soft);
  font-weight: 700;
  text-decoration: none;
}

.ww-home-nav-link:hover { color: var(--ww-blue-deep); }

.ww-demo-board {
  display: grid;
  gap: 0.4rem;
  justify-content: center;
  margin-inline: auto;
}

.ww-demo-row {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}

.ww-demo-tile {
  width: clamp(2.4rem, 8vw, 3.15rem);
  height: clamp(2.4rem, 8vw, 3.15rem);
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: var(--ww-mono);
  color: white;
  background: var(--ww-ink);
  animation: ww-demo-in 0.32s var(--ww-ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
  box-shadow: 0 10px 20px oklch(0.3 0.05 260 / 0.18);
}

.ww-demo-tile.is-hit { background: var(--ww-blue); }
.ww-demo-tile.is-hot { background: var(--ww-blue-deep); }
.ww-demo-tile.is-miss { background: oklch(0.55 0.03 265); }

.ww-demo-score {
  width: clamp(2.4rem, 8vw, 3.15rem);
  height: clamp(2.4rem, 8vw, 3.15rem);
  margin-left: 0.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--ww-blue);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 10px 20px oklch(0.3 0.05 260 / 0.18);
  animation: ww-demo-in 0.32s var(--ww-ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.ww-demo-score--hot { background: var(--ww-blue-deep); }

@keyframes ww-demo-in {
  from { opacity: 0; transform: translateY(0.45rem) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ww-demo-loop {
  0%, 8% { opacity: 0; transform: translateY(0.45rem) scale(0.94); }
  14%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  82%, 100% { opacity: 0; transform: translateY(-0.2rem) scale(0.98); }
}

.ww-demo-board--loop .ww-demo-tile,
.ww-demo-board--loop .ww-demo-score {
  animation: ww-demo-loop 4.8s var(--ww-ease-out) infinite;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.ww-demo-board--loop .ww-demo-score--hot {
  box-shadow: 0 0 0 0 oklch(0.55 0.18 250 / 0.45);
  animation: ww-demo-loop 4.8s var(--ww-ease-out) infinite,
             ww-demo-hot-pulse 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 45ms), 1.1s;
}

@keyframes ww-demo-hot-pulse {
  0%, 100% { box-shadow: 0 0 8px oklch(0.55 0.18 250 / 0.35); }
  50% { box-shadow: 0 0 18px oklch(0.55 0.18 250 / 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .ww-demo-board--loop .ww-demo-tile,
  .ww-demo-board--loop .ww-demo-score,
  .ww-demo-board--loop .ww-demo-score--hot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 520px) {
  .ww-home { padding-inline: 1rem; }
  .ww-home-nav-optional { display: none; }
  .ww-home h1 { font-size: clamp(2.35rem, 12vw, 3.15rem); }
}

.ww-play-card {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--ww-radius) + 0.2rem);
  padding: 1.4rem;
  background: color-mix(in oklch, white 78%, transparent);
  border: 1px solid color-mix(in oklch, white 40%, var(--ww-line));
  box-shadow: var(--ww-shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  transition:
    transform var(--ww-dur-short) var(--ww-ease-out),
    box-shadow var(--ww-dur-short) var(--ww-ease-out);
}

.ww-play-card:hover {
  transform: translateY(-4px) rotate(-0.4deg);
}

.ww-play-card--ghost:hover {
  transform: translateY(-4px) rotate(0.4deg);
}

.ww-play-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.78 0.16 255 / 0.45), transparent 70%);
  pointer-events: none;
}

.ww-kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ww-blue-deep);
}

/* ===== App chrome ===== */

.ww-topbar,
.ww-game-topbar {
  height: var(--ww-topbar);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--ww-topbar) + env(safe-area-inset-top));
  background: color-mix(in oklch, var(--ww-navy) 70%, transparent);
  backdrop-filter: blur(18px) saturate(1.35);
  border-bottom-color: oklch(1 0 0 / 0.08);
}

.ww-topbar-logo {
  font-family: var(--ww-display);
  letter-spacing: -0.04em;
  text-transform: none;
  font-size: 1.35rem;
}

.ww-dock {
  display: none;
}

@media (max-width: 768px) {
  .ww-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(0.45rem + var(--ww-safe-bottom));
    z-index: 120;
    padding: 0.4rem 0.3rem;
    border-radius: 1.2rem;
    background: color-mix(in oklch, var(--ww-navy) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 16px 40px oklch(0.2 0.04 260 / 0.35);
    border: 1px solid oklch(1 0 0 / 0.1);
  }

  .ww-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.45rem 0.2rem;
    color: oklch(0.86 0.02 250);
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 0.8rem;
  }

  .ww-dock-item i {
    font-size: 1.05rem;
  }

  .ww-dock-item.is-active {
    color: white;
    background: oklch(0.55 0.2 255 / 0.35);
  }

  .ww-app {
    min-height: 100dvh;
  }

  .ww-main-inner {
    padding-bottom: 1rem;
  }
}

.ww-app--match #main-content,
.ww-app--match {
  padding-bottom: 0;
}

/* ===== Lobby / cards ===== */

.ww-lobby-hero {
  background:
    radial-gradient(700px 280px at 10% 0%, oklch(0.55 0.2 255 / 0.4), transparent 55%),
    radial-gradient(500px 240px at 90% 120%, oklch(0.5 0.22 277 / 0.4), transparent 50%),
    linear-gradient(160deg, var(--ww-navy) 0%, var(--ww-navy-2) 100%);
  border-radius: calc(var(--ww-radius) + 0.25rem);
  border: 1px solid oklch(1 0 0 / 0.08);
  box-shadow: var(--ww-shadow);
}

.ww-lobby-section,
.ww-panel,
.ww-game-panel,
.ww-card {
  background: color-mix(in oklch, white 78%, transparent);
  backdrop-filter: blur(16px);
  border-color: color-mix(in oklch, white 50%, var(--ww-line));
  border-radius: var(--ww-radius);
}

.ww-card {
  transition:
    transform var(--ww-dur-short) var(--ww-ease-out),
    box-shadow var(--ww-dur-short) var(--ww-ease-out);
}

.ww-btn {
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.ww-btn-primary {
  background: var(--ww-blue);
  box-shadow: 0 10px 24px oklch(0.51 0.23 277 / 0.32);
}

.ww-btn-secondary {
  background: #eef2ff;
  color: #3730a3;
}

.ww-guess-input {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-family: var(--ww-mono);
  font-weight: 800;
}

/* Mobile match layout: board first, sticky composer */
@media (max-width: 1024px) {
  .ww-game-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .ww-grid-board { order: 1; }
  .ww-grid-tracker { order: 2; }
  .ww-grid-status { order: 3; }
  .ww-grid-chat { order: 4; }

  /* Worduel's guess and word forms sit at the top of the phone board, with
     the on-screen keyboard inside the guess form; a sticky, frosted card here
     only framed them in a pale box against the midnight panel. */
  #guess_form,
  #word_form {
    border-radius: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ww-demo-tile,
  .ww-demo-score,
  .ww-slot.is-filled,
  .ww-slots-stack:focus-within .ww-slot.is-active::after,
  .ww-ghost-tiles .ww-result-tile,
  .ww-card--pulse {
    animation: none !important;
  }
}

@view-transition {
  navigation: auto;
}

.ww-ad-slot {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px dashed color-mix(in oklch, var(--ww-ink) 22%, transparent);
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, white 72%, transparent);
  color: var(--ww-ink-soft);
}

.ww-ad-label {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--ww-paper-2);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ww-ad-copy { display: grid; font-size: 0.8rem; }
.ww-ad-copy strong { color: var(--ww-ink); }

.ww-optional-panel {
  overflow: hidden;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: color-mix(in oklch, white 72%, transparent);
}

.ww-optional-panel > summary {
  cursor: pointer;
  list-style-position: inside;
}

.ww-optional-panel .ww-rtc {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ww-ghost-choice-guide {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: color-mix(in oklch, var(--ww-violet) 9%, white);
  color: var(--ww-ink-soft);
  font-size: 0.85rem;
}

.ww-ghost-choice-guide strong { color: var(--ww-ink); }

.ww-insertion-picker {
  width: min(100%, 30rem);
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.ww-insertion-option { cursor: pointer; }
.ww-insertion-option input { position: absolute; opacity: 0; }
.ww-insertion-option span {
  display: block;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ww-line);
  border-radius: 0.7rem;
  background: white;
  color: var(--ww-ink-soft);
}
.ww-insertion-option input:checked + span {
  border-color: var(--ww-violet);
  background: color-mix(in oklch, var(--ww-violet) 12%, white);
  color: var(--ww-ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ww-violet) 18%, transparent);
}
.ww-insertion-option input:focus-visible + span {
  outline: 3px solid color-mix(in oklch, var(--ww-violet) 25%, transparent);
  outline-offset: 2px;
}

.ww-drawing-shell {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.ww-drawing-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 62vh;
  border: 2px solid color-mix(in oklch, var(--ww-ink) 18%, white);
  border-radius: 1rem;
  background: white;
  box-shadow: inset 0 0 30px oklch(0.8 0.02 250 / 0.22);
  touch-action: none;
}

.ww-drawing-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem;
  margin-top: 0.6rem;
  border-radius: 0.8rem;
  background: var(--ww-paper-2);
}

.ww-drawing-tools label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.ww-drawing-palette {
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(7, 20, 38, 0.18);
}

.ww-drawing-swatch {
  width: 2.75rem;
  min-height: 2.75rem;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(7, 20, 38, 0.55);
}

.ww-drawing-swatch.is-selected {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px #60a5fa, 0 4px 10px rgba(7, 20, 38, 0.3);
}

.ww-drawing-swatch:last-child {
  background: linear-gradient(135deg, #fff 42%, #dc2626 44% 54%, #fff 56%);
}

html.ww-reduced-motion {
  @view-transition {
    navigation: none;
  }
}

/* Match pages don't need dock padding */
.ww-body #main-content:has(.ww-game-topbar) {
  padding-bottom: 0;
}

.ww-slots--single .ww-slots-stack { width: 4.2rem; }

.ww-slots-row--one {
  grid-template-columns: 1fr;
  width: 100%;
}

.ww-slot-input--single {
  letter-spacing: 0;
  text-indent: 0;
}

.ww-keyboard {
  display: grid;
  gap: 0.35rem;
}

.ww-keyboard-row {
  display: flex;
  justify-content: center;
  gap: 0.28rem;
}

.ww-key {
  flex: 1 1 0;
  max-width: 2.6rem;
}

.ww-key-cap {
  width: 100%;
  min-height: 2.35rem;
  border: 0;
  border-radius: 0.45rem;
  background: color-mix(in oklch, white 70%, var(--ww-paper-2));
  box-shadow: inset 0 -2px 0 oklch(0.8 0.02 250 / 0.55);
  font-family: var(--ww-mono);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  touch-action: manipulation;
}

.ww-key.eliminated .ww-key-cap {
  background: var(--ww-mark-out);
  color: var(--ww-mark-out-ink);
  text-decoration: line-through;
}

.ww-key.selected .ww-key-cap {
  background: var(--ww-mark-maybe);
  color: var(--ww-mark-maybe-ink);
}

.ww-ghost-tiles .ww-result-tile {
  width: clamp(2.4rem, 9vw, 3.4rem);
  height: clamp(2.4rem, 9vw, 3.4rem);
  border-radius: 0.7rem;
  background: var(--ww-ink);
  border-color: var(--ww-ink);
  color: white;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  animation: ww-letter-land 220ms ease-out both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.ww-vs-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-radius: var(--ww-radius);
  background: color-mix(in oklch, white 70%, transparent);
  border: 1px solid var(--ww-line);
}

.ww-player-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ww-player-chip .ww-match-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}

.ww-card--pulse {
  animation: ww-turn-pulse 2.4s ease-in-out infinite;
}

.ww-main {
  background: transparent;
}

.ww-game-main {
  background: transparent;
}

button,
.ww-btn,
.ww-key-cap {
  touch-action: manipulation;
}

.ww-kicker--on-dark {
  color: oklch(0.82 0.1 255);
}

.ww-rank-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ww-rank-table th {
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-soft);
  border-bottom: 1px solid var(--ww-line);
}

.ww-rank-table td {
  padding: 0.9rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklch, var(--ww-line) 70%, transparent);
}

/* On a phone the five columns did not fit and the last two sat off the edge
   of a scroller nobody could see. The cells tighten first; below 26rem the win
   rate goes, since the record beside it already says it, and so does the
   initial badge, which only repeats the name. */
@media (max-width: 30rem) {
  .ww-rank-table th, .ww-rank-table td { padding-inline: .5rem; }
  .ww-rank-table th { letter-spacing: .06em; }
}
@media (max-width: 26rem) {
  .ww-rank-table--rated :is(th, td):nth-child(5) { display: none; }
  .ww-rank-table .ww-match-avatar { display: none; }
}

.ww-rank-row--you {
  background: color-mix(in oklch, var(--ww-blue) 14%, white);
}

.ww-rank {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-weight: 800;
  background: color-mix(in oklch, var(--ww-paper-2) 80%, white);
}

.ww-rank--1 {
  background: oklch(0.86 0.16 85);
  color: oklch(0.28 0.06 70);
}

.ww-rank--2 {
  background: oklch(0.88 0.02 250);
  color: oklch(0.3 0.03 250);
}

.ww-rank--3 {
  background: oklch(0.82 0.08 55);
  color: oklch(0.3 0.06 50);
}

.ww-bank-figure {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.ww-bank-figure--up {
  color: var(--ww-emerald-deep);
}

.ww-bank-figure--down {
  color: oklch(0.58 0.14 55);
}

.ww-ghost-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.ww-ghost-preview-tile {
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.4rem;
  background: var(--ww-ink);
  color: white;
  font-family: var(--ww-mono);
  font-weight: 800;
  font-size: 0.85rem;
}

.ww-lobby-hero .ww-btn-secondary {
  background: oklch(1 0 0 / 0.12);
  color: white;
  border: 1px solid oklch(1 0 0 / 0.16);
}

/* Draw & Guess: keyboard drawing help and the shared guess feed. */
.ww-drawing-canvas:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.ww-drawing-keys {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.8rem;
  background: var(--ww-paper-2);
  font-size: 0.78rem;
  line-height: 1.7;
  text-align: center;
}

.ww-drawing-keys kbd {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid color-mix(in oklch, var(--ww-ink) 25%, white);
  border-bottom-width: 2px;
  border-radius: 0.35rem;
  background: white;
  font-family: inherit;
  font-weight: 700;
}

.ww-draw-feed {
  margin-top: 1rem;
  text-align: center;
}

.ww-draw-feed-title {
  font-size: 0.85rem;
  font-weight: 700;
}

.ww-draw-feed-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.4rem;
}

.ww-draw-feed-count {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: color-mix(in oklch, var(--ww-ink) 65%, white);
}
/* WordWrangle Midnight — one restrained, tactile visual system.
   Loaded last so legacy screens inherit the same finish without template churn. */

 :root {
  /* Worduel's walnut table and ivory pieces, shared with its library cover. */
  --ww-wood-ink: #efe7d6;
  --ww-wood-muted: #cabcaa;
  /* Ink's printed sheet: a newspaper page stays newsprint in either theme,
     so these match in z-visual.css and zz-midnight.css. */
  --ww-sheet: oklch(0.975 0.008 85);
  --ww-sheet-ink: oklch(0.17 0.01 260);
  --ww-sheet-soft: oklch(0.42 0.01 260);
  --ww-sheet-rule: oklch(0.6 0.01 260);
  --ww-sheet-word: oklch(0.9 0.05 235);
  --ww-sheet-cursor: oklch(0.88 0.14 95);
  --ww-sheet-wrong: oklch(0.52 0.19 28);
  --ww-wood-recess: #1c150e;
  --ww-wood-edge: #79613d;
  --ww-tile-face: #efe7d6;
  --ww-tile-edge: #cfc3a8;
  --ww-tile-ink: #1c150e;
  --ww-pencil-out: #862639;
  --ww-pencil-maybe: #1f5f4e;
  /* Score-sheet paper stays light in both themes. */
  --ww-sheet-muted: #62564b;
  --ww-sheet-score: #435168;
  --ww-sheet-tile: #234878;
  --ww-sheet-tile-ink: #f7f4ed;
  --ww-weave-paper: #f5f0e4;
  --ww-mark-out: #642735;
  --ww-mark-out-ink: #ffe5e7;
  --ww-mark-maybe: #9fc4ff;
  --ww-mark-maybe-ink: #071426;
  --ww-mark-in: var(--ww-emerald-deep);
  --ww-mark-in-ink: #04140e;
  color-scheme: dark;
  --ww-ink: #f7f4ed;
  --ww-ink-soft: #aebbd2;
  --ww-paper: #071426;
  --ww-paper-2: #0b1b31;
  --ww-line: rgba(171, 194, 225, 0.16);
  --ww-blue: #4f91ff;
  --ww-blue-deep: #76a9ff;
  --ww-navy: #06111f;
  --ww-navy-2: #0b1c34;
  --ww-emerald: #55d9ae;
  --ww-emerald-deep: #35b98f;
  --ww-gold: #e5bf72;
  --ww-violet: #a996ff;
  --ww-sky: #77b7ff;
  --ww-danger: #ff7d86;
  --ww-radius: 1rem;
  --ww-radius-sm: .7rem;
  --ww-shadow: 0 24px 65px rgba(0, 4, 12, .34), 0 2px 8px rgba(0, 4, 12, .24);
  --ww-owner-1-bg: #112036;
  --ww-owner-1-ink: #f8fafc;
  --ww-owner-1-border: rgba(201, 164, 76, 0.45);
  --ww-owner-2-bg: #f2ebd9;
  --ww-owner-2-ink: #19130c;
  --ww-owner-2-border: rgba(44, 26, 14, 0.4);
  --ww-crt-scanline: rgba(0, 0, 0, 0.28);
  --ww-neon-glow: rgba(85, 217, 174, 0.35);
  --ww-arcade-bezel: #0b1422;
  --ww-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ww-display: Georgia, "Times New Roman", serif;
}

html { background: #06111f; }

.ww-body,
body {
  color: var(--ww-ink);
  background:
    radial-gradient(70rem 36rem at 7% -8%, rgba(33, 94, 174, .32), transparent 64%),
    radial-gradient(48rem 32rem at 100% 8%, rgba(25, 61, 115, .24), transparent 68%),
    linear-gradient(180deg, #08172a 0%, #06111f 46%, #050d18 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

h1, h2, .ww-display {
  font-family: var(--ww-display);
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* App chrome */
.ww-topbar,
.ww-game-topbar {
  /* Translucent enough that the room shows through as colour under the blur,
     never so thin that a headline scrolling under it competes with the nav. */
  background: color-mix(in oklch, var(--ww-navy) 70%, transparent);
  border-bottom: 1px solid rgba(184, 207, 238, .13);
  box-shadow: 0 8px 30px rgba(0, 4, 12, .18);
  backdrop-filter: blur(22px) saturate(1.15);
}

.ww-topbar-logo:hover,
.ww-topbar-link:hover { color: #fff; }

.ww-topbar-badge {
  color: #9ebae4;
  background: rgba(106, 151, 218, .1);
  border: 1px solid rgba(133, 177, 239, .2);
  border-radius: 999px;
  letter-spacing: .12em;
}

.ww-topbar-link {
  color: #9cabc1;
  border-radius: .55rem;
  font-weight: 650;
}

.ww-topbar-link--active {
  color: #fff;
  background: rgba(104, 157, 235, .13);
  box-shadow: inset 0 0 0 1px rgba(139, 181, 241, .14);
}

.ww-topbar-stat,
.ww-topbar-user {
  background: rgba(255,255,255,.045);
  border-color: rgba(194, 214, 242, .12);
}

.ww-topbar-avatar {
  color: #081427;
  background: linear-gradient(145deg, #f5d99d, #c89945);
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}

.ww-icon-btn,
.ww-menu-toggle {
  color: #afbdd1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(190, 211, 240, .12);
  border-radius: .65rem;
}

.ww-icon-btn:hover,
.ww-menu-toggle:hover { color: #fff; background: rgba(255,255,255,.09); }

/* An engaged preference -- sound muted, motion reduced -- wears the state on
   the button. The glyph swap alone is a few pixels and reads as nothing
   happening. */
.ww-icon-btn[aria-pressed="true"] {
  color: #ffe6a8;
  background: rgba(200, 153, 69, .22);
  border-color: rgba(245, 217, 157, .55);
}

.ww-icon-btn[aria-pressed="true"]:hover { color: #fff; background: rgba(200, 153, 69, .32); }

.ww-sidebar {
  background: rgba(6, 17, 31, .86);
  border-right-color: var(--ww-line);
}

.ww-sidebar-section { border-bottom-color: var(--ww-line); }
.ww-sidebar-title { color: var(--ww-ink-soft); letter-spacing: .14em; }
.ww-sidebar-link { color: #a9b6c9; border-radius: .55rem; }
.ww-sidebar-link:hover { color: #fff; background: rgba(91, 141, 213, .11); }

.ww-main,
.ww-game-main { background: transparent; }

/* Buttons: jewel-like, not loud. */
.ww-btn,
.ww-sidebar-cta,
button.ww-quick-wager,
.ww-filter-chip {
  min-height: 2.75rem;
  padding: .7rem 1.1rem;
  border-radius: .65rem;
  border: 1px solid transparent;
  font-weight: 720;
  letter-spacing: -.01em;
  line-height: 1;
  box-shadow: none;
  transition: transform var(--ww-dur-micro) var(--ww-ease-out), box-shadow var(--ww-dur-micro) var(--ww-ease-out), border-color var(--ww-dur-micro) var(--ww-ease-out), background var(--ww-dur-micro) var(--ww-ease-out), color var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-btn-primary,
.ww-sidebar-cta {
  color: #071325;
  background: linear-gradient(180deg, #8bb9ff 0%, #5d98ee 48%, #4b82d2 100%);
  border-color: rgba(202, 224, 255, .48);
  box-shadow: inset 0 1px rgba(255,255,255,.58), inset 0 -1px rgba(3,31,71,.25), 0 7px 18px rgba(28, 91, 177, .22);
}

.ww-sidebar-cta + .ww-sidebar-cta { margin-top: .5rem; }

.ww-sidebar-cta--secondary {
  color: #dce8fa;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  border-color: rgba(178, 204, 240, .2);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  font-weight: 650;
}

.ww-btn-secondary,
.ww-btn-xs,
button.ww-quick-wager,
.ww-filter-chip {
  color: #dce8fa;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border-color: rgba(178, 204, 240, .17);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.ww-btn-tertiary {
  color: #a9b9ce;
  background: transparent;
  border-color: rgba(174, 199, 232, .1);
  box-shadow: none;
}

.ww-btn-tertiary:hover {
  color: #f6f1e7;
  background: rgba(255,255,255,.025);
  border-color: rgba(205, 177, 116, .28);
}

.ww-btn:hover,
.ww-sidebar-cta:hover,
button.ww-quick-wager:hover,
.ww-filter-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(0, 5, 15, .25);
}

.ww-btn:active,
.ww-sidebar-cta:active,
button.ww-quick-wager:active { transform: translateY(1px); box-shadow: none; }

.ww-btn-sm { min-height: 2.25rem; padding: .5rem .8rem; }
.ww-btn-lg { min-height: 3.15rem; padding: .85rem 1.3rem; font-size: .94rem; }
.ww-filter-chip--active { color: #071325; background: #9fc4ff; border-color: #c8ddff; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #8dbbff;
  outline-offset: 3px;
}

/* Surfaces */
.ww-panel,
.ww-card,
.ww-game-panel,
.ww-lobby-section,
.ww-play-card,
.ww-game-card,
.ww-discover-card,
.ww-casino-card,
.ww-casino-table,
.ww-optional-panel {
  color: var(--ww-ink);
  background: linear-gradient(145deg, rgba(18, 39, 67, .91), rgba(10, 27, 49, .94));
  border: 1px solid rgba(171, 198, 234, .15);
  box-shadow: 0 18px 45px rgba(0, 5, 14, .2), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
}

.ww-card:hover,
.ww-play-card:hover,
.ww-game-card:hover,
.ww-discover-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 184, 247, .3);
  box-shadow: 0 22px 48px rgba(0, 5, 14, .28), inset 0 1px rgba(255,255,255,.05);
}

.ww-play-card::after { display: none; }
.ww-panel-header-compact { color: #c8d6e9; background: rgba(255,255,255,.025); border-color: var(--ww-line); }

.ww-lobby-hero,
.ww-board-promo,
.ww-casino-hero,
.ww-arena-hero {
  color: #fff;
  background:
    radial-gradient(38rem 18rem at 12% 0%, rgba(59, 129, 225, .25), transparent 66%),
    linear-gradient(145deg, #10294a 0%, #0a1b31 62%, #071526 100%);
  border: 1px solid rgba(157, 193, 241, .18);
  box-shadow: var(--ww-shadow), inset 0 1px rgba(255,255,255,.05);
}

.ww-hero-stat {
  background: rgba(2, 12, 25, .24);
  border: 1px solid rgba(171, 204, 248, .12);
  border-radius: .7rem;
}

.ww-kicker { color: #8fb8f1; font-size: .7rem; letter-spacing: .18em; }
.ww-kicker--on-dark { color: #a7c8f6; }
.ww-home-nav-link { color: #b5c5db; }
.ww-home-nav-link:hover { color: #fff; }

.ww-section-title { color: #f5f1e8; }
.ww-section-count { color: #9cb0cb; background: rgba(255,255,255,.06); }
.ww-empty-state-icon { color: #82a9df; background: rgba(92, 144, 216, .1); }
.ww-empty-state h3 { color: #f5f1e8; }
.ww-empty-state p { color: #97a9c2; }

/* Inputs and form controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.ww-slot-input):not(.sb-entry):not(.wp-cell),
select,
textarea,
.ww-chat-input,
.ww-wager-input {
  color: #f8f5ee;
  background: rgba(2, 12, 25, .52);
  border: 1px solid rgba(167, 197, 238, .2);
  border-radius: .65rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

input:not(.sb-entry)::placeholder, textarea::placeholder { color: #71839e; }
select option { color: #f5f1e8; background: #0b1b31; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.ww-slot-input):not(.sb-entry):not(.wp-cell):focus,
select:focus,
textarea:focus {
  border-color: #75a8ed;
  box-shadow: 0 0 0 3px rgba(102, 159, 237, .16);
}

/* Legacy utility colors on dark screens */
.ww-app :is(.text-gray-900,.text-slate-900,.text-blue-900,.text-indigo-900,.text-emerald-900) { color: #f7f4ed !important; }
.ww-app :is(.text-gray-700,.text-gray-600,.text-slate-600,.text-slate-500,.text-blue-700,.text-indigo-700,.text-emerald-700) { color: #aebbd2 !important; }
.ww-app :is(.bg-blue-50,.bg-indigo-50,.bg-emerald-50,.bg-red-50,.bg-slate-50,.bg-gray-50) { background: rgba(83, 135, 205, .08) !important; }
.ww-app :is(.border-blue-100,.border-indigo-100,.border-emerald-100,.border-red-200) { border-color: var(--ww-line) !important; }

.ww-status-pill--waiting { color: #f2d393; background: rgba(229, 191, 114, .12); }
.ww-status-pill--joined { color: #a9caff; background: rgba(91, 146, 226, .12); }
.ww-status-pill--in_progress { color: #7fe1bd; background: rgba(58, 190, 145, .12); }
.ww-status-pill--completed { color: #aab7c9; background: rgba(255,255,255,.06); }
.ww-live-indicator { color: #77deb7; background: rgba(56, 188, 142, .1); border: 1px solid rgba(83, 213, 169, .15); }

/* Game pieces retain high contrast against the midnight shell. */
.ww-slot,
.ww-key-cap,
.ww-letter-mini {
  color: #eaf1fb;
  background: linear-gradient(180deg, #162e4d, #10243e);
  border-color: rgba(171, 198, 234, .19);
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -2px rgba(0,0,0,.2);
}

.ww-slot.is-filled { color: #fff; background: #18385e; border-color: #7ca9e9; }
.ww-slot.is-active { border-color: rgba(124, 169, 233, .55); }
.ww-slots-stack:focus-within .ww-slot.is-active { border-color: #8fb8f2; box-shadow: 0 0 0 4px rgba(102, 159, 237, .28); }
.ww-slots-stack:focus-within .ww-slot.is-active::after { background: #8fb8f2; }
.ww-demo-tile,
.ww-ghost-preview-tile { color: #f7f4ed; background: linear-gradient(145deg, #1b3c65, #102a49); border: 1px solid rgba(158,194,242,.2); }
.ww-demo-score { color: #061326; background: linear-gradient(145deg, #a8caff, #669de8); }

.ww-drawing-tools { background: rgba(255,255,255,.045); }
.ww-ad-slot { color: #8fa0b8; background: rgba(255,255,255,.025); border-color: rgba(174,201,237,.15); }
.ww-ad-label { background: rgba(255,255,255,.06); }

/* Marketing home: quiet editorial composition. */
.ww-home { min-height: 100dvh; }
.ww-wordmark-tile {
  color: #071426;
  background: linear-gradient(145deg, #f0d394, #c69a49);
  border-radius: .18rem;
  box-shadow: inset 0 1px rgba(255,255,255,.5);
}
.ww-wordmark-tile:nth-child(2) { color: #071426; background: linear-gradient(145deg, #a9caff, #6399e3); }
.ww-home h1 { color: #fbf8f0; }
.ww-home .text-slate-600,
.ww-home .text-slate-500,
.ww-home .text-gray-700,
.ww-home .text-gray-600 { color: #a9b8cc !important; }

.ww-site-footer {
  color: var(--ww-ink-soft);
  border-top-color: var(--ww-line);
}

.ww-site-footer-dmca {
  border-color: color-mix(in oklch, var(--ww-gold) 45%, var(--ww-line));
}

@media (hover: hover) {
  .ww-site-footer-legal a:hover { color: var(--ww-ink); }
  .ww-site-footer-dmca:hover {
    border-color: color-mix(in oklch, var(--ww-gold) 70%, var(--ww-line));
  }
}

.ww-site-footer-dmca:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .ww-dock {
    grid-template-columns: repeat(7, 1fr);
    left: .55rem;
    right: .55rem;
    padding: .35rem;
    border-radius: .9rem;
    background: rgba(5, 15, 29, .94);
    border-color: rgba(180, 205, 239, .15);
    box-shadow: 0 18px 45px rgba(0, 4, 12, .5);
  }
  .ww-dock-item { color: #8698b1; border-radius: .6rem; }
  .ww-dock-item.is-active { color: #eef5ff; background: rgba(98, 151, 226, .16); }
  .ww-dock-item span { font-size: .56rem; }
  .ww-topbar { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ===== The Midnight Edition: brand and editorial detailing ===== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .16;
  /* The ground is woven by zzz-club.css.erb, which replaces this background
     outright. What stood here was a 155KB bookcloth photograph; the club's
     weave says the same thing in 1.4KB and can be re-woven at a different
     pitch. This keeps a plain tint so the room is still a room if the
     material layer is ever removed. */
  background: radial-gradient(60rem 40rem at 50% 0%, rgba(122, 162, 220, .1), transparent 70%);
  mix-blend-mode: soft-light;
}

::selection { color: #fffaf0; background: #7d2938; }

.ww-wordmark { position: relative; }
.ww-wordmark strong,
.ww-topbar-logo > span:last-child {
  font-variant-caps: small-caps;
  letter-spacing: .015em;
}

.ww-wordmark-tiles {
  gap: 0;
  padding: .16rem;
  background: #d6b36c;
  border: 1px solid #f0d99d;
  box-shadow: 0 0 0 2px #08172a, 0 0 0 3px rgba(215, 180, 109, .42);
}

.ww-wordmark-tile {
  width: 1.02rem;
  height: 1.02rem;
  color: #f8edda;
  background: #0a1b31 !important;
  border-radius: 0;
  box-shadow: none;
  font-family: Georgia, serif;
  font-size: .58rem;
}

.ww-wordmark-tile + .ww-wordmark-tile { border-left: 1px solid rgba(214,179,108,.45); }

.ww-masthead-rule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: #8799b2;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .17em;
}

.ww-masthead-rule::before,
.ww-masthead-rule::after {
  content: "";
  position: absolute;
}

.ww-masthead-rule i {
  display: block;
  height: 3px;
  border-top: 1px solid rgba(213, 180, 112, .45);
  border-bottom: 1px solid rgba(213, 180, 112, .18);
}

.ww-home > main > .grid.lg\:grid-cols-2 {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  margin-top: 0;
}

.ww-home h1 {
  max-width: 13ch;
  font-size: clamp(3.1rem, 6.2vw, 5.15rem);
  line-height: .95;
  text-shadow: 0 2px 25px rgba(0,0,0,.18);
}

.ww-home h1 span { color: #d7b66f; }

.ww-home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  width: min(100%, 29rem);
  margin-inline: auto;
}

.ww-home-actions form,
.ww-home-actions .ww-btn { width: 100%; }

.ww-home .grid.lg\:grid-cols-2 > .ww-play-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(26rem 12rem at 50% 10%, rgba(61, 116, 190, .09), transparent 70%),
    linear-gradient(145deg, rgba(18, 39, 67, .94), rgba(9, 26, 47, .97));
}

.ww-demo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(177, 202, 235, .12);
}

.ww-demo-meta span {
  color: #7589a5;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ww-home .ww-demo-tile,
.ww-home .ww-demo-score {
  width: clamp(2.65rem, 4vw, 3.35rem);
  height: clamp(2.65rem, 4vw, 3.35rem);
}

@media (min-width: 1024px) {
  .ww-home-actions { margin-left: 0; }
}

.ww-home .ww-play-card,
.ww-lobby-section,
.ww-game-card,
.ww-card,
.ww-panel {
  position: relative;
  border-radius: .35rem .85rem .85rem .35rem;
}

.ww-home .ww-play-card::before,
.ww-lobby-section::before,
.ww-game-card::before,
.ww-card::before,
.ww-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(#dabd7c, #795e2e);
  opacity: .72;
}

.ww-home .grid.md\:grid-cols-3 > .ww-play-card:nth-child(2)::before { background: linear-gradient(#a65762, #65202e); }
.ww-home .grid.md\:grid-cols-3 > .ww-play-card:nth-child(3)::before { background: linear-gradient(#7ba9c5, #315f7d); }

.ww-card-folio {
  position: absolute;
  top: 1.15rem;
  right: 1.2rem;
  color: #7186a2;
  font-family: Georgia, serif;
  font-size: .66rem;
  font-style: italic;
  letter-spacing: .08em;
}

.ww-play-card h2 { padding-right: 2.4rem; }

.ww-lobby-hero,
.ww-board-promo,
.ww-casino-hero,
.ww-arena-hero {
  position: relative;
  overflow: hidden;
  border-radius: .35rem;
  border-top-color: rgba(227, 199, 139, .34);
}

.ww-lobby-hero::before,
.ww-board-promo::before,
.ww-casino-hero::before,
.ww-arena-hero::before {
  content: "";
  position: absolute;
  inset: .42rem;
  pointer-events: none;
  border: 1px solid rgba(218, 188, 126, .14);
}

.ww-lobby-hero-content h1,
.ww-casino-hero h1,
.ww-arena-hero h1 { font-family: Georgia, serif; font-weight: 700; }

.ww-section-header {
  padding-bottom: .75rem;
  border-bottom: 3px double rgba(174, 199, 232, .15);
}

.ww-section-title {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}

.ww-discover {
  padding: 1.25rem;
  border-radius: .35rem;
  border: 1px solid rgba(174, 199, 232, .14);
  background: rgba(7, 22, 40, .56);
}

.ww-discover-shelf {
  border-color: rgba(174, 199, 232, .12);
  background: rgba(255, 255, 255, .02);
}

.ww-discover-shelf__summary { color: #f3efe6; }
.ww-discover-shelf__count { color: #899ab2; }

.ww-discover-card {
  border-radius: .28rem;
  border-color: rgba(174, 199, 232, .12);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

.ww-discover-card--active {
  box-shadow: inset 3px 0 0 var(--club-brass);
}

.ww-discover-card i { color: #d2b16d; }
.ww-discover-card strong { font-family: Georgia, serif; font-size: 1.02rem; }
.ww-discover-card span { color: #899ab2; }

.ww-game-card-icon {
  color: #ead9b4;
  background: #762a38;
  border: 1px solid #a85865;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #0d213c, 0 0 0 5px rgba(200, 163, 91, .28);
}

.ww-game-card-meta span,
.ww-rating-badge,
.ww-wager-badge {
  color: #b8c6d9;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(170,197,233,.13);
  border-radius: .2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ww-challenge-card {
  color: #e8edf5;
  background: rgba(255,255,255,.025);
  border-color: rgba(174, 199, 232, .12);
  border-radius: .25rem;
}

.ww-challenge-card:hover {
  color: #fff;
  background: rgba(81, 132, 201, .08);
  border-color: rgba(203, 175, 116, .34);
}

.ww-challenger-avatar { color: #f0ddb7; background: #762a38; }

.ww-btn-primary {
  color: #fff9eb;
  background: linear-gradient(180deg, #8c3445 0%, #762837 52%, #611d2a 100%);
  border-color: rgba(207, 116, 132, .45);
  box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -1px rgba(41,5,13,.35), 0 7px 18px rgba(42,5,14,.2);
}

.ww-btn-primary:hover { border-color: rgba(229, 191, 118, .55); }
.ww-btn i { color: currentColor; opacity: .82; }

.ww-filter-chip { border-radius: .2rem; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.ww-filter-chip--active { color: #fff4df; background: #762837; border-color: #a65060; }

.ww-topbar-link--active::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1px;
  margin: .22rem auto -.22rem;
  background: #d8b66f;
}

.ww-dock-item.is-active i { color: #dabc78; }

@media (max-width: 640px) {
  .ww-masthead-rule { grid-template-columns: auto 1fr; }
  .ww-masthead-rule span:last-child { display: none; }
  .ww-home h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .ww-home-actions { grid-template-columns: 1fr; }
}

/* ===== Universal game-quality guardrails =====
   These rules deliberately sit at the end of the cascade. Every game keeps its
   own art direction, while interaction, contrast and motion remain predictable. */

:root {
  --ww-focus: #a9caff;
  --ww-success-text: #9af0cf;
  --ww-warning-text: #f7d38a;
  --ww-danger-text: #ffabb1;
  --ww-control-min: 44px;
}

.ww-app :is(.text-slate-400, .text-gray-400) { color: #9cacc2 !important; }
.ww-app :is(.text-red-600, .text-red-700, .text-rose-600) { color: var(--ww-danger-text) !important; }
.ww-app :is(.text-green-600, .text-green-700, .text-emerald-600) { color: var(--ww-success-text) !important; }
.ww-app :is(.text-amber-600, .text-amber-700, .text-yellow-600) { color: var(--ww-warning-text) !important; }

.ww-app :is(button, [role="button"], input, select, textarea) { font: inherit; }

.ww-app :is(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ww-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(6, 17, 31, .88);
}

.ww-app :is(button, input, select, textarea):disabled,
.ww-app [aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.55);
  opacity: .58;
}

.ww-app [aria-busy="true"] { cursor: progress; }
.ww-app [hidden] { display: none !important; }

/* Empty board squares used to combine white text with pale gray cells. A deep
   neutral board preserves piece contrast before and after ownership changes. */
.ww-strategy-board {
  border-color: #91a6c2;
  background: #071426;
  box-shadow: 0 18px 46px rgba(0, 4, 12, .38), 0 0 0 1px rgba(255,255,255,.05);
}

.ww-board-cell,
.ww-board-cell:nth-child(odd) {
  color: #f8f4eb;
  background: #17304e;
  border-color: rgba(190, 214, 245, .18);
  transition: filter var(--ww-dur-micro) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out), box-shadow var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-board-cell:nth-child(odd) { background: #102640; }
.ww-board-cell:not(:disabled):active { transform: scale(.94); }
.ww-board-cell--selected { box-shadow: inset 0 0 0 4px #ffd66b, 0 0 18px rgba(255,214,107,.3); }
.ww-board-cell--destination,
.ww-board-cell--destination-option { box-shadow: inset 0 0 0 4px #68e0b4, 0 0 20px rgba(85,217,174,.38); }

.ww-board-player,
.ww-board-tools,
.ww-waiting-banner,
.ww-scrolltown-feed {
  color: #eaf1fb;
  background: rgba(14, 35, 61, .9);
  border-color: rgba(174, 202, 239, .2);
}

.ww-board-player--active {
  color: #f4fff9;
  background: rgba(31, 111, 85, .34);
  border-color: #55d9ae;
  box-shadow: 0 0 0 3px rgba(85,217,174,.1);
}

.ww-route { color: #f7f4ed; background: #122b49; border-color: #91a6c2; }

/* Game state must never rely on hue alone. Player 1 is obsidian navy, Player 2 is travertine ivory. */
.ww-owner-1 { color: var(--ww-owner-1-ink) !important; background: var(--ww-owner-1-bg) !important; border: 1px solid var(--ww-owner-1-border); }
.ww-owner-2 { color: var(--ww-owner-2-ink) !important; background: var(--ww-owner-2-bg) !important; border: 1px solid var(--ww-owner-2-border); }
.ww-owner-1::after,
.ww-owner-2::after { font-size: .62em; vertical-align: super; font-weight: bold; }
.ww-board-cell.ww-owner-1::after { content: " 1"; }
.ww-board-cell.ww-owner-2::after { content: " 2"; }

/* Word and Ghost inputs get the same physical key quality as the boards. */
.ww-key-cap,
.ww-insertion-option span {
  min-height: var(--ww-control-min);
  color: #eef5ff;
  background: linear-gradient(180deg, #1b395e, #102844);
  border: 1px solid rgba(181, 208, 243, .24);
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -3px rgba(0,0,0,.3);
}

.ww-key-cap:active,
.ww-insertion-option span:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.ww-key.eliminated .ww-key-cap { color: var(--ww-mark-out-ink); background: var(--ww-mark-out); }
.ww-key.selected .ww-key-cap { color: var(--ww-mark-maybe-ink); background: var(--ww-mark-maybe); }
.ww-insertion-option input:checked + span { color: #fff8eb; background: #762837; border-color: #d58b98; }

/* Drawing is intentionally light; isolate it with an unmistakable frame so
   white canvas/tool colors can never disappear into the surrounding shell. */
.ww-drawing-canvas {
  color: #111827;
  background: #fff;
  border-color: #c9d8ec;
  box-shadow: 0 0 0 5px #0b1b31, 0 20px 48px rgba(0,4,12,.35), inset 0 0 28px rgba(30,64,175,.06);
}

.ww-drawing-tools { color: #edf4ff; border: 1px solid rgba(178,205,240,.18); }

/* Result and waiting surfaces stay legible over animated game scenes. */
.ww-game-status,
.ww-arena-result,
.card-waiting,
.card-showdown,
.ww-casino-result {
  text-shadow: none;
}

/* Casino outcomes remain truthful in the DOM; these effects only stage their presentation. */
.ww-slot-machine { margin-block: 1.5rem; text-align: center; }
.ww-slot-machine .ww-reels { margin-block: 0 .75rem; }
.ww-slot-machine .ww-reel {
  position: relative;
  color: #102617;
  background: linear-gradient(180deg, #fffdf4, #dff4e8 48%, #fffdf4 52%, #cce8d8);
  border-color: #79d5ad;
  box-shadow: inset 0 0 0 3px #f8fff9, inset 0 -12px 24px rgba(6,78,59,.12), 0 12px 28px rgba(0,4,12,.35);
}
.ww-reel-caption, .ww-island-prompt { color: #cbd9ea; font-weight: 750; text-align: center; }
.ww-reels.is-revealing .ww-reel { animation: ww-reel-land 520ms var(--ww-ease-out) both; }
.ww-reels.is-revealing .ww-reel:nth-child(2) { animation-delay: 180ms; }
.ww-reels.is-revealing .ww-reel:nth-child(3) { animation-delay: 360ms; }
@keyframes ww-reel-land {
  0% { opacity: .35; transform: translateY(-1.2rem) rotateX(55deg); filter: blur(5px); }
  70% { transform: translateY(.18rem) rotateX(-8deg); }
  100% { opacity: 1; transform: none; filter: none; }
}

.ww-eggs .ww-egg { position: relative; min-height: 9rem; color: #102617; border-width: 3px; }
.ww-eggs button.ww-egg { cursor: pointer; transition: transform var(--ww-dur-short) var(--ww-ease-out), box-shadow var(--ww-dur-short) var(--ww-ease-out); }
.ww-eggs button.ww-egg:hover { transform: translateY(-4px); box-shadow: 0 14px 24px rgba(0,4,12,.3); }
.ww-eggs button.ww-egg:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 4px; }
.ww-egg small { display: block; margin-top: .4rem; color: #334155; font-weight: 800; }
.ww-egg--winner { color: #102617; background: linear-gradient(145deg, #fff7bf, #f5c94d); border-color: #fff0a0; box-shadow: 0 0 0 4px #7b5b08, 0 16px 35px rgba(0,0,0,.34); }
.ww-egg--winner small { color: #4b3600; }
.ww-egg--picked::after { content: "Your pick"; position: absolute; top: .35rem; right: .35rem; padding: .18rem .4rem; color: #fff; background: #173d63; border-radius: 999px; font-size: .68rem; font-weight: 900; }
.ww-egg--winner.ww-egg--picked::after { color: #102617; background: #fffdf4; }

@media (prefers-reduced-motion: reduce) {
  .ww-reels.is-revealing .ww-reel { animation: none; }
  .ww-eggs button.ww-egg { transition: none; }
}

.ww-arena-result,
.ww-casino-result {
  color: #f8f4eb;
  background: rgba(5, 15, 29, .95);
  border: 1px solid rgba(218,188,126,.36);
  box-shadow: 0 24px 70px rgba(0,0,0,.52);
  backdrop-filter: blur(16px);
}

/* Power Pair is a true visual memory grid, not a row of browser checkboxes. */
.ww-pair-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  color: #dbe8fa;
  background: #0c213b;
  border: 1px solid rgba(174,202,239,.2);
  border-radius: .65rem;
}

.ww-pair-status span { color: #aebed3; font-variant-numeric: tabular-nums; }
.ww-pair-status.is-ready { color: #f4fff9; border-color: #55d9ae; background: #123a35; }
.ww-pair-status.is-ready span { color: #9af0cf; }

.ww-flip-grid { grid-template-columns: repeat(4, minmax(4.5rem, 1fr)); }
.ww-flip-card { position: relative; display: block; min-width: 0; }
.ww-flip-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ww-flip-card > span {
  position: relative;
  display: grid;
  min-height: 6rem;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  color: #f8f4eb;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 5px, transparent 5px 10px),
    linear-gradient(145deg, #173d63, #0b213b);
  border: 2px solid #6e91bc;
  border-radius: .75rem;
  box-shadow: inset 0 0 0 4px #0b213b, inset 0 0 0 5px rgba(213,180,112,.36), 0 8px 18px rgba(0,4,12,.3);
  cursor: pointer;
  transition: transform var(--ww-dur-short) var(--ww-ease-out), border-color var(--ww-dur-short) var(--ww-ease-out), box-shadow var(--ww-dur-short) var(--ww-ease-out);
}

.ww-flip-card > input:focus-visible + span { outline: 3px solid var(--ww-focus); outline-offset: 3px; }
.ww-flip-card > input:checked + span {
  transform: translateY(-5px) rotateY(8deg);
  border-color: #ffd477;
  box-shadow: inset 0 0 0 4px #0b213b, inset 0 0 0 5px #ffd477, 0 14px 24px rgba(0,4,12,.4);
}
.ww-flip-card--matched > span { color: #08261e; background: #a9efd5; border-color: #55d9ae; box-shadow: inset 0 0 0 4px #d9fff1, 0 8px 18px rgba(4,60,44,.2); }
.ww-flip-card__index { position: absolute; top: .45rem; left: .55rem; font-size: .7rem; opacity: .78; }
.ww-flip-card__face { font-size: clamp(1.65rem, 5vw, 2.6rem); font-weight: 900; }
.ww-flip-card:not(.ww-flip-card--matched):not(.ww-flip-card--revealed) > input:not(:checked) + span .ww-flip-card__face { opacity: 0; transform: scale(.7); }
.ww-flip-card:not(.ww-flip-card--matched):not(.ww-flip-card--revealed) > input:not(:checked) + span::after {
  content: "?";
  position: absolute;
  font-size: clamp(1.65rem, 5vw, 2.6rem);
  font-weight: 900;
}
.ww-flip-card--revealed > span { border-color: #ffd477; background: linear-gradient(145deg, #224f78, #15324f); }
.ww-flip-card > input:checked + span .ww-flip-card__face { animation: ww-pair-reveal 260ms ease-out both; }
.ww-flip-card__state { position: absolute; right: .4rem; bottom: .35rem; left: .4rem; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

@keyframes ww-pair-reveal {
  from { opacity: 0; transform: rotateY(85deg) scale(.75); }
  to { opacity: 1; transform: rotateY(0) scale(1); }
}

@media (max-width: 480px) {
  .ww-flip-grid { grid-template-columns: repeat(3, minmax(4rem, 1fr)); }
  .ww-flip-card > span { min-height: 5rem; }
}

/* Editorial screens use tiny labels for flavor; functional copy never does. */
.ww-app :is(.ww-status-pill, .ww-live-indicator, .ww-waiting-banner, .ww-game-status) {
  font-size: max(.75rem, 12px);
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .ww-app :is(.ww-board-cell, .ww-key-cap, .playing-card, .ww-route, .weave-tile):hover {
    filter: brightness(1.1);
  }
}

@media (max-width: 768px) {
  .ww-app :is(.ww-btn, .ww-filter-chip, .ww-board-tool, .ww-key-cap, .ww-insertion-option span, .card-mini-btn) {
    min-height: var(--ww-control-min);
  }

  .ww-game-grid,
  .ww-board-header,
  .ww-board-scorebar { min-width: 0; }

  .ww-strategy-board { width: min(100%, calc(100dvh - 15rem)); min-width: 17rem; }
  .ww-guess-row { gap: .55rem; }
  .ww-guess-tiles { gap: .2rem; min-width: 0; }
  .ww-guess-score-badge { padding-inline: .55rem; }
}

@media (prefers-contrast: more) {
  :root { --ww-line: rgba(220, 233, 250, .42); }
  .ww-app :is(.ww-panel, .ww-card, .ww-game-panel, .ww-game-card, .ww-play-card, .ww-btn, input, select, textarea) {
    border-width: 2px;
  }
  .ww-ink-soft,
  .ww-app :is(.text-slate-500, .text-slate-600, .text-gray-500, .text-gray-600) { color: #d6e0ed !important; }
}

@media (forced-colors: active) {
  .ww-app :is(.ww-btn, .ww-filter-chip, .ww-key-cap, .ww-board-cell, .playing-card, .weave-tile) {
    forced-color-adjust: auto;
    border: 2px solid ButtonText;
  }
  .ww-app :is(.ww-owner-1, .ww-owner-2, .ww-key.selected .ww-key-cap) { outline: 3px solid Highlight; outline-offset: -4px; }
  .ww-board-cell--destination-option { outline: 4px dashed Highlight; outline-offset: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .ww-app *,
  .ww-app *::before,
  .ww-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.ww-drawing-keys { background: rgba(255,255,255,.045); color: #edf4ff; }
.ww-drawing-keys kbd { background: rgba(9,20,38,.85); border-color: rgba(178,205,240,.3); color: #edf4ff; }
.ww-draw-feed-count { color: rgba(214,230,250,.75); }

/* ===========================================================================
   Surfaces this theme had not reached.

   The dark theme rewrites the inherited text colour for the whole app (see
   "Legacy utility colors on dark screens" above) and re-skins the surfaces it
   knew about. Every component that kept a light background and was not on that
   list therefore ended up painting light text on a light card -- measurably
   invisible, not merely low-contrast: the board result screen read 1.1:1
   against a required 4.5:1, and "Find a new opponent" was white on white.

   `bin/rails visual:sample` measures this. Anything added here should be
   because that audit named it.
   ======================================================================== */

/* The board table itself: a white card holding dark cells, dark player chips
   and a dark waiting banner. The card was the only light thing left in it. */
.ww-board-shell {
  color: var(--ww-ink);
  background: linear-gradient(145deg, rgba(18, 39, 67, .91), rgba(10, 27, 49, .94));
  border: 1px solid rgba(171, 198, 234, .15);
  box-shadow: 0 18px 45px rgba(0, 5, 14, .2), inset 0 1px rgba(255,255,255,.035);
}

.ww-board-rules {
  background: rgba(255, 255, 255, .04);
  border-color: var(--ww-line);
}
.ww-board-rules summary { color: #eaf1fb; }
.ww-board-rules p { color: #c2d0e4; }
.ww-rank-legend dd { color: #a9bcd6; }

/* An inactive tool sat at #475569 on the dark tools rail. */
.ww-board-tool { color: #c2d0e4; }
.ww-board-tool.is-active { color: #0a1b31; background: #cfe0f7; }

/* Scrolltown's neighbourhood is drawn on light tiles; its die and space
   numbers were the two runs still inheriting the page's light ink. */
.ww-die { color: #12233c; background: #f4f7fd; }
.ww-scrolltown-number { color: #46536b; }

/* The turn/result banners, the turn clock, and the versus strip: three light
   pills that appear on nearly every match page in the collection. */
.ww-banner {
  color: #eaf1fb;
  background: rgba(255, 255, 255, .05);
  border-color: var(--ww-line);
}
.ww-banner strong { color: #f7f4ed; }
.ww-banner :is(.text-gray-700, .text-gray-600, .text-slate-600) { color: #c2d0e4 !important; }
.ww-banner--turn { border-color: rgba(85, 217, 174, .45); background: rgba(31, 111, 85, .28); }
.ww-banner--wait { border-color: rgba(229, 191, 114, .4); background: rgba(120, 90, 30, .24); }
.ww-banner--win { border-color: rgba(85, 217, 174, .5); background: rgba(31, 111, 85, .32); }
.ww-banner--lose { border-color: rgba(238, 122, 137, .45); background: rgba(120, 32, 45, .28); }

.ww-vs-strip {
  color: #eaf1fb;
  background: rgba(255, 255, 255, .045);
  border-color: var(--ww-line);
}
.ww-vs-text { color: #a9bcd6; }

/* Empty states sat on #fafafa cards inside dark lobbies. */
.ww-empty-challenges {
  background: rgba(255, 255, 255, .035);
  border-color: var(--ww-line);
}
.ww-empty-challenges :is(p, span, .text-gray-500, .text-gray-600) { color: #c2d0e4 !important; }

.ww-sidebar-turn-badge { color: #062017; background: #7fe1bd; }

/* Chat: .ww-panel is re-skinned above, but the strips inside it each painted
   their own white, so a dark panel held a white box of invisible chips. */
.ww-panel-title { color: #f7f4ed; }
.ww-panel-subtitle { color: #b9c8de; }
.ww-chat-messages { background: rgba(0, 0, 0, .16); }
.ww-chat-form,
.ww-chat-presets { background: transparent; border-color: var(--ww-line); }
.ww-message {
  color: #e7eefb;
  background: rgba(255, 255, 255, .05);
  border-color: var(--ww-line);
}
.ww-message-meta { color: #a9bcd6; }
/* chat.css inks the name and the text near-black on its own light bubble, and a
   colour set on the element beats the one inherited above -- so every line of
   chat read as dark on dark. */
.ww-message-user,
.ww-message-body { color: var(--ww-ink); }
.ww-message-time { color: var(--ww-ink-soft); }

/* The wordmark's tiles were dark ink on the dark topbar. */
.ww-wordmark-tile { color: #f7f4ed; }

/* The chat panel's header keeps a tinted gradient, so its title and subtitle
   needed the dark-surface ink the rest of the panel got. Measured contrast
   cannot see this one: a gradient has no single colour to measure against, so
   the audit files it under "review by eye" and it has to be checked there. */
.ww-panel-header {
  background: linear-gradient(135deg, rgba(83, 135, 205, .22), rgba(99, 102, 241, .18));
  border-bottom-color: var(--ww-line);
}

/* ===== The Club: the material layer =====
 *
 * Midnight (zz-midnight.css) settles the palette and the chrome. This layer,
 * loaded after it, settles what the surfaces are *made of*: the room is cloth,
 * a panel is paper, a board is two woods and a brass seam, a card table is
 * napped felt behind a brass rail. Every texture here is generated -- see
 * lib/asset_gen.rb and `bin/rails assets:generate` -- so a material can be
 * re-cut when the palette moves instead of being re-sourced.
 *
 * The reference is a European members' club rather than a games portal: brass
 * hairlines, one warm metal, deep jewel accents, and a great deal of restraint
 * about glow. The rule of thumb throughout is that an edge should be a *line*,
 * not a halo, and that a texture should be felt rather than seen -- if you can
 * name the texture at arm's length it is turned up too far.
 *
 * Contrast: every texture is laid over an opaque background-color of the same
 * tone. test/support/contrast_audit.js resolves text against the nearest
 * opaque colour, so a texture floated over nothing would either measure
 * against the wrong layer or fall into the unmeasurable bucket. Pairing the
 * two keeps the audit reading what a player actually sees.
 */

:root {
  --club-brass: #c9a44c;
  --club-brass-lit: #e6cd93;
  --club-brass-dim: rgba(201, 164, 76, .22);
  --club-oxblood: #7d2233;
  --club-jade: #1f5f4e;
  --club-celadon: #a8c9bd;
  --club-travertine: #efe7d6;
  --club-walnut: #241a14;
  --club-weave: url(/assets/club/weave-8ffca9a3d1916a7f27cbe276525ac992bc62a361bff8dcf70afe2bad3ff97515.svg);
  --club-grain: url(/assets/club/grain-5870c20876338599f3c7257fef3c095b34949bfdd3ba0b07c5fe902de23c47bd.svg);
  --club-felt: url(/assets/club/felt-65c67e5355018d03c7a8004cbc0c08a3227158d0a5c0b162d44015912cd8d30f.svg);
  --club-marquetry: url(/assets/club/marquetry-a318500a41d3aa9b2fcb80959fb1f2eef652e4a00dc81e53947fb61e6af50ebc.svg);
  --club-marble: url(/assets/club/marble-check-bd623933ac0811b6018a60dd2b73c85a81a7c41f184ce69c21d346745f7c19d6.svg);
  --club-comb: url(/assets/club/comb-3be7370089457f774859a5068d8ef2877c51d8efafbec8c85eb27babbddb90e9.svg);
  --club-card-back: url(/assets/club/card-back-7358396578ef6c4f0a5a3cb3bd66bab38f1f01fb1c21977c7495e88323408144.svg);
}

/* Worduel: the walnut, ivory and brass shown on its library cover. Scope the
   material to this game so the other tables keep their own character. */
.ww-worduel :is(.ww-worduel-board, .ww-letter-notes, .ww-lobby-hero, .ww-worduel-challenge) {
  background: var(--club-walnut) url(/assets/club/walnut-94ba2f115ffddfd0078e061c59b2534fc0170c9a5fc35b57f88333401513e2ec.svg) repeat;
  background-size: 640px 320px;
  background-blend-mode: normal;
  color: var(--ww-wood-ink);
  border: 1px solid var(--ww-wood-edge);
  box-shadow: none;
}
.ww-worduel :is(.ww-panel, .ww-game-panel, .ww-optional-panel, .ww-lobby-hero) { backdrop-filter: none; }

.ww-worduel :is(.ww-guess-panel, .ww-score-sheet, .ww-score-sheet-grid, .ww-sheet-header) {
  background: transparent;
  color: var(--ww-wood-ink);
  box-shadow: none;
}
.ww-worduel .ww-guess-panel::before,
.ww-worduel .ww-guess-panel::after { content: none; }
.ww-worduel .ww-guess-panel--inactive { opacity: 1; }
.ww-worduel :is(.ww-guess-panel-header, .ww-sheet-header, .ww-guess-column, .ww-guess-column-header) { border-color: var(--club-brass-dim); }
.ww-worduel .ww-guess-panel-header { background: transparent; }
.ww-worduel .ww-sheet-rule { background: var(--club-brass-dim); }
.ww-worduel :is(.ww-sheet-title, .ww-sheet-player strong, .ww-letter-notes .ww-panel-title, .ww-guess-panel .ww-panel-title) { color: var(--ww-wood-ink); }
.ww-worduel :is(.ww-sheet-player span, .ww-candidate-count, .ww-guess-count, .ww-fold-caret, .ww-guess-help, .ww-letter-notes-help, .ww-letter-notes-legend, .ww-guess-panel .ww-panel-subtitle) { color: var(--ww-wood-muted); }
.ww-worduel .ww-guess-help.is-error { color: var(--ww-danger-text); }
.ww-worduel .ww-empty-guesses-sm { background: transparent; color: var(--ww-wood-muted); border: 0; }
.ww-worduel .ww-score-sheet .ww-guess-row { background: transparent; color: var(--ww-wood-ink); border: 0; box-shadow: none; transform: none; }


@media (hover: hover) {
  .ww-worduel summary:hover .ww-fold-caret { color: var(--ww-wood-ink); }
}

/* Empty sockets have a brass outline; entering a letter places an ivory tile.
   The outer focus ring remains on the real input, clear against the walnut. */
.ww-worduel .ww-slot {
  color: var(--ww-wood-ink);
  background: var(--ww-wood-recess);
  border: 1px dashed var(--ww-wood-edge);
  box-shadow: none;
}
.ww-worduel .ww-slot.is-filled {
  background: var(--ww-tile-face);
  color: var(--ww-tile-ink);
  border: 1px solid var(--ww-tile-edge);
  box-shadow: inset 0 -3px var(--ww-tile-edge);
  font-family: var(--ww-display);
}
.ww-worduel .ww-slots-stack:focus-within .ww-slot.is-active { border-color: var(--club-brass-lit); box-shadow: none; }
.ww-worduel .ww-slots-stack:focus-within .ww-slot.is-active::after { background: var(--club-brass-lit); }
.ww-worduel .ww-slots.is-invalid .ww-slot { border-color: var(--ww-danger-text); }

.ww-worduel .ww-score-sheet .ww-guess-row .ww-guess-tile .ww-guess-tile-inner,
.ww-worduel .ww-tracker-key,
.ww-worduel .ww-result-tile {
  background: var(--ww-tile-face);
  color: var(--ww-tile-ink);
  border-color: var(--ww-tile-edge);
  box-shadow: inset 0 -3px var(--ww-tile-edge);
}
.ww-worduel .ww-score-sheet .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner:hover { box-shadow: inset 0 -3px var(--ww-tile-edge); }
.ww-worduel .ww-score-sheet .ww-guess-row--won .ww-guess-tile .ww-guess-tile-inner {
  background: var(--club-jade);
  color: var(--ww-wood-ink);
  border-color: var(--club-celadon);
  box-shadow: none;
}
.ww-worduel .ww-score-sheet .ww-guess-row--anagram .ww-guess-tile .ww-guess-tile-inner { border-bottom: 3px solid var(--club-brass); }

/* A deduction is ink on the piece, as on the cover, and always has a shape.
   Keep the question mark as well as the jade underline for "maybe". */
.ww-worduel .ww-score-sheet .ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile.ww-tile-revealed:is(.ww-guess-tile--out, .ww-guess-tile--maybe) .ww-guess-tile-inner {
  background: var(--ww-tile-face);
  color: var(--ww-tile-ink);
  border-color: var(--ww-tile-edge);
  box-shadow: inset 0 -3px var(--ww-tile-edge);
}
.ww-worduel .ww-tracker-letter.eliminated .ww-tracker-key,
.ww-worduel .ww-tracker-letter.selected .ww-tracker-key {
  background: var(--ww-tile-face);
  color: var(--ww-tile-ink);
  text-decoration: none;
}
.ww-worduel .ww-score-sheet .ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile.ww-tile-revealed.ww-guess-tile--out .ww-guess-letter { text-decoration: none; }
.ww-worduel .ww-guess-tile-inner { position: relative; }
.ww-worduel .ww-tracker-letter.eliminated .ww-tracker-key::before,
.ww-worduel .ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile--out .ww-guess-tile-inner::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 3px;
  top: 46%;
  left: 7.5%;
  background: var(--ww-pencil-out);
  transform: rotate(-45deg);
  pointer-events: none;
}
.ww-worduel .ww-tracker-letter.selected .ww-tracker-key::before,
.ww-worduel .ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile--maybe .ww-guess-tile-inner::after {
  content: "";
  position: absolute;
  inset: auto 20% 4px;
  height: 3px;
  border-radius: 1px;
  background: var(--ww-pencil-maybe);
  pointer-events: none;
}
.ww-worduel .ww-tracker-letter.selected .ww-tracker-key::after { color: var(--ww-pencil-maybe); }
.ww-worduel .ww-wordkeys-swatch--out { background: var(--ww-tile-face); color: var(--ww-pencil-out); }
.ww-worduel .ww-wordkeys-swatch--maybe { background: var(--ww-tile-face); color: var(--ww-pencil-maybe); }
/* Confirmed is the player's own call that a letter is in the word: the piece
   turns jade, as a solved row does, and the key keeps its tick. */
.ww-worduel .ww-tracker-letter.confirmed .ww-tracker-key,
.ww-worduel .ww-score-sheet .ww-guess-row:not(.ww-guess-row--won, .ww-guess-row--anagram) .ww-guess-tile.ww-tile-revealed.ww-guess-tile--in .ww-guess-tile-inner {
  background: var(--club-jade);
  color: var(--ww-wood-ink);
  border-color: var(--club-celadon);
  box-shadow: inset 0 -3px color-mix(in oklch, var(--club-jade) 60%, var(--ww-tile-ink));
}
.ww-worduel .ww-tracker-letter.confirmed .ww-tracker-key::after { color: var(--club-celadon); }
.ww-worduel .ww-wordkeys-swatch--in { background: var(--club-jade); color: var(--ww-wood-ink); }
.ww-worduel .ww-wordkeys-reset { color: var(--ww-wood-muted); border-color: var(--ww-wood-edge); }
@media (hover: hover) {
  .ww-worduel .ww-tracker-key:not(:disabled):hover { background: var(--ww-tile-edge); border-color: var(--club-brass-lit); }
  .ww-worduel .ww-wordkeys-reset:not(:disabled):hover { color: var(--ww-wood-ink); border-color: var(--club-brass-lit); }
}
.ww-worduel .ww-tracker-key:not(:disabled):active { box-shadow: none; }

.ww-worduel .ww-score-sheet .ww-guess-score-badge {
  background: var(--club-brass);
  color: var(--ww-tile-ink);
  border-color: var(--club-brass-lit);
  box-shadow: none;
}
.ww-worduel .ww-score-sheet .ww-guess-score-badge .ww-score-num { color: var(--ww-tile-ink); }
.ww-worduel .ww-score-sheet .ww-guess-score-badge.ww-score-perfect {
  background: var(--club-jade);
  color: var(--ww-wood-ink);
  border-color: var(--club-celadon);
  animation: ww-score-pop var(--ww-dur-long) var(--ww-ease-play) forwards;
}
.ww-worduel .ww-score-sheet .ww-score-perfect .ww-score-num { color: var(--ww-wood-ink); }

/* The supporting rail is quiet stained wood; the pieces remain the brightest
   things on the table. Setup, waiting and result boards share the walnut. */
.ww-worduel :is(.ww-grid-status .ww-game-panel, .ww-chat-panel, .ww-chat-panel .ww-panel, .ww-chat-panel .ww-optional-panel, .ww-game-info-card, .ww-tip-box, .ww-timer-display) {
  background: var(--ww-wood-recess);
  color: var(--ww-wood-ink);
  border-color: var(--club-brass-dim);
  box-shadow: none;
}
.ww-worduel .ww-tip-box > i { color: var(--club-brass-lit); }
.ww-worduel :is(.ww-word-form-icon, .ww-create-icon, .ww-action-banner--action) {
  background: var(--ww-wood-recess);
  color: var(--club-brass-lit);
  border: 1px solid var(--ww-wood-edge);
}
.ww-worduel :is(.ww-word-form-icon, .ww-create-icon) i { color: var(--club-brass-lit); }
.ww-worduel :is(.ww-panel-header-compact, .ww-chat-panel .ww-panel-header) { background: transparent; color: var(--ww-wood-ink); border-color: var(--club-brass-dim); }
.ww-worduel .ww-game-info-row { border-color: var(--club-brass-dim); }
.ww-worduel .ww-info-label { color: var(--ww-wood-muted); }
.ww-worduel .ww-info-value { color: var(--ww-wood-ink); }
.ww-worduel .ww-game-result-words { background: transparent; border-color: var(--club-brass-dim); }
.ww-worduel .ww-chat-divider { background: var(--club-brass-dim); }
.ww-worduel .ww-your-turn-indicator,
.ww-worduel .ww-banner--win { animation: none; }
.ww-worduel .ww-btn-primary { background: var(--club-oxblood); color: var(--ww-wood-ink); border-color: var(--ww-pencil-out); box-shadow: none; }
@media (hover: hover) {
  .ww-worduel .ww-btn-primary:not(:disabled):hover { background: var(--ww-pencil-out); border-color: var(--club-brass-lit); }
}
.ww-worduel .ww-btn-primary:not(:disabled):active { background: var(--club-oxblood); transform: translateY(1px); }

/* --- The room ------------------------------------------------------------ */

/* The ground was a 64px white rule grid, which is the single most generic
   thing a dark interface can stand on. It becomes paper grain; the bookcloth
   moves off a 155KB photograph and onto a 1.4KB woven tile that says the same
   thing and can be re-woven at a different pitch. */
body::before {
  opacity: .5;
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .45) 60%, transparent 92%);
}

body::after {
  opacity: .85;
  background: var(--club-weave) 0 0 / 32px 32px repeat;
  mix-blend-mode: normal;
}

/* --- Brass detailing ----------------------------------------------------- */

/* One hairline of warm metal under the chrome does more for "finished" than
   any amount of shadow, and unlike a shadow it survives a light background. */
.ww-topbar,
.ww-game-topbar {
  border-bottom-color: rgba(201, 164, 76, .28);
  box-shadow: 0 1px 0 rgba(201, 164, 76, .1), 0 8px 30px rgba(0, 4, 12, .3);
}

/* --- Glass chrome -------------------------------------------------------- */

/* The bar and the sidebar are smoked glass laid over the room: thin enough
   that the table's colour moves under them, blurred hard enough that a
   heading underneath never competes with the menu. The gloss is a sheen
   along the lit edge plus a one-pixel highlight, the way moulded plastic
   catches a lamp. Wordweave's solid chrome still wins on its light page. */
.ww-topbar,
.ww-sidebar {
  background-color: color-mix(in oklch, var(--ww-navy) 66%, transparent);
  backdrop-filter: blur(26px) saturate(1.6);
}

.ww-topbar {
  background-image: linear-gradient(180deg, oklch(1 0 0 / .13), oklch(1 0 0 / .035) 45%, transparent 70%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / .16),
    0 1px 0 color-mix(in oklch, var(--club-brass) 10%, transparent),
    0 8px 30px oklch(0.12 0.03 255 / .3);
}

.ww-sidebar {
  background-color: color-mix(in oklch, var(--ww-navy) 74%, transparent);
  background-image: linear-gradient(100deg, oklch(1 0 0 / .1), oklch(1 0 0 / .03) 35%, transparent 60%);
  border-right: 1px solid color-mix(in oklch, var(--club-brass) 28%, transparent);
  box-shadow: inset -1px 0 0 oklch(1 0 0 / .1);
}

.ww-sidebar.ww-sidebar--shown,
.ww-sidebar.ww-sidebar--open {
  box-shadow: inset -1px 0 0 oklch(1 0 0 / .1), 14px 0 44px oklch(0.12 0.03 255 / .45);
}

/* Panels are paper: the same grain as the room, at a quarter of the strength,
   over the colour Midnight already chose. Restating the gradient is the price
   of adding a layer under it in a shorthand-defined background. */
.ww-panel,
.ww-card,
.ww-game-panel,
.ww-lobby-section,
.ww-play-card,
.ww-game-card,
.ww-discover-card,
.ww-casino-card,
.ww-casino-table,
.ww-optional-panel {
  background-color: #0c1d34;
  background-image: var(--club-grain), linear-gradient(145deg, rgba(18, 39, 67, .91), rgba(10, 27, 49, .94));
  background-size: 300px 300px, auto;
  background-blend-mode: soft-light, normal;
}

/* The brass spine already on every panel gains a second, thinner rule at the
   top edge -- the way a bound board is cased in. */
.ww-panel::after,
.ww-card::after,
.ww-game-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 76, .38) 18%, rgba(201, 164, 76, .1) 70%, transparent);
  pointer-events: none;
}

/* --- The board room ------------------------------------------------------ */

/* Six board variants shared one flaw: `:nth-child(odd)` cannot draw a
   checkerboard. On any board with an even number of columns -- which is all of
   them at 8 and 10 wide -- odd children land in the same column every row, so
   the "checkerboard" rendered as vertical stripes, and at Midnight's two very
   close navies it rendered as nothing at all. Every board has been a flat grey
   field since it was written.
 *
 * The fix is to stop asking the cells. One marquetry tile is two squares by
 * two squares, so scaling it to 200%/columns lands one square exactly on one
 * cell, for any board size, with no per-variant arithmetic. The cells go
 * transparent and the board underneath is the board. */
.ww-strategy-board {
  border: 3px solid #3a2c1c;
  border-radius: .35rem;
  background-color: var(--club-walnut);
  background-image: var(--club-marquetry);
  background-size: calc(200% / var(--board-size, 8)) calc(200% / var(--board-size, 8));
  box-shadow:
    0 0 0 1px rgba(201, 164, 76, .55),
    0 0 0 5px #1a1109,
    0 0 0 6px rgba(201, 164, 76, .3),
    0 26px 60px rgba(0, 4, 12, .55),
    inset 0 0 60px rgba(0, 0, 0, .45);
}

.ww-board-cell,
.ww-board-cell:nth-child(odd) {
  background: transparent;
  border-color: rgba(201, 164, 76, .07);
}

.ww-board-cell:hover:not(:disabled),
.ww-board-cell:focus-visible {
  background: rgba(230, 205, 147, .1);
}

/* State edges must outrank the counter's material shadow below. A revealed
   rank keeps a brass edge; legal moves and selection take priority over it. */
.ww-board-cell.ww-board-cell--revealed {
  box-shadow: inset 0 0 0 2px var(--club-brass);
}
.ww-board-cell.ww-board-cell--legal,
.ww-board-cell.ww-board-cell--destination,
.ww-board-cell.ww-board-cell--destination-option {
  box-shadow: inset 0 0 0 3px var(--club-celadon);
}
.ww-board-cell.ww-board-cell--selected {
  box-shadow: inset 0 0 0 3px var(--club-brass-lit);
}

/* A played square is an inlaid counter, not a filled cell: rounded off the
   seam so the veneer reads around it, with a lit top edge and a dark underside
   so it sits *in* the board. The fills stay the flat, measured colours
   Midnight chose -- a counter that reads as an object is worth having, a
   gradient that costs a contrast measurement is not. */
.ww-owner-1 {
  border-radius: 24%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -3px 0 rgba(0, 0, 0, .4),
    0 2px 5px rgba(0, 0, 0, .5);
}

.ww-owner-2 {
  border-radius: 24%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -3px 0 rgba(44, 26, 14, .25),
    0 2px 5px rgba(0, 0, 0, .35);
}

/* In Tideflip (Reversi), stones are classic circular inlaid counters */
.ww-strategy-board[data-variant="reversi"] .ww-owner-1,
.ww-strategy-board[data-variant="reversi"] .ww-owner-2 {
  border-radius: 50%;
}

/* Railbound's route map was the last pastel left on a board table: a pale blue
   and mint gradient sitting on a midnight page, bright enough to be the first
   thing your eye landed on. */
.ww-route-map {
  background-color: #10243c;
  background-image: var(--club-grain), linear-gradient(135deg, rgba(31, 95, 78, .3), rgba(12, 29, 52, .6));
  background-size: 300px 300px, auto;
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 76, .16);
}

.ww-route { border-color: rgba(201, 164, 76, .45); }

/* Scrolltown's resource counters printed emoji -- a different illustrator's
   work on every operating system, and a blank glyph box on some. They are
   three brass marks now, drawn in the same hand as everything else. */
.ww-resource {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}

.ww-resource::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--club-resource) center / contain no-repeat;
  -webkit-mask: var(--club-resource) center / contain no-repeat;
}

.ww-resource--timber { --club-resource: url(/assets/club/res-timber-e8f9d96a7b2b81c2fb885135ae7896565f5ddb87b5277083d3955beecf182fb7.svg); }
.ww-resource--stone { --club-resource: url(/assets/club/res-stone-43b76294362925b9323c9ee393d4924bd64a61568529efe209d48551fa3f15e3.svg); }
.ww-resource--card { --club-resource: url(/assets/club/res-card-d9bb115254a6aa1ef81834ad27c9c900537a2908e9c9e3999912d960315aa305.svg); }

/* Railbound's route chips were sized against a 110px track and set at weight
   800, so half the routes on the board printed as "Bellweather — Nort" with
   the rest of the name and the card cost outside the pill. A route is allowed
   two lines and a track wide enough to hold a place name. */
.ww-route-map { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.ww-route {
  padding: .6rem .95rem;
  border-width: 2px;
  border-radius: 1.1rem;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}

/* Scrolltown is the one board that is printed rather than inlaid, and it was
   printed in highlighter: an amber field with candy pink, mint and sky spaces.
   It becomes a parchment board with washes in the club's own hues -- the same
   four categories, still four distinguishable colours, none of them shouting.
   The spaces stay light, which is what keeps their dark ink measuring well. */
.ww-scrolltown-board {
  border: 3px solid #3a2c1c;
  background-color: #e2d8c0;
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: multiply;
  box-shadow: 0 0 0 1px rgba(201, 164, 76, .5), 0 22px 55px rgba(0, 4, 12, .5);
}

.ww-scrolltown-space {
  border-color: #cabd9f;
  background: #f5efe2;
  color: #241a14;
  box-shadow: 0 2px 0 rgba(36, 26, 20, .16);
}

.ww-scrolltown-space--event { background: #eddcd6; border-color: #c6a094; }
.ww-scrolltown-space--bonus { background: #d9e5dc; border-color: #9cbaa8; }
.ww-scrolltown-space--rest { background: #dae1ea; border-color: #a3b1c6; }
.ww-scrolltown-space--start { background: #efe2c4; border-color: #c9a44c; }
.ww-scrolltown-space small { color: #5d5342; }
.ww-scrolltown-number { color: #5d5342; }

/* The ownership rings are a box-shadow on a class of the same specificity as
   the base space, so restyling the base from a later sheet silently wins the
   tie and takes the ring off the board. They are restated with the new drop
   shadow rather than left to lose it. */
.ww-scrolltown-space--owned-1 { box-shadow: inset 0 0 0 3px var(--ww-owner-1-bg), 0 2px 0 rgba(36, 26, 20, .16); }
.ww-scrolltown-space--owned-2 { box-shadow: inset 0 0 0 3px var(--ww-owner-2-bg), 0 2px 0 rgba(36, 26, 20, .16); }

/* --- The card room ------------------------------------------------------- */

/* The Night Deck was a Miami postcard -- hot pink, mint, cream, Archivo Black
   and a monospace body -- dropped into a navy club. It is the same room now:
   travertine and brass on midnight, a serif for display, and mono kept only
   where it earns its keep, on figures. */
.card-arcade,
.card-table-page {
  --card-ink: #0a1626;
  --card-cream: #efe7d6;
  --card-pink: #7d2233;
  --card-aqua: #a8c9bd;
  --card-gold: #c9a44c;
  --card-night: #0b1b31;
  font-family: var(--ww-font);
}

.card-arcade {
  color: var(--card-cream);
  background:
    radial-gradient(60rem 32rem at 12% -6%, rgba(31, 95, 78, .28), transparent 62%),
    radial-gradient(46rem 30rem at 96% 4%, rgba(125, 34, 51, .26), transparent 66%),
    linear-gradient(180deg, #0a1c31 0%, #081729 44%, #050e1b 100%);
}

.card-table-page {
  background:
    radial-gradient(46rem 30rem at 50% -4%, rgba(31, 95, 78, .3), transparent 64%),
    linear-gradient(180deg, #0a1c31, #071322 58%, #050d18);
}

/* The skyline canvas multiplied into a pastel dusk. Over midnight it can screen
   instead, which is what a lit window does to a night sky. */
.card-sky { mix-blend-mode: screen; opacity: .5; }

/* The page is dark now, so it carries light text -- but the Night Deck's
   marquee, nav, tickets and band are printed stock, and they inherited it. All
   sixty-two of the contrast failures this pass introduced were one omission:
   a light surface must restate its ink rather than trust the page's. */
.card-marquee,
.card-family-nav,
.card-game-ticket,
.card-lobby-band,
.card-new-table__ticket,
.card-showdown { color: var(--card-ink); }

.card-marquee,
.card-family-nav,
.card-lobby-band,
.card-new-table__ticket {
  background-color: var(--card-cream);
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: multiply;
  border-color: #2c2114;
}

.card-marquee { box-shadow: 8px 8px 0 #120c06, 14px 14px 0 rgba(125, 34, 51, .8); }
.card-marquee h1,
.card-family__heading span,
.card-game-ticket h2,
.card-waiting h2,
.card-showdown h2,
.card-empty-frequency span,
.card-history h2,
.card-new-table h1 {
  font-family: var(--ww-display);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: none;
}

.card-marquee__station,
.card-kicker,
.card-table-center__meta,
.card-table-nav,
.card-game-ticket__top {
  font-family: "DM Mono", ui-monospace, monospace;
}

/* A brass medallion instead of a striped sunset. */
.card-marquee__sun {
  background:
    repeating-linear-gradient(0deg, rgba(44, 33, 20, .5) 0 10px, transparent 11px 17px),
    linear-gradient(160deg, #e6cd93, #c9a44c 46%, #8a6a28);
  box-shadow: 0 0 0 10px rgba(31, 95, 78, .28), inset 0 2px 6px rgba(255, 255, 255, .4);
}

.card-marquee__sun span { border-top-color: #2c2114; }

/* Tickets: three shades of stone rather than cream, mint and bubblegum. */
.card-game-ticket { box-shadow: 6px 6px 0 #120c06; }
.card-game-ticket:nth-child(3n+2) { background-color: #e3ddcd; }
.card-game-ticket:nth-child(3n+3) { background-color: #e8dcc9; }
.card-game-ticket:hover { box-shadow: 10px 12px 0 #120c06; }
.card-game-ticket__glyph { color: rgba(125, 34, 51, .16); font-family: var(--ww-display); }
.card-play-btn { box-shadow: 3px 3px 0 var(--card-pink); }

/* The secondary action was a filled pastel mint, which on green felt read as a
   sweet rather than a chip. Outlined stone reads as the same family as the
   primary without competing with it, and keeps its contrast whether it is
   sitting on felt or on a printed ticket. */
.card-side-btn {
  color: var(--card-cream);
  background: rgba(10, 22, 38, .55);
  border-color: rgba(201, 164, 76, .55);
  box-shadow: none;
}

.card-game-ticket .card-side-btn,
.card-lobby-band .card-side-btn {
  color: var(--card-ink);
  background: rgba(255, 255, 255, .4);
  border-color: #2c2114;
}

/* The ticket packed a title, a blurb, an objective and a row of buttons into a
   fixed 300px box with the buttons absolutely positioned at the bottom. On any
   table whose blurb ran long the objective printed straight through the
   buttons, which was visible on six of the eleven tables and on all of them at
   phone width. It is a column now: the copy takes the room it needs and the
   actions sit under it. */
.card-game-ticket {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 0;
}

.card-game-ticket p { min-height: 0; }
.card-game-ticket__objective { max-width: 100%; color: #4a4335; }

.card-game-ticket__actions {
  position: static;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
}

/* --- The felt ------------------------------------------------------------ */

/* Billiard green under a brass rail, with the nap actually on it. The felt
   texture is anisotropic, so the light runs one way across the table the way
   it does on cloth. */
.card-table__felt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 0;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: 22px 24px 40px;
  border-radius: 120px / 65px;
  border-color: #a9873c;
  background-color: #123028;
  background-image: var(--club-felt), radial-gradient(ellipse at 50% 34%, #1e5544, #123028 62%, #0c211c);
  background-size: 300px 300px, auto;
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 0 0 7px #0a1c17,
    inset 0 0 0 8px rgba(201, 164, 76, .35),
    inset 0 0 90px rgba(0, 0, 0, .55),
    0 34px 90px rgba(0, 0, 0, .55);
}

/* The felt's watermark wrapped inside its own inset box and printed a second,
   rotated copy of itself over the first. It gets one line or none. */
.card-table__felt:after {
  inset: auto 4% 18px;
  overflow: hidden;
  color: rgba(233, 224, 203, .06);
  font: 15px var(--ww-display);
  letter-spacing: .34em;
  white-space: nowrap;
  text-overflow: clip;
}

.card-seat--north,
.card-opponent-hand,
.card-table-center,
.card-action-console,
.card-waiting {
  position: relative;
  inset: auto;
  width: 100%;
  transform: none;
}

.card-seat--north { justify-content: center; flex-wrap: wrap; }
.card-seat__badge { flex-shrink: 0; }
.card-seat strong { overflow-wrap: anywhere; }
.card-opponent-hand { padding: 0 12px 6px; overflow-x: auto; justify-content: safe center; }
.card-opponent-hand .playing-card { width: 56px; margin-left: -20px; }
.card-opponent-hand .playing-card:first-child { margin-left: 0; }
.card-table-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.card-table-center__meta { flex-wrap: wrap; gap: 8px 20px; margin: 0; text-transform: uppercase; }
.card-market-ticker { flex-basis: 100%; }
.card-seat--south { margin-bottom: 0; }
.card-player-hand {
  min-height: 0;
  justify-content: safe center;
  padding: 22px 12px 8px;
  overflow-x: auto;
}
.card-community { flex-basis: 100%; min-height: 0; gap: 8px; padding: 4px 0; }
.card-community:empty { display: none; }
.card-community .playing-card { margin: 0; width: min(82px, calc((100% - 32px) / 5)); }
.card-community__slot {
  display: grid;
  place-items: center;
  width: min(82px, calc((100% - 32px) / 5));
  aspect-ratio: .7;
  border: 1px dashed #749c88;
  border-radius: 7px;
  color: #cce1d6;
  background: #123028;
  font: 10px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.card-pot {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding: 8px 16px 8px 10px;
  border: 1px solid rgba(201, 164, 76, .4);
  border-radius: 30px;
  background: #0c211c;
  color: #f5efe2;
  text-align: left;
}
.card-pot small { display: block; color: #cce1d6; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.card-pot strong { font: 600 17px "DM Mono", monospace; }
.card-waiting { max-width: 580px; padding: 24px 0; }
.card-showdown { width: 100%; max-width: 600px; margin: 16px auto 0; }
.card-action-console__buttons { margin-top: 8px; }
.card-resign { right: 30px; bottom: 16px; }
.card-draw-pile { text-align: center; color: #cce1d6; font-size: 12px; }
.card-draw-pile .card-deck-stack { width: 54px; height: 77px; margin: 0 auto 12px; }
.card-draw-pile .card-deck-stack span:nth-child(2) { --i: 1; }
.card-draw-pile .card-deck-stack span:nth-child(3) { --i: 2; }

@media (max-width: 560px) {
  .card-table__felt { gap: 14px; padding: 22px 14px 40px; border-radius: 44px; }
  .card-opponent-hand .playing-card { width: 42px; }
  .card-community { gap: 5px; }
  .card-community .playing-card,
  .card-community__slot { width: min(54px, calc((100% - 20px) / 5)); }
  .card-community__slot { font-size: 8px; }
  .card-seat { gap: 7px; }
  .card-seat strong { font-size: 14px; }
  .card-player-hand { padding-inline: 4px; }
  .card-action-console__buttons { gap: 8px; }
}

/* Cards are ivory stock with a warm edge, not office white on grey. */
.playing-card {
  flex-shrink: 0;
  border-color: #2c2114;
  background: #f5efe2;
  box-shadow: 0 5px 0 #b9ac91, 0 9px 20px rgba(0, 0, 0, .45);
}

.playing-card.is-red { color: #a8182f; }
.playing-card__rank,
.playing-card__pip,
.playing-card__suit { font-family: var(--ww-display); }

/* Shared vector suits and two readable indices, with no duplicated spoken
   text. The corners remain inside a 44px solitaire card. */
.playing-card--spades { --card-suit: url(/assets/club/suit-spades-9b4e154dbee909c155026bcf73ffdd3ca592ecbdcf887d7c917f343309fb0d7e.svg); }
.playing-card--hearts { --card-suit: url(/assets/club/suit-hearts-b75007f31d66dadaddc8edc60233fdae1200225ff89f0cbb8b99b86818176b63.svg); }
.playing-card--diamonds { --card-suit: url(/assets/club/suit-diamonds-3f7d7f0fb54af01360b600bfb5c7231bdf734fd9210ce15154ae12b0ac14c20f.svg); }
.playing-card--clubs { --card-suit: url(/assets/club/suit-clubs-cf95922aca613b9ca62c6ecf831bb8783ae97e8d834366a5664cb6e30f3d35c9.svg); }
.playing-card__corner {
  position: absolute;
  top: 5px;
  left: 5px;
  display: grid;
  justify-items: center;
  gap: 1px;
}
.playing-card__corner--lower { inset: auto 5px 5px auto; transform: rotate(180deg); }
.playing-card .playing-card__rank { position: static; font-size: 17px; line-height: 1; }
.playing-card .playing-card__suit,
.playing-card .playing-card__pip {
  display: block;
  background: currentColor;
  mask: var(--card-suit) center / contain no-repeat;
  -webkit-mask: var(--card-suit) center / contain no-repeat;
}
.playing-card .playing-card__suit { position: static; width: 11px; height: 11px; }
.playing-card .playing-card__pip { inset: 50% auto auto 50%; width: 36%; height: 28%; transform: translate(-50%, -50%); }
.card-opponent-hand .playing-card__rank { font-size: 12px; }
.card-opponent-hand .playing-card__suit { width: 9px; height: 9px; }
.playing-card:has(.playing-card__select) .playing-card__corner--lower { display: none; }
.playing-card:focus-within { outline: 3px solid var(--club-brass-lit); outline-offset: 3px; }
.playing-card.is-dealt {
  transform: rotate(clamp(-3deg, calc((var(--deal-index, 0) - 3) * 1deg), 3deg));
  transition-delay: min(calc(var(--deal-index, 0) * 35ms), 210ms);
}
.playing-card.is-selected { transform: translateY(-16px); }
.card-community .playing-card.is-dealt { transform: none; }
@media (max-width: 560px) {
  .playing-card .playing-card__rank { font-size: 12px; }
  .playing-card .playing-card__suit { width: 9px; height: 9px; }
  .playing-card__corner { top: 4px; left: 4px; }
  .playing-card__corner--lower { inset: auto 4px 4px auto; }
}

/* The back was a magenta-and-navy barber pole. It is a drawn guilloché now:
   diamond lattice, double brass keyline, lozenge and star. One asset covers
   every hidden card on eleven tables and the solitaire stock. */
.playing-card__back {
  inset: 0;
  border: 0;
  border-radius: 5px;
  background: var(--club-card-back) center / 100% 100% no-repeat;
}

.playing-card__back span { display: none; }

.card-deck-stack span {
  border-color: #2c2114;
  background: var(--club-card-back) center / 100% 100% no-repeat;
}

.solitaire-foundation { border-color: rgba(201, 164, 76, .4); }
.card-showdown { border-color: #2c2114; box-shadow: 6px 6px 0 rgba(125, 34, 51, .9); }
.card-table-error { border-color: #d0798a; background: #641c2c; }
.card-market-ticker em { color: var(--club-celadon); }
.card-history-chip strong { color: var(--club-brass-lit); }

/* --- The loom ------------------------------------------------------------ */

/* Wordweave already knew what it was -- a felt board beside a paper tray, set
   in Fraunces and DM Mono. It needed no retheme, only the materials it was
   already describing: nap on the board, tooth on the tray. */
.weave-board {
  background-color: #0b2a25;
  background-image: var(--club-felt);
  background-size: 300px 300px;
  background-blend-mode: overlay;
  box-shadow: 0 0 0 1px rgba(201, 164, 76, .26), 0 20px 50px rgba(6, 24, 20, .5);
}

.weave-tray,
.weave-panel {
  background-color: var(--ww-weave-paper);
  /* A paper wash leaves a tenth of the grain, without fading the tray's ink. */
  background-image: linear-gradient(
    color-mix(in srgb, var(--ww-weave-paper) 90%, transparent),
    color-mix(in srgb, var(--ww-weave-paper) 90%, transparent)
  ), var(--club-grain);
  background-size: auto, 300px 300px;
  background-blend-mode: normal, multiply;
}

.weave-tray { box-shadow: 10px 10px 0 #0d2d27, 0 0 0 1px rgba(44, 33, 20, .16); }

/* --- The hive ------------------------------------------------------------ */

/* Medallion: a marble vitrine desk, gilt center seal, ivory enamel rosette. */
.sb-shell {
  background-color: var(--ww-paper);
  background-image: var(--club-marble), var(--club-grain);
  background-repeat: repeat, repeat;
  background-size: 32px 32px, 300px 300px;
  background-blend-mode: soft-light, multiply;
}

.sb-table :is(.sb-rank-card, .sb-words-panel, .sb-duel-status, .sb-hints-dialog),
.sb-lobby :is(.sb-hero, .sb-panel) {
  background-color: var(--ww-paper-2);
  background-image: linear-gradient(
    color-mix(in srgb, var(--ww-paper-2) 93%, transparent),
    color-mix(in srgb, var(--ww-paper-2) 93%, transparent)
  ), var(--club-grain);
  background-size: auto, 300px 300px;
  background-blend-mode: normal, multiply;
  border-color: var(--club-brass-dim);
}

/* --- The cabinet --------------------------------------------------------- */

/* The arcade catalog laid each cabinet out as a row -- icon, copy, a 170px
   column of buttons -- inside a 250px grid track. The copy was squeezed to
   about thirty pixels and broke one word per line, and the buttons overflowed
   the card entirely. Seven cabinets, every one of them, at every width above
   the 760px breakpoint that already stacked them.
 *
 * A cabinet is a card: mark, then name, then copy, then actions across the
   foot. The track minimum goes up to match. */
.arcade-catalog,
.arcade-open-grid { grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 26vw, 19rem), 1fr)); }

.arcade-ticket {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .9rem;
  align-items: start;
  align-content: start;
  padding: 1.15rem;
  background-color: #0c1d34;
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  border-color: rgba(201, 164, 76, .2);
}

.arcade-ticket > i {
  color: var(--club-brass);
  font-size: 1.6rem;
  line-height: 1;
  padding-top: .15rem;
}

.arcade-ticket div { flex: none; }
.arcade-ticket h2 { font-family: var(--ww-display); font-size: 1.15rem; }
.arcade-ticket small { color: var(--club-brass); }

.arcade-ticket-actions {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(201, 164, 76, .16);
}

/* Triad's fronts are baize in the club's own green; the table itself is the
   grained navy every other card room sits on. Colour and layout live in
   triad.css -- this layer only lays the material. */
.triad-table {
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
}

.triad-lane {
  background-image: var(--club-felt);
  background-size: 300px 300px;
  background-blend-mode: overlay;
}

/* A marble check, at the strength of a watermark, is the club's one piece of
   pattern -- the lounge floor showing through the hero panels and nowhere
   else. A checkerboard is a floor; a floor that turns up in six places is
   wallpaper.
 *
 * It goes into the hero's own background stack rather than onto a pseudo
   element. ::before is already spoken for by Midnight's brass keyline, and an
   ::after would paint above the hero's in-flow text -- a positioned element at
   z-index 0 beats unpositioned siblings -- which is a tint over the headline,
   not a floor under it. */
.ww-lobby-hero,
.ww-board-promo,
.ww-casino-hero,
.ww-arena-hero {
  background-color: #0a1b31;
  background-image:
    var(--club-marble),
    radial-gradient(38rem 18rem at 12% 0%, rgba(59, 129, 225, .25), transparent 66%),
    linear-gradient(145deg, #10294a 0%, #0a1b31 62%, #071526 100%);
  background-size: 30px 30px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  border-top-color: rgba(227, 199, 139, .4);
}

/* --- Motion and forced colours ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card-sky { opacity: .3; }
  .playing-card.is-dealt { transform: none; transition: none; }
}

@media (forced-colors: active) {
  body::before,
  body::after,
  .card-sky { display: none; }

  .ww-strategy-board,
  .card-table__felt,
  .playing-card__back { background-image: none; }
  .playing-card .playing-card__suit,
  .playing-card .playing-card__pip { background: CanvasText; forced-color-adjust: none; }
}

/* --- The Emerald Lounge -------------------------------------------------- */
/*
 * The arcade was the last room in the club still dressed as somebody else's
 * product: pale mint reels on a green-baize gradient, three candy eggs, and a
 * memory board of emoji. Emoji is a different illustrator's work on every
 * operating system and a blank glyph box on some, which is exactly the
 * argument that took it off Scrolltown's resource counters -- a slot machine
 * whose cherries render as tofu cannot be read at all.
 *
 * The symbols are now names in the model and drawn marks here, masked from
 * `currentColor` so a reel picks its own ink and a matched pair can light up
 * without a second file.
 */

.ww-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--club-mark) center / contain no-repeat;
  -webkit-mask: var(--club-mark) center / contain no-repeat;
}

.ww-mark--cherry { --club-mark: url(/assets/club/mark-cherry-116e4bf52b4af8868ded7f398174f7053b8d175fe071139b828d8ee1bdae6547.svg); }
.ww-mark--lemon { --club-mark: url(/assets/club/mark-lemon-fabe0f1b4499630bda8c985ed88b775e384799e96405422d16e4413e2a0071ea.svg); }
.ww-mark--diamond { --club-mark: url(/assets/club/mark-diamond-6ef7ee5f4fc61a0f73582fcd5a32f1e9a2a234b1d0a8576f2ca0ae082fd47a70.svg); }
.ww-mark--seven { --club-mark: url(/assets/club/mark-seven-8f704867fd7ff454e17eef93e28eb6fe5b8f5b9b23b952d3d09aa0d548e1c0e0.svg); }
.ww-mark--rosette { --club-mark: url(/assets/club/mark-rosette-30bfde5c3865f833a3e653322f45e88bdce784471fa717c6afc8d85f16c362fa.svg); }
.ww-mark--crescent { --club-mark: url(/assets/club/mark-crescent-60446beadfe6bca23f31d1be1ee40eb06a89ae3f0a671eb15f7b0238d2be7d01.svg); }
.ww-mark--hourglass { --club-mark: url(/assets/club/mark-hourglass-0c987671a340280f5fafe5cc60fa5e7b0ce35605a6b7b63e15923aa45ce93a09.svg); }
.ww-mark--key { --club-mark: url(/assets/club/mark-key-bbaa2f22efff1e8108cb5945d3893cec1e63b4b61224811235eed26c716b64df.svg); }
.ww-mark--compass { --club-mark: url(/assets/club/mark-compass-bf2221cade1b78d483caeecc7fe8ec5903db71103fc55effcecb04cc8806c140.svg); }
.ww-mark--lantern { --club-mark: url(/assets/club/mark-lantern-80acd2b28dc6dbed37c4d1762f55f1553cc3d894a99ad80514ac6b8d911b7be9.svg); }
.ww-mark--egg { --club-mark: url(/assets/club/mark-egg-418c59d879f24905ee05be97e38fcd8550219d33bc8c5cfc3fe052185becaa63.svg); }
.ww-mark--door { --club-mark: url(/assets/club/mark-door-9116d454abc0ba88cc63951333f7659dcaf242a89e5027540e2dc15f1f09d36d.svg); }
.ww-mark--basket { --club-mark: url(/assets/club/mark-basket-2b6d735ffc4d9eacaaafeed1a77f4b793c77d9e7416fb9fe4997692f8e5370da.svg); }

/* The table itself. It used to sit hard against the top-left of a 3xl column
   with seven hundred pixels of empty room beneath it; a three-reel machine is
   a small object and wants to be centred on its own stand, not parked. */
.ww-casino-table {
  max-width: 46rem;
  margin-inline: auto;
  background-color: #0c1e37;
  background-image: var(--club-grain), linear-gradient(160deg, #12294a, #091829 74%);
  background-size: 300px 300px, auto;
  background-blend-mode: soft-light, normal;
  border: 1px solid rgba(201, 164, 76, .28);
  box-shadow: 0 22px 48px rgba(0, 4, 12, .38);
}

/* --- Pixel Slots --- */

/* A reel is a window onto a drum, so it is deeper than it is wide, inset
   rather than raised, and its ink is brass on walnut. The pale mint plastic
   this replaces was the last off-palette surface named in the September 9
   pass. */
.ww-slot-machine {
  padding: 1.6rem 1.25rem 1.25rem;
  border-radius: 1.1rem;
  background-color: #0a1729;
  background-image: linear-gradient(180deg, rgba(201, 164, 76, .1), transparent 30%);
  border: 1px solid rgba(201, 164, 76, .3);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 14px 30px rgba(0, 4, 12, .35);
}

.ww-reels { gap: .6rem; margin: 0 0 1rem; }

.ww-slot-machine .ww-reel,
.ww-reels span.ww-reel {
  width: clamp(4.6rem, 17vw, 6.2rem);
  height: clamp(5.6rem, 21vw, 7.4rem);
  color: var(--club-brass-lit);
  background-color: #241a14;
  background-image: linear-gradient(180deg,
    rgba(0, 0, 0, .72) 0%,
    rgba(0, 0, 0, .28) 16%,
    rgba(255, 255, 255, .07) 46%,
    rgba(255, 255, 255, .04) 54%,
    rgba(0, 0, 0, .3) 84%,
    rgba(0, 0, 0, .72) 100%);
  border: 1px solid rgba(201, 164, 76, .42);
  border-radius: .7rem;
  box-shadow: inset 0 1px rgba(230, 205, 147, .18), 0 10px 22px rgba(0, 4, 12, .4);
  font-size: 1rem;
}

.ww-mark, .ww-mark-fallback {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ww-mark-fallback { background: none; }

.ww-reel .ww-mark { width: 2.6em; height: 2.6em; }

/* The four symbols are told apart by silhouette first; the ink only confirms
   what the shape already said, which is what keeps the reels readable in
   forced colours and to a player who cannot separate the hues. */
.ww-slot-machine .ww-reel--cherry { color: #dd8f8f; }
.ww-slot-machine .ww-reel--lemon { color: #e2c473; }
.ww-slot-machine .ww-reel--diamond { color: #9fd0e8; }
.ww-slot-machine .ww-reel--seven { color: #f0dca8; }

.ww-mark-fallback { font-family: var(--ww-mono); font-size: 2.2rem; font-weight: 800; opacity: .5; }

.ww-slot-machine--settled { box-shadow: inset 0 0 0 1px rgba(230, 205, 147, .3), 0 0 0 1px rgba(201, 164, 76, .3), 0 18px 36px rgba(0, 4, 12, .45); }

/* --- Island Shuffle --- */

.ww-eggs { align-items: stretch; }
.ww-eggs > form { display: grid; }

.ww-eggs .ww-egg {
  height: 100%;
  color: #eef3fb;
  background-color: #10233d;
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
  border: 1px solid rgba(201, 164, 76, .3);
  border-radius: .9rem;
}

.ww-egg-mark {
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0 auto .5rem;
  color: var(--club-brass-lit);
}

.ww-egg small { color: #a9bad2; }

.ww-eggs .ww-egg--winner {
  color: #1a1204;
  background-color: #d8b96a;
  background-image: linear-gradient(145deg, #f0dca8, #c9a44c);
  border-color: #f0dca8;
}

.ww-egg--winner .ww-egg-mark,
.ww-egg--winner small { color: #3a2a08; }

/* --- Power Pair --- */

/* A face-down card shows the same guilloché back as the Night Deck, so the two
   card surfaces in the collection are recognisably the same deck. Midnight
   draws the face-down state with a `?` in a `::after` rather than in the DOM,
   which is the right mechanism -- the model must not tell the page what a
   hidden card is -- so this replaces the glyph in place rather than adding a
   second one. */
.ww-flip-card:not(.ww-flip-card--matched):not(.ww-flip-card--revealed) > input:not(:checked) + span::after {
  content: "";
  inset: 12%;
  background: var(--club-card-back) center / contain no-repeat;
}

.ww-flip-card > span {
  color: var(--club-brass-lit);
  background-color: #0d1e36;
  background-image: none;
  border: 1px solid rgba(201, 164, 76, .3);
  border-radius: .7rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 8px 18px rgba(0, 4, 12, .3);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.ww-flip-card > span:hover { transform: translateY(-2px); }

.ww-flip-card__face { display: grid; place-items: center; font-size: 1rem; }
.ww-flip-card__face .ww-mark { width: 2.2em; height: 2.2em; }

.ww-flip-card--revealed > span { border-color: rgba(230, 205, 147, .6); }

.ww-flip-card--matched > span {
  color: #0a1f19;
  background-color: var(--club-celadon);
  background-image: linear-gradient(145deg, #c6ddd3, #8fb6a8);
  border-color: #cfe3da;
}

.ww-flip-card input:checked + span { outline: 3px solid var(--club-brass-lit); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ww-flip-card > span { transition: none; }
  .ww-flip-card > span:hover { transform: none; }
}

@media (forced-colors: active) {
  .ww-mark { background: CanvasText; forced-color-adjust: none; }
}

/* Word-puzzle gift-shop plates: marble, gilt, silk. Texture over an opaque
   tone so the contrast audit reads the same colour a player sees. */
.wp-kindred-tile {
  background-color: var(--ww-paper-2);
  background-image: var(--club-marble);
  background-size: 180px 180px;
}

.wp-kindred-plaque--3,
.wp-kindred-plaque--4,
.wp-mat {
  background-image: var(--club-grain);
}

.wp-motif .wp-tile {
  background-image: var(--club-marble);
  background-size: 80px 80px;
}

.wp-frame {
  background-image: var(--club-grain);
}

.wp-black {
  background-image: var(--club-marble);
  background-size: 64px 64px;
}

/* Ink's grid is a printed newspaper sheet: flat ink, no stone. */
.wp-sheet .wp-black { background-image: none; }

/* ===== Toy plastic: the turntables' material =====
 *
 * The lazy susan and the spiral stair (turntable.css) are the one place the
 * club lets its hair down: clear, coloured plastic like a 90s see-through
 * handset, pressed with the deep travel of a nursery toy, with brick studs on
 * the brass. Each control names its plastic with --toy and the rest derives.
 * The base under the gloss is opaque, so the contrast audit reads the colour
 * a player sees; the clear look comes from the ribs and the light through the
 * lower half.
 */
:root {
  --toy-oxblood: color-mix(in oklch, var(--club-oxblood) 96%, var(--club-travertine) 4%);
  --toy-jade: color-mix(in oklch, var(--club-jade) 98%, var(--club-travertine) 2%);
  --toy-smoke: color-mix(in oklch, var(--ww-navy, var(--club-walnut)) 90%, var(--club-celadon) 10%);
  --toy-brass: var(--club-brass);
  --toy-ink: var(--club-travertine);
  --toy-gloss: color-mix(in oklch, var(--club-travertine) 42%, transparent);
  --toy-rib: color-mix(in oklch, var(--club-travertine) 7%, transparent);
  --toy-shade: color-mix(in oklch, var(--club-walnut) 70%, transparent);
}

.ww-stair :is(.ww-btn, .card-play-btn, .card-side-btn, .card-text-link),
.ww-susan__seat :is(.ww-btn),
.ww-susan__turn {
  --toy: var(--toy-smoke);
  position: relative;
  border: 1px solid color-mix(in oklch, var(--toy), var(--club-travertine) 28%);
  border-radius: .95rem;
  color: var(--toy-ink);
  background:
    linear-gradient(180deg, var(--toy-gloss) 0 10%, color-mix(in oklch, var(--club-travertine) 8%, transparent) 38%, transparent 52%),
    radial-gradient(120% 70% at 50% 100%, color-mix(in oklch, var(--toy), var(--club-travertine) 26%) 0, transparent 70%),
    repeating-linear-gradient(90deg, var(--toy-rib) 0 1px, transparent 1px 6px),
    var(--toy);
  box-shadow:
    inset 0 -5px 0 color-mix(in oklch, var(--toy), var(--club-walnut) 45%),
    inset 0 1px 0 var(--toy-gloss),
    0 2px 0 var(--toy-shade);
  font-weight: 800;
  font-size: max(.9rem, 1em);
  text-decoration: none;
  text-shadow: 0 1px 0 color-mix(in oklch, var(--toy), var(--club-walnut) 50%);
  transition:
    transform var(--ww-dur-micro) var(--ww-ease-out),
    box-shadow var(--ww-dur-micro) var(--ww-ease-out),
    filter var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-stair .ww-btn-primary,
.ww-stair .card-play-btn,
.ww-susan__seat .ww-btn-primary { --toy: var(--toy-oxblood); }
.ww-stair .ww-btn-secondary,
.ww-stair .card-side-btn,
.ww-susan__seat .ww-btn-secondary { --toy: var(--toy-jade); }

@media (hover: hover) {
  .ww-stair :is(.ww-btn, .card-play-btn, .card-side-btn, .card-text-link):not(:disabled):hover,
  .ww-susan__seat .ww-btn:not(:disabled):hover,
  .ww-susan__turn:hover {
    filter: brightness(1.12) saturate(1.1);
    border-color: var(--club-brass-lit);
  }
}

.ww-stair :is(.ww-btn, .card-play-btn, .card-side-btn, .card-text-link):not(:disabled):active,
.ww-susan__seat .ww-btn:not(:disabled):active,
.ww-susan__turn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 -2px 0 color-mix(in oklch, var(--toy), var(--club-walnut) 45%),
    inset 0 1px 0 var(--toy-gloss);
}

.ww-stair :is(.ww-btn, .card-play-btn, .card-side-btn):disabled,
.ww-susan__seat .ww-btn:disabled {
  filter: grayscale(.7);
  opacity: .6;
  cursor: not-allowed;
}

/* Brick studs on the plastic that matters most on each stair. */
.ww-stair :is(.ww-btn-primary, .card-play-btn)::after {
  content: "";
  position: absolute;
  top: -.55rem;
  left: 50%;
  width: 2.9rem;
  height: .62rem;
  translate: -50% 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 30%, color-mix(in oklch, var(--toy), var(--club-travertine) 35%) 0 55%, transparent 60%) 0 0 / 1.1rem 100% no-repeat,
    radial-gradient(ellipse 50% 40% at 50% 30%, color-mix(in oklch, var(--toy), var(--club-travertine) 35%) 0 55%, transparent 60%) 100% 0 / 1.1rem 100% no-repeat,
    linear-gradient(90deg, var(--toy) 0 1.1rem, transparent 1.1rem 1.8rem, var(--toy) 1.8rem) 0 .2rem / 100% .42rem no-repeat;
  border-radius: .25rem .25rem 0 0;
  pointer-events: none;
}

/* The newel: turned brass with a stud for a cap. Treads hang off it on brass
   brackets. */
.ww-stair::before {
  background: linear-gradient(90deg, color-mix(in oklch, var(--club-brass), var(--club-walnut) 45%), var(--club-brass-lit) 45%, var(--club-brass) 65%, color-mix(in oklch, var(--club-brass), var(--club-walnut) 55%));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--club-walnut) 60%, transparent);
}
.ww-stair::after {
  background: radial-gradient(circle at 35% 30%, var(--club-brass-lit) 0 22%, var(--club-brass) 46%, color-mix(in oklch, var(--club-brass), var(--club-walnut) 50%) 100%);
  box-shadow: 0 2px 0 color-mix(in oklch, var(--club-walnut) 70%, transparent);
}
.ww-stair__step::before {
  background: linear-gradient(180deg, var(--club-brass-lit), color-mix(in oklch, var(--club-brass), var(--club-walnut) 40%));
}

/* Night Deck's tickets are cream card: the plastic darkens to the deck's ink
   so its light lettering still reads, and the clear chip is ink smoke. */
.card-game-ticket .ww-stair { --toy-smoke: color-mix(in oklch, var(--card-ink, var(--club-walnut)) 94%, var(--club-celadon) 6%); }

/* ----- The lazy susan's seats, plate and board ----- */

.ww-susan__seat {
  --hue: var(--toy-brass);
  border: 1px solid color-mix(in oklch, var(--hue), var(--club-travertine) 20%);
  border-top-width: 6px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--club-travertine) 10%, transparent) 0, transparent 22%),
    repeating-linear-gradient(90deg, var(--toy-rib) 0 1px, transparent 1px 9px),
    color-mix(in oklch, var(--ww-navy, var(--club-walnut)) 90%, var(--hue) 10%);
  color: var(--ww-ink);
  box-shadow: inset 0 -6px 0 color-mix(in oklch, var(--hue) 55%, var(--club-walnut));
  transition: border-color var(--ww-dur-short) var(--ww-ease-out), box-shadow var(--ww-dur-short) var(--ww-ease-out);
}
.ww-susan__seat[data-hue="jade"] { --hue: var(--toy-jade); }
.ww-susan__seat[data-hue="oxblood"] { --hue: var(--toy-oxblood); }
.ww-susan__seat[data-hue="sky"] { --hue: var(--ww-sky, var(--club-celadon)); }
/* The folio's slate is tuned for the cream cards; on a seat's navy it needs the soft ink. */
.ww-susan__seat .ww-card-folio { color: var(--ww-ink-soft); }
.ww-susan__seat[data-front] {
  border-color: var(--club-brass-lit);
  box-shadow:
    inset 0 -6px 0 color-mix(in oklch, var(--hue) 70%, var(--club-walnut)),
    0 0 0 1px var(--club-brass);
}

.ww-susan__disc {
  background:
    repeating-conic-gradient(from 0deg, var(--club-brass-lit) 0 1.1deg, color-mix(in oklch, var(--club-brass), var(--club-walnut) 55%) 1.1deg 2deg, transparent 2deg 6deg),
    var(--club-brass);
  -webkit-mask: radial-gradient(circle, #000 0 70.5%, transparent 71%);
  mask: radial-gradient(circle, #000 0 70.5%, transparent 71%);
}
/* Inside the studded rim: a thin band of the seats' three plastics, then the
   walnut top. */
.ww-susan__disc::before,
.ww-susan__disc::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.ww-susan__disc::before {
  inset: 4%;
  background: repeating-conic-gradient(from -20deg, var(--toy-jade) 0 40deg, var(--toy-oxblood) 40deg 80deg, color-mix(in oklch, var(--ww-sky, var(--club-celadon)), var(--club-walnut) 35%) 80deg 120deg);
}
.ww-susan__disc::after {
  inset: 7%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--club-walnut), var(--club-brass) 14%) 0, var(--club-walnut) 60%, color-mix(in oklch, var(--club-walnut), black 35%) 100%);
  box-shadow: 0 0 0 2px var(--club-brass), inset 0 0 0 1px var(--club-brass-dim);
}

.ww-susan__board {
  background: color-mix(in oklch, var(--club-walnut), black 25%);
  box-shadow: inset 0 0 0 1px var(--club-brass-dim), 0 0 0 1px color-mix(in oklch, var(--club-brass), var(--club-walnut) 40%);
}

.ww-susan__board span {
  color: var(--club-travertine);
  background:
    linear-gradient(180deg, transparent calc(50% - .5px), color-mix(in oklch, var(--club-walnut), black 50%) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(180deg, color-mix(in oklch, var(--club-walnut), var(--club-travertine) 8%), color-mix(in oklch, var(--club-walnut), black 30%));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--club-brass) 35%, transparent);
}

.ww-susan__pip {
  border: 1px solid color-mix(in oklch, var(--club-brass), var(--club-walnut) 40%);
  background: radial-gradient(circle at 35% 30%, var(--club-brass-lit) 0 20%, var(--club-brass) 50%, color-mix(in oklch, var(--club-brass), var(--club-walnut) 45%) 100%);
  box-shadow: 0 2px 0 color-mix(in oklch, var(--club-walnut) 70%, transparent);
  opacity: .55;
  transition: opacity var(--ww-dur-micro) var(--ww-ease-out), transform var(--ww-dur-micro) var(--ww-ease-out);
}
.ww-susan__pip[aria-pressed="true"] { opacity: 1; transform: scale(1.25); }
@media (hover: hover) { .ww-susan__pip:hover { opacity: .9; } }
.ww-susan__pip:active { transform: scale(.9); }

/* Lamplight lies over the room and only adds light, but never over a game:
   a lit mote on a board reads as a mark (a red one looked like a flagged
   fault on Emerald Sweep and a live wall on Wallwright). It sits at the root
   stacking level, after #main-content, so it still screens every ordinary
   page surface; the chrome (topbar, dock, dialogs) already stands above it,
   and each play surface below is lifted one step over it. */
.ww-lamplight {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s var(--ww-ease-out);
}
.ww-lamplight.is-lit { opacity: 1; }
.ww-arcade-bezel,
.ww-arena-viewport,
.ww-strategy-board,
.ww-grid-board {
  position: relative;
  z-index: 1;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

input[type="submit"][disabled], button[disabled], .ww-btn[aria-busy="true"] {
  cursor: not-allowed;
  opacity: .62;
}

/* Production UI contract. This manifest is loaded after the themed layers, so
   shared interaction and legibility rules stay consistent across every game. */
:root {
  --ww-font: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ww-display: "Fraunces", Georgia, serif;
  --ww-focus: #f8d477;
  --ww-control-min: 44px;
}

html { scroll-behavior: smooth; }
/* Set while Turbo is replacing the page; see app/javascript/application.js. */
html.ww-instant-scroll { scroll-behavior: auto; }
body { font-family: var(--ww-font); line-height: 1.5; }
.ww-share-feedback { margin: .5rem 0 0; font-size: .875rem; color: #dce6f3; }
.ww-share-feedback:empty { margin: 0; }
.ww-share-manual { margin-top: .75rem; text-align: left; }
.ww-share-manual textarea { display: block; width: 100%; margin-top: .35rem; resize: vertical; }
[data-share-target="url"] { min-width: 0; }
.ww-chat-errors:not(:empty) { padding: .75rem 1rem; color: #ffd3cc; }
.ww-chat-form .ww-chat-input { min-width: 0; width: 0; }
.ww-chat-form [data-chat-target="submit"] { flex-shrink: 0; }
button, input, select, textarea { font: inherit; }

p, li, dd, .ww-help-popover-content, .ww-game-card p,
.ww-discover-card span, .card-game-ticket p {
  line-height: 1.55;
}

.text-slate-500, .text-gray-500, .text-gray-600,
.text-slate-600, .ww-empty-state p {
  color: #b7c5d8 !important;
}

/* Crossword squares (.wp-cell) are exempt: a 21x21 grid cannot give each
   square 44px on a phone. The grid is solved from the keyboard, with the
   cursor, clue list and arrow keys as the large targets. */
.ww-btn, .ww-sidebar-cta, .ww-icon-btn, .ww-menu-toggle,
.ww-dock-item, .ww-board-cell, .ww-touch-control, .ww-feedback__tab, select,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.wp-cell) {
  min-height: var(--ww-control-min);
}

.ww-btn, .ww-sidebar-cta, .ww-dock-item, .ww-filter-chip,
.ww-discover-card, .ww-challenge-card, .ww-game-card-actions a,
.ww-game-card-actions button, .ww-feedback__tab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Touch has no hover, but a tap still latches :hover -- on the element and on
   every ancestor -- until the next tap lands somewhere else. Twenty-odd
   components across the collection lift and drop a shadow on hover, so on a
   phone (a capture width here, and how most of these games are actually
   played) a tapped card stays hoisted behind the board it just opened.

   Only the spatial half of hover is suppressed. Colour and border still shift,
   so a tap keeps its feedback. The selectors are spelled out at the specificity
   of the rules they answer rather than as `*:hover`, because the universal
   selector would also strip the resting shadow off every panel in the tapped
   element's ancestor chain -- and because this manifest is the last layer, they
   win on order without reaching for !important.

   Only `transform` is reset, and deliberately so. Every component below rests
   at `transform: none`, so neutralising it restores exactly the resting state.
   `box-shadow` does not: the brass insets on .ww-btn-primary, the hard offset
   shadow on .card-game-ticket and the 4px base under .weave-tile are all
   resting values, and a blanket `box-shadow: none` would flatten them for as
   long as the tap stayed latched -- trading a subtle bug for a louder one. The
   shadow deepening under a latched finger is tolerable; the element moving is
   not.

   Keep this list in step with hover rules that set transform:
     grep -n ':hover' app/assets/stylesheets/*.css */
@media (hover: none) {
  .ww-btn:hover,
  .ww-card:hover,
  .ww-game-card:hover,
  .ww-play-card:hover,
  .ww-play-card--ghost:hover,
  .ww-discover-card:hover,
  .ww-challenge-card:hover,
  .ww-roster-card:hover,
  .ww-arena-challenge.is-link:hover,
  .ww-sidebar-cta:hover,
  .ww-filter-chip:hover,
  .ww-sound-toggle:hover,
  button.ww-quick-wager:hover,
  .ww-eggs button.ww-egg:hover,
  .ww-guess-tile.ww-tile-revealed .ww-guess-tile-inner:hover,
  .letter-btn .btn:hover,
  .guess-item:hover,
  .weave-button:hover,
  .weave-tile:hover,
  .card-game-ticket:hover,
  .moon-stall:hover {
    transform: none;
  }

  /* The one place a latched hover paints a ring rather than a lift. A weave
     cell rests with no shadow, so clearing it is exact; `.is-start` carries the
     same ring from its own selector and keeps it. */
  .weave-cell:hover {
    box-shadow: none;
  }
}

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex="0"]:focus-visible,
/* A pad moves focus by script, which a browser does not always count as
   keyboard focus; while a pad is driving, every focus shows its ring. */
html[data-pad-active] :focus:not(iframe) {
  outline: 3px solid var(--ww-focus) !important;
  outline-offset: 3px !important;
}

summary { cursor: pointer; }
.ww-btn[disabled], button[disabled], input[disabled] {
  filter: grayscale(.25);
  box-shadow: none !important;
}

.ww-btn-primary { font-weight: 800; }
.ww-btn-tertiary { text-decoration: underline; text-underline-offset: .2em; }
.ww-btn i, .ww-sidebar-cta i { pointer-events: none; }

.ww-section-header { align-items: flex-end; }
.ww-section-title { line-height: 1.15; }
.ww-game-card p, .ww-casino-card p, .ww-discover-card span {
  color: #c3d0e1;
}
.ww-game-card-meta span, .ww-resource-line, .ww-game-card-rating {
  color: #c2cee0;
}
.ww-sidebar-link.ww-sidebar-link--active {
  color: #f1f6ff;
  background: #223c5c;
}
.ww-sidebar-link.ww-sidebar-link--active i { color: #b9d7ff; }
.ww-balance-badge { background: #10273c; border: 1px solid #47607c; }

.pp-map[tabindex="0"]:focus-visible { outline-offset: 4px !important; }
.weave-direction, .weave-help, .weave-projection, .weave-turn-label,
.card-side-btn, .card-text-link, .card-turn, .card-kicker { font-size: max(.75rem, 12px); }

/* Keep state/actions visible on small screens without horizontal page scroll. */
/* Let navigation occupy a second row before it collides with account controls. */
.ww-topbar {
  height: auto;
  min-height: var(--ww-topbar);
  flex-wrap: wrap;
  padding-block: .5rem;
}
.ww-topbar-brand, .ww-topbar-actions { min-width: 0; }
@media (min-width: 1101px) and (max-width: 1700px) {
  .ww-topbar-nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .ww-topbar-badge, .ww-topbar-user { display: none; }
  .ww-topbar { gap: .35rem; }
  .ww-topbar { flex-wrap: nowrap; padding-inline: .75rem; }
  .ww-topbar-brand { gap: .5rem; }
  .ww-topbar-logo > span:last-child { display: none; }
  .ww-topbar-actions { width: auto; margin-left: auto; justify-content: flex-end; gap: .25rem; }
  .ww-topbar .ww-icon-btn, .ww-topbar .ww-menu-toggle { width: 44px; flex-shrink: 0; }
  .ww-topbar + .ww-layout > .ww-sidebar { top: 4rem; }
}

/* Board cells are a spatial grid, not a stack of form controls. A 44px
   minimum on every row made the lower rows spill outside the square and get
   clipped, most severely on the ten-by-ten Marshals board. */
.ww-strategy-board { grid-template-rows: repeat(var(--board-size), minmax(0, 1fr)); }
.ww-strategy-board .ww-board-cell { min-height: 0; padding: 0; }
.ww-board-cell:disabled { opacity: 1; filter: none; }
.ww-board-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.ww-board-actions form { margin: 0; }
.ww-board-tool { min-height: 44px; }
.ww-help-popover summary { min-height: 44px; color: #c8daf2; }
.weave-word-input > button, .weave-directions label > span,
.pp-map-tools button, .weave-pass { min-height: 44px; }
.weave-word-input > button, .pp-map-tools button { min-width: 44px; }

@media (max-width: 760px) {
  .ww-board-header { gap: .6rem; }
  .ww-board-actions > form { flex: 1 1 auto; }
  .ww-board-actions button { width: 100%; }
  .ww-drawing-keys summary { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  .ww-main-inner { padding-inline: 1rem; }
  .ww-lobby-hero, .ww-casino-hero { padding: 1.25rem; }
  .ww-lobby-hero h1, .ww-casino-hero h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }
  .ww-section-header { align-items: flex-start; }

  /* A section header is `space-between` with two or three children. With a
     count badge that is fine at any width. With the "Browse the collection ->"
     / "See all board tables ->" pair it is not: at 390px the three columns
     crush each other, the heading breaks to "Away / from the / duel board" and
     both links wrap mid-phrase, which reads as a styling error rather than a
     choice. Give the title its own row and let the links sit under it as a
     wrapping strip -- collapse the row, never the labels. Scoped with :has()
     so headers carrying only a count keep their single line. */
  .ww-section-header:has(.ww-home-nav-link) {
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: .5rem;
  }
  .ww-section-header:has(.ww-home-nav-link) > :first-child { flex: 1 0 100%; }
  .ww-section-header .ww-home-nav-link { white-space: nowrap; }
  .ww-home-actions, .ww-game-card-actions, .ww-move-form,
  .ww-casino-bet, .ww-vs-strip { align-items: stretch; }
  .ww-home-actions > *, .ww-game-card-actions > *, .ww-move-form > *,
  .ww-casino-bet > *, .ww-lobby-hero-content .ww-btn {
    width: 100%;
  }
  .ww-home-actions form, .ww-game-card-actions form,
  .ww-casino-bet form { display: block; }
  .ww-home-actions button, .ww-game-card-actions button { width: 100%; }
  .ww-practice-form, .ww-practice-form__submit { width: 100%; }
  .ww-vs-strip { flex-wrap: wrap; }
  .ww-vs-strip .ml-auto { margin-left: 0; width: 100%; }
  .ww-game-filter { scrollbar-width: thin; padding-bottom: .65rem; }
  .ww-game-filter::after { content: ""; flex: 0 0 .35rem; }
  .ww-help-popover-content { width: min(22rem, calc(100vw - 2rem)); }

  /* A handful of durable destinations keep the mobile shell legible; the
     Games entry opens the full feature-flagged catalog rather than duplicating
     each game. The columns follow the markup, so adding a destination never
     wraps the dock onto a second row underneath the feedback tab. */
  .ww-dock {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .ww-dock-item {
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    padding: .4rem .2rem;
    font-size: max(.75rem, 12px);
    line-height: 1.15;
  }
  .ww-dock-item span {
    font-size: inherit;
    white-space: nowrap;
  }
  .ww-dock-item i { font-size: 1.05rem; }
}

/* --- The opponent picker ------------------------------------------------- */

/* Every practice form in the collection chooses its WordBot through this one
   segmented control. The board and card lobbies used to hard-code
   `difficulty: "medium"` into the practice button, so all sixteen of those
   variants seated a medium bot and then told the player they had chosen it.
   The arcade offered the choice through a <select>, which for three options
   costs a click to read what is already decided.

   The radios stay in the accessibility tree -- clipped, not `display:none` --
   so this is announced and driven as a radio group, and the label is what the
   pointer hits. Colours come from custom properties so each lobby sets its own
   palette without restating the layout. */
.ww-difficulty {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  --ww-diff-ink: #c3d0e1;
  --ww-diff-track: rgba(8, 20, 36, .55);
  --ww-diff-edge: rgba(171, 198, 234, .22);
  --ww-diff-on-bg: #c9a44c;
  --ww-diff-on-ink: #15100a;
}

.ww-difficulty__legend {
  padding: 0;
  color: var(--ww-diff-ink);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ww-difficulty__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: .35rem;
  padding: 2px;
  border: 1px solid var(--ww-diff-edge);
  border-radius: .55rem;
  background: var(--ww-diff-track);
}

/* Clipped rather than hidden: a radio with `display:none` is dropped from the
   tab order and from the accessibility tree, which would cost the arrow-key
   navigation that is the reason for using radios at all. */
.ww-difficulty__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ww-difficulty__option {
  display: grid;
  place-items: center;
  min-height: 2.35rem;
  padding: .3rem .2rem;
  border-radius: .4rem;
  color: var(--ww-diff-ink);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--ww-dur-micro) var(--ww-ease-out),
    color var(--ww-dur-micro) var(--ww-ease-out);
}

.ww-difficulty__radio:checked + .ww-difficulty__option {
  color: var(--ww-diff-on-ink);
  background: var(--ww-diff-on-bg);
}

.ww-difficulty__radio:focus-visible + .ww-difficulty__option {
  outline: 3px solid var(--ww-focus);
  outline-offset: 2px;
}

/* The shared picker's knob: one brass slider that travels to the checked
   option instead of three backgrounds that swap. The partial always renders
   three radios in order, so the slot is read from which one is checked. */
.ww-difficulty--slide .ww-difficulty__options { position: relative; isolation: isolate; --slot: 1; }
.ww-difficulty--slide .ww-difficulty__options:has(.ww-difficulty__radio:nth-of-type(1):checked) { --slot: 0; }
.ww-difficulty--slide .ww-difficulty__options:has(.ww-difficulty__radio:nth-of-type(3):checked) { --slot: 2; }
.ww-difficulty--slide .ww-difficulty__options::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 8px) / 3);
  border-radius: .4rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--ww-diff-on-bg), white 45%) 0 12%, transparent 50%),
    var(--ww-diff-on-bg);
  box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--ww-diff-on-bg), black 30%);
  translate: calc(var(--slot) * (100% + 2px)) 0;
  transition: translate var(--ww-dur-short) var(--ww-ease-play);
}
/* The checked label still fills with its own opaque brass -- what the
   contrast audit measures and what a player reads -- but only once the knob
   has arrived under it; leaving, it lets go at once. */
.ww-difficulty--slide .ww-difficulty__option { transition-delay: 0s; }
.ww-difficulty--slide .ww-difficulty__radio:checked + .ww-difficulty__option {
  box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--ww-diff-on-bg), black 30%), inset 0 .55rem .4rem -.4rem color-mix(in oklch, var(--ww-diff-on-bg), white 45%);
  transition-delay: var(--ww-dur-short);
}
.ww-difficulty--slide .ww-difficulty__option:active { transform: translateY(1px); }

.ww-practice-form { margin-top: .75rem; }
.ww-practice-form__submit { width: 100%; margin-top: .5rem; }

/* Draw and Wordweave carry the picker in a hero row of buttons rather than on
   a game card, so it stacks the legend and options above its own submit and
   sits on the row's baseline with them. */
.ww-practice-form--inline,
.weave-practice {
  display: grid;
  gap: .4rem;
  margin-top: 0;
  min-width: 13.5rem;
}

.ww-practice-form--inline .ww-difficulty__legend,
.weave-practice .ww-difficulty__legend { font-size: .62rem; }

.ww-practice-form--inline .ww-difficulty__option,
.weave-practice .ww-difficulty__option { min-height: 2.1rem; font-size: .74rem; }

/* The Night Deck's tickets are printed stock, so the control is ink on card
   rather than brass on navy. */
.card-game-ticket .ww-difficulty {
  --ww-diff-ink: #2b2418;
  --ww-diff-track: rgba(24, 39, 65, .07);
  --ww-diff-edge: rgba(24, 39, 65, .35);
  --ww-diff-on-bg: #182741;
  --ww-diff-on-ink: #fff7df;
}

@media (forced-colors: active) {
  .ww-difficulty__options { border: 2px solid ButtonText; }
  .ww-difficulty__radio:checked + .ww-difficulty__option {
    outline: 3px solid Highlight;
  }
}

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

@media (forced-colors: active) {
  .ww-btn, .ww-filter-chip, .ww-board-cell, .ww-key-cap,
  .ww-touch-control { border: 2px solid ButtonText; }
  .ww-filter-chip--active, .ww-board-cell--selected,
  .ww-board-cell--destination { outline: 3px solid Highlight; }
}

/* --- Phones: what the platform does unless told not to ------------------- */

/* Safari enlarges text it judges too small when a phone turns sideways, which
   reflows a board mid-game. Anchor links stop clear of the sticky top bar. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ww-topbar) + env(safe-area-inset-top, 0px) + .75rem);
}

/* iOS zooms the page into any field typed in below 16px and leaves it zoomed,
   so on a touch screen every field a player types into keeps the 16px floor.
   Crossword squares are exempt: the grid sizes their type to the cell. */
@media (pointer: coarse) {
  textarea,
  input:is([type="text"], [type="email"], [type="search"], [type="password"], [type="tel"], [type="url"], [type="number"], :not([type])):not(.wp-cell) {
    font-size: max(1rem, 16px);
  }
}

/* A phone held sideways puts its notch and rounded corners over the left or
   right edge (upright, both insets are zero and none of this moves). The page
   steps in by the inset on top of each surface's own gutter, the bar keeps
   its controls clear of the corners, and the dock floats inside both. */
body {
  padding-left: var(--ww-safe-left);
  padding-right: var(--ww-safe-right);
}
@media (orientation: landscape) and (max-height: 32rem) {
  .ww-topbar {
    padding-left: max(1rem, var(--ww-safe-left));
    padding-right: max(1rem, var(--ww-safe-right));
  }
}

@media (max-width: 768px) {
  .ww-dock {
    left: max(.55rem, var(--ww-safe-left));
    right: max(.55rem, var(--ww-safe-right));
    transition: transform var(--ww-dur-short) var(--ww-ease-in), opacity var(--ww-dur-short) var(--ww-ease-in);
  }

  /* While the on-screen keyboard is up, the dock would float over the field
     being typed in (iOS lays fixed bars over the keyboard's top edge). It
     steps out of the way until the field lets go of focus. */
  body:has(:is(textarea, input:is([type="text"], [type="email"], [type="search"], [type="password"], [type="tel"], [type="url"], [type="number"], :not([type]))):focus) .ww-dock {
    transform: translateY(calc(100% + 1rem + var(--ww-safe-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  /* Drawers and panels scroll on their own; a fling past their end should not
     carry on into the page underneath. */
  .ww-sidebar, .ww-feedback__panel, .ww-topbar-more__panel, dialog {
    overscroll-behavior: contain;
  }
}

/* Below 380px the bar cannot carry every control beside the wordmark: the
   buttons overran the logo. Motion has its own switch on the settings page,
   so its shortcut gives way first. */
@media (max-width: 23.75rem) {
  .ww-topbar-actions [data-preferences-target="motionButton"] { display: none; }
}

/* Small text links that are still the only way to an action get a 44px
   target from a pseudo-element, without growing the type around them. */
.ww-help-link, .card-resign, .card-table-nav > a, .weave-pass {
  position: relative;
}
.ww-help-link::after, .card-resign::after, .card-table-nav > a::after, .weave-pass::after {
  content: "";
  position: absolute;
  inset: 50% -.5rem auto;
  height: var(--ww-control-min);
  transform: translateY(-50%);
}
.ww-board-rules > summary {
  display: flex;
  align-items: center;
  min-height: var(--ww-control-min);
}
@media (pointer: coarse) {
  .weave-directions span {
    min-height: var(--ww-control-min);
    align-items: center;
  }
}