@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@600;700;800&display=swap";:root{--c-sky-1: #6fbef0;--c-sky-2: #4ea7e0;--c-grass-1: #7ed060;--c-grass-2: #4f9a3a;--c-grass-3: #3a7e2c;--c-dirt-1: #c89867;--c-dirt-2: #8a6037;--c-stone-1: #b8b3a8;--c-stone-2: #6e6a62;--c-wood-1: #d29262;--c-wood-2: #7a4220;--c-night: #0f1d2c;--c-night-2: #1a2b40;--c-panel: #2c1e16;--c-panel-2: #3a2820;--c-cream: #f9efd6;--c-gold-1: #ffe27a;--c-gold-2: #f5b400;--c-wood-r1: #d29262;--c-wood-r2: #8b5a2b;--c-gem-1: #ff7eb6;--c-gem-2: #b03a86;--c-trophy-1: #ffd166;--c-trophy-2: #c98727;--c-go-1: #7ed060;--c-go-2: #2e7a1e;--c-attack-1: #ff7d6b;--c-attack-2: #b8331f;--c-info-1: #74c8ff;--c-info-2: #2070c2;--c-warn-1: #ffd166;--c-warn-2: #b8770b;--c-purple-1: #c084fc;--c-purple-2: #6d28d9;--shadow-hard: 0 4px 0 rgba(0,0,0,.35);--shadow-card: 0 8px 24px rgba(0,0,0,.45);--r-sm: 10px;--r-md: 16px;--r-lg: 22px;--safe-bottom: env(safe-area-inset-bottom, 0);--safe-top: env(safe-area-inset-top, 0)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;font-family:Fredoka,"Baloo 2",Trebuchet MS,system-ui,-apple-system,sans-serif;font-weight:600;color:var(--c-cream);background:var(--c-night);overscroll-behavior:none;user-select:none;-webkit-user-select:none;text-shadow:0 2px 0 rgba(0,0,0,.3)}button{font-family:inherit;font-weight:700}input,textarea{font-family:inherit;font-weight:600;user-select:text;-webkit-user-select:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:0;border-radius:var(--r-md);background:linear-gradient(180deg,var(--c-go-1),var(--c-go-2));color:#fff;font-size:15px;font-weight:800;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.35);cursor:pointer;position:relative;box-shadow:var(--shadow-hard),inset 0 -4px #00000040,inset 0 2px #ffffff4d;transition:transform 80ms ease,filter 80ms ease;white-space:nowrap}.btn:active{transform:translateY(2px);box-shadow:0 2px #00000059,inset 0 -2px #00000040}.btn:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed}.btn.btn-attack{background:linear-gradient(180deg,var(--c-attack-1),var(--c-attack-2))}.btn.btn-info{background:linear-gradient(180deg,var(--c-info-1),var(--c-info-2))}.btn.btn-warn{background:linear-gradient(180deg,var(--c-warn-1),var(--c-warn-2));color:#3b2402}.btn.btn-ghost{background:linear-gradient(180deg,#5b4536,#3a2820)}.btn.btn-gem{background:linear-gradient(180deg,var(--c-gem-1),var(--c-gem-2))}.btn.btn-purple{background:linear-gradient(180deg,var(--c-purple-1),var(--c-purple-2))}.btn.btn-sm{padding:8px 14px;font-size:13px;border-radius:var(--r-sm)}.btn.btn-block{width:100%}.panel{background:linear-gradient(180deg,var(--c-panel-2),var(--c-panel));border:3px solid #19100b;border-radius:var(--r-lg);box-shadow:var(--shadow-card),inset 0 2px #ffffff0f;padding:14px}.panel-title{font-family:"Baloo 2",system-ui;font-weight:800;font-size:18px;margin:0 0 10px;color:var(--c-cream);letter-spacing:.4px;display:flex;align-items:center;gap:8px}.top-bar{position:fixed;top:0;left:0;right:0;padding:calc(var(--safe-top) + 8px) 8px 8px;background:linear-gradient(180deg,rgba(15,29,44,.95),rgba(15,29,44,.78) 70%,transparent);z-index:50;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.resources-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.res-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;background:linear-gradient(180deg,#36251c,#1d130d);border:2px solid #0a0604;box-shadow:inset 0 2px #ffffff14,0 2px #0006;font-weight:800;font-size:13px;min-width:0}.res-pill .icon{font-size:16px;line-height:1}.res-gold .num{color:var(--c-gold-1)}.res-wood .num{color:var(--c-wood-1)}.res-gems .num{color:var(--c-gem-1)}.res-trophy .num{color:var(--c-trophy-1)}.res-civ .num{color:#b9e8ff}.res-food .num{color:#f5d28a}.res-food.starving .num{color:#ff6b6b}.res-food.starving{border-color:#5b1010}.badge-bell{display:inline-flex;align-items:center;background:#c8501f;color:#fff;border-radius:8px;padding:1px 5px;font-size:9px;font-weight:800}.events-banner{position:sticky;top:64px;z-index:35;display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px;background:linear-gradient(180deg,#140c06eb,#0f0904c7);border-bottom:1px solid rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.event-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,#2d1f15,#1a1108);border:1px solid rgba(255,200,90,.25);font-size:11px;font-weight:700;color:#fce6b6;box-shadow:0 0 12px #ffb43c1f inset,0 1px #0006;animation:glow-pulse 2.4s ease-in-out infinite}.event-chip .event-icon{font-size:16px}.event-chip .event-info{display:flex;flex-direction:column;line-height:1.05}.event-chip .event-name{font-weight:800}.event-chip .event-desc{font-size:9px;opacity:.7;font-weight:500}.event-chip .event-timer{font-size:10px;opacity:.85;margin-left:2px;padding:1px 6px;background:#0006;border-radius:6px;font-variant-numeric:tabular-nums}.event-civic_strike,.event-drought{border-color:#ff505066;color:#ffd0c2}.event-market_fair,.event-gold_rush,.event-gem_geode{border-color:#ffd25080}.event-harvest_festival{border-color:#8cdc7866;color:#d8ffcc}.event-war_drums{border-color:#dc5a3c80;color:#ffd6c2}@keyframes pulse-red{0%,to{box-shadow:inset 0 2px #ffffff14,0 0 #ff3c3c00}50%{box-shadow:inset 0 2px #ffffff14,0 0 14px #ff3c3ca6}}.pulse-red{animation:pulse-red 1.4s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 8px #ffb43c26 inset,0 1px #0006}50%{box-shadow:0 0 18px #ffb43c66 inset,0 1px #0006}}@keyframes slide-down{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}.slide-down{animation:slide-down .35s ease-out}@keyframes coin-burst{0%{transform:translate(0) scale(.4);opacity:1}to{transform:translate(var(--bx, 60px),var(--by, -40px)) scale(1.1);opacity:0}}.coin-particle{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7c8,#f3c43e 60%,#7a4b08);box-shadow:0 0 8px #ffc850b3;animation:coin-burst .9s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}@keyframes sparkle{0%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.2) rotate(180deg);opacity:1}to{transform:scale(.5) rotate(360deg);opacity:0}}.sparkle{position:absolute;font-size:18px;pointer-events:none;animation:sparkle 1.2s ease-out forwards}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);background-size:200% 100%;animation:shimmer 2.4s linear infinite}.prof-bar{width:100%;height:8px;background:#0006;border-radius:4px;overflow:hidden;position:relative}.prof-bar>.fill{height:100%;background:linear-gradient(90deg,#f3c43e,#f1782b);transition:width .5s ease}.prof-card{background:linear-gradient(180deg,#2a1c12,#18100a);border:1px solid rgba(255,210,120,.18);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:28px 1fr auto;gap:8px 10px;align-items:center}.prof-card .icon{font-size:22px}.prof-card .name{font-weight:800;font-size:13px}.prof-card .meta{font-size:10px;opacity:.75}.prof-card .bonus{font-weight:800;color:#6fe39d;font-size:13px}.sparkline{width:100%;height:60px;background:#00000040;border-radius:6px;border:1px solid rgba(255,255,255,.05)}@media (min-width: 900px){main{max-width:980px;margin:0 auto}.resources-row{gap:8px}.res-pill{font-size:14px;padding:6px 14px 6px 10px}}@media (min-width: 1200px){main{max-width:1180px}}.profile-chip{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,#36251c,#1d130d);border:2px solid #0a0604;border-radius:999px;padding:4px 10px 4px 4px;box-shadow:inset 0 2px #ffffff0f,0 2px #0006;font-weight:800;font-size:12px}.profile-chip .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#ffd166,#b8770b);border:2px solid #0a0604;display:flex;align-items:center;justify-content:center;font-size:14px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;padding:6px 6px calc(6px + var(--safe-bottom));background:linear-gradient(0deg,#0f1d2cfa,#0f1d2cd9);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;z-index:50;border-top:2px solid #0a0604}.bottom-nav .nav-btn{background:linear-gradient(180deg,#3a2820,#2c1e16);border:2px solid #0a0604;border-radius:var(--r-md);color:var(--c-cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 2px 4px;gap:1px;box-shadow:inset 0 2px #ffffff0f,0 2px #0006;font-size:10px;font-weight:800;cursor:pointer;position:relative;min-height:54px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottom-nav .nav-btn .icon{font-size:20px}.bottom-nav .nav-btn.active{background:linear-gradient(180deg,var(--c-go-1),var(--c-go-2))}.bottom-nav .nav-btn .badge{position:absolute;top:4px;right:6px;background:linear-gradient(180deg,#ff7d6b,#b8331f);color:#fff;font-size:10px;padding:1px 5px;border-radius:999px;border:1px solid #0a0604}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000009e;z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade-in .12s ease}.modal{background:linear-gradient(180deg,#f6e6c3,#d4b687);color:#2c1e16;text-shadow:none;border:4px solid #2c1e16;border-radius:28px 28px 0 0;width:100%;max-width:540px;max-height:92vh;overflow-y:auto;padding:18px 16px calc(16px + var(--safe-bottom));box-shadow:0 -10px 30px #0009;animation:slide-up .2s cubic-bezier(.2,.8,.2,1)}.modal h2{font-family:"Baloo 2";font-weight:800;margin:0 0 6px;color:#2c1e16;text-shadow:0 2px 0 rgba(255,255,255,.4)}.modal .close-btn{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#ff7d6b,#b8331f);border:3px solid #2c1e16;color:#fff;font-size:18px;font-weight:800;cursor:pointer;z-index:1;box-shadow:0 3px #0006}.modal-header{position:relative}@media (min-width: 700px){.modal-backdrop{align-items:center}.modal{border-radius:28px}}@keyframes slide-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.input{width:100%;padding:12px 14px;border-radius:var(--r-md);border:3px solid #2c1e16;background:#fff;color:#2c1e16;font-size:16px;font-weight:600;outline:none}.input:focus{box-shadow:0 0 0 3px #2e7a1e40}.toast-wrap{position:fixed;top:calc(80px + var(--safe-top));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:200;pointer-events:none}.toast{background:linear-gradient(180deg,#ffd166,#b8770b);color:#2c1e16;border:3px solid #2c1e16;border-radius:var(--r-md);padding:10px 16px;font-weight:800;font-size:13px;box-shadow:0 6px 14px #00000080;animation:pop .2s ease}.toast.error{background:linear-gradient(180deg,#ff7d6b,#b8331f);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}.toast.info{background:linear-gradient(180deg,#74c8ff,#2070c2);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}.fullscreen-center{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.card-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.card{background:linear-gradient(180deg,#fff8e3,#e9d3a3);color:#2c1e16;text-shadow:none;border:3px solid #2c1e16;border-radius:var(--r-md);padding:12px;text-align:center;position:relative;box-shadow:0 4px #0006;transition:transform 80ms}.unit-card-clickable{cursor:pointer}.card:active{transform:translateY(2px)}.card .big-icon{font-size:40px;line-height:1;margin-bottom:4px}.unit-visual{display:inline-block;max-width:100%;max-height:56px;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.unit-visual-inline{width:28px;height:28px;vertical-align:middle}.unit-visual-replay{width:22px;height:22px;object-fit:contain}.unit-visual-detail{width:min(180px,48vw);height:min(180px,48vw);max-width:100%;max-height:100%;object-fit:contain}.card .name{font-weight:800;font-size:14px}.card .meta{font-size:11px;color:#5b4536}.card.locked{filter:grayscale(.7) brightness(.7);opacity:.85}.capacity-strip{background:#ffffff26;border:2px solid rgba(44,30,22,.16);border-radius:16px;padding:10px 12px;color:#111;text-shadow:none}.capacity-strip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:#111;text-shadow:none}.capacity-strip-head strong,.capacity-strip-head span{color:#111;text-shadow:none}.capacity-strip-bar{margin-top:8px;height:10px;border-radius:999px;background:#2c1e1624;overflow:hidden}.capacity-strip-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7ed060,#2e7a1e)}.quick-note{font-size:12px;color:#5b4536}.unit-detail-shell{display:flex;flex-direction:column;gap:14px}.unit-detail-hero{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:14px;align-items:center}.unit-detail-visual{min-height:150px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#fffaf0,#edd9b3 68%,#d2b07e);border:3px solid #2c1e16;border-radius:24px;box-shadow:inset 0 2px #ffffff8c}.unit-detail-summary p{margin:6px 0 0;font-size:14px;line-height:1.35;color:#5b4536}.unit-detail-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8b5a2b}.unit-detail-level{margin-top:4px;font-size:13px;font-weight:800}.unit-detail-traits{display:flex;flex-wrap:wrap;gap:8px}.unit-detail-trait{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,#2c1e16,#4b352a);color:#f9efd6;font-size:12px;font-weight:800}.unit-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.unit-detail-stat,.unit-detail-panel{background:#ffffff6b;border:2px solid rgba(44,30,22,.18);border-radius:16px;padding:12px}.unit-detail-stat{display:flex;flex-direction:column;gap:4px}.unit-detail-stat span{font-size:12px;font-weight:700;color:#7a5d49}.unit-detail-stat strong{font-size:20px;line-height:1}.unit-detail-panel-title{font-size:13px;font-weight:800;margin-bottom:6px}.unit-detail-line{font-size:14px;line-height:1.4;color:#4b352a}.unit-detail-upgrades{display:flex;flex-wrap:wrap;gap:8px}.unit-detail-upgrades span{padding:6px 10px;border-radius:999px;background:#2c1e1614;font-size:12px;font-weight:800}.unit-detail-next-unlock{margin-bottom:8px;color:#2070c2;font-weight:800}.unit-compare-grid{display:grid;gap:10px}.unit-compare-row{display:flex;flex-direction:column;gap:6px}.unit-compare-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:800}.unit-compare-bar{position:relative;height:10px;border-radius:999px;overflow:hidden;background:#2c1e1624}.unit-compare-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#b8770b,#ffd166)}.unit-compare-fill.next{opacity:.42;background:linear-gradient(90deg,#7ed060,#2e7a1e)}.filter-row{display:flex;flex-wrap:wrap;gap:8px}.chip-btn{border:2px solid #2c1e16;border-radius:999px;background:#ffffff73;color:#5b4536;font-family:inherit;font-size:12px;font-weight:800;padding:7px 12px;cursor:pointer}.chip-btn.active{background:linear-gradient(180deg,#74c8ff,#2070c2);color:#fff}.attack-plan-card{margin-bottom:14px;padding:12px;border-radius:16px;border:2px solid rgba(44,30,22,.16);background:#ffffff6b}.attack-plan-bar .capacity-strip-fill{background:linear-gradient(90deg,#ff7d6b,#b8331f)}.attack-plan-summary{display:flex;flex-direction:column;gap:4px;margin-top:8px;color:#5b4536;font-size:12px}.attack-plan-summary strong{font-size:14px;color:#2c1e16}@media (max-width: 560px){.unit-detail-hero{grid-template-columns:1fr}.unit-detail-grid{grid-template-columns:1fr 1fr}}.cost-row{display:flex;justify-content:center;gap:8px;font-size:12px;font-weight:800;margin-top:4px;color:#5b4536}.cost-row span{display:inline-flex;align-items:center;gap:2px}.scout-card{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;background:linear-gradient(180deg,#fff8e3,#e9d3a3);color:#2c1e16;text-shadow:none;border:3px solid #2c1e16;border-radius:var(--r-md);padding:10px;box-shadow:0 4px #0006}.scout-card .pavatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#ffd166,#b8770b);border:3px solid #2c1e16;display:flex;align-items:center;justify-content:center;font-size:28px}.muted{color:#6b5238}.page{padding:calc(64px + var(--safe-top)) 10px calc(76px + var(--safe-bottom));min-height:100vh;position:relative;overflow-x:hidden}.login-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at top,var(--c-sky-1) 0%,var(--c-sky-2) 50%,#2a5a86 100%);z-index:-1;overflow:hidden}.login-clouds:before,.login-clouds:after{content:"";position:absolute;width:200%;height:80px;background:radial-gradient(60px 30px at 100px 40px,rgba(255,255,255,.6),transparent 60%),radial-gradient(80px 40px at 300px 50px,rgba(255,255,255,.5),transparent 60%),radial-gradient(50px 25px at 600px 30px,rgba(255,255,255,.55),transparent 60%);animation:clouds 60s linear infinite;top:8%}.login-clouds:after{top:30%;animation-duration:90s;opacity:.6}@keyframes clouds{0%{transform:translate(-50%)}to{transform:translate(0)}}.login-card{margin:16% auto 0;max-width:380px;padding:24px 18px}.login-title{font-family:"Baloo 2";font-weight:800;font-size:42px;text-align:center;background:linear-gradient(180deg,#ffe27a,#c98727);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #5a3614);margin:12px 0 4px}.login-sub{text-align:center;color:#ffffffd9;margin-bottom:18px}.stars{display:inline-flex;gap:2px}.stars .star{width:18px;height:18px;display:inline-block;background:radial-gradient(circle at 50% 40%,#ffe27a,#f5b400 70%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 1px 0 #5a3614)}.stars .star.empty{background:#c2b9aa;opacity:.4}.bar{height:8px;background:#00000040;border-radius:999px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.5)}.bar>.fill{height:100%;background:linear-gradient(180deg,var(--c-go-1),var(--c-go-2));border-radius:999px;transition:width .2s}.bar.hp>.fill{background:linear-gradient(180deg,#ff7d6b,#b8331f)}.bar.xp>.fill{background:linear-gradient(180deg,#c084fc,#6d28d9)}.chat-list{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px}.chat-msg{background:#fffffff0;color:#2c1e16;text-shadow:none;border:2px solid #2c1e16;border-radius:12px;padding:6px 10px;font-size:13px;font-weight:600;word-break:break-word}.chat-msg .header{font-size:11px;color:#6b5238;font-weight:800}.chat-msg .header .lvl{color:#2070c2;margin-right:4px}.empty-state{text-align:center;padding:30px 14px;color:#b9aa97}.iso-wrap{position:relative;width:100%;height:calc(100vh - 130px - var(--safe-top) - var(--safe-bottom));overflow:hidden;border-radius:0;background:radial-gradient(ellipse at center,#5fa5d8,#2a5a86 80%);touch-action:none}.iso-canvas{position:absolute;top:0;right:0;bottom:0;left:0;cursor:grab}.iso-canvas:active{cursor:grabbing}.timer-pill{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(180deg,#36251c,#1d130d);color:#ffd166;border:2px solid #0a0604;border-radius:999px;padding:4px 10px;font-weight:800;font-size:12px}.action-bar{position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;z-index:10}.fab{position:absolute;width:56px;height:56px;border-radius:50%;border:3px solid #0a0604;font-size:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--c-go-1),var(--c-go-2));color:#fff;box-shadow:0 6px #0006;cursor:pointer;z-index:20}.fab:active{transform:translateY(2px);box-shadow:0 3px #0006}.fab.shop{right:10px;bottom:10px;background:linear-gradient(180deg,var(--c-info-1),var(--c-info-2))}.fab.attack{right:10px;top:10px;background:linear-gradient(180deg,var(--c-attack-1),var(--c-attack-2))}.battle-result{text-align:center;padding:30px 0 10px}.battle-result .stars{transform:scale(2);margin:16px 0}.replay-shell{display:flex;flex-direction:column;gap:12px}.replay-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.replay-hud>div,.replay-meter-card,.replay-summary-card{background:linear-gradient(180deg,#fff8e3,#e9d3a3);color:#2c1e16;text-shadow:none;border:3px solid #2c1e16;border-radius:var(--r-md);box-shadow:0 4px #00000059}.replay-hud>div{padding:10px}.replay-label{font-size:11px;font-weight:800;color:#6b5238;text-transform:uppercase}.replay-value{font-size:16px;font-weight:800;margin-top:2px}.replay-topline{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.replay-progress-bar{height:12px}.replay-stars-wrap{min-width:70px;display:flex;justify-content:flex-end}.replay-arena{position:relative;height:min(68vh,520px);overflow:hidden;border-radius:24px;border:4px solid #2c1e16;background:linear-gradient(180deg,#ffffff2e,#fff0 25%),radial-gradient(circle at 50% 20%,rgba(255,255,255,.25),transparent 35%),linear-gradient(180deg,#75c7f8,#4ea7e0 32%,#63b758 32%,#458f39)}.replay-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.08) 1px,transparent 1px);background-size:calc(100% / 12) calc(100% / 14)}.replay-building,.replay-unit,.replay-floater,.replay-projectile{position:absolute}.replay-building{display:flex;align-items:center;justify-content:center;border-radius:14px;border:3px solid rgba(44,30,22,.92);background:linear-gradient(180deg,#fff8e3f0,#e0bd7df5);box-shadow:0 8px 14px #00000047;transition:transform .22s ease,opacity .22s ease,filter .22s ease}.replay-building.is-destroyed{opacity:.35;filter:grayscale(1);transform:scale(.92) rotate(-5deg)}.replay-building-icon{font-size:clamp(18px,2vw,28px)}.replay-building-hp{position:absolute;left:8%;right:8%;bottom:-8px;height:8px;background:#2c1e1633;border-radius:999px;overflow:hidden;border:1px solid rgba(44,30,22,.45)}.replay-building-hp .fill{height:100%;background:linear-gradient(180deg,#ff7d6b,#b8331f)}.replay-unit{min-width:36px;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:2px solid #2c1e16;background:linear-gradient(180deg,#2c1e16,#4b3428);color:#fff8e3;box-shadow:0 6px 10px #00000047;transition:left .32s linear,top .32s linear,opacity .18s ease}.replay-unit.is-gone{opacity:.2}.replay-unit-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.replay-unit-count{font-weight:800;font-size:12px}.replay-floater{transform:translate(-50%,-50%);font-weight:800;font-size:15px;text-shadow:0 2px 0 rgba(0,0,0,.4);animation:replay-float .9s ease forwards;pointer-events:none}.replay-floater.damage,.replay-floater.danger,.replay-floater.loss{color:#ffede7}.replay-floater.destroy{color:#ffd166}.replay-floater.star{color:#ffe27a;font-size:18px}.replay-projectile{height:4px;transform-origin:left center;background:linear-gradient(90deg,#ffffff1a,#ffe27a 35%,#ff7d6b);border-radius:999px;box-shadow:0 0 10px #ffd166b3;animation:replay-shot .42s ease forwards}.replay-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.replay-meter-card{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.replay-meter-card.win strong{color:#2e7a1e}.replay-meter-card.loss strong{color:#b8331f}.replay-actions{display:flex;gap:8px;justify-content:center}.replay-summary-card{padding:14px;text-align:center}.replay-summary-card h3{margin:0 0 8px}.replay-summary-line{margin-bottom:6px;font-weight:700}@keyframes replay-float{0%{opacity:1;transform:translate(-50%,-30%)}to{opacity:0;transform:translate(-50%,-170%)}}@keyframes replay-shot{0%{opacity:0}25%{opacity:1}to{opacity:0}}@media (max-width: 640px){.replay-hud,.replay-meters,.replay-topline{grid-template-columns:1fr}.replay-stars-wrap{justify-content:center}.replay-arena{height:54vh}}.tabs{display:flex;gap:4px;margin-bottom:12px;background:#00000040;padding:4px;border-radius:var(--r-md)}.tabs>button{flex:1;padding:8px 4px;border:0;background:transparent;color:var(--c-cream);font-weight:800;font-size:13px;border-radius:var(--r-sm);cursor:pointer}.tabs>button.active{background:linear-gradient(180deg,var(--c-go-1),var(--c-go-2));color:#fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:999px}