/* La tarjeta usa los mismos controles y vistas. Todas las reglas quedan dentro del modo embed. */
/* Las variables derivadas de tokens.css se resuelven en :root, antes de heredarse al body. */
html[data-embed="x"] {
  font-size: clamp(10px, min(2.5vw, 2.5vh), 14px);
  --stall-l: 1rem; --stall-r: 1rem; --stall-t: max(4.5rem, calc(100vh - 30.5rem)); --stall-b: 6.5rem;
  --res-w: calc(100vw - 2rem);
}
html[data-embed="x"] #title { --embed-logo: min(76vw, 54vh); --embed-title-top: 2vh; }
html[data-embed="x"] #title-logo {
  --lk: calc(var(--embed-logo) / 34); left: 4.5vw; top: var(--embed-title-top); translate: none;
  width: var(--embed-logo); height: calc(var(--embed-logo) * 22 / 34);
}
html[data-embed="x"] #title .tagline {
  left: calc(4.5vw + var(--embed-logo) / 2); top: calc(var(--embed-title-top) + var(--embed-logo) * 22 / 34 + .4rem);
  font-size: 1.1rem; padding-inline: 2rem 1rem;
}
html[data-embed="x"] #btn-start {
  left: calc(4.5vw + var(--embed-logo) / 2); translate: -50% 0;
  top: calc(var(--embed-title-top) + var(--embed-logo) * 22 / 34 + 4.5rem); bottom: auto;
  width: min(23rem, 80vw, calc(var(--embed-logo) + 9vw - 2rem)); height: 4rem; min-height: 48px; font-size: 1.35rem;
}
html[data-embed="x"] #title .prompt-alt {
  left: calc(4.5vw + var(--embed-logo) / 2); translate: -50% 0; bottom: auto;
  top: calc(var(--embed-title-top) + var(--embed-logo) * 22 / 34 + 9rem); width: min(23rem, 80vw, calc(var(--embed-logo) + 9vw - 2rem));
  font-size: .75rem;
}
html[data-embed="x"] #title .np {
  display: grid;
  left: 1rem; bottom: 5rem; translate: none; width: min(24rem, calc(100vw - 2.5rem));
  grid-template-columns: 5.2rem minmax(0, 1fr); gap: .6rem; height: 5.8rem; padding: .45rem .7rem;
}
html[data-embed="x"] #title :is(.np__disc, .np__cover) { width: 4.2rem; height: 4.2rem; }
html[data-embed="x"] #title .np__vinyl { left: 1.9rem; top: .25rem; width: 3.7rem; height: 3.7rem; }
html[data-embed="x"] #title .np::after { left: 6rem; top: .5rem; bottom: .5rem; }
html[data-embed="x"] #title .np__song { font-size: 1.1rem; }
html[data-embed="x"] #title :is(.np__kicker, .np__meta, .np__sound) { font-size: .75rem; }
html[data-embed="x"] #title .mascot-anchor {
  display: block;
  left: calc(1rem + min(24rem, 100vw - 2.5rem) - 4rem); bottom: 10.5rem; width: 3.4rem; height: 4rem;
}
html[data-embed="x"] #title .title-foot { left: 1rem; bottom: 2.8rem; max-width: calc(100vw - 2rem); translate: none; }
html[data-embed="x"] #title .title-foot__chip:not([hidden]) { display: inline-flex; }
html[data-embed="x"] #embed-open {
  position: fixed; z-index: 9; right: .7rem; bottom: .5rem; padding: .35rem .7rem;
  color: var(--ivory); background: var(--night); border: 1px solid var(--ivory); border-radius: var(--r-pill);
  font: 800 12px/1.4 var(--font-body); text-decoration: none;
}
html[data-embed="x"] #embed-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
html[data-embed="x"] :is(#btn-board, #btn-profile, #profile-group, #song-list, #sd-best, .hint--full, .switch--full, .narrow-pill) { display: none !important; }
html[data-embed="x"] #select .menu-top { top: .6rem; left: 1rem; right: 1rem; }
html[data-embed="x"] #select .stall__sign { display: none; }
html[data-embed="x"] #select .stall__body { padding: .8rem 1rem; overflow-y: auto; }
html[data-embed="x"] #select .select-body {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  gap: 1rem; min-height: 0; align-content: start; padding: .5rem; overflow: visible;
}
html[data-embed="x"] #select .song-head { --head-h: 5rem; grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; }
html[data-embed="x"] #select .song-info { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(3.2rem, auto); align-content: center; }
html[data-embed="x"] #select .stats { display: none; }
html[data-embed="x"] #select #sd-title { font-size: 1.6rem; }
html[data-embed="x"] #select .dif-head { flex-wrap: wrap; gap: .6rem; }
html[data-embed="x"] #select .dif-field { grid-template-rows: auto auto; gap: .6rem; }
html[data-embed="x"] #select #difficulty { min-height: 44px; }
html[data-embed="x"] #select #difficulty button { min-height: 48px; padding: .3rem; }
html[data-embed="x"] #select .controls-row { grid-template-columns: 1fr; }
html[data-embed="x"] #select #modes { display: none; }
html[data-embed="x"] #select #btn-play { grid-column: 1; grid-row: 1; width: 100%; min-height: 48px; height: 4rem; }
html[data-embed="x"] #select > .hintbar { left: 1rem; right: 1rem; bottom: 3.1rem; overflow: hidden; justify-content: center; gap: .8rem; }
html[data-embed="x"] #select > .hintbar :is(.hint--go, .hint--pad, [data-prio="2"]) { display: none; }
html[data-embed="x"] #settings .stall__body { overflow-y: auto; }
html[data-embed="x"] #settings .settings-body { display: flex; flex-direction: column; }
html[data-embed="x"] #settings > .hintbar { left: 1rem; right: 1rem; bottom: 3.1rem; }
html[data-embed="x"] #pause .pause-sheet { inset: auto 1rem 3.4rem; width: auto; max-height: calc(100vh - 5rem); }
html[data-embed="x"] #pause .pause-sheet .band { min-height: 3rem; }
html[data-embed="x"] #pause .pause-sheet .band h2 { font-size: 1.7rem; }
html[data-embed="x"] #pause .pause-sheet > :not(.band) { margin-block: 0; }
html[data-embed="x"] #pause .menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-embed="x"] #pause .menu button { padding-inline: .4rem; font-size: 1rem; min-height: 44px; }
html[data-embed="x"] #pause .pause-progress { display: none; }
html[data-embed="x"] #results { --res-w: calc(100vw - 2rem); }
html[data-embed="x"] #results > .mascot-anchor {
  --mascot-size: 3; left: 50%; right: auto; top: auto; bottom: .4rem; translate: -50% 0; width: 4rem; height: 3rem;
}
html[data-embed="x"] #results .results-board {
  --pad-x: 1rem; inset: .8rem 1rem 3.4rem; width: auto; 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";
  grid-template-rows: none; grid-auto-rows: auto; align-content: start; gap: .2rem .5rem;
  padding: .4rem var(--pad-x); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: auto; scroll-padding-bottom: 4.5rem;
}
html[data-embed="x"] #results .res-head { height: 4rem; min-height: 4rem; margin-top: 0; }
html[data-embed="x"] #results #res-verdict { font-size: min(3rem, 8.5cqi); white-space: nowrap; }
html[data-embed="x"] #results #res-verdict[data-art] { zoom: .5; }
html[data-embed="x"] #results .res-side.band {
  grid-template-columns: auto minmax(0, 1fr); min-height: auto; gap: .7rem;
  margin: 0 calc(-1 * var(--pad-x)) .8rem; padding: .6rem .8rem;
}
html[data-embed="x"] #results .res-cover-wrap { width: 4.4rem; height: 2.5rem; margin: 0; }
html[data-embed="x"] #results .res-cover-wrap[data-banner] { width: 6rem; height: auto; margin: 0; }
html[data-embed="x"] #results #res-song { font-size: 1.2rem; line-height: 1.2; white-space: normal; }
html[data-embed="x"] #results .res-song-info { gap: .35rem; }
html[data-embed="x"] #results .res-tags { gap: .3rem; }
html[data-embed="x"] #results .res-tags__by { font-size: max(.75rem, 10px); letter-spacing: .04em; }
html[data-embed="x"] #results .res-tags .pill { min-height: 1.4rem; }
html[data-embed="x"] #results .res-score-row { margin: .2rem 0; max-width: 100%; }
html[data-embed="x"] #results .res-score-box { min-width: 0; max-width: 100%; height: 3.5rem; gap: .5rem; padding-inline: .35rem .8rem; }
html[data-embed="x"] #results .res-score-box__label { margin-block: .35rem; padding-inline: .5rem; }
html[data-embed="x"] #results #res-score { font-size: 2.4rem; }
html[data-embed="x"] #results #res-stars { margin: 0; gap: 0; }
html[data-embed="x"] #results #res-stars span:nth-child(n) { width: 1.8rem; }
html[data-embed="x"] #results .res-fail { justify-self: end; margin: 0; }
html[data-embed="x"] #results .res-fail img { width: 7.5rem; height: 4.2rem; }
html[data-embed="x"] #results .res-fail__cap { margin-top: -.7rem; font-size: .9rem; padding: .1rem .4rem; }
html[data-embed="x"] #results .res-mid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: .7rem auto auto;
  margin-top: .2rem; gap: .4rem;
}
html[data-embed="x"] #results #res-bar { grid-area: 1 / 1 / 2 / 4; }
html[data-embed="x"] #results .res-grid { grid-area: 1 / 1 / 4 / 4; }
html[data-embed="x"] #results .res-cell--perfect { grid-area: 2 / 1; }
html[data-embed="x"] #results .res-cell--great { grid-area: 2 / 2; }
html[data-embed="x"] #results .res-cell--acc { grid-area: 2 / 3; }
html[data-embed="x"] #results .res-cell--good { grid-area: 3 / 1; }
html[data-embed="x"] #results .res-cell--miss { grid-area: 3 / 2; }
html[data-embed="x"] #results .res-cell--combo { grid-area: 3 / 3; }
html[data-embed="x"] #results .res-cell { min-width: 0; padding: .35rem .45rem; }
html[data-embed="x"] #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dt { grid-area: 1 / 1 / 2 / 3; font-size: max(.8rem, 11px); padding: .1rem .35rem; }
html[data-embed="x"] #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss)::before { grid-area: 2 / 1; }
html[data-embed="x"] #results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dd { grid-area: 2 / 2; font-size: 1.7rem; }
html[data-embed="x"] #results .res-cell--acc { display: block; position: relative; }
html[data-embed="x"] #results .res-cell--acc dt { position: static; text-align: left; }
html[data-embed="x"] #results .res-cell--acc dd { position: static; translate: none; text-align: left; font-size: 1.5rem; }
html[data-embed="x"] #results #res-ring { --ring: 1.6rem; top: auto; bottom: .4rem; left: auto; right: .4rem; translate: none; }
html[data-embed="x"] #results .res-cell--combo { grid-template-columns: auto minmax(0, 1fr); gap: .2rem; }
html[data-embed="x"] #results .res-cell--combo::before { grid-area: 1 / 1 / 3 / 2; width: 1.2rem; height: 1.5rem; }
html[data-embed="x"] #results .res-cell--combo dt { grid-area: 1 / 2; font-size: .75rem; }
html[data-embed="x"] #results .res-cell--combo dd { grid-area: 2 / 2; font-size: 1.5rem; }
html[data-embed="x"] #results .res-cell--combo::after { right: .35rem; bottom: .25rem; font-size: .65rem; }
html[data-embed="x"] #results .res-timing-row { min-height: auto; margin: 0; padding: .35rem .5rem; gap: .3rem; grid-template-columns: auto minmax(0, 1fr); }
html[data-embed="x"] #results .res-timing-row::before { display: none; }
html[data-embed="x"] #results .res-meter__track { width: 8rem; }
html[data-embed="x"] #results #res-timing { grid-column: auto; font-size: .8rem; }
html[data-embed="x"] #results .res-actions { position: sticky; z-index: 4; bottom: -.5rem; margin: 0; gap: .6rem; background: var(--paper); padding-block: .5rem; }
html[data-embed="x"] #results .res-actions button { min-height: 44px; padding-inline: .6rem; font-size: 1.1rem; justify-content: center; }
html[data-embed="x"] #hud .song-plate { left: .6rem; top: .6rem; min-width: 0; max-width: 48vw; width: 48vw; }
html[data-embed="x"] #hud .song-plate__meta { display: none; }
html[data-embed="x"] #hud #hud-song { font-size: 1rem; }
html[data-embed="x"] #hud .lyrics { top: .6rem; right: .6rem; left: auto; translate: none; width: 42vw; min-height: 0; padding: .4rem; }
html[data-embed="x"] #hud #lyric-now { font-size: 1.1rem; }
html[data-embed="x"] #hud #lyric-next { display: none; }
html[data-embed="x"] #hud .dock { right: .8rem; bottom: 3.8rem; width: 9rem; height: 15rem; }
html[data-embed="x"] #hud .dock__streak-info { display: none; }
html[data-embed="x"] #hud .dock > .mascot-anchor { display: none; }
html[data-embed="x"] #hud #hud-score { font-size: 2.1rem; }
html[data-embed="x"] #hud .dock__score { left: auto; right: 0; top: 0; bottom: auto; width: auto; text-align: right; }
html[data-embed="x"] #hud .dock__streak { left: auto; right: 0; bottom: 0; }
html[data-embed="x"] #hud .mult.medal { width: 4.6rem; height: 4.6rem; }
html[data-embed="x"] #hud #hud-streak { font-size: 1.8rem; }
html[data-embed="x"] #hud .dock__star { scale: .7; transform-origin: right bottom; }
html[data-embed="x"] #hud .hintbar { display: none; }
html[data-embed="x"] #hud #section-toast { display: none; }
html[data-embed="x"] #hud .rock__cap { display: none; }
html[data-embed="x"] #touchpad .tp-pause { top: 5.5rem; display: grid; width: 44px; height: 44px; }

