/* Пульт ночного консьержа. Ни одной картинки: всё, что тут есть, —
   градиенты, тени и моноширинный шрифт. Тёплый цвет в этой игре означает
   ровно одно: там горит свет, и там оно не пройдёт. */

:root {
  --bg:     #06080b;
  --panel:  #0d1117;
  --panel2: #11171f;
  --line:   #1e2732;
  --line2:  #2c3947;
  --ink:    #c9d3de;
  --dim:    #7b8a9c;
  --quiet:  #5d6b7c;
  --lit:    #ffbe5c;          /* свет. Единственный тёплый цвет на экране */
  --warn:   #ff6155;
  --ok:     #74d18e;
  --tell:   #ffd58a;
  --cold:   #6ea8ff;
  --fs:     15px;
}

html.big { --fs: 17px; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs)/1.5 "Segoe UI", Inter, system-ui, sans-serif;
  min-height: 100%;
}

/* Панель не листается. Смена помещается в экран целиком, а прокручивается только
   то, что и должно, — динамик и журнал. Кнопка «ОТКРЫТЬ» обязана быть на месте
   всегда: искать её колесом мыши, пока гость уходит, — это не сложность. */
html, body { height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% -20%, #131b26 0%, #06080b 62%), var(--bg);
  overflow: hidden;
}

/* Плёнка поверх всего: в каморке одна лампа, и та не по центру. */
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: radial-gradient(140% 100% at 50% 45%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
}
html.no-grain #grain { display: none; }

#app {
  max-width: 1220px;
  height: 100%;
  margin: 0 auto;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  transition: filter .5s;
}

/* Давление: чем ближе то, что в доме, тем холоднее и глуше пульт. */
#app.p1 { filter: saturate(.92) brightness(.97); }
#app.p2 { filter: saturate(.80) brightness(.93) contrast(1.04); }
#app.p3 { filter: saturate(.62) brightness(.88) contrast(1.10) hue-rotate(-6deg); }

@keyframes bang {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 4px); }
  35% { transform: translate(6px, -5px); }
  55% { transform: translate(-4px, -2px); }
  75% { transform: translate(3px, 3px); }
}
#app.bang { animation: bang .45s; }
html.no-shake #app.bang { animation: none; }

/* ── ВЕРХНЯЯ ПЛАНКА ───────────────────────────────── */

#hud {
  display: flex; align-items: stretch; gap: 6px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 10px;
}
.hud-cell {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 76px; padding: 4px 10px;
  background: #0a0e13;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 600 17px/1.15 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.hud-cell .lbl {
  font: 600 9px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .16em; color: var(--quiet); margin-bottom: 3px;
}
.hud-gap { flex: 1; }

#hud-queue.many { color: var(--lit); }
#hud-light-cell.on    { border-color: #6b5322; color: var(--lit); }
#hud-light-cell.blown { border-color: #6b2a22; color: var(--warn); }
#hud-alive.lost span:last-child { color: var(--warn); }

#hud-curfew {
  display: none; align-items: center;
  color: var(--warn); border-color: #5a2620; background: #180d0c;
  font-size: 11px; letter-spacing: .12em;
}
#hud-curfew.on { display: flex; }

/* просьба соседа: не приказ, поэтому и цвет не тревожный, пока её не провалили */
#hud-ask.hidden { display: none; }
#hud-ask { border-color: #2b3d31; }
#hud-ask span:last-child { color: var(--ok); }
#hud-ask.lost { border-color: #5a2620; }
#hud-ask.lost span:last-child { color: var(--warn); text-decoration: line-through; }

.icon {
  width: 38px; background: #0a0e13; color: var(--dim);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 16px; cursor: pointer;
}
.icon:hover { color: var(--ink); border-color: var(--line2); background: #131a22; }

/* ── ТРИ КОЛОНКИ ──────────────────────────────────── */

#board {
  display: grid;
  grid-template-columns: 296px minmax(320px, 1fr) 286px;
  gap: 10px;
  align-items: stretch;
  flex: 1;
  min-height: 0;                 /* иначе grid растянет страницу под содержимое */
}

#house, #mid, #journal {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 0;
  overflow: hidden;
}
#house { display: flex; flex-direction: column; }
#facade { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

