/* ============================================
   PC-WIDE.CSS — ПК-режим «На весь экран» (#235)
   Подключён в base.html ПОСЛЕ desktop.css.

   Класс html.pc-wide и переменную --pcz ставит ранний скрипт в <head> base.html
   (window.pcWide): только на устройстве с мышью, при окне от 1000px и если
   человек не выключил режим в профиле (localStorage pcWide=0). Узкое окно —
   прежняя колонка 480/540 из desktop.css.

   ПРИНЦИП:
   1) весь интерфейс крупнее — zoom на body, --pcz считается от окна
      (min(высота/660, ширина/1100), в пределах 1…1.6);
   2) колонка 1120 вместо 480/540, без рамки-карточки — экраны раскладываются
      по ширине: тренажёр в две колонки, сетки шире, списки — колонкой 880.

   ⚠️ Внутри zoom vh/dvh тоже умножаются на --pcz (100vh становится выше окна).
   Поэтому каждое правило страниц с vh продублировано здесь с делением на --pcz.
   Новое правило с vh на странице — добавь его сюда же, иначе в ПК-режиме
   экран уедет за край.
   ============================================ */

@media (hover: hover) and (pointer: fine) {

    html.pc-wide {
        --desktop-max-width: var(--pcw, 1120px);   /* 1120, в окне уже — по окну (base.html) */
    }

    /* === BODY: без рамки-карточки, во всю высоту окна === */
    html.pc-wide body {
        zoom: var(--pcz, 1);
        margin-top: 0;
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: calc(100vh / var(--pcz, 1));
    }
    html.pc-wide .tab-bar { border-radius: 0; }

    /* body { height:100vh } у полноэкранных страниц: игра «Картинки и слова»,
       разговорный клуб, меню тем */
    html.pc-wide body:has(#level-menu),
    html.pc-wide body:has(#lesson-screen),
    html.pc-wide body:has(#startScreen) {
        height: calc(100vh / var(--pcz, 1));
    }
    html.pc-wide #startScreen { height: calc(100vh / var(--pcz, 1)); }

    html.pc-wide .page-content,
    html.pc-wide #app .page-content {
        min-height: calc(100vh / var(--pcz, 1));
        padding-left: 32px;
        padding-right: 32px;
    }


    /* ═══════════════════════════════════════════
       ТРЕНАЖЁР (урок на главной, дорамы, курс):
       видео слева, фраза и ответ справа
       ═══════════════════════════════════════════ */

    html.pc-wide .trainer-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 32px;
        align-items: start;
        max-width: none !important;
        width: 100%;
        height: auto !important;
        min-height: calc(100dvh / var(--pcz, 1)) !important;
        /* справа 72: полоса под кнопки ! ← (fixed у края колонки) — иначе они
           заходили на колонку ответа и перекрывали «→» в «Вводе» */
        padding: 0 72px calc(var(--tab-bar-height, 64px) + var(--safe-bottom, 0px)) 24px;
    }
    html.pc-wide .trainer-page > .trainer-topbar { grid-column: 1 / -1; grid-row: 1; }
    html.pc-wide .trainer-page > #video-container {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: none !important;
        margin-top: 0;
        align-self: center !important;   /* по центру между шапкой и таббаром */
    }
    /* Фраза стоит на линии середины видео (смотришь сцену и читаешь, не поднимая
       взгляд), микрофон — под ней: отступ сверху ставит pcAlignAnswer()
       в trainer-core.js по реальным размерам. */
    html.pc-wide .trainer-page > #interaction-block,
    html.pc-wide .trainer-page > #karaoke-view {
        grid-column: 2;
        grid-row: 2;
        padding-top: 0 !important;
    }
    html.pc-wide .trainer-page > #karaoke-view { align-self: center; }   /* на уровне клипа */
    /* плотнее по вертикали, чтобы фраза в уроке помещалась на линии середины
       вместе с микрофоном в высоту клипа */
    html.pc-wide .trainer-page #study-container { margin-bottom: 0; }
    html.pc-wide .trainer-page #record-btn-wrap { min-height: 0; }
    /* Режим «Ввод»: поле ответа — в колонке ответа, низ = низ клипа (переменные
       ставит pcAlignAnswer() в trainer-core.js). Кнопки ! и ← при этом остаются
       на своём месте над таббаром у правого края, как во всех режимах (решение
       босса 29.09) — поэтому в этом режиме они fixed, а не внутри поля. */
    html.pc-wide body.input-mode #input-stack {
        left: var(--pc-col-left, 0);
        right: var(--pc-col-right, 0);
        max-width: none;
        margin: 0;
        bottom: var(--pc-band-bottom, calc(var(--tab-bar-height) + 16px));
    }
    html.pc-wide body.input-mode #input-stack .back-float {
        position: fixed;
        right: calc(50% - var(--desktop-max-width) / 2 + 16px);
        bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 16px);
    }
    html.pc-wide body.input-mode #input-stack #clip-report-float {
        bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 70px) !important;
    }

    html.pc-wide #custom-video-container { max-height: none; }
    html.pc-wide #custom-video-container video { width: 100%; height: 100%; }

    /* Фраза — главное на экране: корейский крупно. min-height = высота заполненной
       строки: пустой блок до загрузки фразы той же высоты, что и заполненный, —
       иначе при загрузке колонка ответа скачет (микрофон уезжает вниз). */
    html.pc-wide #koreanText {
        font-size: calc(34px * var(--trainer-scale, 1));
        min-height: 69px;
    }
    html.pc-wide #transcription-display { font-size: 20px; min-height: 28px; }
    html.pc-wide #translation-display { font-size: 28px; height: auto; min-height: 40px; }

    /* Колонку ответа показываем, когда pcAlignAnswer() поставил её на место
       (класс .pc-aligned), — без кадра «сначала сверху, потом прыжок». Если
       скрипт не отработал, через 1.5 с она покажется сама. */
    html.pc-wide .trainer-page > #interaction-block:not(.pc-aligned) {
        visibility: hidden;
        animation: pc-show 0s 1.5s forwards;
    }
    @keyframes pc-show { to { visibility: visible; } }

    /* Переключатели режимов — обычного размера, а не ужатые до 8px (desktop.css) */
    html.pc-wide #language-toggle-container .lang-toggle-btn {
        height: 44px !important;
        min-width: 88px;
        max-width: 130px;
    }
    html.pc-wide #language-toggle-container .lang-toggle-btn img { width: 18px; height: 18px; }
    html.pc-wide #language-toggle-container .lang-toggle-btn .lt-label {
        font-size: 10px;
        letter-spacing: 1px;
    }

    /* Попап разбора фразы — шире, высота в пределах окна */
    html.pc-wide #popup-content-wrapper {
        max-width: 680px;
        height: calc(82vh / var(--pcz, 1));
    }
    html.pc-wide #session-results-popup > div { max-height: calc(90vh / var(--pcz, 1)) !important; }
    html.pc-wide .bank-page { height: calc(100vh / var(--pcz, 1)); }
    /* Меню блоков дорамы. Обложка — полоса в 45% окна (16:9 во всю ширину занимала
       весь экран). Окно шире пропорций картинки: сама картинка целиком по высоте
       полосы (не срезая головы), по бокам — она же размытым фоном (--cover-src
       ставит theme_menu_template.html) */
    html.pc-wide .theme-menu-page .cover {
        aspect-ratio: auto;
        height: calc(45vh / var(--pcz, 1));
    }
    html.pc-wide .theme-menu-page .cover::before {
        content: '';
        position: absolute;
        inset: -40px;
        background: var(--cover-src, none) center / cover no-repeat;
        filter: blur(28px) brightness(0.4) saturate(1.2);
    }
    html.pc-wide .theme-menu-page #bg-image {
        position: relative;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    }
    /* Блоки — сеткой карточек, а не полосками во всю ширину */
    html.pc-wide .theme-menu-page #buttons-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        align-content: start;
        gap: 12px;
        padding-left: 24px;
        padding-right: 24px;
    }
    html.pc-wide .theme-menu-page .block-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }
    html.pc-wide .theme-menu-page .block-card:hover {
        background: var(--bg-card-hover);
        border-color: var(--accent-border);
    }
    html.pc-wide .theme-menu-page .block-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 10px;
    }
    /* «25 видео … 4/25» строкой, полоса прогресса — под ней во всю ширину */
    html.pc-wide .theme-menu-page .block-meta { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
    html.pc-wide .theme-menu-page .block-progress { order: 3; flex: 1 0 100%; }
    html.pc-wide .theme-menu-page .block-arrow { display: none; }   /* кликается вся карточка */


    /* ═══════════════════════════════════════════
       ГЛАВНАЯ (кнопка СТАРТ, карточки)
       ═══════════════════════════════════════════ */

    /* Как тренажёр: витрина новинок (медиа) слева, управление справа (.dash-side —
       обёртка в dashboard.html, на телефоне display:contents). Правая колонка по
       высоте = витрина: сверху алфавит/тренажёры и цели, внизу «Открыть все
       материалы», СТАРТ — посередине. Постеры — целиком, без обрезки по высоте. */
    /* одна строка «витрина | управление» по центру высоты между верхом экрана
       и таббаром (карточка входа гостя — внутри .dash-side, сверху колонки) */
    html.pc-wide #app .page-content {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        grid-template-rows: auto;
        align-content: center;
        column-gap: 32px;
        min-height: calc(100vh / var(--pcz, 1));
        padding: 16px 24px calc(var(--tab-bar-height) + var(--safe-bottom) + 20px);
    }
    html.pc-wide #app .page-content > #dash-new-wrap { grid-column: 1; grid-row: 1; align-self: start; }
    html.pc-wide #app .page-content > .dash-side {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    html.pc-wide .dash-side > .dash-start-area { flex: 1 1 auto; align-items: center; }
    html.pc-wide .dash-new-card__poster { max-height: none; }
    html.pc-wide .dash-start-btn {
        width: clamp(150px, calc(30dvh / var(--pcz, 1)), 300px);
        height: clamp(150px, calc(30dvh / var(--pcz, 1)), 300px);
    }
    html.pc-wide .dash-start-ring {
        width: clamp(158px, calc(30dvh / var(--pcz, 1) + 8px), 308px);
        height: clamp(158px, calc(30dvh / var(--pcz, 1) + 8px), 308px);
    }
    html.pc-wide .dash-start-btn__text { font-size: clamp(20px, calc(4.5dvh / var(--pcz, 1)), 40px); }
    html.pc-wide .dash-timer-display { font-size: clamp(18px, calc(3.5dvh / var(--pcz, 1)), 28px); }
    /* Кнопка берёт свободную высоту правой колонки (--start-free, dashboard.html), а она
       при окне 1000…1440 в ширину низкая — надпись считаем от размера кнопки, как на
       телефоне (36/240, 28/240, 12/240), иначе «Старт» шире круга */
    html.pc-wide .dash-start-area[style*="--start-free"] .dash-start-btn__text {
        font-size: clamp(16px, calc(min(var(--start-free) - 12px, 300px) * 0.15), 40px);
    }
    html.pc-wide .dash-start-area[style*="--start-free"] .dash-timer-display {
        font-size: clamp(14px, calc(min(var(--start-free) - 12px, 300px) * 0.117), 28px);
    }
    html.pc-wide .dash-start-area[style*="--start-free"] .dash-timer-label {
        font-size: clamp(10px, calc(min(var(--start-free) - 12px, 300px) * 0.05), 14px);
    }


    /* ═══════════════════════════════════════════
       ДОРАМЫ: 6 постеров в ряд, вкладки по центру
       ═══════════════════════════════════════════ */

    html.pc-wide .drama-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }
    html.pc-wide .mode-seg { max-width: 640px; margin: 0 auto; }
    html.pc-wide .mode-seg__btn { font-size: 12px; }
    html.pc-wide body.dramas-search-mode .page-content {
        height: calc(100dvh / var(--pcz, 1) - var(--tab-bar-height) - var(--safe-bottom) - var(--nav-bar-offset));
    }
    /* Поиск по клипам — как «Повторение»: плеер слева, фраза и выдача справа
       (в одну колонку плеер съедал высоту — из выдачи была видна одна строка).
       Кэп плеера — высота строки: окно минус шапка, вкладки, строка поиска и таббар. */
    html.pc-wide #search-view {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 32px;
        --cs-video-cap: calc(100dvh / var(--pcz, 1) - var(--pc-search-chrome, 250px));
    }
    html.pc-wide #search-view > .search-bar { grid-column: 1 / -1; }
    html.pc-wide #search-view > #video-container { grid-column: 1; grid-row: 2; align-self: start; justify-self: center; }
    html.pc-wide #search-view > #interaction-block { grid-column: 2; grid-row: 2; min-height: 0; }
    /* пока ничего не найдено, плеера нет — подсказка на всю ширину */
    html.pc-wide #search-view.search-view--empty > #interaction-block { grid-column: 1 / -1; }
    html.pc-wide #course-view { padding-top: clamp(28px, calc(20vh / var(--pcz, 1)), 200px); }


    /* ═══════════════════════════════════════════
       ИГРЫ: карточки плиткой в 2 колонки
       ═══════════════════════════════════════════ */

    html.pc-wide .games-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }


    /* ═══════════════════════════════════════════
       ПОВТОРЕНИЕ: плеер слева, список фраз справа
       ═══════════════════════════════════════════ */

    html.pc-wide .review-page {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 32px;
        padding: 24px 32px 0;
    }
    html.pc-wide .review-page > .review-player {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        margin-top: 0;
    }
    html.pc-wide .review-page > .review-list-wrap {
        grid-column: 2;
        grid-row: 1 / 3;
        min-height: 0;
        margin-top: 0;
    }


    /* ═══════════════════════════════════════════
       СПИСОЧНЫЕ ЭКРАНЫ: строки не тянем на весь
       монитор — колонка 880 по центру
       ═══════════════════════════════════════════ */

    html.pc-wide .rating-header,
    html.pc-wide .rating-tabs,
    html.pc-wide .rating-scroll,
    html.pc-wide .course-page,
    html.pc-wide .hg-screen > *,
    html.pc-wide .pv-screen:not(.pv-gameplay) > *,   /* в игре — свои размеры (круг микрофона, картинка) */
    html.pc-wide #lesson-hero,
    html.pc-wide #lesson-list,
    html.pc-wide .profile-header,
    html.pc-wide .page-content > .prof-hero,
    html.pc-wide .page-content > .prof-grid,
    html.pc-wide .page-content > .prof-goals,
    html.pc-wide .page-content > .prof-link,
    html.pc-wide .page-content > .prof-cancel,
    html.pc-wide .page-content > .prof-offer,
    html.pc-wide .page-content > .prof-channels {
        width: 100%;
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    html.pc-wide .rating-page,
    html.pc-wide .reviews-page,
    html.pc-wide .theme-menu-page,
    html.pc-wide .success-page { height: calc(100vh / var(--pcz, 1)); }
    html.pc-wide .hg-screen,
    html.pc-wide .pv-screen,
    html.pc-wide .mg-screen,
    html.pc-wide .login-page,
    html.pc-wide .premium-page,
    html.pc-wide .offer-doc-page { min-height: calc(100vh / var(--pcz, 1)); }
    html.pc-wide .offer-doc { height: calc(85dvh / var(--pcz, 1)); max-width: 880px; }   /* текст оферты — не строкой в монитор */
    html.pc-wide #app:has(#startScreen) { height: calc(100vh / var(--pcz, 1)); }


    /* Короткие экраны не липнут к верху: содержимое по центру высоты между
       верхом и таббаром (длинные, с прокруткой — дорамы, рейтинг — как были) */
    html.pc-wide .page-content:has(> .games-list),
    html.pc-wide .page-content:has(> .prof-hero) {
        display: flex;
        flex-direction: column;
        justify-content: safe center;
    }
    html.pc-wide .course-page {
        min-height: calc(100vh / var(--pcz, 1));   /* таббар уже в нижнем padding (course.css) */
        display: flex;
        flex-direction: column;
        justify-content: safe center;
    }
    html.pc-wide .hg-screen,
    html.pc-wide .pv-screen:not(.pv-gameplay) { justify-content: safe center; }


    /* ═══════════════════════════════════════════
       ОФФЕР / ПРЕМИУМ: карточка шире
       ═══════════════════════════════════════════ */

    html.pc-wide .offer-page {
        max-width: 640px;
        min-height: calc(100vh / var(--pcz, 1));
    }


    /* ═══════════════════════════════════════════
       ОКНА И ПОПАПЫ: высота в пределах окна
       ═══════════════════════════════════════════ */

    html.pc-wide .modal-content { max-height: calc(85vh / var(--pcz, 1)); }
    html.pc-wide .help-modal__box { max-height: calc(88vh / var(--pcz, 1)); }
    html.pc-wide .upd-sheet { max-width: min(360px, calc(72dvh / var(--pcz, 1) - 185px)); }
    html.pc-wide .hg-lc-box { max-height: calc(88vh / var(--pcz, 1)); }
    html.pc-wide .update-content { max-height: calc(90vh / var(--pcz, 1)); }
    html.pc-wide #platformModal .platform-box { max-height: calc(86vh / var(--pcz, 1)); }
    /* «Карточки на память»: ширина поля в % от окна (levelConfig), карты росли в пол-экрана
       и с уровня 2 верхние ряды уходили за верх поля — поле по высоте окна, ряды по центру
       только пока влезают (safe) */
    html.pc-wide #gameBoard {
        max-height: calc(75vh / var(--pcz, 1));
        max-width: calc(43vh / var(--pcz, 1));
        align-content: safe center;
    }
    /* «Память и скорость»: у поля картинки нет заданной высоты, max-height:55% не
       работает, а 50% ширины широкого поля — выше самого поля (картинку обрезало) */
    html.pc-wide .mg-image { max-height: 200px; }

    /* Пиксельный лоадер: холст размером в окно (canvas.width = innerWidth) внутри
       zoom растягивался в --pcz раз за край, пиксели ехали вразнобой — вписываем
       холст по высоте окна (ширина — по пропорции, лишнее за краем колонки не видно),
       1 пиксель холста = 1 пиксель экрана */
    html.pc-wide .pixel-loader canvas,
    html.pc-wide #loadingScreen canvas,
    html.pc-wide #loading-spinner canvas { height: 100%; width: auto; flex-shrink: 0; }
}