/* =======================================================================
   Тройки — детская таблица умножения на 3.
   Стратегия CSS: mobile-first. Базовые правила — для телефона/узкого
   планшета (до 720px). Медиазапрос `min-width: 721px` расширяет до
   desktop. Все геометрические/временны́е значения — через CSS-токены
   в :root, чтобы не рассыпать магические числа.
   ======================================================================= */

/* ------------------------------ TOKENS --------------------------------- */

:root {
    /* Поверхности */
    --surface:        #ffffff;
    --surface-soft:   #fff8e9;
    --ink:            #2d2a26;
    --ink-soft:       #6b6258;
    --ink-quiet:      #a39b8f;

    --ok:             #6fa86f;
    --slot-border:    #e7dfcd;
    --slot-border-soft:#f0e8d4;

    --formula-bg:     #2d2a26;
    --formula-ink:    #fff8e9;

    /* Акценты — перекрываются inline на body через --accent/-soft/-deep */
    --accent:         #e06a5c;
    --accent-soft:    #fce4de;
    --accent-deep:    #b24a3d;

    --bg:             #fdf8ed;
    --bg-alt:         #fef3df;

    /* Геометрия */
    --radius-sm:      14px;
    --radius-md:      20px;
    --radius-lg:      28px;
    --radius-pill:    999px;

    --gap-xs:          6px;
    --gap-sm:         10px;
    --gap-md:         16px;
    --gap-lg:         24px;
    --gap-xl:         32px;

    --pad-page-x:     16px;
    --pad-page-y:     24px;
    --pad-topbar-x:   16px;
    --pad-topbar-y:   12px;

    --size-item-lg:   56px;
    --size-item-md:   44px;
    --size-item-sm:   40px;
    --size-emblem-topbar: 24px;
    --size-emblem-level:  56px;

    --h-progress:     10px;
    --h-btn:          60px;
    --min-slot:      170px;

    /* Типографика */
    --font: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI",
            "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;

    --fs-h1:         28px;
    --fs-sub:        16px;
    --fs-eyebrow:    12px;
    --fs-btn:        18px;
    --fs-stars:      18px;
    --fs-choice:     38px;
    --fs-formula:    26px;

    /* Длительности и easing */
    --dur-fast:      150ms;
    --dur-med:       300ms;
    --dur-slow:      500ms;
    --dur-shimmer:  2200ms;
    --ease-out:      cubic-bezier(.3,.8,.4,1);
    --ease-spring:   cubic-bezier(.3,.8,.4,1.4);

    /* Тени */
    --shadow-soft: 0 2px 6px rgba(60,40,20,.05),
                   0 10px 24px rgba(60,40,20,.07);
    --shadow-lift: 0 4px 10px rgba(60,40,20,.06),
                   0 18px 40px rgba(60,40,20,.10);
    --shadow-stars: 0 4px 14px rgba(244,197,77,.25),
                    0 2px 6px  rgba(60,40,20,.06);

    /* z-index */
    --z-toast:       100;
    --z-celebrate:    90;
    --z-drag:       9999;
}

/* Режимы: задают фон и приглушённые бордеры */
body.mode-girl {
    --bg:      #fdf3f6;
    --bg-alt:  #fbe4ec;
    --surface-soft: #fff5f8;
    --slot-border: #f1d8e3;
    --slot-border-soft: #f8e7ef;
}
body.mode-boy {
    --bg:      #f1f6fb;
    --bg-alt:  #e6eef7;
    --surface-soft: #f3f7fb;
    --slot-border: #d8e2ed;
    --slot-border-soft: #e8f0f8;
}

/* ------------------------------ RESET ---------------------------------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 10% 0%,   var(--accent-soft) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, var(--bg-alt)     0%, transparent 40%),
        var(--bg);
    background-attachment: fixed;
}

/* ------------------------------ TOPBAR --------------------------------- */

