*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{color:#e2e8f0;background:#0f172a;font-family:system-ui,-apple-system,sans-serif}.screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;min-height:100%;padding:2rem;display:flex}.card{background:#1e293b;border:1px solid #334155;border-radius:16px;width:100%;max-width:34rem;padding:2rem}.card h1{color:#60a5fa}button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;padding:.75rem 1.5rem;font-size:1rem}button:disabled{opacity:.4;cursor:not-allowed}input{color:#e2e8f0;background:#0f172a;border:1px solid #475569;border-radius:10px;width:100%;padding:.75rem 1rem;font-size:1rem}.mundo-container{position:fixed;inset:0}.mundo-container canvas{display:block}.mundo-sin-webgl{text-align:center;background:#16223a;justify-content:center;align-items:center;padding:2rem;display:flex}.hud{z-index:10;background:#0f172ad9;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 1rem;display:flex;position:fixed;top:0;left:0;right:0}.hud-item{background:#1e293b;border-radius:8px;padding:.35rem .75rem;font-weight:600}.hud-banner{color:#fbbf24;margin-left:auto;font-size:.9rem}.overlay{z-index:20;background:#020617cc;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.opcion{text-align:left;background:#0f172a;border:1px solid #475569;width:100%;margin-top:.5rem;display:block}.opcion.correcta{background:#14532d;border-color:#22c55e}.opcion.incorrecta{background:#7f1d1d;border-color:#ef4444}.fundamentos{margin-top:1rem;position:relative}.blurred{filter:blur(6px);-webkit-user-select:none;user-select:none}.candado{color:#fbbf24;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset:0}.scoreboard{border-collapse:collapse;width:100%;margin-top:.5rem}.scoreboard td,.scoreboard th{text-align:left;border-bottom:1px solid #334155;padding:.35rem .5rem}.npc-retrato{object-fit:cover;background:#0f172a;border:3px solid #3b82f6;border-radius:50%;width:72px;height:72px}.npc-avatar{color:#93c5fd;background:#334155;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:2rem;font-weight:700;display:flex}.zona-joystick{z-index:15;touch-action:none;width:50vw;position:fixed;top:3.5rem;bottom:0;left:0}.joystick-base{pointer-events:none;background:#0f172a73;border:2px solid #94a3b899;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;position:fixed}.joystick-pomo{background:#3b82f6d9;border-radius:50%;width:56px;height:56px;margin:-28px 0 0 -28px;position:absolute;top:50%;left:50%}.boton-accion{right:calc(1.25rem + env(safe-area-inset-right));bottom:calc(1.25rem + env(safe-area-inset-bottom));z-index:15;touch-action:none;border-radius:50%;width:84px;height:84px;font-size:1.5rem;font-weight:700;position:fixed}.boton-accion:disabled{opacity:.35}.aviso-orientacion{z-index:30;text-align:center;background:#0f172a;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:2rem;display:flex;position:fixed;inset:0}.hud{padding-left:calc(1rem + env(safe-area-inset-left));padding-right:calc(1rem + env(safe-area-inset-right))}@media (height<=500px){.hud{gap:.35rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.85rem}.hud-item{padding:.25rem .5rem}.hud-banner{font-size:.75rem}.etiqueta-larga{display:none}.hud button.hud-item{min-width:44px;min-height:44px}.overlay{align-items:flex-start;padding:.5rem}.overlay .card{max-height:calc(100dvh - 1rem);padding:.85rem 1rem;overflow-y:auto}.overlay .card h2{margin:.5rem 0;font-size:1.05rem}.npc-retrato,.npc-avatar{width:48px;height:48px;font-size:1.25rem}.opcion{margin-top:.35rem;padding:.5rem .75rem}}.celebracion{pointer-events:none;z-index:21;position:fixed;inset:0;overflow:hidden}.confeti{opacity:0;border-radius:2px;width:8px;height:12px;animation:1.2s ease-in forwards caer-confeti;position:absolute;top:-12px}@keyframes caer-confeti{0%{opacity:1;transform:translate(0)rotate(0)}to{opacity:0;transform:translate(var(--deriva), 260px) rotate(var(--giro))}}.confeti.suave{animation:.7s ease-out forwards destello-confeti;top:12%}@keyframes destello-confeti{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(30px)}}.flotante-puntos,.flotante-racha{color:#fbbf24;text-shadow:0 2px 8px #00000080;white-space:nowrap;opacity:0;font-size:1.6rem;font-weight:800;animation:1.1s ease-out forwards subir-flotante;position:absolute;top:18%;left:50%}.flotante-racha{color:#22c55e;font-size:1.1rem;animation-delay:.12s;top:calc(18% + 36px)}@keyframes subir-flotante{0%{opacity:0;transform:translate(-50%,10px)scale(.8)}20%{opacity:1;transform:translate(-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-40px)scale(1)}}.sacudida{animation:.3s ease-in-out sacudir}@keyframes sacudir{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.golpe{animation:.35s ease-out golpe;display:inline-block}@keyframes golpe{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.latido{animation:.4s ease-out latido}@keyframes latido{0%{transform:scale(1)}35%{transform:scale(1.22)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.sacudida,.golpe,.latido{animation:none}.flotante-puntos,.flotante-racha{animation-duration:.7s}}