/* ...existing styles... */
:root { --bg:#050505; --fg:#f4f4f4; --muted:#9a9a9a; --muted-dark:#7a7a7a; --accent:#f4f4f4; --pad:#0b0b0b; --pad-active:#eaeaea; --pad-active-fg:#0b0b0b; --border:#242424; --white-btn-bg: #ffffff; --white-btn-fg: #0b0b0b; --light-x: 50%; --light-y: 20%; --light-intensity: 0.12; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Noto Sans",system-ui,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(1000px 600px at var(--light-x) var(--light-y),
      rgba(255,255,240, calc(var(--light-intensity) * 0.9)) 0%,
      rgba(255,255,240, calc(var(--light-intensity) * 0.35)) 18%,
      rgba(255,255,240, calc(var(--light-intensity) * 0.08)) 30%,
      transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)),
    var(--bg);
  color:var(--fg);
  transition: background-position 160ms linear;
  background-attachment: fixed;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(600px 400px at var(--light-x) var(--light-y),
    rgba(255,255,255,0.02), transparent 35%);
  mix-blend-mode:overlay;opacity:0.9;
}

/* Add global smooth transitions */
* {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add fade in/out animations for tones */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

/* Apply fade animations to pads when activating/deactivating */
.pad.active {
  animation: fadeIn 0.15s ease-out;
}

/* remove fadeOut from inactive pads so they no longer animate on deactivation */
.pad:not(.active) {
  animation: none;
}

/* Smooth transitions for all interactive elements */
.disclosure, .record, .power-btn, .pad {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced range slider transitions */
input[type="range"] {
  transition: all 0.2s ease;
}

/* Modal transitions */
.modal {
  transition: none; /* removed fade-in/out animation to make modals appear instantly */
}

.modal-sheet {
  transition: none;
}

/* Smooth background transitions */
body {
  transition: background-position 0.3s ease;
}

/* Enhanced active state with smooth transitions */
.pad.active {
  transition: transform 0.06s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Smooth button interactions */
.disclosure:active, .power-btn:active, .record:active {
  transition: transform 0.06s ease, opacity 0.06s ease;
}

/* when the soundboard is "expanded" (Auto or Presets open), nudge the lower controls down while leaving topbar untouched */
#soloMode.soundboard-expanded .pad-grid,
#soloMode.soundboard-expanded .options:not(.moved) {
  transform: translateY(28px);
  transition: transform 360ms cubic-bezier(0.2,0,0.2,1);
}

/* darker overlay for the header/brand area when panels open */
.topbar.darken::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.24);
  pointer-events: none;
  z-index:1;
  transition: background 260ms ease;
}

/* ensure brand text remains above overlay */
.topbar.darken .brand{ z-index:2; position:relative; }

/* gently animate the options panel expansion too (so it feels tied to the soundboard shift) */
.options {
  transition: transform 360ms cubic-bezier(0.2,0,0.2,1), opacity 220ms ease;
}

/* Add fade in/out animations for tones */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

/* Apply fade animations to pads when activating/deactivating */
.pad.active {
  animation: fadeIn 0.15s ease-out;
}

/* remove fadeOut from inactive pads so they no longer animate on deactivation */
.pad:not(.active) {
  animation: none;
}

/* Smooth transitions for all interactive elements */
.disclosure, .record, .power-btn, .pad {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced range slider transitions */
input[type="range"] {
  transition: all 0.2s ease;
}

/* Modal transitions */
.modal {
  transition: none; /* removed fade-in/out animation to make modals appear instantly */
}

.modal-sheet {
  transition: none;
}

/* Smooth background transitions */
body {
  transition: background-position 0.3s ease;
}

/* Enhanced active state with smooth transitions */
.pad.active {
  transition: transform 0.06s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Smooth button interactions */
.disclosure:active, .power-btn:active, .record:active {
  transition: transform 0.06s ease, opacity 0.06s ease;
}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);position:relative;overflow:visible}
/* add glass image layer behind topbar content */
.topbar::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('glass.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--glass-x,50%) var(--glass-y,50%);
  opacity: 0.5; /* 50% transparent */
  transform: translate3d(0,0,0);
  transition: background-position 220ms ease-out;
  border-radius: 0;
  mix-blend-mode: normal;
}
/* ensure brand text sits above canvas and glass */
.brand{text-align:right;font-weight:700;letter-spacing:.2px;position:relative;z-index:3;text-shadow:0 6px 18px rgba(0,0,0,0.45); font-size:18px;}
/* raise buttons above the glass layer so they remain interactive and visually on top */
.power-btn, .disclosure, .record, button[data-act], #presetsRow .preset-btn {
  position: relative;
  z-index: 4;
}

