/* ═══════════════════════════════════════════════════════════════════
   ANASTAS OS v5.2 — Desktop Edition (full-viewport scene)
   Scene = full-viewport cover, monitor overlay, icons floating,
   thin topbar, tiny sys-indicator bottom-right.
═══════════════════════════════════════════════════════════════════ */

:root {
  --w98-gray:   #c0c0c0;
  --w98-gray-d: #a0a0a0;
  --w98-gray-l: #d4d0c8;
  --w98-white:  #ffffff;
  --w98-hi:     #dfdfdf;
  --w98-lo:     #808080;
  --w98-lo2:    #555555;
  --w98-black:  #000000;
  --w98-blue:   #000080;
  --w98-blue2:  #1084d0;
  --w98-yellow: #ffff80;

  --green:      #00ff41;
  --green-dim:  #00a030;
  --amber:      #ffaa00;
  --red:        #ff3333;
  --cyan:       #00d9ff;

  --frame-inset:  8px;     /* отступ окна от края viewport */
  --frame-border: 2px;     /* ширина одной стороны win95-bevel */
  --titlebar-h:   30px;    /* высота титлбара фрейма */

  --f-mono:   'VT323', 'Courier New', monospace;
  --f-pixel:  'Press Start 2P', monospace;
  --f-sys:    'Tahoma', 'MS Sans Serif', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--f-mono);
  font-size: 16px;
  color: #000;
  -webkit-font-smoothing: none;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ═══════════════ BOOT SCREEN — статика старого ТВ ═══════════════
   Показываем gif-заставку (цветные полосы с шумом) на 1.5с.
   Смягчаем: плавный fade-in 300мс, hold ~900мс, fade-out 300мс —
   чтобы не было резких переходов и никакой эпилепсии. */
#boot {
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
  overflow: hidden;
  opacity: 0;
  animation: boot-fade-in .3s ease-out forwards;
  transition: opacity .4s ease, visibility .4s;
}
#boot.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes boot-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Квадратное видео (1200×1200) по центру, object-fit: contain = чёрные поля вокруг.
   На десктопе полосы по бокам, на мобилке — сверху/снизу (как Стёпа просил). */
#boot-media {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Вписываем квадрат в меньшую сторону viewport, с запасом 5% по краям */
  width: min(90vw, 90vh);
  height: min(90vw, 90vh);
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  image-rendering: auto;
  /* Плавное затемнение видео в конце лоадера */
  transition: filter .25s ease, opacity .25s ease;
}
/* Последние 250мс — видео уходит в чёрный (boot остаётся на чёрном фоне) */
#boot.fading #boot-media {
  filter: brightness(0);
  opacity: 0;
}
#boot-sound-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 2;
  transform: translateX(-50%);
  min-width: 228px;
  padding: 9px 14px;
  background: var(--w98-gray);
  color: #000;
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  font-family: var(--f-mono);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(0,0,0,.7);
}
#boot-sound-hint:active {
  border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2);
}
#boot.audio-on #boot-sound-hint,
#boot.fading #boot-sound-hint { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  #boot-sound-hint { display: block; }
}

/* ═══════════════ WINDOW FRAME: окно обтягивает СЦЕНУ вплотную ═══════════════
   Размеры считаются от сцены, а не от viewport.
   Снаружи фрейма — тёмные поля (чёрные полосы viewport, если он шире/выше аспекта).
   overhead_x = 12px: (2+2 outer border) + (2+2 padding) + (2+2 frame-body border)
   overhead_y = 44px: 12 + 30 (titlebar) + 2 (gap to frame-body)
═══════════════════════════════════════════════════════════════════ */
body { background: #0a0a0a; }   /* тёмные поля снаружи окна */

:root {
  --frame-overhead-x: 12px;
  --frame-overhead-y: 44px;
  /* fallback для старых браузеров без dvh */
  --stage-w: min(calc(100vw - var(--frame-overhead-x)), calc((100vh - var(--frame-overhead-y)) * 1672 / 941));
  --stage-h: min(calc(100vh - var(--frame-overhead-y)), calc((100vw - var(--frame-overhead-x)) * 941 / 1672));
  /* dvh учитывает динамические UI (тулбар Telegram WebView, address bar Safari).
     Если dvh поддерживается — перезатирает значения выше. */
  --stage-w: min(calc(100vw - var(--frame-overhead-x)), calc((100dvh - var(--frame-overhead-y)) * 1672 / 941));
  --stage-h: min(calc(100dvh - var(--frame-overhead-y)), calc((100vw - var(--frame-overhead-x)) * 941 / 1672));
  /* Дизайн-пиксель контента монитора: 1px при референсной высоте сцены 941.
     Текст и иконки внутри окна растут/сжимаются вместе со сценой.
     Пол 0.85px — на маленьких ноутбуках шрифт не мельче 85% макета. */
  --u: max(0.85px, calc(var(--stage-h) / 941));
}

#scene-frame {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width:  calc(var(--stage-w) + var(--frame-overhead-x));
  height: calc(var(--stage-h) + var(--frame-overhead-y));
  z-index: 1;
  background: var(--w98-gray);
  /* Внешний win95-bevel (светлый сверху-слева, тёмный снизу-справа) */
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  box-shadow:
    inset -2px -2px 0 var(--w98-lo),
    inset  2px  2px 0 var(--w98-hi),
    0 2px 14px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2px;
}

#frame-titlebar {
  height: var(--titlebar-h);
  flex-shrink: 0;
  background: linear-gradient(to right, var(--w98-blue) 0%, var(--w98-blue2) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 4px 0 6px;
  gap: 12px;
  font-family: var(--f-sys);
  user-select: none;
}
#frame-titlebar .ft-left {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
#frame-titlebar .ft-icon {
  width: 20px; height: 20px;
  background: #ff6a00; color: #fff;
  font-family: var(--f-sys); font-weight: 900; font-size: 12px;
  border: 1px solid #000;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
#frame-titlebar .ft-title {
  font-size: 14px; font-weight: bold;
  letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
#frame-titlebar .ft-right {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.ft-clock-wrap {
  display: flex; align-items: baseline; gap: 6px;
  padding: 0 4px;
}
.ft-clock-lbl {
  font-family: var(--f-mono);
  font-size: 13px;
  color: #9fc6ff;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.ft-clock {
  font-family: var(--f-mono);
  font-size: 20px;
  color: #fff;
  letter-spacing: 1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.ft-btns { display: flex; gap: 2px; }
.ft-btn {
  width: 20px; height: 18px;
  background: var(--w98-gray);
  border: 1px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  color: #000;
  font-family: var(--f-sys); font-size: 10px; font-weight: bold;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; cursor: default;
}
.ft-btn:active {
  border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2);
}
.ft-close { font-size: 13px; padding-bottom: 2px; }

