@import url(https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&family=Inter:wght@400;500;600;700&display=swap);:root{--primary-gold:#daa520;--secondary-gold:gold;--accent-gold:orange;--cool-blue:#4fa0af;--cool-light:#6bb6c4;--cool-bright:#87ceeb;--dark-bg:#0f1423fa;--glass-bg:#ffffff0d;--text-primary:beige;--text-secondary:#e8d5b7;--text-muted:#b8860b;--success:#10b981;--error:#ef4444;--warning:#f59e0b;--info:#3b82f6;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--icon-size-sm:2rem;--icon-size-md:3rem;--icon-size-lg:4rem;--icon-size-xl:8rem;--button-height-sm:2.5rem;--button-height-md:3rem;--button-height-lg:3.5rem;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:16px;--border-radius-xl:20px;--border-radius-2xl:24px;--animation-fast:0.15s;--animation-normal:0.2s;--animation-slow:0.3s;--focus-outline:2px solid var(--secondary-gold);--focus-outline-offset:2px;--tooltip-bg:#000000e6;--tooltip-text:#fff;--tooltip-border:1px solid var(--primary-gold)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[tabindex]:focus-visible,button:focus-visible{box-shadow:0 0 10px #daa5204d;outline:2px solid gold;outline:var(--focus-outline);outline-offset:2px;outline-offset:var(--focus-outline-offset)}.focused{box-shadow:0 0 15px #daa52066;outline:2px solid gold;outline:var(--focus-outline);outline-offset:2px;outline-offset:var(--focus-outline-offset)}.battle-section .element-btn:focus-visible,.battle-section .elemental-btn:focus-visible,.battle-section .location-btn:focus-visible{box-shadow:0 0 5px #ffffff1a;outline:1px solid #ffffff4d;outline-offset:1px}.element-tooltip,.location-tooltip{animation:tooltipFadeIn .2s ease-out;animation:tooltipFadeIn var(--animation-normal) ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000e6;background:var(--tooltip-bg);border:1px solid #daa520;border:var(--tooltip-border);border-radius:12px;border-radius:var(--border-radius-md);bottom:100%;box-shadow:0 4px 12px #0000004d;color:#fff;color:var(--tooltip-text);font-size:.875rem;font-size:var(--font-size-sm);left:50%;margin-bottom:8px;padding:8px 12px;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:1000}.element-tooltip{max-width:200px;text-align:center;white-space:normal}.element-tooltip strong{color:gold;color:var(--secondary-gold);display:block;margin-bottom:4px}.element-tooltip p{font-size:.75rem;font-size:var(--font-size-xs);line-height:1.4;margin:0}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.insufficient-mana-indicator{background:#ef4444e6;border-radius:0 12px 0 12px;border-radius:0 var(--border-radius-md) 0 var(--border-radius-md);color:#fff;font-size:.75rem;font-size:var(--font-size-xs);font-weight:600;padding:2px 6px;position:absolute;right:0;top:0}.insufficient-mana-indicator span{margin-right:4px}.keyboard-hint{color:#b8860b;color:var(--text-muted);font-style:italic;margin-top:1rem;margin-top:var(--spacing-md);text-align:center}.elemental-protection,.elemental-usage{align-items:center;color:#e8d5b7;color:var(--text-secondary);display:flex;font-size:.75rem;font-size:var(--font-size-xs);gap:4px;margin:2px 0}.cooldown-progress-bar{background:#fff3;border-radius:2px;height:4px;margin-top:4px;overflow:hidden;width:100%}.cooldown-progress-fill{background:linear-gradient(90deg,#10b981,#f59e0b);background:linear-gradient(90deg,var(--success),var(--warning));border-radius:2px;height:100%;transition:width .2s ease-out;transition:width var(--animation-normal) ease-out}button:hover:not(:disabled){box-shadow:0 4px 15px #daa5204d}button:active:not(:disabled){transform:translateY(0);transition:transform .15s;transition:transform var(--animation-fast)}button:disabled{cursor:not-allowed;filter:grayscale(20%);opacity:.6}.secondary-btn{background:linear-gradient(135deg,#4fa0af,#6bb6c4);background:linear-gradient(135deg,var(--cool-blue),var(--cool-light));border:none;border-radius:12px;border-radius:var(--border-radius-md);color:#fff;cursor:pointer;font-weight:600;margin-top:1rem;margin-top:var(--spacing-md);padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease;transition:all var(--animation-normal) ease}.secondary-btn:hover:not(:disabled){background:linear-gradient(135deg,#6bb6c4,#87ceeb);background:linear-gradient(135deg,var(--cool-light),var(--cool-bright));transform:translateY(-2px)}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.battle-section{animation:scaleIn .3s ease-out;animation:scaleIn var(--animation-slow) ease-out}@media (prefers-contrast:high){:root{--glass-bg:#ffffff1a;--text-primary:#fff;--text-secondary:#f0f0f0}.element-btn,.elemental-btn,.location-btn{border:2px solid #daa520;border:2px solid var(--primary-gold)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.focused,button:hover:not(:disabled){transform:none!important}}.tutorial-overlay{align-items:center;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;padding:var(--spacing-md);position:fixed;right:0;top:0;z-index:10000}.tutorial-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b3;bottom:0;left:0;position:absolute;right:0;top:0}.tutorial-tooltip{animation:tutorialSlideIn .3s ease-out;animation:tutorialSlideIn var(--animation-slow) ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #fff3;border-radius:20px;border-radius:var(--border-radius-xl);box-shadow:0 20px 40px #0006;color:beige;color:var(--text-primary);max-width:400px;padding:1.5rem;padding:var(--spacing-lg);position:relative;width:100%}.tutorial-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-md);padding-bottom:.5rem;padding-bottom:var(--spacing-sm)}.tutorial-title{color:gold;color:var(--secondary-gold);font-size:1.25rem;font-size:var(--font-size-xl);font-weight:700;margin:0}.tutorial-close{background:none;border:none;border-radius:8px;border-radius:var(--border-radius-sm);color:#b8860b;color:var(--text-muted);cursor:pointer;font-size:1.125rem;font-size:var(--font-size-lg);padding:.25rem;padding:var(--spacing-xs);transition:all .2s ease;transition:all var(--animation-normal) ease}.tutorial-close:hover{background:#ffffff1a;color:beige;color:var(--text-primary)}.tutorial-content{margin-bottom:1.5rem;margin-bottom:var(--spacing-lg)}.tutorial-content p{color:#e8d5b7;color:var(--text-secondary);line-height:1.6;margin:0}.tutorial-footer{display:flex;flex-direction:column;gap:1rem;gap:var(--spacing-md)}.tutorial-progress{align-items:center;display:flex;gap:.5rem;gap:var(--spacing-sm)}.tutorial-step-counter{color:#b8860b;color:var(--text-muted);font-size:.875rem;font-size:var(--font-size-sm);min-width:60px}.tutorial-progress-bar{background:#fff3;border-radius:2px;flex:1 1;height:4px;overflow:hidden}.tutorial-progress-fill{background:linear-gradient(90deg,#daa520,gold);background:linear-gradient(90deg,var(--primary-gold),var(--secondary-gold));border-radius:2px;height:100%;transition:width .3s ease-out;transition:width var(--animation-slow) ease-out}.tutorial-buttons{display:flex;gap:.5rem;gap:var(--spacing-sm);justify-content:flex-end}.tutorial-btn{border:none;border-radius:12px;border-radius:var(--border-radius-md);cursor:pointer;font-size:.875rem;font-size:var(--font-size-sm);font-weight:600;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease;transition:all var(--animation-normal) ease}.tutorial-btn-secondary{background:#ffffff1a;border:1px solid #fff3;color:#e8d5b7;color:var(--text-secondary)}.tutorial-btn-secondary:hover{background:#fff3;color:beige;color:var(--text-primary)}.tutorial-btn-primary{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));color:#fff;font-weight:700}.tutorial-btn-primary:hover{background:linear-gradient(135deg,gold,orange);background:linear-gradient(135deg,var(--secondary-gold),var(--accent-gold));box-shadow:0 4px 12px #daa5204d;transform:translateY(-1px)}@keyframes tutorialSlideIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.tutorial-section{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;border-radius:var(--border-radius-lg);margin:1.5rem 0;margin:var(--spacing-lg) 0;padding:1rem;padding:var(--spacing-md)}.tutorial-section-title{align-items:center;color:gold;color:var(--secondary-gold);display:flex;font-size:1.125rem;font-size:var(--font-size-lg);font-weight:600;gap:.5rem;gap:var(--spacing-sm);margin:0 0 1rem;margin:0 0 var(--spacing-md) 0}.tutorial-button{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;border-radius:var(--border-radius-md);color:beige;color:var(--text-primary);cursor:pointer;display:flex;gap:1rem;gap:var(--spacing-md);margin-bottom:.5rem;margin-bottom:var(--spacing-sm);padding:1rem;padding:var(--spacing-md);text-align:left;transition:all .2s ease;transition:all var(--animation-normal) ease;width:100%}.tutorial-button:hover{background:#ffffff1a;border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 4px 12px #daa52033;transform:translateY(-1px)}.tutorial-button:last-child{margin-bottom:0}.tutorial-icon{font-size:1.5rem;font-size:var(--font-size-2xl);min-width:40px;text-align:center}.tutorial-content{display:flex;flex-direction:column;gap:4px}.tutorial-title{color:beige;color:var(--text-primary);font-size:1rem;font-size:var(--font-size-base);font-weight:600}.tutorial-description{color:#b8860b;color:var(--text-muted);font-size:.875rem;font-size:var(--font-size-sm);line-height:1.4}.battle-tutorial:hover .tutorial-icon{animation:bounce .6s ease-in-out}.collection-tutorial:hover .tutorial-icon{animation:pulse .6s ease-in-out}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(-3px)}}@media (max-width:480px){.tutorial-tooltip{max-width:90vw;padding:1rem;padding:var(--spacing-md)}.tutorial-title{font-size:1.125rem;font-size:var(--font-size-lg)}.tutorial-buttons{flex-direction:column}.tutorial-btn{padding:1rem;padding:var(--spacing-md);width:100%}.tutorial-button{padding:.5rem;padding:var(--spacing-sm)}.tutorial-icon{font-size:1.25rem;font-size:var(--font-size-xl);min-width:30px}.tutorial-content{gap:2px}.tutorial-title{font-size:.875rem;font-size:var(--font-size-sm)}.tutorial-description{font-size:.75rem;font-size:var(--font-size-xs)}}@media (prefers-color-scheme:dark){:root{--tooltip-bg:#141414f2;--tooltip-text:#fff}}@media (max-width:480px){:root{--font-size-xs:0.625rem;--font-size-sm:0.75rem;--font-size-base:0.875rem;--font-size-lg:1rem;--font-size-xl:1.125rem;--font-size-2xl:1.25rem;--font-size-3xl:1.5rem;--font-size-4xl:1.875rem;--font-size-5xl:2.25rem;--spacing-xs:0.125rem;--spacing-sm:0.25rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.5rem;--icon-size-sm:1.5rem;--icon-size-md:2rem;--icon-size-lg:2.5rem;--icon-size-xl:5rem;--button-height-sm:2rem;--button-height-md:2.5rem;--button-height-lg:3rem;--border-radius-sm:6px;--border-radius-md:8px;--border-radius-lg:10px;--border-radius-xl:12px;--border-radius-2xl:16px}.element-tooltip,.location-tooltip{font-size:.625rem;max-width:150px;padding:6px 8px}.keyboard-hint{font-size:.625rem}}@media (max-width:420px){:root{--font-size-xs:0.5rem;--font-size-sm:0.625rem;--font-size-base:0.75rem;--font-size-lg:0.875rem;--font-size-xl:1rem;--font-size-2xl:1.125rem;--font-size-3xl:1.375rem;--font-size-4xl:1.625rem;--font-size-5xl:2rem;--spacing-xs:0.1rem;--spacing-sm:0.2rem;--spacing-md:0.4rem;--spacing-lg:0.6rem;--spacing-xl:0.8rem;--spacing-2xl:1.2rem;--icon-size-sm:1.25rem;--icon-size-md:1.75rem;--icon-size-lg:2.25rem;--icon-size-xl:4rem;--button-height-sm:1.75rem;--button-height-md:2.25rem;--button-height-lg:2.75rem;--border-radius-sm:4px;--border-radius-md:6px;--border-radius-lg:8px;--border-radius-xl:10px;--border-radius-2xl:12px}}@media (min-width:481px) and (max-width:768px){:root{--font-size-xs:0.6875rem;--font-size-sm:0.8125rem;--font-size-base:0.9375rem;--font-size-lg:1.0625rem;--font-size-xl:1.1875rem;--font-size-2xl:1.375rem;--font-size-3xl:1.6875rem;--font-size-4xl:2rem;--font-size-5xl:2.5rem;--spacing-xs:0.1875rem;--spacing-sm:0.375rem;--spacing-md:0.75rem;--spacing-lg:1.125rem;--spacing-xl:1.5rem;--spacing-2xl:2rem;--icon-size-sm:1.75rem;--icon-size-md:2.5rem;--icon-size-lg:3rem;--icon-size-xl:6rem;--button-height-sm:2.25rem;--button-height-md:2.75rem;--button-height-lg:3.25rem;--border-radius-sm:7px;--border-radius-md:10px;--border-radius-lg:12px;--border-radius-xl:16px;--border-radius-2xl:20px}}@media (min-width:769px) and (max-width:1024px){:root{--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--icon-size-sm:2rem;--icon-size-md:3rem;--icon-size-lg:4rem;--icon-size-xl:7rem;--button-height-sm:2.5rem;--button-height-md:3rem;--button-height-lg:3.5rem;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:16px;--border-radius-xl:20px;--border-radius-2xl:24px}}@media (min-width:1025px){:root{--font-size-xs:0.875rem;--font-size-sm:1rem;--font-size-base:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:1.75rem;--font-size-3xl:2.25rem;--font-size-4xl:2.75rem;--font-size-5xl:3.5rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.25rem;--spacing-lg:2rem;--spacing-xl:2.5rem;--spacing-2xl:4rem;--icon-size-sm:2.5rem;--icon-size-md:3.5rem;--icon-size-lg:5rem;--icon-size-xl:8rem;--button-height-sm:3rem;--button-height-md:3.5rem;--button-height-lg:4rem;--border-radius-sm:10px;--border-radius-md:16px;--border-radius-lg:20px;--border-radius-xl:24px;--border-radius-2xl:32px}}*{-ms-overflow-style:none;box-sizing:border-box;margin:0;padding:0;scrollbar-width:none}::-webkit-scrollbar{display:none}html{-ms-overflow-style:none;-webkit-touch-callout:none;height:100%;overflow:hidden;scrollbar-width:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}html::-webkit-scrollbar{display:none}body{-ms-overflow-style:none;-webkit-touch-callout:none;background:#18182c;color:beige;color:var(--text-primary);font-family:Inter,sans-serif;height:100%;line-height:1.6;margin:0!important;overflow:hidden;padding:0!important;scrollbar-width:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}body::-webkit-scrollbar{display:none}.glass-gradient-header{height:80px;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:1000}.glass-gradient-overlay{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#0000;height:100%;mask:linear-gradient(180deg,#000 0,#000c 30%,#0009 60%,#0000);-webkit-mask:linear-gradient(180deg,#000 0,#000c 30%,#0009 60%,#0000);width:100%}.app{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;background:#18182c;height:100vh;margin:0 auto;max-width:765px;overflow-x:hidden;overflow-y:auto;padding-top:80px;position:relative;scroll-behavior:smooth;scrollbar-width:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;width:100%}.app::-webkit-scrollbar{display:none}.app-content{background:#18182c;margin:0 auto;max-width:820px;min-height:calc(100vh - 180px);padding:0 1rem 100px;width:100%}.profile-header-modern{align-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:#0000;border:none;border-radius:12px;color:beige;color:var(--text-primary);display:flex;margin:.25rem auto .5rem;max-width:820px;padding:0 1rem;transition:opacity .18s ease,transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;width:100%}.profile-header-modern:hover{box-shadow:none}.ph-left{align-items:center;background:#0000;border:none;border-radius:8px;color:inherit;cursor:pointer;display:inline-flex;gap:.2rem;padding:.375rem .75rem;text-align:left}.ph-left:hover{background:#ffffff0f}.ph-avatar-wrap{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;display:inline-flex;height:28px;justify-content:center;overflow:hidden;width:28px}.ph-avatar{font-size:.95rem}.ph-avatar-img{height:100%;object-fit:cover;width:100%}.ph-name{font-family:Volkhov,serif;font-weight:600;letter-spacing:.2px}.ph-right{align-items:center;display:inline-flex;margin-left:auto}.ph-mana{background:#35b7ff14;border:1px solid #35b7ff40;border-radius:8px;color:#3b82f6;color:var(--info);font-weight:700;padding:.375rem .75rem;white-space:nowrap}@media (max-width:480px){.app-content,.profile-header-modern{border-radius:10px;max-width:820px;padding-left:.75rem;padding-right:.75rem;width:100%}.ph-mana,.ph-name{font-size:.75rem;font-size:var(--font-size-xs)}}@media (max-width:420px){.ph-left{padding:.5rem 1rem}.ph-avatar-wrap{height:40px;width:40px}.ph-avatar{font-size:1.35rem}.ph-mana,.ph-name{font-size:.7rem}.ph-mana{padding:.5rem 1rem}}@media (min-width:768px){.app-content,.profile-header-modern{max-width:820px;padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.app-content,.profile-header-modern{max-width:820px;padding-left:2rem;padding-right:2rem}}.card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 8px 32px #0000004d;margin-bottom:1rem;padding:1.5rem;transition:all .3s ease}.card:hover{border-color:#daa5204d;box-shadow:0 12px 40px #0006;transform:translateY(-2px)}.card-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.75rem;font-weight:600;margin-bottom:1rem;position:relative;text-align:center}.card-title:after{background:linear-gradient(90deg,#0000,#daa520,#0000);background:linear-gradient(90deg,#0000,var(--primary-gold),#0000);bottom:-.5rem;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:40px}.profile-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:24px;box-shadow:0 8px 32px #0000004d;margin-bottom:1rem;overflow:hidden;padding:1.5rem;position:relative;transition:all .3s ease}@keyframes levelUpVibration{0%,to{transform:translateX(0) translateY(0) rotate(0deg)}10%{transform:translateX(-2px) translateY(-1px) rotate(-.5deg)}20%{transform:translateX(2px) translateY(1px) rotate(.5deg)}30%{transform:translateX(-3px) translateY(-2px) rotate(-1deg)}40%{transform:translateX(3px) translateY(2px) rotate(1deg)}50%{transform:translateX(-4px) translateY(-3px) rotate(-1.5deg)}60%{transform:translateX(4px) translateY(3px) rotate(1.5deg)}70%{transform:translateX(-3px) translateY(-2px) rotate(-1deg)}80%{transform:translateX(3px) translateY(2px) rotate(1deg)}90%{transform:translateX(-2px) translateY(-1px) rotate(-.5deg)}}.profile-header{border-bottom:1px solid #ffffff1a;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem}.profile-avatar{flex-shrink:0;position:relative}.avatar-ring{background:linear-gradient(135deg,#daa520,orange);background:linear-gradient(135deg,var(--primary-gold),var(--accent-gold));border-radius:50%;height:70px;padding:3px;position:relative;width:70px}.avatar-inner{align-items:center;background:#0f1423fa;background:var(--dark-bg);border-radius:50%;color:gold;color:var(--secondary-gold);display:flex;font-size:1.8rem;height:100%;justify-content:center;width:100%}.rank-badge{background:linear-gradient(135deg,#4fa0af,#6bb6c4);background:linear-gradient(135deg,var(--cool-blue),var(--cool-light));border-radius:8px;bottom:-5px;box-shadow:0 2px 8px #0000004d;color:#fff;font-size:.6rem;font-weight:600;letter-spacing:.5px;padding:.25rem .5rem;position:absolute;right:-5px;text-transform:uppercase}.profile-info{flex:1 1;min-width:0}.player-name{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.3rem;font-weight:700;margin-bottom:.25rem;text-shadow:0 2px 4px #00000080}.player-title{color:#b8860b;color:var(--text-muted);font-size:.85rem;font-style:italic;margin-bottom:.75rem}.experience-bar{background:#0000004d;height:8px;overflow:hidden}.exp-fill,.experience-bar{border-radius:4px;position:relative}.exp-fill{transition:width .5s ease}.exp-fill:after{animation:shimmer 2s ease-in-out infinite;background:linear-gradient(90deg,#0000,#ffffff4d,#0000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.exp-text{color:#e8d5b7;color:var(--text-secondary);font-size:.7rem;font-weight:500;position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}.enhanced-stats-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.5rem}.stat-card{background:#0003;border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;padding:1rem;position:relative;text-align:center}.stat-icon{font-size:2.4rem;margin-bottom:.5rem;opacity:.8}.stat-value{font-family:Volkhov,serif;font-size:1.5rem}.stat-label,.stat-value{margin-bottom:.25rem}.stat-change{color:#10b981;color:var(--success);font-size:.65rem;font-weight:600}.stat-change.negative{color:#ef4444;color:var(--error)}.stat-subtext{color:#b8860b;color:var(--text-muted);font-size:.65rem;font-style:italic}.achievements-section{margin-bottom:1rem}.section-title{color:#e8d5b7;color:var(--text-secondary);font-size:.85rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.achievements-list{display:flex;flex-direction:column;gap:.5rem}.achievement-item{align-items:center;background:#0003;border:1px solid #ffffff1a;border-radius:12px;display:flex;gap:.75rem;padding:.75rem;transition:all .3s ease}.achievement-item.unlocked{background:#10b9811a;border-color:#10b981;border-color:var(--success)}.achievement-item.locked{opacity:.6}.achievement-icon{align-items:center;background:#ffffff1a;border-radius:8px;display:flex;font-size:1.2rem;height:32px;justify-content:center;width:32px}.achievement-item.unlocked .achievement-icon{background:#10b981;background:var(--success)}.achievement-text{flex:1 1}.achievement-name{color:beige;color:var(--text-primary);font-size:.8rem;font-weight:600;margin-bottom:.1rem}.achievement-desc{color:#b8860b;color:var(--text-muted);font-size:.7rem}.achievement-progress{color:gold;color:var(--secondary-gold);font-size:.65rem;font-weight:600;margin-top:.25rem}.quick-stats{border-top:1px solid #ffffff1a;display:flex;flex-direction:column;gap:.5rem;padding-top:1rem}.quick-stat{align-items:center;display:flex;justify-content:space-between}.quick-stat-label{color:#b8860b;color:var(--text-muted);font-size:.75rem}.quick-stat-value{color:beige;color:var(--text-primary);font-size:.75rem;font-weight:600}.btn-primary{background:linear-gradient(121deg,#d6aa48 20.51%,#d6aa48 0,#d6aa48 0);background:var(
    --Gold,linear-gradient(121deg,#d6aa48 20.51%,#d6aa48 20.51%,#d6aa48 20.51%)
  );border:none;border-radius:10px;box-shadow:0 4px 12px #0003;color:#1a1a1a;cursor:pointer;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.5px;overflow:hidden;position:relative;text-transform:uppercase;transform:translateY(-1px);transition:all .3s ease;width:100%}.btn-primary,.btn-primary:hover{align-items:center;display:inline-flex;gap:10px;justify-content:center;padding:10px 30px}.btn-primary:hover{background:linear-gradient(121deg,#d6aa48 20.51%,#ffe9b1 50.38%,#d6aa48 80.86%);background:var(
    --Gold,linear-gradient(121deg,#d6aa48 20.51%,#ffe9b1 50.38%,#d6aa48 80.86%)
  );border-radius:10px;box-shadow:0 8px 25px #daa52066;transform:translateY(-2px);transition:all .2s linear}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{box-shadow:0 4px 15px #daa5201a;cursor:not-allowed;opacity:.5;transform:none}.element-grid{grid-gap:.5rem;grid-gap:var(--spacing-sm);display:grid;gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(3,1fr);margin:1rem 0;margin:var(--spacing-md) 0}.element-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:16px;border-radius:var(--border-radius-lg);cursor:pointer;display:flex;flex-direction:column;height:120px;justify-content:center;overflow:hidden;padding:1rem;padding:var(--spacing-md);position:relative;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.element-btn:hover{border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 8px 25px #daa5204d;transform:translateY(-4px)}.element-btn.selected{background:#daa5201a;border-color:gold;border-color:var(--secondary-gold);box-shadow:0 8px 25px #daa52066;transform:translateY(-4px)}.element-emoji{display:block;font-size:2.5rem;margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.element-name{color:#e8d5b7;color:var(--text-secondary);font-size:.75rem;font-size:var(--font-size-xs);line-height:1.2;text-shadow:0 1px 2px #000c}.battle-display{gap:1.5rem;gap:var(--spacing-lg)}.battle-choice{gap:.5rem;gap:var(--spacing-sm)}.battle-emoji{font-size:4rem;font-size:var(--icon-size-lg)}.battle-vs{font-size:1.875rem;font-size:var(--font-size-3xl);text-shadow:0 2px 8px #000c}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000080;display:flex;height:100%;justify-content:center;left:0;opacity:0;padding:12px;position:fixed;top:0;transition:all .3s cubic-bezier(.4,0,.2,1);visibility:hidden;width:100%;z-index:999998}.modal-overlay.active{opacity:1;visibility:visible}body.modal-open{bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}body.modal-open,body.modal-open *,body.modal-open .app,body.modal-open .rules-page{overflow:hidden!important}body.modal-open .rules-scroll-container{overflow-y:auto!important}body.modal-open .rules-scroll-container *{overflow:visible!important}body.modal-open .collection-container-modern{overflow:hidden!important;position:relative!important}.modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:24px;box-shadow:0 16px 40px #0009;left:50%;max-height:calc(100vh - 24px);max-width:300px;overflow:hidden;padding:1.25rem;position:fixed;top:50vh;transform:translate(-50%,-50%) scale(.9);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;z-index:1501}.modal-overlay.active .modal{transform:translate(-50%,-50%) scale(1)}.modal.loading-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;box-shadow:0 20px 60px #000c}.modal-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.2rem;font-weight:700;margin-bottom:1rem;text-align:center;text-shadow:0 2px 8px #000c}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes logo-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-180deg)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(0deg)}to{opacity:.8;transform:translate(-50%,-50%) scale(1) rotate(180deg)}}.mobile-nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:20px;bottom:20px!important;box-shadow:0 4px 20px #0000004d;left:50%!important;max-width:725px!important;padding:.5rem 0;position:fixed!important;transform:translateX(-50%)!important;width:calc(100% - 40px)!important;z-index:9999!important}.nav-container{justify-content:space-around;margin:0 auto;max-width:100%;padding:0 1rem}.nav-container,.nav-item{align-items:center;display:flex}.nav-item{border-radius:12px;color:#b8860b;color:var(--text-muted);cursor:pointer;flex-direction:column;gap:.25rem;min-width:60px;padding:.5rem;position:relative;text-decoration:none;transition:all .3s ease}.nav-item:hover{background:#ffffff0d;transform:translateY(-2px)}.nav-item.active{background:#daa5201a;color:gold;color:var(--secondary-gold)}.nav-item.active:before{background:gold;background:var(--secondary-gold);border-radius:50%;box-shadow:0 0 8px gold;box-shadow:0 0 8px var(--secondary-gold);content:"";height:4px;left:50%;position:absolute;top:-.75rem;transform:translateX(-50%);width:4px}.nav-icon{font-size:1.5rem;margin-bottom:.1rem;transition:all .3s ease}.nav-item.active .nav-icon{filter:drop-shadow(0 2px 4px rgba(218,165,32,.5));transform:scale(1.1)}.nav-item.active .nav-label,.nav-label{display:none}.settings-overlay{align-items:center;animation:fadeIn .4s ease-out;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#0f1423fa;background:var(--dark-bg);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.settings-menu{animation:slideIn .4s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(145deg,#0f1423f2,#191e2de6);border:1px solid #daa5204d;border-radius:20px;box-shadow:0 20px 40px #0009,0 8px 16px #0000004d;display:flex;flex-direction:column;left:50%;max-height:85vh;max-width:600px;overflow:hidden;padding:0;position:fixed;top:50vh;transform:translate(-50%,-50%);width:90%;z-index:10001}.settings-menu:before{background:radial-gradient(circle at 20% 80%,#daa5201a 0,#0000 50%),radial-gradient(circle at 80% 20%,#ffd7000d 0,#0000 50%);border-radius:20px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}@keyframes slideIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.settings-header{align-items:center;border-radius:19px 19px 0 0;color:#0f1423fa;color:var(--dark-bg);display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden;padding:8px 18px;position:relative}.settings-header:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-header h2{align-items:center;display:flex;font-size:1.4rem;gap:12px;letter-spacing:.5px;position:relative;text-shadow:0 2px 4px #0000004d;z-index:1}.settings-header h2:before{content:"";font-size:1.8rem}.close-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f142333;border:1px solid #0f14234d;border-radius:10px;color:#0f1423fa;color:var(--dark-bg);cursor:pointer;display:flex;font-size:16px;font-weight:600;height:32px;justify-content:center;position:relative;transition:all .3s ease;width:32px;z-index:2}.close-button:hover{background:#0f1423cc;border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 4px 12px #0000004d;color:#daa520;color:var(--primary-gold);transform:scale(1.05)}.settings-content{background:#0000;overflow-y:auto;padding:20px;position:relative;scrollbar-color:#daa520 #ffffff1a;scrollbar-color:var(--primary-gold) #ffffff1a;scrollbar-width:thin;z-index:1}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.settings-content::-webkit-scrollbar-thumb{background:#daa520;background:var(--primary-gold);border-radius:4px}.settings-content::-webkit-scrollbar-thumb:hover{background:gold;background:var(--secondary-gold)}.setting-header{align-items:center;display:flex;margin-bottom:12px}.setting-header:after{background:#daa520;background:var(--primary-gold);border-radius:1px;bottom:-1px;content:"";height:2px;left:0;position:absolute;width:50px}.setting-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:1.4rem;margin-right:10px}.setting-label{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;letter-spacing:.3px;text-shadow:0 1px 2px #000c}.toggle-button{border:none;border-radius:20px;cursor:pointer;font-size:.9rem;font-weight:700;min-width:60px;padding:8px 16px;transition:all .3s ease}.toggle-button.enabled{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff}.toggle-button.disabled{background:linear-gradient(45deg,#ff6b6b,#ee5a52);color:#fff}.toggle-button:hover{box-shadow:0 4px 15px #0003;transform:scale(1.05)}.slider-container{align-items:center;display:flex;gap:10px}.volume-slider{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#0f1423cc,#191e2d99);background-size:100% 100%;border:1px solid #daa5204d;border-radius:8px;box-shadow:inset 0 2px 4px #0000004d;cursor:pointer;flex:1 1;height:8px;outline:none;position:relative;transition:all .3s ease}.volume-slider:hover{border-color:#daa52099;box-shadow:0 0 10px #daa52033}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border:2px solid #0f1423cc;border-radius:50%;box-shadow:0 4px 12px #daa52066,inset 0 1px 0 #ffffff4d;cursor:pointer;height:20px;-webkit-transition:transform .2s ease,box-shadow .2s ease;transition:transform .2s ease,box-shadow .2s ease;width:20px}.volume-slider::-webkit-slider-thumb:hover{box-shadow:0 6px 16px #daa52099,inset 0 1px 0 #ffffff80;transform:scale(1.2)}.volume-slider::-moz-range-thumb{background:linear-gradient(45deg,#4ecdc4,#44a08d);border:none;border-radius:50%;box-shadow:0 2px 10px #0000004d;cursor:pointer;height:20px;width:20px}.volume-slider:disabled{cursor:not-allowed;opacity:.5}.volume-slider:disabled::-webkit-slider-thumb{cursor:not-allowed;opacity:.5}.volume-value{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #daa5204d;border-radius:12px;box-shadow:0 2px 8px #0003;color:gold;color:var(--secondary-gold);flex-shrink:0;font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;min-width:70px;padding:8px 12px;text-align:center;text-shadow:0 1px 2px #000c;transition:all .3s ease;width:70px}.volume-value:hover{background:#daa52033;border-color:#daa52080;transform:scale(1.05)}.setting-description{background:#ffffff08;border:1px solid #ffffff0d;border-radius:8px;color:#e8d5b7;color:var(--text-secondary);font-size:.95rem;font-style:italic;margin-top:15px;opacity:.7;padding:8px 12px;text-align:center;text-shadow:0 1px 2px #0000004d}.setting-item{align-items:center;display:flex;justify-content:space-between;padding:15px 0;transition:all .3s ease}.setting-item:last-child{border-bottom:none}.setting-item:hover{background:#daa5200d;border-radius:8px;margin:0 -10px;padding-left:10px;padding-right:10px}.setting-item span{color:beige;color:var(--text-primary);font-size:1.1rem;font-weight:500;text-shadow:0 1px 2px #0000004d}.toggle-switch{background:#0f142399;border:1px solid #daa5204d;border-radius:14px;cursor:pointer;height:28px;position:relative;transition:all .3s ease;width:55px}.toggle-switch:hover{border-color:#daa52080;box-shadow:0 0 10px #daa52033}.toggle-switch input{height:0;opacity:0;width:0}.toggle-switch label{background:linear-gradient(135deg,#0f1423cc,#191e2d99);border:1px solid #daa52033;border-radius:14px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s ease}.toggle-switch label:before{background:linear-gradient(135deg,#ccc,#ddd);border-radius:50%;bottom:3px;box-shadow:0 2px 4px #0003;content:"";height:20px;left:3px;position:absolute;transition:.4s ease;width:20px}.toggle-switch input:checked+label{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-color:#daa52099}.toggle-switch input:checked+label:before{background:linear-gradient(135deg,#fff,#f8f8f8);box-shadow:0 2px 6px #0000004d;transform:translateX(27px)}.rules-button{align-items:center;background:linear-gradient(135deg,#daa520,orange);background:linear-gradient(135deg,var(--primary-gold),var(--accent-gold));border:none;border-radius:16px;box-shadow:0 4px 15px #daa5204d;color:#fff;cursor:pointer;display:flex;font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;gap:8px;justify-content:flex-start;letter-spacing:.3px;overflow:hidden;padding:1rem 1.2rem;position:relative;transition:all .3s ease;width:100%}.rules-button .span-text{text-shadow:0 1px 2px #000c,0 0 8px #000000e6,1px 1px 0 #000c,-1px -1px 0 #000c,1px -1px 0 #000c,-1px 1px 0 #000c}.rules-button:hover{box-shadow:0 8px 25px #daa52066}.rules-button:active{transform:translateY(0)}.rules-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:1.5rem}.reset-cache-button{align-items:center;background:#a92d2d;border:none;border-radius:16px;box-shadow:0 4px 15px #ef44444d;color:#fff;cursor:pointer;display:flex;font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;gap:8px;justify-content:flex-start;letter-spacing:.3px;overflow:hidden;padding:1rem 1.2rem;position:relative;transition:all .3s ease;width:100%}.reset-cache-button .span-text{text-shadow:0 1px 2px #000c,0 0 8px #000000e6,1px 1px 0 #000c,-1px -1px 0 #000c,1px -1px 0 #000c,-1px 1px 0 #000c}.reset-cache-button:hover{box-shadow:0 8px 25px #ef444466}.reset-cache-button:active{transform:translateY(0)}.reset-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:1.5rem}.reset-cache-button span:not(.reset-icon),.rules-button span:not(.rules-icon){flex:1 1;margin-right:1.5rem;text-align:center}.settings-tab{display:flex;flex:1 1;flex-direction:column;margin:0 auto;max-width:1200px;padding:0;width:100%}.settings-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;border-radius:var(--border-radius-xl);margin:1rem}.settings-header{margin-bottom:1rem;text-align:center}.settings-header h2{color:#daa520;color:var(--primary-gold);font-family:Volkhov,serif;font-size:1.875rem;font-size:var(--font-size-3xl);font-weight:700;margin:0;text-shadow:0 2px 4px #00000080}.settings-content{display:flex;flex:1 1;flex-direction:column;gap:1.5rem}.music-volume-container{width:100%}.music-volume-slider-wrapper{background:#0000;border:none;border-radius:16px;height:80px;overflow:hidden;position:relative;transition:all .3s ease;width:100%}.music-volume-slider{-webkit-appearance:none;appearance:none;background:#0000;border-radius:16px;cursor:pointer;height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:2}.music-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#0000;border:none;border-radius:50%;box-shadow:none;cursor:pointer;height:24px;-webkit-transition:all .2s ease;transition:all .2s ease;width:24px}.music-volume-slider::-webkit-slider-thumb:hover{box-shadow:none;transform:scale(1.2)}.music-volume-slider::-moz-range-thumb{background:#0000;border:none;border-radius:50%;box-shadow:none;cursor:pointer;height:24px;width:24px}.music-volume-label{align-items:center;display:flex;height:100%;justify-content:space-between;left:0;padding:0 20px;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.music-icon{font-size:1.5rem}.music-text{color:beige;color:var(--text-primary);font-size:1.1rem;font-weight:600;letter-spacing:.3px}.music-percentage,.music-text{font-family:Volkhov,serif;text-shadow:0 1px 2px #000c,0 0 8px #000000e6,1px 1px 0 #000c,-1px -1px 0 #000c,1px -1px 0 #000c,-1px 1px 0 #000c}.music-percentage{color:gold;color:var(--secondary-gold);font-size:1.2rem;font-weight:700;min-width:50px;text-align:right}.rarity-upgrade-info{background:linear-gradient(135deg,#daa5201a,#ffd7001a);border:1px solid #daa5204d;border-radius:12px;border-radius:var(--border-radius-md);margin-bottom:.5rem;margin-bottom:var(--spacing-sm);padding:.5rem;padding:var(--spacing-sm)}.rarity-upgrade-preview{color:beige;color:var(--text-primary);display:flex;flex-direction:column;font-size:.875rem;font-size:var(--font-size-sm);gap:.25rem;gap:var(--spacing-xs)}.rarity-upgrade-preview span{align-items:center;display:flex;font-weight:600;gap:.25rem;gap:var(--spacing-xs)}.rarity-upgrade-preview span:first-child{color:#daa520;color:var(--primary-gold);font-size:1rem;font-size:var(--font-size-base)}.rules-page{background:#0f1423fa;background:var(--dark-bg);bottom:0;display:flex;flex-direction:column;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:10000}.rules-page::-webkit-scrollbar{width:8px}.rules-page::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.rules-page::-webkit-scrollbar-thumb{background:#daa520;background:var(--primary-gold);border-radius:4px}.rules-page::-webkit-scrollbar-thumb:hover{background:gold;background:var(--secondary-gold)}.rules-page-header{align-items:center;background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-bottom:2px solid #daa5204d;box-shadow:0 8px 32px #0000004d,0 4px 16px #daa52033;color:#0f1423fa;color:var(--dark-bg);display:flex;flex-shrink:0;justify-content:space-between;padding:.8rem 1.5rem;z-index:2}.rules-scroll-container{flex:1 1;overflow-y:auto;scrollbar-color:#daa520 #ffffff1a;scrollbar-color:var(--primary-gold) #ffffff1a;scrollbar-width:thin}.rules-scroll-container::-webkit-scrollbar{width:8px}.rules-scroll-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.rules-scroll-container::-webkit-scrollbar-thumb{background:#daa520;background:var(--primary-gold);border-radius:4px}.rules-scroll-container::-webkit-scrollbar-thumb:hover{background:gold;background:var(--secondary-gold)}.close-rules-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:2px solid #daa5204d;border-radius:10px;box-shadow:0 4px 15px #0003;color:#0f1423fa;color:var(--dark-bg);cursor:pointer;display:flex;font-size:16px;font-weight:600;height:36px;justify-content:center;transition:all .3s ease;width:36px}.close-rules-button:hover{background:#daa5201a;border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 8px 25px #daa5204d;transform:scale(1.05)}.close-icon{font-size:1.2rem;font-weight:700}.rules-page-title{font-family:Volkhov,serif;font-size:1.6rem;font-weight:700;letter-spacing:.5px;margin:0;text-shadow:0 2px 8px #000c,0 0 20px #daa52080;text-transform:uppercase}.rules-modal{max-height:90vh;max-width:800px;overflow-y:auto}.rules-content{max-height:70vh;overflow-y:auto;padding:1.5rem;padding:var(--spacing-lg)}.settings-footer{background:#fffffff2;border-radius:0 0 18px 18px;border-top:2px solid #ffffff1a;padding:20px;text-align:center}.save-button{background:linear-gradient(45deg,#4ecdc4,#44a08d);border:none;border-radius:25px;box-shadow:0 4px 15px #0003;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:12px 30px;transition:all .3s ease}.save-button:hover{box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}.save-button:active{transform:translateY(0)}.achievement-notification{opacity:0;position:fixed;right:20px;top:20px;transform:translateX(100%);transition:all .5s cubic-bezier(.4,0,.2,1);z-index:3000}.achievement-notification.show{opacity:1;transform:translateX(0)}.achievement-popup{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border:1px solid #fff3;border-radius:16px;box-shadow:0 12px 40px #daa52066;color:#1a1a1a;display:flex;gap:1rem;min-width:300px;padding:1rem 1.5rem}.achievement-popup-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:2rem}.achievement-popup-title{font-size:.8rem;font-weight:600;letter-spacing:.5px;margin-bottom:.25rem;opacity:.8;text-transform:uppercase}.achievement-popup-name{font-size:1rem;font-weight:700;margin-bottom:.25rem}.achievement-popup-desc{font-size:.85rem;opacity:.9}.achievement-popup.elemental-reward{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 12px 40px #4f46e566;color:#fff;position:relative}.achievement-notification:nth-child(2){top:100px}.achievement-popup.elemental-reward .achievement-popup-icon{animation:pulse 2s infinite}.achievement-dismiss-btn{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:.8rem;height:24px;justify-content:center;position:absolute;right:.5rem;top:.5rem;transition:all .2s ease;width:24px}.achievement-dismiss-btn:hover{background:#ffffff4d;transform:scale(1.1)}@media (max-width:480px){.glass-gradient-header{height:60px}.app{padding-top:60px}.app-content{min-height:calc(100vh - 160px);padding-top:15px}.modal{max-width:calc(100vw - 2rem);padding:1.25rem;top:50vh;transform:translate(-50%,-50%) scale(.9)}.element-grid{gap:.5rem}.battle-emoji{font-size:2.5rem;height:70px;width:70px}.profile-card{border-radius:16px;margin-bottom:.75rem}.card{border-radius:16px;padding:1.25rem}.modal-overlay.active .modal{transform:translate(-50%,-50%) scale(1)}}@media (max-width:360px){.glass-gradient-header{height:50px}.app{padding-top:50px}.app-content{min-height:calc(100vh - 150px);padding-top:10px}.modal{max-width:calc(100vw - 1rem);padding:1rem;top:50vh;transform:translate(-50%,-50%) scale(.9)}.enhanced-stats-grid{gap:.5rem}.stat-card{padding:.75rem}.modal-overlay.active .modal{transform:translate(-50%,-50%) scale(1)}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){.card,.element-btn{border-width:2px}}.btn-primary:focus,.element-btn:focus{outline:2px solid gold;outline:2px solid var(--secondary-gold);outline-offset:2px}.location-section{display:flex;flex-direction:column;gap:1.5rem;margin:2rem 0}.mana-display{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ffffff0d,#ffffff05);border:1px solid #daa52033;border-radius:16px;border-radius:var(--border-radius-lg);display:flex;gap:1rem;gap:var(--spacing-md);justify-content:center;margin-bottom:.5rem;margin-bottom:var(--spacing-sm);padding:1rem;padding:var(--spacing-md)}.mana-label{font-size:.875rem;font-size:var(--font-size-sm);font-weight:500}.mana-value{color:#daa520;color:var(--primary-gold);font-size:1.5rem;font-size:var(--font-size-2xl);font-weight:700;text-shadow:0 0 10px #daa52080}.location-grid{grid-gap:.5rem;grid-gap:var(--spacing-sm);display:grid;gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(4,1fr);margin:1rem 0;margin:var(--spacing-md) 0}.location-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:16px;border-radius:var(--border-radius-lg);cursor:pointer;display:flex;flex-direction:column;height:120px;justify-content:center;overflow:hidden;padding:1rem;padding:var(--spacing-md);position:relative;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.location-btn:hover{border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 8px 25px #daa5204d}.location-btn.selected{background:#daa5201a;border-color:gold;border-color:var(--secondary-gold);box-shadow:0 8px 25px #daa52066}.location-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.location-emoji{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2.5rem;margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.location-name{color:#e8d5b7;color:var(--text-secondary);line-height:1.2;text-shadow:0 1px 2px #000c}.location-mana,.location-name{font-size:.75rem;font-size:var(--font-size-xs)}.location-mana{color:#daa520;color:var(--primary-gold);font-weight:600}.elemental-grid{grid-gap:.5rem;grid-gap:var(--spacing-sm);gap:.5rem;gap:var(--spacing-sm);margin:var(--spacing-md) 0}.elemental-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border-radius:16px;border-radius:var(--border-radius-lg);height:110px;padding:.5rem;padding:var(--spacing-sm);transition:all .3s cubic-bezier(.4,0,.2,1)}.elemental-btn:hover{border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 8px 25px #daa5204d;transform:translateY(-4px)}.elemental-btn.selected{background:#daa5201a;box-shadow:0 8px 25px #daa52066;transform:translateY(-4px)}.elemental-btn.common{border-color:#8080804d}.elemental-btn.rare{border-color:#007bff4d}.elemental-btn.epic{border-color:#8000804d}.elemental-btn.immortal{border-color:#ffd7004d}.elemental-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2.2rem;margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.elemental-rarity-badge{border-radius:8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-size:var(--font-size-xs);font-weight:700;letter-spacing:.5px;margin-top:.5rem;margin-top:var(--spacing-sm);padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase}.elemental-btn.common .elemental-rarity-badge{background:linear-gradient(135deg,#6c757d,#495057);box-shadow:0 2px 4px #6c757d4d;color:#fff}.elemental-btn.rare .elemental-rarity-badge{background:linear-gradient(135deg,#007bff,#0056b3);box-shadow:0 2px 4px #007bff4d;color:#fff}.elemental-btn.epic .elemental-rarity-badge{background:linear-gradient(135deg,#6f42c1,#5a32a3);box-shadow:0 2px 4px #6f42c14d;color:#fff}.elemental-btn.immortal .elemental-rarity-badge{background:linear-gradient(135deg,gold,#ffb700);box-shadow:0 2px 4px #ffd7004d;color:#000;text-shadow:0 1px 2px #0000004d}.btn-secondary{background:linear-gradient(135deg,#ef4444,#c53030);background:linear-gradient(135deg,var(--error),#c53030);border:none;border-radius:16px;box-shadow:0 4px 15px #ef44444d;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.5px;overflow:hidden;padding:1rem 2rem;position:relative;text-transform:uppercase;transition:all .3s ease;width:100%}.btn-secondary:hover{box-shadow:0 8px 25px #ef444466;transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.battle-log{background:#0006;border:1px solid #ffffff1a;border-radius:16px;margin-top:1rem;padding:1rem}.battle-log-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.2rem;font-weight:700;margin-bottom:1rem;text-align:center}.element-battle{margin-bottom:1.5rem}.element-battle-title{color:var(--secondary-gold);font-size:1rem;margin-bottom:1rem}.element-battle-display{gap:2rem;margin-bottom:1rem}.element-battle-name,.element-battle-result{color:beige;color:var(--text-primary);font-size:.9rem}.element-battle-result{background:#ffffff1a;padding:.75rem}.elementals-used{margin-bottom:1.5rem}.elementals-used-title{color:var(--secondary-gold);font-size:1rem;margin-bottom:1rem}.elementals-display{display:flex;gap:1rem;justify-content:space-between}.elemental-card{flex:1 1;padding:.75rem}.elemental-card,.elemental-card.opponent{background:#18182c}.elemental-card-emoji{font-size:2.5rem;margin-bottom:.5rem}.elemental-card-name{color:beige;color:var(--text-primary);font-size:.9rem;margin-bottom:.5rem}.elemental-card-protection{color:gold;color:var(--secondary-gold);font-size:.75rem}.final-calculation{background:#18182c;border-radius:16px;padding:.75rem}.final-calculation-title{color:var(--secondary-gold);font-size:1rem;margin-bottom:1rem}.calculation-row{display:flex;font-size:.9rem;justify-content:space-between;margin-bottom:.5rem}.calculation-row.total{border-top:1px solid #fff3;font-weight:700;padding-top:.5rem}.calculation-label,.calculation-value{color:beige;color:var(--text-primary)}.calculation-value.negative{color:#ef4444;color:var(--error)}.calculation-value.positive{color:#10b981;color:var(--success)}.elemental-btn:focus,.location-btn:focus{outline:2px solid gold;outline:2px solid var(--secondary-gold);outline-offset:2px}@media (max-width:720px){.location-grid{gap:.75rem;grid-template-columns:repeat(2,1fr)}.location-btn{height:100px;padding:.5rem;padding:var(--spacing-sm)}.location-emoji{font-size:2rem;margin-bottom:6px}.location-name{font-size:.85rem;font-weight:600}.location-mana{font-size:.75rem;opacity:.9}}@media (max-width:600px){.location-grid{gap:.6rem;grid-template-columns:repeat(2,1fr)}.location-btn{height:95px;padding:.5rem;padding:var(--spacing-sm)}.location-emoji{font-size:1.9rem;margin-bottom:5px}.location-name{font-size:.8rem;font-weight:600}.location-mana{font-size:.72rem;opacity:.9}.elemental-grid{gap:.6rem;grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.elemental-grid,.location-grid{gap:.5rem;grid-template-columns:repeat(2,1fr)}.elementals-display{flex-direction:column;gap:.75rem}}#resultsTab{background:#18182c;overflow-x:hidden;overflow-y:auto}#resultsTab .card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#18182c;border:none;box-shadow:none;max-width:none;transition:none}#resultsTab .card:hover{border-color:#0000;box-shadow:none;transform:none}.results-header{margin-bottom:1.5rem;margin-top:0;padding-top:0;text-align:center}.results-icon{font-size:24px;margin-bottom:0}.results-title{align-items:center;display:flex;font-family:Volkhov,serif;font-size:24px;font-weight:700;gap:.5rem;justify-content:center;margin-bottom:.5rem;text-shadow:0 2px 8px #000c}.results-title.victory{color:#10b981;color:var(--success)}.results-title.defeat{color:#ef4444;color:var(--error)}.results-title.draw{color:beige;color:var(--text-primary)}.results-title.compact{align-items:center;display:flex;font-size:24px;gap:.5rem;justify-content:center}.results-title.compact .result-icon{font-size:24px}.results-subtitle{color:#b8860b;color:var(--text-muted);font-size:1rem;font-style:italic;margin-bottom:1rem}.results-stats{background:#18182c;border-radius:12px;margin-bottom:1rem;padding:1rem}.results-stats-header{border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:.5rem}.results-stats-title{color:#b8860b;color:var(--text-muted);font-size:.9rem;font-weight:600}.results-stat-row{display:flex;justify-content:space-between;margin-bottom:.75rem}.results-stat-row:last-child{margin-bottom:0}.results-stat-label{color:#b8860b;color:var(--text-muted);font-size:.85rem}.results-stat-value{font-family:Volkhov,serif;font-weight:600}.results-stat-value.victory{color:#10b981;color:var(--success)}.results-stat-value.defeat{color:#ef4444;color:var(--error)}.results-stat-value.primary{color:beige;color:var(--text-primary)}.results-stat-value.gold{color:gold;color:var(--secondary-gold)}.results-battle-log{background:#18182c;border-radius:12px;padding:1rem}.battle-log-header{color:gold;font-family:Inter,sans-serif;font-size:20px;font-weight:700;margin-bottom:.75rem;text-align:center}.results-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.results-battle-again{margin-top:1rem;text-align:center}@media (max-width:360px){.results-icon{margin-bottom:0}.results-icon,.results-title{font-size:20px}.results-title.compact,.results-title.compact .result-icon{font-size:18px}.results-header{margin-bottom:1rem;margin-top:0;padding-top:0}}@media (max-width:768px){.results-icon{margin-bottom:0}.results-icon,.results-title{font-size:22px}.results-title.compact,.results-title.compact .result-icon{font-size:20px}.results-header{margin-bottom:1rem;margin-top:0}}.element-battle-section{margin-bottom:1rem}.element-battle-title{color:gold;font-family:Inter,sans-serif;font-size:14px;font-weight:600;margin-bottom:.75rem}.element-battle-display{align-items:center;display:flex;gap:1.5rem;justify-content:center;margin-bottom:.75rem}.element-battle-choice{text-align:center}.element-battle-emoji{font-size:3rem;margin-bottom:.5rem}.element-battle-name{color:#fff;font-family:Inter,sans-serif;font-size:14px}.element-battle-vs{color:gold;font-family:Inter,sans-serif;font-size:20px;font-weight:700}.element-battle-result{background:#18182c;border-radius:12px;color:#fff;font-family:Inter,sans-serif;font-size:13px;padding:10px;text-align:center}.elementals-used-section{margin-bottom:1rem}.elementals-used-title{color:gold;font-family:Inter,sans-serif;font-size:14px;font-weight:600;margin-bottom:.75rem}.elementals-used-display{display:flex;gap:.75rem;justify-content:space-between}.elemental-used-card{background:#18182c;border-radius:12px;flex:1 1;padding:12px;text-align:center}.elemental-used-card.opponent,.elemental-used-card.player{background:#18182c}.elemental-used-emoji{font-size:2rem;margin-bottom:.4rem}.elemental-used-name{color:#fff;font-family:Inter,sans-serif;font-size:14px;margin-bottom:.5rem}.elemental-used-protection{font-family:Inter,sans-serif;font-size:12px}.elemental-used-protection.player{color:gold}.elemental-used-protection.opponent{color:#ff4c4c}.final-calculation-section{background:#18182c;border-radius:12px;margin-top:.75rem;padding:12px}.final-calculation-title{color:gold;font-family:Inter,sans-serif;font-size:14px;font-weight:600;margin-bottom:.75rem}.final-calculation-row{display:flex;justify-content:space-between;margin-bottom:6px}.final-calculation-row.total{border-top:1px solid #fff3;margin-bottom:0;padding-top:6px}.final-calculation-label{color:#fff;font-family:Inter,sans-serif;font-size:14px}.final-calculation-label.total{font-weight:700}.final-calculation-value{color:#fff;font-family:Inter,sans-serif;font-size:14px}.final-calculation-value.total{font-weight:700}.final-calculation-value.victory{color:#10b981}.final-calculation-value.defeat{color:#ff4c4c}@media screen and (max-width:480px){.mobile-nav{left:50%!important;max-width:none!important;padding:.4rem 0!important;transform:translateX(-50%)!important;width:calc(100% - 40px)!important}}@media screen and (min-width:481px) and (max-width:768px){.mobile-nav{left:50%!important;max-width:725px!important;transform:translateX(-50%)!important;width:calc(100% - 40px)!important}}@media screen and (min-width:769px){.mobile-nav{left:50%!important;max-width:725px!important;right:auto!important;transform:translateX(-50%)!important;width:725px!important}}@media screen and (min-width:1200px){.mobile-nav{left:50%!important;max-width:725px!important;right:auto!important;transform:translateX(-50%)!important;width:725px!important}}@media screen and (max-height:600px){.mobile-nav{bottom:10px!important;padding:.3rem 0!important}}@supports (-webkit-touch-callout:none){.mobile-nav{border-radius:20px!important;bottom:max(20px,env(safe-area-inset-bottom))!important;left:50%!important;padding:.5rem 0!important;position:fixed!important;transform:translateX(-50%)!important;width:calc(100% - max(40px, env(safe-area-inset-left) + env(safe-area-inset-right)))!important}}@media screen and (-webkit-min-device-pixel-ratio:0){.mobile-nav{border-radius:20px!important;bottom:20px!important;left:50%!important;max-width:725px!important;position:fixed!important;transform:translateX(-50%)!important;width:calc(100% - 40px)!important}}.mobile-nav{transform:translateX(-50%) translateZ(0)!important}.profile-container{display:flex;flex:1 1;flex-direction:column;gap:1.5rem;max-width:100%;overflow-x:hidden;padding:1rem}.profile-hero{background:linear-gradient(135deg,#daa5201a,#ffd7000d);border:1px solid #daa52033;border-radius:24px;overflow:hidden;padding:2rem 1.5rem 1.5rem;position:relative}.hero-background{z-index:0}.hero-background,.hero-gradient{bottom:0;left:0;position:absolute;right:0;top:0}.hero-gradient{background:radial-gradient(circle at 30% 20%,#daa52026,#0000 50%)}.hero-pattern{background-image:radial-gradient(circle at 2px 2px,#ffffff0d 1px,#0000 0);background-size:20px 20px;bottom:0;left:0;position:absolute;right:0;top:0}.hero-content{align-items:center;display:flex;gap:1.5rem;margin-bottom:1.5rem;position:relative;z-index:1}.profile-avatar-modern{flex-shrink:0;position:relative}.avatar-glow{animation:pulse-glow 3s ease-in-out infinite;background:radial-gradient(circle,#daa5204d,#0000 70%);border-radius:50%;bottom:-10px;left:-10px;position:absolute;right:-10px;top:-10px}@keyframes pulse-glow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.avatar-circle{align-items:center;background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border:3px solid #fff3;border-radius:50%;box-shadow:0 8px 32px #daa5204d;display:flex;height:80px;justify-content:center;position:relative;width:80px;z-index:1}.avatar-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:2rem}.level-badge{align-items:center;background:linear-gradient(135deg,#4fa0af,#6bb6c4);background:linear-gradient(135deg,var(--cool-blue),var(--cool-light));border:2px solid #0f1423fa;border:2px solid var(--dark-bg);border-radius:50%;bottom:-5px;box-shadow:0 4px 12px #0000004d;display:flex;height:32px;justify-content:center;position:absolute;right:-5px;width:32px}.level-number{color:#fff;font-size:.8rem;font-weight:700}.profile-identity{flex:1 1;min-width:0}.player-name-modern{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.8rem;font-weight:700;line-height:1.2;margin-bottom:.25rem;text-shadow:0 2px 8px #00000080}.player-title-modern{color:beige;color:var(--text-primary);font-size:.8rem;font-weight:600;justify-content:center;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.player-rank-modern,.player-title-modern{align-items:center;background:#0000004d;border:1px solid #ffffff1a;border-radius:20px;display:flex;padding:.5rem 1rem;width:-webkit-fit-content;width:fit-content}.player-rank-modern{gap:.5rem}.rank-icon{font-size:1rem}.rank-text{color:beige;color:var(--text-primary);font-size:.8rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.experience-section{position:relative;z-index:1}.exp-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.exp-label{color:#e8d5b7;color:var(--text-secondary);font-size:.9rem;font-weight:600}.exp-values{color:#b8860b;color:var(--text-muted);font-family:Inter,sans-serif;font-size:.8rem}.exp-bar-modern{background:#0006;height:8px}.exp-bar-modern,.exp-fill-modern{border-radius:4px;overflow:hidden;position:relative}.exp-fill-modern{background:linear-gradient(90deg,#daa520,gold);background:linear-gradient(90deg,var(--primary-gold),var(--secondary-gold));height:100%;transition:width .8s ease}.exp-shine{animation:shine 2s ease-in-out infinite;background:linear-gradient(90deg,#0000,#fff6,#0000);height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes shine{0%{left:-100%}to{left:100%}}.stats-grid-modern{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr);margin-bottom:.5rem}.stat-card-modern{align-items:center;background:#18182c;border-radius:16px;display:flex;flex-direction:column;justify-content:center;min-height:120px;overflow:hidden;padding:1.25rem;position:relative;text-align:center}.stat-card-modern:hover{border-color:#daa5204d;box-shadow:0 12px 40px #0006;transform:translateY(-2px)}.stat-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.stat-value-modern{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.8rem;font-weight:700;line-height:1;margin-bottom:.5rem;margin-top:.75rem}.stat-label-modern{color:#b8860b;color:var(--text-muted);font-size:.8rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.stat-change-modern{font-size:.75rem;font-weight:600;margin-top:.5rem}.stat-change-modern.positive{color:#10b981;color:var(--success)}.stat-change-modern.negative{color:#ef4444;color:var(--error)}.stat-subtext-modern{color:#b8860b;color:var(--text-muted);font-size:.7rem;margin-top:.5rem;opacity:.8}.stat-progress{margin-top:.75rem}.progress-bar{background:#0000004d;border-radius:2px;height:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#10b981,#22c55e);background:linear-gradient(90deg,var(--success),#22c55e);border-radius:2px;height:100%;transition:width .8s ease}.streak-indicator{align-items:center;display:flex}.streak-flame{animation:flicker 1.5s ease-in-out infinite;font-size:.8rem}@keyframes flicker{0%,to{opacity:1}50%{opacity:.7}}.battles-ratio{align-items:center;display:flex;font-size:.75rem;font-weight:600;gap:.25rem}.wins-count{color:#10b981;color:var(--success)}.losses-count{color:#ef4444;color:var(--error)}.ratio-separator{color:#b8860b;color:var(--text-muted)}.achievements-modern{background:#18182c;border-radius:20px;padding:1rem}.section-header-modern{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.25rem}.section-title-modern{align-items:center;color:gold;color:var(--secondary-gold);display:flex;font-family:Volkhov,serif;font-size:1.2rem;font-weight:600;gap:.5rem;margin:0}.section-icon{font-size:1.1rem}.achievements-count{background:#daa52033;border:1px solid #daa5204d;border-radius:12px;color:gold;color:var(--secondary-gold);font-size:.8rem;font-weight:600;padding:.25rem .75rem}.achievements-grid{grid-gap:.75rem;display:grid;gap:.75rem}.achievement-card-modern{align-items:center;background:#18182c;border-radius:12px;display:flex;gap:1rem;overflow:hidden;padding:1rem;position:relative}.achievement-card-modern.unlocked{background:#10b9811a}.achievement-card-modern.locked{opacity:.6}.achievement-card-modern:hover{background:#0000004d}.achievement-icon-modern{align-items:center;background:#ffffff1a;border-radius:10px;display:flex;flex-shrink:0;font-size:1.5rem;height:40px;justify-content:center;width:40px}.achievement-card-modern.unlocked .achievement-icon-modern{background:#10b98133}.achievement-content{flex:1 1;min-width:0}.achievement-name-modern{color:beige;color:var(--text-primary);font-size:.9rem;font-weight:600;margin-bottom:.25rem}.achievement-desc-modern{color:#b8860b;color:var(--text-muted);font-size:.8rem;line-height:1.4}.achievement-progress-modern{color:gold;color:var(--secondary-gold);font-size:.75rem;font-weight:600;margin-top:.25rem}.achievement-glow{animation:achievement-glow 2s ease-in-out infinite;background:linear-gradient(90deg,#0000,#10b9811a,#0000);bottom:0;left:0;position:absolute;right:0;top:0}@keyframes achievement-glow{0%,to{opacity:0}50%{opacity:1}}.additional-stats{background:#18182c;border-radius:16px;margin-bottom:.5rem;padding:.75rem}.stats-row{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.mini-stat{align-items:center;background:#18182c;border-radius:12px;display:flex;gap:.5rem;padding:.5rem}.mini-stat:hover{background:#0000004d}.mini-stat-icon{font-size:1.2rem;opacity:.8}.mini-stat-content{flex:1 1;min-width:0}.mini-stat-value{color:beige;color:var(--text-primary);font-size:.9rem;font-weight:600;margin-bottom:.1rem}.mini-stat-label{color:#b8860b;color:var(--text-muted);font-size:.7rem;letter-spacing:.3px;text-transform:uppercase}@media (max-width:480px){.profile-container,.settings-container{gap:1rem;padding:.75rem}.settings-container{margin:.5rem}.settings-header h2{font-size:1.5rem;font-size:var(--font-size-2xl)}.music-volume-slider-wrapper{height:50px}.music-volume-label{padding:0 15px}.music-icon{font-size:1.3rem}.music-text{font-size:1rem}.music-percentage{font-size:1.1rem;min-width:45px}.music-volume-slider::-webkit-slider-thumb{height:20px;width:20px}.music-volume-slider::-moz-range-thumb{height:20px;width:20px}}@media (max-width:420px){.profile-hero{padding:1.5rem 1rem 1rem}.hero-content{flex-direction:column;gap:1rem;text-align:center}.player-name-modern{font-size:1.5rem}.stats-grid-modern{gap:.75rem;grid-template-columns:repeat(2,1fr)}.stat-card-modern{min-height:100px;padding:1rem}.stat-icon-modern{font-size:1.5rem;margin-bottom:.5rem}.stat-value-modern{font-size:1.5rem}.stat-label-modern{font-size:.7rem}.achievements-modern{padding:1rem}.stats-row{gap:.75rem;grid-template-columns:1fr}}.achievement-popup.level-up{background:linear-gradient(135deg,#4fa0af,#6bb6c4);background:linear-gradient(135deg,var(--cool-blue),var(--cool-light));border:1px solid #ffffff4d;color:#fff}.achievement-popup.level-up .achievement-popup-name,.achievement-popup.level-up .achievement-popup-title{color:#fff}.achievement-popup.level-up .achievement-popup-desc{color:#ffffffe6}.battle-animation{background:linear-gradient(135deg,#0a0a0a,#1a1a2e 50%,#16213e);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:10000}.battle-animation,.battle-arena{align-items:center;display:flex;justify-content:center}.battle-arena{height:100%;position:relative;width:100%}.battle-bg-effects{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.energy-particles{animation:float-particles 20s linear infinite;background:radial-gradient(2px 2px at 20px 30px,#0ff,#0000),radial-gradient(2px 2px at 40px 70px,#f0f,#0000),radial-gradient(1px 1px at 90px 40px,#ff0,#0000),radial-gradient(1px 1px at 130px 80px,#ff0080,#0000),radial-gradient(2px 2px at 160px 30px,#00ff80,#0000);background-repeat:repeat;background-size:200px 100px;height:100%;position:absolute;width:100%}.magic-circles{animation:rotate-circle 10s linear infinite;border:2px solid #ffffff1a;border-radius:50%;height:300px;width:300px}.magic-circles,.magic-circles:before{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.magic-circles:before{animation:rotate-circle 15s linear infinite reverse;border:1px solid #ffffff0d;border-radius:50%;content:"";height:200px;width:200px}.battle-intro{justify-content:center}.battle-intro,.opponent-profiles{align-items:center;display:flex;width:100%}.opponent-profiles{gap:3rem;justify-content:space-between;max-width:600px}.opponent-profile,.player-profile{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;display:flex;flex-direction:column;gap:1rem;height:240px;justify-content:space-between;padding:1.5rem;width:180px}.profile-avatar{background:#ffffff1a;border:2px solid #ffffff4d;font-size:4rem;height:80px;width:80px}.profile-info{text-align:center}.profile-name{font-size:1rem;font-weight:700;margin-bottom:.5rem}.profile-level{color:gold;color:var(--secondary-gold);font-size:.9rem;margin-bottom:.5rem}.profile-elemental{margin-top:.5rem;width:100%}.elemental-card-compact{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;justify-content:center;padding:.6rem;transition:all .3s ease;width:100%}.elemental-card-compact.rarity-common{background:#a9a9a926;border:1px solid #a9a9a966}.elemental-card-compact.rarity-rare{background:#1e90ff26;border:1px solid #1e90ff66}.elemental-card-compact.rarity-epic{background:#8a2be226;border:1px solid #8a2be266}.elemental-card-compact.rarity-immortal{background:#ffd70026;border:1px solid #ffd70066;box-shadow:0 0 10px #ffd7004d}.elemental-protection{font-size:.75rem;font-weight:600;text-align:center}.rarity-common .elemental-protection{color:#a9a9a9}.rarity-rare .elemental-protection{color:#1e90ff}.rarity-epic .elemental-protection{color:#8a2be2}.rarity-immortal .elemental-protection{color:gold;text-shadow:0 0 5px #ffd70080}.no-elemental-card{background:#ff64641a;border:1px solid #ff64644d;border-radius:8px;box-sizing:border-box;padding:.6rem;width:100%}.no-protection-text{color:#ff6464;font-size:.75rem;font-weight:500;text-align:center}.vs-indicator{color:var(--accent);font-size:3rem;font-weight:700;text-shadow:0 0 20px var(--accent)}.elements-battle{align-items:center;display:flex;flex-direction:column;gap:2rem;width:100%}.battle-title{color:beige;color:var(--text-primary);font-size:2rem;text-align:center;text-shadow:0 0 20px #ffffff80}.elements-arena{align-items:center;display:flex;justify-content:center;min-height:300px;padding:2rem 0;position:relative;width:100%}.element-fighter{align-items:center;display:flex;flex-direction:column;gap:1rem;opacity:0;position:absolute;transform:scale(.5);transition:all 1.2s cubic-bezier(.68,-.55,.265,1.55)}.element-fighter.player{left:15%;top:50%;transform:translateY(-50%) scale(.5)}.element-fighter.player.enter-battle{transform:translateY(-50%) scale(1)}.element-fighter.opponent{right:15%;top:50%;transform:translateY(-50%) scale(.5)}.element-fighter.opponent.enter-battle{transform:translateY(-50%) scale(1)}.element-fighter.enter-battle{opacity:1;transform:scale(1)}.element-fighter.player.enter-battle{animation:player-element-enter .8s ease-out}.element-fighter.opponent.enter-battle{animation:opponent-element-enter .8s ease-out}.element-orb{align-items:center;animation:element-pulse 3.5s ease-in-out infinite;border-radius:50%;display:flex;height:100px;justify-content:center;position:relative;width:100px}.battle-animation .element-emoji{filter:drop-shadow(0 0 10px rgba(255,255,255,.8));font-size:3rem}.element-name{font-weight:700;text-align:center}.battle-lightning{animation:lightning-flash .5s ease-in-out infinite alternate;color:#ff0;font-size:3rem;left:50%;position:absolute;text-shadow:0 0 20px #ff0;top:50%;transform:translate(-50%,-50%);z-index:10}.elementals-battle{flex-direction:column;gap:2rem}.elementals-arena,.elementals-battle{align-items:center;display:flex;width:100%}.elementals-arena{justify-content:center;min-height:300px;padding:2rem 0;position:relative}.elemental-fighter{align-items:center;display:flex;flex-direction:column;gap:1rem;opacity:0;position:absolute;transform:translateY(50px);transition:all 1.5s cubic-bezier(.25,.46,.45,.94)}.elemental-fighter.player{left:10%;top:50%;transform:translateY(-50%) translateY(50px)}.elemental-fighter.player.summon-elemental{transform:translateY(-50%) translateY(0)}.elemental-fighter.opponent{right:10%;top:50%;transform:translateY(-50%) translateY(50px)}.elemental-fighter.opponent.summon-elemental{transform:translateY(-50%) translateY(0)}.elemental-fighter.summon-elemental{opacity:1;transform:translateY(0)}.elemental-aura{align-items:center;animation:elemental-glow 3s ease-in-out infinite;border-radius:50%;display:flex;height:120px;justify-content:center;position:relative;width:120px}.player-aura{background:radial-gradient(circle,#00ffff4d,#00ffff1a);box-shadow:0 0 40px #0ff9}.opponent-aura{background:radial-gradient(circle,#ff64644d,#ff64641a);box-shadow:0 0 40px #ff646499}.battle-animation .elemental-emoji{filter:drop-shadow(0 0 15px rgba(255,255,255,.9));font-size:3.5rem}.elemental-info{min-width:120px;text-align:center}.protection-bar{background:#0000004d;border:1px solid #fff3;border-radius:10px;height:20px;overflow:hidden;position:relative;width:100px}.protection-fill{animation:protection-shimmer 2s ease-in-out infinite;background:linear-gradient(90deg,#0f8,#0c6);border-radius:10px;height:100%;transition:width 1s ease-out}.opponent-fill{background:linear-gradient(90deg,#ff6b6b,#ff4757)}.protection-text{color:#fff;font-size:.7rem;font-weight:700;left:50%;position:absolute;text-shadow:0 0 5px #000c;top:50%;transform:translate(-50%,-50%)}.no-elemental{align-items:center;display:flex;flex-direction:column;gap:.5rem;opacity:.6}.no-protection-icon{color:#ff4757;font-size:3rem}.elemental-vs{animation:shield-pulse 2s ease-in-out infinite;color:gold;color:var(--secondary-gold);font-size:5rem;left:50%;position:absolute;text-shadow:0 0 30px gold;text-shadow:0 0 30px var(--secondary-gold);top:50%;transform:translate(-50%,-50%);z-index:10}.final-clash{flex-direction:column;gap:2rem;width:100%}.clash-explosion,.final-clash{align-items:center;display:flex}.clash-explosion{height:300px;justify-content:center;margin:0 auto;position:relative;width:300px}.clash-explosion.explode .explosion-ring{animation:explosion-expand 1.5s ease-out}.clash-explosion.explode .explosion-core{animation:explosion-core 1.5s ease-out}.clash-explosion.explode .explosion-sparks{animation:sparks-scatter 1.5s ease-out}.explosion-ring{border:3px solid #ff0;border-radius:50%;height:50px;opacity:0;position:absolute;width:50px}.explosion-core{font-size:6rem;transform:scale(0);z-index:2}.explosion-sparks{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;width:100%}.explosion-sparks span{font-size:3rem;opacity:0;position:absolute}.explosion-sparks span:first-child{transform:rotate(0deg) translateY(-120px)}.explosion-sparks span:nth-child(2){transform:rotate(90deg) translateY(-120px)}.explosion-sparks span:nth-child(3){transform:rotate(180deg) translateY(-120px)}.explosion-sparks span:nth-child(4){transform:rotate(270deg) translateY(-120px)}.clash-text{color:var(--accent);font-size:2.5rem;font-weight:700;opacity:0;text-shadow:0 0 30px var(--accent)}@keyframes float-particles{0%{transform:translateY(0)}to{transform:translateY(-100px)}}@keyframes rotate-circle{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes slide-in-left{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes battle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes fade-in{0%{opacity:0;transform:translateY(-30px) scale(.9)}50%{opacity:.7;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade-in-delayed{0%,30%{opacity:0;transform:translateY(-30px) scale(.8)}70%{opacity:.8;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes player-element-enter{0%{opacity:0;transform:translate(-100px,-50%) scale(.5)}to{opacity:1;transform:translateY(-50%) scale(1)}}@keyframes opponent-element-enter{0%{opacity:0;transform:translate(100px,-50%) scale(.5)}to{opacity:1;transform:translateY(-50%) scale(1)}}@keyframes element-pulse{0%,to{filter:brightness(1);transform:scale(1)}25%{filter:brightness(1.1);transform:scale(1.02)}50%{filter:brightness(1.2);transform:scale(1.08)}75%{filter:brightness(1.1);transform:scale(1.02)}}@keyframes lightning-flash{0%{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}@keyframes elemental-glow{0%,to{box-shadow:0 0 40px #ffffff4d}50%{box-shadow:0 0 60px #fff9}}@keyframes protection-shimmer{0%,to{opacity:.8}50%{opacity:1}}@keyframes shield-pulse{0%,to{color:gold;color:var(--secondary-gold);transform:scale(1)}50%{color:gold;transform:scale(1.1)}}@keyframes explosion-expand{0%{height:50px;opacity:1;width:50px}to{height:300px;opacity:0;width:300px}}@keyframes explosion-core{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes sparks-scatter{0%{opacity:0}30%{opacity:1}to{opacity:0}}.explosion-sparks.explode span{animation:spark-fly 1.5s ease-out}@keyframes spark-fly{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5) translateY(-40px)}}@media (max-width:768px){.opponent-profiles{gap:1.5rem;padding:0 1rem}.opponent-profile,.player-profile{height:200px;padding:1rem;width:140px}.profile-avatar{font-size:3rem;height:60px;width:60px}.profile-name{font-size:.9rem}.elemental-protection,.no-protection-text{font-size:.7rem}.battle-title{font-size:1.5rem}.element-fighter.player{left:5%}.element-fighter.opponent{right:5%}.elemental-fighter.player{left:5%}.elemental-fighter.opponent{right:5%}.element-orb{height:80px;width:80px}.battle-animation .element-emoji{font-size:2.5rem}.elemental-aura{height:100px;width:100px}.battle-animation .elemental-emoji{font-size:3rem}}.slide-in-left{animation:slide-in-left 1s ease-out}.slide-in-right{animation:slide-in-right 1s ease-out}.pulse{animation:battle-pulse 2s ease-in-out infinite}.fade-in{animation:fade-in 1.5s ease-out;animation-fill-mode:forwards;opacity:0}.fade-in-delayed{animation:fade-in-delayed 2.5s ease-out;animation-fill-mode:forwards;opacity:0}.battle-section{background:#18182c;border-radius:24px;border-radius:var(--border-radius-2xl);margin:1rem;margin:var(--spacing-md);max-width:calc(100vw - 2rem);max-width:calc(100vw - var(--spacing-xl));overflow:hidden;padding:1.5rem 2rem 2rem;padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);position:relative}.battle-header{position:relative;text-align:center}.battle-header,.battle-icon{margin-bottom:1.5rem;margin-bottom:var(--spacing-lg)}.battle-icon{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#daa5201a,#ffd7000d);border:2px solid #daa52033;border-radius:50%;display:inline-block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));font-size:8rem;font-size:var(--icon-size-xl);line-height:.8;margin-top:1.5rem;margin-top:var(--spacing-lg);opacity:.9;padding:.5rem;padding:var(--spacing-sm);transition:all .3s ease}.battle-icon:hover{border-color:#daa52066;box-shadow:0 8px 25px #daa52033;transform:scale(1.05)}.battle-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:2.25rem;font-size:var(--font-size-4xl);font-weight:700;letter-spacing:1px;margin-bottom:.25rem;margin-bottom:var(--spacing-xs);text-shadow:0 2px 4px #00000080}.battle-subtitle{color:#e8d5b7;color:var(--text-secondary);font-size:1rem;font-size:var(--font-size-base);font-weight:500;margin-bottom:.5rem;margin-bottom:var(--spacing-sm);text-shadow:0 1px 2px #0000004d}.battle-step-indicator{align-items:center;display:flex;gap:.5rem;gap:var(--spacing-sm);justify-content:center;margin-bottom:1.5rem;margin-bottom:var(--spacing-lg)}.step-dot{background:#fff3;border-radius:50%;height:12px;transition:all .3s ease;width:12px}.step-dot.active{background:#daa520;background:var(--primary-gold);box-shadow:0 0 10px #daa52080;transform:scale(1.2)}.step-dot.completed{background:#10b981;background:var(--success);box-shadow:0 0 8px #10b98166}.battle-navigation{align-items:center;display:flex;justify-content:space-between;left:0;padding:0 2rem;padding:0 var(--spacing-xl);position:absolute;right:0;top:7rem;z-index:10}.back-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ffffff14,#ffffff08);border:1px solid #ffffff1a;border-radius:12px;border-radius:var(--border-radius-md);color:#e8d5b7;color:var(--text-secondary);display:flex;font-size:1.25rem;font-size:var(--font-size-xl);font-weight:500;height:3rem;height:var(--button-height-md);justify-content:center;padding:.5rem;padding:var(--spacing-sm);transition:all .3s ease;width:3rem;width:var(--button-height-md)}.back-btn:hover{background:linear-gradient(145deg,#ffffff1f,#ffffff0f);border-color:#daa5204d;box-shadow:0 4px 12px #0003;color:beige;color:var(--text-primary)}.battle-progress{align-items:center;color:#e8d5b7;color:var(--text-secondary);display:flex;font-size:.875rem;font-size:var(--font-size-sm);font-weight:500;gap:.5rem;gap:var(--spacing-sm)}.battle-btn{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border:none;border-radius:16px;border-radius:var(--border-radius-lg);box-shadow:0 4px 16px #daa5204d;color:#0f1423fa;color:var(--dark-bg);cursor:pointer;display:block;font-family:Volkhov,serif;font-size:1.125rem;font-size:var(--font-size-lg);font-weight:600;letter-spacing:1px;margin:0 auto;overflow:hidden;padding:1rem 2rem;padding:var(--spacing-md) var(--spacing-xl);position:relative;text-transform:uppercase;transition:all .3s ease}.battle-btn:hover{box-shadow:0 8px 25px #daa52066;transform:translateY(-3px)}.battle-btn:disabled{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);color:#b8860b;color:var(--text-muted);cursor:not-allowed}.battle-btn:disabled,.battle-btn:disabled:hover{box-shadow:none;transform:none}.battle-display{align-items:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(145deg,#ffffff0d,#ffffff05);border:1px solid #daa52033;border-radius:20px;border-radius:var(--border-radius-xl);box-shadow:0 8px 25px #0003;display:flex;gap:2rem;gap:var(--spacing-xl);justify-content:center;margin:2rem 0;margin:var(--spacing-xl) 0;padding:2rem;padding:var(--spacing-xl)}.battle-choice{flex-direction:column;gap:1rem;gap:var(--spacing-md);min-width:120px;padding:1.5rem;padding:var(--spacing-lg)}.battle-choice,.battle-emoji{align-items:center;display:flex;transition:all .3s ease}.battle-emoji{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:2px solid #daa520;border:2px solid var(--primary-gold);border-radius:50%;box-shadow:0 8px 25px #0000004d;font-size:8rem;font-size:var(--icon-size-xl);height:8rem;height:var(--icon-size-xl);justify-content:center;width:8rem;width:var(--icon-size-xl)}.battle-emoji.animate{animation:battlePulse 1s ease-in-out}.battle-vs{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:2rem;font-weight:700;letter-spacing:2px;text-shadow:0 2px 4px #00000080}@keyframes battlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.battle-player-name{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:.9rem;font-weight:600;letter-spacing:.5px;text-shadow:0 1px 2px #00000080;text-transform:uppercase}.elemental-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(4,1fr);margin:1rem 0}.elemental-btn{align-items:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(145deg,#ffffff14,#ffffff08);border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 4px 16px #0003;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:120px;overflow:hidden;padding:.6rem;position:relative;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1)}.elemental-btn:before{background:linear-gradient(90deg,#0000,#daa5201a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.elemental-btn:after{background:linear-gradient(90deg,#daa520,gold);background:linear-gradient(90deg,var(--primary-gold),var(--secondary-gold));content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.elemental-btn:hover:before{left:100%}.elemental-btn:hover:after{opacity:1}.elemental-btn:hover{border-color:#daa52066;box-shadow:0 12px 30px #0000004d,0 0 20px #daa52033;transform:translateY(-6px) scale(1.02)}.elemental-btn.selected{background:linear-gradient(145deg,#daa52026,#ffd70014);border-color:gold;border-color:var(--secondary-gold);box-shadow:0 12px 30px #0000004d,0 0 25px #daa5204d;transform:translateY(-6px) scale(1.02)}.elemental-btn.selected:after{opacity:1}.elemental-emoji{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));font-size:2.5rem;margin-bottom:.75rem;transition:transform .3s ease}.elemental-btn:hover .elemental-emoji{transform:scale(1.1)}.elemental-name{font-size:.9rem;letter-spacing:.5px;line-height:1.3;text-shadow:0 1px 2px #000c}.elemental-rarity{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#daa5201a;border:1px solid #daa52033;border-radius:12px;color:#daa520;color:var(--primary-gold);font-size:.75rem;padding:.25rem .75rem}.card-content{justify-content:center}.card-content,.main-content{display:flex;flex:1 1;flex-direction:column}.main-content{padding:1rem}@media (max-width:720px){.location-section{gap:1rem;gap:var(--spacing-md);margin:1.5rem 0;margin:var(--spacing-lg) 0}.mana-display{gap:.5rem;gap:var(--spacing-sm);padding:.5rem;padding:var(--spacing-sm)}.mana-label{font-size:.875rem;font-size:var(--font-size-sm)}.mana-value{font-size:1.25rem;font-size:var(--font-size-xl)}.location-grid{gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}.location-btn{height:100px;padding:.5rem;padding:var(--spacing-sm)}.location-emoji{font-size:2rem;font-size:var(--icon-size-sm);margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.location-mana,.location-name{font-size:.75rem;font-size:var(--font-size-xs)}}@media (max-width:480px){.location-section{margin:1rem 0;margin:var(--spacing-md) 0}.mana-display{gap:.5rem;gap:var(--spacing-sm);padding:.5rem;padding:var(--spacing-sm)}.mana-label{font-size:.875rem;font-size:var(--font-size-sm)}.mana-value{font-size:1.125rem;font-size:var(--font-size-lg)}.location-grid{gap:.25rem;gap:var(--spacing-xs);grid-template-columns:repeat(2,1fr)}.location-btn{height:85px;padding:.25rem;padding:var(--spacing-xs)}.location-emoji{font-size:1.8rem;margin-bottom:4px}.location-name{font-size:.75rem;font-weight:600}.location-mana{font-size:.7rem;opacity:.9}}@media (max-width:600px){.element-grid{gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(3,1fr)}.element-btn{height:110px;padding:.5rem;padding:var(--spacing-sm)}.element-emoji{font-size:2.2rem;margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.element-name{font-size:.875rem;font-size:var(--font-size-sm)}.elemental-grid{gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}.elemental-btn{height:110px;padding:.5rem;padding:var(--spacing-sm)}.elemental-emoji{font-size:2.2rem;margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.elemental-rarity-badge{font-size:.875rem;font-size:var(--font-size-sm);padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm)}}@media (max-width:420px){.battle-section{margin:.5rem;margin:var(--spacing-sm);padding:1rem 1.5rem;padding:var(--spacing-md) var(--spacing-lg)}.battle-display{gap:1.5rem;gap:var(--spacing-lg);margin:1.5rem 0;margin:var(--spacing-lg) 0;padding:1.5rem;padding:var(--spacing-lg)}.battle-choice{gap:1rem;gap:var(--spacing-md);min-width:100px;padding:1rem;padding:var(--spacing-md)}.battle-emoji{font-size:3.5rem!important;height:4rem!important;width:4rem!important}.battle-vs{font-size:1.5rem}.battle-player-name{font-size:.8rem}.element-grid{gap:1rem;gap:var(--spacing-md);grid-template-columns:repeat(2,1fr);margin:1rem 0;margin:var(--spacing-md) 0}.element-btn{height:110px;padding:1rem;padding:var(--spacing-md)}.element-emoji{font-size:2.5rem!important;margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.element-name{font-size:.75rem;font-size:var(--font-size-xs)}.elemental-grid{gap:1rem;gap:var(--spacing-md);grid-template-columns:repeat(2,1fr);margin:1rem 0;margin:var(--spacing-md) 0}.elemental-btn{height:110px;padding:1rem;padding:var(--spacing-md)}.elemental-emoji{font-size:2.5rem!important;margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.elemental-rarity-badge{font-size:.75rem;font-size:var(--font-size-xs);padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm)}.location-grid{gap:1rem;gap:var(--spacing-md);grid-template-columns:repeat(2,1fr);margin:1rem 0;margin:var(--spacing-md) 0}.location-btn{height:95px;padding:1rem;padding:var(--spacing-md)}.location-emoji{font-size:2.2rem!important;margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.location-name{font-size:.75rem;font-weight:600}.location-mana{font-size:.7rem;opacity:.9}.battle-navigation{padding:0 1rem;padding:0 var(--spacing-md);top:5rem}.battle-header{margin-bottom:1rem;margin-bottom:var(--spacing-md)}.battle-icon{filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));font-size:4rem;font-size:var(--icon-size-lg);font-size:5.5rem!important;margin-bottom:.5rem;margin-bottom:var(--spacing-sm);margin-bottom:1rem;margin-bottom:var(--spacing-md);margin-top:1.5rem;margin-top:var(--spacing-lg)}.battle-title{font-size:1.5rem;font-size:var(--font-size-2xl)}.battle-subtitle,.battle-title{margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.battle-subtitle{font-size:.875rem;font-size:var(--font-size-sm)}.mana-display{gap:.5rem;gap:var(--spacing-sm);margin-bottom:.5rem;margin-bottom:var(--spacing-sm);padding:.5rem;padding:var(--spacing-sm)}.mana-label{font-size:.875rem;font-size:var(--font-size-sm)}.mana-value{font-size:1.125rem;font-size:var(--font-size-lg)}.battle-btn{font-size:1rem;font-size:var(--font-size-base);margin-top:1rem;margin-top:var(--spacing-md);padding:1rem 1.5rem;padding:var(--spacing-md) var(--spacing-lg)}.battle-step-indicator{gap:.5rem;gap:var(--spacing-sm);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.step-dot{height:10px;width:10px}.back-btn{font-size:1.125rem;font-size:var(--font-size-lg);height:3rem;height:var(--button-height-md);width:3rem;width:var(--button-height-md)}.battle-progress{font-size:.875rem;font-size:var(--font-size-sm)}.nav-icon{font-size:1.25rem}.nav-label{font-size:.6rem}.nav-item{min-width:50px;padding:.4rem}.profile-container{gap:.75rem;padding:.5rem}.profile-hero{padding:1rem .75rem .75rem}.hero-content{gap:.75rem}.avatar-circle{height:60px;width:60px}.avatar-emoji{font-size:1.5rem}.player-name-modern{font-size:1.25rem}.player-title-modern{font-size:.7rem;padding:.4rem .8rem}.player-rank-modern{padding:.4rem .8rem}.rank-text{font-size:.7rem}.stats-grid-modern{gap:.5rem;grid-template-columns:repeat(2,1fr)}.stat-card-modern{min-height:80px;padding:.75rem}.stat-value-modern{font-size:1.25rem}.stat-label-modern{font-size:.65rem}.achievement-card-modern,.achievements-modern{padding:.75rem}.achievement-icon-modern{font-size:1.25rem;height:32px;width:32px}.achievement-name-modern{font-size:.8rem}.achievement-desc-modern{font-size:.7rem}.collection-container-modern{padding:.5rem}.stat-card{gap:.5rem;padding:.6rem 1rem}.stat-icon,.stat-value{font-size:1.2rem}.stat-value{margin-bottom:.05rem}.stat-label{font-size:.7rem;margin-top:.05rem}.collection-stats-modern{gap:.5rem}.rarity-stats-container{gap:.5rem;margin-bottom:.75rem}.total-count-card{padding:.6rem .8rem}.total-count-icon{font-size:1.25rem}.total-count-label{font-size:.8rem}.total-count-value{font-size:1.25rem}.rarity-list{gap:.4rem}.rarity-item{padding:.5rem .7rem}.rarity-info{gap:.5rem}.rarity-icon{font-size:1rem}.rarity-name{font-size:.75rem}.rarity-count{gap:.3rem}.rarity-number{font-size:1rem}.rarity-percentage{font-size:.65rem;padding:.15rem .3rem}.stat-card{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:15px;display:flex;gap:.75rem;padding:1rem 1.5rem;transition:all .3s ease}.stat-card.compact{gap:.5rem;padding:.6rem 1rem}.stat-card.compact .stat-icon,.stat-card.compact .stat-value{font-size:1.2rem}.stat-card.compact .stat-label{font-size:.7rem}.stat-card:hover{box-shadow:0 8px 25px #0003;transform:translateY(-2px)}.stat-card.epic{background:linear-gradient(135deg,#8b5cf633,#7c3aed33);border-color:#8b5cf64d}.stat-card.immortal{background:linear-gradient(135deg,#f59e0b33,#d9770633);border-color:#f59e0b4d}.stat-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));flex-shrink:0;font-size:1.5rem}.stat-content{flex:1 1;text-align:left}.stat-value{color:beige;color:var(--text-primary);font-size:1.5rem;font-weight:700;line-height:1;margin-bottom:.1rem}.stat-label{color:#b8860b;color:var(--text-muted);font-size:.8rem;letter-spacing:.5px;margin-top:.1rem;text-transform:uppercase}.collection-header-modern{margin-bottom:1rem;padding:.75rem}.title-content h1{font-size:1.25rem}.title-icon{font-size:1.75rem;margin-top:.75rem}.elementals-grid-modern{gap:.4rem;grid-template-columns:repeat(2,1fr)}.elemental-card-modern{min-height:180px;padding:.3rem}.elemental-emoji-modern{font-size:1.5rem}.elemental-name-modern{font-size:.8rem}.elemental-level-modern{font-size:.6rem;padding:.2rem .4rem}.progress-bar-modern{height:36px!important;margin-bottom:.3rem!important;min-height:36px!important}.level-text{font-size:.6rem}.progress-text{display:none}.level-indicator{font-size:.55rem;padding:.08rem .25rem;top:-.15rem}.level-indicator:before{content:"LVL ";font-weight:600}.stat-item-modern{gap:.2rem;padding:.3rem}.stat-value{font-size:.75rem}.action-btn-modern{font-size:.7rem;gap:.2rem;padding:.4rem .6rem}.btn-icon{font-size:.8rem}.btn-cost{font-size:.7rem}.rules-container{gap:.75rem;padding:.5rem}.rules-card{border-radius:12px;padding:.75rem}.rules-card-header{gap:.5rem;margin-bottom:.75rem}.rules-card-icon{font-size:1.25rem}.rules-card-title{font-size:1rem}.rules-steps-grid{gap:.5rem;grid-template-columns:1fr}.rules-step-card{padding:.75rem}.step-icon{font-size:1.5rem;margin-bottom:.4rem}.step-title{font-size:.8rem}.step-description{font-size:.65rem}.element-relationships{gap:.5rem;grid-template-columns:1fr}.element-card{padding:.75rem}.element-emoji{font-size:1.75rem;margin-bottom:.4rem}.element-name{font-size:.9rem}.location-card{padding:.75rem}.location-icon{font-size:1.5rem}.location-name{font-size:.9rem}.elementals-grid{gap:.5rem;grid-template-columns:repeat(2,1fr)}.elemental-card{padding:.75rem}.elemental-icon{font-size:1.5rem;margin-bottom:.4rem}.progression-card{padding:.75rem}.progression-icon{font-size:1.5rem}.progression-title{font-size:.9rem}.progression-description{font-size:.7rem}.modal{margin:.5rem;max-width:calc(100vw - 1rem);padding:1rem}.modal-title{font-size:1rem;margin-bottom:.75rem}.settings-menu{border-radius:18px;max-height:90vh;width:95%}.settings-content{padding:1.2rem;scrollbar-width:thin}.settings-content::-webkit-scrollbar{width:7px}.rules-page-header{padding:1rem 1.5rem}.rules-page-title{font-size:1.6rem}.rules-page::-webkit-scrollbar,.rules-scroll-container::-webkit-scrollbar{width:7px}.setting-group{border-radius:14px;margin-bottom:.8rem;padding:.8rem}.setting-header{margin-bottom:1rem;padding-bottom:1rem}.setting-icon{font-size:1.6rem;margin-right:.8rem}.setting-label{font-size:.95rem}.setting-description{font-size:.75rem}.reset-cache-button,.rules-button{border-radius:12px;font-size:.9rem;padding:.8rem}.reset-icon,.rules-icon{font-size:1.1rem}.settings-header{border-radius:17px 17px 0 0;padding:.6rem 1rem}.settings-header h2{font-size:1rem}.close-button{font-size:.8rem;height:24px;width:24px}.slider-container{gap:1rem}.volume-slider{height:7px}.volume-slider::-webkit-slider-thumb{height:18px;width:18px}.volume-value{font-size:1rem;min-width:60px;padding:.6rem .8rem;width:60px}.card{border-radius:12px;padding:1rem}.card-title{font-size:1.25rem;margin-bottom:.75rem}.profile-card{border-radius:16px;padding:1rem}.profile-header{gap:.75rem;margin-bottom:1rem}.avatar-ring{height:50px;width:50px}.avatar-inner{font-size:1.4rem}.player-name{font-size:1rem}.player-title{font-size:.75rem}.enhanced-stats-grid{gap:.5rem}.stat-card{padding:.75rem}.stat-icon{font-size:1.8rem}.stat-value{font-size:1.25rem}.stat-label{font-size:.6rem}.achievement-item{gap:.5rem;padding:.5rem}.achievement-icon{font-size:.9rem;height:24px;width:24px}.achievement-name{font-size:.7rem}.achievement-desc{font-size:.65rem}.btn-primary{font-size:.85rem;padding:.75rem 1.5rem}.nav-container{padding:0 .5rem}}@media (max-width:768px){.element-emoji,.elemental-emoji,.location-emoji{font-size:2rem}}@media (max-width:480px){.element-emoji,.elemental-emoji,.location-emoji{font-size:1.8rem}}.rules-container{display:flex;flex-direction:column;gap:1.5rem;max-width:100%;overflow-x:hidden;padding:1rem}.rules-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:2px solid #daa52033;border-radius:20px;box-shadow:0 8px 32px #0000004d,0 4px 16px #daa5201a;overflow:hidden;padding:1.5rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.rules-card:before{background:linear-gradient(90deg,#daa520,gold);background:linear-gradient(90deg,var(--primary-gold),var(--secondary-gold));content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.rules-card:hover{border-color:#daa52080;box-shadow:0 16px 48px #0006,0 8px 25px #daa5204d;transform:translateY(-6px)}.rules-card:hover:before{opacity:1}.rules-card-header{align-items:center;border-bottom:2px solid #daa52033;display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;position:relative}.rules-card-header:after{background:linear-gradient(90deg,#daa520,gold);background:linear-gradient(90deg,var(--primary-gold),var(--secondary-gold));border-radius:1px;bottom:-2px;content:"";height:2px;left:0;position:absolute;width:60px}.rules-card-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));font-size:2rem;transition:all .3s ease}.rules-card:hover .rules-card-icon{filter:drop-shadow(0 6px 12px rgba(218,165,32,.4));transform:scale(1.1)}.rules-card-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.4rem;font-weight:700;letter-spacing:.5px;margin:0;text-shadow:0 2px 8px #000c,0 0 20px #daa5204d;text-transform:uppercase}.rules-steps-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.rules-step-card{background:#0003;border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;padding:1.5rem;position:relative;text-align:center;transition:all .3s ease}.rules-step-card:hover{border-color:#daa5204d;box-shadow:0 12px 40px #0006;transform:translateY(-4px)}.step-number{align-items:center;background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-radius:50%;box-shadow:0 2px 8px #daa5204d;color:#0f1423fa;color:var(--dark-bg);display:flex;font-size:.8rem;font-weight:700;height:24px;justify-content:center;position:absolute;right:.5rem;top:.5rem;width:24px}.step-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2.5rem;margin-bottom:1rem}.step-title{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;margin-bottom:.5rem;text-shadow:0 1px 2px #00000080}.step-description{color:#b8860b;color:var(--text-muted);font-size:.9rem;line-height:1.4}.element-system{display:flex;flex-direction:column;gap:1.5rem}.element-relationships{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.element-card{background:#0003;border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;padding:1.5rem;position:relative;text-align:center;transition:all .3s ease}.element-card:hover{border-color:#10b9814d;box-shadow:0 12px 40px #0006;transform:translateY(-4px)}.element-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:3rem;margin-bottom:1rem}.element-name{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.2rem;font-weight:600;margin-bottom:.75rem;text-shadow:0 1px 2px #00000080}.element-advantage{align-items:center;background:#10b9811a;border:1px solid #10b9814d;border-radius:12px;display:flex;gap:.5rem;justify-content:center;padding:.5rem}.advantage-arrow{color:#10b981;color:var(--success);font-size:1.2rem;font-weight:700}.advantage-text{color:#e8d5b7;color:var(--text-secondary);font-size:.8rem;font-weight:500}.element-cycle-info{background:#0003;border:1px solid #ffffff1a;border-radius:16px;padding:1.5rem;text-align:center}.cycle-badge{align-items:center;background:#daa5201a;border:1px solid #daa5204d;display:inline-flex;margin-bottom:1rem;padding:.75rem 1.5rem}.cycle-text{color:gold;color:var(--secondary-gold);font-size:1.1rem;font-weight:600;letter-spacing:.5px}.cycle-description{line-height:1.5;margin:0}.locations-grid{display:flex;flex-direction:column;gap:1rem}.location-card{align-items:center;background:#0003;border:1px solid #ffffff1a;border-radius:16px;display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.location-card:hover{border-color:#daa5204d;box-shadow:0 8px 25px #0000004d;transform:translateX(4px)}.location-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2.5rem}.location-content{flex:1 1;min-width:0}.location-name{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.2rem;font-weight:600;margin-bottom:.25rem;text-shadow:0 1px 2px #00000080}.location-description{color:#b8860b;color:var(--text-muted);font-size:.9rem;margin-bottom:.5rem}.mana-badge{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-radius:20px;box-shadow:0 2px 8px #daa5204d;color:#0f1423fa;color:var(--dark-bg);font-size:.8rem;font-weight:700;letter-spacing:.5px;padding:.5rem 1rem;text-transform:uppercase}.mana-system-info,.protection-info{background:#0003;border:1px solid #ffffff1a;border-radius:16px;margin-top:1.5rem;padding:1.5rem}.mana-system-info{border-color:#daa5204d}.protection-info{border-color:#10b9814d}.info-header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}.info-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:1.5rem}.info-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.2rem;font-weight:600;margin:0;text-shadow:0 1px 2px #00000080}.info-content{display:flex;flex-direction:column;gap:.75rem}.info-item{align-items:center;background:#ffffff0d;border-radius:12px;display:flex;gap:.75rem;padding:.75rem}.info-label{color:beige;color:var(--text-primary);font-weight:600;min-width:60px}.info-value,.protection-description{color:#e8d5b7;color:var(--text-secondary);font-size:.9rem}.protection-description{line-height:1.5;margin-bottom:1rem}.protection-example{background:#10b9811a;border:1px solid #10b9814d;border-radius:12px;padding:1rem}.example-text{color:#10b981;color:var(--success);font-size:.9rem;font-weight:500}.elementals-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.elemental-card{background:#0003;border:1px solid #ffffff1a;padding:1.5rem;text-align:center}.elemental-card:hover{box-shadow:0 12px 40px #0006;transform:translateY(-4px)}.elemental-card.common:hover{border-color:#888}.elemental-card.rare:hover{border-color:#007bff}.elemental-card.epic:hover{border-color:#a855f7}.elemental-card.immortal:hover{border-color:gold}.elemental-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2.5rem;margin-bottom:1rem}.elemental-name{font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.elemental-card.common .elemental-name{color:#888}.elemental-card.rare .elemental-name{color:#007bff}.elemental-card.epic .elemental-name{color:#a855f7}.elemental-card.immortal .elemental-name{color:gold}.protection-value{color:#b8860b;color:var(--text-muted);font-size:.9rem;font-weight:500}.progression-grid{display:flex;flex-direction:column;gap:1rem}.progression-card{align-items:center;background:#0003;border:1px solid #ffffff1a;border-radius:16px;display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.progression-card:hover{border-color:#daa5204d;box-shadow:0 8px 25px #0000004d;transform:translateX(4px)}.progression-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2.5rem}.progression-content{flex:1 1;min-width:0}.progression-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.2rem;font-weight:600;margin-bottom:.25rem;text-shadow:0 1px 2px #00000080}.progression-description{color:#b8860b;color:var(--text-muted);font-size:.9rem;line-height:1.4;margin:0}@media (max-width:768px){.rules-container{gap:1rem;padding:.75rem}.rules-card{border-radius:20px;padding:1.25rem}.rules-card-header{margin-bottom:1.25rem}.rules-card-icon{font-size:1.75rem}.rules-card-title{font-size:1.25rem}.rules-steps-grid{gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.rules-step-card{padding:1.25rem}.step-icon{font-size:2rem;margin-bottom:.75rem}.step-title{font-size:1rem}.step-description{font-size:.8rem}.element-relationships{gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.element-card{padding:1.25rem}.element-emoji{font-size:2.5rem;margin-bottom:.75rem}.element-name{font-size:1.1rem}.element-advantage{padding:.4rem}.advantage-text{font-size:.75rem}.location-card{padding:1.25rem}.location-icon{font-size:2rem}.location-name{font-size:1.1rem}.elementals-grid{gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.elemental-card{padding:1.25rem}.elemental-icon{font-size:2rem;margin-bottom:.75rem}.progression-card{padding:1.25rem}.progression-icon{font-size:2rem}.progression-title{font-size:1.1rem}}@media (max-width:480px){.rules-container{gap:.75rem;padding:.5rem}.rules-card{border-radius:16px;padding:1rem}.rules-card-header{gap:.75rem;margin-bottom:1rem}.rules-card-icon{font-size:1.5rem}.rules-card-title{font-size:1.1rem}.rules-steps-grid{gap:.75rem;grid-template-columns:1fr}.rules-step-card{padding:1rem}.step-icon{font-size:1.75rem;margin-bottom:.5rem}.step-title{font-size:.9rem}.step-description{font-size:.75rem}.element-relationships{gap:.75rem;grid-template-columns:1fr}.element-card{padding:1rem}.element-emoji{font-size:2rem;margin-bottom:.5rem}.element-name{font-size:1rem}.element-advantage{padding:.3rem}.advantage-text{font-size:.7rem}.location-card{padding:1rem}.location-icon{font-size:1.75rem}.location-name{font-size:1rem}.elementals-grid{gap:.75rem;grid-template-columns:repeat(2,1fr)}.elemental-card{padding:1rem}.elemental-icon{font-size:1.75rem;margin-bottom:.5rem}.progression-card{padding:1rem}.no-elementals{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border-radius:16px;border-radius:var(--border-radius-lg);margin:1.5rem 0;margin:var(--spacing-lg) 0;padding:2rem;padding:var(--spacing-xl);text-align:center}.no-elementals-icon{font-size:8rem;font-size:var(--icon-size-xl);margin-bottom:1.5rem;margin-bottom:var(--spacing-lg);opacity:.5}.no-elementals h3{color:beige;color:var(--text-primary);font-size:1.25rem;font-size:var(--font-size-xl);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.no-elementals p{color:#e8d5b7;color:var(--text-secondary);font-size:1rem;font-size:var(--font-size-base);margin-bottom:.5rem;margin-bottom:var(--spacing-sm)}.elemental-info{align-items:center;display:flex;flex-direction:column;gap:.25rem;gap:var(--spacing-xs)}.elemental-level{color:#e8d5b7;color:var(--text-secondary);font-weight:600}.elemental-level,.evolution-indicator{font-size:.75rem;font-size:var(--font-size-xs)}.evolution-indicator{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-radius:8px;border-radius:var(--border-radius-sm);color:#0f1423fa;color:var(--dark-bg);font-weight:700;padding:2px 4px}.progression-icon{font-size:1.75rem}.progression-title{font-size:1rem}.progression-description{font-size:.8rem}}.collection-container{background:#0f1423fa;background:var(--dark-bg);color:beige;color:var(--text-primary);margin:0 auto;max-width:1200px;min-height:100vh;padding:0}.collection-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border-radius:16px;border-radius:var(--border-radius-lg);margin:1.5rem;margin:var(--spacing-lg);margin-bottom:2rem;margin-bottom:var(--spacing-xl);padding:1.5rem;padding:var(--spacing-lg);text-align:center}.collection-title h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));-webkit-background-clip:text;background-clip:text;font-size:1.875rem;font-size:var(--font-size-3xl);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.collection-stats{color:#e8d5b7;color:var(--text-secondary);display:flex;font-size:1.125rem;font-size:var(--font-size-lg);gap:1.5rem;gap:var(--spacing-lg);justify-content:center}.collection-stats span{background:#ffffff1a;border-radius:12px;border-radius:var(--border-radius-md);padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md)}.collection-filters{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border-radius:16px;border-radius:var(--border-radius-lg);display:flex;gap:1.5rem;gap:var(--spacing-lg);margin:0 1.5rem 2rem;margin:0 var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);padding:1.5rem;padding:var(--spacing-lg)}.filter-group{display:flex;flex-direction:column;gap:.5rem;gap:var(--spacing-sm)}.filter-group label{color:#e8d5b7;color:var(--text-secondary);font-size:.875rem;font-size:var(--font-size-sm);font-weight:600}.filter-group select{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;border-radius:var(--border-radius-md);color:beige;color:var(--text-primary);cursor:pointer;font-size:1rem;font-size:var(--font-size-base);padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);transition:all .3s ease}.filter-group select:hover{background:#ffffff26;border-color:#daa520;border-color:var(--primary-gold)}.filter-group select:focus{border-color:gold;border-color:var(--secondary-gold);box-shadow:0 0 0 2px #daa5204d;outline:none}.elementals-grid{grid-gap:1rem;grid-gap:var(--spacing-md);gap:1rem;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:2rem;margin-bottom:var(--spacing-xl)}.collectible-cards-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(1,1fr);justify-content:flex-start;justify-items:center;margin:0 .2rem;padding:.2rem}@media (max-width:479px){.collectible-cards-grid{gap:.75rem;grid-template-columns:repeat(1,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:280px;transform:none;width:200px}.collectible-card .character-name-text{font-size:.7rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.5rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.7rem;line-height:1.1}.collectible-card .level-text-description{font-size:.6rem;line-height:1.1;margin-top:2px}}@media (min-width:400px) and (max-width:479px){.collectible-cards-grid{gap:.6rem;grid-template-columns:repeat(1,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:260px;transform:none;width:190px}.collectible-card .character-name-text{font-size:.65rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.45rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.6rem;line-height:1.1}.collectible-card .level-text-description{font-size:.55rem;line-height:1.1;margin-top:2px}}@media (min-width:480px) and (max-width:609px){.collectible-cards-grid{gap:.75rem;grid-template-columns:repeat(2,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:290px;transform:none;width:210px}.collectible-card .character-name-text{font-size:.75rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.55rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.75rem;line-height:1.1}.collectible-card .level-text-description{font-size:.65rem;line-height:1.1;margin-top:2px}}@media (min-width:610px) and (max-width:700px){.collectible-cards-grid{gap:.75rem;grid-template-columns:repeat(2,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:320px;transform:none;width:240px}.collectible-card .character-name-text{font-size:.8rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.6rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.8rem;line-height:1.1}.collectible-card .level-text-description{font-size:.7rem;line-height:1.1;margin-top:2px}}@media (min-width:700px) and (max-width:756px){.collectible-cards-grid{gap:1rem;grid-template-columns:repeat(2,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.5rem}.collectible-card{height:330px;transform:none;width:250px}.collectible-card .character-name-text{font-size:.85rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.65rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.85rem;line-height:1.1}.collectible-card .level-text-description{font-size:.75rem;line-height:1.1;margin-top:2px}}@media (min-width:757px) and (max-width:900px){.collectible-cards-grid{gap:1rem;grid-template-columns:repeat(3,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.5rem}.collectible-card{height:310px;transform:none;width:230px}.collectible-card .character-name-text{font-size:.8rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.6rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.8rem;line-height:1.1}.collectible-card .level-text-description{font-size:.7rem;line-height:1.1;margin-top:2px}}@media (min-width:901px){.collectible-cards-grid{gap:1rem;grid-template-columns:repeat(4,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:380px;transform:none;width:280px}.collectible-card .character-name-text{font-size:.9rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.7rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:1.1rem;line-height:1.1}.collectible-card .level-text-description{font-size:.85rem;line-height:1.1;margin-top:2px}}@media (min-width:1201px){.collectible-cards-grid{gap:1.5rem;grid-template-columns:repeat(4,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:400px;transform:none;width:300px}.collectible-card .character-name-text{font-size:1rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.8rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:1.2rem;line-height:1.1}.collectible-card .level-text-description{font-size:.95rem;line-height:1.1;margin-top:2px}}@media (max-width:399px){.collectible-cards-grid{gap:.5rem;grid-template-columns:repeat(1,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.2rem}.collectible-card{height:220px;transform:none;width:160px}.collectible-card .character-name-text{font-size:.6rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.4rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.55rem;line-height:1.1}.collectible-card .level-text-description{font-size:.5rem;line-height:1.1;margin-top:2px}}@media (max-width:360px){.collectible-cards-grid{gap:.4rem;grid-template-columns:repeat(1,1fr);justify-content:center;margin:0 auto;max-width:100%;padding:.15rem}.collectible-card{height:190px;transform:none;width:140px}.collectible-card .character-name-text{font-size:.55rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.35rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.5rem;line-height:1.1}.collectible-card .level-text-description{font-size:.45rem;line-height:1.1;margin-top:2px}}.collectible-card{align-items:stretch;background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffffff1a;border-radius:12px;box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;flex-shrink:0;height:300px;justify-content:space-between;margin:0 auto;overflow:hidden;padding:0;position:relative;transition:all .3s ease;width:220px}.collectible-card .character-name-text{font-size:.8rem;line-height:1.1;margin-bottom:2px}.collectible-card .character-description-text{font-size:.7rem;line-height:1.1}.collectible-card .character-description-text strong{font-size:.8rem;line-height:1.1}.collectible-card .level-text-description{font-size:.7rem;line-height:1.1;margin-top:2px}.collectible-card.level-up-vibration{animation:levelUpVibration .8s ease-in-out;animation-iteration-count:1}.collectible-card.element-earth{border:3px solid #14532d;box-shadow:0 8px 32px #0000004d,0 0 20px #14532d33,inset 0 0 20px #14532d1a}.collectible-card.element-earth:before{animation:earthGlow 3s ease-in-out infinite;background:linear-gradient(45deg,#14532d,#052e16,#14532d);border-radius:14px;bottom:-2px;content:"";left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}.collectible-card.element-fire{border:3px solid #7f1d1d;box-shadow:0 8px 32px #0000004d,0 0 20px #7f1d1d33,inset 0 0 20px #7f1d1d1a}.collectible-card.element-fire:before{animation:fireGlow 2.5s ease-in-out infinite;background:linear-gradient(45deg,#7f1d1d,#450a0a,#7f1d1d);border-radius:14px;bottom:-2px;content:"";left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}.collectible-card.element-water{border:3px solid #1e3a8a;box-shadow:0 8px 32px #0000004d,0 0 20px #1e3a8a33,inset 0 0 20px #1e3a8a1a}.collectible-card.element-water:before{animation:waterGlow 3s ease-in-out infinite;background:linear-gradient(45deg,#1e3a8a,#172554,#1e3a8a);border-radius:14px;bottom:-2px;content:"";left:-2px;position:absolute;right:-2px;top:-2px;z-index:-1}@keyframes earthGlow{0%,to{opacity:.3;transform:none}50%{opacity:.6;transform:none}}@keyframes fireGlow{0%,to{opacity:.4;transform:none}50%{opacity:.7;transform:none}}@keyframes waterGlow{0%,to{opacity:.3;transform:none}50%{opacity:.6;transform:none}}@keyframes commonGlow{0%,to{opacity:.3;transform:none}50%{opacity:.6;transform:none}}@keyframes rareGlow{0%,to{opacity:.4;transform:none}50%{opacity:.7;transform:none}}@keyframes epicGlow{0%,to{opacity:.5;transform:none}50%{opacity:.8;transform:none}}@keyframes immortalGlow{0%,to{opacity:.6;transform:none}50%{opacity:.9;transform:none}}.collectible-card.rarity-rare .card-artwork:after{animation:rareShine 4s ease-in-out infinite;background:linear-gradient(45deg,#0000 30%,#4fa0af1a 50%,#0000 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.collectible-card.rarity-epic .card-artwork:after{animation:epicPulse 3s ease-in-out infinite;background:radial-gradient(circle at 50% 50%,#9b59b633 0,#0000 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.collectible-card.rarity-immortal .card-artwork:after{animation:immortalAura 2s ease-in-out infinite;background:radial-gradient(circle at 30% 30%,#f39c124d 0,#0000 50%),radial-gradient(circle at 70% 70%,#e67e224d 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}@keyframes rareShine{0%,to{transform:translateX(-100%)}50%{transform:translateX(100%)}}@keyframes epicPulse{0%,to{opacity:.2;transform:none}50%{opacity:.4;transform:none}}@keyframes immortalAura{0%,to{opacity:.3;transform:rotate(0deg)}50%{opacity:.6;transform:rotate(180deg)}}.collectible-card:hover{border-color:var(--rarity-color);box-shadow:0 8px 24px #0006,0 0 25px var(--rarity-glow),0 0 50px var(--rarity-glow),0 0 75px var(--rarity-glow);transform:none;transition:all .3s ease,box-shadow .3s ease}.collectible-card.rarity-common:hover{border-color:#9ca3af;box-shadow:0 8px 24px #0006,0 0 20px #9ca3af66,0 0 40px #9ca3af4d}.collectible-card.rarity-rare:hover{border-color:#3b82f6;box-shadow:0 8px 24px #0006,0 0 25px #3b82f680,0 0 50px #3b82f666,0 0 75px #3b82f64d}.collectible-card.rarity-epic:hover{border-color:#8b5cf6;box-shadow:0 8px 24px #0006,0 0 30px #8b5cf699,0 0 60px #8b5cf680,0 0 90px #8b5cf666}.collectible-card.rarity-immortal:hover{border-color:#f59e0b;box-shadow:0 8px 24px #0006,0 0 35px #f59e0bb3,0 0 70px #f59e0b99,0 0 105px #f59e0b80}.card-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:4px;color:#fffc;font-size:.7rem;font-weight:500;left:50%;max-width:none;min-width:-webkit-fit-content;min-width:fit-content;overflow:visible;padding:2px 8px;position:absolute;top:8px;transform:translateX(-50%);white-space:nowrap;z-index:10}.card-artwork{background:linear-gradient(135deg,var(--element-color),var(--element-color) 40);border-bottom:2px solid #ffffff1a;height:73%}.artwork-container,.card-artwork{align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative;width:100%}.artwork-container{height:100%;pointer-events:auto}.artwork-container.on-cooldown .artwork-image,.elemental-card-modern.on-cooldown .elemental-battle-image,.elemental-card-modern.on-cooldown .elemental-battle-placeholder{filter:brightness(.5)}.artwork-image{fill:currentColor;stroke:none;border-radius:8px;height:100%;left:0;max-height:100%;max-width:100%;object-fit:cover;object-position:center;opacity:1;pointer-events:none;top:0;visibility:visible;width:100%;z-index:3}.artwork-emoji,.artwork-image{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));position:absolute;transition:opacity .3s ease}.artwork-emoji{display:none;font-size:4rem;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}.artwork-emoji.show{display:block}.artwork-background{background:radial-gradient(circle at center,#ffffff1a,#0000 70%);bottom:0;left:0;position:absolute;right:0;top:0;z-index:0}.artwork-rarity-indicator{align-items:center;border:none;border-radius:14px;bottom:8px;box-shadow:0 2px 8px #0000004d;color:#fff;display:flex;font-size:.75rem;font-weight:600;height:28px;justify-content:center;left:8px;letter-spacing:.5px;min-width:60px;padding:0 12px;position:absolute;text-transform:uppercase;transition:all .3s ease;-webkit-user-select:none;user-select:none;width:auto;z-index:10}.artwork-rarity-indicator.rarity-common{background:#9ca3af99;color:#fff}.artwork-rarity-indicator.rarity-rare{background:#3b82f699;color:#fff}.artwork-rarity-indicator.rarity-epic{background:#8b5cf699;color:#fff}.artwork-rarity-indicator.rarity-immortal{background:#f59e0b99;color:#fff}.character-name-block{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid #fff3;border-radius:0;margin:0;overflow:hidden;padding:6px 10px;position:relative;text-align:center}.character-name-block:before{animation:shimmer 2s infinite;background:linear-gradient(45deg,#0000 30%,#ffffff0d 50%,#0000 70%);bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.character-name-text{color:#fff;font-weight:700;overflow:hidden;position:relative;text-overflow:ellipsis;text-shadow:0 2px 4px #000c;white-space:nowrap;z-index:1}.character-divider{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);height:1px;margin:4px 0;width:100%}.character-divider+.character-divider{margin-top:2rem}.character-divider+.character-divider+.character-divider{margin-top:2rem;opacity:0}.level-text-description{color:#fff;font-family:Arial Black,Helvetica Bold,sans-serif;font-weight:800;letter-spacing:1px;text-align:center;text-shadow:0 2px 8px #000000e6}.card-bottom-indicators{align-items:center;bottom:12px;display:flex;justify-content:space-between;left:0;padding:0 16px;position:absolute;right:0;z-index:10}.level-indicator-bottom-right{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border-radius:8px;color:#ff6b6b;font-family:Arial Black,Helvetica Bold,sans-serif;font-size:.75rem;font-weight:800;letter-spacing:1px;padding:4px 8px;text-shadow:0 2px 6px #000000e6}.character-description-text{color:#fffc;font-weight:400;position:relative;text-align:center;z-index:1}.character-description-text strong{font-weight:700}.card-bottom{background:#0000004d;border-top:1px solid #ffffff1a;padding:6px}.rarity-indicators,.rarity-star{display:none}.card-stats{display:flex;flex-direction:column;gap:-8px}.stat-row{align-items:center;font-size:.7rem;justify-content:space-between;line-height:.6;margin:-4px 0;padding:-4px 0}.stat-label{color:#ffffffb3;font-weight:500}.stat-value{color:#fff}.card-action-btn{align-items:center;border:none;border-radius:0 0 10px 10px;color:#fff;cursor:pointer;display:flex;font-size:.8rem;font-weight:600;gap:8px;justify-content:center;padding:12px;transition:all .3s ease;width:100%}.card-action-btn.level-up{background:linear-gradient(135deg,#10b981,#059669)}.card-action-btn.upgrade{background:linear-gradient(135deg,#f59e0b,#d97706)}.card-action-btn:hover{box-shadow:0 4px 12px #0000004d;transform:translateY(-2px)}.card-action-btn.disabled{background:linear-gradient(135deg,#6b7280,#4b5563);color:#ffffff80;cursor:not-allowed;opacity:.6;transform:none}.card-action-btn.disabled:hover{box-shadow:0 8px 32px #0000004d;transform:none}.card-action-btn.disabled .btn-cost,.card-action-btn.disabled .btn-icon{opacity:.5}.level-indicator{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(135deg,#000000e6,#000000b3);border:2px solid #fbbf24cc;border-radius:12px;box-shadow:0 4px 16px #fbbf244d;min-width:60px;padding:12px 20px;right:24px;text-align:center;top:24px;z-index:10}.level-text{color:#fbbf24;font-family:Arial Black,Helvetica Bold,sans-serif;font-size:1rem;font-weight:900;letter-spacing:.5px}.cooldown-indicator{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff80;border:1px solid #ffd700cc;box-shadow:0 4px 16px #ffd7004d;min-width:80px;padding:6px 8px;text-align:center;top:8px;transform:translateX(-50%);z-index:10000}.cooldown-timer{gap:4px}.cooldown-ready,.cooldown-timer{align-items:center;display:flex;justify-content:center}.ready-text{animation:glow 2s ease-in-out infinite alternate;color:#10b981;font-family:Arial Black,Helvetica Bold,sans-serif;font-size:1rem;font-weight:900;letter-spacing:1px;text-shadow:0 2px 4px #000000e6}@keyframes pulse{0%,to{opacity:.7;text-shadow:0 0 8px #ff6b6bcc}50%{opacity:1;text-shadow:0 0 12px #ff6b6b}}@keyframes glow{0%{text-shadow:0 2px 4px #000000e6,0 0 5px #10b98180}to{text-shadow:0 2px 4px #000000e6,0 0 10px #10b981cc}}.compact-action-btn{align-items:center;border:none;border-radius:14px;bottom:8px;box-shadow:0 2px 8px #0000004d;cursor:pointer;display:flex;font-size:.75rem;font-weight:600;height:28px;justify-content:center;letter-spacing:.5px;min-width:60px;padding:0 12px;pointer-events:auto;position:absolute;right:8px;text-transform:uppercase;transition:all .3s ease;-webkit-user-select:none;user-select:none;width:auto;z-index:10}.compact-action-btn,.compact-action-btn.level-up{background:#10b98199;color:#fff}.compact-action-btn.upgrade{background:#f59e0b99;border:1px solid #f59e0bcc;color:#fff}.compact-action-btn:hover{box-shadow:0 4px 12px #0006;transform:scale(1.1)}.compact-action-btn.upgrade:hover{box-shadow:0 4px 12px #f59e0b4d;transform:scale(1.1)}.compact-action-btn.disabled{background:#6b728066;color:#ffffff80;cursor:not-allowed;opacity:.6;transform:none}.compact-action-btn.disabled:hover{box-shadow:0 2px 8px #0000004d;transform:none}.level-up-modal-overlay{align-items:center!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000080;bottom:0!important;display:flex!important;height:100%!important;justify-content:center!important;left:0!important;min-height:100vh!important;opacity:0;padding:12px;position:fixed!important;right:0!important;top:0!important;transition:all .3s cubic-bezier(.4,0,.2,1);visibility:hidden;width:100%!important;z-index:999999!important}.level-up-modal-overlay.active{opacity:1;visibility:visible}.level-up-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:16px;border-radius:var(--border-radius-lg);box-shadow:0 16px 40px #0009;max-height:calc(100vh - 24px);max-width:320px;overflow:hidden;position:relative!important;transform:scale(.9);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;z-index:1000000}.level-up-modal-overlay.active .level-up-modal{transform:scale(1)}.level-up-modal-header{align-items:center;background:linear-gradient(135deg,#daa520,orange);background:linear-gradient(135deg,var(--primary-gold),var(--accent-gold));border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:.6rem 1rem}.level-up-modal-header h3{color:#1a1a1a;font-family:Volkhov,serif;font-size:1rem;font-weight:700;margin:0;text-shadow:0 2px 8px #0000004d}.level-up-modal-close{align-items:center;background:#fff3;border:none;border-radius:50%;color:#1a1a1a;cursor:pointer;display:flex;font-size:1.3rem;font-weight:600;height:28px;justify-content:center;padding:0;transition:all .3s ease;width:28px}.level-up-modal-close:hover{background:#ffffff4d;transform:scale(1.1)}.level-up-modal-content{padding:1rem}.level-up-modal.element-earth .level-up-elemental-info{background:#22c55e33;border:1px solid #22c55e66;border-radius:16px;border-radius:var(--border-radius-lg);margin-bottom:1rem;padding:1rem}.level-up-modal.element-fire .level-up-elemental-info{background:#dc262633;border:1px solid #dc262666;border-radius:16px;border-radius:var(--border-radius-lg);margin-bottom:1rem;padding:1rem}.level-up-modal.element-water .level-up-elemental-info{background:#3b82f633;border:1px solid #3b82f666;border-radius:16px;border-radius:var(--border-radius-lg);margin-bottom:1rem;padding:1rem}.collectible-card.element-earth .character-name-block{background:#22c55e26;border:1px solid #22c55e4d}.collectible-card.element-fire .character-name-block{background:#dc262626;border:1px solid #dc26264d}.collectible-card.element-water .character-name-block{background:#3b82f626;border:1px solid #3b82f64d}.level-up-elemental-info{margin-bottom:1rem;text-align:center}.level-up-elemental-details{color:#e8d5b7;color:var(--text-secondary);font-family:Inter,sans-serif;font-size:1.1rem;font-weight:700;line-height:1.4}.level-up-rarity-upgrade{color:#f59e0b;color:var(--warning);display:block;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;margin-top:.75rem}.level-up-cost-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #ffffff1a;border-radius:16px;border-radius:var(--border-radius-lg);margin-bottom:0;padding:.875rem}.level-up-balance-info,.level-up-cost-amount,.level-up-remaining-balance{align-items:center;display:flex;font-family:Inter,sans-serif;justify-content:space-between;margin-bottom:.5rem}.level-up-balance-info:last-child,.level-up-cost-amount:last-child,.level-up-remaining-balance:last-child{margin-bottom:0}.level-up-balance-label,.level-up-cost-label,.level-up-remaining-label{color:#e8d5b7;color:var(--text-secondary);font-size:.95rem;font-weight:500}.level-up-cost-value{color:#f44;font-size:1.05rem;font-weight:600}.level-up-balance-value{color:#10b981;color:var(--success);font-size:1.05rem;font-weight:600}.level-up-remaining-value{color:#daa520;color:var(--primary-gold);font-size:1.05rem;font-weight:600}.level-up-remaining-value.warning{color:#f44;font-weight:700;text-shadow:0 0 8px #ff444480}.level-up-modal-actions{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border-top:1px solid #ffffff1a;display:flex;gap:.6rem;padding:.875rem 1rem}.level-up-cancel-btn,.level-up-confirm-btn{border:none;border-radius:16px;border-radius:var(--border-radius-lg);cursor:pointer;flex:1 1;font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.5px;overflow:hidden;padding:.75rem 1rem;position:relative;text-transform:uppercase;transition:all .3s ease}.level-up-cancel-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:1px solid #fff3;color:#e8d5b7;color:var(--text-secondary)}.level-up-cancel-btn:hover{background:#ffffff1a;box-shadow:0 4px 15px #0000004d;color:beige;color:var(--text-primary);transform:translateY(-2px)}.level-up-confirm-btn{background:linear-gradient(135deg,#10b981,#059669);background:linear-gradient(135deg,var(--success),#059669);border:1px solid #10b9814d;box-shadow:0 4px 15px #10b9814d;color:#fff}.level-up-confirm-btn:hover{box-shadow:0 8px 25px #10b98166;transform:translateY(-2px)}.level-up-confirm-btn.disabled{border-color:#ffffff1a;color:#ffffff80;cursor:not-allowed}.level-up-confirm-btn.disabled,.level-up-confirm-btn.disabled:hover{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:none;transform:none}.level-up-confirm-btn.upgrade{background:linear-gradient(135deg,#daa520,orange);background:linear-gradient(135deg,var(--primary-gold),var(--accent-gold));border:1px solid #daa5204d;box-shadow:0 4px 15px #daa5204d;color:#1a1a1a}.level-up-confirm-btn.upgrade:hover{box-shadow:0 8px 25px #daa52066;transform:translateY(-2px)}@media (max-width:480px){.level-up-modal{max-width:calc(100vw - 1rem)}.level-up-modal-content{padding:.875rem}.level-up-modal-header{padding:.5rem .875rem}.level-up-elemental-name,.level-up-modal-header h3{font-size:1.2rem}.level-up-modal-actions{padding:1rem 1.25rem}.level-up-cancel-btn,.level-up-confirm-btn{font-size:.9rem;padding:.75rem 1rem}}@media (max-width:360px){.level-up-modal{max-width:calc(100vw - 1rem)}.level-up-modal-content{padding:1rem}.level-up-modal-header{padding:.875rem 1rem}.level-up-elemental-name,.level-up-modal-header h3{font-size:1.1rem}.level-up-modal-actions{padding:.875rem 1rem}.level-up-cancel-btn,.level-up-confirm-btn{font-size:.85rem;padding:.625rem .875rem}}@media (max-width:420px){.compact-action-btn{bottom:6px;font-size:.65rem;height:24px;min-width:50px;padding:0 8px;right:6px}}@media (max-width:360px){.compact-action-btn{bottom:4px;font-size:.6rem;height:22px;min-width:45px;padding:0 6px;right:4px}}.btn-icon{font-size:1rem}.btn-cost{font-size:.7rem}@media (min-width:768px) and (max-width:1024px){.elementals-grid{gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media (min-width:1200px){.elementals-grid{gap:1.5rem;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}.elemental-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border:2px solid;border-radius:16px;border-radius:var(--border-radius-lg);min-height:280px;overflow:hidden;padding:1rem;padding:var(--spacing-md);position:relative;transition:all .3s ease}.elemental-card:before{background:linear-gradient(90deg,#0000,currentColor,#0000);content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.elemental-card:hover:before{opacity:1}.elemental-card:hover{box-shadow:0 8px 25px #0000004d;transform:translateY(-2px)}.elemental-header{align-items:center;display:flex;gap:.5rem;gap:var(--spacing-sm);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.elemental-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:3rem;font-size:var(--icon-size-md)}.elemental-info{flex:1 1}.elemental-name{color:beige;color:var(--text-primary);font-size:1rem;font-size:var(--font-size-base);font-weight:700;margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.elemental-rarity{font-size:.875rem;font-size:var(--font-size-sm);font-weight:600;letter-spacing:.5px;text-transform:uppercase}.elemental-level{align-items:center;display:flex;flex-direction:column;gap:.25rem;gap:var(--spacing-xs)}.elemental-level span{color:#e8d5b7;color:var(--text-secondary);font-size:.875rem;font-size:var(--font-size-sm);font-weight:600}.evolution-badge{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-radius:8px;border-radius:var(--border-radius-sm);color:#0f1423fa;color:var(--dark-bg);font-size:.75rem;font-size:var(--font-size-xs);font-weight:700;padding:2px 6px}.elemental-stats{display:flex;flex-direction:column;gap:.25rem;gap:var(--spacing-xs);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.stat-item{align-items:center;background:#ffffff0d;border-radius:8px;border-radius:var(--border-radius-sm);display:flex;justify-content:space-between;padding:.25rem;padding:var(--spacing-xs)}.stat-item,.stat-label{font-size:.875rem;font-size:var(--font-size-sm)}.stat-label{color:#e8d5b7;color:var(--text-secondary)}.stat-value{font-size:.875rem;font-size:var(--font-size-sm);font-weight:600}.exp-bar{background:#ffffff1a;border-radius:3px;height:6px;margin-bottom:1.5rem;margin-bottom:var(--spacing-lg);overflow:hidden;width:100%}.exp-fill{background:linear-gradient(90deg,#daa520,gold);background:linear-gradient(90deg,var(--primary-gold),var(--secondary-gold));border-radius:3px;height:100%;transition:width .3s ease}.evolution-info{background:#daa5201a;border:1px solid #daa5204d;border-radius:12px;border-radius:var(--border-radius-md);margin-bottom:1.5rem;margin-bottom:var(--spacing-lg);padding:1rem;padding:var(--spacing-md)}.evolution-preview{color:#e8d5b7;color:var(--text-secondary);display:flex;flex-direction:column;font-size:.875rem;font-size:var(--font-size-sm);gap:.25rem;gap:var(--spacing-xs)}.evolution-preview span{align-items:center;display:flex;justify-content:space-between}.elemental-actions{display:flex;flex-direction:column;gap:.25rem;gap:var(--spacing-xs)}.action-btn{border:none;border-radius:12px;border-radius:var(--border-radius-md);cursor:pointer;font-size:.75rem;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.5px;padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase;transition:all .3s ease}.level-up-btn{background:linear-gradient(135deg,#10b981,#059669);background:linear-gradient(135deg,var(--success),#059669);color:#fff}.level-up-btn:hover{background:linear-gradient(135deg,#059669,#10b981);background:linear-gradient(135deg,#059669,var(--success));box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.evolve-btn{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));color:#0f1423fa;color:var(--dark-bg)}.evolve-btn:hover{background:linear-gradient(135deg,gold,#daa520);background:linear-gradient(135deg,var(--secondary-gold),var(--primary-gold));box-shadow:0 4px 12px #daa52066;transform:translateY(-1px)}.max-level-badge{background:linear-gradient(135deg,#3b82f6,#1d4ed8);background:linear-gradient(135deg,var(--info),#1d4ed8);border-radius:8px;border-radius:var(--border-radius-sm);color:#fff;font-size:.75rem;font-size:var(--font-size-xs);font-weight:700;letter-spacing:.5px;padding:4px 8px;position:absolute;right:1rem;right:var(--spacing-md);text-transform:uppercase;top:1rem;top:var(--spacing-md)}.empty-collection{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;background:var(--glass-bg);border-radius:16px;border-radius:var(--border-radius-lg);padding:3rem;padding:var(--spacing-2xl);text-align:center}.empty-icon{font-size:8rem;font-size:var(--icon-size-xl);margin-bottom:1.5rem;margin-bottom:var(--spacing-lg);opacity:.5}.empty-collection h3{color:beige;color:var(--text-primary);font-size:1.25rem;font-size:var(--font-size-xl);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.empty-collection p{color:#e8d5b7;color:var(--text-secondary);font-size:1rem;font-size:var(--font-size-base);margin:0 auto;max-width:400px}@media (max-width:768px){.collection-container{padding:0}.collection-header{margin:.8rem .8rem 1rem;padding:.8rem}.collection-filters{margin:0 .8rem 1rem;padding:.8rem}.collection-title h1{font-size:1.5rem;font-size:var(--font-size-2xl)}.collection-stats{flex-direction:column;gap:.5rem;gap:var(--spacing-sm)}.collection-filters{flex-direction:column;gap:1rem;gap:var(--spacing-md)}.elementals-grid{gap:.5rem;gap:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.elemental-card{padding:1rem;padding:var(--spacing-md)}.elemental-header{flex-direction:column;gap:.5rem;gap:var(--spacing-sm);text-align:center}.elemental-emoji{font-size:3rem;font-size:var(--icon-size-md)}.elemental-actions{flex-direction:column}.action-btn{width:100%}}@media (max-width:480px){.collection-container{padding:0}.collection-header{margin:.6rem .6rem .8rem;padding:.6rem}.collection-filters{margin:0 .6rem .8rem;padding:.6rem}.collection-title h1{font-size:1.25rem;font-size:var(--font-size-xl)}.elementals-grid{gap:.25rem;gap:var(--spacing-xs);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.elemental-card{min-height:240px;padding:.5rem;padding:var(--spacing-sm)}.elemental-stats{gap:.25rem;gap:var(--spacing-xs)}.stat-item{font-size:.75rem;font-size:var(--font-size-xs);padding:.25rem;padding:var(--spacing-xs)}.elemental-name{font-size:.875rem;font-size:var(--font-size-sm)}.elemental-emoji{font-size:2rem;font-size:var(--icon-size-sm)}}.evolution-info{padding:.5rem;padding:var(--spacing-sm)}.elemental-btn.on-cooldown{filter:brightness(.5);opacity:.6;position:relative}.cooldown-indicator{background:#ffffff0d;border-radius:8px;border-radius:var(--border-radius-sm);color:#fff;font-size:.75rem;font-size:var(--font-size-xs);font-weight:600;left:50%;padding:4px 8px;position:absolute;top:50%;transform:translate(-50%,-50%);white-space:nowrap;z-index:10}.cooldown-text{color:#ff6b6b}.cooldown-stat{background:#ff6b6b1a!important;border:1px solid #ff6b6b4d}.cooldown-value{color:#ff6b6b!important;font-weight:700}.collection-container-modern{background:#18182c;margin:0 auto;max-width:1400px;min-height:100vh;padding:2rem}.collection-header-modern{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:15px;display:flex;justify-content:space-between;margin-bottom:1rem;padding:.75rem}.collection-title-modern{align-items:center;display:flex;gap:.5rem}.title-icon{display:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));font-size:1.56rem;margin-top:.25rem}@media (max-width:768px){.title-icon{font-size:1.3rem}}@media (max-width:480px){.title-icon{font-size:1.04rem!important}}@media (max-width:400px){.title-icon{font-size:.78rem!important}}@media (max-width:360px){.title-icon{font-size:.52rem!important}}@media (min-width:769px){.title-icon{font-size:1.3rem}}.title-content h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.56rem;font-weight:700;margin:0}@media (max-width:768px){.title-content h1{font-size:1.3rem}}@media (max-width:480px){.title-content h1{font-size:1.04rem!important}}@media (max-width:400px){.title-content h1{font-size:.78rem!important}}@media (max-width:360px){.title-content h1{font-size:.52rem!important}}@media (min-width:769px){.title-content h1{font-size:1.3rem}}.collection-stats-modern,.stat-card{display:flex;gap:.5rem}.stat-card{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:.5rem .75rem;transition:all .3s ease}.stat-card.compact{gap:.25rem;padding:.3rem .5rem}.stat-card.compact .stat-icon,.stat-card.compact .stat-value{font-size:1rem}.stat-card.compact .stat-label{font-size:.6rem}.stat-card:hover{box-shadow:0 8px 25px #0003;transform:translateY(-2px)}.stat-card.epic{background:linear-gradient(135deg,#8b5cf633,#7c3aed33);border-color:#8b5cf64d}.stat-card.immortal{background:linear-gradient(135deg,#f59e0b33,#d9770633);border-color:#f59e0b4d}.stat-icon{font-size:1.2rem}.stat-content{text-align:center}.stat-value{font-size:1.2rem}.stat-label{font-size:.8rem;margin-top:.25rem}.collection-filters-modern{background:#18182c;border-radius:15px;display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem;padding:1rem}.filter-section{display:flex;flex-direction:column;gap:.5rem}.filter-label{color:#b8860b;color:var(--text-muted);font-size:.5rem;font-weight:600;letter-spacing:.5px;margin-bottom:.2rem;text-transform:uppercase}.filter-buttons{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-start}.filter-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:beige;color:var(--text-primary);cursor:pointer;font-size:.7rem;font-weight:500;padding:.4rem .8rem;transition:all .3s ease}.filter-btn:hover{background:#ffffff26;transform:translateY(-1px)}.filter-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;box-shadow:0 4px 15px #667eea66;color:#fff}.filter-btn.rarity-common.active{background:linear-gradient(135deg,#9ca3af,#6b7280)}.filter-btn.rarity-rare.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.filter-btn.rarity-epic.active{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.filter-btn.rarity-immortal.active{background:linear-gradient(135deg,#f59e0b,#d97706)}.elementals-grid-modern{grid-gap:1.5rem;align-items:start;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,274px);justify-content:center;margin-bottom:2rem;margin-left:auto;margin-right:auto;max-width:800px}.elemental-card-modern{background:#0000;border:none;cursor:pointer;display:flex;flex-direction:column;height:220px;padding:0;pointer-events:auto;position:relative;width:160px}.elemental-card-modern.on-cooldown{cursor:default;pointer-events:none}.elemental-battle-card{background:linear-gradient(145deg,#000c,#0006);border:2px solid #ffffff4d;border:2px solid var(--rarity-color,#ffffff4d);border-radius:16px;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.elemental-battle-image{object-fit:cover}.elemental-battle-image,.elemental-battle-placeholder{border-radius:16px;height:100%;left:0;position:absolute;top:0;width:100%}.elemental-battle-placeholder{align-items:center;background:linear-gradient(145deg,#ffffff1a,#0000004d);display:flex;font-size:4rem;justify-content:center}.elemental-battle-rarity{background:var(--rarity-color);border-radius:12px;bottom:8px;box-shadow:0 2px 8px #0000004d;color:#fff;font-size:.7rem;font-weight:700;left:50%;letter-spacing:.5px;padding:4px 12px;position:absolute;text-transform:uppercase;transform:translateX(-50%);z-index:2}.cooldown-overlay-modern{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border:1px solid #ffd700cc;border-radius:8px;box-shadow:0 4px 16px #ffd7004d;left:50%;min-width:120px;padding:6px 8px;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);z-index:10000}.cooldown-timer-modern{align-items:center;display:flex;gap:4px;justify-content:center}.cooldown-time-unit{align-items:center;display:flex;flex-direction:column;min-width:16px}.time-value{color:#ff6b6b;font-family:Courier New,monospace;font-size:.8rem;font-weight:900;letter-spacing:1px;line-height:1;text-shadow:0 0 8px #ff6b6bcc}.time-label{color:#fffc;font-size:.7rem;font-weight:600;margin-top:2px;text-shadow:0 1px 2px #000000e6}.cooldown-separator{animation:pulse 1s ease-in-out infinite;color:#ff6b6bcc;font-family:Courier New,monospace;font-size:.8rem;font-weight:900;margin:0 2px;text-shadow:0 0 8px #ff6b6bcc}.elemental-card-modern:hover{border-color:var(--rarity-color);box-shadow:0 20px 40px #0006;transform:translateY(-8px)}.elemental-header-modern{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.elemental-emoji-modern{animation:float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));font-size:2rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.elemental-info-modern{flex:1 1}.elemental-name-modern{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1rem;font-weight:700;margin:0 0 .25rem;max-width:100%;overflow:hidden;position:relative;white-space:nowrap}.elemental-name-modern[data-overflow=true]{animation:marquee 6s linear infinite}.elemental-name-modern[data-overflow=true]:hover{animation-play-state:paused}@keyframes marquee{0%{transform:translateX(0)}20%{transform:translateX(0)}80%{transform:translateX(calc(-100% + 120px))}to{transform:translateX(calc(-100% + 120px))}}.elemental-rarity-modern{color:var(--rarity-color);font-size:.9rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.elemental-level-modern{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 15px #667eea4d;color:#fff;display:none;font-size:.7rem;font-weight:700;padding:.3rem .6rem}.level-progress-modern{position:relative}.progress-bar-modern{background:#ffffff1a!important;border:2px solid #ffffff4d!important;border-radius:15px!important;box-sizing:border-box!important;height:49px!important;margin-bottom:.4rem!important;min-height:49px!important;overflow:hidden!important;position:relative!important;width:100%!important}.progress-fill-modern{border-radius:10px;position:relative}.level-text{color:#fff;font-size:.8rem;font-weight:700;left:50%;opacity:1;pointer-events:none;position:absolute;text-shadow:0 2px 4px #000000e6;top:50%;transform:translate(-50%,-50%);white-space:nowrap;z-index:10}.progress-text{font-size:.7rem;letter-spacing:.5px;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap}.level-indicator,.progress-text{color:#b8860b;color:var(--text-muted)}.level-indicator{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:1px solid #ffffff0d;border-radius:6px;font-size:.6rem;font-weight:500;opacity:.7;padding:.1rem .3rem;position:absolute;right:0;top:-.2rem}.level-indicator:before{content:"LVL ";font-weight:600}.elemental-stats-modern,.stat-row{margin-bottom:.75rem}.stat-row{display:flex;gap:.75rem}.stat-item-modern{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:flex;gap:.5rem;padding:.5rem}.stat-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:1rem}.stat-content{align-items:center;display:flex;flex:1 1;gap:.25rem}.stat-value{color:beige;color:var(--text-primary);font-size:.9rem;font-weight:700;line-height:1}.stat-label{color:#b8860b;color:var(--text-muted);font-size:.7rem;letter-spacing:.5px;text-transform:uppercase}.cooldown-indicator-modern{align-items:center;border-radius:8px;display:flex;gap:.5rem;margin-top:.5rem;padding:.5rem;transition:all .3s ease}.cooldown-indicator-modern.active{background:#ef44441a;border:1px solid #ef44444d}.cooldown-indicator-modern.inactive{background:#ffffff0d;border:1px solid #ffffff1a}.cooldown-icon{font-size:1rem;transition:color .3s ease}.cooldown-indicator-modern.active .cooldown-icon{color:#ef4444}.cooldown-indicator-modern.inactive .cooldown-icon{color:#b8860b;color:var(--text-muted)}.cooldown-text{font-size:.8rem;font-weight:600;transition:color .3s ease}.cooldown-indicator-modern.active .cooldown-text{color:#ef4444}.cooldown-indicator-modern.inactive .cooldown-text{color:#b8860b;color:var(--text-muted)}.level-progress-modern{margin-bottom:.75rem}.progress-bar-modern{background:#ffffff1a;border-radius:3px;height:6px;margin-bottom:.4rem;overflow:hidden;width:100%}.progress-fill-modern{background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:4px;box-shadow:0 0 10px #fbbf2480;height:100%;transition:width .3s ease}.progress-text{display:none}.elemental-actions-modern{margin-bottom:1rem}.action-btn-modern{align-items:center;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:.8rem;font-weight:600;gap:.4rem;justify-content:center;padding:.6rem .8rem;transition:all .3s ease;width:100%}.level-up-btn-modern{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 15px #10b9814d}.upgrade-btn-modern{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 15px #f59e0b4d}.max-level-btn-modern{animation:golden-shimmer 3s ease-in-out infinite;background:linear-gradient(135deg,#daa520,#b8860b,#daa520);background-size:200% 200%;border:1px solid #daa5204d;box-shadow:0 4px 15px #daa52066;cursor:default;opacity:1}.action-btn-modern:hover{transform:translateY(-2px)}.level-up-btn-modern:hover{box-shadow:0 8px 25px #10b98166}.upgrade-btn-modern:hover{box-shadow:0 8px 25px #f59e0b66}.max-level-btn-modern:hover{animation:golden-shimmer 2s ease-in-out infinite;box-shadow:0 6px 20px #daa52080;transform:none}.action-btn-modern:active{transform:translateY(0)}.level-up-btn-modern:active{box-shadow:0 4px 15px #10b9814d}.upgrade-btn-modern:active{box-shadow:0 4px 15px #f59e0b4d}.btn-icon{font-size:1.25rem}.btn-text{flex:1 1;text-align:center}.btn-cost{font-size:.9rem;opacity:.9}.empty-collection-modern{background:#18182c;border-radius:20px;padding:4rem 2rem;text-align:center}.empty-icon-modern{font-size:4rem;margin-bottom:1rem;opacity:.5}.empty-collection-modern h3{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.5rem;margin:0 0 1rem}.empty-collection-modern p{color:#b8860b;color:var(--text-muted);font-size:1rem;margin:0 0 2rem}.empty-actions{display:flex;gap:1rem;justify-content:center}.empty-action-btn{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;color:beige;color:var(--text-primary);cursor:pointer;font-size:.9rem;font-weight:500;padding:.75rem 1.5rem;transition:all .3s ease}.empty-action-btn:hover{background:#ffffff26;transform:translateY(-1px)}@media (max-width:768px){.collection-container-modern{padding:1rem}.collection-header-modern{flex-direction:column;gap:1rem;text-align:center}.collection-stats-modern{justify-content:center}.elementals-grid-modern{gap:.75rem;grid-template-columns:repeat(2,1fr);max-width:100%}.filter-buttons{justify-content:flex-start}}@media (max-width:480px){.collection-container-modern{padding:.5rem}.collection-header-modern{padding:1rem}.title-content h1{font-size:2rem}.title-icon{font-size:2.2rem;margin-top:1rem}.elementals-grid-modern{gap:.5rem;grid-template-columns:repeat(2,1fr);max-width:100%}.elemental-card-modern{min-height:200px;padding:.4rem}.elemental-emoji-modern{font-size:2rem}.elemental-name-modern{font-size:1rem}.elemental-name-modern[data-overflow=true]{animation-duration:8s}.elemental-level-modern{font-size:.7rem;padding:.3rem .6rem}.stat-item-modern{gap:.4rem;padding:.5rem}.stat-value{font-size:.9rem}.stat-label{font-size:.7rem}.action-btn-modern{font-size:.8rem;gap:.4rem;padding:.5rem .75rem}.btn-icon{font-size:1rem}.btn-cost{font-size:.8rem}.stat-row{flex-direction:column;gap:.5rem}.empty-actions{align-items:center;flex-direction:column}}@media (max-width:360px){.settings-container{gap:.75rem;margin:.25rem;padding:.5rem}.settings-header h2{font-size:1.25rem;font-size:var(--font-size-xl)}.music-volume-slider-wrapper{height:45px}.music-volume-label{padding:0 12px}.music-icon{font-size:1.2rem}.music-text{font-size:.9rem}.music-percentage{font-size:1rem;min-width:40px}.music-volume-slider::-webkit-slider-thumb{height:18px;width:18px}.music-volume-slider::-moz-range-thumb{height:18px;width:18px}.title-icon{font-size:2.5rem;margin-top:1.25rem}.elementals-grid-modern{gap:.4rem;grid-template-columns:repeat(2,1fr)}.elemental-card-modern{min-height:200px;padding:.4rem}.elemental-header-modern{gap:.5rem;margin-bottom:.75rem}.elemental-emoji-modern{font-size:1.75rem}.elemental-name-modern{font-size:.9rem}.elemental-name-modern[data-overflow=true]{animation-duration:10s}.elemental-level-modern{font-size:.65rem;padding:.25rem .5rem}.stat-item-modern{gap:.3rem;padding:.4rem}.stat-value{font-size:.8rem}.stat-label{font-size:.65rem}.action-btn-modern{font-size:.75rem;gap:.3rem;padding:.4rem .6rem}.btn-icon{font-size:.9rem}.btn-cost{font-size:.75rem}.level-progress-modern{margin-bottom:.75rem}.progress-bar-modern{height:6px}.battle-section{margin:.25rem;margin:var(--spacing-xs);padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md)}.battle-icon{filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));font-size:6rem!important;margin-bottom:.5rem;margin-bottom:var(--spacing-sm);margin-top:1rem;margin-top:var(--spacing-md)}.battle-display{gap:1rem;gap:var(--spacing-md);margin:1rem 0;margin:var(--spacing-md) 0;padding:1rem;padding:var(--spacing-md)}.battle-choice{gap:.5rem;gap:var(--spacing-sm);min-width:80px;padding:.5rem;padding:var(--spacing-sm)}.battle-emoji{font-size:3rem!important;height:3.5rem!important;width:3.5rem!important}.battle-vs{font-size:1.25rem}.battle-player-name{font-size:.7rem}.element-grid,.elemental-grid,.location-grid{gap:.5rem;gap:var(--spacing-sm);margin:.5rem 0;margin:var(--spacing-sm) 0}.element-btn,.elemental-btn{height:95px;padding:.5rem;padding:var(--spacing-sm)}.location-btn{height:85px;padding:.5rem;padding:var(--spacing-sm)}.element-emoji,.elemental-emoji{font-size:2rem!important}.element-emoji,.elemental-emoji,.location-emoji{margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.location-emoji{font-size:1.8rem!important}.nav-icon{font-size:1.1rem}.nav-label{font-size:.55rem}.nav-item{min-width:45px;padding:.3rem}.profile-container{gap:.6rem;padding:.4rem}.profile-hero{padding:.8rem .6rem .6rem}.avatar-circle{height:50px;width:50px}.avatar-emoji{font-size:1.25rem}.player-name-modern{font-size:1.1rem}.stats-grid-modern{gap:.4rem}.stat-card-modern{min-height:70px;padding:.6rem}.stat-value-modern{font-size:1.1rem}.stat-label-modern{font-size:.6rem}.collection-container-modern{padding:.25rem}.stat-card{gap:.4rem;padding:.4rem .8rem}.stat-icon,.stat-value{font-size:1rem}.stat-value{margin-bottom:.02rem}.stat-label{font-size:.6rem;margin-top:.02rem}.collection-stats-modern{gap:.4rem}.rarity-stats-container{gap:.4rem;margin-bottom:.6rem}.total-count-card{padding:.5rem .7rem}.total-count-icon{font-size:1.1rem}.total-count-label{font-size:.7rem}.total-count-value{font-size:1.1rem}.rarity-list{gap:.3rem}.rarity-item{padding:.4rem .6rem}.rarity-info{gap:.4rem}.rarity-icon{font-size:.9rem}.rarity-name{font-size:.7rem}.rarity-count{gap:.25rem}.rarity-number{font-size:.9rem}.rarity-percentage{font-size:.6rem;padding:.1rem .25rem}.rarity-stats-container{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.total-count-card{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#daa52033,#ffd7001a);border:1px solid #daa5204d;border-radius:12px;display:flex;justify-content:space-between;padding:.75rem 1rem}.total-count-icon{color:gold;color:var(--secondary-gold);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:1.5rem}.total-count-content{align-items:center;display:flex;gap:.5rem}.total-count-label{color:#e8d5b7;color:var(--text-secondary);font-size:.9rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.total-count-value{color:gold;color:var(--secondary-gold);font-size:1.5rem;font-weight:700;text-shadow:0 2px 4px #00000080}.rarity-list{display:flex;flex-direction:column;gap:.5rem}.rarity-item{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;display:flex;justify-content:space-between;padding:.6rem .8rem;transition:all .3s ease}.rarity-item:hover{background:#ffffff14;transform:translateX(4px)}.rarity-item.common{border-left:3px solid #9ca3af}.rarity-item.rare{border-left:3px solid #3b82f6}.rarity-item.epic{border-left:3px solid #8b5cf6}.rarity-item.immortal{border-left:3px solid #f59e0b}.rarity-info{align-items:center;display:flex;gap:.6rem}.rarity-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));font-size:1.2rem}.rarity-name{color:beige;color:var(--text-primary);font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.rarity-count{align-items:center;display:flex;gap:.4rem}.rarity-number{color:beige;color:var(--text-primary);font-size:1.1rem;font-weight:700}.rarity-percentage{background:#ffffff1a;border-radius:6px;color:#b8860b;color:var(--text-muted);font-size:.7rem;padding:.2rem .4rem}.collection-header-modern{margin-bottom:.8rem;padding:.6rem}.title-content h1{font-size:1.1rem}.title-icon{font-size:1.5rem;margin-top:.6rem}.elementals-grid-modern{gap:.3rem}.elemental-card-modern{min-height:160px;padding:.25rem}.elemental-emoji-modern{font-size:1.25rem}.elemental-name-modern{font-size:.7rem}.elemental-level-modern{font-size:.55rem;padding:.15rem .3rem}.progress-bar-modern{height:29px!important;margin-bottom:.25rem!important;min-height:29px!important}.level-text{font-size:.55rem}.progress-text{display:none}.level-indicator{font-size:.5rem;padding:.06rem .2rem;top:-.1rem}.level-indicator:before{content:"LVL ";font-weight:600}.stat-item-modern{gap:.15rem;padding:.25rem}.stat-value{font-size:.65rem}.action-btn-modern{font-size:.65rem;gap:.15rem;padding:.3rem .5rem}.btn-icon{font-size:.7rem}.btn-cost{font-size:.65rem}.collectible-card{height:100%;min-height:320px}.artwork-image{border-radius:6px;height:90%;width:90%}.artwork-emoji{font-size:3rem}.name-text{font-size:.8rem}.card-stats{gap:-2px}.card-bottom{padding:4px}.rarity-indicators{gap:2px;margin-bottom:3px}.stat-row{margin:-8px 0;padding:-8px 0}.rarity-star,.stat-row{font-size:.7rem}.collectible-cards-grid{gap:.2rem;margin:0 .2rem;padding:.2rem}.collection-header{margin:.4rem .4rem .6rem;padding:.4rem}.collection-filters{margin:0 .4rem .6rem;padding:.4rem}.collectible-card{height:340px;width:240px}.artwork-image{border-radius:4px;height:85%;width:85%}.artwork-emoji{font-size:2.5rem}.name-text{font-size:.75rem}.card-stats{gap:-12px}.card-bottom{padding:3px}.rarity-indicators{gap:1px;margin-bottom:2px}.stat-row{font-size:.6rem;line-height:.5;margin:-6px 0;padding:-6px 0}.rarity-star,.stat-row{font-size:.65rem}.rules-container{gap:.6rem;padding:.4rem}.rules-card{border-radius:10px;padding:.6rem}.rules-card-header{gap:.4rem;margin-bottom:.6rem}.rules-card-icon{font-size:1.1rem}.rules-card-title{font-size:.9rem}.rules-steps-grid{gap:.4rem}.rules-step-card{padding:.6rem}.step-icon{font-size:1.25rem;margin-bottom:.3rem}.step-title{font-size:.7rem}.step-description{font-size:.6rem}.element-relationships{gap:.4rem}.element-card{padding:.6rem}.element-emoji{font-size:1.5rem;margin-bottom:.3rem}.element-name{font-size:.8rem}.location-card{padding:.6rem}.location-icon{font-size:1.25rem}.location-name{font-size:.8rem}.elemental-card{padding:.6rem}.elemental-icon{font-size:1.25rem;margin-bottom:.3rem}.progression-card{padding:.6rem}.progression-icon{font-size:1.25rem}.progression-title{font-size:.8rem}.progression-description{font-size:.6rem}.modal{margin:.25rem;max-width:calc(100vw - .5rem);padding:.8rem}.modal-title{font-size:.9rem;margin-bottom:.6rem}.settings-menu{border-radius:16px;max-height:95vh;width:98%}.settings-content{padding:.8rem;scrollbar-width:thin}.settings-content::-webkit-scrollbar{width:6px}.setting-group{border-radius:12px;margin-bottom:.6rem;padding:.6rem}.setting-header{margin-bottom:.8rem;padding-bottom:.8rem}.setting-icon{font-size:1.4rem;margin-right:.6rem}.setting-label{font-size:.85rem}.setting-description{font-size:.65rem}.reset-cache-button,.rules-button{border-radius:10px;font-size:.8rem;padding:.6rem}.reset-icon,.rules-icon{font-size:1rem}.settings-header{border-radius:15px 15px 0 0;padding:.4rem .8rem}.settings-header h2{font-size:.9rem}.close-button{font-size:.7rem;height:20px;width:20px}.close-rules-button{font-size:16px;font-size:14px;height:32px;height:28px;width:32px;width:28px}.rules-container{padding-top:3.6rem}.rules-page-header{padding:.8rem 1rem}.rules-page-title{font-size:1.4rem}.rules-page::-webkit-scrollbar{width:6px}.rules-page-header{padding:.6rem .8rem}.rules-page-title{font-size:1.2rem}.rules-page::-webkit-scrollbar,.rules-scroll-container::-webkit-scrollbar{width:5px}.cycle-ring{gap:1rem}.element-node{min-width:100px;padding:.8rem}.element-node .element-emoji{font-size:1.5rem}.element-node .element-name{font-size:.9rem}.element-node .element-power{font-size:.7rem}.arenas-grid{grid-template-columns:1fr}.arena-card{padding:.8rem}.arena-icon{font-size:1.5rem}.arena-stats{flex-direction:column;gap:.3rem}.elementals-grid{gap:.4rem;grid-template-columns:1fr}.rules-elemental-card{padding:.4rem}.rules-elemental-card .elemental-name{font-size:.85rem}.rules-elemental-card .protection-value{font-size:.7rem}.slider-container{gap:.8rem}.volume-slider{height:6px}.volume-slider::-webkit-slider-thumb{height:16px;width:16px}.volume-value{font-size:.9rem;min-width:50px;padding:.4rem .6rem;width:50px}.card{border-radius:10px;padding:.8rem}.card-title{font-size:1.1rem;margin-bottom:.6rem}.profile-card{border-radius:12px;padding:.8rem}.profile-header{gap:.6rem;margin-bottom:.8rem}.avatar-ring{height:40px;width:40px}.avatar-inner{font-size:1.2rem}.player-name{font-size:.9rem}.player-title{font-size:.7rem}.enhanced-stats-grid{gap:.4rem}.stat-card{padding:.6rem}.stat-icon{font-size:1.5rem}.stat-value{font-size:1.1rem}.stat-label{font-size:.55rem}.achievement-item{gap:.4rem;padding:.4rem}.achievement-icon{font-size:.8rem;height:20px;width:20px}.achievement-name{font-size:.65rem}.achievement-desc{font-size:.6rem}.btn-primary{font-size:.8rem;padding:.6rem 1.2rem}.nav-container{padding:0 .4rem}}@keyframes golden-shimmer{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.game-overview{display:flex;flex-direction:column;gap:1rem}.overview-item{align-items:flex-start;background:#0003;border-left:3px solid #daa520;border-left:3px solid var(--primary-gold);border-radius:12px;display:flex;gap:.8rem;padding:.8rem}.overview-label{color:gold;color:var(--secondary-gold);font-size:.9rem;font-weight:600;min-width:80px}.overview-value{color:#e8d5b7;color:var(--text-secondary);font-size:.9rem;line-height:1.4}.element-cycle-display{align-items:center;display:flex;flex-direction:column;gap:1.5rem}.cycle-ring{flex-wrap:wrap;gap:2rem;justify-content:center}.cycle-ring,.element-node{align-items:center;display:flex}.element-node{background:#0000004d;border:2px solid #daa5204d;border-radius:16px;flex-direction:column;gap:.5rem;min-width:120px;padding:1rem;transition:all .3s ease}.element-node:hover{border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 8px 25px #daa5204d;transform:translateY(-4px)}.element-node .element-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2rem}.element-node .element-name{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1rem;font-weight:600;text-align:center}.element-node .element-power{color:#e8d5b7;color:var(--text-secondary);font-size:.8rem;font-weight:500;text-align:center}.cycle-info{text-align:center}.cycle-badge{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold));border-radius:20px;color:#0f1423fa;color:var(--dark-bg);display:inline-block;font-size:.9rem;font-weight:600;margin-bottom:.5rem;padding:.5rem 1rem}.cycle-description{color:#e8d5b7;color:var(--text-secondary);font-size:.9rem;line-height:1.4}.arenas-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:1.5rem}.arena-card{align-items:center;background:#0000004d;border:2px solid #daa52033;border-radius:16px;display:flex;gap:1rem;padding:1rem;transition:all .3s ease}.arena-card:hover{border-color:#daa52080;box-shadow:0 8px 25px #daa52033;transform:translateY(-2px)}.arena-card.beginner{border-left:4px solid #4ade80}.arena-card.intermediate{border-left:4px solid #fbbf24}.arena-card.expert{border-left:4px solid #ef4444}.arena-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));font-size:2rem}.arena-info{flex:1 1}.arena-name{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;margin:0 0 .5rem}.arena-stats{display:flex;gap:1rem;margin-bottom:.5rem}.mana-wager,.risk-level{background:#0000004d;border-radius:8px;color:#e8d5b7;color:var(--text-secondary);font-size:.8rem;padding:.2rem .5rem}.economy-rules{background:#0003;border-radius:12px;padding:1rem}.economy-header{align-items:center;display:flex;gap:.5rem;margin-bottom:1rem}.economy-icon{font-size:1.2rem}.economy-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1.1rem;font-weight:600;margin:0}.economy-rules-grid{display:flex;flex-direction:column;gap:.5rem}.economy-rule{align-items:center;background:#0003;border-radius:8px;display:flex;gap:.5rem;padding:.5rem}.rule-icon{font-size:1rem}.rule-text{color:#e8d5b7;color:var(--text-secondary);font-size:.9rem}.elementals-grid{grid-gap:.6rem;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:1rem}.rules-elemental-card{align-items:center;background:#0000004d;border:2px solid #daa52033;border-radius:10px;display:flex;justify-content:center;padding:.6rem;transition:all .3s ease}.rules-elemental-card:hover{border-color:#daa52080;box-shadow:0 8px 25px #daa52033;transform:translateY(-2px)}.rules-elemental-card.common{border-left:4px solid #6b7280}.rules-elemental-card.rare{border-left:4px solid #3b82f6}.rules-elemental-card.epic{border-left:4px solid #8b5cf6}.rules-elemental-card.immortal{border-left:4px solid #f59e0b}.rules-elemental-card .elemental-info{text-align:center}.rules-elemental-card .elemental-name{font-family:Volkhov,serif;font-size:.9rem;font-weight:600;margin:0 0 .1rem}.rules-elemental-card.common .elemental-name{color:#6b7280}.rules-elemental-card.rare .elemental-name{color:#3b82f6}.rules-elemental-card.epic .elemental-name{color:#8b5cf6}.rules-elemental-card.immortal .elemental-name{color:#f59e0b}.rules-elemental-card .protection-value{font-size:.75rem;font-weight:500;margin:0}.rules-elemental-card.common .protection-value{color:#6b7280}.rules-elemental-card.rare .protection-value{color:#3b82f6}.rules-elemental-card.epic .protection-value{color:#8b5cf6}.rules-elemental-card.immortal .protection-value{color:#f59e0b}.protection-mechanics{background:#0003;border-radius:10px;padding:.6rem}.mechanics-header{align-items:center;display:flex;gap:.5rem;margin-bottom:.6rem}.mechanics-icon{font-size:1rem}.mechanics-title{color:gold;color:var(--secondary-gold);font-family:Volkhov,serif;font-size:1rem;font-weight:600;margin:0}.mechanics-example{display:flex;flex-direction:column;gap:.3rem}.example-scenario{align-items:center;background:#0003;border-radius:6px;display:flex;gap:.5rem;padding:.4rem}.scenario-label{color:gold;color:var(--secondary-gold);font-size:.8rem;font-weight:600;min-width:60px}.scenario-text{color:#e8d5b7;color:var(--text-secondary);font-size:.85rem}.profile-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid #ffffff1a;border-radius:12px;border-radius:var(--border-radius-md);box-shadow:0 4px 6px #0000001a;justify-content:space-between;margin:.5rem 1rem;padding:.75rem 1rem}.profile-header,.profile-info{align-items:center;display:flex}.profile-info{gap:.75rem}.profile-avatar{align-items:center;background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold) 0,var(--secondary-gold) 100%);border-radius:50%;box-shadow:0 2px 4px #0003;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.profile-avatar-emoji{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:1.25rem}.profile-details{display:flex;flex-direction:column;gap:.25rem}.profile-name{color:beige;color:var(--text-primary);font-family:Volkhov,serif;font-size:1.125rem;font-size:var(--font-size-lg);font-weight:600;line-height:1.2}.profile-level{color:#e8d5b7;color:var(--text-secondary);font-size:.875rem;font-size:var(--font-size-sm);font-weight:500}.mana-info{align-items:center;background:linear-gradient(135deg,#3b82f633,#3b82f61a);border:1px solid #3b82f64d;border-radius:8px;border-radius:var(--border-radius-sm);display:flex;flex-direction:column;gap:.25rem;min-width:4rem;padding:.5rem .75rem}.mana-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:1.25rem}.mana-amount{color:#3b82f6;color:var(--info);font-family:Volkhov,serif;font-size:1.125rem;font-size:var(--font-size-lg);font-weight:700;line-height:1}.mana-label{color:#e8d5b7;color:var(--text-secondary);font-size:.75rem;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.5px;text-transform:uppercase}.profile-header-compact{align-items:center;color:beige;color:var(--text-primary);display:flex;font-size:.875rem;font-size:var(--font-size-sm);gap:.75rem;margin:.25rem 1rem;padding:.5rem 1rem}.profile-avatar-compact{font-size:1rem;opacity:.8}.profile-name-compact{color:beige;color:var(--text-primary);flex:1 1;font-family:Volkhov,serif;font-weight:600}.profile-level-compact{color:#e8d5b7;color:var(--text-secondary);font-size:.75rem;font-size:var(--font-size-xs);font-weight:500}.mana-compact{color:#3b82f6;color:var(--info);font-weight:600;white-space:nowrap}@media (max-width:480px){.profile-header{margin:.25rem .5rem;padding:.5rem .75rem}.profile-avatar{height:2rem;width:2rem}.profile-avatar-emoji,.profile-name{font-size:1rem}.profile-name{font-size:var(--font-size-base)}.profile-level{font-size:.75rem;font-size:var(--font-size-xs)}.mana-info{min-width:3rem;padding:.375rem .5rem}.mana-amount,.mana-icon{font-size:1rem}.mana-amount{font-size:var(--font-size-base)}.mana-label{font-size:.5rem}.profile-header-compact{font-size:.75rem;font-size:var(--font-size-xs);gap:.5rem;margin:.25rem .5rem;padding:.375rem .75rem}.profile-avatar-compact{font-size:.875rem}.profile-name-compact{font-size:.75rem;font-size:var(--font-size-xs)}.profile-level-compact{font-size:.5rem}.mana-compact{font-size:.75rem;font-size:var(--font-size-xs)}}@media (max-width:420px){.profile-header{margin:.25rem .375rem;padding:.375rem .5rem}.profile-info{gap:.5rem}.profile-avatar{height:1.75rem;width:1.75rem}.profile-avatar-emoji{font-size:.875rem}.mana-info{min-width:2.5rem;padding:.25rem .375rem}.mana-amount,.mana-icon{font-size:.875rem}.mana-amount{font-size:var(--font-size-sm)}.mana-label{font-size:.375rem}.profile-header-compact{font-size:.5rem;gap:.375rem;margin:.25rem .375rem;padding:.25rem .5rem}.profile-avatar-compact{font-size:.75rem}.profile-name-compact{font-size:.5rem}.profile-level-compact{font-size:.375rem}.mana-compact{font-size:.5rem}}.tutorial-backdrop-step{background-color:#0006;bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:10000}.tutorial-active *{pointer-events:none}.tutorial-active .tutorial-target{position:relative}.tutorial-active .element-btn.focused,.tutorial-active .tutorial-target{pointer-events:auto!important;z-index:10002}.tutorial-active .tutorial-target *{pointer-events:auto!important}.tutorial-active .element-grid .tutorial-target{pointer-events:auto!important;z-index:10002}.tutorial-active .element-grid .tutorial-target *{pointer-events:auto!important}.tutorial-active .element-btn.tutorial-target{cursor:pointer!important;pointer-events:auto!important;z-index:10002}.tutorial-active .element-btn.tutorial-target:hover{pointer-events:auto!important}.tutorial-active .elemental-btn.tutorial-target{cursor:pointer!important;pointer-events:auto!important;z-index:10002}.tutorial-active .elemental-btn.tutorial-target *,.tutorial-active .elemental-btn.tutorial-target:hover,.tutorial-active .tutorial-step-tooltip,.tutorial-active .tutorial-step-tooltip *{pointer-events:auto!important}.tutorial-active .elemental-btn.tutorial-target.on-cooldown{cursor:pointer!important;filter:none!important;opacity:1!important}.tutorial-active .elemental-btn.tutorial-target .cooldown-indicator{display:none!important}.tutorial-highlight-ring{animation:tutorialPulse 2s ease-in-out infinite;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid gold;border:3px solid var(--secondary-gold);box-shadow:0 0 0 4px #daa5204d,0 0 20px #daa52099,inset 0 0 20px #daa52033;box-sizing:border-box;transform-origin:center}@media (max-width:768px){.tutorial-highlight-ring{border-width:2px;box-shadow:0 0 0 3px #daa5204d,0 0 15px #daa52099,inset 0 0 15px #daa52033}}@media (max-width:480px){.tutorial-highlight-ring{border-width:2px;box-shadow:0 0 0 2px #daa5204d,0 0 10px #daa52099,inset 0 0 10px #daa52033}}@keyframes tutorialPulse{0%,to{box-shadow:0 0 0 4px #daa5204d,0 0 20px #daa52099,inset 0 0 20px #daa52033;transform:scale(1)}50%{box-shadow:0 0 0 6px #daa52080,0 0 30px #daa520cc,inset 0 0 30px #daa5204d;transform:scale(1.02)}}.tutorial-step-tooltip{animation:tutorialStepSlideIn .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#14141efa,#282832fa);border:2px solid gold;border:2px solid var(--secondary-gold);border-radius:12px;box-shadow:0 15px 40px #000000b3;color:#fff;font-family:Orbitron,sans-serif;max-width:90vw;pointer-events:auto;width:280px;z-index:10002}@keyframes tutorialStepSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.tutorial-step-header{align-items:center;border-bottom:1px solid #daa5204d;display:flex;justify-content:space-between;padding:16px 20px 12px}.tutorial-step-title{color:gold;color:var(--secondary-gold);font-size:18px;font-weight:600;margin:0;text-shadow:0 0 10px #daa52080}.tutorial-step-close{background:none;border:none;border-radius:4px;color:#ffffffb3;cursor:pointer;font-size:20px;padding:4px;transition:all .2s ease}.tutorial-step-close:hover{background-color:#ffffff1a;color:#fff}.tutorial-step-content{padding:16px 20px}.tutorial-step-content p{color:#ffffffe6;font-size:14px;line-height:1.5;margin:0}.tutorial-step-footer{border-top:1px solid #daa5204d;padding:12px 20px 16px}.tutorial-step-progress{margin-bottom:12px}.tutorial-step-counter{color:gold;color:var(--secondary-gold);font-size:12px;font-weight:500}.tutorial-step-progress-bar{background-color:#fff3;border-radius:2px;height:4px;margin-top:4px;overflow:hidden;width:100%}.tutorial-step-progress-fill{background:linear-gradient(90deg,gold,#daa520);background:linear-gradient(90deg,var(--secondary-gold),var(--primary-gold));border-radius:2px;height:100%;transition:width .3s ease}.tutorial-step-actions{align-items:center;display:flex;gap:8px;justify-content:space-between}.tutorial-step-btn{background:linear-gradient(135deg,#daa5201a,#daa52033);border:1px solid gold;border:1px solid var(--secondary-gold);border-radius:6px;color:gold;color:var(--secondary-gold);cursor:pointer;font-family:Orbitron,sans-serif;font-size:13px;font-weight:500;padding:8px 16px;transition:all .2s ease}.tutorial-step-btn:hover{background:linear-gradient(135deg,#daa52033,#daa5204d);box-shadow:0 4px 12px #daa5204d;transform:translateY(-1px)}.tutorial-step-back{font-size:12px}.tutorial-step-next{background:linear-gradient(135deg,gold,#daa520);background:linear-gradient(135deg,var(--secondary-gold),var(--primary-gold));color:#000;font-weight:600}.tutorial-step-next:hover{background:linear-gradient(135deg,#daa520,gold);background:linear-gradient(135deg,var(--primary-gold),var(--secondary-gold))}.tutorial-step-instruction{color:#fffc;flex:1 1;font-size:12px;font-style:italic;text-align:center}@media (max-width:768px){.tutorial-step-tooltip{max-width:90vw;width:280px}.tutorial-step-title{font-size:16px}.tutorial-step-content p{font-size:13px}.tutorial-step-btn{font-size:12px;padding:6px 12px}}.back-btn{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:linear-gradient(135deg,#ffffff14,#ffffff08);border:2px solid #daa5204d;border-radius:16px;box-shadow:0 4px 16px #0003,inset 0 1px 0 #ffffff1a;color:beige;color:var(--text-primary);cursor:pointer;display:inline-flex;font-family:Inter,sans-serif;font-size:.875rem;font-size:var(--font-size-sm);font-weight:600;gap:.75rem;overflow:hidden;padding:.875rem 2.5rem;position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap}.back-btn:before{background:linear-gradient(90deg,#0000,#daa5201a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.back-btn:hover:before{left:100%}.back-btn:hover{background:linear-gradient(135deg,#daa52026,#ffd70014);border-color:#daa520;border-color:var(--primary-gold);box-shadow:0 8px 24px #daa52033,0 4px 16px #0000004d,inset 0 1px 0 #fff3;color:gold;color:var(--secondary-gold)}.back-btn:active{transform:translateY(0);transition:transform .1s ease}.back-btn-icon{font-size:1.5rem;transition:transform .3s ease}.back-btn:hover .back-btn-icon{transform:translateX(-2px)}.back-btn-text{font-weight:600;letter-spacing:.5px}@media (max-width:480px){.back-btn{font-size:.875rem;font-size:var(--font-size-sm);gap:.5rem;padding:.75rem 2rem}.back-btn-icon{font-size:1.25rem}}@media (max-width:420px){.back-btn{border-radius:12px;font-size:.75rem;font-size:var(--font-size-xs);padding:.625rem 1.5rem}}.back-btn:focus-visible{outline:2px solid gold;outline:2px solid var(--secondary-gold);outline-offset:2px}.back-btn-compact{border-radius:12px;font-size:.875rem;font-size:var(--font-size-sm);gap:.5rem;padding:.5rem 1rem}.back-btn-minimal{background:#ffffff0d;border:1px solid #ffffff1a;padding:.625rem 1.125rem}.back-btn-minimal:hover{background:#daa5201a;border-color:#daa52066}.no-elemental-card{align-items:center;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);background:linear-gradient(145deg,#ffffff14,#ffffff08);border:2px dashed #ffffff4d;border-radius:16px;color:#e8d5b7;color:var(--text-secondary);cursor:pointer;display:flex;flex-direction:column;height:220px;justify-content:center;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:160px}.no-elemental-card:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.no-elemental-card:hover:before{left:100%}.no-elemental-card:hover{background:linear-gradient(145deg,#ffffff1f,#ffffff0f);border-color:#ffffff80;box-shadow:0 8px 24px #0003;color:beige;color:var(--text-primary)}.no-elemental-card.selected{background:linear-gradient(145deg,#daa52026,#ffd70014);border-color:gold;border-color:var(--secondary-gold);box-shadow:0 0 20px #daa5204d;color:gold;color:var(--secondary-gold)}.no-elemental-icon{font-size:2.5rem;margin-bottom:.5rem;opacity:.7;transition:all .3s ease}.no-elemental-card:hover .no-elemental-icon{opacity:1;transform:scale(1.1)}.no-elemental-text{font-size:.875rem;font-size:var(--font-size-sm);font-weight:600;line-height:1.3;text-align:center}.no-elemental-subtext{font-size:.75rem;font-size:var(--font-size-xs);margin-top:.25rem;opacity:.8;text-align:center}@media (max-width:480px){.no-elemental-card{height:180px;width:140px}.no-elemental-icon{font-size:2rem;margin-bottom:.25rem}.no-elemental-text{font-size:.75rem;font-size:var(--font-size-xs)}.no-elemental-subtext{font-size:.625rem}}@media (max-width:420px){.no-elemental-card{height:160px;width:120px}.no-elemental-icon{font-size:1.75rem}}
/*# sourceMappingURL=main.c53d99cf.css.map*/