:root {
  --green: #58cc02;
  --green-dark: #46a302;
  --blue: #1cb0f6;
  --blue-dark: #1899d6;
  --red: #ff4b4b;
  --red-dark: #ea2b2b;
  --yellow: #ffc800;
  --yellow-dark: #e0a800;
  --purple: #ce82ff;
  --purple-dark: #a568cc;
  --orange: #ff9600;
  --orange-dark: #e08600;
  --ink: #3c3c3c;
  --ink-soft: #777777;
  --ink-faint: #afafaf;
  --line: #e7dcc6;
  --bg: #f4edde;
  --card: #fdfaf1;
  --radius: 16px;
  --radius-sm: 12px;
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  /* ink-wash paper theme */
  --paper: #f4edde;
  --paper-card: #fdfaf1;
  --ink-wash: #3a4542;
  --paper-texture: url("/assets/paper-texture.jpg");
  --texture-opacity: .12;
  --lift-1: 1px 3px 0 rgba(58, 69, 66, .12), 6px 14px 24px -14px rgba(58, 69, 66, .28);
  --lift-2: 1px 4px 0 rgba(58, 69, 66, .18), 8px 18px 30px -14px rgba(58, 69, 66, .34);
  --lift-btn: 8px 16px 26px -16px rgba(58, 69, 66, .4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #d8d0bc;
  background-image: radial-gradient(circle at 20% 20%, #ece4d0 0, transparent 40%), radial-gradient(circle at 80% 90%, #e0d6bd 0, transparent 40%);
  display: flex;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #0b79b7; outline-offset: 3px; }
button:disabled { cursor: default; }
svg { display: block; }

/* #app is the flex child of body; without an explicit width it shrink-wraps
   its content and .phone percentage widths collapse to content size */
#app { width: 100%; display: flex; justify-content: center; }

/* ---------- phone frame ---------- */

.phone {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px calc(92px + env(safe-area-inset-bottom));
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 60px rgba(58, 69, 66, .22);
}
/* rice-paper grain overlay: subtle, non-interactive, never blocks clicks */
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--paper-texture);
  background-size: 760px auto;
  opacity: var(--texture-opacity);
  mix-blend-mode: multiply;
}
.phone > *:not(.bottom-nav) { position: relative; z-index: 1; flex-shrink: 0; }

@media (min-width: 480px) {
  .phone {
    /* fixed phone aspect ratio (430 × 932 ≈ 9 : 19.5) */
    height: min(932px, calc(100dvh - 32px));
    aspect-ratio: 430 / 932;
    width: auto;
    min-height: 0;
    margin: 16px 0;
    border-radius: 32px;
    border: 4px solid #fbf7ec;
    overflow-y: auto;
  }
}

/* ---------- 3D buttons ---------- */

.btn-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  color: #fff;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  user-select: none;
}
.btn-3d svg { width: 22px; height: 22px; }
.btn-3d:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-3d:active { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }

.btn-3d.green  { background: var(--green);  box-shadow: 0 4px 0 var(--green-dark), var(--lift-btn); }
.btn-3d.blue   { background: var(--blue);   box-shadow: 0 4px 0 var(--blue-dark), var(--lift-btn); }
.btn-3d.red    { background: var(--red);    box-shadow: 0 4px 0 var(--red-dark), var(--lift-btn); }
.btn-3d.yellow { background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-dark), var(--lift-btn); color: #8a5a00; }
.btn-3d.white  { background: var(--paper-card); box-shadow: 0 4px 0 var(--line), var(--lift-btn); color: var(--ink-soft); border: 2px solid var(--line); }
.btn-3d.white:active { box-shadow: 0 0 0 var(--line) !important; }

.btn-3d.wide { width: 100%; }
.btn-3d small { font-size: 12px; font-weight: 700; opacity: .85; }

.big-action {
  width: 100%;
  flex-wrap: wrap;
  padding: 16px 20px 14px;
  font-size: 18px;
  text-transform: none;
}
.big-action small { flex-basis: 100%; }

/* ---------- pills & chips ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.pill svg { width: 12px; height: 12px; }
.pill.blue   { background: #ddf4ff; color: var(--blue-dark); }
.pill.yellow { background: #fff3c4; color: #a8730a; }
.pill.purple { background: #f1e3ff; color: var(--purple-dark); }
.pill.green  { background: #e5f9d4; color: var(--green-dark); }
.pill.white  { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand b { white-space: nowrap; }
.chip-button { white-space: nowrap; }
@media (max-width: 380px) {
  .brand b { font-size: 15px; }
  .brand-mascot { width: 34px; height: 34px; font-size: 18px; }
  .chip-button { padding: 8px 9px; font-size: 12px; }
}
.brand-mascot {
  font-size: 22px;
  background: var(--paper-card);
  border: 2px solid var(--line);
  border-radius: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  box-shadow: var(--lift-1);
}
.brand b { font-size: 19px; font-weight: 900; color: var(--green); letter-spacing: .01em; }

.chip-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  position: relative;
  transition: transform .08s, box-shadow .08s;
}
.chip-button svg { width: 16px; height: 16px; }
.chip-button.blue { background: var(--blue); box-shadow: 0 3px 0 var(--blue-dark); }
.chip-button:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.chip-button i {
  font-style: normal;
  background: #fff;
  color: var(--blue-dark);
  border-radius: 999px;
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 900;
}

/* ---------- bottom nav ---------- */

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper-card);
  border-top: 2px solid var(--line);
  z-index: 20;
}
@media (min-width: 480px) {
  .bottom-nav {
    /* keep the nav glued to the fixed-ratio phone frame */
    width: calc(min(932px, 100dvh - 32px) * 430 / 932 - 8px);
    max-width: none;
    bottom: 20px;
    border-radius: 0 0 28px 28px;
  }
}
.bottom-nav button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-faint);
  border: 2px solid transparent;
  transition: transform .08s, background .15s, color .15s;
}
.bottom-nav button svg { width: 20px; height: 20px; }
.bottom-nav button:active { transform: scale(.95); }
.bottom-nav button.active {
  color: var(--blue);
  background: #ddf4ff;
  border-color: #b7e6fd;
}

/* ---------- home: hero ---------- */

