/* ═══════════════════════════════════════════════════════════════
   RAJA · MANTRI · CHOR · SIPAHI — FINAL APPROVED DESIGN (v5)
   Source of truth: the approved all-pages mockup.
   Dark teal game world · cream parchment cards · golden 3D type ·
   wooden game table · chunky embossed buttons.
   Presentation only — every selector matches the existing HTML/JS.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

/* ---------- TOKENS ---------- */
:root {
  /* world (dark teal felt) */
  --bg-0: #082721;
  --bg-1: #0d3b33;
  --bg-2: #11493f;

  /* parchment surfaces */
  --cream: #f6ecd2;
  --cream-2: #eedfbd;
  --cream-line: #d3ba8a;
  --cream-border: #c4a76f;

  /* golden accent */
  --gold: #ffd056;
  --gold-hi: #ffe08a;
  --gold-deep: #e39a1e;
  --gold-shadow: #8a5a12;

  /* buttons */
  --teal-btn: #1e9a8a;
  --teal-btn-deep: #12695f;
  --purple: #8a53d2;
  --purple-deep: #663aa8;

  /* text */
  --white: #ffffff;
  --ink: #3b2f1b;            /* brown ink on parchment */
  --ink-soft: rgba(59, 47, 27, 0.66);
  --ink-faint: rgba(59, 47, 27, 0.42);
  --mist: #bfe0d6;           /* soft text on dark */
  --mist-faint: rgba(191, 224, 214, 0.55);

  --ok: #58c96b;
  --info: #38bdf8;
  --danger: #d9483b;

  --r-lg: 22px;
  --r-md: 15px;
  --shadow-float: 0 20px 44px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.38);
  --shadow-card: 0 14px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --ease-game: cubic-bezier(0.16, 1, 0.3, 1);

  /* responsive spacing scale */
  --space-xs: clamp(4px, 1vw, 6px);
  --space-sm: clamp(6px, 1.8vw, 10px);
  --space-md: clamp(10px, 2.8vw, 16px);
  --space-lg: clamp(14px, 3.6vw, 22px);
  --space-xl: clamp(20px, 5vw, 34px);

  /* room the scrollable content reserves for the floating bottom nav */
  --nav-clearance: calc(84px + max(14px, env(safe-area-inset-bottom)));
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: contain;
  background: var(--bg-0);
}

body.app-body {
  height: 100vh;
  height: 100dvh;
  color: var(--white);
  font-family: 'Baloo 2', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(30, 154, 138, 0.28), transparent 60%),
    radial-gradient(100% 50% at 50% 112%, rgba(255, 208, 86, 0.08), transparent 60%),
    linear-gradient(178deg, var(--bg-1) 0%, var(--bg-0) 78%);
}

.hidden { display: none !important; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ambient glow spots on the felt */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.orb-1 {
  width: 320px; height: 320px; top: -70px; left: -90px;
  background: radial-gradient(circle, rgba(30, 154, 138, 0.4), transparent 70%);
  animation: orbDrift1 16s ease-in-out infinite;
}
.orb-2 {
  width: 280px; height: 280px; bottom: -70px; right: -80px;
  background: radial-gradient(circle, rgba(255, 208, 86, 0.16), transparent 70%);
  animation: orbDrift2 20s ease-in-out infinite;
}
@keyframes orbDrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, 30px); } }
@keyframes orbDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -36px); } }

/* ---------- GOLDEN 3D TITLE (shared recipe) ---------- */
.gold-type,
.splash-title,
.home-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold-hi) 8%, var(--gold) 45%, var(--gold-deep) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 var(--gold-shadow))
    drop-shadow(0 2px 0 rgba(90, 55, 8, 0.9))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

/* ---------- APP SHELL ---------- */
.container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.box.app-shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- TOP BAR ---------- */
.top-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 18px 10px;
}

.top-bar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-bar-crown { font-size: 22px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.top-bar-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--gold-shadow), 0 3px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.top-bar-account {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold);
  border: 1.5px solid rgba(255, 208, 86, 0.35);
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 200ms ease;
}
.top-bar-account:active { transform: scale(0.9); }

.top-bar-user-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
}
.top-bar-user-dot.is-signed-in { background: var(--ok); box-shadow: 0 0 0 2px var(--bg-1); }

/* ---------- MAIN + SCREENS ---------- */
main.app-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-xs) var(--space-md) var(--nav-clearance);
}

.app-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  flex-shrink: 0;
  animation: screenIn 250ms var(--ease-game);
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen-heading {
  margin: 6px 0 0;
  font-size: clamp(21px, 6vw, 26px);
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--gold-shadow), 0 4px 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.screen-subheading {
  margin: clamp(2px, 0.8vh, 10px) 0 0;
  font-size: clamp(12.5px, 3.2vw, 15px);
  font-weight: 800;
  color: var(--mist);
  letter-spacing: 0.02em;
}

/* ---------- SPLASH ---------- */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(30, 154, 138, 0.32), transparent 60%),
    linear-gradient(178deg, var(--bg-1), var(--bg-0));
  transition: opacity 300ms ease-out, visibility 300ms ease-out;
}
.splash-screen.splash-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-crown {
  font-size: 72px;
  animation: splashBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(255, 208, 86, 0.4));
}
@keyframes splashBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
.splash-title {
  font-size: clamp(34px, 10vw, 46px);
  line-height: 1.05;
  text-align: center;
}
.splash-ribbon {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--bg-0);
  background: linear-gradient(180deg, #2aa893, #17786a);
  color: var(--white);
  padding: 6px 22px;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
}
.splash-loadbar {
  margin-top: 18px;
  width: min(230px, 70vw);
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 208, 86, 0.35);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.splash-loadfill {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 0 10px rgba(255, 208, 86, 0.6);
  animation: splashLoad 900ms ease-out forwards;
}
@keyframes splashLoad { from { width: 8%; } to { width: 92%; } }
.splash-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--gold);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- BUTTONS (chunky game-style, embossed) ---------- */
button, .btn {
  position: relative;
  overflow: hidden;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  border-radius: var(--r-md);
  padding: 12px clamp(14px, 3vw, 18px);
  min-height: 48px;
  font-size: clamp(13px, 3.4vw, 14px);
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  touch-action: manipulation;
}
button:hover { transform: translateY(-2px); filter: brightness(1.06); }
button:active { transform: translateY(1px) scale(0.97); }
button:focus-visible { outline: 3px solid rgba(255, 208, 86, 0.85); outline-offset: 2px; }
button:disabled {
  cursor: not-allowed;
  filter: saturate(0.35) brightness(0.8);
  opacity: 0.6;
  box-shadow: none !important;
  transform: none !important;
}

