/* =========================================================
   动宠联盟 · 像素运动 UI 系统
   - 统一组件:panel / pixel-btn / pixel-bar / pixel-tag
   - 主城分层:HUD / Stage / Action-bar
   - 兼容现有 JS 选择器
   ========================================================= */

/* ---------- 1. 主题 tokens ---------- */
:root {
  --ink: oklch(24% 0.035 93);
  --muted: oklch(43% 0.045 93);
  --paper: oklch(95% 0.035 91);
  --paper-2: oklch(98% 0.018 90);
  --card-bg: color-mix(in oklch, var(--paper) 90%, var(--gold) 10%);
  --card-warm: color-mix(in oklch, var(--paper) 86%, var(--gold) 16%);
  --input-bg: oklch(97% 0.025 88);
  --bg-top: oklch(91% 0.07 213);
  --bg-mid: oklch(93% 0.05 102);
  --bg-bottom: oklch(88% 0.055 83);
  --pace-line: color-mix(in oklch, var(--leaf) 22%, transparent);
  --leaf: oklch(55% 0.14 134);
  --moss: oklch(38% 0.09 130);
  --sky: oklch(84% 0.08 216);
  --water: oklch(62% 0.12 218);
  --berry: oklch(58% 0.18 25);
  --gold: oklch(76% 0.16 82);
  --violet: oklch(49% 0.13 303);
  --line: oklch(33% 0.055 93);

  /* 像素阴影:小/中/大 */
  --px-shadow-1: 3px 3px 0 var(--line);
  --px-shadow-2: 5px 5px 0 var(--line);
  --px-shadow-3: 8px 8px 0 var(--line);
  --shadow: var(--px-shadow-2);

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

body[data-theme="track"] {
  --ink: oklch(23% 0.04 35); --muted: oklch(42% 0.055 42);
  --paper: oklch(96% 0.032 68); --paper-2: oklch(98% 0.018 60);
  --card-bg: color-mix(in oklch, var(--paper) 87%, oklch(91% 0.055 42));
  --card-warm: color-mix(in oklch, var(--paper) 82%, oklch(89% 0.07 28));
  --input-bg: oklch(98% 0.02 72);
  --bg-top: oklch(90% 0.07 214); --bg-mid: oklch(92% 0.055 65); --bg-bottom: oklch(79% 0.095 38);
  --pace-line: color-mix(in oklch, var(--berry) 26%, transparent);
  --leaf: oklch(58% 0.13 118); --moss: oklch(34% 0.075 62);
  --sky: oklch(82% 0.085 212); --water: oklch(61% 0.12 205);
  --berry: oklch(55% 0.17 28); --gold: oklch(78% 0.17 78); --violet: oklch(52% 0.12 318);
  --line: oklch(30% 0.052 42);
}
body[data-theme="court"] {
  --ink: oklch(22% 0.04 182); --muted: oklch(41% 0.052 180);
  --paper: oklch(95% 0.032 172); --paper-2: oklch(98% 0.018 170);
  --card-bg: color-mix(in oklch, var(--paper) 86%, oklch(88% 0.065 176));
  --card-warm: color-mix(in oklch, var(--paper) 84%, oklch(88% 0.075 145));
  --input-bg: oklch(98% 0.018 175);
  --bg-top: oklch(87% 0.085 196); --bg-mid: oklch(90% 0.065 160); --bg-bottom: oklch(82% 0.09 137);
  --pace-line: color-mix(in oklch, var(--water) 28%, transparent);
  --leaf: oklch(58% 0.15 150); --moss: oklch(34% 0.085 160);
  --sky: oklch(82% 0.095 198); --water: oklch(60% 0.13 198);
  --berry: oklch(57% 0.16 12); --gold: oklch(82% 0.16 95); --violet: oklch(50% 0.13 286);
  --line: oklch(29% 0.055 176);
}
body[data-theme="dawn"] {
  --ink: oklch(23% 0.038 72); --muted: oklch(43% 0.052 72);
  --paper: oklch(96% 0.034 82); --paper-2: oklch(98% 0.02 78);
  --card-bg: color-mix(in oklch, var(--paper) 86%, oklch(91% 0.068 56));
  --card-warm: color-mix(in oklch, var(--paper) 80%, oklch(90% 0.082 52));
  --input-bg: oklch(98% 0.02 84);
  --bg-top: oklch(89% 0.08 42); --bg-mid: oklch(92% 0.062 76); --bg-bottom: oklch(84% 0.08 128);
  --pace-line: color-mix(in oklch, var(--gold) 28%, transparent);
  --leaf: oklch(57% 0.14 132); --moss: oklch(36% 0.082 105);
  --sky: oklch(84% 0.083 46); --water: oklch(63% 0.115 196);
  --berry: oklch(57% 0.17 22); --gold: oklch(80% 0.17 76); --violet: oklch(52% 0.12 305);
  --line: oklch(31% 0.052 72);
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  min-height: 100vh; margin: 0; color: var(--ink);
  font-family: "DotGothic16", "Microsoft YaHei", sans-serif;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--paper) 92%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--paper) 90%, transparent) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 58px, var(--pace-line) 58px 60px, transparent 60px 118px),
    linear-gradient(180deg, var(--bg-top), var(--bg-mid) 44%, var(--bg-bottom));
  background-size: 24px 24px, 24px 24px, auto, auto;
  transition: background 260ms ease, color 260ms ease;
}
button { font: inherit; }
input, select {
  width: 100%; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--input-bg); color: var(--ink); font: inherit;
  padding: 10px 12px; box-shadow: var(--px-shadow-1);
}
label { display: grid; gap: var(--space-xs); color: var(--moss); font-weight: 700; }

/* ---------- 3. 字体层级 ---------- */
h1, h2 {
  margin: 0; font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  letter-spacing: 0; line-height: 0.98; text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  text-shadow: 4px 4px 0 var(--gold), 7px 7px 0 var(--line);
}
h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
h3 {
  margin: 0; font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1; text-wrap: balance;
}
.eyebrow {
  margin: 0; color: var(--moss); font-weight: 700; letter-spacing: 0.04em;
  font-size: 0.88rem; text-transform: none;
}

/* ---------- 4. 通用组件:panel / pixel-btn / pixel-bar / pixel-tag ---------- */
.panel,
.pet-panel, .home-panel, .system-block,
.pk-selector, .battle-stage,
.inventory-card, .friend-card, .dex-card,
.workout-panel {
  border: 3px solid var(--line); border-radius: var(--radius);
  background: var(--card-bg); box-shadow: var(--shadow);
}
.pet-panel, .home-panel, .system-block,
.pk-selector, .battle-stage, .workout-panel {
  padding: var(--space-lg);
}

/* 按钮基类 */
.pixel-btn,
.primary-action, .secondary-action, .complete-button, .verify,
.view-back, .battle-mode, .pk-rival-card,
.dex-filter button, .time-option, .skill-command,
.dock-button, .quest-item {
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); cursor: pointer;
  box-shadow: var(--px-shadow-1);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.pixel-btn:hover, .primary-action:hover, .secondary-action:hover, .complete-button:hover,
.verify:hover, .view-back:hover, .battle-mode:hover, .pk-rival-card:hover,
.dex-filter button:hover, .time-option:hover, .skill-command:hover:not(:disabled),
.dock-button:hover, .quest-item:hover, .close-dialog:hover, .cover-start:hover {
  transform: translate(-2px, -2px); box-shadow: var(--px-shadow-2);
}
.pixel-btn:active, .primary-action:active, .secondary-action:active, .complete-button:active,
.dock-button:active, .cover-start:active, .skill-command:active:not(:disabled) {
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line);
}
.primary-action, .complete-button {
  background: var(--berry); color: oklch(98% 0.02 90);
  padding: 12px 18px; font-weight: 700;
}
.secondary-action, .verify { background: var(--paper); padding: 10px 14px; font-weight: 700; }
.view-back { padding: 10px 14px; font-weight: 700; }
.workout-card.active, .verify.active, .time-option.active,
.battle-mode.active, .pk-rival-card.active, .dex-filter .active {
  background: color-mix(in oklch, var(--gold) 78%, var(--paper));
}
button:disabled { cursor: not-allowed; opacity: 0.55; transform: none !important; box-shadow: var(--px-shadow-1) !important; }

