:root {
  /* obsidian table + electric cyan/magenta - a neon-lit high-stakes room, not a picnic blanket */
  --felt-dark: #06060a;
  --felt: #0c0e18;
  --felt-light: #171a2c;
  --felt-rim: #1c3a4a;
  --gold: #22d3ee;
  --gold-soft: #7ee8fa;
  --gold-deep: #0e7490;
  --gold-bright: #a5f3fc;
  --cream: #eef1f8;
  --ink: #14141c;
  --muted: #a7b0cc;
  --muted-dim: #6b7290;
  --red-suit: #ff3d70;
  --black-suit: #17181a;
  --danger: #d61f7a;
  --danger-bright: #ff4f9a;
  --success: #1fdf9a;
  --info: #2f8fe0;
  --info-soft: #93d3ff;
  --amethyst: #9d3bf5;
  --amethyst-soft: #d9baff;
  --panel-bg: rgba(15, 17, 28, 0.55);
  --panel-bg-strong: rgba(20, 22, 36, 0.72);
  --panel-border: rgba(34, 211, 238, 0.2);
  --shadow-lg: 0 24px 54px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 22px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.25);
  --glow-gold: 0 0 0 3px rgba(34, 211, 238, 0.9), 0 0 22px rgba(34, 211, 238, 0.4);
  --glow-red: 0 0 0 3px rgba(214, 31, 122, 0.9), 0 0 22px rgba(214, 31, 122, 0.45);
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 20px;
  --radius-sm: 14px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 22px;
  --space-5: 30px;
  font-size: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  color: var(--cream);
  background:
    radial-gradient(circle at 20% -10%, #0d2233 0%, transparent 55%),
    radial-gradient(circle at 100% 10%, #1a0d26 0%, transparent 45%),
    radial-gradient(ellipse at 50% 105%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(180deg, var(--felt) 0%, var(--felt-dark) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

button {
  font-family: inherit;
}

/* Interactive controls: no accidental text selection, no iOS long-press
   callout menu, and skip the old 300ms tap delay everywhere. */
button, .card, .pile, .icon-btn, .link-btn, .back-btn {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--cream);
}

/* signature move: animated gradient-fill text, the same cyan -> violet ->
   magenta sweep used on the portfolio, so both feel like one identity */
.gradient-text {
  background: linear-gradient(100deg, var(--gold) 0%, var(--amethyst) 45%, var(--danger-bright) 75%, var(--gold) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.35));
  font-style: italic;
  animation: gradientSweep 7s ease-in-out infinite;
}

@keyframes gradientSweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}

p { margin: 0 0 10px; color: var(--muted); }

.hidden { display: none !important; }

/* ---------- screens ---------- */

.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
  animation: screenIn 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}
.screen.active { display: flex; flex-direction: column; align-items: center; }
/* Screens with a fixed bottom-bar need clearance so scrolled content
   never ends up hidden underneath it. */
.screen.has-bottom-bar { padding-bottom: 130px; }

