@charset "UTF-8";
/* 色板唯一来源；转盘画布也从这里读色（main.js readTheme）。基调：暖白通透 · 墨字 · 一点胭脂。 */
:root{
  --bg:#fdfbf7; --bg-2:#f6efe3; --text:#2b2522; --muted:#8c8279; --title:#2b2522; --accent:#c0413a;
  --moon-1:#fffaf0; --moon-2:#f3e2c0; --moon-glow:#f5d9a066;
  --rim-1:#ead9b9; --rim-2:#d4bb8e; --rim-inner:#fffdf9; --sweep:#c0413ab3;
  --sec-a:#ffffff; --sec-b:#f7eedf; --sec-a-text:#2b2522; --sec-b-text:#2b2522; --sec-a-sub:#9a8f84; --sec-b-sub:#9a8672;
  --line:#e0cfb0; --peg:#c0413a;
  --hub-1:#d0514a; --hub-2:#a9312c; --hub-text:#fffaf3; --hub-sub:#fbe0da;
  --pointer:#2b2522; --pointer-dot:#c0413a;
  --spot:#fdfbf7e6; --card:#ffffff; --card-line:#2b252218; --btn:#c0413a; --btn-text:#fffaf3;
  --fx-1:#c0413a; --fx-2:#e2b35c; --fx-3:#f0d9a8;
  color-scheme:light;
}
:root{--serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
/* 手机适配：整页按可视高度分配——首屏标题区与转盘都随屏高伸缩，转盘尽量大但保证一屏放下。
   svh 不支持的旧浏览器（iOS 15.4 以下、部分安卓内置浏览器）回落到 vh。 */
:root{--vh:1vh;--hero-h:clamp(140px,calc(var(--vh) * 26),260px);--below:120px;
  --w:max(236px,min(88vw,420px,calc(var(--vh) * 100 - var(--hero-h) - var(--below))))}
@supports (height:100svh){:root{--vh:1svh}}
html,body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
body{min-width:300px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(90% 50% at 50% 0,var(--bg-2),var(--bg) 70%)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--text);outline-offset:4px}

.stage{position:relative;flex:1;display:flex;flex-direction:column;width:100%;overflow-x:hidden;overflow-x:clip;max-width:480px;margin:0 auto;
  padding:0 env(safe-area-inset-right) calc(20px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}

/* —— 首屏：淡月 + 横排标题 —— */
.hero{--moon:min(52vw,calc(var(--hero-h) * .86),220px);position:relative;flex:none;height:var(--hero-h);display:grid;place-items:center;text-align:center}
.moon{position:absolute;left:50%;top:50%;width:var(--moon);aspect-ratio:1;margin:calc(var(--moon) / -2) 0 0 calc(var(--moon) / -2);border-radius:50%;
  background:radial-gradient(circle at 40% 36%,var(--moon-1) 0,var(--moon-1) 35%,var(--moon-2) 100%);
  box-shadow:0 0 90px 30px var(--moon-glow);transition:transform 2.4s cubic-bezier(.2,.7,.2,1),opacity 1s}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.4;
  background:radial-gradient(circle at 64% 60%,var(--moon-2) 0 7%,transparent 8%),radial-gradient(circle at 32% 66%,var(--moon-2) 0 4%,transparent 5%)}
.stage.spinning .moon{transform:scale(1.08)}
.title{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.kicker{margin:0;font-size:12px;letter-spacing:.6em;padding-left:.6em;color:var(--accent)}
.title h1{margin:0;font:600 clamp(30px,min(11vw,calc(var(--hero-h) * .19)),48px)/1.1 var(--serif);letter-spacing:.14em;padding-left:.14em;color:var(--title)}
.title h1 span{display:block}
.title h1 .brand{margin-bottom:.35em;font:500 .4em/1.3 var(--serif);letter-spacing:.2em;padding-left:.2em;color:var(--accent)}
.title h1 .main{font-size:.86em;letter-spacing:.1em}
.tagline{margin:0;font:14px/1 var(--serif);letter-spacing:.5em;padding-left:.5em;color:var(--muted)}

.sound{position:absolute;right:14px;top:12px;display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px;border:1px solid var(--card-line);background:transparent;font-size:12px;color:var(--muted)}
.sound em{font-style:normal}
.sound-bars{display:flex;align-items:flex-end;gap:2px;height:10px}
.sound-bars i{width:2px;height:10px;background:currentColor;border-radius:1px;animation:eq 1s ease-in-out infinite}
.sound-bars i:nth-child(1){height:5px}.sound-bars i:nth-child(2){animation-delay:-.3s}.sound-bars i:nth-child(3){height:7px;animation-delay:-.6s}
.sound[aria-pressed="false"] .sound-bars i{animation:none;height:2px}
@keyframes eq{50%{transform:scaleY(.4)}}

/* —— 转盘 —— */
.wheel-zone{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:6px;text-align:center}
.wheel{position:relative;width:var(--w);aspect-ratio:1;margin:0 auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.halo{position:absolute;inset:-10%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--moon-glow) 0,transparent 68%);opacity:.8}
.rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,var(--rim-1),var(--rim-2) 25%,var(--rim-1) 50%,var(--rim-2) 75%,var(--rim-1));box-shadow:0 24px 50px #8a6a3a2e,0 4px 12px #8a6a3a1f}
.rim::after{content:"";position:absolute;inset:1.6%;border-radius:50%;background:var(--rim-inner)}
/* 外圈扫光：代替灯珠，转速越快扫得越快 */
.sweep{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 290deg,var(--sweep) 358deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 94.5%,#000 95% 99%,transparent 99.5%);mask:radial-gradient(circle closest-side,transparent 94.5%,#000 95% 99%,transparent 99.5%);
  animation:sweep 5s linear infinite}
