/* ─────────────────────────────────────────────────────────────────────────
   x³⁵⁸ — десктоп изглед на детския режим: ПОДРЕДБАТА на екраните в мрежа от карти (от 760px — като родителския изглед).
   Една отговорност: колони, максимална ширина и центриране по екрани. Черупката (лява колона, таб бар) е в desktop.css.
   Само стилово: логика, API, маршрути и игрови правила не се пипат. Мобилният (<760px) НЕ се пипа.
   Дом няма отделен скелетон: местата (бутон, „Моят напредък“) се рисуват в самия екран, затова мрежата важи и за тях.
   Скици (сега → цел):
     Дом        ┌── Моят напредък (въртележка) ──┬──── герой + реплика ────┐   1fr / 1fr, макс. 1280px
                │  основен бутон („На бой!“)      │  гардероб · храна       │   героят е на цяла височина
                └─────────────────────────────────┴─────────────────────────┘
     НВО        ┌── път + бутони + реплика ───────┬── последни тестове ─────┐   от 900px
                │  бутон за тест                  │  тренировки · сборник   │
                └─────────────────────────────────┴─────────────────────────┘
     Слава      ┌── статистика (+значки) ─────────┬──── класиране ──────────┐   от 900px; под 900 — една колона
                │  предизвикателства · тестове    │                         │
                └─────────────────────────────────┴─────────────────────────┘
     Слава/Банда, НВО: една широка колона до 1100px, центрирана (картите вътре са си като на телефон, не се разтягат).
────────────────────────────────────────────────────────────────────────── */