/* Primary call-to-action, pinned to the thumb-reachable zone at the
   bottom of the viewport instead of wherever the content happens to end. */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--felt-dark) 22%);
}
.bottom-bar .action-bar { width: 100%; max-width: 480px; margin: 0; padding: 0; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: none;
  border-radius: 999px;
  padding: 15px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 0.15s ease, opacity 0.12s ease;
  touch-action: manipulation;
  min-height: 48px;
}
.btn::before {
  /* click ripple - scales from center on :active, no JS needed */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.45s ease, opacity 0.45s ease;
  z-index: -1;
}
.btn:active::before { opacity: 1; transform: scale(1.4); transition: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #052024;
  box-shadow: 0 8px 22px rgba(34, 211, 238, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(14, 116, 144, 0.4);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(34, 211, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.btn-ghost {
  background: var(--panel-bg-strong);
  color: var(--cream);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: rgba(34, 211, 238, 0.45); }
.btn-lg { width: 100%; max-width: 360px; padding: 17px 24px; font-size: 1.08rem; }
.btn-danger { background: var(--danger); color: white; }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; border-radius: 10px; min-height: 38px; }

.link-btn {
  background: none;
  border: none;
  color: var(--gold-soft);
  text-decoration: underline;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px;
  transition: color 0.15s ease;
}
.link-btn:hover { color: var(--gold-bright); }

.icon-btn {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--cream);
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.icon-btn:active { transform: scale(0.92); }

.back-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 10px 12px 10px 4px;
  margin: -10px 0 -6px -4px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
}

/* ---------- landing ---------- */

.landing-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  gap: 26px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ambient-suits {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.suit-drift {
  position: absolute;
  bottom: -12%;
  font-size: 2.6rem;
  color: rgba(34, 211, 238, 0.14);
  animation: suitDrift linear infinite;
  filter: blur(0.2px);
}
.suit-drift.s1 { left: 6%;  font-size: 3.4rem; animation-duration: 22s; animation-delay: -2s; }
.suit-drift.s2 { left: 18%; font-size: 2.2rem; animation-duration: 17s; animation-delay: -9s; color: rgba(255, 61, 112, 0.13); }
.suit-drift.s3 { left: 32%; font-size: 2.8rem; animation-duration: 26s; animation-delay: -4s; color: rgba(255, 61, 112, 0.12); }
.suit-drift.s4 { left: 50%; font-size: 2.1rem; animation-duration: 19s; animation-delay: -13s; }
.suit-drift.s5 { left: 64%; font-size: 3rem;   animation-duration: 24s; animation-delay: -7s; color: rgba(255, 61, 112, 0.14); }
.suit-drift.s6 { left: 78%; font-size: 2.4rem; animation-duration: 20s; animation-delay: -1s; }
.suit-drift.s7 { left: 88%; font-size: 2.6rem; animation-duration: 28s; animation-delay: -15s; color: rgba(255, 61, 112, 0.1); }
.suit-drift.s8 { left: 96%; font-size: 1.9rem; animation-duration: 16s; animation-delay: -5s; }
@keyframes suitDrift {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(-124vh) rotate(24deg); opacity: 0; }
}

.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brand-mark {
  width: 84px; height: 84px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: #052024;
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.4);
  border: 1px solid rgba(14, 116, 144, 0.5);
  position: relative;
  overflow: hidden;
}
.brand-mark span { position: relative; z-index: 1; }
.brand-mark::after {
  /* slow diagonal sheen sweep across the mark */
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: rotate(20deg);
  animation: brandSheen 3.6s ease-in-out infinite;
}
@keyframes brandSheen {
  0%, 30% { left: -60%; }
  70%, 100% { left: 140%; }
}
.brand h1 { font-size: 4.2rem; letter-spacing: -0.01em; margin-top: 6px; }
.tagline { color: var(--muted); font-size: 1rem; }
.landing-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.hint { font-size: 0.82rem; color: var(--muted-dim); }
.error-text { font-size: 0.85rem; color: var(--danger-bright); min-height: 1.2em; }

/* ---------- entry / card panel ---------- */

.entry-panel { margin: auto; width: 100%; max-width: 380px; }

.card-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 460px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.panel-title { font-weight: 600; color: var(--gold-soft); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; }
.field span { font-size: 0.85rem; color: var(--muted); }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-inline span { font-size: 0.9rem; color: var(--muted); }

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.avatar-option {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1.5px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.avatar-option:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.5);
}

.avatar-option.selected {
  background: rgba(34, 211, 238, 0.16);
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
  transform: scale(1.06);
}

@media (max-width: 380px) {
  .avatar-picker {
    grid-template-columns: repeat(5, 1fr);
  }
}

input[type="text"], input[type="number"] {
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--cream);
  font-size: 1.1rem;
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="number"] { width: 90px; text-align: center; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }

/* ---------- lobby ---------- */

.lobby-wrap { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lobby-header { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-dim); margin: 0; }
.room-code { font-size: 3.2rem; letter-spacing: 0.14em; color: var(--gold); margin: 0; text-shadow: 0 0 24px rgba(34, 211, 238, 0.35); }

.address-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.address-list code {
  background: rgba(0,0,0,0.3);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--gold-soft);
  display: block;
}

