:root {
  --bg: #050a0f;
  --bg-elevated: #0b141d;
  --bg-panel: #070e15;
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.09);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.5);
  --accent: #0089ff;
  --accent-strong: #006ef5;
  --accent-hover: #33a1ff;
  --accent-soft: rgba(0, 137, 255, 0.12);
  --active-bg: rgba(255, 255, 255, 0.12);
  --active-bg-subtle: rgba(255, 255, 255, 0.07);
  --active-border: rgba(255, 255, 255, 0.3);
  --active-text: #ffffff;
  --active-text-dim: rgba(255, 255, 255, 0.8);
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --bg-subtle: rgba(255, 255, 255, 0.05);
  --nav-transition: 0.2s ease;
  --nav-drawer-transition: 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  --nav-tab-pad: 10px;
  --nav-rail-width: 44px;
  --nav-icon-slot: 44px;
  --nav-icon-size: 24px;
  --nav-brand-mark-width: 116.282px;
  --nav-width-expanded: 173px;
  --black-stone: #1a1a1a;
  --white-stone: #f5f0e6;
  --danger: #e05c5c;
  --success: #5cb87a;
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: "neulis-sans", var(--font);
  /* Apple SF Pro stack for Mobile/H3 only */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Segoe UI', system-ui, sans-serif;

  /* Type scale — Figma Desktop / ≥768 */
  --type-h1-font: var(--font-display);
  --type-h1-weight: 600;
  --type-h1-size: 37px;
  --type-h1-lh: 1.2;
  --type-h2-font: var(--font-display);
  --type-h2-weight: 600;
  --type-h2-size: 28px;
  --type-h2-lh: 1.2;
  --type-h3-font: var(--font-display);
  --type-h3-weight: 600;
  --type-h3-size: 20px;
  --type-h3-lh: 1.45;
  --type-h4-font: var(--font-display);
  --type-h4-weight: 600;
  --type-h4-size: 18px;
  --type-h4-lh: 1.45;
  --type-h5-font: var(--font-display);
  --type-h5-weight: 600;
  --type-h5-size: 16px;
  --type-h5-lh: 1.6;
  /* H6 removed in Figma — alias of H5 for existing card-title usages */
  --type-h6-font: var(--type-h5-font);
  --type-h6-weight: var(--type-h5-weight);
  --type-h6-size: var(--type-h5-size);
  --type-h6-lh: var(--type-h5-lh);
  --type-body-1-font: var(--font);
  --type-body-1-weight: 500;
  --type-body-1-size: 16px;
  --type-body-1-lh: 1.6;
  --type-body-2-font: var(--font);
  --type-body-2-weight: 500;
  --type-body-2-size: 15px;
  --type-body-2-lh: 1.6;
  --type-body-2-tracking: 0;
  --type-body-3-font: var(--font);
  --type-body-3-weight: 500;
  --type-body-3-size: 13.5px;
  --type-body-3-lh: 1.6;
  --type-body-3-tracking: 0;
  --type-button-lg-font: var(--font);
  --type-button-lg-weight: 600;
  --type-button-lg-size: 15px;
  --type-button-lg-lh: 1.45;
  --type-button-sm-font: var(--font);
  --type-button-sm-weight: 600;
  --type-button-sm-size: 14px;
  --type-button-sm-lh: 1.45;
  --type-overline-1-font: var(--font);
  --type-overline-1-weight: 700;
  --type-overline-1-size: 14px;
  --type-overline-1-lh: 1.45;
  --type-overline-1-tracking: 0.08em;
  --type-overline-2-font: var(--font);
  --type-overline-2-weight: 600;
  --type-overline-2-size: 12px;
  --type-overline-2-lh: 1.45;
  --type-overline-2-tracking: 0.08em;
  --type-overline-3-font: var(--font);
  --type-overline-3-weight: 600;
  --type-overline-3-size: 11px;
  --type-overline-3-lh: 1.45;
  --type-overline-3-tracking: 0.07em;

  /* Universal/Button/Primary — Figma color styles + effect style */
  --Blue-Blue-1: #006ef5;
  --Blue-Blue-2: #0057c2;
  /* Universal/Button/Secondary (Transparent) — Figma 46351:130607 */
  --White-White-9: rgba(255, 255, 255, 0.09);
  --White-White-3: rgba(255, 255, 255, 0.03);
  /* Universal/Button/Secondary (White) — Figma 46351:130604 */
  --White-White-100: #ffffff;
  --White-White-80: rgba(255, 255, 255, 0.8);
  /* Button-InnerShadow (Effects — fixed glass overlay, never a fill) */
  --u-btn-inner-shadow:
    0 1.5px 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 7px 26.5px 0 rgba(255, 255, 255, 0.12) inset;
}

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

html {
  container-type: inline-size;
  container-name: root;
  width: 100%;
  margin: 0 auto;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(0, 110, 245, 0.07) 0%, transparent 55%);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type scale — Figma Mobile / 320–767 (inherits via body) */
@container root (max-width: 767px) {
  body {
    --type-h1-size: 28px;
    --type-h2-size: 22px;
    --type-h2-lh: 1.35;
    /* Mobile/H3 uses SF Pro Semibold */
    --type-h3-font: var(--font-system);
    --type-h3-size: 20px;
    --type-h3-lh: 1.45;
    --type-h4-size: 17px;
    --type-h5-size: 15px;
    --type-body-1-size: 15px;
    --type-body-1-lh: 1.5;
    --type-body-2-size: 14px;
    --type-body-2-lh: 1.5;
    --type-body-2-tracking: 0.0025em;
    --type-body-3-size: 12.5px;
    --type-body-3-lh: 1.5;
    --type-body-3-tracking: 0.0025em;
    --type-button-lg-size: 14px;
    --type-button-sm-weight: 500;
    --type-button-sm-size: 13px;
    --type-overline-1-size: 12px;
    --type-overline-2-weight: 700;
    --type-overline-2-size: 11px;
    --type-overline-2-tracking: 0.06em;
    --type-overline-3-size: 10px;
    --type-overline-3-tracking: 0.06em;
  }
}

/* Universal/Card/Stats — Figma 46351:129656; padding/type fixed across breakpoints */
.u-card-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 67px;
  margin: 0;
  padding: 9px 0 12px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  box-sizing: border-box;
  text-align: center;
  word-break: break-word;
}

.u-card-stats__value {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.u-card-stats__label {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/*
 * Universal/Button/Primary — Figma 46351:130602 (Lg) / 46351:130615 (Sm)
 * Design panel layers (bottom → top):
 *   1. Fill — solid Blue/Blue-1 → Blue/Blue-2 (smooth color transition)
 *   2. Effects — Button-InnerShadow (::after, fixed overlay, never animates)
 *   3. Label — text above fill + effect
 * Disabled = whole control @ 30% opacity.
 */
.u-btn-primary,
.u-btn-primary-sm {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: 40px;
  overflow: hidden;
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Fill — color style only */
  background-color: var(--Blue-Blue-1, #006ef5);
  background-image: none;
  box-shadow: none;
  transition: background-color 0.2s ease, opacity 0.15s ease;
}

.u-btn-primary {
  height: 38px;
  min-height: 38px;
  padding: 0.5px 18px 0;
  font-size: 15px;
}

/* Primary Small — Figma 46351:130615 (Desktop/Button-Sm) */
.u-btn-primary-sm {
  height: 32px;
  min-height: 32px;
  padding: 0 16px;
  font-size: 14px;
}

/* Effects — Button-InnerShadow overlay (above fill, below label) */
.u-btn-primary::after,
.u-btn-primary-sm::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  box-shadow: var(--u-btn-inner-shadow);
}

.u-btn-primary:hover:not(:disabled):not(.is-disabled),
.u-btn-primary-sm:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--Blue-Blue-2, #0057c2);
}

.u-btn-primary:focus-visible,
.u-btn-primary-sm:focus-visible {
  outline: 2px solid rgba(0, 110, 245, 0.9);
  outline-offset: 2px;
}

.u-btn-primary:disabled,
.u-btn-primary.is-disabled,
.u-btn-primary-sm:disabled,
.u-btn-primary-sm.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * Universal/Button/Secondary (Transparent) — Figma 46351:130607
 * Fill only (no Effects style in Figma): White/White-9 → White/White-3
 * Same geometry + type as Primary. Disabled = default @ 30% opacity.
 */
.u-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0.5px 18px 0;
  border: none;
  border-radius: 40px;
  overflow: hidden;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--White-White-9, rgba(255, 255, 255, 0.09));
  background-image: none;
  box-shadow: none;
  transition: background-color 0.2s ease, opacity 0.15s ease;
}

.u-btn-secondary:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--White-White-3, rgba(255, 255, 255, 0.03));
}

.u-btn-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

.u-btn-secondary:disabled,
.u-btn-secondary.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * Universal/Button/Secondary (White) — Figma 46351:130604
 * Fill: White/White-100 → White/White-80
 * Label: Blue/Blue-1 → Blue/Blue-2
 * Same geometry + type as Primary. Disabled = default @ 30% opacity.
 *
 * Icon variant — Figma 46351:130634 (Secondary White + leading icon)
 */
.u-btn-secondary-white,
.u-btn-secondary-white-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0.5px 18px 0;
  border: none;
  border-radius: 40px;
  overflow: hidden;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--White-White-100, #ffffff);
  background-image: none;
  color: var(--Blue-Blue-1, #006ef5);
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.15s ease;
}

.u-btn-secondary-white-icon {
  gap: 10px;
  padding: 0.5px 19px 0 16px;
}

.u-btn-secondary-white-icon .u-btn__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.u-btn-secondary-white:hover:not(:disabled):not(.is-disabled),
.u-btn-secondary-white-icon:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--White-White-80, rgba(255, 255, 255, 0.8));
  color: var(--Blue-Blue-2, #0057c2);
}

.u-btn-secondary-white:focus-visible,
.u-btn-secondary-white-icon:focus-visible {
  outline: 2px solid rgba(0, 110, 245, 0.45);
  outline-offset: 2px;
}

.u-btn-secondary-white:disabled,
.u-btn-secondary-white.is-disabled,
.u-btn-secondary-white-icon:disabled,
.u-btn-secondary-white-icon.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

#screen-lobby.active {
  background-image: none;
}

#app {
  min-height: 100vh;
}

.screen {
  display: none;
  min-height: 100vh;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/*
 * First-paint signed-in chrome: server injects html.signed-in when the HttpOnly
 * session cookie maps to a verified account. Overrides default guest markup so
 * Sign Up / Log In do not flash before app.js resolves auth.
 */
html.signed-in #side-nav-guest-actions {
  display: none !important;
}

html.signed-in #tab-account.hidden {
  display: flex !important;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  font-family: var(--type-button-lg-font);
  font-size: var(--type-button-lg-size);
  font-weight: var(--type-button-lg-weight);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  width: 100%;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
}



.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
}


.btn-toggle.active {
  background: var(--active-bg);
  color: var(--active-text);
  border-color: var(--active-border);
}


.select {
  width: 100%;
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
}

/* Topbar */

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* Lobby app shell */
#screen-lobby.active {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #050a0f;
}

.lobby-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* Lobby body shell — Figma Lobby/Play + Lobby/Watch */
#screen-lobby.lobby--home .lobby-body {
  padding: 0 0 0 16px;
  gap: 8px;
}

#screen-lobby.lobby--learn .lobby-body,
#screen-lobby.lobby--puzzles .lobby-body,
#screen-lobby.lobby--leaderboard .lobby-body {
  padding: 0 0 0 16px;
  gap: 8px;
}

/* Play tab — Figma Play/Game/PlaySettings 42523:61260
   Shared shell chrome with active puzzle play (not #screen-game) */
#screen-lobby.lobby--play .lobby-body,
#screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-body {
  gap: 0;
  padding: 0 0 0 16px;
  min-height: 0;
  overflow: hidden;
}

#screen-lobby.lobby--play .lobby-workspace,
#screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-workspace {
  align-items: stretch;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  gap: 0;
  /* Figma Side frame: p-[20px] gap-[20px] around board + settings */
  padding: 20px;
  justify-content: stretch;
  overflow: hidden;
  box-sizing: border-box;
}

#screen-lobby.lobby--watch .lobby-body {
  gap: 8px;
  padding: 0 0 0 16px;
}

#screen-lobby.lobby--legal .lobby-body {
  gap: 8px;
  padding: 0 0 0 16px;
}

.lobby-workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

#screen-lobby.lobby--watch .lobby-workspace {
  align-items: stretch;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  gap: 0;
  padding: 0;
  justify-content: center;
}

#screen-lobby.lobby--home .side-nav,
#screen-lobby.lobby--learn .side-nav,
#screen-lobby.lobby--puzzles .side-nav,
#screen-lobby.lobby--leaderboard .side-nav,
#screen-lobby.lobby--play .side-nav,
#screen-lobby.lobby--watch .side-nav,
#screen-lobby.lobby--legal .side-nav,
#screen-game .side-nav {
  padding-top: 0;
  padding-bottom: 0;
}

/* Desktop rail inset — never apply on mobile (was adding empty space under Nav/Mobile bar) */
@media (min-width: 645px) {
  #screen-lobby.lobby--home .side-nav,
  #screen-lobby.lobby--learn .side-nav,
  #screen-lobby.lobby--puzzles .side-nav,
  #screen-lobby.lobby--leaderboard .side-nav,
  #screen-lobby.lobby--play .side-nav,
  #screen-lobby.lobby--watch .side-nav,
  #screen-lobby.lobby--legal .side-nav,
  #screen-game .side-nav {
    padding-top: 10px;
    padding-bottom: 20px;
  }
}

#screen-lobby.lobby--home .side-nav__items,
#screen-lobby.lobby--learn .side-nav__items,
#screen-lobby.lobby--puzzles .side-nav__items,
#screen-lobby.lobby--leaderboard .side-nav__items {
  gap: 2px;
}

#screen-lobby.lobby--home .nav-item,
#screen-lobby.lobby--learn .nav-item,
#screen-lobby.lobby--puzzles .nav-item,
#screen-lobby.lobby--leaderboard .nav-item {
  gap: 18px;
}

/* Shared lobby tab shell — Home · Puzzles · Watch · Learn · Leaderboard
   Figma Watch/Desktop/645-1440 45276:45951: 1001px column, 20px top inset */
#screen-lobby.lobby--home .lobby-content,
#screen-lobby.lobby--learn .lobby-content,
#screen-lobby.lobby--puzzles .lobby-content,
#screen-lobby.lobby--leaderboard .lobby-content,
#screen-lobby.lobby--watch .lobby-content {
  border-radius: 0;
  flex: 1 0 0;
  min-width: 1px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 40px 0;
  background: transparent;
}