h6 {
  margin: 0; padding: 7px 10px;
  font: 600 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .18em; color: var(--quiet);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
h6 .q { letter-spacing: .03em; text-transform: none; font-weight: 400; font-size: 9px; }

/* ── ДОМ ──────────────────────────────────────────── */

#facade { padding: 8px 8px 8px; }

.fl-row {
  display: grid;
  grid-template-columns: 38px 1fr 20px;
  gap: 6px; align-items: center;
  padding: 3px 4px; margin-bottom: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #080b0f;
  transition: background .35s, box-shadow .35s, border-color .35s;
}
/* Освещённый этаж — это стена. Он и должен читаться как перекрытие. */
.fl-row.lit {
  background: linear-gradient(90deg, rgba(255,190,92,.16), rgba(255,190,92,.05));
  border-color: rgba(255,190,92,.30);
  box-shadow: inset 0 0 22px rgba(255,190,92,.10);
}
.fl-row.ground { margin-top: 6px; border-top: 1px dashed var(--line2); }

.lamp {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 36px; cursor: pointer;
  background: #0a0e13; color: var(--dim);
  border: 1px solid var(--line); border-radius: 3px;
  font: 600 13px/1 ui-monospace, Consolas, monospace;
}
.lamp i {
  font: 400 8px/1 ui-monospace, Consolas, monospace;
  font-style: normal; color: var(--quiet); margin-top: 2px;
}
.lamp:hover:not(:disabled) { border-color: var(--line2); background: #131a22; }
.lamp.on {
  background: linear-gradient(180deg, #4a3612, #2a1f0a);
  border-color: #8a6a26; color: var(--lit);
  box-shadow: 0 0 12px rgba(255,190,92,.35), inset 0 0 8px rgba(255,190,92,.25);
}
.lamp.on i { color: #c99b4e; }
.lamp.blown { border-color: #59241f; color: #a4544c; }
.lamp.torch {
  border-color: #2f6e8a; color: #7fd0f0;
  background: linear-gradient(180deg, #10303d, #08181f);
  box-shadow: 0 0 12px rgba(110,200,240,.30);
}
.lamp:disabled { opacity: .45; cursor: default; }

.wins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.you {
  grid-column: 1 / -1; text-align: center;
  font: 600 9px/28px ui-monospace, Consolas, monospace;
  letter-spacing: .14em; color: var(--quiet);
  border: 1px dashed var(--line2); border-radius: 3px;
}

.flat {
  position: relative; height: 30px; padding: 0; cursor: pointer;
  background: #0a0e13; border: 1px solid var(--line); border-radius: 3px;
  color: var(--quiet);
  font: 600 10px/1 ui-monospace, Consolas, monospace;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.flat em { font-style: normal; position: relative; z-index: 2; padding-bottom: 2px; }
.flat .win {
  position: absolute; left: 4px; right: 4px; top: 4px; height: 13px;
  background: #0f151c; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: background .4s, box-shadow .4s;
}
.flat:hover { border-color: var(--line2); color: var(--ink); }
/* в квартире горит свет — значит там не спят */
.flat.on .win { background: #e8bf72; box-shadow: 0 0 10px rgba(232,191,114,.55); }
.flat.on { color: #93805a; }
/* ждут гостя · никого не пускать */
.flat.wait { border-color: #2f6b41; }
.flat.shut { border-color: #6b2f2f; }
/* закрылись на два оборота — вы успели */
.flat.shutin { border-color: var(--ok); box-shadow: 0 0 8px rgba(116,209,142,.25); }
.flat.shutin .win { background: #1c3a26; box-shadow: none; }
/* сюда просится тот, кто стоит под дверью */
.flat.ringing { border-color: var(--lit); animation: ring 1.1s infinite; }
@keyframes ring { 50% { box-shadow: 0 0 12px rgba(255,190,92,.5); } }
/* квартира замолчала */
.flat.dead { border-style: dashed; border-color: #3a2a2a; color: #5c3b3b; }
.flat.dead .win { background: #000; box-shadow: inset 0 0 0 1px rgba(255,80,80,.12); }

.stair {
  height: 30px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--line);
  font: 600 13px/1 ui-monospace, Consolas, monospace; color: var(--quiet);
}
.stair.here .mark { color: var(--warn); text-shadow: 0 0 10px rgba(255,97,85,.6); }
.stair.here .mark.guess { color: var(--dim); text-shadow: none; }
.stair.calm .mark { color: var(--quiet); text-shadow: none; }

/* ── КАМЕРА ───────────────────────────────────────── */

#mid { display: flex; flex-direction: column; min-width: 0; }

#camera {
  position: relative; margin: 8px 8px 0;
  flex: 0 1 auto; height: 40vh; min-height: 150px; max-height: 300px;
  border: 1px solid var(--line2); border-radius: 4px;
  background: #05070a; overflow: hidden;
}
#cam-cv { display: block; width: 100%; height: 100%; }

#cam-scan {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,0) 1px 3px);
}
#cam-scan::after {
  content: ''; position: absolute; left: 0; right: 0; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.030), rgba(255,255,255,0));
  animation: roll 7s linear infinite;
}
@keyframes roll { from { top: -34%; } to { top: 100%; } }
html.no-crt #cam-scan { display: none; }

#cam-empty, #cam-blind {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 600 12px/1.6 ui-monospace, Consolas, monospace;
  letter-spacing: .22em; color: #3c4756; text-align: center;
}
#cam-blind { background: rgba(4,6,9,.93); color: var(--dim); letter-spacing: .16em; }
#cam-blind small { letter-spacing: .03em; color: var(--quiet); }

#cam-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(0,0,0,.6);
}
#cam-timer i { display: block; height: 100%; background: var(--dim); transition: width .3s linear; }
#cam-timer.low i { background: var(--warn); }

#cam-caption {
  position: absolute; left: 0; right: 0; bottom: 4px;
  padding: 14px 10px 6px;
  font: 12px/1.45 ui-monospace, Consolas, monospace;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(5,7,10,0), rgba(5,7,10,.9) 45%);
  text-shadow: 0 1px 3px #000;
}
.wait-n { color: var(--dim); }
.wait-n.low { color: var(--warn); }

/* ── ДИНАМИК ──────────────────────────────────────── */

#speaker {
  flex: 1 1 0; min-height: 84px; overflow-y: auto;
  margin: 8px; padding: 8px 10px;
  background: #070a0e; border: 1px solid var(--line); border-radius: 4px;
  font: 13px/1.62 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--dim);
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
#speaker > div { margin-bottom: 3px; animation: fadein .35s; }
@keyframes fadein { from { opacity: 0; transform: translateY(3px); } }
#speaker .t    { color: var(--quiet); }
#speaker .tell { color: var(--tell); }
#speaker .q    { color: #4d5a6b; font-style: italic; }
#speaker .hint {
  display: block; color: var(--cold); border-left: 2px solid #2b4a72;
  padding: 3px 0 3px 8px; margin: 4px 0; background: rgba(60,110,180,.07);
}

.note {
  display: block; margin: 6px 0; padding: 8px 10px;
  border: 1px dashed #4a4230; border-radius: 3px;
  background: rgba(255,213,138,.05);
  color: #b8a882; font-style: italic;
}
.note b { color: var(--tell); font-style: normal; display: block; margin-bottom: 2px; }

/* ── ЖУРНАЛ ───────────────────────────────────────── */

#journal { position: relative; display: flex; flex-direction: column; min-height: 0; }
#tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; padding: 8px 4px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--quiet);
  font: 600 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--lit); border-bottom-color: var(--lit); }

