@font-face {
  font-family: 'Fredoka';
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fredoka.woff2') format('woff2');
}

/* ---------- Shorot theme ----------
   Built off the logo: a carved wooden sign (dark bark outline, warm plank fill),
   peachy-cream lettering, leaf-green accents and sunset orange. Surfaces stay dark
   so every game's existing light-on-dark text keeps its contrast. */

:root {
  /* Palette */
  --bark: #2a1408;
  --wood: #5a3119;
  --wood-mid: #46240f;
  --wood-light: #7b4627;
  --cream: #fff3dc;
  --peach: #ffc48a;
  --orange: #f08a4b;
  --leaf: #8cbf63;
  --leaf-dark: #5b8a3c;
  --sun: #f6c768;
  --rose: #ec8b78;

  --bg: #2b1509;
  --text: var(--cream);
  --muted: #ffd59a;
  --accent: var(--orange);
  --accent-2: var(--sun);
  --accent-text: #3a1a08;
  --danger: #ff6b78;
  --success: #3fd79a;
  --radius: 12px;
  --team-red: #ff6b78;
  --team-blue: #5c93ff;
  --team-neutral: #a7aabb;
  --team-assassin: #f5f5f9;

  --font: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --glass-bg: rgba(70, 36, 15, 0.94);
  --glass-bg-strong: rgba(36, 18, 7, 0.72);
  --glass-border: rgba(255, 213, 154, 0.3);
  --glass-highlight: rgba(255, 236, 200, 0.08);
  --border-strong: var(--bark);
  /* Chunky "sticker" drop: a solid bark edge under everything that's pressable. */
  --shadow-soft: 0 4px 0 var(--bark), 0 8px 18px rgba(20, 8, 2, 0.35);
  --shadow-lift: 0 6px 0 var(--bark), 0 12px 24px rgba(20, 8, 2, 0.4);
  --shadow-press: 0 1px 0 var(--bark);
  --bevel-hi: inset 0 2px 0 rgba(255, 255, 255, 0.4);
  --bevel-lo: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  --plank:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(30, 12, 3, 0.18) 34px 36px, transparent 36px 38px),
    linear-gradient(180deg, #62361c 0%, #4e2911 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
  /* No double-tap-to-zoom, so iOS Safari fires taps immediately instead of waiting to see
     if a second tap follows. Set on every element since touch-action isn't inherited. */
  touch-action: manipulation;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  isolation: isolate;
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

/* The scene lives on its own fixed layer instead of `background-attachment: fixed`,
   which iOS Safari ignores (it stretches the image over the whole scroll height).
   main.js sets --bg-image when the room has a custom upload. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) var(--bg-image, url('images/bg-gamenight.jpg')) center / cover no-repeat;
}

.app-header {
  padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.4rem;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.app-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(20, 8, 2, 0.45));
}

/* Token balance under the logo, on every screen (public/js/shared/tokens.js). */
.token-pill {
  position: absolute;
  left: 50%;
  bottom: -0.55rem;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.15rem 0.7rem 0.15rem 0.4rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.token-pill-coin {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe7a0, var(--sun) 55%, #c9902e);
  box-shadow: inset 0 0 0 1.5px #b07a22;
}

.token-pill-up {
  animation: token-pill-pop 0.6s var(--ease-bounce);
  border-color: var(--success);
}

.token-pill-down {
  animation: token-pill-pop 0.6s var(--ease-bounce);
}

@keyframes token-pill-pop {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.18); }
  100% { transform: translateX(-50%) scale(1); }
}

.conn-status {
  position: sticky;
  top: 0;
  z-index: 50;
  text-align: center;
  padding: 0.5rem 1rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  background: var(--sun);
  border-bottom: 3px solid var(--bark);
  animation: conn-status-in 0.25s var(--ease);
}

.conn-status.offline {
  background: var(--danger);
  color: var(--text);
}

/* Owner message from the admin page (/admin) - tap to dismiss, hides itself after a while. */
.admin-notice {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(92vw, 28rem);
  padding: 0.75rem 2.5rem;
  font-family: var(--font);
  font-weight: 700;
  text-align: center;
  color: var(--accent-text);
  background: var(--sun);
  border: 3px solid var(--bark);
  border-radius: 14px;
  cursor: pointer;
  animation: conn-status-in 0.25s var(--ease);
}

.admin-notice-close {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: none;
  box-shadow: none;
}

@keyframes conn-status-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.bg-controls {
  position: absolute;
  right: 1rem;
  top: calc(50% + env(safe-area-inset-top) / 2);
  transform: translateY(-50%);
  display: flex;
  gap: 0.4rem;
}

.sound-controls {
  right: auto;
  left: 1rem;
}

.bg-btn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 14px;
  background: var(--plank);
  border: 3px solid var(--bark);
  color: var(--text);
  box-shadow: 0 3px 0 var(--bark), var(--bevel-hi);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--bark), var(--bevel-hi);
}

.bg-btn svg {
  width: 20px;
  height: 20px;
}

.mute-slash {
  opacity: 0;
  transition: opacity 0.15s;
}

.mute-wave {
  opacity: 1;
  transition: opacity 0.15s;
}

#mute-btn.muted .mute-wave {
  opacity: 0;
}

#mute-btn.muted .mute-slash {
  opacity: 1;
}

.btn-icon {
  vertical-align: -4px;
  margin-right: 0.15rem;
}

.bg-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: var(--shadow-press);
}

.app-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom));
}

/* Game panels read as a wooden sign: bark outline, warm planks, a faint cream
   inner ring and two brass nails up top. */
.screen {
  width: 100%;
  max-width: 440px;
  background:
    radial-gradient(circle at 16px 16px, #f3d39a 0 2px, #8a5a2e 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 16px) 16px, #f3d39a 0 2px, #8a5a2e 2.5px 4px, transparent 4.5px),
    var(--plank);
  border: 3px solid var(--bark);
  border-radius: 26px;
  padding: 1.6rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow:
    inset 0 0 0 2px rgba(255, 213, 154, 0.16),
    inset 0 3px 0 rgba(255, 236, 200, 0.12),
    0 6px 0 var(--bark),
    0 18px 36px rgba(20, 8, 2, 0.45);
  animation: screen-in 0.45s var(--ease-bounce);
}

.screen.hidden {
  display: none;
}

/* Join + lobby float directly on the meadow so the cows stay in view; each
   element brings its own surface instead of sitting in one big panel. */
#join-screen,
#lobby-screen {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.75rem 0.25rem 2rem;
}

/* Small wooden tag for any label that sits straight on the background. */
#join-screen .muted,
#lobby-screen > .muted,
#lobby-screen .lobby-top-row .muted,
#lobby-screen .cn-timer-section > .muted,
#lobby-screen .scoreboard-heading {
  align-self: flex-start;
  width: fit-content;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--plank);
  border: 2px solid var(--bark);
  box-shadow: 0 3px 0 var(--bark);
  color: var(--peach);
  margin-bottom: 0.15rem;
}

#join-screen .error,
#lobby-screen .error {
  text-shadow: 0 2px 4px rgba(10, 4, 1, 0.9);
}

#lobby-screen .error:empty,
#join-screen .error:empty {
  display: none;
}

.hidden {
  display: none !important;
}

.mf-sticky-footer {
  position: sticky;
  bottom: 0;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(to bottom, transparent, #4e2911 22%);
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

h1 {
  margin: 0 0 0.15rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--bark);
}

h2 {
  font-family: var(--font);
  font-weight: 700;
}

input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 18px;
  border: 3px solid var(--bark);
  background: var(--cream);
  color: var(--accent-text);
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  min-height: 52px;
  box-shadow: inset 0 3px 0 rgba(90, 49, 25, 0.15), 0 4px 0 var(--bark);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

input[type="text"]::placeholder {
  color: #a3784f;
  opacity: 1;
}

input[type="text"]:focus-visible {
  outline: none;
  box-shadow: inset 0 3px 0 rgba(90, 49, 25, 0.15), 0 4px 0 var(--bark), 0 0 0 4px rgba(246, 199, 104, 0.6);
}

input[type="range"] {
  accent-color: var(--orange);
}

/* Primary: sunset-orange candy button with a bark edge you press "into". */
button {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  border: 3px solid var(--bark);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, white 28%) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent) 100%, black 8%) 100%);
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-height: 52px;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), opacity 0.15s var(--ease), background 0.15s var(--ease);
  box-shadow: 0 4px 0 var(--bark), var(--bevel-hi), var(--bevel-lo);
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--bark), var(--bevel-hi), var(--bevel-lo);
}

button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: var(--shadow-press), var(--bevel-lo);
}

button:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Secondary: a lighter plank, cream lettering. */
button.secondary {
  background: linear-gradient(180deg, #8c5430 0%, var(--wood-light) 55%, #693a1e 100%);
  border: 3px solid var(--bark);
  color: var(--cream);
  box-shadow: 0 4px 0 var(--bark), inset 0 2px 0 rgba(255, 220, 170, 0.25);
}

button.secondary:hover:not(:disabled) {
  background: linear-gradient(180deg, #98603a 0%, #87502e 55%, #713f21 100%);
  box-shadow: 0 5px 0 var(--bark), inset 0 2px 0 rgba(255, 220, 170, 0.25);
  transform: translateY(-1px);
}

button.secondary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: var(--shadow-press);
}

.btn-row {
  display: flex;
  gap: 0.6rem;
}

.btn-row button {
  flex: 1;
}

#join-btn {
  font-size: 1.2rem;
  min-height: 58px;
}

.install-app-btn {
  margin-top: 0.5rem;
  min-height: 44px;
  font-size: 0.95rem;
}

.install-steps {
  margin: 0;
  padding-left: 1.4rem;
  text-align: left;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#room-code-input {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: 700;
}

.muted {
  color: var(--muted);
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.error {
  color: #ff8a93;
  margin: 0;
  min-height: 1.1em;
  font-size: 0.92rem;
  font-weight: 600;
}

.bg-error {
  text-align: center;
  padding: 0.4rem 1rem 0;
}

.player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.player-list li {
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Lobby roster sits on the meadow, so each name gets a full wooden tag. */
#lobby-list li {
  background: var(--plank);
  border: 3px solid var(--bark);
  border-radius: 20px;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 0 var(--bark), inset 0 2px 0 rgba(255, 236, 200, 0.12);
}

#lobby-list .player-emoji-img {
  background: rgba(255, 243, 220, 0.12);
  border-radius: 14px;
}

.player-emoji {
  font-size: 1.15rem;
  line-height: 1;
}

.player-emoji-img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  flex: none;
}

/* Signed-in players get a glowing ring on their lobby avatar, tappable to view their card. */
@keyframes signedin-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #ffd54a, 0 0 8px 2px rgba(255, 213, 74, 0.55); }
  50% { box-shadow: 0 0 0 2px #ffe27a, 0 0 14px 5px rgba(255, 213, 74, 0.85); }
}

.player-emoji.player-avatar-signedin,
.player-emoji-img.player-avatar-signedin {
  cursor: pointer;
  border-radius: 50%;
  animation: signedin-glow-pulse 2.2s ease-in-out infinite;
}

.player-emoji.player-avatar-signedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
}

.sticker-picker-label {
  margin-top: 0.4rem;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.65rem;
  margin: 0.3rem 0 0.6rem;
}

.sticker-option {
  padding: 0.35rem;
  border-radius: 20px;
  background: var(--plank);
  border: 3px solid var(--bark);
  box-shadow: 0 4px 0 var(--bark), inset 0 2px 0 rgba(255, 236, 200, 0.12);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-option:hover:not(:disabled) {
  box-shadow: 0 5px 0 var(--bark), inset 0 2px 0 rgba(255, 236, 200, 0.12);
}

.sticker-option img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

/* Badge-art stickers not yet unlocked: dark silhouette + lock, like the Player Card. */
.sticker-option.locked {
  position: relative;
}

.sticker-option.locked img {
  filter: brightness(0) opacity(0.6);
}

.sticker-lock {
  position: absolute;
  right: 0.15rem;
  bottom: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bark);
  border: 2px solid var(--plank);
  color: var(--peach);
}

.sticker-lock svg {
  width: 65%;
  height: 65%;
}

.sticker-add {
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--muted);
  background: rgba(36, 18, 7, 0.55);
  border-style: dashed;
  border-color: var(--muted);
  box-shadow: none;
}

