:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;color:#e8dcc0;background-color:#0b132b;background-image:radial-gradient(ellipse 120% 80% at 50% 0%,#1b273b99,#0b132b,#0b132b)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%;height:100%}html{min-height:100vh;min-height:100dvh}body{min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));position:relative}.app-header{position:absolute;top:max(.75rem,env(safe-area-inset-top));left:max(1rem,env(safe-area-inset-left));z-index:5}.app-logo{display:block;height:36px;width:auto;object-fit:contain}.compass-promo{margin:0;text-align:center;font-size:clamp(1.05rem,4vw,1.35rem);font-weight:500;letter-spacing:.02em;color:#e8dcc0f2;line-height:1.4;padding:0 .5rem}.roulette-card{width:min(92vw,560px);display:grid;justify-items:center;gap:1.2rem;padding:1.5rem 1.25rem 1.8rem;border-radius:28px;background:radial-gradient(circle at 50% 0%,#162034b3,#0b132bf2,#0b132b);box-shadow:0 20px 50px #0006,0 0 0 .5px #c9a96e26;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.onboarding-card{align-content:flex-start;row-gap:1.4rem}.onboarding-title{margin:0;text-align:center;font-size:clamp(1.2rem,4vw,1.5rem);font-weight:600;letter-spacing:.03em}.onboarding-subtitle{margin:0;text-align:center;font-size:clamp(.9rem,3.4vw,1rem);color:#e8dcc0cc;max-width:420px}.onboarding-form{width:100%;display:grid;gap:.85rem}.onboarding-field{display:grid;gap:.35rem}.onboarding-label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#e8dcc0bf}.onboarding-input{width:100%;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172abf;color:#e8dcc0;padding:.55rem 1rem;font-size:.9rem;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.onboarding-input::placeholder{color:#94a3b8bf}.onboarding-input:focus{border-color:#c9a96ee6;box-shadow:0 0 0 1px #c9a96e66,0 0 12px #c9a96e4d;background:#0f172ae6}.onboarding-input.has-error{border-color:#f87171e6}.onboarding-error{font-size:.78rem;color:#f87171f2}.wheel-area{width:100%;display:grid;place-items:center;padding-top:.8rem;position:relative}.wheel-shell{--size: min(78vw, 420px);width:var(--size);height:var(--size);border-radius:999px;position:relative;background:radial-gradient(circle at 50% 35%,#192542,#0f172b 40%,#050815);box-shadow:0 22px 52px #00000080,0 0 0 1px #c9a96e4d,inset 0 1px #f8fafc0a,inset 0 0 0 1px #0f172ab3;display:grid;place-items:center}.wheel-shell:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:inherit;background:radial-gradient(circle at 50% 20%,rgba(248,250,252,.15) 0%,transparent 40%),radial-gradient(circle at 50% 90%,rgba(0,0,0,.7) 10%,transparent 55%);box-shadow:0 0 0 1px #c9a96e99,0 0 26px #c9a96e73;opacity:.7;pointer-events:none}.wheel-outer{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;animation:wheel-hint 3.8s ease-in-out infinite;will-change:transform}.wheel-outer.is-spinning{animation:none}.wheel{width:100%;height:100%;border-radius:50%;overflow:hidden;transform:rotate(var(--rotation));transition:transform 4.2s cubic-bezier(.15,.9,.15,1)}.wheel-svg{width:100%;height:100%;display:block}.pointer{position:absolute;top:-8px;left:50%;width:26px;height:44px;transform:translate(-50%);z-index:10;animation:pointer-hint 2.6s ease-in-out infinite}.pointer:before{content:"";position:absolute;left:50%;top:0;width:19px;height:19px;transform:translate(-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8dcc0,#c9a96e 70%,#0b132b);box-shadow:0 0 18px #c9a96e73,0 0 8px #c9a96e40,0 3px 10px #0b132b80,0 0 0 .5px #e8dcc080}.pointer:after{content:"";position:absolute;left:50%;top:11px;transform:translate(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:24px solid #E8DCC0;filter:drop-shadow(0 0 6px rgba(201,169,110,.35)) drop-shadow(0 2px 4px rgba(11,19,43,.45))}.spin-button{border:0;border-radius:999px;padding:.75rem 2.2rem;font-size:1rem;font-weight:600;letter-spacing:.04em;color:#0b132b;background:linear-gradient(120deg,#e8dcc0,#c9a96e 40%,#f5e9cf,#e0cfa9);box-shadow:0 8px 24px #00000059,inset 0 1px #ffffff40;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,opacity .15s ease,background-position .22s ease;background-size:220% 220%;animation:spin-button-gradient 3s ease-in-out infinite}.spin-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 28px #0006,0 0 0 .5px #c9a96e4d,inset 0 1px #ffffff4d}.spin-button:disabled{cursor:not-allowed;opacity:.75}.spin-button.loading{animation:pulse 1s ease-in-out infinite}.spin-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.45) 0%,transparent 45%);opacity:0;pointer-events:none}@keyframes spin-button-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.result-text{text-align:center;max-width:560px;padding:0 .75rem}.result-title{margin:0;font-size:clamp(1rem,3.8vw,1.35rem);font-weight:600;letter-spacing:.03em}.result-description{margin:.45rem 0 0;color:#e8dcc0d9;font-size:clamp(.92rem,3.6vw,1.02rem)}.secondary-button{margin-top:.85rem;border-radius:999px;padding:.55rem 1.6rem;font-size:.9rem;font-weight:500;letter-spacing:.03em;border:1px solid rgba(201,169,110,.6);background:#0f172ad9;color:#e8dcc0;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .12s ease}.secondary-button:hover{background:#0f172af2;border-color:#c9a96ee6;transform:translateY(-1px)}.reset-link{margin-top:.6rem;font-size:.78rem;color:#94a3b8cc;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}.reset-link:hover{color:#e2e8f0f2}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0b132bd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-box{position:relative;width:min(92vw,360px);padding:1.5rem 1.25rem 1.25rem;border-radius:20px;background:radial-gradient(circle at 50% 0%,#162034f2,#0b132bfa);box-shadow:0 20px 50px #00000080,0 0 0 .5px #c9a96e33}.modal-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#c9a96e26;color:#e8dcc0;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.modal-close:hover{background:#c9a96e4d}.modal-text{margin:0;padding-right:1.5rem;font-size:clamp(.95rem,3.5vw,1.05rem);line-height:1.45;color:#e8dcc0f2}.modal-actions{margin-top:1.1rem;display:flex;justify-content:center}.modal-close-app-btn{border-radius:999px;padding:.6rem 1.9rem;font-size:1rem;font-weight:600;letter-spacing:.03em;border:1px solid rgba(201,169,110,.8);background:linear-gradient(150deg,#e8dcc0,#c9a96e);color:#0b132b;cursor:pointer;box-shadow:0 8px 20px #00000059,inset 0 1px #fff6;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.modal-close-app-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px #0006,inset 0 1px #ffffff80}@keyframes pointer-hint{0%,to{top:-8px}50%{top:-4px}}@keyframes wheel-hint{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.wheel-center-core{transform-origin:50% 50%;animation:center-core-pulse 2.4s ease-in-out infinite}@keyframes center-core-pulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 4px rgba(201,169,110,.45))}50%{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(201,169,110,.85))}}@keyframes pulse{0%,to{box-shadow:0 8px 24px #00000059,0 0 #c9a96e33,inset 0 1px #ffffff40}50%{box-shadow:0 10px 28px #0006,0 0 20px #c9a96e40,inset 0 1px #ffffff4d}}@media (max-width: 480px){.wheel-shell{--size: min(88vw, 360px)}.wheel-area{padding-top:1.2rem}.pointer{top:-4px}}