/* ═══════════════════════════════════════════════════════════════
   PIXEL PRESET SLOTS — Collapsible save/load drawer
   Tap to load, long-press to save. Toggle to show/hide.
   ═══════════════════════════════════════════════════════════════ */

.preset-slots{
  margin:4px auto 2px;
  max-width:920px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* ── Toggle button ────────────────────────────────────────────── */
.preset-slots__toggle{
  border:1.5px solid var(--line, #4a4a4a);
  border-radius:6px;
  background:transparent;
  color:var(--ink, #2f2f2f);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:8px;
  letter-spacing:2px;
  padding:4px 8px;
  cursor:pointer;
  opacity:.5;
  transition:opacity .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.preset-slots__toggle:hover{ opacity:.75; }
.preset-slots__toggle[aria-expanded="true"]{
  opacity:.75;
  background:rgba(0,0,0,.04);
}
body.dark-ui .preset-slots__toggle{
  color:var(--ink, #ccc);
  border-color:var(--line, #3a3a4a);
}
body.dark-ui .preset-slots__toggle[aria-expanded="true"]{
  background:rgba(255,255,255,.04);
}

/* ── Drawer ────────────────────────────────────────────────────── */
.preset-slots__drawer{
  display:none;
  align-items:center;
  gap:5px;
}
.preset-slots__drawer.is-open{
  display:flex;
  animation:psOpen .2s ease-out;
}
@keyframes psOpen{
  0%{ opacity:0; transform:scaleX(.8); }
  100%{ opacity:1; transform:scaleX(1); }
}

/* ── Slot button ──────────────────────────────────────────────── */
.preset-slot{
  width:28px;
  height:28px;
  border:1.5px solid var(--line, #4a4a4a);
  border-radius:6px;
  background:transparent;
  color:var(--ink, #2f2f2f);
  font-family:"Press Start 2P",monospace;
  font-size:8px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.45;
}
.preset-slot:disabled{ opacity:.2; cursor:not-allowed; }
.preset-slot:not(:disabled):hover{ opacity:.7; background:rgba(0,0,0,.04); }
.preset-slot:not(:disabled):active{ transform:scale(.9); }

.preset-slot.has-data{ opacity:.7; border-color:rgba(0,200,212,.45); }
.preset-slot.has-data:hover{ opacity:1; border-color:rgba(0,200,212,.7); box-shadow:0 0 6px rgba(0,200,212,.15); }

.preset-slot.is-active{ opacity:1; border-color:rgba(0,200,212,.7); background:rgba(0,200,212,.1); box-shadow:0 0 8px rgba(0,200,212,.2); }

.preset-slot.just-saved{ border-color:rgba(0,200,100,.6)!important; background:rgba(0,200,100,.1)!important; opacity:1!important; }

.preset-slot.is-holding{ border-color:rgba(255,180,40,.6); background:rgba(255,180,40,.08); opacity:1; }

/* ── Dark mode ────────────────────────────────────────────────── */
body.dark-ui .preset-slot{ border-color:var(--line, #3a3a4a); color:var(--ink, #ccc); }
body.dark-ui .preset-slot.has-data{ border-color:rgba(0,200,212,.35); }
body.dark-ui .preset-slot.is-active{ border-color:rgba(0,200,212,.6); background:rgba(0,200,212,.08); }

/* ── Hint text ────────────────────────────────────────────────── */
.preset-slots__hint{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:7px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.3;
  white-space:nowrap;
  margin-left:4px;
}