.sticker-option.selected {
  background: linear-gradient(180deg, #b6e08f 0%, var(--leaf) 100%);
  border-color: var(--bark);
  box-shadow: 0 4px 0 var(--bark), 0 0 0 4px rgba(255, 243, 220, 0.85);
  transform: scale(1.04);
}

.level-choices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Choice chips (difficulty, timer, language...): carved-in slots that turn
   leaf-green when picked, so a choice never looks like an action button. */
.level-btn {
  background: rgba(30, 14, 5, 0.45);
  border: 2px solid var(--glass-border);
  color: var(--cream);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}

.level-btn:hover:not(:disabled) {
  background: rgba(30, 14, 5, 0.6);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  transform: none;
}

.level-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}

/* On the open meadow (lobby) chips need a solid plank so they don't look ghosted. */
#lobby-screen .level-btn:not(.selected) {
  background: var(--plank);
  border: 3px solid var(--bark);
  box-shadow: 0 4px 0 var(--bark), inset 0 2px 0 rgba(255, 236, 200, 0.12);
}

.level-btn.selected,
.level-btn.selected:hover:not(:disabled) {
  background: linear-gradient(180deg, #b6e08f 0%, var(--leaf) 60%, #79ad52 100%);
  border: 3px solid var(--bark);
  color: #20380f;
  box-shadow: 0 4px 0 var(--bark), var(--bevel-hi);
}

.spinner {
  width: 38px;
  height: 38px;
  margin: 0.5rem auto 0;
  border: 4px solid rgba(255, 213, 154, 0.25);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.role-panel {
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 3px solid var(--bark);
  box-shadow: 0 4px 0 var(--bark);
  animation: screen-in 0.35s var(--ease);
}

.hint-text {
  font-weight: 500;
  font-size: 0.98rem;
}

.role-panel.imposter {
  background: linear-gradient(180deg, rgba(255, 107, 120, 0.3), rgba(160, 40, 50, 0.35));
  color: #ffe0e3;
}

.role-panel.crew {
  background: linear-gradient(180deg, rgba(140, 191, 99, 0.35), rgba(70, 120, 45, 0.35));
  color: #e9ffd8;
}

/* Game picker: a 2-up grid of chunky picture tiles, all the same size. The host-only
   tiles and the All-In or Fold tile sit in separate wrappers (see index.html), which are
   display: contents so all their tiles share this one grid. */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.game-choice {
  display: contents;
}

.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 108px;
  padding: 0.8rem 0.5rem;
  border-radius: 22px;
  border: 3px solid var(--bark);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.35), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--tile-a) 100%, white 22%) 0%, var(--tile-a) 70%, color-mix(in srgb, var(--tile-a) 100%, black 10%) 100%);
  text-align: center;
  box-shadow: 0 5px 0 var(--bark), var(--bevel-hi), var(--bevel-lo), 0 10px 18px rgba(20, 8, 2, 0.3);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.game-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--bark), var(--bevel-hi), var(--bevel-lo), 0 14px 22px rgba(20, 8, 2, 0.35);
}

.game-tile:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: var(--shadow-press), var(--bevel-lo);
}

.game-tile.tile-underfilled {
  --tile-a: #b7a48c;
  filter: saturate(0.5);
}

.game-tile.tile-underfilled .game-tile-icon,
.game-tile.tile-underfilled .game-tile-name,
.game-tile.tile-underfilled .game-tile-sub {
  opacity: 0.6;
}

/* Outline icon, drawn in the tile's text colour. */
.game-tile-icon {
  line-height: 0;
  color: var(--accent-text);
  opacity: 0.85;
}

.game-tile-sub {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-text);
  opacity: 0.72;
}

.game-tile-name {
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent-text);
  letter-spacing: 0.01em;
}

.icon-row {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.icon-btn {
  width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  flex: none;
  border-radius: 18px;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plank);
  border: 3px solid var(--bark);
  box-shadow: 0 4px 0 var(--bark), inset 0 2px 0 rgba(255, 236, 200, 0.15);
}

.icon-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--bark), inset 0 2px 0 rgba(255, 236, 200, 0.15);
}

.icon-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: var(--shadow-press);
}

/* Lobby action buttons: outline icon over a word, sharing the row equally. */
.icon-btn.labeled-btn {
  flex: 1 1 0;
  width: auto;
  max-width: 96px;
  height: auto;
  min-height: 64px;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cream);
}

.icon-btn.labeled-btn svg {
  color: var(--peach);
}

.icon-btn.danger-btn,
.icon-btn.danger-btn svg {
  color: #ff9aa4;
}

/* Host-only "remove from room" button at the end of a lobby row. */
.lobby-kick-btn {
  flex: none;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  margin-left: 0.4rem;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--cream);
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lobby-kick-btn:hover {
  color: #ff9aa4;
  border-color: #ff9aa4;
}

/* Mini rating card at the end of a signed-in player's lobby row - same tier colours
   as the full card (.rating-card), which it opens when tapped. */
.mini-card {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 46px;
  height: 58px;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  border: 2.5px solid var(--bark);
  background: linear-gradient(160deg, #c08a55 0%, #8a5a30 55%, #5c3a1d 100%);
  box-shadow: 0 3px 0 var(--bark), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.mini-card-silver {
  background: linear-gradient(160deg, #eef2f5 0%, #b9c2cb 55%, #868f98 100%);
}

.mini-card-gold {
  background: linear-gradient(160deg, #fff1b8 0%, #f6d27a 45%, #c9993f 100%);
}

.mini-card-gold-strong {
  background: linear-gradient(160deg, #fffbe0 0%, #ffe18a 35%, #e8b63c 65%, #a9781f 100%);
  box-shadow: 0 3px 0 var(--bark), 0 0 10px rgba(255, 216, 120, 0.6);
}

.mini-card:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--bark), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mini-card-ovr {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 1;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mini-card-photo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 1px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.mini-card-initial {
  margin-bottom: 7px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bark);
}

/* Cycles through the sunset-meadow palette so new tiles stay on-theme automatically. */
.game-tile:nth-of-type(4n + 1) {
  --tile-a: var(--orange);
}

.game-tile:nth-of-type(4n + 2) {
  --tile-a: var(--leaf);
}

.game-tile:nth-of-type(4n + 3) {
  --tile-a: var(--sun);
}

.game-tile:nth-of-type(4n) {
  --tile-a: var(--rose);
}

#choose-allinorfold-btn {
  --tile-a: var(--peach);
}

.lobby-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.scoreboard-toggle-btn {
  width: auto;
  height: 48px;
  min-height: 48px;
  gap: 0.4rem;
  padding: 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
}

.scoreboard-toggle-btn svg {
  color: var(--sun);
}

.scoreboard-toggle-btn.open,
#sticker-btn.open {
  background: linear-gradient(180deg, #ffd88f 0%, var(--sun) 100%);
  border-color: var(--bark);
  color: var(--accent-text);
}

.scoreboard-toggle-btn.open svg,
#sticker-btn.open svg {
  color: var(--accent-text);
}

/* Grid-rows 0fr->1fr trick: animates to auto content height ("falls down") without JS measuring. */
.scoreboard-dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-bounce);
}

.scoreboard-dropdown.open {
  grid-template-rows: 1fr;
}

.scoreboard-dropdown-inner {
  overflow: hidden;
  min-height: 0;
  /* room for the rows' bark drop-shadow so it isn't clipped */
  padding-bottom: 6px;
}

.scoreboard-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.scoreboard-heading {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Rows get a rank badge; the top three are gold / silver / bronze. */
.scoreboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  counter-reset: sb-rank;
}

.scoreboard-list li {
  counter-increment: sb-rank;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  padding: 0.5rem 0.8rem 0.5rem 0.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.scoreboard-list li::before {
  content: counter(sb-rank);
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cream);
  background: rgba(255, 236, 200, 0.12);
  border: 2px solid rgba(255, 213, 154, 0.3);
}

