/* 设计语言取自 Claude Design 出的《生死时速》原型稿：
   暖近黑底 + 米色文字 + 琥珀金强调，小偷珊瑚红 / 警察青，
   直角无圆角、1px 低透明琥珀描边、菱形项目符号。 */
:root {
  --bg:       #0e0906;   /* 页面底：暖近黑，不是纯黑 */
  --chrome:   #140d08;   /* 面板/条带 */
  --chrome-2: #1b1109;
  --edge:     #0a0705;
  --ink:      #f5ead6;   /* 米色正文 */
  --muted:    rgba(245,234,214,.45);
  --muted-2:  rgba(245,234,214,.72);
  --accent:   #f0b429;   /* 琥珀金（沿用原有强调色） */
  --accent-hi:#ffd166;
  --accent-lo:#b87514;
  --line:     rgba(240,180,41,.22);
  --line-2:   rgba(240,180,41,.35);
  --thief:    #ff5d73;   /* 小偷：珊瑚红 */
  --police:   #3ee0d0;   /* 警察：青 */
  --ok:       #3ee0d0;
  --bad:      #ff5d73;
  /* 中文用系统字体，不加载 web 字体。Noto Sans SC 是 CJK 字体，
     unicode-range 分片上千个 —— Cloudflare 的字体优化把它内联进 HTML 后，
     每个页面凭空多出 377KB 阻塞渲染的 CSS，绝大部分是页面用不到的字符范围。
     而 PingFang SC / 微软雅黑 / Noto Sans CJK 各平台都自带，观感没有损失。 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --latin: "Chakra Petch", var(--font);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* 不再锁 height:100% + overflow:hidden —— 游戏占满首屏，
     正文接在下面，页面整体可以向下滚。 */
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.cabinet {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 1240px;
  margin: 0 auto;
  border-left: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
}

/* ── 顶栏 ───────────────────────────────────────────── */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--chrome-2), var(--chrome));
  border-bottom: 1px solid var(--line);
}

.title {
  font-size: 20px; font-weight: 900; letter-spacing: 3px; white-space: nowrap;
  background: linear-gradient(180deg, #fff3cf, var(--accent) 52%, var(--accent-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title .sub {
  font-family: var(--latin); font-size: 11px; font-weight: 600; letter-spacing: 4px;
  color: var(--muted); margin-left: 10px;
  background: none; -webkit-text-fill-color: var(--muted);
}

.stats { display: flex; gap: 6px; flex-wrap: wrap; }

.stat {
  min-width: 62px; padding: 5px 11px; text-align: center;
  background: rgba(240,180,41,.05);
  border: 1px solid var(--line);
  border-radius: 0;
}
.stat i { display: block; font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--muted); }
.stat b { font-family: var(--latin); font-weight: 700; font-size: 17px; color: var(--accent-hi); }
.stat b s { text-decoration: none; font-size: 9px; color: var(--muted); }
.stat.tier b { color: var(--accent); font-family: var(--font); font-weight: 700; font-size: 13px; }

/* ── 画面 ───────────────────────────────────────────── */
/* 原版是 800×600 视口，这里等比缩放居中，保持像素对齐 */
/* 画布是固定 800x600，比容器矮，上下必然留白。设计稿里 HUD 是浮在满幅
   街景上的，所以留白区用同一张底图模糊压暗填充 —— 而不是一片死黑。 */
.screen {
  position: relative; overflow: hidden; display: grid; place-items: center;
  background: var(--edge);
}
.screen::before {
  content: ""; position: absolute; inset: -30px; z-index: 0;
  background: var(--menu-bg) center/cover no-repeat;
  filter: blur(26px) brightness(.34) saturate(.9);
}
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(14,9,6,.55), rgba(14,9,6,.2) 30%, rgba(14,9,6,.2) 70%, rgba(14,9,6,.72));
}
.stage, .overlay, .chase, .kickoff { z-index: 1; }
#view {
  box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgba(0,0,0,.6);
}

/* 追逐距离条 */
.chase {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(12,15,20,.72);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  font-size: 12px;
}
.chase-label { color: var(--muted); }
.chase-track {
  width: 240px; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(240,180,41,.14);
  box-shadow: inset 0 0 0 1px var(--line);
}
.chase-track i { display: block; height: 100%; width: 50%; background: var(--ok); transition: width .12s linear, background .2s; }
.chase-num { font-family: var(--latin); font-weight: 700; min-width: 40px; text-align: right; color: var(--accent-hi); }

