/* Tabula Sonora
   Las tipografías se sirven desde ./fonts para que la app conserve su cara
   estando sin conexión (antes venían de Google Fonts, que el service worker
   no cachea, y offline se caía a un serif del sistema). */
@import url('./fonts/fonts.css');

:root {
  --g: #e3ad49;   /* oro */
  --p: #dec99a;   /* pergamino */
  --m: #a28b66;   /* tinta pálida */
  --l: #73532c;   /* borde */
  --ink: #261b13;
  /* Color medio del cuero: es el respaldo si por lo que sea la foto no pinta un
     borde (safe-area del iPhone/iPad). Antes era un oliva que se veía como un
     tajo plano abajo. */
  --bg: #c9a877;
  --red: #8b291f;
  /* Chasis de cuero claro, parejo (sin oscurecer los bordes): la foto real con
     un lavado tibio muy suave encima. Se comparte en html, body y .app para que
     no haya costuras de color en ningún borde. */
  --chassis-img:
    linear-gradient(#e8d3a51f, #e8d3a51f),
    url('icons/textures/cuero-claro.jpg');
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Mata el zoom por doble toque: tocar dos veces un pad rápido es tocar dos
     veces, no acercar la pantalla. `manipulation` deja vivos el scroll y el
     pinch, que sí queremos. */
  touch-action: manipulation;
}

/* Nada de selección de texto en toda la app: al tocar botones en iPad se
   seleccionaba el texto y aparecía la lupa. Se apaga en todo .app y se vuelve a
   habilitar sólo donde hace falta escribir o copiar (inputs y diálogos). */
.app,
.app * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.app input,
.app textarea,
.app [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* Fuera del "dispositivo" va una superficie de estudio oscura: así el cuero no
   se estira por toda la pantalla en la web (se veía mal, y arrastraba la marca
   de agua). El aparato queda apoyado sobre esa superficie, con su bisel. */
html, body {
  background: radial-gradient(circle at 50% 28%, #2b2521 0%, #14100d 55%, #0b0908 100%);
}

body {
  margin: 0;
  color: var(--p);
  font-family: "IM Fell English", Georgia, serif;
  overscroll-behavior: none;
}

/* Safari en iOS le pone a los <button> y <select> su propia carcasa: fondo
   claro, esquinas redondeadas. Si una regla propia no cubre TODAS las
   propiedades, el control aparece como una píldora blanca del sistema en vez
   del botón de la app. Se apaga de entrada para todos. */
button,
input,
select,
textarea {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

button {
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Los glifos ▶ ■ ● son caracteres de texto, no emoji: sin esto iOS los dibuja
   como el botón de play azul y el cuadrado blanco del sistema. */
.glyph,
.round,
.stop,
.recBtn,
.slicePlay,
.libPlay {
  font-variant-emoji: text;
}

button:disabled,
input:disabled,
select:disabled {
  opacity: .4;
  cursor: default;
}

/* --- sliders (range) ----------------------------------------------------- */
/* El `appearance:none` global les saca el estilo nativo y `accent-color` deja
   de aplicar, así que sin esto quedaban como una barra BLANCA con un tirador
   suelto: feos sobre el tema oscuro. Acá se visten a mano (riel de piedra +
   tirador de bronce), parejo en todos los paneles (mezcla, sonus, efectos…). */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;              /* área cómoda para el dedo */
  background: transparent;   /* mata el fondo blanco */
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(#140d07, #2c1b0e);
  border: 1px solid #4b3819;
  box-shadow: inset 0 1px 2px #000a;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;          /* centra el tirador sobre el riel */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d79c, #8a5a24 72%);
  border: 1px solid #f2d397;
  box-shadow: 0 1px 3px #0009;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(#140d07, #2c1b0e);
  border: 1px solid #4b3819;
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(#e3ad49, #8a5a24);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid #f2d397;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d79c, #8a5a24 72%);
  box-shadow: 0 1px 3px #0009;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--g);
  outline-offset: 1px;
}

.app {
  display: grid;
  /* Columna 1 = riel del fader (ancho --rail, 0 si oculto). Columna 2 = todo lo
     demás. El minmax(0,...) de la col 2 impide que un texto largo sin cortes
     (el nombre de un sample en #readout) estire la columna y empuje los pads
     fuera de la pantalla. */
  grid-template-columns: var(--rail, 0px) minmax(0, 1fr);
  grid-template-rows: 44px auto auto minmax(0, 1fr) 62px;
  gap: 7px;
  column-gap: var(--rail-gap, 0px);
  height: 100dvh;
  max-width: 650px;
  margin: auto;
  padding: max(6px, env(safe-area-inset-top)) 12px calc(6px + env(safe-area-inset-bottom));
  overflow: hidden;
  /* Chasis de cuero claro envejecido (EP-1320): la foto real, pareja, con un
     lavado tibio muy leve. Mismo fondo que html/body → sin costuras de color. */
  background-color: var(--bg);
  background-image: var(--chassis-img);
  background-size: cover;
  background-position: center;
  /* Bisel de dispositivo físico: borde oscuro, canto biselado y sombra apoyada
     sobre la superficie. Da volumen sin efectos pesados. */
  border-radius: 20px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .6),
    0 4px 14px rgba(0, 0, 0, .45),
    inset 0 0 0 2px #2a1a0d,
    inset 0 2px 0 #fff2cf66,
    inset 0 -3px 8px #00000055;
}

/* En pantallas anchas (web/desktop) el aparato queda centrado con aire arriba
   y abajo, apoyado sobre la superficie oscura. En teléfono ocupa todo. */
@media (min-width: 700px) {
  .app {
    height: min(100dvh - 32px, 1000px);
    margin: 16px auto;
  }
}

/* Todo lo que no es el riel vive en la columna 2. */
.app > :not(.faderRail) {
  grid-column: 2;
}

/* --- fader de performance ----------------------------------------------- */

.faderRail {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Todo el conjunto (botones + fader) va abajo, junto, como el EP-1320: los
     asignables quedan JUSTO sobre el fader, no arriba de todo. */
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 0;
}

/* Botones asignables: fichas de cuero con ícono, apenas sobre el fader. */
.faderAssign {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}

.faderAssign button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  padding: 5px 0 4px;
  border: 1px solid #8a6739;
  border-radius: 6px;
  background: linear-gradient(#3a2513, #241509);
  color: #c9a877;
  font: 9px "Titular", "Uncial Antiqua", serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 #ffce7426, 0 1px 2px #00000088;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.faderAssign button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .78;
  pointer-events: none;
}

.faderAssign button.on {
  border-color: var(--g);
  background: linear-gradient(#7a4d22, #3a1d0a);
  color: #ffe5a5;
  box-shadow: inset 0 0 0 1px #1a0c06, 0 0 9px #e3ad4966;
}

.faderAssign button.on img {
  opacity: 1;
  filter: drop-shadow(0 0 3px #e3ad4988);
}

/* El grupo del fader, pegado abajo. */
.faderBottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.faderVal {
  color: var(--g);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.faderTrack {
  position: relative;
  flex: 0 0 auto;
  height: min(44vh, 340px); /* la mitad de la pantalla, no toda */
  width: 22px;
  border: 1px solid #6b4d28;
  border-radius: 12px;
  background: linear-gradient(#140d07, #241608);
  box-shadow: inset 0 0 0 2px #0c0805;
  touch-action: none;
  cursor: ns-resize;
}

.faderFill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(#e3ad49, #8a5a24);
  opacity: .5;
}

.faderKnob {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 18px;
  border: 1px solid #f2d397;
  border-radius: 5px;
  background: linear-gradient(#63401f, #2d1c10);
  box-shadow: 0 1px 3px #0009;
}


/* --- cabecera ----------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--g);
  border-radius: 50%;
  background-image: linear-gradient(145deg, #63401fcc, #2d1c10e6), url('icons/textures/cuero-claro.jpg');
  background-size: cover;
  background-blend-mode: multiply;
  color: var(--g);
  font-style: normal;
}

.brand small,
.edithead small {
  display: block;
  color: #5a3d1f;
  font-size: 7.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff3d680, 0 -1px 1px #00000059;
}

/* "Tabula Sonora": no pintado sobre el cuero, cincelado en él — color cercano
   al fondo, con el relieve dado por el par de sombras (luz abajo, hueco arriba). */
.brand strong {
  display: block;
  margin-top: 1px;
  font: 13px "Titular", "Uncial Antiqua", serif;
  color: #4a3018;
  text-shadow: 0 1px 0 #fff3d680, 0 -1px 1px #00000059;
}

.brand em {
  color: #4a3018;
  font-style: normal;
}

.headActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.headActions button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #a77b3f;
  border-radius: 50%;
  background-image: linear-gradient(145deg, #63401fcc, #2d1c10e6), url('icons/textures/cuero-claro.jpg');
  background-size: cover;
  background-blend-mode: multiply;
  color: #f2d397;
  font-size: 15px;
  line-height: 1;
}

.headActions button:disabled {
  opacity: .3;
}

/* --- pantalla ----------------------------------------------------------- */

/* `overflow: hidden` acá no es cosmético, es estructural: la pantalla es un
   display de tamaño fijo y su contenido debe recortarse. Sin esto, #readout
   (nowrap) le daba a este item un min-content de 648px que estiraba la columna
   del grid de .app y empujaba todos los paneles —pads incluidos— al costado.
   Aparecía al cargar un sample de nombre largo, o al chopear uno. */
.screen {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 7px 11px;
  border: 1px solid #966b36;
  box-shadow: inset 0 0 0 3px #a9844a;
  background: linear-gradient(105deg, #cdb57e, #e8d59f);
  color: var(--ink);
}

.screenTop,
.screenBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 1px;
}

.screenTop span,
.screenBottom span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screenKit {
  flex: 1;
  text-align: center;
  color: #5a4326;
}

.screen > b {
  display: flex;
  align-items: center;
  height: 34px;
  font: 14px "Titular", "Uncial Antiqua", serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#meter {
  width: 34%;
  height: 4px;
  background: #8d7246;
}

#meter::after {
  content: "";
  display: block;
  width: var(--fill, 2%);
  height: 100%;
  background: var(--red);
  transition: width .06s linear;
}

/* avisos, encima de la pantalla */
.toast {
  position: absolute;
  inset: auto 4px 4px;
  padding: 5px 8px;
  border-left: 3px solid var(--ink);
  background: #f3e6c4;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}

.toast.on {
  opacity: 1;
  transform: none;
}

.toast.ok    { border-color: #3f6b2f; }
.toast.warn  { border-color: #9a6a1c; }
.toast.error { border-color: #932a1c; background: #f6d9cf; }

/* --- encoders ----------------------------------------------------------- */

.encoders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  overflow: hidden;
  gap: 6px;
}

/* Sin recuadro: el encoder es sólo la perilla (círculo 3D) con su rótulo y
   valor debajo, como en el EP-1320. */
.enc {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  min-width: 0;
  overflow: hidden;
  gap: 2px;
  padding: 4px 2px 3px;
  border: 0;
  background: transparent;
  touch-action: none;
  user-select: none;
  cursor: ns-resize;
}

.enc:focus-visible {
  outline: none;
}

.enc:focus-visible .encRing {
  box-shadow: 0 0 0 2px var(--g), 0 2px 4px rgba(0, 0, 0, .5);
}

.enc.off {
  opacity: .38;
  cursor: default;
}

/* La perilla: un anillo de valor (conic) alrededor de un domo metálico. El domo
   lleva un brillo arriba-izq y sombra abajo-der para leerse en relieve (3D). */
.encRing {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 4px;
  background:
    conic-gradient(from 220deg, var(--g) calc(var(--p, 0) * 280deg), #2a1c0e 0 280deg, transparent 0);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}

.enc.turning .encRing {
  filter: drop-shadow(0 0 5px rgba(227, 173, 73, .6));
}

.encRing::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #7a5327 0%, #4a3016 48%, #241408 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 224, 160, .4),
    inset 0 -3px 5px rgba(0, 0, 0, .6),
    0 1px 1px rgba(0, 0, 0, .5);
  border: 1px solid #1c1109;
}

.encRing b {
  position: relative;
  color: #f2d397;
  font-size: 11px;
  font-weight: 400;
}

.encLabel {
  color: var(--m);
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.encValue {
  color: #ffe7b0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* --- paneles ------------------------------------------------------------ */

.panel {
  display: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.panel.on {
  display: flex;
  flex-direction: column;
}

/* SONUS tiene altura propia y en teléfonos bajos (320x568) no entraba: los
   botones de acción quedaban recortados fuera del panel. Que scrollee. */
#sonus.on {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Consola oscura: sobre el cuero claro los sliders y rótulos no se leían. */
  background: linear-gradient(#1b1109, #120b06);
  border: 1px solid #5a3f20;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #0c0805, inset 0 2px 12px #000000aa;
  padding: 10px 12px;
}

.panelhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--l);
  background: #181008;
  color: var(--g);
  font: 13px "Titular", "Uncial Antiqua", serif;
}

.panelhead button,
.edithead button {
  border: 1px solid var(--g);
  background: #5a371c;
  color: #ffe5a5;
  padding: 6px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.panelhead input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 1px solid #5c421f;
  background: #0e0906;
  color: var(--p);
  padding: 5px 7px;
  font-size: 12px;
}

/* --- kit ---------------------------------------------------------------- */

.kitbar,
.runebar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.round {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--g);
  background: #503218;
  color: #f6d581;
  font-size: 15px;
}

.round.playing {
  background: var(--red);
}

.stop,
.kitbar > button:not(.round) {
  height: 32px;
  border: 1px solid #896437;
  background: #322015;
  color: #e7c68a;
  padding: 0 9px;
  font-size: 11px;
  white-space: nowrap;
}

.stop {
  color: #edaa90;
  border-color: #9c4d3e;
}

/* --- modo teclas -------------------------------------------------------- */

#keysBtn.on {
  border-color: var(--g);
  background: #5a371c;
  color: #ffe5a5;
}

.keysBar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--m);
  font-size: 11px;
}

.keysLbl {
  text-transform: uppercase;
  letter-spacing: .5px;
}

.keysBar button {
  border: 1px solid #79552c;
  background: #332014;
  color: #eacb8d;
  width: 30px;
  height: 28px;
  border-radius: 4px;
  font-size: 15px;
}

#octVal {
  color: var(--g);
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.keysScale {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.keysScale select {
  border: 1px solid #78582e;
  background: #21150d;
  color: #f6dca4;
  padding: 3px 6px;
  border-radius: 4px;
}

#rec.recording {
  background: var(--red);
  color: #ffe0d6;
  border-color: #d4614b;
}

.kitbar label {
  display: grid;
  grid-template-columns: auto 42px;
  gap: 4px;
  align-items: baseline;
  margin-left: auto;
  color: var(--m);
  font-size: 10px;
  text-transform: uppercase;
}

.kitbar input {
  width: 42px;
  border: 0;
  border-bottom: 1px solid var(--g);
  background: transparent;
  color: var(--p);
  font-size: 16px;
  text-align: center;
}

/* Las columnas van con minmax(0,1fr), no 1fr: `1fr` es `minmax(auto,1fr)` y ese
   mínimo automático es el min-content del pad. Con un nombre largo (los que
   deja un chop: "Amen Brother Full Break 150bpm · corte 3") las columnas se
   estiraban a 254px dentro de una caja de 296px y los pads se iban al costado. */
.pads {
  display: grid;
  grid-template: repeat(4, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  gap: 7px;
  min-height: 0;
  min-width: 0;
}

.pad {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 4px 6px;
  border: 2px solid #a77b3f;
  border-radius: 3px;
  background-image: linear-gradient(145deg, #63401fcc, #2d1c10e6), url('icons/textures/cuero-claro.jpg');
  background-size: cover;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 2px #24150c;
  text-align: left;
  touch-action: none;
}

/* La costura: un pespunte punteado a la vista, como en el cuero real —
   no un botón pintado, un parche cosido. */
.pad::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed #f2d39770;
  border-radius: 2px;
  pointer-events: none;
}

.pad.empty {
  border-color: #6d4d26;
  background: linear-gradient(145deg, #3a2614, #211409);
}

.pad.active {
  background: #b27431;
}

.pad.selected {
  outline: 2px solid #fff0bd;
  outline-offset: -5px;
}

.pad b {
  display: block;
  color: #f2d397;
  font: 18px "Titular", "Uncial Antiqua", serif;
}

.pad.empty b {
  color: #a5824a;
}

.pad span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f2d7a1;
  font-size: 11px;
}

.pad.empty span {
  color: #9c8257;
}

/* --- grabación del beat -------------------------------------------------- */

.recBtn {
  height: 32px;
  flex: none;
  border: 1px solid #9c4d3e;
  background: #3a1d16;
  color: #edaa90;
  padding: 0 9px;
  font-size: 11px;
  white-space: nowrap;
}

.recBtn.armed {
  border-color: #ef6a4d;
  background: var(--red);
  color: #ffe0d6;
  animation: latir 1.1s ease-in-out infinite;
}

@keyframes latir {
  50% { background: #b4362a; }
}

#mic.recording {
  background: var(--red);
  color: #ffe0d6;
  border-color: #d4614b;
}

/* --- runas -------------------------------------------------------------- */

/* Una sola fila de herramientas. El título "scriptorium" se fue: la pantalla de
   arriba ya dice RUNAS · SCRIPTORIUM y acá el espacio hace falta. */
.runeTools {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: 4px;
}

#loopSetup {
  border-color: var(--g);
  color: var(--g);
  font-variant-numeric: tabular-nums;
}

/* Selector de compás, sólo visible cuando el loop tiene más de uno. */
.barStrip {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.barBtn {
  flex: 1;
  min-width: 0;
  border: 1px solid #5c421f;
  background: #1a110a;
  color: var(--m);
  padding: 4px 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.barBtn.on {
  border-color: var(--g);
  background: #4a2d15;
  color: #ffe5a5;
}

/* --- mute de escenas / compases (RUNAS) --------------------------------- */

.perfMutes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}

.muteRow {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.muteLbl {
  color: var(--m);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.muteBtns {
  display: flex;
  gap: 5px;
}

/* Encendido (suena) = dorado; apagado (mute) = apagado y tachado. */
.muteBtn {
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--g);
  border-radius: 4px;
  background: linear-gradient(#5a371c, #3a2110);
  color: #ffe5a5;
  font: 14px "Titular", "Uncial Antiqua", serif;
}

.muteBtn.off {
  border-color: #5c421f;
  background: #160f08;
  color: #6b5637;
  text-decoration: line-through;
}

#clickToggle.on {
  border-color: var(--g);
  background: #5a371c;
  color: #ffe5a5;
}

.quantPick {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--l);
  background: #181008;
  padding: 0 7px;
}

.quantPick span {
  color: var(--m);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.quantPick select {
  border: 0;
  background: transparent;
  color: var(--g);
  padding: 6px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.runeTools button {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #79552c;
  background: #332014;
  color: #eacb8d;
  padding: 6px 2px;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 5px;
}

/* Con appearance:none el <select> pierde la flechita del sistema: se dibuja
   una propia para que siga leyéndose como desplegable. */
.laneSel {
  min-width: 0;
  border: 1px solid #5c421f;
  border-bottom-color: var(--l);
  background: #1a110a
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23a28b66'/%3E%3C/svg%3E")
    no-repeat right 5px center / 7px 5px;
  color: var(--p);
  padding: 5px 16px 5px 6px;
  font-size: 10px;
  text-overflow: ellipsis;
}

/* La grilla iba con flex:1 y se estiraba a toda la altura sobrante: 16 columnas
   de ~15px por 4 filas de ~100px daban unos fideos verticales. Ahora las filas
   tienen techo y el transporte se va al fondo con margin-top:auto. */
/* Las columnas llevan ancho mínimo y la grilla scrollea: en 7/8 son 28 celdas
   por compás, y repartidas en 296 px quedaban de 7 px, imposibles de tocar.
   14 px es lo que permite que un 4/4 entre justo sin scroll en un teléfono
   angosto; de ahí en más, se corre. */
.grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(14px, 1fr));
  grid-template-rows: repeat(4, minmax(0, 38px));
  align-content: start;
  gap: 3px;
  flex: 0 1 auto;
  min-height: 0;
  padding: 6px;
  border: 1px solid #805a2d;
  background: #120d09;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.grid::-webkit-scrollbar {
  height: 4px;
}

.grid::-webkit-scrollbar-thumb {
  background: #5c421f;
}

.step {
  min-height: 0;
  border: 1px solid #57401f;
  border-radius: 2px;
  background: #241609;
  /* pan-x y no none: hay que poder correr la grilla con el dedo apoyado
     sobre las celdas, que es casi toda su superficie. */
  touch-action: pan-x;
}

/* Marca cada tiempo: sin esto los 16 pasos son una pared indiferenciada y no se
   sabe dónde cae el pulso. Va con borde y no con margen a propósito — el margen
   le come ancho sólo a esas cuatro columnas y quedan visiblemente más flacas. */
.step.downbeat {
  border-color: #8a6533;
  border-left: 2px solid var(--g);
  background: #33200f;
}

.step.on {
  border-color: #f3cd7c;
  background: var(--g);
  box-shadow: 0 0 6px #dda54299;
}

.step.current {
  border-color: #fff0bd;
  background: #6d4a22;
}

.step.on.current {
  background: #ffe6a4;
}

.runebar {
  margin: 9px 0 0;
  margin-top: auto;
  padding-top: 9px;
}

.runebar label {
  display: grid;
  grid-template-columns: auto 1fr 34px;
  gap: 6px;
  align-items: center;
  flex: 1;
  color: var(--m);
  font-size: 11px;
  text-transform: uppercase;
}

.runebar input {
  width: 100%;
  accent-color: var(--g);
}

.runebar output {
  color: var(--g);
  font-variant-numeric: tabular-nums;
}

/* --- sonus -------------------------------------------------------------- */

.edithead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edithead b {
  display: block;
  margin-top: 3px;
  font: 15px "Titular", "Uncial Antiqua", serif;
}

canvas#wave {
  width: 100%;
  height: 132px;
  margin: 8px 0 2px;
  border: 1px solid #826036;
  border-radius: 4px;
  background: #0c0805;
  box-shadow: inset 0 0 10px #000000aa;
  touch-action: none;
}

.waveBar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

#zoomLevel {
  position: absolute;
  right: 2px;
  bottom: -2px;
}

.waveBar button {
  border: 1px solid #79552c;
  background: #332014;
  color: #eacb8d;
  padding: 5px 6px;
  font-size: 10px;
  white-space: nowrap;
}

#zoomLevel {
  color: var(--m);
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#sonus.blank .waveBar {
  visibility: hidden;
}

.edittabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.armtabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
}

.editTab,
.armTab {
  border: 1px solid #78582e;
  background: #27190f;
  color: #cdb47f;
  padding: 6px;
  font-size: 11px;
}

.editTab.on,
.armTab.on {
  background: #60371d;
  color: #ffe2a2;
}

.editpage {
  display: none;
}

.editpage.on {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 13px;
  margin-top: 9px;
}

.editpage label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px;
  align-items: center;
  color: #d8bf87;
  font-size: 12px;
}

.editpage select {
  grid-column: 1 / 3;
  border: 1px solid #78582e;
  background: #21150d;
  color: #f6dca4;
  padding: 4px;
}

.editpage input {
  grid-column: 1 / 3;
  width: 100%;
  accent-color: var(--g);
}

.editpage output {
  color: #fff0c4;
  font-variant-numeric: tabular-nums;
}

/* --- cortes (transposición por recorte) ---------------------------------- */

.slicepage.on {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 9px;
}

.sliceHint {
  margin: 0 0 7px;
  color: var(--m);
  font-size: 11px;
  line-height: 1.35;
}

.sliceList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sliceRow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  flex: none;
  border: 1px solid #644821;
  background: #28190f;
}

.sliceRow.current {
  border-color: var(--g);
  background: #35210f;
}

.slicePlay {
  border: 0;
  background: transparent;
  padding: 8px 2px;
  color: var(--g);
  text-align: center;
}

.sliceName {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 2px;
  color: #edd6a1;
  text-align: left;
  font-size: 12px;
}

.sliceName span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sliceName small {
  display: block;
  color: var(--m);
  font-size: 10px;
}

/* El valor en semitonos es lo que se mira: grande, tabular y siempre con signo. */
.pitchStep {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}

.pitchStep button {
  width: 30px;
  height: 30px;
  border: 1px solid #79552c;
  background: #3a2515;
  color: #f4d79c;
  font-size: 17px;
  line-height: 1;
  padding: 0;
}

.pitchNow {
  min-width: 34px;
  color: #fff0c4;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  text-align: center;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.pitchStep i {
  color: var(--m);
  font-size: 9px;
  font-style: normal;
}

.editactions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: auto;
  padding-top: 9px;
}

.editactions button {
  height: 34px;
  border: 1px solid #79552c;
  background: #332014;
  color: #eacb8d;
  font-size: 11px;
}

.editactions #erase {
  border-color: #8e3a2c;
  color: #ec9d82;
}

/* Botón de confirmación "guardar wav" (hornear warp / cortes): destacado en oro,
   ancho completo, para leerse como la acción de guardar. */
.bakeBtn {
  display: block;
  width: 100%;
  margin-top: 10px;
  height: 34px;
  border: 1px solid var(--g);
  border-radius: 4px;
  background: linear-gradient(#5a371c, #3a2110);
  color: #ffe5a5;
  font-size: 12px;
  letter-spacing: .3px;
}

.bakeBtn:disabled { opacity: .5; }

/* --- armario ------------------------------------------------------------ */

.armPage {
  display: none;
  min-height: 0;
}

.armPage.on {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 7px;
}

.hint {
  margin: 10px 2px;
  color: var(--m);
  font-size: 12px;
  line-height: 1.4;
}

.library,
.kitList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  margin-top: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.libRow,
.kitRow {
  display: grid;
  align-items: center;
  gap: 4px;
  flex: none;
  border: 1px solid #644821;
  background: #28190f;
}

.libRow {
  grid-template-columns: 34px 1fr auto 30px;
}

/* --- fábrica (navegador de sonidos EP-133 / medieval) ------------------- */

.facPacks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.facPacks button {
  border: 1px solid #78582e;
  background: #27190f;
  color: #cdb47f;
  padding: 7px;
  font-size: 12px;
  border-radius: 4px;
}

.facPacks button.on {
  border-color: var(--g);
  background: #60371d;
  color: #ffe2a2;
}

.facCats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 2px;
}

.facCat {
  border: 1px solid #5c421f;
  background: #1a110a;
  color: var(--m);
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 12px;
}

.facCat.on {
  border-color: var(--g);
  background: #4a2d15;
  color: #ffe5a5;
}

.facRow {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 4px;
  flex: none;
  border: 1px solid #644821;
  background: #28190f;
}

.facName {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  color: #f2d7a1;
  padding: 7px 8px;
  min-width: 0;
}

.facName b {
  color: var(--g);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.facName span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.kitRow {
  grid-template-columns: 1fr 32px;
}

.kitRow.current {
  border-color: var(--g);
  background: #35210f;
}

.libRow button,
.kitRow button {
  border: 0;
  background: transparent;
  padding: 7px 4px;
  color: #edd6a1;
  text-align: left;
  font-size: 12px;
  overflow: hidden;
}

.libMain,
.kitMain {
  min-width: 0;
}

.libMain span,
.kitMain span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.libMain small,
.kitMain small {
  display: block;
  color: var(--m);
  font-size: 10px;
}

.libPlay {
  text-align: center;
  color: var(--g);
}

.libAssign {
  color: var(--g);
  font-size: 10px;
  white-space: nowrap;
}

.libDel,
.kitDel {
  text-align: center;
  color: #c9755f;
  font-size: 17px;
}

.kitActions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}

.kitActions button {
  border: 1px solid #79552c;
  background: #332014;
  color: #eacb8d;
  padding: 6px 2px;
  font-size: 10px;
}

.kitActions #kitFactory,
.kitActions #kitErang {
  grid-column: 1 / -1;
  border-color: var(--g);
  color: var(--g);
}

.credit {
  margin-top: 10px;
  color: var(--m);
  font-size: 12px;
  line-height: 1.4;
}

.credit a {
  color: var(--g);
}

.kitActions #kitPrune {
  grid-column: 1 / -1;
}

/* --- navegación --------------------------------------------------------- */

nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid #78552d;
  padding-top: 5px;
}

