:root {
  --bg:#060914;
  --bg-2:#0a0f1f;
  --panel:rgba(15,20,39,.76);
  --panel-strong:rgba(18,24,48,.92);
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.12);
  --text:#f7f8ff;
  --muted:#8d96b6;
  --faint:#5f6889;
  --violet:#8b7cff;
  --purple:#b26bff;
  --cyan:#4cd9ff;
  --green:#58e4b2;
  --red:#ff6d8d;
  --gold:#ffd36d;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --shadow:0 24px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);color-scheme:dark;scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100dvh;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;font-synthesis:none;overflow-x:hidden;overscroll-behavior-y:none}
button,input,select{font:inherit}button{color:inherit}a{color:inherit}.tap{transition:transform .16s ease,border-color .16s ease,background .16s ease}.tap:active{transform:scale(.985)}
.ambient{position:fixed;pointer-events:none;z-index:-2;filter:blur(2px)}.ambient-a{width:420px;height:420px;left:-160px;top:-170px;background:radial-gradient(circle,rgba(111,84,255,.24),transparent 68%)}.ambient-b{width:400px;height:520px;right:-220px;top:260px;background:radial-gradient(circle,rgba(37,188,255,.12),transparent 70%)}
.app-shell{min-height:100dvh;max-width:780px;margin:0 auto;position:relative}
.glass-card{background:linear-gradient(145deg,rgba(24,29,57,.88),rgba(11,15,31,.82));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),var(--shadow);backdrop-filter:blur(22px) saturate(1.22);-webkit-backdrop-filter:blur(22px) saturate(1.22)}

