/* =========================================================================
   HenPoker · cartoon.css
   卡通棋牌组件库（基于国风糖果 token）
   加载顺序：cartoon.css 须在 scene.css 之后以覆盖写实背景
   ========================================================================= */

/* ---------- 全局卡通基础：触控高亮更软 ---------- */
button{ font-family: var(--ff-body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea{ font-family: var(--ff-body); }

/* ---------- 糖豆按钮 ---------- */
.btn-candy{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;min-height: var(--hit-min);
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-weight: 800; font-size: 15px;
  color: var(--wood-700);
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 100%);
  border: var(--bw) solid var(--gold-900);
  box-shadow:
    0 4px 0 var(--gold-900),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 14px rgba(0,0,0,.18);
  transition: transform var(--dur-fast) var(--ease-pop),
              box-shadow var(--dur-fast) var(--ease-pop),
              filter var(--dur-fast) ease;
  user-select: none; text-decoration: none;
}
.btn-candy:hover{ filter: brightness(1.05); }
.btn-candy:active{
  transform: translateY(3px);
  box-shadow:
    0 1px 0 var(--gold-900),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 2px 6px rgba(0,0,0,.18);
}
.btn-candy:disabled{ filter: grayscale(.6) brightness(.95); opacity:.7; cursor:not-allowed; transform:none; box-shadow: 0 1px 0 var(--gold-900), inset 0 1px 0 rgba(255,255,255,.4); }

/* 颜色变体 */
.btn-candy.green{
  background: linear-gradient(180deg, var(--green-400) 0%, var(--green-500) 100%);
  border-color: var(--green-700);
  box-shadow: 0 4px 0 var(--green-700), inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px rgba(0,0,0,.18);
  color: #fff;
}
.btn-candy.green:active{ box-shadow: 0 1px 0 var(--green-700), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.18); }
.btn-candy.red{
  background: linear-gradient(180deg, var(--red-300) 0%, var(--red-500) 100%);
  border-color: var(--red-700);
  box-shadow: 0 4px 0 var(--red-700), inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(0,0,0,.18);
  color: #fff;
}
.btn-candy.red:active{ box-shadow: 0 1px 0 var(--red-700), inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.18); }
.btn-candy.blue{
  background: linear-gradient(180deg, var(--blue-400) 0%, var(--blue-500) 100%);
  border-color: var(--blue-700);
  box-shadow: 0 4px 0 var(--blue-700), inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(0,0,0,.18);
  color: #fff;
}
.btn-candy.blue:active{ box-shadow: 0 1px 0 var(--blue-700), inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.18); }
.btn-candy.ghost{
  background: rgba(255,255,255,.85);
  color: var(--wood-700);
  border-color: var(--wood-500);
  box-shadow: 0 4px 0 var(--wood-500), inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px rgba(0,0,0,.12);
}
.btn-candy.ghost:active{ box-shadow: 0 1px 0 var(--wood-500), inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.12); }

/* 尺寸 */
.btn-candy.sm{ padding:6px 12px; font-size:13px; min-height:36px; }
.btn-candy.lg{ padding:14px 26px; font-size:18px; min-height:52px; }

/* ---------- 卡通面板 ---------- */
.card-cartoon{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%);
  border: var(--bw) solid var(--bd-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  position: relative;
}
.card-cartoon.flat{ box-shadow: var(--sh-flat); }
.card-cartoon::before{
  /* 卡通高光内描边 */
  content:""; position:absolute; inset:3px; border-radius: calc(var(--r-lg) - 4px);
  border:1px solid rgba(255,255,255,.7); pointer-events:none;
}

