:root{--w:min(100vw,calc(100vh*800/1776));--u:calc(var(--w)/800);
--navy:#0c2250;--edge:#2a62c4;--ink:#0a1a40;--gold:#ffc83a;--gold2:#ff9d12;--cy:#3fd8ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
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,u{font-style:normal;font-weight:900;text-decoration:none}
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(#d9a45a,#7a4a24)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;display:none;pointer-events:none;z-index:1}
.screen.on{display:block}
.screen>*{position:absolute;pointer-events:auto}
.t{-webkit-text-stroke:calc(var(--u)*9) 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(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*5) 0 rgba(4,12,40,.45)}
.face{position:absolute;width:calc(var(--u)*76);height:calc(var(--u)*76);border-radius:50%;overflow:hidden;background:#27406e;border:calc(var(--u)*4) solid #06122e;box-shadow:0 0 0 calc(var(--u)*2) #5c86cf}
.face img{width:100%;height:100%;object-fit:cover}

/* LOADING */
#s-loading{background:linear-gradient(#17407f,#071a40);pointer-events:auto}
.logo-big{left:calc(var(--u)*100);top:calc(var(--u)*430);width:calc(var(--u)*600);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)*32)}
#loadMsg{top:calc(var(--u)*900);font-size:calc(var(--u)*38)}

/* LOGO (lobby and duel) */
.logo{left:calc(var(--u)*237);top:calc(var(--u)*40);width:calc(var(--u)*326);object-fit:contain}

/* LOBBY */
#settings{left:calc(var(--u)*8);top:calc(var(--u)*85);width:calc(var(--u)*229);height:calc(var(--u)*110);border-radius:calc(var(--u)*30);text-align:left;background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4}
#settings .face{left:calc(var(--u)*8);top:calc(var(--u)*14);width:calc(var(--u)*80);height:calc(var(--u)*80)}
.pname{position:absolute;left:calc(var(--u)*100);top:calc(var(--u)*16);font-size:calc(var(--u)*27);line-height:1}
.plevel{position:absolute;left:calc(var(--u)*100);top:calc(var(--u)*45);font-size:calc(var(--u)*25);line-height:1;color:#dbe8ff}
.lvbar{position:absolute;left:calc(var(--u)*98);top:calc(var(--u)*76);width:calc(var(--u)*124);height:calc(var(--u)*21);border-radius:calc(var(--u)*11);background:#07163a;border:calc(var(--u)*3) solid #1f4a99;overflow:hidden}
#lvFill{display:block;height:100%;width:55%;background:linear-gradient(#7af0ff,#12a8e0)}
.res{left:calc(var(--u)*570);width:calc(var(--u)*220);height:calc(var(--u)*58);border-radius:calc(var(--u)*18);display:flex;align-items:center;background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4}
#r-coins{top:calc(var(--u)*97)}#r-gems{top:calc(var(--u)*167)}
.res img{width:calc(var(--u)*50);height:calc(var(--u)*50);object-fit:contain;margin-left:calc(var(--u)*8)}
.res b{flex:1;text-align:center;font-size:calc(var(--u)*34);line-height:1}
.plus{width:calc(var(--u)*44);height:calc(var(--u)*44);margin-right:calc(var(--u)*6);border-radius:calc(var(--u)*10);background:linear-gradient(#7ae04a,#2e9f1f);border:calc(var(--u)*3) solid #14500c;display:flex;align-items:center;justify-content:center}
.plus svg{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.arrow{bottom:calc(var(--u)*833);width:calc(var(--u)*78);height:calc(var(--u)*92);border-radius:calc(var(--u)*24);display:flex;align-items:center;justify-content:center;background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4}
#prev{left:calc(var(--u)*22)}#next{left:calc(var(--u)*700)}
.arrow svg{width:calc(var(--u)*46);height:calc(var(--u)*46)}
.arrow:active{transform:scale(.94)}
#weapons{left:0;right:0;bottom:calc(var(--u)*394);height:calc(var(--u)*379);pointer-events:none}
#weapons button{position:absolute;top:0;width:calc(var(--u)*247);height:calc(var(--u)*379);border-radius:calc(var(--u)*30);background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*5) 0 rgba(4,12,40,.4);pointer-events:auto;text-align:left}
#weapons button:nth-child(1){left:calc(var(--u)*15)}#weapons button:nth-child(2){left:calc(var(--u)*275)}#weapons button:nth-child(3){left:calc(var(--u)*537)}
#weapons button.on{border-color:#7ae8ff;box-shadow:inset 0 0 0 calc(var(--u)*3) #3fd8ff,0 0 calc(var(--u)*26) calc(var(--u)*6) rgba(63,216,255,.8)}
.wt{position:absolute;left:0;right:0;top:calc(var(--u)*14);text-align:center;font-size:calc(var(--u)*30);line-height:1.1}
.wi{position:absolute;left:calc(var(--u)*18);top:calc(var(--u)*55);width:calc(var(--u)*207);height:calc(var(--u)*184);border-radius:calc(var(--u)*20);background:radial-gradient(circle at 50% 40%,#2a5fb8,#0d2b66 85%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wi img{width:92%;height:92%;object-fit:contain}
.stat{position:absolute;left:calc(var(--u)*20);right:calc(var(--u)*12);height:calc(var(--u)*28);display:flex;align-items:center}
.stat svg{width:calc(var(--u)*30);height:calc(var(--u)*30);margin-right:calc(var(--u)*8);opacity:.9}
.stat span{width:calc(var(--u)*86);white-space:nowrap;font-size:calc(var(--u)*17);line-height:1;color:#dbe8ff}
.seg{display:flex;gap:calc(var(--u)*3);flex:1}
.seg i{flex:1;height:calc(var(--u)*20);background:#0b2150;border:calc(var(--u)*1.500) solid #1f4a99;border-radius:calc(var(--u)*3)}
.seg i.f{background:linear-gradient(#5be8ff,#12b0e8);border-color:#0a6ea0}
#skins,#arena{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(var(--u)*30);background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*5) 0 rgba(4,12,40,.4)}
#skins{left:calc(var(--u)*22);bottom:calc(var(--u)*101);width:calc(var(--u)*173);height:calc(var(--u)*155)}
#arena{left:calc(var(--u)*603);bottom:calc(var(--u)*101);width:calc(var(--u)*179);height:calc(var(--u)*158)}
#skins img,#arena img{width:calc(var(--u)*100);height:calc(var(--u)*92);object-fit:contain}
#skins b,#arena b{font-size:calc(var(--u)*29);line-height:1;margin-top:calc(var(--u)*6)}
#badge{position:absolute;right:calc(var(--u)*-6);top:calc(var(--u)*-14);width:calc(var(--u)*46);height:calc(var(--u)*46);border-radius:50%;background:radial-gradient(circle at 40% 30%,#ff7a7a,#d01c2c);border:calc(var(--u)*3) solid #fff;font-size:calc(var(--u)*32);line-height:calc(var(--u)*40);text-align:center;-webkit-text-stroke:0;text-shadow:0 calc(var(--u)*2) 0 #7a0a14}
#duel,#again{border-radius:calc(var(--u)*46);display:flex;flex-direction:column;align-items:center;justify-content:center;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}
#duel{left:calc(var(--u)*218);bottom:calc(var(--u)*111);width:calc(var(--u)*364);height:calc(var(--u)*213)}
#duel img{width:calc(var(--u)*120);height:calc(var(--u)*110);object-fit:contain;margin-top:calc(var(--u)*-6)}
#duel b{font-size:calc(var(--u)*88);line-height:1;color:#fff;-webkit-text-stroke:calc(var(--u)*9) #5a3200;text-shadow:0 calc(var(--u)*5) 0 #5a3200;margin-top:calc(var(--u)*-6)}
#duel:active,#again:active,#attack:active,#block:active,#dash:active{transform:scale(.96)}

/* DUEL HUD (H 1785) */
.hudp{left:0;top:calc(var(--u)*208);width:calc(var(--u)*298);height:calc(var(--u)*122);border-radius:0 calc(var(--u)*36) calc(var(--u)*36) 0;background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;border-left:0;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4}
.hudp.foe{left:calc(var(--u)*503);width:calc(var(--u)*297);border-radius:calc(var(--u)*36) 0 0 calc(var(--u)*36);border-left:calc(var(--u)*4) solid #06122e;border-right:0}
.hudp>*{position:absolute}
.hudp .face{left:calc(var(--u)*6);top:calc(var(--u)*12)}
.hudp.foe .face{left:auto;right:calc(var(--u)*6)}
.hudp .nm{left:calc(var(--u)*92);top:calc(var(--u)*14);font-size:calc(var(--u)*28);line-height:1.1}
.hudp.foe .nm{left:calc(var(--u)*118);top:calc(var(--u)*14)}
.hp{left:calc(var(--u)*82);top:calc(var(--u)*50);width:calc(var(--u)*204);height:calc(var(--u)*36);border-radius:calc(var(--u)*14);background:#0f2f66;border:calc(var(--u)*4) solid #06122e;overflow:hidden}
.hudp.foe .hp{left:calc(var(--u)*3);width:calc(var(--u)*207);background:#4a1020}
.hp span{display:block;height:100%;width:100%;background:linear-gradient(#7af0ff,#16a6e0);border-radius:calc(var(--u)*10);transition:width .12s linear;box-shadow:inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.35)}
.hudp.foe .hp span{background:linear-gradient(#ff7a6a,#c81c2c)}
.pips{left:calc(var(--u)*92);top:calc(var(--u)*94);display:flex;gap:calc(var(--u)*6)}
.hudp.foe .pips{left:calc(var(--u)*128)}
.pip{width:calc(var(--u)*23);height:calc(var(--u)*23);border-radius:50%;background:#0b1c44;border:calc(var(--u)*3) solid #5c86cf}
.pip.on{background:radial-gradient(circle at 40% 30%,#fff2a0,#ffa812);border-color:#8a4a06}
#pause{left:calc(var(--u)*313);top:calc(var(--u)*205);width:calc(var(--u)*174);height:calc(var(--u)*98)}
#pause img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
#timer{position:absolute;left:0;right:0;top:calc(var(--u)*30);text-align:center;font-size:calc(var(--u)*50);line-height:1;letter-spacing:calc(var(--u)*1)}
#combo{left:calc(var(--u)*410);top:calc(var(--u)*480);transform:translate(-50%,-50%) rotate(-12deg);display:flex;align-items:center;gap:calc(var(--u)*14);padding:calc(var(--u)*6) calc(var(--u)*60) calc(var(--u)*6) calc(var(--u)*30);background:linear-gradient(90deg,transparent,rgba(30,90,220,.9) 15%,rgba(60,150,255,.85) 80%,transparent);white-space:nowrap;pointer-events:none;animation:cpop .25s ease-out}
#combo b{font-size:calc(var(--u)*104);line-height:1;color:var(--gold);font-style:italic}
#combo span{font-size:calc(var(--u)*58);line-height:1;color:#fff;font-style:italic;margin-top:calc(var(--u)*10)}
@keyframes cpop{from{transform:translate(-50%,-50%) rotate(-12deg) scale(1.4);opacity:.3}}
#banner{left:0;width:100%;top:calc(var(--u)*690);text-align:center;font-size:calc(var(--u)*150);line-height:1;color:var(--gold);pointer-events:none;animation:bpop .45s ease-out}
#banner.small{top:calc(var(--u)*620);font-size:calc(var(--u)*84);color:#fff}
#banner.parry{color:#7af0ff}
@keyframes bpop{from{transform:scale(1.6);opacity:0}35%{opacity:1}to{transform:scale(1)}}
#stick{left:calc(var(--u)*37);bottom:calc(var(--u)*117);width:calc(var(--u)*320);height:calc(var(--u)*320);border-radius:50%;background:radial-gradient(circle,rgba(110,124,152,.78) 40%,rgba(70,84,114,.82));border:calc(var(--u)*5) solid #5a6c92;box-shadow:inset 0 0 0 calc(var(--u)*3) rgba(255,255,255,.25);touch-action:none}
#stick .arr{position:absolute;inset:0;width:100%;height:100%}
#knob{position:absolute;left:calc(var(--u)*92);top:calc(var(--u)*92);width:calc(var(--u)*136);height:calc(var(--u)*136);border-radius:50%;background:radial-gradient(circle at 40% 30%,#dfe9fa,#9db0d4 60%,#7288ae);border:calc(var(--u)*5) solid #4a5c82;box-shadow:inset 0 calc(var(--u)*-8) 0 rgba(0,20,100,.3),0 calc(var(--u)*6) 0 rgba(4,12,40,.45)}
.act{border-radius:50%;display:block;touch-action:none}
.act img{position:absolute;left:50%;transform:translateX(-50%)}
.act b{position:absolute;left:0;right:0;text-align:center;line-height:1}
#attack{left:calc(var(--u)*544);bottom:calc(var(--u)*260);width:calc(var(--u)*226);height:calc(var(--u)*226);background:radial-gradient(circle at 50% 30%,#ffd94a,#e89a10 75%);border:calc(var(--u)*7) solid #7a4a06;box-shadow:inset 0 0 0 calc(var(--u)*6) #ffe98a,0 calc(var(--u)*7) 0 rgba(60,25,0,.55)}
#attack img{top:calc(var(--u)*34);width:calc(var(--u)*118);height:calc(var(--u)*118);object-fit:contain}
#attack b{top:calc(var(--u)*152);font-size:calc(var(--u)*36);-webkit-text-stroke-color:#5a3200}
#block{left:calc(var(--u)*417);bottom:calc(var(--u)*83);width:calc(var(--u)*200);height:calc(var(--u)*200);background:radial-gradient(circle at 50% 30%,#4aa0ff,#0f43b0 78%);border:calc(var(--u)*6) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*5) #5cc0ff,0 calc(var(--u)*6) 0 rgba(4,12,40,.5)}
#block img{top:calc(var(--u)*26);width:calc(var(--u)*100);height:calc(var(--u)*100);object-fit:contain}
#block b{top:calc(var(--u)*134);font-size:calc(var(--u)*32)}
#block.held{box-shadow:inset 0 0 0 calc(var(--u)*5) #fff,0 0 calc(var(--u)*28) calc(var(--u)*6) rgba(95,200,255,.9);transform:scale(.96)}
#dash{left:calc(var(--u)*631);bottom:calc(var(--u)*78);width:calc(var(--u)*160);height:calc(var(--u)*160);background:radial-gradient(circle at 50% 30%,#3a5a98,#14264f 78%);border:calc(var(--u)*6) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*4) #4a74c4,0 calc(var(--u)*6) 0 rgba(4,12,40,.5)}
#dash img{top:calc(var(--u)*20);width:calc(var(--u)*76);height:calc(var(--u)*76);object-fit:contain}
#dash b{top:calc(var(--u)*100);font-size:calc(var(--u)*27)}
#dash u{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(5,10,30,.62) calc(var(--p,0)*1turn),transparent 0);pointer-events:none}
#dash em{position:absolute;left:0;right:0;top:calc(var(--u)*46);text-align:center;font-size:calc(var(--u)*46);line-height:1;pointer-events:none}
#dash.cd img{opacity:.55}

/* RESULT */
#outcome{left:calc(var(--u)*50);top:calc(var(--u)*17);width:calc(var(--u)*700);object-fit:contain}
.rf{top:calc(var(--u)*392);width:calc(var(--u)*96);height:calc(var(--u)*96)}
.rf.l{left:calc(var(--u)*196)}.rf.r{left:calc(var(--u)*508)}
#score{left:0;width:100%;top:calc(var(--u)*378);text-align:center;font-size:calc(var(--u)*100);line-height:1.1;color:#fff;pointer-events:none}
#rewards{left:calc(var(--u)*60);bottom:calc(var(--u)*376);width:calc(var(--u)*680);height:calc(var(--u)*390);border-radius:calc(var(--u)*34);background:linear-gradient(#143a7c,#0a1f4a);border:calc(var(--u)*5) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*6) 0 rgba(4,12,40,.45)}
#rewards>*{position:absolute}
.rrow{left:calc(var(--u)*24);right:calc(var(--u)*24);top:calc(var(--u)*24);height:calc(var(--u)*112);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*18)}
.cell{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)*20)}
.cell img{width:calc(var(--u)*80);height:calc(var(--u)*80);object-fit:contain}
.cell b{font-size:calc(var(--u)*56);line-height:1}
.combo-row{left:calc(var(--u)*40);right:calc(var(--u)*40);top:calc(var(--u)*150);height:calc(var(--u)*62);display:flex;align-items:center;justify-content:space-between}
.combo-row span{font-size:calc(var(--u)*32);color:#dbe8ff}
.combo-row b{font-size:calc(var(--u)*56);color:var(--gold);line-height:1}
.xprow{left:calc(var(--u)*40);right:calc(var(--u)*40);top:calc(var(--u)*226);display:flex;justify-content:space-between;align-items:baseline;border-top:calc(var(--u)*3) solid #1f4a99;padding-top:calc(var(--u)*12)}
.xprow b{font-size:calc(var(--u)*34)}
.xprow span{font-size:calc(var(--u)*28);color:#c5d6f5}
.xpbar{left:calc(var(--u)*40);right:calc(var(--u)*40);top:calc(var(--u)*282);height:calc(var(--u)*36);border-radius:calc(var(--u)*18);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(#7af0ff,#12a8e0)}
.xpgain{left:0;right:0;top:calc(var(--u)*330);text-align:center;font-size:calc(var(--u)*30);color:#7af0ff}
#again{left:calc(var(--u)*218);bottom:calc(var(--u)*111);width:calc(var(--u)*364);height:calc(var(--u)*213)}
#again b{font-size:calc(var(--u)*60);line-height:1;color:#fff;-webkit-text-stroke:calc(var(--u)*9) #5a3200;text-shadow:0 calc(var(--u)*5) 0 #5a3200}
#home{left:calc(var(--u)*22);bottom:calc(var(--u)*101);width:calc(var(--u)*173);height:calc(var(--u)*155);border-radius:calc(var(--u)*30);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*10);background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*4) solid #06122e;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*5) 0 rgba(4,12,40,.4)}
#home svg{width:calc(var(--u)*70);height:calc(var(--u)*70)}
#home b{font-size:calc(var(--u)*32);line-height:1}

/* MODALS */
.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)*620);max-height:90%;overflow:auto;padding:calc(var(--u)*34) calc(var(--u)*40) calc(var(--u)*40);border-radius:calc(var(--u)*36);background:linear-gradient(#17407f,#0a1f4a);border:calc(var(--u)*5) solid #06122e;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 #06122e}
.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)}
.soon{text-align:center;font-size:calc(var(--u)*56);padding:calc(var(--u)*50) 0}
.list{display:flex;flex-direction:column;gap:calc(var(--u)*14)}
.list button{display:flex;align-items:center;gap:calc(var(--u)*22);height:calc(var(--u)*108);padding:0 calc(var(--u)*26);border-radius:calc(var(--u)*24);background:#0a1d4a;border:calc(var(--u)*4) solid #1f4a99;text-align:left}
.list button.on{border-color:var(--gold);box-shadow:0 0 calc(var(--u)*18) rgba(255,200,58,.6)}
.list button.locked{opacity:.6}
.sw{width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:50%;border:calc(var(--u)*4) solid #fff;flex:none}
.li{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*4)}
.li b{font-size:calc(var(--u)*36);line-height:1.1}
.li span{font-size:calc(var(--u)*26);color:#c5d6f5;line-height:1.1}
.pr{font-size:calc(var(--u)*30);color:var(--gold)}
.list svg{width:calc(var(--u)*44);height:calc(var(--u)*44)}
#panel:not(.inmatch) #quit{display:none}

/* inside the phone app: the top right 64 px belong to the app */
.in-app #r-coins{top:max(calc(var(--u)*97),70px)}
.in-app #r-gems{top:calc(max(calc(var(--u)*97),70px) + var(--u)*70)}
.hudp .nm{white-space:nowrap}
.hudp.foe .nm.long{font-size:calc(var(--u)*20);top:calc(var(--u)*20)}