:root{--ink: #eef0ff;--ink-dim: rgba(238, 240, 255, .72);--violet: #a78bfa;--glass: rgba(20, 16, 48, .55);--glass-border: rgba(196, 181, 253, .28);font-size:16px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,-apple-system,sans-serif;color:var(--ink);overflow:hidden;line-height:1.6;background:radial-gradient(60% 80% at 78% 40%,rgba(64,120,255,.28),transparent 60%),radial-gradient(50% 60% at 12% 88%,rgba(52,158,220,.15),transparent 65%),radial-gradient(28% 34% at 6% 96%,rgba(88,180,240,.11),transparent 60%),radial-gradient(40% 50% at 85% 85%,rgba(34,211,238,.16),transparent 60%),linear-gradient(160deg,#171034,#0e0b26 45%,#0a1420)}#app{position:fixed;inset:0}#scene{position:absolute;inset:0;width:100%;height:100%}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(11,10,31,.5) 100%)}.pill{position:absolute;padding:10px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);font-size:.9rem;color:var(--ink-dim);white-space:nowrap}.toast{bottom:clamp(24px,5vh,48px);left:50%;transform:translate(-50%);animation:toast-in .3s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}.special-collector{position:fixed;left:clamp(16px,3vw,40px);bottom:clamp(16px,4vh,36px);z-index:4;width:48px;height:48px}.collector-toggle{position:relative;z-index:2;width:48px;height:48px;display:grid;place-items:center;color:#e4e6ffd1;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.13),transparent 30%),var(--glass);border:1px solid var(--glass-border);border-radius:50%;box-shadow:inset 0 1px #ffffff14,0 10px 34px #05031447;backdrop-filter:blur(14px);cursor:pointer;transition:color .18s ease,border-color .18s ease,transform .18s ease}.collector-toggle:hover{color:#fff;border-color:#cabeff94;transform:translateY(-1px)}.collector-toggle:active{transform:scale(.97)}.collector-toggle:focus-visible{outline:2px solid #b8a6ff;outline-offset:3px}.collector-toggle__bubble,.collector-toggle__sparkle,.collector-item__icon{display:block;background:currentColor;-webkit-mask:var(--mdi-icon) center / contain no-repeat;mask:var(--mdi-icon) center / contain no-repeat}.collector-toggle__bubble{width:28px;height:28px;opacity:.92}.collector-toggle__sparkle{position:absolute;top:6px;right:6px;width:12px;height:12px;color:#f4d9ff;filter:drop-shadow(0 0 4px rgba(218,183,255,.6))}.collector-tray{position:absolute;left:24px;bottom:0;width:min(680px,calc(50vw - 100px));min-width:0;height:48px;padding:0 14px 0 38px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;overflow:hidden;color:var(--ink-dim);background:linear-gradient(100deg,#271f4e94,#0e112eb8),#121231ad;border:1px solid var(--glass-border);border-radius:999px;box-shadow:inset 0 1px #ffffff0d,0 16px 48px #0503145c;backdrop-filter:blur(18px);clip-path:inset(0 100% 0 0 round 999px);opacity:0;pointer-events:none;transform:translate(-12px) scaleX(.97);transform-origin:left center;transition:clip-path .21s ease-in,opacity .16s ease-in,transform .19s ease-in}.special-collector[data-open=true] .collector-tray{clip-path:inset(0 round 999px);opacity:1;pointer-events:auto;transform:translate(0) scaleX(1);transition:clip-path .26s cubic-bezier(.16,1,.3,1),opacity .18s ease-out,transform .24s cubic-bezier(.16,1,.3,1)}.collector-copy{min-width:78px;display:grid;line-height:1.15}.collector-copy strong{color:#f5f4ffeb;font-size:.78rem;font-weight:500;letter-spacing:.04em}.collector-count{margin-top:3px;color:#dad8f4bd;font-size:.75rem;font-variant-numeric:tabular-nums;letter-spacing:.08em}.collector-items{position:relative;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(24px,1fr));align-items:center;gap:clamp(4px,.75vw,12px);list-style:none}.collector-items:before{content:"";position:absolute;z-index:0;left:7%;right:7%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(191,182,245,.22) 12%,rgba(139,158,229,.18) 88%,transparent);box-shadow:0 0 5px #978ee22e}.collector-item{--collector-accent: #c7b9ef;position:relative;z-index:1;justify-self:center;width:clamp(28px,2.25vw,36px);height:clamp(28px,2.25vw,36px);display:grid;place-items:center;color:#9e9bbe61;filter:saturate(.24);transition:color .22s ease,filter .22s ease,transform .22s ease}.collector-item__icon{width:82%;height:82%;filter:drop-shadow(0 0 3px rgba(126,122,160,.2))}.collector-item[data-collected=true]{color:var(--collector-accent);filter:saturate(.82) drop-shadow(0 0 5px color-mix(in srgb,var(--collector-accent),transparent 52%))}.collector-item[data-collected=true] .collector-item__icon{background:linear-gradient(135deg,#fff7fd 0%,var(--collector-accent) 46%,#b9d7ff 78%,#fff 100%);filter:drop-shadow(0 0 2px rgba(255,255,255,.72)) drop-shadow(0 0 6px color-mix(in srgb,var(--collector-accent),transparent 46%))}.collector-toggle.has-new{animation:collector-discovery .9s cubic-bezier(.16,1,.3,1)}.collector-item.is-discovered{animation:collector-item-discovery .76s cubic-bezier(.16,1,.3,1)}.special-collector.is-complete .collector-tray{border-color:#d4caff6b;box-shadow:inset 0 1px #ffffff14,0 12px 42px #6852b52e}@keyframes collector-discovery{0%,to{box-shadow:inset 0 1px #ffffff14,0 10px 34px #05031447}42%{box-shadow:inset 0 1px #ffffff2e,0 0 0 7px #a78bfa14,0 0 24px #977fef70}}@keyframes collector-item-discovery{0%{opacity:.45;transform:scale(.88)}55%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}@media (max-width: 900px){.collector-tray{gap:10px;padding-right:10px}.collector-copy{min-width:42px}.collector-copy strong{display:none}}.gear-btn{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,4vh,36px);width:46px;height:46px;display:grid;place-items:center;color:var(--ink-dim);background:var(--glass);border:1px solid var(--glass-border);border-radius:50%;backdrop-filter:blur(14px);cursor:pointer;transition:color .18s ease,transform .3s ease,border-color .18s ease}.gear-btn svg{width:22px;height:22px}.gear-btn:hover{color:#fff;border-color:var(--violet);transform:rotate(40deg)}.gear-btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px}.settings-panel{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(76px,12vh,96px);width:min(320px,calc(100vw - 32px));padding:20px 22px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(20px);box-shadow:0 18px 60px #0503148c}.settings-panel h2{font-size:1rem;font-weight:600;margin-bottom:12px}.settings-panel .row{display:flex;flex-direction:column;gap:6px;padding:8px 0;font-size:.88rem;color:var(--ink-dim);border-top:1px solid rgba(196,181,253,.12)}.settings-panel .row:first-of-type{border-top:none}.settings-panel .row>span{display:flex;justify-content:space-between;align-items:center}.settings-panel .row b{color:var(--ink);font-weight:500}.settings-panel .row.dim{opacity:.45}.settings-panel .row:has(input[type=checkbox]),.settings-panel .row:has(select){flex-direction:row;justify-content:space-between;align-items:center}.settings-panel input[type=range]{width:100%;accent-color:var(--violet);cursor:pointer}.settings-panel input[type=checkbox]{width:18px;height:18px;accent-color:var(--violet);cursor:pointer}.settings-panel select{font:inherit;font-size:.85rem;color:var(--ink);background:#1e1646e6;border:1px solid var(--glass-border);border-radius:8px;padding:4px 8px;cursor:pointer}.settings-panel .actions{display:flex;gap:10px;margin-top:14px}.settings-panel .actions button{flex:1;font:inherit;font-size:.85rem;color:var(--ink-dim);padding:9px 0;background:#6d4ae02e;border:1px solid var(--glass-border);border-radius:999px;cursor:pointer;transition:color .16s ease,background .16s ease}.settings-panel .actions button:hover{color:#fff;background:#6d4ae066}.overlay-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 48px));padding:32px;text-align:center;border-radius:24px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(20px)}.overlay-panel h2{margin-bottom:8px}.overlay-panel p{color:var(--ink-dim);font-size:.95rem}@media (prefers-reduced-motion: reduce){.gear-btn{transition:none}.collector-toggle,.collector-tray,.collector-item{animation:none!important;transition:none!important}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)}}}