#screen-lobby.lobby--play .lobby-content,
#screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-content {
  flex: 1 1 0;
  min-width: 1px;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  padding: 0;
  justify-content: flex-start;
  align-items: stretch;
}

#screen-lobby.lobby--play .play-lobby:not(.hidden),
#screen-lobby.lobby--puzzles .puzzle-play.play-lobby:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
}

.lobby-card {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

/* Play tab */

.side-nav {
  width: var(--nav-width-expanded);
  min-width: var(--nav-width-expanded);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg);
  overflow: visible;
  transition: width var(--nav-transition), min-width var(--nav-transition);
}

#screen-lobby .side-nav {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  z-index: 5;
  overflow: hidden;
}

#screen-game .side-nav {
  position: sticky;
  top: 0;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  z-index: 5;
  overflow: hidden;
}

/* Collapsed: narrow icon rail */
html.nav-collapsed #screen-lobby .side-nav,
html.nav-collapsed #screen-game .side-nav {
  width: var(--nav-rail-width);
  min-width: var(--nav-rail-width);
}

html.nav-collapsed #screen-lobby .side-nav .nav-item,
html.nav-collapsed #screen-game .side-nav .nav-item {
  width: 100%;
  max-width: var(--nav-icon-slot);
  min-width: 0;
  height: var(--nav-icon-slot);
  min-height: var(--nav-icon-slot);
  padding: var(--nav-tab-pad);
  gap: 0;
  justify-content: flex-start;
  align-items: center;
}

html.nav-collapsed #screen-lobby .side-nav__items,
html.nav-collapsed #screen-game .side-nav__items {
  align-items: flex-start;
}

html.nav-collapsed #screen-lobby .side-nav .nav-item__label,
html.nav-collapsed #screen-lobby .side-nav .nav-item__brand-mark,
html.nav-collapsed #screen-game .side-nav .nav-item__label,
html.nav-collapsed #screen-game .side-nav .nav-item__brand-mark {
  flex: 0 0 0;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  padding-right: 0;
  overflow: hidden;
}

html:not(.nav-motion-ready) .side-nav,
html:not(.nav-motion-ready) .nav-item,
html:not(.nav-motion-ready) .nav-item__label,
html:not(.nav-motion-ready) .nav-item__brand-mark {
  transition: none !important;
}

.side-nav__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.side-nav__account {
  margin-top: auto;
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.side-nav__account-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.side-nav__account-actions .u-btn-primary,
.side-nav__account-actions .u-btn-secondary-white {
  width: 100%;
}

.side-nav__account-tab {
  width: 100%;
}

.side-nav__account-tab.active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.nav-item__icon--account img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Mobile-only closed brand bar — shown ≤644 via @container */
.mobile-top-bar {
  display: none;
}



html.nav-collapsed .side-nav__account {
  display: none;
}

/* Play lobby — Figma Play/Game/PlaySettings 42523:61260
   Side: p-20 + gap-20; Board column fills remaining width; settings 342 */
.play-lobby {
  width: 100%;
  max-width: none;
  flex: 1;
  min-height: 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.play-lobby__layout {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.play-lobby__board-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Figma Board frame: px-[20px] — keeps nav↔board and board↔settings equal */
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  container-type: size;
  container-name: play-board-col;
}

.play-lobby__stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
}

.play-lobby__board {
  position: relative;
  /* Fill the board column (Figma Board ~849 wide); square capped by column size */
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.play-lobby__board-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 4px;
}

/* Puzzle board reuses play-lobby shell; clicks must reach the canvas */
#puzzle-board-canvas.puzzle-board-canvas {
  pointer-events: auto;
  cursor: crosshair;
  background: #cc8f52;
}

.play-lobby__side {
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.play-settings__card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 17px 17px 21px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  font-family: var(--font);
  background:
    linear-gradient(90deg, rgba(0, 110, 245, 0.8), rgba(0, 110, 245, 0.8)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
}

.play-settings__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.play-settings__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.play-settings__title {
  margin: 0;
  font-family: var(--type-h5-font);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: 1.45;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.play-settings__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.play-settings__toggle,
.play-settings__handicap-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.play-settings__value-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.play-settings__caret-wrap {
  width: 11px;
  height: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.15s ease;
}

.play-settings__caret {
  width: 8px;
  height: auto;
  display: block;
}

.play-settings__section.is-collapsed .play-settings__caret-wrap {
  transform: none;
}

.play-settings__section:not(.is-collapsed) .play-settings__caret-wrap {
  transform: rotate(180deg);
}

.play-settings__section.is-collapsed .play-settings__body {
  display: none;
}

.play-settings__label {
  font-family: var(--font);
  font-size: var(--type-overline-3-size);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.play-settings__value {
  font-family: var(--font);
  font-size: var(--type-overline-3-size);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.play-settings__check {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url('/images/figma/play-settings-check-circle.svg?v=2') center / contain no-repeat;
}

.play-settings__handicap-toggle.is-on .play-settings__check {
  background-image: url('/images/figma/play-settings-check-on.svg?v=2');
}

.play-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.play-pills--stretch .play-pill {
  flex: 1 1 0;
  min-width: 0;
}

.play-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: var(--type-body-3-size);
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.play-pill:hover {
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.play-pill.active {
  border-color: #fff;
  background: #fff;
  color: var(--accent-strong);
  font-weight: 600;
}

.play-settings__clocks {
  display: grid;
  grid-template-columns: minmax(5.75rem, 1.15fr) minmax(3.25rem, 0.7fr) minmax(5.75rem, 1.15fr);
  gap: 6px;
  width: 100%;
}

.play-settings__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.play-settings__field--main,
.play-settings__field--length {
  min-width: 5.75rem;
}

.play-settings__field--periods {
  min-width: 3.25rem;
}

.play-settings__field-label {
  font-size: var(--type-overline-2-size);
  font-weight: 510;
  color: rgba(255, 255, 255, 0.8);
}

.play-settings__select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6.5px 24px 6.5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: var(--type-body-3-size);
  font-weight: 500;
  line-height: 1.2;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.play-settings__field--main .play-settings__select,
.play-settings__field--length .play-settings__select {
  min-width: 5.75rem;
}

.play-settings__select option {
  color: #050a0f;
  background: #fff;
}

.play-settings__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 0.5px 19px 0 18px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-strong);
  font-family: var(--font);
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.play-settings__cta:hover:not(:disabled) {
  opacity: 0.92;
}

.play-settings__cta:disabled {
  opacity: 0.65;
  cursor: wait;
}

.play-practice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
  color: #fff;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.play-practice-btn__label {
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.35;
}

.play-practice-btn__meta {
  font-size: var(--type-overline-2-size);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

.play-practice-btn:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
}

.play-practice-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.play-practice-btn:disabled,
.play-practice-btn.is-loading {
  opacity: 0.68;
  cursor: wait;
}

/* Figma Play right panel 42567:62442 — live ticker + 300×250 ad slot */
.play-live-ticker {
  margin: 0;
  padding-top: 12px;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: #66cc88;
}

/* Ad slots: hidden until AdSense is enabled (html.adsense-on) */
.play-ad-slot[data-ad-placement],
.home-ad-slot[data-ad-placement] {
  display: none;
}

html.adsense-on .play-ad-slot[data-ad-placement],
html.adsense-on .home-ad-slot[data-ad-placement] {
  display: flex;
  flex-direction: column;
}

html.adsense-on .play-ad-slot[data-ad-placement] {
  align-items: center;
}

.play-ad-slot {
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  width: 100%;
  box-sizing: border-box;
  background: #050a0f;
}

.play-ad-slot__unit {
  width: 300px;
  height: 250px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 19px 21px 21px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.play-ad-slot__label {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: var(--type-overline-3-size);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  word-break: break-word;
}

.play-ad-slot__unit.is-live,
.home-ad-slot__unit.is-live {
  padding: 0;
  border: none;
  background: transparent;
  align-items: center;
  justify-content: center;
}

.play-ad-slot__unit.is-live .play-ad-slot__label,
.home-ad-slot__unit.is-live .home-ad-slot__label,
.play-ad-slot__unit.is-live [data-ad-placeholder],
.home-ad-slot__unit.is-live [data-ad-placeholder] {
  display: none;
}

.play-ad-slot__unit .adsbygoogle,
.home-ad-slot__unit .adsbygoogle {
  margin: 0 auto;
}

@media (max-width: 960px) {
  .play-lobby,
  .play-lobby__layout {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .play-lobby__layout {
    flex-direction: column;
    align-items: stretch;
  }

  .watch-lobby__layout {
    flex-direction: column;
    align-items: stretch;
  }

  .play-lobby__board-col {
    flex: 0 0 auto;
    max-width: none;
    padding: 0;
    /* size container + height:100% collapses when stacked — use width-driven square */
    height: auto;
    max-height: none;
    min-height: 0;
    container-type: inline-size;
    overflow: visible;
  }

  .play-lobby__stage {
    height: auto;
  }

  .play-lobby__board {
    width: min(100%, 420px);
    height: auto;
    aspect-ratio: 1;
    max-width: min(100%, 420px);
    max-height: none;
    margin: 0 auto;
  }

  .play-lobby__side {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 300px;
    margin: 0 auto;
  }

  .play-settings__card {
    min-width: 0;
  }
}

.match-search {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 14, 21, 0.72);
}

.match-search__card {
  width: min(100%, 420px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #0d1822;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.match-search__status {
  margin: 0;
  font-size: var(--type-h5-size);
  font-weight: 600;
  color: #fff;
}

.match-search__detail {
  margin: 8px 0 0;
  font-size: var(--type-body-2-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.match-search__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.match-search__fallback {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.match-search__fallback-text {
  margin: 0;
  font-size: var(--type-body-2-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.match-search__fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tables-sort {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.watch-head__col[data-sort] {
  cursor: pointer;
  user-select: none;
}

.watch-head__col[data-sort]:hover .tables-sort {
  color: #fff;
}

.watch-head__col.sort-active .tables-sort {
  color: var(--active-text);
}

.watch-head__col.sort-asc .tables-sort {
  transform: rotate(180deg);
}


.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}


.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal__head--center {
  position: relative;
  justify-content: center;
  margin-bottom: 0;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal__head--center h2 {
  font-size: var(--type-button-lg-size);
  font-weight: 590;
  text-align: center;
}

.modal__head--center .modal__close {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 0;
  color: rgba(255, 255, 255, 0.8);
}

.modal__head--center .modal__close svg {
  width: 20px;
  height: 20px;
}

.modal__body {
  padding: 21px 24px 22px;
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}



.modal__link--back {
  margin-top: 16px;
}



















.modal__head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.modal__close {
  font-size: 1.5rem;
  line-height: 1;
}



.modal__tab.active {
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--active-text);
}

.modal__body.hidden,
.modal__foot.hidden {
  display: none;
}

.modal__panel.hidden {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  height: var(--nav-icon-slot);
  min-height: var(--nav-icon-slot);
  padding: var(--nav-tab-pad);
  border: none;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition:
    background 0.15s,
    color 0.15s,
    max-width var(--nav-transition),
    padding-right var(--nav-transition),
    gap var(--nav-transition);
}

.nav-item:hover {
  background: var(--nav-hover-bg);
  color: #fff;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.nav-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
}

.nav-item__icon svg {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
}

.nav-item__icon--home img,
.nav-item__icon--play img,
.nav-item__icon--watch img,
.nav-item__icon--learn img,
.nav-item__icon--puzzles img,
.nav-item__icon--leaderboard img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.nav-item:hover .nav-item__icon--home img,
.nav-item:hover .nav-item__icon--play img,
.nav-item:hover .nav-item__icon--watch img,
.nav-item:hover .nav-item__icon--learn img,
.nav-item:hover .nav-item__icon--puzzles img,
.nav-item:hover .nav-item__icon--leaderboard img,
.nav-item.active .nav-item__icon--home img,
.nav-item.active .nav-item__icon--play img,
.nav-item.active .nav-item__icon--watch img,
.nav-item.active .nav-item__icon--learn img,
.nav-item.active .nav-item__icon--puzzles img,
.nav-item.active .nav-item__icon--leaderboard img {
  opacity: 1;
}

.nav-item__icon--logo img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.nav-item__brand-mark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: var(--nav-brand-mark-width);
  height: 14.994px;
  overflow: hidden;
  transition:
    max-width var(--nav-transition),
    min-width var(--nav-transition),
    opacity var(--nav-transition),
    flex var(--nav-transition);
}

.nav-item__brand-mark img {
  display: block;
  width: var(--nav-brand-mark-width);
  height: 14.994px;
  object-fit: contain;
}

.nav-item--brand {
  margin-bottom: 0;
  color: #fff;
  cursor: pointer;
  overflow: visible;
  min-width: max-content;
}

.nav-item--brand:hover,
.nav-item--brand:focus-visible {
  background: transparent;
  color: #fff;
}

.nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  max-width: 8rem;
  opacity: 1;
  white-space: nowrap;
  line-height: 1.45;
  padding-right: 0;
  transition:
    max-width var(--nav-transition),
    opacity var(--nav-transition),
    padding-right var(--nav-transition),
    flex var(--nav-transition);
}

.nav-item svg {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex-shrink: 0;
}

.lobby-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

#screen-lobby.lobby--home .lobby-content,
#screen-lobby.lobby--learn .lobby-content,
#screen-lobby.lobby--puzzles .lobby-content,
#screen-lobby.lobby--leaderboard .lobby-content,
#screen-lobby.lobby--watch .lobby-content {
  overflow-y: auto;
  background: transparent;
}

#screen-lobby.lobby--legal .lobby-content {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
  align-items: center;
}

@container root (max-width: 1200px) {
  .game-workspace {
    gap: 16px;
    padding: 16px;
  }

  .game-side {
    width: 312px;
    flex-basis: 312px;
  }

  .game-panel {
    width: 100%;
  }
}

/* Watch page column — Figma Hero/Watch 45276:46131; shell from .lobby-shell / .lobby-page */
.watch-page {
  gap: 36px;
  container-type: inline-size;
  container-name: watch-page;
}

.watch-lobby__layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  /* Content-sized — flex:1 + min-height:0 collapses the table to a hairline */
  flex: 0 0 auto;
  min-height: auto;
}

.watch-lobby__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: auto;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
}

/* Watch tab: live games table — Figma 45276:46132 */
.watch-shell {
  display: flex;
  flex-direction: column;
  min-height: auto;
  border-radius: 20px;
}

.watch-lobby__main.lobby-card {
  flex: 1 1 auto;
  min-height: auto;
}

.home-hero.home-card.watch-hero {
  background: var(--bg);
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
}

/* Default / 768–1001 — Desktop H1 37 */
.watch-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 37px 33px;
}

.watch-hero__glow {
  position: absolute;
  display: block;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url('/images/brand/puzzles-hero-glow.png?v=6') center / 100% 100% no-repeat;
}

.watch-hero .home-hero__content {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  max-width: 540px;
  width: 100%;
  gap: 12px;
}

.watch-hero .home-hero__heading {
  gap: 10px;
}

.watch-hero .home-hero__eyebrow {
  font-family: var(--type-overline-1-font);
  font-size: var(--type-overline-1-size);
  font-weight: var(--type-overline-1-weight);
  letter-spacing: var(--type-overline-1-tracking);
}

.watch-hero .home-hero__title {
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  text-transform: capitalize;
}

.watch-hero .home-hero__lead {
  max-width: none;
  width: 100%;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
  box-sizing: border-box;
}

.watch-hero__ticker {
  margin: 0;
  padding-top: 12px;
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  color: #66cc88;
}

/* 320–767 — Mobile H1 28 */
@container watch-page (max-width: 767px) {
  #screen-lobby.lobby--watch .watch-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 25px;
  }

  #screen-lobby.lobby--watch .watch-hero .home-hero__content {
    width: 100%;
    max-width: 540px;
  }

  #screen-lobby.lobby--watch .watch-hero .home-hero__heading {
    gap: 8px;
  }

  #screen-lobby.lobby--watch .watch-hero .home-hero__title {
    max-width: none;
    text-transform: none;
  }

  #screen-lobby.lobby--watch .watch-hero .home-hero__lead {
    line-height: 1.5;
    padding-right: 0;
  }

  #screen-lobby.lobby--watch .watch-hero__ticker {
    padding-top: 8px;
  }
}

