/* ======================================================================
   kek-iframe.css — estilos del overlay del iframe de Kekspace.
   Extraido del <style> embebido en index.html para que se pueda copiar
   tal cual a una build ya compilada: este archivo NO tiene ninguna macro de Unity
   (triple-brace) ni directiva #if del preprocesador.
   Lo referencia index.html con <link rel="stylesheet" href="kek-iframe.css">.
   La estructura HTML (#kek-iframe-layer y sus hijos) sigue en index.html.
   ====================================================================== */

/* ==================================================================
   KekIframe: UN SOLO overlay para los dos modos.
   La clase de modo que lleva #kek-iframe-layer decide como se dibuja:
     .kek-mode-full  -> pantalla completa, sin marco (lo ya probado)
     .kek-mode-popup -> ventana flotante con titlebar, marco y cerrar
     .kek-mode-max   -> se SUMA a .kek-mode-popup: la ventana ocupa todo el
                        contenedor pero conserva el titlebar (restaurar/cerrar)
   El <iframe> NUNCA cambia de contenedor: moverlo en el DOM lo recarga
   desde cero, asi que los dos modos comparten la misma estructura.
   ================================================================== */

/* La fuente de los titulos de Kekspace. El TMP "Jersey10-Regular SDF"
   referencia por GUID a Assets/Resources/Fonts & Materials/Jersey20-Regular.ttf
   (el nombre del .asset engania: el TTF fuente es el Jersey 20), y ese es el
   archivo copiado aca al lado. Se le pone un nombre propio para no chocar con
   una "Jersey 20" que el jugador pueda tener instalada, y queda la pila
   generica de antes como fallback: si el .ttf no se copio a la build, el
   titulo sigue siendo legible. CERO dependencias externas (ningun CDN). */
@font-face {
  font-family: "KekJersey";
  src: url("kek-ui/Jersey20-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* El overlay cubre el contenedor pero NO recibe clicks: asi lo que quede
   fuera de la ventana sigue llegando a Unity. En popup eso es lo correcto
   para una ventana flotante (clickear afuera sigue moviendo al personaje).
   Solo #kek-iframe-window vuelve a pointer-events: auto. */
#kek-iframe-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  pointer-events: none;

  /* Factor de escala de la UI del marco. Lo recalcula el JS como
     altoDelContenedor / 1080, que es EXACTAMENTE el factor del CanvasScaler
     de Kekspace (referenceResolution 1920x1080, screenMatchMode = Match
     Width Or Height, match = 1 => Height). Por eso todos los numeros de
     abajo son unidades de canvas de Unity leidas del prefab de las ventanas,
     y a escala 1 (contenedor de 1080 px de alto) salen 1:1 en pixeles.
     Clampeado a un minimo en el JS. */
  --kek-scale: 1;

  /* Desplazamiento del arrastre respecto del centro. Lo escribe el JS. */
  --kek-dx: 0px;
  --kek-dy: 0px;
}

#kek-iframe-layer.kek-open { display: block; }

#kek-iframe-window {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
}

#kek-iframe-content {
  position: relative;
  box-sizing: border-box;
}

#kek-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

/* ---------------- Modo pantalla completa (el ya probado) ----------------
   Tiene que quedar visualmente IDENTICO al overlay original: la ventana
   ocupa todo el contenedor, sin marco ni fondo, sin titlebar, y el iframe
   pegado a los cuatro bordes. */
.kek-mode-full #kek-iframe-window {
  inset: 0;
  border: 0;
  background: transparent;
}

.kek-mode-full #kek-iframe-titlebar { display: none; }

.kek-mode-full #kek-iframe-content {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

/* ---------------------------- Modo popup ---------------------------- */

.kek-mode-popup #kek-iframe-window {
  /* Tamanio relativo al contenedor. El minijuego embebido corre con
     Phaser.Scale.NONE y deriva su canvas del tamanio de SU contenedor,
     asi que se adapta a lo que le demos: no hay aspect ratio a respetar.
     Los max-* son el seguro de que nunca se salga del contenedor. */
  width: 78%;
  height: 78%;
  max-width: 100%;
  max-height: 100%;

  /* Centrada, mas el desplazamiento del arrastre (que el JS clampea para
     que la ventana no se pueda sacar del contenedor). */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--kek-dx, 0px), var(--kek-dy, 0px));

  display: flex;
  flex-direction: column;
}

