:root {
  --gold: #c9a227;
  --tile-face: #fef8e0;
  --pip-red: #c62828;
  --pip-blue: #1565c0;
  --pip-green: #2e7d32;
  --flower-orange: #ef6c00;
  --ink: #26241f;
  --felt: #123524;
  --felt-dark: #0b241a;
  --panel: #1c2f26;
  --panel-light: #24403320;
  --cream-text: #fef8e0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(160deg, var(--felt) 0%, var(--felt-dark) 100%);
  color: var(--cream-text);
  font-family: 'Poppins', system-ui, sans-serif;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 8px;
}

h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); color: #fff; }
h2 { font-size: clamp(1.1rem, 5vw, 1.4rem); color: var(--gold); }
h3 { font-size: 1rem; color: var(--cream-text); opacity: .9; }

p { line-height: 1.5; }

.loading { text-align: center; padding: 40px 0; opacity: .8; }

.card {
  background: var(--panel);
  border: 1px solid #2f4a3d;
  border-radius: 10px;
  padding: 18px;
  margin: 0 0 16px;
}

.btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 14px 20px;
  border-radius: 8px;
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  min-height: 48px;
  touch-action: manipulation;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary {
  background: var(--gold);
  color: #1a1608;
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn-row .btn { flex: 1 1 auto; min-width: 120px; }

select, input[type="text"] {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #3f5c4d;
  background: #fff;
  color: var(--ink);
  min-height: 44px;
}

/* --- Home screen: mode-select cards ------------------------------------ */
/* Replaces the old plain radio-button toggle - "who's playing" is the first
   thing picked, as a clear card, per the brief. Play Bots is the visually
   primary/first card (gold border) since that's the default and what Sir is
   actually testing today; hot-seat is the clearly labeled second option. */
.mode-select {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 18px;
}

.mode-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 2px solid #2f4a3d;
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  color: var(--cream-text);
  font-family: 'Poppins', sans-serif;
  touch-action: manipulation;
  min-height: 64px;
}

.mode-card-primary { border-color: color-mix(in srgb, var(--gold) 55%, #2f4a3d); }

.mode-card-title {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 4px;
}

.mode-card-sub {
  display: block;
  font-size: .85rem;
  opacity: .78;
  line-height: 1.35;
}

.mode-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, #23402f, #1c2f26);
  box-shadow: 0 0 0 1px var(--gold) inset;
}

@media (min-width: 520px) {
  .mode-select { flex-direction: row; }
  .mode-card { flex: 1; }
}

.lockscreen {
  text-align: center;
  padding: 60px 16px;
}

.seat-glyph {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(3rem, 22vw, 6rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
}

.muted { opacity: .72; font-size: .88rem; }

/* --- Tile rendering --------------------------------------------------- */

.rack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 12px 0;
}

.tile {
  position: relative;
  width: clamp(44px, 12vw, 64px);
  height: clamp(60px, 16.5vw, 88px);
  background: var(--tile-face);
  color: var(--ink);
  border: 2px solid #d8cba0;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  padding: 2px;
  flex-shrink: 0;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.4);
}

/* Illustrated tile face: an inline SVG (see tileArtSVG in play.js), scaled
   crisply to whatever pixel size the tile container ends up at - full size
   in your own rack, or the much smaller .tile.small size in discard piles -
   with no raster/pixelation loss either way. */
.tile .tile-face {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
}

.tile .tile-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tile .tile-sub {
  font-size: clamp(.5rem, 1.8vw, .62rem);
  font-weight: 600;
  letter-spacing: .04em;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  flex-shrink: 0;
}

/* Honor tiles (winds/dragons) get a colored top rail; flower a corner glow;
   joker a dashed ring - distinct silhouettes at a glance, same tile shape. */
.tile-honor { border-top: 5px solid currentColor; }
.tile-flower {
  background: linear-gradient(160deg, var(--tile-face) 60%, #fde7c8 100%);
}
.tile-joker { border-style: dashed; border-color: var(--gold); }

.tile.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 4px 10px rgba(0,0,0,.35);
  transform: translateY(-6px);
}

.tile.readonly { cursor: default; }
.tile.small { width: clamp(30px, 8vw, 40px); height: clamp(41px, 11vw, 55px); padding: 1px; }
.tile.small .tile-sub { font-size: .46rem; padding: 0 4px; }
.tile.small.tile-honor { border-top-width: 3px; }

.meld-group {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px dashed #3f5c4d;
  border-radius: 6px;
  margin: 3px;
}

.suit-bam { color: var(--pip-green); }
.suit-crak { color: var(--pip-red); }
.suit-dot { color: var(--pip-blue); }
.suit-wind { color: var(--ink); }
.suit-dragon-red { color: var(--pip-red); }
.suit-dragon-green { color: var(--pip-green); }
.suit-dragon-white { color: #607d6f; }
.suit-flower { color: var(--flower-orange); }
.suit-joker { color: var(--gold); }

.discard-tile {
  display: inline-block;
}

/* --- Table felt: the raised/angled "real table" treatment -------------- */
/* A literal 3D engine isn't warranted here (and would risk skewing/clipping
   the variable-length discard piles and melds, which are the functional
   priority) - instead the felt gets a dark radial vignette + inset shadow to
   read as a physical table, and only the small fixed-size wind/wall marker
   gets an actual perspective tilt on wider screens. Degrades to a flat panel
   below 640px, same breakpoint the grid itself uses. */
.table-felt {
  position: relative;
  background-color: var(--felt);
  background-image:
    radial-gradient(ellipse at 50% 32%, #227a4d 0%, #1c5c3d 30%, var(--felt) 62%, var(--felt-dark) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0px, rgba(0,0,0,.05) 1px, transparent 1px, transparent 9px);
  border: 2px solid #0b241a;
  border-radius: 16px;
  padding: 14px 10px 10px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 36px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
  overflow: hidden;
}

.table-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 30%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}

/* Mobile-first: top (across seat) full width, left/right (adjacent seats)
   side by side, then the wind/wall marker - your own rack follows below in
   its own .card, pinned at the bottom of the screen where it's biggest and
   most tappable. Widens into a proper top/left-wind-right "diamond" once
   there's room (see the min-width query below). */
.table-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "top   top"
    "left  right"
    "wind  wind";
  gap: 8px;
}

