/* =============================================================================
   生化危机7 · 21点 · 生存联机 - 视觉系统 v2（冷调钢黑 / 生物危害 / 手机优先）
   主色：血红（唯一暖色）on 冷近黑。卡面用矢量徽记。离线系统字体。零 em-dash。
   ============================================================================= */

:root {
  /* 冷调层次背景 */
  --bg0: #070a0a;
  --bg1: #0c1011;
  --panel: #111719;
  --panel-2: #172022;
  --inset: #0a0e0e;
  --line: #223033;
  --line-2: #314548;

  /* 文字（冷骨白 / 灰烬） */
  --bone: #dde6e3;
  --bone-dim: #869490;
  --bone-faint: #55625f;

  /* 主色：血（唯一暖色） */
  --blood: #c41e1e;
  --blood-bright: #f03b34;
  --blood-deep: #470f0c;
  --blood-glow: rgba(240, 59, 52, 0.45);

  /* 辅助语义色（冷） */
  --toxic: #5fb56b;        /* 霉绿：己方 / 完美 / 存活 */
  --toxic-bright: #7ed98a;
  --steel: #6fa8c4;        /* 钢蓝：防御 / 信息 */
  --hazard: #c9b94a;       /* 生物危害黄（克制，用于房号 / 目标变更） */
  --gc: var(--bone-dim);   /* 卡牌分组色默认值；元素上的 .g-* 会覆盖 */

  /* 古铜金（雕饰/边框/标题点缀）—— 高级感来源 */
  --gold: #c6a86a;
  --gold-bright: #e9d29a;
  --gold-deep: #7c602f;
  --gold-line: rgba(198, 168, 106, 0.55);
  --gold-glow: rgba(233, 210, 154, 0.30);

  /* 做旧纸牌统一配方（手牌/场上/王牌/图鉴同源，避免"不是一套牌"） */
  --paper-hi: #efe6cf; --paper-mid: #ddceac; --paper-lo: #cdbe98; --paper-edge: #2a2117;
  --paper: linear-gradient(160deg, var(--paper-hi), var(--paper-mid) 70%, var(--paper-lo));

  --r1: 5px; --r2: 9px; --r3: 16px;

  /* 衬体标题（古典/考究）+ 衬体数字；正文仍用清晰无衬 */
  --f-title: "STZhongsong", "STSong", "Songti SC", "SimSun", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --f-display: var(--f-title);
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-num: "Georgia", "Times New Roman", "Songti SC", "STSong", serif;

  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, 0.62);
  --shadow-card: 0 9px 20px rgba(0, 0, 0, 0.62), 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg0); color: var(--bone);
  font-family: var(--f-ui);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
}
body {
  background:
    radial-gradient(120% 80% at 50% -8%, #0e1618 0%, var(--bg0) 55%),
    radial-gradient(90% 55% at 50% 118%, #150909 0%, transparent 55%);
}

/* ---------- 氛围层 ---------- */
#vignette, #grain, #fx, #danger { position: fixed; inset: 0; pointer-events: none; }
/* 濒死血色脉动 */
#danger { z-index: 3; opacity: 0; transition: opacity .4s; box-shadow: inset 0 0 120px 20px rgba(150,12,10,0.0); }
#danger.on { opacity: 1; animation: dangerpulse 1.1s ease-in-out infinite; }
@keyframes dangerpulse {
  0%, 100% { box-shadow: inset 0 0 90px 10px rgba(150,12,10,0.28); }
  50% { box-shadow: inset 0 0 150px 36px rgba(190,18,14,0.55); }
}
/* 大号「−N」飞字 */
.dmg-float {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 45; pointer-events: none;
  font-family: var(--f-display); font-size: 84px; font-weight: 900; color: var(--blood-bright);
  text-shadow: 0 0 30px var(--blood-glow), 0 3px 0 #1a0605, 0 0 60px rgba(190,18,14,0.6);
  animation: dmgfloat 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes dmgfloat {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.4); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  35% { transform: translate(-50%, -52%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(1); }
}
#vignette {
  z-index: 1;
  background: radial-gradient(120% 100% at 50% 44%, transparent 50%, rgba(0,0,0,0.6) 100%);
  box-shadow: inset 0 0 200px rgba(0,0,0,0.72);
}
#grain {
  z-index: 2; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
#fx { z-index: 40; }
#fx.flash { animation: dmgflash 0.5s ease-out; }
@keyframes dmgflash {
  0% { background: radial-gradient(120% 100% at 50% 50%, transparent 28%, rgba(200,22,18,0.6) 100%); opacity: 1; }
  100% { background: radial-gradient(120% 100% at 50% 50%, transparent 28%, rgba(200,22,18,0.6) 100%); opacity: 0; }
}

.screen { display: none; position: relative; z-index: 5; min-height: 100%; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ---------- 雕花金框（原创古典 RPG 风，非任何游戏素材） ---------- */
.ornate { position: relative; }
.ornate > * { position: relative; z-index: 1; }
.ornate::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold-line);
  border-radius: 10px; pointer-events: none; opacity: 0.85; z-index: 0;
}
.ornate::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 0;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 17px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 2px 17px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 17px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 2px 17px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 17px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 2px 17px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 17px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 2px 17px no-repeat;
  filter: drop-shadow(0 0 3px var(--gold-glow));
}
/* 金色雕花分隔线（中间一颗菱形） */
.goldrule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0; }
.goldrule::before, .goldrule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.goldrule::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.goldrule i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); flex: 0 0 auto; }
.goldrule span { color: var(--gold); font-size: 11px; letter-spacing: 3px; font-family: var(--f-title); }

