:root {
  --board-w: min(92vw, 398px);
  --cw: calc(var(--board-w) * 0.18);
  --ch: calc(var(--cw) * 1.4);
  --cr: calc(var(--cw) * 0.15);
  --gap: calc((100% - 5 * var(--cw)) / 6);
  --x-step: calc((100% - 2 * var(--gap) - var(--cw)) / 4);
  --def-off: calc(var(--ch) * 0.4);
  --slot-h: calc(var(--ch) + var(--def-off));
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ff-ui: Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-user: calc(var(--cw) * 0.16);
  --fs-sm:   calc(var(--cw) * 0.22);
  --fs-menu: calc(var(--cw) * 0.23);
  --fs-card: calc(var(--cw) * 0.26);
  --s-1: calc(var(--gap) * 0.5);
  --s-3: var(--gap);
  /* vw-based equivalent of --s-3 for sticky/scroll contexts where 100% ≠ screen width */
  --screen-edge: calc((min(100vw, 440px) - 5 * var(--cw)) / 6);
  --menu-row-h: var(--cw);
  --menu-gap: 16px;
  --menu-radius: var(--cr);
  --mode-inset: 5px;
  --mode-segment-gap: 8px;
  --mode-inner-h: calc(var(--menu-row-h) - (2 * var(--mode-inset)));
  --mode-inner-r: calc(var(--cr) * (var(--mode-inner-h) / var(--menu-row-h)));
  --profile-nav-size: calc(var(--menu-row-h) * 0.72);
  --top-nav-line-h: calc(var(--fs-user) * 1.2);
  /* ── palette: two-tone (light / dark) ──────────────────────────
     Surfaces use a small dark-elevation scale (Material 2 dp00/01/06);
     text is always #fff. No mid-grey for labels — hierarchy is built
     from weight, layout and opacity ramps, never a mid-tone colour.   */
  --c-bg:        #121212;   /* dp00 — app background          */
  --c-surface:   #1E1E1E;   /* dp01 — panels, buttons, inputs */
  --c-hi:        #2C2C2C;   /* dp06 — active / pressed / disabled */
  --c-muted:     #FFFFFF;   /* all "label" text is white       */
  --c-card:      #fff;      /* card face + white buttons      */
  --c-card-text: #111;      /* text on white                  */
  --c-red:       #c11;      /* red suit + errors              */
  --c-green:     #4caf50;   /* success, ready                 */

  /* ── selection / focus / border tokens ────────────────────────
     Selection uses crisp white; keyboard focus keeps a subtle blue
     ring so it's visually distinct from selection per WCAG 2.4.7. */
  --c-accent:        #FFFFFF;                   /* selection ring */
  --c-focus:         #9FD3FF;                   /* keyboard focus */
  --c-border-strong: rgba(255, 255, 255, 0.35); /* empty slot outlines */

  /* ── stroke + shadow ──────────────────────────────────────── */
  --stroke-2: 2px;
  --shadow-1: 0 0 5px var(--c-card-shadow);

  /* ── z-index ladder ────────────────────────────────────────── */
  --z-pop:    30;
  --z-scrim:  40;
  --z-sheet:  50;
  --z-modal:  60;
  --z-toast:  70;

  /* ── aliases used throughout the CSS ───────────────────────── */
  --menu-bg:               var(--c-bg);
  --menu-surface:          var(--c-surface);
  --menu-surface-hi:       var(--c-hi);
  --menu-surface-disabled: var(--c-hi);
  --menu-label:            var(--c-muted);
  --menu-label-disabled:   var(--c-muted);
  --c-avatar-bg:           var(--c-surface);
  --c-card-back-text:      var(--c-card-text);
  --c-error:               var(--c-red);
  --c-success:             var(--c-green);

  /* ── non-colour tokens ──────────────────────────────────────── */
  --menu-stroke:        rgba(255, 255, 255, 0.12);
  --menu-stroke-active: rgba(255, 255, 255, 0.55);
  --menu-font:  Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --c-overlay:      rgba(0, 0, 0, 0.8);
  --c-dim:          rgba(0, 0, 0, 0.35);
  --c-card-shadow:  rgba(0, 0, 0, 0.45);
}