.topbar{min-height:calc(76px + var(--safe-top));padding:calc(13px + var(--safe-top)) 17px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:25;background:linear-gradient(180deg,rgba(6,9,20,.97),rgba(6,9,20,.78) 72%,rgba(6,9,20,0));backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)}
.brand-block{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:10px;min-width:0;text-align:left}.brand-mark{width:41px;height:41px;flex:0 0 41px;position:relative;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#665cff,#a85dff 55%,#42d0fa);box-shadow:0 9px 26px rgba(105,89,255,.28),inset 0 1px 1px rgba(255,255,255,.36);overflow:hidden}.brand-mark::after{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.25);border-radius:13px}.brand-mark i{position:absolute;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);filter:blur(10px);right:-9px;bottom:-7px}.brand-mark span{font-size:13px;font-weight:900;letter-spacing:-.06em;position:relative;z-index:1}.brand-copy{min-width:0}.eyebrow,.section-kicker{font-size:9px;line-height:1;letter-spacing:.17em;font-weight:800;color:#858eaf;text-transform:uppercase}.brand-copy h1{font-size:19px;line-height:1.05;margin:4px 0 0;letter-spacing:-.04em;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:7px}.icon-button{width:35px;height:35px;border:1px solid var(--line);border-radius:999px;background:rgba(15,20,39,.72);display:grid;place-items:center}.icon-button svg{width:16px;height:16px;fill:none;stroke:#8e97b9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button.spinning svg{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.status-pill{height:35px;min-width:82px;padding:0 10px;border:1px solid var(--line);background:rgba(15,20,39,.72);border-radius:999px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#9199b7;font-weight:700}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(255,211,109,.1)}.status-dot.ok{background:var(--green);box-shadow:0 0 0 3px rgba(88,228,178,.11),0 0 14px rgba(88,228,178,.4)}.status-dot.bad{background:var(--red);box-shadow:0 0 0 3px rgba(255,109,141,.1)}

main{padding:5px 15px calc(102px + var(--safe-bottom))}.view{display:none;animation:viewIn .22s ease both}.view.active{display:block}@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero-card{position:relative;overflow:hidden;border-radius:29px;padding:20px 19px 17px;background:linear-gradient(145deg,rgba(41,42,92,.9),rgba(19,24,53,.88) 58%,rgba(11,24,39,.84));border-color:rgba(133,121,255,.24);box-shadow:0 28px 75px rgba(3,4,13,.42),inset 0 1px 0 rgba(255,255,255,.06)}.hero-orb{position:absolute;border-radius:50%;filter:blur(3px);pointer-events:none}.hero-orb-a{width:180px;height:180px;left:-85px;top:-100px;background:radial-gradient(circle,rgba(150,93,255,.27),transparent 70%)}.hero-orb-b{width:210px;height:210px;right:-100px;top:-70px;background:radial-gradient(circle,rgba(68,213,255,.15),transparent 70%)}.hero-topline{display:flex;justify-content:space-between;align-items:start;gap:12px;position:relative;z-index:1}.hero-status{margin-top:8px;display:flex;align-items:center;gap:6px;color:#929bb9;font-size:9px}.hero-status i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(88,228,178,.7)}.period-select-wrap{height:36px;min-width:102px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);border-radius:999px;display:flex;align-items:center;position:relative}.period-select{width:100%;height:100%;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:#e5e7fa;padding:0 31px 0 13px;font-size:10px;font-weight:750}.period-select-wrap svg{position:absolute;right:10px;width:14px;height:14px;fill:none;stroke:#858fae;stroke-width:1.8;pointer-events:none}.hero-main{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:25px;position:relative;z-index:1}.hero-primary{min-width:0}.hero-number{font-size:58px;line-height:.92;font-weight:850;letter-spacing:-.075em}.hero-label{font-size:12px;color:#a1a9c7;margin-top:7px;font-weight:650}.hero-foot{font-size:9px;color:#727c9c;margin-top:10px;line-height:1.45}.hero-ring{--pct:0;width:100px;height:100px;flex:0 0 100px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 210deg,#9a73ff calc(var(--pct)*1%),rgba(255,255,255,.075) 0);padding:8px;box-shadow:0 0 30px rgba(111,98,255,.09)}.hero-ring-inner{width:100%;height:100%;border-radius:50%;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#11162d,#0c1022);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.hero-ring-inner strong{font-size:20px;letter-spacing:-.04em}.hero-ring-inner span{font-size:9px;color:#858eac;margin-top:2px}.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:20px;border-top:1px solid rgba(255,255,255,.07);padding-top:14px;position:relative;z-index:1}.hero-metrics>div{padding:0 8px;border-right:1px solid rgba(255,255,255,.06);min-width:0}.hero-metrics>div:first-child{padding-left:0}.hero-metrics>div:last-child{border-right:0;padding-right:0}.hero-metrics span{display:block;color:#747e9f;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-metrics strong{display:block;font-size:15px;margin-top:4px;letter-spacing:-.03em}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:27px 3px 12px}.section-head.compact-head{margin-bottom:10px}.section-head h2,.page-heading h2{margin:5px 0 0;font-size:25px;line-height:1;letter-spacing:-.05em}.muted{color:var(--muted);font-size:10px}.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.insight-card{min-height:104px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(160deg,rgba(20,25,47,.92),rgba(10,13,27,.94));padding:13px 11px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}button.insight-card{cursor:pointer}.insight-card>span{font-size:8px;color:#747e9f;text-transform:uppercase;letter-spacing:.08em;font-weight:750}.insight-card>strong{font-size:11px;line-height:1.15;margin:8px 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.insight-card>small{font-size:8px;color:#717b9b}.insight-card>small b{font-size:10px;color:#b9c1df}.muted-card{opacity:.7}.skeleton-grid:empty::before{content:"";grid-column:1/-1;height:104px;border-radius:19px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.07),rgba(255,255,255,.03));background-size:220% 100%;animation:shimmer 1.2s linear infinite}

.chart-card{border-radius:22px;padding:16px;margin-top:10px;box-shadow:none}.card-topline{display:flex;align-items:start;justify-content:space-between;gap:12px}.card-topline h3{margin:5px 0 0;font-size:15px;letter-spacing:-.025em}.mini-badge{height:25px;padding:0 9px;border-radius:999px;background:rgba(139,124,255,.09);border:1px solid rgba(139,124,255,.17);display:flex;align-items:center;font-size:8.5px;color:#aeb5d3}.timeline-chart{position:relative;min-height:122px;margin-top:7px}.timeline-chart svg{display:block;width:100%;height:auto;overflow:visible}.chart-grid{stroke:rgba(255,255,255,.06);stroke-width:1}.chart-area{fill:url(#chartArea)}.chart-line{fill:none;stroke:url(#chartLine);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(104,103,255,.25))}.chart-points circle{fill:#c7c7ff;stroke:#6b6fff;stroke-width:1.4;cursor:pointer}.chart-label{fill:#66708f;font-size:8px}.chart-label.end{text-anchor:end}.chart-empty{height:118px;display:grid;place-items:center;color:#6f7898;font-size:9px;text-align:center}.chart-tooltip{position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:2;background:#1b213d;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 10px;font-size:8px;color:#c9cde3;box-shadow:0 7px 24px rgba(0,0,0,.26)}

.segmented{height:36px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:13px;padding:3px;margin-bottom:9px}.segment{border:0;background:transparent;border-radius:9px;color:#697394;font-size:8.5px;font-weight:700}.segment.active{background:linear-gradient(145deg,rgba(114,105,255,.22),rgba(154,91,255,.12));color:#c8caff;box-shadow:inset 0 0 0 1px rgba(139,124,255,.14)}
.army-list,.ranking-list,.feed-list{display:flex;flex-direction:column;gap:8px}.army-row{border:1px solid var(--line);background:linear-gradient(155deg,rgba(17,22,42,.9),rgba(10,13,27,.9));border-radius:19px;padding:13px 11px;display:grid;grid-template-columns:38px 1fr auto 14px;gap:10px;align-items:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}.army-rank{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,rgba(99,112,255,.16),rgba(168,93,255,.1));display:grid;place-items:center;color:#aeb7f7;font-size:10px;font-weight:850}.army-rank.top{background:linear-gradient(145deg,rgba(255,211,109,.24),rgba(181,121,65,.10));color:#ffda80}.army-main{min-width:0}.row-title{font-size:12.5px;font-weight:780;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.row-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px;color:#737d9e;font-size:8.5px}.usage-bar{height:3px;margin-top:9px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}.usage-fill{height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#6d75ff,#9d68ff,#4bd9ff);box-shadow:0 0 10px rgba(112,105,255,.25);animation:barIn .45s ease both}@keyframes barIn{from{width:0}}.usage-col{text-align:right;min-width:52px}.usage-col>strong{display:block;font-size:13px}.trend-badge{display:inline-flex;margin-top:5px;border-radius:999px;padding:3px 5px;font-size:7px;font-weight:700}.trend-badge.up{color:#6ee5b9;background:rgba(88,228,178,.08)}.trend-badge.down{color:#ff829c;background:rgba(255,109,141,.07)}.trend-badge.neutral{color:#818aa9;background:rgba(255,255,255,.04)}.chevron{width:13px;height:13px;fill:none;stroke:#59617f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.page-heading{padding:11px 3px 16px}.page-heading p{margin:7px 0 0}.search-wrap{height:47px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:rgba(13,17,33,.79);margin-bottom:9px}.search-wrap svg{width:16px;height:16px;stroke:#7882a2;stroke-width:1.8;fill:none}.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.search-wrap input::placeholder{color:#5e6889}.chip-row{display:flex;gap:7px;overflow-x:auto;padding:0 1px 10px;scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.filter-chip{height:31px;flex:0 0 auto;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:rgba(15,20,38,.66);color:#717b9d;font-size:8.5px;font-weight:700}.filter-chip.active{color:#d0d2ff;border-color:rgba(139,124,255,.25);background:linear-gradient(145deg,rgba(110,104,255,.18),rgba(156,92,255,.1))}
.ranking-row{border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,rgba(16,21,40,.89),rgba(9,13,27,.88));padding:12px;display:grid;grid-template-columns:37px 1fr 30px auto;gap:9px;align-items:center;cursor:pointer}.rank-number{font-size:11px;font-weight:850;color:#8993b5}.rank-number.podium{color:var(--gold)}.player-main{min-width:0}.player-name{font-size:12px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-clan{font-size:8.5px;color:#697394;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favorite-button{width:28px;height:28px;border:0;background:transparent;color:#4f5877;font-size:16px}.favorite-button.active{color:var(--gold);text-shadow:0 0 10px rgba(255,211,109,.26)}.rank-stats{text-align:right}.trophies{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:10.5px;font-weight:750}.trophy-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(145deg,#ffdd75,#b77832);box-shadow:0 0 8px rgba(255,211,109,.25)}.rank-move{font-size:8px;color:#657090;margin-top:3px}.rank-move.up,.player-rank-hero small.up{color:var(--green)}.rank-move.down,.player-rank-hero small.down{color:var(--red)}.latest-army{grid-column:2/5;display:flex;align-items:center;gap:5px;min-width:0;border-top:1px solid rgba(255,255,255,.045);padding-top:8px;margin-top:-2px;font-size:8.5px;color:#687393}.latest-army strong{color:#a9b1d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.latest-army em{font-style:normal;margin-left:auto;flex:0 0 auto;color:#7b85a5;background:rgba(255,255,255,.04);border-radius:999px;padding:3px 6px}

.live-heading{display:flex;align-items:end;justify-content:space-between}.live-badge{height:26px;padding:0 9px;border-radius:999px;background:rgba(88,228,178,.07);border:1px solid rgba(88,228,178,.17);color:#77e8bc;font-size:8px;font-weight:850;letter-spacing:.08em;display:flex;align-items:center;gap:6px}.live-badge i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 1.6s ease infinite}@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}.feed-note{line-height:1.5;margin:0 3px 12px}.feed-row{border:1px solid var(--line);background:linear-gradient(155deg,rgba(16,21,40,.9),rgba(9,13,27,.9));border-radius:19px;padding:13px;display:grid;grid-template-columns:1fr auto;gap:10px;cursor:pointer}.feed-main{min-width:0}.feed-top{display:flex;align-items:center;gap:7px}.feed-player{border:0;background:transparent;padding:0;color:#eef0ff;font-size:12px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-rank{font-size:8px;color:#697394}.feed-army{font-size:11px;color:#bdc3dc;font-weight:680;margin-top:6px}.feed-preview{font-size:8px;color:#737d9d;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-time{font-size:8px;color:#5f698a;margin-top:5px}.feed-result{text-align:right;min-width:72px}.stars{letter-spacing:1px;font-size:12px;color:#424b69;white-space:nowrap}.stars .on{color:var(--gold);text-shadow:0 0 8px rgba(255,211,109,.25)}.destruction{font-size:10px;color:#929bb9;font-weight:700;margin-top:5px}.feed-result .chevron{margin-top:10px;margin-left:auto}.nav-live{position:relative}.nav-live i{display:none;position:absolute;right:0;top:-1px;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}.nav-live i.show{display:block}

.info-card{border-radius:20px;padding:15px;margin-bottom:9px;box-shadow:none}.install-card{display:grid;grid-template-columns:39px 1fr;gap:11px;align-items:start}.install-card .primary-button{grid-column:1/3}.info-icon{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(108,105,255,.2),rgba(155,94,255,.12))}.info-icon svg{width:18px;height:18px;fill:none;stroke:#b9bcff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.info-card h3{margin:1px 0 5px;font-size:13px}.info-card p{margin:0;color:#7d87a8;font-size:10px;line-height:1.55}.primary-button{height:41px;border:0;border-radius:13px;background:linear-gradient(135deg,#6b73ff,#9962ff);font-size:10px;font-weight:800;box-shadow:0 10px 25px rgba(100,93,255,.18)}.status-row{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.045);font-size:10px;color:#737d9e}.status-row:last-child{border-bottom:0}.status-row strong{font-size:9.5px;color:#bec5df;text-align:right}.text-card{padding:17px}.legal{margin:20px 8px 0;text-align:center;color:#4e5775;font-size:8px;line-height:1.5}

.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:35;width:min(100%,780px);height:calc(75px + var(--safe-bottom));padding:7px 11px var(--safe-bottom);background:rgba(7,10,21,.89);border-top:1px solid rgba(255,255,255,.07);backdrop-filter:blur(25px) saturate(1.3);-webkit-backdrop-filter:blur(25px) saturate(1.3);display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.nav-item{border:0;background:transparent;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#606a8a;font-size:8.5px;font-weight:700}.nav-icon{width:30px;height:27px;border-radius:10px;display:grid;place-items:center;position:relative}.nav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-item.active{color:#c8caff}.nav-item.active .nav-icon{background:linear-gradient(145deg,rgba(108,103,255,.17),rgba(157,93,255,.08));color:#9188ff;box-shadow:0 0 20px rgba(112,95,255,.08)}

.bottom-dialog{width:100%;max-width:780px;height:100dvh;max-height:100dvh;border:0;padding:0;margin:auto;background:transparent;color:var(--text)}.bottom-dialog::backdrop{background:rgba(1,3,9,.67);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.dialog-sheet{position:absolute;left:0;right:0;bottom:0;max-height:91dvh;overflow:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#161b34,#090d1b 70%);border:1px solid rgba(255,255,255,.09);border-bottom:0;border-radius:29px 29px 0 0;padding:11px 17px calc(25px + var(--safe-bottom));box-shadow:0 -30px 80px rgba(0,0,0,.5);animation:sheetIn .23s ease both}@keyframes sheetIn{from{transform:translateY(18px);opacity:.65}to{transform:none;opacity:1}}.dialog-handle{width:37px;height:4px;border-radius:999px;background:#3a425e;margin:0 auto 12px}.dialog-close{position:absolute;right:16px;top:16px;width:31px;height:31px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.055);color:#9099b7;font-size:20px;line-height:1}.dialog-kicker{margin-top:6px}.dialog-title{font-size:28px;line-height:1.04;letter-spacing:-.055em;margin:6px 43px 0 0}.dialog-lead{font-size:9.5px;color:#747e9f;line-height:1.5;margin:8px 43px 0 0}.dialog-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0}.dialog-stats.four{grid-template-columns:repeat(4,1fr)}.dialog-stat{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);padding:11px 8px;min-width:0}.dialog-stat strong{display:block;font-size:14px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-stat span{display:block;margin-top:4px;font-size:7.5px;color:#697394}.composition-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 1px 8px;font-size:10px;color:#a2abc8;font-weight:750}.composition-title small{font-size:7.5px;font-weight:600;color:#667090}.composition-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.unit-card{min-height:51px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.032);padding:7px;display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;min-width:0}.unit-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(113,110,255,.2),rgba(168,93,255,.09));color:#c2c4ff;font-size:8px;font-weight:850}.unit-card.spell .unit-avatar{background:linear-gradient(145deg,rgba(75,210,255,.17),rgba(86,114,255,.08));color:#a8eaff}.unit-card.siege .unit-avatar{background:linear-gradient(145deg,rgba(255,190,92,.17),rgba(255,108,91,.07));color:#ffd395}.unit-card>div:nth-child(2){min-width:0}.unit-card strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-card span{display:block;font-size:7.5px;color:#667090;margin-top:3px}.unit-card>b{font-size:11px;color:#b7bed8}.players-mini,.recent-mini{border:1px solid var(--line);border-radius:14px;overflow:hidden}.player-mini,.recent-mini button{width:100%;height:39px;border:0;border-bottom:1px solid rgba(255,255,255,.045);background:rgba(255,255,255,.02);padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;text-align:left}.player-mini:last-child,.recent-mini button:last-child{border-bottom:0}.player-mini span,.recent-mini span{color:#8c96b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-mini b,.recent-mini b{color:#c6cce1;flex:0 0 auto;font-size:8px}.dialog-actions{display:grid;grid-template-columns:1.45fr 1fr;gap:8px;margin-top:17px}.primary-action,.secondary-action{height:43px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-size:9px;font-weight:800}.primary-action{border:0;background:linear-gradient(135deg,#6674ff,#9962ff);box-shadow:0 10px 26px rgba(105,94,255,.2)}.secondary-action{border:1px solid var(--line);background:rgba(255,255,255,.04)}.primary-action svg,.secondary-action svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dialog-signature{text-align:center;margin-top:11px;color:#505a79;font-size:7.5px}.dialog-loading{height:240px;display:grid;place-items:center;align-content:center;gap:12px;color:#7781a1;font-size:9px}.dialog-loading i{width:27px;height:27px;border:2px solid rgba(255,255,255,.08);border-top-color:#8d7cff;border-radius:50%;animation:spin .85s linear infinite}
.player-dialog-head{display:flex;align-items:start;justify-content:space-between;gap:10px}.player-dialog-head .dialog-title{margin-right:0}.favorite-pill{flex:0 0 auto;margin-top:4px;height:31px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#7983a4;padding:0 9px;font-size:8px;font-weight:700}.favorite-pill.active{color:#ffda7a;border-color:rgba(255,211,109,.18);background:rgba(255,211,109,.06)}.player-rank-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin-top:16px}.player-rank-hero>div{min-height:74px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(111,105,255,.11),rgba(255,255,255,.025));padding:12px}.player-rank-hero span{display:block;font-size:8px;color:#707a9b}.player-rank-hero strong{font-size:25px;display:inline-block;margin-top:5px;letter-spacing:-.05em}.player-rank-hero small{font-size:8px;margin-left:6px;color:#707a9b}.spark-card{height:96px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025);padding:5px}.rank-sparkline{width:100%;height:100%}.rank-sparkline path{fill:none;stroke:url(#none);stroke:#817aff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(129,122,255,.2))}.rank-sparkline circle{fill:#54d9ff}.spark-empty,.mini-empty{height:70px;display:grid;place-items:center;color:#677190;font-size:8.5px}.player-armies{display:flex;flex-direction:column;gap:6px}.player-army-row{min-height:49px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.027);display:grid;grid-template-columns:1fr auto 13px;gap:8px;align-items:center;padding:8px 10px;text-align:left}.player-army-row>div{min-width:0}.player-army-row strong{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-army-row span{display:block;font-size:7.5px;color:#697394;margin-top:3px}.player-army-row>b{font-size:9px;color:#b8bed8}

.toast{position:fixed;z-index:80;left:50%;bottom:calc(87px + var(--safe-bottom));transform:translate(-50%,10px);opacity:0;pointer-events:none;background:#1c233f;border:1px solid rgba(255,255,255,.1);box-shadow:0 13px 42px rgba(0,0,0,.38);border-radius:999px;padding:9px 13px;color:#d6daf0;font-size:9px;transition:.2s ease;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}.empty-state{border:1px dashed rgba(255,255,255,.1);border-radius:19px;padding:27px 18px;text-align:center;color:#737d9d;font-size:9.5px;line-height:1.55;display:flex;flex-direction:column;align-items:center;gap:5px}.empty-state strong{color:#a4acc7;font-size:11px}.empty-state span{max-width:330px}.empty-icon{width:33px;height:33px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.035);color:#697394;font-size:17px;margin-bottom:3px}.error-state{color:#c58595}.skeleton-stack:empty::before,.skeleton-stack:empty::after{content:"";display:block;height:72px;border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.065),rgba(255,255,255,.03));background-size:220% 100%;animation:shimmer 1.2s linear infinite}.skeleton-stack:empty::after{margin-top:8px;opacity:.7}@keyframes shimmer{to{background-position:-120% 0}}

@media (min-width:650px){main{padding-left:23px;padding-right:23px}.topbar{padding-left:24px;padding-right:24px}.hero-card{padding:25px}.insight-grid{grid-template-columns:repeat(4,1fr);gap:11px}.army-list,.ranking-list{display:grid;grid-template-columns:1fr 1fr}.composition-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:365px){.hero-metrics{grid-template-columns:1fr 1fr;row-gap:12px}.hero-metrics>div:nth-child(2){border-right:0}.hero-metrics>div:nth-child(3){padding-left:0}.hero-ring{width:90px;height:90px;flex-basis:90px}.hero-number{font-size:52px}.insight-grid{grid-template-columns:1fr}.insight-card{min-height:82px}.dialog-stats.four{grid-template-columns:1fr 1fr}.composition-grid{grid-template-columns:1fr}}
@media (display-mode:standalone){body{user-select:none;-webkit-user-select:none}.install-card{display:none}.topbar{padding-top:calc(10px + var(--safe-top))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}


/* v0.3.0 · Top 1000 + performance ranking */
.metric-caption{display:block;margin-top:4px;color:#687291;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.performance-head{margin-top:34px}.performance-note{margin:-5px 3px 11px;line-height:1.5}.performance-segmented{margin-bottom:10px}.performance-list{display:flex;flex-direction:column;gap:8px}
.performance-row{position:relative;border:1px solid var(--line);background:linear-gradient(155deg,rgba(18,23,44,.94),rgba(9,13,27,.91));border-radius:20px;padding:13px 10px;display:grid;grid-template-columns:34px 1fr auto 31px;gap:9px;align-items:center;cursor:pointer;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.performance-row::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,rgba(139,124,255,.8),rgba(76,217,255,.3));opacity:.65}.performance-rank{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(113,110,255,.09);color:#8f99ba;font-size:9px;font-weight:850}.performance-rank.podium{color:#ffdc84;background:linear-gradient(145deg,rgba(255,211,109,.18),rgba(145,100,45,.06))}.performance-main{min-width:0}.performance-title{font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.performance-sub{margin-top:3px;color:#697394;font-size:7.8px}.star-distribution{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.star-distribution span{border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.025);border-radius:999px;padding:3px 5px;color:#6e7898;font-size:6.8px}.star-distribution b{color:#929bb9}.star-distribution .s3{border-color:rgba(88,228,178,.13);background:rgba(88,228,178,.045);color:#6dddb3}.star-distribution .s3 b{color:#8ae9c6}.performance-foot{display:flex;gap:7px;margin-top:6px;color:#7781a1;font-size:7.5px}.performance-score{text-align:right;min-width:57px}.performance-score strong{display:block;font-size:12.5px;letter-spacing:-.03em}.performance-score span{display:block;margin-top:3px;color:#687291;font-size:6.8px}.copy-army-mini{width:29px;height:29px;border-radius:10px;border:1px solid rgba(139,124,255,.14);background:rgba(111,104,255,.07);display:grid;place-items:center;color:#9c98ff}.copy-army-mini svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.copy-army-mini:active{transform:scale(.94)}
.ranking-more{min-height:45px;border:1px solid rgba(139,124,255,.14);border-radius:14px;background:linear-gradient(145deg,rgba(108,103,255,.10),rgba(157,93,255,.04));color:#b8b9ee;font-size:9px;font-weight:800}.ranking-more span{display:block;color:#697394;font-size:7.5px;margin-top:2px}
.result-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-7px 0 17px}.result-breakdown>div{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);padding:9px 5px;text-align:center}.result-breakdown strong{display:block;font-size:11px}.result-breakdown span{display:block;margin-top:3px;color:#687291;font-size:7px}.result-breakdown .s3{border-color:rgba(88,228,178,.13);background:rgba(88,228,178,.04)}.result-breakdown .s3 strong{color:#71e0b8}
.dialog-actions.three-actions{grid-template-columns:1.35fr 1fr 1fr}.three-actions .primary-action,.three-actions .secondary-action{font-size:8px;padding:0 5px}
@media (min-width:650px){.performance-list{display:grid;grid-template-columns:1fr 1fr}.ranking-more{grid-column:1/-1}}
@media (max-width:365px){.segment{font-size:7.4px}.performance-row{grid-template-columns:31px 1fr auto}.copy-army-mini{grid-column:3;grid-row:2}.performance-score{grid-column:3;grid-row:1}.dialog-actions.three-actions{grid-template-columns:1fr 1fr}.three-actions .primary-action{grid-column:1/-1}}


/* v0.4.0 · Radar Fuori Meta */
.offmeta-head{margin-top:36px}.offmeta-list{display:flex;flex-direction:column;gap:10px;margin-bottom:5px}.offmeta-card{position:relative;overflow:hidden;border:1px solid rgba(88,228,178,.12);border-radius:22px;padding:15px;background:linear-gradient(145deg,rgba(14,32,38,.88),rgba(12,15,31,.95) 50%,rgba(28,18,48,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 55px rgba(0,0,0,.22)}.offmeta-glow{position:absolute;width:150px;height:150px;right:-55px;top:-75px;border-radius:50%;background:radial-gradient(circle,rgba(88,228,178,.16),rgba(76,217,255,.05) 42%,transparent 72%);pointer-events:none}.offmeta-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}.rare-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(88,228,178,.16);background:rgba(88,228,178,.06);color:#72dfba;font-size:6.8px;font-weight:900;letter-spacing:.13em}.offmeta-score{font-size:12px;font-weight:850;color:#d7fff1}.offmeta-score small{font-size:6.5px;color:#668b85;text-transform:uppercase;letter-spacing:.08em}.offmeta-title{position:relative;margin-top:13px;font-size:15px;font-weight:850;letter-spacing:-.025em}.offmeta-reason{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;font-size:8px}.offmeta-reason strong{font-size:12px;color:#7be4bc}.positive-delta{border-radius:999px;padding:4px 7px;background:rgba(88,228,178,.06);color:#7acfb0}.offmeta-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}.offmeta-stats>div{border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.022);padding:8px 5px;text-align:center}.offmeta-stats span{display:block;color:#64708e;font-size:6.6px}.offmeta-stats strong{display:block;margin-top:4px;font-size:10px}.offmeta-confidence{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.025);color:#687793;font-size:7.2px}.offmeta-confidence b{color:#91a7a2;font-size:8px}.offmeta-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.offmeta-actions button{min-height:36px;border-radius:11px;font-size:8px;font-weight:800}.offmeta-open{border:1px solid rgba(139,124,255,.13);background:rgba(139,124,255,.06);color:#aaa5ff}.offmeta-copy{border:1px solid rgba(88,228,178,.13);background:rgba(88,228,178,.05);color:#7eddbb}.offmeta-empty{border-color:rgba(88,228,178,.1)}
@media (min-width:650px){.offmeta-list{display:grid;grid-template-columns:1fr 1fr}}
.chart-label.single{text-anchor:middle}.performance-preview{margin-top:4px;color:#7f89aa;font-size:7.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-opponent{display:block;border:0;background:transparent;padding:0;margin-top:5px;color:#7f89aa;font-size:7.5px;text-align:left;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-opponent:active{color:#a9a4ff}.unit-card.unknown-unit{border-color:rgba(255,211,109,.16);background:rgba(255,211,109,.035)}.unit-card.unknown-unit .unit-avatar{color:#ffd87f}.unit-card.unknown-unit strong{color:#d8c89c}