/* ---------- 印章 ---------- */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF6B5E 0%, var(--red-500) 60%, var(--red-700) 100%);
  color: #FFE48A;
  font-family: "Baloo 2","STKaiti","KaiTi",serif;
  font-weight: 900; font-size: 18px; letter-spacing: 1px;
  border: 2px solid #6B0000;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(139,0,0,.35);
  transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.seal.gold{
  background: radial-gradient(circle at 30% 30%, #FFD45C 0%, var(--gold-500) 60%, var(--gold-700) 100%);
  color: var(--red-700);
  border-color: var(--gold-900);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(107,58,0,.4);
}
.seal.sm{ width:38px; height:38px; font-size:13px; }
.seal.lg{ width:76px; height:76px; font-size:24px; }

/* ---------- 卷云分隔 ---------- */
.scroll-divider{
  display:flex; align-items:center; gap:8px; margin: 14px 0;
  color: var(--gold-700);
}
.scroll-divider::before, .scroll-divider::after{
  content:""; flex:1; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-500) 50%, transparent 100%);
  border-radius: 2px;
}
.scroll-divider svg{ width:28px; height:14px; flex-shrink:0; }

/* ---------- 卡通铜钱 ---------- */
.coin{
  display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFE48A 0%, var(--gold-500) 60%, var(--gold-700) 100%);
  color: var(--red-700);
  font-family: "Baloo 2",serif;
  font-weight: 900; font-size: 11px;
  border: 1.5px solid var(--gold-900);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 4px rgba(107,58,0,.4);
  flex-shrink:0;
}
.coin.lg{ width:42px; height:42px; font-size:14px; border-width:2px; }
.coin.xl{ width:60px; height:60px; font-size:20px; border-width:3px; }

/* ---------- 卡通灯笼（装饰用，纯 CSS） ---------- */
.lantern{
  display:inline-block; position:relative;
  width: 36px; height: 46px;
  background: radial-gradient(ellipse at 50% 35%, #FF8E78 0%, var(--red-500) 55%, var(--red-700) 100%);
  border-radius: 50% / 38%;
  border: 1.5px solid var(--red-700);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 0 16px rgba(232,72,59,.5);
  flex-shrink:0;
}
.lantern::before, .lantern::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  background: var(--gold-700);
  border-radius: 1px;
}
.lantern::before{ top:-3px; width:18px; height:3px; }
.lantern::after{ bottom:-3px; width:18px; height:3px; }
.lantern .tassel{
  position:absolute; left:50%; transform:translateX(-50%); top:100%;
  width:2px; height:10px; background: var(--gold-500);
  border-radius: 0 0 1px 1px;
}

/* ---------- 卡通扑克（占位用，颜色 + 圆角） ---------- */
.pcard-cartoon{
  width: var(--card-w, 34px);
  height: var(--card-h, 48px);
  border-radius: 6px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%);
  border: 1.5px solid var(--bd-ink);
  box-shadow: 0 2px 0 var(--wood-300), 0 3px 6px rgba(0,0,0,.25);
  display:inline-flex; align-items:center; justify-content:center;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-pop);
}
.pcard-cartoon.red{ color: var(--red-500); }
.pcard-cartoon.black{ color: var(--wood-700); }
.pcard-cartoon.joker{
  background: repeating-linear-gradient(45deg, var(--red-500) 0 4px, var(--gold-300) 4px 8px);
  color: #fff;
}
.pcard-cartoon.back{
  background: linear-gradient(135deg, var(--red-500) 0%, var(--red-700) 100%);
  border-color: var(--red-700);
  color: transparent;
  position: relative;
  overflow: hidden;
}
.pcard-cartoon.back::after{
  content:""; position:absolute; inset:4px; border-radius:4px;
  background:
    radial-gradient(circle at 30% 30%, var(--gold-300) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 70% 70%, var(--gold-300) 0 1.5px, transparent 1.5px),
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,212,92,.18) 3px 4px);
  border: 1px solid var(--gold-500);
}