.hero-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120'%3E%3Cpath d='M214 8 C 150 28, 88 62, 28 108 C 84 68, 152 36, 217 14 Z M198 36 C 188 40, 178 46, 170 52 C 180 46, 190 41, 198 36 Z' fill='%231c3a0e' fill-opacity='.13'/%3E%3C/svg%3E") no-repeat right -24px top -18px / 240px auto,
    linear-gradient(160deg, var(--green) 0%, #3db400 100%);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--green-dark), var(--lift-btn);
  padding: 26px 20px 20px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  position: relative;
}
.hero-mascot {
  font-size: 56px;
  line-height: 1;
  animation: bob 2.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.12));
}
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.hero-card h1 { font-size: 26px; font-weight: 900; line-height: 1.3; }
.hero-card p { font-size: 14px; font-weight: 700; opacity: .9; }
.btn-3d.hero-cta {
  margin-top: 6px;
  background: var(--paper-card);
  color: var(--green-dark);
  box-shadow: 0 4px 0 rgba(0,0,0,.18), var(--lift-btn);
  width: 100%;
}

/* ---------- home: stats ---------- */

.stat-row { display: flex; gap: 10px; }
.stat-chip {
  flex: 1;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.stat-icon { font-size: 20px; display: grid; place-items: center; }
.stat-icon svg { width: 22px; height: 22px; }
.stat-chip.orange .stat-icon { color: var(--orange); }
.stat-chip strong { font-size: 20px; font-weight: 900; }
.stat-chip.orange strong { color: var(--orange); }
.stat-chip.green strong { color: var(--green); }
.stat-chip.purple strong { color: var(--purple-dark); }
.stat-chip strong sup { font-size: 12px; }
.stat-chip small { font-size: 11px; font-weight: 700; color: var(--ink-faint); }

/* ---------- section heading ---------- */

.section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.section-heading h2 { font-size: 18px; font-weight: 900; flex: 1; }
.heading-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
}
.heading-icon svg { width: 20px; height: 20px; }
.heading-icon.yellow { background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-dark); }
.heading-icon.blue { background: var(--blue); box-shadow: 0 3px 0 var(--blue-dark); }

/* ---------- leaderboard ---------- */

.leaderboard, .rules-card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--lift-1);
  padding: 16px;
}