.topbar {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: var(--pad-topbar-y) var(--pad-topbar-x) 0;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.topbar__home {
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.55);
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
    flex-shrink: 0;
}
.topbar__home:hover { background: #fff; color: var(--ink); }
.page-start .topbar__home { visibility: hidden; }

/* --------- progress-bar --------- */

.progress {
    flex: 1;
    min-width: 80px;
    max-width: 420px;
    height: var(--h-progress);
    background: rgba(255,255,255,.7);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(60,40,20,.08);
    transition: transform var(--dur-fast) ease;
}
.progress.is-hidden { visibility: hidden; }

.progress__fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 70%, #fff) 0%,
        var(--accent) 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: width var(--dur-slow) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.progress__fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%,
                rgba(255,255,255,.55) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: progressShimmer var(--dur-shimmer) linear infinite;
}
@keyframes progressShimmer {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.progress.is-bump .progress__fill { animation: progressBump 400ms ease; }
@keyframes progressBump {
    0%   { transform: scaleY(1); }
    45%  { transform: scaleY(1.35); }
    100% { transform: scaleY(1); }
}

.progress.is-pause .progress__fill {
    animation: progressShake 550ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes progressShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.progress.is-complete .progress__fill {
    background: linear-gradient(90deg, var(--accent) 0%, #f4c54d 100%);
    box-shadow: 0 0 16px rgba(244,197,77,.7),
                0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* --------- stars --------- */

.stars {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    background: #fff;
    padding: 8px 14px 8px 12px;
    border-radius: var(--radius-pill);
    font-weight: 800;
    color: var(--accent-deep);
    box-shadow: var(--shadow-stars);
    font-variant-numeric: tabular-nums;
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.stars.is-bump { animation: bump 600ms var(--ease-spring); }
.stars.is-bump::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: inherit;
    border: 3px solid #f4c54d;
    opacity: 0;
    pointer-events: none;
    animation: ring 800ms ease-out forwards;
}
.stars__icon {
    width: var(--size-emblem-topbar);
    height: var(--size-emblem-topbar);
    display: block;
    animation: shimmer 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(244,197,77,.35));
}
.stars__count {
    font-size: var(--fs-stars);
    line-height: 1;
    min-width: 14px;
    text-align: center;
}

/* Звезда-вспышка (starShine) */
.stars.is-shine { animation: starShine 1.3s ease; }
.stars.is-shine .stars__icon { animation: starShineIcon 1.3s ease; }
@keyframes starShine {
    0%   { transform: scale(1);    box-shadow: var(--shadow-stars); }
    35%  { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(244,197,77,.35); }
    70%  { transform: scale(.97); }
    100% { transform: scale(1);    box-shadow: var(--shadow-stars); }
}
@keyframes starShineIcon {
    0%   { filter: drop-shadow(0 0 4px rgba(244,197,77,.35)); transform: rotate(0); }
    50%  { filter: drop-shadow(0 0 18px rgba(244,197,77,1));
           transform: rotate(-18deg) scale(1.15); }
    100% { filter: drop-shadow(0 0 4px rgba(244,197,77,.35)); transform: rotate(0); }
}

@keyframes bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    70%  { transform: scale(.96); }
    100% { transform: scale(1); }
}
@keyframes ring {
    0%   { opacity: .9; transform: scale(.9); }
    100% { opacity: 0;  transform: scale(1.4); }
}
@keyframes shimmer {
    0%,100% { transform: scale(1) rotate(0);
              filter: drop-shadow(0 0 4px rgba(244,197,77,.35)); }
    50%     { transform: scale(1.08) rotate(-8deg);
              filter: drop-shadow(0 0 12px rgba(244,197,77,.7)); }
}

.plus-one {
    position: absolute;
    right: 16px; top: 0;
    font-size: 18px;
    font-weight: 800;
    color: #e07a00;
    pointer-events: none;
    animation: plusFloat 900ms ease-out forwards;
}
@keyframes plusFloat {
    0%   { opacity: 0; transform: translateY(0)    scale(.6); }
    15%  { opacity: 1; transform: translateY(-6px) scale(1.15); }
    100% { opacity: 0; transform: translateY(-38px) scale(1); }
}

.sparkle {
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f4c54d;
    transform: translate(-50%,-50%);
    pointer-events: none;
    animation: sparkle 850ms ease-out forwards;
    box-shadow: 0 0 8px rgba(244,197,77,.8);
}
@keyframes sparkle {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(.4); }
    100% { opacity: 0;
           transform: translate(calc(-50% + var(--sx,0px)),
                                calc(-50% + var(--sy,0px))) scale(.1); }
}

/* ------------------------------ PAGE ----------------------------------- */

.page {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: var(--pad-page-y) var(--pad-page-x) var(--gap-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.page__header { margin: 0; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent-deep);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    margin-bottom: 8px;
}

h1 {
    font-size: var(--fs-h1);
    line-height: 1.15;
    margin: 0 0 var(--gap-sm);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.subtitle {
    font-size: var(--fs-sub);
    color: var(--ink-soft);
    margin: 0;
    max-width: 620px;
    line-height: 1.45;
    font-weight: 500;
}

/* --------- mode-switch --------- */

.mode-switch {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    background: rgba(255,255,255,.7);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-soft);
    width: 100%;
    justify-content: center;
    align-self: center;
}
.mode-btn {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    color: var(--ink-soft);
    padding: 12px 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-decoration: none;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.mode-btn:hover { color: var(--ink); }
.mode-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-soft);
}
.mode-btn__dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block;
}
.mode-btn__dot--boy  { background: linear-gradient(135deg, #3ab89a, #2d68a5); }
.mode-btn__dot--girl { background: linear-gradient(135deg, #e86a9a, #e88a6a); }

/* форма new-player: radio → label как pill */
.mode-switch--form { position: relative; }
.mode-switch--form input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mode-switch--form input[type="radio"]:checked + .mode-btn {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-soft);
}

/* --------- кнопки --------- */

.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
    padding: 16px 24px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    min-height: var(--h-btn);
    width: 100%;
    min-width: 0;
    box-shadow: 0 4px 0 var(--accent-deep), 0 8px 18px rgba(0,0,0,.08);
    transition: transform var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease,
                background var(--dur-fast) ease;
}
.btn:hover { filter: brightness(1.03); }
.btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--accent-deep), 0 4px 10px rgba(0,0,0,.08);
}
.btn--ghost {
    background: transparent;
    color: var(--ink-soft);
    border: 2px solid var(--slot-border);
    box-shadow: none;
}
.btn--ghost:hover { background: var(--surface); color: var(--ink); }
.btn--ghost:active { transform: translateY(1px); }
.btn-row {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ------------------------------ TABLE 9×9 (start) ---------------------- */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.mt-table {
    border-collapse: separate;
    border-spacing: 4px;
    margin: 0 auto;
    font-variant-numeric: tabular-nums;
}

.mt-table__corner,
.mt-table__head {
    background: rgba(255,255,255,.7);
    color: var(--ink-soft);
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    border-radius: var(--radius-sm);
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
}
.mt-table__corner { color: var(--ink-quiet); }

.mt-cell-wrap {
    padding: 0;
    width: 56px;
}

.mt-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    text-decoration: none;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--accent-soft);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(60,40,20,.06);
    font-weight: 800;
    gap: 2px;
    transition: transform var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                background var(--dur-fast) ease;
}
.mt-cell:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-soft);
}
.mt-cell.is-done {
    background: linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 140%);
    border-color: var(--accent);
    box-shadow: 0 2px 0 var(--accent-deep),
                0 6px 12px rgba(0,0,0,.06);
}
.mt-cell__math {
    font-size: 13px;
    color: var(--accent-deep);
    line-height: 1;
    letter-spacing: -0.01em;
}
.mt-cell__emblem {
    line-height: 0;
}
.mt-cell__emblem svg { width: 20px; height: 20px; display: block; }
.mt-cell.is-done::after {
    content: '★';
    position: absolute;
    font-size: 11px;
    color: #e07a00;
    margin-top: -44px;
    margin-left: 28px;
    text-shadow: 0 0 6px rgba(244,197,77,.8);
}
.mt-cell { position: relative; }