/* ---------- 卡通瓦片（首页游戏入口） ---------- */
.tile-cartoon{
  display:flex; align-items:center; gap:12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%);
  border: var(--bw) solid var(--bd-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop);
  text-decoration:none; color: inherit;
}
.tile-cartoon:hover{ transform: translateY(-3px); box-shadow: 0 6px 0 var(--wood-300), 0 10px 22px rgba(0,0,0,.22); }
.tile-cartoon:active{ transform: translateY(1px); box-shadow: 0 2px 0 var(--wood-300), 0 4px 10px rgba(0,0,0,.2); }
.tile-cartoon .ti-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border: 2px solid var(--gold-900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  font-size: 26px; flex-shrink:0;
}
.tile-cartoon.green .ti-icon{ background: linear-gradient(180deg, var(--green-400), var(--green-500)); border-color: var(--green-700); }
.tile-cartoon.red .ti-icon{ background: linear-gradient(180deg, var(--red-300), var(--red-500)); border-color: var(--red-700); }
.tile-cartoon.purple .ti-icon{ background: linear-gradient(180deg, var(--purple-400), var(--purple-500)); border-color: #6A1B9A; }
.tile-cartoon .ti-name{ font-family: var(--ff-display); font-weight:800; font-size:16px; color: var(--wood-700); }
.tile-cartoon .ti-desc{ font-size:11px; color: var(--wood-500); margin-top:2px; font-weight:600; }

/* ---------- 卡通头像框 ---------- */
.av-cartoon{
  width: var(--av, 40px); height: var(--av, 40px);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
  border: 2px solid var(--wood-700);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.25);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: "Baloo 2",serif;
  font-weight: 800; color: var(--wood-700);
  position: relative;
  overflow: hidden;
}
.av-cartoon.lg{ width: 56px; height: 56px; font-size: 22px; }
.av-cartoon.xl{ width: 80px; height: 80px; font-size: 30px; border-width: 3px; }

/* 头像下标牌（昵称+分数） */
.av-tag{
  position:absolute; left:50%; transform: translateX(-50%);
  bottom: -8px;
  background: linear-gradient(180deg, #2A1810, #1A0E08);
  color: #FFE48A;
  font-size: 10px; font-weight: 800; padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--gold-700);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/* 状态：当前轮到此玩家 */
.av-cartoon.is-turn{
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-300), 0 0 18px rgba(245,179,36,.7), inset 0 -2px 0 rgba(0,0,0,.12);
  animation: turn-pulse 1s ease-in-out infinite alternate;
}
@keyframes turn-pulse{
  from{ box-shadow: 0 0 0 3px var(--gold-500), 0 0 12px rgba(245,179,36,.6), inset 0 -2px 0 rgba(0,0,0,.12); }
  to  { box-shadow: 0 0 0 3px var(--gold-300), 0 0 24px rgba(245,179,36,1), inset 0 -2px 0 rgba(0,0,0,.12); }
}

/* ---------- 弹窗/对话框 ---------- */
.dialog-cartoon{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%);
  border: var(--bw-bold) solid var(--bd-ink);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-pop);
  padding: 22px 22px 18px;
  position: relative;
}
.dialog-cartoon .dlg-title{
  font-family: var(--ff-display);
  font-weight: 800; font-size: 20px;
  color: var(--wood-700);
  margin-bottom: 12px;
  display:flex; align-items:center; gap:10px;
}

/* ---------- 输入框 ---------- */
.input-cartoon{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--cream-300);
  background: var(--cream-50);
  font-family: var(--ff-body);
  font-size: 14px; font-weight: 600;
  color: var(--wood-700);
  outline: none;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.input-cartoon:focus{
  border-color: var(--green-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31,168,90,.2);
}
.input-cartoon::placeholder{ color: var(--silver-700); font-weight:600; }

