@charset "utf-8";
/* ============================================================================
   URABREAD — hoja de estilo
   Estetica: monitor CRT de fosforo ambar.
   El ambar de los monitores viejos es, casualmente, el color del pan: por eso
   la paleta de la marca funciona aqui sin forzarla.  El rosa y el morado de
   Yuu entran como fosforos secundarios, no mezclados con el crema de antes.

   REGLA DE ORO DE ESTE ARCHIVO
   Nada se esconde esperando una animacion.  Todo lo que se ve nace visible;
   las animaciones solo ocurren dentro de  .anima  , una clase que pone el JS.
   Si el JS no corre o el navegador no anima, la pagina se ve igual de completa.
   Los overlays que "desaparecen" nacen en opacity:0, nunca al reves.
   Y todo lo moderno va SIEMPRE detras de un valor normal que funcione solo.
   ========================================================================= */

/* ------------------------------------------------------------- FUENTES --- */
@font-face{
  font-family:'Mazzard';
  src:url('../font/mazzard-bold.woff2') format('woff2'),
      url('../font/mazzard-bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mazzard';
  src:url('../font/mazzard-extrabold.woff2') format('woff2'),
      url('../font/mazzard-extrabold.woff') format('woff');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mazzard';
  src:url('../font/mazzard-black.woff2') format('woff2'),
      url('../font/mazzard-black.woff') format('woff');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ------------------------------------------------------------- COLORES --- */
:root{
  /* el cristal */
  --pantalla:   #0a0710;
  --panel:      #150e1c;
  --panel-2:    #1e1428;
  --panel-3:    #2a1c36;

  /* fosforo ambar = pan */
  --fos:        #ffb24d;
  --fos-alto:   #ffe0b0;
  --fos-medio:  #d1893a;
  --fos-bajo:   #7c5220;
  --fos-humo:   rgba(255,178,77,.16);

  /* fosforos secundarios: los acentos de Yuu */
  --rosa:       #ff5c9e;
  --rosa-alto:  #ffb0d2;
  --morado:     #a874ff;
  --verde:      #5ce6a0;

  /* el mueble del monitor */
  --bisel:      #100c14;
  --bisel-luz:  #322a3a;

  /* colores de cada red (para que se reconozcan de un vistazo) */
  --c-twitch:#a970ff;
  --c-yt:#ff4d5e;
  --c-urapan:#ffb24d;
  --c-tiktok:#ff4d80;
  --c-discord:#7c88ff;
  --c-ig:#ff6ba3;
  --c-x:#d9d2e0;
  --c-arts:#5ce6a0;

  /* Cuanto se come el marco del televisor por cada lado.  Todo lo que no
     pueda quedar tapado por el bisel se separa usando estas dos medidas. */
  --marco-x:clamp(10px, 3.6vw, 76px);
  --marco-y:clamp(12px, 5.6vh, 78px);

  --mono:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'Roboto Mono',Menlo,monospace;
  --radio:12px;
}

/* --------------------------------------------------------------- BASE --- */
*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,p,figure{ margin:0; padding:0; }

/* Cualquier regla con clase le gana al display:none del atributo hidden.
   Esta linea evita ese clasico despiste. */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
  background:var(--bisel);
}

body{
  font-family:'Mazzard','Trebuchet MS',Verdana,system-ui,sans-serif;
  font-weight:700;
  color:var(--fos-alto);
  background:var(--pantalla);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
@supports (min-height:100dvh){ body{ min-height:100dvh; } }

img{ max-width:100%; height:auto; display:block; border:0; }
button{ font:inherit; color:inherit; }
b{ font-weight:900; }
a{ color:var(--fos); }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--fos); color:var(--pantalla);
  padding:12px 18px; border-radius:0 0 10px 0;
  font-weight:900; text-decoration:none;
}
.saltar:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--fos);
  outline-offset:3px;
}

/* ==========================================================================
   EL MONITOR
   Cuatro capas fijas encima de todo, sin capturar clics.  La mascara usa el
   truco de  box-shadow 0 0 0 100vmax : pinta de color todo lo que queda fuera
   del rectangulo redondeado, y asi la pantalla tiene esquinas ovaladas de
   verdad aunque el contenido de debajo siga desplazandose.
   ========================================================================= */
/* Invisible y sin tamano propio: existe solo para que el JS pueda leer sus
   coordenadas y saber donde termina el cristal. */
.zona-segura{
  position:fixed;
  top:var(--marco-y); right:var(--marco-x);
  bottom:var(--marco-y); left:var(--marco-x);
  pointer-events:none; visibility:hidden;
}

.crt{ position:fixed; inset:0; z-index:60; pointer-events:none; }

/* El SVG con la silueta del tubo: el mueble, el filo del cristal y el reflejo.
   Se estira a cualquier tamano, asi que la curvatura es siempre proporcional. */