.watch-table {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.watch-head,
.watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 560px;
  box-sizing: border-box;
}

.watch-head {
  min-height: 50px;
  padding-top: 14px;
  padding-bottom: 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.09);
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.watch-head__players {
  flex: 1;
  min-width: 0;
  width: 169px;
  max-width: 169px;
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.watch-head__col {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 116px;
  flex-shrink: 0;
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.watch-list {
  display: flex;
  flex-direction: column;
}

.watch-row {
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.15s;
}

.watch-row:last-child {
  border-bottom: none;
}

.watch-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.watch-row__players {
  flex: 1;
  min-width: 0;
  width: 169px;
  max-width: 169px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.watch-row__col {
  width: 116px;
  flex-shrink: 0;
  font-size: var(--type-button-lg-size);
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
}

.watch-player {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  font-size: var(--type-button-lg-size);
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-player__stone {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.watch-player__stone.black {
  background: radial-gradient(circle at 32% 30%, #555 0%, #303030 50%, #0a0a0a 100%);
  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.6);
}

.watch-player__stone.white {
  background: radial-gradient(circle at 32% 30%, #fff 0%, #c8c4bc 100%);
  box-shadow: 0 1.2px 2.4px rgba(0, 0, 0, 0.3);
}

.watch-player__rank {
  color: rgba(255, 255, 255, 0.6);
}

.watch-player__color {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.watch-empty {
  padding: 3rem 24px;
  color: var(--text-muted);
  text-align: center;
}

/* Home tab — Figma Home/1440w dark (42146:3625) */
.home-hero__title,
.home-section__title,
.home-benefit__title,
.home-level-card__title,
.home-cta__title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lobby-shell {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 100%;
  max-width: 1001px;
  width: 100%;
  overflow: visible;
  background: transparent;
}

.lobby-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1001px;
  min-width: 1px;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.lobby-page > .home-legal {
  margin-top: auto;
}

/* Home hero breakpoints track page width (Figma Hero/Home 45450:16894) */
#screen-lobby.lobby--home .lobby-page {
  container-type: inline-size;
  container-name: home-page;
}

/* Default / 768–1001 — Desktop H1 37 */
#screen-lobby.lobby--home .home-hero {
  gap: 32px;
  padding: 37px 33px;
  align-items: center;
}

#screen-lobby.lobby--home .home-hero__content {
  flex: 0 1 auto;
  max-width: 520px;
  width: 100%;
}

#screen-lobby.lobby--home .home-hero__heading {
  gap: 10px;
}

#screen-lobby.lobby--home .home-hero__actions {
  flex-wrap: nowrap;
}

#screen-lobby.lobby--home .home-hero__actions .u-btn-primary,
#screen-lobby.lobby--home .u-btn-secondary {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Figma 45096:41633 — stones column stretches; pair centered in remaining width */
#screen-lobby.lobby--home .home-hero__stones {
  flex: 1 1 0;
  align-self: stretch;
  width: auto;
  min-width: 0;
  padding: 0 20px;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

.home-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
}

.home-hero.home-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 110, 245, 0.8) 0%, rgba(0, 110, 245, 0.4) 70%),
    rgba(255, 255, 255, 0.09);
}

.home-cta.home-card {
  background:
    radial-gradient(ellipse 80% 14% at 50% -10%, rgba(0, 110, 245, 0.8) 0%, rgba(0, 110, 245, 0.4) 70%),
    rgba(255, 255, 255, 0.09);
}

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 37px 33px;
  margin-top: 0;
  overflow: visible;
  box-sizing: border-box;
}

.home-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 540px;
  flex: 1 1 auto;
  min-width: 0;
}

.home-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.home-hero__eyebrow {
  margin: 0;
  font-family: var(--type-overline-1-font);
  font-size: var(--type-overline-1-size);
  font-weight: var(--type-overline-1-weight);
  letter-spacing: var(--type-overline-1-tracking);
  line-height: var(--type-overline-1-lh);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.home-hero__title {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0;
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: 0;
  color: #fff;
  text-transform: capitalize;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.home-hero__title span {
  display: inline;
}

.home-hero__lead {
  margin: 0;
  max-width: 516px;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
  color: rgba(255, 255, 255, 0.8);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 16px;
}

.home-hero__stones {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: auto;
  min-width: 0;
  padding: 0 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
}

.home-hero__stone {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
}

.home-hero__stone--black {
  background: radial-gradient(circle at 32% 30%, #555 0%, #303030 50%, #0a0a0a 100%);
  box-shadow: 0 13px 40px rgba(0, 0, 0, 0.6);
}

.home-hero__stone--white {
  background: radial-gradient(circle at 32% 30%, #fff 0%, #c8c4bc 100%);
  box-shadow: 0 13px 27px rgba(0, 0, 0, 0.3);
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px 32px 0;
}

.home-section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.home-section__title {
  margin: 0;
  font-family: var(--type-h2-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  color: #fff;
}

.home-section__lead {
  margin: 0;
  max-width: 600px;
  font-family: var(--type-body-2-font);
  font-size: var(--type-body-2-size);
  font-weight: var(--type-body-2-weight);
  line-height: var(--type-body-2-lh);
  letter-spacing: var(--type-body-2-tracking);
  color: rgba(255, 255, 255, 0.8);
}

.home-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-benefit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Figma Card-Text 42273:45464 · Breakpoint=768-1001 */
  padding: 13px 18px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.home-benefit__title {
  margin: 0;
  font-family: var(--type-h5-font);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: var(--type-h5-lh);
  text-transform: capitalize;
  color: #fff;
}

.home-benefit__text {
  margin: 0;
  font-family: var(--type-body-3-font);
  font-size: var(--type-body-3-size);
  font-weight: var(--type-body-3-weight);
  line-height: var(--type-body-3-lh);
  letter-spacing: var(--type-body-3-tracking);
  color: rgba(255, 255, 255, 0.6);
}

.home-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.home-level-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 18px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.home-level-card__title {
  margin: 0;
  font-family: var(--type-h5-font);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: var(--type-h5-lh);
  text-transform: capitalize;
  color: #fff;
}

.home-level-card__text {
  margin: 0;
  font-family: var(--type-body-3-font);
  font-size: var(--type-body-3-size);
  font-weight: var(--type-body-3-weight);
  line-height: var(--type-body-3-lh);
  letter-spacing: var(--type-body-3-tracking);
  color: rgba(255, 255, 255, 0.6);
}

/* Card-Text — Figma 42273:45464 · 320–767 */
@container home-page (max-width: 767px) {
  #screen-lobby.lobby--home .home-benefit,
  #screen-lobby.lobby--home .home-level-card {
    gap: 3px;
    padding: 8px 14px 12px;
  }
}

@container learn-page (max-width: 767px) {
  #screen-lobby.lobby--learn .home-benefit {
    gap: 3px;
    padding: 8px 14px 12px;
  }
}

/* Figma Home AdSense section 45353:6944 */
.home-ad-slot {
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 36px;
  box-sizing: border-box;
  background: #050a0f;
}

/* Lobby pages: exact 36px above and below each display slot (only when ads are on) */
html.adsense-on .lobby-page > .home-ad-slot {
  padding-top: 36px;
  padding-bottom: 36px;
}

html.adsense-on .lobby-page > .home-section:has(+ .home-ad-slot) {
  padding-bottom: 0;
}

html.adsense-on .lobby-page > .home-section.home-included:has(+ .home-ad-slot) {
  padding-bottom: 0;
}

html.adsense-on .lobby-page > .home-ad-slot + .home-section,
html.adsense-on .lobby-page > .home-ad-slot + .home-section.home-included {
  padding-top: 0;
}

html.adsense-on .lobby-page > .home-ad-slot + .home-cta {
  margin-top: 0;
}

.home-ad-slot__unit {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.home-ad-slot--970x90 .home-ad-slot__unit {
  width: 970px;
  height: 90px;
  max-width: 100%;
  padding: 19px 21px 21px;
  flex-shrink: 0;
}

/* Figma Learn AdSense 45353:6900 — under Captures */
.home-ad-slot--728x90 .home-ad-slot__unit {
  width: 728px;
  height: 90px;
  max-width: 100%;
  padding: 19px 21px 21px;
  flex-shrink: 0;
}

.home-ad-slot--learn {
  align-items: flex-start;
  padding-left: 32px;
  padding-right: 32px;
}

.home-ad-slot__label {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: var(--type-overline-3-size);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  word-break: break-word;
  white-space: pre-wrap;
}

/* Net 36px above slot when parent already has gap */
.leaderboard-page > .home-ad-slot {
  padding-top: 12px;
}

.watch-page > .home-ad-slot {
  padding-top: 0;
}

.home-section.home-included {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px;
  padding: 36px 32px;
}

.home-included__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 12px;
  flex-shrink: 0;
}

.home-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-features__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.home-feature-check-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 0;
}

.home-feature-check {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.home-feature-text {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--type-body-2-font);
  font-size: var(--type-body-2-size);
  font-weight: var(--type-body-2-weight);
  line-height: var(--type-body-2-lh);
  letter-spacing: var(--type-body-2-tracking);
  color: #fff;
}

/* List-Check — Figma 44250:10569 · 320–767 smaller type + icon */
@container home-page (max-width: 767px) {
  #screen-lobby.lobby--home .home-features__item {
    gap: 12px;
  }

  #screen-lobby.lobby--home .home-feature-check-wrap {
    padding: 1.5px 0;
  }

  #screen-lobby.lobby--home .home-feature-check {
    width: 17px;
    height: 17px;
  }

  #screen-lobby.lobby--home .home-feature-text {
    line-height: 1.5;
  }
}

.home-included__media {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 319px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
}

.home-included__media img {
  position: absolute;
  width: 100%;
  height: 149.98%;
  left: -0.16%;
  top: -41.14%;
  max-width: none;
  display: block;
}

.home-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 33px 29px;
  text-align: center;
}

.home-cta__title {
  margin: 0;
  font-family: var(--type-h2-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  color: #fff;
}

.home-cta__text {
  margin: 0;
  padding: 0 0 12px;
  font-family: var(--type-body-2-font);
  font-size: var(--type-body-2-size);
  font-weight: var(--type-body-2-weight);
  line-height: var(--type-body-2-lh);
  letter-spacing: var(--type-body-2-tracking);
  color: #fff;
}

.home-cta__btn {
  width: auto;
  margin-top: 0;
  margin-inline: auto;
}

.home-cta .u-btn-primary {
  width: auto;
  margin-inline: auto;
}

.home-cta__trust {
  margin: 6px 0 0;
  font-size: var(--type-body-3-size);
  font-weight: 500;
  line-height: var(--type-body-3-lh);
  color: rgba(255, 255, 255, 0.6);
}

.home-legal {
  margin: 0;
  padding: 32px;
  text-align: center;
  font-size: var(--type-body-3-size);
  line-height: var(--type-body-3-lh);
  color: rgba(255, 255, 255, 0.42);
}

.home-legal a {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
}

.home-legal span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.35);
}

.home-legal a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.home-legal__copy {
  color: rgba(255, 255, 255, 0.42);
}

/* Learn tab — Figma 44942:5428 / Hero/Learn 45450:17210 */
.learn-page .home-cta {
  margin-top: 36px;
}

#screen-lobby.lobby--learn .learn-page {
  container-type: inline-size;
  container-name: learn-page;
}

.home-hero.home-card.learn-hero {
  position: relative;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
  background: #050a0f;
}

.learn-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 10, 15, 0.72) 0%, rgba(5, 10, 15, 0.35) 55%, rgba(5, 10, 15, 0.15) 100%),
    url('/images/brand/learn-hero.jpg?v=2') center / cover no-repeat;
}

/* Default / 768–1001 — Desktop H1 37 */
.learn-hero {
  padding: 37px 33px;
}

.learn-hero .home-hero__content {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  max-width: 540px;
  width: 100%;
  gap: 12px;
}

.learn-hero .home-hero__heading {
  gap: 10px;
}

.learn-hero .home-hero__eyebrow {
  font-family: var(--type-overline-1-font);
  font-size: var(--type-overline-1-size);
  font-weight: var(--type-overline-1-weight);
  letter-spacing: var(--type-overline-1-tracking);
}

.learn-hero .home-hero__title.learn-hero__title {
  display: block;
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  text-transform: capitalize;
}

.learn-hero .home-hero__lead {
  max-width: none;
  width: 100%;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
  box-sizing: border-box;
}

.learn-hero .home-hero__actions {
  flex-wrap: nowrap;
  gap: 12px;
  padding-top: 16px;
}

.learn-hero .home-hero__actions .u-btn-primary,
.learn-hero .u-btn-secondary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.learn-hero__title {
  display: block;
}

  /* 420–767 — Mobile H1 28, CTAs row (Play primary) */
