:root{--w:min(100vw,calc(100vh*800/1780));--u:calc(var(--w)/800);
--navy:#0c2250;--navy2:#143a7c;--edge:#2a62c4;--ink:#0a1a40;--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{font-style:normal;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(#2f8fe6,#bfe3ff)}
#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}
.chip,.pill{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)*70)}
.chip b{font-size:calc(var(--u)*40);line-height:1}
.chip img{width:calc(var(--u)*62);height:calc(var(--u)*62);object-fit:contain}
.pill{display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*30)}

/* LOADING */
#s-loading{background:linear-gradient(#1b66c4,#0a2a66)}
.logo-big{left:calc(var(--u)*125);top:calc(var(--u)*520);width:calc(var(--u)*550);height:calc(var(--u)*280);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)}

/* LOBBY top */
#c-trophies{left:calc(var(--u)*22);top:calc(var(--u)*112);width:calc(var(--u)*210);padding-left:calc(var(--u)*12);gap:calc(var(--u)*22)}
#c-coins{left:calc(var(--u)*570);top:calc(var(--u)*112);width:calc(var(--u)*146);padding-left:calc(var(--u)*10);gap:calc(var(--u)*10)}
#c-coins b{font-size:calc(var(--u)*36)}
#settings{left:calc(var(--u)*724);top:calc(var(--u)*114);width:calc(var(--u)*66);height:calc(var(--u)*66);justify-content:center;padding:0;border-radius:calc(var(--u)*20)}
#settings svg{width:calc(var(--u)*46);height:calc(var(--u)*46)}
.logo{left:calc(var(--u)*240);top:calc(var(--u)*88);width:calc(var(--u)*320);height:calc(var(--u)*140);object-fit:contain}

