:root{--w:min(100vw,calc(100vh*800/1789));--u:calc(var(--w)/800);
--navy:#0c2250;--ink:#07122f;--gold:#ffc83a;--gold2:#ff9d12;--cy:#6fe3ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#050d26;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(#0f2a62,#07152f)}
#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)*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}
.t4{-webkit-text-stroke:calc(var(--u)*3) var(--ink);paint-order:stroke fill}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pill{background:linear-gradient(rgba(18,44,98,.92),rgba(8,24,62,.94));border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*2) #27549f,0 calc(var(--u)*4) 0 rgba(3,10,34,.45);border-radius:calc(var(--u)*34)}
.plus{color:#1f8cff}

/* LOADING */
#s-loading{background:linear-gradient(#10306e,#06132e)}
.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)}
#loadMsg{color:#fff;font-size:calc(var(--u)*34)}
#s-loading.err{cursor:pointer}

/* LOBBY top (H 1789) */
#lobbyLogo{left:calc(var(--u)*28);top:calc(var(--u)*30);width:calc(var(--u)*230);height:calc(var(--u)*155)}
#lobbyLogo img{width:100%;height:100%;object-fit:contain}
#gemChip{left:calc(var(--u)*290);top:calc(var(--u)*78);width:calc(var(--u)*228);height:calc(var(--u)*68)}
#gemChip>*{position:absolute}
#gemChip img{left:calc(var(--u)*18);top:calc(var(--u)*7);width:calc(var(--u)*54);height:calc(var(--u)*54);object-fit:contain}
#gemChip b{left:calc(var(--u)*66);top:0;width:calc(var(--u)*100);text-align:center;font-size:calc(var(--u)*38);line-height:calc(var(--u)*68);white-space:nowrap}
#gemsPlus{left:calc(var(--u)*168);top:calc(var(--u)*9);width:calc(var(--u)*50);height:calc(var(--u)*50);color:#1f8cff;filter:drop-shadow(0 calc(var(--u)*3) 0 #06236a)}
#gemsPlus svg{width:100%;height:100%}
#timeChip{left:calc(var(--u)*538);top:calc(var(--u)*78);width:calc(var(--u)*168);height:calc(var(--u)*68)}
#timeChip>*{position:absolute}
#timeChip svg{left:calc(var(--u)*14);top:calc(var(--u)*11);width:calc(var(--u)*46);height:calc(var(--u)*46)}
#timeChip b{left:calc(var(--u)*58);top:0;width:calc(var(--u)*104);text-align:center;font-size:calc(var(--u)*38);line-height:calc(var(--u)*68);white-space:nowrap}
#settings{left:calc(var(--u)*725);top:calc(var(--u)*80);width:calc(var(--u)*65);height:calc(var(--u)*65);border-radius:calc(var(--u)*20);display:flex;align-items:center;justify-content:center}
#settings svg{width:calc(var(--u)*46);height:calc(var(--u)*46)}

