:root{
  --rose:#f43f5e; --rose-dim:#9f1239; --ink:#08080b; --ink-2:#111117; --ink-3:#18181f;
  --bone:#f5f3ef; --muted:#9a9aa8; --line:rgba(255,255,255,.08); --gold:#fbbf24;
  --common:#9ca3af; --rare:#22d3ee; --epic:#c084fc; --legendary:#fbbf24; --secret:#4ade80; --jackpot:#fbbf24;
  /* Safe area = the larger of the browser's env() and Capacitor 8's own variables. On Android, Capacitor 8's
     SystemBars plugin publishes the insets as --safe-area-inset-* on <html> and env() can read 0 there (older
     WebViews). iOS WKWebView fills env() itself. Use ONLY --safe-t / --safe-b anywhere (CSS) and FF.safeArea() in
     canvas code; a raw env(safe-area-inset-*) elsewhere is refused by _qa/layout-guards.mjs. */
  --safe-t:max(env(safe-area-inset-top,0px), var(--safe-area-inset-top,0px));
  /* --ad-inset-bottom = the AdMob banner's height, set by js/ads.js ONLY while the banner is up (Android free tier,
     non-gameplay screens). Every bottom-anchored surface already sums --safe-b, so nothing is drawn under the banner. */
  --safe-b:calc(max(env(safe-area-inset-bottom,0px), var(--safe-area-inset-bottom,0px)) + var(--ad-inset-bottom,0px));
  /* the tab bar's full height (6 + 56 + 6 + safe bottom). While it shows (#stage.tabbed) the screens END above it,
     so no scrolling content, sticky row or button can ever sit underneath it (2026-10-26 fix). */
  --tab-btn-h:56px;
  --tabbar-h:calc(var(--tab-btn-h) + 12px + var(--safe-b));

  /* ---- TYPE THEME tokens. Default = A "Cartoon Ocean". B / C override below (html[data-type]).
     game.js reads --f-display / --f-body / --fw-black / --stroke for the canvas HUD + score pops. */
  --f-display:'Lilita One','Fredoka',system-ui,sans-serif;
  --f-body:'Fredoka',system-ui,sans-serif;
  --fw-body:500; --fw-bold:600; --fw-black:700;
  --display-case:none; --display-track:.01em;
  --stroke:#1d0610;                 /* cartoon outline colour on display text */
  --ol:3px;                         /* outline thickness on headings */
  --tilt-a:-4deg; --tilt-b:3deg; --tilt-h:-1.5deg;
  --btn-r:22px; --btn-depth:5px; --btn-border:0px solid transparent; --btn-skew:0deg;
  --card-r:22px;
  --boing:cubic-bezier(.34,1.9,.5,1);
}
/* B — "Comic Splash": Bangers comic lettering, black ink outlines, hard offset shadows, skewed buttons */
html[data-type="b"]{
  --f-display:'Bangers','Nunito',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,sans-serif;
  --fw-body:600; --fw-bold:800; --fw-black:900;
  --display-case:uppercase; --display-track:.045em;
  --stroke:#000; --ol:3px;
  --tilt-a:-5deg; --tilt-b:-2deg; --tilt-h:-2deg;
  --btn-r:12px; --btn-depth:5px; --btn-border:3px solid #000; --btn-skew:-6deg;
  --card-r:14px;
}
/* C — "Goofy Sticker": Titan One with a white die-cut sticker edge, bigger tilts, pill buttons */
html[data-type="c"]{
  --f-display:'Titan One','Baloo 2',system-ui,sans-serif;
  --f-body:'Baloo 2',system-ui,sans-serif;
  --fw-body:500; --fw-bold:700; --fw-black:800;
  --display-case:none; --display-track:.01em;
  --stroke:#fff; --ol:3px;
  --tilt-a:-6deg; --tilt-b:5deg; --tilt-h:-2.5deg;
  --btn-r:999px; --btn-depth:5px; --btn-border:3px solid rgba(255,255,255,.9); --btn-skew:0deg;
  --card-r:24px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:var(--ink);overflow:hidden;}
body{font-family:var(--f-body);font-weight:var(--fw-body);color:var(--bone);-webkit-font-smoothing:antialiased;
  touch-action:none;user-select:none;-webkit-user-select:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;}
.hide{display:none!important;}

#stage{position:fixed;inset:0;overflow:hidden;background:var(--ink);}
#stage.shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97) both;}
#stage.shake-big{animation:shake 1.1s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;}
canvas#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;}

/* ---------- top bar ---------- */
#topbar{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 10px) 14px 8px;}
#topbar .lvl{display:flex;align-items:center;gap:8px;min-height:44px;}
.lvl-n{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:21px;line-height:1;padding-top:1px;
  background:radial-gradient(circle at 35% 30%,#fb7185,var(--rose-dim));box-shadow:0 4px 0 #5f0a22,0 0 18px rgba(244,63,94,.35);transform:rotate(-6deg);
  text-shadow:0 2px 0 rgba(0,0,0,.35);}
.lvl-bar{width:74px;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;}
.lvl-bar i{display:block;height:100%;width:0;background:var(--rose);border-radius:4px;transition:width .5s ease;}
.pearls{margin-left:auto;display:flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 4px;border-radius:22px;
  background:rgba(255,255,255,.07);font-family:var(--f-display);font-size:19px;color:#fbcfe8;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.pearls.bump{animation:bump .5s var(--boing);}
@keyframes bump{35%{transform:scale(1.25) rotate(-4deg)}70%{transform:scale(.95) rotate(2deg)}}
.picon{width:30px;height:30px;}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--bone);
  transition:transform .35s var(--boing);}
.icon-btn:active{transform:scale(.86);transition-duration:.06s;}
#pauseBtn{position:absolute;top:calc(var(--safe-t) + 12px);right:12px;z-index:30;}

/* ---------- screens ---------- */
#screens{position:absolute;inset:0;z-index:20;pointer-events:none;}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;
  padding:calc(var(--safe-t) + 66px) 16px calc(var(--safe-b) + 84px);pointer-events:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.screen.on{display:flex;animation:fadeIn .22s ease;}
/* no backdrop-filter: blurring a live canvas every frame cost p95 33-50ms at 4x CPU (measured 2026-09-27) */
.screen.scrim{background:linear-gradient(180deg,rgba(8,8,11,.8),rgba(8,8,11,.93));}
.screen.full{padding-top:calc(var(--safe-t) + 24px);padding-bottom:calc(var(--safe-b) + 24px);}
/* Tab bar up: the whole screen layer stops at the bar's top edge (a reserved band, not padding), so the bar never
   covers anything at any scroll position. Toggled with the bar itself in ui.js setTabbar(). */
#stage.tabbed #screens{bottom:var(--tabbar-h);}
#stage.tabbed .screen{padding-bottom:20px;}
.wrap{width:100%;max-width:460px;display:flex;flex-direction:column;gap:12px;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- headings ---------- */
h1.title{font-family:var(--f-display);font-weight:400;line-height:1;text-align:center;text-transform:var(--display-case);letter-spacing:var(--display-track);--ol:5px;}
h1.title .a,h1.title .b{display:block;font-size:68px;padding:0 .1em;}
h1.title .a{color:var(--bone);transform:rotate(var(--tilt-a));animation:bob 3.2s ease-in-out infinite;}
h1.title .b{color:var(--rose);transform:rotate(var(--tilt-b)) translateX(.18em);margin-top:-4px;animation:bob 3.2s ease-in-out -1.6s infinite;}
h1.title .a,h1.title .b{text-shadow:
  var(--ol) 0 0 var(--stroke), calc(var(--ol) * -1) 0 0 var(--stroke), 0 var(--ol) 0 var(--stroke), 0 calc(var(--ol) * -1) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * .7) 0 var(--stroke), calc(var(--ol) * -.7) calc(var(--ol) * .7) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * -.7) 0 var(--stroke), calc(var(--ol) * -.7) calc(var(--ol) * -.7) 0 var(--stroke),
  0 calc(var(--ol) + 5px) 0 var(--stroke), 0 calc(var(--ol) + 7px) 18px rgba(0,0,0,.5);}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.tag{text-align:center;color:var(--muted);font-weight:var(--fw-bold);font-size:17px;margin-top:10px;transform:rotate(-1deg);}
