:root {
  --text: #ffffff;
  --shadow: #3f3f3f;
  --panel: #d9d9d9;
  --panel-text: #1f1f1f;
  --green: #4f8a2a;
  --gold: #ffd83a;
  --dia: #5decf5;
  --mcd: #2f6fd6;
  --mcm: #d6862f;
  --pixel: 'Press Start 2P', monospace;
  --body: 'Lexend', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: #3b2a1d;
  background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), var(--dirt);
  background-size: auto, 64px 64px;
  image-rendering: pixelated;
  color: var(--text);
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: .01em;
  overflow-x: hidden;
}
body.explode { animation: explode .6s; }
@keyframes explode { 0%, 100% { filter: none; transform: none; } 20% { filter: brightness(3); transform: translate(6px, -4px); } 40% { transform: translate(-6px, 4px); } 60% { transform: translate(4px, 2px); } }

#app { max-width: 560px; margin: 0 auto; padding: 12px 16px 48px; }
.screen { display: flex; flex-direction: column; gap: 14px; }
.screen.center { align-items: stretch; text-align: center; padding-top: 4vh; }

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 20px; margin-bottom: 8px; }
b { font-weight: 700; }

.logo { font-family: var(--pixel); font-weight: normal; font-size: clamp(30px, 10vw, 48px); color: #d0d0d0; text-shadow: 4px 4px 0 #3f3f3f; letter-spacing: 2px; }
.logo span { color: var(--dia); text-shadow: 4px 4px 0 #1a6b70; }
.tagline { font-size: 26px; font-weight: 700; margin: 0; text-shadow: 2px 2px 0 #000; }

/* ---------- Botones ---------- */
.btn {
  font-family: var(--body); font-weight: 700; font-size: 22px; color: #fff; text-shadow: 2px 2px 0 var(--shadow);
  background: #7a7a7a; background-image: var(--stone); background-size: 48px;
  border: 3px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.45), inset -3px -4px 0 rgba(0,0,0,.45);
  padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  image-rendering: pixelated; position: relative; min-height: 56px;
}
.btn::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.18); pointer-events: none; }
.btn:hover::before, .btn:focus-visible::before { background: rgba(110, 130, 255, .28); }
.btn:active { transform: translateY(2px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.4); }
.btn:disabled { filter: grayscale(1) brightness(.7); cursor: default; }
.btn.green { background-image: none; background: var(--green); }
.btn.green::before { background: none; }
.btn.green:hover::before { background: rgba(255,255,255,.12); }
.btn.big { font-size: 26px; padding: 14px; min-height: 64px; }
.btn.small { font-size: 18px; padding: 4px 12px; min-height: 44px; }
.btn.danger { background: #6b2020; align-self: center; }
.btn.danger::before { background: none; }

/* Botón 🔊 escuchar */
.say { flex: none; width: 52px; height: 52px; font-size: 26px; border: 3px solid #000; background: #ffe98a; cursor: pointer; box-shadow: inset -3px -3px 0 rgba(0,0,0,.25); border-radius: 0; padding: 0; }
.say:active { transform: translateY(2px); }

/* ---------- Paneles ---------- */
.panel {
  background: var(--panel); color: var(--panel-text);
  border: 3px solid #000; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #666;
  padding: 14px; text-align: left; position: relative;
}
.panel p { margin: 0 0 8px; }
.panel p:last-child { margin-bottom: 0; }
.lbl { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin: 0 0 8px; }
.hint { font-size: 18px; color: #555; margin: 6px 0 12px; }
input {
  width: 100%; font-family: var(--body); font-size: 28px; padding: 8px 12px;
  background: #000; color: #fff; border: 3px solid #a0a0a0; outline: none; border-radius: 0;
}
input:focus { border-color: #fff; }
.code-in { text-transform: uppercase; letter-spacing: 6px; font-weight: 700; }
.invite { background: #d8f0c8; text-align: center; }

.say-panel { display: flex; align-items: center; gap: 12px; }
.say-text { flex: 1; margin: 0; font-size: 22px; font-weight: 500; }

/* ---------- Onboarding ---------- */
.avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.avatar { background: #8b8b8b; border: 3px solid #373737; padding: 8px 4px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--body); color: #fff; }
.avatar small { font-size: 14px; font-weight: 700; text-shadow: 1px 1px 0 #333; }
.avatar .px { width: 100%; max-width: 64px; aspect-ratio: 1; }
.avatar.sel { border-color: #fff; background: var(--green); }
.px { display: block; }

/* ---------- Home ---------- */
.profile { display: flex; align-items: center; gap: 12px; }
.face { width: 72px; height: 72px; padding: 0; border: 3px solid #000; background: none; cursor: pointer; flex: none; }
.face .px { width: 100%; height: 100%; }
.pinfo { flex: 1; min-width: 0; }
.pname { font-weight: 700; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank { font-weight: 700; font-size: 18px; text-shadow: 1px 1px 0 #000; }
.xpbar { height: 14px; background: #1a1a1a; border: 2px solid #000; margin: 4px 0; }
.xpbar i { display: block; height: 100%; background: linear-gradient(#b9f36b, #6fb33f); }
.xptext { font-size: 16px; color: #333; }
.dia-big { display: flex; flex-direction: column; align-items: center; }
.dia-big .icon { width: 40px; }
.dia-big b { font-size: 22px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 14px 8px;
  background: rgba(0,0,0,.55); border: 3px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,.18);
  color: #fff; font-family: var(--body);
}
.tile.wide { grid-column: span 2; flex-direction: row; justify-content: center; gap: 16px; }
.tile:hover, .tile:focus-visible { background: rgba(60, 70, 140, .6); outline: none; }
.tile:active { transform: scale(.97); }
.tile b { font-size: 22px; }
.tile small { font-size: 16px; color: #ccc; }
.tile.done { box-shadow: inset 0 0 0 3px #6fb33f; }
.tblock { width: 72px; height: 72px; background-size: cover; image-rendering: pixelated; border: 3px solid #000; display: grid; place-items: center; font-size: 36px; }
.creeper-b .px { width: 100%; height: 100%; }
.footer-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Topbar / HUD ---------- */
.topbar, .hud { display: flex; align-items: center; gap: 10px; }
.topbar h2 { flex: 1; text-shadow: 2px 2px 0 #000; font-size: 22px; }
.dia-count { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 22px; text-shadow: 2px 2px 0 #000; margin-left: auto; }
.icon { width: 26px; height: auto; }
.hearts { display: flex; gap: 4px; }
.hearts .icon { width: 32px; }
.prog { font-weight: 700; font-size: 20px; text-shadow: 2px 2px 0 #000; }
.streak { align-self: center; font-weight: 700; font-size: 24px; color: var(--gold); text-shadow: 2px 2px 0 #000; animation: pop .4s; }
@keyframes pop { from { transform: scale(1.6); } }
.pbar { height: 14px; background: rgba(0,0,0,.6); border: 3px solid #000; }
.pbar i { display: block; height: 100%; background: linear-gradient(#b9f36b, #6fb33f); transition: width .3s; }

/* ---------- Bloques de números ---------- */
.nb {
  display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 10px;
  background: #f6f6f6; color: #111; border: 3px solid #000; box-shadow: inset -4px -4px 0 #bbb;
  font-weight: 800; font-size: 32px; line-height: 1;
}
.nb.sm { min-width: 48px; height: 48px; font-size: 24px; }
.nb.xs { min-width: 38px; height: 38px; font-size: 19px; box-shadow: inset -3px -3px 0 #bbb; padding: 0 6px; }

/* Bloques de primos: SIEMPRE el mismo mineral por primo */
.pb {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin: 3px;
  background-image: var(--pn); background-size: cover; image-rendering: pixelated;
  border: 3px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.4);
  font-weight: 800; font-size: 22px; color: #fff; line-height: 1;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; font-family: var(--body);
}
.pb2 { background-image: var(--p2); outline: 3px solid #ff4d4d; outline-offset: -6px; }
.pb3 { background-image: var(--p3); outline: 3px solid #ffd83a; outline-offset: -6px; }
.pb5 { background-image: var(--p5); outline: 3px solid #41f384; outline-offset: -6px; }
.pb7 { background-image: var(--p7); outline: 3px solid #5decf5; outline-offset: -6px; }
.pb11 { background-image: var(--p11); outline: 3px solid #7c98ff; outline-offset: -6px; }
.pb13 { background-image: var(--p13); outline: 3px solid #f3dccb; outline-offset: -6px; }
.pb.notprime { background: #555; outline: 3px dashed #ccc; outline-offset: -6px; }
.pb.one { background: #eee; color: #111; text-shadow: none; }
.pb.lg { width: 60px; height: 60px; font-size: 28px; }
.pb.pop { animation: pop .35s; }
.brow { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.brow.center { display: flex; margin: 4px 0; }
.x { font-style: normal; font-weight: 800; font-size: 24px; margin: 0 2px; }
.amp { font-style: normal; font-weight: 700; margin: 0 10px; }
.arrow { font-style: normal; font-size: 26px; margin: 0 8px; }
.decomp { display: flex; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.qmark { font-size: 34px; color: #b02020; }

/* ---------- Cofre (diagrama) ---------- */
.venn { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 6px; margin: 8px 0; }
.vbox { border: 3px solid #000; padding: 6px 4px; min-height: 120px; text-align: center; transition: opacity .3s, filter .3s; }
.vleft { background: #cfe3ff; }
.vright { background: #d9f5c9; }
.vmid { background: #f3d9a4; background-image: linear-gradient(#e0b46a 0 10px, transparent 10px); box-shadow: 0 0 0 3px #7a4e17 inset; }
.vlabel { font-weight: 700; font-size: 16px; color: #222; margin-bottom: 4px; min-height: 38px; display: grid; place-items: center; }
.vblocks { display: flex; flex-wrap: wrap; justify-content: center; }
.empty { color: #777; font-size: 16px; }
.hl-mid .vleft, .hl-mid .vright, .vbox.dim { opacity: .35; filter: grayscale(.6); }
.hl-mid .vmid, .vmid.glow { animation: glow 1.2s infinite; }
.hl-all .vbox { box-shadow: 0 0 0 3px var(--mcm) inset; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px #fff inset, 0 0 18px #ffd83a; } }
.venn.play .tapb { cursor: pointer; }
.tapb.sel { transform: scale(1.18); box-shadow: 0 0 0 4px #fff, 0 0 14px #fff; }
.tapb.hint { animation: glow 0.8s infinite; }
.vres { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 8px 0; padding: 6px; background: #fff; border: 3px solid #000; }
.vres .tag { margin-right: 8px; }
.ans { font-size: 32px; color: #0a6b12; }
.rule { background: #fff8d6; padding: 8px 10px; margin: 8px 0; border-left: 6px solid var(--gold); font-size: 20px; }

/* Etiquetas MCD / MCM */
.tag { display: inline-block; padding: 4px 12px; border: 3px solid #000; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 1px 1px 0 #000; }
.tag-mcd { background: var(--mcd); }
.tag-mcm { background: var(--mcm); }
.tag-pick { background: #6d6d6d; }
.tag-prime { background: #1a9ba3; }

/* ---------- Preguntas ---------- */
.qpanel { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-right: 72px; min-height: 96px; justify-content: center; }
.qpanel .say { position: absolute; right: 10px; top: 10px; }
.qvis { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qnums { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.sub { font-size: 19px; color: #333; font-weight: 500; }
.ask { font-weight: 700; font-size: 20px; }
.pcards { display: flex; gap: 12px; justify-content: center; }
.pcard { flex: 1; max-width: 160px; background: #fff; border: 3px solid #000; padding: 8px; display: flex; flex-direction: column; align-items: center; }
.pemo { font-size: 48px; line-height: 1.1; }
.pcard b { font-size: 26px; }
.pcard small { font-size: 16px; color: #444; }
.why { font-size: 20px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.big-emo { font-size: 44px; line-height: 1.2; }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opts.three { grid-template-columns: 1fr 1fr 1fr; }
.opt {
  aspect-ratio: 1.3; background-size: cover; image-rendering: pixelated; border: 3px solid #000;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.4);
  cursor: pointer; display: grid; place-items: center; padding: 6px; transition: transform .08s; font-family: var(--body);
}
.opt > span { font-weight: 800; font-size: clamp(28px, 9vw, 40px); color: #fff; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
.opts.long { grid-template-columns: 1fr; }
.opts.long .opt { aspect-ratio: auto; min-height: 70px; background: rgba(0,0,0,.55); }
.opts.long .opt > span { font-size: 22px; }
.opts.two .opt { aspect-ratio: 1.5; }
.opts.two .opt > span { font-size: clamp(24px, 7vw, 32px); }
.opt:hover:not(:disabled) { transform: scale(1.04); }
.opt:active:not(:disabled) { transform: scale(.96); }
.opt:disabled { cursor: default; }
.opt.bad { filter: grayscale(1) brightness(.6); }
.opt.right:not(.broken) { outline: 5px solid #7cfc00; outline-offset: -5px; }
.opt.broken { animation: crumble .35s forwards; }
@keyframes crumble { to { transform: scale(.2) rotate(8deg); opacity: 0; } }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }

.particle { position: fixed; width: 14px; height: 14px; background-size: 56px; image-rendering: pixelated; pointer-events: none; z-index: 50; animation: part .7s ease-out forwards; }
@keyframes part { to { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(200deg); opacity: 0; } }
.fly { position: fixed; z-index: 60; pointer-events: none; animation: fly .85s cubic-bezier(.5, -0.4, .7, 1) forwards; }
.fly .icon { width: 30px; }
@keyframes fly { to { transform: translate(var(--tx), var(--ty)) scale(.6); opacity: .3; } }

.fb { padding: 14px; border: 3px solid #000; color: #fff; display: flex; flex-direction: column; gap: 10px; animation: pop .25s; }
.fb.ok { background: #2f5f1a; }
.fb.bad { background: #7a2a1a; }
.fbt { font-weight: 800; font-size: 24px; }
.answer-is { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; }
.ans-chip { display: inline-flex; background: #fff; color: #0a6b12; border: 3px solid #000; padding: 2px 12px; font-size: 28px; font-weight: 800; }
.explain { background: #f4ecd4; color: #1f1f1f; padding: 10px; border: 3px solid #000; }
.fline { margin: 4px 0; font-size: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fline.big { font-size: 24px; justify-content: center; }

.ground { height: 40px; background-size: 40px; image-rendering: pixelated; border-top: 3px solid #000; margin: 6px -16px 0; }

/* ---------- Lecciones ---------- */
.stage { background: #f4ecd4; color: #1f1f1f; border: 3px solid #000; padding: 14px; min-height: 160px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 14px; height: 14px; background: #333; border: 2px solid #000; }
.dots.big i { width: 22px; height: 14px; }
.dots i.done { background: #6fb33f; }
.dots i.cur { background: var(--gold); }
.nav-row { display: flex; justify-content: space-between; gap: 10px; }
.nav-row .btn.green { flex: 1; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.inf { font-size: 34px; font-weight: 800; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; }
.bigcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 4px solid #000; color: #fff; width: 100%; text-shadow: 1px 1px 0 #000; }
.bigcard b { font-size: 40px; }
.bigcard small { font-size: 19px; }
.bigcard.mcd { background: var(--mcd); }
.bigcard.mcm { background: var(--mcm); }
.okmsg { color: #0a6b12; font-weight: 800; font-size: 22px; }
.okmsg.big { font-size: 30px; }
.badmsg { color: #b02020; font-weight: 800; font-size: 22px; }

/* Saltos */
.jrow { width: 100%; }
.jlab { font-weight: 700; font-size: 18px; }
.line { display: grid; grid-template-columns: repeat(13, 1fr); gap: 30px 2px; margin-top: 30px; }
.cell { position: relative; }
.jumper { position: absolute; left: 50%; top: -30px; width: 26px; height: 26px; transform: translateX(-50%); animation: pop .3s; }
.jumper .px { width: 100%; height: 100%; }
#ask { display: flex; flex-direction: column; gap: 12px; }
.cell { font-size: 14px; text-align: center; background: #fff; border: 2px solid #999; padding: 2px 0; font-weight: 600; }
.cell.hit { background: #6fb33f; color: #fff; border-color: #000; }
.cell.on { outline: 3px solid #000; transform: scale(1.15); }
.cell.both { background: var(--gold); color: #000; animation: glow 1s infinite; }

/* Acomodar bloques */
.grid { display: grid; gap: 4px; width: min(100%, 360px); }
.cube { aspect-ratio: 1; background-image: var(--planks); background-size: cover; border: 2px solid #000; }
.cube.left { background: #d33; animation: shake .4s; }
.tries { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* Picar */
.split { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.bigblock { width: 140px; height: 140px; background-image: var(--stone); background-size: cover; image-rendering: pixelated; border: 4px solid #000; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-family: var(--body); text-shadow: 3px 3px 0 #000; }
.bigblock span { font-size: 44px; font-weight: 800; }
.bigblock small { font-size: 15px; }
.bigblock.tap { animation: bob 1.4s infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.bag { background: rgba(0,0,0,.25); border: 3px solid #000; padding: 6px 10px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 26px; width: 100%; }
.stage .bag { background: #e2d6b3; }

.big-block { align-self: center; width: min(52vw, 190px); aspect-ratio: 1; background-size: cover; image-rendering: pixelated; border: 4px solid #000; display: grid; place-items: center; position: relative; box-shadow: inset 4px 4px 0 rgba(255,255,255,.3), inset -4px -4px 0 rgba(0,0,0,.4); }
.big-block span { font-weight: 800; font-size: clamp(40px, 13vw, 60px); color: #fff; text-shadow: 4px 4px 0 #000; position: relative; z-index: 2; }
.big-block.hit { animation: hit .2s; }
@keyframes hit { 50% { transform: scale(.9) rotate(-3deg); } }
.big-block.broken { animation: crumble .4s forwards; }
.cracks { position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background:
    linear-gradient(45deg, transparent 46%, rgba(0,0,0,.7) 47%, rgba(0,0,0,.7) 53%, transparent 54%),
    linear-gradient(-30deg, transparent 47%, rgba(0,0,0,.6) 48%, rgba(0,0,0,.6) 52%, transparent 53%),
    linear-gradient(100deg, transparent 47%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.5) 51%, transparent 52%);
}
.picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pick { background-size: cover; image-rendering: pixelated; border: 3px solid #000; color: #fff; font-family: var(--body); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.4); min-height: 76px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.pick .pk { font-size: 22px; text-shadow: none; }
.pick b { font-size: 30px; }
.pick:active:not(:disabled) { transform: translateY(2px); }
.pick:disabled { filter: brightness(.6); }

/* Supervivencia */
.track { position: relative; height: 64px; background: rgba(0,0,0,.4); border: 3px solid #000; }
.track .me, .track .creeper { position: absolute; top: 6px; width: 48px; height: 48px; }
.track .me { left: 6px; }
.track .creeper { left: calc(92% - 24px); transition: left .1s linear; }
.track .px { width: 100%; height: 100%; }
.creeper.flash { animation: flash .25s infinite; }
@keyframes flash { 50% { filter: brightness(2.5) saturate(0); } }

/* Niveles */
.levels { display: flex; flex-direction: column; gap: 12px; }
.level { display: flex; gap: 14px; align-items: center; background: rgba(0,0,0,.55); border: 3px solid #000; padding: 10px; color: #fff; font-family: var(--body); text-align: left; cursor: pointer; }
.level:hover:not(:disabled) { background: rgba(60, 70, 140, .6); }
.level.locked { opacity: .55; cursor: default; }
.lblock { width: 80px; height: 80px; flex: none; background-size: cover; image-rendering: pixelated; border: 3px solid #000; display: grid; place-items: center; font-size: 30px; }
.linfo b { display: block; font-size: 24px; }
.linfo small { font-size: 17px; color: #ccc; }
.stars { display: flex; gap: 4px; margin-top: 4px; }
.stars .icon { width: 28px; }
.stars.big { justify-content: center; margin: 10px 0; }
.stars.big .icon { width: 56px; }

/* Resultado */
.result { text-align: center; }
.result h2 { margin-bottom: 8px; font-size: 26px; }
.res-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 2px dashed #999; font-size: 22px; }
.unlock { margin-top: 12px; background: #fff3b0; padding: 8px; border: 2px solid #b8920a; }
.nota { font-family: var(--pixel); font-size: 72px; margin: 10px 0 0; }
.nota.ok { color: #2f8f1a; }
.nota.mid { color: #b87a0a; }
.nota.bad { color: #b02020; }
.exam-intro { flex: 1; display: flex; justify-content: space-around; font-size: 24px; font-weight: 700; flex-wrap: wrap; gap: 8px; }
.review { padding: 10px 14px; }
.review summary { cursor: pointer; font-size: 20px; }
.review.ok summary { color: #1f6b10; }
.review.bad summary { color: #8b1a1a; }
.qmini { margin: 8px 0; transform-origin: top center; }
.answer-form { display: flex; gap: 10px; }
.answer-form input { flex: 1; min-width: 0; font-size: 36px; text-align: center; font-weight: 700; }
.exam .answer-form .btn { min-width: 80px; font-size: 28px; }

/* Grupos */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--body); font-size: 18px; font-weight: 700; padding: 6px 12px; background: rgba(0,0,0,.5); color: #fff; border: 3px solid #000; cursor: pointer; }
.chip.sel { background: var(--green); border-color: #fff; }
.ginfo { text-align: center; }
.gname { font-weight: 800; font-size: 22px; }
.gcode { font-family: var(--pixel); font-size: 34px; letter-spacing: 8px; color: #1a6b70; margin: 10px 0 14px; user-select: all; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 2px solid #aaa; }
.lrow.me { background: #fff3b0; }
.pos { width: 34px; text-align: center; font-weight: 800; }
.lface { width: 38px; height: 38px; flex: none; border: 2px solid #000; }
.lface .px { width: 100%; height: 100%; }
.lname { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.lname small { display: block; font-size: 15px; color: #555; font-weight: 500; }
.ldia { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.ldia .icon { width: 22px; }
.forms details { padding: 6px 0; }
.forms summary { cursor: pointer; font-size: 20px; font-weight: 700; }
.forms .answer-form { margin: 10px 0 4px; }
.forms input { font-size: 22px; }

/* Toast */
.toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 100; background: #1a1a1a; color: #fff; border: 3px solid #fff; padding: 10px 16px; font-size: 20px; max-width: calc(100vw - 32px); text-align: center; animation: pop .25s; transition: opacity .4s; }
.toast.out { opacity: 0; }

@media (max-width: 380px) {
  body { font-size: 19px; }
  .pb { width: 38px; height: 38px; font-size: 18px; margin: 2px; }
  .nb { min-width: 54px; height: 54px; font-size: 26px; }
  .tblock { width: 60px; height: 60px; font-size: 30px; }
  .cell { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}

/* ---------- Temas: multiplicar y dividir ---------- */
:root { --mul: #3d8f2a; --div: #8a3fc0; }
.tag-mul { background: var(--mul); }
.tag-div { background: var(--div); }
.bigcard.mul { background: var(--mul); }
.bigcard.div { background: var(--div); }

.topics { display: flex; flex-direction: column; gap: 12px; }
.topic {
  display: flex; align-items: center; gap: 16px; padding: 14px; cursor: pointer; text-align: left;
  background: rgba(0,0,0,.55); border: 3px solid #000; color: #fff; font-family: var(--body);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.18), inset 0 -6px 0 var(--tc, #555);
}
.topic:hover, .topic:focus-visible { background: rgba(60, 70, 140, .6); outline: none; }
.topic:active { transform: scale(.98); }
.topic-mul { --tc: var(--mul); }
.topic-div { --tc: var(--div); }
.topic-mcm { --tc: var(--mcm); }
.topic .tblock { width: 80px; height: 80px; font-size: 40px; flex: none; }
.ttext { display: flex; flex-direction: column; }
.ttext b { font-size: 24px; line-height: 1.2; }
.ttext small { font-size: 16px; color: #ccc; }

.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles.three .tile.wide { grid-column: span 3; }
.tnum { font-size: 34px; color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; }

/* Muro de bloques */
.mwall { margin: 0 auto; }
.mwall.sm { gap: 3px; }

/* Tabla */
.tstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; }
.tstrip span { background: rgba(255,255,255,.85); color: #333; border: 2px solid #000; padding: 3px 2px; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; }
.tstrip span.done { background: #6fb33f; color: #fff; text-shadow: 1px 1px 0 #000; }
.tstrip span.cur, .tstrip span.on { background: var(--gold); color: #000; animation: glow 1s infinite; }
.tstrip.full { margin: 8px 0; }
.stage .tstrip { grid-template-columns: repeat(2, 1fr); }
.stage .tstrip span { font-size: 17px; }

/* Repartir */
.gem { display: inline-block; width: 13px; height: 13px; margin: 4px; background: var(--dia); border: 2px solid #1a6b70; transform: rotate(45deg); box-shadow: inset 2px 2px 0 #dfffff; }
.gems-pile { display: flex; flex-wrap: wrap; justify-content: center; max-width: 320px; margin: 0 auto; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; background: #e2d6b3; border: 3px solid #000; padding: 6px; }
.plab { font-weight: 800; font-size: 20px; }
.shares { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.share { flex: 1 1 80px; max-width: 120px; background: #fff; border: 3px solid #000; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.share b { font-size: 24px; color: #1f1f1f; }
.sface { width: 40px; height: 40px; border: 2px solid #000; }
.sface .px { width: 100%; height: 100%; }
.sgems { display: flex; flex-wrap: wrap; justify-content: center; min-height: 24px; }
.left-over { margin-top: 6px; padding: 6px 10px; background: #fff3b0; border: 3px dashed #b8920a; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px; }
.opt.chosen { outline: 5px solid #fff; outline-offset: -5px; }
.opt small { font-size: .8em; }
#ask .qnums { margin-bottom: 4px; }

/* Ceros */
.zbig { font-weight: 800; font-size: clamp(44px, 14vw, 72px); color: #1f1f1f; letter-spacing: 2px; animation: pop .3s; }
.sym { font-family: var(--body); font-weight: 800; font-size: 1.25em; line-height: 1; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.tblock .sym { font-size: 52px; }
.topic .tblock .sym { font-size: 60px; }
.tag .sym { font-size: 1.1em; text-shadow: 1px 1px 0 #000; }
.opts.long .opt small { font-size: 20px; }
.shares { gap: 6px; }
.share { flex: 1 1 54px; max-width: 110px; padding: 4px 2px; }
.share .gem { width: 10px; height: 10px; margin: 3px; }
.sface { width: 36px; height: 36px; }

/* ---------- Escalera de 8 niveles ---------- */
.levels.map { gap: 10px; }
.level.passed .lblock { box-shadow: 0 0 0 3px #6fb33f; }
.level.current { outline: 4px solid var(--gold); outline-offset: -2px; animation: glow 1.6s infinite; }
.lblock { position: relative; }
.lnum { font-weight: 800; font-size: 30px; color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; }
.lme { position: absolute; right: -14px; top: -14px; width: 38px; height: 38px; border: 2px solid #000; animation: bob 1.4s infinite; }
.lme .px { width: 100%; height: 100%; }
.lvtag { margin-left: auto; background: rgba(0,0,0,.5); padding: 2px 10px; border: 2px solid #000; }
.lvtag + .dia-count { margin-left: 10px; }
.levelup { margin-top: 12px; padding: 12px; background: #fff3b0; border: 3px solid #b8920a; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: pop .5s; }
.levelup small { font-size: 17px; color: #555; }
.lvup-t { font-weight: 800; font-size: 24px; color: #1f6b10; }
.lblock.big { width: 96px; height: 96px; }

/* ---------- Firma ---------- */
.credit { margin: 4px 0 0; text-align: center; font-size: 14px; color: #bbb; text-shadow: 1px 1px 0 #000; }
.credit a { color: var(--dia); font-weight: 700; text-decoration: underline; }