/* Pena máxima · Parque FC
   Mundo visual único (escuro, verde Parque): editorial, con estrutura de menús de PES 5/6.
   Tres tamaños por peza: titular, texto e etiqueta. */

@font-face { font-family: "Red Hat Display"; src: url("../fontes/RedHatDisplay-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("../fontes/RedHatDisplay-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../fontes/PinyonScript-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Letras das camisetas: subconxunto de Graduate (OFL), renomeado. */
@font-face { font-family: "Parque Varsity"; src: url("../fontes/ParqueVarsity-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root {
  /* Maqueta: marco de catro esquinas, contido aliñado á esquerda con marxes do 6 %. */
  --verde: #14211D;
  --verde-claro: #1F3129;
  --crema: #F2EFE8;
  --dourado: #EAB94A;
  --dourado-escudo: #B3975E;
  --tinta: #101211;
  --branco: #FFFFFF;
  --texto-2: rgba(255, 255, 255, 0.74);
  --filete: rgba(255, 255, 255, 0.30);
  --filete-suave: rgba(255, 255, 255, 0.14);
  --panel: rgba(16, 26, 22, 0.82);
  --fonte: "Red Hat Display", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --tit: clamp(34px, 6.4vmin, 72px);
  --txt: clamp(15px, 2.2vmin, 20px);
  --eti: clamp(10.5px, 1.35vmin, 13px);
  --marxe: max(18px, 6vw);
  --alto-marco: clamp(44px, 7vmin, 64px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--verde); color: var(--branco); }
body { font: 500 var(--txt)/1.45 var(--fonte); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; }

.xogo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: var(--verde);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: default;
}
.xogo[data-modo="apuntar"] { cursor: crosshair; }
#escena, #escena3d { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
/* O 3D vai a resolución de PS2 e amplíase sen suavizar: pixelado */
#escena3d { image-rendering: crisp-edges; image-rendering: pixelated; }
/* Gráficos de agora: o 3D e as caras en alta, sen píxeles grandes */
.moderno #escena3d, .moderno .cara-pixel, .moderno .ficha-cara, .moderno .pes-cara img { image-rendering: auto; }

.veo {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 49, 41, 0.86), rgba(20, 33, 29, 0.93));
  transition: opacity 0.45s ease;
}
.xogo[data-pantalla="xogo"] .veo { opacity: 0; }

/* ---------- Tipografía ---------- */
.eti { font: 500 var(--eti)/1.35 var(--fonte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); margin: 0; }
.tit { font: 700 var(--tit)/1.02 var(--fonte); letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.txt { font: 500 var(--txt)/1.45 var(--fonte); margin: 0; }
.sec { color: var(--texto-2); }
.dourado { color: var(--dourado); }
/* Inicial solta (unha palabra dunha letra, coma o «A» de «A Grada») */
.ini.solta { margin-right: 0.16em; }
.ini { font-family: var(--script); font-weight: 400; font-size: 1.62em; line-height: 0; letter-spacing: 0; margin-right: -0.06em; position: relative; top: 0.06em; }
.num { font: 700 1em/1 var(--fonte); font-variant-numeric: tabular-nums; }

/* ---------- Pantallas ---------- */
.pantallas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
/* O contido móvese só na franxa entre as etiquetas do marco (arriba e abaixo): nunca pasa por
   debaixo delas. Se non colle, fai scroll dentro da franxa e esvaece nos bordos. */
.pantalla {
  position: absolute; left: 0; right: 0;
  top: calc(var(--alto-marco) + env(safe-area-inset-top, 0px));
  bottom: calc(var(--alto-marco) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: clamp(16px, 3vmin, 30px);
  padding: 8px var(--marxe) 6px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; pointer-events: auto; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  animation: entrar 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pantalla[hidden] { display: none !important; }
/* Se o contido non colle, a pantalla fai scroll: ningunha peza se espreme (os botóns de abaixo
   quedaban nunha raia) */
.pantalla > * { flex-shrink: 0; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cabeceira { display: grid; gap: 0.5em; }
.cabeceira .tit { margin-top: 0.14em; }

/* Marco de esquinas */
.marco { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity 0.4s; }
.xogo[data-pantalla="xogo"] .marco { opacity: 0; }
.esq { position: absolute; }
.sup-esq { left: var(--marxe); top: calc(env(safe-area-inset-top, 0px) + var(--alto-marco) * 0.42); }
.sup-der { right: var(--marxe); top: calc(env(safe-area-inset-top, 0px) + var(--alto-marco) * 0.42); }
.inf-esq { left: var(--marxe); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--alto-marco) * 0.34); width: clamp(34px, 5vmin, 46px); color: var(--texto-2); line-height: 0; }
.inf-der { right: var(--marxe); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--alto-marco) * 0.42); text-transform: none; letter-spacing: 0.08em; }
.inf-esq svg, [data-escudo] svg { width: 100%; height: auto; display: block; }
/* @ do club: abre o aviso do Instagram (só nos menús) */
.ligazon-ig { pointer-events: auto; background: none; border: 0; padding: 10px 0 10px 12px; margin: -10px 0; cursor: pointer; }
.ligazon-ig:hover, .ligazon-ig:focus-visible { color: var(--dourado); }
.xogo[data-pantalla="xogo"] .ligazon-ig { pointer-events: none; visibility: hidden; }
/* No móbil as pantallas con botóns abaixo pasan por debaixo do @ ao facer scroll: alí taparíaos
   (e roubaría toques). Só vai no título e no menú. */