@media (max-width: 500px) {
  :root { --board-w: 100vw; }
}

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

html, body {
  width: 100%;
  height: 100%;
}

* {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  /* Kills the default iOS/Android grey flash on tap. Focus/active states
     are styled explicitly where needed (.menu-btn, cards, etc.). */
  -webkit-tap-highlight-color: transparent;
  /* `touch-action` is NOT inherited, so it must be set on every element
     that can receive a touch (SVG, <img>, avatar wrappers, etc.), not
     just <body>. `manipulation` allows pan + pinch-zoom but disables
     the 300ms double-tap-to-zoom gesture. iOS Safari ignores
     `user-scalable=no` in the viewport meta since iOS 10 for a11y,
     so this CSS rule is what actually suppresses accidental zoom. */
  touch-action: manipulation;
}

body {
  background: var(--menu-bg);
  color: #fff;
  font-family: var(--ff-ui);
  font-size: var(--fs-card);
  font-weight: 500;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

#game-screen {
  background: var(--menu-bg);
  width: 100%;
  max-width: 440px;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  padding: 0;
}

#top-section {
  display: grid;
  grid-template-rows: var(--top-nav-line-h) auto;
  width: 100%;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--s-3));
}

.top-nav-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--top-nav-line-h);
  padding: 0;
}

#top-section > .top-nav-row {
  padding: 0 var(--s-3);
}

#opponents-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 100%;
  height: calc(var(--cw) + var(--ch) + var(--fs-user) + var(--ch) * 0.16);
}

.opp-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ch) * 0.05);
  width: var(--cw);
  flex-shrink: 0;
}

.opp-seat.seat-empty .avatar {
  background: var(--menu-bg);
  box-shadow: inset 0 0 0 var(--stroke-2) var(--c-border-strong);
}

.avatar {
  position: relative;
  width: var(--cw);
  height: var(--cw);
  border-radius: var(--cr);
  background: var(--c-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.seat-avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--c-card);
  color: var(--c-card-text);
  font-family: var(--menu-font);
  font-size: var(--fs-user);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: calc(var(--cw) * 0.05) 0;
  border-radius: calc(var(--cr) * 2);
}

.avatar-status:empty {
  display: none;
}

.opp-name {
  font-size: var(--fs-user);
  font-weight: 500;
  max-width: var(--cw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

#mid-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

#table-zone {
  position: relative;
  width: 100%;
  height: calc(2 * var(--slot-h) + var(--ch) * 0.18);
}

.talon-col,
.pile-col {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Match .opp-seat gap so zone-count sits the same distance below the stack
   * as .opp-name sits below an opponent's avatar/card. */
  gap: calc(var(--ch) * 0.05);
}

.talon-col {
  left: var(--gap);
  top: calc(50% - var(--ch) / 2 - var(--def-off));
}
.pile-col {
  left: calc(var(--gap) + 4 * var(--x-step));
  top: calc(50% - var(--ch) / 2);
}

.talon-stack {
  position: relative;
  width: var(--cw);
  height: var(--slot-h);
  flex-shrink: 0;
}

#trump-label {
  position: absolute;
  /* Align on the vertical center of the face-down talon-back card
   * (which sits at top:--def-off and is --ch tall). */
  top: calc(var(--def-off) + var(--ch) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cw) * 0.96);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  /* Painted unconditionally; .trump-card (z:0) and .talon-back (z:4)
   * cover it while the talon has cards. Equal z-indexes tie-break by DOM
   * order (renderTalon appends the label first, then the cards), so the
   * cards paint on top. Empty talon → glyph is the only thing left. */
  z-index: 0;
}

.pair-slot {
  position: relative;
  width: var(--cw);
  height: var(--slot-h);
}

.pair-slot .card,
.talon-stack .card {
  position: absolute;
  left: 0;
}

.table-slot { position: absolute; }