/* oscilloscope canvas behind title spanning full width of header */
#oscilloscope{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.9;
  mix-blend-mode:screen;
  filter:blur(.6px) contrast(1.1) saturate(1.05);
}
/* ensure brand text sits above canvas */
.brand{text-align:right;font-weight:700;letter-spacing:.2px;position:relative;z-index:2;text-shadow:0 6px 18px rgba(0,0,0,0.45); font-size:18px;}
.mode-toggle{display:flex;gap:8px;align-items:center;font-weight:600}

/* iOS style switch */
.ios-switch{position:relative;display:inline-block;width:52px;height:30px}
.ios-switch input{opacity:0;width:0;height:0}
.ios-switch .slider{position:absolute;cursor:pointer;inset:0;background:#3a3a3a;border-radius:999px;transition:background .2s}
.ios-switch .slider:before{content:"";position:absolute;height:24px;width:24px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.ios-switch input:checked + .slider{background:#1e1e1e}
.ios-switch input:checked + .slider:before{transform:translateX(22px)}

.container{padding:16px;max-width:780px;margin:0 auto}
.panel{display:block}
.panel h2{color:var(--fg)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.disclosure{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 10px;font-weight:600}
.options{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:12px;background:#0f0f0f;
  /* new: glass effect for sliders main container only (reduced blur) */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
}

.field{
    margin:12px 0;
    display:flex;
    flex-direction:column; /* ensure label above slider and full-width layout */
    gap:8px;
}
.label{display:block;font-weight:600;margin-bottom:6px}
.readout,.dual-readout{color:var(--muted);font-size:14px;margin-top:6px}

/* label row: title left, numeric value(s) right */
.label-row{display:flex;align-items:center;justify-content:space-between;flex-direction:row} /* keep numeric readouts aligned horizontally */
input[type="range"]{width:100%;max-width:100%;align-self:stretch} /* ensure sliders fill width */

/* dual-range: overlay two thumbs on a single visual track */
.dual-range{position:relative;padding-top:14px}
/* new: always-visible track behind the highlight so the full bar is shown */
.dual-range::before{
  content:"";
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:8px;border-radius:6px;background:rgba(255,255,255,0.04);z-index:0;pointer-events:none;
}
/* keep the selected range highlight prominent above the base track */
.dual-range .highlight{
  position:absolute;left:0;top:50%;transform:translateY(-50%);height:8px;
  background:linear-gradient(90deg,#0b69ff,#0b69ff);border-radius:6px;z-index:1;pointer-events:none;
}
/* move thumbs visually above the track and ensure they remain clickable */
.dual-range input[type="range"]{
  position:absolute;left:0;width:100%;top:0;appearance:none;background:transparent;margin:0;padding:0;z-index:2;
  /* ensure the input track does not intercept pointerdown so the wrapper can decide which thumb to activate */
  pointer-events: none;
  touch-action: none;
}
/* keep thumbs interactive so they can still be dragged directly */
.dual-range input[type="range"]::-webkit-slider-thumb{
  margin-top:-14px;appearance:none;height:22px;width:22px;background:var(--white-btn-bg);border-radius:50%;border:3px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,0.45);margin-top:-7px;z-index:3;position:relative;
  pointer-events: auto;
}
.dual-range input[type="range"]::-moz-range-thumb{
  height:22px;width:22px;background:var(--white-btn-bg);border-radius:50%;border:3px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,0.45);position:relative;
  pointer-events: auto;
}
.dual-range .dual-readout{display:none}

/* pad label styling: larger and darker gray; do not change color when active */
.pad{background:var(--pad);border:2px solid var(--border);border-radius:8px;aspect-ratio:1/1;transition:transform .06s ease, background .2s, color .2s, border-color .2s;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted-dark);font-size:18px}

/* group white buttons in header and give refined styling */
.white-buttons{display:flex;gap:8px;align-items:center;margin-left:12px}
.power-btn, .disclosure, .record {
  /* keep existing sizing/styling, add darker tint so buttons darken backdrop contents */
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  border: 1px solid rgba(255,255,255,0.03);
  height:36px; min-width:36px; padding:6px 10px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
  color:var(--fg);
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:none;
  font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  position: relative;
  /* ensure icon container fits and we can size icon relative to button */
  display:inline-flex; align-items:center; justify-content:center; /* ensure perfect centering for text nodes and icon children */
  line-height:1; /* avoid vertical misalignment of single-char icons */
}
.power-btn > *, .disclosure > *, .record > * {
  width: 85%;
  height: 85%;
  font-size: inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* also target font-awesome icons and explicit .icon wrappers for consistency */
.disclosure .fa, .disclosure .icon, .disclosure i, .record i, .power-btn i {
  width: 100%;
  height: 100%;
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ensure disclosure keeps readable dark text on dark background contexts */
.panel-head h2{display:none}

/* ensure top row groups items nicely on mobile */
.panel-head > div { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* make all range inputs full width on small screens and generally stretch */
input[type="range"]{width:100%; max-width:100%}

/* ensure the options dial image fits nicely inside the button */
#soloOptionsToggle .fa-solid.fa-sliders {
  font-size: 18px;
  line-height: 1;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:20px;
  text-align:center;
}

/* pads: keep background, use outer glow equal to pad border color when active */
.pad { /* ...existing properties... */ transition:transform .06s ease, color .2s, box-shadow .22s; }
/* redefine colored borders using CSS variables so we can reuse for glow */
.pad-grid .pad:nth-child(6n+1){ --bc:#0066ff; border-color:var(--bc); }
.pad-grid .pad:nth-child(6n+2){ --bc:#06d6a0; border-color:var(--bc); }
.pad-grid .pad:nth-child(6n+3){ --bc:#ff4d4d; border-color:var(--bc); }
.pad-grid .pad:nth-child(6n+4){ --bc:#a26cff; border-color:var(--bc); }
.pad-grid .pad:nth-child(6n+5){ --bc:#ff8a00; border-color:var(--bc); }
.pad-grid .pad:nth-child(6n+6){ --bc:#ff7a9a; border-color:var(--bc); }

/* active state: do not change background, apply glow using the variable-based border color */
.pad.active{
  background:var(--pad); /* preserve original pad background */
  /* keep label color unchanged (do not set color here) */
  box-shadow: 0 0 28px 6px rgba(0,0,0,0.12), 0 0 22px 2px var(--bc);
  transform:scale(.995);
  border-color:var(--bc);
}

/* make Random button visually distinct in top row */
#randomBtn.disclosure { background:transparent; color:var(--fg); border-color:var(--border); }

/* mobile tweaks: ensure panels and controls are comfortable on narrow screens */
@media (max-width:560px){
  .container{padding:12px}
  .panel-head{margin-bottom:10px}
  .disclosure{padding:8px 10px}
  .pad-grid{gap:8px; grid-template-columns:repeat(3,1fr)}
  .dual-range .dual-readout{margin-top:22px}
}

.pad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (min-width:560px){.pad-grid{grid-template-columns:repeat(6,1fr)}}
.pad{background:var(--pad);border:2px solid var(--border);border-radius:8px;aspect-ratio:1/1;transition:transform .06s ease, background .2s, color .2s, border-color .2s}
.pad-grid .pad:nth-child(6n+1){border-color:#0066ff}
.pad-grid .pad:nth-child(6n+2){border-color:#06d6a0}
.pad-grid .pad:nth-child(6n+3){border-color:#ff4d4d}
.pad-grid .pad:nth-child(6n+4){border-color:#a26cff}
.pad-grid .pad:nth-child(6n+5){border-color:#ff8a00}
.pad-grid .pad:nth-child(6n+6){border-color:#ff7a9a}
.pad:active{transform:scale(.98)}
/* keep active pads from changing fill — only apply glow/border color */
.pad.active{
  background:var(--pad); /* preserve original pad background */
  /* keep label color unchanged (do not set color here) */
  box-shadow: 0 0 28px 6px rgba(0,0,0,0.12), 0 0 22px 2px var(--bc);
  transform:scale(.995);
  border-color:var(--bc);
}

.power-btn{width:100%;border:1px solid var(--border);background:#fff;border-radius:12px;padding:12px 14px;font-weight:700;margin-bottom:12px}

/* record button visual states */
.record{font-weight:900;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:6px;border-radius:8px
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}
.record.idle{color:#ff3b30;background:transparent;border:1px solid rgba(255,59,48,0.12)
   background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}
.record.recording{color:#fff;background:#0b69ff;border:1px solid rgba(11,105,255,0.2)}
.record.stopped{color:#111;background:transparent;border:1px solid rgba(255,255,255,0.06)}
/* keep disclosure style but ensure record icon stands out */
.record{font-size:20px;line-height:1}

/* ensure moved mode-toggle inside options looks good on mobile */
.mode-toggle.moved{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-weight:600}

/* grey out wave sliders when their checkbox is not checked (checkbox and range are siblings) */
.field input[type="checkbox"]{width:20px;height:20px}
.field input[type="checkbox"]:not(:checked) + input[type="range"]{
  filter:grayscale(1) opacity(.45);
  cursor:default;
}

/* ensure range still shows pointer when enabled */
.field input[type="checkbox"]:checked + input[type="range"]{
  filter:none;
  opacity:1;
  cursor:pointer;
}

/* Modal (glass) styles */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;pointer-events:auto;visibility:hidden;opacity:0;transition:opacity .18s ease, visibility .18s}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal::before{display:none;content:none;}
.modal-sheet{position:relative;z-index:2;width:100%;max-width:520px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);backdrop-filter: blur(10px) saturate(120%);-webkit-backdrop-filter: blur(10px) saturate(120%);box-shadow:0 8px 30px rgba(0,0,0,0.6); padding:20px; }
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-body{color:var(--muted);max-height:60vh;overflow:auto}
.saved-list{display:flex;flex-direction:column;gap:8px}
.saved-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent}
.saved-item .meta{display:flex;flex-direction:column;gap:2px}
.saved-item button{margin-left:4px}

/* increase visibility of the folder-open icon slightly and make it muted */
#loadBtn .fa-folder-open { 
  color: var(--muted); 
  display:inline-flex; 
  font-size:18px; 
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  line-height:1;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}
/* increase visibility of the floppy icon slightly */
#loadBtn .fa-floppy-disk { color: var(--muted); display:inline-block; font-size:18px; 
    background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}

/* small tweak so presets list items reuse saved-item visuals */
#presetsList { display:flex; gap:8px; align-items:center; justify-content:space-between; }
/* ensure emoji-only preset buttons expand equally (presets.js inserts buttons as .disclosure) */
#presetsList .disclosure {
  flex: 1 1 0;
  min-width: 0;
  font-size: 20px; /* ~10% reduction */
  padding: 12px;
  text-align: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}

/* small tweak so presets list items reuse saved-item visuals */
#presetsList .saved-item, #presetsList .saved-item .meta { color:var(--fg); }

/* presets row: 5 equal-width emoji buttons that fill the container */
#presetsRow { display:flex; gap:8px; align-items:center; justify-content:stretch; }
#presetsRow .preset-btn { flex: 1 1 0; min-width: 0; font-size: 28px; padding:10px 8px; text-align:center; border-radius:10px; }
/* a subtle hover/active effect for preset buttons */
#presetsRow .preset-btn:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
/* keep emoji buttons visually consistent with other header buttons */
#presetsRow .preset-btn { background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
  border: 1px solid var(--border);
  transition: box-shadow 180ms ease, transform 120ms ease, border-color 180ms ease;
}

/* define button-specific color variables matching pad palette */
#presetsRow .preset-btn:nth-child(5n+1){ --pbc:#0066ff; border-color:var(--pbc); }
#presetsRow .preset-btn:nth-child(5n+2){ --pbc:#06d6a0; border-color:var(--pbc); }
#presetsRow .preset-btn:nth-child(5n+3){ --pbc:#ff4d4d; border-color:var(--pbc); }
#presetsRow .preset-btn:nth-child(5n+4){ --pbc:#a26cff; border-color:var(--pbc); }
#presetsRow .preset-btn:nth-child(5n+5){ --pbc:#ff8a00; border-color:var(--pbc); }

/* outer glow when active; keep subtle outline when inactive */
#presetsRow .preset-btn.active {
  box-shadow: 0 0 28px 6px rgba(0,0,0,0.12), 0 0 20px 6px var(--pbc);
  transform: translateY(-2px);
  border-color: var(--pbc);
}

/* enlarge character/emoji-only buttons without increasing button box */
#presetsRow .preset-btn, button[data-act], .record {
  font-size: 24px; /* ~10% reduction for emoji/icon sizing */
}

/* ensure options modal matches saved modal glass effect and has subtle rounded corners */
#optionsModal .modal-sheet, #savedModal .modal-sheet {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  /* increased glass blur for modal backdrops (buttons retain their existing blur) */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* slightly tighter modal-body padding for options */
#optionsModal .modal-body { padding-top:6px; padding-bottom:6px; }

#presetsPanel{
  /* collapsed by default when [hidden]; animate max-height + opacity when shown */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 240ms cubic-bezier(0.2,0,0.2,1), opacity 200ms ease, transform 200ms ease;
}
#presetsPanel:not([hidden]){
  max-height: 720px; /* large enough to contain controls; clamps visually via overflow */
  opacity: 1;
  transform: none;
}

#optionsModal {
  /* ensure options popup appears instantly with no transition */
  transition: none !important;
}
#optionsModal .modal-sheet {
  transition: none !important;
}

button[data-act] {
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}

#randomOptions, #presetsPanel {
  /* simulated glass with two diagonal gradient layers + subtle vignette */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 45%, transparent 60%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.06) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  background-blend-mode: screen, overlay, normal;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
/* add glass image layer behind the existing gradients; 50% visual opacity achieved by an overlaying gradient + mix */
#randomOptions::before,
#presetsPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('glass.webp');
  background-repeat: no-repeat;
  background-size: cover;
  /* position driven by CSS vars updated from device motion (default centered) */
  background-position: var(--glass-x,50%) var(--glass-y,50%);
  opacity: 0.5; /* 50% transparent */
  transform: translate3d(0,0,0);
  transition: background-position 220ms ease-out;
  border-radius: inherit;
  mix-blend-mode: normal;
  
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}
/* ensure existing content sits above the pseudo-image */
#randomOptions, #presetsPanel { position: relative; z-index: 1; overflow: hidden; }

#presetsRow .preset-btn { 
  position: relative;
  z-index: 6; /* ensure buttons sit above the glass pseudo-element */
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
  border: 1px solid var(--border);
  transition: box-shadow 180ms ease, transform 120ms ease, border-color 180ms ease;
}

/* apply glass-style background to Auto, record/stop controls, and preset emoji buttons */
#presetsAutoBtn,
.record,
button[data-act],
#presetsRow .preset-btn,
#presetsList .disclosure {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
}

#randomBtn, .record, button[data-act], .disclosure, #presetsRow .preset-btn {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(5px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(110%) !important;
}

/* switch pad border to use transparent base and gradient via ::before */
.pad{
  position:relative; /* needed for pseudo border */
  background:var(--pad);
  border:2px solid transparent;
  border-radius:8px;
  aspect-ratio:1/1;
  transition:transform .06s ease, background .2s, color .2s;
  overflow:visible;
}
/* create gradient border ring */
.pad::before{
  content: "";
  position: absolute;
  inset: -2px; /* expand beyond element to show border thickness */
  border-radius: 10px; /* slightly larger to match outer edge */
  background: linear-gradient(90deg, var(--bc, #ff6b6b), var(--bc2, #ff2fa0));
  z-index: 0;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:2px; /* ensure inner area shows through */
}
/* keep pad content above the pseudo border */
.pad > *{ position:relative; z-index:2; }
/* when active, preserve glow but keep gradient border visible */
.pad.active{
  background:var(--pad);
  box-shadow: 0 0 28px 6px rgba(0,0,0,0.12), 0 0 22px 2px var(--bc);
  transform:scale(.995);
  border-color:transparent;
}

/* redefine per-pad palette variables to include a neighboring color for the gradient border */
.pad-grid .pad:nth-child(6n+1){ --bc:#0066ff; --bc2:#00e5ff; }
.pad-grid .pad:nth-child(6n+2){ --bc:#06d6a0; --bc2:#ffd166; }
.pad-grid .pad:nth-child(6n+3){ --bc:#ff4d4d; --bc2:#ff2fa0; }
.pad-grid .pad:nth-child(6n+4){ --bc:#a26cff; --bc2:#4feaf0; }
.pad-grid .pad:nth-child(6n+5){ --bc:#ff8a00; --bc2:#ffea50; }
.pad-grid .pad:nth-child(6n+6){ --bc:#ff7a9a; --bc2:#ff3fb0; }