/* ============================================================
 * style.css —— 全部样式
 *
 * 风格：宣纸 + 水墨 + 朱砂（与白底素描风棋盘、开始页统一）
 *   底色米白宣纸、文字墨黑、我方朱砂红、对方靛青、强调用暗金。
 *
 * 竖屏舞台：电脑和手机共用同一套布局。
 *   所有尺寸用 --u（= 舞台宽度的 1%）换算 —— 屏幕大小不同只是整体缩放，排版完全一致。
 * ============================================================ */

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 宣纸 / 水墨配色 */
  --paper: #f7f2e8;          /* 主底色：米白宣纸 */
  --paper-2: #efe7d7;        /* 面板底色：略深的纸 */
  --paper-3: #e6dcc8;        /* 卡位 / 按下态 */
  --ink: #2b2620;            /* 墨黑：主文字 */
  --ink-2: #5d554a;          /* 次要文字 */
  --ink-3: #9a8f80;          /* 弱提示文字 */
  --line: #d6c9b1;           /* 细分隔线 */
  --line-2: #bfae90;         /* 较重的边框 */
  --seal: #b8322a;           /* 朱砂红：我方 / 主按钮 */
  --seal-soft: rgba(184, 50, 42, .12);
  --indigo: #2f5f86;         /* 靛青：对方 */
  --indigo-soft: rgba(47, 95, 134, .12);
  --gold: #a87a12;           /* 暗金：金币 / 已触发 / 强调（浅底上可读） */
  --gold-soft: rgba(201, 150, 30, .16);
  --green-on: #3f8f4c;

  /* 兼容旧变量名 */
  --red: var(--seal);

  /* 舞台尺寸：竖屏，宽高比在 9:16 ~ 9:21 之间自适应（手机铺满，电脑居中截取竖屏区域） */
  --app-h: min(100dvh, calc(100vw * 21 / 9));
  --app-w: min(100vw, calc(var(--app-h) * 9 / 16));
  --u: calc(var(--app-w) / 100);
}

html, body { height: 100%; }

body {
  /* 舞台外两侧（电脑宽屏）：深一点的纸色，衬出中间竖屏区域 */
  background: #d9cfbd;
  color: var(--ink);
  font-family: 'GuoFeng', '仓耳周珂正大榜书', 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden { display: none !important; }

/* ============================================================
 * 竖屏舞台
 * ============================================================ */
#app {
  position: relative;
  width: var(--app-w);
  height: var(--app-h);
  overflow: hidden;
  background:
    radial-gradient(calc(140 * var(--u)) calc(90 * var(--u)) at 50% 0%, #fbf8f1, var(--paper) 60%, #efe6d4);
  box-shadow: 0 0 calc(5 * var(--u)) rgba(60, 40, 20, .25);
  font-size: calc(3.4 * var(--u));
}

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * 对局界面：顶栏 / 双棋盘 / 商店
 * ============================================================ */
#topbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(1.5 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2.5 * var(--u));
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.side-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0.8 * var(--u));
}
.side-info.opp { align-items: flex-end; text-align: right; }
.side-name {
  font-size: calc(3.2 * var(--u));
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.side-info.me .side-name { color: var(--seal); }
.side-info.opp .side-name { color: var(--indigo); }
.side-row { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.side-info.opp .side-row { justify-content: flex-end; }
.opp-head { display: flex; align-items: center; gap: calc(1.5 * var(--u)); max-width: 100%; justify-content: flex-end; }

.mid-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.6 * var(--u));
}
.wave-timer {
  font-size: calc(2.7 * var(--u));
  color: var(--seal);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gold-label { font-size: calc(3.4 * var(--u)); color: var(--ink-2); white-space: nowrap; }
.gold-label b { color: var(--gold); font-size: calc(4.2 * var(--u)); margin-left: calc(0.8 * var(--u)); }
.gold-label.dim b { color: var(--ink-3); }

.stat-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: calc(0.4 * var(--u)) calc(2.4 * var(--u));
  border-radius: 999px;
  color: var(--ink-2);
  font-size: calc(2.9 * var(--u));
  white-space: nowrap;
}

