/* =====================================================================
   Garabatazo — piezas comunes a los dos temas
   Cada tema es un paquete: temas/sol.css (cuaderno, v2, por defecto) y
   temas/luna.css (fanzine punk, v3), cada uno limitado a html[data-theme="…"].
   Aquí solo va lo que comparten: qué contenido es de cada tema y el botón sol/luna.
   ===================================================================== */

/* Contenido propio de cada tema (textos, iconos, adornos) */
html[data-theme="luna"] .solo-sol,
html[data-theme="sol"] .solo-luna,
html[data-theme="sol"] .rn-recorte,
html[data-theme="luna"] .rn-plano { display: none !important; }

/* Idioma: en inglés el cuerpo espera a que i18n traduzca el HTML (sin destello de español; red de seguridad en i18n.js) */
html[data-lang="en"]:not([data-i18n-listo]) body { visibility: hidden; }

/* ---------- Esquina superior derecha, en todas las pantallas: idioma (ES | EN) y estilo (sol / luna) ---------- */
.esquina {
  position: fixed; z-index: 45; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
.esquina > * { pointer-events: auto; }
.btn-tema {
  position: relative;
  width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: transform .08s;
}
.btn-tema svg { width: 24px; height: 24px; display: block; pointer-events: none; }
.btn-tema:active { transform: translate(2px, 2px); }
html[data-theme="sol"] .btn-tema .ico-sol,
html[data-theme="luna"] .btn-tema .ico-luna { display: none; }
/* en la pelea el botón va con los demás botones del HUD (no tapa las barras de vida) */
.btn-tema.en-hud { position: static; flex: none; }
body[data-pantalla="pantalla-pelea"] #esquina { display: none; }
/* …salvo bajo el aviso «Gira tu celular», que tapa el HUD */
@media (orientation: portrait) {
  body.tactil:not(.ignorar-giro)[data-pantalla="pantalla-pelea"] #esquina { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .btn-tema, .btn-idioma { transition: none; } }

/* ---------- Botón de idioma ES | EN (el idioma activo resaltado) ---------- */
.btn-idioma {
  height: 44px; min-width: 44px; padding: 0 8px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 3px;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: transform .08s; border-radius: 22px; white-space: nowrap;
}
.btn-idioma:active { transform: translate(2px, 2px); }
.btn-idioma .l-sep { opacity: .45; font-weight: 400; }
.btn-idioma .l-es, .btn-idioma .l-en { opacity: .45; padding: 2px 3px; border-radius: 4px; }
html[data-lang="es"] .btn-idioma .l-es, html[data-lang="en"] .btn-idioma .l-en { opacity: 1; }
.btn-idioma.en-hud { flex: none; }
html[data-theme="sol"] .btn-idioma { background: #fff; color: #22252b; border: 2px solid #22252b; box-shadow: 3px 3px 0 #22252b; }
html[data-theme="sol"][data-lang="es"] .btn-idioma .l-es, html[data-theme="sol"][data-lang="en"] .btn-idioma .l-en { background: #ffd23f; }
html[data-theme="sol"] .btn-idioma:focus-visible { outline: 3px solid #2f6fd6; outline-offset: 3px; }
html[data-theme="luna"] .btn-idioma { background: #0b0b0b; color: #fff; border: 0; box-shadow: 3px 3px 0 #ff3ea5; border-radius: 6px; font-family: 'Space Mono', ui-monospace, monospace; transform: rotate(-2deg); }
html[data-theme="luna"][data-lang="es"] .btn-idioma .l-es, html[data-theme="luna"][data-lang="en"] .btn-idioma .l-en { background: #f2ff3d; color: #0b0b0b; }
html[data-theme="luna"] .btn-idioma:focus-visible { outline: 3px dashed #ff3ea5; outline-offset: 3px; }
/* celular: botón cuadrado de 44 px con ES arriba y EN abajo (cabe en la columna de la esquina) */
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .btn-idioma { width: 44px; padding: 0; flex-direction: column; gap: 1px; font-size: 11px; border-radius: 12px; }
  .btn-idioma .l-sep { display: none; }
  .btn-idioma .l-es, .btn-idioma .l-en { padding: 1px 4px; line-height: 1.15; }
}
/* en la pelea con táctil en horizontal: columna izquierda, bajo salir y pantalla completa */
@media (orientation: landscape) {
  html[data-theme] body.tactil #btn-idioma-pelea { position: fixed; z-index: 6; opacity: .92; top: calc(112px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
}

/* ---------- Herramientas de forma (línea, rectángulo, óvalo): icono dibujado en SVG ---------- */
.herr .ico-forma { display: block; width: 22px; height: 22px; }
.herr .ico-forma svg { width: 100%; height: 100%; display: block; }
.herr .lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* celular en vertical: las 7 herramientas en una sola fila, solo con icono (menos texto; el nombre sigue en
   aria-label y title) — así el lienzo, las barras y las herramientas caben juntos en pantalla */
@media (max-width: 700px) {
  html[data-theme] .botones-herr { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  html[data-theme] .botones-herr .herr { min-height: 48px; min-width: 0; padding: 2px; }
  html[data-theme] .botones-herr .herr .lbl { display: none; }
  html[data-theme] .botones-herr .herr .ico { font-size: 22px; }
}
/* celular en horizontal: herramientas solo con icono, en 4 columnas (el nombre sigue en aria-label/title) */
@media (orientation: landscape) and (max-height: 520px) {
  html[data-theme] .botones-herr { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  html[data-theme] .botones-herr .herr { min-height: 44px; min-width: 0; padding: 2px; flex-direction: column; }
  html[data-theme] .botones-herr .herr .lbl { display: none; }
  html[data-theme] .botones-herr .herr .ico { font-size: 20px; }
}

/* ---------- Detalles plegables de la ficha (medidores, pistas, ayuda) ---------- */
.detalles > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; user-select: none; -webkit-user-select: none; }
.detalles > summary::-webkit-details-marker { display: none; }
.detalles > summary::after { content: "▾"; margin-left: auto; transition: transform .15s; }
.detalles[open] > summary::after { transform: rotate(180deg); }
/* abierto a mano en el celular en horizontal: se ve todo (el tema escondía medidores y textos para ahorrar alto) */
html[data-theme] .detalles[open] .rasgos { display: grid; }
html[data-theme] .detalles[open] .presupuesto { display: block; }
html[data-theme] .detalles[open] .pistas li { display: flex; }

/* ---------- Apoya el juego ---------- */
.apoyo-link { align-self: center; min-height: 44px; padding: 6px 14px; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.apoyo-card { max-width: 560px; }
.apoyo-cuerpo { display: flex; gap: 14px; align-items: center; margin: 10px 0; }
.apoyo-qr { flex: none; width: 168px; height: 168px; background: #fff; }
.apoyo-qr svg { width: 100%; height: 100%; display: block; }
.apoyo-datos { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.apoyo-datos p { margin: 0; }
.apoyo-dir {
  display: block; font: 600 14px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; word-break: break-all; overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all; padding: 8px 10px; letter-spacing: .02em;
}
.apoyo-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.apoyo-copiar { min-height: 44px; font-size: 18px; padding: 6px 18px; }
.apoyo-solscan { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: bold; }
/* confirmación para lectores de pantalla (la visible es el propio botón «¡Copiada!») */
.apoyo-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }
.apoyo-aviso { font-size: 14px; padding: 8px 10px; margin: 6px 0 0; }
@media (max-width: 560px) {
  .apoyo-cuerpo { flex-direction: column; align-items: stretch; }
  .apoyo-qr { align-self: center; width: 156px; height: 156px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .apoyo-qr { width: 132px; height: 132px; }
  .apoyo-card p { font-size: 13px; }
}

/* Sol: botón redondo de cuaderno */
html[data-theme="sol"] .btn-tema {
  background: #fff; color: #22252b; border: 2px solid #22252b; box-shadow: 3px 3px 0 #22252b;
}
html[data-theme="sol"] .btn-tema:focus-visible { outline: 3px solid #2f6fd6; outline-offset: 3px; }
/* Luna: sticker negro con la luna/sol fluor */
html[data-theme="luna"] .btn-tema {
  background: #0b0b0b; color: #f2ff3d; border: 0; box-shadow: 3px 3px 0 #ff3ea5; border-radius: 50%;
}
html[data-theme="luna"] .btn-tema:focus-visible { outline: 3px dashed #ff3ea5; outline-offset: 3px; }

/* Celular en vertical jugando igualmente: la presentación VS no cabe en la arena (16:9 de 390 px de ancho)
   y se salía por debajo, encima de los botones del HUD. Durante la presentación ocupa toda la pantalla. */
@media (orientation: portrait) {
  html[data-theme] body.tactil.ignorar-giro.intro .vs { position: fixed; inset: 0; z-index: 7; padding: calc(64px + env(safe-area-inset-top, 0px)) 4% 24px; border-radius: 0; }
  body.tactil.ignorar-giro.intro[data-pantalla="pantalla-pelea"] #esquina { display: flex; }
}

/* el panel de apoyo cabe siempre: si no entra en la pantalla (celular en horizontal), se desplaza por dentro */
html[data-theme] .modal .apoyo-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html[data-theme] .apoyo-datos, html[data-theme] .apoyo-card > p { text-align: left; }

/* Celular en vertical fuera de la pantalla de dibujo: idioma a la izquierda del sol/luna (en fila), y las
   cabeceras de torneos dejan sitio a la derecha. En el dibujo van en columna (la cabecera ya les deja hueco). */
@media (max-width: 700px) {
  body:not([data-pantalla="pantalla-dibujo"]) .esquina { flex-direction: row-reverse; align-items: flex-start; }
  html[data-theme] .torneo-cab { padding-right: 102px; }
  html[data-theme] .torneos-wrap .titulo { padding-left: 0; padding-right: 102px; }
}