@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:#332445;background:#fdf8fe;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #c28bfa;outline-offset:3px}.app-shell{max-width:760px;margin:0 auto;min-height:100vh;background:#fff;box-shadow:0 0 65px #4f1e6c0c;padding-bottom:80px}.topbar{height:78px;padding:14px 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f4eaf6;background:#fff;position:relative;z-index:2}.brand{display:flex;gap:10px;align-items:center;cursor:pointer}.brand-cup{font-size:32px;background:#f7eafa;width:49px;height:49px;border-radius:16px;display:grid;place-items:center}.brand strong{display:block;font-family:Nunito,sans-serif;font-size:19px;font-weight:900;color:#66369c}.brand small{display:block;font-size:9px;font-weight:800;letter-spacing:1.8px;color:#a98bb8}.xp-chip{display:flex;align-items:center;gap:6px;background:#fff4d8;color:#94611c;border-radius:30px;padding:9px 13px;font-weight:800;font-size:13px}.hero{position:relative;text-align:center;overflow:hidden;background:linear-gradient(155deg,#f7e7ff 0%,#fff0f6 56%,#fff8e8 100%);padding:39px 24px 30px}.hero-boba{font-size:79px;filter:drop-shadow(0 12px 10px #b57cb32c);line-height:1.2}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2.3px;color:#a26abc;margin-top:15px}.hero h1{font-family:Nunito,sans-serif;color:#7437aa;font-size:clamp(59px,12vw,94px);font-weight:900;letter-spacing:-4px;margin:0;line-height:1.13;text-shadow:3px 5px 0 #f3d0fb}.hero h1 span{color:#f49ab7}.tagline{font-size:19px;margin:6px 0 14px;color:#71478e}.tagline strong{color:#d56d9b}.hero-desc{max-width:360px;margin:0 auto 24px;line-height:1.6;font-size:14px;color:#7d688a}.primary{border:0;background:linear-gradient(105deg,#8b4bc4,#b65dba);color:white;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 23px;font-weight:800;box-shadow:0 6px 14px #a456b13a}.primary:hover{filter:brightness(1.06)}.primary:disabled{opacity:.45;cursor:not-allowed}.hero-button{min-width:220px}.hero-flags{font-size:26px;margin-top:20px}.sparkle{position:absolute;color:#dca7ee;font-size:36px}.sparkle.one{left:17%;top:72px}.sparkle.two{right:15%;top:116px}.section{padding:25px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.section h2,.section-head h2{font-family:Nunito,sans-serif;font-size:22px;margin:0;color:#50316d;font-weight:900}.mini-label{font-size:10px;color:#a98bb8;font-weight:800;letter-spacing:1px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.steps>div{border:1px solid #f1e4f4;border-radius:18px;padding:18px 11px;text-align:center;background:#fdf9fe}.step-icon{display:block;font-size:30px;margin-bottom:10px}.steps b{display:block;font-size:13px;color:#573873}.steps p{font-size:11px;color:#927c9f;line-height:1.5;margin:7px 0 0}.count-pill{background:#f5e9fb;color:#8753ac;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:800}.progress-track,.round-progress{background:#f2eaf5;border-radius:20px;overflow:hidden;height:9px}.progress-track>div{height:100%;border-radius:20px;background:linear-gradient(90deg,#b47ad8,#f29ebc);transition:width .2s}.story-list{margin-top:17px;display:grid;gap:10px}.story-row{width:100%;border:1px solid #f1e7f5;background:white;border-radius:17px;padding:12px;display:flex;gap:12px;text-align:left;align-items:center;box-shadow:0 3px 13px #7a3e8908}.story-row:hover{border-color:#dcb9ee}.story-emoji{width:57px;height:57px;background:#f8ecfb;border-radius:14px;display:grid;place-items:center;font-size:30px}.story-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.story-info small{font-size:10px;font-weight:800;color:#ac72c4}.story-info strong{font-size:14px;color:#52336a}.story-info>span{font-size:11px;color:#a18aab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.muted{color:#b69cc5}.completed{display:grid;place-items:center;background:#e2f8eb;color:#298653;border-radius:50%;width:28px;height:28px}.notice{margin:4px 25px 24px;background:#faf6fc;border:1px solid #f0e6f5;color:#947fa2;border-radius:13px;padding:13px;font-size:11px;display:flex;gap:9px;line-height:1.5}.notice svg{flex-shrink:0}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);height:73px;background:#fff;border-top:1px solid #f0e6f3;display:grid;grid-template-columns:repeat(4,1fr);z-index:10;box-shadow:0 -7px 25px #6b36770b;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{background:none;border:0;color:#ac98b6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10px;font-weight:800}.bottom-nav button.active{color:#8847b7}.bottom-nav button.active svg{stroke-width:2.6}.footer{text-align:center;color:#b4a1be;font-size:10px;padding:17px 10px;display:flex;align-items:center;justify-content:center;gap:7px}.play-head{display:flex;align-items:center;justify-content:space-between;padding:20px 25px 13px}.back{border:0;background:none;color:#78518f;display:flex;gap:7px;align-items:center;font-weight:800;font-size:13px}.round-tag{color:#a16abb;background:#f5eafa;padding:7px 11px;border-radius:30px;font-size:10px;font-weight:900;letter-spacing:.8px}.round-progress{margin:0 25px 20px;display:flex;gap:5px;background:none;height:7px}.round-progress>div{flex:1;background:#eee4f2;border-radius:10px}.round-progress>div.active{background:#a86acb}.scenario-card{margin:0 25px;background:#fff;border:1px solid #f1e3f5;border-radius:23px;overflow:hidden;box-shadow:0 9px 25px #693d7d0d}.scenario-art{height:175px;background:radial-gradient(circle at 50% 90%,#ffdce8,transparent 56%),linear-gradient(135deg,#f2e3fd,#fff1f4);display:grid;place-items:center;position:relative}.art-circle{font-size:81px;background:#ffffff80;width:135px;height:135px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 25px #ae7db529}.art-spark{position:absolute;color:#d49edc;font-size:30px}.art-spark.left{left:18%;top:25%}.art-spark.right{right:18%;bottom:24%}.scenario-body{padding:23px}.category{font-size:10px;color:#a05cb9;letter-spacing:1.2px;font-weight:900;text-transform:uppercase}.scenario-body h2{font-family:Nunito,sans-serif;font-weight:900;color:#51316b;font-size:27px;margin:8px 0 4px}.kicker{color:#ac98b3;font-size:11px;margin:0 0 20px}.scenario-text{font-size:15px;line-height:1.85;color:#574660;margin:0}.question{background:#faf1fc;border-left:4px solid #b676d2;padding:14px;border-radius:0 12px 12px 0;color:#703c8c;font-weight:800;margin-top:20px;line-height:1.5;font-size:14px}.choice-section{padding-top:23px}.subtext{font-size:13px;color:#95809f;line-height:1.6;margin:8px 0 20px}.flag-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flag-option{position:relative;min-height:119px;border:2px solid #eee6f2;border-radius:17px;background:#fff;padding:15px 10px;display:flex;flex-direction:column;align-items:center;gap:5px}.flag-option.selected{box-shadow:0 4px 15px #7b478319}.flag-option.green.selected{border-color:#59bb82;background:#f0fff5}.flag-option.yellow.selected{border-color:#e5c24b;background:#fffbed}.flag-option.red.selected{border-color:#ef7e91;background:#fff2f4}.flag-option.black.selected{border-color:#6f5a85;background:#f7f3f9}.flag-emoji{font-size:27px}.flag-option strong{font-size:13px;color:#493454}.flag-option small{font-size:10px;color:#9d8ba4}.selected-check{position:absolute;right:8px;top:8px;border-radius:50%;background:#8c54b1;color:white;width:19px;height:19px;display:grid;place-items:center}.full{width:100%;margin-top:17px}.hint{color:#aa95b3;font-size:11px;line-height:1.5;text-align:center}.verdict-top{text-align:center;background:#f8eefa;border-radius:20px;padding:25px 10px}.verdict-top>span{font-size:10px;letter-spacing:1.4px;color:#9d60ba;font-weight:900}.verdict-emoji{font-size:55px;margin:12px}.verdict-top h2{font-size:23px}.verdict-top p{color:#9e82aa;font-size:12px}.poll{margin-top:20px;border:1px solid #f1e6f4;border-radius:19px;padding:19px}.poll-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:17px}.poll h3,.panel h3{font-family:Nunito,sans-serif;color:#55346e;font-size:17px;margin:0;font-weight:900}.demo-pill{background:#fff4d7;color:#99701c;border-radius:20px;padding:5px 8px;font-size:9px;font-weight:900}.poll-line{margin-bottom:14px}.poll-label{display:flex;justify-content:space-between;font-size:12px;color:#71577d;margin-bottom:7px}.poll-track{height:9px;background:#f1eaf3;border-radius:15px;overflow:hidden}.poll-fill{height:100%;border-radius:15px}.poll-fill.green{background:#65c995}.poll-fill.yellow{background:#edce65}.poll-fill.red{background:#ef859c}.poll-fill.black{background:#80698d}.tea-take{background:#fff6f0;border:1px solid #ffeadf;border-radius:18px;padding:20px;margin-top:15px}.tea-take>span{font-size:11px;color:#d58b6a;letter-spacing:1px;font-weight:900}.tea-take p{font-size:14px;color:#785b57;line-height:1.7;margin:10px 0}.tea-take small{font-size:11px;color:#a9897c}.reward{display:flex;gap:12px;align-items:center;margin-top:15px;padding:14px;border-radius:15px;background:#f0fbf4;color:#318656}.reward div{flex:1;display:flex;flex-direction:column;gap:3px}.reward strong{font-size:13px}.reward span{font-size:11px}.center{text-align:center}.page-icon{text-align:center;font-size:64px;margin-top:13px}.purple{color:#a06abc}.results-page h1,.profile-page h1{font-family:Nunito,sans-serif;font-size:32px;color:#583575;margin:7px 0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.stats>div{background:#f9f0fc;border:1px solid #f1e2f6;border-radius:17px;padding:19px 6px;text-align:center}.stats strong{display:block;font-family:Nunito,sans-serif;font-size:27px;color:#8c51b4;font-weight:900}.stats strong small{font-size:15px;color:#bca0cc}.stats span{font-size:10px;color:#9e85aa;font-weight:800}.panel{border:1px solid #f0e5f4;border-radius:20px;padding:20px;margin:18px 0}.panel h3{margin-bottom:15px}.result-row{border:0;border-bottom:1px solid #f4ecf6;background:none;width:100%;padding:11px 0;display:flex;align-items:center;gap:12px;text-align:left}.result-row:last-child{border-bottom:0}.result-emoji{font-size:26px;background:#f9effb;width:46px;height:46px;border-radius:12px;display:grid;place-items:center}.result-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1}.result-row small{font-size:10px;color:#ac8dbb}.result-row strong{font-size:13px;color:#604571}.result-flag{font-size:25px}.completion{text-align:center;background:#f8eafa;border-radius:20px;padding:23px}.completion>span{font-size:43px}.completion h3{color:#6c4091;font-family:Nunito;margin:7px 0}.completion p{font-size:13px;color:#9377a3}.completion.claimed{background:#f1fbf3}.actions{display:flex;gap:10px;margin-top:18px}.actions button{flex:1;font-size:12px;padding:14px 9px}.secondary{background:#f8f0fb;color:#8153a3;border:1px solid #ecd8f5;border-radius:14px;padding:13px 17px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px}.profile-top{display:flex;gap:18px;align-items:center;margin-top:13px}.avatar{width:91px;height:91px;border-radius:50%;background:#f6e8fb;display:grid;place-items:center;font-size:49px}.profile-top p{color:#a38bac;font-size:12px;margin:0}.badges{display:grid;gap:12px}.badge-item{display:flex;align-items:center;gap:13px;padding:12px;border-radius:14px;background:#faf5fc}.badge-item>span{font-size:28px}.badge-item div{flex:1;display:flex;flex-direction:column;gap:3px}.badge-item strong{font-size:13px;color:#68487a}.badge-item small{font-size:11px;color:#a28eac}.badge-item svg{color:#4ea77b}.badge-item.locked{opacity:.5}.info-panel p{font-size:12px;color:#8f7c99;line-height:1.7}.reset-link{background:none;border:0;color:#b06a86;font-size:12px;font-weight:800;display:flex;align-items:center;gap:8px;padding:9px 0}.reset-confirm{border-radius:12px;background:#fff4f4;padding:12px}.reset-confirm>div{display:flex;gap:9px}.danger{background:#c84b70;color:white;border:0;border-radius:12px;padding:11px 14px;font-weight:800}.toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);z-index:20;background:#593571;color:white;padding:13px 20px;border-radius:14px;box-shadow:0 10px 25px #3923424a;font-size:12px;font-weight:800;max-width:90%;text-align:center}@media(min-width:650px){.hero{padding:45px 24px 39px}.section{padding:30px 40px}.scenario-card{margin:0 40px}.play-head{padding-left:40px;padding-right:40px}.round-progress{margin-left:40px;margin-right:40px}.notice{margin-left:40px;margin-right:40px}.hero-boba{font-size:90px}}@media(max-width:360px){.topbar{padding:12px}.section{padding:18px}.steps{gap:6px}.steps>div{padding:14px 6px}.brand strong{font-size:16px}.scenario-card{margin:0 14px}.play-head{padding-left:14px;padding-right:14px}.round-progress{margin-left:14px;margin-right:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}