/* 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 .7rem/1 var(--font-body); letter-spacing: .12em; 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. 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; }


/* ============================================================================ PORTRAIT */
@media (max-aspect-ratio: 4/5) {
  html { font-size: clamp(11px, 3.2vw, 16px); }
  :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;
  }
  .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; }
  .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: la planilla abajo, Aisu arriba */
  #results .results-board {
    --pad-x: 1rem;
    left: calc(2.5vw + var(--sa-l)); right: calc(2.5vw + var(--sa-r)); width: auto; top: 29dvh; height: auto; bottom: max(.6rem, var(--sa-b));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; padding-top: 1rem;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto;
    grid-template-areas: "head" "band" "score" "stars" "mid" "timing" "note" "rank" "acts";
    box-shadow: .35rem .4rem 0 0 var(--red), .35rem .4rem 0 var(--ow-l) var(--ink);
  }
  #results .res-head { margin-top: 0; }
  #results .res-side.band { grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; padding: .5rem 1rem .55rem .9rem; }
  #results .res-cover-wrap[data-banner] { width: 8.4rem; margin: -1.1rem 0 -.6rem -.2rem; }
  #results .res-cover-wrap:not([data-banner]) { width: 7rem; height: 3.94rem; }
  #results #res-song { font-size: 1.55rem; }
  #results #res-crown { grid-column: 1 / -1; justify-self: end; margin: .9rem 0 .15rem; }
  #results .res-score-box { min-width: 0; }
  #results .res-score-row { justify-self: center; margin: .9rem 0 .1rem; }
  #results #res-stars, #results .res-fail { justify-self: center; }
  #results .res-actions { position: sticky; bottom: -1.35rem; margin-inline: calc(-1 * var(--pad-x)); padding: .7rem var(--pad-x) 1rem; background: linear-gradient(180deg, rgb(247 240 226 / 0), #F2E8D4 35%); }
  #results .res-actions > button { flex: 1 1 0; min-height: 3.4rem; padding-inline: 1rem; font-size: 1.2rem; justify-content: center; }
  #results > .mascot-anchor { left: auto; right: calc(4vw + var(--sa-r)); top: calc(30dvh - 6.6rem); width: 5.5rem; height: 6.6rem; }

  /* ------------------------------------------------ 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: 34dvh; max-width: 88vw; }
  #hud #endcap { top: 27dvh; }
  #hud #countdown { top: 27dvh; }
  #hud #combo { left: 50%; right: auto; translate: -50% 0; top: 22dvh; }
  #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(9.5px, 2.75dvh, 13px); }
  :root {
    --fs-small: max(.875rem, 10.5px);
    --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; }
  #select .song-head { --head-h: 5.4rem; }
  .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(7.8rem + var(--sa-l)); bottom: calc(1rem + var(--sa-b)); width: 4rem; height: 4rem; }
  #hud #section-toast { right: calc(1.5vw + 3.6rem + var(--sa-r)); }
  .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: la planilla scrollea, los botones quedan abajo */
  #results .results-board { top: calc(var(--sa-t) + 2.5dvh); height: auto; bottom: max(.5rem, var(--sa-b)); overflow-y: auto; overscroll-behavior: contain; padding-top: 1rem; }
  #results > .mascot-anchor { left: calc(2.5vw + var(--sa-l) + var(--res-w) - 5.4rem); top: calc(var(--sa-t) + 1dvh); width: 5rem; height: 6rem; }
  #results .res-actions { position: sticky; bottom: -1.35rem; margin: .8rem calc(-1 * var(--pad-x)) 0; padding: .6rem var(--pad-x) 1rem; background: linear-gradient(180deg, rgb(247 240 226 / 0), #F2E8D4 35%); }
  #results .res-actions > button { min-height: 3.2rem; font-size: 1.2rem; }
  @container (max-width: 34rem) {
    #results .res-side.band { grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; padding: .5rem 1rem .55rem .9rem; }
    #results .res-cover-wrap[data-banner] { width: 8.4rem; margin: -1.1rem 0 -.6rem -.2rem; }
    #results #res-song { font-size: 1.55rem; }
    #results #res-crown { grid-column: 1 / -1; justify-self: end; margin: .9rem 0 .15rem; }
    #results .res-score-box { min-width: 0; }
  }
}