@media (max-width: 720px) {
  .xogo:not([data-pantalla="titulo"]):not([data-pantalla="menu"]) .ligazon-ig { pointer-events: none; visibility: hidden; }
}
.aviso-ig { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: grid; place-items: center; padding: 20px; background: rgba(8, 14, 11, 0.74); pointer-events: auto; }
.aviso-ig[hidden] { display: none; }
.aviso-ig-caixa { width: min(440px, 100%); display: grid; gap: 12px; padding: 22px 22px 18px; background: var(--verde); border: 1px solid var(--filete); border-top: 3px solid var(--dourado); animation: entrar 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.aviso-ig-tit { font: 700 clamp(22px, 3.4vmin, 30px)/1.15 var(--fonte); }
.aviso-ig .botonera { margin-top: 6px; }
.aviso-ig a.boton { text-decoration: none; text-align: center; }

/* Botóns */
.botonera { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
@media (max-width: 720px) {
  .botonera { flex-wrap: nowrap; gap: 8px; }
  .botonera .boton { flex: 1 1 auto; padding: 1.2em 0.8em; letter-spacing: 0.12em; }
  .p-final .botonera, .p-imaxe .botonera { flex-wrap: wrap; }
  .p-final .botonera .boton { flex: 1 1 40%; }
  .p-plantilla .botonera, .p-previa .botonera, .p-rival .botonera {
    position: sticky; bottom: -6px; z-index: 2;
    margin-left: calc(-1 * var(--marxe)); margin-right: calc(-1 * var(--marxe)); padding: 14px var(--marxe) 14px;
    background: linear-gradient(180deg, rgba(20, 33, 29, 0), rgba(20, 33, 29, 0.96) 28%);
  }
}
.boton {
  appearance: none; border: 1px solid var(--crema); background: var(--crema); color: var(--tinta);
  font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.25em 1.9em; border-radius: 0; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.boton.sec { background: transparent; color: var(--branco); border-color: var(--filete); }
.boton:hover, .boton:focus-visible { background: var(--dourado); border-color: var(--dourado); color: var(--tinta); outline: none; }
.boton.sec:hover, .boton.sec:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--branco); border-color: var(--crema); }
.boton:disabled { opacity: 0.35; cursor: default; background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.icono { appearance: none; background: transparent; border: 1px solid var(--filete-suave); color: var(--branco); width: 40px; height: 40px; padding: 9px; cursor: pointer; display: grid; place-items: center; }
.icono:hover, .icono:focus-visible { border-color: var(--crema); outline: none; }
.icono svg { width: 100%; height: 100%; display: block; }

/* Listas de menú (estrutura PES: barra de selección + axuda abaixo) */
.lista { display: flex; flex-direction: column; max-width: 34em; }
.opcion {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--filete-suave); text-align: left;
  color: var(--texto-2); font: 500 var(--txt)/1.2 var(--fonte); padding: 0.9em 0.2em 0.9em 1.2em; position: relative; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em; transition: color 0.12s, padding 0.18s;
}
.opcion:first-child { border-top: 1px solid var(--filete-suave); }
.opcion::before { content: ""; position: absolute; left: 0; top: 0.75em; bottom: 0.75em; width: 3px; background: var(--dourado); transform: scaleY(0); transition: transform 0.18s; }
.opcion.activa, .opcion:focus-visible { color: var(--branco); padding-left: 1.6em; outline: none; }
.opcion.activa::before, .opcion:focus-visible::before { transform: scaleY(1); }
.opcion .valor { font: 500 var(--eti)/1 var(--fonte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dourado); }
.pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--filete-suave); }
.teclas { opacity: 0.8; }
.tactil .teclas, .tactil .tecla-xogo.so-teclado { display: none; }

/* Título */
.p-titulo { justify-content: center; justify-content: safe center; }
.titulo-bloque { display: grid; gap: clamp(12px, 2.2vmin, 22px); max-width: 40em; }
.escudo-titulo { width: clamp(64px, 11vmin, 108px); }
.tit.xigante { font-size: clamp(46px, 11vmin, 132px); line-height: 0.96; margin-top: 0.32em; }
.preme { color: var(--dourado); animation: latexo 2.2s ease-in-out infinite; margin-top: clamp(8px, 3vmin, 30px); }
@keyframes latexo { 0%, 100% { opacity: 1; } 50% { opacity: 0.38; } }

/* Menú */
.menu-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(20px, 5vw, 80px); align-items: start; }
.menu-lado { border-left: 1px solid var(--filete-suave); padding-left: clamp(16px, 3vw, 40px); display: grid; gap: 14px; }
.cifras { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.cifras dt, .cifras dd { margin: 0; padding: 0.7em 0; border-bottom: 1px solid var(--filete-suave); }
.cifras dt { color: var(--texto-2); }
.cifras dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cifras dd.dourado { color: var(--dourado); }
.cifras.grande { max-width: 34em; }
/* A Grada en pantallas anchas: as cifras en dúas columnas (colle sen scroll) */
@media (min-width: 980px) {
  .cifras.grande { max-width: 64em; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 0; }
  .cifras.grande dd:nth-of-type(odd) { padding-right: 3em; }
}
@media (max-width: 720px) {
  .menu-corpo { grid-template-columns: minmax(0, 1fr); }
  .menu-lado { display: none; }
}
/* Menú de entrada: XOGAR moi grande, A Grada e Retos e ranking normais e Axustes pequeno */
.menu-principal .opcion-xogar {
  font: 700 clamp(44px, 10vmin, 104px)/1 var(--fonte); letter-spacing: -0.015em; color: var(--branco);
  padding: 0.16em 0.1em 0.2em 0.3em; align-items: center;
}
.menu-principal .opcion-xogar .ini { font-size: 1.32em; top: 0.08em; }
.menu-principal .opcion-xogar .frecha { font-weight: 500; font-size: 0.5em; color: var(--dourado); transition: transform 0.18s; }
.menu-principal .opcion-xogar.activa, .menu-principal .opcion-xogar:focus-visible { color: var(--dourado); padding-left: 0.42em; }
.menu-principal .opcion-xogar.activa .frecha, .menu-principal .opcion-xogar:focus-visible .frecha { transform: translateX(0.2em); }
.menu-principal .opcion-xogar::before { top: 0.18em; bottom: 0.18em; width: 4px; }
.menu-principal .opcion-pequena { font-size: calc(var(--txt) * 0.84); padding-top: 0.8em; padding-bottom: 0.8em; }

/* Xogar: os modos en tarxetas (a tanda, máis ancha) */
.modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 74em; }
.modo-carta {
  appearance: none; text-align: left; cursor: pointer; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--filete-suave);
  color: var(--branco); padding: clamp(14px, 2.2vmin, 22px); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  gap: 6px 16px; align-items: start; min-height: 9.6em; transition: border-color 0.15s, background 0.15s;
}
.modo-carta.ancha { grid-column: span 2; }
.modo-carta:hover { border-color: var(--filete); }
.modo-carta.activa, .modo-carta:focus-visible { border-color: var(--dourado); background: rgba(234, 185, 74, 0.06); outline: none; }
.modo-icono { grid-row: span 3; width: clamp(38px, 6vmin, 50px); height: clamp(38px, 6vmin, 50px); color: var(--crema); }
.modo-icono svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modo-icono .d { stroke: var(--dourado); }
.modo-icono .p, .modo-icono .p circle { fill: currentColor; stroke: none; }
.modo-icono .d.p { fill: var(--dourado); }
.modo-nome { font-weight: 700; font-size: calc(var(--txt) * 1.06); line-height: 1.2; }
.modo-txt { color: var(--texto-2); font-size: 0.9em; line-height: 1.38; }
.modo-marca { color: var(--dourado); align-self: end; }
@media (max-width: 980px) { .modos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .modos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .modo-carta, .modo-carta.ancha { grid-column: auto; min-height: 0; }
}

