/* ============================================================
   SumMatrix — "Calculation Engine"
   Ink-black + green-teal undertone · acid-lime accent · grain + dot-grid.
   Fonts: Syne (display) · Sora (UI) · JetBrains Mono (todo número).
   ============================================================ */

:root {
    /* Surfaces */
    --bg:        #070b0a;
    --bg-2:      #0a100e;
    --ink:       #eafff4;
    --muted:     #7f9089;
    --muted-2:   #55645e;

    /* Accents */
    --lime:      #c6ff3d;   /* primario: acierto, CTA */
    --lime-dim:  #9bc72f;
    --cyan:      #35e8ff;   /* info, secundario */
    --coral:     #ff5d73;   /* error, reloj bajo */
    --amber:     #ffc24a;   /* combo, bonus, lanzamiento */

    /* Glass */
    --glass:     rgba(255, 255, 255, 0.045);
    --glass-2:   rgba(255, 255, 255, 0.07);
    --glass-brd: rgba(233, 255, 240, 0.12);
    --glass-brd-strong: rgba(233, 255, 240, 0.22);

    /* Glows */
    --glow-lime: 0 0 0 1px rgba(198,255,61,.35), 0 0 24px rgba(198,255,61,.35);
    --glow-cyan: 0 0 24px rgba(53,232,255,.30);
    --glow-coral: 0 0 24px rgba(255,93,115,.35);

    --radius:    18px;
    --radius-sm: 12px;
    --radius-lg: 26px;

    --font-display: "Syne", sans-serif;
    --font-ui: "Sora", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --ease: cubic-bezier(.2, .8, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--ink);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* ---------- Background atmosphere ---------- */
.bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.bg-glow {
    position: absolute; inset: -20%;
    background:
        radial-gradient(42% 38% at 18% 8%, rgba(198,255,61,.14), transparent 70%),
        radial-gradient(46% 44% at 88% 96%, rgba(53,232,255,.12), transparent 72%),
        radial-gradient(60% 60% at 50% 50%, rgba(10,20,16,.0), rgba(4,7,6,.6) 100%);
}
.bg-grid {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(233,255,240,.05) 1px, transparent 1.4px);
    background-size: 30px 30px;
    mask-image: radial-gradient(75% 75% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 40%, transparent 100%);
}
.bg-grain {
    position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Shell / layout ---------- */
.shell {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    min-height: 100dvh;
    padding: clamp(20px, 5vw, 34px) clamp(18px, 5vw, 26px) 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.shell--game { max-width: 640px; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.center-screen { justify-content: center; align-items: center; text-align: center; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* ---------- Typography ---------- */
.brand {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: .95;
    /* El degradado se recorta al texto y lo que sobresale de la caja queda
       TRANSPARENTE: Syne 800 es ancha (~0.85em por letra) y a 60px "SumMatrix"
       medía más que el shell, así que la "x" final no se veía. El tamaño se
       ajusta al ancho real y el padding deja aire para el último glifo. */
    padding: 0 .06em;
    background: linear-gradient(120deg, var(--ink), var(--lime) 130%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand--xl { font-size: clamp(30px, 9.4vw, 52px); }
.brand--lg { font-size: clamp(26px, 7.5vw, 38px); }

.brand-mark { font-family: var(--font-mono); font-weight: 800; color: var(--lime); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.05; }

.eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
}
.muted { color: var(--muted); }
.lead { color: var(--muted); font-size: 15px; line-height: 1.5; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Glass card ---------- */
.card {
    background: linear-gradient(160deg, var(--glass-2), var(--glass));
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius);
    padding: 22px;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px -24px rgba(0,0,0,.9);
}
.card--pad { padding: 30px; }
.card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .12s var(--ease); }
.card--link:hover { border-color: rgba(198,255,61,.45); transform: translateY(-1px); }
.card__cta { display: block; margin-top: 12px; font-size: 13px; color: var(--lime); font-weight: 600; }

/* ---------- Mi progreso ---------- */
.prog__h { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
.prog-lvl { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--glass); border: 1px solid var(--glass-brd); }
.prog-lvl.is-current { border-color: rgba(198,255,61,.45); background: rgba(198,255,61,.07); }
.prog-lvl.is-current .lvl__no { color: var(--lime); }
.prog-lvl__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prog-lvl__meta { font-size: 12px; color: var(--muted); }
.prog-lvl__nums { font-size: 13px; }
.prog-lvl__trend { font-size: 12px; color: var(--muted); }
.trend { font-weight: 700; color: var(--muted); }
.trend--up { color: var(--lime); }
.trend--down { color: var(--coral); }
/* Qué es el ritmo, arriba de los niveles (Dana 2026-10-28). */
.prog-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); opacity: .85; }
.prog-card p { margin: 0; font-size: 14px; }
.prog-card p + p { margin-top: 4px; font-size: 13px; }
.prog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prog-table th { text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; }
.prog-table td { padding: 7px 6px; border-top: 1px solid var(--glass-brd); }
.card--tight { padding: 16px; }

/* ---------- Buttons ---------- */
.btn {
    -webkit-appearance: none; appearance: none;
    font-family: var(--font-ui); font-weight: 600; font-size: 15px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 14px 22px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: transform .12s var(--ease), box-shadow .2s var(--ease),
                background .2s var(--ease), border-color .2s var(--ease), opacity .2s;
    user-select: none; -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--block { width: 100%; }

.btn--primary {
    background: linear-gradient(180deg, var(--lime), var(--lime-dim));
    color: #10160a; font-weight: 700;
    box-shadow: 0 0 0 1px rgba(198,255,61,.4), 0 14px 30px -14px rgba(198,255,61,.7);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(198,255,61,.6), 0 16px 40px -12px rgba(198,255,61,.9); }

.btn--play {
    font-family: var(--font-display); font-weight: 800; font-size: 20px;
    letter-spacing: .02em; padding: 20px 28px; width: 100%;
    background: linear-gradient(180deg, var(--lime), var(--lime-dim));
    color: #10160a;
    box-shadow: 0 0 0 1px rgba(198,255,61,.45), 0 20px 50px -18px rgba(198,255,61,.85);
}
.btn--play::before { content: "▸"; font-size: 16px; }

.btn--cyan {
    background: transparent; color: var(--cyan);
    border-color: rgba(53,232,255,.45);
}
.btn--cyan:hover { background: rgba(53,232,255,.08); box-shadow: var(--glow-cyan); }

/* Botón secundario (Dana 2026-10-28: «para clic en texto, subrayado funciona;
   pero para botones sería mejor iluminarlos»). Toda acción se ve encendida:
   el principal, relleno lima con brillo (.btn--primary, .btn--play); el
   secundario, borde lima a media luz y brillo al pasar o tocar. Sin brillo
   quieto: el principal sigue mandando. Antes era cristal gris. */
.btn--ghost {
    background: rgba(198,255,61,.04); color: var(--ink); border-color: rgba(198,255,61,.5);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
    border-color: var(--lime); background: rgba(198,255,61,.09);
    box-shadow: 0 0 0 1px rgba(198,255,61,.25), 0 0 22px -4px rgba(198,255,61,.55);
    outline: none;
}
.btn--ghost:active { background: rgba(198,255,61,.14); box-shadow: 0 0 24px -2px rgba(198,255,61,.6); }
.btn--sm { padding: 8px 16px; font-size: 14px; }

.btn--outline {
    background: transparent; color: var(--ink); border-color: var(--glass-brd);
}
.btn--outline.is-active {
    border-color: var(--lime); color: var(--lime);
    box-shadow: var(--glow-lime); background: rgba(198,255,61,.06);
}

/* Cerrar sesión: acción que te saca, encendida en coral como «Salir de la
   sala» (Dana 2026-10-14 y 2026-10-28: ninguna acción en gris apagado). */
.btn--logout {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    color: var(--ink); border-color: rgba(255,93,115,.45); background: rgba(255,93,115,.05);
}
.btn--logout:hover { color: var(--coral); border-color: var(--coral); background: rgba(255,93,115,.1); box-shadow: var(--glow-coral); }
.btn--link { background: none; border: none; color: var(--muted); font-size: 13px; padding: 8px; }
.btn--link:hover { color: var(--ink); }

/* ---------- Header ---------- */
.appbar { display: flex; align-items: center; gap: 12px; }
.back {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; font-size: 18px;
    background: var(--glass); border: 1px solid var(--glass-brd); color: var(--ink);
    text-decoration: none; transition: border-color .2s;
}
.back:hover { border-color: var(--glass-brd-strong); }

.token-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255,194,74,.08); border: 1px solid rgba(255,194,74,.3);
    font-family: var(--font-mono); font-weight: 700; color: var(--amber); font-size: 15px;
}
.token-pill .spark { filter: drop-shadow(0 0 6px rgba(255,194,74,.6)); }
/* La píldora abre «qué son las chispas» (partials/chispas_dialog.html). */
.token-pill.is-tappable { cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.token-pill.is-tappable:hover { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,194,74,.12); }
.chispas-dialog .chispas__gift {
    margin: 0 0 10px; padding: 12px 14px; border-radius: var(--radius-sm); text-align: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--amber);
    background: rgba(255,194,74,.1); border: 1px solid rgba(255,194,74,.32);
}
.chispas-dialog p { margin: 0 0 10px; line-height: 1.5; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.input, textarea.input {
    font-family: var(--font-ui); font-size: 16px; color: var(--ink);
    background: rgba(0,0,0,.28); border: 1px solid var(--glass-brd);
    border-radius: var(--radius-sm); padding: 14px 16px; width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--muted-2); }
