:root {
  --night: #0b1230;
  --night-2: #151f49;
  --ink: #eaf2ff;
  --muted: #95a6cf;
  --muted-2: #7585ad;
  --paper: #f9fbff;
  --line: rgba(169, 190, 229, .17);
  --mint: #9ce8d9;
  --coral: #ff9e9f;
  --butter: #f5d477;
  --lilac: #c6b5ff;
  --shadow: 0 22px 70px rgba(2, 8, 28, .42);
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(91, 122, 191, .38), transparent 43%),
    linear-gradient(160deg, #0a112d 0%, #101938 55%, #0b1230 100%);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell { width: min(100%, 560px); margin: 0 auto; padding: 18px 16px 34px; }
.topbar, .brand-lockup, .top-actions, .status-topline, .status-bottomline, .section-heading, .quote-card, .meaning-row, .flow-summary, .action-row, .result-stats, .result-actions { display: flex; align-items: center; }

.topbar { justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.brand-lockup { gap: 10px; }
.brand-lockup h1 { margin: 0; color: #f5f7ff; font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif; font-size: 23px; font-weight: 700; letter-spacing: .04em; }
.brand-lockup p { margin: 3px 0 0; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.brand-orbit { position: relative; width: 37px; height: 37px; border: 1px solid rgba(156,232,217,.52); border-radius: 50%; box-shadow: 0 0 20px rgba(156,232,217,.18); }
.brand-orbit::before, .brand-orbit::after { content: ""; position: absolute; border: 1px solid rgba(198,181,255,.38); border-radius: 50%; }
.brand-orbit::before { inset: 7px -3px; transform: rotate(36deg); }
.brand-orbit::after { inset: -3px 7px; transform: rotate(-36deg); }
.brand-orbit span { position: absolute; top: 8px; left: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 13px var(--mint); }
.brand-orbit i { position: absolute; right: 7px; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); }
.top-actions { gap: 8px; }
.culture-badge { padding: 6px 9px; color: #cfe3ff; border: 1px solid rgba(169,190,229,.22); border-radius: 999px; background: rgba(255,255,255,.06); font-size: 10px; white-space: nowrap; }
.icon-button, .info-button, .close-button { display: grid; place-items: center; cursor: pointer; }
.icon-button { width: 32px; height: 32px; border: 1px solid rgba(169,190,229,.23); border-radius: 50%; color: var(--mint); background: rgba(255,255,255,.06); font-size: 11px; }
.icon-button.is-muted { color: var(--muted-2); opacity: .72; }

.sky-status { margin-bottom: 14px; padding: 13px 14px 11px; border: 1px solid rgba(169,190,229,.18); border-radius: 20px; background: rgba(18, 29, 67, .78); box-shadow: 0 12px 32px rgba(2,8,28,.16); }
.status-topline { justify-content: space-between; }
.status-topline div, .status-score { display: flex; flex-direction: column; gap: 2px; }
.status-label, .status-score span { color: var(--muted); font-size: 10px; }
.status-topline strong { color: var(--mint); font-size: 18px; letter-spacing: .04em; }
.status-score { align-items: flex-end; }.status-score strong { color: var(--butter); font-size: 17px; }
.energy-track, .flow-meter { overflow: hidden; border-radius: 999px; background: rgba(148, 172, 215, .16); }
.energy-track { height: 7px; margin: 11px 0 9px; }.energy-track span, .flow-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--lilac), var(--coral)); box-shadow: 0 0 15px rgba(156,232,217,.45); transition: width .35s ease; }
.status-bottomline { justify-content: space-between; gap: 8px; color: var(--muted-2); font-size: 9px; }

.game-card { padding: 17px; border: 1px solid rgba(169,190,229,.18); border-radius: 28px; background: rgba(15, 25, 58, .94); box-shadow: var(--shadow); }
.section-heading { justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 5px; color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.section-heading h2, .modal-card h2, .info-card h2 { margin: 0; color: #f7f9ff; font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif; font-size: 23px; font-weight: 700; letter-spacing: .03em; }
.chapter-pill { padding: 7px 10px; color: var(--mint); border: 1px solid rgba(156,232,217,.25); border-radius: 999px; background: rgba(156,232,217,.08); font-size: 10px; white-space: nowrap; }

.quote-card { position: relative; gap: 9px; margin-top: 15px; padding: 12px 11px 11px 13px; border: 1px solid rgba(245,212,119,.20); border-radius: 17px; background: rgba(245,212,119,.07); }
.quote-mark { align-self: flex-start; color: var(--butter); font-family: Georgia, serif; font-size: 30px; line-height: .72; }
.quote-text { margin: 0; color: #fff4d0; font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif; font-size: 16px; letter-spacing: .05em; line-height: 1.35; }
.quote-source { margin: 4px 0 0; color: #a99d7c; font-size: 9px; }
.info-button { flex: 0 0 auto; width: 22px; height: 22px; margin-left: auto; border: 1px solid rgba(245,212,119,.42); border-radius: 50%; color: var(--butter); background: transparent; font-family: Georgia, serif; font-size: 13px; }
.meaning-row { gap: 7px; margin: 10px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.meaning-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

.canvas-stage { position: relative; margin-top: 14px; padding: 11px 10px 12px; border: 1px solid rgba(169,190,229,.18); border-radius: 22px; background: #09102e; }
.stage-label { display: flex; justify-content: space-between; margin: 0 2px 8px; color: var(--muted); font-size: 10px; }
#targetCanvas { display: block; width: 86px; height: 86px; margin: 0 auto 8px; opacity: .92; }
#boardCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.stage-hint { margin-top: 8px; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.4; }

.flow-summary { gap: 10px; margin-top: 13px; padding: 9px 10px; border: 1px solid rgba(169,190,229,.14); border-radius: 15px; background: rgba(255,255,255,.035); }
.flow-copy { display: flex; min-width: 64px; flex-direction: column; gap: 3px; }.flow-copy span { color: var(--muted); font-size: 9px; }.flow-copy strong { color: var(--mint); font-size: 14px; }
.flow-meter { height: 6px; flex: 1; }.flow-grade { min-width: 54px; color: var(--butter); text-align: right; font-size: 9px; }

.palette-panel { margin-top: 15px; }.palette-label { margin-bottom: 8px; color: var(--muted); font-size: 10px; }.palette { display: flex; gap: 13px; }
.light-swatch { position: relative; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid transparent; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.05); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.light-swatch.selected { border-color: var(--light); background: rgba(255,255,255,.09); transform: translateY(-3px); box-shadow: 0 0 16px color-mix(in srgb, var(--light) 40%, transparent); }
.light-core { width: 17px; height: 17px; border-radius: 50%; background: var(--light); box-shadow: 0 0 13px var(--glow); }.light-core::after { content: ""; display: block; width: 6px; height: 3px; margin: 3px 0 0 4px; border-radius: 50%; background: rgba(255,255,255,.72); transform: rotate(-30deg); }
.swatch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.action-row { gap: 8px; margin-top: 17px; }.action-row button { min-height: 42px; border-radius: 13px; cursor: pointer; font-size: 11px; font-weight: 700; transition: transform .14s ease, opacity .2s ease; }.action-row button:active { transform: translateY(1px); }
.secondary-button, .hint-button, .primary-button { border: 1px solid var(--line); }.secondary-button { padding: 0 12px; color: #b4c2df; background: rgba(255,255,255,.04); }.hint-button { padding: 0 11px; color: var(--butter); background: rgba(245,212,119,.08); border-color: rgba(245,212,119,.22); }.hint-button span { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 2px; border: 1px solid rgba(245,212,119,.56); border-radius: 50%; font-size: 9px; }.primary-button { flex: 1; padding: 0 14px; color: #101733; border-color: var(--mint); background: var(--mint); box-shadow: 0 8px 20px rgba(156,232,217,.16); }.primary-button:disabled { cursor: not-allowed; opacity: .34; box-shadow: none; }
.privacy-note { margin: 11px 4px 0; color: var(--muted-2); text-align: center; font-size: 9px; line-height: 1.55; }.footer-note { padding: 15px 12px 0; color: var(--muted-2); text-align: center; font-size: 9px; line-height: 1.55; }

.modal-backdrop, .info-backdrop { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px; background: rgba(3, 8, 25, .72); backdrop-filter: blur(10px); }.modal-backdrop.hidden, .info-backdrop.hidden { display: none; }
.modal-card, .info-card { width: min(100%, 360px); border: 1px solid rgba(169,190,229,.22); border-radius: 28px; background: #111b40; box-shadow: 0 25px 80px rgba(0,0,0,.46); text-align: center; }.modal-card { padding: 22px 21px 19px; }.modal-card > p:not(.eyebrow) { margin: 11px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.welcome-art { display: block; width: 108px; height: 108px; margin: 0 auto 15px; border-radius: 32px; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.22); }.welcome-note { display: flex; flex-direction: column; gap: 5px; margin: 0 0 17px; padding: 10px 12px; border: 1px solid rgba(156,232,217,.18); border-radius: 15px; background: rgba(156,232,217,.06); text-align: left; }.welcome-note strong { color: var(--mint); font-size: 11px; }.welcome-note span { color: var(--muted); font-size: 10px; line-height: 1.5; }.full-button { width: 100%; min-height: 45px; border-radius: 14px; }.welcome-card small { display: block; margin-top: 12px; color: var(--muted-2); font-size: 9px; }
.result-orbit { position: relative; width: 72px; height: 72px; margin: 0 auto 15px; border: 1px solid rgba(156,232,217,.50); border-radius: 50%; box-shadow: 0 0 24px rgba(156,232,217,.2); }.result-orbit::before, .result-orbit::after { content: ""; position: absolute; inset: 8px -5px; border: 1px solid rgba(198,181,255,.42); border-radius: 50%; transform: rotate(43deg); }.result-orbit::after { inset: -5px 8px; transform: rotate(-43deg); }.result-orbit span, .result-orbit i, .result-orbit b { position: absolute; display: block; border-radius: 50%; }.result-orbit span { top: 13px; left: 16px; width: 13px; height: 13px; background: var(--mint); box-shadow: 0 0 19px var(--mint); }.result-orbit i { right: 12px; bottom: 14px; width: 9px; height: 9px; background: var(--coral); box-shadow: 0 0 14px var(--coral); }.result-orbit b { top: 31px; left: 31px; width: 10px; height: 10px; background: var(--butter); box-shadow: 0 0 14px var(--butter); }.result-orbit.is-流光澄明 { animation: orbit-spin 2.3s linear infinite; }.result-orbit.is-安稳顺行 { box-shadow: 0 0 18px rgba(245,212,119,.25); }.result-orbit.is-重新收心, .result-orbit.is-fail { border-color: rgba(255,158,159,.62); box-shadow: 0 0 20px rgba(255,158,159,.22); }.result-orbit.is-fail span { background: var(--coral); box-shadow: 0 0 18px var(--coral); }
.result-stats { justify-content: center; gap: 6px; margin: 0 auto 17px; color: var(--muted); font-size: 10px; }.result-stats span { padding: 8px 8px; border: 1px solid rgba(169,190,229,.13); border-radius: 11px; background: rgba(255,255,255,.04); }.result-stats strong { display: block; margin-top: 3px; color: var(--mint); font-size: 15px; }.result-actions { gap: 8px; }.result-actions button { min-height: 42px; border-radius: 13px; cursor: pointer; font-size: 11px; font-weight: 800; }.result-actions .secondary-button { flex: .8; }.result-actions .primary-button { flex: 1.2; border: 0; }.ad-ghost-button { width: 100%; margin-top: 13px; padding: 8px; border: 0; color: #b8a572; background: transparent; cursor: pointer; font-size: 10px; }.ad-ghost-button span { margin-left: 3px; padding: 2px 5px; border: 1px solid rgba(245,212,119,.18); border-radius: 4px; color: #a99d7c; background: rgba(245,212,119,.07); font-size: 8px; }

.info-card { position: relative; padding: 23px 21px 20px; text-align: left; }.info-card h2 { font-size: 22px; }.info-card > p:not(.eyebrow):not(.info-disclaimer) { margin: 13px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.8; }.close-button { position: absolute; top: 13px; right: 14px; width: 28px; height: 28px; border: 1px solid rgba(169,190,229,.2); border-radius: 50%; color: var(--muted); background: transparent; font-size: 20px; line-height: 1; }.info-source-box { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border: 1px solid rgba(156,232,217,.16); border-radius: 13px; background: rgba(156,232,217,.05); }.info-source-box span { color: var(--muted-2); font-size: 9px; }.info-source-box a { color: var(--mint); font-size: 11px; line-height: 1.5; text-decoration: none; }.info-disclaimer { margin: 13px 0 0; color: #9b8d70; font-size: 9px; line-height: 1.6; }
.toast { position: fixed; right: 20px; bottom: 25px; left: 20px; z-index: 10; max-width: 420px; margin: 0 auto; padding: 10px 14px; border: 1px solid rgba(169,190,229,.16); border-radius: 999px; color: #f4f7ff; background: rgba(6, 13, 37, .92); box-shadow: 0 12px 30px rgba(0,0,0,.32); text-align: center; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (min-width: 560px) { .app-shell { padding-top: 30px; }.game-card { padding: 22px; } }