/* ================= Mini-games ================= */
.games-layer { position: fixed; inset: 0; z-index: 43; background: rgba(15, 30, 22, 0.55); display: grid; place-items: center; padding: 16px; }
.games { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--cream); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); padding: 18px 20px 22px; scrollbar-width: none; }
.games::-webkit-scrollbar { display: none; }
/* Pop in only when the Game Spot opens — re-renders mustn't replay it (it looked like blinking). */
.games-layer.opening .games { animation: pop 0.2s ease; }
.games-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.games-head h2 { margin: 0; font-size: 22px; flex: 1; }
.games-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.games-head > div { flex: 1; }
.games-head .back { padding: 8px 12px; border-radius: 999px; background: #fff; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); white-space: nowrap; }
.mode-tag { font-size: 13px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.games-reward { background: #fff7e0; color: #7a5a12; border-radius: 12px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.game-card { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.gc-icon { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(145deg, #fff3cd, #f2c35b); display: grid; place-items: center; font-size: 28px; flex: none; }
.gc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gc-body small { color: var(--muted); line-height: 1.35; }
.gc-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gc-mode { padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #f2efe8; }
.gc-mode.ai { background: var(--green-soft); color: var(--green); }
.gc-mode.live { background: #ffe8e1; color: #c0392b; }
.gc-mode:hover { filter: brightness(0.95); }
.games-online { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.games-online small { color: var(--muted); flex-basis: 100%; }
.peer { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.peer-list { display: flex; flex-direction: column; gap: 8px; }
.peer-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.peer-row b { color: #c0392b; }
.games-wait { text-align: center; padding: 30px 10px; color: var(--muted); }
.games-note { color: #b4362a; font-size: 14px; }
.games.playing { position: relative; }
.mg-stage { display: flex; justify-content: center; }

/* shared player bars / status */
.mg-player { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px solid transparent; font-size: 14px; }
.mg-player b { font-size: 18px; }
.mg-player small { color: var(--muted); font-weight: 500; font-size: 12px; }
.mg-player.turn { border-color: var(--green-2); background: var(--green-soft); }
.mg-status { text-align: center; font-weight: 700; margin: 10px 0 4px; min-height: 22px; }
.mg-rules { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.mg-rules summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.mg-rules p { line-height: 1.5; }
.mg-result { position: absolute; inset: 0; background: rgba(250, 248, 243, 0.92); display: grid; place-items: center; border-radius: 24px; }
.mg-result-card { text-align: center; padding: 20px; }
.mg-result-card .big { font-size: 60px; }
.mg-result-card h3 { margin: 6px 0; font-size: 24px; }
.mg-earn { color: #9a6a00; font-weight: 700; }
.mg-result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.mg-result-actions .btn { flex: none; padding: 0 22px; }

/* Ayo */
.ayo { width: min(640px, 100%); display: flex; flex-direction: column; gap: 10px; }
.ayo-board { background: linear-gradient(180deg, #a86a32, #7a4a20); border-radius: 26px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.15), 0 8px 20px rgba(0, 0, 0, 0.25); }
.ayo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ayo-pit { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #4a2a12, #2f1a0a); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); display: grid; place-items: center; transition: box-shadow 0.15s, transform 0.15s; }
.ayo-pit:disabled { cursor: default; }
.ayo-pit.can { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 0 3px #f2c35b; }
.ayo-pit.can:hover { transform: scale(1.05); }
.ayo-pit.hot { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 3px #fff; }
.ayo-pit.cap { box-shadow: 0 0 0 4px #22c55e; animation: pop 0.3s ease; }
.ayo-pit b { position: absolute; bottom: -2px; right: -2px; min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: var(--ink); font-size: 12px; display: grid; place-items: center; padding: 0 5px; }
.ayo-pit .seeds { position: absolute; inset: 0; }
.ayo-pit .seeds i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8d3a8, #8b6b3d); transform: rotate(var(--a)) translate(var(--r)); }

/* Draughts */
.dr { width: min(480px, 100%); display: flex; flex-direction: column; gap: 10px; }
.dr-board { display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 10px; overflow: hidden; border: 6px solid #5a3a1e; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.dr-sq { aspect-ratio: 1; display: grid; place-items: center; position: relative; padding: 0; }
.dr-sq.light { background: #f2e2c4; cursor: default; }
.dr-sq.dark { background: #8a5a32; }
.dr-sq.last { background: #a8783e; }
.dr-sq.sel { background: #2f9e6a; }
.dr-sq.target::after { content: ''; width: 34%; height: 34%; border-radius: 50%; background: rgba(242, 195, 91, 0.9); box-shadow: 0 0 0 4px rgba(242, 195, 91, 0.35); }
.dr-sq.movable .dr-pc { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 3px #f2c35b; }
.dr-pc { width: 76%; height: 76%; border-radius: 50%; display: grid; place-items: center; font-size: 15px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.dr-pc.p0, .dr-dot.p0 { background: radial-gradient(circle at 35% 30%, #ff8a75, #c0392b); }
.dr-pc.p1, .dr-dot.p1 { background: radial-gradient(circle at 35% 30%, #555, #111); }
.dr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }


/* Rock paper scissors */
.rps { width: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; }
.rps-score { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.rps-score b { font-size: 20px; color: var(--green); }
.rps-score small { color: var(--muted); }
.rps-arena { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 14px 0; }
.rps-hand { font-size: 72px; width: 110px; height: 110px; border-radius: 24px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.rps-hand.them { transform: scaleX(-1); }
.rps-vs { font-weight: 800; color: var(--muted); }
.rps-picks { display: flex; gap: 10px; justify-content: center; }
.rps-pick { display: flex; flex-direction: column; align-items: center; font-size: 40px; padding: 10px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); }
.rps-pick small { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.rps-pick:hover:not(:disabled) { border-color: var(--green-2); transform: translateY(-2px); }
.rps-pick:disabled { opacity: 0.5; }

/* Invite toast */
.mg-invite { position: fixed; right: 16px; bottom: 16px; z-index: 47; }
.mg-invite-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); animation: feedIn 0.3s ease; }
.mg-invite-card > div:nth-child(2) { flex: 1; font-size: 14px; }
.mg-invite-card small { display: block; color: var(--muted); }
.mg-invite-actions { display: flex; gap: 8px; flex-basis: 100%; }
.mg-invite-actions .btn { height: 40px; font-size: 14px; }

@media (max-width: 900px) {
  .games { padding: 14px; border-radius: 20px; }
  .games-grid { grid-template-columns: 1fr; }
  .rps-hand { width: 84px; height: 84px; font-size: 54px; }
  .bottomnav button { padding: 4px 9px; }
}

/* Coin matches */
.stk-line { display: block; margin-top: 4px; }
.gc-tag { font-size: 11px; font-weight: 700; color: var(--muted); }
.gc-tag.skill { color: #9a6a00; }
.stk-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.stk-box small { color: var(--muted); }
.stk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stk-chips button { padding: 7px 12px; border-radius: 999px; background: #f2efe8; font-weight: 700; font-size: 13px; }
.stk-chips button.on { background: linear-gradient(135deg, #f2c35b, #e0a21b); color: #3b2a00; box-shadow: 0 3px 10px rgba(224, 162, 27, 0.35); }
.stk-chips button:disabled { opacity: 0.4; cursor: not-allowed; }
.stk-why { color: #b4362a !important; font-weight: 600; }
.stk-adult { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.stk-adult input { width: 18px; height: 18px; accent-color: var(--green-2); }
.peer-row:disabled { opacity: 0.5; cursor: not-allowed; }
.mode-tag.stk { background: #fff3cd; color: #9a6a00; }
.mg-earn.lost { color: #b4362a; }
.mg-invite-card .stk-adult { margin-top: 6px; font-size: 12px; }

/* ---------- Whot! ---------- */
.whot { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.wh-opp { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.wh-opp b { color: #b91c1c; }
.wh-backs { display: flex; justify-content: center; min-height: 52px; }
.wh-backs .wc-back { margin-left: -18px; }
.wh-backs .wc-back:first-child { margin-left: 0; }
.wc-back { display: block; width: 36px; height: 52px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  background: repeating-linear-gradient(45deg, #7f1d1d 0 6px, #991b1b 6px 12px); }
.wc-back.big { width: 64px; height: 92px; border-radius: 10px; }
.wh-table { display: flex; justify-content: center; align-items: center; gap: 28px; padding: 14px; border-radius: 18px; background: radial-gradient(circle, #1f7a4d, #145c39); }
.wh-market { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-weight: 700; }
.wh-market small { font-size: 11.5px; opacity: 0.9; }
.wh-market:not(:disabled):hover .wc-back { transform: translateY(-3px); }
.wh-market:disabled { opacity: 0.75; cursor: default; }
.wh-top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wh-called { display: flex; align-items: center; gap: 4px; background: #fff; color: #7f1d1d; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; }
.wh-called .wc-shape { width: 16px; height: 16px; }
.wh-hand { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.wc { position: relative; width: 64px; height: 92px; border-radius: 10px; background: #fff8ec; border: 2px solid #e8d9bf; color: #8b1a1a; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); transition: transform 0.12s; }
.wc .wc-shape { width: 38px; height: 38px; fill: #8b1a1a; }
.wc-n { position: absolute; top: 3px; left: 6px; font-style: normal; font-weight: 800; font-size: 14px; }
.wc-n.br { top: auto; left: auto; bottom: 3px; right: 6px; transform: rotate(180deg); }
.wc-whot { font-size: 14px; letter-spacing: 0.5px; font-weight: 900; transform: rotate(-30deg); }
.wh-hand .wc { opacity: 0.55; cursor: not-allowed; }
.wh-hand .wc.ok { opacity: 1; cursor: pointer; border-color: #f2c35b; }
.wh-hand .wc.ok:hover { transform: translateY(-6px); }
.wh-curtain { padding: 26px; border-radius: 16px; background: #fff7ed; border: 2px dashed #f59e0b; font-weight: 800; color: #92400e; }
.wh-call { background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wh-call > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wh-call button { width: 64px; padding: 8px 4px; border-radius: 12px; background: #fff8ec; border: 2px solid #e8d9bf; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #8b1a1a; font-weight: 700; text-transform: capitalize; }
.wh-call button:hover { border-color: #8b1a1a; }
.wh-call .wc-shape { width: 30px; height: 30px; fill: #8b1a1a; }
@media (max-width: 600px) {
  .wc { width: 52px; height: 76px; }
  .wc .wc-shape { width: 30px; height: 30px; }
  .wh-hand { gap: 6px; }
}

/* Whot: several opponents */
.wh-opps { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.wh-opps.many .wc-back { width: 26px; height: 38px; }
.wh-opps.many .wh-backs .wc-back { margin-left: -14px; }
.wh-opp.turn span { color: #0f8a4a; font-weight: 800; }

/* ---------- Ludo ---------- */
.ludo { width: 100%; display: flex; gap: 16px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.ld-board { flex: 0 1 auto; width: min(440px, 100%, 64vh); aspect-ratio: 1; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); background: #fff; touch-action: manipulation; }
.ld-seed.can { cursor: pointer; }
.ld-seed.can circle:first-child { animation: seedPulse 0.8s ease-in-out infinite; stroke: #111827; }
@keyframes seedPulse { 50% { stroke-width: 0.22; } }
.ld-side { display: flex; flex-direction: column; gap: 10px; width: min(220px, 100%); }
.ld-players { display: flex; flex-direction: column; gap: 6px; }
.ld-player { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 7px 10px; font-weight: 700; font-size: 13.5px; border: 2px solid transparent; }
.ld-player.turn { border-color: #0f8a4a; }
.ld-player i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ld-player small { margin-left: auto; color: var(--muted); font-weight: 600; }
.ld-roll { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 3px solid var(--c); font-weight: 800; }
.ld-roll.go { background: var(--c); color: #fff; animation: rollPulse 0.7s ease-in-out infinite alternate; }
@keyframes rollPulse { to { transform: scale(1.05); } }
.ld-roll:disabled { opacity: 0.8; cursor: default; }
.ld-die { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 46px; height: 46px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; }
.ld-die i { border-radius: 50%; }
.ld-die i.on { background: #111827; }
@media (max-width: 600px) {
  .ld-side { width: 100%; }
  .ld-players { flex-direction: row; flex-wrap: wrap; }
  .ld-player { flex: 1 1 45%; }
}

/* The site-wide svg rule (22px icons, 2px stroke) mustn't touch the boards and cards. */
.ld-board { height: auto; stroke: none; }
.wc-shape { stroke: none; }

/* ---------- Dark felt theme while a game is being played ---------- */
.games.playing { background: radial-gradient(ellipse at 50% 30%, #17402c 0%, #0d2419 55%, #08170f 100%); color: #e8f5ec; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.games.playing .games-head h2 { color: #fff; }
.games.playing .games-head .back { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: none; }
.games.playing .games-head .back:hover { background: rgba(255, 255, 255, 0.18); }
.games.playing .mode-tag { background: rgba(255, 255, 255, 0.1); color: #a7f3d0; }
.games.playing .mode-tag.stk { background: rgba(242, 195, 91, 0.18); color: #fcd34d; }
.games.playing .mg-status { color: #e8f5ec; }
.games.playing .mg-status b { color: #fcd34d; }
.games.playing .mg-player, .games.playing .rps-score { background: rgba(255, 255, 255, 0.07); color: #e8f5ec; }
.games.playing .mg-player small, .games.playing .rps-score small { color: #9fb8aa; }
.games.playing .mg-player.turn { background: rgba(34, 197, 94, 0.15); border-color: #fcd34d; }
.games.playing .mg-rules { color: #9fb8aa; }
.games.playing .mg-rules summary { color: #e8f5ec; }
/* Result card */
.games.playing .mg-result { background: rgba(5, 15, 10, 0.78); }
.games.playing .mg-result-card { background: #13261c; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; padding: 22px 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); color: #fff; }
.games.playing .mg-result-card p { color: #c8dccf; }
.games.playing .mg-earn { color: #fcd34d; }
.games.playing .mg-result-actions .btn.ghost { background: rgba(255, 255, 255, 0.1); color: #fff; }
/* Ludo */
.games.playing .ld-board { box-shadow: 0 0 0 6px #2b1d12, 0 0 0 9px #6b4a2b, 0 18px 40px rgba(0, 0, 0, 0.6); }
.games.playing .ld-player { background: rgba(255, 255, 255, 0.07); color: #e8f5ec; }
.games.playing .ld-player small { color: #9fb8aa; }
.games.playing .ld-player.turn { border-color: #fcd34d; background: rgba(252, 211, 77, 0.1); }
.games.playing .ld-roll { background: rgba(255, 255, 255, 0.08); color: #e8f5ec; }
.games.playing .ld-roll.go { background: var(--c); color: #fff; }
/* Whot */
.games.playing .wh-opp { color: #c8dccf; }
.games.playing .wh-opp b { color: #fca5a5; }
.games.playing .wh-opp.turn span { color: #fcd34d; }
.games.playing .wh-table { box-shadow: 0 0 0 4px #2b1d12, 0 0 0 7px #6b4a2b, 0 14px 32px rgba(0, 0, 0, 0.5); }
.games.playing .wh-curtain { background: rgba(252, 211, 77, 0.1); color: #fcd34d; border-color: #fcd34d; }
.games.playing .wh-call { background: #13261c; color: #fff; }
/* Ayo + draughts sit on dark felt already; just soften their frames */
.games.playing .ayo-board, .games.playing .dr-board { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }

/* ---------- Player-count picker: tiles with seated avatars ---------- */
.seat-q { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.seat-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px 16px; border-radius: 20px; background: #fff; border: 2px solid var(--line); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.seat-card:hover { transform: translateY(-3px); border-color: var(--green-2, #22c55e); box-shadow: 0 10px 24px rgba(15, 107, 63, 0.15); }
.seat-card b { font-size: 16px; margin-top: 6px; }
.seat-card > small { color: var(--muted); font-size: 12.5px; }
.seat-table { position: relative; width: 100%; max-width: 200px; aspect-ratio: 1.05; }
.seat-table .felt { position: absolute; left: 50%; top: 50%; width: 46%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #2a7a52, #145c39); box-shadow: 0 0 0 4px #6b4a2b, 0 6px 14px rgba(0, 0, 0, 0.25); }
.seat { position: absolute; transform: translate(-50%, -50%); }
.seat.b { left: 50%; top: 85%; }
.seat.t { left: 50%; top: 15%; }
.seat.l { left: 11%; top: 50%; }
.seat.r { left: 89%; top: 50%; }
.seat.tl { left: 20%; top: 18%; }
.seat.tr { left: 80%; top: 18%; }
.av { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.av small { font-size: 10.5px; font-weight: 800; color: #334155; line-height: 1; margin-top: 3px; }
.av-fig { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #e2e8f0; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.2); }
.av.me .av-fig { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #22c55e, 0 2px 6px rgba(0, 0, 0, 0.2); }
.av.cpu .av-fig { background: #cbd5e1; }
.av-head { position: absolute; left: 50%; top: 18%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--skin); }
.av-body { position: absolute; left: 50%; bottom: -10px; width: 28px; height: 22px; margin-left: -14px; border-radius: 14px 14px 0 0; background: var(--shirt); }

/* ---------- Game Spot home ---------- */
.gs-h { margin: 14px 0 8px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; font-weight: 800; }
.gs-home .games-head { margin-bottom: 4px; }
.gs-tiles { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.gs-tiles::-webkit-scrollbar { display: none; }
.gs-tile { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gs-tile b { font-size: 13px; text-align: center; line-height: 1.2; }
.gs-tile small { font-size: 11px; color: #94a3b8; }
.gs-ico { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; font-size: 36px;
  background: radial-gradient(circle at 50% 35%, #1f6b47, #0f3d28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(15, 61, 40, 0.25); transition: transform 0.15s; }
.gs-tile:hover .gs-ico { transform: translateY(-3px) scale(1.03); }
.gs-ico.sm { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; flex: none; }
.gs-ico.big { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; flex: none; }
.gs-row { display: flex; justify-content: space-between; align-items: center; }
.gs-refresh { width: 40px; height: 40px; border-radius: 50%; background: #eef2f6; font-size: 18px; margin-top: 6px; }
.gs-refresh:hover { background: #e2e8f0; }
.gs-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: #eef2f6; text-align: left; margin-bottom: 8px; }
button.gs-item:hover { background: #e5ebf1; }
.gs-item .av-fig { flex: none; }
.gs-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-meta b { font-size: 15px; }
.gs-meta small { color: #64748b; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item em { font-style: normal; font-weight: 800; font-size: 13px; color: #475569; white-space: nowrap; }
.gs-item em.res.win { color: #15803d; }
.gs-item em.res.loss { color: #b91c1c; }
.gs-item em.res.draw { color: #92400e; }
.gs-empty { color: #94a3b8; font-size: 13.5px; margin: 4px 2px 10px; }
.gs-about { color: #475569; font-size: 14px; line-height: 1.5; margin: 12px 2px; }
.gs-online { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.gs-online small { color: var(--muted); flex-basis: 100%; }

/* ---------- Waiting room ---------- */
.gs-hero { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px; }
.gs-hero > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-hero b { font-size: 18px; }
.gs-hero small { color: #64748b; line-height: 1.4; }
.gs-hero .gc-tag { align-self: flex-start; }
.gs-rules { margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 18px; padding: 12px 16px; }
.gs-rules b { font-size: 14px; }
.gs-rules ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #44403c; font-size: 13.5px; line-height: 1.45; }
.gs-modes { display: flex; gap: 6px; margin: 14px 0 12px; background: #eef2f6; padding: 5px; border-radius: 999px; }
.gs-modes button { flex: 1; padding: 9px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #475569; white-space: nowrap; }
.gs-modes button.on { background: #0f3d28; color: #fff; box-shadow: 0 2px 8px rgba(15, 61, 40, 0.3); }
.gs-start { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.seat-table.solo { max-width: 220px; }
.gs-start .btn { padding: 0 28px; }
.peer-row span { display: flex; align-items: center; gap: 10px; }
.peer-row .av-fig { width: 30px; height: 30px; }
.peer-row .av-head { width: 12px; height: 12px; margin-left: -6px; }
.peer-row .av-body { width: 22px; height: 18px; margin-left: -11px; bottom: -8px; }
@media (max-width: 600px) {
  .gs-modes button { font-size: 12px; padding: 9px 4px; }
}

/* ---------- Full screen play ---------- */
.gs-full { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 18px; flex: none; }
.gs-full:hover { background: rgba(255, 255, 255, 0.2); }
.games-layer.full { padding: 0; }
.games-layer.full .games { width: 100vw; height: 100vh; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
.games-layer.full .mg-stage { flex: 1; align-items: center; }
.games-layer.full .mg-result { border-radius: 0; }
.games-layer.full .ld-board { width: min(92vw, 80vh); }
.games-layer.full .ayo { width: min(900px, 96vw); }
.games-layer.full .dr { width: min(80vh, 94vw); }
.games-layer.full .whot { width: min(1000px, 96vw); }
.games-layer.full .wc { width: 76px; height: 110px; }
.games-layer.full .wc .wc-shape { width: 44px; height: 44px; }
/* Rooms: create, discover and wait together. */
.room-create { display:grid; grid-template-columns:auto 1fr; gap:16px; padding:24px; border-radius:22px; background:#103d2b; color:#fff; }
.room-game-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.12); font-size:32px; flex:none; }
.room-eyebrow { font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#b7d6c5; }
.room-create h3,.room-banner h3 { margin:5px 0 8px; font-size:24px; letter-spacing:-.03em; }
.room-create p,.room-banner p { margin:0 0 10px; font-size:14px; line-height:1.5; color:#c6dfd0; }
.room-create small { color:#c6dfd0; font-size:12px; }
.room-create .btn { grid-column:1/-1; width:100%; justify-content:space-between; background:#f7ce54; color:#153d2a; border:0; font-weight:800; }
.room-create .btn:hover { background:#ffda6e; }
.room-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 14px; }
.room-section-head h3 { margin:0 0 4px; font-size:18px; }
.room-section-head p { margin:0; font-size:13px; color:#69766f; line-height:1.4; }
.room-count { flex:none; display:inline-block; border-radius:999px; padding:7px 11px; background:#e7eee8; color:#254b36; font-size:12px; font-weight:800; }
.room-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.room-join-card { display:block; width:100%; text-align:left; border:1px solid #e0e5dd; border-radius:18px; padding:16px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.room-join-card:hover:not(:disabled) { border-color:#167849; box-shadow:0 5px 18px #103d2b12; }
.room-card-top,.room-card-bottom { display:flex; align-items:center; gap:10px; }
.room-card-top { padding-bottom:14px; border-bottom:1px solid #edf0e9; }
.room-card-icon { width:40px; height:40px; border-radius:12px; background:#eff4ec; display:grid; place-items:center; font-size:23px; flex:none; }
.room-card-title { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.room-card-title b { font-size:15px; }
.room-card-title small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#748078; font-size:12px; }
.room-pill { background:#e4f5e8; color:#197145; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:800; }
.room-pill.full { background:#f1f0eb; color:#7c827c; }
.room-card-bottom { padding-top:14px; gap:7px; flex-wrap:wrap; }
.room-mini-seats { display:flex; gap:3px; }
.room-mini-seats i { font-style:normal; font-size:11px; width:20px; height:20px; border-radius:50%; border:1px dashed #c5d2c8; text-align:center; line-height:18px; color:#9ba99f; }
.room-mini-seats i.filled { background:#dcece1; border:1px solid #dcece1; color:#39865a; }
.room-card-bottom small { font-size:11px; color:#69766f; }
.room-join-label { margin-left:auto; font-size:12px; color:#116b40; }
.room-no-tables { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; padding:24px 18px; text-align:center; border:1px dashed #cdd8ce; border-radius:18px; color:#4c6856; }
.room-no-tables > span { font-size:32px; margin-bottom:8px; }
.room-no-tables b { font-size:15px; }
.room-no-tables p { margin:6px 0 0; font-size:13px; color:#748078; }
.room-lobby { background:#fff; border:1px solid #e0e5dd; border-radius:22px; overflow:hidden; }
.room-banner { display:flex; gap:16px; padding:22px; background:#103d2b; color:#fff; }
.room-banner h3 { font-size:22px; }
.room-banner p { margin-bottom:0; }
.room-roster-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:20px 20px 12px; }
.room-seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 20px; }
.room-seat { display:flex; align-items:center; gap:10px; padding:14px 12px; border:1px solid #e0e8df; border-radius:14px; min-width:0; }
.room-seat > div { flex:1; min-width:0; }
.room-seat b { display:block; font-size:13px; overflow-wrap:anywhere; }
.room-seat small { display:block; color:#7a867e; font-size:11px; margin-top:3px; }
.room-seat .av-fig { display:block; flex:none; width:34px; height:34px; }
.room-seat.vacant { border:1px dashed #d6dfd4; background:#fafbf8; color:#7b8a7e; }
.room-empty-avatar { width:34px; height:34px; border-radius:50%; background:#edf1e9; display:grid; place-items:center; font-size:20px; flex:none; }
.room-ready { color:#247345; font-size:16px; }
.room-footer { padding:16px 20px 20px; text-align:center; }
.room-footer p { font-size:13px; color:#69766f; line-height:1.5; margin:0 0 14px; }
.room-footer p small { display:block; margin-top:4px; font-size:11px; }
.room-footer .btn { width:100%; }
.room-leave { display:block; margin:12px auto 0; color:#768279; font-size:12px; padding:8px 14px; text-decoration:underline; text-underline-offset:3px; }
.room-waiting { display:flex; align-items:center; justify-content:center; gap:8px; background:#edf3ed; color:#3b6950; border-radius:12px; padding:15px; font-size:13px; font-weight:700; }
.room-waiting i { width:7px; height:7px; background:#3b8b58; border-radius:50%; }
.room-rules { margin-top:18px; border-top:1px solid #e0e5dd; padding-top:14px; }
.room-rules summary { font-size:13px; font-weight:700; cursor:pointer; color:#536558; }
.room-connection { font-size:12px; color:#748078; margin:16px 0 0; }
.games-refresh { width:auto; height:auto; font-size:12px; padding:9px 14px; border-radius:10px; color:#536558; }
.wh-clock { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px 16px; margin:0 0 14px; color:#e8f5ec; }
.wh-clock > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; font-weight:700; }
.wh-clock b { font-size:22px; font-variant-numeric:tabular-nums; color:#f7ce54; }
.wh-clock-track { height:5px; border-radius:999px; background:rgba(255,255,255,.12); margin:8px 0; overflow:hidden; }
.wh-clock-fill { display:block; height:100%; background:#f7ce54; border-radius:999px; transition:width .25s linear; }
.wh-clock small { font-size:11px; color:#b0c5b7; }
.wh-clock.urgent b { color:#ffaca0; }
.wh-clock.urgent .wh-clock-fill { background:#ffaca0; }
@media(max-width:600px) {
 .room-list,.room-seats { grid-template-columns:1fr; }
 .room-create { padding:18px; gap:12px; }
 .room-game-icon { width:48px; height:48px; font-size:26px; border-radius:14px; }
 .room-create h3 { font-size:22px; }
 .room-banner { padding:18px; gap:12px; }
 .room-banner h3 { font-size:20px; }
 .room-roster-head { padding:16px 16px 12px; }
 .room-roster-head > b { font-size:14px; }
 .room-seats { padding:0 16px; }
 .room-footer { padding:16px; }
 .room-section-head p { max-width:230px; }
 .gs-room .games-head { gap:8px; }
 .gs-room .games-head h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .wh-clock-fill,.room-join-card { transition:none; } }
.watch-status { margin:0 0 16px; color:#b8d5c3; font-size:13px; padding:10px 14px; border:1px solid #ffffff19; border-radius:12px; background:#ffffff09; }
.games-layer.spectating .wh-hand:empty { display:none; }
.games-layer.spectating .mg-stage button { cursor:default; }
.games-layer.spectating .games-head h2 { font-size:19px; }

/* Supplied game logos retain their aspect ratio and transparency. */
.game-logo { display:block; width:100%; height:100%; object-fit:contain; }
.game-logo-inline { width:32px; height:32px; flex:none; }
.games-head h2:has(.game-logo-inline) { display:flex; align-items:center; gap:8px; min-width:0; }
.gs-ico:has(.game-logo),.room-game-icon:has(.game-logo),.room-card-icon:has(.game-logo) { overflow:hidden; }
/* Whot players stay together; the active avatar carries the turn clock. */
.wh-players { display:grid; grid-template-columns:repeat(var(--players),minmax(0,1fr)); gap:10px; width:100%; }
.wh-player { display:flex; align-items:center; gap:10px; min-width:0; padding:12px 10px; border:1px solid #ffffff15; background:#ffffff07; border-radius:16px; }
.wh-player.turn { border-color:#f7ce5470; background:#f7ce540c; }
.wh-player-details { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wh-player-details > b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e8f5ec; }
.wh-player-details small { font-size:11px; color:#b0c5b7; }
.wh-player-details > span { font-size:10px; color:#90aa99; }
.wh-player.turn .wh-player-details > span { color:#f7ce54; }
.wh-avatar,.wh-avatar.wh-clock { position:relative; width:56px; height:56px; flex:none; display:grid; place-items:center; padding:0; margin:0; background:none; border:0; border-radius:50%; }
.wh-avatar .av-fig { width:38px; height:38px; display:block; box-shadow:none; }
.wh-ring { position:absolute; inset:0; width:56px; height:56px; fill:none; transform:rotate(-90deg); }
.wh-ring circle { fill:none; stroke-width:3; }
.wh-ring-track { stroke:#ffffff22; }
.wh-ring-progress { stroke:#f7ce54; stroke-linecap:round; transition:stroke-dashoffset .25s linear; }
.wh-avatar .wh-time { position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); border-radius:999px; padding:1px 5px; color:#f7ce54; font-size:10px; line-height:14px; font-variant-numeric:tabular-nums; background:#173624; border:1px solid #f7ce5470; }
.wh-avatar.urgent .wh-ring-progress { stroke:#ffaca0; }
.wh-avatar.urgent .wh-time { color:#ffaca0; border-color:#ffaca070; }
@media(max-width:600px){ .wh-players { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.wh-player { gap:7px; padding:10px 7px; }.wh-player-details > b { font-size:12px; } }
@media(prefers-reduced-motion:reduce){ .wh-ring-progress { transition:none; } }

/* Chat stays outside the board's result overlay. */
.mg-game-surface { position:relative; }
.games.playing .mg-result-card .btn.ghost { background:#f5f3ed; color:#173b29; border:1px solid #d6e0d9; }
.games.playing .mg-result-card .btn.ghost:hover { background:#fff; }
.game-chat { margin-top:18px; border:1px solid #dce5df; border-radius:16px; overflow:hidden; background:#f6f9f6; color:#173b29; }
.chat-toggle { display:flex; align-items:center; gap:8px; width:100%; padding:12px 16px; background:transparent; border:0; color:inherit; font:inherit; font-weight:700; cursor:pointer; text-align:left; }
.chat-chevron { margin-left:auto; }
.chat-unread { background:#116b42; color:white; border-radius:20px; padding:1px 7px; font-size:12px; }
.chat-body { padding:0 14px 12px; }
.chat-audience,.chat-empty,.chat-error { font-size:12px; margin:4px 0 8px; }
.chat-log { max-height:180px; overflow:auto; overscroll-behavior:contain; padding:4px 0; }
.chat-message { margin:6px 0; padding:8px 10px; border-radius:10px; background:#fff; overflow-wrap:anywhere; }
.chat-message b { display:block; font-size:12px; color:#52715f; margin-bottom:3px; }
.chat-message span { white-space:pre-wrap; font-size:14px; }
.chat-message.mine { background:#e2f1e6; }
.chat-form { display:flex; gap:8px; margin-top:10px; }
.chat-form input { flex:1; min-width:0; border:1px solid #cddbd1; border-radius:10px; padding:10px 12px; background:#fff; color:#173b29; font:inherit; font-size:14px; }
.chat-form button { border:0; border-radius:10px; padding:10px 16px; background:#116b42; color:white; font:inherit; font-weight:700; cursor:pointer; }
.chat-form button:disabled { opacity:.55; cursor:wait; }
.chat-error { color:#b12525; margin:7px 0 0; }
.games.playing .game-chat { background:#142d20; border-color:#395345; color:#e8f5ec; }
.games.playing .chat-audience { color:#b9cebf; }
.games.playing .chat-message { background:#223b2b; }
.games.playing .chat-message.mine { background:#2c513b; }
.games.playing .chat-message b { color:#bbd8c4; }
.games.playing .chat-error { color:#ffb4b4; }
.games-layer.full .mg-game-surface { flex:1; display:flex; align-items:center; justify-content:center; }
.games-layer.full .game-chat { flex:none; width:min(700px,100%); align-self:center; }
.room-fee { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.room-fee input { width:100px; background:#fff; color:#173b29; padding:10px 12px; border-radius:10px; border:1px solid #cbdacf; font:inherit; }
.room-fee small { flex-basis:100%; font-weight:400; }
.room-pot { display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 16px; margin:16px 0; border-radius:14px; background:#fff6d7; color:#704b0b; }
.room-pot strong { margin-left:auto; }
.room-pot small { flex-basis:100%; }