#frame-body {
  flex: 1;
  position: relative;
  background: #000;
  /* внутренний "утопленный" bevel */
  border: 2px solid;
  border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2);
  overflow: hidden;
  margin-top: 2px;
}

#desktop-stage {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#desk-bg {
  position: absolute; inset: 0;
  background-image: url('scene-desktop.png?v=1');
  background-size: 100% 100%;       /* stage сам имеет аспект 1672/941 → без деформации */
  background-repeat: no-repeat;
  z-index: 1;
}
#desk-crt {
  position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px,
    transparent 1px, transparent 3px
  );
  animation: flicker 0.15s infinite;
  mix-blend-mode: multiply;
}
@keyframes flicker { 0%,100% { opacity: 1; } 50% { opacity: .92; } }

/* ═══════════════ MONITOR WINDOW (overlay on CRT screen) ═══════════════ */
/* Границы чёрного CRT-экрана на десктопном фоне: x=472..1279, y=115..680. */
/* Monitor window — «утоплен» в CRT-стекло.
   Окно ~500×400. Внутри .mw-body имеет свой белый/цветной фон,
   поэтому inset-shadow у #monitor-win перекрывается контентом.
   Реальная глубина создаётся ПОВЕРХ контента через ::before vignette
   (z-index выше всего, pointer-events: none — не мешает кликам). */
#monitor-win {
  position: absolute;
  left:  28.3%;
  top:   12.4%;
  width: 48.05%;
  height: 59.7%;
  z-index: 200;
  background: #ece9d8;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.28),
    /* outer — монитор висит над фоном */
    0 8px 24px rgba(0,0,0,.7),
    0 18px 48px rgba(0,0,0,.4),
    /* холодный CRT-ореол */
    0 0 36px rgba(0,255,65,.14);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--f-sys);
  font-size: 12px;
  color: #000;
  animation: crt-on .6s ease-out;
}
/* Vignette-overlay — кладётся ПОВЕРХ всего содержимого окна.
   Радиальный градиент: прозрачный центр → плотная тень по углам.
   Создаёт ощущение, что экран «утоплен» в выпуклое CRT-стекло.
   pointer-events: none — клики проходят сквозь к иконкам/табам. */
#monitor-win::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 72% at center,
    transparent 38%,
    rgba(0,0,0,.22) 72%,
    rgba(0,0,0,.55) 92%,
    rgba(0,0,0,.85) 100%
  );
  z-index: 999;
  border-radius: inherit;
}
@keyframes crt-on {
  0%   { transform: scaleY(0.02); filter: brightness(3); }
  30%  { transform: scaleY(1);    filter: brightness(1.8); }
  100% { transform: scaleY(1);    filter: brightness(1); }
}
#monitor-win::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.045) 2px, rgba(0,0,0,0.045) 3px
  );
  z-index: 10;
  opacity: .6;
}

/* Monitor titlebar */
.mw-titlebar {
  height: calc(22 * var(--u));
  background: linear-gradient(to right, var(--w98-blue) 0%, var(--w98-blue2) 100%);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 2px 0 3px;
  font-size: calc(11 * var(--u)); font-weight: bold;
  flex-shrink: 0;
  user-select: none;
}
.mw-tb-left { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.mw-tb-icon {
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  background: #ff6a00; color: #fff;
  font-size: calc(9 * var(--u)); font-weight: 900;
  font-family: var(--f-sys);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #000;
  flex-shrink: 0; line-height: 1;
}
.mw-tb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(11 * var(--u)); }
.mw-tb-btns { display: flex; gap: 2px; }
.mw-tb-btn {
  width: calc(16 * var(--u)); height: calc(14 * var(--u));
  background: var(--w98-gray);
  border: 1px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  color: #000;
  font-family: var(--f-sys); font-size: calc(9 * var(--u)); font-weight: bold;
  padding: 0; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.mw-tb-btn:active { border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2); }
.mw-tb-close { font-size: calc(11 * var(--u)); padding-bottom: 1px; }

/* Tabs */
.mw-tabs {
  display: flex; align-items: stretch;
  background:
    linear-gradient(to bottom, #ece9d8 0%, #dcd9c8 100%);
  border-bottom: 1px solid #000;
  padding: 4px 6px 0;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--f-mono);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.mw-tab {
  background: linear-gradient(to bottom, #c8c4b8 0%, #b8b4a8 100%);
  border: 1px solid #6b6859;
  border-bottom: none;
  padding: 3px 11px 2px;
  font-size: calc(14 * var(--u));
  color: #6a6858;
  margin-bottom: -1px;
  border-radius: 3px 3px 0 0;
  line-height: 1;
  position: relative;
  transition: color .08s, background .08s;
}
.mw-tab.active {
  background: #fff;
  color: var(--w98-blue);
  font-weight: bold;
  padding-top: 5px; padding-bottom: 4px;
  border: 1px solid #000;
  border-bottom: none;
  z-index: 2;
  box-shadow:
    inset 0 2px 0 #0050b0,
    inset 0 3px 0 #ffe560;
}
.mw-tab:hover:not(.active) { background: linear-gradient(to bottom, #d4d0c4 0%, #c4c0b4 100%); color: #000; }
.mw-tab-flex { flex: 1; }
.mw-tab-ver {
  font-size: calc(11 * var(--u));
  color: #999;
  opacity: .7;
  padding: 4px 6px 2px;
  align-self: flex-end;
  letter-spacing: .5px;
  font-family: var(--f-mono);
}

.mw-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  background: #fff;
  padding: 14px 16px 12px;
  font-family: var(--f-mono);
  font-size: calc(16 * var(--u));
  color: #0a0a0a;
  line-height: 1.35;
  position: relative;
}
.mw-body::-webkit-scrollbar { width: 14px; }
.mw-body::-webkit-scrollbar-track { background: #d4d0c8; }
.mw-body::-webkit-scrollbar-thumb { background: var(--w98-gray); border: 1px solid var(--w98-lo); }
.mw-body::-webkit-scrollbar-thumb:hover { background: var(--w98-hi); }

.mw-section { display: none; }
.mw-section.active { display: block; animation: fade-in .15s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── HOME (desktop-style with icons inside monitor) ── */
.mw-section.home-desk {
  display: none;
  /* Fill the whole mw-body, including its padding area */
  margin: -14px -16px -12px;
  min-height: calc(100% + 26px);
  /* User-chosen wallpaper + subtle overlay for icon readability */
  background-color: #1a1a2a;
  background-image:
    linear-gradient(rgba(0,0,20,.22), rgba(0,0,20,.38)),
    url('wallpaper-mountains.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  position: relative;
}
.mw-section.home-desk.active { display: flex; flex-direction: column; animation: fade-in .15s ease-out; }

.home-head {
  padding: 16px 18px 10px;
  text-align: left;
}
.hero-name {
  font-family: var(--f-pixel);
  font-size: calc(24 * var(--u));
  font-weight: normal;
  line-height: 1.25;
  color: #fff;
  letter-spacing: 1px;
  margin: 0 0 10px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
}
.hero-role {
  font-family: var(--f-mono);
  font-size: calc(22 * var(--u));
  color: #ffff80;
  font-weight: bold;
  margin-bottom: 6px;
  line-height: 1;
  text-shadow: 1px 1px 0 rgba(0,0,0,.55);
}
.hero-bio {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: calc(16 * var(--u));
  color: #000;
  line-height: 1.25;
  background: #ffffff;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #c0c0c0,
    1px 1px 0 rgba(0,0,0,.35);
  padding: 5px 9px;
  text-shadow: none;
  max-width: calc(100% - 20px);
}
/* Выделенное слово в hero — классическая Win95-кнопка: серый #c0c0c0, двойной 3D-бевель
   (белый highlight сверху/слева, тёмный shadow снизу/справа), обычный моно-шрифт.
   Без градиентов, glow, анимаций — чистый Windows. */
.hero-bio b {
  display: inline-block;
  padding: 0 7px 1px;
  background: var(--w98-gray);
  color: var(--w98-black);
  font-family: var(--f-mono);
  font-size: calc(16 * var(--u));
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: .3px;
  /* Классический Win95 raised bevel — два слоя свет/тень */
  box-shadow:
    inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 var(--w98-lo2),
    inset 2px 2px 0 var(--w98-hi),
    inset -2px -2px 0 var(--w98-lo);
  text-shadow: none;
}

/* Icons grid on home desktop */
.home-icons {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(108 * var(--u)), 1fr));
  gap: 14px 10px;
  padding: 10px 16px 16px;
  align-content: start;
}
.mw-icon {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  padding: 6px 2px 4px;
  cursor: pointer;
  user-select: none;
  border: 1px dotted transparent;
  border-radius: 2px;
  transition: background .08s;
}
@media (hover: hover) {
  .mw-icon:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .65);
  }
}
.mw-icon.active {
  background: rgba(0, 0, 128, 0.55);
  border: 1px dotted rgba(255, 255, 0, 0.9);
}
.mw-icon[data-app="about"] .mw-icon-img img {
  transform: scale(1.2);
}

.mw-icon-img {
  width: calc(68 * var(--u)); height: calc(68 * var(--u));
  display: flex; align-items: center; justify-content: center;
}
.mw-icon-img img,
.mw-icon-img .folder-svg {
  width: calc(68 * var(--u)); height: calc(68 * var(--u));
  object-fit: contain;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6));
}
/* Все иконки одного размера — подписи на одной линии.
   Новая иконка Telegram "плотная" (без whitespace), поэтому её
   не нужно делать больше остальных. */