/* mission card */
#mission{left:calc(var(--u)*25);bottom:calc(var(--u)*449);width:calc(var(--u)*750);height:calc(var(--u)*298);border-radius:calc(var(--u)*28);background:linear-gradient(#10316f,#0a1f4d);border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a5cb8,0 calc(var(--u)*6) 0 rgba(3,10,34,.5);cursor:pointer}
#mission>*{position:absolute}
.mthumb{left:calc(var(--u)*22);top:calc(var(--u)*25);width:calc(var(--u)*279);height:calc(var(--u)*248);border-radius:calc(var(--u)*16);border:calc(var(--u)*5) solid #f3b92c;overflow:hidden;background:#0a1d4a;box-shadow:0 0 0 calc(var(--u)*2) #6b4608}
.mthumb img{width:100%;height:100%;object-fit:cover}
.mthumb .lock{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,12,40,.62)}
.mthumb .lock svg{width:calc(var(--u)*78);height:calc(var(--u)*78)}
#mission.locked .lock{display:flex}
#mission.locked .mthumb img{filter:grayscale(.75) brightness(.7)}
#missionStars{left:calc(var(--u)*588);top:calc(var(--u)*9);display:flex;gap:calc(var(--u)*2);color:#3b6fd6}
#missionStars svg{width:calc(var(--u)*44);height:calc(var(--u)*44)}
#missionStars[data-n="1"] svg:nth-child(-n+1),#missionStars[data-n="2"] svg:nth-child(-n+2),#missionStars[data-n="3"] svg{color:#ffc83a;filter:drop-shadow(0 calc(var(--u)*2) 0 #8a5a06)}
#mission.locked #missionStars{display:none}
.mname{left:calc(var(--u)*333);top:calc(var(--u)*44);font-size:calc(var(--u)*46);line-height:calc(var(--u)*56);white-space:nowrap;-webkit-text-stroke:calc(var(--u)*5) var(--ink)}
.mline{position:absolute;left:calc(var(--u)*333);top:calc(var(--u)*106);width:calc(var(--u)*340);font-size:calc(var(--u)*29);line-height:calc(var(--u)*34);color:#a9c3f0;font-weight:700}
.mreward{left:calc(var(--u)*333);top:calc(var(--u)*199);width:calc(var(--u)*388);height:calc(var(--u)*72);border-radius:calc(var(--u)*20);background:#091b45;border:calc(var(--u)*3) solid #1d3f87;display:flex;align-items:center;padding:0 calc(var(--u)*22) 0 calc(var(--u)*16)}
.mreward img{width:calc(var(--u)*52);height:calc(var(--u)*52);object-fit:contain}
.mreward b{font-size:calc(var(--u)*38);line-height:1;margin:0 0 0 calc(var(--u)*18);width:calc(var(--u)*84)}
.mreward img+b+img{margin-left:calc(var(--u)*56)}
#mission.locked .mreward{opacity:.5}

#start{left:calc(var(--u)*85);bottom:calc(var(--u)*259);width:calc(var(--u)*630);height:calc(var(--u)*164);border-radius:calc(var(--u)*46);background:linear-gradient(#ffe270 0,#ffc531 42%,#ffa514 100%);border:calc(var(--u)*5) solid #9a5a0a;box-shadow:inset 0 calc(var(--u)*8) 0 #fff3b0,inset 0 calc(var(--u)*-9) 0 #eb8a0c,0 calc(var(--u)*8) 0 #7a4306,0 0 calc(var(--u)*40) rgba(255,190,50,.35)}
#start img{position:absolute;left:calc(var(--u)*68);top:calc(var(--u)*32);width:calc(var(--u)*100);height:calc(var(--u)*100);object-fit:contain}
#start b{position:absolute;left:calc(var(--u)*135);right:calc(var(--u)*25);top:0;text-align:center;font-size:calc(var(--u)*62);line-height:calc(var(--u)*154);font-style:italic;white-space:nowrap;color:#4a2a08;-webkit-text-stroke:0;text-shadow:0 calc(var(--u)*3) 0 rgba(255,235,160,.7)}
#start:active,#again:active{transform:translateY(calc(var(--u)*4))}
#start:disabled{filter:grayscale(1) brightness(.62);cursor:default}

#tabbar{left:0;right:0;bottom:0;height:calc(var(--u)*249);background:linear-gradient(rgba(4,12,38,0),rgba(4,12,38,.86) 22%);pointer-events:none}
.tab{position:absolute;top:calc(var(--u)*20);width:calc(var(--u)*178);height:calc(var(--u)*162);border-radius:calc(var(--u)*28);background:linear-gradient(rgba(20,50,110,.86),rgba(9,26,70,.92));border:calc(var(--u)*3) solid #14336f;box-shadow:inset 0 0 0 calc(var(--u)*2) rgba(70,120,210,.35);pointer-events:auto}
#tab-heist{left:calc(var(--u)*22)}#tab-thieves{left:calc(var(--u)*215)}#tab-vault{left:calc(var(--u)*407)}#tab-shop{left:calc(var(--u)*599)}
.tab img{position:absolute;left:calc(var(--u)*49);top:calc(var(--u)*10);width:calc(var(--u)*80);height:calc(var(--u)*80);object-fit:contain;opacity:.88}
.tab b{position:absolute;left:0;right:0;top:calc(var(--u)*108);text-align:center;font-size:calc(var(--u)*28);line-height:calc(var(--u)*34);color:#b6c8ee;-webkit-text-stroke:calc(var(--u)*3) var(--ink)}
.tab.on b{color:var(--gold)}
.tab.on img{opacity:1}
.tab.on::after{content:"";position:absolute;left:calc(var(--u)*8);right:calc(var(--u)*8);bottom:calc(var(--u)*-4);height:calc(var(--u)*7);border-radius:calc(var(--u)*4);background:var(--gold);box-shadow:0 0 calc(var(--u)*14) rgba(255,200,58,.8)}

/* sheets */
.sheet{left:0;right:0;top:calc(var(--u)*205);bottom:calc(var(--u)*249);display:none;padding:calc(var(--u)*22) calc(var(--u)*30);background:linear-gradient(rgba(8,26,70,.96),rgba(5,16,46,.98));border-radius:calc(var(--u)*36) calc(var(--u)*36) 0 0;border-top:calc(var(--u)*4) solid #2a62c4;overflow:auto;touch-action:pan-y}
.sheet.open{display:block}
.sheet h2,.win h2{margin:0 0 calc(var(--u)*18);text-align:center;font-size:calc(var(--u)*56)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*22)}
.grid button{position:relative;height:calc(var(--u)*420);border-radius:calc(var(--u)*26);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*4) solid #061330;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)*300);height:calc(var(--u)*320);object-fit:contain}
.grid b{font-size:calc(var(--u)*38);margin-top:calc(var(--u)*6);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}
.note{text-align:center;font-size:calc(var(--u)*28);color:#a9c3f0;margin:calc(var(--u)*20) 0 0}
.soon{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*24);margin-top:calc(var(--u)*120)}
.soon img{width:calc(var(--u)*180);height:calc(var(--u)*180);object-fit:contain}
.soon b{font-size:calc(var(--u)*64)}
.vrow{display:flex;gap:calc(var(--u)*20);margin-bottom:calc(var(--u)*22)}
.vchip{flex:1;height:calc(var(--u)*96);border-radius:calc(var(--u)*26);background:#091b45;border:calc(var(--u)*3) solid #1d3f87;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*18)}
.vchip img{width:calc(var(--u)*64);height:calc(var(--u)*64);object-fit:contain}
.vchip b{font-size:calc(var(--u)*46);line-height:1}
.vm{display:flex;align-items:center;height:calc(var(--u)*120);margin-bottom:calc(var(--u)*16);padding:0 calc(var(--u)*28);border-radius:calc(var(--u)*26);background:linear-gradient(#10316f,#0a1f4d);border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a5cb8}
.vm b{flex:1;font-size:calc(var(--u)*38);white-space:nowrap}
.vm .vs{display:flex;gap:calc(var(--u)*2);color:#3b6fd6;margin-right:calc(var(--u)*26)}
.vm .vs svg{width:calc(var(--u)*42);height:calc(var(--u)*42)}
.vm .vs .g{color:#ffc83a}
.vm span{font-size:calc(var(--u)*36);width:calc(var(--u)*130);text-align:right;color:#d3e6ff}

/* HEIST: shared */
#danger{inset:0;pointer-events:none!important;opacity:0;box-shadow:inset 0 0 calc(var(--u)*150) calc(var(--u)*36) rgba(255,36,36,.85);transition:opacity .15s}
#danger.chase{animation:pulse .7s ease-in-out infinite alternate}
@keyframes pulse{from{filter:brightness(.7)}to{filter:brightness(1.25)}}
#hint{left:50%;top:calc(var(--u)*790);transform:translateX(-50%);max-width:calc(var(--u)*700);padding:calc(var(--u)*12) calc(var(--u)*34);border-radius:calc(var(--u)*34);background:rgba(7,20,56,.74);border:calc(var(--u)*3) solid rgba(42,98,196,.8);font-size:calc(var(--u)*38);line-height:calc(var(--u)*48);white-space:nowrap;text-align:center;pointer-events:none!important;opacity:0;transition:opacity .25s}
#hint.show{opacity:1}
#stick{touch-action:none;border-radius:50%;background:radial-gradient(circle,rgba(30,44,80,.88) 38%,rgba(14,24,54,.9));border:calc(var(--u)*5) solid #6f95d8;box-shadow:inset 0 0 0 calc(var(--u)*3) rgba(10,24,64,.8),0 calc(var(--u)*6) 0 rgba(3,10,34,.4)}
#stick .arr{position:absolute;inset:0;width:100%;height:100%}
#knob{position:absolute;left:50%;top:50%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fbfdff,#c3cde0 55%,#8d9cba);border:calc(var(--u)*4) solid #5a6a8c;box-shadow:inset 0 calc(var(--u)*-7) 0 rgba(0,20,100,.28),0 calc(var(--u)*6) 0 rgba(3,10,34,.45)}
#sneak,#smoke{touch-action:none}
#sneak:active,#smoke:active{transform:scale(.95)}
#smokeCount{position:absolute;border-radius:50%;background:linear-gradient(#17408a,#0a1f50);border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*2) #4c82e0;text-align:center}
#smoke.cd{filter:saturate(.35) brightness(.75)}
#timer.late{color:#ff5a4a}
#timerPill.tick{animation:tick 1s steps(1) infinite}
@keyframes tick{50%{transform:scale(1.07)}}
#s-play.jewel #gemPill,#s-play.jewel #stars{box-shadow:inset 0 0 0 calc(var(--u)*2) #27549f,0 0 calc(var(--u)*22) rgba(94,220,255,.8)}
#stars svg{color:#25447f}
#stars[data-n="1"] svg:nth-child(-n+1),#stars[data-n="2"] svg:nth-child(-n+2),#stars[data-n="3"] svg{color:#ffc83a;filter:drop-shadow(0 calc(var(--u)*2) 0 #8a5a06)}

/* HEIST chapter 1 (H 1793) */
#s-play.c1 #pause{left:calc(var(--u)*28);top:calc(var(--u)*28);width:calc(var(--u)*200);height:calc(var(--u)*130)}
#s-play #pause img{width:100%;height:100%;object-fit:contain}
#s-play.c1 #tag{left:calc(var(--u)*248);top:calc(var(--u)*66);width:calc(var(--u)*174);height:calc(var(--u)*64)}
#tag b{display:block;font-size:calc(var(--u)*30);line-height:calc(var(--u)*58);width:100%;text-align:center;color:#e8f1ff}
#s-play.c1 #gemPill{left:calc(var(--u)*463);top:calc(var(--u)*66);width:calc(var(--u)*155);height:calc(var(--u)*64)}
#gemPill>*,#timerPill>*,#coinPill>*{position:absolute}
#gemPill img{left:calc(var(--u)*12);top:calc(var(--u)*8);width:calc(var(--u)*46);height:calc(var(--u)*46);object-fit:contain}
#gemPill b{left:calc(var(--u)*62);top:0;width:calc(var(--u)*90);text-align:center;font-size:calc(var(--u)*32);line-height:calc(var(--u)*58);white-space:nowrap}
#s-play.c1 #timerPill{left:calc(var(--u)*632);top:calc(var(--u)*66);width:calc(var(--u)*158);height:calc(var(--u)*64)}
#timerPill svg{left:calc(var(--u)*12);top:calc(var(--u)*8);width:calc(var(--u)*44);height:calc(var(--u)*44)}
#timerPill b{left:calc(var(--u)*56);top:0;width:calc(var(--u)*98);text-align:center;font-size:calc(var(--u)*32);line-height:calc(var(--u)*58)}
#s-play.c1 #coinPill,#s-play.c1 #gear,#s-play.c1 #objective,#s-play.c1 #stars,#s-play.c1 #smokeLbl{display:none}
#s-play.c1 #stick{left:calc(var(--u)*12);bottom:calc(var(--u)*75);width:calc(var(--u)*270);height:calc(var(--u)*270)}
#s-play.c1 #knob{width:calc(var(--u)*110);height:calc(var(--u)*110);margin:calc(var(--u)*-55) 0 0 calc(var(--u)*-55)}
#s-play.c1 #smoke{left:calc(var(--u)*415);bottom:calc(var(--u)*116);width:calc(var(--u)*140);height:calc(var(--u)*140);border-radius:50%;background:radial-gradient(circle at 50% 35%,#16377d,#0a1d4e 78%);border:calc(var(--u)*5) solid #e0a826;box-shadow:inset 0 0 0 calc(var(--u)*3) #07163a,0 calc(var(--u)*6) 0 rgba(3,10,34,.5)}
#s-play.c1 #smoke img{position:absolute;left:calc(var(--u)*20);top:calc(var(--u)*20);width:calc(var(--u)*100);height:calc(var(--u)*100);object-fit:contain}
#s-play.c1 #smokeCount{left:calc(var(--u)*84);top:calc(var(--u)*83);width:calc(var(--u)*56);height:calc(var(--u)*56);font-size:calc(var(--u)*34);line-height:calc(var(--u)*50)}
#s-play.c1 #sneak{left:calc(var(--u)*580);bottom:calc(var(--u)*106);width:calc(var(--u)*200);height:calc(var(--u)*200);border-radius:50%;background:radial-gradient(circle at 50% 28%,#ffe270,#ffb521 66%,#f08f10);border:calc(var(--u)*6) solid #7a4306;box-shadow:inset 0 0 0 calc(var(--u)*6) #ffeb92,0 calc(var(--u)*8) 0 rgba(60,25,0,.55)}
#s-play.c1 #sneak img{position:absolute;left:calc(var(--u)*52);top:calc(var(--u)*26);width:calc(var(--u)*95);height:calc(var(--u)*95);object-fit:contain}
#s-play.c1 #sneak b{position:absolute;left:0;right:0;top:calc(var(--u)*128);text-align:center;font-size:calc(var(--u)*34);line-height:calc(var(--u)*34);color:#4a2a08;-webkit-text-stroke:0}
#s-play.c1 #sneak.on{box-shadow:inset 0 0 0 calc(var(--u)*6) #aef3ff,0 0 0 calc(var(--u)*6) #38d4ff,0 0 calc(var(--u)*34) calc(var(--u)*8) rgba(80,220,255,.85),0 calc(var(--u)*8) 0 rgba(60,25,0,.55)}

/* HEIST chapter 2 (H 1807) */
#s-play.c2 #pause{left:calc(var(--u)*30);top:calc(var(--u)*28);width:calc(var(--u)*240);height:calc(var(--u)*162)}
#s-play.c2 #tag,#s-play.c2 #gemPill{display:none}
#s-play.c2 #coinPill{left:calc(var(--u)*508);top:calc(var(--u)*68);width:calc(var(--u)*196);height:calc(var(--u)*60);border-radius:calc(var(--u)*30);background:rgba(10,26,66,.7);border-color:rgba(6,19,48,.7)}
#coinPill img{left:calc(var(--u)*6);top:calc(var(--u)*2);width:calc(var(--u)*56);height:calc(var(--u)*56);object-fit:contain}
#coinPill b{left:calc(var(--u)*60);top:0;width:calc(var(--u)*84);text-align:center;font-size:calc(var(--u)*27);line-height:calc(var(--u)*54);white-space:nowrap}
#coinPill .plus{left:calc(var(--u)*148);top:calc(var(--u)*6);width:calc(var(--u)*40);height:calc(var(--u)*40);color:#2fc65a}
#coinPill .plus svg{width:100%;height:100%}
#s-play.c2 #gear{left:calc(var(--u)*724);top:calc(var(--u)*70);width:calc(var(--u)*56);height:calc(var(--u)*56)}
#gear svg{width:100%;height:100%;filter:drop-shadow(0 calc(var(--u)*2) 0 #061330)}
#s-play.c1 #gear{display:none}
#objective{left:calc(var(--u)*15);top:calc(var(--u)*210);width:calc(var(--u)*320);height:calc(var(--u)*110);border-radius:calc(var(--u)*16);background:linear-gradient(rgba(14,34,82,.94),rgba(8,24,62,.95));border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*2) #27549f;pointer-events:none!important}
#objective>*{position:absolute}
#objective svg{left:calc(var(--u)*20);top:calc(var(--u)*20);width:calc(var(--u)*42);height:calc(var(--u)*42)}
#objective b{left:calc(var(--u)*68);top:calc(var(--u)*14);font-size:calc(var(--u)*26);line-height:calc(var(--u)*30);white-space:nowrap}
#objective span{left:calc(var(--u)*68);top:calc(var(--u)*46);width:calc(var(--u)*238);font-size:calc(var(--u)*19);line-height:calc(var(--u)*25);font-weight:800;color:#e6f0ff}
#s-play.c2 #stars{left:calc(var(--u)*608);top:calc(var(--u)*198);width:calc(var(--u)*178);height:calc(var(--u)*60);border-radius:calc(var(--u)*14);background:rgba(10,26,66,.7);border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*2) #27549f;display:flex;align-items:center;justify-content:space-around;padding:0 calc(var(--u)*12);pointer-events:none!important}
#stars svg{width:calc(var(--u)*40);height:calc(var(--u)*40)}
#s-play.c2 #timerPill{left:calc(var(--u)*652);top:calc(var(--u)*268);width:calc(var(--u)*134);height:calc(var(--u)*48);border-radius:calc(var(--u)*24)}
#s-play.c2 #timerPill svg{left:calc(var(--u)*8);top:calc(var(--u)*5);width:calc(var(--u)*36);height:calc(var(--u)*36)}
#s-play.c2 #timerPill b{left:calc(var(--u)*44);width:calc(var(--u)*86);font-size:calc(var(--u)*28);line-height:calc(var(--u)*42)}
#s-play.c2.mock #timerPill{visibility:hidden}
#s-play.c2 #stick{left:calc(var(--u)*22);bottom:calc(var(--u)*160);width:calc(var(--u)*260);height:calc(var(--u)*260);border-color:#1fc8f0;background:radial-gradient(circle,rgba(14,26,62,.9) 38%,rgba(8,16,44,.92));box-shadow:inset 0 0 0 calc(var(--u)*4) rgba(10,30,80,.9),0 0 calc(var(--u)*18) rgba(40,200,240,.35),0 calc(var(--u)*6) 0 rgba(3,10,34,.4)}
#s-play.c2 #knob{width:calc(var(--u)*124);height:calc(var(--u)*124);margin:calc(var(--u)*-62) 0 0 calc(var(--u)*-62);background:radial-gradient(circle at 40% 30%,#e8eef8,#9aa6bd 55%,#6b7690);border-color:#47536f}
#s-play.c2 #sneak{left:calc(var(--u)*52);bottom:calc(var(--u)*115);width:calc(var(--u)*200);height:calc(var(--u)*50)}
#s-play.c2 #sneak img{display:none}
#s-play.c2 #sneak b{display:block;text-align:center;font-size:calc(var(--u)*32);line-height:calc(var(--u)*50);color:#fff}
#s-play.c2 #sneak.on b{color:var(--cy);text-shadow:0 0 calc(var(--u)*16) rgba(80,220,255,.9)}
#s-play.c2 #smoke{left:calc(var(--u)*578);bottom:calc(var(--u)*168);width:calc(var(--u)*224);height:calc(var(--u)*224);border-radius:50%;background:radial-gradient(circle at 50% 35%,#16295c,#0a1438 78%);border:calc(var(--u)*6) solid #1fc8f0;box-shadow:inset 0 0 0 calc(var(--u)*4) rgba(10,30,80,.9),0 0 calc(var(--u)*22) rgba(40,200,240,.4),0 calc(var(--u)*6) 0 rgba(3,10,34,.4)}
#s-play.c2 #smoke img{position:absolute;left:calc(var(--u)*37);top:calc(var(--u)*37);width:calc(var(--u)*150);height:calc(var(--u)*150);object-fit:contain}
#s-play.c2 #smokeCount{left:calc(var(--u)*133);top:calc(var(--u)*3);width:calc(var(--u)*64);height:calc(var(--u)*64);font-size:calc(var(--u)*40);line-height:calc(var(--u)*58)}
#s-play.c2 #smokeLbl{position:absolute;left:calc(var(--u)*-10);right:calc(var(--u)*-10);top:calc(var(--u)*226);text-align:center;font-size:calc(var(--u)*27);line-height:calc(var(--u)*30);color:#fff}

/* RESULT (H 1789) */
#outcome{left:calc(var(--u)*50);top:calc(var(--u)*17);width:calc(var(--u)*700);height:calc(var(--u)*467);pointer-events:none!important}
#banner{width:100%;height:100%;object-fit:contain}
#reason{left:0;width:calc(var(--u)*800);top:calc(var(--u)*398);text-align:center;font-size:calc(var(--u)*30);line-height:calc(var(--u)*44);color:#bcd4ff;pointer-events:none!important}
#resultStars{left:calc(var(--u)*200);top:calc(var(--u)*465);width:calc(var(--u)*400);height:calc(var(--u)*120);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*20);color:#1c3d82;pointer-events:none!important}
#resultStars svg{width:calc(var(--u)*110);height:calc(var(--u)*110);filter:drop-shadow(0 calc(var(--u)*4) 0 #061330)}
#resultStars svg:nth-child(2){margin-top:calc(var(--u)*-18)}
#resultStars[data-n="1"] svg:nth-child(-n+1),#resultStars[data-n="2"] svg:nth-child(-n+2),#resultStars[data-n="3"] svg{color:#ffc83a;filter:drop-shadow(0 calc(var(--u)*4) 0 #8a5a06);animation:starpop .5s cubic-bezier(.2,1.6,.4,1) both}
#resultStars svg:nth-child(2){animation-delay:.25s!important}#resultStars svg:nth-child(3){animation-delay:.5s!important}
@keyframes starpop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
#rpanel{left:calc(var(--u)*25);bottom:calc(var(--u)*399);width:calc(var(--u)*750);height:calc(var(--u)*300);border-radius:calc(var(--u)*28);background:linear-gradient(#10316f,#0a1f4d);border:calc(var(--u)*3) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a5cb8,0 calc(var(--u)*6) 0 rgba(3,10,34,.5)}
#rpanel>*{position:absolute}
.tile{top:calc(var(--u)*20);width:calc(var(--u)*226);height:calc(var(--u)*156);border-radius:calc(var(--u)*20);background:#091b45;border:calc(var(--u)*3) solid #1d3f87}
.tile:nth-child(1){left:calc(var(--u)*20)}.tile:nth-child(2){left:calc(var(--u)*262)}.tile:nth-child(3){left:calc(var(--u)*504)}
.tile>*{position:absolute;left:0;right:0;margin:auto}
.tile img,.tile svg{top:calc(var(--u)*8);width:calc(var(--u)*64);height:calc(var(--u)*64);object-fit:contain}
.tile b{top:calc(var(--u)*72);text-align:center;font-size:calc(var(--u)*46);line-height:calc(var(--u)*50);white-space:nowrap}
.tile span{top:calc(var(--u)*122);text-align:center;font-size:calc(var(--u)*24);line-height:calc(var(--u)*26);color:#a9c3f0;font-weight:800}
#chips{left:calc(var(--u)*20);right:calc(var(--u)*20);top:calc(var(--u)*196);height:calc(var(--u)*84);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*16)}
#chips i{display:flex;align-items:center;height:calc(var(--u)*60);padding:0 calc(var(--u)*28);border-radius:calc(var(--u)*30);background:#0b1f50;border:calc(var(--u)*3) solid #ffc83a;font-size:calc(var(--u)*30);color:#ffe27a;-webkit-text-stroke:calc(var(--u)*3) var(--ink);paint-order:stroke fill;white-space:nowrap}
#again{left:calc(var(--u)*85);bottom:calc(var(--u)*219);width:calc(var(--u)*630);height:calc(var(--u)*150);border-radius:calc(var(--u)*44);background:linear-gradient(#ffe270 0,#ffc531 42%,#ffa514 100%);border:calc(var(--u)*5) solid #9a5a0a;box-shadow:inset 0 calc(var(--u)*8) 0 #fff3b0,inset 0 calc(var(--u)*-9) 0 #eb8a0c,0 calc(var(--u)*8) 0 #7a4306}
#again img{position:absolute;left:calc(var(--u)*62);top:calc(var(--u)*25);width:calc(var(--u)*90);height:calc(var(--u)*90);object-fit:contain}
#again b{position:absolute;left:calc(var(--u)*130);right:calc(var(--u)*25);top:0;text-align:center;font-size:calc(var(--u)*58);line-height:calc(var(--u)*140);font-style:italic;white-space:nowrap;color:#4a2a08;-webkit-text-stroke:0;text-shadow:0 calc(var(--u)*3) 0 rgba(255,235,160,.7)}
#home{left:calc(var(--u)*250);bottom:calc(var(--u)*89);width:calc(var(--u)*300);height:calc(var(--u)*100);border-radius:calc(var(--u)*30);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*20);background:linear-gradient(#18458f,#0b2352);border:calc(var(--u)*5) solid #061330;box-shadow:inset 0 0 0 calc(var(--u)*3) #2a62c4,0 calc(var(--u)*6) 0 rgba(3,10,34,.5)}
#home svg{width:calc(var(--u)*50);height:calc(var(--u)*50)}
#home b{font-size:calc(var(--u)*42);line-height:1}

/* modal */
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,10,34,.66);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 #061330;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 #061330}
.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}

/* in the phone app the top right 64 x 64 px belongs to the host */
.in-app #settings{left:auto;right:calc(64px + calc(var(--u)*6))}
.in-app #gemChip{left:calc(var(--u)*262);width:calc(var(--u)*176)}
.in-app #gemChip b{left:calc(var(--u)*56);width:calc(var(--u)*70);font-size:calc(var(--u)*32)}
.in-app #gemsPlus{left:calc(var(--u)*128);top:calc(var(--u)*12);width:calc(var(--u)*44);height:calc(var(--u)*44)}
.in-app #timeChip{left:auto;right:calc(64px + calc(var(--u)*80));width:calc(var(--u)*150)}
.in-app #timeChip b{width:calc(var(--u)*86);font-size:calc(var(--u)*32)}
.in-app #s-play.c1 #tag{display:none}
.in-app #s-play.c1 #timerPill{left:auto;right:calc(64px + calc(var(--u)*8))}
.in-app #s-play.c1 #gemPill{left:auto;right:calc(64px + calc(var(--u)*178))}
.in-app #s-play.c2 #gear{left:auto;right:calc(64px + calc(var(--u)*8))}
.in-app #s-play.c2 #coinPill{left:auto;right:calc(64px + calc(var(--u)*78))}
.in-app #s-play.c2 #stars{top:calc(var(--u)*150)}
.in-app #s-play.c2 #timerPill{top:calc(var(--u)*220)}
#s-loading.err{pointer-events:auto}