.t2 { top: 0; left: calc(var(--gap) + var(--x-step)); }
.t3 { top: 0; left: calc(var(--gap) + 2 * var(--x-step)); }
.t4 { top: 0; left: calc(var(--gap) + 3 * var(--x-step)); }
.b2 { top: calc(var(--slot-h) + var(--ch) * 0.08); left: calc(var(--gap) + var(--x-step)); }
.b3 { top: calc(var(--slot-h) + var(--ch) * 0.08); left: calc(var(--gap) + 2 * var(--x-step)); }
.b4 { top: calc(var(--slot-h) + var(--ch) * 0.08); left: calc(var(--gap) + 3 * var(--x-step)); }

.atk-card,
.trump-card {
  top: 0;
  z-index: 0;
}

.def-card {
  top: var(--def-off);
  z-index: 1;
}

.talon-back {
  top: var(--def-off);
  z-index: 4;
}

/* ── card ──────────────────────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: var(--cw);
  height: var(--ch);
  background: var(--c-card);
  border-radius: var(--cr);
  border: none;
  padding: calc(var(--cw) * 0.06) calc(var(--cw) * 0.07);
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--c-card-text);
  box-shadow: var(--shadow-1);
}

.card.red { color: var(--c-red); }

.card-tl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.9;
}

.rank { font-size: var(--fs-card); }
.suit { font-size: var(--fs-card); }

.card.card-back {
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Card stacking tiers. Flying ghosts live at z:2 (revealed) / z:3 (hidden)
 * and slide beneath everything at z:4, so face swaps between zones are
 * simply hidden under the destination stack instead of animated. */
.card.card-back,
#player-hand .card {
  z-index: 4;
}

/* Every card renders its visuals via an inlined <svg><use href="#<token>"></svg>
   that fills the card box. Card tokens and the "back" symbol live in the
   inlined #deck-sprite (see play.js). */
.card > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Zone-count labels live below the container they count (opponent hand,
 * talon, pile) — same typography as .opp-name so every label on the table
 * reads as "whose/what is this pile" rather than as part of a card. */
.zone-count {
  font-size: var(--fs-user);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: #fff;
  line-height: 1;
  min-height: 1em;
}

.zone-count:empty {
  visibility: hidden;
}

.card.playable { cursor: pointer; }

.card.dimmed::after,
#pass-btn.dimmed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-dim);
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}

/* ── bottom controls ───────────────────────────────────────────────────────── */

#bottom-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--ch) * 0.08);
  padding-bottom: var(--gap);
}

#player-hand {
  position: relative;
  width: 100%;
  height: var(--ch);
}

#player-hand .card {
  position: absolute;
  top: 0;
}

#controls-row {
  position: relative;
  width: 100%;
  height: calc(var(--cw) + var(--fs-user) * 1.5);
}

#pass-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: calc(100% - (4 * var(--gap)) - (2 * var(--cw)));
  height: var(--cw);
  background: var(--c-card);
  border: none;
  border-radius: var(--cr);
  color: var(--c-card-text);
  font-size: var(--fs-card);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ff-ui);
  z-index: 1;
}

#exit-game-btn {
  position: absolute;
  right: var(--gap);
  top: 0;
  width: var(--cw);
  height: var(--cw);
  background: var(--c-card);
  border: none;
  color: transparent;
  font-size: var(--fs-card);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ff-ui);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cr);
}

.my-seat {
  position: absolute;
  left: var(--gap);
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ch) * 0.05);
  width: var(--cw);
}

.my-name {
  font-size: var(--fs-user);
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── start screen ──────────────────────────────────────────────────────────── */

#start-screen {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--menu-bg);
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: var(--z-sheet);
}

#onboarding-screen {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--menu-bg);
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: var(--z-toast);
}

#profile-screen {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--menu-bg);
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: var(--z-sheet);
}

#identity-screen {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--menu-bg);
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: calc(var(--z-sheet) + 1);
}

#settings-screen {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--menu-bg);
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: var(--z-sheet);
}

/* Menu-screen text baseline: sans 16px, no extra tracking. Individual
   components override weight / size to build hierarchy. */