/* teal action button (VIEW ROLE / CREATE / JOIN / PLAY AGAIN) */
.btn-primary {
  background: linear-gradient(180deg, #27ab99 0%, var(--teal-btn) 45%, var(--teal-btn-deep) 100%);
  color: var(--white);
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  border-bottom: 4px solid rgba(0, 40, 34, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* golden CTA (START GAME / BACK TO LOBBY) */
.btn-cta, .btn-secondary {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 40%, var(--gold-deep) 100%);
  color: #4d3305;
  border: 1.5px solid rgba(90, 55, 8, 0.5);
  border-bottom: 4px solid var(--gold-shadow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 208, 86, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-outline {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1.5px solid rgba(255, 208, 86, 0.4);
  box-shadow: var(--shadow-soft);
}
.btn-ghost {
  background: rgba(0, 0, 0, 0.22);
  color: var(--mist);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
}
.btn-big { min-height: 56px; width: 100%; font-size: clamp(15px, 4vw, 16px); border-radius: 16px; }

.btn-primary:active, .btn-cta:active, .btn-secondary:active {
  border-bottom-width: 1.5px;
  transform: translateY(2px) scale(0.97);
}

.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fffdf4; color: #2f2a1d; border: 1.5px solid var(--cream-border); }
.google-icon { display: inline-flex; width: 20px; height: 20px; }
.google-icon svg { width: 100%; height: 100%; }

/* press ripple */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transform: scale(0);
  animation: rippleOut 550ms var(--ease-game);
}
@keyframes rippleOut { to { transform: scale(1); opacity: 0; } }

/* ---------- INPUTS ---------- */
.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--cream-border);
  background: #fffdf2;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  box-shadow: inset 0 2px 4px rgba(90, 60, 20, 0.12);
}
.input::placeholder { color: var(--ink-faint); font-weight: 600; }
.input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(255, 208, 86, 0.35);
}
.input-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  padding: 10px 32px 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--cream-border);
  background-color: #fffdf2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a5a12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  min-height: 44px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.input-select:hover { transform: translateY(-1px); }
.input-select:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(255, 208, 86, 0.35); }
.input-select option { background: #fffdf2; color: var(--ink); font-weight: 700; }

.lobby-settings-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 4px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
}
/* settings labels sit on parchment in offline / join sheet */
.offline-card .lobby-settings-label, .join-sheet-card .lobby-settings-label { color: var(--ink-soft); }

.hint-text { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.hint-text code { color: var(--gold-shadow); font-family: inherit; font-weight: 800; }

.section-title { margin: 0 0 6px; font-size: clamp(16px, 4.5vw, 18px); font-weight: 800; color: var(--ink); }
.result-title { margin: 0; font-size: clamp(17px, 5vw, 20px); font-weight: 800; color: var(--danger); text-align: center; letter-spacing: 0.03em; }
.result-text { margin: 0; font-size: clamp(14px, 3.8vw, 15px); color: var(--ink); text-align: center; line-height: 1.5; font-weight: 700; }

/* ---------- PARCHMENT CARD (shared surface recipe) ---------- */
.offline-card,
.game-panel,
.profile-hero,
.stat-tile,
.matches-empty,
.join-sheet-card,
.chit-card,
#tournamentOverlay .card,
.tournament-card,
.app-alert,
.timeline-content,
.rules-scorecard,
.rule-card {
  background: linear-gradient(180deg, #f9f0da 0%, var(--cream) 55%, var(--cream-2) 100%);
  border: 2px solid var(--cream-border);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

/* ═══════════════════ HOME ═══════════════════ */
.home-hero { position: relative; overflow: visible; text-align: center; padding-top: 8px; }

.home-rays {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255, 208, 86, 0.2) 8deg, transparent 20deg,
    transparent 60deg, rgba(255, 208, 86, 0.12) 68deg, transparent 80deg,
    transparent 130deg, rgba(255, 208, 86, 0.16) 138deg, transparent 150deg,
    transparent 200deg, rgba(255, 208, 86, 0.1) 208deg, transparent 220deg,
    transparent 280deg, rgba(255, 208, 86, 0.16) 288deg, transparent 300deg
  );
  animation: raysSpin 22s linear infinite;
  mask-image: radial-gradient(circle, black 20%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, black 20%, transparent 68%);
}
@keyframes raysSpin { to { transform: translateX(-50%) rotate(360deg); } }

.home-particles { position: absolute; inset: -20px 0 auto 0; height: 320px; pointer-events: none; z-index: 0; }
.home-particles span {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  box-shadow: 0 0 8px rgba(255, 208, 86, 0.8);
  animation: particleRise linear infinite;
}
.home-particles span:nth-child(1) { left: 8%;  animation-duration: 7.2s; animation-delay: 0s;   }
.home-particles span:nth-child(2) { left: 22%; animation-duration: 6.1s; animation-delay: 0.8s; width: 3px; height: 3px; }
.home-particles span:nth-child(3) { left: 38%; animation-duration: 8.4s; animation-delay: 1.6s; }
.home-particles span:nth-child(4) { left: 52%; animation-duration: 6.8s; animation-delay: 0.4s; width: 4px; height: 4px; }
.home-particles span:nth-child(5) { left: 66%; animation-duration: 7.6s; animation-delay: 2.2s; }
.home-particles span:nth-child(6) { left: 78%; animation-duration: 6.4s; animation-delay: 1.1s; width: 3px; height: 3px; }
.home-particles span:nth-child(7) { left: 90%; animation-duration: 8.0s; animation-delay: 0.2s; }
.home-particles span:nth-child(8) { left: 96%; animation-duration: 7.0s; animation-delay: 1.8s; width: 4px; height: 4px; }
@keyframes particleRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-260px) scale(1); opacity: 0; }
}

.home-hero-badge, .home-title, .home-sub { position: relative; z-index: 1; }
.home-hero-badge {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 2px;
  animation: crownFloatBig 2.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(255, 208, 86, 0.45));
}
@keyframes crownFloatBig {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  50%      { transform: translateY(-10px) rotate(4deg) scale(1.05); }
}
.home-title {
  margin: 0;
  font-size: clamp(32px, 8.6vw, 42px);
  line-height: 1.04;
}
/* ribbon tagline */
.home-sub {
  display: inline-block;
  margin: 12px auto 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--white);
  background: linear-gradient(180deg, #2aa893, #17786a);
  padding: 5px 20px;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* the three big stacked CTAs — full-width, embossed, colored like the mockup */
.home-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  grid-column: 1 / -1;
  min-height: 62px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  border-bottom: 4px solid rgba(0, 0, 0, 0.45);
  text-align: center;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 150ms ease, box-shadow 150ms ease;
  will-change: transform;
}
.home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.home-card:active { transform: translateY(1px) scale(0.98); border-bottom-width: 1.5px; }