.crt__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* el ambar de la pantalla lamiendo el metal de alrededor */
.crt__derrame{
  fill:none;
  stroke:var(--fos);
  stroke-width:0.9;
  opacity:.26;
}
/* filo del cristal: una linea clara arriba y sombra dura hacia dentro */
.crt__filo{
  stroke:rgba(236,242,250,.55);
  stroke-width:.5;
  filter:drop-shadow(0 0 1.1px rgba(0,0,0,.95));
}
.crt__filo{
  fill:none;
  stroke:rgba(255,224,176,.16);
  stroke-width:.35;
  vector-effect:non-scaling-stroke;
}

/* Las tres capas de efecto se recortan con la MISMA curva, para que terminen
   siguiendo el abombado del cristal y no en un borde recto.
   Si un navegador viejo no entiende clip-path:url(), simplemente no recorta:
   el mueble del SVG ya tapa los bordes igual. */
.crt__lineas,.crt__brillo,.crt__barra,.crt__vineta{
  -webkit-clip-path:url(#cristalCRT);
  clip-path:url(#cristalCRT);
}

/* lineas de barrido */
.crt__lineas{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.30) 2px 3px);
  opacity:.5;
}
.anima .crt__lineas{ animation:zumbido 5.2s steps(2,end) infinite; }
@keyframes zumbido{ 0%,96%{ opacity:.5; } 98%{ opacity:.4; } 100%{ opacity:.5; } }

/* La vinieta va aparte del mueble: al ir recortada por la curva, oscurece
   siguiendo el abombado y es lo que de verdad hace que el cristal parezca
   redondeado hacia fuera en vez de plano. */
.crt__vineta{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.72) 100%),
    radial-gradient(100% 130% at 50% 50%, transparent 46%, rgba(0,0,0,.26) 78%, rgba(0,0,0,.62) 100%);
}

/* el resplandor del tubo y la banda que baja despacio */
.crt__brillo{
  position:absolute; inset:0;
  background:
    radial-gradient(72% 52% at 50% 42%, var(--fos-humo), transparent 72%);
}
.crt__barra{
  position:absolute; left:0; right:0; height:26%;
  background:linear-gradient(180deg, transparent, rgba(255,224,176,.055), transparent);
  opacity:0;                                    /* si no anima, no se ve */
}
.anima .crt__barra{ opacity:1; animation:barrer 9s linear infinite; }
@keyframes barrer{ from{ transform:translateY(-30%); } to{ transform:translateY(400%); } }

/* fogonazo de encendido: nace invisible, asi que si no anima no tapa nada */
.encendido{
  position:fixed; inset:0; z-index:70; pointer-events:none;
  background:var(--fos-alto); opacity:0;
}
.anima .encendido{ animation:encender .75s ease-out forwards; }
@keyframes encender{
  0%  { opacity:1; transform:scaleY(.005); }
  40% { opacity:1; transform:scaleY(.005); }
  62% { opacity:.85; transform:scaleY(1); }
  100%{ opacity:0;  transform:scaleY(1); }
}

