/* ============================================================
   Y SYSTEM — внешний вид консоли и кинескопа
   Экран рисуется в «родном» разрешении 640×480 (4:3, как у
   настоящего телевизора) и масштабируется целиком.
   ============================================================ */
@font-face { font-family: 'Exo 2'; src: url('../fonts/Exo2.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: 'Exo 2'; src: url('../fonts/Exo2-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: block; }
@font-face { font-family: 'Pixel'; src: url('../fonts/PressStart2P-Regular.woff2') format('woff2'); font-display: block; }
/* Иероглифы (китайская версия). Отдельные семейства стоят в каждом font-family сразу после основного шрифта;
   браузер скачивает их, только когда на странице есть иероглифы (unicode-range). Файлы — урезанные, собирает tools/zh_fonts.py.
   Наклон у заголовков браузер делает сам — так решил Y. Пиксельный шрифт увеличен (size-adjust): его сетка 12 px, у Press Start 2P — 8 px. */
@font-face { font-family: 'ZH Sans'; src: url('../fonts/zh/NotoSansSC-400.woff2') format('woff2'); font-weight: 100 550; font-display: swap; unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+3190-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: 'ZH Sans'; src: url('../fonts/zh/NotoSansSC-700.woff2') format('woff2'); font-weight: 551 750; font-display: swap; unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+3190-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: 'ZH Sans'; src: url('../fonts/zh/NotoSansSC-900.woff2') format('woff2'); font-weight: 751 1000; font-display: swap; unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+3190-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: 'ZH Label'; src: url('../fonts/zh/NotoSansSC-label.woff2') format('woff2'); font-display: swap; unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+3190-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }   /* только «中文» на кнопке языка */
@font-face { font-family: 'ZH Pixel'; src: url('../fonts/zh/FusionPixel-12px-SC.woff2') format('woff2'); font-display: block; size-adjust: 200%; unicode-range: U+2E80-2FDF, U+3000-303F, U+3100-312F, U+3190-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
/* иврит: Rubik (переменный, 300–900, с настоящим курсивом) — пара к Exo 2; свой пиксельный шрифт (tools/he_pixel_font.py) — пара к Press Start 2P.
   Грузятся, только когда на странице есть еврейские буквы (unicode-range); весят ~10 КБ и ~1 КБ */
@font-face { font-family: 'HE Sans'; src: url('../fonts/he/Rubik-Hebrew.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: 'HE Sans'; src: url('../fonts/he/Rubik-Hebrew-Italic.woff2') format('woff2'); font-weight: 100 1000; font-style: italic; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: 'HE Pixel'; src: url('../fonts/he/YPixelHebrew.woff2') format('woff2'); font-display: block; unicode-range: U+0590-05FF, U+FB1D-FB4F; }

:root {
  --night: #050918;
  --deep: #0b1535;
  --panel: #111f4f;
  --edge: #2b3d7e;
  --text: #edf2ff;
  --dim: #8e9ccc;
  --faint: #56639a;
  --cyan: #58f0ff;
  --mag: #ff5bd6;
  --yel: #ffd84d;
  --plat: #d6ecff;
  --gold: #ffcf45;
  --silver: #c3cde0;
  --bronze: #d9894a;
  --chroma: -2px 1px 0 rgba(88, 240, 255, .75), 2px 2px 0 rgba(255, 91, 214, .65), 0 3px 0 rgba(255, 216, 77, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 40%, #151826 0%, #07080d 70%);
  color: var(--text); overflow: hidden;
  font-family: 'Exo 2', 'ZH Sans', 'HE Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- корпус телевизора ---------------- */
#wrap { position: fixed; inset: 0; display: grid; place-items: center; }
#tv {
  position: absolute; left: 50%; top: 50%; width: 736px; height: 612px; padding: 44px 48px 88px;
  border-radius: 46px 46px 40px 40px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, #232327 0%, #141417 55%, #0d0d0f 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 2px 1px rgba(255,255,255,.08), inset 0 -6px 12px rgba(0,0,0,.6);
  transform-origin: center center;
}
#bezel {
  position: relative; width: 640px; height: 480px; border-radius: 30px / 26px;
  box-shadow: 0 0 0 10px #0a0a0c, 0 0 0 12px #26262b, inset 0 0 0 1px #000;
}
#tv-plate { position: absolute; left: 48px; right: 48px; bottom: 26px; height: 40px; display: flex; align-items: center; gap: 18px; }
#tv-plate .brand { font: italic 900 15px/1 'Exo 2', 'ZH Sans', 'HE Sans'; letter-spacing: .18em; color: #6c6f7a; }
#tv-plate .grille { flex: 1; height: 22px; background: repeating-linear-gradient(90deg, #0b0b0d 0 3px, #1d1d21 3px 6px); border-radius: 4px; opacity: .8; }
#tv-plate .knob { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4a52, #16161a 70%); box-shadow: 0 2px 4px rgba(0,0,0,.7); }
#led { width: 8px; height: 8px; border-radius: 50%; background: #3a0b0b; box-shadow: 0 0 0 2px #0b0b0d; transition: background .3s, box-shadow .3s; }
#tv.on #led { background: #ff3b2f; box-shadow: 0 0 0 2px #0b0b0d, 0 0 10px #ff3b2f; }
#hint {
  position: absolute; left: 0; right: 0; top: calc(100% + 18px); text-align: center;
  font: 500 14px/1.4 'Exo 2', 'ZH Sans', 'HE Sans'; color: #7e8499; letter-spacing: .02em; transition: opacity .6s;
}
#tv.on #hint { opacity: 0; }

/* ---------------- экран ---------------- */
#screen {
  position: absolute; inset: 0; overflow: hidden; border-radius: 30px / 26px;
  background: #020308; cursor: pointer;
}
#tv.on #screen { cursor: default; }
#stage { position: absolute; inset: 0; width: 640px; height: 480px; }
#stage.lit { background: var(--night); }

#bg { position: absolute; inset: 0; width: 640px; height: 480px; opacity: 0; transition: opacity 1.2s; }
#stage.menuing #bg { opacity: 1; }
#view { position: absolute; inset: 0; }

/* ---------------- слои кинескопа ---------------- */
.crt { position: absolute; inset: 0; pointer-events: none; }
.crt-scan { background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.30) 2px 3px); }
.crt-mask { background: repeating-linear-gradient(90deg, rgba(255,40,90,.06) 0 1px, rgba(40,255,140,.045) 1px 2px, rgba(60,120,255,.06) 2px 3px); mix-blend-mode: screen; }
.crt-roll { background: linear-gradient(to bottom, transparent, rgba(190,220,255,.07) 45%, rgba(190,220,255,.07) 55%, transparent); height: 90px; top: -90px; bottom: auto; animation: roll 9s linear infinite; }
#noise { width: 640px; height: 480px; image-rendering: pixelated; opacity: .045; mix-blend-mode: screen; }
.crt-vignette {
  background:
    radial-gradient(ellipse 80% 75% at 50% 48%, transparent 58%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 70% 40% at 28% 12%, rgba(255,255,255,.05), transparent 70%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.85), inset 0 0 12px rgba(0,0,0,.9);
}
#stage.lit .crt-glow { box-shadow: inset 0 0 120px rgba(80,140,255,.08); }
@keyframes roll { to { transform: translateY(620px); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .985; } 50% { opacity: .96; } 53% { opacity: .99; } }
#stage.lit #view { animation: flicker 5s infinite steps(1); }

