/* Токены — копия css/variables.css сайта (цвета, шрифт, отступы, радиусы). */
:root {
    color-scheme: light;
    --bg: #e2e2dc;
    --surface: #f8f8f5;
    --surface-2: #ecece6;
    --fill: #d9d9d2;
    --segment-on: #f8f8f5;
    --line: #dadad3;
    --line-strong: #c2c2b9;
    --ink: #161715;
    --ink-hover: #2f302d;
    --ink-2: #474944;
    --ink-3: #676963;
    --on-ink: #ffffff;
    --accent: #1a6d69;
    --accent-soft: #c9e5e2;
    --gold-soft: #f1e3bd;
    --gold-ink: #6e4f0e;
    --pale: #ffffff; --pale-edge: #cdcdc4;
    --accent-ink: #11504c;
    --warn: #d9520a;
    --danger: #c0392b;
    --shadow-float: 0 16px 48px rgba(22, 23, 21, 0.18);
    --shadow-segment: 0 1px 2px rgba(22, 23, 21, 0.12);
    --chip: rgba(248, 248, 245, 0.84);
    /* Оценки: Butter, мягко, нормально, Ryanair, жёстко — как grades в scene.js */
    --g0: #1a6d69; --g1: #2f8f55; --g2: #a8871c; --g3: #d9620f; --g4: #c0392b;
    --font: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
    --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
    --control: 48px;
    /* Режимы: карьера — цветом игры, заход дня — рассветный, турнир — кубковый */
    --m-career: #1a6d69; --m-career-soft: #c9e5e2;
    --m-daily: #925300; --m-daily-soft: #f3e1c3;
    --m-cup: #5b3a8c; --m-cup-soft: #e2d8f1;
    --ease: 160ms ease;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --m-career: #6fd0cb; --m-career-soft: #16312f;
    --m-daily: #f2b14c; --m-daily-soft: #392912;
    --m-cup: #bda3ec; --m-cup-soft: #2a2140;
    --bg: #111210;
    --surface: #1b1c1a;
    --surface-2: #202120;
    --fill: #2a2b29;
    --segment-on: #3c3d3a;
    --line: #2c2d2a;
    --line-strong: #41423e;
    --ink: #ecede8;
    --ink-hover: #ffffff;
    --ink-2: #bdbfb9;
    --ink-3: #8f928b;
    --on-ink: #161715;
    --accent: #6fd0cb;
    --accent-soft: #16312f;
    --gold-soft: #33290f;
    --gold-ink: #ecc770;
    --pale: #3e3f3b; --pale-edge: transparent;
    --accent-ink: #8fe0db;
    --warn: #ff9f43;
    --danger: #ff7b6b;
    --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-segment: none;
    --chip: rgba(27, 28, 26, 0.84);
    --g0: #6fd0cb; --g1: #7fd08a; --g2: #e2c35a; --g3: #ff9f43; --g4: #ff6b5b;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    /* Без зума двойным тапом, выделения и лупы от долгого нажатия */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
input, select, textarea { -webkit-user-select: text; user-select: text; }

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--fill);
    color: var(--ink-2);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

#scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ─── HUD ─────────────────────────────────────────────────────────────────── */

.hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.hud__bar {
    position: absolute;
    top: max(var(--s-3), env(safe-area-inset-top));
    left: max(var(--s-3), env(safe-area-inset-left));
    right: max(var(--s-3), env(safe-area-inset-right));
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}

.hud__left { flex: 1 1 0; min-width: 0; }
.hud__right { flex: 1 1 0; display: flex; justify-content: flex-end; gap: var(--s-2); }
.hud__center { flex: 0 1 380px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }

.hud__meta {
    margin: 0 0 6px 2px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Без приборов — на табло INOP цветом предупреждения */
/* Размер тот же, что у цифр: иначе ячейки меняют высоту и HUD сдвигается */
.hud.is-blind .ro b { color: var(--warn); }
.readouts {
    display: inline-grid;
    grid-template-columns: repeat(4, auto);
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ro {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: start;
    column-gap: 4px;
    min-width: 70px;
    padding: 4px 10px 5px;
    border-radius: 7px;
}

.ro span {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.ro small { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.ro.is-warn b, .ro small.is-warn { color: var(--warn); }
.ro.is-bad b { color: var(--danger); }
.ro.is-good b { color: var(--accent); }

.papi {
    display: flex;
    flex: none;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-md);
    background: var(--chip);
    transition: opacity 400ms ease;
}

.papi i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger);
}

.papi i.w { background: #ffffff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.papi.is-off { opacity: 0.25; }

.profile {
    width: 100%;
    height: 46px;
    display: block;
}

.icon-btn {
    pointer-events: auto;
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: var(--chip);
    color: var(--ink);
    cursor: pointer;
}

.icon-btn svg, .idle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn--soft { width: 36px; height: 36px; background: var(--surface-2); color: var(--ink-2); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) { .icon-btn--soft:hover { background: var(--fill); color: var(--ink); } }

.callout {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(30px, 6vh, 52px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-shadow: 0 0 14px var(--bg), 0 0 3px var(--bg);
    white-space: nowrap;
    opacity: 0;
}

.callout.is-on { animation: callout 900ms ease-out; }
.callout.is-warn { color: var(--warn); }
.callout.is-big { font-size: clamp(36px, 8vh, 72px); }

@keyframes callout {
    0% { opacity: 0; transform: scale(1.12); }
    10% { opacity: 1; transform: scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Подсказка первых полётов: одна строка над кнопками, пропадает сама */
.hint {
    position: absolute;
    bottom: calc(max(var(--s-4), env(safe-area-inset-bottom)) + 66px);
    left: 50%;
    transform: translateX(-50%);
    /* Ширина по тексту: от left: 50% без неё плашка сжималась в узкий столбик */
    width: max-content;
    max-width: min(520px, calc(100vw - 32px));
    padding: 7px 12px;
    border-radius: var(--r-md);
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    transition: opacity 300ms ease;
}

.hint.is-on { opacity: 1; }

/* Под показаниями: очки серии, справа — плитки условий (на телефоне) */
.hud__row { display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; }

/* Условия захода — в углу, пока летим */
.cond {
    position: fixed;
    right: max(var(--s-4), env(safe-area-inset-right));
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    max-width: min(320px, calc(100% - 240px));
    padding: 7px 12px 8px;
    border-radius: var(--r-md);
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
}

.cond:empty { display: none; }
.cond b { color: var(--ink); font-weight: 600; }

.idle {
    pointer-events: auto;
    position: absolute;
    left: max(var(--s-4), env(safe-area-inset-left));
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 56px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--r-lg);
    background: var(--chip);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: none;
    transition: background-color var(--ease), opacity var(--ease);
}

.idle.is-armed { animation: armed 650ms ease-in-out infinite alternate; }
.idle.is-done { opacity: 0.45; }
.idle.is-done kbd { display: none; }

@keyframes armed {
    from { box-shadow: 0 0 0 0 var(--accent); }
    to { box-shadow: 0 0 0 4px var(--accent); }
}

/* ─── Панели ──────────────────────────────────────────────────────────────── */

/* Панель — колонка; внутри .col — группы, которые в альбомной ориентации телефона
   встают рядом. Прокрутка — только запасной выход: всё должно помещаться. */
.panel {
    --gap: 12px;
    position: fixed;
    top: max(var(--s-4), env(safe-area-inset-top));
    right: max(var(--s-4), env(safe-area-inset-right));
    width: 380px;
    max-width: calc(100% - 2 * var(--s-4));
    max-height: calc(100% - 2 * var(--s-4));
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-float);
    animation: panel-in 220ms ease-out;
}

.panel--small { width: 300px; }
.col, .mode { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

@keyframes panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.panel h1, .panel h2, .panel p { margin: 0; }
.panel h1 { font-size: 26px; font-weight: 700; line-height: 1.1; }
.panel h2 { font-size: 22px; font-weight: 600; line-height: 1.2; }

.menu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.menu__tag { margin-top: 5px !important; color: var(--ink-3); font-size: 14px; }

.sheet__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sheet__head h2 { min-width: 0; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }

.seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--fill);
}

.seg button {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 4px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
}

.seg button[aria-pressed="true"] { background: var(--segment-on); color: var(--ink); box-shadow: var(--shadow-segment); }

/* Выбор самолёта: сетка 4+3, на телефоне и низком экране — лента в ряд */
.planes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.plane {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 4px 6px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: background-color var(--ease), box-shadow var(--ease);
}

.plane canvas { width: 100%; height: 36px; display: block; }
.plane__name { max-width: 100%; overflow: hidden; color: var(--ink-2); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.plane__name .s { display: none; }
.plane__sub { min-height: 14px; color: var(--ink-3); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plane[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.plane[aria-pressed="true"] .plane__name { color: var(--ink); }
.plane.is-locked canvas { opacity: 0.3; }
.plane__lock { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; color: var(--ink-3); }
.plane__lock svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (hover: hover) {
    .plane:hover { background: var(--fill); }
    .seg button:hover { color: var(--ink); }
}

.plane-info, .daily { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.plane-info b, .daily b { color: var(--ink); font-weight: 600; }
.pi__head { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plane-stats { display: flex; flex-direction: column; gap: 10px; }
.plane-stats:empty { display: none; }
.muted { color: var(--ink-3); }

/* Плюсы и минусы самолёта — две колонки */
.pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; font-size: 13px; line-height: 1.35; }
.pc ul { margin: 0; padding: 0; list-style: none; }
.pc li { position: relative; padding-left: 13px; }
.pc li::before { position: absolute; left: 0; font-weight: 700; }
.pc--plus li::before { content: '+'; color: var(--g1); }
.pc--minus li::before { content: '−'; color: var(--g3); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: var(--control);
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--r-sm);
    background: var(--fill);
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ease), opacity var(--ease);
}

.btn--primary { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.btn--primary kbd { background: rgba(127, 127, 127, 0.28); color: inherit; }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-row { display: flex; gap: var(--s-2); }
.btn-row .btn--primary { flex: 1 1 auto; min-width: 0; }
.btn-row .btn:not(.btn--primary) { flex: 0 0 auto; }
/* Кнопка с подписью: продолжить серию — какой уровень, очки, попытки */
.btn--2l { flex-direction: column; gap: 1px; height: auto; min-height: var(--control); padding: 5px 12px; }
.btn__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; opacity: 0.8; }
.btn__sub .lives { margin-left: 0; }

@media (hover: hover) {
    .btn--primary:hover { background: var(--ink-hover); }
    .btn:not(.btn--primary):hover { background: var(--fill); }
}

/* Ливреи: в каждой плитке — самолёт в этой окраске; закрытая — блёклая, с условием */
#livery { width: min(640px, calc(100% - 2 * var(--s-4))); }
.livs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.liv {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 6px 8px 7px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--surface-2);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ease), box-shadow var(--ease);
}
.liv canvas { width: 100%; height: 40px; display: block; margin-bottom: 3px; object-fit: contain; }
.liv__name { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.liv__sub { max-width: 100%; min-height: 15px; overflow: hidden; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.liv__sub b { color: var(--ink-2); font-weight: 600; }
.liv[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.liv.is-locked canvas { opacity: 0.35; }
.liv.is-locked .liv__name { color: var(--ink-2); }
@media (hover: hover) { .liv:hover { background: var(--fill); } }

/* Строка-ссылка: открыть таблицу; две — рядом */
.links { display: flex; gap: var(--s-4); }
.links .link { flex: 1 1 0; min-width: 0; }
.link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    width: 100%;
    height: 34px;
    margin-top: -2px;
    padding: 2px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .link:hover { color: var(--ink); } }
/* Таблицы рекордов — заметной плашкой с кубком и вашим местом: простую строку не замечали */
.link--board { justify-content: flex-start; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: var(--gold-soft); color: var(--gold-ink); font-weight: 600; }
.links .link--board { flex-grow: 1.2; }
.links .link--liv { flex-grow: 1; }
.link--board > span { flex: 1; }
.link--board small { flex: none; color: var(--gold-ink); font-size: 12.5px; font-weight: 500; opacity: 0.8; }
.link--board svg { stroke: currentColor; }
.link--board .link__ico { width: 18px; height: 18px; }
/* Лёгкий шеврон в конце плашки: видно, что это кнопка */
.link--board .link__go { width: 15px; height: 15px; margin-left: -2px; opacity: 0.55; stroke-width: 2.2; }
@media (hover: hover) { .link--board:hover { color: var(--gold-ink); filter: brightness(0.97); } }
/* Ливрея — такой же плашкой, белёсой */
.link--liv { background: var(--pale); box-shadow: inset 0 0 0 1px var(--pale-edge); color: var(--ink); }
@media (hover: hover) { .link--liv:hover { color: var(--ink); } }

.check { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: 14px; cursor: pointer; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
/* Установка и перенос прогресса — одной строкой: в «Управлении» больше нет места */
.app { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 36px; }
.app:empty { display: none; }
.app__btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.app__btn svg, .app__x svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .app__btn:hover { color: var(--ink); } }
.app .btn--sm { flex: 1 1 auto; }
/* Код с кнопками — в один ряд и на узком телефоне */
.app:has(.app__code) { gap: 6px 8px; }
.app .icon-btn--soft { width: 34px; height: 34px; }
.app__x { margin-left: auto; }
.app__note { flex: 1 1 220px; color: var(--ink-2); font-size: 13px; line-height: 1.35; }
/* Настройки: код восстановления — подпись, код с кнопками, пояснение */
.code { display: flex; flex-direction: column; gap: 6px; }
.code .label { margin-top: 2px; }
.code .btn--sm { flex: 0 0 auto; margin-left: auto; }
.app__code { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }

.menu__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.5;
}

.build { white-space: nowrap; }

.brief__top { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.brief__top .lives { margin-left: 2px; }
.brief__diff { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: -4px; }

.mult { color: var(--accent); font-weight: 600; }

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px var(--s-3);
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.facts:empty { display: none; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); }
.facts dt.is-new { color: var(--accent); font-weight: 600; }

/* ─── Итог ────────────────────────────────────────────────────────────────── */

.res__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.res__head h2 { font-size: 30px; font-weight: 700; line-height: 1.1; }
.res__head h2.is-butter { color: var(--accent); }
.res__head h2.is-fail { color: var(--danger); }
.res__pts { color: var(--accent); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res__quip { margin-top: -6px !important; color: var(--ink-2); font-size: 15px; line-height: 1.35; }

.res__big { display: flex; gap: var(--s-5); font-variant-numeric: tabular-nums; }
.res__big div { display: flex; align-items: baseline; gap: 6px; }
.res__big b { font-size: 32px; font-weight: 600; line-height: 1; }
.res__big span { color: var(--ink-3); font-size: 15px; font-weight: 500; }

.res__chart {
    flex: none;
    width: 100%;
    height: 132px;
    display: block;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

/* Разбор посадки: строки по очереди — отметка, аспект, что вышло, очки */
.score-table { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.score-table:empty { display: none; }
.sr {
    display: grid;
    grid-template-columns: 12px 96px minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 8px;
    padding: 2px 0;
    animation: sr-in 260ms ease-out both;
    animation-delay: calc(var(--i) * 75ms + 120ms);
}
.sr::before { content: '✓'; color: var(--accent); font-weight: 700; }
.sr--mid::before { content: '·'; color: var(--ink-3); text-align: center; }
.sr--bad::before { content: '!'; color: var(--warn); text-align: center; }
.sr__k { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.sr__v { color: var(--ink); }
.sr__v em { color: var(--ink-3); font-style: normal; }
.sr__p { font-weight: 600; text-align: right; white-space: nowrap; }
.sr--bad .sr__v, .sr--bad .sr__p { color: var(--warn); }
.sr--sum { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.sr--sum::before, .sr--total::before { content: ''; }
.sr--sum .sr__k, .sr--total .sr__k { color: var(--ink); font-weight: 600; }
.sr--total .sr__v { color: var(--ink-3); }
.sr--total .sr__p { color: var(--accent); font-size: 15px; }
@keyframes sr-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.res__progress { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.res__progress:empty { display: none; }
.res__line b { color: var(--ink); }
.res__line:empty { display: none; }
.res__rank { display: flex; gap: 12px; }
.res__xp { margin-left: auto; color: var(--ink-3); white-space: nowrap; }

/* Открыта ливрея: карточка выскакивает чуть позже итога, по ней дважды проходит блик */
.newliv { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; overflow: hidden; border-radius: var(--r-md); background: var(--accent-soft); }
.newliv[hidden] { display: none; }
.newliv canvas { flex: none; width: 90px; height: 24px; }
.newliv__txt { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; color: var(--accent-ink); font-size: 13px; line-height: 1.25; }
.newliv__txt b { font-weight: 700; }
.newliv__txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.newliv .btn { flex: none; }
.newliv.is-in { animation: liv-in 520ms cubic-bezier(0.2, 1.4, 0.4, 1) 450ms both; }
.newliv.is-in::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: liv-glint 1000ms ease-in-out 850ms 2;
    pointer-events: none;
}
@keyframes liv-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes liv-glint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.newdot { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
/* Новая — меткой в углу, где у закрытых замок: к имени не дописывается, иначе не влезает */
.liv.is-new::after { content: 'новая'; position: absolute; top: 5px; right: 7px; color: var(--accent); font-size: 10.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .newliv.is-in, .newliv.is-in::after { animation: none; } }

.badges:empty { display: none; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
    padding: 4px 9px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 600;
}

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.brief__ghost { align-self: flex-start; color: var(--ink-3); font-size: 13px; }
.actions .btn { flex: 1 1 auto; }
.actions .btn--primary { flex: 2 1 150px; }
.actions .btn--ghost { flex: 0 1 auto; }
.btn__note { font-size: 13px; font-weight: 500; opacity: 0.7; }

.res__head h2.is-stamp { animation: stamp 520ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes stamp {
    0% { opacity: 0; transform: scale(1.6) rotate(-4deg); }
    60% { opacity: 1; transform: scale(0.94) rotate(0.5deg); }
    100% { opacity: 1; transform: none; }
}
#result.is-win { box-shadow: var(--shadow-float), 0 0 0 1px var(--accent-soft); }
#result.is-shake { animation: shake 420ms ease-out; }
@keyframes shake {
    0%, 100% { transform: none; }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 30;
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translate(-50%, 20px);
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: var(--on-ink);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ─── Пилот: звание, задания недели, достижения, паспорт ──────────────────── */

/* Строка звания под названием игры: шапка не растёт — заголовок чуть меньше */
.menu__title { min-width: 0; }
.pilot-line {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}
.pilot-line__rank { position: relative; min-width: 0; padding-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-line__rank b { color: var(--accent); font-weight: 600; }
.pilot-line__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--fill); overflow: hidden; }
.pilot-line__bar i { display: block; height: 100%; background: var(--accent); }
/* Кнопка прогресса — золотом, как рекорды: звание само по себе на кнопку не похоже */
.pilot-line__go { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--gold-soft); color: var(--gold-ink); font-size: 12px; font-weight: 600; }
.pilot-line__go small { font-size: 11.5px; font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; }
.pilot-line__go svg { width: 12px; height: 12px; margin: 0 -3px 0 -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
@media (hover: hover) { .pilot-line:hover .pilot-line__go { filter: brightness(0.96); } }

.rank { display: flex; flex-direction: column; gap: 6px; }
.rank__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.rank__head b { color: var(--accent); font-size: 20px; font-weight: 700; }
.rank__head span, .rank__sub { color: var(--ink-3); font-size: 13px; }
.rank .meter i, .tasks .meter i, .apple .meter i { background: var(--accent); }
.pilot-body { display: flex; flex-direction: column; gap: var(--gap); }

.tasks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.task__text { color: var(--ink); font-size: 14px; }
.task__xp { color: var(--accent); font-size: 13px; font-weight: 600; }
.task .meter, .task__n { align-self: center; }
.task__n { color: var(--ink-3); font-size: 12px; line-height: 1; text-align: right; }
.task.is-done .task__text { color: var(--ink-3); }
.task.is-done .task__n { color: var(--accent); }

/* Ан-2 — на виду: сколько заданий осталось до него */
.apple { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.apple canvas { width: 72px; height: 29px; }
.apple__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apple__txt b { color: var(--ink); font-size: 14px; }
.apple__txt span { color: var(--ink-3); font-size: 12px; }
.apple__n { color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }

.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 7px 3px 5px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3); font: inherit; cursor: pointer; }
.ach svg, .stamp svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.ach span, .stamp span { max-width: 100%; overflow: hidden; font-size: 10.5px; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ach.is-on { color: var(--ink); }
.ach.is-on svg { color: var(--accent); opacity: 1; }

.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.stamp { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px 6px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3); }
.stamp--1 { color: var(--ink); }
.stamp--1 svg { color: var(--ink-2); opacity: 1; }
.stamp--2 { color: var(--ink); }
.stamp--2 svg { color: #c9a13a; opacity: 1; }

/* Турнир: этапы — карточками с самолётом, ситуациями и лучшим результатом */
.stages { display: flex; flex-direction: column; gap: 6px; }
.stage { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border: 0; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.stage:disabled { opacity: 0.5; cursor: default; }
.stage canvas { width: 64px; height: 26px; }
.stage__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stage__main b { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stage__sits { display: flex; gap: 4px; color: var(--ink-3); }
.stage__sits svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage__score { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.stage__score b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stage.is-done .stage__score b { color: var(--accent); }
.stage .lives { margin-left: 0; }
@media (hover: hover) { .stage:not(:disabled):hover, .ach:hover { background: var(--fill); } }

/* Режимы: ширина по надписи; у режимов в зачёт свой цвет, выбранный — с подложкой его
   цвета. Тренировка — значок в конце */
#modes button { flex: 1 1 auto; padding: 0 8px; }
#modes [data-mode="career"] { --m: var(--m-career); --ms: var(--m-career-soft); }
#modes [data-mode="daily"] { --m: var(--m-daily); --ms: var(--m-daily-soft); }
#modes [data-mode="cup"] { --m: var(--m-cup); --ms: var(--m-cup-soft); }
#modes button:not(.modes__train) { color: var(--m); }
#modes button:not(.modes__train)[aria-pressed="true"] { background: var(--ms); color: var(--m); font-weight: 600; box-shadow: none; }
#modes .modes__train { flex: 0 0 40px; display: grid; place-items: center; padding: 0; color: var(--ink-3); }
#modes .modes__train svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
#modes .modes__train[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) { #modes button:not([aria-pressed="true"]):hover { background: var(--line); } }
/* Внутри режима — его цвет: точки попыток, пройденные этапы, выделенные числа */
#mode-daily { --accent: var(--m-daily); --accent-soft: var(--m-daily-soft); }
#mode-cup { --accent: var(--m-cup); --accent-soft: var(--m-cup-soft); }

/* ─── Свёрнутая шторка ────────────────────────────────────────────────────── */

/* Меню и итог сворачиваются вниз — сцену видно целиком; вернуть — кнопкой внизу.
   Без panel-in: иначе при разворачивании он перебивает выезд */
.menu__tools { display: flex; gap: 6px; }
.res__head .res__pts { margin-left: auto; }
#btn-fold-result { align-self: center; }
.panel { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease, visibility 0s; }
#menu.is-folded, #result.is-folded {
    transform: translateY(110vh);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 260ms ease-in, opacity 260ms ease-in, visibility 0s 260ms;
}
#menu.is-folded, #result.is-folded, #menu.is-unfolded, #result.is-unfolded { animation: none; }
/* На итоге малый газ ни к чему, а из-под свёрнутой шторки он лез бы к кнопке */
body[data-panel="result"] .idle { visibility: hidden; }

.peek {
    position: fixed;
    left: 50%;
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: 22px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-float);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transform: translateX(-50%);
    animation: peek-in 240ms ease-out 140ms both;
}
.peek svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes peek-in { from { opacity: 0; transform: translate(-50%, 12px); } }
/* Главный экран: меню свёрнуто — кнопка игры крупная, цветом акцента и дышит */
.peek.peek--start {
    height: 54px;
    padding: 0 28px 0 22px;
    gap: 8px;
    background: var(--accent);
    color: var(--surface);
    font-size: 17px;
    animation: peek-in 240ms ease-out 140ms both, start-pulse 2.4s ease-in-out 1.2s infinite;
}
.peek--start svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
@keyframes start-pulse {
    0% { box-shadow: var(--shadow-float), 0 0 0 0 var(--accent); }
    70%, 100% { box-shadow: var(--shadow-float), 0 0 0 12px transparent; }
}
@media (hover: hover) { .peek--start:hover { filter: brightness(1.08); } }

.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }


/* ─── Очки за сессию ──────────────────────────────────────────────────────── */

.score {
    position: relative;
    display: flex;
    flex: none;
    width: max-content;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 7px;
    border-radius: var(--r-md);
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.score__pts { color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.score__pts small { color: var(--ink-3); font-size: 12px; font-weight: 500; }

/* Сводка сложности: шесть делений от «очень легко» до «невозможно» */
.diff { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.diff__bars { display: inline-flex; gap: 2px; }
.diff__bars i { width: 7px; height: 12px; border-radius: 2px; background: var(--fill); }
.diff--0 .on, .diff--1 .on { background: var(--g0); }
.diff--2 .on { background: var(--g2); }
.diff--3 .on { background: var(--g3); }
.diff--4 .on, .diff--5 .on { background: var(--g4); }
.diff--5 { color: var(--danger); }

/* ─── Тренировка ──────────────────────────────────────────────────────────── */

.field { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--ink-3); font-size: 14px; }
.field select {
    flex: 1;
    min-width: 0;
    max-width: 240px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--fill);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--ink-3); font-size: 14px; }
.opt .seg { flex: 0 1 260px; min-width: 0; }
.seg--sm button { height: 28px; font-size: 14px; }
.seg button:disabled { opacity: 0.35; cursor: default; }
.label { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.label .note { margin-left: 4px; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
    height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* Ситуаций в тренировке почти три десятка — фишки мельче, чтобы панель влезла в экран */
#train-sits { gap: 3px; }
#train-sits .chip { height: 22px; padding: 0 7px; font-size: 12px; }
.chip:disabled { opacity: 0.35; cursor: default; }
.note { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.note.is-warn, .facts dt.is-warn { color: var(--warn); font-weight: 600; }

/* ─── Таблицы ─────────────────────────────────────────────────────────────── */

.board__body { font-size: 14px; }
.board__list { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.board__list li { display: flex; align-items: baseline; gap: var(--s-2); padding: 4px 6px; border-radius: 6px; }
.board__list li:nth-child(odd) { background: var(--surface-2); }
.board__list li.is-me { background: var(--accent-soft); color: var(--accent-ink); }
.board__list--me { margin-top: 4px; border-top: 1px dashed var(--line-strong); padding-top: 4px; }
.board__n { width: 22px; color: var(--ink-3); text-align: right; }
.board__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.board__who small { overflow: hidden; color: var(--ink-3); font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.board__list li:has(.board__who) { align-items: center; }
.board__sub { color: var(--ink-3); font-size: 12px; }
.board__list b { font-weight: 600; }
.board__foot { margin-top: var(--s-3) !important; color: var(--ink-3); font-size: 13px; }
.board__form { display: flex; align-items: center; gap: var(--s-2); }
.board__form label { flex: 1; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.board__input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: var(--fill);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}
.board__input::placeholder { color: var(--ink-3); }
/* На итоге серии — просьба записать имя: поле выделено */
.board__form--ask { font-size: 13px; }
.board__form--ask .board__input { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Шрифт поля на телефоне — не меньше 16 px, иначе Safari увеличивает страницу */
@media (hover: none) { .board__input { font-size: 16px; } }

/* ─── Управление, проверка ────────────────────────────────────────────────── */

/* .t — для сенсорного экрана, .k — для мыши и клавиатуры */
/* Управление: живая схема штурвала и действия значками. .t — палец, .k — клавиатура и мышь */
@media (hover: none) { #help .k { display: none; } }
@media (hover: hover) { #help .t { display: none; } }
.ctl-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.ctl-demo { display: flex; align-items: center; gap: 12px; height: 92px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.ctl-demo__pad { flex: none; width: 40px; height: 80px; }
.ctl-demo__track { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.ctl-demo__finger { fill: var(--accent); animation: ctl-finger 4.8s ease-in-out infinite; }
.ctl-demo.is-inv .ctl-demo__finger { animation-name: ctl-finger-inv; }
.ctl-demo__key { fill: var(--fill); }
.ctl-demo__key--dn { animation: ctl-key-dn 4.8s infinite; }
.ctl-demo__key--up { animation: ctl-key-up 4.8s infinite; }
.ctl-demo__arrow { fill: var(--ink-2); }
.ctl-demo__sky { position: relative; flex: 1; min-width: 0; align-self: stretch; display: grid; place-items: center; }
.ctl-demo__sky::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--line-strong); }
.ctl-demo__sky canvas { position: relative; width: min(150px, 100%); height: auto; aspect-ratio: 5 / 2; animation: ctl-plane 4.8s ease-in-out infinite; }
/* Нос поднимается чуть позже пальца — как у настоящего самолёта */
@keyframes ctl-finger {
    0%, 10% { transform: none; opacity: 0.35; }
    16% { opacity: 1; }
    30%, 44% { transform: translateY(22px); opacity: 1; }
    62%, 68% { transform: translateY(-22px); opacity: 1; }
    82%, 100% { transform: none; opacity: 0.35; }
}
@keyframes ctl-finger-inv {
    0%, 10% { transform: none; opacity: 0.35; }
    16% { opacity: 1; }
    30%, 44% { transform: translateY(-22px); opacity: 1; }
    62%, 68% { transform: translateY(22px); opacity: 1; }
    82%, 100% { transform: none; opacity: 0.35; }
}
@keyframes ctl-plane {
    0%, 12% { transform: none; }
    34%, 46% { transform: rotate(-11deg); }
    64%, 70% { transform: rotate(8deg); }
    86%, 100% { transform: none; }
}
@keyframes ctl-key-dn { 0%, 13% { fill: var(--fill); } 15%, 44% { fill: var(--accent); } 46%, 100% { fill: var(--fill); } }
@keyframes ctl-key-up { 0%, 47% { fill: var(--fill); } 49%, 68% { fill: var(--accent); } 70%, 100% { fill: var(--fill); } }

.ctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.ctl li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 10px; min-width: 0; }
.ctl svg { grid-row: 1 / 3; box-sizing: border-box; width: 32px; height: 32px; padding: 6px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctl b { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; }
.ctl span { color: var(--ink-3); font-size: 12.5px; line-height: 1.3; }
.ctl kbd { padding: 0 5px; font-size: 11.5px; line-height: 16px; }
.ctl kbd + kbd { margin-left: 3px; }
.ctl-note { margin: 0; color: var(--ink-3); font-size: 12.5px; }

.dev {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: var(--s-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    color: var(--ink-3);
    font-size: 12px;
}
.dev span { width: 100%; }
.btn--sm { height: 32px; padding: 0 var(--s-3); font-size: 13px; }


/* ─── Серия: попытки, комбо, уход на второй круг ─────────────────────────── */

.lives { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.lives i { width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid var(--ink-3); }
.lives i.on { background: var(--accent); border-color: var(--accent); }
.score__lives { display: inline-flex; align-items: center; gap: 6px; }
.score__lives:empty { display: none; }
.combo { color: var(--g2); font-size: 14px; font-style: normal; font-weight: 700; }

.ga {
    pointer-events: auto;
    position: absolute;
    left: calc(max(var(--s-4), env(safe-area-inset-left)) + 196px);
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 56px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-md);
    background: var(--chip);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: none;
}
.ga svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ga:disabled { opacity: 0.4; cursor: default; }
/* Второй круг: с мышью — кнопкой внизу, на сенсорном экране — значком вверху */
@media (hover: hover) { .icon-btn--ga { display: none; } }
@media (hover: none) { .ga { display: none; } }

/* ─── Плитки условий ──────────────────────────────────────────────────────── */

.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile {
    position: relative;
    min-width: 70px;
    height: 70px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--ink);
}
.tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tile span { max-width: 100%; overflow: hidden; color: var(--ink-2); font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.tile--warn { color: var(--warn); }
.tile--new { box-shadow: inset 0 0 0 2px var(--accent); }
.tile--new::after {
    content: 'новое';
    position: absolute;
    top: -7px;
    right: -5px;
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--on-ink);
    font-size: 10px;
    font-weight: 700;
}
/* Много условий — плитки мельче, чтобы брифинг влез в экран */
.tiles--dense { gap: 5px; }
.tiles--dense .tile { min-width: 46px; height: 46px; padding: 0 5px; border-radius: 9px; gap: 2px; }
.tiles--dense .tile svg { width: 17px; height: 17px; }
.tiles--dense .tile span { font-size: 9.5px; }
.tiles--sm { gap: 6px; }
.tiles--sm .tile { min-width: 54px; height: 54px; padding: 0 6px; border-radius: 10px; gap: 3px; }
.tiles--sm .tile svg { width: 20px; height: 20px; }
.tiles--sm .tile span { font-size: 10px; }
.cond__tiles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
.cond__tiles .tile { min-width: 0; width: 28px; height: 28px; padding: 0; border-radius: 8px; background: var(--surface-2); }
.cond__tiles .tile svg { width: 16px; height: 16px; }
.cond__tiles .tile span, .cond__tiles .tile--new::after { display: none; }
.tiles-fly { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
.tile--fly { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: var(--shadow-float); background: var(--surface); }


/* ─── Ячейки и полоски прогресса ──────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 4px; }
.stats > div { min-width: 0; padding: 6px 9px 7px; border-radius: var(--r-sm); background: var(--surface-2); }
.stats > div > span { display: block; overflow: hidden; color: var(--ink-3); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.stats b { display: block; margin-top: 2px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats .is-accent b { color: var(--accent); }
.stats .lives { margin-left: 0; }
.res__title { color: var(--ink); font-size: 14px; font-weight: 600; }
.res__title + .stats { margin-top: -2px; }

.unlock { padding: 8px 10px 9px; border-radius: var(--r-sm); background: var(--surface-2); }
.unlock__title { margin-bottom: 5px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.unlock__alt { margin-top: 5px; color: var(--ink-3); font-size: 12px; }
.prog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 5px; color: var(--ink-3); font-size: 12px; }
.prog__head b { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog__head small { color: var(--ink-3); font-size: 11px; font-weight: 500; }
.meter { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--g2); }
.prog.is-done .meter i { background: var(--g1); }
#result .meter i { animation: meter-in 900ms ease-out 250ms both; }
@keyframes meter-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }


/* ─── Компактно: телефон или невысокое окно ───────────────────────────────── */

/* Самолёты — лентой в ряд, короткими именами */
@media (max-width: 640px), (max-height: 760px) {
    .planes { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
    .plane { gap: 1px; padding: 6px 2px 4px; border-radius: var(--r-sm); }
    .plane canvas { height: 22px; }
    .plane__name { font-size: 11.5px; }
    .plane__name .f { display: none; }
    .plane__name .s { display: inline; }
    .plane__sub { min-height: 12px; font-size: 10px; }
    .plane.is-locked .plane__sub { visibility: hidden; }
    .plane__lock { top: 3px; right: 3px; width: 11px; height: 11px; }
    .res__chart { height: 104px; }
    .tile { min-width: 60px; height: 60px; gap: 4px; }
    .tile svg { width: 22px; height: 22px; }
}

@media (max-height: 760px) {
    .menu__tag { display: none; }
}

/* Самые узкие телефоны: чтобы «Concorde» в ленте не обрезался */
@media (max-width: 380px) {
    .planes { gap: 3px; }
    .plane { padding-left: 1px; padding-right: 1px; }
    .plane__name { font-size: 10.5px; }
}

/* ─── Телефон, вертикально ────────────────────────────────────────────────── */

@media (max-width: 640px) and (orientation: portrait) {
    /* Панели — шторкой снизу во всю ширину */
    .panel {
        --gap: 10px;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: calc(100% - 6px);
        padding: 14px 16px max(14px, env(safe-area-inset-bottom));
        border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .panel--small { width: auto; }
    #livery { width: auto; }
    .livs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .liv canvas { height: 34px; }
    .panel h1 { font-size: 22px; }
    #brief h2 { font-size: 20px; }
    .res__head h2 { font-size: 26px; }
    .res__quip { font-size: 14px; }
    /* Вертикальная — первой строкой разбора; график — на экранах побольше */
    .res__big, .res__chart { display: none; }

    /* HUD: показания в ряд, под ними PAPI с профилем, ниже — очки и плитки условий */
    .hud__bar {
        top: max(10px, env(safe-area-inset-top));
        left: 12px;
        right: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 8px;
    }
    .hud__left { display: contents; }
    .hud__meta { grid-area: 1 / 1; margin: 0; }
    .hud__right { grid-area: 1 / 2; flex: none; }
    .readouts { grid-area: 2 / 1 / 3 / 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hud__center { grid-area: 3 / 1 / 4 / 3; flex-direction: row; align-items: center; gap: 8px; }
    .hud__row { grid-area: 4 / 1 / 5 / 3; margin: 0; }
    .ro { min-width: 0; padding: 3px 8px 4px; }
    .ro span { font-size: 10px; }
    .ro b { font-size: 18px; }
    .ro small { font-size: 11px; }
    .papi { padding: 6px 8px; gap: 5px; }
    .papi i { width: 10px; height: 10px; }
    .profile { flex: 1; min-width: 0; height: 32px; }
    .icon-btn { width: 36px; height: 36px; }
    .score { padding: 6px 10px; }
    .cond { position: static; max-width: none; margin-left: auto; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .cond > :not(.cond__tiles) { display: none; }
    .cond__tiles { flex-wrap: wrap; justify-content: flex-end; margin: 0; }
    .cond__tiles .tile { width: 26px; height: 26px; background: var(--chip); }
    .hint { font-size: 13px; }

    /* В брифинге и на итоге показания не нужны — место шторке */
    body[data-panel="brief"] .readouts, body[data-panel="brief"] .hud__center,
    body[data-panel="result"] .readouts, body[data-panel="result"] .hud__center { display: none; }

    .toast { top: calc(max(10px, env(safe-area-inset-top)) + 46px); bottom: auto; transform: translate(-50%, -20px); }
}

/* Совсем невысокий экран: без графика итога и с плитками помельче */
@media (max-width: 640px) and (orientation: portrait) and (max-height: 620px) {
    .score-table { font-size: 12.5px; line-height: 1.22; }
    .sr { padding: 1px 0; }
    .tile { min-width: 52px; height: 52px; }
    .tile span { font-size: 10px; }
    .panel h1 { font-size: 20px; }
    .chip { height: 26px; padding: 0 9px; font-size: 12.5px; }
    #train-sits .chip { height: 21px; }
    /* Попытки видны точками в итоге — на кнопке их не повторяем, иначе кнопки в два ряда.
       Строку «Сумма» и «или серия на N очков» — тоже: при первом Butter сюда же ливрея и значки */
    #result .btn__note, #res-items .sr--sum, #result .unlock__alt { display: none; }
    .res__progress { gap: 6px; }
    .seg--sm button { height: 26px; }
    .field select { height: 32px; }
    .liv { padding: 4px 8px 5px; }
    .liv canvas { height: 30px; }
}

/* ─── Невысокий горизонтальный экран: колонки панелей рядом ──────────────── */

/* Итог — в две колонки уже на ноутбуке с окном пониже */
@media (orientation: landscape) and (max-height: 900px) {
    #result { width: min(760px, calc(100% - 2 * var(--s-4))); flex-direction: row; align-items: flex-start; gap: 20px; }
    #result > .col { flex: 1 1 0; }
}

/* Телефон боком и совсем низкое окно: все панели широкие, в меню заголовок и
   вкладки — одной строкой */
@media (orientation: landscape) and (max-height: 600px) {
    .panel {
        --gap: 8px;
        top: 8px;
        right: max(8px, env(safe-area-inset-right));
        width: min(760px, calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        max-width: none;
        max-height: calc(100% - 16px);
        padding: 12px 16px;
    }
    #result { width: min(760px, calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); gap: 16px; }
    .panel--small { width: min(320px, calc(100% - 16px)); }
    #board, #help, #settings { width: min(600px, calc(100% - 16px)); }
    .ctl-wrap { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: start; gap: 14px; }
    .liv canvas { height: 30px; }
    #menu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
    .menu__head { display: contents; }
    .menu__title { grid-area: 1 / 1; }
    #modes { grid-area: 1 / 2; }
    .menu__tools { grid-area: 1 / 3; }
    #menu > .mode { grid-column: 1 / -1; }
    #menu { padding-top: 10px; padding-bottom: 10px; }
    .menu__title h1 { font-size: 18px; }
    .pilot-line { margin-top: 1px; gap: 3px 6px; font-size: 12px; flex-wrap: wrap; }
    /* Длинное звание — кнопка прогресса под ним: иначе колонка заголовка теснит режимы */
    .menu__title { max-width: min(240px, 30vw); }
    .pilot-line__rank { padding-bottom: 3px; }
    .pilot-line__go { height: 19px; padding: 0 7px; font-size: 11px; }
    .pilot-line__go small { font-size: 10.5px; }
    #pilot { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 18px; align-content: start; }
    #pilot > .sheet__head { grid-column: 1 / -1; }
    #pilot > .rank, #pilot > #pilot-tabs { grid-column: 1; }
    #pilot > .pilot-body { grid-column: 2; grid-row: 2 / span 3; }
    #pilot-tabs { flex-direction: column; align-self: start; }
    #pilot-tabs button { height: 28px; }
    .rank__head { flex-direction: column; gap: 2px; }
    .rank__head b { font-size: 17px; }
    .pilot-body .note { font-size: 12px; }
    .tasks { gap: 6px; }
    .task__text { font-size: 13px; }
    .achs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; }
    .ach { padding: 5px 2px 4px; }
    .ach svg { width: 18px; height: 18px; }
    .stamps { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .stamp { padding: 6px 3px 5px; }
    .mode, #brief { flex-direction: row; align-items: flex-start; gap: 16px; }
    .mode > .col, #brief > .col { flex: 1 1 0; }
    .panel h1 { font-size: 20px; white-space: nowrap; }
    #brief h2 { font-size: 18px; }
    .seg button { height: 30px; }
    .res__head h2 { font-size: 24px; }
    .res__big, .res__chart { display: none; }
    .tile { min-width: 50px; height: 50px; gap: 3px; padding: 0 6px; }
    .tile svg { width: 18px; height: 18px; }
    .tile span { font-size: 10px; }
    .chip { height: 24px; padding: 0 8px; font-size: 12px; }
    #train-sits .chip { height: 21px; padding: 0 6px; font-size: 11.5px; }
    .seg--sm button { height: 26px; font-size: 13px; }
    .field select { height: 30px; }
    .board__list { column-count: 2; column-gap: 16px; }
    .board__list li { break-inside: avoid; }
    .menu__foot { padding-top: var(--s-2); }
}

/* Телефон боком, совсем невысокий: разбор и итог плотнее, чтобы влезли без прокрутки */
@media (orientation: landscape) and (max-height: 400px) {
    .score-table { font-size: 12.5px; line-height: 1.22; }
    .sr { padding: 1px 0; }
}
/* Совсем низкий экран (667×320): разбор с пятью ситуациями — без зазоров между строками;
   ливреи в три ряда — с самолётом пониже */
@media (orientation: landscape) and (max-height: 340px) {
    .score-table { line-height: 1.16; }
    .sr { padding: 0; }
    .liv { padding: 4px 8px 5px; }
    .liv canvas { height: 22px; }
    /* Настройки: пять галок в два ряда — без строки со счётчиком посадок и сборкой */
    #settings .menu__foot { display: none; }
}
@media (orientation: landscape) and (max-height: 400px) {
    .res__progress { gap: 6px; }
}

/* HUD телефона боком */
@media (max-height: 500px) and (orientation: landscape) {
    .ro { min-width: 60px; padding: 3px 8px; }
    .ro b { font-size: 18px; }
    .hud__meta { display: none; }
    .profile { height: 34px; }
    .idle { height: 50px; }
    .idle kbd, .ga kbd { display: none; }
    .ga { height: 50px; left: calc(max(var(--s-4), env(safe-area-inset-left)) + 150px); }
    .hint { bottom: calc(max(var(--s-3), env(safe-area-inset-bottom)) + 58px); }
    .cond { font-size: 12px; padding: 5px 10px 6px; }
}

@media (hover: none) {
    .btn kbd, .idle kbd, .ga kbd { display: none; }
    .ga { left: calc(max(var(--s-4), env(safe-area-inset-left)) + 150px); }
}

@media (prefers-reduced-motion: reduce) {
    .res__head h2.is-stamp, #result.is-shake, .meter i, .sr, .peek, .peek.peek--start, .ctl-demo * { animation: none; }
    .panel, #menu.is-folded, #result.is-folded { transition: none; }
}