/* Arcade dropdown (pxselect.js). Native <select> stays as fallback when JS is off. */
.pxs{position:relative}
.pxs .pxs-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0);bottom:0;left:0;margin:0}
.pxs-btn{display:flex;align-items:center;gap:.75rem;width:100%;min-height:3.4rem;padding:.6rem 1rem;text-align:left;
  font:600 1.3rem/1.35 var(--body,system-ui,sans-serif);color:var(--text);background:var(--surface2);
  border:3px solid var(--border);box-shadow:4px 4px 0 var(--shadow2);cursor:pointer;
  transition:box-shadow .25s ease-out,border-color .25s ease-out,transform .25s ease-out}
.pxs-btn:hover{border-color:var(--heading);box-shadow:4px 4px 0 var(--shadow2),0 0 14px rgba(45,226,230,.45)}
.pxs-btn:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
.pxs.open .pxs-btn{border-color:var(--heading);box-shadow:4px 4px 0 var(--shadow),0 0 18px rgba(45,226,230,.5)}
.pxs-val{flex:1;min-width:0}
.pxs-ic{width:28px;height:28px;flex:none;image-rendering:pixelated}
.pxs-caret{color:var(--gold);font-size:.9rem;transition:transform .25s ease-out}
.pxs.open .pxs-caret{transform:rotate(180deg)}
.pxs-btn.blip .pxs-ic{animation:pxs-blip .45s ease-out}
.pxs-btn.blip{animation:pxs-flash .45s ease-out}
@keyframes pxs-blip{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.15)}70%{transform:translateY(1px)}100%{transform:none}}
@keyframes pxs-flash{35%{border-color:var(--gold);box-shadow:4px 4px 0 var(--shadow2),0 0 18px rgba(255,210,63,.55)}}

.pxs-list{list-style:none;margin:0;padding:.4rem;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  max-height:min(60vh,26rem);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);
  border:3px solid var(--heading);box-shadow:6px 6px 0 var(--shadow),0 0 22px rgba(45,226,230,.3);
  visibility:hidden;opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0);
  transition:clip-path .25s steps(6,end),opacity .2s ease-out,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}
.pxs.up .pxs-list{top:auto;bottom:calc(100% + 8px);clip-path:inset(100% 0 0 0);transform:translateY(6px)}
.pxs.open .pxs-list{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 0 0);transition-delay:0s}
.pxs-sheet-head{display:none}
.pxs-opt{display:flex;align-items:center;gap:.75rem;min-height:3rem;padding:.55rem .75rem;margin:2px 0;cursor:pointer;
  font-size:1.25rem;line-height:1.35;color:var(--text);border:2px solid transparent;
  transition:background .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out}
.pxs-list.open .pxs-opt{animation:pxs-in .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 25ms + 60ms)}
@keyframes pxs-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.pxs-txt{flex:1}
.pxs-arrow{color:var(--gold);opacity:0;transform:translateX(6px);transition:opacity .2s ease-out,transform .2s ease-out}
.pxs-check{width:1.4rem;text-align:center;color:var(--green);font-weight:700;visibility:hidden}
.pxs-opt[aria-selected="true"]{background:rgba(255,210,63,.12)}
.pxs-opt[aria-selected="true"] .pxs-check{visibility:visible}
.pxs-opt.is-active,.pxs-opt:hover{background:var(--surface2);border-color:var(--heading);box-shadow:0 0 12px rgba(45,226,230,.4) inset}
.pxs-opt.is-active .pxs-arrow,.pxs-opt:hover .pxs-arrow{opacity:1;transform:none}
.pxs-opt[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.pxs-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(4,4,15,.7);opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s linear .25s}
.pxs-backdrop.on{opacity:1;visibility:visible;transition-delay:0s}
html.pxs-lock{overflow:hidden}
@media (max-width:640px){
  .pxs-list.pxs-sheet{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:10001;max-height:75vh;padding:.5rem .75rem calc(1rem + env(safe-area-inset-bottom));
    border-width:3px 0 0;clip-path:none;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease-out,visibility 0s linear .3s}
  .pxs-list.pxs-sheet.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .pxs-sheet .pxs-sheet-head{display:block;position:sticky;top:-.5rem;z-index:1;margin:-.5rem -.75rem .4rem;padding:.9rem 1rem;background:var(--surface);
    border-bottom:2px dashed var(--heading);font:400 .8rem/1.6 var(--pixel);color:var(--heading)}
  .pxs-sheet .pxs-opt{min-height:3.6rem;font-size:1.2rem}
}
html.calm .pxs *,html.calm .pxs-list,html.calm .pxs-list *,html.calm .pxs-backdrop{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .pxs *,.pxs-backdrop,.pxs-list,.pxs-list *{animation:none!important;transition:none!important}
}