/* 賭場（js/casino.js、js/casino-art.js）：滿版的賭場內景、上面的資訊列、桌子的名字牌；
   桌子頁面的背景（.cz-room：21 點牌桌、猜拳台）＝賭場裡那一桌的特寫，進去的時候有一點點「走進去」的動畫 */

.casino {
  position: relative; display: flex; flex-direction: column;
  margin: -12px -12px -28px; /* 手機：貼齊螢幕兩邊（抵掉 .main 的 padding） */
  min-height: calc(100dvh - 63px - var(--nav-h) - var(--safe-b));
  background: #160a0e; color: #f3e6c8;
}
@media (min-width: 960px) {
  .casino { margin: 0; min-height: 0; border-radius: 14px; overflow: hidden; border: 2px solid #c99a3e; box-shadow: 0 6px 0 #1c130b; }
}

/* ── 上面的資訊列 ── */
.cz-hud {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 10px; background: linear-gradient(#2e1218, #1a0a0e); border-bottom: 2px solid #c99a3e;
}
.cz-title { margin: 0 2px; font-family: var(--serif); font-size: 18px; font-weight: 900; color: #f6d78a; white-space: nowrap; letter-spacing: 0.06em; }
.cz-hud .spacer { flex: 1 1 auto; }
.cz-wallet, .cz-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cz-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 16px;
  border: 1px solid rgba(246, 215, 138, 0.45); background: rgba(0, 0, 0, 0.35); color: #f3e6c8;
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cz-chip .ico { width: 16px; height: 16px; flex: none; }
.cz-chip:hover { background: rgba(246, 215, 138, 0.16); color: #fff; }
.cz-chip:disabled { opacity: 0.6; cursor: default; }
.cz-primary, .cz-primary:hover { background: #d9a441; color: #2a1008; border-color: #f6d78a; }
.cz-coins .coin-amt .ico { color: #f6d78a; fill: rgba(246, 215, 138, 0.25); }
.cz-coins b { font-size: 15px; }
.cz-bank.owe { border-color: #ff9a8a; color: #ffd8d0; }
.cz-bank.overdue { background: rgba(190, 40, 40, 0.45); }
.cz-paused { border-style: dashed; }
.cz-news:empty { display: none; }
@media (max-width: 480px) {
  .cz-hide-s, .cz-home span { display: none; }
  .cz-hud { padding: 6px 8px; gap: 5px; }
  .cz-chip { height: 30px; padding: 0 8px; }
  .cz-title { font-size: 16px; }
}

/* ── 場景 ── */
.cz-stage { position: relative; flex: 1 1 auto; display: flex; align-items: flex-start; background: #120609; }
.cz-scroll {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c99a3e #1a0a0e;
}
.cz-scroll.pan { cursor: grab; }
.cz-scroll.pan:active { cursor: grabbing; }
.cz-box { position: relative; margin: 0 auto; transform-origin: 50% 50%; transition: transform 0.32s ease-in, opacity 0.32s ease-in; }
.cz-box.cz-zoom { transform: scale(1.9); opacity: 0; }
.cz-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; user-select: none; -webkit-user-drag: none; }
.cz-sign {
  position: absolute; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--serif); font-weight: 900; font-size: calc(var(--cz-s, 2) * 9.5px); line-height: 1.1;
  letter-spacing: 0.22em; padding-left: 0.22em; color: #ffe8a0;
  text-shadow: 0 0 4px #ff4a6a, 0 0 1px #ff9ab0, 0 1px 0 #6a1020;
}
.cz-hits, .cz-people { position: absolute; inset: 0; }
.cz-people { pointer-events: none; }
.cz-hit { position: absolute; display: block; border-radius: 10px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.cz-hit:hover, .cz-hit:focus-visible { box-shadow: inset 0 0 0 2px rgba(246, 215, 138, 0.7); background: rgba(246, 215, 138, 0.06); outline: none; }
.cz-tag {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 2px); z-index: 2;
  display: grid; justify-items: center; gap: 0; padding: 2px 8px; border-radius: 9px; white-space: nowrap;
  background: rgba(22, 8, 12, 0.84); border: 1px solid rgba(246, 215, 138, 0.55); color: #f3e6c8;
  font-size: 11.5px; line-height: 1.3; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.cz-tag:empty { display: none; }
.cz-tag-name { color: #f6d78a; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.cz-tag-sub { font-size: 10.5px; color: #e8dcc0; }
.cz-you { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 6px; background: #d9a441; color: #2a1008; margin-left: 2px; }
.cz-betting b { color: #8affa8; }
.cz-live { color: #ff9a8a; font-weight: 700; }
.cz-bj.is-betting .cz-tag { border-color: #8affa8; animation: cz-pulse 1.3s ease-in-out infinite; }
.cz-bj.mine .cz-tag { background: rgba(92, 58, 6, 0.92); border-color: #f6d78a; }
.cz-bj.is-open .cz-tag { background: #d9a441; border-color: #fff0c0; }
.cz-bj.is-open .cz-tag-name { color: #2a1008; }
.cz-bj.is-idle .cz-tag { opacity: 0; transition: opacity 0.15s; }
.cz-bj.is-idle:hover .cz-tag, .cz-bj.is-idle:focus-visible .cz-tag { opacity: 0.8; }
.cz-hit.soon .cz-tag { background: rgba(48, 46, 58, 0.88); border-color: rgba(200, 200, 220, 0.5); }
.cz-hit.deco .cz-tag { opacity: 0.8; }
.cz-slots .cz-tag { bottom: auto; top: 100%; transform: translate(-50%, -4px); }
.cz-bar .cz-tag { bottom: auto; top: 0; }
.cz-race .cz-tag { bottom: auto; top: 37%; }
@keyframes cz-pulse { 50% { box-shadow: 0 0 0 3px rgba(138, 255, 168, 0.25), 0 2px 0 rgba(0, 0, 0, 0.35); } }
.cz-person {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  font-size: 10.5px; line-height: 1.35; padding: 0 5px; border-radius: 7px; background: rgba(0, 0, 0, 0.6); color: #fff;
}
.cz-person.me { background: #d9a441; color: #2a1008; font-weight: 700; }
.cz-hint { margin: 0; padding: 6px 10px 8px; text-align: center; font-size: 12px; color: #c9b48a !important; background: #120609; }

/* ── 面板 ── */
.cz-desk { display: flex; align-items: flex-end; gap: 12px; }
.cz-say { margin: 0 0 6px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.cz-list h3 { margin: 4px 0 0; }

/* ── 桌子頁面的背景：那一桌的特寫 ── */
.cz-room {
  position: relative; isolation: isolate;
  margin: -12px -12px -28px; padding: 12px 12px 28px;
  min-height: calc(100dvh - 63px - var(--nav-h) - var(--safe-b));
}
@media (min-width: 960px) {
  .cz-room { margin: -16px -16px -56px; padding: 16px 16px 56px; min-height: calc(100dvh - 71px); }
}
.cz-room-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #24080e; }
/* 那一桌的特寫：上面一整條（手機約 240px 高、電腦整個畫面），下面接深紅地毯色 */
.cz-room-canvas { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 8 / 5; image-rendering: pixelated; image-rendering: crisp-edges; transform-origin: 50% 60%; }
.cz-room-shade { position: absolute; inset: 0; background: linear-gradient(rgba(14, 6, 10, 0.05), rgba(14, 6, 10, 0.25) 28vw, rgba(24, 8, 14, 0.85) 58vw, #24080e 64vw); }
.cz-room-body { position: relative; }
@media (max-width: 699px) { .cz-room-body { padding-top: 30vw; } }
@media (min-width: 700px) { .cz-room-shade { background: linear-gradient(rgba(14, 6, 10, 0.18), rgba(14, 6, 10, 0.45) 40%, rgba(24, 8, 14, 0.8) 62.5vw, #24080e 64vw); } }
.cz-entering .cz-room-canvas { animation: cz-enter-bg 0.6s ease-out both; }
.cz-entering .cz-room-body { animation: cz-enter-body 0.45s 0.12s ease-out both; }
@keyframes cz-enter-bg { from { transform: scale(1.4); filter: brightness(1.35); } to { transform: none; filter: none; } }
@keyframes cz-enter-body { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cz-back { background: rgba(22, 8, 12, 0.78); color: #f6e7c3; border-color: rgba(246, 215, 138, 0.55); }
.cz-back:hover { background: rgba(60, 26, 30, 0.9); color: #fff; }
/* 21 點牌桌：深色背景上的字要亮一點；按鈕區放在羊皮紙板上 */
.cz-room .bj-head { padding: 6px 8px; border-radius: 12px; background: rgba(22, 8, 12, 0.62); }
.cz-room .bj-title, .cz-room .bj-watch { color: #f6e7c3; }
.cz-room .bj-title .muted { color: #d8c69c; }
.cz-room .bj-panel { padding: 14px 16px; border-radius: var(--radius, 12px); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--panel-shadow); color: var(--ink, inherit); }
.cz-room .felt { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(246, 215, 138, 0.25); }
/* 猜拳台 */
.cz-room .earn-head { padding: 6px 8px; border-radius: 12px; background: rgba(22, 8, 12, 0.62); color: #f6e7c3; }
.cz-room .earn-head .page-title { color: #f6e7c3; }
.cz-room .rps-intro { padding: 14px 16px; border-radius: var(--radius, 12px); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--panel-shadow); }

@media (prefers-reduced-motion: reduce) {
  .cz-box { transition: none; }
  .cz-entering .cz-room-canvas, .cz-entering .cz-room-body, .cz-bj.is-betting .cz-tag { animation: none; }
}

/* 21 點：驗牌重開的一局（莊家一發牌就 Blackjack、驗出有問題、重新發牌）、閒家爆牌的說明、牌桌的「怎麼玩」 */
.chk-reopen { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; padding: 3px 10px; border-radius: 10px; font-size: 13px; color: #fff4c8; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(246, 215, 138, 0.5); }
.chk-reopen.big { font-size: 14px; padding: 6px 12px; animation: cz-reopen 1.2s ease-out 1; }
.chk-reopen b { color: var(--felt-hi, #f6d78a); }
.chk-reopen .chk-old { font-size: 12px; opacity: 0.85; }
@keyframes cz-reopen { from { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(246, 215, 138, 0.5), 0 0 0 6px rgba(246, 215, 138, 0.35); } }
.bj-banner-note { font-size: 13px; color: #ffd8c8; }
.bj-rules-btn { flex: none; }
@media (max-width: 480px) { .bj-rules-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .chk-reopen.big { animation: none; } }
/* 牌桌頁：欄寬不跟著標題撐開（名字很長、頁首多了「怎麼玩」時，標題變成「…」而不是整頁左右捲） */
.cz-room .bj { grid-template-columns: minmax(0, 1fr); }