/* Flat dark theme: solid surfaces, thin 1px separators, no cards/shadows. */

:root {
  --bg: #0a0e1c;
  /* mặt khối hơi trong để thấy nền biển phía sau (không viền bóng, vẫn phẳng) */
  --surface: rgb(15 21 35 / 0.72);
  --surface2: rgb(21 29 49 / 0.58);
  --line: #ffffff16;
  --accent: #ffcf4d;
  --accent-soft: #ffe9b0;
  --accent-bg: #ffcf4d22;
  --on-accent: #3a2a00;
  --win: #3ddc84;
  --win-bg: #1d3328;
  --lose: #ff5d6c;
  --lose-bg: #331d21;
  --text: #e9edf9;
  --muted: #7f89a8;
  --muted2: #8b95b4;
  --info: #8fc7ff;
  --dot: #3a4260;
  --die-face: #f3efe4;
  --die-ink: #10141f;
  --zebra: #ffffff08;
  --scroll: #2b3550;
  --scroll-hover: #3d4a74;
  /* translucent panel surfaces so the water shows through */
  --glass: rgb(15 21 35 / 0.7);
  --glass-soft: rgb(15 21 35 / 0.55);
  /* one rounding scale for the whole UI */
  --r: 6px;
  --r-sm: 4px;
}

/* ---- R4: mỗi BẢN một bảng màu ----------------------------------------------
   Bộ mặt (skin) nằm trên `<html data-skin="…">` do client đặt lúc khởi động
   (xem `crates/client/src/main.rs`). Màu để ở CSS chứ không nhét vào Rust: đổi
   bản là đổi `data-skin`, không phải luồn màu qua dữ liệu.
   Mặc định (`:root`) là bảng của Bầu Cua: vàng trên nền biển xanh. */
html[data-skin="crown-and-anchor"] {
  --bg: #071426;
  --surface: rgb(13 24 41 / 0.72);
  --surface2: rgb(18 33 55 / 0.58);
  --glass: rgb(13 24 41 / 0.7);
  --glass-soft: rgb(13 24 41 / 0.55);
  --accent: #63b3ff;
  --accent-soft: #b3d9ff;
  --accent-bg: #63b3ff22;
  --on-accent: #04203c;
}

html[data-skin="chuck-a-luck"] {
  --bg: #1a1014;
  --surface: rgb(31 20 22 / 0.72);
  --surface2: rgb(44 28 31 / 0.58);
  --glass: rgb(31 20 22 / 0.7);
  --glass-soft: rgb(31 20 22 / 0.55);
  --accent: #f4e9d6;
  --accent-soft: #fff8ec;
  --accent-bg: #f4e9d61f;
  --on-accent: #241a12;
}

html[data-skin="hoo-hey-how"] {
  --bg: #1c0d0f;
  --surface: rgb(33 16 18 / 0.72);
  --surface2: rgb(48 23 26 / 0.58);
  --glass: rgb(33 16 18 / 0.7);
  --glass-soft: rgb(33 16 18 / 0.55);
  --accent: #ffd76a;
  --accent-soft: #ffe6a8;
  --accent-bg: #ffd76a22;
  --on-accent: #3a2200;
}

html[data-skin="klah-klok"] {
  --bg: #07160f;
  --surface: rgb(11 28 21 / 0.72);
  --surface2: rgb(16 38 29 / 0.58);
  --glass: rgb(11 28 21 / 0.7);
  --glass-soft: rgb(11 28 21 / 0.55);
  --accent: #57d9a3;
  --accent-soft: #b7f0d8;
  --accent-bg: #57d9a322;
  --on-accent: #04291b;
}

* {
  box-sizing: border-box;
}

/* ---- neat, unobtrusive scrollbars ---- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-hover);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  /* painted as the canvas background only. `body` must NOT set a background,
     otherwise it paints over the negative-z-index .sea layer and hides the reef. */
  background: #052033;
  /* chặn zoom 2 ngón (vẫn cho cuộn dọc/ngang) + không phóng to chữ tự động */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  touch-action: pan-x pan-y;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 16px 10px;
}

/* ---- static on-page SEO copy below the game (crawlable, also useful to readers) ---- */
.seo-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 20px 64px;
  border-top: 1px solid var(--line);
  color: var(--text);
  line-height: 1.75;
}
.seo-content h2 {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 1.45rem;
  line-height: 1.35;
}
.seo-content h3 {
  margin: 26px 0 8px;
  color: var(--accent-soft);
  font-size: 1.08rem;
}
.seo-content p,
.seo-content li {
  color: var(--muted);
}
.seo-content ol,
.seo-content ul {
  padding-left: 22px;
}
.seo-content a {
  color: var(--accent);
}
.seo-content details {
  margin: 8px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.seo-content summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}
.seo-content details p {
  margin: 8px 0 2px;
}
@media (max-width: 640px) {
  .seo-content {
    padding: 24px 16px 48px;
  }
}

/* ---- top bar: title on the left, icon buttons on the right ---- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* logo con cua + tên game */
.brand-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.brand {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: block;
}

h1 {
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: 0.4px;
  color: var(--accent);
  white-space: nowrap;
}

.top-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.name-input {
  width: 136px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
}
.name-input:focus {
  border-color: var(--accent);
}

