/* ============================================================
   main.css — 设计令牌 / 首页 / 控制 / 覆盖层 / 转场
   ============================================================ */
:root {
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    --ease-spring: cubic-bezier(.34, 1.4, .52, 1);
    --ease-out: cubic-bezier(.22, .7, .3, 1);
}

/* 深色主题（首页/星河/心跳）的玻璃控件 */
body[data-theme='home'],
body[data-theme='starriver'],
body[data-theme='heartbeat'] {
    --accent: #e7c48c;
    --glass-bg: rgba(20, 26, 48, .32);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-fg: rgba(244, 238, 228, .92);
    --glass-fg-dim: rgba(210, 216, 240, .55);
}
body[data-theme='sakura'] {
    --accent: #e8709a;
    --glass-bg: rgba(255, 255, 255, .6);
    --glass-border: rgba(255, 255, 255, .92);
    --glass-fg: #8c4a5e;
    --glass-fg-dim: rgba(140, 74, 94, .6);
}
body[data-theme='heartbeat'] { --accent: #ff4d6d; }
body[data-theme='starriver'] { --accent: #e7c48c; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
    font-family: var(--sans);
    background: #070b18;
    color: #e8ecff;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* ============================================================
   首页
   ============================================================ */
.home {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    padding: max(30px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(120% 80% at 50% -16%, #161d3d 0%, transparent 58%),
        linear-gradient(176deg, #0a1024 0%, #070b18 60%, #05080f 100%);
}
.home[hidden] { display: none; }

.home-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.home-bg__blob {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
    animation: blob-drift 26s ease-in-out infinite alternate;
}
.home-bg__blob--1 {
    width: 50vmax; height: 50vmax; top: -22vmax; left: -14vmax;
    background: radial-gradient(circle, rgba(86,104,196,.22), transparent 65%);
}
.home-bg__blob--2 {
    width: 42vmax; height: 42vmax; bottom: -20vmax; right: -14vmax;
    background: radial-gradient(circle, rgba(168,92,178,.14), transparent 65%);
    animation-duration: 32s; animation-delay: -8s;
}
@keyframes blob-drift {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(5vmax,4vmax,0) scale(1.14); }
}
.home-bg__grain {
    position: absolute; inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    opacity: .05; mix-blend-mode: overlay;
}

.home-hero {
    position: relative; z-index: 2;
    text-align: center;
    padding: clamp(20px, 5vh, 56px) 0 clamp(22px, 4vh, 40px);
    animation: hero-in .9s var(--ease-out) both;
}
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.home-hero__eyebrow {
    display: inline-block;
    font-size: 11px; letter-spacing: 5px;
    color: rgba(231, 196, 140, .75);
    margin-bottom: 16px;
}
.home-hero__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 5.4vmin, 52px);
    letter-spacing: 3px;
    color: #f4eee4;
    line-height: 1.3;
}
.home-hero__title span {
    display: block;
    background: linear-gradient(120deg, #e7c48c, #f9a8d4 60%, #c4b5fd);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-hero__sub {
    margin-top: 14px;
    font-size: clamp(13px, 1.9vmin, 15px);
    letter-spacing: 1.5px;
    color: rgba(185, 193, 226, .72);
}

/* 版本卡网格 */
.home-grid {
    position: relative; z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vmin, 26px);
    padding-bottom: 10px;
}
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .home-grid { grid-template-columns: 1fr; gap: 14px; }
    .home { overflow-y: auto; }
}

.vcard {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
    transition: transform .45s var(--ease-spring), box-shadow .45s ease, border-color .35s ease;
    animation: card-in .8s var(--ease-out) both;
}
.vcard:nth-child(1) { animation-delay: .12s; }
.vcard:nth-child(2) { animation-delay: .22s; }
.vcard:nth-child(3) { animation-delay: .32s; }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }

.vcard:hover, .vcard:focus-visible {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--v-accent) 55%, transparent);
    box-shadow: 0 38px 90px -30px color-mix(in srgb, var(--v-accent) 40%, rgba(0,0,0,.6));
    outline: none;
}
.vcard:active { transform: translateY(-3px) scale(.99); }

/* 预览区微动画 */
.vcard__preview {
    position: relative;
    height: 188px;
    overflow: hidden;
    border-radius: 23px 23px 0 0;
}
.vcard__fx { position: absolute; inset: 0; }

