/* AISU HERO · mobile (celular parado y acostado) y controles táctiles.
   Los mismos cortes que web/js/form.js:
     PORTRAIT  (max-aspect-ratio: 4/5)                        celular parado o ventana angosta. Aisu arriba (stage.js,
                                                             portrait.*), la interfaz en hojas abajo, todo en una columna.
     SHORT     (min-aspect-ratio: 4/5) and (max-height: 540px)  celular acostado. El armado de la compu, más compacto y
                                                             con las listas que scrollean.
   Con el dedo (body[data-input="touch"], touch.js) las ayudas de teclado se van, las barras de ayuda pasan a ser botones
   grandes y durante la partida aparecen pausa y Star Power.
   Las alturas van en dvh (lo que se ve con la barra del navegador puesta), los bordes respetan el notch (safe-area).
   Se carga última: gana por orden con la misma especificidad. Mismas reglas que el resto: sólo transform y opacity en
   movimiento, nada de blur. */

/* ============================================================================ todos los formatos */
:root { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); }

/* el doble toque no hace zoom ni selecciona; el largo no abre el menú del sistema sobre los botones */
html { touch-action: manipulation; }
/* tirar hacia abajo no recarga la página (Chrome en Android) ni hace rebotar todo (Safari) */
html, body { overscroll-behavior: none; }
body[data-input="touch"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body[data-input="touch"] :is(input, textarea, .code-value) { -webkit-user-select: text; user-select: text; }

/* Safari del iPhone hace zoom al enfocar un campo con letra de menos de 16 px (y el zoom queda): en pantallas táctiles
   los campos de texto nunca bajan de 16 px */
@media (pointer: coarse) {
  html body :is(input:not([type="checkbox"], [type="range"]), textarea, select) { font-size: max(16px, 1rem); }
  html body #welcome .field-text input, html body #settings .field-text input { font-size: max(16px, 1.2rem); }
  html body #welcome .field-text--ticket input { font-size: max(16px, 1.3rem); letter-spacing: .06em; }
}

/* ---------------------------------------------------------------- touchpad (touch.js)
   Encima del HUD (que no toma clics) y debajo de #fx. Sólo durante la partida. */
#touchpad { position: fixed; inset: 0; z-index: 3; display: none; touch-action: none; -webkit-user-select: none; user-select: none; }
body[data-screen="playing"] #touchpad { display: block; }
#touchpad .tp-btn { display: none; }
body[data-input="touch"] #touchpad .tp-btn { display: grid; }
.tp-btn {
  position: absolute; place-items: center; padding: 0; margin: 0; min-height: 0;
  border: var(--ow) solid var(--ink); border-radius: 50%; box-shadow: var(--drop-s); touch-action: none;
  transition: transform var(--t-instant) linear, opacity var(--t-quick) linear;
}
.tp-btn:active { transform: translateY(.12rem) scale(.96); }
.tp-pause {
  right: calc(.7rem + var(--sa-r)); top: calc(.7rem + var(--sa-t)); width: 3rem; height: 3rem;
  grid-auto-flow: column; gap: .32rem; background: var(--paper);
}
.tp-pause i { display: block; width: .42rem; height: 1.15rem; border-radius: .14rem; background: var(--ink); }
.tp-star {
  width: 4.4rem; height: 4.4rem; gap: 0; align-content: center; background: var(--grad-night); color: var(--ivory-3);
  border-color: var(--ink); opacity: .55;
}
.tp-star b { font: 700 1.7rem/1 var(--font-symbols, var(--font-display)); color: var(--night-4); -webkit-text-stroke: max(1px, .05em) var(--ink); }
.tp-star span { font: 900 max(.7rem, 12px)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.tp-star::before {
  content: ''; position: absolute; inset: calc(-1 * var(--ow)); border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(var(--cobalt-hi) calc(var(--star, 0) * 360deg), rgb(13 11 22 / .55) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - .32rem), #000 calc(50% - .3rem));
  mask: radial-gradient(circle, transparent calc(50% - .32rem), #000 calc(50% - .3rem));
  scale: 1.16;
}
.tp-star { isolation: isolate; }
.tp-star.is-ready { opacity: 1; background: var(--grad-blue); color: var(--paper); box-shadow: var(--drop-s), 0 0 0 .3rem rgb(124 142 255 / .45), 0 0 1.6rem .3rem rgb(124 142 255 / .7); }
.tp-star.is-ready b { color: var(--gold-hi); }
.tp-star.is-active { opacity: 1; background: var(--cobalt); color: var(--ivory); }
.tp-star.is-active b { color: var(--f2); }
@media (prefers-reduced-motion: no-preference) {
  .tp-star.is-ready { animation: tp-ready 900ms ease-in-out infinite alternate; }
}
@keyframes tp-ready { from { transform: scale(1); } to { transform: scale(1.07); } }
/* acostado / ancho: Star Power abajo a la izquierda, donde no hay pista */
.tp-star { left: calc(1.2rem + var(--sa-l)); bottom: calc(1.4rem + var(--sa-b)); }

/* ---------------------------------------------------------------- con el dedo: sin ayudas de teclado
   (los kbd de los botones, las pistas de teclas, el aviso de ventana angosta) */
body[data-input="touch"] :is(kbd, .hint-keys, .switch__key, .narrow-pill) { display: none !important; }
body[data-input="touch"] .hintbar .hint:not(.hint-btn) { display: none; }
body[data-input="touch"] #title .prompt-alt { font-size: 0; }
body[data-input="touch"] #title .prompt-alt::after { content: 'Best with headphones'; font-size: var(--fs-small); }
body[data-input="touch"] #btn-start.prompt { font-size: 0; }
body[data-input="touch"] #btn-start.prompt::after { content: 'Tap to start'; font-size: 1.5rem; }
body[data-input="touch"] #results .res-skip { font-size: 0; }
body[data-input="touch"] #results .res-skip::after { content: 'Tap: skip'; font-size: var(--fs-small); }
body[data-input="touch"] .title-foot__guitar { font-size: 0; }
body[data-input="touch"] .title-foot__guitar::after { content: 'Touch'; font-size: var(--fs-small); }
/* con el dedo los botones de las barras de ayuda son botones de verdad */
body[data-input="touch"] .hintbar { gap: .5rem; justify-content: flex-end; }
body[data-input="touch"] .hintbar .hint-btn {
  height: 2.5rem; padding: 0 .95rem; border: var(--ow-s) solid var(--ink); border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); text-shadow: none; box-shadow: var(--drop-s);
}
body[data-input="touch"] .hintbar .hint-btn .hint__label { color: inherit; }
body[data-input="touch"] .hintbar .hint-btn.hint--go { background: var(--grad-fire-btn); color: var(--paper); }
body[data-input="touch"] .hintbar [data-prio="2"] { display: inline-flex; }
/* con el dedo se toca sin rasgueo: no hay Tap / Strum que elegir */
body[data-input="touch"] #select #modes { display: none; }
body[data-input="touch"] #select .controls-row { grid-template-columns: minmax(0, 1fr); }
body[data-input="touch"] #select .controls-row > #btn-play { grid-column: 1; width: 100%; }
/* calibración con el dedo */
body[data-input="touch"] #calibrate .cal-info > .body { font-size: 0; }
body[data-input="touch"] #calibrate .cal-info > .body::after { content: "Tap the drum right as each click plays, by ear (sound on). You'll hear 16 clicks; the first 4 are practice."; font: 800 var(--fs-body)/1.45 var(--font-body); }
/* el cursor de foco es para teclado y control */
body[data-input="touch"] #fx > #cursor { display: none; }
/* teclas: no hay teclado que cambiar */
body[data-input="touch"] .settings-col:has(#keymap) > .group:has(#keymap) { display: none; }
/* Ajustes → Touch (vibración, giro para Star Power): sólo con el dedo */
#settings .group--touch { display: none; }
body[data-input="touch"] #settings .group--touch { display: flex; }
#settings .group--touch :is(.switch, .slider, .touch-note)[hidden] { display: none; }
#settings .touch-note { margin: 0; font: 800 var(--fs-small)/1.3 var(--font-body); color: var(--ink-2); }

/* ---------------------------------------------------------------- con el dedo: todo lo que se toca mide 44 px o más
   (la medida mínima de Apple y de Android). Los interruptores y las filas de ajustes crecen en alto; lo que no puede
   crecer sin romper el dibujo (la pausa, los chips) crece hasta 44 px igual, que en el celular es poco más que su rem. */
body[data-input="touch"] .hintbar .hint-btn { height: max(44px, 2.5rem); }
/* la barra mide lo que sus botones de 44 px: si no, se salían por abajo (acostado, 2 px fuera de la pantalla); el
   puesto (--stall-b) se arma con este alto */
:root:has(body[data-input="touch"]) { --hint-h: max(44px, 2.6rem); }
body[data-input="touch"] :is(.switch, .ghost, .plate--chip, [role="tab"], .song-thumb.ticket) { min-height: 44px; }
body[data-input="touch"] .switch { padding-block: 0; }
body[data-input="touch"] .field-text input { height: max(44px, 3rem); }
body[data-input="touch"] :is(#settings, #pause, #results, #welcome, #code, #calibrate) button { min-height: 44px; }
body[data-input="touch"] :is(#settings, #welcome) .field-text input,
body[data-input="touch"][data-shot="menu"] #welcome .field-text input { height: max(44px, 3.2rem); }
body[data-input="touch"] #welcome .field-text--ticket input { height: max(44px, 3.4rem); }
body[data-input="touch"] #settings .switch { min-height: 44px; font-size: max(.94rem, 12px); }
body[data-input="touch"] #settings .slider input[type="range"] { height: 44px; }
body[data-input="touch"] .slider input[type="range"] { height: 44px; }
body[data-input="touch"] .tp-pause { width: max(44px, 3rem); height: max(44px, 3rem); }


/* ============================================================================ PORTRAIT */
@media (max-aspect-ratio: 4/5) {
  html { font-size: clamp(12px, 3.2vw, 16px); }   /* 12 px mínimo: en un celular de 360 px la letra chica quedaba en 11 */
  :root {
    /* la interfaz no tiene que esquivar a Aisu por los costados: está arriba */
    --safe-title-r: 100vw; --safe-menu-l: 0px; --safe-strip-r: 0px; --safe-judge-l: 0px; --safe-hold-l: 0px;
    --play-top: 0px; --play-dock-l: 100vw;
    --lx: calc(4vw + var(--sa-l)); --ly: 2dvh;
    /* el puesto: de borde a borde, desde el tercio de arriba hasta los botones de abajo */
    --hint-h: 2.6rem; --roof-h: 2.6rem;
    --stall-l: calc(2.5vw + var(--sa-l)); --stall-r: calc(2.5vw + var(--sa-r));
    --stall-t: 35dvh;
    --stall-b: calc(max(.6rem, var(--sa-b)) + var(--hint-h) + .5rem);
    --stall-w: calc(100vw - var(--stall-l) - var(--stall-r));
    --res-w: calc(100vw - 5vw - var(--sa-l) - var(--sa-r));
    /* los juicios, más chicos: en la pista parada tapaban las notas que venían */
    --fs-judge: 2.3rem; --fs-judge-s: 2rem;
    /* la letra chica nunca baja de 12 px (con la raíz en 12 px, .875rem daba 10,5) */
    --fs-small: max(.875rem, 12px);
  }
  .narrow-pill { display: none !important; }
  @media (max-height: 700px) { :root { --stall-t: 31dvh; } }

  /* la sombra de legibilidad va arriba y abajo, nunca sobre Aisu (en la compu es una columna a la izquierda) */
  body:is([data-screen="title"], [data-screen="welcome"], [data-screen="code"]) .shade {
    background: linear-gradient(180deg, rgb(13 11 22 / .5) 0, rgb(13 11 22 / 0) 30dvh, rgb(13 11 22 / 0) 62dvh, rgb(13 11 22 / .66) 100%);
  }
  body:is([data-screen="welcome"], [data-screen="code"]) .shade {
    background: linear-gradient(180deg, rgb(13 11 22 / 0) 0 30dvh, rgb(13 11 22 / .55) 48dvh);
  }
  body:is([data-screen="select"], [data-screen="board"], [data-screen="settings"], [data-screen="calibrate"]) .shade,
  body[data-shot="menu"]:is([data-screen="welcome"], [data-screen="code"]) .shade {
    background: linear-gradient(180deg, rgb(13 11 22 / 0) 0 28dvh, rgb(13 11 22 / .55) 45dvh);
  }

  /* ------------------------------------------------ title: logo arriba, Aisu al medio, botón y tarjeta abajo */
  :where(#title) .title-lanterns { width: 100vw; height: 9dvh; }
  :where(#title) .title-fireworks { width: 100vw; height: 36dvh; }
  :where(#title) .title-crowd { width: 100vw; height: 16dvh; }
  #title-logo { --lk: calc(min(84vw, 25rem) / 34); left: 50%; top: calc(var(--sa-t) + 1.5dvh); translate: -50% 0; }
  #title .tagline { left: 50%; top: calc(var(--sa-t) + 1.5dvh + min(84vw, 25rem) * 22 / 34 - .4rem); }
  #btn-start { left: 50%; translate: -50% 0; top: auto; bottom: calc(max(1rem, var(--sa-b)) + 1.6rem); width: min(86vw, 24rem); height: 4.2rem; }
  #title .prompt-alt { left: 50%; translate: -50% 0; top: auto; bottom: calc(max(1rem, var(--sa-b)) - .1rem); width: min(86vw, 24rem); text-align: center; }
  #title .np { left: 50%; translate: -50% 0; bottom: calc(max(1rem, var(--sa-b)) + 7rem); width: min(86vw, 24rem); }
  #title .mascot-anchor { left: calc(50% + min(43vw, 12rem) - 4.2rem); bottom: calc(max(1rem, var(--sa-b)) + 7rem + 5.9rem); width: 4.6rem; height: 5.4rem; }
  /* del pie sólo queda el aviso sin conexión, arriba de la tarjeta */
  .title-foot { left: 50%; translate: -50% 0; bottom: calc(max(1rem, var(--sa-b)) + 15rem); max-width: 90vw; justify-content: center; }
  .title-foot > :not(.title-foot__offline) { display: none; }

  /* ------------------------------------------------ hojas del puesto (setlist, ranking, ajustes, calibración) */
  .stall__sign { left: calc(var(--stall-l) + .8rem); max-width: calc(var(--stall-w) - 7rem); bottom: calc(100dvh - var(--stall-body-t) - .6rem); }
  #select .stall__sign { --logo-w: 9.5rem; bottom: calc(100dvh - var(--stall-body-t) - .5rem); }
  .stall-title { font-size: var(--fs-h3); }
  .stall__body { padding: calc(1rem + var(--ow-l)) calc(.8rem + var(--ow-l)) calc(.9rem + var(--ow-l)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  :where(#stall .mascot-anchor) { right: .8rem; top: -4.6rem; width: 5rem; height: 4.6rem; }
  .screen > .mascot-anchor[data-mascot-anchor="stall"] { right: calc(var(--stall-r) + .8rem); top: calc(var(--stall-t) - 4.6rem); width: 5rem; height: 4.6rem; }
  .menu-top { left: calc(3vw + var(--sa-l)); top: calc(var(--sa-t) + 1.2dvh); height: 2.4rem; }
  .menu-top .lockup--sm { display: none; }
  /* barra de abajo: de borde a borde del puesto */
  :is(#select, #board, #settings, #calibrate) > .hintbar,
  body[data-shot="menu"] :is(#welcome, #code) > .hintbar { left: var(--stall-l); right: var(--stall-r); bottom: max(.6rem, var(--sa-b)); }
  .hintbar { flex-wrap: nowrap; overflow: hidden; gap: .7rem; }
  #select > .hintbar .hint--go { display: none; }          /* Play ya muestra su tecla */

  /* ------------------------------------------------ setlist */
  #select .song-info { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar-h) var(--chip-h) auto; row-gap: .45rem; align-content: start; }
  #select .stats { grid-row: 2; grid-column: 1; }
  #select #sd-best { grid-row: 3; grid-column: 1; height: auto; min-height: var(--chip-h); padding-block: .35rem; }
  #select .song-head { align-items: start; }
  .select-body { min-height: 0; align-content: start; row-gap: .8rem; }
  #select .select-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .select-body > #song-list { grid-row: auto; }
  /* las entradas "coming soon": dos alcanzan (el cartel ya dice "1 of 5 live"); así el nombre de la canción entra */
  #song-list > .song-thumb.locked ~ .song-thumb.locked ~ .song-thumb.locked { display: none; }
  .song-head { --head-h: 5.6rem; }
  .cover-wrap { width: var(--head-h); height: var(--head-h); }
  .dif-field { grid-template-rows: auto auto; }
  .dif-head { flex-wrap: wrap; row-gap: .4rem; }
  .dif-field .label::after { display: none; }
  #difficulty { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 3.9rem; }
  .controls-row { grid-template-columns: minmax(0, 1fr); row-gap: .7rem; }
  .controls-row > #btn-play { grid-column: 1; grid-row: 2; min-height: 4rem; width: 100%; }
  /* Play siempre a mano: la fila queda pegada abajo del puesto aunque el resto scrollee */
  #select .controls-row {
    position: sticky; bottom: calc(-1 * (.9rem + var(--ow-l))); z-index: 2;
    margin: 0 calc(-1 * (.8rem + var(--ow-l))) calc(-1 * (.9rem + var(--ow-l))); padding: .7rem calc(.8rem + var(--ow-l)) calc(.9rem + var(--ow-l));
    background: linear-gradient(180deg, rgb(238 229 210 / 0), rgb(238 229 210 / .97) 1.1rem);
  }
  #select .controls-row > #modes { height: 3.6rem; }

  /* ------------------------------------------------ ranking */
  #board .stall__sign { flex-wrap: wrap; }
  #board .board-song { display: none; }
  /* filas: puesto, jugador, precisión y puntaje (sin modo ni estrellas: el nombre necesita el lugar) */
  #board .board-row, #board-list .board-skel { grid-template-columns: 2.4rem minmax(0, 1fr) 3.4rem 5.6rem; column-gap: .4rem; }
  #board .board-row > :is(:nth-child(3), :nth-child(4)), #board-list .board-skel > :is(:nth-child(3), :nth-child(4)) { display: none; }

  /* ------------------------------------------------ calibración: el parche arriba, el texto abajo */
  #calibrate .calibrate-body { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: .6rem; align-content: center; padding-top: 1.2rem; }
  #calibrate .metro { width: 9rem; height: 9.4rem; }
  #calibrate .cal-info { justify-items: center; text-align: center; }

  /* ------------------------------------------------ bienvenida y código (plano del título en la compu): hoja abajo, del
     tamaño de su contenido y con scroll si no entra (el teclado del celular achica la ventana) */
  body #welcome .ema, body #code .notice, body:not([data-shot="menu"]) #welcome .ema, body:not([data-shot="menu"]) #code .notice {
    --ema-top: 33dvh;
    left: var(--stall-l); right: var(--stall-r); width: auto; top: 33dvh; bottom: auto;
  }
  body #welcome .ema__paper, body #code .notice__paper,
  body:not([data-shot="menu"]) #welcome .ema__paper, body:not([data-shot="menu"]) #code .notice__paper {
    max-height: calc(100dvh - 33dvh - var(--hint-h) - max(.6rem, var(--sa-b)) - 1.2rem); overflow-y: auto; overscroll-behavior: contain;
  }
  body[data-shot="menu"] #welcome .ema, body[data-shot="menu"] #code .notice { top: var(--stall-body-t); bottom: var(--stall-b); }
  body[data-shot="menu"] #welcome .ema__paper, body[data-shot="menu"] #code .notice__paper { max-height: none; }
  body:not([data-shot="menu"]) #welcome .ema { --ema-p: 3rem; }
  body:not([data-shot="menu"]) #welcome .ema__paper { padding: calc(var(--ema-p) + .6rem) 1.1rem 1.1rem; }
  body:not([data-shot="menu"]) #welcome .ema__paper .band { margin-inline: -1.1rem; padding-inline: 1.1rem; min-height: 3.2rem; }
  body:not([data-shot="menu"]) #welcome .ema__paper .band h2 { font-size: 1.9rem; }
  #welcome .ema__cord, #code .notice__bunting { display: none; }
  #welcome #wc-preview { display: none; }
  #code .notice__paper h2 { font-size: var(--fs-h2); }
  #welcome .row { flex-wrap: wrap; justify-content: flex-end; }
  #welcome .row > #btn-have-code { flex: 1 1 100%; order: 2; justify-content: center; }
  .ema .mascot-anchor { left: auto; right: 1.2rem; top: -4.2rem; width: 4.8rem; height: 4.2rem; }
  .notice .mascot-anchor { display: none; }
  #aisu-say { left: auto; right: calc(3vw + var(--sa-r)); top: calc(var(--sa-t) + 1.5dvh); width: 13rem; }
  #welcome > .hintbar, #code > .hintbar { left: var(--stall-l); right: var(--stall-r); bottom: max(.6rem, var(--sa-b)); width: auto; }

  /* resultados: ver "RESULTADOS en el celu", al final */

  /* ------------------------------------------------ pausa: hoja al centro de abajo */
  .pause-sheet { left: 50%; right: auto; translate: -50% 0; top: auto; bottom: calc(max(1rem, var(--sa-b)) + 1rem); width: min(90vw, 24rem); }
  #pause .pause-sheet { --anim: ff-rise-in 300ms var(--spring-soft) 50ms backwards; }   /* sube como hoja (en la compu entra desde la derecha) */

  /* ------------------------------------------------ partida: arriba combo, puntaje y pausa; la letra debajo; Aisu; la
     pista. El público es un tubo a la izquierda y Star Power un botón a la derecha, donde la pista todavía es angosta. */
  #hud .song-plate {
    left: 0; right: 0; top: 0; width: auto; min-width: 0; max-width: none; min-height: 0; height: calc(var(--sa-t) + .42rem);
    padding: var(--sa-t) 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; rotate: none; display: block;
  }
  #hud .song-plate::before, #hud .song-plate::after { display: none; }
  #hud .song-plate > :not(.song-plate__rope), #hud #hud-time { display: none; }
  #hud .song-plate__rope { position: absolute; inset: auto 0 0; margin: 0; display: block; }
  #hud .song-plate__rope .rope { height: .42rem; border-width: 0 0 max(1.5px, .1rem); border-radius: 0; }
  #hud .lyrics {
    left: 50%; translate: -50% 0; top: calc(var(--sa-t) + 4.6rem); width: min(94vw, 30rem); height: auto; min-height: 0;
    padding: .3rem .9rem .35rem;
  }
  #hud #lyric-now { font-size: 1.3rem; line-height: 1.15; }
  #hud #lyric-now.len-m { font-size: 1.12rem; }
  #hud #lyric-now.len-l { font-size: .98rem; }
  #hud #lyric-next { font-size: .82rem; }
  #hud #section-toast { left: calc(.6rem + var(--sa-l)); right: auto; top: max(calc(var(--sa-t) + 11rem), 21dvh); width: auto; max-width: 8.5rem; min-height: 0; }
  #hud #section-toast.hint { left: 50%; translate: -50% 0; top: 50dvh; max-width: 88vw; }
  #hud #endcap { top: 27dvh; }
  #hud #countdown { top: 27dvh; }
  /* el aviso de racha va sobre el fondo de la pista, debajo de la guitarra de Aisu y arriba del juicio (68 dvh). Sin
     bottom ni el max-width de la compu (con el riel al centro daba 0 y el cartel se estiraba en una tira alta) */
  #hud #combo { left: 50%; right: auto; translate: -50% 0; top: 56dvh; bottom: auto; max-width: 92vw; transform-origin: 50% 100%; }
  #judge-host { top: 68dvh; }
  #hud #timing { top: 72.5dvh; }

  /* el racimo del riel pasa a la barra de arriba */
  #hud .dock { left: 0; right: 0; top: 0; bottom: auto; height: 0; animation: none; }
  #hud .dock > .mascot-anchor { left: auto; right: .6rem; top: 37dvh; bottom: auto; width: 4.6rem; height: 4rem; }
  #hud .dock__streak {
    left: calc(.6rem + var(--sa-l)); top: calc(var(--sa-t) + .75rem); right: auto; bottom: auto;
    scale: .72; transform-origin: 0 0;
  }
  #hud .dock__streak-info { display: none; }
  #hud .dock__score {
    left: calc(.6rem + var(--sa-l) + 5.2rem); top: calc(var(--sa-t) + 1rem); right: auto; bottom: auto;
    grid-template-columns: auto auto; column-gap: .45rem;
  }
  #hud #hud-score { font-size: 2rem; }
  #hud .rock {
    --tube-h: 24dvh;
    left: calc(.9rem + var(--sa-l)); top: 41dvh; bottom: auto; width: 1.05rem; height: var(--tube-h); translate: none; rotate: none;
  }
  #hud .rock__head { left: calc(.4rem + var(--sa-l)); top: calc(41dvh - 1.7rem); bottom: auto; right: auto; }
  #hud .rock__cap { display: none; }
  #hud .rock__chip { font-size: .72rem; padding: 0 .35rem; }
  #hud .dock__star {
    left: auto; right: calc(.6rem + var(--sa-r)); top: 44dvh; bottom: auto; grid-template-columns: auto;
    justify-items: end; row-gap: .3rem;
  }
  #hud .dock__star::before { display: none; }
  #hud .dock .starbar { grid-template-columns: repeat(2, 1.7rem); grid-auto-rows: auto; row-gap: .5rem; column-gap: .35rem; background: none; padding: 0; }
  #hud .dock .starbar i { width: 1.7rem; height: 2.2rem; }
  #hud #star-hint { grid-area: auto; max-width: 7rem; text-align: right; }
  /* con el dedo, Star Power es el botón (touch.js), que se llena con la barra */
  body[data-input="touch"] #hud .dock__star { display: none; }
  .tp-star { left: auto; right: calc(.7rem + var(--sa-r)); top: 44dvh; bottom: auto; }

  /* ------------------------------------------------ errores */
  #error { left: 50% !important; translate: -50% 0 !important; width: 92vw; top: auto !important; bottom: calc(max(1rem, var(--sa-b)) + 4rem) !important; }
}

/* ============================================================================ SHORT (celular acostado) */
@media (min-aspect-ratio: 4/5) and (max-height: 540px) {
  html { font-size: clamp(12px, 3.1dvh, 13.5px); }   /* 12 px mínimo: con menos, las notas de las dificultades y las entradas quedaban en 10 px */
  :root {
    --fs-small: max(.875rem, 12px);
    --lx: calc(3vw + var(--sa-l)); --ly: calc(var(--sa-t) + 3dvh);
    /* el puesto sube casi hasta arriba: a la izquierda está Aisu, a la derecha no hace falta ver el video */
    --stall-t: calc(var(--sa-t) + 14dvh); --stall-r: calc(1.5vw + var(--sa-r));
    --stall-b: calc(max(.4rem, var(--sa-b)) + var(--hint-h) + .4rem);
    --roof-h: 2.6rem;
  }
  .narrow-pill { display: none !important; }

  /* ------------------------------------------------ title: la columna entra entera a la altura (logo a 50 dvh) */
  #title { --tlk: calc(50dvh / 22); }
  #title-logo { --lk: var(--tlk); left: var(--lx); top: var(--ly); }
  #title .tagline { left: calc(var(--lx) + 17 * var(--tlk)); top: calc(var(--ly) + 22.6 * var(--tlk)); }
  #btn-start { left: calc(var(--lx) + 17 * var(--tlk)); translate: -50% 0; top: auto; bottom: calc(max(.8rem, var(--sa-b)) + 1.7rem); width: 21rem; height: 3.9rem; }
  #title .prompt-alt { left: calc(var(--lx) + 17 * var(--tlk)); translate: -50% 0; top: auto; bottom: max(.5rem, var(--sa-b)); width: 21rem; text-align: center; }
  #title .np, #title .mascot-anchor { display: none; }
  .title-foot { left: calc(var(--lx) + 34 * var(--tlk) + 1rem); bottom: max(.8rem, var(--sa-b)); max-width: 12rem; }
  .title-foot > :not(.title-foot__offline) { display: none; }
  .title-lanterns { height: 10dvh; }

  /* ------------------------------------------------ bienvenida y código: la hoja de arriba abajo, a la izquierda */
  body:not([data-shot="menu"]) #welcome .ema { --ema-top: calc(var(--sa-t) + 2.5dvh); --ema-p: 2.4rem; top: var(--ema-top); width: min(40rem, var(--safe-title-r) - 5vw - 1rem); }
  body:not([data-shot="menu"]) #welcome .ema__paper { max-height: calc(100dvh - var(--ema-top) - var(--hint-h) - max(.4rem, var(--sa-b)) - 1rem); padding: calc(var(--ema-p) + .5rem) 1.2rem 1rem; }
  body:not([data-shot="menu"]) #welcome .ema__paper .band { margin-inline: -1.2rem; padding-inline: 1.2rem; min-height: 3rem; }
  body:not([data-shot="menu"]) #welcome .ema__paper .band h2 { font-size: 1.8rem; }
  #welcome .ema__cord, #code .notice__bunting { display: none; }
  body:not([data-shot="menu"]) #code .notice { top: calc(var(--sa-t) + 3dvh); }
  body:not([data-shot="menu"]) #code .notice__paper { max-height: calc(100dvh - var(--sa-t) - 3dvh - var(--hint-h) - max(.4rem, var(--sa-b)) - 1rem); }
  #code .notice .mascot-anchor { display: none; }
  #welcome > .hintbar, #code > .hintbar { bottom: max(.4rem, var(--sa-b)); }
  #aisu-say { top: calc(var(--sa-t) + 1dvh); }

  /* ------------------------------------------------ hojas del puesto */
  .stall__sign, #select .stall__sign { bottom: calc(100dvh - var(--stall-body-t) - .5rem); }
  #select .stall__sign { --logo-w: 9.5rem; }
  .stall-title { font-size: var(--fs-h3); }
  .stall__body { padding: calc(.8rem + var(--ow-l)) calc(1rem + var(--ow-l)); overscroll-behavior: contain; }
  :is(#select, #board, #settings, #calibrate) > .hintbar,
  body[data-shot="menu"] :is(#welcome, #code) > .hintbar { bottom: max(.4rem, var(--sa-b)); }
  :where(#stall .mascot-anchor) { top: -4.6rem; width: 5rem; height: 4.6rem; }
  .screen > .mascot-anchor[data-mascot-anchor="stall"] { top: calc(var(--stall-t) - 4.6rem); width: 5rem; height: 4.6rem; }
  #select .select-body { align-content: start; --head-h: 4.7rem; --bar-h: 2.3rem; --chip-h: 2.3rem; --card-h: max(44px, 3.7rem); --ctl-h: 3.8rem; row-gap: .45rem; }
  #select .song-head { --head-h: 4.7rem; row-gap: .1rem; }
  #select #btn-play { min-height: 0; height: 3.8rem; }
  /* Play siempre a mano (como parado): la fila queda pegada abajo del puesto aunque el resto scrollee */
  #select .controls-row {
    position: sticky; bottom: calc(-1 * (.8rem + var(--ow-l))); z-index: 2;
    margin: 0 calc(-1 * (1rem + var(--ow-l))) calc(-1 * (.8rem + var(--ow-l))); padding: .6rem calc(1rem + var(--ow-l)) calc(.8rem + var(--ow-l));
    background: linear-gradient(180deg, rgb(238 229 210 / 0), rgb(238 229 210 / .97) 1rem);
  }
  .menu-top { top: calc(var(--sa-t) + 1.5dvh); }

  /* ------------------------------------------------ el notch (iPhone acostado): nada importante debajo */
  #hud .song-plate { left: calc(1.5vw + var(--sa-l)); }
  #hud > .mascot-anchor[data-mascot-anchor="hud"] { left: calc(1rem + var(--sa-l)); }
  #hud .dock { right: var(--sa-r); }
  .pause-sheet { right: calc(1.5vw + var(--sa-r)); }
  #results .results-board { left: calc(2.5vw + var(--sa-l)); }
  body:not([data-shot="menu"]) #welcome .ema, body:not([data-shot="menu"]) #code .notice { left: calc(5vw + var(--sa-l)); }
  #welcome > .hintbar, #code > .hintbar { left: calc(5vw + var(--sa-l)); }
  .menu-top { left: calc(1.5vw + var(--sa-l)); }
  #error { left: calc(2vw + var(--sa-l)); }

  /* ------------------------------------------------ partida */
  .tp-star { left: calc(8.6rem + var(--sa-l)); bottom: calc(1rem + var(--sa-b)); width: 4rem; height: 4rem; }   /* a la derecha del bichito */
  #hud #section-toast { right: calc(1.5vw + 3.6rem + var(--sa-r)); }
  /* el aviso del principio, debajo de la pausa (arriba se cortaba contra el borde) */
  #hud #section-toast.hint { top: calc(var(--sa-t) + 4.2rem); bottom: auto; }
  /* el juicio, más chico: en el riel ancho de la compu entra; acá pisaba el puntaje del racimo de la derecha */
  #judge-host { --fs-judge: 2.1rem; --fs-judge-s: 1.85rem; }
  .tp-pause { width: 2.7rem; height: 2.7rem; }
  #hud .lyrics { width: min(34rem, 97vw - 40rem); }
  .pause-sheet { top: auto; bottom: max(.6rem, var(--sa-b)); max-height: calc(100dvh - var(--sa-t) - max(.6rem, var(--sa-b)) - .6rem); }

  /* resultados: ver "RESULTADOS en el celu", al final */
}

/* ============================================================================ RESULTADOS en el celu (parado y acostado)
   Todo a la vista sin scroll (antes había que bajar 300-490 px y "Keep practicing" se salía por los costados), sin
   perder nada de lo que informa: veredicto, canción, corona, puntaje (+ diferencia y "New high score"), estrellas (o la
   foto de derrota), la barra y los seis números (Perfect, Great, Good, Missed, precisión con su anillo, mejor racha), el
   timing, la nota de No Fail, el puesto y los dos botones. Las piezas se compactan (chips en vez de tarjetas grandes);
   el veredicto se achica con el ancho del tablero (cqi: el tablero es el contenedor). Parado: el tablero se apoya abajo
   con un alto de diseño y Aisu queda arriba; acostado: dos columnas. */
@media (max-aspect-ratio: 4/5), (max-height: 540px) {
  #results .results-board {
    --pad-x: .9rem;
    overflow: visible; scrollbar-gutter: auto; padding: 0 var(--pad-x) .75rem;
    grid-template-rows: none; grid-auto-rows: auto; align-content: space-between; row-gap: .5rem;
    box-shadow: .35rem .4rem 0 0 var(--red), .35rem .4rem 0 var(--ow-l) var(--ink);
  }
  #results[data-tier="failed"] .results-board { box-shadow: .35rem .4rem 0 0 var(--cobalt-deep), .35rem .4rem 0 var(--ow-l) var(--ink); }

  /* veredicto: una línea, siempre entera */
  #results .res-head { height: 4.2rem; margin-top: -.5rem; }
  #results #res-verdict, #results #res-verdict[data-size] { font-size: min(3.3rem, 10.5cqi); white-space: nowrap; }
  #results #res-verdict[data-art] { zoom: .58; }
  #results .res-head__tw { display: none; }
  #results[data-tier="keep"] .res-head__burst { margin-inline: -1rem; }
  #results .res-fw { top: 0; height: 12rem; }

  /* la canción: portada chica, nombre, dificultad y modo */
  /* (sin min-height 0: la grilla la aplastaba y la línea de artista y BPM quedaba bajo los festones; abajo, el lugar
     de los festones) */
  #results .res-side.band { grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; min-height: auto; margin: 0 calc(-1 * var(--pad-x)) .55rem; padding: .45rem .9rem .4rem .8rem; }
  #results .res-cover-wrap, #results .res-cover-wrap:not([data-banner]) { width: 5.4rem; height: 3.04rem; margin: -.35rem 0 -.25rem; }
  #results .res-cover-wrap[data-banner] { width: 6.6rem; height: auto; margin: -.6rem 0 -.45rem -.1rem; }
  #results .res-cover-wrap .tape { left: -1rem; width: 2.4rem; }
  #results .res-song-info { gap: .2rem; }
  /* el nombre entero: hasta dos líneas en vez de cortarse con "…" */
  #results #res-song {
    font-size: 1.35rem; line-height: 1.05; white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  #results .res-tags { gap: .3rem .35rem; }
  #results .res-tags__heat { width: 1.25rem; height: 1.25rem; }
  #results .res-tags .pill { min-height: 1.35rem; padding-block: 0; }
  /* "Full combo!": un sticker colgado de la esquina de abajo a la derecha de la franja (en una columna propia le robaba
     el ancho al nombre y la franja crecía a cinco renglones); las estrellas bajan un poco para dejarle lugar */
  #results .res-side.band { grid-template-columns: auto minmax(0, 1fr); }
  #results #res-crown {
    position: absolute; right: .55rem; bottom: -1.05rem; z-index: 3; grid-column: auto; margin: 0; padding: .2rem .5rem;
    letter-spacing: .04em; rotate: -3deg;
  }
  #results #res-crown::before { width: 2.6rem; height: 2.2rem; left: auto; right: -.5rem; translate: 0 0; rotate: 12deg; }
  #results #res-crown::after { top: -.6rem; width: 5rem; }
  #results:has(#res-crown:not([hidden])) #res-stars { margin-top: 1.25rem; }

  /* puntaje y estrellas en una fila */
  #results .res-score-row { justify-self: start; margin: .55rem 0 0; }
  #results .res-score-box { min-width: 0; height: 3.4rem; gap: .6rem; padding: 0 1rem 0 .4rem; }
  #results .res-score-box__label { margin-block: .4rem; padding: 0 .55rem; }
  #results #res-score { font-size: 2.3rem; }
  /* "vs best" cuelga debajo de la píldora (no sobre los números): la fila deja su lugar sólo cuando aparece */
  #results #res-delta { left: 2.6rem; bottom: -1.35rem; }
  #results .res-score-row:has(#res-delta:not([hidden])) { margin-bottom: .95rem; }
  #results #res-badge { right: -1.2rem; top: -1rem; font-size: 1rem; padding-block: .2rem; }
  #results #res-stars { justify-self: end; margin: .55rem 0 0; padding: .2rem 0 0; }
  #results #res-stars span { width: 1.95rem; }
  #results #res-stars span:nth-child(1), #results #res-stars span:nth-child(5) { width: 1.65rem; translate: 0 .3rem; }
  #results #res-stars span:nth-child(2), #results #res-stars span:nth-child(4) { width: 1.95rem; translate: 0 .08rem; }
  #results #res-stars span:nth-child(3) { width: 2.3rem; }
  #results .res-fail { justify-self: end; margin: .4rem 0 0; }
  #results .res-fail img { width: 7.4rem; height: 4.15rem; }
  #results .res-fail__cap { margin-top: -.8rem; padding: .15rem .55rem; font-size: 1rem; }

  /* la barra y los seis números en 3 × 2 */
  #results .res-mid { margin-top: .2rem; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1rem auto auto; }
  #results #res-bar { grid-area: 1 / 1 / 2 / 4; }
  #results #res-bar::after { top: .12rem; height: .2rem; }
  #results .res-grid { grid-area: 1 / 1 / 4 / 4; }
  #results .res-cell--perfect { grid-area: 2 / 1; } #results .res-cell--great { grid-area: 2 / 2; } #results .res-cell--acc { grid-area: 2 / 3; }
  #results .res-cell--good { grid-area: 3 / 1; } #results .res-cell--miss { grid-area: 3 / 2; } #results .res-cell--combo { grid-area: 3 / 3; }
  /* cada juicio: la etiqueta arriba; el porcentaje y el número abajo (entra en cualquier ancho) */
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) { column-gap: .3rem; padding: .35rem .45rem .5rem; box-shadow: 0 .2rem 0 var(--ink); }
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dt { grid-area: 1 / 1 / 2 / 3; justify-self: start; padding: .08rem .38rem .1rem; font-size: max(.85rem, 12px); }
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss)::before { grid-area: 2 / 1; align-self: end; justify-self: start; margin-bottom: .15rem; }
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dd { grid-area: 2 / 2; margin-top: .15rem; font-size: 1.65rem; }
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss)::after { height: .3rem; }
  /* precisión: la etiqueta arriba; el número y el anillo chico abajo */
  #results .res-cell--acc {
    display: block; position: relative; padding: .35rem .45rem .45rem;
    border: var(--ow) solid var(--ink); border-radius: var(--r-m); box-shadow: 0 .2rem 0 var(--ink); background: var(--paper);
  }
  #results .res-cell--acc dt { position: static; text-align: left; letter-spacing: .02em; }
  #results #res-ring { --ring: 1.9rem; left: auto; right: .45rem; top: auto; bottom: .4rem; translate: none; z-index: 0; box-shadow: 0 .15rem 0 var(--ink); }
  #results .res-cell--acc dd { position: static; translate: none; margin-top: .2rem; text-align: left; font-size: 1.5rem; }
  /* mejor racha: la llama, la etiqueta, y abajo el número con "of N" al lado */
  #results .res-cell--combo { grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .3rem; padding: .35rem .45rem .45rem .4rem; box-shadow: 0 .2rem 0 var(--ink); }
  #results .res-cell--combo::before { grid-area: 1 / 1 / 3 / 2; width: 1.35rem; height: 1.65rem; }
  #results .res-cell--combo dt { grid-area: 1 / 2 / 2 / 4; letter-spacing: .02em; line-height: 1.05; }
  #results .res-cell--combo dd { grid-area: 2 / 2; font-size: 1.5rem; }
  #results .res-cell--combo::after { grid-area: 2 / 3; position: static; align-self: end; justify-self: end; margin-bottom: .15rem; white-space: nowrap; }

  /* timing: el medidor y la frase en una tarjeta baja (sin min-height 0: una caja que no entra no se aplasta, se ve) */
  #results .res-timing-row { grid-template-columns: auto minmax(0, 1fr); gap: .3rem .6rem; min-height: auto; margin-top: .1rem; padding: .35rem .7rem .4rem .45rem; box-shadow: 0 .2rem 0 var(--ink); }
  /* sin la etiqueta "Timing": la frase ya empieza con "Timing:" (así el medidor entra entero en cualquier ancho) */
  #results .res-timing-row { grid-template-columns: minmax(0, 1fr); }
  #results .res-timing-row::before { display: none; }
  #results #res-meter { gap: .35rem; justify-self: start; }
  #results .res-meter__track { width: 8.5rem; height: .8rem; }
  #results .res-meter__mark { width: 1.1rem; height: 1.1rem; transform: translateX(calc(var(--off, 0) * 3.7rem)); }
  #results #res-timing { grid-column: 1 / -1; font-size: var(--fs-small); line-height: 1.25; }

  /* nota de No Fail y puesto: una línea chica cada uno */
  #results #res-note { min-height: auto; gap: .6rem; margin-top: 0; padding: .3rem .6rem .3rem .45rem; font-size: var(--fs-small); line-height: 1.25; }
  #results #res-note::before { padding: .2rem .45rem .18rem; font-size: max(.9rem, 12px); }
  /* en una fila: el sello o la cara, el texto (envuelve adentro) y el botón de reintentar al final */
  #results #res-rank { flex-wrap: nowrap; min-height: auto; gap: .55rem; margin-top: 0; padding: .3rem .55rem .3rem .45rem; font-size: var(--fs-small); line-height: 1.2; box-shadow: 0 .2rem 0 var(--ink); }
  #results #res-rank button { min-height: 44px; padding-inline: .8rem; }
  #results #res-rank .res-rank__text { flex: 1 1 auto; min-width: 0; }
  #results #res-rank::before { width: 2.2rem; height: 2.2rem; }
  #results #res-rank:not(.ok, .warn)::before { width: 1.9rem; height: 1.9rem; margin: .15rem; }
  #results #res-rank.ok::before { width: 3.2rem; height: 3.2rem; margin: -.4rem 0; padding-bottom: .7rem; letter-spacing: -.02em; background-size: .75rem auto, auto; }
  #results #res-rank.warn::before { width: 2rem; height: 2rem; margin: .1rem; }
  #results #res-rank b { font-size: 1.25rem; }
  #results #res-rank .res-rank__medal { width: 2.4rem; height: 2.6rem; margin: -.3rem 0; }

  /* los botones */
  #results .res-actions { position: static; margin: .35rem 0 0; padding: 0; gap: .6rem; background: none; }
  #results .res-actions > button { flex: 1 1 0; min-height: max(46px, 3.4rem); padding-inline: .8rem; font-size: 1.15rem; justify-content: center; }
}