/* лёгкие эффекты / без эффектов / меньше анимации */
#stage.fx-light .crt-scan { opacity: .45; }
#stage.fx-light .crt-mask, #stage.fx-light .crt-roll { display: none; }
#stage.fx-light #noise { opacity: .022; }
#stage.fx-off .crt-scan, #stage.fx-off .crt-mask, #stage.fx-off .crt-roll, #stage.fx-off #noise { display: none; }
#stage.fx-off #view { animation: none; }
#stage.reduced #view, #stage.reduced .crt-roll { animation: none; }
#stage.reduced .bob, #stage.reduced .blink, #stage.reduced .glint { animation: none !important; }

/* ---------------- включение / выключение ---------------- */
#power { position: absolute; inset: 0; background: #eaf4ff; opacity: 0; pointer-events: none; transform-origin: center; }
#power.on { animation: powerOn .55s ease-out forwards; }
#power.off { animation: powerOff .5s ease-in forwards; }
@keyframes powerOn {
  0% { opacity: 1; transform: scale(.02, .004); }
  35% { opacity: 1; transform: scale(1, .006); }
  70% { opacity: .9; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}
@keyframes powerOff {
  0%, 45% { opacity: 0; transform: scale(1, .006); }
  55% { opacity: 1; transform: scale(1, .006); }
  85% { opacity: 1; transform: scale(.02, .006); }
  100% { opacity: 0; transform: scale(0, 0); }
}
#static { position: absolute; inset: 0; opacity: 0; pointer-events: none; image-rendering: pixelated; width: 640px; height: 480px; }
#static.show { opacity: .9; }
#static.flash { animation: staticFlash .18s steps(3) forwards; }
@keyframes staticFlash { 0% { opacity: .75; } 60% { opacity: .35; } 100% { opacity: 0; } }
.jolt { animation: jolt .2s steps(4) 1; }
@keyframes jolt {
  0% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  25% { transform: translate(-6px, 2px); clip-path: inset(12% 0 30% 0); }
  50% { transform: translate(5px, -1px); clip-path: inset(40% 0 8% 0); }
  75% { transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); }
  100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
#stage.rainbow #view { animation: rainbow 3s linear 1; }
@keyframes rainbow { to { filter: hue-rotate(360deg); } }

/* ---------------- заставка с логотипом ---------------- */
#boot { position: absolute; inset: 0; display: none; background: #000; }
#boot.show { display: block; }
#boot .logo-wrap { position: absolute; left: 50%; top: 58px; width: 210px; height: 210px; margin-left: -105px; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
#boot.pressing .logo-wrap { transform: translateY(-14px) scale(.82); }
.ylogo { width: 100%; height: 100%; overflow: visible; }
.ylogo path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ylogo .core { stroke: #fbfdff; stroke-width: 6.5; }
.ylogo .halo { stroke: #9fdcff; stroke-width: 22; opacity: 0; filter: blur(10px); }
.ylogo .c { stroke: var(--cyan); stroke-width: 6; }
.ylogo .m { stroke: var(--mag); stroke-width: 6; }
.ylogo .yy { stroke: var(--yel); stroke-width: 6; }
.ylogo .glint { stroke: #fff; stroke-width: 3.5; stroke-dasharray: .05 .95; opacity: 0; }
#boot .core { stroke-dasharray: 1; stroke-dashoffset: 1; }
#boot .chroma path { opacity: 0; }
#boot.play .core { animation: draw 1.7s cubic-bezier(.6,.1,.3,1) .25s forwards, ignite .5s steps(1) 1.95s 1; }
#boot.play .halo { animation: haloIn .9s ease-out 2.3s forwards; }
#boot.play .c { animation: chromaC .7s cubic-bezier(.2,.9,.3,1.2) 2.2s forwards; }
#boot.play .m { animation: chromaM .7s cubic-bezier(.2,.9,.3,1.2) 2.3s forwards; }
#boot.play .yy { animation: chromaY .7s cubic-bezier(.2,.9,.3,1.2) 2.4s forwards; }
#boot.play .glint { animation: glint 3.2s linear 3.1s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ignite { 0% { opacity: .2; } 20% { opacity: 1; } 40% { opacity: .3; } 55% { opacity: 1; } 70% { opacity: .5; } 85%, 100% { opacity: 1; } }
@keyframes haloIn { to { opacity: .7; } }
@keyframes chromaC { from { opacity: 0; transform: translate(0, 0); } to { opacity: .95; transform: translate(-5px, 4px); } }
@keyframes chromaM { from { opacity: 0; transform: translate(0, 0); } to { opacity: .9; transform: translate(4px, 6px); } }
@keyframes chromaY { from { opacity: 0; transform: translate(0, 0); } to { opacity: .8; transform: translate(-1px, 9px); } }
@keyframes glint { 0% { opacity: .95; stroke-dashoffset: 1; } 70% { opacity: .95; stroke-dashoffset: 0; } 71%, 100% { opacity: 0; stroke-dashoffset: 0; } }
/* пропуск заставки: сразу финальный кадр */
#boot.done .core { stroke-dashoffset: 0; animation: none; }
#boot.done .halo { opacity: .7; animation: none; }
#boot.done .c { opacity: .95; transform: translate(-5px, 4px); animation: none; }
#boot.done .m { opacity: .9; transform: translate(4px, 6px); animation: none; }
#boot.done .yy { opacity: .8; transform: translate(-1px, 9px); animation: none; }
#boot.done .glint { animation: glint 3.2s linear .3s infinite; }

#boot .wordmark {
  position: absolute; left: 0; right: 0; top: 292px; text-align: center;
  font: italic 900 30px/1 'Exo 2', 'ZH Sans', 'HE Sans'; letter-spacing: .34em; padding-left: .34em; color: #fff;
  text-shadow: var(--chroma), 0 0 18px rgba(140, 200, 255, .45);
}
#boot .wordmark span { display: inline-block; opacity: 0; transform: translateY(8px); }
#boot.play .wordmark span { animation: letterIn .45s ease-out forwards; }
#boot.done .wordmark span { opacity: 1; transform: none; animation: none; }
@keyframes letterIn { to { opacity: 1; transform: none; } }
#boot .rule { position: absolute; left: 50%; top: 338px; width: 280px; height: 1px; margin-left: -140px; background: linear-gradient(90deg, transparent, rgba(200,230,255,.8), transparent); transform: scaleX(0); }
#boot.play .rule { animation: ruleIn 1s ease-out 3.5s forwards; }
#boot.done .rule { transform: none; animation: none; }
@keyframes ruleIn { to { transform: scaleX(1); } }
#boot .legal { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font: 7px/2 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #6d7899; opacity: 0; }
#boot.play .legal { animation: fadeIn .8s ease-out 4.1s forwards; }
#boot.done .legal { opacity: 1; animation: none; }
#boot .press { position: absolute; left: 0; right: 0; top: 370px; text-align: center; font: 11px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #fff; opacity: 0; text-shadow: var(--chroma); }
#boot.pressing .press { opacity: 1; }
#boot.pressing .press span { animation: blink 1.1s steps(1) infinite; }
#boot .skip { position: absolute; right: 22px; bottom: 12px; font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #3c4668; opacity: 0; transition: opacity .6s; }
#boot.play .skip { opacity: 1; }
#boot.pressing .skip { opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* ---------------- общая «оболочка» интерфейса ---------------- */
.shell { position: absolute; inset: 0; }
.status {
  position: absolute; left: 22px; right: 22px; top: 12px; height: 18px;
  display: flex; align-items: center; gap: 10px; font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--dim);
}
.status .mini { width: 16px; height: 16px; }
.status .sys { color: var(--text); letter-spacing: .08em; }
.status .grow { flex: 1; }
.status .p1 { color: var(--cyan); }
.status .p1::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 6px var(--cyan); vertical-align: -1px; }
.status .lang { padding: 3px 5px; border: 1px solid var(--edge); border-radius: 3px; color: var(--text); }
.footer {
  position: absolute; left: 22px; right: 22px; bottom: 10px; height: 22px;
  display: flex; align-items: center; gap: 18px; font: 500 12px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim);
  border-top: 1px solid rgba(80, 100, 170, .35); padding-top: 8px;
}
.footer .key { font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--text); padding: 4px 5px 3px; border-radius: 4px; background: #1a2657; box-shadow: inset 0 -2px 0 #0a1233; margin-right: 6px; }
.footer .hint { cursor: pointer; }
.footer .hint:hover { color: var(--text); }
.footer .grow { flex: 1; }
.footer .page { font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--faint); }

