/* Arcade layer styles (arcade.js). Same palette: Blue #005DFF, Green #1DC797, Pastel #C8D8FF, White, Black. */

/* ---------- shared ---------- */
.res-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.res-chips span{background:#000;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:5px 12px}
.res-chips span.rank{background:#1DC797;color:#000}
.learn{display:grid;gap:8px;margin:18px auto 0;max-width:460px;text-align:left}
.learn-h{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#005DFF;margin:0 0 2px}
.learn-row{display:flex;align-items:center;gap:12px;background:#E8F0FF;border-radius:14px;padding:8px 14px 8px 10px}
.learn-row img{width:42px;height:42px;flex:none}
.learn-row p{font-size:14px;font-weight:600;line-height:1.3;margin:0}

/* ---------- 1. follow the bottle ---------- */
.b2{margin-top:12px}
.b2-line{font-size:clamp(19px,calc(4.8 * var(--vw)),24px);font-weight:800;line-height:1.2;letter-spacing:-.015em;margin:0 0 14px}
.b2-line.ok{color:#000000}
.b2-sub{font-size:16px;line-height:1.4;margin:-6px 0 14px;color:#1c2330}
.b2-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b2-tiles.three{grid-template-columns:repeat(3,1fr)}
.b2-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:14px 10px;border:2px solid #C8D8FF;border-radius:18px;background:#fff;color:#000;font:700 clamp(15px,calc(3.8 * var(--vw)),18px)/1.15 Poppins,sans-serif;text-align:center;cursor:pointer;box-shadow:0 4px 0 #C8D8FF;transition:transform .12s,box-shadow .12s,border-color .15s,background .15s}
.b2-tile:hover:not(:disabled){transform:translateY(-3px);border-color:#005DFF;box-shadow:0 7px 0 #005DFF}
.b2-tile:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #005DFF}
.b2-tile:disabled{opacity:.55;cursor:default}
.b2-art{display:block;width:44px}.b2-art svg{display:block;width:100%;height:auto}
.b2-chip{display:inline-block;background:#E8F0FF;color:#000;border-radius:999px;font-size:13px;font-weight:700;padding:5px 13px;margin:0 0 14px}
.b2-chip.ok{background:#1DC797}
.b2-bar{height:4px;background:#E8F0FF;border-radius:2px;overflow:hidden;margin-top:12px}
.b2-bar i{display:block;height:100%;width:0;background:#005DFF;transition:width 1.9s linear}
.b2 .g-next{margin-top:0}
.b2 .b2-chip + .g-next{display:flex}

/* ---------- 2. play an over ---------- */
.score .mult{background:#1DC797;color:#000;font-weight:800;font-size:12px;border-radius:999px;padding:4px 10px;animation:okp .5s infinite alternate}
.ov-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.ov-opt{position:relative;display:flex;align-items:center;justify-content:center;min-height:76px;padding:12px 8px 8px;border:2px solid #C8D8FF;border-radius:16px;background:#fff;color:#000;font:700 clamp(14px,calc(3.6 * var(--vw)),16px)/1.2 Poppins,sans-serif;text-align:center;cursor:pointer;box-shadow:0 4px 0 #C8D8FF;transition:transform .12s,box-shadow .12s,border-color .15s,background .15s}
.ov-opt kbd{position:absolute;left:9px;top:5px;font:700 10px Poppins,sans-serif;color:#4a5560}
.ov-opt:hover:not(:disabled){transform:translateY(-3px);border-color:#005DFF;box-shadow:0 7px 0 #005DFF}
.ov-opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #005DFF}
.ov-opt:disabled{cursor:default}
.ov-opt.right{background:#1DC797;border-color:#000000;box-shadow:0 4px 0 #000000}
.ov-opt.miss{background:#E8F0FF;border-color:#C8D8FF;box-shadow:0 4px 0 #C8D8FF;color:#1c2330}
.ov-clock{height:8px;border-radius:4px;background:#E8F0FF;overflow:hidden;margin-top:10px}
.ov-clock i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#1DC797,#005DFF);transition:background .3s}
.ov-clock.late i{background:#005DFF}
.ov-pop{z-index:3}
@media (hover:none){.ov-opt kbd{display:none}}
@media (max-width:420px){.ov-opts{gap:8px}.ov-opt{min-height:70px;padding:12px 4px 8px}}

/* ---------- 3. swipe to sort ---------- */
.combo{display:inline-flex;align-items:center;gap:5px}
.combo i{width:14px;height:14px;border-radius:50%;border:2px solid #005DFF;background:#fff;transition:background .2s,border-color .2s}
.combo i.on{background:#1DC797;border-color:#000000}
.combo b{margin-left:4px;font-weight:800;font-size:15px;background:#E8F0FF;border-radius:999px;padding:2px 9px}
.combo b.hot{background:#000;color:#1DC797}
.combo b.bump{animation:bump .4s}
.timer.low i{background:#005DFF}
.arena.fever{box-shadow:inset 0 0 0 3px #1DC797,inset 0 0 46px rgba(29,199,151,.38)}
.sbin{overflow:visible}
.sbin .cnt{position:absolute;right:-2px;top:14px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#000;color:#fff;font:800 12px/22px Poppins,sans-serif;font-style:normal;text-align:center;z-index:2}
.sbin .cnt.bump{animation:bump .35s}
.nextq{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.85);border-radius:999px;padding:4px 10px 4px 8px;z-index:2}
.nextq:before{content:"Next";font:800 10px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#005DFF;margin-right:2px}
.nextq img{width:26px;height:26px}.nextq img + img{opacity:.55}
.nextq.empty{display:none}
.sort-msg span{display:block}
@media (max-width:860px){.combo b{font-size:14px}.nextq{left:6px;top:6px}}

/* keep the answers on screen while the ball is in flight */
.ov-stage{max-height:clamp(150px,calc(26 * var(--vh)),230px);margin-top:8px}
.ov-stage svg{height:100%}
#sheetBody .score,.sheet-body .score{padding:9px 14px}
.sheet-body .score .runs{font-size:26px}
.ov-lt{padding:9px 14px;margin-bottom:8px}
.ov-opts{margin-top:8px}

/* ---------- challenge + share ---------- */
.chal{background:#E8F0FF;border-radius:18px;padding:16px 18px;margin:0 0 14px;display:grid;gap:4px;justify-items:start}
.chal p{margin:0;font-size:16px;line-height:1.3}
.chal .btn{margin-top:10px}
.chal-res{margin:14px auto 0;max-width:460px;font-weight:700;font-size:16px;background:#E8F0FF;border-radius:14px;padding:10px 14px}
.chal-res.won{background:#1DC797}
.share-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:18px}
.result .share-row .share{margin:0}

/* ===== v161: decluttered. Fewer chips, one primary action, labels never covered ===== */
/* result screen */
.result .g-h{font-size:clamp(20px,calc(4.6 * var(--vw)),26px);margin-top:8px}
.result .big{font-size:clamp(30px,calc(7.5 * var(--vw)),46px);margin:6px 0 4px}
.result .g-sub{margin-top:2px}
.result .g-actions{margin-top:20px}
.share-row{gap:6px 22px;margin-top:14px}
.share-row .linkish,.result .share-row .share{background:none;border:0;padding:4px 0;color:#005DFF;font:700 14px Poppins,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin:0}
.share-row .linkish:hover,.result .share-row .share:hover{color:#000}
.learn{margin-top:14px}

/* over: no points chip or floating points (runs are the score), quieter crowd text, calmer pop */
.hud.k-over .pts,.hud.k-over .fpts{display:none}
.ov-opt kbd{display:none}
.ov-pop.dot{font-size:clamp(18px,calc(4.4 * var(--vw)),26px);padding:4px .7em}

/* sort: bins in the corners, the card gets its own space, so no label is ever covered */
.arena{--ah:clamp(340px,calc(54 * var(--vh)),420px);--bz:92px;--ch:clamp(128px,calc(var(--ah) - 2 * var(--bz) - 14px),188px);height:var(--ah);background:linear-gradient(180deg,#F2F6FF,#E8F0FF)}
.arena .sbin{width:56px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.arena .sbin.up{top:6px}.arena .sbin.down{bottom:6px}
.arena .sbin.left{left:10px}.arena .sbin.right{right:10px}
.arena .sbin span{font-size:11px;line-height:1.1;margin-top:2px}
.arena .item2{width:150px;height:var(--ch);margin:calc(var(--ch) / -2) 0 0 -75px;gap:4px;padding:8px}
.arena .item2 .art{width:auto;height:calc(var(--ch) * .5);margin:0}
.arena .item2 b{font-size:15px}
.arena .streak{top:auto;bottom:10px;right:10px}
.sort-top{justify-content:flex-end;font-size:13px;color:#4a5560}
.sort-msg{min-height:40px;font-size:14px;margin-top:10px}
@media (max-width:860px){.arena .item2{width:136px;margin-left:-68px}}

/* ===== v164: Sachin peeking over a card (mini pop-up). Used twice only: games welcome and game result ===== */
.peek{position:relative;height:124px;overflow:hidden;display:flex;justify-content:center;pointer-events:none;margin:0 auto -1px}
.peek img{flex:none;width:206px;height:auto;max-width:none;align-self:flex-start;animation:peekup .55s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes peekup{from{transform:translateY(46px);opacity:0}}
.pk-card{position:relative;z-index:1;background:#E8F0FF;border-radius:22px;padding:18px 20px 20px;text-align:center}
.pk-card .ctx{background:none;padding:0;margin:0 auto 12px;text-align:center;max-width:none;font-size:14px;color:#1c2330}
.pk-card .g-sub{margin-top:4px}
.res-top{padding-top:16px}
.res-top .g-k{margin-bottom:2px}
.result .peek{margin-top:-4px}
@media (prefers-reduced-motion:reduce){.peek img{animation:none}}
@media (max-width:420px){.peek{height:112px}.peek img{width:188px}}

/* ===== v167: readability + alignment pass for every game screen ===== */
.g-h,.b2-line,.b2-sub,.in-body h3,.in-line,.chal p,.sort-msg span,.ov-lt p,.g-note,.g-sub,.learn-row p,.chal-res{text-wrap:balance}
.result .g-h,.result .big,.result .g-sub,.result .g-note{text-wrap:balance;margin-left:auto;margin-right:auto;max-width:34ch}
.res-top{display:flex;flex-direction:column;align-items:center;gap:0}
.res-top .g-h{font-size:clamp(19px,calc(4.4 * var(--vw)),24px);line-height:1.2;margin:10px 0 0;font-weight:800}
.res-top .big{white-space:nowrap;font-size:clamp(30px,calc(8.6 * var(--vw)),44px);line-height:1.05;margin:8px 0 2px}
.res-top .g-sub{font-size:16px;color:#1c2330;margin:0}
.res-top .g-note{font-size:14px;color:#4a5560;margin:8px 0 0}
.res-top .res-pts{margin:4px 0 0}
.b2 .g-next{position:relative;overflow:hidden}
.b2-fill{position:absolute;left:0;bottom:0;height:4px;width:0;background:#1DC797;transition:width 1.9s linear}
.counter[hidden]{display:none}
.fpts{top:48px}
.ov-know{background:#E8F0FF;border-radius:14px;padding:10px 14px;margin:12px 0 0;font-size:14px;font-weight:500;line-height:1.35;text-wrap:balance}
.ov-know.ok{background:#E2F6EE}
.ov-know b{font-weight:800}
#sheetBody .g-next,.sheet-body .ov-know + .g-next{margin-top:12px}
.result .learn{margin-top:22px}
.learn-row{padding:6px 12px 6px 8px}
.learn-row img{width:36px;height:36px}
.learn-row p{font-size:14px}
.chal{background:#E2F6EE;justify-items:center;text-align:center;padding:18px 18px 20px}
.chal p{font-size:17px;line-height:1.3}
.chal .btn{margin-top:12px}
.pk-card.quiet{background:none;padding:18px 0 4px}

/* picker cards: a soft fade behind the title so artwork never sits under the text */
.pick .cover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,var(--pb) 22%,transparent)}
.pick.p-bottle,.pick.p-sort{--pb:#005DFF}
.pick.p-over{--pb:#000}
.pick b,.pick small{text-shadow:0 1px 8px var(--pb)}

/* ---------- score ladder (no players, no counts) ---------- */
.lvl-strip,.lvl-line{display:flex;align-items:center;gap:3mm;width:100%;margin:12px 0 0;padding:10px 14px;border:2px solid #C8D8FF;border-radius:16px;background:#fff;color:#000;font:inherit;text-align:left;cursor:pointer}
.lvl-line.up{background:#E2F6EE;border-color:#1DC797}
.lvl-badge{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#005DFF;color:#fff;font-weight:800;font-size:14px}
.lvl-badge.big{width:40px;height:40px;font-size:17px}
.lvl-txt{flex:1;display:grid;line-height:1.25}.lvl-txt b{font-size:15px}.lvl-txt small{font-size:13px;color:#3a4452}
.lvl-go{flex:none;font-size:12px;font-weight:700;color:#005DFF}
.lad{text-align:center}
.lad-pill{display:inline-block;background:#1DC797;color:#000;font-weight:800;font-size:12px;border-radius:99px;padding:5px 14px}
.lad-h{font-size:clamp(30px,calc(8 * var(--vw)),40px);font-weight:800;letter-spacing:-.012em;margin:10px 0 4px}
.lad-sub{color:#3a4452;font-size:14px;margin:0 auto 18px;max-width:34ch}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:12px}
.pod{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;background:#fff;border:2px solid #C8D8FF;border-radius:16px;min-height:118px}
.pod.first{min-height:150px;background:#C8D8FF;border-color:#005DFF}.pod.second{min-height:130px}
.pod-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#005DFF;color:#fff;font-weight:800}
.pod b{font-size:15px}.pod small{font-size:12px;color:#3a4452}
.pod.me,.lad-list li.me{border-color:#1DC797;box-shadow:0 0 0 3px rgba(29,199,151,.35)}
.lad-chip{background:#1DC797;color:#000;font-weight:800;font-size:11px;border-radius:99px;padding:2px 8px}
.lad-done{font-size:11px;font-weight:700;color:#000000}
.lad-list{list-style:none;display:grid;gap:8px;margin:0 0 14px;padding:0;text-align:left}
.lad-list li{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #E8F0FF;border-radius:14px;padding:10px 14px}
.lad-list .r{font-weight:800;color:#005DFF;width:18px}.lad-list b{flex:1}.lad-list .p{font-size:13px;color:#3a4452}
.lad-you{display:flex;align-items:center;gap:12px;background:#C8D8FF;border-radius:16px;padding:12px 14px;text-align:left}
.lad-you .btn{flex:none;padding:10px 16px}
.lad-note{font-size:12px;color:#3a4452;margin-top:12px}