@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--cream:#f7f0e5;--paper:#fffaf2;--pink:#e61b57;--blue:#c3e1f3;--lilac:#a39ece;--teal:#009ead;--green:#bccf9a;--lime:#cdcd28;--orange:#f18708;--brick:#eb6133;--ink:#392e3b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh}.shell{max-width:1100px;margin:auto;padding:18px 20px 12px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:58px;display:flex;align-items:center;justify-content:space-between}.logo{width:145px;height:48px;object-fit:contain;object-position:left center}.campaign-tag,.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.15em;color:var(--pink)}.campaign-tag{background:#ffe0e8;padding:9px 12px;border-radius:20px;font-size:.62rem}.view{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 0 38px}.hidden{display:none!important}h1{font:700 clamp(2.5rem,8vw,5rem)/.98 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:10px 0 16px}p{line-height:1.55}.age-card,.result-card{width:min(100%,490px);background:var(--paper);border-radius:30px;padding:28px 24px;box-shadow:0 16px 50px #684d2514}.age-card h1{font-size:clamp(2.2rem,8vw,3.4rem)}.age-card>p:not(.eyebrow){margin:0 auto 22px;max-width:340px}.mascot{object-fit:contain}.age-mascot{height:142px;width:130px;margin:0 auto 8px}.button{border:0;border-radius:999px;padding:15px 22px;font:700 .95rem 'DM Sans',sans-serif;cursor:pointer;transition:transform .18s,filter .18s}.button:hover{transform:translateY(-2px);filter:saturate(1.1)}.primary{background:var(--pink);color:white;box-shadow:0 7px 0 #a90e3d}.age-card .primary{width:100%}.text-button{display:block;margin:13px auto 0;background:transparent;color:var(--ink);padding:8px}.age-card small{display:block;margin-top:17px;color:#756d74;font-size:.72rem}.welcome-view{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:20px}.welcome-copy{padding:12px 0}.welcome-copy h1{font-size:clamp(3.8rem,9vw,7rem);margin:14px 0 20px}.welcome-copy h1 span{color:var(--pink)}.lead{font-size:1.05rem;max-width:420px}.enter{margin-top:17px;padding:17px 24px;display:flex;gap:20px;align-items:center}.enter span{font-size:1.25rem}.fine{font-size:.77rem;color:#776d71}.hero-art{height:440px;position:relative;border-radius:40% 46% 34% 40%;background:var(--blue);overflow:hidden;display:flex;justify-content:center;align-items:center}.sunburst{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--orange);right:-25px;top:-30px}.hero-mascot{position:absolute;z-index:1;height:310px;width:260px;object-fit:contain;bottom:10px;left:2%}.vape-art{position:absolute;z-index:2;height:215px;width:210px;object-fit:contain;right:0;bottom:16px;transform:rotate(-8deg)}.wheel-view{flex-direction:column;padding-top:10px}.wheel-view h1{font-size:clamp(2.7rem,8vw,4.6rem)}.wheel-view>p{margin:3px 0 14px}.wheel-wrap{width:min(78vw,380px);aspect-ratio:1;position:relative;margin:8px auto 22px}.wheel-wrap canvas{width:100%;height:100%;border-radius:50%;box-shadow:0 10px 30px #42303c29}.pointer{position:absolute;z-index:3;top:-13px;left:calc(50% - 19px);border-left:19px solid transparent;border-right:19px solid transparent;border-top:42px solid var(--ink);filter:drop-shadow(0 3px 2px #fff)}.wheel-center{position:absolute;width:24%;height:24%;left:38%;top:38%;border:6px solid var(--paper);border-radius:50%;background:white;display:grid;place-items:center;box-shadow:0 3px 12px #392e3b35}.wheel-center img{width:80%;height:80%;object-fit:contain}.spin-button{min-width:230px}.spin-button:disabled{opacity:.7;cursor:wait}.result-card{position:relative;padding:46px 28px 30px;overflow:hidden}.result-card:before{content:'';position:absolute;width:240px;height:200px;border-radius:50%;background:#c3e1f377;left:-90px;top:-100px}.result-card>*{position:relative}.result-mascot{height:145px;width:125px;margin-bottom:4px}.result-card h1{font-size:clamp(5rem,20vw,8rem);color:var(--pink);margin:4px}.result-card .lead{margin:0 auto 22px}.actions{display:flex;flex-direction:column;gap:12px}.secondary{background:var(--blue);color:var(--ink)}.result-card .fine{margin:20px 0 0}footer{display:flex;justify-content:space-between;gap:12px;color:#887e7d;font-size:.68rem;padding:12px 0 6px;border-top:1px solid #392e3b18}@media(min-width:700px){.shell{padding:22px 36px 16px}.age-card,.result-card{padding:36px}.result-card{padding-top:45px}.actions{flex-direction:row;justify-content:center}.actions .button{flex:1}.wheel-wrap{width:min(48vw,390px)}.welcome-view{padding-left:6%;padding-right:6%}}@media(max-width:620px){.welcome-view{grid-template-columns:1fr;gap:4px;padding-top:12px}.welcome-copy{text-align:center}.welcome-copy h1{font-size:clamp(3.8rem,16vw,5.5rem)}.welcome-copy .lead{margin:0 auto}.enter{margin:18px auto 0}.hero-art{height:260px;width:min(100%,380px);margin:0 auto}.hero-mascot{height:235px;width:200px}.vape-art{height:145px;width:150px}footer{font-size:.6rem;align-items:center}.topbar .logo{width:125px}.campaign-tag{font-size:.55rem}}

.story-preview{display:block;width:min(100%,280px);height:auto;aspect-ratio:9/16;object-fit:contain;margin:12px auto 20px;border-radius:18px;box-shadow:0 12px 30px #392e3b2b}.result-card{max-height:calc(100vh - 130px);overflow:auto}.wheel-view{overflow:hidden}
.code-label{font-size:.85rem;font-weight:700;margin:2px 0 7px}.code-input{width:min(100%,340px);padding:13px 16px;border:2px solid #d5cad0;border-radius:14px;background:var(--paper);font:600 1rem 'DM Sans',sans-serif;letter-spacing:.08em;text-align:center;color:var(--ink);margin:0 auto 12px}.code-input:focus-visible{outline:3px solid var(--blue);border-color:var(--pink)}.wheel-view #spinMessage{min-height:1.5em;max-width:38rem;padding:0 12px}.spin-button:disabled{transform:none;filter:none}