/* === ASTERRVN ≤1024px: horizontal overflow (v6.2 .folder-row !important vs narrow grid; 100vw scrollbar gap) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow html,
  body.asterrvn-tablet html,
  body.asterrvn-phone html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow,
  body.asterrvn-tablet,
  body.asterrvn-phone {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow .os-window,
  body.asterrvn-tablet .os-window,
  body.asterrvn-phone .os-window {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    /* Menubar row hidden below — 3-row shell; row 1 must size to titlebar (narrow uses 44px in ≤640), not fixed 28px */
    grid-template-rows: auto 1fr 24px;
  }
  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-tablet .titlebar,
  body.asterrvn-phone .titlebar {
    min-width: 0;
    max-width: 100%;
  }
  body.asterrvn-viewer-narrow .menubar,
  body.asterrvn-tablet .menubar,
  body.asterrvn-phone .menubar {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .sidebar,
  body.asterrvn-tablet .sidebar,
  body.asterrvn-phone .sidebar {
    grid-row: 2;
  }
  body.asterrvn-viewer-narrow .content,
  body.asterrvn-tablet .content,
  body.asterrvn-phone .content {
    grid-row: 2;
  }
  body.asterrvn-viewer-narrow .scrollbar,
  body.asterrvn-tablet .scrollbar,
  body.asterrvn-phone .scrollbar {
    grid-row: 2;
  }
  body.asterrvn-viewer-narrow .statusbar,
  body.asterrvn-tablet .statusbar,
  body.asterrvn-phone .statusbar {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    grid-row: 3;
  }
  body.asterrvn-viewer-narrow .statusbar .frames,
  body.asterrvn-tablet .statusbar .frames,
  body.asterrvn-phone .statusbar .frames {
    min-width: 0;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow .terminal,
  body.asterrvn-tablet .terminal,
  body.asterrvn-phone .terminal {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  body.asterrvn-viewer-narrow .folder-row,
  body.asterrvn-tablet .folder-row,
  body.asterrvn-phone .folder-row {
    grid-template-columns: 16px minmax(0, 1.4fr) minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    padding-right: 4px !important;
  }
  body.asterrvn-viewer-narrow .folder-row .name,
  body.asterrvn-viewer-narrow .folder-row .meta,
  body.asterrvn-tablet .folder-row .name,
  body.asterrvn-tablet .folder-row .meta,
  body.asterrvn-phone .folder-row .name,
  body.asterrvn-phone .folder-row .meta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.asterrvn-viewer-narrow .folder-row .meta,
  body.asterrvn-tablet .folder-row .meta,
  body.asterrvn-phone .folder-row .meta {
    justify-self: stretch !important;
    text-align: right !important;
  }
  body.asterrvn-viewer-narrow .folder-row .size,
  body.asterrvn-tablet .folder-row .size,
  body.asterrvn-phone .folder-row .size {
    min-width: 0 !important;
    white-space: nowrap !important;
    justify-self: end !important;
    text-align: right !important;
  }
  body.asterrvn-viewer-narrow #termBody .folder-list,
  body.asterrvn-tablet #termBody .folder-list,
  body.asterrvn-phone #termBody .folder-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}

/* Terminal window controls: viewer-narrow up to 1024px (matches JS isAsterrvnViewerNarrowRuntime) */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
    flex: 0 0 auto;
    z-index: 4;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-btn {
    width: 24px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: rgba(0, 10, 18, 0.78);
    color: var(--accent-bright);
    font: inherit;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    border-radius: 0;
    touch-action: manipulation;
    cursor: url("../../refs/New-Cursor-Finger.png") 8 1, pointer;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-btn:active {
    transform: translateY(1px);
    filter: brightness(1.35);
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-window-close {
    color: var(--warn);
    border-color: rgba(255, 51, 112, 0.45);
  }
}

/* === ASTERRVN phone composition (<=640px): compact titlebar, hero, boot terminal === */
@media (max-width: 640px) {
  /* Titlebar: one functional row — brand + open tabs + RU/EN (no fake window chrome) */
  body.asterrvn-viewer-narrow .titlebar .tab.plus,
  body.asterrvn-phone .titlebar .tab.plus,
  body.asterrvn-viewer-narrow .titlebar .spacer,
  body.asterrvn-phone .titlebar .spacer,
  body.asterrvn-viewer-narrow .titlebar .version,
  body.asterrvn-phone .titlebar .version,
  body.asterrvn-viewer-narrow .titlebar .controls,
  body.asterrvn-phone .titlebar .controls {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-phone .titlebar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 4px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.asterrvn-viewer-narrow .titlebar::-webkit-scrollbar,
  body.asterrvn-phone .titlebar::-webkit-scrollbar {
    display: none;
  }
  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-left: 1px solid var(--line-soft);
  }
  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-phone .titlebar .tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 0.02em;
    gap: 4px;
  }
  body.asterrvn-viewer-narrow .titlebar .tab .x,
  body.asterrvn-phone .titlebar .tab .x {
    margin-left: 2px;
    font-size: 11px;
    opacity: 0.85;
  }
  body.asterrvn-viewer-narrow .titlebar .access-denied,
  body.asterrvn-phone .titlebar .access-denied {
    right: 10px;
    top: 26px;
  }

  /* Viewer-narrow phone: compact OS-style chrome — brand | open tabs | RU/EN (desktop widths unchanged) */
  body.asterrvn-viewer-narrow .titlebar {
    align-items: center;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 6px 0 8px;
    gap: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .tab.plus,
  body.asterrvn-viewer-narrow .titlebar .tab .x {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"] {
    flex: 0 1 auto;
    max-width: 112px;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    gap: 4px;
    justify-content: center;
    font-size: 8px;
    letter-spacing: 0.02em;
    border-right: 1px solid var(--line-soft);
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"] > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 132px;
    height: 100%;
    padding: 0 8px;
    gap: 4px;
    justify-content: center;
    font-size: 8px;
    letter-spacing: 0.02em;
    border-right: 1px solid var(--line-soft);
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab] > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.asterrvn-viewer-narrow .titlebar .lang-switch {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 8px;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .titlebar .access-denied {
    top: 48px;
  }

  /* Hero: mobile scale; avoid isolation/overflow:hidden (reads as black behind VP9-alpha tag) */
  body.asterrvn-viewer-narrow .about-view .hero,
  body.asterrvn-phone .about-view .hero {
    min-height: 0;
    margin: 0 auto 8px;
    padding: 4px 0 2px;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    isolation: auto;
    background: transparent !important;
    background-color: transparent !important;
  }
  body.asterrvn-viewer-narrow .about-view .hero .coord,
  body.asterrvn-phone .about-view .hero .coord {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .hero video.logo-tag-video,
  body.asterrvn-phone .about-view .hero video.logo-tag-video {
    display: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .hero .logo-tag-mobile-webp,
  body.asterrvn-phone .about-view .hero .logo-tag-mobile-webp {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(26vh, 200px) !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  /* Boot terminal: normal document flow — no desktop z-stack / inner scroll cage */
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(240px, 70vw, 350px);
    --phone-head-top: clamp(18px, 4.5vw, 42px);
    --phone-head-shift-x: 44%;
    --phone-head-opacity: 1;
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0;
    box-sizing: border-box;
    position: relative;
    z-index: auto;
    isolation: auto;
    contain: none;
    overflow-x: clip;
    overflow-y: visible;
  }
  body.asterrvn-viewer-narrow .about-view .terminal {
    overflow-x: clip !important;
    overflow-y: visible;
  }
  body.asterrvn-viewer-narrow .about-view .terminal::before,
  body.asterrvn-phone .about-view .terminal::before {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head,
  body.asterrvn-phone .about-view .terminal-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    padding: 4px 4px 4px 8px;
    font-size: 7px;
    position: relative;
    z-index: 3;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head-right,
  body.asterrvn-phone .about-view .terminal-head-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head .left,
  body.asterrvn-phone .about-view .terminal-head .left {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.asterrvn-viewer-narrow .about-view .terminal-head .terminal-session-meta,
  body.asterrvn-phone .about-view .terminal-head .terminal-session-meta {
    max-width: min(200px, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head {
    padding-right: 4px;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head > .left {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
    height: 100%;
  }
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-session-meta {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    white-space: nowrap;
    color: inherit;
  }
  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    box-sizing: border-box !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: clip;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto;
    padding: 10px 12px max(14px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    position: relative;
    z-index: 1;
  }
  body.asterrvn-viewer-narrow #termBody .term-line,
  body.asterrvn-phone #termBody .term-line {
    white-space: pre-wrap;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow #termBody .folder-list,
  body.asterrvn-phone #termBody .folder-list {
    margin-top: 10px !important;
    padding-top: 8px !important;
    font-size: 11px !important;
  }

  /* About stack below boot: own stacking, no overlap from boot panel */
  body.asterrvn-viewer-narrow .about-view .aboutme-view,
  body.asterrvn-phone .about-view .aboutme-view {
    position: relative;
    z-index: 0;
    margin-top: 18px;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .about-view .id-card,
  body.asterrvn-phone .about-view .id-card {
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(1) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(1) .v,
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(2) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(2) .v,
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(3) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(3) .v,
  body.asterrvn-viewer-narrow .about-view .id-card-body > .id-row:nth-child(5) .v,
  body.asterrvn-phone .about-view .id-card-body > .id-row:nth-child(5) .v {
    margin-left: 0 !important;
  }
  body.asterrvn-viewer-narrow .about-view .id-card-body,
  body.asterrvn-phone .about-view .id-card-body,
  body.asterrvn-viewer-narrow .about-view .id-row .v,
  body.asterrvn-phone .about-view .id-row .v {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.asterrvn-viewer-narrow .about-view .manifesto,
  body.asterrvn-phone .about-view .manifesto {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.45;
    letter-spacing: 0;
  }
  body.asterrvn-viewer-narrow .about-view .manifesto p,
  body.asterrvn-phone .about-view .manifesto p {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 4px;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal;
    text-wrap: pretty;
  }

  /* Phone: same img.hero-side-art as desktop — position only until .revealed; do not override reveal/animation */
  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: var(--phone-head-top) !important;
    width: var(--phone-head-w) !important;
    max-width: none !important;
    height: auto;
    transform: translateX(var(--phone-head-shift-x)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    image-rendering: pixelated;
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art.revealed,
  body.asterrvn-phone .about-view .terminal img.hero-side-art.revealed {
    /* opacity/visibility/reveal animation: same as desktop .hero-side-art.revealed — do not override */
    pointer-events: auto !important;
    cursor: pointer;
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art.head-click-glitch,
  body.asterrvn-phone .about-view .terminal img.hero-side-art.head-click-glitch {
    animation: head-pixel-pulse-v52-phone .36s steps(5) both !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody,
  body.asterrvn-phone .about-view .terminal #termBody,
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-body,
  body.asterrvn-phone .about-view .terminal .terminal-body,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal .terminal-head,
  body.asterrvn-phone .about-view .terminal .terminal-head {
    position: relative !important;
    z-index: 3 !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal .terminal-body::before,
  body.asterrvn-phone .about-view .terminal .terminal-body::before,
  body.asterrvn-viewer-narrow .about-view .terminal .terminal-body::after,
  body.asterrvn-phone .about-view .terminal .terminal-body::after {
    background: transparent !important;
    pointer-events: none !important;
  }

  /* Phone + viewer-narrow: illusion layer ~30% brighter read (direct child of .about-view, not under .hero) */
  body.asterrvn-viewer-narrow .about-view > .system-illusion-layer {
    opacity: 0.31 !important;
  }
  body.asterrvn-viewer-narrow .about-view > .system-illusion-layer .system-illusion-video {
    filter: brightness(1.45) contrast(1.05) !important;
  }
}

@keyframes head-pixel-pulse-v52-phone {
  0% {
    opacity: .92;
    transform: translateX(var(--phone-head-shift-x)) scale(1);
    filter: contrast(1.05) brightness(.92);
  }
  25% {
    opacity: .62;
    transform: translateX(var(--phone-head-shift-x)) scale(1.003);
    filter: blur(.8px) contrast(2.6) brightness(.86);
    clip-path: polygon(2% 3%, 98% 0, 96% 96%, 6% 100%);
  }
  45% {
    opacity: .94;
    transform: translateX(var(--phone-head-shift-x)) scale(.998);
    filter: invert(.05) contrast(2.8) brightness(.82);
    clip-path: polygon(0 0, 100% 4%, 98% 92%, 3% 100%);
  }
  70% {
    opacity: .74;
    transform: translateX(var(--phone-head-shift-x)) scale(1.001);
    filter: contrast(1.9) brightness(.8);
  }
  100% {
    opacity: .92;
    transform: translateX(var(--phone-head-shift-x)) scale(1);
    filter: contrast(1.05) brightness(.92);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}