/* ============================================================
   Family Game Night — shared styles
   Warm, modern, friendly. One file used by every page.
   ============================================================ */

:root {
  --bg: #1b1033;
  --bg-2: #2a1a52;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-solid: #2f2150;
  --text: #f4eefb;
  --muted: #b7a9d6;
  --accent: #ffcb47;
  --accent-2: #ff6b9d;
  --green: #38d39f;
  --red: #ff5a6e;
  --blue: #4aa8ff;
  --yellow: #ffd23f;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% -10%, #3a2170 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, #5a2a6b 0%, transparent 50%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3px;
}
.brand .logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #2a1340; font-size: 20px;
  box-shadow: var(--shadow);
}
.backlink {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  transition: background .15s, color .15s;
}
.backlink:hover { background: rgba(255,255,255,.14); color: var(--text); }

/* ---- Hero ---- */
.hero { text-align: center; padding: 30px 10px 10px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  margin: 10px 0 8px;
  line-height: 1.2;               /* room for descenders (g, y, p) when combined with background-clip: text */
  padding-bottom: 0.08em;         /* extra safety on WebKit, which clips the gradient at the line box */
  background: linear-gradient(120deg, #fff, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); font-size: 18px; margin: 0 auto; max-width: 560px; }
/* Emoji inside gradient-text H1s need to opt out of the background-clip masking, otherwise
   the glyph's own colour (e.g. the die's pips) becomes transparent. */
.lobby-title-icon {
  display: inline-block; margin-right: .35em;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: initial;
}

/* ---- Game cards grid (home) ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 38px;
}
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.28); }
.card .emoji { font-size: 46px; }
.card h3 { font-size: 24px; margin: 14px 0 6px; }
.card p { color: var(--muted); margin: 0 0 20px; font-size: 15px; line-height: 1.5; }

/* Landing: Join sits compactly at the top so a returning guest can jump straight in;
   Create takes the full width below with its 2-column game grid. Never side by side. */
.landing-create { padding: 24px 22px; }
.landing-join { padding: 18px 22px; }
/* Stacked: title on line 1, subtext on line 2, code input + button on line 3. */
.landing-join-row { display: flex; flex-direction: column; gap: 8px; }
.landing-join-copy { }
.landing-join-title { font-weight: 900; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.landing-join-emoji { font-size: 26px; }
.landing-join-sub { color: var(--muted); font-size: 15px; margin-top: 2px; }
.landing-join-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
/* Higher specificity than `.setup input[type=text] { width: 100% }` so the code box stays compact. */
.setup input[type=text].landing-join-code {
  text-transform: uppercase; width: 160px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.28);
  color: var(--text); font-family: var(--font); font-weight: 800; letter-spacing: 4px;
  text-align: center; font-size: 18px; flex: 0 0 auto;
}

/* Landing: game category + player-count filters. */
.game-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.game-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-filter-label {
  color: var(--muted); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  min-width: 70px;
}
.game-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.game-filter-chips .pchip {
  cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.24); color: var(--text);
  padding: 6px 14px; font-size: 13px; font-weight: 800; min-width: 34px; text-align: center;
}
.game-filter-chips .pchip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; border-color: transparent;
}
.game-filter-hint { color: var(--muted); font-size: 12px; margin: 2px 0 0; font-style: italic; }