.home-card-art { font-size: 26px; line-height: 1.1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
.home-card-title { font-size: 17px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.home-card-sub { display: none; }

/* PLAY ONLINE — teal hero */
.home-card-hero {
  background: linear-gradient(180deg, #27ab99 0%, var(--teal-btn) 45%, var(--teal-btn-deep) 100%);
  min-height: 68px;
  border-bottom-color: rgba(0, 40, 34, 0.6);
}
.home-card-hero .home-card-body { display: flex; flex-direction: column; gap: 0; }
.home-card-hero .home-card-title { font-size: 19px; }
.home-card-hero .home-card-sub { display: none; }
.home-card-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
  color: var(--gold);
}

/* SOLO vs BOT — gold */
#soloVsBotsBtn.home-card {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 40%, var(--gold-deep) 100%);
  color: #4d3305;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  border-bottom-color: var(--gold-shadow);
}
/* PASS & PLAY — purple */
#passPlayBtn.home-card {
  background: linear-gradient(180deg, #9d6ae0 0%, var(--purple) 45%, var(--purple-deep) 100%);
  border-bottom-color: #4d2a80;
}

/* mini nav cards (Rules / Account) — cream tiles, 2-up */
.home-card-mini {
  grid-column: auto;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  padding: 12px 8px;
  background: linear-gradient(180deg, #f9f0da, var(--cream-2));
  border: 2px solid var(--cream-border);
  border-bottom: 4px solid var(--cream-border);
  color: var(--ink);
  text-shadow: none;
}
.home-card-mini .home-card-art { font-size: 26px; }
.home-card-mini .home-card-title { font-size: 13px; color: var(--ink); text-transform: none; }

/* hero sheen sweep */
.home-card-hero { position: relative; overflow: hidden; }
.home-card-hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-160px) skewX(-18deg);
  animation: heroSheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroSheen {
  0%, 30%  { transform: translateX(-160px) skewX(-18deg); }
  55%      { transform: translateX(560px) skewX(-18deg); }
  100%     { transform: translateX(560px) skewX(-18deg); }
}

/* ═══════════════════ JOIN SHEET (Play Online) ═══════════════════ */
.join-sheet { position: fixed; inset: 0; z-index: 60; }
.join-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 20, 16, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.join-sheet-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px max(20px, env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: none;
  animation: sheetSlideUp 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sheetSlideUp {
  from { transform: translate(-50%, 60px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.join-sheet-grip {
  width: 44px; height: 5px;
  border-radius: 999px;
  background: rgba(90, 60, 20, 0.3);
  margin: 2px auto 4px;
}
.join-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.join-sheet-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #2aa893, #17786a);
  padding: 6px 18px;
  border-radius: 8px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.join-sheet-card .game-icon-btn { background: rgba(90, 60, 20, 0.12); color: var(--ink); border-color: var(--cream-border); }
.join-settings { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }

/* ═══════════════════ RULES — compact 2-column grid (no scroll) ═══════════════════ */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1.8vw, 10px); }

.rule-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: clamp(8px, 2.4vw, 14px) 8px;
  border-radius: var(--r-md);
  animation: ruleCardIn 420ms both var(--ease-game);
  animation-delay: var(--step-delay, 0ms);
}
@keyframes ruleCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rule-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 8vw, 40px);
  height: clamp(32px, 8vw, 40px);
  border-radius: 10px;
  font-size: clamp(16px, 4vw, 20px);
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid rgba(0, 0, 0, 0.25);
}
.rule-art-teal { background: linear-gradient(160deg, #27ab99, var(--teal-btn-deep)); }
.rule-art-gold { background: linear-gradient(160deg, var(--gold-hi), var(--gold-deep)); }
.rule-art-red  { background: linear-gradient(160deg, #e5695c, #b23327); }
.rule-title { font-size: clamp(11.5px, 3vw, 13px); font-weight: 800; color: var(--ink); line-height: 1.2; }
.rule-text { font-size: clamp(9.5px, 2.4vw, 11px); font-weight: 600; color: var(--ink-soft); line-height: 1.3; }

.rules-scorecard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-lg);
}
.rules-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(90, 60, 20, 0.1);
  border: 1px solid var(--cream-line);
  white-space: nowrap;
}
.rules-score b { color: var(--gold-shadow); }

/* ═══════════════════ ACCOUNT / PROFILE ═══════════════════ */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6vh, 12px);
  padding: clamp(10px, 2.4vh, 24px) 18px;
  border-radius: var(--r-lg);
}
.profile-avatar-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  background: conic-gradient(var(--gold-deep) 0deg 43deg, rgba(90, 60, 20, 0.18) 43deg 360deg);
  animation: ringGleam 4s linear infinite;
}
@keyframes ringGleam {
  0%, 92%, 100% { filter: brightness(1); }
  96%           { filter: brightness(1.25); }
}
.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 14vh, 92px);
  height: clamp(50px, 14vh, 92px);
  border-radius: 50%;
  font-size: clamp(24px, 7vh, 44px);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 208, 86, 0.3);
  border: 3px solid #fffdf2;
}
.profile-level-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  color: #4d3305;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold-shadow);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.auth-area { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px); width: 100%; }
.user-info { font-size: clamp(12.5px, 3.2vw, 15px); font-weight: 800; color: var(--ink); text-align: center; }
.auth-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }
.auth-buttons .btn { min-height: 44px; padding: 8px 16px; }

.xp-bar-track {
  width: 100%;
  max-width: 260px;
  height: clamp(8px, 1.6vh, 12px);
  border-radius: 999px;
  background: rgba(90, 60, 20, 0.2);
  border: 1px solid var(--cream-border);
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(90, 60, 20, 0.25);
}
.xp-bar-fill {
  height: 100%;
  width: var(--xp-pct, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
  box-shadow: 0 0 10px rgba(255, 208, 86, 0.55);
  animation: xpFillIn 900ms var(--ease-game) both;
}
@keyframes xpFillIn { from { width: 0; } }
.xp-label { font-size: clamp(10px, 2.6vw, 11.5px); font-weight: 700; color: var(--ink-soft); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--space-xs); }
.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: clamp(6px, 1.4vh, 14px) 8px;
  border-radius: var(--r-md);
}
.stat-value { font-size: clamp(16px, 4vh, 22px); font-weight: 800; color: var(--gold-shadow); }
.stat-label { font-size: clamp(9px, 2.2vw, 11px); font-weight: 700; color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; }

.achievements-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: var(--space-xs); }
.achv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: clamp(6px, 1.4vh, 12px) 4px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1.5px rgba(255, 208, 86, 0.18);
  opacity: 0.85;
  transition: transform 200ms var(--ease-game);
}
.achv:active { transform: scale(0.94); }
.achv-icon { font-size: clamp(16px, 4vh, 22px); }
.achv-name { font-size: clamp(8.5px, 2.1vw, 10px); font-weight: 700; color: var(--mist); text-align: center; }