/* A Grada: os xogadores que baixan cando consegues a súa medalla (os que faltan, en silueta) */
.grada-intro { margin: -6px 0 0; max-width: 40em; }
.persoaxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 74em; }
.persoaxe {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 4px 14px; align-items: center;
  padding: 14px; border: 1px solid var(--filete-suave); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.persoaxe-retrato { grid-row: span 4; align-self: center; display: grid; place-items: end center; width: 72px; height: 82px;
  background: radial-gradient(60% 50% at 50% 100%, rgba(234, 185, 74, 0.16), rgba(234, 185, 74, 0)); border-bottom: 2px solid var(--filete-suave); }
.persoaxe-retrato .cara-pixel { width: 66px; height: 75px; }
/* Bloqueadas: en silueta (o retrato 3D vai sen fondo); o dos gráficos clásicos, en gris escuro */
.persoaxe:not(.aberta) .cara-pixel.recorte { filter: brightness(0); opacity: 0.6; }
.persoaxe:not(.aberta) .cara-pixel:not(.recorte):not(.interrogante) { filter: grayscale(1) brightness(0.45); }
.persoaxe.aberta { border-color: rgba(234, 185, 74, 0.6); background: linear-gradient(180deg, rgba(234, 185, 74, 0.1), rgba(234, 185, 74, 0.03)); }
.persoaxe.aberta .persoaxe-retrato { border-bottom-color: var(--dourado); }
.cara-pixel.interrogante { display: grid; place-items: center; font: 700 30px/1 var(--fonte); color: var(--texto-2); border: 1px dashed var(--filete); background: rgba(255, 255, 255, 0.03); }
.persoaxe-nome { font-weight: 700; line-height: 1.2; font-size: 1.08em; }
.persoaxe.misterio .persoaxe-nome { color: var(--texto-2); }
.persoaxe-req { display: flex; align-items: center; gap: 6px; }
.persoaxe-req .eti { color: var(--dourado); letter-spacing: 0.1em; }
.persoaxe-peza { flex: none; width: 20px; }
.persoaxe-peza svg { display: block; width: 100%; height: auto; }
.persoaxe-estado { font-size: 0.82em; color: var(--texto-2); line-height: 1.3; }
.persoaxe.aberta .persoaxe-estado { color: var(--branco); }
.barra { display: block; height: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--dourado); }
@media (max-width: 1100px) { .persoaxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .persoaxes { grid-template-columns: minmax(0, 1fr); } }

/* A Vitrina: un andel de cristal por logro; as pezas conseguidas en metal e as outras en silueta */
.vitrina {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); max-width: 74em; padding: 4px clamp(12px, 2.4vmin, 22px) 10px;
  border: 1px solid var(--filete-suave); border-top: 3px solid var(--dourado);
  background: radial-gradient(120% 60% at 50% 0, rgba(234, 185, 74, 0.09), rgba(234, 185, 74, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18));
}
.andel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding: 16px 0 0; }
.andel + .andel { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.andel-cab { display: grid; gap: 2px; }
.andel-nome { font-weight: 700; font-size: 1.06em; line-height: 1.2; }
.andel-txt { font-size: 0.84em; color: var(--texto-2); line-height: 1.3; }
.andel-estado { margin-top: 3px; color: var(--texto-2); letter-spacing: 0.1em; }
.andel.con .andel-estado { color: var(--dourado); }
.andel-pezas { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px clamp(6px, 1.4vmin, 14px); padding: 0 6px 12px; }
/* O andel: unha lámina de cristal coa luz dourada por riba */
.andel-pezas::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: linear-gradient(180deg, rgba(255, 245, 220, 0.34), rgba(234, 185, 74, 0.1)); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.peza {
  appearance: none; border: 0; background: none; padding: 4px 2px 6px; margin: 0; cursor: pointer; color: inherit;
  display: grid; justify-items: center; gap: 2px; width: clamp(64px, 10vmin, 96px); position: relative; z-index: 1;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.18s;
}
.peza svg { display: block; width: 100%; height: auto; }
.peza.on svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.peza-num { font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.06em; color: var(--texto-2); font-variant-numeric: tabular-nums; min-height: 1em; }
.peza.on .peza-num { color: var(--dourado); }
.peza.seguinte .peza-num { color: var(--branco); }
.peza:hover, .peza.activa, .peza:focus-visible { transform: translateY(-4px); outline: none; }
.peza.on:hover svg, .peza.on.activa svg, .peza.on:focus-visible svg { filter: drop-shadow(0 0 12px rgba(234, 185, 74, 0.55)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.peza.activa::before, .peza:focus-visible::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--dourado); }
.vitrina-cifras { display: grid; gap: 8px; max-width: 74em; }
@media (min-width: 900px) {
  .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .andel:nth-child(2) { border-top: 0; }
}
@media (max-width: 640px) { .andel { padding-top: 12px; } .peza { width: 66px; } }

/* Unha peza en grande (diálogo sobre calquera pantalla) */
.medalla-detalle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: grid; place-items: center; padding: 20px; background: rgba(8, 14, 11, 0.8); pointer-events: auto; }
.medalla-detalle[hidden] { display: none; }
.medalla-detalle-caixa {
  width: min(560px, 100%); max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 14px 22px; align-items: center;
  padding: 24px 24px 18px; background: radial-gradient(70% 60% at 22% 40%, rgba(234, 185, 74, 0.2), rgba(234, 185, 74, 0) 70%), var(--verde);
  border: 1px solid var(--filete); border-top: 3px solid var(--dourado); animation: entrar 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.medalla-grande svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); }
.medalla-detalle.bloqueada .medalla-grande svg { filter: none; }
.medalla-detalle-txt { display: grid; gap: 8px; }
.medalla-detalle-txt .eti { color: var(--dourado); }
.medalla-detalle-tit { margin: 0; font: 700 clamp(28px, 4.8vmin, 44px)/1.1 var(--fonte); }
.medalla-detalle-cifra { margin: -4px 0 0; font: 700 clamp(18px, 2.8vmin, 24px)/1.2 var(--fonte); color: var(--dourado); }
.medalla-detalle.bloqueada .medalla-detalle-cifra { color: var(--texto-2); }
.medalla-detalle .txt { margin: 0; }
.md-data { color: var(--texto-2) !important; }
.medalla-detalle .botonera { grid-column: 1 / -1; margin-top: 4px; }
.medalla-detalle .botonera .boton { flex: 1 1 auto; }
@media (max-width: 520px) {
  .medalla-detalle-caixa { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 18px 16px; }
  .medalla-grande { width: min(160px, 46vw); }
}