/* 像素分段进度条:用 background 模拟方格 */
.pixel-bar {
  position: relative; display: block; width: 100%; height: 14px;
  border: 2px solid var(--line); border-radius: 4px;
  background: color-mix(in oklch, var(--paper) 70%, var(--line));
  overflow: hidden;
}
.pixel-bar i {
  display: block; height: 100%; width: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,0.18) 7px 8px),
    var(--bar-color, var(--berry));
  transition: width 260ms cubic-bezier(.2,0,.2,1);
}

/* 标签 */
.pixel-tag, .quality, .chip, .quality-badge,
.egg-odds span, .card-stack span, .card-stack strong,
.friend-meta span {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 4px 8px; background: var(--gold); font-weight: 700; line-height: 1;
}
.quality.normal { background: oklch(83% 0.045 102); }
.quality-badge[data-quality="灵宠"] { background: var(--violet); color: oklch(98% 0.02 90); }
.quality-badge[data-quality="卓越"] { background: var(--water); }

/* 防溢出 */
.workout-card strong, .quest-item strong, .friend-copy strong,
.pk-rival-card strong, .dex-name, .skill-command strong,
.cover-start, .primary-action, .complete-button, .secondary-action {
  overflow-wrap: anywhere; word-break: break-word;
}

/* ---------- 5. 主题切换球 ---------- */
.theme-orb {
  position: fixed; top: 14px; right: 14px; z-index: 80;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 2px solid var(--line); border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, color-mix(in oklch, white 38%, var(--gold)) 0 18%, transparent 19%),
    conic-gradient(from 20deg, var(--berry), var(--gold), var(--leaf), var(--water), var(--berry));
  box-shadow: var(--px-shadow-1), 0 0 0 4px color-mix(in oklch, var(--paper) 76%, transparent);
  cursor: pointer; transition: transform 180ms ease;
}
.theme-orb:hover, .theme-orb:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--px-shadow-2), 0 0 0 5px color-mix(in oklch, var(--gold) 28%, var(--paper));
  outline: 0;
}
.theme-orb-core {
  width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%;
  background: var(--paper); box-shadow: inset 2px 2px 0 color-mix(in oklch, white 45%, transparent);
}
.theme-orb-name {
  position: absolute; top: 38px; right: 0; min-width: 58px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card-bg); box-shadow: var(--px-shadow-1);
  font-size: 0.82rem; line-height: 1; padding: 5px 7px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease; text-align: center;
}
.theme-orb:hover .theme-orb-name, .theme-orb:focus-visible .theme-orb-name {
  opacity: 1; transform: translateY(0);
}

/* ---------- 6. App shell + view switching ---------- */
.app-shell {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto; padding: var(--space-lg) 0 var(--space-3xl);
}
.app-shell.is-locked {
  display: none;
}
.app-view:not(.is-active) { display: none !important; }
.view-page { min-height: calc(100vh - 56px); padding: var(--space-md) 0 var(--space-xl); }
.view-heading {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);
}
.view-heading h2 { margin-top: 4px; }
.view-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.view-status {
  margin: 0 0 var(--space-md); padding: 10px 12px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card-warm); box-shadow: var(--px-shadow-1);
  color: var(--moss); line-height: 1.6;
}

/* ---------- 7. Onboarding ---------- */
.onboarding-screen {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: var(--space-md);
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--line) 22%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--line) 16%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  background-size: 18px 18px, 18px 18px, auto;
}
.onboarding-screen.is-hidden,
.trainer-gate.is-hidden,
.onboarding-card.is-hidden {
  display: none;
}

.trainer-gate {
  width: min(720px, 100%);
  display: grid;
  gap: var(--space-lg);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-warm);
  box-shadow: var(--px-shadow-3);
  padding: var(--space-xl);
}

.trainer-gate .onboarding-copy h1 {
  text-align: center;
}

.gate-start {
  justify-self: center;
  width: min(360px, 100%);
  font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.onboarding-card {
  width: min(960px, 100%); max-height: min(760px, calc(100vh - 32px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-xl); overflow: auto;
  border: 3px solid var(--line); border-radius: var(--radius);
  background: var(--card-warm); box-shadow: var(--px-shadow-3);
  padding: var(--space-xl);
}
.onboarding-copy { display: grid; align-content: start; gap: var(--space-md); min-width: 0; }
.onboarding-copy h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  text-shadow: 3px 3px 0 var(--gold), 6px 6px 0 var(--line);
  text-align: left;
}
.onboarding-copy p { margin: 0; color: var(--muted); line-height: 1.75; }
.starter-preview, .onboarding-video-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--line); overflow: hidden;
}
.onboarding-video, .cover-video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.onboarding-form { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
@media (max-width: 760px) {
  .onboarding-card { grid-template-columns: 1fr; padding: var(--space-md); }
}

/* ---------- 8. 主城封面 cover-shell ---------- */
.hero { min-height: auto; }
.cover-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 3px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sky) 60%, transparent), transparent 38%),
    color-mix(in oklch, var(--card-bg) 90%, var(--leaf));
  box-shadow: var(--shadow); overflow: hidden;
}

/* HUD = 顶部任务栏 */
.game-hud {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center; gap: var(--space-sm); flex-wrap: wrap;
}
.player-badge {
  display: grid; grid-template-columns: 44px minmax(0, auto);
  align-items: center; gap: var(--space-sm);
  padding: 6px var(--space-sm);
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card-warm); box-shadow: var(--px-shadow-1);
}
.player-badge small { display: block; color: var(--muted); margin-top: 2px; font-size: 0.82rem; }
.player-badge strong { font-size: 0.98rem; }
.portrait {
  width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 6px;
  background: oklch(92% 0.04 92); padding: 2px;
  display: block; object-fit: contain; image-rendering: pixelated;
}
.resource-bar {
  display: flex; gap: var(--space-xs); flex-wrap: wrap;
  padding: 6px var(--space-sm);
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card-warm); box-shadow: var(--px-shadow-1);
}
.resource-bar > span {
  min-width: 76px; padding: 4px 8px;
  border: 2px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: 5px; background: var(--input-bg);
  font-size: 0.88rem; text-align: center; line-height: 1.2;
}

/* 标题 + 副标题在视频左上角作为「门头牌」 */
.cover-title {
  position: relative; z-index: 3;
  width: 100%; margin: 0; text-align: center;
  display: grid; gap: 6px;
}
.cover-title h1 {
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
}
.hero-text {
  max-width: 56ch; margin: 0 auto;
  color: var(--muted); font-size: 1rem; line-height: 1.6;
}

/* 主舞台:视频画面 */
.cover-stage { position: relative; display: block; }
.pixel-scene, .cover-video-frame {
  position: relative; min-height: clamp(260px, 38vh, 460px);
  overflow: hidden;
  border: 3px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sky) 0 54%, oklch(86% 0.075 122) 54% 100%);
  box-shadow: var(--shadow); image-rendering: pixelated;
}
.cover-video-frame { background: var(--line); }
.cover-video-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--ink) 14%, transparent), transparent 40%),
    linear-gradient(0deg, color-mix(in oklch, var(--ink) 26%, transparent), transparent 38%);
}

/* 场景对话框:压在画面上 */
.cover-toast {
  position: relative; z-index: 4;
  margin: 0 auto; padding: 10px 14px;
  width: min(720px, 100%);
  border: 3px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); box-shadow: var(--px-shadow-1);
  color: var(--ink); text-align: center; font-weight: 700;
  line-height: 1.45;
}
.cover-toast::before {
  content: "▸"; margin-right: 6px; color: var(--berry);
}

