/* ============================================================
   Игра «Заточи нож!» (#game)
   ============================================================ */
.game-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 880px) {
    .game-grid { grid-template-columns: 1fr; }
}

/* ---- Игровое поле ---- */
.game-stage {
    position: relative;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 26px 30px;
    overflow: hidden;
}
.game-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 560px) {
    .game-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.game-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}
.game-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
}
.game-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--rust);
}

/* ---- Клинок: тускнеет/блестит по остроте --sharp (0..1) ---- */
.game-blade {
    --sharp: 0;
    position: relative;
    height: 56px;
    margin: 4px 0 26px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #4a4f56 0%, #2c3036 50%, #1c1f23 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}
.game-blade-edge {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    background: linear-gradient(180deg, #6a7078 0%, #3a3f45 100%);
}
.game-blade-edge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.85) 45%,
        rgba(255,255,255,.95) 55%,
        transparent 100%);
    opacity: var(--sharp);
    transition: opacity .25s ease;
}
.game-spark {
    --spark-color: #f4c66b;
    position: absolute;
    bottom: 6px;
    width: 10px; height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--spark-color);
    opacity: 0;
    pointer-events: none;
}
.game-spark.is-on {
    animation: gameSparkPop .42s ease-out;
}
@keyframes gameSparkPop {
    0%   { opacity: 1; transform: scale(.4); box-shadow: 0 0 0 0 var(--spark-color); }
    100% { opacity: 0; transform: scale(2.6); box-shadow: 0 0 14px 6px transparent; }
}

/* ---- Шкала угла ---- */
.game-meter {
    position: relative;
    height: 26px;
    border-radius: 13px;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--line);
    overflow: hidden;
}
.game-zone {
    position: absolute;
    top: 0; bottom: 0;
    transition: left .18s ease, width .18s ease;
}
.game-zone--near { background: rgba(168, 197, 216, .18); }
.game-zone--good {
    background: rgba(244, 198, 107, .38);
    box-shadow: inset 0 0 0 1px rgba(244, 198, 107, .6);
}
.game-needle {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 4px;
    margin-left: -2px;
    left: 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255,255,255,.7);
}
.game-hint {
    margin: 14px 0 18px;
    min-height: 22px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 15px;
}
.game-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.game-controls .btn { min-width: 220px; }
.game-key-hint { font-size: 13px; color: var(--ink-mute); }
.game-key-hint kbd {
    font: inherit;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 7px;
}

/* ---- Экран результата ---- */
.game-result[hidden],
.game-champion[hidden] { display: none; }
.game-result {
    position: absolute;
    inset: 0;
    background: rgba(16, 18, 21, .94);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;   /* при нехватке высоты не обрезает сверху */
    gap: 4px;
    padding: 18px 22px;
    overflow-y: auto;
    text-align: center;
}
.game-result-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-soft);
}
.game-result-score {
    font-size: clamp(40px, 12vw, 52px);
    font-weight: 800;
    line-height: 1;
    color: var(--rust);
}
.game-result-label { font-size: 13px; color: var(--ink-soft); }
.game-result-grade { margin: 6px 0 6px; color: var(--ink); font-size: 15px; max-width: 320px; }
.game-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 10px;
}
.game-form .btn { width: 100%; }
.game-input {
    flex: 1;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ink);
    font: inherit;
}
.game-input:focus { outline: none; border-color: var(--rust); }
.game-form .btn { white-space: nowrap; }
.game-save-msg {
    margin-top: 10px;
    font-size: 14px;
    color: var(--rust);
    max-width: 340px;
}
@media (max-width: 480px) {
    .game-form { flex-direction: column; }
    .game-result-score { font-size: 52px; }
}

/* ---- Боковая колонка ---- */
.game-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.game-champion {
    background: linear-gradient(160deg, var(--md-sys-color-primary-container), var(--paper-2));
    border: 1px solid var(--rust);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.game-champion-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--md-sys-color-on-primary-container);
}
.game-champion-name {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}
.game-champion-meta { font-size: 14px; color: var(--md-sys-color-on-primary-container); }
.game-champion-meta b { color: #fff; }
.game-progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    margin: 6px 0 2px;
}
.game-progress-bar {
    height: 100%;
    width: 2%;
    background: var(--rust);
    border-radius: 4px;
    transition: width .4s ease;
}
.game-champion-goal { font-size: 12px; color: var(--md-sys-color-on-primary-container); }

.game-reward {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
}
.game-reward-head { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.game-reward-text { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.game-reward-text b { color: var(--rust); }
.game-reward-note { margin: 0; font-size: 12px; color: var(--ink-mute); }

.game-board {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
}
.game-board-head { margin: 0 0 12px; font-size: 18px; color: var(--ink); }

/* вкладки-фильтр по уровню */
.game-board-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.game-board-tab {
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    background: var(--md-sys-color-surface-container-low);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.game-board-tab:hover { color: var(--ink); }
.game-board-tab.is-active {
    background: var(--rust);
    color: var(--paper);
    border-color: var(--rust);
    font-weight: 700;
}

/* колонки таблицы: ранг | имя | уровень | время | очки */
.game-board-head-row,
.game-board-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 52px 48px;
    align-items: center;
    gap: 8px;
}
.game-board-head-row {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-mute);
}
.game-board-head-row span:nth-child(1),
.game-board-rank { text-align: center; }
.game-board-head-row span:nth-child(4),
.game-board-head-row span:nth-child(5),
.game-board-time,
.game-board-score { text-align: right; }
.game-board-list { list-style: none; margin: 0; padding: 0; }
.game-board-row {
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px;
}
.game-board-row:last-child { border-bottom: none; }
.game-board-row.is-top { color: var(--rust); font-weight: 700; }
.game-board-rank { font-size: 16px; }
.game-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-board-time { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.game-board-row.is-top .game-board-time { color: var(--md-sys-color-on-primary-container); }
.game-board-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.game-board-empty { color: var(--ink-mute); font-size: 14px; padding: 10px 0; }

/* бейдж уровня сложности */
.game-board-level {
    justify-self: start;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.game-board-level.lvl-easy   { color: #9ec7a6; }
.game-board-level.lvl-medium { color: var(--rust); }
.game-board-level.lvl-hard   { color: #ffb4ab; }

/* предупреждение об истекающем времени */
.game-stat-value.is-low { color: #ffb4ab; }
@media (max-width: 560px) {
    .game-board-head-row,
    .game-board-row { grid-template-columns: 26px minmax(0, 1fr) auto 44px 42px; gap: 6px; }
    .game-board-level { font-size: 10px; padding: 2px 5px; }
}

/* Пагинация таблицы рекордов (AJAX-листание без перезагрузки) */
.game-board-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}
.game-pager-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface-container-high);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, border-color .15s, background .15s;
}
.game-pager-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-mute); }
.game-pager-btn:disabled { opacity: .4; cursor: default; }
.game-pager-edge { font-size: 18px; line-height: 1; }
.game-pager-num.is-active {
    background: var(--rust);
    color: var(--paper);
    border-color: var(--rust);
}
@media (max-width: 560px) {
    .game-board-pager { gap: 5px; }
    .game-pager-btn { min-width: 38px; height: 38px; }   /* крупнее под палец на телефоне */
}

/* ---- Уровни сложности ---- */
.game-levels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.game-levels-label { font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.game-level {
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    background: var(--md-sys-color-surface-container-low);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.game-level:hover { color: var(--ink); border-color: var(--ink-mute); }
.game-level.is-active {
    background: var(--rust);
    color: var(--paper);
    border-color: var(--rust);
    font-weight: 700;
}
.game-levels.is-locked { opacity: .5; pointer-events: none; }

/* ---- Детали результата ---- */
.game-result-detail {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 340px;
}

/* ---- Кнопка «на весь экран» + тап-слой + фуллскрин ---- */
.game-stage { position: relative; }
/* Панель иконок-кнопок (звук, на весь экран) в правом верхнем углу сцены */
.game-toolbar {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 6;
    display: flex;
    gap: 8px;
}
.game-icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--md-sys-color-surface-container-high);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 0;
}
.game-icon-btn:hover { color: var(--ink); border-color: var(--ink-mute); }
.game-stage.is-muted .game-snd-ico { opacity: .5; }
/* Отсчёт «3-2-1 / Точи!» по центру сцены перед стартом */
.game-count {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-weight: 900;
    font-size: clamp(64px, 18vw, 132px);
    color: var(--rust, #c2410c);
    text-shadow: 0 4px 22px rgba(0, 0, 0, .45);
}
.game-count[hidden] { display: none; }   /* перебиваем display:flex, иначе атрибут hidden не прячет */
.game-count.is-pop { animation: gameCountPop .6s ease-out; }
@keyframes gameCountPop {
    0%   { opacity: 0; transform: scale(.4); }
    35%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.0); }
}
/* Тряска клинка при попадании — амплитуда растёт с серией (combo) */
.game-blade.is-shake { animation: gameShake .26s ease; }
@keyframes gameShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20%  { transform: translate3d(calc(var(--shake-amp, 3px) * -1), 1px, 0); }
    40%  { transform: translate3d(var(--shake-amp, 3px), -1px, 0); }
    65%  { transform: translate3d(calc(var(--shake-amp, 3px) * -.55), 1px, 0); }
    85%  { transform: translate3d(calc(var(--shake-amp, 3px) * .4), 0, 0); }
}
/* Прозрачный слой над полем — активен только во время заточки: тап = удар. */
.game-tap {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    touch-action: manipulation;
}
.game-stage.is-playing .game-tap { display: block; }
.game-result { z-index: 8; }

/* Полноэкранный режим (в основном для телефона) */
.game-stage:fullscreen,
.game-stage.is-fullscreen {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding: 24px max(20px, 5vw);
    background: var(--paper);
}
.game-stage:fullscreen .game-blade,
.game-stage.is-fullscreen .game-blade { height: 72px; }

/* Бейдж уровня «Салага» в таблице */
.game-board-level.lvl-salaga { color: var(--olive); }