/* Avisos de medallas no partido: debaixo do marcador (nos móbiles en vertical, debaixo do rótulo) */
.avisos-logro { position: absolute; left: max(14px, 2.6vw); top: calc(env(safe-area-inset-top, 0px) + max(12px, 2.2vh) + 118px); display: grid; gap: 8px; width: min(290px, 72vw); }
.aviso-logro {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--filete-suave); border-left: 3px solid var(--dourado); padding: 9px 12px 10px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: aviso-logro-entra 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: opacity 0.5s, transform 0.5s;
}
.aviso-logro .eti { color: var(--dourado); }
.aviso-logro-peza svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.aviso-logro-tit { margin: 2px 0 0; font: 700 clamp(16px, 2.4vmin, 21px)/1.2 var(--fonte); }
.aviso-logro-baixa { margin: 4px 0 0; font-size: 0.86em; color: var(--dourado); }
.aviso-logro.sae { opacity: 0; transform: translateX(-12px); }
@keyframes aviso-logro-entra { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (max-aspect-ratio: 4/5) { .avisos-logro { left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 29vh); } }
@media (prefers-reduced-motion: reduce) { .aviso-logro { animation: none; } }

/* Pantalla final: as medallas desta partida, cada unha co seu botón para a historia */
.fin-logros { display: grid; gap: 8px; padding: 10px 0 0; border-top: 1px solid var(--filete-suave); max-width: 40em; }
.fin-logros ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fin-logros > .eti { color: var(--dourado); }
/* Con medallas novas, o marcador algo máis pequeno: os botóns de abaixo seguen á vista */
.p-final.con-logros .fin-marcador { font-size: clamp(64px, 14vmin, 150px); }
.p-final.con-logros .tit { font-size: clamp(32px, 6vmin, 64px); }
@media (min-width: 900px) { .fin-logros ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-logros { max-width: 64em; } .boton-logro { grid-template-columns: 34px minmax(0, 1fr); } .boton-logro-ig { grid-column: 2; } }
.boton-logro {
  appearance: none; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; text-align: left;
  padding: 6px 12px 6px 8px; border: 1px solid var(--filete-suave); background: rgba(255, 255, 255, 0.03); color: inherit; cursor: pointer; line-height: 1.3;
  transition: border-color 0.15s, background 0.15s;
}
.boton-logro-peza svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.boton-logro-ig { color: var(--dourado); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5em; }
.boton-logro-ig .ig { width: 1.35em; height: 1.35em; flex: none; }
.boton-logro:hover, .boton-logro.activa, .boton-logro:focus-visible { border-color: var(--dourado); background: rgba(234, 185, 74, 0.08); outline: none; }
@media (max-width: 640px) { .boton-logro { grid-template-columns: 34px minmax(0, 1fr); } .boton-logro-ig { grid-column: 2; } }
.version { margin-top: -4px; }
.creditos { display: grid; grid-template-columns: minmax(8em, auto) minmax(0, 1fr); gap: 0; max-width: 46em; margin: 0; }
.creditos dt, .creditos dd { margin: 0; padding: 0.8em 0; border-bottom: 1px solid var(--filete-suave); }
.creditos dt { padding-right: 1.4em; padding-top: 1.05em; }
.creditos dd { line-height: 1.45; }
.creditos a { color: var(--dourado); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; pointer-events: auto; }
.creditos a:hover, .creditos a:focus-visible { color: var(--branco); outline: none; }
@media (max-width: 640px) {
  .creditos { grid-template-columns: minmax(0, 1fr); }
  .creditos dt { border-bottom: 0; padding-bottom: 0.2em; }
}
.opcion:disabled { cursor: default; opacity: 0.55; }

/* Rival */
.rivais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 60em; }
.rival-carta {
  appearance: none; text-align: left; cursor: pointer; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--filete-suave);
  color: var(--branco); padding: clamp(14px, 2.2vmin, 22px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center;
  transition: border-color 0.15s, background 0.15s;
}
.rival-carta:hover { border-color: var(--filete); }
.rival-carta.activa, .rival-carta:focus-visible { border-color: var(--dourado); background: rgba(234, 185, 74, 0.06); outline: none; }
.rival-escudo {
  grid-row: span 3; width: clamp(46px, 7vmin, 60px); height: clamp(46px, 7vmin, 60px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.08em; border: 2px solid var(--crema); color: var(--crema); position: relative;
}
.rival-escudo::after { content: ""; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border-radius: 50%; border: 1px solid var(--crema); opacity: 0.5; }
.rival-nome { font-weight: 700; }
.rival-lema { color: var(--texto-2); grid-column: 2; font-size: 0.92em; line-height: 1.35; }
.nivel { display: inline-flex; gap: 5px; margin-left: 0.8em; vertical-align: middle; }
.nivel i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dourado); display: block; }
.nivel i.on { background: var(--dourado); }
@media (max-width: 640px) { .rivais { grid-template-columns: minmax(0, 1fr); } }

/* Aliñación */
.plantilla-grella { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); align-items: start; }
.ocos, .xogadores { list-style: none; margin: 10px 0 0; padding: 0; }
.oco, .xog {
  appearance: none; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--filete-suave); color: var(--branco);
  display: grid; grid-template-columns: 2.6em 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0.22em 0.2em; text-align: left; cursor: pointer;
  font: 500 calc(var(--txt) * 0.94)/1.2 var(--fonte);
}
/* Retratos pixelados (22 x 25 píxeles a dobre tamaño), coma nas listas do PES de PS2. Co
   max-width: none, ningún estilo base (o do visor de artefactos leva img { max-width: 100% })
   as estreita: quedaban estiradas cara arriba */