.title {
  position: absolute; left: 24px; top: 40px; font: italic 900 25px/1 'Exo 2', 'ZH Sans', 'HE Sans'; letter-spacing: .02em;
  color: #fff; text-shadow: var(--chroma), 0 0 16px rgba(120, 180, 255, .35);
}
.sub { font: 7px/1.5 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--faint); }

/* ---------------- главное меню ---------------- */
.tile {
  position: absolute; width: 104px; height: 104px; border-radius: 16px; cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), transparent 40%),
    linear-gradient(160deg, #1b2d6e, #0c173f 75%);
  border: 2px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 16px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45);
  display: grid; place-items: center; opacity: .78;
  transition: transform .18s cubic-bezier(.3,1.6,.5,1), opacity .18s, border-color .18s, box-shadow .18s;
}
.tile svg { width: 60px; height: 60px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.tile .lbl {
  position: absolute; top: calc(100% + 8px); left: -12px; right: -12px; text-align: center;
  font: italic 800 12.5px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); white-space: nowrap; letter-spacing: .02em;
}
.tile.sel {
  opacity: 1; border-color: #fff; transform: translateY(-4px) scale(1.05);
  box-shadow: var(--chroma), 0 0 22px rgba(88, 240, 255, .35), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -8px 16px rgba(0,0,0,.3);
}
.tile.sel .lbl { color: #fff; text-shadow: var(--chroma); }
.tile.sel svg { animation: bob 1.2s ease-in-out infinite; }
.tile.sel::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  background-size: 250% 100%; animation: sheen 2.4s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.wide {
  position: absolute; height: 32px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(180deg, #16245a, #0c173f); border: 2px solid var(--edge); opacity: .78;
  font: italic 800 12.5px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim);
  transition: transform .15s, opacity .15s, border-color .15s, box-shadow .15s;
}
.wide svg { width: 18px; height: 18px; }
.wide.sel { opacity: 1; border-color: #fff; color: #fff; box-shadow: var(--chroma), 0 0 16px rgba(88,240,255,.3); transform: translateY(-2px); }

.preview { position: absolute; left: 404px; top: 58px; width: 212px; height: 306px; }
.preview::before, .preview::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(160, 190, 255, .45); }
.preview::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.preview::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.preview .holo { position: absolute; left: 0; right: 0; top: 34px; height: 130px; display: grid; place-items: center; }
.preview .holo svg { width: 116px; height: 116px; filter: drop-shadow(-4px 2px 0 rgba(88,240,255,.55)) drop-shadow(4px 3px 0 rgba(255,91,214,.45)) drop-shadow(0 0 14px rgba(120,190,255,.35)); }
.preview .holo .bob { animation: bob 2.4s ease-in-out infinite; }
.preview .floor { position: absolute; left: 36px; right: 36px; top: 176px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse, rgba(88,240,255,.35), transparent 70%); filter: blur(2px); }
.preview .pname { position: absolute; left: 0; right: 0; top: 204px; text-align: center; font: italic 900 20px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.preview .pstat { position: absolute; left: 12px; right: 12px; top: 236px; text-align: center; font: 7px/1.8 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--cyan); }
.preview .pbar { position: absolute; left: 30px; right: 30px; top: 266px; height: 6px; border-radius: 3px; background: #0c1740; box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.preview .pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--mag)); }

.info {
  position: absolute; left: 24px; right: 24px; top: 384px; height: 46px; padding: 8px 12px;
  font: 500 13.5px/1.35 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--text);
  background: linear-gradient(90deg, rgba(20, 36, 92, .55), rgba(20, 36, 92, 0));
  border-left: 3px solid var(--cyan);
}
.info .caret { display: inline-block; width: 7px; height: 13px; background: var(--cyan); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }

/* ---------------- панели разделов ---------------- */
.pane { position: absolute; }
.frame { background: rgba(10, 20, 58, .72); border: 1px solid rgba(70, 95, 170, .55); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.tabs { position: absolute; display: flex; gap: 6px; }
.tab { font: italic 800 12px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); padding: 6px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.tab.on { color: #fff; background: #1a2a66; border-color: var(--edge); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.scroll { overflow-y: auto; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.row { cursor: pointer; border: 1px solid transparent; border-radius: 10px; transition: background .12s, border-color .12s; }
.row.sel { background: linear-gradient(90deg, rgba(40, 70, 160, .55), rgba(40, 70, 160, .15)); border-color: rgba(255,255,255,.55); box-shadow: -2px 1px 0 rgba(88,240,255,.5), 2px 1px 0 rgba(255,91,214,.4); }

/* профиль */
.avatar { position: absolute; left: 24px; top: 82px; width: 136px; height: 156px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1e3480, #0a1336 70%); }
.avatar img { width: 128px; height: 148px; object-fit: cover; border-radius: 6px; image-rendering: pixelated; box-shadow: -2px 1px 0 rgba(88,240,255,.55), 2px 2px 0 rgba(255,91,214,.45); filter: saturate(.92) contrast(1.05); }
.avatar .tag { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #111; background: var(--yel); padding: 4px 6px; border-radius: 3px; }
.idcard { position: absolute; left: 178px; top: 82px; right: 24px; }
.idcard .nm { font: italic 900 30px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; text-shadow: var(--chroma); margin-bottom: 14px; }
.kv { display: grid; grid-template-columns: 92px 1fr; row-gap: 7px; font: 500 13px/1.25 'Exo 2', 'ZH Sans', 'HE Sans'; }
.kv dt { font: 7px/1.8 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--dim); }
.kv dd { color: var(--text); }
.about { position: absolute; left: 24px; right: 24px; top: 262px; bottom: 50px; padding: 16px 18px; font: 400 15px/1.6 'Exo 2', 'ZH Sans', 'HE Sans'; color: #d6def8; }
.attrs { position: absolute; left: 24px; top: 88px; width: 290px; bottom: 50px; padding: 16px; }
.attrs h3, .perks h3 { font: italic 800 14px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; margin-bottom: 4px; }
.attrs .note { font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--faint); margin-bottom: 12px; }
.attr { display: grid; grid-template-columns: 132px 1fr 16px; align-items: center; gap: 8px; margin-bottom: 11px; font: 500 12.5px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--text); }
.attr .bar { display: flex; gap: 2px; }
.attr .bar i { flex: 1; height: 9px; background: #0d1a48; border-radius: 1px; }
.attr .bar i.on { background: linear-gradient(180deg, #8ff8ff, var(--cyan)); box-shadow: 0 0 6px rgba(88,240,255,.45); }
.attr .bar i.on:nth-child(n+7) { background: linear-gradient(180deg, #ff9ae8, var(--mag)); box-shadow: 0 0 6px rgba(255,91,214,.45); }
.attr b { font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--dim); text-align: right; }
.perks { position: absolute; left: 330px; top: 88px; right: 24px; bottom: 50px; padding: 16px; }
.perks ul { list-style: none; margin-top: 12px; display: grid; gap: 9px; }
.perks li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.perks li::before { content: ''; width: 8px; height: 8px; margin-top: 3px; background: var(--yel); transform: rotate(45deg); box-shadow: 0 0 6px rgba(255,216,77,.6); }
.perks strong { display: block; font: italic 800 13px/1.2 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.perks span { font: 400 11.5px/1.3 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }

/* журнал заданий */
.current { position: absolute; left: 24px; right: 24px; top: 76px; padding: 9px 12px 9px 40px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,216,77,.16), rgba(255,216,77,.03)); border: 1px solid rgba(255,216,77,.35); font: 500 12px/1.35 'Exo 2', 'ZH Sans', 'HE Sans'; color: #f4ecd0; }
.current::before { content: '!'; position: absolute; left: 13px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 4px; background: var(--yel); color: #1a1400; font: 9px/18px 'Pixel', 'ZH Pixel', 'HE Pixel'; text-align: center; animation: blink 1.4s steps(1) infinite; }
.current b { display: block; font: 6px/1.6 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--yel); }
.qlist { position: absolute; left: 24px; top: 176px; width: 214px; bottom: 44px; }
.qitem { padding: 9px 10px; margin-bottom: 5px; }
.qitem .t { font: italic 800 13px/1.2 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.qitem .o { font: 500 11.5px/1.3 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }
.qitem .s { font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #7dff9a; margin-top: 5px; }
.qdetail { position: absolute; left: 250px; right: 24px; top: 150px; bottom: 44px; padding: 14px 16px; }
.qdetail h4 { font: italic 900 18px/1.1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.qdetail .org { font: 500 12.5px/1.4 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--cyan); margin: 3px 0 10px; }
.qdetail h5 { font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--faint); margin: 10px 0 7px; }
.qdetail ul { list-style: none; display: grid; gap: 6px; }
.qdetail li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; font: 400 12.5px/1.35 'Exo 2', 'ZH Sans', 'HE Sans'; color: #d6def8; }
.qdetail li::before { content: '✓'; font: 700 11px/1.3 'Exo 2', 'ZH Sans', 'HE Sans'; color: #7dff9a; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: 500 11px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; padding: 5px 8px; border-radius: 6px; background: #1b2b6a; box-shadow: inset 0 0 0 1px var(--edge); }
.chip::before { content: '+'; color: var(--cyan); margin-right: 4px; font-weight: 800; }

/* трофеи */
.tprog { position: absolute; left: 250px; right: 24px; top: 46px; display: flex; align-items: center; gap: 10px; font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--dim); }
.tprog .bar { flex: 1; height: 8px; border-radius: 4px; background: #0c1740; box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.tprog .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--gold), var(--plat)); }
.tlist { position: absolute; left: 24px; right: 24px; top: 112px; bottom: 44px; }
.trow { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; margin-bottom: 4px; }
.trow svg { width: 36px; height: 36px; }
.trow .t { font: italic 800 13.5px/1.2 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.trow .d { font: 400 11.5px/1.3 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }
.trow .r { text-align: right; font: 6px/1.8 'Pixel', 'ZH Pixel', 'HE Pixel'; }
.trow .r .y { color: var(--faint); }
.trow.locked .t { color: var(--faint); letter-spacing: .2em; }
.tier-platinum { color: var(--plat); } .tier-gold { color: var(--gold); } .tier-silver { color: var(--silver); } .tier-bronze { color: var(--bronze); } .tier-locked { color: var(--faint); }

/* инвентарь */
.grid5 { position: absolute; left: 24px; top: 80px; display: grid; grid-template-columns: repeat(5, 106px); gap: 9px 12px; }
.slot {
  height: 66px; border-radius: 12px; cursor: pointer; position: relative; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #182a68, #0a1336 75%); border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}
.slot .cart { width: 58px; height: 46px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #2a2f45, #171a28); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 #06070c; position: relative; display: grid; place-items: center; }
.slot .cart::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 22px; border-radius: 3px; background: var(--c); opacity: .9; }
.slot .cart span { position: relative; margin-top: -8px; font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #0b1030; text-align: center; }
.slot .cart::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; background: repeating-linear-gradient(90deg, #c9a24a 0 3px, transparent 3px 5px); opacity: .8; }
.slot.sel { border-color: #fff; box-shadow: var(--chroma), 0 0 18px rgba(88,240,255,.3); transform: translateY(-3px); }
.slot.sel .cart { animation: bob 1.2s ease-in-out infinite; }
.idetail { position: absolute; left: 24px; right: 24px; top: 316px; bottom: 50px; padding: 12px 18px; }
.idetail .type { font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--yel); }
.idetail h4 { font: italic 900 20px/1.1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; margin: 5px 0 6px; text-shadow: var(--chroma); }
.idetail p { font: 400 13.5px/1.45 'Exo 2', 'ZH Sans', 'HE Sans'; color: #d6def8; max-width: 70ch; }

/* карта памяти */
.mcard { position: absolute; left: 24px; top: 84px; width: 330px; height: 312px; padding: 16px; }
.mcard .head { display: flex; justify-content: space-between; font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--dim); margin-bottom: 14px; }
.blocks { display: grid; grid-template-columns: repeat(5, 54px); gap: 8px; }
.block { height: 72px; border-radius: 8px; background: #0b1538; border: 1px dashed rgba(80,100,170,.45); display: grid; place-items: center; font: 5px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #56639a; cursor: pointer; }
.block.used { background: linear-gradient(180deg, #1f3483, #101c4d); border: 1px solid var(--edge); }
.block.used svg { width: 40px; height: 40px; }
.block.sel { border: 2px solid #fff; box-shadow: var(--chroma); }
.block.used.sel svg { animation: spinY 2.4s linear infinite; }
@keyframes spinY { to { transform: rotateY(360deg); } }
.mdetail { position: absolute; left: 370px; right: 24px; top: 84px; height: 312px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mdetail .fname { font: italic 900 18px/1.15 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.mdetail .meta { font: 6px/1.8 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--faint); }
.mdetail .note { font: 500 12.5px/1.4 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }
.btn {
  margin-top: auto; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: linear-gradient(180deg, #2b44a0, #16266a); border: 2px solid #fff; font: italic 800 14px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff;
  box-shadow: var(--chroma), 0 0 16px rgba(88,240,255,.25);
}
.btn.dim { opacity: .45; border-color: var(--edge); box-shadow: none; }
.loadbar { height: 8px; border-radius: 4px; background: #0c1740; box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; opacity: 0; }
.loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--mag)); transition: width .9s steps(12); }
.loadbar.go { opacity: 1; } .loadbar.go i { width: 100%; }

/* связь */
.p2 { position: absolute; left: 0; right: 0; top: 86px; text-align: center; font: italic 900 30px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; text-shadow: var(--chroma), 0 0 22px rgba(120,190,255,.4); }
.p2 span { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.lead { position: absolute; left: 70px; right: 70px; top: 134px; text-align: center; font: 400 14px/1.45 'Exo 2', 'ZH Sans', 'HE Sans'; color: #d6def8; }
.actions { position: absolute; left: 150px; right: 150px; top: 196px; display: grid; gap: 10px; }
.act { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, #16245a, #0c173f); border: 2px solid var(--edge); opacity: .85; font: italic 800 14.5px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }
.act svg { width: 22px; height: 22px; }
.act.sel { opacity: 1; border-color: #fff; color: #fff; }
.where { position: absolute; left: 60px; right: 60px; top: 364px; text-align: center; font: 500 12px/1.45 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }

/* настройки */
.opts { position: absolute; left: 90px; right: 90px; top: 92px; }
.opt { display: grid; grid-template-columns: 1fr 210px; align-items: center; height: 44px; padding: 0 14px; margin-bottom: 6px; font: italic 800 14px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--dim); }
.opt.sel { color: #fff; }
.opt .val { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 13.5px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }
.opt .arr { font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--faint); cursor: pointer; padding: 4px; }
.opt.sel .arr { color: var(--cyan); }
.opt .vol { flex: 1; display: flex; gap: 3px; }
.opt .vol i { flex: 1; height: 12px; background: #0d1a48; border-radius: 1px; }
.opt .vol i.on { background: linear-gradient(180deg, #8ff8ff, var(--cyan)); }
.opt.danger.sel { color: #ff8a80; }
.ohint { position: absolute; left: 0; right: 0; top: 396px; text-align: center; font: 500 12px/1 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--faint); }

/* уведомление о трофее */
.toast {
  position: absolute; right: 22px; top: 40px; width: 250px; padding: 10px 12px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  background: linear-gradient(180deg, rgba(24, 40, 100, .96), rgba(12, 22, 64, .96)); border: 2px solid #fff; border-radius: 12px;
  box-shadow: var(--chroma), 0 8px 24px rgba(0,0,0,.5); transform: translateX(300px); transition: transform .45s cubic-bezier(.2,1.4,.4,1); z-index: 5;
}
.toast.show { transform: none; }
.toast svg { width: 34px; height: 34px; }
.toast small { display: block; font: 6px/1.6 'Pixel', 'ZH Pixel', 'HE Pixel'; color: var(--yel); }
.toast b { font: italic 800 13px/1.2 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; }

/* хранитель экрана */
#saver { position: absolute; inset: 0; background: #000; display: none; z-index: 6; }
#saver.show { display: block; }
#saver .s { position: absolute; width: 76px; height: 76px; }

/* подсказка фокуса для клавиатуры (доступность) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* выключение: картинка схлопывается в полоску, как у кинескопа */
#stage.collapse #view, #stage.collapse #bg, #stage.collapse #boot { animation: collapse .45s ease-in forwards; }
@keyframes collapse {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, .006); filter: brightness(3); }
  100% { transform: scale(0, .006); filter: brightness(4); }
}
.ylogo .chroma path { mix-blend-mode: screen; }
.status .mini .glint, .status .mini .halo { display: none; }

.footer .arr { cursor: pointer; color: var(--dim); padding: 2px 4px; }
.footer .arr:hover { color: #fff; }

.mdetail .contains { font: 400 13px/1.5 'Exo 2', 'ZH Sans', 'HE Sans'; color: #d6def8; margin-top: 6px; }
#stage.fx-off .ylogo .halo { opacity: .4; }
#boot .press em { display: block; margin-top: 12px; font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; font-style: normal; color: #56639a; text-shadow: none; }

/* карта памяти: две кнопки — открыть в браузере и скачать */
.mdetail .btns { margin-top: auto; display: grid; gap: 8px; }
.mdetail .btn { margin-top: 0; opacity: .75; border-color: var(--edge); box-shadow: none; }
.mdetail .btn.ghost { background: linear-gradient(180deg, #16245a, #0c173f); font-size: 13px; height: 32px; }
.mdetail .btn.sel { opacity: 1; border-color: #fff; box-shadow: var(--chroma), 0 0 16px rgba(88,240,255,.25); }
.mdetail .note { font: 500 11.5px/1.4 'Exo 2', 'ZH Sans', 'HE Sans'; color: var(--faint); }
.block.picked { border: 2px solid rgba(255,255,255,.5); }

/* ---------------- иврит: экран отражён справа налево ----------------
   Тексты, списки и сетки разворачиваются сами (dir="rtl"); здесь — то, что стоит на экране по координатам.
   Ширина экрана 640: блок, стоявший в left: X шириной W, встаёт в right: X. Плитки меню отражает console.js,
   а стрелки ← → там же меняются местами, чтобы «влево» по-прежнему вело туда, куда смотрит глаз. */
[dir="rtl"] .title { left: auto; right: 24px; }
[dir="rtl"] .preview { left: 24px; }
[dir="rtl"] .tabs { left: auto !important; right: 24px; }
[dir="rtl"] .avatar { left: auto; right: 24px; }
[dir="rtl"] .idcard { left: 24px; right: 178px; }
[dir="rtl"] .attrs { left: auto; right: 24px; }
[dir="rtl"] .perks { left: 24px; right: 330px; }
[dir="rtl"] .current { padding: 9px 40px 9px 12px; }
[dir="rtl"] .current::before { left: auto; right: 13px; }
[dir="rtl"] .qlist { left: auto; right: 24px; }
[dir="rtl"] .qdetail { left: 24px; right: 250px; }
[dir="rtl"] .tprog { left: 24px; right: 250px; }
[dir="rtl"] .grid5 { left: auto; right: 24px; }
[dir="rtl"] .mcard { left: auto; right: 24px; }
[dir="rtl"] .mdetail { left: 24px; right: 370px; }
[dir="rtl"] .footer .key { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .chip::before { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .opt .arr { display: inline-block; transform: scaleX(-1); }   /* ◄ ► смотрят наружу, как и положено */