/* =========================================================================
   主菜单
   ========================================================================= */
#menu {
  flex-direction: column; align-items: center; justify-content: center;
  padding: calc(28px + var(--safe-top)) 20px calc(24px + var(--safe-bot));
  min-height: 100dvh;
}
.menu-inner { width: 100%; max-width: 420px; position: relative; }
.menu-inner::before { /* 冷调生物危害光晕，弱 */
  content: ""; position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,181,107,0.07), transparent 65%);
  pointer-events: none; z-index: -1;
}

.brand { text-align: center; margin-bottom: 26px; }
.brand-emblem { position: relative; display: inline-block; margin-bottom: 8px; }
.emblem-21 {
  font-family: var(--f-num); font-size: 92px; line-height: 0.9; font-weight: 700;
  letter-spacing: 2px; color: var(--blood-bright);
  text-shadow: 0 0 32px var(--blood-glow), 0 3px 8px rgba(0,0,0,0.65);
}
.emblem-mark {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 92%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 28%, var(--gold-bright) 50%, var(--gold) 72%, transparent);
  box-shadow: 0 0 12px var(--gold-glow);
}
.brand-title { font-family: var(--f-title); font-size: 30px; font-weight: 700; letter-spacing: 8px; margin: 18px 0 7px; color: var(--bone); }
.brand-title b { color: var(--gold); font-weight: 700; }
.brand-sub { font-family: var(--f-title); font-size: 13px; letter-spacing: 9px; color: var(--gold); margin: 0; padding-left: 9px; }

/* —— 登录界面再精致一层：「21」徽章双环光晕 + 标语 —— */
.brand-emblem::before {
  content: ""; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: 158px; height: 158px; border-radius: 50%; z-index: 0; pointer-events: none;
  border: 1px solid rgba(201,162,90,0.42);
  background: radial-gradient(circle, rgba(201,162,90,0.10), transparent 62%);
  box-shadow: inset 0 0 30px rgba(201,162,90,0.16), 0 0 22px rgba(201,162,90,0.10);
}
.brand-emblem::after {
  content: ""; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: 130px; height: 130px; border-radius: 50%; z-index: 0; pointer-events: none;
  border: 1px solid rgba(201,162,90,0.22);
}
.emblem-21, .emblem-mark { position: relative; z-index: 1; }
.goldrule.tagline { margin: 13px 0 18px; }
.goldrule.tagline span { color: var(--gold-bright); letter-spacing: 6px; }

.panel {
  background: linear-gradient(180deg, rgba(20,27,29,0.93), rgba(8,11,12,0.96));
  border: 1px solid var(--gold-deep); border-radius: var(--r3);
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(233,210,154,0.07);
  backdrop-filter: blur(3px);
}
.field { display: block; }
.field.grow { flex: 1; }
.field-label { display: block; font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 7px; font-family: var(--f-title); }
input, select {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--inset); color: var(--bone);
  border: 1px solid var(--line); border-radius: var(--r2);
  font-size: 16px; font-family: var(--f-ui); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--bone-faint); }
input:focus, select:focus { border-color: var(--blood); box-shadow: 0 0 0 3px rgba(196,30,30,0.18); }
select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%), linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.seg { margin-top: 16px; }
.seg-row { display: flex; gap: 10px; }

/* 模式切换：单人 / 联机 —— 分段控件，明确区分两种玩法 */
.mode-tabs {
  display: flex; gap: 6px; margin: 20px 0 14px;
  padding: 5px; border-radius: var(--r2);
  background: var(--inset); border: 1px solid var(--gold-deep);
}
.mode-tab {
  flex: 1; height: 44px; border: 0; border-radius: calc(var(--r2) - 4px);
  background: transparent; color: var(--bone-dim);
  font-family: var(--f-title); font-size: 15px; font-weight: 700; letter-spacing: 3px;
  cursor: pointer; transition: background .16s, color .16s, box-shadow .16s;
}
.mode-tab.active {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-deep), 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(233,210,154,0.1);
}
.mode-tab:not(.active):active { color: var(--gold-bright); }
.mode-pane { animation: paneIn .2s ease; }
@keyframes paneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.pane-hint { font-size: 11px; color: var(--bone-faint); text-align: center; margin: 12px 4px 0; line-height: 1.6; }
#roomInput { letter-spacing: 10px; text-transform: uppercase; font-weight: 800; text-align: center; font-family: var(--f-display); font-size: 22px; }