.kek-mode-popup #kek-iframe-titlebar {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;

  /* 43.844 = alto exacto de "Top-Content" en Window-Content.prefab, el
     titlebar de TODAS las ventanas de Kekspace (la de Emojis incluida).
     Toda la jerarquia del prefab tiene localScale 1, asi que el sizeDelta
     ES el tamanio final en unidades de canvas. */
  height: calc(43.844px * var(--kek-scale));

  display: flex;
  align-items: center;

  /* 9-slice de Content.png (192x176).
     Unity guarda el borde como (izq, abajo, der, arriba) = (64, 0, 64, 0);
     CSS lo pide como (arriba, der, abajo, izq) = (0, 64, 0, 64).
     15.38 = el grosor en unidades de canvas con el que lo dibuja Unity:
     64 px / (spritePixelsToUnits 32 / referencePixelsPerUnit 100 *
     PixelsPerUnitMultiplier 13) = 64 / 4.16.
     border-style + border-width son OBLIGATORIOS: sin un border-width que
     acompanie, border-image no dibuja NADA.
     border-image-source y background-image los puede PISAR el JS con una
     copia teñida con el color del tema (ver kekApplyThemeColor): los DOS,
     porque el medio y las puntas se dibujan por caminos distintos (abajo). */
  --kek-cap: calc(15.38px * var(--kek-scale));

  /* ---- POR QUE EL MEDIO NO VA CON "fill" ----
     Chrome dibuja cada pieza del border-image por separado, con antialias
     en sus bordes. Las uniones cap/medio caen en posicion FRACCIONARIA de
     pixel de dispositivo (la ventana esta centrada con translate(-50%) de
     un 78%, y el cap mide 15.38 * escala), asi que en esa columna las dos
     piezas se dibujan con cobertura parcial (f y 1-f) y por el hueco se
     filtra el fondo: f*(1-f) del canvas de Unity, hasta un 25%. Eso era la
     "linea negra" de la union. No es el muestreo (pixelated o no, la linea
     aparece igual; medido en Chrome headless), y snapear la posicion por JS
     no alcanza porque Blink redondea offsets internos que
     getBoundingClientRect no expone.
     Solucion: que debajo de cada union haya el MISMO arte, asi lo que se
     filtra es del mismo color. Las puntas (cols 0-64 y 128-192) las sigue
     dibujando border-image, SIN fill; la banda del medio (cols 64-128) va
     como background-image estirada y recortada al padding-box, que empieza
     1px ADENTRO de cada cap (border-width = cap - 1px): el borde antialiasado
     del cap cae sobre la banda opaca y el de la banda cae debajo del cap
     opaco. La banda nunca llega a las esquinas redondeadas (el padding-box
     arranca donde el PNG ya es recto: la curva termina en la col 62). */
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--kek-cap) - 1px);
  border-image-source: url("kek-ui/Content.png");
  border-image-slice: 0 64 0 64;
  border-image-width: 0 var(--kek-cap);
  border-image-repeat: stretch;

  /* Banda del medio: con background-size 300% el PNG mide 3 anchos, y
     background-position-x 50% lo corre -1 ancho, asi que en el padding-box
     quedan exactamente las cols 64..128 estiradas. Verticalmente 100% =
     el mismo mapeo de las 176 filas que hacen las piezas. */
  background-image: url("kek-ui/Content.png");
  background-origin: padding-box;
  background-clip: padding-box;
  background-size: 300% 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;

  /* Pixel art: que el navegador no lo suavice. Vale para las piezas y para
     la banda; verificado que NO es la causa de la linea de la union. */
  image-rendering: pixelated;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Sin esto, arrastrar con el dedo scrollea la pagina en vez de mover
     la ventana. */
  touch-action: none;
}

.kek-mode-popup #kek-iframe-titlebar:active { cursor: grabbing; }

