:root {
  --felt1: #0b3d2a;
  --felt2: #082a1c;
  --gold: #ffd66e;
  --gold-dark: #c99628;
  --card-bg: #fdfaf3;
  --card-back: #7a1c2c;
  --card-back-line: #ffd66e;
  --red: #c22;
  --black: #1a1a1a;
  --panel-bg: rgba(8, 30, 20, 0.92);
  --text: #f3f0e6;
  --muted: #b9c9bd;
  --danger: #e05252;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, var(--felt1), var(--felt2));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------------------------------------------------------- home */
.home-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px 24px;
  width: 100%;
  max-width: 420px;
}
.home-king {
  width: 108px; aspect-ratio: 5 / 7; object-fit: cover;
  border-radius: 10px; margin-bottom: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.home-wrap h1 { font-size: 2.4em; margin: 0; letter-spacing: 0.05em; color: var(--gold); }
.tagline { color: var(--muted); margin: 0 0 20px; text-align: center; }

.btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-size: 1.05em;
  font-weight: 600;
  margin-bottom: 12px;
}
.btn-primary { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #241a03; }
.btn-secondary { background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.18); }
.btn-link { background: none; color: var(--muted); text-decoration: underline; font-weight: 400; }
.btn:active { transform: scale(0.98); }

.install-banner {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; margin-top: 10px; width: 100%;
}
.install-banner button { padding: 8px 14px; border-radius: 8px; border: none; background: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- panels */
.panel {
  width: 100%;
  max-width: 420px;
  padding: 40px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel h2 { color: var(--gold); text-align: center; margin: 0 0 10px; }
.rules-panel { padding-top: 50px; }
.rules-text p { line-height: 1.5; color: var(--text); }

.text-input {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 1.1em;
}
.code-input { text-transform: uppercase; text-align: center; letter-spacing: 0.15em; }

.lobby-players { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lobby-player-chip {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.95em;
  display: flex; align-items: center; gap: 6px;
}
.lobby-player-chip.is-host::after { content: '👑'; font-size: 0.8em; }

.lobby-settings, .solo-bot-difficulties { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.lobby-settings label, .panel label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--muted); }
select {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 1em;
}
/* The dropdown's OPEN option list is rendered by the OS, not this stylesheet — most
   platforms give it a plain white/light popup regardless of the select's own dark
   background, so options need their own dark text explicitly or they render pale text
   on a pale popup. */
select option {
  color: #1a1a1a;
  background: #fff;
}
.muted { color: var(--muted); text-align: center; }
.deck-hint { font-size: 0.8em; margin: -4px 0 0; text-align: left; }

.cardback-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.cardback-option {
  width: 52px; height: 74px; border-radius: 8px; border: 2px solid transparent;
  background-size: cover; background-position: center; cursor: pointer;
  background-color: var(--card-back);
}
.cardback-option.selected { border-color: var(--gold); }

.theme-dropdown { position: relative; margin: 6px 0; }
.theme-dropdown-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08); color: var(--text); font-size: 1em;
  cursor: pointer; text-align: left; font-family: inherit;
}
.theme-dropdown-btn:disabled { cursor: default; opacity: 0.7; }
.theme-caret { margin-left: auto; opacity: 0.7; }
.theme-dropdown-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--panel-bg); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px; max-height: 280px; overflow-y: auto; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.theme-dropdown-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer;
}
.theme-dropdown-option:hover, .theme-dropdown-option.selected { background: rgba(255,255,255,0.1); }
.theme-swatch {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}
.theme-dropdown-btn .theme-swatch { width: 24px; height: 24px; }
.theme-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-name { font-weight: 700; color: var(--text); font-size: 0.9em; }
.theme-desc { font-size: 0.75em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---------------------------------------------------------------- kebab */
.version-label {
  position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 50%;
  transform: translateX(-50%);
  z-index: 50; color: var(--muted); font-size: 11px; opacity: 0.7;
}

.kebab-btn {
  position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 12px;
  z-index: 50; background: rgba(0,0,0,0.3); color: var(--text); border: none;
  border-radius: 50%; width: 40px; height: 40px; font-size: 1.4em;
}
.kebab-menu {
  position: fixed; top: calc(env(safe-area-inset-top) + 54px); right: 12px; z-index: 50;
  background: var(--panel-bg); border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.kebab-menu button {
  display: block; width: 100%; padding: 12px 20px; background: none; border: none;
  color: var(--text); text-align: left; font-size: 1em;
}
.kebab-menu button:hover { background: rgba(255,255,255,0.08); }

.update-banner {
  position: fixed; top: 10px; left: 12px; right: 12px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; font-size: 14px;
  background: linear-gradient(100deg, var(--gold), var(--gold-dark));
  color: #241a03; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.update-banner span { flex: 1; font-weight: 700; }
.update-banner button {
  padding: 8px 14px; border: none; border-radius: 999px;
  background: #241a03; color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 800; cursor: pointer;
}

/* Announces something worth everyone looking up for — your turn, a King, someone
   going all face up — big and centered rather than buried in the act-prompt line.
   Same pattern as HexColony's shoutout: a pill that pops in, holds, and fades. */
.shoutout {
  position: fixed; inset: 0; z-index: 180;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 22vh;
  pointer-events: none;
}
.shoutout-card {
  --c: var(--gold);
  max-width: calc(100vw - 40px);
  background: rgba(6, 20, 14, 0.95);
  border: 2px solid var(--c);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 6px rgba(0,0,0,0.18);
  padding: 14px 26px;
  font-size: 22px; font-weight: 800; letter-spacing: 0.2px;
  color: var(--text);
  text-align: center;
  opacity: 0;
}
.shoutout-card.show { animation: shoutout-pop 2.2s ease forwards; }
@keyframes shoutout-pop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  82%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: rgba(0,0,0,0.85); color: var(--text); padding: 10px 18px; border-radius: 10px;
  font-size: 0.95em; max-width: 90vw; text-align: center;
}

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 80;
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: var(--panel-bg); border-radius: 16px; padding: 24px; text-align: center;
  width: 280px;
}
.about-icon { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 10px; }
.modal-card button { margin-top: 12px; }

/* ---------------------------------------------------------------- game screen */
#screen-game { padding: 8px; position: relative; justify-content: flex-start; }

.player-rail {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%; max-width: 700px; padding: 4px 6px 8px;
}
.rail-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 0.85em; font-weight: 600;
}
.rail-pill .rail-name { color: var(--text); }
.rail-pill .rail-score { color: var(--gold); font-weight: 700; }
.rail-pill.is-out { opacity: 0.45; }

