html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; background:#070711; overscroll-behavior:none; }
button { font:inherit; border:0; outline:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
.stage { width:100%; height:100vh; height:100dvh; overflow:hidden; background:#070711; }
.stage { position:relative; height:100vh; display:flex; flex-direction:column; isolation:isolate; color:#eee0c3; }
.ambient { position:absolute; width:93.33333vw; height:93.33333vw; border-radius:50%; pointer-events:none; z-index:-1; }
.ambient-a { background:radial-gradient(circle,rgba(81,50,134,.23),transparent 70%); top:5%; left:-21.33333vw; }
.ambient-b { background:radial-gradient(circle,rgba(147,116,57,.13),transparent 70%); right:-34.66667vw; bottom:6%; }
.stars-bg { position:absolute; inset:0; z-index:-1; opacity:.16; background-image:radial-gradient(#dfc898 1px,transparent 1px); background-size:11.06667vw 12.13333vw; }
.top-safe { flex-shrink:0; padding:calc(env(safe-area-inset-top) + 12.26667vw) 4.66667vw 0; text-align:center; }
.eyebrow,.subbrand,.deck-label,.card-number,.status-line,.privacy-note,.result-top {letter-spacing:0.26667vw;}
.eyebrow { font-size:2.53333vw; color:#bda777; }
.brand { margin-top:2.4vw; font-size:8.26667vw; font-family:"Songti SC","STSong",serif; font-weight:600; letter-spacing:1.06667vw; color:#efe1bf; }
.subbrand { margin-top:1.6vw; color:#a99db5; font-size:2.93333vw; }
.status-line { margin-top:3.06667vw; display:flex; align-items:center; justify-content:center; gap:1.6vw; font-size:2.66667vw; color:#ada9af; }
.status-dot { color:#ceac75; font-size:2.4vw; }
.visual-core { position:relative; width:100%; flex:1; min-height:58.66667vw; display:flex; flex-direction:column; justify-content:center; align-items:center; flex-shrink:1; }
.ring { position:absolute; left:50%; top:48%; border-radius:50%; pointer-events:none; transition:transform 230ms cubic-bezier(.16,.8,.32,1); }
.ring-outer { width:76vw; height:76vw; border:0.13333vw solid rgba(212,183,132,.14); }
.ring-middle { width:62vw; height:62vw; border:0.13333vw dashed rgba(212,183,132,.16); }
.ring-inner { width:44vw; height:44vw; border:0.13333vw solid rgba(212,183,132,.10); transform:translate(-50%,-50%); }
.cross-star { position:absolute; top:1.6vw; font-size:4.8vw; color:#c7ab78; }
.deck-label { color:#c1a67d; font-size:2.4vw; margin-bottom:4.26667vw; z-index:1; display:flex; gap:1.86667vw; align-items:center; }
.step-index { font-size:2.26667vw; color:#93849a; letter-spacing:0.13333vw; }
.deck-scroll { width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; scroll-snap-type:x proximity; height:35.73333vw; position:relative; z-index:2; white-space:nowrap; }
.deck-scroll::-webkit-scrollbar { display:none; }
.deck-line { display:inline-flex; height:35.73333vw; align-items:center; gap:0; padding:0 0.93333vw 0 2.66667vw; white-space:nowrap; box-sizing:border-box; }
.virtual-gap { height:0.13333vw; flex-shrink:0; pointer-events:none; }
.card-slot { scroll-snap-align:center; width:16.53333vw; margin-right:1.73333vw; height:33.6vw; position:relative; flex-shrink:0; text-align:center; display:flex; align-items:center; flex-direction:column; justify-content:flex-start; padding-top:1.33333vw; box-sizing:border-box; }
.card-card { position:relative; width:16.53333vw; height:27.6vw; border-radius:1.06667vw; overflow:visible; box-shadow:0 1.6vw 3.06667vw rgba(0,0,0,.55); transition:transform 250ms ease,box-shadow 250ms ease,opacity 250ms; transform-origin:50% 92%; border:0.13333vw solid #665779; box-sizing:border-box; }
.card-image { display:block; width:100%; height:100%; border-radius:0.93333vw; }
.tilt-0 .card-card {transform:translateY(1.2vw) rotate(-5deg)}
.tilt-1 .card-card {transform:translateY(0.4vw) rotate(-2deg)}
.tilt-2 .card-card {transform:translateY(0) rotate(0deg)}
.tilt-3 .card-card {transform:translateY(0.4vw) rotate(2deg)}
.tilt-4 .card-card {transform:translateY(1.2vw) rotate(5deg)}
.card-slot .card-card.selected { transform:translateY(-2.4vw) scale(1.07) rotate(0deg); box-shadow:0 0 4.26667vw rgba(200,159,255,.68), 0 2.13333vw 4.26667vw #000; border-color:#e7c998; }
.picked-marker { position:absolute; top:-2.4vw; right:-1.73333vw; display:flex; justify-content:center; align-items:center; width:4.93333vw; height:4.93333vw; border-radius:50%; background:#dec38d; color:#211b27; font-size:2.8vw; border:0.4vw solid #100c1b; box-shadow:0 0 2.4vw rgba(236,213,145,.6); }
.card-number { color:#9d8f9c; margin-top:1.73333vw; font-size:2.4vw; }
.deck-hint { font-size:2.66667vw; color:#b3a7bd; text-align:center; margin-top:2.13333vw; z-index:2; }
.wheel-teeth { position:absolute; width:62%; height:1.46667vw; bottom:6vw; opacity:.35; border-top:0.13333vw solid #c4a674; background:repeating-linear-gradient(90deg,rgba(211,179,123,.75) 0vw,rgba(211,179,123,.75) 0.26667vw,transparent 0.26667vw,transparent 2.13333vw); }
.bottom-panel { flex-shrink:0; width:100%; box-sizing:border-box; padding:0.66667vw 5.73333vw calc(env(safe-area-inset-bottom) + 4.53333vw); text-align:center; }
.bottom-title { font-size:4.26667vw; font-family:"Songti SC","STSong",serif; color:#e9d7b3; letter-spacing:0.53333vw; }
.bottom-note { font-size:2.66667vw; color:#a79aad; line-height:1.7; margin-top:1.33333vw; }
.selected-head { font-size:2.93333vw; color:#b9a8bc; margin-top:2.26667vw; text-align:left; }
.count-strong { color:#ecd7a5; font-size:3.86667vw; margin:0 0.4vw; }
.selected-scroll { width:100%; height:10.4vw; margin-top:0.93333vw; white-space:nowrap; border-bottom:0.13333vw solid rgba(217,198,153,.11); }
.selected-row { display:inline-flex; min-width:100%; height:8.8vw; align-items:center; gap:1.33333vw; }
.empty-selected { color:#6f6879; font-size:2.53333vw; padding:1.06667vw 0; }
.selected-chip { display:inline-flex; align-items:center; gap:1.06667vw; border:0.13333vw solid rgba(219,191,155,.45); border-radius:3.46667vw; padding:1.2vw 1.73333vw; color:#e2d2be; background:rgba(164,123,180,.11); font-size:2.53333vw; flex-shrink:0; }
.chip-number {background:#cbb88e;color:#211927;border-radius:50%;width:3.2vw;height:3.2vw;text-align:center;line-height:3.2vw;font-size:2.26667vw;}
.chip-remove { color:#a68cb0; font-size:3.33333vw; line-height:2.66667vw; }
.actions { display:flex; gap:2.13333vw; justify-content:center; margin-top:2.66667vw; }
.primary-btn,.secondary-btn { margin:0; height:10.4vw; display:flex; align-items:center; justify-content:center; font-size:3.06667vw; border-radius:1.2vw; white-space:nowrap; padding:0 2.93333vw; font-weight:500; transition:background 180ms ease, opacity 180ms, transform 180ms,box-shadow 180ms; }
.primary-btn { color:#1d1624; background:linear-gradient(130deg,#ebd5a7,#bfa6d5); flex:1.2; box-shadow:0 1.06667vw 3.73333vw rgba(129,97,145,.17); }
.primary-disabled { opacity:.54; }
.primary-pressed { opacity:.65; transform:scale(.96); }
.secondary-btn { color:#dbcda7; background:rgba(255,255,255,.055); border:0.13333vw solid rgba(207,185,145,.38); flex:1; }
.secondary-pressed,.shuffle-pressed { background:rgba(198,172,126,.25); opacity:.48; transform:scale(.97); }
.shuffle-feedback {font-size:2.4vw;color:#ab95ad;margin-top:1.86667vw;min-height:3.46667vw;}
.privacy-note { margin-top:1.2vw; color:#756d7f; font-size:2.26667vw; }
.shuffle-overlay { position:absolute; inset:0; z-index:30; background:rgba(7,7,18,.87); display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0; transition:opacity 160ms; }
.shuffle-show { opacity:1; }
.shuffle-symbol { color:#d8bba1; font-size:13.33333vw; line-height:18.66667vw; animation:spin 1s linear infinite; }
.shuffle-copy { color:#e9d7b3; font-size:3.73333vw; letter-spacing:0.66667vw; margin-top:2.4vw; }
.shuffle-progress { width:34.66667vw; height:0.4vw; background:#34283a; overflow:hidden; margin-top:4.66667vw; }
.shuffle-bar { width:100%;height:100%; background:#e2c893; transform-origin:left center; animation:fill 1.05s ease-out both; }
@keyframes spin {0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes fill {0%{transform:scaleX(.02)}100%{transform:scaleX(1)}}
.result-mask {position:absolute;inset:0;z-index:20;background:radial-gradient(ellipse at 50% 25%,#261b38 0%,#080811 65%);display:flex;flex-direction:column;}
.reading-scroll {flex:1;height:0;}
.reading-inner {padding:calc(env(safe-area-inset-top) + 13.06667vw) 5.06667vw 0;text-align:center;}
.result-top {font-size:2.53333vw;color:#c9b07b;}
.reading-name {color:#eedbbc;font-size:5.73333vw;letter-spacing:0.4vw;margin-top:2.4vw;font-family:"Songti SC","STSong",serif;}
.reading-intro {color:#a69ab2;font-size:2.8vw;margin-top:1.73333vw;}
.spread-row {display:flex;justify-content:center;gap:1.2vw;align-items:flex-start;margin:4.66667vw auto 3.33333vw;width:100%;}
.spread-card {flex:1;min-width:0;max-width:22vw;}
.spread-img {width:100%;height:28vw;filter:drop-shadow(0 1.06667vw 1.06667vw rgba(0,0,0,.3));}
.spread-seq {color:#ba9eaa;font-size:2.26667vw;line-height:1.5;margin-top:1.06667vw;}
.section-ornament {color:#c3a679;font-size:2.53333vw;letter-spacing:0.53333vw;margin:3.86667vw auto 2.26667vw;}
.combo-summary {color:#e3d1c3;font-size:3.06667vw;line-height:1.95;text-align:left;}
.combo-link {background:rgba(184,154,197,.07);border:0.13333vw solid rgba(190,166,126,.16);border-radius:1.6vw;padding:3.33333vw 2.93333vw;margin-top:3.46667vw;text-align:left;}
.reading-subtitle {color:#d6bc8f;font-family:"Songti SC","STSong",serif;font-size:3.86667vw;margin-bottom:2.26667vw;}
.combo-text {color:#c6bac9;font-size:2.93333vw;line-height:1.9;white-space:pre-line;}
.detail-header {margin:5.2vw auto 2.66667vw;text-align:center;}
.card-reading {border-top:0.13333vw solid rgba(228,198,159,.19);padding:3.86667vw 0.66667vw;text-align:left;}
.detail-top {display:flex;align-items:baseline;justify-content:space-between;gap:1.6vw;}
.detail-index {color:#a293a8;font-size:2.53333vw;}
.detail-name {color:#f0d8ab;font-size:3.86667vw;font-family:"Songti SC","STSong",serif;}
.detail-theme {font-size:3.06667vw;color:#d5b4d8;margin-top:1.33333vw;}
.detail-text {color:#ddd1da;font-size:2.93333vw;line-height:1.85;margin-top:2.13333vw;}
.detail-question {color:#bda584;font-size:2.8vw;line-height:1.8;margin-top:1.6vw;}
.action-prompt {background:rgba(203,172,135,.10);border-left:0.53333vw solid #c2a470;color:#dfcdbc;text-align:left;font-size:2.93333vw;line-height:1.85;padding:2.8vw;margin-top:2.4vw;}
.disclaimer {color:#786e81;font-size:2.4vw;line-height:1.65;margin-top:3.33333vw;}
.result-end-space {height:6vw;}
.result-footer {flex-shrink:0;padding:2.13333vw 5.6vw calc(env(safe-area-inset-bottom) + 3.2vw);background:rgba(10,9,20,.97);border-top:0.13333vw solid rgba(217,198,153,.16);}
.reset-result {width:100%;height:11.46667vw;}
@media screen and (max-height:700px) {
 .top-safe {padding-top:calc(env(safe-area-inset-top) + 7.33333vw);}
 .brand {font-size:6.8vw;margin-top:1.33333vw;}
 .status-line {margin-top:1.6vw;}
 .visual-core {min-height:48vw;}
 .deck-label {margin-bottom:1.73333vw;}
 .deck-scroll,.deck-line {height:32.66667vw;}
 .wheel-teeth {bottom:0.66667vw;}
 .bottom-panel {padding-bottom:calc(env(safe-area-inset-bottom) + 2.53333vw);}
 .bottom-note {margin-top:0.4vw;}
 .selected-scroll {height:8.53333vw;}
 .selected-head {margin-top:0.93333vw;}
 .actions {margin-top:1.33333vw;}
 .shuffle-feedback {margin-top:0.93333vw;}
}

/* PWA-specific controls */
.install-link { display:block; margin:7px auto 0; padding:5px 12px; color:#cbb88e; background:transparent; font-size:12px; letter-spacing:1px; opacity:.85; }
.install-link:active { opacity:.55; transform:scale(.97); }
.install-modal { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,5,13,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.install-modal[hidden], .result-mask[hidden] { display:none !important; }
.install-dialog { position:relative; width:100%; max-width:420px; padding:34px 25px 27px; border:1px solid rgba(211,183,132,.35); border-radius:18px; background:radial-gradient(ellipse at 50% 0%,#2a1e3a,#100d1b 72%); box-shadow:0 24px 80px rgba(0,0,0,.5); text-align:center; }
.modal-close { position:absolute; top:8px; right:12px; width:34px; height:34px; color:#d7c5a8; background:transparent; font-size:27px; }
.modal-star { color:#d4b982; font-size:34px; }
.install-dialog h2 { margin:12px 0 14px; color:#efdfbf; font-family:"Songti SC","STSong",serif; font-size:24px; font-weight:600; }
.install-dialog p { color:#c8bacb; font-size:14px; line-height:1.85; }
.install-note { margin-top:18px; color:#93879c !important; font-size:12px !important; }
.install-action { width:100%; margin-top:15px; }
.card-slot { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.card-card { will-change:transform; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.card-slot { appearance:none; -webkit-appearance:none; border:0; padding:1.33333vw 0 0; background:transparent; color:inherit; font:inherit; }
.card-slot:focus-visible { outline:1px solid rgba(230,202,151,.75); outline-offset:3px; border-radius:8px; }
.shuffle-overlay { pointer-events:none; }
.shuffle-show { pointer-events:auto; }
[hidden] { display:none !important; }
.toast { position:absolute; z-index:80; left:50%; bottom:calc(env(safe-area-inset-bottom) + 23vw); transform:translate(-50%,10px); max-width:85%; padding:11px 17px; border:1px solid rgba(218,190,143,.35); border-radius:22px; color:#efe1c8; background:rgba(32,25,42,.94); font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; white-space:nowrap; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.toast-show { opacity:1; transform:translate(-50%,0); }
h1.brand { margin-bottom:0; }
.reading-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
.selected-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.selected-scroll::-webkit-scrollbar, .reading-scroll::-webkit-scrollbar { display:none; }