.player-list, .score-list, .log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.player-list li, .score-list li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.22);
  border-radius: 14px;
  padding: 12px 14px;
  transition: background 0.15s ease;
}
.dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.35);
}
.player-name { flex: 1; font-weight: 600; }
.player-tag { font-size: 0.72rem; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.offline-tag { color: var(--danger-bright); font-size: 0.75rem; }

/* ---------- peek / grids ---------- */

.peek-wrap { max-width: 420px; margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; justify-items: center; }
.grid-self { max-width: 360px; width: 100%; margin: 0 auto; }

.card {
  width: 68px;
  height: 96px;
  border-radius: 12px;
  position: relative;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 0.18s ease;
  perspective: 500px;
}
.card.small { width: 46px; height: 64px; border-radius: 9px; }
.card.tappable { cursor: pointer; }
.card.tappable:active { transform: scale(0.94); }
.card.tappable:not(.selectable):hover {
  transform: perspective(500px) rotateX(8deg) translateY(-4px);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card-inner {
  width: 100%; height: 100%;
  border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.5s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style: preserve-3d;
  position: relative;
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.card-back, .card-front {
  position: absolute; inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}

/* Art-deco medallion card back instead of a plain diagonal hatch. */
.card-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.22) 0%, transparent 38%),
    repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(34, 211, 238, 0.13) 6px, rgba(34, 211, 238, 0.13) 7px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(34, 211, 238, 0.13) 6px, rgba(34, 211, 238, 0.13) 7px),
    linear-gradient(160deg, #1e1030, #120a1e);
  border: 2px solid rgba(34, 211, 238, 0.55);
  overflow: hidden;
}
.card-back::before {
  content: '';
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(34, 211, 238, 0.12);
}
.card-back::after {
  content: 'K';
  color: rgba(165, 243, 252, 0.92);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.5rem;
  position: relative;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}
