/* layout.css — управление прицелом и раскладка под любые пропорции экрана (портрет, альбом, планшет, ПК, ультраширокий).
   Подключается после основных стилей index.html и перекрывает их. Ориентацию задаёт @media (orientation), как и JS (H >= W — портрет). */

:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
html, body { overscroll-behavior: none; }

/* ---------- прицел: кнопка огня и зум ---------- */
#scope-ctl { position: absolute; z-index: 12; display: flex; pointer-events: none; }
#scope-zoomgroup { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 30px; background: rgba(10,14,18,.66); border: 2px solid rgba(255,255,255,.2); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
#scope-zoomgroup button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: linear-gradient(#3a4856, #28323d); color: #fff; font: 900 28px/1 'Nunito', sans-serif; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; cursor: pointer; box-shadow: 0 3px 0 #0c1015; touch-action: manipulation; }
#scope-zoomgroup button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c1015; }
#scope-zoomgroup button[disabled] { opacity: .35; pointer-events: none; }
#scope-zlabel { min-width: 52px; text-align: center; font: 900 16px 'Nunito', sans-serif; color: #e8eef4; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
#scope-fire { pointer-events: auto; width: var(--fire-d, 96px); height: var(--fire-d, 96px); border-radius: 50%; border: 4px solid #2a0f10; padding: 0; cursor: pointer; flex: none;
    background: radial-gradient(circle at 34% 28%, #ff9a8a 0%, #ec4d44 48%, #b42f29 100%); color: #fff; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 7px 0 #5c1613, 0 0 0 3px rgba(255,255,255,.22), 0 10px 22px rgba(0,0,0,.5);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .06s, opacity .15s, filter .15s; }
#scope-fire svg { width: 46%; height: 46%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
#scope-fire .fire-txt { font: 900 clamp(11px, calc(var(--fire-d, 96px) * .15), 16px)/1 'Nunito', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#scope-fire.pressed, #scope-fire:active { transform: translateY(5px); box-shadow: 0 2px 0 #5c1613, 0 0 0 3px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.5); filter: brightness(1.12); }
#scope-fire.off { opacity: .42; filter: grayscale(.6); }
body.in-scope #btn-pause { top: calc(var(--safe-t) + 14px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
body.in-scope #scope-hint { bottom: calc(var(--safe-b) + 150px); }

/* красный всплеск по краям экрана: враг стреляет */
#danger { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 9; background: radial-gradient(ellipse at center, rgba(234,74,79,0) 45%, rgba(234,74,79,.55) 100%); }
#danger.go { animation: danger .5s ease-out; }
@keyframes danger { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- портрет ---------- */
@media (orientation: portrait) {
    #scope-ctl { left: calc(var(--safe-l) + 16px); right: calc(var(--safe-r) + 16px); bottom: calc(var(--safe-b) + 22px); justify-content: space-between; align-items: flex-end; flex-direction: row; }
    #scope-zoomgroup { flex-direction: row-reverse; }
}

/* ---------- альбом: всё переезжает по бокам круга прицела ---------- */
@media (orientation: landscape) {
    :root { --pad-x: max(24px, 5vw); }

    /* прицел: патроны слева от круга, зум и огонь — справа колонкой */
    #scope-ammo { left: calc(var(--sc-cx) - var(--sc-d) / 2 - 22px); top: var(--sc-cy); transform: translate(-100%, -50%); }
    #scope-ammo svg { height: clamp(40px, 11vh, 62px); width: clamp(18px, 5vh, 28px); }
    #scope-count { font-size: clamp(34px, 9vh, 56px); }
    #scope-ctl { right: calc(var(--safe-r) + max(18px, 3vw)); bottom: calc(var(--safe-b) + 14px); flex-direction: column; align-items: center; gap: 14px; }
    #scope-zoomgroup { flex-direction: column-reverse; padding: 6px; border-radius: 28px; gap: 4px; }
    #scope-zoomgroup button { width: 42px; height: 42px; font-size: 26px; }
    #scope-zlabel { min-width: 42px; font-size: 14px; }
    body.in-scope #btn-pause { left: calc(var(--safe-l) + max(18px, 3vw)); top: calc(var(--safe-t) + 12px); transform: none; }
    body.in-scope #timer { left: auto; right: calc(var(--safe-r) + max(18px, 3vw)); top: calc(var(--safe-t) + 10px); transform: none; width: 58px; text-align: center; }
    body.in-scope #misses { left: auto; right: calc(var(--safe-r) + max(18px, 3vw)); top: calc(var(--safe-t) + 58px); transform: none; width: 58px; justify-content: center; gap: 5px; }
    body.in-scope #misses i { width: 12px; height: 12px; }
    body.in-scope #scope-hint { bottom: calc(var(--safe-b) + 16px); width: min(30vw, 300px); left: calc(var(--safe-l) + max(18px, 3vw)); transform: none; text-align: left; font-size: 14px; }

    /* HUD */
    .bar { width: clamp(130px, 15vw, 220px); top: calc(var(--safe-t) + 12px); }
    .bar.left { left: calc(var(--safe-l) + max(14px, 2.4vw)); }
    .bar.right { right: calc(var(--safe-r) + max(14px, 2.4vw)); }
    .bar .lbl { font-size: clamp(12px, 2.7vh, 17px); }
    .bar .val { font-size: clamp(12px, 2.7vh, 17px); }
    .bar .track { height: clamp(22px, 5.2vh, 34px); }
    #timer { font-size: clamp(34px, 9vh, 56px); }
    #toast { top: 28%; font-size: clamp(30px, 11vh, 64px); }
    #toast.warn { font-size: clamp(22px, 7vh, 40px); }

    /* меню: логотип слева, кнопки в стеклянной панели справа */
    #menu { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; padding-left: calc(var(--safe-l) + var(--pad-x)); padding-right: calc(var(--safe-r) + var(--pad-x));
        background: linear-gradient(90deg, rgba(8,11,15,.78) 0%, rgba(8,11,15,.35) 55%, rgba(8,11,15,.6) 100%); }
    #menu .logo { margin: 0; text-align: left; flex: 0 1 auto; }
    #menu .logo svg { display: block; width: clamp(40px, 11vh, 66px); margin-bottom: 8px; }
    #menu .logo .l1 { font-size: clamp(40px, 15vh, 110px); }
    #menu .logo .l2 { font-size: clamp(42px, 16vh, 118px); }
    #menu .logo .sub { font-size: clamp(11px, 2.8vh, 17px); }
    #menu .menu-btns { margin: 0; width: min(38vw, 380px); flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 26px; background: rgba(10,14,19,.62); border: 2px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
    #menu .menu-btns .btn { height: clamp(44px, 10vh, 58px); font-size: clamp(14px, 3.4vh, 19px); padding: 0 8px; }
    #menu .menu-btns .btn.primary { grid-column: 1 / -1; height: clamp(52px, 12.5vh, 70px); font-size: clamp(18px, 4.6vh, 25px); }
    #menu .menu-btns .row2 { display: contents; }
    #menu .menu-btns .row2 .btn { grid-column: auto; }
    #menu .menu-btns .row2 .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    #menu .chip { right: calc(var(--safe-r) + 18px); }

    /* списки: шапка во всю ширину, табы колонкой слева, сетка миссий справа */
    #levels.on { display: grid; grid-template-columns: minmax(150px, 22vw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(18px, 3vw, 40px); align-content: start; align-items: start; justify-items: stretch;
        padding-left: calc(var(--safe-l) + var(--pad-x)); padding-right: calc(var(--safe-r) + var(--pad-x)); }
    #levels .head { grid-column: 1 / -1; max-width: none; margin-bottom: 12px; }
    #levels .tabs { grid-column: 1; grid-row: 2; max-width: none; flex-direction: column; margin: 0; }
    #levels .tab { height: 52px; }
    #levels .grid { grid-column: 2; grid-row: 2; max-width: none; grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 13vw, 150px), 1fr)); align-content: start; overflow: auto; max-height: 100%; padding-bottom: 8px; }
    #levels #l-boost { grid-column: 1 / -1; grid-row: 3; max-width: none !important; width: 100% !important; margin-top: 10px !important; }
    #shop.on, #records.on { padding-left: calc(var(--safe-l) + var(--pad-x)); padding-right: calc(var(--safe-r) + var(--pad-x)); align-items: stretch; }
    #shop .head, #records .head { max-width: none; margin-bottom: 12px; }
    #s-list { max-width: none !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
    #s-list .card { max-width: none; margin: 0; }
    #rec-list { max-width: 760px !important; margin: 0 auto; }

    /* результат: слева итоги, справа кнопки */
    #result { padding-left: calc(var(--safe-l) + 18px); padding-right: calc(var(--safe-r) + 18px); }
    .rcard { width: min(88vw, 820px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "t b" "s b" "r b"; column-gap: 28px; align-items: center; text-align: left; padding: 22px 26px; }
    .rcard h1 { grid-area: t; font-size: clamp(30px, 10vh, 54px); }
    .rcard .sub { grid-area: s; margin-bottom: 8px; }
    .rcard .rows { grid-area: r; margin: 6px 0 0; max-height: 46vh; overflow: auto; }
    .rcard .btns { grid-area: b; align-self: center; }

    /* пауза: заголовок слева, кнопки 2×2 справа */
    #pausebox { flex-direction: row; justify-content: center; align-items: center; gap: clamp(28px, 7vw, 100px); }
    #pausebox h2 { margin: 0; font-size: clamp(34px, 12vh, 60px); }
    #pausebox .menu-btns { display: grid; grid-template-columns: 1fr 1fr; width: min(52vw, 520px); gap: 10px; padding: 16px; border-radius: 26px; background: rgba(10,14,19,.62); border: 2px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
    #pausebox .menu-btns .btn { height: clamp(48px, 11vh, 62px); font-size: clamp(14px, 3.6vh, 19px); }
    #pausebox .menu-btns .btn.primary, #pausebox .menu-btns .btn:last-child:nth-child(even) { grid-column: 1 / -1; }

    /* загрузка: прицел слева, всё остальное колонкой справа */
    /* LoadingScreen.show() ставит inline display:flex, а скрывает через display:none — grid включаем поверх, пока экран не скрыт */
    #loading-screen:not([style*="none"]) { display: grid !important; grid-template-columns: auto minmax(0, 440px); grid-auto-rows: min-content; justify-content: center; align-content: center; column-gap: clamp(24px, 7vw, 120px); row-gap: 8px; padding-left: calc(var(--safe-l) + 18px); padding-right: calc(var(--safe-r) + 18px); }
    #loading-screen > * { grid-column: 2; justify-self: start; text-align: left; }
    #loading-screen > .ld-city { position: absolute; grid-column: auto; }
    #loading-screen > .ld-credit { position: absolute; grid-column: auto; }
    #loading-screen > .ld-scope { grid-column: 1; grid-row: 1 / span 9; align-self: center; width: clamp(150px, 62vh, 340px); }
    #loading-screen .loading-bar { width: min(100%, 360px); }
    #loading-screen #loading-tip { text-align: left; min-height: 0; max-width: 100%; }
    #loading-screen #loading-title, #loading-screen .loading-text { text-align: left; }
}

/* низкий альбом (телефон на боку): ужимаем отступы */
@media (orientation: landscape) and (max-height: 460px) {
    .screen { padding-top: calc(var(--safe-t) + 10px); padding-bottom: calc(var(--safe-b) + 10px); }
    .head h2 { font-size: 24px; }
    .back { width: 40px; height: 40px; }
    #levels .tab { height: 44px; }
    .tile .n { font-size: 28px; }
    .card { padding: 9px 12px; } .card .ico, .card .ico .art-icon { width: 50px; height: 50px; }
    .rcard { padding: 12px 20px; column-gap: 22px; }
    .rcard h1 { font-size: clamp(28px, 9vh, 40px); }
    .rcard .sub { margin-bottom: 4px; font-size: 13px; }
    .rcard .rows { max-height: none; margin-top: 2px; gap: 4px; }
    .rows .r { padding: 5px 10px; font-size: 13px; }
    #pausebox .menu-btns { padding: 14px; gap: 10px; border-radius: 24px; background: rgba(10,14,19,.62); border: 2px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
    #scope-zoomgroup button { width: 38px; height: 38px; font-size: 24px; }
}

/* ПК, окно шире 2:1: игровое поле не растягиваем в полосу — 2:1 по центру, по бокам тёмные поля
   (требование Playgama; на телефонах поле всегда во весь экран) */
@media (min-aspect-ratio: 2/1) and (hover: hover) and (pointer: fine) {
    html, body { background: #05070a; }
    #world3d { left: calc((100vw - 200vh) / 2); right: auto; width: 200vh; }
}

/* очень широкий экран (> 2:1): содержимое не растягиваем, держим по центру */
@media (min-aspect-ratio: 12/5) and (min-width: 1200px) {
    #levels.on, #shop.on, #records.on { padding-left: 14vw; padding-right: 14vw; }
}

/* очень узкий и высокий экран */
@media (orientation: portrait) and (max-aspect-ratio: 9/20) {
    .logo { margin-top: 12vh; }
}

/* длинные подсказки по центру экрана (в несколько строк) */
#toast.long { white-space: normal; width: min(88vw, 680px); line-height: 1.12; font-size: clamp(16px, 4.6vw, 26px); -webkit-text-stroke-width: 4px; }
@media (orientation: landscape) { #toast.long { font-size: clamp(15px, 4.6vh, 24px); } }

/* тёмные полосы прокрутки вместо белых системных */
* { scrollbar-width: thin; scrollbar-color: #3b4c5d transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #3b4c5d; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (orientation: landscape) {
    .tile { aspect-ratio: 1 / .86; }
    .tile .n { font-size: clamp(26px, 6.4vh, 36px); }
    .tile .nm { font-size: clamp(10px, 2.4vh, 12px); }
}