/* ============ 桌游厅 · Daylight Garden (浅色主题) ============ */
:root {
  --red: #e4536b;
  --yellow: #f2b32a;
  --blue: #3f7fe0;
  --green: #1fa870;
  --ink: #2b3350;
  --ink-dim: #4d5878;
  --muted: #8a93ad;
  --bg0: #f4f6fc;
  --bg1: #ffffff;
  --bg2: #eef1f9;
  --panel: rgba(255, 255, 255, .78);
  --panel-solid: #ffffff;
  --panel2: #f2f4fb;
  --line: rgba(43, 51, 80, .10);
  --line-strong: rgba(43, 51, 80, .18);
  --glow: rgba(63, 127, 224, .28);
  --accent: #3f7fe0;
  --accent2: #8b5cf6;
  --danger: #e4536b;
  --ok: #1fa870;
  --gold: #d9930d;
  --brass: #d9930d;
  --seal: #e4536b;
  --seal2: #c93b54;
  --felt: #e7ecf7;
  --paper: var(--panel);
  --paper2: var(--panel2);
  --paper3: #e9edf7;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 24px 60px rgba(43, 51, 80, .12), 0 4px 14px rgba(43, 51, 80, .08);
  --font: "Outfit", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", "STZhongsong", "SimSun", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg0);
  background-image:
    radial-gradient(1300px 760px at 10% -12%, rgba(63, 127, 224, .14), transparent 56%),
    radial-gradient(1000px 640px at 92% 8%, rgba(139, 92, 246, .10), transparent 52%),
    radial-gradient(880px 560px at 50% 112%, rgba(31, 168, 112, .06), transparent 52%),
    linear-gradient(180deg, #f7f9fe 0%, #eef1f9 100%);
  background-attachment: fixed;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(63, 127, 224, .30); color: #1a2240; }

/* ---------- ambient stage ---------- */
.bg-stage {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.bg-orbs { position: absolute; inset: 0; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
  animation: orbFloat 20s ease-in-out infinite;
  will-change: transform;
}
.orb-a { width: 420px; height: 420px; left: -120px; top: 6%; background: #9cc0ff; opacity: .45; }
.orb-b { width: 320px; height: 320px; right: -90px; top: 30%; background: #c9b0fb; animation-delay: -6s; opacity: .4; }
.orb-c { width: 260px; height: 260px; left: 38%; bottom: -60px; background: #8fe0bd; animation-delay: -12s; opacity: .22; }
.orb-d { width: 200px; height: 200px; right: 18%; bottom: 12%; background: #ffb3c0; animation-delay: -9s; opacity: .16; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, -38px) scale(1.12); }
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(43,51,80,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,51,80,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 40%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 40%, #000 18%, transparent 76%);
  opacity: .8;
}
.bg-noise {
  position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 82% 72% at 50% 44%, transparent 28%, rgba(200, 210, 235, .30) 100%);
}

.view, .modal, #toast { position: relative; z-index: 1; }
.view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#view-lobby, #view-room { background: transparent; }

/* ---------- glass panel ---------- */
.paper {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255,255,255,.9), rgba(255,255,255,.55) 40%, rgba(255,255,255,.3) 70%),
    var(--panel);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- buttons / inputs ---------- */
button {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #eef1f9);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .16s ease, border-color .16s ease, filter .16s;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px rgba(43,51,80,.10);
}
button:hover {
  background: linear-gradient(180deg, #ffffff, #e6ebf8);
  border-color: rgba(43,51,80,.34);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 12px 24px rgba(43,51,80,.14);
}
button:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
button:focus-visible { outline: 2px solid rgba(63, 127, 224, .7); outline-offset: 2px; }

button.primary {
  background: linear-gradient(135deg, #4f86ff 0%, #7a5cff 52%, #a95cff 100%);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 12px 30px rgba(91, 134, 255, .35),
    0 2px 0 rgba(255,255,255,.20) inset;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
button.primary:hover {
  filter: brightness(1.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 16px 36px rgba(91, 134, 255, .45),
    0 2px 0 rgba(255,255,255,.24) inset;
  background: linear-gradient(135deg, #4f86ff 0%, #7a5cff 52%, #a95cff 100%);
  border-color: transparent;
}
button.primary:active { filter: brightness(.96); }

button.big {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border-radius: 15px;
  letter-spacing: 3px;
}
button.mini {
  padding: 4px 11px;
  font-size: 12px;
  border-radius: 10px;
  letter-spacing: 0;
  font-weight: 700;
}
button.danger-outline {
  background: rgba(228, 83, 107, .08);
  color: #c93b54;
  border-color: rgba(228, 83, 107, .42);
  box-shadow: none;
}
button.danger-outline:hover {
  background: rgba(228, 83, 107, .16);
  border-color: rgba(228, 83, 107, .66);
  box-shadow: 0 8px 20px rgba(228, 83, 107, .12);
}

input {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line-strong);
  outline: none;
  min-width: 0;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder { color: #a6aec4; }
input:focus {
  border-color: rgba(63, 127, 224, .7);
  box-shadow: 0 0 0 3px rgba(63, 127, 224, .18), 0 0 20px rgba(63, 127, 224, .06);
  background: #ffffff;
}
.err {
  color: #d24a62;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.err[hidden] { display: none !important; }
.sub { color: var(--muted); font-size: 14px; }
body.modal-open { overflow: hidden; }
.field-shake { animation: fieldShake .38s ease; }
@keyframes fieldShake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* ---------- lobby ---------- */
.lobby-shell {
  width: min(460px, 96vw);
  position: relative;
}
.lobby-shell::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: linear-gradient(135deg,
    rgba(63,127,224,.45),
    rgba(139,92,246,.24) 40%,
    rgba(31,168,112,.20) 70%,
    rgba(228,83,107,.24));
  opacity: .5;
  filter: blur(1px);
  z-index: 0;
  animation: shellGlow 6s ease-in-out infinite;
}
@keyframes shellGlow {
  0%, 100% { opacity: .32; }
  50% { opacity: .6; }
}
.lobby-card, .room-card {
  width: min(460px, 94vw);
  padding: 30px 30px 24px;
}
.lobby-home {
  width: 100%;
  padding: 36px 30px 24px;
  overflow: hidden;
  z-index: 1;
}
.lobby-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(640px 200px at 50% -22%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 62%);
  background-size: 100% 100%, 220% 100%;
  animation: lobbyShine 7s ease-in-out infinite;
}
@keyframes lobbyShine {
  0%, 100% { background-position: 0 0, 120% 0; }
  50% { background-position: 0 0, -20% 0; }
}
.logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  position: relative;
}
.brand-mark {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.4)),
    linear-gradient(135deg, rgba(63,127,224,.30), rgba(139,92,246,.24));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 14px 34px rgba(63,127,224,.22),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 16px rgba(43,51,80,.06);
  animation: brandBob 4.5s ease-in-out infinite;
}
.brand-dice { font-size: 32px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(43,51,80,.25)); }
@keyframes brandBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}
.brand-kicker {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  opacity: .95;
}
.brand-kicker::before, .brand-kicker::after {
  content: '';
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .7;
}
.brand-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 12px;
  line-height: 1.1;
  color: #2b3350; /* fallback */
  background: linear-gradient(135deg, #2b3350 8%, #3f7fe0 42%, #8b5cf6 78%, #2b3350 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  margin: 2px 0 0 12px; /* optical balance for letter-spacing */
  animation: titleShimmer 8s linear infinite;
}
@keyframes titleShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.brand-sub {
  margin: 0 !important;
  text-align: center;
  letter-spacing: 2px;
  opacity: .9;
}
.game-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.game-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 13px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--c) 78%, #2b3350);
  background: color-mix(in srgb, var(--c) 14%, rgba(255,255,255,.6));
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 10%, transparent);
  transition: transform .15s, background .16s, border-color .16s, filter .16s, box-shadow .16s;
}
.game-chip:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  background: color-mix(in srgb, var(--c) 22%, rgba(255,255,255,.7));
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 18%, transparent);
}
.game-chip:active { transform: translateY(0); }
.game-chip.active-chip {
  background: color-mix(in srgb, var(--c) 26%, rgba(255,255,255,.8));
  border-color: color-mix(in srgb, var(--c) 68%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent),
    0 8px 22px color-mix(in srgb, var(--c) 22%, transparent);
}
.lobby-field {
  margin-bottom: 18px;
  position: relative;
}
.lobby-field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.input-wrap { position: relative; }
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .6;
  pointer-events: none;
  z-index: 1;
}
.input-wrap input { padding-left: 40px; }
.lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
}
.lobby-cta-create {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 18px 14px !important;
  letter-spacing: 2px !important;
  position: relative;
  overflow: hidden;
  border: none !important;
  background: linear-gradient(135deg, #4f86ff 0%, #7a5cff 50%, #b057ff 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 16px 38px rgba(91, 134, 255, .4),
    0 2px 0 rgba(255,255,255,.24) inset !important;
}
.lobby-cta-create:hover {
  filter: brightness(1.07);
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.24) inset,
    0 20px 44px rgba(91, 134, 255, .5),
    0 2px 0 rgba(255,255,255,.26) inset !important;
}
.cta-glow {
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-60%);
  animation: ctaSweep 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSweep {
  0%, 55%, 100% { transform: translateX(-70%); opacity: 0; }
  60% { opacity: 1; }
  85% { transform: translateX(70%); opacity: 0; }
}
.lobby-cta-create .cta-main {
  font-size: 18px;
  letter-spacing: 4px;
  font-weight: 800;
  position: relative;
}
.lobby-cta-create .cta-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: .9;
  position: relative;
}
.lobby-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.lobby-or::before, .lobby-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43,51,80,.2), transparent);
}
.lobby-or span { white-space: nowrap; opacity: .85; }
.lobby-join-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.3)),
    rgba(255,255,255,.5);
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.join-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
}
.join-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(43,51,80,.05);
  border: 1px solid var(--line);
}
.join-row { display: flex; gap: 10px; align-items: stretch; }
.join-row input {
  flex: 1 1 120px;
  min-width: 0;
  text-align: center;
  letter-spacing: 10px;
  font-size: 22px;
  font-weight: 800;
  padding: 12px 8px;
  font-variant-numeric: tabular-nums;
  height: 52px;
  border-radius: 15px;
}
.join-row input::placeholder {
  letter-spacing: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #b3bacd;
}
.join-row input:not(:placeholder-shown) { letter-spacing: 12px; }
.join-row button {
  flex: 0 0 auto;
  width: auto;
  min-width: 96px;
  height: 52px;
  white-space: nowrap;
  letter-spacing: 2px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}
.lobby-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.lobby-foot .foot-dot { opacity: .4; }
#lobby-err { text-align: center; min-height: 0; }

/* ---------- create-game modal ---------- */
#modal-create:not([hidden]) {
  animation: modalFadeIn .2s ease;
  background: rgba(244, 246, 252, .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#modal-create:not([hidden]) .create-modal-card {
  animation: modalIn .34s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.create-modal-card {
  width: min(560px, 94vw);
  padding: 26px 24px 20px;
  text-align: left;
  overflow: hidden;
}
.create-modal-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  top: -40%;
  height: 55%;
  background: radial-gradient(ellipse at center, rgba(63,127,224,.18), transparent 70%);
  pointer-events: none;
}
.create-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  position: relative;
}
.create-modal-head h2 {
  margin: 0 0 4px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #2b3350, #3f7fe0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2b3350;
}
.create-modal-head .sub { margin: 0; }
.create-close {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1;
  background: rgba(43,51,80,.06) !important;
}
.create-close:hover {
  background: rgba(228,83,107,.14) !important;
  border-color: rgba(228,83,107,.4) !important;
  color: #c93b54;
}
.create-game-pick {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
}
.create-game-pick .pick {
  flex: none;
  min-width: 0;
  position: relative;
  padding: 20px 10px 16px;
  align-items: center;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(165deg, rgba(255,255,255,.8), rgba(255,255,255,.4) 50%),
    rgba(255,255,255,.5);
  border-radius: 19px;
}
.create-game-pick .pick:hover { transform: translateY(-3px) scale(1.015); }
.create-game-pick .pick:focus-visible {
  outline: 2px solid rgba(63, 127, 224, .7);
  outline-offset: 2px;
}
.create-game-pick .pick.active {
  background:
    linear-gradient(165deg, rgba(63,127,224,.18), rgba(139,92,246,.10)),
    rgba(255,255,255,.7);
  box-shadow:
    0 0 0 1px rgba(63,127,224,.2) inset,
    0 16px 34px rgba(63, 127, 224, .2);
}
.create-game-pick .pick-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink-dim);
  background: rgba(43,51,80,.06);
  border: 1px solid var(--line);
}
.create-game-pick .pick .pick-art {
  filter: drop-shadow(0 8px 14px rgba(43,51,80,.25));
  transition: transform .18s ease;
}
.create-game-pick .pick:hover .pick-art,
.create-game-pick .pick.active .pick-art {
  transform: scale(1.06) translateY(-1px);
}
.create-picked {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  margin: 2px 0 10px;
  letter-spacing: .5px;
  padding: 8px 12px;
  border-radius: 13px;
  background: rgba(242,179,42,.10);
  border: 1px dashed rgba(217,147,13,.3);
}
.create-picked b { color: var(--gold); }
.create-modal-btns { margin-top: 4px; gap: 10px; }
#btn-create-confirm { position: relative; overflow: hidden; }
#btn-create-confirm:disabled { opacity: .65; cursor: wait; }

