/* =========================================================
   TecnoAventura V0.2 — estilos
   ========================================================= */
:root {
  --bg1: #1a1446;
  --bg2: #2d1b69;
  --bg3: #0f3b6e;
  --ink: #1b1b3a;
  --ink-soft: #4a4a6a;
  --paper: #ffffff;
  --paper-2: #f4f1ff;
  --line: #e2dcff;
  --primary: #7b5cff;
  --primary-2: #5a3bff;
  --go: #06d6a0;
  --go-2: #04a97e;
  --warn: #ffb703;
  --danger: #ef476f;
  --gold: #ffd166;
  --sky: #4cc9f0;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(10, 5, 40, .35);
  --shadow-sm: 0 4px 0 rgba(0, 0, 0, .15);
  --font-title: 'Baloo 2', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --fs: 17px;
  --wc: #7b5cff;
  --wc2: #3a0ca3;
}
html.big-text { --fs: 20px; }
html.high-contrast { --ink-soft: #111; --line: #555; --paper-2: #fff; }
html.high-contrast .card, html.high-contrast .modal, html.high-contrast .menu-tile { outline: 3px solid #000; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font); font-size: var(--fs); color: var(--ink);
  background: radial-gradient(1200px 600px at 20% -10%, #4b2bd1 0%, transparent 60%),
              radial-gradient(900px 500px at 110% 20%, #0f6e9e 0%, transparent 55%),
              linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3 { font-family: var(--font-title); line-height: 1.1; margin: 0; }
:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cielo animado ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky-layer { position: absolute; inset: -50%; background-repeat: repeat; animation: drift 120s linear infinite; }
.sky-layer.s1 { background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 140px 90px, #fff, transparent), radial-gradient(2px 2px at 90px 160px, #cde, transparent); background-size: 200px 200px; opacity: .5; }
.sky-layer.s2 { background-image: radial-gradient(1.5px 1.5px at 60px 80px, #ffd166, transparent), radial-gradient(1px 1px at 170px 20px, #fff, transparent); background-size: 260px 260px; opacity: .45; animation-duration: 180s; }
.sky-layer.s3 { background-image: radial-gradient(2.5px 2.5px at 100px 100px, #4cc9f0, transparent); background-size: 400px 400px; opacity: .35; animation-duration: 90s; animation-direction: reverse; }
@keyframes drift { to { transform: translate(200px, 200px); } }

#app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; outline: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.screen { min-height: 100vh; min-height: 100dvh; }
.screen.enter { animation: screenIn .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes screenIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.page { max-width: 880px; margin: 0 auto; padding: 16px 16px 48px; }
.page-wide { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
.page-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; color: #fff; }
.page-head h1 { font-size: clamp(26px, 5vw, 40px); flex: 1; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.lead { color: #e9e4ff; font-size: 1.05em; margin: 6px 0 16px; }
.note { color: #d9d3ff; font-size: .9em; }
.note.center { text-align: center; }
.help { color: var(--ink-soft); font-size: .9em; margin: 6px 0; }
.empty { color: var(--ink-soft); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 22px; min-height: 48px;
  font-family: var(--font-title); font-weight: 700; font-size: 1.05em; letter-spacing: .2px;
  background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s, filter .12s; text-decoration: none; user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn-primary { background: linear-gradient(180deg, #9277ff, var(--primary-2)); color: #fff; box-shadow: 0 5px 0 #3b22b8; }
.btn-go { background: linear-gradient(180deg, #2ee8b6, var(--go-2)); color: #053b2c; box-shadow: 0 5px 0 #037257; }
.btn-danger { background: linear-gradient(180deg, #ff6b8b, #d62246); color: #fff; box-shadow: 0 5px 0 #92112c; }
.btn-ghost { background: var(--paper-2); color: var(--ink); box-shadow: 0 4px 0 #cfc6ff; }
.btn-disabled, .btn:disabled { background: #e6e3f2; color: #8a86a3; box-shadow: none; }
.btn-lg { padding: 14px 28px; font-size: 1.15em; min-height: 56px; }
.btn-xl { padding: 18px 36px; font-size: clamp(1.1em, 3vw, 1.45em); min-height: 64px; }
.btn-sm { padding: 8px 14px; min-height: 40px; font-size: .92em; }
.btn.glow { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 5px 0 #3b22b8, 0 0 0 0 rgba(146,119,255,.6); } 50% { box-shadow: 0 5px 0 #3b22b8, 0 0 0 14px rgba(146,119,255,0); } }
.btn-avatar { font-size: 1.3em; }
.btn-icon {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--ink); font-size: 20px; box-shadow: 0 4px 0 rgba(0,0,0,.2); transition: transform .12s;
}
.btn-icon:hover { transform: scale(1.07); }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.row-btns.left { justify-content: flex-start; }
.speak-btn { border: 0; background: #fff3c4; border-radius: 50%; width: 36px; height: 36px; font-size: 17px; vertical-align: middle; box-shadow: 0 2px 0 #e6c96b; flex: 0 0 auto; }
.speak-btn:hover { background: #ffe58a; }

.card { background: var(--paper); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card h2 { font-size: 1.4em; margin-bottom: 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-weight: 800; font-size: .95em; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78em; font-weight: 800; background: #eee; }
.tag.ok { background: #d3f9ea; color: #04704f; }
.tag.lock { background: #f0edf9; color: #6b6790; }
.ribbon { position: absolute; top: 12px; right: -6px; background: var(--danger); color: #fff; font-weight: 800; font-size: .78em; padding: 4px 12px; border-radius: 8px 0 0 8px; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.ribbon.gold { background: linear-gradient(90deg, #ffd166, #ffb703); color: #5c3c00; }
.mini-bar { height: 10px; background: rgba(0,0,0,.15); border-radius: 99px; overflow: hidden; flex: 1; }
.mini-bar > div { height: 100%; background: linear-gradient(90deg, #ffd166, #06d6a0); border-radius: 99px; transition: width .6s; }
.mini-bar.big { height: 16px; margin-bottom: 18px; background: rgba(255,255,255,.2); }
.bubble { position: relative; background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--shadow-sm); font-weight: 700; line-height: 1.35; }

/* ---------- Animaciones utilitarias ---------- */
.pop-in { animation: popIn .45s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }
.bob { animation: bob 2.6s ease-in-out infinite; display: inline-block; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.float-text { position: fixed; z-index: 70; transform: translate(-50%, 0); font-family: var(--font-title); font-weight: 800; font-size: 26px; color: #fff; text-shadow: 0 3px 0 #3b22b8, 0 0 12px rgba(0,0,0,.3); pointer-events: none; animation: floatUp 1.3s ease-out forwards; white-space: nowrap; }
.float-text.good { color: #b6ffe6; }
.float-text.coin { color: #ffe08a; }
@keyframes floatUp { from { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } to { opacity: 0; transform: translate(-50%, -80px) scale(1); } }
.char-wrap { display: inline-block; line-height: 0; }
.char-anim .char-head { animation: headBob 3s ease-in-out infinite; transform-origin: 100px 130px; }
.char-anim .char-body { animation: breathe 3s ease-in-out infinite; transform-origin: 100px 190px; }
@keyframes headBob { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-3px); } }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.03); } }

/* ---------- Toasts y modales ---------- */
#toasts { position: fixed; z-index: 80; top: 84px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
.toast { background: #fff; color: var(--ink); padding: 12px 16px; border-radius: 16px; box-shadow: var(--shadow); font-weight: 700; display: flex; gap: 10px; align-items: center; animation: popIn .35s both; border-left: 6px solid var(--primary); }
.toast.good { border-left-color: var(--go); }
.toast.warn { border-left-color: var(--warn); }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .35s; }
.toast-icon { font-size: 1.4em; }
#modal-root { position: relative; z-index: 75; }
.modal-wrap { position: fixed; inset: 0; background: rgba(15, 8, 50, .65); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; overflow-y: auto; }
.modal-wrap.out { opacity: 0; transition: .2s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { background: var(--paper); border-radius: 26px; padding: 26px; width: min(560px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: popIn .35s both; outline: none; text-align: center; max-height: calc(100dvh - 32px); overflow-y: auto; }
.confirm p { color: var(--ink-soft); }
.welcome h2 { font-size: 1.8em; margin: 6px 0; }
.welcome-list { list-style: none; padding: 0; text-align: left; display: grid; gap: 8px; margin: 14px auto; max-width: 360px; font-weight: 700; }
.welcome-list li { background: var(--paper-2); padding: 10px 14px; border-radius: 12px; }

/* ---------- Splash ---------- */
.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 16px; gap: 22px; color: #fff; }
.logo-wrap { position: relative; padding: 50px 20px 10px; }
.logo { font-size: clamp(44px, 11vw, 104px); letter-spacing: -1px; line-height: .95; filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); animation: logoIn .9s cubic-bezier(.2,.9,.3,1.4) both; }
.logo-tecno { color: #fff; display: inline-block; }
.logo-av { display: inline-block; background: linear-gradient(90deg, #ffd166, #ff70a6, #4cc9f0, #06d6a0, #ffd166); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
@keyframes shine { to { background-position: 300% 0; } }
@keyframes logoIn { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
.logo-sub { font-weight: 800; font-size: clamp(15px, 2.6vw, 20px); color: #e5dcff; margin: 10px 0 0; }
.logo-orbit { position: absolute; inset: 0; pointer-events: none; }
.logo-orbit span { position: absolute; left: 50%; top: 50%; font-size: clamp(22px, 4vw, 34px); animation: orbit 14s linear infinite; animation-delay: calc(var(--i) * -2.33s); }
@keyframes orbit { from { transform: rotate(0) translateX(min(42vw, 330px)) rotate(0); } to { transform: rotate(360deg) translateX(min(42vw, 330px)) rotate(-360deg); } }
.splash-parade { display: flex; gap: clamp(4px, 2vw, 24px); justify-content: center; flex-wrap: wrap; }
.splash-parade .char-wrap { animation: hop 1.6s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px); } 60% { transform: translateY(0); } }
.splash-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.splash-foot { color: #bfb6f0; font-size: .85em; }

/* ---------- Perfiles y creación ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.profile-card { background: var(--paper); border: 0; border-radius: var(--radius); padding: 16px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .15s; }
.profile-card:hover { transform: translateY(-5px) rotate(-1deg); }
.profile-card.new { background: rgba(255,255,255,.12); border: 3px dashed rgba(255,255,255,.6); color: #fff; justify-content: center; min-height: 200px; }
.profile-card .plus { font-size: 60px; line-height: 1; }
.profile-name { font-family: var(--font-title); font-weight: 800; font-size: 1.2em; }
.profile-meta { color: var(--ink-soft); font-weight: 700; font-size: .9em; }
.wizard-dots { display: flex; gap: 6px; }
.wizard-dots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.3); transition: .3s; }
.wizard-dots span.on { background: var(--gold); transform: scale(1.2); }
.wizard-body.slide > * { animation: slideIn .4s cubic-bezier(.2,.9,.3,1.1); }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } }
.chip-guide { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.chip-guide .bubble { background: var(--paper-2); flex: 1; }
.lbl { display: block; font-weight: 800; margin: 14px 0 8px; font-size: 1.05em; }
.alias-row { display: flex; gap: 10px; flex-wrap: wrap; }
.alias-input { flex: 1; min-width: 180px; font: 800 1.35em var(--font-title); padding: 12px 18px; border-radius: 16px; border: 3px solid var(--line); background: var(--paper-2); color: var(--ink); }
.alias-input.sm { font-size: 1.05em; padding: 8px 12px; min-width: 140px; }
.alias-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px rgba(123,92,255,.25); }
.field-err { color: #c1121f; font-weight: 800; min-height: 1.3em; margin: 6px 0; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; }
.avatar-opt { aspect-ratio: 1; font-size: 38px; border: 3px solid transparent; border-radius: 20px; background: var(--paper-2); transition: transform .15s; }
.avatar-opt:hover { transform: scale(1.08); }
.avatar-opt.sel { border-color: var(--primary); background: #e8e1ff; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(123,92,255,.25); }
.step-char-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.char-preview { display: grid; place-items: center; background: var(--paper-2); border-radius: var(--radius); padding: 10px; position: sticky; top: 10px; }
.char-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.char-card { border: 3px solid transparent; background: var(--paper-2); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transition: transform .15s; }
.char-card:hover { transform: translateY(-3px); }
.char-card.sel { border-color: var(--primary); background: #ece6ff; }
.char-card small { color: var(--ink-soft); font-size: .78em; line-height: 1.2; }
.power { font-size: .78em; font-weight: 800; color: var(--primary-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.swatch.sel { box-shadow: 0 0 0 4px var(--primary); transform: scale(1.1); }
.grade-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; min-width: 52px; min-height: 44px; }
.chip.sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.step-done { text-align: center; }
.ready-stage { position: relative; display: inline-block; animation: popIn .6s both; }
.ready-sparkles { position: absolute; top: 0; right: -10px; font-size: 40px; animation: bob 1.5s infinite; }
.ready-name { font-size: 2em; margin: 8px 0; }
.ready-gifts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 20px; }
.ready-gifts li { background: var(--paper-2); padding: 8px 14px; border-radius: 999px; font-weight: 800; }

/* ---------- HUD ---------- */
.hud { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin: 0 -16px 8px; background: rgba(26,20,70,.88); box-shadow: 0 6px 20px rgba(10,5,40,.35); border-radius: 0 0 22px 22px; }
@supports (backdrop-filter: blur(4px)) { .hud { background: rgba(26,20,70,.72); backdrop-filter: blur(10px); } }
.hud-player { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.95); border: 0; border-radius: 999px; padding: 4px 14px 4px 4px; box-shadow: 0 4px 0 rgba(0,0,0,.2); text-align: left; min-width: 0; }
.hud-info { min-width: 0; }
.hud-name { font-family: var(--font-title); font-weight: 800; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.hud-level { display: flex; align-items: center; gap: 6px; }
.lvl-badge { background: var(--primary); color: #fff; font-weight: 800; font-size: .72em; padding: 2px 8px; border-radius: 99px; }
.xp-bar { width: 90px; height: 9px; background: #e5e0fb; border-radius: 99px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, #4cc9f0, #9b5de5); border-radius: 99px; transition: width .8s; }
.xp-txt { font-size: .7em; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.hud-title { flex: 1; text-align: center; color: #fff; font-size: clamp(18px, 3vw, 28px); text-shadow: 0 3px 0 rgba(0,0,0,.25); min-width: 0; }
.hud-spacer { flex: 1; }
.hud-stats { display: flex; gap: 8px; }
.avatar { --s: 56px; width: var(--s); height: var(--s); flex: 0 0 var(--s); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--s) * .58); background: linear-gradient(135deg, #e0f7ff, #efe7ff); border: 3px solid #fff; box-shadow: 0 0 0 2px #cfc6ff; line-height: 1; }
.avatar.marco-neon { box-shadow: 0 0 0 3px #4cc9f0, 0 0 14px #4cc9f0; border-color: #b8f0ff; }
.avatar.marco-fuego { box-shadow: 0 0 0 3px #ff9f1c, 0 0 16px #ef476f; border-color: #ffd166; animation: fire 1.4s ease-in-out infinite; }
@keyframes fire { 50% { box-shadow: 0 0 0 3px #ef476f, 0 0 22px #ff9f1c; } }
.avatar.marco-oro { border: 4px solid #ffd166; box-shadow: 0 0 0 3px #e09f3e, 0 0 18px rgba(255,209,102,.9); background: linear-gradient(135deg, #fff6d6, #ffe8a3); }

/* ---------- Menú principal ---------- */
.hub { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }
.hub-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; align-items: start; }
.hub-hero { background: linear-gradient(170deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 2px solid rgba(255,255,255,.25); border-radius: 30px; padding: 20px; text-align: center; color: #fff; position: sticky; top: 90px; }
.hero-stage { position: relative; display: inline-block; }
.hero-platform { width: 200px; height: 26px; margin: -14px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(76,201,240,.8), transparent); animation: pulse 2.5s infinite; }
@keyframes pulse { 50% { opacity: .5; transform: scale(.9); } }
.hero-name { font-size: 1.8em; margin-top: 8px; text-shadow: 0 3px 0 rgba(0,0,0,.25); word-break: break-word; }
.hero-title { font-weight: 800; color: #ffe8a3; margin: 4px 0 12px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hero-stats div { background: rgba(255,255,255,.95); color: var(--ink); border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; }
.hero-stats strong { font-family: var(--font-title); font-size: 1.35em; }
.hero-stats small { font-size: .7em; font-weight: 800; color: var(--ink-soft); }
.next-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 24px; color: #fff; background: linear-gradient(120deg, var(--wc), var(--wc2)); box-shadow: var(--shadow); margin-bottom: 16px; position: relative; overflow: hidden; }
.next-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); animation: sweep 4s infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.next-card.done { background: linear-gradient(120deg, #ffb703, #fb8500); }
.next-icon { font-size: 48px; }
.next-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.next-info small { font-weight: 800; opacity: .9; }
.next-info strong { font-family: var(--font-title); font-size: 1.4em; }
.next-card .btn { position: relative; z-index: 1; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.menu-tile { position: relative; border: 0; border-radius: 24px; padding: 18px 12px; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.22); transition: transform .15s; text-align: center; }
.menu-tile:hover { transform: translateY(-4px) rotate(-1deg); }
.menu-tile:active { transform: translateY(2px); }
.menu-tile.big { grid-column: 1 / -1; min-height: 150px; flex-direction: row; gap: 18px; background: linear-gradient(120deg, #06d6a0, #118ab2 50%, #7b5cff); }
.menu-tile.big .tile-icon { font-size: 70px; animation: bob 2.4s infinite; }
.menu-tile.big .tile-label { font-size: 1.9em; }
.menu-tile.c1 { background: linear-gradient(140deg, #ff70a6, #d62246); }
.menu-tile.c2 { background: linear-gradient(140deg, #ffd166, #f77f00); }
.menu-tile.c3 { background: linear-gradient(140deg, #9b5de5, #5a189a); }
.menu-tile.c4 { background: linear-gradient(140deg, #4cc9f0, #3a86ff); }
.menu-tile.c5 { background: linear-gradient(140deg, #8ac926, #2b9348); }
.menu-tile.c6 { background: linear-gradient(140deg, #6c757d, #343a40); }
.tile-icon { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.tile-label { font-family: var(--font-title); font-weight: 800; font-size: 1.25em; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.tile-sub { font-size: .82em; font-weight: 700; opacity: .92; }
.tile-dot { position: absolute; top: 10px; right: 12px; background: var(--danger); color: #fff; font-weight: 800; min-width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: .8em; border: 2px solid #fff; animation: bob 1.5s infinite; }

/* ---------- Mundos ---------- */
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.world-card { position: relative; border: 0; border-radius: 28px; overflow: hidden; padding: 0; text-align: left; background: #fff; box-shadow: var(--shadow); transition: transform .18s; display: flex; flex-direction: column; }
.world-card:hover { transform: translateY(-6px) scale(1.01); }
.world-art { position: relative; height: 150px; background: radial-gradient(circle at 30% 120%, rgba(255,255,255,.35), transparent 60%), linear-gradient(135deg, var(--wc), var(--wc2)); display: grid; place-items: center; overflow: hidden; }
.world-icon { font-size: 76px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.2)); }
.world-decor { position: absolute; font-size: 28px; opacity: .8; animation: bob 3s ease-in-out infinite; }
.world-decor.d0 { left: 8%; top: 14%; } .world-decor.d1 { right: 10%; top: 18%; animation-delay: .5s; }
.world-decor.d2 { left: 16%; bottom: 10%; animation-delay: 1s; } .world-decor.d3 { right: 18%; bottom: 12%; animation-delay: 1.5s; }
.world-info { padding: 14px 18px 18px; display: grid; gap: 6px; }
.world-info h2 { font-size: 1.45em; }
.world-grades { margin: 0; font-weight: 700; color: var(--ink-soft); font-size: .9em; }
.world-prog { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: .9em; }
.world-prog .mini-bar { background: #eee; }
.world-stars { font-weight: 800; font-size: .9em; }
.world-card.complete { box-shadow: 0 0 0 4px #ffd166, var(--shadow); }

/* ---------- Mapa del mundo ---------- */
.world-screen { max-width: 760px; margin: 0 auto; padding: 0 16px 60px; }
.world-banner { background: linear-gradient(120deg, var(--wc), var(--wc2)); color: #fff; border-radius: 24px; padding: 16px 20px; box-shadow: var(--shadow); margin-bottom: 14px; }
.wb-story { margin: 0 0 6px; font-weight: 800; font-size: 1.05em; }
.wb-meta { margin: 0; font-weight: 700; opacity: .92; font-size: .9em; }
.wmap { position: relative; border-radius: 34px; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.25), transparent 60%), linear-gradient(180deg, var(--wc), var(--wc2)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), var(--shadow); overflow: hidden; }
.wmap-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.wmap-path path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.road-bg { stroke: rgba(0,0,0,.18); stroke-width: 34; }
.road { stroke: #fff3d6; stroke-width: 24; }
.road-done { stroke: #ffd166; stroke-width: 10; stroke-dasharray: 2 18; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.wdecor { position: absolute; font-size: 30px; opacity: .85; animation: bob 4s ease-in-out infinite; pointer-events: none; }
.wmap-start { position: absolute; left: 14px; background: #fff; padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: .85em; box-shadow: var(--shadow-sm); }
.wnode { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; width: 140px; z-index: 2; }
.wnode-circle { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: #fff; border: 6px solid #fff; box-shadow: 0 7px 0 rgba(0,0,0,.25); transition: transform .15s; }
.wnode:hover .wnode-circle { transform: scale(1.1); }
.wnode.open .wnode-circle { background: linear-gradient(180deg, #fff, #fff6d6); border-color: #ffd166; animation: nodePulse 1.6s infinite; }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 7px 0 rgba(0,0,0,.25), 0 0 0 0 rgba(255,209,102,.9); } 50% { box-shadow: 0 7px 0 rgba(0,0,0,.25), 0 0 0 16px rgba(255,209,102,0); } }
.wnode.done .wnode-circle { background: linear-gradient(180deg, #b9fbe0, #06d6a0); border-color: #fff; }
.wnode.locked .wnode-circle { background: #d9d6e6; filter: grayscale(1); opacity: .85; font-size: 30px; }
.wnode.boss .wnode-circle { width: 104px; height: 104px; font-size: 52px; border-color: #ef476f; }
.wnode.boss.done .wnode-circle { border-color: #ffd166; }
.wnode-num { position: absolute; top: -4px; left: 34px; background: var(--primary); color: #fff; font-weight: 800; font-size: .8em; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; }
.wnode.boss .wnode-num { left: 26px; background: #ef476f; }
.wnode-label { margin-top: 6px; background: rgba(255,255,255,.95); padding: 3px 10px; border-radius: 99px; font-weight: 800; font-size: .82em; box-shadow: var(--shadow-sm); line-height: 1.2; text-align: center; }
.wnode.locked .wnode-label { opacity: .75; }
.stars-row { display: inline-flex; gap: 1px; font-size: 20px; line-height: 1; }
.stars-row .on { color: #ffd166; text-shadow: 0 2px 0 #c98a00; }
.stars-row .off { color: rgba(0,0,0,.2); }
.wnode .stars-row { margin-top: -8px; background: #fff; border-radius: 99px; padding: 1px 6px; box-shadow: var(--shadow-sm); }
.you-are-here { position: absolute; top: -48px; animation: bob 1.2s infinite; }
.you-are-here .avatar { box-shadow: 0 0 0 3px #ffd166, 0 6px 0 rgba(0,0,0,.25); }

/* ---------- Ficha de misión ---------- */
.mission-card { text-align: left; }
.mc-head { display: flex; gap: 14px; align-items: center; background: linear-gradient(120deg, var(--wc), var(--wc2)); color: #fff; margin: -26px -26px 16px; padding: 22px 26px; border-radius: 26px 26px 0 0; }
.mc-head h2 { font-size: 1.7em; margin-top: 4px; }
.mc-icon { font-size: 60px; }
.mc-type { display: inline-block; background: rgba(255,255,255,.25); border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: .8em; margin-right: 6px; }
.mc-type.boss { background: #ef476f; }
.mc-learn { background: #fff8db; border-radius: 16px; padding: 14px; margin-bottom: 10px; line-height: 1.45; border-left: 6px solid #ffd166; }
.mc-intro { background: #e9fbf4; border-radius: 16px; padding: 14px; line-height: 1.45; border-left: 6px solid var(--go); }
.mc-rewards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mc-rewards .pill { background: var(--paper-2); }

/* ---------- Pantalla de juego ---------- */
.play { max-width: 980px; margin: 0 auto; padding: 0 16px 40px; }
.play-top { display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.play-title { display: flex; align-items: center; gap: 8px; color: #fff; min-width: 0; flex: 0 1 auto; }
.play-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-title h1 { font-size: clamp(18px, 3.2vw, 26px); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pt-icon { font-size: 30px; }
.play-progress { flex: 1; min-width: 120px; height: 18px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; border: 2px solid rgba(255,255,255,.35); }
.pp-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd166, #06d6a0); border-radius: 99px; transition: width .5s cubic-bezier(.2,.9,.3,1.2); }
.guide { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 14px; }
.guide-chip { flex: 0 0 auto; }
.guide.happy .guide-chip { animation: hop .6s; }
.guide.sad .guide-chip { animation: shake .45s; }
.guide-bubble { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: space-between; border-bottom-left-radius: 4px; min-height: 52px; }
.guide-bubble.good { background: #d7fbec; }
.guide-bubble.bad { background: #ffe6ea; }
.guide-bubble.pop { animation: popIn .3s; }
.play-area { background: rgba(255,255,255,.97); border-radius: 30px; padding: clamp(14px, 3vw, 28px); box-shadow: var(--shadow); min-height: 360px; position: relative; }
.hint-line { text-align: center; color: var(--ink-soft); font-weight: 700; margin: 0 0 14px; }

/* Quiz */
.quiz-card { text-align: center; }
.quiz-img { font-size: 70px; margin-bottom: 6px; }
.quiz-q { font-size: clamp(20px, 3.4vw, 30px); margin-bottom: 18px; }
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quiz-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; min-height: 64px; border-radius: 18px; border: 3px solid var(--line); background: #fff; font-weight: 800; font-size: 1.05em; box-shadow: 0 5px 0 var(--line); transition: transform .12s; animation: popIn .4s both; }
.quiz-opt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--primary); }
.quiz-letter { flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; font-family: var(--font-title); color: var(--primary-2); }
.quiz-opt.ok { background: #d3f9ea; border-color: var(--go); box-shadow: 0 5px 0 var(--go-2); }
.quiz-opt.ok .quiz-letter { background: var(--go); color: #fff; }
.quiz-opt.bad { background: #ffe0e6; border-color: var(--danger); box-shadow: 0 5px 0 #b3123a; }
.quiz-opt.reveal { animation: pulseOk 1s 2; }
@keyframes pulseOk { 50% { transform: scale(1.04); } }
.quiz-opt:disabled { cursor: default; }
.quiz-next { margin-top: 18px; }

/* Match */
.match-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.match-col { display: grid; gap: 10px; }
.match-mid { font-size: 30px; align-self: center; opacity: .5; }
.match-item { min-height: 58px; border-radius: 16px; border: 3px solid var(--line); background: #fff; font-weight: 800; padding: 10px 12px; box-shadow: 0 4px 0 var(--line); transition: transform .12s, background .2s; text-align: center; }
.match-col:first-child .match-item { font-size: 1.05em; }
.match-item:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--primary); }
.match-item.sel { border-color: var(--primary); background: #ece6ff; transform: scale(1.04); box-shadow: 0 0 0 4px rgba(123,92,255,.3); }
.match-item.done { background: var(--pc); border-color: var(--pc); color: #10202a; box-shadow: none; animation: popIn .35s; }
.match-item.nope { animation: shake .45s; border-color: var(--danger); background: #ffe0e6; }

/* Sort */
.sort-game { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.sort-stage { min-height: 200px; display: grid; place-items: center; }
.sort-card { position: relative; width: min(340px, 100%); background: linear-gradient(180deg, #fff, #f6f3ff); border: 4px solid var(--primary); border-radius: 26px; padding: 18px; text-align: center; box-shadow: 0 10px 0 #cfc6ff, var(--shadow); cursor: grab; touch-action: none; user-select: none; transition: transform .25s; }
.sort-card.dragging { transition: none; cursor: grabbing; z-index: 30; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.sort-card .speak-btn { position: absolute; top: 8px; right: 8px; }
.sort-icon { font-size: 60px; }
.sort-text { font-family: var(--font-title); font-size: 1.4em; font-weight: 800; line-height: 1.15; word-break: break-word; }
.sort-drag-hint { margin-top: 8px; font-size: .8em; color: var(--ink-soft); font-weight: 700; }
.sort-card.fly-ok { transform: translateY(160px) scale(.3) !important; opacity: 0; transition: .6s cubic-bezier(.5,0,.75,0); }
.sort-bins { display: grid; gap: 14px; }
.sort-bin { border: 4px dashed rgba(0,0,0,.18); border-radius: 24px; padding: 18px 10px; min-height: 120px; background: var(--paper-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; transition: transform .15s, background .15s; }
.sort-bin:first-child { background: #e3f8ff; }
.sort-bin:nth-child(2) { background: #ffeef3; }
.sort-bin:hover, .sort-bin.hover { transform: scale(1.04); border-style: solid; border-color: var(--primary); }
.bin-icon { font-size: 40px; }
.bin-label { font-family: var(--font-title); font-weight: 800; font-size: 1.3em; }
.bin-count { position: absolute; top: 8px; right: 12px; background: #fff; border-radius: 99px; padding: 0 9px; font-weight: 800; font-size: .85em; }
.pulse-hint { animation: pulseOk .5s 3; border-color: var(--go) !important; border-style: solid !important; }

/* Typing */
.ty-game { display: flex; flex-direction: column; gap: 10px; }
.ty-hud { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.2em; }
.ty-hearts span { font-size: 26px; margin-right: 2px; }
.ty-count { background: var(--paper-2); padding: 4px 14px; border-radius: 99px; }
.ty-field { position: relative; height: clamp(300px, 52vh, 440px); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #bde0fe 0%, #d8f3dc 75%, #95d5b2 100%); border: 4px solid #fff; box-shadow: inset 0 0 0 2px var(--line); }
.ty-field.flash-bad { box-shadow: inset 0 0 0 6px var(--danger); }
.ty-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: repeating-linear-gradient(90deg, #52b788 0 20px, #40916c 20px 40px); }
.ty-drop { position: absolute; top: 0; transform: translateY(-40px); width: 64px; height: 64px; margin-left: -32px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd166); border: 3px solid #f4a261; font: 800 34px var(--font-title); color: #5a3b00; box-shadow: 0 6px 0 rgba(0,0,0,.18); will-change: transform; }
.ty-drop.word { width: auto; height: auto; padding: 8px 16px; margin-left: -40px; border-radius: 16px; font-size: 24px; background: linear-gradient(180deg, #fff, #ffe8a3); }
.ty-drop.typing { border-color: var(--primary); background: linear-gradient(180deg, #fff, #d9ccff); }
.ty-drop.boom { animation: boom .35s forwards; }
.ty-drop.miss { background: #ffb3c1; border-color: var(--danger); opacity: .6; transition: opacity .4s; }
@keyframes boom { to { transform: scale(1.8); opacity: 0; } }
.ty-countdown { position: absolute; inset: 0; display: grid; place-items: center; font: 800 96px var(--font-title); color: #fff; text-shadow: 0 6px 0 var(--primary-2); animation: popIn .5s; }
.ty-resume { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ty-input-row { display: flex; justify-content: center; }
.ty-input { font: 800 1.5em var(--font-title); text-align: center; padding: 10px 18px; border-radius: 16px; border: 3px solid var(--primary); width: min(360px, 100%); background: #fff; color: var(--ink); }
.ty-input.bad { border-color: var(--danger); animation: shake .25s; }
.hidden-input { height: 0; overflow: hidden; }
.ty-keys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ty-key { width: 58px; height: 58px; border-radius: 14px; border: 0; background: #fff; font: 800 26px var(--font-title); box-shadow: 0 5px 0 #b9b0e6; border: 2px solid var(--line); }
.ty-key:active { transform: translateY(4px); box-shadow: 0 1px 0 #b9b0e6; }

/* Code */
.cd-game { display: flex; flex-direction: column; gap: 12px; }
.cd-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-weight: 800; }
.cd-count { background: var(--paper-2); border-radius: 99px; padding: 4px 12px; font-size: .9em; }
.cd-count.full { background: #ffe0e6; color: #b3123a; }
.cd-gems-need { background: #e3f8ff; border-radius: 99px; padding: 4px 12px; font-size: .9em; }
.cd-board-wrap { display: flex; justify-content: center; }
.cd-grid { --cell: min(calc((100vw - 90px) / var(--w)), calc(46vh / var(--h)), 64px); position: relative; display: grid; grid-template-columns: repeat(var(--w), var(--cell)); grid-auto-rows: var(--cell); border-radius: 16px; overflow: hidden; border: 5px solid #5c4033; background: #c8e6a0; box-shadow: var(--shadow-sm); }
.cd-cell { display: grid; place-items: center; font-size: calc(var(--cell) * .62); background: #d8f3b0; }
.cd-cell.alt { background: #c6e89a; }
.cd-cell.wall { background: #8d6e63; }
.cd-cell.trail { background: #fff3b0; }
.cd-goal { animation: bob 1.4s infinite; }
.cd-gem, .cd-robot { position: absolute; width: var(--cell); height: var(--cell); left: 0; top: 0; display: grid; place-items: center; transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))); }
.cd-gem { font-size: calc(var(--cell) * .55); animation: twinkle 1.5s infinite; transition: opacity .3s, transform .3s; }
.cd-gem.got { opacity: 0; transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell) - 30px)) scale(1.6); }
@keyframes twinkle { 50% { filter: brightness(1.4); } }
.cd-robot { font-size: calc(var(--cell) * .72); transition: transform .28s cubic-bezier(.3,.8,.4,1.2); z-index: 2; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.cd-robot.face-l { }
.cd-robot.bump { animation: shake .4s; }
.cd-robot.win { animation: hop .5s 3; }
.cd-prog { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; padding: 10px; border-radius: 16px; background: #2b2d42; align-items: center; }
.cd-empty { color: #cfd2e8; font-weight: 700; font-size: .9em; }
.cd-block { position: relative; width: 50px; height: 50px; border-radius: 12px; border: 0; background: linear-gradient(180deg, #ffd166, #f4a261); font-size: 24px; box-shadow: 0 4px 0 #b5651d; display: grid; place-items: center; }
.cd-block sub { position: absolute; bottom: -6px; right: -6px; background: #ef476f; color: #fff; font: 800 13px var(--font); border-radius: 99px; padding: 2px 6px; border: 2px solid #fff; }
.cd-block.active { outline: 4px solid #06d6a0; transform: scale(1.12); }
.cd-palette { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.cd-arrows { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
.cd-btn { height: 64px; border-radius: 16px; border: 0; background: #fff; font-size: 30px; box-shadow: 0 5px 0 #b9b0e6; border: 3px solid var(--line); }
.cd-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #b9b0e6; }
.cd-mults { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cd-mult-label { font-weight: 800; font-size: .9em; }
.cd-btn.mult { width: 56px; height: 52px; font: 800 20px var(--font-title); background: #ffe0e6; color: #b3123a; }
.cd-actions { display: flex; gap: 10px; }

/* Binary */
.bn-game { text-align: center; }
.bn-title { font-size: clamp(22px, 3.6vw, 32px); margin-bottom: 16px; }
.bn-target { display: inline-block; background: var(--primary); color: #fff; padding: 2px 18px; border-radius: 14px; animation: popIn .5s; }
.bn-bulbs { display: flex; justify-content: center; gap: clamp(6px, 2vw, 16px); flex-wrap: wrap; }
.bn-bulb { width: clamp(64px, 15vw, 96px); padding: 10px 0; border-radius: 20px; border: 3px solid var(--line); background: #2b2d42; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 6px 0 #14152a; transition: background .2s, transform .15s; }
.bn-bulb:hover:not(:disabled) { transform: translateY(-3px); }
.bn-bulb.on { background: linear-gradient(180deg, #fff6c2, #ffd166); color: #5a3b00; border-color: #ffd166; box-shadow: 0 6px 0 #c98a00, 0 0 24px rgba(255,209,102,.8); }
.bn-bulb:disabled { opacity: 1; }
.bn-glow { font-size: 40px; }
.bn-val { font: 800 1.4em var(--font-title); }
.bn-bit { font: 800 1em monospace; background: rgba(0,0,0,.2); padding: 0 10px; border-radius: 6px; }
.bn-code { font: 800 1.6em monospace; letter-spacing: 4px; margin: 14px 0; color: var(--primary-2); }
.bn-sum { font: 800 1.4em var(--font-title); }
.bn-sum strong { font-size: 1.4em; color: var(--primary-2); }
.bn-options { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bn-opt { justify-content: center; min-width: 100px; font-size: 1.4em; }

/* Pixel */
.px-game { text-align: center; }
.px-wrap { overflow-x: auto; padding: 6px; }
.px-grid { --cell: min(calc((100vw - 150px) / var(--w)), 46px); display: inline-grid; grid-template-columns: auto repeat(var(--w), var(--cell)); gap: 3px; touch-action: none; user-select: none; }
.px-code { font: 800 clamp(11px, 1.8vw, 15px) monospace; color: var(--ink-soft); align-self: center; padding-right: 8px; letter-spacing: 1px; }
.px-cell { width: var(--cell); height: var(--cell); border-radius: 6px; border: 2px solid #ddd8f2; background: #fff; padding: 0; transition: background .12s, transform .12s; }
.px-cell.on { background: var(--color); border-color: var(--color); }
.px-cell.err { box-shadow: inset 0 0 0 3px #d62246; animation: shake .3s; }
.px-grid.reveal .px-cell { border-color: transparent; }
.px-grid.reveal .px-cell.on { animation: pulseOk .6s 2; }

/* Sequence */
.sq-title { text-align: center; font-size: clamp(20px, 3.4vw, 28px); margin-bottom: 14px; }
.sq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sq-cols h3 { font-size: 1.05em; color: var(--ink-soft); margin-bottom: 8px; }
.sq-pool { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.sq-step { width: 100%; text-align: left; border-radius: 14px; border: 3px solid var(--line); background: #fff; padding: 12px 14px; font-weight: 800; box-shadow: 0 4px 0 var(--line); animation: popIn .3s both; line-height: 1.25; min-height: 50px; }
.sq-step:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); }
.sq-slots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sq-slot { display: flex; gap: 8px; align-items: center; }
.sq-num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; }
.sq-placeholder { flex: 1; border: 3px dashed var(--line); border-radius: 14px; min-height: 50px; display: grid; place-items: center; color: #b9b0e6; font-weight: 800; }
.sq-step.in { background: #f2eeff; border-color: #cfc6ff; }
.sq-slot.locked .sq-step { background: #d3f9ea; border-color: var(--go); box-shadow: 0 4px 0 var(--go-2); color: #04503a; }
.sq-slot.locked .sq-num { background: var(--go); }
.sq-done-hint { color: var(--go-2); font-weight: 800; text-align: center; padding: 20px; }

/* Memory */
.mm-top { text-align: center; font-weight: 800; margin-bottom: 12px; }
.mm-moves { background: var(--paper-2); padding: 4px 14px; border-radius: 99px; }
.mm-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 10px; max-width: 620px; margin: 0 auto; }
.mm-card { aspect-ratio: 4 / 3.4; border: 0; padding: 0; background: none; perspective: 700px; }
.mm-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mm-card.up .mm-inner { transform: rotateY(180deg); }
.mm-back, .mm-front { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.15); padding: 6px; }
.mm-back { background: repeating-linear-gradient(45deg, #7b5cff 0 12px, #6a4af0 12px 24px); color: #fff; font-size: 34px; border: 4px solid #fff; }
.mm-front { background: #fff; border: 4px solid var(--line); transform: rotateY(180deg); font-weight: 800; font-size: clamp(13px, 2.4vw, 18px); text-align: center; line-height: 1.15; }
.mm-front.big { font-size: clamp(34px, 7vw, 54px); }
.mm-card.match .mm-front { background: #d3f9ea; border-color: var(--go); animation: pulseOk .5s; }

/* Detective */
.dt-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-weight: 800; margin-bottom: 12px; }
.dt-kind { background: var(--paper-2); padding: 4px 12px; border-radius: 99px; }
.dt-counter { background: #ffe0e6; color: #b3123a; padding: 2px 10px; border-radius: 99px; }
.dt-device { border-radius: 22px; border: 3px solid var(--line); overflow: hidden; background: #fff; max-width: 680px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.dt-head { background: #f6f4ff; padding: 12px 16px; display: grid; gap: 6px; border-bottom: 2px solid var(--line); }
.dt-head small { color: var(--ink-soft); font-weight: 800; }
.dt-body { padding: 16px; line-height: 2.1; font-size: 1.05em; }
.dt-frag { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; font-weight: 700; color: inherit; text-align: left; line-height: 1.5; border-bottom: 3px dotted #b9b0e6; transition: background .15s; }
.dt-frag:hover { background: #fff3c4; }
.dt-frag.found { background: #ffd6de; border-bottom: 3px solid var(--danger); color: #8a0a26; }
.dt-frag.found::before { content: '🚩 '; }
.dt-frag.clean { background: #e7f8f0; border-bottom-color: transparent; color: #557; }
.dt-frag.hinted { animation: hintGlow 1s infinite; }
@keyframes hintGlow { 50% { background: #ffe58a; box-shadow: 0 0 0 4px #ffd166; } }
.dt-frag.line { display: block; width: 100%; padding: 10px 12px; margin-bottom: 8px; }
.dt-chat { padding: 14px; background: #ece5dd; display: grid; gap: 8px; }
.dt-bubble-row { display: flex; gap: 8px; align-items: flex-end; }
.dt-who { font-size: 24px; }
.dt-frag.bubble { background: #fff; border-radius: 16px 16px 16px 4px; margin: 0; border-bottom: 3px dotted #b9b0e6; width: auto; flex: 1; }
.dt-frag.bubble.found { background: #ffd6de; }
.dt-frag.bubble.clean { background: #e7f8f0; }
.dt-sms .dt-body { background: #f1f1f6; margin: 12px; border-radius: 18px 18px 18px 4px; }
.dt-urlbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #e9e7f2; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.dt-dots { color: #ef476f; letter-spacing: 2px; font-size: .7em; }
.dt-frag.url { background: #fff; border-radius: 99px; padding: 4px 12px; font-family: monospace; font-size: .95em; flex: 1; }
.dt-web-title { padding: 12px 16px 0; font-family: var(--font-title); font-size: 1.4em; }
.dt-web-hero { font-size: 60px; text-align: center; padding: 8px; background: linear-gradient(120deg, #ffd166, #ff70a6); }
.dt-web-list { padding: 14px; }

/* ---------- Resultados ---------- */
.results { display: grid; place-items: center; padding: 20px 16px 40px; }
.res-card { position: relative; background: #fff; border-radius: 32px; padding: 40px 24px 24px; width: min(620px, 100%); text-align: center; box-shadow: var(--shadow); }
.res-ribbon { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: linear-gradient(120deg, var(--wc), var(--wc2)); color: #fff; font: 800 clamp(18px, 4vw, 26px) var(--font-title); padding: 10px 30px; border-radius: 16px; box-shadow: 0 5px 0 rgba(0,0,0,.25); white-space: nowrap; }
.res-title { font-size: 1.5em; margin: 6px 0 10px; }
.res-stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 4px; }
.res-star { font-size: clamp(54px, 12vw, 80px); color: #e6e3f2; transform: scale(.5); transition: transform .4s cubic-bezier(.2,.9,.3,1.6), color .2s; line-height: 1; }
.res-star:nth-child(2) { transform: scale(.5) translateY(-14px); }
.res-star.on { color: #ffd166; text-shadow: 0 5px 0 #c98a00; transform: scale(1); }
.res-star.on:nth-child(2) { transform: scale(1.2) translateY(-14px); }
.res-star.off { transform: scale(.9); }
.res-star.off:nth-child(2) { transform: scale(1.05) translateY(-14px); }
.char-wrap.jump { animation: hop 1s ease-in-out 3; }
.char-wrap.sad { filter: saturate(.6); }
.res-score { font-weight: 800; color: var(--ink-soft); }
.res-rewards { display: flex; justify-content: center; gap: 14px; margin: 10px 0; }
.reward { background: var(--paper-2); border-radius: 18px; padding: 10px 20px; display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.reward span { font-size: 30px; }
.reward strong { font: 800 1.8em var(--font-title); }
.reward small { font-weight: 800; color: var(--ink-soft); }
.reward.coin { background: #fff4d1; }
.res-try { background: #fff4d1; border-radius: 14px; padding: 12px; font-weight: 700; }
.res-note { font-size: .85em; color: var(--ink-soft); }
.res-badges h2 { font-size: 1.3em; margin: 12px 0 8px; }
.res-badge { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, #fff4d1, #ffe0f0); border-radius: 16px; padding: 10px 14px; text-align: left; margin-bottom: 8px; }
.rb-icon { font-size: 40px; animation: bob 1.4s infinite; }
.res-badge small { display: block; color: var(--ink-soft); }
.levelup { position: relative; overflow: hidden; }
.lu-num { font: 800 110px/1 var(--font-title); background: linear-gradient(180deg, #ffd166, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 #c98a00); animation: popIn .6s cubic-bezier(.2,.9,.3,1.8); }
.lu-burst { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,209,102,.25) 0 10deg, transparent 10deg 20deg); animation: spin 12s linear infinite; z-index: -1; }
@keyframes spin { to { transform: rotate(360deg); } }
.lu-title { font-weight: 800; color: var(--primary-2); font-size: 1.2em; }

/* ---------- Personaje, tienda, mochila ---------- */
.cust-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.cust-preview { background: linear-gradient(170deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); border: 2px solid rgba(255,255,255,.25); border-radius: 30px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 90px; }
.char-big { text-align: center; }
.char-big-name { display: flex; align-items: center; gap: 10px; justify-content: center; color: #fff; font-family: var(--font-title); font-size: 1.4em; }
.cust-side { background: #fff; border-radius: 26px; padding: 16px; box-shadow: var(--shadow); }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.tab { border: 0; border-radius: 99px; padding: 10px 16px; font-weight: 800; background: var(--paper-2); white-space: nowrap; min-height: 44px; }
.tab.sel { background: var(--primary); color: #fff; }
.shop .tabs { background: #fff; border-radius: 99px; padding: 6px; margin: 14px 0; box-shadow: var(--shadow-sm); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.opt-card { border: 3px solid transparent; background: var(--paper-2); border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: transform .15s; }
.opt-card:hover { transform: translateY(-3px); }
.opt-card.sel { border-color: var(--go); background: #e9fbf4; }
.opt-card.locked { opacity: .65; }
.opt-card.locked .char-wrap, .opt-card.locked .item-swatch { filter: grayscale(.7); }
.opt-card small { font-size: .78em; color: var(--ink-soft); font-weight: 700; }
.item-swatch { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line); display: block; }
.item-emoji { font-size: 50px; }
.shop-keeper { display: flex; align-items: center; gap: 14px; }
.shop-keeper .bubble { flex: 1; border-bottom-left-radius: 4px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.shop-item { position: relative; overflow: hidden; background: #fff; border-radius: 22px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow); text-align: center; }
.shop-item.rare { background: linear-gradient(180deg, #fffaf0, #fff0d1); box-shadow: 0 0 0 3px #ffd166, var(--shadow); }
.shop-item.owned { background: #f0fbf6; }
.si-visual { height: 100px; display: grid; place-items: center; }
.si-name { font-family: var(--font-title); font-size: 1.1em; }
.si-price { font-weight: 800; color: #9a6700; }
.inv-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 18px; }
.inv-stat { background: #fff; border-radius: 20px; padding: 12px; text-align: center; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.inv-stat span { font-size: 28px; }
.inv-stat strong { font: 800 1.6em var(--font-title); }
.inv-stat small { font-weight: 800; color: var(--ink-soft); font-size: .8em; }
.inv-group { background: #fff; border-radius: 24px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.inv-group h2 { font-size: 1.3em; margin-bottom: 10px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.inv-item { border: 3px solid transparent; background: var(--paper-2); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inv-item.sel { border-color: var(--go); }
.inv-item small { font-weight: 800; font-size: .8em; }
.trophy { background: linear-gradient(160deg, #fff6d6, #ffe08a); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; border-bottom: 5px solid var(--wc); }
.trophy span { font-size: 40px; animation: bob 2s infinite; }
.trophy small { font-weight: 800; }
.empty-box { background: rgba(255,255,255,.95); border-radius: 24px; padding: 30px; text-align: center; }
.empty-box span { font-size: 60px; }

/* ---------- Insignias ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.badge-card { position: relative; overflow: hidden; background: #fff; border-radius: 22px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
.badge-card small { color: var(--ink-soft); font-size: .82em; line-height: 1.25; }
.badge-medal { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; background: radial-gradient(circle at 35% 30%, #fff6d6, #ffd166 60%, #e09f3e); border: 5px solid #fff; box-shadow: 0 0 0 3px #e09f3e, 0 6px 0 rgba(0,0,0,.15); }
.badge-card.locked .badge-medal { background: #e6e3f2; box-shadow: 0 0 0 3px #cfc6ff; filter: grayscale(1); }
.badge-card.locked { opacity: .8; }
.badge-card.new { box-shadow: 0 0 0 4px #ffd166, var(--shadow-sm); }
.badge-card.new .badge-medal { animation: spinIn 1s cubic-bezier(.2,.9,.3,1.4); }
@keyframes spinIn { from { transform: rotateY(360deg) scale(.4); } }

/* ---------- Diario ---------- */
.jr-world { background: #fff; border-radius: 22px; margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.jr-world summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; background: linear-gradient(120deg, var(--wc), var(--wc2)); color: #fff; font-family: var(--font-title); font-size: 1.15em; }
.jr-world summary::-webkit-details-marker { display: none; }
.jr-icon { font-size: 30px; }
.jr-count { margin-left: auto; font-size: .85em; background: rgba(255,255,255,.25); border-radius: 99px; padding: 2px 10px; }
.jr-list { list-style: none; margin: 0; padding: 8px 14px 14px; display: grid; gap: 8px; }
.jr-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--paper-2); flex-wrap: wrap; }
.jr-item.locked { opacity: .55; }
.jr-m-icon { font-size: 30px; }
.jr-m-info { flex: 1; display: flex; flex-direction: column; min-width: 150px; }
.jr-m-info small { color: var(--ink-soft); font-weight: 700; }

/* ---------- Ajustes ---------- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.set-row:last-child { border-bottom: 0; }
.set-row label { display: flex; flex-direction: column; cursor: pointer; flex: 1; min-width: 180px; }
.set-row small { color: var(--ink-soft); }
.switch { position: relative; width: 62px; height: 36px; flex: 0 0 auto; }
.switch-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-ui { position: absolute; inset: 0; background: #d6d2e8; border-radius: 99px; transition: .2s; }
.switch-ui::after { content: ''; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: .2s; }
.switch-input:checked + .switch-ui { background: var(--go); }
.switch-input:checked + .switch-ui::after { left: 30px; }
.switch-input:focus-visible + .switch-ui { outline: 4px solid var(--gold); outline-offset: 2px; }
.select { font: 700 1em var(--font); padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; min-height: 44px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hub-grid, .cust-grid { grid-template-columns: 1fr; }
  .hub-hero, .cust-preview { position: static; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .step-char-grid { grid-template-columns: 1fr; }
  .char-preview { position: static; }
}
@media (max-width: 620px) {
  :root { --fs: 16px; }
  html.big-text { --fs: 19px; }
  .hud { flex-wrap: wrap; gap: 8px; }
  .hud-title { order: 5; flex-basis: 100%; text-align: left; font-size: 22px; }
  .hud-name { max-width: 34vw; font-size: .95em; }
  .hud-player .avatar { --s: 38px !important; }
  .hud-stats .pill.stars { display: none; }
  .lvl-badge { white-space: nowrap; }
  .play-top .play-title { flex: 1; }
  .px-grid { --cell: min(calc((100vw - 170px) / var(--w)), 40px); gap: 2px; }
  .px-code { font-size: 10px; letter-spacing: 0; padding-right: 4px; }
  .xp-bar { width: 60px; }
  .xp-txt { display: none; }
  .hud-stats .pill { padding: 5px 9px; font-size: .85em; }
  .hud-player { flex: 1; }
  .tiles { gap: 10px; }
  .menu-tile { min-height: 112px; padding: 14px 8px; }
  .menu-tile.big { flex-direction: column; gap: 4px; }
  .menu-tile.big .tile-icon { font-size: 54px; }
  .menu-tile.big .tile-label { font-size: 1.5em; }
  .hero-stats strong { font-size: 1.1em; }
  .match-board { grid-template-columns: 1fr 1fr; }
  .match-mid { display: none; }
  .match-item { font-size: .9em; padding: 8px; min-height: 64px; }
  .sq-cols { grid-template-columns: 1fr; }
  .cd-arrows { grid-template-columns: repeat(4, 56px); }
  .cd-btn { height: 56px; }
  .inv-summary { grid-template-columns: repeat(2, 1fr); }
  .wnode { width: 112px; }
  .wnode-circle { width: 72px; height: 72px; font-size: 34px; }
  .wnode.boss .wnode-circle { width: 88px; height: 88px; }
  .wnode-num { left: 22px; }
  .wnode-label { font-size: .75em; }
  .play-top { gap: 8px; }
  .play-progress { order: 5; flex-basis: 100%; }
  .guide-chip svg { width: 48px; height: 53px; }
  .mc-head { flex-direction: column; text-align: center; }
  .modal { padding: 20px; }
  .mc-head { margin: -20px -20px 14px; }
  .shop-keeper .char-wrap { display: none; }
  .world-grid { grid-template-columns: 1fr; }
  .res-rewards { flex-wrap: wrap; }
}
@media (min-width: 621px) and (max-width: 1024px) and (pointer: coarse) {
  .btn { min-height: 52px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
html.no-motion .pop-in { opacity: 1; }

/* ---------- Impresión ---------- */
@media print { .sky, #fx, .hud, .btn { display: none !important; } body { background: #fff; } }

/* =========================================================
   V0.4 — Mundos en desarrollo, tarjetas RPG y aventuras
   ========================================================= */
.world-n { display: block; font: 800 .55em var(--font); color: var(--ink-soft); letter-spacing: .5px; text-transform: uppercase; }
.world-dev { margin: 0; font-weight: 700; color: #7b2cbf; font-size: .9em; }
.world-card.dev .world-art { filter: saturate(.55); }
.ribbon.dev { background: #6c757d; }
.world-rpg { display: inline-block; font-size: .8em; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #eee; justify-self: start; }
.world-rpg.rs-disponible, .world-rpg.rs-en-progreso { background: #d3f9ea; color: #04704f; }
.world-rpg.rs-completada { background: #fff1c2; color: #7a5200; }
.world-rpg.rs-futura { background: #efe7ff; color: #5a189a; }
.dev-panel { text-align: center; }
.dev-icon { font-size: 64px; }

.rpg-card { display: flex; align-items: center; gap: 14px; border-radius: 22px; padding: 14px 18px; margin-bottom: 14px; color: #fff; background: linear-gradient(120deg, var(--ac), var(--ac2)); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.rpg-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px); pointer-events: none; }
.rpg-card.rs-bloqueada, .rpg-card.rs-futura { background: linear-gradient(120deg, #4a4e69, #22223b); }
.rpg-card-icon { font-size: 44px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.rpg-card-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpg-card-info small { font-weight: 800; opacity: .9; }
.rpg-card-info strong { font-family: var(--font-title); font-size: 1.35em; }
.rpg-state { font-weight: 700; font-size: .92em; }
.rpg-card .mini-bar { background: rgba(255,255,255,.2); max-width: 260px; margin-top: 4px; }
.rpg-card.rs-disponible { animation: rpgGlow 2s ease-in-out infinite; }
@keyframes rpgGlow { 50% { box-shadow: 0 0 0 6px rgba(255,209,102,.5), var(--shadow); } }
.menu-tile.big.rpg { background: linear-gradient(120deg, #2b9348, #3a0ca3 55%, #f15bb5); }

/* Celebración de desbloqueo */
.rpg-unlock { position: relative; overflow: hidden; }
.ru-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(rgba(125,249,255,.18) 0 10deg, transparent 10deg 20deg); animation: spin 14s linear infinite; z-index: -1; }
.ru-fragment { font-size: 96px; animation: fragIn 1.2s cubic-bezier(.2,.9,.3,1.5) both, bob 2s 1.2s infinite; filter: drop-shadow(0 0 24px #7df9ff); }
@keyframes fragIn { from { transform: scale(0) rotate(-180deg); opacity: 0; } }
.ru-kicker { font-weight: 800; color: var(--go-2); margin: 0; }
.ru-name { font: 800 1.5em var(--font-title); color: var(--primary-2); margin: 6px 0; }

/* Fragmentos */
.frag-hero { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; margin: 10px 0 20px; color: #fff; }
.frag-story h2 { font-size: 1.7em; margin-bottom: 8px; }
.frag-story p { line-height: 1.5; }
.help.light { color: #d9d3ff; }
.frag-ring { position: relative; width: 240px; height: 240px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, rgba(125,249,255,.15), transparent 70%); }
.frag-gem { position: absolute; left: 50%; top: 50%; font-size: 30px; transform: rotate(calc(var(--i) * 40deg - 90deg)) translate(98px) rotate(calc(var(--i) * -40deg + 90deg)); margin: -20px 0 0 -17px; filter: grayscale(1) brightness(.6); opacity: .55; }
.frag-gem.on { filter: drop-shadow(0 0 10px #7df9ff); opacity: 1; animation: twinkle 1.6s infinite; }
.frag-core { position: absolute; inset: 70px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-content: center; text-align: center; box-shadow: 0 0 30px rgba(125,249,255,.6); }
.frag-core strong { font: 800 2em var(--font-title); line-height: 1; }
.frag-core small { font-weight: 800; color: var(--ink-soft); }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.adv-card { position: relative; overflow: hidden; background: #fff; border-radius: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.adv-art { position: relative; height: 110px; display: grid; place-items: center; background: linear-gradient(120deg, var(--ac), var(--ac2)); }
.adv-card.rs-bloqueada .adv-art, .adv-card.rs-futura .adv-art { filter: grayscale(.75) brightness(.85); }
.adv-icon { font-size: 60px; filter: drop-shadow(0 5px 0 rgba(0,0,0,.2)); }
.adv-n { position: absolute; top: 10px; left: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 1.1em var(--font-title); box-shadow: var(--shadow-sm); }
.adv-info { padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.adv-info h3 { font-size: 1.3em; }
.adv-info small { color: var(--ink-soft); font-weight: 800; }
.adv-info p { margin: 2px 0; font-size: .92em; }
.adv-sum { color: var(--ink-soft); }
.adv-card .rpg-state { color: var(--ink); }
.adv-actions { padding: 8px 16px 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.adv-card .mini-bar { background: #eee; }

/* Pantalla de aventura (intro) */
.adventure { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.adv-intro { max-width: 760px; width: 100%; }
.ai-head { display: flex; gap: 16px; align-items: center; background: linear-gradient(120deg, var(--ac), var(--ac2)); color: #fff; margin: -22px -22px 14px; padding: 20px 22px; border-radius: var(--radius) var(--radius) 0 0; }
.ai-head h1 { font-size: clamp(26px, 4vw, 38px); }
.ai-head p { margin: 6px 0 0; }
.ai-art { font-size: 72px; }
.ai-missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; padding: 0; list-style: none; counter-reset: m; }
.ai-missions li { background: var(--paper-2); border-radius: 12px; padding: 8px 12px; font-weight: 800; counter-increment: m; }
.ai-missions li::before { content: counter(m) '. '; color: var(--primary-2); }
.ai-progress { background: #fff1c2; border-radius: 12px; padding: 10px 14px; font-weight: 800; }
.ai-controls p { background: #e9fbf4; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: .92em; }
.group-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gp { border: 3px solid var(--line); background: #fff; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.gp span { font-size: 28px; }
.gp small { color: var(--ink-soft); font-size: .78em; }
.gp.sel { border-color: var(--go); background: #e9fbf4; box-shadow: 0 0 0 4px rgba(6,214,160,.25); }
.adv-locked { text-align: center; max-width: 520px; }

/* ---------- Juego RPG a pantalla completa ---------- */
.adventure.playing { position: fixed; inset: 0; z-index: 30; padding: 0; display: block; background: #000; }
.rpg-host { width: 100%; }
.adventure.playing .rpg-host { position: absolute; inset: 0; }
.rpg-root { position: absolute; inset: 0; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; touch-action: none; font-size: 16px; }
.rpg-stage { position: absolute; inset: 0; }
.rpg-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.rpg-objectives { position: absolute; top: 10px; left: 10px; max-width: min(340px, calc(100% - 140px)); background: rgba(20,16,50,.82); color: #fff; border-radius: 16px; padding: 10px 14px; font-size: .9em; box-shadow: 0 6px 18px rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.15); z-index: 3; }
.rpg-objectives.flash { animation: popIn .4s; }
.ro-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; font-family: var(--font-title); font-size: 1.05em; }
.rpg-objectives ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rpg-objectives li { display: flex; gap: 6px; font-weight: 700; line-height: 1.25; }
.rpg-objectives li.done { opacity: .6; text-decoration: line-through; }
.rpg-objectives .chk { color: #ffd166; width: 1em; flex: 0 0 auto; }
.rpg-objectives li.done .chk { color: #06d6a0; }
.rpg-hbtns { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 3; }
.rpg-hbtn { width: 52px; height: 52px; border-radius: 16px; border: 0; background: rgba(255,255,255,.95); font-size: 24px; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.rpg-hbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.rpg-toast { position: absolute; left: 50%; top: 70px; transform: translate(-50%, -20px); background: #fff; color: var(--ink); font-weight: 800; padding: 10px 18px; border-radius: 99px; box-shadow: var(--shadow); opacity: 0; transition: .3s; pointer-events: none; z-index: 4; max-width: 90%; text-align: center; }
.rpg-toast.on { opacity: 1; transform: translate(-50%, 0); }
.rpg-banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); background: linear-gradient(120deg, #ffd166, #ff9f1c); color: #3d2008; border: 5px solid #fff; border-radius: 22px; padding: 16px 32px; text-align: center; display: flex; flex-direction: column; z-index: 5; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: bannerIn .6s cubic-bezier(.2,.9,.3,1.5); pointer-events: none; }
.rpg-banner small { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.rpg-banner strong { font: 800 clamp(22px, 4vw, 36px) var(--font-title); }
@keyframes bannerIn { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.rpg-tutorial { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(20,16,50,.88); color: #fff; border-radius: 18px; padding: 12px 18px; text-align: center; z-index: 3; animation: popIn .4s; max-width: 92%; }
.rpg-tutorial p { margin: 6px 0 0; }
.tut-keys { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 6px; }
.tut-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.tut-or { font-weight: 800; }
.kc { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 3px 0 #b9b0e6; }
.kc.empty { visibility: hidden; }
.hidden { display: none !important; }
.rpg-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 8; }
.rpg-fade.on { opacity: 1; }
.rpg-overlay { position: absolute; inset: 0; background: rgba(10,6,40,.6); display: grid; place-items: center; padding: 12px; z-index: 6; overflow-y: auto; touch-action: auto; user-select: text; }
.rpg-panel { background: #fff; color: var(--ink); border-radius: 24px; padding: 20px; width: min(760px, 100%); max-height: calc(100% - 8px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.rpg-panel h2 { font-size: 1.5em; margin-bottom: 8px; }
.rpg-pause { width: min(460px, 100%); text-align: center; }
.pause-btns { display: grid; gap: 10px; margin: 12px 0; }
.bind-list { display: grid; gap: 6px; text-align: left; }
.bind-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--paper-2); }
.rpg-pause .set-row { text-align: left; }
.inv-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.inv-slot { display: flex; gap: 12px; align-items: center; background: var(--paper-2); border-radius: 14px; padding: 10px 12px; }
.inv-slot small { display: block; color: var(--ink-soft); }
.inv-ico { font-size: 34px; }

/* Diálogos */
.rpg-dialog { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(820px, calc(100% - 20px)); background: #fffdf5; color: var(--ink); border: 4px solid #1b1b3a; border-radius: 18px; box-shadow: 0 8px 0 rgba(0,0,0,.35); padding: 12px 14px; display: flex; gap: 12px; z-index: 7; cursor: pointer; animation: popIn .25s; }
.rd-portrait { flex: 0 0 72px; height: 72px; border-radius: 12px; background: #cdeffd; display: grid; place-items: center; border: 3px solid #1b1b3a; overflow: hidden; }
.rd-portrait canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.rd-portrait.icon { font-size: 40px; }
.rd-body { flex: 1; min-width: 0; }
.rd-name { font-family: var(--font-title); font-size: 1.1em; color: var(--primary-2); }
.rd-text { margin: 2px 0 6px; font-weight: 700; font-size: 1.08em; line-height: 1.4; min-height: 2.8em; }
.rd-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rd-hint { font-size: .8em; font-weight: 800; color: var(--ink-soft); animation: bob 1.4s infinite; }

/* Controles táctiles */
.touch-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 4; pointer-events: none; }
.tc-pad { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,.22); border: 3px solid rgba(255,255,255,.5); pointer-events: auto; touch-action: none; }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.tc-arrow { position: absolute; color: rgba(255,255,255,.85); font-size: 14px; pointer-events: none; }
.tc-arrow.up { top: 6px; left: 50%; transform: translateX(-50%); } .tc-arrow.down { bottom: 6px; left: 50%; transform: translateX(-50%); }
.tc-arrow.left { left: 8px; top: 50%; transform: translateY(-50%); } .tc-arrow.right { right: 8px; top: 50%; transform: translateY(-50%); }
.tc-btns { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; gap: 14px; align-items: flex-end; pointer-events: auto; }
.tc-btn { width: 70px; height: 70px; border-radius: 50%; border: 3px solid #fff; font: 800 26px var(--font-title); box-shadow: 0 5px 0 rgba(0,0,0,.35); touch-action: none; }
.tc-a { background: #06d6a0; color: #053b2c; width: 82px; height: 82px; font-size: 32px; }
.tc-b { background: #ffd166; }
.tc-btn.on { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.rpg-root.touch .rpg-dialog { bottom: 160px; }
.rpg-root.touch .rpg-tutorial { bottom: 170px; }

/* Actividades */
.act-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.act-head h2 { flex: 1; margin: 0; }
.act-icon { font-size: 34px; }
.act-steps { display: flex; gap: 5px; }
.act-steps span { width: 14px; height: 14px; border-radius: 50%; background: #e6e3f2; }
.act-steps span.done { background: var(--go); }
.act-steps span.now { background: var(--gold); transform: scale(1.2); }
.act-tip { min-height: 1.4em; font-weight: 800; margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: var(--paper-2); }
.act-tip:empty { display: none; }
.act-tip.good { background: #d3f9ea; color: #04503a; }
.act-tip.bad { background: #ffe6ea; color: #8a0a26; }
.act-lead { font-weight: 700; color: var(--ink-soft); margin: 4px 0 10px; }
.act-q { text-align: center; font-size: 1.4em; margin: 6px 0 12px; }
.ty-robot { display: flex; gap: 10px; align-items: center; }
.ty-robot canvas { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 auto; }
.ty-robot .bubble { flex: 1; background: var(--paper-2); }
.ty-screen { margin: 12px 0; background: #1b2a41; color: #fff; border-radius: 14px; padding: 14px; font: 800 clamp(20px, 3.4vw, 30px) ui-monospace, Consolas, monospace; letter-spacing: 2px; min-height: 64px; word-break: break-all; border: 4px solid #2b2d42; }
.ty-screen .ok { color: #39ff88; } .ty-screen .bad { color: #ff5d73; background: rgba(255,93,115,.18); border-radius: 4px; } .ty-screen .pend { color: #6c7a91; }
.ty-screen .cur { border-bottom: 3px solid #ffd166; animation: twinkle 1s infinite; }
.ty-row { display: flex; gap: 10px; }
.ty-field-real { flex: 1; min-width: 0; font: 800 1.4em ui-monospace, Consolas, monospace; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--primary); color: var(--ink); background: #fff; }
.keycaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.keycap { display: inline-grid; place-items: center; min-width: 46px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 #b9b0e6; font-weight: 800; transition: .1s; }
.keycap.on { background: var(--gold); transform: translateY(3px); box-shadow: 0 1px 0 #b9b0e6; }
.keycap.xl { min-width: 84px; height: 84px; font-size: 1.8em; border-radius: 16px; }
.key-big { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; text-align: center; }
.key-big p { flex-basis: 100%; font-weight: 800; margin: 6px 0 0; }
.plus { font: 800 1.8em var(--font-title); }
.vkeys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.btn-key { cursor: pointer; font-size: 1.1em; min-height: 52px; }
.sc-field { width: 100%; margin: 6px 0; font: 700 1.2em var(--font); padding: 10px 14px; border-radius: 12px; border: 3px solid var(--line); }
.sc-field:focus { border-color: var(--primary); outline: none; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.tool-btn { border: 3px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 4px 0 var(--line); transition: transform .12s; }
.tool-btn:hover { transform: translateY(-3px); border-color: var(--primary); }
.tool-btn.ok { background: #d3f9ea; border-color: var(--go); }
.tool-ico { font-size: 42px; }
.dnd-area { position: relative; }
.piece-tray, .file-desk { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 70px; padding: 10px; border-radius: 16px; background: #f6f4ff; border: 2px dashed var(--line); margin-bottom: 12px; }
.piece, .file-item { border: 3px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; cursor: grab; touch-action: none; box-shadow: 0 4px 0 var(--line); font-weight: 700; }
.piece span, .file-item .f-ico { font-size: 28px; }
.piece.big span { font-size: 36px; }
.piece.sel, .file-item.sel { border-color: var(--primary); background: #ece6ff; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(123,92,255,.3); }
.piece.dragging, .file-item.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: rotate(4deg) scale(1.08); box-shadow: 0 16px 30px rgba(0,0,0,.35) !important; opacity: .95; }
.drawers, .folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.drawer, .folder { border: 3px dashed #b9b0e6; background: #fff8e6; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 110px; transition: transform .15s, background .15s; }
.folder { background: #fff3c4; }
.has-sel .drawer, .has-sel .folder, .has-sel .m-slot:not(.filled) { border-color: var(--primary); animation: zoneGlow 1s infinite; }
@keyframes zoneGlow { 50% { box-shadow: 0 0 0 5px rgba(123,92,255,.35); } }
.drawer.hover, .folder.hover, .m-slot.hover { transform: scale(1.06); border-style: solid; border-color: var(--go); background: #e9fbf4; }
.dr-ico, .fo-ico { font-size: 34px; }
.dr-items { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; font-size: 18px; }
.fo-count { background: #fff; border-radius: 99px; padding: 0 10px; font-weight: 800; }
.machine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 14px; border-radius: 18px; background: #2b2d42; margin-bottom: 12px; }
.m-slot { width: 96px; height: 96px; border-radius: 16px; border: 3px dashed #8d99ae; background: #3d405b; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.m-slot small { font-weight: 800; font-size: .78em; }
.m-sil { font-size: 34px; opacity: .3; filter: grayscale(1); }
.m-sil.hide { visibility: hidden; }
.m-slot.filled { border-style: solid; border-color: #06d6a0; background: #1b4332; }
.m-part { font-size: 40px; }
.m-arrow { color: #ffd166; font-size: 22px; font-weight: 800; }
.machine.working .m-slot.filled { animation: pulseOk .6s infinite; box-shadow: 0 0 18px #ffd166; }
.machine.working .m-arrow { animation: bob .6s infinite; }
.clues { background: #fff8e6; border-radius: 12px; padding: 10px 10px 10px 30px; font-weight: 700; margin: 0 0 10px; }
.mini-piece { display: inline-block; }

/* Final */
.rpg-final { text-align: center; position: relative; overflow: hidden; }
.final-frag { font-size: 110px; animation: fragIn 1.2s cubic-bezier(.2,.9,.3,1.5) both, bob 2s 1.2s infinite; filter: drop-shadow(0 0 30px #f15bb5); }
.final-sub { font-weight: 800; color: var(--primary-2); }
.final-rewards { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 380px; margin: 12px auto; }
.final-rewards li { background: linear-gradient(120deg, #fff4d1, #ffe0f0); border-radius: 12px; padding: 10px; font-weight: 800; animation: popIn .5s both; }
.final-rewards li:nth-child(2) { animation-delay: .15s; } .final-rewards li:nth-child(3) { animation-delay: .3s; } .final-rewards li:nth-child(4) { animation-delay: .45s; }

@media (max-width: 760px) {
  .frag-hero { grid-template-columns: 1fr; }
  .group-pick { grid-template-columns: 1fr; }
  .ai-head { flex-direction: column; text-align: center; }
  .rpg-objectives { font-size: .78em; padding: 8px 10px; max-width: calc(100% - 130px); }
  .rpg-hbtn { width: 46px; height: 46px; font-size: 20px; }
  .rpg-dialog { padding: 10px; gap: 8px; }
  .rd-portrait { flex-basis: 52px; height: 52px; } .rd-portrait canvas { width: 46px; height: 46px; }
  .rd-text { font-size: 1em; }
  .rpg-panel { padding: 14px; border-radius: 18px; }
  .m-slot { width: 74px; height: 80px; }
  .keycap.xl { min-width: 64px; height: 64px; font-size: 1.4em; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .rpg-root.touch .rpg-dialog { bottom: 8px; left: 50%; width: min(560px, calc(100% - 340px)); }
  .rpg-root.touch .rpg-tutorial { bottom: 8px; }
  .tc-pad { width: 110px; height: 110px; }
  .rpg-objectives { max-height: 45%; overflow: auto; }
}

/* =========================================================
   V0.5 — Guardianes, diagnóstico, rangos, camino, docente
   ========================================================= */
.g-cartoon-view { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.rank-pill { border: 0; gap: 6px; padding: 3px 10px 3px 4px; box-shadow: 0 3px 0 rgba(0,0,0,.12), inset 0 0 0 2px var(--rc); }
.rank-pill .g-cartoon-view { border-radius: 6px; background: #e9f5ff; }
.menu-tile.c7 { background: linear-gradient(140deg, #c8935a, #7f4a1c); }
.menu-tile.c8 { background: linear-gradient(140deg, #06d6a0, #118ab2); }
.diag-cta { background: linear-gradient(120deg, #c8935a, #8d5a2b 60%, #3a0ca3); }
.diag-cta .next-icon .g-cartoon-view { background: rgba(255,255,255,.25); border-radius: 16px; }
.diag-cta .next-info small:last-child { font-weight: 700; opacity: .9; }

/* Panel guía (guardián + globo) */
.guide-panel { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.gd-char { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.gd-char small { font-weight: 800; color: var(--ink-soft); }
.gd-char .g-cartoon-view { background: radial-gradient(circle, #fff6d6 0%, #fde2c4 60%, transparent 70%); border-radius: 50%; }
.gd-bubble { flex: 1; background: #fffdf5; border: 3px solid #1b1b3a; border-radius: 18px 18px 18px 4px; padding: 12px 14px; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.gd-text { margin: 0 0 8px; font-weight: 800; font-size: 1.08em; line-height: 1.4; }
.gd-text.pop { animation: popIn .3s; }
.gd-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Demostraciones */
.demo-hand { position: fixed; z-index: 10000; pointer-events: none; transform: translate(-6px, -4px); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.demo-hand.moving { transition: left .6s ease, top .6s ease; }
.demo-hand.slow { transition: left 1.2s ease-in-out, top 1.2s ease-in-out; }
.demo-hand.tap svg, .demo-hand.tap2 svg, .demo-hand.grab svg { animation: tapIt .25s; }
@keyframes tapIt { 50% { transform: scale(.8) translateY(3px); } }
.demo-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .85; }
.demo-ghost.slow { transition: left 1.2s ease-in-out, top 1.2s ease-in-out; }
.demo-target { box-shadow: 0 0 0 5px #ffd166 !important; }
.demo-key { position: fixed; z-index: 10000; transform: translate(-50%, -140%); background: #1b1b3a; color: #fff; font: 800 1.3em var(--font-title); padding: 10px 18px; border-radius: 14px; box-shadow: 0 0 0 4px #ffd166, 0 10px 30px rgba(0,0,0,.4); animation: popIn .3s; white-space: nowrap; pointer-events: none; }

/* Diagnóstico */
.diagnostic { padding-bottom: 40px; }
.diag-host { max-width: 920px; margin: 0 auto; }
.diag-intro .guide-panel .gd-bubble { font-size: 1.05em; }
.diag-rules { list-style: none; padding: 0; display: grid; gap: 6px; font-weight: 700; }
.diag-rules li { background: var(--paper-2); border-radius: 12px; padding: 8px 12px; }
.diag-path { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0; }
.dp-st { background: #fff8e6; border: 3px dashed #e3b77f; border-radius: 16px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.dp-st.done { background: #e9fbf4; border: 3px solid var(--go); }
.dp-ico { font-size: 30px; }
.dp-st small { color: var(--ink-soft); font-weight: 700; font-size: .78em; }
.dp-note { color: #7b2cbf !important; }
.lead.dark { color: var(--ink); font-weight: 800; text-align: center; }
.dg-station { background: #fff; border-radius: 26px; padding: 18px; box-shadow: var(--shadow); }
.dg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.dg-head h2 { font-size: 1.4em; }
.dg-head small { color: var(--ink-soft); font-weight: 800; }
.dg-st-icon { font-size: 40px; }
.dg-dots { display: flex; gap: 6px; margin-left: auto; }
.dg-dots span { width: 14px; height: 14px; border-radius: 50%; background: #e6e3f2; }
.dg-dots span.done { background: var(--go); } .dg-dots span.now { background: var(--gold); transform: scale(1.2); }
.dg-stage { position: relative; min-height: 280px; border-radius: 20px; background: linear-gradient(180deg, #e3f6ff, #f1fff4); border: 3px solid var(--line); padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; outline: none; overflow: hidden; touch-action: manipulation; }
.dg-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.dg-target { position: absolute; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff6c2, #ffd166); box-shadow: 0 4px 0 #c98a00; display: grid; place-items: center; cursor: pointer; animation: popIn .4s; }
.dg-target.static, .dg-gem.static, .dg-box.static, .d-icon.static, .dg-device.static { position: static; }
.dg-target.static { width: 70px; height: 70px; font-size: 40px; }
.dg-chest { font-size: 80px; border: 0; background: none; cursor: pointer; transition: transform .15s; }
.dg-chest:hover { transform: scale(1.06); } .dg-chest.open { animation: hop .5s; }
.dg-gem { position: absolute; left: 12%; top: 40%; font-size: 56px; cursor: grab; user-select: none; touch-action: none; }
.dg-gem.dragging { cursor: grabbing; z-index: 5; filter: drop-shadow(0 10px 10px rgba(0,0,0,.3)); }
.dg-box { position: absolute; right: 12%; top: 32%; width: 130px; height: 120px; border: 4px dashed #8d5a2b; border-radius: 18px; background: #fff3c4; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 50px; }
.dg-box small { font-size: 14px; font-weight: 800; }
.dg-box.filled { border-style: solid; border-color: var(--go); background: #e9fbf4; }
.dg-select { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px; }
.dg-shape { width: 80px; height: 80px; font-size: 44px; border-radius: 18px; border: 4px solid transparent; background: #fff; box-shadow: 0 4px 0 var(--line); cursor: pointer; }
.dg-shape.sel { border-color: var(--primary); background: #ece6ff; }
.dg-input { font: 800 1.6em ui-monospace, Consolas, monospace; padding: 12px 16px; border-radius: 14px; border: 3px solid var(--primary); width: min(320px, 100%); text-align: center; }
.dg-keycap { font: 800 1.8em var(--font-title); background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 14px 26px; box-shadow: 0 6px 0 #b9b0e6; }
.dg-keycap.ok { background: #d3f9ea; border-color: var(--go); }
.dg-grid { display: grid; gap: 4px; }
.dg-cell { width: 44px; height: 44px; background: #b7e4c7; border-radius: 8px; display: grid; place-items: center; font-size: 26px; }
.dg-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; width: 100%; max-width: 640px; }
.dg-device { border: 3px solid var(--line); background: #fff; border-radius: 18px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 var(--line); }
.dg-device:hover { border-color: var(--primary); }
.dg-device.ok { background: #d3f9ea; border-color: var(--go); } .dg-device.no { background: #ffe6ea; border-color: var(--danger); }
.dg-device small { font-weight: 800; }
.desk { position: relative; width: 100%; height: 300px; border-radius: 14px; background: linear-gradient(135deg, #3a86ff, #7209b7); overflow: hidden; }
.d-icon { position: absolute; width: 92px; border: 2px solid transparent; background: transparent; border-radius: 10px; padding: 4px; display: flex; flex-direction: column; align-items: center; color: #fff; cursor: pointer; user-select: none; touch-action: none; }
.d-icon small { font-weight: 800; text-shadow: 0 1px 2px #000; font-size: .78em; }
.d-icon.sel { background: rgba(255,255,255,.3); border-color: #fff; }
.d-icon.dragging { z-index: 6; opacity: .85; }
.d-icon.static { color: var(--ink); background: #e9f5ff; }
.d-icon.static small { text-shadow: none; }
.d-icon.in { position: static; color: var(--ink); }
.d-icon.in small { text-shadow: none; }
.d-icon.full .d-ico { animation: hop .5s; }
.d-ico { font-size: 40px; line-height: 1.1; }
.d-win { position: absolute; left: 34%; top: 14%; width: min(330px, 62%); background: #fff; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.45); overflow: hidden; z-index: 4; }
.w-bar { display: flex; justify-content: space-between; align-items: center; background: #e9e7f2; padding: 4px 4px 4px 10px; font-weight: 800; color: var(--ink); }
.w-close { width: 40px; height: 32px; border: 0; border-radius: 6px; background: #ef476f; color: #fff; font-weight: 800; cursor: pointer; }
.w-body { display: flex; gap: 8px; padding: 12px; min-height: 100px; flex-wrap: wrap; }
.diag-rpg { display: none; }
.diag-rpg.playing { display: block; position: fixed; inset: 0; z-index: 30; background: #000; }
.diag-results { display: grid; gap: 14px; }
.dr-rank { background: #fff; display: flex; gap: 18px; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 35%, #fff), #fff); border: 4px solid var(--rc); }
.dr-rank h2 { font-size: 2em; }
.dr-char .g-cartoon-view { background: radial-gradient(circle, #fff, transparent 70%); }
.skill-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.skill-row.small { margin: 4px 0; font-size: .9em; }
.sk-ico { font-size: 26px; width: 34px; text-align: center; }
.sk-main { flex: 1; }
.sk-top { display: flex; justify-content: space-between; gap: 8px; font-size: .95em; flex-wrap: wrap; }
.sk-band { font-weight: 800; color: var(--ink-soft); }
.sk-bar { height: 14px; background: #ece9f8; border-radius: 99px; overflow: hidden; margin-top: 4px; }
.sk-fill { height: 100%; background: linear-gradient(90deg, #ffd166, #06d6a0); border-radius: 99px; transition: width 1s cubic-bezier(.2,.9,.3,1.1); }
.sk-fill.none { background: repeating-linear-gradient(45deg, #ddd 0 6px, #eee 6px 12px); width: 100% !important; opacity: .6; }
.req-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.req-list li { background: var(--paper-2); border-radius: 10px; padding: 8px 12px; font-weight: 700; }
.req-list li.ok { background: #e9fbf4; }
.criteria ul { text-align: left; line-height: 1.5; }
.crit-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.crit-table th, .crit-table td { border-bottom: 1px solid var(--line); padding: 6px; text-align: center; }

/* Recomendaciones y camino */
.learn-grid { display: grid; grid-template-columns: minmax(300px, 1fr) 1.3fr; gap: 16px; align-items: start; }
.reco { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--paper-2); margin-bottom: 8px; }
.reco-ico { font-size: 28px; }
.reco-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.reco-info small { font-weight: 800; color: var(--primary-2); }
.reco-info span { color: var(--ink-soft); font-size: .9em; }
.reco-mission { background: #fff8e6; } .reco-practice { background: #e9fbf4; } .reco-reeval { background: #e3f2ff; } .reco-tutorial { background: #f3e8ff; }
.strong-line { background: #fff1c2; border-radius: 12px; padding: 8px 12px; font-weight: 800; }
.tut-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mile-list { padding-left: 18px; font-weight: 700; }
.cta-diag { background: linear-gradient(120deg, #fff3c4, #ffe0c2); }
.tutorial { text-align: left; }
.tut-stage { min-height: 140px; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; background: #f6f4ff; border-radius: 16px; padding: 14px; margin: 10px 0; }

/* Salón de los Guardianes */
.gh-ladder { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 12px 0 18px; }
.gh-ped { background: #fff; position: relative; border: 0; border-radius: 18px 18px 8px 8px; padding: 10px 4px 8px; background: linear-gradient(180deg, rgba(255,255,255,.95), color-mix(in srgb, var(--rc) 40%, #fff)); display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 6px 0 var(--rc2); cursor: pointer; transition: transform .15s; }
.gh-ped:hover { transform: translateY(-4px); }
.gh-ped.sel { outline: 4px solid var(--gold); }
.gh-ped.unknown { background: linear-gradient(180deg, #e9e6f5, #c9c3e6); box-shadow: 0 6px 0 #6b6790; }
.gh-ped strong { font-family: var(--font-title); }
.gh-ped small { font-weight: 800; color: var(--ink-soft); font-size: .78em; }
.gh-you { position: absolute; top: -10px; background: var(--danger); color: #fff; font-size: .7em; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.gh-detail { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.gh-big { background: #fffdf0; display: grid; place-items: center; background: radial-gradient(circle, #fffdf0 30%, color-mix(in srgb, var(--rc, #ccc) 35%, #fff) 70%); border-radius: 24px; padding: 18px; }
.gh-info h2 { font-size: 2em; }
.gh-title { font-weight: 800; color: var(--primary-2); margin: 0 0 8px; }
.gh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-chips .chip { min-height: 0; padding: 4px 12px; font-size: .85em; }
.gh-anims { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-talk { text-align: center; }
.gh-talk .g-cartoon-view { margin: 0 auto; }
.gh-talk-text { font-weight: 800; font-size: 1.1em; }

/* Ceremonia de ascenso */
.ceremony { position: relative; overflow: hidden; text-align: center; }
.cer-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 40%, transparent) 0 10deg, transparent 10deg 20deg); animation: spin 16s linear infinite; z-index: -1; }
.cer-kicker { font-weight: 800; color: var(--rc2); letter-spacing: 1px; margin: 0; }
.ceremony h2 { font-size: 2.2em; }
.cer-stage { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 8px 0; }
.cer-new { animation: fragIn 1.2s cubic-bezier(.2,.9,.3,1.5) both; filter: drop-shadow(0 0 20px var(--rc)); }
.cer-prev { display: flex; flex-direction: column; align-items: center; opacity: .9; }
.cer-prev small { font-weight: 800; color: var(--ink-soft); }
.cer-unlocks { list-style: none; padding: 0; display: grid; gap: 6px; max-width: 420px; margin: 10px auto; }
.cer-unlocks li { background: linear-gradient(120deg, #fff4d1, #ffe0f0); border-radius: 12px; padding: 8px; font-weight: 800; }
.welcome .g-cartoon-view { margin: 0 auto; }

/* RPG: ayudas y diálogo */
.rpg-help { width: min(520px, 100%); }
.help-head { display: flex; gap: 12px; align-items: center; }
.help-head .g-cartoon-view { flex: 0 0 auto; background: #fff6d6; border-radius: 16px; }
.help-msg { font-weight: 800; margin: 4px 0; }
.help-obj { background: var(--paper-2); border-radius: 12px; padding: 8px 12px; }
.help.small { font-size: .8em; text-align: center; }
.rd-tools { display: inline-flex; gap: 6px; align-items: center; }
.rd-simple { border: 0; background: #e9fbf4; border-radius: 99px; padding: 6px 10px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 0 #9fd8c2; }
.act-help { margin-left: auto; }
.logic-lamps { display: flex; justify-content: center; gap: 14px; margin: 14px 0; }
.logic-lamp { width: 96px; padding: 10px 0; border-radius: 18px; border: 3px solid var(--line); background: #2b2d42; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 1.2em; }
.logic-lamp.on { background: linear-gradient(180deg, #fff6c2, #ffd166); color: #5a3b00; box-shadow: 0 0 20px rgba(255,209,102,.8); }
.ll-bulb { font-size: 34px; }
.gp-rec { color: var(--go-2); font-weight: 800; font-style: normal; font-size: .8em; }

/* Docente */
.teacher-gate { max-width: 460px; margin: 0 auto; }
.local-note { border-left: 8px solid var(--warn); }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feat-grid ul { padding-left: 18px; margin: 4px 0; }
.table-wrap { overflow-x: auto; }
.teacher-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.teacher-table th { text-align: left; background: var(--paper-2); padding: 8px; }
.teacher-table td { border-bottom: 1px solid var(--line); padding: 8px; }
.teacher-detail { text-align: left; }
.modal-teacher .modal { width: min(720px, 100%); }
.note-area { width: 100%; border-radius: 12px; border: 2px solid var(--line); padding: 8px; font: inherit; }
.hist { padding-left: 18px; font-size: .9em; }

@media (max-width: 900px) {
  .learn-grid, .gh-detail { grid-template-columns: 1fr; }
  .gh-ladder { grid-template-columns: repeat(4, 1fr); }
  .diag-path { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .gh-ladder { grid-template-columns: repeat(3, 1fr); }
  .dr-rank { flex-direction: column; text-align: center; }
  .guide-panel { flex-direction: column; align-items: stretch; }
  .gd-char { flex-direction: row; gap: 8px; }
  .gd-bubble { border-radius: 18px; }
  .rank-pill strong { display: none; }
  .d-icon { width: 76px; } .d-ico { font-size: 32px; }
  .d-win { left: 22%; width: 74%; }
  .dg-box { width: 100px; height: 100px; right: 6%; }
  .dg-select { grid-template-columns: repeat(3, 66px); } .dg-shape { width: 66px; height: 66px; }
  .dg-cell { width: 38px; height: 38px; }
}
@media (max-width: 620px) {
  .diag-cta { flex-wrap: wrap; }
  .diag-cta .next-info { min-width: 55%; }
  .diag-cta .btn { width: 100%; }
}

/* =========================================================
   V0.6 — pantalla de juego: guardián pedagógico, pausa, pasos
   ========================================================= */
.pt-tier { font-size: .7em; background: rgba(255,255,255,.18); border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
.g-cartoon { align-items: center; }
.guide-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bubble-name { color: var(--primary-2); margin-right: 4px; }
.help-ladder { display: flex; flex-wrap: wrap; gap: 6px; }
.help-ladder.pulse { animation: hop .6s 2; }
.help-ladder.busy { opacity: .6; pointer-events: none; }
.hl-btn { background: #fff; color: var(--ink); border: 2px solid var(--line); min-height: 38px; }
.hl-btn.next { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,209,102,.45); }
.hl-btn.locked { opacity: .45; }
.hl-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8em; }
.play-steps { background: #fffbe6; border-radius: 16px; padding: 10px 14px 10px 36px; margin: 0 0 12px; font-weight: 700; line-height: 1.5; box-shadow: var(--shadow-sm); }
.play-steps li::marker { color: var(--primary); font-weight: 800; }
.play-pause { position: fixed; inset: 0; background: rgba(15,10,40,.75); display: grid; place-items: center; z-index: 60; }
.play-pause .card { text-align: center; max-width: 380px; }
.play.is-paused .play-area { filter: blur(3px); }
.quiz-opt.eliminated { opacity: .35; text-decoration: line-through; }
.mm-card.peek { outline: 4px solid var(--gold); }
.ty-choose { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.92); z-index: 3; font-weight: 800; }
.ty-choose .btn { display: flex; flex-direction: column; min-width: 220px; }
.ty-choose small { font-weight: 600; opacity: .85; }
.ty-relaxed { font-weight: 800; color: #2b9348; }
.wb-goals { margin-top: 6px; color: #fff; }
.wb-goals summary { cursor: pointer; font-weight: 800; }
.wb-goals ul { margin: 6px 0 0 18px; }
.wmap-legend { color: #fff; font-weight: 700; text-align: center; opacity: .9; margin: 8px 0; }
.extras { margin-top: 18px; }
.extra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.extra-card { border: 2px solid var(--line); background: var(--paper-2); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: inherit; color: var(--ink); }
.extra-card.done { border-color: var(--go); }
.ec-icon { font-size: 30px; }
.mc-tier { margin: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tier-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.tp { border: 2px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-weight: 800; cursor: pointer; color: var(--ink); }
.tp.sel { background: var(--primary); color: #fff; border-color: var(--primary); }
.tp-desc { width: 100%; color: var(--ink-soft); }

/* ---------- Escritorio simulado ---------- */
.dk-root { display: flex; flex-direction: column; gap: 8px; }
.dk-task, .ed-task, .br-task, .ck-task, .nw-task { background: #fff3b0; border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); }
.dk-task small, .ed-task small, .br-task small, .ck-task small, .nw-task small { width: 100%; color: var(--ink-soft); font-weight: 800; }
.dk-screen { position: relative; height: clamp(320px, 52vh, 460px); border-radius: 12px 12px 0 0; overflow: hidden; background: linear-gradient(135deg, #3a86ff, #023e8a 70%); }
.dk-desk { position: absolute; left: 6px; top: 6px; bottom: 6px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.dk-icon { width: 84px; padding: 6px 4px; border: 2px solid transparent; border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: .8em; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; touch-action: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dk-icon .dk-ico { font-size: 30px; line-height: 1.1; }
.dk-icon .dk-lbl { word-break: break-word; text-align: center; }
.dk-icon.sel { background: rgba(255,255,255,.28); border-color: #bde0fe; }
.dk-icon:focus-visible { outline: 3px solid var(--gold); }
.dk-icon.dk-over, .dk-grid.dk-over, .dk-desk.dk-over { outline: 3px dashed var(--gold); }
.dk-glow { animation: dkGlow 1.2s infinite; }
@keyframes dkGlow { 50% { box-shadow: 0 0 0 5px var(--gold); } }
.dk-layer { position: absolute; inset: 0; pointer-events: none; }
.dk-win { pointer-events: auto; position: absolute; width: min(78%, 520px); height: 74%; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; border: 2px solid #8da9c4; }
.dk-win.active { border-color: #3a86ff; }
.dk-win.max { left: 0 !important; top: 0 !important; width: 100%; height: 100%; border-radius: 0; }
.dk-title { display: flex; align-items: center; justify-content: space-between; background: #e7eef7; padding: 2px 4px 2px 10px; cursor: move; user-select: none; touch-action: none; font-weight: 800; font-size: .88em; }
.dk-wbtns { display: flex; }
.dk-wbtn { width: 40px; height: 32px; border: 0; background: transparent; font-size: 16px; cursor: pointer; border-radius: 6px; }
.dk-wbtn:hover { background: #cfd8e3; }
.dk-wbtn.close:hover { background: #ef476f; color: #fff; }
.dk-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dk-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); align-items: center; }
.dk-tb { min-height: 32px; padding: 4px 8px; font-size: .78em; }
.dk-search { flex: 1; min-width: 110px; border: 2px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .85em; }
.dk-grid { flex: 1; overflow: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 8px; }
.dk-grid .dk-icon { color: var(--ink); text-shadow: none; }
.dk-grid .dk-icon.sel { background: #d7e7ff; border-color: #3a86ff; }
.dk-path { color: var(--ink-soft); font-size: .8em; }
.dk-status { font-size: .75em; color: var(--ink-soft); padding: 2px 8px; border-top: 1px solid var(--line); }
.dk-emptytxt { color: var(--ink-soft); padding: 10px; }
.dk-viewer, .dk-app { align-items: center; justify-content: center; padding: 14px; text-align: center; }
.dk-bigico { font-size: 54px; }
.dk-notes { width: 100%; height: 100%; border: 0; resize: none; font: inherit; padding: 8px; }
.dk-rename { width: 100%; font: inherit; font-size: 1em; border: 2px solid #3a86ff; border-radius: 4px; padding: 2px; color: var(--ink); }
.dk-taskbar { display: flex; align-items: center; gap: 6px; background: #1b1b3a; padding: 6px; border-radius: 0 0 12px 12px; overflow-x: auto; }
.dk-start { background: #3a86ff; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.dk-tbwins { display: flex; gap: 4px; flex: 1; }
.dk-tbbtn { background: #34345e; color: #fff; border: 0; border-bottom: 3px solid #4cc9f0; border-radius: 6px; padding: 6px 10px; font: inherit; font-size: .8em; cursor: pointer; white-space: nowrap; }
.dk-tbbtn.min { border-bottom-color: #888; opacity: .8; }
.dk-clock { color: #fff; font-weight: 800; font-size: .85em; }
.dk-menu { position: absolute; left: 6px; bottom: 6px; width: 220px; background: #f4f6fb; border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 999; }
.dk-mhead { padding: 4px 8px; }
.dk-mitem { text-align: left; border: 0; background: #fff; border-radius: 8px; padding: 10px; font: inherit; font-weight: 700; cursor: pointer; }
.dk-mitem:hover, .dk-mitem:focus { background: #d7e7ff; }
.dk-ghost { position: fixed; z-index: 9999; pointer-events: none; background: #fff; border-radius: 8px; padding: 6px 10px; box-shadow: var(--shadow); font-weight: 800; }
.dk-mvlist { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

/* ---------- Procesador de texto ---------- */
.ed-game { display: flex; flex-direction: column; gap: 10px; }
.ed-window { border: 2px solid #c9d6ea; border-radius: 12px; overflow: hidden; }
.ed-titlebar { background: #2b579a; color: #fff; font-weight: 800; padding: 6px 12px; font-size: .9em; }
.ed-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #f3f6fb; align-items: center; border-bottom: 1px solid #c9d6ea; }
.ed-btn { min-width: 40px; height: 40px; border: 2px solid transparent; background: #fff; border-radius: 8px; font: inherit; font-size: 17px; cursor: pointer; }
.ed-btn:hover, .ed-btn:focus-visible { border-color: #2b579a; }
.ed-sep { width: 1px; height: 26px; background: #c9d6ea; margin: 0 2px; }
.ed-sw { display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
.ed-saved { color: #2b9348; font-weight: 800; margin-left: auto; }
.ed-desk { background: #e9edf3; padding: 14px; }
.ed-page { background: #fff; max-width: 640px; margin: 0 auto; min-height: 200px; padding: 22px 26px; box-shadow: 0 2px 8px rgba(0,0,0,.12); user-select: none; }
.ed-p { margin: 0 0 12px; line-height: 1.6; font-family: Georgia, 'Times New Roman', serif; }
.ed-p.ed-big { font-size: 1.6em; font-weight: 700; }
.ed-w { cursor: text; border-radius: 3px; }
.ed-w.sel { background: #b3d4ff; }
.ed-w:focus-visible { outline: 2px solid #2b579a; }
.ed-blank { color: #bbb; }
.ed-input { width: 100%; font: inherit; font-size: 1em; border: 2px dashed #2b579a; border-radius: 6px; padding: 6px 8px; }
.ed-feedback { display: block; font-family: var(--font); font-size: .85em; font-weight: 800; min-height: 1.2em; }
.ed-feedback.ok { color: #2b9348; } .ed-feedback.bad { color: #d62246; }

/* ---------- Navegador ---------- */
.br-game { display: flex; flex-direction: column; gap: 10px; }
.br-window { border: 2px solid #c9d6ea; border-radius: 12px; overflow: hidden; background: #fff; }
.br-tabs { display: flex; align-items: flex-end; gap: 4px; background: #dfe6f0; padding: 6px 6px 0; }
.br-tab { background: #fff; border: 0; border-radius: 10px 10px 0 0; padding: 8px 12px; font: inherit; font-weight: 700; font-size: .85em; cursor: pointer; }
.br-newtab { border: 0; background: transparent; font-size: 22px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.br-bar { display: flex; align-items: center; gap: 4px; padding: 6px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.br-nav { border: 0; background: transparent; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.br-nav:hover, .br-newtab:hover { background: #eef2f7; }
.br-address { flex: 1; display: flex; align-items: center; gap: 6px; background: #eef2f7; border-radius: 99px; padding: 6px 12px; cursor: text; min-width: 0; overflow: hidden; }
.br-lock { cursor: pointer; }
.br-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88em; }
.br-proto { color: #6b7280; }
.br-page { min-height: 120px; padding: 14px; }
.br-ok { outline: 4px solid var(--go) !important; }
.br-no { outline: 4px solid var(--danger) !important; }
.br-home, .br-search { text-align: center; }
.br-logo { font-family: var(--font-title); font-size: 1.5em; font-weight: 800; color: #3a86ff; margin-bottom: 8px; }
.br-fakebox { border: 2px solid var(--line); border-radius: 99px; padding: 10px; color: #999; max-width: 420px; margin: 0 auto; }
.br-qrow { display: flex; gap: 6px; max-width: 560px; margin: 0 auto 10px; }
.br-query { flex: 1; border: 2px solid #3a86ff; border-radius: 99px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px; text-align: left; min-height: 44px; align-items: center; }
.br-qw { background: #d7e7ff; border-radius: 99px; padding: 2px 10px; font-weight: 800; }
.br-ph { color: #999; }
.br-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.br-chip { border: 2px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.br-chip.on { background: #3a86ff; color: #fff; border-color: #3a86ff; }
.br-results { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.br-res { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; text-align: left; font: inherit; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.br-res strong { color: #1a0dab; }
.br-resurl { color: #2b9348; word-break: break-all; }
.br-res.ad { background: #fffbea; }
.br-adtag { align-self: flex-start; background: #ffd166; border-radius: 6px; padding: 0 6px; font-size: .75em; font-weight: 800; }
.br-urlparts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-family: monospace; font-size: clamp(14px, 2.6vw, 20px); }
.br-seg { border: 2px dashed var(--line); background: #fff; padding: 8px 6px; border-radius: 8px; font: inherit; cursor: pointer; word-break: break-all; }
.br-legend { display: flex; gap: 12px; justify-content: center; color: var(--ink-soft); font-weight: 700; margin-top: 6px; font-size: .85em; }
.br-site h3 { margin: 0 0 6px; }
.br-lorem { color: #bbb; letter-spacing: 2px; }
.br-note { color: var(--ink-soft); }

/* ---------- Contraseñas ---------- */
.pw-game { display: flex; flex-direction: column; gap: 10px; max-width: 620px; margin: 0 auto; }
.pw-warn { background: #fff3b0; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.pw-input { width: 100%; font: inherit; font-size: 1.2em; padding: 12px; border: 3px solid var(--line); border-radius: 12px; font-family: monospace; }
.pw-meter-row { display: flex; align-items: center; gap: 10px; }
.pw-meter { flex: 1; height: 16px; background: #eee; border-radius: 99px; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .3s; }
.pw-meter.mid span { background: var(--warn); } .pw-meter.strong span { background: var(--go); }
.pw-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-weight: 700; }
.pw-checks li.ok { color: #2b9348; }
.pw-cards { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pw-card { border: 3px solid var(--line); background: #fff; border-radius: 16px; padding: 16px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.pw-card code { font-size: 1.2em; word-break: break-all; }
.pw-card.ok { border-color: var(--go); background: #d7fbec; } .pw-card.bad { border-color: var(--danger); }
.pw-vs { font-weight: 800; }
.pw-q { text-align: center; }
.pw-login { display: flex; flex-direction: column; gap: 8px; background: var(--paper-2); border-radius: 14px; padding: 14px; }
.pw-phone { align-self: center; background: #1b1b3a; color: #fff; border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; text-align: center; }
.pw-code { letter-spacing: 6px; text-align: center; }

/* ---------- Colores ---------- */
.cl-game { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cl-compare { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cl-compare figure { margin: 0; text-align: center; font-weight: 800; }
.cl-swatch { width: 120px; height: 120px; border-radius: 24px; border: 4px solid #1b1b3a; background: #000; }
.cl-lights { display: flex; gap: 6px; background: #111; padding: 10px; border-radius: 16px; }
.cl-light { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.cl-sliders { display: flex; flex-direction: column; gap: 8px; width: min(100%, 460px); }
.cl-row { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.cl-k { width: 90px; }
.cl-range { flex: 1; accent-color: var(--c); height: 32px; }
.cl-rgb { font-weight: 800; }

/* ---------- Circuitos ---------- */
.ck-game { display: flex; flex-direction: column; gap: 10px; }
.ck-board { position: relative; height: 230px; max-width: 560px; width: 100%; margin: 0 auto; background: #f4f1ff; border-radius: 16px; }
.ck-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck-wire { fill: none; stroke: #6c757d; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.ck-wire.thin { stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; }
.ck-board.on .ck-wire { stroke: #ffb703; filter: drop-shadow(0 0 3px #ffd166); }
.ck-gapcut { fill: #f4f1ff; }
.ck-slot, .ck-fixed, .ck-gap { position: absolute; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 14px; border: 3px dashed #9b8cff; background: #fff; display: grid; place-items: center; font-size: 26px; cursor: pointer; }
.ck-slot.filled { border-style: solid; border-color: #1b1b3a; }
.ck-fixed { border-style: solid; border-color: #1b1b3a; cursor: default; }
.ck-gap { border-color: #ef476f; }
.ck-empty { color: #9b8cff; font-weight: 800; }
.ck-board.on .ck-fixed.bulb, .ck-board.on .ck-slot.filled { box-shadow: 0 0 22px #ffd166; }
.ck-palette { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ck-part { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 10px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.ck-part.sel { border-color: var(--primary); background: #ece7ff; }
.ck-part:disabled { opacity: .35; }
.ck-pi { font-size: 26px; }
.ck-items { display: flex; flex-direction: column; gap: 6px; }
.ck-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--paper-2); border-radius: 12px; padding: 6px 10px; }
.ck-item.done { background: #d7fbec; }
.ck-item strong { flex: 1; min-width: 120px; }
.ck-ii { font-size: 24px; }
.ck-sensors { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ck-sensor { border: 3px solid var(--line); background: #fff; border-radius: 16px; padding: 14px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 140px; }
.ck-sensor.ok { border-color: var(--go); background: #d7fbec; } .ck-sensor.bad { border-color: var(--danger); }
.ck-si { font-size: 34px; }

/* ---------- Redes ---------- */
.nw-game { display: flex; flex-direction: column; gap: 10px; }
.nw-board { position: relative; height: 280px; background: radial-gradient(circle at 50% 50%, #241c4d, #120d2e); border-radius: 18px; }
.nw-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.nw-links line { stroke: #6c6c9c; stroke-width: 3; vector-effect: non-scaling-stroke; }
.nw-links line.on { stroke: #4cc9f0; stroke-width: 5; }
.nw-links line.broken { stroke: #ef476f; stroke-dasharray: 6 5; }
.nw-x { fill: #ef476f; font-size: 7px; text-anchor: middle; dominant-baseline: middle; font-weight: 800; }
.nw-node { position: absolute; transform: translate(-50%, -50%); border: 3px solid #9b8cff; background: #fff; border-radius: 12px; padding: 6px 8px; font: inherit; font-size: .78em; font-weight: 800; cursor: pointer; max-width: 120px; z-index: 1; }
.nw-node.router { border-radius: 50%; min-width: 64px; min-height: 64px; }
.nw-node.from { border-color: #06d6a0; } .nw-node.to { border-color: #ffd166; box-shadow: 0 0 0 4px rgba(255,209,102,.4); }
.nw-node.inpath { background: #d7f4ff; }
.nw-node.next { animation: dkGlow 1.3s infinite; }
.nw-node.ping { background: #ffd166; }
.nw-packet { position: absolute; transform: translate(-50%, -150%); font-size: 26px; transition: left .35s, top .35s; pointer-events: none; z-index: 2; }
.nw-route { color: var(--ink-soft); font-weight: 700; margin: 0; }

/* ---------- Depurar ---------- */
.cd-block.bug { background: #ffd6de !important; border-color: var(--danger) !important; }
.cd-block.picking { outline: 3px solid var(--gold); }
.bf-n { position: absolute; top: 0; left: 4px; font-size: .55em; color: var(--ink-soft); }
.cd-block { position: relative; }
.bf-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; background: #fff3b0; border-radius: 12px; padding: 8px; font-weight: 800; }

/* ---------- Píxel con color ---------- */
.px-palette { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.px-swatch { border: 3px solid var(--line); background: #fff; border-radius: 12px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-weight: 800; }
.px-swatch.sel { border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold); }
.px-sw-col { width: 22px; height: 22px; border-radius: 6px; background: var(--sw); border: 1px solid #999; }
.px-color .px-cell.on { background: inherit; }

/* Accesibilidad V0.6 */
html.no-flash .confetti-canvas, html.no-flash #fx { display: none !important; }
html.no-flash .flash-bad, html.no-flash .rpg-objectives.flash { animation: none !important; }
html.no-flash .dk-glow, html.no-flash .nw-node.next { animation: none !important; box-shadow: 0 0 0 4px var(--gold); }
html.text-xl { --fs: 23px; }

/* ---------- V0.6: guardianes Cartoon 2D ---------- */
.g-cartoon-view { display: block; flex: 0 0 auto; }
.g-cartoon-view svg { width: 100%; height: 100%; display: block; overflow: visible; }
.g-cartoon-view.sil svg { filter: drop-shadow(0 0 6px rgba(155,93,229,.6)); }
.g-portrait { width: 64px; height: 75px; }
.g-portrait svg { width: 100%; height: 100%; }
.rd-portrait .g-portrait { width: 64px; height: 64px; }
.rank-pill .g-cartoon-view { background: #e9f5ff; border-radius: 8px; }
.guide-chip .g-cartoon-view { filter: drop-shadow(0 4px 0 rgba(0,0,0,.15)); }
html:not(.no-motion) .g-cartoon-view[data-anim="idle"] svg { animation: gBreath 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes gBreath { 50% { transform: scaleY(1.015) translateY(-1px); } }

/* ---------- V0.6: Décimo Portal, ceremonia y Academia ---------- */
.menu-tile.portal { background: linear-gradient(135deg, #3a0ca3, #7209b7); color: #fff; }
.menu-tile.portal.lit { box-shadow: 0 0 0 4px #ffd166, var(--shadow); }
.portal-screen .pt-card { text-align: center; max-width: 720px; margin: 0 auto; }
.pt-vortex { position: relative; width: 180px; height: 180px; margin: 0 auto 10px; display: grid; place-items: center; }
.pt-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #7209b7, #4cc9f0, #06d6a0, #ffd166, #f15bb5, #7209b7); mask: radial-gradient(circle, transparent 48%, #000 50%, #000 62%, transparent 64%); -webkit-mask: radial-gradient(circle, transparent 48%, #000 50%, #000 62%, transparent 64%); opacity: .35; }
.pt-ring.r2 { inset: 22px; animation-direction: reverse !important; }
.pt-ring.r3 { inset: 44px; }
.pt-vortex.ready .pt-ring, .pt-vortex.open .pt-ring, .cine-portal .pt-ring { opacity: 1; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pt-core { font-size: 48px; position: relative; z-index: 1; }
.pt-cond { display: grid; grid-template-columns: 36px 1fr 52px; align-items: center; gap: 10px; text-align: left; background: var(--paper-2); border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.pt-cond.ok { background: #d7fbec; }
.pt-ci { font-size: 24px; } .pt-num { font-weight: 800; text-align: right; }
.pt-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.pt-ch { border-radius: 16px; padding: 12px; background: var(--paper-2); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pt-ch span { font-size: 30px; } .pt-ch.activo { background: #d7fbec; } .pt-ch em { font-size: .85em; color: var(--ink-soft); }
.cine { position: fixed; inset: 0; z-index: 70; background: radial-gradient(circle at 50% 45%, #2d1b69, #0b0720 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
.cine-stage { position: relative; width: min(92vw, 820px); min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.cine-caption { max-width: 720px; text-align: center; font-size: clamp(17px, 2.4vw, 23px); font-weight: 800; min-height: 3em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.cine-skip { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.15); color: #fff; }
.cine-frags { position: relative; width: 280px; height: 280px; }
.cine-frag { position: absolute; left: 50%; top: 50%; font-size: 34px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-120px) rotate(calc(-1 * var(--a))); }
.cine-frags.gather .cine-frag { animation: fragIn 3s ease-in forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes fragIn { 70% { transform: translate(-50%, -50%) rotate(calc(var(--a) + 180deg)) translateY(-60px) rotate(calc(-1 * var(--a) - 180deg)); } 100% { transform: translate(-50%, -50%) scale(.4); opacity: .2; } }
.cine-core { font-size: 72px; filter: drop-shadow(0 0 22px #f15bb5); animation: pulse 1.4s ease-in-out infinite; }
.cine-core.big { font-size: 110px; }
.cine-guards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cine-g { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s; }
.cine-g.in, .cine-guards.in .cine-g { opacity: 1; transform: none; }
.cine-g small { font-weight: 800; }
.cine-guards.small .cine-g .g-cartoon-view { width: 60px !important; height: 77px !important; }
.cine-portal { position: relative; width: 260px; height: 260px; }
.cine-portal::after { content: ''; position: absolute; inset: 88px; border-radius: 50%; background: radial-gradient(circle, #fff, #b8f2ff 40%, transparent 70%); animation: pulse 1.6s ease-in-out infinite; }
.cine-portal.open { width: 300px; height: 300px; }
.cine-question { font-family: var(--font-title); font-size: clamp(28px, 5vw, 52px); text-align: center; margin: 0; text-shadow: 0 0 18px #4cc9f0; }
.cine.calm * { animation: none !important; transition: none !important; }
.academia .ac-hero { text-align: center; }
.ac-guide { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ac-guide .bubble { max-width: 420px; text-align: left; }
.ac-kicker { display: block; font-weight: 800; color: var(--primary); margin-top: 8px; }
.ac-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ac-area { position: relative; text-align: center; overflow: hidden; }
.ac-icon { font-size: 48px; }
.ac-note { text-align: center; }
.vol-range { width: 160px; accent-color: var(--primary); }
html.no-flash .pt-ring, html.no-flash .cine-core, html.no-flash .cine-portal::after { animation: none !important; }
.guide-bubble .bubble-text { flex: 1; text-align: left; }
.guide-bubble .bubble-name { flex: 0 0 auto; }
@media (max-width: 640px) {
  .g-cartoon .guide-chip .g-cartoon-view { width: 52px !important; height: 67px !important; }
  .guide-main { gap: 6px; }
  .help-ladder { flex-wrap: nowrap; }
  .hl-btn { padding: 4px 8px; min-height: 36px; flex: 1; justify-content: center; }
  .hl-btn .hl-t { display: none; }
  .guide-bubble { font-size: .92em; padding: 8px 10px; min-height: 0; }
  .play-steps { font-size: .9em; padding: 8px 10px 8px 28px; }
}
@media (max-width: 640px) {
  .dk-icon { width: 66px; padding: 3px 2px; font-size: .72em; }
  .dk-icon .dk-ico { font-size: 22px; }
  .dk-screen { height: clamp(340px, 58vh, 480px); }
  .dk-win { width: 92%; left: 4% !important; }
}