/* 主城行动栏:大 CTA + 4 dock 横排 */
.cover-menu {
  position: static; left: auto; right: auto; bottom: auto;
  width: 100%; transform: none;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: var(--space-md);
  align-items: stretch;
}
.cover-start {
  display: grid; place-items: center; gap: 4px;
  width: 100%; min-height: 96px;
  border: 3px solid var(--line); border-radius: var(--radius);
  padding: 14px 20px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--berry) 80%, white) 0 36%, var(--berry)),
    var(--berry);
  color: oklch(98% 0.02 90);
  box-shadow: var(--px-shadow-2);
  cursor: pointer; text-align: center;
  font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1; transition: transform 140ms ease, box-shadow 140ms ease;
}
.cover-start::after {
  content: "GO";
  font-size: 0.78rem;
  letter-spacing: 0.18em; opacity: 0.72;
  font-family: "DotGothic16", sans-serif;
}

.icon-dock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}
.dock-button {
  --dock-accent: var(--gold);
  --dock-fill: oklch(95% 0.04 92);
  --dock-icon-bg: oklch(84% 0.08 216);
  display: grid; justify-items: center; gap: 4px;
  min-height: 96px; padding: 8px 6px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--dock-accent) 24%, var(--paper)) 0 38%, var(--paper) 38%),
    var(--paper);
  font-weight: 700; line-height: 1;
}
.dock-button[data-panel="warehouse"] { --dock-accent: var(--gold); --dock-fill: oklch(94% 0.05 86); --dock-icon-bg: oklch(83% 0.095 82); }
.dock-button[data-panel="friends"]   { --dock-accent: var(--leaf); --dock-fill: oklch(94% 0.045 128); --dock-icon-bg: oklch(82% 0.09 146); }
.dock-button[data-panel="battle"]    { --dock-accent: var(--berry); --dock-fill: oklch(94% 0.045 32); --dock-icon-bg: oklch(78% 0.11 28); }
.dock-button[data-panel="dex"]       { --dock-accent: var(--water); --dock-fill: oklch(94% 0.04 214); --dock-icon-bg: oklch(82% 0.08 218); }
.dock-button:hover {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--dock-accent) 36%, var(--paper)) 0 38%, var(--paper) 38%),
    var(--paper);
}
.dock-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--dock-icon-bg);
  box-shadow: 3px 3px 0 var(--line), inset 0 0 0 2px color-mix(in oklch, white 24%, transparent);
}
.dock-icon svg { width: 32px; height: 32px; overflow: visible; }
.icon-shadow { fill: color-mix(in oklch, var(--line) 28%, transparent); transform: translate(2px, 2px); }
.icon-fill { fill: var(--dock-fill); }
.icon-accent { fill: var(--dock-accent); }
.icon-gem { fill: color-mix(in oklch, white 28%, var(--dock-accent)); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.icon-line { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dock-button strong { font-size: 0.96rem; }

/* 桌面增强 */
@media (min-width: 1100px) {
  .app-shell { width: min(1280px, calc(100% - 56px)); padding-top: var(--space-xl); }
  .cover-shell { padding: var(--space-xl); gap: var(--space-lg); }
  .cover-title h1 { font-size: clamp(3.4rem, 5.4vw, 4.6rem); }
  .pixel-scene, .cover-video-frame { min-height: clamp(360px, 46vh, 520px); }
  .cover-menu { grid-template-columns: minmax(280px, 1.1fr) minmax(0, 2.4fr); gap: var(--space-lg); }
  .cover-start { font-size: 2.2rem; min-height: 112px; }
  .dock-button { min-height: 112px; padding: 10px 8px; }
  .dock-icon { width: 52px; height: 52px; }
  .dock-icon svg { width: 38px; height: 38px; }
}

@media (max-width: 720px) {
  .game-hud { grid-template-columns: 1fr; }
  .player-badge, .resource-bar { width: 100%; }
  .cover-menu { grid-template-columns: 1fr; }
  .icon-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dock-button { min-height: 84px; padding: 6px 4px; }
  .dock-button strong { font-size: 0.82rem; }
  .dock-icon { width: 36px; height: 36px; }
  .dock-icon svg { width: 26px; height: 26px; }
  .cover-start { min-height: 80px; font-size: 1.6rem; }
}

/* ---------- 9. Dashboard ---------- */
.dashboard, .systems, .battle { margin-top: var(--space-2xl); }
.dashboard {
  display: grid; gap: var(--space-lg);
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
}
.panel-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap;
}
.mini-stage {
  position: relative; min-height: 180px; margin: var(--space-md) 0;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, oklch(87% 0.055 213), oklch(82% 0.08 130));
  overflow: hidden;
}
.pet-sheet-preview {
  position: absolute; left: 50%; top: 14px;
  width: min(60%, 220px); height: 130px; object-fit: contain;
  transform: translateX(-50%); image-rendering: pixelated;
  filter: drop-shadow(3px 5px 0 color-mix(in oklch, var(--line) 35%, transparent));
}
.evolution-track {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.evolution-track span {
  height: 10px; border: 2px solid var(--line); background: oklch(94% 0.025 92);
}
.evolution-track .active { background: var(--leaf); }
.stat-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat {
  display: grid; gap: 4px; padding: var(--space-sm);
  border: 2px solid color-mix(in oklch, var(--line) 76%, transparent);
  background: var(--input-bg); border-radius: var(--radius);
}
.stat strong { font-size: 1.3rem; line-height: 1; }
meter { width: 100%; height: 10px; }

.home-panel .quest-list { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.quest-item {
  display: grid; grid-template-columns: 38px 1fr; align-items: center;
  gap: 4px var(--space-sm); width: 100%; padding: var(--space-sm) 12px;
  background: var(--input-bg); text-align: left;
}
.quest-item span:first-child {
  grid-row: span 2; display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 2px solid var(--line); border-radius: 6px; background: var(--gold);
  font-weight: 700;
}
.quest-item small { color: var(--muted); }

@media (min-width: 1100px) {
  .dashboard { grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr); }
  .pet-panel { position: sticky; top: var(--space-lg); align-self: start; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .dashboard { grid-template-columns: 1fr; } }

/* ---------- 10. 运动弹窗 + 双 Tab ---------- */
.workout-dialog {
  width: min(720px, calc(100% - 24px)); max-height: min(820px, calc(100vh - 32px));
  padding: 0; border: 0; background: transparent; color: var(--ink);
}
.workout-dialog::backdrop {
  background:
    linear-gradient(45deg, color-mix(in oklch, var(--line) 32%, transparent) 25%, transparent 25% 50%,
      color-mix(in oklch, var(--line) 32%, transparent) 50% 75%, transparent 75%),
    color-mix(in oklch, var(--ink) 56%, transparent);
  background-size: 12px 12px;
}
.dialog-panel { max-height: min(820px, calc(100vh - 32px)); overflow: auto; padding: var(--space-lg); }

.close-dialog {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--paper); box-shadow: var(--px-shadow-1);
  cursor: pointer; font-size: 1.4rem; line-height: 1;
}

/* 训练项目 */
.workout-list {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-height: min(360px, 38vh);
  margin: var(--space-md) 0; padding: 2px 6px 6px 2px; overflow: auto;
}
.workout-card {
  display: grid; grid-template-columns: 38px 1fr; align-items: center;
  gap: var(--space-sm); width: 100%; min-height: 64px;
  background: var(--input-bg); padding: 8px 10px; text-align: left;
}
.workout-icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--sky); font-weight: 700; font-size: 1rem;
}
.workout-card strong { display: block; line-height: 1.2; font-size: 0.96rem; }
.workout-card small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.4; font-size: 0.82rem; }