#tab-body {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  font: 12px/1.55 ui-monospace, Consolas, monospace;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
#tab-body h4 {
  margin: 0 0 6px; color: var(--quiet);
  font: 600 9px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .14em;
}
#tab-body ol { margin: 0; padding-left: 18px; color: var(--dim); }
#tab-body li { margin-bottom: 4px; }
#tab-body li.new { color: var(--lit); }
#tab-body .row {
  display: flex; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid rgba(30,39,50,.55); color: var(--dim);
}
#tab-body .row .n { flex: none; width: 22px; text-align: right; color: var(--quiet); font-weight: 600; }
#tab-body .row.vac  { opacity: .5; }
#tab-body .row.dead { color: #6b4444; }
#tab-body .out   { color: var(--quiet); }
#tab-body .ord   { color: var(--ok); }
#tab-body .tell  { color: var(--warn); }
#tab-body .quiet { color: var(--quiet); }

#journal-closed {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
  background: rgba(9,12,17,.97);
  font: 600 11px/1.6 ui-monospace, Consolas, monospace;
  letter-spacing: .18em; color: #3c4756;
}
#journal-closed small { letter-spacing: .03em; color: var(--quiet); font-weight: 400; }
#journal.open #journal-closed { display: none; }

/* ── КНОПКИ ───────────────────────────────────────── */