/* ── 遮罩面板 ────────────────────────────────────────── */
.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 10px;
  background:
    linear-gradient(180deg, rgba(14,9,6,.86), rgba(14,9,6,.94)),
    radial-gradient(120% 80% at 18% 30%, rgba(240,180,41,.12), transparent 60%),
    var(--menu-bg) center/cover no-repeat;
}
.overlay.hidden { display: none; }

.panel {
  width: min(560px, 92vw);
  padding: 30px 32px 26px;
  background: linear-gradient(165deg, rgba(27,17,9,.97), rgba(14,9,6,.98));
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: 0 28px 80px rgba(0,0,0,.72), 0 0 60px rgba(240,180,41,.06);
  /* 高度要按【容器】算而不是视口：面板装在 .screen 里，而 .screen 上下
     还有顶栏和待打文本条。用 92vh 会比容器高，短屏上标题被切掉、
     底部按钮看不见（1440x900 实测如此）。 */
  max-height: calc(100% - 20px); overflow-y: auto;
}
.panel h1 {
  margin: 0; font-size: 42px; font-weight: 900; letter-spacing: 7px; line-height: 1.1;
  background: linear-gradient(180deg, #fff3cf, var(--accent) 52%, var(--accent-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel .latin {
  font-family: var(--latin); font-size: 12px; font-weight: 600; letter-spacing: 7px;
  color: var(--muted); margin: 6px 0 14px;
}
.lead { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }

.field { margin-bottom: 16px; }
.field label {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--muted);
  margin-bottom: 9px;
}
.field label::before {
  content: ""; width: 8px; height: 8px; background: var(--accent);
  transform: rotate(45deg); flex: none;
}
.choices { display: flex; gap: 8px; flex-wrap: wrap; }

