:root{--primary: #4f46e5;--primary-light: #6366f1;--primary-dark: #3730a3;--accent-gold: #f59e0b;--accent-gold-light: #fde68a;--accent-gold-dark: #d97706;--energy-cyan: #06b6d4;--energy-cyan-light: #67e8f9;--gem-ruby: #ec4899;--gem-sapphire: #3b82f6;--gem-emerald: #10b981;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #111827 100%);--card-bg: rgba(30, 41, 59, .85);--card-border: rgba(255, 255, 255, .12);--card-hover: rgba(51, 65, 85, .95);--glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .02) 100%);--font-display: "Fredoka", cursive, sans-serif;--font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;min-height:100%;min-height:100dvh;background-color:#090d16;color:#f8fafc;font-family:var(--font-body);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}#root{width:100%;min-height:100%;min-height:100dvh}.app-viewport-wrapper{width:100%;min-height:100dvh;background:radial-gradient(circle at top center,#1e1b4b,#090d16);display:flex;justify-content:center;align-items:flex-start}.mobile-frame{width:100%;max-width:480px;min-height:100dvh;background:var(--bg-gradient);display:flex;flex-direction:column;position:relative}@media (min-width: 601px){.app-viewport-wrapper{padding:20px 12px;align-items:center;height:100vh;overflow:hidden}.mobile-frame{height:calc(100vh - 40px);max-height:880px;border-radius:36px;border:3px solid rgba(255,255,255,.15);box-shadow:0 25px 60px -15px #000c;overflow:hidden}.status-bar{height:26px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:11px;font-weight:700;color:#ffffff80;background:#0f172a99;flex-shrink:0}.main-screen-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 16px 100px}.bottom-nav{position:absolute;bottom:0;left:0;right:0}}@media (max-width: 600px){.app-viewport-wrapper{display:block;padding:0}.mobile-frame{max-width:100%;min-height:100dvh;height:auto;border-radius:0;border:none;box-shadow:none;overflow:visible}.status-bar{display:none}.app-header{position:sticky;top:0;z-index:50}.main-screen-container{height:auto;overflow:visible;padding:14px;padding-bottom:calc(95px + env(safe-area-inset-bottom,20px))}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:60}}.app-header{padding:12px 14px;background:#0f172af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0}.brand-section{display:flex;align-items:center;gap:8px}.brand-logo-icon{font-size:24px;animation:float 3s ease-in-out infinite}.brand-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,#fbbf24,#f43f5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}.header-badges{display:flex;align-items:center;gap:6px}.stat-pill{display:flex;align-items:center;gap:5px;padding:6px 10px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-full);font-family:var(--font-display);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s ease;white-space:nowrap}.stat-pill:active{transform:scale(.95)}.stat-pill.gems{color:#fde047;border-color:#facc1559;background:#facc151f}.stat-pill.energy{color:#67e8f9;border-color:#06b6d459;background:#06b6d41f}.main-screen-container{display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}.bottom-nav{height:64px;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,4px);background:#0f172afa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-around;align-items:center;padding-left:6px;padding-right:6px;box-shadow:0 -4px 20px #0009}.nav-item{flex:1;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:#94a3b8;font-size:11px;font-weight:700;cursor:pointer;border-radius:12px;transition:all .15s ease;padding:2px}.nav-item:active{transform:scale(.92)}.nav-item.active{color:#fbbf24}.nav-item.active .nav-icon-wrap{background:#fbbf242e;border-radius:10px}.nav-icon-wrap{padding:3px 8px;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.glass-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:14px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--glass-gloss)}.room-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;text-align:left}.room-card:active{transform:scale(.97)}.room-card.room-1{background:linear-gradient(135deg,#4f46e559,#1e1b4bcc);border-color:#6366f166}.room-card.room-2{background:linear-gradient(135deg,#ec489959,#500724cc);border-color:#f472b666}.room-card.room-3{background:linear-gradient(135deg,#10b98159,#064e3bcc);border-color:#34d39966}.room-card.room-4{background:linear-gradient(135deg,#f59e0b59,#78350fcc);border-color:#fbbf2466}.room-icon-box{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 12px #0000004d;background:#ffffff1a;border:1px solid rgba(255,255,255,.15)}.room-info{flex:1;min-width:0}.room-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:#fff;margin-bottom:2px;display:flex;align-items:center;justify-content:space-between}.room-desc{font-size:11px;color:#cbd5e1;line-height:1.3}.room-reward-tag{font-size:11px;font-weight:700;color:#fde047;margin-top:4px;display:inline-flex;align-items:center;gap:4px;background:#facc151f;padding:2px 8px;border-radius:6px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:14px;z-index:100;animation:fadeIn .2s ease-out;overflow-y:auto}.modal-content{background:#1e293b;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:18px;width:100%;max-width:380px;box-shadow:0 20px 50px #000c;position:relative;animation:popIn .25s cubic-bezier(.34,1.56,.64,1);max-height:88vh;overflow-y:auto}.btn-primary{width:100%;min-height:46px;padding:12px 18px;background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-display);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px #ea580c59;transition:all .15s ease}.btn-primary:active{transform:scale(.96)}.btn-secondary{min-height:40px;padding:8px 14px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#e2e8f0;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.btn-secondary:active{transform:scale(.96);background:#ffffff26}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px #f59e0b33}50%{box-shadow:0 0 25px #f59e0b99}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.wheel-container{position:relative;width:240px;height:240px;margin:10px auto}.wheel-pointer{position:absolute;top:-8px;left:50%;transform:translate(-50%);width:24px;height:28px;z-index:10;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}.wheel-canvas{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 5px #1e1b4b,0 0 0 8px #fbbf24,0 10px 25px #0009}