.scoreboard-list li:nth-child(1)::before {
  background: linear-gradient(180deg, #ffe59a, #f2b93b);
  border-color: var(--bark);
  color: var(--accent-text);
}

.scoreboard-list li:nth-child(2)::before {
  background: linear-gradient(180deg, #f4f1ea, #c4bdb0);
  border-color: var(--bark);
  color: var(--accent-text);
}

.scoreboard-list li:nth-child(3)::before {
  background: linear-gradient(180deg, #f0b98a, #c97d45);
  border-color: var(--bark);
  color: var(--accent-text);
}

.scoreboard-list li > span:first-child {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

#lobby-screen .scoreboard-list li {
  background: var(--plank);
  border: 3px solid var(--bark);
  box-shadow: 0 3px 0 var(--bark);
}

.scoreboard-list .sb-points {
  font-weight: 700;
  color: var(--peach);
}

.scoreboard-list .sb-points.negative {
  color: var(--danger);
}

.scoreboard-list li.sb-flash-up,
.scoreboard-list li.sb-flash-down {
  animation: sb-flash 0.9s var(--ease);
}

@keyframes sb-flash {
  0% {
    background: rgba(140, 191, 99, 0.55);
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.scoreboard-list li.sb-flash-down {
  animation-name: sb-flash-down;
}

@keyframes sb-flash-down {
  0% {
    background: rgba(255, 107, 120, 0.45);
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scoreboard-list li.sb-flash-up,
  .scoreboard-list li.sb-flash-down,
  .screen {
    animation: none;
  }
}

.sb-results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.92rem;
  background: rgba(30, 14, 5, 0.4);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
}

.sb-results-table th,
.sb-results-table td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(255, 213, 154, 0.15);
}

.sb-results-table tr:last-child td {
  border-bottom: none;
}

.sb-results-table th {
  color: var(--muted);
  background: rgba(30, 14, 5, 0.45);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-results-table .pts-positive {
  color: #b6e08f;
  font-weight: 700;
}

.sb-results-table .pts-negative {
  color: var(--danger);
  font-weight: 700;
}

.team-columns {
  display: flex;
  gap: 0.75rem;
}

.team-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.team-column h2 {
  margin: 0;
  font-size: 1.15rem;
  text-align: center;
  text-shadow: 0 2px 0 var(--bark);
}

.team-columns > .team-column {
  padding: 0.7rem 0.55rem;
  border-radius: 18px;
  border: 2px solid var(--glass-border);
  background: rgba(30, 14, 5, 0.35);
}

.team-columns > .team-red {
  background: rgba(255, 107, 120, 0.14);
  border-color: rgba(255, 107, 120, 0.5);
}

.team-columns > .team-blue {
  background: rgba(92, 147, 255, 0.14);
  border-color: rgba(92, 147, 255, 0.5);
}

.team-red h2 {
  color: var(--team-red);
}

.team-blue h2 {
  color: var(--team-blue);
}

.team-column .player-list li {
  text-align: center;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  overflow-wrap: anywhere;
}

/* Music Timeline: branded per-team panel wrapping the card-based timeline board. */

.mt-team-column {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--mt-team-color, var(--accent));
  border-radius: 14px;
  padding: 0.7rem 0.55rem;
  box-shadow: var(--shadow-soft);
}

.mt-team-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
  text-align: center;
}

.mt-team-name {
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.mt-team-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mt-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}

.mt-badge-active {
  background: var(--accent);
  color: var(--accent-text);
}

.mt-badge-dj {
  background: rgba(92, 147, 255, 0.2);
  color: #a9c4ff;
  border: 1px solid rgba(92, 147, 255, 0.4);
}

.mt-badge-challenging {
  background: rgba(255, 176, 32, 0.18);
  color: var(--accent-2);
  border: 1px solid rgba(255, 176, 32, 0.4);
}

.mt-token-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
}

/* The timeline "board" itself - a horizontal strip of song cards with optional slot buttons. */

.mt-timeline {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  overflow-x: auto;
  padding: 0.3rem 0.1rem 0.45rem;
  mask-image: linear-gradient(to right, black calc(100% - 1.4rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.4rem), transparent 100%);
}

.mt-timeline::-webkit-scrollbar {
  height: 5px;
}

.mt-timeline::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.mt-card {
  position: relative;
  flex: none;
  width: 4.5rem;
  min-height: 4rem;
  border-radius: 10px;
  background: linear-gradient(160deg, #fffdf7 0%, #efe8d8 100%);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 0.4rem 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.12rem;
}

.mt-card-year {
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mt-card-title {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mt-card-artist {
  font-size: 0.56rem;
  opacity: 0.65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.mt-card-pending {
  border: 2px dashed var(--accent-2);
  background: linear-gradient(160deg, #fff8e6 0%, #f3e6c2 100%);
}

.mt-card-pending::after {
  content: 'pending';
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-2);
  color: var(--accent-text);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  white-space: nowrap;
}

.mt-card-empty {
  flex: none;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.5rem 0.2rem;
}

.mt-slot {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px dashed var(--glass-border);
  background: var(--glass-highlight);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mt-slot:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-2);
  transform: scale(1.15);
}

.mt-slot:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.mt-slot.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  transform: scale(1.18);
}

.mt-reveal-result {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0.2rem 0 0.4rem;
}

.mt-reveal-result.correct {
  color: var(--success);
}

.mt-reveal-result.incorrect {
  color: var(--danger);
}

#mt-song-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-highlight);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.cn-timer-section {
  margin-bottom: 0.75rem;
}

.cn-timer-choices {
  display: flex;
  gap: 0.5rem;
}

.cn-timer-btn {
  flex: 1;
  padding: 0.6rem 0.4rem;
  font-size: 0.9rem;
}

.cn-timer-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.word-lang-btn {
  flex: 1;
  padding: 0.6rem 0.4rem;
  font-size: 0.9rem;
}

.cn-timer-display {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--cream);
}

.lobby-join-in {
  animation: lobby-join-in 0.5s var(--ease-bounce) both;
}

@keyframes lobby-join-in {
  from { transform: scale(0.6) translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.cn-timer-display.cn-timer-warn {
  color: var(--sun);
}

.cn-timer-display.cn-timer-low {
  color: var(--danger);
  animation: cn-timer-low-pulse 0.8s ease-in-out infinite;
}

@keyframes cn-timer-low-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

#cn-random-teams-btn {
  margin-bottom: 0.75rem;
}

.cn-turn-red {
  color: var(--team-red);
}

.cn-turn-blue {
  color: var(--team-blue);
}

#codenames-screen,
#codenames-gameover-screen {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ---------- Codenames play screen: "tug of war" layout ---------- */

#codenames-screen {
  /* Roughly the height of everything around the 5x5 grid (app header, paddings,
     score bar, team lists, buttons). Cards grow into whatever the viewport has
     left; lower this to make cards taller, raise it if the page starts scrolling. */
  --cn-chrome: 540px;
  background: var(--bark);
  padding-top: 1.1rem;
  gap: 0.8rem;
}

.cn-scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cn-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cn-side-blue {
  align-items: flex-end;
}

.cn-side-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cn-side-red .cn-side-name,
.cn-wins-red,
.cn-team-red .cn-team-title {
  color: #ff8a95;
}

.cn-side-blue .cn-side-name,
.cn-wins-blue,
.cn-team-blue .cn-team-title {
  color: #8fb4ff;
}

.cn-side-found {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cn-wins {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cn-wins-score {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cn-wins-sep {
  color: var(--wood-light);
  padding: 0 0.5rem;
}

.cn-wins-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Found-cards bar: red fills from the left edge inward, blue from the right. */
.cn-tug {
  display: flex;
  gap: 3px;
}

.cn-seg {
  flex: 1;
  height: 12px;
  box-sizing: border-box;
  border-radius: 6px;
  transition: background-color 0.3s var(--ease);
}

.cn-seg-red {
  border: 1.5px solid rgba(255, 107, 120, 0.55);
}

.cn-seg-blue {
  border: 1.5px solid rgba(92, 147, 255, 0.6);
}

.cn-seg-red.filled {
  background: var(--team-red);
  border-color: var(--team-red);
}

.cn-seg-blue.filled {
  background: var(--team-blue);
  border-color: var(--team-blue);
}

.cn-seg-gap {
  flex: 0 0 6px;
}

/* The board frame glows in the colour of the team that is guessing. */
.cn-board {
  --cn-team: var(--team-red);
  --cn-team-glow: rgba(255, 107, 120, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: #3a1d0c;
  border: 3px solid var(--cn-team);
  box-shadow: 0 0 0 4px var(--cn-team-glow);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cn-board.cn-board-blue {
  --cn-team: var(--team-blue);
  --cn-team-glow: rgba(92, 147, 255, 0.2);
}

.cn-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cn-turn-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cn-team);
  color: #1a0b04;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cn-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cn-team {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: #3a1d0c;
  border: 1.5px solid rgba(255, 213, 154, 0.12);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.cn-team-red.active {
  background: rgba(255, 107, 120, 0.18);
  border-color: var(--team-red);
}

.cn-team-blue.active {
  background: rgba(92, 147, 255, 0.2);
  border-color: var(--team-blue);
}

.cn-team-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}

.cn-team-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.cn-members {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cn-member {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--wood-mid);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 500;
}

.cn-member.me {
  box-shadow: 0 0 0 1.5px var(--cream);
}

.cn-member svg {
  flex: none;
}

.cn-leader-note {
  flex: 1;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--wood-mid);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.cn-actions {
  display: flex;
  gap: 8px;
}

.cn-actions:not(:has(> :not(.hidden))) {
  display: none;
}

.cn-actions #cn-end-turn-btn {
  flex: 1;
  width: auto;
}

.cn-actions .cn-restart-btn {
  flex: none;
  width: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Codenames cards (play grid + game-over grid) ---------- */

.cn-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.cn-card {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  min-height: unset;
  box-sizing: border-box;
  padding: 0.3rem 0.15rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  background: var(--wood);
  color: var(--cream);
  border: 1px solid rgba(255, 213, 154, 0.28);
  box-shadow: inset 0 2px 0 rgba(255, 236, 200, 0.14), 0 3px 0 #1a0b04;
  transition: transform 0.15s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.15s var(--ease), opacity 0.25s var(--ease);
}

/* Long words drop a size so they fit on one line instead of splitting. */
.cn-card.cn-card-long {
  font-size: 0.68rem;
}

/* On the live board the cards stretch to use the spare screen height. */
.cn-board .cn-card {
  aspect-ratio: 5 / 6;
  min-height: calc((100dvh - var(--cn-chrome)) / 5);
}

.cn-card:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgba(255, 236, 200, 0.14), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.cn-card:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

.cn-card:disabled {
  cursor: default;
  opacity: 1;
}

/* Instant tap feedback while waiting for the server to confirm the guess. */
.cn-card.cn-card-pending {
  opacity: 0.55;
  transform: scale(0.96);
}

/* Leader view: unrevealed cards keep the wood face, outlined in their colour. */
.cn-card.cn-leader-hint.cn-red {
  border: 2px solid var(--team-red);
  color: #ffd4d8;
}

.cn-card.cn-leader-hint.cn-blue {
  border: 2px solid var(--team-blue);
  color: #d6e4ff;
}

.cn-card.cn-leader-hint.cn-neutral {
  background: #4a2a15;
  border: 2px solid rgba(255, 213, 154, 0.25);
  color: #e9d7b8;
}

.cn-card.cn-leader-hint.cn-assassin {
  background: #000;
  border: 2px solid var(--cream);
  color: var(--cream);
}

/* Revealed cards: colour plus a pattern, so red and blue differ beyond hue. */
.cn-card.revealed.cn-red {
  background: repeating-linear-gradient(135deg, rgba(42, 5, 8, 0) 0 6px, rgba(42, 5, 8, 0.13) 6px 9px), var(--team-red);
  border-color: var(--team-red);
  color: #2a0508;
  box-shadow: 0 1px 0 #1a0b04;
}

.cn-card.revealed.cn-blue {
  background: radial-gradient(rgba(4, 18, 43, 0.18) 1.4px, rgba(4, 18, 43, 0) 1.8px) 0 0 / 8px 8px, var(--team-blue);
  border-color: var(--team-blue);
  color: #04122b;
  box-shadow: 0 1px 0 #1a0b04;
}

.cn-card.revealed.cn-neutral {
  background: #3b2516;
  border: 1px dashed rgba(255, 213, 154, 0.3);
  color: #d9c2a0;
  box-shadow: none;
}

.cn-card.revealed.cn-assassin {
  background: #000;
  border-color: var(--cream);
  color: var(--cream);
  box-shadow: none;
}

/* Leaders: cards already found fade back so the remaining ones stand out. */
.cn-card.revealed.cn-done {
  opacity: 0.45;
}

/* Only the card revealed by this update pops - the board is rebuilt on every state
   update, so animating every .revealed card would replay them all on each click. */
.cn-card.just-revealed {
  animation: card-reveal 0.3s var(--ease);
}

@keyframes card-reveal {
  from {
    transform: scale(0.85);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Corner marks: dot for red, diamond for blue (colour-blind friendly). */
.cn-mark {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 7px;
  height: 7px;
}

.cn-red .cn-mark {
  border-radius: 50%;
  background: var(--team-red);
}

.cn-blue .cn-mark {
  transform: rotate(45deg);
  background: var(--team-blue);
}

.cn-card.revealed.cn-red .cn-mark {
  background: #2a0508;
}

.cn-card.revealed.cn-blue .cn-mark {
  background: #04122b;
}

.cn-skull {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- 10 Seconds ---------- */

.ts-badge {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 107, 120, 0.18);
  border: 1px solid rgba(255, 107, 120, 0.45);
  color: #ffb4bb;
  font-size: 0.85rem;
  text-align: center;
}

.ts-countdown {
  margin: 1.5rem 0;
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
  animation: ts-pulse 0.45s var(--ease);
}

.ts-countdown.ts-go {
  color: var(--success);
  font-size: 4.2rem;
}

.ts-stopwatch {
  margin: 1.25rem 0 0.75rem;
  font-variant-numeric: tabular-nums;
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ts-stop-btn {
  width: 100%;
  min-height: 72px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--danger);
  color: #1a0a0c;
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.ts-stop-btn:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.ts-results-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1rem;
  font-variant-numeric: tabular-nums;
}

.ts-results-table th,
.ts-results-table td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--glass-border);
}

.ts-results-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ts-eliminated-row {
  color: var(--danger);
  background: rgba(255, 107, 120, 0.08);
}

.ts-eliminated-row td {
  font-weight: 600;
}

.ts-champion {
  margin: 0.5rem 0 1rem;
  text-align: center;
  color: var(--success);
  font-size: 1.35rem;
}

.ts-standings {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ts-standings li {
  background: var(--glass-bg-strong);
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}

.ts-standings li.ts-champion-row {
  border-color: rgba(63, 215, 154, 0.55);
  background: rgba(63, 215, 154, 0.12);
  font-weight: 700;
}

.player-list li.ts-disconnected {
  opacity: 0.55;
  font-style: italic;
}

@keyframes ts-pulse {
  from {
    transform: scale(0.82);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------- Menifot ---------- */

#mf-screen {
  gap: 0.45rem;
  padding: 1rem;
}

.mf-scores {
  margin: 0 0 0.4rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.mf-section-heading {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.85rem;
}

.mf-boards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.mf-board {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at center, #1c6f47 0%, #0f4a2e 65%, #0a3a24 100%);
  border: 3px solid #6b4a2c;
  border-radius: 16px;
  padding: 0.65rem 0.65rem 0.55rem;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s var(--ease), opacity 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.mf-board::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  pointer-events: none;
}

.mf-board-target {
  border-color: var(--accent-2);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 176, 32, 0.35), 0 6px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.mf-board-disabled {
  opacity: 0.45;
}

.mf-board-title {
  position: relative;
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.mf-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
}

.mf-card {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 6px;
  background: linear-gradient(160deg, #fffdf7 0%, #efe8d8 100%);
  color: #1a1a1a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1;
  overflow: hidden;
}

.mf-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.mf-card-corner-tl {
  top: 0.13rem;
  left: 0.18rem;
}

.mf-card-corner-br {
  bottom: 0.13rem;
  right: 0.18rem;
  transform: rotate(180deg);
}

.mf-card-rank {
  font-size: 0.56rem;
  font-weight: 800;
}

.mf-card-pip {
  font-size: 0.6rem;
}

.mf-card-center {
  font-size: 1.05rem;
  opacity: 0.82;
}

.mf-card.mf-suit-h {
  color: #c0272b;
}

.mf-card.mf-suit-d {
  color: #8b2fc9;
}

.mf-card.mf-suit-c {
  color: #1a1a1a;
}

.mf-card.mf-suit-s {
  color: #9a7300;
}

.mf-card.hidden-card {
  background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 4px, #611723 4px, #611723 8px);
  border-color: rgba(0, 0, 0, 0.35);
}

.mf-card.hidden-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}

.mf-card-btn {
  cursor: pointer;
  appearance: none;
  font: inherit;
  line-height: 1;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.mf-card-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

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

.mf-card.selected {
  outline: 2px solid rgba(63, 215, 154, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(63, 215, 154, 0.25);
  transform: translateY(-3px);
}

.mf-hole-label {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.65);
}

.mf-hole-row {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.4rem;
  min-height: 2.9rem;
}

.mf-hole-empty {
  font-size: 0.7rem;
}

.mf-hand {
  margin-bottom: 0.4rem;
}

.mf-hand-tap {
  margin-top: 0.15rem;
}

.mf-locked-badge {
  margin: 0.3rem 0 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(63, 215, 154, 0.14);
  border: 1px solid rgba(63, 215, 154, 0.4);
  color: #9aecc8;
  font-size: 0.75rem;
  text-align: center;
}

#mf-lock-status.player-list {
  gap: 0.2rem;
}

#mf-lock-status.player-list li {
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
}

.player-list li.mf-me-locked {
  border-color: rgba(63, 215, 154, 0.45);
}

.mf-winner-line {
  margin: 0.55rem 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.mf-winner-line.mf-split {
  color: #f0c674;
}

.mf-rankings {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mf-rankings li {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mf-rankings li.mf-rank-win {
  color: inherit;
  font-weight: 600;
}

.mf-rank-cards {
  gap: 0.22rem;
}

.mf-card.mf-card-win {
  border-color: rgba(63, 215, 154, 0.9);
  box-shadow: 0 0 0 3px rgba(63, 215, 154, 0.5), 0 2px 8px rgba(63, 215, 154, 0.35);
}

.mf-card.mf-card-lose {
  border-color: rgba(255, 107, 120, 0.55);
  filter: grayscale(0.5);
  opacity: 0.6;
}

.mf-burn-row {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem;
  background: radial-gradient(ellipse at center, #143d2a 0%, #0a2a1c 100%);
  border: 2px dashed rgba(255, 176, 32, 0.35);
  border-radius: 12px;
}

.mf-round-points {
  margin: 0.5rem 0 0;
  font-variant-numeric: tabular-nums;
}

.mf-last-round {
  margin: 0.75rem 0 1rem;
}

.mf-result-board {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.mf-result-board:last-child {
  border-bottom: none;
}

/* Menifot — "Casino Felt" skin. The whole screen becomes one green baize table inside a
   padded wooden rail (keeps Shorot's wood brand); boards are printed betting-box outlines
   on the felt, classic full-pip red/black cards, cream-and-gold type, and a row of poker
   "seats" for the match score. Layered on top of the base Menifot rules above and scoped
   to #mf-screen, so other games that reuse .mf-card / .mf-card-row are unaffected. */
#mf-screen {
  position: fixed; inset: 0; z-index: 50; max-width: none; margin: 0; border-radius: 0; backdrop-filter: none;
  padding: 0.9rem 0.9rem 0; gap: 0.3rem; overflow-y: auto;
  border: 12px solid #5a3119;
  box-shadow: inset 0 0 0 3px #2a1408, inset 0 0 0 5px #c9993f, inset 0 0 40px rgba(0,0,0,0.6);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.1) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23000' fill-opacity='0'/%3E%3Crect width='1' height='1' fill='%23fff' fill-opacity='0.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, #237a4b 0%, #155c37 55%, #0b3f25 100%);
  background-attachment: fixed;
  color: #fff6e0;
}
#mf-screen #mf-title {
  margin: 0; text-align: center; font-size: 1.6rem; color: #f6d27a;
  text-shadow: 0 2px 0 #0b3f25, 0 0 18px rgba(246,210,122,0.35);
}
#mf-screen #mf-subtitle { margin: 0; text-align: center; font-size: 0.78rem; color: rgba(255,246,224,0.75); }
#mf-screen .muted { color: rgba(255,246,224,0.7); }
/* Scoreboard: a row of poker "seats" — avatar, name, score chip, race bar to 10 */
#mf-screen .mf-scores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 0.45rem;
  margin: 0.45rem 0 0.6rem; padding: 0.55rem 0.5rem 0.6rem;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(246,210,122,0.35); border-radius: 16px;
}
#mf-screen .mf-sb-seat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0;
}
#mf-screen .mf-sb-avatar {
  position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  border: 2px solid #2a1408; box-shadow: 0 0 0 2px rgba(246,210,122,0.6), 0 3px 6px rgba(0,0,0,0.45);
}
#mf-screen .mf-sb-tone0 { background: linear-gradient(160deg, #5b7fd6, #2f4d99); }
#mf-screen .mf-sb-tone1 { background: linear-gradient(160deg, #d67f5b, #99502f); }
#mf-screen .mf-sb-tone2 { background: linear-gradient(160deg, #b45bd6, #6f2f99); }
#mf-screen .mf-sb-tone3 { background: linear-gradient(160deg, #d6c05b, #99852f); }
#mf-screen .mf-sb-tone4 { background: linear-gradient(160deg, #5bc4d6, #2f7f99); }
#mf-screen .mf-sb-tone5 { background: linear-gradient(160deg, #d65b7f, #992f4d); }
#mf-screen .mf-sb-me .mf-sb-avatar { box-shadow: 0 0 0 3px #fff1b8, 0 0 14px rgba(246,210,122,0.7); }
#mf-screen .mf-sb-leader::before {
  content: '♛'; position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  font-size: 1rem; color: #f6d27a; text-shadow: 0 1px 0 #2a1408; z-index: 1;
}
#mf-screen .mf-sb-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.72rem; color: #fff6e0;
}
#mf-screen .mf-sb-score {
  position: absolute; top: 1.85rem; left: calc(50% + 0.75rem);
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #2a1408; font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #f6d27a 55%, #c9993f);
  border: 2px dashed #fffdf6; outline: 2px solid #2a1408;
}
#mf-screen .mf-sb-gain {
  position: absolute; top: -0.2rem; right: 0.1rem; padding: 0.05rem 0.35rem; border-radius: 999px;
  font-size: 0.65rem; font-weight: 700; color: #0b3f25; background: #9ff0b8; box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  animation: mf-gain-pop 0.6s var(--ease-bounce) both;
}
@keyframes mf-gain-pop { from { transform: translateY(6px) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
#mf-screen .mf-sb-track {
  width: 88%; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.4); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(246,210,122,0.25);
}
#mf-screen .mf-sb-fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #c9993f, #fff1b8); transition: width 0.6s var(--ease);
}
#mf-screen #mf-alloc-hint { text-align: center; font-size: 0.72rem; margin-bottom: 0.6rem; }

/* Boards: printed outlines on the felt, no separate surface */
#mf-screen .mf-boards { gap: 0.7rem; }
#mf-screen .mf-board {
  background: transparent; border: 2px solid rgba(246,210,122,0.75); border-radius: 18px;
  box-shadow: none; padding: 1rem 0.7rem 0.6rem; margin-top: 0.5rem;
}
#mf-screen .mf-board::before { inset: 4px; border: 1px solid rgba(246,210,122,0.3); border-radius: 14px; }
#mf-screen .mf-board .mf-board-title, #mf-screen .mf-burn-row .mf-board-title {
  position: absolute; top: -0.65rem; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  padding: 0.1rem 0.7rem; border-radius: 999px; background: #155c37; border: 2px solid rgba(246,210,122,0.75);
  color: #f6d27a; font-size: 0.62rem; text-shadow: none;
}
#mf-screen .mf-board > .mf-card-row:first-of-type { justify-content: center; }
#mf-screen .mf-hole-label { text-align: center; color: rgba(255,246,224,0.6); font-style: italic; }
#mf-screen .mf-hole-row {
  justify-content: center; background: rgba(0,0,0,0.18); border: 1px dashed rgba(246,210,122,0.35); border-radius: 12px;
}
#mf-screen .mf-board-target {
  border-color: #fff1b8; background: rgba(246,210,122,0.08);
  box-shadow: 0 0 0 3px rgba(246,210,122,0.35), 0 0 22px rgba(246,210,122,0.35);
}
#mf-screen .mf-board-disabled { opacity: 0.4; }