/* ---------- game pick (shared) ---------- */
.game-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.pick {
  flex: 1 1 28%;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px 12px;
  border-radius: 17px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--line);
  box-shadow: none;
  filter: saturate(.7) brightness(.98);
  opacity: .88;
  transition: transform .17s, filter .2s, opacity .2s, border-color .17s, box-shadow .17s, background .17s;
}
.pick:hover {
  filter: saturate(1);
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(43,51,80,.28);
}
.pick .pick-art { width: 64px; height: 64px; display: block; }
.pick b {
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 800;
  margin-top: 2px;
}
.pick small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.35;
}
.pick.active {
  filter: none;
  opacity: 1;
  background: linear-gradient(160deg, rgba(63,127,224,.16), rgba(139,92,246,.10));
  border-color: rgba(63, 127, 224, .55);
  box-shadow:
    0 0 0 1px rgba(63,127,224,.14) inset,
    0 12px 30px rgba(63, 127, 224, .18);
  position: relative;
}
.pick.active::after {
  content: '已选';
  position: absolute;
  top: -8px;
  right: -6px;
  background: linear-gradient(135deg, #4f86ff, #a95cff);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(91,134,255,.35);
}
.pick.active .pick-badge {
  color: #2b4a80;
  border-color: rgba(63,127,224,.4);
  background: rgba(63,127,224,.14);
}

/* ---------- lobby room list ---------- */
.lobby-rooms {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.lobby-rooms .specs-head {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#room-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 2px; }
.lr-item {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 10px 13px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.lr-item:hover {
  border-color: rgba(63,127,224,.45);
  transform: translateY(-1px);
  background: rgba(63,127,224,.07);
  box-shadow: 0 8px 22px rgba(43,51,80,.12);
}
.lr-item:active { transform: translateY(0); }
.lr-top { display: flex; align-items: center; gap: 8px; }
.lr-top b { font-size: 14px; }
.lr-top i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.lr-waiting { color: #157a52; border-color: rgba(31,168,112,.45); background: rgba(31,168,112,.10); }
.lr-playing { color: #b07507; border-color: rgba(242,179,42,.4); background: rgba(242,179,42,.10); }
.lr-count { margin-left: auto; font-weight: 800; color: var(--muted); font-size: 12px; }
.lr-names {
  color: var(--ink-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* join modal */
#modal-join .modal-card { text-align: left; }
#modal-join h2 { margin-bottom: 6px; }
.join-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 12px 0 6px;
  text-transform: uppercase;
}
#join-name { font-size: 15px; font-weight: 700; }
#join-code {
  text-align: center;
  letter-spacing: 8px;
  font-size: 24px;
  font-weight: 800;
  padding: 10px;
  font-variant-numeric: tabular-nums;
}
#join-code::placeholder { letter-spacing: 2px; font-size: 15px; font-weight: 600; }
#modal-join .modal-btns { margin-top: 8px; }

/* ---------- spectators ---------- */
.specs { margin: 0 0 14px; }
.specs-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.spec-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 8px 6px 0;
  background: rgba(255,255,255,.5);
  border: 1px dashed rgba(43,51,80,.22);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
}
.spec-item .nm {
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spec-item .tag { font-size: 11px; color: var(--muted); }
.spec-strip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  background: rgba(255,255,255,.5);
  border-radius: 11px;
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--line);
}

/* ---------- room ---------- */
.room-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.room-gname {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #2b3350, #3f7fe0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2b3350;
}
.code-plate {
  background: linear-gradient(135deg, #fff, #f0e9ff);
  border-radius: 11px;
  padding: 5px 14px;
  border: 1px solid rgba(217, 147, 13, .4);
  box-shadow: 0 0 22px rgba(242, 179, 42, .15), inset 0 1px 0 rgba(255,255,255,.9);
}
.code {
  color: var(--gold);
  letter-spacing: 8px;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(242, 179, 42, .4);
}
.slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 12px;
}
.slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  padding: 14px 12px 12px;
  min-height: 60px;
  font-size: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.slot::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--sc, #b3bacd);
}
.slot:hover { border-color: rgba(43,51,80,.3); }
.slot.empty {
  color: #a6aec4;
  border: 1px dashed rgba(43,51,80,.2);
  justify-content: center;
  background:
    repeating-linear-gradient(-45deg, rgba(43,51,80,.03) 0 8px, transparent 8px 16px),
    rgba(255,255,255,.35);
  letter-spacing: 2px;
}
.slot.empty::before { display: none; }
.slot .cdot, .pcard .cdot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  background: var(--sc, #888);
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc, #888) 45%, transparent);
}
.slot .who { flex: 1; min-width: 0; }
.slot .who .nm {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot .who .tag { font-size: 11px; color: var(--muted); }
.room-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.room-btns button { flex: 1; white-space: nowrap; letter-spacing: .5px; }
.room-btns #btn-start { flex: 1.6; }

/* ---------- panels ---------- */
.panel { margin-top: 12px; min-height: 0; display: flex; flex-direction: column; }
.panel-head {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  color: #2b4a80;
  background: linear-gradient(135deg, rgba(63,127,224,.20), rgba(139,92,246,.16));
  border: 1px solid rgba(63,127,224,.2);
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  padding: 5px 14px 4px;
  letter-spacing: 3px;
}
.chat-list, .log {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-strong);
  border-radius: 0 13px 13px 13px;
  height: 140px;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-dim);
}
.chat-list .sys, .log .sys { color: var(--muted); }
.chat-list b { font-weight: 800; color: var(--ink); }
.chat-input { display: flex; gap: 8px; margin-top: 8px; }
.chat-input input { padding: 8px 12px; }
.log .pop-in { animation: popIn .25s ease; }
@keyframes popIn { from { opacity: 0; transform: translateX(-6px); } }
.chat-list > div { animation: popIn .2s ease; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(43,51,80,.18);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(43,51,80,.3); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- game layout ---------- */
.game-wrap {
  display: flex;
  gap: 18px;
  width: min(1300px, 98vw);
  height: min(96vh, 880px);
}
.board-pane {
  flex: 1.62;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#board {
  width: 100%;
  height: 100%;
  max-width: 850px;
  overflow: visible;
  filter: drop-shadow(0 22px 44px rgba(43,51,80,.18));
}
#board.shake { animation: boardShake .5s ease; }
@keyframes boardShake {
  20% { transform: translate(3px, -2px) rotate(.3deg); }
  45% { transform: translate(-3px, 2px) rotate(-.3deg); }
  70% { transform: translate(2px, 1px); }
}
.side-pane {
  flex: 1;
  max-width: 385px;
  min-width: 305px;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  overflow: hidden;
}
.side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.side-head b {
  color: var(--gold);
  letter-spacing: 4px;
  font-size: 18px;
  text-shadow: 0 0 14px rgba(242, 179, 42, .3);
}
.head-right { display: flex; align-items: center; gap: 8px; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  display: inline-block;
  border: 2px solid rgba(255,255,255,.7);
}
.dot.ok { background: var(--ok); box-shadow: 0 0 10px rgba(31,168,112,.55); }
.dot.bad { background: var(--red); box-shadow: 0 0 10px rgba(228,83,107,.55); }

#player-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.pcard {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  font-size: 13px;
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
.pcard.turn {
  border-color: color-mix(in srgb, var(--sc, var(--accent)) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sc, var(--accent)) 35%, transparent),
    0 0 22px color-mix(in srgb, var(--sc, var(--accent)) 22%, transparent);
  transform: scale(1.02);
  background: rgba(255,255,255,.8);
}
.pcard.turn .cdot { animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse { 50% { transform: scale(1.35); } }
.pcard .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.pcard .badges { display: flex; gap: 4px; }
.badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(43,51,80,.05);
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.badge.auto { color: #b07507; border-color: rgba(242,179,42,.42); background: rgba(242,179,42,.10); }
.badge.off  { color: #c93b54; border-color: rgba(228,83,107,.42); background: rgba(228,83,107,.10); }
.badge.rank { color: #157a52; border-color: rgba(31,168,112,.42); background: rgba(31,168,112,.10); }
.mini-planes { font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.mini-planes b { color: var(--sc); font-weight: 400; }
.mini-planes i { color: rgba(43,51,80,.25); font-style: normal; }

.turn-strip { margin-top: 10px; }
.tip-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.turn-tip {
  font-size: 14px;
  font-weight: 700;
  color: var(--tc, var(--muted));
  min-height: 20px;
  margin-bottom: 6px;
}
#timer-sec {
  color: #d24a62;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  animation: secBlink 1s steps(2) infinite;
}
@keyframes secBlink { 50% { opacity: .35; } }
.timer-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(43,51,80,.08);
  overflow: hidden;
  border: 1px solid var(--line);
}
#timer-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #1fa870, #f2b32a 60%, #e4536b);
  transition: width .25s linear;
  border-radius: 999px;
}
.timer-bar.urgent { border-color: rgba(228,83,107,.5); }
.timer-bar.urgent #timer-fill {
  background: #e4536b;
  animation: urgentPulse .7s ease-in-out infinite;
}
@keyframes urgentPulse { 50% { filter: brightness(1.2); } }
.side-btns { display: flex; gap: 8px; margin-top: 10px; }
.side-btns button { flex: 1; }
.log-panel { flex: 1.2; }
.log-panel .log { flex: 1; height: auto; min-height: 90px; }
.chat-panel { flex: 1.1; }
.chat-panel .chat-list { flex: 1; height: auto; min-height: 96px; }

.host-only { display: none; }
.is-host .host-only { display: inline-block; }

/* ---------- board SVG (light theme) ---------- */
.plate { fill: url(#plateGrad); stroke: rgba(43,51,80,.25); stroke-width: 3.5; }
.field { fill: url(#fieldGrad); stroke: rgba(200,210,235,.9); stroke-width: 5; stroke-linejoin: round; }
.cell { stroke: rgba(200,210,235,.8); stroke-width: 2; stroke-linejoin: round; }
.stretch-cell { stroke: rgba(200,210,235,.8); stroke-width: 2; }
.cell-dot { fill: #ffffff; stroke: rgba(43,51,80,.4); stroke-width: 1.6; }
.chev { opacity: .92; stroke: rgba(43,51,80,.2); stroke-width: .8; }
.fly-line { stroke-width: 3.2; stroke-dasharray: 7 7; opacity: .36; fill: none; }
.ctr-tri { stroke: rgba(43,51,80,.3); stroke-width: 2; stroke-linejoin: round; }
.ctr-frame { fill: none; stroke: rgba(43,51,80,.35); stroke-width: 4.5; }
.ctr-core { fill: #ffffff; stroke: rgba(43,51,80,.3); stroke-width: 2.5; }
.ctr-label { font-size: 15px; font-weight: 900; fill: #2b3350; letter-spacing: 2px; }
.hangar { stroke: rgba(43,51,80,.3); stroke-width: 3; }
.hangar.active { stroke: var(--gold); stroke-width: 6; animation: hangarGlow 1.55s ease-in-out infinite; }
@keyframes hangarGlow { 50% { stroke-width: 8; } }
.hangar-pad { fill: #ffffff; stroke: rgba(43,51,80,.35); stroke-width: 2; }
.hangar-label { font-size: 19px; font-weight: 900; fill: #2b3350; }
.hangar-sub { font-size: 12.5px; fill: rgba(43,51,80,.6); font-weight: 700; }
.start-badge { stroke: rgba(43,51,80,.3); stroke-width: 2.5; filter: drop-shadow(1px 2px 0 rgba(43,51,80,.15)); }
.badge-txt { font-size: 12.5px; font-weight: 900; fill: #2b3350; letter-spacing: 1px; }

/* ---------- planes ---------- */
.plane { cursor: default; transition-property: transform; transition-timing-function: cubic-bezier(.32, .8, .34, 1.06); }
.plane .prot { transition: transform .18s ease; }
.plane circle {
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 2.5px 2px rgba(43,51,80,.3));
  transition: r .2s;
}
.plane .pglyph { fill: #fff; stroke: rgba(43,51,80,.3); stroke-width: .6; pointer-events: none; }
.plane.done { opacity: .96; }
.plane.done circle { stroke-width: 1.6; }
.plane.movable { cursor: pointer; }
.plane.movable circle { stroke: var(--gold); animation: movablePulse 1.25s ease-in-out infinite; }
@keyframes movablePulse {
  0%, 100% { stroke-width: 3; filter: drop-shadow(0 0 2px rgba(242, 179, 42, .8)); }
  50% { stroke-width: 6; filter: drop-shadow(0 0 10px rgba(242, 179, 42, 1)); }
}
.plane.flying circle { filter: drop-shadow(0 7px 6px rgba(43,51,80,.35)); }

.pfx { transform-origin: 0 0; }
.pfx.hop { animation-name: hopK; animation-timing-function: ease; }
@keyframes hopK { 40% { transform: scale(1.28, .82) translateY(-7px); } }
.pfx.leap { animation-name: leapK; animation-timing-function: ease; }
@keyframes leapK { 45% { transform: scale(1.45) translateY(-10px); } }
.pfx.soar { animation-name: soarK; animation-timing-function: ease-in-out; }
@keyframes soarK { 20% { transform: scale(1.5); } 80% { transform: scale(1.5); } }
.pfx.spinout { animation-name: spinoutK; animation-timing-function: ease-in; }
@keyframes spinoutK { 60% { transform: rotate(280deg) scale(1.15); } 100% { transform: rotate(520deg) scale(.55); } }
.pfx.victory { animation-name: victoryK; animation-timing-function: cubic-bezier(.3, .7, .35, 1.05); }
@keyframes victoryK {
  0% { transform: scale(1) rotate(0); }
  38% { transform: scale(1.85) rotate(200deg); }
  62% { transform: scale(1.55) rotate(310deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* ---------- effects ---------- */
.burst-p { animation: burstK 1s ease-out forwards; }
@keyframes burstK {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}
.confetti-p { animation: confK 1.4s ease-out forwards; }
@keyframes confK {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
.float-txt {
  font-size: 16px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  animation: floatK 1.33s ease-out forwards;
}
@keyframes floatK {
  0% { transform: translateY(6px); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-26px); opacity: 0; }
}
.ring-wave { fill: none; animation: ringWaveK 1.26s ease-out forwards; }
@keyframes ringWaveK {
  0% { r: 12; opacity: .95; stroke-width: 7; }
  100% { r: 84; opacity: 0; stroke-width: 1.5; }
}

/* ---------- landing markers ---------- */
.target-mark { cursor: pointer; }
.tm-ring {
  fill: rgba(255, 255, 255, .5);
  stroke-width: 3;
  stroke-dasharray: 5 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: markSpin 4.5s linear infinite, markPulse 1.4s ease-in-out infinite;
}
@keyframes markSpin { to { transform: rotate(360deg); } }
@keyframes markPulse { 50% { stroke-width: 4.5; } }
.tm-icon { font-size: 13px; }
.target-mark.hot .tm-ring { fill: rgba(242, 179, 42, .5); }
.plane.hot circle { stroke: var(--gold); stroke-width: 5; }

/* ---------- stack badge ---------- */
.stackn {
  font-size: 12px;
  font-weight: 900;
  fill: #ffffff;
  paint-order: stroke;
  stroke: #2b3350;
  stroke-width: 3.5px;
  pointer-events: none;
}

/* ---------- monopoly board（木框 + 绿呢中庭 + 米色地块） ---------- */
.mono-plate { fill: url(#monoPlateGrad); stroke: rgba(16,42,30,.55); stroke-width: 3; }
.mono-center { fill: url(#monoFeltGrad); stroke: rgba(38,80,60,.4); stroke-width: 3; }
.mono-center-line { fill: none; stroke: rgba(38,80,60,.32); stroke-width: 1.5; stroke-dasharray: 7 6; }
.mono-center-ring { fill: none; stroke: rgba(38,80,60,.13); stroke-width: 2.5; }
.mono-center-ring.thin { stroke-width: 1.4; stroke-dasharray: 3 7; }
.mono-watermark { font-size: 430px; font-weight: 900; fill: rgba(38,80,60,.06); pointer-events: none; font-family: var(--font-sans, 'Outfit', sans-serif); }
.mono-plaque { fill: url(#monoPlaqueGrad); stroke: #e8c46a; stroke-width: 3; filter: drop-shadow(0 6px 10px rgba(20,40,30,.3)); }
.mono-plaque-line { fill: none; stroke: rgba(255, 240, 200, .65); stroke-width: 1.5; }
.mono-title { font-size: 62px; font-weight: 900; fill: url(#monoGoldGrad); letter-spacing: 13px; }
.mono-sub { font-size: 18px; font-weight: 800; fill: #2f5d46; letter-spacing: 2px; }
.mono-score { fill: rgba(255, 253, 246, .78); stroke: rgba(38,80,60,.3); stroke-width: 2.5; }
.mono-score-head { font-size: 14.5px; font-weight: 900; fill: #4b7a62; letter-spacing: 3px; }
.mono-score-dot { stroke: rgba(255,255,255,.9); stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(20,40,30,.3)); }
.mono-money-name {
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #fffdf6;
  stroke-width: 3px;
  fill: #3a4030 !important; /* 名字统一深色，座位色由圆点承担（黄色座位名在米白底上不可读） */
}
.mono-money-name.dead { opacity: .45; text-decoration: line-through; }
.mono-money {
  font-size: 21px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fffdf6;
  stroke-width: 4px;
  fill: #2b3350 !important; /* 金额统一深色保证可读，涨跌脉冲会临时变色 */
}
.mono-money.dead { opacity: .45; }
.mono-cell { fill: url(#monoCellGrad); stroke: rgba(92,74,42,.4); stroke-width: 2; transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease; }
.mono-cell.fn { fill: #f6f2e2; }
.mono-cell.corner { fill: url(#monoCornerGrad); stroke-width: 2.6; }
.mono-badge { stroke: rgba(255,255,255,.85); stroke-width: 2.2; filter: drop-shadow(0 2px 2px rgba(60,48,20,.28)); }
.mono-badge-ring { fill: none; stroke-width: 1.8; opacity: .4; stroke-dasharray: 4 4.5; }
.mono-badge-ch { font-size: 17px; font-weight: 900; fill: #fff; }
.mono-badge-ch.corner { font-size: 25px; }
.mono-fn-name { font-size: 12.5px; font-weight: 700; fill: #6b6148; }
.mono-fn-name.corner { font-size: 14px; font-weight: 800; fill: #6b5f42; }
.mono-start-arrow { fill: none; stroke: #bf3f2c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.mono-price-pill { fill: rgba(92,74,42,.05); stroke: rgba(92,74,42,.16); stroke-width: 1; }
.mono-tile { cursor: pointer; }
.mono-tile:hover .mono-cell { fill: #fff6da; stroke-width: 3; }
.mono-group-edge { stroke: rgba(60,48,20,.32); stroke-width: 1.6; }
.mono-name { font-size: 13.5px; font-weight: 800; fill: #3d3425; }
.mono-name.owned { fill: #2e2718; paint-order: stroke; stroke: rgba(255,253,244,.92); stroke-width: 3px; }
.mono-price { font-size: 12px; font-weight: 800; fill: #6b6148; }
.mono-icon { font-size: 26px; }
.mono-lv-bg { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1.5px 1.5px rgba(60,48,20,.3)); }
/* 等级图形：小房子 / 酒店（白底描边，画在业主色药丸上） */
.mono-house-body { fill: #fff; stroke: rgba(43,51,80,.42); stroke-width: 1; }
.mono-house-door { fill: rgba(43,51,80,.5); }
.mono-own-dot { fill: #fff; stroke: rgba(43,51,80,.35); stroke-width: 1.2; }
.mono-commercial-bg { fill: rgba(255,255,255,.94); stroke: rgba(43,51,80,.35); stroke-width: 1; }
.mono-commercial-icon { fill: #2b3350; font-size: 11px; font-weight: 900; }
.mono-commercial-level { fill: #2b3350; font-size: 11px; font-weight: 900; }
/* 恶犬 / 神明 / 地雷 / 路障：白底圆片 + emoji 图标 */
.mono-obstacle circle { fill: rgba(255,253,246,.96); stroke-width: 2.2; filter: drop-shadow(0 2.5px 2.5px rgba(60,48,20,.35)); }
.mono-obstacle text { font-size: 14px; }
.mono-obstacle.dog circle { stroke: #a24e3c; }
.mono-obstacle.roadblock circle { stroke: #d9930d; }
.mono-obstacle.mine circle { stroke: #5c5040; }
.mono-obstacle.god circle { stroke: #8e44ad; }
.mono-obstacle.god.good circle { stroke: #c9a227; fill: #fff9e8; }
.mono-obstacle.god.bad circle { stroke: #6b5b95; fill: #f3effc; }
/* 同色组悬停联动：两块地一起亮金边 */
.mono-cell.group-hot { stroke: var(--gold, #d9930d); stroke-width: 3.6; }
.mono-lv-g.pop {
  animation: ownerPop .77s cubic-bezier(.3, 1.4, .4, 1);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes ownerPop { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
.mono-token { transition-property: transform; transition-timing-function: cubic-bezier(.32, .8, .34, 1.06); }
.mono-turn-arrow-pos {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.32, .8, .34, 1.06);
  pointer-events: none;
}
.mono-turn-arrow-bob {
  animation: monoArrowBob 1.15s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.mono-turn-arrow-shape {
  fill: var(--arrow-color, #e4536b);
  stroke: rgba(43,51,80,.5);
  stroke-width: 4.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 3px rgba(43,51,80,.3));
}
.mono-turn-arrow-shine {
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 4;
  stroke-linecap: round;
}
@keyframes monoArrowBob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}
.mono-token circle {
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 2.5px 2px rgba(43,51,80,.3));
}
.mono-token-shine { fill: rgba(255,255,255,.42); pointer-events: none; }
.mono-token-txt { font-size: 13.5px; font-weight: 900; fill: #fff; pointer-events: none; }
.mono-token.dead { opacity: .5; filter: grayscale(1); }
/* 飞行金币（付租金） */
.mono-coin { pointer-events: none; }
.mono-coin-disk { fill: #ffd166; stroke: #b8860b; stroke-width: 1.6; filter: drop-shadow(0 2px 2px rgba(43,51,80,.4)); }
.mono-coin-txt { font-size: 12px; font-weight: 900; fill: #7a5800; pointer-events: none; }
.mono-token.active circle { stroke: var(--gold); animation: tokenPulse 1.4s ease-in-out infinite; }
@keyframes tokenPulse {
  0%, 100% { stroke-width: 3.5; filter: drop-shadow(0 0 3px rgba(242, 179, 42, .8)); }
  50% { stroke-width: 6; filter: drop-shadow(0 0 10px rgba(242, 179, 42, 1)); }
}
.mono-token.cheer circle {
  animation: cheerK .77s ease;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes cheerK { 35% { transform: scale(1.45) translateY(-4px); } }
.tile-flash { opacity: 0; animation: tileFlashK 1s ease-out; pointer-events: none; }
@keyframes tileFlashK { 0% { opacity: .75; } 100% { opacity: 0; } }

/* tile info card */
#tile-info {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 10;
  width: min(280px, 60%);
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(240,243,252,.97));
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(43,51,80,.2);
  animation: modalIn .22s cubic-bezier(.2, .9, .3, 1.2);
  font-size: 13px;
  backdrop-filter: blur(14px);
}
#tile-info .ti-head {
  background: var(--gc, #3f7fe0);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  padding: 8px 12px;
  letter-spacing: 1px;
}
#tile-info .ti-body { padding: 9px 12px 11px; color: var(--ink-dim); }
#tile-info .ti-row { margin-bottom: 5px; }
#tile-info .ti-mono { font-style: normal; color: var(--gold); font-weight: 800; font-size: 12px; }
#tile-info .ti-rents { display: flex; gap: 5px; flex-wrap: wrap; }
#tile-info .ti-lv {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(43,51,80,.05);
  color: var(--ink-dim);
  border: 1px solid transparent;
}
#tile-info .ti-lv.cur {
  background: rgba(242,179,42,.14);
  color: var(--gold);
  border-color: rgba(217,147,13,.4);
}
#tile-info .ti-sell {
  margin-top: 9px;
  width: 100%;
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 800;
}
.mono-cash { font-weight: 900; font-size: 13.5px; color: #157a52; white-space: nowrap; }
.mono-cash.bankrupt { color: #c93b54; text-decoration: line-through; }

/* 大富翁载具 / 多骰 / 道具操作带 */
/* ===== 大富翁玩家操作台（棋盘下沿悬浮玻璃条：载具/骰数/状态/道具/股市） ===== */
#mono-tools {
  position: relative;
  width: 100%;
  margin-top: 10px;
  flex: 0 0 auto;
  z-index: 8;
}
#mono-tools[hidden] { display: none; }
/* 三段式驾驶舱：内容自适应宽度、整体居中，段间虚线分隔，无空腹 */
.mono-hud-bar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  gap: 0;
  min-height: 58px;
  padding: 7px 6px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255,255,255,.93), rgba(244,246,252,.9));
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 32px rgba(43,51,80,.16);
  backdrop-filter: blur(14px);
}
.hud-seg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 13px;
  min-width: 0;
}
.hud-seg + .hud-seg { border-left: 1px dashed rgba(43,51,80,.16); }
.seg-status:not(:has(.mono-status)) { display: none; } /* 无状态时整段隐藏，不留空缝 */
.hud-items-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--muted);
  writing-mode: vertical-rl;
  line-height: 1;
  user-select: none;
}
.mono-vehicle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
/* 载具徽章：座位色描边圆牌，像棋子一样属于"我" */
#mono-vehicle-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), transparent 58%),
    color-mix(in srgb, var(--sc, #2f7d61) 16%, #ffffff);
  border: 2.5px solid var(--sc, #2f7d61);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--sc, #2f7d61) 32%, transparent);
}
.mono-vehicle .veh-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
#mono-vehicle-name { font-size: 13.5px; font-weight: 900; color: var(--ink); white-space: nowrap; }
#mono-vehicle-sub { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
#mono-tools.spectate #mono-dice-count,
#mono-tools.spectate #mono-item-list { display: none; }
.mono-segments { display: inline-flex; align-items: center; gap: 0; }
.mono-segments button {
  width: 31px;
  height: 29px;
  min-width: 31px;
  padding: 0;
  border-radius: 0;
  border-right-width: 0;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}
.mono-segments button:first-child { border-radius: 8px 0 0 8px; }
.mono-segments button:last-child { border-radius: 0 8px 8px 0; border-right-width: 1px; }
.mono-segments button.selected {
  color: #fff;
  background: #2f7d61;
  border-color: #2f7d61;
}
/* 骰数选择：按钮里画对应颗数的迷你骰子 */
.dice-picker button {
  width: auto;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.mini-die {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(160deg, #fff, #e9edf8);
  border: 1px solid rgba(43,51,80,.4);
  position: relative;
  box-shadow: 0 1px 1px rgba(43,51,80,.18);
}
.mini-die::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5px;
  height: 3.5px;
  margin: -1.75px 0 0 -1.75px;
  border-radius: 50%;
  background: #e4536b;
}
.dice-picker button.selected .mini-die { border-color: rgba(255,255,255,.9); box-shadow: none; }
/* 锁定档位：不再泛白装坏，而是显示 🔒 与解锁提示（升级载具即可点亮） */
.dice-picker button.locked {
  position: relative;
  opacity: 1;
  background: repeating-linear-gradient(135deg, rgba(43,51,80,.045) 0 5px, transparent 5px 10px), #f3f2ec;
  cursor: help;
}
.dice-picker button.locked .mini-die { opacity: .38; filter: grayscale(1); }
.dice-picker button.locked .mini-die::after { background: #9a9484; }
.dice-picker button.locked::after {
  content: '🔒';
  position: absolute;
  right: 1px;
  top: -1px;
  font-size: 10px;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.8));
}
.dice-picker button:disabled:not(.locked) .mini-die { opacity: .45; }
/* 空卡槽：与道具卡同形的虚线卡位，斜纹卡背暗示"这里会有牌" */
.mono-item-ghost {
  width: 34px;
  height: 44px;
  border-radius: 8px;
  border: 1.5px dashed rgba(47,125,97,.32);
  background:
    repeating-linear-gradient(135deg, rgba(47,125,97,.05) 0 4px, transparent 4px 8px);
  position: relative;
  flex: 0 0 34px;
}
.mono-item-ghost::after {
  content: '＋';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(47,125,97,.3);
  font-size: 14px;
  font-weight: 900;
}
.mono-status-list { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; max-width: 240px; }
.mono-status-list:empty { display: none; }
.mono-status {
  padding: 3px 7px;
  border: 1px solid rgba(43,51,80,.15);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #5d657b;
  background: rgba(255,255,255,.7);
}
.mono-status.good { color: #157a52; border-color: rgba(31,168,112,.35); }
.mono-status.bad { color: #c23b52; border-color: rgba(228,83,107,.35); }
.mono-item-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; align-items: center; }
/* 道具位＝迷你手牌：竖版小卡片，悬停抬升微倾，像捏着一手牌 */
.mono-item-btn {
  position: relative;
  width: 34px;
  height: 44px;
  min-width: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  background:
    linear-gradient(180deg, rgba(47,125,97,.14), transparent 44%),
    linear-gradient(180deg, #ffffff, #f2f0e6);
  border: 1px solid rgba(47,125,97,.35);
  box-shadow: 0 2px 5px rgba(43,51,80,.14);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.mono-item-btn::before {
  /* 卡面顶部细带，强化"卡牌"轮廓 */
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 4px;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(47,125,97,.3);
}
.mono-item-btn:not(:disabled):hover {
  transform: translateY(-5px) rotate(-3deg);
  box-shadow: 0 8px 14px rgba(43,51,80,.22);
}
.mono-item-btn.selected {
  border-color: #d9930d;
  background:
    linear-gradient(180deg, rgba(242,179,42,.28), transparent 46%),
    linear-gradient(180deg, #fffdf4, #f8ecce);
  color: #a06b00;
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(217,147,13,.3);
}
.mono-item-btn.selected::before { background: rgba(217,147,13,.55); }
.mono-item-btn .count {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #2b3350;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}
/* 操作台上方弹层：道具参数 */
.mono-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(430px, 100%);
  padding: 11px 12px;
  border-radius: 15px;
  background: linear-gradient(165deg, rgba(255,255,255,.97), rgba(243,246,252,.96));
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 44px rgba(43,51,80,.22);
  backdrop-filter: blur(14px);
  animation: modalIn .22s cubic-bezier(.2, .9, .3, 1.2);
  z-index: 9;
}
.mono-pop[hidden] { display: none; }

/* ===== 道具使用卡：卡牌式面板（入场翻入 / 打出上飘 / 失败抖动） ===== */
#mono-item-config {
  display: block;
  width: min(330px, 100%);
  padding: 0;
  overflow: hidden;
  animation: none; /* 动画由 .in/.played/.out 状态类驱动 */
  transform-origin: 80% 100%;
}
#mono-item-config[hidden] { display: none; }
#mono-item-config.in { animation: itemCardIn .34s cubic-bezier(.24, 1.3, .4, 1); }
#mono-item-config.out { animation: itemCardOut .15s ease-in forwards; }
#mono-item-config.played { animation: itemCardPlay .38s cubic-bezier(.4, 0, .8, .4) forwards; pointer-events: none; }
#mono-item-config.shake { animation: itemCardShake .4s ease; }
@keyframes itemCardIn {
  0% { opacity: 0; transform: translateY(26px) rotate(4deg) scale(.82); }
  60% { opacity: 1; transform: translateY(-4px) rotate(-1deg) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes itemCardOut {
  to { opacity: 0; transform: translateY(14px) scale(.9); }
}
@keyframes itemCardPlay {
  25% { opacity: 1; transform: translateY(-14px) rotate(-2.5deg) scale(1.05); }
  100% { opacity: 0; transform: translateY(-74px) rotate(6deg) scale(.6); }
}
@keyframes itemCardShake {
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
  90% { transform: translateX(2px); }
}
/* 卡头：大印章 + 名称说明 + 关闭 */
.ic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 9px;
  background:
    radial-gradient(140px 60px at 14% 0%, rgba(47,125,97,.14), transparent 70%),
    linear-gradient(165deg, rgba(47,125,97,.1), rgba(47,125,97,.02));
  border-bottom: 1px dashed rgba(47,125,97,.28);
}
.ic-stamp {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  background: linear-gradient(150deg, #3c9573, #256a4e);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(37,106,78,.35), inset 0 1px 0 rgba(255,255,255,.28);
  animation: icStampIn .42s cubic-bezier(.3, 1.6, .45, 1) .08s backwards;
}
@keyframes icStampIn { from { transform: scale(.3) rotate(-16deg); opacity: 0; } }
.ic-title { flex: 1; min-width: 0; line-height: 1.3; }
.ic-title b { display: block; font-size: 14.5px; color: var(--ink); }
.ic-title small { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.4; margin-top: 1px; }
.ic-close { flex: 0 0 auto; opacity: .65; }
.ic-close:hover { opacity: 1; }
/* 参数行：标签 + 控件（逐行滑入） */
.ic-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 0;
  animation: icRowIn .3s ease .12s backwards;
}
.ic-row[hidden] { display: none; }
@keyframes icRowIn { from { opacity: 0; transform: translateX(-8px); } }
.ic-label {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--muted);
  writing-mode: horizontal-tb;
}
.ic-row select { flex: 1; min-width: 0; height: 32px; padding: 3px 8px; font-size: 11.5px; }
/* 目标玩家芯片：色点 + 名字，点选即中 */
.ic-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.ic-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px 0 4px;
  border-radius: 15px;
  font-size: 11.5px;
  font-weight: 800;
  box-shadow: none;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.ic-chip i {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--pc, #888);
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
}
.ic-chip span { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-chip.selected {
  border-color: var(--pc, #2f7d61);
  background: color-mix(in srgb, var(--pc, #2f7d61) 14%, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--pc, #2f7d61) 30%, transparent);
}
/* 遥控骰子：六个骰面符号 */
.ic-dice { flex: 1; display: flex; gap: 4px; }
.ic-die {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  border-radius: 8px;
  box-shadow: none;
  color: var(--ink-dim);
  transition: transform .14s ease, color .14s ease, border-color .14s ease, background .14s ease;
}
.ic-die:hover { transform: translateY(-2px) rotate(-6deg); }
.ic-die.selected {
  color: #fff;
  background: #2f7d61;
  border-color: #2f7d61;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 5px 12px rgba(47,125,97,.4);
}
/* 使用按钮：通栏，悬停微光 */
.ic-use {
  display: block;
  width: calc(100% - 24px);
  margin: 11px 12px 12px;
  height: 36px;
  font-size: 13px;
  letter-spacing: 6px;
  text-indent: 6px;
}
.ic-use:not(:disabled):hover { filter: brightness(1.08); }
/* 打出的道具图标：从道具架上收走 */
.mono-item-btn.spent { animation: itemSpent .38s ease forwards; pointer-events: none; }
@keyframes itemSpent {
  40% { transform: translateY(-8px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-26px) scale(.4); opacity: 0; }
}
.mono-icon-btn { width: 31px; height: 31px; min-width: 31px; padding: 0; font-size: 18px; border-radius: 8px; }
.badge.mono-state { border-radius: 6px; padding: 2px 5px; }

/* mono action panel */
#mono-actions {
  position: absolute;
  left: 50%;
  bottom: 19%;
  transform: translateX(-50%);
  z-index: 9;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(240,243,252,.97));
  border: 1px solid var(--line-strong);
  border-radius: 19px;
  padding: 14px 18px;
  box-shadow: 0 20px 44px rgba(43,51,80,.2);
  text-align: center;
  animation: modalIn .25s cubic-bezier(.2, .9, .3, 1.2);
  width: min(460px, calc(100% - 28px));
  max-height: 48%;
  overflow-y: auto;
  backdrop-filter: blur(16px);
}
#mono-offer { font-size: 15px; font-weight: 800; margin-bottom: 10px; color: var(--ink); }
.mono-offer-sub { font-size: 12.5px; font-weight: 700; color: #6b7590; margin-top: 4px; }
.mono-btn-row { display: flex; gap: 10px; justify-content: center; }
#mono-sell-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 11px;
}
#mono-sell-list[hidden] { display: none; }
#mono-sell-list button { padding: 8px 10px; font-size: 12.5px; line-height: 1.25; }
#mono-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 11px; }
#mono-choice-grid[hidden] { display: none; }
.mono-choice-card { min-width: 0; min-height: 54px; padding: 7px 6px; border-radius: 7px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.mono-choice-card b { font-size: 12px; }
.mono-choice-card span { color: var(--ink-dim); font-size: 10.5px; line-height: 1.3; overflow-wrap: anywhere; }
.mono-choice-card.shop-item:not(:disabled):hover { border-color: #157a52; color: #157a52; }
@media (max-width: 560px) { #mono-sell-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { #mono-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 机会卡翻牌（棋盘中央弹出 → 翻面 → 收走） */
#chance-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 192px;
  height: 252px;
  margin: -126px 0 0 -96px;
  perspective: 900px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: scale(.5) translateY(36px);
  transition: opacity .25s ease, transform .32s cubic-bezier(.34, 1.5, .5, 1);
}
#chance-card.in { opacity: 1; transform: scale(1) translateY(0); }
#chance-card.out { opacity: 0; transform: scale(.72) translateY(-44px); transition: opacity .26s ease, transform .26s ease-in; }
#chance-card .cc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4, 1.35, .5, 1);
}
#chance-card.flip .cc-inner { transform: rotateY(180deg); }
#chance-card .cc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 15px;
  box-shadow: 0 16px 38px rgba(20, 28, 52, .42);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#chance-card .cc-back {
  background:
    radial-gradient(120px 120px at 50% 32%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(150deg, #9b59c7, #5d2c86);
  border: 3px solid rgba(255, 255, 255, .6);
}
#chance-card .cc-back .cc-mark { font-size: 46px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
#chance-card .cc-back .cc-word { font-size: 21px; font-weight: 900; letter-spacing: 7px; text-indent: 7px; color: #fff; }
#chance-card .cc-front {
  background: linear-gradient(165deg, #fffdf6, #f2ead4);
  border: 3px solid var(--cc, #8e44ad);
  transform: rotateY(180deg);
  padding: 18px 16px;
}
#chance-card .cc-front .cc-title { font-size: 13px; font-weight: 900; letter-spacing: 2.5px; color: var(--cc, #8e44ad); }
#chance-card .cc-front .cc-text { font-size: 15.5px; font-weight: 800; color: #2b3350; text-align: center; line-height: 1.55; }

/* chat bubbles */
#bubble-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; }
.bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .96);
  border: 1.5px solid var(--bc, #888);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(43,51,80,.18);
  max-width: 190px;
  animation: bubbleK 3.64s ease forwards;
  backdrop-filter: blur(8px);
}
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--bc, #888);
}
@keyframes bubbleK {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); }
  8% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  13% { transform: translate(-50%, -50%) scale(1); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -66%) scale(.96); }
}

/* ---------- 3D dice（骰盘：1~3 颗随载具与选择切换） ---------- */
#dice3d {
  --size: 58px;
  --gap: 13px;
  --n: 1;
  --sc: #888;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size) * var(--n) + var(--gap) * (var(--n) - 1));
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  margin-left: calc((var(--size) * var(--n) + var(--gap) * (var(--n) - 1)) / -2);
  perspective: 560px;
  z-index: 6;
  transition: width .18s ease, margin-left .18s ease;
}
#dice3d[data-count="2"] { --n: 2; }
#dice3d[data-count="3"] { --n: 3; }
#dice3d .dice-tray {
  display: flex;
  gap: var(--gap);
  width: 100%;
  height: 100%;
}
#dice3d .die {
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);
}
#dice3d .die[hidden] { display: none; }
#dice3d .dshadow {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: -13px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43,51,80,.3), transparent);
  transform-origin: center;
}
#dice3d .tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(12deg);
}
#dice3d .cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .63s cubic-bezier(.2, .75, .3, 1.2);
}
#dice3d .cube.rolling { animation: tumble .63s linear infinite; transition: none; }
@keyframes tumble {
  0% { transform: rotateX(0) rotateY(0) scale(1); }
  50% { transform: rotateX(180deg) rotateY(360deg) scale(1.18); }
  100% { transform: rotateX(360deg) rotateY(720deg) scale(1); }
}
/* 每颗骰子独立起跳，相位错开更自然 */
#dice3d .die:has(.cube.rolling) { animation: diceToss .63s ease-in-out infinite; }
#dice3d .die:nth-child(2):has(.cube.rolling) { animation-delay: .09s; }
#dice3d .die:nth-child(3):has(.cube.rolling) { animation-delay: .17s; }
#dice3d .die:nth-child(2) .cube.rolling { animation-delay: .09s; }
#dice3d .die:nth-child(3) .cube.rolling { animation-delay: .17s; }
@keyframes diceToss { 50% { transform: translateY(-11px); } }
#dice3d .die:has(.cube.rolling) .dshadow { animation: shadowToss .63s ease-in-out infinite; }
@keyframes shadowToss { 50% { transform: scale(.55); opacity: .5; } }
#dice3d .cube[data-face="1"] { transform: rotateX(0) rotateY(0); }
#dice3d .cube[data-face="6"] { transform: rotateY(180deg); }
#dice3d .cube[data-face="3"] { transform: rotateY(-90deg); }
#dice3d .cube[data-face="4"] { transform: rotateY(90deg); }
#dice3d .cube[data-face="2"] { transform: rotateX(-90deg); }
#dice3d .cube[data-face="5"] { transform: rotateX(90deg); }
#dice3d .face {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 24%, #ffffff, #f4f6fc 52%, #e6ebf8);
  border: 1.5px solid rgba(43,51,80,.25);
  border-radius: 15px;
  box-shadow: inset 0 0 10px rgba(43,51,80,.06);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 8px;
}
#dice3d .face::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(255,255,255,.95), rgba(255,255,255,0) 44%);
  pointer-events: none;
}
#dice3d .face[data-n="1"] { transform: translateZ(calc(var(--size) / 2)); }
#dice3d .face[data-n="6"] { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
#dice3d .face[data-n="3"] { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
#dice3d .face[data-n="4"] { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
#dice3d .face[data-n="2"] { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
#dice3d .face[data-n="5"] { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
#dice3d .pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  place-self: center;
  background: radial-gradient(circle at 32% 28%, #6b7590, #2b3350 75%);
  box-shadow: inset 0 1.5px 2.5px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.8);
}
#dice3d .face[data-n="1"] .pip {
  width: 17px;
  height: 17px;
  background: radial-gradient(circle at 32% 28%, #ff8a96, #e4536b 74%);
}
#dice3d .face[data-n="4"] .pip {
  background: radial-gradient(circle at 32% 28%, #ff8a96, #e4536b 74%);
}
#dice3d::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 19px;
  border: 3px solid var(--sc);
  opacity: .9;
  pointer-events: none;
  box-shadow: 0 0 16px -3px var(--sc), inset 0 0 10px -4px var(--sc);
  transition: border-color .3s, box-shadow .3s;
}
#dice3d.can-roll { cursor: pointer; animation: diceBob 1.12s ease-in-out infinite; }
#dice3d.can-roll::before { animation: ringPulse 1.12s ease-in-out infinite; }
@keyframes diceBob { 50% { transform: translateY(-5px); } }
@keyframes ringPulse {
  50% {
    inset: -14px;
    opacity: 1;
    box-shadow: 0 0 20px -1px var(--sc), inset 0 0 10px -4px var(--sc);
    border-radius: 23px;
  }
}
#dice3d.can-roll::after {
  content: '点我掷骰！';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 19px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255,255,255,.95);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9px;
  letter-spacing: 1px;
  border: 1px solid rgba(217,147,13,.35);
}
.dice-result {
  position: absolute;
  left: 50%;
  top: calc(100% + 22px);
  transform: translateX(-50%);
  min-width: max-content;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(43,51,80,.2);
  color: #2b3350;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(43,51,80,.14);
  pointer-events: none;
}
.dice-result[hidden] { display: none; }

/* ---------- banner ---------- */
#banner {
  --bc: var(--red);
  position: absolute;
  left: 50%;
  top: 17%; /* 顶行地块与中央牌匾之间，避免压住“大富翁”牌匾 */
  z-index: 7;
  transform: translate(-50%, -50%);
  background: var(--bc);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1.5px;
  max-width: 94%;
  text-align: center;
  padding: 12px 26px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 17px;
  box-shadow: 0 16px 40px rgba(43,51,80,.25);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
#banner.show { animation: bannerK 2.24s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes bannerK {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-5deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(2deg); }
  26% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.96); }
}

/* ---------- modal / toast ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(244, 246, 252, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.modal-card {
  width: min(400px, 92vw);
  padding: 26px;
  text-align: center;
  animation: modalIn .3s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes modalIn { from { transform: scale(.7); opacity: 0; } }
.modal-card h2 { margin-bottom: 14px; font-weight: 800; }
.modal-card ol {
  text-align: left;
  margin: 0 0 18px 26px;
  line-height: 2.2;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-dim);
}
.modal-card ol li::marker { color: var(--gold); font-weight: 800; }
.modal-btns { display: flex; flex-direction: column; gap: 10px; }
.mono-setup-card { width: min(440px, 92vw); }
.mono-setup-fields { text-align: left; margin: 4px 0 14px; }
.setup-input-wrap { position: relative; }
.setup-cur {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 900;
  color: var(--gold);
  pointer-events: none;
}
.mono-setup-fields input {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 金额快捷预设：一排小胶囊，点击即填入 */
.setup-presets { display: flex; gap: 6px; margin: 7px 0 3px; }
.setup-presets button {
  flex: 1;
  padding: 5px 4px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 9px;
  box-shadow: none;
  color: var(--ink-dim);
  transition: transform .13s ease, background .13s ease, border-color .13s ease, color .13s ease;
}
.setup-presets button:hover { transform: translateY(-1px); }
.setup-presets button.selected {
  background: linear-gradient(135deg, #f5c04a, #dd9a14);
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 1px rgba(120,74,0,.35);
}
.mono-setup-card .sub { margin-bottom: 8px; }
#toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background: rgba(255, 255, 255, .96);
  color: var(--gold);
  padding: 11px 20px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(217,147,13,.35);
  box-shadow: 0 14px 34px rgba(43,51,80,.2);
  animation: toastIn .25s ease;
  backdrop-filter: blur(12px);
}
@keyframes toastIn { from { transform: translate(-50%, -12px); opacity: 0; } }

/* ---------- responsive ---------- */
@media (min-width: 941px) {
  #view-game.monopoly-view {
    padding: 6px;
    align-items: center;
  }
  .monopoly-view .game-wrap {
    --mono-gap: clamp(10px, .8vw, 16px);
    --mono-side: clamp(300px, 21vw, 360px);
    width: 100%;
    max-width: none;
    height: calc(100vh - 12px);
    gap: var(--mono-gap);
    align-items: center;
    justify-content: center;
  }
  .monopoly-view .board-pane {
    /* 版图 7:5 宽版 + 底部操作台：高度吃满视口，宽度用掉侧栏外的全部横向空间 */
    --mono-hud: 74px;
    --mono-bh: min(calc(100vh - var(--mono-hud) - 58px), calc((100vw - var(--mono-side) - var(--mono-gap) - 26px) * 5 / 7));
    --mono-bw: calc(var(--mono-bh) * 7 / 5);
    flex: 0 0 var(--mono-bw);
    width: var(--mono-bw);
    height: auto;
    min-width: 0;
    min-height: 0;
    margin-top: 14px;
    flex-direction: column;
    justify-content: center;
  }
  .monopoly-view #board {
    width: var(--mono-bw);
    height: var(--mono-bh);
    max-width: none;
    flex: 0 0 auto;
  }
  .monopoly-view #dice3d { top: calc(50% - (var(--mono-hud) + 10px) / 2); }
  .monopoly-view #chance-card { top: calc(50% - (var(--mono-hud) + 10px) / 2); }
  .monopoly-view #mono-actions { bottom: calc(var(--mono-hud) + 13%); }
  .monopoly-view .side-pane {
    flex: 0 0 var(--mono-side);
    width: var(--mono-side);
    min-width: 0;
    max-width: none;
    height: 100%;
    margin-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ---------- xiangqi board ---------- */
.xq-board-bg { fill: url(#xqWood); }
.xq-grid { stroke: rgba(101, 67, 33, .85); stroke-width: 2; fill: none; }
.xq-river-txt {
  font-size: 30px; font-weight: 800; fill: rgba(101, 67, 33, .45);
  letter-spacing: 20px; font-family: var(--font-serif);
}
.xq-palace { stroke: rgba(101, 67, 33, .8); stroke-width: 2; fill: none; }
.xq-piece { cursor: pointer; }
.xq-piece .xq-disk {
  stroke-width: 2.4;
  filter: drop-shadow(0 3px 3px rgba(43,51,80,.2));
}
.xq-piece.red .xq-disk { fill: url(#xqDiskRed); stroke: #c23b2a; }
.xq-piece.black .xq-disk { fill: url(#xqDiskBlack); stroke: #d8b97e; }
.xq-piece.red .xq-ring {
  fill: none;
  stroke: rgba(194, 59, 42, .45);
  stroke-width: 1.4;
}
.xq-piece.black .xq-ring {
  fill: none;
  stroke: rgba(232, 196, 140, .5);
  stroke-width: 1.4;
}
.xq-piece.selected .xq-ring { stroke: rgba(217, 147, 13, .8); }
.xq-coord {
  font-size: 13px;
  font-weight: 700;
  fill: rgba(101, 67, 33, .5);
  font-family: var(--font-serif);
}
.xq-piece.red .xq-label { fill: #c23b2a; }
/* 黑子刻字改暖金：墨玉底上鎏金字，远看也认得清 */
.xq-piece.black .xq-label { fill: #f2ddb0; }
.xq-label {
  font-size: 23px; font-weight: 900;
  font-family: var(--font-serif);
  pointer-events: none;
  user-select: none;
}
.xq-piece.selected .xq-disk {
  stroke: #d9930d;
  stroke-width: 4;
  filter: drop-shadow(0 0 14px rgba(217, 147, 13, .7));
}
.xq-piece.movable .xq-disk { animation: xqPulse 1.2s ease-in-out infinite; }
.xq-piece.xq-moving {
  filter: drop-shadow(0 12px 14px rgba(43,51,80,.3));
}
.xq-piece.xq-moving .xq-disk {
  stroke: #d9930d;
  stroke-width: 3.5;
}
.xq-piece.xq-victim .xq-disk {
  stroke: #e4536b;
  stroke-width: 4;
  filter: drop-shadow(0 0 10px rgba(228, 83, 107, .6));
}
.xq-ghost {
  opacity: .4;
  pointer-events: none;
  filter: grayscale(.2);
}
.xq-ghost .xq-disk { opacity: .7; }
@keyframes xqPulse {
  50% { filter: drop-shadow(0 0 8px rgba(217, 147, 13, .7)); }
}
.xq-hit { cursor: pointer; }
.xq-dot {
  fill: #1fa870;
  stroke: #fff;
  stroke-width: 2;
  opacity: .95;
  filter: drop-shadow(0 0 6px rgba(31, 168, 112, .6));
  pointer-events: none;
}
.xq-dot-ring {
  fill: rgba(31, 168, 112, .14);
  stroke: rgba(31, 168, 112, .7);
  stroke-width: 2;
  pointer-events: none;
  animation: xqTargetPulse 1.1s ease-in-out infinite;
}
.xq-capture-ring {
  fill: rgba(228, 83, 107, .12);
  stroke: #e4536b;
  stroke-width: 3.5;
  opacity: .95;
  pointer-events: none;
  animation: xqTargetPulse 1.1s ease-in-out infinite;
}
.xq-capture-x {
  fill: none;
  stroke: #e4536b;
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}
@keyframes xqTargetPulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
.xq-last {
  fill: rgba(46, 110, 208, .16);
  stroke: rgba(36, 96, 190, .95); /* 木纹底上加深加粗，最后一步不用找 */
  stroke-width: 3.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}
.xq-check-king .xq-disk {
  stroke: #e4536b !important;
  animation: xqPulse .8s ease-in-out infinite;
}
.xq-check-flash .xq-disk {
  animation: xqCheckFlash .7s ease-in-out 2 !important;
}
@keyframes xqCheckFlash {
  0%, 100% { stroke: #e4536b; filter: drop-shadow(0 0 4px rgba(228,83,107,.4)); }
  50% { stroke: #fff; filter: drop-shadow(0 0 16px rgba(228,83,107,.9)); }
}
.xq-impact-ring {
  animation: xqImpact 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes xqImpact {
  0% { r: 8; opacity: .95; stroke-width: 6; }
  100% { r: 48; opacity: 0; stroke-width: 1; }
}
.xq-check-wave {
  animation: xqCheckWave 0.85s ease-out forwards;
  pointer-events: none;
}
@keyframes xqCheckWave {
  0% { r: 14; opacity: .9; stroke-width: 5; }
  100% { r: 90; opacity: 0; stroke-width: 1; }
}
.xq-trail {
  animation: xqTrailFade .4s ease-out forwards;
  pointer-events: none;
}
@keyframes xqTrailFade {
  to { opacity: 0; r: 1; }
}
#board.xq-shake {
  animation: xqBoardShake .38s ease-in-out;
}
@keyframes xqBoardShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(4px, -2px) rotate(.4deg); }
  40% { transform: translate(-4px, 2px) rotate(-.4deg); }
  60% { transform: translate(3px, 1px); }
  80% { transform: translate(-2px, -1px); }
}

/* ---------- gomoku board ---------- */
.gk-board-bg { fill: url(#gkWood); }
.gk-board-frame {
  fill: none;
  stroke: rgba(101, 67, 33, .6);
  stroke-width: 4;
}
.gk-grid {
  stroke: rgba(80, 52, 26, .75);
  stroke-width: 1.4;
  fill: none;
  opacity: .9;
}
.gk-star { fill: #4a2f16; }
.gk-coord {
  font-size: 12px;
  font-weight: 800;
  fill: rgba(66, 42, 20, .78); /* 木纹底上加深，扫一眼能对上坐标 */
  font-family: var(--font);
}
.gk-hover {
  fill: rgba(255, 255, 255, .35);
  stroke: rgba(217, 147, 13, .6);
  stroke-width: 2;
  pointer-events: none;
}
.gk-stone { pointer-events: none; }
.gk-stone .gk-disk {
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 3px rgba(43,51,80,.25));
}
.gk-stone.black .gk-disk {
  fill: url(#gkBlackGrad);
  stroke: #1a1a1a;
}
.gk-stone.white .gk-disk {
  fill: url(#gkWhiteGrad);
  stroke: #b3a58e;
}
.gk-stone.gk-placing .gk-disk {
  filter: drop-shadow(0 10px 12px rgba(43,51,80,.3));
}
.gk-last-ring {
  fill: none;
  stroke: #e4536b;
  stroke-width: 2.5;
  pointer-events: none;
  animation: gkLastPulse 1.2s ease-in-out infinite;
}
@keyframes gkLastPulse {
  50% { stroke-width: 3.5; opacity: .75; }
}
.gk-win-line {
  fill: none;
  stroke: #d9930d;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(217, 147, 13, .7));
  pointer-events: none;
  animation: gkWinGlow 1s ease-in-out infinite;
}
@keyframes gkWinGlow {
  50% { stroke: #fff; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .9)); }
}
.gk-win-stone .gk-disk {
  stroke: #d9930d !important;
  stroke-width: 3;
  filter: drop-shadow(0 0 12px rgba(217, 147, 13, .9));
}
.gk-ripple {
  fill: none;
  stroke: rgba(217, 147, 13, .7);
  stroke-width: 3;
  pointer-events: none;
  animation: gkRipple .7s ease-out forwards;
}
@keyframes gkRipple {
  0% { r: 6; opacity: .9; }
  100% { r: 36; opacity: 0; }
}
.gk-cell-hit {
  fill: transparent;
  cursor: pointer;
}
.gk-cell-hit:hover {
  fill: rgba(255, 255, 255, .12);
}
#board.gk-shake {
  animation: xqBoardShake .4s ease-in-out;
}
.xq-ghost {
  opacity: .35;
  pointer-events: none;
}

/* ---------- xiangqi / gomoku 棋盘铺满修复（消除右侧空白） ---------- */
@media (min-width: 941px) {
  #view-game:not(.monopoly-view) .game-wrap {
    --b-gap: clamp(10px, .8vw, 16px);
    --b-side: clamp(330px, 22vw, 390px);
    width: 100%;
    max-width: none;
    height: calc(100vh - 12px);
    gap: var(--b-gap);
    align-items: center;
    justify-content: center;
    padding: 6px;
  }
  #view-game:not(.monopoly-view) .board-pane {
    --b-size: min(calc(100vh - 24px), calc(100vw - 12px - var(--b-side) - var(--b-gap)));
    flex: 0 0 var(--b-size);
    width: var(--b-size);
    height: var(--b-size);
    min-width: 0;
    min-height: 0;
  }
  #view-game:not(.monopoly-view) #board {
    width: 100%;
    height: 100%;
    max-width: none;
  }
  #view-game:not(.monopoly-view) .side-pane {
    flex: 0 0 var(--b-side);
    width: var(--b-side);
    min-width: 0;
    max-width: none;
    height: 100%;
    margin-left: 0;
  }
}

@media (max-width: 940px) {
  .view { padding: 10px; }
  .lobby-card, .room-card { padding: 22px 18px 18px; }
  .lobby-home { padding: 28px 18px 18px; }
  .brand-mark { width: 56px; height: 56px; border-radius: 17px; }
  .brand-dice { font-size: 26px; }
  .brand-title { font-size: 34px; letter-spacing: 6px; margin-left: 6px; }
  .create-modal-card { padding: 18px 14px 14px; }
  .create-game-pick { gap: 8px; }
  .create-game-pick .pick { padding: 14px 6px 12px; }
  .create-game-pick .pick .pick-art { width: 52px; height: 52px; }
  .create-game-pick .pick b { font-size: 13px; letter-spacing: 1px; }
  .create-game-pick .pick small { font-size: 10px; }
  .lobby-or { font-size: 11px; }
  .game-pick { gap: 8px; }
  .pick { flex: 1 1 30%; padding: 10px 4px 8px; }
  .pick .pick-art { width: 52px; height: 52px; }
  .pick b { font-size: 13px; letter-spacing: 1px; }
  .game-wrap { flex-direction: column; height: auto; }
  .board-pane { width: 100%; min-height: 94vw; }
  #board { max-height: 96vw; }
  /* 大富翁：棋盘方形吃满宽度，操作台紧随其下（窄屏保持 1:1 版图） */
  .monopoly-view .board-pane { flex-direction: column; min-height: 0; }
  .monopoly-view #board { width: 100%; height: 96vw; max-height: none; flex: 0 0 auto; }
  .monopoly-view #dice3d { top: 48vw; }
  .monopoly-view #chance-card { top: 48vw; }
  .monopoly-view #mono-actions { bottom: 104px; }
  #mono-tools { margin-top: 8px; }
  .mono-hud-bar { min-height: 0; padding: 5px 4px; border-radius: 13px; flex-wrap: wrap; width: 100%; }
  .hud-seg { padding: 3px 9px; }
  .seg-items { flex: 1 1 100%; border-left: none !important; border-top: 1px dashed rgba(43,51,80,.14); margin-top: 3px; padding-top: 6px; }
  #mono-vehicle-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
  .mono-vehicle { padding: 3px 8px 3px 6px; }
  #mono-vehicle-icon { font-size: 20px; }
  .mono-status-list { max-width: none; }
  /* 道具带单行横滑，省出竖向空间；按钮保持可点按尺寸 */
  .mono-item-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    max-width: 100%;
    flex: 1 1 100%;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .mono-item-btn { width: 32px; height: 41px; min-width: 32px; }
  .mono-pop { right: auto; left: 50%; transform: translateX(-50%); width: min(430px, 96vw); }
  .side-pane { max-width: none; width: 100%; }
  .log, .chat-list { height: 110px; }
  .log-panel .log, .chat-panel .chat-list { min-height: 90px; }
  #dice3d { --size: 44px; --gap: 9px; }
  #banner { font-size: 20px; }
}

/* ================= UX 增强（倒计时/资产面板/日志/移动端等） ================= */

/* 决策面板倒计时条（tickTimer 驱动） */
.mono-timer {
  height: 5px;
  border-radius: 3px;
  background: rgba(43,51,80,.1);
  overflow: hidden;
  margin: -2px 0 10px;
}
.mono-timer.idle { display: none; }
#mono-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #3aa257, #ffd166);
  transition: width .25s linear;
}
.mono-timer.urgent #mono-timer-fill { background: #e4536b; }

/* 骰盘倒计时：轮到你掷骰时，骰盘下方进度条递减（适配 1~3 颗宽度） */
#dice3d .dice-ring { display: none; }
#dice3d.timing .dice-ring {
  display: block;
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -27px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sc, #ffd166) var(--pp, 100%), rgba(43,51,80,.16) 0);
  box-shadow: 0 1px 4px rgba(43,51,80,.2);
  pointer-events: none;
  opacity: .95;
}

/* 小屏悬浮回合条：侧栏折叠在下方时仍能看到轮到谁 + 剩余时间 */
#mobile-turn-strip {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  max-width: 92%;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(43,51,80,.15);
  border-left: 4px solid var(--tc, #999);
  border-radius: 11px;
  padding: 6px 12px;
  box-shadow: 0 8px 22px rgba(43,51,80,.18);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  align-items: center;
  gap: 9px;
  backdrop-filter: blur(8px);
}
#mobile-turn-strip.mine { animation: mtsPulse 1.3s ease-in-out infinite; }
@keyframes mtsPulse { 50% { box-shadow: 0 8px 26px rgba(242,179,42,.45); } }
#mobile-turn-strip .mts-bar {
  flex: 0 0 46px;
  height: 4px;
  border-radius: 2px;
  background: rgba(43,51,80,.12);
  overflow: hidden;
}
#mobile-turn-strip #mts-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tc, #999);
  transition: width .25s linear;
}
@media (max-width: 940px) {
  #mobile-turn-strip:not([hidden]) { display: flex; }
}

/* 对局记录玩家色点 */
.log-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.7);
}

/* 结算弹窗：奖牌名次行（逐行滑入 + 冠军金底 + 座位色点） */
#over-ranks {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
}
#over-ranks li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 14.5px;
  animation: rankIn .4s cubic-bezier(.25, 1.2, .4, 1) var(--d, 0s) backwards;
}
@keyframes rankIn { from { opacity: 0; transform: translateX(-18px); } }
#over-ranks li.champ {
  background: linear-gradient(90deg, rgba(242,179,42,.22), rgba(242,179,42,.04));
  box-shadow: inset 0 0 0 1px rgba(217,147,13,.28);
  font-size: 16px;
}
#over-ranks li.champ .rank-medal { animation: champMedal .7s cubic-bezier(.3, 1.6, .45, 1) .3s backwards; }
@keyframes champMedal { from { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.35) rotate(6deg); } }
#over-ranks .rank-medal { flex: 0 0 26px; text-align: center; font-size: 17px; }
#over-ranks li.champ .rank-medal { font-size: 21px; }
#over-ranks .rank-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75);
}
#over-ranks .rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#over-ranks .rank-sub {
  flex-basis: 100%;
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #8a93ad;
  margin: -2px 0 0 43px;
}

/* 空状态提示 */
.log:empty::before { content: '对局事件会显示在这里…'; }
.chat-list:empty::before { content: '还没有人说话，聊两句吧～'; }
.log:empty::before, .chat-list:empty::before {
  display: block;
  color: #a2abc4;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 2px;
}

/* 玩法说明弹窗 */
.rules-card { width: min(440px, 92vw); }
.rules-body {
  text-align: left;
  font-size: 13.5px;
  color: var(--ink-dim, #4a5568);
  line-height: 1.7;
  margin: 6px 0 14px;
  max-height: 56vh;
  overflow-y: auto;
}
.rules-body ul { padding-left: 19px; margin: 0; }
.rules-body li { margin-bottom: 6px; }

/* 手机小屏：隐藏价格药丸放大地名；地块信息卡改为底部抽屉 */
@media (max-width: 700px) {
  .mono-price-pill, .mono-price { display: none; }
  .mono-name { font-size: 19px; }
  .mono-fn-name { font-size: 15px; }
  #tile-info {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    z-index: 14;
    box-shadow: 0 -12px 34px rgba(43,51,80,.28);
    animation: sheetIn .22s ease-out;
  }
  @keyframes sheetIn { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
}

/* ============ 交互增强：目标拾取 / 金额脉冲 / 轮到你呼吸 ============ */
/* 道具目标拾取：可选格描金脉冲，选中格高亮填充；点击即选定 */
.mono-cell.pickable {
  stroke: var(--gold);
  stroke-width: 3.4;
  cursor: crosshair;
  animation: pickPulse 1.15s ease-in-out infinite;
}
@keyframes pickPulse { 50% { stroke-width: 5; } }
.mono-cell.pick-target {
  fill: #ffe9b3;
  stroke: #d9930d;
  stroke-width: 5;
  animation: none;
}
/* 资产榜 / 侧栏现金变化脉冲：涨绿跌红 */
.mono-money { transform-box: fill-box; transform-origin: 100% 50%; }
.mono-money.cash-up { animation: cashUpK .6s ease; }
.mono-money.cash-down { animation: cashDownK .6s ease; }
@keyframes cashUpK { 35% { fill: #1fa870; transform: scale(1.16); } }
@keyframes cashDownK { 35% { fill: #e4536b; transform: scale(1.16); } }
.mono-cash { display: inline-block; transform-origin: 100% 50%; }
.mono-cash.cash-up { animation: cashUpHtmlK .6s ease; }
.mono-cash.cash-down { animation: cashDownHtmlK .6s ease; }
@keyframes cashUpHtmlK { 35% { color: #0f8a58; transform: scale(1.14); } }
@keyframes cashDownHtmlK { 35% { color: #c93b54; transform: scale(1.14); } }
/* 轮到你掷骰：操作台金色呼吸，提醒先用道具/切骰数再掷 */
#mono-tools.my-turn .mono-hud-bar {
  border-color: rgba(217, 147, 13, .55);
  animation: hudGlow 1.6s ease-in-out infinite;
}
@keyframes hudGlow {
  0%, 100% { box-shadow: 0 14px 32px rgba(43,51,80,.16), 0 0 0 1px rgba(217,147,13,.28), 0 0 18px rgba(217,147,13,.22); }
  50% { box-shadow: 0 14px 32px rgba(43,51,80,.16), 0 0 0 1.5px rgba(217,147,13,.5), 0 0 32px rgba(217,147,13,.4); }
}
.mono-obstacle { cursor: help; }

/* ============ 大富翁专属主题：富豪绿金（对局中启用） ============ */
body.mono-theme {
  background: #10291d;
  background-image:
    radial-gradient(1200px 700px at 12% -10%, rgba(217, 147, 13, .14), transparent 55%),
    radial-gradient(1000px 620px at 90% 6%, rgba(31, 168, 112, .18), transparent 55%),
    radial-gradient(880px 560px at 50% 112%, rgba(217, 147, 13, .08), transparent 52%),
    linear-gradient(180deg, #17362a 0%, #0e241a 100%);
}
body.mono-theme ::selection { background: rgba(217, 147, 13, .42); color: #fffdf4; }
body.mono-theme .orb-a { background: #2f7d61; opacity: .55; }
body.mono-theme .orb-b { background: #d9930d; opacity: .26; }
body.mono-theme .orb-c { background: #3aa257; opacity: .3; }
body.mono-theme .orb-d { background: #ffd166; opacity: .16; }
body.mono-theme .bg-grid {
  background-image:
    linear-gradient(rgba(255, 236, 190, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 236, 190, .06) 1px, transparent 1px);
  opacity: .55;
}
body.mono-theme .bg-vignette {
  background: radial-gradient(ellipse 82% 72% at 50% 44%, transparent 30%, rgba(5, 18, 12, .6) 100%);
}
/* 面板：奶油纸面 + 金边，像摆在绿呢桌上的道具卡 */
body.mono-theme .side-pane {
  background:
    linear-gradient(165deg, rgba(255, 253, 244, .97), rgba(250, 244, 228, .93) 46%, rgba(246, 238, 217, .9));
  border-color: rgba(217, 147, 13, .32);
  box-shadow:
    0 30px 70px rgba(4, 16, 10, .5),
    0 0 0 1px rgba(255, 220, 150, .2),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}
body.mono-theme .monopoly-view #board { filter: drop-shadow(0 28px 56px rgba(3, 14, 9, .6)); }
body.mono-theme .mono-hud-bar {
  background: linear-gradient(165deg, rgba(255, 253, 244, .96), rgba(248, 241, 224, .92));
  border-color: rgba(217, 147, 13, .34);
  box-shadow: 0 16px 36px rgba(4, 16, 10, .45);
}
body.mono-theme .mono-pop {
  background: linear-gradient(165deg, rgba(255, 253, 246, .98), rgba(248, 241, 224, .97));
  border-color: rgba(217, 147, 13, .34);
  box-shadow: 0 20px 44px rgba(4, 16, 10, .5);
}
body.mono-theme #mono-actions {
  background: linear-gradient(160deg, rgba(255, 253, 246, .98), rgba(248, 241, 224, .97));
  border-color: rgba(217, 147, 13, .36);
  box-shadow: 0 20px 44px rgba(4, 16, 10, .5);
}
body.mono-theme #tile-info {
  border-color: rgba(217, 147, 13, .36);
  box-shadow: 0 18px 40px rgba(4, 16, 10, .5);
}
body.mono-theme .pcard { background: rgba(255, 253, 244, .8); border-color: rgba(184, 149, 79, .22); }
body.mono-theme .pcard.turn { background: rgba(255, 250, 233, .98); }
body.mono-theme .panel-head {
  color: #8a6f3d;
  background: linear-gradient(135deg, rgba(217, 147, 13, .20), rgba(184, 119, 8, .14));
  border-color: rgba(217, 147, 13, .26);
}
body.mono-theme .panel .log, body.mono-theme .panel .chat-list {
  background: rgba(255, 253, 244, .55);
  border-color: rgba(184, 149, 79, .2);
}
/* 主按钮换金色，强化"财富"主题 */
body.mono-theme #view-game button.primary {
  background: linear-gradient(135deg, #f5c04a 0%, #dd9a14 55%, #b87708 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 74, 0, .4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 12px 28px rgba(217, 147, 13, .4);
}
body.mono-theme #view-game button.primary:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 16px 34px rgba(217, 147, 13, .5);
}
body.mono-theme #mobile-turn-strip { background: rgba(255, 253, 244, .95); }
body.mono-theme #toast { background: rgba(30, 52, 40, .95); color: #ffe9b3; }

/* ============ 审查修复批次（2026-07-26）：主题补漏 / 标记入场 / 新行样式 ============ */
/* 街头标记新落位入场弹跳（恶犬游荡/神明下凡/埋雷/放路障） */
.mono-obstacle.spawn {
  animation: ownerPop .5s cubic-bezier(.3, 1.4, .4, 1);
  transform-box: fill-box;
  transform-origin: center;
}
/* 地块信息卡：街头实体提示行 + 业主入狱免租提示 */
#tile-info .ti-hazard {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(162, 78, 60, .08);
  border: 1px dashed rgba(162, 78, 60, .3);
  font-size: 11.5px;
  line-height: 1.45;
  color: #7c4a3a;
}
#tile-info .ti-jail-note { color: #7a6a52; font-size: 12px; }
/* 单字印章徽章：道具说明/商店卡片里的 icon（避免"雷 地雷"连读口吃） */
.item-stamp {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  border-radius: 5px;
  background: #2f7d61;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  vertical-align: -3px;
}
.mono-choice-card b { display: flex; align-items: center; justify-content: center; }
.mono-choice-card b em { font-style: normal; }
/* 大富翁主题补漏：弹窗与信息卡换奶油纸面，普通按钮/输入框/进度条暖化 */
body.mono-theme .modal-card {
  background: linear-gradient(165deg, rgba(255, 253, 246, .98), rgba(248, 241, 224, .97));
  border-color: rgba(217, 147, 13, .34);
  box-shadow: 0 30px 70px rgba(4, 16, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .92);
}
body.mono-theme #tile-info {
  background: linear-gradient(160deg, rgba(255, 253, 246, .98), rgba(248, 241, 224, .97));
}
body.mono-theme #view-game button:not(.primary):not(.danger-outline) {
  background: linear-gradient(180deg, #fffdf4, #f4ecd8);
  border-color: rgba(184, 149, 79, .32);
}
body.mono-theme #view-game .chat-input input {
  background: rgba(255, 253, 244, .75);
  border-color: rgba(184, 149, 79, .3);
}
body.mono-theme .timer-bar { background: rgba(120, 96, 48, .16); }
body.mono-theme .mono-status { border-color: rgba(184, 149, 79, .32); background: rgba(255, 253, 244, .8); }
body.mono-theme .mono-item-ghost { border-color: rgba(184, 149, 79, .4); background: repeating-linear-gradient(135deg, rgba(184,149,79,.07) 0 4px, transparent 4px 8px); }
body.mono-theme .mono-item-ghost::after { color: rgba(138, 111, 61, .35); }
body.mono-theme .hud-items-label { color: #8a6f3d; }
body.mono-theme .hud-seg + .hud-seg { border-left-color: rgba(184, 149, 79, .35); }
body.mono-theme #mobile-turn-strip { border-color: rgba(184, 149, 79, .3); }
body.mono-theme .mono-item-btn .count { background: #1d4433; }
body.mono-theme .badge { border-color: rgba(184, 149, 79, .28); background: rgba(184, 149, 79, .08); }

/* ============ 细节打磨批次（2026-07-26）============ */
/* 对局记录金额高亮：收入绿 / 支出红 */
.log-amt { font-weight: 900; }
.log-amt.good { color: #157a52; }
.log-amt.bad { color: #c23b52; }
body.mono-theme .log-amt.good { color: #0f8a58; }
body.mono-theme .log-amt.bad { color: #c93b54; }

/* ============ 四游戏专属主题（2026-07-26）============ */
/* —— 飞行棋：晴空机场——蓝天渐变 + 云朵光斑，棋盘像停机坪模型 —— */
body.fly-theme {
  background: #35719e;
  background-image:
    radial-gradient(1200px 700px at 15% -8%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(1000px 620px at 88% 10%, rgba(160, 214, 255, .3), transparent 55%),
    radial-gradient(900px 560px at 50% 115%, rgba(38, 82, 128, .5), transparent 60%),
    linear-gradient(180deg, #4585ba 0%, #2c68ad 55%, #245689 100%);
}
body.fly-theme ::selection { background: rgba(255, 209, 102, .45); color: #10314f; }
body.fly-theme .orb-a { background: #ffffff; opacity: .34; }
body.fly-theme .orb-b { background: #bfe0ff; opacity: .4; }
body.fly-theme .orb-c { background: #8fc7ff; opacity: .3; }
body.fly-theme .orb-d { background: #ffe3a3; opacity: .22; }
body.fly-theme .bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  opacity: .5;
}
body.fly-theme .bg-vignette {
  background: radial-gradient(ellipse 82% 72% at 50% 44%, transparent 32%, rgba(16, 44, 72, .5) 100%);
}
body.fly-theme .side-pane {
  background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(238, 246, 255, .92) 46%, rgba(228, 240, 253, .9));
  border-color: rgba(63, 127, 224, .3);
  box-shadow: 0 30px 70px rgba(10, 32, 56, .45), inset 0 1px 0 rgba(255, 255, 255, .95);
}
body.fly-theme #board { filter: drop-shadow(0 26px 52px rgba(8, 28, 50, .55)); }
body.fly-theme .pcard { background: rgba(255, 255, 255, .82); }
body.fly-theme #toast { background: rgba(21, 48, 78, .95); color: #cfe6ff; }
body.fly-theme .panel .log, body.fly-theme .panel .chat-list {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(63, 127, 224, .18);
}

/* —— 象棋 / 五子棋：茶室木韵——深胡桃木背景 + 暖纸面板 —— */
body.wood-theme {
  background: #2b1d13;
  background-image:
    radial-gradient(1100px 650px at 14% -8%, rgba(214, 158, 86, .16), transparent 55%),
    radial-gradient(950px 600px at 88% 8%, rgba(157, 106, 56, .22), transparent 55%),
    radial-gradient(880px 540px at 50% 114%, rgba(90, 56, 30, .5), transparent 58%),
    linear-gradient(180deg, #3a2818 0%, #2b1d13 60%, #221610 100%);
}
body.wood-theme ::selection { background: rgba(214, 158, 86, .45); color: #fff6e8; }
body.wood-theme .orb-a { background: #c98d4b; opacity: .3; }
body.wood-theme .orb-b { background: #8a5a2e; opacity: .34; }
body.wood-theme .orb-c { background: #e8c48c; opacity: .2; }
body.wood-theme .orb-d { background: #a06b35; opacity: .22; }
body.wood-theme .bg-grid {
  background-image:
    linear-gradient(rgba(232, 196, 140, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 196, 140, .06) 1px, transparent 1px);
  opacity: .5;
}
body.wood-theme .bg-vignette {
  background: radial-gradient(ellipse 82% 72% at 50% 44%, transparent 30%, rgba(16, 9, 4, .62) 100%);
}
body.wood-theme .side-pane {
  background: linear-gradient(165deg, rgba(253, 248, 238, .97), rgba(247, 238, 220, .93) 46%, rgba(242, 231, 209, .9));
  border-color: rgba(157, 106, 56, .35);
  box-shadow: 0 30px 70px rgba(10, 5, 2, .55), inset 0 1px 0 rgba(255, 255, 255, .92);
}
body.wood-theme #board { filter: drop-shadow(0 26px 52px rgba(8, 4, 1, .6)); }
body.wood-theme .pcard { background: rgba(253, 248, 238, .85); border-color: rgba(157, 106, 56, .22); }
body.wood-theme .pcard.turn { background: rgba(255, 251, 240, .98); }
body.wood-theme .panel-head { color: #8a6134; background: linear-gradient(135deg, rgba(214,158,86,.2), rgba(157,106,56,.14)); border-color: rgba(157,106,56,.24); }
body.wood-theme .panel .log, body.wood-theme .panel .chat-list {
  background: rgba(253, 248, 238, .6);
  border-color: rgba(157, 106, 56, .24);
}
body.wood-theme #view-game button.primary {
  background: linear-gradient(135deg, #c98d4b 0%, #a06b35 55%, #7f5226 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(63, 38, 12, .45);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 28px rgba(120, 78, 36, .42);
}
body.wood-theme #view-game button:not(.primary):not(.danger-outline) {
  background: linear-gradient(180deg, #fdf8ee, #f0e5cf);
  border-color: rgba(157, 106, 56, .32);
}
body.wood-theme #view-game .chat-input input {
  background: rgba(253, 248, 238, .78);
  border-color: rgba(157, 106, 56, .3);
}
body.wood-theme .timer-bar { background: rgba(120, 82, 40, .18); }
body.wood-theme #toast { background: rgba(43, 29, 19, .95); color: #f2ddb8; }
body.wood-theme #mobile-turn-strip { background: rgba(253, 248, 238, .95); border-color: rgba(157, 106, 56, .3); }

/* ============ 大厅重设计：游戏之夜桌游馆（2026-07-26）============ */
/* 大厅页整体换成绿呢桌面氛围（只作用于大厅可见时；对局中由各游戏主题接管） */
body:has(#view-lobby:not([hidden])) {
  background: #17352a;
  background-image:
    radial-gradient(1100px 640px at 16% -6%, rgba(217, 147, 13, .12), transparent 55%),
    radial-gradient(950px 600px at 86% 8%, rgba(31, 168, 112, .16), transparent 55%),
    radial-gradient(900px 560px at 50% 116%, rgba(10, 26, 19, .6), transparent 60%),
    linear-gradient(180deg, #1d4233 0%, #152e24 60%, #0f2822 100%);
}
body:has(#view-lobby:not([hidden])) .bg-grid {
  background-image:
    linear-gradient(rgba(255, 236, 190, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 236, 190, .05) 1px, transparent 1px);
  opacity: .6;
}
body:has(#view-lobby:not([hidden])) .orb-a { background: #2f7d61; opacity: .5; }
body:has(#view-lobby:not([hidden])) .orb-b { background: #d9930d; opacity: .2; }
body:has(#view-lobby:not([hidden])) .orb-c { background: #3aa257; opacity: .26; }
body:has(#view-lobby:not([hidden])) .orb-d { background: #ffd166; opacity: .14; }
body:has(#view-lobby:not([hidden])) .bg-vignette {
  background: radial-gradient(ellipse 82% 72% at 50% 44%, transparent 30%, rgba(5, 15, 11, .62) 100%);
}

.hall { width: min(860px, 94vw); }
/* 馆名牌匾：朱漆木匾 + 印章 + 灯笼 */
.hall-head { display: flex; justify-content: center; margin-bottom: 22px; }
.hall-plaque {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 30px;
  border-radius: 14px;
  background: linear-gradient(170deg, #b8402f, #8f2c20);
  border: 2px solid #e8c46a;
  box-shadow:
    0 14px 34px rgba(4, 14, 10, .55),
    inset 0 0 0 4px rgba(143, 44, 32, 1),
    inset 0 0 0 5px rgba(232, 196, 106, .55);
}
.hall-seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: #f3e9d2;
  color: #b8402f;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px #b8402f, 0 3px 8px rgba(0, 0, 0, .3);
  transform: rotate(-4deg);
}
.hall-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #f7e7b9;
  text-shadow: 0 2px 0 rgba(80, 20, 12, .8), 0 4px 12px rgba(0, 0, 0, .35);
  line-height: 1.15;
}
.hall-sub { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: rgba(247, 231, 185, .75); letter-spacing: 1px; }
.hall-lamp { font-size: 30px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); animation: lampSway 3.4s ease-in-out infinite; transform-origin: top center; }
@keyframes lampSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* 四张游戏台牌 */
.hall-tables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.table-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px 15px;
  border-radius: 15px;
  background: linear-gradient(172deg, #fdf8ea, #f0e6cd);
  border: 1.5px solid rgba(92, 74, 42, .35);
  border-bottom: 4px solid var(--c, #8c4a2a);
  box-shadow: 0 10px 24px rgba(4, 14, 10, .4), inset 0 1px 0 rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.table-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(4, 14, 10, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.table-card:active { transform: translateY(-1px); }
.table-card .tc-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c, #8c4a2a) 14%, #ffffff);
  border: 2.5px solid var(--c, #8c4a2a);
  color: var(--c, #8c4a2a);
  font-size: 25px;
  font-weight: 900;
  font-family: var(--font-serif);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c, #8c4a2a) 35%, transparent);
}
.table-card b { font-size: 15.5px; color: #3d3425; letter-spacing: 1px; }
.table-card small { font-size: 11px; font-weight: 700; color: #8d8368; }
.table-card.active-chip {
  border-color: var(--c, #8c4a2a);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #8c4a2a) 45%, transparent), 0 14px 30px rgba(4, 14, 10, .5);
}

/* 前台：昵称 + 房号一排 */
.hall-desk {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 13px 18px;
  border-radius: 15px;
  background: linear-gradient(172deg, rgba(253, 248, 234, .97), rgba(240, 230, 205, .94));
  border: 1.5px solid rgba(92, 74, 42, .32);
  box-shadow: 0 10px 26px rgba(4, 14, 10, .42), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.desk-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.desk-field label { font-size: 11.5px; font-weight: 900; letter-spacing: 2px; color: #8a6f3d; }
.desk-field input {
  height: 42px;
  padding: 6px 13px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(255, 253, 244, .9);
  border-color: rgba(92, 74, 42, .3);
}
.desk-sep { width: 1px; margin: 4px 18px; background: repeating-linear-gradient(180deg, rgba(92,74,42,.28) 0 5px, transparent 5px 10px); }
.desk-join-row { display: flex; gap: 8px; }
.desk-join-row input { flex: 1; min-width: 0; text-align: center; letter-spacing: 5px; font-variant-numeric: tabular-nums; }
.desk-join-row button {
  height: 42px;
  padding: 0 22px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #f5c04a, #dd9a14);
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 74, 0, .4);
  box-shadow: 0 6px 16px rgba(217, 147, 13, .4);
}
.desk-join-row button:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* 房间列表与脚注 */
.hall-rooms-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 2px 9px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 3px;
  color: rgba(247, 231, 185, .85);
}
.hall-rooms-head i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(247,231,185,.3) 0 6px, transparent 6px 12px); }
.hall .lobby-rooms { margin-top: 0; }
.hall #room-list .lr-item {
  background: linear-gradient(172deg, rgba(253, 248, 234, .95), rgba(242, 232, 210, .92));
  border-color: rgba(92, 74, 42, .3);
}
.hall-foot {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(247, 231, 185, .62);
}
.hall .err { color: #ffb4a6; text-shadow: 0 1px 2px rgba(0,0,0,.4); margin-top: 12px; }

@media (max-width: 720px) {
  .hall-tables { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hall-desk { flex-direction: column; gap: 12px; }
  .desk-sep { display: none; }
  .hall-title { font-size: 28px; letter-spacing: 5px; }
  .hall-plaque { padding: 11px 18px; gap: 11px; }
  .hall-seal { width: 38px; height: 38px; font-size: 21px; }
  .hall-lamp { font-size: 24px; }
}

/* 大厅外壳：覆盖旧版 460px 卡片限制与光晕（桌游馆布局要 860px 居中） */
.lobby-shell { width: auto; }
.lobby-shell::before { display: none; }
/* 台牌选中描边沿用 --c，去掉旧 game-chip 胶囊样式的干扰 */
.table-card.game-chip { border-radius: 15px; }
/* 旧 game-chip 胶囊样式在台牌形态下全部重置 */
.table-card.game-chip {
  font-size: inherit;
  letter-spacing: normal;
  padding: 20px 10px 15px;
  color: inherit;
  background: linear-gradient(172deg, #fdf8ea, #f0e6cd);
  border: 1.5px solid rgba(92, 74, 42, .35);
  border-bottom: 4px solid var(--c, #8c4a2a);
}
.table-card.game-chip:hover {
  background: linear-gradient(172deg, #fffdf4, #f4ecd8);
  filter: none;
}
.table-card.game-chip.active-chip {
  background: linear-gradient(172deg, #fffdf4, #f6efdb);
  color: inherit;
}

/* ============ 房间等待页跟随桌游馆风格（2026-07-26）============ */
/* 房间页与大厅同一张绿呢桌面 */
body:has(#view-room:not([hidden])) {
  background: #17352a;
  background-image:
    radial-gradient(1100px 640px at 16% -6%, rgba(217, 147, 13, .12), transparent 55%),
    radial-gradient(950px 600px at 86% 8%, rgba(31, 168, 112, .16), transparent 55%),
    radial-gradient(900px 560px at 50% 116%, rgba(10, 26, 19, .6), transparent 60%),
    linear-gradient(180deg, #1d4233 0%, #152e24 60%, #0f2822 100%);
}
body:has(#view-room:not([hidden])) .bg-grid {
  background-image:
    linear-gradient(rgba(255, 236, 190, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 236, 190, .05) 1px, transparent 1px);
  opacity: .6;
}
body:has(#view-room:not([hidden])) .orb-a { background: #2f7d61; opacity: .5; }
body:has(#view-room:not([hidden])) .orb-b { background: #d9930d; opacity: .2; }
body:has(#view-room:not([hidden])) .orb-c { background: #3aa257; opacity: .26; }
body:has(#view-room:not([hidden])) .orb-d { background: #ffd166; opacity: .14; }
body:has(#view-room:not([hidden])) .bg-vignette {
  background: radial-gradient(ellipse 82% 72% at 50% 44%, transparent 30%, rgba(5, 15, 11, .62) 100%);
}
/* 房卡：奶油牌桌卡（覆盖玻璃拟态 .paper） */
.room-card.paper {
  background: linear-gradient(172deg, rgba(253, 248, 234, .98), rgba(240, 230, 205, .95));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid rgba(92, 74, 42, .35);
  border-radius: 17px;
  box-shadow:
    0 22px 50px rgba(4, 14, 10, .55),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 0 0 5px rgba(217, 147, 13, .07);
}
/* 房名与房号：红木牌 + 鎏金号码 */
.room-gname {
  font-family: var(--font-serif);
  font-weight: 800;
  color: #6b4a22;
  letter-spacing: 2px;
}
.code-plate {
  background: linear-gradient(170deg, #b8402f, #8f2c20);
  border: 1.5px solid #e8c46a;
  box-shadow: inset 0 0 0 3px rgba(143, 44, 32, 1), inset 0 0 0 4px rgba(232, 196, 106, .5), 0 4px 10px rgba(80, 20, 12, .35);
}
.code-plate .code { color: #f7e7b9; text-shadow: 0 1px 0 rgba(80, 20, 12, .8); }
.room-card .sub { color: #8a7a5e; }
/* 座位：奶油席位卡，空位斜纹布面 */
.room-card .slot {
  background: linear-gradient(180deg, #fffdf4, #f4ecd8);
  border-color: rgba(92, 74, 42, .28);
}
.room-card .slot.empty {
  background: repeating-linear-gradient(135deg, rgba(92, 74, 42, .06) 0 8px, rgba(92, 74, 42, .02) 8px 16px);
  border-style: dashed;
  border-color: rgba(92, 74, 42, .3);
}
.room-card .slot .who .tag { color: #8d8368; }
/* 按钮组：奶油键 + 金色开局键 */
.room-card .room-btns button {
  background: linear-gradient(180deg, #fffdf4, #f0e6cd);
  border-color: rgba(92, 74, 42, .32);
  color: #4a3d28;
}
.room-card .room-btns #btn-start.primary {
  background: linear-gradient(135deg, #f5c04a, #dd9a14);
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 74, 0, .4);
  box-shadow: 0 8px 20px rgba(217, 147, 13, .42);
}
.room-card .room-btns #btn-start.primary:hover { filter: brightness(1.06); }
.room-card .room-btns #btn-leave-room.danger-outline {
  background: transparent;
  border-color: rgba(184, 64, 47, .45);
  color: #b8402f;
}
/* 聊天面板暖化 */
.room-card .panel-head {
  color: #8a6134;
  background: linear-gradient(135deg, rgba(214, 158, 86, .22), rgba(157, 106, 56, .14));
  border-color: rgba(157, 106, 56, .26);
}
.room-card .chat-list {
  background: rgba(255, 253, 244, .7);
  border-color: rgba(157, 106, 56, .24);
}
.room-card .chat-input input {
  background: rgba(255, 253, 244, .85);
  border-color: rgba(92, 74, 42, .3);
}
.room-card .chat-input .mini {
  background: linear-gradient(180deg, #fffdf4, #f0e6cd);
  border-color: rgba(92, 74, 42, .3);
}
/* 观战席条 */
.room-card .specs .spec-item { background: rgba(255, 253, 244, .8); border-color: rgba(92, 74, 42, .24); }
/* 复制房号小按钮 */
.room-card #btn-copy {
  background: linear-gradient(180deg, #fffdf4, #f0e6cd);
  border-color: rgba(92, 74, 42, .3);
  color: #6b4a22;
}
/* 房间内游戏切换条（房主可见） */
.room-game-switch { display: flex; gap: 7px; margin: 0 0 13px; flex-wrap: wrap; }
.room-game-switch button {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 11px;
  background: linear-gradient(180deg, #fffdf4, #f0e6cd);
  border: 1.5px solid rgba(92, 74, 42, .3);
  color: #5c4a2a;
  box-shadow: none;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.room-game-switch button i {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c, #8c4a2a) 14%, transparent);
  color: var(--c, #8c4a2a);
}
.room-game-switch button:hover { transform: translateY(-1px); }
.room-game-switch button.selected {
  border-color: var(--c, #8c4a2a);
  background: color-mix(in srgb, var(--c, #8c4a2a) 12%, #fffdf4);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c, #8c4a2a) 40%, transparent);
}
/* ── 第 1 轮玩家体验打磨 ── */
/* 飞行棋：点不可走棋子的否定摇头 */
@keyframes planeDeny {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 0); }
  40% { transform: translate(3px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
}
.pfx.deny { animation: planeDeny .35s ease; }
/* 飞行棋：侧栏赛程进度条 */
.fly-progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  background: rgba(92, 74, 42, .14);
  overflow: hidden;
}
.fly-progress i {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width .5s ease;
}
/* 大富翁：侧栏地产/道具规模 */
.mono-holdings {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink, #5c4a2a) 62%, transparent);
  margin-top: 1px;
}
/* 大富翁：商店卡面直接印说明（移动端无 hover） */
.mono-choice-card .shop-desc {
  display: block;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink, #5c4a2a) 58%, transparent);
  margin-top: 3px;
  white-space: normal;
}
/* ── 第 2 轮玩家体验打磨 ── */
/* 大富翁：棋子头顶神明附身徽标 */
.mono-token-god { font-size: 15px; }
/* 五子棋：终局手数标注 */
.gk-move-num {
  font-size: 13px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
}
/* ── 第 3 轮玩家体验打磨 ── */
/* 大富翁：对人道具飞掷印章 */
.mono-item-fly {
  font-size: 22px;
  font-weight: 900;
  fill: #b8860b;
  paint-order: stroke;
  stroke: #fffdf4;
  stroke-width: 4px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
/* 街头标记/棋子神明徽标的 emoji 字形：页面字体（Outfit/Noto Serif SC）无 emoji，
   个别字形（🐶🌧🏠）回退失败只剩空白圈，显式走系统彩色 emoji 字体 */
.mono-obstacle-icon,
.mono-token-god {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
}

/* ── 大富翁主题:设置/结算弹窗换奶油纸质感 ── */
.mono-themed-modal {
  background:
    linear-gradient(165deg, rgba(255, 253, 244, .98), rgba(250, 244, 228, .95) 46%, rgba(246, 238, 217, .93));
  border: 2px solid rgba(217, 147, 13, .32);
  box-shadow:
    0 30px 80px rgba(4, 16, 10, .55),
    0 0 0 1px rgba(255, 220, 150, .24),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
.mono-themed-modal h2 {
  color: #5c4a2a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.mono-themed-modal .sub {
  color: color-mix(in srgb, #5c4a2a 65%, transparent);
}
.mono-themed-modal .setup-presets button.selected {
  background: linear-gradient(135deg, #f5c04a, #dd9a14);
  box-shadow: 0 0 0 2px rgba(217, 147, 13, .2);
}
.mono-themed-modal #over-ranks li.champ {
  background: linear-gradient(90deg, rgba(217, 147, 13, .28), rgba(217, 147, 13, .08));
  box-shadow: inset 0 0 0 1.5px rgba(217, 147, 13, .35);
}
.mono-themed-modal button.primary {
  background: linear-gradient(135deg, #f5c04a 0%, #dd9a14 55%, #b87708 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 74, 0, .4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 12px 28px rgba(217, 147, 13, .4);
}
.mono-themed-modal button.primary:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 16px 34px rgba(217, 147, 13, .5);
}