@media (max-height: 400px) and (min-aspect-ratio: 4/3) {
  html[data-embed="x"] { --stall-t: 9vh; }
  html[data-embed="x"] #title { --embed-logo: min(40vw, 48vh); }
  html[data-embed="x"] #title .np { left: auto; right: 1rem; bottom: 5rem; width: 38vw; }
  html[data-embed="x"] #title .mascot-anchor { left: auto; right: 1.5rem; }
  html[data-embed="x"] #select .stall__body { padding: .6rem 1rem; }
  html[data-embed="x"] #select .select-body { min-height: 0; padding: 0; gap: .35rem; }
  html[data-embed="x"] #select .song-head { --head-h: 3rem; grid-template-columns: 3rem minmax(0, 1fr); }
  html[data-embed="x"] #select #btn-play { height: 48px; }
  html[data-embed="x"] #results .results-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "head band" "score mid" "stars mid" "note mid" "rank mid" "acts timing";
  }
  html[data-embed="x"] #results .res-side.band { margin: 0; border-radius: var(--r-m); }
  html[data-embed="x"] #results .res-head { align-self: center; }
  html[data-embed="x"] #results #res-stars { justify-self: start; }
  html[data-embed="x"] #results .res-actions { flex-wrap: wrap; }
  html[data-embed="x"] #results .res-actions button { flex: 1 1 100%; }
}

