:root {
    --bg:           #0B0805;
    --card:         #120C06;
    --surface:      #0E0A06;
    --flame:        #F0C040;
    --accent:       #E8A81C;
    --wood:         #8A5E05;
    --text:         #F2E7C9;
    --muted:        #B09A6C;
    --dim:          #8C7850;
    --border:       rgba(232,168,28,0.18);
    --border-hover: rgba(232,168,28,0.45);
    --font-display: 'Bitter', Georgia, serif;
    --font-body:    'PT Sans', system-ui, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
  }

  body::after {
    content: '';
    position: fixed; top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse, rgba(240,192,64,0.05) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
  }

  /* ── Навбар (game-info кастомный) ── */
  .nav-sep { color: var(--dim); font-size: 14px; }
  .nav-game-title {
    font-size: 14px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
  }
  .nav-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; align-items: center; }
  .nbtn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 18px; font-size: 13px;
    font-family: var(--font-body); font-weight: 700;
    cursor: pointer; text-decoration: none; border: none;
    transition: all 0.2s; white-space: nowrap;
  }
  .nbtn-ghost { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
  .nbtn-ghost:hover { color: var(--text); border-color: var(--border-hover); }
  .nbtn-play  { background: var(--accent); color: #0B0805; }
  .nbtn-play:hover  { background: var(--flame); }

  /* ── Layout ── */
  .page {
    position: relative; z-index: 1;
    max-width: 960px; margin: 0 auto;
    padding: 40px 24px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: 24px;
    align-items: start;
  }

  /* ── Общие стили карточек ── */
  .pcard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }
  .pcard-title {
    font-family: var(--font-display); letter-spacing: var(--ls-display, .05em); font-size: 15px; font-weight: 700;
    color: var(--muted); letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
  }

  /* ── Форма редактирования ── */
  .edit-card { grid-column: 1; grid-row: 1; }

  .emoji-row {
    display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
  }
  .emoji-big {
    font-size: 56px; line-height: 1;
    cursor: pointer; transition: transform 0.15s;
    user-select: none;
  }
  .emoji-big:hover { transform: scale(1.1); }
  .emoji-edit-hint { font-size: 12px; color: var(--dim); font-style: italic; }
  .emoji-input-wrap { display: none; margin-top: 6px; }
  .emoji-input-wrap.open { display: block; }

  .field { margin-bottom: 18px; }
  .field label {
    display: block; font-size: 12px; font-weight: 700; color: var(--muted);
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px;
  }
  .field input, .field textarea, .field select {
    width: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px;
    color: var(--text); font-family: var(--font-body); font-size: 15px;
    outline: none; transition: border-color 0.2s;
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--border-hover);
    box-shadow: 0 0 0 3px rgba(232,168,28,0.1);
  }
  .field textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
  .field select { cursor: pointer; }
  .field input::placeholder, .field textarea::placeholder { color: var(--dim); }

  .fields-row { display: flex; gap: 14px; }
  .fields-row .field { flex: 1; }

  /* ── Теги ── */
  .tags-wrap {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    min-height: 46px; padding: 8px 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; cursor: text; transition: border-color 0.2s;
  }
  .tags-wrap:focus-within {
    border-color: var(--border-hover);
    box-shadow: 0 0 0 3px rgba(232,168,28,0.1);
  }
  .tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(232,168,28,0.15); border: 1px solid rgba(232,168,28,0.3);
    color: var(--accent); border-radius: 20px;
    padding: 3px 10px 3px 12px; font-size: 13px; white-space: nowrap;
  }
  .tag-chip-del {
    background: none; border: none; color: var(--accent);
    cursor: pointer; font-size: 14px; line-height: 1;
    padding: 0; opacity: 0.7; transition: opacity 0.15s;
    font-family: monospace;
  }
  .tag-chip-del:hover { opacity: 1; }
  .tag-input {
    flex: 1; min-width: 120px; background: none; border: none; outline: none;
    color: var(--text); font-family: var(--font-body); font-size: 15px;
    padding: 2px 0;
  }
  .tag-input::placeholder { color: var(--dim); }
  .tags-hint { font-size: 11px; color: var(--dim); margin-top: 5px; }

  .btn-save {
    width: 100%; padding: 13px; font-size: 15px; font-weight: 700;
    font-family: var(--font-body); background: var(--accent); color: #0B0805;
    border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(232,168,28,0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-save:hover:not(:disabled) { background: var(--flame); transform: translateY(-1px); }
  .btn-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  .save-msg { text-align: center; font-size: 13px; margin-top: 10px; min-height: 18px; }
  .save-msg.ok  { color: #8ac840; }
  .save-msg.err { color: #e88a80; }

  /* ── Статистика ── */
  .stats-card { grid-column: 2; grid-row: 1; }

  .stat-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
  }
  .stat-row:last-child { border-bottom: none; }
  .stat-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  .stat-body { flex: 1; min-width: 0; }
  .stat-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
  .stat-val { font-size: 15px; font-weight: 700; color: var(--text); }
  .stat-val.mono { font-family: monospace; font-size: 13px; color: var(--muted); word-break: break-all; }

  .slug-copy {
    margin-top: 4px; font-size: 11px; color: var(--accent); cursor: pointer;
    background: none; border: none; font-family: var(--font-body);
    padding: 0; transition: color 0.2s;
  }
  .slug-copy:hover { color: var(--flame); }

  /* ── Действия ── */
  .actions-card { grid-column: 2; grid-row: 1; margin-top: 0; }

  .act-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 11px; border-radius: 10px; margin-bottom: 8px;
    font-size: 14px; font-weight: 700; font-family: var(--font-body);
    cursor: pointer; text-decoration: none; border: none; transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .act-btn:last-child { margin-bottom: 0; }
  .act-primary { background: var(--accent); color: #0B0805; box-shadow: 0 4px 16px rgba(232,168,28,0.3); }
  .act-primary:hover { background: var(--flame); }
  .act-ghost { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
  .act-ghost:hover { color: var(--text); border-color: var(--border-hover); }
  .act-fork { background: rgba(232,168,28,0.12); color: var(--accent); border: 1px solid rgba(232,168,28,0.28); }
  .act-fork:hover { background: rgba(232,168,28,0.22); color: var(--flame); }
  .edit-card[hidden] { display: none; }
  /* Жалоба на игру (09.10, как «Пожаловаться» на YouTube): отдельная кнопка с красной рамкой — заметная, но не главная */
  .act-report { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 14px 0 0;
                padding: 11px; border-radius: 10px; background: rgba(232,64,64,.10); color: #ff9a8a;
                border: 1px solid rgba(232,64,64,.45); font: 700 14px var(--font-body); cursor: pointer; }
  .act-report:hover { background: rgba(232,64,64,.2); color: #ffb4a8; border-color: rgba(232,64,64,.75); }
  .act-report[hidden] { display: none; }
  .rp-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.65); display: flex;
                align-items: center; justify-content: center; padding: 16px; }
  .rp-overlay[hidden] { display: none; }
  .rp-box { background: var(--card); border: 1px solid var(--border-strong); border-radius: 16px; width: 100%;
            max-width: 460px; max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; }
  .rp-box h3 { font: var(--fw-display, 700) 20px var(--font-display); letter-spacing: var(--ls-display, .05em); margin: 0 0 4px; }
  .rp-sub { color: var(--text-3); font-size: 13px; margin: 0 0 14px; }
  .rp-opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; cursor: pointer; color: var(--text-2); line-height: 1.35; }
  .rp-opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gold-mid); }
  .rp-opt:has(input:checked) { color: var(--text); }
  .rp-copy { font-size: 13px; color: var(--text-3); margin: 8px 4px 0; line-height: 1.45; }
  .rp-copy a { color: var(--gold); }
  .rp-box textarea { width: 100%; min-height: 80px; margin-top: 12px; background: var(--surface); color: var(--text);
                     border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 12px; font: 15px var(--font-body); resize: vertical; }
  .rp-row { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 14px; flex-wrap: wrap; }
  .rp-msg { font-size: 13px; color: #E88A80; margin-right: auto; }
  .rp-done { text-align: center; color: var(--text-2); line-height: 1.6; }

  /* ── Сеть ── */
  .net-now { font-size: 14px; color: var(--text); margin-bottom: 10px; }
  .net-now b { color: #b6f06a; }
  .net-rooms { display: grid; gap: 6px; margin-bottom: 10px; }
  .net-rooms a {
    display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    text-decoration: none; font-size: 14px;
  }
  .net-rooms a:hover { border-color: var(--border-hover); }
  .net-rooms a span:last-child { color: var(--accent); font-weight: 700; white-space: nowrap; }

  /* ── Скриншоты ── */
  .screenshots-card {
    grid-column: 1 / -1; grid-row: 2;
  }
  /* Обложка рисуется дизайнером, видео и скриншоты снимаются в игре —
     это разные вещи, и лежат они отдельно */
  .media-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
  .media-item { flex: 1 1 260px; min-width: 0; max-width: 420px; }
  .media-label {
    font-size: 11px; font-weight: 700; color: var(--muted);
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
  }
  .cover-big, .anim-big {
    display: block; width: 100%; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface);
  }
  .cover-big { aspect-ratio: 16 / 10; object-fit: cover; }
  .anim-big { max-height: 320px; object-fit: contain; }
  .cover-empty {
    display: flex; align-items: center; justify-content: center; padding: 16px;
    border-style: dashed; color: var(--dim); font-size: 13px; font-style: italic; text-align: center;
  }
  /* Пока рисуется обложка — затемнение с крутилкой и секундомером поверх
     прежней: минута без движения выглядела зависанием */
  .cover-stage { position: relative; }
  .cover-busy {
    position: absolute; inset: 0; z-index: 2; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(11,8,5,0.78); color: var(--flame); text-align: center; padding: 16px;
  }
  /* Обложки ещё нет — заглушка низкая, крутилке нужно место */
  .cover-stage.busy { min-height: 170px; }
  .cover-busy[hidden] { display: none; }
  .cover-busy b { font: 700 16px var(--font-display); letter-spacing: var(--ls-display, .05em); }
  .cover-busy small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
  .spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid rgba(240,192,64,0.2); border-top-color: var(--flame);
    animation: spin 0.9s linear infinite;
  }
  .act-btn .spinner { display: inline-block; width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; margin-right: 8px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
  .cover-tools { margin-top: 10px; }
  .cover-tools .act-btn { margin-bottom: 0; }
  .cover-tools .act-btn:disabled { opacity: 0.6; cursor: wait; }
  .cover-comment {
    width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 9px 12px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; font: 16px var(--font-body);   /* 16px — iPhone не зумит поле */
  }
  .screenshot-slot.readonly { cursor: default; border-style: solid; }
  /* Видео бывает и вертикальным (игра под телефон) — целиком, без обрезки */
  .screenshot-slot.video-slot img { object-fit: contain; }
  .videos-grid { margin-bottom: 18px; }
  .video-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .video-card video {
    width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000;
    border-radius: 10px; border: 1px solid var(--border); display: block;
  }
  .video-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                font-size: 12px; color: var(--muted); }
  .rec-link { display: inline-block; margin: 0 0 12px; font-size: 13px; color: var(--accent); }

  .screenshots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .screenshot-slot {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 10px;
    border: 1px dashed var(--border);
    overflow: hidden;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .screenshot-slot:hover { border-color: var(--border-hover); }

  .screenshot-slot img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  .slot-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; gap: 10px;
    color: var(--dim); font-size: 12px; font-style: italic;
    user-select: none; text-align: center; padding: 12px;
  }
  .slot-placeholder-icon {
    font-size: 26px; opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
  }
  .screenshot-slot:hover .slot-placeholder-icon {
    opacity: 0.9; transform: scale(1.12);
  }
  .slot-placeholder-hint {
    font-size: 11px; color: var(--dim);
    letter-spacing: 0.3px; line-height: 1.4;
  }

  .slot-overlay {
    position: absolute; inset: 0;
    background: rgba(11,8,5,0.72);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity 0.2s;
  }
  .screenshot-slot:hover .slot-overlay { opacity: 1; }

  .slot-btn {
    padding: 6px 14px; border-radius: 18px; font-size: 12px; font-weight: 700;
    font-family: var(--font-body); cursor: pointer; border: none; transition: all 0.18s;
  }
  .slot-btn-upload { background: var(--accent); color: #0B0805; }
  .slot-btn-upload:hover { background: var(--flame); }
  .slot-btn-del { background: rgba(232,138,128,0.15); color: #e88a80; border: 1px solid rgba(232,138,128,0.3); }
  .slot-btn-del:hover { background: rgba(232,138,128,0.28); }

  .slot-loading {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(11,8,5,0.82); font-size: 22px;
  }
  .slot-loading.active { display: flex; }

  @media (max-width: 560px) {
    .screenshots-grid { grid-template-columns: 1fr; }
    /* Шапка с «Каталогом», @именем и «Играть» была шире телефона на ~25px —
       страница уменьшалась и ездила вбок. В каталог ведёт и логотип */
    .nav-actions .nbtn-ghost { display: none; }
  }

  /* ── Лидерборд ── */
  /* ── Настройки игры (js/config.js) — только автору ── */
  .settings-card { grid-column: 1 / -1; grid-row: 4; display: none; }
  .settings-card.on { display: block; }
  .set-list { display: grid; gap: 12px; margin-top: 4px;
              grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .set-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 14px; }
  .set-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-val { color: var(--flame); font-weight: 700; font-variant-numeric: tabular-nums; }
  .set-row input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
  .set-row select { grid-column: 1 / -1; width: 100%; font: inherit; font-size: 13px; padding: 4px 6px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
  .set-hint { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
  .set-status { font-size: 13px; color: var(--muted); min-height: 18px; margin-top: 10px; }

  .leaderboard-card { grid-column: 1 / -1; grid-row: 5; }

  .lb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    transition: background 0.15s;
  }
  .lb-row:hover { background: rgba(232,168,28,0.05); }
  .lb-row + .lb-row { border-top: 1px solid var(--border); }
  .lb-rank {
    font-size: 14px; font-weight: 700; width: 32px; flex-shrink: 0;
    text-align: center; color: var(--muted);
  }
  .lb-rank.gold   { font-size: 20px; }
  .lb-rank.silver { font-size: 20px; }
  .lb-rank.bronze { font-size: 20px; }
  .lb-name {
    flex: 1; font-size: 14px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lb-score {
    font-size: 15px; font-weight: 700; color: var(--flame);
    font-family: monospace; flex-shrink: 0;
  }
  .lb-date { font-size: 11px; color: var(--dim); flex-shrink: 0; }
  .lb-empty { padding: 24px; text-align: center; font-size: 14px; color: var(--dim); font-style: italic; }
  .lb-refresh {
    margin-left: auto;
    padding: 3px 12px; border-radius: 14px; font-size: 12px;
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); cursor: pointer; font-family: var(--font-body);
    transition: all 0.18s;
  }
  .lb-refresh:hover { border-color: var(--border-hover); color: var(--text); }

  /* ── История версий ── */
  .history-card {
    grid-column: 1 / -1; grid-row: 6;
  }

  .chain { display: flex; flex-direction: column; gap: 0; }

  .chain-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 10px;
    text-decoration: none; color: var(--text);
    transition: background 0.18s;
    position: relative;
  }
  .chain-item:hover { background: rgba(232,168,28,0.05); }
  .chain-item.current {
    background: rgba(240,192,64,0.06);
    border: 1px solid rgba(240,192,64,0.2);
  }
  .chain-arrow {
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px; color: var(--dim); font-size: 18px;
  }
  .chain-emoji { font-size: 28px; flex-shrink: 0; }
  .chain-body { flex: 1; min-width: 0; }
  .chain-title { font-family: var(--font-display); letter-spacing: var(--ls-display, .05em); font-size: 14px; font-weight: 700; }
  .chain-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .chain-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    flex-shrink: 0;
  }
  .badge-current { background: rgba(240,192,64,0.15); color: var(--flame); border: 1px solid rgba(240,192,64,0.3); }
  .badge-parent  { background: rgba(232,168,28,0.1); color: var(--muted); border: 1px solid var(--border); }
  .badge-fork    { background: rgba(232,168,28,0.1); color: var(--accent); border: 1px solid rgba(232,168,28,0.25); }

  .chain-section-label {
    font-size: 11px; font-weight: 700; color: var(--dim);
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 6px 16px 4px; margin-top: 8px;
  }
  .ver-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
  .ver-item { padding: 10px 16px; border-left: 2px solid var(--border); margin-left: 16px; }
  .ver-head { display: flex; align-items: center; gap: 10px; }
  .ver-head .chain-badge { margin: 0; }
  .ver-restore { margin-left: auto; background: none; border: 1px solid var(--border-strong); border-radius: 6px;
                 color: var(--text-2); font: 500 12px var(--font-body); padding: 4px 9px; cursor: pointer; }
  .ver-restore:hover:not(:disabled) { color: var(--gold-light); border-color: var(--gold-mid); }
  .ver-restore:disabled { opacity: .5; cursor: default; }
  .ver-date { font-size: 12px; color: var(--muted); }
  .ver-notes { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
  .ver-notes li { overflow-wrap: anywhere; }
  .chain-divider { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

  .no-forks { padding: 16px; font-size: 14px; color: var(--dim); font-style: italic; }

  /* ── Рейтинг и оценка игры ── */
  .rate-box { margin-bottom: 14px; }
  .rate-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; justify-content: center; }
  .rate-label { font-size: 13px; color: var(--muted); }
  .rate-pct { font: var(--fw-display, 700) 24px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--flame); }
  .rate-pct.none { font-size: 14px; font-weight: 400; font-style: italic; color: var(--dim); }
  .rate-cnt { font-size: 14px; color: var(--muted); white-space: nowrap; }
  .rate-q { text-align: center; font-size: 14px; color: var(--text); margin: 10px 0 8px; }
  .rate-box .game-react-row { margin-bottom: 0; }
  /* ── Лайки на игру ── */
  .game-react-row { display: flex; gap: 8px; margin-bottom: 14px; }
  .game-react-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); cursor: pointer;
    font-family: var(--font-body); font-size: 15px; font-weight: 700;
    transition: all 0.2s; -webkit-tap-highlight-color: transparent;
  }
  .game-react-btn:hover { border-color: var(--border-hover); color: var(--text); }
  .game-react-btn.active-like    { background: rgba(138,200,64,0.12); color: #8ac840; border-color: rgba(138,200,64,0.35); }
  .game-react-btn.active-dislike { background: rgba(232,138,128,0.12); color: #e88a80; border-color: rgba(232,138,128,0.35); }

  /* ── Комментарии ── */
  .comments-card { grid-column: 1 / -1; grid-row: 7; }

  .comment-form { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .cform-input {
    width: 100%; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
    color: var(--text); font-family: var(--font-body); font-size: 14px;
    outline: none; transition: border-color 0.2s;
  }
  .cform-input:focus { border-color: var(--border-hover); box-shadow: 0 0 0 3px rgba(232,168,28,0.1); }
  .cform-input::placeholder { color: var(--dim); }
  .cform-name { margin-bottom: 10px; }
  .cform-body { min-height: 80px; resize: vertical; display: block; margin-bottom: 10px; line-height: 1.55; }
  .btn-comment-submit {
    padding: 9px 22px; background: var(--accent); color: #0B0805;
    border: none; border-radius: 10px; font-family: var(--font-body);
    font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s;
  }
  .btn-comment-submit:hover { background: var(--flame); }
  .btn-comment-submit:disabled { opacity: 0.5; cursor: not-allowed; }

  .comment-count-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    background: rgba(232,168,28,0.12); color: var(--muted); border: 1px solid var(--border);
    margin-left: 6px;
  }

  .comments-list { display: flex; flex-direction: column; }
  .comment-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
  .comment-item:last-child { border-bottom: none; }
  .comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
  /* Аватар автора: своё фото из «Настроек» или узор из имени (nav.js) */
  .ava-sm {
    display: inline-block; width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: #0E0A06 center / cover no-repeat; border: 1px solid var(--border);
    vertical-align: middle;
  }
  .comment-author { font-weight: 700; font-size: 14px; color: var(--text); }
  .comment-date   { font-size: 12px; color: var(--dim); }
  .comment-body   {
    font-size: 15px; line-height: 1.6; color: var(--text);
    white-space: pre-wrap; word-break: break-word; margin-bottom: 10px;
  }
  .comment-footer { display: flex; gap: 6px; }
  .comment-react-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 16px;
    border: 1px solid var(--border); background: transparent;
    color: var(--muted); font-family: var(--font-body); font-size: 13px;
    cursor: pointer; transition: all 0.18s; -webkit-tap-highlight-color: transparent;
  }
  .comment-react-btn:hover { border-color: var(--border-hover); color: var(--text); }
  .comment-react-btn.active-like    { background: rgba(138,200,64,0.1); color: #8ac840; border-color: rgba(138,200,64,0.3); }
  .comment-react-btn.active-dislike { background: rgba(232,138,128,0.1); color: #e88a80; border-color: rgba(232,138,128,0.3); }
  .comments-empty { padding: 24px 0; text-align: center; font-size: 14px; color: var(--dim); font-style: italic; }


  /* ── Правила игры ── */
  .rules-card { grid-column: 1 / -1; grid-row: 3; }
  .rules-card[hidden] { display: none; }
  .rules-text { white-space: pre-line; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
  .rules-empty { color: var(--dim); font-style: italic; }
  .rules-edit {
    width: 100%; box-sizing: border-box; min-height: 260px; padding: 10px 12px; resize: vertical;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; font: 15px/1.5 var(--font-body); outline: none;
  }
  .rules-edit:focus { border-color: var(--border-hover); }
  .rules-count { font-size: 12px; color: var(--dim); text-align: right; margin-top: 4px; }
  .rules-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .rules-tools[hidden] { display: none; }
  .rules-tools .act-btn { flex: 1 1 160px; width: auto; margin: 0; }
  .act-btn[hidden] { display: none; }
  .rules-tools .act-btn:disabled { opacity: 0.6; cursor: wait; }

  /* ── Тост ── */
  .toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--card); border: 1px solid var(--border-hover);
    color: var(--flame); font-weight: 700; font-size: 14px;
    padding: 10px 24px; border-radius: 24px;
    transition: transform 0.3s; z-index: 200; white-space: nowrap;
  }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ── Адаптив ── */
  @media (max-width: 700px) {
    .page { grid-template-columns: 1fr; padding: 24px 16px 60px; }
    .edit-card        { grid-column: 1; grid-row: 1; }
    .stats-card       { grid-column: 1; grid-row: 2; }
    .actions-card     { grid-column: 1; grid-row: 3; }
    .screenshots-card { grid-column: 1; grid-row: 4; }
    .rules-card       { grid-column: 1; grid-row: 5; }
    .settings-card    { grid-column: 1; grid-row: 6; }
    .leaderboard-card { grid-column: 1; grid-row: 7; }
    .history-card     { grid-column: 1; grid-row: 8; }
    .comments-card    { grid-column: 1; grid-row: 9; }
    .fields-row { flex-direction: column; gap: 0; }
  }
  /* Возрастная марка 0+…18+ — как .sc-age в showcase.css */
  .age-mark { display: inline-block; margin-right: 8px; font: 800 10px/1 sans-serif; letter-spacing: .3px;
              padding: 3px 6px; border-radius: 6px; vertical-align: 2px;
              color: #F2E7C9; border: 1px solid rgba(242,231,201,.45); }
  .age-mark.teen  { color: #ffcf8a; border-color: rgba(255,170,60,.7); }
  .age-mark.adult { color: #fff; background: #8f1d14; border-color: #c8321f; }

  /* ══ Фирменный стиль (07.10): две колонки — слева правка и медиа, справа всё для игрока ══ */
  .page { max-width: 1280px; padding: 32px 28px 80px; display: grid;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); grid-template-rows: none; gap: 20px; }
  .gi-left, .gi-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .gi-left > .pcard, .gi-right > .pcard { grid-column: auto !important; grid-row: auto !important; }
  .pcard { border-radius: 16px; padding: 22px; }
  .pcard-title { font: var(--fw-display, 700) 20px var(--font-display); letter-spacing: var(--ls-display, .05em); text-transform: none; color: var(--text); }
  .nav-logo .brand-word { color: var(--text); }
  .nav-logo .brand-ai { color: #14100A; }
  .nav-game-title { font-weight: 900; }
  .nbtn { border-radius: 6px; padding: 7px 14px; transition: filter .15s; }
  .nbtn-ghost { background: var(--key-dark); color: var(--text); border: 0; border-bottom: 4px solid #0B0703; box-shadow: inset 0 1px 0 rgba(242,231,201,.12); border-radius: 6px; border-bottom-width: 3px; }
  .nbtn-play { background: var(--key-gold); color: var(--outline); border: 0; border-bottom: 4px solid #6E4E06; box-shadow: inset 0 1px 0 rgba(255,235,190,.4); border-radius: 6px; border-bottom-width: 3px; }
  .nbtn:hover { filter: brightness(1.1); }
  .field label { font: 400 13px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
  .field input, .field textarea, .field select { border-radius: 8px; border-color: var(--border-strong); }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold-mid); }
  .btn-save, .act-primary, .btn-comment-submit { background: var(--key-gold); color: var(--outline); border: 0; border-bottom: 4px solid #6E4E06; box-shadow: inset 0 1px 0 rgba(255,235,190,.4); border-radius: 6px; }
  .btn-save:hover:not(:disabled), .act-primary:hover, .btn-comment-submit:hover { background: var(--key-gold); color: var(--outline); filter: brightness(1.08); transform: none; }
  .act-btn { border-radius: 6px; transition: filter .15s, transform .08s; }
  .act-btn:active { transform: translateY(2px); }
  .act-ghost, .act-fork, .game-react-btn, .lb-refresh { background: var(--key-dark); color: var(--text); border: 0; border-bottom: 4px solid #0B0703; box-shadow: inset 0 1px 0 rgba(242,231,201,.12); border-radius: 6px; }
  .act-fork { color: var(--gold); }
  .act-ghost:hover, .act-fork:hover, .game-react-btn:hover, .lb-refresh:hover { background: var(--key-dark); color: var(--gold-light); filter: brightness(1.15); border-color: #0B0703; }
  .game-react-btn.active-like, .game-react-btn.active-dislike { background: var(--border-strong); color: var(--gold); border-color: #0B0703; }
  .rate-pct { font-family: var(--font-mono); color: var(--gold); }
  .stat-val { font-family: var(--font-mono); color: var(--gold); }
  .comment-count-badge { font: 500 12px var(--font-mono); background: var(--chip); color: var(--gold-mid); border-radius: 999px; border: 0; }
  .emoji-big { border-radius: 12px; }

  @media (pointer: coarse) {
    .slot-btn { min-height: 40px; padding-left: 12px; padding-right: 12px; }
    .slug-copy, .rec-link { display: inline-block; padding: 10px 0; }
  }
  .pd-note { font-size: 12.5px; color: var(--text-3); margin-top: 8px; }
  .pd-note a { color: var(--gold); }

  /* ── Шапка для поисковика (21.10): h1, описание, раздел и теги ── */
  .gi-seo { padding: 4px 2px 0; }
  .gi-seo h1 { margin: 0 0 8px; font: var(--fw-display, 900) 28px/1.2 var(--font-display); color: var(--text); letter-spacing: var(--ls-display, .02em); }
  .gi-seo .gi-about { margin: 0 0 10px; color: var(--text-2); font-size: 16px; line-height: 1.45; }
  .gi-seo .gi-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .gi-seo .gi-tags span { color: var(--text-3); }
  .gi-seo .gi-tags a { color: var(--text-2); text-decoration: none; padding: 3px 9px; border-radius: 5px; background: var(--chip); border: 1px solid var(--border); }
  .gi-seo .gi-tags a:hover { color: var(--gold-light); border-color: var(--gold-mid); }
  @media (max-width: 760px) { .gi-seo h1 { font-size: 22px; } }