/* Shared arcade challenges and player tools. */
:root{--touch-scale:1;--touch-offset:0px}
#settings-dlg,#v28-changelog{max-height:calc(100dvh - 28px);overflow:auto}
@media(max-width:1450px){.top{flex-wrap:wrap}.top .tabs{order:3;width:100%;margin-left:0;justify-content:flex-start;overflow-x:auto;flex:none}.top .me{margin-left:auto}}
#tab-challenges>.section-head:first-child{align-items:end;margin-top:15px}#tab-challenges .kicker{color:#9beaaf;letter-spacing:2px;font-size:10px}
.v28-cup{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;margin:22px 0 34px;padding:30px;border:1px solid #84bdbb59;border-radius:23px;background:radial-gradient(ellipse at 15% 0,#31687a65,transparent 65%),linear-gradient(115deg,#163245,#111d34);box-shadow:0 16px 40px #0002}.v28-cup h2{font-size:32px;color:#f1ffda;margin:12px 0}.v28-cup p{color:#b4cdda;font-size:13px;line-height:1.7}.v28-cup .btn{margin:9px 0}.v28-cup ol{padding:0;list-style:none;margin:0;display:grid;gap:7px;counter-reset:cup}.v28-cup li{display:flex;align-items:center;gap:12px;padding:11px;border-radius:11px;background:#0615265c;font-size:12px;counter-increment:cup}.v28-cup li:before{content:counter(cup);color:#90ddd0;font-weight:900;min-width:20px}.v28-cup li span{margin-left:auto;color:#fce18b;font-variant-numeric:tabular-nums}
#v28-mastery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.v28-mastery-card{padding:20px 17px;border:1px solid #566b844d;background:linear-gradient(150deg,#1b2a40,#111b2e);border-radius:18px}.v28-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.v28-card-head h3{margin:0;font-size:16px;color:#edf7ff}.v28-card-head .btn{white-space:nowrap;font-size:10px}.v28-goal{display:flex;align-items:center;gap:10px;padding-top:16px;margin-top:15px;border-top:1px solid #7c90a928;color:#c0d0dd}.v28-goal>i{font-style:normal;font-weight:900;color:#233249;background:var(--medal);width:26px;height:31px;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);flex:none;opacity:.7}.v28-goal.is-earned>i{opacity:1}.v28-goal>div{flex:1;min-width:0}.v28-goal b{display:block;font-size:11px;color:#eaf6fd}.v28-goal small{display:block;font-size:9px;line-height:1.65;margin-top:5px;min-height:28px}.v28-goal progress{display:block;width:100%;height:5px;appearance:none;margin:8px 0 5px;border:0;border-radius:5px;background:#091728;overflow:hidden}.v28-goal progress::-webkit-progress-bar{background:#091728}.v28-goal progress::-webkit-progress-value{background:#92e2c9}.v28-goal progress::-moz-progress-bar{background:#92e2c9}.v28-goal span{font-size:9px;color:#819db1;font-variant-numeric:tabular-nums}.v28-equip{align-self:end;border:1px solid #8ab3b660;border-radius:7px;background:#214450;color:#c7f4d8;font-size:9px;padding:7px;cursor:pointer}
.v28-run-meta{display:block;font-size:9px;line-height:1.5;color:#8bb6cb;max-width:320px;margin-top:4px}.v28-tools-card{border:1px solid #63758e47;background:linear-gradient(120deg,#19263b,#111b2c);border-radius:18px;padding:24px;margin:24px 0}.v28-tools-card>.kicker{font-size:9px;color:#8fd6c8;letter-spacing:1.8px}.v28-tools-card h3{color:#edfaff;margin:8px 0 12px}.v28-tools-card .fine{line-height:1.7;max-width:760px}.v28-tool-actions{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.v28-code-label{display:grid;gap:7px;font-size:11px;color:#a9c4d7;margin:16px 0;max-width:760px}.v28-code-label input{font-family:monospace;font-size:12px;min-width:0;width:100%;padding:12px;border:1px solid #586f8766;border-radius:9px;background:#0d192b;color:#d8f0ff}.v28-sync-preview{padding:17px;background:#27445166;border:1px solid #86c2b57a;border-radius:12px;margin:15px 0}.v28-sync-preview[hidden]{display:none}.v28-sync-preview p{font-size:12px;line-height:1.7;color:#d7eadf}.v28-sync-preview button{margin:5px 7px 5px 0}
.v28-clip{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #62778c33}.v28-clip b{font-size:12px;color:#e0edf8}.v28-clip small{display:block;color:#92afc3;font-size:10px;margin-top:6px}.v28-clip>div:last-child{display:flex;gap:7px}.v28-settings{margin:20px 0;padding-top:17px;border-top:1px solid #6874894d}.v28-settings h3{font-size:16px;margin:0 0 8px}.v28-settings .set-row{gap:14px}.v28-settings select{border:1px solid #7e8ba65c;background:#132338;border-radius:7px;color:#d9e8f6;padding:8px;max-width:145px}.v28-settings .fine{font-size:11px;line-height:1.6}
#v28-result-mastery{color:#e9d9a0;background:#6c60321c;border-radius:10px;font-size:11px;line-height:1.8;margin:8px 0;padding:8px 12px}#v28-result-mastery[hidden]{display:none}.v28-changelog{padding-left:19px;color:#b7c8d8;font-size:13px;line-height:1.8}.v28-changelog li{padding:7px 0}#v28-update-notice{position:fixed;z-index:50;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:15px 19px;width:max-content;max-width:calc(100% - 28px);border:1px solid #a0dcb5;background:#173344f5;color:#dcf7e3;border-radius:16px;box-shadow:0 10px 35px #0005;font-size:12px}#v28-update-notice[hidden]{display:none}
body.v28-reduce-effects .bump,body.v28-reduce-effects .show{animation:none!important}body.v28-reduce-effects .metro-callout{transition:none}body.v28-reduce-effects *{scroll-behavior:auto!important}
@media(pointer:coarse){
 .arcade-joystick:not(.is-inline){scale:var(--touch-scale);transform-origin:bottom left;translate:0 calc(-1 * var(--touch-offset))}.arcade-joystick.is-inline{scale:var(--touch-scale);transform-origin:bottom center}
 .metro-controls,.rh-controls,.friends-controls{translate:0 calc(-1 * var(--touch-offset))}.metro-controls>div,.rh-controls,.friends-pad,.friends-actions{scale:var(--touch-scale);transform-origin:bottom center}
 body.v28-left-handed .metro-controls{flex-direction:row-reverse}body.v28-left-handed .friends-controls{flex-direction:row-reverse}body.v28-left-handed .friends-actions{justify-content:flex-start}
 body.v28-left-handed .arcade-joystick:not(.is-inline){left:auto!important;right:18px;transform-origin:bottom right}body.v28-left-handed .rh-controls{right:auto;left:16px;transform-origin:bottom left}
}
@media(max-width:1000px){#v28-mastery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.v28-cup{grid-template-columns:1fr;gap:17px;padding:22px 19px}.v28-cup h2{font-size:25px}#v28-mastery-grid{grid-template-columns:1fr}.v28-tools-card{padding:18px 15px}.v28-clip{align-items:flex-start;gap:10px;flex-wrap:wrap}.v28-clip>div:last-child{margin-left:auto}.v28-card-head h3{font-size:15px}#v28-update-notice{flex-wrap:wrap;justify-content:center;bottom:12px}#v28-update-notice span{width:100%;text-align:center}#tab-challenges>.section-head:first-child>span{display:none}.v28-run-meta{font-size:8px;max-width:210px}}
@media(max-height:510px) and (pointer:coarse){.v28-settings{margin-top:12px}.arcade-joystick:not(.is-inline),.metro-controls,.rh-controls,.friends-controls{translate:0 calc(-.5 * var(--touch-offset))}}

/* Scaled touch controls grow inward from the screen edge they sit on, so large sizes stay on screen. */
.friends-pad{transform-origin:bottom left}.friends-actions{transform-origin:bottom right}
body.v28-left-handed .friends-pad{transform-origin:bottom right}body.v28-left-handed .friends-actions{transform-origin:bottom left}
.metro-controls>div:first-child{transform-origin:bottom left}.metro-controls>div:last-child{transform-origin:bottom right}
.rh-controls{transform-origin:bottom right}
/* Rooftop Hoops on narrow phones: keep the joystick and three action buttons from touching. */
@media (max-width:430px),(max-height:430px){#game-root:has(.rh-controls) .rh-controls,#game-root:has(.rh-controls) .rh-controls~.arcade-joystick,#game-root:has(.rh-controls) .arcade-joystick:not(.is-inline){scale:min(var(--touch-scale),1.08)}}
/* Header: a squeezed "Play with friends" button truncates instead of spilling over the score. */
.stage-bar .stage-online{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Skin rarity labels */
.skin .rarity{font:800 10px Rubik,Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-bottom:-4px}
.rarity-common{background:#2a3344;color:#c3cfe0}.rarity-rare{background:#173a5c;color:#7cc8ff}.rarity-epic{background:#3a1f5c;color:#d4a8ff}.rarity-legendary{background:linear-gradient(90deg,#5c3d0a,#6b2a12);color:#ffd36b;box-shadow:0 0 12px #ffb3364d}
.skin .skin-desc{color:var(--muted,#9aa6bd);font-size:11px;margin-top:-6px;line-height:1.35}

/* Mastery reward previews */
.v28-goal{align-items:center}
.v28-reward-box{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:88px;margin-left:auto}
.v28-reward-box canvas{width:64px;height:64px}
.v28-reward-box .rarity{font:800 9px Rubik,Arial,sans-serif;letter-spacing:.6px;padding:2px 7px;border-radius:99px;text-align:center;white-space:nowrap}
.v28-reward-box.is-unlocked canvas{filter:drop-shadow(0 0 8px #ffd77755)}
.v28-locked{font-size:10px;color:#8b97b0}
#v28-result-mastery{background:none;padding:0}
.v28-unlock{display:flex;gap:14px;align-items:center;margin:10px 0;padding:12px 14px;border-radius:16px;background:linear-gradient(120deg,#2a2140,#1a2236);border:1px solid #ffffff22;animation:v28pop .6s cubic-bezier(.2,1.6,.4,1)}
.v28-unlock canvas{width:84px;height:84px;flex:none}
.v28-unlock .kicker{font-size:9px;letter-spacing:1.5px;margin:0 0 2px;color:#ffd36b}
.v28-unlock b{display:block;font:400 20px "Russo One",Impact,sans-serif;color:#fff}
.v28-unlock small{display:block;color:#b8c3da;font-size:11px;margin:2px 0 8px}
.rarity-glow-legendary{border-color:#ffc94d99;box-shadow:0 0 24px #ffb3364d}
.rarity-glow-epic{border-color:#c48bff88;box-shadow:0 0 20px #a46bff40}
.rarity-glow-rare{border-color:#6fb6ff77}
@keyframes v28pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@media(max-width:620px){.v28-reward-box{min-width:74px}.v28-reward-box canvas{width:54px;height:54px}}

.v28-goal>.v28-reward-box{flex:none;width:92px;margin-left:auto}
.v28-goal .v28-reward-box small{min-height:0;margin-top:0;font-size:9px;line-height:1.4;display:block}
.v28-goal .v28-reward-box canvas{width:70px;height:70px}
.v28-reward-box .v28-equip{position:static;margin:3px 0 0;transform:none}
@media(max-width:620px){.v28-goal>.v28-reward-box{width:80px}.v28-goal .v28-reward-box canvas{width:60px;height:60px}}
.v28-reward-box .v28-equip{align-self:center}