/* migas cayendo */
.migas-cayendo{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.miga{ position:absolute; top:-9vh; will-change:transform; animation:caer linear forwards; }
.miga img{ width:100%; }
@keyframes caer{
  0%  { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  8%  { opacity:.95; }
  92% { opacity:.95; }
  100%{ transform:translate3d(var(--desvio,30px),115vh,0) rotate(var(--giro,400deg)); opacity:0; }
}

/* ---------------------------------------------------------- ESCENARIO --- */
.escenario{
  position:relative; z-index:3;
  width:100%; max-width:480px; margin:0 auto;
  padding:calc(var(--marco-y) + 14px) calc(var(--marco-x) + 16px)
          calc(var(--marco-y) + 22px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:16px;
}
.lateral{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* ==========================================================================
   PANELES (todo lo que es "una ventana" del sistema)

   En pantallas anchas los paneles se giran un poco en 3D para que parezca
   que estan apoyados sobre el tubo y no pegados encima como una pegatina.
   El angulo es pequeno a proposito: lo justo para que se note la curva sin
   que el texto pierda nitidez.  Ojo: un transform convierte al elemento en
   el marco de referencia de sus hijos position:fixed, por eso Yuu y Yupi
   viven fuera de los paneles.
   ========================================================================= */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(255,178,77,.30);
  border-radius:var(--radio);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 26px rgba(255,178,77,.07);
}
.panel__barra{
  display:flex; align-items:center; gap:8px;
  padding:7px 12px;
  border-bottom:1px solid rgba(255,178,77,.24);
  background:linear-gradient(180deg, rgba(255,178,77,.11), rgba(255,178,77,.03));
  font-family:var(--mono);
  font-size:.6rem; font-weight:700; letter-spacing:.16em;
  color:var(--fos); text-transform:uppercase;
  border-radius:calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
}
.panel__punto{
  width:7px; height:7px; border-radius:50%;
  background:var(--verde); flex:0 0 auto;
  box-shadow:0 0 7px var(--verde);
}
.anima .panel__punto{ animation:latir 2.4s ease-in-out infinite; }
@keyframes latir{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.panel__barra span:last-child{ margin-left:auto; opacity:.5; }

/* ------------------------------------------------------------ PERFIL --- */
.perfil{ padding:20px 20px 4px; text-align:center; }

.perfil__foto{
  display:block; width:112px; height:112px; margin:0 auto;
  padding:0; background:var(--panel-2);
  border:2px solid var(--fos); border-radius:50%;
  cursor:pointer; overflow:hidden;
  box-shadow:0 0 18px rgba(255,178,77,.30), inset 0 0 14px rgba(0,0,0,.6);
  transition:transform .18s ease, box-shadow .18s ease;
}
.perfil__foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 34%;
  filter:saturate(.85) contrast(1.06);
}
.con-mouse .perfil__foto:hover{ transform:scale(1.05); box-shadow:0 0 28px rgba(255,178,77,.55); }
.perfil__foto:active{ transform:scale(.96); }
.perfil__foto.brinca{ animation:brinco .42s ease; }
@keyframes brinco{ 50%{ transform:translateY(-13px) scale(1.09); } }

.perfil__nombre{
  font-size:clamp(2.2rem,10.5vw,2.9rem); font-weight:900;
  line-height:1; margin-top:14px; letter-spacing:.01em;
  color:var(--fos-alto);
  /* aberracion cromatica: el rojo y el azul desalineados del tubo */
  text-shadow:
    -1.6px 0 0 rgba(255,92,158,.60),
     1.6px 0 0 rgba(108,190,255,.34),
     0 0 22px rgba(255,178,77,.55);
}
.anima .perfil__nombre{ animation:desvio 7s steps(1,end) infinite; }
@keyframes desvio{
  0%,93%,100%{ transform:translateX(0); }
  94%{ transform:translateX(-1.5px); }
  96%{ transform:translateX(1.5px); }
}

.perfil__alias{
  display:inline-block; margin-top:10px; padding:3px 12px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  color:var(--pantalla); background:var(--fos);
  border-radius:4px;
}
.perfil__bio{
  margin:12px auto 0; max-width:32ch;
  font-family:var(--mono); font-size:.78rem; line-height:1.6;
  color:var(--fos-medio);
}

/* -------------------------------------------------------------- REDES --- */
.redes{ display:flex; flex-direction:column; gap:8px; padding:18px 16px 4px; }

.red{
  --marca:var(--fos);
  position:relative;
  display:flex; align-items:center; gap:12px;
  min-height:58px; padding:9px 12px;
  background:rgba(255,178,77,.045);
  border:1px solid rgba(255,178,77,.26);
  border-radius:10px;
  color:var(--fos-alto); text-decoration:none;
  overflow:hidden;
  transition:background-color .16s ease, border-color .16s ease,
             box-shadow .16s ease, transform .12s ease;
}
/* el cursor del terminal a la izquierda */
.red::before{
  content:"›";
  position:absolute; left:2px;
  font-family:var(--mono); font-size:1rem; font-weight:700;
  color:var(--marca); opacity:0;
  transition:opacity .16s ease, transform .16s ease;
  transform:translateX(-4px);
}
.red__icono{
  flex:0 0 auto; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color:var(--marca);
  border:1px solid currentColor; border-radius:8px;
  background:rgba(0,0,0,.35);
  box-shadow:0 0 12px -2px currentColor, inset 0 0 10px -4px currentColor;
  transition:transform .18s ease;
}
.red__icono svg{ width:21px; height:21px; }
.red__txt{ display:flex; flex-direction:column; min-width:0; }
.red__txt b{ font-size:1rem; font-weight:900; letter-spacing:.02em; }
.red__txt small{
  font-family:var(--mono); font-size:.66rem; font-weight:400;
  color:var(--fos-medio); letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .16s ease;
}
.red__flecha{
  margin-left:auto; flex:0 0 auto;
  font-family:var(--mono); font-size:.95rem; color:var(--fos-medio);
  transition:transform .18s ease, color .18s ease;
}

.con-mouse .red:hover, .red:focus-visible{
  background:rgba(255,178,77,.11);
  border-color:var(--marca);
  box-shadow:0 0 18px -4px var(--marca), inset 0 0 22px -14px var(--marca);
  transform:translateX(3px);
}
.con-mouse .red:hover::before, .red:focus-visible::before{ opacity:1; transform:translateX(0); }
.con-mouse .red:hover .red__txt small, .red:focus-visible .red__txt small{ color:var(--fos); }
.con-mouse .red:hover .red__flecha, .red:focus-visible .red__flecha{
  transform:translateX(4px); color:var(--marca);
}
.con-mouse .red:hover .red__icono, .red:focus-visible .red__icono{ transform:scale(1.08); }
.red:active{ transform:translateX(1px) scale(.995); }

.red--twitch { --marca:var(--c-twitch); }
.red--yt     { --marca:var(--c-yt); }
.red--urapan { --marca:var(--c-urapan); }
.red--tiktok { --marca:var(--c-tiktok); }
.red--discord{ --marca:var(--c-discord); }
.red--ig     { --marca:var(--c-ig); }
.red--x      { --marca:var(--c-x); }
.red--arts   { --marca:var(--c-arts); }

.red--arts{
  background:rgba(92,230,160,.07);
  border-color:rgba(92,230,160,.36);
}

.anima .red{ animation:aparecer .34s ease-out both; }
.anima .red:nth-child(1){ animation-delay:.04s; }
.anima .red:nth-child(2){ animation-delay:.09s; }
.anima .red:nth-child(3){ animation-delay:.14s; }
.anima .red:nth-child(4){ animation-delay:.19s; }
.anima .red:nth-child(5){ animation-delay:.24s; }
.anima .red:nth-child(6){ animation-delay:.29s; }
.anima .red:nth-child(7){ animation-delay:.34s; }
.anima .red:nth-child(8){ animation-delay:.39s; }
@keyframes aparecer{
  from{ opacity:0; transform:translateX(-10px); }
  to  { opacity:1; transform:none; }
}

/* -------------------------------------------------------------- BARRA --- */
.barra{ display:flex; gap:7px; padding:14px 16px 18px; }

.barra__btn{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:9px 13px;
  background:rgba(255,178,77,.06);
  color:var(--fos);
  border:1px solid rgba(255,178,77,.32);
  border-radius:9px;
  font-family:var(--mono); font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.barra__btn svg{ width:17px; height:17px; flex:0 0 auto; }
.barra__btn--icono{ flex:0 0 50px; padding:9px; }
.con-mouse .barra__btn:hover{
  background:rgba(255,178,77,.16);
  box-shadow:0 0 16px -4px var(--fos);
  color:var(--fos-alto);
}
.barra__btn:active{ transform:scale(.97); }
.barra__btn.ok{ background:var(--verde); color:var(--pantalla); border-color:var(--verde); }
.barra__btn[aria-pressed="true"].barra__btn--icono{
  background:var(--rosa); color:var(--pantalla); border-color:var(--rosa);
  box-shadow:0 0 16px -3px var(--rosa);
}
.barra__btn.apagado{ opacity:.45; }

/* ------------------------------------------------------------- COCINA --- */
/* La barra de titulo tiene que ir pegada al borde del panel, pero el panel
   lleva relleno.  Con --pad y un margen negativo del mismo valor, la barra se
   sale justo lo que hace falta y no hay que envolver nada en mas divs. */
.cocina{ --pad:16px; padding:0 var(--pad) 18px; text-align:center; }
.cocina .panel__barra,
.fanart .panel__barra{ margin:0 calc(var(--pad) * -1) 14px; }
.cocina__titulo{
  font-size:1.3rem; font-weight:900; color:var(--fos-alto);
  text-shadow:0 0 16px rgba(255,178,77,.45);
}
.cocina__sub{
  font-family:var(--mono); font-size:.68rem; color:var(--fos-medio);
  margin-top:5px; line-height:1.5;
}

.cocina__fila{ display:flex; align-items:stretch; gap:10px; margin-top:14px; }

.tostadora{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:rgba(255,92,158,.06);
  border:1px solid rgba(255,92,158,.34); border-radius:10px;
  padding:13px 8px 9px; cursor:pointer;
  transition:background-color .14s ease, box-shadow .14s ease;
}
.con-mouse .tostadora:hover{ background:rgba(255,92,158,.13); box-shadow:0 0 20px -6px var(--rosa); }
.tostadora:active,.tostadora.usada{ transform:scale(.97); }
.tostadora__ranura{
  width:52px; height:6px; background:var(--pantalla);
  border:1px solid var(--rosa); border-radius:99px;
  margin-bottom:-4px; position:relative; z-index:2;
}
.tostadora__cuerpo{
  position:relative; width:76px; height:52px;
  background:linear-gradient(180deg, rgba(255,92,158,.26), rgba(255,92,158,.10));
  border:2px solid var(--rosa); border-radius:9px 9px 12px 12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 18px -6px var(--rosa), inset 0 0 16px -8px var(--rosa);
}
.tostadora__palanca{
  position:absolute; right:-8px; top:10px;
  width:10px; height:16px; background:var(--fos);
  border-radius:3px; transition:transform .18s ease;
  box-shadow:0 0 8px -2px var(--fos);
}
.tostadora.usada .tostadora__palanca{ transform:translateY(11px); }
.tostadora__cara{
  font-family:var(--mono); font-size:.8rem; font-weight:700;
  color:var(--rosa-alto); letter-spacing:.08em;
}
.tostadora__pie{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fos-medio);
}

.marcador{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(255,178,77,.05);
  border:1px solid rgba(255,178,77,.30); border-radius:10px;
  padding:11px 8px;
}
.marcador__num{
  font-family:var(--mono); font-size:2rem; font-weight:700; line-height:1;
  color:var(--fos); text-shadow:0 0 18px rgba(255,178,77,.6);
}
.marcador__num small{ font-size:.85rem; opacity:.45; }
.marcador__num.sube{ animation:brinco .45s ease; }
.marcador__lbl{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fos-medio); margin-top:3px;
}
.marcador__btn{
  margin-top:9px; padding:9px 13px; min-height:44px;
  background:transparent; color:var(--fos);
  border:1px solid var(--fos); border-radius:8px;
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color .14s ease, color .14s ease;
}
.con-mouse .marcador__btn:hover{ background:var(--fos); color:var(--pantalla); }
.marcador__btn:active{ transform:scale(.96); }

.cocina__pista{
  margin-top:12px; padding:9px 11px;
  font-family:var(--mono); font-size:.66rem; line-height:1.5;
  color:var(--fos-medio);
  background:rgba(0,0,0,.35);
  border:1px dashed rgba(255,178,77,.26); border-radius:8px;
}
.cocina__pista b{ color:var(--fos-alto); }

/* --------------------------------------------------- REPISA (Yuu+Yupi) --- */
.repisa{
  /* wrap obligatorio: el texto de abajo ocupa el 100% y sin esto se metería
     en la misma fila que Yuu y Yupi, aplastándolos. */
  display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:center; gap:8px;
  padding:12px 10px 9px;
  background:rgba(0,0,0,.30);
  border:1px dashed rgba(255,178,77,.22); border-radius:var(--radio);
}
.repisa__txt{
  width:100%; margin-top:6px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fos-bajo); text-align:center;
}

/* ------------------------------------------------------------ FAN ART --- */
.fanart{ --pad:16px; padding:0 var(--pad) 18px; text-align:center; }
.fanart__titulo{
  font-size:1.05rem; font-weight:900; color:var(--fos-alto);
  text-shadow:0 0 14px rgba(255,178,77,.4);
}
.fanart__marco{
  position:relative; display:block;
  width:100%; max-width:230px; margin:12px auto 0; padding:0;
  background:var(--panel-2);
  border:1px solid rgba(255,178,77,.34); border-radius:10px;
  overflow:hidden; cursor:pointer;
  transition:box-shadow .16s ease, border-color .16s ease;
}
.con-mouse .fanart__marco:hover{
  border-color:var(--fos); box-shadow:0 0 22px -5px var(--fos);
}
.fanart__marco:active{ transform:scale(.985); }
.fanart__img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  background:var(--panel-3); filter:saturate(.9);
}
@supports not (aspect-ratio:1/1){ .fanart__img{ height:230px; } }
.fanart__dado{
  position:absolute; right:6px; bottom:6px;
  width:30px; height:30px; line-height:26px;
  background:var(--pantalla); border:1px solid var(--fos);
  border-radius:7px; font-size:.85rem;
}
.fanart__credito{
  margin-top:9px; font-family:var(--mono); font-size:.7rem; color:var(--fos-medio);
}
.fanart__credito b{ color:var(--fos-alto); font-weight:700; }
.fanart__link{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:8px; padding:11px 15px; min-height:44px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--fos); border:1px solid rgba(255,178,77,.34); border-radius:8px;
  text-decoration:none;
  transition:background-color .16s ease, color .16s ease;
}
.con-mouse .fanart__link:hover{ background:var(--fos); color:var(--pantalla); }