.card-front {
  background: linear-gradient(165deg, #fbfcff 0%, var(--cream) 55%, #e2e7f2 100%);
  color: var(--ink);
  transform: rotateY(180deg);
  border: 2px solid rgba(0,0,0,0.08);
  font-weight: 700;
  overflow: hidden;
}
.card-front::before {
  /* subtle glossy highlight so face-up cards read as physical objects */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.pip { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 1; }
.pip-tl { top: 6px; left: 6px; }
.pip-br { bottom: 6px; right: 6px; transform: rotate(180deg); }
.pip-rank { font-size: 0.72rem; font-weight: 800; }
.pip-suit { font-size: 0.66rem; margin-top: 1px; }
.suit-center { font-size: 1.7rem; line-height: 1; position: relative; opacity: 0.92; }
.card-front.red { color: var(--red-suit); }
.card-front.black { color: var(--black-suit); }
.card.small .pip-rank { font-size: 0.56rem; }
.card.small .pip-suit { font-size: 0.5rem; }
.card.small .pip-tl { top: 3px; left: 3px; }
.card.small .pip-br { bottom: 3px; right: 3px; }
.card.small .suit-center { font-size: 1.2rem; }

.card-face-up { position: relative; }
.card-face-up .card-front { transform: none; }
.card-empty { opacity: 0; }

.card.selectable { outline: 3px solid var(--gold); outline-offset: 2px; }
.card.highlight-turn { box-shadow: 0 0 0 3px var(--gold), var(--shadow-sm); }
.card.swap-target { box-shadow: var(--glow-gold); animation: cardPulseGold 1.1s ease-in-out infinite; }
.card.slap-target { box-shadow: var(--glow-red); animation: cardPulseRed 0.7s ease-in-out infinite; }
@keyframes cardPulseGold { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cardPulseRed { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.card.deal-in { animation: dealIn 0.5s cubic-bezier(.2,.7,.3,1.1) backwards; }
@keyframes dealIn {
  0% { transform: translateY(-30px) scale(0.6) rotate(-10deg); opacity: 0; }
  60% { transform: translateY(2px) scale(1.03) rotate(1deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

/* ---------- game screen ---------- */

.game-wrap { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.game-top-bar { display: flex; align-items: center; justify-content: space-between; }
.round-pill { background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 7px 18px; border-radius: 999px; font-size: 0.85rem; color: var(--gold-soft); font-weight: 600; }

/* status bar - the single source of truth for "what do I do right now" */
.status-bar {
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-align: center;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(6px);
}
.status-headline { font-size: 1.05rem; font-weight: 700; color: var(--cream); line-height: 1.3; }
.status-sub { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.status-bar.state-your-turn { background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 26px rgba(34, 211, 238, 0.16); }
.status-bar.state-your-turn .status-headline { color: var(--gold-soft); }
.status-bar.state-decide { background: rgba(47, 143, 224, 0.18); border-color: rgba(47, 143, 224, 0.55); }
.status-bar.state-decide .status-headline { color: var(--info-soft); }
.status-bar.state-power { background: rgba(157, 59, 245, 0.2); border-color: rgba(157, 59, 245, 0.55); }
.status-bar.state-power .status-headline { color: var(--amethyst-soft); }
.status-bar.state-slap { background: rgba(214, 31, 122, 0.22); border-color: rgba(214, 31, 122, 0.65); animation: statusSlapPulse 0.9s ease-in-out infinite; }
.status-bar.state-slap .status-headline { color: #ffb3d4; }
.status-bar.state-waiting { opacity: 0.85; }
@keyframes statusSlapPulse { 0%, 100% { box-shadow: 0 0 0 rgba(156,47,66,0); } 50% { box-shadow: 0 0 26px rgba(156,47,66,0.4); } }

/* ---------- round table ---------- */

.table-round {
  position: relative;
  width: 100%;
  max-width: 460px;
  /* Scale with available viewport height, not just width - on a short
     phone the table must shrink or it pushes your own hand of cards
     underneath the fixed bottom action bar. */
  height: clamp(180px, 30vh, 300px);
  margin: 2px auto 6px;
}

.table-oval {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 32%, var(--felt-rim) 0%, var(--felt-light) 22%, var(--felt) 58%, var(--felt-dark) 100%);
  border: 3px solid rgba(34, 211, 238, 0.4);
  box-shadow:
    inset 0 0 0 9px rgba(10, 6, 2, 0.4),
    inset 0 0 0 11px rgba(34, 211, 238, 0.3),
    inset 0 0 44px rgba(0, 0, 0, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.5),
    var(--shadow-sm);
  animation: tableBreathe 6s ease-in-out infinite;
  overflow: hidden;
}
.table-oval::before {
  /* faint monogram watermark at the center of the felt */
  content: 'K';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 3.4rem;
  color: rgba(34, 211, 238, 0.07);
  pointer-events: none;
}
@keyframes tableBreathe {
  0%, 100% { box-shadow: inset 0 0 0 9px rgba(10, 6, 2, 0.4), inset 0 0 0 11px rgba(34, 211, 238, 0.3), inset 0 0 44px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(0, 0, 0, 0.5), var(--shadow-sm); }
  50% { box-shadow: inset 0 0 0 9px rgba(10, 6, 2, 0.4), inset 0 0 0 11px rgba(34, 211, 238, 0.42), inset 0 0 54px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.5), var(--shadow-sm); }
}

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

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 68px;
  transition: opacity 0.2s ease;
}
.seat.offline { opacity: 0.5; }

.seat-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold-soft);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(34, 211, 238, 0.5);
  box-shadow: var(--shadow-sm), inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -3px 5px rgba(0, 0, 0, 0.3);
  position: relative;
}
.seat-avatar::before {
  /* glossy top highlight so the flat player color reads as a gem/sphere */
  content: '';
  position: absolute;
  top: 3px; left: 8px; right: 8px;
  height: 40%;
  border-radius: 50% 50% 60% 60% / 100% 100% 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}
.seat.active-turn .seat-avatar {
  box-shadow: var(--glow-gold), inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -3px 5px rgba(0, 0, 0, 0.3);
}
.seat.active-turn { position: absolute; }
.seat.active-turn::before {
  /* rotating spotlight ring behind the active player's seat */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(34, 211, 238, 0.5), transparent 35%);
  animation: seatSpin 2.2s linear infinite;
  z-index: -1;
}
.seat.active-turn .seat-avatar { animation: seatPulse 1.6s ease-in-out infinite; }
@keyframes seatPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes seatSpin { to { transform: rotate(360deg); } }

.seat-cardcount {
  position: absolute;
  top: -5px; right: -7px;
  background: var(--felt-dark);
  color: var(--gold-soft);
  border: 1.5px solid rgba(34, 211, 238, 0.5);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  line-height: 1.3;
}
.seat-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cream);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.seat-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--muted-dim);
}
.seat-turn-badge {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #052024;
  background: var(--gold);
  border-radius: 999px;
  padding: 1px 6px;
}

.table-piles {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pile-group { display: flex; gap: 26px; align-items: flex-start; justify-content: center; }
.pile { background: none; border: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.pile-label { font-size: 0.68rem; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.deck-stack { position: relative; width: 68px; height: 96px; }
.deck-card {
  position: absolute; inset: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.2) 0%, transparent 38%),
    repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(34, 211, 238, 0.13) 6px, rgba(34, 211, 238, 0.13) 7px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(34, 211, 238, 0.13) 6px, rgba(34, 211, 238, 0.13) 7px),
    linear-gradient(160deg, #1e1030, #120a1e);
  border: 2px solid rgba(34, 211, 238, 0.55);
  box-shadow: var(--shadow-sm);
}
.deck-card::after { content: 'K'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(165, 243, 252, 0.9); font-family: var(--font-body); font-weight: 800; font-size: 1.5rem; }
.deck-card-2 { transform: translate(3px, -3px); opacity: 0.85; }
.deck-card-3 { transform: translate(6px, -6px); opacity: 0.65; }
.pile-count {
  position: absolute; top: -8px; right: -10px;
  background: var(--gold); color: #052024;
  font-size: 0.72rem; font-weight: 800;
  border-radius: 999px; padding: 3px 8px;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}
.discard-slot { width: 68px; height: 96px; display: flex; align-items: center; justify-content: center; }
.pile.active-pile .deck-stack, .pile.active-pile .discard-slot { animation: pileGlow 1.3s ease-in-out infinite; border-radius: 12px; }
@keyframes pileGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(201,164,76,0)); } 50% { filter: drop-shadow(0 0 16px rgba(201,164,76,0.6)); } }