.input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,61,.14); }
textarea.input { font-family: var(--font-mono); font-size: 13px; resize: vertical; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; padding: 5px; background: rgba(0,0,0,.3);
    border-radius: var(--radius-sm); border: 1px solid var(--glass-brd); }
.tab {
    flex: 1; text-align: center; padding: 11px; border-radius: 9px; cursor: pointer;
    font-weight: 600; font-size: 14px; color: var(--muted); background: transparent;
    border: none; font-family: var(--font-ui); transition: .2s;
}
.tab.is-active { background: var(--glass-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-brd); }

/* ---------- Alerts ---------- */
.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.4; }
.alert--error { background: rgba(255,93,115,.1); border: 1px solid rgba(255,93,115,.32); color: #ffb3be; }
.alert--warn  { background: rgba(255,194,74,.1); border: 1px solid rgba(255,194,74,.32); color: var(--amber); }
.alert--info  { background: rgba(53,232,255,.08); border: 1px solid rgba(53,232,255,.28); color: #a9f2ff; }

/* ---------- Stats ---------- */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat__value { font-family: var(--font-mono); font-weight: 800; font-size: 26px; line-height: 1; }
.stat--lime .stat__value { color: var(--lime); }
.stat--cyan .stat__value { color: var(--cyan); }

/* ============================================================
   THERMOMETER (selección de nivel)
   ============================================================ */
.thermo { display: flex; flex-direction: column; gap: 8px; }
.level-go {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(7,11,10,0), var(--bg) 28%);
}
/* El botón de opinar ya no flota en Niveles: va en la barra de arriba
   (Dana 2026-10-28; tapaba filas y el aviso del candado). */
.thermo__cap { text-align: center; font-size: 12px; letter-spacing: .18em; color: var(--muted);
    text-transform: uppercase; margin-top: 6px; }
.thermo__cap:first-child { margin-top: 0; }
/* Qué es cada candado, bajo el título (Dana 2026-10-28). */
.lvl-legend { margin: 8px 0 0; font-size: 13px; color: var(--ink); opacity: .85; }
.lvl-legend span { white-space: nowrap; }
/* Un nivel DISPONIBLE se ve encendido: fondo más claro, número en tinta. Uno
   CERRADO se ve cerrado sin desaparecer: borde punteado, fondo casi negro,
   texto gris legible y su candado (Dana 2026-10-28: «casi no se ven»). La
   barra de dificultad de cada fila salió el mismo día. */
.lvl {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px; border-radius: var(--radius-sm); cursor: pointer;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    border: 1px solid var(--glass-brd-strong);
    transition: transform .12s var(--ease), border-color .2s, background .2s, box-shadow .2s;
    width: 100%; font-family: var(--font-ui); color: var(--ink); text-align: left;
}
.lvl:hover { transform: translateX(3px); border-color: rgba(198,255,61,.55); background: rgba(255,255,255,.12); }
.lvl__no { font-family: var(--font-mono); font-weight: 800; font-size: 18px; width: 26px;
    color: var(--ink); }
.lvl__meta { flex: 1; font-size: 14px; color: var(--ink); }
.lvl__badge { font-size: 12px; color: var(--ink); opacity: .85; text-align: right; white-space: nowrap; }
.lvl.is-current .lvl__badge { color: var(--lime); opacity: 1; font-weight: 600; }
.lvl.is-current { border-color: rgba(198,255,61,.45); background: rgba(198,255,61,.07); }
.lvl.is-current .lvl__no { color: var(--lime); text-shadow: 0 0 14px rgba(198,255,61,.55); }
.lvl.is-selected { border-color: var(--lime); box-shadow: var(--glow-lime); background: rgba(198,255,61,.10); }
.lvl.is-selected .lvl__no { color: var(--lime); }
/* Al elegir otro nivel, el actual vuelve al aspecto de cualquier disponible:
   solo brilla el que se va a jugar (Dana 2026-10-12: «quedan seleccionados dos
   al tiempo»). Lo sigue marcando «tu nivel» en su fila. Clase y no
   :has() para no depender de la versión de Safari. */
.thermo.has-pick .lvl.is-current:not(.is-selected) {
    border-color: var(--glass-brd-strong);
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}
.thermo.has-pick .lvl.is-current:not(.is-selected) .lvl__no { color: var(--ink); text-shadow: none; }
.lvl.is-locked { background: rgba(0,0,0,.28); border: 1px dashed rgba(233,255,240,.24); }
.lvl.is-locked .lvl__no, .lvl.is-locked .lvl__meta { color: var(--muted); }
.lvl.is-locked .lvl__badge { opacity: 1; font-size: 14px; }
.lvl.is-locked:hover { transform: none; border-color: rgba(233,255,240,.36); background: rgba(0,0,0,.28); }
/* «Continuar» sin nivel elegido se ve apagado de verdad (no un lima opaco
   que parece encendido a medias). Con nivel elegido, el primario de siempre. */
.level-go .btn:disabled { opacity: 1; background: var(--glass); color: var(--muted);
    border-color: var(--glass-brd); box-shadow: none; }

/* ---------- Duration cards ---------- */
.dur-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Se leen como botones aunque no estén elegidos (Dana 10-14: «deberían crear
   contraste con el fondo»). Dana 2026-10-28: no se sabía cuál estaba elegido
   (el elegido tenía el fondo MÁS oscuro que el otro). Ahora el no elegido es
   apagado parejo (cristal, borde suave, ícono atenuado) y el elegido se
   enciende sin duda: fondo lima, borde lima doble, brillo, hora en lima y ✓. */
.dur {
    position: relative; display: flex; flex-direction: column; align-items: center; width: 100%;
    padding: 24px 18px; border-radius: var(--radius); text-align: center; cursor: pointer;
    background: var(--glass); border: 1px solid var(--glass-brd-strong);
    box-shadow: 0 8px 24px -16px rgba(0,0,0,.9);
    transition: transform .12s var(--ease), border-color .2s, box-shadow .2s, background .2s;
    font-family: var(--font-ui); color: var(--ink);
}
.dur:hover { transform: translateY(-3px); border-color: rgba(198,255,61,.45); }
.dur:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dur__ico { font-size: 30px; opacity: .55; filter: grayscale(.5); }
.dur__t { font-family: var(--font-mono); font-weight: 800; font-size: 24px; margin-top: 6px; color: var(--ink); opacity: .8; }
.dur__s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dur.is-active {
    background: rgba(198,255,61,.14); border: 2px solid var(--lime); padding: 23px 17px;
    box-shadow: var(--glow-lime);
}
.dur.is-active .dur__ico { opacity: 1; filter: none; }
.dur.is-active .dur__t { color: var(--lime); opacity: 1; text-shadow: 0 0 18px rgba(198,255,61,.45); }
.dur.is-active .dur__s { color: var(--ink); }
.dur.is-active::after {
    content: "✓"; position: absolute; top: 8px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; font-weight: 800; color: #10160a; background: var(--lime);
}

/* ============================================================
   PLAY SCREEN (el héroe)
   ============================================================ */
.hud { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hud__block { display: flex; flex-direction: column; gap: 3px; }
.hud__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.timer {
    font-family: var(--font-mono); font-weight: 800; font-size: clamp(38px, 13vw, 54px);
    line-height: .9; letter-spacing: -.02em; color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: color .3s;
}
.timer.is-low { color: var(--coral); animation: pulse 1s infinite; }

.target {
    text-align: right;
}
.target__no {
    font-family: var(--font-mono); font-weight: 800; font-size: clamp(40px, 14vw, 58px);
    line-height: .9; color: var(--lime); text-shadow: 0 0 26px rgba(198,255,61,.45);
    font-variant-numeric: tabular-nums;
}

.scorebar { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 15px; }
.scorebar .solved { font-family: var(--font-mono); font-weight: 700; }
.combo { font-family: var(--font-mono); font-weight: 800; color: var(--amber);
    filter: drop-shadow(0 0 8px rgba(255,194,74,.5)); }
.combo.pop { animation: pop .3s var(--ease); }

/* Matrix grid */
.matrix { display: grid; gap: clamp(7px, 2vw, 11px); margin: 4px auto; width: 100%; }
.cell {
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(15px, 4.6vw, 22px);
    border-radius: 14px; cursor: pointer;
    color: var(--ink);
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border: 1px solid var(--glass-brd);
    transition: transform .1s var(--ease), border-color .15s, background .15s, box-shadow .15s, color .15s;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.cell:hover { border-color: var(--glass-brd-strong); }
.cell:active { transform: scale(.94); }
.cell.is-selected {
    background: linear-gradient(180deg, var(--lime), var(--lime-dim));
    color: #10160a; border-color: var(--lime); box-shadow: var(--glow-lime);
    transform: scale(1.04);
}
.cell.flash-ok {
    background: linear-gradient(180deg, var(--lime), var(--lime-dim)) !important;
    color: #10160a !important; animation: popcell .32s var(--ease);
}
.cell.flash-bad {
    background: rgba(255,93,115,.22) !important; border-color: var(--coral) !important;
    color: #ffd0d7 !important; animation: shake .32s;
}
/* Se acabó el tiempo: la pareja que estaba ahí, en cian. Un tercer color a
   propósito: el lima es "acerté" y el coral "me equivoqué"; esto es "era esta". */
.cell.is-answer {
    background: linear-gradient(180deg, var(--cyan), #1fb6cc) !important;
    color: #04141a !important; border-color: var(--cyan) !important;
    box-shadow: var(--glow-cyan); animation: popcell .32s var(--ease);
}
.matrix.is-over .cell:not(.is-answer) { opacity: .45; }
.play-hint.is-answer { color: var(--cyan); font-weight: 600; }

.play-hint { text-align: center; font-size: 13px; color: var(--muted); }
/* En la partida va arriba y en tinta (piloto 2026-10-03: abajo y en gris no se
   veía). La portada sigue con la versión discreta. */
.play-hint--top { font-size: 16px; color: var(--ink); font-weight: 500; margin: 0; }
/* En la cuenta regresiva la regla sale en grande sobre la cuadrícula; esta
   línea guarda su espacio sin verse, para no decirla dos veces (Dana
   2026-10-28). game.js le quita la clase al arrancar el reloj. */
.play-hint.is-pending { visibility: hidden; }

/* Cuenta regresiva: tapa la cuadrícula (que ya tiene su tamaño, sin números)
   y dice la regla en grande antes de que corra el reloj. */
.board { position: relative; }
.cell.is-blank { cursor: default; opacity: .35; }
.countdown {
    position: absolute; inset: -6px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 18px; text-align: center; border-radius: 18px;
    background: rgba(7,11,10,.86); backdrop-filter: blur(3px);
}
.countdown__rule { font-size: clamp(18px, 5vw, 22px); color: var(--ink); max-width: 22ch; margin: 0; line-height: 1.3; }
.countdown__rule b { color: var(--lime); }
.countdown__no {
    font-family: var(--font-mono); font-weight: 800; font-size: clamp(72px, 24vw, 120px);
    line-height: 1; color: var(--lime); text-shadow: 0 0 40px rgba(198,255,61,.35);
}
.countdown__no.pop { animation: pop .35s var(--ease); }
.countdown__cancel { margin-top: 6px; }

/* ---------- Portada: la matriz que se resuelve sola ---------- */
/* La matriz de muestra encogió un poco (340 → 268 px) para que el regalo y la
   nota quepan sin desplazarse en 390×844 (Dana 2026-10-28). */
.demo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.demo .matrix { max-width: 268px; pointer-events: none; }
.demo .cell { cursor: default; }
.demo .timer { font-size: clamp(30px, 9vw, 40px); }
.demo .target__no { font-size: clamp(32px, 10vw, 44px); }
.demo { cursor: pointer; }
.demo__tag {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%); /* colgada del borde: no choca con TIEMPO / SUMA HASTA en 390px */
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
    color: var(--muted); background: var(--bg); padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--glass-brd);
}
.demo-nudge { text-align: center; margin: 0; font-size: 14px; color: var(--lime); font-weight: 600; animation: rise .3s var(--ease); }
.btn--play.is-nudge { animation: nudge .5s var(--ease) 3; }
/* «CREA TU CUENTA GRATIS»: máximo 2 renglones a 390 px (Dana 2026-10-28).
   Letra y relleno lateral un poco menores que JUGAR, renglones parejos. */
.btn--cta { font-size: clamp(16px, 4.6vw, 20px); padding: 17px 16px; line-height: 1.15; }
.btn--cta::before { display: none; }  /* con 2 renglones el ▸ quedaba despegado a la izquierda */
.btn--cta span { text-align: center; text-wrap: balance; }
/* El regalo y qué son las chispas, bajo el botón: legibles, no gris diminuto. */
.land-gift { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.land-gift p { margin: 0; }
.land-gift__n { font-size: 16px; font-weight: 700; color: var(--ink); }
.land-gift__note { font-size: 14px; line-height: 1.4; color: var(--ink); opacity: .8; }
@keyframes nudge { 0%,100% { transform: none; } 40% { transform: translateY(-5px) scale(1.03); box-shadow: 0 0 0 2px rgba(198,255,61,.8), 0 24px 60px -16px rgba(198,255,61,1); } }
.play-hint b { color: var(--lime); }

/* ---------- Feedback: botón flotante + diálogo ---------- */
/* Que nunca tape contenido (Dana 2026-10-28). Las pantallas con barra de
   arriba (Niveles, Duración, tienda, Mi progreso, Ranking, salas) lo llevan
   ahí (.fab-bar). Donde flota (Inicio, partida, pagos), la página deja
   libre el final (.shell--fab) para que lo último no quede debajo. Borde
   cian: es una acción, encendida, pero no compite con el lima de jugar. */
.fab {
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 20; display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-ui); font-weight: 600; font-size: 14px;
    color: var(--cyan); background: rgba(16,24,22,.92); border: 1px solid rgba(53,232,255,.5);
    box-shadow: 0 8px 28px rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: border-color .15s, color .15s, box-shadow .15s, transform .1s var(--ease);
}
.fab:hover, .fab:focus-visible { border-color: var(--cyan); box-shadow: 0 8px 28px rgba(0,0,0,.45), var(--glow-cyan); outline: none; }
.fab:active { transform: scale(.96); }
.fab svg { flex: none; }
@media (max-width: 420px) { .fab span { display: none; } .fab { padding: 12px; } }
.shell--fab { padding-bottom: calc(40px + 64px + env(safe-area-inset-bottom)); }
.fab-bar {
    width: 42px; height: 42px; border-radius: 50%; flex: none; cursor: pointer;
    display: grid; place-items: center; padding: 0;
    color: var(--cyan); background: var(--glass); border: 1px solid rgba(53,232,255,.5);
    transition: border-color .15s, box-shadow .15s, transform .1s var(--ease);
}
.fab-bar:hover, .fab-bar:focus-visible { border-color: var(--cyan); box-shadow: var(--glow-cyan); outline: none; }
.fab-bar:active { transform: scale(.94); }
.fb-dialog {
    width: min(92vw, 440px); margin: auto; padding: 20px;
    border: 1px solid var(--glass-brd-strong); border-radius: var(--radius);
    background: #101816; color: var(--ink);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.fb-dialog::backdrop { background: rgba(7,11,10,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.fb-toast {
    position: fixed; left: 50%; bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px)); transform: translateX(-50%);
    z-index: 21; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    color: #10160a; background: var(--lime); box-shadow: var(--glow-lime);
    transition: opacity .4s, transform .4s var(--ease);
}
.fb-toast.is-gone { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }
.fb-ok { margin: 8px 0 0; padding: 14px; text-align: center; color: var(--lime); font-weight: 600;
    background: rgba(198,255,61,.08); border: 1px solid rgba(198,255,61,.3); border-radius: var(--radius-sm); }