/* ---------------------------------------------------------------- PIE --- */
.pie{
  text-align:center; padding:2px 6px 4px;
  font-family:var(--mono); font-size:.66rem; line-height:1.6;
  color:var(--fos-bajo);
}
.pie b{ color:var(--fos-medio); }
.pie__mini{ margin-top:3px; }
.pie a{ color:var(--fos-medio); }
.con-mouse .pie a:hover{ color:var(--fos); }
.anima .pie__pan{ display:inline-block; animation:latido 2.2s ease-in-out infinite; }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } }

/* ----------------------------------------------------------- PERIKOTE --- */
.perikote{
  position:fixed; left:0; bottom:calc(var(--marco-y) + 2px); z-index:6;
  width:112px; padding:0; margin:0;
  background:none; border:0; cursor:pointer;
  transform:translateX(-170px);
  filter:drop-shadow(0 0 10px rgba(255,178,77,.4)) saturate(.7) contrast(1.1);
}
.perikote img{ width:100%; }
.perikote.corre{ animation:cruzar var(--dur,9s) linear forwards; }
/* No cruza recto: baja hacia el centro y vuelve a subir, siguiendo la
   barriga del cristal, con un poco de inclinacion en cada extremo. */
@keyframes cruzar{
  0%  { transform:translateX(-170px) translateY(-2.2vh) rotate(-6deg); }
  50% { transform:translateX(50vw) translateY(0) rotate(0deg); }
  100%{ transform:translateX(calc(100vw + 170px)) translateY(-2.2vh) rotate(6deg); }
}
.perikote.cazado{ animation:none; transform:scale(0) rotate(160deg); transition:transform .3s ease; }

