/* ============================================================
   Word Buddy · TEM-8 形近词练习
   极简风格（参考 Qwerty Buddy），全端自适应
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f7;
  --bg-sink: #fbfbfc;
  --line: #e9e9ec;
  --line-strong: #dcdce0;
  --text: #17181c;
  --text-2: #55575f;
  --muted: #8d909a;
  --accent: #2f6bed;
  --accent-soft: #eef3fe;
  --accent-glow: rgba(47, 107, 237, .55);
  --ok: #17a34a;
  --ok-soft: #eaf7ef;
  --bad: #e04343;
  --bad-soft: #fdeeee;
  --warn: #e08b17;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(16, 18, 25, .04), 0 8px 24px -12px rgba(16, 18, 25, .12);
  --shadow-lift: 0 2px 6px rgba(16, 18, 25, .06), 0 18px 40px -18px rgba(16, 18, 25, .22);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --header-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101116;
    --bg-soft: #17181e;
    --bg-sink: #14151a;
    --line: #262832;
    --line-strong: #33363f;
    --text: #f2f3f6;
    --text-2: #b9bcc6;
    --muted: #82868f;
    --accent: #6d97ff;
    --accent-soft: #1b2136;
    --ok: #46c97a;
    --ok-soft: #12271a;
    --bad: #ff6b6b;
    --bad-soft: #2c1616;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
/* 手机端整屏适配：禁止任何子元素把页面撑宽（否则需要手动缩小才能看全） */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }

/* ---------------- 顶栏 ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
}

.brand small {
  display: block;
  font-weight: 450;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
  margin-top: -3px;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--bg-soft); color: var(--text); }
.nav a.active { color: var(--text); font-weight: 600; background: var(--bg-soft); }

.nav .who {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}

/* ---------------- 布局 ---------------- */

.view {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 18px 80px;
}

.view.narrow { max-width: 720px; }