/* 双 Tab */
.workout-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: var(--space-md) 0 0; padding: 0;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--input-bg); overflow: hidden;
}
.workout-tab {
  display: grid; gap: 2px; place-items: center;
  padding: 10px 12px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-weight: 700;
  text-align: center; line-height: 1.2;
}
.workout-tab + .workout-tab { border-left: 2px solid var(--line); }
.workout-tab small { font-size: 0.78rem; color: inherit; opacity: 0.78; }
.workout-tab.active {
  background: color-mix(in oklch, var(--gold) 80%, var(--paper));
  color: var(--ink);
}
.workout-tabpanel { display: none; margin-top: var(--space-md); }
.workout-tabpanel.is-active { display: block; }
.workout-tabpanel .console-label { color: var(--moss); margin: 0 0 var(--space-sm); font-weight: 700; }

/* 跟练倒计时 */
.training-console {
  display: grid; justify-items: center; gap: var(--space-md);
  padding: var(--space-md);
  border: 2px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in oklch, var(--gold) 22%, transparent) 0 38%, transparent 39%),
    color-mix(in oklch, var(--card-warm) 84%, var(--sky));
  box-shadow: var(--px-shadow-1);
}
.time-picker { display: grid; gap: var(--space-sm); width: 100%; }
.console-label, .verification-title {
  width: 100%; margin: 0; color: var(--moss); font-weight: 700;
}
.time-options {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}
.time-option {
  min-height: 38px; background: var(--input-bg);
  font-weight: 700;
}
.countdown-orbit {
  --timer-progress: 0deg;
  display: grid; place-items: center;
  width: min(220px, 64vw); aspect-ratio: 1;
  border: 3px solid var(--line); border-radius: 50%;
  background: conic-gradient(var(--berry) 0 var(--timer-progress),
    color-mix(in oklch, var(--paper) 70%, var(--sky)) var(--timer-progress) 360deg);
  box-shadow: var(--px-shadow-2); padding: 10px;
}
.countdown-core {
  display: grid; place-items: center; align-content: center; gap: 4px;
  width: 100%; height: 100%;
  border: 3px solid var(--line); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 72%, color-mix(in oklch, var(--leaf) 50%, var(--paper)) 0 30%, transparent 31%),
    var(--card-bg);
  padding: var(--space-sm); text-align: center;
}
.countdown-core img {
  width: min(46%, 96px); height: 78px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 5px 0 color-mix(in oklch, var(--line) 42%, transparent));
}
.countdown-core strong {
  font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 0.9;
}
.countdown-core span {
  max-width: 18ch; color: var(--moss); font-weight: 700; line-height: 1.3;
  font-size: 0.86rem;
}
.training-start { width: min(280px, 100%); text-align: center; }

/* 离线打卡 */
.verification {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-sm);
}
.verification-title.is-locked { color: color-mix(in oklch, var(--muted) 80%, var(--paper)); }
.recognition-box {
  display: grid; gap: var(--space-sm);
  margin: var(--space-md) 0 0; padding: var(--space-md);
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); box-shadow: var(--px-shadow-1);
}
.recognition-mode { display: grid; gap: var(--space-sm); }
.recognition-mode[hidden] { display: none; }
.recognition-mode p, .recognition-status { margin: 0; color: var(--muted); line-height: 1.55; }
.recognition-badge {
  width: fit-content; border: 2px solid var(--line); border-radius: 6px;
  background: var(--water); box-shadow: 3px 3px 0 var(--line);
  font-weight: 700; padding: 4px 8px;
}
.photo-upload {
  display: grid; gap: 4px; padding: var(--space-sm);
  border: 2px dashed color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--paper) 88%, var(--sky));
  cursor: pointer; font-weight: 700;
}
.photo-upload input { box-shadow: none; background: var(--paper); }
.photo-preview, .camera-frame {
  width: min(100%, 380px); aspect-ratio: 4/3;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--line); box-shadow: var(--px-shadow-1); overflow: hidden;
}
.camera-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-stop, .watch-sync { justify-self: start; width: auto; }
.recognition-status {
  padding: 8px 10px;
  border: 2px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: var(--radius); background: var(--paper);
}
.recognition-status[data-tone="loading"] { background: color-mix(in oklch, var(--sky) 42%, var(--paper)); }
.recognition-status[data-tone="success"] { background: color-mix(in oklch, var(--leaf) 32%, var(--paper)); color: var(--moss); }
.recognition-status[data-tone="error"]   { background: color-mix(in oklch, var(--berry) 18%, var(--paper)); color: color-mix(in oklch, var(--berry) 70%, var(--ink)); }

.complete-button { width: 100%; margin-top: var(--space-md); }
.event-log {
  min-height: 36px; margin: var(--space-sm) 0 0;
  padding: 8px 10px;
  border: 2px dashed color-mix(in oklch, var(--line) 56%, transparent);
  border-radius: var(--radius);
  color: var(--moss); line-height: 1.55; font-size: 0.92rem;
}

/* 桌面双列 */
@media (min-width: 1080px) {
  .workout-dialog { width: min(1040px, calc(100% - 48px)); max-height: min(820px, calc(100vh - 48px)); }
  .dialog-panel {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    column-gap: var(--space-lg); row-gap: var(--space-md);
  }
  .dialog-panel .panel-heading { grid-column: 1 / -1; }
  .workout-list {
    grid-column: 1; grid-row: 2 / span 4;
    max-height: min(580px, 60vh); margin: 0;
  }
  .workout-tabs, .workout-tabpanel, .complete-button, .event-log { grid-column: 2; }
}

/* ---------- 11. 系统循环说明 (3 卡) ---------- */
.systems { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.progress-row, .card-stack, .egg-odds {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm);
}
.progress { flex: 1 1 160px; height: 14px; border: 2px solid var(--line); background: oklch(96% 0.03 92); border-radius: 4px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--leaf); }
.card-stack strong { background: var(--water); }
.system-block p, .battle-copy p { color: var(--muted); line-height: 1.7; margin: 8px 0 0; }

@media (max-width: 900px) { .systems { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .systems { grid-template-columns: 1fr; } }

/* ---------- 12. 仓库 ---------- */
.warehouse-layout {
  display: grid; gap: var(--space-md);
  grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(180px, 1fr));
  align-items: stretch;
}
.inventory-card {
  display: grid; align-content: start; gap: var(--space-sm);
  min-height: 200px; padding: var(--space-md);
}
.inventory-card.featured {
  grid-row: span 2; align-content: space-between;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in oklch, var(--gold) 38%, transparent) 0 18%, transparent 19%),
    color-mix(in oklch, var(--card-warm) 82%, var(--leaf));
}
.inventory-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.92rem; }
.inventory-card h3 { font-size: 1.45rem; }
.inventory-icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--gold); box-shadow: var(--px-shadow-1);
  font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif; font-size: 1.4rem;
}
@media (max-width: 1080px) {
  .warehouse-layout { grid-template-columns: 1fr 1fr; }
  .inventory-card.featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) { .warehouse-layout { grid-template-columns: 1fr; } }

/* ---------- 13. 好友 ---------- */
.friend-tools {
  display: grid; grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end; gap: var(--space-md); margin-bottom: var(--space-lg);
}
.friend-list { display: grid; gap: var(--space-md); }
.friend-card {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-md); padding: var(--space-md);
}
.friend-pet, .pk-rival-card img {
  border: 2px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 78%, color-mix(in oklch, var(--leaf) 70%, var(--paper)) 0 35%, transparent 36%),
    linear-gradient(180deg, var(--sky), var(--card-warm));
}
.friend-pet { display: grid; place-items: center; width: 88px; height: 88px; box-shadow: var(--px-shadow-1); }
.friend-pet img, .pk-rival-card img {
  width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 color-mix(in oklch, var(--line) 36%, transparent));
}
.friend-copy { display: grid; gap: 4px; min-width: 0; }
.friend-copy > span { color: var(--moss); font-weight: 700; font-size: 0.86rem; }
.friend-copy strong { font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif; font-size: 1.5rem; line-height: 1.05; }
.friend-copy p { margin: 4px 0; color: var(--muted); line-height: 1.55; font-size: 0.92rem; }
.friend-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.friend-meta span { background: var(--input-bg); font-size: 0.82rem; }