/* ------------------------------ SCENE (lesson) ------------------------- */

.scene {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--gap-sm);
}
.group {
    background: var(--surface);
    border: 2px solid var(--accent-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 18px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    opacity: 0;
    transform: translateY(16px);
    animation: rise var(--dur-slow) ease forwards;
}
.group:nth-child(1) { animation-delay: 100ms; }
.group:nth-child(2) { animation-delay: 300ms; }
.group:nth-child(3) { animation-delay: 500ms; }
.group__items {
    display: flex; flex-direction: column;
    gap: 8px; margin-bottom: auto; align-items: center;
}
.item {
    position: relative;
    width: var(--size-item-md);
    height: var(--size-item-md);
    display: flex; align-items: center; justify-content: center;
    user-select: none;
}
.item svg { display: block; width: 42px; height: 42px; }

/* Порядковый номер на предмете: «считаем 1, 2, 3…» без хаоса. */
.item__index {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.12);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}
/* Для совсем маленьких предметов — чуть мельче */
.group__items[style*="--item-size: 24px"] .item__index,
.group__items[style*="--item-size: 28px"] .item__index,
.slot__items[style*="--item-size: 24px"]  .item__index,
.slot__items[style*="--item-size: 28px"]  .item__index {
    min-width: 13px; height: 13px; font-size: 9px; top: -4px; right: -4px;
}
.group__caption, .slot__caption {
    font-size: 14px;
    color: var(--accent-deep);
    font-weight: 800;
    background: var(--accent-soft);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}
.group__caption { margin-top: var(--gap-md); }

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ------------------------------ FORMULA -------------------------------- */

.formula {
    background: var(--formula-bg);
    color: var(--formula-ink);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    display: flex; flex-direction: column;
    gap: 4px; align-items: flex-start;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.formula__math {
    font-size: var(--fs-formula);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: flex; gap: 8px;
    align-items: baseline; flex-wrap: wrap;
}
.formula__op { color: var(--ink-quiet); font-weight: 700; }
.formula__a, .formula__b { color: var(--formula-ink); }
.formula__res {
    color: var(--accent); font-weight: 800;
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.formula__note { font-size: 13px; opacity: .75; font-weight: 600; }

/* ------------------------------ PRACTICE ------------------------------- */

.shelf {
    background: var(--surface-soft);
    border: 2px dashed var(--slot-border);
    border-radius: var(--radius-md);
    padding: 12px;
    min-height: 80px;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: center;
}
.shelf .item, .shelf .item svg {
    width: var(--size-item-sm); height: var(--size-item-sm);
}

.slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--gap-sm);
}
.slot {
    background: var(--surface);
    border: 2px dashed var(--slot-border);
    border-radius: var(--radius-lg);
    min-height: var(--min-slot);
    padding: 14px 12px;
    display: flex; flex-direction: column;
    align-items: center; gap: var(--gap-sm);
    transition: border-color var(--dur-fast) ease,
                background var(--dur-fast) ease,
                transform var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease;
}
.slot.is-eligible {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.slot.is-over {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent),
                0 8px 20px rgba(0,0,0,.08);
}
.slot.is-over-deny {
    border-color: var(--ink-quiet);
    background: rgba(0,0,0,.03);
}
.slot.is-full {
    border-style: solid;
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 140%);
    box-shadow: var(--shadow-soft);
}
.slot.is-shake { animation: shake 420ms cubic-bezier(.36,.07,.19,.97) both; }
.slot__caption { margin-top: auto; }

/* «Я понял»: короткий акцент после верного решения. */
.slot.is-resolved {
    animation: resolveSlot 680ms cubic-bezier(.3,.8,.4,1.2);
}
@keyframes resolveSlot {
    0%   { transform: scale(1);   box-shadow: var(--shadow-soft); }
    35%  { transform: scale(1.04);
           box-shadow: 0 0 0 4px var(--accent-soft),
                       0 14px 32px color-mix(in srgb, var(--accent) 30%, transparent); }
    100% { transform: scale(1);   box-shadow: var(--shadow-soft); }
}
.slot.is-resolved .slot__items .item {
    animation: itemHug 500ms ease;
}
@keyframes itemHug {
    0%   { transform: scale(1); }
    40%  { transform: scale(.94); }
    100% { transform: scale(1); }
}
.formula.is-resolved {
    animation: resolveFormula 720ms cubic-bezier(.3,.8,.4,1.2);
}
@keyframes resolveFormula {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.formula.is-resolved .formula__res {
    animation: resultPulse 900ms ease-out;
}
@keyframes resultPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22);
           text-shadow: 0 0 28px var(--accent),
                        0 0 8px  color-mix(in srgb, var(--accent) 60%, transparent); }
    100% { transform: scale(1);
           text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
}

@keyframes shake {
    10%,90%       { transform: translateX(-2px); }
    20%,80%       { transform: translateX(4px); }
    30%,50%,70%   { transform: translateX(-6px); }
    40%,60%       { transform: translateX(6px); }
}

.item--drag { cursor: grab; touch-action: none; transition: transform var(--dur-fast) ease; }
.item--drag:active { cursor: grabbing; }
.item.is-dragging { opacity: .45; }

/* ghost-клон на время жеста — помечен отдельным классом для надёжной
   массовой уборки через querySelectorAll(".drag-ghost") */
.drag-ghost {
    opacity: .95;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

/* ------------------------------ CHECK ---------------------------------- */

.check-strip {
    background: var(--surface);
    border: 2px solid var(--accent-soft);
    border-radius: var(--radius-md);
    padding: 10px;
    display: flex; gap: 8px;
    justify-content: center; flex-wrap: wrap;
}
.check-strip__group {
    display: flex; gap: 4px; align-items: center;
    padding: 6px 10px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
}

.choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
}
.choice {
    background: var(--surface);
    border: 3px solid var(--slot-border);
    border-radius: var(--radius-lg);
    padding: 26px 16px;
    font-family: inherit;
    font-size: var(--fs-choice);
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    transition: transform var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease,
                color var(--dur-fast) ease;
    min-height: 96px;
    font-variant-numeric: tabular-nums;
}
.choice:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
    color: var(--accent-deep);
}

.hint {
    background: var(--accent-soft);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    color: var(--accent-deep);
    font-size: 16px;
    font-weight: 700;
}

/* ------------------------------ DONE ----------------------------------- */

.done {
    text-align: center;
    padding-top: 10px;
    display: flex; flex-direction: column;
    align-items: center; gap: var(--gap-md);
}
.done__burst {
    display: flex; align-items: flex-end; gap: 10px;
    animation: bounce 900ms ease;
}
.done__burst > *:nth-child(2) { transform: translateY(-8px); }
@keyframes bounce {
    0%   { transform: translateY(20px)  scale(.8);  opacity: 0; }
    60%  { transform: translateY(-6px)  scale(1.05);opacity: 1; }
    100% { transform: translateY(0)     scale(1);   opacity: 1; }
}
.done .formula { align-items: center; max-width: 440px; width: 100%; }
.done .formula__math { justify-content: center; }

/* ------------------------------ TOAST ---------------------------------- */