.matches-empty {
  padding: clamp(8px, 1.8vh, 22px) 16px;
  border-radius: var(--r-lg);
  text-align: center;
  font-size: clamp(11.5px, 3vw, 13.5px);
  font-weight: 700;
  color: var(--ink-soft);
}

/* ═══════════════════ BOTTOM NAV — dark dock, golden active tab ═══════════════════ */
.bottom-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 6px;
  width: calc(100% - 32px);
  max-width: 430px;
  border-radius: 999px;
  background: rgba(5, 30, 25, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 208, 86, 0.22);
  box-shadow: var(--shadow-float);
}

.nav-tab {
  flex: 1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 4px 2px;
  box-shadow: none;
  transition: color 250ms ease, background 250ms ease, transform 250ms ease;
}
.nav-tab svg { display: block; transition: transform 250ms ease; }
.nav-tab:hover { transform: none; }

.nav-tab-active {
  color: #4d3305;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 208, 86, 0.3);
  animation: tabPop 250ms var(--ease-game);
}
.nav-tab-active svg { transform: translateY(-1px) scale(1.08); }
@keyframes tabPop { 0% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* ---------- LOG LINE ---------- */
.log-text {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  padding: 4px 8px;
  min-height: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.log-text:empty { display: none; }

/* ═══════════════════ OFFLINE PASS & PLAY ═══════════════════ */
.offline-card { gap: 12px; padding: 18px; border-radius: var(--r-lg); }
.offline-card .card-title { margin: 0; font-size: clamp(18px, 5.5vw, 22px); font-weight: 800; color: var(--ink); }
.offline-card .card-description { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.offline-name-inputs { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.lobby-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.lobby-row.lobby-settings { gap: var(--space-md); justify-content: center; }
.lobby-row.lobby-actions { justify-content: center; }
.lobby-row.lobby-actions button { flex: 1 1 calc(50% - 5px); min-width: 0; }
.offline-card .btn-ghost { background: rgba(90, 60, 20, 0.12); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cream-border); }

.offline-pass-card { text-align: center; padding: 26px 12px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.offline-pass-prompt { font-size: 17px; font-weight: 800; margin: 0; color: var(--ink); }
.offline-guess-buttons label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(90, 60, 20, 0.08);
  border: 1px solid var(--cream-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.offline-guess-buttons input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--gold-deep); }

.scores-list li {
  margin-bottom: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(90, 60, 20, 0.08);
  border: 1px solid var(--cream-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* ═══════════════════ GAME SCREEN ═══════════════════ */
#game.game-screen {
  flex: 1 1 auto;
  flex-shrink: 1;
  min-height: 0;
  gap: var(--space-sm);
  overflow: hidden;
  position: relative;
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-md)) calc(-1 * var(--nav-clearance));
  padding: var(--space-xs) var(--space-md) max(10px, env(safe-area-inset-bottom));
  /* flex stretch ignores the negative side margins when resolving auto
     width, which left the whole screen ~2×space-md short on the right and
     the circle off-center — claim the full bleed width explicitly */
  width: calc(100% + 2 * var(--space-md));
  animation: none;
}

#game:not(.hidden) ~ #log { display: none; }

/* ---------- game top bar ---------- */
.game-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  width: 100%;
}

.game-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.game-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 208, 86, 0.3);
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: transform 200ms ease;
}
.game-chip-label { font-size: 9px; letter-spacing: 0.14em; color: var(--mist-faint); }
.game-chip .value { color: var(--white); }
#roundBadge {
  animation: roundBadgeIn 420ms var(--ease-game);
  background: linear-gradient(180deg, rgba(255, 208, 86, 0.28), rgba(255, 208, 86, 0.1));
  color: var(--white);
}
@keyframes roundBadgeIn {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.game-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 208, 86, 0.3);
  color: var(--gold);
  padding: 0;
  box-shadow: var(--shadow-soft);
}

/* ---------- wooden game table ---------- */
.game-stage {
  flex: 1 1 auto;
  min-height: clamp(150px, 24vh, 230px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  container-type: size;
}

/* the game must never scroll — also kills the scrollbar that pushed the
   stage a few px off horizontal center */
main.app-main:has(#game.app-screen:not(.hidden)) { overflow-y: hidden; }

#game .round-table {
  --table-cap: 470px;
  width: min(100cqw, 100cqh, var(--table-cap));
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 235, 190, 0.16), transparent 58%),
    radial-gradient(circle, #7a5230 0%, #5c3b1d 52%, #3f2810 78%, #2c1a08 100%);
  border: 6px solid #2e1c0b;
  box-shadow:
    inset 0 0 0 6px rgba(255, 208, 86, 0.12),
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    0 24px 50px rgba(0, 0, 0, 0.55);
  position: relative;
  animation: circleBreathe 4.5s ease-in-out infinite;
}
/* the folded chit waiting at the centre of the table */
#game .round-table::after {
  content: '🂠';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-size: clamp(34px, 9cqw, 52px);
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
@keyframes circleBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.table-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: transform 250ms ease;
}

.seat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 15vw, 74px);
  height: clamp(52px, 15vw, 74px);
  border-radius: 50%;
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 900;
  color: #4d3305;
  background: linear-gradient(180deg, #fdf3da, var(--cream-2));
  border: 3px solid var(--gold-deep);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 208, 86, 0.22);
  transition: box-shadow 250ms ease, transform 150ms ease;
  animation: seatIdleBob 3.2s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}
@keyframes seatIdleBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.table-seat:not(.table-seat-empty):hover .seat-avatar { transform: translateY(-8px) scale(1.06); filter: brightness(1.05); }
.table-seat:not(.table-seat-empty):active .seat-avatar { transform: translateY(-2px) scale(0.95); }

.table-seat:nth-child(2) .seat-avatar { --bob-delay: 0.45s; }
.table-seat:nth-child(3) .seat-avatar { --bob-delay: 0.9s; }
.table-seat:nth-child(4) .seat-avatar { --bob-delay: 1.35s; }
.table-seat:nth-child(5) .seat-avatar { --bob-delay: 0.2s; }
.table-seat:nth-child(6) .seat-avatar { --bob-delay: 0.65s; }
.table-seat:nth-child(7) .seat-avatar { --bob-delay: 1.1s; }
.table-seat:nth-child(8) .seat-avatar { --bob-delay: 1.55s; }

.table-seat-empty .seat-avatar {
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 235, 190, 0.3);
  color: rgba(255, 235, 190, 0.4);
  box-shadow: none;
  animation: none;
}