@media (max-width: 720px) {
  .friend-tools { grid-template-columns: 1fr; }
  .friend-tools .primary-action { width: 100%; }
  .friend-card { grid-template-columns: 72px minmax(0, 1fr); }
  .friend-card .secondary-action { grid-column: 1 / -1; width: 100%; }
}

/* ---------- 14. 战斗 PK ---------- */
.battle.view-page { display: block; border: 0; background: transparent; box-shadow: none; padding: var(--space-md) 0 var(--space-xl); }
.battle-copy { margin-bottom: var(--space-lg); }

.pk-board {
  display: grid; gap: var(--space-md);
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 0.68fr);
  align-items: stretch;
}
.pk-friend-list { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.pk-rival-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  align-items: center; gap: var(--space-sm);
  width: 100%; padding: 8px; text-align: left; background: var(--paper);
}
.pk-rival-card img { width: 56px; height: 56px; padding: 2px; }
.pk-rival-card strong { display: block; font-size: 0.98rem; line-height: 1.15; }
.pk-rival-card small { display: block; color: var(--muted); line-height: 1.35; font-size: 0.82rem; }

.battle-stage {
  display: grid; gap: var(--space-md);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--card-bg) 78%, var(--berry)) 0 30%, var(--card-bg));
}
.battle-mode-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.battle-mode { padding: 9px 14px; font-weight: 700; }

.battle-warning {
  border: 2px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: var(--radius); background: var(--paper);
  padding: 8px 12px; color: var(--muted); line-height: 1.55; margin: 0;
}

.battle-turn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: color-mix(in oklch, var(--gold) 60%, var(--paper));
  box-shadow: var(--px-shadow-1);
  padding: 10px 14px; text-align: center; font-weight: 700;
}
.battle-turn::before, .battle-turn::after { content: "◆"; color: var(--berry); font-size: 0.9rem; }

/* 战斗场 */
.battle-arena {
  display: grid; align-items: end;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-md); min-height: 320px;
  padding: var(--space-md);
  border: 2px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sky) 50%, var(--paper)) 0 60%,
      color-mix(in oklch, var(--leaf) 36%, var(--paper)) 60% 100%);
  box-shadow: inset 0 -6px 0 color-mix(in oklch, var(--line) 18%, transparent);
}
.fighter {
  display: grid; justify-items: center; align-content: end; gap: var(--space-sm);
  padding: var(--space-sm); min-width: 0;
}
.fighter strong { font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif; font-size: 1.3rem; line-height: 1; }
.battle-statline { color: var(--moss); font-weight: 700; font-size: 0.86rem; text-align: center; }

.avatar, .battle-avatar {
  position: relative; display: grid; place-items: center;
  border: 3px solid var(--line); border-radius: 8px;
  overflow: hidden;
}
.avatar {
  width: clamp(96px, 12vw, 132px); height: clamp(96px, 12vw, 132px);
  background:
    radial-gradient(circle at 50% 76%, color-mix(in oklch, var(--leaf) 80%, white) 0 34%, transparent 35%),
    linear-gradient(180deg, oklch(89% 0.065 208), oklch(91% 0.06 124));
  box-shadow: var(--px-shadow-1);
}
.battle-avatar {
  width: clamp(160px, 18vw, 220px); height: clamp(160px, 18vw, 220px);
  background:
    radial-gradient(circle at 50% 78%, color-mix(in oklch, var(--leaf) 78%, white) 0 38%, transparent 39%),
    linear-gradient(180deg, oklch(88% 0.06 206), oklch(91% 0.06 122));
  overflow: visible; box-shadow: var(--px-shadow-2);
}
.avatar img, .battle-avatar img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 5px 0 color-mix(in oklch, var(--line) 42%, transparent));
}
.rival .avatar, .rival .battle-avatar {
  background:
    radial-gradient(circle at 50% 76%, color-mix(in oklch, var(--berry) 70%, var(--gold)) 0 34%, transparent 35%),
    linear-gradient(180deg, oklch(88% 0.055 41), oklch(91% 0.055 78));
}
.rival .avatar img, .rival .battle-avatar img { transform: scaleX(-1); }

.versus {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 3px solid var(--line); border-radius: 50%;
  background: var(--berry); color: oklch(98% 0.02 90);
  font-family: "ZCOOL KuaiLe", sans-serif; font-size: 1.4rem;
  box-shadow: var(--px-shadow-1);
  margin-bottom: 30%;
}

/* HP/MP 双条 */
.battle-bars {
  display: grid; gap: 4px; width: min(240px, 100%);
}
.battle-bars .pixel-bar { height: 12px; }
.battle-bars .hp { --bar-color: linear-gradient(90deg, var(--berry), color-mix(in oklch, var(--berry) 55%, var(--gold))); }
.battle-bars .mp { --bar-color: linear-gradient(90deg, var(--water), color-mix(in oklch, var(--water) 60%, var(--sky))); }
.battle-bars span {
  display: block; height: 12px;
  border: 2px solid var(--line); border-radius: 4px;
  background: color-mix(in oklch, var(--paper) 70%, var(--line));
  overflow: hidden;
}
.battle-bars i {
  display: block; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.18) 6px 7px),
    var(--berry);
  transition: width 240ms cubic-bezier(.2,0,.2,1);
}
.battle-bars .mp i {
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.18) 6px 7px),
    var(--water);
}

/* 行动区 */
.battle-actions {
  display: grid; gap: var(--space-md);
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 0.68fr);
  align-items: stretch;
}
.battle-actions .complete-button { margin: 0; align-self: stretch; min-height: 100%; }

.skill-command-grid {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.skill-command {
  display: grid; gap: 4px; min-height: 70px; padding: 8px 10px;
  background: var(--input-bg); text-align: left;
}
.skill-command:hover:not(:disabled) {
  background: color-mix(in oklch, var(--gold) 74%, var(--paper));
}
.skill-command strong {
  font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  font-size: 1.05rem; line-height: 1; display: flex; align-items: center; gap: 6px;
}
.skill-command strong::before {
  content: ""; width: 8px; height: 8px; background: var(--berry);
  border: 2px solid var(--line);
}
.skill-command span {
  color: var(--muted); font-size: 0.82rem; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.battle-log {
  border: 2px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: var(--radius); background: var(--paper);
  padding: 10px 12px; min-height: 88px; line-height: 1.55;
  color: var(--muted); font-size: 0.92rem;
  display: grid; gap: 4px;
}
.battle-log span { display: block; }
.battle-log span:last-child { color: var(--ink); font-weight: 700; }

@media (max-width: 1080px) {
  .pk-board { grid-template-columns: 1fr; }
  .battle-actions { grid-template-columns: 1fr; }
  .skill-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .battle-arena { grid-template-columns: 1fr; min-height: auto; }
  .versus { margin: 0 auto; }
  .skill-command-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 15. 图鉴 ---------- */
.pet-dex { display: block; margin-top: var(--space-2xl); }
.pet-dex.view-page { margin-top: 0; }
.dex-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.dex-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.dex-filter button { background: var(--card-warm); padding: 7px 12px; font-weight: 700; }
.dex-filter .active { background: var(--gold); }

.pet-dex-grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
}
.dex-card { overflow: hidden; }
.dex-card[open] {
  grid-column: 1 / -1;
}
.dex-summary {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-sm);
  padding: var(--space-sm); cursor: pointer; list-style: none;
}
.dex-summary::-webkit-details-marker { display: none; }
.dex-summary:focus-visible { outline: 3px solid var(--berry); outline-offset: -5px; }
.dex-preview {
  display: grid; place-items: center; width: 64px; height: 64px;
  border: 2px solid var(--line); border-radius: 6px;
  background:
    linear-gradient(45deg, oklch(92% 0.025 92) 25%, transparent 25% 75%, oklch(92% 0.025 92) 75%),
    linear-gradient(45deg, oklch(86% 0.025 92) 25%, transparent 25% 75%, oklch(86% 0.025 92) 75%);
  background-position: 0 0, 8px 8px; background-size: 16px 16px;
}
.dex-preview img { width: 92%; height: 92%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 color-mix(in oklch, var(--line) 32%, transparent)); }
.dex-card-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; min-width: 0; }
.dex-card-header > span:first-child { display: grid; gap: 2px; min-width: 0; }
.dex-name { display: block; font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif; font-size: 1.25rem; line-height: 1; }
.dex-card-header > span:first-child > span { color: var(--muted); font-size: 0.86rem; }
.dex-open-label {
  display: grid; place-items: center; min-width: 44px; min-height: 30px;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--paper); box-shadow: 3px 3px 0 var(--line);
  font-weight: 700; font-size: 0.86rem;
}
.dex-open-label::before { content: "展开"; }
.dex-card[open] .dex-open-label { background: var(--gold); }
.dex-card[open] .dex-open-label::before { content: "收起"; }