/* ---------- Feedback: estrellas + preguntas guía ---------- */
.fb__q { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
/* Las estrellas van en el HTML de 5 a 1 y en fila invertida: así `~` (hermanos
   siguientes) pinta las de la IZQUIERDA al marcar o pasar por una. */
.stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { font-size: 26px; line-height: 1; color: var(--muted-2); cursor: pointer; transition: color .12s, transform .12s; }
.stars label:hover, .stars label:hover ~ label,
.stars input:checked ~ label { color: var(--lime); text-shadow: 0 0 12px rgba(198,255,61,.45); }
.stars label:active { transform: scale(.9); }
.stars input:focus-visible + label { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }

/* ---------- Results ---------- */
.result-hero { text-align: center; }
.result-big {
    font-family: var(--font-mono); font-weight: 800; font-size: clamp(64px, 24vw, 104px);
    line-height: .85; color: var(--lime); text-shadow: 0 0 40px rgba(198,255,61,.4);
}
.result-cap { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* Nivel · Objetivo · tiempo de la partida: texto, sin caja (con borde y fondo
   parecía un botón; Dana 2026-10-28). */
.res-meta { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.res-meta b { color: var(--ink); }
.record-badge {
    display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 999px;
    background: rgba(255,194,74,.12); border: 1px solid rgba(255,194,74,.4); color: var(--amber);
    font-weight: 600; font-size: 14px; animation: pop .4s var(--ease);
}

/* ---------- Package cards ---------- */
.pkg { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pkg__tokens { font-family: var(--font-mono); font-weight: 800; font-size: 26px; }
.pkg__unit { font-size: 12px; color: var(--muted); }
.pkg__bonus { color: var(--lime); font-size: 12px; font-weight: 600; }
.pkg__price { font-family: var(--font-mono); font-weight: 800; font-size: 22px; text-align: right; }
.pkg.is-featured { border-color: rgba(255,194,74,.4); box-shadow: 0 0 30px -12px rgba(255,194,74,.5); }
.pkg-tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.pkg { position: relative; }
.pkg.is-recommended { border-color: rgba(198,255,61,.55); box-shadow: var(--glow-lime); }
/* Tienda (Dana 2026-10-28): lo que abre la primera compra, arriba y a la
   vista; la letra chica, una línea al final; el código, plegado al final. */
.pkg-first {
    margin: 0; padding: 10px 14px; text-align: center; font-size: 14px; line-height: 1.4;
    color: var(--ink); border-radius: var(--radius-sm);
    background: rgba(53,232,255,.07); border: 1px solid rgba(53,232,255,.28);
}
.pkg-fine { margin: 0; font-size: 12px; line-height: 1.5; }
.code-box summary { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted);
    text-underline-offset: 3px; }
.pkg__reco {
    position: absolute; top: -10px; left: 16px;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    color: #10160a; background: var(--lime); padding: 3px 9px; border-radius: 999px;
}

/* ---------- Banner (test mode) ---------- */
.banner {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-radius: var(--radius-sm); background: rgba(255,194,74,.08);
    border: 1px solid rgba(255,194,74,.32);
}

/* ---------- Animations ---------- */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes popcell { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.rise { opacity: 0; animation: rise .5s var(--ease) forwards; }
.rise:nth-child(1) { animation-delay: .04s; }
.rise:nth-child(2) { animation-delay: .10s; }
.rise:nth-child(3) { animation-delay: .16s; }
.rise:nth-child(4) { animation-delay: .22s; }
.rise:nth-child(5) { animation-delay: .28s; }
.rise:nth-child(6) { animation-delay: .34s; }

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

/* ---------- Small utilities ---------- */
.center { text-align: center; }
.mt-a { margin-top: auto; }
.gap-sm { gap: 8px; }
.hidden { display: none !important; }

/* ---------- Enlaces (sin regla, el navegador pintaba azul #0000ee sobre fondo oscuro) ---------- */
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.footer-links a, .muted a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.footer-links a:hover, .muted a:hover { text-decoration-color: var(--lime); }

/* ---------- Marca (SVG inline, no depende de la fuente) ---------- */
.brand-mark { color: var(--lime); display: block; margin: 0 auto 6px; filter: drop-shadow(0 0 14px rgba(198,255,61,.45)); }

/* ---------- Selector de idioma ---------- */
.topbar { display: flex; justify-content: flex-end; }
.lang {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px;
    background: rgba(0,0,0,.3); border: 1px solid var(--glass-brd); border-radius: 999px;
}
.lang__icon { font-size: 14px; padding: 0 4px 0 8px; opacity: .8; }
.lang__opt {
    padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--ink); opacity: .78; text-decoration: none; transition: opacity .15s, background .15s;
}
.lang__opt:hover { opacity: 1; text-decoration: none; }
.lang__opt.is-active { background: var(--lime); color: #10160a; opacity: 1; }

/* ---------- Divisor "o" ---------- */
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 2px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-brd); }

/* ---------- Checkbox ---------- */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lime); flex: none; }

