:root{--w:min(100vw,calc(100vh*800/1792));--u:calc(var(--w)/800);
--ink:#0a1030;--navy:#101f48;--navy2:#0a1433;--rim:#3a62b0;--cy:#4fe0ff;--gold:#ffc83a;--gold2:#e8901a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0920;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,small{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(#2a1d5c,#0d0a26)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;display:none;pointer-events:none;z-index:2}
.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}
.panel{background:linear-gradient(#142a5c,#0a1536);border:calc(var(--u)*4) solid #070d26;box-shadow:inset 0 0 0 calc(var(--u)*2) #3a62b0,0 calc(var(--u)*4) 0 rgba(4,6,24,.5)}
.goldbtn{background:linear-gradient(#ffd94a 0,#ffc02a 45%,#e8901a 100%);border:calc(var(--u)*5) solid #7a3d05;box-shadow:inset 0 calc(var(--u)*6) 0 #fff0a0,inset 0 calc(var(--u)*-7) 0 #d97f0a,0 calc(var(--u)*6) 0 #5a2c04;display:flex;align-items:center;justify-content:center}
.goldbtn b{-webkit-text-stroke:calc(var(--u)*7) #a85a08;text-shadow:0 calc(var(--u)*4) 0 #8a4604}
.goldbtn:active{transform:translateY(calc(var(--u)*4))}
.goldbtn:disabled{filter:grayscale(1) brightness(.65);cursor:default}
.bluebtn{background:linear-gradient(#2a7ae0,#10408f);border:calc(var(--u)*5) solid #070d26}
.dia{position:absolute;width:calc(var(--u)*18);height:calc(var(--u)*18);transform:rotate(45deg);background:var(--gold);box-shadow:0 0 0 calc(var(--u)*2) #7a3d05}
[data-fb] .fb{position:absolute}
[data-fb].art .fb{display:none}

/* ---------- top bar ---------- */
#topbar{position:absolute;inset:0;pointer-events:none;z-index:3;display:none}
#phone[data-screen=lobby] #topbar,#phone[data-screen=play] #topbar{display:block}
#topbar>*{position:absolute;pointer-events:none}
#heartsPanel{left:calc(var(--u)*5);top:calc(var(--u)*58);width:calc(var(--u)*232);height:calc(var(--u)*88);border-radius:calc(var(--u)*30)}
#hearts{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*20) calc(var(--u)*2)}
.heart{position:relative;width:calc(var(--u)*56);height:calc(var(--u)*52);display:block}
.heart svg{position:absolute;left:0;top:0;width:calc(var(--u)*56);height:calc(var(--u)*52);stroke:#5a0a1c;stroke-width:1.600;stroke-linejoin:round;paint-order:stroke}
.heart .bg{fill:#3a1a34}
.heart i{position:absolute;left:0;top:0;height:100%;width:0;overflow:hidden;display:block}
.heart i svg{fill:#ff3a45;stroke:#8a0a22;filter:drop-shadow(0 calc(var(--u)*1) 0 rgba(255,255,255,.35))}
#title{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;letter-spacing:calc(var(--u)*1)}
#title b{display:block;line-height:.95;-webkit-text-stroke:calc(var(--u)*5) var(--ink);paint-order:stroke fill;text-shadow:0 calc(var(--u)*4) 0 var(--ink)}
#title .gold{color:#ffd23a;font-size:1em}
#title .white{color:#fff;font-size:.62em}
#title .dia{top:50%;margin-top:calc(var(--u)*-9)}
#title .dia.l{left:calc(var(--u)*14)}#title .dia.r{right:calc(var(--u)*14)}
#coinChip{display:flex;align-items:center;gap:calc(var(--u)*12)}
#coinChip svg,#coinChip img{width:calc(var(--u)*56);height:calc(var(--u)*56);object-fit:contain;position:relative}
#coinChip svg{position:absolute}
#coinChip img{flex:none}
#coinChip b{font-size:calc(var(--u)*38);line-height:1;margin-left:calc(var(--u)*0)}
#settings{width:calc(var(--u)*76);height:calc(var(--u)*86);border-radius:calc(var(--u)*24);display:none;align-items:center;justify-content:center;pointer-events:auto!important}
#settings svg{width:calc(var(--u)*50);height:calc(var(--u)*50)}
#pause{display:none;width:calc(var(--u)*68);height:calc(var(--u)*68);border-radius:50%;background:linear-gradient(#142a5c,#0a1536);border:calc(var(--u)*4) solid #070d26;box-shadow:inset 0 0 0 calc(var(--u)*2) #3a62b0,0 calc(var(--u)*4) 0 rgba(4,6,24,.5);align-items:center;justify-content:center;pointer-events:auto!important}
#pause svg{width:calc(var(--u)*40);height:calc(var(--u)*40)}
/* lobby geometry */
#phone[data-screen=lobby] #title{left:calc(var(--u)*250);top:calc(var(--u)*45);width:calc(var(--u)*295);height:calc(var(--u)*115);border-radius:calc(var(--u)*24);font-size:calc(var(--u)*60)}
#phone[data-screen=lobby] #coinChip{left:calc(var(--u)*557);top:calc(var(--u)*62);width:calc(var(--u)*163);height:calc(var(--u)*86);border-radius:calc(var(--u)*30);padding-left:calc(var(--u)*20)}
#phone[data-screen=lobby] #settings{display:flex;left:calc(var(--u)*722);top:calc(var(--u)*62)}
/* play geometry */
#phone[data-screen=play] #heartsPanel{top:calc(var(--u)*52);height:calc(var(--u)*86);width:calc(var(--u)*238)}
#phone[data-screen=play] #title{left:calc(var(--u)*272);top:calc(var(--u)*42);width:calc(var(--u)*256);height:calc(var(--u)*106);border-radius:calc(var(--u)*22);font-size:calc(var(--u)*52)}
#phone[data-screen=play] #coinChip{left:calc(var(--u)*557);top:calc(var(--u)*52);width:calc(var(--u)*241);height:calc(var(--u)*86);border-radius:calc(var(--u)*30) 0 0 calc(var(--u)*30);padding-left:calc(var(--u)*38);border-right:0}
#phone[data-screen=play] #pause{display:flex;left:calc(var(--u)*718);top:calc(var(--u)*162)}
#phone.in-app[data-screen=play] #coinChip{width:calc(100% - var(--u)*557 - 70px);min-width:calc(var(--u)*140);padding-left:calc(var(--u)*24)}
#phone.in-app[data-screen=play] #coinChip b{font-size:calc(var(--u)*34)}
#phone.in-app[data-screen=lobby] #settings{top:max(calc(var(--u)*158),74px)}

/* ---------- loading ---------- */
#s-loading{background:linear-gradient(#2a1d5c,#0d0a26)}
.logo-big{left:calc(var(--u)*100);top:calc(var(--u)*500);width:calc(var(--u)*600);height:calc(var(--u)*330);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:#070d26;border:calc(var(--u)*3) solid #3a62b0;overflow:hidden}
#loadFill{display:block;height:100%;width:0;background:linear-gradient(#ffe27a,#e8901a)}
.loadtxt{left:0;width:100%;top:calc(var(--u)*950);text-align:center;font-size:calc(var(--u)*30)}
#loadMsg{display:none;top:calc(var(--u)*900);font-size:calc(var(--u)*38);padding:0 calc(var(--u)*40);line-height:1.3;cursor:pointer}
#loadMsg small{display:block;font-size:.6em;color:#c5d6f5;margin-top:calc(var(--u)*10);-webkit-text-stroke:0;text-shadow:none;font-weight:800}
#s-loading.err{pointer-events:auto;cursor:pointer}

/* ---------- lobby ---------- */
#gearRow{left:0;right:0;bottom:calc(var(--u)*594);height:calc(var(--u)*195);pointer-events:none}
.card{position:absolute;top:0;width:calc(var(--u)*180);height:calc(var(--u)*195);border-radius:calc(var(--u)*26);background:linear-gradient(#14295a,#0a1433);border:calc(var(--u)*4) solid #070d26;box-shadow:inset 0 0 0 calc(var(--u)*3) #2d4f94,0 calc(var(--u)*4) 0 rgba(4,6,24,.5);pointer-events:auto}
#gear-sword{left:calc(var(--u)*17)}#gear-helmet{left:calc(var(--u)*212)}#gear-armor{left:calc(var(--u)*408)}#gear-boots{left:calc(var(--u)*605)}
.card img,.card svg.fb{position:absolute;left:calc(var(--u)*25);top:calc(var(--u)*16);width:calc(var(--u)*130);height:calc(var(--u)*125);object-fit:contain}
.card .lv{position:absolute;left:calc(var(--u)*50);bottom:calc(var(--u)*14);font-size:calc(var(--u)*27);line-height:1}
.card .up{position:absolute;right:calc(var(--u)*18);bottom:calc(var(--u)*12);width:calc(var(--u)*32);height:calc(var(--u)*34);display:none}
.card.can .up{display:block}
.card.sel{box-shadow:inset 0 0 0 calc(var(--u)*5) var(--gold),0 0 calc(var(--u)*22) rgba(255,200,58,.55)}
#statsBar{left:calc(var(--u)*22);bottom:calc(var(--u)*444);width:calc(var(--u)*756);height:calc(var(--u)*123);border-radius:calc(var(--u)*28);display:flex;align-items:center}
.stat{flex:1;height:100%;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*22);position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:calc(var(--u)*16);bottom:calc(var(--u)*16);width:calc(var(--u)*3);background:#2d4f94}
.stat .ico{position:relative;width:calc(var(--u)*70);height:calc(var(--u)*70);display:block}
.stat .ico img,.stat .ico svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stat div{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.stat small{font-size:calc(var(--u)*26);color:#c9d8f5;letter-spacing:calc(var(--u)*1)}
.stat b{font-size:calc(var(--u)*50);line-height:1.05}
#enter{left:calc(var(--u)*92);bottom:calc(var(--u)*237);width:calc(var(--u)*618);height:calc(var(--u)*180);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%,#e8901a 100%);border:calc(var(--u)*6) solid #7a3d05;box-shadow:inset 0 calc(var(--u)*8) 0 #fff0a0,inset 0 calc(var(--u)*-9) 0 #d97f0a,0 calc(var(--u)*8) 0 #5a2c04;clip-path:polygon(4% 0,96% 0,100% 12%,100% 88%,96% 100%,4% 100%,0 88%,0 12%)}
#enter .dia{top:50%;margin-top:calc(var(--u)*-9)}#enter .dia.l{left:calc(var(--u)*36)}#enter .dia.r{right:calc(var(--u)*36)}
#enter .sw{position:relative;width:calc(var(--u)*130);height:calc(var(--u)*130);display:block;margin-left:calc(var(--u)*30)}
#enter .sw img,#enter .sw svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(var(--u)*4) 0 #a05a08)}
#enter b{display:flex;flex-direction:column;align-items:flex-start;line-height:.95}
#enter em{font-size:calc(var(--u)*76);color:#fff;-webkit-text-stroke:calc(var(--u)*9) #c06a08;paint-order:stroke fill;text-shadow:0 calc(var(--u)*5) 0 #b45f06;letter-spacing:calc(var(--u)*1)}
#enter em+em{font-size:calc(var(--u)*66)}
#enter:active{transform:translateY(calc(var(--u)*5))}
#tabs{left:0;right:0;bottom:0;height:calc(var(--u)*192);background:linear-gradient(#10224d,#070d26);border-top:calc(var(--u)*4) solid #070d26;box-shadow:inset 0 calc(var(--u)*3) 0 #2d4f94;pointer-events:auto;display:flex}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*6);color:#8a9cc4;flex:none;height:100%}
.tab svg,.tab img{width:calc(var(--u)*90);height:calc(var(--u)*90);object-fit:contain;opacity:.8}
.tab svg.fb{position:absolute;top:calc(var(--u)*36);left:50%;margin-left:calc(var(--u)*-45)}
.tab img{margin-bottom:0}
.tab b{font-size:calc(var(--u)*27);color:#8a9cc4;line-height:1;-webkit-text-stroke:calc(var(--u)*3) #070d26}
#tab-lobby{width:calc(var(--u)*215)}#tab-hero{width:calc(var(--u)*185)}#tab-inventory{width:calc(var(--u)*195)}#tab-quests{width:calc(var(--u)*205)}
.tab+.tab::before{content:"";position:absolute;left:0;top:calc(var(--u)*34);bottom:calc(var(--u)*34);width:calc(var(--u)*3);background:#1d3470}
.tab.on{color:#4fe0ff}
.tab.on svg{opacity:1;filter:drop-shadow(0 0 calc(var(--u)*8) rgba(79,224,255,.7))}
.tab.on b{color:#fff}
#tab-lobby.on{background:linear-gradient(#173a6e,#0c1a40);border-radius:calc(var(--u)*34) calc(var(--u)*34) 0 0;border:calc(var(--u)*4) solid #070d26;border-bottom:0;box-shadow:inset 0 calc(var(--u)*3) 0 #4fe0ff;margin-top:calc(var(--u)*-4);height:calc(var(--u)*188)}
#tab-lobby.on::after{content:"";position:absolute;left:calc(var(--u)*36);right:calc(var(--u)*36);bottom:calc(var(--u)*30);height:calc(var(--u)*5);border-radius:calc(var(--u)*3);background:#4fe0ff;box-shadow:0 0 calc(var(--u)*10) #4fe0ff}
#tab-lobby.on b{margin-bottom:calc(var(--u)*14)}
.sheet{left:0;right:0;top:calc(var(--u)*190);bottom:calc(var(--u)*192);display:none;padding:calc(var(--u)*30);background:linear-gradient(rgba(14,28,68,.96),rgba(7,12,36,.98));border-top:calc(var(--u)*4) solid #3a62b0;overflow:auto}
.sheet.open{display:block}
.sheet h2,.win h2{margin:0 0 calc(var(--u)*22);text-align:center;font-size:calc(var(--u)*64)}
.rec{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*110);margin:0 calc(var(--u)*20) calc(var(--u)*16);padding:0 calc(var(--u)*34);border-radius:calc(var(--u)*24);background:#0a1433;border:calc(var(--u)*3) solid #2d4f94}
.rec span{font-size:calc(var(--u)*38);color:#c9d8f5}.rec b{font-size:calc(var(--u)*54);line-height:1}
.soon{display:flex;justify-content:center;margin-top:calc(var(--u)*240)}.soon b{font-size:calc(var(--u)*64)}

/* ---------- modal windows ---------- */
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,4,20,.66);z-index:20;pointer-events:auto}
.modal.open{display:flex}
.win{position:relative;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(#142a5c,#0a1433);border:calc(var(--u)*5) solid #070d26;box-shadow:inset 0 0 0 calc(var(--u)*4) #3aa8d8,0 calc(var(--u)*8) 0 rgba(0,0,0,.4);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.goldbtn,.win>button.bluebtn{height:calc(var(--u)*100);border-radius:calc(var(--u)*26)}
.win>button b{font-size:calc(var(--u)*44)}
#panel:not(.inplay) #quit{display:none}
#gearWin{align-items:center;gap:calc(var(--u)*12);padding-top:calc(var(--u)*30);height:calc(var(--u)*560)}
#gearClose{position:absolute;right:calc(var(--u)*16);top:calc(var(--u)*16);width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:50%;background:#0a1433;border:calc(var(--u)*3) solid #3a62b0;display:flex;align-items:center;justify-content:center;pointer-events:auto}
#gearClose svg{width:calc(var(--u)*36);height:calc(var(--u)*36)}
.gpic{position:relative;width:calc(var(--u)*190);height:calc(var(--u)*170);display:block}
.gpic img,.gpic svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#gearName{font-size:calc(var(--u)*58);line-height:1}
.cy{color:#6fe8ff;font-size:calc(var(--u)*42);line-height:1}
.gl{color:#ffe27a;font-size:calc(var(--u)*36);line-height:1}
.price{position:relative;display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*64)}
.price img,.price svg{width:calc(var(--u)*52);height:calc(var(--u)*52);object-fit:contain}
.price svg{position:absolute;left:0}.price.art svg{display:none}.price img{position:relative}
.price b{font-size:calc(var(--u)*46);line-height:1}
#buy{width:calc(var(--u)*440);height:calc(var(--u)*100);border-radius:calc(var(--u)*26);margin-top:calc(var(--u)*6)}
#buy b{font-size:calc(var(--u)*48)}

/* ---------- play ---------- */
#bossBar{left:calc(var(--u)*150);top:calc(var(--u)*158);width:calc(var(--u)*510);height:calc(var(--u)*80);display:none;pointer-events:none}
.bskull{position:absolute;left:0;top:0;width:calc(var(--u)*80);height:calc(var(--u)*80);border-radius:50%;background:#0a1433;border:calc(var(--u)*4) solid #070d26;box-shadow:inset 0 0 0 calc(var(--u)*3) #3a62b0;display:block;z-index:1}
.bskull img,.bskull svg{position:absolute;left:calc(var(--u)*10);top:calc(var(--u)*10);width:calc(var(--u)*56);height:calc(var(--u)*56);object-fit:contain}
.btrack{position:absolute;left:calc(var(--u)*62);top:calc(var(--u)*16);width:calc(var(--u)*440);height:calc(var(--u)*46);border-radius:calc(var(--u)*23);background:#1a0f2a;border:calc(var(--u)*5) solid #070d26;box-shadow:0 0 0 calc(var(--u)*2) #3a62b0;overflow:hidden}
#bossFill{display:block;height:100%;width:100%;background:linear-gradient(#ff7a62,#e8321e 60%,#b81a0e);transition:width .15s linear;box-shadow:inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.35)}
#toast{left:0;width:100%;top:calc(var(--u)*610);text-align:center;font-size:calc(var(--u)*110);line-height:1;white-space:nowrap;pointer-events:none!important;display:none;transform:translateY(-50%)}
#toast.on{display:block;animation:pop .45s ease-out}
#toast[data-tone=clear]{color:#ffd23a}#toast[data-tone=boss]{color:#d27aff;font-size:calc(var(--u)*96)}
#toast[data-tone=room]{color:#fff}
@keyframes pop{from{transform:translateY(-50%) scale(1.6);opacity:0}30%{opacity:1}to{transform:translateY(-50%) scale(1)}}
.door{position:absolute;width:calc(var(--u)*190);height:calc(var(--u)*230);display:none;pointer-events:none;color:#ffd23a;transform:translate(-50%,-50%)}
.door svg{position:absolute;left:50%;top:calc(var(--u)*-70);width:calc(var(--u)*64);height:calc(var(--u)*64);margin-left:calc(var(--u)*-32);display:none;filter:drop-shadow(0 calc(var(--u)*4) 0 rgba(0,0,0,.4))}
.door[data-kind=combat]{color:#5df07a}.door[data-kind=boss]{color:#c26aff}
.door[data-open="1"]{pointer-events:auto}
.door[data-open="1"] svg{display:block;animation:bob .7s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(calc(var(--u)*20))}}
#stick{left:calc(var(--u)*22);bottom:calc(var(--u)*90);width:calc(var(--u)*276);height:calc(var(--u)*276);border-radius:50%;background:radial-gradient(circle,rgba(80,92,130,.88) 40%,rgba(44,54,92,.92));border:calc(var(--u)*5) solid #1e2a58;box-shadow:inset 0 0 0 calc(var(--u)*3) #4a5a96,0 calc(var(--u)*6) 0 rgba(4,6,24,.45);touch-action:none}
#stick .arr{position:absolute;inset:0;width:100%;height:100%}
#knob{position:absolute;left:calc(var(--u)*83);top:calc(var(--u)*83);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,6,24,.5)}
#attack{right:calc(var(--u)*18);bottom:calc(var(--u)*200);width:calc(var(--u)*165);height:calc(var(--u)*165);border-radius:50%;background:radial-gradient(circle at 50% 30%,#ffd94a,#f0a41a 70%,#d98a0a);border:calc(var(--u)*6) solid #6a3504;box-shadow:inset 0 0 0 calc(var(--u)*6) #ffe98a,0 calc(var(--u)*7) 0 rgba(40,18,0,.55);touch-action:none}
#attack img,#attack svg{position:absolute;left:calc(var(--u)*28);top:calc(var(--u)*28);width:calc(var(--u)*97);height:calc(var(--u)*97);object-fit:contain}
#attack:active{transform:scale(.95)}
#dash{left:calc(var(--u)*580);bottom:calc(var(--u)*60);width:calc(var(--u)*126);height:calc(var(--u)*126);border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a90f8,#1250c8 70%);border:calc(var(--u)*5) solid #07163a;box-shadow:inset 0 0 0 calc(var(--u)*5) #5ab8ff,0 calc(var(--u)*6) 0 rgba(4,6,24,.5);overflow:hidden;touch-action:none}
#dash img,#dash svg{position:absolute;left:calc(var(--u)*18);top:calc(var(--u)*18);width:calc(var(--u)*80);height:calc(var(--u)*80);object-fit:contain}
#dash:active{transform:scale(.95)}
#dash .cdv{position:absolute;inset:0;border-radius:50%;display:none;background:conic-gradient(rgba(6,10,40,.72) var(--cd,0deg),transparent 0)}
#dash.cooling .cdv{display:block}
#dash.cooling{filter:saturate(.45) brightness(.85)}
#roomPanel{left:calc(var(--u)*275);bottom:calc(var(--u)*45);width:calc(var(--u)*255);height:calc(var(--u)*108);border-radius:calc(var(--u)*28);pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*10)}
#room{font-size:calc(var(--u)*36);line-height:1;color:#fff}
#nodes{display:flex;align-items:center;gap:calc(var(--u)*13)}
#nodes i{display:block;width:calc(var(--u)*17);height:calc(var(--u)*17);border-radius:50%;background:#3a4a78;box-shadow:inset 0 calc(var(--u)*-2) 0 rgba(0,0,0,.3)}
#nodes i.on{background:#4fe0ff;box-shadow:0 0 calc(var(--u)*8) #4fe0ff}
#nodes i.sk{position:relative;width:calc(var(--u)*34);height:calc(var(--u)*34);background:#1a2448;border:calc(var(--u)*3) solid #3a4a78}
#nodes i.sk.on{border-color:#4fe0ff;box-shadow:0 0 calc(var(--u)*10) #4fe0ff}
#nodes i.sk svg{position:absolute;inset:calc(var(--u)*3);width:calc(var(--u)*22);height:calc(var(--u)*22)}
#offerWin{width:calc(var(--u)*700);height:calc(var(--u)*550);padding:calc(var(--u)*30) calc(var(--u)*24);gap:calc(var(--u)*10)}
#offer{align-items:flex-start;padding-top:calc(var(--u)*560)}
#offerCards{display:flex;gap:calc(var(--u)*14);flex:1}
#offerCards button{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*14) calc(var(--u)*6);border-radius:calc(var(--u)*24);background:linear-gradient(#18306a,#0a1433);border:calc(var(--u)*4) solid #070d26;box-shadow:inset 0 0 0 calc(var(--u)*3) #2d4f94}
#offerCards button:active{transform:scale(.97);box-shadow:inset 0 0 0 calc(var(--u)*5) var(--gold)}
#offerCards .oi{position:relative;width:calc(var(--u)*130);height:calc(var(--u)*130);display:block;flex:none}
#offerCards .oi img,#offerCards .oi svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#offerCards .nm{font-size:calc(var(--u)*30);line-height:1.05;text-align:center}
#offerCards .ol{font-size:calc(var(--u)*27);color:#ffe27a;text-align:center;line-height:1.1;font-weight:800}

/* ---------- result ---------- */
#banner{left:calc(var(--u)*50);top:calc(var(--u)*126);width:calc(var(--u)*700);height:calc(var(--u)*467);pointer-events:none}
#banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#banner .fbt{position:absolute;left:0;right:0;top:calc(var(--u)*170);text-align:center;font-size:calc(var(--u)*130);color:#ffd23a}
#banner[data-outcome=lost] .fbt{color:#ff6a5a}
#banner.art .fbt{display:none}
#rpanel{left:calc(var(--u)*60);bottom:calc(var(--u)*392);width:calc(var(--u)*680);height:calc(var(--u)*310);border-radius:calc(var(--u)*32);padding:calc(var(--u)*20) calc(var(--u)*40);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*6);pointer-events:none}
.rrow{display:flex;align-items:center;gap:calc(var(--u)*16);height:calc(var(--u)*72);border-bottom:calc(var(--u)*3) solid #1d3470}
.rrow span.t3{font-size:calc(var(--u)*32);color:#c9d8f5;flex:1}
.rrow b{font-size:calc(var(--u)*48);line-height:1}
.rrow .cn{position:relative;width:calc(var(--u)*50);height:calc(var(--u)*50);display:block}
.rrow .cn img,.rrow .cn svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.depth{text-align:center;font-size:calc(var(--u)*44);color:#6fe8ff;height:calc(var(--u)*64);line-height:calc(var(--u)*64)}
#again{left:calc(var(--u)*92);bottom:calc(var(--u)*192);width:calc(var(--u)*618);height:calc(var(--u)*160);border-radius:calc(var(--u)*34)}
#again b{font-size:calc(var(--u)*80);line-height:1}
#home{left:calc(var(--u)*220);bottom:calc(var(--u)*67);width:calc(var(--u)*360);height:calc(var(--u)*90);border-radius:calc(var(--u)*26);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*20)}
#home svg{width:calc(var(--u)*50);height:calc(var(--u)*50);color:#cfe0ff}
#home b{font-size:calc(var(--u)*46);line-height:1}
#home:active{transform:translateY(calc(var(--u)*3))}