.dex-card-body {
  display: grid; gap: var(--space-md);
  padding: var(--space-md);
  border-top: 2px dashed color-mix(in oklch, var(--line) 50%, transparent);
  animation: dex-reveal 200ms ease-out;
}
.dex-card[open] .dex-card-body {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.dex-card[open] .stage-strip { grid-column: 1 / -1; }
.dex-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; color: var(--muted); }
.dex-stats, .skill-list {
  display: grid; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.dex-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dex-stats li, .skill-list li {
  border: 2px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: 6px; background: oklch(96% 0.03 92);
  padding: 6px 8px; font-size: 0.92rem;
}
.skill-list strong { display: block; }
.skill-list span { color: var(--berry); }

.stage-strip {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.stage-thumb { display: grid; gap: 4px; margin: 0; }
.stage-thumb img {
  width: 100%; height: 96px; object-fit: contain;
  border: 2px solid var(--line); border-radius: 6px;
  background:
    linear-gradient(45deg, oklch(92% 0.025 92) 25%, transparent 25% 75%, oklch(92% 0.025 92) 75%),
    linear-gradient(45deg, oklch(86% 0.025 92) 25%, transparent 25% 75%, oklch(86% 0.025 92) 75%);
  background-position: 0 0, 10px 10px; background-size: 20px 20px;
  image-rendering: pixelated;
}
.stage-thumb figcaption { text-align: center; color: var(--muted); font-size: 0.82rem; }

@media (max-width: 720px) {
  .dex-card[open] .dex-card-body { grid-template-columns: 1fr; }
}

/* ---------- 16. 像素装饰 (背景方块) ---------- */
.sun, .cloud, .hill, .ground, .fitmon, .egg, .ear, .body, .face, .tail, .mini-fitmon {
  position: absolute;
}

/* ---------- 18. 动画 ---------- */
@keyframes dex-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseRing {
  0%, 100% { box-shadow: var(--px-shadow-2), 0 0 0 0 color-mix(in oklch, var(--berry) 40%, transparent); }
  50%      { box-shadow: var(--px-shadow-2), 0 0 0 6px color-mix(in oklch, var(--berry) 20%, transparent); }
}
.cover-start { animation: pulseRing 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* === 1. Hit-burst battle particles === */
.battle-avatar { position: relative; }
.hit-burst {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center; overflow: visible;
}
.hit-burst::before, .hit-burst::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--berry); border: 2px solid var(--line);
  animation: hit-shard 520ms cubic-bezier(.2,0,.2,1) forwards;
}
.hit-burst::after { background: var(--gold); animation-delay: 60ms; transform: rotate(45deg); }
.hit-burst .shard {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; background: var(--gold);
  border: 2px solid var(--line);
  animation: hit-shard 560ms cubic-bezier(.2,0,.2,1) forwards;
}
.hit-burst .shard:nth-child(2) { background: var(--berry); animation-delay: 80ms; }
.hit-burst .shard:nth-child(3) { background: var(--water); animation-delay: 140ms; }
.hit-burst .shard:nth-child(4) { background: oklch(94% 0.04 92); animation-delay: 200ms; }
.hit-burst .dmg-pop {
  position: absolute; left: 50%; top: 18%;
  transform: translate(-50%, 0);
  font-family: "ZCOOL KuaiLe", "DotGothic16", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--berry);
  -webkit-text-stroke: 3px var(--line); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--gold);
  animation: dmg-rise 720ms cubic-bezier(.2,0,.2,1) forwards;
  pointer-events: none; white-space: nowrap;
}
.hit-burst .dmg-pop.block { color: var(--water); text-shadow: 3px 3px 0 var(--paper); }
.fighter.is-hit .battle-avatar { animation: shake 320ms cubic-bezier(.36,0,.66,1); }

@keyframes hit-shard {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx, 38px), var(--dy, -32px)) rotate(180deg) scale(1.2); opacity: 0; }
}
@keyframes dmg-rise {
  0%   { transform: translate(-50%, 14px) scale(0.6); opacity: 0; }
  18%  { transform: translate(-50%, -6px) scale(1.15); opacity: 1; }
  60%  { transform: translate(-50%, -34px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -64px) scale(0.94); opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 1px); }
  40% { transform: translate(5px, -1px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(3px, 0); }
}

/* === 2. Dex quality borders (普通/卓越/灵宠) === */
.dex-card {
  position: relative;
  border-color: color-mix(in oklch, var(--line) 92%, transparent);
}
.dex-card::before {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  border: 3px solid transparent; border-radius: var(--radius);
  z-index: 1;
}
.dex-card[data-quality="普通"] { --quality-edge: oklch(74% 0.04 90); }
.dex-card[data-quality="卓越"] { --quality-edge: var(--water); }
.dex-card[data-quality="灵宠"] { --quality-edge: var(--violet); }
.dex-card[data-quality]::before {
  border-color: var(--quality-edge);
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--quality-edge) 35%, transparent);
}
.dex-card[data-quality="灵宠"] {
  background:
    radial-gradient(circle at 90% 8%, color-mix(in oklch, var(--violet) 24%, transparent) 0 18%, transparent 19%),
    var(--card-bg);
}
.dex-card[data-quality="卓越"] {
  background:
    radial-gradient(circle at 90% 8%, color-mix(in oklch, var(--water) 22%, transparent) 0 18%, transparent 19%),
    var(--card-bg);
}
.dex-card[data-quality] .dex-preview {
  border-color: var(--quality-edge);
}
.dex-card[data-quality] .dex-summary > .dex-card-header > span:first-child > .dex-name::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  background: var(--quality-edge); border: 2px solid var(--line); vertical-align: 2px;
}

/* === 3. HUD resource bar pixel mini-bars === */
.resource-bar {
  display: grid; gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px 10px;
}
.resource-bar > span {
  display: grid; grid-template-columns: 18px 1fr auto;
  align-items: center; gap: 6px;
  min-width: 0; padding: 4px 8px;
  background: var(--input-bg); border-radius: 5px;
  font-size: 0.84rem; line-height: 1; text-align: left;
}
.res-icon {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 2px solid var(--line); border-radius: 3px;
  background: var(--gold);
  font-size: 0.66rem; font-weight: 700;
}
.resource-card[data-kind="hp"] .res-icon { background: var(--berry); color: oklch(98% 0.02 90); }
.resource-card[data-kind="mp"] .res-icon { background: var(--water); }
.resource-card[data-kind="streak"] .res-icon { background: var(--leaf); color: oklch(98% 0.02 90); }
.res-bar {
  position: relative; height: 8px; min-width: 38px;
  border: 2px solid var(--line); border-radius: 3px;
  background: color-mix(in oklch, var(--paper) 70%, var(--line));
  overflow: hidden;
}
.res-bar i {
  display: block; height: 100%; width: var(--fill, 50%);
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,0.18) 5px 6px),
    var(--bar-color, var(--berry));
  transition: width 240ms cubic-bezier(.2,0,.2,1);
}
.resource-bar > span[data-kind="hp"] .res-bar i { --bar-color: var(--berry); }
.resource-bar > span[data-kind="mp"] .res-bar i { --bar-color: var(--water); }
.resource-bar > span[data-kind="streak"] .res-bar i { --bar-color: var(--leaf); }
.res-num { font-weight: 700; font-size: 0.82rem; }

@media (max-width: 720px) {
  .resource-bar { grid-template-columns: 1fr 1fr 1fr; }
  .resource-bar > span { padding: 3px 6px; font-size: 0.78rem; }
}


/* === Stardew-inspired background (overrides earlier body bg) === */
body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 0 18%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 240px 32%,
    linear-gradient(180deg,
      #6cc8ee 0%,
      #98dbef 26%,
      #cdebd9 52%,
      transparent 64%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'><rect width='64' height='64' fill='%237fb86b'/><rect x='0' y='0' width='64' height='4' fill='%2390c578'/><rect x='6' y='2' width='2' height='4' fill='%23548c46'/><rect x='8' y='1' width='2' height='5' fill='%23548c46'/><rect x='20' y='3' width='2' height='4' fill='%23548c46'/><rect x='22' y='2' width='2' height='5' fill='%23548c46'/><rect x='42' y='1' width='2' height='5' fill='%23548c46'/><rect x='44' y='2' width='2' height='4' fill='%23548c46'/><rect x='54' y='3' width='2' height='4' fill='%23548c46'/><rect x='56' y='2' width='2' height='5' fill='%23548c46'/><rect x='14' y='18' width='2' height='2' fill='%236aa55a'/><rect x='30' y='30' width='2' height='2' fill='%236aa55a'/><rect x='46' y='14' width='2' height='2' fill='%236aa55a'/><rect x='8' y='44' width='2' height='2' fill='%236aa55a'/><rect x='52' y='48' width='2' height='2' fill='%236aa55a'/><rect x='38' y='58' width='2' height='2' fill='%236aa55a'/><rect x='4' y='28' width='2' height='2' fill='%2390c578'/><rect x='24' y='52' width='2' height='2' fill='%2390c578'/><rect x='58' y='34' width='2' height='2' fill='%2390c578'/><rect x='18' y='40' width='2' height='2' fill='%23ffd86b'/><rect x='20' y='40' width='2' height='2' fill='%23ffae3a'/><rect x='46' y='30' width='2' height='2' fill='%23ff9bb3'/><rect x='48' y='30' width='2' height='2' fill='%23e8588a'/></svg>") repeat 0 100%,
    linear-gradient(180deg, #7fb86b 64%, #6ba35a 100%);
  background-size: 480px 80px, 480px 80px, 100% 100%, 64px 64px, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  image-rendering: pixelated;
}
body[data-theme="track"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 0 18%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 240px 32%,
    linear-gradient(180deg, #f4c98a 0%, #f3d8a6 28%, #f0e0bc 52%, transparent 64%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'><rect width='64' height='64' fill='%237fb86b'/><rect x='0' y='0' width='64' height='4' fill='%2390c578'/><rect x='6' y='2' width='2' height='4' fill='%23548c46'/><rect x='8' y='1' width='2' height='5' fill='%23548c46'/><rect x='20' y='3' width='2' height='4' fill='%23548c46'/><rect x='22' y='2' width='2' height='5' fill='%23548c46'/><rect x='42' y='1' width='2' height='5' fill='%23548c46'/><rect x='44' y='2' width='2' height='4' fill='%23548c46'/><rect x='54' y='3' width='2' height='4' fill='%23548c46'/><rect x='56' y='2' width='2' height='5' fill='%23548c46'/><rect x='14' y='18' width='2' height='2' fill='%236aa55a'/><rect x='30' y='30' width='2' height='2' fill='%236aa55a'/><rect x='46' y='14' width='2' height='2' fill='%236aa55a'/><rect x='8' y='44' width='2' height='2' fill='%236aa55a'/><rect x='52' y='48' width='2' height='2' fill='%236aa55a'/><rect x='38' y='58' width='2' height='2' fill='%236aa55a'/><rect x='4' y='28' width='2' height='2' fill='%2390c578'/><rect x='24' y='52' width='2' height='2' fill='%2390c578'/><rect x='58' y='34' width='2' height='2' fill='%2390c578'/><rect x='18' y='40' width='2' height='2' fill='%23ffd86b'/><rect x='20' y='40' width='2' height='2' fill='%23ffae3a'/><rect x='46' y='30' width='2' height='2' fill='%23ff9bb3'/><rect x='48' y='30' width='2' height='2' fill='%23e8588a'/></svg>") repeat 0 100%,
    linear-gradient(180deg, #a39064 64%, #826f48 100%);
  background-size: 480px 80px, 480px 80px, 100% 100%, 64px 64px, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}
body[data-theme="court"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 0 18%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 240px 32%,
    linear-gradient(180deg, #5fc3d4 0%, #8ad3d6 28%, #c4e3d4 52%, transparent 64%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'><rect width='64' height='64' fill='%237fb86b'/><rect x='0' y='0' width='64' height='4' fill='%2390c578'/><rect x='6' y='2' width='2' height='4' fill='%23548c46'/><rect x='8' y='1' width='2' height='5' fill='%23548c46'/><rect x='20' y='3' width='2' height='4' fill='%23548c46'/><rect x='22' y='2' width='2' height='5' fill='%23548c46'/><rect x='42' y='1' width='2' height='5' fill='%23548c46'/><rect x='44' y='2' width='2' height='4' fill='%23548c46'/><rect x='54' y='3' width='2' height='4' fill='%23548c46'/><rect x='56' y='2' width='2' height='5' fill='%23548c46'/><rect x='14' y='18' width='2' height='2' fill='%236aa55a'/><rect x='30' y='30' width='2' height='2' fill='%236aa55a'/><rect x='46' y='14' width='2' height='2' fill='%236aa55a'/><rect x='8' y='44' width='2' height='2' fill='%236aa55a'/><rect x='52' y='48' width='2' height='2' fill='%236aa55a'/><rect x='38' y='58' width='2' height='2' fill='%236aa55a'/><rect x='4' y='28' width='2' height='2' fill='%2390c578'/><rect x='24' y='52' width='2' height='2' fill='%2390c578'/><rect x='58' y='34' width='2' height='2' fill='%2390c578'/><rect x='18' y='40' width='2' height='2' fill='%23ffd86b'/><rect x='20' y='40' width='2' height='2' fill='%23ffae3a'/><rect x='46' y='30' width='2' height='2' fill='%23ff9bb3'/><rect x='48' y='30' width='2' height='2' fill='%23e8588a'/></svg>") repeat 0 100%,
    linear-gradient(180deg, #6dad94 64%, #4a8a78 100%);
  background-size: 480px 80px, 480px 80px, 100% 100%, 64px 64px, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}
body[data-theme="dawn"] {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 0 18%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' shape-rendering='crispEdges'><rect x='30' y='28' width='52' height='10' fill='%23ffffff'/><rect x='40' y='22' width='30' height='6' fill='%23ffffff'/><rect x='34' y='38' width='52' height='6' fill='%23dde8f4'/><rect x='150' y='44' width='66' height='8' fill='%23ffffff'/><rect x='160' y='38' width='40' height='6' fill='%23ffffff'/><rect x='154' y='52' width='62' height='4' fill='%23dde8f4'/></svg>") repeat-x 240px 32%,
    linear-gradient(180deg, #ffb086 0%, #ffd29a 26%, #fbe7c2 52%, transparent 64%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'><rect width='64' height='64' fill='%237fb86b'/><rect x='0' y='0' width='64' height='4' fill='%2390c578'/><rect x='6' y='2' width='2' height='4' fill='%23548c46'/><rect x='8' y='1' width='2' height='5' fill='%23548c46'/><rect x='20' y='3' width='2' height='4' fill='%23548c46'/><rect x='22' y='2' width='2' height='5' fill='%23548c46'/><rect x='42' y='1' width='2' height='5' fill='%23548c46'/><rect x='44' y='2' width='2' height='4' fill='%23548c46'/><rect x='54' y='3' width='2' height='4' fill='%23548c46'/><rect x='56' y='2' width='2' height='5' fill='%23548c46'/><rect x='14' y='18' width='2' height='2' fill='%236aa55a'/><rect x='30' y='30' width='2' height='2' fill='%236aa55a'/><rect x='46' y='14' width='2' height='2' fill='%236aa55a'/><rect x='8' y='44' width='2' height='2' fill='%236aa55a'/><rect x='52' y='48' width='2' height='2' fill='%236aa55a'/><rect x='38' y='58' width='2' height='2' fill='%236aa55a'/><rect x='4' y='28' width='2' height='2' fill='%2390c578'/><rect x='24' y='52' width='2' height='2' fill='%2390c578'/><rect x='58' y='34' width='2' height='2' fill='%2390c578'/><rect x='18' y='40' width='2' height='2' fill='%23ffd86b'/><rect x='20' y='40' width='2' height='2' fill='%23ffae3a'/><rect x='46' y='30' width='2' height='2' fill='%23ff9bb3'/><rect x='48' y='30' width='2' height='2' fill='%23e8588a'/></svg>") repeat 0 100%,
    linear-gradient(180deg, #98b566 64%, #7e9a4e 100%);
  background-size: 480px 80px, 480px 80px, 100% 100%, 64px 64px, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* slow drift for the cloud bands */
@keyframes cloud-drift-a { from { background-position-x: 0, 240px, 0, 0, 0; } to { background-position-x: 480px, 720px, 0, 0, 0; } }
@media (prefers-reduced-motion: no-preference) {
  body { animation: cloud-drift-a 80s linear infinite; }
}


/* === Stardew horizon mountains + onboarding bg sync + HUD bar polish === */

/* mountain band sits ABOVE grass tile, behind everything UI */
body::before {
  content: "";
  position: fixed; left: 0; right: 0; bottom: 64px;
  height: 120px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='120' shape-rendering='crispEdges'><!-- back ridge (lighter, distant) --><rect x='0' y='62' width='480' height='4' fill='%23a8c3a8'/><polygon points='20,62 50,40 80,52 110,30 150,46 180,38 220,54 260,32 300,48 340,40 380,54 420,36 460,50 480,42 480,62 0,62' fill='%23a8c3a8'/><polygon points='80,52 95,42 110,30 125,42 140,50 80,52' fill='%23ffffff'/><polygon points='260,32 280,20 300,30 320,40 260,32' fill='%23ffffff'/><!-- mid ridge (darker green) --><polygon points='0,80 30,68 60,76 90,60 120,72 150,58 190,72 220,64 260,76 300,60 340,72 380,64 420,80 460,68 480,76 480,120 0,120' fill='%237aa56b'/><!-- front trees / bumps (deepest) --><rect x='10' y='90' width='6' height='14' fill='%234e7a3e'/><rect x='8' y='86' width='10' height='4' fill='%234e7a3e'/><rect x='40' y='94' width='4' height='10' fill='%234e7a3e'/><rect x='38' y='90' width='8' height='4' fill='%234e7a3e'/><rect x='80' y='92' width='6' height='12' fill='%234e7a3e'/><rect x='78' y='88' width='10' height='4' fill='%234e7a3e'/><rect x='120' y='96' width='4' height='8' fill='%234e7a3e'/><rect x='160' y='90' width='8' height='14' fill='%234e7a3e'/><rect x='158' y='86' width='12' height='4' fill='%234e7a3e'/><rect x='210' y='94' width='6' height='10' fill='%234e7a3e'/><rect x='250' y='90' width='6' height='14' fill='%234e7a3e'/><rect x='248' y='86' width='10' height='4' fill='%234e7a3e'/><rect x='290' y='96' width='4' height='8' fill='%234e7a3e'/><rect x='330' y='92' width='8' height='12' fill='%234e7a3e'/><rect x='328' y='88' width='12' height='4' fill='%234e7a3e'/><rect x='380' y='94' width='6' height='10' fill='%234e7a3e'/><rect x='420' y='90' width='8' height='14' fill='%234e7a3e'/><rect x='418' y='86' width='12' height='4' fill='%234e7a3e'/><rect x='460' y='94' width='6' height='10' fill='%234e7a3e'/></svg>") repeat-x bottom left;
  background-size: 480px 120px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: hill-drift 220s linear infinite; }
}
@keyframes hill-drift { from { background-position-x: 0; } to { background-position-x: 480px; } }

body[data-theme="track"]::before { filter: hue-rotate(-12deg) saturate(0.85) brightness(0.96); }
body[data-theme="court"]::before { filter: hue-rotate(18deg) saturate(0.9); }
body[data-theme="dawn"]::before  { filter: hue-rotate(-6deg) saturate(0.92) brightness(1.04); }

/* keep main UI above the horizon layer */
.app-shell, .top-bar, .bottom-nav, .modal-shell, .onboarding-screen, .toast-stack { position: relative; z-index: 1; }

/* === onboarding screen: show body bg through, keep card === */
.onboarding-screen {
  background:
    linear-gradient(180deg, rgba(13, 22, 38, 0.18) 0%, transparent 30%, transparent 70%, rgba(13, 22, 38, 0.10) 100%) !important;
  background-size: auto !important;
}
.onboarding-card { backdrop-filter: blur(2px); }

/* === HUD resource cards refinement === */
.resource-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  gap: var(--space-xs);
  align-items: stretch;
  padding: 8px;
}

.resource-bar > .resource-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(46px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 2px solid color-mix(in oklch, var(--line) 78%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--paper) 84%, var(--gold)), var(--input-bg));
  box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--line) 12%, transparent);
  font-size: 0.82rem;
  line-height: 1;
  text-align: left;
}

.resource-bar > .resource-card .res-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--gold);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
}