.page-title { font-size: 22px; font-weight: 680; letter-spacing: -.02em; margin: 0 0 4px; }
.page-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.section-label {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.section-label .label-more { float: right; font-weight: 400; letter-spacing: 0; }
.section-label .label-more a { color: var(--muted); text-decoration: none; }
.section-label .label-more a:hover { color: var(--fg); text-decoration: underline; }

/* ---------------- 首页 ---------------- */

.hero {
  padding: 26px 0 30px;
}
.hero h1 {
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.035em;
  margin: 0 0 12px;
  font-weight: 700;
}
.hero p { color: var(--text-2); font-size: 15.5px; margin: 0; max-width: 560px; }

.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.entry {
  display: block;
  text-align: left;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.entry.dim { opacity: .55; }
.entry h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.entry p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.entry .ico {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--bg-soft);
  display: grid; place-items: center;
  margin-bottom: 14px; font-size: 17px;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-strip > div { background: var(--bg); padding: 16px 18px; }
.stat-strip .k { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.stat-strip .v { font-size: 21px; font-weight: 660; letter-spacing: -.02em; font-family: var(--mono); margin-top: 3px; }

/* ---------------- 表单 ---------------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-weight: 550; }

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  cursor: pointer;
  font-weight: 560;
  transition: background .15s, border-color .15s, transform .1s, opacity .15s;
  min-height: 44px;
}
.btn:hover { background: var(--bg-soft); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.primary:hover { opacity: .88; background: var(--text); }
.btn.block { width: 100%; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg-soft); }
.btn.sm { padding: 6px 11px; min-height: 30px; font-size: 12.5px; border-radius: 8px; }

.tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 12px; margin-bottom: 20px;
}
.tabs button {
  flex: 1; padding: 9px; border: 0; background: transparent; border-radius: 9px;
  cursor: pointer; color: var(--text-2); font-weight: 550;
}
.tabs button.active { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }

.form-msg { font-size: 13px; margin-top: 10px; min-height: 20px; }
.form-msg.err { color: var(--bad); }
.form-msg.ok { color: var(--ok); }

/* ---------------- 题目区 ---------------- */

.quiz-head { margin-bottom: 22px; }

.quiz-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.quiz-meta .spacer { margin-left: auto; }

.bar {
  height: 5px; border-radius: 99px; background: var(--bg-soft); overflow: hidden;
}
.bar > i {
  display: block; height: 100%; width: 0%;
  background: var(--text); border-radius: 99px;
  transition: width .3s cubic-bezier(.3, .8, .3, 1);
}
.bar.thin { height: 4px; }

.prompt {
  text-align: center;
  padding: 30px 10px 34px;
}
.prompt-word {
  font-family: var(--mono);
  font-size: clamp(34px, 9vw, 58px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  word-break: break-word;
}
.prompt-phon {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 8px;
  min-height: 20px;
}
.prompt-hint { color: var(--muted); font-size: 12.5px; margin-top: 14px; letter-spacing: .02em; }

.options { display: grid; gap: 10px; }

.opt {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; text-align: left;
  padding: 15px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .1s;
  min-height: 56px;
}
.opt:hover:not(.locked) { border-color: var(--text); transform: translateX(2px); }
.opt .key {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
  margin-top: 1px;
}
.opt .opt-text { font-size: 15px; line-height: 1.5; padding-top: 1px; }
.opt .opt-word {
  display: block; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); margin-top: 3px; letter-spacing: .02em;
}
.opt.locked { cursor: default; }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt.sel .key { background: var(--accent); color: #fff; }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .key { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .key { background: var(--bad); color: #fff; }
.opt.dim { opacity: .45; }

.quiz-foot {
  display: flex; align-items: center; gap: 18px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
  font-family: var(--mono);
}
.quiz-foot .spacer { margin-left: auto; }
.quiz-foot b { color: var(--text); font-weight: 600; }

.kbd-hint { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 16px; }
.kbd-hint kbd {
  font-family: var(--mono); font-size: 10.5px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; background: var(--bg-soft);
}

/* ---------------- 练习设置 ---------------- */

.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.count-opt {
  padding: 16px 8px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); cursor: pointer;
  transition: border-color .14s, background .14s;
}
.count-opt:hover { border-color: var(--text); }
.count-opt.active { border-color: var(--text); background: var(--bg-soft); }
.count-opt b { display: block; font-family: var(--mono); font-size: 19px; }
.count-opt span { font-size: 11.5px; color: var(--muted); }

/* ---------------- 对战 ---------------- */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sink);
  margin-bottom: 20px;
}
.vs-side { min-width: 0; }
.vs-side.opp { text-align: right; }
.vs-name {
  font-weight: 620; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vs-name .tag {
  font-size: 10px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 0 4px; margin-left: 5px; vertical-align: 1px;
}
.vs-score { font-family: var(--mono); font-size: 24px; font-weight: 660; letter-spacing: -.02em; }
.vs-sub { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.vs-side .bar { margin-top: 7px; }
.vs-side.opp .bar > i { background: var(--muted); }
.vs-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 600; }

.waiting {
  text-align: center;
  padding: 64px 20px;
}
.spinner {
  width: 34px; height: 34px; margin: 0 auto 22px;
  border: 2.5px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.countdown {
  font-family: var(--mono);
  font-size: 76px;
  font-weight: 700;
  letter-spacing: -.04em;
  text-align: center;
  padding: 40px 0;
  animation: pop .9s ease-out;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------------- 结果 ---------------- */

.result-hero { text-align: center; padding: 26px 0 30px; }
.result-badge {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.result-badge.win { color: var(--ok); }
.result-badge.lose { color: var(--bad); }
.result-badge.draw { color: var(--warn); }
.result-hero .sub { color: var(--muted); font-size: 13.5px; }

.score-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.score-split > div { background: var(--bg); padding: 18px; text-align: center; }
.score-split .k { font-size: 12px; color: var(--muted); }
.score-split .v { font-family: var(--mono); font-size: 27px; font-weight: 660; margin-top: 2px; }

.review-list { display: grid; gap: 8px; }
.review-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.review-row .mark { font-family: var(--mono); font-weight: 700; }
.review-row.ok .mark { color: var(--ok); }
.review-row.no .mark { color: var(--bad); }
.review-row .w { font-family: var(--mono); font-weight: 600; }
.review-row .d { color: var(--text-2); }
.review-row .t { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---------------- 统计 ---------------- */

.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.tile .k { font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.tile .v { font-family: var(--mono); font-size: 24px; font-weight: 660; letter-spacing: -.02em; margin-top: 4px; }
.tile .s { font-size: 11.5px; color: var(--muted); }

.chart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding-top: 10px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.chart .stack { width: 100%; max-width: 44px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .fill {
  width: 100%; border-radius: 6px 6px 3px 3px;
  background: var(--text); min-height: 3px;
  transition: height .35s cubic-bezier(.3,.8,.3,1);
}
.chart .cap { font-size: 10.5px; color: var(--muted); font-family: var(--mono); }
.chart .lab { font-size: 10.5px; color: var(--muted); }

.mistake-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.mistake-row:last-child { border-bottom: 0; }
.mistake-row .w { font-family: var(--mono); font-weight: 620; font-size: 15px; }
.mistake-row .d { color: var(--text-2); font-size: 13.5px; }
.mistake-row .c { color: var(--bad); font-size: 12.5px; }
.mistake-row .n {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 7px;
}

.empty { text-align: center; padding: 46px 20px; color: var(--muted); font-size: 13.5px; }

/* ---------------- 提示 ---------------- */

.toasts {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  padding: 10px 16px; border-radius: 10px;
  background: var(--text); color: var(--bg);
  font-size: 13px; box-shadow: var(--shadow-lift);
  animation: rise .22s ease-out;
}
.toast.err { background: var(--bad); color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.loading { display: grid; place-items: center; padding: 70px 0; }

/* ---------------- 首页标题配色 ---------------- */

.hero-title { color: #ddaacc; }

@media (prefers-color-scheme: dark) {
  .hero-title { color: #ddaacc; }
}

/* ---------------- 模式选择 ---------------- */

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }

.mode-card {
  display: block; text-align: left;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.mode-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mode-name { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.mode-desc { font-size: 13px; color: var(--muted); line-height: 1.6; min-height: 60px; }
.mode-foot { margin-top: 14px; font-size: 12px; color: var(--text-2); }

.tag {
  font-size: 10px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 1px 5px; letter-spacing: .04em; white-space: nowrap;
}

.rule-list { font-size: 13px; color: var(--text-2); line-height: 1.9; }

/* ---------------- 房间号 ---------------- */

.room-code {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 6px 0 2px;
  text-indent: .18em;
}

.or-line {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--muted); font-size: 12px;
}
.or-line::before, .or-line::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.join-row { display: flex; gap: 10px; }
.join-row .input { flex: 1; letter-spacing: .16em; text-transform: uppercase; }
.join-row .btn { flex: none; }

/* ---------------- 房间大厅（房间号对战） ---------------- */

.hall-hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.hall-list { display: grid; gap: 8px; margin-top: 10px; }
.hall-list .empty { padding: 22px 12px; }

.hall-room {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.hall-code { flex: none; font-size: 16px; letter-spacing: .12em; color: var(--accent); }
.hall-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hall-info b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-sub { font-size: 12px; color: var(--muted); }
.hall-room .btn { margin-top: 0; flex: none; }
.hall-room .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------- AI 陪练档位 ---------------- */

.tier-list { display: grid; gap: 10px; }

.tier-card {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.tier-card:hover { border-color: var(--text); }
.tier-card.active { border-color: var(--text); background: var(--bg-soft); }
.tier-top { display: flex; align-items: center; gap: 8px; }
.tier-name { font-weight: 620; font-size: 14.5px; }
.tier-top .tag { margin-left: auto; }
.tier-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); margin-top: 5px; }
.tier-desc { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }

/* ---------------- 对局底部 / 遮罩 ---------------- */

.play-foot { margin-top: 22px; }
.play-foot .btn { width: 100%; }

.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 24px;
}
.overlay-box {
  text-align: center;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lift);
  max-width: 340px;
  width: 100%;
}

.review-row .c { color: var(--bad); font-size: 12.5px; }

/* ---------------- 响应式 ---------------- */

@media (max-width: 860px) {
  .entry-grid { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --header-h: 54px; --radius: 14px; }

  .view { padding: 22px 14px 60px; }
  .card { padding: 18px 16px; }
  .hero { padding: 12px 0 22px; }
  .hero p { font-size: 14.5px; }

  .brand small { display: none; }
  .nav a { padding: 7px 9px; font-size: 13.5px; }
  .nav .who { padding-left: 9px; }
  .nav .who .uname { display: none; }

  .prompt { padding: 22px 4px 26px; }
  .prompt-hint { margin-top: 10px; }

  .opt { padding: 14px 14px; min-height: 60px; }
  .opt:hover:not(.locked) { transform: none; }
  .opt .opt-text { font-size: 14.5px; }

  .count-grid { grid-template-columns: repeat(2, 1fr); }

  .versus { padding: 13px 14px; gap: 8px; }
  .vs-score { font-size: 20px; }

  .quiz-foot { gap: 12px; font-size: 11.5px; flex-wrap: wrap; }
  .kbd-hint { display: none; }

  .countdown { font-size: 62px; padding: 30px 0; }

  .mode-card { padding: 17px 16px; }
  .mode-desc { min-height: 0; }
  .room-code { font-size: 38px; }
  .join-row { flex-direction: column; }
  .tier-card { padding: 13px 14px; }
}

@media (max-width: 380px) {
  .nav a { padding: 7px 7px; font-size: 13px; }
  .brand span.t { font-size: 14px; }
}

/* 保证手机上选项按钮足够大且不被底部安全区遮挡 */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .view { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  }
}

/* ============================================================
   活动页 / 称号 / 商店
   ============================================================ */

/* ---------------- 活动横幅与点数 ---------------- */

.act-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  margin-bottom: 16px;
}
.act-banner { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; object-position: center; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.act-hero-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 20px 4px; }
.act-k { font-size: 12px; color: var(--muted); }
.act-points .v { font-size: 28px; font-weight: 660; letter-spacing: -.02em; font-family: var(--mono); margin-top: 2px; }
.act-bonus .v { font-size: 28px; font-weight: 660; letter-spacing: -.02em; font-family: var(--mono); margin-top: 2px; color: var(--ok); }
.act-s { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.act-rule {
  margin: 14px 20px 18px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 12.5px; color: var(--text-2); line-height: 1.9;
}
.act-rule b { color: var(--text); }
.act-rule .rule-list { margin: 6px 0 0; padding-left: 18px; }
.act-rule .rule-list li { margin: 2px 0; }
.act-rule .rule-list li::marker { color: var(--muted); }
.act-note { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 12px; }

/* ---------------- 排行榜 ---------------- */

.board { display: grid; gap: 6px; margin-top: 12px; }
.board-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 13.5px;
  min-width: 0; overflow: hidden;
}
.board-row.top { background: var(--bg-soft); border-color: var(--line); }
.board-row.me { border-color: var(--accent); background: var(--accent-soft); }
.board-row .rank {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  background: var(--bg-soft); color: var(--muted);
}
.board-row .rank.r1 { background: #d9a441; color: #fff; }
.board-row .rank.r2 { background: #9aa3ad; color: #fff; }
.board-row .rank.r3 { background: #b4794f; color: #fff; }
.board-row .who { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; overflow: hidden; }
.board-row .nm { flex: 1 1 auto; min-width: 4em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .who .title-chip { flex: 0 1 auto; min-width: 0; }
.board-row .pts { flex: none; margin-left: auto; font-family: var(--mono); font-weight: 660; }
.board-row .prize { flex: none; display: flex; align-items: center; min-width: 0; max-width: 42%; }
.board-row .prize .title-chip { max-width: 100%; }
.board-row .prize .title-chip img { max-width: 100%; }

/* ---------------- 称号徽章 ---------------- */

.title-chip {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; flex: none;
  height: 22px; padding: 0 7px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--bg-soft); color: var(--text-2);
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  overflow: hidden;
}
.title-chip img { display: block; height: 22px; width: auto; max-width: 92px; object-fit: contain; }
.title-chip.equipped { border-color: var(--accent); color: var(--accent); }
.title-chip.empty { color: var(--muted); border-style: dashed; }

/* ---------------- 通用小徽章 ---------------- */

.chip {
  display: inline-block; flex: none;
  padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line-strong);
  font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1.6;
  background: var(--bg);
}
.chip.you { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip.bonus { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.chip.ok { border-color: var(--ok); color: var(--ok); }

/* ---------------- 商店卡牌 ---------------- */

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(166px, 1fr)); gap: 14px; margin-top: 12px; }
.shop-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column;
}
.shop-card.owned { border-color: var(--line-strong); }
.shop-card .thumb { aspect-ratio: 3 / 4; background: var(--bg-soft); display: grid; place-items: center; overflow: hidden; }
.shop-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sc-top { display: flex; align-items: center; gap: 6px; }
.star { font-size: 11px; letter-spacing: .06em; }
.star.s4 { color: #d9a441; }
.star.s3 { color: #8f7ad6; }
.star.s2 { color: #5aa0d8; }
.sc-char { font-size: 12.5px; font-weight: 620; }
.sc-name { font-size: 12px; color: var(--text-2); }
.sc-foot { margin-top: auto; padding-top: 9px; display: flex; align-items: center; gap: 8px; }
.sc-foot .price { font-family: var(--mono); font-size: 12.5px; font-weight: 620; }
.sc-foot .btn { margin-left: auto; padding: 6px 11px; font-size: 12.5px; }

/* ---------------- 我的称号 ---------------- */

.equipped-line { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 9px 0 2px; }
.equipped-line .btn { margin-left: auto; }
.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-top: 12px; }
.title-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.title-card.locked { opacity: .55; }
.title-card .tc-img { height: 46px; display: grid; place-items: center; }
.title-card .tc-img .title-chip { height: 34px; padding: 0 10px; }
.title-card .tc-img .title-chip img { height: 34px; max-width: 132px; }
.title-card .tc-name { font-size: 12.5px; font-weight: 600; }
.title-card .tc-act .btn { padding: 6px 12px; font-size: 12.5px; }

/* ---------------- 危险按钮与警告框 ---------------- */

.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger.solid:hover { background: var(--bad); opacity: .9; }

.overlay-box.warn { text-align: left; max-width: 470px; }
.overlay-box.warn h3 { margin: 0 0 10px; font-size: 17px; font-weight: 660; letter-spacing: -.01em; }
.warn-line { font-size: 13px; color: var(--text-2); margin: 10px 0 0; line-height: 1.7; }
.warn-list { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-2); line-height: 1.95; }
.warn-list b { color: var(--text); }
.warn-list.keep { color: var(--muted); }
.warn-tip { font-size: 12px; color: var(--bad); margin-top: 12px; line-height: 1.7; }
.overlay-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.overlay-actions .btn { flex: none; min-width: 96px; }

/* 误选单词英文高亮（练习选项 / 复盘 / 错题本 / 战报） */
.opt .opt-word.bad { color: var(--bad); }
.review-row .c b, .mistake-row .c b { font-style: normal; font-weight: 700; }

/* ---------------- 历史记录折叠（点击一行展开逐题记录） ---------------- */

.hist-item { border-radius: var(--radius-sm); }
.hist-row { cursor: pointer; user-select: none; }
.hist-row:hover { background: var(--bg-soft); }
.hist-detail {
  display: none; margin-top: 4px; padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.hist-item.open > .hist-detail { display: block; }
.hist-detail .hd-line { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.chev {
  display: inline-block; margin-left: 4px; font-size: 11px; line-height: 1;
  color: var(--muted); transition: transform .16s ease;
}
.hist-item.open > .hist-row .chev { transform: rotate(180deg); }

/* ---------------- 称号页按活动名分组折叠 ---------------- */

.title-group {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-top: 12px; overflow: hidden;
}
.tg-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 0; cursor: pointer; text-align: left;
  background: var(--bg-soft); color: var(--text);
  font-family: inherit; font-size: 13px;
}
.tg-head:hover { background: var(--bg); }
.tg-head .tg-name { font-weight: 660; }
.tg-head .tg-meta { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); flex: none; }
.tg-head .chev { margin-left: 2px; flex: none; }

/* ---------------- 3⁷ 品牌页顶栏 / 数据栏 / 历史公告（要求7） ---------------- */

/* 顶栏五区：【3⁷（公告）（练习）（对战）】【活动】【强制重载】【用户 ID】【退出】 */
.topbar .brand { flex: none; }
.topbar .nav-main { margin-left: auto; }

/* 3⁷ 入口：点击品牌回到主界面并展开/收起「公告 / 练习 / 对战」三栏（非一级按钮） */
.topbar .brand-wrap { position: relative; display: flex; align-items: center; flex: none; }
.topbar .brand-wrap .brand {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; border-radius: 10px;
}
.topbar .brand-wrap .brand:hover .t { color: var(--accent); }
.topbar .brand-wrap .chev {
  margin-left: 5px; font-size: 11px; color: var(--muted);
  transition: transform .18s ease; flex: none;
}
.topbar .brand-wrap.active .chev { transform: rotate(180deg); }

/* 三栏（公告 / 练习 / 对战）：纵向展开的浮层菜单，每项独占一行 */
.topbar .nav-sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 180px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.topbar .nav-sub .sub {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  text-align: left;
  white-space: nowrap;
}
.nav-sub.hide { display: none; }

.nav .sub {
  padding: 5px 9px; border-radius: 8px;
  font-size: 13px; color: var(--text-2);
  border: 1px solid transparent;
}
.nav .sub:hover { background: var(--bg-soft); color: var(--text); }
.nav .sub.active { background: var(--bg-soft); color: var(--text); font-weight: 600; border-color: var(--line); }

.who-id {
  padding: 5px 10px; min-height: 32px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--text);
  font-family: inherit; font-size: 13px; cursor: pointer;
  max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center;
}
.who-id:hover { border-color: var(--line-strong); }

/* 公告类型标签（标题最前方的【类型】） */
.n-type { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.n-type.act { color: #d98fb8; }
.n-type.maintain { color: #e0a35c; }
.n-type.update { color: #7fb6e6; }
.n-type.info { color: var(--muted); }

/* 3⁷ 页：查看更多 */
.notice-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.notice-actions .btn { flex: none; }

/* 历史公告列表 */
.notice-row {
  display: block; padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.notice-row:last-child { border-bottom: 0; }
.notice-row:hover .nr-title { color: var(--accent); }
.nr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nr-title { font-size: 14.5px; font-weight: 620; }
.nr-time { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--mono); flex: none; }
.nr-brief { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* 活动页：当期 / 历史 子页切换 */
.tabs.act-scope { margin-bottom: 16px; }

/* 数据栏（右上角点击用户 ID 弹出）：称号不在此展示 */
.overlay-box.sheet { max-width: 520px; text-align: left; padding: 22px 22px 18px; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sheet-head .sh-name { font-size: 18px; font-weight: 660; letter-spacing: -.01em; }
.sheet-head .sh-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.sheet-head .btn { margin-left: auto; flex: none; }
.stat-tiles.mini { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.stat-tiles.mini .tile { padding: 12px; }
.stat-tiles.mini .tile .v { font-size: 18px; }
.sheet-links { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet-links .btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 720px) {
  .nav .sub { padding: 5px 7px; font-size: 12.5px; }
  .who-id { max-width: 96px; }
  .nr-time { margin-left: 0; }
  .overlay-box.sheet { max-width: 100%; }
}
.title-group.open .tg-head .chev { transform: rotate(180deg); }
.tg-body { display: none; padding: 4px 12px 14px; }
.title-group.open .tg-body { display: block; }
.title-group .title-grid { margin-top: 8px; }

@media (max-width: 640px) {
  .act-banner { max-height: 170px; }
  .act-hero-body { grid-template-columns: 1fr; gap: 10px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .title-grid { grid-template-columns: repeat(2, 1fr); }
  .tg-body { padding: 4px 10px 12px; }
  .title-group .title-grid { margin-top: 6px; }
  .overlay-actions { flex-direction: column-reverse; }
  .overlay-actions .btn { width: 100%; }

  /* 手机端整屏自适应：进页面即完整可见，无需手动缩小 */
  .topbar { padding: 0 12px; gap: 8px; }
  .view { padding-left: 12px; padding-right: 12px; }
  .hero h1 { font-size: clamp(23px, 7.4vw, 30px); }
  .page-title { font-size: 20px; }
  .quiz-meta { flex-wrap: wrap; gap: 4px 10px; }
  .quiz-meta .mono { margin-left: auto; }
  .quiz-head { margin-bottom: 16px; }
  .board-row { gap: 6px 8px; padding: 9px 10px; font-size: 13px; flex-wrap: wrap; row-gap: 4px; }
  .board-row .rank { width: 24px; height: 24px; border-radius: 7px; font-size: 11.5px; }
  .board-row .who { flex: 1 1 auto; min-width: 6.5em; flex-wrap: wrap; row-gap: 2px; }
  .board-row .nm { flex: 1 1 auto; min-width: 4.5em; }
  .board-row .who .title-chip { max-width: 100%; }
  .board-row .pts { font-size: 13px; }
  .board-row .prize { max-width: 36%; }
  .board-row .prize .title-chip { padding: 0 5px; }
  .board-row .prize .title-chip img { max-width: 72px; }
  .act-rule { margin: 12px 14px 14px; }
  .equipped-line { flex-wrap: wrap; }
  .shop-card, .title-card, .shop-grid, .title-grid { min-width: 0; }
  .tg-head .tg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   公告 / 顶部强制重载（改进要求 6）
   ============================================================ */

.nav .btn.reload-btn {
  padding: 6px 11px;
  min-height: 32px;
  font-size: 13px;
  border-color: var(--line);
  color: var(--text-2);
  white-space: nowrap;
}
.nav .btn.reload-btn:hover { color: var(--text); }
.nav .btn.reload-btn .rl-short { display: none; }

/* 全站全屏按钮：固定顶栏左上角（品牌区一侧），任意页面均可用 */
.topbar .btn.fs-btn {
  padding: 6px 11px;
  min-height: 32px;
  font-size: 13px;
  border-color: var(--line);
  color: var(--text-2);
  white-space: nowrap;
}
.topbar .btn.fs-btn:hover { color: var(--text); border-color: var(--accent); }
.topbar .btn.fs-btn .rl-short { display: none; }

.notice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 13.5px;
  min-width: 0;
}
.notice-bar:hover { border-color: var(--accent); }
.notice-bar .nb-tag {
  flex: none;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.notice-bar .nb-title {
  flex: 0 1 auto;
  max-width: 42%;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-bar .nb-brief {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-bar .nb-more { flex: none; color: var(--accent); font-size: 12.5px; }

.notice-card { padding: 20px 22px; }
.notice-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.notice-title { font-size: 17px; font-weight: 660; margin: 0; }
.notice-time { margin-left: auto; color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.notice-body { font-size: 14.5px; line-height: 1.95; color: var(--text); word-break: break-word; }

/* 当前公告默认折叠：折叠态只显示摘要，点「展开全文」看全文 */
.notice-card.collapsed .notice-body {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notice-foot { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

/* 历史活动：整卡可点击进入该期活动页；状态三态（未开始 / 进行中 / 已结束） */
.hist-card { display: block; color: inherit; text-decoration: none; transition: border-color .16s ease; }
.hist-card:hover { border-color: var(--line-strong); }
.hist-card .hist-more {
  margin-top: 12px; color: var(--accent); font-size: 13px;
  display: flex; align-items: center; gap: 4px;
}
.hist-card .hist-more .chev { font-size: 14px; }
.chip.soon { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .nav .btn.reload-btn { padding: 6px 9px; font-size: 12.5px; }
  .nav .btn.reload-btn .rl-full { display: none; }
  .nav .btn.reload-btn .rl-short { display: inline; }
  .topbar .btn.fs-btn { padding: 6px 9px; font-size: 12.5px; }
  .topbar .btn.fs-btn .rl-full { display: none; }
  .topbar .btn.fs-btn .rl-short { display: inline; }
  .nav { gap: 1px; }
  .notice-bar { padding: 9px 12px; gap: 7px; }
  .notice-bar .nb-title { max-width: 50%; }
  .notice-bar .nb-brief { display: none; }
  .notice-card { padding: 16px 15px; }
  .notice-body { font-size: 14px; }
}

/* ============================================================
   UNO 游戏（#/game）：大厅 / 房间 / 牌桌 / 结算
   仅使用站点既有设计变量，自动适配浅色与深色主题
   ============================================================ */

.uno-panel, .uno-table { max-width: 1040px; }
.uno-panel h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.uno-sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.uno-hint { margin: 6px 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; }

/* 大厅 */
.uno-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.uno-box { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); }
.uno-box h3 { margin: 0; font-size: 15px; font-weight: 650; }
.uno-box .btn { margin-top: auto; }
.uno-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.uno-field.inline { flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.uno-field select, .uno-field input { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-sink); color: var(--text); font: inherit; font-size: 13px; }
.uno-field input { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.uno-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.uno-rules { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); color: var(--text-2); font-size: 13px; }
.uno-rules summary { cursor: pointer; color: var(--text); font-weight: 600; }
.uno-rules ol { margin: 10px 0 0; padding-left: 20px; line-height: 1.85; }
.uno-rules b { color: var(--text); }

/* 房间等待 */
.uno-code-big { font-family: var(--mono); font-size: 22px; letter-spacing: .14em; color: var(--accent); }
.uno-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.uno-seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 112px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-sink); }
.uno-seat.filled { border-style: solid; background: var(--bg); }
.uno-seat.bot { background: var(--accent-soft); }
.uno-seat.left { opacity: .5; }
.uno-ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.uno-ava.ghost { background: var(--bg-soft); color: var(--muted); }
.uno-nm { font-size: 13px; font-weight: 600; }
.uno-me, .uno-host, .uno-warn { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-style: normal; }
.uno-me { background: var(--bg-soft); color: var(--text-2); }
.uno-host { background: var(--accent-soft); color: var(--accent); }
.uno-warn { background: var(--bad-soft); color: var(--bad); }
.uno-warn.ok { background: var(--ok-soft); color: var(--ok); }

/* 牌桌：四人围一圈 —— 自己永远在下方，对手沿上半圈并排；
   中央只留「摸牌堆 / 当前牌 / 出牌提示 / 上一手」，当前颜色与出牌方向全部由彩色箭头环表达 */
.uno-table {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  position: relative;
}
.uno-ops { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.uno-opp { flex: 1 1 0; min-width: 0; max-width: 240px; display: grid; gap: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.uno-opp.side-t { max-width: 300px; }
/* 轮到谁出牌：整块「发亮的框」（呼吸式发光），颜色跟随当前牌局颜色（--tone，由 uno-tone-* 注入）。
   替代旧方案——旧方案在玩家 id 旁挂顺/逆时针箭头图标（.uno-seat-arrow），已移除。 */
.uno-tone-red { --tone: #d7263d; --tone-glow: rgba(215, 38, 61, .55); }
.uno-tone-yellow { --tone: #e8b52c; --tone-glow: rgba(232, 181, 44, .55); }
.uno-tone-green { --tone: #2ea44f; --tone-glow: rgba(46, 164, 79, .55); }
.uno-tone-blue { --tone: #2f6bed; --tone-glow: rgba(47, 107, 237, .55); }
@keyframes uno-turn-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--tone, var(--accent)), 0 0 10px 1px var(--tone-glow, var(--accent-glow)); }
  50% { box-shadow: 0 0 0 3px var(--tone, var(--accent)), 0 0 18px 5px var(--tone-glow, var(--accent-glow)); }
}
.uno-opp.turn, .uno-mine.turn {
  border-color: var(--tone, var(--accent));
  animation: uno-turn-glow 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .uno-opp.turn, .uno-mine.turn {
    animation: none;
    box-shadow: 0 0 0 3px var(--tone, var(--accent)), 0 0 16px 4px var(--tone-glow, var(--accent-glow));
  }
}
.uno-opp.left, .uno-opp.off { opacity: .55; }
.uno-opp-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uno-opp-hand { display: flex; flex-wrap: wrap; gap: 3px; }
.uno-back { width: 12px; height: 18px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; background: linear-gradient(135deg, #2f3b55, #1d2537); }
.uno-more { font-size: 11px; color: var(--muted); }
.uno-opp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uno-cnt { font-size: 12px; color: var(--muted); }

/* 中央牌桌：摸牌堆 + 当前牌；四周彩色箭头环承担「方向 + 当前颜色」的表达 */
.uno-center {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: center;
  justify-items: center;
  padding: 8px 12px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.uno-pile { position: relative; display: flex; align-items: center; gap: 20px; padding: 5px 14px; }
.uno-ring { position: absolute; inset: -4px -8px; pointer-events: none; z-index: 3; }
.uno-arrow { position: absolute; font-size: 22px; font-weight: 900; line-height: 1; color: var(--muted); opacity: .5; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.uno-arrow.c-red { color: #d7263d; opacity: 1; }
.uno-arrow.c-yellow { color: #e8b52c; opacity: 1; }
.uno-arrow.c-green { color: #2ea44f; opacity: 1; }
.uno-arrow.c-blue { color: #2f6bed; opacity: 1; }
.uno-arrow.at { top: 0; left: 50%; transform: translate(-50%, -2px); }
.uno-arrow.ar { right: -2px; top: 50%; transform: translate(0, -50%); }
.uno-arrow.ab { bottom: 0; left: 50%; transform: translate(-50%, 2px); }
.uno-arrow.al { left: -2px; top: 50%; transform: translate(0, -50%); }

/* 牌桌页：全屏按钮已固定在顶栏左上角（全站统一），此处无需再为按钮做位置偏移 */
body.uno-table-open .topbar { gap: 10px; }
/* 中央「当前牌 / 摸牌堆」统一为小尺寸，牌桌本体只占很小的版面 */
.uno-discard .uno-card { width: 38px; height: 57px; border-radius: 7px; }
.uno-discard .uno-card b { font-size: 16px; }
.uno-discard .uno-card i { font-size: 8px; bottom: 3px; }
.uno-deck { display: grid; place-items: center; width: 46px; height: 66px; border: 2px solid rgba(255, 255, 255, .28); border-radius: 8px; background: linear-gradient(135deg, #2f3b55, #1d2537); color: #fff; box-shadow: var(--shadow); }
.uno-deck.can { cursor: pointer; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.uno-deck-n { font-size: 15px; font-weight: 700; }
.uno-deck i { font-size: 10px; font-style: normal; opacity: .82; }
/* 次要信息（房间号 / 弃牌堆张数 / 当前颜色）集中在手牌栏展示，不再占用牌桌版面 */
.uno-chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: 12px; }
.uno-color.chip { border-color: transparent; color: #fff; font-weight: 600; }
.uno-color.c-red, .uno-color-btn.c-red { background: #d7263d; }
.uno-color.c-yellow, .uno-color-btn.c-yellow { background: #e8b52c; }
.uno-color.c-green, .uno-color-btn.c-green { background: #2ea44f; }
.uno-color.c-blue, .uno-color-btn.c-blue { background: #2f6bed; }
.uno-turnbar { font-size: 13.5px; color: var(--text-2); text-align: center; }
.uno-turnbar .hot { color: var(--tone, var(--accent)); }

/* 房间大厅：列出等待开局的房间，注明该房已选规则，可一键加入 */
.uno-hall { grid-column: 1 / -1; }
.uno-hall-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uno-hall-head h3 { margin: 0; }
.uno-hall-head .btn { margin-top: 0; }
.uno-hall-list { display: grid; gap: 8px; margin-top: 8px; }
.uno-hall-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.uno-hall-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.uno-hall-code { font-family: var(--mono); font-size: 16px; letter-spacing: .12em; color: var(--accent); }
.uno-hall-meta { font-size: 12.5px; color: var(--text-2); }
.uno-hall-rule { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft, rgba(120, 160, 255, .14)); color: var(--accent); font-size: 11.5px; }
.uno-hall-row .btn { margin-top: 0; }
.uno-hall-row .btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 860px) {
  .uno-hall { grid-column: auto; }
  .uno-hall-row { flex-wrap: wrap; }
}
.uno-clock { margin-left: 6px; font-family: var(--mono); color: var(--accent); }
.uno-last { min-height: 16px; font-size: 12px; color: var(--muted); text-align: center; }

.uno-mine { display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.uno-mine-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uno-mine-bar .uno-chip { padding: 2px 8px; font-size: 11.5px; }
/* 手牌：单行不换行 + 卡片宽度随张数自适应（--hw 由 uno.js 按手牌数下发），
   保证「四人 + 牌桌 + 全部手牌」同屏可见 */
.uno-hand { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 4px; min-height: 0; padding: 2px 2px 0; overflow: hidden; }
.uno-hand .uno-card { width: var(--hw, 46px); height: calc(var(--hw, 46px) * 1.5); border-radius: 8px; }
.uno-hand .uno-card b { font-size: calc(var(--hw, 46px) * .44); }
.uno-hand .uno-card i { bottom: calc(var(--hw, 46px) * .1); font-size: calc(var(--hw, 46px) * .19); }
.uno-hand .uno-card.can { transform: translateY(-8px); }

/* 牌面 */
.uno-card { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 86px; border: 2px solid #fff; border-radius: 10px; color: #fff; font-weight: 700; box-shadow: var(--shadow); user-select: none; }
.uno-card b { font-size: 22px; line-height: 1; }
.uno-card i { position: absolute; bottom: 5px; font-size: 9px; font-style: normal; opacity: .92; }
.uno-card.mini { width: 26px; height: 38px; border-width: 1px; border-radius: 5px; }
.uno-card.mini b { font-size: 12px; }
.uno-card.mini i { display: none; }
.uno-card.c-red { background: #d7263d; }
.uno-card.c-yellow { background: #e8b52c; }
.uno-card.c-green { background: #2ea44f; }
.uno-card.c-blue { background: #2f6bed; }
.uno-card.c-wild { background: conic-gradient(#d7263d 0 25%, #e8b52c 0 50%, #2ea44f 0 75%, #2f6bed 0); }
.uno-card.can { cursor: pointer; transform: translateY(-10px); box-shadow: 0 10px 18px -8px rgba(16, 18, 25, .5); }
.uno-card.dim { opacity: .35; }

/* 选色弹层 */
.uno-picker { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(10, 12, 18, .55); }
.uno-picker-box { display: grid; gap: 12px; padding: 20px 22px; border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-lift); text-align: center; }
.uno-picker-box p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.uno-picker-row { display: flex; gap: 10px; }
.uno-color-btn { width: 58px; height: 58px; border: 0; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.uno-color-btn:hover { transform: scale(1.06); }

/* 结算 */
.uno-result { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; }
.uno-result th, .uno-result td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.uno-result th { color: var(--text-2); font-weight: 600; }
.uno-result tr.win td { background: var(--ok-soft); }

/* 可选规则（质疑 / 叠加 / 快出牌）：勾选开关与说明；叠加链 / 质疑提示 */
.uno-rule-pick {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
.uno-rule-pick .uno-hint { margin: 0; }
.uno-rule-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.uno-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.uno-rule input { accent-color: var(--accent); }
.uno-rule-desc { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); font-size: 13px; }
.uno-rule-desc li { margin: 3px 0; }
.uno-stack {
  align-self: center;
  padding: 5px 12px;
  border: 1px solid var(--bad);
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--text);
  font-size: 12.5px;
}
.uno-ask {
  align-self: center;
  display: grid;
  gap: 8px;
  max-width: 470px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
}
.uno-ask.mine { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.uno-ask p { margin: 0; font-size: 13.5px; color: var(--text); }
.uno-ask-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.uno-ask .uno-hint { font-size: 12px; color: var(--muted); }

/* 竖屏 / 窄屏：对手在上方换行排布，手牌允许换行（横屏才强制单行同屏） */
@media (max-width: 720px) {
  .uno-grid { grid-template-columns: 1fr; }
  .uno-seats { grid-template-columns: repeat(2, 1fr); }
  .uno-ops { flex-wrap: wrap; }
  .uno-opp { flex: 1 1 40%; max-width: none; }
  .uno-hand { flex-wrap: wrap; gap: 5px; }
  .uno-hand .uno-card { width: 46px; height: 69px; }
  .uno-hand .uno-card b { font-size: 20px; }
  .uno-arrow { font-size: 19px; }
}

/* 手机横屏：压缩高度，四人 + 牌桌 + 全部手牌必须同屏 */
@media (orientation: landscape) and (max-height: 620px) {
  /* 牌桌页：顶栏更矮、页面内边距收窄，把纵向空间全留给牌桌 */
  body.uno-table-open { --header-h: 40px; }
  body.uno-table-open .view { max-width: none; padding: 4px 8px 6px; }
  body.uno-table-open .topbar { padding: 0 8px; gap: 6px; }
  .uno-table { gap: 4px; }
  /* 对手卡片压成单行：昵称 + 手牌图标 + 张数并排，给牌桌让出高度 */
  .uno-ops { flex-wrap: nowrap; gap: 5px; }
  .uno-opp { flex: 1 1 0; max-width: 240px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 3px 7px; }
  .uno-opp.side-t { max-width: 300px; }
  .uno-opp-top { flex: 0 0 auto; gap: 5px; }
  .uno-opp-top .uno-nm { font-size: 11.5px; }
  /* 横屏对手卡片压成单行：头像与称号再缩一档，保证三人一排不折行 */
  .uno-opp-top .av.av-opp { width: 19px; height: 19px; font-size: 10px; }
  .uno-opp-top .title-chip { height: 15px; padding: 0 5px; font-size: 10px; }
  .uno-opp-top .title-chip img { height: 13px; max-width: 54px; }
  .uno-opp-hand { flex: 0 0 auto; gap: 2px; }
  .uno-opp-hand .uno-back:nth-child(n+2) { display: none; }
  .uno-opp-foot { flex: 0 0 auto; gap: 6px; }
  .uno-back { width: 9px; height: 13px; }
  .uno-more, .uno-cnt { font-size: 10.5px; }
  .uno-center { padding: 3px 8px; gap: 2px; }
  .uno-pile { gap: 14px; padding: 2px 10px; }
  .uno-deck { width: 32px; height: 46px; }
  .uno-deck-n { font-size: 12px; }
  .uno-deck i { display: none; }
  .uno-discard .uno-card { width: 30px; height: 45px; border-radius: 6px; }
  .uno-discard .uno-card b { font-size: 13px; }
  .uno-turnbar { font-size: 12px; line-height: 1.35; }
  .uno-last { min-height: 0; font-size: 10.5px; line-height: 1.3; }
  .uno-mine { padding: 4px 7px; gap: 3px; }
  .uno-mine-bar { gap: 4px; }
  .uno-mine-bar .uno-chip { padding: 1px 7px; font-size: 10.5px; }
  .uno-mine-bar .btn.sm { padding: 2px 8px; font-size: 11.5px; }
  .uno-hand { gap: 3px; padding-top: 0; }
  .uno-arrow { font-size: 16px; }
  .uno-stack, .uno-ask { padding: 3px 9px; font-size: 11px; }
}

/* 极矮横屏（折叠屏 / 小屏手机横屏）：再压一层，杜绝纵向滚动 */
@media (orientation: landscape) and (max-height: 420px) {
  .uno-opp { padding: 2px 6px; }
  .uno-center { padding: 2px 6px; }
  .uno-pile { gap: 11px; }
  .uno-deck { width: 28px; height: 40px; }
  .uno-discard .uno-card { width: 26px; height: 39px; }
  .uno-turnbar { font-size: 11.5px; }
  .uno-mine { padding: 3px 6px; }
}

/* 窄屏横屏（小屏手机 649~720px 宽）：对手卡片再瘦身，保证三人一排不折行 */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 720px) {
  .uno-opp { padding: 2px 6px; gap: 2px 5px; }
  .uno-opp-hand { display: none; }
  .uno-opp-foot .uno-warn { padding: 0 5px; font-size: 10px; }
  .uno-nm { font-size: 11px; }
}

/* 超矮横屏（<400px 高）：再降一级，手牌栏与牌桌都压到极限 */
@media (orientation: landscape) and (max-height: 400px) {
  .uno-opp { padding: 1px 5px; }
  .uno-center { padding: 1px 5px; gap: 1px; }
  .uno-pile { padding: 1px 8px; gap: 9px; }
  .uno-deck { width: 26px; height: 37px; }
  .uno-discard .uno-card { width: 24px; height: 36px; border-radius: 5px; }
  .uno-discard .uno-card b { font-size: 11px; }
  .uno-turnbar { font-size: 11px; }
  .uno-last { font-size: 10px; }
  .uno-mine { padding: 2px 6px; gap: 2px; }
  .uno-mine-bar { gap: 3px; }
  .uno-mine-bar .uno-chip { padding: 0 6px; font-size: 10px; }
  .uno-mine-bar .btn.sm { padding: 1px 7px; font-size: 11px; }
  .uno-hand { gap: 2px; }
}

/* ============================================================
   第三批：横屏「四人围一圈」牌桌
   对手不再挤在上方一排，而是分列「左 / 上 / 右」三个方位；
   自己固定在最下方，与中央牌桌共同围成一圈。
   出牌方向与各玩家状态全部交给带颜色的箭头表达
   ============================================================ */
/* 玩家 id 旁的顺/逆时针箭头图标（.uno-seat-arrow）已整体移除：
   「谁在出牌」改由整块发亮框表达（.uno-opp.turn / .uno-mine.turn），
   「出牌方向」由中央牌堆的箭头环（.uno-ring .uno-arrow）表达。 */

@media (orientation: landscape) {
  .uno-table {
    display: grid;
    grid-template-columns: minmax(64px, 124px) minmax(0, 1fr) minmax(64px, 124px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  /* 对手脱离「上方一排」：.uno-ops 只做透传，不再生成盒子 */
  .uno-ops { display: contents; }
  .uno-opp.side-tl { grid-area: 1 / 1; }
  .uno-opp.side-t { grid-area: 1 / 2; justify-self: center; flex-wrap: wrap; justify-content: center; }
  .uno-opp.side-tr { grid-area: 1 / 3; }
  .uno-opp.side-l { grid-area: 2 / 1; }
  .uno-opp.side-r { grid-area: 2 / 3; }
  /* 侧翼卡片走窄列，恢复纵向堆叠，避免横向溢出 */
  .uno-opp.side-l, .uno-opp.side-r { display: grid; max-width: none; justify-items: center; text-align: center; }
  .uno-center { grid-area: 2 / 2; }
  .uno-mine { grid-area: 3 / 1 / 4 / 4; }
  /* 顶部对手与顶栏拉开距离，避免看起来「粘」在按钮上 */
  .uno-table { padding-top: 6px; }
  /* 方向箭头环：给牌堆留出「外侧留白（gutter）」，四个箭头落在留白里，
     与中央牌堆、下方「等待 / 轮到你出牌」提示文字保持安全距离，不再压住文字 */
  .uno-pile { padding: 19px 30px; }
  .uno-ring { inset: 0; }
  .uno-arrow { font-size: 17px; filter: drop-shadow(0 0 4px currentColor); }
  .uno-arrow.at { top: 0; transform: translate(-50%, 0); }
  .uno-arrow.ab { bottom: 0; transform: translate(-50%, 0); }
  .uno-arrow.al { left: 0; transform: translate(0, -50%); }
  .uno-arrow.ar { right: 0; transform: translate(0, -50%); }
}



/* ============================================================
   第四批：手机端全屏（沉浸）适配
   手机全屏后，系统状态栏 / 刘海 / 挖孔区域不会被页面背景覆盖，会露出一条黑带。
   两条措施：
   ① 让 html、body 与全屏背景层（::backdrop）铺满整屏并涂满页面底色，
      避免“页面只画了一部分、其余露出浏览器默认黑底”；
   ② 按 safe-area-inset-* 把顶栏与内容从状态栏 / 刘海区域推进可视区，
      保证按钮与牌桌不被系统栏遮住（横屏时状态栏/刘海在左右两侧）。
   ============================================================ */
html { min-height: 100%; background: var(--bg); }
html:fullscreen,
html:fullscreen body {
  width: 100%;
  height: 100%;
  background-color: var(--bg);
}
/* 全屏背景层与页面同色：消除四周露出的浏览器默认黑底 */
html:fullscreen::backdrop { background: var(--bg); }
/* 全站：全屏后按安全区收窄左右内容区（横屏状态栏 / 刘海在两侧） */
html:fullscreen .topbar {
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
}
html:fullscreen .view {
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
}
/* 牌桌横屏：横向留白本就很小，只补安全区，尽量不压缩牌桌宽度 */
body.uno-table-open:fullscreen .topbar {
  padding-left: calc(8px + env(safe-area-inset-left, 0px));
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
}
body.uno-table-open:fullscreen .view {
  padding-left: calc(8px + env(safe-area-inset-left, 0px));
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
}

/* 极矮小横屏（视口高 ≤400px）：纵向预算最紧，适当收窄箭头环留白，
   保证「四人 + 牌桌（含箭头环）+ 全部手牌」仍旧同屏不裁切 */
@media (orientation: landscape) and (max-height: 400px) {
  .uno-pile { padding: 15px 22px; }
  .uno-arrow { font-size: 14px; }
}

/* ---------------- 个人中心（#/me） ---------------- */

/* 顶部身份卡：头像 + 账号 + 称号 + 快捷入口，横向排列、窄屏自动换行 */
.prof-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.prof-avatar {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  font-weight: 660;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #7aa2f7);
  user-select: none;
}
.prof-id { flex: 1 1 260px; min-width: 0; }
.prof-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -.01em;
}
.prof-meta {
  display: flex;
  gap: 6px 18px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted);
}
.prof-meta b { color: var(--text-2); font-weight: 600; }
.prof-links {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.prof-links .btn { flex: 1 1 auto; justify-content: center; }

/* 三张战绩卡：练习 / 对战并排，UNO 与历史记录通栏 */
.prof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.prof-grid .card { min-width: 0; }
.prof-wide { grid-column: 1 / -1; }
.prof-grid .card .stat-tiles { margin-bottom: 0; }

.prof-list-title {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 18px 0 9px;
}

/* 历史记录筛选：与站点按钮同一套视觉，仅选中态用主色 */
.prof-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.prof-tabs .tab {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 14px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
}
.prof-tabs .tab:hover { background: var(--bg-soft); }
.prof-tabs .tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.hist-item.hide { display: none; }

/* ============================================================
   头像（个人中心卡牌头像选择 + 全局顶栏头像，共用 .av 组件）
   ============================================================ */

.av {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; font-size: 13px;
  border-radius: 50%; overflow: hidden; flex: none;
  color: #fff; font-weight: 660; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--accent), #7aa2f7);
  user-select: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.init { text-transform: uppercase; }
.av.av-sm { width: 22px; height: 22px; font-size: 12px; }
.av.av-hero { width: 100%; height: 100%; font-size: inherit; }

/* ---------------- UNO 内的头像与称号 ----------------
   房间座位 / 牌桌对手 / 牌桌本方 / 结算表 / 房间大厅 / 再来一局邀请
   真人复用上面的 .av 与 .title-chip 组件（按场合取不同尺寸），AI 座位仍是原有的 .uno-ava 圆形底纹 */
.av.av-seat { width: 38px; height: 38px; font-size: 15px; }
.av.av-opp { width: 24px; height: 24px; font-size: 11px; }
.av.av-row { width: 26px; height: 26px; font-size: 12px; }
.uno-seat .uno-nm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.uno-hall-host, .uno-rm-from, .uno-res-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* 本方信息 chip：头像 + 名字（超长省略）+ 称号 */
.uno-mine-bar .uno-chip.uno-me-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 4px; }
.uno-me-nm { max-width: 6.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 称号徽章在 UNO 各处收窄一档，避免撑破座位格 / 对手卡片 */
.uno-nm .title-chip, .uno-opp-top .title-chip, .uno-hall-meta .title-chip,
.uno-result .title-chip, .uno-picker-box .title-chip, .uno-me-chip .title-chip {
  height: 17px; padding: 0 6px; font-size: 10.5px; border-radius: 5px;
}
.uno-nm .title-chip img, .uno-opp-top .title-chip img, .uno-hall-meta .title-chip img,
.uno-result .title-chip img, .uno-picker-box .title-chip img, .uno-me-chip .title-chip img {
  height: 15px; max-width: 64px;
}

/* 顶栏用户名按钮：头像 + 名字（名字过长省略），与原有 max-width 配合 */
.who-id .av { margin-right: 7px; }
.who-id .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 个人中心头部：容器本身已有渐变圆底，这里保证卡牌图 / 首字都能填满 */
.prof-avatar { overflow: hidden; }

/* 头像选择面板（按期数 / 活动分组展示卡牌） */
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-top: 12px;
}
.avatar-card {
  display: flex; flex-direction: column; padding: 0; min-width: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.avatar-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
.avatar-card.on { border-color: var(--accent); background: var(--accent-soft); }
.avatar-card[disabled] { opacity: .6; cursor: default; }
/* 未拥有的卡牌：可看见但不可选（点击只提示），与服务端 setAvatar 的拥有权校验对应 */
.avatar-card.locked { opacity: .55; cursor: not-allowed; }
.avatar-card.locked:hover { border-color: var(--line); box-shadow: none; }
.avatar-card.locked .av-thumb img { filter: grayscale(.85); }
.avatar-card.locked .chip.lock { background: var(--bg-soft); color: var(--muted); border-color: var(--line); }
.avatar-card .av-thumb { display: block; aspect-ratio: 3 / 4; background: var(--bg-soft); overflow: hidden; }
.avatar-card .av-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-card .av-name { display: block; font-size: 12.5px; font-weight: 620; padding: 7px 8px 0; }
.avatar-card .av-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 8px 8px; }
.avatar-card .av-sub .chip { padding: 1px 7px; font-size: 11px; }
.prof-tabs .tab .tab-sub { margin-left: 6px; font-size: 11px; opacity: .7; }

@media (max-width: 720px) {
  .prof-grid { grid-template-columns: minmax(0, 1fr); }
  .prof-avatar { width: 52px; height: 52px; font-size: 22px; }
  .avatar-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
}

/* ==================== 对练 · 进阶挑战（角色牌子） ==================== */

/* 结算卡（进阶挑战 / 活动点数共用） */
.act-earn { padding: 18px 20px; }
.act-earn .earn-main { font-size: 26px; font-weight: 700; margin: 6px 0 4px; }
.act-earn .earn-main span { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.act-earn .earn-formula { font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
.act-earn .earn-cards { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
.act-earn .earn-total { margin-top: 12px; font-size: 13px; color: var(--text-2); }
.act-earn .earn-total a { color: var(--accent); text-decoration: none; }
.act-earn .earn-total a:hover { text-decoration: underline; }

/* 进阶挑战开关（对练设置页的第二个选项框） */
.adv-opt {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
  padding: 14px 16px; margin-bottom: 4px; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.adv-opt:hover { border-color: var(--line-strong); }
.adv-opt.active { border-color: var(--accent); background: var(--accent-soft); }
/* 不可用（未开放 / 非对练形式）：灰色置灰、不可点击 */
.adv-opt.locked {
  cursor: not-allowed; opacity: .5; border-style: dashed; background: var(--bg-soft);
}
.adv-opt.locked:hover { border-color: var(--line); }
.adv-opt.locked .adv-title, .adv-opt.locked .adv-desc { color: var(--muted); }
.adv-opt .adv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adv-opt .adv-title { font-size: 14.5px; font-weight: 650; }
.adv-opt .adv-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.adv-opt .adv-desc b { color: var(--accent); }

/* 进阶挑战题量锁定提示（开启后题量由活动设定，不可自选） */
.adv-lock {
  padding: 12px 14px; margin-bottom: 18px; font-size: 13px; color: var(--text-2);
  background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}

/* 进阶挑战标记 */
.adv-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 999px; vertical-align: middle;
}

/* 角色牌子小徽章（对练角色卡 / 对局 HUD） */
.badge-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  padding: 2px 8px; font-size: 11.5px; font-weight: 600;
  color: var(--text-2); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; vertical-align: middle;
}
.badge-chip img { display: block; height: 16px; width: auto; max-width: 44px; object-fit: contain; }
.badge-chip b { color: var(--text-1); font-weight: 650; }
.badge-chip b.lv { color: var(--muted); font-weight: 600; }
.vs-name .badge-chip, .countdown + p .badge-chip { margin: 0 0 0 6px; }

/* 结算页牌子详情 */
.adv-earn .adv-up {
  margin-top: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.adv-badge-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.adv-badge-img { height: 76px; width: auto; max-width: 140px; object-fit: contain; }
.adv-badge-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 76px; min-width: 96px; padding: 0 10px; font-size: 12px; text-align: center;
  color: var(--muted); background: var(--bg-soft);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}
.adv-badge-info { flex: 1; min-width: 0; font-size: 13px; line-height: 1.7; }
.adv-badge-info .mono { font-family: var(--mono); color: var(--text-2); }
.adv-badge-info .bar { margin: 6px 0 4px; }
.adv-badge-info .t { font-size: 12px; color: var(--muted); }

/* 活动页「我的角色牌子」：阶段名（普通牌 / 羽牌 / 花牌 / 星牌）+ 阶数 */
.badge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px;
}
.badge-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.badge-card.empty { border-style: dashed; }
.badge-card .bd-img {
  display: flex; align-items: center; justify-content: center;
  height: 60px; min-width: 60px;
}
.badge-card .bd-img img { max-height: 60px; max-width: 96px; object-fit: contain; }
.badge-card .bd-ph {
  height: 60px; min-width: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}
.badge-card .bd-body { flex: 1; min-width: 0; }
.badge-card .bd-name { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.badge-card .bd-lv { font-size: 12.5px; color: var(--text-2); }
.badge-card .bd-lv .bd-stage { color: var(--accent); font-weight: 650; margin-right: 4px; }
.badge-card .bd-lv .t { font-size: 11.5px; color: var(--muted); }
.badge-card .bd-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* 已获得的牌子卡上直接佩戴 / 卸下（第二个槽位为「角色牌子专用」） */
.badge-card .bd-act { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.badge-card .bd-act .btn { min-height: 28px; padding: 5px 12px; font-size: 12.5px; border-radius: 8px; }
.badge-card.worn { border-color: var(--accent); background: var(--accent-soft); }
.badge-card .bd-name .chip { margin-left: 6px; }

/* 称号槽位面板：1 号放称号，2 号只放角色牌子 */
.equip-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.equip-slot {
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft);
}
.equip-slot .slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.equip-slot .slot-no {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 650; color: var(--bg); background: var(--text);
}
.equip-slot .slot-kind { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.equip-slot .slot-filled { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.equip-slot .slot-filled .btn { margin-left: auto; }
.equip-slot .slot-name { font-size: 12.5px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-slot .slot-empty { font-size: 12px; color: var(--muted); line-height: 1.7; }
.equip-slot.badge-only { border-style: dashed; }


/* 对练设定页的进阶挑战区块：开启按钮 + 「我的牌子进度」同框紧贴，避免中间夹一层大标题显挤 */
.adv-block {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.adv-block.on { border-color: var(--accent); }
.adv-block .adv-opt { margin-bottom: 0; background: var(--bg); }
.adv-block .adv-opt.locked { background: var(--bg-soft); }
.adv-opt .adv-desc.muted { color: var(--muted); }
.adv-mine { padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.adv-mine-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--text-1);
}
.adv-mine-head .label-more { font-weight: 400; }

/* 对练设定页的牌子进度：紧凑版牌子卡（窄屏可两列并排，不再一列堆高） */
.badge-grid.adv-mine { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
.badge-grid.adv-mine .badge-card { padding: 8px 10px; gap: 8px; }
.badge-grid.adv-mine .badge-card.cur { border-color: var(--accent); }
.badge-grid.adv-mine .bd-img { height: 46px; min-width: 46px; }
.badge-grid.adv-mine .bd-img img { max-height: 46px; max-width: 70px; }
.badge-grid.adv-mine .bd-ph { height: 46px; min-width: 46px; padding: 0 6px; font-size: 11px; }
.badge-grid.adv-mine .bd-name { margin-bottom: 2px; font-size: 12.5px; }
.badge-grid.adv-mine .bd-lv { font-size: 12px; }
.badge-grid.adv-mine .bd-sub { margin-top: 3px; font-size: 11px; }
.badge-grid.adv-mine .bar { margin-top: 4px; height: 5px; }
.badge-grid.adv-mine .bd-name .chip { padding: 0 6px; font-size: 10.5px; line-height: 1.5; }

/* 昵称旁「佩戴中」的角色牌子小徽章（对局界面 / 结算页） */
.badge-chip-worn { border-color: var(--accent); background: var(--accent-soft); }

/* ---------------- 个人中心头像区折叠按钮 ---------------- */

/* 折叠容器：按钮负责切换 .folded，正文包在 .fold-body 里；折叠后按钮仍在（可再展开） */
.card.foldable { position: relative; }
.card.foldable.folded > .fold-body { display: none; }
.card-fold {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px 10px; font-size: 12px; line-height: 1.7; border-radius: 999px;
}
.card-fold .chev { margin-left: 2px; }
.card-fold[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.prof-hero .prof-fold { margin-left: auto; align-self: flex-start; }
.prof-hero.folded { align-items: center; }
.prof-hero.folded .prof-id { flex: 1 1 220px; }
#prof-av-card .section-label .label-more {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 400; letter-spacing: 0;
}
#prof-av-card .section-label .label-more #av-state { font-family: var(--mono); font-size: 11.5px; }

/* ---------------- 个人中心「称号」：二级展示（点开槽位才看到可选清单） ---------------- */

.equip-slots { align-items: start; }
.equip-slot { padding: 10px 12px; }
.equip-slot .slot-head { margin-bottom: 0; }
.equip-slot .slot-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 2px 0; border: 0; background: none; color: var(--text);
  font: inherit; cursor: pointer; text-align: left;
}
.equip-slot .slot-toggle:hover .slot-kind { color: var(--fg); }
.equip-slot .slot-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.equip-slot .slot-cur { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 4px; }
.equip-slot .slot-toggle .chev { margin-left: auto; flex: none; font-size: 12px; }
.equip-slot.open .slot-toggle .chev { transform: rotate(180deg); }
.equip-slot .slot-body { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.equip-slot.open .slot-body { display: block; }
.equip-slot .slot-hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.75; }
.equip-slot .title-grid { margin-top: 4px; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
.equip-slot .badge-grid.adv-mine { margin-top: 4px; }
.equip-slot .act-note { margin: 10px 0 0; }

/* ---------------- 个人中心分组：「练习」「游戏」两大可折叠板块 ---------------- */

/* 分组卡沿用 card.foldable / fold-body 折叠机制（见上）；组内小标题用 prof-list-title，
   折叠后只留组名 + 摘要（摘要常驻在组头，不随 fold-body 隐藏） */
.prof-group { margin-bottom: 14px; }
.prof-group > .section-label { display: flex; align-items: center; margin-bottom: 0; }
.prof-group > .section-label .label-more {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-weight: 400; letter-spacing: 0;
}
.prof-group .fold-body { margin-top: 14px; }
.prof-group .stat-tiles.mini { margin-bottom: 0; }
.prof-group .prof-list-title { display: flex; align-items: center; gap: 8px; }
.prof-group .fold-body > .prof-list-title:first-child { margin-top: 0; }
.prof-list-title .label-more { margin-left: auto; font-weight: 400; letter-spacing: 0; }
.prof-list-title .label-more a { color: var(--muted); text-decoration: none; }
.prof-list-title .label-more a:hover { color: var(--fg); text-decoration: underline; }
.prof-group-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---------------- 手机窄屏精修（≤430px）：修复内容被挤压 / 溢出 / 截断 ---------------- */

@media (max-width: 430px) {
  :root { --header-h: 52px; }

  /* 页面与卡片内边距收紧，给内容让出宽度 */
  .view { padding: 18px 12px 56px; }
  .card { padding: 15px 13px; }

  /* 顶栏：导航入口 + 昵称 + 退出不再互挤 */
  .nav { gap: 2px; }
  .nav a { padding: 7px 6px; font-size: 13px; }
  .nav .who { padding-left: 8px; margin-left: 2px; gap: 6px; }
  .nav .who .btn.ghost { padding: 6px 8px; }
  .who-id { padding: 4px 7px; }
  .who-id .who-name { max-width: 4.5em; }

  /* 统计磁贴：数值字号收紧，两列不再互相挤压 */
  .stat-tiles { gap: 10px; }
  .tile { padding: 12px; }
  .tile .v { font-size: 21px; }
  .tile .k, .tile .s { font-size: 11px; }

  /* 近 14 天柱状图：窄屏改为 7 列 × 2 行网格，14 天全部可见，不再压扁或溢出卡片 */
  .chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px 6px; height: auto; align-items: end; padding-top: 6px; }
  .chart .col { height: 88px; gap: 4px; }
  .chart .stack { max-width: 100%; height: auto; flex: 1 1 auto; min-height: 0; }
  .chart .cap, .chart .lab { font-size: 9.5px; }

  /* 个人中心身份卡（长昵称 / 长 ID 允许折行） */
  .prof-hero { gap: 10px 12px; }
  .prof-id { flex: 1 1 160px; min-width: 0; }
  .prof-name { font-size: 17px; flex-wrap: wrap; }
  .prof-meta { gap: 4px 10px; font-size: 12px; }
  .prof-meta > span { min-width: 0; overflow-wrap: anywhere; }
  .prof-links { gap: 6px; }
  .prof-links .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }

  /* 分组头：窄屏收起摘要，只留组名与折叠按钮，避免挤成两行 */
  .prof-group-sub { display: none; }
  .prof-group > .section-label { letter-spacing: .04em; }

  /* 称号槽位 / 角色牌子卡：窄屏单列，已佩戴行允许换行，卸下按钮不被挤出 */
  .equip-slots { grid-template-columns: minmax(0, 1fr); }
  .equip-slot .slot-filled { flex-wrap: wrap; }
  .equip-slot .slot-body { margin-top: 10px; padding-top: 10px; }

  /* 头像 / 牌子网格：缩小列宽下限，一屏放更多列且不溢出 */
  .avatar-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .badge-grid, .badge-grid.adv-mine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* 历史 / 对局记录：时间戳换到第二行，主文案不再被挤成省略号 */
  .review-row { grid-template-columns: 20px minmax(0, 1fr); gap: 6px 8px; }
  .review-row > .t { grid-column: 2; }
  .review-row > span:not(.mark):not(.t) { min-width: 0; }

  /* 筛选胶囊与分组小标题 */
  .prof-tabs { gap: 6px; }
  .prof-tabs .tab { padding: 6px 11px; font-size: 12px; }

  /* UNO 大厅 / 房间：输入框等固有宽度不再撑破容器（320px 下曾有 7px 横向溢出） */
  .uno-panel, .uno-table { max-width: 100%; min-width: 0; }
  .uno-grid, .uno-seats { grid-template-columns: minmax(0, 1fr); }
  .uno-box { padding: 14px; min-width: 0; }
  .uno-field { min-width: 0; }
  .uno-field input, .uno-field select { width: 100%; min-width: 0; box-sizing: border-box; }
  .uno-acts { gap: 8px; }
  .uno-rules { padding: 12px 14px; }
  .uno-rules ol { padding-left: 18px; }
}

@media (max-width: 360px) {
  .view { padding: 16px 10px 52px; }
  .card { padding: 13px 11px; }
  .nav a { padding: 7px 5px; font-size: 12.5px; }
  .tile .v { font-size: 19px; }
  .chart .col { height: 84px; }
}