.nav {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #74522c;
  background: #150e09;
  color: #cbb58b;
  font: 11px "Titular", "Uncial Antiqua", serif;
}

.nav b {
  display: block;
  font: 18px "IM Fell English", serif;
  line-height: 20px;
}

.nav.on {
  background: #6d321d;
  border-color: #efad55;
  color: #ffe7af;
}

/* --- mezcla -------------------------------------------------------------- */

.fxRack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 7px 0;
}

.fxRow {
  display: grid;
  grid-template-columns: 64px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid #5c421f;
  background: #181008;
}

.fxToggle {
  border: 1px solid #79552c;
  background: #2a1a0e;
  color: #b7a074;
  padding: 5px 4px;
  font-size: 11px;
  font-variant: small-caps;
}

.fxToggle.on {
  border-color: var(--g);
  background: #5a371c;
  color: #ffe5a5;
}

.fxRow label {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: var(--m);
  font-size: 8px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fxRow input[type="range"] {
  width: 100%;
  accent-color: var(--g);
}

.fxRow select {
  border: 1px solid #78582e;
  background: #21150d;
  color: #f6dca4;
  padding: 2px;
  font-size: 11px;
}

.mixList {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mixRow {
  display: grid;
  grid-template-columns: 26px minmax(46px, 1.1fr) 2.2fr 1.3fr auto;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 4px;
  border: 1px solid #4b3819;
  background: #201509;
}

.mixRow.empty {
  opacity: .5;
}

.mixPlay {
  border: 0;
  background: transparent;
  color: var(--g);
  padding: 4px 0;
  text-align: center;
}

.mixName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #edd6a1;
  font-size: 11px;
}

.mixRow input[type="range"] {
  width: 100%;
  accent-color: var(--g);
}

.mixPan input {
  accent-color: #a9844a;
}

.mixDb {
  color: var(--m);
  font-size: 9px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- diálogos ----------------------------------------------------------- */

dialog {
  max-width: min(85vw, 420px);
  border: 1px solid var(--g);
  background: var(--p);
  color: var(--ink);
  padding: 24px;
  font-size: 15px;
  line-height: 1.45;
}

dialog::backdrop {
  background: #0a0704cc;
}

.close {
  position: absolute;
  right: 7px;
  top: 2px;
  border: 0;
  background: transparent;
  font-size: 25px;
}

dialog h2 {
  margin: 0 0 8px;
  font-family: "Titular", "Uncial Antiqua", serif;
  font-size: 19px;
}

dialog p {
  margin: 8px 0;
}

/* --- diálogo de choppeth ------------------------------------------------- */

.chopTabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  margin: 10px 0;
}

.chopTab {
  border: 1px solid #8a6432;
  background: #e5d3a6;
  color: var(--ink);
  padding: 7px;
  font-size: 13px;
}

.chopTab.on {
  background: #5a371c;
  color: #ffe5a5;
}

.chopPage {
  display: none;
}

.chopPage.on {
  display: block;
}

.chopStatus {
  margin: 6px 0;
  font-size: 13px;
  opacity: .8;
}

.copyright {
  margin: 14px 0 0;
  padding-top: 8px;
  border-top: 1px solid #4b3819;
  font-size: 10px;
  letter-spacing: .4px;
  opacity: .65;
  text-align: center;
}

.chopTempo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 2px;
}