/* ---------- Aviso ok ---------- */
.alert--ok { background: rgba(198,255,61,.08); border: 1px solid rgba(198,255,61,.3); color: #dfffa0; }

/* ---------- Spinner ---------- */
.spinner {
    width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
    border: 3px solid var(--glass-brd); border-top-color: var(--lime);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.full { width: 100%; }

/* ---------- Aviso en el formulario: «Entrar sin contraseña» sin correo (2026-10-11) ---------- */
.field-msg { margin: 0; font-size: 13px; font-weight: 600; color: var(--amber); }
.input.is-invalid { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,194,74,.16); }

/* ---------- Entrada única, correo primero (Dana 2026-10-11) ----------
   Copiado del prototipo aprobado. Píldora con el correo y «Cambiar», ayudas
   pequeñas, el enlace «Prefiero usar contraseña» y la caja que abre, y la
   línea de Términos bajo los paquetes de la tienda. */
.entrada h2 { font-size: 24px; margin: 0; }
.chip-mail {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0;
    font-size: 13px; padding: 6px 6px 6px 12px; border-radius: 999px;
    background: rgba(0,0,0,.3); border: 1px solid var(--glass-brd); align-self: flex-start;
}
.chip-mail b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip-mail button { font: 600 12px var(--font-ui); color: var(--cyan); background: none; border: 0; cursor: pointer; padding: 4px 8px; }
.hint { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.45; }
.reveal { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.reveal[hidden] { display: none !important; }
/* Texto que se toca: subrayado (Dana 2026-10-28: «para clic en texto,
   subrayado funciona»). Antes solo al pasar el mouse, que en el celular no existe. */
.linkish { font: 500 13px var(--font-ui); color: var(--cyan); background: none; border: 0; padding: 0; cursor: pointer; text-align: center;
    text-decoration: underline; text-decoration-color: rgba(53,232,255,.5); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: var(--cyan); }
/* Enlace dentro de un aviso (el del tope, 2026-10-29): la letra del aviso, subrayado. */
.alert .linkish { font: inherit; font-weight: 600; text-align: inherit; }
.linkish:focus-visible, .chip-mail button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.check a, .legal-line a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.legal-line { margin: 0; font-size: 13px; color: var(--ink); text-align: center; }

/* ---------- Tarjeta de descanso del Inicio (Dana 2026-10-11: "más vistoso") ----------
   Cian y no coral: descansar no es un error. El reloj en mono, como todo número. */
.rest {
    position: relative; overflow: hidden; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 22px 22px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(53,232,255,.45);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(53,232,255,.16), transparent 60%),
        linear-gradient(160deg, var(--glass-2), var(--glass));
    box-shadow: 0 0 0 1px rgba(53,232,255,.12), 0 0 40px -6px rgba(53,232,255,.35), 0 20px 40px -24px rgba(0,0,0,.9);
}
.rest__icon {
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center; color: var(--cyan);
    background: rgba(53,232,255,.10); border: 1px solid rgba(53,232,255,.35);
    box-shadow: var(--glow-cyan);
}
.rest__icon svg { animation: rest-turn 4s var(--ease) infinite; }
@keyframes rest-turn { 0%, 75% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.rest__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; margin: 4px 0 0; }
.rest__body { margin: 0; font-size: 15px; line-height: 1.5; max-width: 32ch; }
.rest__timer {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin: 8px 0 4px; padding: 14px 22px; min-width: 70%;
    border-radius: var(--radius); background: rgba(0,0,0,.32); border: 1px solid var(--glass-brd);
}
.rest__label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rest__clock {
    font-family: var(--font-mono); font-weight: 800; font-size: 46px; line-height: 1.05;
    color: var(--cyan); text-shadow: 0 0 26px rgba(53,232,255,.5);
}
.rest__at { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.rest__why { margin: 0; font-size: 12px; color: var(--muted); max-width: 34ch; }
/* JUGAR apagado mientras descansa. No basta con :disabled (opacity): la
   animación .rise termina en opacity 1 y la pisa. */
.btn--play:disabled {
    background: var(--glass); color: var(--muted); border-color: var(--glass-brd);
    box-shadow: none; cursor: not-allowed;
}
.rest.is-done { border-color: rgba(198,255,61,.5); }
.rest.is-done .rest__clock { color: var(--lime); text-shadow: 0 0 26px rgba(198,255,61,.5); }
.rest.is-done .rest__label { color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .rest__icon svg { animation: none; } }

/* ============================================================
   Tabla de posiciones y salas (Dana 2026-10-12)
   ============================================================ */

/* Inicio: Tabla y Salas lado a lado, debajo de JUGAR. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.room-invite { border-color: rgba(53,232,255,.4); box-shadow: var(--glow-cyan); }

/* Las pestañas del login también sirven como enlaces y como radios. */
a.tab { text-decoration: none; display: block; }
/* El radio queda a la vista (lima): con un Safari sin :has() se sigue viendo
   cuál está elegido; el fondo resaltado es lo de más. */
.tab--radio { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--ink); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-brd); }
.tab--radio input { accent-color: var(--lime); margin: 0; }
.tab--radio:has(input:checked) { background: rgba(198,255,61,.10); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(198,255,61,.55); }
.tab--radio:focus-within { outline: 2px solid rgba(198,255,61,.5); outline-offset: 1px; }