#start-screen, #onboarding-screen, #profile-screen, #identity-screen, #settings-screen,
#start-screen button, #onboarding-screen button, #profile-screen button, #identity-screen button, #settings-screen button,
#start-screen span, #onboarding-screen span, #profile-screen span, #identity-screen span, #settings-screen span,
#start-screen div, #onboarding-screen div, #profile-screen div, #identity-screen div, #settings-screen div,
#onboarding-screen input {
  font-family: var(--menu-font);
  font-size: var(--fs-menu);
  letter-spacing: 0;
}

#start-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  position: relative;
  width: 100%;
  height: 100%;
  padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  gap: 0;
}

.start-nav-row {
  justify-content: flex-end;
  margin-bottom: var(--s-3);
}

/* Profile / settings screens: mirror the main-menu top-nav-row spacing
   so the avatar below sits at the same Y as #menu-avatar. */
#profile-panel > .top-nav-row,
#settings-panel > .top-nav-row {
  margin-bottom: var(--s-3);
}

#onboarding-panel {
  width: 100%;
  height: 100%;
  padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
}

.onboarding-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--menu-gap);
}

.onboarding-title {
  text-align: center;
  color: #fff;
  font-size: var(--fs-card);
  font-weight: 700;
}

.onboarding-input {
  display: block;
  width: 100%;
  height: var(--menu-row-h);
  font-size: max(16px, var(--fs-menu));
  font-weight: 500;
  border-radius: var(--menu-radius);
  border: none;
  outline: none;
  background: var(--menu-surface);
  color: #fff;
  padding: 0 calc(var(--menu-gap) * 0.9);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  user-select: text;
  -webkit-user-select: text;
}

.onboarding-input::placeholder {
  color: var(--menu-label);
  font-weight: 400;
}

.onboarding-hint {
  color: var(--menu-label);
  min-height: 1.2em;
  text-align: center;
  font-weight: 400;
}

.onboarding-hint.invalid {
  color: var(--c-error);
}

.onboarding-row {
  display: block;
  width: 100%;
  margin-inline: auto;
}

.onboarding-avatar-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--cw);
}

.onboarding-preview-stage {
  position: relative;
  width: var(--cw);
  height: var(--cw);
  border-radius: var(--cr);
  overflow: hidden;
  background: var(--c-avatar-bg);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
}

.onboarding-randomize-icon-btn {
  width: calc(var(--menu-row-h) * 0.82);
  height: calc(var(--menu-row-h) * 0.82);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--cr);
  background: var(--menu-surface);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  cursor: pointer;
}

.onboarding-avatar-row .onboarding-randomize-icon-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.dice-icon {
  width: 54%;
  height: 54%;
}

.onboarding-continue-btn:disabled {
  opacity: 1;
  background: var(--menu-surface-disabled);
  color: var(--menu-label-disabled);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  background-image: none !important;
  -webkit-text-fill-color: currentColor;
}

#profile-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
}

#identity-panel {
  width: 100%;
  height: 100%;
  padding: 0 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent;
}
#identity-panel::-webkit-scrollbar { width: 4px; }
#identity-panel::-webkit-scrollbar-track { background: transparent; }
#identity-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 2px; }

.menu-head {
  display: flex;
  align-items: center;
}

.top-nav-text-btn {
  border: none;
  background: transparent;
  color: var(--menu-label);
  padding: 0;
  font-family: var(--ff-ui);
  font-size: var(--fs-user);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* blanket screen rules set --fs-menu on all buttons; restore nav buttons */
#start-screen .top-nav-text-btn,
#onboarding-screen .top-nav-text-btn,
#profile-screen .top-nav-text-btn,
#identity-screen .top-nav-text-btn,
#settings-screen .top-nav-text-btn,
#game-screen .top-nav-text-btn {
  font-size: var(--fs-user);
}

.menu-head-main {
  display: grid;
  grid-template-columns: var(--profile-nav-size) 1fr var(--profile-nav-size);
  align-items: center;
  justify-items: center;
}


.menu-identity {
  display: inline-flex;
  align-items: center;
}

.menu-head-spacer {
  width: var(--profile-nav-size);
  height: var(--profile-nav-size);
}

.profile-head {
  display: grid;
  grid-template-columns: var(--profile-nav-size) 1fr var(--profile-nav-size);
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-height: var(--cw);
}

