/* Supper Moment 扭蛋原型 — 参考 Oil UI“咔嗒 · 下班俱乐部”的编辑式展柜语言:
   暖纸底、平涂色块、硬边投影、等宽数字。品牌四色保留但压暗以配暖底。
   阻尼、声音、展柜是这版的三件手感核心。 */
:root {
  --paper: #efe9de;
  --paper-deep: #e3dbcb;
  --shell: #e8e2d7;
  --ink: #2f3532;
  --ink-soft: #565d57;
  --muted: #868c84;
  --line: #c8c0b1;
  --sup: #2b57a8;
  --per: #b35039;
  --mo: #6e7d63;
  --mo-deep: #4f5c46;
  --mo-light: #aab59d;
  --ment: #f8f5ed;
  --gold: #c9a45c;
  --gold-deep: #98703b;
  --night: #253040;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --hard: 0 4px 0 rgba(47, 53, 50, .88);
  --hard-sm: 0 3px 0 rgba(47, 53, 50, .8);
  --soft: 0 12px 26px rgba(74, 64, 49, .16);
  --radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #d6d1c7; color: var(--ink); }
body { display: flex; justify-content: center; gap: 5vw; padding: 52px 30px 72px; overflow-x: hidden; }
button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--sup); outline-offset: 3px; }
h1, h2, h3 { font-weight: 650; }
[hidden] { display: none !important; }

