/* ============================================================
   TECLEA · Juegos, logros, tienda, retos y temas de color
   ============================================================ */

/* ── Retos ── */
.reto { align-items: center; }
.reto__ic { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: color-mix(in srgb, var(--primario) 16%, transparent); color: var(--primario); }
.reto__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.reto__tit { font-weight: 800; }
.reto__barra { display: block; height: .5rem; border-radius: 99px; background: color-mix(in srgb, var(--texto) 12%, transparent); overflow: hidden; }
.reto__barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primario), var(--sol-400)); transition: width .6s var(--suave); }
.reto--hecho { opacity: .7; }
.reto--hecho .reto__ic { background: var(--menta-500); color: #06261D; }
.reto--listo { outline: 2px solid var(--sol-400); }

/* ── Juegos: menú ── */
.juegos__cab { margin-bottom: var(--e4); }
.juegos__rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.juego-tarjeta { --g1: var(--violeta-400); --g2: #4F6BFF; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: var(--e5); text-align: left; color: #fff; border: 0; border-radius: var(--r-xl, 1.5rem); cursor: pointer;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--g1) 70%, #fff) 0%, transparent 55%), linear-gradient(145deg, var(--g1), var(--g2)); box-shadow: 0 10px 28px -12px var(--g2); transition: transform .25s var(--resorte), box-shadow .25s; overflow: hidden; }
.juego-tarjeta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 40%); pointer-events: none; }
.juego-tarjeta:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 18px 36px -14px var(--g2); }
.juego-tarjeta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.juego-tarjeta__ic { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; background: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.juego-tarjeta strong { font: 600 1.25rem var(--fuente-titulo); }
.juego-tarjeta > span:not([class]) { font-size: .95rem; opacity: .95; }
.juego-tarjeta__mejor { opacity: .85; font-weight: 700; }
.juego-tarjeta__jugar { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; padding: .45rem .9rem; border-radius: 99px; background: rgba(255,255,255,.95); color: #1a1633; font-weight: 800; }
[data-estilo="pro"] .juego-tarjeta { border-radius: var(--r-lg); }

/* ── Juegos: partida ── */
.jg__barra { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.jg__barra h1 { font-size: 1.3rem; }
.jg { position: relative; display: flex; flex-direction: column; gap: var(--e3); outline: none; }
.jg__hud { display: flex; flex-wrap: wrap; gap: var(--e3); }
.jg__campo { position: relative; height: min(52vh, 26rem); border-radius: var(--r-xl, 1.5rem); overflow: hidden; border: 2px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--primario) 22%, transparent), transparent 70%), var(--superficie); }
.jg__campo--lluvia::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, #FF6B5B 0 14px, transparent 14px 24px); }
.jg__palabra { position: absolute; top: -2.5rem; padding: .3rem .9rem; border-radius: 99px; font: 700 1.25rem var(--fuente-titulo); background: var(--superficie-2); border: 2px solid transparent; white-space: nowrap; will-change: transform; }
.jg__palabra--sel { border-color: var(--primario); background: color-mix(in srgb, var(--primario) 20%, var(--superficie)); }
.jg__palabra--boom { animation: jg-boom .25s ease-out forwards; }
.jg__palabra--cae { background: #FF6B5B; color: #fff; animation: sacudir .3s; }
@keyframes jg-boom { to { transform: scale(1.6) translateY(var(--ty, 0)); opacity: 0; } }
.jg__linea { display: flex; align-items: center; min-height: 3.2rem; padding: .5rem 1rem; border-radius: var(--r-lg); background: var(--superficie); border: 2px solid var(--primario); font: 700 1.5rem var(--fuente-mono, monospace); }
.jg__linea--mal { animation: sacudir .25s; border-color: #FF6B5B; }
.jg__cursor { width: 2px; height: 1.6rem; margin-left: 2px; background: var(--primario); animation: cursor-pulso 1s infinite; }
.jg__diana { position: absolute; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border-radius: 50%; font: 800 1.6rem var(--fuente-titulo); color: #fff;
  background: radial-gradient(circle at 35% 30%, #7CF0CF, #0B8F6D); box-shadow: 0 0 0 5px color-mix(in srgb, #3DDBB0 35%, transparent); animation: aparece .25s both; }
.jg__diana--ok { animation: jg-boom .22s forwards; }
.jg__diana--fuera { opacity: 0; transition: opacity .2s; }

/* Carrera */
.carrera { display: flex; flex-direction: column; gap: .5rem; padding: var(--e3); border-radius: var(--r-lg); background: linear-gradient(180deg, #14123A, #2A2659); color: #fff; }
.carrera__carril { position: relative; display: flex; align-items: center; height: 2.4rem; border-bottom: 2px dashed rgba(255,255,255,.2); }
.carrera__nombre { position: absolute; left: .4rem; font-weight: 800; font-size: .8rem; opacity: .75; z-index: 1; }
.carrera__cohete { position: absolute; left: calc(var(--x, 0%) * .93 + 2.2rem); transform: translateX(-50%); font-size: 1.6rem; transition: left .2s linear; }
.carrera__meta { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(#fff 0 8px, #111 8px 16px); }

/* Rescate */
.rescate { --agua: 0%; --sube: 0%; position: relative; height: min(46vh, 22rem); border-radius: var(--r-xl, 1.5rem); overflow: hidden; background: linear-gradient(180deg, #FFD9A8, #8FD3FF 60%); }
.rescate__cielo { position: absolute; inset: 0; background: radial-gradient(circle at 80% 18%, #fff7 0 8%, transparent 9%); }
.rescate__tecli { position: absolute; left: 50%; bottom: var(--sube); transform: translateX(-50%); font-size: 3rem; transition: bottom .5s var(--resorte); z-index: 2; }
.rescate__cuerda { position: absolute; left: 50%; bottom: 0; width: 3px; height: var(--sube); background: #8a5a2b; transition: height .5s var(--resorte); }
.rescate__agua { position: absolute; left: 0; right: 0; bottom: 0; height: var(--agua); background: linear-gradient(180deg, rgba(30,120,200,.75), rgba(10,60,140,.9)); z-index: 3; transition: height .2s linear; }
.rescate__palabra, .duelo__palabra { text-align: center; font: 700 clamp(2rem, 6vw, 3.4rem) var(--fuente-mono, monospace); letter-spacing: .08em; padding: var(--e3); }
.duelo__barras { display: grid; gap: .5rem; }
.duelo__barras > div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .5rem; }
.duelo__barras span { display: block; height: .8rem; border-radius: 99px; background: color-mix(in srgb, var(--texto) 12%, transparent); overflow: hidden; }
.duelo__barra { display: block; height: 100%; width: 0; border-radius: inherit; }
.duelo__barra--tu { background: linear-gradient(90deg, var(--primario), var(--sol-400)); }
.duelo__barra--fan { background: #8a8aa8; }
.juegos__record { margin-top: var(--e3); }

/* ── Logros ── */
.logros__hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5); margin-bottom: var(--e4); }
.logros__nivel { font: 700 2.6rem var(--fuente-titulo); }
.logros__datos { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.logros__chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .3rem 0; }
.logros__chips li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 99px; background: color-mix(in srgb, var(--texto) 9%, transparent); }
.logros__cuerpo { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .logros__cuerpo { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.vitrina { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--e3); margin-top: var(--e4); }
.vit { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border: 0; border-radius: var(--r-md); background: transparent; color: inherit; cursor: pointer; text-align: center; font-size: .82rem; }
.vit:hover, .vit:focus-visible { background: var(--superficie-2); }
.vit--ok { background: color-mix(in srgb, var(--sol-400) 10%, transparent); }
.medalla--bloqueada { filter: grayscale(1) opacity(.45); }
.medalla-detalle { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }

/* ── Tienda ── */
.tienda { display: flex; flex-direction: column; gap: var(--e4); }
.tienda__cab { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.tienda__cab > div { flex: 1; }
.tienda__monedas { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 99px; background: var(--sol-400); color: #3a2a00; font: 800 1.3rem var(--fuente-titulo); }
.tienda__rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.tienda__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: var(--e4); }
.tienda__item .btn { margin-top: auto; }
.tienda__item--puesto { outline: 2px solid var(--menta-500); }
.tienda__emoji { display: grid; place-items: center; width: 5rem; height: 5rem; font-size: 2.8rem; border-radius: 30%; background: var(--superficie-2); }
.tienda__tema { width: 5rem; height: 5rem; border-radius: 30%; }
.tienda__puesto { position: absolute; top: .5rem; right: .5rem; }
.avatar { position: relative; }
.avatar__acc { position: absolute; font-size: .55em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.avatar__acc--0 { top: -.05em; right: .05em; }
.avatar__acc--1 { bottom: -.05em; left: .05em; }
.avatar { overflow: visible; }
.avatar > img { border-radius: inherit; }

/* ── Temas de color (solo estudiantes; el personal siempre conserva el estilo sobrio) ── */
html:not([data-estilo="staff"])[data-tema-color="bosque"]   { --primario: #2E9E6B; --primario-hover: #25855A; --primario-tinta: #fff; --violeta-500: #2E9E6B; --violeta-600: #25855A; }
html:not([data-estilo="staff"])[data-tema-color="oceano"]   { --primario: #1E78C8; --primario-hover: #1766AB; --primario-tinta: #fff; --violeta-500: #1E78C8; --violeta-600: #1766AB; }
html:not([data-estilo="staff"])[data-tema-color="atardecer"]{ --primario: #D9486E; --primario-hover: #BF3A5E; --primario-tinta: #fff; --violeta-500: #D9486E; --violeta-600: #BF3A5E; }
html:not([data-estilo="staff"])[data-tema-color="neon"]     { --primario: #B02CF0; --primario-hover: #9A1FD6; --primario-tinta: #fff; --violeta-500: #B02CF0; --violeta-600: #9A1FD6; }
html[data-theme="dark"]:not([data-estilo="staff"])[data-tema-color="bosque"]   { --primario: #55D69B; --primario-tinta: #07241A; }
html[data-theme="dark"]:not([data-estilo="staff"])[data-tema-color="oceano"]   { --primario: #5CB4F2; --primario-tinta: #06203A; }
html[data-theme="dark"]:not([data-estilo="staff"])[data-tema-color="atardecer"]{ --primario: #FF8FA9; --primario-tinta: #3A0A1B; }
html[data-theme="dark"]:not([data-estilo="staff"])[data-tema-color="neon"]     { --primario: #E27BFF; --primario-tinta: #2B0642; }

@media (prefers-reduced-motion: reduce) { .jg__palabra--boom, .jg__diana { animation: none; } }
[data-motion="reducido"] .jg__palabra--boom, [data-motion="reducido"] .jg__diana { animation: none; }

.jg__barra .btn svg { transform: scaleX(-1); }
.juego-tarjeta--sol, .juego-tarjeta[style*="#FFD04A"] { color: #2a1e00; }
.juego-tarjeta[style*="#FFD04A"] .juego-tarjeta__ic { background: rgba(0,0,0,.12); }

/* Campo de juego con contraste claro (palabras bien visibles en cualquier tema) */
.jg__campo { background: radial-gradient(90% 70% at 50% 0%, #4B3AC7 0%, transparent 70%), linear-gradient(180deg, #1B1745, #2E2A78); border-color: rgba(255,255,255,.18); }
.jg__palabra { color: #fff; background: linear-gradient(135deg, var(--violeta-400), #4F6BFF); border: 2px solid rgba(255,255,255,.35); box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
.jg__palabra--sel { background: linear-gradient(135deg, #FFD04A, #FF8A3D); color: #2A1E00; border-color: #fff; }

/* ───────── Mi cuarto: personaje, mascota y decoración ───────── */
.cuarto { --a1: var(--violeta-400); --a2: var(--violeta-700); --piso1: #C9A27A; --piso2: #8E6A47; container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a1) 70%, #fff), color-mix(in srgb, var(--a2) 55%, #fff)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 -20px 40px rgba(20, 10, 70, .25), 0 12px 24px -10px rgba(20, 10, 70, .5); }
.cuarto[data-fondo="coral"] { --a1: #FF9A8A; --a2: #E84F3F; } .cuarto[data-fondo="menta"] { --a1: #5FE3C0; --a2: #0B8F6D; } .cuarto[data-fondo="sol"] { --a1: #FFD04A; --a2: #E39A00; }
.cuarto[data-fondo="cielo"] { --a1: #6CC4FF; --a2: #1E78C8; } .cuarto[data-fondo="noche"] { --a1: #3A3F7A; --a2: #12163A; }
.cuarto[data-marco="oro"] { box-shadow: inset 0 0 0 5px #FFD04A, inset 0 0 0 7px #B8860B, 0 12px 24px -10px rgba(20, 10, 70, .5); }
.cuarto[data-marco="arcoiris"] { box-shadow: inset 0 0 0 6px #FF6B8B, inset 0 0 0 11px #FFD04A, inset 0 0 0 16px #3DDBB0, 0 12px 24px -10px rgba(20, 10, 70, .5); }
.cuarto__ventana { position: absolute; left: 8%; top: 12%; width: 22%; height: 34%; border-radius: 6cqw 6cqw 1cqw 1cqw; background: linear-gradient(#9BE0FF, #E8F8FF); box-shadow: inset 0 0 0 1.2cqw rgba(255, 255, 255, .9), 0 .6cqw 0 rgba(0, 0, 0, .12); z-index: -1; }
.cuarto__ventana::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, .9) 48% 52%, transparent 52%), linear-gradient(transparent 48%, rgba(255, 255, 255, .9) 48% 52%, transparent 52%); }
.cuarto__piso { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: repeating-linear-gradient(90deg, transparent 0 11%, rgba(0, 0, 0, .1) 11% 11.4%), linear-gradient(180deg, var(--piso1), var(--piso2)); box-shadow: inset 0 1cqw 1.4cqw rgba(0, 0, 0, .25); z-index: -1; }
/* Escenas */
.cuarto[data-escena="espacio"] { background: radial-gradient(circle at 20% 30%, #fff 0 .25%, transparent .5%), radial-gradient(circle at 70% 18%, #fff 0 .3%, transparent .6%), radial-gradient(circle at 85% 60%, #fff 0 .25%, transparent .5%), radial-gradient(circle at 40% 70%, #fff 0 .2%, transparent .45%), radial-gradient(ellipse at 80% 20%, #6B3FD1, transparent 55%), linear-gradient(180deg, #0B0B3A, #1B1370); --piso1: #3C3A78; --piso2: #1E1B55; }
.cuarto[data-escena="playa"] { background: linear-gradient(180deg, #7FD3FF 0 45%, #38B6E8 45% 62%, #F6DFA6 62%); --piso1: #F6DFA6; --piso2: #E3B873; }
.cuarto[data-escena="bosque"] { background: radial-gradient(circle at 15% 60%, #2E7D4F 0 14%, transparent 14.5%), radial-gradient(circle at 88% 55%, #256B43 0 16%, transparent 16.5%), linear-gradient(180deg, #BFEFD2, #7FCB9C); --piso1: #5FAE6E; --piso2: #3C8650; }
.cuarto[data-escena="ciudad"] { background: linear-gradient(90deg, transparent 6%, #3B2F7A 6% 14%, transparent 14% 20%, #2B2166 20% 31%, transparent 31% 62%, #3B2F7A 62% 72%, transparent 72% 78%, #2B2166 78% 90%, transparent 90%) bottom / 100% 55% no-repeat, linear-gradient(180deg, #FF9A6B, #FF6B9A 55%, var(--violeta-400)); --piso1: #4A3D8F; --piso2: #2B2166; }
.cuarto[data-escena="arcade"] { background: linear-gradient(180deg, #1A0B45, #3A1380); --piso1: #2B0F66; --piso2: #14063A; }
.cuarto[data-escena="arcade"] .cuarto__piso { background: repeating-linear-gradient(90deg, rgba(0, 255, 240, .5) 0 .4%, transparent .4% 10%), repeating-linear-gradient(0deg, rgba(255, 0, 200, .45) 0 2%, transparent 2% 25%), linear-gradient(180deg, var(--piso1), var(--piso2)); }
.cuarto[data-escena]:not([data-escena=""]) .cuarto__ventana { display: none; }
/* Decoración por zonas */
.cuarto__deco { position: absolute; line-height: 1; filter: drop-shadow(0 .8cqw .6cqw rgba(0, 0, 0, .35)); z-index: 0; }
.cuarto__deco--izquierda { left: 4%; bottom: 22%; width: 19cqw; } .cuarto__deco--derecha { right: 4%; bottom: 22%; width: 19cqw; }
.cuarto__deco--pared { left: 50%; top: 8%; width: 13cqw; transform: translateX(-50%); } .cuarto__deco--techo { left: 62%; top: -2%; width: 10cqw; animation: cuarto-cuelga 4s ease-in-out infinite; transform-origin: 50% 0; }
.cuarto__deco--estante { right: 9%; top: 20%; width: 10cqw; } .cuarto__deco--estante::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: -6%; height: 1.2cqw; border-radius: 1cqw; background: linear-gradient(#C99A63, #8A6238); z-index: -1; }
@keyframes cuarto-cuelga { 50% { transform: rotate(5deg); } }
/* Personaje (SVG) */
.pj { position: absolute; left: 50%; bottom: 6%; width: 31cqw; margin-left: -15.5cqw; z-index: 1; animation: pj-respira 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.pj .pj3d, .pj svg { display: block; width: 100%; height: auto; }
.pj3d { display: inline-block; line-height: 0; filter: drop-shadow(0 .6cqw .5cqw rgba(20, 10, 70, .25)); }
@keyframes pj-respira { 50% { transform: scale(1.025, .975); } }
@media (prefers-reduced-motion: reduce) { .pj, .cuarto__deco--techo { animation: none; } }
/* Tienda con cuarto */
.tienda__cab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e4); align-items: center; }
.tienda__cab .cuarto { max-width: 560px; }
.tienda__txt { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.tienda__prueba { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .5rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .22); font-weight: 700; }
.tienda__ver { cursor: pointer; border: 0; background: none; padding: 0; position: relative; border-radius: 30%; transition: transform .15s var(--resorte); }
.tienda__ver:hover { transform: translateY(-3px) scale(1.05); }
.tienda__ver::after { content: 'Probar'; position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); font: 800 .65rem var(--fuente-titulo); background: var(--primario); color: #fff; padding: .1rem .5rem; border-radius: 99px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.tienda__zona { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.tienda__escena { width: 5rem; height: 5rem; border-radius: 30%; font-size: 2.4rem; display: grid; place-items: center; }
@media (max-width: 820px) { .tienda__cab { grid-template-columns: 1fr; } }

/* Elegir mascota */
.mascotas { display: flex; gap: .6rem; flex-wrap: wrap; }
.mascotas__op { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem .55rem .3rem; border-radius: 16px; border: 2px solid transparent; background: rgba(255, 255, 255, .2); color: inherit; cursor: pointer; font: 800 .72rem var(--fuente-titulo); transition: transform .15s var(--resorte), background .15s; }
.mascotas__op:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .32); }
.mascotas__op[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .4); box-shadow: 0 4px 12px -4px rgba(20, 10, 70, .5); }
.mascotas__tit { font-weight: 800; font-size: .85rem; margin: 0; }
.tienda__mini { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 30%; background: var(--superficie-2); overflow: hidden; }

.deco3d { display: block; line-height: 0; } .deco3d svg { display: block; width: 100%; height: auto; overflow: visible; }
.tienda__mini .deco3d { width: 70%; }