.choice {
  flex: 1; min-width: 0; padding: 12px 14px; text-align: left; cursor: pointer;
  background: rgba(240,180,41,.03);
  color: var(--muted-2);
  border: 1px solid rgba(245,234,214,.12);
  border-radius: 0;
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: border-color .14s, background .14s, color .14s;
}
.choice:hover { border-color: var(--line-2); color: var(--ink); }
.choice em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.choice .rl { font-family: var(--latin); font-size: 10px; font-weight: 600; letter-spacing: 3px; color: var(--muted); margin-left: 8px; }
.choice:hover { background: #313846; }
.choice.on {
  background: linear-gradient(150deg, rgba(240,180,41,.2), rgba(240,180,41,.05));
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 26px rgba(240,180,41,.14);
}
.choice.on em { color: rgba(240,180,41,.85); }
/* 立场卡按阵营上色：和 HUD、场景里的标记同色 */
.choice.role-thief.on  { border-color: var(--thief);  background: linear-gradient(150deg, rgba(255,93,115,.2), rgba(255,93,115,.04)); box-shadow: 0 0 26px rgba(255,93,115,.14); }
.choice.role-thief.on  em, .choice.role-thief.on .rl { color: rgba(255,93,115,.9); }
.choice.role-police.on { border-color: var(--police); background: linear-gradient(150deg, rgba(62,224,208,.18), rgba(62,224,208,.04)); box-shadow: 0 0 26px rgba(62,224,208,.12); }
.choice.role-police.on em, .choice.role-police.on .rl { color: rgba(62,224,208,.9); }
.choice.on em { color: #d7c391; }

.go {
  display: block; width: 100%; margin-top: 20px; padding: 15px; cursor: pointer;
  background: linear-gradient(100deg, var(--accent), var(--accent-hi));
  color: #1a1005;
  border: 0; border-radius: 0;
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  font-family: inherit; font-size: 16px; font-weight: 900; letter-spacing: 5px;
  box-shadow: 0 8px 32px rgba(240,180,41,.3);
  transition: filter .14s;
}
.go:hover { filter: brightness(1.08); }
.go:hover { filter: brightness(1.08); }

.hint { margin: 12px 0 0; font-size: 11px; color: #6d7789; text-align: center; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.grid > div {
  padding: 13px 10px; text-align: center;
  background: rgba(240,180,41,.04);
  border: 1px solid var(--line);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.grid i { display: block; font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--muted); }
.grid b { font-family: var(--latin); font-weight: 700; font-size: 26px; color: var(--accent-hi); }

.submit { display: flex; gap: 8px; margin-bottom: 14px; }
.submit input {
  flex: 1; padding: 11px 13px;
  background: var(--edge); color: var(--ink);
  border: 1px solid rgba(245,234,214,.14); border-radius: 0;
  font-family: inherit; font-size: 13px;
}
.submit input:focus { outline: none; border-color: var(--line-2); }
.submit button {
  padding: 9px 14px; background: var(--chrome-2); color: var(--ink);
  border: 1px solid #000; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px;
}

/* 榜单：名次用拉丁数字字体，行间用细分隔线 —— 和设计稿的行式布局一致 */
.board {
  margin: 0 0 18px; padding: 0; list-style: none;
  counter-reset: rank;
  font-size: 13px; color: var(--muted-2);
}
.board li {
  counter-increment: rank;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(245,234,214,.08);
  border-bottom: 0;
  background: rgba(240,180,41,.02);
}
.board li:last-child { border-bottom: 1px solid rgba(245,234,214,.08); }
.board li::before {
  content: counter(rank);
  font-family: var(--latin); font-weight: 700; font-size: 15px;
  color: var(--muted); width: 18px; flex: none;
}
.board li b { font-family: var(--latin); font-size: 15px; color: var(--accent-hi); }
/* 前三名描金 */
.board li:nth-child(-n+3)::before { color: var(--accent); }
.board b { color: var(--ink); font-family: var(--mono); }

/* ── 底部输入条（对齐原版那道横条） ────────────────────── */
.typebar {
  padding: 16px 22px 14px;
  background: linear-gradient(180deg, rgba(20,13,8,.5), var(--chrome) 34%);
  border-top: 1px solid var(--line-2);
}

.line {
  font-family: var(--mono);
  font-size: clamp(15px, 2.1vw, 21px);
  line-height: 1.7;
  letter-spacing: .4px;
  padding: 12px 14px;
  background: var(--edge);
  border: 1px solid #000;
  border-radius: 6px;
  min-height: 56px;
  white-space: pre-wrap;
  word-break: break-word;
}
.line .placeholder { color: #5a6478; font-family: var(--font); font-size: 14px; }
.line .done { color: var(--ok); }
.line .cur {
  background: var(--accent);
  color: #23190a;
  border-radius: 2px;
  animation: blink 1s steps(1) infinite;
}
.line .cur.err { background: var(--bad); color: #fff; animation: none; }
.line .todo { color: #6f7a8d; }

@keyframes blink { 50% { background: #c8951f; } }

.progress { margin-top: 8px; height: 6px; background: #0a0c10; border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

@media (max-width: 720px) {
  .stats { gap: 4px; }
  .stat { min-width: 52px; padding: 3px 7px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 追加：素材版专用 ─────────────────────────────────── */
.mute {
  width: 34px; height: 34px; margin-left: 4px;
  background: var(--edge); color: var(--ink);
  border: 1px solid #000; border-radius: 4px;
  cursor: pointer; font-size: 15px; line-height: 1;
}
.mute:hover { background: var(--chrome-2); }

.panel select {
  width: 100%; padding: 9px 11px;
  background: var(--edge); color: var(--ink);
  border: 1px solid #000; border-radius: 6px;
  font-family: inherit; font-size: 13px;
}

/* 结算页用原版的胜负画面 */
.verdict {
  display: block; width: 100%; max-height: 190px;
  object-fit: cover; object-position: center 38%;
  border-radius: 6px; border: 1px solid #000;
  margin-bottom: 14px; background: #000;
}
.verdict:not([src]), .verdict[src=""] { display: none; }

/* 载入进度条复用底部那根 */
#loading .progress { margin-top: 14px; }

/* ── 追加：暂停 / 开局提示 ────────────────────────────── */
.panel.narrow { width: min(360px, calc(100% - 40px)); text-align: center; }

.ghost {
  display: block; width: 100%; margin-top: 9px; padding: 11px; cursor: pointer;
  background: rgba(240,180,41,.04); color: var(--muted-2);
  border: 1px solid rgba(245,234,214,.12); border-radius: 0;
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: border-color .14s, color .14s;
}
.ghost:hover { border-color: var(--line-2); color: var(--ink); }
.ghost:hover { background: var(--chrome-2); color: var(--ink); }

.kickoff {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 22px;
  background: rgba(12,15,20,.8);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 1px;
  pointer-events: none;
  animation: pulse 1.4s ease-in-out infinite;
}
.kickoff.hidden { display: none; }
@keyframes pulse { 50% { opacity: .45; } }

kbd {
  padding: 1px 5px;
  background: var(--edge);
  border: 1px solid #000;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
}

/* canvas 由 JS 按 DPR 定尺寸，这里只负责居中 */
.stage { position: absolute; inset: 0; display: grid; place-items: center; }
#view { display: block; }

.choices.wrap { flex-wrap: wrap; }
.choices.wrap .choice { flex: 1 1 46%; min-width: 0; }

/* 换档进度。速度分档是核心机制，但 HUD 原来只显示当前档位名，
   玩家看不出离上车还差多少，只能靠反复试 —— 这条细线补上那个信息。 */
.stat.tier { position: relative; }
.tierbar {
  display: block; height: 2px; margin-top: 3px;
  background: rgba(255,255,255,.14); border-radius: 1px; overflow: hidden;
}
.tierbar > span {
  display: block; height: 100%; width: 0;
  background: currentColor; transition: width .08s linear;
}

/* ── 模式互跳 ────────────────────────────────────────
   race.html 一直在用 .modelink 但样式表里没有这条规则，
   所以它此前是浏览器默认的蓝色下划线链接。 */
.modelink {
  display: inline-block; margin-left: 14px; vertical-align: middle;
  padding: 5px 12px;
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: var(--muted-2); text-decoration: none;
  background: rgba(240,180,41,.05);
  border: 1px solid var(--line);
  -webkit-text-fill-color: var(--muted-2);   /* 抵消 .title 的渐变裁切 */
  transition: border-color .14s, color .14s;
}
.modelink:hover {
  border-color: var(--accent); color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

/* 长得像次级按钮的链接 */
.ghost.as-link { text-align: center; text-decoration: none; }

/* ── 竞速模式的场上组件 ──────────────────────────────
   .rcboard / .rctip 此前在 race.html 里用了但样式表里没有对应规则，
   于是名次板是一块浏览器默认底色的裸 div。 */
.rcboard {
  position: absolute; top: 14px; right: 14px; min-width: 190px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  background: rgba(14,9,6,.86);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(5px);
  font-size: 12px; color: var(--muted-2);
}
.rcrow {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 1px; color: var(--muted-2);
}
.rcrow.me { color: var(--accent); font-weight: 700; }
.rcpos {
  width: 15px; text-align: right; flex: none;
  font-family: var(--latin); font-weight: 700; color: var(--muted);
}
.rcrow.me .rcpos { color: var(--accent); }
.rcname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rclap { font-family: var(--latin); font-variant-numeric: tabular-nums; color: var(--muted); }
.rcrow.me .rclap { color: var(--accent-hi); }

/* #tip 是一行较长的近道提示，#countdown 是大号倒计时 —— 两者共用这个类，
   基准按提示条做（小号横幅），倒计时靠 race.html 里的内联样式放大。
   一度按倒计时来定基准，40px 让提示那行宽过屏幕，居中后两头都被裁掉。 */
.rctip {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  max-width: calc(100% - 28px);
  padding: 8px 16px;
  background: rgba(14,9,6,.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(5px);
  font-size: 12px; line-height: 1.5; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rctip b { color: var(--accent-hi); font-weight: 700; }
#countdown {
  font-family: var(--latin); font-weight: 700; letter-spacing: 4px;
  color: var(--accent-hi); text-shadow: 0 0 30px rgba(240,180,41,.5);
  border-color: var(--line-2); white-space: normal;
}
.rctip[hidden] { display: none; }

/* ══ 多人对战大厅 ═══════════════════════════════════════
   1:1 照 Claude Design 的 02 画板做。稿子是 1920 宽，这里按
   同比例缩到常见的 1280~1440 视口：栏宽 540→420，留白 64→44。
   列宽比例、字号层级、间距节奏保持不变。 */
.lobby-body {
  margin: 0; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, #221309 0%, #191009 55%, #140d08 100%);
  color: var(--ink); font-family: var(--font);
}
.lb-shell { position: relative; height: 100vh; display: flex; flex-direction: column; }
/* 稿子里那层极淡的横向扫描线，给暗场加质感 */
.lb-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(240,180,41,.022) 0 2px, transparent 2px 6px);
}
.lb-shell > * { position: relative; z-index: 1; }

.lb-bar {
  flex: none; height: 72px; display: flex; align-items: center; gap: 18px;
  padding: 0 44px;
  background: rgba(16,11,7,.88);
  border-bottom: 1px solid var(--line);
}
.lb-h1 { font-size: 21px; font-weight: 900; letter-spacing: 4px; }
.lb-h1-en { font-family: var(--latin); font-size: 11px; font-weight: 600; letter-spacing: 4px; color: rgba(245,234,214,.35); }
.lb-back {
  font-size: 11px; font-weight: 600; color: rgba(245,234,214,.6); text-decoration: none;
  border: 1px solid rgba(245,234,214,.2); padding: 6px 12px;
}
.lb-back:hover { color: var(--accent); border-color: var(--line-2); }
.lb-spacer { flex: 1; }

.lb-me {
  display: flex; align-items: center; gap: 11px;
  background: rgba(24,17,12,.9); border: 1px solid rgba(240,180,41,.25);
  padding: 8px 15px;
}
.lb-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), #7a4a0c);
  border: 1px solid rgba(240,180,41,.6);
}
.lb-me-name { font-size: 13px; font-weight: 700; }
.lb-me-wpm { font-family: var(--latin); font-size: 10px; font-weight: 500; color: var(--accent); }

.lb-quick {
  cursor: pointer; border: 0; text-align: left;
  padding: 10px 22px;
  background: linear-gradient(100deg, var(--accent), var(--accent-hi));
  color: #1a1005;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 6px 26px rgba(240,180,41,.28);
  font-family: var(--font);
  transition: filter .14s;
}
.lb-quick:hover { filter: brightness(1.08); }
.lb-quick-t { display: block; font-size: 15px; font-weight: 900; letter-spacing: 3px; }
.lb-quick-s { display: block; font-family: var(--latin); font-size: 10px; font-weight: 600; opacity: .7; }

.lb-main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px;
  padding: 22px 44px 30px;
}
.lb-left, .lb-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.lb-sec { display: flex; align-items: center; gap: 12px; flex: none; }
.lb-sec-t { font-size: 15px; font-weight: 700; letter-spacing: 3px; }
.lb-sec-n { font-family: var(--latin); font-size: 11px; font-weight: 500; color: rgba(245,234,214,.4); }
.lb-create {
  cursor: pointer; padding: 8px 18px;
  border: 1.5px solid var(--accent); background: none; color: var(--accent);
  font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 2px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: background .14s;
}
.lb-create:hover { background: rgba(240,180,41,.14); }

.lb-table {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: rgba(16,11,7,.9); border: 1px solid rgba(240,180,41,.2);
}
/* 列宽照搬稿子的 52 / 1fr / 260 / 150 / 100 / 110 / 110（等比缩） */
.lb-thead, .lb-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 190px 108px 70px 78px 82px;
  align-items: center; gap: 10px;
}
.lb-thead {
  flex: none; padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: 2px; color: rgba(245,234,214,.45);
}
.lb-tbody { flex: 1; overflow-y: auto; }
.lb-row {
  padding: 11px 18px; cursor: pointer;
  border-bottom: 1px solid rgba(245,234,214,.05);
  transition: background .12s;
}
.lb-row:hover { background: rgba(240,180,41,.06); }
.lb-row.racing { opacity: .55; cursor: default; }
.lb-row.racing:hover { background: none; }
.lb-lock { text-align: center; color: var(--accent); }
.lb-lock.open { color: rgba(245,234,214,.18); }
.lb-rname { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rles { font-size: 12px; color: rgba(245,234,214,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rwpm { font-family: var(--latin); font-size: 13px; font-weight: 600; color: var(--accent); }
.lb-rcnt { font-family: var(--latin); font-size: 13px; font-weight: 600; color: rgba(245,234,214,.7); }
.lb-st { font-size: 11px; font-weight: 700; text-align: center; padding: 4px 0; border: 1px solid; }
.lb-st.wait { color: var(--police); border-color: rgba(62,224,208,.4); background: rgba(62,224,208,.1); }
.lb-st.race { color: var(--thief); border-color: rgba(255,93,115,.4); background: rgba(255,93,115,.1); }
.lb-st.full { color: var(--muted); border-color: rgba(245,234,214,.14); }
.lb-btn {
  font-size: 11px; font-weight: 700; text-align: center; padding: 6px 0;
  border: 1px solid var(--line-2); color: var(--accent);
}
.lb-row.racing .lb-btn { border-color: rgba(245,234,214,.12); color: var(--muted); }
.lb-empty { padding: 40px 0; text-align: center; font-size: 12px; color: var(--muted); }

.lb-card {
  flex: none;
  background: linear-gradient(180deg, rgba(36,23,12,.96), rgba(20,14,9,.96));
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.lb-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.lb-code-lab { font-size: 10px; letter-spacing: 3px; color: rgba(245,234,214,.45); }
.lb-code-row { display: flex; align-items: center; gap: 11px; margin-top: 5px; }
.lb-code {
  font-family: var(--latin); font-size: 31px; font-weight: 700; line-height: 1;
  letter-spacing: 8px; color: var(--accent);
  text-shadow: 0 0 26px rgba(240,180,41,.45);
}
.lb-reroll {
  cursor: pointer; padding: 4px 10px; background: none;
  border: 1px solid rgba(240,180,41,.4); color: var(--accent);
  font-family: var(--font); font-size: 10px; font-weight: 600;
}
.lb-reroll:hover { background: rgba(240,180,41,.14); }

.lb-priv { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; cursor: pointer; flex: none; }
.lb-priv-lab { font-size: 10px; color: rgba(245,234,214,.45); }
.lb-priv-track {
  width: 42px; height: 21px; border-radius: 999px; position: relative;
  background: rgba(245,234,214,.1); border: 1px solid rgba(245,234,214,.16);
  transition: background .16s, border-color .16s;
}
.lb-priv-knob {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(245,234,214,.5); transition: transform .16s, background .16s;
}
.lb-priv.on .lb-priv-track { background: rgba(240,180,41,.28); border-color: var(--accent); }
.lb-priv.on .lb-priv-knob { transform: translateX(21px); background: var(--accent); }
.lb-priv-hint { font-size: 10px; color: var(--muted); }
.lb-priv.on .lb-priv-hint { color: var(--accent); }

.lb-rule { height: 1px; background: linear-gradient(90deg, rgba(240,180,41,.45), transparent); }

.lb-players { display: flex; flex-direction: column; gap: 8px; }
.lb-prow {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: rgba(245,234,214,.03);
  border: 1px solid rgba(245,234,214,.1);
}
.lb-prow.ready { background: linear-gradient(150deg, rgba(62,224,208,.12), rgba(62,224,208,.03)); border-color: rgba(62,224,208,.42); }
.lb-prow.me { border-color: var(--line-2); }
.lb-pav { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent), #7a4a0c); }
.lb-prow.ready .lb-pav { background: linear-gradient(135deg, var(--police), #16564f); }
.lb-pname { font-size: 13px; font-weight: 600; }
.lb-psub { font-family: var(--latin); font-size: 10px; color: rgba(245,234,214,.45); }
.lb-pready { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.lb-prow.ready .lb-pready { color: var(--police); }
.lb-slot {
  padding: 16px 13px; text-align: center;
  border: 1px dashed rgba(245,234,214,.14);
  font-size: 11px; color: rgba(245,234,214,.35);
}

.lb-start {
  cursor: pointer; padding: 13px; border: 0;
  background: linear-gradient(100deg, var(--accent), var(--accent-hi));
  color: #1a1005;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  font-family: var(--font); font-size: 14px; font-weight: 900; letter-spacing: 4px;
  box-shadow: 0 8px 28px rgba(240,180,41,.3);
  transition: filter .14s;
}
.lb-start:hover:not(:disabled) { filter: brightness(1.08); }
.lb-start:disabled {
  background: rgba(245,234,214,.06); color: var(--muted); cursor: default;
  box-shadow: none; letter-spacing: 2px; font-weight: 700;
}

.lb-tips {
  flex: none; padding: 12px 15px;
  background: rgba(16,11,7,.7); border: 1px solid rgba(240,180,41,.14);
  display: flex; flex-direction: column; gap: 6px;
}
.lb-tip { font-size: 11px; line-height: 1.6; color: rgba(245,234,214,.5); }
.lb-tip b { color: var(--accent); font-weight: 700; }

.lb-join { flex: none; display: flex; gap: 8px; }
.lb-join input {
  min-width: 0; padding: 10px 12px;
  background: var(--edge); color: var(--ink);
  border: 1px solid rgba(245,234,214,.14);
  font-family: var(--font); font-size: 13px;
}
.lb-join #join-code {
  width: 92px; flex: none;
  font-family: var(--latin); font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
}
.lb-join #join-name { flex: 1; }
.lb-join input:focus { outline: none; border-color: var(--line-2); }
.lb-join button {
  cursor: pointer; padding: 10px 20px; flex: none;
  background: rgba(240,180,41,.08); color: var(--accent);
  border: 1px solid var(--line-2);
  font-family: var(--font); font-size: 13px; font-weight: 700;
}
.lb-join button:hover { background: rgba(240,180,41,.18); }

@media (max-width: 1080px) {
  .lb-main { grid-template-columns: minmax(0, 1fr); }
  .lb-right { display: none; }
}

/* ══ 页面正文（SEO + 真给人看的说明）════════════════════════
   canvas 游戏对搜索引擎是一片空白，没有可索引文字就排不上。
   但正文必须【真实可见可滚动】—— 用 display:none / 移出视口
   / 零号字这类手法藏关键词是作弊，被判定了会整站掉权重。
   所以：游戏区占满首屏，正文接在下面，向下滚就能读到。 */
.seo {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.9;
}
.seo h1 {
  margin: 0 0 20px;
  font-size: 27px; font-weight: 900; letter-spacing: 2px; line-height: 1.4;
  background: linear-gradient(180deg, #fff3cf, var(--accent) 52%, var(--accent-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.seo h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 40px 0 12px;
  font-size: 17px; font-weight: 700; letter-spacing: 2px; color: var(--ink);
}
.seo h2::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--accent); transform: rotate(45deg);
}
.seo h3 { margin: 22px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.seo p  { margin: 0 0 14px; }
.seo ul, .seo ol { margin: 0 0 14px; padding-left: 22px; }
.seo li { margin-bottom: 8px; }
.seo strong { color: var(--accent-hi); font-weight: 700; }
.seo a { color: var(--accent); border-bottom: 1px solid rgba(240,180,41,.35); }
.seo a:hover { color: var(--accent-hi); }
.seo kbd {
  padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 2px;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
}

/* ══ 手机端 ═══════════════════════════════════════════════
   国内怀旧流量绝大多数来自手机，搜过来打不开等于 SEO 白做。
   实测 375px 下：顶栏 559px 宽（比容器还宽）、351px 高 ——
   六个状态格换行堆成一坨，吃掉 43% 的屏幕。 */
@media (max-width: 720px) {
  .bar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .title { font-size: 16px; letter-spacing: 2px; }
  .title .sub { display: none; }          /* 拉丁副标在窄屏只是占地方 */
  .modelink { margin-left: 8px; padding: 4px 9px; font-size: 10px; letter-spacing: 1px; }

  /* 状态格改成横向可滚的一条，不再换行堆高 */
  .stats {
    width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat { flex: none; min-width: 54px; padding: 4px 8px; }
  .stat b { font-size: 15px; }

  .chase-track { width: 130px; }
  .panel { padding: 20px 18px 18px; }
  .panel h1 { font-size: 30px; letter-spacing: 4px; }
  .choices { flex-wrap: wrap; }
  .choice { min-width: calc(50% - 4px); font-size: 13px; padding: 10px 11px; }
  .typebar { padding: 10px 12px 9px; }
  .line { font-size: 15px; }
  .seo { padding: 36px 18px 72px; font-size: 14px; }
  .seo h1 { font-size: 21px; }
}

/* 触屏提示：手机没有物理键盘，不给入口的话游戏就是死的 */
.tapkbd {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 6; display: none; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(100deg, var(--accent), var(--accent-hi));
  color: #1a1005; border: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font-family: var(--font); font-size: 13px; font-weight: 900; letter-spacing: 2px;
  box-shadow: 0 6px 24px rgba(240,180,41,.34);
}
body.touch .tapkbd { display: inline-flex; }
body.touch.kbd-on .tapkbd { display: none; }
/* 真正接收输入的框：必须留在视口内且有尺寸，否则 iOS 不弹键盘、
   也不会把输入事件发给它。所以是"透明贴在角落"而不是 display:none。 */
#kbd-sink {
  position: absolute; left: 0; bottom: 0; z-index: -1;
  width: 1px; height: 1px; padding: 0; border: 0;
  opacity: 0; background: transparent; color: transparent;
  font-size: 16px;            /* < 16px 会让 iOS 自动放大整个页面 */
}