.seat-pop-in .seat-avatar { animation: seatPopIn 480ms var(--ease-game); }
@keyframes seatPopIn {
  0%   { transform: scale(0.3) translateY(0); opacity: 0; }
  60%  { transform: scale(1.12) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

.table-seat-name {
  max-width: clamp(64px, 20vw, 96px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(10px, 2.8vw, 11.5px);
  font-weight: 800;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 208, 86, 0.25);
  padding: 2px 12px;
  border-radius: 999px;
}
.table-seat-you .table-seat-name { color: #4d3305; background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep)); border-color: var(--gold-shadow); }
.table-seat-empty .table-seat-name { background: transparent; border-color: transparent; color: rgba(255, 235, 190, 0.4); }

/* current player — green glow ring */
.table-seat-you .seat-avatar {
  position: relative;
  animation: seatIdleBob 3.2s ease-in-out infinite, youGlow 1.8s ease-in-out infinite;
  border-color: var(--ok);
}
.table-seat-you .seat-avatar::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(88, 201, 107, 0.5);
  animation: youPulseRing 1.8s ease-out infinite;
}
@keyframes youPulseRing {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes youGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(88, 201, 107, 0.45), 0 10px 22px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 9px rgba(88, 201, 107, 0.14), 0 0 26px rgba(88,201,107,0.6); }
}

/* rotating spotlight */
.table-seat-active .seat-avatar {
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.4), 0 0 26px rgba(56, 189, 248, 0.55);
  border-color: var(--info);
}

/* revealed Chor — red pulse */
.table-seat-chor .seat-avatar {
  animation: seatIdleBob 3.2s ease-in-out infinite, chorPulse 1s ease-in-out infinite;
  border-color: var(--danger);
}
@keyframes chorPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 72, 59, 0.5), 0 10px 22px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(217, 72, 59, 0.12), 0 0 28px rgba(217,72,59,0.7); }
}

/* role badges */
.seat-badge {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: 20px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
  animation: badgePop 250ms ease-out;
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
.seat-badge[data-role="raja"] { animation: badgePop 250ms ease-out, crownFloat 1.6s ease-in-out 250ms infinite; }
@keyframes crownFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-4px) rotate(4deg); }
}
.seat-badge[data-role="sipahi"] { animation: badgePop 250ms ease-out, shieldPulse 1.4s ease-in-out 250ms infinite; }
@keyframes shieldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* ---------- floating action card (parchment) ---------- */
#game .action-area {
  flex-shrink: 0;
  width: 100%;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.game-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-lg);
  animation: panelUp 250ms var(--ease-game);
}
@keyframes panelUp {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#resultArea.game-panel { animation: resultSheetUp 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes resultSheetUp {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* auto-hide completed / not-current steps — only one gameplay section shows.
   "Viewed my role" derives from viewMyRoleBtn's disabled state so a player
   who hasn't peeked keeps the View Role panel even after others confirm. */
#game:has(#roundArea:not(.hidden)) #panelIdle { display: none; }
#stepA:has(#viewMyRoleBtn:disabled) { display: none; }
#roundArea:has(#viewMyRoleBtn:not(:disabled)) #stepB { display: none; }
#roundArea:has(#resultArea:not(.hidden)) #stepA,
#roundArea:has(#resultArea:not(.hidden)) #stepB { display: none; }
#stepB:has(#guessArea:not(.hidden)) #claimButtons { display: none; }

.panel-text {
  margin: 0;
  font-size: clamp(13.5px, 3.8vw, 15px);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.5;
}

.panel-role-tag {
  align-self: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #4d3305;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  border: 1px solid var(--gold-shadow);
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.panel-role-tag:empty { display: none; }

#game .status-text { color: var(--ink-soft); font-size: 13px; text-align: center; }

#game #claimButtons { font-size: 14px; color: var(--ink); }
#game #claimButtons > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(90, 60, 20, 0.08);
  border: 1px solid var(--cream-line);
  margin-bottom: 8px !important;
}
#game #claimButtons button { padding: 8px 14px; min-height: 44px; border-radius: 12px; font-size: 12px; }
#game #claimButtons button,
#game #guessButtons button {
  background: linear-gradient(180deg, #27ab99, var(--teal-btn-deep));
  color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 3px solid rgba(0, 40, 34, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
#game #claimButtons button:active,
#game #guessButtons button:active {
  border-bottom-width: 1px;
  transform: translateY(2px) scale(0.97);
}
#game #guessButtons label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(90, 60, 20, 0.08);
  border: 1px solid var(--cream-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
#game #guessButtons input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--gold-deep); }

/* punishment strip inside result */
.punishment-area {
  margin-top: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(217, 72, 59, 0.12);
  border: 1px dashed rgba(217, 72, 59, 0.4);
  font-size: 13px;
  color: var(--ink);
}
.punishment-title { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--danger); }
.punishment-text { margin: 0; font-size: 13px; line-height: 1.5; }

/* ---------- score pills + reaction dock ---------- */
.game-dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

.score-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: linear-gradient(180deg, #f9f0da, var(--cream-2));
  border: 2px solid var(--cream-border);
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--shadow-soft);
}
.score-chips::-webkit-scrollbar { display: none; }
.score-chips li {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  transition: background 250ms ease;
}
.score-chips li:not(:last-child) { border-right: 1px solid var(--cream-line); }

.score-chip-leader {
  background: linear-gradient(180deg, rgba(255, 208, 86, 0.55), rgba(255, 208, 86, 0.25));
  font-weight: 900;
  color: #4d3305;
}
.score-chip-leader::before {
  content: '👑';
  margin-right: 4px;
  font-size: 11px;
  animation: leaderCrownFloat 1.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes leaderCrownFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-2px) rotate(6deg); }
}

.reaction-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 48px; height: 48px;
  min-width: 48px;
  padding: 0;
  font-size: 20px;
  box-shadow: var(--shadow-soft);
}
/* popup buttons are positioned via inline transform (JS-computed radial
   layout) — press feedback uses filter/shadow instead of transform so it
   never fights that positioning */
.reaction-btn:active { filter: brightness(0.85); }

/* ═══════════════════ FLOATING REACTIONS ═══════════════════ */
#reactionLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  overflow: hidden;
}

.reaction-float {
  position: absolute;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: reactionFloatUp 2.8s ease-out forwards;
}
.reaction-float-emoji { font-size: 34px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.reaction-float-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 208, 86, 0.3);
  padding: 1px 8px;
  border-radius: 999px;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes reactionFloatUp {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  10%  { transform: translateY(-12px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-45vh) scale(1); opacity: 0; }
}

