/* === 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);
  }
  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);
    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);
    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;
  }

  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-phone .titlebar {
    height: 28px;
    min-height: 28px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.plus,
  body.asterrvn-phone .titlebar .tab.plus {
    display: none !important;
  }

  body.asterrvn-viewer-narrow .titlebar .tab .x,
  body.asterrvn-phone .titlebar .tab .x {
    display: flex !important;
  }

  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-phone .titlebar .tab {
    flex: 0 0 auto;
    max-width: none;
    padding: 0 12px;
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--line);
  }

  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"],
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab],
  body.asterrvn-phone .titlebar .tab[data-view="about"],
  body.asterrvn-phone .titlebar .tab[data-dynamic-tab] {
    flex: 0 0 auto;
    max-width: none;
    padding: 0 12px;
  }

  body.asterrvn-viewer-narrow .titlebar .tab .x,
  body.asterrvn-phone .titlebar .tab .x {
    margin-left: 0;
    font-size: 10px;
    opacity: 0.9;
    align-items: center;
  }

  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    position: sticky;
    right: 0;
    z-index: 4;
    margin-left: auto;
    padding: 0 14px;
    font-size: 8px;
    background: var(--bg);
  }

  /* 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(180px, 52vw, 260px);
    --phone-head-top: clamp(14px, 3.8vw, 36px);
    --phone-head-shift-x: 0px;
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --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.524 !important;
  }
  body.asterrvn-viewer-narrow .about-view > .system-illusion-layer .system-illusion-video {
    filter: brightness(1.15) 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%);
  }
}

/* === PASS 4B: mobile titlebar — uniform 1px dividers (no double stack) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .titlebar .tab.active::after,
  body.asterrvn-tablet .titlebar .tab.active::after,
  body.asterrvn-phone .titlebar .tab.active::after {
    display: none;
  }

  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-tablet .titlebar .tab,
  body.asterrvn-phone .titlebar .tab {
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid var(--line);
    box-shadow: none;
    outline: none;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.active,
  body.asterrvn-tablet .titlebar .tab.active,
  body.asterrvn-phone .titlebar .tab.active {
    box-shadow: none;
  }

  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-tablet .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    border: none;
    box-shadow: inset 1px 0 0 var(--line);
  }
}

/* === PASS 4B: mobile HOME boot — controlled HTML lines wrap cleanly === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow #termBody .term-line,
  body.asterrvn-tablet #termBody .term-line,
  body.asterrvn-phone #termBody .term-line {
    overflow-wrap: normal;
    word-break: normal;
  }

  body.asterrvn-viewer-narrow #termBody .term-line:not(.profile-kv),
  body.asterrvn-tablet #termBody .term-line:not(.profile-kv),
  body.asterrvn-phone #termBody .term-line:not(.profile-kv) {
    white-space: pre-wrap;
  }

  body.asterrvn-viewer-narrow #termBody .term-line .dim,
  body.asterrvn-viewer-narrow #termBody .term-line .accent,
  body.asterrvn-viewer-narrow #termBody .term-line .key,
  body.asterrvn-viewer-narrow #termBody .term-line .ok,
  body.asterrvn-tablet #termBody .term-line .dim,
  body.asterrvn-tablet #termBody .term-line .accent,
  body.asterrvn-tablet #termBody .term-line .key,
  body.asterrvn-tablet #termBody .term-line .ok,
  body.asterrvn-phone #termBody .term-line .dim,
  body.asterrvn-phone #termBody .term-line .accent,
  body.asterrvn-phone #termBody .term-line .key,
  body.asterrvn-phone #termBody .term-line .ok {
    white-space: normal;
  }
}

/* === PASS 4C: mobile HOME — head peek (~50% visible), text lane, hairline titlebar === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(180px, 52vw, 260px);
    --phone-head-top: clamp(14px, 3.8vw, 36px);
    --phone-head-shift-x: 0px;
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --phone-text-lane: calc(var(--phone-head-w) * 0.5 + 10px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    display: block !important;
    right: var(--phone-head-right) !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;
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art.revealed,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art.revealed,
  body.asterrvn-phone .about-view .terminal img.hero-side-art.revealed {
    pointer-events: auto !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    max-width: 100%;
    box-sizing: border-box;
    padding-right: max(
      12px,
      calc(12px + var(--phone-text-lane))
    ) !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line,
  body.asterrvn-phone .about-view .terminal #termBody .term-line {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.asterrvn-viewer-narrow .titlebar,
  body.asterrvn-tablet .titlebar,
  body.asterrvn-phone .titlebar {
    border-bottom: 1px solid var(--line);
  }

  body.asterrvn-viewer-narrow .titlebar .tab,
  body.asterrvn-tablet .titlebar .tab,
  body.asterrvn-phone .titlebar .tab,
  body.asterrvn-viewer-narrow .titlebar .tab[data-view="about"],
  body.asterrvn-tablet .titlebar .tab[data-view="about"],
  body.asterrvn-phone .titlebar .tab[data-view="about"],
  body.asterrvn-viewer-narrow .titlebar .tab[data-dynamic-tab],
  body.asterrvn-tablet .titlebar .tab[data-dynamic-tab],
  body.asterrvn-phone .titlebar .tab[data-dynamic-tab] {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: none !important;
    outline: none !important;
    background-clip: padding-box;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.active,
  body.asterrvn-tablet .titlebar .tab.active,
  body.asterrvn-phone .titlebar .tab.active {
    box-shadow: none !important;
  }

  body.asterrvn-viewer-narrow .titlebar .tab.active::after,
  body.asterrvn-tablet .titlebar .tab.active::after,
  body.asterrvn-phone .titlebar .tab.active::after {
    display: none !important;
  }

  body.asterrvn-viewer-narrow .titlebar .lang-switch,
  body.asterrvn-tablet .titlebar .lang-switch,
  body.asterrvn-phone .titlebar .lang-switch {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
  }
}

/* === PASS 4E: tune text lane + exact half-head visibility === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(180px, 52vw, 260px);
    --phone-head-right: calc(var(--phone-head-w) * -0.5);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.5 + 10px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(10px, calc(10px + var(--phone-text-lane))) !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"],
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"],
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"],
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"]::-webkit-scrollbar,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"]::-webkit-scrollbar,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"]::-webkit-scrollbar,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"]::-webkit-scrollbar,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"]::-webkit-scrollbar,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"]::-webkit-scrollbar {
    display: none;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .dim,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .accent,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .dim,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .accent,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .dim,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key^="boot.profileLines"] .accent,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .dim,
  body.asterrvn-viewer-narrow .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .accent,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .dim,
  body.asterrvn-tablet .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .accent,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .dim,
  body.asterrvn-phone .about-view .terminal #termBody .term-line[data-edit-key="boot.toolsLines.0"] .accent {
    white-space: inherit;
  }
}

/* === PASS 4F2: mobile HOME — manifesto-first order companion head peek (~70% visible) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(200px, 56vw, 290px);
    --phone-head-right: calc(var(--phone-head-w) * -0.30);
    --phone-head-top: clamp(10px, 2.8vw, 26px);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.70 + 8px);
  }
}

/* === PASS 4F3: mobile HOME — larger head, wider text lane (target composition) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(230px, 66vw, 380px);
    --phone-head-right: calc(var(--phone-head-w) * -0.18);
    --phone-head-top: clamp(4px, 1.6vw, 16px);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.34 + 6px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    right: var(--phone-head-right) !important;
    left: auto !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(8px, calc(var(--phone-text-lane))) !important;
  }
}

/* === PASS 4G: mobile HOME — push head right, reduce center overlap (~74% visible) === */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .about-view .terminal,
  body.asterrvn-tablet .about-view .terminal,
  body.asterrvn-phone .about-view .terminal {
    --phone-head-w: clamp(220px, 62vw, 350px);
    --phone-head-right: calc(var(--phone-head-w) * -0.26);
    --phone-head-top: clamp(4px, 1.6vw, 16px);
    --phone-head-shift-x: 0px;
    --phone-text-lane: calc(var(--phone-head-w) * 0.26 + 6px);
  }

  body.asterrvn-viewer-narrow .about-view .terminal img.hero-side-art,
  body.asterrvn-tablet .about-view .terminal img.hero-side-art,
  body.asterrvn-phone .about-view .terminal img.hero-side-art {
    right: var(--phone-head-right) !important;
    left: auto !important;
  }

  body.asterrvn-viewer-narrow .about-view .terminal #termBody.terminal-body,
  body.asterrvn-tablet .about-view .terminal #termBody.terminal-body,
  body.asterrvn-phone .about-view .terminal #termBody.terminal-body {
    padding-right: max(8px, calc(var(--phone-text-lane))) !important;
  }
}

