/* Numeri, the number game (docs/number-game.md). Two looks on one page structure:
   .nz--adults — calm, dark, keyboard-first; .nz--kids — bubbles, owl, keypad. Builds on play.css. */

/* ── shared ─────────────────────────────────────────────────────────── */
.nz-stage { max-width: 720px; margin: 16px auto 0; scroll-margin-top: 90px; }
.nz-map__range { font-size: 11px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; line-height: 1; }
.gmap__node.is-locked .nz-map__range { opacity: .5; }
.nz-map { grid-auto-rows: 104px; }
.nz-map .gmap__track { height: calc(104px + 6px); }
.nz-map .gmap__node label { max-width: 100%; }
/* Phones (2026-10-20): five 62px kids dots and one-line ranges did not fit a ~60px column —
   "10.000–999.999" ran into its neighbours. Smaller dots, ranges wrap after the dash. */
@media (max-width: 420px) {
    .nz-map { grid-auto-rows: 100px; }
    .nz-map .gmap__track { top: 23px; height: calc(100px + 6px); }
    .nz-map .gmap__dot, .gsetup--kids .nz-map .gmap__dot { width: 46px; height: 46px; font-size: 17px; }
    .nz-map__range { white-space: normal; text-align: center; font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; }
}

.nz-hud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.nz-hud__lvl { font-weight: 800; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.nz-hud__q { font-weight: 700; font-size: 14px; }
.nz-hud__combo { font-weight: 800; font-size: 14px; color: #c2410c; }
.nz-hud__combo.is-on { animation: gburst .5s ease-out; }
.nz-hud__score { margin-left: auto; font-size: 15px; }
.nz-hud__score b { font-size: 22px; display: inline-block; }
.nz-hud__score b.is-bump { animation: gbump .35s ease-out; }
.nz-dots { display: flex; gap: 4px; margin: 6px 0 12px; }
.nz-dots i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.nz-dots i.now { background: var(--gold-line); }
.nz-dots i.done { background: #9fb8a6; }

.nz-card { position: relative; border-radius: 22px; padding: 24px 20px 18px; text-align: center; overflow: hidden; }
.nz-card.is-in { animation: gin .3s ease-out; }
.nz-card.is-shake { animation: gshake .45s; }
.nz-ask { font-weight: 800; letter-spacing: .02em; font-size: 15px; }
.nz-prompt { line-height: 1.05; margin: 8px 0 18px; word-break: break-word; font-variant-numeric: tabular-nums; }

.nz-opts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .nz-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nz-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 14px; border-radius: 14px; font: inherit; cursor: pointer; text-align: left; word-break: break-word; transition: transform .08s, background .15s, border-color .15s, opacity .2s; }
.nz-opt__t { flex: 1; font-weight: 800; }
.nz-opt:disabled { cursor: default; }
.nz-opt.is-dim { opacity: .35; }

.nz-type { display: grid; gap: 10px; }
.nz-input { width: 100%; min-height: 60px; border-radius: 14px; padding: 0 16px; font: inherit; font-size: 24px; font-weight: 700; text-align: center; }
.nz-input:focus { outline: none; }
.nz-type__row { display: flex; gap: 10px; }
.nz-type__row .btn { flex: 1; }
.nz-accent { width: 60px; min-height: 52px; border-radius: 12px; font: inherit; font-size: 24px; font-weight: 800; cursor: pointer; }

.nz-timer { position: relative; overflow: hidden; margin-top: 18px; }
.nz-timer i { display: block; height: 100%; width: 100%; transform-origin: left; }
.nz-timer span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 800; }

.nz-fb { min-height: 8px; }
.nz-fb__box { margin-top: 12px; border-radius: 16px; padding: 14px 16px; text-align: left; animation: gin .25s ease-out; }
.nz-fb__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; }
.nz-fb__pts { font-weight: 800; }
.nz-fb__answer { font-size: 22px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.nz-fb__line { margin-top: 4px; }
.nz-fb__given { text-decoration: line-through; opacity: .75; }
.nz-fb__tip { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.nz-next { position: relative; overflow: hidden; display: block; width: 100%; margin-top: 12px; min-height: 46px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.nz-next::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; transform-origin: left; animation: gdrain var(--auto, 2s) linear forwards; }

.nz-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin: 8px 0; }
.nz-stats div { display: flex; flex-direction: column; align-items: center; }
.nz-stats b { font-size: 20px; }
.nz-stats span { font-size: 13px; color: var(--ink-muted); }
.nz-practise { margin-top: 18px; text-align: left; }
.nz-practise h3 { font-size: 18px; margin: 0 0 8px; }
.nz-practise ul, .nz-all { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.nz-all { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 10px; }
.nz-rev { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-align: left; }
.nz-rev__n { font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.nz-rev__w { display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.nz-rev__w small { color: var(--ink-muted); }
.nz-rev__tip { color: var(--gold-ink) !important; }
.nz-rev--ok .nz-rev__n { color: #1f9d55; }
.nz-rev--no .nz-rev__n { color: var(--red); }

/* ── adult look: calm, dark, typographic ────────────────────────────── */
.nz-hero { margin-top: 10px; padding: 26px 22px; border-radius: 22px; background: #10261a; color: #f5efe0; position: relative; overflow: hidden; }
.nz-hero__digits { position: absolute; right: -10px; top: 6px; font-family: var(--serif); font-size: 64px; color: rgba(232,182,76,.12); white-space: nowrap; pointer-events: none; }
.nz-hero__t { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 7vw, 50px); margin: 0 0 6px; position: relative; }
.nz-hero__p { margin: 0; max-width: 620px; color: #cfd8cf; position: relative; }

.nz--adults .nz-hud { color: var(--ink-soft); }
.nz--adults .nz-hud__lvl { background: #10261a; color: #e8b64c; }
.nz--adults .nz-hud__score b { color: #10261a; }
.nz--adults .nz-card { background: #10261a; color: #f5efe0; box-shadow: 0 14px 34px rgba(16,38,26,.28); }
.nz--adults .nz-ask { color: #e8b64c; text-transform: uppercase; font-size: 13px; letter-spacing: .12em; }
.nz--adults .nz-prompt { font-family: var(--serif); font-size: clamp(56px, 15vw, 104px); color: #fff; }
.nz--adults .nz-prompt--words { font-size: clamp(28px, 7vw, 46px); font-style: italic; color: #f5efe0; }
.nz--adults .nz-opt { background: transparent; color: #f5efe0; border: 1.5px solid rgba(245,239,224,.28); }
.nz--adults .nz-opt__k { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(245,239,224,.12); color: #e8b64c; flex: none; }
.nz--adults .nz-opts--words .nz-opt__t { font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.nz--adults .nz-opts--nums .nz-opt__t { font-size: 26px; font-variant-numeric: tabular-nums; }
.nz--adults .nz-opt:hover:not(:disabled) { border-color: #e8b64c; background: rgba(232,182,76,.08); }
.nz--adults .nz-opt.is-picked { border-color: #e8b64c; }
.nz--adults .nz-opt.is-right { background: #1f9d55; border-color: #1f9d55; color: #fff; opacity: 1; }
.nz--adults .nz-opt.is-wrong { background: #8f1d27; border-color: #8f1d27; color: #fff; }
.nz--adults .nz-input { background: rgba(245,239,224,.06); color: #fff; border: 1.5px solid rgba(245,239,224,.3); }
.nz--adults .nz-input:focus { border-color: #e8b64c; }
.nz--adults .nz-input.is-right { border-color: #1f9d55; background: rgba(31,157,85,.15); }
.nz--adults .nz-input.is-wrong { border-color: #e05a64; background: rgba(206,43,55,.15); }
.nz--adults .nz-accent { background: rgba(245,239,224,.1); color: #f5efe0; border: 1.5px solid rgba(245,239,224,.3); }
.nz--adults .nz-timer { height: 4px; border-radius: 2px; background: rgba(245,239,224,.12); }
.nz--adults .nz-timer i { background: #e8b64c; }
.nz--adults .nz-timer span { display: none; }
.nz--adults .nz-timer.is-low i { background: #e05a64; }
.nz--adults .nz-fb__box.is-ok { background: #e3f4e8; color: #14532d; }
.nz--adults .nz-fb__box.is-no { background: #fbeaea; color: #6b1720; }
.nz--adults .nz-fb__tip { color: var(--ink-soft); }
.nz--adults .nz-next { background: #10261a; color: #f5efe0; }
.nz--adults .nz-next::after { background: #e8b64c; }

/* ── kids look: bubbles, owl, keypad ────────────────────────────────── */
.nz-hero--kids { background: radial-gradient(circle at 15% 20%, #a78bfa, transparent 45%), radial-gradient(circle at 90% 80%, #f472b6, transparent 40%), linear-gradient(135deg, #6d28d9, #4c1d95); }
.nz--kids .nz-hud__lvl { background: #6d28d9; color: #fff; }
.nz--kids .nz-hud__score b { color: #6d28d9; }
.nz--kids .nz-card { background: #fff; box-shadow: 0 2px 0 var(--line-strong), 0 12px 30px rgba(76,29,149,.15); padding-top: 30px; }
.nz--kids .nz-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7); }
.nz--kids .nz-ask { color: #6d28d9; font-size: 17px; }
.nz--kids .nz-prompt { display: inline-block; min-width: 150px; padding: 14px 26px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 6px 0 #6d28d9; font-weight: 900; font-size: clamp(54px, 16vw, 96px); animation: gpop .4s cubic-bezier(.2, 1.6, .4, 1); }
.nz--kids .nz-prompt--words { font-size: clamp(26px, 7vw, 42px); padding: 16px 22px; }
.nz--kids .nz-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nz--kids .nz-opt { --c: #3b82f6; --s: #1d4ed8; justify-content: center; text-align: center; min-height: 84px; border: 0; color: #fff; background: var(--c); box-shadow: 0 6px 0 var(--s); }
.nz--kids .nz-opt--1 { --c: #f43f5e; --s: #be123c; }
.nz--kids .nz-opt--2 { --c: #f59e0b; --s: #b45309; }
.nz--kids .nz-opt--3 { --c: #22c55e; --s: #15803d; }
.nz--kids .nz-opt__k { display: none; }
.nz--kids .nz-opts--words .nz-opt__t { font-size: clamp(16px, 4.4vw, 22px); }
.nz--kids .nz-opts--nums .nz-opt__t { font-size: clamp(28px, 8vw, 40px); }
.nz--kids .nz-opt:active:not(:disabled), .nz--kids .nz-opt.is-picked { transform: translateY(4px); box-shadow: 0 2px 0 var(--s); }
.nz--kids .nz-opt.is-right { --c: #16a34a; --s: #14532d; opacity: 1; animation: gright .5s ease-out; box-shadow: 0 6px 0 var(--s), 0 0 0 5px #bbf7d0; transform: none; }
.nz--kids .nz-opt.is-wrong { --c: #7f1d1d; --s: #450a0a; }
.nz--kids .nz-input { border: 3px solid #c4b5fd; background: #faf5ff; color: #4c1d95; font-size: 30px; min-height: 68px; }
.nz--kids .nz-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.nz--kids .nz-input.is-right { border-color: #16a34a; background: #f0fdf4; }
.nz--kids .nz-input.is-wrong { border-color: #e11d48; background: #fff1f2; }
.nz--kids .nz-accent { background: #ede9fe; color: #6d28d9; border: 0; box-shadow: 0 4px 0 #c4b5fd; }
.nz-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 340px; margin: 0 auto; width: 100%; }
.nz-key { min-height: 62px; border: 0; border-radius: 18px; font: inherit; font-size: 28px; font-weight: 900; color: #4c1d95; background: #ede9fe; box-shadow: 0 5px 0 #c4b5fd; cursor: pointer; transition: transform .06s; }
.nz-key:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #c4b5fd; }
.nz-key--ok { background: #22c55e; color: #fff; box-shadow: 0 5px 0 #15803d; }
.nz-key--del { background: #fee2e2; color: #b91c1c; box-shadow: 0 5px 0 #fca5a5; }
.nz--kids .nz-timer { height: 16px; border-radius: 8px; background: #f3f0ff; }
.nz--kids .nz-timer i { background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7); }
.nz--kids .nz-timer span { color: #4c1d95; }
.nz--kids .nz-timer.is-low i { background: #f43f5e; }
.nz--kids .nz-timer.is-low { animation: gpulse .5s infinite alternate; }
.nz-owl { position: absolute; left: 12px; top: 14px; display: flex; align-items: center; gap: 6px; }
.nz-owl__b { font-size: 34px; line-height: 1; display: inline-block; }
.nz-owl.is-happy .nz-owl__b { animation: nzhop .6s ease-out; }
.nz-owl.is-sad .nz-owl__b { animation: gshake .45s; }
.nz-owl__say { background: #fef3c7; color: #92400e; font-weight: 800; font-size: 13px; border-radius: 12px; padding: 3px 9px; }
.nz-owl__say:empty { display: none; }
.nz--kids .nz-fb__box.is-ok { background: #dcfce7; color: #14532d; }
.nz--kids .nz-fb__box.is-no { background: #ffe4e6; color: #881337; }
.nz--kids .nz-fb__answer b { color: #6d28d9; }
.nz--kids .nz-next { background: #6d28d9; color: #fff; box-shadow: 0 4px 0 #4c1d95; }
.nz--kids .nz-next::after { background: rgba(255,255,255,.6); }
.nz--kids .nz-dots i.now { background: #a855f7; }

@keyframes nzhop { 0% { transform: translateY(0); } 40% { transform: translateY(-12px) rotate(-8deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nz-stage * { animation: none !important; transition: none !important; } }

/* Melitalia Challenge overtime: the clock runs on in red (−1s, −2s…), points going down. */
.nz-timer.is-over i { background: #e05a64; transform-origin: left; }
.nz-timer.is-over span { color: #c0392b; font-weight: 800; }
.nz-fb__over { color: #b0341f; font-weight: 700; }