.stage.spinning .sweep{animation:none}
@keyframes sweep{to{transform:rotate(360deg)}}
.disk{position:absolute;inset:4.6%;border-radius:50%;will-change:transform}
.disk canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
#disk-blur{opacity:0}

.pointer{position:absolute;left:50%;top:-2.4%;z-index:4;width:8.4%;height:13%;margin-left:-4.2%;transform-origin:50% 22%;filter:drop-shadow(0 3px 4px #2b252233)}
.pointer::before{content:"";position:absolute;inset:0;background:var(--pointer);clip-path:polygon(50% 100%,8% 30%,50% 0,92% 30%)}
.pointer i{position:absolute;left:50%;top:18%;width:32%;aspect-ratio:1;margin-left:-16%;border-radius:50%;background:var(--pointer-dot)}

.hub{position:absolute;left:50%;top:50%;z-index:5;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--hub-text);
  background:radial-gradient(circle at 38% 32%,var(--hub-1),var(--hub-2));
  box-shadow:0 0 0 6px var(--rim-inner),0 0 0 7px var(--line),0 10px 22px #a9312c44;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.hub b{font:600 clamp(28px,8vw,36px)/1 var(--serif)}
.hub small{font-size:11px;letter-spacing:.2em;color:var(--hub-sub)}
.hub:not(:disabled){animation:invite 2.6s ease-in-out infinite}
.hub:active:not(:disabled){transform:translate(-50%,-50%) scale(.92)}
.hub:disabled{cursor:default;animation:none}
@keyframes invite{0%,75%,100%{transform:translate(-50%,-50%)}87%{transform:translate(-50%,-50%) scale(1.05)}}

.status{min-height:24px;margin:24px 16px 6px;font:15px/1.6 var(--serif);letter-spacing:.1em;color:var(--text)}

.spotlight{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle calc(var(--r,200px)) at var(--cx,50%) var(--cy,60%),transparent 72%,var(--spot) 100%)}
.fx{position:fixed;inset:0;z-index:14;width:100%;height:100%;pointer-events:none}

/* —— 结果卡 —— */
.result{position:fixed;inset:0;z-index:15;display:grid;place-items:center;padding:24px 16px;background:#fdfbf7b8;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade .3s}
.result[hidden]{display:none}
.result-card{width:min(100%,330px);padding:34px 26px 22px;border-radius:18px;text-align:center;background:var(--card);border:1px solid var(--card-line);box-shadow:0 30px 70px #8a6a3a33;animation:pop .55s cubic-bezier(.2,1.3,.4,1)}
.result-kicker{margin:0;font:13px var(--serif);letter-spacing:.6em;color:var(--muted)}
.result-main{margin:14px 0 6px;font:600 60px/1.1 var(--serif);color:var(--accent)}
.result-card h2{margin:0;font:500 18px/1.5 var(--serif);letter-spacing:.14em;color:var(--title)}
.result-use{margin:14px 0 24px;padding-top:14px;border-top:1px solid var(--card-line);font-size:14.5px;line-height:1.75;color:var(--text)}
@keyframes pop{0%{transform:translateY(24px) scale(.94);opacity:0}100%{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}}
.btn-gold{width:100%;min-height:48px;border:0;border-radius:24px;font-size:15px;font-weight:500;letter-spacing:.3em;color:var(--btn-text);background:var(--btn)}

.noscript{text-align:center;padding:20px}
.sound{min-height:30px}
/* 矮屏（SE、带底栏的微信内置浏览器）：收紧文字间距，把高度让给转盘 */
@media (max-height:680px){:root{--below:100px;--hero-h:clamp(128px,calc(var(--vh) * 24),200px)}.status{margin:14px 16px 2px}.kicker{display:none}}
/* 横屏手机：左标题、右转盘，转盘按屏高取值 */
@media (orientation:landscape) and (max-height:540px){
  :root{--hero-h:calc(var(--vh) * 62);--w:max(200px,min(44vw,calc(var(--vh) * 100 - 150px)))}
  .stage{max-width:900px;flex-direction:row;align-items:center}
  .hero{flex:1;height:auto;align-self:stretch}
  .wheel-zone{flex:1;padding-top:14px}
  .status{margin:12px 16px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}