@container learn-page (max-width: 767px) {
  #screen-lobby.lobby--learn .learn-hero {
    padding: 25px;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__content {
    max-width: 540px;
    width: 100%;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__heading {
    gap: 8px;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__title.learn-hero__title {
    text-transform: none;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__lead {
    line-height: 1.5;
    padding-right: 0;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__actions {
    gap: 8px;
    padding-top: 12px;
  }

  /* Mid/mobile: Play is primary, Practice is secondary */
  #screen-lobby.lobby--learn #learn-cta-hero {
    order: -1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 40px;
    background-color: var(--Blue-Blue-1, #006ef5);
    background-image: none;
    box-shadow: none;
    transition: background-color 0.2s ease, opacity 0.15s ease;
  }

  #screen-lobby.lobby--learn #learn-cta-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    box-shadow: var(--u-btn-inner-shadow);
  }

  #screen-lobby.lobby--learn #learn-cta-hero:hover:not(:disabled) {
    background-color: var(--Blue-Blue-2, #0057c2);
  }

  #screen-lobby.lobby--learn #learn-cta-puzzles.u-btn-primary {
    background-color: var(--White-White-9, rgba(255, 255, 255, 0.09));
    background-image: none;
    border: none;
    box-shadow: none;
  }

  #screen-lobby.lobby--learn #learn-cta-puzzles.u-btn-primary::after {
    content: none;
  }

  #screen-lobby.lobby--learn #learn-cta-puzzles.u-btn-primary:hover:not(:disabled) {
    background-color: var(--White-White-3, rgba(255, 255, 255, 0.03));
  }
}

/* 320–419 — stacked full-width CTAs */
@container learn-page (max-width: 419px) {
  #screen-lobby.lobby--learn .learn-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  #screen-lobby.lobby--learn .learn-hero .home-hero__actions .u-btn-primary,
  #screen-lobby.lobby--learn .learn-hero .u-btn-secondary {
    width: 100%;
  }
}

.learn-guide {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-top: 8px;
}

.learn-toc {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  min-width: 200px;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 30px 0 20px 5px;
  align-self: flex-start;
}

.learn-toc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  min-height: 34px;
  width: 100%;
  padding: 0 15px 0 27px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--type-body-2-size);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: color 0.15s ease;
}

.learn-toc__link:hover {
  color: #fff;
}

.learn-toc__link.is-active {
  padding-left: 12px;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.learn-toc__link.is-active::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: var(--accent);
}

.learn-guide__main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Learn Section — Figma Section 45004:41543 (What Is Go? → Ranks) */
.learn-chapter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 36px 32px 0;
  box-sizing: border-box;
  scroll-margin-top: 16px;
}

.learn-chapter--tips {
  gap: 0;
  padding: 36px 32px 8px;
}

.learn-chapter__title {
  margin: 0;
  width: 100%;
  font-family: var(--type-h2-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  color: #fff;
}

.learn-chapter__intro,
.learn-chapter__body {
  margin: 0;
  max-width: 600px;
  width: 100%;
  font-family: var(--type-body-2-font);
  font-size: var(--type-body-2-size);
  font-weight: var(--type-body-2-weight);
  line-height: var(--type-body-2-lh);
  letter-spacing: var(--type-body-2-tracking);
  color: rgba(255, 255, 255, 0.8);
}

.learn-chapter__body p {
  margin: 0 0 8px;
}

.learn-chapter__body p:last-child {
  margin-bottom: 0;
}

.learn-chapter__intro {
  margin: 0 0 20px;
}

.learn-chapter--tips .learn-chapter__title {
  margin-bottom: 8px;
}

.learn-tips-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@container root (max-width: 900px) {
  .learn-guide {
    flex-direction: column;
  }

  .learn-toc {
    position: relative;
    top: auto;
    flex: none;
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 20px 0 0;
  }

  .learn-toc__link,
  .learn-toc__link.is-active {
    padding-left: 12px;
    padding-right: 12px;
  }

  .learn-toc__link.is-active {
    background: transparent;
  }

  .learn-toc__link.is-active::before {
    height: 12px;
  }

  .learn-chapter,
  .learn-chapter--tips {
    padding: 28px 0 0;
  }

  .learn-tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container root (max-width: 700px) {
  .learn-tips-grid {
    grid-template-columns: 1fr;
  }
}

/* Tsumego / puzzle practice */
.puzzle-section {
  scroll-margin-top: 24px;
}

/* Puzzle hub — playful game-mode select */
.puzzles-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Hero/Puzzles breakpoints track page width (Figma 45450:16910) */
#screen-lobby.lobby--puzzles .puzzles-page {
  container-type: inline-size;
  container-name: puzzles-page;
}

.puzzle-hub {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.home-hero.home-card.puzzles-hero {
  background: var(--bg);
  flex-shrink: 0;
}

/* Default / 768–1001 — Desktop H1 37 */
.puzzles-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 37px 33px;
}

.puzzles-hero__glow {
  position: absolute;
  display: block;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/images/brand/puzzles-hero-glow.png?v=6') center / 100% 100% no-repeat;
}

.puzzles-hero .home-hero__content,
.puzzles-hero__content {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  max-width: 540px;
  width: 100%;
  gap: 12px;
}

.puzzles-hero .home-hero__heading {
  gap: 10px;
}

.puzzles-hero .home-hero__title.puzzles-hero__title {
  display: block;
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  text-transform: capitalize;
}

.puzzles-hero__title span {
  letter-spacing: inherit;
  text-transform: capitalize;
}

.puzzles-hero .home-hero__lead.puzzles-hero__lead {
  max-width: none;
  width: 100%;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
  box-sizing: border-box;
}

.puzzle-hub-section__eyebrow {
  margin: 0;
  font-family: var(--type-overline-1-font);
  font-size: var(--type-overline-1-size);
  font-weight: var(--type-overline-1-weight);
  letter-spacing: var(--type-overline-1-tracking);
  line-height: var(--type-overline-1-lh);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* 320–767 — Mobile H1 28 */
@container puzzles-page (max-width: 767px) {
  #screen-lobby.lobby--puzzles .puzzles-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 25px;
  }

  #screen-lobby.lobby--puzzles .puzzles-hero .home-hero__content,
  #screen-lobby.lobby--puzzles .puzzles-hero__content {
    width: 100%;
    max-width: 540px;
  }

  #screen-lobby.lobby--puzzles .puzzles-hero .home-hero__heading {
    gap: 8px;
  }

  #screen-lobby.lobby--puzzles .puzzles-hero .home-hero__title.puzzles-hero__title {
    max-width: none;
    text-transform: none;
  }

  #screen-lobby.lobby--puzzles .puzzles-hero__title span {
    text-transform: none;
  }

  #screen-lobby.lobby--puzzles .puzzles-hero .home-hero__lead.puzzles-hero__lead {
    line-height: 1.5;
    padding-right: 0;
  }
}

.puzzle-hub > .home-section.puzzle-hub-section {
  padding: 0 32px;
}

.puzzle-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.puzzle-course-card {
  --tone: #33a1ff;
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 19px 19px 25px;
  overflow: hidden;
  box-sizing: border-box;
  border: none;
  border-radius: 20px;
  background-color: var(--tone);
  color: #050a0f;
  text-align: left;
  cursor: pointer;
  /* Inset stroke: alpha white must composite on the card fill, not the page behind */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms ease;
  animation: puzzle-card-in 480ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.puzzle-course-card:nth-child(1) { animation-delay: 40ms; }
.puzzle-course-card:nth-child(2) { animation-delay: 90ms; }
.puzzle-course-card:nth-child(3) { animation-delay: 140ms; }
.puzzle-course-card:nth-child(4) { animation-delay: 190ms; }
.puzzle-course-card:nth-child(5) { animation-delay: 240ms; }
.puzzle-course-card:nth-child(6) { animation-delay: 290ms; }

.puzzle-course-card[data-tone='ember'] {
  --tone: #ed1d24;
  background-color: #ed1d24;
  background-image: linear-gradient(to bottom, #ff6b5a, #ed1d24);
}

.puzzle-course-card[data-tone='bolt'] {
  --tone: #33a1ff;
  background-color: #33a1ff;
  background-image: none;
}

.puzzle-course-card[data-tone='gold'] {
  --tone: #ffbc20;
  background-color: #ffbc20;
  background-image: none;
}

.puzzle-course-card[data-tone='tide'] {
  --tone: #5ddea0;
  background-color: #5ddea0;
  background-image: none;
}

.puzzle-course-card[data-tone='stone'] {
  --tone: #ebf1f9;
  background-color: #ebf1f9;
  background-image: none;
}

.puzzle-course-card[data-tone='violet'] {
  --tone: #7a55fc;
  background-color: #7a55fc;
  background-image: none;
}

.puzzle-course-card:hover,
.puzzle-course-card:focus-visible {
  transform: translateY(-8px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 18px 32px rgba(0, 0, 0, 0.32),
    0 6px 12px rgba(0, 0, 0, 0.18);
  outline: none;
  z-index: 2;
}

.puzzle-course-card:active {
  transform: translateY(-3px);
}

.puzzle-course-card.is-empty,
.puzzle-course-card:disabled {
  cursor: not-allowed;
}

.puzzle-course-card.is-empty:hover,
.puzzle-course-card.is-empty:focus-visible,
.puzzle-course-card:disabled:hover,
.puzzle-course-card:disabled:focus-visible {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: auto;
}

.puzzle-course-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.puzzle-course-card__glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #050a0f;
  border: none;
  /* Outer stroke that still composites over the glyph (not the card fill) */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.puzzle-course-card__stone {
  display: block;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 20px;
  background: var(--tone);
  border: 1px solid var(--tone);
  opacity: 0.95;
}

.puzzle-course-card[data-tone='ember'] .puzzle-course-card__stone {
  background: #ed1d24;
  border-color: #ed1d24;
}

.puzzle-course-card__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 21px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(5, 10, 15, 0.12);
  color: #050a0f;
  font-size: var(--type-overline-3-size);
  font-weight: 590;
  line-height: 21px;
  letter-spacing: 0.77px;
  text-transform: uppercase;
  white-space: nowrap;
}

.puzzle-course-card__eyebrow.is-empty {
  color: #050a0f;
}

.puzzle-course-card__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h5-size);
  font-weight: 600;
  line-height: 1.45;
  color: #050a0f;
}

.puzzle-course-card__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin: 0;
  min-height: 7.5em;
  font-family: var(--font);
  font-size: var(--type-body-2-size);
  font-weight: 500;
  line-height: 1.6;
  color: #050a0f;
}

@keyframes puzzle-card-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-course-card {
    animation: none;
    transition: none;
  }

  .puzzle-course-card:hover,
  .puzzle-course-card:focus-visible,
  .puzzle-course-card:active {
    transform: none;
  }
}

.puzzle-play {
  width: 100%;
  --puzzle-step: #ed1d24;
  --puzzle-step-line: #ed1d24;
}

.puzzle-play[data-tone='ember'] {
  --puzzle-step: #ed1d24;
  --puzzle-step-line: #ed1d24;
}

.puzzle-play[data-tone='bolt'] {
  --puzzle-step: #33a1ff;
  --puzzle-step-line: #33a1ff;
}

.puzzle-play[data-tone='gold'] {
  --puzzle-step: #ffbc20;
  --puzzle-step-line: #ffbc20;
}

.puzzle-play[data-tone='tide'] {
  --puzzle-step: #5ddea0;
  --puzzle-step-line: #5ddea0;
}

.puzzle-play[data-tone='stone'] {
  --puzzle-step: #ebf1f9;
  --puzzle-step-line: rgba(255, 255, 255, 0.45);
}

.puzzle-play[data-tone='violet'] {
  --puzzle-step: #7a55fc;
  --puzzle-step-line: #7a55fc;
}

.puzzle-play.hidden,
.puzzle-hub.hidden {
  display: none;
}

/* Active puzzle: same .play-lobby shell as Play tab; content-only styles below */
.puzzles-page:has(#puzzle-play:not(.hidden)) > .home-legal {
  display: none;
}

.puzzles-page:has(#puzzle-play:not(.hidden)) {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) #puzzles-view.lobby-shell {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.puzzle-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--type-button-lg-font, var(--font));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}

.puzzle-back:hover,
.puzzle-back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.puzzle-back__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}

.puzzle-back__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.puzzle-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
  flex-shrink: 0;
}

.puzzle-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.puzzle-controls__actions .puzzle-btn {
  flex: 1 0 0;
  min-width: 0;
  min-height: 36px;
}

.puzzle-btn {
  min-height: 36px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  border-radius: 12px;
}

.puzzle-btn--ghost {
  background: #0b141d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.puzzle-btn--ghost:hover,
.puzzle-btn--ghost:focus-visible {
  background: #121c28;
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}

.puzzle-btn--accent {
  background: rgba(0, 110, 245, 0.18);
  border: 1px solid rgba(51, 161, 255, 0.45);
  color: #fff;
}

.puzzle-btn--accent:hover,
.puzzle-btn--accent:focus-visible {
  background: rgba(0, 110, 245, 0.3);
  outline: none;
}

@media (max-width: 960px) {
  .puzzle-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .puzzle-course-grid {
    grid-template-columns: 1fr;
  }
}

.puzzle-side__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}