.menu-avatar {
  position: relative;
  width: var(--cw);
  height: var(--cw);
  border-radius: var(--cr);
  background: var(--menu-surface);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  justify-self: start;
  overflow: hidden;
}

.menu-avatar-btn {
  cursor: pointer;
}

.menu-username {
  margin-left: var(--menu-gap);
  text-align: left;
  color: #fff;
  font-weight: 500;
}

.profile-back-btn {
  margin-left: 0;
  cursor: pointer;
}

.profile-identity {
  display: inline-flex;
  align-items: center;
  grid-column: 2;
}

.profile-head-spacer {
  width: var(--profile-nav-size);
  height: var(--profile-nav-size);
  grid-column: 3;
  justify-self: end;
  visibility: hidden;
}

.profile-stats {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  margin-top: calc(var(--menu-gap) * 1.5);
  align-self: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

.profile-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--menu-gap) * 0.6) calc(var(--menu-gap) * 0.9);
  background: var(--menu-surface);
  border-radius: var(--menu-radius);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  color: #fff;
}

.profile-stat-label {
  color: var(--menu-label);
  font-weight: 600;
  text-transform: lowercase;
}

.profile-stat-value {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile-history {
  display: flex;
  flex-direction: column;
  gap: calc(var(--menu-gap) * 0.55);
  min-height: 0;
  flex: 1 1 auto;
}

.profile-history-list {
  list-style: none;
  margin: 0;
  padding: calc(var(--menu-gap) * 0.5) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--menu-gap) * 0.35);
  background: var(--menu-surface);
  border-radius: var(--menu-radius);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  min-height: 0;
  flex: 1 1 auto;
}

.profile-history-list::-webkit-scrollbar { width: 4px; }
.profile-history-list::-webkit-scrollbar-track { background: transparent; }
.profile-history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }

.profile-history-item {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.profile-history-link {
  display: grid;
  grid-template-columns: max-content 1.8em minmax(0, 1fr);
  align-items: baseline;
  gap: calc(var(--menu-gap) * 0.45);
  padding: calc(var(--menu-gap) * 0.35) calc(var(--menu-gap) * 0.9);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border-radius: calc(var(--cr) * 0.7);
}

.profile-history-time {
  color: var(--menu-label);
  font-weight: 500;
}

.profile-history-outcome {
  font-weight: 800;
  text-align: center;
}

.profile-history-outcome-win { color: var(--c-success); }
.profile-history-outcome-lose { color: var(--c-error); }
.profile-history-outcome-draw,
.profile-history-outcome-unknown { color: var(--menu-label); }

.profile-history-players {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-history-link:hover,
.profile-history-link:focus-visible {
  background: var(--menu-surface-hi);
  outline: none;
}

.profile-history-empty {
  padding: calc(var(--menu-gap) * 0.35) calc(var(--menu-gap) * 0.9);
  color: var(--menu-label);
  font-weight: 400;
}

.identity-top-sticky {
  position: sticky;
  top: 0;
  padding: calc(var(--screen-edge) + env(safe-area-inset-top, 0px)) var(--screen-edge) var(--menu-gap);
  min-height: 30vh;
  background: var(--menu-bg);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
}

.identity-preview-stage {
  position: relative;
  width: min(44vw, 180px);
  height: min(44vw, 180px);
  margin: 0 auto;
  border-radius: var(--cr);
  background: var(--c-avatar-bg);
  overflow: hidden;
}

/* Avatars live in one <svg> per host (see renderAvatarLayers in avatar.js);
 * part stacking is inside the svg via document order, so no per-layer z-index
 * is needed here. These rules just size the svg to its host. */
.identity-layer,
.menu-avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.identity-controls {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  padding: 0 var(--s-3) calc(var(--menu-gap) * 1.5);
}

.identity-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--menu-gap) * 0.55);
}

.identity-group-title {
  color: var(--menu-label);
  text-transform: lowercase;
  font-weight: 600;
}

.identity-options {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--menu-gap) * 0.45);
}

