/* 贵阳大富翁 —— 蜡染靛蓝 + 宣纸米白 */
:root {
  --indigo: #1a2750;
  --indigo-2: #24366b;
  --indigo-3: #31488a;
  --paper: #f7f0df;
  --paper-2: #efe4c9;
  --ink: #2a2118;
  --ink-2: #6b5d4a;
  --chili: #d8383a;
  --gold: #e0ad12;
  --jade: #2e9a5a;
  --line: rgba(42, 33, 24, .18);
  --radius: 14px;
  --bs: 360px;
  --u: calc(var(--bs) / 12.1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --title-font: 'ZCOOL KuaiLe', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background-color: var(--indigo);
  /* 蜡染纹样：同心圆 + 点阵 */
  background-image:
    radial-gradient(circle at 50% 50%, transparent 9px, rgba(255,255,255,.07) 10px, rgba(255,255,255,.07) 11px, transparent 12px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 2px, transparent 3px),
    radial-gradient(circle at 0 0, rgba(255,255,255,.05) 2px, transparent 3px);
  background-size: 44px 44px, 44px 44px, 22px 22px;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
input, textarea { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; color: inherit; touch-action: manipulation; }
.hidden { display: none !important; }

#app {
  height: 100vh;
  height: 100dvh;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
  display: flex;
  flex-direction: column;
}

/* ---------- 通用组件 ---------- */
.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .08s, filter .15s, opacity .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--chili); color: #fff; }
.btn.gold { background: var(--gold); color: #3a2a00; }
.btn.jade { background: var(--jade); color: #fff; }
.btn.indigo { background: var(--indigo-3); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; color: inherit; border: 1.5px solid currentColor; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.big { min-height: 54px; font-size: 18px; }
.btn.block { width: 100%; }

.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.card-title { font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.muted { color: var(--ink-2); font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; }

input.field {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #fffaf0;
  padding: 0 14px;
  font-size: 17px; /* ≥16px 防止 iOS 聚焦时缩放 */
  outline: none;
}
input.field:focus { border-color: var(--indigo-3); }

.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.av {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--paper-2);
  font-size: 24px;
  cursor: pointer;
  display: grid; place-items: center;
}
.av.on { border-color: var(--chili); background: #fff; transform: scale(1.08); }
.av:disabled { opacity: .3; }

.seg { display: flex; background: var(--paper-2); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; border: 0; background: transparent; border-radius: 8px; min-height: 36px; font-size: 14px; cursor: pointer;
}
.seg button.on { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.seg button:disabled { cursor: default; }

/* ---------- 首页 ---------- */
.home {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero { text-align: center; color: var(--paper); margin-top: 3vh; }
.hero-title {
  font-family: var(--title-font);
  font-size: clamp(44px, 13vw, 72px);
  line-height: 1.05;
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 var(--chili), 6px 6px 0 rgba(0,0,0,.25);
}
.hero-sub { margin-top: 10px; font-size: 16px; letter-spacing: 3px; opacity: .9; }
.hero-tags { margin-top: 6px; font-size: 12px; opacity: .6; letter-spacing: 1px; }
.home .card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.home label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.or { text-align: center; font-size: 12px; color: var(--ink-2); margin-top: 4px; display: flex; gap: 10px; align-items: center; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-row input { text-transform: uppercase; letter-spacing: 6px; font-weight: 700; text-align: center; }
.foot { color: var(--paper); opacity: .55; font-size: 12px; text-align: center; }
.rules-link { color: var(--paper); opacity: .8; font-size: 13px; text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* ---------- 房间大厅 ---------- */
.lobby {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 110px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.topbar { display: flex; align-items: center; justify-content: space-between; color: var(--paper); min-height: 44px; }
.topbar .title { font-family: var(--title-font); font-size: 22px; letter-spacing: 2px; }
.roomcode { text-align: center; }
.roomcode .code {
  font-family: var(--title-font);
  font-size: 52px;
  letter-spacing: 10px;
  color: var(--chili);
  line-height: 1.1;
  margin: 4px 0;
  -webkit-user-select: all; user-select: all;
}
.qr { display: flex; justify-content: center; margin: 6px 0; }
.qr svg { width: 150px; height: 150px; background: #fff; border-radius: 8px; }
.share-url { font-size: 12px; color: var(--ink-2); word-break: break-all; margin-bottom: 8px; -webkit-user-select: all; user-select: all; }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.members li {
  display: flex; align-items: center; gap: 10px;
  background: #fffaf0; border-radius: 12px; padding: 8px 10px;
  border-left: 5px solid var(--c);
}
.members .mav { font-size: 26px; width: 34px; text-align: center; }
.members .mname { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); font-weight: 600; }
.tag.host { background: var(--gold); color: #3a2a00; }
.tag.off { background: #ccc; color: #555; }
.set-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.set-row > span { width: 72px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.set-row .seg { flex: 1; }
.lobby-foot {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + var(--sab));
  background: linear-gradient(transparent, rgba(10,16,36,.9) 30%);
  display: flex; justify-content: center;
}
.lobby-foot .btn { width: 100%; max-width: 520px; }
.lobby-foot .wait { color: var(--paper); opacity: .8; padding: 14px; }

.chatlist { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 8px; }
.chatlist .sys { color: var(--ink-2); font-size: 12px; text-align: center; }
.chatlist .msg b { color: var(--c); }
.chat-row input { min-height: 40px; font-size: 16px; }

/* ---------- 游戏页布局 ---------- */
.game {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-areas: "players" "board" "panel";
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: 100%;
}
.players { grid-area: players; }
.boardwrap { grid-area: board; }
.panel { grid-area: panel; }

@media (orientation: landscape) and (min-width: 600px) {
  .game {
    grid-template-areas: "board players" "board panel";
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 380px);
  }
  .players { flex-wrap: wrap; overflow: visible; align-content: flex-start; padding: 10px 10px 4px 0; }
  .pchip { flex: 1 1 calc(50% - 6px); }
  .panel { justify-content: flex-start; padding: 6px 10px 10px 0; border-radius: 0; background: transparent; }
  .panel .panel-inner { border-radius: var(--radius); }
}

/* ---------- 玩家条 ---------- */
.players {
  display: flex;
  gap: 6px;
  padding: 8px 8px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.players::-webkit-scrollbar { display: none; }
.pchip {
  flex: 0 0 auto;
  min-width: 92px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(247,240,223,.12);
  color: var(--paper);
  border-radius: 12px;
  padding: 5px 8px 5px 6px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s;
}
.pchip .pav {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c); display: grid; place-items: center; font-size: 17px; flex: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}
.pchip .pinfo { min-width: 0; line-height: 1.15; }
.pchip .pname { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.pchip .pmoney { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.pchip .pmoney.neg { color: #ff8a80; }
.pchip .pbadges { font-size: 11px; opacity: .9; }
.pchip.turn { background: var(--paper); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,173,18,.35); }
.pchip.turn .pmoney.neg { color: var(--chili); }
.pchip.me .pname::after { content: '（我）'; }
.pchip.out { opacity: .4; filter: grayscale(1); }
.pchip.off .pav { filter: grayscale(.8); }

/* ---------- 棋盘 ---------- */
.boardwrap {
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
}
.board {
  position: relative;
  width: var(--bs);
  height: var(--bs);
  display: grid;
  grid-template-columns: 1.55fr repeat(9, 1fr) 1.55fr;
  grid-template-rows: 1.55fr repeat(9, 1fr) 1.55fr;
  gap: 1px;
  background: #7a6a52;
  border: 2px solid #7a6a52;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  flex: none;
}
.tile {
  position: relative;
  background: var(--paper);
  display: flex;
  overflow: hidden;
  cursor: pointer;
  font-size: calc(var(--bs) * .0215);
  line-height: 1.1;
  text-align: center;
}
.tile:active { filter: brightness(.93); }
.tile.b { flex-direction: column; }
.tile.t { flex-direction: column-reverse; }
.tile.l { flex-direction: row-reverse; }
.tile.r { flex-direction: row; }
.tile .bar { flex: 0 0 22%; display: flex; align-items: center; justify-content: center; gap: 1px; flex-wrap: wrap; }
.tile.l .bar, .tile.r .bar { flex-direction: column; }
.tile .tbody {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1px; gap: 1px;
}
.tile .tname { font-weight: 700; word-break: break-all; }
.tile .tsub { font-size: .85em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile .ticon { font-size: 1.3em; line-height: 1; }
.tile.owned { box-shadow: inset 0 0 0 calc(var(--bs) * .005) var(--own); }
.tile.owned .tbody { background: color-mix(in srgb, var(--own) 16%, transparent); }
.tile.owned .tsub { color: var(--ink); font-size: 1em; }
.tile.mort .tbody { background: repeating-linear-gradient(45deg, rgba(0,0,0,.1) 0 3px, transparent 3px 7px); }
.tile.mort .tname { opacity: .5; text-decoration: line-through; }
.tile .lv i { display: block; width: calc(var(--bs) * .011); height: calc(var(--bs) * .011); background: #3ecf6a; border: 1px solid rgba(0,0,0,.35); border-radius: 1px; }
.tile .lv i.hotel { background: #ff4d4d; width: calc(var(--bs) * .022); }
.tile .lv { display: flex; gap: 1px; }
.tile.l .lv, .tile.r .lv { flex-direction: column; }
.tile.corner { flex-direction: column; justify-content: center; align-items: center; padding: 2px; background: var(--paper-2); }
.tile.corner .ticon { font-size: 2em; }
.tile.corner .tname { font-size: 1.1em; }
.tile.corner .tsub { font-size: .8em; }
.tile.t-chance { background: #fdeee0; }
.tile.t-chest { background: #e6f2ea; }
.tile.hl { animation: hl 1s ease-in-out 3; }
@keyframes hl { 50% { background: #fff3b0; } }

.center {
  grid-row: 2 / 11;
  grid-column: 2 / 11;
  background: var(--paper-2);
  background-image:
    radial-gradient(circle at 50% 42%, rgba(26,39,80,.07) 0 22%, transparent 22.5%),
    radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(26,39,80,.06) 28.5% 29%, transparent 29.5%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bs) * .018);
  padding: calc(var(--bs) * .02);
  overflow: hidden;
}
.logo {
  font-family: var(--title-font);
  font-size: calc(var(--bs) * .085);
  color: var(--indigo);
  line-height: 1;
  letter-spacing: calc(var(--bs) * .006);
  text-shadow: calc(var(--bs) * .005) calc(var(--bs) * .005) 0 rgba(216,56,58,.5);
}
.slogan { font-size: calc(var(--bs) * .026); color: var(--ink-2); letter-spacing: 2px; margin-top: calc(var(--bs) * -.012); }
.dice { display: flex; gap: calc(var(--bs) * .03); }
.die {
  width: calc(var(--bs) * .105); height: calc(var(--bs) * .105);
  background: #fff;
  border-radius: 18%;
  box-shadow: 0 3px 0 #c9bfa8, 0 5px 12px rgba(0,0,0,.2);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 14%;
}
.die i { border-radius: 50%; margin: 12%; }
.die i.on { background: var(--ink); }
.die.red i.on { background: var(--chili); }
.dice.rolling .die { animation: shake .12s linear infinite; }
@keyframes shake { 0% { transform: rotate(-12deg) translateY(-2px); } 50% { transform: rotate(12deg) translateY(2px); } 100% { transform: rotate(-12deg) translateY(-2px); } }
.turninfo { font-size: calc(var(--bs) * .033); font-weight: 700; text-align: center; }
.minilog {
  width: 100%;
  max-width: 94%;
  font-size: calc(var(--bs) * .025);
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 2px;
  text-align: center;
  min-height: 3.6em;
}
.minilog div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minilog div:last-child { color: var(--ink); font-weight: 600; }

.cardpop {
  position: absolute;
  inset: 16% 10%;
  border-radius: 12px;
  padding: 6%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%;
  text-align: center;
  font-size: calc(var(--bs) * .036);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: cardin .35s cubic-bezier(.2,1.4,.4,1);
  z-index: 5;
  pointer-events: none;
}
.cardpop.chance { background: linear-gradient(160deg, #ffe7cf, #ffc9a3); border: 3px solid #ef8a26; }
.cardpop.chest { background: linear-gradient(160deg, #e3f5e8, #bfe6cc); border: 3px solid var(--jade); }
.cardpop .ck { font-family: var(--title-font); font-size: 1.5em; color: var(--indigo); }
.cardpop.out { animation: cardout .3s forwards; }
@keyframes cardin { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
@keyframes cardout { to { transform: scale(.8); opacity: 0; } }

.tokens { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.token {
  position: absolute; left: 0; top: 0;
  width: calc(var(--u) * .62); height: calc(var(--u) * .62);
  border-radius: 50%;
  background: var(--c);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  display: grid; place-items: center;
  font-size: calc(var(--u) * .36);
  transition: transform .13s ease-out;
}
.token.cur { z-index: 2; animation: bob 1s ease-in-out infinite; }
.token.cur::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--c); opacity: .7; animation: ring 1.2s ease-out infinite;
}
@keyframes bob { 50% { margin-top: -3px; } }
@keyframes ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- 操作面板 ---------- */
.panel { padding: 0 8px calc(8px + var(--sab)); display: flex; flex-direction: column; }
.panel-inner {
  background: var(--paper);
  border-radius: 16px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.25);
}
/* 竖屏固定面板高度，避免每个阶段按钮不同导致棋盘忽大忽小 */
@media (orientation: portrait), (max-width: 599px) {
  .panel-inner { min-height: 172px; justify-content: space-between; }
}
.status { font-size: 14px; text-align: center; min-height: 20px; font-weight: 600; }
.status .warn { color: var(--chili); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 0; min-width: 30%; }
.buybox { display: flex; align-items: center; gap: 10px; width: 100%; background: #fffaf0; border-radius: 12px; padding: 4px 10px; line-height: 1.25; border-left: 6px solid var(--c, #999); }
.buybox .bname { font-weight: 800; }
.tools { display: flex; gap: 6px; }
.tools .btn { flex: 1; min-height: 40px; font-size: 13px; padding: 0 4px; background: var(--paper-2); }
.tools .btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chili); display: inline-block; }
@media (orientation: landscape) and (min-width: 600px) {
  .panel .actions .btn { min-width: 45%; }
}

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 12, 28, .6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--sat) 0 0;
  animation: fade .2s;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: var(--paper);
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  animation: up .25s cubic-bezier(.2,.9,.3,1);
  padding-bottom: var(--sab);
}
@media (min-width: 700px) and (min-height: 600px) {
  .modal { align-items: center; }
  .sheet { border-radius: 20px; max-height: 80dvh; padding-bottom: 0; }
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; flex: 1; font-size: 18px; }
.sheet-head .x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--paper-2); font-size: 18px; cursor: pointer; }
.sheet-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { padding: 10px 16px 14px; display: flex; gap: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sheet-foot .btn { flex: 1; }

.tilehead { border-radius: 12px; padding: 12px 14px; color: #fff; background: var(--c, var(--indigo-3)); }
.tilehead .g { font-size: 12px; opacity: .85; }
.tilehead .n { font-size: 22px; font-weight: 800; }
table.rent { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rent td { padding: 6px 4px; border-bottom: 1px dashed var(--line); }
table.rent td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
table.rent tr.now td { background: #fff3b0; }
.reason { font-size: 12px; color: var(--chili); text-align: center; }
.kv { display: flex; justify-content: space-between; font-size: 14px; }
.kv b { font-variant-numeric: tabular-nums; }

.plist { display: flex; flex-direction: column; gap: 6px; }
.prow {
  display: flex; align-items: center; gap: 8px;
  background: #fffaf0; border-radius: 10px; padding: 8px 10px;
  border-left: 6px solid var(--c);
  cursor: pointer;
  font-size: 14px;
}
.prow .pn { flex: 1; font-weight: 600; }
.prow .ps { font-size: 12px; color: var(--ink-2); }
.prow input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--chili); }
.prow.mort .pn { text-decoration: line-through; opacity: .6; }

.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .trade-cols { grid-template-columns: 1fr; } }
.trade-col h4 { margin: 0 0 6px; font-size: 14px; }
.who { display: flex; gap: 6px; flex-wrap: wrap; }
.who button { border: 2px solid transparent; border-radius: 12px; background: var(--paper-2); padding: 6px 10px; cursor: pointer; min-height: 40px; }
.who button.on { border-color: var(--chili); background: #fff; font-weight: 700; }
.offer { background: #fffaf0; border-radius: 12px; padding: 10px; font-size: 14px; }
.offer b { color: var(--chili); }

.tabs { display: flex; gap: 6px; }
.tabs button { flex: 1; border: 0; border-radius: 10px; min-height: 36px; background: var(--paper-2); cursor: pointer; }
.tabs button.on { background: var(--indigo-3); color: #fff; font-weight: 700; }
.loglist { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.loglist div { padding: 4px 0; border-bottom: 1px dashed var(--line); }

.rank { display: flex; flex-direction: column; gap: 8px; }
.rank .r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fffaf0; font-size: 16px; }
.rank .r:first-child { background: linear-gradient(90deg, #ffe89a, #fff6d1); font-size: 18px; font-weight: 800; }
.rank .medal { font-size: 24px; width: 30px; text-align: center; }
.rank .w { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

.rules h4 { margin: 8px 0 4px; }
.rules p, .rules li { font-size: 14px; margin: 4px 0; }
.rules ul { padding-left: 20px; margin: 4px 0; }

/* ---------- 提示 ---------- */
#toasts {
  position: fixed; left: 0; right: 0; top: calc(var(--sat) + 60px); z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.toast {
  background: rgba(20, 24, 40, .92); color: #fff;
  padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: 86vw;
  animation: toastin .25s, fade .3s reverse forwards 2.4s;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.toast.err { background: rgba(170, 30, 30, .95); }
.toast.good { background: rgba(30, 120, 70, .95); }
@keyframes toastin { from { transform: translateY(-12px); opacity: 0; } }
.float {
  position: fixed; z-index: 70; pointer-events: none;
  font-weight: 900; font-size: 16px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  animation: floatup 1.4s ease-out forwards;
}
.float.plus { color: #7dffa8; }
.float.minus { color: #ff8a80; }
@keyframes floatup { to { transform: translateY(-36px); opacity: 0; } }
.net {
  position: fixed; top: var(--sat); left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--chili); color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 0 0 10px 10px;
}