:root{
  --u:1px;
  --ink:#10323c;
  --lime:#d8f53a;
  --teal:#18c7b5;
  --orange:#ff8a3d;
  --font:"Arial Rounded MT Bold","Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#06222b;overscroll-behavior:none;touch-action:none;font-family:var(--font);color:#fff}
body{background:radial-gradient(circle at 50% 30%,#0f4a5a 0%,#06222b 70%);display:flex;align-items:center;justify-content:center}
#stage{position:relative;width:min(100vw,calc(100vh*9/16));height:min(100vh,calc(100vw*16/9));overflow:hidden;background:#0b3b4a;touch-action:none;
  box-shadow:0 0 calc(var(--u)*40) rgba(0,0,0,.5)}
@supports (height:100dvh){#stage{width:min(100vw,calc(100dvh*9/16));height:min(100dvh,calc(100vw*16/9))}}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--u)*20);opacity:0;pointer-events:none;transform:scale(.94);transition:opacity .28s ease,transform .28s ease;z-index:5}
.screen.show{opacity:1;pointer-events:auto;transform:none}
#s-menu,#s-loading{background:linear-gradient(180deg,rgba(6,34,43,.55) 0%,rgba(6,34,43,.15) 35%,rgba(6,34,43,.7) 100%)}
#s-loading{background:#0b3b4a;z-index:9}
#s-tutorial,#s-daily,#s-settings,#s-pause,#s-over{background:rgba(5,25,32,.72);backdrop-filter:blur(calc(var(--u)*3))}
#s-custom,#s-stats{background:rgba(5,25,32,.9);justify-content:flex-start;padding-top:calc(var(--u)*24)}

.logo{display:flex;flex-direction:column;align-items:center;position:relative;line-height:.92;text-align:center;margin-bottom:calc(var(--u)*6)}
.logo span{font-size:calc(var(--u)*50);font-weight:900;letter-spacing:calc(var(--u)*1);color:var(--lime);
  -webkit-text-stroke:calc(var(--u)*2) #0a3d1e;paint-order:stroke fill;text-shadow:0 calc(var(--u)*5) 0 #0a3d1e,0 calc(var(--u)*9) calc(var(--u)*14) rgba(0,0,0,.4)}
.logo span+span{font-size:calc(var(--u)*39);color:#fff;-webkit-text-stroke:calc(var(--u)*2) #0b5a52;text-shadow:0 calc(var(--u)*5) 0 #0b5a52,0 calc(var(--u)*9) calc(var(--u)*14) rgba(0,0,0,.4)}
.logo.small span{font-size:calc(var(--u)*34)}.logo.small span+span{font-size:calc(var(--u)*26)}
.logo .ball{position:absolute;right:calc(var(--u)*-8);top:calc(var(--u)*-16);width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6ff7a,#cbe61a 60%,#8ea30c);box-shadow:inset 0 0 0 calc(var(--u)*2) #7c9008,0 calc(var(--u)*6) calc(var(--u)*10) rgba(0,0,0,.35);
  animation:bounce 1s cubic-bezier(.3,.1,.5,1) infinite}
.logo .ball::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#6c7d08 0 calc(var(--u)*2),transparent calc(var(--u)*2.5)) 30% 35%/45% 45% no-repeat,
  radial-gradient(circle,#6c7d08 0 calc(var(--u)*2),transparent calc(var(--u)*2.5)) 70% 30%/45% 45% no-repeat,
  radial-gradient(circle,#6c7d08 0 calc(var(--u)*2),transparent calc(var(--u)*2.5)) 55% 70%/45% 45% no-repeat}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(calc(var(--u)*-22)) scale(.96,1.04)}92%{transform:translateY(0) scale(1.1,.9)}}
.tag{margin:calc(var(--u)*6) 0 calc(var(--u)*14);font-size:calc(var(--u)*14);font-weight:700;color:#d7fff8;text-align:center;text-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.5)}
.stats{display:flex;gap:calc(var(--u)*12);margin-bottom:calc(var(--u)*16)}
.stats div{background:rgba(0,0,0,.35);border:calc(var(--u)*2) solid rgba(255,255,255,.18);border-radius:calc(var(--u)*14);padding:calc(var(--u)*7) calc(var(--u)*16);text-align:center;min-width:calc(var(--u)*118)}
.stats small,.orows small{display:block;font-size:calc(var(--u)*10);letter-spacing:calc(var(--u)*1.5);opacity:.75}
.stats b{font-size:calc(var(--u)*24);color:var(--lime)}

.btns{display:flex;flex-direction:column;gap:calc(var(--u)*11);width:min(100%,calc(var(--u)*290))}
.btn{position:relative;font:inherit;font-weight:900;font-size:calc(var(--u)*17);letter-spacing:calc(var(--u)*1);color:#fff;border:0;cursor:pointer;
  min-height:calc(var(--u)*54);padding:0 calc(var(--u)*18);border-radius:calc(var(--u)*16);width:100%;
  background:linear-gradient(180deg,#3aa8d8,#2478b8);box-shadow:0 calc(var(--u)*5) 0 #17507d,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3);
  text-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(calc(var(--u)*4));box-shadow:0 calc(var(--u)*1) 0 #17507d}
.btn.primary{background:linear-gradient(180deg,#ffb24a,#ff7a1f);box-shadow:0 calc(var(--u)*5) 0 #b04d0c,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3);animation:pulse 1.4s ease-in-out infinite}
.btn.primary:active{box-shadow:0 calc(var(--u)*1) 0 #b04d0c}
.btn.big{min-height:calc(var(--u)*68);font-size:calc(var(--u)*26)}
.btn.ghost{background:rgba(255,255,255,.12);box-shadow:0 calc(var(--u)*4) 0 rgba(0,0,0,.25);min-height:calc(var(--u)*46);font-size:calc(var(--u)*14)}
.btn.sm{font-size:calc(var(--u)*14)}
.btn em{position:absolute;right:calc(var(--u)*12);top:calc(var(--u)*10);width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;background:#ff3b5c;border:calc(var(--u)*2) solid #fff;display:none}
.btn em.on{display:block;animation:pulse 1s infinite}
.row2{display:flex;gap:calc(var(--u)*11)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.card{width:min(100%,calc(var(--u)*310));background:linear-gradient(180deg,#134a5b,#0d3644);border:calc(var(--u)*3) solid rgba(255,255,255,.2);
  border-radius:calc(var(--u)*24);padding:calc(var(--u)*20);display:flex;flex-direction:column;gap:calc(var(--u)*11);align-items:stretch;text-align:center;box-shadow:0 calc(var(--u)*14) calc(var(--u)*30) rgba(0,0,0,.45)}
h2{margin:0;font-size:calc(var(--u)*28);color:var(--lime);letter-spacing:calc(var(--u)*1);text-shadow:0 calc(var(--u)*3) 0 rgba(0,0,0,.35)}
.ttl{margin:0 0 calc(var(--u)*12)}

.tut{display:flex;flex-direction:column;gap:calc(var(--u)*12);text-align:left}
.tutrow{display:flex;align-items:center;gap:calc(var(--u)*14);background:rgba(0,0,0,.25);border-radius:calc(var(--u)*14);padding:calc(var(--u)*10)}
.tutrow b{display:block;font-size:calc(var(--u)*18);color:#fff}.tutrow span{font-size:calc(var(--u)*13);opacity:.85}
.ico{position:relative;flex:none;width:calc(var(--u)*72);height:calc(var(--u)*46);border-radius:calc(var(--u)*10);background:rgba(255,255,255,.1);overflow:hidden}
.ico i{position:absolute;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:#fff;box-shadow:0 0 0 calc(var(--u)*5) rgba(255,255,255,.3);top:calc(var(--u)*12);left:calc(var(--u)*6)}
.ico.drag i{animation:dragx 1.3s ease-in-out infinite}
.ico.tap i{left:calc(var(--u)*25);animation:tap 1s ease-out infinite}
@keyframes dragx{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(var(--u)*38))}}
@keyframes tap{0%{transform:scale(1);opacity:1}60%{transform:scale(.7)}100%{transform:scale(1.5);opacity:.2}}
.tutend{margin:calc(var(--u)*2) 0;font-size:calc(var(--u)*19);font-weight:900;color:var(--orange)}

.dtext{margin:0;font-size:calc(var(--u)*21);font-weight:900;line-height:1.2}
.dbar{height:calc(var(--u)*16);border-radius:calc(var(--u)*9);background:rgba(0,0,0,.4);overflow:hidden}
.dbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb24a,#ffe14a);border-radius:calc(var(--u)*9);transition:width .5s}
.dprog{margin:0;font-size:calc(var(--u)*13);opacity:.85}.dstat{margin:0;font-size:calc(var(--u)*15);font-weight:900;color:var(--lime)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*10);width:100%;flex:1;overflow-y:auto;padding:0 calc(var(--u)*2) calc(var(--u)*6);touch-action:pan-y;align-content:start}
.item{position:relative;background:linear-gradient(180deg,#134a5b,#0d3644);border:calc(var(--u)*3) solid rgba(255,255,255,.15);border-radius:calc(var(--u)*16);padding:calc(var(--u)*8);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);cursor:pointer;font-size:calc(var(--u)*12);font-weight:900}
.item canvas{width:100%;height:auto;border-radius:calc(var(--u)*10);background:rgba(0,0,0,.2)}
.item.sel{border-color:var(--lime);box-shadow:0 0 calc(var(--u)*14) rgba(216,245,58,.55)}
.item.lock canvas{filter:grayscale(.85) brightness(.55)}
.item .req{font-size:calc(var(--u)*10.5);opacity:.8;font-weight:700;text-align:center;min-height:calc(var(--u)*14)}
.item .badge{position:absolute;top:calc(var(--u)*6);right:calc(var(--u)*8);font-size:calc(var(--u)*16)}
.back{margin-top:calc(var(--u)*8);flex:none;width:min(100%,calc(var(--u)*200))}

.tgl{display:flex;justify-content:space-between;align-items:center;font:inherit;font-weight:900;font-size:calc(var(--u)*15);color:#fff;background:rgba(0,0,0,.28);
  border:0;border-radius:calc(var(--u)*14);min-height:calc(var(--u)*50);padding:0 calc(var(--u)*16);cursor:pointer}
.tgl b{min-width:calc(var(--u)*56);padding:calc(var(--u)*5) calc(var(--u)*10);border-radius:calc(var(--u)*12);background:#2fbf6a;font-size:calc(var(--u)*13)}
.tgl b.off{background:#59707a}.tgl.danger b{background:#c4394b}

.over h2{font-size:calc(var(--u)*30)}
.bigscore{font-size:calc(var(--u)*58);font-weight:900;color:#fff;line-height:1;text-shadow:0 calc(var(--u)*4) 0 rgba(0,0,0,.35)}
.newbest{display:none;font-size:calc(var(--u)*19);font-weight:900;color:#ffe14a;animation:pulse .7s infinite;text-shadow:0 0 calc(var(--u)*12) rgba(255,210,60,.9)}
.newbest.on{display:block}
.orows{display:flex;gap:calc(var(--u)*8)}
.orows div{flex:1;background:rgba(0,0,0,.28);border-radius:calc(var(--u)*12);padding:calc(var(--u)*7) 0}
.orows b{font-size:calc(var(--u)*20);color:var(--lime)}
.toast{display:none;font-size:calc(var(--u)*13);font-weight:900;color:#0a3d1e;background:linear-gradient(90deg,#ffe14a,#ffb24a);border-radius:calc(var(--u)*10);padding:calc(var(--u)*7) calc(var(--u)*10)}
.toast.on{display:block;animation:pulse .9s infinite}
.toast.daily{background:linear-gradient(90deg,#8fe9ff,#6bd3a8)}

.loadbar{width:calc(var(--u)*200);height:calc(var(--u)*12);border-radius:calc(var(--u)*7);background:rgba(0,0,0,.35);margin-top:calc(var(--u)*24);overflow:hidden}
.loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d8f53a,#18c7b5);transition:width .2s}

#btnPause{position:absolute;right:calc(var(--u)*10);top:calc(var(--u)*76);width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;border:calc(var(--u)*2) solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.35);color:#fff;font:inherit;font-weight:900;font-size:calc(var(--u)*16);letter-spacing:calc(var(--u)*-1);cursor:pointer;z-index:4;padding:0}

/* ---- online ---- */
#btnPause,#btnLeave{position:absolute;right:calc(var(--u)*10);top:calc(var(--u)*76);width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;border:calc(var(--u)*2) solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.35);color:#fff;font:inherit;font-weight:900;font-size:calc(var(--u)*16);cursor:pointer;z-index:4;padding:0}
input{user-select:text;-webkit-user-select:text}
.card input{font:inherit;font-weight:900;font-size:calc(var(--u)*18);text-align:center;color:#fff;background:rgba(0,0,0,.35);border:calc(var(--u)*2) solid rgba(255,255,255,.25);
  border-radius:calc(var(--u)*14);min-height:calc(var(--u)*50);padding:0 calc(var(--u)*12);width:100%;outline:none;text-transform:none}
#inCode{text-transform:uppercase;letter-spacing:calc(var(--u)*6);font-size:calc(var(--u)*24)}
.card input:focus{border-color:var(--lime)}
.btn.friends{background:linear-gradient(180deg,#8d6bff,#5a3fd6);box-shadow:0 calc(var(--u)*5) 0 #33228f,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3)}
.btn.friends:active{box-shadow:0 calc(var(--u)*1) 0 #33228f}
.or{font-size:calc(var(--u)*12);opacity:.7}
.onmsg{margin:0;min-height:calc(var(--u)*16);font-size:calc(var(--u)*13);font-weight:700;color:#ffd0a0}
.cap{font-size:calc(var(--u)*11);letter-spacing:calc(var(--u)*2);opacity:.7}
.code{font-size:calc(var(--u)*54);font-weight:900;letter-spacing:calc(var(--u)*8);color:var(--lime);line-height:1;text-shadow:0 calc(var(--u)*4) 0 rgba(0,0,0,.35)}
.plist{display:flex;flex-direction:column;gap:calc(var(--u)*6);text-align:left}
.prow{display:flex;align-items:center;gap:calc(var(--u)*10);background:rgba(0,0,0,.28);border-radius:calc(var(--u)*12);padding:calc(var(--u)*8) calc(var(--u)*12);font-weight:900;font-size:calc(var(--u)*15)}
.prow i{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);border-radius:50%;background:#ff8a3d}
.prow.b i{background:#3aa8d8}
.prow.empty{opacity:.45;font-weight:700}
.prow small{margin-left:auto;font-size:calc(var(--u)*10);opacity:.8;letter-spacing:calc(var(--u)*1)}
.btn:disabled{filter:grayscale(1) brightness(.7);animation:none;pointer-events:none}

/* ---- coins, shop, continue, ads ---- */
.cn{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.14em;
  background:radial-gradient(circle at 35% 30%,#fff6b0,#ffd23f 45%,#d19a00);box-shadow:inset 0 0 0 .1em #b07c00}
.coinpill{position:absolute;top:calc(var(--u)*14);right:calc(var(--u)*14);display:flex;align-items:center;gap:calc(var(--u)*6);
  background:rgba(0,0,0,.45);border:calc(var(--u)*2) solid rgba(255,210,63,.6);border-radius:calc(var(--u)*20);padding:calc(var(--u)*5) calc(var(--u)*12);font-size:calc(var(--u)*17)}
.coinpill b,.coinbar b{color:#ffe14a}
.row2.three .btn{padding:0 calc(var(--u)*4);font-size:calc(var(--u)*13)}
.row2.four .btn{padding:0 calc(var(--u)*2);font-size:calc(var(--u)*11)}
.btn.shopbtn{background:linear-gradient(180deg,#ffd84a,#e8a800);box-shadow:0 calc(var(--u)*5) 0 #9a6b00,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3);color:#4a2c00;text-shadow:none}
.btn.shopbtn:active{box-shadow:0 calc(var(--u)*1) 0 #9a6b00}
.coinline{font-size:calc(var(--u)*16);font-weight:900;color:#ffe14a}
.ctext{margin:0;font-size:calc(var(--u)*17);font-weight:900}
#cFill{width:100%;transition:none}

#s-shop{background:rgba(5,25,32,.9);justify-content:flex-start;padding-top:calc(var(--u)*24)}
.coinbar{display:flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*20);font-weight:900;margin:calc(var(--u)*-4) 0 calc(var(--u)*10)}
.shopwrap{flex:1;width:100%;overflow-y:auto;touch-action:pan-y;padding:0 calc(var(--u)*2) calc(var(--u)*6)}
.shopwrap .grid{flex:none;overflow:visible;padding:0}
.shopwrap h3{margin:calc(var(--u)*12) 0 calc(var(--u)*8);font-size:calc(var(--u)*14);letter-spacing:calc(var(--u)*2);color:#bfefff}
.free{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4)}
.free small{font-size:calc(var(--u)*11);opacity:.8}
.item.forsale{border-color:rgba(255,210,63,.45)}
.item.arm{border-color:#ffd23f;box-shadow:0 0 calc(var(--u)*14) rgba(255,210,63,.7);animation:pulse .6s infinite}
.item .spon{font-size:calc(var(--u)*9.5);opacity:.75;text-align:center}
.iap{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*10);background:rgba(0,0,0,.28);border-radius:calc(var(--u)*14);padding:calc(var(--u)*8) calc(var(--u)*10);margin-bottom:calc(var(--u)*8)}
.iap b{display:block;font-size:calc(var(--u)*15)}.iap small{font-size:calc(var(--u)*11);opacity:.75}
.iap .btn{width:auto;min-width:calc(var(--u)*88);min-height:calc(var(--u)*44)}
.testnote{display:block;text-align:center;font-size:calc(var(--u)*11);opacity:.6;margin-top:calc(var(--u)*2)}

#s-modal{z-index:20;background:rgba(3,12,18,.9)}
.adtag{align-self:center;font-size:calc(var(--u)*11);font-weight:900;letter-spacing:calc(var(--u)*2);color:#0a3d1e;background:#ffe14a;border-radius:calc(var(--u)*8);padding:calc(var(--u)*3) calc(var(--u)*10)}
.mdtext{margin:0;font-size:calc(var(--u)*13);opacity:.85;line-height:1.35}
.mdbig{font-size:calc(var(--u)*64);font-weight:900;color:var(--lime);line-height:1}
.mdbig:empty{display:none}
.mdbtns{display:flex;flex-direction:column;gap:calc(var(--u)*10)}

/* ---- portal compliance ---- */
#s-continue .row2 .btn{font-size:calc(var(--u)*15);padding:0 calc(var(--u)*8);animation:none}
#note{position:absolute;left:50%;bottom:calc(var(--u)*90);transform:translateX(-50%);z-index:30;max-width:90%;text-align:center;
  background:rgba(0,0,0,.8);color:#fff;font-weight:900;font-size:calc(var(--u)*13);border-radius:calc(var(--u)*12);padding:calc(var(--u)*9) calc(var(--u)*14);
  opacity:0;pointer-events:none;transition:opacity .25s}
#note.on{opacity:1}
*{-moz-user-select:none;-ms-user-select:none}

/* ---- progression, modes, challengers, missions ---- */
.gear{position:absolute;top:calc(var(--u)*14);left:calc(var(--u)*14);width:calc(var(--u)*42);height:calc(var(--u)*42);border-radius:50%;
  border:calc(var(--u)*2) solid rgba(255,255,255,.45);background:rgba(0,0,0,.45);color:#fff;font-size:calc(var(--u)*22);line-height:1;cursor:pointer;padding:0}
.stats{margin-bottom:calc(var(--u)*10)}
.lvstrip{display:flex;align-items:center;gap:calc(var(--u)*8);width:min(100%,calc(var(--u)*250));margin:0 0 calc(var(--u)*14)}
.lvstrip b,.xprow b{font-size:calc(var(--u)*14);color:#ffe14a;white-space:nowrap;text-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.4)}
.xpb{flex:1;height:calc(var(--u)*10);border-radius:calc(var(--u)*6);background:rgba(0,0,0,.45);overflow:hidden}
.xpb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8d6bff,#c58bff);border-radius:calc(var(--u)*6);transition:width .6s}
.xprow{display:flex;align-items:center;gap:calc(var(--u)*8)}
.xprow span{font-size:calc(var(--u)*12);font-weight:900;color:#c9b8ff;white-space:nowrap}
.nextline{font-size:calc(var(--u)*12);font-weight:700;color:#bfefff}
.nextline:empty{display:none}
.card.over{gap:calc(var(--u)*8);padding:calc(var(--u)*16)}
.card.over .bigscore{font-size:calc(var(--u)*50)}
.btns .row2 .btn{font-size:calc(var(--u)*16)}
.btn.modesbtn{background:linear-gradient(180deg,#2fd08a,#179a5f);box-shadow:0 calc(var(--u)*5) 0 #0d6a40,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3)}
.btn.modesbtn:active{box-shadow:0 calc(var(--u)*1) 0 #0d6a40}
.btn.missbtn{background:linear-gradient(180deg,#b07cff,#7a45e0);box-shadow:0 calc(var(--u)*5) 0 #4c2596,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3)}
.btn.missbtn:active{box-shadow:0 calc(var(--u)*1) 0 #4c2596}
#s-modes,#s-ladder,#s-achievements,#s-weekly{background:rgba(5,25,32,.9);justify-content:flex-start;padding-top:calc(var(--u)*24)}
.scrollwrap{flex:1;width:100%;overflow-y:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:calc(var(--u)*10);padding:0 calc(var(--u)*2) calc(var(--u)*8)}
.modecard{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*3);text-align:left;font:inherit;color:#fff;border:0;
  border-radius:calc(var(--u)*16);padding:calc(var(--u)*12) calc(var(--u)*16);cursor:pointer;box-shadow:0 calc(var(--u)*5) 0 rgba(0,0,0,.35);text-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.25)}
.modecard:active{transform:translateY(calc(var(--u)*3));box-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.35)}
.modecard b{font-size:calc(var(--u)*20);font-weight:900;letter-spacing:calc(var(--u)*1)}
.modecard span{font-size:calc(var(--u)*13);font-weight:700;opacity:.95}
.modecard small{font-size:calc(var(--u)*11);font-weight:900;background:rgba(0,0,0,.28);border-radius:calc(var(--u)*8);padding:calc(var(--u)*2) calc(var(--u)*8);margin-top:calc(var(--u)*3)}
.modecard.c1{background:linear-gradient(135deg,#ffab4a,#ff6a1f)}
.modecard.c2{background:linear-gradient(135deg,#b07cff,#6a3ad6)}
.modecard.c3{background:linear-gradient(135deg,#4ab8ff,#1f6ad6)}
.modecard.c4{background:linear-gradient(135deg,#ffcf3d,#e89a00)}
.modecard.c5{background:linear-gradient(135deg,#2fd08a,#138a55)}
.lrow{flex:none;display:flex;align-items:center;gap:calc(var(--u)*10);font:inherit;color:#fff;text-align:left;cursor:pointer;
  border:calc(var(--u)*2) solid rgba(255,255,255,.14);border-radius:calc(var(--u)*16);background:linear-gradient(180deg,#134a5b,#0d3644);padding:calc(var(--u)*6) calc(var(--u)*10)}
.lrow canvas{width:calc(var(--u)*60);height:calc(var(--u)*68);flex:none}
.lrow b{display:block;font-size:calc(var(--u)*16)}
.lrow i{display:block;font-style:normal;font-size:calc(var(--u)*12);opacity:.8}
.lrow small{display:block;font-size:calc(var(--u)*11.5);font-weight:900;color:#ffe14a;margin-top:calc(var(--u)*4)}
.lrow.lock{opacity:.55}.lrow.lock canvas{filter:brightness(0) opacity(.5)}
.lrow.won{border-color:rgba(124,240,176,.65)}.lrow.won small{color:#7cf0b0}
#msList{display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.mrow{background:rgba(0,0,0,.28);border-radius:calc(var(--u)*14);padding:calc(var(--u)*10);display:flex;flex-direction:column;gap:calc(var(--u)*6);text-align:left}
.mrow.claimed{opacity:.55}
.mrow .mt{font-size:calc(var(--u)*14);font-weight:900}
.mrow .ad{font-size:calc(var(--u)*12);font-weight:700;opacity:.8;margin-top:calc(var(--u)*-3)}
.mrow .mb{display:flex;align-items:center;gap:calc(var(--u)*8)}
.mrow .mb .xpb i{background:linear-gradient(90deg,#ffb24a,#ffe14a)}
.mrow .mb span{font-size:calc(var(--u)*12);font-weight:900;white-space:nowrap}
.mrow .btn{width:auto;min-height:calc(var(--u)*38);font-size:calc(var(--u)*13);padding:0 calc(var(--u)*12);animation:none}
.streak{margin:0;font-size:calc(var(--u)*13);font-weight:900;color:#ffb24a}
.lrow i.cn{display:inline-block;font-size:inherit;opacity:1}

/* ---- challenger ranks ---- */
.tiertabs{display:flex;gap:calc(var(--u)*5);width:100%;overflow-x:auto;touch-action:pan-x;padding-bottom:calc(var(--u)*4);flex:none}
.tiertab{flex:none;font:inherit;font-weight:900;font-size:calc(var(--u)*11);letter-spacing:calc(var(--u)*.5);color:#fff;cursor:pointer;
  border:calc(var(--u)*2) solid var(--tc);background:rgba(0,0,0,.3);border-radius:calc(var(--u)*14);padding:calc(var(--u)*7) calc(var(--u)*10)}
.tiertab.on{background:var(--tc);color:#08222b}
.tiertab.lock{opacity:.5}
.rankline{margin:calc(var(--u)*6) 0 calc(var(--u)*8);font-size:calc(var(--u)*12);font-weight:900;text-align:center;flex:none}
.modecard.c6{background:linear-gradient(135deg,#ff6fa5,#d8336a)}

/* ---- leaderboard ---- */
.btn.lbbtn{background:linear-gradient(180deg,#ffd84a,#e8a800);box-shadow:0 calc(var(--u)*5) 0 #9a6b00,0 calc(var(--u)*10) calc(var(--u)*14) rgba(0,0,0,.3);color:#4a2c00;text-shadow:none}
.btn.lbbtn:active{box-shadow:0 calc(var(--u)*1) 0 #9a6b00}
#s-leaderboard{background:rgba(5,25,32,.9);justify-content:flex-start;padding-top:calc(var(--u)*24)}
.lbname{display:flex;gap:calc(var(--u)*8);width:100%;margin:calc(var(--u)*6) 0;flex:none}
.lbname input{flex:1;font:inherit;font-weight:900;font-size:calc(var(--u)*14);color:#fff;background:rgba(0,0,0,.35);border:calc(var(--u)*2) solid rgba(255,255,255,.25);
  border-radius:calc(var(--u)*12);min-height:calc(var(--u)*42);padding:0 calc(var(--u)*12);outline:none}
.lbname input:focus{border-color:var(--lime)}
.lbname .btn{width:auto;min-height:calc(var(--u)*42);padding:0 calc(var(--u)*14);animation:none}
.lboffline{margin:calc(var(--u)*4) 0;font-size:calc(var(--u)*11.5);font-weight:700;color:#ffb0a0;text-align:center;display:none;flex:none}
.lboffline.on{display:block}
.lbmsg{text-align:center;font-size:calc(var(--u)*13);font-weight:700;opacity:.75;padding:calc(var(--u)*16) 0}
.lbrow{display:flex;align-items:center;gap:calc(var(--u)*10);flex:none;background:rgba(0,0,0,.28);border-radius:calc(var(--u)*12);padding:calc(var(--u)*8) calc(var(--u)*12);
  border:calc(var(--u)*2) solid transparent}
.lbrow b{width:calc(var(--u)*32);font-size:calc(var(--u)*14);color:#9db8c4}
.lbrow span{flex:1;font-size:calc(var(--u)*14);font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow i{font-style:normal;font-size:calc(var(--u)*15);font-weight:900;color:#ffe14a}
.lbrow.me{border-color:var(--lime);background:rgba(216,245,58,.12)}
.lbrow.top1 b{color:#ffe14a}.lbrow.top2 b{color:#d7dee6}.lbrow.top3 b{color:#e0a86a}

/* ---- tabs on the locker + shop, stats, volume ---- */
#s-shop .tiertabs,#s-custom .tiertabs{margin-bottom:calc(var(--u)*8)}
#s-shop .tiertab,#s-custom .tiertab{flex:1 0 auto;padding:calc(var(--u)*7) calc(var(--u)*5);font-size:calc(var(--u)*9.5);letter-spacing:0}
.tiertabs{scrollbar-width:none}.tiertabs::-webkit-scrollbar{display:none}
#s-custom .grid{padding-top:calc(var(--u)*2)}
.strow{flex:none;display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*10);background:rgba(0,0,0,.28);border-radius:calc(var(--u)*12);padding:calc(var(--u)*9) calc(var(--u)*12);font-size:calc(var(--u)*13);font-weight:700}
.strow span{opacity:.8;text-align:left}.strow b{font-size:calc(var(--u)*14);color:var(--lime);text-align:right}
.stats[data-act]{cursor:pointer}
.vol{display:flex;flex-direction:column;gap:calc(var(--u)*6);background:rgba(0,0,0,.28);border-radius:calc(var(--u)*14);padding:calc(var(--u)*8) calc(var(--u)*16) calc(var(--u)*10);font-weight:900;font-size:calc(var(--u)*14);text-align:left}
.vol input[type=range]{width:100%;min-height:calc(var(--u)*22);padding:0;border:0;background:transparent;accent-color:var(--lime);touch-action:pan-x}
#s-settings .card{max-height:calc(var(--u)*596);overflow-y:auto;touch-action:pan-y;gap:calc(var(--u)*8)}
#s-settings .tgl{min-height:calc(var(--u)*42);flex:none}
#s-settings .card>.btn.primary{position:sticky;bottom:calc(var(--u)*-1);flex:none;box-shadow:0 calc(var(--u)*-10) calc(var(--u)*10) #0d3644,0 calc(var(--u)*5) 0 #b8620a}

/* Pickleball Promax /play page */
.homelink{display:table;margin:12px auto 0;padding:6px 14px;border-radius:999px;background:rgba(6,34,43,.82);text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#d6f3fa;text-decoration:none}
.homelink:hover{background:rgba(6,34,43,.95);text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}