.cara-pixel { width: 44px; height: 50px; max-width: none; image-rendering: pixelated; display: block; border: 1px solid var(--filete-suave); background: rgba(255, 255, 255, 0.04); }
/* Retrato 3D recortado: sen marco nin fondo, só a figura */
.cara-pixel.recorte, .ficha-cara.recorte { border: 0; background: none; }
.cara-pixel.baleira { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 4px, rgba(255, 255, 255, 0) 4px 8px); }
.xog:not(.asignado) .cara-pixel { opacity: 0.82; }
/* En pantallas anchas, a plantilla en dúas columnas (as caras fan as filas máis altas) */
@media (min-width: 1100px) and (min-height: 600px) {
  .plantilla-grella { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr) minmax(0, 0.9fr); }
  .xogadores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .xog { grid-template-columns: 1.7em 44px minmax(0, 1fr) auto; gap: 8px; }
  .p-plantilla .ficha svg { max-width: 190px; }
}
.oco .eti, .xog .eti { letter-spacing: 0.12em; }
/* Escoller e colocar: o escollido leva o bordo dourado e latexa; o outro lado agarda */
.oco.escollido, .xog.escollido { background: rgba(234, 185, 74, 0.14); box-shadow: inset 0 0 0 2px var(--dourado); color: var(--branco); animation: escollido 1.2s ease-in-out infinite; }
@keyframes escollido { 50% { background: rgba(234, 185, 74, 0.24); } }
.oco.agarda, .xog.agarda { background: rgba(255, 255, 255, 0.035); }
.xog.agarda .cara-pixel { opacity: 1; }
.xog.non { opacity: 0.38; }
/* Baixas do domingo: en gris, co motivo debaixo do nome; e a etiqueta de quen vén de festa */
.xog.baixa { color: var(--texto-2); }
.xog.baixa .cara-pixel { opacity: 0.35; filter: grayscale(1); }
.xog.baixa .nome-xog { opacity: 0.8; }
.xog.baixa .rol { color: #D8556A; }
.xog .motivo { display: block; font: 500 calc(var(--eti) * 1.02)/1.3 var(--fonte); letter-spacing: 0.01em; color: var(--texto-2); font-style: italic; white-space: normal; margin-top: 2px; }
.tag-resaca { display: inline-block; margin-left: 0.6em; padding: 3px 5px 2px; background: #3F86D8; color: #F2EFE8; font: 700 9px/1 var(--fonte); letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 0.2em; }
.p-plantilla.escollendo .axuda-pl { color: var(--dourado); }
.oco:hover .nome-oco, .xog:hover { color: var(--dourado); }
.xog { color: var(--texto-2); }
.xog.asignado { color: var(--branco); }
.xog .rol { font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.1em; color: var(--dourado); min-width: 2.6em; text-align: right; }
.xog .dorsal { font-weight: 700; color: var(--dourado); font-variant-numeric: tabular-nums; }
.xog.activa, .oco.activa, .xog:focus-visible, .oco:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; box-shadow: inset 3px 0 0 var(--dourado); }
.ficha { border: 1px solid var(--filete-suave); padding: clamp(14px, 2vmin, 22px); display: grid; gap: 8px; background: rgba(255, 255, 255, 0.02); align-content: start; }
.ficha p { margin: 0; }
.ficha .ficha-nome { font-weight: 700; font-size: var(--txt); display: flex; align-items: center; gap: 12px; }
/* Retrato da ficha, en píxeles grandes como as fichas de PS2 */
.ficha-cara { width: 64px; height: 72px; max-width: none; image-rendering: pixelated; border: 1px solid var(--filete); flex: 0 0 auto; background: var(--verde); }
.ficha svg { width: 100%; max-width: 230px; height: auto; justify-self: center; overflow: visible; margin-bottom: 4px; }
.ficha .dato { color: var(--texto-2); font-size: 0.92em; }
.axuda-pl { opacity: 0.85; }
@media (max-width: 980px) {
  .plantilla-grella { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ficha { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .ficha svg { max-width: 150px; grid-row: span 3; }
}
@media (max-width: 600px) {
  .plantilla-grella { grid-template-columns: minmax(0, 1fr); }
  .ficha { order: -1; }
  .ocos-bloque, .xogadores-bloque { scroll-margin-top: 8px; }
  /* A axuda vai pegada enriba dos botóns: sempre se ve que hai que tocar despois */
  .p-plantilla .axuda-pl { position: sticky; bottom: 76px; z-index: 2; margin: 0 calc(-1 * var(--marxe)); padding: 10px var(--marxe) 6px; background: rgba(20, 33, 29, 0.94); }
  .ficha svg { max-width: 118px; }
  .oco, .xog { padding: 0.5em 0.1em; }
}

/* Previa */
.previa-grella { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(16px, 3vmin, 30px) clamp(24px, 5vw, 80px); align-items: start; }
.previa-grella .col { display: grid; gap: clamp(14px, 2.6vmin, 26px); min-width: 0; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .previa-grella { grid-template-columns: minmax(0, 1fr); } }
.versus { display: flex; align-items: center; gap: clamp(12px, 3vw, 36px); flex-wrap: wrap; }
.versus .equipo { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.versus-escudo { width: clamp(44px, 7vmin, 64px); display: block; }
.versus-escudo.rival { height: clamp(44px, 7vmin, 64px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--crema); display: grid; place-items: center; font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.08em; }
.ficha-partido { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; max-width: 40em; }
.ficha-partido dt, .ficha-partido dd { margin: 0; padding: 0.5em 0; border-bottom: 1px solid var(--filete-suave); }
.ficha-partido dt { font: 500 var(--eti)/1.9 var(--fonte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); padding-right: 2em; }
.carga { display: grid; gap: 8px; max-width: 40em; }
.carga-barra { height: 2px; background: var(--filete-suave); overflow: hidden; }
.carga-barra i { display: block; height: 100%; width: 0; background: var(--dourado); transition: width 0.25s linear; }
.consello { display: grid; gap: 6px; max-width: 40em; margin: 0; }
.consello .txt { color: var(--texto-2); }
.sorteo { min-height: 1.45em; color: var(--dourado); }

/* Pausa */
.p-pausa { justify-content: center; justify-content: safe center; }

/* Final (peza de marca: marcador grande, frase curta, escudo) */
.p-final { justify-content: center; justify-content: safe center; }
.final-bloque { display: grid; gap: clamp(10px, 2vmin, 18px); max-width: 44em; }
.fin-equipos { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; }
.fin-marcador { display: flex; gap: 0.36em; font-size: clamp(88px, 22vmin, 210px); line-height: 0.9; margin: 0.05em 0 0.02em; letter-spacing: -0.02em; }
.fin-puntos { display: grid; gap: 8px; margin-top: 6px; }
.fin-puntos .fila { display: grid; grid-template-columns: 4.4em auto; align-items: center; gap: 10px; }
.p-final .tit { font-size: clamp(40px, 8vmin, 84px); }

/* Reto da semana e ranking (táboa estilo PES: posición, alcume, goles) */
.aviso-reto { color: var(--dourado); border-left: 3px solid var(--dourado); padding: 0.5em 0 0.5em 0.9em; letter-spacing: 0.1em; line-height: 1.5; }
.ranking-grella { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(18px, 4vw, 64px); align-items: start; max-width: 64em; }
.ranking-bloque, .ranking-lado { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ranking-taboa { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete-suave); }
.ranking-taboa li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 0.62em 0.4em; border-bottom: 1px solid var(--filete-suave); }
.ranking-taboa .pos { font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.12em; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ranking-taboa .alcume { font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-taboa .goles { font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-taboa li.primeiro .pos, .ranking-taboa li.primeiro .goles { color: var(--dourado); }
.ranking-taboa li.eu { background: linear-gradient(90deg, rgba(234, 185, 74, 0.16), rgba(234, 185, 74, 0)); box-shadow: inset 3px 0 0 var(--dourado); }
.campo {
  appearance: none; width: 100%; min-width: 0; background: rgba(255, 255, 255, 0.06); color: var(--branco); border: 1px solid var(--filete);
  border-radius: 0; font: 700 var(--txt)/1.2 var(--fonte); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7em 0.8em;
}
.campo::placeholder { color: rgba(255, 255, 255, 0.35); }
.campo:focus { outline: none; border-color: var(--dourado); background: rgba(255, 255, 255, 0.1); }
.campo-fila { display: flex; gap: 8px; }
.campo-fila .campo { flex: 1 1 auto; }
.boton-campo { flex: 0 0 auto; padding: 0 1.1em; }
.ranking-como { color: var(--texto-2); font-size: 0.86em; max-width: 30em; }
.ranking-aviso, .fin-aviso { min-height: 1.4em; letter-spacing: 0.08em; line-height: 1.5; text-transform: none; }
.fin-aviso { color: var(--dourado); }
.fin-ranking { display: grid; gap: 8px; max-width: 26em; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .ranking-grella { grid-template-columns: minmax(0, 1fr); } }

/* Imaxe */
.imaxe-marco { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.imaxe-marco img { max-height: min(58vh, 640px); max-width: 100%; width: auto; border: 1px solid var(--filete-suave); display: block; -webkit-touch-callout: default; user-select: auto; pointer-events: auto; }

/* Axuda */
.axuda-grella { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); max-width: 70em; }
.axuda-grella article { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--filete); padding-top: 14px; }
.axuda-grella .txt { color: var(--texto-2); max-width: 32em; }
.tecla-xogo { color: var(--dourado); }
@media (max-width: 820px) { .axuda-grella { grid-template-columns: minmax(0, 1fr); } }

/* ---------- HUD ---------- */
.hud { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity 0.2s; }
.xogo[data-pantalla="pausa"] .hud, .xogo[data-pantalla="final"] .hud { opacity: 0; visibility: hidden; }
.hud[hidden] { display: none; }
.hud > * { pointer-events: none; }
.hud button { pointer-events: auto; }
.marcador {
  position: absolute; left: max(14px, 2.6vw); top: calc(env(safe-area-inset-top, 0px) + max(12px, 2.2vh));
  background: var(--panel); border: 1px solid var(--filete-suave); padding: 10px 14px 10px; min-width: 214px;
  display: grid; gap: 4px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.marcador-tit { margin-bottom: 4px; }
.marcador .fila { display: grid; grid-template-columns: 2.9em minmax(0, 1fr) 1.4em; align-items: center; gap: 10px; font-weight: 700; }
.marcador .fila .cod { font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.14em; }
.marcador .fila .num { font-size: clamp(18px, 2.8vmin, 24px); text-align: right; }
.marcador .fila.parque { color: var(--dourado); padding-bottom: 2px; border-bottom: 1px solid var(--filete-suave); }
.marcador .fila.parque .num { font-size: clamp(20px, 3.2vmin, 28px); }
.puntos { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.punto { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; opacity: 0.55; position: relative; }
.punto.gol { background: currentColor; opacity: 1; }
.punto.falla { opacity: 1; }
.punto.falla::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: currentColor; transform: translateX(-50%) rotate(45deg); }
.punto.agora { opacity: 1; box-shadow: 0 0 0 2px rgba(234, 185, 74, 0.25); }
/* Poste no Traveseiro (medio punto) e fóra no Paradón (nin parada nin gol) */
.punto.medio { opacity: 1; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.punto.fora { opacity: 0.8; border-style: dashed; }
/* Vidas das rachas: cheas as que quedan; a que se perde, en vermello; a que se gaña, en ouro */
.punto.vida { background: currentColor; opacity: 1; }
.punto.perde { animation: vida-perde 1s ease-out; }
.punto.gaña { animation: vida-gaña 1s ease-out; }
@keyframes vida-perde { 0% { background: #D8556A; border-color: #D8556A; opacity: 1; transform: scale(1.7); } 60% { background: #D8556A; border-color: #D8556A; opacity: 1; transform: scale(1); } 100% { background: transparent; } }
@keyframes vida-gaña { 0% { background: var(--dourado); border-color: var(--dourado); transform: scale(2.2); box-shadow: 0 0 0 6px rgba(234, 185, 74, 0.5); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 185, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .punto.perde, .punto.gaña { animation: none; } }
.hud-dereita { position: absolute; right: max(14px, 2.6vw); top: calc(env(safe-area-inset-top, 0px) + max(12px, 2.2vh)); display: flex; align-items: center; gap: 8px; }
.hud-dereita .rolda { margin-right: 6px; text-align: right; }
/* En pantallas estreitas a rolda baixa debaixo dos botóns para non pisar o marcador. */
@media (max-width: 560px) {
  .hud-dereita { flex-wrap: wrap; justify-content: flex-end; max-width: 46vw; row-gap: 6px; }
  .hud-dereita .rolda { order: 3; flex-basis: 100%; margin-right: 0; }
  .xogo.pes3d .hud-dereita .rolda { flex-basis: auto; }
}
.radar { position: absolute; right: max(14px, 2.6vw); top: calc(env(safe-area-inset-top, 0px) + max(12px, 2.2vh) + 52px); background: var(--panel); border: 1px solid var(--filete-suave); padding: 8px 10px; display: grid; gap: 6px; }
.radar svg { width: 112px; height: auto; display: block; }
.pes-paneis {
  position: absolute; left: max(14px, 2.6vw); right: max(14px, 2.6vw); bottom: calc(env(safe-area-inset-bottom, 0px) + max(14px, 2.6vh));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
}
/* Paneis de abaixo: caixa escura coma no PES, coa cara pixelada, o dorsal e o nome, e debaixo
   só o que conta para o lanzamento (as habilidades que moven a barra ou o que se sabe do rival) */
.pes-panel {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  width: min(340px, calc(50% - 5px)); padding: 7px 12px 8px 8px; background: var(--panel); border: 1px solid var(--filete-suave);
  border-bottom: 3px solid var(--dourado);
  opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pes-panel.visible { opacity: 1; transform: none; }
.pes-panel.porteiro { margin-left: auto; border-bottom-color: #E3C83E; }
.pes-cara { width: 38px; height: 43px; display: grid; place-items: end center; overflow: hidden; }
.pes-cara img { width: 38px; height: 43px; max-width: none; image-rendering: pixelated; display: block; }
.pes-mono { width: 32px; height: 32px; margin-bottom: 4px; border-radius: 50%; border: 2px solid var(--crema); display: grid; place-items: center; font: 700 10px/1 var(--fonte); letter-spacing: 0.06em; color: var(--crema); }
.pes-txt { display: grid; gap: 5px; min-width: 0; }
.pes-nome { display: flex; gap: 0.45em; align-items: baseline; min-width: 0; font: 700 var(--txt)/1.15 var(--fonte); white-space: nowrap; }
.pes-nome-txt { overflow: hidden; text-overflow: ellipsis; }
.pes-nome-txt .c { display: none; }
.pes-num { color: var(--dourado); font-variant-numeric: tabular-nums; }
.pes-num:empty { display: none; }
.pes-datos { display: grid; column-gap: 8px; font: 700 9px/1 var(--fonte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
.pes-datos.texto { display: block; font: 500 calc(var(--eti) * 1.05)/1.25 var(--fonte); letter-spacing: 0.02em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pes-dato { display: grid; gap: 3px; min-width: 0; }
.pes-dato > span { display: flex; justify-content: space-between; gap: 4px; }
.pes-dato em { font-style: normal; }
.pes-dato .c { display: none; }
.pes-dato b { color: var(--crema); font-variant-numeric: tabular-nums; }
.pes-dato.top b { color: var(--dourado); }
.pes-dato > i { display: block; height: 3px; background: rgba(255, 255, 255, 0.14); }
.pes-dato > i > i { display: block; height: 100%; background: #9FCB6B; }
.pes-dato.top > i > i { background: var(--dourado); }
/* De resaca: etiqueta azul que latexa (coma a frecha de forma baixa do PES) */
.pes-tag {
  position: absolute; top: -9px; right: 8px; padding: 4px 6px 3px; background: #3F86D8; color: #F2EFE8;
  font: 700 9px/1 var(--fonte); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 0 0 2px rgba(8, 14, 11, 0.85);
  animation: forma-pulso 1.1s ease-in-out infinite;
}
.pes-tag[hidden] { display: none; }
@keyframes forma-pulso { 50% { box-shadow: 0 0 0 2px rgba(8, 14, 11, 0.85), 0 0 0 6px rgba(63, 134, 216, 0.3); } }
.pes-panel.resaca .pes-nome-txt { color: #A9CCF3; }
.narracion {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + max(14px, 2.6vh) + 82px); transform: translateX(-50%);
  margin: 0; width: max-content; max-width: min(34em, 46vw); text-align: center; font: 500 var(--txt)/1.4 var(--fonte); color: var(--branco);
  padding: 0.55em 1em; background: linear-gradient(180deg, rgba(16, 24, 21, 0), rgba(16, 24, 21, 0.55) 30%, rgba(16, 24, 21, 0.55) 70%, rgba(16, 24, 21, 0));
  opacity: 0; transition: opacity 0.35s; text-wrap: balance;
}
.narracion.visible { opacity: 1; }
.axuda-xogo { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 12.5vh); width: max-content; max-width: calc(100vw - 40px); text-align: center; color: var(--dourado); opacity: 0; transition: opacity 0.3s; padding: 0.7em 1.2em; background: radial-gradient(closest-side, rgba(10, 17, 14, 0.5), rgba(10, 17, 14, 0)); }
.axuda-xogo.visible { opacity: 1; }
/* Reloxo de lanzamento: os tres últimos segundos para chutar, entre a axuda e o traveseiro */
.reloxo {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 17vh); transform: translateX(-50%);
  margin: 0; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%;
  font: 700 clamp(20px, 3.6vmin, 32px)/1 var(--fonte); color: var(--branco); background: rgba(10, 17, 14, 0.62);
  box-shadow: inset 0 0 0 2px var(--dourado); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.reloxo.visible { opacity: 1; }
.reloxo.tic { animation: reloxo-tic 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes reloxo-tic { from { transform: translateX(-50%) scale(1.35); } to { transform: translateX(-50%) scale(1); } }
.splash { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 8.5vh); display: grid; justify-items: center; gap: 10px; opacity: 0; transform: scale(0.97); transition: opacity 0.25s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); text-align: center; padding: 0 16px; isolation: isolate; }
.splash::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(760px, 110vw); height: 190%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(10, 17, 14, 0.5), rgba(10, 17, 14, 0)); z-index: -1; }
@media (max-aspect-ratio: 4/5) { .splash { top: calc(env(safe-area-inset-top, 0px) + 13.5vh); } .axuda-xogo { top: calc(env(safe-area-inset-top, 0px) + 16vh); } .reloxo { top: calc(env(safe-area-inset-top, 0px) + 23vh); } }
.splash.visible { opacity: 1; transform: none; }
.splash-tit { margin: 0; font: 700 clamp(46px, 10vmin, 118px)/1 var(--fonte); letter-spacing: -0.015em; color: var(--branco); }
.splash-tit .ini { font-size: 1.55em; }
.splash.gol .splash-tit { color: var(--branco); }
.splash .eti { color: var(--dourado); }
.splash::after { content: ""; width: 0; height: 2px; background: var(--dourado); transition: width 0.6s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1); order: 1; }
.splash.visible::after { width: min(220px, 40vw); }
/* PES 3D: de día o campo é claro; os textos soltos do HUD levan máis contraste. */
.xogo.pes3d .splash::before { background: radial-gradient(closest-side, rgba(10, 17, 14, 0.74), rgba(10, 17, 14, 0)); }
.xogo.pes3d .axuda-xogo { background: radial-gradient(closest-side, rgba(10, 17, 14, 0.8), rgba(10, 17, 14, 0)); }
.xogo.pes3d .splash-tit, .xogo.pes3d .splash .eti, .xogo.pes3d .axuda-xogo, .xogo.pes3d .rolda, .xogo.pes3d .repe { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 16px rgba(0, 0, 0, 0.4); }
.xogo.pes3d .hud .icono { background: rgba(12, 20, 17, 0.62); }
.xogo.pes3d .hud-dereita .rolda { background: rgba(12, 20, 17, 0.62); padding: 0.55em 0.9em; }
.pilula {
  position: absolute; right: max(14px, 2.6vw); bottom: calc(env(safe-area-inset-bottom, 0px) + max(14px, 2.6vh) + 92px);
  appearance: none; background: var(--panel); color: var(--branco); border: 1px solid var(--filete);
  font: 700 var(--eti)/1 var(--fonte); letter-spacing: 0.16em; text-transform: uppercase; padding: 1em 1.3em; cursor: pointer;
}
.pilula:hover, .pilula.on { border-color: var(--dourado); color: var(--dourado); }
.pilula[hidden] { display: none; }
.repe { position: absolute; right: max(14px, 2.6vw); top: calc(env(safe-area-inset-top, 0px) + 10.5vh); display: flex; align-items: center; gap: 10px; color: var(--branco); }
.repe[hidden] { display: none; }
.repe-escudo { width: 26px; display: block; }
.xogo.repeticion::before, .xogo.repeticion::after { content: ""; position: absolute; left: 0; right: 0; height: 8.5vh; background: #0B120F; z-index: 1; pointer-events: none; }
.xogo.repeticion::before { top: 0; }
.xogo.repeticion::after { bottom: 0; }
.xogo.repeticion .marcador, .xogo.repeticion .pes-paneis, .xogo.repeticion .narracion, .xogo.repeticion .reloxo, .xogo.repeticion .hud-dereita, .xogo.repeticion .radar, .xogo.repeticion .axuda-xogo, .xogo.repeticion .pilula, .xogo.repeticion .avisos-logro { opacity: 0; }
.xogo.repeticion .repe { z-index: 2; }
/* Plano de cine da resaca: bandas negras máis altas e só a narración */
.xogo.cinematica::before, .xogo.cinematica::after { content: ""; position: absolute; left: 0; right: 0; height: 11vh; background: #07100C; z-index: 1; pointer-events: none; }
.xogo.cinematica::before { top: 0; }
.xogo.cinematica::after { bottom: 0; }
.xogo.cinematica .marcador, .xogo.cinematica .pes-paneis, .xogo.cinematica .hud-dereita, .xogo.cinematica .radar, .xogo.cinematica .axuda-xogo, .xogo.cinematica .pilula, .xogo.cinematica .avisos-logro { opacity: 0; }
.xogo.cinematica .narracion { z-index: 2; bottom: calc(env(safe-area-inset-bottom, 0px) + 11vh + 10px); }
.cine { top: calc(env(safe-area-inset-top, 0px) + 3.6vh); z-index: 2; color: #A9CCF3; }

@media (max-width: 600px) {
  .marcador { min-width: 0; padding: 8px 10px; }
  .marcador .fila { grid-template-columns: 2.6em minmax(0, 1fr) 1.2em; gap: 8px; }
  .punto { width: 8px; height: 8px; }
  .narracion { max-width: calc(100vw - 32px); bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
  .radar { display: none; }
  .pilula { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
  .hud.con-baile .narracion { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px + 3.6em); }
  .pes-panel { padding: 6px 8px 7px 6px; column-gap: 7px; }
  .pes-cara, .pes-cara img { width: 32px; height: 36px; }
  .pes-dato .l, .pes-nome-txt .l { display: none; }
  .pes-dato .c, .pes-nome-txt .c { display: inline; }
  .pes-datos { column-gap: 6px; }
}

/* Cortina de transición (a limpeza de pantalla dos menús de PES, co escudo) */
.cortina {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--verde-claro); transform: translateX(101%); pointer-events: none; z-index: 5;
  display: grid; place-items: center; border-left: 2px solid var(--dourado);
}
.cortina.entra { transform: translateX(0); transition: transform 0.32s cubic-bezier(0.7, 0, 0.3, 1); }
.cortina.sae { transform: translateX(-101%); transition: transform 0.36s cubic-bezier(0.7, 0, 0.3, 1); border-left: 0; border-right: 2px solid var(--dourado); }
.cortina-escudo { width: clamp(56px, 10vmin, 96px); }

/* Gran de película (≈10 %) */
.grao { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 6; opacity: 0.1; mix-blend-mode: overlay; background-size: 220px 220px; animation: grao 0.8s steps(5) infinite; }
@keyframes grao {
  0% { background-position: 0 0; } 20% { background-position: -61px 37px; } 40% { background-position: 83px -21px; }
  60% { background-position: -17px -93px; } 80% { background-position: 49px 71px; } 100% { background-position: 0 0; }
}
.sen-js { position: absolute; top: auto; right: var(--marxe); bottom: 40%; left: var(--marxe); }

/* Pantallas baixas (móbil en horizontal) */
@media (max-height: 520px) {
  :root { --tit: clamp(26px, 8vmin, 40px); --alto-marco: 36px; }
  .pantalla { gap: 12px; }
  .tit.xigante { font-size: clamp(38px, 12vmin, 60px); }
  .escudo-titulo { width: 52px; }
  .rival-carta { padding: 10px 14px; }
  .rival-lema { display: none; }
  .opcion { padding-top: 0.6em; padding-bottom: 0.6em; }
  .fin-marcador { font-size: clamp(64px, 24vmin, 110px); }
  .p-final .tit { font-size: clamp(30px, 9vmin, 48px); }
  .final-bloque { gap: 6px; }
  .marcador { padding: 6px 10px; }
  .marcador-tit { display: none; }
  .narracion { max-width: min(30em, 60vw); }
  .splash { top: calc(env(safe-area-inset-top, 0px) + 4vh); }
  .axuda-xogo { top: calc(env(safe-area-inset-top, 0px) + 5vh); }
  .reloxo { top: calc(env(safe-area-inset-top, 0px) + 13vh); }
}

@media (prefers-reduced-motion: reduce) {
  .grao { animation: none; }
  .preme { animation: none; }
  .pantalla { animation: none; }
  .cortina.entra, .cortina.sae { transition-duration: 0.01s; }
  .oco.escollido, .xog.escollido, .pes-tag { animation: none; }
  .reloxo.tic { animation: none; }
}