#kek-iframe-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  /* Compensa el ancho de los DOS botones de la derecha (maximizar + cerrar,
     26.01 cada uno, mas el margen entre ellos) para que el texto quede
     centrado respecto de la VENTANA y no del hueco que dejan los botones.
     TIENE que valer 2 * width de .kek-iframe-button + margin-right de
     #kek-iframe-max. */
  padding-left: calc((26.01px + 26.01px + 4px) * var(--kek-scale));

  /* Valores del Title-Text de Window-Content.prefab: fuente
     Jersey10-Regular SDF (TTF: Jersey20-Regular.ttf), fontSize 21.5 y
     characterSpacing -8.1. El characterSpacing de TMP es un PORCENTAJE del
     tamanio de fuente, asi que en unidades son 21.5 * -8.1 / 100 = -1.74.
     No lleva font-weight: bold: el Jersey tiene un solo peso y el bold
     sintetico del navegador le arruina el pixel art. */
  font-family: "KekJersey", Verdana, Geneva, "DejaVu Sans", sans-serif;
  font-size: calc(21.5px * var(--kek-scale));
  line-height: 1;
  letter-spacing: calc(-1.74px * var(--kek-scale));
  color: #ffffff;
  text-shadow: 0 calc(2px * var(--kek-scale)) 0 rgba(0, 0, 0, 0.55);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* El texto no tiene que robarle el pointerdown al titlebar: el arrastre
     se engancha en el titlebar, no aca. */
  pointer-events: none;
}

/* ---- Botones del titlebar: maximizar y cerrar ----
   Los dos son el mismo boton COMPUESTO de Unity (Close-IconButton.prefab):
   fondo Close/Small (rojo fijo, NO se tiñe: su Image va en blanco y sin
   ThemeColorImageView) + un icono encima. El fondo es el que cambia por
   estado (SpriteState del Button: Hover / Selected al apretar / Disabled);
   el icono queda fijo y solo se anima al apretar (IconButtonView). */
.kek-iframe-button {
  flex: 0 0 auto;
  position: relative;

  /* 26.01 x 27.065 = el rect exacto de "Close-IconButton" dentro del
     titlebar de Window-Content.prefab. Mantiene la proporcion del PNG
     (104x108), asi que el background-size: contain de abajo no lo
     letterboxea.
     Si cambia este width hay que mover el padding-left de
     #kek-iframe-title. */
  width: calc(26.01px * var(--kek-scale));
  height: calc(27.065px * var(--kek-scale));
  padding: 0;
  border: 0;
  background-color: transparent;

  /* Sin 9-slice a proposito: el boton es de tamanio fijo y con la misma
     proporcion que el PNG, asi que se dibuja el PNG completo escalado.
     contain + center es lo que hace que la diferencia de 4px del
     Selected (104x104 contra los 104x108 del resto) se lea como un
     HUNDIDO al apretar y no como un estiramiento. */
  background-image: url("kek-ui/UI_Button_Default_Close.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  image-rendering: pixelated;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  /* Los botones no son parte del arrastre del titlebar. */
  touch-action: manipulation;
}

.kek-iframe-button:hover { background-image: url("kek-ui/UI_Button_Hover_Close.png"); }
.kek-iframe-button:active { background-image: url("kek-ui/UI_Button_Selected_Close.png"); }
/* kek-ui/UI_Button_Disabled_Close.png queda copiado pero sin usar: estos
   botones nunca se deshabilitan. */

/* Separacion entre maximizar y cerrar. Si cambia hay que mover el
   padding-left de #kek-iframe-title. */
#kek-iframe-max { margin-right: calc(4px * var(--kek-scale)); }

/* El icono, centrado sobre el fondo. 18.333 = 26.01 - 7.6768 de margen
   (sizeDelta del Icon-Image en Close-IconButton.prefab); es Simple +
   preserveAspect, asi que es un cuadrado. anchoredPosition.y = 0.66: el
   icono vive 0.66 unidades por encima del centro. Es un master gris claro
   (196,205,212) con contorno oscuro que Unity dibuja tal cual (Image.color
   blanco, sin ThemeColorImageView), asi que aca tampoco se tiñe.
   Sin pointer-events: el click lo recibe el <button> de abajo y el
   arrastre del titlebar ya ignora todo lo que este dentro del boton. */
.kek-iframe-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(18.333px * var(--kek-scale));
  height: calc(18.333px * var(--kek-scale));
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(calc(-0.66px * var(--kek-scale)));
}