/* ---- Мини-инструкция (disclaimer) перед стартом ---- */
.game-rules {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.game-stage.is-playing .game-rules,
.game-stage.is-done .game-rules { display: none; }
.game-rules-head {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rust);
    margin-bottom: 8px;
}
.game-rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
}
.game-rules-list b { color: var(--ink); }
.game-rules-list kbd {
    font: inherit;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 5px;
}
.game-rules-good { color: var(--rust); font-weight: 600; }
.game-rules-note {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: var(--ink-mute);
}

/* ============================================================
   Картиночный режим: включается классами has-knife / has-stone /
   has-sparks (их вешает game.js, когда файлы из /game/img/ загрузились).
   Пока файлов нет — действует обычный CSS-вид выше, ничего не ломается.
   ============================================================ */

/* Сцена: НОЖ — неподвижная заготовка (фон блока .game-blade) */
.game-stage.has-knife .game-blade {
    position: relative;
    height: 332px;                 /* ещё +30% места под ножом; нож прижат вверх — */
    margin: 4px 0 18px;            /* широкая свободная зона снизу, где ходит абразив */
    background: url(/game/img/knife.png) center top/contain no-repeat;
    box-shadow: none;
    overflow: visible;
}
/* зеркальный блеск ножа растёт с остротой */
.game-stage.has-knife .game-blade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 42%, rgba(255, 255, 255, .92) 50%, transparent 58%);
    background-size: 240% 100%;
    -webkit-mask: url(/game/img/knife.png) center top/contain no-repeat;
            mask: url(/game/img/knife.png) center top/contain no-repeat;
    opacity: var(--sharp);
    animation: gameBladeGlint 2.6s linear infinite;
    pointer-events: none;
}
@keyframes gameBladeGlint {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* АБРАЗИВ — вертикальный точильный камень, ПРОЗРАЧНЫЙ фон (без тёмной заливки).
   Виден ТОЛЬКО во время заточки (.is-playing); до старта и на экране
   результата камень скрыт, чтобы не «висел» неподвижно на ноже. */
.game-stage.has-stone .game-abrasive {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 182px;
    height: 437px;
    margin-left: -91px;
    margin-top: -270px;          /* ещё ниже в свободную зону под ножом для «заточки» */
    background: url(/game/img/whetstone.png) center/contain no-repeat;
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .55));
    transform: rotate(180deg);   /* перевёрнут на 180°: ручка камня смотрит вверх правильно */
    translate: 0 0;              /* скольжение вверх по удару (JS), не конфликтует с transform */
    transition: translate .15s ease-out;
    pointer-events: none;
    z-index: 2;
}
/* в игре камень ходит вверх-вниз (штрихи) И едет горизонтально по всей ширине ножа */
.game-stage.has-stone.is-playing .game-abrasive {
    display: block;
    animation:
        gameSweep  2.6s ease-in-out infinite,
        gameStroke 0.4s ease-in-out infinite;
}
@keyframes gameSweep {           /* проезд по стали клинка: шире и правее, до кончика, но без рукояти */
    0%   { left: 56%; }
    50%  { left: 96%; }
    100% { left: 56%; }
}
@keyframes gameStroke {          /* короткие штрихи вверх-вниз (с сохранением поворота на 180°) */
    0%, 100% { transform: translateY(-10px) rotate(180deg); }
    50%      { transform: translateY(22px) rotate(180deg); }
}

/* Блик заточки — спрайт, вспыхивает в месте контакта камня с ножом */
.game-stage.has-sparks .game-blade .game-spark {
    width: 64px;
    height: 64px;
    top: 50%;
    bottom: auto;
    margin-top: -16px;
    margin-left: -32px;
    border-radius: 0;
    background: url(/game/img/blik.png) center/contain no-repeat;
    z-index: 3;
    /* blik.png уже с прозрачным фоном — режим наложения обычный (без screen) */
    mix-blend-mode: normal;
}
.game-stage.has-sparks .game-spark.is-on {
    animation: gameSparkImg .5s ease-out;
}
@keyframes gameSparkImg {
    0%   { opacity: 0; transform: scale(calc(.35 * var(--spark-scale, 1))) rotate(-8deg); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: scale(calc(1.5 * var(--spark-scale, 1))) rotate(8deg); }
}

/* ============================================================
   Заполняемая шкала остроты клинка
   ============================================================ */
.game-sharpbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.game-sharpbar-cap {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-soft);
    white-space: nowrap;
}
.game-sharpbar-track {
    position: relative;
    flex: 1;
    height: 12px;
    border-radius: 7px;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.game-sharpbar-fill {
    height: 100%;
    width: 0%;
    border-radius: 7px 0 0 7px;
    background: linear-gradient(90deg, #7e5a00, var(--rust) 70%, #fff3d6);
    box-shadow: 0 0 10px rgba(244, 198, 107, .6);
    transition: width .3s ease;
}
.game-sharpbar-fill.is-full { border-radius: 7px; }
.game-sharpbar-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--rust);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
}