.mw-icon-lbl {
  font-family: var(--f-sys);
  font-size: calc(14 * var(--u));
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  padding: 1px 3px;
  max-width: calc(108 * var(--u));
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}
.mw-icon.active .mw-icon-lbl {
  background: var(--w98-blue);
  color: #fff;
}

/* Ярлык «Контакты» — только мобилка: на десктопе contact доступен табом,
   а 6-я иконка увела бы «Игры» во второй подрезанный ряд */
.mw-icon[data-app="contact"] { display: none; }

/* Section shared */
.h-rule {
  height: 1px; background: var(--w98-lo);
  margin: 10px 0;
  box-shadow: 0 1px 0 var(--w98-white);
}
.sec-lbl { font-family: var(--f-mono); font-size: calc(14 * var(--u)); color: #888; margin: 4px 0; letter-spacing: .5px; }

.sec-h {
  font-family: var(--f-mono);
  font-size: calc(24 * var(--u));
  font-weight: normal;
  color: #000;
  letter-spacing: 1px;
  margin-bottom: 10px;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
}
.sec-h-cnt { font-size: calc(14 * var(--u)); color: #777; float: right; }

/* Project explorer */
.project-explorer-root { min-height: 100%; }
.pe-toolbar {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-bottom: calc(8 * var(--u));
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding-bottom: calc(4 * var(--u));
}
.pe-nav,
.pe-path button,
.pe-disk {
  min-height: calc(28 * var(--u));
  border: calc(2 * var(--u)) solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  background: var(--w98-gray-l);
  color: #000;
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  font-family: var(--f-mono);
  font-size: calc(14 * var(--u));
  line-height: 1;
  text-decoration: none;
}
.pe-nav { flex: 0 0 calc(32 * var(--u)); padding: 0; }
.pe-nav:active:not(:disabled),
.pe-path button:active:not(:disabled),
.pe-disk:active { border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2); }
.pe-nav:disabled,
.pe-path button:disabled { color: #777; cursor: default; text-shadow: 1px 1px #fff; }
.pe-path {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.pe-path button {
  border-width: 0;
  background: transparent;
  min-height: calc(28 * var(--u));
  padding-inline: calc(3 * var(--u));
  color: var(--w98-blue);
}
.pe-path button[aria-current="page"] { color: #000; text-decoration: underline; }
.pe-disk {
  min-height: calc(34 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  background: var(--w98-yellow);
  color: var(--w98-blue);
  font-size: calc(16 * var(--u));
  font-weight: bold;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #555;
}
.pe-intro {
  color: #555;
  font-size: calc(14 * var(--u));
  margin: 0 0 calc(9 * var(--u));
}
.pe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(105 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
  align-items: stretch;
}
.pe-entry {
  min-width: 0;
  min-height: calc(100 * var(--u));
  border: 1px solid transparent;
  background: transparent;
  color: #000;
  padding: calc(5 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(3 * var(--u));
  text-align: center;
}
.pe-entry:hover,
.pe-entry:focus-visible,
.pe-entry.is-selected {
  border-color: var(--w98-blue);
  background: #e7e7ff;
  outline: 1px dotted #000;
  outline-offset: -3px;
}
.pe-folder {
  position: relative;
  display: block;
  width: calc(64 * var(--u));
  height: calc(54 * var(--u));
  margin-top: 0;
}
.pe-folder-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
}
.pe-folder.is-file {
  --paper: #f4f0e5;
  --paper-edge: #d6cfbd;
  width: calc(43 * var(--u));
  height: calc(53 * var(--u));
  margin-top: 0;
  border: calc(2 * var(--u)) solid #686868;
  background: var(--paper);
  box-shadow: inset calc(-8 * var(--u)) 0 0 var(--paper-edge), calc(2 * var(--u)) calc(2 * var(--u)) 0 #8d8d8d;
}
.pe-folder.is-file::before {
  content: '';
  position: absolute;
  left: auto;
  right: calc(-2 * var(--u));
  top: calc(-2 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-color: #686868;
  border-style: solid;
  border-width: 0 0 calc(2 * var(--u)) calc(2 * var(--u));
  background: var(--paper-edge);
}
.pe-folder.is-file.tone-0 { --paper: #f4f0e5; --paper-edge: #d6cfbd; }
.pe-folder.is-file.tone-1 { --paper: #e5edf1; --paper-edge: #bdcbd2; }
.pe-folder.is-file.tone-2 { --paper: #e8eee3; --paper-edge: #c3cfba; }
.pe-folder.is-file.tone-3 { --paper: #f1e6e3; --paper-edge: #d5bfba; }
.pe-folder.is-file.tone-4 { --paper: #ebe8f0; --paper-edge: #c8c2d2; }
.pe-entry.is-locked { color: #555; filter: grayscale(.72); }
.pe-folder.has-lock .pe-folder-img { filter: brightness(.48) grayscale(.35); }
.pe-folder .pe-lock {
  position: absolute;
  right: calc(-4 * var(--u));
  bottom: calc(-2 * var(--u));
  display: grid;
  place-items: center;
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  background: var(--w98-gray-l);
  border: calc(1 * var(--u)) solid #333;
  color: #111;
  font-family: var(--f-sys);
  font-size: calc(17 * var(--u));
  filter: none;
}
.pe-entry-name {
  width: 100%;
  font-size: calc(15 * var(--u));
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.pe-entry-kind { color: #777; font-size: calc(11 * var(--u)); line-height: 1; }
.pe-preview {
  margin-top: calc(10 * var(--u));
  min-height: calc(72 * var(--u));
  padding: calc(8 * var(--u));
  border: calc(2 * var(--u)) solid;
  border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2);
  background: #f5f5f2;
  font-size: calc(14 * var(--u));
}
.pe-preview-head { color: var(--w98-blue); font-size: calc(19 * var(--u)); line-height: 1; }
.pe-preview-kicker { color: #555; margin: calc(2 * var(--u)) 0 calc(5 * var(--u)); }
.pe-preview p { line-height: 1.15; }
.pe-preview-tags { color: #777; margin-top: calc(5 * var(--u)); }
.pe-preview-empty { color: #777; }

.pe-nav:focus-visible,
.pe-path button:focus-visible,
.pe-disk:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }

/* About */
.ab-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ab-ava {
  width: calc(56 * var(--u)); height: calc(56 * var(--u));
  background: var(--w98-blue);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #000; flex-shrink: 0;
  overflow: hidden;
}
.ab-ava img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ab-name { font-family: var(--f-mono); font-size: calc(22 * var(--u)); color: #000; line-height: 1; }
.ab-role { font-family: var(--f-mono); font-size: calc(15 * var(--u)); color: var(--w98-blue); margin-top: 2px; font-weight: bold; }
.ab-loc { font-family: var(--f-mono); font-size: calc(13 * var(--u)); color: #555; margin-top: 2px; }
.ab-bio { font-size: calc(14 * var(--u)); color: #111; margin: 4px 0 10px; }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.ab-stat {
  background: #f5f5f2;
  border: 1px solid var(--w98-lo);
  box-shadow: inset 1px 1px 0 var(--w98-white);
  padding: 6px 4px; text-align: center;
}
.ab-n { font-family: var(--f-mono); font-size: calc(22 * var(--u)); color: var(--w98-blue); line-height: 1; }
.ab-l { font-size: calc(12 * var(--u)); color: #555; margin-top: 2px; }
/* Топ-скиллы — сегментированные прогресс-бары в духе инсталлятора Win95:
   синие квадратики в «утопленной» рамке. Ширина заливки — inline-переменная --lvl. */
.ab-skbars { display: grid; gap: calc(5 * var(--u)); margin: 6px 0 8px; }
.skb { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.skb-name {
  font-family: var(--f-mono);
  font-size: calc(14 * var(--u));
  color: #111;
  flex: 0 0 calc(118 * var(--u));
  line-height: 1.1;
}
.skb-bar {
  flex: 1;
  height: calc(14 * var(--u));
  background: #fff;
  border: 1px solid;
  border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo);
  padding: 2px;
}
.skb-fill {
  display: block;
  height: 100%;
  width: var(--lvl, 50%);
  background: repeating-linear-gradient(
    90deg,
    var(--w98-blue) 0,
    var(--w98-blue) calc(6 * var(--u)),
    transparent calc(6 * var(--u)),
    transparent calc(8 * var(--u))
  );
  animation: skb-grow .6s ease-out;
}
@keyframes skb-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .skb-fill { animation: none; }
}

.ab-skills { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.sk {
  font-family: var(--f-mono); font-size: calc(13 * var(--u));
  background: #eaeaea; border: 1px solid var(--w98-lo);
  padding: 2px 7px; color: #111; line-height: 1.1;
}
.edu-name { font-size: calc(15 * var(--u)); color: #000; font-weight: bold; font-family: var(--f-mono); }
.edu-sub { font-size: calc(13 * var(--u)); color: #444; margin-top: 1px; }

/* CTA в конце about — «default button» Win95: чёрная внешняя обводка,
   иконка телеги, мигающий курсор. Ховер — жёлтый, как у карточек контактов. */
.ab-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: fit-content;
  margin: calc(10 * var(--u)) auto 4px;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  background: var(--w98-gray);
  color: #000;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: calc(16 * var(--u));
  font-weight: bold;
  line-height: 1.2;
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo) var(--w98-lo) var(--w98-white);
  outline: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  transition: background .08s;
}
.ab-cta .cta-ico {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  object-fit: contain;
}
.ab-cta .cta-cursor { animation: t-blink 1s steps(1) infinite; }
.ab-cta:hover { background: var(--w98-yellow); }
.ab-cta:active {
  border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}

/* Contact */
.c-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 2px 0; }
.c-card {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: #f8f8f4;
  border: 1px solid var(--w98-lo);
  box-shadow: inset 1px 1px 0 var(--w98-white);
  text-decoration: none; color: #000;
  transition: background .08s;
}
.c-card:hover { background: var(--w98-yellow); }
.c-ico {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  background: #fff; border: 1px solid var(--w98-lo);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(22 * var(--u)); flex-shrink: 0;
}
.c-ico img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.c-body { flex: 1; min-width: 0; }
.c-lbl { font-family: var(--f-mono); font-size: calc(13 * var(--u)); color: #888; line-height: 1; }
.c-val { font-family: var(--f-mono); font-size: calc(17 * var(--u)); color: var(--w98-blue); line-height: 1.1; margin: 2px 0; font-weight: bold; }
.c-hint { font-size: calc(12 * var(--u)); color: #555; }
.c-foot {
  display: flex; justify-content: space-between;
  font-size: calc(13 * var(--u)); color: #444;
  margin-top: 6px;
}
.st-ok { color: var(--green-dim); font-weight: bold; }

/* Фейковый терминал — чёрная консоль, CRT-зелёный вывод, «утопленная» Win95-рамка.
   Строки появляются по очереди (анимация перезапускается при каждом открытии вкладки,
   т.к. display:none → block рестартует CSS-анимации). */
.c-term {
  margin: calc(6 * var(--u)) 0 2px;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  background: #000;
  border: 2px solid;
  border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo);
  font-family: var(--f-mono);
  font-size: calc(14 * var(--u));
  line-height: 1.3;
  color: var(--green);
  text-shadow: 0 0 4px rgba(0, 255, 65, .4);
  overflow: hidden;
  white-space: nowrap;
}
.t-line { opacity: 0; animation: t-appear .01s steps(1) forwards; }
.t-line.t1 { animation-delay: .2s; }
.t-line.t2 { animation-delay: .7s; }
.t-line.t3 { animation-delay: 1.2s; }
.t-dim { color: var(--green-dim); }
.t-cursor { animation: t-blink 1s steps(1) infinite; }
@keyframes t-appear { to { opacity: 1; } }
@keyframes t-blink { 50% { opacity: 0; } }
/* Анимации отключены системно — показываем все строки сразу, без мигания */
@media (prefers-reduced-motion: reduce) {
  .t-line { opacity: 1; animation: none; }
  .t-cursor { animation: none; }
  #poke-win { animation: none; }
}

/* Новый широкий CRT оставляет больше полезной площади, поэтому домашний экран
   и контакты на десктопе используют увеличенный масштаб. Мобильные размеры
   ниже заданы отдельно и этим блоком не затрагиваются. */
@media (min-width: 769px) {
  .home-head { padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(14 * var(--u)); }
  .hero-name {
    font-size: calc(32 * var(--u));
    margin-bottom: calc(14 * var(--u));
  }
  .hero-role {
    font-size: calc(28 * var(--u));
    margin-bottom: calc(10 * var(--u));
  }
  .hero-bio,
  .hero-bio b { font-size: calc(20 * var(--u)); }
  .hero-bio { padding: calc(7 * var(--u)) calc(12 * var(--u)); }
  .home-icons {
    grid-template-columns: repeat(5, 1fr);
    gap: calc(12 * var(--u));
    padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  }
  .mw-icon { gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(3 * var(--u)); }
  .mw-icon-img,
  .mw-icon-img img,
  .mw-icon-img .folder-svg {
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
  }
  .mw-icon-lbl {
    max-width: calc(136 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .mw-section[data-sec="contact"] .sec-h {
    font-size: calc(32 * var(--u));
    margin-bottom: calc(16 * var(--u));
    padding-bottom: calc(5 * var(--u));
  }
  .c-grid { gap: calc(12 * var(--u)); }
  .c-card {
    gap: calc(16 * var(--u));
    padding: calc(13 * var(--u)) calc(16 * var(--u));
  }
  .c-ico {
    width: calc(58 * var(--u));
    height: calc(58 * var(--u));
    font-size: calc(30 * var(--u));
  }
  .c-ico img {
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
  }
  .c-lbl { font-size: calc(17 * var(--u)); }
  .c-val { font-size: calc(23 * var(--u)); margin: calc(3 * var(--u)) 0; }
  .c-hint { font-size: calc(16 * var(--u)); }
  .c-term {
    margin: calc(12 * var(--u)) 0 calc(6 * var(--u));
    padding: calc(11 * var(--u)) calc(14 * var(--u));
    font-size: calc(18 * var(--u));
  }
  .c-foot {
    margin-top: calc(10 * var(--u));
    font-size: calc(17 * var(--u));
  }
}

/* Status bar */
.mw-statusbar {
  flex-shrink: 0;
  height: calc(20 * var(--u));
  background: #ece9d8;
  border-top: 1px solid var(--w98-white);
  box-shadow: inset 0 1px 0 var(--w98-lo);
  display: flex; align-items: center;
  padding: 0 6px;
  font-family: var(--f-mono);
  font-size: calc(13 * var(--u));
  color: #444;
  gap: 8px;
}
.mw-sb-item {
  padding: 0 4px;
  border-left: 1px solid var(--w98-lo);
  box-shadow: inset 1px 0 0 var(--w98-white);
  height: calc(15 * var(--u));
  display: flex; align-items: center;
}
.mw-sb-item:first-child { border-left: none; box-shadow: none; }
.mw-sb-flex { flex: 1; }

/* ═══════════════ MODALS (games, trash) ═══════════════ */
#games-modal, #trash-modal {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sys);
}
#games-modal.hidden, #trash-modal.hidden.hidden { display: none; }
.gm-frame {
  width: 560px; max-width: 92vw; max-height: 82vh;
  background: var(--w98-gray);
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  display: flex; flex-direction: column;
}
.gm-titlebar {
  height: 22px;
  background: linear-gradient(to right, var(--w98-blue) 0%, var(--w98-blue2) 100%);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 2px 0 3px;
  font-size: 11px; font-weight: bold;
  flex-shrink: 0;
}
.gm-tb-left { display: flex; align-items: center; gap: 5px; flex: 1; }
.gm-body {
  padding: 14px;
  overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.gm-game {
  background: #fff;
  border: 1px solid var(--w98-lo2);
  box-shadow: inset 1px 1px 0 var(--w98-white);
  padding: 10px; text-align: center;
  font-family: var(--f-mono);
}
.gm-title { font-family: var(--f-mono); font-size: 18px; color: var(--w98-blue); margin-bottom: 8px; }
.gm-status { font-family: var(--f-mono); font-size: 15px; color: #333; margin: 6px 0; }
.gm-btn {
  background: var(--w98-gray);
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo) var(--w98-lo) var(--w98-white);
  padding: 3px 10px;
  font-family: var(--f-mono); font-size: 15px;
  margin: 4px 2px;
}
.gm-btn:active { border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo); }
.c-val { overflow-wrap: anywhere; }

.ttt-grid {
  display: grid; grid-template-columns: repeat(3, 44px);
  gap: 3px; justify-content: center; margin: 8px auto;
}
.ttt-cell {
  width: 44px; height: 44px;
  background: #fff;
  border: 2px solid;
  border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo);
  font-family: var(--f-mono); font-size: 30px; color: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
}
.ttt-cell.x { color: var(--w98-blue); }
.ttt-cell.o { color: var(--red); }
.snake-row { display: flex; justify-content: space-around; margin-bottom: 4px; }
#snake-canvas {
  background: #000;
  border: 2px solid;
  border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo);
  display: block; margin: 0 auto;
  image-rendering: pixelated;
}
.snake-dpad {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; margin-top: 8px;
}
.dpad-row { display: flex; gap: 12px; }
.dpad {
  width: 36px; height: 28px;
  background: var(--w98-gray);
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo) var(--w98-lo) var(--w98-white);
  font-size: 14px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.dpad:active { border-color: var(--w98-lo) var(--w98-white) var(--w98-white) var(--w98-lo); }

.tm-frame {
  width: 420px;
  background: var(--w98-gray);
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
}
.tm-body {
  background: #fff;
  padding: 30px 20px; margin: 6px;
  border: 1px solid var(--w98-lo);
  box-shadow: inset 1px 1px 0 #eee;
  text-align: center;
}
.tm-p { font-family: var(--f-mono); font-size: 18px; color: #000; margin-bottom: 6px; }
.tm-p.dim { font-size: 14px; color: #666; }

.hidden { display: none !important; }

/* ═══════════════ POKE WINDOW — окошко-шутка при клике по сцене ═══════════════
   Маленький Win95-диалог в точке клика. Ненавязчивый: сам тает через 4с,
   закрывается кликом в любое место окошка. Один экземпляр на страницу. */
#poke-win {
  position: fixed;
  z-index: 3000; /* над сценой, под модалками (4000+) */
  max-width: 250px;
  background: var(--w98-gray);
  border: 2px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  font-family: var(--f-sys);
  animation: pw-in .12s ease-out;
}
.pw-tb {
  height: 18px;
  background: linear-gradient(to right, var(--w98-blue), var(--w98-blue2));
  color: #fff;
  display: flex; align-items: center;
  gap: 6px;
  padding: 0 2px 0 6px;
  font-size: 10px; font-weight: bold;
  user-select: none;
}
.pw-title { flex: 1; white-space: nowrap; }
.pw-close {
  width: 14px; height: 12px;
  background: var(--w98-gray);
  border: 1px solid;
  border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
  color: #000;
  font-family: var(--f-sys); font-size: 9px;
  line-height: 1; padding: 0 0 1px;
  display: flex; align-items: center; justify-content: center;
}
.pw-body {
  padding: 8px 11px 9px;
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.25;
  color: #000;
}
@keyframes pw-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════ РЕТРО-КУРСОРЫ WIN95 ═══════════════
   Пиксельные PNG 2×-масштаба. Fallback на системные, если PNG не загрузился.
   Hotspot стрелки — остриё (0,0), руки — кончик указательного пальца. */
html, body { cursor: url('cursor-arrow.png') 0 0, auto; }
a, button, .mw-icon, .ttt-cell { cursor: url('cursor-hand.png') 12 0, pointer; }
/* Муляжные кнопки титлбара — обычная стрелка, как у некликабельного */
.ft-btn { cursor: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤ 768px) — портретная сцена, CRT показывает только home,
   другие табы открываются в fullscreen-модалке.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Сцена заполняет ВСЮ ширину — никаких белых рамок по краям.
     Убираем overhead_x (border+padding+inner border), оставляем
     только высоту титлбара. Аспект перевёрнут: 941 / 1672. */
  :root {
    --frame-overhead-x: 0px;
    --frame-overhead-y: 26px;
    /* fallback для старых браузеров без dvh */
    --stage-w: min(calc(100vw - var(--frame-overhead-x)), calc((100vh - var(--frame-overhead-y)) * 941 / 1672));
    --stage-h: min(calc(100vh - var(--frame-overhead-y)), calc((100vw - var(--frame-overhead-x)) * 1672 / 941));
    /* dvh учитывает динамические UI (тулбар Telegram WebView, address bar Safari) */
    --stage-w: min(calc(100vw - var(--frame-overhead-x)), calc((100dvh - var(--frame-overhead-y)) * 941 / 1672));
    --stage-h: min(calc(100dvh - var(--frame-overhead-y)), calc((100vw - var(--frame-overhead-x)) * 1672 / 941));
    --titlebar-h: 26px;
    /* Мобильная вёрстка фиксированная — масштаб контента отключён */
    --u: 1px;
  }

  /* Убираем win95-окантовку scene-frame на мобилке — на телефоне она
     только крадёт место и выглядит как "белая пятно по краям". */
  #scene-frame {
    border: 0;
    padding: 0;
    box-shadow: 0 2px 14px rgba(0,0,0,.5);
  }
  #frame-body {
    border: 0;
    margin-top: 0;
  }

  #frame-titlebar { height: 26px; padding: 0 3px 0 5px; gap: 6px; }
  #frame-titlebar .ft-icon { width: 17px; height: 17px; font-size: 10px; }
  #frame-titlebar .ft-title { font-size: 12px; }
  .ft-clock-lbl { font-size: 10px; letter-spacing: 1px; }
  .ft-clock { font-size: 15px; }
  .ft-btn { width: 17px; height: 15px; font-size: 9px; }
  .ft-close { font-size: 11px; }
  #frame-titlebar .ft-right { gap: 6px; }

  /* Расширенный touch target 44×44 — визуал кнопки не меняем,
     но кликабельная область становится комфортной для пальца. */
  .ft-btn, .mw-tb-btn { position: relative; }
  .ft-btn::before,
  .mw-tb-btn::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Мобильная сцена */
  #desk-bg {
    background-image: url('scene-mobile.png?v=1');
  }

  /* Границы чёрного CRT-экрана на мобильном фоне: x=102..844, y=415..1023. */
  #monitor-win {
    left:   9.9%;
    top:    24.9%;
    width:  75.6%;
    height: 35.9%;
    /* На мобилке рамка CRT на bg уже квадратная — без закругления */
    border-radius: 0;
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.4),
      inset -1px -1px 0 rgba(0,0,0,.25),
      0 2px 8px rgba(0,0,0,.6),
      0 0 14px rgba(0,255,65,.08);
    animation: none;
  }
  /* ::before vignette наследует border-radius: inherit — тоже станет 0 */

  /* Внутри крохотного CRT на мобиле — имя, роль и сетка иконок.
     Прячем: титлбар монитор-окна, табы, статусбар, био. */
  #monitor-win .mw-titlebar { display: none; }
  #monitor-win .mw-tabs { display: none; }
  #monitor-win .mw-statusbar { display: none; }
  #monitor-win .hero-bio { display: none; }

  /* Роль под именем — кто это, видно с первого экрана.
     Строго одна строка: перенос выдавливает подписи нижнего ряда иконок за край CRT. */
  #monitor-win .hero-role {
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin: 1px 0 0;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .65);
  }
  /* Шестая иконка «Контакты» — сетка становится ровной 3×2 */
  .mw-icon[data-app="contact"] { display: flex; }

  .mw-body {
    padding: 0;
    overflow: hidden;
  }

  /* Пиксельные горы с затемнением для читаемости текста и иконок. */
  .mw-section.home-desk {
    display: flex !important;
    flex-direction: column;
    margin: 0;
    min-height: 100%;
    height: 100%;
    animation: none;
    background-image:
      linear-gradient(rgba(0,0,20,.30), rgba(0,0,20,.45)),
      url('wallpaper-mountains.png');
    background-size: cover;
    background-position: center;
    background-color: #2c5a8b;
    padding: 0;
  }

  .home-head {
    padding: 5px 4px 3px;
    text-align: center;
    flex-shrink: 0;
  }
  /* Имя в ОДНУ строку (десктопный <br> скрыт) — освобождает вертикаль под иконки */
  .hero-name br { display: none; }
  .hero-name {
    font-size: 16px;
    letter-spacing: .6px;
    margin: 0;
    line-height: 1.35;
    text-shadow: 1px 1px 0 rgba(0,0,0,.7);
  }

  /* Сетка 3×2 — увеличенные ярлыки помещаются в новый широкий мобильный CRT. */
  .home-icons {
    flex: 1;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 0 3px 1px;
    align-content: start;
    overflow: hidden;
  }
  .mw-icon {
    padding: 0;
    gap: 1px;
    border-width: 0;
    min-width: 0;
  }
  .mw-icon-img { width: 68px; height: 68px; }
  .mw-icon-img img, .mw-icon-img .folder-svg { width: 68px; height: 68px; }
  /* Telegram на мобилке — тот же размер, что и остальные */
  .mw-icon[data-app="telegram"] .mw-icon-img,
  .mw-icon[data-app="telegram"] .mw-icon-img img { width: 68px; height: 68px; }
  .mw-icon-lbl {
    font-size: 13px;
    max-width: 100%;
    padding: 0;
    margin-top: 0;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
      1px 1px 0 #000,
      -1px 1px 0 #000,
      1px -1px 0 #000,
      -1px -1px 0 #000;
  }

  /* Mobile fullscreen modal — появляется при клике по иконке */
  #mobile-modal {
    position: fixed; inset: 0; z-index: 4000;
    display: flex;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.55);
    padding: 8px;
    animation: mm-in .18s ease-out;
  }
  #mobile-modal.hidden { display: none; }
  @keyframes mm-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
  }
  .mm-frame {
    width: 100%;
    height: 100%;
    background: var(--w98-gray);
    border: 2px solid;
    border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
    box-shadow:
      inset -2px -2px 0 var(--w98-lo),
      inset  2px  2px 0 var(--w98-hi),
      0 2px 12px rgba(0,0,0,.6);
    padding: 2px;
    display: flex; flex-direction: column;
    font-family: var(--f-sys);
  }
  .mm-titlebar {
    height: 26px;
    flex-shrink: 0;
    background: linear-gradient(to right, var(--w98-blue) 0%, var(--w98-blue2) 100%);
    color: #fff;
    display: flex; align-items: center;
    padding: 0 3px 0 5px;
    gap: 6px;
    user-select: none;
  }
  .mm-tb-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .mm-tb-title {
    font-size: 13px; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  }
  #mm-close { width: 22px; height: 20px; font-size: 14px; }

  .mm-body {
    flex: 1;
    background: #fff;
    border: 2px solid;
    border-color: var(--w98-lo2) var(--w98-white) var(--w98-white) var(--w98-lo2);
    margin-top: 2px;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 12px 14px;
    font-family: var(--f-mono);
    font-size: 17px;
    color: #0a0a0a;
    line-height: 1.3;
  }
  /* Все дочерние, которые не задали свой font-family явно, — пиксельным VT323.
     Исключения (.p-my ярлычок, .sk-бейдж и т.д.) уже имеют свой f-mono. */
  .mm-body * { font-family: inherit; }
  /* но заголовок секции — пиксельным Press Start 2P (как якорь раздела) */
  .mm-body .sec-h { font-family: var(--f-pixel); }
  /* Крестик на кнопке закрытия — шрифт system-sans, чтобы глиф рендерился красиво */
  #mm-close { font-family: var(--f-sys); }
  .mm-body::-webkit-scrollbar { width: 14px; }
  .mm-body::-webkit-scrollbar-track { background: #d4d0c8; }
  .mm-body::-webkit-scrollbar-thumb {
    background: var(--w98-gray);
    border: 1px solid var(--w98-lo);
  }

  /* Контент внутри модалки — разрешаем display:block всем секциям */
  .mm-body .mw-section { display: block !important; animation: none; }
  .mm-body .sec-h { font-size: 18px; margin-bottom: 10px; letter-spacing: 1px; }
  /* Счётчик объектов — отдельной строкой под заголовком, а не впритык к нему */
  .mm-body .sec-h-cnt { float: none; display: block; font-size: 12px; margin-top: 3px; }
  .mm-body .pe-toolbar {
    top: -12px;
    margin-inline: -4px;
    padding: 8px 4px 6px;
    gap: 5px;
  }
  .mm-body .pe-nav,
  .mm-body .pe-path button,
  .mm-body .pe-disk { min-height: 44px; font-size: 15px; }
  .mm-body .pe-nav { flex-basis: 44px; }
  .mm-body .pe-disk { padding-inline: 8px; }
  .mm-body .pe-intro { font-size: 16px; margin-bottom: 12px; }
  .mm-body .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mm-body .pe-entry { min-height: 130px; padding: 8px 4px; }
  .mm-body .pe-folder { width: 76px; height: 64px; margin-top: 0; }
  .mm-body .pe-folder.is-file { width: 50px; height: 62px; margin-top: 0; }
  .mm-body .pe-entry-name { font-size: 17px; line-height: 1.05; }
  .mm-body .pe-entry-kind { font-size: 13px; }
  .mm-body .pe-preview { min-height: 104px; margin-top: 12px; padding: 10px; font-size: 16px; }
  .mm-body .pe-preview-head { font-size: 21px; }
  .mm-body .pe-preview-tags { font-size: 14px; }
  .mm-body .ab-name { font-size: 20px; }
  .mm-body .c-card { padding: 10px 12px; }
  .mm-body .c-val { font-size: 17px; }
  /* Терминал в мобильной модалке — шрифт чуть меньше, чтобы строки не обрезались */
  .mm-body .c-term { font-size: 15px; }

  /* CTA в about-модалке — крупнее под палец (тач-таргет ~44px) */
  .mm-body .ab-cta { font-size: 17px; padding: 12px 18px; }
  .mm-body .ab-cta .cta-ico { width: 22px; height: 22px; }
  /* Бары скиллов в модалке — фиксированные размеры мобильной вёрстки */
  .mm-body .skb-name { font-size: 15px; flex-basis: 124px; }
  .mm-body .skb-bar { height: 15px; }

  /* Чёрные поля сверху/снизу сцены: едва заметные CRT-полосы,
     чтобы letterbox выглядел намеренным, а не пустым */
  body::before {
    content: '';
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, .022) 0px, rgba(255, 255, 255, .022) 1px,
      transparent 1px, transparent 4px
    );
  }

  /* Увеличиваем крестик на мобильной модалке — чтобы было удобно тапнуть */
  #mm-close { width: 32px; height: 24px; font-size: 17px; }
  .mm-titlebar { height: 30px; }
  .mm-tb-title { font-size: 14px; }

  /* ── Игры-модалка на мобилке: FULLSCREEN + фиксированный титлбар ──
     100dvh (dynamic viewport height) — корректно учитывает URL-bar Safari,
     из-за которого 100vh раньше был больше visible-области и D-pad уезжал
     за край. safe-area-inset-bottom — страховка от home-bar iOS. */
  #games-modal { padding: 0; align-items: stretch; justify-content: stretch; }
  .gm-frame {
    width: 100%;
    max-width: 100%;
    height: 100vh;    /* fallback для старых браузеров */
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-width: 0;
  }
  .gm-titlebar { height: 30px; padding: 0 3px 0 5px; font-size: 13px; }
  .gm-titlebar .mw-tb-icon { width: 18px; height: 18px; font-size: 10px; }
  .gm-titlebar .mw-tb-btn { width: 32px; height: 24px; font-size: 17px; }
  .gm-body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Снейк и крестики — чуть компактнее, чтобы без скролла влезла хотя бы
     ОДНА полноразмерная игра (вторая — скроллом ниже). */
  #snake-canvas { width: 180px; height: 180px; }
  .ttt-grid { grid-template-columns: repeat(3, 40px); }
  .ttt-cell { width: 40px; height: 40px; font-size: 26px; }
  .snake-dpad { gap: 4px; margin-top: 6px; }
  .dpad { width: 44px; height: 32px; font-size: 16px; }


  /* Корзина — маленькая всплывашка по центру, не fullscreen */
  #trash-modal {
    padding: 20px;
    align-items: center;
    justify-content: center;
  }
  .tm-frame {
    width: auto;
    min-width: 240px;
    max-width: 84vw;
    height: auto;
    max-height: 60vh;
    border-width: 2px;
    display: block;
  }
  .tm-frame .gm-titlebar { height: 24px; padding: 0 2px 0 4px; font-size: 11px; }
  .tm-frame .gm-titlebar .mw-tb-icon { width: 15px; height: 15px; font-size: 9px; }
  .tm-frame .gm-titlebar .mw-tb-btn { width: 22px; height: 18px; font-size: 13px; }
  .tm-body { padding: 22px 18px; margin: 4px; }
  .tm-p { font-size: 16px; }
}

/* Промежуточный брейкпоинт (≤ 480px — большинство телефонов в портрете). */
@media (max-width: 480px) {
  .hero-name { font-size: 16px; }
}

/* Очень узкий (≤ 360px — iPhone SE 1st 320px, старые Android 360px).
   На iPhone SE 1st (320×568) CRT width = 137px → колонка (137-6-4)/3 = 42.3
   → иконка 40 с запасом 1px. */
@media (max-width: 360px) {
  .mw-icon-img { width: 40px; height: 40px; }
  .mw-icon-img img, .mw-icon-img .folder-svg { width: 40px; height: 40px; }
  .mw-icon[data-app="telegram"] .mw-icon-img,
  .mw-icon[data-app="telegram"] .mw-icon-img img { width: 40px; height: 40px; }
  .mw-icon-lbl { font-size: 8px; }
  .hero-name { font-size: 10px; }
}

/* In-app browsers (Telegram WebView, VK, Instagram) имеют статичный нижний
   тулбар, который сжимает viewport до ~660-720px на iPhone Pro. CRT-окно
   рассчитано впритык под 52px иконки на 844-вьюпорте, и при сжатии CRT
   подписи нижнего ряда ("Игры"/"Корзина") не влезают.
   На низкой высоте — компактный layout с 44px-иконками.

   Активация — два пути:
   1) JS-класс body.compact-vh (в app.js через window.innerHeight) —
      ОСНОВНОЙ путь, работает в Telegram WebView, где media-query height врёт.
   2) @media (max-height: 740px) — fallback, если JS почему-то не сработал. */
@media (max-width: 768px) {
  body.compact-vh .home-head { padding: 4px 4px 2px; }
  body.compact-vh .hero-name { font-size: 14px; line-height: 1.3; }
  body.compact-vh #monitor-win .hero-role { font-size: 12px; }
  body.compact-vh .home-icons { gap: 1px; padding: 0 3px 2px; }
  body.compact-vh .mw-icon { gap: 1px; }
  body.compact-vh .mw-icon-img,
  body.compact-vh .mw-icon-img img,
  body.compact-vh .mw-icon-img .folder-svg { width: 54px; height: 54px; }
  body.compact-vh .mw-icon[data-app="telegram"] .mw-icon-img,
  body.compact-vh .mw-icon[data-app="telegram"] .mw-icon-img img { width: 54px; height: 54px; }
  body.compact-vh .mw-icon-lbl { font-size: 11px; }
}

@media (max-width: 768px) and (max-height: 740px) and (orientation: portrait) {
  .home-head { padding: 4px 4px 2px; }
  .hero-name { font-size: 14px; line-height: 1.3; }
  #monitor-win .hero-role { font-size: 12px; }
  .home-icons { gap: 1px; padding: 0 3px 2px; }
  .mw-icon { gap: 1px; }
  .mw-icon-img,
  .mw-icon-img img,
  .mw-icon-img .folder-svg { width: 54px; height: 54px; }
  .mw-icon[data-app="telegram"] .mw-icon-img,
  .mw-icon[data-app="telegram"] .mw-icon-img img { width: 54px; height: 54px; }
  .mw-icon-lbl { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ROTATE-DEVICE OVERLAY — landscape блокировщик
   Aspect-locked сцена 1672:941 в горизонтальной ориентации телефона
   сжимается до нечитаемой полоски. Просим пользователя повернуть.
═══════════════════════════════════════════════════════════════════ */
#rotate-overlay { display: none; }

@media (max-height: 500px) and (orientation: landscape) {
  #rotate-overlay {
    display: flex;
    position: fixed; inset: 0;
    z-index: 9999;
    background: #008080; /* классический Win98 desktop teal */
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--f-sys);
  }
  .ro-frame {
    background: var(--w98-gray);
    border: 2px solid;
    border-color: var(--w98-white) var(--w98-lo2) var(--w98-lo2) var(--w98-white);
    box-shadow: 1px 1px 0 #000, 2px 2px 0 #000;
    min-width: 260px;
    max-width: 90vw;
  }
  .ro-tb {
    background: linear-gradient(to right, #000080 0%, #1084d0 100%);
    color: #fff;
    padding: 3px 4px 3px 5px;
    height: 22px;
    display: flex; align-items: center;
    font-size: 12px; font-weight: bold;
  }
  .ro-tb-left { display: flex; align-items: center; gap: 6px; }
  .ro-tb-icon {
    width: 16px; height: 16px;
    background: #ff0;
    color: #000;
    border: 1px solid #000;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: bold;
    line-height: 1;
  }
  .ro-tb-title { letter-spacing: 0.3px; }
  .ro-body {
    padding: 18px 22px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .ro-icon {
    font-size: 36px;
    line-height: 1;
    color: #000;
    animation: ro-spin 2.4s linear infinite;
  }
  @keyframes ro-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .ro-text {
    margin: 0;
    font-size: 14px;
    color: #000;
    line-height: 1.35;
  }
  /* На landscape блокируем все клики и скролл по сцене (overlay поверх) */
  body { overflow: hidden; }
}