/* Shared "it's this one's turn" cue — a plain white pulse, used on the rail pill and
   on whichever grid (mine or an opponent's) belongs to the acting player. */
@keyframes pulse-white {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 0 4px rgba(255,255,255,0.85); }
}
.active-turn { animation: pulse-white 1.4s ease-in-out infinite; }

.game-top {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 520px; padding: 6px 10px;
}
.game-round-info { color: var(--muted); font-size: 0.9em; }

.turn-badge {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}
.game-turn-info { font-weight: 700; color: var(--gold); }
.turn-timer {
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* A hairline instead of a gap, so the clock reads as part of the same plate — only
   shown once the timer actually has something to say. */
.turn-timer:not(.hidden) { border-left: 1px solid rgba(255,255,255,0.16); padding-left: 9px; }
.turn-timer.mine { color: var(--gold); }
.turn-timer.urgent { color: var(--danger); animation: timer-tick 1s steps(2) infinite; }
@keyframes timer-tick { 50% { opacity: 0.45; } }

.opponents {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: 100%; max-width: 700px; padding: 6px;
}
.opponent {
  background: rgba(255,255,255,0.05); border-radius: 10px; padding: 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.opponent.is-out { opacity: 0.4; }
.opponent-lives { font-size: 0.75em; color: var(--muted); }
.opponent-grid { display: grid; gap: 2px; border-radius: 4px; }
.opponent .mini-card {
  width: 20px; height: 28px; border-radius: 3px; background: var(--card-back);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-size: 0.5em; font-weight: 700;
}
.opponent .mini-card.faceup { background: var(--card-bg); color: var(--black); }
.opponent .mini-card.faceup.red { color: var(--red); }

/* Grid, not flex — same column count/gap as #my-grid below it, so the deck lines up
   over the player's own leftmost column and the discard pile over the rightmost,
   with the held card centered in whatever columns fall between. Column count and
   width come from JS (matched to #my-grid's own sizing) via inline styles. */
.table-center {
  display: grid; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 0; position: relative;
}
#pile-deck { grid-column: 1; }
#holding-slot { justify-self: center; }
.holding-slot { min-width: 60px; min-height: 84px; justify-content: center; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card-back {
  width: 68px; height: 96px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, var(--card-back), var(--card-back) 6px, #5c1420 6px, #5c1420 12px);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--card-back-line);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.pile-count { font-size: 0.8em; color: var(--muted); }
.pile-burn .card-face, .pile-burn .card-back { cursor: pointer; }
.pile-deck .card-back { cursor: pointer; }
.pile.disabled .card-back, .pile.disabled .card-face { opacity: 0.35; cursor: default; }

.holding-slot { display: flex; flex-direction: column; align-items: center; }
.holding-slot .card-face { box-shadow: 0 0 0 3px var(--gold); }

.card-face {
  width: 68px; height: 96px; border-radius: 8px; background: var(--card-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3em; color: var(--black);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.card-face.red { color: var(--red); }
.card-face .suit { font-size: 0.7em; }
.card-face.king-face { background-size: cover; background-position: center; }

.act-prompt {
  text-align: center; color: var(--gold); font-weight: 600; min-height: 1.4em;
  padding: 4px; font-size: 0.95em;
}

.my-grid {
  display: grid; gap: 8px; justify-content: center; margin-top: 8px; padding: 6px;
  border-radius: 10px;
}
.my-grid .cell-wrap { display: flex; flex-direction: column; align-items: center; }
.my-grid .card-back, .my-grid .card-face { width: 68px; height: 96px; }
.my-grid .card-face, .my-grid .card-back { cursor: pointer; }
.my-grid .card-face.swap-target { box-shadow: 0 0 0 3px var(--gold); }
.my-grid .card-back.reveal-target { box-shadow: 0 0 0 3px var(--gold); }
.my-name { text-align: center; margin-top: 8px; font-weight: 600; color: var(--muted); }

.overlay-panel {
  position: fixed; inset: 0; background: rgba(4, 16, 10, 0.94); z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
}
.overlay-panel h2 { color: var(--gold); }
.round-end-scores { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.score-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 14px;
}
.score-row.is-loser { background: rgba(224, 82, 82, 0.25); }
.score-row .lives { font-size: 0.85em; color: var(--muted); }
.overlay-panel .btn { max-width: 300px; }

/* ---------------------------------------------------------------- fx: swap fly + King celebration */
.fly-card {
  position: fixed;
  width: 60px; height: 84px;
  transform: translate(0, 0) rotate(0deg);
  transition: transform 0.42s cubic-bezier(.3,.9,.35,1);
  z-index: 150;
  pointer-events: none;
}

.king-celebration {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.king-card-face {
  width: 46vw; max-width: 260px; aspect-ratio: 5 / 7;
  background-color: var(--card-bg); background-size: cover; background-position: center;
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6);
  animation: kingSpinIn 1.3s ease-out forwards;
}

@keyframes kingSpinIn {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.06) rotate(720deg); opacity: 1; }
  45%  { transform: scale(1) rotate(720deg); opacity: 1; }
  80%  { transform: scale(1) rotate(720deg); opacity: 1; }
  100% { transform: scale(1) rotate(720deg); opacity: 0; }
}

@media (min-width: 700px) {
  .my-grid .card-back, .my-grid .card-face,
  .table-center .card-back, .table-center .card-face,
  .fly-card { width: 80px; height: 112px; }
}