.puzzle-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.puzzle-feedback {
  min-height: 1.4em;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.puzzle-feedback[data-tone='success'] {
  color: var(--success);
}

.puzzle-feedback[data-tone='error'] {
  color: var(--danger);
}

.puzzle-feedback[data-tone='warn'] {
  color: #e8b86d;
}

/* Side content on shared .play-lobby__side shell — fill viewport height (20px bottom via workspace pad) */
.play-lobby__side.puzzle-side {
  gap: 20px;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.puzzle-side__library {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.puzzle-side__ad {
  flex-shrink: 0;
  width: 100%;
  padding-top: 0;
  background: transparent;
  align-items: stretch;
}

.puzzle-side__ad .play-ad-slot__unit {
  width: 100%;
  max-width: 300px;
}

html.adsense-on .puzzle-side__ad[data-ad-placement] {
  align-items: stretch;
}

.puzzle-progress {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.leaderboard-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 24px;
  min-height: 100%;
  width: 100%;
  container-type: inline-size;
  container-name: leaderboard-page;
}

/* Hero/Leaderboard — Figma 45450:17164 */
.home-hero.home-card.leaderboard-hero {
  background: var(--bg);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}

.leaderboard-hero__glow {
  position: absolute;
  display: block;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url('/images/brand/puzzles-hero-glow.png?v=6') center / 100% 100% no-repeat;
}

/* Default / 1024–1440 (hero 1001) — Desktop H1 37 */
.leaderboard-hero {
  display: flex;
  align-items: center;
  padding: 37px 33px;
}

.leaderboard-hero .home-hero__content {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  max-width: 540px;
  width: 100%;
  gap: 12px;
}

.leaderboard-hero .home-hero__heading {
  gap: 10px;
}

.leaderboard-hero .home-hero__eyebrow {
  font-family: var(--type-overline-1-font);
  font-size: var(--type-overline-1-size);
  font-weight: var(--type-overline-1-weight);
  letter-spacing: var(--type-overline-1-tracking);
}

.leaderboard-hero .home-hero__title {
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  text-transform: capitalize;
}

.leaderboard-hero .home-hero__lead {
  max-width: none;
  width: 100%;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
}

/* 320–767 — Mobile H1 28 */
@container leaderboard-page (max-width: 767px) {
  #screen-lobby.lobby--leaderboard .leaderboard-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 25px;
  }

  #screen-lobby.lobby--leaderboard .leaderboard-hero .home-hero__content {
    width: 100%;
    max-width: 540px;
  }

  #screen-lobby.lobby--leaderboard .leaderboard-hero .home-hero__heading {
    gap: 8px;
  }

  #screen-lobby.lobby--leaderboard .leaderboard-hero .home-hero__title {
    max-width: none;
    text-transform: none;
  }

  #screen-lobby.lobby--leaderboard .leaderboard-hero .home-hero__lead {
    line-height: 1.5;
  }
}


.leaderboard-shell {
  width: 100%;
  max-width: 1001px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
}

.leaderboard-table.watch-table {
  width: 100%;
}

.leaderboard-table .watch-head,
.leaderboard-table .watch-row {
  min-width: 640px;
  gap: 16px;
}

.leaderboard-table .watch-row {
  cursor: default;
}

.leaderboard-col {
  flex-shrink: 0;
  font-size: var(--type-button-lg-size);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  white-space: nowrap;
}

.leaderboard-table .watch-row .leaderboard-col {
  font-weight: 500;
  line-height: 1.6;
}

.leaderboard-col--pos {
  width: 40px;
}

.leaderboard-col--player {
  flex: 1 1 0;
  min-width: 140px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-col--rank {
  width: 72px;
}

.leaderboard-col--elo {
  width: 72px;
}

.leaderboard-col--record {
  width: 100px;
}

.leaderboard-col--action {
  width: 116px;
  display: inline-flex;
  align-items: center;
}

.leaderboard-online {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--type-body-3-size);
  font-weight: 600;
  color: #66cc88;
}

.leaderboard-empty {
  padding: 3rem 24px;
  color: var(--text-muted);
  text-align: center;
  font-size: var(--type-button-lg-size);
}

.learn-topic-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.puzzle-side-note {
  margin: 0;
  font-size: var(--type-overline-2-size);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}

.puzzle-list-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.puzzle-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  /* Keep star rings / focus halo inside the scroll clip */
  padding: 4px 4px 40px 4px;
}

.puzzle-list__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 63px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 10, 15, 0), #050a0f);
}

.puzzle-list__item {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  min-height: 65px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  scroll-margin-top: 8px;
  scroll-margin-bottom: 72px;
}

.puzzle-list__item:hover .puzzle-list__title,
.puzzle-list__item:focus-visible .puzzle-list__title {
  color: rgba(255, 255, 255, 0.92);
}

.puzzle-list__item:focus-visible {
  outline: none;
}

.puzzle-list__item:focus-visible .puzzle-list__step {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.puzzle-list__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  width: 28px;
}

.puzzle-list__step {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 90px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.puzzle-list__star {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url('/images/icons/puzzle-step-star.svg') center / contain no-repeat;
  mask: url('/images/icons/puzzle-step-star.svg') center / contain no-repeat;
}

.puzzle-list__line {
  flex: 1 1 auto;
  width: 2px;
  min-height: 37px;
  background: rgba(255, 255, 255, 0.2);
}

.puzzle-list__item:last-child .puzzle-list__line {
  visibility: hidden;
  min-height: 8px;
}

.puzzle-list__item.is-solved .puzzle-list__step {
  background: var(--puzzle-step);
  border-color: transparent;
  color: #fff;
}

.puzzle-list__item.is-solved .puzzle-list__line {
  background: var(--puzzle-step-line);
}

.puzzle-list__item.is-active:not(.is-solved) .puzzle-list__step {
  background: transparent;
  border-color: var(--puzzle-step);
  color: #fff;
}

.puzzle-list__item.is-active:not(.is-solved) .puzzle-list__title {
  color: #fff;
}

.puzzle-list__item.is-active.is-solved .puzzle-list__step {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.puzzle-list__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 28px;
}

.puzzle-list__item:last-child .puzzle-list__body {
  padding-bottom: 8px;
}

.puzzle-list__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.puzzle-list__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.puzzle-list__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(102, 204, 136, 0.16);
  color: #6c8;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.puzzle-list__meta {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.puzzle-list__item.is-solved .puzzle-list__title::after {
  content: none;
}

.puzzle-list__empty {
  margin: 12px 0;
  font-size: var(--type-body-3-size);
  color: rgba(255, 255, 255, 0.55);
}

/* ≤644 — puzzle side panel polish (shell stacking comes from .play-lobby @media) */
@container puzzles-page (max-width: 644px) {
  .play-lobby__side.puzzle-side {
    max-width: none;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .puzzle-side__library {
    max-height: min(48vh, 360px);
  }

  .puzzle-side__ad.play-ad-slot[data-ad-placement] {
    display: none;
  }

  .puzzle-title {
    font-size: 22px;
  }
}

@container root (max-width: 900px) {
  .home-benefits,
  .home-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-included {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .home-included__media {
    width: 100%;
  }
}

/* Home hero — Figma Hero/Home 45450:16894 */

/* 543–767 — Mobile H1 28, compact stones */
@container home-page (max-width: 767px) {
  #screen-lobby.lobby--home .home-hero {
    gap: 20px;
    padding: 25px;
  }

  #screen-lobby.lobby--home .home-hero__content {
    flex: 1 0 0;
    max-width: 600px;
    min-width: 0;
    gap: 12px;
  }

  #screen-lobby.lobby--home .home-hero__heading {
    gap: 8px;
  }

  #screen-lobby.lobby--home .home-hero__title {
    max-width: none;
    text-transform: none;
  }

  #screen-lobby.lobby--home .home-hero__lead {
    max-width: 560px;
    line-height: 1.5;
  }

  #screen-lobby.lobby--home .home-hero__actions {
    flex-wrap: nowrap;
    gap: 8px;
    padding-top: 12px;
  }

  #screen-lobby.lobby--home .home-hero__stones {
    flex: 0 0 auto;
    min-width: 0;
    gap: 32px;
    padding: 0 14px;
  }

  #screen-lobby.lobby--home .home-hero__stone {
    width: 85px;
    height: 85px;
  }

  #screen-lobby.lobby--home .home-hero__stone--black {
    box-shadow: 0 9.5px 28.5px rgba(0, 0, 0, 0.6);
  }

  #screen-lobby.lobby--home .home-hero__stone--white {
    box-shadow: 0 9.5px 19px rgba(0, 0, 0, 0.3);
  }
}

/* 420–542 — column, no stones, buttons stay in a row */
@container home-page (max-width: 542px) {
  #screen-lobby.lobby--home .home-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 25px;
  }

  #screen-lobby.lobby--home .home-hero__content {
    flex: 0 1 auto;
    max-width: none;
    width: 100%;
  }

  #screen-lobby.lobby--home .home-hero__lead {
    max-width: none;
  }

  #screen-lobby.lobby--home .home-hero__actions {
    width: 100%;
    flex-wrap: nowrap;
  }

  #screen-lobby.lobby--home .home-hero__stones {
    display: none;
  }
}

/* 320–419 — full-width stacked CTAs */
@container home-page (max-width: 419px) {
  #screen-lobby.lobby--home .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  #screen-lobby.lobby--home .home-hero__actions .u-btn-primary,
  #screen-lobby.lobby--home .u-btn-secondary {
    width: 100%;
  }
}

/* Home CTA — Figma 45466:49857 */

/* 420–767 — Mobile H2 21, hug button */
@container home-page (max-width: 767px) {
  #screen-lobby.lobby--home .home-cta {
    margin-top: 36px;
    padding: 25px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  #screen-lobby.lobby--home .home-cta__text {
    line-height: 1.5;
    padding: 0 0 12px;
  }

  #screen-lobby.lobby--home .home-cta .u-btn-primary {
    width: auto;
  }
}

/* 320–419 — full-width CTA button */
@container home-page (max-width: 419px) {
  #screen-lobby.lobby--home .home-cta .u-btn-primary {
    width: 100%;
  }
}

/* Page gutters — Figma 645–1023 · 20px L/R */
@container root (max-width: 1023px) {
  #screen-lobby.lobby--home .lobby-content,
  #screen-lobby.lobby--learn .lobby-content,
  #screen-lobby.lobby--puzzles .lobby-content,
  #screen-lobby.lobby--leaderboard .lobby-content,
  #screen-lobby.lobby--watch .lobby-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-content {
    padding-left: 0;
    padding-right: 0;
  }

  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-workspace {
    padding: 20px;
  }
}

/* Page gutters — ≤644 · 14px L/R */
@container root (max-width: 644px) {
  #screen-lobby.lobby--home .lobby-body,
  #screen-lobby.lobby--learn .lobby-body,
  #screen-lobby.lobby--puzzles .lobby-body,
  #screen-lobby.lobby--leaderboard .lobby-body,
  #screen-lobby.lobby--watch .lobby-body,
  #screen-lobby.lobby--legal .lobby-body,
  #screen-lobby.lobby--play .lobby-body {
    padding: 0;
    gap: 0;
  }

  #screen-lobby.lobby--home .lobby-workspace,
  #screen-lobby.lobby--learn .lobby-workspace,
  #screen-lobby.lobby--puzzles .lobby-workspace,
  #screen-lobby.lobby--leaderboard .lobby-workspace,
  #screen-lobby.lobby--watch .lobby-workspace,
  #screen-lobby.lobby--legal .lobby-workspace,
  #screen-lobby.lobby--play .lobby-workspace {
    padding-left: 0;
    padding-right: 0;
  }

  #screen-lobby.lobby--home .lobby-workspace {
    padding: 0;
    gap: 0;
  }

  #screen-lobby.lobby--home .lobby-content,
  #screen-lobby.lobby--learn .lobby-content,
  #screen-lobby.lobby--puzzles .lobby-content,
  #screen-lobby.lobby--leaderboard .lobby-content,
  #screen-lobby.lobby--watch .lobby-content,
  #screen-lobby.lobby--play .lobby-content {
    padding-top: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-workspace {
    padding: 20px;
  }

  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-content {
    padding: 0;
  }

  #screen-lobby.lobby--home .lobby-content {
    padding-bottom: 0;
  }

  /* Legal / contact: page roots own L/R gutters — avoid double inset */
  #screen-lobby.lobby--legal .lobby-content {
    padding: 0;
  }

  #screen-lobby.lobby--home .lobby-page {
    padding: 0;
  }

  #screen-lobby.lobby--home .home-section {
    gap: 20px;
    padding: 36px 24px 0;
  }

  #screen-lobby.lobby--home .home-section__head {
    gap: 8px;
  }

  #screen-lobby.lobby--home .home-section__lead {
    max-width: none;
  }

  #screen-lobby.lobby--home .home-benefits {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #screen-lobby.lobby--home .home-levels {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #screen-lobby.lobby--home .home-section.home-included {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 36px 24px 0;
  }

  #screen-lobby.lobby--home .home-included__copy {
    width: 100%;
    gap: 14px;
  }

  #screen-lobby.lobby--home .home-features {
    gap: 4px;
  }

  #screen-lobby.lobby--home .home-included__media {
    width: 100%;
    flex: none;
  }

  #screen-lobby.lobby--home .home-ad-slot {
    padding-top: 36px;
  }

  #screen-lobby.lobby--home .home-legal {
    padding: 36px 32px 20px;
  }

}

.legal-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

/* Legacy lobby grid (Play tab content) */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}



.panel h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
}


.panel-hint.inline {
  margin: 0;
  font-size: 0.75rem;
}



.overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.overlay-actions .btn-primary,
.overlay-actions .btn-panel {
  width: 100%;
  flex: none;
  min-height: 44px;
  height: auto;
  padding: 0.65rem 1.25rem;
}



.badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  background: var(--bg);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 500;
}

.badge.live {
  color: var(--success);
  background: rgba(92, 184, 122, 0.15);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stack label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Lists */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.35rem;
  background: var(--bg);
  border: 1px solid transparent;
}

.list li:hover {
  border-color: var(--border);
}

.list li.player-row {
  align-items: flex-start;
  gap: 0.75rem;
}

.list li.player-row.self {
  border-color: var(--active-border);
  background: var(--active-bg-subtle);
}







.list .player-status {
  font-size: 0.75rem;
}


.list .status-online {
  color: var(--success);
}

.list .status-playing {
  color: var(--accent);
}


/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th,
.table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table th {
  color: var(--text-muted);
  font-weight: 500;
}

/* ===== Game / Watch screen ===== */
.muted {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

#screen-game.active {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #050a0f;
}

/* Flat board column — no blue ambient glow behind / above the goban */
#screen-game .game-main,
#screen-game .game-stage {
  background: #050a0f;
}

/* Game body: side nav | workspace (Figma Play/Game/Moves 38504:87246) */
.game-body {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 0 0 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Figma game frame uses the 44px icon rail, not the expanded 173px nav */
#screen-game.active .side-nav {
  width: var(--nav-rail-width);
  min-width: var(--nav-rail-width);
}

#screen-game.active .nav-item {
  width: 100%;
  max-width: var(--nav-icon-slot);
  min-width: 0;
  height: var(--nav-icon-slot);
  min-height: var(--nav-icon-slot);
  padding: var(--nav-tab-pad);
  gap: 0;
  justify-content: flex-start;
  align-items: center;
}

#screen-game.active .side-nav__items {
  align-items: flex-start;
}

#screen-game.active .nav-item__label,
#screen-game.active .nav-item__brand-mark {
  flex: 0 0 0;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  padding-right: 0;
  overflow: hidden;
}

.game-workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#screen-lobby .side-nav .nav-item--brand,
#screen-game .side-nav .nav-item--brand {
  min-width: 0;
  overflow: hidden;
}

/* Center column */
.game-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.game-meta-hidden {
  display: none;
}