/* ---------- 提示徽章 ---------- */
.badge-cartoon{
  display:inline-flex; align-items:center; gap:4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 800;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-700);
  border: 1.5px solid var(--gold-900);
  box-shadow: 0 2px 0 var(--gold-900);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.badge-cartoon.green{ background: linear-gradient(180deg, var(--green-400), var(--green-500)); color:#fff; border-color: var(--green-700); box-shadow: 0 2px 0 var(--green-700); }
.badge-cartoon.red{ background: linear-gradient(180deg, var(--red-300), var(--red-500)); color:#fff; border-color: var(--red-700); box-shadow: 0 2px 0 var(--red-700); }

/* ---------- 顶部条（卡通瓦片横条） ---------- */
.topbar-cartoon{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(180deg, #1A0E08 0%, #2A1810 100%);
  border-bottom: 3px solid var(--gold-700);
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  color: var(--cream-50);
}
.topbar-cartoon .tb-title{
  font-family: var(--ff-display);
  font-weight: 800; font-size: 18px;
  color: var(--gold-300);
  text-shadow: 0 1px 0 var(--wood-700);
  letter-spacing: 1px;
}

/* ---------- 弹跳进场动画 ---------- */
@keyframes pop-in{
  0%   { opacity: 0; transform: scale(.85) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { transform: scale(1); }
}
.pop-in{ animation: pop-in 280ms var(--ease-pop) both; }

@keyframes slide-up{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: none; }
}
.slide-up{ animation: slide-up 320ms var(--ease-pop) both; }

/* 抖动（错误） */
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%,60%{ transform: translateX(-6px); }
  40%,80%{ transform: translateX(6px); }
}
.shake{ animation: shake .35s var(--ease-pop); }

/* 等待呼吸（loading） */
@keyframes breathe{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(.96); opacity: .8; }
}
.breathe{ animation: breathe 1.4s ease-in-out infinite; }

/* ---------- 卡通绿毡牌桌背景（CSS 渐变模拟） ---------- */
.felt-cartoon{
  background:
    radial-gradient(ellipse at 50% 40%, #2B7A4A 0%, var(--green-700) 70%, #0A4A22 100%),
    var(--green-700);
  background-blend-mode: multiply;
  position: relative;
}
.felt-cartoon::before{
  /* 卡通缝线 */
  content:""; position:absolute; inset:14px; border-radius: 18px;
  border: 2px dashed rgba(255,212,92,.5);
  pointer-events:none;
}
.felt-cartoon::after{
  /* 角落金币 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 22px 22px, var(--gold-500) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 22px) 22px, var(--gold-500) 0 6px, transparent 7px),
    radial-gradient(circle at 22px calc(100% - 22px), var(--gold-500) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 22px), var(--gold-500) 0 6px, transparent 7px);
  opacity: .85;
}

/* ---------- 实用类 ---------- */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.flex-1{ flex:1; }
.text-ink{ color: var(--wood-700); }
.text-muted{ color: var(--wood-500); }
.text-gold{ color: var(--gold-700); }
.text-onDark{ color: var(--cream-50); }
.fw-800{ font-weight: 800; } .fw-700{ font-weight: 700; }
.ff-display{ font-family: var(--ff-display); }
.center{ display:flex; align-items:center; justify-content:center; }
.between{ display:flex; align-items:center; justify-content:space-between; }

/* ---------- 响应式微调 ---------- */
@media (max-width: 520px){
  .btn-candy{ padding: 9px 14px; font-size: 14px; }
  .tile-cartoon{ padding: 12px 14px; }
  .tile-cartoon .ti-icon{ width:44px; height:44px; font-size: 22px; }
  .dialog-cartoon{ padding: 18px 16px 14px; }
}

/* ============================================================
   兼容升级层：让现有元素自动套用糖豆风格（不破坏 layout）
   cartoon.css 最后加载，优先级高于 cn-theme.css / scene.css
   ============================================================ */

/* 登录/通用主按钮（.btn-primary） */
.btn-primary{
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 100%) !important;
  color: var(--wood-700) !important;
  border: var(--bw) solid var(--gold-900) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 4px 0 var(--gold-900), inset 0 1px 0 rgba(255,255,255,.55), 0 6px 14px rgba(0,0,0,.18) !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop), filter var(--dur-fast) ease;
}
.btn-primary:active{
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--gold-900), inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.18) !important;
}
.btn-primary:hover{ filter: brightness(1.05); }