.btn {
  width: 100%; height: 50px; margin-top: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--bone);
  border: 1px solid var(--gold-deep); border-radius: var(--r2);
  font-size: 16px; font-weight: 700; letter-spacing: 4px; font-family: var(--f-title);
  cursor: pointer; transition: transform .07s, box-shadow .15s, border-color .15s, filter .15s;
  box-shadow: inset 0 1px 0 rgba(233,210,154,0.08), 0 4px 12px rgba(0,0,0,0.42);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:hover { border-color: var(--gold); }
.btn-primary {
  background: linear-gradient(180deg, #d8362f, #8c1714);
  border: 1px solid var(--gold); color: #fff6f0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: inset 0 0 0 1px rgba(124,96,47,0.6), 0 8px 22px rgba(150,12,10,0.42), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-primary:active { box-shadow: inset 0 0 0 1px rgba(124,96,47,0.6), 0 3px 10px rgba(150,12,10,0.42); }
.btn-ghost { background: linear-gradient(180deg, var(--inset), #0a0d0d); color: var(--gold-bright); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.rule { text-align: center; color: var(--gold); font-size: 11px; letter-spacing: 4px; margin: 20px 0 6px; position: relative; font-family: var(--f-title); }
.rule::before, .rule::after { content: ""; position: absolute; top: 50%; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.rule::before { left: 0; } .rule::after { right: 0; background: linear-gradient(90deg, var(--gold-line), transparent); }
.seg.join { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.seg.join #roomInput { flex: 1; height: 50px; margin: 0; }
.seg.join .btn { width: 96px; margin: 0; flex: 0 0 auto; }
.menu-error { color: var(--blood-bright); font-size: 13px; text-align: center; min-height: 18px; margin-top: 12px; }
.menu-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.link-btn { background: none; border: none; color: var(--hazard); font-size: 13px; letter-spacing: 1px; cursor: pointer; padding: 6px 4px; }
.link-btn:active { opacity: .7; }
.foot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--bone-faint); }
.foot-note { color: var(--bone-faint); font-size: 11px; }
.menu-credit { text-align: center; color: var(--bone-faint); font-size: 11px; margin: 10px 0 0; }

/* =========================================================================
   游戏界面
   ========================================================================= */
#game { flex-direction: column; height: 100dvh; }
/* 场景：一束冷光打在牌桌中央，边缘沉入黑暗（去"堆盒子"的网页感） */
#game.active {
  background:
    radial-gradient(62% 38% at 50% 47%, rgba(206,224,230,0.11), rgba(120,150,160,0.035) 42%, transparent 72%),
    radial-gradient(150% 125% at 50% 47%, #0d1314 0%, #070a0b 55%, #030506 100%);
}
.g-wrap { display: flex; flex-direction: column; height: 100%; padding: calc(8px + var(--safe-top)) 11px calc(9px + var(--safe-bot)); gap: 6px; }
#game.shake .g-wrap { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
#game.shake.big .g-wrap { animation: shakebig 0.55s cubic-bezier(.36,.07,.19,.97); }
@keyframes shakebig { 10%,90% { transform: translate(-2px,1px); } 20%,80% { transform: translate(5px,-2px); } 30%,50%,70% { transform: translate(-9px,2px); } 40%,60% { transform: translate(9px,-2px); } }

/* 顶栏 */
.topbar {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: transparent; border: none; box-shadow: none; padding: 2px 2px 2px;
}
.room-chip { font-family: var(--f-display); font-weight: 800; letter-spacing: 3px; color: var(--hazard); font-size: 18px; line-height: 1; }
.room-chip small { display: block; font-family: var(--f-ui); font-size: 9px; letter-spacing: 1px; color: var(--bone-dim); font-weight: 600; margin-top: 2px; }
.topbar .target { margin-left: auto; display: flex; align-items: baseline; gap: 5px; background: var(--inset); border: 1px solid var(--gold-deep); border-radius: var(--r1); padding: 4px 10px; }
.topbar .target small { font-size: 9px; color: var(--bone-dim); letter-spacing: 1px; order: -1; }
.topbar .target b { font-family: var(--f-display); font-size: 19px; color: var(--bone); line-height: 1; }
.target.changed { border-color: var(--blood); }
.target.changed b { color: var(--blood-bright); text-shadow: 0 0 12px var(--blood-glow); }
.icon-tool {
  background: var(--inset); border: 1px solid var(--line-2); color: var(--bone-dim);
  border-radius: var(--r1); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.icon-tool svg { width: 18px; height: 18px; }
.icon-tool:active { transform: scale(0.94); }
.icon-tool.muted { color: var(--blood-bright); border-color: var(--blood-deep); }
.leave-btn { background: var(--inset); border: 1px solid var(--line-2); color: var(--bone-dim); border-radius: var(--r1); height: 34px; padding: 0 11px; font-size: 12px; letter-spacing: 1px; cursor: pointer; flex: 0 0 auto; }
.leave-btn:active { transform: scale(0.96); }
.topbar-tools { display: flex; gap: 6px; align-items: center; }

/* 玩家区 */
/* 去盒子：玩家区透明，仅用一条极细左侧色条成组（对手血红/己方毒绿），不回到面板 */
.player-zone { flex: 0 0 auto; padding: 5px 4px 5px 10px; background: transparent; border: none; box-shadow: none; position: relative; }
.player-zone::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; }
.player-zone.opp::before { background: linear-gradient(180deg, rgba(196,30,30,0.5), rgba(196,30,30,0.05)); }
.player-zone.me::before { background: linear-gradient(180deg, rgba(95,181,107,0.05), rgba(95,181,107,0.5)); }
.pz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pz-name { font-weight: 700; font-size: 13px; color: var(--bone); }
.pz-name .tag { font-size: 10px; padding: 1px 7px; border-radius: var(--r1); margin-left: 6px; vertical-align: middle; font-weight: 700; letter-spacing: 1px; }
.tag.opp { background: #2c100d; color: #f0938b; border: 1px solid var(--blood-deep); }
.tag.me { background: #102a14; color: var(--toxic-bright); border: 1px solid #20401e; }
.pz-score { margin-left: auto; font-family: var(--f-display); font-size: 26px; font-weight: 800; color: var(--bone); letter-spacing: 1px; }
.pz-score small { font-family: var(--f-ui); font-size: 12px; color: var(--bone-dim); font-weight: 600; }
.pz-score.bust { color: var(--blood-bright); text-shadow: 0 0 12px var(--blood-glow); }
.pz-score.perfect { color: var(--toxic-bright); text-shadow: 0 0 12px rgba(95,181,107,0.45); }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--toxic); box-shadow: 0 0 7px rgba(95,181,107,0.7); flex: 0 0 auto; }
.conn-dot.off { background: var(--blood-bright); box-shadow: 0 0 7px var(--blood-glow); animation: blink 1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* 生命槽（替代一排亮红方块，更精致、不喧宾夺主） */
.hp { display: flex; align-items: center; gap: 10px; margin: 3px 0 7px; }
.hp-bar { display: flex; gap: 3px; flex: 1; height: 13px; }
.hp-seg { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--blood), var(--blood-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(0,0,0,0.5); transition: background .2s; }
.hp-seg.gone { background: #140d0c; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6); }
.hp-num { font-family: var(--f-display); font-size: 19px; color: var(--bone); letter-spacing: 1px; white-space: nowrap; min-width: 30px; text-align: right; }
.hp-num i { font-style: normal; font-family: var(--f-ui); font-size: 10px; color: var(--bone-dim); font-weight: 600; letter-spacing: 0; margin-left: 1px; }

/* 手牌（数字牌） */
.hand { display: flex; gap: 5px; flex-wrap: wrap; min-height: 58px; align-content: flex-start; }
.pcard { width: 42px; height: 58px; border-radius: var(--r1); background: var(--paper); color: #1a1410; border: 1px solid var(--paper-edge); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 26px; font-weight: 700; box-shadow: var(--shadow-card); position: relative; }
.pcard::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; pointer-events: none; }
.pcard.high { color: var(--blood); }
.pcard.back { background: repeating-linear-gradient(45deg, #3a1614 0 7px, #2a100e 7px 14px); border-color: #1c0807; color: transparent; }
.pcard.back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(240,59,52,0.22) 0 22%, transparent 24%); }

/* 牌桌（场上王牌：小卡面） */
/* 牌桌：被顶灯照亮的下凹毡面，融入场景而非硬盒子 */
.table-zone {
  flex: 1 1 auto; min-height: 112px; position: relative;
  background:
    radial-gradient(78% 66% at 50% 42%, rgba(210,225,230,0.055), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.44));
  border: 1px solid rgba(255,255,255,0.035); border-radius: 16px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  box-shadow: inset 0 6px 34px rgba(0,0,0,0.6);
}
.table-half { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; align-content: flex-start; padding: 2px; overflow-y: auto; }
.table-half.opp { border-bottom: 1px dashed var(--line-2); }
.table-half:empty::before { content: attr(data-empty); color: #36403d; font-size: 11px; margin: auto; letter-spacing: 1px; }

/* ----- 卡面（场上/手牌/图鉴 通用徽记） ----- */
.cf-emb { width: 100%; height: 100%; display: block; }
.cf-num { font-family: var(--f-num); font-weight: 700; line-height: 1; color: #23190f; position: relative; }
.cf-plus { font-size: 0.42em; vertical-align: top; color: var(--blood); font-weight: 800; margin-left: 1px; }

/* 做旧纸牌：墨色符号 + 古典内框 + 分组色细边 */
.tcard {
  width: 48px; height: 52px; border-radius: 5px; padding: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  color: #1c1610; border: 1px solid var(--paper-edge); box-shadow: var(--shadow-1);
  position: relative; overflow: hidden; transition: transform .08s;
}
.tcard::before { content: ""; position: absolute; inset: 2px; border: 1px solid color-mix(in srgb, var(--gc) 30%, rgba(40,30,18,0.42)); border-radius: 3px; pointer-events: none; }
.tcard:active { transform: scale(0.94); }
.tcard .tc-art { width: 30px; height: 30px; color: #241c12; }
.tcard .tc-art .cf-num { font-size: 28px; }

/* 王牌分组色（冷调，仅作徽记/边框着色） */
/* 分组色降饱和、统一明度，去掉鲜紫；作墨色基底上的淡色细边 */
.g-num { --gc: #7a93b0; } .g-add { --gc: #c06a5e; } .g-shield { --gc: #6fa0b8; }
.g-destroy { --gc: #b5564e; } .g-control { --gc: #c2a868; } .g-target { --gc: #cdb858; }
.g-draw { --gc: #7aae7e; } .g-exchange { --gc: #74aab2; } .g-risk { --gc: #c97a72; }

/* 回合横幅 */
.turn-banner { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 2px; padding: 2px; flex: 0 0 auto; min-height: 22px; }
.turn-banner.mine { color: var(--hazard); animation: turnpulse 1.6s ease-in-out infinite; }
@keyframes turnpulse { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 14px rgba(201,185,74,0.6); } }
.turn-banner.wait { color: var(--bone-faint); }
.turn-sub { text-align: center; font-size: 11px; color: var(--bone-faint); letter-spacing: 1px; margin-top: -2px; flex: 0 0 auto; }

/* 弹窗遮罩 + 非回合原因 */
.cardpop-scrim { position: fixed; inset: 0; z-index: 54; background: rgba(0,0,0,0.45); }
.cardpop .cp-reason { font-size: 12px; color: var(--hazard); text-align: center; margin: 2px 0 4px; }

/* 三步上手 */
.rules-quick { background: rgba(201,185,74,0.05); border: 1px solid rgba(201,185,74,0.18); border-radius: var(--r2); padding: 12px 14px 12px 12px; }
.rules-quick ol { margin: 6px 0 2px; padding-left: 20px; }
.rules-quick li { font-size: 13px; color: var(--bone); line-height: 1.6; margin: 6px 0; }
.rules-quick li b { color: var(--hazard); }

/* 本回合赌注（替代原来看不懂的"攻/防"） */
.stakes {
  flex: 0 0 auto; display: flex; border-radius: 11px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.24);
}
.stake { flex: 1; padding: 7px 12px; display: flex; flex-direction: column; gap: 2px; }
.stake + .stake { border-left: 1px solid var(--line); }
.stake .st-lab { font-size: 10px; letter-spacing: 1px; }
.stake .st-num { font-family: var(--f-display); font-size: 19px; letter-spacing: 1px; }
.stake .st-num i { font-style: normal; font-family: var(--f-ui); font-size: 10px; font-weight: 600; opacity: .8; }
.stake.win .st-num { color: var(--toxic-bright); } .stake.win .st-lab { color: #6f9a78; }
.stake.lose .st-num { color: var(--blood-bright); } .stake.lose .st-lab { color: #9a6f6a; }

/* 动作栏：嵌入式立体实体键（底部硬边 + 顶部高光，按下整体下沉） */
.actionbar { display: flex; gap: 10px; flex: 0 0 auto; padding-top: 2px; }
.act {
  flex: 1; height: 60px; border-radius: var(--r2); cursor: pointer; border: 1px solid;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-ui); font-weight: 800; font-size: 20px; letter-spacing: 3px;
  transition: transform .08s, box-shadow .08s, filter .15s; position: relative;
}
.act .act-ic { width: 26px; height: 26px; flex: 0 0 auto; }
.act .act-label { line-height: 1; }
.act:disabled { opacity: .32; filter: grayscale(0.45); }
.act-hit {
  background: linear-gradient(180deg, #243033, #161f21); border-color: #34474a; color: var(--toxic-bright);
  box-shadow: 0 5px 0 #0a1011, 0 9px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 20px rgba(95,181,107,0.08);
  text-shadow: 0 0 14px rgba(95,181,107,0.35);
}
.act-stay {
  background: linear-gradient(180deg, #2a1614, #190c0b); border-color: #5a2420; color: #ff8a7e;
  box-shadow: 0 5px 0 #110504, 0 9px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 20px rgba(196,30,30,0.1);
  text-shadow: 0 0 14px var(--blood-glow);
}
.act:active:not(:disabled) { transform: translateY(5px); }
.act-hit:active:not(:disabled) { box-shadow: 0 0 0 #0a1011, inset 0 2px 8px rgba(0,0,0,0.55); }
.act-stay:active:not(:disabled) { box-shadow: 0 0 0 #110504, inset 0 2px 8px rgba(0,0,0,0.55); }

/* 王牌手牌区（卡面） */
.trumps-bar { flex: 0 0 auto; }
.tb-head { font-size: 11px; color: var(--bone-dim); margin: 1px 2px 5px; display: flex; justify-content: space-between; letter-spacing: 1px; }
.trumps { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.trumps::-webkit-scrollbar { height: 4px; }
.trumps::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.trump {
  flex: 0 0 auto; width: 60px; height: 80px; border-radius: var(--r1); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  background: var(--paper);
  color: #1c1610; border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start; position: relative; overflow: hidden;
  transition: transform .1s, box-shadow .1s;
}
.trump::before { content: ""; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--gc) 34%, rgba(40,30,18,0.42)); border-radius: 3px; pointer-events: none; }
.trump .cf-art { width: 44px; height: 44px; color: #23190f; }
.trump .cf-art .cf-num { font-size: 46px; }
.trump:active { transform: translateY(-3px); }
.trump.sel { outline: 2px solid var(--blood-bright); outline-offset: 1px; transform: translateY(-5px); box-shadow: 0 8px 18px rgba(0,0,0,0.55); }

/* =========================================================================
   浮层 / 弹窗
   ========================================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(120% 100% at 50% 45%, rgba(6,9,9,0.86) 40%, rgba(18,7,6,0.92) 100%);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px;
  animation: ovin 0.35s ease-out;
}
@keyframes ovin { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
.overlay h2 { font-family: var(--f-display); font-size: 30px; margin: 0 0 8px; letter-spacing: 2px; }
.overlay p { color: var(--bone-dim); margin: 4px 0; font-size: 14px; }
.overlay .big { font-family: var(--f-display); font-size: 30px; font-weight: 900; letter-spacing: 1px; }
.overlay .win { color: var(--toxic-bright); text-shadow: 0 0 18px rgba(95,181,107,0.4); }
.overlay .lose { color: var(--blood-bright); text-shadow: 0 0 22px var(--blood-glow); }
.overlay .draw { color: var(--hazard); }
.overlay .ov-btn { min-width: 220px; max-width: 280px; }
.gameover-title { font-size: 46px !important; }
.gameover-title.lose { animation: deathin 0.7s cubic-bezier(.2,.8,.2,1); }
@keyframes deathin { from { letter-spacing: 14px; opacity: 0; } to { letter-spacing: 2px; opacity: 1; } }

.spinner { width: 40px; height: 40px; border: 4px solid var(--line-2); border-top-color: var(--blood-bright); border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.code-show { font-family: var(--f-display); font-size: 52px; font-weight: 900; letter-spacing: 14px; color: var(--hazard); margin: 12px 0; padding-left: 14px; text-shadow: 0 0 24px rgba(201,185,74,0.35); }

.toast { position: fixed; left: 50%; bottom: calc(22px + var(--safe-bot)); transform: translateX(-50%); background: #0a0d0d; border: 1px solid var(--blood); color: var(--bone); padding: 11px 18px; border-radius: var(--r2); font-size: 14px; z-index: 60; max-width: 86%; box-shadow: var(--shadow-2); animation: toastin .25s ease-out; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 对手动作播报（顶部） */
.announce {
  position: fixed; top: 31%; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #2a1110, #180b0a); border: 1px solid var(--blood); color: #ffd9d4;
  padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; z-index: 58; max-width: 92%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(196,30,30,0.25); white-space: nowrap; pointer-events: none;
}
.announce.in { animation: announcein .3s cubic-bezier(.2,.8,.2,1); }
@keyframes announcein { from { opacity: 0; transform: translate(-50%, -10px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
/* 获得王牌=正向播报(绿) */
.announce.good { background: linear-gradient(180deg, #112a16, #0b1a0e); border-color: var(--toxic); color: #cdeccf; box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(95,181,107,0.22); }
/* 角色台词横幅 */
.announce.taunt { background: linear-gradient(180deg, rgba(22,18,17,0.96), rgba(10,8,8,0.96)); border-color: var(--acc, var(--blood)); color: #efe7e1; font-style: italic; white-space: normal; max-width: 86%; box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px color-mix(in srgb, var(--acc, var(--blood)) 38%, transparent); }

/* ============================================================
   游戏内聊天：快捷用语 + 文字（气泡 + 上拉面板）
   ============================================================ */
.chat-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.cbub {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(8px);
  max-width: 80%; padding: 9px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.45; font-family: var(--f-ui);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5); border: 1px solid var(--gold-deep);
}
.cbub.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cbub::before { content: attr(data-who); position: absolute; top: -16px; font-size: 10px; letter-spacing: 2px; color: var(--gold); font-family: var(--f-title); white-space: nowrap; }
.cbub.opp { top: calc(150px + var(--safe-top)); background: linear-gradient(180deg, #241a1a, #150e0e); color: #f0e6e0; border-top-left-radius: 4px; }
.cbub.opp::before { left: 10px; }
.cbub.me  { bottom: calc(176px + var(--safe-bot)); background: linear-gradient(180deg, #14221a, #0b150e); color: #e7f0e9; border-bottom-right-radius: 4px; }
.cbub.me::before { right: 10px; top: auto; bottom: -16px; }

.chat-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.42); }
.chat-panel {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 71;
  background: linear-gradient(180deg, rgba(22,29,31,0.985), rgba(8,11,12,0.99));
  border: 1px solid var(--gold-deep); border-bottom: 0;
  border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + var(--safe-bot));
  box-shadow: 0 -12px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(233,210,154,0.08);
  animation: chatUp .2s ease;
}
@keyframes chatUp { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } }
.chat-ph-head { font-family: var(--f-title); font-size: 11px; letter-spacing: 3px; color: var(--gold); margin: 2px 2px 10px; }
.chat-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.chat-quick button {
  min-height: 44px; padding: 8px 11px; margin: 0;
  background: var(--inset); color: var(--bone); border: 1px solid var(--line);
  border-radius: var(--r2); font-size: 13px; font-family: var(--f-ui); line-height: 1.32;
  cursor: pointer; transition: border-color .14s, background .14s; text-align: left;
}
.chat-quick button:active { border-color: var(--gold); background: #1a2426; }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row #chatText { flex: 1; height: 46px; margin: 0; }
.chat-send {
  width: 78px; height: 46px; margin: 0; flex: 0 0 auto;
  background: linear-gradient(180deg, #d8362f, #8c1714); color: #fff6f0;
  border: 1px solid var(--gold); border-radius: var(--r2);
  font-family: var(--f-title); font-weight: 700; letter-spacing: 2px; cursor: pointer;
}
.chat-send:active { transform: translateY(1px); }

.icon-tool.has-unread { position: relative; }
.icon-tool.has-unread::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--blood-bright); box-shadow: 0 0 6px var(--blood-glow);
}

/* 菜单：对手简介 + 连胜 */
.opp-blurb { font-size: 12px; color: var(--bone-dim); text-align: center; margin: 8px 0 2px; min-height: 16px; line-height: 1.5; }
.opp-blurb .ob-best { color: var(--hazard); }
/* 结算：连胜 */
.go-streak { font-size: 14px; color: var(--bone-dim); margin: 2px 0 14px !important; }
.go-streak b { font-family: var(--f-display); font-size: 22px; color: var(--hazard); letter-spacing: 1px; }

/* 封锁提示 */
.turn-sub.lock { color: var(--blood-bright); }

/* 暗牌标识（己方第一张，对手看不见） */
.pcard.hole::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; pointer-events: none; }
.pcard.hole::after { content: "暗"; position: absolute; top: -5px; right: -4px; font-size: 9px; font-family: var(--f-ui); color: #fff; background: #2a1614; border: 1px solid var(--blood); border-radius: 4px; padding: 0 3px; line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* 结算明细 */
.res-scores { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin: 6px 0 4px; }
.res-scores span { color: var(--bone-dim); font-size: 12px; }
.res-scores i { font-style: normal; font-size: 11px; color: var(--bone-faint); margin-right: 3px; }
.res-scores b { font-family: var(--f-display); font-size: 24px; color: var(--bone); }
.res-scores .rs-bust { color: var(--blood-bright); }
.res-scores .rs-target b { color: var(--hazard); font-size: 20px; }
.res-reason { color: var(--bone) !important; font-size: 14px; margin: 4px 0 6px !important; }
.res-next { color: var(--bone-faint) !important; font-size: 12px; margin-top: 10px !important; }

/* 对手新打出的牌：闪入高亮 */
.tcard.flash-in { animation: cardflash 1.1s ease-out; z-index: 2; }
@keyframes cardflash {
  0% { box-shadow: 0 0 0 2px var(--blood-bright), 0 0 20px 5px var(--blood-glow); transform: scale(1.14); }
  100% { box-shadow: var(--shadow-1); transform: scale(1); }
}

/* 轮到你：动作区柔光召唤 */
.actionbar.active { border-radius: 14px; animation: barglow 1.9s ease-in-out infinite; }
@keyframes barglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,185,74,0); } 50% { box-shadow: 0 0 22px 2px rgba(201,185,74,0.16); } }

.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: ovin .25s ease-out; }
.modal-box { width: 100%; max-width: 480px; max-height: 88vh; background: linear-gradient(180deg, var(--panel), var(--bg1)); border: 1px solid var(--gold-deep); border-radius: var(--r3); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(233,210,154,0.06); }
.modal-head { display: flex; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 18px; letter-spacing: 2px; font-family: var(--f-title); color: var(--gold-bright); }
.icon-btn { margin-left: auto; background: var(--inset); border: 1px solid var(--line-2); color: var(--bone); width: 32px; height: 32px; border-radius: var(--r1); font-size: 15px; cursor: pointer; }
.modal-body { overflow-y: auto; padding: 12px 14px; }
.codex-group h3 { font-size: 13px; color: var(--gold); letter-spacing: 3px; margin: 16px 0 8px; border-left: 2px solid var(--gold); padding-left: 9px; font-family: var(--f-title); }
.codex-item { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid #182022; align-items: center; }
.codex-face {
  flex: 0 0 auto; width: 48px; height: 60px; border-radius: var(--r1); padding: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  color: #1c1610; border: 1px solid var(--paper-edge); position: relative; overflow: hidden;
}
.codex-face::before { content: ""; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--gc) 34%, rgba(40,30,18,0.42)); border-radius: 3px; pointer-events: none; }
.codex-face .cf-art { width: 34px; height: 34px; color: #23190f; }
.codex-face .cf-art .cf-num { font-size: 32px; }
.codex-item .cx-name { font-size: 13px; font-weight: 700; color: var(--bone); }
.codex-item .cx-name span { font-size: 10px; color: var(--bone-faint); margin-left: 6px; font-weight: 500; }
.codex-item .cx-desc { font-size: 12px; color: var(--bone-dim); margin-top: 3px; line-height: 1.45; }

/* 玩法说明 */
.rules-sec { margin-bottom: 18px; }
.rules-sec h3 { font-size: 14px; color: var(--gold); letter-spacing: 2px; margin: 0 0 8px; border-left: 2px solid var(--gold); padding-left: 9px; font-family: var(--f-title); }
.rules-sec p { font-size: 13px; color: var(--bone-dim); line-height: 1.65; margin: 6px 0; }
.rules-sec b { color: var(--bone); font-weight: 700; }
.rules-sec ul { margin: 6px 0; padding-left: 20px; }
.rules-sec li { font-size: 13px; color: var(--bone-dim); line-height: 1.6; margin: 4px 0; }
.rules-sec li b { color: var(--bone); }

/* 王牌信息气泡 */
.cardpop { position: fixed; left: 9px; right: 9px; bottom: calc(9px + var(--safe-bot)); z-index: 55; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--hazard); border-radius: var(--r3); padding: 15px; box-shadow: 0 -10px 34px rgba(0,0,0,0.6); animation: popin .2s ease-out; }
@keyframes popin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.cardpop .cp-top { display: flex; align-items: center; gap: 12px; }
.cardpop .cp-face { flex: 0 0 auto; width: 54px; height: 68px; border-radius: var(--r1); display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--paper-edge); position: relative; overflow: hidden; }
.cardpop .cp-face::before { content: ""; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--gc) 34%, rgba(40,30,18,0.42)); border-radius: 3px; pointer-events: none; }
.cardpop .cp-face .cf-art { width: 34px; height: 34px; color: #23190f; }
.cardpop .cp-face .cf-art .cf-num { font-size: 32px; }
.cardpop .cp-name { font-size: 17px; font-weight: 800; color: var(--bone); font-family: var(--f-display); letter-spacing: 1px; }
.cardpop .cp-name span { font-size: 11px; color: var(--bone-dim); margin-left: 8px; font-weight: 500; font-family: var(--f-ui); }
.cardpop .cp-desc { font-size: 13px; color: var(--bone); margin: 10px 0 13px; line-height: 1.5; }
/* 使用=主操作(大按钮)；弃掉/取消=低频次要(小字链接) */
.cardpop .cp-use {
  display: block; width: 100%; height: 52px; margin-top: 4px; border-radius: var(--r2); border: 1px solid #58a06e;
  background: linear-gradient(180deg, #5fc07a, var(--toxic)); color: #07270b; font-size: 16px; font-weight: 800; letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(95,181,107,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.cardpop .cp-use:active { transform: translateY(2px); box-shadow: 0 2px 8px rgba(95,181,107,0.3); }
.cardpop .cp-minor { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.cardpop .cp-link { background: none; border: none; color: var(--bone-dim); font-size: 13px; cursor: pointer; padding: 6px 6px; }
.cardpop .cp-link:active { opacity: .6; }
.cardpop .cp-link-discard { color: #b06a64; }
.cardpop .cp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bone-faint); }

@media (min-height: 740px) {
  .pcard { width: 48px; height: 66px; font-size: 28px; }
  .trump { width: 68px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  #fx.flash, #game.shake .g-wrap, #game.shake.big .g-wrap, #danger.on, .dmg-float, .turn-banner.mine, .conn-dot.off, .overlay, .modal, .toast, .cardpop, .gameover-title.lose, .spinner, .announce.in, .tcard.flash-in, .actionbar.active { animation: none !important; }
  #danger.on { opacity: 1; }
  .spinner { border-top-color: var(--blood-bright); }
  * { transition: none !important; }
}