/* Category sections + game tiles (two-wide grid, compact but readable). */
.game-section { margin-top: 14px; }
.game-section:first-child { margin-top: 6px; }
.game-section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.game-section-icon {
  font-size: 22px; line-height: 1;
  /* Prevent the accent color from tinting monochrome-fallback emoji; keep them full-colour. */
  color: initial;
}
.game-section-label {
  font-family: "Cinzel", "Poppins", serif; font-weight: 700; font-size: 17px; letter-spacing: 2.5px;
  color: var(--accent); text-transform: uppercase;
}
.game-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
@media (max-width: 480px) { .game-cards { grid-template-columns: 1fr; } }
.game-tile {
  text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: var(--bg-2); /* mid-purple — sits between the page background and the panel */
  border: 1px solid rgba(255,203,71,.28); /* soft gold outline gives each tile a warm frame */
  box-shadow: 0 0 0 1px rgba(255,203,71,.08), 0 2px 6px rgba(0,0,0,.25);
  color: var(--text); font-family: var(--font);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.game-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(255,203,71,.7);
  background: linear-gradient(180deg, rgba(255,203,71,.14), var(--bg-2));
  box-shadow: 0 0 0 1px rgba(255,203,71,.25), 0 8px 18px rgba(0,0,0,.4);
}
.game-tile-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.game-tile-icon { font-size: 22px; line-height: 1; color: initial; }
.game-tile-name { flex: 1 1 auto; }
.game-tile-meta { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.game-tile-tag { color: var(--muted); font-size: 14px; line-height: 1.35; }
.btn {
  display: inline-block;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  color: #2a1340;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px rgba(255,107,157,.35);
  transition: transform .12s, filter .12s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn.secondary {
  color: var(--text);
  background: var(--panel);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.18);
}
.btn.ghost {
  color: var(--text); background: transparent;
  border: 1px solid rgba(255,255,255,.22); box-shadow: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---- Generic panel ---- */
.panel {
  border-radius: var(--radius);
  padding: 22px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

.tip {
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(74,168,255,.12);
  border: 1px solid rgba(74,168,255,.3);
  color: #dbe9ff;
  font-size: 14.5px;
  line-height: 1.55;
}
.tip strong { color: #fff; }

.footer-note { text-align: center; color: var(--muted); margin-top: 40px; font-size: 13px; }

/* ============================================================
   BINGO
   ============================================================ */
.bingo-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 820px) { .bingo-layout { grid-template-columns: 1fr; } }

.caller-board { text-align: center; }
.called-big {
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  margin: 6px 0 4px;
  min-height: 96px;
  display: grid; place-items: center;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.called-letter { color: var(--accent); font-weight: 800; }
.called-history {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px; max-height: 200px; overflow-y: auto;
}
.chip {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.chip.latest { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#2a1340; }

.bingo-card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 460px; margin: 0 auto; }
.bingo-card .head {
  font-weight: 800; font-size: 28px; text-align: center; padding: 8px 0;
  color: #2a1340; border-radius: 12px;
}
.bingo-card .head.B { background: var(--accent); }
.bingo-card .head.I { background: var(--accent-2); }
.bingo-card .head.N { background: var(--green); }
.bingo-card .head.G { background: var(--blue); }
.bingo-card .head.O { background: var(--yellow); }
.bingo-card .cell {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  font-weight: 700; font-size: clamp(16px, 4.4vw, 26px);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.10);
  cursor: pointer;
  user-select: none;
  transition: transform .1s, background .15s, border-color .15s;
}
.bingo-card .cell:hover { border-color: rgba(255,255,255,.4); }
.bingo-card .cell.marked {
  background: linear-gradient(135deg, var(--green), #2bb888);
  border-color: #2bb888; color: #08251c;
  transform: scale(.97);
}
.bingo-card .cell.free {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #2a1340; cursor: default; font-size: 13px;
}
.bingo-card .cell.winline { box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent); }

.controls-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

.win-banner {
  margin-top: 18px; padding: 16px; text-align: center;
  border-radius: 14px; font-weight: 800; font-size: 22px;
  background: linear-gradient(120deg, var(--green), var(--accent));
  color: #08251c; display: none;
}
.win-banner.show { display: block; animation: pop .4s ease; }
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.subhead { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; font-weight: 700; }

/* ============================================================
   UNO
   ============================================================ */
.uno-table { margin-top: 20px; display: grid; gap: 18px; }
.players-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pchip {
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 8px;
}
button.pchip { color: var(--text); font-family: var(--font); cursor: pointer; } /* buttons don't inherit the light chip text by default */
/* global connection indicator (shows in every view while the socket is down) */
#connBanner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10000; display: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; font-weight: 800; font-size: 13px;
  padding: 7px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
#connBanner.show { display: block; animation: connpulse 1.2s ease-in-out infinite; }
@keyframes connpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pchip.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; border-color: transparent; }
.pchip .count { background: rgba(0,0,0,.18); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.pchip.active .count { background: rgba(0,0,0,.18); }

.center-area { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 18px 0; }
.deck-pile {
  width: 90px; height: 130px; border-radius: 14px; cursor: pointer;
  background: repeating-linear-gradient(45deg, #2a1340, #2a1340 8px, #3a1c5a 8px, #3a1c5a 16px);
  border: 3px solid rgba(255,255,255,.18);
  display: grid; place-items: center; font-weight: 800; color: var(--muted);
  box-shadow: var(--shadow); transition: transform .12s;
}
.deck-pile:hover { transform: translateY(-4px); }

.uno-card {
  width: 90px; height: 130px; border-radius: 14px;
  display: grid; place-items: center; position: relative;
  font-weight: 900; color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
  border: 3px solid rgba(255,255,255,.85);
}
.uno-card .big { font-size: 40px; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.uno-card .corner { position: absolute; font-size: 15px; }
.uno-card .corner.tl { top: 7px; left: 9px; }
.uno-card .corner.br { bottom: 7px; right: 9px; transform: rotate(180deg); }
.uno-card.red { background: linear-gradient(160deg, #ff6273, #d6283c); }
.uno-card.blue { background: linear-gradient(160deg, #5cb3ff, #1f6fd6); }
.uno-card.green { background: linear-gradient(160deg, #4fdca6, #1f9e6e); }
.uno-card.yellow { background: linear-gradient(160deg, #ffd95c, #e0a91f); color: #5a3d00; }
.uno-card.wild { background: conic-gradient(from 45deg, #d6283c, #e0a91f, #1f9e6e, #1f6fd6, #d6283c); }

.hand { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 16px; min-height: 150px;
  background: var(--panel); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.10); }
.hand .uno-card { cursor: pointer; transition: transform .12s; }
.hand .uno-card.playable:hover { transform: translateY(-12px); }
.hand .uno-card.disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.3); }

.uno-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.handoff {
  text-align: center; padding: 40px 20px;
  background: var(--panel); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
}
.handoff h2 { font-size: 30px; margin: 6px 0 14px; }
.handoff p { color: var(--muted); margin: 0 0 22px; }

.status-line { text-align: center; color: var(--muted); min-height: 22px; font-size: 15px; }

/* setup form */
.setup { max-width: 690px; margin: 24px auto 0; }
.setup label { display: block; font-weight: 600; margin: 16px 0 8px; }
.setup input[type=text] {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.2);
  color: var(--text); font-family: var(--font); font-size: 15px;
}
.player-rows { display: grid; gap: 10px; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 40px; height: 40px; border-radius: 12px; font-size: 22px; font-weight: 800;
  border: 1px solid rgba(255,255,255,.18); background: var(--panel); color: var(--text); cursor: pointer;
}
.stepper .num { font-size: 26px; font-weight: 800; min-width: 30px; text-align: center; }

.color-picker { display: none; gap: 14px; justify-content: center; margin-top: 8px; }
.color-picker.show { display: flex; }
.color-picker button {
  width: 60px; height: 60px; border-radius: 14px; border: 3px solid #fff; cursor: pointer;
}
.color-picker .red { background: #d6283c; }
.color-picker .blue { background: #1f6fd6; }
.color-picker .green { background: #1f9e6e; }
.color-picker .yellow { background: #e0a91f; }

.overlay {
  position: fixed; inset: 0; background: rgba(10,4,24,.78);
  display: none; place-items: center; z-index: 50; padding: 20px;
}
.overlay.show { display: grid; }
.overlay .box { text-align: center; max-width: 420px; }
.overlay h2 { font-size: 34px; margin: 0 0 10px; }

/* ============================================================
   MULTIPLAYER ADDITIONS
   ============================================================ */
/* 75-number bingo board (everyone can check called balls) */
/* min-width:0 columns prevent the grid from overflowing its panel (iPad fix) */
.bingo-board {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 820px) { .bingo-board { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.bingo-board .ball {
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: grid; place-items: center;
  font-size: clamp(8px, 1.5vw, 11px); font-weight: 700;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  overflow: hidden;
  transition: background .2s, transform .2s;
}
/* called balls take their column's color (matches the card's B/I/N/G/O headers) */
.bingo-board .ball.on { border-color: transparent; }
.bingo-board .ball.on.B { background: var(--accent);   color: #2a1340; }
.bingo-board .ball.on.I { background: var(--accent-2); color: #ffffff; }
.bingo-board .ball.on.N { background: var(--green);    color: #08251c; }
.bingo-board .ball.on.G { background: var(--blue);     color: #ffffff; }
.bingo-board .ball.on.O { background: var(--yellow);   color: #5a3d00; }
.bingo-board .ball.last { transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.55); z-index: 1; }

/* recent-call chips also take column colors */
.called-history .chip.B { background: var(--accent);   color: #2a1340; }
.called-history .chip.I { background: var(--accent-2); color: #fff; }
.called-history .chip.N { background: var(--green);    color: #08251c; }
.called-history .chip.G { background: var(--blue);     color: #fff; }
.called-history .chip.O { background: var(--yellow);   color: #5a3d00; }
.called-history .chip.latest { box-shadow: 0 0 0 2px #fff; }

/* big "called ball" letter colored by column */
.called-letter.B { color: var(--accent); }
.called-letter.I { color: var(--accent-2); }
.called-letter.N { color: var(--green); }
.called-letter.G { color: var(--blue); }
.called-letter.O { color: var(--yellow); }

/* keep bingo panels from forcing horizontal overflow */
.bingo-layout > .panel, .caller-board { min-width: 0; }

/* toast (transient messages like "Not a full line yet") */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: #2f2150; color: var(--text); font-weight: 700;
  padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow); z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.line-banner {
  margin-top: 10px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  color: #2a1340; font-weight: 800; font-size: 14px;
}

/* "Call BINGO!" button lights up the moment your card completes the pattern */
.btn.ready { animation: bingoReady .7s ease-in-out infinite; }
@keyframes bingoReady {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(255,107,157,.35); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 4px var(--accent), 0 0 22px var(--accent); }
}

/* ============================================================
   POKER — Art Deco table (SCOPED to the poker view only;
   the rest of the site keeps its original look)
   ============================================================ */
#view-poker #pHandInfo, #view-poker #pPot {
  font-family: "Cinzel", serif; letter-spacing: 1px; color: #f3ead2;
  border: 1px solid rgba(212,175,55,.55); background: rgba(0,0,0,.3);
}

/* the felt table with deck + pot in the middle */
.poker-table {
  position: relative; max-width: 800px; margin: 14px auto 0; padding: 20px 16px 24px;
  background: radial-gradient(ellipse 78% 92% at 50% 44%, #155a43 0%, #0f4030 60%, #0a2a20 100%);
  border: 3px solid #d4af37; border-radius: 52px;
  box-shadow: inset 0 0 70px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6);
}
.poker-table::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(212,175,55,.38); border-radius: 44px; pointer-events: none; }
.poker-table .useats { gap: 14px; position: relative; z-index: 1; }
.table-center { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 14px; min-height: 96px; position: relative; z-index: 1; }
.table-deck { width: 56px; height: 80px; border-radius: 8px; background: repeating-linear-gradient(45deg, #0f2a22 0 6px, #123a2e 6px 12px); border: 1px solid rgba(212,175,55,.6); box-shadow: 0 4px 12px rgba(0,0,0,.5); display: grid; place-items: center; }
.table-deck::after { content: "◆"; color: rgba(212,175,55,.6); font-size: 22px; }
.table-pot { font-family: "Cinzel", serif; color: #f0d27a; font-weight: 700; letter-spacing: 1px; font-size: 18px; display: flex; align-items: center; }

/* poker seats on the felt */
.pseat { background: rgba(0,0,0,.34) !important; border: 1px solid rgba(212,175,55,.4) !important; }
.pseat.turn { border-color: #d4af37 !important; box-shadow: 0 0 0 2px #d4af37, 0 0 20px rgba(212,175,55,.45) !important; }
.pseat.folded { opacity: .45; }
.pseat .seat-name { color: #f3ead2; }
.pseat .pseat-chips { font-size: 12px; color: #f0d27a; font-weight: 800; letter-spacing: .4px; }
.pseat .pseat-bet { font-size: 11px; color: #cbbf9a; min-height: 14px; }

/* cards — FOUR-COLOUR suits so spades ≠ clubs */
.poker-hand { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pcard {
  width: 66px; height: 94px; border-radius: 8px; position: relative; border: 1px solid #c9b079;
  background: linear-gradient(160deg, #fbf6e9, #ece0c4); color: #16181d;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; box-shadow: 0 6px 14px rgba(0,0,0,.45); font-family: "Cinzel", serif;
}
.pcard .pr { font-size: 24px; line-height: 1; }
.pcard .ps { font-size: 24px; line-height: 1; }
.pcard.s-spade { color: #16181d; }   /* black */
.pcard.s-club  { color: #15803d; }   /* green */
.pcard.s-heart { color: #c0392b; }   /* red */
.pcard.s-diam  { color: #1f6fd6; }   /* blue */
.pcard.back { background: repeating-linear-gradient(45deg, #0f2a22 0 6px, #123a2e 6px 12px); border: 1px solid rgba(212,175,55,.6); }
.pcard.back::after { content: "◆"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(212,175,55,.6); font-size: 20px; }
.pcard.selectable { cursor: pointer; transition: transform .12s; }
.pcard.selectable:hover { transform: translateY(-6px); }
.pcard.discarding { outline: 2px solid #c2415c; transform: translateY(10px); opacity: .55; }
.pseat-cards { display: flex; gap: 3px; margin-top: 5px; justify-content: center; }
.pseat-cards .pcard { width: 23px; height: 32px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.pseat-cards .pcard .pr { font-size: 11px; } .pseat-cards .pcard .ps { font-size: 10px; }

/* chip graphics */
.chip-ico { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #f0d27a, #c79a2b 70%); border: 2px dashed rgba(255,255,255,.65); box-shadow: 0 1px 2px rgba(0,0,0,.4); vertical-align: -2px; margin-right: 5px; }
.bet-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(212,175,55,.16); border: 1px solid rgba(212,175,55,.45); color: #f0d27a; font-weight: 800; font-size: 11px; }
.bet-tag.anted { background: rgba(120,224,184,.14); border-color: rgba(120,224,184,.42); color: #9fe8c8; }
.muted-tag { color: #9b8f70; font-style: italic; font-size: 11px; }

/* compact "your section" panel */
#view-poker .poker-you { background: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(0,0,0,0.25)); border: 1px solid rgba(212,175,55,.4); padding: 14px 16px; }
#view-poker .poker-hand { gap: 9px; }
#view-poker .poker-hand .pcard { width: 58px; height: 82px; }
#view-poker .poker-hand .pcard .pr, #view-poker .poker-hand .pcard .ps { font-size: 21px; }
.dealer-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #f0d27a, #c79a2b); color: #1a1407; font-size: 11px; font-weight: 900; vertical-align: middle; }

/* your stack line */
.your-chips { text-align: center; margin-top: 8px; color: #f0d27a; font-weight: 800; font-size: 14px; }

/* chip-stack bet builder — click chips to build the amount from 0 */
.chip-rack { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 8px 0 20px; padding-bottom: 4px; }
.chip {
  position: relative; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 3px dashed rgba(255,255,255,.75); font-family: var(--font); font-weight: 800;
  display: grid; place-items: center; transition: transform .1s;
  --top: #f6e3a8; --bot: #d4af37; --e1: #9c7b22; --e2: #7d6019; --txt: #1a1407;
  background: radial-gradient(circle at 50% 32%, var(--top), var(--bot) 72%); color: var(--txt);
  box-shadow: 0 2px 0 var(--e1), 0 4px 0 var(--e2), 0 6px 0 var(--e1), 0 8px 0 var(--e2), 0 10px 0 var(--e1), 0 13px 11px rgba(0,0,0,.55);
}
.chip .chip-face { font-size: 15px; transform: translateY(-1px); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.chip:hover { transform: translateY(-3px); }
.chip:active { transform: translateY(0); }
.chip-10  { --top:#ffcf91; --bot:#e8902f; --e1:#a9621a; --e2:#874c12; --txt:#3a1f06; }
.chip-25  { --top:#8fd0bb; --bot:#1fa67e; --e1:#157a5b; --e2:#0e5b43; --txt:#06251c; }
.chip-100 { --top:#e79aab; --bot:#c14d63; --e1:#8c2f42; --e2:#6c2333; --txt:#fff; }
.chip-500 { --top:#9ec7e8; --bot:#3f6fb0; --e1:#2c5183; --e2:#213d63; --txt:#fff; }
.bet-builder-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 2px; }
.reset-bet { background: transparent; border: 1px solid rgba(212,175,55,.5); color: #cbbf9a; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 12px; font-family: var(--font); }
#pRaiseConfirm.disabled, #pRaiseConfirm:disabled { opacity: .42; pointer-events: none; filter: grayscale(.35); }
#pAnteBtn { background: linear-gradient(135deg, #f0d27a, #c79a2b); color: #1a1407; }
/* opponents' face-down cards fan so all 5 fit in a seat */
.pseat-cards { gap: 0; }
.pseat-cards .pcard:not(:first-child) { margin-left: -11px; }
/* at showdown, spread the revealed cards out and enlarge them so they're actually readable */
.pseat-cards.revealed { gap: 3px; flex-wrap: nowrap; }
.pseat-cards.revealed .pcard { width: 30px; height: 42px; border-radius: 5px; }
.pseat-cards.revealed .pcard:not(:first-child) { margin-left: 0; }
.pseat-cards.revealed .pcard .pr { font-size: 16px; }
.pseat-cards.revealed .pcard .ps { font-size: 14px; }

/* ---- chip stacks on the felt (per-seat wagers + the pot) ---- */
.chip-stack { display: inline-flex; align-items: flex-end; gap: 5px; vertical-align: bottom; }
.schip-col { position: relative; display: inline-block; width: 26px; min-height: 16px; }
.sdisc {
  position: absolute; left: 0; width: 26px; height: 9px; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.55); box-shadow: 0 1px 1px rgba(0,0,0,.45);
  background: radial-gradient(circle at 50% 30%, var(--top, #f6e3a8), var(--bot, #d4af37));
}
.sdenom { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font-size: 9px; font-weight: 800; color: #f3ead2; white-space: nowrap; }
.sdisc.chip-10  { --top:#ffcf91; --bot:#e8902f; } .sdenom.chip-10  { color:#ffcf91; }
.sdisc.chip-25  { --top:#8fd0bb; --bot:#1fa67e; } .sdenom.chip-25  { color:#8fd0bb; }
.sdisc.chip-100 { --top:#e79aab; --bot:#c14d63; } .sdenom.chip-100 { color:#e79aab; }
.sdisc.chip-500 { --top:#9ec7e8; --bot:#3f6fb0; } .sdenom.chip-500 { color:#9ec7e8; }
.pseat-stack { display: flex; justify-content: center; min-height: 0; margin-top: 4px; }
.pseat-stack .sdenom { bottom: -13px; }
.pseat-stack:not(:empty) { margin-bottom: 14px; }
.table-pot-stack { display: flex; align-items: flex-end; min-height: 16px; }
.table-pot-stack:not(:empty) { margin-bottom: 14px; }
/* hand-rankings cheat sheet (toggled by the "? Poker hands" button) */
#pHandsBtn { cursor: pointer; font-family: var(--font); border: 1px solid rgba(212,175,55,.5); }
#pHandsBtn.on { background: linear-gradient(135deg, #f0d27a, #c79a2b); color: #1a1407; }
.hands-guide { max-width: 720px; margin: 10px auto 0; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(212,175,55,0.08), rgba(0,0,0,0.3)); border: 1px solid rgba(212,175,55,.4); }
.hands-guide-title { font-family: "Cinzel", serif; color: #f0d27a; font-weight: 700; letter-spacing: .5px; margin-bottom: 8px; text-align: center; }
.hands-list { margin: 0; padding-left: 26px; }
.hands-list li { margin: 3px 0; color: #f3ead2; }
.hands-list li b { color: #f0d27a; }
.hands-list li span { color: #cbbf9a; font-size: 13px; margin-left: 8px; }
/* ============================================================
   RUMMY 500
   ============================================================ */
/* felt colour (jewel tones) — chosen with the swatch picker, applied via body[data-felt] */
:root { --felt1:#155a43; --felt2:#0f4030; --felt3:#0a2a20; }
body[data-felt="sapphire"] { --felt1:#1f4a86; --felt2:#15315c; --felt3:#0c1e3a; }
body[data-felt="amethyst"] { --felt1:#5a3478; --felt2:#3c2255; --felt3:#241338; }
body[data-felt="ruby"]     { --felt1:#7d2740; --felt2:#591a2e; --felt3:#360f1d; }
body[data-felt="slate"]    { --felt1:#1f5057; --felt2:#163a40; --felt3:#0c2327; }
.rummy-table {
  position: relative; max-width: 820px; margin: 14px auto 0; padding: 16px 16px 20px;
  background: radial-gradient(ellipse 80% 92% at 50% 44%, var(--felt1) 0%, var(--felt2) 60%, var(--felt3) 100%);
  border: 3px solid #d4af37; border-radius: 28px;
  box-shadow: inset 0 0 70px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6);
}
/* table-colour swatches in the header */
.felt-swatches { display: inline-flex; gap: 6px; align-items: center; }
.felt-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.felt-sw.on { border-color: #fff; box-shadow: 0 0 0 2px #f0d27a; }
/* everything now sits ON the felt in slim inset boxes */
.ru-felt-box { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid rgba(212,175,55,.25); }
.ru-felt-label { color: #f0d27a; font-weight: 700; font-size: 13px; letter-spacing: .4px; margin-bottom: 8px; }
.ru-status { text-align: center; color: #f3ead2; margin-top: 10px; min-height: 18px; }
.ru-you { margin-top: 14px; padding: 12px 14px 14px; border-radius: 16px; background: rgba(0,0,0,.30); border: 1px solid rgba(212,175,55,.4); }
.ru-you-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 2px; }
.rummy-table .subhead { color: #f0d27a; }
.ru-seats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 12px; }
.ru-seat {
  min-width: 96px; padding: 8px 12px; border-radius: 14px; text-align: center;
  background: rgba(0,0,0,.34); border: 1px solid rgba(212,175,55,.4);
}
.ru-seat.me { border-color: var(--accent-2); }
.ru-seat.turn { border-color: #d4af37; box-shadow: 0 0 0 2px #d4af37, 0 0 18px rgba(212,175,55,.45); }
.ru-seat-name { font-weight: 800; color: #f3ead2; font-size: 14px; }
.ru-seat-score { color: #f0d27a; font-weight: 800; font-size: 13px; }
.ru-seat-cards { color: #cbbf9a; font-size: 12px; }
/* opponents' webcams at their Rummy seats (your own is the floating dock) */
.ru-seat .seat-cam { position: relative; width: 100%; max-width: 120px; aspect-ratio: 1 / 1; margin: 0 auto 6px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.45); display: grid; place-items: center; }
.ru-seat .seat-cam video { width: 100%; height: 100%; object-fit: cover; display: none; }
.ru-seat.has-cam .seat-cam video { display: block; }
.ru-seat .seat-off { font-weight: 800; color: #cbbf9a; font-size: 22px; }
.ru-seat.has-cam .seat-off { display: none; }

.ru-center { display: flex; gap: 40px; justify-content: center; align-items: flex-start; margin-top: 8px; }
.ru-pile-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ru-pile-label { color: #cbbf9a; font-size: 12px; font-weight: 700; }
.ru-stock {
  width: 66px; height: 94px; border-radius: 8px; position: relative; cursor: default;
  background: repeating-linear-gradient(45deg, #0f2a22 0 6px, #123a2e 6px 12px);
  border: 1px solid rgba(212,175,55,.6); box-shadow: 0 6px 14px rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.ru-stock.active { cursor: pointer; outline: 2px solid #f0d27a; }
.ru-stock-count { font-family: "Cinzel", serif; font-weight: 800; color: #f0d27a; font-size: 22px; }
.ru-discard { display: flex; flex-direction: row; align-items: flex-start; min-height: 78px; min-width: 56px; max-width: 330px; overflow-x: auto; padding: 2px; }
.ru-discard .pcard { width: 54px; height: 76px; flex: 0 0 auto; }
.ru-disc-card { box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.ru-disc-card:not(:first-child) { margin-left: -32px; } /* fan sideways so deeper cards' corners peek out */
.ru-disc-card.grabbing { outline: 2px solid rgba(240,210,122,.5); }
.ru-disc-card.grab-deepest { outline: 3px solid #f0d27a; box-shadow: 0 0 12px rgba(240,210,122,.75); z-index: 2; } /* the card you must meld */
/* selected pile cards lift UP in place — no z-index bump, so the rest of the fanned pile stays readable */
.ru-disc-card.ru-selected { outline: 3px solid var(--green); transform: translateY(-28px); }   /* added to your meld */
.ru-discard .pcard.selectable:hover { transform: translateY(-4px); }
.ru-empty { color: #9b8f70; font-style: italic; font-size: 13px; padding: 10px; }

.ru-melds { display: flex; flex-wrap: wrap; gap: 12px; }
.ru-meld { padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(212,175,55,.3); }
.ru-meld.layoff-target { border-color: #f0d27a; box-shadow: 0 0 0 2px rgba(240,210,122,.45); cursor: pointer; }
.ru-meld.layoff-dim { opacity: .4; } /* in lay-off mode, melds your selection can't extend are dimmed */
.ru-meld-owner { font-size: 11px; color: #cbbf9a; margin-bottom: 5px; font-weight: 700; }
.ru-meld-cards { display: flex; }
.ru-meld-cards .pcard { width: 38px; height: 54px; border-radius: 5px; }
.ru-meld-cards .pcard:not(:first-child) { margin-left: -16px; }
/* per-card "who laid it" badge (bottom-left so it shows even when cards overlap) */
.ru-by { position: absolute; bottom: 2px; left: 3px; font-size: 9px; font-weight: 800; line-height: 1; padding: 1px 4px; border-radius: 7px; background: rgba(0,0,0,.62); color: #f3ead2; }
.ru-by.me { background: var(--accent); color: #2a1340; }
.ru-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.ru-meld-cards .pcard .pr { font-size: 14px; } .ru-meld-cards .pcard .ps { font-size: 13px; }

#view-rummy .rummy-you { background: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(0,0,0,0.25)); border: 1px solid rgba(212,175,55,.4); padding: 14px 16px; }
/* sort toggle */
.ru-sort { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.ru-sort-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.ru-sort-btn { padding: 6px 14px; font-size: 13px; }
.ru-sort-btn.on { background: linear-gradient(135deg, #f0d27a, #c79a2b); color: #1a1407; border-color: transparent; }
/* hand: a single overlapping row, sorted low→high; corner index keeps each card readable */
.ru-hand { display: flex; flex-wrap: nowrap; justify-content: center; padding: 32px 6px 18px; } /* tall top padding so lifted/selected cards aren't clipped */
.ru-hand .pcard { flex: 0 0 auto; width: 52px; height: 74px; cursor: pointer; transition: transform .1s; }
.ru-hand .pcard:not(:first-child) { margin-left: -26px; }
.ru-hand .pcard .pr, .ru-hand .pcard .ps { display: none; } /* in the hand we rely on the corner index, not the big centre pips */
.ru-hand .pcard .ru-corner { font-size: 15px; }
/* selected cards slide UP in place — no z-index bump, so they don't cover the cards beside them */
.ru-hand .pcard.selectable:hover { transform: translateY(-10px); }
.ru-hand .pcard.ru-selected, .ru-hand .pcard.ru-selected.selectable:hover { transform: translateY(-22px); outline: 3px solid #f0d27a; }
/* corner index (top-left) — shown on every rummy card; centre pips elsewhere stay visible */
.pcard .ru-corner { position: absolute; top: 3px; left: 5px; display: flex; flex-direction: column; align-items: center; line-height: 1.02; font-weight: 800; font-size: 13px; }
/* the card you just drew: held face-up in the centre for a moment, then highlighted in hand */
.ru-draw-reveal { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.4); opacity: 0; z-index: 9998; text-align: center; pointer-events: none; transition: transform .28s cubic-bezier(.2,1.3,.5,1), opacity .28s; }
.ru-draw-reveal.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.ru-draw-reveal .pcard { width: 100px; height: 140px; box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.ru-draw-reveal .pcard .pr, .ru-draw-reveal .pcard .ps { display: flex; font-size: 38px; }
.ru-draw-reveal .ru-corner { font-size: 18px; }
.ru-draw-label { color: #f0d27a; font-family: "Cinzel", serif; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; }
.ru-hand .pcard.ru-new { outline: 3px solid var(--green); box-shadow: 0 0 14px rgba(56,211,159,.7); }
#view-rummy #ruLayoffBtn.on { background: linear-gradient(135deg, #f0d27a, #c79a2b); color: #1a1407; }
.ru-delta { color: #cbbf9a; font-weight: 600; font-size: 12px; }
@media (max-width: 560px) { .ru-center { gap: 18px; } .ru-hand .pcard { width: 48px; height: 68px; } .ru-hand .pcard:not(:first-child) { margin-left: -24px; } }

/* a single chip mid-flight from a seat to the pot (or back) */
.fly-chip {
  position: fixed; width: 22px; height: 22px; border-radius: 50%; z-index: 9999; pointer-events: none;
  border: 2px dashed rgba(255,255,255,.7); box-shadow: 0 3px 8px rgba(0,0,0,.5);
  background: radial-gradient(circle at 50% 32%, #f6e3a8, #d4af37 72%);
  transition: transform .55s cubic-bezier(.35,.85,.4,1), opacity .55s ease-in;
}

/* your own camera docked at the bottom-left during table games */
#selfCamDock { position: fixed; left: 16px; top: 42%; width: 150px; z-index: 45; cursor: move; touch-action: none; } /* draggable; defaults to the left margin, clear of the cards */
#selfCamDock.dragging { opacity: .9; }
#selfCamDock .vbtn { cursor: pointer; }
#selfCamDock > video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; background: #000; border: 2px solid rgba(212,175,55,.65); box-shadow: 0 8px 22px rgba(0,0,0,.55); display: block; }
#selfCamDock .selfcam-label { text-align: center; font-size: 12px; font-weight: 800; color: #f3ead2; margin-top: 4px; }
#selfCamDock .vctrls { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; margin: 0; }
@media (max-width: 560px) { #selfCamDock { width: 104px; left: 8px; top: 38%; } }

/* ---- Webcam bar ---- */
.video-bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(15, 8, 33, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px;
}
.video-tiles { display: flex; flex-wrap: wrap; gap: 10px; overflow-x: auto; justify-content: center; }
.vtile {
  position: relative; flex: 0 0 auto;
  width: var(--tileW, 220px); aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
  background: #000; border: 2px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
/* contain shows the whole frame (no cropping) even when a phone is held in portrait */
.vtile video { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.vtile .vname {
  position: absolute; bottom: 4px; left: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 999px;
}
.vctrls { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
/* audio-only remote tile: black bg, mic-icon overlay so it's obviously not a camera feed */
.vtile.audio-only { background: linear-gradient(135deg, #2a1a52, #1b1033); }
.vtile.audio-only video { visibility: hidden; }
.vaudio-only { display: none; position: absolute; inset: 0; place-items: center; color: #f4eefb; font-weight: 800; font-size: 14px; letter-spacing: .3px; background: rgba(0,0,0,.35); text-align: center; }
.vtile.audio-only .vaudio-only { display: grid; }
.vbtn {
  width: 26px; height: 26px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px;
  display: grid; place-items: center; line-height: 1;
}
.vbtn:hover { background: rgba(0,0,0,.78); }
.vbtn.off { background: var(--red); }
.vtile.vpaused video { opacity: .12; }
.vtile.vpaused::after {
  content: "Camera off"; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--muted);
  font-size: 12px; font-weight: 700; pointer-events: none;
}

/* ---- Trivia ---- */
.trivia-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .trivia-choices { grid-template-columns: 1fr; } }
.trivia-choice {
  display: flex; align-items: center; gap: 12px;
  text-align: left; font-family: var(--font); font-size: 16px; font-weight: 600;
  color: var(--text); cursor: pointer;
  padding: 16px 18px; border-radius: 14px;
  background: var(--panel); border: 2px solid rgba(255,255,255,.12);
  transition: transform .1s, border-color .15s, background .15s;
}
.trivia-choice:hover { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.trivia-choice .opt {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: rgba(255,255,255,.12); font-weight: 800; font-size: 15px;
}
.trivia-choice.picked { border-color: var(--accent); background: rgba(255,203,71,.12); }
.trivia-choice.locked { cursor: default; }
.trivia-choice.locked:hover { transform: none; }
.trivia-choice.correct {
  background: linear-gradient(135deg, var(--green), #2bb888); color: #08251c; border-color: transparent;
}
.trivia-choice.correct .opt { background: rgba(0,0,0,.18); }
.trivia-choice.wrong {
  background: linear-gradient(135deg, var(--red), #d6283c); color: #fff; border-color: transparent;
}
.trivia-choice.wrong .opt { background: rgba(0,0,0,.2); }

/* ---- Leaderboard ---- */
.leaderboard { display: grid; gap: 8px; }
.lb-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.10);
}
.lb-row.me { border-color: var(--accent); background: rgba(255,203,71,.1); }
.lb-rank { font-weight: 800; color: var(--muted); text-align: center; }
.lb-name { font-weight: 600; }
.lb-tick { color: var(--green); font-weight: 800; }
.lb-score { font-weight: 800; font-size: 18px; color: var(--accent); }

/* ---- Uno seats: opponents around the table ---- */
.useats { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 6px; }
.useat {
  position: relative;
  width: auto; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border-radius: 16px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.10);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.useat.me { border-color: var(--accent-2); }
.useat.turn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(255,203,71,.4); transform: translateY(-3px); }
.seat-cam {
  position: relative; width: var(--seatW, 116px); aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: #1c1138; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.10);
}
.seat-cam video { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); display: none; }
.useat.has-cam .seat-cam video { display: block; }
.seat-off {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #2a1340; font-weight: 800; font-size: 20px;
}
.useat.has-cam .seat-off { display: none; }
.seat-cards { display: flex; align-items: center; height: 36px; }
.cardback {
  width: 24px; height: 34px; border-radius: 5px; flex: 0 0 auto;
  background: repeating-linear-gradient(45deg, #2a1340, #2a1340 4px, #3a1c5a 4px, #3a1c5a 8px);
  border: 1.5px solid rgba(255,255,255,.55);
}
.seat-count { margin-left: 8px; font-weight: 800; font-size: 14px; color: var(--accent); }
.seat-name {
  font-weight: 700; font-size: 13px; text-align: center; max-width: 124px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 520px) { .useat { min-width: 80px; } }

/* ============================================================
   WINNER CROWN + CONFETTI
   ============================================================ */
.win-crown {
  font-size: 78px; line-height: 1; display: inline-block; margin-bottom: 4px;
  animation: crownDrop 1s cubic-bezier(.2,.8,.3,1) both, crownGlow 2.2s ease-in-out .9s infinite;
  filter: drop-shadow(0 6px 14px rgba(255,203,71,.6));
}
@keyframes crownDrop {
  0%   { transform: translateY(-130px) scale(.4) rotate(-25deg); opacity: 0; }
  55%  { transform: translateY(8px) scale(1.15) rotate(6deg); opacity: 1; }
  75%  { transform: translateY(-5px) rotate(-4deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes crownGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,203,71,.5)); }
  50%     { filter: drop-shadow(0 0 22px rgba(255,203,71,.95)); }
}
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 55; }
.confetti i {
  position: absolute; top: -16px; width: 10px; height: 14px; border-radius: 2px;
  opacity: .9; animation: confFall 2.8s linear forwards;
}
@keyframes confFall {
  0%   { transform: translateY(-10px) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: translateY(104vh) rotate(calc(var(--rot, 0deg) + 540deg)); opacity: .9; }
}

/* ============================================================
   CAMERA SETTINGS MENU + SIDE PLACEMENT
   ============================================================ */
.cam-menu {
  position: absolute; top: 44px; right: 0; z-index: 40;
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow);
  min-width: 220px;
}
.cam-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.cam-row > span { font-size: 13px; color: var(--muted); font-weight: 700; }
.cam-opts { display: flex; gap: 6px; }
.cam-opts button {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--text);
  border-radius: 9px; padding: 6px 10px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--font);
}
.cam-opts button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; border-color: transparent; }

/* side placement: a vertical strip floating on the right (uses empty margin on wide screens) */
.video-bar.side {
  position: fixed; top: 64px; right: 8px; left: auto; bottom: auto; width: auto;
  background: transparent; backdrop-filter: none; border: none; padding: 0;
  max-height: 84vh; overflow-y: auto; z-index: 25;
}
.video-bar.side .video-tiles { flex-direction: column; flex-wrap: nowrap; }

/* ============================================================
   v22 POLISH — Uno turn clarity, session scoreboard, poker extras
   ============================================================ */

/* ---- Uno: big turn cue ---- */
.uno-turn-cue {
  text-align: center; font-weight: 900; letter-spacing: 1px;
  border-radius: 14px; padding: 10px 16px; margin: 4px auto 12px; max-width: 360px;
  font-size: 20px; box-shadow: var(--shadow);
}
.uno-turn-cue.mine { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; animation: cuePulse 1.1s ease-in-out infinite; }
.uno-turn-cue.draw { background: linear-gradient(135deg, var(--blue), var(--green)); color: #06243a; animation: cuePulse 1.1s ease-in-out infinite; }
.uno-turn-cue.other { background: var(--panel); color: var(--muted); font-size: 15px; font-weight: 700; }
@keyframes cuePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---- Uno: direction arrow + draw-prompt deck glow ---- */
.uno-dir-arrow {
  font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1;
  margin-bottom: 4px; transition: transform .35s ease;
}
.uno-dir-arrow.ccw { color: var(--accent-2); }
.deck-pile.need-draw { animation: deckGlow 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--blue), 0 0 18px rgba(74,168,255,.6); }
@keyframes deckGlow { 0%, 100% { box-shadow: 0 0 0 3px var(--blue), 0 0 14px rgba(74,168,255,.5); } 50% { box-shadow: 0 0 0 4px var(--green), 0 0 26px rgba(56,211,159,.7); } }

/* ---- Uno: ~1s Reverse / Skip flash ---- */
.uno-fx-flash {
  position: fixed; inset: 0; display: none; place-items: center; pointer-events: none; z-index: 60;
  font-size: 56px; font-weight: 900; letter-spacing: 2px; text-align: center;
}
.uno-fx-flash.show { display: grid; }
.uno-fx-flash.reverse { color: var(--accent-2); text-shadow: 0 0 24px rgba(255,107,157,.8); animation: fxReverse 1s ease-out forwards; }
.uno-fx-flash.skip { color: var(--red); text-shadow: 0 0 24px rgba(255,90,110,.8); animation: fxSkip 1s ease-out forwards; }
@keyframes fxReverse { 0% { opacity: 0; transform: scale(.6) rotate(-180deg); } 25% { opacity: 1; transform: scale(1.1) rotate(0deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes fxSkip { 0% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }

/* ---- Session scoreboard (lobby) ---- */
.scoreboard { display: flex; flex-direction: column; gap: 6px; }
.score-row {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: center;
  background: var(--panel); border-radius: 12px; padding: 8px 12px; font-size: 14px;
}
.score-row.me { background: rgba(255,203,71,.16); border: 1px solid rgba(255,203,71,.4); }
.score-rank { font-weight: 900; color: var(--accent); text-align: center; }
.score-name { font-weight: 800; }
.score-wins { font-weight: 800; color: var(--green); }
.score-played { color: var(--muted); font-size: 12px; }
.score-bygame { grid-column: 1 / -1; color: var(--muted); font-size: 11px; padding-left: 34px; }

/* ---- Poker: showdown headline ---- */
.poker-headline {
  text-align: center; max-width: 640px; margin: 0 auto 8px;
  font-family: "Cinzel", serif; font-weight: 700; font-size: 18px; letter-spacing: .5px;
  color: #2a1340; background: linear-gradient(135deg, #f0d27a, #d4af37);
  border-radius: 12px; padding: 8px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
  animation: pop .3s ease;
}

/* ---- Poker: draw count + sit-out + winning seat ---- */
.pseat .pseat-drew { font-size: 10px; color: #b7e8d2; font-weight: 700; min-height: 12px; }
.pseat.sitting-out { opacity: .5; filter: grayscale(.4); }
.pseat.hand-winner { border-color: #ffd23f !important; box-shadow: 0 0 0 2px #ffd23f, 0 0 26px rgba(255,210,63,.7) !important; animation: cuePulse 1s ease-in-out 2; }
#pSitOutBtn.on { background: linear-gradient(135deg, var(--green), var(--blue)); color: #06243a; }

/* ---- Poker: per-seat confetti pop at hand end ---- */
.seat-pop { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.seat-pop i { position: absolute; top: 50%; width: 8px; height: 10px; border-radius: 2px; opacity: .95; animation: seatPop .9s ease-out forwards; }
@keyframes seatPop { 0% { transform: translateY(0) scale(.4); opacity: 1; } 100% { transform: translateY(-70px) scale(1) rotate(220deg); opacity: 0; } }

/* ============================================================
   v23 — group room: game switcher, spectator hint, room chat
   ============================================================ */

/* ---- spectator / waiting hint (join anytime) ---- */
#spectateHint {
  position: fixed; left: 50%; top: 52px; transform: translateX(-50%); z-index: 60;
  max-width: min(92vw, 460px); text-align: center;
  background: var(--panel-solid); color: var(--text); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 8px 16px; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow);
}

/* ---- room chat ---- */
#chatToggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 24px; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .3s;
}
#chatToggle.on { filter: brightness(.92); }
#chatToggle.unread { animation: chatWiggle 1.4s ease-in-out infinite; box-shadow: 0 6px 22px rgba(255,90,110,.55); }
@keyframes chatWiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-10deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-6deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(0deg); }
}
.chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--red, #ff5a6e); color: #fff;
  font-size: 12px; font-weight: 900; line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  border: 2px solid #2a1340;
  animation: chatBadgePulse 1.2s ease-in-out infinite;
}
@keyframes chatBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 0 rgba(255,90,110,.55); }
  50% { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 8px rgba(255,90,110,0); }
}
/* Fly-out preview bubble so a new chat message is impossible to miss even when the toggle is out of the eyeline. */
#chatPreview {
  position: fixed; right: 80px; bottom: 22px; z-index: 9001;
  max-width: min(320px, 60vw); padding: 10px 14px;
  background: var(--panel-solid); color: var(--text);
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 13px; line-height: 1.4;
  opacity: 0; transform: translateX(12px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#chatPreview.show { opacity: 1; transform: translateX(0); pointer-events: auto; cursor: pointer; }
#chatPreview .chat-preview-name { font-weight: 800; color: var(--accent); margin-right: 6px; }
#chatPreview .chat-preview-body { display: block; margin-top: 2px; word-break: break-word; }
#chatPanel {
  position: fixed; right: 18px; bottom: 82px; z-index: 9000;
  width: min(340px, 92vw); height: min(460px, 62vh);
  display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-weight: 800; font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.chat-head button {
  background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; font-weight: 800;
}
.chat-head button:hover { color: var(--text); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 85%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; text-align: right; }
.chat-meta { font-size: 10px; color: var(--muted); display: flex; gap: 6px; margin-bottom: 2px; }
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-name { font-weight: 800; color: var(--accent); }
.chat-body {
  display: inline-block; background: var(--panel); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 7px 11px; font-size: 14px; word-break: break-word; white-space: pre-wrap; text-align: left;
}
.chat-msg.mine .chat-body { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; border-color: transparent; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.chat-input input {
  flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.2); color: var(--text); font-family: var(--font); font-size: 14px;
}
.chat-input button {
  border: none; border-radius: 10px; padding: 0 14px; font-weight: 800; cursor: pointer; font-family: var(--font);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340;
}

/* ============================================================
   Scrabble
   ============================================================ */
.ss-wrap { max-width: 780px; margin: 12px auto 0; padding: 0 6px; }
.ss-col-board { min-width: 0; }
.ss-col-side { min-width: 0; }
/* The bag count lives in the topbar in stacked mode and in the side column in side mode — never both. */
.ss-side-bag { display: none; }
/* Side-by-side layout: board on the left, everything else on the right. Only opt-in above 820px. */
@media (min-width: 820px) {
  .ss-wrap.side {
    display: grid;
    /* Board column allowed to breathe on wider screens; side column tightened because the rack tiles
       are shrunk (below) so a smaller side reserves more room for the board without wrapping. */
    grid-template-columns: minmax(340px, 900px) minmax(360px, 400px);
    gap: 20px;
    max-width: 1460px;
    align-items: start;
    /* Reserve room on the right for the side video bar (fixed right:8, width ~150) so cams don't overlap the controls. */
    padding-right: 170px;
  }
  .ss-wrap.side .ss-seats { justify-content: flex-start; margin-top: 0; }
  .ss-wrap.side .ss-rack { min-height: 56px; gap: 6px; padding: 6px; }
  .ss-wrap.side .ss-board { max-width: 100%; }
  .ss-wrap.side .ss-side-bag { display: block; }
  /* Side mode: rack tiles a touch smaller so all 7 fit comfortably in the narrower right column. */
  .ss-wrap.side .ss-rack .ss-tile { width: 40px; height: 48px; }
  .ss-wrap.side .ss-rack .ss-tile .ss-letter { font-size: 21px; }
  .ss-wrap.side .ss-rack .ss-tile .ss-val { font-size: 10px; bottom: 2px; right: 4px; }
}
.ss-seats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 12px; }
.ss-seat {
  min-width: 108px; padding: 8px 12px; border-radius: 12px; text-align: center;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
}
.ss-seat.me { border-color: var(--accent-2); }
.ss-seat.turn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(255,203,71,.45); }
.ss-seat.off { opacity: .55; }
.ss-seat-name { font-weight: 800; font-size: 14px; }
.ss-seat-score { color: var(--accent); font-weight: 800; font-size: 15px; margin-top: 2px; }
.ss-seat-cards { color: var(--muted); font-size: 12px; }

.ss-board-wrap {
  overflow-x: auto;
  padding: 4px 0;
}
.ss-board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 2px;
  background: #14082a;
  border: 3px solid #4a3d70;
  border-radius: 8px;
  padding: 4px;
  width: 100%;
  max-width: 720px;
  min-width: 360px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.ss-cell {
  position: relative;
  background: #3d2c66;
  border-radius: 3px;
  display: grid; place-items: center;
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 1 / 1;
}
.ss-cell:hover { outline: 1px solid rgba(255,255,255,.4); }
.ss-cell.ss-tw { background: #c22839; }
.ss-cell.ss-dw { background: #d96395; }
.ss-cell.ss-tl { background: #2b6ec4; }
.ss-cell.ss-dl { background: #6aaee2; color: #1a1a1a; }
.ss-cell.ss-center { background: #d96395; }
.ss-cell.ss-has { background: linear-gradient(160deg, #f7e9c6, #e6cf99); }
.ss-cell.ss-staged { background: linear-gradient(160deg, #ffe38a, #f4b52a); box-shadow: inset 0 0 0 2px #7a4d00; }
.ss-prem-label {
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  color: rgba(255,255,255,.9);
  letter-spacing: .3px;
  padding: 0 1px;
}
.ss-cell.ss-center .ss-prem-label { font-size: 18px; color: #fff; }
.ss-cell.ss-dl .ss-prem-label { color: #1a1a1a; }

/* On smaller board sizes, hide the premium label — the color already tells the story */
@media (max-width: 640px) {
  .ss-prem-label { font-size: 0; }
  .ss-cell.ss-center .ss-prem-label { font-size: 14px; }
}

/* Tiles (both on board and in rack) */
.ss-tile-inner {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #2a1a05;
  font-weight: 800;
  line-height: 1;
}
.ss-cell .ss-tile-inner { border-radius: 3px; }
.ss-cell .ss-letter { font-size: 15px; font-weight: 900; }
.ss-cell .ss-val { position: absolute; bottom: 1px; right: 2px; font-size: 8px; color: rgba(0,0,0,.75); font-weight: 700; }
.ss-tile-inner.ss-blank { color: #6a3a04; background: linear-gradient(160deg, #fff5d8, #f0d998); border-radius: 3px; }

@media (max-width: 560px) {
  .ss-cell .ss-letter { font-size: 11px; }
  .ss-cell .ss-val { font-size: 7px; }
}
@media (max-width: 420px) {
  .ss-cell .ss-letter { font-size: 9px; }
  .ss-cell .ss-val { display: none; }
}

.ss-rack-panel { margin-top: 16px; }
.ss-rack {
  display: flex; justify-content: center; gap: 8px; padding: 8px;
  border-radius: 14px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  min-height: 66px; flex-wrap: wrap;
}
.ss-tile {
  width: 46px; height: 54px;
  background: linear-gradient(160deg, #f7e9c6, #e6cf99);
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.15);
  cursor: pointer;
  position: relative;
  transition: transform .12s;
  border: 2px solid transparent;
}
.ss-tile .ss-letter { font-size: 24px; }
.ss-tile .ss-val { position: absolute; bottom: 3px; right: 5px; font-size: 11px; color: rgba(0,0,0,.7); }
.ss-tile:hover { transform: translateY(-3px); }
.ss-tile.sel { border-color: var(--green); box-shadow: 0 6px 16px rgba(56,211,159,.5), inset 0 -3px 0 rgba(0,0,0,.15); transform: translateY(-8px); }
.ss-tile.exch { border-color: var(--red); }
.ss-tile.used { opacity: .35; pointer-events: none; }

.ss-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.ss-controls .btn { padding: 10px 18px; font-size: 14px; }
.ss-status { text-align: center; color: var(--muted); margin-top: 10px; min-height: 20px; font-size: 14px; }

.ss-last-play { margin: 10px auto; max-width: 680px; text-align: center; color: var(--text); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 14px; font-size: 14px; }
.ss-bingo { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; margin: 0 6px; }
.ss-chal-tag { color: var(--red); font-weight: 700; }

.ss-blank-picker {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 60;
}
.ss-blank-inner {
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  padding: 18px 20px; max-width: 380px; text-align: center;
  box-shadow: var(--shadow);
}
.ss-blank-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.ss-blank-grid .pchip { padding: 8px 0; font-weight: 800; text-align: center; }

/* ============================================================
   Hangman
   ============================================================ */
.hm-wrap { max-width: 780px; margin: 12px auto 0; padding: 0 8px; }
.hm-top { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 640px) { .hm-top { grid-template-columns: 1fr; } }
.hm-gallows { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 10px; }
.hm-gallows svg { display: block; margin: 0 auto; max-height: 320px; }
.hm-gallows .hm-head, .hm-gallows .hm-body,
.hm-gallows .hm-left-arm, .hm-gallows .hm-right-arm,
.hm-gallows .hm-left-leg, .hm-gallows .hm-right-leg { opacity: 0; transition: opacity .35s; }
/* Death face + tongue: hidden until .dead is toggled on the gallows box, then animate in */
.hm-gallows .hm-death { opacity: 0; transition: opacity .3s .1s; }
.hm-gallows .hm-tongue { opacity: 0; transform: translateY(-4px); transform-origin: 150px 85px; transition: opacity .35s .25s, transform .5s cubic-bezier(.5,1.6,.4,1) .25s; }
.hm-gallows.dead .hm-death { opacity: 1; }
.hm-gallows.dead .hm-tongue { opacity: 1; transform: translateY(0); }
@keyframes hmTongueWiggle { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(2px) rotate(4deg); } }
.hm-strikes { text-align: center; color: var(--muted); font-size: 12px; margin-top: 6px; letter-spacing: .3px; }

/* Mini per-seat gallows (group mode) */
.hm-mini-gallows { display: inline-block; width: 44px; height: 54px; margin: 4px auto 2px; }
.hm-mini-gallows svg { display: block; width: 100%; height: 100%; }
.hm-mini-gallows .mini-death { opacity: 0; transition: opacity .3s; }
.hm-mini-gallows .mini-tongue { opacity: 0; transition: opacity .3s .2s; }
.hm-mini-gallows.dead .mini-death { opacity: 1; }
.hm-mini-gallows.dead .mini-tongue { opacity: 1; }
.hm-seat.hung { background: linear-gradient(160deg, rgba(255,90,110,0.12), rgba(0,0,0,0.35)); border-color: rgba(255,90,110,0.55); }
.hm-seat-parts { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .3px; }

.hm-word-panel { min-width: 0; }
.hm-status { text-align: center; color: var(--muted); font-size: 14px; margin: 6px 0 12px; min-height: 20px; }
.hm-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 4px 0 14px; }
.hm-letter {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 40px; padding: 0 6px;
  border-bottom: 3px solid rgba(255,255,255,.35);
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 26px; letter-spacing: .5px;
  color: var(--text);
}
.hm-letter.hm-space { border-bottom: none; min-width: 18px; }
.hm-letter.hm-blank { color: transparent; }
.hm-letter.hm-shown { color: var(--accent); }
.hm-wrong-label { text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .4px; margin-top: 4px; }
.hm-wrong { text-align: center; color: var(--red); font-weight: 800; font-size: 20px; letter-spacing: 6px; margin-top: 2px; min-height: 24px; }

.hm-letters { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; max-width: 640px; margin: 0 auto; }
@media (max-width: 520px) { .hm-letters { grid-template-columns: repeat(7, 1fr); } }
.hm-key {
  padding: 10px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12); color: var(--text);
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 15px;
  cursor: pointer; transition: transform .1s, background .15s, opacity .15s;
}
.hm-key.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; border-color: transparent; }
.hm-key.active:hover { transform: translateY(-2px); }
/* Used letters read as clearly "spent" — dim, red-tinted, struck through. */
.hm-key.used {
  opacity: .5; text-decoration: line-through; cursor: not-allowed;
  background: rgba(255,90,110,.12); color: rgba(255,180,190,.6); border-color: rgba(255,90,110,.25);
}
.hm-key:disabled { cursor: not-allowed; }
/* NOT-your-turn but still available: keep full brightness so you can read the grid clearly.
   The bright "active" gradient is what signals "your turn to click." */
.hm-key:disabled:not(.used) { opacity: 1; }

.hm-scores { margin-top: 16px; }
.hm-seats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hm-seat {
  min-width: 96px; padding: 8px 12px; border-radius: 12px; text-align: center;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
}
.hm-seat.me { border-color: var(--accent-2); }
.hm-seat.setter { background: linear-gradient(135deg, rgba(255,203,71,.15), rgba(255,107,157,.1)); }
.hm-seat.turn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(255,203,71,.4); }
.hm-seat.off { opacity: .5; }
.hm-seat-name { font-weight: 800; font-size: 13px; }
.hm-seat-score { color: var(--accent); font-weight: 900; font-size: 20px; margin-top: 2px; }
.hm-seat-round { color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: .2px; margin-left: 2px; vertical-align: middle; }

.hm-setter-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 60;
}
.hm-setter-inner {
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  padding: 20px 22px; max-width: 420px; width: calc(100% - 40px); text-align: center;
  box-shadow: var(--shadow);
}
/* Generic overlay modal (exit confirmation, first-time rules popup, host manage panel). */
.fgn-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 9500;
  padding: 20px;
  animation: fgnModalIn .2s ease-out;
}
@keyframes fgnModalIn { from { opacity: 0; } to { opacity: 1; } }
.fgn-modal-inner {
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.2); border-radius: 18px;
  padding: 22px 24px; max-width: 520px; width: 100%; box-shadow: var(--shadow);
  max-height: 88vh; overflow-y: auto;
}
.fgn-modal-inner h3 { margin: 0 0 10px; font-weight: 900; }
.fgn-manage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.24);
  margin-bottom: 6px;
}
.fgn-manage-row .fgn-manage-name { font-weight: 800; }
.fgn-manage-row .fgn-manage-tag { color: var(--muted); font-size: 12px; font-weight: 700; margin-left: 6px; }
.fgn-boot-btn {
  background: rgba(255,90,110,.16); border: 1px solid rgba(255,90,110,.4); color: #ffd7dc;
  border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: 12px; cursor: pointer;
}
.fgn-boot-btn:hover { background: rgba(255,90,110,.28); }
.fgn-boot-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Landing 'name + avatar' row: avatar chip sits left of the name input. */
.landing-name-row { display: flex; gap: 10px; align-items: stretch; }
.landing-avatar-preview {
  flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,203,71,.35);
  font-size: 30px; line-height: 1; color: initial;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, border-color .1s, background .1s;
}
.landing-avatar-preview:hover { transform: translateY(-1px); border-color: var(--accent); background: rgba(255,203,71,.10); }
.landing-name-row .setup + input, .landing-name-row input[type=text] { flex: 1 1 auto; }

/* Avatar picker */
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  max-height: 60vh; overflow-y: auto;
  padding: 6px; border-radius: 12px; background: rgba(0,0,0,.24);
}
.avatar-choice {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  border-radius: 10px; cursor: pointer;
  font-size: 26px; line-height: 1; color: initial;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, border-color .1s, background .1s;
}
.avatar-choice:hover { transform: scale(1.08); border-color: var(--accent); background: rgba(255,203,71,.10); }
.avatar-choice.active { border-color: var(--accent); background: linear-gradient(135deg, rgba(255,203,71,.20), rgba(255,107,157,.15)); box-shadow: 0 0 0 2px rgba(255,203,71,.35); }
/* Avatar shown inside chips (lobby player rows) */
.chip-avatar { display: inline-block; font-size: 18px; margin-right: 2px; color: initial; vertical-align: middle; }
.chip-avatar.editable, .chip-name.editable {
  cursor: pointer; border-radius: 8px; padding: 0 2px;
  transition: background .1s, transform .1s;
}
.chip-avatar.editable:hover, .chip-name.editable:hover {
  background: rgba(0,0,0,.2);
  transform: translateY(-1px);
}
/* Avatar in chat messages */
.chat-avatar { display: inline-block; font-size: 15px; margin-right: 4px; color: initial; }

/* Per-turn countdown timer */
.hm-timer { max-width: 420px; margin: 12px auto 0; }
.hm-timer-bar {
  height: 10px; border-radius: 999px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); overflow: hidden;
}
.hm-timer-fill {
  height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .2s linear, background .3s;
}
.hm-timer-fill.low { background: linear-gradient(90deg, var(--red), #c93a4d); animation: hmTimerPulse .6s ease-in-out infinite alternate; }
@keyframes hmTimerPulse { from { opacity: .7; } to { opacity: 1; } }
.hm-timer-text { text-align: center; color: var(--muted); font-size: 13px; margin-top: 4px; font-weight: 700; letter-spacing: .3px; }

/* Pause overlay: blackout with a big pause icon */
.hm-pause-overlay {
  position: fixed; inset: 0; background: rgba(5, 3, 15, .88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 70;
}
.hm-pause-inner { text-align: center; color: var(--text); }
.hm-pause-inner .subhead { font-size: 22px; font-weight: 900; letter-spacing: 2px; }

/* Round-over splash */
.hm-round-splash {
  position: fixed; inset: 0; background: rgba(5, 3, 15, .82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 65; padding: 20px;
  animation: hmSplashIn .35s cubic-bezier(.2, 1.2, .3, 1);
}
@keyframes hmSplashIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.hm-round-inner {
  background: var(--panel-solid); border: 1px solid rgba(255,255,255,.2); border-radius: 20px;
  padding: 22px 26px 20px; max-width: 640px; width: 100%; text-align: center;
  box-shadow: var(--shadow);
}
.hm-round-headline {
  font-family: "Cinzel", "Poppins", serif; font-weight: 900; font-size: 32px; letter-spacing: 4px;
  margin: 0 0 14px;
}
.hm-round-headline.solved { color: var(--green); text-shadow: 0 0 24px rgba(56, 211, 159, .5); }
.hm-round-headline.hung { color: var(--red); text-shadow: 0 0 24px rgba(255, 90, 110, .5); }
.hm-round-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.hm-round-tile {
  display: inline-grid; place-items: center;
  min-width: 32px; height: 44px; padding: 0 8px;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  color: #2a1340; font-weight: 900; font-size: 26px; letter-spacing: 1px;
  border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  animation: hmTilePop .4s cubic-bezier(.3, 1.6, .4, 1) backwards;
}
.hm-round-tile.space { background: transparent; box-shadow: none; min-width: 12px; }
.hm-round-tile:nth-child(1)  { animation-delay: .05s; }
.hm-round-tile:nth-child(2)  { animation-delay: .10s; }
.hm-round-tile:nth-child(3)  { animation-delay: .15s; }
.hm-round-tile:nth-child(4)  { animation-delay: .20s; }
.hm-round-tile:nth-child(5)  { animation-delay: .25s; }
.hm-round-tile:nth-child(6)  { animation-delay: .30s; }
.hm-round-tile:nth-child(7)  { animation-delay: .35s; }
.hm-round-tile:nth-child(8)  { animation-delay: .40s; }
.hm-round-tile:nth-child(9)  { animation-delay: .45s; }
.hm-round-tile:nth-child(n+10) { animation-delay: .5s; }
@keyframes hmTilePop { from { transform: translateY(-8px) scale(.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.hm-round-attrib { color: var(--muted); font-size: 15px; font-weight: 700; margin: 4px 0 14px; min-height: 20px; }
.hm-round-breakdown {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0,0,0,.28); border-radius: 12px; padding: 10px 12px; margin: 8px 0 14px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.hm-round-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 4px 6px; border-radius: 8px;
}
.hm-round-row.me { background: rgba(255, 203, 71, .08); }
.hm-round-row.winner {
  background: linear-gradient(90deg, rgba(56, 211, 159, .18), rgba(56, 211, 159, .05));
  border: 1px solid rgba(56, 211, 159, .35);
}
.hm-round-row.winner .hm-round-name { color: var(--green); }
.hm-round-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hm-round-name { text-align: left; font-weight: 800; }
.hm-round-delta { color: var(--green); font-weight: 900; font-size: 18px; min-width: 44px; text-align: right; }
.hm-round-total { color: var(--muted); font-size: 12px; font-weight: 700; }
.hm-round-actions { margin-top: 6px; }
.hm-round-wait { color: var(--muted); font-style: italic; font-size: 14px; padding: 8px; }
.hm-rules-section-title {
  font-family: "Cinzel", "Poppins", serif; font-weight: 700; font-size: 14px; letter-spacing: 1.5px;
  color: var(--accent); text-transform: uppercase;
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hm-rules-section-title:first-child { margin-top: 4px; }
.hm-round-splash-gallows { width: 140px; margin: 0 auto 6px; }
.hm-round-splash-gallows .hm-splash-death,
.hm-round-splash-gallows .hm-splash-tongue { opacity: 0; }
.hm-round-splash-gallows.dead .hm-splash-death { opacity: 1; }
.hm-round-splash-gallows.dead .hm-splash-tongue { opacity: 1; }

/* ============================================================
   YAHTZEE
   ============================================================ */
.yz-wrap { max-width: 900px; margin: 12px auto 0; padding: 0 8px; }
.yz-diceboard {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px;
  text-align: center;
}
.yz-dice { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.yz-die {
  position: relative;
  width: 68px; height: 68px; border-radius: 14px;
  background: linear-gradient(180deg, #fefefe, #ddd); color: #222;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s;
  cursor: default;
}
.yz-die.tap { cursor: pointer; }
.yz-die.tap:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.yz-die.held {
  background: linear-gradient(180deg, #ffd66b, #f7a92b); color: #2a1340;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 0 3px rgba(255,203,71,.35);
}
/* Unrolled placeholder: dashed empty slot so it reads as "not yet rolled". */
.yz-die.unrolled {
  background: transparent;
  border: 2px dashed rgba(255,255,255,.28);
  box-shadow: none;
}
/* Roll animation: dice that changed value since the last render tumble briefly.
   Face fades in halfway through so the new number "lands" cleanly. */
.yz-die.rolling { animation: yzTumble .55s cubic-bezier(.3, 1.6, .5, 1); }
.yz-die.rolling .yz-die-face { animation: yzFaceFade .55s ease-out; }
@keyframes yzTumble {
  0%   { transform: translateY(-14px) rotate(-160deg) scale(.85); }
  55%  { transform: translateY(3px) rotate(15deg) scale(1.05); }
  75%  { transform: translateY(-1px) rotate(-6deg) scale(1); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes yzFaceFade {
  0%, 40% { opacity: .35; }
  100%    { opacity: 1; }
}
.yz-die-face { display: block; width: 100%; height: 100%; }
/* 3x3 grid of pip positions; the die decides which cells actually get a dot. */
.yz-pipgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%; padding: 12px; box-sizing: border-box;
}
.yz-pipcell { display: flex; align-items: center; justify-content: center; }
.yz-pip {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: #222; box-shadow: inset 0 -2px 2px rgba(0,0,0,.35);
}
.yz-die.held .yz-pip { background: #2a1340; }
.yz-die-empty {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 34px; color: rgba(255,255,255,.35);
}
.yz-die-lock { position: absolute; top: -6px; right: -6px; font-size: 16px; }
.yz-rollrow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.yz-rollhint { color: var(--muted); font-size: 13px; }
.yz-tip { color: var(--accent); font-size: 12px; font-weight: 800; margin: 6px 0 0; min-height: 16px; }

/* Scorecard */
.yz-cardwrap { margin-top: 14px; }
.yz-card-scroll { overflow-x: auto; }
.yz-card {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(0,0,0,.28); border-radius: 14px; overflow: hidden;
  font-size: 14px;
}
.yz-card th, .yz-card td {
  padding: 8px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06);
  min-width: 64px;
}
.yz-card thead th {
  background: rgba(0,0,0,.35); font-weight: 800; letter-spacing: .5px;
  color: var(--text);
}
.yz-card thead th.turn { color: var(--accent); }
.yz-card th.yz-catcol { text-align: left; font-weight: 700; color: var(--muted); min-width: 180px; }
.yz-card tr.upper th.yz-catcol { color: var(--text); }
.yz-card tr.lower th.yz-catcol { color: var(--text); }
.yz-card tr.subtotal { background: rgba(255,255,255,.04); font-weight: 800; }
.yz-card tr.bonus { background: rgba(255,255,255,.04); }
.yz-card tr.total { background: rgba(255,203,71,.10); font-weight: 900; font-size: 15px; }
.yz-card td.me { background: rgba(255, 203, 71, .06); }
.yz-card td.turn { border-left: 2px solid var(--accent); }
.yz-card td.filled { color: var(--text); font-weight: 800; }
.yz-card td.open { color: var(--muted); }
.yz-card td.won { color: var(--green); font-weight: 900; }
.yz-card td.winner {
  background: linear-gradient(90deg, rgba(56,211,159,.22), rgba(56,211,159,.06));
  color: var(--green);
}
.yz-pick {
  background: rgba(255, 203, 71, .16); border: 1px solid rgba(255, 203, 71, .5);
  color: var(--text); font-weight: 900; font-size: 14px;
  border-radius: 8px; padding: 4px 10px; cursor: pointer; min-width: 46px;
  transition: background .15s, transform .1s;
}
.yz-pick:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1340; transform: translateY(-1px); }

/* ============================================================
   CHUTES AND LADDERS
   ============================================================ */
.cl-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 300px);
  gap: 20px;
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 0 6px;
  align-items: start;
}
@media (max-width: 780px) { .cl-wrap { grid-template-columns: 1fr; } }
.cl-board-col { min-width: 0; }
/* Wrap so the SVG overlay can sit on top of the grid without disturbing layout. */
.cl-board-wrap { position: relative; }
.cl-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr); /* lock rows equal-height so pawns don't push their row bigger */
  gap: 3px;
  background: rgba(0,0,0,.3);
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 1 / 1;
  width: 100%;
}
.cl-sq { overflow: hidden; } /* pawns render on the SVG-overlay layer anyway; the cell can't stretch */
.cl-overlay {
  position: absolute; inset: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  pointer-events: none;
  z-index: 2;
}
/* Ladder rails + rungs: warm gold, semi-transparent so numbers underneath remain readable. */
.cl-overlay .cl-ladder line {
  stroke: #ffcb47; stroke-width: .35;
  stroke-linecap: round; opacity: .95;
  filter: drop-shadow(0 0 .4px rgba(0,0,0,.6));
}
/* Chute slide: red band with a slightly darker edge outline; a pink dot marks the head. */
.cl-overlay .cl-chute-band {
  fill: rgba(255, 90, 110, .55);
}
.cl-overlay .cl-chute-edge {
  fill: none; stroke: #ff3552; stroke-width: .4;
  stroke-linecap: round;
}
.cl-overlay .cl-chute-head-dot {
  fill: #ff6b7d; stroke: #ffd9dd; stroke-width: .3;
}
.cl-sq {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
  padding: 3px 4px;
  overflow: hidden;
}
.cl-sq.goal {
  background: linear-gradient(135deg, rgba(255,203,71,.35), rgba(255,107,157,.35));
  border-color: rgba(255,203,71,.75);
  box-shadow: 0 0 0 2px rgba(255,203,71,.35), 0 0 16px rgba(255,203,71,.4);
}
.cl-goal-star {
  font-size: 22px; line-height: 1;
  align-self: center; text-align: center;
  filter: drop-shadow(0 0 4px rgba(255,203,71,.9)) drop-shadow(0 0 8px rgba(255,203,71,.4));
}
.cl-sq.ladder-foot { background: rgba(56,211,159,.10); border-color: rgba(56,211,159,.35); }
.cl-sq.chute-head  { background: rgba(255,90,110,.10); border-color: rgba(255,90,110,.35); }
.cl-num { font-size: 10px; color: var(--muted); font-weight: 700; align-self: flex-start; line-height: 1; }
.cl-endpoint {
  font-size: 8px; font-weight: 800; line-height: 1;
  align-self: center; text-align: center;
  padding: 1px 3px; border-radius: 6px;
  background: rgba(0,0,0,.35);
}
.cl-endpoint.ladder-endpoint { color: #ffe08a; }
.cl-endpoint.chute-endpoint  { color: #ffb3bd; }
.cl-sq { z-index: 1; }
.cl-sq .cl-pawns { z-index: 3; position: relative; } /* pawns pop over the slide overlay */
/* Pawns on the board: stack with negative overlap when 2+ share a square, so they don't
   burst the cell or wrap onto a new line. First pawn full width, subsequent ones slide left. */
.cl-pawns {
  display: flex; align-self: center; justify-content: center; padding-bottom: 2px;
  position: relative; z-index: 5; /* pawns sit on top of the SVG overlay (ladders/chutes) */
}
.cl-pawn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.65);
  box-shadow: 0 2px 4px rgba(0,0,0,.55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: initial; /* keep emoji glyphs full-colour */
  flex-shrink: 0;
}
.cl-pawn + .cl-pawn { margin-left: -18px; } /* overlap ~half so 6 pawns still fit inside a square */
.cl-pawn.me { box-shadow: 0 0 0 2px var(--accent), 0 2px 4px rgba(0,0,0,.55); z-index: 1; }

/* Side panel: die + seats + log */
.cl-side {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 14px;
}
.cl-die-box { text-align: center; padding: 8px 0; }
.cl-die {
  width: 84px; height: 84px; border-radius: 16px;
  background: linear-gradient(180deg, #fefefe, #ddd); color: #222;
  margin: 0 auto 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cl-die .yz-pipgrid { padding: 14px; }
.cl-die .yz-pip { width: 14px; height: 14px; }
.cl-die.rolling { animation: yzTumble .55s cubic-bezier(.3, 1.6, .5, 1); }
.cl-die.rolling .yz-pipgrid { animation: yzFaceFade .55s ease-out; }
.cl-rollhint { color: var(--muted); font-size: 13px; margin-top: 6px; min-height: 18px; }

/* Pawn / seat rows */
/* Animated pawn overlay: positioned in board-percent, transitions between squares. */
.cl-anim-pawn {
  position: absolute; left: 50%; top: 50%;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.7);
  box-shadow: 0 0 0 2px var(--accent), 0 3px 6px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: initial; line-height: 1;
  transform: translate(-50%, -50%);
  transition: left .21s ease-in-out, top .21s ease-in-out;
  z-index: 10;
  pointer-events: none;
}
.cl-anim-pawn.laddering {
  transition: left 1s cubic-bezier(.4, 0, .2, 1), top 1s cubic-bezier(.4, 0, .2, 1);
  animation: clLadderClimb 1s ease-in-out;
  box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(255,203,71,.7), 0 3px 6px rgba(0,0,0,.55);
}
@keyframes clLadderClimb {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  25%  { transform: translate(-55%, -50%) rotate(-4deg) scale(1.05); }
  50%  { transform: translate(-45%, -50%) rotate(4deg)  scale(1.05); }
  75%  { transform: translate(-55%, -50%) rotate(-4deg) scale(1.05); }
  100% { transform: translate(-50%, -50%) rotate(0deg)  scale(1); }
}
.cl-anim-pawn.chuting {
  transition: left 1s cubic-bezier(.7, 0, .8, .3), top 1s cubic-bezier(.7, 0, .8, .3);
  animation: clChuteFall 1s cubic-bezier(.3, .6, .5, 1) both;
  box-shadow: 0 0 0 3px var(--red, #ff5a6e), 0 0 24px rgba(255,90,110,.7), 0 3px 6px rgba(0,0,0,.55);
}
@keyframes clChuteFall {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1); }
  15%  { transform: translate(-45%, -55%) rotate(120deg) scale(.9); }
  30%  { transform: translate(-58%, -48%) rotate(260deg) scale(.75); }
  50%  { transform: translate(-42%, -52%) rotate(420deg) scale(.7); }
  70%  { transform: translate(-56%, -48%) rotate(560deg) scale(.75); }
  85%  { transform: translate(-46%, -52%) rotate(680deg) scale(.85); }
  100% { transform: translate(-50%, -50%) rotate(720deg) scale(1); }
}

.cl-seats { display: flex; flex-direction: column; gap: 6px; }
.cl-seat {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 6px 10px; border-radius: 10px;
  background: rgba(0,0,0,.24);
  font-size: 13px;
}
.cl-seat.me { background: rgba(255,203,71,.10); }
.cl-seat.turn { border: 1px solid var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cl-seat-pawn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: initial;
}
.cl-seat-name { font-weight: 800; }
.cl-seat-pos  { color: var(--muted); font-weight: 700; font-size: 12px; }