/* 房间按钮（绿/红/金变体） */
.btn-ready, .btn-start, .btn-cancel, .act-btn, .add-bot, .leave-btn, .invite-btn, .start-btn, .ready-btn{
  border-radius: var(--r-pill) !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop);
}
.btn-ready:active, .btn-start:active, .btn-cancel:active, .act-btn:active, .add-bot:active, .leave-btn:active, .invite-btn:active, .start-btn:active, .ready-btn:active{
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

/* 输入框 */
.input-group input{
  border-radius: var(--r-md) !important;
  border: var(--bw) solid var(--cream-300) !important;
  background: var(--cream-50) !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  color: var(--wood-700) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input-group input:focus{
  border-color: var(--green-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(31,168,90,.2) !important;
}
.input-group input::placeholder{ color: var(--silver-700); font-weight:600; }

/* 顶部条（卡通化 + 国风金边） */
.top-strip{
  background: linear-gradient(180deg, #1A0E08 0%, #2A1810 50%, #1A0E08 100%) !important;
  border-bottom: 3px solid var(--gold-700) !important;
  color: var(--cream-50) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(245,179,36,.18) !important;
}
.top-strip .page-title{
  color: var(--gold-300) !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 var(--wood-700), 0 2px 4px rgba(0,0,0,.5) !important;
}

/* 货币徽章（卡通金币/银币） */
.cmini{
  background: linear-gradient(180deg, #2A1810, #1A0E08) !important;
  border: 1.5px solid var(--gold-700) !important;
  color: var(--gold-300) !important;
  box-shadow: inset 0 1px 0 rgba(245,179,36,.25), 0 2px 4px rgba(0,0,0,.3) !important;
  font-weight: 800 !important;
  border-radius: var(--r-pill) !important;
}
.cmini .dot{ border: 1px solid rgba(0,0,0,.3) !important; }
.cmini .dot.g{
  background: radial-gradient(circle at 30% 30%, #FFE48A 0%, var(--gold-500) 60%, #B8860B 100%) !important;
  color: var(--red-700) !important;
}
.cmini .dot.s{
  background: radial-gradient(circle at 30% 30%, #F5F7FA 0%, var(--silver-400) 60%, #6A7682 100%) !important;
  color: var(--wood-700) !important;
}

/* 大厅游戏瓦片 */
.game-tile{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%) !important;
  border: var(--bw) solid var(--bd-ink) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-card) !important;
  position: relative;
  overflow: hidden;
}
.game-tile::before{
  content:""; position:absolute; inset:3px; border-radius: calc(var(--r-lg) - 4px);
  border:1px solid rgba(255,255,255,.7); pointer-events:none;
}
.game-tile:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 0 var(--wood-300), 0 10px 22px rgba(0,0,0,.22) !important;
}
.game-tile:active{ transform: translateY(1px) !important; }

/* 房间等待页座位（加厚边框+糖豆阴影） */
.wait-seat{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%) !important;
  border: var(--bw) solid var(--bd-ink) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-card-soft) !important;
  position: relative;
  overflow: hidden;
}
.wait-seat.empty{
  background: repeating-linear-gradient(45deg, var(--cream-50) 0 8px, var(--cream-100) 8px 16px) !important;
  border-style: dashed !important;
  opacity: .85;
}
.wait-seat.me{
  border-color: var(--gold-500) !important;
  box-shadow: 0 0 0 3px rgba(245,179,36,.25), var(--sh-card-soft) !important;
}
.wait-seat .nm{ font-family: var(--ff-display); font-weight: 800; color: var(--wood-700); }
.wait-seat .ready-tag, .wait-seat .not-ready{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--ff-display); font-weight: 800; font-size: 10px;
  border: 1.5px solid;
}
.wait-seat .ready-tag{
  background: linear-gradient(180deg, var(--green-400), var(--green-500));
  color:#fff; border-color: var(--green-700);
  box-shadow: 0 1px 0 var(--green-700);
}
.wait-seat .not-ready{
  background: linear-gradient(180deg, var(--cream-100), var(--cream-200));
  color: var(--wood-500); border-color: var(--cream-300);
}


/* ============================================================
   牌桌动画：发牌弹出 / 胜利粒子 / 按钮物理回弹 / Toast 滑入
   ============================================================ */

/* 发牌弹出：从上落到位置 + 旋转归位 */
@keyframes deal-in{
  0%   { opacity: 0; transform: translateY(-80px) rotate(-15deg) scale(0.6); }
  60%  { opacity: 1; transform: translateY(8px) rotate(3deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.pcard.deal-anim,
.pcard-cartoon.deal-anim{
  animation: deal-in 500ms var(--ease-pop) both;
}
/* 多张牌错落：~3秒发完17张牌，每张延迟150ms */
.my-hand .pcard:nth-child(1){ animation-delay: 0ms; }
.my-hand .pcard:nth-child(2){ animation-delay: 150ms; }
.my-hand .pcard:nth-child(3){ animation-delay: 300ms; }
.my-hand .pcard:nth-child(4){ animation-delay: 450ms; }
.my-hand .pcard:nth-child(5){ animation-delay: 600ms; }
.my-hand .pcard:nth-child(6){ animation-delay: 750ms; }
.my-hand .pcard:nth-child(7){ animation-delay: 900ms; }
.my-hand .pcard:nth-child(8){ animation-delay: 1050ms; }
.my-hand .pcard:nth-child(9){ animation-delay: 1200ms; }
.my-hand .pcard:nth-child(10){ animation-delay: 1350ms; }
.my-hand .pcard:nth-child(11){ animation-delay: 1500ms; }
.my-hand .pcard:nth-child(12){ animation-delay: 1650ms; }
.my-hand .pcard:nth-child(13){ animation-delay: 1800ms; }
.my-hand .pcard:nth-child(14){ animation-delay: 1950ms; }
.my-hand .pcard:nth-child(15){ animation-delay: 2100ms; }
.my-hand .pcard:nth-child(16){ animation-delay: 2250ms; }
.my-hand .pcard:nth-child(17){ animation-delay: 2400ms; }
.my-hand .pcard:nth-child(n+18){ animation-delay: 2500ms; }

/* 选牌弹起 */
@keyframes select-pop{
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-26px) scale(1.08); }
  100% { transform: translateY(-22px) scale(1); }
}
.my-hand .pcard.selected{
  animation: select-pop 280ms var(--ease-pop) both;
}

/* 胜利粒子（emoji 撒花） */
@keyframes confetti-fall{
  0%   { opacity: 0; transform: translate3d(0,-40px,0) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx,40px), 110vh, 0) rotate(720deg); }
}
.confetti{
  position: fixed; top: -20px; z-index: 999;
  font-size: 28px; pointer-events: none;
  animation: confetti-fall 2.4s var(--ease-out) forwards;
}
.confetti.c1{ --dx: 80px; left: 10%; font-size: 24px; }
.confetti.c2{ --dx: -60px; left: 25%; font-size: 32px; }
.confetti.c3{ --dx: 120px; left: 40%; font-size: 28px; }
.confetti.c4{ --dx: -100px; left: 55%; font-size: 26px; }
.confetti.c5{ --dx: 50px; left: 70%; font-size: 30px; }
.confetti.c6{ --dx: -80px; left: 85%; font-size: 28px; }
.confetti.c7{ --dx: 100px; left: 15%; font-size: 34px; }
.confetti.c8{ --dx: -40px; left: 60%; font-size: 22px; }