.identity-option {
  width: calc(var(--cw) * 0.9);
  height: calc(var(--cw) * 0.9);
  border-radius: calc(var(--cr) * 0.9);
  border: none;
  background: var(--menu-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  /* Shape swatches render the avatar body with overflow:visible so the
     shoulders fade past the 350×350 viewBox — crop them to the button's
     rounded rectangle. */
  overflow: hidden;
}

.identity-option-swatch {
  width: 100%;
  height: 100%;
  display: block;
}

.identity-option[aria-pressed="true"] {
  box-shadow: 0 0 0 var(--stroke-2) var(--c-accent);
}

.identity-option img,
.identity-option svg,
.identity-option-layer {
  width: 100%;
  height: 100%;
  display: block;
}

#settings-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  gap: var(--menu-gap);
}

.settings-controls {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  padding-top: var(--menu-gap);
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--menu-gap) * 0.55);
  border: none;
  padding: 0;
  margin: 0;
}

.settings-group-title {
  color: var(--menu-label);
  text-transform: lowercase;
  padding: 0;
  font-weight: 600;
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: calc(var(--menu-gap) * 0.35);
}

.settings-option {
  display: flex;
  align-items: center;
  gap: calc(var(--menu-gap) * 0.65);
  color: #fff;
  cursor: pointer;
  padding: calc(var(--menu-gap) * 0.35) 0;
  font-size: var(--fs-user);
  font-weight: 500;
}

.settings-option input[type="radio"] {
  flex-shrink: 0;
  width: calc(var(--fs-menu) * 1.1);
  height: calc(var(--fs-menu) * 1.1);
  margin: 0;
  accent-color: #fff;
  cursor: pointer;
}

.menu-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--menu-gap);
  align-self: center;
}

.menu-middle > * + * {
  margin-top: var(--menu-gap);
}

.menu-btn {
  height: var(--menu-row-h);
  flex: 0 0 auto;
  border-radius: var(--menu-radius);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  background: var(--menu-surface);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  cursor: pointer;
  font-weight: 600;
}

.menu-btn:disabled {
  background-image: none;
}

.menu-btn-primary {
  background: var(--c-card);
  color: var(--c-card-text);
  font-weight: 700;
}

.onboarding-continue-btn {
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
  -webkit-text-fill-color: currentColor;
}

.mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mode-segment-gap);
  height: var(--menu-row-h);
  flex: 0 0 auto;
  padding: var(--mode-inset);
  border-radius: var(--menu-radius);
  background: var(--menu-surface);
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  overflow: hidden;
}

.mode-btn {
  height: var(--mode-inner-h);
  border-radius: var(--mode-inner-r);
  border: none;
  background: transparent;
  color: var(--menu-label);
  padding: 0;
  font-weight: 500;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}

.mode-btn-active {
  background: var(--menu-surface-hi);
  color: #fff;
  font-weight: 600;
}

.mode-btn-inactive {
  border: none;
  background: transparent;
  color: var(--menu-label);
}

.players-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--menu-row-h);
  flex: 0 0 auto;
}

.players-label {
  text-transform: lowercase;
  color: var(--menu-label);
  opacity: 1;
  font-weight: 500;
}

.n-select {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
}

.n-btn {
  width: calc(var(--menu-row-h) * 0.82);
  height: calc(var(--menu-row-h) * 0.82);
  border: none;
  background: var(--menu-surface);
  color: #fff;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--cr);
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
}

#n-display {
  color: #fff;
  min-width: calc(var(--cw) * 0.36);
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

#start-btn.menu-btn {
  background: var(--menu-surface);
  border: none;
  color: #fff;
  letter-spacing: 0.02em;
  cursor: pointer;
}
#start-btn:disabled { cursor: default; }

/* ── notice screen (E1–E5) ─────────────────────────────────────────────────── */

#notice-screen {
  position: fixed;
  inset: 0;
  background: var(--menu-bg);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
}

#notice-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ch) * 0.18);
  padding: calc(var(--ch) * 0.08) calc(var(--cw) * 0.4);
  max-width: 420px;
  width: 100%;
}

#notice-heading {
  font-size: calc(var(--cw) * 0.36);
  font-weight: 700;
  color: #fff;
  text-align: center;
}