h2{font-family:var(--f-display);font-weight:400;font-size:36px;line-height:1.1;text-transform:var(--display-case);letter-spacing:var(--display-track);
  --ol:2.5px;align-self:flex-start;transform:rotate(var(--tilt-h));transform-origin:0 50%;padding:2px 4px 6px;
  text-shadow:var(--ol) 0 0 var(--stroke),calc(var(--ol) * -1) 0 0 var(--stroke),0 var(--ol) 0 var(--stroke),0 calc(var(--ol) * -1) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * .7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * .7) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * -.7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * -.7) 0 var(--stroke),0 calc(var(--ol) + 3px) 0 var(--stroke);}
.handoff h2,.res-head h2,#modal h2{align-self:center;transform-origin:50% 50%;}
#modal h2{text-align:center;}
.kicker{font-weight:var(--fw-bold);font-size:14px;letter-spacing:.02em;color:var(--muted);}
.muted{color:var(--muted);}
.row{display:flex;gap:10px;align-items:center;}
.grow{flex:1;min-width:0;}

/* ---------- squishy buttons: a solid "depth" underneath, squash on press, overshoot on release ---------- */
.btn{--bd:#050507;min-height:54px;border-radius:var(--btn-r);padding:0 20px;font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.1;
  text-transform:var(--display-case);letter-spacing:var(--display-track);
  display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink-3);color:var(--bone);border:var(--btn-border);
  box-shadow:0 var(--btn-depth) 0 var(--bd),inset 0 2px 0 rgba(255,255,255,.08),inset 0 -3px 0 rgba(0,0,0,.18);
  transform:skewX(var(--btn-skew));
  transition:transform .42s var(--boing),box-shadow .42s var(--boing),filter .15s;margin-bottom:var(--btn-depth);}
.btn:active{transform:skewX(var(--btn-skew)) translateY(calc(var(--btn-depth) - 1px)) scale(1.03,.93);box-shadow:0 1px 0 var(--bd),inset 0 2px 0 rgba(255,255,255,.08);transition-duration:.07s;}
.btn.primary{--bd:#9f1239;background:linear-gradient(180deg,#fb5a75,var(--rose));color:#fff;
  box-shadow:0 var(--btn-depth) 0 var(--bd),0 12px 28px rgba(244,63,94,.35),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.12);text-shadow:0 2px 0 rgba(120,10,40,.55);}
.btn.gold{--bd:#a14a06;background:linear-gradient(180deg,#fde047,#f59e0b);color:#2a1600;
  box-shadow:0 var(--btn-depth) 0 var(--bd),0 12px 28px rgba(245,158,11,.28),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.1);}
.btn.big{min-height:66px;font-size:27px;}
.btn.small{min-height:44px;font-size:17px;padding:0 14px;--btn-depth:4px;}
.btn[disabled]{opacity:.45;pointer-events:none;}
.btn .sub{font-family:var(--f-body);font-weight:var(--fw-bold);font-size:14px;opacity:.9;letter-spacing:.01em;text-transform:none;text-shadow:none;}
.btn.stack{flex-direction:column;gap:1px;padding-top:4px;padding-bottom:6px;}
.btn.big.stack .sub{font-size:15px;}

.card{background:rgba(17,17,23,.9);border-radius:var(--card-r);padding:14px 16px;box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 rgba(0,0,0,.35);}
.card.glow{box-shadow:inset 0 0 0 2px rgba(244,63,94,.4),0 0 30px rgba(244,63,94,.12),0 4px 0 rgba(0,0,0,.35);}

/* home */
.home-title{margin-top:3vh;}
.rankchip{align-self:center;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:22px;background:rgba(255,255,255,.07);font-weight:var(--fw-bold);font-size:15px;min-height:44px;
  margin-top:4px;transform:rotate(1.5deg);transition:transform .4s var(--boing);}
.rankchip:active{transform:rotate(1.5deg) scale(.92);transition-duration:.06s;}
.rankchip i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35);}
.home-spacer{height:20vh;min-height:110px;}
.mission{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1.5px dashed var(--line);}
.mission:first-of-type{border-top:0;}
.mission .mt{font-weight:var(--fw-bold);font-size:15px;}
.mission .mb{height:8px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden;}
.mission .mb i{display:block;height:100%;background:var(--rose);border-radius:4px;}
.mission.done .mb i{background:var(--gold);}
.pill-note{font-size:14px;color:var(--muted);font-weight:var(--fw-body);}
.daily-cta{position:relative;}
.daily-cta::after{content:"";position:absolute;top:10px;right:14px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:ping 1.4s ease-in-out infinite;}
@keyframes ping{50%{transform:scale(1.5);opacity:.5}}