.drawn-preview {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  animation: dealIn 0.35s cubic-bezier(.2,.7,.3,1.1);
}
.drawn-preview-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-soft); font-weight: 700; }

.self-area {
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  backdrop-filter: blur(6px);
}
.self-area.my-turn-glow { border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 0 1px rgba(201,164,76,0.2), 0 0 32px rgba(34, 211, 238, 0.14); }
.self-area.slap-glow { border-color: rgba(214, 31, 122, 0.6); box-shadow: 0 0 0 1px rgba(156,47,66,0.25), 0 0 32px rgba(214, 31, 122, 0.2); }
.self-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.self-name { font-weight: 700; font-size: 1.05rem; }
.self-score { font-size: 0.88rem; color: var(--muted); }
.self-hint { text-align: center; font-size: 0.82rem; color: var(--gold-soft); margin: 12px 0 0; }

.action-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding-bottom: 6px; }
.action-bar .btn { flex: 1 1 auto; min-width: 130px; }

/* ---------- overlays / modals / panels ---------- */

.panel-overlay, .modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 6, 12, 0.72);
  display: flex;
  z-index: 60;
  backdrop-filter: blur(3px);
  animation: overlayIn 0.2s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.panel-overlay { align-items: flex-end; }
.modal-overlay { align-items: center; justify-content: center; padding: 16px; }

.panel-sheet {
  background: var(--felt-dark);
  border-top: 1px solid var(--panel-border);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  animation: sheetUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.4);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.panel-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.modal-sheet {
  background: var(--felt-dark);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes modalPop { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: none; } }

.log-list li, .score-list li { color: var(--muted); font-size: 0.88rem; }
.score-list li { justify-content: space-between; }
.score-list .score-value { color: var(--gold-soft); font-weight: 700; }

.rules-sheet h4 { color: var(--gold-soft); margin-top: 16px; }
.rules-sheet h4:first-child { margin-top: 0; }
.rules-body ul { padding-left: 20px; color: var(--muted); }
.rules-body li { margin-bottom: 6px; }