/* Al apretar, IconButtonView encoge el icono a 0.7 y lo baja 5 unidades
   (_decreaseScaleFactor 0.7, _decreasePositionFactor 5): 0.66 - 5 = -4.34. */
.kek-iframe-button:active .kek-iframe-icon {
  transform: translate(-50%, -50%) translateY(calc(4.34px * var(--kek-scale))) scale(0.7);
}

#kek-iframe-close-icon {
  background-image: url("kek-ui/UI_Icon_Close_Default.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

/* El glifo de maximizar/restaurar es un SVG inline en index.html:
   PLACEHOLDER. En el set de sprites de UIComponents no hay ningun icono de
   expandir/maximizar; cuando el artista lo entregue se reemplaza por un PNG
   en kek-ui/ y una regla como la de #kek-iframe-close-icon.
   Colores calcados del icono de cerrar: relleno (196,205,212) y contorno
   (23,36,44). Cual de los dos dibujos se ve lo decide la clase de modo. */
#kek-iframe-max-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#kek-iframe-max-icon .kek-glyph-outline {
  fill: none;
  stroke: #17242c;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

#kek-iframe-max-icon .kek-glyph-fill {
  fill: none;
  stroke: #c4cdd4;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

#kek-iframe-max-icon .kek-glyph-restore { display: none; }
.kek-mode-max #kek-iframe-max-icon .kek-glyph-expand { display: none; }
.kek-mode-max #kek-iframe-max-icon .kek-glyph-restore { display: block; }

/* ---------------------------- Modo maximizado ----------------------------
   TERCER estado, SUMADO a .kek-mode-popup (no lo reemplaza): asi el
   titlebar conserva todo su estilo y sigue visible arriba, que es el pedido
   del usuario (para poder restaurar y cerrar). Solo se pisa la geometria
   de la ventana: ocupa todo el contenedor y deja de responder al arrastre
   (--kek-dx/--kek-dy quedan guardados para la restauracion, ver JS).
   NO toca .kek-mode-full, que es el modo que elige el bool desde C#. */
.kek-mode-popup.kek-mode-max #kek-iframe-window {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.kek-mode-popup.kek-mode-max #kek-iframe-titlebar,
.kek-mode-popup.kek-mode-max #kek-iframe-titlebar:active { cursor: default; }

.kek-mode-popup #kek-iframe-content {
  flex: 1 1 auto;
  min-height: 0;

  /* La mascara de recorte: el contenido del iframe no se escapa del marco.
     Recorta la caja de padding, asi que NO afecta al border-image. */
  overflow: hidden;

  /* ---------------- MARCO DEL CUERPO: APAGADO ----------------
     El juego tiene que llegar a los bordes de la ventana, sin margenes.
     Con el borde en 0 el 9-slice de UI_Panel_Default_Background.png ya no
     dibujaria ni esquinas ni laterales: lo unico que quedaria del sprite
     es su centro plano (un gris #B3B3B3, porque ese panel NO esta teñido
     por el tema: su Image va en blanco y sin ThemeColorImageView), tapado
     al 100% por el iframe. Era decodificar un PNG de 52 KB en cada
     apertura para no mostrar nada, asi que se apaga entero.

     >>> PARA TRAER LOS MARGENES DE VUELTA: descomentar el bloque de abajo.
         Los numeros son los que habia (y son los de Unity: el borde del
         sprite es (izq, abajo, der, arriba) = (78, 93, 78, 0) y
         PixelsPerUnitMultiplier 3.91, o sea 78/3.91 = 19.95 de lado y
         93/3.91 = 23.79 abajo; arriba es 0 porque el panel esta disenado
         para vivir debajo de un titlebar). border-width y
         border-image-width TIENEN que moverse juntos: si no, CSS reserva
         un grosor y dibuja otro.

     border-style: solid;
     border-color: transparent;
     border-width: 0 calc(19.95px * var(--kek-scale)) calc(23.79px * var(--kek-scale));
     border-image-source: url("kek-ui/UI_Panel_Default_Background.png");
     border-image-slice: 0 78 93 78 fill;
     border-image-width: 0 calc(19.95px * var(--kek-scale)) calc(23.79px * var(--kek-scale));
     border-image-repeat: stretch;
     ----------------------------------------------------------- */
  border: 0;

  image-rendering: pixelated;
}