/* -------------------------------------------------------- YUU y YUPI --- */
/* Caja CUADRADA y fija con alto explicito.  Los dibujos tienen proporciones
   muy distintas entre si (uno es 300x234 y otro 300x680): con height:auto,
   cada cambio de expresion le cambiaba el tamano a la caja y con eso se iban
   al traste el area para agarrarla, la fisica y el layout. */
.yuu{
  position:relative; z-index:8;
  width:112px; height:112px;
  cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 0 14px rgba(255,178,77,.28));
}
.yuu__img{
  width:100%; height:100%;
  object-fit:contain; object-position:50% 100%;
  pointer-events:none; -webkit-user-drag:none; user-select:none;
}
.anima .yuu:not(.agarrada):not(.volviendo) .yuu__img{ animation:flotar 3.8s ease-in-out infinite; }
@keyframes flotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.yuu.agarrada .yuu__img,.yuu.volviendo .yuu__img{ animation:none; }
.yuu.agarrada{ cursor:grabbing; filter:drop-shadow(0 0 22px rgba(255,178,77,.5)); }

/* Yupi, el peluche.  Se queda en su sitio pero reacciona si lo tocas. */
.yupi{
  position:relative; z-index:7;
  width:64px; height:78px; padding:0;
  background:none; border:0; cursor:pointer;
  filter:drop-shadow(0 0 12px rgba(255,224,176,.22));
}
.yupi img{
  width:100%; height:100%; object-fit:contain; object-position:50% 100%;
  transition:transform .2s cubic-bezier(.2,1.5,.4,1);
}
.con-mouse .yupi:hover img{ transform:translateY(-5px) rotate(-5deg); }
.yupi.saltando img{ animation:yupiSalta .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes yupiSalta{
  0%{ transform:translateY(0) rotate(0); }
  35%{ transform:translateY(-26px) rotate(-14deg) scale(1.08); }
  70%{ transform:translateY(0) rotate(9deg) scale(.96); }
  100%{ transform:translateY(0) rotate(0) scale(1); }
}

/* globo de dialogo compartido por Yuu y Yupi */
.globo{
  position:absolute; left:50%; bottom:calc(100% + 5px);
  transform:translateX(-50%) scale(0);
  transform-origin:bottom center;
  background:var(--pantalla); color:var(--fos-alto);
  border:1px solid var(--fos); border-radius:8px;
  box-shadow:0 0 16px -4px var(--fos);
  padding:5px 10px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  text-align:center; pointer-events:none; z-index:9;
  max-width:min(62vw,220px); width:max-content;
  transition:transform .22s cubic-bezier(.2,1.5,.4,1);
}
.globo.visible{ transform:translateX(-50%) scale(1); }
.yuu.agarrada .globo,.yuu.volviendo .globo{ transform:translateX(-50%) scale(0); }

/* ------------------------------------------------------------ STICKERS --- */
/* z-index 2: por DEBAJO del contenido (.escenario va en 3).
   Es la unica forma de garantizar que un pan posado encima jamas se coma el
   clic de un enlace.  Apartarlo despues siempre llega tarde: los panes estan
   fijos a la pantalla y al hacer scroll son los botones los que se meten
   debajo.  Detras se siguen viendo en los margenes y se siguen arrastrando,
   pero ya no pueden estorbar a lo unico que la pagina tiene que hacer. */
.sticker{
  position:fixed; z-index:2;
  width:68px; height:68px;
  cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 0 10px rgba(255,178,77,.3));
  transition:transform .2s cubic-bezier(.2,1.4,.4,1);
}
.sticker img{ width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.sticker.agarrado{ cursor:grabbing; transition:none; }
/* Se van solos: si no, la pantalla acaba siendo una montana de pan. */
.sticker.caducando{ opacity:0; transition:opacity .7s ease; }

/* --------------------------------------------------------------- MODAL --- */
.modal{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:18px; }
.modal__fondo{ position:absolute; inset:0; background:rgba(4,2,7,.88); }
.modal__caja{
  position:relative; width:100%; max-width:560px;
  max-height:84vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel); color:var(--fos-alto);
  border:1px solid var(--fos); border-radius:var(--radio);
  box-shadow:0 0 40px -6px rgba(255,178,77,.35);
  padding:20px 18px 22px;
}
@supports (max-height:84dvh){ .modal__caja{ max-height:84dvh; } }
.anima .modal__caja{ animation:aparecer .26s ease-out both; }
.modal__x{
  position:absolute; top:9px; right:9px;
  width:36px; height:36px; padding:0;
  background:transparent; color:var(--fos);
  border:1px solid var(--fos); border-radius:8px;
  font-size:1.15rem; line-height:1; cursor:pointer;
}
.con-mouse .modal__x:hover{ background:var(--fos); color:var(--pantalla); }
.modal__titulo{
  font-size:1.3rem; font-weight:900; padding-right:42px;
  text-shadow:0 0 16px rgba(255,178,77,.45);
}
.modal__sub{ font-family:var(--mono); font-size:.68rem; color:var(--fos-medio); margin-top:5px; }

