/* Игровая зона Клуба шефа: зал, страница игры, прогресс и лидерборд.
   Палитра «Лавки» — общие токены из public.css. */

.games-hero .sec-label a{color:var(--green);text-decoration:none}
.games-hero-compact h1{font-size:clamp(30px,4.4vw,46px)}

/* Прогресс: уровень, очки, дневной лимит */
.games-progress{margin-top:26px;padding:20px 22px;background:var(--cream);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.games-progress-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:baseline}
.games-level{display:flex;gap:10px;align-items:baseline;font:800 18px var(--font-head);color:var(--ink)}
.games-level span{font:600 13px var(--font-body);color:var(--ink-soft)}
.games-next{font:600 13px var(--font-body);color:var(--ink-soft)}
.games-bar{margin-top:12px;height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.games-bar span{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .5s var(--ease)}
.games-daily{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font:600 13px var(--font-body);color:var(--ink-soft)}
.games-daily b{color:var(--green)}
.games-daily-note{color:var(--ink-soft)}

/* Сетка игр в зале: карточки-автоматы (.gz-cab) описаны ниже, в блоке
   «Игровая зона». */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

/* Конверсия гостя в регистрацию */
.games-register-card{padding:26px 28px;border-radius:14px;background:var(--green);color:var(--on-dark,#f4efe4)}
.games-register-card h2{font:800 22px var(--font-head);margin:0 0 10px}
.games-register-card p{font:500 14px/1.6 var(--font-body);margin:0 0 18px;max-width:62ch;opacity:.92}
.games-register-actions{display:flex;flex-wrap:wrap;gap:12px}
.games-register-card .btn-ghost{background:transparent;border-color:rgba(244,239,228,.45);color:#fff}
.games-register-card .btn-ghost:hover{border-color:#fff;color:#fff}

/* Страница игры */
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.game-stage{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.game-hud{display:flex;flex-wrap:wrap;gap:8px 18px;font:700 13px var(--font-ui);color:var(--ink-soft)}
.game-hud b{color:var(--green)}
.game-canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px;border-radius:12px;background:radial-gradient(120% 120% at 50% 0,rgba(21,97,61,.10),rgba(232,161,58,.08));border:1px dashed var(--line);overflow:hidden}
.game-canvas-wrap canvas{display:block;width:100%;height:auto;max-width:100%;touch-action:manipulation}
.game-hint{font:500 12.5px/1.6 var(--font-body);color:var(--ink-soft)}
.game-result{padding:20px 22px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.game-result h3{font:800 20px var(--font-head);margin:0 0 8px}
.game-result-points{font:800 30px var(--font-head);color:var(--green)}
.game-result-rows{display:grid;gap:6px;margin:12px 0 0;font:600 13.5px var(--font-body);color:var(--ink-soft)}
.game-result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.game-result-save{margin-top:14px;padding:14px 16px;border-radius:12px;background:rgba(232,161,58,.12);font:600 13.5px/1.5 var(--font-body)}
.game-result-save a{color:var(--green);font-weight:800}

/* Боковая колонка: лидерборд и правила */
.game-side{display:grid;gap:18px}
.game-side .games-progress{margin-top:0}
.game-board{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.game-board h3{font:800 16px var(--font-head);margin:0 0 12px}
.game-board-empty{font:500 13px var(--font-body);color:var(--ink-soft);margin:0}
.game-board-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.game-board-list li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;font:600 13.5px var(--font-body)}
.game-board-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(21,97,61,.10);color:var(--green);font:800 12px var(--font-ui)}
.game-board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-board-points{font:700 12.5px var(--font-ui);color:var(--ink-soft)}
.game-side-note{padding:16px 18px;border-radius:12px;background:var(--surface-2);font:500 12.5px/1.6 var(--font-body);color:var(--ink-soft)}
.game-side-note p{margin:0 0 8px}
.game-side-note p:last-child{margin:0}
.game-side-note a{color:var(--green);font-weight:700}

/* Кнопка игры-заглушки и плитки игр */
.game-play-btn{padding:22px 40px;border:0;border-radius:16px;background:var(--grad);color:#fff;font:800 22px var(--font-head);cursor:pointer;box-shadow:0 8px 22px rgba(21,97,61,.28);transition:transform .18s var(--ease)}
.game-play-btn:active{transform:scale(.97)}
.game-tap-count{position:absolute;top:14px;right:16px;font:800 15px var(--font-ui);color:var(--green)}

@media (max-width:900px){
	.game-layout{grid-template-columns:minmax(0,1fr)}
	.game-canvas-wrap{min-height:260px}
}

/* Клуб шефа в личном кабинете */
.acc-club-games{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:20px}
.acc-club-badge{padding:6px 12px;border-radius:999px;background:rgba(21,97,61,.10);color:var(--green);font:800 12px var(--font-ui)}
.acc-club-sub{margin:30px 0 14px;font:800 18px var(--font-head)}
.acc-club-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.acc-club-level{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.acc-club-level.is-current{border-color:var(--green);box-shadow:var(--shadow-lift)}
.acc-club-level-head{display:flex;flex-direction:column;gap:4px;font:800 15px var(--font-head)}
.acc-club-level-head span{font:600 12px var(--font-ui);color:var(--ink-soft)}
.acc-club-perks{margin:10px 0 0;padding-left:18px;font:500 12.5px/1.6 var(--font-body);color:var(--ink-soft)}
.acc-club-table{width:100%;border-collapse:collapse;font:500 13.5px var(--font-body)}
.acc-club-table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font:800 12px var(--font-ui);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.acc-club-table td{padding:10px 12px;border-bottom:1px solid var(--line)}
.acc-club-delta{font:800 13.5px var(--font-ui);color:var(--green);text-align:right}
.acc-club-delta.is-minus{color:var(--red)}

/* Викторина «Вопросы от шефа» */
.quiz-intro{padding:6px 2px}
.quiz-intro h2{font:800 22px var(--font-head);margin:0 0 10px}
.quiz-intro p{font:500 14px/1.6 var(--font-body);color:var(--ink-soft);max-width:62ch}
.quiz-rules{margin:12px 0 20px;padding-left:20px;font:500 13.5px/1.7 var(--font-body);color:var(--ink-soft)}
.quiz-card{display:flex;flex-direction:column;gap:12px}
.quiz-progress{font:800 12px var(--font-ui);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.quiz-question{font:800 21px/1.35 var(--font-head);margin:0}
.quiz-category{align-self:flex-start;padding:4px 10px;border-radius:999px;background:rgba(21,97,61,.10);color:var(--green);font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.04em}
.quiz-timer{font:800 14px var(--font-ui);color:var(--green)}
.quiz-timer.is-low{color:var(--red)}
.quiz-options{display:grid;gap:10px}
.quiz-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:600 14.5px/1.35 var(--font-body);text-align:left;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
.quiz-option:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-1px)}
.quiz-option:active{transform:scale(.99)}
.quiz-option-key{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:rgba(21,97,61,.10);color:var(--green);font:800 12px var(--font-ui)}
.quiz-prev{padding:14px 16px;border-radius:12px;font:600 13.5px/1.5 var(--font-body);display:flex;flex-direction:column;gap:6px}
.quiz-prev.is-ok{background:rgba(21,97,61,.10);color:var(--ink)}
.quiz-prev.is-bad{background:rgba(217,79,61,.10);color:var(--ink)}
.quiz-explain{color:var(--ink-soft);font-weight:500}
.quiz-result{display:flex;flex-direction:column;gap:12px}
.quiz-result h3{font:800 21px var(--font-head);margin:0}
.quiz-score-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.quiz-correct{font:600 14px var(--font-body);color:var(--ink-soft)}
.quiz-result .game-board{margin-top:6px}

/* Блок «Правильные ответы»: вопросы партии, верные варианты и выбор игрока */
.quiz-answers{margin-top:6px;padding:18px 20px;border-radius:12px;background:var(--cream);border:1px solid var(--line)}
.quiz-answers h3{font:800 17px var(--font-head);margin:0 0 6px}
.quiz-answers-note{margin:0 0 14px;font:500 12.5px/1.6 var(--font-body);color:var(--ink-soft)}
.quiz-answers-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.quiz-answer{display:grid;gap:6px;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line)}
.quiz-answer.is-right{border-left-color:var(--green)}
.quiz-answer.is-wrong{border-left-color:var(--red)}
.quiz-answer-head{display:flex;gap:10px;align-items:baseline}
.quiz-answer-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:rgba(21,97,61,.10);color:var(--green);font:800 11px var(--font-ui)}
.quiz-answer-q{font:700 14px/1.4 var(--font-body);color:var(--ink)}
.quiz-answer-correct{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 13.5px/1.4 var(--font-body);color:var(--ink)}
.quiz-answer-label{font:800 10.5px var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.quiz-answer-mark{margin-left:auto;font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.quiz-answer.is-right .quiz-answer-mark{color:var(--green)}
.quiz-answer.is-wrong .quiz-answer-mark{color:var(--red)}
.quiz-answer-chosen{font:500 12.5px/1.5 var(--font-body);color:var(--ink-soft)}
.quiz-answer-chosen b{color:var(--red)}
.quiz-answer .quiz-explain{margin:0;font-size:12.5px}
.quiz-answer .btn-line{margin-top:2px}

/* Раунд-рецепт дня на странице игры */
.game-recipe{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;padding:12px 14px;margin-bottom:12px;border-radius:12px;background:rgba(232,161,58,.12)}
.game-recipe-label{font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.game-recipe-link{font:800 15px var(--font-head);color:var(--green);text-decoration:none}
.game-recipe-link:hover{text-decoration:underline}
.game-recipe-hint{font:500 12.5px var(--font-body);color:var(--ink-soft)}

/* Возврат в игровую зону под игровым полем */
.game-back{display:flex;justify-content:flex-start;margin-top:4px}
.game-back .btn svg{width:16px;height:16px}

/* Серия дней в правой колонке */
.game-streak{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.game-streak-label{font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.game-streak b{font:800 20px var(--font-head);color:var(--green)}
.game-streak-hint{flex:1 1 100%;font:500 12px/1.5 var(--font-body);color:var(--ink-soft)}

/* «Слово-блюдо»: доска с попытками, экранная клавиатура и статистика */
.word-intro{padding:6px 2px;display:flex;flex-direction:column;gap:12px}
.word-intro h2{font:800 22px var(--font-head);margin:0}
.word-intro p{font:500 14px/1.6 var(--font-body);color:var(--ink-soft);max-width:64ch;margin:0}
.word-legend{font-weight:800}
.word-legend.is-correct{color:var(--green)}
.word-legend.is-present{color:var(--amber)}
.word-legend.is-absent{color:var(--ink-soft)}
.word-card{display:flex;flex-direction:column;gap:12px}
.word-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;justify-content:space-between}
.word-mode{align-self:flex-start;padding:4px 10px;border-radius:999px;background:rgba(21,97,61,.10);color:var(--green);font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.04em}
.word-attempts{font:800 12px var(--font-ui);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.word-hint{margin:0;font:600 13.5px/1.5 var(--font-body);color:var(--ink)}
.word-hint b{color:var(--green)}
.word-error{margin:0;padding:10px 14px;border-radius:10px;background:rgba(217,79,61,.10);font:600 13.5px/1.5 var(--font-body);color:var(--ink)}
.word-rows{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.word-row{display:flex;gap:8px;justify-content:center}
.word-cell{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:800 20px var(--font-head);text-transform:uppercase;transition:background .2s var(--ease),border-color .2s var(--ease)}
.word-row.is-current .word-cell{border-color:var(--green);border-style:dashed}
.word-row.is-filled .word-cell{border-style:solid;border-color:var(--green2)}
.word-cell[data-mark="correct"]{background:var(--green);border-color:var(--green);color:#f4efe4}
.word-cell[data-mark="present"]{background:var(--amber);border-color:var(--amber);color:#3a2a08}
.word-cell[data-mark="absent"]{background:var(--surface-2);border-color:transparent;color:var(--ink-soft)}
.word-form{display:flex;flex-direction:column;gap:12px;margin:0}
.word-keyboard{display:flex;flex-direction:column;gap:6px}
.word-key-row{display:flex;gap:6px;justify-content:center}
.word-key{flex:0 1 auto;min-width:30px;height:42px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:700 15px var(--font-ui);cursor:pointer;transition:border-color .18s var(--ease),transform .12s var(--ease)}
.word-key:hover{border-color:var(--green)}
.word-key:active{transform:scale(.96)}
.word-key-wide{min-width:96px;font-size:13px}
.word-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.word-card.is-sending{opacity:.75;pointer-events:none}
.word-result{display:flex;flex-direction:column;gap:12px}
.word-result h3{font:800 21px var(--font-head);margin:0}
.word-answer{display:flex;flex-direction:column;gap:6px}
.word-answer-label{font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.word-answer-word{display:flex;gap:6px;flex-wrap:wrap}
.word-answer-word .word-cell{width:38px;height:38px;font-size:18px}
.word-stats{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.word-stats h3{font:800 15px var(--font-head);margin:0}
.word-stats-top{display:flex;flex-wrap:wrap;gap:6px 16px;font:600 13px var(--font-body);color:var(--ink-soft)}
.word-stats-top b{color:var(--green)}
.word-stats-rows{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.word-stats-rows li{display:grid;grid-template-columns:18px 1fr 28px;gap:8px;align-items:center}
.word-stats-num{font:800 12px var(--font-ui);color:var(--ink-soft)}
.word-stats-bar{height:12px;border-radius:999px;background:var(--grad);min-width:2px;transition:width .4s var(--ease)}
.word-stats-count{font:700 12px var(--font-ui);color:var(--ink-soft);text-align:right}
@media (max-width:520px){
  .word-cell{width:36px;height:36px;font-size:17px;border-radius:8px}
  .word-row{gap:5px}
  .word-key{min-width:24px;height:38px;padding:0 6px;font-size:13px}
  .word-key-row{gap:4px}
  .word-key-wide{min-width:80px}
}

/* «Кухня шефа» (idle): касса, станции и сбор выручки */
.idle-card{display:flex;flex-direction:column;gap:14px}
.idle-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.idle-pending,.idle-coins{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.idle-pending-label,.idle-coins-label{font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.idle-pending-value{font:800 28px var(--font-head);color:var(--green)}
.idle-pending-rate,.idle-coins-total{font:600 12.5px var(--font-body);color:var(--ink-soft)}
.idle-coins b{font:800 24px var(--font-head);color:var(--ink)}
.idle-collect{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.idle-collect-hint{font:500 12.5px/1.5 var(--font-body);color:var(--ink-soft);max-width:46ch}
/* Короткая версия подсказки — только для телефона (см. «Мобильная плотность»). */
.idle-collect-short{display:none}
.idle-message{margin:0;padding:10px 14px;border-radius:10px;font:600 13.5px/1.5 var(--font-body)}
.idle-message.is-ok{background:rgba(21,97,61,.10);color:var(--ink)}
.idle-message.is-bad{background:rgba(217,79,61,.10);color:var(--ink)}
.idle-stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.idle-station{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.idle-station.is-locked{opacity:.65}
.idle-station.is-max{border-color:var(--green)}
.idle-station-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;justify-content:space-between}
.idle-station-head b{font:800 17px var(--font-head)}
.idle-station-level{font:700 11px var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.idle-station-desc{margin:0;font:500 13px/1.5 var(--font-body);color:var(--ink-soft)}
.idle-station-nums{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.idle-income{font:800 15px var(--font-head);color:var(--green)}
.idle-income-next{font:600 12.5px var(--font-body);color:var(--ink-soft)}
.idle-lock,.idle-max{font:600 12.5px/1.5 var(--font-body);color:var(--ink-soft)}
.idle-upgrade{align-self:flex-start}
.idle-station-link{align-self:flex-start}
.idle-result{display:flex;flex-direction:column;gap:12px}
.idle-result h3{font:800 21px var(--font-head);margin:0}
.idle-result .idle-card{margin-top:4px}
@media (max-width:520px){
  .idle-pending-value{font-size:24px}
  .idle-stations{grid-template-columns:1fr}
}

.game-cap-note{margin:0;padding:12px 14px;border-radius:10px;background:rgba(232,161,58,.14);border:1px dashed rgba(232,161,58,.55);font:600 13px/1.5 var(--font-body);color:var(--ink)}
.game-cap-note b{font-weight:800}

/* «Кухня шефа»: живая пиксельная сцена и чаевые */
.idle-scene{padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--cream);box-shadow:var(--shadow)}
.idle-scene-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.idle-scene-title{flex:1 1 auto;font:800 11px var(--font-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.idle-sound{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.idle-sound svg{width:17px;height:17px}
.idle-sound svg g{display:none}
.idle-sound[aria-pressed="true"] svg .idle-sound-on{display:inline}
.idle-sound[aria-pressed="false"] svg .idle-sound-off{display:inline}
.idle-sound[aria-pressed="true"]{color:var(--green);border-color:var(--green)}
.idle-canvas{display:block;width:100%;max-width:512px;height:auto;margin:0 auto;border-radius:10px;background:#f6efe1;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:manipulation}
.idle-canvas.is-tip{cursor:pointer}
.idle-canvas:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.idle-scene-note{margin:10px 0 0;font:500 12.5px/1.5 var(--font-body);color:var(--ink-soft);text-align:center}
.idle-scene-note.is-tip{color:var(--green);font-weight:700}
@media (max-width:520px){
  .idle-scene{padding:8px}
  .idle-scene-title{font-size:10px}
}

/* ============================================================
   МОБИЛЬНАЯ ПЛОТНОСТЬ ИГРОВЫХ СТРАНИЦ (≤640px).

   Замер на 359px до правки: 16px контейнер + 20px .game-stage + 10px
   .idle-scene = 46px с каждой стороны, то есть 92px из 359 (26% ширины
   экрана) уходило в пустоту, а сцена на Canvas2D рисовалась всего 263px
   шириной. Здесь вложенные паддинги сжимаются до 10/10/8, вертикальные
   «полки» секции и hero убираются: холст получает +40px ширины и
   поднимается к первому экрану на ~85px, а страница становится короче
   на ~300px.
   Правило: на мобильном держим 8–12px от края экрана; две рамки подряд
   (секция + карточка + карточка) — это уже 40+px «воздуха» на ровном месте.
============================================================ */
@media (max-width:640px){
  .game-layout{gap:12px}
  .game-stage{padding:10px;border-radius:12px;gap:10px}
  .game-hud{gap:4px 12px;font:700 12.5px/1.45 var(--font-ui)}
  .game-cap-note{padding:10px 12px}
  .game-hint{font-size:12px}
  .idle-card{gap:10px}
  .idle-top{gap:10px}
  .idle-pending,.idle-coins,.idle-station{padding:12px}
  .idle-stations{gap:10px}
  .idle-collect{gap:10px}
  .idle-scene{padding:8px}
  .idle-scene-bar{margin-bottom:6px}
  .idle-scene-note{margin-top:6px}
  .games-progress{padding:14px}
  .game-board{padding:14px}
  .game-streak{padding:10px 12px}
  .game-side{gap:12px}
  .game-side-note{padding:12px 14px}
  .games-register-card{padding:20px 16px}
  .game-back{margin-top:0}
  /* Подсказка сбора: на десктопе она висит справа от кнопки, на телефоне
     уходит под неё и занимает пол-экрана. Оставляем короткую версию
     (.idle-collect-short — вторая строка в шаблоне). */
  .idle-collect-hint{display:none}
  .idle-collect-short{display:inline}
}

/* ============================================================
   «Игровая зона»: премиум-блок на главной и витрина автоматов в зале.
   Палитра — ночная зелень + золото (наследует «Лавку», но глубже).
   Карта-автомат: маркиза с лампочками → экран со сценой → панель с игрой.
   ============================================================ */

/* Пиксельный шрифт — только для латинских микро-подписей (PRESS START,
   INSERT COIN): в Press Start 2P нет кириллицы, русский текст идёт Manrope. */
@font-face{
  font-family:'Press Start 2P';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
}

.gz{
  --gz-gold:#d9a441;
  --gz-gold-bright:#f0c560;
  --gz-night:#08251a;
  --gz-night-2:#0c3a24;
  --gz-screen:#0a1c13;
  --gz-line:rgba(217,164,65,.35);
  --font-pixel:'Press Start 2P','Space Grotesk',monospace;
  position:relative;
  overflow:hidden;
  padding:88px 0 96px;
  background:
    radial-gradient(ellipse 900px 460px at 12% 0%, rgba(31,125,79,.42), transparent 62%),
    radial-gradient(ellipse 620px 420px at 92% 108%, rgba(217,164,65,.14), transparent 60%),
    var(--gz-night);
  color:#f4efe4;
}
.gz::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.12) 3px 4px);
  opacity:.35;
}
.gz .container{position:relative;z-index:2}
.gz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.gz .sec-label{color:var(--gz-gold-bright)}
.gz .sec-label::before{background:var(--gz-gold)}
.gz-title{margin:0;font:700 clamp(30px,4.6vw,52px)/1.06 var(--font-head);color:#f4efe4}
.gz-note{max-width:360px;font:500 14px/1.6 var(--font-body);color:rgba(244,239,228,.66)}
.gz-grid{display:flex;flex-direction:column;gap:40px}
.gz-lead{max-width:74ch;font:500 15.5px/1.7 var(--font-body);color:rgba(244,239,228,.82)}
.gz-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px}
.gz-list li{position:relative;padding-left:26px;font:500 14px/1.6 var(--font-body);color:rgba(244,239,228,.78)}
.gz-list li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:3px;background:var(--gz-gold);box-shadow:0 0 10px rgba(240,197,96,.5)}
.gz-list b{color:#f4efe4;font-weight:800}
.gz-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:30px}
.gz-btn{background:linear-gradient(180deg,var(--gz-gold-bright),var(--gz-gold));color:#2c1d05;box-shadow:0 5px 0 #8a6420,0 12px 26px rgba(0,0,0,.35)}
.gz-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.gz-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8a6420,0 6px 14px rgba(0,0,0,.3)}
.gz-ghost{padding-bottom:3px;font:800 13.5px var(--font-body);color:var(--gz-gold-bright);border-bottom:1px solid rgba(240,197,96,.45)}
.gz-ghost:hover{color:#fff;border-color:#fff}

/* Колода: симметричный веер. Наклон приходит из --final (инлайн, без JS),
   на hover карта выпрямляется и поднимается — как карта в руке. */
.gz-deck{display:flex;justify-content:center;align-items:flex-end;padding:26px 8px 14px;perspective:1100px}
.gz-card{
  position:relative;display:flex;flex-direction:column;flex:0 0 auto;
  width:200px;margin:0 -32px;border-radius:16px;overflow:hidden;
  transform-origin:50% 100%;
  transform:rotate(var(--final,0deg));
  text-decoration:none;color:#f4efe4;
  background:linear-gradient(180deg,#123d29,#0a2417);
  border:2px solid var(--gz-line);
  box-shadow:0 18px 38px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.2,.7,.3,1.25),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.gz-card:hover,.gz-card:focus-visible{
  transform:rotate(0deg) translateY(-16px) scale(1.05);z-index:12;
  border-color:var(--gz-gold-bright);
  box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 30px rgba(240,197,96,.22);
}
.gz-card:focus-visible{outline:2px solid var(--gz-gold-bright);outline-offset:4px}
/* В веере главной карта — только верх автомата (маркиза + экран): панель с
   описанием и очками живёт в витрине зала, поэтому экран закрывает карту
   снизу собственным отступом. */
.gz-card .gz-screen{margin-bottom:12px}

/* Витрина зала: тот же автомат, но ровной сеткой, без наклона. */
.games-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px 22px}
.games-pick{margin:0 0 18px;font:800 12px var(--font-ui);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft)}
.gz-cab{
  display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  text-decoration:none;color:#f4efe4;
  background:linear-gradient(180deg,#123d29,#0a2417);
  border:2px solid var(--gz-line);
  box-shadow:0 14px 30px rgba(8,37,26,.28);
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
/* Карточки витрины на hover не поднимаются: отклик — рамка, тень и цвет.
   Золото задано литералом: на странице зала нет обёртки .gz, где объявлены
   переменные --gz-* (см. блок «Игровая зона»), поэтому var() здесь пустой. */
.gz-cab:hover{border-color:#f0c560;box-shadow:0 22px 44px rgba(8,37,26,.4),0 0 26px rgba(240,197,96,.18);color:#f4efe4}

/* Начинка автомата — общая для карты и витрины. */
.gz-marquee{position:relative;padding:12px 14px 10px;text-align:center;background:linear-gradient(180deg,#1a4c33,#123826);border-bottom:2px solid rgba(217,164,65,.4)}
.gz-bulbs{display:flex;justify-content:center;gap:10px;margin-bottom:8px}
.gz-bulbs i{width:6px;height:6px;border-radius:50%;background:var(--gz-gold-bright);box-shadow:0 0 8px 2px rgba(240,197,96,.55);animation:gz-bulb 1.6s infinite}
.gz-bulbs i:nth-child(2n){animation-delay:.25s}
.gz-bulbs i:nth-child(3n){animation-delay:.5s}
.gz-bulbs i:nth-child(4n){animation-delay:.75s}
@keyframes gz-bulb{0%,100%{opacity:1}50%{opacity:.28}}
.gz-kind{display:inline-block;padding:3px 8px;border-radius:3px;background:var(--gz-gold-bright);color:var(--gz-night);font:400 7.5px var(--font-pixel);letter-spacing:.1em;text-transform:uppercase}
.gz-name{display:block;margin-top:8px;font:700 18px/1.2 var(--font-head);color:#f4efe4;text-shadow:0 0 16px rgba(240,197,96,.28)}
.gz-screen{position:relative;display:block;margin:12px 12px 0;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--gz-screen);border:3px solid #051009;box-shadow:inset 0 0 0 2px rgba(217,164,65,.22),inset 0 0 26px rgba(0,0,0,.7)}
.gz-scene{display:block;width:100%;height:100%;transition:transform .5s var(--ease),filter .4s var(--ease)}
.gz-card:hover .gz-scene,.gz-cab:hover .gz-scene{transform:scale(1.06);filter:brightness(1.15) saturate(1.12)}
.gz-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%),repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.2) 2px 3px)}
.gz-press{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:400 8px var(--font-pixel);letter-spacing:.14em;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.8);opacity:0;transition:opacity .25s var(--ease);animation:gz-blink .9s steps(1) infinite}
.gz-card:hover .gz-press,.gz-card:focus-visible .gz-press,.gz-cab:hover .gz-press,.gz-cab:focus-visible .gz-press{opacity:1}
@keyframes gz-blink{0%,100%{opacity:1}50%{opacity:.2}}
.gz-panel{display:flex;flex-direction:column;gap:10px;flex:1;margin:12px 10px 0;padding:14px 14px 16px;background:linear-gradient(180deg,#fffdf6,#f1e9d6);border:1px solid rgba(21,97,61,.15);border-bottom:none;border-radius:10px 10px 0 0;color:var(--ink)}
.gz-desc{flex:1;font:500 12.5px/1.5 var(--font-body);color:rgba(32,40,31,.72)}
.gz-points{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:5px 11px;border-radius:999px;border:1px dashed rgba(217,164,65,.9);background:rgba(217,164,65,.14);font:800 11.5px var(--font-ui);color:#8a6420}
.gz-points svg{width:14px;height:14px;color:#b98a2e}
.gz-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gz-insert{font:400 7px var(--font-pixel);letter-spacing:.1em;color:rgba(32,40,31,.45);animation:gz-blink 1.6s steps(1) infinite}
.gz-play{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:8px;background:linear-gradient(180deg,#1b7a4d,var(--green));color:#f4efe4;font:800 13px var(--font-body);box-shadow:0 4px 0 var(--gz-night),inset 0 1px 0 rgba(255,255,255,.2)}
.gz-play svg{width:14px;height:14px;color:var(--gz-gold-bright);transition:transform .25s var(--ease)}
.gz-card:hover .gz-play svg,.gz-cab:hover .gz-play svg{transform:translateX(4px)}

@media (max-width:1100px){
  .gz-note{max-width:none}
  .gz-deck{padding-top:14px}
}
@media (max-width:820px){
  .gz{padding:68px 0 76px}
  .gz-list{grid-template-columns:1fr}
  .gz-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:8px 0 0;perspective:none}
  .gz-card{width:auto;margin:0;border-radius:14px;transform:none}
  .gz-card:hover,.gz-card:focus-visible{transform:translateY(-5px);z-index:1}
  .gz-name{font-size:15px}
  .gz-desc{display:none}
  .gz-screen{margin:8px 8px 0}
  .gz-panel{margin:8px 6px 0;padding:10px 10px 12px;gap:7px}
  .gz-insert{display:none}
}
@media (max-width:560px){
  .gz-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gz-title{font-size:30px}
}

@media (prefers-reduced-motion: reduce){
  .gz-bulbs i,.gz-insert,.gz-press{animation:none}
  .gz-card,.gz-cab,.gz-play svg,.gz-scene{transition:none}
}