/* ============================================================
   Balatro 设计系统 — 提取自设计原型「金宝游戏.html / components.jsx」
   含：全局红蓝漩涡背景、CRT 扫描线、主对局屏（绿色侧边栏 + 漩涡
   play 区 + 扇形手牌 + 选中牌浮动计分区 + 对手角色 + 牌堆）。
   该文件最后加载，可覆盖共享 CSS 中的旧海洋样式。

   缩放：对局屏（.blt-game 内）所有尺寸/字号走 calc(var(--ui-scale)*Npx)。
   --ui-scale 由 ui-scale.js 按视口算（桌面标准档=1.1，手机横屏自动缩到一屏），
   改档位/转屏即整页真 reflow（非 transform，不糊字）。.blt-game 作用域 + 高优先级，
   覆盖 mobile.css 里无前缀的 .card 旧断点，无需删它们（仍服务非对局屏的扑克牌）。
   ============================================================ */

/* ========== 全局漩涡背景 ========== */
.swirl-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* BUG-3：兜底底色用深红（非近黑）——极端宽高比下漩涡圆未覆盖的角落读作红、不再是黑块 */
  background: #2c0511;
}
.swirl-layer {
  position: absolute;
  inset: -70%;
  width: 240%;
  height: 240%;
  border-radius: 50%;
  will-change: transform;
}
.swirl-1 {
  background: conic-gradient(from 0deg at 50% 50%,
    #8b0000 0deg, #cc2200 40deg, #550000 80deg,
    #dd1100 120deg, #440000 160deg, #cc0000 200deg,
    #660000 240deg, #bb2200 280deg, #770000 320deg, #8b0000 360deg);
  animation: swirlSpin 26s linear infinite;
  filter: blur(38px);
}
.swirl-2 {
  background: conic-gradient(from 180deg at 50% 50%,
    transparent 0deg, rgba(200, 30, 0, 0.35) 50deg, transparent 100deg,
    rgba(180, 0, 20, 0.25) 150deg, transparent 200deg,
    rgba(220, 50, 10, 0.3) 250deg, transparent 300deg,
    rgba(160, 0, 30, 0.2) 350deg, transparent 360deg);
  animation: swirlSpin 18s linear infinite reverse;
  filter: blur(22px);
  opacity: 0.8;
}
.swirl-center {
  position: absolute;
  top: 42%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 58%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(15, 0, 80, 0.95) 0%, rgba(40, 0, 130, 0.7) 20%,
    rgba(80, 0, 160, 0.4) 40%, rgba(120, 0, 60, 0.15) 65%, transparent 85%);
  filter: blur(26px);
}
.swirl-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.42) 100%);
}
@keyframes swirlSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 弱化模式：菜单/结算等非对局画面让漩涡更暗，避免干扰玻璃面板 */
.swirl-bg.dim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 6, 0.55);
}

/* 对局/商店中：视口背景改深绿，与牌桌绿呢无缝衔接；
   红漩涡隐藏 → 消除「绿桌上、红底下」的割裂感（用户反馈#1）。
   FAB/弹窗等 fixed 元素仍在视口上 → 背景改变对它们无影响。 */