.album{
  display:grid; gap:9px; margin-top:15px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
.miga-card{
  position:relative; aspect-ratio:1/1;
  background:var(--panel-2);
  border:1px solid rgba(255,178,77,.3); border-radius:9px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:7px; width:100%;
}
@supports not (aspect-ratio:1/1){ .miga-card{ height:112px; } }
.miga-card img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); }
button.miga-card{ cursor:pointer; padding:0; font:inherit; color:inherit; }
.con-mouse button.miga-card:hover{ border-color:var(--fos); box-shadow:0 0 18px -4px var(--fos); }
button.miga-card:active{ transform:scale(.97); }
.miga-card__lbl{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(10,7,16,.92); color:var(--fos);
  font-family:var(--mono); font-size:.58rem; font-weight:700;
  padding:4px 4px; letter-spacing:.02em;
}
.miga-card--bloq{ background:rgba(0,0,0,.4); border-style:dashed; }
.miga-card__cerrado{
  font-family:var(--mono); font-size:.6rem; line-height:1.4; color:var(--fos-bajo);
}
.miga-card__cand{ font-size:1.2rem; display:block; margin-bottom:4px; opacity:.6; }

/* ------------------------------------------------------- VISOR GRANDE --- */
.visor{ position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; padding:20px; }
.visor__fondo{ position:absolute; inset:0; background:rgba(3,1,5,.94); cursor:zoom-out; }
.visor__caja{ position:relative; max-width:min(92vw,720px); text-align:center; }
.anima .visor__caja{ animation:aparecer .22s ease-out both; }
.visor__img{
  width:100%; max-height:74vh; object-fit:contain;
  border:1px solid var(--fos); border-radius:10px;
  box-shadow:0 0 60px -10px rgba(255,178,77,.4);
  background:var(--panel);
}
@supports (max-height:74dvh){ .visor__img{ max-height:74dvh; } }
.visor__pie{
  margin-top:11px; font-family:var(--mono); font-size:.72rem; color:var(--fos);
}
.visor__x{
  position:absolute; top:-14px; right:-6px;
  width:38px; height:38px; padding:0;
  background:var(--pantalla); color:var(--fos);
  border:1px solid var(--fos); border-radius:9px;
  font-size:1.15rem; line-height:1; cursor:pointer;
}
.con-mouse .visor__x:hover{ background:var(--fos); color:var(--pantalla); }