.me-balance {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.icons {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* divider between the status badges and the control buttons */
.icons .sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--line);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.icon-btn b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
.icon-btn:hover { background: var(--surface2); }
/* có tin nhắn mới mà khung chat đang đóng: icon chat rung lên */
.icon-btn.buzz {
  color: var(--accent);
  animation: chat-buzz 1s ease-in-out infinite;
}
@keyframes chat-buzz {
  0%,
  100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-14deg) scale(1.14); }
  30% { transform: rotate(11deg) scale(1.14); }
  45% { transform: rotate(-8deg) scale(1.06); }
  60% { transform: rotate(6deg) scale(1.06); }
  80% { transform: rotate(-2deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-btn.buzz { animation: none; }
}
.icon-btn.on { color: var(--accent); }
.icon-btn.on b { color: var(--accent); }
.icon-btn.conn { cursor: default; }
.icon-btn.conn:hover { background: transparent; }
.icon-btn.bank-badge { cursor: default; }
.icon-btn.bank-badge:hover { background: transparent; }
.icon-btn.bank-badge b { color: var(--text); }

/* tên nước của bàn đang chơi, đứng cạnh nút đổi bộ mặt (viết theo chữ của nước đó) */
.skin-country {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 6px;
}
/* header chật trên điện thoại: chỉ giữ nút, ẩn tên nước */
@media (max-width: 700px) {
  .skin-country { display: none; }
}

/* ---- dropdown ở header: đổi ngôn ngữ (đứng trước) và đổi bộ mặt theo nước (đứng sau) ---- */
.pick-wrap { position: relative; display: inline-flex; }
.pick-btn { font-weight: 700; }
/* nút ngôn ngữ ở header: CHỈ ký hiệu 🌐 (chữ dài như "繁體中文" làm nút to, dễ lẫn với tab bộ mặt) */
.lang-btn { font-size: 1.05rem; line-height: 1; }
.pick-flag-btn { font-size: 1.05rem; line-height: 1; }
.pick-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pick-row:hover { background: var(--surface2); }
.pick-row.on { color: var(--accent); }
.pick-flag { font-size: 1.05rem; line-height: 1; }
.pick-name { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.pick-brand { margin-left: auto; font-size: 0.74rem; color: var(--muted2); white-space: nowrap; }

/* ---- the betting table: six cells + the dice bowl in the middle ---- */

/* two "rabbit ear" tabs perched on the top edge of the table */
.table-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 30px;
}
.ear {
  position: absolute;
  top: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.ear b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* BỘ MẶT bàn chơi: tab thứ ba, nằm GIỮA hai tai thỏ (cùng kiểu dáng với tai) — chỗ này thuộc
   về BÀN CHƠI nên không bị nhầm với nút đổi NGÔN NGỮ ở thanh trên cùng. */
.skin-ear {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  height: 30px;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  white-space: nowrap;
}
.skin-ear .pick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: var(--r) var(--r) 0 0;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.skin-ear .pick-btn:hover,
.skin-ear .pick-btn.open {
  color: var(--accent);
}
.skin-ear-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
/* danh sách bộ mặt căn giữa dưới nút (nút nằm giữa bàn, không sát mép phải như ở header) */
.skin-ear .pick-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
/* thanh dọc hai bên bàn: hình thang, ĐÁY bám sát rìa bàn, icon + chữ dọc */
.side-tab {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 4px;
  border: 1px solid var(--accent);
  /* ĐANG ẨN bảng → SÁNG (mời bấm để mở) */
  background: var(--accent-bg);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.side-icon { font-size: 10px; line-height: 1; }
.side-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
/* ĐANG HIỆN bảng → TỐI, chìm vào nền */
.side-tab.on {
  background: var(--surface2);
  color: var(--muted);
  border-color: var(--line);
}
.side-tab.on:hover {
  color: var(--text);
  border-color: var(--line);
}
.side-left {
  right: 100%; /* đáy (cạnh phải) áp sát rìa trái của bàn */
  border-right: 0;
  transform: translateY(-50%);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}
.side-right {
  left: 100%; /* đáy (cạnh trái) áp sát rìa phải của bàn */
  border-left: 0;
  transform: translateY(-50%);
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
.side-tab:hover { filter: brightness(1.15); }

/* ẩn một bên thì bàn giãn hết bề ngang còn lại */
.screen.hide-hist .table-wrap,
.screen.hide-chat .table-wrap { max-width: none; }

.ear-left { left: 0; }
.ear-right { right: 0; }
/* left ear = the house's pocket */
.ear-left #bank {
  color: var(--accent-soft);
  font-size: 0.95rem;
}
/* right ear = round / countdown / status */
.ear .phase-text b { color: var(--accent); }
.ear .info-dot { color: var(--dot); }
/* hũ tích luỹ: % tiến tới trận mưa kế tiếp (mỗi 100 ván) */
.ear .rain-pct {
  color: var(--info);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px; /* the 1px gaps show through as the table's lines */
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
  margin: 0;
}

.table .tile {
  border-radius: 0;
  min-height: 120px;
  justify-content: center;
}

/* the bowl in the middle of the table: the dice drop out of here */
.bowl {
  grid-column: 1 / -1;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  min-height: 94px;
}

.bowl-hint {
  /* fixed height: the hint text comes and goes with the dice stages, and the
     bowl must not grow when it does */
  min-height: 1.2em;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.bowl-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bowl-info .info-item b {
  color: var(--text);
  font-weight: 700;
}
.bowl-info .phase-text b { color: var(--accent); }
.bowl-info .info-dot { color: var(--dot); }

/* ---- win / lose payoff effects (flat: solid flashes, no gradients) ---- */

/* cell where the winning symbol appeared: blink and hand out the money */
.tile.winning {
  animation: tile-win 0.85s ease-in-out 2;
  border-top: 3px solid var(--win);
}
.tile.losing {
  animation: tile-lose 0.85s ease-in-out 2;
  opacity: 0.7;
}
.tile.winning .emoji { animation: popemoji 0.85s ease-in-out 2; }

@keyframes tile-win {
  0%, 100% { background: var(--surface); }
  50% { background: var(--win-bg); }
}
@keyframes tile-lose {
  0%, 100% { background: var(--surface); }
  50% { background: var(--lose-bg); }
}
@keyframes popemoji {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* bowl feedback while the money is being moved */
.table.won .bowl { animation: bowl-win 1.3s ease-out both; }
.table.lost .bowl { animation: bowl-lose 1.3s ease-out both; }
@keyframes bowl-win {
  0% { transform: scale(1); box-shadow: inset 0 0 0 0 transparent; }
  40% { transform: scale(1.02); box-shadow: inset 0 0 0 2px var(--win); }
  100% { transform: scale(1); box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes bowl-lose {
  0% { transform: scale(1); }
  40% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* coins that fly between the house's pocket and the doors after a round */
.fly {
  position: fixed;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  animation: fly 1.05s cubic-bezier(0.4, 0.1, 0.7, 1) both;
}
@keyframes fly {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  18% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.45);
    opacity: 0;
  }
}

/* ---- the spectator rail under the table ---- */
.crowd {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 5px auto 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.crowd .dot { color: var(--dot); }

.dice {
  display: flex;
  gap: 10px;
}

.die {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: var(--die-face);
  color: var(--die-ink);
  border-radius: var(--r-sm);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* the dice fall out of the bowl, one after another */
.dice.rolling .die { animation: drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dice.rolling .die:nth-child(2) { animation-delay: 0.07s; }
.dice.rolling .die:nth-child(3) { animation-delay: 0.14s; }

/* stage 0: last round's dice, shown while the new one has not rolled yet */
.die.last {
  opacity: 0.55;
  transform: scale(0.88);
}

/* stage 1: wipe the old result off the table */
.dice.cleared .die {
  opacity: 0.22;
  transform: scale(0.8);
}

/* stage 2: the bowl is getting ready to throw */
.dice.prep .die {
  opacity: 1;
  animation: prep-shake 0.42s ease-in-out infinite;
}
@keyframes prep-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-3deg); }
  75% { transform: translateX(2px) rotate(3deg); }
}

@keyframes drop {
  0% { transform: translateY(-52px) rotate(-28deg); opacity: 0; }
  62% { transform: translateY(5px) rotate(9deg); opacity: 1; }
  100% { transform: none; }
}

/* ---- the settlement, centred under the table ---- */

.stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* a reserved slot: the settlement panel appears HERE, so the screen (and the
     console under it) never changes size between "đặt cược" and "kết quả" */
  height: 68px;
  margin: 3px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* what the slot says while it is waiting for the round to settle */
.stage-hint {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted2);
  text-align: center;
}
.stage-hint.gone { display: none; }

.settle {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 7px 12px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  text-align: center;
}
.settle.win { border-left-color: var(--win); }
.settle.lose { border-left-color: var(--lose); }
.settle-head { font-size: 0.95rem; }
.settle ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text);
}
.settle li { margin: 2px 0; }

/* ---- win ticker: one centred line that scrolls ---- */

.ticker {
  margin: 0 0 8px;
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.82rem;
  background: var(--glass-soft);
  border-left: 3px solid var(--accent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  padding-left: 100%;
  animation: ticker 24s linear infinite;
}

.tick {
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
}
.tick.idle {
  color: var(--muted);
  font-weight: 500;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ---- the player's console: the wallet, then one row of chips ---- */

.console {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* must NOT clip: the "mời cả bàn" chooser opens upward out of this box */
  overflow: visible;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}
/* keep the rounded corners on the rows themselves (the box no longer clips) */
.console > :first-child { border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.console > :last-child { border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); }
/* the wallet row: three zones — mời cả bàn | ví điểm | chia sẻ */
.console-money {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: var(--surface);
}
.cm-side { display: flex; align-items: center; }
.cm-left { justify-self: start; position: relative; }
.cm-right { justify-self: end; }
.cm-wallet {
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.console-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
/* the chip bar: one row, every chip the same size */
.console-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px;
  background: var(--surface);
}
/* the player's own money — the biggest number on the page */
.chips-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.chips-balance .me-balance {
  flex: 0 1 auto;
  font-size: 1.85rem;
  line-height: 1.2;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* the number only blinks a colour — it never scales, so nothing shifts */
.chips-balance.gain .me-balance { animation: money-up 0.9s ease-out; }
.chips-balance.loss .me-balance { animation: money-down 0.9s ease-out; }
@keyframes money-up {
  0% { color: var(--win); }
  100% { color: var(--accent); }
}
@keyframes money-down {
  0% { color: var(--lose); }
  100% { color: var(--accent); }
}
/* a reserved slot beside the number: the "+150" / "-20" fades in and out here,
   so the console keeps exactly the same size */
.money-slot {
  display: inline-block;
  min-width: 6ch;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.money-flow { animation: money-fade 1.5s ease-out both; }
.money-flow.gain { color: var(--win); }
.money-flow.loss { color: var(--lose); }
@keyframes money-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* locked welcome-bonus badge with its turnover progress */
.chips-bonus {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.chips-bonus b {
  color: var(--accent-soft);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chips-bonus .wager {
  color: var(--muted2);
  font-variant-numeric: tabular-nums;
}
.chip {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.chip:hover { background: var(--surface2); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* the "tất tay" chip: a wider pill, so the words fit (44 = CHIP_SIZE) */
.chip.all {
  width: auto;
  height: 44px;
  min-width: 66px;
  padding: 0 12px;
  border-radius: 999px;
  border-color: var(--accent);
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.chip.all.active { color: var(--on-accent); }
/* ×2 / ×4 / ×8 multiplier chips */
.chip.big {
  border-color: var(--accent);
  color: var(--accent-soft);
  font-size: 0.78rem;
}
.chip.big.active { color: var(--on-accent); }

/* ---- a betting cell ---- */

.tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 9px 8px 7px;
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
}
.tile:hover { background: var(--surface2); }
.tile:active { opacity: 0.85; }
.tile.closed { opacity: 0.5; cursor: not-allowed; }

/* crowd heat: a bar that fills from the bottom with the table's money */
.tile .heat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--accent);
  opacity: 0.16;
  pointer-events: none;
  transition: height 0.35s ease;
}
.tile > span:not(.heat) {
  position: relative;
  z-index: 1;
}
.tile .emoji { font-size: 3.3rem; line-height: 1; }
.tile .name { font-size: 0.82rem; letter-spacing: 0.4px; color: var(--text); }
.tile .stake {
  min-height: 1em;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tile .stake.has { color: var(--accent-soft); font-weight: 700; }
.tile .pool {
  min-height: 1em;
  font-size: 0.72rem;
  color: var(--muted2);
  font-variant-numeric: tabular-nums;
}
.tile .pool.has { color: var(--accent); font-weight: 700; }

footer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 12px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted2);
}
footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--dot);
}
footer a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.legal-links { color: var(--dot); }

/* ---- reserved ad slots (empty and hidden until ads are wired up) ---- */

.ad-slot {
  margin: 8px 0;
  text-align: center;
}
.ad-slot[hidden] { display: none; }
/* banner giả lập: khung phẳng nét đứt, tách hẳn khỏi bàn chơi */
.ad-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 14px 10px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--glass-soft);
  cursor: default;
}
.ad-tag {
  position: absolute;
  top: 3px;
  left: 8px;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dot);
}
.ad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 660px;
  padding: 0 6px;
}
.ad-icon { font-size: 1.45rem; line-height: 1; }
.ad-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.ad-text b {
  font-size: 0.92rem;
  color: var(--text);
}
.ad-text i {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}
.ad-cta {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.ad-cta:hover { background: var(--accent-bg); }

/* chỗ chừa cho hàng ví/chip cố định ở đáy (chỉ cần trên màn hẹp) */
.bottom-gap { display: none; }

/* ---- transient status toast (connection, refused bets, notices) ---- */

.toast {
  position: fixed;
  left: 50%;
  top: 54px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 8px 16px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.85rem;
  max-width: min(92vw, 560px);
  text-align: center;
  pointer-events: none;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- cookie / privacy bar: one-time, until the player answers ---- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted2);
  animation: consent-in 0.22s ease-out;
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.consent-text {
  margin: 0;
  max-width: 900px;
}

/* ---- mưa điểm: banner đếm ngược + lớp đồng rơi ---- */

.rain-wait {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 93;
  padding: 12px 22px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.95rem;
  text-align: center;
  pointer-events: none;
  animation: consent-in 0.25s ease-out;
}
.rain-wait b { color: var(--accent); }

.rain {
  position: fixed;
  inset: 0;
  z-index: 92;
  overflow: hidden;
  pointer-events: none;
}
.rain .drop {
  position: absolute;
  top: -10vh;
  line-height: 1;
  animation-name: coin-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes coin-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  6% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(118vh) rotate(340deg); opacity: 0.15; }
}
.rain-bar {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  animation: consent-in 0.2s ease-out;
}

.auth-back {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgb(4 7 14 / 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth {
  width: min(380px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  animation: consent-in 0.18s ease-out;
}
.auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--accent);
  font-size: 0.92rem;
}
.auth-x {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  padding: 2px 8px;
}
.auth-x:hover { color: var(--text); }
.auth-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px 14px;
}
.auth-tabs { display: flex; gap: 6px; }
.auth-tab {
  flex: 1;
  cursor: pointer;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
}
.auth-tab.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.auth-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.auth-input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}
.auth-input:focus { border-color: var(--accent); }
.auth-primary {
  cursor: pointer;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
}
.auth-primary:disabled { opacity: 0.6; cursor: default; }
.auth-ghost {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
}
.auth-ghost:hover { border-color: var(--lose); color: var(--lose); }
.auth-msg {
  margin: 0;
  font-size: 0.82rem;
  color: var(--lose);
}
.auth-hi { margin: 0; }
.auth-hi b { color: var(--accent); }
.auth-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted2);
}
.auth-note b { color: var(--accent-soft); }