.field__hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.field__label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
select.input option { background: var(--bg-2); color: var(--ink); }
.card__h { font-family: var(--font-display); font-size: 18px; margin: 0; }
.pkg-why { font-size: 13px; margin-top: 6px; }

/* Filas de posiciones: la tabla del nivel y los jugadores de una sala. */
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board__row {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: var(--radius-sm);
    background: var(--glass); border: 1px solid var(--glass-brd);
}
.board__row.is-you { border-color: rgba(198,255,61,.5); background: rgba(198,255,61,.07); }
.board__row.is-winner { border-color: rgba(255,194,74,.55); box-shadow: 0 0 26px -10px rgba(255,194,74,.6); }
.board__pos { font-weight: 800; font-size: 16px; color: var(--muted); text-align: center; }
.board__row.is-first .board__pos, .board__row.is-winner .board__pos { color: var(--amber); }
.board__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__name { font-weight: 600; }
.board__hint { color: var(--muted); font-family: var(--font-mono); font-size: 12px; margin-left: 6px; }
.board__tag { display: inline-block; margin-left: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.board__val { text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.board__val b { font-size: 17px; }
.board__val small { color: var(--muted); font-size: 11px; }
.board__main { white-space: nowrap; }
.board__main small { margin-left: 2px; }
.board__sub { font-size: 11px; color: var(--muted); }
.board__row.is-winner .board__sub { color: var(--amber); font-weight: 600; }
.board__gap { text-align: center; color: var(--muted-2); letter-spacing: .3em; }
.board__note { font-size: 12px; }

/* ¿Desde dónde juegas? */
.where summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.where summary::-webkit-details-marker { display: none; }
.where summary::after { content: "+"; color: var(--muted); font-family: var(--font-mono); }
.where[open] summary::after { content: "−"; }
.where__why { font-size: 13px; line-height: 1.45; margin: 10px 0 14px; }

/* Salas */
.room-input { font-family: var(--font-mono); font-size: 22px; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
/* El ejemplo se lee como ejemplo y no como un código ya escrito (Dana
   2026-10-28): letra normal, más chica, sin mayúsculas forzadas, gris. */
.room-input::placeholder { font-family: var(--font-ui); font-size: 15px; letter-spacing: .02em;
    text-transform: none; color: var(--muted); font-style: italic; }
.salas__rules { font-size: 12px; line-height: 1.5; }
.room-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.room-item__code { font-weight: 800; font-size: 16px; letter-spacing: .08em; }
.room-item__state { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.room-item__state.is-open { color: var(--lime); }

.room-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.room-head__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.room-code { font-size: 40px; font-weight: 800; letter-spacing: .12em; color: var(--lime); text-shadow: 0 0 24px rgba(198,255,61,.35); }
.room-share { width: 100%; }
/* El QR va sobre blanco: con el fondo oscuro del juego, muchas cámaras no lo leen. */
.room-qr { background: #fff; border-radius: var(--radius-sm); padding: 6px; width: 176px; height: 176px; }
.room-qr svg { width: 100%; height: 100%; display: block; }
.room-code--sm { font-size: 22px; }
.room-countdown { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.room-countdown__no { font-size: 72px; font-weight: 800; line-height: 1; color: var(--cyan); text-shadow: var(--glow-cyan); }

.room-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.room-fact { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.room-fact b { font-size: 18px; }
.room-fact small { font-size: 10px; }
.room-fact__pot { color: var(--amber); }
@media (max-width: 380px) { .room-facts { grid-template-columns: repeat(2, 1fr); row-gap: 14px; } }

.room-clock { text-align: center; color: var(--muted); }
.room-clock .num { color: var(--cyan); font-size: 22px; font-weight: 800; margin-left: 6px; }
.room-note { font-size: 12px; }
.room-status { font-size: 12px; color: var(--muted); }
.room-status.is-done { color: var(--lime); }
.room-status.is-live { color: var(--cyan); }
.room-result { text-align: center; }
.room-result__h { font-family: var(--font-display); font-size: 20px; margin: 0 0 6px; }
.room-result.is-mine { border-color: rgba(255,194,74,.55); box-shadow: 0 0 30px -12px rgba(255,194,74,.6); }
.room-result__mine { color: var(--amber); font-weight: 700; font-size: 18px; margin-top: 8px; }

/* Dana 10-14: «Salir de la sala y demás deben verse como clickables». Antes
   eran texto gris (.btn--link). Copiar/Compartir son .btn--ghost (desde el
   2026-10-28, secundario encendido en lima); Salir y Cancelar, botón con
   borde coral: se ve que se toca y que te saca. */
.btn--leave {
    background: rgba(255,93,115,.07); color: var(--ink);
    border-color: rgba(255,93,115,.5);
}
.btn--leave:hover { background: rgba(255,93,115,.14); border-color: var(--coral); color: var(--coral); box-shadow: var(--glow-coral); }

/* ============================================================
   Referidos y la pausa (Dana 2026-10-28)
   ============================================================ */
/* La pausa a quien no ha comprado: cuántas partidas tendría con su primera compra. */
.rest__premium { margin: 0; font-size: 13px; line-height: 1.45; max-width: 34ch; color: var(--ink); opacity: .9; }
/* «Invita a un amigo». */
.ref-rule { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ref-link { font-family: var(--font-mono); font-size: 14px; text-align: center; color: var(--lime); }
.ref-msg { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--lime); }
.ref-count { margin: 0; font-size: 16px; font-weight: 600; }
.ref-wait { margin: 6px 0 0; font-size: 13px; }
/* Entradas: texto que se toca, subrayado (al final del Inicio y de la tienda). */
.ref-line { margin: 0; font-size: 14px; }
.ref-line a { color: var(--lime); text-decoration: underline; text-decoration-color: rgba(198,255,61,.5); text-underline-offset: 3px; }
.ref-dialog { margin-top: 6px; font-size: 14px; }
/* «Así te ven: Santia482» en «cómo apareces» del ranking (Dana 2026-10-28). */
.where__alias { margin: 0 0 14px; font-size: 14px; color: var(--ink); }

/* «by muktiflow» (Dana 2026-10-30, como Adymia): chico, gris, en minúscula,
   abajo a la derecha del nombre en la barra del Inicio. Columna con el nombre
   arriba y la firma pegada a la derecha: no suma ancho, así la barra a 390 px
   no se parte. Enlace aparte (el nombre no es enlace). */
.brand-firma { display: inline-flex; flex-direction: column; align-items: flex-end; flex: none; }
.brand-by {
    font-size: 10px; line-height: 1; letter-spacing: .03em; color: var(--muted);
    text-decoration: none; margin-top: 1px; padding: 2px 0;
}
.brand-by:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Reto del día (Dana 2026-10-28/30) ---------- */
.reto-card { display: flex; flex-direction: column; gap: 10px; border-color: rgba(255,194,74,.35); }
.reto-card__title { margin: 0; font-size: 18px; color: var(--amber); }
.reto-card__clock { font-size: 12px; color: var(--muted); white-space: nowrap; }
.reto-card__clock b { color: var(--ink); }
.reto-card__what { margin: 0; font-size: 15px; }
.reto-card__tries { margin: 0; font-size: 13px; }
.reto-card__note { margin: 0; font-size: 13px; color: var(--amber); }
.reto-goal { display: flex; justify-content: space-between; gap: 8px; }
.reto-rules { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.reto-penalty { font-family: var(--font-mono); font-weight: 800; color: #ffb3be; }
.reto-result__time { margin: 4px 0; font-size: 40px; font-weight: 800; color: var(--lime); }
.reto-result__place { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
.streaks { margin: 0; font-size: 14px; color: var(--ink); }
.board__medals { display: inline-block; margin-left: 6px; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }