/* ===== base.css · 宇宙星河主题 / 重置 / 排版 ===== */
:root {
  /* 宇宙星河主题（深紫星空 + 玻璃拟态） */
  --bg: #0a0420;
  --bg-soft: #1a0d3a;
  --bg-card: rgba(36, 20, 70, 0.55);
  --bg-elev: rgba(58, 32, 110, 0.7);
  --ink: #f0eaff;
  --ink-soft: #c8c0e0;
  --ink-faint: #8b80b0;
  --line: rgba(180, 140, 255, 0.18);
  --line-strong: rgba(180, 140, 255, 0.35);
  --brand: #b794ff;
  --brand-soft: rgba(183, 148, 255, 0.18);
  --brand-deep: #8a5cff;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.2);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.2);
  --bad: #ff7a8a;
  --bad-soft: rgba(255, 122, 138, 0.2);
  --gold: #ffd866;

  /* 大陆釉彩色（保留糖果色但加紫光适配） */
  --c1: #ff8b94;  --c1-soft: rgba(255, 139, 148, 0.18);
  --c2: #5eead4;  --c2-soft: rgba(94, 234, 212, 0.18);
  --c3: #a78bfa;  --c3-soft: rgba(167, 139, 250, 0.18);
  --c4: #fbbf24;  --c4-soft: rgba(251, 191, 36, 0.18);

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
  --shadow-soft: 0 3px 14px rgba(124, 58, 237, 0.2);
  --shadow-hover: 0 12px 40px rgba(167, 139, 250, 0.5);
  --ring: 0 0 0 3px var(--brand-soft);
  --tap: 44px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(124, 58, 237, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(236, 72, 153, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0a0420 0%, #1a0d3a 50%, #0a0420 100%);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

/* 星空背景：在 body 之前叠加星点 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, white, transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 30% 80%, white, transparent),
    radial-gradient(1.5px 1.5px at 70% 85%, rgba(183,148,255,0.9), transparent),
    radial-gradient(1px 1px at 15% 55%, white, transparent),
    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 50% 45%, white, transparent),
    radial-gradient(1.5px 1.5px at 25% 25%, rgba(255,216,102,0.8), transparent);
  background-size: 200% 200%;
  background-position: 0 0;
  animation: twinkle 8s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

button {
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  min-height: var(--tap);
}

button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

ul { list-style: none; }

:root { --maxw: 1200px; }

/* 通用工具 */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.hide { display: none !important; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--line);
}

/* ============================================================
   通用「奶油糖果卡」系统 · 全局覆盖 .card / .modal
   —— 对应图2参考：暖奶油底 + 橙粉/粉蓝渐变 + 青色描边光晕 + 四角星装饰
   ============================================================ */

/* 装饰小图：四角金黄星 + 青色小星 + 紫粉小星 + 圆点 + 虚线轨道
   放在 ::before（右上）、::after（左下） */
.cute-deco-tr,
.cute-deco-bl {
  position: absolute;
  width: 64px; height: 64px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 4px rgba(255, 216, 102, 0.45));
}
.cute-deco-tr {
  top: -22px; right: -22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M52 12 L56 26 L70 28 L56 30 L52 44 L48 30 L34 28 L48 26 Z' fill='%23FFD866' stroke='%23FFA94D' stroke-width='1.5'/><circle cx='14' cy='20' r='2.2' fill='%235EEAD4'/><circle cx='68' cy='50' r='1.8' fill='%23A78BFA'/><path d='M14 14 Q40 0 66 18' stroke='%23A78BFA' stroke-width='1.2' fill='none' stroke-dasharray='2 3' opacity='0.55'/><path d='M18 60 L20 66 L26 67 L20 68 L18 74 L16 68 L10 67 L16 66 Z' fill='%23A78BFA' opacity='0.85'/></svg>");
}
.cute-deco-bl {
  bottom: -22px; left: -22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M28 64 L30 72 L38 74 L30 76 L28 72 L26 76 L24 72 L16 74 L24 72 L26 64 Z' fill='%23FFD866' stroke='%23FFA94D' stroke-width='1.4' transform='translate(-2 -2)'/><circle cx='64' cy='64' r='2.2' fill='%235EEAD4'/><circle cx='10' cy='12' r='1.8' fill='%23FFD866'/><path d='M64 14 Q40 0 14 18' stroke='%23A78BFA' stroke-width='1.2' fill='none' stroke-dasharray='2 3' opacity='0.55'/><path d='M58 60 L60 66 L66 67 L60 68 L58 74 L56 68 L50 67 L56 66 Z' fill='%23A78BFA' opacity='0.85'/></svg>");
}

.card,
.modal {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 222, 178, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(196, 228, 255, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, #fff8eb 0%, #fdf3e2 50%, #fef6ea 100%);
  border: 2.5px solid #5eead4;
  border-radius: 28px;
  box-shadow:
    0 0 0 4px rgba(94, 234, 212, 0.12),
    0 0 0 6px rgba(255, 255, 255, 0.35),
    0 14px 40px rgba(255, 180, 100, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #4a3520;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* 装饰：右上 / 左下 角的小星点（用 ::before / ::after 避免引入额外 DOM） */
.card::before,
.modal::before,
.q-card::before,
.settle-card::before,
.cartoon-host::before {
  content: '';
  position: absolute;
  top: -22px; right: -22px;
  width: 64px; height: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M52 12 L56 26 L70 28 L56 30 L52 44 L48 30 L34 28 L48 26 Z' fill='%23FFD866' stroke='%23FFA94D' stroke-width='1.5'/><circle cx='14' cy='20' r='2.2' fill='%235EEAD4'/><circle cx='68' cy='50' r='1.8' fill='%23A78BFA'/><path d='M14 14 Q40 0 66 18' stroke='%23A78BFA' stroke-width='1.2' fill='none' stroke-dasharray='2 3' opacity='0.55'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  pointer-events: none; z-index: 3;
  filter: drop-shadow(0 0 4px rgba(255, 216, 102, 0.45));
}
.card::after,
.modal::after,
.q-card::after,
.settle-card::after,
.cartoon-host::after {
  content: '';
  position: absolute;
  bottom: -22px; left: -22px;
  width: 64px; height: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M28 64 L30 72 L38 74 L30 76 L28 72 L26 76 L24 72 L16 74 L24 72 L26 64 Z' fill='%23FFD866' stroke='%23FFA94D' stroke-width='1.4'/><circle cx='64' cy='64' r='2.2' fill='%235EEAD4'/><circle cx='10' cy='12' r='1.8' fill='%23FFD866'/><path d='M64 14 Q40 0 14 18' stroke='%23A78BFA' stroke-width='1.2' fill='none' stroke-dasharray='2 3' opacity='0.55'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  pointer-events: none; z-index: 3;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.45));
}

/* 确保卡片内部所有文字与子元素都按暖色奶油调显示 */
.card *,
.modal * {
  color: inherit;
}
.card h1, .card h2, .card h3, .card h4, .card .side-h {
  color: #3a2818;
}
.card .muted, .card .faint, .card .meta {
  color: #7a6048;
}
.card .codex-close, .modal .codex-close {
  color: #7a6048;
}
.card .codex-close:hover, .modal .codex-close:hover {
  color: #ff7a8a;
  background: rgba(255, 122, 138, 0.12);
}

/* 「即将上线」标签：奶油卡里用暖色背景 */
.card .soon {
  color: #b07a3a;
  background: rgba(255, 184, 102, 0.18);
  border: 1px solid rgba(255, 184, 102, 0.35);
}

.screen { flex: 1; display: none; position: relative; z-index: 1; }
.screen.active { display: flex; flex-direction: column; }

/* —— 顶部条 —— */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(10, 4, 32, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar .logo { font-weight: 800; font-size: 19px; letter-spacing: 0.3px; }
.topbar .logo b {
  background: linear-gradient(135deg, #b794ff 0%, #ec4899 50%, #ffd866 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.topbar .spacer { flex: 1; }
.topbar .stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: 14px;
  padding: 7px 13px; background: var(--bg-card); border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.topbar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--line);
  font-size: 18px; display: grid; place-items: center;
  transition: transform .12s, background .12s, box-shadow .12s;
  color: var(--ink);
}
.topbar-btn:hover { transform: scale(1.1); background: var(--brand-soft); box-shadow: 0 0 16px var(--brand-soft); }
/* v185：📬 消息按钮要挂未读红点（.mc-badge 用 absolute 定位，父级得是定位上下文） */
.topbar-msg { position: relative; }

/* —— 按钮（带光晕） —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #8a5cff 0%, #b794ff 100%);
  color: #fff; font-weight: 800;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 18px rgba(138, 92, 255, 0.45);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left .5s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 24px rgba(167, 139, 250, 0.6); }
.btn:hover::before { left: 100%; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.ghost {
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}
.btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn.lg { padding: 15px 26px; font-size: 17px; border-radius: var(--radius); }

/* —— 动效库 —— */
@keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes wiggle { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes bounce-in { 0%{transform:scale(0) rotate(-10deg);opacity:0} 50%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes sparkle { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(183,148,255,0.4)} 50%{box-shadow:0 0 0 10px rgba(183,148,255,0)} }
@keyframes float-up { 0%{transform:translateY(0);opacity:0.6} 100%{transform:translateY(-100px);opacity:0} }
@keyframes shake-soft { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes star-spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes cosmic-pulse { 0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(183,148,255,0.5))} 50%{filter:brightness(1.15) drop-shadow(0 0 16px rgba(236,72,153,0.7))} }

/* —— 装饰粒子（改为四角星/星尘） —— */
.deco-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.deco-particle {
  position: absolute; font-size: 14px; opacity: 0.6;
  color: #ffd866;
  animation: floaty 5s ease-in-out infinite, star-spin 20s linear infinite;
  text-shadow: 0 0 8px rgba(255, 216, 102, 0.8);
}

/* —— 生肖图通用样式 —— */
.zodiac-img {
  display: inline-block;
  border-radius: var(--radius-sm);
  image-rendering: -webkit-optimize-contrast;
  object-fit: cover;
  user-select: none;
}

.zodiac-egg { width: 90px; height: 108px; }

.zodiac-reveal {
  filter: drop-shadow(0 0 24px rgba(183, 148, 255, 0.6));
  animation: cosmic-pulse 3s ease-in-out infinite;
}

.pet-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 18px rgba(183, 148, 255, 0.4));
}
.pet-visual.stage-egg {
  filter: drop-shadow(0 0 24px rgba(124, 58, 237, 0.7));
}
.pet-visual.stage-complete {
  animation: cosmic-pulse 4s ease-in-out infinite;
}
.pet-visual.stage-hidden {
  filter: drop-shadow(0 0 32px rgba(236, 72, 153, 0.8)) brightness(1.1);
}

/* —— 玻璃拟态对话框 —— */
.glass {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  position: relative;
}