/* tháp thưởng theo lượt — dạng danh sách check */
.tier-list,
.invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tier-row,
.invite-row,
.invite-head {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: baseline;
  gap: 6px;
  padding: 4px 7px;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.78rem;
}
.tier-row.done,
.invite-row.done {
  background: var(--win-bg);
}
.tier-row .tick,
.invite-row .tick {
  color: var(--muted);
  font-weight: 700;
}
.tier-row.done .tick,
.invite-row.done .tick {
  color: var(--win);
}
.tier-need,
.invite-name {
  color: var(--text);
}
.tier-reward {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.invite-rounds {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.invite-head {
  grid-template-columns: 1fr;
  background: transparent;
  color: var(--muted2);
  font-size: 0.76rem;
  padding: 2px 0 4px;
}
.invite-head b { color: var(--accent); }

/* nút chia sẻ ở góc phải hàng ví */
.share-btn {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-bg);
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.share-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* khối Ví điểm trong panel tài khoản */
.pane-wallet.hidden,
.pane-acc.hidden { display: none; }
/* bấm được vào ví ở bàn chip */
.console-money.clickable { cursor: pointer; }
.console-money.clickable:hover { background: var(--surface2); }
.wallet-now {
  margin: 0 0 2px;
}
.wallet-now b {
  color: var(--accent);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

/* the invite link + reward ladder */
.invite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface2);
}
.invite-title { font-size: 0.82rem; font-weight: 700; color: var(--accent); }

/* "mời cả bàn": nút ở góc trái + bảng chọn 1/8 · 1/4 · 1/2 · tất */
.rain-btn {
  padding: 6px 12px;
  border: 1px solid #ffffff26;
  border-radius: var(--r);
  background: transparent;
  color: var(--accent-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.rain-btn:hover { background: #ffffff12; }
.rain-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: 272px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.rain-menu.open { display: block; }
.rain-menu-note {
  margin: 0 0 6px;
  font-size: 0.76rem;
  color: var(--muted);
}
.rain-menu-row { display: flex; gap: 6px; }
.gift-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 6px 4px;
  border: 1px solid #ffffff26;
  border-radius: var(--r);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.gift-btn:hover { background: #ffffff14; }
.gift-btn:disabled { opacity: 0.45; cursor: default; }
.gift-frac { font-size: 0.82rem; font-weight: 700; color: var(--accent-soft); }
.gift-amt {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.invite-link {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-family: ui-monospace, Consolas, monospace;
  outline: none;
}
/* the account's own point ledger, inside the account panel */
.ledger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--win);
  border-radius: var(--r);
  background: var(--surface2);
}
.ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "what delta" "bal bal";
  gap: 0 8px;
  padding: 5px 7px;
  border-radius: var(--r-sm);
  background: var(--surface);
}
.ledger-list li:nth-child(odd) { background: var(--zebra); }
.led-what {
  grid-area: what;
  font-size: 0.78rem;
  color: var(--text);
}
.led-delta {
  grid-area: delta;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.led-delta.win { color: var(--win); }
.led-delta.lose { color: var(--lose); }
.led-bal {
  grid-area: bal;
  font-size: 0.68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.consent-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.consent-ok,
.consent-min {
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
.consent-ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.consent-ok:hover { filter: brightness(1.06); }
.consent-min:hover { border-color: var(--muted); }
.consent-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--dot);
}
.consent-link:hover { color: var(--accent); }

/* keyboard focus ring for everything interactive */
button:focus-visible,
input:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- the "TV": a centre screen flanked by two speakers ---- */

.screen {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 330px;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: calc(var(--r) + 4px);
}

/* the header toggles collapse a side column and give the table more room */
.screen.hide-hist { grid-template-columns: minmax(0, 1fr) 330px; }
.screen.hide-chat { grid-template-columns: 280px minmax(0, 1fr); }
.screen.hide-hist.hide-chat { grid-template-columns: minmax(0, 1fr); }
.screen.hide-hist .history { display: none; }
.screen.hide-chat .chat { display: none; }
/* the side panels are the speakers: faint vertical ribs on their back */
.screen .history,
.screen .chat {
  background-image: repeating-linear-gradient(
    90deg,
    #ffffff06 0 2px,
    transparent 2px 8px
  );
}
/* the centre is the screen; 30px side padding leaves room for the side tabs */
.screen .game {
  background: rgb(6 10 18 / 0.3);
  border-radius: var(--r);
  padding: 8px 24px;
}

.game { min-width: 0; }

.chat {
  display: flex;
  flex-direction: column;
  height: 478px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.chat-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
  white-space: nowrap;
}
/* nickname + gender toggle, in the top menu */
.who-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.who-icon {
  color: var(--muted);
  font-size: 0.95rem;
}
/* the display name lives in the chat header (the account name is in the top menu) */
.chat-head .name-input { width: 112px; }
.gender-btn {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
}
.gender-btn:hover { background: var(--surface2); }
.gender-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* giới tính: NAM xanh, NỮ hồng — tách hẳn tông vàng của điểm, và ký hiệu
   dùng biến thể TEXT (♂︎/♀︎) nên ăn màu CSS thay vì bị hệ thống vẽ thành emoji tím */
.g-nam { color: #56c8ff; }
.g-nu { color: #ff9ad5; }
/* glyph dạng text hơi mảnh — làm đậm để thấy rõ trong 3 danh sách */
.g-nam,
.g-nu { font-weight: 700; font-size: 1.05em; }

.chat-log {
  flex: 1;
  min-height: 0; /* không có dòng này, log dài sẽ đẩy ô nhập tin ra khỏi khung */
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  scrollbar-width: thin;
}
.chat-line {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.chat-line .time {
  color: var(--muted2);
  font-size: 0.72rem;
  margin-right: 6px;
}
.chat-line .who {
  color: var(--info);
  font-weight: 600;
  margin-right: 6px;
}
.chat-line.mine .who { color: var(--accent); }
.chat-line.mine .msg { color: var(--accent-soft); }
.chat-line.sys {
  color: var(--muted2);
  font-style: italic;
  text-align: center;
  font-size: 0.78rem;
  padding: 2px 0;
}

.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.msg-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  outline: none;
}
.msg-input:focus { border-color: var(--accent); }
.send {
  cursor: pointer;
  border: 0;
  border-radius: var(--r);
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;
  background: var(--accent);
  color: var(--on-accent);
}
.send:active { opacity: 0.85; }

/* "new messages" pill, shown when the reader has scrolled up */
.chat-jump {
  position: absolute;
  right: 12px;
  bottom: 62px;
  z-index: 3;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}
.chat-jump:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---- history ---- */

.history {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  height: 478px;
}
.history.hidden { display: none; }
.icon-btn.hidden { display: none; }
.hist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hist-head h2 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--accent);
}
.hist-total {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hist-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.hist-tab {
  flex: 1;
  cursor: pointer;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.hist-tab:hover { background: var(--surface2); }
.hist-tab.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.hist-cols {
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* the single scroll for whichever tab is open */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.hist-col.hidden { display: none; }
.hist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.hist-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  white-space: nowrap; /* one person, one line */
  font-variant-numeric: tabular-nums;
}
.hist-list li .h-name {
  flex: 1 1 auto;
  min-width: 0;
}
.hist-list li:nth-child(odd) { background: var(--zebra); }
.h-tag { color: var(--muted2); font-size: 0.78rem; min-width: 40px; }
.h-dice { display: inline-flex; gap: 5px; align-items: center; }
.h-die {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
}
html[data-skin="chuck-a-luck"] .h-die { font-weight: 700; }
.h-time { margin-left: auto; color: var(--muted2); font-size: 0.75rem; }
.h-name {
  color: var(--accent);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-net { margin-left: auto; color: var(--win); font-weight: 700; }
.h-rounds { color: var(--muted2); font-size: 0.72rem; }

/* the all-time gold leaderboard: compact, one line per player */
.hist-list.board li.b-row {
  gap: 6px;
  font-size: 0.8rem;
}
.b-rank {
  min-width: 14px;
  text-align: right;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.hist-list.board .h-rounds { font-size: 0.68rem; }
.hist-list.board .h-net { font-size: 0.8rem; }
.b-row.me { background: var(--accent-bg); }
.b-row.me .h-name { color: var(--accent); }

/* ---- the sea: two parallax coral layers behind everything ---- */

.sea {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* dark at the surface, clearly lighter near the sea floor */
  background: linear-gradient(180deg, #04192b 0%, #0b5480 55%, #1580b0 100%);
}
.sea-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
}
/* far reef: hazy light-blue, smaller colonies, drifts slowly.
   Growth forms: massive/brain, branching, table, sea fan, digitate, soft coral. */
.sea-far {
  height: 220px;
  opacity: 0.38;
  background-size: 1600px 220px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' fill='%236fc6e8' stroke='%236fc6e8'><g transform='translate(90 220) scale(.9)'><path d='M-52 0C-56-22-48-42-32-45C-20-47-12-41-8-33C-2-46 12-48 20-38C26-45 38-42 40-30C46-36 54-28 50-14C48-6 42-2 34 0Z'/></g><g transform='translate(260 220) scale(.7)' fill='none' stroke-width='12' stroke-linecap='round'><path d='M0 0V-44M0-44l-18-24M0-44l20-26M-18-68l-14-22M-18-68l12-20M20-70l-16-22M20-70l14-24'/></g><g transform='translate(430 220) scale(.95)' fill='none'><path d='M0 0V-30' stroke-width='11' stroke-linecap='round'/><ellipse cx='0' cy='-36' rx='54' ry='12'/></g><g transform='translate(600 220) scale(.7)' fill='none' stroke-width='5' stroke-linecap='round'><path d='M0 0C-12-36-22-58-40-72M0 0C-6-40-11-64-19-84M0 0V-88M0 0C6-40 11-64 19-84M0 0C12-36 22-58 40-72M0 0C-34-26-50-40-62-48M0 0C34-26 50-40 62-48'/></g><g transform='translate(760 220) scale(.85)' fill='none' stroke-width='14' stroke-linecap='round'><path d='M0 0V-40M16 0V-34M-16 0V-30M32 0V-26M-32 0V-24'/></g><g transform='translate(910 220) scale(1.1)'><path d='M-52 0C-56-22-48-42-32-45C-20-47-12-41-8-33C-2-46 12-48 20-38C26-45 38-42 40-30C46-36 54-28 50-14C48-6 42-2 34 0Z'/></g><g transform='translate(1070 220) scale(.9)'><path d='M-30 0q-6-20 2-30q8-10 24-10q18 0 26 12q6 10 2 28z'/><path d='M0 0V-40' fill='none' stroke-width='8' stroke-linecap='round'/></g><g transform='translate(1230 220) scale(.7)' fill='none'><path d='M0 0V-30' stroke-width='11' stroke-linecap='round'/><ellipse cx='0' cy='-36' rx='54' ry='12'/></g><g transform='translate(1380 220) scale(1)' fill='none' stroke-width='12' stroke-linecap='round'><path d='M0 0V-44M0-44l-18-24M0-44l20-26M-18-68l-14-22M-18-68l12-20M20-70l-16-22M20-70l14-24'/></g><g transform='translate(1530 220) scale(.7)'><path d='M-52 0C-56-22-48-42-32-45C-20-47-12-41-8-33C-2-46 12-48 20-38C26-45 38-42 40-30C46-36 54-28 50-14C48-6 42-2 34 0Z'/></g></svg>");
  animation: drift 90s linear infinite;
}
/* near reef: dark silhouette, bigger colonies, varied sizes, drifts faster.
   Growth forms: branching (staghorn), sea fan, kelp, barrel sponge, anemone,
   table, brain, sea whip, soft coral. */
.sea-near {
  height: 360px;
  opacity: 0.88;
  background-size: 1600px 360px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='360' fill='%232878a4' stroke='%232878a4'><g transform='translate(80 360)'><path d='M-38 0C-46-40-40-72-24-76C-12-79-2-74-2-60C-2-40-8-14-12 0Z'/><path d='M10 0C4-28 8-48 20-50C30-52 37-46 37-36C37-22 32-8 29 0Z'/></g><g transform='translate(250 360) scale(1.4)' fill='none' stroke-width='18' stroke-linecap='round'><path d='M0 0V-96M0-96l-40-46M0-96l42-50M-40-142l-32-42M-40-142l26-40M42-146l-34-44M42-146l30-48M-72-184l-24-34M-72-184l22-30M72-194l-26-34M72-194l24-38'/></g><g transform='translate(440 360) scale(1.3)' fill='none' stroke-width='8' stroke-linecap='round'><path d='M0 0C-22-58-40-94-72-116M0 0C-14-64-24-102-42-138M0 0C-4-68-6-108-6-148M0 0C6-68 10-108 24-146M0 0C16-64 30-102 48-136M0 0C24-56 46-92 78-114M0 0C-58-42-90-68-116-82M0 0C58-42 90-68 116-82M0 0C-38-76-56-116-64-156M0 0C38-76 56-116 64-156M0 0C-80-20-112-30-136-34M0 0C80-20 112-30 136-34'/></g><g transform='translate(610 360) scale(1.3)' fill='none' stroke-width='10' stroke-linecap='round'><path d='M0 0Q-18-48 2-92Q20-136 0-178M-28 0Q-46-42-36-84M28 0Q46-42 36-84M-56 0Q-74-34-66-68M56 0Q74-34 66-68'/></g><g transform='translate(780 360) scale(1.05)'><path d='M-54 0C-58-22-50-40-36-44C-26-47-18-42-14-34C-10-50 6-54 16-44C22-52 38-50 42-36C48-42 58-34 54-18C52-8 44-2 36 0Z'/><g fill='none' stroke-width='9' stroke-linecap='round'><path d='M-42-44v-18M-22-56v-20M0-60v-22M22-56v-20M42-44v-18'/></g></g><g transform='translate(950 360) scale(1.45)' fill='none' stroke-width='18' stroke-linecap='round'><path d='M0 0V-96M0-96l-40-46M0-96l42-50M-40-142l-32-42M-40-142l26-40M42-146l-34-44M42-146l30-48M-72-184l-24-34M-72-184l22-30M72-194l-26-34M72-194l24-38'/></g><g transform='translate(1130 360) scale(1.15)'><path d='M-86 0C-92-30-80-58-60-62C-46-65-34-56-30-46C-24-70-2-78 12-62C24-80 48-76 54-54C64-62 80-50 76-30C74-14 62-4 50 0Z'/></g><g transform='translate(1260 360) scale(1.1)' fill='none' stroke-width='9' stroke-linecap='round'><path d='M0 0Q16-60-2-118Q-18-176 2-232'/></g><g transform='translate(1360 360) scale(.95)' fill='none'><path d='M0 0V-46' stroke-width='16' stroke-linecap='round'/><ellipse cx='0' cy='-56' rx='86' ry='18'/></g><g transform='translate(1500 360) scale(1.1)'><path d='M-40 0q-8-26 3-40q10-13 32-13q24 0 34 16q8 13 3 37z'/><path d='M0 0V-54' fill='none' stroke-width='10' stroke-linecap='round'/></g></svg>");
  animation: drift 48s linear infinite;
}
@keyframes drift {
  from { background-position-x: 0; }
  to { background-position-x: -1600px; }
}

/* ---- sea life: whale / shark / dolphins / schools of fish ---- */

.sea-life {
  position: fixed;
  inset: 0;
  z-index: -1; /* same layer as the reef, painted just above it */
  overflow: hidden;
  pointer-events: none;
}
.swim {
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  will-change: transform, opacity;
  animation: swim linear infinite;
}
@keyframes swim {
  0% { transform: translateX(-22vw); opacity: 0; }
  9% { opacity: 0.9; }
  91% { opacity: 0.9; }
  100% { transform: translateX(122vw); opacity: 0; }
}

/* a humpback-sized whale, crossing slowly and rarely */
.whale {
  top: 24%;
  width: 200px;
  height: 80px;
  animation-duration: 62s;
  animation-delay: 3s;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' fill='%232f93bd'><path d='M12 40 L40 14 L46 40 L40 66 Z'/><path d='M40 40 Q62 10 112 12 Q160 15 188 38 Q160 63 112 69 Q62 70 40 40 Z'/><path d='M96 56 L122 76 L130 54 Z'/></svg>");
}
/* a shark, faster and higher up */
.shark {
  top: 44%;
  width: 150px;
  height: 60px;
  animation-duration: 44s;
  animation-delay: 21s;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 70' fill='%232f93bd'><path d='M8 40 L32 16 L36 40 L32 62 Z'/><path d='M36 40 Q72 18 122 22 Q156 26 172 40 Q156 54 122 58 Q72 62 36 40 Z'/><path d='M84 22 L98 3 L106 24 Z'/><path d='M78 57 L96 70 L103 54 Z'/></svg>");
}
/* two dolphins travelling together */
.dolphin {
  top: 33%;
  width: 124px;
  height: 48px;
  animation-duration: 37s;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 64' fill='%232f93bd'><path d='M8 44 L26 26 L32 44 L26 58 Z'/><path d='M32 44 Q62 20 114 24 Q148 27 162 42 Q142 54 106 56 Q62 58 32 44 Z'/><path d='M86 22 L100 5 L108 26 Z'/></svg>");
}
.d1 { animation-delay: 1s; }
.d2 { top: 39%; animation-delay: 2.6s; }
/* small schools, more often */
.school {
  top: 63%;
  width: 116px;
  height: 46px;
  animation-duration: 25s;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' fill='%232f93bd'><g transform='translate(6 30)'><path d='M0 0 L12 -9 L15 0 L12 9 Z'/><ellipse cx='30' cy='0' rx='18' ry='8'/></g><g transform='translate(56 14) scale(.8)'><path d='M0 0 L12 -9 L15 0 L12 9 Z'/><ellipse cx='30' cy='0' rx='18' ry='8'/></g><g transform='translate(96 44) scale(.9)'><path d='M0 0 L12 -9 L15 0 L12 9 Z'/><ellipse cx='30' cy='0' rx='18' ry='8'/></g><g transform='translate(140 26) scale(.75)'><path d='M0 0 L12 -9 L15 0 L12 9 Z'/><ellipse cx='30' cy='0' rx='18' ry='8'/></g><g transform='translate(30 58) scale(.7)'><path d='M0 0 L12 -9 L15 0 L12 9 Z'/><ellipse cx='30' cy='0' rx='18' ry='8'/></g><g transform='translate(150 60) scale(.65)'><path d='M0 0 L12 -9 L15 0 L12 9 Z'/><ellipse cx='30' cy='0' rx='18' ry='8'/></g></svg>");
}
.s1 { animation-delay: 8s; }
.s2 { top: 73%; animation-delay: 17s; }

/* ---- mực / sứa / tôm: three more reef neighbours ---- */

/* mực: lao đi bằng cách phun nước — thân nén lại rồi bung ra theo nhịp */
.squid {
  top: 57%;
  width: 172px;
  height: 64px;
  animation: swim 43s linear infinite, squid-jet 3.6s ease-in-out infinite;
  animation-delay: 12s, 0s;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 76' fill='%234a9ec4'><path d='M6 38q30-26 104-26 34 0 46 26-12 26-46 26Q36 64 6 38z'/><path d='M44 19q14-13 30-7-16 6-22 15z'/><path d='M44 57q14 13 30 7-16-6-22-15z'/><ellipse cx='160' cy='38' rx='17' ry='21'/><circle cx='152' cy='28' r='5' fill='%230d3a52'/><circle cx='152' cy='48' r='5' fill='%230d3a52'/><g fill='none' stroke='%234a9ec4' stroke-width='7' stroke-linecap='round'><path d='M175 28q16 2 20 12'/><path d='M178 38q17 0 21 3'/><path d='M175 48q16-2 19-12'/><path d='M170 41q19 9 25 17'/></g></svg>");
}
/* thân nén rồi bung — chỉ dùng thuộc tính `scale` nên không đụng `transform` */
@keyframes squid-jet {
  0%, 100% { scale: 1 1; }
  34% { scale: 1.14 0.87; }
  58% { scale: 0.93 1.08; }
}

/* sứa: trồi lên từ đáy biển, dù co bóp theo nhịp */
.jelly {
  bottom: -22vh;
  width: 78px;
  height: 118px;
  animation: rise 56s linear infinite, jelly-pulse 4.4s ease-in-out infinite;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 118'><path d='M38 4C17 4 5 19 5 36c0 9 6 15 14 17 13 3 25 3 38 0 8-2 14-8 14-17C71 19 59 4 38 4z' fill='%238fd0e8' fill-opacity='.5'/><path d='M38 4C17 4 5 19 5 36c0 9 6 15 14 17' fill='none' stroke='%23d9f2ff' stroke-width='3' stroke-linecap='round' stroke-opacity='.5'/><path d='M13 44q25 11 50 0' fill='none' stroke='%238fd0e8' stroke-width='3' stroke-linecap='round' stroke-opacity='.85'/><g fill='none' stroke='%238fd0e8' stroke-width='3' stroke-linecap='round' stroke-opacity='.6'><path d='M17 50q-5 13 1 23t-3 22'/><path d='M27 52q5 13-1 22t3 20'/><path d='M38 53q-5 14 1 23t-3 21'/><path d='M49 52q5 13-1 22t3 20'/><path d='M59 50q-5 13 1 23t-3 22'/></g></svg>");
}
.j1 { left: 22%; animation-delay: 6s, 0s; }
.j2 { left: 76%; width: 60px; animation-delay: 30s, 1.3s; }
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 0.85; }
  90% { opacity: 0.85; }
  100% { transform: translateY(-126vh); opacity: 0; }
}
@keyframes jelly-pulse {
  0%, 100% { scale: 1 1; }
  30% { scale: 0.84 1.1; }
  62% { scale: 1.1 0.93; }
}

/* tôm: đi lùi — đuôi dẫn đầu (đầu hướng phải, trôi sang trái) */
.shrimp {
  top: 80%;
  width: 106px;
  height: 52px;
  animation: swim-back 33s linear infinite, shrimp-flick 2.6s ease-in-out infinite;
  animation-delay: 7s, 0s;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 64'><path d='M28 32 4 17l9 15-9 15z' fill='%23e0956b'/><path d='M26 29q16-21 47-21 26 0 41 14-15 12-41 14-29 2-47-7z' fill='%23e0956b'/><circle cx='104' cy='23' r='4' fill='%23132f42'/><g fill='none' stroke='%23e0956b' stroke-width='3' stroke-linecap='round'><path d='M55 41l-3 11'/><path d='M67 42l-3 11'/><path d='M79 41l-3 11'/><path d='M112 25q13-9 19-6'/><path d='M110 33q16-1 22 7'/></g></svg>");
}
/* búng đuôi: cuộn người rồi duỗi ra, đẩy con tôm về phía sau */
@keyframes swim-back {
  0% { transform: translateX(124vw); opacity: 0; }
  8% { opacity: 0.9; }
  92% { opacity: 0.9; }
  100% { transform: translateX(-26vw); opacity: 0; }
}
@keyframes shrimp-flick {
  0%, 72%, 100% { scale: 1 1; }
  80% { scale: 0.8 1.14; }
  89% { scale: 1.1 0.94; }
}

/* rising bubbles */
/* bọt khí: nhiều cỡ, nổi lên và lắc nhẹ sang hai bên */
.sea-bubbles span {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eaf9ff88, #cfeaff20 70%);
  border: 1px solid #dff3ff2e;
  animation: bubble 18s linear infinite;
  will-change: transform, opacity;
}
@keyframes bubble {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 0.85; }
  50% { transform: translate3d(var(--drift, 8px), -40vh, 0); }
  92% { opacity: 0.75; }
  100% { transform: translate3d(0, -82vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sea-bubbles { display: none; }
}

/* ---- tia nắng mặt trời xuyên xuống ---- */

.sea-rays {
  position: absolute;
  inset: -25% 0 0;
  background: repeating-linear-gradient(
    101deg,
    rgb(255 255 255 / 0) 0 44px,
    rgb(255 255 255 / 0.055) 44px 76px,
    rgb(255 255 255 / 0) 76px 150px
  );
  /* chỉ giữ phần sáng, làm mờ dần về phía đáy */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #0007 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #0007 55%, transparent 100%);
  animation: rays-sway 16s ease-in-out infinite;
}
@keyframes rays-sway {
  0%, 100% { transform: translate3d(-2.5%, 0, 0) scaleY(1); opacity: 0.7; }
  50% { transform: translate3d(2.5%, 0, 0) scaleY(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sea-rays { animation: none; }
}

/* ---- the pet you can walk around the sea floor ---- */

.pet {
  position: fixed;
  bottom: 2px;
  z-index: 1; /* walks behind the side panels */
  transform: translateX(-50%);
  pointer-events: none;
}
.pet-flip { display: block; }
.pet-flip.left { transform: scaleX(-1); }
.pet-bob { display: block; }
.pet-bob.moving { animation: pet-bob 0.34s ease-in-out infinite; }
.pet-bob.hop { animation: pet-hop 0.45s ease-out; }
.pet svg { display: block; filter: drop-shadow(0 8px 12px #0007); }
@keyframes pet-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pet-hop {
  0% { transform: translateY(0); }
  45% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* panels paint above the pet so it slips behind them */
.history,
.chat { position: relative; z-index: 2; }

/* ---- responsive ---- */

/* nút lịch sử/chat trong header chỉ dành cho màn hẹp (màn rộng dùng tab hai bên) */
/* nút nhạc: khóa Sol (thay cho đĩa than) */
.vinyl-wrap { position: relative; display: inline-flex; }
.vinyl {
  width: 32px;
  height: 32px;
  padding: 0;
  /* khóa Sol: không viền, không khung tròn — chỉ là ký hiệu nhạc */
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vinyl:hover { background: var(--surface2); }
/* khóa Sol: tô bằng currentColor qua mặt nạ clef.svg */
.vinyl .clef {
  display: block;
  width: 13px;
  height: 21px;
  background: currentColor;
  -webkit-mask: url(/clef.svg) center / contain no-repeat;
  mask: url(/clef.svg) center / contain no-repeat;
}
.vinyl.on { color: var(--accent); animation: clef-beat 1.6s ease-in-out infinite; }
.vinyl.open { color: var(--accent); }
@keyframes clef-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .vinyl.on { animation: none; } }

/* nút toàn màn hình ở top menu (icon 4 góc, tô theo currentColor) */
.icon-btn .ico-fs {
  display: block;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url(/fs.svg) center / contain no-repeat;
  mask: url(/fs.svg) center / contain no-repeat;
}
.rain-btn .ico { font-size: 0.95rem; line-height: 1; }

/* icon "người" một tông sáng: emoji 👤 bị hệ thống vẽ tím, CSS không đổi được */
.ico-user {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url(/user.svg) center / contain no-repeat;
  mask: url(/user.svg) center / contain no-repeat;
  vertical-align: -2px;
}
.auth-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* icon "người" nhỏ trong ô cửa / dòng thông tin bàn */
.pool .ico-user,
.crowd .ico-user {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}
/* link mời: chạm một cái là chọn hết, để bấm giữ → Sao chép trên điện thoại */
.invite-link {
  -webkit-user-select: all;
  user-select: all;
}
.music-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: 232px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.music-head {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}
.music-now {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted2);
}
.music-ctl { display: flex; gap: 8px; margin-bottom: 8px; }
.music-cbtn {
  flex: 1;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.music-cbtn:hover,
.music-cbtn.on { border-color: var(--accent); color: var(--accent); }
.music-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 230px;
  overflow-y: auto;
}
.music-list li {
  padding: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 4px;
}
.music-list li:hover { background: var(--surface2); color: var(--accent); }

/* số người online đã có ở giữa bàn → ẩn ở top menu */
.online-badge { display: none; }

/* icon trong top menu: một tông sáng thống nhất (đỡ tím khó nhìn) */
.icon-btn,
.account-btn { color: #eaf6ff; }

/* nút lịch sử/chat trong header chỉ dành cho màn hẹp */
.mobile-toggle { display: none; }

/* nút đóng cho dialog toàn màn hình (chỉ hiện ở màn hẹp) */
.panel-close { display: none; }
@media (max-width: 1080px) {
  .panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 10px;
    bottom: 110px;
    z-index: 90;
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-size: 1.1rem;
    cursor: pointer;
  }
}

@media (max-width: 1080px) {
  .mobile-toggle { display: inline-flex; }
  /* tab dọc hai bên bàn không hợp trên màn hẹp */
  .side-tab { display: none; }

  .screen,
  .screen.hide-hist,
  .screen.hide-chat,
  .screen.hide-hist.hide-chat {
    grid-template-columns: minmax(0, 1fr);
  }
  /* on one column the table comes first, history/chat below it */
  .game { order: 1; }
  .history { order: 2; height: auto; max-height: 70vh; }
  .chat { order: 3; height: 420px; }
  .console-chips { gap: 10px; }
}

@media (max-width: 640px) {
  /* Dropdown trên điện thoại phải ghim vào MÀN HÌNH, không neo vào nút: menu rộng 210px mà nút 🌐
     nằm ở x≈146 (còn 4 nút sau nó) nên neo `right: 0` là menu thò ra ngoài mép trái (left = -38px)
     — đúng lỗi "lựa chọn nằm bên trái màn hình, bị che". */
  .pick-menu {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 52px;
    width: auto;
    min-width: 0;
    max-height: 70vh;
    overflow: auto;
  }
  /* menu của tab bộ mặt: bỏ căn giữa theo nút, dùng luôn khung ghim ở trên */
  .skin-ear .pick-menu {
    left: 8px;
    right: 8px;
    transform: none;
  }
  /* Tab bộ mặt: căn giữa bằng `left/right + margin auto` thay vì `translateX(-50%)` —
     vì `transform` trên phần tử cha tạo CONTAINING BLOCK cho `position: fixed` của menu con,
     làm menu bị nhốt trong nút (đã dính: menu rộng đúng 14px bằng nút). */
  .skin-ear {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    transform: none;
  }
  /* điện thoại: header 1 DÒNG (không xếp 2 dòng) */
  header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* lề trái/phải cho tiêu đề, đừng để chữ dính sát mép màn */
    padding: 4px 10px;
  }
  header h1 { font-size: 1.02rem; white-space: nowrap; }
  /* điện thoại: chữ thôi cho gọn (logo đã là icon app trên màn hình chính) */
  .brand { display: none; }
  .top-menu {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .top-menu .sep { display: none; }
  /* bàn + khung giãn hết cỡ, bỏ rìa trống */
  .app { padding: 4px; }
  .screen { padding: 2px; gap: 4px; }
  .screen .game { padding: 2px; }
  .table-wrap { max-width: none; padding-top: 24px; }
  .console { margin-top: 8px; }
  .chat-head .name-input { width: 96px; }

  /* tiêu đề trên điện thoại chỉ còn "Bầu Cua" */
  .h1-sub { display: none; }
  /* top menu vẫn đủ nút, chỉ thu gọn khoảng cách + cỡ chữ */
  .top-menu { gap: 4px; }
  .top-menu .icons { gap: 0; }
  .top-menu .account-btn {
    width: auto;
    max-width: 72px;
    min-height: 30px;
    padding: 0 6px;
    font-size: 0.66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* nút đổi ngôn ngữ: nhãn 2 chữ cho gọn */
  .top-menu .lang-btn {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
  /* đèn báo kết nối nhường chỗ cho nút toàn màn hình */
  .top-menu .conn { display: none; }

  /* hàng ví: 1 DÒNG — 🌧 | 💰 số dư | 🎁 +thưởng */
  .console-money {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
  }
  .console-money .money-slot { min-width: 4ch; font-size: 0.82rem; }
  .console-money .rain-btn { font-size: 0.82rem; padding: 4px 7px; }
  .console-money .share-btn {
    font-size: 0.66rem;
    padding: 4px 7px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* nhãn thưởng dài → ẩn ở hàng ví, xem trong ví */
  .console-money .chips-bonus { display: none; }
  .cm-wallet {
    flex: 1 1 auto;
    justify-content: center;
    gap: 6px;
    min-width: 0;
  }
  .console-money .console-label { font-size: 0.6rem; letter-spacing: 0.05em; }
  .console-money .chips-balance .me-balance { font-size: 1.15rem; }

  /* điện thoại: chỉ để lại vài nút thiết yếu, không chồng nhau */
  .help-btn,
  .theme-btn { display: none; }
  .icon-btn { width: 30px; height: 30px; min-height: 30px; padding: 0; font-size: 0.9rem; }

  /* ví + chip BÁM ĐÁY màn hình, chip tự co còn 1 hàng */
  .console {
    position: fixed;
    /* ĐIỆN THOẠI MÀN CONG: đừng tràn sát mép — bo cong + CÁCH ĐÁY một khoảng, nếu không thì
       vành cong của màn hình cắt mất góc khối bàn cược (console + chip) */
    left: 8px;
    right: 8px;
    bottom: 10px;
    z-index: 40;
    margin: 0;
    border-radius: var(--r);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  /* bàn cược cũng bo cong cả 4 góc trên điện thoại (mép đã chừa 8–9px) */
  .table { border-radius: var(--r); }
  .screen { margin-bottom: 124px; }
  /* 4 link cuối trang nằm ngay trên ô quảng cáo; chỗ chừa cho console cố định
     do `.bottom-gap` (sau ô quảng cáo) lo — nhờ vậy ô dưới cùng cuộn lên thấy được */
  footer { padding-bottom: 6px; }
  .bottom-gap {
    display: block;
    height: calc(116px + env(safe-area-inset-bottom, 0px));
  }
  /* ô quảng cáo tạm trên điện thoại: gọn lại, nút bấm vẫn đủ to */
  .ad-box { min-height: 56px; padding: 13px 8px 9px; }
  .ad-row { gap: 8px; padding: 0 2px; }
  .ad-icon { font-size: 1.2rem; }
  .ad-text b { font-size: 0.82rem; }
  .ad-text i { font-size: 0.64rem; }
  .ad-cta { padding: 5px 9px; font-size: 0.7rem; }
  .console-chips {
    flex-wrap: nowrap;
    gap: 5px;
    padding: 4px;
  }
  /* chip có width/height inline (CHIP_SIZE) nên phải !important mới thu được */
  .console-chips .chip:not(.all) { width: 38px !important; height: 38px !important; font-size: 0.72rem; }
  .console-chips .chip.all { height: 38px; min-width: 50px; font-size: 0.64rem; }

  /* đăng nhập / tài khoản = dialog TOÀN MÀN HÌNH: bàn phím trồi lên thì
     cuộn trong dialog, không làm ô nhập trượt lung tung */
  .auth-back { padding: 0; align-items: stretch; }
  .auth {
    width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* iOS tự phóng to trang khi ô nhập nhỏ hơn 16px */
  .auth-input,
  .name-input { font-size: 16px; }
  .auth-x { padding: 6px 12px; }

  /* lịch sử / chat = dialog TOÀN MÀN HÌNH */
  .history,
  .chat {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 0;
  }

  // keep the 3x2 table, just tighter
  .ear { font-size: 0.68rem; padding: 0 8px; gap: 3px; }
  .skin-ear { height: 26px; }
  .skin-ear .pick-btn { padding: 0 8px; gap: 3px; font-size: 0.9rem; }
  .skin-ear-name { font-size: 0.7rem; }
  /* giữ đúng thứ tự: 🌧 mời cả bàn | 💰 ví | 🎁 thưởng */
  .rain-menu { left: -4px; width: 250px; }
  .table .tile { min-height: 112px; }
  .tile .emoji { font-size: 2.9rem; }
  .bowl { min-height: 90px; }
  .die { width: 38px; height: 38px; font-size: 1.2rem; }
  .crowd { gap: 14px; font-size: 0.76rem; }
  /* the cookie bar stacks on a phone */
  .consent {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
  }
  .consent-actions { justify-content: center; }
}

/* điện thoại hẹp: hai tai phải vừa cạnh nhau trên bàn ~290px */
@media (max-width: 460px) {
  .ear { font-size: 0.58rem; padding: 0 5px; gap: 2px; }
  .ear-left #bank { font-size: 0.72rem; }
  .ear .rain-pct,
  .ear .info-dot { display: none; }
  /* hẹp quá thì tab bộ mặt chỉ còn CỜ (tên bản nhường chỗ cho hai tai) */
  .skin-ear .pick-btn { padding: 0 6px; }
  .skin-ear-name { display: none; }
}

/* điện thoại quay ngang (màn thấp): ghim console xuống đáy, bàn tràn viền */
@media (max-height: 520px) and (orientation: landscape) {
  /* bỏ dòng chạy chữ + các dòng thông tin để tiết kiệm chiều cao */
  .ticker,
  .crowd,
  .stage { display: none; }
  /* tiêu đề vẫn cần lề trái/phải, chỉ bàn chơi mới tràn viền */
  header { padding: 0 10px; }
  header h1 { font-size: 0.86rem; }
  /* màn quá thấp: banner quảng cáo nhường chỗ cho bàn chơi */
  .ad-slot { display: none; }
  /* tai (quỹ/lượt) không cần khi màn quá thấp — lấy chỗ cho bàn */
  .ear { display: none; }
  /* …nhưng tab BỘ MẶT phải còn (nếu không thì hết đường đổi bản): cho nó xuống dòng riêng */
  .skin-ear {
    position: static;
    transform: none;
    margin: 0 auto 6px;
    height: 26px;
  }
  /* bàn tràn viền: bỏ đệm ở đỉnh, vẫn CHỪA mép trái/phải + bo góc (màn cong) */
  .app { max-width: none; padding: 0 6px; }
  .screen {
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    margin-bottom: 102px;
  }
  .screen .game { padding: 0; background: transparent; border-radius: var(--r); }
  .table-wrap { padding-top: 0; max-width: none; }
  .table { border-radius: var(--r); }
  .table .tile { min-height: 52px; }
  .tile .emoji { font-size: 1.8rem; }
  .tile .name { font-size: 0.64rem; }
  .tile .stake { font-size: 0.58rem; }
  .bowl { min-height: 40px; }
  .bowl-info { display: none; }
  /* 3 xúc xắc kết quả to hơn */
  .die { width: 34px; height: 34px; font-size: 1.15rem; }
  /* ví + hàng chip luôn nằm trong tầm tay, chip bé lại — và CÁCH ĐÁY + bo cong (màn cong) */
  .console {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 10px;
    z-index: 40;
    margin: 0;
    border-radius: var(--r);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  /* thanh cookie (z-index 90) che console tạm thời cho tới khi bấm Đồng ý */
  .console-money { padding: 3px 8px; }
  .console-chips { flex-wrap: nowrap; padding: 3px; gap: 5px; }
  .console-chips .chip:not(.all) { width: 34px !important; height: 34px !important; font-size: 0.7rem; }
  .console-chips .chip.all { height: 34px; min-width: 50px; font-size: 0.62rem; }
  .chips-balance .me-balance { font-size: 1.2rem; }
  /* đăng nhập / tài khoản toàn màn hình cả khi quay ngang */
  .auth-back { padding: 0; align-items: stretch; }
  .auth {
    width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    overscroll-behavior: contain;
  }

  /* lịch sử & chat mở thành NGĂN KÉO hai bên (header + hàng chip vẫn thấy) */
  .history,
  .chat {
    position: fixed;
    top: 38px;
    bottom: 92px;
    z-index: 80;
    height: auto;
    max-height: none;
    border-radius: 0;
    animation: drawer-in 0.18s ease-out;
  }
  .history {
    --slide: -16px;
    left: 0;
    width: min(82vw, 360px);
    border-right: 1px solid var(--line);
  }
  .chat {
    --slide: 16px;
    right: 0;
    width: min(88vw, 380px);
    border-left: 1px solid var(--line);
  }
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateX(var(--slide, 0)); }
  to { opacity: 1; transform: none; }
}