#notice-body {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--menu-label);
  text-align: center;
  line-height: 1.4;
}

#notice-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ch) * 0.06);
  width: 100%;
  margin-top: calc(var(--ch) * 0.06);
}

/* ── confirm dialog (C1, C3) ───────────────────────────────────────────────── */

#confirm-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: calc(var(--z-modal) + 1);
}

#confirm-dialog {
  background: var(--menu-bg);
  border-radius: var(--cr);
  padding: calc(var(--ch) * 0.08) calc(var(--cw) * 0.4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--ch) * 0.1);
  max-width: 380px;
  width: 90%;
}

#confirm-heading {
  font-size: calc(var(--cw) * 0.3);
  font-weight: 700;
  color: #fff;
  text-align: center;
}

#confirm-body {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--menu-label);
  text-align: center;
  line-height: 1.4;
}

#confirm-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ch) * 0.05);
  margin-top: calc(var(--ch) * 0.04);
}

/* ── game over overlay ─────────────────────────────────────────────────────── */

#game-over {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: var(--z-scrim);
  gap: calc(var(--ch) * 0.25);
}
#game-over.shown { display: flex; }

#outcome-text {
  font-size: calc(var(--cw) * 0.8);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4em;
  font-family: var(--ff-ui);
}

#play-again-btn {
  padding: var(--fs-sm) calc(var(--cw) * 0.7);
  background: var(--c-card);
  color: var(--c-card-text);
  border: none;
  border-radius: var(--cr);
  font-size: var(--fs-card);
  font-weight: 700;
  letter-spacing: 0.2em;
  cursor: pointer;
  font-family: var(--ff-ui);
}

/* ── lobby url (centered over game table in lobby mode) ───────────────────── */

#lobby-url {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-pop);
  display: flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: auto;
}

#lobby-url-text {
  font-size: var(--fs-menu);
  color: #fff;
  user-select: text;
  -webkit-user-select: text;
}

.lobby-url-copy-btn {
  min-height: var(--menu-row-h);
  flex-shrink: 0;
  padding: 0 calc(var(--menu-gap) * 0.9);
  gap: 0.5rem;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--menu-radius);
  background: var(--c-dim);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  cursor: pointer;
}

.lobby-url-copy-btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

#lobby-url-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#lobby-ready-btn {
  height: var(--menu-row-h);
  padding: 0 2rem;
  border: none;
  border-radius: var(--menu-radius);
  background: var(--menu-surface);
  color: #fff;
  font-size: var(--fs-menu);
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: inset 0 0 0 1px var(--menu-stroke);
  cursor: pointer;
}

#lobby-ready-btn.ready-active {
  box-shadow: inset 0 0 0 2px var(--c-success);
  color: var(--c-success);
}

/* ── mobile: full screen portrait ─────────────────────────────────────────── */

@media (max-width: 500px) {
  body { background: var(--menu-bg); }

  #game-screen {
    max-width: 100%;
    width: 100vw;
    height: 100dvh;
  }
}

/* ── keyboard focus ring ───────────────────────────────────────────────────
   Only appears for :focus-visible (keyboard / AT users), not for touch taps
   or mouse clicks, so this has no effect on current pointer-driven play.     */
.menu-btn:focus-visible,
.mode-btn:focus-visible,
.n-btn:focus-visible,
.top-nav-text-btn:focus-visible,
.onboarding-randomize-icon-btn:focus-visible,
.onboarding-input:focus-visible,
.identity-option:focus-visible,
.menu-avatar-btn:focus-visible,
.lobby-url-copy-btn:focus-visible,
#lobby-ready-btn:focus-visible,
#pass-btn:focus-visible,
#exit-game-btn:focus-visible,
#play-again-btn:focus-visible,
.card.playable:focus-visible,
.opp-seat:focus-visible {
  outline: var(--stroke-2) solid var(--c-focus);
  outline-offset: 2px;
}

/* ── reduced motion ───────────────────────────────────────────────────────
   Respect prefers-reduced-motion per WCAG 2.3.3. Strips animations and
   transitions down to effectively instant for users who request it.         */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}