:root{--w:min(100vw,calc(100vh*800/1765));--u:calc(var(--w)/800);
--navy:#0c2250;--ink:#0a1a40;--edge:#2a62c4;--gold:#ffc83a;--gold2:#ff9d12;--cy:#6fe3ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#06122e;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
body{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:900;color:#fff}
button{font:inherit;color:inherit;border:0;padding:0;margin:0;background:none;cursor:pointer}
b,em,i,span{font-style:normal}
b,em,i{font-weight:900}
img{display:block;-webkit-user-drag:none;pointer-events:none}
svg{display:block}
#phone{position:relative;height:100vh;width:var(--w);margin:0 auto;overflow:hidden;background:linear-gradient(#3f9be8,#a8dc7a)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;display:none;pointer-events:none}
.screen.on{display:block}
.screen>*{position:absolute;pointer-events:auto}
.t{-webkit-text-stroke:calc(var(--u)*8) var(--ink);paint-order:stroke fill;text-shadow:0 calc(var(--u)*5) 0 var(--ink)}
.t2{-webkit-text-stroke:calc(var(--u)*6) var(--ink);paint-order:stroke fill;text-shadow:0 calc(var(--u)*3) 0 var(--ink)}
.t3{-webkit-text-stroke:calc(var(--u)*4) var(--ink);paint-order:stroke fill}
.panelbg{background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4,0 calc(var(--u)*4) 0 rgba(4,12,40,.45)}
.chip{display:flex;align-items:center;border-radius:calc(var(--u)*24);height:calc(var(--u)*66);background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4,0 calc(var(--u)*4) 0 rgba(4,12,40,.45);padding:0 calc(var(--u)*8) 0 calc(var(--u)*8);gap:calc(var(--u)*10)}
.chip>img{width:calc(var(--u)*56);height:calc(var(--u)*56);object-fit:contain}
.chip>b{flex:1;text-align:center;font-size:calc(var(--u)*38);line-height:1}
.plus{width:calc(var(--u)*46);height:calc(var(--u)*46);border-radius:calc(var(--u)*12);background:linear-gradient(#52b6ff,#1a78e8);border:calc(var(--u)*3) solid #07163a;display:flex;align-items:center;justify-content:center;flex:none}
.plus svg{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.sq{display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*22);background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4,0 calc(var(--u)*4) 0 rgba(4,12,40,.45)}
.sq svg{width:calc(var(--u)*46);height:calc(var(--u)*46)}
.dot{position:absolute;right:calc(var(--u)*-4);top:calc(var(--u)*-4);width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;background:#ff3b3b;border:calc(var(--u)*3) solid #fff}
.gold{background:linear-gradient(#ffd94a 0,#ffc02a 45%,#ff9d12 100%);border:calc(var(--u)*5) solid #8a4a06;box-shadow:inset 0 calc(var(--u)*7) 0 #fff0a0,inset 0 calc(var(--u)*-8) 0 #e9820a,0 calc(var(--u)*7) 0 #7a3d05}
.gold:active{transform:translateY(calc(var(--u)*4))}
.gold:disabled{filter:grayscale(1) brightness(.7);cursor:default}

/* LOADING */
#s-loading{background:linear-gradient(#2f7fd8,#0a2a66);pointer-events:auto}
.logo-big{left:calc(var(--u)*125);top:calc(var(--u)*500);width:calc(var(--u)*550);height:calc(var(--u)*360);object-fit:contain}
.loadbar{left:calc(var(--u)*150);top:calc(var(--u)*900);width:calc(var(--u)*500);height:calc(var(--u)*30);border-radius:calc(var(--u)*15);background:#07163a;border:calc(var(--u)*3) solid #2a62c4;overflow:hidden}
#loadFill{display:block;height:100%;width:0;background:linear-gradient(#ffe27a,#ff9d12)}
.loadtxt{left:0;width:100%;top:calc(var(--u)*950);text-align:center;font-size:calc(var(--u)*30)}
#loadMsg{color:#fff;font-size:calc(var(--u)*34);top:calc(var(--u)*900)}

/* LOBBY */
#c-coins{left:calc(var(--u)*15);top:calc(var(--u)*72);width:calc(var(--u)*215)}
#c-gems{left:calc(var(--u)*595);top:calc(var(--u)*72);width:calc(var(--u)*190)}
#lobby-logo,#play-logo{pointer-events:none;object-fit:contain}
#lobby-logo{left:calc(var(--u)*205);top:calc(var(--u)*52);width:calc(var(--u)*390);height:calc(var(--u)*260)}
#quests{left:calc(var(--u)*20);top:calc(var(--u)*190);width:calc(var(--u)*105);height:calc(var(--u)*107);flex-direction:column;gap:calc(var(--u)*2);padding-top:calc(var(--u)*4)}
#quests img{width:calc(var(--u)*60);height:calc(var(--u)*62);object-fit:contain}
#quests b{font-size:calc(var(--u)*21);line-height:1}
#settings{left:calc(var(--u)*708);top:calc(var(--u)*162);width:calc(var(--u)*77);height:calc(var(--u)*73)}
#mail{left:calc(var(--u)*708);top:calc(var(--u)*250);width:calc(var(--u)*77);height:calc(var(--u)*70)}
#cards{left:0;bottom:calc(var(--u)*400);width:100%;height:calc(var(--u)*300);pointer-events:none}
#cards .card{pointer-events:auto;height:calc(var(--u)*300)}
#cards .card:nth-child(1){left:calc(var(--u)*20);width:calc(var(--u)*242)}
#cards .card:nth-child(2){left:calc(var(--u)*278);width:calc(var(--u)*244)}
#cards .card:nth-child(3){left:calc(var(--u)*540);width:calc(var(--u)*242)}
#team{left:calc(var(--u)*18);bottom:calc(var(--u)*230);width:calc(var(--u)*130);height:calc(var(--u)*130);flex-direction:column;gap:calc(var(--u)*2)}
#shop{left:calc(var(--u)*655);bottom:calc(var(--u)*230);width:calc(var(--u)*127);height:calc(var(--u)*130);flex-direction:column;gap:calc(var(--u)*2)}
#team img,#shop img{width:calc(var(--u)*80);height:calc(var(--u)*80);object-fit:contain}
#team b,#shop b{font-size:calc(var(--u)*26);line-height:1}
#explore{left:calc(var(--u)*165);bottom:calc(var(--u)*217);width:calc(var(--u)*470);height:calc(var(--u)*158);border-radius:calc(var(--u)*40);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*16)}
#explore img{width:calc(var(--u)*130);height:calc(var(--u)*120);object-fit:contain}
#explore b{font-size:calc(var(--u)*56);line-height:1;-webkit-text-stroke:calc(var(--u)*8) #c06a08;paint-order:stroke fill;color:#fff;text-shadow:0 calc(var(--u)*5) 0 #b45f06;letter-spacing:calc(var(--u)*1)}
#explore svg{width:calc(var(--u)*40);height:calc(var(--u)*40)}
#tabs{left:0;right:0;bottom:0;height:calc(var(--u)*210);pointer-events:auto;background:linear-gradient(#10306a,#081a42);border-top:calc(var(--u)*4) solid #07163a;border-radius:calc(var(--u)*46) calc(var(--u)*46) 0 0;box-shadow:inset 0 calc(var(--u)*3) 0 #2f6ad0;z-index:5}
.tab{position:absolute;top:calc(var(--u)*10);height:calc(var(--u)*135);border-radius:calc(var(--u)*24);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);background:rgba(10,36,92,.7);border:calc(var(--u)*3) solid #0a2260}
.tab img{width:calc(var(--u)*72);height:calc(var(--u)*72);object-fit:contain;opacity:.9}
.tab b{font-size:calc(var(--u)*25);line-height:1;color:#b9c8ea}
.tab.on{background:linear-gradient(#154d9e,#0c3472);border-color:#5fe2ff;box-shadow:0 0 calc(var(--u)*22) rgba(95,226,255,.6),inset 0 0 0 calc(var(--u)*2) #2aa8e8}
.tab.on b{color:#fff}.tab.on img{opacity:1}
#tab-home{left:calc(var(--u)*15);width:calc(var(--u)*145)}#tab-monsters{left:calc(var(--u)*170);width:calc(var(--u)*158)}#tab-hatch{left:calc(var(--u)*334);width:calc(var(--u)*136)}#tab-collection{left:calc(var(--u)*475);width:calc(var(--u)*163)}#tab-events{left:calc(var(--u)*642);width:calc(var(--u)*148)}

/* cards */
.card{position:absolute;overflow:hidden;border-radius:calc(var(--u)*22);border:calc(var(--u)*4) solid #0a1a40;background:#0a1a40;box-shadow:inset 0 0 0 calc(var(--u)*3) var(--cc,#2a62c4)}
.card .art{position:absolute;left:0;top:0;width:100%;height:80%;object-fit:cover;object-position:50% 20%}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*150);background:linear-gradient(transparent,#0a2050 62%)}
.card>*:not(.art){z-index:2}
.card[data-creature=ember]{--cc:#ff8a3a;background:#7a2a08}
.card[data-creature=pebble]{--cc:#3a9cf0;background:#0a2a6a}
.card[data-creature=sprout]{--cc:#5ad04a;background:#1a5a12}
.card .badge{position:absolute;left:calc(var(--u)*9);top:calc(var(--u)*9);width:calc(var(--u)*62);height:calc(var(--u)*62);border-radius:50%;background:rgba(10,26,64,.85);border:calc(var(--u)*3) solid var(--cc);display:flex;align-items:center;justify-content:center}
.card .badge svg{width:calc(var(--u)*36);height:calc(var(--u)*36)}
.card .nm{position:absolute;left:0;right:0;bottom:calc(var(--u)*90);text-align:center;font-size:calc(var(--u)*27);line-height:calc(var(--u)*32);-webkit-text-stroke:calc(var(--u)*5) var(--ink);paint-order:stroke fill}
.card .lv{position:absolute;left:0;right:0;bottom:calc(var(--u)*65);text-align:center;font-size:calc(var(--u)*21);line-height:calc(var(--u)*24);color:#8fd0ff;-webkit-text-stroke:calc(var(--u)*4) var(--ink);paint-order:stroke fill}
.card .hpbar{position:absolute;left:calc(var(--u)*16);right:calc(var(--u)*16);bottom:calc(var(--u)*42);height:calc(var(--u)*18);border-radius:calc(var(--u)*9);background:#06122e;border:calc(var(--u)*2) solid #06122e;overflow:hidden}
.card .hpbar span{display:block;height:100%;width:100%;border-radius:calc(var(--u)*8);background:linear-gradient(#6bf04a,#2fb81f)}
.card .hpt{position:absolute;left:0;right:0;bottom:calc(var(--u)*12);text-align:center;font-size:calc(var(--u)*21);line-height:calc(var(--u)*26);-webkit-text-stroke:calc(var(--u)*4) var(--ink);paint-order:stroke fill}
.card.down{filter:grayscale(1) brightness(.6)}
.card.ready{box-shadow:inset 0 0 0 calc(var(--u)*3) var(--cc),0 0 calc(var(--u)*18) var(--cc)}
.card.cool .art{filter:saturate(.6)}
#phone.guarding #squad .card{box-shadow:inset 0 0 0 calc(var(--u)*4) var(--cy),0 0 calc(var(--u)*26) rgba(111,227,255,.8)}

/* lobby windows */
.lw{display:none;left:calc(var(--u)*14);right:calc(var(--u)*14);bottom:calc(var(--u)*207);padding:calc(var(--u)*24) calc(var(--u)*26) calc(var(--u)*26);border-radius:calc(var(--u)*40);background:linear-gradient(rgba(14,44,104,.97),rgba(7,22,60,.98));border:calc(var(--u)*5) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*-8) calc(var(--u)*30) rgba(0,0,0,.35);overflow:hidden;flex-direction:column;gap:calc(var(--u)*16);z-index:4}
.lw.open{display:flex}
.lw>h2{margin:0;text-align:center;font-size:calc(var(--u)*58);line-height:1;flex:none}
.lw .close{position:absolute;right:calc(var(--u)*16);top:calc(var(--u)*16);width:calc(var(--u)*62);height:calc(var(--u)*62);border-radius:calc(var(--u)*18);background:linear-gradient(#ff7a5a,#d8341a);border:calc(var(--u)*4) solid #5a1408;display:flex;align-items:center;justify-content:center;box-shadow:0 calc(var(--u)*4) 0 #5a1408}
.lw .close svg{width:calc(var(--u)*34);height:calc(var(--u)*34)}
#biomes{height:calc(var(--u)*560)}#monsters{height:calc(var(--u)*930)}#hatch{height:calc(var(--u)*590)}#collection{height:calc(var(--u)*880)}#soon{height:calc(var(--u)*400)}
.biome{position:relative;height:calc(var(--u)*190);border-radius:calc(var(--u)*28);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #3a8cf0,0 calc(var(--u)*5) 0 rgba(4,12,40,.4);text-align:left;display:flex;align-items:center;padding:0 calc(var(--u)*30);gap:calc(var(--u)*26)}
.biome[data-chapter="1"]{background:linear-gradient(100deg,#2a8a2a,#124a1a)}
.biome[data-chapter="2"]{background:linear-gradient(100deg,#6aa8f0,#1c4a96)}
.biome .bn{font-size:calc(var(--u)*46);line-height:1.1}
.biome .bi{font-size:calc(var(--u)*28);color:#e4f2ff;font-weight:800;line-height:1.3;-webkit-text-stroke:calc(var(--u)*4) var(--ink);paint-order:stroke fill}
.biome img{width:calc(var(--u)*120);height:calc(var(--u)*120);object-fit:contain}
.biome:disabled{filter:grayscale(.9) brightness(.65);cursor:default}
.biome .go{margin-left:auto;font-size:calc(var(--u)*40);color:var(--gold)}
.mrow{position:relative;height:calc(var(--u)*262);border-radius:calc(var(--u)*28);display:flex;gap:calc(var(--u)*22);align-items:center;padding:calc(var(--u)*16);border:calc(var(--u)*4) solid #07163a;background:linear-gradient(#18458f,#0b2352);box-shadow:inset 0 0 0 calc(var(--u)*3) var(--cc,#2a62c4)}
.mrow[data-creature=ember]{--cc:#ff8a3a}.mrow[data-creature=pebble]{--cc:#3a9cf0}.mrow[data-creature=sprout]{--cc:#5ad04a}
.mrow .pic{width:calc(var(--u)*228);height:calc(var(--u)*228);border-radius:calc(var(--u)*20);object-fit:cover;border:calc(var(--u)*3) solid #07163a;flex:none}
.mrow .info{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*5);min-width:0}
.mrow .mn{font-size:calc(var(--u)*40);line-height:1.1}
.mrow .ml{font-size:calc(var(--u)*27);color:#8fd0ff;line-height:1.1}
.mrow .ms{font-size:calc(var(--u)*25);font-weight:800;color:#e4f0ff;line-height:1.2}
.mrow .ma{font-size:calc(var(--u)*22);font-weight:800;color:#ffd88a;line-height:1.2}
.levelup{align-self:flex-end;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*10);height:calc(var(--u)*72);padding:0 calc(var(--u)*22);border-radius:calc(var(--u)*22);margin-top:calc(var(--u)*4);font-size:calc(var(--u)*30)}
.levelup img{width:calc(var(--u)*42);height:calc(var(--u)*42);object-fit:contain}
.levelup b{font-size:calc(var(--u)*30);line-height:1;-webkit-text-stroke:calc(var(--u)*5) #c06a08;paint-order:stroke fill;color:#fff;text-shadow:0 calc(var(--u)*3) 0 #b45f06}
.hwrap{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*14)}
.hwrap .eggbig{width:calc(var(--u)*170);height:calc(var(--u)*190);object-fit:contain;filter:drop-shadow(0 calc(var(--u)*6) 0 rgba(0,0,0,.3))}
.hwrap #egg-steps{font-size:calc(var(--u)*62);line-height:1}
.hwrap .rdy{font-size:calc(var(--u)*32);color:#d3e6ff}
.hwrap .rdy b{color:var(--gold);font-size:calc(var(--u)*38)}
#hatch-btn{width:calc(var(--u)*420);height:calc(var(--u)*110);border-radius:calc(var(--u)*30);display:flex;align-items:center;justify-content:center}
#hatch-btn b{font-size:calc(var(--u)*54);line-height:1;-webkit-text-stroke:calc(var(--u)*8) #c06a08;paint-order:stroke fill;color:#fff;text-shadow:0 calc(var(--u)*5) 0 #b45f06}
#hatch-result{font-size:calc(var(--u)*34);color:var(--cy);text-align:center;min-height:calc(var(--u)*42);line-height:1.2}
.cgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--u)*18);flex:1;min-height:0}
.ctile{position:relative;border-radius:calc(var(--u)*24);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #3a8cf0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*10) calc(var(--u)*6) calc(var(--u)*8);overflow:hidden}
.ctile.wild{box-shadow:inset 0 0 0 calc(var(--u)*3) #8a5ae0}
.ctile img{width:calc(var(--u)*190);height:calc(var(--u)*190);object-fit:contain}
.ctile b{font-size:calc(var(--u)*28);line-height:1.1;margin-top:calc(var(--u)*2)}
.ctile:not(.seen) img{filter:brightness(0) opacity(.75)}
.ctile:not(.seen) b{color:#9fb0d8}
.soonrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*20);flex:1}
.soonrow img{width:calc(var(--u)*150);height:calc(var(--u)*150);object-fit:contain}
.soonrow b{font-size:calc(var(--u)*60)}

/* BATTLE */
#c-run{left:calc(var(--u)*15);top:calc(var(--u)*72);width:calc(var(--u)*213)}
#play-logo{left:calc(var(--u)*222);top:calc(var(--u)*40);width:calc(var(--u)*356);height:calc(var(--u)*237)}
#pause{left:calc(var(--u)*708);top:calc(var(--u)*70);width:calc(var(--u)*79);height:calc(var(--u)*72)}
.in-app #pause{left:calc(var(--u)*620)}
#stage{left:calc(var(--u)*578);top:calc(var(--u)*158);width:calc(var(--u)*209);height:calc(var(--u)*54);border-radius:calc(var(--u)*27);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*10);background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4}
#stage svg{width:calc(var(--u)*26);height:calc(var(--u)*30)}
#stage b{font-size:calc(var(--u)*25);line-height:1;white-space:nowrap}
#egg{left:calc(var(--u)*585);top:calc(var(--u)*1137);width:calc(var(--u)*202);height:calc(var(--u)*95);border-radius:calc(var(--u)*24);display:flex;gap:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*12);align-items:center}
#egg img{width:calc(var(--u)*58);height:calc(var(--u)*68);object-fit:contain}
#egg .ec{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6)}
#egg .eh{font-size:calc(var(--u)*20);line-height:1;color:#dbe9ff;white-space:nowrap}
#egg .eb{width:100%;height:calc(var(--u)*16);border-radius:calc(var(--u)*8);background:#06122e;overflow:hidden;border:calc(var(--u)*2) solid #06122e}
#egg .eb span{display:block;height:100%;width:0;background:linear-gradient(#6fe3ff,#1aa8e8);border-radius:calc(var(--u)*8)}
#egg b{font-size:calc(var(--u)*26);line-height:1}
#squad{left:0;bottom:calc(var(--u)*190);width:100%;height:calc(var(--u)*325);pointer-events:none}
#squad .card{height:calc(var(--u)*325);pointer-events:auto;touch-action:none}
#squad .card:nth-child(1){left:calc(var(--u)*10);width:calc(var(--u)*252)}
#squad .card:nth-child(2){left:calc(var(--u)*278);width:calc(var(--u)*244)}
#squad .card:nth-child(3){left:calc(var(--u)*538);width:calc(var(--u)*252)}
#auto{left:calc(var(--u)*15);bottom:calc(var(--u)*73);width:calc(var(--u)*253);height:calc(var(--u)*87);border-radius:calc(var(--u)*30);display:flex;align-items:center;gap:calc(var(--u)*12);padding:0 calc(var(--u)*16);background:linear-gradient(#0f2e6a,#0a1f4d);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4}
#auto[aria-pressed=true]{border-color:#07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #5fe2ff,0 0 calc(var(--u)*22) rgba(95,226,255,.6)}
#auto svg{width:calc(var(--u)*40);height:calc(var(--u)*40);flex:none}
#auto b{font-size:calc(var(--u)*30);line-height:1}
.sw{margin-left:auto;width:calc(var(--u)*82);height:calc(var(--u)*46);border-radius:calc(var(--u)*23);background:#3a4a6c;position:relative;flex:none;border:calc(var(--u)*3) solid #07163a}
.sw::after{content:"";position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:#d8e4f8;transition:left .12s}
#auto[aria-pressed=true] .sw{background:linear-gradient(#52d6ff,#1aa8e8)}
#auto[aria-pressed=true] .sw::after{left:calc(var(--u)*39);background:#fff}
.ab{bottom:calc(var(--u)*68);width:calc(var(--u)*98);height:calc(var(--u)*97);border-radius:calc(var(--u)*22);display:flex;align-items:center;justify-content:center;background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*4) 0 rgba(4,12,40,.45);touch-action:none}
.ab img{width:calc(var(--u)*70);height:calc(var(--u)*70);object-fit:contain}
#ability-ember{left:calc(var(--u)*290)}#ability-pebble{left:calc(var(--u)*400)}#ability-sprout{left:calc(var(--u)*510)}
.ab:not(.cooling):not(.dead){box-shadow:inset 0 0 0 calc(var(--u)*3) #5fb8ff,0 0 calc(var(--u)*14) rgba(95,184,255,.55),0 calc(var(--u)*4) 0 rgba(4,12,40,.45)}
.ab.cooling img,.ab.dead img{filter:grayscale(1) brightness(.6)}
.ab.dead{opacity:.5}
.ab em{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:calc(var(--u)*40);line-height:1;-webkit-text-stroke:calc(var(--u)*6) var(--ink);paint-order:stroke fill}
.ab.cooling em{display:flex}
.ab:active{transform:scale(.94)}
#rush{left:calc(var(--u)*630);bottom:calc(var(--u)*35);width:calc(var(--u)*150);height:calc(var(--u)*150);border-radius:50%;background:conic-gradient(#ffc83a calc(var(--p,0)*1%),#2a3a5c 0);padding:calc(var(--u)*8);border:calc(var(--u)*4) solid #07163a;box-shadow:0 calc(var(--u)*5) 0 rgba(4,12,40,.5);touch-action:none}
#rush .core{display:flex;width:100%;height:100%;border-radius:50%;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#35508a,#122a5e);border:calc(var(--u)*3) solid #07163a}
#rush img{width:calc(var(--u)*94);height:calc(var(--u)*94);object-fit:contain;filter:grayscale(.7) brightness(.8)}
#rush.ready{background:radial-gradient(circle at 50% 30%,#ffe27a,#ffb41a 70%);border-color:#7a3d05;animation:glow 1s ease-in-out infinite alternate}
#rush.ready .core{background:radial-gradient(circle at 50% 30%,#ffe27a,#ffa812 75%);border-color:#ffd24a}
#rush.ready img{filter:none}
#rush:active{transform:scale(.94)}
@keyframes glow{from{box-shadow:0 calc(var(--u)*5) 0 rgba(4,12,40,.5),0 0 calc(var(--u)*18) rgba(255,200,58,.6)}to{box-shadow:0 calc(var(--u)*5) 0 rgba(4,12,40,.5),0 0 calc(var(--u)*44) rgba(255,214,80,.95)}}
#bars,#pops{inset:0;pointer-events:none!important}
#bars>*,#pops>*{position:absolute}
.bar{width:calc(var(--u)*112);height:calc(var(--u)*14);border-radius:calc(var(--u)*7);background:#2a0a0a;border:calc(var(--u)*2) solid #130404;overflow:hidden;box-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.35)}
.bar span{display:block;height:100%;border-radius:calc(var(--u)*6)}
.bar.foe span{background:linear-gradient(#ff6a5a,#d82a1a)}
.bar.team{background:#0a2a0a;border-color:#041204}
.bar.team span{background:linear-gradient(#7af04a,#2fb81f)}
.pop{font-size:calc(var(--u)*40);line-height:1;transform:translate(-50%,-50%);white-space:nowrap;-webkit-text-stroke:calc(var(--u)*7) var(--ink);paint-order:stroke fill;animation:rise .9s ease-out forwards}
.pop.crit{font-size:calc(var(--u)*58);color:#ffd23a}
.pop.heal{color:#7af04a}.pop.block{color:#7fe8ff;font-size:calc(var(--u)*34)}.pop.coins{color:var(--gold)}.pop.hit{color:#fff}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
#banner{left:0;width:100%;top:calc(var(--u)*620);text-align:center;font-size:calc(var(--u)*120);line-height:1;color:#ffe27a;pointer-events:none!important;display:none;white-space:nowrap}
#banner.on{display:block;animation:ban .5s ease-out}
@keyframes ban{from{transform:scale(1.6);opacity:0}40%{opacity:1}to{transform:scale(1)}}
#hint{left:calc(var(--u)*10);width:calc(var(--u)*560);top:calc(var(--u)*1190);height:calc(var(--u)*44);display:none;align-items:center;justify-content:center;font-size:calc(var(--u)*26);line-height:1;pointer-events:none!important;text-shadow:0 calc(var(--u)*3) 0 rgba(0,0,0,.5)}
#hint.on{display:flex}

/* RESULT */
#rbanner{left:calc(var(--u)*20);top:calc(var(--u)*150);width:calc(var(--u)*760);height:calc(var(--u)*280);object-fit:contain;pointer-events:none}
#rpanel{left:calc(var(--u)*60);bottom:calc(var(--u)*435);width:calc(var(--u)*680);height:calc(var(--u)*290);border-radius:calc(var(--u)*34);background:linear-gradient(#10316f,#0a2050);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*6) 0 rgba(4,12,40,.45);padding:calc(var(--u)*16) calc(var(--u)*30)}
#outcome{text-align:center;font-size:calc(var(--u)*48);line-height:calc(var(--u)*62);margin-bottom:calc(var(--u)*4)}
#earned{display:flex;flex-direction:column;gap:calc(var(--u)*10)}
.erow{display:flex;align-items:center;gap:calc(var(--u)*20);height:calc(var(--u)*62);border-radius:calc(var(--u)*20);background:#0a1d4a;border:calc(var(--u)*3) solid #1f4a99;padding:0 calc(var(--u)*24)}
.erow img{width:calc(var(--u)*50);height:calc(var(--u)*50);object-fit:contain}
.erow b{font-size:calc(var(--u)*38);line-height:1;min-width:calc(var(--u)*120)}
.erow span{font-size:calc(var(--u)*28);color:#c5d6f5;font-weight:800}
.erow.zero{opacity:.45}
#again{left:calc(var(--u)*110);bottom:calc(var(--u)*265);width:calc(var(--u)*580);height:calc(var(--u)*130);border-radius:calc(var(--u)*34);display:flex;align-items:center;justify-content:center}
#again b{font-size:calc(var(--u)*54);line-height:1;-webkit-text-stroke:calc(var(--u)*8) #c06a08;paint-order:stroke fill;color:#fff;text-shadow:0 calc(var(--u)*5) 0 #b45f06}
#lowrow{left:calc(var(--u)*60);bottom:calc(var(--u)*125);width:calc(var(--u)*680);height:calc(var(--u)*110);display:flex;gap:calc(var(--u)*20);justify-content:center;pointer-events:none}
#lowrow>button{pointer-events:auto;flex:1;max-width:calc(var(--u)*330);height:100%;border-radius:calc(var(--u)*28);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*12);border:calc(var(--u)*5) solid #07163a}
#revive{background:linear-gradient(#18458f,#0b2352);box-shadow:inset 0 0 0 calc(var(--u)*4) var(--cy),0 0 calc(var(--u)*18) rgba(111,227,255,.5),0 calc(var(--u)*6) 0 rgba(4,12,40,.5)}
#home{background:linear-gradient(#18458f,#0b2352);box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*6) 0 rgba(4,12,40,.5)}
#lowrow b{font-size:calc(var(--u)*42);line-height:1}
#lowrow img{width:calc(var(--u)*50);height:calc(var(--u)*50);object-fit:contain}
#lowrow svg{width:calc(var(--u)*50);height:calc(var(--u)*50)}
#revive small{font-size:calc(var(--u)*30);display:flex;align-items:center;gap:calc(var(--u)*6)}

/* modal */
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,10,34,.62);z-index:20}
.modal.open{display:flex}
.win{width:calc(var(--u)*600);padding:calc(var(--u)*34) calc(var(--u)*40) calc(var(--u)*40);border-radius:calc(var(--u)*36);background:linear-gradient(#143a7c,#0a2050);border:calc(var(--u)*5) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4;display:flex;flex-direction:column;gap:calc(var(--u)*22)}
.win h2{margin:0;text-align:center;font-size:calc(var(--u)*60)}
.win label{display:flex;flex-direction:column;gap:calc(var(--u)*10);font-size:calc(var(--u)*32)}
.win input[type=range]{width:100%;height:calc(var(--u)*44);accent-color:#ffc83a}
.win button{height:calc(var(--u)*100);border-radius:calc(var(--u)*26);border:calc(var(--u)*5) solid #07163a}
.win button b{font-size:calc(var(--u)*44)}
.win .gold2{background:linear-gradient(#ffd94a,#ff9d12);border-color:#7a3d05}
.win .blue{background:linear-gradient(#2a7ae0,#10408f)}
#panel:not(.inmatch) #quit{display:none}
#s-lobby,#s-play,#s-result,#s-loading{z-index:1}