@media (min-width: 760px) {
  /* ── Дом ── */
  body:not(.adult) .screen-home #scrDash[data-tab=hero] { width: 100%; max-width: 1280px; margin-inline: auto; padding: 20px 24px 28px; box-sizing: border-box; }
  /* Дом: отляво вертикален карусел „Моят напредък“ на цялата височина (избледнява горе и долу), отдясно героят с репликата и най-отдолу Гардероб, Храна и основното действие */
  body:not(.adult) .screen-home #pathTrail.hl { column-gap: 28px; }
  body:not(.adult) .screen-home .hl .hcol { gap: 16px; }
  body:not(.adult) .screen-home .hl .hsay { flex: 0 0 auto; height: clamp(120px, 20vh, 190px); padding: 16px 20px; }
  body:not(.adult) .screen-home .hl .hsay > span { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
  body:not(.adult) .screen-home .hl .hbtns .btn, body:not(.adult) .screen-home .hl .hbtns .homecta { height: 68px; }
  body:not(.adult) .screen-home #myProg .mp-tile { padding: 20px 22px; border-radius: 22px; }
  body:not(.adult) .screen-home #myProg .mp-tile b { font-size: 1.25rem; }
  body:not(.adult) .screen-home #myProg .mp-head b { font-size: 1.2rem; }

  /* ── Слава / Банда / НВО: четим стълб, центриран ── */
  body:not(.adult) #screen-root > .screen-glory,
  body:not(.adult) #screen-root > .screen-band,
  body:not(.adult) #screen-root > .screen-bandhub,
  body:not(.adult) #screen-root > .screen-goals,
  body:not(.adult) #screen-root > .screen-nvh { max-width: 1100px; margin-inline: auto; width: 100%; box-sizing: border-box; }

  /* ── Слава: две колони (като Таблото на родителя) ──
     отляво статистиката („Точност / Отговори“ + значки), под нея предизвикателствата и последните тестове; отдясно — класирането.
     Обвивките (#gp-rank, .screen-band, #scrDash) стават „прозрачни“ (display: contents), та картите им са преки елементи на мрежата. */
  body:not(.adult) #screen-root > .screen-glorytab { max-width: 1280px; padding: 20px 24px 28px; }
  body:not(.adult) .screen-glorytab #gp-rank, body:not(.adult) .screen-glorytab #gp-rank > .screen-band,
  body:not(.adult) .screen-glorytab #gp-rank #scrDash { display: contents; }
}
@media (min-width: 900px) {
  body:not(.adult) #screen-root > .screen-glorytab {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: 24px; align-items: start;
  }
  body:not(.adult) .screen-glorytab #gHero, body:not(.adult) .screen-glorytab .gl-hero, body:not(.adult) .screen-glorytab > .skel { grid-column: 1; grid-row: 1; min-width: 0; }
  /* отляво: статистика и под нея тестовете; отдясно: класиране по групи и под него „Предизвикателства / Турнири“ */
  body:not(.adult) .screen-glorytab #gTests { grid-column: 1; grid-row: 2 / span 2; min-width: 0; margin: 4px 0 14px; }
  body:not(.adult) .screen-glorytab #bandLbs { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  body:not(.adult) .screen-glorytab .bandentry { grid-column: 2; grid-row: 3; min-width: 0; margin: 0 0 14px; }
  body:not(.adult) .screen-glorytab #bandLbs > :first-child { margin-top: 4px; }
}
@media (min-width: 760px) {
  /* ── Слава: купата и кръгчетата са по средата на свободното място в клетката (не залепени вдясно) ── */
  body:not(.adult) .screen-glorytab .gl-hero .hr-c { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  body:not(.adult) .screen-glorytab .gl-hero .hr-g { justify-self: center; }
  /* ── Пътека: една колона на цялата ширина — фонът (небе, силуети, дървета) се мащабира по ширината на картата, пътеката е в средата.
     Старото двуколонно правило за #pathTrail (proto.css) слагаше картата във втората колона, а бутона за темите — в първата (под нея, скрит). ── */
  body:not(.adult) #screen-root .screen-goals #pathTrail { display: block; }
  body:not(.adult) #screen-root .screen-goals #pathTrail .trailcard { grid-column: auto; grid-row: auto; }
  /* фонът на пътеката избледнява плавно в двата края (преливане към цвета на страницата); възлите и пътеката не се пипат */
  body:not(.adult) #screen-root .screen-goals .trbg {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  }
}
@media (min-width: 900px) {
  /* ── Редакция на героя (аватар): като Гардероб/Храна — отляво героят (име + сцена), отдясно менюто за редакция (вид, табове, панел) ── */
  body:not(.adult) .creator:not(.hstatus) {
    width: min(1080px, calc(100vw - 32px)); height: min(820px, 92vh);
    display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 0;
  }
  body:not(.adult) .creator:not(.hstatus) > .chead { grid-column: 1 / -1; grid-row: 1; }
  /* „Запази“ в заглавието (десктоп): видим винаги, активен само при промяна; кръглият бутон е за телефон */
  body:not(.adult) .creator:not(.hstatus) > .chead .lsave { display: inline-flex; margin-left: auto; margin-right: 10px; }
  body:not(.adult) .creator:not(.hstatus) > .lfab { display: none; }
  body:not(.adult) .creator:not(.hstatus) > .cstage { padding: 22px 10px 12px; align-items: center; }
  body:not(.adult) .creator:not(.hstatus) > .cstage .hero { height: 100%; max-height: 100%; }
  body:not(.adult) .creator:not(.hstatus) > .hname { grid-column: 1; grid-row: 2; align-self: start; }
  body:not(.adult) .creator:not(.hstatus) > .cstage { grid-column: 1; grid-row: 3 / 5; min-height: 0; margin: 0 12px 12px; border-radius: 14px; }
  body:not(.adult) .creator:not(.hstatus) > .ctypes { grid-column: 2; grid-row: 2; padding-top: 12px; }
  body:not(.adult) .creator:not(.hstatus) > .ctabs { grid-column: 2; grid-row: 3; }
  body:not(.adult) .creator:not(.hstatus) > .cpanel { grid-column: 2; grid-row: 4; height: auto; min-height: 0; }
  /* скелетон на диалога (още без сцена/табове): мястото на сцената отляво и панелът отдясно — без скачане при зареждане */
  body:not(.adult) .creator:not(.hstatus):not(:has(.cstage))::before { content: ""; grid-column: 1; grid-row: 3 / 5; margin: 0 12px 12px; border-radius: 14px; background: var(--pen-soft); }
  body:not(.adult) .creator:not(.hstatus):not(:has(.cstage)) > .cpanel { grid-row: 2 / 5; }
}
@media (min-width: 900px) {
  /* ── НВО: отляво пътят към НВО (с двата бутона), репликата и бутонът за тест под тях; отдясно последни тестове, тренировки, сборник ── */
  body:not(.adult) #screen-root > .screen-nvh { max-width: 1280px; }
  body:not(.adult) .screen-nvh .nvh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 20px 24px 28px; }
  /* графиката „Път до НВО“: на цялата ширина на картата (viewBox-ът е широк от 760px — виж nvo-path.js) */
  body:not(.adult) .screen-nvh .npa-chart { max-width: none; }
  body:not(.adult) .screen-nvh .nvh-l, body:not(.adult) .screen-nvh .nvh-r { display: grid; gap: 14px; min-width: 0; align-content: start; }
}
@media (min-width: 760px) {
  /* ── НВО тест (цял екран): без лентата с логото отгоре (съдържанието започва от горе, не „увиснало“ долу), без собствен фон — взема фона отзад;
     малко по-широко — въпросите са до 15 на ред. Лентата с часовника е залепена горе, затова е в цвета на фона (не бяла). ── */
  html:not(.adult-pre) body.nvt-on:not(.adult) #sidebrand { display: none; }
  html:not(.adult-pre) body.nvt-on:not(.adult) #app:has(#tabbar[hidden]) #screen-root { grid-row: 1 / -1; }
  body:not(.adult) .screen-nvt { padding-top: 16px; }
  body:not(.adult) .screen-nvt .nvt-wrap { max-width: 860px; box-sizing: border-box; padding: 0 20px; }
  body:not(.adult) .screen-nvt .nvt-bar { background: var(--paper); }
  html:not([data-theme="dark"]) body:not(.adult) .screen-nvt .nvt-bar { background: #f5f8fd; }   /* цветът на страницата (shell.css) */
  /* ── Диалози: не са широки като екрана — ограничени и центрирани ── */
  body:not(.adult) .hpop-card:not(.anv-full) { max-width: min(560px, 100%); }
  /* Учебна програма (теми за отбелязване): по-широк диалог — имената на темите не се пренасят на много редове */
  body:not(.adult) #curdlg .hpop-card { width: min(760px, calc(100vw - 32px)); max-width: 760px; }
  body:not(.adult) .collov.sheet .collbox { max-width: 640px; margin-inline: auto; }
}

@media (min-width: 1024px) {
  /* НВО / Още: горната лента е скрита, но редът ѝ държеше излишно място над съдържанието — екранът започва от горе (както НВО тестът) */
  html:not(.adult-pre) body.nvh-on:not(.adult) #screen-root { grid-row: 1 / -1; }
}

@media (min-width: 760px) {
  /* Битка / упражнение: не на цял екран, а диалог по средата със затъмнен фон — не е излишно голям */
  body:not(.adult) #scrQuiz:not([hidden]) {
    inset: 0; margin: auto !important; width: min(920px, calc(100vw - 48px)); height: min(620px, calc(100vh - 48px)); height: min(620px, calc(100dvh - 48px));
    border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 100vmax rgba(10, 20, 40, .5), 0 16px 48px rgba(0, 0, 0, .35); border: 1.5px solid var(--line);
    --sh: clamp(220px, 42vh, 380px);
  }
}