/* Проверки могут переноситься сколько угодно; решение — нет. #acts переносится
   внутри себя, #decide стоит справа и всегда на первой строке. Иначе длинная
   английская подпись уносила «ОТКАЗАТЬ» под сгиб — а гость ждать не будет. */
#controls { display: flex; gap: 8px; margin-top: 10px; flex: none; align-items: flex-start; }
#acts   { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
#decide { display: flex; gap: 8px; flex: none; }
.spacer { flex: 1; }

.act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 14px; cursor: pointer;
  background: linear-gradient(180deg, #182029, #10161d);
  border: 1px solid var(--line2); border-radius: 4px;
  color: var(--ink);
  font: 600 12px/1.1 ui-monospace, Consolas, monospace; letter-spacing: .07em;
  transition: background .15s, border-color .15s, transform .05s;
}
.act small { font: 400 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .03em; color: var(--quiet); }
.act:hover:not(:disabled)  { background: linear-gradient(180deg, #212c37, #151d26); border-color: #3d4c5d; }
.act:active:not(:disabled) { transform: translateY(1px); }
.act:disabled { opacity: .35; cursor: default; }
.act.big { min-width: 150px; font-size: 13px; }
.act.yes { border-color: #2f6b41; }
.act.yes:hover:not(:disabled) { background: linear-gradient(180deg, #17301f, #102016); }
.act.no  { border-color: #6b2f2f; }
.act.no:hover:not(:disabled)  { background: linear-gradient(180deg, #2d1616, #1d0f0f); }
.act.kit { border-color: #6b5322; color: var(--lit); }
.act.kit.armed { background: linear-gradient(180deg, #3d2d10, #241a09); box-shadow: 0 0 12px rgba(255,190,92,.3); }
.act.kit.spent { opacity: .45; }

/* Ссылка наружу выглядит как кнопка, но подчёркнуто тёплая: это единственное
   место во всей игре, где что-то просят, и притворяться кнопкой смены ей ни к чему. */
a.act.out { text-decoration: none; }
a.act.out:first-child { border-color: #6b4a2f; color: var(--lit); }
a.act.out:first-child:hover { background: linear-gradient(180deg, #2e2113, #1d1409); border-color: var(--lit); }
.links { margin-top: 12px; }
.small-note { margin-top: 8px; font-size: 11px; opacity: .7; }

/* ── ПОДСКАЗКА ПОД КУРСОРОМ ───────────────────────── */

#tip {
  position: fixed; z-index: 80; max-width: 290px; pointer-events: none;
  padding: 7px 10px;
  background: #0b1016; border: 1px solid var(--line2); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  font: 11px/1.5 ui-monospace, Consolas, monospace; color: var(--ink);
  white-space: pre-line;
}
#tip b { color: var(--lit); }

/* ── МОДАЛКА ──────────────────────────────────────── */

.hidden { display: none !important; }

#modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(3,5,8,.88);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
#modal-box {
  width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto;
  padding: 22px 26px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line2); border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
#modal-box h2 {
  margin: 0 0 4px; color: var(--lit);
  font: 700 26px/1.15 ui-monospace, Consolas, monospace; letter-spacing: .06em;
}
#modal-box h3 {
  margin: 18px 0 6px; color: var(--quiet);
  font: 600 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .18em;
}
#modal-box p { margin: 0 0 8px; }
#modal-box ul, #modal-box ol { margin: 0 0 8px; padding-left: 20px; }
#modal-box li { margin-bottom: 4px; }
#modal-box a { color: var(--cold); }
/* «Что решило ночь» — не столбик статистики, а три причины, и выглядеть
   они должны как выписка из журнала, а не как список достижений. */
#modal-box ul.why { list-style: none; padding-left: 0; margin-bottom: 10px; }
#modal-box ul.why li {
  padding: 6px 10px; margin-bottom: 5px;
  border-left: 2px solid var(--line2); background: rgba(255,255,255,.02); color: var(--dim);
}
#modal-box p.tell { color: var(--tell); }
#modal-box .act { display: inline-flex; }
.quiet { color: var(--quiet); font-size: 13px; }
.bad   { color: var(--warn); }
.ok    { color: var(--ok); }
.keys {
  color: var(--dim); font: 11px/1.7 ui-monospace, Consolas, monospace;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 8px 0; margin: 12px 0;
}
.row-btn { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* меню */
.menu-btns { display: grid; gap: 8px; margin: 14px 0; }
.mbtn {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 16px; cursor: pointer; width: 100%;
  background: linear-gradient(180deg, #182029, #10161d);
  border: 1px solid var(--line2); border-radius: 4px; color: var(--ink);
  font: 600 14px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em;
}
.mbtn:hover { border-color: var(--lit); background: linear-gradient(180deg, #222c37, #151d26); }
.mbtn span { font: 400 11px/1.4 "Segoe UI", sans-serif; letter-spacing: 0; color: var(--quiet); }
.mbtn.main { border-color: #6b5322; }
.mbtn.main:hover { box-shadow: 0 0 16px rgba(255,190,92,.18); }
.mbtn:disabled { opacity: .4; cursor: default; }

/* карточки вещей */
.kit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.kit-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px; cursor: pointer;
  background: #0b1016; border: 1px solid var(--line2); border-radius: 5px; color: var(--ink);
}
.kit-card:hover { border-color: var(--lit); background: #131a22; }
.kit-card b { color: var(--lit); font: 600 12px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.kit-card i { font-style: normal; font-size: 22px; }
.kit-card span { font-size: 12px; color: var(--dim); line-height: 1.45; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; margin: 10px 0; }
.stat {
  padding: 9px 12px; background: #0a0e13; border: 1px solid var(--line); border-radius: 4px;
  font: 600 19px/1.2 ui-monospace, Consolas, monospace;
}
.stat u {
  display: block; text-decoration: none; margin-bottom: 3px;
  font: 600 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; color: var(--quiet);
}

/* настройки */
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.set-row label { font-size: 13px; }
.set-row .quiet { display: block; font-size: 11px; }
.set-row input[type=range] { width: 160px; accent-color: #ffbe5c; }
.set-row input[type=text] {
  width: 170px; padding: 6px 8px; background: #070a0e;
  border: 1px solid var(--line2); border-radius: 3px; color: var(--ink);
  font: 12px ui-monospace, Consolas, monospace;
}
.sw {
  width: 56px; padding: 6px 0; cursor: pointer; flex: none;
  background: #0a0e13; border: 1px solid var(--line2); border-radius: 3px;
  color: var(--quiet); font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em;
}
.sw.on { background: #2a1f0a; border-color: #8a6a26; color: var(--lit); }

.chron { width: 100%; border-collapse: collapse; font: 12px ui-monospace, Consolas, monospace; }
.chron td, .chron th {
  padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; color: var(--dim);
}
.chron th { color: var(--quiet); font-size: 9px; letter-spacing: .12em; }
.chron td:first-child { color: var(--ink); }

.notes-list { display: grid; gap: 8px; }
.notes-list .note { margin: 0; }
.notes-list .locked {
  padding: 8px 10px; border: 1px dashed var(--line); border-radius: 3px;
  color: #38424f; font-style: italic; font-size: 12px;
}

/* ── ЯЗЫК ─────────────────────────────────────────────
   Флаги рисуются градиентами, а не эмодзи: на Windows 🇬🇧 показывается
   двумя буквами, и выбор языка выглядел бы опечаткой. */

.flag {
  display: inline-block; width: 30px; height: 20px; flex: none;
  border: 1px solid #2a3340; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.flag-ru { background: linear-gradient(#f2f2f2 0 33.4%, #1c4fa1 33.4% 66.7%, #c8102e 66.7%); }
.flag-gb {
  background:
    linear-gradient(to bottom, transparent 43%, #c8102e 43% 57%, transparent 57%),
    linear-gradient(to right,  transparent 43%, #c8102e 43% 57%, transparent 57%),
    linear-gradient(to bottom, transparent 36%, #f2f2f2 36% 64%, transparent 64%),
    linear-gradient(to right,  transparent 36%, #f2f2f2 36% 64%, transparent 64%),
    linear-gradient(56deg, transparent 46%, #f2f2f2 46% 54%, transparent 54%),
    linear-gradient(-56deg, transparent 46%, #f2f2f2 46% 54%, transparent 54%),
    #012169;
}

.lang-btns { display: flex; gap: 10px; margin: 16px 0 4px; flex-wrap: wrap; }
.lang-btn {
  flex: 1 1 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; cursor: pointer; text-align: left;
  background: #0d1117; border: 1px solid var(--line2); border-radius: 5px;
  color: var(--ink); font: inherit; transition: border-color .15s, background .15s, transform .1s;
}
.lang-btn:hover { border-color: var(--lit); background: #131a23; transform: translateY(-1px); }
.lang-btn b { font: 600 15px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.lang-btn span:last-child { color: var(--quiet); font-size: 11px; line-height: 1.4; }

/* В настройках язык — не строчка среди переключателей, а две большие двери:
   его сюда приходят ИСКАТЬ. Выбранный подсвечен и подписан галкой. */
.lang-pick { display: flex; gap: 10px; margin: 10px 0 12px; flex-wrap: wrap; }
.lang-big {
  flex: 1 1 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 14px; cursor: pointer; text-align: left;
  background: #0d1117; border: 1px solid var(--line2); border-radius: 5px;
  color: var(--ink); font: inherit; transition: border-color .15s, background .15s, transform .1s;
}
.lang-big:hover { border-color: var(--lit); background: #131a23; transform: translateY(-1px); }
.lang-big b { font: 600 15px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.lang-big span:last-child { color: var(--quiet); font-size: 11px; line-height: 1.4; }
.lang-big.on { border-color: var(--lit); background: rgba(200,168,90,.10); }
.lang-big.on b { color: var(--lit); }
.lang-big.on b::after { content: ' ✓'; }

.lang-mini { display: flex; gap: 6px; }
.lang-sw {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; cursor: pointer;
  background: #0d1117; border: 1px solid var(--line2); border-radius: 4px;
  color: var(--quiet); font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em;
}
.lang-sw.on { color: var(--lit); border-color: var(--lit); background: rgba(200,168,90,.08); }

.pause-btns { margin-top: 16px; flex-wrap: wrap; }

/* ── УЗКИЙ ЭКРАН ──────────────────────────────────── */

/* На узком экране колонки уже не помещаются в высоту — там страница снова
   листается, и это честно: три блока друг под другом иначе не показать. */
@media (max-width: 1010px) {
  body { overflow: auto; }
  #app { height: auto; }
  #board { grid-template-columns: 1fr; }
  #mid     { order: 1; }
  #house   { order: 2; max-height: 60vh; }
  #journal { order: 3; min-height: 250px; }
  #camera  { height: 216px; max-height: none; }
  #speaker { max-height: 30vh; }
  .hud-cell { min-width: 66px; padding: 4px 8px; font-size: 15px; }

  /* Страница листается — значит, кнопки обязаны ехать вместе с ней. Пульт
     прилипает к низу окна: решение всегда под большим пальцем, а не в конце
     простыни, до которой ещё надо домотать. */
  #controls {
    position: sticky; bottom: 0; z-index: 40;
    flex-wrap: wrap; margin-top: 8px; padding: 8px 0 4px;
    background: linear-gradient(180deg, rgba(6,8,11,0) 0, var(--bg) 26%, var(--bg) 100%);
  }
  #acts .act { padding: 7px 10px; font-size: 11px; }
  #decide { flex: 1 1 100%; }
  #decide .act { flex: 1; min-width: 0; }
}

/* Телефон. Игра сделана под клавиатуру и мышь, но itch открывают с телефона
   не спрашивая, и уехавшая вбок панель там хуже, чем мелкая, но целая.
   Нажимается всё пальцем, поэтому задача одна: ничто не вылезает за экран. */
@media (max-width: 620px) {
  body { overflow-x: hidden; }
  #app { padding: 8px 8px 10px; max-width: 100%; }

  /* Табло не влезает в строку — значит, оно живёт в две-три. */
  #hud { flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 8px; }
  .hud-cell { flex: 1 1 auto; min-width: 0; padding: 3px 6px; font-size: 14px; }
  .hud-cell .lbl { font-size: 8px; letter-spacing: .1em; }
  .hud-gap { display: none; }
  #hud-curfew, #hud-ask { flex: 1 1 100%; justify-content: center; }
  .icon { width: 34px; height: 30px; }

  #camera { height: 190px; }
  #cam-caption { font-size: 11px; padding: 12px 8px 5px; }
  #house { max-height: none; }
  #journal { min-height: 210px; }

  /* Дом ужимается по колонкам, а не по числу квартир: их всё равно 24. */
  .fl-row { grid-template-columns: 32px 1fr 14px; gap: 4px; padding: 2px; }
  .lamp { height: 32px; font-size: 12px; }
  .flat { height: 26px; }
  .wins { gap: 3px; }

  /* Проверки — по две в ряд, решение — во всю ширину под большим пальцем. */
  #acts { gap: 6px; }
  #acts .act { flex: 1 1 44%; padding: 8px 6px; font-size: 10px; }
  #decide .act { padding: 13px 6px; font-size: 13px; }
  #modal-box { padding: 16px 14px; }
}

/* Низкий экран (ноутбук 768p и меньше): ужимаем то, что можно ужать. */
@media (min-width: 1011px) and (max-height: 760px) {
  #camera { height: 34vh; min-height: 130px; }
  .act { padding: 7px 11px; }
  .act small { font-size: 8px; }
}

/* ── ВОЗДУХ ────────────────────────────────────────
   Снег, дождь, пыль. Ниже зерна, выше всего остального: погода идёт ПЕРЕД
   панелью, потому что панель стоит в подъезде, а не в вакууме. */
#fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 55;
}
html.no-parts #fx { display: none; }

/* ── ТО, ЧЕГО НЕ БЫВАЕТ ─────────────────────────────
   Единственная картинка во всей игре и единственный раз, когда она видна.
   Всё остальное здесь нарисовано кодом — потому это и работает. */
#scare {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #000; pointer-events: none; overflow: hidden;
}
#scare.hidden { display: none; }
#scare img {
  height: 96vh; width: auto; max-width: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: contrast(1.5) brightness(1.15);
}
#scare.hit           { animation: scare-bg .95s steps(1, end) forwards; }
#scare.hit img       { animation: scare-face .95s steps(2, end) forwards; }

/* Подглядывание: два кадра, полупрозрачно, без чёрного фона. Игрок не будет
   уверен, что вообще это видел, — и это страшнее, чем если бы был уверен. */
#scare.peek          { background: transparent; animation: scare-peek .16s linear forwards; }
#scare.peek img      { height: 62vh; filter: contrast(1.9) brightness(.55); }

@keyframes scare-bg {
  0%   { background: rgba(0,0,0,0); }
  4%   { background: #000; }
  86%  { background: #000; opacity: 1; }
  100% { background: rgba(0,0,0,0); opacity: 0; }
}
@keyframes scare-face {
  0%   { transform: scale(.35) translate(0,0); opacity: 0; }
  4%   { transform: scale(1.18) translate(0,0); opacity: 1; }
  12%  { transform: scale(1.10) translate(-2.2vw, 1.1vh); }
  20%  { transform: scale(1.26) translate(1.8vw, -1.4vh); }
  30%  { transform: scale(1.12) translate(-1.2vw, -.6vh); }
  42%  { transform: scale(1.34) translate(1.1vw, 1.3vh); }
  56%  { transform: scale(1.18) translate(-2.4vw, .3vh); }
  70%  { transform: scale(1.44) translate(.7vw, -1.1vh); }
  86%  { transform: scale(1.52) translate(0,0); opacity: 1; }
  100% { transform: scale(1.62) translate(0,0); opacity: 0; }
}
@keyframes scare-peek {
  0%   { opacity: 0; }
  30%  { opacity: .42; }
  70%  { opacity: .30; }
  100% { opacity: 0; }
}

/* Кто выключил скримеры в настройках — тому их и правда нет. */
html.no-scare #scare { display: none !important; }

/* ── ЯРКОСТЬ ────────────────────────────────────────
   Игра тёмная нарочно, но мониторы разные, а в подъезде и так ничего не видно. */
#app, #fx { filter: brightness(var(--bright, 1)); }

/* Ползунок с числом: «где-то посередине» — это не настройка. */
.set-rg { display: flex; align-items: center; gap: 10px; }
.set-rg input[type=range] { width: 150px; }
.set-rg b {
  min-width: 46px; text-align: right; color: var(--lit);
  font: 600 12px/1 ui-monospace, Consolas, monospace;
}