/* ---------------------------------------------------------- PREMIO -------- */
.premio{
  position:fixed; left:50%; top:calc(var(--marco-y) + 10px); z-index:52;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
  max-width:calc(100vw - 26px);
  background:var(--pantalla); color:var(--fos-alto);
  border:1px solid var(--fos); border-radius:9px;
  box-shadow:0 0 30px -6px var(--fos);
  padding:9px 14px;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
}
.anima .premio{ animation:premioEntra .4s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes premioEntra{
  from{ opacity:0; transform:translateX(-50%) translateY(-18px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
.premio__ico{ font-size:1.2rem; }
.premio small{ display:block; font-size:.66rem; font-weight:400; color:var(--fos-medio); }

/* ==========================================================================
   CELEBRACION AL COMPLETAR LAS 12
   ========================================================================= */
.fiesta{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.fiesta__fondo{ position:absolute; inset:0; background:rgba(3,1,6,.93); }
.fiesta__caja{ position:relative; text-align:center; max-width:520px; }
.fiesta__titulo{
  font-size:clamp(2.1rem,11vw,3.6rem); font-weight:900; line-height:1;
  color:var(--fos-alto);
  text-shadow:
    -2px 0 0 rgba(255,92,158,.7), 2px 0 0 rgba(108,190,255,.45),
    0 0 34px rgba(255,178,77,.75);
}
.anima .fiesta__titulo{ animation:pulsoFiesta 1.5s ease-in-out infinite; }
@keyframes pulsoFiesta{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
.fiesta__sub{
  margin-top:12px; font-family:var(--mono); font-size:.82rem; line-height:1.7;
  color:var(--fos);
}
.fiesta__yuu{ width:150px; height:150px; object-fit:contain; margin:14px auto 0; }
.anima .fiesta__yuu{ animation:flotar 2.6s ease-in-out infinite; }
.fiesta__btn{
  margin-top:18px; padding:13px 24px; min-height:48px;
  background:var(--fos); color:var(--pantalla);
  border:0; border-radius:9px;
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 0 30px -6px var(--fos);
}
.con-mouse .fiesta__btn:hover{ background:var(--fos-alto); }

/* --------------------------------------------------- AVISO DE WEBVIEW --- */
.aviso-webview{
  position:relative; z-index:30;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center;
  background:var(--fos); color:var(--pantalla);
  margin:var(--marco-y) var(--marco-x) 0;
  border-radius:8px;
  padding:9px 42px 9px 15px;
  font-family:var(--mono); font-size:.7rem; font-weight:700; text-align:center;
}
.aviso-webview__btn{
  background:var(--pantalla); color:var(--fos);
  border:0; border-radius:7px; padding:8px 13px; min-height:38px;
  font-family:inherit; font-size:.68rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.aviso-webview__x{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0;
  background:transparent; border:0; cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--pantalla);
}

/* ==========================================================================
   PANTALLAS GRANDES
   ========================================================================= */
@media (min-width:760px){
  .escenario{ max-width:520px; gap:18px; }
  .perfil{ padding:24px 24px 4px; }
  .perfil__foto{ width:124px; height:124px; }
  .redes{ padding:20px 20px 4px; gap:9px; }
  .red{ min-height:62px; padding:10px 14px; }
  .red__txt b{ font-size:1.05rem; }
  .barra{ padding:16px 20px 20px; }
  .cocina,.fanart{ --pad:20px; padding:0 var(--pad) 20px; }
  .perikote{ width:140px; }

  /* En PC sobra margen a los lados: Yuu sale a flotar y la repisa se colapsa
     a cero.  No puede llevar display:none, se llevaria a Yuu con ella. */
  .repisa{ margin:0; padding:0; border:0; background:none; height:0; }
  .repisa__txt{ display:none; }
  .yuu{ position:fixed; right:calc(var(--marco-x) + 14px); bottom:calc(var(--marco-y) + 8px); width:140px; height:140px; }
  .yupi{ position:fixed; right:calc(var(--marco-x) + 156px); bottom:calc(var(--marco-y) + 8px); width:76px; height:92px; }
}

/* Dos columnas: la tarjeta a la izquierda y lo demas al lado, para que en un
   monitor no quede una tira estrecha con medio escritorio vacio.  Si el
   navegador no soporta grid se ignora todo esto y se queda la columna flex. */
@media (min-width:1180px){
  .escenario{
    display:grid;
    grid-template-columns:minmax(0,520px) minmax(0,380px);
    justify-content:center; align-items:start;
    max-width:960px; gap:24px;
  }
  .tarjeta{ grid-column:1; grid-row:1; }
  .lateral{ grid-column:2; grid-row:1; }

  /* la columna izquierda mira hacia dentro y la derecha tambien, como si las
     dos envolvieran la barriga del tubo */
  .tarjeta{ transform:perspective(1600px) rotateY(1.6deg); }
  .cocina,.fanart{ transform:perspective(1600px) rotateY(-1.6deg); }
  .pie{ text-align:left; padding-left:2px; }
  .yuu{ right:calc(var(--marco-x) + 20px); bottom:calc(var(--marco-y) + 12px); width:150px; height:150px; }
  .yupi{ right:calc(var(--marco-x) + 172px); bottom:calc(var(--marco-y) + 12px); width:82px; height:98px; }
}

@media (min-width:1500px){
  .escenario{ max-width:1010px; gap:28px; }
  .tarjeta{ transform:perspective(1900px) rotateY(2.1deg); }
  .cocina,.fanart{ transform:perspective(1900px) rotateY(-2.1deg); }
  .yuu{ right:calc(var(--marco-x) + 30px); bottom:calc(var(--marco-y) + 18px); width:166px; height:166px; }
  .yupi{ right:calc(var(--marco-x) + 200px); bottom:calc(var(--marco-y) + 18px); width:90px; height:108px; }
}

@media (max-height:520px) and (min-width:600px){
  .yuu{ width:90px; height:90px; }
  .yupi{ width:52px; height:64px; right:calc(var(--marco-x) + 130px); }
  .escenario{ padding-top:18px; }
}

/* ==========================================================================
   MENOS MOVIMIENTO
   Se apaga el movimiento, NO la diversion: todo se sigue pudiendo tocar,
   arrastrar y coleccionar.  Solo dejan de moverse las cosas solas.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .migas-cayendo,.perikote,.crt__barra{ display:none !important; }
}

/* Alto contraste de Windows: que no desaparezca nada */
@media (forced-colors:active){
  .crt,.crt__lineas,.crt__brillo,.crt__barra,.encendido{ display:none !important; }
  .panel,.red,.barra__btn,.modal__caja{ border:1px solid CanvasText; }
}

/* Impresion: solo los enlaces, que es lo util */
@media print{
  .crt,.encendido,.migas-cayendo,.perikote,.yuu,.yupi,.cocina,.fanart,
  .barra,.aviso-webview,.modal,.visor,.fiesta{ display:none !important; }
  body{ background:#fff; color:#000; }
  .panel{ border:1px solid #000; }
  .red::after{ content:" (" attr(href) ")"; font-size:.7rem; }
}