/* "Мой проект" — project page (one game, live preview + actions) */
  .project-page {
    display: flex; flex-direction: column; gap: 16px;
  }
  .project-page .title-line {
    font-size: 18px; font-weight: 700; color: var(--text);
    padding: 0 4px;
    display: flex; align-items: center; gap: 10px;
  }
  .project-page .title-line .title-text { flex: 0 1 auto; }
  .project-page .share-link-btn {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(110,150,135,0.35);
    background: rgba(40, 60, 52, 0.5);
    color: #b8d3c5;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    flex-shrink: 0;
    padding: 0;
  }
  .project-page .share-link-btn:hover {
    background: rgba(60, 90, 78, 0.85);
    color: #f1f7f3;
  }
  .project-page .share-link-btn:active { transform: translateY(1px); }
  .project-page .share-link-btn svg { width: 15px; height: 15px; }

  /* «Открыть как админ» — узкая кнопка рядом с заголовком, виден только
     админу когда он НЕ владелец и НЕ уже в admin-edit режиме. */
  .project-page .admin-edit-open-btn {
    padding: 4px 10px;
    font-size: 11px;
    background: linear-gradient(180deg, rgba(180, 140, 70, 0.22), rgba(60, 45, 18, 0.5));
    border-color: rgba(180, 140, 70, 0.5);
    color: #e6cf9b;
  }
  .project-page .admin-edit-open-btn:hover {
    background: linear-gradient(180deg, rgba(180, 140, 70, 0.4), rgba(90, 70, 30, 0.7));
  }

  /* Баннер admin-edit режима — над live-frame, золотистая обводка. */
  .project-page .admin-edit-banner {
    padding: 10px 14px;
    background: rgba(90, 70, 30, 0.25);
    border: 1px solid rgba(180, 140, 70, 0.55);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    font-size: 13px;
    color: #e6cf9b;
  }
  .project-page .admin-edit-exit-btn {
    padding: 4px 10px;
    font-size: 11px;
  }
  .project-page .live-frame {
    aspect-ratio: 16/9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
    position: relative;
  }
  /* Pool slots are bg-transparent: the pooled iframe sits BEHIND #root in
     the body stacking order and shows through. Keeping border + shadow so
     the framed look is identical. */
  .project-page .live-frame[data-pool-slot] {
    background: transparent;
  }
  .project-page .live-frame iframe {
    position: absolute;
    top: 0; left: 0;
    border: 0; display: block;
    transform-origin: 0 0;
  }
  .chart-tall {
    height: 120px;
    padding: 12px;
    display: flex; align-items: flex-end; gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
  }
  .chart-tall .bar {
    flex: 1;
    background: linear-gradient(180deg, #348370 0%, #1c503b 100%);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  }
  .project-page .action-row {
    display: flex; gap: 10px;
  }

  /* Compact publication-status strip: status chip + submit/publish actions.
     Sits between the chart and the file-edit block. */
  .project-page .publication-strip {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .publication-strip .pub-info {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .publication-strip .pub-label {
    font-size: 12px; color: var(--muted);
  }
  .publication-strip .pub-actions {
    display: flex; gap: 8px;
  }

  /* Owner-only block: edit/update game files. Mirrors game-new layout
     (big paste button + drop-zone), lives below the project preview in the
     LEFT (.project-page) column. */
  .project-page .game-edit-block {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 12px;
  }

  /* Each edit-section is its own visual card so blocks read separately. */
  .project-page .edit-section {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 12px;
  }
  .project-page .edit-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .project-page .game-edit-title {
    font-size: 14px; font-weight: 600;
    color: var(--text);
  }
  .project-page .edit-help-btn {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(110,150,135,0.35);
    background: rgba(40, 60, 52, 0.5);
    color: #b8d3c5;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    flex-shrink: 0;
  }
  .project-page .edit-help-btn:hover {
    background: rgba(60, 90, 78, 0.85);
    color: #f1f7f3;
  }
  .project-page .edit-help-btn.active {
    background: rgba(80, 120, 100, 0.95);
    color: #fff;
  }
  .project-page .edit-help-btn:active { transform: translateY(1px); }
  .project-page .edit-help-btn svg { width: 14px; height: 14px; }
  .project-page .edit-section-help {
    padding: 10px 12px;
    background: rgba(20, 40, 32, 0.45);
    border: 1px solid rgba(70, 100, 88, 0.4);
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
  }
  .project-page .edit-section-help p {
    margin: 0;
  }
  .project-page .edit-section-help p + p {
    margin-top: 8px;
  }
  .project-page .edit-section-help code {
    padding: 1px 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    font-size: 11px;
    color: #d6e8df;
  }
  .project-page .edit-section-help b {
    color: var(--text);
  }
  .project-page .edit-section-help[hidden] { display: none; }

  /* Owner-delete section — red accent to match destructive intent. */
  .project-page .edit-section.danger-section {
    border-color: rgba(140, 60, 50, 0.35);
  }
  .project-page .edit-section.danger-section .game-edit-title {
    color: #f0bdac;
  }

  /* Admin actions panel — outside owner block, sits below .game-edit-block.
     Hidden by default; .admin-reveal layer fades it in while Ctrl is held. */
  .admin-actions-panel {
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid rgba(140, 110, 60, 0.35);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 10px;
  }
  .admin-actions-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .admin-actions-head .game-edit-title {
    color: #e6cf9b;
  }
  .admin-actions-head code {
    padding: 1px 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    font-size: 11px;
    color: #d6e8df;
  }
  .admin-actions-row {
    display: flex; gap: 8px; flex-wrap: wrap;
  }

  /* Reveal layer for admin-only controls (mirrors .danger-reveal). */
  .admin-reveal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  body.ctrl-on .admin-reveal {
    opacity: 1;
    pointer-events: auto;
  }
  .project-page .update-paste-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    outline: none;
    border-radius: var(--r-lg);
  }

  /* Rename row — input + save button on one line. */
  .project-page .rename-row {
    display: flex; gap: 10px; align-items: center;
  }
  .project-page .rename-input {
    flex: 1; min-width: 0;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2, #1a1714);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    outline: none;
    transition: border-color 0.12s ease;
  }
  .project-page .rename-input:focus {
    border-color: rgba(110,150,135,0.6);
  }

  /* Cover edit row — dropzone (800:470) on top, capture + delete buttons. */
  .project-page .cover-edit-row {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .project-page .cover-capture-btn {
    background: linear-gradient(180deg, rgba(95,168,211,0.18), rgba(20,42,60,0.55));
    border-color: rgba(95,168,211,0.5);
    color: #b6dbef;
  }
  .project-page .cover-capture-btn:hover {
    background: linear-gradient(180deg, rgba(95,168,211,0.32), rgba(30,60,82,0.7));
    border-color: rgba(95,168,211,0.85);
  }
  /* Capture-mode: убирает Play-overlay и snap-кнопку из кадра пока
     getDisplayMedia захватывает frame. !important чтобы перебить :hover-rule. */
  .project-page .live-frame.capturing .play-fs-big,
  .project-page .live-frame.capturing .live-snap-btn {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Snap-кнопка над Play (только у владельца игры). ВСЕГДА видна (не на hover).
     Сидит в правом верхнем углу live-frame. */
  .project-page .live-frame .live-snap-btn {
    position: absolute;
    top: 12px; right: 12px;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(95,168,211,0.55);
    background: linear-gradient(180deg, rgba(95,168,211,0.32), rgba(20,42,60,0.72));
    color: #b6dbef;
    font-size: 20px;
    line-height: 1;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0.92;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
    backdrop-filter: blur(6px);
    z-index: 5;
  }
  .project-page .live-frame .live-snap-btn:hover {
    background: linear-gradient(180deg, rgba(95,168,211,0.55), rgba(30,60,82,0.88));
    border-color: rgba(95,168,211,0.95);
    opacity: 1;
  }
  .project-page .live-frame .live-snap-btn:active { transform: translateY(1px); }
  /* Fav-button — круглая, top-left угол .live-frame, напротив .live-snap-btn.
     Видна всем (не только owner). filled-heart state — мягкий розово-красный
     tint, чтоб не конкурировать с яркостью play-кнопки. capturing-state hides
     её same way as snap/play (mass-hidden when cover capture в процессе). */
  .project-page .live-frame.capturing .live-fav-btn {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .project-page .live-frame .live-fav-btn {
    position: absolute;
    top: 12px; left: 12px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(95,168,211,0.55);
    background: linear-gradient(180deg, rgba(95,168,211,0.32), rgba(20,42,60,0.72));
    color: #b6dbef;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0.92;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease, color 0.12s ease;
    backdrop-filter: blur(6px);
    z-index: 5;
  }
  .project-page .live-frame .live-fav-btn:hover {
    background: linear-gradient(180deg, rgba(95,168,211,0.55), rgba(30,60,82,0.88));
    border-color: rgba(95,168,211,0.95);
    opacity: 1;
    transform: scale(1.06);
  }
  .project-page .live-frame .live-fav-btn:active { transform: translateY(1px) scale(1.0); }
  .project-page .live-frame .live-fav-btn[data-favorited="1"] {
    color: #ff5b6e;
    border-color: rgba(255,91,110,0.7);
    background: linear-gradient(180deg, rgba(255,91,110,0.22), rgba(60,20,28,0.72));
  }
  .project-page .live-frame .live-fav-btn[data-favorited="1"]:hover {
    background: linear-gradient(180deg, rgba(255,91,110,0.42), rgba(70,28,38,0.88));
    border-color: rgba(255,91,110,0.95);
  }
  .project-page .live-frame .live-fav-btn svg { width: 20px; height: 20px; }
  .project-page .cover-hint {
    margin-left: 8px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
  }
  .project-page .cover-dropzone {
    width: min(320px, 100%);
    aspect-ratio: 800 / 470;
    position: relative;
    border-radius: var(--r-md);
    border: 2px dashed rgba(70,100,88,0.55);
    background: rgba(20,40,32,0.25);
    color: #93ada0;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    user-select: none;
  }
  .project-page .cover-dropzone:hover,
  .project-page .cover-dropzone:focus-visible {
    border-color: rgba(120,190,160,0.8);
    color: #e6f2ec;
  }
  .project-page .cover-dropzone.drag {
    background: rgba(40,90,75,0.22);
    border-color: rgba(120,190,160,0.9);
    color: #e6f2ec;
  }
  .project-page .cover-dropzone.has-cover {
    border-style: solid;
    border-color: var(--border-2);
    background: #000;
  }
  .project-page .cover-dropzone .cover-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .project-page .cover-dropzone .cover-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 12px;
    transition: opacity 0.15s ease, background 0.15s ease;
  }
  .project-page .cover-dropzone.has-cover .cover-placeholder {
    opacity: 0;
    background: rgba(0,0,0,0.55);
    color: #f1f7f3;
  }
  .project-page .cover-dropzone.has-cover:hover .cover-placeholder,
  .project-page .cover-dropzone.has-cover:focus-visible .cover-placeholder,
  .project-page .cover-dropzone.has-cover.drag .cover-placeholder {
    opacity: 1;
  }
  .project-page .cover-dropzone .cover-placeholder svg {
    width: 36px; height: 36px;
  }
  .project-page .cover-placeholder-lbl {
    font-size: 12px; line-height: 1.3;
  }

  /* Ad schedule block — list of fixed-point rows, add-button, cycle toggle. */
  .project-page .ad-schedule-block {
    display: flex; flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .project-page .ad-points-list {
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .project-page .ad-point-row {
    display: flex; align-items: center; gap: 8px;
  }
  .project-page .ad-num-input {
    width: 90px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text);
    background: var(--surface-2, #1a1714);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    outline: none;
    transition: border-color 0.12s ease;
    -moz-appearance: textfield;
  }
  .project-page .ad-num-input:focus {
    border-color: rgba(110,150,135,0.6);
  }
  .project-page .ad-num-input::-webkit-outer-spin-button,
  .project-page .ad-num-input::-webkit-inner-spin-button {
    opacity: 0.6;
  }
  .project-page .ad-point-remove {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(140,60,50,0.45);
    background: rgba(20, 8, 6, 0.5);
    color: #f0bdac;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
  }
  .project-page .ad-point-remove:hover {
    background: rgba(70, 25, 18, 0.95);
    color: #ffd4c4;
  }
  .project-page .ad-point-remove:active { transform: translateY(1px); }
  .project-page .ad-point-remove svg { width: 12px; height: 12px; }

  .project-page .ad-add-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(60,130,110,0.55);
    background: rgba(20, 50, 38, 0.78);
    color: #d6e8df;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
  }
  .project-page .ad-add-btn:hover {
    background: rgba(40, 90, 70, 0.95);
    color: #f1f7f3;
  }
  .project-page .ad-add-btn:active { transform: translateY(1px); }
  .project-page .ad-add-btn svg { width: 16px; height: 16px; }

  .project-page .ad-cycle-row {
    display: flex; align-items: center;
    gap: 8px;
    padding-top: 4px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
  }
  .project-page .ad-cycle-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #348370;
    cursor: pointer;
  }
  .project-page .ad-cycle-row .ad-num-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .project-page .ad-save-btn {
    margin-top: 4px;
  }

  /* Platforms & orientation block — reuses .ad-cycle-row for toggle/radio rows. */
  .project-page .platform-block {
    display: flex; flex-direction: column; gap: 8px;
  }
  .project-page .platform-orient-group {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--border-2);
    margin-top: 2px;
  }
  .project-page .platform-orient-row,
  .project-page .platform-toggle-row {
    padding-top: 0;
  }
  .project-page .platform-block input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: #348370;
    cursor: pointer;
  }
  .project-page .platform-save-btn {
    margin-top: 6px;
    align-self: flex-start;
  }

  /* Big round play-fullscreen button anchored inside the live game frame.
     Mirrors .my-tile .frame .play-fs but scaled up for the detail-page frame. */
  .project-page .live-frame .play-fs-big {
    position: absolute;
    right: 18px; bottom: 18px;
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(60,130,110,0.55);
    background: rgba(20, 50, 38, 0.78);
    color: #d6e8df;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .project-page .live-frame:hover .play-fs-big { opacity: 1; }
  .project-page .live-frame .play-fs-big:hover {
    background: rgba(40, 90, 70, 0.95);
    color: #f1f7f3;
  }
  .project-page .live-frame .play-fs-big:active { transform: translateY(1px); }
  .project-page .live-frame .play-fs-big svg { width: 28px; height: 28px; }

  /* Engage block (rating + comments) — lives INSIDE the .project-page left
     column, directly below .publication-strip. For owner: collapsed by
     default; toggle button lives in .pub-actions next to «Опубликовать» /
     «Отправить на модерацию». For foreign viewers: panel auto-expanded,
     no toggle button (no .pub-actions on .publication-strip-public). */
  .project-page .game-engage {
    margin: 0 0 8px 0;
  }
  .project-page .game-engage[data-collapsed="1"] .engage-panel { display: none; }
  .project-page .game-engage .engage-panel {
    max-height: 600px;
    overflow-y: auto;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
  }
  .project-page .game-engage .engage-rate {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-2);
  }
  /* Toggle button lives in .pub-actions — sibling of .game-engage. Caret
     rotation is driven from JS (transform on the span) because there's no
     descendant relationship for a pure CSS selector to follow. */
  .engage-toggle-caret {
    display: inline-block;
    transition: transform .15s ease;
  }
  /* Foreign-viewer status strip — no actions row, slimmer padding. */
  .project-page .publication-strip.publication-strip-public {
    padding-bottom: 8px;
  }

  /* Leaderboard section (Multiplayer Phase 4-5) — sits between the category
     ratings and the engage (rating/comments) panel. Mirrors the .engage-panel
     surface/border treatment so it reads as a sibling game-page card. Hidden
     until the board returns rows (host carries [hidden] by default). */
  .project-page .game-leaderboard {
    margin: 0 0 8px 0;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
  }
  .project-page .game-leaderboard[hidden] { display: none; }
  .project-page .game-leaderboard .lb-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  .project-page .game-leaderboard .lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .project-page .game-leaderboard .lb-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: var(--r-sm, 6px);
    font-size: 14px;
  }
  .project-page .game-leaderboard .lb-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025);
  }
  .project-page .game-leaderboard .lb-row-me {
    background: rgba(74, 157, 126, 0.18);
    outline: 1px solid rgba(74, 157, 126, 0.5);
  }
  .project-page .game-leaderboard .lb-rank {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim, #9bb1a8);
  }
  .project-page .game-leaderboard .lb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .project-page .game-leaderboard .lb-you {
    font-family: inherit;
    font-size: 11px;
    color: #9ae6b4;
    margin-left: 4px;
  }
  .project-page .game-leaderboard .lb-score {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .project-page .game-leaderboard .lb-empty {
    font-size: 13px;
    padding: 4px 0;
  }
  .project-page .game-leaderboard .lb-mine {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
  }
  .project-page .game-leaderboard .lb-mine-label { color: var(--text-dim, #9bb1a8); }
  .project-page .game-leaderboard .lb-mine-vals b { color: #9ae6b4; }

  /* «Редактировать через ИИ» — кнопка под графом для engine_authored проектов.
     Visible только для owner. Style — primary, чуть крупнее обычной btn чтобы
     был заметен как entry-point в редактор. */
  .project-page .engine-edit-btn {
    padding: 12px 22px;
    font-size: 14px;
    margin-top: 4px;
  }

  /* Engine-editor overlay сидит ВНУТРИ <main id="main"> (см. JS:
     openEngineEditor → mainHost.appendChild). position:absolute привязан к
     #main, поэтому sidebar слева остаётся видимым и кликабельным. #main
     получает position:relative ниже (правило #main { position: relative }
     рядом). iframe заполняет всё пространство, кнопка ✕ Закрыть в правом
     верхнем углу overlay. Esc тоже закрывает (handler в JS).
     z-index держим высокий чтобы перекрыть остальные элементы внутри #main
     (live-frame, publication-strip, edit-block, и т.п.). */
  /* Overlay живёт прямо на body (position:fixed) и обходит #main padding/scroll.
     left = текущая ширина sidebar через --side-w (set на <html> в render.js:
     210px развёрнутый / 156px свёрнутый) — тот же источник, что и .app grid.
     Раньше было захардкожено 156px → наезжало на меню в развёрнутом режиме.
     На responsive breakpoint'ах sidebar скрывается → media-query ниже (left:0). */
  .engine-editor-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Start after BOTH the sidebar and the global AI dock (--ai-w is 0 when the
       dock is closed) so the assistant stays visible alongside the editor — it
       IS the editor's assistant now (chat=parent). */
    left: calc(var(--side-w, 210px) + var(--ai-w, 0px));
    z-index: 9999;
    background: #14110f;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  @media (max-width: 720px) {
    /* Здесь sidebar обычно сворачивается / превращается в top-bar — overlay в full-width */
    .engine-editor-overlay { left: 0; }
  }
  .engine-editor-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  /* Overlay-кнопки «Свернуть» / «Закрыть» — квадратные icon-кнопки в правом
     верхнем углу overlay area (position:absolute внутри overlay'я). Полный look
     задаётся здесь (overlay живёт на body, .btn/.icon-btn из платформы не всегда
     совпадают по контексту) — компактный квадрат 32x32 с SVG-иконкой по центру. */
  .engine-editor-minimize,
  .engine-editor-restart,
  .engine-editor-close,
  .engine-editor-assistant,
  .engine-editor-pause,
  .engine-editor-prestart,
  .engine-editor-undo,
  .engine-editor-redo {
    position: absolute;
    top: 12px;
    z-index: 10001;
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(40,60,52,0.6);
    background: linear-gradient(180deg, #28604d 0%, #143b2c 100%);
    color: #d6e8df;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
  }
  .engine-editor-minimize:hover,
  .engine-editor-restart:hover,
  .engine-editor-close:hover,
  .engine-editor-assistant:hover,
  .engine-editor-pause:hover,
  .engine-editor-prestart:hover,
  .engine-editor-undo:hover,
  .engine-editor-redo:hover {
    background: linear-gradient(180deg, #2f7058 0%, #194534 100%);
    color: #f1f7f3;
  }
  .engine-editor-minimize:active,
  .engine-editor-restart:active,
  .engine-editor-close:active,
  .engine-editor-assistant:active,
  .engine-editor-pause:active,
  .engine-editor-prestart:active,
  .engine-editor-undo:active,
  .engine-editor-redo:active { transform: translateY(1px); }
  .engine-editor-minimize svg,
  .engine-editor-restart svg,
  .engine-editor-close svg,
  .engine-editor-assistant svg,
  .engine-editor-pause svg,
  .engine-editor-prestart svg,
  .engine-editor-undo svg,
  .engine-editor-redo svg { width: 18px; height: 18px; display: block; }
  /* «Помощник» — в ЛЕВОЙ группе, сразу после «перезапуск» (закрыть/свернуть/
     перезапуск/помощник). Правый верх отдан тулбару движка (пауза/undo/redo).
     Акцентная заливка — всегда-доступный ИИ-помощник (как .ai-nav-btn). */
  .engine-editor-assistant {
    left: 134px;
    right: auto;
    border-color: rgba(95, 180, 135, 0.5);
    background: linear-gradient(180deg, rgba(95,180,135,0.26), rgba(95,180,135,0.08));
    color: #bfe8d2;
  }
  .engine-editor-assistant:hover {
    border-color: rgba(95, 180, 135, 0.8);
    background: linear-gradient(180deg, rgba(95,180,135,0.34), rgba(95,180,135,0.12));
    color: #f1f7f3;
  }
  /* Закрыть — в самом углу (слева); Свернуть — правее; Перезапуск — ещё правее.
     Перенесены в ЛЕВЫЙ верхний угол overlay, чтобы не перекрывать chat-header
     движка (он в правом-верхнем углу iframe). */
  .engine-editor-close { left: 14px; }
  .engine-editor-minimize { left: 54px; }
  .engine-editor-restart { left: 94px; }
  /* Во время перезапуска иконка крутится + кнопка приглушена (disabled). */
  .engine-editor-restart:disabled { cursor: default; opacity: 0.7; }
  .engine-editor-restart.is-spinning svg { animation: engine-editor-spin 0.7s linear infinite; }
  @keyframes engine-editor-spin { to { transform: rotate(360deg); } }

  /* ПРАВАЯ группа того же верхнего ряда — контролы превью движка (зеркально
     левой). Пауза/возобновить, перезапуск превью, отменить, повторить.
     Шлют postMessage wfe:editor-cmd в iframe (см. game.js). Прижаты к правому
     краю: pause ближе всего к углу, дальше prestart/undo/redo. */
  .engine-editor-pause    { right: 14px; left: auto; }
  .engine-editor-prestart { right: 54px; left: auto; }
  .engine-editor-undo     { right: 94px; left: auto; }
  .engine-editor-redo     { right: 134px; left: auto; }
  /* Правая четвёрка (пауза/рестарт-превью/назад/вперёд) — на ВТОРОЙ ряд (под
     верхней левой группой), остаётся прижата справа. 52 = 32 (выс.) + 8 (gap) + 12 (top1). */
  .engine-editor-pause,
  .engine-editor-prestart,
  .engine-editor-undo,
  .engine-editor-redo { top: 52px; }

  /* ─── Mobile adaptivity ──────────────────────────────────────────────────── */

  /* P0: play-fs-big — на touch-устройствах hover-parent не работает.
     Гарантируем видимость через (hover:none) + z-index выше iframe. */
  @media (hover: none) {
    .project-page .live-frame .play-fs-big {
      opacity: 1;
      z-index: 6;
      pointer-events: auto;
    }
  }

  /* P1: share-link-btn / edit-help-btn — тап-таргет 44px через hit-area.
     Реальный размер не меняем чтобы не ломать раскладку. */
  @media (max-width: 640px) {
    .project-page .share-link-btn,
    .project-page .edit-help-btn {
      position: relative;
    }
    .project-page .share-link-btn::after,
    .project-page .edit-help-btn::after {
      content: "";
      position: absolute;
      inset: -9px;
    }
  }

  /* P2: ad-point-remove / ad-add-btn / edit-help-btn — 44px тап-таргет на мобиле. */
  @media (max-width: 640px) {
    .project-page .ad-point-remove,
    .project-page .ad-add-btn {
      position: relative;
    }
    .project-page .ad-point-remove::after,
    .project-page .ad-add-btn::after {
      content: "";
      position: absolute;
      inset: -9px;
    }
    /* ad-add-btn: увеличиваем до 44px напрямую — он отдельно стоит, не ломает ряд */
    .project-page .ad-add-btn {
      width: 44px;
      height: 44px;
    }
    /* ad-point-remove в ряду с input — только hit-area, размер не трогаем */
  }

  /* P2: engine-editor-overlay safe-area на мобиле (fixed, у краёв экрана).
     engine-editor-close / minimize — 44px + safe-area-inset-top. */
  @media (max-width: 640px) {
    .engine-editor-minimize,
    .engine-editor-restart,
    .engine-editor-close,
    .engine-editor-assistant,
    .engine-editor-pause,
    .engine-editor-prestart,
    .engine-editor-undo,
    .engine-editor-redo {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      top: max(12px, env(safe-area-inset-top, 0px));
    }
    /* Сдвигаем кнопки с учётом нового размера (44px + 8px gap). */
    .engine-editor-close    { left: max(14px, env(safe-area-inset-left, 0px)); }
    .engine-editor-minimize { left: max(66px, calc(env(safe-area-inset-left, 0px) + 52px)); }
    .engine-editor-restart  { left: max(118px, calc(env(safe-area-inset-left, 0px) + 104px)); }
    /* «Помощник» — в левой группе, сразу после «перезапуск» (44px + 8px gap). */
    .engine-editor-assistant { left: max(170px, calc(env(safe-area-inset-left, 0px) + 156px)); right: auto; }
    /* Правая группа — зеркально, прижата к правому краю (44px + 8px gap). */
    .engine-editor-pause    { right: max(14px, env(safe-area-inset-right, 0px)); left: auto; }
    .engine-editor-prestart { right: max(66px, calc(env(safe-area-inset-right, 0px) + 52px)); left: auto; }
    .engine-editor-undo     { right: max(118px, calc(env(safe-area-inset-right, 0px) + 104px)); left: auto; }
    .engine-editor-redo     { right: max(170px, calc(env(safe-area-inset-right, 0px) + 156px)); left: auto; }
    /* Правая четвёрка — на ВТОРОЙ ряд (под ряд 1): +52px (44 выс. + 8 gap). */
    .engine-editor-pause,
    .engine-editor-prestart,
    .engine-editor-undo,
    .engine-editor-redo { top: calc(max(12px, env(safe-area-inset-top, 0px)) + 52px); }
  }

  /* P2: cover-placeholder — показывать на touch (has-cover → opacity:0 прячет).
     На hover:none показываем overlay постоянно (пользователь не может hover). */
  @media (hover: none) {
    .project-page .cover-dropzone.has-cover .cover-placeholder {
      opacity: 1;
      background: rgba(0, 0, 0, 0.45);
    }
  }

  /* Wrap hover-эффекты share-link-btn / edit-help-btn в @media (hover:hover)
     чтобы они не залипали на touch. */
  @media (hover: hover) {
    .project-page .share-link-btn:hover {
      background: rgba(60, 90, 78, 0.85);
      color: #f1f7f3;
    }
    .project-page .edit-help-btn:hover {
      background: rgba(60, 90, 78, 0.85);
      color: #f1f7f3;
    }
    .project-page .ad-point-remove:hover {
      background: rgba(70, 25, 18, 0.95);
      color: #ffd4c4;
    }
    .project-page .ad-add-btn:hover {
      background: rgba(40, 90, 70, 0.95);
      color: #f1f7f3;
    }
    .engine-editor-minimize:hover,
    .engine-editor-restart:hover,
    .engine-editor-close:hover,
    .engine-editor-pause:hover,
    .engine-editor-prestart:hover,
    .engine-editor-undo:hover,
    .engine-editor-redo:hover {
      background: linear-gradient(180deg, #2f7058 0%, #194534 100%);
      color: #f1f7f3;
    }
  }