/* 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;
}
.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}.triad-table{padding:1rem;background:#151126;border:1px solid #6d4aff;border-radius:1rem;color:#f5f3ff}.triad-score{display:flex;justify-content:space-between}.triad-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0}.triad-lane{min-height:360px;padding:.75rem;background:linear-gradient(#241d40,#101827);border:1px solid #594d7a;border-radius:.8rem;text-align:center}.triad-side{min-height:95px;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.triad-card{width:72px;padding:.5rem;background:#fff7db;color:#292524;border-radius:.5rem}.triad-card span{display:block;font-size:1.35rem}.triad-card--rival{background:#ffd6e7}.triad-total{font-size:1.4rem;margin:.5rem}.triad-plays{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}.triad-hand{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}@media(max-width:760px){.arcade-ticket{flex-direction:column;align-items:stretch;text-align:center}.arcade-ticket-actions{min-width:0}.triad-lanes{grid-template-columns:1fr}.arcade-help{flex-direction:column}.arcade-match-head{flex-direction:column;gap:1rem}}

.triad-rules{margin:1rem 0;border:1px solid #8b7bb7;border-radius:.75rem;background:#211a3a}.triad-rules summary{padding:.8rem 1rem;cursor:pointer;font-weight:800;color:#fef3c7}.triad-rules__body{display:grid;gap:.4rem;padding:0 1rem 1rem;color:#ddd6fe;font-size:.92rem}.triad-turn{display:flex;gap:.45rem 1rem;align-items:center;flex-wrap:wrap;padding:.75rem 1rem;border-radius:.75rem;background:#201d35;color:#c4b5fd}.triad-turn.is-yours{background:#123c35;color:#d1fae5}.triad-lane-label{display:block;margin:.45rem 0;color:#c4b5fd}.triad-total{display:flex;justify-content:center;gap:.65rem}.triad-hand{align-items:flex-start;padding:1rem;border:1px solid #594d7a;border-radius:.8rem;background:#101827}.triad-hand>div{display:grid;gap:.25rem;min-width:10rem}.triad-hand>div span,.triad-waiting{color:#c4b5fd;font-size:.9rem}.triad-play-form{display:grid;gap:.85rem;flex:1}.triad-card-picker{display:flex;gap:.55rem;flex-wrap:wrap}.triad-card-choice{cursor:pointer}.triad-card-choice input{position:absolute;opacity:0;pointer-events:none}.triad-card-choice>span{display:grid;min-width:6.5rem;padding:.65rem .8rem;border:2px solid #6d5a99;border-radius:.65rem;background:#fff7db;color:#292524}.triad-card-choice small{color:#57534e}.triad-card-choice input:checked+span{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf844}.triad-card-choice input:focus-visible+span{outline:3px solid #fbbf24;outline-offset:2px}.triad-deploy{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.triad-result{margin:1rem 0;padding:1.25rem;border-radius:.8rem;background:#123c35;color:#d1fae5}.triad-result h2{font-size:1.5rem}.triad-result p{margin:.4rem 0 1rem}@media(max-width:760px){.triad-hand,.triad-deploy{align-items:stretch;flex-direction:column}.triad-card-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.triad-card-choice>span{min-width:0}.triad-lane{min-height:280px}}

/* 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;
}

.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-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);
}

.ww-crt-toggle {
  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 {
    border-color: var(--ww-gold);
    color: var(--ww-gold);
  }
}

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

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

.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); }
.ww-arcade-screen:has(+ .ww-cabinet-commands) canvas { touch-action: none; }
.ww-arcade-status-info { flex-basis: 100%; min-height: 2.5em; }
.ww-crt-toggle:disabled { opacity: 0.6; cursor: not-allowed; }

.ww-arcade-bezel:has(.ww-cabinet-commands) { max-width: 48rem; margin-inline: 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; }
/* 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 rgba(255, 255, 255, .25);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .1);
}
.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);
}
.ww-roster-card:hover { transform: translateY(-2px); border-color: #64748b; background: #f1f5f9; }
.ww-roster-card:has(.ww-roster-radio:checked),
.ww-roster-card.is-chosen {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 2px var(--accent, #38bdf8), 0 10px 24px rgba(15, 23, 42, .18);
}
.ww-roster-card:has(.ww-roster-radio:focus-visible) { outline: 3px solid #1d4ed8; 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: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
  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 #cbd5e1;
  border-radius: 1rem;
  background: #fff;
  color: #172033;
}
.ww-arena-panel .ww-kicker,
.ww-roster .ww-kicker { color: #365f99; }
.ww-arena-panel .ww-section-title { color: #172033; }
.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 #e2e8f0;
  border-left: 4px solid var(--accent, #94a3b8);
  border-radius: .7rem;
  background: #f8fafc;
  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);
}
.ww-arena-challenge.is-link:hover {
  transform: translateX(3px);
  border-color: #a5b4fc;
  background: #eef2ff;
  box-shadow: 0 8px 20px rgba(30, 41, 59, .1);
}
.ww-arena-challenge.is-link:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
  background: #eef2ff;
}
.ww-arena-challenge strong { display: block; }
.ww-arena-challenge span { display: block; color: #475569; font-size: .85rem; }
.ww-arena-challenge small { color: #047857; font-weight: 800; }

.ww-arena-status-dot { width: .7rem; height: .7rem; border-radius: 999px; background: #94a3b8; }
.ww-arena-status-dot.is-waiting { background: #f59e0b; }
.ww-arena-status-dot.is-in_progress { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.ww-arena-status-dot.is-completed { background: #64748b; }

.ww-arena-empty { padding: 2rem 1rem; color: #64748b; text-align: center; }
.ww-arena-empty h3 { font-weight: 800; color: #334155; }

.ww-arena-waiting {
  padding: 2.5rem 1.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 1rem;
  background: #fff;
  color: #172033;
  text-align: center;
}
.ww-arena-waiting h2 { font-size: 1.6rem; font-weight: 900; }
.ww-arena-waiting p { margin-top: .4rem; color: #475569; }
.ww-arena-waiting .ww-kicker { color: #365f99; }
.ww-arena-waiting .ww-roster-grid,
.ww-arena-waiting .ww-stage-row { text-align: left; }
.ww-arena-stake { color: #047857 !important; 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: #64748b; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }

/* Each fighter's own colour, not their side of the stage. */
.ww-fighter-hud { border-left: 4px solid var(--accent, #38bdf8); }
.ww-fighter-hud:last-child { border-left: 0; border-right: 4px solid var(--accent, #38bdf8); }
/* Stocks: how many lives are left, which is the number that decides the match.
   It was 12.8px in the fighter's own accent -- a colour picked for identity,
   not for legibility -- and measured 3.82:1 against the HUD chip, under the
   4.5:1 it needs. The accent stays on the border, where it is not text. The
   count is sized to what it means. Scoped past lobby.css, which restates
   `.ww-fighter-hud small` one file later. */
.ww-arena-hud .ww-fighter-hud small {
  color: #fde68a;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
}

/* The two fighter chips are opposite surfaces: owner one is navy, owner two is
   cream. The stock pips and the damage figure were both drawn for the navy one
   -- amber pips, and a damage figure that starts at white and reddens -- so on
   the cream chip they measured 1.05:1 and were effectively invisible. Both now
   take the cream chip's own ink as their base, keeping the warm cast of the
   pips and the reddening of the damage without leaving either unreadable. */
.ww-arena-hud .ww-fighter-hud.ww-owner-2 small {
  color: color-mix(in oklch, var(--ww-owner-2-ink) 72%, var(--ww-gold));
}

.ww-arena-hud .ww-fighter-hud.ww-owner-2 .ww-damage-meter {
  color: color-mix(in oklch, var(--ww-danger) calc(var(--damage, 0) * 60%), var(--ww-owner-2-ink));
}

.ww-netplay-state {
  padding: .3rem .6rem;
  border: 1px solid #334155;
  border-radius: 999px;
  color: #a5f3fc;
  font-variant-numeric: tabular-nums;
}
.ww-netplay-state[data-quality="good"] {
  border-color: #34d399;
  color: #a7f3d0;
  background: rgba(6, 78, 59, .32);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .08);
}
.ww-netplay-state[data-quality="waiting"] { border-color: #475569; color: #94a3b8; }
.ww-netplay-state[data-quality="poor"] { border-color: #f59e0b; color: #fcd34d; }
.ww-netplay-state[data-quality="lost"] { border-color: #ef4444; color: #fca5a5; }

.ww-stage-chip { position: relative; min-height: 3rem; cursor: pointer; }
/* The roster panel this chip sits on is one of the two surfaces that stay
   deliberately light in both themes (see zz-midnight.css), so the selected
   state is spelled out rather than taken from the theme tokens -- those flip
   with the palette and would put a dark chip on a light card. */
.ww-stage-chip:has(.ww-roster-radio:checked) { border-color: #4338ca; background: #eef2ff; color: #312e81; box-shadow: 0 0 0 2px #c7d2fe; }
.ww-stage-chip:has(.ww-roster-radio:focus-visible) { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.ww-stage-chip small { display: block; margin-top: .2rem; color: #475569; 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; }
}

/* 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; }

/* 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: #fff;
    background: #081426;
    border-top: 1px solid #334155;
    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(2, 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: #f8fafc;
    background: linear-gradient(#263b59, #16263e);
    border: 2px solid #64748b;
    border-radius: .85rem;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px 0 #020617;
    font-size: .75rem;
    font-weight: 900;
    touch-action: none;
  }
  .ww-touch-control--jump { border-color: #38bdf8; }
  .ww-touch-control--quick { border-color: #34d399; }
  .ww-touch-control--heavy { border-color: #fb923c; }
  .ww-touch-control--guard { border-color: #c084fc; }
  .ww-touch-control.is-pressed,
  .ww-touch-control:active { transform: translateY(3px); filter: brightness(1.25); box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
}

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

/* The arena's roster and lobby panels are light cards sitting on the dark
   theme, and the theme styles secondary buttons for dark surfaces: pale text
   on a translucent white fill. Inside these panels that came out as near-white
   on white. Scoped rather than global so nothing on an actually-dark surface
   changes. */
.ww-roster .ww-btn-secondary,
.ww-stage-picker .ww-btn-secondary,
.ww-arena-panel .ww-btn-secondary,
.ww-arena-waiting .ww-btn-secondary {
  color: #1e293b;
  background: #eef2f7;
  border-color: #cbd5e1;
  box-shadow: none;
}
.ww-roster .ww-btn-secondary:hover,
.ww-stage-picker .ww-btn-secondary:hover,
.ww-arena-panel .ww-btn-secondary:hover,
.ww-arena-waiting .ww-btn-secondary:hover { background: #e2e8f0; }

/* 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;
  color: var(--ww-paper);
}

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

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

.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 color-mix(in oklch, var(--ww-navy) 90%, black);
}

.ww-arena-select-sub {
  font-size: 0.75rem;
  color: var(--ww-paper-3);
  margin: 0.15rem 0 0;
  letter-spacing: 0.04em;
}

.ww-arena-select-preview {
  pointer-events: auto;
  position: absolute;
  top: 3.8rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ww-preview-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.85rem;
  background: color-mix(in oklch, var(--ww-navy) 80%, transparent);
  border: 1.5px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  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-paper);
}

.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: var(--ww-paper-3);
}

.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;
  max-height: 110px;
  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;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0.2rem;
}

/* Stage Select Overlay */
.ww-arena-stage-cards {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 1.5rem auto;
}

.ww-arena-stage-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--ww-paper-2);
  border: 2px solid var(--ww-line);
  border-radius: var(--ww-radius);
  cursor: pointer;
  min-width: 180px;
  text-align: center;
  transition: var(--ww-transition-chrome);
}

@media (hover: hover) {
  .ww-arena-stage-card:hover {
    border-color: var(--ww-gold);
    transform: translateY(-3px);
  }
}

.ww-arena-stage-card.is-active {
  border-color: var(--ww-gold);
  box-shadow: 0 0 16px var(--ww-gold);
}

/* 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;
}

.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;
}

/* 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; }
}
.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; }
/* 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;
}
/* 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);
}

.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%);
}

/* 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: #d97706;
}

.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: #16a34a;
}

.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);
}

.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;
  }
}
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;
}
/* ===== 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;
}

.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;
}

.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;
}

/* ===== 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);
  }
  
  .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;
  }
}

/* ===== 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: white;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
}

.ww-sidebar-stat-label {
  font-size: 0.8rem;
  color: #64748b;
}

.ww-sidebar-stat-val {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1e293b;
  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 {
  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 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 2;
}

.ww-grid-tracker {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.ww-grid-chat {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.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;
  }
}

/* ===== 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;
  min-width: 12rem;
  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__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; }
.ww-library { max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; color: #f5f2e9; }
.ww-library-intro { max-width: 720px; margin-bottom: 2rem; }
.ww-library-intro h1 { font: 700 clamp(2rem, 5vw, 3.6rem)/1.1 var(--ww-display); margin: .5rem 0 1rem; }
.ww-library-intro > p:last-child { color: #c0cede; font-size: 1.1rem; }
.ww-library h2 { font: 600 1.65rem/1.2 var(--ww-display); margin-bottom: .75rem; }
.ww-library-daily { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border: 1px solid #63788f; border-radius: 1rem; background: #19334b; }
.ww-library-daily p { margin: .25rem 0; color: #d1dce8; }
.ww-library-section { margin-top: 2.5rem; }
.ww-library-note { margin: .6rem 0 1.2rem; color: #bfccdc; font-size: .9rem; }
.ww-library-grid, .ww-library-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ww-library-card, .ww-library-match { min-width: 0; border: 1px solid #3c5068; border-radius: .9rem; padding: 1.3rem; background: #12253a; }
.ww-library-card { display: flex; flex-direction: column; align-items: flex-start; }
.ww-library-card h3 { font: 600 1.4rem/1.25 var(--ww-display); margin: .5rem 0 .75rem; }
.ww-library-card > p:not(.ww-kicker) { color: #c2cfdf; margin-bottom: 1.25rem; }
.ww-library-card .ww-btn { margin-top: auto; white-space: normal; text-align: left; }
.ww-library-match { display: grid; gap: .35rem; color: #f5f2e9; text-decoration: none; }
.ww-library-match:hover { background: #1b354f; border-color: #9ab4ce; }
.ww-library-match > span, .ww-library-match small { color: #c7d6e6; }
.ww-library-match .ww-library-open { color: #ffe09a; font-weight: 600; margin-top: .5rem; }
.ww-library-empty { padding: 1.5rem; border: 1px dashed #6b7f95; border-radius: .9rem; color: #c8d5e5; }
.ww-library-empty .ww-btn { margin-top: 1rem; }
.ww-library-search { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.ww-library-search > div:first-child { flex: 1 1 260px; }
.ww-library-search label { display: block; margin-bottom: .4rem; font-weight: 600; }
.ww-library-search input[type=search], .ww-library-search select { width: 100%; min-width: 0; border: 1px solid #72859c; border-radius: .65rem; padding: .6rem .8rem; background: #0c1b2d; color: #f5f2e9; }
@media (max-width: 850px) { .ww-library-grid, .ww-library-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
  .ww-library { padding: 1.5rem 1rem 4rem; }
  .ww-library-grid, .ww-library-resume { grid-template-columns: 1fr; }
  .ww-library-daily { align-items: stretch; flex-direction: column; }
  .ww-library-daily .ww-btn { width: 100%; }
  .ww-library-search > div { width: 100%; }
}
/* 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-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top: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 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 arcade */
.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}.ww-roster,.ww-stage-picker{padding:1.25rem;border:1px solid #cbd5e1;border-radius:1rem;background:#fff;color:#172033}.ww-roster .ww-section-title,.ww-stage-picker .ww-section-title,.ww-roster-card strong{color:#172033}.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:.7rem;background:#f8fafc;border:1px solid #cbd5e1;color:#172033}.ww-roster-card button{padding:.25rem .55rem;border-radius:.35rem;background:#312e81;color:#fff;font-size:.72rem;font-weight:800}.ww-stage-picker .ww-filter-chip{border-color:#94a3b8;background:#f8fafc;color:#25304a}
.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}}
.pp-hero { padding: 2rem; border-radius: 1.5rem; color: white; background: radial-gradient(circle at 85% 20%, #38bdf8 0 4%, transparent 5%), linear-gradient(130deg, #082f49, #0f766e); box-shadow: 0 18px 45px #0f172a26; }
.pp-hero h1 { font: 800 clamp(2.8rem,7vw,5rem)/.9 "Fraunces",serif; margin:.3rem 0 .8rem; }
.pp-hero p { max-width: 48rem; color:#dff9f5; }
.pp-board { display:grid; gap:1rem; }
.pp-round-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.pp-round-head h1,.pp-result-card h1 { font:800 clamp(2rem,5vw,3.8rem)/1 "Fraunces",serif; color:#0f172a; }
.pp-scoreboard { display:flex; gap:.5rem; flex-wrap:wrap; }
.pp-scoreboard span { background:#e2e8f0; border-radius:999px; padding:.5rem .85rem; font-weight:700; }
.pp-clue { display:flex; gap:1rem; align-items:center; padding:1.1rem 1.25rem; border:1px solid #99f6e4; background:#f0fdfa; border-radius:1rem; color:#134e4a; font-size:1.08rem; }
.pp-clue i { font-size:1.7rem; color:#0f766e; }
.pp-map { height:min(58vh,560px); min-height:360px; position:relative; overflow:hidden; border-radius:1.25rem; background:#aad3df; border:4px solid #fff; box-shadow:0 12px 35px #0f172a2b; touch-action:none; cursor:crosshair; }
.pp-map-tiles { position:absolute; inset:0; }
.pp-map-tiles img { position:absolute; width:256px; height:256px; user-select:none; }
.pp-map-pin { position:absolute; z-index:3; width:26px; height:26px; transform:translate(-50%,-100%) rotate(45deg); background:#ef4444; border:3px solid white; border-radius:50% 50% 50% 0; box-shadow:0 3px 8px #0006; pointer-events:none; }
.pp-map-pin--answer { background:#10b981; }
.pp-map-pin--guess { width:22px; height:22px; z-index:4; }
.pp-map-pin--guess.is-player-one,.pp-player-key.is-player-one { background:#2563eb; }
.pp-map-pin--guess.is-player-two,.pp-player-key.is-player-two { background:#db2777; }
.pp-player-key { display:inline-block; width:.7rem; height:.7rem; margin-right:.35rem; border-radius:999px; }
.pp-attribution { position:absolute; z-index:4; right:0; bottom:0; background:#fffd; padding:2px 5px; color:#334155; font-size:11px; }
.pp-map-tools { position:absolute; z-index:4; top:12px; left:12px; display:grid; box-shadow:0 2px 8px #0003; }
.pp-map-tools button { width:38px; height:38px; background:white; color:#0f172a; font-size:1.4rem; font-weight:800; border-bottom:1px solid #cbd5e1; }
.pp-submit-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1rem; font-weight:700; color:#475569; }
.pp-reveal-grid,.pp-final-scores { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.pp-result-stat,.pp-final-scores span { display:grid; padding:1rem; background:white; border:1px solid #e2e8f0; border-radius:1rem; }
.pp-result-stat strong,.pp-final-scores strong { font-size:2rem; color:#0f766e; }
.pp-result-card { text-align:center; padding:clamp(2rem,6vw,5rem); border-radius:1.5rem; background:linear-gradient(145deg,#ecfeff,#f0fdf4); border:1px solid #a7f3d0; }
.pp-final-scores { max-width:35rem; margin:2rem auto 0; text-align:left; }
.pp-round-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.pp-round-actions p { color:#475569; font-size:.9rem; }
@media(max-width:640px){.pp-round-head,.pp-submit-row,.pp-round-actions{align-items:stretch;flex-direction:column}.pp-map{min-height:330px}.pp-reveal-grid{grid-template-columns:1fr}}
.pp-recap { max-width:35rem; margin:2rem auto 0; text-align:left; display:grid; gap:.5rem; list-style:none; counter-reset:pp-round; }
.pp-recap-row { counter-increment:pp-round; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1rem; background:#ffffff; border:1px solid #e2e8f0; border-radius:.9rem; }
.pp-recap-row::before { content:counter(pp-round); flex:none; width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:999px; background:#0f766e; color:white; font-size:.8rem; font-weight:800; }
.pp-recap-place { flex:1; display:grid; }
.pp-recap-place strong { font-weight:800; color:#0f172a; }
.pp-recap-place small { color:#64748b; }
.pp-recap-scores { display:grid; gap:.15rem; text-align:right; font-size:.85rem; font-weight:700; }
.pp-recap-scores .is-player-one { color:#2563eb; }
.pp-recap-scores .is-player-two { color:#9d174d; }
.pp-result-actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:2rem; }
@media(max-width:640px){.pp-recap-row{flex-wrap:wrap}.pp-recap-scores{text-align:left}}
/* 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; }
}
/* 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: 1fr 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;
}

.ww-device select {
  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: 0.9rem;
  border: 1px solid rgba(229, 231, 235, 0.9);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
  padding: 0.75rem;
}

.medium video {
  width: 100%;
  height: 340px;
  background: #0b1220;
  border-radius: 0.75rem;
  object-fit: cover;
}

.medium-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* 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 #738f8b;
  border-radius: 20px;
  background: linear-gradient(145deg, #183e3b, #112d31);
  color: #fff7df;
  box-shadow: 0 18px 48px #08172555;
  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: #d0e4db; }
.solitaire-stats { display: flex; gap: 20px; align-items: center; }
.solitaire-stats span { display: grid; gap: 2px; font-size: .8rem; color: #d0e4db; }
.solitaire-stats strong { font: 500 1.35rem "IBM Plex Mono", monospace; color: #fff7df; }
.solitaire-guide { margin: 18px 0; border-block: 1px solid #86a49a66; }
.solitaire-guide summary { min-height: 44px; padding: 10px 0; font-weight: 600; }
.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 #88a69c; border-radius: 7px;
  background: #102c2d; color: #d0e4db;
}
.solitaire-stock { background: repeating-linear-gradient(45deg, #183850 0 6px, #23465d 6px 7px); color: #fff7df; border: 2px solid #d9d2b3; cursor: pointer; }
.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 #73998d; border-radius: 6px; color: #d0e4db; background: #163632; }
.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; }
.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 #ffd166; outline-offset: 2px; z-index: 2; }
.solitaire-desk .solitaire-card-button[aria-pressed="true"] .playing-card { background: #fff1b8; }
.solitaire-desk .is-destination { border: 2px solid #ffd166; background: #315b42; color: #fff7df; cursor: pointer; }
.solitaire-desk .solitaire-card-button:focus-visible { z-index: 3; }
.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: #e0ece2; }
.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 #ffd166; border-radius: 10px; background: #0d2629; }
.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; }
}
/* 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;
}
.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;
}
/*!
 * 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");
}
  

.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; }
.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;
}
.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; }
/* 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 {
  /* 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;
  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-topbar: 4.15rem;
}

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-home-orb {
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  animation: ww-orb 12s ease-in-out infinite alternate;
}

.ww-home-orb--a {
  background: oklch(0.78 0.16 255);
  top: -6rem;
  left: -4rem;
}

.ww-home-orb--b {
  background: oklch(0.76 0.16 277);
  right: -6rem;
  top: 8rem;
  animation-delay: -4s;
}

@keyframes ww-orb {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 6%, 0) scale(1.08); }
}

.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) 86%, 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;
  }

  .ww-grid-board { order: 1; }
  .ww-grid-status { order: 2; }
  .ww-grid-tracker { order: 3; }
  .ww-grid-chat { order: 4; }

  #guess_form,
  #word_form {
    position: sticky;
    bottom: calc(0.5rem + var(--ww-safe-bottom));
    z-index: 30;
    background: color-mix(in oklch, white 88%, transparent);
    backdrop-filter: blur(16px);
    border-radius: 1rem;
    box-shadow: 0 10px 40px oklch(0.3 0.05 260 / 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ww-home-orb,
  .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: oklch(0.72 0.12 25);
  color: white;
  text-decoration: line-through;
}

.ww-key.selected .ww-key-cap {
  background: var(--ww-blue-deep);
  color: white;
}

.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);
}

.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 {
  /* 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;
  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 {
  background: rgba(5, 15, 29, .88);
  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: #7688a3; 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),
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::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):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-home-orb { opacity: .2; filter: blur(80px); animation-duration: 18s; }
.ww-home-orb--a { background: #3577cb; }
.ww-home-orb--b { background: #173d72; }
.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; }

footer { color: #75869e !important; border-top: 1px solid rgba(170, 197, 233, .08); }
footer a:hover { color: #fff !important; }

@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-card {
  border-radius: .28rem;
  border-color: rgba(174, 199, 232, .12);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

.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: #ffe5e7; background: #642735; }
.ww-key.selected .ww-key-cap { color: #071426; background: #9fc4ff; }
.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; }

/* The wordmark's tiles were dark ink on the dark topbar. */
.ww-wordmark-tile { color: #f7f4ed; }

/* Pinpoint keeps a light map, a light clue card and light score cards on
   purpose -- an atlas reads better on paper than on slate. Each of those has
   to state its own ink rather than inherit the page's, and the two headings
   that sit on the dark page itself have to go the other way. */
.pp-round-head h1 { color: #f7f4ed; }
.pp-scoreboard span { color: #12233c; background: #d5e2f2; }
.pp-submit-row { color: #c2d0e4; }
.pp-round-actions p { color: #c2d0e4; }
.pp-result-card { color: #0f172a; }
.pp-result-card .ww-kicker { color: #0f766e; }
.pp-result-stat,
.pp-final-scores span { color: #12233c; }
.pp-recap-row { color: #eaf1fb; }

/* Worduel's score sheet stays light paper in this theme -- that is the point of
   it, a sheet on the table rather than another dark panel. An earlier fix here
   gave the empty-column card dark-surface ink on the assumption the sheet had
   gone dark with .ww-game-panel; it had not, so "No guesses yet" swapped one
   unreadable pairing (1.68:1) for another (1.67:1). The caption takes paper ink. */
.ww-empty-guesses-sm {
  background: rgba(12, 29, 52, .05);
  border-color: rgba(12, 29, 52, .16);
}
.ww-empty-guesses-sm :is(span, i) { color: #4a5668 !important; }


/* 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);
}

/* Two panels in the app stay deliberately light on the dark page: Pinpoint's
   result card (an atlas reads as paper) and the Arena's fighter roster. The
   secondary and tertiary buttons are drawn for dark surfaces -- pale ink on a
   near-transparent white -- so on those two they were white on white. The
   contrast audit cannot catch this one either: both cards are gradients. */
.pp-result-card :is(.ww-btn-secondary, .ww-btn-tertiary),
.ww-roster :is(.ww-btn-secondary, .ww-btn-tertiary) {
  color: #12233c;
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  border-color: #b9c9dd;
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}
/* ===== 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-card-back: url(/assets/club/card-back-7358396578ef6c4f0a5a3cb3bd66bab38f1f01fb1c21977c7495e88323408144.svg);
}

/* --- 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);
}

/* 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: #f5f0e4;
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: multiply;
}

.weave-tray { box-shadow: 10px 10px 0 #0d2d27, 0 0 0 1px rgba(44, 33, 20, .16); }

/* --- 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 table was violet on violet with cream and bubblegum cards. The
   fronts are three baize panels in the club's own green, and the cards are the
   same stock as the Night Deck's. */
.triad-table {
  border-color: rgba(201, 164, 76, .28);
  background-color: #0c1d34;
  background-image: var(--club-grain);
  background-size: 300px 300px;
  background-blend-mode: soft-light;
}

.triad-lane {
  border-color: rgba(201, 164, 76, .2);
  background-color: #123028;
  background-image: var(--club-felt), linear-gradient(rgba(30, 85, 68, .55), rgba(12, 33, 28, .8));
  background-size: 300px 300px, auto;
  background-blend-mode: overlay, normal;
}

.triad-card,
.triad-card-choice > span {
  border-color: #2c2114;
  background: #f5efe2;
  color: #221a10;
}

.triad-card--rival { background: #e6d6cf; }
.triad-card-choice small { color: #5a5140; }
.triad-card-choice input:checked + span {
  border-color: var(--club-brass);
  box-shadow: 0 0 0 3px rgba(201, 164, 76, .3);
}

.triad-hand,
.triad-rules,
.triad-turn { border-color: rgba(201, 164, 76, .2); background: #0c1d34; color: #d6e2f2; }
.triad-turn.is-yours { background: rgba(31, 95, 78, .32); color: #dcf3e8; }
.triad-rules summary { color: var(--club-brass-lit); }
.triad-rules__body,
.triad-lane-label,
.triad-hand > div span,
.triad-waiting { color: #c3d2e6; }
.triad-result { background: rgba(31, 95, 78, .3); color: #dcf3e8; box-shadow: inset 0 0 0 1px rgba(201, 164, 76, .24); }

/* 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 Arcade -------------------------------------------------- */
/*
 * 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; }
}
/*
 * 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;
}

.ww-btn, .ww-sidebar-cta, .ww-icon-btn, .ww-menu-toggle,
.ww-dock-item, .ww-board-cell, .ww-touch-control, select,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  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 {
  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 {
  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) {
  .triad-table { padding: .75rem; }
  .triad-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .triad-lane { min-height: 0; padding: .5rem .25rem; }
  .triad-lane h3 { font-size: .8rem; }
  .triad-lane-label { font-size: .7rem; overflow-wrap: anywhere; }
  .triad-side { min-height: 40px; gap: .3rem; }
  .triad-card { width: 100%; padding: .3rem; font-size: .7rem; }
  .triad-card span { font-size: 1rem; }
  .triad-total { gap: .25rem; margin: .4rem 0; font-size: 1.1rem; }
  .triad-score { gap: .4rem; flex-wrap: wrap; font-size: .8rem; }
  .triad-hand { padding: .75rem; }
  .pp-map { height: clamp(260px, 42svh, 360px); min-height: 0; }
  .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, .pp-hero { padding: 1.25rem; }
  .ww-lobby-hero h1, .ww-casino-hero h1, .pp-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)); }

  /* Four durable destinations keep the mobile shell legible; the Games entry
     opens the full feature-flagged catalog rather than duplicating each game. */
  .ww-dock {
    grid-template-columns: repeat(4, 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;
}

.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; }
}