/* 星河卡 */
.vcard--starriver .vcard__preview {
    background:
        radial-gradient(80% 120% at 50% -20%, #1d2750, transparent 70%),
        linear-gradient(160deg, #0c1230, #0a0f22);
}
.vcard--starriver .vcard__fx::before,
.vcard--starriver .vcard__fx::after {
    content: "✦ 　　　✦　　　　✦　　✦ 　　　　　✦　　　✦ 　　✦ 　　　　✦ 　　✦";
    position: absolute; inset: 0;
    padding: 22px 18px;
    font-size: 13px; line-height: 2.4;
    color: rgba(231, 196, 140, .85);
    text-shadow: 0 0 10px rgba(231, 196, 140, .6);
    animation: star-blink 2.8s ease-in-out infinite;
    word-break: break-all;
}
.vcard--starriver .vcard__fx::after {
    color: rgba(210, 220, 255, .7);
    font-size: 9px;
    animation-delay: 1.2s;
    transform: translate(8px, 6px);
}
@keyframes star-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* 樱花卡 */
.vcard--sakura .vcard__preview {
    background: linear-gradient(160deg, #ffe3ee 0%, #ffd0c2 55%, #ffc4b8 100%);
}
.vcard--sakura .vcard__fx::before,
.vcard--sakura .vcard__fx::after {
    content: "";
    position: absolute; top: -24px;
    width: 16px; height: 13px;
    border-radius: 100% 0 100% 0;
    background: #f48fb1;
    box-shadow:
        40px 60px 0 -2px #f9b8d0,
        90px 30px 0 -4px #f7a5c4,
        150px 80px 0 -1px #f48fb1,
        200px 40px 0 -3px #ffd9e6,
        250px 70px 0 -5px #f9b8d0;
    animation: petal-drift 6.5s linear infinite;
}
.vcard--sakura .vcard__fx::after { animation-delay: 3.1s; transform: scale(.8); }
@keyframes petal-drift {
    0% { transform: translate(-30px, -20px) rotate(0deg); }
    100% { transform: translate(30px, 240px) rotate(420deg); }
}

/* 心跳卡 */
.vcard--heartbeat .vcard__preview {
    background:
        radial-gradient(90% 120% at 50% 120%, rgba(255,77,109,.22), transparent 65%),
        linear-gradient(160deg, #0d0d18, #07070f);
}
.vcard--heartbeat .vcard__fx::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 52%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, transparent 0%,
        rgba(255,77,109,.15) 8%, rgba(255,107,138,.95) 50%, rgba(255,77,109,.15) 92%, transparent 100%);
    background-size: 55% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 6px rgba(255,77,109,.9));
    animation: ecg-scan 2.4s linear infinite;
}
.vcard--heartbeat .vcard__fx::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 26px 26px;
}
@keyframes ecg-scan {
    0% { background-position: -60% 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { background-position: 130% 0; opacity: 0; }
}

.vcard__body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px 20px 22px;
    flex: 1;
}
.vcard__tag {
    font-size: 11px; letter-spacing: 3px;
    color: var(--v-accent);
    opacity: .85;
}
.vcard__name {
    font-family: var(--serif);
    font-size: 24px; font-weight: 600; letter-spacing: 2px;
    color: var(--glass-fg);
}
.vcard__desc {
    font-size: 13.5px; line-height: 1.75;
    color: var(--glass-fg-dim);
    flex: 1;
}
.vcard__go {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; letter-spacing: 2px;
    color: var(--v-accent);
    transition: gap .3s ease;
}
.vcard__go svg { width: 15px; height: 15px; fill: currentColor; }
.vcard:hover .vcard__go { gap: 12px; }

.home-foot {
    position: relative; z-index: 2;
    text-align: center;
    padding-top: 26px;
    font-size: 11.5px; letter-spacing: 2px;
    color: rgba(139, 147, 184, .55);
}

/* ============================================================
   顶部进度 + 控制条
   ============================================================ */
.progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2.5px;
    background: rgba(255, 255, 255, .08);
    z-index: 70;
    opacity: 0;
    transition: opacity .4s ease;
}
body[data-theme='sakura'] .progress { background: rgba(140, 74, 94, .1); }
.progress span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent), #f9a8d4);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .35s ease;
}
body.in-scene .progress { opacity: 1; }