/* 红心 */
.lives { display: flex; gap: calc(0.8 * var(--u)); font-size: calc(4 * var(--u)); line-height: 1; }
.lives .heart { color: var(--seal); }
.lives .heart.off { color: #cfc5b4; }

/* 暂停按钮 */
.btn-pause {
  font-family: inherit;
  font-size: calc(3.6 * var(--u));
  width: calc(9 * var(--u));
  height: calc(7 * var(--u));
  border-radius: calc(1.6 * var(--u));
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.btn-pause:not(:disabled):hover { background: var(--paper-3); }
.btn-pause:disabled { opacity: 0.5; cursor: not-allowed; }

/* 头像（先留空，之后放素材） */
.avatar {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  border: calc(0.5 * var(--u)) dashed var(--line-2);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(6 * var(--u));
  color: var(--ink-3);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.avatar.small { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-width: 1px; font-size: calc(3 * var(--u)); }
.avatar.me-avatar { border-style: solid; border-color: var(--seal); color: var(--seal); background: var(--seal-soft); }

/* ---------- 双棋盘 ---------- */
#boards {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  padding: calc(1.2 * var(--u));
  overflow: hidden;                  /* 阵亡特写放大时裁在棋盘区内 */
}
#board-zoom {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.2 * var(--u));
  transform-origin: 0 0;
  will-change: transform;
}
/* 阵亡特写：帅头顶的「我投降」（放在缩放层里，跟着一起放大） */
.surrender-text {
  position: absolute;
  transform: translate(-50%, -100%) scale(0.6);
  opacity: 0;
  font-size: 15px;
  white-space: nowrap;
  color: #b8860b;
  -webkit-text-stroke: 0.6px #fff8e6;
  text-shadow: 0 0 3px #fff8e6, 0 1px 2px rgba(80, 50, 0, .45);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1);
  z-index: 5;
}
.surrender-text.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.board-wrap {
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-wrap canvas {
  display: block;
  border-radius: calc(1 * var(--u));
  touch-action: none;                /* 拖拽时不滚动页面 */
  box-shadow: 0 calc(0.6 * var(--u)) calc(2.4 * var(--u)) rgba(60, 40, 20, .18);
}
.board-wrap.me canvas  { outline: 2px solid var(--seal); }
.board-wrap.opp canvas { outline: 2px solid var(--indigo); }

/* 屏幕中央浮层（提示 / 浮字） */
#float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

/* ---------- 棋子详情面板 ---------- */
#detail-panel {
  position: absolute;
  top: calc(2.5 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: calc(76 * var(--u));
  max-height: calc(82% - 3 * var(--u));
  overflow-y: auto;
  background: rgba(251, 248, 241, .97);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--seal);
  border-radius: calc(2 * var(--u));
  padding: calc(2 * var(--u)) calc(2.8 * var(--u)) calc(2.4 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(60, 40, 20, .25);
  font-size: calc(3 * var(--u));
  color: var(--ink);
}
#detail-panel.opp-side { border-top-color: var(--indigo); }

.detail-head {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  border-bottom: 1px solid var(--line);
  padding-bottom: calc(1.2 * var(--u));
  margin-bottom: calc(1.6 * var(--u));
}
.detail-title { font-size: calc(4 * var(--u)); font-weight: bold; color: var(--ink); }
.detail-owner { font-size: calc(2.6 * var(--u)); padding: calc(0.3 * var(--u)) calc(1.6 * var(--u)); border-radius: 999px; }
.detail-owner.me  { background: var(--seal-soft); color: var(--seal); }
.detail-owner.opp { background: var(--indigo-soft); color: var(--indigo); }
.detail-color { font-size: calc(2.6 * var(--u)); padding: calc(0.3 * var(--u)) calc(1.6 * var(--u)); border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.detail-color.red   { background: var(--seal-soft); color: var(--seal); }
.detail-color.black { background: rgba(43, 38, 32, .1); color: var(--ink); }
.detail-close {
  margin-left: auto;
  cursor: pointer;
  color: var(--ink-3);
  font-size: calc(3.6 * var(--u));
}
.detail-close:hover { color: var(--ink); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(1.2 * var(--u)) calc(3.6 * var(--u));
  margin: calc(0.8 * var(--u)) 0;
}
.detail-grid > div { display: flex; justify-content: space-between; }
.detail-grid .k { color: var(--ink-3); }
.detail-grid b { color: var(--ink); }

.detail-exp { margin-top: calc(1.6 * var(--u)); }
.exp-label { font-size: calc(2.6 * var(--u)); color: var(--ink-3); margin-bottom: calc(0.6 * var(--u)); }
.exp-track {
  height: calc(1.6 * var(--u));
  background: var(--paper-3);
  border-radius: calc(0.8 * var(--u));
  overflow: hidden;
}
.exp-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4f9a5a, #79b86a);
  border-radius: calc(0.8 * var(--u));
}
.detail-cap { margin-top: calc(1.6 * var(--u)); color: var(--gold); font-size: calc(2.8 * var(--u)); }

/* 详情面板：等级 / 等阶 列表 */
.detail-sec {
  margin-top: calc(2 * var(--u));
  margin-bottom: calc(0.8 * var(--u));
  font-size: calc(2.8 * var(--u));
  color: var(--ink-2);
  letter-spacing: calc(0.4 * var(--u));
  border-top: 1px solid var(--line);
  padding-top: calc(1.2 * var(--u));
}
.fx-row {
  font-size: calc(2.7 * var(--u));
  line-height: 1.6;
  padding: 1px 0;
}
.fx-row.on  { color: var(--gold); }         /* 已触发：暗金 */
.fx-row.off { color: #9d917c; }             /* 未触发：浅褐灰 */
.fx-lv, .fx-bd {
  display: inline-block;
  min-width: calc(9 * var(--u));
  margin-right: calc(1.2 * var(--u));
  color: inherit;
  opacity: 0.9;
}
.fx-bd { min-width: calc(12 * var(--u)); }
.fx-tag {
  display: inline-block;
  margin-right: calc(1.2 * var(--u));
  padding: 0 calc(1 * var(--u));
  border: 1px solid currentColor;
  border-radius: calc(0.6 * var(--u));
  font-size: calc(2.3 * var(--u));
  line-height: 1.4;
  opacity: 0.85;
}
.fx-cur {
  margin-left: calc(1.2 * var(--u));
  padding: 0 calc(1 * var(--u));
  border-radius: calc(0.6 * var(--u));
  font-size: calc(2.3 * var(--u));
  background: var(--gold-soft);
}

/* 详情面板：攻击范围示意图 */
.range-box { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.range-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), calc(4.2 * var(--u)));
  grid-auto-rows: calc(4.2 * var(--u));
  gap: 2px;
  flex-shrink: 0;
}
.range-grid i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: calc(2.6 * var(--u));
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.range-grid i.self { background: var(--ink); color: #fbf8f1; border-color: var(--ink); font-weight: bold; }
.range-grid i.hit  { background: rgba(184, 50, 42, .75); border-color: var(--seal); }
.range-grid i.cond { background: rgba(184, 50, 42, .2); border: 1px dashed var(--seal); }
.range-text { font-size: calc(2.7 * var(--u)); line-height: 1.6; color: var(--ink-2); }
.range-legend { margin-top: calc(1 * var(--u)); font-size: calc(2.4 * var(--u)); color: var(--ink-3); }
.range-legend .lg {
  display: inline-block;
  width: calc(2.4 * var(--u));
  height: calc(2.4 * var(--u));
  vertical-align: middle;
  margin: 0 calc(0.8 * var(--u)) 0 calc(1.2 * var(--u));
  border-radius: 2px;
}
.range-legend .lg:first-child { margin-left: 0; }
.range-legend .lg.hit  { background: rgba(184, 50, 42, .75); }
.range-legend .lg.cond { background: rgba(184, 50, 42, .2); border: 1px dashed var(--seal); }
.range-note { margin-top: calc(0.8 * var(--u)); font-size: calc(2.3 * var(--u)); color: var(--indigo); }

/* ---------- 商店（屏幕下方横排） ---------- */
#shop {
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u)) calc(2.4 * var(--u));
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.shop-topbar {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  margin-bottom: calc(1.4 * var(--u));
}
.btn-refresh {
  background: var(--seal);
  border: 1px solid #962820;
  color: #fff8ec;
  font-family: inherit;
  font-size: calc(3.4 * var(--u));
  padding: calc(1.4 * var(--u)) calc(3.4 * var(--u));
  border-radius: calc(1.6 * var(--u));
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 calc(0.4 * var(--u)) 0 #8a231c;
}
.btn-refresh:disabled {
  background: #cfc5b4;
  border-color: #bfb3a0;
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
}
.btn-refresh:not(:disabled):hover { filter: brightness(1.08); }
.btn-refresh:not(:disabled):active { transform: translateY(calc(0.3 * var(--u))); box-shadow: none; }
.shop-hint { color: var(--ink-3); font-size: calc(2.6 * var(--u)); margin-left: auto; }

