:root{color:#fff8dc;background:#080b24;font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}button{border:0;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.96)}.app-shell{min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:radial-gradient(circle at 18% 12%,rgba(255,181,94,.26),transparent 28%),radial-gradient(circle at 80% 18%,rgba(116,221,207,.22),transparent 30%),linear-gradient(160deg,#0d1645,#28125a 46%,#073c56)}.phone-frame{position:relative;width:min(100vw,430px);min-height:100svh;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,rgba(255,245,181,.12),transparent 24%),radial-gradient(circle at 50% 8%,rgba(255,120,102,.28),transparent 30%),linear-gradient(180deg,#12184a,#34206e 54%,#06475f)}.totem-bg,.totem-bg:before,.totem-bg:after{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1}.totem-bg{opacity:.72;background-image:linear-gradient(30deg,transparent 42%,rgba(255,228,134,.12) 43% 46%,transparent 47%),linear-gradient(150deg,transparent 42%,rgba(113,224,208,.12) 43% 46%,transparent 47%);background-size:68px 68px;animation:driftPattern 16s linear infinite}.totem-bg:before{content:"";background:repeating-conic-gradient(from 45deg,rgba(255,190,100,.12) 0 15deg,transparent 15deg 45deg),radial-gradient(circle,transparent 0 42%,rgba(255,255,255,.1) 43% 46%,transparent 47%);background-size:130px 130px,120px 120px;-webkit-mask-image:linear-gradient(#000,transparent 72%);mask-image:linear-gradient(#000,transparent 72%)}.totem-bg:after{content:"";inset:auto -40px -90px;height:250px;background:radial-gradient(circle at 50% 0,rgba(255,224,138,.3),transparent 28%),repeating-radial-gradient(circle at 50% 100%,rgba(116,221,207,.18) 0 12px,rgba(255,127,114,.12) 13px 21px,transparent 22px 34px)}.screen{position:relative;min-height:100svh;padding:28px 20px 24px}.eyebrow{margin:0 0 8px;color:#8ff0df;font-size:13px;font-weight:800;letter-spacing:0}h1,h2,h3,p{margin-top:0}h1{max-width:320px;margin-bottom:12px;font-size:42px;line-height:1.04;letter-spacing:0;color:#fff1a7;text-shadow:0 0 22px rgba(255,173,88,.42)}h2{margin-bottom:16px;font-size:30px;line-height:1.12;color:#fff1a7}.start-screen{display:flex;flex-direction:column;justify-content:center}.brand-mark{width:68px;height:68px;display:grid;place-items:center;margin-bottom:20px;border:1px solid rgba(255,238,154,.72);border-radius:22px;color:#20144b;font-size:20px;font-weight:900;background:linear-gradient(135deg,#ffe68c,#ff8767 52%,#70ded3);box-shadow:0 0 32px #ffb45f7a}.intro{max-width:300px;margin-bottom:20px;color:#fffadad6;font-size:16px;line-height:1.7}.hero-orbit{position:relative;width:100%;height:252px;margin:2px 0 22px}.hero-orbit:before{content:"";position:absolute;top:36px;right:54px;bottom:18px;left:54px;border-radius:999px;border:1px dashed rgba(255,238,154,.34);box-shadow:inset 0 0 40px #74ddcf2e}.hero-orbit img{position:absolute;width:112px;height:178px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 20px rgba(7,8,32,.42));animation:floatBeast 3.6s ease-in-out infinite}.primary-btn,.ghost-btn{width:100%;min-height:54px;border-radius:999px;cursor:pointer;font-size:17px;font-weight:900;transition:transform .18s ease,filter .18s ease}.primary-btn{color:#20144b;background:linear-gradient(135deg,#fff09d,#ff9b60 50%,#73e0d3);box-shadow:0 0 24px #ffc46375,inset 0 1px #fff9}.ghost-btn{color:#fff3b4;background:#ffffff14;border:1px solid rgba(255,242,173,.36);box-shadow:inset 0 0 20px #ffffff0d}.primary-btn:hover,.ghost-btn:hover{filter:brightness(1.08)}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:18px}.role-card{position:relative;min-height:202px;padding:12px 10px 14px;overflow:hidden;cursor:pointer;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent),transparent 42%);background:linear-gradient(160deg,#ffffff2e,#ffffff0d),radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent),transparent 54%),transparent 42%);box-shadow:0 14px 30px #07082057,inset 0 0 22px #ffffff14;transition:transform .2s ease,box-shadow .2s ease}.role-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 36px #07082061,0 0 24px color-mix(in srgb,var(--accent),transparent 48%)}.role-token{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:#23154e;font-size:13px;font-weight:900;background:linear-gradient(135deg,#fff1a7,var(--accent))}.role-card img{display:block;width:100%;height:132px;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(2,4,20,.34))}.role-card strong,.role-card span:not(.role-token){display:block;text-align:left}.role-card strong{margin-top:8px;color:#fff1a7;font-size:17px}.role-card span:not(.role-token){margin-top:4px;color:#ffffffc2;font-size:12px}.game-screen{padding:16px 14px 0}.game-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.game-hud div{padding:10px;border-radius:16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.12);text-align:center}.game-hud span,.chosen-banner span{display:block;color:#fffadab3;font-size:11px}.game-hud strong{display:block;margin-top:2px;color:#fff1a7;font-size:22px}.chosen-banner{display:flex;align-items:center;gap:10px;min-height:72px;padding:8px 12px;border-radius:18px;background:#080d2c6b;border:1px solid rgba(255,238,154,.22)}.chosen-banner img{width:54px;height:58px;object-fit:contain}.chosen-banner strong{color:#fff1a7;font-size:19px}.progress-track{height:12px;margin:12px 4px;overflow:hidden;border-radius:999px;background:#ffffff21}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#73e0d3,#fff09d,#ff8767);box-shadow:0 0 18px #ffe68c80;transition:width .22s ease}.play-field{position:relative;height:calc(100svh - 178px);min-height:450px;overflow:hidden;border-radius:24px 24px 0 0;background:radial-gradient(circle at 50% 16%,rgba(255,240,157,.18),transparent 28%),linear-gradient(180deg,#ffffff12,#ffffff05);border:1px solid rgba(255,255,255,.12);border-bottom:0}.play-field:after{content:"";position:absolute;inset:auto 0 0;height:72px;background:repeating-radial-gradient(circle at 50% 100%,rgba(255,228,134,.18) 0 12px,rgba(116,221,207,.14) 13px 22px,transparent 23px 36px)}.falling-totem{position:absolute;top:-82px;display:grid;place-items:center;padding:0;cursor:pointer;border-radius:50%;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.72),transparent 18%),conic-gradient(from 18deg,#73e0d3,#ff8767,#fff09d,#7c60d4,#73e0d3);box-shadow:0 12px 26px #04071c52,0 0 22px #ffe89447;animation-name:fallDown,totemSpin;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,infinite}.falling-totem.decoy{opacity:.72;filter:saturate(.74)}.falling-totem span{display:grid;place-items:center;width:58%;height:58%;border-radius:50%;color:#241650;font-weight:900;background:#fff3b5e0}.falling-totem small{position:absolute;bottom:-18px;left:50%;width:max-content;max-width:78px;transform:translate(-50%);color:#fffadae0;font-size:10px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.45)}.spark{position:fixed;width:10px;height:10px;pointer-events:none;border-radius:50%;background:#fff3a4;box-shadow:0 -22px #73e0d3,18px -10px #ff8767,14px 15px #fff09d,-16px 13px #8be2ff,-20px -9px #ffb45f;animation:sparkPop .64s ease-out forwards;z-index:8}.result-screen{display:flex;flex-direction:column;justify-content:center;gap:16px}.blessing-card{position:relative;min-height:590px;overflow:hidden;padding:26px 22px;border-radius:28px;text-align:center;background:linear-gradient(160deg,#ffffff29,#ffffff0a),radial-gradient(circle at 50% 28%,rgba(255,226,137,.3),transparent 38%),linear-gradient(180deg,#2c1663e0,#064053eb);border:1px solid rgba(255,238,154,.38);box-shadow:0 24px 46px #02041470,inset 0 0 36px #ffffff14}.blessing-card:before,.blessing-card:after{content:"";position:absolute;top:16px;right:16px;bottom:16px;left:16px;border-radius:22px;border:1px solid rgba(255,238,154,.28);pointer-events:none}.blessing-card:after{inset:auto 18px 18px;height:74px;background:repeating-radial-gradient(circle at 50% 100%,rgba(255,228,134,.2) 0 10px,rgba(116,221,207,.13) 11px 20px,transparent 21px 32px);border:0}.lit-totem{width:86px;height:86px;display:grid;place-items:center;margin:6px auto 10px;border-radius:50%;color:#21144b;background:conic-gradient(#fff09d,#ff8767,#73e0d3,#7c60d4,#fff09d);box-shadow:0 0 36px #ffe08a94;animation:lightTotem 1.4s ease-in-out infinite alternate}.lit-totem span{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:#fff3b4;font-size:24px;font-weight:900}.blessing-card img{width:76%;height:210px;object-fit:contain;margin:2px auto 8px;filter:drop-shadow(0 18px 22px rgba(4,6,24,.38))}.blessing-card h2{margin-bottom:4px;font-size:32px}.result-score{display:inline-grid;place-items:center;min-width:92px;height:38px;margin-bottom:12px;border-radius:999px;color:#21144b;font-size:18px;font-weight:900;background:linear-gradient(135deg,#fff09d,#ffb45f)}.blessing-card h3{margin-bottom:10px;color:#8ff0df;font-size:18px}.blessing-text{max-width:290px;margin:0 auto;color:#fffadae6;font-size:16px;line-height:1.72}.result-actions{display:grid;gap:10px}@keyframes driftPattern{0%{background-position:0 0}to{background-position:68px 68px}}@keyframes floatBeast{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}@keyframes fallDown{0%{transform:translateY(-90px)}to{transform:translateY(calc(100svh + 130px))}}@keyframes totemSpin{0%,to{rotate:-8deg}50%{rotate:8deg}}@keyframes sparkPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}@keyframes lightTotem{0%{transform:scale(.96);filter:brightness(.92)}to{transform:scale(1.04);filter:brightness(1.18)}}@media (min-width: 431px){.phone-frame{min-height:844px;max-height:920px;border-radius:32px;box-shadow:0 30px 90px #00000073}}@media (max-width: 360px){.screen{padding-inline:14px}h1{font-size:36px}.role-card{min-height:186px}.role-card img{height:118px}.hero-orbit img{width:96px;height:158px}}