.game-stage {
  flex: 1;
  min-height: 0;
  container-type: size;
  container-name: game-stage;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

html.nav-transitioning .play-lobby__board,
html.nav-transitioning .board-wrap {
  flex-shrink: 0;
}

.panel-players {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 20px 12px;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse 180% 113% at 0% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(39, 78, 117, 0.8) 0%, rgba(5, 10, 15, 0.8) 100%);
}

.panel-players .pmini {
  flex: 1 1 0;
  min-width: 0;
}

.panel-players .pmini--right .pmini__identity,
.panel-players .pmini--right .pmini__name,
.panel-players .pmini--right .pmini__record {
  text-align: right;
}

/* Board */
.board-wrap {
  position: relative;
  flex: 0 1 auto;
  align-self: center;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  max-width: 100%;
  max-height: min(100cqh, calc(100dvh - 40px));
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}

#board-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  cursor: crosshair;
  border-radius: 4px;
  overflow: hidden;
  background: #CC8F52;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn:hover {
  color: #fff;
}

.icon-btn svg {
  width: 24px;
  height: 24px;
}

.turn-indicator {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 590;
  color: var(--text-dim);
  white-space: nowrap;
}

.turn-indicator:empty {
  display: none;
}

.turn-indicator.your-turn {
  border-color: var(--active-border);
  color: var(--active-text);
}

/* Board actions live in .panel-actions */


/* Hidden review slider only — transport UI matches Figma action rows */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}




/* Game-over overlay */
.game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 15, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.overlay-card {
  position: relative;
  text-align: center;
  padding: 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 360px;
  width: calc(100% - 2rem);
}

.overlay-card__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
}

.overlay-card__close:hover {
  color: #fff;
}

.overlay-card__close svg {
  width: 20px;
  height: 20px;
}

.overlay-rematch-notice {
  margin: 0 0 1.25rem;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.overlay-rematch-notice--incoming {
  background: var(--accent-soft);
  border: 1px solid rgba(0, 137, 255, 0.35);
  color: var(--text);
}

.overlay-rematch-notice--outgoing {
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
}

.overlay-rematch-btn--accept {
  animation: rematch-accept-pulse 2s ease-in-out infinite;
}

@keyframes rematch-accept-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 137, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 137, 255, 0);
  }
}

.overlay-card h2 {
  margin: 0 0 0.5rem;
}

.overlay-card p {
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.overlay-actions .btn-primary,
.overlay-actions .btn-panel {
  width: 100%;
  flex: none;
  min-height: 44px;
  height: auto;
  padding: 0.65rem 1.25rem;
}

/* Right column: game panel + bottom-aligned 300×250 ad (20px inset from workspace padding) */
.game-side {
  width: 312px;
  flex: 0 0 312px;
  align-self: stretch;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}

/* Right panel card: players, actions, Moves / Settings (Figma Game/Content 38942:61841) */
.game-panel {
  width: 100%;
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  background: #16191d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
}

.game-ad-slot {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 0;
  background: transparent;
}

/* Players + action row share one Figma block — no gap between them */
.game-panel__game {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  z-index: 4;
}

#screen-game .panel-head:not(:has(.panel-actions:not(.hidden))) {
  display: none;
}

#screen-game .panel-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: flex-end;
  padding: 9.5px 20px 0;
  min-height: calc(9.5px + 13px * 1.6 + 7.5px + 2px);
  box-sizing: border-box;
}

#screen-game .panel-tab {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7.5px;
  min-width: 0;
  min-height: calc(13px * 1.6 + 7.5px + 2px);
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: var(--type-body-3-size);
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
}

#screen-game .panel-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

#screen-game .panel-tab.active {
  color: #fff;
  font-weight: 500;
}

#screen-game .panel-tab.active:hover {
  color: #fff;
}

#screen-game .panel-tab::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: transparent;
  border-radius: 99px 99px 0 0;
  flex-shrink: 0;
}

#screen-game .panel-tab.active::after {
  background: #fff;
}

#screen-game #history-view {
  flex: 1;
  min-height: 0;
}

.panel-head {
  flex-shrink: 0;
}

.pmini {
  display: flex;
  flex-direction: column;
  gap: 8.5px;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
}

.pmini--right {
  align-items: flex-end;
}

.pmini__block {
  display: flex;
  flex-direction: column;
  gap: 6.5px;
  min-width: 0;
  width: 100%;
}

.pmini--right .pmini__block {
  align-items: flex-end;
  text-align: right;
}

.pmini__identity {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  min-width: 0;
  width: 100%;
  font-family: var(--font);
  font-size: var(--type-overline-2-size);
  font-weight: 600;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--type-overline-1-tracking);
  text-transform: uppercase;
  line-height: 1.45;
}

.pmini--right .pmini__identity {
  align-items: flex-end;
  text-align: right;
}

.pmini__name {
  margin: 0;
  font-size: var(--type-overline-2-size);
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.pmini__name-text,
.pmini__rank {
  font: inherit;
  font-size: var(--type-overline-2-size);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: var(--type-overline-1-tracking);
  text-transform: uppercase;
}

.pmini__name-text {
  min-width: 0;
  flex: 0 1 auto;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  /* letter-spacing adds trailing space after the last glyph; cancel it for a stable gap */
  margin-right: -0.96px;
}

.pmini__rank {
  flex-shrink: 0;
  white-space: nowrap;
}

.pmini--right .pmini__name {
  justify-content: flex-end;
}

.pmini__record {
  margin: 0;
  font: inherit;
  font-size: var(--type-overline-3-size);
  font-weight: 590;
  line-height: 1.45;
  letter-spacing: 0.77px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.pmini__record-label {
  font: inherit;
  font-size: var(--type-overline-3-size);
  letter-spacing: 0.77px;
  color: rgba(255, 255, 255, 0.6);
}

.pmini__record-val {
  font: inherit;
  font-size: var(--type-overline-3-size);
  letter-spacing: 0.77px;
  color: rgba(255, 255, 255, 0.6);
}

.pmini__stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pmini__stone {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.pmini__stone--black {
  background: radial-gradient(circle at 35% 30%, #555 0%, #0a0a0a 100%);
  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.6);
}

.pmini__stone--white {
  background: radial-gradient(circle at 35% 30%, #fff 0%, #c8c4bc 100%);
  box-shadow: 0 1.2px 2.4px rgba(0, 0, 0, 0.3);
}

.pmini--right .pmini__stats {
  justify-content: flex-end;
}

.pmini__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.09);
  color: #ff5757;
  font-family: var(--font);
  font-size: var(--type-body-3-size);
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-sizing: border-box;
}

.pmini.active .pmini__badge {
  color: #ff5757;
}

.pmini__periods {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 17px;
  width: 100%;
}

.pmini--right .pmini__periods {
  justify-content: flex-end;
}

.pmini__periods:empty {
  display: none;
}

.pmini__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  min-width: 17px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  box-sizing: border-box;
}

.pmini__period__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  font-family: var(--font);
  font-size: var(--type-overline-3-size);
  font-weight: 600;
  text-align: center;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  word-break: break-word;
}

.pmini__period:not(.pmini__period--main) .pmini__period__text {
  width: 100%;
}

.pmini__period--main .pmini__period__text {
  white-space: nowrap;
}

.pmini__period__label {
  display: block;
  line-height: 1.45;
  margin-right: -0.8px;
}

.pmini__period.active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.09);
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--bg);
  flex-shrink: 0;
}

#screen-game .panel-actions .btn-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  height: auto;
  padding: 0 16px;
}

/* Figma End actions (44384:45427): Find New Opponent + Back To Lobby only */
#panel-actions-postgame.panel-actions--postgame {
  gap: 10px;
}

#panel-actions-postgame #btn-panel-new-match {
  flex: 0 0 auto;
}

#panel-actions-postgame #btn-panel-lobby {
  flex: 1 1 0;
}

.panel-actions--review .panel-actions__play {
  display: none;
}

.panel-actions--review .panel-actions__review {
  flex: 1;
  width: 100%;
}


.history-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
  margin-top: auto;
  background: var(--bg);
  z-index: 1;
}

.history-footer .btn-panel {
  flex: 1 1 0;
  min-height: 32px;
  height: auto;
}

.history-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.history-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.history-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.history-nav-btn svg {
  width: 16px;
  height: 16px;
}

.history-nav-btn--plain {
  background: transparent;
}

.history-nav-btn--plain:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
}

.btn-panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 32px;
  height: auto;
  padding: 0 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--type-body-2-size);
  font-weight: 510;
  line-height: 1.45;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}


.btn-panel--primary-sm:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
}

