@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@700;900&display=swap";:root{color:#f9f0d8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--night:#0d0820;--deep:#171034;--violet:#6f4cff;--aura:#c879ff;--gold:#f1c76a;--moon:#fff4cf;--mist:#fff4cfb8;--glass:#1c1338ad;--line:#ffe6ae2e;background:#0d0820;font-family:Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -10%,#f8d47e47,#0000 24rem),radial-gradient(circle at 15% 16%,#8452ff57,#0000 28rem),radial-gradient(circle at 86% 12%,#c665ff33,#0000 24rem),radial-gradient(circle at 75% 86%,#4dc4cd29,#0000 30rem),linear-gradient(145deg,#070414 0%,#151034 42%,#26143f 100%);min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}body:before{content:"";z-index:-2;pointer-events:none;opacity:.32;background-image:radial-gradient(circle,#fff4cfd1 0 1px,#0000 1.4px),radial-gradient(circle,#c779ffb8 0 1px,#0000 1.3px);background-position:0 0,44px 58px;background-size:88px 88px,132px 132px;position:fixed;inset:0}body:after{content:"";z-index:-1;pointer-events:none;filter:blur(10px);background:radial-gradient(#f1c76a38,#0000 66%);height:48vh;position:fixed;inset:auto -10% -34%}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}.app-shell{width:min(100%,1040px);margin:0 auto;padding:28px 16px 116px;position:relative}.app-shell:before{content:"";z-index:-1;aspect-ratio:1;opacity:.72;background:linear-gradient(30deg,#0000 49.7%,#f1c76a1f 50%,#0000 50.3%),linear-gradient(150deg,#0000 49.7%,#f1c76a1a 50%,#0000 50.3%);border:1px solid #f1c76a1a;border-radius:50%;width:min(76vw,680px);position:fixed;top:42px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 90px #c779ff17,0 0 120px #6f4cff2e}.panel,.value-card,.rank-item,.battle-card,.result-card,.reflect-card,.share-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 80px #00000047,inset 0 1px #ffffff14}.hero{text-align:center;background:radial-gradient(circle at 50% 12%,#f1c76a2b,#0000 22rem),linear-gradient(#231847d1,#0e0920b8);border-radius:36px;place-items:center;min-height:calc(100vh - 56px);padding:56px 22px;display:grid;position:relative;overflow:hidden}.hero:before,.hero:after{content:"";pointer-events:none;position:absolute}.hero:before{aspect-ratio:1;border:1px solid #f1c76a33;border-radius:50%;width:min(80vw,560px);box-shadow:inset 0 0 0 26px #fff4cf05,inset 0 0 0 54px #c779ff09}.hero:after{border:1px solid #fff4cf14;border-radius:28px;inset:18px}.hero>*{z-index:1;position:relative}.kicker,.section-header p,.round-label{color:var(--gold);letter-spacing:.28em;text-transform:uppercase;margin:0;font-size:.76rem;font-weight:700}.star{color:var(--gold);text-shadow:0 0 22px #f1c76af2,0 0 54px #c779ff9e;margin:18px 0 12px;font-size:3.6rem;line-height:1}h1,h2,h3{margin:0;font-family:Noto Serif TC,serif}h1{max-width:10em;color:var(--moon);letter-spacing:-.04em;text-shadow:0 12px 46px #f1c76a3d;font-size:clamp(2.8rem,10vw,6.4rem);line-height:1.02}.lead{max-width:34rem;color:var(--mist);margin:24px 0;font-size:1.08rem;line-height:1.95}.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,580px);margin-bottom:30px;display:grid}.steps span,.summary div{color:#fff4cfc7;background:#ffffff0e;border:1px solid #fff4cf1a;border-radius:18px;padding:14px}.primary,.secondary,.text-button,.custom-row button,.choice-row button,.rank-actions button{border:0;border-radius:999px;transition:transform .16s,box-shadow .16s,background .16s,color .16s}.primary{color:#140d24;background:linear-gradient(135deg,#ffe3a1,#d7a84f 46%,#8e5cff 100%);padding:15px 30px;font-weight:800;box-shadow:0 0 28px #f1c76a47,0 18px 36px #00000042}.secondary,.rank-actions button{color:var(--moon);background:#fff4cf1f;padding:12px 18px}.primary:hover,.secondary:hover,.custom-row button:hover,.choice-row button:hover,.rank-actions button:hover{transform:translateY(-1px);box-shadow:0 16px 34px #00000047,0 0 22px #c779ff2e}.progress{z-index:5;background:#fff4cf17;height:5px;margin:-28px -16px 30px;position:sticky;top:0}.progress span{background:linear-gradient(90deg, var(--violet), var(--gold));border-radius:0 999px 999px 0;height:100%;transition:width .25s;display:block;box-shadow:0 0 20px #f1c76a85}.flow{gap:20px;display:grid}.section-header{gap:8px;padding:8px 0 4px;display:grid}.section-header h2{color:var(--moon);letter-spacing:-.03em;font-size:clamp(2rem,7vw,4.4rem);line-height:1.08}.section-header span{color:var(--mist);line-height:1.85}.custom-row{gap:10px;display:flex}.custom-row input{width:100%;color:var(--moon);background:#0e0920a3;border:1px solid #fff4cf33;border-radius:999px;outline:none;padding:13px 18px;box-shadow:inset 0 0 20px #6f4cff14}.custom-row input::placeholder{color:#fff4cf6b}.custom-row input:focus{border-color:#f1c76a9e;box-shadow:0 0 0 4px #f1c76a1c}.custom-row button{color:#fff;background:linear-gradient(135deg,#8e5cff,#c879ff);padding:0 22px;font-weight:800}.value-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.value-card{background:linear-gradient(#24194ab8,#0f0a22b8);border-radius:24px;gap:10px;padding:18px;display:grid;position:relative;overflow:hidden}.value-card:before{content:"";background:#fff4cf73;border-radius:50%;width:8px;height:8px;position:absolute;top:12px;right:14px;box-shadow:0 0 18px #fff4cfb3}.value-card.core{background:linear-gradient(#2a57549e,#121c2ccc);border-color:#88ffd45c}.value-card.good{background:linear-gradient(#654e2694,#1c1428cc);border-color:#f1c76a6b}.value-card.low{background:linear-gradient(#462b5b94,#160c23cc);border-color:#c779ff52}.value-card h3,.rank-item h3{color:var(--moon);font-size:1.45rem}.value-card p,.rank-item p,.result-card p,.battle-card small,.share-card p{color:#fff4cfa8;margin:0;line-height:1.72}.choice-row,.rank-actions,.sticky-action{flex-wrap:wrap;gap:8px;display:flex}.choice-row button{color:#fff4cfc7;background:#fff4cf1a;flex:1;min-width:max-content;padding:10px 12px}.choice-row button.selected{background:linear-gradient(135deg, var(--gold), var(--aura));color:#110a22;font-weight:800}.summary{background:#100a23ad;border-radius:24px;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;display:grid}.summary div{justify-content:space-between;gap:8px;display:flex}.summary span{color:var(--gold);font-weight:800}.sticky-action{z-index:10;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0c071bb8;border:1px solid #f1c76a2e;border-radius:999px;justify-content:center;max-width:760px;margin:0 auto;padding:12px;position:fixed;bottom:16px;left:16px;right:16px;box-shadow:0 20px 60px #00000052,inset 0 1px #ffffff14}.rank-list,.result-list{gap:12px;display:grid}.rank-item{background:linear-gradient(135deg,#211744c7,#0f0a20c7);border-radius:24px;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px;display:grid}.rank-num{color:#120c23;background:radial-gradient(circle at 34% 26%,#fff4cf,#d7a84f 48%,#6f4cff 100%);border:1px solid #f1c76a73;border-radius:50%;place-items:center;width:46px;height:46px;font-family:Noto Serif TC,serif;font-size:1.3rem;font-weight:900;display:grid;box-shadow:0 0 24px #f1c76a42}.battle-screen{max-width:720px;margin:0 auto}.battle-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.battle-card{min-height:330px;color:var(--moon);text-align:left;background:radial-gradient(circle at 50% 18%,#f1c76a24,#0000 11rem),linear-gradient(#2a1c54d6,#0c081cd1);border-radius:34px;gap:14px;padding:30px;display:grid;position:relative;overflow:hidden}.battle-card:after{content:"✦";color:#f1c76a38;font-size:5rem;line-height:1;position:absolute;bottom:18px;right:24px}.battle-card:hover{border-color:#f1c76a80;transform:translateY(-2px)}.battle-card span{color:var(--gold);background:#f1c76a24;border-radius:999px;justify-self:start;padding:6px 12px;font-size:.86rem}.battle-card strong{z-index:1;text-shadow:0 0 34px #f1c76a2e;font-family:Noto Serif TC,serif;font-size:clamp(2.2rem,7vw,4.3rem);position:relative}.result-card{border-radius:32px;padding:30px;position:relative;overflow:hidden}.result-card:after{content:"";pointer-events:none;border:1px solid #fff4cf1f;border-radius:24px;position:absolute;inset:16px}.result-card span{color:#fff4cfa8;letter-spacing:.14em;font-weight:800}.result-card h3{color:var(--moon);margin:8px 0;font-size:clamp(2.2rem,8vw,4.4rem)}.medal-1{background:radial-gradient(circle at 18% 0,#fff4cf59,#0000 12rem),linear-gradient(135deg,#6d4a17,#281837 58%,#120d24)}.medal-2{background:radial-gradient(circle at 18% 0,#dde7ff4d,#0000 12rem),linear-gradient(135deg,#4d5171,#251b44 58%,#100c22)}.medal-3{background:radial-gradient(circle at 18% 0,#ee9d6d52,#0000 12rem),linear-gradient(135deg,#6a362d,#2d183d 58%,#100b21)}.reflect-card{color:var(--moon);background:radial-gradient(circle at 76% 18%,#f1c76a38,#0000 13rem),radial-gradient(circle at 14% 80%,#c779ff38,#0000 16rem),linear-gradient(145deg,#130c2af5,#0a0618f5);border-radius:36px;padding:clamp(30px,8vw,60px);position:relative;overflow:hidden}.reflect-card:before{content:"☉";color:#f1c76a1f;font-size:10rem;line-height:1;position:absolute;top:-22px;right:22px}.reflect-card p{margin:0;font-family:Noto Serif TC,serif;font-size:clamp(1.8rem,6vw,4rem);font-weight:900;line-height:1.45;position:relative}.share-card{text-align:center;background:#171034c2;border-radius:30px;gap:14px;padding:24px;display:grid}.share-card>span{color:var(--gold);letter-spacing:.18em;font-weight:800}.share-card div{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.share-card strong{background:linear-gradient(135deg, var(--gold), var(--aura));color:#130d24;border-radius:999px;padding:10px 18px;font-family:Noto Serif TC,serif;box-shadow:0 0 20px #f1c76a33}.text-button{color:#fff4cfb3;text-underline-offset:4px;background:0 0;justify-self:center;padding:12px 18px;text-decoration:underline}.toast{z-index:20;color:var(--moon);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0c071beb;border:1px solid #f1c76a47;border-radius:999px;padding:12px 18px;position:fixed;bottom:96px;right:16px;box-shadow:0 16px 40px #00000052,0 0 26px #c779ff2e}@media (width<=720px){.app-shell{padding:16px 12px 108px}.hero{border-radius:28px;min-height:calc(100vh - 32px)}.steps,.summary,.battle-pair,.rank-item{grid-template-columns:1fr}.rank-actions{width:100%}.rank-actions button,.sticky-action .primary,.sticky-action .secondary{flex:1}.battle-card{min-height:220px}}