.progress-text {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 16px;
    z-index: 70;
    font-size: 11px; letter-spacing: 2px;
    color: var(--glass-fg-dim);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
body.in-scene .progress-text { opacity: 1; }

.controls {
    position: fixed;
    top: max(10px, calc(env(safe-area-inset-top) - 4px));
    right: 12px;
    z-index: 70;
    display: flex; gap: 7px;
    opacity: 0; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .45s ease, transform .45s ease;
}
.controls.is-on { opacity: 1; pointer-events: auto; transform: none; }

.ctl {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--glass-fg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .2s ease, background .3s ease, color .3s ease;
}
.ctl svg { width: 17px; height: 17px; fill: currentColor; }
.ctl:hover { transform: translateY(-2px); }
.ctl:active { transform: scale(.92); }
.ctl .ic-play { display: none; }
.ctl.is-paused .ic-play { display: block; }
.ctl.is-paused .ic-pause { display: none; }
#btnSound.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* ============================================================
   覆盖层通用
   ============================================================ */
.overlay {
    position: fixed; inset: 0;
    z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}
.overlay.is-on { opacity: 1; visibility: visible; }

/* 引导 */
.overlay--intro {
    background: radial-gradient(120% 100% at 50% 30%, rgba(8,12,28,.5), rgba(4,6,14,.86));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
body[data-theme='sakura'] .overlay--intro {
    background: radial-gradient(120% 100% at 50% 30%, rgba(255,220,232,.5), rgba(255,205,214,.82));
}
.intro-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: clamp(32px, 5vmin, 52px) clamp(26px, 6vmin, 60px);
    border-radius: 28px;
    max-width: 420px;
    background: rgba(16, 21, 42, .55);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(26px) saturate(1.4);
    -webkit-backdrop-filter: blur(26px) saturate(1.4);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,.7);
    transform: translateY(18px) scale(.97);
    transition: transform .6s var(--ease-spring);
}
.overlay--intro.is-on .intro-card { transform: none; }
body[data-theme='sakura'] .intro-card {
    background: rgba(255,255,255,.72);
    border-color: rgba(255,255,255,.95);
}
.intro-card__tag {
    font-size: 11px; letter-spacing: 5px; color: var(--accent);
    margin-bottom: 14px;
}
.intro-card h2 {
    font-family: var(--serif);
    font-size: clamp(26px, 4vmin, 36px);
    font-weight: 600; letter-spacing: 4px;
    color: #f4eee4;
}
body[data-theme='sakura'] .intro-card h2 { color: #7c3f54; }
.intro-card__hint {
    margin-top: 20px; font-size: 15px; letter-spacing: 1px; line-height: 1.7;
    color: rgba(223, 229, 251, .9);
}
.intro-card__sub {
    margin-top: 6px; font-size: 12.5px; letter-spacing: 1px;
    color: rgba(185,193,226,.65);
}
body[data-theme='sakura'] .intro-card__hint { color: #8c4a5e; }
body[data-theme='sakura'] .intro-card__sub { color: rgba(140,74,94,.62); }
.intro-card__btn {
    margin-top: 30px;
    padding: 13px 52px;
    border-radius: 999px;
    font-size: 15px; font-weight: 700; letter-spacing: 8px; text-indent: 8px;
    color: #1a1408;
    background: linear-gradient(120deg, #f6ddb0, var(--accent));
    box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--accent) 70%, transparent);
    transition: transform .25s ease, box-shadow .25s ease;
}
body[data-theme='sakura'] .intro-card__btn { color: #fff; background: linear-gradient(120deg, #f48fb1, #e8709a); }
.intro-card__btn:hover { transform: translateY(-2px); }
.intro-card__btn:active { transform: scale(.96); }
.intro-card__esc {
    margin-top: 16px; font-size: 11px; letter-spacing: 2px;
    color: rgba(160,168,200,.55);
}
body[data-theme='sakura'] .intro-card__esc { color: rgba(140,74,94,.5); }

/* 暂停 */
.overlay--pause {
    background: rgba(5, 8, 16, .6);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}
body[data-theme='sakura'] .overlay--pause { background: rgba(120, 60, 80, .28); }
.pause-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 56px;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    transform: scale(.94);
    transition: transform .5s var(--ease-spring);
}
.overlay--pause.is-on .pause-card { transform: none; }
.pause-card__title {
    font-family: var(--serif);
    font-size: 26px; letter-spacing: 6px; color: var(--glass-fg);
}
.pause-card__sub { font-size: 12.5px; letter-spacing: 2px; color: var(--glass-fg-dim); }
.pause-card__btn {
    margin-top: 18px;
    padding: 11px 40px; border-radius: 999px;
    font-size: 14px; font-weight: 700; letter-spacing: 6px; text-indent: 6px;
    color: #1a1408;
    background: var(--accent);
}
body[data-theme='sakura'] .pause-card__btn { color: #fff; }

/* 终场 */
.overlay--finale {
    z-index: 75;
    background: radial-gradient(120% 100% at 50% 42%, rgba(10,13,28,.3), rgba(3,5,11,.82));
    cursor: default;
    text-align: center;
}
.finale-halo {
    position: absolute;
    width: min(82vmin, 640px); height: min(82vmin, 640px);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
    opacity: 0; transform: scale(.75);
    transition: opacity 1.3s ease .4s, transform 1.3s ease .4s;
}
.overlay--finale.is-on .finale-halo { opacity: 1; transform: scale(1); }
.finale-inner { position: relative; padding: 24px; }
.finale-eyebrow {
    font-size: 12px; letter-spacing: 7px;
    color: var(--accent);
    opacity: 0; transform: translateY(10px);
    transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.overlay--finale.is-on .finale-eyebrow { opacity: .9; transform: none; }
.finale-title {
    margin-top: 24px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(48px, 11vmin, 104px);
    letter-spacing: 12px;
    padding-left: 12px; /* 视觉居中补偿 letter-spacing */
    color: #f8f2e8;
    text-shadow: 0 0 70px color-mix(in srgb, var(--accent) 45%, transparent);
}
.finale-title span {
    display: inline-block;
    opacity: 0; transform: translateY(.45em);
    transition: opacity .8s ease, transform .9s var(--ease-spring);
}
.overlay--finale.is-on .finale-title span { opacity: 1; transform: none; }
.finale-title span:nth-child(1) { transition-delay: .35s; }
.finale-title span:nth-child(2) { transition-delay: .52s; }
.finale-title span:nth-child(3) { transition-delay: .69s; }
.finale-title span:nth-child(4) { transition-delay: .86s; }
.finale-sub {
    margin-top: 26px;
    font-family: var(--serif);
    font-size: clamp(13px, 2.1vmin, 17px);
    letter-spacing: 4px;
    color: rgba(223, 229, 251, .65);
    opacity: 0;
    transition: opacity .9s ease 1.15s;
}
.overlay--finale.is-on .finale-sub { opacity: 1; }
.finale-actions {
    margin-top: 42px;
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    opacity: 0; transform: translateY(10px);
    transition: opacity .8s ease 1.35s, transform .8s ease 1.35s;
}
.overlay--finale.is-on .finale-actions { opacity: 1; transform: none; }
.finale-btn {
    padding: 12px 34px;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 700; letter-spacing: 4px; text-indent: 4px;
    color: rgba(244,238,228,.9);
    border: 1px solid rgba(223,229,251,.25);
    transition: border-color .3s ease, background .3s ease, transform .25s ease;
}
.finale-btn:hover { transform: translateY(-2px); border-color: rgba(223,229,251,.5); }
.finale-btn:active { transform: scale(.97); }
.finale-btn--primary {
    color: #1a1408;
    border-color: transparent;
    background: linear-gradient(120deg, #f6ddb0, var(--accent));
}
body[data-theme='heartbeat'] .finale-btn--primary {
    color: #fff;
    background: linear-gradient(120deg, #ff6b8a, #e11d48);
}
body[data-theme='sakura'] .finale-btn--primary {
    color: #fff;
    background: linear-gradient(120deg, #f48fb1, #e8709a);
}

/* 黑场转场 */
.transition {
    position: fixed; inset: 0; z-index: 100;
    background: #04060d;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
    display: flex; align-items: center; justify-content: center;
}
.transition.is-on { opacity: 1; visibility: visible; }
.transition::after {
    content: "";
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(231,196,140,.25);
    border-top-color: var(--accent, #e7c48c);
    animation: spin 1s linear infinite;
    opacity: 0;
}
.transition.is-on::after { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   无障碍 / 减弱动态
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .15s !important;
    }
}