body.in-game .stage-viewport {
  background: radial-gradient(ellipse 130% 110% at 50% 0%, #1d5740 0%, #164a31 45%, #0e3522 100%);
}
body.in-game .swirl-bg { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .swirl-1, .swirl-2 { animation: none; }
}

/* ========== 主对局屏：逻辑屏容器（Fit Stage） ==========
   不再 fixed/100vh：那会脱离 #app 文档流、且 fixed-in-transform 以缩放后的 #app 为
   包含块而错位。改为普通流——铺满 #app 宽、min-height 逻辑高、横向 flex（侧栏 + play）。
   --ui-scale 钉在密度档(standard=1.1)的固定逻辑尺寸，由 stage 整体缩放铺满视口。
   overflow:visible —— 任何内容溢出交给 stage 量到真实外接框后等比缩小，绝不就地裁切。 */
.blt-game {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--logical-h, 760px);
  overflow: visible;
  z-index: 1;
  /* 整张牌桌绿桌呢（原版桌布径向绿）；play 区不再透出 body 红底 */
  background: radial-gradient(ellipse 130% 110% at 50% 0%, #1d5740 0%, #164a31 45%, #0e3522 100%);
}

/* ========== 计分演出：出牌舞台逐张高亮 + 浮标 + 总分 ========== */
/* tile 重构后舞台牌在 .stage-zone .scoring-card（旧 .blt-scoring 容器已废弃，见 lane-play.js）*/
.stage-zone .scoring-card {
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.18s ease;
}
.stage-zone .scoring-card.scoring-hit {
  animation: scoringHit 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}
@keyframes scoringHit {
  0% { transform: translateY(0) scale(1); box-shadow: none; }
  40% { transform: translateY(calc(var(--ui-scale) * -26px)) scale(1.12);
        box-shadow: 0 0 calc(var(--ui-scale) * 18px) rgba(255, 220, 90, 0.9); }
  100% { transform: translateY(0) scale(1); box-shadow: none; }
}
/* 计分命中高亮：scoring-animation 给 .joker-row .jcard 加 .joker-hit（容器/卡名已统一为设计稿） */
.joker-row .jcard.joker-hit { animation: jokerHit 0.44s ease; }
@keyframes jokerHit {
  0% { transform: translateY(0) scale(1); filter: none; }
  45% { transform: translateY(calc(var(--ui-scale) * -10px)) scale(1.08);
        filter: drop-shadow(0 0 10px rgba(170, 130, 230, 0.95)); }
  100% { transform: translateY(0) scale(1); filter: none; }
}

/* 侧栏 chips/mult 数字跳动（tile 重构后 HUD 为 .chips-box/.mult-box，见 scoring-animation.js popCounter）*/
.chips-box.sa-pop, .mult-box.sa-pop { animation: saCounterPop 0.22s ease-out; }
@keyframes saCounterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* 牌/小丑头顶冒出的得分浮标（fixed，不被卡牌裁切） */
.score-pop {
  position: fixed;
  transform: translate(-50%, -100%);
  font-weight: 900;
  font-size: calc(var(--ui-scale) * 16px);
  pointer-events: none;
  z-index: 1200;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  animation: scorePopFloat 0.9s ease-out forwards;
}
.score-pop-chips { color: #6fb7ff; }
.score-pop-mult { color: #ff6b6b; }
@keyframes scorePopFloat {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

/* ========== 总分「数字暴击」分档演出 ==========
   单手得分分 5 档（<2000 / 2000 / 5000 / 10000 / 20000）：连击数滚动 → 定格炸裂，
   档越高字越大、配色越炫、加暴击文案 + 屏幕震动。JS(showTotal) 控生命周期，这里出视觉。 */
.sa-total-pop {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--ui-scale) * 52px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;       /* 滚动时数字等宽不抖 */
  letter-spacing: 1px;
  color: var(--accent-gold, #ffcc33);
  text-shadow: 0 0 28px rgba(255, 210, 60, 0.85), 0 4px 14px rgba(255, 210, 60, 0.5);
  pointer-events: none;
  z-index: 1200;
  animation: saTotalIn 0.22s ease-out both;
}
@keyframes saTotalIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 定格炸裂：总分落定放大→回弹定格（原版式滚分收尾）。
   分档爆击配色 .sa-tier-*、暴击文案 .sa-tier-label-*、震屏 .screen-shake-* 及其专属
   keyframes(saRainbow/saLabelPop/screenShake*) 已随 S4「砍自创·留原版滚分」一并删除。 */
.sa-total-pop.sa-impact { animation: saImpact 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes saImpact {
  0% { transform: translate(-50%, -50%) scale(1.5); }
  40% { transform: translate(-50%, -50%) scale(0.9); }
  70% { transform: translate(-50%, -50%) scale(1.07); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.sa-total-pop.sa-leaving { animation: saLeave 0.3s ease-in forwards !important; }
@keyframes saLeave { to { opacity: 0; transform: translate(-50%, -78%) scale(1.08); } }

/* 侧栏房间码 .blt-roomcode、旧教学条 .blt-play-hint 及矮横屏 max-height 断点内的
   .blt-sidebar/.blt-sb-section/.blt-hand-row/.blt-handinfo/.blt-joker-count/.blt-consumable-tray
   规则已随 S8「砍旧 .blt-* 侧栏皮肤·留 .blt-game 绿桌呢」一并删除：tile 重构后侧栏统一为
   screens.css 的 .sidebar/.chips-box/.mult-box/.stage-zone，纵向自适应交给 Fit Stage 等比缩放。 */

/* Eye/Mouth 等整手 debuff：舞台中央短提示 */
.score-pop.sa-debuff-tip {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  color: #ffb4b4;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.75);
  animation: saLeave 0.9s ease-in forwards;
}

/* Tooth / 金蜡 / Ox：本手金钱变动浮层（总分后弹出） */
.sa-money-pop {
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 80;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.5px;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  animation: saMoneyIn 0.25s ease-out;
}
.sa-money-pop.sa-money-gain { color: #f6d365; }
.sa-money-pop.sa-money-loss { color: #ff8a8a; }
.sa-money-pop.sa-leaving { animation: saLeave 0.3s ease-in forwards; }
@keyframes saMoneyIn {
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}