/* LOBBY bottom (H 1795) */
#plate{left:calc(var(--u)*228);bottom:calc(var(--u)*820);width:calc(var(--u)*345);height:calc(var(--u)*68);display:flex;align-items:flex-start;justify-content:center;padding-top:calc(var(--u)*8);border-radius:calc(var(--u)*26);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4}
#plate b{font-size:calc(var(--u)*43);line-height:1.1;letter-spacing:calc(var(--u)*1)}
#lvl{left:calc(var(--u)*312);bottom:calc(var(--u)*788);width:calc(var(--u)*176);height:calc(var(--u)*42);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*18);background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4}
#lvl b{font-size:calc(var(--u)*27);color:#7fe8e0;line-height:1}
.abil{bottom:calc(var(--u)*615);width:calc(var(--u)*146);height:calc(var(--u)*158);border-radius:calc(var(--u)*26);border:calc(var(--u)*4) solid #0a2a66;box-shadow:inset 0 0 0 calc(var(--u)*3) #3a8cf0,0 calc(var(--u)*4) 0 rgba(4,12,40,.4);background:radial-gradient(circle at 50% 38%,#1f55b8,#0a2260 80%);overflow:hidden}
#ab1{left:calc(var(--u)*244)}#ab2{left:calc(var(--u)*411)}
.abil img{position:absolute;left:calc(var(--u)*13);top:calc(var(--u)*6);width:calc(var(--u)*120);height:calc(var(--u)*115);object-fit:contain}
.abil b{position:absolute;left:0;right:0;bottom:calc(var(--u)*8);text-align:center;font-size:calc(var(--u)*24);line-height:1}
#arena{left:calc(var(--u)*27);bottom:calc(var(--u)*433);width:calc(var(--u)*746);height:calc(var(--u)*152);border-radius:calc(var(--u)*28);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)*5) 0 rgba(4,12,40,.4);overflow:hidden;cursor:pointer}
#arena>*{position:absolute}
.atext{left:calc(var(--u)*36);top:calc(var(--u)*34);display:flex;flex-direction:column;gap:calc(var(--u)*2);width:calc(var(--u)*330)}
.atext b{font-size:calc(var(--u)*42);line-height:1.15;white-space:nowrap}
.atext span{font-size:calc(var(--u)*27);color:#d3e6ff;font-weight:800;white-space:nowrap}
.athumb{left:calc(var(--u)*345);top:calc(var(--u)*5);width:calc(var(--u)*325);height:calc(var(--u)*135);clip-path:polygon(13% 0,96% 0,100% 8%,100% 92%,96% 100%,0 100%);background:#0b2352}
.athumb img{width:100%;height:100%;object-fit:cover}
.athumb i{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,15,50,.6)}
.athumb i svg{width:calc(var(--u)*64);height:calc(var(--u)*64)}
#arena.locked .athumb i{display:flex}
#arena.locked .athumb img{filter:grayscale(.7)}
.chev{right:calc(var(--u)*16);top:calc(var(--u)*50);width:calc(var(--u)*42);height:calc(var(--u)*42);filter:drop-shadow(0 calc(var(--u)*2) 0 #07163a)}
#play{left:calc(var(--u)*75);bottom:calc(var(--u)*265);width:calc(var(--u)*650);height:calc(var(--u)*150);border-radius:calc(var(--u)*34);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*34);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}
#play svg{width:calc(var(--u)*84);height:calc(var(--u)*84);filter:drop-shadow(0 calc(var(--u)*4) 0 #a05a08)}
#play b{font-size:calc(var(--u)*104);line-height:1;letter-spacing:calc(var(--u)*2);-webkit-text-stroke:calc(var(--u)*8) #c06a08;text-shadow:0 calc(var(--u)*6) 0 #b45f06}
#play:active,#again:active{transform:translateY(calc(var(--u)*4))}
#play:disabled{filter:grayscale(1) brightness(.7);cursor:default}
#tagline{left:0;width:100%;bottom:calc(var(--u)*218);text-align:center;font-size:calc(var(--u)*29);color:#e4f2ff;pointer-events:none;line-height:1.2}
#tabs{left:0;right:0;bottom:0;height:calc(var(--u)*195);background:linear-gradient(#143a7c,#0a1f4d);border-top:calc(var(--u)*5) solid #07163a;border-radius:calc(var(--u)*50) calc(var(--u)*50) 0 0;box-shadow:inset 0 calc(var(--u)*3) 0 #3a78d8;pointer-events:auto}
.tab{position:absolute;top:calc(var(--u)*20);width:calc(var(--u)*268);height:calc(var(--u)*160);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*0)}
#tab-fighters{left:0}#tab-shop{right:0}#tab-play{left:calc(var(--u)*266);top:calc(var(--u)*-5);height:calc(var(--u)*195);padding-top:calc(var(--u)*20);border-radius:calc(var(--u)*40) calc(var(--u)*40) 0 0;background:linear-gradient(#2a7ae0,#0f3a86);border:calc(var(--u)*4) solid #0a2a66;border-bottom:0;box-shadow:inset 0 calc(var(--u)*3) 0 #7ab8ff}
.tab img{width:calc(var(--u)*92);height:calc(var(--u)*92);object-fit:contain;margin-top:calc(var(--u)*6)}
.tab b{font-size:calc(var(--u)*27);color:#b9c8ea;margin-top:calc(var(--u)*2);line-height:1}
.tab.on b{color:#fff}
#tab-fighters img,#tab-shop img{opacity:.85}

/* sheets */
.sheet{left:0;right:0;top:calc(var(--u)*240);bottom:calc(var(--u)*195);display:none;padding:calc(var(--u)*20) calc(var(--u)*30);background:linear-gradient(rgba(10,34,84,.94),rgba(6,20,58,.97));border-radius:calc(var(--u)*40) calc(var(--u)*40) 0 0;border-top:calc(var(--u)*4) solid #2a62c4;overflow:auto}
.sheet.open{display:block}
.sheet h2,.win h2{margin:0 0 calc(var(--u)*18);text-align:center;font-size:calc(var(--u)*60)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*22)}
.grid button{position:relative;height:calc(var(--u)*330);border-radius:calc(var(--u)*26);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--u)*12)}
.grid img{width:calc(var(--u)*230);height:calc(var(--u)*230);object-fit:contain}
.grid b{font-size:calc(var(--u)*34);margin-top:calc(var(--u)*4);line-height:1.1}
.grid .sel{background:linear-gradient(#2a7ae0,#10408f);box-shadow:inset 0 0 0 calc(var(--u)*5) var(--gold),0 0 calc(var(--u)*24) rgba(255,200,58,.6)}
.grid .sel::after{content:"\2713";position:absolute;top:calc(var(--u)*10);right:calc(var(--u)*12);width:calc(var(--u)*46);height:calc(var(--u)*46);border-radius:50%;background:var(--gold);color:#5a3200;font-size:calc(var(--u)*34);line-height:calc(var(--u)*46);text-align:center}
.soon{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*24);margin-top:calc(var(--u)*200)}
.soon img{width:calc(var(--u)*180);height:calc(var(--u)*180);object-fit:contain}
.soon b{font-size:calc(var(--u)*64)}

/* MATCH (H 1807) */
#alivePill{left:calc(var(--u)*22);top:calc(var(--u)*49);width:calc(var(--u)*185);height:calc(var(--u)*80);gap:calc(var(--u)*18);border-radius:calc(var(--u)*26)}
#alivePill svg{width:calc(var(--u)*46);height:calc(var(--u)*46)}
#alive{font-size:calc(var(--u)*52);line-height:1}
#alive em{color:var(--gold)}
#timerPill{left:calc(var(--u)*300);top:calc(var(--u)*46);width:calc(var(--u)*225);height:calc(var(--u)*78);border-radius:calc(var(--u)*34)}
#timer{font-size:calc(var(--u)*58);line-height:1;letter-spacing:calc(var(--u)*1)}
#chapter{left:calc(var(--u)*302);top:calc(var(--u)*130);width:calc(var(--u)*196);white-space:nowrap;height:calc(var(--u)*47);font-size:calc(var(--u)*25);border-radius:calc(var(--u)*22);color:#e4f0ff;font-weight:800}
#pause{left:calc(var(--u)*680);top:calc(var(--u)*46);width:calc(var(--u)*90);height:calc(var(--u)*85);border-radius:calc(var(--u)*22);display:flex;align-items:center;justify-content:center;background:linear-gradient(#ffd94a,#ff9d12);border:calc(var(--u)*4) solid #7a3d05;box-shadow:inset 0 calc(var(--u)*4) 0 #fff0a0,0 calc(var(--u)*4) 0 #7a3d05}
#pause svg{width:calc(var(--u)*50);height:calc(var(--u)*50)}
#count{left:0;width:100%;top:calc(var(--u)*640);text-align:center;font-size:calc(var(--u)*230);line-height:1;color:#ffe27a;pointer-events:none;display:none}
#count.pop{display:block;animation:pop .6s ease-out}
@keyframes pop{from{transform:scale(1.7);opacity:0}30%{opacity:1}to{transform:scale(1)}}
#stick{left:calc(var(--u)*10);bottom:calc(var(--u)*67);width:calc(var(--u)*248);height:calc(var(--u)*248);border-radius:50%;background:radial-gradient(circle,rgba(86,100,128,.85) 40%,rgba(52,64,92,.9));border:calc(var(--u)*5) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #3f7fe0;touch-action:none}
#stick .arr{position:absolute;inset:0;width:100%;height:100%}
#knob{position:absolute;left:calc(var(--u)*69);top:calc(var(--u)*69);width:calc(var(--u)*110);height:calc(var(--u)*110);border-radius:50%;background:radial-gradient(circle at 40% 30%,#f2f6fc,#b9c4d8 55%,#8393b0);border:calc(var(--u)*5) solid #3c4a68;box-shadow:inset 0 calc(var(--u)*-6) 0 rgba(0,20,100,.4),0 calc(var(--u)*5) 0 rgba(4,12,40,.5)}
#hint{white-space:nowrap;left:calc(var(--u)*292);bottom:calc(var(--u)*66);width:calc(var(--u)*205);height:calc(var(--u)*44);display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*25);border-radius:calc(var(--u)*22);background:none;text-shadow:0 calc(var(--u)*3) 0 rgba(0,0,0,.5);pointer-events:none}
#shieldTag{left:calc(var(--u)*518);bottom:calc(var(--u)*102);width:calc(var(--u)*72);height:calc(var(--u)*60);border-radius:calc(var(--u)*16);background:linear-gradient(#143a7c,#0b2352);border:calc(var(--u)*3) solid #07163a;padding-top:calc(var(--u)*24);text-align:center;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4;display:none}
#shieldTag b{font-size:calc(var(--u)*30);line-height:1;color:#fff}
#shield{left:calc(var(--u)*495);bottom:calc(var(--u)*137);width:calc(var(--u)*108);height:calc(var(--u)*108);border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#2d86f0,#0f3fa8);border:calc(var(--u)*5) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*5) #44b4ff,0 calc(var(--u)*5) 0 rgba(4,12,40,.5)}
#shield svg{width:calc(var(--u)*64);height:calc(var(--u)*64)}
#shield.cd{filter:saturate(.35) brightness(.75)}
#shieldLbl{display:none;left:calc(var(--u)*495);width:calc(var(--u)*108);bottom:calc(var(--u)*72);text-align:center;font-size:calc(var(--u)*24);color:#dbe9ff;pointer-events:none;line-height:1}
#charge{left:calc(var(--u)*615);bottom:calc(var(--u)*117);width:calc(var(--u)*175);height:calc(var(--u)*175);border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#ffd94a,#ff9d12 70%,#ee7d08);border:calc(var(--u)*6) solid #7a3d05;box-shadow:inset 0 0 0 calc(var(--u)*6) #ffe98a,0 calc(var(--u)*7) 0 rgba(60,25,0,.55)}
#charge svg{width:calc(var(--u)*92);height:calc(var(--u)*92);margin-top:calc(var(--u)*-28)}
#charge:active{transform:scale(.95)}
#charge.cd{filter:saturate(.3) brightness(.75)}
#chargeSecs{position:absolute;font-size:calc(var(--u)*64)}
#chargeLbl{position:absolute;left:0;right:0;bottom:calc(var(--u)*22);text-align:center;font-size:calc(var(--u)*28);line-height:1;color:#fff;-webkit-text-stroke:calc(var(--u)*4) #7a3d05;paint-order:stroke fill;pointer-events:none}

/* RESULT (H 1814) */
#banner{left:calc(var(--u)*100);top:calc(var(--u)*85);width:calc(var(--u)*600);height:calc(var(--u)*250);object-fit:contain}
#place{left:calc(var(--u)*245);top:calc(var(--u)*305);width:calc(var(--u)*310);height:calc(var(--u)*76);border-radius:calc(var(--u)*34)}
#place b{font-size:calc(var(--u)*56);line-height:1;color:#fff}
#place small{color:var(--gold);font-size:inherit}
#rpanel{left:calc(var(--u)*38);bottom:calc(var(--u)*454);width:calc(var(--u)*727);height:calc(var(--u)*435);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)}
#rpanel>*{position:absolute}
.kos{left:0;right:0;top:calc(var(--u)*24);height:calc(var(--u)*100);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*26);border-bottom:calc(var(--u)*3) solid #1f4a99;margin:0 calc(var(--u)*44)}
.kos i{width:calc(var(--u)*96);height:calc(var(--u)*96);border-radius:50%;background:#0a1d4a;border:calc(var(--u)*3) solid #2a62c4;display:flex;align-items:center;justify-content:center;margin-top:calc(var(--u)*-4)}
.kos i img{width:calc(var(--u)*70);height:calc(var(--u)*70);object-fit:contain}
.kos b{font-size:calc(var(--u)*50);line-height:1}
.stats{left:calc(var(--u)*43);right:calc(var(--u)*43);top:calc(var(--u)*156);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*18)}
.stats div{height:calc(var(--u)*114);border-radius:calc(var(--u)*24);background:#0a1d4a;border:calc(var(--u)*3) solid #1f4a99;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*24)}
.stats img{width:calc(var(--u)*96);height:calc(var(--u)*96);object-fit:contain}
.stats b{font-size:calc(var(--u)*60);line-height:1}
.xprow{left:calc(var(--u)*48);right:calc(var(--u)*48);top:calc(var(--u)*306);display:flex;justify-content:space-between;align-items:baseline;border-top:calc(var(--u)*3) solid #1f4a99;padding-top:calc(var(--u)*10);margin:0 calc(var(--u)*-6)}
.xprow b{font-size:calc(var(--u)*30)}
.xprow span{font-size:calc(var(--u)*27);color:#c5d6f5;font-weight:800}
.xpbar{left:calc(var(--u)*48);right:calc(var(--u)*48);top:calc(var(--u)*358);height:calc(var(--u)*34);border-radius:calc(var(--u)*17);background:#07163a;border:calc(var(--u)*3) solid #1f4a99;overflow:hidden}
#xpFill{display:block;height:100%;width:0;border-radius:calc(var(--u)*14);background:linear-gradient(#5bf0ff,#12b8e8)}
#again{left:calc(var(--u)*48);bottom:calc(var(--u)*269);width:calc(var(--u)*704);height:calc(var(--u)*150);border-radius:calc(var(--u)*34);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*30);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}
#again svg{width:calc(var(--u)*92);height:calc(var(--u)*92)}
#again b{font-size:calc(var(--u)*64);line-height:1;-webkit-text-stroke:calc(var(--u)*8) #c06a08;text-shadow:0 calc(var(--u)*5) 0 #b45f06}
#home{left:calc(var(--u)*162);bottom:calc(var(--u)*122);width:calc(var(--u)*478);height:calc(var(--u)*120);border-radius:calc(var(--u)*30);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*26);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*5) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*6) 0 rgba(4,12,40,.5)}
#home svg{width:calc(var(--u)*60);height:calc(var(--u)*60)}
#home b{font-size:calc(var(--u)*46);line-height:1}

/* 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 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 .gold{background:linear-gradient(#ffd94a,#ff9d12);border-color:#7a3d05}
.win .blue{background:linear-gradient(#2a7ae0,#10408f)}
#panel:not(.inmatch) #quit{display:none}
#s-lobby{z-index:1}#s-play,#s-result,#s-loading{z-index:1}
#chapter.wide{left:calc(var(--u)*235);width:calc(var(--u)*330)}
#loadMsg{color:#fff;font-size:calc(var(--u)*34)}