:root{--w:min(100vw,calc(100vh*800/1700));--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;touch-action:none}
b,em,i,small{font-style:normal;font-weight:900}
img{display:block;-webkit-user-drag:none;pointer-events:none}
svg{display:block}
#phone{--H:1732;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)*20)}
.pill{display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*22)}
.bang{position:absolute;right:calc(var(--u)*-10);top:calc(var(--u)*-12);width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;background:radial-gradient(circle at 40% 30%,#ff6a5a,#e0201a);border:calc(var(--u)*3) solid #fff;color:#fff;font-size:calc(var(--u)*28);line-height:calc(var(--u)*32);text-align:center;box-shadow:0 calc(var(--u)*3) 0 rgba(60,0,0,.5);pointer-events:none}

/* LOADING */
#s-loading{background:linear-gradient(#1b66c4,#0a2a66);z-index:2}
.logo-big{left:calc(var(--u)*100);top:calc(var(--u)*430);width:calc(var(--u)*600);height:calc(var(--u)*370);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{top:calc(var(--u)*900);color:#fff;font-size:calc(var(--u)*34)}

/* LOBBY (design height 1732) */
#s-lobby,#s-play,#s-result{z-index:1}
#settings{left:calc(var(--u)*27);top:calc(var(--u)*82);width:calc(var(--u)*76);height:calc(var(--u)*68);justify-content:center;padding:0}
#settings svg{width:calc(var(--u)*48);height:calc(var(--u)*48)}
#c-coins,#c-gems{top:calc(var(--u)*90);height:calc(var(--u)*55);gap:calc(var(--u)*12);padding-left:calc(var(--u)*6);border-radius:calc(var(--u)*16);pointer-events:none}
#c-coins{left:calc(var(--u)*335);width:calc(var(--u)*205)}
#c-gems{left:calc(var(--u)*565);width:calc(var(--u)*215)}
.chip>img{width:calc(var(--u)*50);height:calc(var(--u)*50);object-fit:contain;flex:none}
.chip>b{font-size:calc(var(--u)*30);line-height:1;flex:1;text-align:center}
.chip .plus{flex:none;width:calc(var(--u)*46);height:calc(var(--u)*42);margin-right:calc(var(--u)*5);border-radius:calc(var(--u)*10);background:linear-gradient(#3a9bff,#1255c8);border:calc(var(--u)*3) solid #07163a;display:flex;align-items:center;justify-content:center}
.plus svg{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.logo{left:calc(var(--u)*15);top:calc(var(--u)*105);width:calc(var(--u)*425);height:calc(var(--u)*360);object-fit:contain;pointer-events:none}
.side{left:calc(var(--u)*27);width:calc(var(--u)*126);height:calc(var(--u)*123);border-radius:calc(var(--u)*22);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;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)}
.side img{width:calc(var(--u)*84);height:calc(var(--u)*76);object-fit:contain;margin-top:calc(var(--u)*8)}
.side b,.tab b{font-size:calc(var(--u)*22);line-height:1;margin-top:calc(var(--u)*2);color:#fff}
.side:active,.tab:active,#climb:active,#again:active,#home:active{transform:translateY(calc(var(--u)*4))}
#bestCard{left:calc(var(--u)*575);top:calc(var(--u)*632);width:calc(var(--u)*215);height:calc(var(--u)*153);border-radius:calc(var(--u)*24);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*4);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);pointer-events:none}
#bestCard .crown{position:absolute;left:calc(var(--u)*77);top:calc(var(--u)*-30);width:calc(var(--u)*62);height:calc(var(--u)*50);object-fit:contain}
#bestLbl{font-size:calc(var(--u)*24);margin-top:calc(var(--u)*14);line-height:1}
#best{font-size:calc(var(--u)*72);line-height:1;color:var(--cy);-webkit-text-stroke-color:#06307a}
#climb{left:calc(var(--u)*112);bottom:calc(var(--u)*(var(--H) - 1495));width:calc(var(--u)*578);height:calc(var(--u)*160);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*28)}
#climb .bg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 calc(var(--u)*7) 0 #7a3d05) drop-shadow(0 0 calc(var(--u)*14) rgba(255,200,58,.55))}
#climb>:not(.bg){position:relative}
#climb .mtn{width:calc(var(--u)*128);height:calc(var(--u)*120)}
#climb b{font-size:calc(var(--u)*104);line-height:1;color:#4a2a0a;-webkit-text-stroke:0;text-shadow:0 calc(var(--u)*3) 0 #ffe9a0;letter-spacing:calc(var(--u)*2)}
#climb .dch{width:calc(var(--u)*62);height:calc(var(--u)*62)}
#tabs{left:0;right:0;bottom:calc(var(--u)*32);height:calc(var(--u)*155);pointer-events:none}
.tab{position:absolute;top:0;height:calc(var(--u)*155);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(var(--u)*24);background:linear-gradient(#143a7c,#0a1f4d);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)}
#tab-hero{left:calc(var(--u)*27);width:calc(var(--u)*178)}
#tab-skills{left:calc(var(--u)*220);width:calc(var(--u)*175)}
#tab-relics{left:calc(var(--u)*408);width:calc(var(--u)*175)}
#tab-tower{left:calc(var(--u)*595);width:calc(var(--u)*180)}
.tab img,.tab .skarr{width:calc(var(--u)*72);height:calc(var(--u)*76);object-fit:contain;margin-bottom:calc(var(--u)*6)}
.tab b{font-size:calc(var(--u)*27);margin-top:0}
.tab.on{background:linear-gradient(#2a7ae0,#0f3a86);box-shadow:inset 0 0 0 calc(var(--u)*3) #7ab8ff,0 calc(var(--u)*4) 0 rgba(4,12,40,.45)}
.tab .bang{right:calc(var(--u)*-6);top:calc(var(--u)*-12)}

/* sheets */
#sheet{left:calc(var(--u)*40);top:calc(var(--u)*420);width:calc(var(--u)*720);height:calc(var(--u)*1080);display:none;border-radius:calc(var(--u)*36);background:linear-gradient(rgba(14,44,100,.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)*10) 0 rgba(4,12,40,.45);overflow:hidden;z-index:5}
#sheet.open{display:block}
#sheetTitle{position:absolute;left:0;right:0;top:calc(var(--u)*26);margin:0;text-align:center;font-size:calc(var(--u)*64);color:var(--gold);-webkit-text-stroke-color:#5a3200;line-height:1}
#sheetClose{position:absolute;right:calc(var(--u)*20);top:calc(var(--u)*20);width:calc(var(--u)*72);height:calc(var(--u)*72);border-radius:50%;background:radial-gradient(circle at 40% 30%,#ff7a6a,#d82a22);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #ff9d90;display:flex;align-items:center;justify-content:center}
#sheetClose svg{width:calc(var(--u)*34);height:calc(var(--u)*34)}
.pane{position:absolute;left:calc(var(--u)*34);right:calc(var(--u)*34);top:calc(var(--u)*130);bottom:calc(var(--u)*34);display:none;overflow:auto}
.pane.open{display:block}
#heroes.open{display:flex;flex-direction:column;gap:calc(var(--u)*22)}
#heroes button{position:relative;display:flex;align-items:center;gap:calc(var(--u)*26);flex:none;height:calc(var(--u)*270);padding:0 calc(var(--u)*30) 0 calc(var(--u)*20);border-radius:calc(var(--u)*28);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4;text-align:left;touch-action:manipulation}
#heroes button img{width:calc(var(--u)*220);height:calc(var(--u)*240);object-fit:contain;flex:none}
#heroes button .nm{display:flex;flex-direction:column;gap:calc(var(--u)*10);flex:1}
#heroes button b.n{font-size:calc(var(--u)*46);line-height:1}
#heroes button .st{display:flex;align-items:center;gap:calc(var(--u)*10);font-size:calc(var(--u)*36);line-height:1}
#heroes button .st img{width:calc(var(--u)*46);height:calc(var(--u)*46)}
#heroes button.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)}
#heroes button.sel::after{content:"\2713";position:absolute;top:calc(var(--u)*14);right:calc(var(--u)*16);width:calc(var(--u)*48);height:calc(var(--u)*48);border-radius:50%;background:var(--gold);color:#5a3200;font-size:calc(var(--u)*36);line-height:calc(var(--u)*48);text-align:center}
#heroes button.poor .st{color:#ff9a8a}
.skcard{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*14);padding:calc(var(--u)*34) calc(var(--u)*20);border-radius:calc(var(--u)*28);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4}
.skic{width:calc(var(--u)*180);height:calc(var(--u)*180)}
#skName{font-size:calc(var(--u)*56);line-height:1}
#skLine{font-size:calc(var(--u)*36);color:#d3e6ff}
#skNext{font-size:calc(var(--u)*32);color:var(--cy)}
.pips{display:flex;gap:calc(var(--u)*16)}
.pips i{width:calc(var(--u)*70);height:calc(var(--u)*24);border-radius:calc(var(--u)*12);background:#07163a;border:calc(var(--u)*3) solid #2a62c4}
.pips i.on{background:linear-gradient(#ffe27a,#ff9d12);border-color:#8a4a06}
#skillUp{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*18);width:100%;height:calc(var(--u)*140);margin-top:calc(var(--u)*34);border-radius: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;touch-action:manipulation}
#skillUp img{width:calc(var(--u)*70);height:calc(var(--u)*70);object-fit:contain}
#skillUp 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}
#skillUp.poor{filter:saturate(.35) brightness(.8)}
#skillUp.max img{display:none}
#towers.open{display:flex;flex-direction:column;gap:calc(var(--u)*26)}
#towers button{position:relative;flex:none;height:calc(var(--u)*400);border-radius:calc(var(--u)*28);overflow:hidden;text-align:left;background:#0b2352;border:calc(var(--u)*4) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4;touch-action:manipulation}
#towers button>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#towers button .cap{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*18) calc(var(--u)*26) calc(var(--u)*20);background:linear-gradient(transparent,rgba(5,15,50,.92) 45%);display:flex;flex-direction:column;gap:calc(var(--u)*6)}
#towers .cap b{font-size:calc(var(--u)*48);line-height:1.05}
#towers .cap span{font-size:calc(var(--u)*30);color:#d3e6ff;font-weight:800;line-height:1.15}
#towers .cap em{font-size:calc(var(--u)*30);color:var(--cy);font-weight:900}
#towers button.sel{box-shadow:inset 0 0 0 calc(var(--u)*6) var(--gold),0 0 calc(var(--u)*24) rgba(255,200,58,.6)}
#towers button.locked>img{filter:grayscale(.8) brightness(.55)}
#towers button .lk{position:absolute;left:0;right:0;top:calc(var(--u)*50);display:none;justify-content:center}
#towers button.locked .lk{display:flex}
.lk svg{width:calc(var(--u)*110);height:calc(var(--u)*110);filter:drop-shadow(0 calc(var(--u)*4) 0 #07163a)}
#records.open{display:flex;flex-direction:column;gap:calc(var(--u)*20)}
#records .rec{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*120);padding:0 calc(var(--u)*34);border-radius:calc(var(--u)*24);background:#0a1d4a;border:calc(var(--u)*3) solid #1f4a99}
#records .rec span{font-size:calc(var(--u)*36);color:#d3e6ff}
#records .rec b{font-size:calc(var(--u)*56);line-height:1;color:var(--cy)}
#soon.open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*30)}
#soon svg{width:calc(var(--u)*240);height:calc(var(--u)*240)}
#soon b{font-size:calc(var(--u)*72)}

/* RUN: design heights 1685 (chapter 1) and 1644 (chapter 2) */
#s-play.c1{--H:1685}
#s-play.c2{--H:1644}
#lavaGlow{inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 115%,rgba(255,90,20,.65),rgba(255,90,20,0) 60%);transition:opacity .15s}
#topLogo{left:calc(var(--u)*18);top:calc(var(--u)*25);width:calc(var(--u)*242);height:calc(var(--u)*105);object-fit:contain;pointer-events:auto}
.c2 #topLogo{left:calc(var(--u)*25);width:calc(var(--u)*240);height:calc(var(--u)*185)}
#floorPill{left:calc(var(--u)*280);top:calc(var(--u)*45);width:calc(var(--u)*155);height:calc(var(--u)*60);pointer-events:none}
#floor{font-size:calc(var(--u)*32);line-height:1;white-space:nowrap}
#floor em{color:var(--gold);font-size:calc(var(--u)*40)}
#heightPill{left:calc(var(--u)*458);top:calc(var(--u)*45);width:calc(var(--u)*145);height:calc(var(--u)*60);gap:calc(var(--u)*8);pointer-events:none}
#heightPill .up{width:calc(var(--u)*30);height:calc(var(--u)*40)}
#heightPill small{display:none;font-size:calc(var(--u)*24);color:#cfe0ff}
#height{font-size:calc(var(--u)*36);line-height:1}
#coinPill{left:calc(var(--u)*648);top:calc(var(--u)*45);width:calc(var(--u)*135);height:calc(var(--u)*60);gap:calc(var(--u)*10);pointer-events:none}
#coinPill img{width:calc(var(--u)*44);height:calc(var(--u)*44);object-fit:contain}
#coins{font-size:calc(var(--u)*36);line-height:1}
#pause{left:calc(var(--u)*18);top:calc(var(--u)*142);width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:calc(var(--u)*16);display:flex;align-items:center;justify-content:center;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)}
#pause svg{width:calc(var(--u)*40);height:calc(var(--u)*40)}
#floorPill{display:flex}
.c2 #floorPill{display:none}
.c2 #heightPill{left:calc(var(--u)*308);top:calc(var(--u)*85);width:calc(var(--u)*185);height:calc(var(--u)*107);flex-direction:column;gap:calc(var(--u)*2);border-radius:calc(var(--u)*20)}
.c2 #heightPill .up{display:none}
.c2 #heightPill small{display:block}
.c2 #height{font-size:calc(var(--u)*62)}
.c2 #coinPill{left:calc(var(--u)*515);top:calc(var(--u)*68);width:calc(var(--u)*185);height:calc(var(--u)*65);border-radius:calc(var(--u)*30)}
.c2 #pause{left:calc(var(--u)*720);top:calc(var(--u)*68);width:calc(var(--u)*70);height:calc(var(--u)*65)}
#bar{display:none;left:0;top:0;width:0;height:0}
.c2 #bar{display:block}
#bar>*{position:absolute}
#bar .bcrown{left:calc(var(--u)*20);top:calc(var(--u)*243);width:calc(var(--u)*54);height:calc(var(--u)*46);object-fit:contain}
#bar .track{left:calc(var(--u)*37);top:calc(var(--u)*290);width:calc(var(--u)*20);height:calc(var(--u)*370);border-radius:calc(var(--u)*10);background:#0a1d4a;border:calc(var(--u)*3) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*2) #2a62c4;overflow:hidden}
#barFill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#bdf6ff,#27c8f2)}
.blab{left:calc(var(--u)*68);font-size:calc(var(--u)*22);line-height:1;padding:calc(var(--u)*3) calc(var(--u)*8);border-radius:calc(var(--u)*10);background:rgba(20,40,90,.5);transform:translateY(-50%)}
#bl100{top:calc(var(--u)*352)}#bl50{top:calc(var(--u)*506)}#bl0{top:calc(var(--u)*652)}
#barMe{left:calc(var(--u)*24);top:calc(var(--u)*660);width:calc(var(--u)*46);height:calc(var(--u)*46);margin-top:calc(var(--u)*-23);border-radius:50%;overflow:hidden;background:#0a1d4a;border:calc(var(--u)*4) solid #58dcff;box-shadow:0 calc(var(--u)*3) 0 rgba(4,12,40,.5)}
#barMe img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.9);transform-origin:50% 14%}
#message{display:none;left:0;width:100%;top:calc(var(--u)*520);text-align:center;font-size:calc(var(--u)*130);line-height:1;color:#ffe27a;pointer-events:none}
#message.pop{display:block;animation:pop .7s ease-out}
@keyframes pop{from{transform:scale(1.7);opacity:0}25%{opacity:1}to{transform:scale(1)}}
#left,#right{display:flex;align-items:center;justify-content:center;background:linear-gradient(#1b4a9a,#0b2352);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,.5)}
#left,#right{bottom:calc(var(--u)*(var(--H) - 1612));width:calc(var(--u)*194);height:calc(var(--u)*164);border-radius:calc(var(--u)*34)}
#left{left:calc(var(--u)*18)}#right{left:calc(var(--u)*232)}
#left svg,#right svg{width:calc(var(--u)*84);height:calc(var(--u)*84);filter:drop-shadow(0 calc(var(--u)*4) 0 rgba(60,25,0,.6))}
#left.held,#right.held{filter:brightness(1.35)}
.c2 #left,.c2 #right{bottom:calc(var(--u)*(var(--H) - 1538));width:calc(var(--u)*166);height:calc(var(--u)*166);border-radius:50%;background:rgba(14,30,76,.62);border:calc(var(--u)*5) solid rgba(214,226,248,.8);box-shadow:inset 0 0 0 calc(var(--u)*2) rgba(10,26,64,.5),0 calc(var(--u)*5) 0 rgba(4,12,40,.35)}
.c2 #left{left:calc(var(--u)*29)}.c2 #right{left:calc(var(--u)*245)}
.c2 #left svg,.c2 #right svg{width:calc(var(--u)*78);height:calc(var(--u)*78)}
#left .chv,#right .chv{display:none}
.c2 #left .tri,.c2 #right .tri{display:none}
.c2 #left .chv,.c2 #right .chv{display:block}
#double{left:calc(var(--u)*678);bottom:calc(var(--u)*(var(--H) - 1345));width:calc(var(--u)*107);height:calc(var(--u)*150);display:flex;align-items:center;justify-content:center}
.c2 #double{left:calc(var(--u)*646);bottom:calc(var(--u)*(var(--H) - 1290))}
#double .hex{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 calc(var(--u)*5) 0 rgba(4,12,40,.5))}
#double .dj{position:absolute;left:calc(var(--u)*26);top:calc(var(--u)*20);width:calc(var(--u)*56);height:calc(var(--u)*56)}
#double .lbl{position:absolute;left:0;right:0;bottom:calc(var(--u)*22);text-align:center;font-size:calc(var(--u)*20);line-height:1.02;color:#fff}
#double .secs{position:absolute;left:0;right:0;top:calc(var(--u)*28);text-align:center;font-size:calc(var(--u)*50);line-height:1;color:#fff}
#double.cd .hex,#double.cd .dj{filter:saturate(.3) brightness(.7)}
#double.cd .dj{opacity:.25}
#double:active{transform:scale(.95)}
#jump{left:calc(var(--u)*577);bottom:calc(var(--u)*(var(--H) - 1613));width:calc(var(--u)*226);height:calc(var(--u)*226);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(var(--u)*34);background:radial-gradient(circle at 50% 30%,#ffe27a,#ffc02a 55%,#f0980a);border:calc(var(--u)*6) solid #8a4a06;box-shadow:inset 0 0 0 calc(var(--u)*6) #ffe98a,0 calc(var(--u)*8) 0 rgba(60,25,0,.55)}
#jump .arrow{position:absolute;left:calc(var(--u)*69);top:calc(var(--u)*26);width:calc(var(--u)*80);height:calc(var(--u)*80)}
#jump .chevron{display:none}
#jump b{position:relative;font-size:calc(var(--u)*52);line-height:1;color:#4a2a0a;-webkit-text-stroke:0;text-shadow:0 calc(var(--u)*2) 0 #ffe9a0}
#jump:active{transform:scale(.95)}
.c2 #jump{left:calc(var(--u)*545);bottom:calc(var(--u)*(var(--H) - 1555));width:calc(var(--u)*230);height:calc(var(--u)*230);background:radial-gradient(circle at 50% 28%,#e9b24a,#c98a1c 62%,#a86a10);border:calc(var(--u)*6) solid #f4a21a;box-shadow:inset 0 0 0 calc(var(--u)*5) #f6d078,0 calc(var(--u)*7) 0 rgba(60,25,0,.5)}
.c2 #jump .arrow{display:none}
.c2 #jump .chevron{display:block;position:absolute;left:calc(var(--u)*68);top:calc(var(--u)*40);width:calc(var(--u)*94);height:calc(var(--u)*80)}
.c2 #jump b{color:#fff;-webkit-text-stroke:calc(var(--u)*4) #7a4a0a;font-size:calc(var(--u)*46)}

/* RESULT (design height 1732) */
#result{position:absolute;inset:0;pointer-events:none}
#result>*{position:absolute;pointer-events:auto}
#banner{left:calc(var(--u)*60);top:calc(var(--u)*110);width:calc(var(--u)*680);height:calc(var(--u)*360);object-fit:contain}
#rpanel{left:calc(var(--u)*80);bottom:calc(var(--u)*(var(--H) - 1330));width:calc(var(--u)*640);height:calc(var(--u)*270);padding:calc(var(--u)*14) calc(var(--u)*38);display:flex;flex-direction:column;justify-content:space-evenly;border-radius:calc(var(--u)*30);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 .row{display:flex;align-items:center;gap:calc(var(--u)*14);min-height:calc(var(--u)*50)}
#rpanel .row>span{flex:1;font-size:calc(var(--u)*30);color:#d3e6ff}
#rpanel .row>b{font-size:calc(var(--u)*46);line-height:1}
#rpanel .row>img{width:calc(var(--u)*44);height:calc(var(--u)*44);object-fit:contain}
#rpanel .big{font-size:calc(var(--u)*80)!important;color:var(--cy);-webkit-text-stroke-color:#06307a}
#rowH{min-height:calc(var(--u)*86)!important}
#record{display:none;order:2;padding:calc(var(--u)*6) calc(var(--u)*16);border-radius:calc(var(--u)*12);background:linear-gradient(#ffd94a,#ff9d12);color:#fff;font-size:calc(var(--u)*24);-webkit-text-stroke:calc(var(--u)*3) #8a4a06;border:calc(var(--u)*3) solid #8a4a06;white-space:nowrap}
#record.on{display:block}
#rowH>b{order:3}
#rowC>b{color:var(--gold)}
#rowT{display:none}
#result[data-won="1"] #rowT{display:flex}
#rowT>b{color:var(--gold)}
#result[data-won="0"] #rpanel{justify-content:space-around}
#again{left:calc(var(--u)*112);bottom:calc(var(--u)*(var(--H) - 1505));width:calc(var(--u)*578);height:calc(var(--u)*140);border-radius:calc(var(--u)*34);display:flex;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}
#again b{font-size:calc(var(--u)*78);line-height:1;white-space:nowrap;-webkit-text-stroke:calc(var(--u)*8) #c06a08;text-shadow:0 calc(var(--u)*5) 0 #b45f06}
#home{left:calc(var(--u)*250);bottom:calc(var(--u)*(var(--H) - 1635));width:calc(var(--u)*300);height:calc(var(--u)*100);border-radius:calc(var(--u)*28);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*20);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)*50);height:calc(var(--u)*50)}
#home b{font-size:calc(var(--u)*44);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 h2{margin:0;text-align:center;font-size:calc(var(--u)*60);color:var(--gold);-webkit-text-stroke-color:#5a3200}
.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;touch-action:pan-x}
.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(.inrun) #quit{display:none}

/* shaking on a refused tap */
.deny{animation:deny .35s}
@keyframes deny{20%{transform:translateX(calc(var(--u)*-10))}50%{transform:translateX(calc(var(--u)*10))}80%{transform:translateX(calc(var(--u)*-6))}}

/* inside the phone app the top right 64 x 64 px belongs to the app */
.in-app #c-coins{left:calc(var(--u)*290);width:calc(var(--u)*200)}
.in-app #c-gems{left:calc(var(--u)*498);width:calc(var(--u)*200)}
.in-app .c1 #floorPill{left:calc(var(--u)*270);width:calc(var(--u)*145)}
.in-app .c1 #heightPill{left:calc(var(--u)*423);width:calc(var(--u)*135)}
.in-app .c1 #coinPill{left:calc(var(--u)*566);width:calc(var(--u)*130)}
.in-app .c2 #pause{left:calc(var(--u)*630);top:calc(var(--u)*148)}