/* ---------- 桌面两侧说明 ---------- */
.presentation { width: min(230px, 21vw); flex: 0 0 min(230px, 21vw); }
.intro { padding-top: 30px; }
.wordmark { display: flex; font-weight: 800; font-size: 20px; letter-spacing: -.06em; }
.wordmark span:nth-child(1) { color: var(--sup); }
.wordmark span:nth-child(2) { color: var(--per); }
.wordmark span:nth-child(3) { color: var(--mo); }
.wordmark span:nth-child(4) { color: var(--ink); }
.intro-caption, .dock-label { margin: 22px 0 12px; color: #8f8878; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.intro h1 { margin: 0; font-size: clamp(34px, 4.6vw, 54px); line-height: .98; letter-spacing: -.06em; }
.intro h1 span { color: var(--per); }
.intro-description { color: #6c675c; line-height: 1.85; font-size: 13px; margin: 22px 0; }
.intro-rule { width: 34px; height: 3px; background: var(--per); }
.intro-foot { margin-top: 22px; color: #948c7d; font-size: 10px; letter-spacing: .1em; line-height: 1.9; }
.review-dock { align-self: flex-start; margin-top: 74px; }
.screen-links { display: grid; gap: 2px; }
.screen-links button { display: flex; align-items: center; gap: 10px; padding: 11px 10px; text-align: left; color: #79736a; font-size: 13px; border-radius: var(--radius); transition: background .16s, color .16s; }
.screen-links button span { color: #a8a294; font-family: var(--mono); font-size: 10px; }
.screen-links button i { margin-left: auto; font-style: normal; opacity: 0; }
.screen-links button:hover, .screen-links button.active { background: var(--ment); color: var(--ink); }
.screen-links button.active span { color: var(--per); font-weight: 700; }
.screen-links button.active i { opacity: 1; color: var(--per); }
.dock-line { height: 1px; background: var(--line); margin: 20px 0; }
.demo-buttons { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-buttons button, .reset-button { border: 1px solid var(--line); background: rgba(248, 245, 237, .7); border-radius: var(--radius); padding: 9px 6px; font-size: 11px; color: #5d5a51; transition: .16s; }
.demo-buttons button:hover, .reset-button:hover { background: var(--ment); border-color: var(--ink-soft); color: var(--ink); }
.dock-note { color: #7f7a6f; font-size: 11px; line-height: 1.8; margin: 14px 0; }
.reset-button { width: 100%; margin-top: 3px; }

/* ---------- 手机外壳 ---------- */
.phone { position: relative; width: 375px; flex: 0 0 375px; min-height: 812px; background: var(--shell); border: 1px solid #cdc5b6; border-radius: 16px; box-shadow: 0 26px 60px rgba(66, 58, 45, .26); overflow: hidden; isolation: isolate; }
.system-bar { height: 32px; padding: 9px 18px 0; display: flex; justify-content: space-between; font-size: 11px; position: relative; z-index: 10; font-family: var(--mono); }
.system-icons { display: flex; align-items: center; gap: 5px; font-size: 9px; }
.system-icons i { display: block; width: 16px; height: 9px; border: 1.5px solid var(--ink); border-radius: 2px; position: relative; }
.system-icons i:after { content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: var(--ink); }
.app-nav { height: 44px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.nav-brand { font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.wechat-capsule { width: 70px; height: 24px; border: 1px solid rgba(47, 53, 50, .2); border-radius: 99px; display: flex; align-items: center; justify-content: space-around; font-size: 11px; background: rgba(248, 245, 237, .6); }
.wechat-capsule span { width: 1px; height: 12px; background: var(--line); }
.wechat-capsule i { font-style: normal; font-size: 9px; }
.screen { min-height: 736px; padding: 0 17px 24px; position: relative; }
.screen-enter .screen:not([hidden]) { animation: screen-enter .3s ease-out both; }

/* ---------- 待机屏:次数 + 音效开关 ---------- */
.daily-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.daily-row strong { color: var(--per); font-family: var(--mono); font-size: 16px; }
.ticket-symbol { color: var(--per); font-size: 13px; }
.daily-text { flex: 1; }
.sound-button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; background: rgba(248, 245, 237, .75); color: var(--ink-soft); font-size: 10px; font-weight: 600; transition: .16s; }
.sound-button svg { width: 16px; height: 16px; display: block; color: var(--per); }
.sound-button .sound-off-icon { display: none; }
.sound-button.is-muted { color: var(--muted); border-style: dashed; }
.sound-button.is-muted svg { color: var(--muted); }
.sound-button.is-muted .sound-on-icon { display: none; }
.sound-button.is-muted .sound-off-icon { display: block; }
.sound-button:active { transform: translateY(1px); }

/* ---------- 期号与系列条 ---------- */
.series-heading { padding: 13px 0 0; }
.issue { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .12em; color: #8d8778; font-family: var(--mono); }
.series-heading h2 { margin: 7px 0 0; font-size: 30px; line-height: 1.02; letter-spacing: -.055em; }
.series-heading h2 span { color: var(--sup); }
.series-heading p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.series-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 11px 0 4px; }
.series-item { text-align: center; }
.series-item img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid var(--ment); box-shadow: 0 3px 6px rgba(74, 64, 49, .2); filter: grayscale(.85) brightness(.62) contrast(.95); }
.series-item.is-owned img { filter: none; }
.series-item p { margin: 4px 0 0; font-size: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.series-item.is-owned p { color: var(--ink); }

/* ---------- 扭蛋机 ---------- */
.machine-scene { height: 372px; position: relative; margin: 4px -17px 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
.scene-floor { position: absolute; left: -6%; right: -6%; bottom: 16px; height: 74px; background: linear-gradient(#d8d0c0, rgba(216, 208, 192, 0)); }
.machine-shadow { position: absolute; left: 50%; bottom: 26px; width: 250px; height: 26px; margin-left: -125px; border-radius: 50%; background: rgba(88, 76, 58, .22); filter: blur(11px); z-index: 1; }
/* 机身不吃指针事件,整块场景交给 .turn-pad,只把旋钮和出蛋口留在上层 */
/* 机身的晃动由 app.js 写 --shake-x/--shake-y,数值就是罩子的真实位移 */
.machine-object { --machine-scale: 1; position: absolute; z-index: 2; left: 50%; bottom: 34px; width: 300px; margin-left: -150px; height: 330px; pointer-events: none; transform: translate3d(var(--shake-x, 0px), var(--shake-y, 0px), 0) scale(var(--machine-scale)); transform-origin: 50% 100%; }
.glass-lid { position: absolute; left: 50%; top: 0; width: 236px; height: 24px; margin-left: -118px; border-radius: 50%; background: linear-gradient(#f4efe4, #ded5c4); border: 1px solid #c4bbaa; z-index: 3; }
.glass-dome { position: absolute; left: 50%; top: 12px; width: 244px; height: 152px; margin-left: -122px; border-radius: 122px 122px 22px 22px; overflow: hidden; background: linear-gradient(158deg, rgba(255, 255, 255, .9), rgba(226, 233, 236, .68) 46%, rgba(196, 208, 214, .74)); border: 2px solid rgba(255, 255, 255, .92); box-shadow: inset -14px -12px 26px rgba(94, 110, 118, .22), inset 8px 6px 18px rgba(255, 255, 255, .8), 0 10px 18px rgba(74, 64, 49, .13); }
.capsule-pile { position: absolute; inset: 3px; overflow: hidden; }
/* 每个胶囊的位置和角度都由 app.js 的圆体物理逐帧写进 transform,
   所以是"落下来堆住的":位置随机、互相压着、静止角度各不相同。 */
.capsule-body { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; background: linear-gradient(var(--cap-top, #c2705a) 0 49%, #f4efe4 51%); box-shadow: inset -6px -6px 10px rgba(70, 48, 34, .3), inset 5px 5px 9px rgba(255, 255, 255, .55), 0 3px 5px rgba(74, 64, 49, .16); }
.capsule-body:before { content: ""; position: absolute; top: 22%; left: 20%; width: 26%; height: 13%; border-radius: 50%; background: rgba(255, 255, 255, .62); filter: blur(1px); transform: rotate(-33deg); }
.glass-shine { position: absolute; top: 20px; left: 28px; width: 30px; height: 92px; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: rotate(22deg); filter: blur(5px); }
.dome-ring { position: absolute; left: 50%; top: 146px; width: 254px; height: 22px; margin-left: -127px; border-radius: 50%; background: linear-gradient(#d9d1c1, #c3baa8); border: 3px solid #b6ac99; box-shadow: inset 0 3px 3px #ece5d8; z-index: 3; }
.machine-body { position: absolute; left: 50%; top: 156px; width: 264px; height: 136px; margin-left: -132px; border-radius: 8px 8px 10px 10px; background: linear-gradient(150deg, #f0eadd, #e2d9c8 58%, #d6cbb6); border: 1px solid #c1b7a3; box-shadow: inset 0 5px 0 rgba(255, 255, 255, .6), 0 12px 16px rgba(74, 64, 49, .2); z-index: 2; }
.machine-body:before { content: ""; position: absolute; left: 9px; right: 9px; top: 10px; bottom: 9px; border: 1px solid rgba(120, 106, 84, .22); border-radius: 5px; }
.screw { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #b9ae99; box-shadow: inset 1px 1px rgba(90, 78, 60, .5); z-index: 4; }
.screw-tl { top: 12px; left: 12px; } .screw-tr { top: 12px; right: 12px; } .screw-bl { bottom: 11px; left: 12px; } .screw-br { bottom: 11px; right: 12px; }
.machine-logo { position: absolute; left: 24px; top: 26px; color: var(--ink); line-height: .88; transform: rotate(-3deg); }
.machine-logo strong { font-size: 16px; letter-spacing: -.07em; }
.machine-logo span { display: block; margin-top: 7px; font-size: 7px; letter-spacing: .14em; color: var(--muted); }

/* 旋钮:黄铜盘 + 进度环,手指在机身上,盘面始终可见 */
.knob-surround { position: absolute; right: 20px; top: 18px; width: 96px; height: 96px; border-radius: 50%; background: var(--per); border: 6px solid rgba(255, 255, 255, .34); box-shadow: inset 0 2px 5px rgba(90, 30, 24, .3); z-index: 6; pointer-events: none; }
.knob-arc { position: absolute; inset: -13px; width: calc(100% + 26px); height: calc(100% + 26px); transform: rotate(-90deg); overflow: visible; }
.knob-arc circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.knob-arc .arc-track { stroke: rgba(47, 53, 50, .16); }
.knob-arc .arc-fill { stroke: var(--ment); stroke-dasharray: 351.858; stroke-dashoffset: 351.858; transition: stroke .2s; }
.knob-arc .arc-fill.is-hot { stroke: var(--gold); }
.knob-ticks { position: absolute; inset: -5px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .5) 0 2deg, transparent 2deg 19deg); -webkit-mask: radial-gradient(transparent 0 45px, #000 46px); mask: radial-gradient(transparent 0 45px, #000 46px); }
.turn-arrow { position: absolute; right: -4px; top: -17px; color: var(--ink); opacity: .5; font-size: 17px; transform: rotate(-25deg); }
.knob { position: absolute; inset: 9px; border-radius: 50%; background: linear-gradient(145deg, #f2e4c4, #c9a45c 72%, #a9863f); border: 1px solid #f6ecd6; box-shadow: inset -5px -7px 9px rgba(120, 88, 34, .3), 0 4px 6px rgba(74, 64, 49, .3); transform: rotate(var(--angle, 0deg)); padding: 0; cursor: grab; touch-action: none; will-change: transform; pointer-events: auto; }
.knob.dragging, .is-turning .knob { cursor: grabbing; }
.knob-inner { position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(145deg, #f8eecf, #d9b46b); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .6); }
.knob-bar { position: absolute; left: 50%; top: 6px; width: 5px; height: 17px; border-radius: 4px; background: var(--ink); transform: translateX(-50%); }
.knob-bolt { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #8a6d31; transform: translate(-50%, -50%); }
.knob.is-hot .knob-inner { background: linear-gradient(145deg, #fbeec6, #e0be6f); }
.coin-slot { position: absolute; bottom: 16px; left: 23px; color: var(--muted); font-size: 7px; letter-spacing: .14em; text-align: center; font-family: var(--mono); }
.coin-slot i { display: block; width: 34px; height: 8px; border: 1px solid var(--line); border-radius: 99px; margin-bottom: 3px; }
.exit-mouth { position: absolute; right: 16px; bottom: 14px; width: 74px; height: 23px; border-radius: 4px; background: linear-gradient(#ded5c2, #cec4ae); border: 1px solid #bdb29c; box-shadow: inset 0 3px 4px rgba(88, 76, 58, .3); }
.exit-mouth span { display: block; width: 48px; height: 7px; background: #6f6754; border-radius: 99px; margin: 7px auto 0; box-shadow: inset 0 2px 3px rgba(38, 34, 24, .55); }
.machine-plinth { position: absolute; left: 50%; bottom: 12px; width: 250px; height: 22px; margin-left: -125px; border-radius: 4px 4px 3px 3px; background: linear-gradient(#cfc6b3, #bdb29c); border: 1px solid #a99e88; z-index: 2; }
.machine-plinth i { display: inline-block; width: 13px; height: 5px; border-radius: 99px; background: #9c917b; margin: 6px 4px; }
.catch-tray { position: absolute; z-index: 3; left: 50%; top: 278px; width: 156px; height: 36px; margin-left: -78px; border-radius: 3px 3px 14px 14px; background: linear-gradient(#efe8da, #cec5b2); border: 2px solid #b3a894; box-shadow: 0 6px 8px rgba(74, 64, 49, .18); }
.catch-tray:after { content: ""; position: absolute; left: 17px; right: 17px; top: 6px; height: 11px; border-radius: 50%; background: #b5ab97; box-shadow: inset 0 3px 4px rgba(72, 62, 46, .34); }
.take-egg { position: absolute; z-index: 7; left: 50%; top: 266px; margin-left: -35px; padding: 0; pointer-events: auto; will-change: transform; }
.take-egg .capsule { display: block; }
.egg-output { position: relative; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(var(--cap-top, #c2705a) 0 49%, #f4efe4 51%); border: 2px solid var(--ment); box-shadow: inset -8px -9px 13px rgba(88, 46, 34, .32), 0 8px 15px rgba(74, 64, 49, .24); }
.egg-output:after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .7); }
.capsule-label { position: absolute; inset: 23px 0 auto; text-align: center; color: #3d2a20; font-size: 6px; font-weight: 800; line-height: .92; transform: rotate(-15deg); }
.take-arrow { position: absolute; right: -28px; top: 20px; color: var(--per); font-size: 23px; animation: pulse-arrow 1s ease-in-out infinite; }

/* 拖动热区:覆盖整个机身,旋钮留在上方不被拇指遮住 */
.turn-pad { position: absolute; inset: 0; z-index: 1; touch-action: none; cursor: grab; }
.turn-pad.dragging { cursor: grabbing; }
.turn-ring { position: absolute; z-index: 1; left: 50%; bottom: 34px; width: 292px; height: 292px; margin-left: -146px; border-radius: 50%; border: 2px dashed rgba(47, 53, 50, .15); transition: border-color .25s, transform .25s; }
.is-turning .turn-ring { border-color: rgba(179, 80, 57, .42); transform: scale(1.035); }
.pad-hint { position: absolute; left: 0; right: 0; bottom: 13px; text-align: center; font-size: 12px; color: var(--ink-soft); letter-spacing: .02em; }
.pad-hint i { font-style: normal; color: var(--per); font-size: 17px; vertical-align: -2px; margin-right: 4px; }
.pad-hint.is-hidden { opacity: 0; transition: opacity .3s; }
.turn-pad.dragging .pad-hint, .is-turning .pad-hint { opacity: 0; }

/* 角度读数:固定在机身上方,拇指够不到的位置 */
.turn-readout { position: absolute; z-index: 8; pointer-events: none; top: 6px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(37, 48, 64, .93); color: var(--ment); font-size: 11px; box-shadow: 0 6px 14px rgba(37, 48, 64, .3); }
.turn-readout .readout-label { color: #a8b3c4; }
.turn-readout b { font-family: var(--mono); font-size: 15px; }
.turn-readout .readout-goal { font-family: var(--mono); color: #96a1b3; font-size: 10px; }
.turn-readout .readout-bar { display: block; width: 62px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.turn-readout .readout-bar i { display: block; width: 0; height: 100%; background: var(--gold); transition: width .08s linear; }
.turn-readout.is-hot { background: rgba(179, 80, 57, .95); }
.turn-readout.is-live { animation: readout-in .18s ease-out both; }

.machine-bottom { position: relative; z-index: 5; }
#machine-hint { margin: 0 0 11px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.book-entry { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ment); display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 14px; box-shadow: var(--hard-sm); transition: transform .16s; }
.book-entry:active { transform: translateY(3px); box-shadow: none; }
.book-entry span:first-child { display: flex; gap: 8px; align-items: center; font-weight: 650; }
.book-entry b { color: var(--per); font-family: var(--mono); }
.book-entry i { font-style: normal; color: var(--per); margin-left: 5px; }
.book-icon { width: 16px; height: 13px; border: 1.5px solid var(--ink); border-radius: 2px; position: relative; display: inline-block; }
.book-icon:after { content: ""; position: absolute; left: 4px; top: -2px; bottom: -2px; border-left: 1px solid var(--ink); }
.machine-bottom small { display: block; text-align: center; color: #9a9384; font-size: 9px; margin-top: 12px; }

/* ---------- 揭晓屏 ---------- */
.screen-top { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0 0; font-size: 11px; color: var(--muted); font-family: var(--mono); letter-spacing: .06em; }
.back-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--ment); font-size: 15px; line-height: 1; }
.top-right { margin-left: auto; }
.reveal-heading { padding: 10px 0 0; }
.reveal-heading p { margin: 0; font-size: 12px; color: var(--muted); }
.reveal-heading h2 { margin: 9px 0 8px; font-size: 25px; line-height: 1.14; letter-spacing: -.045em; }
.rarity-label { display: inline-block; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 10px; letter-spacing: .1em; color: var(--ink-soft); font-family: var(--mono); }
.reveal-screen.rare .rarity-label { border-color: var(--gold); color: var(--gold-deep); background: rgba(201, 164, 92, .12); }
.reveal-screen.hidden-variant .rarity-label { border-color: var(--per); color: var(--per); background: rgba(179, 80, 57, .1); }
.reveal-scene { position: absolute; inset: 148px 0 168px; }
.reveal-halo { position: absolute; top: 66px; left: 50%; width: 270px; height: 270px; margin-left: -135px; border-radius: 50%; background: radial-gradient(circle, rgba(248, 245, 237, .98), rgba(226, 219, 203, .6) 47%, rgba(232, 226, 215, 0)); }
.star-burst { position: absolute; z-index: 1; top: 46px; left: 50%; transform: translateX(-50%); color: rgba(201, 164, 92, .8); font-size: 48px; animation: twinkle 2.2s ease-in-out infinite; }
.confetti { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.reveal-screen.is-revealed .confetti { opacity: 1; }
.confetti:before, .confetti:after { content: "✦  ·  ✧   ·  ✦"; position: absolute; left: 20px; top: 112px; color: var(--per); font-size: 13px; letter-spacing: 14px; transform: rotate(-16deg); }
.confetti:after { left: auto; right: 17px; top: 172px; color: var(--mo); transform: rotate(15deg); }
.reveal-floor { position: absolute; bottom: 65px; left: 50%; width: 214px; height: 15px; margin-left: -107px; border-radius: 50%; background: rgba(88, 76, 58, .2); filter: blur(7px); }
.prize-shadow { position: absolute; bottom: 100px; left: 50%; width: 138px; height: 17px; margin-left: -69px; border-radius: 50%; background: rgba(88, 76, 58, .26); filter: blur(6px); }
.prize-object { position: absolute; bottom: 109px; left: 50%; transform: translateX(-50%); text-align: center; }
.prize-object img { display: block; width: 176px; height: 176px; border-radius: 50%; object-fit: cover; border: 4px solid var(--ment); box-shadow: 0 14px 22px rgba(74, 64, 49, .22); }
.badge-stand { width: 92px; height: 14px; border-radius: 50%; background: #b3a894; margin: -3px auto 0; box-shadow: inset 0 3px 4px rgba(72, 62, 46, .34); }
.sealed-egg { position: absolute; z-index: 3; bottom: 99px; left: 50%; width: 160px; height: 160px; margin-left: -80px; padding: 0; transition: opacity .3s, transform .5s cubic-bezier(.2, 1.3, .3, 1); }
.sealed-egg .egg-half { position: absolute; left: 0; width: 160px; height: 80px; border: 1px solid var(--ment); }
.egg-top { top: 0; border-radius: 90px 90px 8px 8px; background: radial-gradient(ellipse at 28% 37%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .07) 16%, transparent 35%), linear-gradient(140deg, var(--cap-light, #82a0d4), var(--cap-top, #4a6da8) 45%, var(--cap-deep, #2a4475)); box-shadow: inset 6px 4px 12px rgba(255, 255, 255, .34), inset -12px -8px 19px rgba(14, 30, 62, .5), 0 12px 21px rgba(74, 64, 49, .22); }
.egg-top span { display: block; margin: 28px 0 0; color: var(--ment); font-weight: 800; font-size: 10px; line-height: .92; transform: rotate(-9deg); }
.egg-top em { display: block; font-style: normal; font-weight: 400; font-size: 6px; margin-top: 5px; }
.egg-bottom { bottom: 0; border-radius: 8px 8px 90px 90px; background: radial-gradient(ellipse at 30% 9%, #fff 1%, #ece5d7 40%, #c9c0ad 80%, #a89e8a); box-shadow: inset 5px -4px 13px rgba(255, 255, 255, .4), inset -12px -15px 19px rgba(88, 76, 58, .28), 0 9px 18px rgba(74, 64, 49, .22); }
.sealed-egg .egg-top { transform: rotate(var(--twist, 0deg)); transform-origin: 50% 100%; transition: transform .14s; }
.sealed-egg .egg-bottom { transition: transform .7s cubic-bezier(.23, 1.25, .4, 1), opacity .45s; }
.egg-seam { position: absolute; left: -2px; top: 76px; width: 164px; height: 8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); }
.twist-arrow { position: absolute; right: -22px; top: 64px; font-size: 28px; color: var(--per); animation: pulse-arrow 1.1s infinite; }
.reveal-screen.is-opening .egg-top { transform: translate(-76px, -85px) rotate(-35deg); transition: transform .75s cubic-bezier(.2, 1.25, .4, 1), opacity .55s; opacity: .6; }
.reveal-screen.is-opening .egg-bottom { transform: translate(67px, 20px) rotate(25deg); opacity: .5; }
.reveal-screen.is-opening .egg-seam, .reveal-screen.is-opening .twist-arrow { opacity: 0; }
.reveal-screen.is-revealed .sealed-egg { opacity: 0; transform: translateY(18px) scale(.8); pointer-events: none; }
.reveal-screen.rare .reveal-halo { background: radial-gradient(circle, rgba(250, 240, 214, .98), rgba(201, 164, 92, .42) 47%, rgba(240, 232, 214, 0)); }
.reveal-screen.rare .prize-object img { border-color: var(--gold); box-shadow: 0 0 30px rgba(201, 164, 92, .55), 0 14px 22px rgba(74, 64, 49, .22); }
.reveal-screen.hidden-variant .reveal-halo { background: radial-gradient(circle, rgba(248, 226, 214, .98), rgba(179, 80, 57, .34) 47%, rgba(240, 226, 216, 0)); }
.reveal-screen.hidden-variant .prize-object img { border-color: var(--per); box-shadow: 0 0 34px rgba(179, 80, 57, .58), 0 14px 22px rgba(74, 64, 49, .22); }
/* 开壳前扭蛋必须把里面的徽章完全遮住:奖品、底座、投影、彩纸一律不出现,
   而且 #prize-image 在开壳前连 src 都不写(见 app.js prepareReveal),DOM 里也读不到。 */
.reveal-screen:not(.is-revealed) .star-burst,
.reveal-screen:not(.is-revealed) .prize-object,
.reveal-screen:not(.is-revealed) .prize-shadow,
.reveal-screen:not(.is-revealed) .confetti { visibility: hidden; opacity: 0; }
.reveal-screen.is-revealed .prize-object { animation: prize-in .52s cubic-bezier(.2, 1.2, .35, 1) both; }
.reveal-screen.is-revealed .prize-shadow { animation: prize-shadow-in .52s ease-out both; }
@keyframes prize-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.84); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes prize-shadow-in { from { opacity: 0; } to { opacity: 1; } }
.reveal-screen:not(.is-revealed) .reveal-halo { background: radial-gradient(circle, rgba(248, 245, 237, .95), rgba(226, 219, 203, .6) 50%, rgba(232, 226, 215, 0)); }
.reveal-bottom { position: absolute; z-index: 4; left: 17px; right: 17px; bottom: 22px; text-align: center; }
.reveal-note { margin: 0 0 12px; color: var(--ink-soft); font-size: 12px; }
.primary-button { width: 100%; min-height: 48px; border-radius: var(--radius); color: var(--ment); background: var(--ink); box-shadow: var(--hard-sm); font-size: 14px; font-weight: 650; transition: transform .16s, box-shadow .16s; }
.primary-button:active { transform: translateY(3px); box-shadow: none; }
.reveal-screen.rare .primary-button { background: var(--gold-deep); }
.text-button { display: block; margin: 12px auto 0; color: var(--ink-soft); font-size: 12px; }

/* ---------- 收藏册:展柜 ---------- */
.book-heading { padding: 8px 0 12px; }
.book-heading p { margin: 0; font-size: 11px; color: var(--muted); letter-spacing: .08em; font-family: var(--mono); }
.book-heading h2 { margin: 9px 0 14px; font-size: 25px; line-height: 1.12; letter-spacing: -.05em; }
.book-progress { height: 5px; border-radius: 99px; background: #ddd5c5; overflow: hidden; }
.book-progress:before { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: linear-gradient(90deg, var(--mo), var(--gold)); border-radius: 99px; transition: width .4s; }
.cabinet { position: relative; border: 8px solid var(--mo-deep); border-radius: 4px; background: linear-gradient(#b8c1a8, #a7b197); box-shadow: inset 6px 5px 15px rgba(52, 63, 44, .32), 7px 8px 0 rgba(79, 92, 70, .55), 10px 15px 24px rgba(74, 64, 49, .22); padding: 26px 10px 10px; }
.cabinet-title { position: absolute; top: 5px; left: 6px; right: 6px; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .16em; color: #eef2e6; font-family: var(--mono); }
.shelves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.shelf-item { position: relative; text-align: center; min-width: 0; padding: 6px 0 16px; border: 0; background: transparent; }
.shelf-item:after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 8px; height: 7px; background: linear-gradient(#dfe4c8 1px, #8d9a74 2px, #6f7c5c 6px); box-shadow: 0 5px 7px rgba(52, 63, 44, .3); }
.shelf-image { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--ment); box-shadow: 0 4px 8px rgba(52, 63, 44, .32); }
.shelf-item.is-locked .shelf-image { filter: grayscale(1) brightness(.4) sepia(.35); opacity: .3; }
.shelf-name { position: relative; z-index: 1; display: block; margin: 6px 0 0; font-size: 10px; color: #2c3624; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-status { position: relative; z-index: 1; display: block; margin-top: 2px; font-size: 9px; color: #a3542f; font-family: var(--mono); }
.shelf-item.is-locked .shelf-name { color: #4d5842; }
.shelf-item.is-locked .shelf-status { color: #6b7a5e; }
.hidden-compartment { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 9px; text-align: left; border-radius: 3px; border: 1px solid #8d9a74; background: linear-gradient(135deg, #7d8d69, #526448); color: #eef2e6; box-shadow: inset 2px 4px 8px rgba(40, 52, 34, .4); }
.hidden-art { position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(28, 36, 24, .35); overflow: hidden; }
.hidden-art img { width: 100%; height: 100%; object-fit: cover; }
.lock-shape { width: 16px; height: 13px; border: 2px solid #c3ccb4; border-radius: 2px; position: relative; }
.lock-shape:before { content: ""; position: absolute; left: 3px; top: -10px; width: 6px; height: 9px; border: 2px solid #c3ccb4; border-bottom: 0; border-radius: 6px 6px 0 0; }
.hidden-overline { color: #d8c48d; font-size: 8px; letter-spacing: .12em; font-family: var(--mono); }
.hidden-compartment h3 { margin: 4px 0 3px; font-size: 13px; }
.hidden-compartment p { margin: 0; color: #cfd8c4; font-size: 10px; }
.hidden-arrow { margin-left: auto; color: #d8c48d; font-size: 22px; }
.hidden-compartment.is-unlocked { background: linear-gradient(130deg, #2c3a4c, #1d2836); border-color: var(--gold); box-shadow: inset 2px 4px 8px rgba(10, 16, 26, .5), 0 0 0 1px rgba(201, 164, 92, .4); }
.hidden-compartment.is-unlocked .hidden-art { background: var(--ment); }
.hidden-compartment.is-unlocked .hidden-arrow { transform: rotate(45deg); color: var(--gold); }
.book-footer { margin: 14px 0 0; color: #948c7d; font-size: 11px; text-align: center; }
.detail-panel { position: absolute; z-index: 10; left: 17px; right: 17px; bottom: 18px; padding: 13px; border-radius: var(--radius); background: var(--ment); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(74, 64, 49, .26); display: grid; grid-template-columns: 60px 1fr; column-gap: 11px; align-items: center; }
.detail-panel img { grid-row: span 3; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.detail-panel p { margin: 0; color: var(--muted); font-size: 10px; }
.detail-panel h3 { margin: 3px 0; font-size: 15px; }
.detail-close { position: absolute; right: 6px; top: 3px; font-size: 19px; color: var(--muted); }

/* ---------- 反馈 ---------- */
.toast { position: absolute; z-index: 20; left: 50%; bottom: 20px; transform: translateX(-50%); background: rgba(37, 48, 64, .94); color: var(--ment); border-radius: 3px; padding: 8px 13px; font-size: 11px; white-space: nowrap; max-width: 90%; }
.home-indicator { position: absolute; z-index: 30; bottom: 6px; left: 50%; transform: translateX(-50%); width: 108px; height: 4px; border-radius: 99px; background: var(--ink); opacity: .5; }

/* ---------- 动效 ---------- */
@keyframes screen-enter { from { opacity: .4; translate: 9px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes readout-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pulse-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes twinkle { 0%, 100% { opacity: .45; transform: translateX(-50%) scale(.85); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } }
.is-drawing .machine-body { animation: machine-rattle .12s ease-in-out 5; }
@keyframes machine-rattle { 0%, 100% { translate: 0 0; } 50% { translate: 1px 1px; } }
.is-revealed.rare .star-burst, .is-revealed.hidden-variant .star-burst { animation: star-reveal .9s ease-out both; }
.is-revealed.normal .star-burst, .is-revealed.normal .confetti { display: none; }
@keyframes star-reveal { from { opacity: 0; transform: translateX(-50%) rotate(-30deg) scale(.4); } to { opacity: 1; transform: translateX(-50%) rotate(0) scale(1); } }

/* ---------- 窄屏 ---------- */
@media (max-width: 920px) {
  body { gap: 0; padding: 0; background: var(--shell); }
  .presentation { display: none; }
  .phone { flex: 0 0 100%; max-width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .screen { min-height: calc(100vh - 76px); }
}
@media (max-width: 360px) {
  .screen { padding-left: 13px; padding-right: 13px; }
  .series-strip { gap: 3px; }
  .series-item p { font-size: 7px; }
  .machine-scene { margin-left: -13px; margin-right: -13px; }
  .machine-object { --machine-scale: .94; }
  .turn-ring { width: 262px; height: 262px; margin-left: -131px; }
  .cabinet { padding-left: 8px; padding-right: 8px; }
  .shelves { gap: 14px 6px; }
  .shelf-name { font-size: 9px; }
  .series-heading h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .is-drawing .machine-body, .is-revealed .star-burst { animation: none !important; }
}