:root {
  --bg: #0e0c0a;
  --panel: #1a1613;
  --panel-2: #221c17;
  --line: #322a23;
  --gold: #c9a063;
  --gold-2: #e8cd96;
  --text: #f0e7d9;
  --muted: #a2937e;
  --red: #c0392b;
  --green: #6fbf8f;
  --wood-1: #f2d8aa;
  --wood-2: #e0ba85;
  --wood-3: #c99a63;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

/* 预留滚动条位置：右侧内容高度变化时，页面不会被挤得左右跳 */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(201, 160, 99, 0.16), transparent 70%),
    radial-gradient(50% 40% at 100% 10%, rgba(150, 60, 40, 0.12), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(90, 60, 30, 0.18), transparent 70%);
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 1024px;
  margin: 0 auto;
  padding: 22px 24px 40px;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.brand { display: flex; align-items: center; gap: 14px; }

.seal {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, #b5352a, #8c221a);
  color: #ffe9c9;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 30px;
  box-shadow: 0 8px 20px -8px rgba(180, 50, 35, 0.9), inset 0 0 0 1px rgba(255, 220, 180, 0.35);
}

.brand-text h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
}

.brand-text p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.field select {
  appearance: none;
  background: var(--panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23a2937e'/></svg>") no-repeat right 9px center;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 26px 8px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.field select:hover { border-color: #4a3d31; }
.field select:focus { border-color: var(--gold); }

.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.btn:hover { border-color: #54453a; background: #2a231d; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: linear-gradient(160deg, #e2c07f, #c39a58);
  border-color: #d8b573;
  color: #2a1c0c;
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(220, 180, 110, 0.9);
}

.btn.primary:hover { background: linear-gradient(160deg, #edd096, #cfa868); }

.btn.ghost { background: transparent; }
.btn.tiny { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ---------- 布局 ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 24px;
  align-items: stretch;
}

.board-col { min-width: 0; }

/* 右侧面板开关：关掉后棋盘列独占并居中 */
body.panel-off .panel { display: none; }
body.panel-off .layout { grid-template-columns: minmax(0, 1fr); }
body.lights-off .legend span:not(.lg-tip) { display: none; }

/* ---------- 棋盘 ---------- */
.board-frame {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 13px;
  background:
    repeating-linear-gradient(93deg, rgba(120, 70, 20, 0.045) 0 2px, rgba(255, 255, 255, 0) 2px 11px),
    radial-gradient(120% 110% at 16% 0%, var(--wood-1) 0%, var(--wood-2) 44%, var(--wood-3) 100%);
  box-shadow:
    0 34px 60px -26px rgba(0, 0, 0, 0.9),
    0 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 0 0 1px rgba(80, 45, 15, 0.45),
    0 0 60px rgba(120, 70, 20, 0.16) inset;
}

.board-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1px solid rgba(95, 55, 15, 0.28);
  pointer-events: none;
}

.board-host { position: relative; width: 100%; aspect-ratio: 620 / 680; }
.board-svg { display: block; width: 100%; height: 100%; }

/* 推演模式：整块棋盘压暗 + 角标，和正常对局区分开 */
.trial-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
  border-radius: inherit;
  background: rgba(8, 6, 4, 0.42);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tv-badge {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(226, 192, 127, 0.95);
  color: #2a1c0c;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.board-svg .gl {
  stroke: #6b4a2f;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.board-svg .frame-line {
  fill: none;
  stroke: #6b4a2f;
  stroke-width: 3.4;
}

.board-svg .frame-line.inner { stroke-width: 1.3; stroke-opacity: 0.7; }

.board-svg .river {
  fill: rgba(88, 53, 20, 0.55);
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 26px;
  letter-spacing: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.board-svg .mark { stroke: #6b4a2f; stroke-width: 1.6; fill: none; opacity: 0.85; }

.board-svg .coord {
  fill: rgba(78, 46, 16, 0.8);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
}

.piece text {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-weight: 700;
  font-size: 33px;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
}

.piece.red text { fill: #a8241b; }
.piece.black text { fill: #241f1a; }
.piece circle.body { stroke: #a97c46; stroke-width: 1.7; }
.piece circle.ring { fill: none; stroke: rgba(140, 100, 55, 0.42); stroke-width: 1.1; }
.piece { pointer-events: none; }

.lm { fill: rgba(190, 140, 50, 0.26); stroke: rgba(140, 95, 30, 0.35); stroke-width: 1.2; }
.sel { fill: none; stroke: #f3cd77; stroke-width: 3.6; }
.chk { fill: none; stroke: #d3402f; stroke-width: 3.4; }
.mvdot { fill: rgba(58, 34, 10, 0.32); }
.mvdot.safe { fill: rgba(62, 224, 138, 0.92); filter: drop-shadow(0 0 4px rgba(62, 224, 138, 0.8)); }
.mvdot.danger { fill: rgba(239, 75, 51, 0.95); filter: drop-shadow(0 0 4px rgba(239, 75, 51, 0.8)); }
.capring { fill: none; stroke: rgba(160, 32, 22, 0.6); stroke-width: 3.2; }
.capring.safe { stroke: rgba(62, 224, 138, 0.95); stroke-width: 3.6; filter: drop-shadow(0 0 4px rgba(62, 224, 138, 0.7)); }
.capring.danger { stroke: rgba(239, 75, 51, 0.95); stroke-width: 3.6; filter: drop-shadow(0 0 4px rgba(239, 75, 51, 0.7)); }

/* 提示：绿色圈，够粗 + 发光 + 呼吸，避免看不清 */
.hintring {
  fill: rgba(74, 222, 128, 0.14);
  stroke: #4ade80;
  stroke-width: 4.5;
  stroke-dasharray: 9 5;
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.95));
  animation: hintPulse 1.05s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { stroke-width: 4.5; opacity: 1; }
  50% { stroke-width: 6.5; opacity: 0.7; }
}

.hit { fill: transparent; }
.hit.live { cursor: pointer; }
.hit.live:hover { fill: rgba(255, 240, 200, 0.09); }

/* ---------- 状态条 ---------- */
.statusline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: 14px;
  min-height: 24px;
}

.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  flex: none;
}

.dot.red { background: #d2453a; box-shadow: 0 0 12px rgba(210, 69, 58, 0.7); }
.dot.black { background: #cfc4b2; box-shadow: 0 0 12px rgba(220, 210, 190, 0.4); }
.dot.think { animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

#statusText { font-weight: 500; letter-spacing: 0.4px; }
#statusText.warn { color: #ff8a7a; }
#statusText.win { color: #8fe0b0; }

/* 棋盘下方操作按钮 */
.board-actions {
  display: flex;
  gap: 10px;
  margin: 10px 4px 0;
}

.board-actions .btn { min-width: 92px; }
.board-actions #btnNew { margin-left: auto; }

/* 预演（3 步展望） */
.preview {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 2px solid rgba(201, 160, 99, 0.45);
  background: rgba(201, 160, 99, 0.07);
  font-size: 11.8px;
  line-height: 1.7;
  color: #cbbba4;
}

.preview b { color: #d8b26a; font-weight: 400; margin-right: 6px; }

/* 推演条 */
.trial-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(201, 160, 99, 0.35);
  background: rgba(201, 160, 99, 0.08);
  font-size: 12px;
  color: #d8c6a4;
}

.tb-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, #e2c07f, #c39a58);
  color: #2a1c0c;
  font-size: 10px;
  letter-spacing: 1px;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ghost.on { color: #8fd6a8; border-color: rgba(120, 190, 140, 0.45); }
.btn.ghost.off { color: #e08d7d; border-color: rgba(210, 90, 70, 0.5); background: rgba(210, 90, 70, 0.08); }

#trialInfo { flex: 1; font-variant-numeric: tabular-nums; }

.engine-info {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.quicklinks {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  padding: 0 4px;
}

.link {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.link:hover { color: var(--gold-2); border-color: rgba(201, 160, 99, 0.5); }
.link.on { color: #8fd6a8; }

/* ---------- 右侧面板 ---------- */
.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.card {
  background: linear-gradient(180deg, rgba(34, 28, 23, 0.92), rgba(24, 20, 17, 0.92));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.card-head .ch-name { text-transform: none; letter-spacing: 0.6px; color: #e8d3a8; }

.tag {
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--gold-2);
  background: rgba(201, 160, 99, 0.12);
  border: 1px solid rgba(201, 160, 99, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: none;
  white-space: nowrap;
}

.book-card h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: 0.6px; font-weight: 600; }
.book-card p { margin: 0; font-size: 12.8px; line-height: 1.7; color: var(--muted); }

.book-next {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: #cbb58e;
  line-height: 1.65;
  min-height: 18px;
}

.moves-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.move-list {
  overflow-y: auto;
  flex: 1;
  min-height: 90px;
  margin: 0 -6px;
  padding: 0 6px;
  scrollbar-width: thin;
  scrollbar-color: #3a312a transparent;
}

.move-list::-webkit-scrollbar { width: 6px; }
.move-list::-webkit-scrollbar-thumb { background: #3a312a; border-radius: 3px; }

.mv-row {
  display: grid;
  grid-template-columns: 30px 1fr 1fr;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  padding: 3px 0;
}

.mv-no { color: #6d6155; font-size: 11.5px; font-variant-numeric: tabular-nums; }

.mv-cell {
  padding: 3px 7px;
  border-radius: 7px;
  cursor: pointer;
  color: #ddd0bd;
  transition: background 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.mv-cell:hover { background: rgba(201, 160, 99, 0.12); }
.mv-cell.cur { background: rgba(201, 160, 99, 0.22); color: #ffe9c0; font-weight: 600; }
.mv-cell.empty { cursor: default; color: #4b423a; }
.mv-cell.empty:hover { background: none; }

.empty-moves {
  color: #8c7f6d;
  font-size: 12.8px;
  padding: 6px 2px;
  line-height: 1.75;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.empty-moves p { margin: 0 0 10px; color: #a2937e; }

.empty-hints {
  margin: 0;
  padding-left: 16px;
  font-size: 12.2px;
  line-height: 1.8;
  color: #7d7161;
}

.empty-hints b { color: #b7a488; font-weight: 500; }

#btnLive { margin-top: 10px; align-self: flex-start; }

/* ---------- 子力卡 ---------- */
.material-card { flex: none; }

.mat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.mat-row:last-child { margin-bottom: 0; }
.mat-side { flex: none; width: 14px; font-size: 11.5px; color: var(--muted); }
.mat-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 15px;
  line-height: 1;
}

.chip i {
  font-style: normal;
  font-family: "Microsoft YaHei", system-ui, sans-serif;
  font-size: 10px;
  opacity: 0.7;
  margin-left: 1px;
}

.chip.red { color: #e79c8e; background: rgba(190, 60, 45, 0.12); border-color: rgba(190, 60, 45, 0.22); }
.chip.black { color: #ded2bc; background: rgba(220, 210, 190, 0.08); border-color: rgba(220, 210, 190, 0.14); }
.chip.none { font-family: inherit; font-size: 12px; color: var(--muted); background: none; border: none; padding-left: 0; }

.mat-note {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: #7d7161;
  letter-spacing: 0.3px;
}

/* ---------- 教练卡 ---------- */
.coach-card { flex: none; }

.intent-head {
  font-size: 12.5px;
  color: #a2937e;
  margin-bottom: 5px;
}

.intent-head b {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 17px;
  font-weight: 400;
  color: #ffe0a8;
  letter-spacing: 1px;
  margin-left: 2px;
}

.intent-detail {
  margin: 0 0 4px;
  font-size: 12.2px;
  line-height: 1.7;
  color: var(--muted);
}

.intent-detail b { color: #ecd9b6; font-weight: 500; }

.coach-sub {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #7d7161;
}

.cm-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 32px 44px 28px;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(50, 42, 35, 0.65);
}

.cm-row:last-child { border-bottom: none; }
.cm-row.knife-row { cursor: pointer; }
.cm-row.knife-row:hover { background: rgba(220, 140, 80, 0.07); }

.knife-detail {
  margin: -2px 0 8px 24px;
  padding: 7px 10px;
  border-left: 2px solid rgba(220, 140, 80, 0.5);
  background: rgba(220, 140, 80, 0.07);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c9b79c;
}

.hit.pv { fill: rgba(255, 205, 110, 0.14); stroke: #ffd27a; stroke-width: 2.5; stroke-dasharray: 6 5; filter: drop-shadow(0 0 7px rgba(255, 190, 90, 0.95)); }
.hit.pv-to { fill: rgba(255, 190, 80, 0.46); stroke: #ffe3a6; stroke-width: 3.5; stroke-dasharray: none; }
.hit.pv-from { fill: rgba(255, 205, 110, 0.06); }

.pv-ghost { pointer-events: none; }
.pv-line { stroke: #ffd27a; stroke-width: 3.5; stroke-dasharray: 9 6; opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 190, 90, 0.9)); }
.pv-piece { opacity: 0.45; filter: drop-shadow(0 0 10px rgba(255, 200, 100, 0.9)); }
.cm-rank { font-size: 11px; color: #6d6155; }
.cm-move { font-family: "KaiTi", "STKaiti", serif; font-size: 16.5px; color: #ffe4b8; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; }
.cm-row.top .cm-move { color: #ffd88f; }
.cm-tag { font-size: 10px; color: #9a8b76; text-align: center; border: 1px solid #3a3128; border-radius: 999px; padding: 1px 0; white-space: nowrap; }
.cm-row.top .cm-tag { color: #ffd88f; border-color: rgba(201, 160, 99, 0.4); }
.cm-score { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cm-score.g-good { color: #8fd6a8; }
.cm-score.g-ok { color: #d8c6a4; }
.cm-score.g-warn { color: #e0b070; }
.cm-score.g-bad { color: #e08d7d; }

.cm-play {
  background: transparent;
  border: 1px solid #3a3128;
  color: #b7a488;
  border-radius: 7px;
  font-size: 10.5px;
  padding: 3px 0;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.cm-play:hover { color: #ffe0a8; border-color: rgba(201, 160, 99, 0.55); }

.coach-wait { padding: 16px 0; text-align: center; font-size: 12.3px; color: #8c7f6d; }

/* ---------- 折叠区 ---------- */
.card-toggle {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 7px 0 0;
  border: none;
  border-top: 1px dashed var(--line);
  background: none;
  color: #8a7c68;
  font-family: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}

.card-toggle:hover { color: var(--gold-2); }

.fold-list { margin-top: 4px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a312a transparent; }

.fold-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(50, 42, 35, 0.55);
  font-size: 11.8px;
}

.fold-row:last-child { border-bottom: none; }
.fold-name { flex: 1; color: #d5c5a9; }
.fold-tag { color: #7d7161; font-size: 10.2px; white-space: nowrap; }

.fold-btn {
  flex: none;
  border: 1px solid #3a3128;
  background: none;
  color: #b7a488;
  border-radius: 7px;
  font-size: 10.5px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
}

.fold-btn:hover { color: #ffe0a8; border-color: rgba(201, 160, 99, 0.55); }

.cm-tag.knife { color: #e8a06a; border-color: rgba(220, 140, 80, 0.4); }
.cm-tag.trap { color: #e08d7d; border-color: rgba(210, 90, 70, 0.45); background: rgba(210, 90, 70, 0.08); }
.cm-tag.kill { color: #ffd88f; border-color: rgba(255, 200, 100, 0.55); background: rgba(201, 160, 99, 0.14); }

.coach-note {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.2px;
  line-height: 1.6;
  color: #7d7161;
}

/* 局面评估条 */
.eval-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 4px 0;
}

.eb-track {
  position: relative;
  flex: 1;
  height: 12px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 99, 0.28);
  background: #241f1a;
}

.eb-half {
  position: relative;
  flex: 1;
  height: 100%;
}

.eb-half i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  transition: width 0.3s ease;
}

/* 左半 = 对手（红），右半 = 你（绿） */
.eb-half-l i {
  right: 0;
  background: linear-gradient(90deg, #ff8a7a, #d2453a);
}

.eb-half-r i {
  left: 0;
  background: linear-gradient(90deg, #3ecf7f, #1f9e5a);
}

.eb-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 240, 200, 0.35);
}

.eval-bar b {
  min-width: 92px;
  text-align: right;
  font-size: 13px;
  color: #ffe0a8;
  font-variant-numeric: tabular-nums;
}

/* 局面诊断 */
.diag { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.dg-line { font-size: 11.8px; line-height: 1.65; color: #b9a888; }
.dg-line b { display: inline-block; min-width: 54px; color: #8b7c66; font-weight: 400; }
.dg-bad { color: #e08d7d; }
.dg-good { color: #8fd6a8; }
.dg-dir { color: #ffd88f; }
.lr-impact { margin: 4px 0 0; font-size: 11.2px; line-height: 1.6; color: #b9a888; }
.lr-ok { color: #8fd6a8; }
.dg-plan { color: #9fc7ea; }

/* ---------- 上一步评价 ---------- */
.last-review {
  margin: 0 0 11px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #3a3128;
  background: rgba(255, 255, 255, 0.02);
}

.last-review.lr-good { border-color: rgba(120, 190, 140, 0.28); background: rgba(80, 160, 110, 0.07); }
.last-review.lr-warn { border-color: rgba(210, 165, 90, 0.3); background: rgba(210, 165, 90, 0.07); }
.last-review.lr-bad { border-color: rgba(210, 90, 70, 0.32); background: rgba(210, 90, 70, 0.08); }

.lr-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10.8px;
  color: #8a7c68;
}

.lr-head b {
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 15px;
  font-weight: 400;
  color: #ffd9a0;
  letter-spacing: 0.5px;
}

.lr-head em { margin-left: auto; font-style: normal; font-size: 11px; color: #b7a488; }
.lr-good .lr-head em { color: #8fd6a8; }
.lr-bad .lr-head em { color: #e08d7d; }

.last-review p { margin: 3px 0 0; font-size: 11.6px; line-height: 1.6; color: var(--muted); }

.last-review .lr-why {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(130, 105, 75, 0.28);
  font-size: 11.2px;
  line-height: 1.65;
  color: #bda98a;
}

/* 候选着法的好处 */
.cm-move { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cm-move b { font-weight: 400; }
.cm-move i {
  font-style: normal;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 10px;
  color: #8a7c68;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 终局小结 ---------- */
.sum-card { padding: 6px 0 2px; text-align: center; }
.sum-card-head { font-size: 14px; color: #e8d5b0; margin-bottom: 4px; }
.sum-card-line { font-size: 11.8px; color: var(--muted); margin-bottom: 10px; }

.sum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 12px;
}

.sum-stat {
  padding: 12px 8px;
  text-align: center;
  border-radius: 11px;
  border: 1px solid rgba(201, 160, 99, 0.16);
  background: rgba(201, 160, 99, 0.07);
}

.sum-stat b { display: block; font-size: 24px; font-weight: 600; color: #ffd9a0; }
.sum-stat span { font-size: 11px; color: var(--muted); }

.sum-line { margin: 6px 0; font-size: 12.6px; color: #c2b39e; }
.sum-sub { margin: 16px 0 8px; font-size: 11px; letter-spacing: 1.4px; color: #7d7161; }
.sum-moves { margin: 0; padding: 0; list-style: none; }

.sum-moves li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

.sum-moves b {
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 15px;
  font-weight: 400;
  color: #ffe0a8;
}

.sum-moves em { font-style: normal; color: #e08d7d; font-size: 11.5px; }
.sum-round { color: #6d6155; font-size: 11px; }
.sum-better { color: #9fbfa8; font-size: 11.5px; }
.sum-why { flex-basis: 100%; font-size: 11.5px; line-height: 1.65; color: #a2937e; }

/* 五维图 */
.radar-wrap { display: flex; justify-content: center; margin: 8px 0 2px; }
.rd-svg { width: 100%; max-width: 360px; height: auto; }
.rd-ring { fill: none; stroke: rgba(200, 180, 150, 0.16); stroke-width: 1; }
.rd-axis { stroke: rgba(200, 180, 150, 0.14); stroke-width: 1; }
.rd-data { fill: rgba(201, 160, 99, 0.26); stroke: #d8b26a; stroke-width: 2; stroke-linejoin: round; }
.rd-dot { fill: #ffe0a0; }
.rd-label { fill: #b9a888; font-size: 11px; text-anchor: middle; }
.rd-value { fill: #ffd88f; font-size: 11.5px; font-weight: 600; text-anchor: middle; }

/* 走势图 */
.timeline { margin: 14px 0 4px; }
.tl-svg {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.tl-zero { stroke: rgba(200, 180, 150, 0.25); stroke-width: 1; stroke-dasharray: 4 4; }
.tl-line { fill: none; stroke: #d8b26a; stroke-width: 2; stroke-linejoin: round; }
.tl-dot { fill: #e8cd96; cursor: pointer; }
.tl-dot:hover { fill: #fff3cf; }
.tl-dot.bad { fill: #e0604a; }
.tl-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10.5px;
  color: #7d7161;
}

/* 评级小标签 */
.lr-grade {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.lr-grade.g-good { color: #8fd6a8; border-color: rgba(120, 190, 140, 0.4); background: rgba(80, 160, 110, 0.12); }
.lr-grade.g-ok { color: #d8c6a4; border-color: rgba(200, 180, 150, 0.3); }
.lr-grade.g-warn { color: #e0b070; border-color: rgba(220, 170, 90, 0.35); }
.lr-grade.g-bad { color: #e08d7d; border-color: rgba(210, 90, 70, 0.4); background: rgba(210, 90, 70, 0.12); }

.sum-tip {
  margin: 16px 0 14px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #cbbba4;
  background: rgba(201, 160, 99, 0.06);
  border-left: 3px solid rgba(201, 160, 99, 0.35);
  border-radius: 0 8px 8px 0;
}

/* ---------- 被攻击警示 ---------- */
.threat { fill: none; stroke-width: 3; }
.threat.hard { stroke: #ef4b33; stroke-width: 3.2; animation: threatPulse 1.5s ease-in-out infinite; }
/* 绿色：你能安全吃掉的对方子（白吃或小换大） */
.threat.gain {
  stroke: #3ee08a;
  stroke-width: 3.6;
  filter: drop-shadow(0 0 6px rgba(62, 224, 138, 0.85));
  animation: threatPulse 1.7s ease-in-out infinite;
}
.threat.soft { stroke: rgba(224, 168, 84, 0.78); stroke-width: 2.2; animation: threatPulse 2.4s ease-in-out infinite; }

@keyframes threatPulse {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

.badge circle { fill: #d8452f; stroke: rgba(30, 8, 4, 0.55); stroke-width: 1; }
.badge text {
  fill: #fff;
  font-family: "Microsoft YaHei", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.anim-ghost { pointer-events: none; }

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 4px 0;
  font-size: 11.2px;
  color: #857a6a;
}

.legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}

.legend i.hard { background: #e5533d; box-shadow: 0 0 7px rgba(229, 83, 61, 0.75); }
.legend i.safe { background: #3ee08a; box-shadow: 0 0 7px rgba(62, 224, 138, 0.8); }
.legend i.soft { background: #d9a45b; }
.legend .lg-tip { margin-left: auto; color: #6d6155; font-size: 10.8px; }

.hidden { display: none !important; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 5, 4, 0.72);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  width: min(880px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #211c17, #171310);
  border: 1px solid #3a3128;
  border-radius: 18px;
  padding: 26px 28px 30px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  scrollbar-width: thin;
  scrollbar-color: #3a312a transparent;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -8px -10px 0 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #241e19;
  color: var(--muted);
  font-size: 19px;
  cursor: pointer;
  z-index: 2;
}

.modal-close:hover { color: var(--text); border-color: #4a3d31; }

.modal-title { margin: 0 0 6px; font-size: 21px; letter-spacing: 1px; }
.modal-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.pr {
  background: rgba(201, 160, 99, 0.07);
  border: 1px solid rgba(201, 160, 99, 0.18);
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 12.3px;
  line-height: 1.65;
  color: var(--muted);
}

.pr b { display: block; color: var(--gold-2); font-size: 13px; margin-bottom: 3px; letter-spacing: 0.6px; }

.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.op-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 16px;
  background: rgba(30, 25, 21, 0.6);
  display: flex;
  flex-direction: column;
}

.op-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.op-head h3 { margin: 0; font-size: 15.5px; letter-spacing: 0.5px; }
.op-card p { margin: 0 0 10px; font-size: 12.4px; line-height: 1.72; color: var(--muted); }
.op-card ul { margin: 0 0 12px; padding-left: 17px; font-size: 12.2px; line-height: 1.75; color: #c2b39e; }
.op-card li { margin-bottom: 4px; }

.op-line {
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 13px;
  color: #b9a482;
  background: rgba(0, 0, 0, 0.24);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  line-height: 1.75;
  letter-spacing: 0.5px;
}

.op-line b { color: #8a775c; font-weight: 400; }

.op-card .btn { align-self: flex-start; margin-top: auto; }

.tac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tac {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px;
  background: rgba(30, 25, 21, 0.55);
}

.tac h3 { margin: 0 0 6px; font-size: 14.5px; color: var(--gold-2); letter-spacing: 0.5px; }
.tac p { margin: 0 0 8px; font-size: 12.3px; line-height: 1.72; color: var(--muted); }
.tac .k { color: #d8c4a2; }

.rule-list { font-size: 13px; line-height: 1.9; color: #cbbba4; padding-left: 20px; }
.rule-list li { margin-bottom: 6px; }
.rule-list b { color: var(--gold-2); }

/* ---------- 响应式 ---------- */
@media (max-width: 940px) {
  .layout { grid-template-columns: 1fr; }
  .panel { order: 2; }
  .board-col { max-width: 620px; margin: 0 auto; width: 100%; }
  .move-list { max-height: 220px; }
  .principles, .op-grid, .tac-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .app { padding: 14px 12px 30px; }
  .brand-text h1 { font-size: 19px; }
  .toolbar { width: 100%; }
  .btn { padding: 8px 12px; }
}

/* ---------- 复盘模式 ---------- */
.rv-head { font-size: 13px; color: #e6d7bd; margin: 2px 0 6px; }
.rv-head b { color: #ffd88f; }
.rv-line { font-size: 11.8px; line-height: 1.7; color: #b9a888; }
.rv-line b { color: #e8d3a8; }
.rv-nav { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rv-nav .btn { flex: 0 0 auto; }

/* 记谱里的评分标记 */
.mv-g { font-style: normal; font-size: 9.5px; margin-left: 4px; padding: 0 3px; border-radius: 3px; }
.mv-g.g-good { color: #8fd6a8; background: rgba(62, 224, 138, 0.12); }
.mv-g.g-ok { color: #cbbba4; background: rgba(255, 255, 255, 0.06); }
.mv-g.g-warn { color: #ffcf7a; background: rgba(255, 200, 100, 0.12); }
.mv-g.g-bad { color: #ff8a7a; background: rgba(239, 75, 51, 0.16); }

/* 总结里可展开的复盘条目 */
.sum-hint { font-size: 10.5px; color: #7d7161; font-weight: 400; margin-left: 6px; }
.sum-move { cursor: pointer; }
.sum-move-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sum-caret { margin-left: auto; color: #8b7c66; font-size: 10px; transition: transform 0.15s; }
.sum-move.open .sum-caret { transform: rotate(180deg); }
.sum-detail {
  display: none;
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-left: 2px solid rgba(201, 160, 99, 0.35);
  background: rgba(201, 160, 99, 0.06);
  border-radius: 6px;
}
.sum-move.open .sum-detail { display: block; }
.sd-row { font-size: 11.5px; line-height: 1.65; color: #b9a888; }
.sd-row b { display: inline-block; min-width: 36px; color: #8b7c66; font-weight: 400; }

/* ============================================================
   手机浏览器响应式适配（文件末尾追加；仅新增规则，不改动以上内容）
   断点：≤720px 手机竖屏 / ≤420px 小屏 / hover:none 触摸设备
   ============================================================ */

/* ---------- 手机竖屏：≤720px ---------- */
@media (max-width: 720px) {
  /* 页面留白收紧；取消桌面滚动条预留，避免手机端无端少一截宽度 */
  html { scrollbar-gutter: auto; }
  .app { padding: 16px 12px 34px; }

  /* 顶栏 / 工具条：允许换行，触摸目标 ≥ 38px */
  .topbar { flex-wrap: wrap; gap: 12px 14px; margin-bottom: 14px; }
  .brand { gap: 11px; }
  .seal { width: 46px; height: 46px; font-size: 26px; border-radius: 11px; }
  .brand-text h1 { font-size: 20px; }
  .brand-text p { font-size: 11.8px; }
  .toolbar { width: 100%; flex-wrap: wrap; gap: 8px; }
  .field { font-size: 12px; gap: 6px; }
  .field select { min-height: 38px; padding: 8px 26px 8px 10px; font-size: 13px; }
  .toolbar .btn { min-height: 38px; padding: 8px 13px; font-size: 13px; }
  .btn.tiny { min-height: 32px; padding: 6px 10px; }

  /* 布局改为单列：棋盘在上、面板在下，棋盘铺满整行 */
  .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .board-col { max-width: 100%; width: 100%; margin: 0; }
  .board-frame { max-width: 100%; width: 100%; padding: 9px; border-radius: 14px; }
  .board-frame::after { inset: 4px; border-radius: 11px; }
  .board-host { width: 100%; aspect-ratio: 620 / 680; }
  .panel { width: 100%; min-width: 0; gap: 12px; }

  /* 棋盘下方操作按钮：撑满并加大热区 */
  .board-actions { gap: 8px; margin: 9px 2px 0; }
  .board-actions .btn { flex: 1 1 0; min-width: 0; min-height: 40px; }

  /* 状态条 / 评估条 / 推演条 / 图例 / 快捷入口 */
  .statusline { margin-top: 10px; font-size: 13px; gap: 8px; }
  .engine-info { font-size: 10.8px; }
  .eval-bar { margin: 8px 2px 0; gap: 8px; }
  .eval-bar b { min-width: 76px; font-size: 12.5px; }
  .trial-bar { flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 8px 10px; }
  #trialInfo { flex: 1 1 150px; font-size: 11.5px; }
  .legend { flex-wrap: wrap; gap: 6px 12px; font-size: 10.8px; }
  .legend .lg-tip { margin-left: 0; flex-basis: 100%; font-size: 10.2px; }
  .quicklinks { flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding: 0 2px; }
  .link { padding: 6px 0; font-size: 12px; min-height: 32px; }

  /* 面板卡片：禁止横向溢出 */
  .card { min-width: 0; padding: 12px 13px; overflow-wrap: anywhere; }
  .card-head { margin-bottom: 8px; }
  .book-card h2 { font-size: 16px; }
  .book-card p { font-size: 12.2px; line-height: 1.65; }
  .book-next { font-size: 12px; }
  #coachIntent, .intent-head, .intent-detail, .coach-note, .dg-line, .lr-impact,
  .last-review p, .last-review .lr-why, .sum-line, .sum-tip, .sum-why, .preview {
    overflow-wrap: anywhere;
  }

  /* 教练推荐 / 局面诊断 / 记谱：字号适度缩小，防溢出 */
  .cm-row { grid-template-columns: 16px minmax(0, 1fr) 30px 40px 26px; gap: 5px; padding: 7px 0; }
  .cm-move { font-size: 15px; }
  .cm-move i { font-size: 9.5px; }
  .cm-rank { font-size: 10px; }
  .cm-score { font-size: 10.8px; }
  .cm-tag { font-size: 9.5px; }
  .cm-play { min-height: 30px; font-size: 10px; }
  .intent-head { font-size: 12px; }
  .intent-head b { font-size: 16px; }
  .intent-detail { font-size: 11.8px; line-height: 1.65; }
  .coach-sub { margin-top: 8px; padding-top: 8px; }
  .coach-note { font-size: 10.8px; }
  .dg-line { font-size: 11.2px; }
  .lr-impact { font-size: 10.8px; }
  .last-review p { font-size: 11.2px; }
  .last-review .lr-why { font-size: 10.9px; }
  .preview { font-size: 11.2px; }
  .mv-row { grid-template-columns: 26px 1fr 1fr; gap: 5px; font-size: 12.5px; }
  .mv-cell { padding: 5px 6px; }
  .fold-row { font-size: 11.2px; }

  /* 终局小结等弹窗内容字号 */
  .sum-card-head { font-size: 13px; }
  .sum-grid { gap: 8px; margin: 12px 0 10px; }
  .sum-stat { padding: 10px 6px; }
  .sum-stat b { font-size: 20px; }
  .sum-stat span { font-size: 10.2px; }
  .sum-line { font-size: 11.8px; }
  .sum-sub { font-size: 10.5px; }
  .sum-moves li { gap: 6px; padding: 7px 0; font-size: 11.8px; }
  .sum-moves b { font-size: 14px; }
  .sum-moves em, .sum-better { font-size: 10.8px; }
  .sum-why { font-size: 10.8px; }
  .sum-tip { margin: 12px 0 10px; padding: 9px 10px; font-size: 11.6px; }

  /* 弹窗：贴边宽度 + 限高 + 内部滚动 */
  .modal { padding: 12px; }
  .modal-card {
    width: calc(100vw - 24px);
    max-width: 100%;
    max-height: 88vh;
    padding: 20px 16px 24px;
    border-radius: 14px;
  }
  .modal-title { font-size: 18px; }
  .modal-sub { margin-bottom: 14px; font-size: 12px; }
  .modal-close { width: 32px; height: 32px; font-size: 18px; }
  .principles, .op-grid, .tac-grid { gap: 8px; }
  .pr, .tac p, .rule-list { font-size: 12px; }
  .op-card { padding: 12px 13px; }
  .op-card p, .op-card ul { font-size: 11.8px; }
  .op-line { font-size: 12.2px; }
}

/* ---------- 小屏手机：≤420px ---------- */
@media (max-width: 420px) {
  .app { padding: 12px 8px 28px; }
  .topbar { gap: 10px; }
  .seal { width: 42px; height: 42px; font-size: 24px; }
  .brand-text h1 { font-size: 18.5px; letter-spacing: 1.5px; }
  .brand-text p { font-size: 11.2px; }
  .toolbar { gap: 7px; }
  .toolbar .btn { min-height: 36px; padding: 7px 10px; font-size: 12.5px; }
  .field select { min-height: 36px; padding: 7px 24px 7px 9px; font-size: 12.5px; }
  .board-frame { padding: 7px; border-radius: 12px; }
  .board-frame::after { inset: 3px; border-radius: 9px; }
  .card { padding: 11px; }
  .cm-row { grid-template-columns: 15px minmax(0, 1fr) 28px 36px 24px; gap: 4px; }
  .cm-move { font-size: 14px; }
  .cm-move i { font-size: 9px; }
  .cm-rank { font-size: 9.5px; }
  .cm-score { font-size: 10.2px; }
  .cm-play { min-height: 28px; }
  .legend { gap: 5px 10px; font-size: 10.2px; }
  .link { font-size: 11.5px; }
  .quicklinks { gap: 2px 12px; }
  .sum-grid { gap: 6px; }
  .sum-stat b { font-size: 18px; }
  .sum-moves b { font-size: 13px; }
  .modal { padding: 8px; }
  .modal-card { padding: 16px 12px 20px; }
}

/* ---------- 触摸设备（无 hover）：用 :active 代替 :hover，并加大点击热区 ---------- */
@media (hover: none) {
  /* 清除触摸端点击后残留的 hover 态 */
  .btn:hover { transform: none; }
  .link:hover { color: var(--muted); border-color: transparent; }
  .link.on:hover { color: #8fd6a8; }
  .mv-cell:hover { background: none; }
  .mv-cell.cur:hover { background: rgba(201, 160, 99, 0.22); }
  .cm-row.knife-row:hover { background: none; }
  .cm-play:hover { color: #b7a488; border-color: #3a3128; }
  .fold-btn:hover { color: #b7a488; border-color: #3a3128; }
  .card-toggle:hover { color: #8a7c68; }
  .field select:hover { border-color: var(--line); }
  .modal-close:hover { color: var(--muted); border-color: var(--line); }
  .tl-dot:hover { fill: #e8cd96; }

  /* 点按反馈 */
  .btn:active { transform: scale(0.97); }
  .hit.live:active { fill: rgba(255, 240, 200, 0.16); }

  /* 加大点击热区（≥32~42px） */
  .btn.tiny { min-height: 34px; }
  .link { min-height: 36px; }
  .mv-cell { display: flex; align-items: center; min-height: 34px; }
  .cm-play { min-height: 34px; }
  .fold-btn { min-height: 32px; padding: 5px 10px; }
  .card-toggle { min-height: 42px; padding: 11px 0 6px; }
  .board-actions .btn { min-height: 42px; }
  .modal-close { width: 38px; height: 38px; }
}