:root{--color-forest-dark: #1a3d1b;--color-forest: #2c5f2d;--color-forest-light: #4a9450;--color-forest-bright: #6ab04c;--color-brown-dark: #5d4037;--color-brown: #8d6e63;--color-brown-light: #a1887f;--color-amber: #ffb300;--color-amber-light: #ffc107;--color-yellow: #fdd835;--color-primary: #2c5f2d;--color-primary-light: #4a9450;--color-primary-dark: #1a3d1b;--color-secondary: #8d6e63;--color-accent: #ffb300;--color-warning: #fdd835;--color-success: #6ab04c;--color-error: #d32f2f;--gradient-forest: linear-gradient(135deg, #2c5f2d 0%, #4a9450 50%, #6ab04c 100%);--gradient-brown: linear-gradient(135deg, #5d4037 0%, #8d6e63 50%, #a1887f 100%);--gradient-amber: linear-gradient(135deg, #ffb300 0%, #ffc107 50%, #fdd835 100%);--gradient-forest-amber: linear-gradient(135deg, #2c5f2d 0%, #4a9450 50%, #ffb300 100%);--gradient-bg: linear-gradient(180deg, #1a3d1b 0%, #2c5f2d 50%, #1a1a1a 100%);--color-bg: #0f1a0f;--color-bg-light: rgba(26, 61, 27, .6);--color-bg-lighter: rgba(44, 95, 45, .4);--color-text: #ffffff;--color-text-muted: rgba(255, 255, 255, .7);--glass-bg: rgba(26, 61, 27, .25);--glass-border: rgba(255, 255, 255, .18);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--font-xs: 12px;--font-sm: 14px;--font-md: 16px;--font-lg: 20px;--font-xl: 24px;--font-2xl: 32px;--font-3xl: 40px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .7);--shadow-glow: 0 0 20px rgba(74, 148, 80, .5);--transition: .3s cubic-bezier(.4, 0, .2, 1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Oxygen,Ubuntu,Cantarell,sans-serif;background-image:url(/forest-background.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;overflow:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0f1a0fb3,#1a3d1bcc,#0f1a0fd9);pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(74,148,80,.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,179,0,.05) 0%,transparent 50%);animation:backgroundShift 20s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes backgroundShift{0%,to{opacity:1}50%{opacity:.6}}#app{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-md);font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;box-shadow:var(--shadow-md);letter-spacing:.5px}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn:active{transform:scale(.95);box-shadow:var(--shadow-sm)}.btn-primary{background:var(--gradient-forest);color:#fff;box-shadow:var(--shadow-md),var(--shadow-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 30px #4a945099}.btn-secondary{background:var(--gradient-brown);color:#fff}.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-accent{background:var(--gradient-amber);color:var(--color-forest-dark);font-weight:700}.btn-accent:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px #ffb30066}.btn-success{background:var(--gradient-forest);color:#fff}.btn-disabled{background:var(--color-bg-lighter);color:var(--color-text-muted);cursor:not-allowed;opacity:.5;box-shadow:none}.btn-disabled:active{transform:none}.btn-disabled:before{display:none}.card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--glass-shadow);transition:all var(--transition)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:#4a94504d}.card-glow{box-shadow:var(--shadow-lg),0 0 30px #4a94504d}.container{width:100%;max-width:600px;margin:0 auto;padding:var(--spacing-lg);height:100%;overflow-y:auto;position:relative;z-index:1}.container::-webkit-scrollbar{width:8px}.container::-webkit-scrollbar-track{background:#1a3d1b4d;border-radius:var(--radius-full)}.container::-webkit-scrollbar-thumb{background:var(--gradient-forest);border-radius:var(--radius-full)}.container::-webkit-scrollbar-thumb:hover{background:var(--gradient-forest-amber)}.screen{display:none;width:100%;height:100%;flex-direction:column;animation:fadeIn .4s ease-out}.screen.active{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.title{font-size:var(--font-3xl);font-weight:700;background:var(--gradient-forest-amber);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-lg);text-align:center;letter-spacing:-.5px}h1.title{font-size:var(--font-3xl)}h2.title{font-size:var(--font-2xl)}.role-selection{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin:var(--spacing-xl) 0}.role-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-xl);cursor:pointer;transition:all var(--transition);text-align:center;box-shadow:var(--glass-shadow);position:relative;overflow:hidden}.role-card:before{content:"";position:absolute;inset:0;background:var(--gradient-forest);opacity:0;transition:opacity var(--transition);z-index:0}.role-card>*{position:relative;z-index:1}.role-card:hover{transform:translateY(-8px) scale(1.02);border-color:#4a945080;box-shadow:var(--shadow-xl),0 0 40px #4a945066}.role-card:hover:before{opacity:.1}.role-card:active{transform:translateY(-4px) scale(.98)}.role-card.selected{border-color:var(--color-amber);box-shadow:var(--shadow-lg),0 0 30px #ffb30080;background:#ffb3001a}.role-card.selected:before{opacity:.2}.spinner{border:4px solid rgba(74,148,80,.2);border-top:4px solid var(--color-amber);border-right:4px solid var(--color-forest-light);border-radius:50%;width:48px;height:48px;animation:spin .8s cubic-bezier(.68,-.55,.265,1.55) infinite;box-shadow:0 0 20px #4a94504d}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.loading-screen{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--spacing-lg);height:100%}.progress-bar{width:100%;height:12px;background:#1a3d1b4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-full);overflow:hidden;box-shadow:inset 0 2px 4px #0000004d;border:1px solid rgba(74,148,80,.2)}.progress-bar-fill{height:100%;background:var(--gradient-forest-amber);border-radius:var(--radius-full);transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #4a945080;position:relative;overflow:hidden}.progress-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.flex{display:flex}.flex-col{flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}@media(max-width:768px){.container{padding:var(--spacing-sm)}:root{--font-xs: 11px;--font-sm: 13px;--font-md: 15px;--font-lg: 18px;--font-xl: 22px;--font-2xl: 28px}}.input-group{margin-bottom:var(--spacing-lg)}.input-label{display:block;margin-bottom:var(--spacing-sm);font-weight:600;color:var(--color-text);font-size:var(--font-sm)}.input{width:100%;padding:var(--spacing-md) var(--spacing-lg);background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--color-text);font-size:var(--font-md);transition:all var(--transition);box-shadow:var(--shadow-sm)}.input:focus{outline:none;border-color:var(--color-amber);box-shadow:var(--shadow-md),0 0 20px #ffb3004d;background:#1a3d1b66}.input::placeholder{color:var(--color-text-muted)}.bet-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:var(--spacing-md);margin:var(--spacing-lg) 0}.bet-option{padding:var(--spacing-md);background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid var(--glass-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition);text-align:center;font-weight:600;box-shadow:var(--shadow-sm)}.bet-option:hover{transform:translateY(-4px);border-color:var(--color-amber);box-shadow:var(--shadow-md)}.bet-option.selected{background:var(--gradient-amber);color:var(--color-forest-dark);border-color:var(--color-amber);box-shadow:var(--shadow-lg),0 0 20px #ffb30066}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background:#6ab04c33;color:var(--color-success);border:1px solid rgba(106,176,76,.3)}.badge-warning{background:#ffb30033;color:var(--color-amber);border:1px solid rgba(255,179,0,.3)}.badge-info{background:#4a945033;color:var(--color-forest-light);border:1px solid rgba(74,148,80,.3)}.waiting-dots{display:inline-flex;gap:var(--spacing-xs)}.waiting-dots span{width:8px;height:8px;border-radius:50%;background:var(--color-amber);animation:bounce 1.4s infinite ease-in-out}.waiting-dots span:nth-child(1){animation-delay:-.32s}.waiting-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}.welcome-banner{background:var(--gradient-forest);border-radius:var(--radius-xl);padding:var(--spacing-xl);display:flex;align-items:center;gap:var(--spacing-lg);box-shadow:var(--shadow-lg);position:relative;overflow:hidden;margin-bottom:var(--spacing-xl)}.welcome-banner:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:bannerShift 15s ease-in-out infinite}@keyframes bannerShift{0%,to{transform:translate(0)}50%{transform:translate(-30px,30px)}}.welcome-banner-content{flex:1;position:relative;z-index:1}.welcome-banner-icon{font-size:96px;position:relative;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.horizontal-scroll{display:flex;gap:var(--spacing-md);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--spacing-md) 0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.horizontal-scroll::-webkit-scrollbar{height:6px}.horizontal-scroll::-webkit-scrollbar-track{background:#1a3d1b4d;border-radius:var(--radius-full)}.horizontal-scroll::-webkit-scrollbar-thumb{background:var(--gradient-forest);border-radius:var(--radius-full)}.horizontal-scroll-item{scroll-snap-align:start;min-width:200px;flex-shrink:0}.large-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);transition:all var(--transition);position:relative;overflow:hidden}.large-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.large-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:#4a945066}.large-card:hover:before{left:100%}.currency-display{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-lg);font-weight:700}.currency-icon{font-size:var(--font-xl);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.modern-progress{height:16px;background:#1a3d1b4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-full);overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000004d;border:1px solid rgba(74,148,80,.2)}.modern-progress-fill{height:100%;background:var(--gradient-forest-amber);border-radius:var(--radius-full);box-shadow:0 0 10px #4a945080;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.modern-progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.section-title{font-size:var(--font-2xl);font-weight:700;background:var(--gradient-forest-amber);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.section-action{color:var(--color-amber);font-size:var(--font-sm);font-weight:600;text-decoration:none;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition)}.section-action:hover{transform:translate(4px);color:var(--color-amber-light)}.character-card{min-width:180px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);text-align:center;transition:all var(--transition);box-shadow:var(--shadow-md)}.character-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:#4a945066}.character-card-icon{font-size:80px;margin-bottom:var(--spacing-md);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.character-card-level{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs) var(--spacing-md);background:var(--gradient-amber);color:var(--color-forest-dark);border-radius:var(--radius-full);font-size:var(--font-sm);font-weight:700;margin-bottom:var(--spacing-sm)}.shop-item-card{min-width:160px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--spacing-md);transition:all var(--transition);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}.shop-item-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#4a945066}.shop-item-icon{font-size:64px;text-align:center;margin-bottom:var(--spacing-sm)}.shop-item-name{font-weight:600;margin-bottom:var(--spacing-xs);font-size:var(--font-sm)}.shop-item-price{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-size:var(--font-lg);font-weight:700;color:var(--color-amber);margin-bottom:var(--spacing-sm)}.search-bar{position:relative;margin-bottom:var(--spacing-lg)}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);padding-left:var(--spacing-2xl);background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--color-text);font-size:var(--font-md);transition:all var(--transition);box-shadow:var(--shadow-sm)}.search-input:focus{outline:none;border-color:var(--color-amber);box-shadow:var(--shadow-md),0 0 20px #ffb3004d;background:#1a3d1b66}.search-icon{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);font-size:var(--font-lg);color:var(--color-text-muted)}.filter-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);overflow-x:auto;padding:var(--spacing-xs) 0}.filter-tab{padding:var(--spacing-sm) var(--spacing-lg);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--color-text);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap}.filter-tab:hover{background:var(--color-bg-lighter)}.filter-tab.active{background:var(--gradient-amber);color:var(--color-forest-dark);border-color:var(--color-amber)}@media(hover:none)and (pointer:coarse){.btn{min-height:48px;min-width:48px}.role-card{min-height:200px}.character-card{min-width:160px}.shop-item-card{min-width:140px}}