.btn-panel--primary-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-panel--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.btn-panel--outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.btn-panel--outline:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-panel--tertiary {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.btn-panel--tertiary:hover:not(:disabled) {
  color: #fff;
}

.btn-panel--tertiary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.panel-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  overflow: visible;
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.panel-tab {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7.5px;
  min-width: 0;
  min-height: calc(13px * 1.6 + 7.5px + 2px);
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: var(--type-body-3-size);
  font-weight: 510;
  line-height: 1.6;
  cursor: pointer;
}

.panel-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.panel-tab.active {
  color: #fff;
  font-weight: 510;
}

.panel-tab.active:hover {
  color: #fff;
}

.panel-tab::after {
  content: '';
  width: 100%;
  height: 2px;
  background: transparent;
  border-radius: 99px 99px 0 0;
  flex-shrink: 0;
}

.panel-tab.active::after {
  background: #fff;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 400px;
  padding: 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: var(--type-body-3-size);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}

.settings-row__label {
  flex: 1;
  min-width: 0;
}

.settings-row__value {
  flex-shrink: 0;
  font-weight: 510;
  color: rgba(255, 255, 255, 0.6);
}

.settings-row[role='switch'][aria-checked='true'] .settings-row__value {
  color: var(--active-text-dim);
}

.settings-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

#settings-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Move history */
.move-head {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 8px 20px;
  background: var(--bg);
  font-size: var(--type-overline-3-size);
  font-weight: 590;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.move-head span {
  flex: 1;
  min-width: 0;
}

.move-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.move-row {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 7.5px 20px;
  font-size: var(--type-overline-2-size);
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
  background: var(--bg);
}

.move-row span {
  flex: 1;
  min-width: 0;
}

.move-row__num {
  flex: 1;
  min-width: 0;
}

.move-cell {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--type-overline-2-size);
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.move-cell:hover {
  color: var(--active-text-dim);
}

.move-cell.active {
  font-weight: 590;
  color: var(--active-text);
}

.move-cell--empty {
  cursor: default;
  pointer-events: none;
}

.move-row.current {
  background: var(--active-bg);
}

.move-empty {
  padding: 1.5rem 20px;
  color: var(--text-muted);
  font-size: 0.875rem;
  background: var(--bg);
}

#history-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

/* Game started centered popup */
.game-started-popup {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.game-started-popup.hidden {
  display: none;
}

.game-started-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 14, 21, 0.72);
}

.game-started-popup__card {
  position: relative;
  width: min(100%, 380px);
  padding: 28px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #0d1822;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: game-started-pop-in 0.25s ease;
}

@keyframes game-started-pop-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.game-started-popup__title {
  margin: 0 0 12px;
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.game-started-popup__message {
  margin: 0;
  font-size: var(--type-body-1-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.game-started-popup__detail {
  margin: 8px 0 0;
  font-size: var(--type-body-2-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.game-started-popup__detail.hidden {
  display: none;
}

.game-started-popup__btn {
  width: 100%;
  margin-top: 24px;
}

/* Rematch offer popup (lobby) */
.rematch-offer-popup {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rematch-offer-popup.hidden {
  display: none;
}

.rematch-offer-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 14, 21, 0.72);
}

.rematch-offer-popup__card {
  position: relative;
  width: min(100%, 380px);
  padding: 28px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #0d1822;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: game-started-pop-in 0.25s ease;
}

.rematch-offer-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.rematch-offer-popup__close:hover {
  color: #fff;
}

.rematch-offer-popup__title {
  margin: 0 0 12px;
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.rematch-offer-popup__message {
  margin: 0;
  font-size: var(--type-body-1-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.rematch-offer-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 24px;
}

.rematch-offer-popup__actions .btn,
.rematch-offer-popup__actions .btn-panel {
  width: 100%;
  flex: none;
  height: auto;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* App toast (errors, connection status) */
.app-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.5rem 0.625rem 1rem;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 200;
  max-width: min(90vw, 420px);
  font-size: 0.875rem;
  color: #fff;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.app-toast__message {
  flex: 1;
  min-width: 0;
  text-align: left;
  cursor: grab;
}

.app-toast--dragging .app-toast__message {
  cursor: grabbing;
}

.app-toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.app-toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.app-toast__close svg {
  width: 14px;
  height: 14px;
}

.app-toast:not(.hidden) {
  pointer-events: auto;
}

.app-toast--dragging {
  transition: none;
}

.app-toast.hidden {
  pointer-events: none;
}

.app-toast--error {
  border-color: rgba(255, 87, 87, 0.6);
}

.app-toast--warn {
  border-color: rgba(255, 193, 7, 0.6);
}

.app-toast__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 100;
  max-width: 320px;
}

.toast p {
  margin: 0 0 0.5rem;
}

.toast__title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.toast--puzzle-wrong {
  z-index: 210;
  border-color: rgba(255, 87, 87, 0.65);
}

.toast--puzzle-wrong .muted {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

.toast-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Side nav ≥645 · drawer + mobile-top-bar ≤644 */
@container root (max-width: 644px) {
  #screen-lobby.active {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .lobby-body {
    flex-direction: column;
    gap: 0;
  }

  .lobby-workspace {
    flex-direction: column;
    padding: 16px 16px 0;
    gap: 16px;
  }

  /* Document scroll on phones — every lobby route + active puzzle.
     Nested overflow:hidden/auto on a viewport-tall flex child traps touch scroll. */
  #screen-lobby.lobby--home .lobby-body,
  #screen-lobby.lobby--learn .lobby-body,
  #screen-lobby.lobby--puzzles .lobby-body,
  #screen-lobby.lobby--leaderboard .lobby-body,
  #screen-lobby.lobby--play .lobby-body,
  #screen-lobby.lobby--watch .lobby-body,
  #screen-lobby.lobby--legal .lobby-body,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-body,
  #screen-lobby.lobby--home .lobby-workspace,
  #screen-lobby.lobby--learn .lobby-workspace,
  #screen-lobby.lobby--puzzles .lobby-workspace,
  #screen-lobby.lobby--leaderboard .lobby-workspace,
  #screen-lobby.lobby--play .lobby-workspace,
  #screen-lobby.lobby--watch .lobby-workspace,
  #screen-lobby.lobby--legal .lobby-workspace,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-workspace,
  #screen-lobby.lobby--home .lobby-content,
  #screen-lobby.lobby--learn .lobby-content,
  #screen-lobby.lobby--puzzles .lobby-content,
  #screen-lobby.lobby--leaderboard .lobby-content,
  #screen-lobby.lobby--play .lobby-content,
  #screen-lobby.lobby--watch .lobby-content,
  #screen-lobby.lobby--legal .lobby-content,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-content {
    overflow: visible;
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }

  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) #puzzles-view.lobby-shell,
  .puzzles-page:has(#puzzle-play:not(.hidden)),
  #screen-lobby .lobby-shell,
  #screen-lobby .lobby-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #screen-lobby.lobby--play .lobby-workspace,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-workspace {
    padding: 16px;
    gap: 16px;
  }

  #screen-game.active .game-body,
  #screen-game.active .game-workspace {
    overflow: visible;
    height: auto;
    max-height: none;
  }

  #screen-lobby.lobby--watch .lobby-workspace,
  #screen-lobby.lobby--watch .lobby-content {
    overflow: visible;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  #screen-lobby.lobby--watch .lobby-workspace {
    padding: 0;
    gap: 0;
  }

  #screen-lobby.lobby--watch .lobby-shell,
  #screen-lobby.lobby--watch .watch-page {
    flex: 1 1 auto;
    min-height: 100%;
    height: auto;
    max-height: none;
  }

  #screen-lobby.lobby--watch .watch-lobby__layout,
  #screen-lobby.lobby--watch .watch-lobby__main.lobby-card,
  #screen-lobby.lobby--watch .watch-table {
    flex: 0 0 auto;
    height: auto;
    min-height: auto;
    max-height: none;
  }

  #screen-lobby.lobby--watch .watch-lobby__main {
    overflow: visible;
  }

  #screen-lobby.lobby--watch .watch-table {
    overflow-x: auto;
    overflow-y: visible;
  }

  /* Nav/Mobile/320-644 — 45689:68175 Fixed 52px bar · Sliding drawer + Overlay */
  .mobile-top-bar {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    margin: 0;
    padding: 0;
    background: #050a0f;
    z-index: 40;
    box-sizing: border-box;
  }

  .mobile-top-bar .nav-item--brand {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 14px 12px;
    gap: 18px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .mobile-top-bar .nav-item__brand-mark {
    display: flex;
    flex: 0 0 auto;
    max-width: none;
    min-width: var(--nav-brand-mark-width);
    opacity: 1;
    overflow: visible;
    padding-right: 0;
  }

  .mobile-top-bar .nav-item__brand-mark img {
    display: block;
    width: var(--nav-brand-mark-width);
    height: 14.994px;
    object-fit: contain;
  }

  .mobile-top-bar .nav-item__icon,
  .mobile-top-bar .nav-item__icon--logo,
  .mobile-top-bar .nav-item__icon img {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Drawer always fixed — only transform/opacity animate */
  .side-nav,
  #screen-lobby .side-nav,
  html.nav-collapsed #screen-lobby .side-nav,
  html:not(.nav-collapsed) #screen-lobby .side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 202px;
    min-width: 202px;
    max-width: min(202.28px, calc(100% - 12px));
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    align-self: auto;
    padding: 0 20px 20px 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    border-right: none;
    border-bottom: none;
    background: #050a0f;
    transform: translateX(-100%);
    will-change: transform;
  }

  html:not(.nav-collapsed) #screen-lobby .side-nav {
    transform: translateX(0);
  }

  html.nav-collapsed #screen-lobby .side-nav .nav-item__label,
  html.nav-collapsed #screen-lobby .side-nav .nav-item__brand-mark {
    display: block;
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    opacity: 1;
    overflow: hidden;
    padding-right: 0;
  }

  html.nav-collapsed #screen-lobby .side-nav .nav-item {
    width: calc(100% - 2px);
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: var(--nav-icon-slot);
    justify-content: flex-start;
    gap: 18px;
    padding: var(--nav-tab-pad);
  }

  html.nav-collapsed #screen-lobby .side-nav .nav-item--brand {
    width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 14px 12px;
    gap: 18px;
  }

  html.nav-collapsed #screen-lobby .side-nav__items {
    align-items: stretch;
  }

  html.nav-collapsed #screen-lobby .side-nav__account {
    display: flex !important;
  }

  html.nav-motion-ready #screen-lobby .side-nav {
    transition: transform var(--nav-drawer-transition);
  }

  html.nav-motion-ready #screen-lobby .mobile-nav-overlay {
    transition:
      opacity var(--nav-drawer-transition),
      visibility var(--nav-drawer-transition);
  }

  html:not(.nav-collapsed) #screen-lobby .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    html.nav-motion-ready #screen-lobby .side-nav,
    html.nav-motion-ready #screen-lobby .mobile-nav-overlay {
      transition-duration: 0.01ms;
    }
  }

  /* Kill desktop rail inset — mobile bar sits flush to top (Figma Nav/Mobile) */
  #screen-lobby.lobby--home .side-nav,
  #screen-lobby.lobby--learn .side-nav,
  #screen-lobby.lobby--puzzles .side-nav,
  #screen-lobby.lobby--leaderboard .side-nav,
  #screen-lobby.lobby--play .side-nav,
  #screen-lobby.lobby--watch .side-nav,
  #screen-lobby.lobby--legal .side-nav {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .side-nav__items {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    justify-content: flex-start;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    padding: 0;
  }

  #screen-lobby .side-nav .nav-item--brand {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 14px 12px;
    gap: 18px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  #screen-lobby .side-nav .nav-item__brand-mark {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    opacity: 1;
    overflow: visible;
    padding-right: 0;
  }

  #screen-lobby .side-nav .nav-item:not(.nav-item--brand) {
    display: flex;
    width: calc(100% - 2px);
    max-width: none;
    margin-left: 2px;
    height: auto;
    min-height: var(--nav-icon-slot);
  }

  #screen-lobby .side-nav .nav-item__label {
    display: block;
    flex: 1 1 auto;
    max-width: none;
    opacity: 1;
    overflow: hidden;
  }

  .side-nav__account {
    display: flex;
    margin-top: auto;
    padding: 24px 0 0 2px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  #screen-lobby .side-nav__account {
    display: flex;
  }

  .side-nav__account-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }


  .nav-item {
    flex: 0 0 auto;
    width: 100%;
  }





  .watch-table {
    min-width: 0;
  }

  .watch-head,
  .watch-row {
    min-width: 520px;
    gap: 12px;
  }

  .watch-head__col,
  .watch-row__col {
    width: 90px;
  }

  #screen-game.active {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .game-body {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 20px;
    gap: 0;
  }

  .game-workspace {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  .side-nav--game,
  #screen-game .side-nav {
    display: none;
  }

  .game-main {
    border-right: none;
  }

  .game-stage {
    padding: 0;
    /* Column game layout: size+cqh collapses the board to a hairline */
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    container-type: inline-size;
    overflow: visible;
  }

  .board-wrap {
    width: min(100%, 100cqw);
    height: auto;
    aspect-ratio: 1;
    max-height: none;
  }

  .game-side {
    width: 100%;
    flex: 1 1 auto;
    max-height: none;
  }

  .game-panel {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: 55vh;
    align-self: stretch;
    border-top: 1px solid var(--border);
  }

  .game-ad-slot {
    margin-top: 12px;
    padding-top: 0;
  }
}

/* Mobile Nav/Mobile 320–644 — bar + flush chrome on every lobby route */
@media (max-width: 644px) {
  /* Viewport media matches JS isMobileNavBreakpoint (not container width).
     Keep document-scroll unlock here so phones always scroll even if
     container queries and viewport width disagree. */
  #screen-lobby.active,
  #screen-game.active {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  #screen-lobby.lobby--home .lobby-body,
  #screen-lobby.lobby--learn .lobby-body,
  #screen-lobby.lobby--puzzles .lobby-body,
  #screen-lobby.lobby--leaderboard .lobby-body,
  #screen-lobby.lobby--play .lobby-body,
  #screen-lobby.lobby--watch .lobby-body,
  #screen-lobby.lobby--legal .lobby-body,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-body,
  #screen-lobby.lobby--home .lobby-workspace,
  #screen-lobby.lobby--learn .lobby-workspace,
  #screen-lobby.lobby--puzzles .lobby-workspace,
  #screen-lobby.lobby--leaderboard .lobby-workspace,
  #screen-lobby.lobby--play .lobby-workspace,
  #screen-lobby.lobby--watch .lobby-workspace,
  #screen-lobby.lobby--legal .lobby-workspace,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-workspace,
  #screen-lobby.lobby--home .lobby-content,
  #screen-lobby.lobby--learn .lobby-content,
  #screen-lobby.lobby--puzzles .lobby-content,
  #screen-lobby.lobby--leaderboard .lobby-content,
  #screen-lobby.lobby--play .lobby-content,
  #screen-lobby.lobby--watch .lobby-content,
  #screen-lobby.lobby--legal .lobby-content,
  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) .lobby-content,
  #screen-game.active .game-body,
  #screen-game.active .game-workspace {
    overflow: visible;
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }

  #screen-lobby.lobby--puzzles:has(#puzzle-play:not(.hidden)) #puzzles-view.lobby-shell,
  .puzzles-page:has(#puzzle-play:not(.hidden)),
  #screen-lobby .lobby-shell,
  #screen-lobby .lobby-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Nav/Mobile/320-644 — bar + flush chrome on every lobby route */
  .mobile-top-bar {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    margin: 0;
    padding: 0;
    background: #050a0f;
    z-index: 40;
    box-sizing: border-box;
  }

  #screen-lobby.lobby--home .side-nav,
  #screen-lobby.lobby--learn .side-nav,
  #screen-lobby.lobby--puzzles .side-nav,
  #screen-lobby.lobby--leaderboard .side-nav,
  #screen-lobby.lobby--play .side-nav,
  #screen-lobby.lobby--watch .side-nav,
  #screen-lobby.lobby--legal .side-nav {
    padding: 0;
  }

  #screen-lobby .lobby-body,
  #screen-lobby.lobby--home .lobby-body,
  #screen-lobby.lobby--learn .lobby-body,
  #screen-lobby.lobby--puzzles .lobby-body,
  #screen-lobby.lobby--leaderboard .lobby-body,
  #screen-lobby.lobby--play .lobby-body,
  #screen-lobby.lobby--watch .lobby-body,
  #screen-lobby.lobby--legal .lobby-body {
    gap: 0;
    padding: 0;
  }

  #screen-lobby .lobby-workspace,
  #screen-lobby.lobby--home .lobby-workspace,
  #screen-lobby.lobby--learn .lobby-workspace,
  #screen-lobby.lobby--puzzles .lobby-workspace,
  #screen-lobby.lobby--leaderboard .lobby-workspace,
  #screen-lobby.lobby--watch .lobby-workspace,
  #screen-lobby.lobby--legal .lobby-workspace {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #screen-lobby.lobby--play .lobby-workspace {
    padding-top: 0;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 16px;
  }

  #screen-lobby.lobby--home .lobby-content,
  #screen-lobby.lobby--learn .lobby-content,
  #screen-lobby.lobby--puzzles .lobby-content,
  #screen-lobby.lobby--leaderboard .lobby-content,
  #screen-lobby.lobby--watch .lobby-content,
  #screen-lobby.lobby--play .lobby-content {
    padding-top: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  #screen-lobby.lobby--legal .lobby-content {
    padding: 0;
  }

  #screen-lobby .side-nav .nav-item--brand,
  .mobile-top-bar .nav-item--brand {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 14px 12px;
    margin: 0;
    gap: 18px;
    box-sizing: border-box;
    align-items: center;
  }

  #screen-lobby .side-nav .nav-item--brand .nav-item__icon,
  #screen-lobby .side-nav .nav-item--brand .nav-item__icon img,
  .mobile-top-bar .nav-item__icon,
  .mobile-top-bar .nav-item__icon img {
    width: 24px;
    height: 24px;
  }
}

@container root (max-width: 600px) {
  /* Legacy narrow play/charts layout — do not hide side-nav labels
     (mobile menu ≤644 is a labeled dropdown per Nav/Mobile 45689:68175). */

  .watch-table {
    min-width: 0;
  }
}

.contact-form {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.contact-form__field {
  width: 100%;
  min-width: 0;
}

.contact-form__row .contact-form__field {
  flex: 1 1 0;
}

.contact-form__field label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--type-body-3-font);
  font-size: var(--type-body-3-size);
  font-weight: var(--type-body-3-weight);
  line-height: var(--type-body-3-lh);
  letter-spacing: var(--type-body-3-tracking);
  color: rgba(255, 255, 255, 0.8);
}

.contact-form__required {
  color: #ff5757;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 15px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--type-body-2-font);
  font-size: var(--type-body-2-size);
  font-weight: var(--type-body-2-weight);
  line-height: var(--type-body-2-lh);
}

.contact-form__field textarea {
  min-height: 120px;
  height: 120px;
  resize: vertical;
  padding: 12px 15px;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-form__field select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='rgba(255,255,255,0.5)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: rgba(255, 255, 255, 0.9);
}

.contact-form__field select:invalid {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: 2px solid rgba(0, 137, 255, 0.45);
  outline-offset: 0;
}

.contact-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  margin: 0;
  font-size: var(--type-body-2-size);
  line-height: 1.5;
}

.contact-form__status--success {
  color: #6ee7a0;
}

.contact-form__status--error {
  color: #f87171;
}

.contact-form__turnstile {
  min-height: 65px;
}

.contact-form__turnstile:not([hidden]) {
  display: flex;
  justify-content: flex-start;
}

.contact-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 9999px;
  background:
    linear-gradient(90deg, rgba(0, 110, 245, 0.8), rgba(0, 110, 245, 0.8)),
    rgba(255, 255, 255, 0.09);
  color: #fff;
  font-family: var(--type-button-lg-font);
  font-size: var(--type-button-lg-size);
  font-weight: var(--type-button-lg-weight);
  line-height: var(--type-button-lg-lh);
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.12),
    inset 0 7px 26.5px rgba(255, 255, 255, 0.12);
  transition: filter 0.15s ease;
}

.contact-form__submit:hover {
  filter: brightness(1.08);
}

.contact-form__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: none;
}

.contact-form__consent {
  margin: 0;
  width: 100%;
  max-width: 560px;
  align-self: center;
  text-align: center;
  font-family: var(--type-body-3-font);
  font-size: var(--type-body-3-size);
  font-weight: var(--type-body-3-weight);
  line-height: var(--type-body-3-lh);
  letter-spacing: var(--type-body-3-tracking);
  color: rgba(255, 255, 255, 0.6);
}

