/* 0.50: alineaciones con «fichas grandes» (el usuario eligió la B de tres prototipos el 27/10: «los circulitos se ven muy pequeños…
   quiero que se vea la media, la posición del jugador y que se vea bien»; después: «las demás alineaciones, iguales que en Mi equipo»).
   Cada titular: su cara grande con el aro de su rareza, la media en una medalla amarilla y, debajo, su puesto y su nombre. --mf es el
   tamaño de la cara: en Mi equipo, según el alto del campo (--pitch-h), que ocupa lo que queda porque la ficha del jugador se abre en un
   diálogo (game.js, teamEditor); en las demás (Expedición, Historia, Cadenas, Carrera, Mundial…), según el alto de su campo, que es un
   contenedor (cqh: una fila de las cuatro, menos el puesto y el nombre) */
/* El campo es un contenedor: en vertical caben 4 filas (una ficha mide su cara más unos 45 px de medalla, puesto y nombre); con menos de
   356 px de alto, sin el nombre (unos 28 px). En horizontal las filas son columnas y en una caben hasta 3 (1-3-0-1): un tercio del alto */
#screenBody.vr-theme #ed.tok-ed #edPitch{container-type:size}
#screenBody.vr-theme #ed.tok-ed{--mf:clamp(32px,calc(25cqh - 45px),78px)}
#screenBody.vr-theme #ed.team-ed{display:flex;flex-direction:column;min-height:0}
@media(orientation:portrait){
 #screenBody.vr-theme #ed.team-ed{--pitch-h:clamp(260px,calc(var(--page-height,760px) - 150px),620px)}
}
@media(orientation:landscape){
 #screenBody.vr-theme #ed.team-ed{display:flex;--pitch-h:clamp(200px,calc(var(--page-height,400px) - 124px),520px)}
 #screenBody.vr-theme #ed.team-ed .lineup-field{flex:1 1 auto}
 #screenBody.vr-theme #ed.team-ed #edPitch{flex:none;height:var(--pitch-h)}
 #screenBody.vr-theme #ed.tok-ed{--mf:clamp(30px,calc(33cqh - 45px),70px)}
}
#screenBody.vr-theme #ed.team-ed .lineup-field{flex:1 1 auto;min-height:0}
#screenBody.vr-theme #ed.team-ed #edPitch{height:var(--pitch-h)}
/* Antes de empezar un modo (Expedición, Historia…), en vertical: el campo se queda con el alto que quede, para que el banquillo no se corte */
@media(orientation:portrait){
 #screenBody.vr-theme.draft-screen #ed.tok-ed{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
 #screenBody.vr-theme.draft-screen #ed.tok-ed .lineup-field{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
 #screenBody.vr-theme.draft-screen #ed.tok-ed #edPitch{flex:1 1 var(--pitch-h);height:auto;min-height:184px;max-height:var(--pitch-h)}   /* (184: cuatro filas de fichas de 44 px) */
 #screenBody.vr-theme.draft-screen #ed.tok-ed #edBench{flex:none}
 /* Pantallas con secciones (antes de cada partido: Resumen · Alineación · Reservas; la plantilla de la Carrera): la sección es solo el
    campo y el banquillo, así que el campo crece hasta lo que quede (el usuario, 28/10: «tengo un pedazo de hueco») */
 #screenBody.vr-theme .section-panel>#ed.tok-ed:not(.team-ed) .lineup-field{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
 #screenBody.vr-theme .section-panel>#ed.tok-ed:not(.team-ed) #edPitch{flex:1 1 var(--pitch-h);height:auto;min-height:184px;max-height:600px}
 #screenBody.vr-theme .section-panel>#ed.tok-ed:not(.team-ed) #edBench{flex:none}
}
/* «Equipo guardado» y «Rellenar banquillo» en una fila (con los dos, los huecos libres se leen en el botón: el texto, solo para el lector) */
.draft-screen .page-content>.draft-team{display:flex;align-items:center;gap:8px;margin:0}
.draft-team .dt-pick{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;margin:0}
.draft-team .dt-pick select{flex:1;min-width:0;min-height:44px}
.draft-team .bench-hint{display:flex;align-items:center;gap:6px;flex:0 1 auto;margin:0}
.draft-team:has(.dt-pick) .bh-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* El titular */
#screenBody.vr-theme #ed.tok-ed #edPitch .pslot.fcard{width:calc(var(--mf) + 34px);height:auto;min-height:0;gap:3px;z-index:1}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pf{--face:var(--mf);--tok:var(--mf);width:var(--mf);height:var(--mf);border-width:calc(var(--mf) / 16 + 1px);
  box-shadow:0 0 0 3px #0a0f22,3px 5px 0 rgba(0,0,0,.4)}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard.sel .pf{box-shadow:0 0 0 3px #0a0f22,0 0 0 6px #ffe14a,3px 5px 0 rgba(0,0,0,.4)}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .fc-info{position:static;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--mf) * -.16);gap:1px}   /* (static: la medalla se coloca sobre la ficha entera) */
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .fc-top{display:contents}
/* La media, en su medalla, arriba a la derecha de la cara */
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .fc-lv{position:absolute;top:-6px;left:calc(50% + var(--mf) / 2 - var(--mf) * .3);width:calc(var(--mf) * .44 + 8px);height:calc(var(--mf) * .44 + 8px);
  display:grid;place-items:center;border-radius:50%;background:#0a0f22;border:3px solid #ffe14a;color:#ffe14a;font-size:calc(var(--mf) * .21 + 3px);line-height:1;box-shadow:2px 3px 0 rgba(0,0,0,.45);z-index:2;box-sizing:border-box}
/* Fuera de su puesto, su puesto natural va arriba a la izquierda de la cara (arriba a la derecha tapaba la media) */
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .ppos{left:-8px;right:auto;top:0;bottom:auto;z-index:3}
/* Puesto y nombre debajo */
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pr{position:relative;z-index:2;font-size:12px;line-height:1}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pr .chip.pos{display:inline-block;padding:2px 7px;font-size:12px;border:2px solid #0a0f22}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pn{display:block;max-width:calc(var(--mf) + 34px);font-size:13px;line-height:1.15;color:#fff;
  text-shadow:2px 2px 0 #0a0f22,-1px -1px 0 #0a0f22,1px -1px 0 #0a0f22,-1px 1px 0 #0a0f22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard :is(.fc-rar,.fc-el){display:none}
#screenBody.vr-theme #ed.tok-ed #edPitch .fcard.empty .pf{font-size:calc(var(--mf) / 2.4)}
/* Banquillo: las mismas fichas, más pequeñas */
#screenBody.vr-theme #ed.tok-ed .bench{--tok:44px}
#screenBody.vr-theme #ed.tok-ed .bench .bslot.fcard .fc-lv{color:#ffe14a}
/* Antes de empezar un modo, en horizontal: «Equipo guardado» debajo de la dificultad (columna izquierda) y la formación debajo */
@media(max-height:500px) and (min-width:600px){
 .draft-screen .page-content>.draft-team{position:absolute;left:3px;top:56px;width:calc(42% - 10px);z-index:2}
 .draft-screen .draft-team .dt-pick{font-size:0}
 .draft-screen .draft-team .dt-pick select{font-size:14px}
 .draft-screen .page-content:has(>.draft-team) #ed .lineup-field>.edhead{margin-top:110px}
}
/* Campos bajos: sin el nombre y la cara a la medida (al final: las consultas de contenedor no suman especificidad) */
@media(orientation:portrait){
 /* Muy justo (cuatro filas en menos de 231 px): el puesto, encima del borde de abajo de la cara, para que la ficha siga midiendo 44 px */
 @container (max-height:230px){
  #screenBody.vr-theme #ed.tok-ed #edPitch .pslot.fcard{gap:0}
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard{--mf:clamp(44px,calc(25cqh - 2px),78px)}
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard .fc-info{margin:0}
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pr{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%)}
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pn{display:none}
 }
 @container (min-height:231px) and (max-height:355px){
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard{--mf:clamp(32px,calc(25cqh - 28px),78px)}
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pn{display:none}
 }
}
@media(orientation:landscape){
 @container (max-height:269px){
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard{--mf:clamp(30px,calc(33cqh - 28px),70px)}
  #screenBody.vr-theme #ed.tok-ed #edPitch .fcard .pn{display:none}
 }
}
/* La ficha del jugador, en un diálogo que cabe en la pantalla (lo de dentro, con su barra si hace falta) */
dialog.modal.pp-dlg{width:min(720px,calc(100vw - 16px));max-height:calc(var(--ui-height,100dvh) - 16px);padding:0;overflow:hidden;display:flex;flex-direction:column;background:#0f1a3d;border:3px solid #ffe14a}
dialog.modal.pp-dlg:not([open]){display:none}
dialog.modal.pp-dlg .pp-dlg-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
dialog.modal.pp-dlg .pp-x{position:absolute;right:6px;top:6px;z-index:3;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;background:#0a0f22;border:2px solid #ffe14a;color:#ffe14a}
/* (las reglas de la ficha de pixel-ui.css y player-card.css valen dentro de .card y de este diálogo: :is(.card,.pp-dlg)) */
dialog.modal.pp-dlg>.pp{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0}