.advscene[data-p0l] .p0l-controles {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  pointer-events: auto;
}
.advscene[data-p0l] .p0l-controles button { flex: none; }
.advscene[data-p0l] .p0l-controles.p0l-suspendido { display: none; }
.advscene[data-p0l] .p0l-controles .p0l-retry[hidden] { display: none; }
.advscene[data-p0l] .p0l-retry { max-width: 9rem; white-space: normal; }
.advscene[data-p0l] .p0l-controles button:focus-visible {
  outline: 2px solid var(--gold2, #f4d485);
  outline-offset: 2px;
}
@media (max-width: 480px), (max-height: 520px) {
  .view.fullplace:has(.advscene[data-p0l-layout]) { overflow-y: auto; }
  .app .screen.advscreen:has(.advscene[data-p0l-layout]) {
    height: auto;
    min-height: 100%;
  }
  .app .scene.advscene[data-p0l-layout] {
    flex: 1 0 auto;
    min-height: 0;
    min-width: 0;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(230px, 1fr) auto;
    background: #142320;
  }
  .advscene[data-p0l-layout] > * { min-width: 0; }
  .app .scene.advscene[data-p0l-layout] canvas {
    display: block;
    grid-row: 2;
    height: 100%;
    min-height: 230px;
  }
  .advscene[data-p0l-layout] .advhead {
    position: relative;
    grid-row: 1;
    padding-bottom: 4px;
  }
  .advscene[data-p0l-layout] .advbot { position: relative; grid-row: 3; }
}
@media (min-width: 481px) and (max-height: 520px) {
  .advscene[data-p0l-layout] .advhead { grid-template-columns: minmax(0, 1fr) minmax(0, 59%); }
  .advscene[data-p0l-layout] .advhead .advwhere { flex-direction: row; align-items: center; }
  .advscene[data-p0l-layout] .advhead .advwhere h2 { flex: 1; min-width: 0; }
  .advscene[data-p0l-layout] .advhead .stagebtn { flex: none; max-width: 70%; }
  .advscene[data-p0l-layout] .advhead .ctl {
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
    gap: 4px;
  }
  .advscene[data-p0l-layout] .p0l-controles { display: contents; }
  .advscene[data-p0l-layout] .p0l-ayuda { pointer-events: auto; }
  .advscene[data-p0l-layout] .advbot { flex-wrap: wrap; }
  .advscene[data-p0l-layout] .advbot .party { flex-basis: 100%; order: 0; }
}
@media (max-width: 480px) {
  .advscene[data-p0l-layout] .advhead {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .advscene[data-p0l-layout] .advhead .stage,
  .advscene[data-p0l-layout] .advhead .ctl {
    grid-column: 1;
    min-width: 0;
  }
  .advscene[data-p0l-layout] .advhead .ctl {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 3px;
  }
  .advscene[data-p0l-layout] .p0l-controles { display: contents; }
  .advscene[data-p0l-layout] .p0l-controles.p0l-suspendido { display: none; }
  .advscene[data-p0l-layout] .p0l-ayuda { pointer-events: auto; }
  .advscene[data-p0l-layout] .p0l-retry {
    position: absolute;
    top: 100%;
    right: 8px;
  }
}

/* A01. Tres filas independientes: mando, encuentro y compañía. El lienzo
   responde a su ancho, sin heredar el alto intrínseco ni el del HUD. */
.view.fullplace:has(.advscene[data-a01]) { overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #a28b58 #142521; }
.app .screen.advscreen:has(.advscene[data-a01]) { height: auto; min-height: 100%; }
.app .scene.advscene[data-p0l-layout][data-a01] {
  display: grid; grid-template: auto auto auto / minmax(0,1fr); align-content: center;
  height: auto; min-height: 100%; flex: 1 0 auto; background: #142521;
}
.app .scene.advscene[data-p0l-layout][data-a01] canvas {
  display: block; grid-area: 2 / 1; width: 100%; height: auto; min-height: 0; aspect-ratio: 2 / 1;
  image-rendering: pixelated; border-block: 1px solid #546047;
}
.advscene[data-p0l-layout][data-a01] .advhead {
  position: relative; grid-area: 1 / 1; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 4px 8px; padding: 6px 8px;
  background: #1a3029; border-bottom: 1px solid #635738;
}
.advscene[data-a01] .advhead .advtop { grid-column: 1; min-height: 0; }
.advscene[data-a01] .advwhere { min-width: 0; flex-wrap: wrap; }
.advscene[data-a01] .advwhere h2 { white-space: normal; font-size: .82rem; }
.advscene[data-a01] .advwhere #routeBtn { min-height: 44px; padding: 0 8px; }
.advscene[data-a01] .advwhere #stageLabel { font-size: .88rem; }
.a01-encuentro-corto { display: none; }
.advscene[data-a01] .advhead .power,
.advscene[data-a01] .advhead .stage:not(:has(.replaynote)),
.advscene[data-a01] .advhead .stage .nodes { display: none; }
.advscene[data-a01] .advhead .stage { grid-row: 2; grid-column: 1 / -1; }
.advscene[data-a01] .advhead .stage .note2 { white-space: normal; font-size: .72rem; }
.advscene[data-a01] .advhead .ctl { grid-area: 1 / 2; justify-content: flex-end; align-self: center; flex-wrap: wrap; gap: 4px; }
.advscene[data-a01] .advhead .ctl button { height: auto; min-height: 44px; padding: 2px 6px; font-size: .82rem; }
.advscene[data-a01] .p0l-controles { display: contents; }
.advscene[data-a01] .advhead .ctl .status:not([data-auto]) { position: static; width: auto; font-size: .62rem; }
.advscene[data-a01] .p0l-ayuda { pointer-events: auto; }
.advscene[data-p0l-layout][data-a01] .advbot {
  position: relative; grid-area: 3 / 1; gap: 4px; padding: 6px 8px; background: #1a3029; border-top: 1px solid #635738;
}
.advscene[data-a01] .advbot .party { order: 0; gap: 3px; }
.advscene[data-a01] .advbot .advacts { flex-wrap: wrap; gap: 4px; }
.advscene[data-a01] .advbot .chest,.advscene[data-a01] .advbot .fmbtn { min-height: 44px; font-size: .82rem; }
.advscene[data-a01] .advbot .chest .ct b { font-size: .9rem; }
.advscene[data-a01] .advbot .chest .ct small { font-size: .68rem; }
.a01-volver-formacion { min-height: 44px; margin-bottom: 6px; font-size: .88rem; }
dialog#modal:has(.a01-ayuda-texto) { padding: 10px; }
dialog#modal .a01-ayuda-texto {
  font-size: .92rem; line-height: 1.35; text-align: left; max-height: 44dvh; overflow: auto; scrollbar-gutter: stable;
}
dialog#modal .a01-ayuda-texto p { font-size: inherit; line-height: inherit; }
dialog#modal:has(.a01-ayuda-texto) h2 { font-size: 1rem; }
dialog#modal .a01-ayuda-texto:focus-visible { outline: 2px solid var(--gold2); outline-offset: -2px; }
dialog#modal:has(.a01-ayuda-texto) #closeModal { font-size: .9rem; min-height: 44px; }
#mapPlace[data-a01-panel] .maphudbtn { font-size: .82rem; }
#mapPlace[data-a01-panel] .maptitle b { font-size: .82rem; white-space: normal; }
#mapPlace[data-a01-panel] .maptitle .mobj { font-size: .72rem; }
#mapPlace[data-a01-panel] .mapcard { max-height: min(45dvh, 300px); overflow-y: auto; }
#mapPlace[data-a01-panel] .mapcard :is(.mdhead h3, .mdrule, button) { font-size: .82rem; }
#mapPlace[data-a01-panel] .mapcard button { min-height: 44px; }
#formation[data-a01-panel] .fm-heading #fmTitle { font-size: .92rem; }
@media (min-width: 900px) {
  .app .scene.advscene[data-p0l-layout][data-a01] canvas { aspect-ratio: 2.18; }
}
@media (max-width: 650px) {
  .advscene[data-a01] .advhead .advtop { grid-row: 1; grid-column: 1 / -1; }
  .advscene[data-a01] .advhead .ctl { grid-area: 2 / 1 / 3 / -1; justify-content: flex-start; }
  .advscene[data-a01] .advhead .stage { grid-row: 3; }
  .advscene[data-a01] .advwhere { flex-direction: row; align-items: center; justify-content: space-between; }
  .advscene[data-a01] .advwhere h2 { flex: 1 1 110px; }
  .advscene[data-a01] .advbot { flex-direction: column; }
  .advscene[data-a01] .advbot .advacts { display: flex; width: 100%; order: 1; }
  .advscene[data-a01] .advbot .punit { min-height: 52px; }
  .advscene[data-a01] .advbot .punit .frame { width: 36px; height: 36px; }
  .advscene[data-a01] .advbot .punit .frame svg { width: 32px; height: 32px; }
}
@media (orientation: portrait) and (width < 900px) {
  .app .screen.advscreen:has(.advscene[data-a01]) { height: 100%; }
  .app .scene.advscene[data-p0l-layout][data-a01] {
    grid-template-rows: auto minmax(min(48vw, 240px), 1fr) auto;
    align-content: stretch;
    height: 100%;
  }
  .app .scene.advscene[data-p0l-layout][data-a01] canvas { height: 100%; aspect-ratio: auto; }
  .advscene[data-a01] .advwhere { flex-direction: row; align-items: center; justify-content: space-between; }
  .advscene[data-a01] .advwhere h2 { flex-basis: 8rem; overflow-wrap: anywhere; }
  .advscene[data-a01] .advbot { flex-direction: column; align-items: stretch; }
  .advscene[data-a01] .advbot .party { width: 100%; }
  .advscene[data-a01] .advbot .advacts { display: flex; width: 100%; order: 1; }
  .advscene[data-a01] .advbot .punit { min-height: 62px; flex: 1 1 0; }
  .advscene[data-a01] .advbot .punit .frame {
    --a01-portrait-size: clamp(42px, 13vw, 56px);
    width: var(--a01-portrait-size); height: var(--a01-portrait-size);
  }
  .advscene[data-a01] .advbot .punit .frame svg { width: calc(100% - 4px); height: calc(100% - 4px); }
  .advscene[data-a01] .advbot .advacts > button { flex: 1 1 auto; justify-content: center; min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 380px) and (min-width: 550px) {
  .app .scene.advscene[data-p0l-layout][data-a01] {
    grid-template: auto 1fr auto / minmax(0,1fr) minmax(242px,44%); align-items: center;
  }
  .app .scene.advscene[data-p0l-layout][data-a01] canvas { grid-area: 1 / 1 / 4 / 2; }
  .advscene[data-p0l-layout][data-a01] .advhead { grid-area: 1 / 2; padding: 3px 4px; grid-template-columns: minmax(0,1fr); }
  .advscene[data-a01] .advhead .ctl { grid-area: 2 / 1; gap: 3px; justify-content: flex-start; }
  .advscene[data-a01] .advhead .ctl #mapBtn { padding-block: 0; }
  .advscene[data-a01] .advhead .ctl #mapBtn .ico,.advscene[data-a01] .advhead .ctl #mapBtn svg { width: 18px; height: 18px; }
  .advscene[data-a01] .advhead .stage { grid-row: 3; }
  .advscene[data-a01] .advhead .ctl .status:not([data-auto]), .advscene[data-a01] #stageLabel {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .advscene[data-a01] .a01-encuentro-corto { display: inline; font: 700 .88rem Georgia, serif; }
  .advscene[data-a01] .ctl:has(.status:not([data-auto])) #pause { border-color: var(--gold2); }
  .advscene[data-a01] .advwhere { flex-direction: row; align-items: center; justify-content: space-between; }
  .advscene[data-a01] .advwhere h2 { flex-basis: 64px; }
  .advscene[data-a01] .advwhere #routeBtn { padding-inline: 5px; }
  .advscene[data-p0l-layout][data-a01] .advbot { grid-area: 3 / 2; padding: 3px 4px; flex-direction: column; align-items: stretch; }
  .advscene[data-a01] .advbot .advacts { display: flex; order: 1; }
  .advscene[data-a01] .advbot .party { gap: 2px; flex-basis: auto; }
  .advscene[data-a01] .advbot .partysep { margin-inline: 0; }
  .advscene[data-a01] .advbot .punit { min-height: 50px; padding-block: 2px; }
  .advscene[data-a01] .advbot .punit .frame { width: 33px; height: 33px; }
  .advscene[data-a01] .advbot .punit .frame svg { width: 29px; height: 29px; }
  .advscene[data-a01] .advbot .chest,.advscene[data-a01] .advbot .fmbtn { padding-inline: 5px; }
}