/* parado: el tablero apoyado abajo con un alto de diseño (la cámara deja a Aisu en el tercio de arriba) */
@media (max-aspect-ratio: 4/5) {
  #results {
    --res-h: 42.5rem;
    --res-top: max(calc(var(--sa-t) + 5rem), calc(100dvh - max(.5rem, var(--sa-b)) - var(--res-h)));
  }
  #results .results-board {
    left: calc(2.5vw + var(--sa-l)); right: calc(2.5vw + var(--sa-r)); width: auto;
    top: var(--res-top); bottom: max(.5rem, var(--sa-b)); height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "band band" "score stars" "mid mid" "timing timing" "note note" "rank rank" "acts acts";
  }
  #results > .mascot-anchor { left: auto; right: calc(4vw + var(--sa-r)); top: calc(var(--res-top) - 6.2rem); width: 5.2rem; height: 6.2rem; }
}
/* parado y bajo (≤ 600 px, el iPhone SE de 4"): el tablero empieza a 5 rem del borde y el bichito de 7,5 rem (parado
   sobre el tablero) se cortaba arriba: más chico, entra entero */
@media (max-aspect-ratio: 4/5) and (max-height: 600px) {
  #results > .mascot-anchor { --mascot-size: 5; }
}

/* acostado: dos columnas (veredicto, canción, puntaje, estrellas y botones | la barra, los números, timing, nota, puesto) */
@media (min-aspect-ratio: 4/5) and (max-height: 540px) {
  /* más ancho que en la compu (con 300 px no entraban las dos columnas): Aisu, a la derecha, conserva ~9 rem */
  #results { --res-w: min(46rem, 100vw - 5vw - var(--sa-l) - var(--sa-r) - 9rem); }
  #results .results-board {
    left: calc(2.5vw + var(--sa-l)); top: calc(var(--sa-t) + .7rem); bottom: max(.5rem, var(--sa-b)); height: auto; width: var(--res-w);
    column-gap: 1rem; padding-top: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: "head band" "score mid" "stars mid" "note mid" "rank mid" "acts timing";
    align-content: start;
  }
  #results .res-head { height: 3.6rem; }
  /* la canción, arriba a la derecha (al lado del veredicto), sin la franja de borde a borde */
  #results .res-side.band { align-self: start; margin: .5rem 0 .55rem; border-radius: var(--r-m); border: var(--ow) solid var(--ink); padding: .35rem .6rem .3rem; }
  #results .res-side.band::after { left: var(--r-m); right: var(--r-m); }
  #results #res-note { align-self: start; }
  #results #res-verdict, #results #res-verdict[data-size] { font-size: min(2.8rem, 5.4cqi); }
  #results #res-verdict[data-art] { zoom: .48; }
  #results .res-side.band { margin-right: 0; border-top-right-radius: var(--r-m); border-bottom-right-radius: var(--r-m); }
  #results .res-cover-wrap, #results .res-cover-wrap:not([data-banner]) { width: 4.4rem; height: 2.48rem; }
  #results .res-cover-wrap[data-banner] { width: 5.4rem; }
  #results #res-song { font-size: 1.2rem; }
  #results .res-score-row { justify-self: start; }
  #results #res-stars, #results .res-fail { justify-self: start; }
  #results .res-actions { align-self: end; }
  /* los números en 2 × 3: la columna es angosta para tres por fila */
  #results .res-mid { align-self: start; margin-top: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1rem auto auto auto; }
  #results #res-bar { grid-area: 1 / 1 / 2 / 3; }
  #results .res-grid { grid-area: 1 / 1 / 5 / 3; }
  #results .res-cell--perfect { grid-area: 2 / 1; } #results .res-cell--great { grid-area: 2 / 2; }
  #results .res-cell--good { grid-area: 3 / 1; } #results .res-cell--miss { grid-area: 3 / 2; }
  #results .res-cell--acc { grid-area: 4 / 1; } #results .res-cell--combo { grid-area: 4 / 2; }
  #results .res-timing-row, #results #res-rank { align-self: start; }
  #results .res-meter__track { width: 6.5rem; }
  #results .res-meter__mark { transform: translateX(calc(var(--off, 0) * 2.7rem)); }
  #results > .mascot-anchor { left: calc(2.5vw + var(--sa-l) + var(--res-w) + .5rem); top: auto; bottom: max(.3rem, var(--sa-b)); width: 4.4rem; height: 5.2rem; }
}
/* acostado y muy bajo (≤ 360 px, el iPhone SE de 4"): sin la portada (decorativa: el nombre está al lado) y más justo */
@media (min-aspect-ratio: 4/5) and (max-height: 360px) {
  #results .res-cover-wrap { display: none; }
  #results .res-side.band { grid-template-columns: minmax(0, 1fr) auto; padding: .2rem .5rem .15rem; margin-bottom: .45rem; }
  #results .res-song-info { gap: .1rem; }
  #results .res-tags { gap: .2rem .3rem; }
  #results .res-tags .pill { min-height: 1.2rem; }
  #results #res-note::before { display: none; }           /* el sello repite lo que dice la frase ("No Fail was on…") */
  #results .res-score-row { margin-top: .2rem; }
  #results .res-score-box { height: 3rem; }
  #results #res-score { font-size: 2rem; }
  #results #res-stars { margin-top: .15rem; }
  #results .res-timing-row { padding-block: .25rem .3rem; }
  #results .results-board {
    row-gap: .2rem; padding: .3rem var(--pad-x) 0;
    grid-template-areas: "head band" "score mid" "stars mid" "note mid" "timing mid" "acts rank";   /* el timing, a la izquierda */
    /* red de seguridad del caso más chico (4" acostado + un error largo de envío): si no entra, scrollea; los botones
       nunca quedan afuera. En lo normal entra todo y no hay scroll. */
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  #results .res-head { height: 3.3rem; margin-top: 0; }
  #results .res-mid { gap: .35rem; margin-top: .3rem; }
  /* celdas más bajas: el número un poco más chico, menos relleno */
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss, .res-cell--acc, .res-cell--combo) { padding-block: .25rem .35rem; }
  #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dd { margin-top: 0; font-size: 1.35rem; }
  #results :is(.res-cell--acc, .res-cell--combo) dd { margin-top: 0; font-size: 1.3rem; }
  #results #res-ring { --ring: 1.6rem; bottom: .3rem; }
  #results .res-actions > button { min-height: 44px; }
}
/* acostado y angosto (≤ 760 px de ancho, p. ej. 659 × 393): con 9 rem para Aisu el tablero quedaba en ~520 px, la
   franja se partía en cinco renglones y los botones quedaban afuera de la pantalla. El tablero toma casi todo el ancho
   (la mascota, más chica, al costado), el artista y el BPM en un renglón propio (con "…" si no entra), la nota sin el
   sello (la frase ya dice "No Fail was on…") y la racha sin la llamita (así "of 199" no se monta sobre el número). */