.seat-top { grid-area: top; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.wind-info { grid-area: wind; }

.seat-area {
  background: rgba(18, 32, 25, .78);
  border: 1px solid #2f4a3d;
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 0; /* let the discard pile wrap instead of forcing the grid wide */
}

.seat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.seat-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.seat-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seat-avatar-bot { border-color: #6f8a7a; color: #cfe0d4; }

.seat-name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .82rem;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-count {
  font-size: .72rem;
  opacity: .65;
  white-space: nowrap;
}

/* --- Match/session layer: running score badges, match bar, standings ---- */
/* Plain numeric badge per seat - explicitly no coin/chip graphic (Sir's
   call). Reuses the same gold/panel tokens as everything else on the felt
   rather than introducing a new visual treatment. */
.seat-score {
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  white-space: nowrap;
}

.seat-score-pos { color: #1a1608; background: var(--gold); }
.seat-score-neg { color: #ffd9d9; border-color: #7a2222; background: color-mix(in srgb, #7a2222 30%, transparent); }

.match-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -6px 0 12px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .76rem;
  color: var(--gold);
  opacity: .92;
}

.standings-table-wrap { overflow-x: auto; }

.standings-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 4px;
  font-family: 'Poppins', sans-serif;
}

.standings-table th,
.standings-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #2f4a3d;
  font-size: .85rem;
  white-space: nowrap;
}

.standings-table th {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  color: var(--gold);
  opacity: .85;
}

.standings-table tr.standings-rank-1 td {
  color: var(--gold);
  font-weight: 700;
}

.seat-melds {
  margin-bottom: 4px;
}

.seat-melds .meld-group { margin: 2px 3px 2px 0; }

.discard-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 40px;
  align-items: flex-start;
}

.discard-empty {
  opacity: .5;
  font-size: .85rem;
  align-self: center;
}

.wind-info {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}

/* Central wind/wall marker - four corner glyphs are the seat letters (the
   engine's own compass winds, engine/constants.js SEATS), dealer's corner
   highlighted red like a real NMJL table marker. Center readout is real
   wall-tile count only - the server has no wind-round tracking, so no
   "East 1"-style round number is invented here. */
.wind-board {
  position: relative;
  width: clamp(72px, 20vw, 96px);
  height: clamp(72px, 20vw, 96px);
  background: #16241d;
  border: 3px solid #3a5747;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wind-board-inner {
  text-align: center;
  line-height: 1.15;
}

.wind-board-label {
  display: block;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.wind-board-count {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 600;
  color: #fff;
}

.wind-corner {
  position: absolute;
  width: 22px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  background: #26241f;
  color: var(--cream-text);
  border: 1px solid #3a5747;
}

.wind-nw { top: -3px; left: -3px; border-radius: 6px 0 6px 0; }
.wind-ne { top: -3px; right: -3px; border-radius: 0 6px 0 6px; }
.wind-se { bottom: -3px; right: -3px; border-radius: 6px 0 6px 0; }
.wind-sw { bottom: -3px; left: -3px; border-radius: 0 6px 0 6px; }
.wind-dealer { background: var(--pip-red); color: #fff; border-color: #7a1414; }

@media (min-width: 640px) {
  .wind-board { transform: perspective(600px) rotateX(10deg); }
}

/* Charleston direction banner - a prominent centered overlay on the felt
   itself (matching the reference's center-table callout) rather than a
   plain paragraph. Only ever shown during read-only board stages, so it
   never sits on top of a tap target. */
.charleston-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(8, 18, 13, .9);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px 20px;
  text-align: center;
  max-width: 88%;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

.charleston-banner-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gold);
  font-size: clamp(.85rem, 3.5vw, 1.05rem);
  margin-bottom: 4px;
}

.charleston-banner-sub {
  color: #fff;
  font-size: clamp(.8rem, 3.2vw, .95rem);
}

.your-rack-card h2 { margin-top: 0; }

@media (min-width: 640px) {
  .table-board {
    grid-template-columns: 1fr 1.3fr 1fr;
    grid-template-areas:
      "top  top  top"
      "left wind right";
    align-items: start;
  }
}

.section-label {
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--gold);
  margin: 14px 0 6px;
}

.hands-reveal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.count-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.count-picker .btn { min-width: 56px; flex: 0 0 auto; }

.error-banner {
  background: #4a1616;
  border: 1px solid #7a2222;
  color: #ffd9d9;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: .9rem;
}

footer.tag {
  text-align: center;
  opacity: .5;
  font-size: .75rem;
  margin-top: 24px;
}