/* UI polish (review 2026-10-07): js/ui/polish.js, the Store's Skins page (I1/I2), How to play (J1), Loadout teaser (J2). */

/* ---------- B6: pressed state on every menu button (polish.js holds .uiPress for >= 100 ms); scale composes with each
   button's own :active transform. A greyed button (.btn.no) shakes "no" instead of pressing in. ---------- */
:is(#ui, #sheet, #modal, #celebrate, #crateOv) :is(button, [data-a]):not(:disabled):not(.no):is(:active, .uiPress) { scale:.96; filter:brightness(.9); }
:is(#ui, #sheet, #modal) .btn.no:not(:disabled):is(:active, .uiPress) { transform:none; animation:uiNope .22s ease-out; }
@keyframes uiNope { 30% { translate:-3px 0; } 70% { translate:3px 0; } }
/* B6: the spinner on a button whose action takes over 300 ms (and Setup's Start, A6) */
.busy { pointer-events:none; } .busy:not(.uiSpinOnly) { filter:saturate(.8); }
.uiSpin { display:inline-block; flex:none; width:1em; height:1em; margin-right:.45em; vertical-align:-.15em; border:.17em solid currentColor; border-right-color:transparent; border-radius:50%; animation:uiSpin .7s linear infinite; }
@keyframes uiSpin { to { transform:rotate(360deg); } }

/* ---------- J1: the ⓘ next to a page title, and the How to play sheet ---------- */
.uiInfo { display:inline-grid; place-items:center; flex:none; width:24px; height:24px; margin:0 auto 0 8px; align-self:center; vertical-align:middle; padding:0; border-radius:50%; border:2px solid var(--ol, #061226); background:#1d4f94; color:#fff; font:italic 800 14px/1 Georgia, "Times New Roman", serif; text-shadow:none; box-shadow:inset 0 2px 0 rgba(255,255,255,.35); cursor:pointer; }
.uiInfo:hover { background:#2a64b4; }
.pgT:has(+ .uiInfo) { flex:0 1 auto; } /* the title shrinks to its text so the ⓘ sits right after it; the ⓘ's auto margin keeps the right side pushed right */
.hbSheet .hb2 details[open] > summary { color:#ffd166; }
.gearMenu { display:grid; gap:8px; } .gearMenu .btn { display:flex; align-items:center; justify-content:center; gap:8px; } .gearMenu .btnI { width:22px; height:22px; }

/* ---------- J2: Loadout's appearance teaser (one row instead of three "coming soon" tiles) ---------- */
.loApps .loTease { grid-column:1 / -1; cursor:default; opacity:.75; }
.loApps .loTease:active, .loApps .loTease.uiPress { transform:none; scale:none; filter:none; }
.loPreset[hidden] { display:none !important; }

/* ---------- I1/I2: the Skins page of the Store ---------- */
.skGrid { grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); } /* 3 across on a phone, more on wide screens (not 3 giant cards) */
.pgHead .skMine { margin-right:14px; } /* clear of the coin, which hangs off the Cash chip's left edge */
.skTabs { margin:0 0 8px; } .skTabs button { padding:6px 4px 7px; font-size:14px; }
.skCats.skSub { padding-top:0; } .skCats.skSub button { font-size:11px; padding:4px 8px; background:rgba(11,36,72,.7); }
.skCats button.grp.in:not(.on) { border-color:#4f8de0; color:#fff; }
.skR.r0 { background:#6b7380; } .skR.r1 { background:#3f9a3c; }
.skCard.r0 { border-color:#8a929c; } .skCard.r1 { border-color:#4cb84a; }
.skCard.can small { color:#9ff07a; }
#skAct .btn.no { display:flex; flex-direction:column; align-items:center; gap:0; line-height:1.05; }
#skAct .btn small { display:block; font:800 10.5px var(--fb); opacity:.9; }
.skGoal { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; width:100%; margin:8px 0 2px; padding:6px 10px 6px 6px; text-align:left; border:3px solid var(--ol); border-radius:14px; background:linear-gradient(180deg,#1d4f94,#143a72); color:#fff; }
.skGoal img { width:64px; height:56px; object-fit:cover; border-radius:9px; border:2px solid var(--ol); }
.skGoal.r0 { border-color:#8a929c; } .skGoal.r1 { border-color:#4cb84a; } .skGoal.r2 { border-color:#2f7fd6; } .skGoal.r3 { border-color:#8a4fd8; } .skGoal.r4 { border-color:#f0a020; }
.skGt { display:grid; gap:3px; min-width:0; }
.skGt small { font:800 11px var(--fb); color:#cfe3ff; text-transform:uppercase; letter-spacing:.5px; }
.skGt b { font:400 18px/1 var(--fh); text-shadow:var(--so2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skGb { display:block; height:10px; border-radius:6px; border:2px solid var(--ol); background:#0b2346; overflow:hidden; }
.skGb i { display:block; height:100%; background:linear-gradient(180deg,#ffe07a,#f0a020); }
.skGt em { font:800 12px var(--fb); font-style:normal; color:#ffd23f; }