/* Ретро-консоль: корпус, экран и кнопки.

   Корпус нарочно «железный»: серый пластик, винты по углам, красная кнопка
   огня, зелёный индикатор питания. Он должен читаться как предмет, а не как
   очередная карточка сайта, — иначе теряется весь смысл затеи.

   Экран — 4:3. Это не стилизация: у C64 картинка именно такая, и растягивать
   её в широкий прямоугольник значит показывать людям неправильную игру.

   Кнопки на корпусе одинаково живут и под пальцем, и под мышью, поэтому
   размеры взяты по пальцу (не меньше 44 px), а не по курсору. */

/* На странице нет ничего, кроме консоли: так попросил владелец, и это
   честно — сюда приходят играть. Заголовок остаётся в разметке ради поиска
   и экранного диктора, но с глаз убран: видимой пользы от него ноль, а без
   него страница для поиска безымянна. */
.rc-h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Консоль занимает всю страницу: ни полей, ни подвала, ни второго столбца.
   Экран идёт во всю ширину — на телефоне это и есть картинка игры во весь
   экран, ради чего затея и делалась.

   На широком мониторе «во всю ширину» превратило бы экран 4:3 в полотно выше
   монитора: при ширине 1900 высота была бы 1425. Поэтому ширина корпуса
   ограничена тем, что помещается по высоте вместе с пультом, — считается
   прямо в CSS из высоты окна. */
html.rc-page main.wrap { max-width: none; padding: 0; }
/* Подвала на консоли нет: страница — одна машина во весь экран, и копирайт
   под ней только отнимает высоту у экрана. */
html.rc-page body { padding-bottom: 0; }
html.rc-page footer.foot { display: none; }
.rc-stage { padding: 0; display: flex; justify-content: center; }
.rc-stage::before { display: none; }

.rc {
  /* Сколько высоты съедают шапка сайта, пульт и поля корпуса: остаток и есть
     высота экрана, а из неё — предельная ширина корпуса при пропорции 4:3. */
  --rc-chrome: 210px;
  --rc-plastic: #2b3140;
  --rc-plastic-2: #1b2030;
  --rc-slot: #0c111c;
  --rc-key: #3a4356;
  --rc-key-hi: #4c5871;
  --rc-fire: #e0503a;
  --rc-led: #3ddc84;
  margin: 0;
  width: 100%;
  max-width: calc((100dvh - var(--rc-chrome)) * 4 / 3);
}

/* ---------- корпус ---------- */
.rc-body {
  position: relative;
  margin: 0 auto;
  padding: 10px 10px 12px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, var(--rc-plastic), var(--rc-plastic-2));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
/* Винты по углам — четыре точки, дешевле любой картинки. */
.rc-body::before, .rc-body::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a748c, #232a38 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12);
  top: 10px; left: 10px;
}
.rc-body::after { left: auto; right: 10px; }
.rc[data-drop] .rc-body { border-color: var(--accent); box-shadow: 0 0 0 2px var(--glow), 0 22px 60px rgba(0,0,0,.55); }

/* ---------- шильдик ---------- */
.rc-top {
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 8px;
}
.rc-brand {
  font-family: var(--mono); font-weight: 700; letter-spacing: .16em;
  font-size: 12px; color: #b9c6e4; text-transform: uppercase;
}
.rc-brand b { color: var(--accent); font-weight: 700; }
.rc-state {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%;
}
.rc-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a2020; box-shadow: inset 0 0 3px rgba(0,0,0,.8);
  transition: background .2s, box-shadow .2s;
}
.rc-led[data-on="1"] { background: var(--rc-led); box-shadow: 0 0 10px rgba(61,220,132,.8); }

/* ---------- экран ---------- */
.rc-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #04060c;
  border: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 0 0 0 6px #10151f, inset 0 0 40px rgba(0,0,0,.9);
}
#rcGame { position: absolute; inset: 0; }
#rcGame canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; }