.power-title { color: var(--gold-soft); margin-bottom: 4px; }
.power-desc { font-size: 0.92rem; margin-bottom: 16px; }
.target-list { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; }
.target-group { border: 1px solid var(--panel-border); border-radius: 14px; padding: 12px; }
.target-group-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.target-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.target-card-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.target-card-block span { font-size: 0.68rem; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.target-card-block .card.picked { box-shadow: var(--glow-gold); }

.peek-cards { display: flex; gap: 16px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.peek-card-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.peek-card-block span { font-size: 0.82rem; color: var(--muted); }

.modal-actions { display: flex; gap: 12px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }

/* ---------- reveal / gameover ---------- */

.reveal-wrap { width: 100%; max-width: 480px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.reveal-grids { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.reveal-player-row { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.reveal-player-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 74px; }
.reveal-player-info b { font-size: 0.85rem; }
.reveal-player-info span { font-size: 0.72rem; color: var(--muted-dim); }
.reveal-grid { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }

.winner-banner { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 4px; }
.winner-banner h1 {
  font-size: 3.4rem;
  background: linear-gradient(100deg, var(--gold) 0%, var(--amethyst) 45%, var(--danger-bright) 75%, var(--gold) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(34, 211, 238, 0.4));
  font-style: italic;
  animation: gradientSweep 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .winner-banner h1 { animation: none; }
}

/* ---------- toasts ---------- */

.toasts {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  width: min(90vw, 380px);
  align-items: center;
}
.toast {
  background: rgba(12, 13, 22, 0.96);
  border: 1px solid var(--panel-border);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  text-align: center;
}
.toast.error { border-color: rgba(156,47,66,0.5); color: #ffd0e6; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(0.94); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .card { width: 78px; height: 110px; }
  .card.small { width: 54px; height: 76px; }
  .deck-stack, .discard-slot { width: 78px; height: 110px; }
}

/* Common "short" phones in portrait (iPhone SE/8, many Android phones sit
   in the 640-720px range) - the round table plus your own hand is enough
   content that without this, your cards can end up hidden underneath the
   fixed bottom action bar. Trim rhythm just enough to keep everything
   visible without scrolling. */
@media (max-height: 720px) {
  .game-wrap { gap: 12px; }
  .table-round { height: clamp(160px, 26vh, 280px); }
  .status-bar { padding: 10px 16px; }
  .self-area { padding: 14px 16px; }
  .self-header { margin-bottom: 8px; }
}

/* Phone in landscape (or any very short viewport): the app is still
   meant to be played one-handed, so compress vertical rhythm instead
   of forcing a scroll to reach the action bar. */
@media (max-height: 500px) {
  .screen { padding-top: 14px; padding-bottom: 100px; }
  .screen.has-bottom-bar { padding-bottom: 100px; }
  .game-wrap { gap: 10px; }
  .status-bar { padding: 8px 14px; }
  .status-headline { font-size: 0.92rem; }
  .status-sub { font-size: 0.76rem; margin-top: 0; }
  .table-round { max-width: 340px; }
  .seat-avatar { width: 38px; height: 38px; font-size: 0.9rem; }
  .self-area { padding: 10px 14px; }
  .self-header { margin-bottom: 6px; }
  .card { width: 52px; height: 74px; }
  .card.small { width: 36px; height: 50px; }
  .deck-stack, .discard-slot { width: 52px; height: 74px; }
  .bottom-bar { padding-top: 10px; }
  .landing-wrap, .peek-wrap, .reveal-wrap { gap: 14px; }
  .brand-mark { width: 60px; height: 60px; font-size: 1.9rem; }
  .brand h1 { font-size: 1.8rem; }
}

/* ---------- flying card animations ---------- */

.ghost-card {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  pointer-events: none;
  width: 68px;
  height: 96px;
  transition: none;
}
.ghost-card.impact { animation: ghostImpact 0.28s ease-out; }
@keyframes ghostImpact { 0% { transform: scale(1); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }

.pile.impact .deck-stack, .pile.impact .discard-slot,
.seat.impact .seat-avatar {
  animation: impactPulse 0.35s ease-out;
}
@keyframes impactPulse {
  0% { box-shadow: 0 0 0 rgba(34, 211, 238, 0); }
  35% { box-shadow: 0 0 28px rgba(34, 211, 238, 0.8); }
  100% { box-shadow: 0 0 0 rgba(34, 211, 238, 0); }
}

/* ---------- confetti ---------- */

.confetti-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 80;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation: confettiFall linear forwards;
  border-radius: 2px;
  --spin: 540deg;
  --drift: 0px;
}
.confetti-piece.confetti-round { border-radius: 50%; width: 9px; height: 9px; }
.confetti-piece.confetti-diamond { width: 10px; height: 10px; border-radius: 2px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
@keyframes confettiFall {
  0% { transform: translate(0, -10px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift), 115vh) rotate(var(--spin)); opacity: 0.4; }
}

/* ---------- reduced motion ---------- */

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