.podium { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.podium article {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 12px 6px;
  border-radius: var(--radius);
  background: var(--bg);
}
.podium-1 { order: 2; padding-top: 18px !important; background: #fff8dd !important; border: 2px solid #ffe08a; }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium strong { font-size: 13px; font-weight: 800; }

.medal {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.medal.gold   { background: linear-gradient(160deg, #ffd93d, var(--yellow)); color: #8a5a00; }
.medal.silver { background: linear-gradient(160deg, #e8edf2, #b9c6d2); color: #5b6b7a; }
.medal.bronze { background: linear-gradient(160deg, #f0b27a, #d18a4b); color: #7a4a1d; }

.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.1);
}
.avatar-1 { background: var(--yellow); color: #8a5a00; }
.avatar-2 { background: var(--blue); }
.avatar-3 { background: var(--purple); }

.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  font-size: 14px;
}
.rank-row > b { color: var(--ink-faint); font-weight: 900; width: 18px; }
.rank-row span { flex: 1; font-weight: 700; }
.rank-row span i {
  font-style: normal;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
}
.rank-row > strong { font-weight: 900; color: var(--ink-soft); }
.rank-row.me { border-color: var(--green); background: #f0fbe4; }
.rank-row.me > strong { color: var(--green-dark); }

.mini-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.mini-avatar.me { background: var(--green); }
.mini-avatar.foe { background: var(--red); }

/* ---------- duel landing ---------- */

.duel-intro {
  text-align: center;
  padding: 12px 8px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.duel-mascot { font-size: 52px; animation: bob 2.6s ease-in-out infinite; }
.duel-intro h1 { font-size: 26px; font-weight: 900; line-height: 1.3; }
.duel-intro p { font-size: 14px; font-weight: 700; color: var(--ink-soft); }

.player-pass {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  padding: 14px;
}
.player-pass > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.player-pass small { font-size: 11px; font-weight: 800; color: var(--blue); }
.player-pass strong { font-size: 16px; font-weight: 900; }
.player-pass span { font-size: 12px; font-weight: 700; color: var(--ink-faint); }

.passport-avatar {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--green);
  color: #fff;
  display: grid; place-items: center;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--green-dark);
}

.rules-card ol { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rules-card li { display: flex; align-items: center; gap: 12px; }
.rules-card li b {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #ddf4ff;
  color: var(--blue-dark);
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.rules-card li span { font-size: 14px; font-weight: 700; color: var(--ink-soft); }

/* ---------- history ---------- */

.simple-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.simple-header h1 { flex: 1; font-size: 20px; font-weight: 900; }
.back-button {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--paper-card);
  border: 2px solid var(--line);
  box-shadow: var(--lift-1);
  font-size: 24px;
  font-weight: 900;
  color: var(--ink-soft);
  display: grid; place-items: center;
  transition: transform .08s, box-shadow .08s;
}
.back-button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }

.history-summary {
  display: flex;
  gap: 10px;
}
.history-summary > div {
  flex: 1;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-summary span { font-size: 12px; font-weight: 800; color: var(--ink-faint); }
.history-summary strong { font-size: 24px; font-weight: 900; color: var(--blue); }
.history-summary strong small { font-size: 14px; }

.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  padding: 12px 14px;
}
.history-list article > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.history-list strong { font-size: 15px; font-weight: 800; }
.history-list article span { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.result-stamp {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.result-stamp.win { background: var(--green); box-shadow: 0 3px 0 var(--green-dark); }
.result-stamp.loss { background: var(--red); box-shadow: 0 3px 0 var(--red-dark); }
.pts-win { color: var(--green-dark); font-weight: 900; }
.pts-loss { color: var(--red); font-weight: 900; }

.empty-state {
  text-align: center;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: 20px;
}
.empty-mascot { font-size: 48px; }
.empty-state h2 { font-size: 18px; font-weight: 900; }
.empty-state p { font-size: 13px; font-weight: 700; color: var(--ink-faint); }

/* ---------- full-color pages (matching / ready / final) ---------- */

.blue-page { background: linear-gradient(170deg, var(--blue) 0%, #0f8fd6 100%); }
.green-page { background: linear-gradient(170deg, var(--green) 0%, #3db400 100%); }

/* ---------- matching ---------- */

.matching {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}
.matching h1 { font-size: 28px; font-weight: 900; }
.matching > p { font-weight: 700; opacity: .85; font-size: 14px; }
.typing { display: inline-block; animation: blink 1s steps(3) infinite; }
@keyframes blink { 50% { opacity: .2 } }

.radar {
  position: relative;
  width: 220px; height: 220px;
  display: grid; place-items: center;
}
.radar i {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  left: 50%; top: 50%;
  transform: rotate(calc(var(--i) * 30deg)) translateX(96px);
  transform-origin: 0 0;
  animation: radarPulse 1.8s calc(var(--i) * .15s) infinite;
}
@keyframes radarPulse { 0%,100% { opacity: .25; scale: .7 } 50% { opacity: 1; scale: 1.15 } }
.radar-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 40px;
  font-weight: 900;
  border: 5px solid rgba(255,255,255,.5);
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
  animation: radarPing 1.8s ease-out infinite;
}
@keyframes radarPing {
  0% { box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(255,255,255,.5); }
  100% { box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 42px rgba(255,255,255,0); }
}

.match-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  font-weight: 800;
}
.match-profile b { font-weight: 900; }
.cancel-match { min-width: 180px; }

/* ---------- ready screen ---------- */

.ready-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #fff;
  text-align: center;
}
.versus { display: flex; align-items: center; gap: 14px; }
.versus article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 120px;
}
.versus strong { font-size: 14px; font-weight: 900; }
.battle-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  border: 5px solid #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  animation: popIn .5s cubic-bezier(.2,1.6,.4,1) backwards;
}
.versus article:last-child .battle-avatar { animation-delay: .15s; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.battle-avatar.warm { background: var(--green); }
.battle-avatar.cool { background: var(--red); }
.vs-seal {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: #8a5a00;
  display: grid; place-items: center;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--yellow-dark);
  animation: popIn .5s .3s cubic-bezier(.2,1.6,.4,1) backwards;
}
.countdown {
  font-size: 92px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 0 rgba(0,0,0,.18);
  animation: countPop .7s cubic-bezier(.2,1.6,.4,1);
}
@keyframes countPop { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
.ready-tip { font-size: 14px; font-weight: 700; opacity: .85; }

/* ---------- battle ---------- */

.battle-page { display: flex; flex-direction: column; gap: 14px; flex: 1; }

.battle-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fighter { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.fighter.right { align-items: flex-end; }
.fighter-id { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; }
.fighter-id b { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter small { font-size: 10px; font-weight: 800; color: var(--ink-faint); }

.health {
  height: 14px;
  border-radius: 999px;
  background: #e5e5e5;
  border: 2px solid var(--line);
  overflow: hidden;
  width: 100%;
}
.health i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #7fe019, var(--green));
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.health.foe i { background: linear-gradient(180deg, #ff7a7a, var(--red)); float: right; }

.round-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lift-1);
  padding: 6px 12px;
  flex-shrink: 0;
}
.round-badge small { font-size: 10px; font-weight: 800; color: var(--ink-faint); }
.round-badge b { font-size: 20px; font-weight: 900; line-height: 1.1; }
.round-badge em {
  font-style: normal;
  background: var(--yellow);
  color: #8a5a00;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 3px;
  animation: multiplierGlow 1s ease-in-out infinite alternate;
}
@keyframes multiplierGlow { from { box-shadow: 0 0 0 0 rgba(255,200,0,.5); } to { box-shadow: 0 0 0 6px rgba(255,200,0,0); } }

.timer-wrap { display: flex; align-items: center; gap: 10px; }
.timer-line {
  flex: 1;
  height: 16px;
  border-radius: 999px;
  background: #e5e5e5;
  border: 2px solid var(--line);
  overflow: hidden;
}
.timer-line i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #54cdff, var(--blue));
  transition: width .05s linear;
}
.timer-wrap strong { font-size: 18px; font-weight: 900; color: var(--blue-dark); min-width: 48px; text-align: right; }
.timer-wrap strong small { font-size: 12px; }

.question-card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--lift-1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.question-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.question-meta b.pill { font-weight: 900; }
.question-card h1 { font-size: 19px; font-weight: 900; line-height: 1.45; }

.answers { display: flex; flex-direction: column; gap: 10px; }
.answer-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--paper-card);
  box-shadow: var(--lift-2);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  text-align: left;
  transition: transform .08s, box-shadow .08s, background .15s, border-color .15s;
}
.answer-btn span {
  width: 30px; height: 30px;
  border-radius: 10px;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.answer-btn b { font-weight: 800; }
.answer-btn:not(:disabled):hover { background:#f4fbff; border-color:#b7e6fd; transform:translateY(-1px); box-shadow:0 4px 0 var(--line); }
.answer-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.answer-btn:disabled { opacity: .95; }

.answer-btn.selected { border-color: var(--blue); background: #ddf4ff; box-shadow: 0 3px 0 #84d8fd; color: var(--blue-dark); }
.answer-btn.selected span { border-color: var(--blue); color: var(--blue); }
.answer-btn.correct { border-color: var(--green); background: #d7ffb8; box-shadow: 0 3px 0 #a5ed6e; color: var(--green-dark); }
.answer-btn.correct span { border-color: var(--green); color: var(--green-dark); background: #fff; }
.answer-btn.wrong { border-color: var(--red); background: #ffdfe0; box-shadow: 0 3px 0 #ffb2b2; color: var(--red-dark); }
.answer-btn.wrong span { border-color: var(--red); color: var(--red); background: #fff; }
.answer-btn.muted { opacity: .55; }

.battle-footer { text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-faint); }

/* ---------- round result overlay ---------- */

.round-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60,60,60,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 30;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0 } }
.round-sheet {
  width: 100%;
  max-width: 430px;
  background: var(--paper-card);
  border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border-top: 4px solid var(--green);
  animation: sheetUp .35s cubic-bezier(.2,1.2,.4,1);
}
.round-sheet.tie { border-top-color: var(--yellow); }
.round-sheet.lose { border-top-color: var(--blue); }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet-mascot { font-size: 46px; animation: popIn .45s cubic-bezier(.2,1.6,.4,1); }
.result-kicker {
  font-size: 13px;
  font-weight: 900;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.round-sheet.lose .result-kicker { color: var(--blue-dark); }
.round-sheet.tie .result-kicker { color: #a8730a; }
.round-sheet h2 { font-size: 24px; font-weight: 900; }

.score-comparison {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 12px 22px;
}
.score-comparison > div { display: flex; flex-direction: column; }
.score-comparison span { font-size: 11px; font-weight: 800; color: var(--ink-faint); }
.score-comparison b { font-size: 24px; font-weight: 900; }
.score-comparison > div:first-child b { color: var(--green-dark); }
.score-comparison > div:last-child b { color: var(--red); }
.score-comparison em { color: var(--ink-faint); font-weight: 900; }
.round-sheet p { font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.6; }
.round-sheet p strong { color: var(--ink); }
.round-sheet p.answer-reveal {
  background: #fff7e0;
  border: 1px dashed #e0b84c;
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--ink);
}
.round-sheet p.answer-reveal strong { color: #a8730a; }
.round-sheet .btn-3d { margin-top: 4px; }

/* ---------- final screen ---------- */

.final-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: #fff;
  position: relative;
  padding: 20px 0;
}
.final-mascot { font-size: 72px; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(0,0,0,.12)); }
.final-emblem {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  animation: popIn .5s cubic-bezier(.2,1.6,.4,1);
}
.final-screen.victory .final-emblem { color: var(--green); }
.final-screen.defeat .final-emblem { color: var(--blue); }
.final-screen h1 { font-size: 28px; font-weight: 900; }
.final-screen > p { font-size: 14px; font-weight: 700; opacity: .9; max-width: 300px; }

.final-stats {
  display: flex;
  gap: 10px;
  width: 100%;
}
.final-stats > div {
  flex: 1;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.final-stats span { font-size: 11px; font-weight: 800; opacity: .85; }
.final-stats strong { font-size: 22px; font-weight: 900; }
.final-stats strong small { font-size: 13px; opacity: .8; }

.final-actions { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.post-match-auth {
  width: 100%;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.post-match-mascot { font-size: 32px; }
.post-match-auth p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.post-match-auth p strong { color: var(--ink); font-size: 15px; }
.post-match-actions { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.post-match-actions button { flex: 1; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute;
  top: -16px;
  left: calc((var(--i) * 41) % 100 * 1%);
  width: 10px; height: 14px;
  border-radius: 3px;
  background: hsl(calc(var(--i) * 47), 90%, 60%);
  animation: confettiFall calc(2.2s + (var(--i) % 5) * .4s) calc(var(--i) * .12s) linear infinite;
}
@keyframes confettiFall {
  from { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  to { transform: translateY(110vh) rotate(720deg); opacity: .6; }
}

/* ---------- audited question notes ---------- */

.audit-details {
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f9fcfe;
  overflow: hidden;
  text-align: left;
}
.audit-details summary {
  padding: 11px 13px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style-position: inside;
}
.audit-details[open] summary { border-bottom: 2px solid var(--line); }
.term-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px 8px; }
.term-card b { color: var(--ink); font-size: 13px; }
.term-card span { color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.source-links { display: flex; flex-wrap: wrap; gap: 7px; padding: 5px 13px 10px; }
.source-links a {
  color: var(--blue-dark);
  background: #ddf4ff;
  border: 1px solid #b7e6fd;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.audit-details > small {
  display: block;
  padding: 0 13px 11px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
}

/* ---------- desktop atlas desk ---------- */

@media (min-width: 900px) {
  body {
    min-height: 100dvh;
    padding: 24px 28px 24px 132px;
    align-items: flex-start;
    background:
      linear-gradient(90deg, rgba(58,69,66,.05) 1px, transparent 1px),
      linear-gradient(rgba(58,69,66,.05) 1px, transparent 1px),
      radial-gradient(circle at 18% 15%, #ece4d0 0, transparent 36%),
      radial-gradient(circle at 82% 88%, #e0d6bd 0, transparent 36%),
      #d8d0bc;
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
  }

  .phone {
    width: min(1400px, 100%);
    max-width: 1400px;
    height: auto;
    min-height: calc(100dvh - 48px);
    aspect-ratio: auto;
    margin: 0;
    padding: 28px 34px 34px;
    border: 4px solid #fbf7ec;
    border-radius: 28px;
    overflow: visible;
    box-shadow: 0 18px 60px rgba(58, 69, 66, .3);
  }

  .topbar {
    min-height: 54px;
    padding: 0 4px 12px;
    border-bottom: 2px solid var(--line);
  }
  .brand b { font-size: 24px; }
  .brand-mascot { width: 48px; height: 48px; font-size: 27px; }

  .bottom-nav {
    left: 24px;
    top: 50%;
    bottom: auto;
    width: 88px;
    max-width: 88px;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px;
    border: 3px solid #fbf7ec;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(58, 69, 66, .25);
  }
  .bottom-nav button {
    min-height: 76px;
    flex-direction: column;
    gap: 5px;
    padding: 10px 4px;
  }
  .bottom-nav button svg { width: 25px; height: 25px; }

  .home-layout {
    display: grid;
    grid-template-columns: minmax(440px, .9fr) minmax(520px, 1.1fr);
    grid-template-rows: auto minmax(290px, auto) 1fr;
    gap: 22px 28px;
  }
  .home-layout .topbar { grid-column: 1 / -1; }
  .home-layout .hero-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 256px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 28px 34px;
    position: relative;
    overflow: hidden;
  }
  .home-layout .hero-card::after {
    content: "◎";
    position: absolute;
    right: 42px;
    top: 32px;
    color: rgba(255,255,255,.2);
    font-size: 170px;
    line-height: 1;
  }
  .home-layout .hero-mascot { font-size: 72px; }
  .home-layout .hero-card h1 { max-width: 480px; font-size: clamp(34px, 3vw, 52px); }
  .home-layout .hero-card p { font-size: 16px; }
  .home-layout .hero-cta { width: auto; min-width: 280px; margin-top: 16px; }
  .home-layout .stat-row {
    grid-column: 1;
    grid-row: 3;
    align-items: stretch;
  }
  .home-layout .stat-chip {
    min-height: 96px;
    justify-content: center;
    flex-direction: row;
    text-align: left;
    gap: 12px;
  }
  .home-layout .stat-icon { font-size: 32px; }
  .home-layout .leaderboard {
    grid-column: 2;
    grid-row: 2 / 4;
    padding: 20px 22px;
  }
  .home-layout .section-heading h2 { font-size: 25px; }
  .home-layout .podium { min-height: 200px; }
  .home-layout .avatar { width: 64px; height: 64px; font-size: 26px; }
  .home-layout .avatar-1 { width: 80px; height: 80px; }
  .home-layout .rank-row { min-height: 52px; padding-inline: 16px; }

  .duel-layout {
    display: grid;
    grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr);
    grid-template-rows: auto auto auto auto;
    gap: 20px 34px;
    align-content: start;
  }
  .duel-layout .topbar { grid-column: 1 / -1; }
  .duel-layout .duel-intro {
    grid-column: 1;
    grid-row: 2 / 5;
    min-height: 430px;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 36px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(150deg, var(--blue), #5b7cff);
    box-shadow: 0 7px 0 var(--blue-dark);
  }
  .duel-layout .duel-mascot { font-size: 68px; }
  .duel-layout .duel-intro h1 { font-size: clamp(34px, 3.2vw, 50px); }
  .duel-layout .duel-intro p { max-width: 560px; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.7; }
  .duel-layout .player-pass { grid-column: 2; padding: 16px; }
  .duel-layout .big-action { grid-column: 2; min-height: 62px; }
  .duel-layout .rules-card { grid-column: 2; padding: 18px; }
  .duel-layout .rules-card li { min-height: 0; }

  .history-layout { max-width: 1100px; }
  .history-layout .simple-header { min-height: 52px; }
  .history-layout .history-summary > div { min-height: 78px; justify-content: center; padding-inline: 18px; }
  .history-layout .history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-layout .empty-state { grid-column: 1 / -1; min-height: 320px; }

  .battle-page { gap: 18px; }
  .battle-header { width: min(1080px, 100%); margin: 0 auto; }
  .fighter-id b { max-width: 180px; font-size: 15px; }
  .timer-wrap { width: min(1080px, 100%); margin: 0 auto; }
  .question-card {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 28px 34px 32px;
    gap: 22px;
  }
  .question-card h1 { font-size: clamp(25px, 2.3vw, 35px); line-height: 1.4; }
  .answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .answer-btn { min-height: 76px; padding: 16px 18px; font-size: 17px; }
  .battle-footer { width: min(1080px, 100%); margin: 0 auto; }

  .round-sheet {
    width: min(720px, calc(100% - 48px));
    border-radius: 24px;
    padding: 30px 34px;
  }
  .matching, .ready-screen, .final-screen {
    width: min(760px, 100%);
    margin: auto;
    min-height: calc(100dvh - 120px);
  }
  .versus { max-width: 650px; }
  .final-stats { max-width: 680px; }
  .final-actions { max-width: 480px; }
}


/* ---------- settings ---------- */
.nav-glyph { font-size: 20px; line-height: 1; }
.settings-layout { align-content: start; }
.settings-hero { display:flex; align-items:center; gap:12px; padding:14px 18px; color:#fff; border-radius:18px; background:linear-gradient(135deg,#405f75,#203847); box-shadow:0 4px 0 #142936; }
.settings-hero > span { font-size:30px; filter:drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.settings-hero small { color:#9bdfff; font-size:10px; font-weight:900; letter-spacing:.14em; }
.settings-hero h1 { font-size:21px; font-weight:900; }
.settings-hero p { margin-top:2px; font-size:12px; font-weight:700; opacity:.8; }
.settings-card { display:flex; flex-direction:column; gap:12px; padding:16px; background:var(--paper-card); border:2px solid var(--line); border-radius:20px; box-shadow:var(--lift-1); }
.settings-card.quiet { flex-direction:row; align-items:center; }
.settings-card.quiet .setting-copy { flex:1; }
.settings-card .btn-3d { min-height:46px; padding:10px 16px; }
.settings-card.quiet .btn-3d { flex:0 0 auto; }
.setting-copy { display:flex; align-items:flex-start; gap:12px; }
.setting-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; font-size:19px; background:#eef8ff; border-radius:12px; }
.setting-copy h2 { font-size:15px; font-weight:900; }
.setting-copy p { margin-top:3px; color:var(--ink-soft); font-size:12px; font-weight:700; line-height:1.55; }

/* ---------- interactive tutorial ---------- */
.tutorial-layer { position:fixed; inset:0; z-index:9000; pointer-events:none; font-family:var(--font); }
.tutorial-mask { position:fixed; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.tutorial-mask path { fill:rgba(14,27,36,.76); pointer-events:auto; }
.tutorial-focus-ring { position:fixed; left:0; top:0; pointer-events:none; border:3px solid #fff; box-shadow:0 0 0 3px rgba(88,204,2,.5),0 0 28px rgba(88,204,2,.45); will-change:transform,width,height,border-radius; animation:ringBreath 1.6s ease-in-out infinite; }
@keyframes ringBreath { 50% { box-shadow:0 0 0 5px rgba(88,204,2,.32),0 0 42px rgba(88,204,2,.32); } }
.tutorial-bubble { position:fixed; z-index:3; pointer-events:auto; padding:18px 18px 16px; color:var(--ink); border-radius:22px; background:linear-gradient(170deg,#fffdf6 0%,#f4edda 100%); box-shadow:0 6px 0 rgba(58,69,66,.22),0 26px 60px rgba(30,38,34,.38); transition:transform .32s cubic-bezier(.2,.8,.2,1); will-change:transform; overscroll-behavior:contain; }
.tutorial-bubble::before { content:""; position:absolute; z-index:2; display:none; width:16px; height:16px; background:#fffdf6; transform:rotate(45deg); }
.tutorial-bubble[data-tail="top"]::before { display:block; top:-8px; left:clamp(16px,var(--tail-x,50%),calc(100% - 16px)); margin-left:-8px; }
.tutorial-bubble[data-tail="bottom"]::before { display:block; bottom:-8px; left:clamp(16px,var(--tail-x,50%),calc(100% - 16px)); margin-left:-8px; background:#f4edda; }
.tutorial-bubble[data-tail="left"]::before { display:block; left:-8px; top:clamp(16px,var(--tail-y,50%),calc(100% - 16px)); margin-top:-8px; background:#faf4e6; }
.tutorial-bubble[data-tail="right"]::before { display:block; right:-8px; top:clamp(16px,var(--tail-y,50%),calc(100% - 16px)); margin-top:-8px; background:#f7efdd; }
.tutorial-bubble header { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.tutorial-progress { padding:4px 9px; color:var(--blue-dark); background:#ddf4ff; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.04em; }
.tutorial-bubble header button { min-height:40px; padding:6px 2px 6px 10px; color:var(--ink-faint); font-size:11px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.tutorial-bubble h2 { padding-right:8px; font-size:19px; font-weight:900; line-height:1.25; }
.tutorial-bubble h2, .settings-hero h1, .setting-copy h2 { text-wrap:balance; }
.tutorial-progress, .timer-wrap strong, .round-badge b { font-variant-numeric:tabular-nums; }
.tutorial-bubble p { margin-top:7px; color:var(--ink-soft); font-size:13px; font-weight:700; line-height:1.62; }
.tutorial-bubble > small { display:block; margin-top:8px; color:var(--blue-dark); font-size:11px; font-weight:900; }
.tutorial-bubble footer { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:13px; }
.tutorial-dots { display:flex; align-items:center; gap:5px; }
.tutorial-dots i { width:7px; height:7px; border-radius:50%; background:#dcebee; transition:transform .2s, background .2s; }
.tutorial-dots i.done { background:#bfe3f5; }
.tutorial-dots i.now { background:var(--green); transform:scale(1.4); }
.tutorial-actions { display:flex; gap:9px; }
.tutorial-bubble footer button { min-height:38px; padding:8px 14px; border-radius:12px; font-size:13px; font-weight:900; }
.tutorial-back { color:var(--ink-soft); background:var(--paper-card); border:2px solid var(--line); box-shadow:var(--lift-1); }
.tutorial-next { color:#fff; background:var(--green); box-shadow:0 3px 0 var(--green-dark); }
.tutorial-bubble footer button:active { transform:translateY(3px); box-shadow:none; }
.tutorial-layer.is-waiting .tutorial-focus-ring { opacity:0; }

/* Advisor “小径”: articulated paper-cartographer puppet */
.advisor-puppet { --head:0deg; --arm-l:0deg; --arm-r:0deg; --leg-l:0deg; --leg-r:0deg; position:fixed; left:0; top:0; z-index:4; width:74px; height:116px; pointer-events:none; transform-origin:50% 100%; will-change:transform; }
.advisor-puppet[data-facing="left"] .advisor-body { transform:scaleX(-1); }
.advisor-body { position:absolute; inset:0; transform-origin:50% 100%; }
.advisor-shadow { position:absolute; left:14px; bottom:0; width:48px; height:10px; border-radius:50%; background:rgba(10,35,50,.26); filter:blur(2px); }
.advisor-map { position:absolute; left:5px; top:44px; z-index:1; width:13px; height:36px; transform:rotate(-14deg); border:3px solid #173d50; border-radius:7px; background:linear-gradient(180deg,#ffe9b8,#f2c96d); }
.advisor-map::before { content:""; position:absolute; left:0; top:-7px; width:9px; height:6px; border:3px solid #173d50; border-radius:5px 5px 2px 2px; background:#ffd93d; }
.advisor-torso { position:absolute; left:23px; top:63px; z-index:2; width:32px; height:31px; border:3px solid #173d50; border-radius:12px 12px 15px 15px; background:linear-gradient(135deg,#2ec0fc,#1289c9); box-shadow:inset -4px -3px 0 rgba(0,0,0,.1); }
.advisor-compass { position:absolute; left:6px; top:6px; display:grid; place-items:center; width:14px; height:14px; color:#8a5a00; background:linear-gradient(160deg,#ffe06e,var(--yellow)); border:2px solid #fff; border-radius:50%; font-size:8px; font-style:normal; box-shadow:0 2px 0 rgba(23,61,80,.35); }
.advisor-head { position:absolute; left:10px; top:7px; z-index:4; width:58px; height:52px; transform:rotate(var(--head)); transform-origin:50% 84%; border:3px solid #173d50; border-radius:48% 48% 46% 46%; background:linear-gradient(160deg,#ffe6cb,#ffcda1); }
.advisor-hat { position:absolute; left:-11px; top:-1px; z-index:5; width:74px; height:15px; border:3px solid #173d50; border-radius:50%; background:linear-gradient(180deg,#f3c75f,#e2a83f); }
.advisor-hat::before { content:""; position:absolute; left:13px; top:-25px; width:42px; height:27px; border:3px solid #173d50; border-radius:48% 48% 42% 42%; background:linear-gradient(160deg,#f9d67a,#e8ae47); box-shadow:inset -4px -3px 0 rgba(120,72,10,.16); }
.advisor-hat::after { content:""; position:absolute; left:15px; top:-9px; width:38px; height:7px; border:2px solid #173d50; border-radius:4px; background:var(--green); }
.advisor-eye { position:absolute; top:21px; z-index:3; width:13px; height:16px; display:grid; place-items:center; border:2px solid #173d50; border-radius:50%; background:#fff; }
.advisor-eye.left { left:8px; }.advisor-eye.right { right:8px; }
.advisor-eye b { position:relative; width:5px; height:8px; border-radius:50%; background:#173d50; transform:translate(var(--eye-x,0px),var(--eye-y,0px)); transition:transform .18s ease-out; }
.advisor-eye b::after { content:""; position:absolute; left:0; top:1px; width:2px; height:2px; border-radius:50%; background:#fff; }
.advisor-cheek { position:absolute; top:34px; z-index:2; width:9px; height:6px; border-radius:50%; background:#ff9d9d; opacity:.7; }
.advisor-cheek.left { left:5px; }.advisor-cheek.right { right:5px; }
.advisor-smile { position:absolute; left:23px; top:39px; z-index:3; width:11px; height:6px; border-bottom:3px solid #9c4f42; border-radius:50%; }
.advisor-arm { position:absolute; top:66px; z-index:3; width:12px; height:33px; transform-origin:50% 6px; border:3px solid #173d50; border-radius:999px; background:linear-gradient(180deg,#2ec0fc,#1593d2); }
.advisor-arm::before { content:""; position:absolute; left:-3px; top:-3px; width:12px; height:15px; border-radius:999px 999px 4px 4px; background:#0f7fb9; }
.advisor-arm i { position:absolute; left:-3px; bottom:-6px; width:12px; height:12px; border:3px solid #173d50; border-radius:50%; background:#ffe0c2; }
.advisor-arm.left { left:12px; transform:rotate(var(--arm-l)); }.advisor-arm.right { right:11px; transform:rotate(var(--arm-r)); }
.advisor-leg { position:absolute; top:88px; z-index:1; width:13px; height:25px; transform-origin:50% 4px; border:3px solid #173d50; border-radius:4px 4px 8px 8px; background:#2b5064; }
.advisor-leg::after { content:""; position:absolute; left:-5px; bottom:-6px; width:18px; height:9px; border:3px solid #173d50; border-radius:7px 10px 4px 4px; background:linear-gradient(180deg,#ffa726,var(--orange)); }
.advisor-leg.left { left:23px; transform:rotate(var(--leg-l)); }.advisor-leg.right { left:41px; transform:rotate(var(--leg-r)); }
.advisor-puppet[data-pose="cheer"] .advisor-shadow { animation:advisor-shadow-hop .55s ease-in-out infinite alternate; }
@keyframes advisor-shadow-hop { to { transform:scaleX(.72); opacity:.6; } }

@media (min-width:900px) {
  .settings-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
  .settings-layout .topbar { grid-column:1/-1; }
  .settings-layout .settings-hero { grid-column:1/-1; padding:16px 22px; }
  .settings-layout .settings-hero > span { font-size:28px; }
  .settings-layout .settings-card { min-height:0; justify-content:center; }
  .tutorial-bubble { padding:19px 20px 17px; }
  .tutorial-bubble h2 { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .tutorial-focus-ring { box-shadow:0 0 0 2px rgba(28,176,246,.55); }
}

:root { --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); }
.phone { padding-top:calc(14px + env(safe-area-inset-top)); }
.tutorial-bubble { max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; }

.advisor-eye { transform-origin:center; animation:advisor-blink 4.4s ease-in-out infinite; }
.advisor-puppet[data-moving="true"] .advisor-shadow { animation:advisor-walk-shadow .24s ease-in-out infinite alternate; }
.advisor-puppet[data-pose="think"] .advisor-compass { animation:advisor-compass-think 1.8s ease-in-out infinite; }
@keyframes advisor-blink { 0%,44%,48%,100% { transform:scaleY(1); } 46% { transform:scaleY(.08); } }
@keyframes advisor-walk-shadow { to { transform:scaleX(.82); opacity:.72; } }
@keyframes advisor-compass-think { 50% { transform:rotate(35deg) scale(1.12); } }

/* tutorial viewport-fit correction */
.round-sheet { max-height:calc(100dvh - 12px - env(safe-area-inset-top)); overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:24px; }
[data-tutorial="round-next"] { flex:0 0 auto; scroll-margin-block:28px; }
@media (min-width:900px) {
  .round-overlay { align-items:center; padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left)); }
  .round-sheet { max-height:calc(100dvh - 48px); }
}


/* ---------- ink-wash brush decorations (deterministic, non-interactive) ---------- */
/* single tapered brush stroke under section titles — sits below the text, never through it */
.section-heading h2, .simple-header h1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cpath d='M3 9 C 40 3, 90 12, 130 7 S 210 4, 237 8 C 200 12, 120 13, 60 11 C 30 10, 8 12, 3 9 Z' fill='%233a4542' fill-opacity='.34'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: min(170px, 85%) 8px;
  padding-bottom: 9px;
}
/* one faint dry-brush line along the topbar base, reinforcing the header edge */
.topbar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10'%3E%3Cpath d='M2 6 C 80 2, 180 8, 300 5 C 350 4, 380 6, 398 5 L 398 7 C 300 9, 100 9, 2 8 Z' fill='%233a4542' fill-opacity='.16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 7px;
  padding-bottom: 8px;
}


/* ---------- livelier ink-splash layer (deterministic, CSS-only) ---------- */
/* vermillion seal next to the brand — the classic ink-painting color pop */
.brand::after {
  content: "战";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 3px;
  background: #d94f3d;
  color: #fdf6e8;
  font-size: 14px;
  font-weight: 900;
  border-radius: 6px;
  transform: rotate(-6deg);
  box-shadow: 1px 2px 0 rgba(58, 69, 66, .3);
}
/* stronger two-stroke brush underline for section titles */
.section-heading h2, .simple-header h1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cpath d='M3 9 C 40 3, 90 12, 130 7 S 210 4, 237 8 C 200 12, 120 13, 60 11 C 30 10, 8 12, 3 9 Z' fill='%232c3532' fill-opacity='.48'/%3E%3Cpath d='M14 13 C 70 11, 150 15, 226 12 L 226 14 C 150 16, 70 15, 14 15 Z' fill='%232c3532' fill-opacity='.28'/%3E%3C/svg%3E");
  background-size: min(180px, 88%) 10px;
  padding-bottom: 11px;
}
/* ink splash with droplets, tucked into the duel intro's empty corner (paper area) */
.duel-intro {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg opacity='.16' fill='%232c3532'%3E%3Cpath d='M52 10 C 84 0 120 8 142 30 C 168 54 172 88 158 116 C 146 142 118 160 88 158 C 56 156 28 136 18 104 C 8 72 22 24 52 10 Z'/%3E%3Cpath d='M150 128 C 166 138 180 150 188 166 C 172 158 158 148 146 136 Z'/%3E%3Ccircle cx='14' cy='34' r='6'/%3E%3Ccircle cx='186' cy='98' r='5'/%3E%3Ccircle cx='168' cy='12' r='4'/%3E%3Ccircle cx='30' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -58px top -48px / 170px auto;
}
/* hero card: keep the dark arc, add a white splash bleeding from the bottom-left corner */
.hero-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg opacity='.2' fill='%23ffffff'%3E%3Cpath d='M52 10 C 84 0 120 8 142 30 C 168 54 172 88 158 116 C 146 142 118 160 88 158 C 56 156 28 136 18 104 C 8 72 22 24 52 10 Z'/%3E%3Cpath d='M150 128 C 166 138 180 150 188 166 C 172 158 158 148 146 136 Z'/%3E%3Ccircle cx='14' cy='34' r='6'/%3E%3Ccircle cx='186' cy='98' r='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -72px bottom -60px / 190px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120'%3E%3Cpath d='M214 8 C 150 28, 88 62, 28 108 C 84 68, 152 36, 217 14 Z M198 36 C 188 40, 178 46, 170 52 C 180 46, 190 41, 198 36 Z' fill='%231c3a0e' fill-opacity='.2'/%3E%3C/svg%3E") no-repeat right -24px top -18px / 240px auto,
    linear-gradient(160deg, #5ed402 0%, #35a500 100%);
}
/* full-color pages get corner ink splashes in translucent white */
.blue-page {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg opacity='.15' fill='%23ffffff'%3E%3Cpath d='M52 10 C 84 0 120 8 142 30 C 168 54 172 88 158 116 C 146 142 118 160 88 158 C 56 156 28 136 18 104 C 8 72 22 24 52 10 Z'/%3E%3Cpath d='M150 128 C 166 138 180 150 188 166 C 172 158 158 148 146 136 Z'/%3E%3Ccircle cx='14' cy='34' r='6'/%3E%3Ccircle cx='186' cy='98' r='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -84px bottom -70px / 260px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg opacity='.1' fill='%23ffffff'%3E%3Cpath d='M52 10 C 84 0 120 8 142 30 C 168 54 172 88 158 116 C 146 142 118 160 88 158 C 56 156 28 136 18 104 C 8 72 22 24 52 10 Z'/%3E%3Ccircle cx='186' cy='98' r='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -70px top -52px / 210px auto,
    linear-gradient(170deg, var(--blue) 0%, #0f8fd6 100%);
}
.green-page {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg opacity='.15' fill='%23ffffff'%3E%3Cpath d='M52 10 C 84 0 120 8 142 30 C 168 54 172 88 158 116 C 146 142 118 160 88 158 C 56 156 28 136 18 104 C 8 72 22 24 52 10 Z'/%3E%3Cpath d='M150 128 C 166 138 180 150 188 166 C 172 158 158 148 146 136 Z'/%3E%3Ccircle cx='14' cy='34' r='6'/%3E%3Ccircle cx='186' cy='98' r='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -84px bottom -70px / 260px auto,
    linear-gradient(170deg, #5ed402 0%, #35a500 100%);
}
/* desktop duel intro is a blue card — keep the gradient, splash in white */
@media (min-width: 900px) {
  .duel-layout .duel-intro {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg opacity='.16' fill='%23ffffff'%3E%3Cpath d='M52 10 C 84 0 120 8 142 30 C 168 54 172 88 158 116 C 146 142 118 160 88 158 C 56 156 28 136 18 104 C 8 72 22 24 52 10 Z'/%3E%3Cpath d='M150 128 C 166 138 180 150 188 166 C 172 158 158 148 146 136 Z'/%3E%3Ccircle cx='14' cy='34' r='6'/%3E%3Ccircle cx='186' cy='98' r='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -70px bottom -56px / 240px auto,
      linear-gradient(150deg, var(--blue), #5b7cff);
  }
}


/* ---------- interactive globe (desktop hero) ---------- */
.hero-globe { position: relative; display: grid; place-items: center; }
@media (min-width: 1100px) {
  .home-layout .hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    column-gap: 10px;
  }
  .home-layout .hero-globe {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 170px;
    height: 170px;
    z-index: 2;
  }
  .home-layout .hero-card h1,
  .home-layout .hero-card p,
  .home-layout .hero-cta { grid-column: 1; max-width: none; }
  .home-layout .hero-card h1 { font-size: clamp(28px, 2.4vw, 40px); }
  .home-layout .hero-cta { min-width: 0; width: 100%; position: relative; z-index: 2; }
  .home-layout .hero-globe.globe-on .hero-mascot { display: none; }
  .home-layout .hero-card::after { content: none; }
}


/* ---------- avatar frame polish ---------- */
/* shared: inner top-light so every portrait reads as a raised badge */
.avatar, .mini-avatar, .passport-avatar, .battle-avatar, .radar-avatar {
  position: relative;
  overflow: hidden;
}
.avatar::before, .mini-avatar::before, .passport-avatar::before, .battle-avatar::before, .radar-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* podium portraits: medal-colored double ring */
.avatar { box-shadow: 0 3px 0 rgba(58, 69, 66, .16), 0 0 0 3px #fff, 0 0 0 6px rgba(58, 69, 66, .1); }
.avatar-1 { background: radial-gradient(circle at 34% 28%, #ffe27a, var(--yellow) 62%, #e0a800); box-shadow: 0 3px 0 rgba(58, 69, 66, .16), 0 0 0 3px #fff, 0 0 0 6px rgba(255, 200, 0, .6); }
.avatar-2 { background: radial-gradient(circle at 34% 28%, #5ec9ff, var(--blue) 62%, #1289c9); box-shadow: 0 3px 0 rgba(58, 69, 66, .16), 0 0 0 3px #fff, 0 0 0 6px rgba(28, 176, 246, .45); }
.avatar-3 { background: radial-gradient(circle at 34% 28%, #dfa5ff, var(--purple) 62%, #a568cc); box-shadow: 0 3px 0 rgba(58, 69, 66, .16), 0 0 0 3px #fff, 0 0 0 6px rgba(206, 130, 255, .5); }
/* champion: slow shine sweep */
.avatar-1::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: avatarShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes avatarShine { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

/* small portraits: white ring + soft ink lift */
.mini-avatar { box-shadow: 0 2px 0 rgba(58, 69, 66, .16), 0 0 0 2px #fff; }
.mini-avatar.me { background: radial-gradient(circle at 34% 28%, #7fe019, var(--green) 65%, #46a302); box-shadow: 0 2px 0 rgba(58, 69, 66, .16), 0 0 0 2px #fff, 0 0 0 4px rgba(88, 204, 2, .3); }
.mini-avatar.foe { background: radial-gradient(circle at 34% 28%, #ff7a7a, var(--red) 65%, #d92b2b); box-shadow: 0 2px 0 rgba(58, 69, 66, .16), 0 0 0 2px #fff, 0 0 0 4px rgba(255, 75, 75, .3); }

/* duel passport portrait */
.passport-avatar {
  background: radial-gradient(circle at 34% 28%, #7fe019, var(--green) 65%, #46a302);
  box-shadow: 0 3px 0 var(--green-dark), 0 0 0 3px rgba(88, 204, 2, .25);
}

/* versus portraits: side-colored halo */
.battle-avatar { box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 0 0 4px rgba(255, 255, 255, .28); }
.battle-avatar.warm { background: radial-gradient(circle at 34% 28%, #7fe019, var(--green) 65%, #46a302); }
.battle-avatar.cool { background: radial-gradient(circle at 34% 28%, #ff7a7a, var(--red) 65%, #d92b2b); }

/* matching radar portrait keeps its ping, gains paper tint */
.radar-avatar { background: radial-gradient(circle at 34% 30%, #ffffff, var(--paper-card) 70%); }


/* ---------- display font: Fredoka (OFL, self-hosted, latin/digits) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root { --font-display: "Fredoka", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; }
.brand b, .countdown, .round-badge b, .timer-wrap strong, .vs-seal,
.section-heading h2, .simple-header h1, .hero-card h1, .duel-intro h1,
.question-card h1, .final-screen h1, .score-comparison b, .final-stats strong {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- settlement feedback ---------- */
.answer-btn.correct { animation: correctPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes correctPop { 30% { transform: scale(1.045); } }
.answer-btn.wrong { animation: wrongShake .4s ease; }
@keyframes wrongShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.fighter.hit { animation: hpShake .45s ease; }
@keyframes hpShake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.fighter.hit .health i { animation: hpFlash .6s ease-out; }
@keyframes hpFlash { 0% { filter: brightness(1.9) saturate(1.5); } }
.score-fly {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, 0);
  padding: 4px 12px;
  border-radius: 999px;
  background: #fffdf6;
  border: 2px solid currentColor;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(58, 69, 66, .2);
}

/* ---------- final screen: vermillion seal stamp ---------- */
.final-screen .final-emblem {
  position: relative;
  width: 88px;
  height: 88px;
  border: none;
  border-radius: 20px;
  background: #d94f3d;
  color: #fdf6e8;
  font-size: 42px;
  box-shadow: 0 6px 0 rgba(120, 40, 30, .55), 0 14px 30px rgba(0, 0, 0, .25);
  animation: sealStamp .55s cubic-bezier(.2, 1.5, .35, 1) both;
}
.final-screen.defeat .final-emblem {
  background: #3a4542;
  color: #f4edde;
  box-shadow: 0 6px 0 rgba(18, 26, 24, .6), 0 14px 30px rgba(0, 0, 0, .25);
}
.final-screen .final-emblem::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid rgba(255, 255, 255, .55);
  border-radius: 26px;
  animation: sealRing .65s .3s ease-out both;
  pointer-events: none;
}
@keyframes sealStamp {
  0% { transform: scale(2.8) rotate(-32deg); opacity: 0; }
  55% { transform: scale(.9) rotate(-5deg); opacity: 1; }
  75% { transform: scale(1.06) rotate(-9deg); }
  100% { transform: scale(1) rotate(-8deg); }
}
@keyframes sealRing { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }

/* ---------- page / round transitions ---------- */
.matching, .ready-screen, .final-screen { animation: pageIn .3s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
.question-card.fresh { animation: cardIn .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ---------- battle: keep the question card vertically centered ---------- */
.battle-page .question-card { margin-block: auto; }