/* Classic cards: corner index both ends + pip centre, red/black only */
#mf-screen .mf-card {
  width: 2.3rem; height: 3.2rem; border-radius: 5px; background: #fffdf6; border: 1px solid #d8d0bd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45); font-family: Georgia, 'Times New Roman', serif;
}
#mf-screen .mf-card-rank { font-size: 0.72rem; }
#mf-screen .mf-card-pip { font-size: 0.62rem; }
#mf-screen .mf-card-center { font-size: 1.35rem; opacity: 1; }
#mf-screen .mf-card.mf-suit-s, #mf-screen .mf-card.mf-suit-c { color: #1b1b1b; }
#mf-screen .mf-card.mf-suit-h, #mf-screen .mf-card.mf-suit-d { color: #c4161c; }
#mf-screen .mf-card.hidden-card {
  background:
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,0.12) 3px 4px),
    repeating-linear-gradient(-45deg, transparent 0 3px, rgba(255,255,255,0.12) 3px 4px),
    #9c1c22;
  border: 3px solid #fffdf6;
}
#mf-screen .mf-card.hidden-card::after { inset: 1px; border-color: rgba(255,255,255,0.5); }
#mf-screen .mf-card-btn.hidden-card { box-shadow: 0 0 0 2px #f6d27a, 0 4px 10px rgba(0,0,0,0.5); }
#mf-screen .mf-card.selected { outline: 2px solid #f6d27a; outline-offset: 2px; box-shadow: 0 0 14px rgba(246,210,122,0.8); transform: translateY(-5px); }

/* Hand as a wooden card rack */
#mf-screen .mf-section-heading { text-align: center; color: #f6d27a; margin-top: 0.8rem; }
#mf-screen .mf-hand {
  padding: 0.7rem 0.5rem 0.9rem; border-radius: 14px; text-align: center;
  background: var(--plank); border: 3px solid #2a1408; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.25), 0 6px 14px rgba(0,0,0,0.45);
}
#mf-screen .mf-hand-tap { justify-content: center; }
#mf-screen .mf-hand .mf-card { width: 2.6rem; height: 3.6rem; }

#mf-screen #mf-lock-status { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin: 0.5rem 0; }
#mf-screen #mf-lock-status li { background: rgba(0,0,0,0.25); border: 1px solid rgba(246,210,122,0.35); border-radius: 999px; color: #fff6e0; box-shadow: none; }
#mf-screen .mf-locked-badge { background: rgba(0,0,0,0.25); border-color: #f6d27a; color: #f6d27a; }
#mf-screen .mf-sticky-footer { background: linear-gradient(to bottom, transparent, #0f4a2c 25%); padding-bottom: calc(0.8rem + env(safe-area-inset-bottom)); }
#mf-screen button.secondary:not(.mf-card) { min-height: 0; padding: 0.55rem; font-size: 0.85rem; }

/* Results */
#mf-screen .mf-board-revealed { padding-top: 1.1rem; }
#mf-screen .mf-winner-line { text-align: center; color: #f6d27a; font-size: 1.05rem; }
#mf-screen .mf-winner-line.mf-split { color: #bfe3ff; }
#mf-screen .mf-rankings li {
  flex-direction: row; align-items: center; justify-content: space-between; color: rgba(255,246,224,0.75);
  padding: 0.25rem 0.5rem; border-bottom: 1px dotted rgba(246,210,122,0.3);
}
#mf-screen .mf-rankings li.mf-rank-win { color: #fff; }
#mf-screen .mf-rankings li.mf-rank-win .mf-rank-label::before { content: '★ '; color: #f6d27a; }
#mf-screen .mf-rank-label { font-size: 0.8rem; }
#mf-screen .mf-rank-cards { flex-wrap: nowrap; }
#mf-screen .mf-board-revealed > .mf-card-row:last-child { justify-content: center; }
#mf-screen .mf-card.mf-card-win { box-shadow: 0 0 0 2px #f6d27a, 0 0 10px rgba(246,210,122,0.8); }
#mf-screen .mf-card.mf-card-lose { opacity: 0.55; filter: grayscale(0.6); }
#mf-screen .mf-burn-row { position: relative; margin-top: 1.2rem; padding-top: 1rem; background: transparent; border: 2px dashed rgba(246,210,122,0.5); border-radius: 14px; }
#mf-screen .mf-burn-row .mf-card-row { justify-content: center; }
#mf-screen .mf-round-points { text-align: center; color: #f6d27a; }