.toast {
    position: fixed;
    left: 50%; bottom: 16px;
    transform: translate(-50%, 40px);
    background: var(--formula-bg);
    color: var(--formula-ink);
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
    z-index: var(--z-toast);
    max-width: 90vw;
    text-align: center;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast--nudge  { background: var(--accent-deep); }
.toast--win    { background: var(--accent); color: #fff; }

/* ------------------------------ PLAYER BAR ----------------------------- */

.player-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,.72);
    border: 2px solid var(--accent-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    font-size: 14px;
}
.player-bar__label { color: var(--ink-soft); font-weight: 600; }
.player-bar__name {
    font-weight: 800; color: var(--ink);
    font-size: 16px;
    flex: 1 1 auto;
}
.player-bar__link {
    color: var(--accent-deep);
    font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.9);
    transition: background var(--dur-fast) ease;
    font-size: 13px;
}
.player-bar__link:hover { background: var(--accent-soft); }
.player-bar__link--danger { color: #b4483d; }
.player-bar__link--danger:hover { background: #fbdad5; }

/* ------------------------------ WELCOME / PLAYER-LIST ------------------ */

.welcome {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}
.welcome__or {
    text-align: center;
    color: var(--ink-quiet);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 4px 0;
}
.text-input {
    width: 100%;
    border: 2px solid var(--slot-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color var(--dur-fast) ease;
}
.text-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.new-player-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.player-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
}
.player-card {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    padding: 16px 18px;
    background: #fff;
    border: 2px solid var(--accent-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--ink);
    transition: transform var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease;
}
.player-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.player-card.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}
.player-card__avatar {
    width: 48px; height: 48px; border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; font-size: 22px;
}
.player-card__avatar--boy  {
    background: linear-gradient(135deg, #3ab89a, #2d68a5);
}
.player-card__avatar--girl {
    background: linear-gradient(135deg, #e86a9a, #e88a6a);
}
.player-card__avatar--plus {
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 28px;
}
.player-card__name {
    flex: 1; font-size: 18px; font-weight: 800;
}
.player-card__stars {
    color: #c79828; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.player-card--new {
    border-style: dashed;
    background: var(--surface-soft);
}

/* ------------------------------ AVATAR / DEV -------------------------- */

.dev-link {
    position: fixed;
    right: 14px; bottom: 14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    color: var(--ink-quiet);
    font-weight: 800;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    z-index: 20;
    opacity: .5;
}
.dev-link:hover { opacity: 1; background: #fff; }

.dev-panel {
    background: #2d2a26;
    color: #fff8e9;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dev-panel__badge {
    background: #e9a530;
    color: #2d2a26;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .08em;
}
.dev-panel__off {
    margin-left: auto;
    color: #fff8e9;
    text-decoration: none;
    background: rgba(255,255,255,.12);
    padding: 4px 10px;
    border-radius: 999px;
}

/* ------------------------------ AVATAR / 3D --------------------------- */

.avatar-scene {
    background:
        radial-gradient(circle at 50% 20%,
            color-mix(in srgb, var(--accent) 14%, #ffffff) 0%,
            #ffffff 55%, var(--accent-soft) 120%);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.7),
        var(--shadow-lift);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.avatar-scene::before, .avatar-scene::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
    opacity: .55;
    z-index: 0;
}
.avatar-scene::before {
    top: -10%; left: -10%;
    width: 45%; aspect-ratio: 1;
    background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.avatar-scene::after {
    bottom: -10%; right: -10%;
    width: 38%; aspect-ratio: 1;
    background: color-mix(in srgb, #f4c54d 40%, transparent);
}
.avatar-scene canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    touch-action: none;
    position: relative;
    z-index: 1;
    border-radius: calc(var(--radius-lg) - 4px);
}

.avatar-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: var(--gap-sm);
}
.item-card {
    background: linear-gradient(180deg, #fff, #fdfbf5);
    border: 2px solid var(--slot-border);
    border-radius: var(--radius-lg);
    padding: 16px 10px 14px;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                box-shadow var(--dur-fast) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    box-shadow: 0 2px 6px rgba(60,40,20,.05);
}
.item-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-soft);
}
.item-card:active { transform: translateY(0); }
.item-card.is-equipped {
    border-color: var(--accent);
    background: linear-gradient(180deg, #fff, var(--accent-soft));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent),
                0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}
.item-card.is-equipped::after {
    content: "✓";
    position: absolute; top: 8px; right: 10px;
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.item-card.is-locked {
    opacity: .6;
    cursor: not-allowed;
    filter: grayscale(.5);
    background: var(--surface-soft);
}
.item-card.is-locked::before {
    content: "🔒";
    position: absolute; top: 6px; left: 8px;
    font-size: 14px;
    opacity: .7;
}
.item-card__emoji {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.1));
}
.item-card__name {
    font-weight: 800;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.15;
    text-align: center;
}
.item-card__cost {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.item-card.is-locked .item-card__cost {
    color: var(--accent-deep);
    font-weight: 800;
}
.item-card.is-equipped .item-card__cost {
    color: var(--accent-deep);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
}

/* на большом экране — крупнее карточки */
@media (min-width: 721px) {
    .avatar-items {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        gap: var(--gap-md);
    }
    .item-card { padding: 20px 12px 16px; }
    .item-card__emoji { font-size: 44px; }
    .item-card__name  { font-size: 16px; }
    .item-card__cost  { font-size: 12px; }
}

/* ------------------------------ LEADERBOARD --------------------------- */

.leaderboard {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}
.lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.lb-row.is-me {
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}
.lb-row__pos {
    font-size: 22px; font-weight: 800;
    color: var(--ink-soft);
    min-width: 32px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.lb-row__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    flex-shrink: 0;
}
.lb-row__avatar--boy  { background: linear-gradient(135deg, #3ab89a, #2d68a5); }
.lb-row__avatar--girl { background: linear-gradient(135deg, #e86a9a, #e88a6a); }
.lb-row__name { flex: 1; font-weight: 800; font-size: 16px; }
.lb-row__stars { color: #c79828; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-row__done { color: var(--ink-quiet); font-size: 12px; font-weight: 600; }

/* ---------------- RESULT OVERLAY ---------------- */
/* Чистый всплеск числа по центру: без blur, без затемнения —
   результат должен БИТЬ в глаза, а не размываться. */

.result-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
}

.result-overlay__num {
    font-family: var(--font);
    font-weight: 900;
    font-size: clamp(96px, 26vh, 260px);
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    text-shadow: 0 0 56px color-mix(in srgb, var(--accent) 65%, transparent),
                 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
    transform: scale(.5);
    opacity: 0;
}
.result-overlay.is-on .result-overlay__num {
    animation: resultPop 1500ms cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes resultPop {
    0%   { transform: scale(.5); opacity: 0; }
    30%  { transform: scale(1.2); opacity: 1; }
    50%  { transform: scale(1);   opacity: 1; }
    80%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.12); opacity: 0; }
}

/* ------------------------------ ROW PROGRESS (start) ------------------- */

.mt-row-head {
    min-width: 70px !important;
    width: 70px !important;
    height: 56px !important;
    padding: 0 4px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.mt-row-head__num {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mt-row-head__stars {
    font-size: 10px;
    font-weight: 800;
    color: #c79828;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.mt-row-progress {
    width: 48px;
    height: 5px;
    background: rgba(0,0,0,.08);
    border-radius: 999px;
    overflow: hidden;
}
.mt-row-progress__fill {
    height: 100%;
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--ink-soft) 30%, #fff),
                #f4c54d);
    border-radius: 999px;
    transition: width var(--dur-slow) var(--ease-out);
}
.mt-cell__count {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    font-weight: 800;
    color: var(--accent-deep);
    background: #fff;
    border-radius: 6px;
    padding: 1px 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    line-height: 1;
}

/* ------------------------------ CELEBRATE ------------------------------ */

.celebrate {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: var(--z-celebrate);
    overflow: hidden;
}
.celebrate.is-on .confetti { animation: burst 1.4s ease-out forwards; }
.confetti {
    position: absolute;
    left: 50%; top: 40%;
    width: 10px; height: 14px;
    border-radius: 3px;
    opacity: 0;
    transform: translate(-50%,-50%);
    animation-delay: var(--delay,0s);
}
@keyframes burst {
    0%   { opacity: 0; transform: translate(-50%,-50%) rotate(0); }
    10%  { opacity: 1; }
    100% { opacity: 0;
           transform: translate(calc(-50% + var(--dx,0px)),
                                calc(-50% + var(--dy,0px)))
                      rotate(var(--rot,180deg)); }
}

/* ======================================================================
   DESKTOP / TABLET широкий — ≥ 721px.
   Расширяем сетки, увеличиваем шрифты, выбираем большие размеры.
   ====================================================================== */

@media (min-width: 721px) {
    :root {
        --pad-page-x:    28px;
        --pad-page-y:    40px;
        --pad-topbar-x:  28px;
        --pad-topbar-y:  16px;
        --fs-h1:         42px;
        --fs-sub:        19px;
        --fs-eyebrow:    13px;
        --fs-btn:        19px;
        --fs-stars:      22px;
        --fs-choice:     52px;
        --fs-formula:    38px;
        --h-progress:    14px;
        --size-emblem-topbar: 28px;
        --size-emblem-level:  72px;
    }

    .topbar { gap: var(--gap-md); }
    .topbar__home { font-size: 15px; padding: 6px 14px; }

    .btn { padding: 18px 32px; width: auto; min-width: 200px; }
    .btn-row { gap: var(--gap-md); }

    .choices {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap-md);
    }
    .scene, .slots {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: var(--gap-md);
    }

    .mt-cell, .mt-cell-wrap { width: 72px; }
    .mt-cell { height: 72px; }
    .mt-cell__math { font-size: 16px; }
    .mt-cell__emblem svg { width: 24px; height: 24px; }
    .mt-table__corner, .mt-table__head {
        width: 56px; min-width: 56px; height: 56px; font-size: 16px;
    }

    .group { padding: 20px 14px 14px; min-height: auto; }
    .group__items { gap: 10px; }
    .item { width: var(--size-item-lg); height: var(--size-item-lg); }
    .item svg { width: 52px; height: 52px; }

    .shelf { padding: 16px; gap: 8px; min-height: 88px; }
    .shelf .item, .shelf .item svg {
        width: var(--size-item-md);
        height: var(--size-item-md);
    }

    .slot { min-height: 180px; padding: 18px 14px 14px; }

    .formula { padding: 24px 28px; }
    .formula__math { gap: 14px; }
    .formula__note { font-size: 15px; }

    .check-strip { padding: 18px; gap: 20px; }
    .check-strip__group { padding: 8px 14px; gap: 6px; }

    .choice { padding: 40px 20px; min-height: 130px; }

    .hint { font-size: 17px; padding: 14px 18px; }

    .stars { padding: 10px 20px 10px 16px; gap: 10px; }

    .toast { bottom: 28px; font-size: 16px; padding: 14px 22px; }
}

/* узкий мобильный — ≤ 360px: чуть ужимаем */
@media (max-width: 360px) {
    :root {
        --fs-h1:      24px;
        --fs-choice:  32px;
        --fs-formula: 22px;
    }
    .level__math { font-size: 34px; }
}

/* prefers-reduced-motion и IS_LIGHT: выключаем анимации */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
    }
}
.is-light .stars__icon,
.is-light .progress__fill::after {
    animation: none !important;
}