.chopTempo b {
  font: 30px "Titular", "Uncial Antiqua", serif;
  font-variant-numeric: tabular-nums;
}

.chopTempo i {
  font-size: 13px;
  font-style: normal;
  opacity: .65;
}

.chopTempo button {
  border: 1px solid #8a6432;
  background: #e5d3a6;
  color: var(--ink);
  padding: 5px 10px;
  font-size: 14px;
}

.chopPage label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 14px;
}

.chopPage label select {
  width: auto;
  margin: 0;
  border: 1px solid #8a6432;
  background: #f0e2bd;
  color: var(--ink);
  padding: 5px;
}

.chopCheck {
  grid-template-columns: auto 1fr;
  justify-items: start;
}

.chopCheck input {
  width: 19px;
  height: 19px;
  border: 1px solid #8a6432;
  background: #f0e2bd;
  display: grid;
  place-items: center;
}

.chopCheck input:checked::after {
  content: "✓";
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}

dialog select,
dialog > button:not(.close) {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
}

dialog > button:not(.close) {
  border: 1px solid var(--g);
  background: #5a371c;
  color: #ffe5a5;
}

/* --- estado activo de los toggles de la cabecera ------------------------ */

.headActions button.on {
  border-color: var(--g);
  background: #5a371c;
  color: #ffe5a5;
}

/* --- modos de disposición (los fija device/performance.js) -------------- */

/* Teléfono: sin riel por defecto, para no comerle ancho al layout ajustado. El
   fader es sobre todo de tableta; en teléfono se puede activar desde ajustes,
   que agrega la clase .show-fader. */
body.phone {
  --rail: 0px;
  --rail-gap: 0px;
}

body.phone.show-fader {
  --rail: 32px;
  --rail-gap: 6px;
}

/* Tableta: el iPad se veía como una columna angosta de 650px centrada con
   márgenes enormes. Acá la app usa el ancho real y agranda los controles, y el
   fader gana lugar. */
body.tablet .app {
  --rail: 74px;
  --rail-gap: 12px;
  max-width: min(1000px, 96vw);
  gap: 12px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

body.tablet .brand strong { font-size: 16px; }
body.tablet .screen > b { height: 46px; font-size: 20px; }
body.tablet .encRing { width: 52px; height: 52px; }
body.tablet .encValue { font-size: 15px; }
body.tablet .encLabel { font-size: 11px; }
body.tablet .pad b { font-size: 30px; }
body.tablet .pad span { font-size: 15px; margin-top: 8px; }
body.tablet .nav { font-size: 15px; }
body.tablet .nav b { font-size: 26px; line-height: 28px; }
body.tablet .step { border-radius: 3px; }
body.tablet .mixRow { padding: 6px; }
body.tablet .faderKnob { height: 24px; }
body.tablet .faderTrack { width: 30px; }

/* La barra de navegación crece un poco para el dedo en tableta. */
body.tablet .app {
  grid-template-rows: 52px auto auto minmax(0, 1fr) 74px;
}

/* --- pantallas grandes -------------------------------------------------- */

@media (min-width: 600px) {
  body.phone .app {
    padding-left: 28px;
    padding-right: 28px;
  }

  body.phone .pad b { font-size: 23px; }
  body.phone .pad span { font-size: 13px; }
  body.phone .encValue { font-size: 12px; }
}

/* --- pantallas bajas ---------------------------------------------------- */

@media (max-width: 360px) {
  .runeTools button,
  .waveBar button {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9px;
  }

  /* Teléfonos angostos (320): apretar el kitbar para que quantum + tempus + WAV
     entren sin recortar el borde derecho. */
  .kitbar { gap: 4px; }
  .kitbar .round { width: 34px; height: 34px; }
  .kitbar > button:not(.round),
  .kitbar .recBtn { padding: 0 5px; font-size: 10px; }
  .kitbar #load { padding: 0 6px; }
  body.phone .tempusRibbon { height: 15px; }
  .tempusLabel { gap: 1px !important; }
}

@media (max-height: 640px) {
  .app { gap: 5px; }
  canvas#wave { height: 96px; margin-top: 6px; }
  .waveHint { display: none; }
  .encRing { width: 34px; height: 34px; }
  .enc { padding: 3px 2px 2px; }
  .pad b { font-size: 17px; }
  .pad span { margin-top: 3px; }
  .editpage.on { gap: 6px 10px; margin-top: 6px; }
  .editactions button { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- display de timecode (bar · beat · div) -------------------------------- */

/* Display LED siempre encendido, como el aparato físico: no aparece/desaparece
   con el play, está prendido siempre (muestra el compás al correr y un reposo
   tenue al parar). */
#timecode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-top: 5px;
  background: #080403;
  border: 1px solid #2a0e06;
  border-radius: 3px;
  box-shadow: inset 0 1px 6px #000000bb, inset 0 0 14px #e3801022;
}

#tcGroup {
  font: 18px "Titular", "Uncial Antiqua", serif;
  color: var(--g);
  text-shadow: 0 0 6px #e3ad4988;
  min-width: 14px;
  text-align: center;
}

#tcTime {
  font-family: "Courier New", Courier, monospace;
  font-size: 22px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 4px;
  color: #e84020;
  text-shadow: 0 0 8px #e8402088, 0 0 18px #a0280e44;
}

body.tablet #tcTime { font-size: 28px; letter-spacing: 6px; }
body.tablet #tcGroup { font-size: 22px; }
body.tablet #timecode { height: 46px; }

/* --- grupos A · B · C · D (riel vertical a la izquierda de la grilla) ----- */

/* Fila que empareja el riel de grupos con la botonera de pads / la secuencia. */
.gridRow {
  display: flex;
  gap: 6px;
  min-height: 0;
  min-width: 0;
  flex: 0 1 auto;
  align-items: stretch;
}

/* En KIT, riel + pads viven en UNA sola grilla de 4x4: 16 botones iguales y
   equidistantes (como el EP-1320), no dos bloques separados. */
.playRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 7px;
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding: 7px;
  border: 1px solid #805a2d;
  background: #120d09;
}

/* El riel: cuatro botones apilados que rellenan el alto de la grilla. */
.groupRail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
  width: 40px;
  min-height: 0;
}

.groupRail .groupBtn {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* En KIT el riel es la primera columna de la grilla 4x4, del mismo ancho que
   cada pad — no una tira angosta aparte. */
.playRow .groupRail {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-column: 1;
  grid-row: 1 / -1;
  gap: 7px;
  width: auto;
  flex: none;
}

.playRow .groupRail .groupBtn {
  width: auto;
  height: auto;
}

/* La grilla ocupa el resto del ancho; min-width:0 deja que scrollee sola. */
.gridRow > .grid {
  flex: 1;
  min-width: 0;
}

/* Las escenas A·B·C·D son fichas de HUESO viejo (textura propia, distinta del
   cuero del fondo) con la inicial rubricada en rojo, como en un manuscrito.
   Se distinguen así de los 12 paeds (cuero oscuro). Al elegir una escena NO se
   rellena de oscuro: sólo se ilumina el borde (la que suena se ve arriba en la
   pantalla y en el cambio de sonidos). */
.groupBtn {
  position: relative;
  border: 2px solid #b8a67a;
  background-image: linear-gradient(145deg, #ffffff26, #0000001a), url('icons/textures/hueso.jpg');
  background-size: cover;
  background-blend-mode: overlay, normal;
  background-position: center;
  color: var(--red);
  /* "Escena" queda reservada para Black Castle (cuando esté el archivo).
     Mientras tanto cae en IM Fell English, que dibuja A·B·C·D legibles: las
     góticas/unciales de la app las deforman (la A sale "λ" y la D "δ"). */
  font: 700 21px "Escena", "IM Fell English", serif;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px #ffffff80, inset 0 0 0 1px #00000012;
  transition: border-color .12s, box-shadow .12s;
  --stitch: #8b6a3a4d;
}

.groupBtn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--stitch);
  border-radius: 2px;
  pointer-events: none;
}

/* Escena activa: hueso intacto, sólo el borde encendido (oro). */
.groupBtn.on {
  border-color: var(--g);
  box-shadow:
    inset 0 1px 2px #ffffff80,
    0 0 0 1px #e3ad49,
    0 0 10px #e3ad4966;
}

body.tablet .groupRail { width: 58px; gap: 8px; }
body.tablet .groupBtn { font-size: 28px; }
body.tablet .playRow .groupRail { width: auto; gap: 4px; }

@media (max-width: 360px) {
  .groupRail { width: 34px; }
  .groupBtn { font-size: 19px; }
  .playRow .groupRail { width: auto; }
}

/* --- quantum (note repeat) ----------------------------------------------- */

.quantumBtn {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  height: 32px;
  flex: none;
  margin-left: auto; /* empuja quantum + tempus + WAV al grupo derecho */
  padding: 0 8px;
  border: 1px solid #79552c;
  background: #251708;
  color: #b7a074;
  line-height: 1;
}

.quantumBtn small {
  font-size: 8px;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .8;
}

.quantumBtn b {
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.quantumBtn.on {
  border-color: var(--g);
  background: #5a371c;
  color: #ffe5a5;
  box-shadow: 0 0 8px #e3ad4933;
  animation: latir 1.1s ease-in-out infinite;
}

body.tablet .quantumBtn { height: 40px; padding: 0 12px; }
body.tablet .quantumBtn small { font-size: 9px; }
body.tablet .quantumBtn b { font-size: 15px; }

/* En teléfono el kitbar es angosto: el botón muestra sólo el intervalo (como el
   LED del aparato) y la cinta se achica, para que entre todo sin recortar. */
body.phone .quantumBtn { padding: 0 7px; }
body.phone .quantumBtn small { display: none; }
body.phone .quantumBtn b { font-size: 13px; }

/* --- cinta "tempus" ------------------------------------------------------ */

.tempusLabel {
  display: grid;
  grid-template-columns: auto 42px;
  gap: 3px;
  align-items: center;
}

/* La cinta "tempus" es el botón de tap tempo: tocarla al pulso fija el tempo. */
.tapTempo {
  display: block;
  padding: 2px;
  border: 0;
  background: transparent;
  line-height: 0;
  touch-action: manipulation;
}

.tapTempo .tempusRibbon {
  pointer-events: none; /* el gesto lo maneja el botón, no la imagen */
}

.tapTempo.tapped .tempusRibbon {
  filter: drop-shadow(0 1px 1px #0008) brightness(1.5);
}

.tempusRibbon {
  height: 21px;
  width: auto;
  object-fit: contain;
  /* La cinta viene en tinta oscura sobre pergamino; en el panel oscuro se
     aclara apenas para que "flote" como los demás rótulos. */
  filter: drop-shadow(0 1px 1px #0008);
}

body.tablet .tempusRibbon { height: 27px; }
body.phone .tempusRibbon { height: 17px; }

/* El campo de tempo se ve y se agarra como una perilla más: cuero oscuro,
   arrastre vertical (ver main.js) en vez de un cuadro de texto suelto. */
#bpm {
  width: 42px;
  height: 26px;
  border: 1px solid #a77b3f;
  border-radius: 4px;
  background-image: linear-gradient(145deg, #63401fcc, #2d1c10e6), url('icons/textures/cuero-claro.jpg');
  background-size: cover;
  background-blend-mode: multiply;
  color: #f2d397;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: ns-resize;
  -moz-appearance: textfield;
}

#bpm::-webkit-outer-spin-button,
#bpm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#bpm:focus-visible {
  outline: 1px solid var(--g);
  outline-offset: 1px;
}

/* --- iconos ilustrados en botones/rótulos -------------------------------- */

.nav img {
  display: block;
  height: 26px;
  width: auto;
  margin: 0 auto 2px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px #0007);
}

body.tablet .nav img { height: 34px; }

@media (max-height: 640px) {
  .nav img { height: 22px; }
}

.mutoLabel { align-items: center; }

.mutoIcon {
  height: 16px;
  width: auto;
  vertical-align: -3px;
  margin-right: 4px;
  object-fit: contain;
}

#kitSave.withIcon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#kitSave.withIcon img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

/* --- mascota (bufón juglar), emblema del "display" ----------------------- */

.mascot {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 74px;
  width: auto;
  opacity: .32;
  pointer-events: none;
  /* Se funde con el pergamino del display para leerse como arte de faceplate,
     no como una foto pegada encima. */
  mix-blend-mode: multiply;
  filter: saturate(.85);
}

/* El texto del display no debe quedar tapado por el emblema. */
.screen .screenTop,
.screen > b,
.screen .timecode,
.screen .screenBottom { padding-right: 40px; }

body.tablet .mascot { height: 96px; right: 10px; }
body.tablet .screen .screenTop,
body.tablet .screen > b,
body.tablet .screen .timecode,
body.tablet .screen .screenBottom { padding-right: 60px; }