/* "All players ready" banner once everyone has locked */
#mf-screen #mf-subtitle.mf-all-ready {
  align-self: center; margin: 0.35rem auto 0.2rem; padding: 0.45rem 1.4rem;
  font-size: 1.35rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1408;
  background: linear-gradient(180deg, #fff1b8 0%, #f6d27a 45%, #c9993f 100%);
  border: 3px solid #2a1408; border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 4px 0 #2a1408, 0 0 26px rgba(246,210,122,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  animation: mf-ready-pop 0.5s var(--ease-bounce) both;
}
@keyframes mf-ready-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Start screen and match-over standings, restyled to sit on the felt. */
#mf-screen .mf-scores:empty { display: none; }
#mf-screen #mf-ready-panel { display: flex; flex-direction: column; gap: 0.7rem; text-align: center; }
#mf-screen #mf-player-list li,
#mf-screen .ts-standings li {
  justify-content: center; background: rgba(0,0,0,0.22); border: 1px solid rgba(246,210,122,0.4);
  border-radius: 12px; color: #fff6e0; box-shadow: none;
}
#mf-screen .ts-champion {
  color: #f6d27a; font-size: 1.6rem; text-shadow: 0 2px 0 #0b3f25, 0 0 18px rgba(246,210,122,0.45);
}
#mf-screen .ts-standings li.ts-champion-row {
  color: #2a1408; border: 2px solid #2a1408;
  background: linear-gradient(180deg, #fff1b8 0%, #f6d27a 45%, #c9993f 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 #2a1408;
}
#mf-screen .scoreboard-heading { color: #f6d27a; text-align: center; }

/* During allocation the footer only holds Back to Lobby; let it sit at the end of the
   page instead of floating over the hand tray on short phones. */
#mf-screen:has(#mf-alloc-panel:not(.hidden)) .mf-sticky-footer {
  position: static;
  background: none;
}

/* All-In or Fold — full-bleed poker client (ClubGG-style): dark casino backdrop filling
   the whole viewport, a portrait "racetrack" green felt table in the middle, seats
   straddling the rail, and the viewer's own seat always rotated to the bottom slot by the
   client (see allInOrFold.js). Intentionally breaks from the app's warm illustrated theme
   — this screen takes over the viewport instead of sitting inside the shared panel. */
#aiof-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0.5rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.3rem;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(50, 56, 66, 0.55) 0%, transparent 60%),
    #101216;
  backdrop-filter: none;
  box-shadow: none;
}

.aiof-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.aiof-topbar-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
}

.aiof-topbar-btns {
  display: flex;
  gap: 0.35rem;
}

.aiof-topbar-btn {
  width: auto;
  min-height: 0;
  padding: 0.32rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

.aiof-subtitle,
.aiof-error {
  margin: 0;
  font-size: 0.78rem;
  text-align: center;
}

.aiof-subtitle:empty,
.aiof-error:empty {
  display: none;
}

.aiof-table {
  position: relative;
  /* Grows to fill whatever vertical space is left after the top/bottom bars — no guessed
     "reserved chrome height" constant, the flex layout measures it for real. Width then
     derives from that height via aspect-ratio (auto width takes priority over the column's
     default stretch when a preferred aspect ratio is set), so the table naturally fills
     the tall phone screens it's designed for; max-width is just a safety net against
     horizontal overflow on very short/wide viewports. */
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  max-width: 100%;
  aspect-ratio: 0.72;
  align-self: center;
  margin: 0.2rem 0;
}

.aiof-table-felt {
  position: absolute;
  /* Seats straddle this rail: their centers sit just inside/outside the edge, so the
     nameplates overlap the rail like the reference clients. */
  inset: 5% 8%;
  /* Taller than wide + a huge fixed radius = a portrait racetrack (straight sides,
     semicircular ends), matching the refs rather than an egg-shaped ellipse. */
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse at center, #1d7c50 0%, #0e5637 58%, #073a24 100%);
  /* A metallic-looking rail (layered shadows, not a flat single-tone border) plus a soft
     blue/violet ambient rim glow — the ClubGG-style signature look the old flat gray
     bezel was missing. border-image is deliberately avoided here: it doesn't clip
     correctly to this shape's border-radius (a near-999px stadium) across browsers. */
  border: 10px solid #3a3f4a;
  box-shadow:
    inset 0 0 0 2px rgba(120, 130, 150, 0.5),
    inset 0 3px 3px rgba(255, 255, 255, 0.12),
    inset 0 -3px 4px rgba(0, 0, 0, 0.55),
    inset 0 0 0 5px rgba(0, 0, 0, 0.45),
    inset 0 2px 22px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.06),
    0 0 32px 8px rgba(72, 128, 255, 0.3),
    0 0 64px 20px rgba(140, 80, 230, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.6);
}

.aiof-seats,
.aiof-felt-spots {
  position: absolute;
  inset: 0;
}

.aiof-felt-spots {
  pointer-events: none;
}

.aiof-table-center {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 92%;
}

.aiof-board-cards {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.14rem;
  min-height: 2.65rem;
}

/* Results / waiting-for-players line on the lower felt, mirroring the refs' centered
   info text block between the board and the bottom seat. */
