/* =====================================================================
   VERBÓPOLIS — Estilos
   ===================================================================== */
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --bg0: #140f33; --bg1: #251a54; --bg2: #35287a;
  --ink: #ffffff; --ink2: rgba(255,255,255,.78); --ink3: rgba(255,255,255,.55);
  --glass: rgba(255,255,255,.08); --glass2: rgba(255,255,255,.14); --line: rgba(255,255,255,.16);
  --pri: #7b61ff; --pri2: #a78bfa; --acc: #ffd166; --ok: #2ec4b6; --okbg: rgba(46,196,182,.18); --bad: #ef476f; --badbg: rgba(239,71,111,.18);
  --health: #2ec4b6; --peace: #9b5de5; --eco: #57cc99; --global: #f9a03f;
  --r: 18px; --shadow: 0 12px 34px rgba(0,0,0,.28);
  --font: 'Fredoka', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --body: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { background: var(--bg0); }
body { font-family: var(--body); color: var(--ink); background: radial-gradient(1200px 700px at 20% -10%, #4b2fb0 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, #0f6e84 0%, transparent 55%), var(--bg0); background-attachment: fixed; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, .btn, .tabs, .logo, .kv, .game-title, .opt, .tok, .key { font-family: var(--font); }
h2 { font-size: 1.5rem; margin-bottom: .5rem; } h3 { font-size: 1.25rem; margin-bottom: .5rem; } h4 { font-size: 1.02rem; margin-bottom: .6rem; }
p { line-height: 1.5; } code { font-family: ui-monospace, Consolas, monospace; background: rgba(123,97,255,.18); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
small { opacity: .85; } a { color: var(--acc); }
.hidden { display: none !important; }
.center { text-align: center; } .empty { text-align: center; color: var(--ink3); padding: 18px; }
.hint { color: var(--ink3); font-size: .88rem; margin: .4rem 0; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; } .row.end { justify-content: flex-end; } .row.center { justify-content: center; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn { border: 0; cursor: pointer; border-radius: 14px; padding: 11px 18px; font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--glass2); transition: transform .12s, box-shadow .12s, background .2s, opacity .2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.1; }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(135deg, var(--pri), #5b3df5); box-shadow: 0 5px 0 #3b23b8, 0 10px 24px rgba(123,97,255,.35); }
.btn.primary:active { box-shadow: 0 2px 0 #3b23b8; }
.btn.ghost { background: transparent; border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--glass); }
.btn.danger { background: linear-gradient(135deg, #ef476f, #c9184a); }
.btn.link { background: none; color: var(--acc); text-decoration: underline; padding: 6px; }
.btn.big { padding: 14px 22px; font-size: 1.12rem; width: 100%; }
.btn.sm { padding: 7px 12px; font-size: .88rem; border-radius: 11px; }
.btn.icon { padding: 6px 9px; border-radius: 50%; min-width: 36px; height: 36px; background: var(--glass2); }
.btn.icon.sm { min-width: 30px; height: 30px; padding: 3px; font-size: .85rem; }
.btn.huge { font-size: 2.6rem; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #ffd166, #f9a03f); box-shadow: 0 6px 0 #c26f12, 0 12px 30px rgba(249,160,63,.4); }
.btn.speak.pulse, .speak.pulse { animation: pulse .6s; }

/* ---------- Formularios ---------- */
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; color: var(--ink2); font-weight: 600; }
.form input, .form select, .filters input, .filters select { font: inherit; font-weight: 400; color: var(--ink); background: rgba(255,255,255,.1); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; outline: none; transition: border-color .2s, background .2s; min-width: 0; }
.form select option, .filters select option { color: #111; }
.form input:focus, .form select:focus { border-color: var(--pri2); background: rgba(255,255,255,.14); }
.form input.invalid, .form select.invalid { border-color: var(--bad); background: var(--badbg); }
.form .check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; }
.form .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pri); flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; }
fieldset { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; }
legend { padding: 0 8px; font-family: var(--font); font-weight: 600; color: var(--acc); }
fieldset.consent { display: flex; flex-direction: column; gap: 10px; background: rgba(255,209,102,.06); }
.code-in { text-transform: uppercase; letter-spacing: 2px; font-family: ui-monospace, Consolas, monospace !important; }

/* ---------- Tarjetas y estructura ---------- */
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.card.narrow { max-width: 440px; width: 100%; }
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bg-city { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' viewBox='0 0 600 220'%3E%3Cg fill='%23ffffff' fill-opacity='.05'%3E%3Crect x='10' y='90' width='50' height='130'/%3E%3Crect x='70' y='50' width='40' height='170'/%3E%3Crect x='120' y='110' width='60' height='110'/%3E%3Crect x='190' y='30' width='45' height='190'/%3E%3Crect x='245' y='80' width='70' height='140'/%3E%3Crect x='325' y='120' width='40' height='100'/%3E%3Crect x='375' y='60' width='55' height='160'/%3E%3Crect x='440' y='100' width='45' height='120'/%3E%3Crect x='495' y='40' width='60' height='180'/%3E%3C/g%3E%3C/svg%3E") bottom center / 900px auto repeat-x; }
.boot-logo { font-family: var(--font); font-size: 2.4rem; animation: pulse 1.4s infinite; }

.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.logo .lg-b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--acc), #f9a03f); font-size: 1.3rem; box-shadow: 0 4px 0 #c26f12; }
.logo .lg-t { font-size: 1.4rem; letter-spacing: .5px; }
.logo .lg-t span { color: var(--acc); }
.logo.big { flex-direction: column; gap: 10px; margin-bottom: 8px; }
.logo.big .lg-b { width: 76px; height: 76px; font-size: 2.4rem; border-radius: 22px; animation: floatY 3s ease-in-out infinite; }
.logo.big .lg-t { font-size: 2.7rem; background: linear-gradient(90deg, #fff, #ffd166 45%, #a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Login ---------- */
.login-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; max-width: 920px; width: 100%; }
.login-hero { text-align: center; }
.tagline { font-size: 1.15rem; color: var(--ink2); margin: 6px auto 14px; max-width: 360px; }
.hero-icons { display: flex; gap: 14px; justify-content: center; font-size: 2rem; }
.hero-icons span { animation: floatY 3s ease-in-out infinite; } .hero-icons span:nth-child(2) { animation-delay: .4s; } .hero-icons span:nth-child(3) { animation-delay: .8s; } .hero-icons span:nth-child(4) { animation-delay: 1.2s; }
.mode-tag { display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 20px; background: var(--glass2); font-size: .8rem; }
.tabs { display: flex; background: rgba(0,0,0,.2); border-radius: 14px; padding: 4px; gap: 4px; }
.tabs button { flex: 1; border: 0; background: transparent; color: var(--ink2); padding: 10px; border-radius: 11px; cursor: pointer; font-size: .98rem; font-weight: 600; }
.tabs button.on { background: var(--pri); color: #fff; box-shadow: 0 3px 10px rgba(123,97,255,.4); }

/* ---------- Toasts / modales ---------- */
#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 520px); }
.toast { background: #1f1747; border: 1px solid var(--line); padding: 11px 18px; border-radius: 14px; box-shadow: var(--shadow); animation: dropIn .3s; font-weight: 600; text-align: center; }
.toast-ok { background: #0f5e57; } .toast-error { background: #8a1c3a; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .35s; }
.modal-wrap { position: fixed; inset: 0; background: rgba(8,5,25,.65); backdrop-filter: blur(5px); z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 14px; overflow-y: auto; animation: fadeIn .2s; }
.modal { position: relative; background: linear-gradient(160deg, #2b1f63, #1b1442); border: 1px solid var(--line); border-radius: 22px; padding: 24px; width: 100%; max-width: 480px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: popIn .25s; }
.modal.wide { max-width: 860px; }
.modal-x { position: absolute; top: 10px; right: 12px; border: 0; background: var(--glass2); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.cred { display: grid; gap: 10px; margin: 12px 0; padding: 16px; border: 2px dashed var(--acc); border-radius: 16px; background: rgba(255,209,102,.07); }
.cred small { display: block; color: var(--ink3); } .cred b { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; letter-spacing: 2px; color: var(--acc); }
.alert { background: var(--badbg); border: 1px solid rgba(239,71,111,.4); padding: 10px 12px; border-radius: 12px; margin: 10px 0; }
details { margin: 12px 0; } summary { cursor: pointer; font-family: var(--font); font-weight: 600; color: var(--acc); }
.kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.kv-grid small { display: block; color: var(--ink3); font-size: .78rem; }
.sd-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; } .sd-head canvas { background: var(--glass); border-radius: 16px; flex: none; }

/* ---------- Panel staff ---------- */
.staff { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: rgba(20,15,51,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topnav { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.topnav button { border: 0; background: transparent; color: var(--ink2); padding: 9px 14px; border-radius: 12px; cursor: pointer; font-family: var(--font); font-size: .98rem; font-weight: 600; }
.topnav button.on { background: var(--glass2); color: #fff; box-shadow: inset 0 -3px 0 var(--acc); }
.topbar .who { display: flex; align-items: center; gap: 10px; text-align: right; } .topbar .who small { display: block; color: var(--ink3); font-size: .78rem; }
.topbar .who span { font-weight: 600; white-space: nowrap; }
.staff-main { padding: 22px; max-width: 1240px; margin: 0 auto; }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pane-head small { color: var(--ink3); font-size: .9rem; font-weight: 400; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px; }
.filters input { flex: 1; min-width: 220px; }
.loading { text-align: center; padding: 40px; color: var(--ink3); }
.tbl-wrap { overflow-x: auto; padding: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; padding: 12px; font-family: var(--font); font-weight: 600; color: var(--ink2); background: rgba(255,255,255,.06); position: sticky; top: 0; white-space: nowrap; }
.tbl td { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
.tbl tr:hover td { background: rgba(255,255,255,.04); }
.tbl tr.inactive td { opacity: .5; }
.tbl .actions { text-align: right; white-space: nowrap; } .tbl .actions .btn { margin-left: 4px; }
.badge { padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700; } .badge.on { background: var(--okbg); color: #7ef0e5; } .badge.off { background: var(--badbg); color: #ff9fb6; }
.band { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .8rem; font-weight: 700; background: color-mix(in srgb, var(--bc) 25%, transparent); border: 1px solid var(--bc); white-space: nowrap; }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 12px 0; }
.action-card { display: flex; flex-direction: column; gap: 10px; } .action-card p { color: var(--ink2); font-size: .92rem; flex: 1; } .ac-ic { font-size: 2.2rem; }
.file-btn { cursor: pointer; }

/* ---------- Tablero ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi .kv { font-size: 2.1rem; font-weight: 700; } .kpi .kl { color: var(--ink3); font-size: .88rem; }
.kpi.warn .kv { color: #ff9fb6; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash .card h4 small { color: var(--ink3); font-weight: 400; }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hb { display: grid; grid-template-columns: 112px 1fr 64px; align-items: center; gap: 10px; font-size: .9rem; }
.hb-l { color: var(--ink2); } .hb-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-t { position: relative; height: 14px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: visible; }
.hb-t i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--pri2); transition: width .8s cubic-bezier(.2,.8,.2,1); min-width: 0; }
.hb-t i.low { background: #ff8fa3; }
.hb-t .mark60 { position: absolute; left: 60%; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,.55); }
.vbars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 140px; align-items: end; }
.vb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.vb i { display: block; width: 100%; background: var(--pri2); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .8s; }
.vb small { font-size: .68rem; color: var(--ink3); }
.vb:hover i, .hb:hover i { filter: brightness(1.2); }

/* ---------- Jugar: HUD y dock ---------- */
.play { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.hud { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: rgba(20,15,51,.9); border-bottom: 1px solid var(--line); z-index: 20; }
.hud-me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.hud-me canvas { background: var(--glass2); border-radius: 12px; flex: none; }
.hud-me b { display: block; font-family: var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud-me small { color: var(--ink3); font-size: .78rem; }
.hud-stats { display: flex; gap: 14px; align-items: center; font-family: var(--font); font-size: 1.1rem; }
.lives i { font-style: normal; transition: .3s; display: inline-block; } .lives i.lost { filter: grayscale(1); opacity: .3; transform: scale(.8); }
.pts b { color: var(--acc); } .pts.bump { animation: bump .4s; }
.streak { opacity: .55; transition: .3s; } .streak.hot { opacity: 1; animation: pulse 1s infinite; }
.play-main { flex: 1; overflow-y: auto; position: relative; padding: 16px; }
.play-main.world { padding: 0; overflow: hidden; }
.dock { display: flex; justify-content: space-around; background: rgba(20,15,51,.95); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); z-index: 20; }
.dock button { border: 0; background: transparent; color: var(--ink3); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 12px; cursor: pointer; font-family: var(--font); min-width: 58px; }
.dock button span { font-size: 1.45rem; transition: transform .2s; } .dock button small { font-size: .72rem; }
.dock button.on { color: #fff; background: var(--glass2); } .dock button.on span { transform: translateY(-2px) scale(1.12); }

/* ---------- Mundo ---------- */
#w-cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.w-top { position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; align-items: center; z-index: 5; }
.w-zone { background: rgba(20,15,51,.85); padding: 7px 14px; border-radius: 20px; font-family: var(--font); font-weight: 600; font-size: .95rem; box-shadow: var(--shadow); }
.seg { display: inline-flex; background: rgba(20,15,51,.85); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--ink2); padding: 6px 11px; border-radius: 9px; cursor: pointer; font-family: var(--font); font-weight: 600; }
.seg button.on { background: var(--pri); color: #fff; }
.w-prompt { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: #fff; color: #1b1b3a; padding: 10px 18px; border-radius: 30px; font-family: var(--font); font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: .25s; z-index: 6; cursor: pointer; white-space: nowrap; }
.w-prompt.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; animation: bob 1.4s ease-in-out infinite; }
.w-joy { position: absolute; left: 18px; bottom: 18px; width: 120px; height: 120px; border-radius: 50%; background: rgba(20,15,51,.35); border: 2px solid rgba(255,255,255,.35); z-index: 5; touch-action: none; display: none; }
.w-joy .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.w-act { position: absolute; right: 20px; bottom: 26px; width: 74px; height: 74px; border-radius: 50%; border: 0; font-size: 2rem; background: linear-gradient(135deg, var(--acc), #f9a03f); box-shadow: 0 5px 0 #c26f12; z-index: 5; display: none; cursor: pointer; }
.w-help { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(20,15,51,.7); padding: 5px 12px; border-radius: 14px; font-size: .78rem; color: var(--ink2); z-index: 4; pointer-events: none; animation: fadeOut 1s 9s forwards; }
@media (pointer: coarse) { .w-joy, .w-act { display: block; } .w-help { display: none; } .w-prompt { bottom: 150px; } }
.w-dialog { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(720px, calc(100% - 20px)); z-index: 10; display: none; }
.w-dialog.show { display: block; }
.dlg-inner { display: flex; gap: 14px; background: linear-gradient(160deg, #2b1f63f2, #1b1442f2); border: 2px solid var(--pri2); border-radius: 22px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.dlg-inner canvas { flex: none; background: var(--glass2); border-radius: 16px; }
.dlg-main { flex: 1; min-width: 0; }
.dlg-name { font-family: var(--font); font-weight: 700; color: var(--acc); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlg-line { font-size: 1.15rem; margin: 6px 0; font-family: var(--font); }
.dlg-es { color: var(--ink3); font-style: italic; font-size: .9rem; }
.dlg-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; background: var(--glass2); font-size: .74rem; font-weight: 600; font-family: var(--body); color: var(--ink2); }
.tag.ok { background: var(--okbg); color: #7ef0e5; }

/* ---------- Menú de juegos ---------- */
.games-menu { max-width: 1000px; margin: 0 auto; }
.gm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gm-head .seg { background: var(--glass); }
.game-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.game-card { border: 1px solid var(--line); background: var(--glass); color: var(--ink); border-radius: 20px; padding: 18px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: transform .2s, background .2s, box-shadow .2s; animation: popIn .4s both; }
.game-card:hover { transform: translateY(-5px) rotate(-1deg); background: var(--glass2); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.game-card .gc-ic { font-size: 2.6rem; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.game-card b { font-family: var(--font); font-size: 1.15rem; } .game-card small { color: var(--ink3); font-size: .84rem; flex: 1; }
.game-card.comic { background: linear-gradient(135deg, rgba(239,71,111,.25), rgba(123,97,255,.25)); }

/* ---------- Escenario de juego ---------- */
.stage { max-width: 860px; margin: 0 auto; }
.game-head { display: grid; grid-template-columns: auto 1fr 140px; align-items: center; gap: 12px; margin-bottom: 14px; }
.game-title { font-size: 1.3rem; font-weight: 600; text-align: center; } .game-title .gi { font-size: 1.5rem; }
.round-prog { height: 10px; background: var(--glass2); border-radius: 10px; overflow: hidden; }
.rp-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), #f9a03f); border-radius: 10px; transition: width .4s; }
.game-body { background: var(--glass); border: 1px solid var(--line); border-radius: 24px; padding: 20px; position: relative; }
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: 14px; text-align: center; font-size: 1.05rem; animation: popIn .25s; }
.feedback.ok { background: var(--okbg); border: 1px solid var(--ok); } .feedback.bad { background: var(--badbg); border: 1px solid var(--bad); }
.opt-grid { display: grid; gap: 10px; margin-top: 14px; } .opt-grid.four { grid-template-columns: repeat(4, 1fr); } .opt-grid.three { grid-template-columns: repeat(3, 1fr); } .opt-grid.one { grid-template-columns: 1fr; }
.opt { border: 2px solid var(--line); background: rgba(255,255,255,.08); color: var(--ink); border-radius: 16px; padding: 14px; font-size: 1.08rem; font-weight: 500; cursor: pointer; transition: .15s; text-align: center; }
.opt:hover:not(:disabled) { background: rgba(255,255,255,.16); transform: translateY(-2px); border-color: var(--pri2); }
.opt.pic-opt { font-size: 3rem; padding: 18px 8px; }
.opt.right { background: var(--okbg); border-color: var(--ok); animation: bump .35s; } .opt.wrong { background: var(--badbg); border-color: var(--bad); animation: shake .4s; }
.opt:disabled { cursor: default; }
.timer { height: 8px; background: var(--glass2); border-radius: 8px; margin-top: 16px; overflow: hidden; }
.timer div { height: 100%; width: 100%; background: linear-gradient(90deg, var(--bad), var(--acc)); }
.listen-q { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Conecta */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.chip { border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; background: rgba(255,255,255,.08); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; transition: .15s; font-family: var(--font); font-size: 1.15rem; }
.chip.pic { justify-content: center; font-size: 2.3rem; flex-direction: column; gap: 0; } .chip.pic small { font-size: .8rem; font-family: var(--body); }
.chip:hover { border-color: var(--pri2); } .chip.sel { border-color: var(--acc); background: rgba(255,209,102,.15); transform: scale(1.03); }
.chip.done-ok { border-color: var(--ok); background: var(--okbg); pointer-events: none; } .chip.done-bad { border-color: var(--bad); background: var(--badbg); pointer-events: none; }
.chip.shake { animation: shake .4s; }

/* Ahorcado */
.hm-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; }
.hm-left { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hm-svg { width: 150px; } .hm-svg line, .hm-svg circle { stroke: #fff; stroke-width: 4; fill: none; stroke-linecap: round; }
.hm-svg .hp { opacity: 0; transition: opacity .3s; stroke: #ff8fa3; } .hm-svg .hp.on { opacity: 1; }
.hm-clue { font-size: 3.4rem; animation: floatY 3s ease-in-out infinite; }
.blanks { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.blanks span { width: 36px; height: 46px; border-bottom: 3px solid rgba(255,255,255,.6); display: grid; place-items: center; font-family: var(--font); font-size: 1.7rem; color: var(--acc); }
.keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.key { border: 1px solid var(--line); background: rgba(255,255,255,.1); color: #fff; border-radius: 10px; height: 42px; cursor: pointer; font-size: 1.05rem; font-weight: 600; transition: .12s; }
.key:hover:not(:disabled) { background: rgba(255,255,255,.22); } .key:disabled { cursor: default; opacity: .5; }
.key.hit { background: var(--ok); opacity: 1; } .key.miss { background: var(--bad); opacity: .6; }

/* Sopa de letras */
.ws-wrap { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.ws-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; background: rgba(0,0,0,.2); padding: 8px; border-radius: 16px; user-select: none; touch-action: none; width: min(460px, 86vw); }
.ws-c { aspect-ratio: 1; display: grid; place-items: center; background: rgba(255,255,255,.08); border-radius: 7px; font-family: var(--font); font-weight: 600; font-size: clamp(.8rem, 2.8vw, 1.1rem); cursor: pointer; transition: background .1s; }
.ws-c.sel { background: rgba(255,209,102,.55); color: #1b1b3a; } .ws-c.found { background: var(--ok); color: #fff; } .ws-c.reveal { background: rgba(239,71,111,.5); }
.ws-clues { display: flex; flex-direction: column; gap: 8px; }
.ws-clue { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); }
.ws-clue .em { font-size: 1.7rem; } .ws-clue .len { flex: 1; color: var(--ink2); font-size: .9rem; }
.ws-clue.ok { border-color: var(--ok); background: var(--okbg); } .ws-clue.bad { border-color: var(--bad); background: var(--badbg); }

/* Dictado */
.spell-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.spell-clue { font-size: 3.6rem; animation: floatY 3s ease-in-out infinite; }
.spell-len { display: flex; gap: 5px; } .spell-len i { width: 14px; height: 4px; border-radius: 2px; background: var(--ink3); }
.spell-in { font-family: var(--font); font-size: 1.6rem; text-align: center; letter-spacing: 3px; padding: 12px 16px; border-radius: 16px; border: 2.5px solid var(--line); background: rgba(255,255,255,.1); color: #fff; width: min(380px, 100%); outline: none; }
.spell-in:focus { border-color: var(--acc); } .spell-in.ok { border-color: var(--ok); background: var(--okbg); } .spell-in.bad { border-color: var(--bad); background: var(--badbg); animation: shake .4s; }

/* Arma la frase */
.bd-answer, .bd-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 62px; padding: 12px; border-radius: 16px; }
.bd-answer { background: rgba(0,0,0,.2); border: 2px dashed var(--line); margin: 10px 0; }
.bd-answer .ph { color: var(--ink3); align-self: center; }
.tok { border: 0; background: linear-gradient(135deg, var(--pri), #5b3df5); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 1.08rem; cursor: pointer; box-shadow: 0 4px 0 #3b23b8; transition: .12s; animation: popIn .2s; }
.tok:hover:not(:disabled) { transform: translateY(-2px); } .tok.placed { background: linear-gradient(135deg, #ffd166, #f9a03f); color: #1b1b3a; box-shadow: 0 4px 0 #c26f12; }

/* Rayo */
.speed-sent { font-family: var(--font); font-size: 1.6rem; text-align: center; line-height: 1.6; padding: 10px; }
.gap { display: inline-block; min-width: 80px; border-bottom: 3px solid var(--acc); color: var(--acc); }

/* Fin de ronda */
.round-end, .gameover { text-align: center; padding: 26px 10px; }
.re-emoji, .go-emoji { font-size: 4.4rem; animation: bump .6s; }
.re-score { font-size: 1.3rem; font-family: var(--font); color: var(--acc); margin: 6px 0 10px; }
.comic-reveal { text-align: left; max-width: 620px; margin: 14px auto; background: var(--glass); border-radius: 16px; padding: 14px; max-height: 260px; overflow-y: auto; }
.comic-reveal p { margin-bottom: 8px; } .comic-reveal small { color: var(--ink3); }

/* ---------- Cómics ---------- */
.comic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.comic-card { border: 1px solid var(--line); background: var(--glass); color: var(--ink); border-radius: 20px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; transition: .2s; }
.comic-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.cc-cover { background: linear-gradient(135deg, var(--dc), #1b1442); font-size: 2.4rem; padding: 18px; letter-spacing: 8px; text-align: center; }
.cc-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .cc-info b { font-family: var(--font); font-size: 1.1rem; } .cc-info small { color: var(--ink3); }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; margin: 0 auto; } .mode-pick h3 { grid-column: 1 / -1; text-align: center; }
.mode-card { border: 2px solid var(--line); background: var(--glass); color: var(--ink); border-radius: 22px; padding: 22px 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: .2s; }
.mode-card:hover { border-color: var(--acc); transform: translateY(-4px); } .mode-card span { font-size: 3rem; } .mode-card b { font-family: var(--font); font-size: 1.2rem; } .mode-card small { color: var(--ink2); }
.comic-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.panel { background: var(--bg); color: #1b1b3a; border: 4px solid #1b1b3a; border-radius: 10px; padding: 12px; position: relative; min-height: 210px; box-shadow: 6px 6px 0 rgba(0,0,0,.4); animation: popIn .4s both; overflow: hidden; }
.panel .scene { position: absolute; right: 8px; bottom: 2px; font-size: 4.8rem; opacity: .35; pointer-events: none; }
.bubble-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; position: relative; z-index: 1; }
.bubble-row.right { flex-direction: row-reverse; }
.who { display: flex; flex-direction: column; align-items: center; width: 64px; flex: none; } .who .face { font-size: 2.5rem; line-height: 1; } .who small { font-size: .7rem; font-weight: 700; text-align: center; }
.bubble { background: #fff; border: 3px solid #1b1b3a; border-radius: 18px; padding: 9px 12px; position: relative; font-family: var(--font); font-size: 1.02rem; flex: 1; transition: transform .2s, box-shadow .2s; }
.bubble::before { content: ''; position: absolute; top: 14px; left: -11px; border: 8px solid transparent; border-right-color: #1b1b3a; }
.bubble-row.right .bubble::before { left: auto; right: -11px; border-right-color: transparent; border-left-color: #1b1b3a; }
.bubble .es { display: none; color: #6c5ce7; font-size: .88rem; font-family: var(--body); margin-top: 4px; font-style: italic; }
.bubble.show-es .es { display: block; }
.b-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.b-actions .btn.icon { background: #efeaff; color: #1b1b3a; }
.bubble.talking { transform: scale(1.04); box-shadow: 0 0 0 4px var(--acc); }
.comic-strip.listen .bubble .en { filter: blur(6px); user-select: none; }
.comic-ctrl { margin-top: 16px; }
.q-box { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.2); padding: 14px; border-radius: 16px; }
.q-n { font-family: var(--font); background: var(--pri); padding: 4px 10px; border-radius: 10px; font-weight: 700; }
.q-text { flex: 1; font-family: var(--font); font-size: 1.25rem; }

/* ---------- Avatar ---------- */
.av-editor { display: grid; grid-template-columns: 260px 1fr; gap: 22px; max-width: 820px; margin: 10px auto; background: var(--glass); border: 1px solid var(--line); border-radius: 24px; padding: 20px; }
.av-preview { display: flex; flex-direction: column; align-items: center; } .av-preview canvas { background: radial-gradient(circle at 50% 80%, #4b3a9e, #241a55); border-radius: 20px; max-width: 100%; }
.av-opts { display: flex; flex-direction: column; gap: 6px; } .av-opts label { font-family: var(--font); font-weight: 600; margin-top: 6px; color: var(--ink2); }
.sws { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); cursor: pointer; transition: .15s; }
.sw.on { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 3px var(--pri); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { border: 1.5px solid var(--line); background: transparent; color: var(--ink2); padding: 7px 13px; border-radius: 20px; cursor: pointer; font-family: var(--font); font-weight: 500; }
.pill.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.av-opts .btn.big { margin-top: 14px; }

/* ---------- Progreso ---------- */
.pane { max-width: 1000px; margin: 0 auto; }
.progress .card { margin-bottom: 14px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.badge-i { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); filter: grayscale(1); opacity: .45; }
.badge-i span { font-size: 2rem; } .badge-i small { text-align: center; font-size: .78rem; }
.badge-i.got { filter: none; opacity: 1; background: linear-gradient(135deg, rgba(255,209,102,.25), rgba(123,97,255,.25)); border: 1px solid var(--acc); }
.intro-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 12px 0; } .intro-list li { background: var(--glass); padding: 10px 12px; border-radius: 12px; }

/* ---------- Efectos ---------- */
.confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 2000; pointer-events: none; animation: fall linear forwards; border-radius: 2px; }
.float-text { position: fixed; transform: translate(-50%, -50%); font-family: var(--font); font-weight: 700; font-size: 1.8rem; color: var(--acc); z-index: 2000; pointer-events: none; animation: floatUp 1.2s forwards; text-shadow: 0 3px 10px rgba(0,0,0,.5); }
.float-text.bonus { color: #ff9f1c; font-size: 2.2rem; }
.pop-in { animation: popIn .35s both; }
.shake { animation: shake .4s; }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 5px; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, -50%) scale(.8); } 30% { transform: translate(-50%, -80%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; gap: 16px; }
  .logo.big .lg-t { font-size: 2.2rem; } .logo.big .lg-b { width: 60px; height: 60px; font-size: 2rem; }
  .kpis { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; } .kv-grid { grid-template-columns: 1fr 1fr; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; } .topnav { order: 3; width: 100%; justify-content: space-around; } .topnav button span { display: none; } .topnav button { font-size: 1.3rem; }
  .staff-main { padding: 14px; }
  .hm-wrap, .ws-wrap, .av-editor { grid-template-columns: 1fr; justify-items: center; }
  .ws-clues { width: 100%; }
  .keys { grid-template-columns: repeat(7, 1fr); }
  .game-head { grid-template-columns: auto 1fr; } .game-head .round-prog { grid-column: 1 / -1; }
  .opt-grid.four { grid-template-columns: 1fr 1fr; } .opt-grid.three { grid-template-columns: 1fr; }
  .mode-pick { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .grid2, .grid3 { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .hud-stats { gap: 8px; font-size: .98rem; } .hud-me small { display: none; }
  .dock button { min-width: 0; padding: 6px 6px; } .dock button small { font-size: .66rem; }
  .hb { grid-template-columns: 88px 1fr 52px; font-size: .82rem; }
  .match-grid { gap: 8px; } .chip { font-size: 1rem; padding: 8px; }
  .comic-strip { grid-template-columns: 1fr; }
  .w-zone { font-size: .8rem; }
  .play-main { padding: 10px; }
  .game-body { padding: 14px; }
  .dlg-inner canvas { display: none; }
}

/* =====================================================================
   v0.2 — CAPA VISUAL "GAME UI"
   Estética: ciudad nocturna neón, tipografía técnica (Chakra Petch),
   bordes angulados, brillos y movimiento con propósito.
   ===================================================================== */
@font-face { font-family: 'Chakra Petch'; src: url('../fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('../fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --bg0: #070418; --bg1: #120a33; --bg2: #1f1450;
  --neon: #00e5ff; --neon2: #ff3dcb; --lime: #b6ff3b; --acc: #ffd23f; --pri: #7b5cff; --pri2: #a98bff;
  --game: 'Chakra Petch', 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
body {
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(123,92,255,.45), transparent 60%),
    radial-gradient(800px 500px at 110% 105%, rgba(0,229,255,.22), transparent 55%),
    radial-gradient(600px 400px at 90% 0%, rgba(255,61,203,.18), transparent 60%),
    var(--bg0);
  background-attachment: fixed;
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: linear-gradient(rgba(0,229,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.07) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); }
#app { position: relative; z-index: 1; }
h1, h2, h3, h4, .btn, .tabs, .kv, .game-title, .ms-title b, .hud-id b, .dock small, .topnav button { font-family: var(--game); letter-spacing: .3px; }
h2 { text-transform: none; }
body.hurt .play::after { content: ''; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(255,40,80,.55); animation: fadeOut .35s forwards; z-index: 50; }

/* Botones */
.btn { border-radius: 4px; clip-path: var(--cut); text-transform: uppercase; font-size: .92rem; letter-spacing: .6px; }
.btn.primary { background: linear-gradient(135deg, #8a6bff, #5b3df5 55%, #3e22d6); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 28px rgba(123,92,255,.45); }
.btn.primary:hover { filter: brightness(1.12); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 0 28px rgba(0,229,255,.45); }
.btn.ghost { border: 1.5px solid rgba(0,229,255,.35); background: rgba(0,229,255,.05); }
.btn.ghost:hover { background: rgba(0,229,255,.12); border-color: var(--neon); }
.btn.icon { clip-path: none; border-radius: 10px; text-transform: none; }
.btn.huge { clip-path: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffd23f 40%, #ff9f1c); box-shadow: 0 0 0 6px rgba(255,210,63,.18), 0 0 40px rgba(255,210,63,.55); animation: glowPulse 2.2s ease-in-out infinite; }
.btn.link { clip-path: none; text-transform: none; }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(255,210,63,.18), 0 0 30px rgba(255,210,63,.45); } 50% { box-shadow: 0 0 0 12px rgba(255,210,63,.08), 0 0 55px rgba(255,210,63,.7); } }

/* Login */
.logo .lg-b { background: linear-gradient(135deg, var(--neon), var(--pri)); box-shadow: 0 0 24px rgba(0,229,255,.55); border-radius: 12px; }
.logo .lg-t { font-family: var(--game); font-weight: 700; }
.logo.big .lg-t { font-size: 3rem; background: linear-gradient(90deg, #fff, var(--neon) 40%, var(--neon2)); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 18px rgba(0,229,255,.35)); }
.login-card, .card, .modal { border-color: rgba(0,229,255,.18); }
.modal { background: linear-gradient(160deg, rgba(31,20,80,.97), rgba(10,6,30,.97)); box-shadow: 0 0 0 1px rgba(0,229,255,.15), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(123,92,255,.25); }
.tabs button.on { background: linear-gradient(135deg, var(--pri), #3e22d6); box-shadow: 0 0 18px rgba(123,92,255,.6); }

/* HUD */
.hud { background: linear-gradient(180deg, rgba(10,6,30,.96), rgba(10,6,30,.82)); border-bottom: 1px solid rgba(0,229,255,.25); box-shadow: 0 6px 24px rgba(0,0,0,.4); padding: 6px 12px calc(6px); padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
.hud-av { position: relative; }
.hud-av canvas { background: radial-gradient(circle at 50% 70%, #3b2a8f, #120a33); border: 1.5px solid rgba(0,229,255,.4); border-radius: 12px; display: block; }
.rank-chip { position: absolute; right: -8px; bottom: -6px; font-size: .95rem; background: var(--bg1); border: 2px solid var(--rc); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; box-shadow: 0 0 10px var(--rc); }
.hud-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hud-id small { color: var(--neon); font-family: var(--game); font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; }
.xpbar { position: relative; width: clamp(110px, 22vw, 240px); height: 12px; border-radius: 3px; background: rgba(255,255,255,.08); border: 1px solid rgba(0,229,255,.3); overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--neon), var(--lime)); box-shadow: 0 0 12px var(--neon); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.xpbar span { position: absolute; inset: 0; font: 700 .62rem/12px var(--game); text-align: center; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .5px; }
.xpbar.big { width: 100%; height: 22px; } .xpbar.big span { font-size: .8rem; line-height: 22px; }
.xpbar.bump { animation: bump .4s; }
.hud-stats { font-family: var(--game); font-weight: 700; gap: 12px; }
.stars-tot { color: var(--acc); text-shadow: 0 0 10px rgba(255,210,63,.6); } .stars-tot b { margin-left: 3px; }
.streak b { margin-left: 2px; } .streak.hot { color: #ff9f1c; text-shadow: 0 0 12px #ff6a00; }

/* Dock */
.dock { background: linear-gradient(0deg, rgba(10,6,30,.98), rgba(10,6,30,.88)); border-top: 1px solid rgba(0,229,255,.25); }
.dock button { position: relative; color: rgba(255,255,255,.55); }
.dock button small { font-size: .7rem; letter-spacing: .8px; text-transform: uppercase; }
.dock button.on { color: #fff; background: linear-gradient(180deg, rgba(0,229,255,.18), rgba(123,92,255,.12)); box-shadow: inset 0 2px 0 var(--neon); }
.dock button.on span { filter: drop-shadow(0 0 8px var(--neon)); }

/* Mundo 3D */
.w3-host { position: absolute; inset: 0; } .w3-host canvas { display: block; width: 100% !important; height: 100% !important; }
.w-clock, .w-quality { background: rgba(10,6,30,.82); padding: 6px 12px; border-radius: 20px; font-family: var(--game); font-weight: 700; font-size: .85rem; border: 1px solid rgba(0,229,255,.25); }
.w-quality { color: var(--ink3); font-weight: 600; }
.w-mm { position: absolute; top: 10px; right: 10px; border-radius: 10px; border: 2px solid rgba(0,229,255,.45); box-shadow: 0 0 18px rgba(0,229,255,.25); z-index: 5; background: #000; }
.w-zone { background: rgba(10,6,30,.82); border: 1px solid rgba(0,229,255,.25); font-family: var(--game); }
.w-prompt { background: linear-gradient(135deg, #fff, #e8fbff); border: 2px solid var(--neon); box-shadow: 0 0 24px rgba(0,229,255,.55); }
.w-prompt kbd { background: #1b1b3a; color: #fff; border-radius: 5px; padding: 1px 6px; font-size: .8rem; margin-left: 4px; }
.w-act { background: radial-gradient(circle at 35% 30%, #fff6c9, #ffd23f 45%, #ff9f1c); box-shadow: 0 0 24px rgba(255,210,63,.6); }
.w-joy { border-color: rgba(0,229,255,.55); background: rgba(10,6,30,.35); box-shadow: 0 0 20px rgba(0,229,255,.2) inset; }
@media (max-width: 560px) { .w-mm { top: 56px; width: 96px; height: 96px; } .w-clock { display: none; } }

/* Mapa de misiones */
.mmap { max-width: 980px; margin: 0 auto; }
.mm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.mm-tabs button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; padding: 10px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; clip-path: var(--cut); transition: .2s; }
.mm-tabs button span { font-size: 1.5rem; } .mm-tabs button b { font-family: var(--game); font-size: .95rem; } .mm-tabs button small { color: var(--ink3); font-size: .72rem; }
.mm-tabs button.on { background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 45%, transparent), rgba(10,6,30,.6)); border-color: var(--tc); box-shadow: 0 0 22px color-mix(in srgb, var(--tc) 55%, transparent); }
.mm-head h2 { font-size: 1.7rem; color: var(--dc); text-shadow: 0 0 18px color-mix(in srgb, var(--dc) 60%, transparent); }
.mm-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; padding: 16px 4px 24px; }
.mm-path .node:nth-child(8n+5), .mm-path .node:nth-child(8n+6), .mm-path .node:nth-child(8n+7), .mm-path .node:nth-child(8n+8) { direction: ltr; }
.node { position: relative; border: 0; cursor: pointer; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); min-height: 132px; justify-content: center; transition: transform .2s, filter .2s; animation: popIn .4s both; animation-delay: calc(var(--k) * 35ms); }
.node:not([disabled]):hover { transform: translateY(-4px) scale(1.04); filter: brightness(1.2); }
.node .n-num { font: 700 1.9rem/1 var(--game); }
.node .n-stars i { font-style: normal; color: rgba(255,255,255,.2); font-size: 1rem; } .node .n-stars i.on { color: var(--acc); text-shadow: 0 0 8px var(--acc); }
.node .n-lbl { font-size: .72rem; color: var(--ink2); font-family: var(--game); letter-spacing: .5px; }
.node .n-tag { font-size: .65rem; background: var(--dc); color: #0b0620; padding: 2px 8px; border-radius: 10px; font-weight: 700; }
.node.open { background: linear-gradient(160deg, color-mix(in srgb, var(--dc) 70%, #fff 0%), color-mix(in srgb, var(--dc) 30%, #0b0620)); filter: drop-shadow(0 0 14px var(--dc)); }
.node.open .n-tag.pulse { animation: pulse 1.2s infinite; background: #fff; }
.node.done { background: linear-gradient(160deg, color-mix(in srgb, var(--dc) 45%, transparent), rgba(10,6,30,.7)); }
.node.locked { opacity: .45; cursor: not-allowed; } .node.grade { opacity: .55; cursor: default; background: rgba(255,255,255,.04); }
.node.boss { background: linear-gradient(160deg, #ff3d6e, #6b0f2a); } .node.boss.locked { background: linear-gradient(160deg, #5a2030, #2a0b14); }
.node.boss.open { filter: drop-shadow(0 0 18px #ff3d6e); } .node.boss .n-num { font-size: 2.2rem; }
.brief { text-align: left; } .br-top { display: flex; gap: 14px; align-items: center; } .br-top > span { font-size: 2.6rem; filter: drop-shadow(0 0 12px var(--dc)); }
.br-top small { color: var(--dc); font-family: var(--game); text-transform: uppercase; letter-spacing: 1px; } .br-top h3 { margin: 0; font-size: 1.5rem; } .br-top b { color: var(--neon); font-family: var(--game); }
.br-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .br-list li { background: rgba(255,255,255,.05); padding: 9px 12px; border-left: 3px solid var(--dc); }

/* Misión en curso */
.mission { max-width: 760px; margin: 0 auto; }
.ms-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.ms-title { display: flex; flex-direction: column; align-items: center; line-height: 1.15; } .ms-title .ms-d { font-size: .8rem; color: var(--dc); font-family: var(--game); letter-spacing: 1px; text-transform: uppercase; }
.ms-title b { font-size: 1.3rem; } .ms-title small { color: var(--neon); font-family: var(--game); }
.ms-count { font: 700 1.1rem var(--game); color: var(--acc); }
.ms-segs { display: flex; gap: 4px; margin: 10px 0 14px; } .ms-segs i { flex: 1; height: 7px; background: rgba(255,255,255,.1); transform: skewX(-20deg); }
.ms-segs i.ok { background: var(--lime); box-shadow: 0 0 8px var(--lime); } .ms-segs i.bad { background: #ff3d6e; } .ms-segs i.cur { background: var(--neon); animation: pulse 1s infinite; }
.ms-card { position: relative; background: linear-gradient(160deg, rgba(31,20,80,.9), rgba(10,6,30,.9)); border: 1px solid rgba(0,229,255,.25); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); padding: 22px 20px 20px; box-shadow: 0 0 40px rgba(123,92,255,.2) inset; min-height: 320px; }
.ms-card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--dc), transparent); }
.ms-card.hit { animation: shake .4s; }
.ms-type { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; position: relative; } .ms-type span { font: 700 .82rem var(--game); text-transform: uppercase; letter-spacing: 1.5px; color: var(--neon); }
.ring { width: 46px; height: 46px; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 4; } .ring-fg { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; transition: stroke .3s; }
.ring-fg.danger { stroke: #ff3d6e; } .ring-n { position: absolute; right: 0; width: 46px; text-align: center; font: 700 1rem var(--game); }
.ms-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 14px; }
.ms-emoji { font-size: 5rem; line-height: 1.1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); animation: floatY 3s ease-in-out infinite; } .ms-emoji.sm { font-size: 3.4rem; }
.ms-es { font: 600 1.7rem var(--game); color: var(--acc); text-align: center; }
.ms-word { font: 700 2.4rem var(--game); letter-spacing: 1px; text-shadow: 0 0 20px rgba(0,229,255,.5); }
.ms-sent { font-family: var(--game); font-size: 1.5rem; text-align: center; line-height: 1.6; margin: 14px 0; }
.ms-opts { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .ms-opts.n3 { grid-template-columns: repeat(3, 1fr); } .ms-opts.one { grid-template-columns: 1fr; }
.ms-opts.pics .ms-opt { font-size: 2.8rem; padding: 14px 6px; }
.ms-opt { border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; padding: 14px 12px; font: 600 1.05rem var(--game); cursor: pointer; clip-path: var(--cut); transition: .15s; text-align: center; }
.ms-opt:hover:not(:disabled) { border-color: var(--neon); background: rgba(0,229,255,.12); transform: translateY(-2px); box-shadow: 0 0 18px rgba(0,229,255,.3); }
.ms-opt.right { border-color: var(--lime); background: rgba(182,255,59,.18); box-shadow: 0 0 18px rgba(182,255,59,.4); } .ms-opt.wrong { border-color: #ff3d6e; background: rgba(255,61,110,.18); animation: shake .4s; }
.ms-opt:disabled { cursor: default; }
.ms-slots, .ms-tiles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.slot { width: 40px; height: 48px; border-bottom: 3px solid var(--neon); display: grid; place-items: center; font: 700 1.5rem var(--game); color: var(--acc); cursor: pointer; } .slot.fill { background: rgba(0,229,255,.08); }
.tile { border: 0; min-width: 42px; height: 46px; padding: 0 10px; font: 700 1.25rem var(--game); color: #fff; background: linear-gradient(160deg, var(--pri), #3e22d6); clip-path: var(--cut); cursor: pointer; transition: .12s; animation: popIn .2s; }
.tile:hover { filter: brightness(1.2); transform: translateY(-2px); } .tile.word { font-size: 1rem; height: 42px; } .tile.placed { background: linear-gradient(160deg, var(--acc), #ff9f1c); color: #1b1b3a; }
.ms-build { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 58px; padding: 10px; border: 1.5px dashed rgba(0,229,255,.35); margin: 10px 0; } .ms-build .ph { color: var(--ink3); align-self: center; }
.ms-len { display: flex; gap: 5px; justify-content: center; margin: 4px 0; } .ms-len i { width: 14px; height: 4px; background: var(--neon); opacity: .6; }
.ms-input { display: flex; gap: 8px; justify-content: center; margin-top: 10px; } .ms-input input { font: 700 1.5rem var(--game); text-align: center; letter-spacing: 3px; padding: 10px 14px; background: rgba(255,255,255,.08); border: 2px solid rgba(0,229,255,.4); color: #fff; width: min(340px, 70vw); outline: none; } .ms-input input:focus { border-color: var(--neon); box-shadow: 0 0 18px rgba(0,229,255,.35); }
.ms-fb { margin-top: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; animation: popIn .25s; clip-path: var(--cut); }
.ms-fb.ok { background: rgba(182,255,59,.14); border: 1px solid var(--lime); } .ms-fb.bad { background: rgba(255,61,110,.14); border: 1px solid #ff3d6e; }
.ms-fb > div:first-child { font: 700 1.15rem var(--game); }
.ms-result { text-align: center; padding: 26px 16px; max-width: 620px; margin: 0 auto; background: linear-gradient(160deg, rgba(31,20,80,.92), rgba(10,6,30,.92)); border: 1px solid rgba(0,229,255,.25); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.res-title { font: 700 2rem var(--game); letter-spacing: 2px; } .ms-result.win .res-title { color: var(--lime); text-shadow: 0 0 22px rgba(182,255,59,.6); } .ms-result.lose .res-title { color: #ff3d6e; text-shadow: 0 0 22px rgba(255,61,110,.5); }
.res-stars { font-size: 3.6rem; margin: 6px 0; } .res-stars span { color: rgba(255,255,255,.15); display: inline-block; } .res-stars span.on { color: var(--acc); text-shadow: 0 0 22px var(--acc); animation: starIn .6s both; }
@keyframes starIn { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 70% { transform: scale(1.35) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.res-stats { display: flex; justify-content: center; gap: 22px; margin: 8px 0 10px; } .res-stats b { display: block; font: 700 1.6rem var(--game); color: var(--neon); } .res-stats small { color: var(--ink3); }

/* Arcade */
.game-card { clip-path: var(--cut); border-radius: 0; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border-color: rgba(0,229,255,.18); }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 0 26px rgba(0,229,255,.3); border-color: var(--neon); }
.game-card b { font-family: var(--game); } .game-card.feat { background: linear-gradient(160deg, rgba(255,61,203,.35), rgba(123,92,255,.25)); border-color: var(--neon2); }
.opt-grid.two { grid-template-columns: 1fr 1fr; }
.game-body { border-radius: 0; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); border-color: rgba(0,229,255,.2); }
.es-clue { font: 600 1.15rem var(--game); color: var(--acc); }
.es-clue.big { font-size: 1.6rem; } .em.big { font-size: 2.4rem; }
.chip { border-radius: 0; clip-path: var(--cut); font-family: var(--game); }
.chip .grip { opacity: .5; cursor: grab; margin-right: 4px; } .chip.word { cursor: grab; touch-action: none; user-select: none; } .chip .wtxt { flex: 1; }
.chip.lifting { opacity: .35; } .chip.over { border-color: var(--acc); background: rgba(255,210,63,.18); transform: scale(1.04); }
.chip.ghost { position: fixed; z-index: 3000; pointer-events: none; background: linear-gradient(160deg, var(--pri), #3e22d6); border-color: var(--neon); box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 22px rgba(0,229,255,.5); transform: rotate(-3deg) scale(1.05); }
.chip.pic small b { color: #fff; }
.meteor-wrap { position: relative; margin: -6px; } #mt-cv { width: 100%; display: block; touch-action: none; cursor: crosshair; }
.mt-prompt { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(10,6,30,.85); border: 1.5px solid var(--neon); padding: 6px 14px; display: flex; gap: 10px; align-items: center; clip-path: var(--cut); box-shadow: 0 0 20px rgba(0,229,255,.35); }
.mt-n { font: 700 .85rem var(--game); color: var(--neon); }
.mt-help { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--ink3); pointer-events: none; }

/* Perfil */
.prof-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; background: linear-gradient(160deg, rgba(31,20,80,.8), rgba(10,6,30,.6)); padding: 14px; border: 1px solid rgba(0,229,255,.2); clip-path: var(--cut); }
.prof-head canvas { background: radial-gradient(circle at 50% 75%, #3b2a8f, #120a33); border-radius: 14px; border: 1.5px solid rgba(0,229,255,.4); flex: none; }
.pf-id { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .pf-id small { color: var(--ink3); letter-spacing: 2px; font-family: var(--game); } .pf-id h2 { margin: 0; font-size: 2rem; }
.pf-id .btn { align-self: flex-start; }
.dist-prog { display: flex; flex-direction: column; gap: 10px; } .dp { display: grid; grid-template-columns: 160px 1fr 150px; gap: 10px; align-items: center; font-size: .9rem; }
.dp-bar { height: 10px; background: rgba(255,255,255,.08); } .dp-bar i { display: block; height: 100%; background: var(--dc); box-shadow: 0 0 10px var(--dc); }
.dp b { font-family: var(--game); font-size: .85rem; text-align: right; }
.rankup { text-align: center; padding: 10px; } .ru-icon { font-size: 5rem; filter: drop-shadow(0 0 30px var(--rc)); animation: starIn .7s both; } .rankup small { letter-spacing: 3px; color: var(--neon); font-family: var(--game); } .rankup h2 { font-size: 2.4rem; margin: 4px 0; }
.gameover h2 { font-size: 2.4rem; letter-spacing: 3px; color: #ff3d6e; text-shadow: 0 0 22px rgba(255,61,110,.6); }

@media (max-width: 860px) {
  .mm-tabs { grid-template-columns: repeat(2, 1fr); } .mm-path { grid-template-columns: repeat(3, 1fr); }
  .dp { grid-template-columns: 1fr; gap: 4px; } .dp b { text-align: left; }
}
@media (max-width: 520px) {
  .mm-path { grid-template-columns: repeat(2, 1fr); gap: 12px; } .node { min-height: 118px; }
  .xpbar { width: 96px; } .hud-stats { gap: 6px; font-size: .9rem; } .stars-tot { display: none; }
  .ms-opts.n3 { grid-template-columns: 1fr; } .ms-emoji { font-size: 4rem; } .ms-word { font-size: 1.9rem; } .ms-sent { font-size: 1.2rem; }
  .prof-head { flex-direction: column; text-align: center; } .pf-id .btn { align-self: center; }
  .dock button small { font-size: .58rem; }
}
.node.boss.grade { background: linear-gradient(160deg, #5a2030, #2a0b14); opacity: .55; filter: none; }

.mt-prompt { top: auto; bottom: 64px; }
.dlg-inner canvas { align-self: flex-start; }

/* =================== v0.3 =================== */
.av2 { grid-template-columns: minmax(240px, 320px) 1fr; }
.av-stage { width: 100%; aspect-ratio: 4 / 5; max-width: 320px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 78%, #4b3a9e, #120a33 70%); border: 1.5px solid rgba(0,229,255,.35); box-shadow: 0 0 30px rgba(123,92,255,.3) inset; margin: 0 auto; }
.av-stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.av-tabs { margin-bottom: 8px; } .av-tabs button { font-size: .85rem; padding: 8px 4px; }
.av-pane { display: flex; flex-direction: column; gap: 6px; } .av-pane .sws { margin-bottom: 4px; }
.sw { width: 32px; height: 32px; }
.hud-cup { font-size: 1.15rem; background: linear-gradient(135deg, rgba(255,210,63,.25), rgba(255,159,28,.15)) !important; border: 1px solid rgba(255,210,63,.5); box-shadow: 0 0 14px rgba(255,210,63,.35); }
.hud-cup:hover { box-shadow: 0 0 22px rgba(255,210,63,.7); }
.rank-box { display: flex; flex-direction: column; gap: 10px; }
.rk-head { display: flex; gap: 12px; align-items: center; } .rk-head h2 { margin: 0; } .rk-head small { color: var(--ink3); }
.rk-cup { font-size: 2.6rem; filter: drop-shadow(0 0 16px rgba(255,210,63,.7)); animation: floatY 3s ease-in-out infinite; }
.rk-scope { align-self: flex-start; background: rgba(255,255,255,.06); }
.rk-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.rk-row { display: grid; grid-template-columns: 40px 38px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(255,255,255,.05); clip-path: var(--cut); }
.rk-row canvas { background: rgba(0,0,0,.25); border-radius: 8px; }
.rk-pos { font: 700 1.1rem var(--game); text-align: center; }
.rk-name { display: flex; flex-direction: column; font-weight: 600; min-width: 0; } .rk-name small { color: var(--ink3); font-weight: 400; } .rk-name em { color: var(--neon); font-style: normal; font-size: .8rem; }
.rk-val { font: 700 1rem var(--game); color: var(--acc); }
.rk-row.podium.p0 { background: linear-gradient(90deg, rgba(255,210,63,.28), rgba(255,255,255,.04)); } .rk-row.podium.p1 { background: linear-gradient(90deg, rgba(200,210,230,.22), rgba(255,255,255,.04)); } .rk-row.podium.p2 { background: linear-gradient(90deg, rgba(205,127,50,.25), rgba(255,255,255,.04)); }
.rk-row.me { outline: 2px solid var(--neon); box-shadow: 0 0 16px rgba(0,229,255,.35); }
.rk-sep { text-align: center; color: var(--ink3); letter-spacing: 4px; }
.w-online { background: rgba(10,6,30,.82); padding: 6px 12px; border-radius: 20px; font-family: var(--game); font-weight: 600; font-size: .85rem; border: 1px solid rgba(0,229,255,.35); }
.w-online b { color: var(--lime); }
.w-emotes { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.w-emotes button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(0,229,255,.4); background: rgba(10,6,30,.75); font-size: 1.35rem; cursor: pointer; transition: transform .15s; }
.w-emotes button:hover, .w-emotes button:active { transform: scale(1.15); background: rgba(0,229,255,.2); }
@media (max-width: 860px) { .av2 { grid-template-columns: 1fr; } .av-stage { max-width: 260px; } }
@media (max-width: 560px) { .w-emotes { top: 40%; right: 8px; } .w-emotes button { width: 38px; height: 38px; font-size: 1.15rem; } .w-online { font-size: .74rem; } }

/* ===================== v0.4 — Barrio de juegos ===================== */
.talk-house { position: relative; min-height: 100%; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 220px; }
.th-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 16px; background: var(--glass2, rgba(255,255,255,.06)); border: 2px solid var(--dc); color: inherit; cursor: pointer; font: inherit; }
.th-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.th-card.done { opacity: .75; }
.th-card small { opacity: .8; }
.th-dialog { position: fixed; bottom: 90px; }

/* ---------- v0.4: insignias, ranking por casas, inspección ---------- */
.bdg-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.bdg { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 8px 6px 6px; border-radius: 14px; font-size: 1.5rem; line-height: 1; background: linear-gradient(160deg, rgba(255,209,102,.22), rgba(255,209,102,.06)); border: 1px solid rgba(255,209,102,.5); }
.bdg small { font-size: .62rem; margin-top: 4px; opacity: .9; text-align: center; max-width: 80px; line-height: 1.15; font-family: var(--font); }
.bdg.dyn { background: linear-gradient(160deg, rgba(0,229,255,.25), rgba(123,97,255,.15)); border-color: rgba(0,229,255,.6); box-shadow: 0 0 14px rgba(0,229,255,.25); }
.bdg.crown i { position: absolute; top: -10px; right: -6px; font-size: 1rem; font-style: normal; }
.bdg.lvb { background: color-mix(in srgb, var(--dc) 22%, transparent); border-color: var(--dc); }
.bdg.lvb b { font-size: .95rem; margin-top: 2px; font-family: var(--font); }
.rk-houses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
.rk-houses button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: inherit; font-size: 1.2rem; cursor: pointer; }
.rk-houses button small { font-size: .58rem; line-height: 1.1; }
.rk-houses button.on { border-color: var(--acc, #00e5ff); background: rgba(0,229,255,.15); }
.rk-row { cursor: pointer; }
.rk-row:hover { filter: brightness(1.15); }
.rk-val small { display: block; font-size: .65rem; opacity: .7; font-weight: 400; }
.insp h5 { margin: 14px 0 6px; font-family: var(--font); letter-spacing: .03em; }
.insp-head { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: linear-gradient(140deg, color-mix(in srgb, var(--rc) 30%, transparent), rgba(255,255,255,.03)); border: 1px solid var(--rc); }
.insp-head canvas { background: rgba(0,0,0,.25); border-radius: 14px; flex: none; }
.insp-head h2 { margin: 2px 0; }
.insp-rank { margin: 0 0 6px; }
.insp-kpi { display: flex; gap: 12px; flex-wrap: wrap; }
.insp-kpi span { background: rgba(0,0,0,.25); padding: 4px 10px; border-radius: 999px; }
.on-dot { color: #4ade80; }
.insp-sk { display: grid; gap: 6px; }
.isk { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 8px; font-size: .9rem; }
.isk i { height: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.isk i b { display: block; height: 100%; background: #7b61ff; }
.isk.strong i b { background: linear-gradient(90deg, #22c55e, #a3e635); }
.isk em { font-size: .75rem; opacity: .85; font-style: normal; }
.insp-houses { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-houses span { background: rgba(255,255,255,.07); padding: 6px 10px; border-radius: 10px; }
.insp-lv { display: grid; gap: 6px; }
.insp-lv div { display: grid; grid-template-columns: 26px 1fr 50px; gap: 8px; align-items: center; }
.insp-lv i { height: 9px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.insp-lv i b { display: block; height: 100%; background: var(--dc); }
.insp-act { display: grid; gap: 8px; }
@media (max-width: 560px) { .isk { grid-template-columns: 105px 1fr 70px; font-size: .8rem; } .rk-houses { grid-template-columns: repeat(5, 1fr); } }

/* ---------- v0.4: chat, mascotas, invitaciones ---------- */
.w-chat-btn, .w-pet-btn { position: absolute; left: 12px; z-index: 7; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 22px; border: 1.5px solid rgba(0,229,255,.5); background: rgba(10,6,30,.85); color: #fff; font-family: var(--game, inherit); font-weight: 700; cursor: pointer; box-shadow: 0 0 16px rgba(0,229,255,.25); }
.w-chat-btn { bottom: 150px; }
.w-pet-btn { bottom: 200px; border-color: rgba(255,209,102,.6); }
.w-chat-btn b { background: #ef476f; border-radius: 10px; padding: 0 6px; font-size: .75rem; }
.w-chat, .w-pet { position: absolute; left: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); z-index: 9; background: linear-gradient(160deg, rgba(43,31,99,.97), rgba(20,14,56,.97)); border: 1.5px solid rgba(0,229,255,.45); border-radius: 18px; padding: 10px; box-shadow: 0 16px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; }
.w-chat { max-height: min(70%, 520px); }
.wc-head, .wp-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.wp-head small { opacity: .75; flex: 1; }
.wc-list { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.wc-msg { align-self: flex-start; max-width: 85%; background: rgba(255,255,255,.1); border-radius: 12px 12px 12px 4px; padding: 6px 10px; }
.wc-msg.me { align-self: flex-end; background: rgba(0,229,255,.22); border-radius: 12px 12px 4px 12px; }
.wc-msg small { display: block; font-size: .68rem; opacity: .7; }
.wc-cats { display: flex; gap: 4px; overflow-x: auto; }
.wc-cats button { flex: none; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; border-radius: 12px; padding: 3px 8px; font-size: .75rem; cursor: pointer; }
.wc-cats button.on { background: rgba(0,229,255,.25); border-color: rgba(0,229,255,.7); }
.wc-phr { display: flex; gap: 5px; flex-wrap: wrap; max-height: 74px; overflow-y: auto; }
.wc-phr button { border: 0; background: rgba(255,255,255,.92); color: #1b1442; border-radius: 12px; padding: 4px 9px; font-size: .78rem; cursor: pointer; }
.wc-warn { background: rgba(239,71,111,.2); border: 1px solid #ef476f; border-radius: 10px; padding: 6px 8px; font-size: .8rem; }
.wc-form { display: flex; gap: 6px; }
.wc-form input { flex: 1; min-width: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); color: #fff; padding: 8px 10px; font: inherit; }
.wp-cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wp-cmds button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.1); color: #fff; cursor: pointer; font: inherit; }
.wp-cmds button span { font-size: 1.3rem; }
.wp-cmds button small { font-size: .65rem; opacity: .75; }
.wp-cmds button:active { transform: scale(.95); }
.wp-fb { margin: 0; font-size: .82rem; min-height: 1em; }
.w-invite { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; gap: 12px; align-items: center; background: #fff; color: #1b1442; border-radius: 18px; padding: 12px 16px; box-shadow: 0 0 0 3px #00e5ff, 0 16px 40px rgba(0,0,0,.45); width: min(420px, calc(100% - 24px)); }
.w-invite .wi-ic { font-size: 2.2rem; }
.w-invite small { display: block; opacity: .7; }
.w-invite b { display: block; font-size: 1.1rem; margin-bottom: 6px; }
.w-together { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 8; background: rgba(10,6,30,.9); border: 1.5px solid #ffd166; border-radius: 22px; padding: 6px 8px 6px 14px; display: flex; gap: 10px; align-items: center; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; }
.tchat .tc-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.tc-row { display: grid; grid-template-columns: 130px 110px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
.tc-row.muted { opacity: .6; }
.tc-row small { opacity: .7; }
@media (max-width: 700px) { .tc-row { grid-template-columns: 1fr auto auto; } .tc-row small, .tc-row b { grid-column: 1 / -1; } }
@media (max-width: 560px) { .w-chat-btn { bottom: 150px; padding: 7px 11px; } .w-chat-btn span, .w-pet-btn span { display: none; } .w-pet-btn { bottom: 196px; } .w-together { font-size: .8rem; white-space: normal; } }
#pet-name { display: block; width: 100%; margin: 6px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(0,229,255,.45); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 1rem; }
.av-tabs { flex-wrap: wrap; }

/* v0.5 nombre compuesto y nombres bilingües */
.lg-t { position: relative; }
.lg-s { -webkit-text-fill-color: #00e5ff; background: none; display: block; font-size: .32em; letter-spacing: .32em; font-weight: 700; opacity: .85; margin-top: -.15em; text-align: center; color: var(--neon, #00e5ff); }
.logo:not(.big) .lg-s { font-size: .42em; letter-spacing: .2em; }
.gc-es { display: block; font-style: normal; font-size: .75rem; opacity: .75; margin-top: -2px; }
.gt-es { font-size: .7em; opacity: .7; font-weight: 500; margin-left: 6px; }

/* ===================== v0.6 — monedas, tienda, clóset ===================== */
.coins-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,209,102,.25), rgba(255,159,28,.15)); border: 1px solid rgba(255,209,102,.6); color: #ffe7a3; font-family: var(--game, inherit); font-weight: 700; cursor: pointer; font-size: .95rem; }
.coins-pill b { color: #fff; }
.coins-pill.big { font-size: 1.3rem; padding: 6px 14px; cursor: default; }
.coins-pill.bump { animation: coinbump .4s ease; }
@keyframes coinbump { 50% { transform: scale(1.18); box-shadow: 0 0 16px rgba(255,209,102,.8); } }
.go-coins { background: rgba(255,209,102,.12); border: 1px solid rgba(255,209,102,.4); border-radius: 12px; padding: 8px 12px; }
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-head small { opacity: .8; }
.shop-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.shop-tabs button { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; border-radius: 12px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: .85rem; }
.shop-tabs button.on { background: rgba(255,209,102,.2); border-color: #ffd166; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 58vh; overflow-y: auto; padding: 4px; }
.sh-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 14px; background: linear-gradient(170deg, color-mix(in srgb, var(--rc) 22%, transparent), rgba(255,255,255,.03)); border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent); text-align: center; }
.sh-card.legendary { box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent); }
.sh-card canvas { background: rgba(0,0,0,.25); border-radius: 10px; }
.sh-card small { opacity: .75; font-size: .72rem; }
.sh-card.own { opacity: .85; }
.sh-r { position: absolute; top: 6px; left: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rc); }
.sh-need { font-size: .68rem; opacity: .7; font-style: normal; }
.av-wallet { margin-bottom: 8px; }
.pill.locked, .sw.locked { position: relative; opacity: .55; filter: grayscale(.4); }
.lk { font-style: normal; font-size: .62rem; margin-left: 4px; color: #ffd166; }
.sw.locked .lk { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0; }
.sws { row-gap: 14px; }
.closet { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cl-item { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 12px; border: 1.5px solid var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent); }
.cl-item small { opacity: .75; }
.btn.pulse { animation: coinbump .5s ease 3; }
.wp-mic.on { background: #c1121f; }

/* ===== v0.6 · Misiones de historia y mapa grande ===== */
.w-map-btn, .w-qlog-btn { position: absolute; right: 10px; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; border: 1.5px solid rgba(255,214,10,.6); background: rgba(10,6,30,.85); color: #fff; font-family: var(--game, inherit); font-weight: 700; font-size: .85rem; cursor: pointer; box-shadow: 0 0 14px rgba(255,214,10,.25); min-width: 110px; justify-content: center; }
.w-map-btn { top: 140px; } .w-qlog-btn { top: 182px; }
.w-map-btn:hover, .w-qlog-btn:hover { background: rgba(255,214,10,.18); }
.w-quest { position: absolute; left: 10px; top: 58px; z-index: 6; width: min(320px, calc(100% - 150px)); background: linear-gradient(160deg, rgba(43,31,99,.94), rgba(20,14,56,.94)); border: 1.5px solid rgba(255,214,10,.65); border-radius: 14px; padding: 9px 11px; box-shadow: 0 8px 26px rgba(0,0,0,.4); color: #fff; }
.w-quest .wq-h { display: flex; justify-content: space-between; gap: 8px; font-family: var(--game, inherit); }
.w-quest .wq-h span { font-size: .75rem; background: rgba(255,214,10,.2); border-radius: 10px; padding: 1px 8px; color: #ffd60a; }
.w-quest p { margin: 5px 0 4px; font-size: .9rem; line-height: 1.3; }
.w-quest .wq-es { display: block; opacity: .75; font-size: .78rem; margin-bottom: 4px; }
.w-quest .row { gap: 4px; }
.w-quest .btn.sm { padding: 3px 9px; font-size: .78rem; }
.qbox { min-width: min(460px, 82vw); }
.qb-top { display: flex; gap: 14px; align-items: flex-start; }
.qb-top canvas { flex: none; background: radial-gradient(circle at 50% 70%, rgba(255,214,10,.25), transparent 70%); border-radius: 14px; }
.qb-top small { color: #ffd60a; font-weight: 700; letter-spacing: .03em; }
.qb-line { font-size: 1.12rem; margin: 6px 0; line-height: 1.4; }
.qb-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.qb-opts { display: grid; gap: 7px; width: 100%; }
.qb-opts .opt { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: inherit; font: inherit; cursor: pointer; }
.qb-opts .opt:hover:not(:disabled) { background: rgba(0,229,255,.15); }
.qb-opts .opt.right { border-color: #06d6a0; background: rgba(6,214,160,.22); }
.qb-opts .opt.wrong { border-color: #ef476f; background: rgba(239,71,111,.22); }
.qoffer, .qdone { text-align: center; min-width: min(380px, 80vw); }
.qoffer .qo-ic, .qdone .qo-ic { font-size: 3.4rem; animation: bump .6s ease; }
.qoffer h3, .qdone h3 { margin: 4px 0 6px; }
.qoffer small { color: #ffd60a; font-weight: 700; }
.qdone .qd-coins { font-size: 1.6rem; font-weight: 800; color: #ffd60a; margin: 6px 0 10px; }
.qlog { min-width: min(560px, 86vw); }
.qlog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.ql-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.ql-item .ql-ic { font-size: 1.7rem; }
.ql-item b { display: block; font-size: .92rem; }
.ql-item small { opacity: .75; font-size: .76rem; }
.ql-item.done { opacity: .6; border-color: rgba(6,214,160,.5); }
.ql-item.active { border-color: #ffd60a; background: rgba(255,214,10,.12); }
.bigmap { width: 100%; }
.bigmap h2 { margin: 0 0 6px; }
.bm-wrap { overflow: auto; max-height: 74vh; border-radius: 12px; border: 2px solid rgba(255,214,10,.4); background: #0d0a24; }
.bm-wrap canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; }
@media (max-width: 560px) { .w-map-btn { top: 160px; } .w-qlog-btn { top: 200px; } .w-map-btn, .w-qlog-btn { min-width: 0; padding: 6px 10px; } .w-map-btn span, .w-qlog-btn span { display: none; } .w-quest { top: 100px; width: calc(100% - 80px); } }

/* ===== v0.7 · Ruta curricular por grado ===== */
.mod-card h3 { margin: 0; }
.mod-card .hint { max-width: 640px; }
.mod-tbl select { width: 100%; min-width: 260px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.2); font: inherit; }
.mod-tbl select option { color: #111; }
.block-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 4px solid var(--dc); font-size: .9rem; margin-top: 6px; }
.block-head b { font-family: var(--game); letter-spacing: .5px; }
.block-head span { color: var(--ink2); }
.block-head.me { background: color-mix(in srgb, var(--dc) 22%, transparent); }
.bh-tag { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff !important; }
.bh-tag.me { background: var(--dc); color: #0b0620 !important; }
.bh-tag.up { background: rgba(255,214,10,.2); color: #ffd60a !important; }
.bh-tag.per { background: #00e5ff; color: #0b0620 !important; }
.node.review { opacity: .78; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.node.boss.review { background: linear-gradient(160deg, #7a2a40, #3a0f1c); }
.br-mod { background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.35); border-radius: 12px; padding: 8px 10px; margin: 8px 0; font-size: .9rem; }
.br-mod small { color: var(--ink2); }
.gm-mod { background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.35); border-radius: 12px; padding: 8px 12px; margin: 6px 0; }
.gm-mod small { color: var(--ink2); }
.w-mod { background: rgba(10,6,30,.85); border: 1px solid rgba(0,229,255,.5); color: #fff; padding: 6px 12px; border-radius: 20px; font-family: var(--game, inherit); font-weight: 600; font-size: .85rem; cursor: pointer; box-shadow: 0 0 12px rgba(0,229,255,.25); }
.w-mod:hover { background: rgba(0,229,255,.2); }
@media (max-width: 760px) { .w-mod span { display: none; } }

/* ===== v0.7 · Modo GM, premios y trajes ===== */
.gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gm-grid .gm-wide { grid-column: 1 / -1; }
.gm h3 { margin: 0 0 8px; }
.gm-sw { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.gm-sw input { margin-top: 4px; width: 18px; height: 18px; accent-color: #00e5ff; }
.gm-sw small { display: block; color: var(--ink2); font-size: .78rem; }
.gm-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 10px 0; }
.gm-nums label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.gm input[type=number], .gm input[type=date], .gm-nums input, .gm-nums select, .gm textarea, .gm select, #gm-q { padding: 7px 9px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; font: inherit; }
.gm select option { color: #111; }
.gm textarea { width: 100%; margin: 6px 0; }
.gm-state { font-weight: 700; margin: 6px 0; }
.gm-gift { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.gm-gift #gm-q { width: 100%; margin-bottom: 6px; }
.gm-list { max-height: 260px; overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px; margin: 6px 0; }
.gm-list label { display: block; padding: 4px 2px; cursor: pointer; }
.gm-list small { color: var(--ink2); }
.gm-tbl input[type=number] { width: 100px; }
.gm-log { max-height: 240px; overflow: auto; font-size: .85rem; }
.gm-log div { padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.gm-log small { color: var(--ink2); margin-right: 6px; }
@media (max-width: 860px) { .gm-grid, .gm-gift { grid-template-columns: 1fr; } }
.gift-box { text-align: center; min-width: min(420px, 82vw); }
.gift-box .gb-ic { font-size: 3.6rem; animation: bump .6s ease; }
.gb-item { background: rgba(255,214,10,.08); border: 1px solid rgba(255,214,10,.4); border-radius: 12px; padding: 10px; margin: 8px 0; }
.gb-msg { font-size: 1.05rem; font-style: italic; }
.gb-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.gb-tags span { background: rgba(255,255,255,.1); border-radius: 12px; padding: 3px 10px; font-weight: 700; }
.w-event { background: linear-gradient(90deg, #ff2bd6, #ffd60a); color: #0b0620; padding: 6px 12px; border-radius: 20px; font-weight: 800; font-size: .82rem; }
.cl-item.cl-off { border-color: #ffd60a; }
.tg-card h3 { margin: 0; }
.tg-budget { min-width: 220px; }
.tg-budget b { font-size: 1.3rem; color: #ffd60a; }
.tg-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 4px; }
.tg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #06d6a0, #ffd60a); }
.tg-modal { min-width: min(560px, 86vw); }
.tg-modal #tg-q { width: 100%; }
.tg-modal #tg-q { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; font: inherit; margin-bottom: 6px; }

/* ===== v0.9 · Diagnóstico, simulacro Saber, autoevaluación y boletín ===== */
.diag, .saber, .selfev { min-width: min(640px, 88vw); }
.dg-head h2, .sb-head h2, .selfev h2 { margin: 0; }
.sb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sb-time { font-family: var(--game, inherit); font-size: 1.3rem; background: rgba(255,214,10,.15); color: #ffd60a; padding: 4px 12px; border-radius: 12px; }
.dg-list { margin: 10px 0 14px 18px; line-height: 1.7; }
.dg-prog { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink2); margin-top: 8px; }
.dg-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin: 4px 0 12px; }
.dg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #00e5ff, #7b61ff); transition: width .3s; }
.dg-q { font-size: 1.15rem; margin: 10px 0; line-height: 1.45; }
.dg-opts { display: grid; gap: 8px; }
.dg-opts .opt { text-align: left; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: inherit; font: inherit; cursor: pointer; }
.dg-opts .opt:hover:not(:disabled) { background: rgba(0,229,255,.14); }
.dg-opts .opt.right { border-color: #06d6a0; background: rgba(6,214,160,.22); } .dg-opts .opt.wrong { border-color: #ef476f; background: rgba(239,71,111,.22); }
.dg-res { text-align: center; }
.dg-big { font-family: var(--game, inherit); font-size: 3.4rem; font-weight: 800; color: #ffd60a; text-shadow: 0 0 20px rgba(255,214,10,.4); }
.sb-inst { color: #00e5ff; font-weight: 700; margin: 4px 0; }
.sb-text { background: rgba(255,255,255,.06); border-left: 4px solid #7b61ff; border-radius: 0 10px 10px 0; padding: 10px 12px; line-height: 1.5; margin: 6px 0; }
.sb-parts { text-align: left; margin: 10px 0; }
.dg-card h3 { margin: 0; }
.dg-chart { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 120px; margin-top: 10px; }
.dgc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.dgc i { width: 70%; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #00e5ff, #7b61ff); }
.dgc small { color: var(--ink2); font-size: .72rem; }
.dg-card select, .action-card select { padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.2); font: inherit; }
.dg-card select option, .action-card select option { color: #111; }
.mm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin: 8px 0; }
.mm-ref { background: rgba(255,214,10,.14); color: #ffd60a; border: 1px solid rgba(255,214,10,.4); border-radius: 12px; padding: 4px 10px; font-size: .82rem; }
.se-q { margin: 10px 0; }
.se-q p { margin: 0 0 6px; }
.se-sc { display: flex; flex-wrap: wrap; gap: 6px; }
.se-sc label, .se-need label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); cursor: pointer; font-size: .88rem; }
.se-need { display: flex; flex-wrap: wrap; gap: 6px; }
.selfev textarea { width: 100%; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.2); font: inherit; }
.selfev input[type=range] { width: 100%; accent-color: #00e5ff; }
.sd-eval { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.sd-eval div { background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px; }
.sd-eval small { display: block; color: var(--ink2); } .sd-eval em { display: block; font-size: .8rem; color: var(--ink2); margin-top: 3px; }
@media (max-width: 700px) { .sd-eval { grid-template-columns: 1fr; } }

/* =================== v0.10: diplomas, Copa, English Day, familias, Speak Up! =================== */
.cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cp-card h3, .fam-card h3, .ed-card h3 { margin: 0; }
.ed-card { border: 1px solid rgba(255,214,10,.5); background: linear-gradient(120deg, rgba(255,43,214,.16), rgba(255,214,10,.12)); }
.dip-box { text-align: center; }
.dip-prev { margin: 10px 0; min-height: 120px; display: grid; place-items: center; }
.dip-canvas { width: 100%; max-width: 860px; height: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.45); background: #fff; }
.dip-win { text-align: center; min-width: min(420px, 84vw); }
.dip-win .dw-ic { font-size: 4rem; animation: bump .6s ease; }
.dip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dip-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(233,199,90,.55); background: linear-gradient(160deg, rgba(233,199,90,.18), rgba(20,33,61,.35)); color: var(--ink); cursor: pointer; font: inherit; transition: transform .15s; }
.dip-item:hover { transform: translateY(-3px); }
.dip-item .di-ic { font-size: 1.8rem; } .dip-item b { font-family: var(--font); } .dip-item small { color: var(--ink2); } .dip-item em { font-style: normal; font-size: .78rem; color: var(--acc); }
.gm-dip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 10px 0; }
.gm-dip h4 { margin-bottom: 4px; }
.dp-logo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.dp-img { width: 120px; height: 90px; border-radius: 10px; border: 1px dashed var(--line); display: grid; place-items: center; background: #fff; overflow: hidden; }
.dp-img img { max-width: 100%; max-height: 100%; object-fit: contain; } .dp-img span { color: #888; font-size: .8rem; }
.dp-ver { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.dp-ver input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: inherit; font: inherit; width: 200px; }
/* Copa */
.copa .cp-head, .eday .ed-head { display: flex; gap: 12px; align-items: center; }
.cp-cup, .ed-head > span { font-size: 2.6rem; filter: drop-shadow(0 0 12px rgba(255,209,102,.6)); }
.cp-win { background: linear-gradient(90deg, #ffd166, #f9a03f); color: #241a00; font-weight: 700; padding: 10px 14px; border-radius: 12px; text-align: center; }
.cp-mine { background: var(--glass); padding: 10px 12px; border-radius: 12px; }
.cp-tbl { display: grid; gap: 6px; margin-top: 10px; }
.cp-row { display: grid; grid-template-columns: 46px minmax(90px, 1.2fr) 2fr 44px; grid-template-areas: 'pos name bar sc' 'pos sm sm sm'; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--glass); }
.cp-row .cp-pos { grid-area: pos; font-size: 1.3rem; text-align: center; } .cp-row b { grid-area: name; } .cp-row small { grid-area: sm; color: var(--ink3); }
.cp-row .cp-bar { grid-area: bar; height: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; } .cp-row .cp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pri), var(--acc)); }
.cp-row .cp-sc { grid-area: sc; font-family: var(--font); font-weight: 700; text-align: right; }
.cp-row.me { outline: 2px solid var(--acc); } .cp-row.lead { background: linear-gradient(90deg, rgba(255,209,102,.25), rgba(255,255,255,.05)); } .cp-row.nq { opacity: .6; }
.w-copa, .w-eday { border: 1px solid rgba(255,209,102,.6); background: rgba(10,6,30,.85); color: #fff; padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: var(--font); }
.w-copa.lead { background: linear-gradient(90deg, #ffd166, #f9a03f); color: #241a00; box-shadow: 0 0 16px rgba(255,209,102,.6); }
.w-eday { background: linear-gradient(90deg, #ff2bd6, #ffd60a); color: #0b0620; animation: pulse 1.6s infinite; }
@media (max-width: 760px) { .w-copa span, .w-eday span { display: none; } }
/* proyector */
.projector { position: fixed; inset: 0; z-index: 3000; background: radial-gradient(1200px 700px at 20% -10%, #4b2fb0, transparent 60%), #0b0620; color: #fff; padding: 28px 40px; overflow: auto; }
.pj-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pj-head h1 { font-family: var(--font); font-size: clamp(1.6rem, 3.4vw, 3rem); } .pj-tools { display: flex; gap: 10px; align-items: center; } .pj-tools span { color: var(--ink3); }
.pj-list { display: grid; gap: 12px; margin-top: 24px; }
.pj-row { display: grid; grid-template-columns: 80px minmax(120px, 1fr) 3fr 90px; grid-template-areas: 'pos name bar sc' 'pos sm sm sm'; gap: 2px 18px; align-items: center; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.07); font-size: clamp(1rem, 1.8vw, 1.5rem); }
.pj-row .pj-pos { grid-area: pos; font-size: 2.2rem; text-align: center; } .pj-row b { grid-area: name; font-family: var(--font); } .pj-row small { grid-area: sm; color: var(--ink3); font-size: .7em; }
.pj-row .pj-bar { grid-area: bar; height: 22px; border-radius: 12px; background: rgba(255,255,255,.08); overflow: hidden; } .pj-row .pj-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7b61ff, #00e5ff, #ffd166); transition: width .8s ease; }
.pj-row .pj-sc { grid-area: sc; font-family: var(--font); font-weight: 800; font-size: 1.4em; text-align: right; color: var(--acc); }
.pj-row.lead { background: linear-gradient(90deg, rgba(255,209,102,.3), rgba(255,255,255,.06)); box-shadow: 0 0 30px rgba(255,209,102,.25); } .pj-row.nq { opacity: .55; }
.pj-top { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .pj-top h3 { width: 100%; }
.pj-top span { background: rgba(255,255,255,.08); padding: 8px 14px; border-radius: 14px; font-size: 1.1rem; } .pj-top b { color: var(--acc); margin-left: 6px; }
/* English Day */
.ed-timer { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; margin: 6px 0 10px; } .ed-timer i { display: block; height: 100%; background: linear-gradient(90deg, #ff2bd6, #ffd60a); }
.ed-score { font-family: var(--font); color: var(--acc); font-weight: 700; }
/* familias */
.fam textarea { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: inherit; font: inherit; line-height: 1.45; resize: vertical; }
.fam select { padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); font: inherit; } .fam select option { color: #111; }
.fam-list { display: grid; gap: 6px; margin-top: 10px; max-height: 55vh; overflow: auto; }
.fam-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--glass); } .fam-row .row { margin: 0; } .fam-row small { display: block; color: var(--ink3); }
/* Speak Up! */
.speak-intro, .speak-q { text-align: center; max-width: 640px; margin: 0 auto; }
.speak-intro .si-ic { font-size: 3.4rem; }
.sq-mode { display: inline-block; font-size: .8rem; padding: 4px 10px; border-radius: 12px; background: var(--glass2); margin-bottom: 8px; }
.sq-em { font-size: 3.6rem; } .sq-t { font-family: var(--font); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; margin: 6px 0; } .sq-es { margin-top: 0; }
.sq-meter { height: 12px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; margin: 14px auto 6px; max-width: 420px; }
.sq-meter i { display: block; height: 100%; width: 0; transition: width .5s ease; background: var(--pri); } .sq-meter i.ok { background: var(--ok); } .sq-meter i.mid { background: var(--acc); } .sq-meter i.low { background: var(--bad); }
.sq-heard { min-height: 1.5em; color: var(--ink2); }
#sq-talk.rec, #sq-rec.rec { background: var(--bad); animation: pulse 1s infinite; }

/* =================== v0.11: PIAR, clase autónoma, modo clase, comparativo =================== */
html.a11y-big { font-size: 118%; }
html.a11y-big .opt, html.a11y-big .ms-opt, html.a11y-big .dg-q, html.a11y-big .ms-prompt { font-size: 1.12em; }
html.a11y-contrast { --ink: #ffffff; --ink2: #ffffff; --ink3: #f1f1f1; --glass: #000000; --glass2: #1a1a1a; --line: #ffd60a; }
html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast .card, html.a11y-contrast .modal, html.a11y-contrast .game-body, html.a11y-contrast .ms-card, html.a11y-contrast .hud, html.a11y-contrast .dock { background: #000 !important; border: 2px solid #ffd60a !important; }
html.a11y-contrast .opt, html.a11y-contrast .ms-opt, html.a11y-contrast .btn { background: #000 !important; color: #fff !important; border: 2px solid #ffd60a !important; }
html.a11y-contrast .opt.right, html.a11y-contrast .ms-opt.right { background: #006400 !important; } html.a11y-contrast .opt.wrong, html.a11y-contrast .ms-opt.wrong { background: #8b0000 !important; }
.a11y-read { position: fixed; right: 14px; bottom: 92px; z-index: 2600; border: 2px solid #ffd60a; background: #14213d; color: #fff; border-radius: 30px; padding: 10px 16px; font: 700 1rem var(--font); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.piar .seg { margin: 6px 0 10px; } .piar .pi-note { display: block; margin-top: 10px; } .piar textarea { width: 100%; margin-top: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: inherit; font: inherit; }
.sd-piar { background: rgba(17,138,178,.18); border: 1px solid rgba(17,138,178,.5); padding: 8px 12px; border-radius: 12px; margin: 8px 0; }
/* tarea */
.task-card h3, .cm-card h3 { margin: 0; }
.task-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; margin-top: 8px; border-radius: 12px; background: var(--glass); } .task-row .row { margin: 0; } .task-row small { color: var(--ink3); }
@media (max-width: 760px) { .task-row { grid-template-columns: 1fr; } }
.task-msg { font-style: italic; background: var(--glass); padding: 8px 12px; border-radius: 10px; }
.task-steps { display: grid; gap: 8px; margin: 10px 0; }
.task-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--glass); }
.task-step .ts-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pri); font-weight: 700; } .task-step.done .ts-n { background: var(--ok); }
.task-step .ts-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; margin: 4px 0; } .task-step .ts-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pri), var(--ok)); }
.task-form .gm-sw select, .task-form .gm-sw input[type=number] { margin: 0 4px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); width: auto; } .task-form select option { color: #111; }
.w-task { border: 1px solid rgba(46,196,182,.7); background: rgba(10,6,30,.85); color: #fff; padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: var(--font); } .w-task.ok { background: var(--ok); color: #04201c; }
@media (max-width: 760px) { .w-task span { display: none; } }
/* modo clase */
.cm-main { display: grid; grid-template-columns: 1fr 280px; gap: 24px; margin-top: 18px; }
@media (max-width: 900px) { .cm-main { grid-template-columns: 1fr; } }
.cm-stage { text-align: center; }
.cm-turn { display: inline-block; padding: 10px 24px; border-radius: 30px; background: var(--tc); color: #0b0620; font: 700 clamp(1.1rem, 2.2vw, 1.8rem) var(--font); margin-bottom: 10px; }
.cm-em { font-size: clamp(3rem, 8vw, 6rem); } .cm-q { font: 600 clamp(1.5rem, 3.4vw, 3rem) var(--font); margin: 10px 0 16px; line-height: 1.25; }
.cm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1100px; margin: 0 auto; }
.cm-opt { padding: 18px 20px; border-radius: 18px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff; font: 600 clamp(1.05rem, 2vw, 1.7rem) var(--font); cursor: pointer; text-align: left; transition: transform .15s; }
.cm-opt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--acc); } .cm-opt kbd { background: var(--acc); color: #0b0620; border-radius: 8px; padding: 2px 10px; margin-right: 8px; font-family: var(--font); }
.cm-opt.right { background: #06d6a0; color: #032; border-color: #06d6a0; } .cm-opt.wrong { background: #ef476f; border-color: #ef476f; }
.cm-after { margin-top: 16px; font-size: clamp(1rem, 1.8vw, 1.5rem); min-height: 3em; }
.cm-board { display: grid; gap: 10px; align-content: start; }
.cm-team { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.07); border-left: 8px solid var(--tc); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.cm-team span { font: 800 1.5em var(--font); color: var(--acc); } .cm-team.turn { box-shadow: 0 0 0 3px var(--tc), 0 0 26px var(--tc); }
.cm-podium { display: flex; justify-content: center; align-items: flex-end; gap: 22px; margin-top: 50px; }
.cm-pod { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; width: min(260px, 28vw); border-radius: 20px 20px 0 0; background: linear-gradient(180deg, var(--tc), rgba(255,255,255,.05)); padding: 18px; font-size: clamp(1rem, 1.8vw, 1.6rem); }
.cm-pod span { font-size: 3em; } .cm-pod b { font-family: var(--font); text-align: center; } .cm-pod em { font-style: normal; color: #fff; }
.cm-pod.p0 { height: 340px; order: 2; } .cm-pod.p1 { height: 260px; order: 1; } .cm-pod.p2 { height: 200px; order: 3; }
/* comparativo */
.co .kpis { margin: 12px 0; } .co section { margin-top: 14px; }
.co-tbl td { white-space: nowrap; } .co-tbl td.co-best { color: var(--acc); font-weight: 700; }
.co-bar { display: inline-block; width: 46px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); margin-right: 6px; vertical-align: middle; overflow: hidden; }
.co-bar i { display: block; height: 100%; background: var(--ok); } .co-bar.neg i { background: var(--bad); }
.co select { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); font: inherit; } .co select option { color: #111; }
/* v0.13 · instituciones, grupos y accesos */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .span4 { grid-column: 1 / -1; }
@media (max-width: 760px) { .grid4 { grid-template-columns: 1fr 1fr; } }
.orgs textarea, .modal textarea#ie-sedes { width: 100%; border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid var(--line); font: inherit; }
.orgs select option, .modal select option { color: #111; }
.orgs .grid2 > *, .orgs .grid4 > *, .modal .grid2 > *, .modal .grid4 > * { min-width: 0; } .orgs input, .orgs select, .modal .grp-form input, .modal .grp-form select { width: 100%; box-sizing: border-box; }
.og-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.og-chip { padding: 6px 12px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid var(--line); font-size: .9rem; }
input.locked, select.locked { opacity: .75; background: rgba(255,255,255,.03) !important; }
.modal .row.center { flex-wrap: wrap; }

/* =====================================================================
   v0.14 · Jugabilidad en celular y tablet
   ===================================================================== */
body:has(.play) { overscroll-behavior: none; }
.play-main.world { touch-action: none; -webkit-user-select: none; user-select: none; }
.play-main.world.cam-drag canvas { cursor: grabbing; }
@media (pointer: fine) { .play-main.world #w3-host canvas { cursor: grab; } }

/* --- 1. Ventanas que se cortaban: centrado sin transform (la animación pop-in lo anulaba) --- */
.w-invite { left: 0; right: 0; margin-inline: auto; transform: none; max-width: calc(100% - 24px); }
.w-together { left: 0; right: 0; margin-inline: auto; transform: none; width: max-content; max-width: calc(100% - 24px); white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; }
.w-together .btn { flex: none; }
.w-dialog { max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain; }
.w-quest { max-height: calc(100% - 140px); overflow-y: auto; }
.w-chat { max-height: calc(100% - 24px); }
.modal-wrap { padding: max(12px, 4vh) max(10px, env(safe-area-inset-right)) max(12px, 4vh) max(10px, env(safe-area-inset-left)); }
.modal { max-width: min(480px, 100%); }
.modal.wide { max-width: min(860px, 100%); }
#toasts { top: max(14px, env(safe-area-inset-top)); }

/* --- 2. Barra superior de la ciudad: una sola fila que no invade el minimapa --- */
.w-top { left: max(10px, env(safe-area-inset-left)); right: 150px; flex-wrap: wrap; row-gap: 6px; pointer-events: none; }
.w-top > * { pointer-events: auto; flex: none; }
.w-zone { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.w-mm { right: max(10px, env(safe-area-inset-right)); }
.w-online .wo-l { white-space: nowrap; }

/* --- 3. Menú plegable de herramientas (☰) --- */
.w-rail { position: absolute; right: max(10px, env(safe-area-inset-right)); top: 140px; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; }
.w-rail-tog { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(0,229,255,.6); background: rgba(10,6,30,.88); color: #fff; font-size: 1.3rem; cursor: pointer; box-shadow: 0 0 16px rgba(0,229,255,.3); }
.w-rail.open .w-rail-tog { background: rgba(0,229,255,.25); }
.w-rail-panel { display: none; }
.w-rail.open .w-rail-panel { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 6px; position: absolute; right: 54px; top: 0; width: max-content; max-width: min(340px, calc(100vw - 190px)); max-height: calc(100vh - 40px); overflow-y: auto; background: rgba(10,6,30,.94); border: 1.5px solid rgba(0,229,255,.45); border-radius: 16px; padding: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.w-rail-panel .w-emotes.in-rail { position: static; transform: none; flex-direction: row; flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-end; }
.w-rail-panel .w-emotes.in-rail.hidden { display: none; }
.w-rail-panel .w-emotes button { width: 44px; height: 44px; font-size: 1.3rem; }
.w-rail-panel .w-map-btn, .w-rail-panel .w-qlog-btn, .w-rail-panel .w-cam, .w-rail-panel .w-gfx { position: static !important; min-width: 0; padding: 8px 12px; }
.w-rail-panel .w-map-btn span, .w-rail-panel .w-qlog-btn span, .w-rail-panel .w-cam span, .w-rail-panel .w-gfx span { display: inline !important; }
.w-cam, .w-gfx { display: flex; align-items: center; gap: 6px; border-radius: 20px; border: 1.5px solid rgba(0,229,255,.5); background: rgba(10,6,30,.85); color: #fff; font-family: var(--game, inherit); font-weight: 700; font-size: .85rem; cursor: pointer; }
/* pantallas grandes: columna siempre desplegada */
.w-rail.fixed .w-rail-tog { display: none; }
.w-rail.fixed .w-rail-panel { display: flex; flex-direction: column; align-items: flex-end; position: static; background: none; border: 0; box-shadow: none; padding: 0; max-width: none; overflow: visible; }
.w-rail.fixed .w-emotes.in-rail { flex-direction: column; width: auto; align-items: flex-end; }
.w-rail.fixed .w-emotes button { width: 42px; height: 42px; }

/* pista de cámara */
.w-camhint { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 40px); top: 46%; z-index: 6; background: rgba(10,6,30,.85); border: 1.5px solid var(--neon, #00e5ff); color: #fff; padding: 8px 14px; border-radius: 18px; font-size: .9rem; text-align: center; pointer-events: none; animation: fadeOut 1s 6s forwards; }

/* --- 4. Aviso «Gira tu teléfono» (horizontal obligatoria en táctiles) --- */
.rotate-gate { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
  .play-main.world .rotate-gate { display: flex; position: absolute; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 35%, #2b1f63, #0a061e 70%); }
  .play-main.world .rotate-gate h2 { margin: 0; font-size: 1.7rem; }
  .play-main.world .rotate-gate p { margin: 0; max-width: 320px; }
  .play-main.world > :not(.rotate-gate) { visibility: hidden; }
}
.rg-phone { width: 74px; height: 120px; border: 4px solid #fff; border-radius: 16px; display: grid; place-items: center; font-size: 2rem; animation: rgTurn 2.2s ease-in-out infinite; box-shadow: 0 0 24px rgba(0,229,255,.5); }
.rg-phone span { opacity: .0; }
@keyframes rgTurn { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* --- 5. Celular en horizontal (altura corta): menú lateral, HUD compacto, controles compactos --- */
@media (orientation: landscape) and (max-height: 540px) {
  .play { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .play > .hud { grid-column: 2; grid-row: 1; padding: 4px 10px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-right: max(10px, env(safe-area-inset-right)); gap: 8px; }
  .play > .play-main { grid-column: 2; grid-row: 2; min-height: 0; padding: 10px max(10px, env(safe-area-inset-right)) 10px 10px; }
  .play > .play-main.world { padding: 0; }
  .play > .dock { grid-column: 1; grid-row: 1 / 3; flex-direction: column; justify-content: space-evenly; width: calc(66px + env(safe-area-inset-left)); padding: env(safe-area-inset-top) 4px env(safe-area-inset-bottom) calc(4px + env(safe-area-inset-left)); border-top: 0; border-right: 1px solid rgba(0,229,255,.25); background: linear-gradient(90deg, rgba(10,6,30,.98), rgba(10,6,30,.9)); }
  .dock button { min-width: 0; padding: 3px 2px; gap: 0; }
  .dock button span { font-size: 1.2rem; }
  .dock button small { font-size: .5rem; letter-spacing: .3px; }
  .dock button.on { box-shadow: inset 3px 0 0 var(--neon); }
  .hud-av canvas { width: 34px; height: 37px; }
  .hud-id small { display: none; }
  .xpbar { width: 110px; }
  .hud-stats { gap: 8px; font-size: .9rem; }
  .hud .btn.icon { width: 34px; height: 34px; padding: 0; }
  /* ciudad */
  .w-top { top: 6px; right: 112px; gap: 5px; }
  .w-zone, .w-online, .w-clock, .w-quality, .w-mod, .w-copa, .w-eday, .w-task, .w-event { font-size: .72rem; padding: 4px 9px; }
  .w-zone { max-width: 150px; }
  .w-clock, .w-quality { display: none; }
  .w-online .wo-l, .w-mod span, .w-copa span, .w-eday span, .w-task span { display: none; }
  .seg button { padding: 4px 9px; font-size: .8rem; }
  .w-mm { top: 6px; width: 92px; height: 92px; }
  .w-rail-tog { width: 40px; height: 40px; font-size: 1.1rem; }
  .w-rail.open .w-rail-panel { right: 48px; max-height: calc(100vh - 150px); }
  .w-joy { left: max(12px, env(safe-area-inset-left)); bottom: 12px; width: 104px; height: 104px; }
  .w-joy .knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .w-act { right: max(14px, env(safe-area-inset-right)); bottom: 14px; width: 64px; height: 64px; font-size: 1.7rem; }
  .w-chat-btn, .w-pet-btn { left: auto; right: calc(88px + env(safe-area-inset-right)); padding: 7px 11px; }
  .w-chat-btn { bottom: 14px; } .w-pet-btn { bottom: 60px; }
  .w-chat-btn span, .w-pet-btn span { display: none; }
  .w-prompt { bottom: 14px !important; max-width: calc(100% - 300px); white-space: normal; text-align: center; padding: 8px 14px; font-size: .9rem; }
  .w-together { bottom: 66px; max-width: calc(100% - 260px); font-size: .82rem; padding: 4px 6px 4px 12px; }
  .w-invite { top: 50px; width: min(400px, calc(100% - 24px)); padding: 8px 12px; }
  .w-invite .wi-ic { font-size: 1.7rem; }
  .w-invite b { font-size: .98rem; margin-bottom: 4px; }
  .w-quest { top: 44px; left: max(10px, env(safe-area-inset-left)); width: min(290px, 42%); padding: 6px 9px; max-height: calc(100% - 170px); }
  .w-quest p { font-size: .8rem; margin: 3px 0; } .w-quest .wq-es { font-size: .72rem; }
  .w-dialog { bottom: 8px; width: min(640px, calc(100% - 16px)); max-height: calc(100% - 16px); }
  .w-chat, .w-pet { bottom: 8px; max-height: calc(100% - 16px); }
  .w-help { display: none; }
  .w-camhint { top: 38%; font-size: .8rem; }
  /* modales y secciones */
  .modal-wrap { padding-top: 8px; padding-bottom: 8px; }
  .modal { padding: 16px; }
}
/* pantallas táctiles grandes (tablet): controles un poco más grandes y separados */
@media (pointer: coarse) and (min-width: 900px) and (min-height: 700px) {
  .w-joy { width: 140px; height: 140px; left: 24px; bottom: 24px; }
  .w-act { width: 84px; height: 84px; right: 28px; bottom: 28px; }
  .w-chat-btn { bottom: 184px; left: 24px; } .w-pet-btn { bottom: 232px; left: 24px; }
}
@media (max-width: 560px) and (orientation: portrait) { .w-top { right: 10px; } }
.w-invite .btn.ghost { color: #1b1442; border: 1.5px solid #7b5cff; background: #f1edff; }
@media (orientation: landscape) and (max-height: 540px) { .w-chat-btn span { display: inline; } }
/* v0.14.1: minimapa tocable */
.w-mm.tap { cursor: pointer; touch-action: manipulation; }
.w-mm.tap:active { transform: scale(.96); }

/* ===== v0.16 · Seguridad: verificación en 2 pasos y panel ===== */
.sec-wrap { z-index: 10050; }
.sec-modal { max-width: 460px; }
.sec-modal h3 { margin-top: 0; }
.sec-steps { margin: 8px 0 6px; padding-left: 20px; line-height: 1.45; }
.sec-qr { width: 200px; height: 200px; margin: 8px auto; background: #fff; border-radius: 12px; padding: 6px; }
.sec-qr svg { width: 100%; height: 100%; display: block; }
.sec-key { display: inline-block; background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 8px; letter-spacing: 1px; font-size: .95rem; user-select: all; word-break: break-all; }
.sec-code { font-size: 1.5rem; letter-spacing: 6px; text-align: center; }
.sec-err { color: #ff8fa3; font-weight: 600; margin: 6px 0; }
.sec-rc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.sec-rc code { background: rgba(0,0,0,.35); border: 1px dashed rgba(0,229,255,.4); border-radius: 8px; padding: 8px; text-align: center; font-size: 1.05rem; letter-spacing: 1px; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.sec-panel table { width: 100%; }
.sec-panel td small { opacity: .7; }
@media (max-height: 540px) { .sec-qr { width: 150px; height: 150px; } .sec-modal { max-height: 92vh; overflow: auto; } }
.demo-note { background: rgba(255, 209, 102, .14); border: 1px dashed rgba(255, 209, 102, .6); border-radius: 12px; padding: 8px 10px; }

/* ===== v0.17 · Entrenador de pronunciación con IA local ===== */
.si-ai { background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.35); border-radius: 14px; padding: 10px 12px; margin: 10px 0; text-align: left; }
.sq-meter.big { height: 14px; }
.sq-words { font-size: 1.35rem; line-height: 1.8; margin: 8px 0 2px; }
.sq-words .cw { padding: 1px 6px; border-radius: 8px; font-weight: 700; }
.sq-words .cw.ok { background: rgba(6,214,160,.22); color: #b9ffe9; }
.sq-words .cw.near { background: rgba(255,209,102,.25); color: #ffe8a8; }
.sq-words .cw.miss { background: rgba(239,71,111,.25); color: #ffc2cf; text-decoration: underline wavy rgba(239,71,111,.7); }
.legal-tag { display: block; margin-top: 6px; font-size: .68rem; opacity: .75; line-height: 1.35; }
.legal-tag a { color: inherit; text-decoration: underline; }

/* ===================== v0.20 · Docente en la ciudad, bancos y cuestionario en vivo ===================== */
.wc-msg.tc span { background: linear-gradient(90deg, rgba(184,144,31,.45), rgba(255,209,102,.3)); border: 1px solid #ffd166; }
.w-eval { border-color: rgba(255,209,102,.8); animation: pulse 2s infinite; }
.tcity { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; background: var(--bg0); }
.tcity.side-off { grid-template-columns: 1fr 0; } .tcity.side-off .tc-side { display: none; }
.tc-bar { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: rgba(10,6,30,.92); border-bottom: 1px solid rgba(255,209,102,.4); }
.tc-bar b { color: #ffd166; font-family: var(--font); } .tc-bar .hint { margin: 0; }
.tc-stage { position: relative; min-height: 0; height: 100%; overflow: hidden; }
.tc-side { overflow: auto; background: rgba(20,15,51,.96); border-left: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tc-sh { display: flex; justify-content: space-between; align-items: center; font-family: var(--font); }
.tc-plist { display: flex; flex-direction: column; gap: 6px; }
.tc-p { display: flex; justify-content: space-between; gap: 6px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.tc-p.on { border-color: #ffd166; background: rgba(255,209,102,.12); }
.tc-p small { display: block; font-size: .78rem; } .tc-p .hint { margin: 2px 0 0; font-size: .74rem; }
.tc-pb { display: flex; flex-direction: column; gap: 4px; } .tc-pb .btn { padding: 4px 6px; }
.tc-follow { background: rgba(255,209,102,.14); border: 1px solid #ffd166; border-radius: 12px; padding: 8px; font-size: .9rem; }
.tc-alert { background: rgba(239,71,111,.15); border: 1px solid var(--bad); border-radius: 12px; padding: 8px; font-size: .86rem; display: flex; flex-direction: column; gap: 4px; }
.tc-alert small { display: block; } .tc-arow { border-top: 1px solid var(--line); padding-top: 6px; } .tc-fm { display: block; opacity: .85; }
.tc-off { font-size: .82rem; }
@media (max-width: 860px) { .tcity { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .tc-side { max-height: 38vh; border-left: 0; border-top: 1px solid var(--line); } }
/* estudiante: ventana del cuestionario en vivo (parte superior) */
.lv-ov { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1200; width: min(760px, calc(100vw - 16px)); animation: lvdown .35s ease-out; }
@keyframes lvdown { from { transform: translate(-50%, -120%); } to { transform: translate(-50%, 0); } }
.lv-card { background: linear-gradient(160deg, rgba(43,31,99,.98), rgba(20,14,60,.98)); border: 2px solid #ffd166; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 12px 14px; max-height: 78vh; overflow: auto; }
.lv-card.end { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lv-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .9rem; }
.lv-top b { color: #ffd166; } .lv-t { font-weight: 700; } .lv-t.danger { color: var(--bad); animation: pulse 1s infinite; }
.lv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.lv-opts .opt { text-align: left; font-size: 1rem; padding: 10px 12px; } .lv-opts .opt.chosen { border-color: #ffd166; background: rgba(255,209,102,.2); }
.lv-msg { margin-top: 8px; font-weight: 600; text-align: center; }
.lv-ov.min .lv-body { display: none; }
@media (max-width: 600px) { .lv-opts { grid-template-columns: 1fr; } }
.qb-read { background: rgba(255,255,255,.07); border-left: 4px solid #ffd166; border-radius: 10px; padding: 8px 12px; margin: 6px 0; white-space: pre-wrap; font-size: .95rem; }
.qb-img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin: 6px auto; background: #fff; }
.qb-stem { font-size: 1.06rem; font-weight: 600; margin: 6px 0; }
.qb-opts { display: flex; flex-direction: column; gap: 8px; } .qb-opts .opt.chosen { border-color: #ffd166; background: rgba(255,209,102,.2); }
.qb-rev { border-left: 4px solid var(--ok); padding: 6px 10px; margin: 6px 0; background: rgba(255,255,255,.05); border-radius: 8px; } .qb-rev.bad { border-color: var(--bad); }
.qb-card h3 { margin: 0; } .qe-q { margin: 10px 0; } .qe-q textarea, .qe-q input[data-o] { width: 100%; }
.qe-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .qe-opt { display: flex; gap: 6px; align-items: center; } .qe-opt b { width: 18px; }
.qe-thumb { max-height: 80px; border-radius: 8px; background: #fff; } .chk { display: flex; gap: 6px; align-items: center; font-size: .92rem; }
@media (max-width: 600px) { .qe-opts { grid-template-columns: 1fr; } }
/* docente: consola del cuestionario en vivo (proyectable) */
.lv-console { position: fixed; inset: 0; z-index: 1100; background: radial-gradient(900px 500px at 20% 0%, #4b2fb0, #140f33 70%); display: flex; flex-direction: column; padding: 16px 20px; overflow: auto; }
.lvc-head { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lvc-head small { color: #ffd166; font-weight: 700; } .lvc-head h2 { margin: 0; }
.lvc-meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font); font-size: 1.05rem; }
.lvc-timer { color: #ffd166; font-weight: 700; } .lvc-timer.danger { color: var(--bad); }
.lvc-body { flex: 1; max-width: 1000px; width: 100%; margin: 14px auto; } .lvc-q { font-size: 1.15rem; }
.lvc-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lvc-bar { position: relative; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; overflow: hidden; }
.lvc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(123,97,255,.35); z-index: 0; transition: width .4s; }
.lvc-bar b, .lvc-bar span, .lvc-bar em { position: relative; z-index: 1; } .lvc-bar em { margin-left: auto; font-style: normal; font-weight: 700; }
.lvc-bar.ok { border-color: var(--ok); } .lvc-bar.ok i { background: rgba(46,196,182,.45); }
.lvc-foot { display: flex; justify-content: center; gap: 10px; padding: 8px; }
.lvc-lobby { text-align: center; max-width: 640px; margin: 30px auto; } .lvc-big { font-size: 64px; }
.lvc-sum { margin-top: 10px; font-size: 1.05rem; }
.lvc-rank { display: flex; flex-direction: column; gap: 6px; margin: 12px auto; max-width: 520px; }
.lvc-rank div { display: flex; gap: 10px; align-items: center; background: var(--glass); border-radius: 12px; padding: 8px 12px; } .lvc-rank em { margin-left: auto; font-style: normal; color: var(--ink2); }
/* v0.20.3 · acciones en bloque y avisos de grupo */
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: 6px; z-index: 5; border: 2px solid var(--pri); }
.bulk b { margin-right: 6px; }
#st-tbl th.ck, #st-tbl td.ck { width: 34px; text-align: center; }
#st-tbl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--pri); cursor: pointer; }
.og-warn { margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 196, 0, .12); border: 1px solid rgba(255, 196, 0, .45); gap: 10px; }
.node .n-tag.rec { background: #ffd166; color: #2b2d42; }
/* v0.20.4 · elegir personaje (masculino / femenino) */
.av-editor { position: relative; }
.av-choose { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(11, 6, 32, .82); border-radius: 18px; backdrop-filter: blur(3px); }
.av-choose-card { text-align: center; padding: 22px; }
.av-choose-card h3 { margin: 0 0 14px; }
.av-choose-card .btn.big { min-width: 150px; min-height: 150px; font-size: 1.15rem; line-height: 1.5; margin: 8px; }
.av-choose-card .btn.big:first-of-type { background: linear-gradient(135deg, #118ab2, #3a6ea5); }
.av-choose-card .btn.big:last-of-type { background: linear-gradient(135deg, #ff6fb5, #9b5de5); }
.av-body .pill.on { outline: 2px solid var(--acc); }
/* v0.21 · editor de bancos: pasos, cascada de tipos, importación y calificación */
.qb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.qb-steps > div { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 10px; font-size: .9rem; }
.qb-steps > div > b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pri); color: #fff; }
.qb-steps.mini { grid-template-columns: repeat(3, 1fr); } .qb-steps.mini > div { padding: 6px 8px; }
.qb-filters { display: flex; flex-direction: column; gap: 8px; } .qb-tags { display: flex; flex-wrap: wrap; gap: 6px; } .qb-tags.sm { margin-top: 6px; }
.qb-tag { font-size: .78rem; background: rgba(255,209,102,.16); border: 1px solid rgba(255,209,102,.45); border-radius: 999px; padding: 2px 9px; }
.qe-kind { display: flex; align-items: center; gap: 8px; font-weight: 700; } .qe-kind select { min-width: 250px; font-weight: 600; }
.qe-q.k-tf { border-left: 4px solid #06d6a0; } .qe-q.k-gap { border-left: 4px solid #ffd166; } .qe-q.k-open { border-left: 4px solid #ff6fb5; } .qe-q.k-mc { border-left: 4px solid #7b61ff; }
.qe-khelp { margin: 4px 0 6px; } .qe-tf { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.qe-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; padding: 10px; border: 1.5px dashed rgba(255,255,255,.25); border-radius: 12px; } .qe-add span { font-weight: 700; margin-right: 4px; }
.qe-tools { gap: 6px; margin: 8px 0; } .qe-tools a.btn { text-decoration: none; }
.qb-gap { display: inline-block; min-width: 70px; border-bottom: 2.5px solid #ffd166; margin: 0 3px; color: transparent; }
.qb-write { display: flex; gap: 8px; align-items: stretch; } .qb-write.col { flex-direction: column; } .qb-write .qb-in { flex: 1; font-size: 1.05rem; padding: 10px 12px; border-radius: 12px; }
.qb-opts.tf { flex-direction: row; } .qb-opts.tf .opt { flex: 1; text-align: center; font-size: 1.05rem; }
.qb-rev.pend { border-left-color: #ffd166; }
.qb-errs { background: rgba(239,71,111,.12); border: 1px solid rgba(239,71,111,.4); border-radius: 12px; padding: 8px 12px; max-height: 40vh; overflow: auto; }
.qb-pick details { margin: 6px 0; padding: 6px 10px; background: rgba(255,255,255,.04); border-radius: 10px; } .qb-pick .chk { margin: 4px 0; }
.qb-grade .card { margin: 8px 0; } .qg-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0; } .qg-row p { margin: 4px 0; white-space: pre-wrap; }
.qb-help li { margin: 6px 0; line-height: 1.45; }
.lvc-txt .lvc-bar { grid-template-columns: 1fr auto; } .lvc-bar.bad { opacity: .65; }
@media (max-width: 760px) { .qb-steps { grid-template-columns: 1fr 1fr; } .qe-kind select { min-width: 0; } }
/* v0.21 · campos del editor de bancos con el mismo estilo de los formularios */
.qb-ed label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 600; margin-top: 6px; }
.qb-ed label.chk, .qb-ed .qe-opt, .qb-ed .qe-kind { flex-direction: row; align-items: center; }
.qb-ed input:not([type=radio]):not([type=checkbox]):not([type=file]), .qb-ed select, .qb-ed textarea, .qb-write .qb-in { font: inherit; font-weight: 400; color: var(--ink); background: rgba(255,255,255,.1); border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; outline: none; min-width: 0; }
.qb-ed select option { color: #111; }
.qb-ed input:focus, .qb-ed select:focus, .qb-ed textarea:focus, .qb-write .qb-in:focus { border-color: var(--pri2); background: rgba(255,255,255,.14); }
.qb-ed textarea { resize: vertical; width: 100%; }
.qb-ed .qe-opt input:not([type=radio]) { flex: 1; }
.qb-ed details summary { cursor: pointer; font-weight: 700; color: var(--acc); margin: 4px 0; }
.qb-steps > div > span { line-height: 1.35; } .qb-steps > div > span b { font-weight: 800; color: var(--acc); }
/* v0.22 · los avisos y confirmaciones quedan por encima de la consola en vivo; confirmación propia de la consola */
.modal-wrap { z-index: 1250; } .lv-ov { z-index: 1400; }
.lvc-confirm { position: fixed; inset: 0; z-index: 1300; background: rgba(8,5,25,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lvc-confirm.hidden { display: none; } .lvc-confirm .card { max-width: 520px; width: 100%; } .lvc-confirm .col { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lvc-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; } .lvc-foot .btn.big { flex: 1 1 320px; }
.lv-resume { margin: 8px 0; border: 1.5px solid var(--acc); } .lv-resume .row { margin-top: 8px; gap: 8px; }

/* v0.22.3 · prueba en vivo en el celular: la ventana cabe en la pantalla visible aunque el teclado esté abierto */
.lv-ov { max-height: calc(100dvh - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lv-ov .qb-in { font-size: max(16px, 1em); }
@media (max-height: 520px) { .lv-ov { top: 4px; max-height: calc(100dvh - 8px); } .lv-ov .lv-top { position: sticky; top: -12px; z-index: 2; background: #2b1f63; padding-top: 6px; } }

/* v0.22.4 · respuesta correcta visible solo para la docente */
.lvc-peek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.lvc-keytxt { background: rgba(46,204,113,.16); border: 1px dashed #2ecc71; color: #b8f5cf; border-radius: 10px; padding: 6px 10px; }
.lvc-bar.key { outline: 2px dashed #2ecc71; outline-offset: -2px; }
.lvc-bar.key b::after { content: ' ✔'; color: #2ecc71; }