@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap";:root{--color-bg-primary:#f5f5f5;--color-bg-panel:#fff;--color-bg-card:#fff;--color-bg-input:#fff;--color-bg-sidebar:#fff;--color-bg-forest:#1a1a2e;--color-bg-mountain:#252545;--color-bg-overlay:#1a1a2e99;--color-primary:#3a7bd5;--color-primary-hover:#2f6abf;--color-primary-light:#3a7bd51a;--color-primary-subtle:#3a7bd52e;--color-cta:#f0477a;--color-cta-hover:#d93d6b;--color-cta-light:#f0477a1a;--color-secondary:#f0954a;--color-secondary-hover:#e8843a;--color-secondary-light:#f0954a1a;--color-accent-corail:#e05c5c;--color-accent-corail-light:#e05c5c1a;--color-accent-soleil:#f5c842;--color-accent-soleil-light:#f5c8421f;--color-accent-mandarine:#f0954a;--color-accent-mandarine-light:#f0954a1a;--color-accent-crystal:#5b9bd5;--color-accent-crystal-light:#5b9bd51a;--color-accent-river:#4caf7d;--color-accent-river-light:#4caf7d1a;--color-accent-gold:#f5c842;--color-accent-gold-bright:#f5c842;--color-accent-gold-light:#f5c8421f;--color-accent-sunset:#f0954a;--color-accent-sunset-light:#f0954a1a;--color-accent-ember:#e05c5c;--color-accent-meadow:#4caf7d;--color-accent-meadow-light:#4caf7d1a;--color-accent-silver:#9ca3af;--color-accent-bronze:#cd7f32;--color-accent-framboise:#f0477a;--color-accent-framboise-light:#f0477a1a;--color-accent-nuit:#1a1a2e;--color-accent-nuit-light:#1a1a2e0f;--color-accent-saphir:#3a7bd5;--color-accent-saphir-light:#3a7bd51a;--color-accent-menthe:#4caf7d;--color-accent-menthe-light:#4caf7d1a;--color-accent-ciel:#5b9bd5;--color-accent-ciel-light:#5b9bd51a;--color-text-primary:#1a1a2e;--color-text-secondary:#4a4a6a;--color-text-muted:#8a8aa0;--color-text-gold:#f5c842;--color-text-on-forest:#fff;--color-text-on-dark:#f5f5f5;--color-success:#4caf7d;--color-success-light:#4caf7d14;--color-danger:#e05c5c;--color-danger-light:#e05c5c14;--color-warning:#f0954a;--color-warning-light:#f0954a14;--color-info:#5b9bd5;--color-info-light:#5b9bd514;--color-border:#e8e8ec;--color-border-light:#f0f0f4;--color-border-nature:#c8e0d4;--color-border-focus:#3a7bd5;--color-move-highlight:#3a7bd540;--color-spell-range:#5b9bd540;--color-enemy-target:#e05c5c40;--color-ally-target:#4caf7d40;--color-active-unit:#f5c842;--color-online:#4caf7d;--color-offline:#8a8aa0;--color-in-game:#f0954a;--color-rank-bronze:#cd7f32;--color-rank-silver:#9ca3af;--color-rank-gold:#f5c842;--color-rank-diamond:#5b9bd5;--color-rank-crystal:#3a7bd5;--font-family-heading:"Fredoka One", cursive;--font-family-body:"Nunito", system-ui, sans-serif;--font-family-mono:"JetBrains Mono", "Fira Code", monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.5rem;--font-size-xl:2rem;--font-size-xxl:2.5rem;--font-size-3xl:3.5rem;--font-weight-normal:400;--font-weight-medium:600;--font-weight-semibold:700;--font-weight-bold:800;--line-height-tight:1.15;--line-height-normal:1.5;--line-height-relaxed:1.75;--space-2xs:2px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-xs:0 1px 3px #1a1a2e0a;--shadow-sm:0 2px 8px #1a1a2e0f;--shadow-md:0 4px 16px #1a1a2e14;--shadow-lg:0 8px 30px #1a1a2e1a;--shadow-xl:0 16px 48px #1a1a2e24;--shadow-inner:inset 0 2px 4px #1a1a2e0a;--shadow-glow-gold:0 0 20px #f5c8424d;--shadow-glow-nature:0 0 20px #4caf7d40;--shadow-glow-crystal:0 0 20px #5b9bd540;--shadow-glow-river:0 0 20px #4caf7d40;--shadow-glow-corail:0 0 20px #e05c5c4d;--shadow-glow-framboise:0 0 20px #f0477a4d;--shadow-glow-saphir:0 0 20px #3a7bd54d;--shadow-glow-soleil:0 0 20px #f5c8424d;--shadow-glow-ciel:0 0 20px #5b9bd54d;--shadow-glow-menthe:0 0 20px #4caf7d4d;--shadow-glow-mandarine:0 0 20px #f0954a59;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s ease-in-out;--transition-bounce:.4s cubic-bezier(.34, 1.56, .64, 1);--sidebar-width:240px;--sidebar-collapsed-width:72px;--header-height:64px;--content-max-width:960px;--gradient-banner:linear-gradient(135deg, #1a1a2e 0%, #252545 100%);--gradient-banner-alt:linear-gradient(135deg, #3a7bd5 0%, #5b9bd5 100%);--gradient-warm:linear-gradient(135deg, #f0954a, #f0477a);--gradient-fresh:linear-gradient(135deg, #4caf7d, #5b9bd5);--gradient-sunset:linear-gradient(135deg, #f5c842, #f0954a)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);line-height:var(--line-height-tight)}body,p,span,label,button,a,li,td,th{font-family:var(--font-family-body);line-height:var(--line-height-normal)}code,.mono,[data-mono]{font-family:var(--font-family-mono)}.text-heading{font-family:var(--font-family-heading)}.text-mono{font-family:var(--font-family-mono)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family-body);font-size:var(--font-size-base);line-height:var(--line-height-normal);background-color:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;overflow-x:hidden}a{color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-hover)}button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}input,select,textarea{font-family:inherit;font-size:inherit}ul,ol{list-style:none}img{max-width:100%;display:block}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes leaf-fall{0%{opacity:0;transform:translateY(-10px)rotate(0)}20%{opacity:1}to{opacity:0;transform:translateY(20px)rotate(360deg)}}@keyframes water-ripple{0%{opacity:.6;transform:scale(.8)}to{opacity:0;transform:scale(2.4)}}@keyframes float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-18px)scale(1.03)}}@keyframes sway{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes glow-nature{0%,to{box-shadow:0 0 8px #4caf7d4d,inset 0 0 12px #4caf7d1a}50%{box-shadow:0 0 20px #4caf7d80,inset 0 0 20px #4caf7d33}}@keyframes glow-framboise{0%,to{box-shadow:0 0 8px #f0477a4d,inset 0 0 12px #f0477a1a}50%{box-shadow:0 0 20px #f0477a80,inset 0 0 20px #f0477a33}}@keyframes glow-saphir{0%,to{box-shadow:0 0 8px #3a7bd54d,inset 0 0 12px #3a7bd51a}50%{box-shadow:0 0 20px #3a7bd580,inset 0 0 20px #3a7bd533}}@keyframes glow-gold{0%,to{box-shadow:0 0 8px #f5c8424d,inset 0 0 12px #f5c8421a}50%{box-shadow:0 0 20px #f5c84299,inset 0 0 20px #f5c84233}}@keyframes glow-crystal{0%,to{box-shadow:0 0 8px #3a7bd54d,inset 0 0 12px #3a7bd51a}50%{box-shadow:0 0 20px #3a7bd580,inset 0 0 20px #3a7bd533}}@keyframes glow-corail{0%,to{box-shadow:0 0 8px #e05c5c4d}50%{box-shadow:0 0 24px #e05c5c80}}@keyframes battle-glow{0%,to{box-shadow:0 0 20px #f5c8424d,inset 0 0 15px #f5c8421a}50%{box-shadow:0 0 35px #f5c84299,inset 0 0 25px #f5c84233}}@keyframes rune-pulse{0%,to{filter:brightness()drop-shadow(0 0 5px);transform:scale(1)}50%{filter:brightness(1.3)drop-shadow(0 0 10px);transform:scale(1.05)}}@keyframes canvas-appear{0%{opacity:0;filter:blur(10px);transform:scale(.95)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes damage-flash{0%,to{background-color:#0000}50%{background-color:#e05c5c33}}@keyframes heal-flash{0%,to{background-color:#0000}50%{background-color:#4caf7d33}}@keyframes toast-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}70%{transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}.animate-fade-in{animation:fade-in var(--transition-normal) forwards}.animate-slide-up{animation:slide-up var(--transition-normal) forwards}.animate-slide-down{animation:slide-down var(--transition-normal) forwards}.animate-slide-in-left{animation:slide-in-left var(--transition-normal) forwards}.animate-slide-in-right{animation:slide-in-right var(--transition-normal) forwards}.animate-scale-in{animation:scale-in var(--transition-fast) forwards}.animate-pulse{animation:1.5s infinite pulse}.animate-shake{animation:.15s shake}.animate-battle-glow{animation:2s infinite battle-glow}.animate-rune-pulse{animation:2s infinite rune-pulse}.animate-glow-nature{animation:2s infinite glow-nature}.animate-glow-gold{animation:2s infinite glow-gold}.animate-glow-crystal{animation:2s infinite glow-crystal}.animate-glow-framboise{animation:2s infinite glow-framboise}.animate-glow-saphir{animation:2s infinite glow-saphir}.animate-canvas-appear{animation:.6s ease-out canvas-appear}.animate-spinner{animation:.8s linear infinite spinner}.animate-bounce-in{animation:.5s forwards bounce-in}.animate-wiggle{animation:.5s wiggle}.animate-float{animation:8s ease-in-out infinite float}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.page{max-width:var(--content-max-width);padding:var(--space-2xl) var(--space-lg);margin:0 auto}.card{background:var(--color-bg-panel);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast)}.card:hover{box-shadow:var(--shadow-md)}.card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.card--nature{border-color:var(--color-border-nature)}.panel{background:var(--color-bg-panel);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.badge{align-items:center;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1;display:inline-flex}.badge--forest{background:var(--color-primary-light);color:var(--color-primary)}.badge--gold{background:var(--color-accent-gold-light);color:var(--color-accent-gold)}.badge--crystal{background:var(--color-accent-crystal-light);color:var(--color-accent-crystal)}.badge--sunset{background:var(--color-accent-sunset-light);color:var(--color-accent-sunset)}.badge--meadow,.badge--river{background:var(--color-accent-menthe-light);color:var(--color-accent-menthe)}.badge--danger{background:var(--color-danger-light);color:var(--color-danger)}.badge--corail{background:var(--color-accent-corail-light);color:var(--color-accent-corail)}.stat-card{align-items:center;gap:var(--space-xs);padding:var(--space-lg);background:var(--color-bg-panel);border:2px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;transition:all var(--transition-fast);flex-direction:column;display:flex}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card__icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:40px;height:40px;display:flex}.stat-card__value{font-family:var(--font-family-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1}.stat-card__label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em}.divider{border:none;border-top:2px solid var(--color-border);margin:var(--space-lg) 0}.chip{align-items:center;gap:var(--space-2xs);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);display:inline-flex}.progress-bar{background:var(--color-bg-card);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-bar__fill{border-radius:var(--radius-full);height:100%;transition:width var(--transition-normal)}.app-layout{flex-direction:column;min-height:100vh;display:flex;position:relative}.app-layout__bg{z-index:0;pointer-events:none;background:linear-gradient(#f5f5f5 0%,#fff 100%);position:fixed;inset:0;overflow:hidden}.app-layout__bg-circle{border-radius:50%;animation:8s ease-in-out infinite float;position:absolute}.app-layout__bg-circle:first-child{background:#f0477a0a;width:380px;height:380px;top:-100px;left:-100px}.app-layout__bg-circle:nth-child(2){background:#3a7bd50a;width:220px;height:220px;animation-delay:2s;top:8%;right:8%}.app-layout__bg-circle:nth-child(3){background:#4caf7d0a;width:160px;height:160px;animation-delay:4s;bottom:22%;left:12%}.app-layout__bg-circle:nth-child(4){background:#f5c8420a;width:280px;height:280px;animation-delay:1s;bottom:-70px;right:-50px}.app-layout__grass{z-index:2;pointer-events:none;height:90px;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.app-layout__grass-blade{transform-origin:bottom;border-radius:50% 50% 0 0;animation:3s ease-in-out infinite sway;position:absolute;bottom:0}.app-layout__nav{z-index:10;position:relative}.app-layout__content{z-index:5;flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.app-layout__main{max-width:var(--content-max-width);width:100%;padding:var(--space-xl) var(--space-lg) var(--space-3xl);flex:1;margin:0 auto}.app-layout--arena{overflow:hidden}.app-layout--arena .app-layout__bg,.app-layout--arena .app-layout__grass{display:none}.app-layout--arena .app-layout__content{background:linear-gradient(135deg,#e8e6ec 0%,#dddce2 100%)}.app-layout--arena .app-layout__main{max-width:none;padding:0;overflow:hidden}@media (width<=768px){.app-layout__main{padding:var(--space-lg) var(--space-md) var(--space-3xl)}}