.aiof-center-msg {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(220, 240, 228, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.aiof-blinds-info {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: rgba(210, 235, 220, 0.5);
}

/* A seat is a loose stack (fan above, avatar, plaque below) with no box of its own —
   the dark nameplate plaque is the visual anchor, like the refs. */
.aiof-seat {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 5.4rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Six points around the racetrack, slot 0 = bottom (the viewer's seat once rotated).
   translate(-50%, -50%) centers the seat on the point so it straddles the rail. */
.aiof-seat-slot-0 { top: 90%; left: 50%; transform: translate(-50%, -50%); }
.aiof-seat-slot-1 { top: 69%; left: 84%; transform: translate(-50%, -50%); }
.aiof-seat-slot-2 { top: 31%; left: 84%; transform: translate(-50%, -50%); }
.aiof-seat-slot-3 { top: 8%;  left: 50%; transform: translate(-50%, -50%); }
.aiof-seat-slot-4 { top: 31%; left: 16%; transform: translate(-50%, -50%); }
.aiof-seat-slot-5 { top: 69%; left: 16%; transform: translate(-50%, -50%); }

/* Empty seat: a dashed glowing ring inviting a tap — sized close to an occupied seat's
   avatar+plaque footprint so the table doesn't visibly reflow when someone sits down. */
.aiof-seat-open {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 2px dashed rgba(130, 175, 255, 0.6);
  background: rgba(12, 16, 24, 0.68);
  color: rgba(215, 228, 255, 0.9);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 14px 2px rgba(90, 145, 255, 0.22);
  transition: transform 0.15s var(--ease-bounce), background 0.15s var(--ease);
  animation: aiof-openseat-pulse 2.6s ease-in-out infinite;
}

@keyframes aiof-openseat-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 14px 2px rgba(90, 145, 255, 0.22); }
  50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 20px 6px rgba(90, 145, 255, 0.5); }
}

button.aiof-seat-open:hover {
  background: rgba(30, 40, 55, 0.85);
  transform: translate(-50%, calc(-50% - 2px));
}

.aiof-seat-sitting-out {
  opacity: 0.55;
}

.aiof-seat-folded {
  opacity: 0.5;
}

.aiof-seat-disabled {
  opacity: 0.35;
  animation: none;
}

/* Avatar circle: no real profile pictures, so each seat gets a flat initial-letter disc,
   tinted by its fixed original seat index (see AIOF_AVATAR_TONES in allInOrFold.js) so a
   given physical seat reads consistently across every viewer's rotated layout. It overlaps
   the top of the nameplate plaque below it, like the reference clients. The win/loss
   (or live equity) badge overlaps its top-left corner — a small neutral plaque with
   colored text, matching the refs' number-badge-on-avatar layout. */
.aiof-seat-avatar {
  position: relative;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: -0.55rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.15s var(--ease);
}

/* Active-turn ring on the avatar itself, mirroring the plaque's pulse — the refs
   highlight the whole seat, not just the nameplate, when it's someone's move. */
.aiof-seat-turn .aiof-seat-avatar {
  border-color: #ffcb47;
  box-shadow: 0 0 0 3px #ffcb47, 0 0 16px 4px rgba(255, 203, 71, 0.6);
}

.aiof-seat-avatar-tone0 { background: linear-gradient(160deg, #5b7fd6 0%, #2f4d99 100%); }
.aiof-seat-avatar-tone1 { background: linear-gradient(160deg, #d67f5b 0%, #99502f 100%); }
.aiof-seat-avatar-tone2 { background: linear-gradient(160deg, #5bd6a6 0%, #2f9970 100%); }
.aiof-seat-avatar-tone3 { background: linear-gradient(160deg, #c15bd6 0%, #7c2f99 100%); }
.aiof-seat-avatar-tone4 { background: linear-gradient(160deg, #d6c05b 0%, #99852f 100%); }
.aiof-seat-avatar-tone5 { background: linear-gradient(160deg, #5bb8d6 0%, #2f7699 100%); }

.aiof-seat-net-badge {
  position: absolute;
  z-index: 3;
  top: -0.35rem;
  left: -0.5rem;
  padding: 0.02rem 0.28rem;
  border-radius: 5px;
  font-size: 0.56rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #1a1c20;
  border: 2px solid #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.aiof-seat-net-badge-positive { color: #3ddc84; }
.aiof-seat-net-badge-negative { color: #ff5c5c; }
.aiof-seat-net-badge-even { color: #cfd3da; }

/* Card fan anchored above the seat, peeking out from behind the avatar/plaque: a 6-card
   face-down fan while an opponent's cards are hidden, swapped for an overlapping face-up
   fan (rank+suit corners visible) at showdown. The viewer's own seat gets a larger
   face-up fan of the same structure. */
.aiof-seat-fan {
  position: absolute;
  bottom: calc(100% - 0.65rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 1;
}

.aiof-cardback {
  flex: none;
  width: 1.15rem;
  height: 1.62rem;
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 6px),
    #a7adb8;
  border: 1.5px solid #f2f3f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.aiof-cardback:not(:first-child) {
  margin-left: -0.72rem;
}

/* The dealer button: a small yellow "D" disc on the plaque's corner — not on the felt
   near the fan (a felt position tuned for small opponent fans collided with the viewer's
   own wide 6-card fan at the bottom seat, hiding their first hole card) and not a ring
   around the whole seat. The plaque sits below every seat's fan, so this can never
   overlap cards. */
.aiof-seat-dealer-disc {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  z-index: 2;
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a 0%, #ffcb47 60%, #e0a92c 100%);
  color: #1a1a1a;
  font-size: 0.6rem;
  font-weight: 800;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.aiof-seat-turn .aiof-seat-plaque {
  border-color: #ffcb47;
  box-shadow: 0 0 0 2px #ffcb47, 0 0 14px 3px rgba(255, 203, 71, 0.55);
  animation: aiof-turn-pulse 1.1s ease-in-out infinite;
}

.aiof-seat-turn .aiof-seat-avatar {
  animation: aiof-turn-pulse-avatar 1.1s ease-in-out infinite;
}

@keyframes aiof-turn-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #ffcb47, 0 0 14px 3px rgba(255, 203, 71, 0.55); }
  50% { box-shadow: 0 0 0 2px #ffcb47, 0 0 4px 1px rgba(255, 203, 71, 0.25); }
}

@keyframes aiof-turn-pulse-avatar {
  0%, 100% { box-shadow: 0 0 0 3px #ffcb47, 0 0 16px 4px rgba(255, 203, 71, 0.6); }
  50% { box-shadow: 0 0 0 3px #ffcb47, 0 0 6px 1px rgba(255, 203, 71, 0.3); }
}

/* The nameplate: one dark rounded plaque holding name + stack, the seat's visual anchor.
   The avatar disc overlaps its top edge (negative margin above). */
.aiof-seat-plaque {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
  min-width: 4.9rem;
  max-width: 5.4rem;
  padding: 0.55rem 0.4rem 0.28rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(38, 41, 48, 0.96) 0%, rgba(16, 17, 21, 0.96) 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.aiof-seat-name {
  font-weight: 700;
  font-size: 0.68rem;
  color: #f2f3f5;
  max-width: 4.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Winner treatment during the between-hands pause: gold glow on the plaque + a floating
   "+N" amount above the seat. */
.aiof-seat-winner .aiof-seat-plaque {
  border-color: #ffcb47;
  box-shadow: 0 0 0 2px #ffcb47, 0 0 18px 5px rgba(255, 203, 71, 0.55);
}

.aiof-seat-win-amount {
  position: absolute;
  /* Above the revealed card fan (which itself peeks above the avatar), not on top of it. */
  bottom: calc(100% + 1.45rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 0.08rem 0.4rem;
  border-radius: 6px;
  background: rgba(10, 11, 14, 0.85);
  border: 1px solid rgba(255, 203, 71, 0.7);
  color: #ffd873;
  font-size: 0.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: aiof-win-float 0.6s var(--ease);
}

@keyframes aiof-win-float {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Tiered chip stack: a small tower of stacked discs whose color AND height (disc count,
   set by makeAiofChipStackEl in JS) jump at fixed value thresholds — not a literal
   denomination breakdown, just a glanceable "bigger stack = bigger + different color" cue.
   Used identically for a seat's stack and the center pot. Each disc's gradient uses wide,
   soft stops rather than a tight color/white/color ring — at ~14px real size a tight ring
   aliased into a moire/checkerboard smear instead of reading as a chip. */
.aiof-chip-stack {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1.25rem;
}

.aiof-chip-disc {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.aiof-chip-disc-tier0 {
  background: radial-gradient(ellipse at 50% 32%, #d5dae0 0%, #aeb5bf 55%, #767e8a 100%);
}
.aiof-chip-disc-tier1 {
  background: radial-gradient(ellipse at 50% 32%, #ef6a6a 0%, #d63b3b 55%, #8f2222 100%);
}
.aiof-chip-disc-tier2 {
  background: radial-gradient(ellipse at 50% 32%, #6a9bf5 0%, #2f6fed 55%, #1c469c 100%);
}
.aiof-chip-disc-tier3 {
  background: radial-gradient(ellipse at 50% 32%, #45464a 0%, #1a1a1a 55%, #050505 100%);
}
.aiof-chip-disc-tier4 {
  background: radial-gradient(ellipse at 50% 32%, #b184eb 0%, #8a4fd6 55%, #5a2f96 100%);
}

/* The center-pot chip icon reads as a standalone graphic, not a per-seat detail — sized
   up a step from the seat/bet-spot version. */
.aiof-pot .aiof-chip-stack {
  width: 1.3rem;
  height: 1.6rem;
}

.aiof-pot .aiof-chip-disc {
  width: 1.3rem;
  height: 0.5rem;
}

.aiof-seat-stack {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #5bb8ff;
}

/* Revealed hands render as a tight overlapping fan (like the refs' PLO hands): each card
   shows its top-left rank+suit index, the rest hidden under the next card. The center pip
   and bottom-right corner are dropped at this size — only the last card's would show. */
.aiof-seat-cards .aiof-card {
  width: 1.3rem;
  height: 1.85rem;
  border-radius: 4px;
}

.aiof-seat-cards .aiof-card:not(:first-child) {
  margin-left: -0.62rem;
}

.aiof-seat-cards .aiof-card-rank {
  font-size: 0.46rem;
}

.aiof-seat-cards .aiof-card-pip {
  font-size: 0.48rem;
}

.aiof-seat-cards .aiof-card-center,
.aiof-seat-cards .aiof-card-corner-br {
  display: none;
}

/* The viewer's own hand: same fan, but larger, at their bottom seat. */
.aiof-seat-self .aiof-seat-cards .aiof-card {
  width: 1.85rem;
  height: 2.6rem;
  border-radius: 5px;
}

.aiof-seat-self .aiof-seat-cards .aiof-card:not(:first-child) {
  margin-left: -0.8rem;
}

.aiof-seat-self .aiof-seat-cards .aiof-card-rank {
  font-size: 0.62rem;
}

.aiof-seat-self .aiof-seat-cards .aiof-card-pip {
  font-size: 0.66rem;
}

/* More clearance than the opponent fan (which deliberately overlaps down onto the
   plaque) — the hero's larger 6-card fan was landing right on top of the nameplate at
   the old offset, crowding the name/stack/dealer-disc. */
.aiof-seat-self .aiof-seat-fan {
  bottom: calc(100% + 0.2rem);
}

/* The 2-of-6 cards actually used in the winning hand pop up out of the fan so the gold
   outline survives the overlap. */
.aiof-card-used {
  outline: 2px solid #ffcb47;
  outline-offset: 1px;
  transform: translateY(-0.35rem);
  z-index: 1;
}

/* Per-seat posted chips (blind or shoved amount) sitting on the felt between the seat and
   the pot, amount labeled next to a small chip stack — the refs' bet markers. Positioned
   per display slot, inside #aiof-felt-spots. */
.aiof-bet-spot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  transform: translate(-50%, -50%);
  color: #ffe9b8;
  font-size: 0.62rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.aiof-spot-slot-0 { top: 72%; left: 50%; }
.aiof-spot-slot-1 { top: 63%; left: 66%; }
.aiof-spot-slot-2 { top: 37%; left: 66%; }
.aiof-spot-slot-3 { top: 22%; left: 50%; }
.aiof-spot-slot-4 { top: 37%; left: 34%; }
.aiof-spot-slot-5 { top: 63%; left: 34%; }

.aiof-seat-out-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.aiof-pot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.22rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 203, 71, 0.35);
  color: #ffe9b8;
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.aiof-buyin-value {
  margin: 0.2rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}

#aiof-rebuy-picker {
  width: 100%;
  max-width: 22rem;
}

#aiof-buyin-slider,
#aiof-rebuy-slider {
  width: 100%;
}

.aiof-section-label {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.aiof-card {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 6px;
  background: linear-gradient(160deg, #fffdf7 0%, #efe8d8 100%);
  color: #1a1a1a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1;
  overflow: hidden;
}

/* Community cards are still a bit smaller than hole cards so all 5 comfortably fit on one
   line inside the table's center circle even on narrow phones — .aiof-board-cards also
   sets flex-wrap: nowrap above so they can never spill onto a second line. There's a lot of
   spare width in that circle at the old 1.5rem size, so these were sized back up close to
   full hole-card size rather than staying tiny. */
.aiof-board-cards .aiof-card {
  width: 1.9rem;
  height: 2.65rem;
}

.aiof-board-cards .aiof-card-rank {
  font-size: 0.5rem;
}

.aiof-board-cards .aiof-card-pip {
  font-size: 0.55rem;
}

.aiof-board-cards .aiof-card-center {
  font-size: 0.9rem;
}

.aiof-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.aiof-card-corner-tl {
  top: 0.13rem;
  left: 0.18rem;
}

.aiof-card-corner-br {
  bottom: 0.13rem;
  right: 0.18rem;
  transform: rotate(180deg);
}

.aiof-card-rank {
  font-size: 0.56rem;
  font-weight: 800;
}

.aiof-card-pip {
  font-size: 0.6rem;
}

.aiof-card-center {
  font-size: 1.05rem;
  opacity: 0.82;
}

.aiof-card.aiof-suit-h,
.aiof-card.aiof-suit-d {
  color: #c0272b;
}

.aiof-card.aiof-suit-c,
.aiof-card.aiof-suit-s {
  color: #1a1a1a;
}

/* Fixed bottom action area: turn status + whichever of Start / Next Hand / FOLD+ALL-IN
   applies right now. Reserves its height so the table doesn't jump when buttons appear. */
.aiof-bottombar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-height: 4.6rem;
  justify-content: flex-end;
  padding-top: 0.2rem;
}

.aiof-bottombar .muted {
  margin: 0;
  font-size: 0.78rem;
}

.aiof-turn-status:empty {
  display: none;
}

/* Start / Next Hand: a gold "table action" button, distinct from the red decision pair. */
.aiof-gold-btn {
  width: 100%;
  max-width: 20rem;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, #ffe08a 0%, #ffcb47 55%, #dfa72b 100%);
  color: #241a05;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

#aiof-results-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

/* Decision buttons: the refs' rectangular red action bar pinned at the bottom — breaks
   from the app's pill/gradient button language on purpose. */
.aiof-decision-btns {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

#aiof-allin-btn,
#aiof-fold-btn {
  flex: 1;
  min-height: 3.1rem;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#aiof-allin-btn {
  background: linear-gradient(180deg, #e5484d 0%, #c53030 55%, #9b2226 100%);
}

#aiof-fold-btn {
  background: linear-gradient(180deg, #4a3234 0%, #362224 55%, #241717 100%);
  box-shadow: var(--shadow-soft);
}

/* Bottom sheets (buy-in pre-Start, rebuy on bust) slide over the table; the end-of-match
   ranking is a centered overlay. The overlay starts below the topbar so Leave Table /
   Back to Lobby stay clickable from the ranking screen. */
.aiof-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 60;
  width: min(100%, 27rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  background: #191b20;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.65);
}

.aiof-sheet .btn-row {
  width: 100%;
  max-width: 20rem;
}

#aiof-buyin-slider,
#aiof-rebuy-slider {
  width: 100%;
  max-width: 20rem;
}

.aiof-overlay {
  position: fixed;
  top: 3.2rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(8, 9, 12, 0.82);
}

.aiof-overlay-panel {
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #191b20;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.aiof-overlay-panel h2 {
  margin: 0;
}

/* ---------- Mind Meld ---------- */

.mm-question {
  background: var(--glass-bg-strong);
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

#mm-countdown {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(240, 201, 107, 0.18);
  border: 1px solid rgba(240, 201, 107, 0.45);
  color: var(--accent-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mm-answer-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

#mm-answer-input {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sb-results-table td.mm-bullseye {
  color: var(--accent-2);
  font-weight: 800;
}

#mm-revealed-target {
  text-align: center;
}

/* Bluff */

.bf-table {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  align-self: center;
  margin: 0.4rem 0;
}

/* Stadium-shaped felt with a wooden rail - taller than wide so it fills a phone screen. */
.bf-table-felt {
  position: absolute;
  inset: 13% 16%;
  border-radius: 999px;
  background: #1f5a3a;
  border: 12px solid var(--wood);
  box-shadow:
    0 0 0 3px var(--bark),
    0 6px 0 3px var(--bark),
    inset 0 0 0 2px rgba(246, 199, 104, 0.35),
    inset 0 6px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-table-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.bf-table-center-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 243, 220, 0.65);
}

.bf-table-center-count {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sun);
}

.bf-table-center-sub {
  font-size: 0.8rem;
  color: rgba(255, 243, 220, 0.8);
}

.bf-seats {
  position: absolute;
  inset: 0;
}

.bf-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 6rem;
  text-align: center;
}

/* Same look as the lobby roster icon: sticker (or emoji) on a soft rounded square. */
.bf-seat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: rgba(255, 243, 220, 0.12);
  font-family: inherit;
  box-shadow: none;
}

.bf-seat-avatar img {
  width: 3.3rem;
  height: 3.3rem;
  object-fit: contain;
}

.bf-seat-emoji {
  font-size: 1.8rem;
  line-height: 1;
}

/* Lobby's signed-in gold ring - cosmetic only here, the tap never opens the player card. */
.bf-seat-avatar.bf-seat-avatar-signedin {
  border-radius: 50%;
  animation: signedin-glow-pulse 2.2s ease-in-out infinite;
}

.bf-seat-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.15rem 0.6rem 0.15rem 0.25rem;
  border-radius: 999px;
  background: var(--wood-mid);
  border: 2px solid var(--bark);
}

.bf-seat-count {
  flex: none;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bf-seat-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bf-seat-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.bf-seat-offline .bf-seat-chip {
  border-color: rgba(255, 213, 154, 0.3);
}

.bf-seat-offline .bf-seat-name {
  color: var(--muted);
}

.bf-seat-eliminated {
  opacity: 0.4;
}

.bf-seat-eliminated .bf-seat-avatar {
  filter: grayscale(1);
  animation: none;
}

.bf-seat-tappable {
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}

.bf-seat-tappable:hover {
  transform: translateY(-2px);
}

.bf-seat-tappable:active {
  transform: translateY(0);
}

.bf-seat-highlight .bf-seat-avatar {
  animation: bf-highlight-pulse 0.5s ease-in-out infinite;
  box-shadow: 0 0 0 3px var(--rose), 0 0 16px 4px rgba(236, 139, 120, 0.45);
}

.bf-seat-highlight .bf-seat-chip {
  border-color: var(--rose);
}

.bf-seat-highlight .bf-seat-tag {
  color: var(--rose);
}

@keyframes bf-highlight-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.bf-table-felt.bf-dealing {
  animation: bf-dealing-pulse 0.6s ease-in-out infinite;
}

@keyframes bf-dealing-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.bf-hand {
  margin-bottom: 0.4rem;
}

/* Starting-count picker: a vertical scroll-snap wheel, three numbers tall, with the
   middle row (under the highlight band) being the pick. Item height must match
   BF_WHEEL_ITEM_PX in public/js/games/bluff.js. */
.bf-wheel-frame {
  position: relative;
  width: 6rem;
  height: 132px;
  margin: 0.4rem auto 0.6rem;
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.bf-wheel-frame::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  top: 44px;
  height: 44px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-sizing: border-box;
  pointer-events: none;
}

.bf-wheel-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 8, 2, 0.75) 0%, transparent 34%, transparent 66%, rgba(20, 8, 2, 0.75) 100%);
  pointer-events: none;
}

.bf-wheel {
  position: relative;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 44px 0;
  box-sizing: border-box;
  outline: none;
}

.bf-wheel::-webkit-scrollbar {
  display: none;
}

.bf-wheel-disabled {
  overflow-y: hidden;
  pointer-events: none;
}

.bf-wheel-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s;
}

.bf-wheel-item.bf-wheel-selected {
  font-size: 1.6rem;
  color: var(--text);
  opacity: 1;
}

.bf-card {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 3.95rem;
  padding: 0;
  border-radius: 7px;
  background: linear-gradient(160deg, #fffdf7 0%, #efe8d8 100%);
  color: #1a1a1a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1;
  overflow: hidden;
}

.bf-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.bf-card-corner-tl {
  top: 0.18rem;
  left: 0.24rem;
}

.bf-card-corner-br {
  bottom: 0.18rem;
  right: 0.24rem;
  transform: rotate(180deg);
}

.bf-card-rank {
  font-size: 0.76rem;
  font-weight: 800;
}

.bf-card-pip {
  font-size: 0.8rem;
}

.bf-card-center {
  font-size: 1.45rem;
  opacity: 0.82;
}

.bf-card.bf-suit-h {
  color: #c0272b;
}

.bf-card.bf-suit-d {
  color: #8b2fc9;
}

.bf-card.bf-suit-c {
  color: #1a1a1a;
}

.bf-card.bf-suit-s {
  color: #9a7300;
}

#bf-hand.bf-hand {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.5rem;
  min-height: 4.95rem;
}

.bf-spectator-hands {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bf-spectator-row .bf-hand {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.5rem;
  min-height: 4.95rem;
  margin-bottom: 0;
}

.bf-spectator-name {
  margin: 0 0 0.2rem 0.1rem;
  font-weight: 700;
  font-size: 0.85rem;
}

#bf-table-hint {
  margin: 0.1rem 0 0.5rem;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- In-app confirm dialog (shared/confirmDialog.js) ---------- */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 6, 2, 0.62);
  backdrop-filter: blur(3px);
  animation: confirm-fade-in 0.18s var(--ease);
}

.confirm-panel {
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.25rem 1.25rem;
  background: var(--plank);
  border: 3px solid var(--bark);
  border-radius: 24px;
  box-shadow: inset 0 0 0 2px rgba(255, 213, 154, 0.16), var(--shadow-lift);
  text-align: center;
  animation: screen-in 0.3s var(--ease-bounce);
}

.confirm-title {
  margin: 0;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.confirm-message {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.confirm-panel .btn-row button {
  min-width: 0;
}

button.confirm-danger {
  --accent: var(--danger);
}

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

/* ---------- Bluff: "are the called cards there?" check ---------- */
.bf-check-result {
  text-align: center;
  padding: 0.8rem 1rem;
  border-radius: 20px;
  border: 3px solid var(--bark);
  background: var(--glass-bg);
  box-shadow: 0 4px 0 var(--bark);
}

.bf-check-label {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

.bf-check-countdown {
  margin: 0.2rem 0 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
}

.bf-check-result.bf-check-present {
  background: linear-gradient(180deg, #b6e08f 0%, var(--leaf) 100%);
  color: var(--accent-text);
}

.bf-check-result.bf-check-absent {
  background: linear-gradient(180deg, #f6a99b 0%, var(--rose) 100%);
  color: var(--accent-text);
}

.bf-check-result.bf-check-present .bf-check-countdown,
.bf-check-result.bf-check-absent .bf-check-countdown {
  font-size: 2rem;
}

.bf-check-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.bf-chip-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  font-weight: 700;
  border: 2px solid var(--glass-border);
  border-radius: 10px;
}

.bf-chip-static.bf-chip-present {
  background: linear-gradient(180deg, #b6e08f 0%, var(--leaf) 100%);
  color: var(--accent-text);
  border-color: var(--leaf);
}

/* Darker/more saturated than .bf-check-result.bf-check-absent's background so a missing
   chip still pops even inside the pink "Not there!" box. */
.bf-chip-static.bf-chip-missing {
  background: linear-gradient(180deg, #d94f3f 0%, #a8291c 100%);
  color: #fff;
  border-color: #7a1810;
}

.bf-check-strongest {
  margin: 0.5rem 0 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.bf-check-builder {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Bluff: host's "Edit card counts" mid-match correction tool. */
.bf-edit-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bf-edit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bf-edit-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  padding: 0.4rem 0.6rem;
}

.bf-edit-name {
  flex: 1;
  font-weight: 600;
}

.bf-edit-count {
  min-width: 2ch;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bf-edit-step-btn {
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
}

.bf-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 0.4rem;
}

.bf-check-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 44px;
  align-items: center;
}

.bf-check-picked .bf-chip {
  width: auto;
  min-width: 48px;
}

.bf-chip {
  min-height: 44px;
  padding: 0.4rem 0.3rem;
  font-size: 0.95rem;
}

/* ---------- Bluff: full-screen check reveal (bfRevealOpen/bfRevealResolve in bluff.js) ---------- */
.bf-reveal {
  --bf-beat: 3;
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 42%, rgba(42, 20, 8, 0.82) 0%, rgba(10, 4, 1, 0.96) 70%);
  backdrop-filter: blur(4px);
  overflow: hidden;
  animation: confirm-fade-in 0.2s var(--ease);
  transition: background 0.4s var(--ease);
}

.bf-reveal.hidden {
  display: none;
}

.bf-reveal.bf-reveal-present {
  background: radial-gradient(ellipse at 50% 42%, rgba(60, 110, 30, 0.9) 0%, rgba(8, 22, 4, 0.97) 72%);
}

.bf-reveal.bf-reveal-absent {
  background: radial-gradient(ellipse at 50% 42%, rgba(140, 30, 20, 0.9) 0%, rgba(26, 4, 2, 0.97) 72%);
}

/* A spotlight that throbs faster as the countdown runs down. */
.bf-reveal-spot {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 34rem;
  height: 34rem;
  margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 199, 104, 0.28) 0%, transparent 62%);
  pointer-events: none;
  animation: bf-spot-throb calc(0.25s + var(--bf-beat) * 0.22s) ease-in-out infinite;
}

.bf-reveal-done .bf-reveal-spot {
  animation: none;
  opacity: 0;
}

@keyframes bf-spot-throb {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.12); opacity: 1; }
}

.bf-reveal-stage {
  position: relative;
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  color: var(--cream);
  animation: screen-in 0.35s var(--ease-bounce);
}

.bf-reveal-kicker {
  margin: 0;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sun);
  text-shadow: 0 4px 0 var(--bark), 0 0 24px rgba(246, 199, 104, 0.5);
  animation: bf-slam 0.5s var(--ease-bounce) both;
}

.bf-reveal-question {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 243, 220, 0.75);
}

.bf-reveal-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.6rem 0 0.2rem;
  perspective: 900px;
}

.bf-rc {
  width: 3.6rem;
  height: 5rem;
  animation: bf-rc-deal 0.4s var(--ease-bounce) both;
}

.bf-reveal-cards-many .bf-rc {
  width: 2.7rem;
  height: 3.8rem;
}

.bf-rc:nth-child(2) { animation-delay: 0.06s; }
.bf-rc:nth-child(3) { animation-delay: 0.12s; }
.bf-rc:nth-child(4) { animation-delay: 0.18s; }
.bf-rc:nth-child(5) { animation-delay: 0.24s; }
.bf-rc:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes bf-rc-deal {
  from { transform: translateY(-60vh) rotate(-25deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.bf-rc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-bounce);
}

/* Face-down cards tremble while everyone waits... harder on the last beat. */
.bf-reveal:not(.bf-reveal-done) .bf-rc:not(.bf-rc-flipped) .bf-rc-inner {
  animation: bf-rc-tremble calc(0.12s + var(--bf-beat) * 0.08s) ease-in-out infinite;
}

@keyframes bf-rc-tremble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg) translateY(-2px); }
}

.bf-rc-flipped .bf-rc-inner {
  transform: rotateY(180deg) scale(1.08);
}

.bf-rc-face {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}

.bf-rc-back {
  border: 3px solid var(--cream);
  background:
    repeating-linear-gradient(45deg, rgba(255, 243, 220, 0.18) 0 4px, transparent 4px 10px),
    repeating-linear-gradient(-45deg, rgba(255, 243, 220, 0.18) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #b8342a 0%, #7d1c14 100%);
}

.bf-rc-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background: linear-gradient(160deg, #fffdf7 0%, #efe8d8 100%);
  color: #1a1a1a;
  border: 3px solid transparent;
}

.bf-rc-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.bf-reveal-cards-many .bf-rc-rank {
  font-size: 1.25rem;
}

.bf-rc-mark {
  font-size: 1rem;
  font-weight: 800;
}

.bf-rc-present .bf-rc-front {
  border-color: var(--leaf);
  box-shadow: 0 0 0 2px var(--leaf), 0 0 22px 4px rgba(140, 191, 99, 0.75);
}

.bf-rc-present .bf-rc-mark {
  color: #3f7d1d;
}

.bf-rc-missing .bf-rc-front {
  border-color: #d94f3f;
  background: linear-gradient(160deg, #ffe3de 0%, #f4b3a8 100%);
  box-shadow: 0 0 0 2px #d94f3f, 0 0 22px 4px rgba(217, 79, 63, 0.75);
}

.bf-rc-missing .bf-rc-mark {
  color: #a8291c;
}

.bf-reveal-count {
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-reveal-done .bf-reveal-count {
  display: none;
}

.bf-reveal-num {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 6px 0 var(--bark), 0 0 40px rgba(246, 199, 104, 0.7);
  animation: bf-num-pop 0.9s var(--ease) both;
}

@keyframes bf-num-pop {
  0% { transform: scale(2.4); opacity: 0; }
  25% { transform: scale(0.92); opacity: 1; }
  40% { transform: scale(1.04); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.35; }
}

.bf-reveal-verdict {
  margin: 0.4rem 0 0;
  min-height: 0;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.bf-reveal-verdict:empty {
  display: none;
}

.bf-reveal-present .bf-reveal-verdict {
  color: #c9f29f;
  text-shadow: 0 5px 0 #1f4a0c, 0 0 30px rgba(140, 191, 99, 0.9);
  animation: bf-slam 0.55s var(--ease-bounce) both;
}

.bf-reveal-absent .bf-reveal-verdict {
  color: #ffb3a6;
  text-shadow: 0 5px 0 #4a0c06, 0 0 30px rgba(217, 79, 63, 0.9);
  animation: bf-slam 0.55s var(--ease-bounce) both;
}

@keyframes bf-slam {
  0% { transform: scale(3) rotate(-8deg); opacity: 0; }
  60% { transform: scale(0.92) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.bf-reveal-strongest {
  margin: 0;
  font-weight: 600;
  color: rgba(255, 243, 220, 0.85);
  animation: confirm-fade-in 0.4s var(--ease) 0.3s both;
}

.bf-reveal-strongest:empty {
  display: none;
}

.bf-reveal-close {
  margin-top: 0.6rem;
  animation: confirm-fade-in 0.4s var(--ease) 0.5s both;
}

.bf-reveal-shake {
  animation: bf-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes bf-shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(6px); }
  30%, 50%, 70% { transform: translateX(-12px) rotate(-1deg); }
  40%, 60% { transform: translateX(12px) rotate(1deg); }
}

.bf-reveal-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bf-confetti-bit {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  opacity: 0;
  animation-name: bf-confetti-fall;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1);
  animation-fill-mode: forwards;
}

@keyframes bf-confetti-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-reveal-num {
    animation: none;
  }
}

/* ---------- Bluff: tokens & betting (plans/betting-implementation-plan.md) ---------- */
.bf-bet-balance {
  display: inline-block;
  margin: 0 auto;
  padding: 0.3rem 0.8rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
}

.bf-bet-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
}

.bf-bet-section .mf-section-heading,
.bf-side-sub {
  margin: 0;
}

.bf-side-sub {
  font-size: 0.88rem;
}

.bf-side-label {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bf-side-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bf-side-options .bf-side-option {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
}

/* Name/target choices - same pill as the odds board's stake chips, sized to the text. */
.bf-side-option,
.bf-odds-stake {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--wood-mid);
  color: var(--text);
  border: 2px solid var(--glass-border);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-side-option.selected,
.bf-odds-stake.selected {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--accent-text);
}

.bf-side-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
}

#bf-bet-propose-btn {
  margin-top: 0.4rem;
}

.bf-bet-section > .error:empty,
.bf-bet-section > .bf-bet-list:empty {
  display: none;
}

.bf-bet-incoming,
.bf-bet-mine-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bf-bet-offer,
.bf-bet-proposal,
.bf-bet-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  border-radius: 14px;
  font-size: 0.92rem;
}

.bf-bet-offer p,
.bf-bet-proposal p,
.bf-bet-list li p {
  margin: 0;
}

.bf-bet-offer button {
  min-height: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

.bf-bet-composer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bf-bet-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bf-bet-list .bf-bet-won {
  color: var(--success);
  font-weight: 700;
}

.bf-bet-list .bf-bet-lost {
  color: var(--danger);
}

.bf-bet-others {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--glass-bg);
  border: 2px dashed var(--glass-border);
  border-radius: 14px;
  font-size: 0.88rem;
}

.bf-bet-others p {
  margin: 0;
}

/* Side-bet offers popping in from the top (showOfferToast in bluff.js). */
.bet-offer-toasts {
  position: fixed;
  top: calc(0.6rem + env(safe-area-inset-top, 0px));
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.bet-offer-toast {
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.6rem 0.8rem 0.7rem;
  background: var(--cream);
  color: var(--accent-text);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--bark), 0 12px 24px rgba(20, 8, 2, 0.45);
  pointer-events: auto;
  overflow: hidden;
  animation: bet-offer-in 0.35s var(--ease-bounce);
}

.bet-offer-toast-out {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.2s, transform 0.2s;
}

@keyframes bet-offer-in {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: none; }
}

.bet-offer-avatar {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wood-light);
  border: 2px solid var(--orange);
  font-size: 1.2rem;
}

.bet-offer-body {
  flex: 1;
  min-width: 0;
}

.bet-offer-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

.bet-offer-error {
  margin: 0;
  font-size: 0.8rem;
  color: #b3261e;
}

.bet-offer-error:empty {
  display: none;
}

.bet-offer-take {
  flex: none;
  width: auto;
  min-height: 0;
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
}

.bet-offer-close {
  flex: none;
  width: auto;
  min-height: 0;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--accent-text);
  font-size: 1.3rem;
  line-height: 1;
}

.bet-offer-timer {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.3rem;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
  transform-origin: left center;
  animation: bet-offer-timer var(--offer-ms, 9s) linear forwards;
}

@keyframes bet-offer-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bet-offer-toast,
  .token-pill-up,
  .token-pill-down {
    animation: none;
  }
}

/* Odds board: match-winner bets, one row per seat (see renderOddsBoard in bluff.js). */
.bf-odds-board {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
}

.bf-odds-board .mf-section-heading {
  margin: 0 0 0.2rem;
}

.bf-odds-head,
.bf-odds-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.8rem 3rem 4rem;
  gap: 0.4rem;
  align-items: center;
}

/* No bet open to this viewer: drop the empty Back column so names get the room. */
.bf-odds-closed .bf-odds-head,
.bf-odds-closed .bf-odds-row {
  grid-template-columns: minmax(0, 1fr) 2.8rem 3rem;
}

.bf-odds-closed .bf-odds-head span:last-child,
.bf-odds-closed .bf-odds-row > span:last-child:empty {
  display: none;
}

.bf-odds-head {
  padding: 0 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bf-odds-head span:nth-child(2),
.bf-odds-head span:nth-child(3) {
  text-align: center;
}

.bf-odds-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bf-odds-row {
  padding: 0.45rem 0.6rem;
  background: var(--glass-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}

.bf-odds-row.bf-odds-open {
  border-color: var(--accent-2);
}

.bf-odds-row.bf-odds-out {
  opacity: 0.45;
}

.bf-odds-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  font-weight: 600;
}

.bf-odds-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-odds-mine {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  font-size: 0.78rem;
  color: var(--accent-2);
}

.bf-odds-cards {
  text-align: center;
  color: var(--muted);
}

.bf-odds-pays {
  text-align: center;
  font-weight: 700;
  color: var(--accent-2);
}

.bf-odds-back {
  min-height: 0;
  padding: 0.35rem 0;
  font-size: 0.88rem;
}

.bf-odds-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  margin-top: -0.15rem;
  background: var(--glass-bg);
  border-radius: 12px;
}

.bf-odds-stakes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.6rem, 1fr));
  gap: 0.4rem;
}

.bf-odds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bf-odds-summary {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.bf-odds-actions button {
  flex: 1;
  min-height: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.88rem;
}

.bf-odds-foot {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
}

/* Account page (public/account.html) - see public/js/account-page.js. */
/* Same glass panel as the row lists so text stays readable over busy backgrounds. */
.card-name,
.card-summary,
.card-guest {
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  padding: 0.5rem 0.8rem;
}

.card-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.card-email {
  margin: -0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.card-summary {
  margin: 0;
  font-weight: 600;
}

.card-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.card-guest p {
  margin: 0;
}

.card-rivals {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.card-rival {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: none;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.card-rival.open {
  border-color: var(--sun);
}

.card-rival-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.card-rival-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-rival-record {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card-rival-record.ahead { color: var(--success); }
.card-rival-record.behind { color: var(--danger); }

.card-rival-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.card-rival-games {
  display: none;
  margin: 0;
  padding: 0.3rem 0 0;
  list-style: none;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.card-rival.open .card-rival-games {
  display: block;
}

.card-rival-games li {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
}

.card-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.card-badge {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.25rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: none;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

/* Badge art: a sticker image (or emoji fallback), with a lock corner when locked. */
.card-badge-art,
.badge-toast-art {
  position: relative;
  display: grid;
  place-items: center;
  line-height: 1;
}

.card-badge-art {
  width: 3.4rem;
  height: 3.4rem;
  font-size: 2rem;
}

.card-badge-art img,
.badge-toast-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(20, 8, 2, 0.5));
}

.badge-lock {
  position: absolute;
  right: -0.2rem;
  bottom: -0.1rem;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bark);
  border: 2px solid var(--plank);
  color: var(--peach);
}

.badge-lock svg {
  width: 65%;
  height: 65%;
}

/* Locked: the sticker becomes a dark silhouette - a teaser of whose face you'll unlock. */
.card-badge.locked .card-badge-art img {
  filter: brightness(0) opacity(0.8);
}

.card-badge.locked > span:last-child {
  opacity: 0.6;
}

.card-badge.selected {
  border-color: var(--sun);
}

.card-badge-detail {
  margin: 0;
  padding: 0.5rem 0.8rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  text-align: center;
  font-weight: 600;
}

/* "Badge earned" pop-up, shown over any screen. */
.badge-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  width: min(calc(100% - 2rem), 22rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: var(--plank);
  border: 3px solid var(--sun);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  text-align: center;
  animation: badge-toast-in 0.4s var(--ease-bounce);
}

.badge-toast-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sun);
}

.rivalry-toast-text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.badge-toast.rivalry-win {
  border-color: var(--success);
}

.badge-toast.rivalry-loss {
  border-color: var(--danger);
}

.badge-toast-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.badge-toast-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.badge-toast-art {
  width: 5rem;
  height: 5rem;
  font-size: 3rem;
  animation: badge-pop 0.6s 0.15s var(--ease-bounce) both;
}

@keyframes badge-pop {
  from { transform: scale(0.3) rotate(-12deg); }
  to { transform: scale(1) rotate(0); }
}

.badge-toast-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

@keyframes badge-toast-in {
  from { opacity: 0; transform: translate(-50%, 1.5rem) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Deliberately low-key: a text link, not a big button, so it isn't tapped by accident. */
.card-delete-btn {
  align-self: center;
  min-height: 0;
  padding: 0.25rem 0.5rem;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
}

.google-signin-btn {
  min-height: 44px;
}

/* Account page (public/account.html, public/js/account-page.js). */
.account-title {
  margin: 0;
  text-align: center;
}

/* FIFA Ultimate Team-style rating card. Tier (bronze/silver/gold) and the brighter
   "strong gold" variant at OVR 85+ are purely visual - see
   specs/account-page-specs.md. */
.rating-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 220px;
  margin: 0 auto;
  padding: 1rem 0.8rem 1.1rem;
  border-radius: 20px;
  border: 3px solid var(--bark);
  box-shadow: var(--shadow-lift);
  background: linear-gradient(160deg, #c08a55 0%, #8a5a30 55%, #5c3a1d 100%);
}

.rating-card-silver {
  background: linear-gradient(160deg, #eef2f5 0%, #b9c2cb 55%, #868f98 100%);
}

.rating-card-gold {
  background: linear-gradient(160deg, #fff1b8 0%, #f6d27a 45%, #c9993f 100%);
}

.rating-card-gold-strong {
  background: linear-gradient(160deg, #fffbe0 0%, #ffe18a 35%, #e8b63c 65%, #a9781f 100%);
  box-shadow: var(--shadow-lift), 0 0 18px rgba(255, 216, 120, 0.55);
}

.rating-card-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
}

.rating-ovr {
  position: absolute;
  left: 0.1rem;
  top: -0.2rem;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--bark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rating-photo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.rating-name {
  margin: 0.15rem 0 0;
  font-weight: 700;
  color: var(--bark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.rating-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.2rem;
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 2px solid rgba(42, 20, 8, 0.25);
}

.rating-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rating-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bark);
  font-variant-numeric: tabular-nums;
}

.rating-stat-abbr {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bark);
  opacity: 0.75;
}

.rating-card-locked {
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background: var(--glass-bg-strong);
  border: 2px dashed var(--glass-border);
}

.rating-card-locked p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

/* Lobby click-to-view popup for another player's rating card (public/js/shared/account.js). */
.player-card-panel {
  position: relative;
  padding-top: 2.2rem;
}

.player-card-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--glass-bg-strong);
  color: var(--bark);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}

.history-table th,
.history-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  font-size: 0.85rem;
}

.history-table th {
  color: var(--muted);
  font-weight: 600;
  border-bottom: 2px solid var(--glass-border);
}

.history-table td:not(:first-child),
.history-table th:not(:first-child) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.history-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- Shared reaction row (public/js/shared/reactions.js) ---------- */

.reaction-row {
  position: fixed;
  left: 0.8rem;
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem;
  background: var(--glass-bg-strong);
  border: 2px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.reaction-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wood-mid);
  transition: transform 0.12s var(--ease);
}

.reaction-btn:active {
  transform: scale(0.88);
}

.reaction-btn:disabled {
  opacity: 0.5;
}

.reaction-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reaction-float-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
}

.reaction-float {
  position: absolute;
  bottom: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  animation: reaction-float-up 2.2s ease-out forwards;
}

.reaction-float img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.reaction-float span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@keyframes reaction-float-up {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% {
    transform: translateY(-20px) scale(1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-220px) scale(0.9);
    opacity: 0;
  }
}
}