.contact-form__consent a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__consent a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Shared shell — Contact + Privacy + Terms + Account (Desktop 645+ · Mobile 320–644) */
.site-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  min-height: 100%;
  padding: 20px 48px 0;
  box-sizing: border-box;
  gap: 36px;
}

.privacy-page .legal-doc,
.terms-page .legal-doc,
.account-page .account-settings {
  width: 100%;
  max-width: 760px;
}

.legal-doc {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  font-family: var(--type-body-2-font);
  font-size: var(--type-body-2-size);
  font-weight: var(--type-body-2-weight);
  line-height: var(--type-body-2-lh);
  color: rgba(255, 255, 255, 0.8);
}

.legal-doc__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.legal-doc__title {
  margin: 0;
  width: 100%;
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  color: #fff;
  text-transform: capitalize;
}

.legal-doc__lede {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
  color: rgba(255, 255, 255, 0.8);
}

.legal-doc__lede p,
.legal-doc__updated {
  margin: 0;
}

.legal-doc__updated {
  font: inherit;
  color: inherit;
}

.legal-doc__subhead {
  margin: 0;
  font-family: var(--type-h4-font);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
  color: #fff;
}

.legal-doc > p {
  margin: 0;
}

.legal-doc a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc a:hover {
  color: #fff;
}

.legal-doc__summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 17px 21px 19px; /* Desktop 45667:66588; mobile ≤644 overrides */
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.legal-doc__summary h2 {
  margin: 0;
  font-family: var(--type-h4-font);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
  color: #fff;
}

.legal-doc__summary-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-doc__summary p {
  margin: 0;
}

.legal-doc__summary ul {
  margin: 0;
  padding-left: 22.5px;
  list-style: disc;
}

.legal-doc__summary li {
  margin-bottom: 4px;
}

.legal-doc__summary li:last-child {
  margin-bottom: 0;
}

.legal-doc__toc {
  margin: 0;
  padding-top: 24px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.legal-doc__toc h2 {
  margin: 0;
  font-size: var(--type-h5-size);
  font-weight: 700;
  line-height: 27px;
  color: #fff;
}

.legal-doc__toc ol {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: legal-toc;
}

.legal-doc__toc li {
  margin-bottom: 4px;
  counter-increment: legal-toc;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.legal-doc__toc li::before {
  content: counter(legal-toc) ".";
  flex-shrink: 0;
  color: var(--accent);
  font-size: var(--type-body-2-size);
  line-height: 1.6;
}

.legal-doc__toc li:last-child {
  margin-bottom: 0;
}

.legal-doc__toc a {
  color: var(--accent);
  font-size: var(--type-body-2-size);
  line-height: 1.6;
  text-decoration: none;
}

.legal-doc__toc a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.legal-doc > h2 {
  margin: 0;
  font-family: var(--type-h4-font);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
  color: #fff;
}

/* Article gap 36px; pull following body up to 8px under each h2 */
.legal-doc > h2 + p,
.legal-doc > h2 + ul {
  margin-top: -28px;
}

.legal-doc > p + ul,
.legal-doc > p + p,
.legal-doc > ul + p,
.legal-doc > ul + ul {
  margin-top: -28px;
}

.legal-doc > h3 {
  margin: 0;
  font-family: var(--type-h4-font);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
  color: #fff;
}

.legal-doc > h3 + p,
.legal-doc > h3 + ul {
  margin-top: -28px;
}

.legal-doc ul {
  margin: 0;
  padding-left: 22.5px;
  list-style: disc;
}

.legal-doc li {
  margin-bottom: 4px;
}

.legal-doc li:last-child {
  margin-bottom: 0;
}

.legal-doc li strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.site-page__footer {
  width: 100%;
  margin-top: 0;
  padding: 0 0 20px;
  border-top: none;
  text-align: center;
  box-sizing: border-box;
}

.site-page__footer-links {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 18.85px;
  color: rgba(255, 255, 255, 0.5);
}

.site-page__footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.site-page__footer-links a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.site-page__footer-current {
  color: rgba(255, 255, 255, 0.5);
}

.site-page__footer-copy {
  color: rgba(255, 255, 255, 0.5);
}

/* Account page — Figma Account/Desktop/645-1440 + Account/Mobile/320-644 */
.account-settings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
}

.account-settings__title {
  text-transform: none;
}

.account-settings__lede {
  margin: 0;
  width: 100%;
  font-family: var(--type-body-1-font);
  font-size: var(--type-body-1-size);
  font-weight: var(--type-body-1-weight);
  line-height: var(--type-body-1-lh);
  color: rgba(255, 255, 255, 0.8);
}

/* Statistics — Figma Account/Desktop/645-1440 (46351:129674) */
.account-settings__statistics {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  padding: 18px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-sizing: border-box;
}

.account-settings__stats-title {
  margin: 0;
  width: 100%;
  font-family: var(--type-h4-font);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
  color: #fff;
}

.account-settings__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(67px, 1fr));
  grid-template-areas:
    "rank games"
    "record puzzles";
  gap: 6px;
  width: 100%;
  height: 140px;
}

.account-settings__stats .u-card-stats[data-stat="rank"] { grid-area: rank; }
.account-settings__stats .u-card-stats[data-stat="record"] { grid-area: record; }
.account-settings__stats .u-card-stats[data-stat="games"] { grid-area: games; }
.account-settings__stats .u-card-stats[data-stat="puzzles"] { grid-area: puzzles; }

.account-settings__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.account-settings__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.account-settings__row--last {
  border-bottom: none;
}

.account-settings__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--type-h5-font, var(--type-h1-font));
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  text-transform: capitalize;
}

.account-settings__value {
  flex: 0 1 auto;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--type-body-2-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  text-align: right;
}

.account-settings__value--mask {
  letter-spacing: 0.04em;
}

.account-settings__edit {
  flex: 0 0 auto;
  border: none;
  padding: 0;
  background: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #0089ff;
  cursor: pointer;
  text-transform: capitalize;
}

.account-settings__edit:hover {
  color: #33a1ff;
}

.account-settings__display {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.account-settings__edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.account-settings__edit-form.hidden {
  display: none;
}

.account-settings__edit-label {
  font-family: var(--type-body-2-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.account-settings__edit-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  box-sizing: border-box;
}

.account-settings__edit-input:focus {
  outline: none;
  border-color: rgba(0, 137, 255, 0.7);
}

.account-settings__edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.account-settings__edit-save {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: #0057c2;
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.12),
    inset 0 7px 26.5px rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.account-settings__edit-cancel {
  height: 34px;
  padding: 0 12px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.account-settings__pending {
  margin: 0;
  width: 100%;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.account-settings__pending.hidden {
  display: none;
}

.account-settings__danger {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 18px 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-sizing: border-box;
}

.account-settings__danger-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.account-settings__danger-title {
  margin: 0;
  font-family: var(--type-h1-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.account-settings__danger-lede {
  margin: 0;
  font-family: var(--type-body-2-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.account-settings__danger-btn {
  flex: 0 0 auto;
}

.account-settings__status {
  margin: 0;
  width: 100%;
  font-size: 14px;
  line-height: 1.45;
  color: #e05c5c;
}

.account-settings__status.hidden {
  display: none;
}

.account-settings__status--success {
  color: #5ccc8a;
}

@container root (max-width: 1023px) and (min-width: 645px) {
  .site-page {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Contact + Privacy + Terms — Figma Mobile 320–644 shared shell */
@container root (max-width: 644px) {
  .site-page {
    padding: 16px 14px 0;
    gap: 0;
    align-items: stretch;
  }

  .privacy-page .legal-doc,
  .terms-page .legal-doc,
  .contact-page .contact-card,
  .account-page .account-settings {
    max-width: none;
    width: 100%;
    gap: 24px;
    align-items: stretch;
  }

  /* Account/Mobile/320-644 — keep 36px section rhythm from Figma */
  .account-page .account-settings {
    gap: 36px;
    padding-bottom: 36px;
  }

  .account-page .account-settings__title {
    font-size: 28px;
    line-height: 1.2;
    text-transform: none;
  }

  .account-settings__lede {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Statistics — Figma Account/Mobile/320-644 (46351:129709) */
  .account-settings__statistics {
    padding: 18px 24px 24px;
  }

  .account-settings__stats-title {
    font-size: 17px;
    line-height: 1.45;
    text-transform: capitalize;
  }

  .account-settings__stats {
    display: flex;
    flex-direction: column;
    grid-template-areas: none;
    gap: 6px;
    height: auto;
    min-height: 0;
  }

  .account-settings__stats .u-card-stats {
    grid-area: auto;
    width: 100%;
  }

  .account-settings__display {
    gap: 16px;
  }

  .account-settings__row {
    gap: 10px;
    padding: 16px 24px;
  }

  .account-settings__label {
    font-size: 15px;
    line-height: 1.6;
  }

  .account-settings__value {
    max-width: 46%;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.025em;
  }

  .account-settings__edit {
    font-size: 14px;
    line-height: 1.45;
  }

  .account-settings__danger {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 18px 24px 20px;
  }

  .account-settings__danger-title {
    font-size: 17px;
    line-height: 1.45;
    text-transform: capitalize;
  }

  .account-settings__danger-lede {
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: 0.0313px;
  }

  .account-settings__danger-btn {
    width: auto;
  }

  .account-settings__sign-out.u-btn-secondary-white-icon {
    width: 100%;
  }

  .legal-doc__title {
    text-transform: none;
  }

  .legal-doc__head {
    align-items: flex-start;
    text-align: left;
    max-width: none;
  }

  .legal-doc__lede {
    max-width: none;
  }

  .legal-doc > h2,
  .legal-doc__summary h2 {
    text-transform: capitalize;
  }

  /* Article gap 24px; H4→body 5px; body blocks 16px (Figma H4-Body2) */
  .legal-doc > h2 + p,
  .legal-doc > h2 + ul,
  .legal-doc > h3 + p,
  .legal-doc > h3 + ul {
    margin-top: -19px;
  }

  .legal-doc > p + ul,
  .legal-doc > p + p,
  .legal-doc > ul + p,
  .legal-doc > ul + ul {
    margin-top: -8px;
  }

  .legal-doc__summary {
    gap: 5px;
    padding: 14px 19px 17px; /* Figma 45667:66547 */
  }

  .legal-doc__summary-body {
    gap: 16px;
  }

  .legal-doc ul,
  .legal-doc__summary ul {
    padding-left: 21px;
  }

  .legal-doc li,
  .legal-doc__summary li {
    margin-bottom: 12px;
  }

  .site-page__footer {
    padding: 36px 0 20px;
  }

  .contact-form__row {
    flex-direction: column;
    gap: 16px;
  }

  .contact-form__consent {
    text-align: left;
    align-self: stretch;
    max-width: none;
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 36px;
  width: 100%;
  max-width: 600px;
  padding: 0;
  box-sizing: border-box;
}

.contact-card__intro {
  margin: 0;
}

.contact-card__priority {
  font-weight: 600;
  color: #7dd3fc;
}

/* Desktop 645+ — centered contact column; name | email row */
@container root (min-width: 645px) {
  .contact-card {
    align-items: center;
  }

  .contact-card .legal-doc__head {
    align-items: center;
    text-align: center;
  }

  .contact-form__row {
    flex-direction: row;
    gap: 12px;
  }
}

.account-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 518px;
  padding: 48px;
  background: #1c2025;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.16),
    0 1px 9px 6px rgba(0, 0, 0, 0.08);
  font-family: var(--font);
}

.account-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.account-modal__close svg {
  width: 20px;
  height: 20px;
}

.account-modal__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 422px;
}

.account-modal__panel.hidden {
  display: none;
}

.account-modal__title {
  margin: 0;
  width: 100%;
  font-family: var(--type-h2-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  text-align: center;
  color: #fff;
}

.account-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-modal__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.account-modal__label {
  font-size: var(--type-overline-2-size);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}

.account-modal__required {
  color: #ff5757;
}

.account-modal__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 15px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
}

.account-modal__input-wrap:focus-within {
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: 0;
}

.account-modal__field input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: var(--type-body-2-size);
  line-height: 1.6;
}

.account-modal__field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.account-modal__field input:focus {
  outline: none;
}

.account-modal__password-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.85;
}

.account-modal__password-toggle:hover {
  opacity: 1;
}

.account-modal__password-toggle img {
  display: block;
  width: 20px;
  height: 20px;
}

.account-modal__status {
  margin: 0;
  font-size: var(--type-body-3-size);
  line-height: 1.45;
  text-align: center;
  color: var(--danger);
}

.account-modal__status.contact-form__status--success,
.account-modal__status--success {
  color: var(--success);
}

.account-modal__form .u-btn-primary {
  width: 100%;
}

.account-modal__switch {
  margin: 0;
  font-size: var(--type-button-lg-size);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.account-modal__switch-link {
  border: none;
  padding: 0;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.account-modal__switch-link:hover {
  color: rgba(255, 255, 255, 0.92);
}

.account-modal__hint {
  margin: 0 0 4px;
  font-size: var(--type-body-2-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.account-modal__resend {
  border: none;
  padding: 0;
  margin: 4px 0 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: var(--type-body-3-size);
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.account-modal__resend:hover {
  color: #fff;
}

.account-modal__resend:disabled,
.account-modal__resend--cooldown {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  cursor: not-allowed;
}

.account-modal__resend:disabled:hover,
.account-modal__resend--cooldown:hover {
  color: rgba(255, 255, 255, 0.42);
}

.account-modal__resend--danger {
  color: rgba(224, 92, 92, 0.92);
  margin-top: 16px;
}

.account-modal__resend--danger:hover {
  color: var(--danger);
}

.account-modal__legal {
  margin: 0;
  max-width: 422px;
  font-size: var(--type-body-3-size);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.account-modal__legal a {
  color: inherit;
  text-decoration: underline;
}

.account-modal__legal a:hover {
  color: #fff;
}

.account-status {
  width: 100%;
  max-width: 422px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 110, 245, 0.12);
  border: 1px solid rgba(0, 110, 245, 0.28);
  font-size: var(--type-body-3-size);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.supporter-badge {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  color: #1a1208;
  background: linear-gradient(135deg, #e8c56a, #c9a227);
}

@container root (max-width: 560px) {
  .account-modal {
    max-width: calc(100vw - 32px);
    padding: 32px 24px;
    gap: 32px;
    border-radius: 16px;
  }

  .account-modal__panel {
    gap: 32px;
  }

  .account-modal__title {
    font-size: var(--type-h3-size);
  }
}