/* TEMA VISUAL del proyecto de juegos: PAPEL RECORTADO, profundidad ALTA (inspiración: Paper Mario).
   Regla de oro del estilo: el papel es PLANO. Colores sólidos, un borde blanco de recorte y grano de papel. NADA de degradados brillantes, biseles ni
   luces interiores (eso se ve como plástico 3D). La profundidad sale de: (1) capas apiladas (hoja detrás, colinas, nubes), (2) una sombra proyectada
   corta y dura más una suave, y (3) la inclinación de cada pieza, como si estuvieran pegadas sobre la mesa.
   Compartido por Discover, editor, pantalla del profesor y del jugador. Cada inquilino pone SU marca con data-tema o las variables de abajo.
   Rendimiento: solo se animan transform y opacity; sombras, colores y grano son estáticos. */

/* ── Paletas (mundos). Por defecto: violeta, la de la marca. Se activa con <html data-tema="selva"> ── */
:root,[data-tema="violeta"]{
  --cielo1:#7F63F5;--cielo2:#6A4AEA;                    /* fondo: cielo (casi plano) */
  --c1:#7A5FF2;--c2:#6445E0;--c3:#4B2EC2;               /* colinas: lejos, medio, cerca */
  --papel:#FFFBF1;--papel2:#E4D9FF;--tinta:#241766;--suave:#6C64A6;--cinta:#FFD25A;
  --r1:#FF5C73;--r2:#4DA3FF;--r3:#FFD25A;--r4:#38D39F; /* respuestas: ▲ ◆ ● ■ */
  --marca:#6B4DF2;--marca-osc:#4A2FCB;                  /* botones de marca (planos) */
  --oro:#FFD25A;--oro-osc:#E0A800;
  --sh:34,16,110;                                      /* color de la sombra (r,g,b) */
}
[data-tema="carton"]{--cielo1:#F6E6CA;--cielo2:#EFD3A4;--c1:#E9B97A;--c2:#D9985B;--c3:#B87444;--papel:#FFFDF6;--papel2:#EFE0C4;--tinta:#4A3322;--suave:#8A6F55;--cinta:#FFCD78;--r1:#FF8A65;--r2:#7FB8E8;--r3:#FFD166;--r4:#8FD3A8;--marca:#D9743A;--marca-osc:#A5531F;--sh:90,58,26}
[data-tema="medianoche"]{--cielo1:#262B66;--cielo2:#171A44;--c1:#2D3470;--c2:#252B5F;--c3:#1B2050;--papel:#FFF6DF;--papel2:#D9C79B;--tinta:#2A2250;--suave:#7B76B0;--cinta:#FF78AA;--r1:#FF6F91;--r2:#6FA8FF;--r3:#FFC75F;--r4:#4FD1C5;--marca:#E0487F;--marca-osc:#A12A58;--sh:3,4,24}
[data-tema="selva"]{--cielo1:#BFEFB0;--cielo2:#8FDCA2;--c1:#8ED08B;--c2:#4FB477;--c3:#2E8F63;--papel:#FFFFFF;--papel2:#CFEAB9;--tinta:#1F4D3A;--suave:#5E8F78;--cinta:#FFD65A;--r1:#FF8F6B;--r2:#5FC8E8;--r3:#FFD54A;--r4:#6AD58B;--marca:#2FA868;--marca-osc:#1B7747;--sh:15,59,42}
[data-tema="oceano"]{--cielo1:#BFEAFF;--cielo2:#7ACBF2;--c1:#7CCBEF;--c2:#3AA9E0;--c3:#1F7FC4;--papel:#FFFFFF;--papel2:#BFE6F7;--tinta:#12395E;--suave:#5C83A8;--cinta:#FF8C78;--r1:#FF7A6B;--r2:#4DA3FF;--r3:#FFD36B;--r4:#6BE0B5;--marca:#2A93D4;--marca-osc:#1A68A3;--sh:11,47,84}

:root{
  --out:cubic-bezier(.23,1,.32,1);
  --grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Sombra proyectada de un papel levantado: una dura y corta (el borde del papel sobre la mesa) y una suave y larga (la distancia a la mesa). */
  --alto-1:3px 5px 0 rgba(var(--sh),.2),6px 16px 20px rgba(var(--sh),.24);
  --alto-2:5px 9px 0 rgba(var(--sh),.2),10px 28px 34px rgba(var(--sh),.3);
  --bajo:2px 3px 0 rgba(var(--sh),.22),3px 7px 10px rgba(var(--sh),.2);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html,body{overflow-x:clip}
body{font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--tinta);background:var(--cielo2);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}

/* ── Escenario: cielo, sol y tres colinas de papel apiladas (capa fija propia; paralaje al hacer scroll) ── */
.escenario{position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,var(--cielo1),var(--cielo2));overflow:hidden}
.escenario::after{content:"";position:absolute;inset:0;opacity:.08;background-image:var(--grano);background-size:140px 140px}
.escenario .sol{position:absolute;right:11%;bottom:27vh;width:92px;height:92px;border-radius:50%;background:#FFD66B;border:4px solid #fff;box-shadow:var(--bajo)}
.escenario .nube{position:absolute;height:42px;border-radius:42px;background:#fff;box-shadow:var(--bajo);opacity:.96}
.escenario .nube::before,.escenario .nube::after{content:"";position:absolute;background:#fff;border-radius:50%}
.escenario .nube::before{width:46px;height:46px;left:14%;top:-22px}.escenario .nube::after{width:62px;height:62px;right:16%;top:-30px}
.escenario .colina{position:absolute;left:-5%;right:-5%;bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;will-change:transform;border-top:4px solid rgba(255,255,255,.75);box-shadow:0 -6px 0 rgba(var(--sh),.12),0 -14px 26px rgba(var(--sh),.25)}
.escenario .c1{height:44vh;background:var(--c1)}
.escenario .c2{height:30vh;background:var(--c2);left:-30%;right:25%}
.escenario .c3{height:19vh;background:var(--c3);left:20%;right:-30%}

@keyframes entra{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.5) rotate(-8deg)}60%{opacity:1;transform:scale(1.14) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes brillo{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.entra{animation:entra .5s var(--out) backwards}
.pop{animation:pop .55s var(--out) both}

/* ── PAPEL: la pieza base. Cara plana con grano y borde blanco de recorte (::after), hoja apilada detrás (::before), cinta (.cin) y costura (.cos). ──
   La cara y la hoja de atrás son pseudo-elementos con z-index negativo dentro de su propio contexto (isolation) para que la hoja quede DETRÁS. */
/* REGLA DE NITIDEZ: la inclinación (--rot) se aplica SOLO a las hojas de papel (::before y ::after), nunca al contenido. Un texto inclinado se ve borroso;
   así el papel se ve torcido pero las letras y los cuadros de texto quedan rectos y nítidos. */
.papel{position:relative;isolation:isolate;transition:transform .3s var(--out)}
.papel::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:14px;background:var(--papel2);border:3px solid #fff;transform:translate(6px,8px) rotate(calc(var(--rot,0deg) + 1.8deg));box-shadow:var(--bajo);transition:transform .35s var(--out)}
.papel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;background-color:var(--papel);background-image:var(--grano);background-size:140px 140px;background-blend-mode:multiply;border:3px solid #fff;box-shadow:var(--alto-1);transform:rotate(var(--rot,0deg));transition:box-shadow .3s var(--out),transform .35s var(--out)}
.papel>.cin{position:absolute;left:50%;top:-12px;width:60px;height:20px;margin-left:-30px;background:var(--cinta);opacity:.9;transform:rotate(-3deg);z-index:2;pointer-events:none;clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.papel>.cos{position:absolute;inset:7px;border:1.6px dashed rgba(36,23,102,.24);border-radius:9px;pointer-events:none}
@media (hover:hover){.papel.vivo:hover{transform:translateY(-8px)}.papel.vivo:hover::after{box-shadow:var(--alto-2);transform:rotate(0deg)}.papel.vivo:hover::before{transform:translate(9px,11px) rotate(calc(var(--rot,0deg) + 3.4deg))}}

/* ── Botón-etiqueta: un papel de color plano, pegado sobre la mesa. Al tocarlo se aplasta contra la mesa (sombra corta). Sin degradados ni brillos. ── */
.b3{border:3px solid #fff;border-radius:14px;padding:12px 20px;font-weight:900;letter-spacing:.01em;color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:var(--marca);box-shadow:var(--alto-1);transition:transform .14s var(--out),box-shadow .14s var(--out)}
.b3:hover{transform:translateY(-3px);box-shadow:var(--alto-2)}
.b3:active{transform:translate(2px,3px);box-shadow:var(--bajo)}
.b3:disabled{opacity:.55;cursor:default;transform:none;box-shadow:var(--bajo)}
.b3.oro{background:var(--oro);color:#3B2A00}
.b3.claro{background:var(--papel);color:var(--marca-osc)}
.b3.rojo{background:#F2395B}
.b3 svg{flex:none}

/* ── Etiqueta de filtro: papelito pegado; la activa es oscura e inclinada ── */
.chip{border:3px solid #fff;border-radius:999px;padding:8px 15px;font-weight:900;font-size:14px;cursor:pointer;color:var(--tinta);display:inline-flex;align-items:center;gap:7px;background:var(--papel);box-shadow:var(--bajo);transition:transform .2s var(--out),box-shadow .2s var(--out),background-color .2s,color .2s}
.chip:hover{transform:translateY(-3px);box-shadow:var(--alto-1)}
.chip:active{transform:translate(1px,2px);box-shadow:none}
.chip[aria-pressed=true]{color:#fff;background:var(--tinta);transform:translateY(-3px);box-shadow:var(--alto-1)}
.chip svg{width:16px;height:16px;flex:none}
.campo-sel{border:3px solid #fff;border-radius:999px;padding:9px 14px;font-weight:900;font-size:14px;color:var(--tinta);cursor:pointer;background:var(--papel);box-shadow:var(--bajo)}

/* ── Selector de tema (tema.js) ── */
.tm-caja{position:relative;display:inline-block}
.tm-sw{display:inline-flex}.tm-sw i{width:14px;height:14px;border-radius:50%;border:2px solid #fff;margin-left:-5px;box-shadow:1px 1px 0 rgba(0,0,0,.2)}.tm-sw i:first-child{margin-left:0}
.tm-pop{position:absolute;right:0;top:calc(100% + 14px);z-index:30;padding:10px;display:flex;flex-direction:column;gap:4px;min-width:178px;--rot:-1deg}
.tm-pop[hidden]{display:none}
.tm-op{border:0;background:transparent;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:10px;font-weight:900;color:var(--tinta);cursor:pointer;text-align:left;transition:transform .15s var(--out),background-color .15s}
.tm-op:hover{background:var(--papel2);transform:translateX(3px)}
.tm-fila{display:inline-flex}.tm-fila i{width:18px;height:18px;border-radius:50%;border:2px solid #fff;margin-left:-6px;box-shadow:1px 1px 0 rgba(0,0,0,.2)}.tm-fila i:first-child{margin-left:0}

/* ── Hoja: el papel de las tarjetas de las pantallas de juego (en el tema Violeta es un beige cálido, como el collage de referencia). Cada tema puede definir la suya. ── */
:root{--hoja:var(--papel)}
[data-tema="violeta"]{--hoja:#F6EEDC}
.papel.hoja::after{background-color:var(--hoja)}

/* ── Bocadillo: la mascota con un globo de texto (instrucciones y puntos de ayuda; ver mascota.js) ── */
.bocadillo{display:flex;gap:12px;align-items:flex-end}
.bocadillo>svg{flex:none;width:72px;height:auto;filter:drop-shadow(2px 5px 0 rgba(var(--sh),.25))}
.bocadillo>.txt{position:relative;background:var(--hoja);color:var(--tinta);border:3px solid #fff;border-radius:16px 16px 16px 4px;padding:10px 14px;font-weight:800;line-height:1.35;box-shadow:var(--alto-1)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}