/* Toda la interfaz se mide en "u" = 1/800 del ancho del escenario, así escala igual en móvil, tablet o pizarra digital.
   Los colores de cada aplicación (--sky, --pri, --pri-d, --acc) se definen en su index.html. */
:root {
  --sw: min(100vw, calc(100vh * 800 / 590));
  --u: calc(var(--sw) / 800);
  --sky: #EAF4FF; --pri: #2E86DE; --pri-d: #1B5FA8; --acc: #F9A825;
  --ink: #2B2A4C; --ok: #3FB37F; --ok-d: #278A5E;
}
@supports (height: 100dvh) {
  :root { --sw: min(100vw, calc(100dvh * 800 / 590)); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Roboto, system-ui, sans-serif; font-weight: 800;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
}
#app { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sky); touch-action: none; }
#stage { position: relative; width: var(--sw); height: calc(var(--sw) * 590 / 800); overflow: hidden; background: var(--sky); }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }

/* decoración */
.cloud { position: absolute; background: #fff; opacity: .8; border-radius: 999px; height: calc(var(--u) * 40); animation: drift linear infinite; pointer-events: none; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 46%; aspect-ratio: 1; left: 14%; top: -55%; }
.cloud::after { width: 34%; aspect-ratio: 1; left: 48%; top: -35%; }
.c1 { width: calc(var(--u) * 150); top: calc(var(--u) * 150); animation-duration: 70s; }
.c2 { width: calc(var(--u) * 110); top: calc(var(--u) * 60); animation-duration: 95s; animation-delay: -40s; }
.c3 { width: calc(var(--u) * 130); top: calc(var(--u) * 330); animation-duration: 82s; animation-delay: -15s; }
@keyframes drift { from { transform: translateX(calc(var(--u) * -200)); } to { transform: translateX(calc(var(--u) * 1000)); } }

/* botones */
.icon {
  flex: none; width: max(38px, calc(var(--u) * 50)); height: max(38px, calc(var(--u) * 50)); border-radius: 50%;
  background: #fff; color: var(--pri-d); display: grid; place-items: center;
  box-shadow: 0 calc(var(--u) * 4) 0 rgba(0, 0, 0, .14);
}
.icon svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.big {
  display: inline-flex; align-items: center; gap: .45em; font-size: max(18px, calc(var(--u) * 32));
  padding: .45em 1.3em; border-radius: 999px; color: #fff; background: var(--ok); box-shadow: 0 .14em 0 var(--ok-d);
}
.big.alt { background: var(--pri); box-shadow: 0 .14em 0 var(--pri-d); }
.big svg { width: 1em; height: 1em; }
.big:active, .icon:active, .tcard:active, .lvbtn:active { transform: translateY(.1em); }

/* pantallas */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 14); padding: calc(var(--u) * 10); text-align: center;
}
.row { display: flex; gap: calc(var(--u) * 16); align-items: center; justify-content: center; flex-wrap: wrap; }
h1 { margin: 0; font-size: max(26px, calc(var(--u) * 58)); line-height: 1.05; color: var(--pri-d); text-shadow: 0 .05em 0 #fff; }
h2 { margin: 0; font-size: max(22px, calc(var(--u) * 50)); color: var(--pri-d); text-shadow: 0 .05em 0 #fff; }
.hero { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.mascot { font-size: calc(var(--u) * 78); line-height: 1; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(calc(var(--u) * -8)) rotate(3deg); } }

/* inicio */
#topics { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: calc(var(--u) * 14); width: calc(var(--u) * 740); }
.tcard {
  min-height: calc(var(--u) * 138); border-radius: calc(var(--u) * 26); background: var(--c); color: #fff;
  box-shadow: 0 calc(var(--u) * 8) 0 var(--cd); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 4); padding: calc(var(--u) * 8);
}
.tcard .ico { font-size: calc(var(--u) * 54); line-height: 1.1; }
.tcard .tn { font-size: max(12px, calc(var(--u) * 22)); line-height: 1.1; }
.tcard small { font-size: max(9px, calc(var(--u) * 14)); color: #FFE9A6; }
.guide { font-size: max(11px, calc(var(--u) * 16)); color: var(--pri-d); text-decoration: underline; }

/* pantalla de un tema */
#games { display: flex; flex-direction: column; gap: calc(var(--u) * 14); width: calc(var(--u) * 660); }
.grow {
  display: flex; align-items: center; gap: calc(var(--u) * 14); background: #fff; border-radius: calc(var(--u) * 26);
  padding: calc(var(--u) * 10) calc(var(--u) * 18); box-shadow: 0 calc(var(--u) * 6) 0 rgba(0, 0, 0, .1);
}
.gico { font-size: calc(var(--u) * 46); line-height: 1; }
.gname { flex: 1; text-align: left; font-size: max(14px, calc(var(--u) * 28)); color: var(--cd); }
.lvs { display: flex; gap: calc(var(--u) * 10); }
.lvbtn {
  width: max(40px, calc(var(--u) * 66)); height: max(40px, calc(var(--u) * 66)); border-radius: calc(var(--u) * 18);
  background: var(--c); color: #fff; font-size: max(14px, calc(var(--u) * 28)); box-shadow: 0 calc(var(--u) * 5) 0 var(--cd);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.lvbtn small { display: block; height: 1.1em; margin-top: .1em; font-size: .5em; color: #FFE27A; letter-spacing: -.05em; }

/* partida */
#play { padding: 0; justify-content: flex-start; }
#bar {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 110); z-index: 4;
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 8) calc(var(--u) * 12) 0; pointer-events: none;
}
#bar > * { pointer-events: auto; }
.side { display: flex; gap: calc(var(--u) * 8); min-width: max(38px, calc(var(--u) * 50)); }
#banner {
  flex: 1 1 auto; min-width: 0; max-width: calc(var(--u) * 440); margin: 0 auto; min-height: calc(var(--u) * 88);
  display: flex; align-items: center; gap: calc(var(--u) * 8); background: #fff; border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 6) calc(var(--u) * 14); box-shadow: 0 calc(var(--u) * 4) 0 rgba(0, 0, 0, .12);
}
#banner .q { flex: 1; min-width: 0; text-align: center; }
#q-text { font-size: max(12px, calc(var(--u) * 21)); line-height: 1.15; }
#q-visual { font-size: max(16px, calc(var(--u) * 38)); line-height: 1.2; color: var(--pri-d); white-space: nowrap; overflow: hidden; }
#q-visual .lb-color { display: inline-block; width: calc(var(--u) * 70); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 8); border: 3px solid var(--ink); vertical-align: middle; }
#steps { position: absolute; top: calc(var(--u) * 97); left: 0; right: 0; text-align: center; z-index: 3; font-size: max(9px, calc(var(--u) * 12)); color: var(--pri-d); pointer-events: none; }
#field { position: absolute; left: 0; right: 0; top: calc(var(--u) * 110); bottom: 0; overflow: hidden; }