/* 胜利横幅 */
@keyframes banner-in{
  0%   { opacity: 0; transform: translateY(-30px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.win-banner{
  position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
  z-index: 200;
  padding: 14px 28px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border: var(--bw-bold) solid var(--gold-900);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 0 var(--gold-900), 0 16px 32px rgba(0,0,0,.4);
  font-family: var(--ff-display);
  font-weight: 900; font-size: 26px;
  color: var(--red-700);
  text-shadow: 0 2px 0 var(--gold-100);
  animation: banner-in 500ms var(--ease-pop) both;
  pointer-events: none;
}

/* 按钮物理回弹 */
@keyframes btn-press{
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(2px) scale(0.96); }
  70%  { transform: translateY(-1px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
.btn-candy.press, .act-btn.press, .btn-primary.press, .rt-join.press, .add-bot.press, .start-btn.press, .ready-btn.press, .invite-btn.press{
  animation: btn-press 220ms var(--ease-pop) both;
}

/* Toast 滑入（替代简单 fade） */
@keyframes toast-slide-up{
  0%   { opacity: 0; transform: translate(-50%, 40px) scale(0.9); }
  60%  { opacity: 1; transform: translate(-50%, -4px) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.toast, .show-toast, .toast-cartoon{
  animation: toast-slide-up 320ms var(--ease-pop) both;
}

/* 加载 / 等待呼吸 */
@keyframes dot-bounce{
  0%, 80%, 100%{ transform: translateY(0); opacity: .5; }
  40%{ transform: translateY(-8px); opacity: 1; }
}
.dots span{ display:inline-block; animation: dot-bounce 1.2s var(--ease-pop) infinite; }
.dots span:nth-child(2){ animation-delay: .15s; }
.dots span:nth-child(3){ animation-delay: .3s; }

/* 房间座位 轮到此玩家脉冲（糖豆版） */
@keyframes seat-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(245,179,36,.7), 0 4px 0 var(--wood-300), 0 6px 14px rgba(61,40,23,.22); }
  70%  { box-shadow: 0 0 0 12px rgba(245,179,36,0), 0 4px 0 var(--wood-300), 0 6px 14px rgba(61,40,23,.22); }
  100% { box-shadow: 0 0 0 0 rgba(245,179,36,0), 0 4px 0 var(--wood-300), 0 6px 14px rgba(61,40,23,.22); }
}
.wait-seat.turn, .seat.turn{
  animation: seat-pulse 1.4s var(--ease-pop) infinite;
}


/* ============================================================
   牌桌顶部：我的金币徽章
   ============================================================ */
.tt-gold{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px 5px 6px;
  background: linear-gradient(180deg, #2A1810, #1A0E08);
  border: 2px solid var(--gold-700);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 0 var(--gold-900), inset 0 1px 0 rgba(245,179,36,.25), 0 3px 8px rgba(0,0,0,.3);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--gold-300);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  margin-right: 6px;
  transition: transform var(--dur-fast) var(--ease-pop);
}
.tt-gold .tg-g{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #FFE48A, var(--gold-500) 60%, #B8860B);
  color: var(--red-700);
  font-size:11px;
  border: 1.5px solid var(--gold-900);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.tt-gold .tg-num{
  min-width: 30px;
  text-align:right;
}
@keyframes gold-bump{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.25); color: var(--gold-300); text-shadow: 0 0 12px rgba(255,212,92,.8); }
  100%{ transform: scale(1); }
}
.tt-gold .tg-num.gold-bump{
  display:inline-block;
  animation: gold-bump 400ms var(--ease-bounce);
}

/* 座位金币加大、更醒目 */
.seat-gold{
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--gold-500) !important;
  background: linear-gradient(180deg, rgba(58,30,8,.95), rgba(20,10,2,.95)) !important;
  box-shadow: 0 1px 0 var(--gold-900), 0 2px 6px rgba(0,0,0,.4) !important;
}
.exchange-box{margin-top:12px;padding-top:12px;border-top:2px dashed var(--cream-deep)}
.exchange-title{font-family:var(--font-display);font-size:14px;font-weight:900;color:var(--brown);margin-bottom:4px}
.exchange-rate{font-size:10px;font-weight:800;color:var(--silver-deep);margin-bottom:8px}
.exchange-row{display:flex;gap:8px;margin-bottom:8px}
.exchange-row input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:2px solid var(--cream-deep);background:var(--cream);color:var(--brown);font-weight:900;outline:none}
.exchange-row input:focus{border-color:var(--blue)}
.exchange-row button{border:none;border-radius:10px;background:linear-gradient(180deg,var(--silver-400),var(--silver));color:#fff;font-weight:900;padding:0 14px;box-shadow:0 3px 0 var(--silver-deep)}
.exchange-cost{font-size:11px;font-weight:800;color:var(--silver-deep);margin-bottom:8px}
.exchange-cost b{color:var(--blue);font-size:14px}

/* ===== Background music floating control ===== */
.bgm-fab{position:fixed;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;border:2px solid var(--gold-700,#D89000);background:linear-gradient(180deg,var(--gold-300,#FFD45C),var(--gold-500,#F5B324));color:var(--wood-700,#3D2817);font-size:22px;font-weight:900;cursor:pointer;z-index:9999;box-shadow:0 4px 0 var(--gold-900,#6B3A00),0 8px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:transform .12s ease, filter .12s ease}
.bgm-fab:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-900,#6B3A00),0 4px 10px rgba(0,0,0,.3)}
.bgm-fab:hover{filter:brightness(1.06)}
.bgm-fab.muted{background:linear-gradient(180deg,#9AA5B1,#6A7682);border-color:#4A5560;box-shadow:0 4px 0 #3A424B,0 8px 18px rgba(0,0,0,.35);color:#fff}
.bgm-fab.muted .bgm-fab-icon{opacity:.7}
.bgm-fab.muted::after{content:'';position:absolute;left:18%;right:18%;top:48%;height:2.5px;background:#E53935;border-radius:2px;transform:rotate(-28deg)}
.bgm-panel{position:fixed;right:14px;bottom:70px;width:280px;max-width:calc(100vw - 28px);background:linear-gradient(180deg,#FFFBF0,#F3E7C8);border:2.5px solid var(--wood-700,#3D2817);border-radius:16px;box-shadow:0 8px 0 var(--wood-900,#1A0E08),0 18px 40px rgba(0,0,0,.45);padding:14px;z-index:9999;display:none;flex-direction:column;gap:10px;font-family:var(--font-body,'Nunito',sans-serif);color:var(--wood-700,#3D2817)}
.bgm-panel.open{display:flex;animation:bgmPop .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes bgmPop{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.bgm-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display,'Baloo 2',sans-serif);font-weight:900;font-size:16px}
.bgm-mute{width:38px;height:38px;border-radius:50%;border:2px solid var(--wood-700,#3D2817);background:linear-gradient(180deg,#fff,#EADBB3);font-size:18px;cursor:pointer;box-shadow:0 2px 0 var(--wood-700,#3D2817)}
.bgm-mute:active{transform:translateY(2px);box-shadow:none}
.bgm-mute.muted{background:linear-gradient(180deg,#FFCDD2,#E57373);border-color:#B71C1C;box-shadow:0 2px 0 #B71C1C}
.bgm-modes{display:flex;gap:6px}
.bgm-mode{flex:1;padding:8px 4px;border-radius:10px;border:2px solid var(--wood-300,#B08968);background:#fff;font-size:11px;font-weight:800;cursor:pointer;color:var(--wood-700,#3D2817);box-shadow:0 2px 0 var(--wood-300,#B08968)}
.bgm-mode.active{background:linear-gradient(180deg,var(--green-400,#34D07A),var(--green-500,#1FA85A));border-color:var(--green-700,#0F6630);color:#fff;box-shadow:0 2px 0 var(--green-700,#0F6630)}
.bgm-track-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.bgm-track{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:9px;border:1.5px solid var(--cream-deep,#D9C7A3);background:#fff;font-size:13px;font-weight:800;color:var(--wood-700,#3D2817);cursor:pointer;text-align:left}
.bgm-track:hover{border-color:var(--green-500,#1FA85A)}
.bgm-track.active{background:linear-gradient(180deg,#E8FBF0,#C9F2DA);border-color:var(--green-700,#0F6630)}
.bgm-check{color:var(--green-700,#0F6630);font-weight:900}
.bgm-vol{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800}
.bgm-vol input{flex:1;accent-color:var(--green-500,#1FA85A)}
.bgm-hint{font-size:10px;color:var(--silver-deep,#8A96A4);text-align:center;font-weight:700}
@media (max-width:520px){.bgm-panel{width:250px}.bgm-fab{width:42px;height:42px;font-size:20px}}