/* Friki o Fracaso: tablero de concurso nocturno. Tinta violeta, lima para «friki», coral para «fracaso». */
:root { --ancho: 520px;
  color-scheme: dark;
  --bg: #15122b; --bg2: #1c1838; --panel: #221d43; --panel2: #2b2552; --line: #3a3368;
  --fg: #f5f0e4; --muted: #aaa3cf; --lima: #c8f45a; --lima-fg: #1d2408; --coral: #ff5d6c; --coral-fg: #2a0a0e;
  --a: #7fa2ff; --b: #ffc861; --c: #58e0c1; --nose: #4a4373; --ok: #8be07a; --bad: #ff7a86;
  --r: 18px; --r-s: 12px;
  --font: 'Bricolage Grotesque', ui-rounded, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; font: 500 1rem/1.45 var(--font); color: var(--fg);
  background: radial-gradient(120% 60% at 50% -10%, #2c2160 0%, transparent 60%), var(--bg); background-attachment: fixed;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2 { font-weight: 800; line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); letter-spacing: -.02em; }
h2 { font-size: 1.15rem; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--muted); }
.nota { color: var(--muted); font-size: .88rem; margin: 0; }
.centro { text-align: center; justify-content: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

/* carga */
#carga { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; transition: opacity .35s; }
#carga > .marca { font-size: 2.2rem; animation: latido 1.2s ease-in-out infinite; }
#carga { grid-auto-flow: row; align-content: center; gap: 14px; text-align: center; }
#carga .lema { color: var(--muted); font-size: 1rem; max-width: 28ch; padding-inline: 16px; }
#carga.fuera { opacity: 0; pointer-events: none; }
@keyframes latido { 50% { transform: scale(1.04); } }

/* la marca */
.marca { font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.marca .f, .logo .f { color: var(--lima); }
.marca .x, .logo .x { color: var(--coral); }
.marca .o, .logo .o { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 50%; border: .09em solid var(--fg); font-size: .55em; vertical-align: .35em; transform: rotate(-12deg); }
.marca .o { width: auto; min-width: 1.05em; padding-inline: .3em; border-radius: 999px; }

/* barra de arriba */
.top { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: calc(env(safe-area-inset-top, 0px) + 10px) 6px; }
.logo { font-weight: 800; font-size: 1.35rem; text-decoration: none; letter-spacing: -.04em; display: flex; align-items: center; gap: 2px; }
.logo .o { font-size: .6em; vertical-align: 0; margin-inline: 2px; }
.yo { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); max-width: 60%; }
.yo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: .92rem; }
.yo .ava { width: 32px; height: 32px; }
.yo.on { border-color: var(--lima); }
.ava { border-radius: 50%; display: block; }

main { max-width: var(--ancho); margin: 0 auto; padding-block: 8px 32px; display: flex; flex-direction: column; gap: 16px; }

/* inicio */
.hero { padding-block: 22px 6px; display: flex; flex-direction: column; gap: 12px; }
.hero .marca { font-size: clamp(3rem, 15vw, 4.6rem); }
.hero .marca .x { display: block; }
.hero p { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 30ch; }
.hero .lema { color: var(--fg); font-size: 1.2rem; font-weight: 700; text-wrap: balance; }
.dos { display: grid; gap: 12px; }
.gran { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i t' 'i s'; column-gap: 14px; align-items: center; text-decoration: none;
  padding: 20px; border-radius: var(--r); box-shadow: 0 6px 0 rgba(0,0,0,.35); transition: transform .12s, box-shadow .12s; }
.gran .ic { grid-area: i; width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: rgba(0,0,0,.14); stroke-width: 2.4; }
.gran b { grid-area: t; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.gran small { grid-area: s; opacity: .8; font-weight: 600; }
.gran:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.lima { background: var(--lima); color: var(--lima-fg); }
.coral { background: var(--coral); color: var(--coral-fg); }

/* tarjetas */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card.jugador { flex-direction: row; align-items: center; gap: 12px; text-decoration: none; }
.card.jugador > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.card.jugador small { color: var(--muted); font-size: .8rem; }
.card.jugador b { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.card.jugador > .ic { color: var(--muted); }
.ava-m .ava { width: 52px; height: 52px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; }
.chip.ok { background: color-mix(in srgb, var(--lima) 18%, transparent); border-color: color-mix(in srgb, var(--lima) 45%, transparent); color: var(--lima); }
.ventajas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ventajas li { display: flex; gap: 8px; align-items: center; }
.ventajas li .ic { color: var(--lima); }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel2); font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.lima { background: var(--lima); color: var(--lima-fg); border-color: transparent; }
.btn.coral { background: var(--coral); color: var(--coral-fg); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.icon { min-height: 40px; width: 40px; padding: 0; }
.btn.grande { min-height: 58px; font-size: 1.15rem; font-weight: 800; border-radius: var(--r); box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.btn.grande:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.lnk { color: var(--lima); font-weight: 700; text-decoration: none; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.volver { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; margin-top: 6px; width: fit-content; }
.spin { width: 1em; height: 1em; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* formularios */
.pila { display: flex; flex-direction: column; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fld > label, .fld > legend { font-weight: 700; padding: 0; }
.fld legend small, .fld > small { color: var(--muted); font-weight: 500; font-size: .85rem; }
input:not([type=radio]):not([type=checkbox]) { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--bg2); font-size: 1.05rem; }
input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
input:focus { outline: none; border-color: var(--lima); }
.campo-codigo { text-align: center; font-size: 2rem !important; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; min-height: 70px !important; }
.err { margin: 0; color: var(--bad); font-weight: 600; }
.chk { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.chk input { width: 22px; height: 22px; accent-color: var(--lima); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label, .temas label { position: relative; }
.seg input, .temas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 99px; background: var(--bg2); border: 1.5px solid var(--line); font-weight: 700; }
.seg input:checked + span { background: var(--lima); color: var(--lima-fg); border-color: transparent; }
.seg input:focus-visible + span, .temas input:focus-visible + span { outline: 3px solid var(--lima); outline-offset: 2px; }
.seg.dif { display: grid; grid-template-columns: repeat(2, 1fr); }
.seg.dif label:nth-child(4) input:checked + span { background: var(--coral); color: var(--coral-fg); }
.seg.dif span { flex-direction: column; justify-content: center; gap: 0; border-radius: var(--r-s); min-height: 64px; width: 100%; }
.seg.dif span b { font-size: 1.4rem; line-height: 1; }
.temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.temas span { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: var(--r-s); background: var(--bg2); border: 1.5px solid var(--line); font-weight: 700; }
.temas input:checked + span { border-color: var(--lima); background: color-mix(in srgb, var(--lima) 16%, var(--bg2)); }
.temas input:checked + span::after { content: ''; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--lima); }
.config { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 16px; }
.config[open] { padding-bottom: 16px; }
.config > summary { cursor: pointer; font-weight: 700; padding: 12px 0; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.config > summary::-webkit-details-marker { display: none; }
.config > summary small { color: var(--muted); font-weight: 500; font-size: .84rem; }
.config[open] > .fld, .config[open] > .chk { margin-top: 14px; }
.config .nota { margin-top: 12px; }

/* editor de avatar */
.editor-ava { display: flex; flex-direction: column; gap: 12px; }
.ava-grande { display: grid; place-items: center; padding-top: 4px; }
.ava-grande .ava { width: 150px; height: 150px; box-shadow: 0 0 0 5px var(--panel2), 0 0 0 7px var(--line); }
.fila-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; margin-inline: -2px; }
.fila-scroll::-webkit-scrollbar { display: none; }
/* con ratón no hay cómo deslizar: las filas bajan de línea en vez de cortarse */
@media (hover: hover) and (pointer: fine) { .fila-scroll { flex-wrap: wrap; overflow: visible; } }
.estilo { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r-s); background: transparent; border: 1.5px solid transparent; cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--muted); }
.estilo .ava { width: 54px; height: 54px; }
.estilo.on { border-color: var(--lima); color: var(--fg); background: var(--panel); }
.piezas .chip { flex: none; cursor: pointer; min-height: 36px; padding: 0 14px; font-size: .88rem; }
.piezas .chip.on { background: var(--fg); color: var(--bg); border-color: transparent; }
.valores { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.valores.colores { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.val { aspect-ratio: 1; border-radius: var(--r-s); border: 2px solid var(--line); background: var(--bg2); padding: 3px; cursor: pointer; font-weight: 700; font-size: .85rem; }
.val .ava { width: 100%; height: 100%; }
.val.color { background: var(--c); border-radius: 50%; }
.val.on { border-color: var(--lima); box-shadow: 0 0 0 2px var(--lima); }
.credito { margin: 0; font-size: .75rem; color: var(--muted); text-align: center; }

/* diálogo y aviso */
dialog { border: 0; padding: 0; background: transparent; color: var(--fg); max-width: min(480px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: rgba(8, 6, 20, .7); backdrop-filter: blur(3px); }
.dlg { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.dlg header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 0 20px; }
.dlg .body { padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.codigo { margin: 0; text-align: center; font-size: clamp(2.4rem, 13vw, 3.4rem); font-weight: 800; letter-spacing: .18em; color: var(--lima); padding: 14px 0; background: var(--bg2); border-radius: var(--r); border: 2px dashed var(--line); }
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 700; z-index: 60; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }

@media (min-width: 640px) {
  .dos { grid-template-columns: 1fr 1fr; }
  .gran { grid-template-columns: 1fr; grid-template-areas: 'i' 't' 's'; row-gap: 8px; padding: 22px; }
}

/* ---------- partida ---------- */
.cargando { display: flex; gap: 8px; align-items: center; padding-block: 40px; }
.temas span small { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: .78rem; font-weight: 600; }
.temas input:checked + span small { display: none; }
.temas > .nota { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.eti, .p-cab small, .fin-cab small { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.entrada h1, .p-cab h1 { overflow-wrap: anywhere; }
.p-cab { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.sala-codigo { flex-direction: row; align-items: center; justify-content: space-between; }
.sala-codigo > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sala-codigo small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.sala-codigo .cod { font-size: clamp(1.9rem, 10vw, 2.5rem); font-weight: 800; letter-spacing: .14em; color: var(--lima); line-height: 1; }
.sala-codigo .acts { flex-wrap: nowrap; }
.card h2 { display: flex; align-items: center; gap: 8px; }
.lista-j, .tabla, .quien, .chat-lista, .desglose ol { list-style: none; margin: 0; padding: 0; }
.lista-j { display: grid; gap: 8px; }
.lista-j li, .tabla li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lista-j li > b, .tabla li > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-j small, .tabla small { color: var(--muted); font-weight: 600; }
.lista-j .ava, .tabla .ava { width: 38px; height: 38px; }
.chip.espera { color: var(--muted); }
.chip .ic { width: 1em; height: 1em; }
.btn.apagado { opacity: .45; box-shadow: none; }
.btn.listo { background: color-mix(in srgb, var(--lima) 16%, var(--panel2)); border: 2px solid var(--lima); color: var(--lima); }

/* chat */
.chat-lista { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.chat-lista li { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.chat-lista li .ava { width: 28px; height: 28px; flex: none; }
.chat-lista p { margin: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 7px 11px; overflow-wrap: anywhere; min-width: 0; }
.chat-lista p b { display: block; font-size: .78rem; color: var(--b); }
.chat-lista li.mio { align-self: flex-end; flex-direction: row-reverse; }
.chat-lista li.mio p { background: color-mix(in srgb, var(--lima) 14%, var(--bg2)); border-radius: 14px 14px 4px 14px; }
.chat-lista li.mio p b { color: var(--lima); }
.chat-lista .vacio { color: var(--muted); font-size: .9rem; max-width: none; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { min-height: 46px !important; }
.chat-form .btn { width: 46px; min-height: 46px; flex: none; }

/* preguntas */
.preparados { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-block: 18vh 0; text-align: center; }
.preparados p { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--muted); }
.preparados b { font-size: 7rem; line-height: 1; color: var(--lima); animation: latido 1s ease-in-out infinite; }
.preparados small { color: var(--muted); font-weight: 600; }
.p-barra { display: flex; align-items: center; gap: 8px; padding-top: 8px; color: var(--muted); font-weight: 600; }
.p-barra b { color: var(--fg); }
.p-barra .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiempo { margin-left: auto; font-weight: 800; font-size: 1.3rem; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiempo.poco { color: var(--coral); }
.barra { --p: 1; height: 8px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin-top: -8px; }
.barra::before { content: ""; display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--lima); border-radius: inherit; transition: width .25s linear; }
.p-barra:has(.poco) + .barra::before { background: var(--coral); }
.enunciado { font-size: clamp(1.4rem, 5.6vw, 1.85rem); line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; padding-block: 6px; }
.opciones { display: grid; gap: 10px; }
.opcion { --k: var(--a); display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
  border-radius: var(--r); border: 2px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 14%, var(--panel)); font-weight: 700; font-size: 1.08rem;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--k) 40%, #000); transition: transform .1s, box-shadow .1s, opacity .2s; }
.opcion:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--k) 40%, #000); }
.opcion.op1 { --k: var(--b); }
.opcion.op2 { --k: var(--c); }
.opcion.nose { --k: var(--nose); min-height: 52px; font-size: 1rem; color: var(--muted); box-shadow: none; border-style: dashed; }
.opcion .letra { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--k); color: var(--bg); font-weight: 800; }
.opcion.nose .letra { color: var(--fg); }
.opcion .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.opcion:disabled { cursor: default; }
.opciones.cerrada .opcion { opacity: .5; pointer-events: none; }
.opciones.hecha .opcion:not(.mia) { opacity: .4; }
.opciones.hecha .opcion.mia { background: var(--k); color: var(--bg); box-shadow: 0 0 0 3px var(--fg); }
.opciones.hecha .opcion.mia .letra { background: var(--bg); color: var(--k); }
.opciones.revelada .opcion { opacity: .45; box-shadow: none; }
.opciones.revelada .opcion.buena { opacity: 1; background: var(--ok); color: #0f2108; border-color: transparent; }
.opciones.revelada .opcion.buena .letra { background: #0f2108; color: var(--ok); }
.opciones.revelada .opcion.mala { opacity: 1; background: color-mix(in srgb, var(--bad) 22%, var(--panel)); border-color: var(--bad); color: var(--fg); }
.opciones.revelada .opcion.mia:not(.buena):not(.mala) { opacity: 1; box-shadow: 0 0 0 3px var(--fg); background: var(--panel2); color: var(--fg); }
.quienes { display: flex; align-items: center; flex: none; padding-left: 8px; }
.quienes .ava { width: 26px; height: 26px; margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); }
.quienes small { margin-left: 4px; font-size: .8rem; }
.quien { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.quien li { position: relative; opacity: .4; transition: opacity .2s; }
.quien li.ya { opacity: 1; }
.quien .ava { width: 36px; height: 36px; }
.quien li > .ic { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--lima); color: var(--lima-fg); stroke-width: 3.5; }
.veredicto { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--r); font-weight: 800; animation: entra .35s ease-out; }
.veredicto b { font-size: 1.6rem; }
.veredicto span { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.veredicto.acierto { background: var(--ok); color: #0f2108; }
.veredicto.fallo { background: var(--coral); color: var(--coral-fg); }
.veredicto.nose { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); }
@keyframes entra { from { transform: scale(.92); opacity: 0; } }
.tabla { display: grid; gap: 8px; }
.tabla .pos { width: 1.6em; text-align: center; font-weight: 800; color: var(--muted); flex: none; }
.tabla li:first-child .pos { color: var(--b); }
.tabla li.tu { background: var(--panel2); border-radius: var(--r-s); margin-inline: -6px; padding: 4px 6px; }
.tabla .pts { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: right; }
.tabla .delta { font-variant-numeric: tabular-nums; }
.tabla .cuenta { white-space: nowrap; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }

/* final */
.fin-cab { text-align: center; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.fin-cab h1 { font-size: clamp(2rem, 9vw, 2.8rem); color: var(--lima); overflow-wrap: anywhere; }
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding-top: 8px; }
.podio:has(> :only-child) { grid-template-columns: minmax(0, 200px); justify-content: center; }
.podio:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.podio > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.podio .ava { width: 64px; height: 64px; }
.podio .p1 .ava { width: 84px; height: 84px; box-shadow: 0 0 0 4px var(--b); }
.podio b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.podio span { color: var(--muted); font-size: .85rem; font-weight: 700; }
.podio i { font-style: normal; display: grid; place-items: center; width: 100%; border-radius: var(--r-s) var(--r-s) 0 0; background: var(--panel2); font-weight: 800; font-size: 1.5rem; color: var(--muted); height: 52px; }
.podio .p1 i { height: 92px; background: var(--b); color: var(--bg); font-size: 2.2rem; }
.podio .p2 i { height: 68px; }
.podio .tu b { color: var(--lima); }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.cifras span { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--bg2); border-radius: var(--r-s); padding: 10px 4px; }
.cifras b { font-size: 1.5rem; color: var(--fg); }
.cifras .ok b { color: var(--ok); }
.cifras .bad b { color: var(--bad); }
.cifras .pts b { color: var(--lima); }
.desglose > summary { cursor: pointer; list-style: none; }
.desglose > summary::-webkit-details-marker { display: none; }
.desglose > summary h2::after { content: "+"; margin-left: auto; color: var(--muted); }
.desglose[open] > summary h2::after { content: "−"; }
.desglose ol { display: grid; gap: 12px; }
.desglose li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-s); background: var(--bg2); }
.desglose li.acierto p small { color: var(--ok); }
.desglose li.fallo p small { color: var(--bad); }
.desglose p { margin: 0; overflow-wrap: anywhere; }
.desglose p small { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; }
.desglose .sol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ok); font-weight: 700; }
.desglose .tuya { display: inline-flex; align-items: center; gap: 4px; color: var(--bad); }
.desglose .sol .ic { width: 1em; height: 1em; }
.acts > .btn.grande { flex: 1; white-space: nowrap; }

/* categorías: la madre con su botón de subcategorías; las hijas, debajo y sangradas */
.tema { display: flex; min-width: 0; }
.tema > label { flex: 1; min-width: 0; }
.tema:has(.abrir-sub) > label span { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.abrir-sub { flex: none; width: 44px; display: grid; place-items: center; border: 1.5px solid var(--line); border-left: 0; border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--panel2); color: var(--fg); cursor: pointer; }
.abrir-sub .ic { transition: transform .2s; }
.abrir-sub[aria-expanded=true] .ic { transform: rotate(180deg); }
.subtemas { grid-column: 1 / -1; display: grid; gap: 6px; padding: 2px 0 6px; }
.cat.n1 { margin-left: 14px; } .cat.n2 { margin-left: 28px; } .cat.n3 { margin-left: 42px; } .cat.n4 { margin-left: 56px; }
.subtemas .cat span { min-height: 46px; }
.cat.incluida span { border-style: dashed; color: var(--muted); }
.temas .cat.incluida input + span::after { content: 'incluida'; width: auto; height: auto; background: none; border-radius: 0; margin-left: auto; font-size: .75rem; font-weight: 700; }
.temas { grid-auto-flow: row dense; }
.cat.incluida span small { display: none; }

/* admin: importar */
input[type=file] { padding: 8px !important; font-size: .9rem !important; color: var(--muted); }
input[type=file]::file-selector-button { margin-right: 12px; min-height: 34px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--panel2); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--bg2); color: var(--fg); font: 500 1rem/1.4 var(--font); resize: vertical; }
textarea.mono { font: 500 .9rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.formato ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.formato p { margin: 0; }
code, .json-ej { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.json-ej { margin: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--bg2); border: 1px solid var(--line); font-size: .78rem; line-height: 1.5; overflow-x: auto; white-space: pre; }
.tabla-scroll { overflow-x: auto; }
.tabla-cat { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-cat th, .tabla-cat td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.tabla-cat th[scope=row], .tabla-cat thead th:first-child { text-align: left; font-weight: 700; }
.tabla-cat thead th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.chip.nueva { background: color-mix(in srgb, var(--lima) 18%, var(--panel2)); border-color: var(--lima); font-size: .7rem; padding: 1px 8px; }
.prompt summary { cursor: pointer; font-weight: 700; padding-block: 4px; }
.prompt[open] { display: flex; flex-direction: column; gap: 10px; }
.prompt-txt { white-space: pre-wrap; max-height: 320px; overflow-y: auto; }
.chk.sobrescribir { align-items: flex-start; padding: 12px; border-radius: var(--r-s); border: 1.5px dashed var(--coral); background: color-mix(in srgb, var(--coral) 8%, var(--bg2)); }
.lnk-sugerir { justify-self: start; align-self: flex-start; background: none; border: 0; padding: 6px 0; color: var(--lima); font: inherit; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.aviso-tema { border-color: var(--lima); background: color-mix(in srgb, var(--lima) 10%, var(--panel)); }
.aviso-tema h2 { display: flex; align-items: center; gap: 8px; color: var(--lima); }
.aviso-tema ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.adm-cats { list-style: none; margin: 0; padding: 0; display: grid; }
.adm-cat { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.adm-cat > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-cat b { overflow-wrap: anywhere; }
.adm-cat small { color: var(--muted); font-size: .8rem; }
.adm-cat.n1 { padding-left: 16px; } .adm-cat.n2 { padding-left: 32px; } .adm-cat.n3 { padding-left: 48px; } .adm-cat.n4, .adm-cat.n5 { padding-left: 64px; }
.adm-cat.n0 b { font-size: 1.05rem; }
.filtros button { min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--bg2); border: 1.5px solid var(--line); font-weight: 700; color: var(--fg); cursor: pointer; }
.filtros button.on { background: var(--lima); color: var(--lima-fg); border-color: transparent; }
.filtros small { opacity: .75; }
.sugs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sug p { margin: 0; overflow-wrap: anywhere; }
.sug-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sug-cab b { font-size: 1.1rem; overflow-wrap: anywhere; }
.sug-cab small { color: var(--muted); white-space: nowrap; }
.quien-sug { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.quien-sug b { color: var(--fg); }
.errores-imp summary { cursor: pointer; font-weight: 700; color: var(--coral); }
.errores-imp ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; }

/* Abuelo Friki: todo un poco más grande y las preguntas y respuestas, bastante más */
html[data-letra=grande] { font-size: 118.75%; }
html[data-letra=grande] .enunciado { font-size: clamp(1.75rem, 7.6vw, 2.3rem); line-height: 1.18; }
html[data-letra=grande] .opcion { font-size: 1.22rem; min-height: 72px; }
html[data-letra=grande] .opcion .letra { width: 44px; height: 44px; }
.terminar { align-self: center; color: var(--muted); }

/* modos, perfil y pie */
.sec { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.modo { display: flex; flex-direction: column; gap: 10px; }
.gran.tinta { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); }
.ava-resumen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pestanas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.pestanas button, .pestanas a { display: grid; place-items: center; text-decoration: none; text-align: center; min-height: 38px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--muted); cursor: pointer; }
.pestanas button.on, .pestanas a.on { background: var(--panel2); color: var(--fg); }
.pestanas.tres { grid-template-columns: repeat(3, 1fr); }
.pestanas a { display: flex; justify-content: center; align-items: center; gap: 6px; }
.globo { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--coral); color: var(--coral-fg); font-size: .72rem; font-weight: 800; }
.marcador { margin: 0; text-align: center; font-weight: 700; color: var(--muted); font-size: 1.1rem; }
.marcador b { color: var(--fg); font-size: 1.4rem; }
.pie { max-width: var(--ancho); margin: 0 auto; padding-block: 0 calc(env(safe-area-inset-bottom, 0px) + 24px); text-align: center; color: var(--muted); font-size: .8rem; }
.lnk-pie { background: none; border: 0; padding: 4px; color: var(--muted); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.novedades { display: flex; flex-direction: column; gap: 16px; max-height: 60vh; overflow-y: auto; }
.novedades h3 { margin: 0 0 6px; font-size: 1rem; color: var(--lima); }
.novedades ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* modo de juego (al crear) */
.juegos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.juego:not(.pronto) { grid-column: 1 / -1; }
.juego.pronto > span > small { display: none; }
.juego.pronto b { flex-wrap: wrap; row-gap: 4px; }
.juego { position: relative; }
.juego input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.juego > span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1.5px solid var(--line); }
.juego b { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.juego > span > small { color: var(--muted); font-weight: 600; }
.juego input:checked + span { border-color: var(--lima); box-shadow: inset 0 0 0 1px var(--lima); }
.juego input:checked + span b::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lima); }
.juego input:focus-visible + span { outline: 3px solid var(--lima); outline-offset: 2px; }
.juego.pronto > span { opacity: .55; }
.juego.pronto input { cursor: not-allowed; }
.juego .chip { font-size: .7rem; padding: 1px 8px; }
@media (min-width: 560px) { .juegos { grid-template-columns: repeat(4, 1fr); } }

/* clasificaciones */
.clas-link { flex-direction: row; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.clas-link > .ic { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--lima); color: var(--lima-fg); stroke-width: 2.2; flex: none; }
.clas-link > span { display: flex; flex-direction: column; gap: 2px; }
.clas-link b { font-size: 1.1rem; }
.clas-link small { color: var(--muted); font-weight: 600; }
.juegos-clas .chip { flex: none; cursor: pointer; min-height: 36px; padding: 0 14px; font-size: .88rem; color: var(--fg); }
.juegos-clas .chip.on { background: var(--fg); color: var(--bg); border-color: transparent; }
.juegos-clas .chip:disabled { opacity: .5; cursor: not-allowed; }
.filtros-clas { display: grid; gap: 8px; }
@media (min-width: 560px) { .filtros-clas { grid-template-columns: 1fr 1fr; } }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; border-radius: 12px; }
.ranking li.mia { background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--lima); }
.ranking .pos { width: 1.8em; flex: none; text-align: center; font-weight: 800; color: var(--muted); }
.ranking li:first-child .pos { color: var(--lima); font-size: 1.15em; }
.ranking .ava { width: 36px; height: 36px; flex: none; }
.ranking b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .res { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; }
.ranking .res small { color: var(--muted); font-weight: 600; font-size: .75rem; }
.ranking.tu-puesto { border-top: 1px dashed var(--line); padding-top: 8px; }
.clas .vacia { margin: 0; padding: 18px 0; text-align: center; color: var(--muted); font-weight: 700; }

/* en PC, más ancho (sin llegar a líneas demasiado largas) */
@media (min-width: 900px) { :root { --ancho: 760px; } }

/* foto de avatar */
img.ava { object-fit: cover; background: var(--panel2); }
.subir-foto { cursor: pointer; }
.subir-foto:focus-within { outline: 3px solid var(--lima); outline-offset: 2px; }

/* páginas legales */
.legal { gap: 10px; line-height: 1.55; }
.legal h1 { margin: 0; font-size: 1.7rem; }
.legal h2 { margin: 12px 0 0; font-size: 1.1rem; }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; }
.pie a { color: inherit; }

/* admin: pestañas y usuarios */
.pestanas.cuatro { grid-template-columns: repeat(4, 1fr); }
.pestanas.cuatro a { font-size: .86rem; padding-inline: 2px; }
.adm-resumen { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.adm-users { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adm-users li { display: flex; align-items: center; gap: 12px; min-width: 0; padding-block: 8px; border-top: 1px solid var(--line); }
.adm-users li:first-child { border-top: 0; }
.adm-users .ava { width: 44px; height: 44px; flex: none; }
.adm-users div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-users b, .adm-users small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-users small { color: var(--muted); font-size: .8rem; }
[data-buscar-u] { width: 100%; }