#shop-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(1.6 * var(--u));
}
.shop-slot {
  height: calc(25 * var(--u));
  border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, .25);
  border-radius: calc(1.6 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-slot.empty { background: rgba(255, 255, 255, .12); }

.shop-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.4 * var(--u));
  background: #fbf8f1;
  border: 1px solid var(--line-2);
  border-radius: calc(1.6 * var(--u));
  padding: calc(0.8 * var(--u));
  position: relative;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
  box-shadow: 0 calc(0.4 * var(--u)) calc(1 * var(--u)) rgba(60, 40, 20, .12);
}
.shop-card:active { cursor: grabbing; }
.shop-card.selected {
  border: 2px solid var(--gold);
  box-shadow: 0 0 calc(2 * var(--u)) rgba(201, 150, 30, .55);
}

/* 商店棋子卡：Lv / 名称居中 / 阶数 / 经验条 */
.piece-card-fig {
  position: relative;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  pointer-events: none;
  font-family: 'GuoFeng', 'Microsoft YaHei', sans-serif;
}
.piece-card-fig .piece-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.piece-card-fig .piece-lv {
  position: absolute; top: 1px; left: 0; right: 0;
  text-align: center; font-size: calc(2 * var(--u)); color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.piece-card-fig .piece-name-center {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; font-size: calc(4 * var(--u)); font-weight: bold; color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000; line-height: 1;
}
.piece-card-fig .piece-merge {
  position: absolute; bottom: calc(0.6 * var(--u)); left: 0; right: 0;
  text-align: center; font-size: calc(2 * var(--u)); color: #ffd75e;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.piece-card-fig .piece-expbar {
  position: absolute; bottom: calc(-1.4 * var(--u)); left: calc(0.8 * var(--u)); right: calc(0.8 * var(--u));
  height: calc(0.6 * var(--u)); background: var(--paper-3); border-radius: 2px; overflow: hidden;
}
.piece-card-fig .piece-expbar i { display: block; height: 100%; background: linear-gradient(90deg, #4f9a5a, #79b86a); }
.piece-card-fig .piece-cap {
  position: absolute; bottom: calc(-3.4 * var(--u)); left: 0; right: 0;
  text-align: center; font-size: calc(1.8 * var(--u)); color: var(--gold);
}

.shop-card .card-img { height: calc(10 * var(--u)); object-fit: contain; pointer-events: none; }
.shop-card .card-img.piece-img { height: calc(12 * var(--u)); width: calc(12 * var(--u)); }
.shop-card .card-name { font-size: calc(3 * var(--u)); color: var(--ink); }
.shop-card .card-name.spell-name { color: var(--seal); font-size: calc(3.4 * var(--u)); font-weight: bold; }
.shop-card .card-desc {
  font-size: calc(2.2 * var(--u));
  color: var(--ink-2);
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-price { font-size: calc(3 * var(--u)); font-weight: bold; color: var(--gold); }
.card-price.poor { color: var(--seal); }

.shop-card.from-board,
.shop-card:has(.piece-card-fig) { padding-bottom: calc(3 * var(--u)); }

.card-tier {
  position: absolute;
  top: calc(0.6 * var(--u));
  left: calc(0.8 * var(--u));
  font-size: calc(2.2 * var(--u));
  padding: 0 calc(1 * var(--u));
  border-radius: calc(0.8 * var(--u));
  background: var(--ink);
  color: #fbf8f1;
}
.shop-card:has(.spell-name) { padding-top: calc(4 * var(--u)); }
.tier-1 { background: #5b7a4a; }
.tier-2 { background: var(--indigo); }
.tier-3 { background: #7a4a9a; }

/*
 * 法术牌：绕着卡牌四周旋转的彩色边框（粉 → 紫 → 青 → 金 循环）。
 * 做法：卡牌里垫一个超大的锥形渐变层不停旋转，再用 ::after 盖一层纸色内芯，
 *       只露出边缘一圈 → 看起来就是一条流动的彩色边框。阶数越高转得越快、越亮。
 */
@property --spell-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.shop-card.spell-card {
  background: transparent;
  border-color: transparent;
  isolation: isolate;
}
.shop-card.spell-card > * { position: relative; z-index: 2; }
.shop-card.spell-card > .card-tier { position: absolute; }
.shop-card.spell-card::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(from 0deg,
    #ff5fa2, #c44dff, #6b6bff, #3fd0ff, #ffd24d, #ff8a3d, #ff5fa2);
  animation: spell-spin 3.2s linear infinite;
}
.shop-card.spell-card::after {
  content: '';
  position: absolute;
  inset: calc(0.6 * var(--u));
  z-index: 1;
  border-radius: calc(1.1 * var(--u));
  background: #fbf8f1;
}
.shop-card.spell-card.spell-t2::before { animation-duration: 2.4s; }
.shop-card.spell-card.spell-t3::before { animation-duration: 1.6s; filter: saturate(1.3) brightness(1.08); }
.shop-card.spell-card.spell-t3 { box-shadow: 0 0 calc(2.4 * var(--u)) rgba(196, 77, 255, .45); }
@keyframes spell-spin { to { transform: rotate(360deg); } }

/* 拖拽层：覆盖整个对局界面，只负责显示拖拽中的棋子 / 卡牌 */
#drag-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 140;                      /* 高于商店 / 详情面板，低于暂停、结算遮罩 */
}

/* 调试：对手商店（作弊码 seeshop） */
#opp-shop {
  position: absolute;
  right: calc(1.2 * var(--u));
  top: calc(16 * var(--u));
  z-index: 70;
  background: rgba(251, 248, 241, .95);
  border: 1px solid var(--indigo);
  border-radius: calc(1.2 * var(--u));
  padding: calc(1.2 * var(--u)) calc(1.8 * var(--u));
  font-size: calc(2.4 * var(--u));
  color: var(--indigo);
  line-height: 1.6;
  pointer-events: none;
  max-width: calc(46 * var(--u));
}

/* ---------- 浮字 / 提示 ---------- */
.gold-float {
  position: fixed;
  font-size: calc(3.4 * var(--u));
  font-weight: bold;
  pointer-events: none;
  z-index: 120;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
  animation: float-up 0.7s ease-out forwards;
}
.gold-float.plus  { color: var(--gold); }
.gold-float.minus { color: var(--seal); }

.flash-hint {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  padding: calc(1.6 * var(--u)) calc(4 * var(--u));
  background: rgba(43, 38, 32, .9);
  border: 1px solid var(--seal);
  border-radius: calc(1.6 * var(--u));
  color: #fff8ec;
  font-size: calc(3.2 * var(--u));
  z-index: 130;
  pointer-events: none;
  animation: hint-pop 1.2s ease-out forwards;
  white-space: nowrap;
}
@keyframes hint-pop {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
@keyframes float-up {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-28px); opacity: 0; }
}

/* ============================================================
 * 开始页
 * ============================================================ */
#start-screen {
  z-index: 200;
  background: transparent;           /* 用舞台的宣纸底色 */
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.start-inner {
  width: 100%;
  padding: 0 calc(8 * var(--u));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.start-logo {
  font-size: calc(13 * var(--u));
  letter-spacing: calc(3 * var(--u));
  color: var(--ink);
  margin-bottom: calc(2 * var(--u));
  font-weight: bold;
}
.start-sub {
  font-size: calc(3.6 * var(--u));
  letter-spacing: calc(1.2 * var(--u));
  color: var(--seal);
  margin-bottom: calc(7 * var(--u));
}

.rank-card {
  width: calc(60 * var(--u));
  padding: calc(4 * var(--u)) 0 calc(3.4 * var(--u));
  margin-bottom: calc(7 * var(--u));
  background: #fbf8f1;
  border: 2px solid var(--ink);
  border-radius: calc(3 * var(--u));
  box-shadow: 0 calc(0.8 * var(--u)) calc(2.4 * var(--u)) rgba(60, 40, 20, .12);
}
.rank-name { font-size: calc(7 * var(--u)); font-weight: bold; letter-spacing: calc(0.8 * var(--u)); color: var(--ink); }
.rank-stars { font-size: calc(4.6 * var(--u)); color: var(--gold); margin-top: calc(1.4 * var(--u)); }
.rank-extra { font-size: calc(2.6 * var(--u)); color: var(--ink-3); margin-top: calc(1.4 * var(--u)); }
.rank-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.rank-card:hover { transform: translateY(calc(-0.4 * var(--u))); box-shadow: 0 calc(1.4 * var(--u)) calc(3 * var(--u)) rgba(60, 40, 20, .18); }
.rank-hint { font-size: calc(2.3 * var(--u)); color: var(--seal); margin-top: calc(1 * var(--u)); opacity: .8; }

/* ---------- 段位明细 ---------- */
#rank-detail { z-index: 210; }       /* 开始页是 200，明细要盖在它上面 */
.rank-detail-box {
  width: calc(88 * var(--u));
  max-height: 86%;
  display: flex;
  flex-direction: column;
  background: #fbf8f1;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--seal);
  border-radius: calc(3 * var(--u));
  padding: calc(3.4 * var(--u)) calc(3.6 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(60, 40, 20, .25);
  color: var(--ink);
}
.rank-detail-head { display: flex; align-items: center; margin-bottom: calc(1.4 * var(--u)); }
.rank-detail-title { font-size: calc(5 * var(--u)); letter-spacing: calc(0.8 * var(--u)); }
.rank-detail-rule { font-size: calc(2.5 * var(--u)); color: var(--ink-3); line-height: 1.5; margin-bottom: calc(2 * var(--u)); }
.rank-detail-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); padding-right: calc(0.6 * var(--u)); }
.rd-tier {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: calc(1.8 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2 * var(--u));
  background: var(--paper);
}
.rd-tier.cur { border: 2px solid var(--seal); background: #fff; box-shadow: 0 0 calc(2 * var(--u)) rgba(184, 50, 42, .18); }
.rd-tier.todo { opacity: .55; }
.rd-tier-head { display: flex; align-items: baseline; gap: calc(1.8 * var(--u)); margin-bottom: calc(1 * var(--u)); }
.rd-tier-name {
  font-size: calc(4 * var(--u));
  color: var(--ink);
  border-bottom: calc(0.6 * var(--u)) solid var(--tc);
  line-height: 1.1;
}
.rd-tier-meta { font-size: calc(2.3 * var(--u)); color: var(--ink-3); }
.rd-tag { margin-left: auto; font-size: calc(2.3 * var(--u)); padding: calc(0.2 * var(--u)) calc(1.6 * var(--u)); border-radius: 999px; }
.rd-tag.done { background: var(--gold-soft); color: var(--gold); }
.rd-tag.cur  { background: var(--seal); color: #fff8ec; }
.rd-tag.todo { background: var(--paper-3); color: var(--ink-3); }
.rd-subs { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }
.rd-sub {
  font-size: calc(2.5 * var(--u));
  padding: calc(0.4 * var(--u)) calc(1.4 * var(--u));
  border-radius: calc(1 * var(--u));
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.rd-sub i { font-style: normal; margin-left: calc(0.8 * var(--u)); letter-spacing: -1px; }
.rd-sub.done { color: var(--ink-2); background: #fff; }
.rd-sub.done i { color: var(--gold); }
.rd-sub.cur { color: #fff8ec; background: var(--seal); border-color: var(--seal); }
.rd-sub.cur i { color: #ffe08a; }
.rd-sub.gap { border: none; background: none; padding-left: 0; padding-right: 0; }

/* 通用按钮：墨线框，悬停填墨 */
.start-btn {
  font-family: inherit;
  font-size: calc(4.4 * var(--u));
  letter-spacing: calc(0.8 * var(--u));
  padding: calc(2.8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(2 * var(--u));
  border: 2px solid var(--ink);
  background: #fbf8f1;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.start-btn:hover { background: var(--ink); color: #fbf8f1; }
.start-btn.small { font-size: calc(3.4 * var(--u)); padding: calc(1.8 * var(--u)) calc(7 * var(--u)); }
.start-btn.danger { color: var(--seal); border-color: var(--seal); }
.start-btn.danger:hover { background: var(--seal); color: #fff8ec; }
/* 开始页主按钮：朱砂红 */
#btn-start { background: var(--seal); border-color: var(--seal); color: #fff8ec; }
#btn-start:hover { filter: brightness(1.08); }

.start-tip {
  margin-top: calc(5 * var(--u));
  font-size: calc(2.8 * var(--u));
  color: var(--ink-3);
}

/* 作弊码输入区 */
.cheat-box {
  width: calc(76 * var(--u));
  margin-top: calc(6 * var(--u));
}
.cheat-input {
  width: 100%;
  font-family: inherit;
  font-size: calc(3.2 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
  border: 1px solid var(--line-2);
  border-radius: calc(1.6 * var(--u));
  outline: none;
  background: #fbf8f1;
  color: var(--ink);
  user-select: text;
  -webkit-user-select: text;
}
.cheat-input:focus { border-color: var(--ink); }
.cheat-out {
  margin-top: calc(1.2 * var(--u));
  font-family: inherit;
  font-size: calc(2.5 * var(--u));
  color: var(--ink-2);
  text-align: left;
  white-space: pre-wrap;
  max-height: calc(36 * var(--u));
  overflow-y: auto;
}
.cheat-out.err { color: var(--seal); }

/* ============================================================
 * 匹配页
 * ============================================================ */
#match-screen {
  z-index: 190;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.match-inner { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.match-vs { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.match-player { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); width: calc(34 * var(--u)); }
.match-pname { font-size: calc(3.4 * var(--u)); text-align: center; word-break: break-all; min-height: 2.6em; }
.match-rank { font-size: calc(2.8 * var(--u)); color: var(--ink-3); }
.vs { font-size: calc(9 * var(--u)); font-weight: bold; color: var(--seal); letter-spacing: calc(1 * var(--u)); }
.avatar.searching { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.match-status { font-size: calc(4 * var(--u)); letter-spacing: calc(0.6 * var(--u)); }
.match-timer { font-size: calc(3.2 * var(--u)); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ============================================================
 * 遮罩：暂停 / 结算 / 增益（浅纸色半透明 + 纸面卡片）
 * ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(239, 231, 215, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  backdrop-filter: blur(3px);
}

.pause-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  background: #fbf8f1;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--ink);
  border-radius: calc(3 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(60, 40, 20, .2);
}
.pause-title {
  font-size: calc(8 * var(--u));
  color: var(--ink);
  letter-spacing: calc(2 * var(--u));
}
.pause-box .cheat-box { margin-top: calc(2 * var(--u)); }

.game-over-box {
  width: calc(84 * var(--u));
  background: #fbf8f1;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--gold);
  border-radius: calc(3 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u));
  text-align: center;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(60, 40, 20, .2);
}
.game-over-box.lose { border-top-color: var(--seal); }
.game-over-title {
  font-size: calc(10 * var(--u));
  letter-spacing: calc(2 * var(--u));
  color: var(--gold);
  margin-bottom: calc(3 * var(--u));
}
.game-over-box.lose .game-over-title { color: var(--seal); }
.game-over-rank { font-size: calc(3.8 * var(--u)); line-height: 1.7; margin-bottom: calc(3 * var(--u)); color: var(--ink); }
.game-over-rank .ev { color: var(--gold); font-size: calc(3.2 * var(--u)); }
.game-over-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(1.6 * var(--u)) calc(4 * var(--u));
  margin-bottom: calc(5 * var(--u));
  font-size: calc(3.2 * var(--u));
  padding-top: calc(3 * var(--u));
  border-top: 1px solid var(--line);
}
.game-over-stats .k { color: var(--ink-3); margin-right: calc(1.6 * var(--u)); }
.game-over-stats b { color: var(--ink); }

.bonus-box { width: calc(92 * var(--u)); text-align: center; }
.bonus-title {
  font-size: calc(6 * var(--u));
  color: var(--ink);
  letter-spacing: calc(1.2 * var(--u));
  margin-bottom: calc(3.6 * var(--u));
}
.bonus-cards { display: grid; grid-template-columns: 1fr; gap: calc(3 * var(--u)); }
.bonus-card {
  background: #fbf8f1;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--seal);
  border-radius: calc(2.4 * var(--u));
  padding: calc(4 * var(--u)) calc(3 * var(--u));
  cursor: pointer;
}
.bonus-card-name { font-size: calc(4.4 * var(--u)); color: var(--seal); margin-bottom: calc(2 * var(--u)); }
.bonus-card-desc { font-size: calc(3 * var(--u)); color: var(--ink-2); line-height: 1.6; }