/* etiquetas */
.lb { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.lb-emoji { font-size: calc(var(--u) * 52); }
.lb-text { color: var(--ink); white-space: nowrap; }
.lb-color { width: calc(var(--u) * 64); height: calc(var(--u) * 46); border-radius: calc(var(--u) * 10); border: 3px solid var(--ink); }
.lb-size { border-radius: 50%; background: #7F77DD; border: 3px solid #3C3489; }
.lb svg { width: calc(var(--u) * 62); height: calc(var(--u) * 62); fill: #7F77DD; stroke: #3C3489; stroke-width: 5; stroke-linejoin: round; }
.lb-outline svg { fill: none; stroke: #8b89a8; stroke-dasharray: 9 7; }

/* globos */
.balloon {
  position: absolute; left: calc(var(--lane) - var(--u) * 66); bottom: calc(var(--u) * -200);
  width: calc(var(--u) * 132); height: calc(var(--u) * 180); animation: rise linear infinite; touch-action: none;
}
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -780)); } }
.balloon .body {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 140); border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background: var(--bc); display: grid; place-items: center; animation: sway 2.8s ease-in-out infinite alternate;
  box-shadow: inset calc(var(--u) * -10) calc(var(--u) * -12) 0 rgba(0, 0, 0, .14), inset calc(var(--u) * 8) calc(var(--u) * 8) 0 rgba(255, 255, 255, .28);
}
.balloon .body::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -12); transform: translateX(-50%);
  border-left: calc(var(--u) * 9) solid transparent; border-right: calc(var(--u) * 9) solid transparent; border-bottom: calc(var(--u) * 14) solid var(--bc);
}
.balloon .string { position: absolute; left: 50%; top: calc(var(--u) * 148); width: 2px; height: calc(var(--u) * 32); background: rgba(0, 0, 0, .35); }
.balloon .plate {
  background: #fff; border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 6) calc(var(--u) * 10); min-width: calc(var(--u) * 62);
  max-width: calc(var(--u) * 116); display: grid; place-items: center; box-shadow: 0 calc(var(--u) * 3) 0 rgba(0, 0, 0, .12);
}
@keyframes sway { from { transform: translateX(calc(var(--u) * -9)) rotate(-2.5deg); } to { transform: translateX(calc(var(--u) * 9)) rotate(2.5deg); } }
.balloon.popped .body { animation: burst .3s forwards; }
.balloon.popped .string { display: none; }
@keyframes burst { to { transform: scale(1.7); opacity: 0; } }
.balloon.wrong .body { animation: wobble .45s; }
@keyframes wobble { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(calc(var(--u) * -14)); } 40% { transform: translateX(calc(var(--u) * 14)); } 60% { transform: translateX(calc(var(--u) * -9)); } 80% { transform: translateX(calc(var(--u) * 9)); } }
.balloon.gone { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* memoria */
.mgrid {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid;
  grid-template-columns: repeat(4, var(--w)); gap: calc(var(--u) * 12);
}
.mcard { width: var(--w); height: var(--h); perspective: 700px; }
.mcard .inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s; }
.mcard.flipped .inner, .mcard.done .inner { transform: rotateY(180deg); }
.mcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(var(--u) * 16); display: grid; place-items: center; }
.mcard .back { background: var(--pri); color: #fff; font-size: calc(var(--u) * 46); box-shadow: 0 calc(var(--u) * 6) 0 var(--pri-d); }
.mcard .front { background: #fff; border: calc(var(--u) * 4) solid var(--pri); transform: rotateY(180deg); }
.mcard.done .front { border-color: var(--ok); background: #EFFFF6; }

/* arrastrar */
.dwrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: calc(var(--u) * 14) calc(var(--u) * 20); }
.targets, .pool { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 14); }
.pool { position: relative; z-index: 5; padding: calc(var(--u) * 10) calc(var(--u) * 16); background: rgba(255, 255, 255, .55); border-radius: calc(var(--u) * 26); }
.target { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); position: relative; z-index: 1; }
.slot {
  width: var(--s); height: var(--s); border: calc(var(--u) * 4) dashed #8b89a8; border-radius: calc(var(--u) * 20);
  background: rgba(255, 255, 255, .7); display: grid; place-items: center; position: relative;
}
.slot .ghost { position: absolute; inset: 0; display: grid; place-items: center; opacity: .8; }
.slot:has(.locked) { border-style: solid; border-color: var(--ok); background: #EFFFF6; }
.tlabel { min-height: calc(var(--u) * 34); display: grid; place-items: center; }
.tile {
  width: var(--s); height: var(--s); border-radius: calc(var(--u) * 20); background: #fff; display: grid; place-items: center;
  box-shadow: 0 calc(var(--u) * 6) 0 rgba(0, 0, 0, .16); touch-action: none; cursor: grab; position: relative;
}
.tile.drag { z-index: 30; cursor: grabbing; box-shadow: 0 calc(var(--u) * 14) 0 rgba(0, 0, 0, .12); }
.tile.locked { box-shadow: none; background: transparent; cursor: default; touch-action: auto; }
.tile.shake { animation: wobble .4s; }

/* resultado */
#res-mascot { font-size: calc(var(--u) * 100); }
.stars { font-size: max(26px, calc(var(--u) * 70)); line-height: 1; color: #FFC83D; text-shadow: 0 .05em 0 #B9770E; animation: popc .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes popc { from { transform: scale(0); } to { transform: scale(1); } }

#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
#rotate {
  display: none; position: fixed; inset: 0; z-index: 60; background: var(--sky); flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; font-size: 28px; text-align: center; color: var(--pri-d);
}
#rotate svg { width: 96px; height: 96px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 700px) { #rotate { display: flex; } }