@media (min-aspect-ratio: 4/5) and (max-height: 540px) and (max-width: 760px) {
  #results { --res-w: min(46rem, 100vw - 3vw - var(--sa-l) - var(--sa-r) - 4.6rem); }
  #results .results-board { left: calc(1.5vw + var(--sa-l)); }
  /* los pies van al centro del ancla y el dibujo ocupa ~7 rem a su derecha: pegado al tablero, sin salirse de la pantalla */
  #results > .mascot-anchor { left: min(calc(1.5vw + var(--sa-l) + var(--res-w) + 1.5rem), calc(100vw - var(--sa-r) - 9rem)); width: 4rem; height: 4.8rem; }
  #results .res-tags__by { flex: 1 0 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #results #res-note::before { display: none; }
  #results .res-cell--combo::before { display: none; }
  #results .res-cell--combo dt { grid-column: 1 / 4; }
  #results .res-cell--combo dd { grid-column: 1 / 3; }
}
/* parado y angosto (≤ 360 px de ancho): un poco menos de aire entre las piezas; la racha sin la llamita (decorativa:
   así "of 199" entra al lado del número) */
@media (max-aspect-ratio: 4/5) and (max-width: 360px) {
  #results .results-board { row-gap: .4rem; }
  #results .res-mid { gap: .4rem; }
  #results .res-cell--combo::before { display: none; }
  #results .res-cell--combo dt { grid-column: 1 / 4; }
  #results .res-cell--combo dd { grid-column: 1 / 3; }
}