/* THE LOCKER (shared/locker.js): every avatar item and this instrument's skins, worn with one tap. Loaded by the floor
   page (Choose Your Instrument's player card, the avatar badge's menu) and on demand on game pages (a results screen's
   LOCKER button, the badge). */
.sk-locker{align-items:flex-start;overflow-y:auto;padding:12px;z-index:85}
.sk-locker .panel{max-width:860px;width:100%;margin:auto;text-align:left;border-color:var(--cyan)}
.lk-head{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:16px;align-items:center}
.lk-stage{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:radial-gradient(circle, color-mix(in srgb, var(--pc,var(--cyan)) 18%, var(--deep)), var(--deep) 70%)}
.lk-pic{width:86%}
.lk-pic .pt-box{display:grid}
.lk-info h2{margin:2px 0 4px;font-family:var(--display);font-weight:400;font-size:clamp(24px,4vw,34px);text-transform:uppercase}
.lk-now{margin:0 0 6px;font-weight:700;color:var(--yellow-hi)}
.lk-how{margin:0;font-size:14px}
.lk-sub{margin:16px 0 8px;font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-hi)}
.lk-sub small{font-family:var(--text);font-size:13px;letter-spacing:0;text-transform:none;color:var(--text-lo)}
.lk-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px;border-bottom:2px solid var(--floor-3);padding-bottom:8px}
.lk-tabs [role="tab"]{flex:1 1 90px;min-height:44px;padding:6px 10px;border-radius:999px;border:2px solid var(--floor-3);background:var(--deep);color:var(--text-hi);
  font-family:var(--display);font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.lk-tabs [role="tab"][aria-selected="true"]{border-color:var(--cyan);color:var(--cyan-hi);box-shadow:var(--glow-cyan);background:var(--floor-lit)}
.lk-tabs [role="tab"]:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.sk-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:14px;border:2px solid var(--floor-3);
  background:var(--deep);color:var(--text-hi);text-align:center;min-width:0}
.sk-opt b{font-size:14px;line-height:1.15}
.sk-opt small{font-size:11.5px;line-height:1.2;color:var(--text-lo)}
.sk-o-pic{position:relative;display:grid;place-items:center;width:78%;aspect-ratio:1}
.sk-o-pic .pt-box{width:100%}
.sk-opt[aria-pressed="true"]{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow),var(--glow-yellow)}
.sk-opt[aria-pressed="true"]::after{content:"✓";position:absolute;top:4px;right:6px;font-weight:700;color:var(--yellow)}
.sk-opt:not(.locked):hover{border-color:var(--cyan)}
.sk-opt:focus-visible{outline:3px solid var(--text-hi);outline-offset:3px}
/* locked: a dark silhouette with a thin outline, a lock, and what it takes */
.sk-opt.locked{border-style:dashed;cursor:not-allowed}
/* the LEGENDARY item (the Grandmaster's Aura): a gold frame with a diamond edge, the rarest tile in the Locker */
.sk-opt.sk-legend{border:3px solid var(--bn-gold);box-shadow:0 0 0 2px var(--bn-diamond),0 0 14px color-mix(in srgb,var(--bn-gold) 70%,transparent)}
.sk-opt.sk-legend[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bn-diamond),0 0 0 5px var(--yellow),var(--glow-yellow)}
.sk-opt.locked .pt-box{filter:brightness(0) drop-shadow(0 0 1px var(--text-lo))}
.sk-opt.locked[data-lk-bg] .pt-box{filter:brightness(.5) saturate(.6)}              /* a locked background: its own dimmed picture */
.sk-opt.locked b{color:var(--text-lo)}
.lk-lock{position:absolute;width:26%;right:0;bottom:0;fill:var(--floor-3);stroke:var(--text-lo);stroke-width:2}
.lk-none{font-size:40px;line-height:1;color:var(--text-lo)}
@media (max-width:560px){
  .lk-head{grid-template-columns:110px 1fr;gap:10px}
  .lk-how{display:none}
  .lk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sk-opt{padding:6px 4px}
  .sk-opt b{font-size:12.5px}
  .sk-opt small{font-size:10.5px}
}
.lk-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-hi)}
/* the name plates and shoes (shared/avatar-parts.js PLATES, SHOES) */
.lk-plate{display:grid;place-items:center;width:100%;aspect-ratio:1;font-weight:700;font-size:13px;color:var(--text-hi)}
.lk-shoe{display:block;width:100%;aspect-ratio:1;border-radius:12%;background:var(--deep);overflow:hidden}
.lk-shoe img{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;transform:scale(1.35);transform-origin:50% 88%}
.sk-opt.locked[data-lk-bg] .lk-plate{filter:brightness(.5) saturate(.6)}
.sk-opt.locked .lk-shoe img{filter:brightness(0) drop-shadow(0 0 1px var(--text-lo))}
/* NEW: earned since the Locker was last opened (the badge's dot clears when it opens; the tags stay for that visit) */
.lk-new{position:absolute;top:4px;left:4px;z-index:2;padding:1px 7px;border-radius:999px;background:var(--pink);color:var(--deep);font-size:11px;font-weight:700;letter-spacing:.08em}
.lk-tabs [role="tab"] .lk-tdot{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--pink);vertical-align:middle}