.reaction-float-seat {
  bottom: auto;
  transform: translateX(-50%);
  animation: seatBubble 1.9s ease-out forwards;
}
.reaction-float-seat .reaction-float-emoji { font-size: 28px; }
@keyframes seatBubble {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  15%  { transform: translate(-50%, -16px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}

/* premium bounce/glow variant used for targeted-reaction landings */
.reaction-pop-premium { animation: seatBubblePremium 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.reaction-pop-premium .reaction-float-emoji {
  filter: drop-shadow(0 0 10px rgba(255, 208, 86, 0.85)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
@keyframes seatBubblePremium {
  0%   { transform: translate(-50%, 0) scale(0.3); opacity: 0; }
  20%  { transform: translate(-50%, -20px) scale(1.3); opacity: 1; }
  32%  { transform: translate(-50%, -14px) scale(0.95); }
  44%  { transform: translate(-50%, -22px) scale(1.1); }
  70%  { transform: translate(-50%, -30px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}

/* ---------- reaction targeting: tap an avatar to select it ---------- */
/* every occupied seat is tappable during gameplay */
.table-seat:not(.table-seat-empty) { cursor: pointer; }

/* selected player: gold glowing ring + slight scale + shadow. A dedicated
   bob keyframe (not the shared seatIdleBob) bakes the scale into the same
   `transform` animation — two animations can't both drive `transform`
   without one silently overriding the other. */
.table-seat-selected .seat-avatar {
  animation: selectedSeatBob 1.3s ease-in-out infinite, selectedSeatGlow 1s ease-in-out infinite;
  border-color: var(--gold-deep) !important;
}
@keyframes selectedSeatBob {
  0%, 100% { transform: translateY(0) scale(1.08); }
  50%      { transform: translateY(-5px) scale(1.14); }
}
@keyframes selectedSeatGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 208, 86, 0.55), 0 12px 26px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 208, 86, 0.18), 0 0 26px rgba(255,208,86,0.7); }
}

/* radial emoji popup — a ring of buttons around the selected seat */
#reactionPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 82;
  pointer-events: none;
}
.reaction-popup-btn {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  opacity: 0;
  transform: translate(-50%, -50%) translate(0px, 0px) scale(0.3);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 208, 86, 0.25);
}
#reactionPopup.reaction-popup-open .reaction-popup-btn { opacity: 1; }

/* ---------- flying emoji: sender seat -> target seat ---------- */
#flyingReactionLayer { position: fixed; inset: 0; pointer-events: none; z-index: 81; overflow: hidden; }
.reaction-fly {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 26px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: reactionFly 450ms cubic-bezier(0.3, 0, 0.7, 1) forwards;
}
@keyframes reactionFly {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.4; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(1.3); opacity: 1; }
}

/* ═══════════════════ CHAT — floating button + slide-up panel ═══════════════════
   The FAB sits inside .game-dock's flex row (see above), right after the
   score strip — a real layout position, not a guessed fixed pixel offset,
   so it can never overlap the action panel no matter how tall that panel's
   text or the score strip get. */
.chat-fab {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  border: 2px solid rgba(90, 55, 8, 0.4);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 208, 86, 0.28);
}
.chat-fab:active { transform: scale(0.9); }
.chat-unread-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-0);
  animation: badgePop 250ms ease-out;
}

/* dark overlay behind the sliding chat panel — tap to dismiss */
.chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;
  background: rgba(2, 20, 16, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: chatBackdropIn 220ms ease-out;
}
@keyframes chatBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.chat-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 86;
  width: 100%;
  max-width: 420px;
  height: 60vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(10, 45, 38, 0.97), rgba(6, 32, 27, 0.99));
  border: 1.5px solid rgba(255, 208, 86, 0.25);
  border-bottom: none;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: chatPanelUp 260ms cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.chat-panel.chat-panel-dragging { transition: none; }
@keyframes chatPanelUp {
  from { transform: translate(-50%, 100%); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.chat-panel-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  cursor: grab;
  touch-action: none;
  position: relative;
}
/* swipe-down drag handle affordance */
.chat-panel-head::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.chat-panel-title { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.chat-panel .game-icon-btn { margin-top: 8px; width: 36px; height: 36px; }

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px;
}

.chat-bubble-row { display: flex; align-items: flex-end; gap: 8px; max-width: 84%; }
.chat-bubble-mine { flex-direction: row-reverse; align-self: flex-end; }
.chat-bubble-theirs { align-self: flex-start; }
.chat-bubble-avatar { flex-shrink: 0; width: 28px; height: 28px; }
.chat-bubble-avatar .chip-avatar-fallback { font-size: 12px; }

.chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 14px;
  min-width: 0;
}
.chat-bubble-mine .chat-bubble {
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-deep));
  color: #4d3305;
  border-bottom-right-radius: 4px;
}
.chat-bubble-theirs .chat-bubble {
  background: linear-gradient(160deg, #f9f0da, var(--cream-2));
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-bubble-name { font-size: 10.5px; font-weight: 800; opacity: 0.75; }
.chat-bubble-text { font-size: 13.5px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.chat-bubble-time { font-size: 9px; font-weight: 700; opacity: 0.55; align-self: flex-end; }

.chat-quick-row {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 14px 4px;
}
.chat-quick-row::-webkit-scrollbar { display: none; }
.chat-quick-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  min-height: 34px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 208, 86, 0.25);
  color: var(--white);
  white-space: nowrap;
}
.chat-quick-btn:active { transform: scale(0.93); }

.chat-input-row { flex-shrink: 0; display: flex; gap: 8px; padding: 8px 14px 4px; }
.chat-input { flex: 1; min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
.chat-input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(217, 72, 59, 0.3) !important; }
.chat-send-btn { flex-shrink: 0; min-height: 44px; padding: 10px 18px; }

/* ═══════════════════ ROLE CHIT — parchment scroll ═══════════════════ */
.chit-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 20, 16, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999;
  padding: 16px;
  perspective: 900px;
}
.chit-overlay:not(.hidden) { display: flex; }

.chit-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 30px 22px 20px;
  border-radius: 14px;
  text-align: center;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 208, 86, 0.12);
}
/* rolled scroll ends, top & bottom */
.chit-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12px;
  background: linear-gradient(180deg, #cbb083, #b3945f);
  border-bottom: 1.5px solid rgba(90, 60, 20, 0.45);
}
.chit-overlay .chit-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: linear-gradient(0deg, #cbb083, #b3945f);
  border-top: 1.5px solid rgba(90, 60, 20, 0.45);
}