@media (max-width: 520px) {
  html[data-embed="x"] { --stall-t: max(4.5rem, calc(100vh - 35rem)); }
  html[data-embed="x"] #select #difficulty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
}

@media (max-width: 520px) and (max-height: 440px) {
  html[data-embed="x"] { --stall-t: 2rem; }
  html[data-embed="x"] #select .select-body { padding: 0; gap: .45rem; }
  html[data-embed="x"] #select .song-head { --head-h: 3.5rem; grid-template-columns: 3.5rem minmax(0, 1fr); }
}

@media (max-aspect-ratio: 4/5) {
  html[data-embed="x"] #hud .dock { left: 0; right: 0; top: 0; bottom: auto; height: 0; width: auto; }
  html[data-embed="x"] #hud .dock__score { top: 10rem; right: .8rem; bottom: auto; }
  html[data-embed="x"] #hud .dock__streak { top: 10rem; left: .6rem; right: auto; bottom: auto; scale: 1; }
  html[data-embed="x"] #hud .song-plate { left: 0; top: 0; width: 100%; max-width: none; }
  html[data-embed="x"] #hud #hud-song { display: none; }
  html[data-embed="x"] #hud .lyrics { top: 5rem; left: 50%; right: auto; translate: -50% 0; width: 90vw; }
  html[data-embed="x"] #hud .dock__star { scale: 1; }
  html[data-embed="x"] #pause .menu { grid-template-columns: 1fr; }
}