/**
 * [INPUT]: 依赖 index.html 的卡片正反面和 body[data-side] 状态
 * [OUTPUT]: 提供手机优先的光暗场景、翻转动画与闪膜效果
 * [POS]: site 的视觉层，主题过渡与卡片表面保持独立
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden; background: #07132d; color: #fff; }
button { font: inherit; }
.sky { position: fixed; inset: 0; pointer-events: none; transition: opacity 1s ease; }
.sky-light { background: radial-gradient(ellipse 70% 42% at 50% 58%, #3289e5 0%, #103b91 43%, transparent 95%), radial-gradient(circle at 50% 10%, #51bdf8 0%, #11336f 38%, #051026 84%); opacity: 1; }
.sky-dark { background: radial-gradient(ellipse 65% 43% at 50% 53%, #52205e 0%, #200b34 47%, transparent 96%), radial-gradient(circle at 50% 10%, #291338 0%, #0a0715 64%, #020208 100%); opacity: 0; }
body[data-side="dark"] .sky-light { opacity: 0; }
body[data-side="dark"] .sky-dark { opacity: 1; }
.stars { position: fixed; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(#a8d9ff 1px, transparent 1px); background-size: 101px 103px, 173px 167px; background-position: 15px 35px, 72px 81px; mask-image: linear-gradient(180deg,#000,transparent 80%); transition: filter 1s ease, opacity 1s ease; }
body[data-side="dark"] .stars { filter: hue-rotate(92deg); opacity: .27; }
.experience { isolation: isolate; position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 100svh; padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
.masthead { text-align: center; flex: 0 0 auto; }
.series { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .38em; text-indent: .38em; color: #b7dbff; transition: color 1s ease; }
body[data-side="dark"] .series { color: #ddb9e9; }
h1 { margin: 10px 0 5px; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; font-weight: 900; font-size: clamp(29px, 8vw, 42px); letter-spacing: .13em; text-indent: .13em; text-shadow: 0 0 24px #99d7ff80; }
body[data-side="dark"] h1 { text-shadow: 0 0 24px #a448d990; }
.realm-line { margin: 0; color: #c6e0ff; font-size: 12px; letter-spacing: .17em; transition: color 1s ease; }
body[data-side="dark"] .realm-line { color: #d8b7df; }
.card-stage { position: relative; flex: 1 1 auto; width: 100%; display: grid; place-items: center; min-height: 0; padding: 20px 0; perspective: 1200px; }
.aura { position: absolute; width: min(95vw, 520px); aspect-ratio: 1; background: radial-gradient(circle, #91deff65 0%, #387bdf24 44%, transparent 73%); filter: blur(10px); transform: translateY(8%); transition: background 1s ease, transform 1s ease; pointer-events: none; }
body[data-side="dark"] .aura { background: radial-gradient(circle, #9d3ac465 0%, #6d26782b 45%, transparent 73%); transform: translateY(8%) scale(1.2); }
.card { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; display: block; width: min(82vw, 395px, calc((100svh - 245px) * .667)); aspect-ratio: 2 / 3; border: 0; padding: 0; background: none; cursor: pointer; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; touch-action: none; -webkit-tap-highlight-color: transparent; outline-offset: 8px; }
.card-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 950ms cubic-bezier(.2,.66,.2,1); }
body[data-side="dark"] .card-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 5.2% / 3.5%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 21px 65px #0008, 0 0 0 1px #fff5 inset; }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-dark { transform: rotateY(180deg); box-shadow: 0 21px 80px #000d, 0 0 0 1px #b960db88 inset; }
.foil { position: absolute; inset: 0; display: block; background: linear-gradient(116deg, transparent 20%, #fff0 35%, #efffff78 49%, #bdeeff0a 56%, transparent 75%), conic-gradient(from 90deg at var(--gx) var(--gy), transparent, #a3fbff1e, #ff93cc2a, #d9fbfe16, transparent); background-position: calc((var(--gx) - 50%) * .35) 0, 0 0; mix-blend-mode: screen; opacity: .8; pointer-events: none; }
.face-dark .foil { background: linear-gradient(116deg, transparent 20%, #fff0 35%, #ffe7ff70 49%, #e38bff09 56%, transparent 75%), conic-gradient(from 90deg at var(--gx) var(--gy), transparent, #b155e832, #f184dd21, #b9b1ff22, transparent); }
.card-title { position: absolute; z-index: 2; left: 11%; right: 11%; bottom: 13.75%; display: grid; place-items: center; height: 6.8%; font-size: clamp(19px, 5.2vw, 27px); font-weight: 950; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 2px 2px #030918, 0 0 13px #dceeff; }
.light-title { color: #fff; }
.dark-title { bottom: 6.5%; left: 7%; right: 7%; height: 10%; border: 1px solid #d08cec99; background: linear-gradient(90deg,#120b1dde,#351142e8,#120b1dde); color: #f7e7ff; font-size: clamp(21px, 5.5vw, 29px); text-shadow: 0 0 15px #bb55e9; clip-path: polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%); }
.controls { flex: 0 0 auto; width: 100%; text-align: center; }
.hint { margin: 0 0 13px; color: #d9ebff; font-size: 12px; letter-spacing: .2em; }
.actions { display: flex; justify-content: center; gap: 10px; }
.action { min-height: 42px; border-radius: 999px; padding: 0 20px; border: 1px solid #d2eaff80; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .05em; transition: background .3s ease, transform .2s ease, border-color 1s ease; }
.action:active { transform: scale(.96); }
.action-primary { background: #e7f5ff; color: #10234d; box-shadow: 0 6px 25px #7cd4ff40; }
.action-secondary { background: #ffffff12; color: #fff; backdrop-filter: blur(8px); }
body[data-side="dark"] .action-primary { background: #edcef5; color: #280c34; box-shadow: 0 6px 25px #a03bc750; }
body[data-side="dark"] .action { border-color: #e3b9ee80; }
.motion-note { min-height: 16px; margin: 11px 0 0; color: #c7d7eea6; font-size: 11px; }
@media (max-height: 670px) { .experience { padding-top: 12px; padding-bottom: 13px; } h1 { margin: 5px 0 2px; font-size: 27px; } .card-stage { padding: 8px 0; } .card { width: min(70vw, 330px, calc((100svh - 175px) * .667)); } .motion-note { display: none; } }
@media (min-width: 700px) { .experience { padding-top: 35px; padding-bottom: 30px; } .card { width: min(36vw, 390px, calc((100svh - 240px) * .667)); } }
@media (prefers-reduced-motion: reduce) { .sky, .stars, .aura, .card-inner, .series, .realm-line, .action { transition-duration: .01ms; } }