.chit-card-reveal { animation: chitUnfold 620ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes chitUnfold {
  0%   { transform: rotateX(-95deg) scale(0.85); opacity: 0; }
  55%  { transform: rotateX(12deg) scale(1.03); opacity: 1; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes chitPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.chit-role {
  margin: 10px 0 8px;
  font-size: clamp(36px, 11vw, 48px);
  font-weight: 800;
  color: var(--danger);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(120, 20, 10, 0.35), 0 6px 12px rgba(0, 0, 0, 0.18);
}
.chit-card-reveal .chit-role {
  animation: chitRoleScaleIn 420ms 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes chitRoleScaleIn {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.chit-score { margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.chit-caption { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 14px; }
.chit-close-btn {
  margin-top: 4px;
  margin-bottom: 8px;
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color: #4d3305;
  font-weight: 800;
  font-size: 14px;
  border: 1.5px solid rgba(90, 55, 8, 0.5);
  border-bottom: 4px solid var(--gold-shadow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}
.chit-card-reveal .chit-close-btn { animation: chitBtnRise 380ms 520ms var(--ease-game) both; }
@keyframes chitBtnRise {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════ TOURNAMENT OVERLAY ═══════════════════ */
#tournamentOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(2, 20, 16, 0.82) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#tournamentOverlay .card,
.tournament-card {
  max-width: 440px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: chitPop 300ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
#tournamentOverlay .card.winner-glow,
.tournament-card.winner-glow {
  animation: chitPop 300ms cubic-bezier(0.34, 1.4, 0.64, 1), winnerGlowPulse 1.6s ease-in-out infinite;
  border-color: var(--gold-deep) !important;
}
@keyframes winnerGlowPulse {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 26px rgba(255, 208, 86, 0.3); }
  50%      { box-shadow: var(--shadow-card), 0 0 52px rgba(255, 208, 86, 0.6); }
}
/* red champion ribbon */
#tournamentOverlay h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -4px auto 2px;
  font-size: clamp(18px, 5.4vw, 22px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-hi);
  background: linear-gradient(180deg, #e05a48, #b23327);
  padding: 8px 22px;
  border-radius: 10px;
  border: 1.5px solid rgba(90, 15, 8, 0.6);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 2px 3px rgba(90, 15, 8, 0.6);
}
#tournamentOverlay h2::before {
  content: '🏆';
  font-size: 26px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  animation: trophyBounce 2.2s ease-in-out infinite;
}
@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}
#tournamentOverlay #tournamentSubtitle { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }

.tournament-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.tournament-podium:empty { display: none; }

.podium-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  max-width: 120px;
  animation: podiumRise 480ms var(--ease-game) both;
}
.podium-step-2 { animation-delay: 80ms; }
.podium-step-1 { animation-delay: 200ms; }
.podium-step-3 { animation-delay: 0ms; }
@keyframes podiumRise {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.podium-medal { font-size: 20px; }
.podium-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 18px;
  color: #4d3305;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  border: 2px solid #fffdf2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.podium-step-1 .podium-avatar {
  width: 58px; height: 58px;
  font-size: 22px;
  animation: podiumWinnerGlow 1.8s ease-in-out infinite;
}
@keyframes podiumWinnerGlow {
  0%, 100% { box-shadow: 0 12px 26px rgba(255, 179, 0, 0.4); }
  50%      { box-shadow: 0 12px 34px rgba(255, 179, 0, 0.75); }
}
.podium-step-2 .podium-avatar { background: linear-gradient(180deg, #e8edf2, #a9b6c4); box-shadow: 0 10px 20px rgba(60, 80, 100, 0.35); }
.podium-step-3 .podium-avatar { background: linear-gradient(180deg, #e8b48a, #c47a3f); box-shadow: 0 10px 20px rgba(150, 90, 40, 0.35); }

.podium-name {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-score { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.podium-bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  margin-top: 2px;
  border: 1px solid rgba(90, 60, 20, 0.3);
  border-bottom: none;
}
.podium-step-1 .podium-bar { height: 40px; background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep)); }
.podium-step-2 .podium-bar { height: 26px; background: linear-gradient(180deg, #e8edf2, #a9b6c4); }
.podium-step-3 .podium-bar { height: 16px; background: linear-gradient(180deg, #e8b48a, #c47a3f); }

#leaderboardList {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 300px;
  text-align: left;
}
#leaderboardList li {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  padding: 8px 12px;
  margin-bottom: 5px;
  border-radius: 10px;
  background: rgba(90, 60, 20, 0.08);
  border: 1px solid var(--cream-line);
  word-break: break-word;
}
#leaderboardList li:first-child {
  background: linear-gradient(180deg, rgba(255, 208, 86, 0.5), rgba(255, 208, 86, 0.2));
  color: #4d3305;
}

.result-title-glow { animation: resultGlowPop 900ms var(--ease-game); }
@keyframes resultGlowPop {
  0%   { transform: scale(0.8); text-shadow: 0 0 0 rgba(255,179,0,0); }
  40%  { transform: scale(1.12); text-shadow: 0 0 22px rgba(255,179,0,0.7); }
  100% { transform: scale(1); text-shadow: 0 0 10px rgba(255,179,0,0.4); }
}

.score-chip-pop { animation: chipPop 420ms var(--ease-game); }
@keyframes chipPop {
  0%   { transform: scale(0.7); background: rgba(255, 208, 86, 0.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); background: transparent; }
}

/* ---------- CONFETTI / COINS ---------- */
#confettiLayer { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  animation-fill-mode: forwards;
}
.coin-piece {
  position: absolute;
  font-size: 20px;
  transform: translate(-50%, -50%);
  animation-name: coinBurst;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
@keyframes coinBurst {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--coin-x)), calc(-50% + var(--coin-y))) scale(1); opacity: 0; }
}
@keyframes confettiFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) translateX(var(--drift)) rotate(var(--spin)); opacity: 0; }
}

/* ═══════════════════ ALERT MODAL ═══════════════════ */
.app-alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 20, 16, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
}
.app-alert {
  border-radius: 18px;
  padding: 20px 22px 16px;
  min-width: 270px;
  max-width: 90vw;
  animation: chitPop 200ms ease-out;
}
.app-alert-title { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; }
.app-alert-message { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--ink); }
.app-alert-actions { text-align: right; }
.app-alert-btn {
  min-width: 90px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color: #4d3305;
  border: 1px solid var(--gold-shadow);
  border-bottom: 3px solid var(--gold-shadow);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* ═══════════════════ RESPONSIVE ═══════════════════
   Breakpoints: 320 · 480 · 768 · 1024 · 1440 + short-height + landscape. */

@media (max-width: 359px) {
  .home-card { min-height: 54px; padding: 10px 14px; }
  .home-card-hero { min-height: 60px; }
  .home-card-art { font-size: 22px; }
  .home-card-title { font-size: 15px; }
  .home-card-hero .home-card-title { font-size: 16px; }
  .home-card-mini { min-height: 76px; }
  .nav-tab { min-height: 48px; font-size: 9px; }
  .nav-tab svg { width: 19px; height: 19px; }
  .bottom-nav { width: calc(100% - 20px); }
  .reaction-btn { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
  .lobby-row.lobby-actions button { flex: 1 1 100%; }
  .rules-scorecard { padding: 8px; gap: 6px; }
  .tournament-podium { gap: 5px; }
  .podium-step-1 .podium-avatar { width: 50px; height: 50px; }
  .podium-avatar { width: 40px; height: 40px; font-size: 15px; }
}

@media (min-width: 480px) {
  .home-card-mini { min-height: 92px; }
}

@media (min-width: 768px) {
  .box.app-shell { max-width: 640px; }
  .home-grid { gap: var(--space-md); }
  .rules-grid { grid-template-columns: 1fr 1fr 1fr; }
  .seat-avatar {
    width: clamp(64px, 9vw, 84px);
    height: clamp(64px, 9vw, 84px);
    font-size: clamp(24px, 3.4vw, 32px);
  }
  #game .round-table { --table-cap: 500px; }
  #game .action-area, .game-dock { max-width: 560px; margin-left: auto; margin-right: auto; }
  .game-chips { gap: 10px; }
}

@media (min-width: 1024px) {
  .box.app-shell { max-width: 720px; }
  #game .round-table { --table-cap: 540px; }
  .home-hero { padding-top: 16px; }
  .home-card { min-height: 66px; }
  .home-card-hero { min-height: 74px; }
  .home-card-mini { min-height: 100px; }
  .profile-hero { padding: 28px 22px; }
}

@media (min-width: 1440px) {
  .box.app-shell { max-width: 760px; }
  body.app-body { font-size: 17px; }
}

@media (max-height: 620px) {
  .home-hero-badge { font-size: 40px; }
  .home-title { font-size: 28px; }
  .home-card { min-height: 54px; }
  .home-card-hero { min-height: 58px; }
  .game-stage { min-height: 120px; }
  .game-panel { padding: var(--space-sm) var(--space-md); }
  #game .action-area { max-height: 46vh; }
  .top-bar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 4px; }
}

/* short phones (iPhone SE-class through the 640-667px band): every
   non-gameplay screen needs an aggressive compaction pass to fit with
   zero scroll — 667px (iPhone SE 2/3, iPhone 8) is a very common size */
@media (max-height: 680px) {
  :root {
    --space-xs: 3px;
    --space-sm: 4px;
    --space-md: 6px;
    --nav-clearance: calc(64px + max(6px, env(safe-area-inset-bottom)));
  }
  .top-bar { padding: 4px 16px 3px; }
  .top-bar-crown { font-size: 18px; }
  .top-bar-title { font-size: 14px; }
  .top-bar-account { width: 38px; height: 38px; }
  .bottom-nav { padding: 4px; }
  .nav-tab { min-height: 42px; font-size: 8.5px; gap: 1px; }
  .nav-tab svg { width: 17px; height: 17px; }

  .home-hero { padding-top: 0; }
  .home-particles { display: none; } /* decorative only */
  .home-hero-badge { font-size: 26px; margin-bottom: 0; }
  .home-title { font-size: 19px; line-height: 1.02; }
  .home-sub { margin-top: 4px; padding: 3px 12px; font-size: 10.5px; }
  .home-grid { gap: 4px; margin-top: 4px; }
  .home-card { min-height: 40px; padding: 6px 12px; }
  .home-card-hero { min-height: 46px; }
  .home-card-art { font-size: 17px; }
  .home-card-hero .home-card-art { font-size: 22px; }
  .home-card-title { font-size: 12px; }
  .home-card-hero .home-card-title { font-size: 15px; }
  .home-card-mini { min-height: 48px; padding: 6px 4px; }

  .rules-grid { gap: 4px; }
  .rule-card { padding: 4px 4px; gap: 2px; }
  .rules-scorecard { padding: 5px; gap: 4px; }
  .rules-score { padding: 3px 8px; font-size: 10px; }

  .profile-hero { padding: 5px 14px; gap: 3px; }
  .profile-avatar-ring { padding: 3px; }
  .profile-avatar { width: 40px; height: 40px; font-size: 20px; }
  .xp-bar-track { max-width: 200px; }
  .auth-buttons .btn { min-height: 36px; padding: 6px 14px; font-size: 12px; }

  .offline-card { padding: 8px 14px; gap: 5px; }
  .offline-card .card-description { display: none; } /* secondary info collapsed */
  .offline-name-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .offline-name-inputs .input { min-height: 38px; padding: 6px 12px; font-size: 13px; }
  .lobby-row.lobby-actions .btn { min-height: 42px; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .top-bar { display: none; }
  .game-topbar { padding: 2px 0; }
  .game-stage { min-height: 90px; }
  #game .round-table { --table-cap: 78vh; }
  .seat-avatar { width: clamp(40px, 10vh, 56px); height: clamp(40px, 10vh, 56px); font-size: clamp(16px, 4vh, 22px); }
  #game .action-area { max-height: 52vh; }
  .bottom-nav { bottom: max(6px, env(safe-area-inset-bottom)); }
  .nav-tab { min-height: 44px; }
  :root { --nav-clearance: calc(64px + max(6px, env(safe-area-inset-bottom))); }
}

/* ═══════════════════ DICEBEAR AVATARS ═══════════════════
   Circular player portraits seeded by name. The <img> sits on top of a
   letter fallback: while loading (or if the API is unreachable) the
   letter shows; on load the portrait covers it. */
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  background: #fffdf2; /* solid backing so the letter never bleeds through */
  border: 2px solid #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: transform 220ms var(--ease-game);
  pointer-events: none;
}

/* player-circle seats: portrait fills the gold-ringed token */
.seat-avatar { position: relative; }
.seat-fallback { position: relative; z-index: 0; }
.seat-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.table-seat:not(.table-seat-empty):hover .seat-avatar-img { transform: scale(1.07); }

/* score chips / leaderboard rows: small inline portrait */
.chip-avatar-holder {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  overflow: hidden;
}
.chip-avatar-fallback { font-size: 10px; font-weight: 900; color: #4d3305; }
.chip-avatar, .lb-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-width: 1.5px;
}
.score-chips li:hover .chip-avatar { transform: scale(1.12); }
#leaderboardList li { display: flex; align-items: center; gap: 8px; }
#leaderboardList li .chip-avatar-holder { width: 26px; height: 26px; }
#leaderboardList li:hover .lb-avatar { transform: scale(1.12); }

/* tournament podium: portrait fills the medal circle */
.podium-avatar { position: relative; overflow: hidden; }
.podium-fallback { position: relative; z-index: 0; }
.podium-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.podium-step:hover .podium-avatar-img { transform: scale(1.07); }

/* profile hero: portrait fills the golden avatar ring */
.profile-avatar { position: relative; overflow: hidden; }
.profile-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-width: 3px;
}
.profile-avatar-ring:hover .profile-avatar-img { transform: scale(1.06); }

/* ═══════════════════ TOAST — reconnect status ═══════════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
  transform: translate(-50%, 12px);
  z-index: 999;
  max-width: min(88vw, 360px);
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(6, 32, 27, 0.94);
  border: 1.5px solid rgba(255, 208, 86, 0.3);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
}
.toast.toast-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- SCROLLBARS ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 208, 86, 0.3); border-radius: 999px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 208, 86, 0.3) transparent; }