.resource-bar > .resource-card[data-kind="hp"] .res-icon { background: var(--berry); color: oklch(98% 0.02 90); }
.resource-bar > .resource-card[data-kind="mp"] .res-icon { background: var(--water); }
.resource-bar > .resource-card[data-kind="streak"] .res-icon { background: var(--leaf); color: oklch(98% 0.02 90); }

.res-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.res-copy small {
  color: color-mix(in oklch, var(--muted) 86%, var(--line));
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.resource-bar > .resource-card .res-bar {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,0.10) 7px 8px),
    color-mix(in oklch, var(--line) 12%, oklch(96% 0.005 90));
  overflow: hidden;
}

.resource-bar > .resource-card .res-bar i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,0.30) 7px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px),
    var(--bar-color, var(--berry));
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: width 240ms cubic-bezier(.2,0,.2,1);
}

.resource-bar > .resource-card[data-kind="hp"] .res-bar i { --bar-color: var(--berry); }
.resource-bar > .resource-card[data-kind="mp"] .res-bar i { --bar-color: var(--water); }
.resource-bar > .resource-card[data-kind="streak"] .res-bar i { --bar-color: var(--leaf); }

.resource-bar > .resource-card .res-num {
  justify-self: end;
  min-width: 46px;
  color: var(--ink);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .resource-bar {
    grid-template-columns: 1fr;
  }

  .resource-bar > .resource-card {
    grid-template-columns: 28px minmax(0, 1fr) minmax(44px, auto);
    padding: 7px 9px;
  }
}

@media (max-width: 720px) {
  body::before { bottom: 52px; height: 90px; background-size: 360px 90px; }
}