:root{
  --bg:#080607; --bg2:#0d090b; --panel:#120d0f; --panel2:#181013;
  --line:#2a1a1d; --line2:#3b2227; --red:#ff2b2b; --red2:#c01018;
  --fg:#e8dcd8; --dim:#9a8280; --mute:#6b5452;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:13px/1.45 var(--mono);-webkit-font-smoothing:antialiased;overflow:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(255,40,40,.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
button,input,select{font:inherit;color:inherit}
::selection{background:rgba(255,43,43,.35)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c1a1d;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--red2)}
::-webkit-scrollbar-track{background:transparent}

#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
#app[hidden]{display:none}

header{
  height:44px;flex:0 0 44px;display:flex;align-items:center;gap:12px;
  padding:0 12px;background:linear-gradient(180deg,#140d0f,#0e090b);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,43,43,.07);
}
.brand{display:flex;align-items:center;gap:7px;user-select:none;white-space:nowrap}
.brand .dev{font-size:18px;filter:drop-shadow(0 0 7px rgba(255,43,43,.85))}
.brand b{color:var(--red);letter-spacing:.4px;text-shadow:0 0 14px rgba(255,43,43,.45)}
.brand .sl{color:var(--line2)}
.brand .sub{color:var(--mute);letter-spacing:2px;font-size:11px}
.led{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 2.4s infinite}
.led.off{background:#4a2b2e;box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.search{flex:1;max-width:420px;position:relative;margin-left:auto}
.search input{
  width:100%;height:26px;padding:0 9px 0 26px;background:#0b0709;
  border:1px solid var(--line2);border-radius:2px;color:var(--fg);outline:none;
}
.search input:focus{border-color:var(--red);box-shadow:0 0 0 1px rgba(255,43,43,.25),0 0 16px -6px var(--red)}
.search .ic{position:absolute;left:7px;top:4px;opacity:.5;font-size:11px;pointer-events:none}

.tools{display:flex;gap:6px}
.ibtn{
  width:26px;height:26px;display:grid;place-items:center;background:#150e10;
  border:1px solid var(--line2);border-radius:2px;cursor:pointer;transition:.12s;padding:0;
}
.ibtn:hover{background:#201316;border-color:var(--red);color:#fff;box-shadow:0 0 14px -5px var(--red)}
.ibtn:active{transform:translateY(1px)}
.ibtn.on{border-color:var(--red);color:var(--red)}
.ibtn.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#body{flex:1;display:flex;min-height:0}
nav#cats{
  width:196px;flex:0 0 196px;overflow-y:auto;padding:6px 0;
  border-right:1px solid var(--line);background:rgba(10,7,8,.55);
}
.cat{
  width:100%;display:flex;align-items:center;gap:8px;padding:5px 10px;
  background:none;border:0;border-left:2px solid transparent;cursor:pointer;
  color:var(--dim);text-align:left;transition:.1s;
}
.cat:hover{background:#150e10;color:var(--fg)}
.cat.on{border-left-color:var(--red);color:#fff;background:linear-gradient(90deg,rgba(255,43,43,.16),transparent 85%)}
.cat .cnt{margin-left:auto;font-size:10.5px;color:var(--mute)}
.cat.on .cnt{color:var(--red)}
.cat.empty{opacity:.38}
.cat .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
#roms{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  grid-auto-rows:min-content;align-content:start;gap:6px;
}
.rom{
  display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;min-height:40px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  transition:.12s;position:relative;overflow:hidden;outline:none;
}
.rom:hover,.rom:focus{background:var(--panel2);border-color:var(--red);box-shadow:0 0 0 1px rgba(255,43,43,.2),0 0 20px -8px var(--red)}
.rom .ico{font-size:15px;flex:0 0 auto;filter:grayscale(.15)}
.rom .mid{min-width:0;flex:1}
.rom .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rom .meta{font-size:10.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rom .go{opacity:0;color:var(--red);transition:.12s;font-size:12px}
.rom:hover .go,.rom:focus .go{opacity:1}
.rom.last{border-left:2px solid var(--red)}
.rom.last .nm::after{content:" ●";color:var(--red);font-size:9px;vertical-align:super}
.rom .dl{
  flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;
  color:var(--mute);text-decoration:none;border-radius:2px;font-size:12px;
}
.rom .dl:hover{color:var(--red);background:#201316}
.rom .sv{color:var(--red);font-size:10px;flex:0 0 auto}

.more{
  grid-column:1/-1;padding:10px;text-align:center;color:var(--mute);
  border:1px dashed var(--line2);border-radius:2px;cursor:pointer;background:#0b0709;
}
.more:hover{color:var(--red);border-color:var(--red)}

.empty{margin:auto;text-align:center;color:var(--mute);line-height:2;padding:20px;grid-column:1/-1}
.empty code{color:var(--red);background:#150e10;padding:1px 5px;border-radius:2px}

footer{
  height:30px;flex:0 0 30px;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:linear-gradient(180deg,#0e090b,#120d0f);
  border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
}
footer .grow{flex:1}
#bios{height:21px;max-width:340px;background:#0b0709;border:1px solid var(--line2);border-radius:2px;padding:0 4px;outline:none;font-size:11.5px}
#bios:focus{border-color:var(--red)}
#bios.has{border-color:#3d6b2a;color:#b7e6a0}
#bios.miss{border-color:var(--red2);color:#ffb3b3}
.dot{color:var(--line2)}
.warnbar{color:#ffb3b3}

#cfg{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(4,2,3,.78)}
#cfg[hidden]{display:none}
.card{
  width:min(540px,94vw);max-height:88vh;overflow:auto;background:var(--bg2);
  border:1px solid var(--line2);border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,43,43,.12),0 24px 70px -20px #000;
}
.card h3{
  margin:0;padding:10px 14px;font-size:12px;letter-spacing:2px;color:var(--red);
  border-bottom:1px solid var(--line);text-transform:uppercase;display:flex;align-items:center;gap:8px;
}
.card h3 .x{margin-left:auto;cursor:pointer;color:var(--mute)}
.card h3 .x:hover{color:var(--red)}
.card .in{padding:10px 14px 16px}
.row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed #1d1315}
.row:last-child{border:0}
.row label{flex:1;color:var(--dim)}
.row .hint{color:var(--mute);font-size:10.5px}
.sw{
  width:34px;height:17px;background:#1c1215;border:1px solid var(--line2);
  border-radius:2px;position:relative;cursor:pointer;flex:0 0 auto;transition:.15s;
}
.sw::after{content:"";position:absolute;top:1px;left:1px;width:13px;height:13px;background:#5c4044;border-radius:1px;transition:.15s}
.sw.on{border-color:var(--red);background:rgba(255,43,43,.18)}
.sw.on::after{left:18px;background:var(--red);box-shadow:0 0 10px var(--red)}
.sw.dis{opacity:.3;pointer-events:none}
.sel{height:24px;background:#0b0709;border:1px solid var(--line2);border-radius:2px;padding:0 5px;outline:none;max-width:170px}
.sel:focus{border-color:var(--red)}
.rng{width:130px;accent-color:var(--red);background:transparent}
.diag{
  margin-top:8px;padding:8px;background:#0b0709;border:1px solid var(--line2);border-radius:2px;
  font-size:11px;line-height:1.6;color:var(--dim);white-space:pre-wrap;word-break:break-word;
}
.warn{color:#ffb3b3;background:rgba(255,43,43,.07);border:1px solid #4a1f22;padding:6px 8px;margin-top:8px;border-radius:2px;font-size:11px}

/* ---------- сцена ---------- */
#stage{
  position:fixed;inset:0;height:100vh;height:100dvh;z-index:100;background:#000;
  display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;
}
#stage[hidden]{display:none}
#game{flex:1;min-height:0;position:relative;z-index:0;isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none}
#game > .ejs_parent{position:absolute;inset:0}
#game canvas{touch-action:none;display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* родные оверлеи загрузки не нужны — у нас свой #loading */
#game [class*="ejs_loading"],#game .ejs_loading_text,#game .ejs_loading_icon{display:none!important}

/* виртуальный геймпад всегда поверх canvas и кликабельный */
#game .ejs_virtual_gamepad{z-index:7;pointer-events:auto!important}

/* панель не перехватывает мышь: события ловят только сами кнопки */
#game .ejs_control_bar{pointer-events:none!important}
#game .ejs_control_bar > *{pointer-events:auto}

/* правый клик отключён в EJS_Buttons — на всякий случай */
#game .ejs_context_menu{display:none!important}

/* выключаем только «дорогое». Цвета, фон и прозрачность НЕ трогаем —
   иначе панель перестаёт автоскрываться, а иконки становятся невидимыми */
#game .ejs_control_bar,#game .ejs_menu_bar,#game .ejs_settings_parent,
#game .ejs_settings_main_bar,#game .ejs_virtual_gamepad{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;filter:none!important;text-shadow:none!important;
  transition:none!important;animation:none!important;will-change:auto!important;
}

#stage-top{
  position:absolute;top:0;left:0;right:0;z-index:30;height:36px;
  display:flex;align-items:center;gap:10px;padding:0 8px;
  background:linear-gradient(180deg,rgba(8,6,7,.92),rgba(8,6,7,0));
  font-size:11.5px;pointer-events:none;
}
#stage-top .ibtn,#stage-top .nm{pointer-events:auto}
#stage-top .nm{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.35;transition:opacity .18s}
#stage-top .sp{flex:1}
#stage:hover #stage-top .nm{opacity:1}

#loading{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:#080607;color:var(--dim);font-size:13px;gap:10px;text-align:center;padding:20px;
}
#loading[hidden]{display:none}
#loading .big{font-size:34px;animation:pulse 1.4s infinite}
#loading .err{color:#ff8080;max-width:80%;line-height:1.8;white-space:pre-wrap;word-break:break-word}