/* levels */
.worlds{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;touch-action:pan-x;}
.worlds::-webkit-scrollbar{display:none;}
.wchip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:16px;background:var(--ink-3);font-family:var(--f-display);font-size:17px;letter-spacing:.01em;display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 0 #050507;margin-bottom:4px;transition:transform .35s var(--boing);}
.wchip:active{transform:translateY(3px) scale(.95);transition-duration:.06s;}
.wchip.sel{background:var(--wc,var(--rose));color:#0b0b0e;transform:rotate(-2deg);}
.wchip.locked{opacity:.45;}
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.lcell{aspect-ratio:1/1.08;border-radius:20px;background:var(--ink-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:inset 0 0 0 1.5px var(--line),0 5px 0 #050507;font-family:var(--f-display);font-size:30px;line-height:1;min-height:64px;margin-bottom:5px;
  transition:transform .4s var(--boing);}
.lcell:nth-child(odd){transform:rotate(-1.5deg);} .lcell:nth-child(even){transform:rotate(1.5deg);}
.lcell:active{transform:translateY(4px) scale(1.04,.92);transition-duration:.06s;}
.lcell.boss{box-shadow:inset 0 0 0 2.5px var(--wc,var(--rose)),0 5px 0 #050507;}
.lcell.locked{opacity:.35;}
.lcell.next{box-shadow:inset 0 0 0 2.5px var(--wc,var(--rose)),0 5px 0 #050507,0 0 22px rgba(var(--wrgb,244,63,94),.4);animation:nudge 1.6s ease-in-out infinite;}
@keyframes nudge{0%,100%{scale:1}50%{scale:1.07}}
.stars{display:flex;gap:1px;font-size:14px;letter-spacing:0;color:rgba(255,255,255,.18);font-family:system-ui,sans-serif;}
.stars .on{color:var(--gold);text-shadow:0 0 8px rgba(251,191,36,.6);}
.card .stars{display:inline-flex;vertical-align:-1px;margin-right:2px;}   /* inline in the star-legend sentence, not a block per star */

/* shop */
.tabs{display:flex;gap:6px;background:var(--ink-3);padding:5px;border-radius:calc(var(--card-r) - 4px);}
.tabs button{flex:1;min-height:44px;border-radius:calc(var(--card-r) - 8px);font-family:var(--f-display);font-size:18px;letter-spacing:.01em;color:var(--muted);text-transform:var(--display-case);transition:transform .35s var(--boing);}
.tabs button:active{transform:scale(.92);transition-duration:.06s;}
.tabs button.sel{background:var(--rose);color:#fff;box-shadow:0 3px 0 var(--rose-dim);transform:rotate(-1.5deg);}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.item{border-radius:var(--card-r);background:var(--ink-2);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 rgba(0,0,0,.4);}
.item.eq{box-shadow:inset 0 0 0 2.5px var(--rose),0 4px 0 rgba(0,0,0,.4);}
.item .pv{height:78px;border-radius:16px;background:radial-gradient(circle at 50% 50%,rgba(var(--g,244,63,94),.35),rgba(0,0,0,0) 70%),#0c0c11;display:grid;place-items:center;overflow:hidden;position:relative;}
.bonepv{width:92px;height:50px;-webkit-mask:url(../assets/fishbone.png) center/100% 100% no-repeat;mask:url(../assets/fishbone.png) center/100% 100% no-repeat;}
.item .nm{font-family:var(--f-display);font-size:19px;line-height:1.15;letter-spacing:.01em;}
.rar{font-size:12px;font-weight:var(--fw-black);letter-spacing:.04em;text-transform:capitalize;}
.rar.common{color:var(--common)}.rar.rare{color:var(--rare)}.rar.epic{color:var(--epic)}.rar.legendary{color:var(--legendary)}.rar.secret{color:var(--secret)}
.item .hint{font-size:13px;color:var(--muted);font-weight:var(--fw-body);min-height:16px;line-height:1.3;}
.item .btn{margin-top:auto;}
.item.locked .pv{filter:grayscale(.8) brightness(.6);}
.trailpv{display:flex;gap:5px;align-items:center;}
.trailpv b{display:block;border-radius:50%;}
.arenapv{position:absolute;inset:0;}

/* chests */
.chestrow{display:flex;gap:12px;align-items:center;}
.chestrow .nm{font-family:var(--f-display);font-size:20px;letter-spacing:.01em;}
.chest{width:92px;height:78px;position:relative;flex:0 0 auto;}
.chest .body{position:absolute;left:6px;right:6px;bottom:0;height:46px;border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#7c2d12,#431407);box-shadow:inset 0 0 0 3px #a16207,inset 0 -8px 0 rgba(0,0,0,.25);}
.chest .lid{position:absolute;left:2px;right:2px;top:6px;height:30px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#9a3412,#7c2d12);box-shadow:inset 0 0 0 3px #a16207;transform-origin:50% 100%;transition:transform .4s cubic-bezier(.2,1.6,.4,1);}
.chest .lock{position:absolute;left:50%;top:28px;width:16px;height:18px;margin-left:-8px;border-radius:3px;background:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,.6);z-index:2;}
.chest.golden .body{background:linear-gradient(180deg,#fbbf24,#b45309);box-shadow:inset 0 0 0 3px #fde68a,inset 0 -8px 0 rgba(0,0,0,.2);}
.chest.golden .lid{background:linear-gradient(180deg,#fde047,#f59e0b);box-shadow:inset 0 0 0 3px #fef3c7;}
.chest.golden .lock{background:#f43f5e;box-shadow:0 0 12px rgba(244,63,94,.7);}
.chest.big{width:190px;height:160px;margin-top:48px;}
.chest.big .body{height:92px;left:10px;right:10px;border-radius:10px 10px 18px 18px;}
.chest.big .lid{height:62px;top:12px;border-radius:30px 30px 8px 8px;}
.chest.big .lock{top:58px;width:30px;height:34px;margin-left:-15px;}
.chest.wobble{animation:wobble .32s ease;}
@keyframes wobble{25%{transform:rotate(-7deg) scale(1.04)}50%{transform:rotate(6deg) scale(1.07)}75%{transform:rotate(-3deg)}}
.chest.open .lid{transform:translateY(-34px) rotate(-24deg);}
.chest.open .lock{opacity:0;}
/* ---- chest opening, 2026-10-27 ("kinda basic, jazz it up"). Same CSS-drawn chest, no new assets. Everything that
   moves is transform / opacity only (composited), so it stays inside the frame budget _qa/qa.cjs measures.
   1 anticipation: each tap wobbles harder (--wa) and the seam leaks more light (--q); tap 3 tints it the REAL tier.
   2 burst: flash + punch, the lid flies off, light rays behind the chest, particles in the tier colour.
   3 reveal: the tier word, the pearls and any item pop in with a bounce. Intensity scales with the real tier. */
.op-stage{position:relative;display:grid;place-items:center;}
.op-rays{position:absolute;left:50%;top:58%;width:480px;height:480px;margin:-240px 0 0 -240px;pointer-events:none;opacity:0;transform:scale(.2);will-change:transform,opacity;}
.op-rays i + i{display:none;}
#scr-open.t-epic .op-rays i + i,#scr-open.t-jackpot .op-rays i + i{display:block;}
.op-rays i{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--rc,#fde68a) 0deg 6deg,transparent 6deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0 14%,transparent 64%);mask:radial-gradient(circle,#000 0 14%,transparent 64%);
  animation:rays-spin 14s linear infinite;will-change:transform;}
.op-rays i + i{animation-duration:9s;animation-direction:reverse;opacity:.55;}
@keyframes rays-spin{to{transform:rotate(360deg)}}
.chest .seam{position:absolute;left:14%;right:14%;top:66px;height:5px;border-radius:3px;z-index:1;pointer-events:none;
  background:var(--seam,#fff7d6);opacity:var(--q,0);box-shadow:0 0 calc(4px + var(--q,0) * 22px) calc(var(--q,0) * 6px) var(--seam,#fff7d6);
  transition:opacity .25s,box-shadow .25s;}
.chest.charge{animation:wobble-up .34s ease;}
@keyframes wobble-up{25%{transform:rotate(calc(var(--wa,6deg) * -1)) scale(calc(1 + var(--ws,.04)))}50%{transform:rotate(var(--wa,6deg)) scale(calc(1 + var(--ws,.04) * 1.6))}75%{transform:rotate(calc(var(--wa,6deg) * -.5))}}
.op-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5;background:radial-gradient(circle at 50% 42%,#fff 0,var(--rc,#fde68a) 22%,transparent 72%);}
#scr-open.burst .op-flash{animation:op-flash .55s ease-out;}
@keyframes op-flash{0%{opacity:var(--fo,.5)}100%{opacity:0}}
#scr-open.burst .op-rays{animation:rays-in .6s cubic-bezier(.2,1.5,.4,1) forwards;}
@keyframes rays-in{to{opacity:var(--ro,.5);transform:scale(1)}}
#scr-open.burst .chest.big{animation:punch .42s cubic-bezier(.2,1.8,.4,1);}
@keyframes punch{0%{transform:scale(1.18,.84)}45%{transform:scale(.92,1.12) translateY(-10px)}100%{transform:none}}
#scr-open.burst .chest.open .lid{transform:translate(70px,-230px) rotate(-80deg);opacity:0;transition:transform .6s cubic-bezier(.15,.85,.3,1),opacity .35s .3s;}
#scr-open.burst .chest .seam{opacity:0;}
#scr-open.burst .gain{animation:pop .55s var(--boing) .12s both;}
#scr-open.burst .drop{animation:pop .6s var(--boing) .32s both;}
#scr-open.t-common{--rc:#e7e5e4;--fo:.32;--ro:.22;}
#scr-open.t-rare{--rc:#22d3ee;--fo:.45;--ro:.4;}
#scr-open.t-epic{--rc:#c084fc;--fo:.6;--ro:.6;}
#scr-open.t-jackpot{--rc:#fbbf24;--fo:.85;--ro:.85;}
.skipnote{font-size:13px;color:var(--muted);font-weight:var(--fw-bold);min-height:18px;}
.count{font-family:var(--f-display);font-size:32px;line-height:1.1;}
.meter{height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#f59e0b,#fde047);transition:width .9s cubic-bezier(.2,.8,.2,1);}
table.odds{width:100%;border-collapse:collapse;font-size:14px;font-weight:var(--fw-bold);}
table.odds td,table.odds th{padding:6px 4px;text-align:left;border-top:1px solid var(--line);}
table.odds th{color:var(--muted);font-size:12px;font-weight:var(--fw-black);letter-spacing:.02em;}

/* open screen */
#scr-open{justify-content:center;gap:18px;text-align:center;}
#scr-open > .kicker{font-family:var(--f-display);font-size:22px;color:var(--bone);letter-spacing:.01em;}
.reveal{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:180px;}
.tier{font-family:var(--f-display);font-size:62px;line-height:1.05;text-transform:capitalize;letter-spacing:var(--display-track);padding:0 .12em;--ol:4px;
  text-shadow:var(--ol) 0 0 var(--stroke),calc(var(--ol) * -1) 0 0 var(--stroke),0 var(--ol) 0 var(--stroke),0 calc(var(--ol) * -1) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * .7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * .7) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * -.7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * -.7) 0 var(--stroke),0 calc(var(--ol) + 4px) 0 var(--stroke);
  animation:pop .7s var(--boing);transform:rotate(-3deg);}
html[data-type="b"] .tier{text-transform:uppercase;}
.tier::after{content:"!";}
.tier.common{color:var(--common)}.tier.rare{color:var(--rare)}.tier.epic{color:var(--epic)}
.tier.jackpot{color:var(--gold);font-size:80px;--ol:5px;animation:jp 1.2s cubic-bezier(.2,1.8,.3,1),wig 2.4s ease-in-out 1.2s infinite;}
@keyframes jp{0%{transform:scale(.2) rotate(-14deg);opacity:0}40%{transform:scale(1.25) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}
@keyframes pop{0%{transform:scale(.3) rotate(-12deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}
@keyframes wig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg) scale(1.04)}}
.gain{font-family:var(--f-display);font-size:48px;line-height:1.1;color:#fbcfe8;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  text-shadow:0 4px 0 #4a0d2a;}
.gain img{width:54px;height:54px;}
.drop{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.06);animation:pop .55s var(--boing) both;--r:0deg;}
.drop b{font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.01em;}
.tapnote{font-family:var(--f-display);font-size:24px;color:var(--bone);animation:tapbob 1.1s ease-in-out infinite;}
@keyframes tapbob{0%,100%{transform:translateY(0) rotate(-2deg);opacity:1}50%{transform:translateY(-5px) rotate(2deg);opacity:.6}}
@keyframes pulse{50%{opacity:.35}}

/* results */
.res-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;}
.res-head h2{font-size:56px;--ol:4px;animation:pop .6s var(--boing) both;transform:rotate(-3deg);}
.res-head h2.fail{color:var(--rose);}
.res-head h2.win{color:var(--gold);}
.bigstars{display:flex;justify-content:center;gap:10px;font-size:50px;line-height:1;margin:6px 0;font-family:system-ui,sans-serif;}
.bigstars span{color:rgba(255,255,255,.12);transform:scale(.6);transition:transform .45s var(--boing),color .2s;}
.bigstars span.on{color:var(--gold);transform:scale(1) rotate(-8deg);text-shadow:0 0 22px rgba(251,191,36,.8);}
.bigstars span.on:nth-child(2){transform:scale(1.15) translateY(-6px);}
.bigstars span.on:nth-child(3){transform:scale(1) rotate(8deg);}
.scoreline{display:flex;justify-content:center;gap:26px;text-align:center;}
.scoreline .v{font-family:var(--f-display);font-size:50px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:.01em;text-shadow:0 4px 0 rgba(0,0,0,.6);}
.newbest{align-self:center;background:var(--gold);color:#231400;font-family:var(--f-display);font-size:20px;letter-spacing:.01em;padding:6px 16px 7px;border-radius:14px;
  box-shadow:0 4px 0 #a14a06;transform:rotate(-3deg);animation:jp .8s ease both;}
.earn{display:flex;justify-content:space-between;align-items:center;font-weight:var(--fw-bold);font-size:15px;padding:4px 0;}
.earn b{font-family:var(--f-display);font-weight:400;font-size:19px;color:#fbcfe8;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.xpbar{height:14px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden;}
.xpbar i{display:block;height:100%;background:var(--rose);width:0;border-radius:7px;transition:width .8s cubic-bezier(.2,.8,.2,1);}
.lvup{font-family:var(--f-display);font-size:34px;color:var(--gold);text-align:center;letter-spacing:.01em;--ol:3px;margin-top:8px;
  text-shadow:0 3px 0 #7c2d12,0 0 18px rgba(251,191,36,.5);animation:jp .9s ease both;transform:rotate(-3deg);}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 4px;font-weight:var(--fw-bold);font-size:15px;border-top:1px solid var(--line);}
.lb-row:first-child{border-top:0;}
.lb-row .rk{width:24px;text-align:right;color:var(--muted);font-family:var(--f-display);font-size:18px;}
.lb-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em;}
.lb-row .sc{font-family:var(--f-display);font-size:21px;line-height:1.2;color:var(--rose);letter-spacing:.01em;}
.lb-row.me{background:rgba(244,63,94,.14);border-radius:12px;}
.nameinput{flex:1;min-width:0;min-height:48px;background:rgba(255,255,255,.07);border:0;border-radius:16px;color:var(--bone);font-weight:var(--fw-black);
  font-size:17px;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:0 10px;outline:none;box-shadow:inset 0 0 0 1.5px var(--line);}
.nameinput::placeholder{text-transform:none;letter-spacing:.01em;font-weight:var(--fw-bold);color:#6b6b78;}
.nameinput:focus{box-shadow:inset 0 0 0 2.5px var(--rose);}
.live{display:inline-block;font-size:12px;font-weight:var(--fw-black);letter-spacing:.04em;color:#4ade80;margin-left:6px;}

/* ranks */
.ladder{display:flex;flex-direction:column;gap:4px;}
.rung{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;font-weight:var(--fw-bold);font-size:15px;color:var(--muted);}
.rung.cur{background:rgba(255,255,255,.07);color:var(--bone);font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.01em;transform:rotate(-1deg);}
.rung i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35);}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stat{background:var(--ink-2);border-radius:18px;padding:10px 6px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.4);}
.stat .v{font-family:var(--f-display);font-size:26px;line-height:1.15;letter-spacing:.01em;}
.stat .k{font-size:12px;font-weight:var(--fw-bold);color:var(--muted);}

/* versus */
.fmt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 16px;min-height:64px;border-radius:var(--card-r);background:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 #050507;margin-bottom:4px;transition:transform .4s var(--boing);}
.fmt:active{transform:translateY(3px) scale(.98);transition-duration:.06s;}
.fmt.sel{box-shadow:inset 0 0 0 2.5px var(--rose),0 4px 0 var(--rose-dim);background:rgba(244,63,94,.12);transform:rotate(-1deg);}
.fmt b{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.15;letter-spacing:.01em;text-transform:var(--display-case);}
.fmt span{font-size:14px;color:var(--muted);font-weight:var(--fw-bold);}
.pcount{display:flex;gap:8px;}
.pcount button{flex:1;min-height:44px;border-radius:14px;background:var(--ink-3);font-family:var(--f-display);font-size:17px;letter-spacing:.01em;box-shadow:0 4px 0 #050507;margin-bottom:4px;}
.pcount button.sel{background:var(--rose);color:#fff;box-shadow:0 4px 0 var(--rose-dim);}
.handoff{justify-content:center;text-align:center;gap:14px;}
.passlead{font-family:var(--f-display);font-size:22px;margin-top:10px;letter-spacing:.01em;text-transform:var(--display-case);}
.passname{font-family:var(--f-display);font-size:68px;line-height:1.05;color:var(--rose);word-break:break-word;letter-spacing:var(--display-track);padding:0 .1em;--ol:4px;
  text-shadow:var(--ol) 0 0 var(--stroke),calc(var(--ol) * -1) 0 0 var(--stroke),0 var(--ol) 0 var(--stroke),0 calc(var(--ol) * -1) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * .7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * .7) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * -.7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * -.7) 0 var(--stroke),0 calc(var(--ol) + 4px) 0 var(--stroke);
  transform:rotate(-3deg);animation:pop .6s var(--boing) both;}
.bracket{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-weight:var(--fw-bold);font-size:15px;}
.bracket .m{background:var(--ink-2);border-radius:14px;padding:8px 10px;}
.bracket .m .w{color:var(--gold);}
.bracket .final{grid-column:1/-1;text-align:center;}

/* tab bar */
/* SOLID (2026-10-26): it was a transparent→94% gradient, so text and buttons showed through the labels */
#tabbar{position:absolute;left:0;right:0;bottom:0;z-index:35;display:flex;justify-content:space-around;height:var(--tabbar-h);
  padding:6px 6px calc(var(--safe-b) + 6px);background:var(--ink);box-shadow:0 -1.5px 0 var(--line);}
#tabbar button{position:relative;flex:1;max-width:96px;min-height:var(--tab-btn-h);height:var(--tab-btn-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font-weight:var(--fw-bold);font-size:13px;letter-spacing:.01em;border-radius:16px;transition:transform .4s var(--boing);}
#tabbar button:active{transform:scale(.86);transition-duration:.06s;}
#tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;transition:transform .45s var(--boing);}
#tabbar button.sel{color:var(--bone);font-family:var(--f-display);font-weight:400;font-size:15px;}
#tabbar button.sel svg{stroke:var(--rose);transform:rotate(-8deg) scale(1.15) translateY(-1px);}
.badge{position:absolute;top:3px;right:calc(50% - 24px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:#231400;font-family:var(--f-display);font-size:13px;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 0 #a14a06;animation:ping 1.6s ease-in-out infinite;}
.badge.on{display:flex;}

/* modal */
#modal{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s;}
#modal .sheet{width:100%;max-width:480px;max-height:92%;overflow-y:auto;background:var(--ink-2);border-radius:28px 28px 0 0;padding:22px 16px calc(var(--safe-b) + 18px);
  display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.5);touch-action:pan-y;animation:up .45s var(--boing);}
#modal .kicker{align-self:center;}
@keyframes up{from{transform:translateY(60px);opacity:0}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.day{border-radius:14px;background:var(--ink-3);padding:8px 2px;text-align:center;font-size:12px;font-weight:var(--fw-bold);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:76px;justify-content:center;}
.day .dv{font-family:var(--f-display);font-size:14px;color:var(--bone);letter-spacing:.01em;}
.day.got{opacity:.45;}
.day.today{background:rgba(251,191,36,.14);box-shadow:inset 0 0 0 2.5px var(--gold);color:var(--gold);transform:rotate(-3deg) scale(1.06);}
.day img{width:22px;height:22px;}
.day .mini-chest{width:20px;height:16px;border-radius:4px;background:linear-gradient(180deg,#9a3412,#431407);box-shadow:inset 0 0 0 2px #a16207;}
.day .mini-chest.g{background:linear-gradient(180deg,#fde047,#b45309);box-shadow:inset 0 0 0 2px #fef3c7;}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;font-weight:var(--fw-bold);font-size:16px;border-top:1.5px dashed var(--line);}
/* 56x44 hit area; the visible 56x32 track is ::before (was a 56x32 button = under the 44px target) */
.sw{width:56px;height:44px;position:relative;flex:0 0 auto;}
.sw::before{content:"";position:absolute;left:0;right:0;top:6px;height:32px;border-radius:16px;background:#2a2a33;transition:background .2s;}
.sw::after{content:"";position:absolute;top:9px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .35s var(--boing);box-shadow:0 2px 0 rgba(0,0,0,.3);}
.sw.on::before{background:var(--rose);}
.sw.on::after{left:27px;}

/* toast — bottom-anchored: never covers a headline or the in-run score (in a run it sits on the empty ground band) */
#toast{position:absolute;bottom:calc(var(--safe-b) + 92px);left:50%;transform:translate(-50%,30px) scale(.6) rotate(-4deg);z-index:70;min-width:200px;max-width:88vw;
  padding:10px 20px 12px;border-radius:20px;text-align:center;background:rgba(17,17,23,.97);box-shadow:0 5px 0 #050507,0 12px 40px rgba(0,0,0,.55),inset 0 0 0 2px rgba(244,63,94,.55);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .45s var(--boing);}
#toast.show{opacity:1;transform:translate(-50%,0) scale(1) rotate(-1.5deg);}
#toast.gold{box-shadow:0 5px 0 #050507,0 12px 40px rgba(0,0,0,.55),inset 0 0 0 2px rgba(251,191,36,.65);}
#toast .tk{font-family:var(--f-display);font-size:23px;line-height:1.15;letter-spacing:var(--display-track);color:var(--rose);text-transform:var(--display-case);}
#toast.gold .tk{color:var(--gold);}
#toast .tm{font-weight:var(--fw-bold);font-size:15px;margin-top:2px;}

/* =====================================================================================
   v3 — online screens: leaderboards, area, tournaments, season/league, pearl store, account.
   Same tokens as the rest (Lilita display / Fredoka body, ink cards, squishy .btn).
   Filters (period / area) follow the house rule for small toggles: plain text, active =
   colour + 2px underline, no outline, no fill — and still a 44px tap target.
   ===================================================================================== */
.rar.mythic{color:#f472b6;}
.picon.sm{width:18px;height:18px;vertical-align:-4px;margin-right:1px;}
.backlink{align-self:flex-start;min-height:44px;min-width:44px;padding:0 6px 0 0;margin:-6px 0 -4px;   /* -4px: its tap box must not reach into the tilted heading (measured, ui-tour overlap) */font-family:var(--f-display);font-size:18px;color:var(--muted);letter-spacing:.01em;}
.backlink:active{color:var(--bone);}

/* segmented filters */
.seg{display:flex;gap:20px;align-items:flex-end;}
.seg button{min-height:44px;min-width:44px;padding:10px 0 4px;border-bottom:2.5px solid transparent;color:var(--muted);font-family:var(--f-display);font-size:18px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%;transition:color .15s;}
.seg button.on{color:var(--bone);border-bottom-color:var(--rose);}
.lbcard .seg{margin:2px 0 6px;}
.lbcard .seg button{font-size:16px;}

/* states: loading / not live / offline / empty / area */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 8px 14px;}
.state .st-ic{font-size:30px;line-height:1;filter:saturate(.8);}
.state .st-t{font-family:var(--f-display);font-size:21px;line-height:1.15;letter-spacing:.01em;}
.state .st-x{font-size:14px;color:var(--muted);line-height:1.45;max-width:320px;}
.state .btn{margin-top:6px;align-self:center;}
.state.loading{flex-direction:row;justify-content:center;gap:10px;padding:16px 8px;}
.state.loading .st-t{font-family:var(--f-body);font-weight:var(--fw-bold);font-size:15px;color:var(--muted);}
.state.notlive .st-t{color:var(--bone);} .state.offline .st-t{color:#fda4af;} .state.empty .st-t{color:var(--gold);}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--rose);animation:spin .8s linear infinite;flex:0 0 auto;}
@keyframes spin{to{transform:rotate(360deg)}}
.cd{font-family:var(--f-display);font-size:16px;color:var(--gold);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cd.done{color:var(--muted);}
.formerr{font-size:14px;font-weight:var(--fw-bold);color:#fda4af;line-height:1.4;}
.verified{font-family:var(--f-display);font-size:18px;color:#4ade80;letter-spacing:.01em;}

/* leaderboard rows */
.lbcard{padding-top:10px;}
.lb-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:2px 0 6px;}
.lb-head .kicker{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-row.v3{gap:8px;min-height:50px;padding:6px 8px;}
.lb-row.v3 .rk{width:auto;min-width:30px;font-size:17px;}
.lb-row.v3 .fl{width:22px;font-size:17px;text-align:center;flex:0 0 auto;}
.lb-row .who{flex:1;min-width:0;display:flex;flex-direction:column;}
.lb-row .who .nm{flex:none;}
.lb-row .who .ar{font-size:12px;color:var(--muted);font-weight:var(--fw-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-row .you{font-style:normal;font-size:11px;font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;color:var(--rose);margin-left:4px;}
/* your row: highlighted, and pinned to the visible edge when it scrolls out (sticky both ways, clear of the top + tab bars) */
/* sticky offsets are measured from the scroller's padding edge, which already clears the top bar and the tab bar */
.lb-list .lb-row.me{position:sticky;top:0;bottom:0;z-index:2;background:#311721;
  box-shadow:inset 0 0 0 2px rgba(244,63,94,.55),0 6px 16px rgba(0,0,0,.45);border-top:0;}
.lb-list .lb-row.pin{margin-top:8px;}
.lb-row.nome .nm{font-size:14px;color:var(--muted);font-weight:var(--fw-bold);}

/* home entry points */
.home-spacer{display:flex;flex-direction:column;justify-content:flex-end;}
.home-live{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-bottom:10px;}
.hchip{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:16px;background:rgba(17,17,23,.82);max-width:100%;
  box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 rgba(0,0,0,.4);transition:transform .35s var(--boing);}
.hchip:active{transform:scale(.94);transition-duration:.06s;}
.hchip .hc-k{font-size:12px;font-weight:var(--fw-black);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.hchip .hc-n{font-family:var(--f-display);font-size:16px;letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hchip .cd{font-size:14px;}
.hchip.hc-live{box-shadow:inset 0 0 0 2px rgba(74,222,128,.5),0 4px 0 rgba(0,0,0,.4);}
.livedot{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-body);font-weight:var(--fw-black);font-size:12px;letter-spacing:.06em;color:#4ade80;}
.livedot::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:ping 1.4s ease-in-out infinite;}

/* ranks: doors to online play */
.compete{display:flex;flex-direction:column;gap:2px;}
.golink{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t a" "d a";align-items:center;column-gap:10px;text-align:left;min-height:58px;padding:8px 2px;border-top:1.5px dashed var(--line);}
.compete .kicker + .golink{border-top:0;}
.golink .gl-t{grid-area:t;font-family:var(--f-display);font-size:20px;letter-spacing:.01em;line-height:1.15;}
.golink .gl-d{grid-area:d;font-size:13px;color:var(--muted);font-weight:var(--fw-bold);line-height:1.35;}
.golink .gl-d .cd{font-size:13px;}
.golink .gl-a{grid-area:a;font-family:var(--f-display);font-size:26px;color:var(--rose);}
.golink:active{opacity:.7;}
.compete-note{margin-top:6px;line-height:1.45;}

/* tournaments */
.tsec{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.tcard{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;width:100%;min-height:64px;padding:12px 16px 14px;border-radius:var(--card-r);background:rgba(17,17,23,.9);
  box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 rgba(0,0,0,.4);transition:transform .35s var(--boing);}
.tcard:active{transform:scale(.98);transition-duration:.06s;}
.tcard.ts-live{box-shadow:inset 0 0 0 2px rgba(74,222,128,.45),0 4px 0 rgba(0,0,0,.4);}
.tcard.ts-ended{opacity:.8;}
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.tc-kind{font-size:12px;font-weight:var(--fw-black);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;}
.tc-name{font-family:var(--f-display);font-size:23px;line-height:1.15;letter-spacing:.01em;}
.tc-meta{font-size:13px;color:var(--muted);font-weight:var(--fw-bold);line-height:1.4;}
.tc-mine{font-family:var(--f-display);font-size:17px;color:var(--gold);letter-spacing:.01em;}
.tc-cta{font-family:var(--f-display);font-size:17px;color:var(--rose);letter-spacing:.01em;}
.thead{display:flex;flex-direction:column;gap:0;}
.thead h2{margin-top:-2px;}
.tmeta{font-size:14px;font-weight:var(--fw-bold);color:var(--muted);}
.bigrank{font-family:var(--f-display);font-size:34px;color:var(--gold);letter-spacing:.01em;}
.bigrank.big{font-size:64px;line-height:1;text-align:center;text-shadow:0 4px 0 #7c2d12;}
.rwrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-weight:var(--fw-bold);font-size:15px;}
.rwrow:first-of-type{border-top:0;}
.rw-b{min-width:64px;font-family:var(--f-display);font-size:18px;color:var(--gold);}
.rw-v{flex:1;min-width:0;}
.oneshot{font-family:var(--f-display);font-size:58px;line-height:1;text-align:center;color:var(--gold);text-transform:uppercase;letter-spacing:.02em;--ol:4px;transform:rotate(-3deg);margin-top:6px;
  text-shadow:var(--ol) 0 0 var(--stroke),calc(var(--ol) * -1) 0 0 var(--stroke),0 var(--ol) 0 var(--stroke),0 calc(var(--ol) * -1) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * .7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * .7) 0 var(--stroke),
  calc(var(--ol) * .7) calc(var(--ol) * -.7) 0 var(--stroke),calc(var(--ol) * -.7) calc(var(--ol) * -.7) 0 var(--stroke),0 calc(var(--ol) + 4px) 0 var(--stroke);animation:pop .6s var(--boing) both;}
.oneshot-sub{font-family:var(--f-display);font-size:24px;text-align:center;color:var(--bone);margin-top:-2px;letter-spacing:.01em;}
.rules{list-style:none;display:flex;flex-direction:column;gap:8px;padding:4px 2px;}
.rules li{position:relative;padding-left:22px;font-size:15px;font-weight:var(--fw-bold);line-height:1.4;}
.rules li::before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--rose);}
.tres{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.brs{display:flex;justify-content:space-around;gap:6px;margin:6px 0 8px;text-align:center;}
.brs .v{font-family:var(--f-display);font-size:24px;color:var(--gold);}

/* season / league */
.season-banner{position:relative;border-radius:var(--card-r);overflow:hidden;min-height:168px;display:flex;align-items:flex-end;box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 rgba(0,0,0,.4);}
.season-art{position:absolute;inset:0;background:radial-gradient(circle at 78% 26%,hsl(var(--h) 85% 60% / .5),transparent 55%),
  linear-gradient(160deg,hsl(var(--h) 55% 24%),hsl(calc(var(--h) + 30) 60% 9%) 70%);}
.sa-waves{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:.35;
  background:radial-gradient(circle at 10px -4px,transparent 12px,rgba(255,255,255,.25) 13px,transparent 15px) 0 0/28px 18px repeat-x,
  radial-gradient(circle at 10px -4px,transparent 12px,rgba(255,255,255,.14) 13px,transparent 15px) 14px 22px/28px 18px repeat-x;}
.sa-bone{position:absolute;right:6%;top:16%;transform:rotate(-14deg);filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));animation:bob 3.2s ease-in-out infinite;}
.sb-txt{position:relative;padding:16px 16px 14px;max-width:72%;display:flex;flex-direction:column;gap:2px;}
.sb-txt .kicker{color:rgba(255,255,255,.75);}
.sb-txt h2{font-size:34px;}
.sb-theme{font-size:13px;line-height:1.4;color:rgba(255,255,255,.82);font-weight:var(--fw-bold);margin-top:4px;}
.league{display:flex;align-items:center;gap:14px;margin:10px 0 6px;}
.medal{width:62px;height:62px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--mc);
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 0 0 3px rgba(0,0,0,.18);transform:rotate(-6deg);}
.medal span{font-family:var(--f-display);font-size:24px;color:#1d0610;}
.lg-n{font-family:var(--f-display);font-size:26px;letter-spacing:.01em;line-height:1.1;}
.zone{font-size:14px;font-weight:var(--fw-bold);color:var(--muted);padding:4px 0;}
.zone.up.in{color:#4ade80;} .zone.down.in{color:#fda4af;}
.track{display:flex;flex-direction:column;gap:2px;margin:8px 0 12px;}
.step{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 4px;border-top:1px dashed var(--line);font-weight:var(--fw-bold);font-size:15px;}
.step:first-child{border-top:0;}
.st-pt{min-width:76px;font-family:var(--f-display);font-size:16px;color:var(--muted);}
.st-rw{flex:1;min-width:0;}
.st-s{font-size:13px;font-weight:var(--fw-black);color:var(--muted);}
.step.ready .st-pt,.step.ready .st-s{color:var(--gold);} .step.got{opacity:.55;} .step.got .st-s{color:#4ade80;}
.rwline{margin-top:4px;font-size:13px;}
#se-chal .mission:first-of-type{border-top:0;}

/* account */
.profile{display:flex;align-items:center;gap:14px;}
.avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-family:var(--f-display);font-size:28px;color:#fff;text-transform:uppercase;
  background:radial-gradient(circle at 35% 30%,#fb7185,var(--rose-dim));box-shadow:0 4px 0 #5f0a22;transform:rotate(-6deg);}
.ph{font-family:var(--f-display);font-size:24px;line-height:1.15;letter-spacing:.01em;overflow-wrap:anywhere;}
.ph.sm{font-size:19px;}
.gsign .g{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#4285f4;font-family:var(--f-body);font-weight:var(--fw-black);font-size:17px;text-shadow:none;}
.card.danger{box-shadow:inset 0 0 0 1.5px rgba(244,63,94,.28),0 4px 0 rgba(0,0,0,.35);}
.btn.dangerbtn{--bd:#4c0519;background:#7f1d1d;color:#fff;}
.btn.ghostbtn{background:none;box-shadow:none;color:var(--muted);margin-bottom:0;}
.toggle.linkrow{width:100%;text-align:left;font:inherit;font-weight:var(--fw-bold);font-size:16px;color:var(--bone);}
.toggle.linkrow .muted{font-size:14px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sheet-p{line-height:1.5;text-align:center;}
.searchinput{min-height:48px;width:100%;background:rgba(255,255,255,.07);border:0;border-radius:16px;color:var(--bone);font-weight:var(--fw-bold);font-size:16px;padding:0 14px;outline:none;box-shadow:inset 0 0 0 1.5px var(--line);user-select:text;-webkit-user-select:text;}
.searchinput:focus{box-shadow:inset 0 0 0 2.5px var(--rose);}
.optlist{display:flex;flex-direction:column;max-height:42vh;overflow-y:auto;touch-action:pan-y;margin:0 -4px;}
.opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 10px;text-align:left;font-weight:var(--fw-bold);font-size:16px;border-top:1px solid var(--line);flex:0 0 auto;}
.opt:first-child{border-top:0;}
.opt:active{background:rgba(255,255,255,.06);}
.opt.muted{color:var(--muted);}
.opt .fl{width:24px;text-align:center;}

/* pearl store */
.packs{display:flex;flex-direction:column;gap:8px;}
.pack{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 10px;border-radius:18px;background:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--line);}
.pk-l{display:flex;align-items:center;gap:10px;min-width:0;}
.pk-i{width:36px;height:36px;}
.pk-n{font-family:var(--f-display);font-size:21px;letter-spacing:.01em;color:#fbcfe8;}
.pk-b{font-size:12px;font-weight:var(--fw-black);letter-spacing:.04em;color:#4ade80;text-transform:uppercase;}
.pk-buy{min-width:96px;font-variant-numeric:tabular-nums;}
.psr{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);font-weight:var(--fw-bold);font-size:15px;line-height:1.4;}
.psr.ok{color:#4ade80;font-family:var(--f-display);font-size:22px;font-weight:400;} .psr.bad{color:#fda4af;}
#ps-body{display:flex;flex-direction:column;gap:12px;}
#ps-body > .kicker{align-self:center;}
#ps-body > h2{align-self:center;transform-origin:50% 50%;}
.btn.fullw{width:100%;}
.nameinput.handle{text-transform:none;letter-spacing:.01em;}
.signin-note{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:18px;background:rgba(244,63,94,.1);text-align:center;font-weight:var(--fw-bold);font-size:15px;}
/* sign-in sheet (email code / Google) — same input + button language as the rest of the game */
.si-lab{align-self:flex-start;font-weight:var(--fw-bold);font-size:14px;color:var(--muted);margin:2px 0 -4px 4px;}
.si-in{font-size:17px;min-height:52px;}
.si-in.si-code{font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums;padding:0 8px 0 calc(8px + .32em);}
.si-in.si-code::placeholder{font-family:var(--f-body);font-weight:var(--fw-bold);font-size:16px;letter-spacing:.01em;color:#6b6b78;}
.si-in:disabled{opacity:.6;}
.si-msg{text-align:center;line-height:1.4;}
.si-mail,.si-mail b{overflow-wrap:anywhere;}
.si-mail b{color:var(--bone);}
.si-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:var(--fw-bold);font-size:14px;}
.si-or::before,.si-or::after{content:"";flex:1;height:1.5px;background:var(--line);}
.acc-ways{display:flex;flex-direction:column;gap:10px;}
.state.signin .st-t{color:var(--bone);}

/* shop v3: limited-time section, tags, requirement progress, vault/mastery groups, badges */
.shop-head h2{align-self:center;}
.limited{display:flex;flex-direction:column;gap:10px;padding:14px 12px 12px;border-radius:calc(var(--card-r) + 4px);
  background:linear-gradient(180deg,rgba(251,146,60,.16),rgba(251,146,60,.03));box-shadow:inset 0 0 0 2px rgba(251,191,36,.35);}
.lim-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.lim-k{color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:var(--fw-black);}
.lim-n{font-family:var(--f-display);font-size:26px;line-height:1.1;letter-spacing:.01em;}
.itags{display:flex;flex-wrap:wrap;gap:4px 8px;min-height:0;}
.itags:empty{display:none;}
.itag{font-size:11px;font-weight:var(--fw-black);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:4px;}
.itag.wk{color:var(--gold);} .itag.wk .cd{font-family:var(--f-body);font-weight:var(--fw-black);font-size:11px;}
.itag.win{color:#c084fc;}
.item.weekly{box-shadow:inset 0 0 0 2.5px var(--gold),0 0 22px rgba(251,191,36,.18),0 4px 0 rgba(0,0,0,.4);}
.reqbar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:var(--fw-bold);color:var(--muted);}
.reqbar .mb{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;}
.reqbar .mb i{display:block;height:100%;background:var(--rose);border-radius:3px;}
.reqbar span{white-space:nowrap;}
.shop-sec{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.shop-sec .kicker{font-family:var(--f-display);font-size:22px;color:var(--bone);letter-spacing:.01em;}
.badgepv{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff6,transparent 50%),var(--bc);
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 0 0 3px rgba(0,0,0,.2);font-size:28px;line-height:1;}
.shop-foot{text-align:center;line-height:1.5;}
.shop-foot b{color:var(--bone);}

/* 2026-10-05: top-bar Account · Home Tournaments · Endless top-3 toggle · Fishbone tabs · looks on the boards */
#tb-account .acct-ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:17px;line-height:1;color:#fff;padding-top:1px;
  background:radial-gradient(circle at 35% 30%,#fb7185,var(--rose-dim));box-shadow:0 2px 0 #5f0a22;transform:rotate(-6deg);}
#tb-account.on{background:rgba(244,63,94,.28);color:#fff;}
@media (max-width:380px){ #topbar{gap:8px;padding-left:12px;padding-right:12px;} .lvl-bar{width:52px;} .pearls{padding-right:12px;} }
.home-tourney .ht-t{display:inline-flex;align-items:center;gap:8px;}
.home-tourney .ic{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;flex:0 0 auto;}
/* text toggle (no outline, no fill): a 44px tap target that reads as a link */
.linkbtn{display:block;width:100%;min-height:44px;margin-top:4px;font-family:var(--f-display);font-size:17px;letter-spacing:.01em;color:var(--rose);text-align:center;}
.linkbtn:active{opacity:.7;}
.shop-head + .seg{margin-top:-4px;}
/* board rows are buttons now (tap = profile card) */
button.lb-row{width:100%;text-align:left;color:inherit;font:inherit;font-weight:var(--fw-bold);font-size:15px;}
button.lb-row:active{background:rgba(255,255,255,.05);}
.lkpv{flex:0 0 auto;width:62px;height:34px;border-radius:10px;position:relative;overflow:hidden;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.lkpv::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 62% 50%,rgba(var(--g),.38),transparent 62%);}
.lkpv .trailpv{position:relative;gap:2px;}
.lb-row .who .ar{display:flex;align-items:center;gap:6px;min-width:0;}
.lb-row .who .art{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lbadges{display:inline-flex;gap:3px;flex:0 0 auto;}
.badgepv.xs{width:18px;height:18px;font-size:11px;box-shadow:0 1px 0 rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(0,0,0,.2);}
.badgepv.sm{width:34px;height:34px;font-size:18px;flex:0 0 auto;}
/* profile card */
.pf-pv{position:relative;height:120px;border-radius:var(--card-r);overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);}
.pf-pv::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 50%,rgba(var(--g),.35),transparent 60%);pointer-events:none;}
.pf-pv .trailpv{position:relative;z-index:1;}
.pf-list{display:flex;flex-direction:column;}
.pf-row{display:flex;align-items:center;gap:10px;min-height:44px;border-top:1px solid var(--line);}
.pf-list .kicker + .pf-row,.pf-row:first-child{border-top:0;}
.pf-k{min-width:54px;font-size:13px;font-weight:var(--fw-black);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.pf-v{flex:1;min-width:0;font-family:var(--f-display);font-size:18px;letter-spacing:.01em;overflow-wrap:anywhere;}
#modal h2 .you{font-family:var(--f-body);font-style:normal;font-size:13px;font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;color:var(--rose);text-shadow:none;}

/* ---------- theme B "Comic Splash" component accents ---------- */
html[data-type="b"] .btn{box-shadow:5px var(--btn-depth) 0 #000;}
html[data-type="b"] .btn.primary{box-shadow:5px var(--btn-depth) 0 #000,0 12px 28px rgba(244,63,94,.3);text-shadow:2px 2px 0 #000;}
html[data-type="b"] .btn.gold{box-shadow:5px var(--btn-depth) 0 #000;}
html[data-type="b"] .btn:active{box-shadow:1px 1px 0 #000;}
html[data-type="b"] .btn .sub{transform:skewX(calc(var(--btn-skew) * -1));}
html[data-type="b"] h1.title .b{color:var(--gold);}
html[data-type="b"] .card,html[data-type="b"] .item{box-shadow:inset 0 0 0 2px #2a2a33,4px 4px 0 #000;}
/* ---------- theme C "Goofy Sticker" component accents ---------- */
html[data-type="c"] h1.title .a,html[data-type="c"] h1.title .b,html[data-type="c"] .passname{filter:drop-shadow(0 6px 0 rgba(0,0,0,.55));}
html[data-type="c"] h1.title .a,html[data-type="c"] h1.title .b{font-size:58px;}
html[data-type="c"] h1.title .a{color:var(--gold);}
html[data-type="c"] .btn{box-shadow:0 var(--btn-depth) 0 var(--bd),0 8px 18px rgba(0,0,0,.35);}
html[data-type="c"] .btn:active{box-shadow:0 1px 0 var(--bd);}
html[data-type="c"] .btn.primary{text-shadow:0 2px 0 rgba(120,10,40,.6);}

/* landscape phones: tighter chrome */
@media (max-height:500px){
  .screen{padding-top:calc(var(--safe-t) + 58px);padding-bottom:calc(var(--safe-b) + 70px);}
  #stage.tabbed .screen{padding-bottom:12px;}
  .home-title{margin-top:0;}
  h1.title .a,h1.title .b{font-size:40px;display:inline-block;margin:0 6px;}
  .tag,.home-spacer{display:none;}
  .wrap{gap:8px;}
  :root{--tab-btn-h:46px;}
}
@media (min-width:700px) and (orientation:landscape){
  .lgrid{grid-template-columns:repeat(8,1fr);}
  .sgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .limited .sgrid{grid-template-columns:repeat(2,minmax(0,1fr));}   /* the padded season box is too narrow for 3 cards */
}
/* Reduced motion: no bobbing, wobbling, nudging or overshoot. Static tilts stay (they don't move). */
@media (prefers-reduced-motion:reduce){
  #stage.shake,#stage.shake-big{animation:none;}
  h1.title .a,h1.title .b,.lcell.next,.tier,.tier.jackpot,.tapnote,.badge,.daily-cta::after,.passname,.res-head h2,.newbest,.lvup,.drop,.pearls.bump{animation:none!important;}
  .btn,.icon-btn,.rankchip,.wchip,.lcell,.fmt,.tabs button,#tabbar button,#tabbar svg,#toast,.sw::after,.bigstars span{transition-duration:.01s!important;}
  #modal .sheet{animation:none;}
  .livedot::before,.sa-bone,.oneshot{animation:none!important;}
  .hchip,.tcard{transition-duration:.01s!important;}
  .op-rays i,.chest.charge,#scr-open.burst .chest.big,#scr-open.burst .op-flash{animation:none!important;}
}

/* ---- R-F3 / R-F4 / R-F5 (2026-10-09): secret levels, avatars, unlock path, Arcade ---------------- */
.secrets .secrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);}
.secrets .secrow:first-of-type{border-top:0;}
.secrow .sq{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-family:var(--f-display);font-size:20px;
  background:var(--sc,var(--ink-3));color:#0b0b0e;box-shadow:0 3px 0 rgba(0,0,0,.4);}
.secrow.unfound .sq{background:var(--ink-3);color:var(--muted);}
.secrow .sn{font-family:var(--f-display);font-size:18px;line-height:1.15;}
.secrow .stars{font-size:13px;}
.warpwrap .win{color:var(--sc,#4ade80);}
.warpcard{text-align:center;box-shadow:inset 0 0 0 2px var(--sc,#4ade80),0 4px 0 rgba(0,0,0,.35);}
.warpname{font-family:var(--f-display);font-size:30px;line-height:1.1;color:var(--sc,#4ade80);margin-bottom:6px;}
.tokennote{text-align:center;color:var(--gold);font-weight:var(--fw-black);}
.avpv{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:radial-gradient(circle at 35% 30%,#ffffff33,transparent 55%),var(--av);
  box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.14);font-size:32px;line-height:1;}
.avpv span{transform:translateY(1px);}
.avpv.sm{width:40px;height:40px;font-size:22px;}
.avpv.xs{width:24px;height:24px;font-size:14px;box-shadow:0 1px 0 rgba(0,0,0,.45);}
.avpv.lg{width:64px;height:64px;font-size:36px;transform:rotate(-6deg);}
h2 .avpv.sm{display:inline-grid;vertical-align:middle;margin-right:2px;}
.avbtn{flex:0 0 auto;min-width:64px;min-height:64px;border-radius:50%;}
.linkbtn{min-height:44px;}
#tb-account .acct-ini.av{font-size:18px;padding-top:0;}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:10px 0;max-height:46vh;overflow-y:auto;touch-action:pan-y;}
.avcell{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:16px;background:var(--ink-3);min-height:44px;}
.avcell.eq{box-shadow:inset 0 0 0 2.5px var(--rose);}
.avcell.locked .avpv{filter:grayscale(1) brightness(.55);}
.avcell .avn{font-size:12px;font-weight:var(--fw-bold);line-height:1.15;text-align:center;}
.avcell .avlock{position:absolute;top:6px;right:8px;font-size:13px;}
.lb-row .avpv.xs{margin-left:-2px;}
.path .pathrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);}
.path .pathrow:first-of-type{border-top:0;}
.pathpv{width:64px;flex:0 0 auto;display:grid;place-items:center;transform:scale(.8);}
.pathn{font-weight:var(--fw-black);font-size:15px;}
.pathrow .mb{margin-top:6px;}
.pathpct{font-family:var(--f-display);font-size:17px;color:var(--gold);min-width:44px;text-align:right;}
.home-arcade .ht-t,.home-tourney .ht-t{white-space:nowrap;}
/* Home 2026-10-26: one primary (Play); the other modes are an even 2x2 of quieter buttons, all one height */
.modes{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.modes > .kicker{align-self:center;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;}
.mgrid .btn{min-height:48px;font-size:18px;padding:0 10px;}
.mgrid .ic{width:20px;height:20px;}
.mtok{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:4px;border-radius:11px;background:var(--gold);color:#231400;font-family:var(--f-display);font-weight:400;font-size:14px;}
.hchip.hc-daily{box-shadow:inset 0 0 0 2px rgba(251,191,36,.6),0 4px 0 rgba(0,0,0,.4);padding-right:26px;}
.hchip.hc-daily .hc-k{color:var(--gold);}
.hchip.daily-cta::after{top:8px;right:9px;width:9px;height:9px;background:var(--gold);box-shadow:0 0 8px var(--gold);}
.arc-claw .ph.sm{color:var(--gold);}
.tokenhow{margin-top:8px;font-size:13px;}
.bossrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);}
.bossrow:first-of-type{border-top:0;}
.bossrow .bdot{width:14px;height:14px;border-radius:50%;background:var(--bc);box-shadow:0 0 12px var(--bc);flex:0 0 auto;}
.bossrow.locked .bdot{background:var(--ink-3);box-shadow:none;}
.bossrow .bn{font-family:var(--f-display);font-size:18px;}
.mg-screen{background:#06070b;padding:0!important;}

/* ---- R-F6 (2026-10-09): online lobby, rooms, race countdown ---------------------------------------- */
.openroom{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);min-height:52px;}
.openroom:first-child{border-top:0;}
.openroom.me b{color:var(--rose);}
.openroom .rplace{font-family:var(--f-display);font-size:20px;color:var(--gold);min-width:36px;text-align:right;}
.openroom .sc{font-family:var(--f-display);font-size:18px;min-width:44px;text-align:right;}
.roomcode{font-family:var(--f-display);font-size:52px;letter-spacing:.14em;text-align:center;color:var(--gold);margin:8px 0 2px;user-select:text;-webkit-user-select:text;}
.roomcode-in{text-transform:uppercase;letter-spacing:.2em;font-family:var(--f-display);}
.race-cd{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:var(--f-display);font-size:120px;line-height:1;color:var(--bone);
  text-shadow:0 6px 0 rgba(0,0,0,.45);pointer-events:none;z-index:40;}
#room-body{display:flex;flex-direction:column;gap:12px;}
#room-body .card{margin:0;}
#scr-claw.mg-screen{padding:max(12px, var(--safe-t)) 16px max(12px, var(--safe-b))!important;}

/* Remove ads (Android free tier; ui.js raHtml) */
.ra-card{padding-top:6px;padding-bottom:8px;}
.ra-card .toggle{border-top:0;}
.ra-row .btn{margin-bottom:var(--btn-depth);}
.ra-slot .ghostbtn{align-self:center;}