/* Строки развёртки поверх картинки: их видно только вблизи, но именно они
   делают экран экраном, а не прямоугольником с игрой. */
.rc-crt {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
}
.rc[data-run] .rc-screen { box-shadow: inset 0 0 0 6px #10151f, inset 0 0 40px rgba(0,0,0,.9), 0 0 40px rgba(127,178,255,.10); }

/* Приглашение: пока дискеты нет, оно и есть содержимое экрана. */
/* Приглашение BASIC прячется атрибутом hidden — и обязано прятаться
   по-настоящему. Правило браузера [hidden]{display:none} слабее любого
   класса, поэтому display:flex его перебивал: игра запускалась и честно шла,
   но её закрывал наш же экран, и со стороны это выглядело как «эмулятор
   загрузил, но не запустил». Отсюда !important — редкий случай, когда он
   по делу. */
.rc-boot[hidden] { display: none !important; }
.rc-boot {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 18px; text-align: center; cursor: pointer;
  font-family: var(--mono); color: #9fb4dd;
}
.rc-boot .rc-ready { font-size: clamp(11px, 2.6vw, 13px); color: #7f8fb4; letter-spacing: .04em; }
.rc-boot .rc-ready b { color: var(--accent); font-weight: 500; }
.rc-boot .rc-cursor { display: inline-block; width: .6em; height: 1em; vertical-align: -.15em;
  background: var(--accent); animation: rcBlink 1.1s steps(1) infinite; }
@keyframes rcBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.rc[data-boot] .rc-boot .rc-ready { color: var(--accent); }

.rc-take {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: #eaf1ff;
  background: rgba(127,178,255,.14); border: 1px solid rgba(127,178,255,.42);
}
.rc-take:hover { background: rgba(127,178,255,.22); }
.rc-take svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#rcFile { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#rcAgain[hidden] { display: none; }

/* ---------- дисковод ----------
   Рисованный, но с повадками настоящего: щель, куда въезжает дискета,
   зелёная лампа чтения и подпись. Пока лампа мигает — идёт загрузка; это
   единственный честный индикатор, потому что ядро о своём прогрессе почти
   ничего не сообщает. */
.rc-drive {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(255,255,255,.03));
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* Щель: тонкая тёмная прорезь с губой снизу — по ней и читается, что это
   дисковод, а не очередная плашка. */
.rc-drive-slot {
  flex: 1; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, #05070c 0 62%, #1b2333 62% 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}
.rc-drive-lab {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: #6f7d9c; text-transform: uppercase; white-space: nowrap;
}
.rc-drive-led {
  width: 9px; height: 9px; border-radius: 2px;
  background: #14301e; box-shadow: inset 0 0 3px rgba(0,0,0,.8);
}
/* Чтение: лампа мигает неровно, как на настоящем приводе, — ровное мигание
   выглядит индикатором загрузки страницы, а не работой головки. */
.rc[data-reading] .rc-drive-led { animation: rcRead .38s steps(1) infinite; }
@keyframes rcRead {
  0%, 44% { background: #3ddc84; box-shadow: 0 0 9px rgba(61,220,132,.85); }
  45%, 62% { background: #14301e; box-shadow: inset 0 0 3px rgba(0,0,0,.8); }
  63%, 78% { background: #3ddc84; box-shadow: 0 0 9px rgba(61,220,132,.85); }
  79%, 100% { background: #14301e; box-shadow: inset 0 0 3px rgba(0,0,0,.8); }
}
/* Дискета в полёте: летит от своей плитки к щели, по дороге уменьшаясь и
   слегка доворачиваясь. Живёт поверх всего и ничего не ловит. */
.rc-fly {
  position: fixed; z-index: 40; pointer-events: none; border-radius: 6px;
  overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.6);
  transition: transform .62s cubic-bezier(.5,.05,.35,1), opacity .18s ease .5s;
}
.rc-fly img, .rc-fly span { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .rc-fly { display: none; } }

/* SELECT и START — маленькие, посередине пульта: на C64 они не нужны вовсе,
   а на Atari 7800 без них не начать игру. */
.rc-sys { display: flex; flex-direction: column; gap: 8px; }
.rc-sys-btn {
  min-height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #c3d0ea;
  background: linear-gradient(180deg, var(--rc-key-hi), var(--rc-key));
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.rc-sys-btn:active, .rc-sys-btn[data-down] {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,.45), inset 0 2px 6px rgba(0,0,0,.5);
}

/* ---------- лента дискет ----------
   Полка живёт внизу корпуса и всегда на виду: игра выбирается одним
   касанием, без «вставить» и «извлечь». Лента прокручивается вбок и
   прилипает к плиткам — на телефоне это привычнее списка, а на широком
   экране просто помещается целиком. */
.rc-rack { padding: 10px 4px 2px; }
.rc-list {
  list-style: none; margin: 0; padding: 2px;
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.rc-list::-webkit-scrollbar { display: none; }
.rc-list li { flex: 0 0 auto; scroll-snap-align: start; }

.rc-item {
  display: flex; flex-direction: column; gap: 6px; width: 124px;
  padding: 8px; border-radius: 12px; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 12px; color: #eaf1ff;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
}
.rc-item:hover { background: rgba(127,178,255,.16); border-color: rgba(127,178,255,.42); }
/* Та, что играет сейчас, отмечена: иначе в ленте из десятка дискет непонятно,
   что именно стоит в приводе. */
.rc-item[data-on] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--glow); }
.rc-item b { font-weight: 600; font-size: 12px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-item i { font-style: normal; font-size: 10px; color: var(--dim); }

.rc-shot {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px;
  overflow: hidden; background:
    linear-gradient(160deg, hsl(var(--h, 210) 55% 32%), hsl(calc(var(--h, 210) + 40) 60% 14%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.rc-shot img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
/* Нарисованная плитка: название крупно, поверх полос развёртки — так она
   читается как экран, а не как пустой прямоугольник. */
.rc-shot-word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center; font-weight: 700; font-size: 13px; line-height: 1.15;
  color: rgba(255,255,255,.92); text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.rc-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
}
/* Значок дискеты внизу картинки: он говорит, что плитка не обложка, а
   носитель, который сейчас вставят. */
.rc-floppy {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,16,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.rc-floppy svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* Плитка с кодом для камеры: по касанию разворачивается крупнее, иначе с
   метра телефон её не разбирает. */
.rc-qr .rc-shot { background: #fff; }
.rc-qr img { object-fit: contain; padding: 4px; background: #fff; }
.rc-qr-big { width: 220px; }

/* Пустая или закрытая полка говорит об этом словом, а не пустой полосой. */
.rc-empty {
  margin: 0; padding: 14px 12px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.rc-empty[hidden] { display: none; }

/* ---------- панель управления ---------- */
.rc-deck {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 6px 2px;
  touch-action: none;
}
.rc-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
.rc-pad button { border-radius: 10px; }
.rc-pad [data-btn="up"]    { grid-area: 1 / 2; }
.rc-pad [data-btn="left"]  { grid-area: 2 / 1; }
.rc-pad [data-btn="right"] { grid-area: 2 / 3; }
.rc-pad [data-btn="down"]  { grid-area: 3 / 2; }
.rc-pad .rc-hub {
  grid-area: 2 / 2; border-radius: 4px; margin: 12px;
  background: rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.rc-deck button {
  -webkit-tap-highlight-color: transparent; user-select: none;
  font-family: var(--mono); font-size: 12px; color: #dbe5fb; cursor: pointer;
  background: linear-gradient(180deg, var(--rc-key-hi), var(--rc-key));
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.rc-deck button:active, .rc-deck button[data-down] {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,.45), inset 0 2px 6px rgba(0,0,0,.5);
  background: linear-gradient(180deg, var(--rc-key), var(--rc-key));
}
.rc-pad button svg { width: 16px; height: 16px; fill: currentColor; margin: auto; display: block; }


/* Кнопок две, как на джойстике Atari: они стоят по диагонали, а не в ряд —
   так их находит большой палец, не глядя. */
.rc-fires { display: flex; align-items: flex-end; gap: 10px; }
.rc-fire2 { margin-bottom: 22px; }
.rc-fire span { pointer-events: none; }

.rc-fire {
  width: 68px; height: 68px; border-radius: 50%;
  font-weight: 700; letter-spacing: .1em; color: #fff !important;
  background: radial-gradient(circle at 38% 32%, #f07a63, var(--rc-fire) 62%, #a33322) !important;
  border: 1px solid rgba(0,0,0,.55) !important;
  box-shadow: 0 4px 0 #7d2718, inset 0 2px 0 rgba(255,255,255,.28) !important;
}
.rc-fire:active, .rc-fire[data-down] {
  transform: translateY(4px);
  box-shadow: 0 0 0 #7d2718, inset 0 3px 10px rgba(0,0,0,.5) !important;
}

/* ---------- подпись под корпусом ---------- */
.rc-note {
  max-width: 760px; margin: 12px auto 0; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--dim); line-height: 1.6;
}
.rc-note code { color: #a8bbe0; }

/* Всё, что эмулятор рисует от себя, — прочь. У консоли свой корпус со своими
   кнопками, а его панель, настройки и контекстное меню появляются поверх
   игры английскими словами и сбивают с толку. Нам нужна игра, а не пульт
   чужого проигрывателя. */
#rcGame .ejs_virtualGamepad_parent,
#rcGame .ejs_menu_bar,
#rcGame .ejs_menu_bar_hidden,
#rcGame .ejs_menu_button,
#rcGame .ejs_context_menu,
#rcGame .ejs_settings,
#rcGame .ejs_setting_menu,
#rcGame .ejs_settings_parent,
#rcGame .ejs_start_button,
#rcGame .ejs_start_button_border,
#rcGame .ejs_popup_container,
#rcGame .ejs_control_bar,
#rcGame .ejs_cheat_parent,
#rcGame .ejs_netplay_parent,
#rcGame .ejs_volume_parent,
#rcGame .ejs_widget,
.ejs_virtualGamepad_parent,
.ejs_menu_bar,
.ejs_menu_button,
.ejs_context_menu,
.ejs_settings,
.ejs_setting_menu,
.ejs_start_button,
.ejs_start_button_border,
.ejs_popup_container,
.ejs_control_bar { display: none !important; }
/* И на всякий случай: любой чужой элемент, кроме самого холста и его
   родителя, на экране консоли не нужен. Гамбургер настроек эмулятора
   вылезал именно так — новым классом, которого в списке выше не было. */
#rcGame [class^="ejs_"]:not(.ejs_canvas):not(.ejs_canvas_parent):not(.ejs_parent):not(.ejs_game) {
  display: none !important;
}
#rcGame .ejs_canvas, #rcGame .ejs_canvas_parent { display: block !important; }
/* Экран эмулятора занимает всю щель корпуса, без чёрных поясов по бокам. */
.ejs_parent, .ejs_game { width: 100% !important; height: 100% !important; background: #000 !important; }

/* Узкий экран: пульт уезжает под экран целиком, иначе кнопки жмутся к краям. */
@media (max-width: 560px) {
  /* Внизу ещё приёмник дискет — значит, высоты пульт съедает больше, и предел
     ширины корпуса считаем с запасом, иначе экран уедет под кнопки. */
  .rc { --rc-chrome: 290px; }
  .rc-pad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
  .rc-fire { width: 62px; height: 62px; }
  .rc-fire2 { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-boot .rc-cursor { animation: none; }
}