/* Arcade tab: the game picker shared by Claw Machine Madness, Stacker and Coin Pusher (arcade.js). Cabinets reuse claw.css. */
.arcade-bar{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap;}
.arcade-bar button{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; border:1px solid var(--line2); background:var(--card); color:var(--muted); font:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:border-color .15s, color .15s, box-shadow .15s;}
.arcade-bar button:hover{border-color:var(--pink); color:var(--text);}
.arcade-bar button.on{border-color:var(--pink); color:var(--text); background:linear-gradient(110deg,rgba(244,114,182,.18),var(--card)); box-shadow:0 0 16px rgba(244,114,182,.3);}
/* taller glass than the claw machine, so size the cabinet by its own aspect ratio */
.arcadeg .cabinet{width:max(300px, min(100%, calc((100vh - 470px) * .72 + 32px)));}
#stCanvas{aspect-ratio:336/480; cursor:pointer;}
#puCanvas{aspect-ratio:360/480;}
#skCanvas{aspect-ratio:360/480; cursor:pointer;}
.arcadeg .go-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.arcadeg .go-card .go-ico{font-size:34px;}
.arcadeg .tier-txt{display:block; font-weight:700; font-size:13px; margin-bottom:8px;}
.arcadeg .start kbd{margin-left:4px;}
.pu-hint{animation:none !important; cursor:default; opacity:.8;}
@media (max-width:820px){ .arcadeg .cabinet{width:100%;} .arcade-bar button{padding:7px 11px; font-size:12px;} }

/* daily arcade challenge banner (on every arcade screen) and its leaderboard pop-up */
.arcade-daily{grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; border:1px solid rgba(255,214,107,.35);
  background:linear-gradient(110deg,rgba(255,214,107,.10),var(--card) 55%);}
.arcade-daily:empty{display:none;}
.ad-ico{font-size:28px; line-height:1;}
.ad-main{flex:1; min-width:0;}
.ad-top{display:flex; align-items:baseline; gap:8px;}
.ad-top b{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); font-family:var(--mono);}
.ad-top small{color:var(--muted); font-size:11px;}
.ad-text{font-weight:600; font-size:14px; margin:2px 0 6px;}
.ad-rew{color:var(--gold); font-family:var(--mono); font-size:12px; margin-left:4px; white-space:nowrap;}
.ad-bar{height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden;}
.ad-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:inherit; transition:width .4s;}
.ad-bar.done i{background:var(--mint);}
.ad-prog{display:block; margin-top:4px; color:var(--muted); font-size:11.5px; font-family:var(--mono);}
.ad-act{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.ad-act .cm-btn{padding:7px 11px; font-size:12px; white-space:nowrap;}
.ad-modal h2{font-size:19px; margin:4px 0 6px;}
.ad-modal .eyebrow{color:var(--gold);}
.ad-modal .lb-list{margin-top:12px;}
@media (max-width:820px){ .arcade-daily{flex-wrap:wrap;} .ad-act{width:100%; justify-content:stretch;} .ad-act .cm-btn{flex:1;} }