* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e14; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: #f0ead8; user-select: none; }
#app, #app canvas { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 18px; left: 20px; z-index: 10;
  background: rgba(15, 20, 30, 0.55); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 12px 18px; backdrop-filter: blur(6px);
}
#hud .hud-row { font-size: 26px; font-weight: 700; color: #ffd873; letter-spacing: 0.5px; }
#hud .hud-row.small { font-size: 14px; font-weight: 400; color: #cfd8e3; margin-top: 2px; }
#hud-rep { color: #ffb35c; letter-spacing: 2px; }

#objective {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: rgba(15, 20, 30, 0.55); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 8px 20px; font-size: 15px; color: #ffe9b8;
  backdrop-filter: blur(6px); text-align: center; max-width: 60vw;
}

#crosshair {
  position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; z-index: 10;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 0 6px rgba(0,0,0,0.6);
}

#hint {
  position: fixed; bottom: 14vh; left: 50%; transform: translateX(-50%); z-index: 10;
  background: rgba(15, 20, 30, 0.7); border: 1px solid rgba(255, 216, 115, 0.35);
  border-radius: 12px; padding: 10px 22px; font-size: 17px; color: #fff;
  white-space: nowrap; backdrop-filter: blur(6px);
}
#hint b { color: #ffd873; }
/* удержание E / ✋ для необратимых действий (HOLD в config): полоска заполняется снизу подсказки */
#hint.holding { background-image: linear-gradient(90deg, rgba(255,216,115,0.55) var(--hold, 0%), transparent var(--hold, 0%));
  background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; }

#battery {
  position: fixed; bottom: 20px; left: 20px; z-index: 10; width: 170px;
  background: rgba(15,20,30,0.6); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; padding: 8px 12px;
}
#battery-fill { height: 8px; border-radius: 4px; background: linear-gradient(90deg,#8fe06a,#ffd873); width: 100%; margin-bottom: 4px; transition: width 0.3s; }
#battery-label { font-size: 13px; color: #cfd8e3; }

#noise-ind {
  position: fixed; bottom: 20px; right: 20px; z-index: 10; width: 130px;
  background: rgba(15,20,30,0.6); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; padding: 8px 12px; font-size: 11px; color: #9aa7b8; letter-spacing: 2px;
}
#noise-fill { height: 6px; border-radius: 3px; background: #ff6a5c; width: 0%; margin-top: 4px; transition: width 0.15s; }

#stock-ind {
  position: fixed; bottom: 20px; right: 20px; z-index: 10;
  background: rgba(15,20,30,0.6); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; padding: 8px 14px; font-size: 15px; color: #ffe9b8; text-align: right;
}
#stock-ind b { color: #ffd873; font-size: 20px; }
#stock-ind small { display: block; color: #8fa3bd; font-size: 12px; margin-top: 2px; }



#vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 2s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(6,10,24,0.6) 100%); }
#vignette.night { opacity: 1; }

/* ---------- Тосты ---------- */
#toasts { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: rgba(20, 28, 40, 0.9); border-radius: 10px; padding: 9px 20px;
  font-size: 16px; font-weight: 600; border: 1px solid rgba(255,255,255,0.15);
  animation: toast-in 0.25s ease-out; transition: opacity 0.5s;
}
.toast.good { color: #9fe87a; border-color: rgba(159,232,122,0.4); }
.toast.bad { color: #ff8a7a; border-color: rgba(255,138,122,0.4); }
.toast.info { color: #ffe9b8; }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Меню ---------- */
#menu {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1d2b45 0%, #0a0e18 70%);
}
.menu-box {
  text-align: center; background: rgba(12, 17, 28, 0.8); padding: 44px 60px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.1); max-width: 640px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.menu-box h1 { font-size: 44px; letter-spacing: 6px; color: #ffd873; text-shadow: 0 0 30px rgba(255,216,115,0.35); }
.menu-box .subtitle { color: #8fa3bd; margin: 6px 0 30px; letter-spacing: 3px; font-size: 14px; text-transform: uppercase; }
.menu-btn {
  display: block; width: 100%; margin: 10px 0; padding: 13px 30px; font-size: 18px; font-weight: 600;
  font-family: inherit; color: #14202e; background: linear-gradient(180deg, #ffd873, #f5b53f);
  border: none; border-radius: 12px; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.menu-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,200,80,0.3); }
.menu-btn.secondary { background: rgba(255,255,255,0.1); color: #dfe8f2; }
.menu-btn.danger { background: linear-gradient(180deg, #ff8a6a, #e05a44); color: #fff; }
.record { margin-top: 22px; font-size: 13px; color: #7d8ea3; }
.site-link { display: inline-block; margin-top: 14px; font-size: 13px; color: #8fa3bd; text-decoration: none; }
.site-link:hover { color: #ffd873; }
.help-text { text-align: left; font-size: 15px; line-height: 1.65; color: #cfd8e3; margin-bottom: 20px; }
.help-text b { color: #ffd873; }

/* ---------- Переходы ---------- */
#transition {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #05070d;
  transition: opacity 1s; opacity: 1;
}
#transition.fading { opacity: 0; pointer-events: none; }
#transition h2 { font-size: 42px; letter-spacing: 4px; color: #ffd873; }
#transition p { margin-top: 12px; font-size: 17px; color: #8fa3bd; }

#pause { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(5,8,14,0.7); }

/* ---------- Модалки ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(5,8,14,0.55); }
.modal-box {
  background: #141c2a; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
  padding: 28px 34px; min-width: 440px; max-width: 90vw; box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  text-align: center;
}
.modal-box.wide { min-width: 720px; max-width: 96vw; }
.modal-box h3 { font-size: 24px; color: #ffd873; margin-bottom: 14px; }

/* сдача */
#change-info { font-size: 17px; line-height: 1.7; color: #dfe8f2; margin-bottom: 18px; text-align: left; }
#change-info .price-line b { color: #ffd873; font-size: 20px; }
#change-info .bills { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; }
.bill {
  padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 17px;
  border: 2px solid rgba(255,255,255,0.25); color: #14202e;
}
.bill.b5000 { background: #e8a0a8; } .bill.b1000 { background: #a8ccе8; background: #a9cbe8; }
.bill.b500 { background: #c7a9e0; } .bill.b100 { background: #f2d49a; } .bill.b50 { background: #a9d8bc; }
.change-input-row { display: flex; gap: 14px; align-items: center; justify-content: center; }
.change-input-row label { font-size: 19px; }
#change-input {
  width: 130px; font-size: 24px; font-weight: 700; text-align: center; padding: 8px;
  border-radius: 10px; border: 2px solid #ffd873; background: #0d1420; color: #ffd873; outline: none;
}
.change-input-row .menu-btn { width: auto; margin: 0; }
#change-result { min-height: 30px; margin-top: 14px; font-size: 17px; font-weight: 600; }
#change-result.good { color: #9fe87a; } #change-result.bad { color: #ff8a7a; }

/* каталог */
.cat-money { color: #cfd8e3; margin-bottom: 14px; } .cat-money span { color: #ffd873; font-weight: 700; }
.cat-cols { display: flex; gap: 26px; text-align: left; }
.cat-cols > div { flex: 1; }
.cat-cols h4 { color: #8fd8cf; margin-bottom: 10px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; font-size: 14px;
}
.cat-item .ci-name { flex: 1; } .cat-item .ci-name small { display: block; color: #8fa3bd; font-size: 11.5px; margin-top: 2px; }
.cat-item button {
  font-family: inherit; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 8px;
  border: none; cursor: pointer; background: #ffd873; color: #14202e; white-space: nowrap;
}
.cat-item button:disabled { background: rgba(255,255,255,0.12); color: #6b7a8d; cursor: default; }
.cat-item.owned { opacity: 0.55; }
.cat-footer { display: flex; gap: 14px; margin-top: 20px; justify-content: center; }
.cat-footer .menu-btn { width: auto; margin: 0; }

/* упаковка */
.pack-hint { color: #c9d6e6; font-size: 18px; margin-bottom: 12px; }
#pack-canvas { border-radius: 12px; background: #1b2536; cursor: crosshair; touch-action: none; }
/* мойка в мастерской (js/scrub.js) */
#scrub canvas { border-radius: 12px; cursor: grab; touch-action: none; max-width: 92vw; }
#scrub .modal-box { position: relative; }
#scrub .scrub-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #cfd8e3; font-size: 22px; cursor: pointer; }
#scrub .scrub-result { min-height: 26px; margin-top: 8px; font-size: 18px; font-weight: 700; color: #9fe87a; }
#scrub .scrub-done { width: auto; margin: 10px auto 0; font-size: 22px; padding: 12px 34px; }
/* грязная вещь в окне сетки (кладовка): пятна поверх картинки */
.gw-item.dirty::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 30% 35%, rgba(110,72,36,.55) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 60%, rgba(110,72,36,.5) 0 10%, transparent 11%),
    radial-gradient(circle at 45% 80%, rgba(110,72,36,.45) 0 8%, transparent 9%); }
.gw-dirty { left: 2px; bottom: 2px; font-size: 12px; }
@media (max-height: 560px) { #scrub canvas { height: calc(100dvh - 150px); width: auto; } #scrub h3, #scrub .scrub-hint { display: none; } }
#pack-result { min-height: 26px; margin-top: 10px; font-size: 17px; font-weight: 600; color: #9fe87a; }

/* ---------- Строки отчётов (отчёт дня, долг) ---------- */
.rep-sub { color: #8fa3bd; font-size: 14px; margin-bottom: 14px; text-align: center; }
.rep-title { color: #8fd8cf; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin: 10px 0 4px; }
.rep-row { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); }
.rep-row .good, .rep-total .good { color: #9fe87a; }
.rep-row .bad, .rep-total .bad { color: #ff8a7a; }
.rep-total { display: flex; justify-content: space-between; margin-top: 12px; font-size: 22px; font-weight: 700; }

/* ---------- Ночные загадки (js/puzzles/) ---------- */
#puzzle {
  --panel: #182131; --panel2: #212c41; --line: #33415c; --ink: #f0ead8; --muted: #9fb0c6;
  --gold: #ffd873; --gold2: #f5b53f; --green: #8fe06a; --red: #ff6a5c; --teal: #52c2b9; --blue: #6db3f2;
  --wire: #56627a; --slot: #131b29; --tile: #1c2638;
  --mono: 'Courier New', ui-monospace, monospace;
}
.pz { position: relative; width: min(680px, 94vw); min-width: 0; max-height: 94vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; align-items: center; color: var(--ink); }
.pz-head { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pz-head h3 { margin: 0; text-align: left; }
#pz-alert { align-self: stretch; background: rgba(255, 106, 92, 0.18); border: 1px solid var(--red); color: #ffb3a8;
  border-radius: 10px; padding: 8px 12px; font-weight: 600; animation: pz-pop 0.3s ease; }
#pz-stakes { display: flex; gap: 10px 18px; flex-wrap: wrap; justify-content: center; font-size: 17px; font-weight: 600; }
#pz-stakes .warn { color: var(--red); }
#puzzle .dim { color: #45526b; }
#pz-tbar { width: 100%; max-width: 420px; height: 8px; border-radius: 4px; background: var(--slot); overflow: hidden; }
#pz-tbar i { display: block; height: 100%; background: var(--green); transition: width 0.25s linear; }
#pz-tbar.warn i { background: var(--red); }
#pz-board { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; }
#puzzle .task { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
#puzzle .task em { font-style: normal; color: var(--gold); }
.pz-fb { margin: 0; min-height: 46px; font-size: 16px; color: var(--muted); line-height: 1.5; }
.pz-fb.good { color: var(--green); } .pz-fb.bad { color: var(--red); } .pz-fb.hint { color: var(--gold); }
#puzzle .mono { font-family: var(--mono); font-size: 20px; font-weight: 700; }
#puzzle .bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#puzzle .btn { font-family: inherit; font-weight: 600; font-size: 17px; padding: 11px 22px; border-radius: 12px; border: 2px solid transparent;
  cursor: pointer; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #1e1a0c; }
#puzzle .btn.sec { background: var(--panel2); color: var(--ink); border-color: var(--line); }
#puzzle button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* проведи ток / ремонт платы */
#puzzle .circ { --cs: min(72px, calc((94vw - 80px - 88px - (var(--n) + 1) * 6px) / var(--n)));
  display: grid; grid-template-columns: 44px repeat(var(--n), var(--cs)) 44px; grid-auto-rows: var(--cs); gap: 6px; }
#puzzle .cell { all: unset; cursor: pointer; display: block; }
#puzzle .cell svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform 0.18s ease; }
#puzzle .tb { fill: var(--tile); stroke: var(--line); stroke-width: 2; }
#puzzle .cell:hover .tb { fill: #243049; }
#puzzle .w { stroke: var(--wire); stroke-width: 12; } #puzzle .wd { fill: var(--wire); }
#puzzle .cell.on .w { stroke: var(--gold); } #puzzle .cell.on .wd { fill: var(--gold); }
#puzzle .cell.on svg { filter: drop-shadow(0 0 5px rgba(255, 216, 115, 0.6)); }
#puzzle .cell.flash .tb { stroke: var(--gold); stroke-width: 5; }
#puzzle .term { position: relative; }
#puzzle .term svg { width: 100%; height: 100%; display: block; overflow: visible; }
#puzzle .bulb { fill: #3a4660; transition: fill 0.2s; } #puzzle .lamp.on .bulb { fill: var(--gold); }
#puzzle .lamp.on svg { filter: drop-shadow(0 0 12px rgba(255, 216, 115, 0.9)); }
#puzzle .pcb .tb { fill: #1d4a36; stroke: #2d6b4f; }
#puzzle .pcb .cell:hover .tb { fill: #235a42; }
#puzzle .pcb .w { stroke: #b07a45; } #puzzle .pcb .wd { fill: #b07a45; }
#puzzle .pcb .cell.on .w { stroke: var(--gold); } #puzzle .pcb .cell.on .wd { fill: var(--gold); }
#puzzle .pcb .cell { position: relative; }
#puzzle .op { position: absolute; inset: 0; margin: auto; width: 60%; height: 42%; display: grid; place-items: center; pointer-events: none;
  background: #1a1f27; color: #fff; border: 2px solid #3b4658; border-radius: 7px; font-weight: 700; font-size: clamp(12px, calc(var(--cs) * 0.24), 18px); }
#puzzle .cell.on .op { border-color: var(--gold); color: var(--gold); }
#puzzle .cell.blocked .op { border-color: var(--red); color: var(--red); }
#puzzle .val { position: absolute; top: 2px; right: 3px; pointer-events: none; font-family: var(--mono); font-size: 12px; font-weight: 700;
  background: #0b1b13; color: var(--green); border-radius: 4px; padding: 0 4px; }
#puzzle .volt { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 12px; font-weight: 600; color: var(--green); }
#puzzle .dev { display: flex; align-items: center; justify-content: center; }
#puzzle .scr { width: 40px; height: 86%; border-radius: 7px; background: #10151f; border: 3px solid #8f9aa8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; line-height: 1.1; transition: background 0.2s, box-shadow 0.2s; }
#puzzle .scr b { font-size: 13px; } #puzzle .scr small { font-size: 10px; color: var(--muted); }
#puzzle .dev.low .scr { background: #2a3548; }
#puzzle .dev.high .scr { background: #7a2b25; box-shadow: 0 0 12px var(--red); }
#puzzle .dev.ok .scr { background: #bfe8ff; color: #10151f; box-shadow: 0 0 16px var(--blue); }
#puzzle .dev.ok .scr small { color: #33415c; }

/* предохранители */
#puzzle .screen { font-family: var(--mono); background: #0b1b13; color: var(--green); border: 2px solid #1f3a2a; border-radius: 10px;
  padding: 4px 18px; display: inline-flex; gap: 14px; align-items: baseline; }
#puzzle .screen span { font-size: 15px; letter-spacing: 0.12em; } #puzzle .screen b { font-size: 40px; }
#puzzle .bulbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 20px; }
#puzzle .bulbs i { width: 20px; height: 20px; border-radius: 50%; background: #3a4660; transition: background 0.2s, box-shadow 0.2s; }
#puzzle .bulbs.on i { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
#puzzle .sockets { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#puzzle .sock { all: unset; box-sizing: border-box; width: 46px; height: 78px; border-radius: 10px; border: 2px dashed var(--line);
  background: var(--slot); display: grid; place-items: center; }
#puzzle .sock.ghost { border-color: var(--gold); }
#puzzle button.sock { cursor: pointer; }
#puzzle .fuse { width: 32px; height: 62px; border-radius: 8px; position: relative; display: grid; place-items: center;
  background: linear-gradient(90deg, #aab2be, #f4f6f8 45%, #aab2be); font-weight: 700; font-size: 18px; color: #15181d; }
#puzzle .fuse::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; bottom: 18px; background: var(--fc); }
#puzzle .fuse span { position: relative; }
#puzzle .tray { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#puzzle .fbtn { all: unset; cursor: pointer; padding: 5px; border-radius: 12px; border: 2px solid transparent; }
#puzzle .fbtn[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 216, 115, 0.12); }
#puzzle .fbtn.hinted { animation: pz-pulse 1s ease-in-out infinite; }
#puzzle .meter { width: 100%; max-width: 420px; height: 14px; border-radius: 7px; background: var(--slot); position: relative; overflow: hidden; }
#puzzle .meter i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.5s ease; }
#puzzle .meter.over i { background: var(--red); }
#puzzle .meter::after { content: ''; position: absolute; left: 80%; top: 0; bottom: 0; width: 3px; background: var(--ink); }
#puzzle .stepper { display: flex; align-items: center; gap: 14px; justify-content: center; }
#puzzle .stepper button { width: 52px; height: 52px; border-radius: 50%; font: inherit; font-size: 26px; cursor: pointer;
  background: var(--panel2); color: var(--ink); border: 2px solid var(--line); }
#puzzle .stepper output { min-width: 110px; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; }
#puzzle .stepper output b { font-size: 26px; }

/* цветной замок */
#puzzle .lockbox { background: #121926; border: 2px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column;
  gap: 10px; align-items: center; min-width: min(100%, 280px); }
#puzzle .hist { display: flex; flex-direction: column; gap: 6px; align-items: center; max-height: 210px; overflow-y: auto; }
#puzzle .row { display: flex; gap: 8px; }
#puzzle .peg { all: unset; box-sizing: border-box; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; color: #15181d; background: var(--pc, var(--slot)); }
#puzzle .peg.empty { border: 2px dashed var(--line); }
#puzzle .peg.fixed { box-shadow: 0 0 0 3px var(--green); }
#puzzle button.peg { cursor: pointer; }
#puzzle .hpeg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#puzzle .hpeg .peg { width: 36px; height: 36px; font-size: 15px; }
#puzzle .mark { font-size: 14px; line-height: 1; height: 14px; }
#puzzle .ok { color: var(--green); } #puzzle .near { color: var(--gold); } #puzzle .no { color: #5b6880; }
#puzzle .palette { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#puzzle .palette .peg { width: 56px; height: 56px; font-size: 24px; }
#puzzle .keys { font-size: 14px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* подарок */
#puzzle .gcards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#puzzle .gcard { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px;
  border-radius: 12px; border: 2px solid var(--line); background: var(--slot); }
#puzzle .gcard:hover { border-color: var(--gold); }
#puzzle .gcard b { font-size: 17px; }
#puzzle .gcard.crossed { opacity: 0.35; text-decoration: line-through; }
#puzzle .gbox { width: 110px; height: 110px; }
#puzzle .gb { fill: #c89a64; stroke: #8a6a40; stroke-width: 2; }
#puzzle .gi { fill: #6db3f2; stroke: #1d3350; stroke-width: 2; opacity: 0.9; }
#puzzle .gitem { display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: 14px; }
#puzzle .gribbon { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; color: var(--gold); }
#puzzle .gwrap { display: flex; align-items: center; gap: 6px; }
#puzzle .gribbon .gbox { width: 150px; height: 150px; }
/* подарок: коробка сверху и муравей-подсказка про периметр */
#puzzle .gwalk { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
#puzzle .gtop-view { width: min(360px, 86vw); height: auto; overflow: visible; }
#puzzle .gbow { font-size: 30px; opacity: 0.5; }
#puzzle .glab { font-size: 24px; font-weight: 800; fill: var(--ink); transition: fill 0.2s; }
#puzzle .glab.on { fill: var(--gold); }
#puzzle .gtrail { stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity 0.25s; }
#puzzle .gtrail.on { opacity: 1; }
#puzzle .gtrail.gall { stroke: #ff7fa8; } #puzzle .gtrail.glong { stroke: var(--gold); } #puzzle .gtrail.gshort { stroke: var(--blue); }
#puzzle .gant { font-size: 26px; pointer-events: none; }
#puzzle .gwalk:not(.walking) .gant { display: none; }
#puzzle .gsum { min-height: 40px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px;
  font-family: var(--mono); font-size: 28px; font-weight: 800; }
#puzzle .gsum i { font-style: normal; color: var(--muted); }
#puzzle .gsum b.gall { color: #ff9fbf; } #puzzle .gsum .glong { color: var(--gold); } #puzzle .gsum .gshort { color: var(--blue); }
#puzzle .gsum .gtotal { color: var(--green); font-size: 34px; }
#puzzle .gsum small { flex-basis: 100%; text-align: center; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--muted); }
#puzzle .gsum .pop { display: inline-block; animation: pz-pop 0.3s ease; }
#puzzle .gagain { min-height: 44px; }

/* найди поломку */
#puzzle .dpair { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
#puzzle .dpair > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#puzzle .dlab { font-size: 14px; font-weight: 700; }
#puzzle .dlab.ok { color: var(--green); } #puzzle .dlab.bad { color: var(--red); }
#puzzle .dboard { display: grid; grid-template-columns: repeat(var(--c), 52px); gap: 4px; padding: 8px; border-radius: 10px;
  background: #1d4a36; border: 2px solid #2d6b4f; }
#puzzle .dcell { all: unset; width: 52px; height: 52px; border-radius: 6px; display: grid; place-items: center; }
#puzzle .dcell svg { width: 46px; height: 46px; overflow: visible; }
#puzzle button.dcell { cursor: pointer; }
#puzzle button.dcell:hover { background: rgba(255, 255, 255, 0.08); }
#puzzle .dcell.hrow { background: rgba(255, 216, 115, 0.18); }
#puzzle .dcell.found { background: rgba(143, 224, 106, 0.35); box-shadow: 0 0 0 3px var(--green); }
#puzzle .pad { fill: #c9ced6; }

/* итог загадки */
.pz-over { position: absolute; inset: 0; border-radius: 18px; background: rgba(12, 17, 28, 0.94); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px; animation: pz-pop 0.35s ease; }
.pz-over.win { background: radial-gradient(circle at 50% 38%, rgba(255, 216, 115, 0.3), rgba(12, 17, 28, 0.95) 60%); }
.pz-over.fail { background: radial-gradient(circle at 50% 38%, rgba(255, 106, 92, 0.25), rgba(12, 17, 28, 0.95) 60%); }
.pz-over h2 { font-size: 30px; }
.pz-over .big { font-size: 60px; line-height: 1; }
.pz-over p { color: var(--muted); }
.pz-over .loot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pz-over .loot span { background: var(--panel2); border: 2px solid var(--green); border-radius: 999px; padding: 6px 14px; font-size: 16px; }

#puzzle .shake { animation: pz-shake 0.35s; }
@keyframes pz-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pz-pulse { 50% { transform: scale(1.1); } }
@keyframes pz-pop { from { transform: scale(0.94); opacity: 0; } }

/* ?perf — счётчик производительности (js/quality.js) */
#perf { position: fixed; top: 8px; right: 8px; z-index: 200; pointer-events: none; font: 12px 'Courier New', monospace;
  color: #7dff9e; background: rgba(0, 0, 0, 0.6); padding: 4px 8px; border-radius: 6px; }

/* ?debug — панель отладки (js/debug.js) */
#debug { position: fixed; left: 8px; bottom: 8px; z-index: 300; max-width: min(720px, 96vw); display: flex; flex-direction: column; gap: 6px;
  background: rgba(10, 14, 22, 0.94); border: 1px solid #ffd873; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
#debug div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
#debug i { font-style: normal; color: #8fa3bd; width: 88px; }
#debug .dbg-state { color: #8fd8cf; margin-left: 8px; }
#debug button { font: inherit; padding: 4px 9px; border-radius: 6px; border: 1px solid #33415c; background: #212c41; color: #f0ead8; cursor: pointer; }
#debug select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid #33415c; background: #212c41; color: #f0ead8; max-width: 220px; }
#debug button:hover { border-color: #ffd873; }

/* ---------- Вылазка: HUD рюкзака и разбор хабара ---------- */
#stock-ind .raid-row { display: flex; gap: 14px; justify-content: flex-end; align-items: baseline; }
#stock-ind .raid-time { font-size: 22px; font-weight: 700; color: #ffd873; }
#stock-ind .raid-time.warn { color: #ff8a7a; }
#stock-ind .raid-big { display: block; color: #ffb35c; font-size: 12px; margin-top: 2px; }
.haul-sub { color: #8fa3bd; font-size: 14px; margin-bottom: 12px; }
#haul-rows { max-height: 52vh; overflow-y: auto; text-align: left; }
.haul-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,0.1); }
.haul-row .hr-name { flex: 1; font-size: 15px; }
.haul-row .hr-name small { display: block; color: #8fa3bd; font-size: 12px; }
.haul-row .hr-acts { display: flex; gap: 6px; }
.haul-row .hr-acts button {
  padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
  color: #cfd8e3; font-size: 13px; cursor: pointer; font-family: inherit;
}
.haul-row .hr-acts button.on { background: #3aa6a0; color: #fff; border-color: #3aa6a0; }
.haul-row.lost { opacity: 0.55; }
.haul-row.lost .hr-name { text-decoration: line-through; }
#haul-total { margin-top: 12px; font-size: 18px; color: #ffd873; text-align: left; }
#haul-total small { display: block; color: #8fa3bd; font-size: 13px; margin-top: 4px; }
#haul .menu-btn { margin-top: 14px; }

#stock-ind .raid-alert { display: block; color: #8fe06a; font-weight: 700; font-size: 16px; margin-top: 6px; letter-spacing: 1px; }

/* сейф: примеры, дисплей кода, клавиатура */
#puzzle .safe-exs { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
#puzzle .safe-ex { font-size: 26px; padding: 8px 16px; border-radius: 12px; background: var(--tile); border: 2px solid var(--line); }
#puzzle .safe-ex b { color: var(--gold); } #puzzle .safe-ex .q { color: var(--muted); letter-spacing: 3px; }
#puzzle .safe-ex.bad { border-color: var(--red); }
#puzzle .safe-display { display: flex; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--slot); border: 2px solid var(--line); }
#puzzle .safe-display .scell { width: 44px; height: 54px; border-radius: 8px; background: var(--tile); display: grid; place-items: center;
  font-size: 30px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
#puzzle .safe-display .scell.on { box-shadow: inset 0 0 0 2px var(--teal); }
#puzzle .keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }
#puzzle .kbtn { all: unset; box-sizing: border-box; height: 56px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 24px; font-weight: 700; cursor: pointer; }
#puzzle .kbtn:hover { border-color: var(--teal); }
#puzzle .kbtn.go { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #1e1a0c; font-size: 17px; border-color: transparent; }

/* ---------- Каталог: подпись ---------- */
.cat-note { margin-top: 12px; color: #8fa3bd; font-size: 14px; }

/* ---------- Окно сетки вещей (js/gridview.js): рюкзак, фургон, кладовка. --c — размер клетки (считает окно) ---------- */
#gridwin { z-index: 62; }
#gridwin .gw-box { --c: 40px; background: #141c2a; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 14px 18px;
  max-width: 98vw; max-height: 98vh; max-height: 98dvh; box-shadow: 0 30px 80px rgba(0,0,0,0.7); display: flex; flex-direction: column;
  gap: 8px; touch-action: none; -webkit-user-select: none; user-select: none; }
.gw-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.gw-title { font-size: 21px; color: #ffd873; }
.gw-status { font-size: 15px; font-weight: 800; color: #ff9f7a; }
.gw-status.safe { color: #8fe06a; }
.gw-alert { background: rgba(255,106,92,0.18); border: 1px solid #ff6a5c; color: #ffe0da; border-radius: 10px; padding: 4px 12px;
  font-size: 15px; font-weight: 700; text-align: center; }
.gw-body { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.gw-panel { display: flex; flex-direction: column; gap: 4px; }
.gw-cap { font-size: 15px; font-weight: 700; color: #ffe9b8; white-space: nowrap; text-align: left; }
.gw-cap small { color: #8fa3bd; font-weight: 400; font-size: 13px; margin-left: 4px; }
.gw-hint { color: #8fa3bd; font-size: 12px; width: 100%; margin: auto 6px; text-align: center; line-height: 1.3; }
.gw-grid { position: relative; box-sizing: content-box; background-color: #0c121c; border: 2px solid #3a4a63; border-radius: 6px; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: var(--c) var(--c); }
.gw-tray { box-sizing: content-box; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 4px; overflow-y: auto;
  background: rgba(255,255,255,0.04); border: 2px dashed #4a5a73; border-radius: 8px; }
.gw-item { position: absolute; box-sizing: border-box; border: 2px solid #9aa4b2; border-radius: 6px; background: rgba(38,50,70,0.9);
  overflow: hidden; cursor: grab; touch-action: none; }
.gw-tray .gw-item { position: relative; flex: 0 0 auto; }
/* лоток прокручивается пальцем по вертикали; перетаскивание вещи начинается только после GRID.dragPx */
.gw-tray, .gw-tray .gw-item { touch-action: pan-y; }
.gw-item img { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.gw-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.gw-item i { position: absolute; font-style: normal; pointer-events: none; line-height: 1; }
.gw-price { right: 2px; bottom: 2px; font: 800 11px/1 'Segoe UI', system-ui, sans-serif; color: #ffd873; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.gw-broken { left: 2px; top: 2px; font-size: 12px; }
.gw-badge { right: 2px; top: 2px; font-size: 13px; }
.gw-hl { position: absolute; border-radius: 6px; pointer-events: none; z-index: 2; }
.gw-hl.ok { background: rgba(95,208,104,0.35); box-shadow: inset 0 0 0 3px #5fd068; }
.gw-hl.bad { background: rgba(255,106,92,0.35); box-shadow: inset 0 0 0 3px #ff6a5c; }
.gw-ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0.92; }
.gw-ghost .gw-item { box-shadow: 0 10px 24px rgba(0,0,0,0.6); cursor: grabbing; }
.gw-info { font-size: 15px; color: #cfd8e3; min-height: 21px; text-align: center; }
.gw-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gw-btns button { font-family: inherit; font-size: 15px; font-weight: 700; padding: 8px 16px; min-height: 44px; border-radius: 10px;
  border: 2px solid #3aa6a0; background: #1d2b3d; color: #f0ead8; cursor: pointer; }
.gw-btns button.main { background: #ffd873; color: #14202e; border-color: #c99a1a; }
.gw-btns button:disabled { opacity: 0.4; cursor: default; }
/* полоска заполненности рюкзака в HUD склада */
#stock-ind .bag-bar { display: inline-block; width: 54px; height: 8px; margin: 0 6px 1px; vertical-align: middle; border-radius: 4px;
  background: rgba(255,255,255,0.15); overflow: hidden; }
#stock-ind .bag-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fe06a, #ffd873); }
#stock-ind .bag-bar i.full { background: #ff8a5c; }

/* ---------- Касса с видом сверху (js/cashdesk.js) ---------- */
#cash { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
#cash > * { pointer-events: auto; }
#cash .cash-check { position: fixed; top: 18px; right: 20px; background: rgba(16, 34, 26, 0.92); border: 2px solid #7dff9a; border-radius: 14px;
  padding: 10px 22px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
#cash .cash-check span { display: block; color: #9fe8b0; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
#cash .cash-check b { display: block; color: #7dff9a; font-size: 44px; line-height: 1.1; }
#cash-say { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.95); color: #1c2430;
  font-size: 22px; font-weight: 700; padding: 12px 24px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
#cash-say.good { color: #2f7a3a; } #cash-say.bad { color: #b0402f; }
#cash-hint { position: fixed; top: 110px; left: 20px; background: rgba(20, 28, 42, 0.94); border: 2px solid #ffd873; border-radius: 14px;
  padding: 12px 18px; max-width: 360px; color: #f0ead8; }
#cash-hint .ch-title { color: #ffd873; font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
#cash-hint .ch-col { font: 800 30px/1.2 'Consolas', 'Courier New', monospace; color: #ffe9b8; margin: 0 0 8px; }
#cash-hint .ch-steps { font-size: 17px; line-height: 1.7; }
#cash-hint .ch-steps span { color: #9fb0c6; } #cash-hint .ch-steps b { color: #ffd873; } #cash-hint .ch-steps i { font-style: normal; color: #8fe06a; font-weight: 700; }
#cash-help { position: fixed; bottom: 96px; right: 20px; max-width: 340px; text-align: right; color: #fff; font-size: 15px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
#cash .cash-btns { position: fixed; bottom: 22px; right: 20px; display: flex; gap: 12px; }
#cash .cash-btns .menu-btn { width: auto; margin: 0; font-size: 20px; padding: 14px 26px; }
/* особые покупатели (срез 3): чек столбиком, «Я дал…», карточки итога и торга, полоска долей */
#cash-lines { min-width: 220px; margin: 6px 0 2px; text-align: left; font-size: 19px; color: #d8ffe2; }
#cash-lines .cl-row { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
#cash-lines .cl-row b { color: #7dff9a; font-size: 22px; }
#cash-lines .cl-total { display: flex; justify-content: space-between; border-top: 2px dashed #7dff9a; margin-top: 6px; padding-top: 4px;
  font-weight: 800; font-size: 22px; color: #ffd873; }
#cash-claim { position: fixed; top: 18px; left: 20px; background: #fff; color: #1c2430; font-size: 26px; font-weight: 800;
  padding: 12px 22px; border-radius: 22px 22px 22px 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
#cash-claim.checked { background: #e9ffe9; color: #2f7a3a; }
#cash-ask { position: fixed; top: 130px; left: 50%; transform: translateX(-50%); width: min(560px, 94vw); text-align: center;
  background: rgba(20, 28, 42, 0.95); border: 3px solid #ffd873; border-radius: 18px; padding: 16px 18px; color: #f0ead8;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
#cash-ask .ca-title { font-size: 28px; font-weight: 800; color: #ffd873; }
#cash-ask .ca-sub { font-size: 20px; margin: 4px 0 8px; }
#cash-ask .ca-note { font-size: 16px; color: #9fb0c6; margin-top: 4px; }
#cash-ask .ca-cards { display: flex; gap: 14px; justify-content: center; margin: 12px 0 6px; }
#cash-ask .ca-card { position: relative; min-width: 130px; padding: 16px 18px; font-size: 30px; font-weight: 800; color: #1c2430; cursor: pointer;
  background: linear-gradient(180deg, #fff7dd, #ffe3a0); border: 3px solid #f5b53f; border-radius: 16px; }
#cash-ask .ca-card small { position: absolute; top: 4px; left: 8px; font-size: 13px; color: #8a6a40; }
#cash-ask .ca-card:hover:not(:disabled) { transform: translateY(-2px); }
#cash-ask .ca-card.bad { text-decoration: line-through; opacity: 0.45; border-color: #ff6a5c; }
#cash-ask .ca-card.good { background: linear-gradient(180deg, #e9ffe0, #b9f09a); border-color: #6bc24a; }
#cash-ask .ca-card:disabled:not(.good):not(.bad) { opacity: 0.55; }
#cash-ask .ca-info { font-size: 20px; margin-top: 8px; }
#cash-ask .ca-info.good { color: #9fe87a; } #cash-ask .ca-info.bad { color: #ff9a8a; } #cash-ask .ca-info.hint { color: #ffe9b8; }
#cash-ask .ca-col { display: inline-block; text-align: left; font: 800 26px/1.2 'Consolas', 'Courier New', monospace; color: #ffe9b8; margin: 6px 0 0; }
#cash-ask .ca-col i { font: 400 15px 'Segoe UI', sans-serif; color: #9fb0c6; }
#cash-ask .ca-next { width: auto; margin: 10px auto 0; font-size: 20px; padding: 10px 26px; }
#cash-ask .fs { margin: 8px auto 2px; }
#cash-ask .fs svg { max-width: 100%; height: auto; }
#cash-ask .fs-off { fill: #ff8a7a; } #cash-ask .fs-pay { fill: #8fe06a; }
#cash-ask .fs-num { font: 800 17px 'Segoe UI', sans-serif; fill: #1c2430; text-anchor: middle; }
#cash-ask .fs-num.small { font-size: 11px; }
#cash-ask .fs-legend { font-size: 16px; margin-top: 2px; }
#cash-lie.glow { animation: lieGlow 0.8s ease-in-out infinite alternate; }
@keyframes lieGlow { from { box-shadow: 0 0 0 0 rgba(255,106,92,0.9); transform: scale(1); } to { box-shadow: 0 0 22px 8px rgba(255,106,92,0.7); transform: scale(1.07); } }
#pack-done { width: auto; margin: 12px auto 0; font-size: 22px; padding: 12px 34px; }
#cash-ask .fs-legend .off { color: #ff9a8a; } #cash-ask .fs-legend .pay { color: #8fe06a; margin-left: 12px; }

/* ---------- Сенсор (js/touch.js, body.touch): телефоны и планшеты, ?touch на ПК ---------- */
html, body { height: 100vh; height: 100dvh; }           /* dvh — без прыжков от адресной строки iOS */
body { -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; -webkit-text-size-adjust: 100%; }  /* manipulation: без зума двойным тапом */
#app canvas { touch-action: none; }
#pause { cursor: pointer; }
body.touch #toasts, body.touch #hint, body.touch #objective { pointer-events: none; }
/* HUD снизу уходит наверх: низ экрана — пальцы (джойстик слева, кнопки справа) */
body.touch #battery { bottom: auto; top: calc(128px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); }
body.touch #stock-ind, body.touch #noise-ind { bottom: auto; top: calc(86px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
body.touch #hud { top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
body.touch #hint { bottom: calc(150px + env(safe-area-inset-bottom)); max-width: 50vw; white-space: normal; font-size: 15px; }
/* окна не шире экрана и прокручиваются пальцем (крупная вёрстка — срез 2) */
body.touch .modal-box { min-width: min(440px, 96vw); max-height: 96vh; max-height: 96dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.touch .modal-box.wide { min-width: min(720px, 96vw); }
body.touch .menu-box { max-height: 96vh; max-height: 96dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 32px; }
body.touch .modal, body.touch #menu { touch-action: pan-y; }

#touch { position: fixed; inset: 0; z-index: 20; touch-action: none; -webkit-user-select: none; user-select: none; }
#touch .t-stick { position: fixed; left: 0; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none;
  border-radius: 50%; background: rgba(255,255,255,0.10); border: 3px solid rgba(255,255,255,0.35); }
#touch .t-knob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(255,216,115,0.55); border: 3px solid rgba(255,255,255,0.7); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
#touch .t-btn { position: fixed; width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.45);
  background: rgba(20,28,40,0.45); color: #fff; font-family: inherit; display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1; touch-action: none; -webkit-tap-highlight-color: transparent; padding: 0; cursor: pointer;
  --r: env(safe-area-inset-right); --b: env(safe-area-inset-bottom); }
#touch .t-btn .t-ico { font-size: 28px; pointer-events: none; }
#touch .t-btn small { font-size: 11px; font-weight: 700; margin-top: 3px; color: #ffe9b8; text-shadow: 0 1px 3px #000; pointer-events: none;
  max-width: 100%; overflow: hidden; }
#touch .t-btn.down { transform: scale(0.92); background: rgba(255,216,115,0.45); }
#touch .t-btn.on { border-color: #ffd873; background: rgba(255,216,115,0.35); }
/* раскладка под большой палец правой руки */
#touch .t-slot-A  { right: calc(16px + var(--r)); bottom: calc(16px + var(--b)); width: 112px; height: 112px;
  background: rgba(255,200,80,0.40); border-color: #ffd873; }
#touch .t-slot-A .t-ico { font-size: 40px; }
#touch .t-slot-A small { font-size: 13px; line-height: 1.1; max-width: 100px; white-space: normal; text-align: center; }
#touch .t-slot-J  { right: calc(142px + var(--r)); bottom: calc(18px + var(--b)); width: 76px; height: 76px; }
#touch .t-slot-C  { right: calc(230px + var(--r)); bottom: calc(18px + var(--b)); }
#touch .t-slot-U1 { right: calc(28px + var(--r)); bottom: calc(142px + var(--b)); width: 84px; height: 84px; }
#touch .t-slot-U1 .t-ico { font-size: 34px; }
#touch .t-slot-U2 { right: calc(132px + var(--r)); bottom: calc(112px + var(--b)); }
#touch .t-slot-P  { right: calc(16px + var(--r)); top: calc(12px + env(safe-area-inset-top)); width: 64px; height: 64px; }
#touch .t-slot-P .t-ico { font-size: 26px; }
#touch-debug { position: fixed; z-index: 310; right: calc(92px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top));
  width: 48px; height: 48px; border-radius: 12px; border: 2px solid rgba(255,216,115,0.6); background: rgba(20,28,40,0.7);
  font-size: 22px; color: #fff; touch-action: none; }
/* «Поверни телефон»: только сенсор и только портрет; игра в это время стоит (Focus.frozen) */
#rotate { display: none; }
@media (orientation: portrait) {
  body.touch #rotate { display: flex; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; background: #0b0e14; color: #ffd873; font-size: 30px; font-weight: 800; text-align: center; }
  body.touch #rotate .rot-ico { font-size: 96px; animation: rotHint 1.6s ease-in-out infinite; }
}
@keyframes rotHint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

html, body { overscroll-behavior: none; }               /* Android: без pull-to-refresh (перезагрузка с окна) */
input, textarea { -webkit-user-select: text; user-select: text; }

/* ======================================================================================
   Срез 2: адаптивная вёрстка. ПК с обычным окном не затрагивается:
   · body.touch — сенсор (цели касания ≥ 44 px, подписи клавиш прячутся);
   · @media (max-height: 560px) — телефон в альбоме (высота 360–430) и низкое окно на ПК.
   ====================================================================================== */
body.touch .pc-only { display: none !important; }
body:not(.touch) .touch-only { display: none !important; }
body.touch #cash-ask .ca-card small { display: none; }        /* номера 1–3 — клавиши, пальцу не нужны */
body.touch .menu-btn { min-height: 48px; }
body.touch .menu-btn:hover, body.touch #cash-ask .ca-card:hover:not(:disabled) { transform: none; }
body.touch .cat-item button { min-height: 44px; padding: 10px 16px; font-size: 15px; }
body.touch .haul-row .hr-acts button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
body.touch #puzzle .btn { min-height: 48px; }
body.touch #puzzle .kbtn { min-height: 48px; }
body.touch #puzzle .keypad { grid-template-columns: repeat(3, 76px); }
body.touch #puzzle .fbtn { padding: 8px; }
body.touch #debug button { min-height: 40px; padding: 6px 10px; }
/* касса: крупные кнопки под большой палец справа внизу */
body.touch #cash .cash-btns { right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); gap: 10px; }
body.touch #cash .cash-btns .menu-btn { min-height: 64px; min-width: 120px; font-size: 21px; padding: 12px 22px; border-radius: 16px; }
body.touch #cash .cash-btns #cash-give { min-width: 170px; }
body.touch #cash-ask .ca-card { min-height: 64px; }
body.touch #cash-ask .ca-next { min-height: 56px; }
body.touch #pack-done { min-height: 56px; }

/* окна со списком (сенсор): список прокручивается, кнопки «Готово/Закрыть» всегда на экране; низкий экран — ниже, в @media */
body.touch #haul .modal-box, body.touch #catalog .modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
body.touch #haul-rows, body.touch #catalog .cat-cols { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.touch #haul-rows { flex: 0 1 auto; }
body.touch #catalog .cat-cols { flex: 1 1 auto; }

@media (max-height: 560px) {
  /* меню, пауза, переходы */
  .menu-box { padding: 14px 26px; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .menu-box h1 { font-size: 32px; letter-spacing: 4px; }
  .menu-box h2 { font-size: 24px; }
  .menu-box .subtitle { margin: 2px 0 10px; font-size: 12px; }
  .menu-btn { margin: 6px 0; padding: 10px 24px; font-size: 18px; }
  .record, .site-link { margin-top: 8px; }
  .help-text { font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
  .help-text p { margin-bottom: 4px; }
  #help-box { max-width: min(760px, 96vw); }
  #transition h2 { font-size: 34px; } #transition p { font-size: 16px; padding: 0 20px; text-align: center; }

  /* HUD */
  #hud { padding: 6px 12px; border-radius: 12px; }
  #hud .hud-row { font-size: 20px; } #hud .hud-row.small { font-size: 12px; }
  #objective { top: 8px; font-size: 14px; padding: 5px 14px; max-width: 48vw; }
  #toasts { top: 58px; gap: 5px; } .toast { font-size: 15px; padding: 6px 14px; max-width: 60vw; text-align: center; }
  #hint { font-size: 15px; padding: 6px 14px; }
  #stock-ind { padding: 6px 10px; font-size: 13px; } #stock-ind b { font-size: 16px; }
  #stock-ind .raid-time { font-size: 19px; } #stock-ind .raid-row { gap: 10px; }
  #battery { width: 140px; padding: 6px 10px; }

  /* окна */
  .modal-box { padding: 12px 18px; min-width: min(440px, 96vw); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-box.wide { min-width: 0; width: min(900px, 96vw); }
  .modal-box h3 { font-size: 20px; margin-bottom: 6px; }
  #haul .modal-box, #catalog .modal-box { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); }
  #haul-rows, #catalog .cat-cols { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  #haul-rows { flex: 0 1 auto; }
  #catalog .cat-cols { flex: 1 1 auto; }
  #haul-rows { max-height: none; }
  .haul-sub, .cat-money, .cat-note { font-size: 14px; margin-bottom: 6px; }
  .cat-note { margin-top: 6px; }
  .haul-row { padding: 5px 2px; gap: 8px; flex-wrap: wrap; } .haul-row .hr-name { min-width: 160px; font-size: 15px; }
  .haul-row .hr-acts { flex-wrap: wrap; }
  #haul-total { margin-top: 6px; font-size: 16px; } #haul-total small { font-size: 12px; margin-top: 2px; }
  #haul .menu-btn { margin-top: 8px; }
  /* окно сетки: плотнее, клетку считает js/gridview.js */
  #gridwin .gw-box { padding: 8px 12px; gap: 4px; border-radius: 14px; }
  .gw-title { font-size: 17px; } .gw-status { font-size: 13px; } .gw-cap { font-size: 13px; } .gw-cap small { font-size: 11px; }
  .gw-body { gap: 12px; } .gw-info { font-size: 13px; min-height: 17px; } .gw-alert { font-size: 13px; padding: 2px 10px; }
  .gw-btns button { min-height: 40px; padding: 5px 12px; font-size: 14px; }
  .cat-item { padding: 6px 10px; margin-bottom: 6px; }
  .cat-footer { margin-top: 8px; }
  .rep-row { padding: 3px 0; } .rep-total { font-size: 19px; margin-top: 6px; }

  /* упаковка: холст влезает по высоте, координаты пересчитывает js/packing.js (_coords) */
  #packing .modal-box { padding: 8px 14px; }
  #packing h3 { display: none; }
  .pack-hint { font-size: 15px; margin-bottom: 4px; }
  #pack-canvas { height: calc(100vh - 130px); height: calc(100dvh - 130px); width: auto; max-width: 92vw; aspect-ratio: 560 / 360; }
  #pack-result { min-height: 20px; margin-top: 4px; font-size: 15px; }
  #pack-done { margin-top: 6px; font-size: 19px; padding: 8px 28px; }

  /* касса: панели меньше и по краям, центр — прилавок */
  #cash .cash-check { top: 8px; right: 12px; padding: 6px 14px; border-radius: 12px; }
  #cash .cash-check span { font-size: 12px; } #cash .cash-check b { font-size: 30px; }
  #cash-lines { min-width: 170px; font-size: 15px; } #cash-lines .cl-row b, #cash-lines .cl-total { font-size: 17px; }
  #cash-say { top: 44px; font-size: 17px; padding: 8px 16px; max-width: 46vw; text-align: center; }
  #cash-claim { top: 84px; left: 12px; font-size: 18px; padding: 8px 14px; }
  #cash-hint { top: 138px; left: 12px; padding: 8px 12px; max-width: 30vw; }
  #cash-hint .ch-title { font-size: 12px; margin-bottom: 2px; } #cash-hint .ch-col { font-size: 20px; margin-bottom: 4px; }
  #cash-hint .ch-steps { font-size: 14px; line-height: 1.5; }
  #cash-help { bottom: 90px; right: 14px; max-width: 34vw; font-size: 13px; }
  #cash .cash-btns { bottom: 12px; right: 12px; }
  #cash .cash-btns .menu-btn { font-size: 17px; padding: 10px 18px; }
  #cash-ask { top: 50%; transform: translate(-50%, -50%); width: min(620px, 80vw); padding: 10px 14px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; }
  #cash-ask .ca-title { font-size: 21px; } #cash-ask .ca-sub { font-size: 16px; margin: 2px 0 4px; } #cash-ask .ca-note { font-size: 14px; }
  #cash-ask .ca-cards { margin: 6px 0 4px; gap: 10px; }
  #cash-ask .ca-card { min-width: 110px; padding: 10px 14px; font-size: 24px; }
  #cash-ask .ca-info { font-size: 16px; margin-top: 4px; } #cash-ask .ca-col { font-size: 19px; }
  #cash-ask .fs { margin: 4px auto 0; } #cash-ask .fs svg { width: 280px; }
  #cash-ask .ca-next { margin-top: 6px; font-size: 18px; padding: 8px 22px; }

  /* загадки: слева — заголовок, ставки, подсказка; справа — поле. Высоты мало, ширины много */
  .pz { display: grid; width: min(1000px, 97vw); grid-template-columns: minmax(170px, 28%) 1fr; grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 16px; row-gap: 6px; align-items: start; max-height: calc(100vh - 10px); max-height: calc(100dvh - 10px); padding: 10px 14px; }
  .pz > *:not(#pz-over) { grid-column: 1; }
  .pz .pz-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .pz .pz-head h3 { font-size: 18px; }
  #pz-stakes { font-size: 14px; gap: 4px 10px; justify-content: flex-start; }
  #pz-tbar { max-width: none; }
  .pz-fb { min-height: 0; font-size: 14px; line-height: 1.35; }
  .pz #pz-board { grid-column: 2; grid-row: 1 / -1; align-self: center; gap: 8px; }
  #puzzle .task { font-size: 15px; line-height: 1.3; }
  .pz-over { border-radius: 14px; gap: 6px; padding: 12px; } .pz-over .big { font-size: 44px; } .pz-over h2 { font-size: 24px; }
  /* проведи ток / ремонт: клетка по высоте экрана */
  #puzzle .circ { --cs: min(64px, calc((62vw - 110px - (var(--n) + 1) * 6px) / var(--n)), calc((100vh - 96px - var(--n) * 6px) / var(--n))); }
  #puzzle .circ.pcb { --cs: min(64px, calc((62vw - 110px - (var(--n) + 1) * 6px) / var(--n)), calc((100vh - 150px - var(--n) * 6px) / var(--n))); }
  /* в переменной запасная строка не работает (берётся последняя) — dvh только там, где он есть */
  @supports (height: 1dvh) {
    #puzzle .circ { --cs: min(64px, calc((62vw - 110px - (var(--n) + 1) * 6px) / var(--n)), calc((100dvh - 96px - var(--n) * 6px) / var(--n))); }
    #puzzle .circ.pcb { --cs: min(64px, calc((62vw - 110px - (var(--n) + 1) * 6px) / var(--n)), calc((100dvh - 150px - var(--n) * 6px) / var(--n))); }
  }
  /* сейф: примеры и табло слева, клавиатура справа */
  #pz-board:has(> .keypad) { display: grid; grid-template-columns: auto auto; grid-template-areas: "task task" "exs pad" "disp pad";
    justify-content: center; align-items: center; column-gap: 18px; row-gap: 8px; }
  #pz-board > .task { grid-area: task; }
  #puzzle .safe-exs { grid-area: exs; gap: 8px; } #puzzle .safe-ex { font-size: 21px; padding: 4px 10px; }
  #puzzle .safe-display { grid-area: disp; justify-self: center; padding: 6px 10px; }
  #puzzle .safe-display .scell { width: 38px; height: 46px; font-size: 26px; }
  #puzzle .keypad { grid-area: pad; gap: 6px; } #puzzle .kbtn { height: 48px; }
  /* замок: код и история слева, палитра и кнопки справа */
  #pz-board:has(> .lockbox) { display: grid; grid-template-columns: auto auto; grid-template-areas: "task task" "box pal" "box keys" "box bar";
    justify-content: center; align-items: center; column-gap: 18px; row-gap: 8px; }
  #pz-board > .lockbox { grid-area: box; } #pz-board > .palette { grid-area: pal; max-width: 300px; }
  #pz-board > .keys { grid-area: keys; flex-direction: column; gap: 2px; } #pz-board > .bar { grid-area: bar; }
  #puzzle .hist { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  #puzzle .peg { width: 46px; height: 46px; } #puzzle .palette .peg { width: 50px; height: 50px; }
  /* предохранители: табло и счётчик слева, гнёзда и управление справа */
  #pz-board:has(> .sockets) { display: grid; grid-template-columns: auto auto; grid-template-areas: "task task" "scr sock" "bulb sock" "meter ctl" "go ctl";
    justify-content: center; align-items: center; column-gap: 18px; row-gap: 8px; }
  #pz-board > .screen { grid-area: scr; justify-self: center; } #pz-board > .bulbs { grid-area: bulb; }
  #pz-board > .sockets { grid-area: sock; } #pz-board > .meter { grid-area: meter; }
  #pz-board > .tray, #pz-board > .stepper { grid-area: ctl; } #pz-board:has(> .sockets) > .go { grid-area: go; justify-self: center; }
  #puzzle .screen b { font-size: 30px; } #puzzle .sock { height: 66px; } #puzzle .fuse { height: 54px; }
  /* подарок и поломка: всё мельче по высоте */
  #puzzle .gbox { width: 84px; height: 84px; } #puzzle .gribbon .gbox { width: 110px; height: 110px; }
  #puzzle .gtop-view { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); width: auto; max-width: min(360px, 60vw); }
  #puzzle .gsum { font-size: 22px; min-height: 0; } #puzzle .gsum .gtotal { font-size: 26px; }
  #puzzle .gcard { padding: 4px 6px; }
  #puzzle .dboard { grid-template-columns: repeat(var(--c), 46px); } #puzzle .dcell { width: 46px; height: 46px; }
  #puzzle .dcell svg { width: 40px; height: 40px; }
}

/* сенсор + низкий экран: HUD-кнопки сенсора (js/touch.js) чуть компактнее, чтобы не наезжать на подсказку */
@media (max-height: 420px) {
  #touch .t-slot-A { width: 100px; height: 100px; }
  #touch .t-slot-U1 { bottom: calc(126px + var(--b)); }
  body.touch #hint { bottom: calc(128px + env(safe-area-inset-bottom)); }
  body.touch #battery { top: calc(108px + env(safe-area-inset-top)); }
}

/* ---------- PWA (js/pwa.js): подсказка «На экран Домой» на iPhone/iPad в главном меню ---------- */
#a2hs { position: relative; margin-top: 14px; padding: 10px 36px 10px 14px; border-radius: 14px; text-align: left;
  background: rgba(77,163,255,0.12); border: 2px solid rgba(77,163,255,0.5); color: #e6f0ff; font-size: 15px; line-height: 1.4; }
#a2hs b { display: block; color: #ffd873; font-size: 16px; margin-bottom: 2px; }
#a2hs .a2hs-steps { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#a2hs svg { vertical-align: middle; background: #fff; border-radius: 6px; padding: 2px; }
#a2hs .a2hs-plus { display: inline-grid; place-items: center; width: 28px; height: 28px; background: #fff; border-radius: 6px; font-size: 14px; }
#a2hs .a2hs-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: none; background: none;
  color: #9fb0c6; font-size: 18px; cursor: pointer; }

/* ---------- Уроки (js/tutorial.js): рисованная сценка + реплика дяди Паши; «Альбом продавца» ---------- */
#lesson { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,14,0.62); padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.lesson-box { width: min(620px, 94vw); background: #1b2536; border: 3px solid #ffd873; border-radius: 22px; padding: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 12px; animation: lesson-in 0.35s ease-out; }
@keyframes lesson-in { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
#lesson-scene { border-radius: 14px; overflow: hidden; background: #fff3dd; line-height: 0; }
#lesson-scene svg { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; font-family: 'Segoe UI', system-ui, sans-serif; }
.lesson-side { display: flex; flex-direction: column; gap: 12px; }
.lesson-talk { display: flex; align-items: center; gap: 14px; }
#lesson-uncle { flex: 0 0 84px; width: 84px; height: 84px; }
#lesson-uncle svg { width: 100%; height: 100%; display: block; }
.lesson-bubble { position: relative; flex: 1; min-width: 0; background: #fff8e6; color: #2b2b3a; border-radius: 16px; padding: 10px 16px; text-align: left; }
.lesson-bubble::before { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right-color: #fff8e6; border-left: 0; }
.lesson-bubble h3 { font-size: 22px; color: #c46f1c; margin-bottom: 4px; }
.lesson-bubble p { font-size: 20px; line-height: 1.3; font-weight: 600; }
.lesson-bubble b { color: #c46f1c; }
#lesson-ok { margin: 0; font-size: 22px; padding: 14px 30px; min-height: 56px; }
#lesson-ok .pc-only { font-size: 14px; opacity: 0.7; }
#lesson-ok { transition: opacity 0.3s, filter 0.3s; }
#lesson-ok.wait { opacity: 0.5; filter: grayscale(0.5); cursor: default; } /* ≈ круг сценки: сначала посмотри */
.uncle-eyes { animation: uncle-blink 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes uncle-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) { .uncle-eyes, .lesson-box { animation: none; } }

#album { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; background: rgba(5,8,14,0.78); }
.album-box { display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.album-box h3 small { font-size: 15px; color: #8fa3bd; font-weight: 400; margin-left: 8px; }
.album-sub { color: #cfd8e3; font-size: 15px; margin: -6px 0 10px; }
#album-grid { overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; padding: 2px 4px; touch-action: pan-y; }
#album-grid h4 { color: #ffd873; font-size: 17px; margin: 8px 0 6px; }
.album-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.album-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 8px 6px;
  border-radius: 14px; border: 2px solid #ffd873; background: #25324a; color: #f0ead8; font: inherit; cursor: pointer; transition: transform 0.12s; }
.album-card:hover { transform: translateY(-2px); }
.album-card .ac-icon { font-size: 34px; line-height: 1; }
.album-card .ac-title { font-size: 14px; font-weight: 700; text-align: center; }
.album-card.locked { border: 2px dashed #3d4a63; background: #161e2c; color: #56637a; cursor: default; }
.album-card.locked .ac-icon { font-size: 30px; font-weight: 900; color: #3d4a63; }
.album-box .cat-footer { margin-top: 12px; }
#pause .menu-btn { margin-top: 18px; }
body.touch .album-card:hover { transform: none; }

/* телефон в альбоме и низкое окно: сценка слева, дядя Паша и кнопка справа */
@media (max-height: 560px) {
  .lesson-box { width: min(860px, 96vw); flex-direction: row; align-items: center; padding: 10px; gap: 12px; }
  #lesson-scene { flex: 1.25 1 0; min-width: 0; }
  #lesson-scene svg { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
  .lesson-side { flex: 1 1 0; min-width: 0; gap: 10px; }
  .lesson-talk { flex-direction: column; align-items: stretch; gap: 8px; }
  #lesson-uncle { width: 56px; height: 56px; flex-basis: 56px; }
  .lesson-bubble::before { display: none; }
  .lesson-bubble { padding: 8px 12px; }
  .lesson-bubble h3 { font-size: 19px; } .lesson-bubble p { font-size: 17px; }
  #lesson-ok { font-size: 20px; padding: 10px 20px; min-height: 52px; }
  .album-card { min-height: 72px; } .album-card .ac-icon { font-size: 28px; }
  #pause .menu-btn { margin-top: 10px; }
}

/* ---------- Экономика (js/economy.js, js/ui.js): аренда в HUD, вкладки каталога, диалог, карта склада ---------- */
#hud-rent { color: #bfe8ff; margin-top: 4px; }
#hud-rent.bad { color: #ff8a7a; font-weight: 700; animation: rent-blink 1.2s ease-in-out infinite; }
@keyframes rent-blink { 50% { opacity: 0.55; } }
.cat-rent { color: #bfe8ff; font-size: 15px; margin: -8px 0 10px; }
.cat-rent small { display: block; color: #8fa3bd; font-size: 12px; }
.cat-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.cat-tabs button { font: inherit; font-size: 16px; font-weight: 700; padding: 8px 16px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #dfe8f2; border: 2px solid rgba(255,255,255,0.15); }
.cat-tabs button.on { background: rgba(255,216,115,0.2); border-color: #ffd873; color: #ffe9b8; }
.cat-tabs button i { color: #8fe06a; font-style: normal; font-size: 12px; }
.cat-item .ci-lv { color: #8fd8cf; font-size: 12px; }
.ci-warn { color: #ff8a7a !important; font-weight: 700; }
#dialog { z-index: 105; } /* выше меню (100) и паузы (80): выбор сложности открывается из них; ниже альбома (110) и урока (120) */
#dialog .modal-box { max-width: min(560px, 96vw); }
#dialog .modal-box.wide { max-width: 96vw; }
#dlg-body { text-align: left; font-size: 16px; }
#dlg-body .dlg-say { margin: 8px 0; color: #ffe9b8; line-height: 1.4; }
#dlg-body .dlg-list { margin: 6px 0 6px 22px; color: #ffd873; font-size: 17px; line-height: 1.5; }
#dlg-body .rep-title { color: #8fd8cf; margin-top: 8px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
#dlg-body .rep-rent { margin-top: 10px; color: #bfe8ff; }
#dlg-body .rep-rent small { display: block; color: #8fa3bd; font-size: 12px; }
#dlg-btns { flex-wrap: wrap; }
#dlg-btns .menu-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
#dlg-btns .route-card { display: flex; flex-direction: column; align-items: center; min-width: 170px; max-width: 220px; padding: 12px 14px; }
#dlg-btns .route-card .rc-ico { font-size: 34px; }
#dlg-btns .route-card .rc-name { font-size: 18px; }
#dlg-btns .route-card small { font-size: 12px; font-weight: 600; opacity: 0.85; }
/* вопрос вечера «доход − расход = ?» (js/ui.js → showDayReport с quiz) */
#dlg-body .rep-sum { font-weight: 700; color: #ffe9b8; border-bottom: none; }
#dlg-body .rep-q { color: #ffd873; }
#dlg-body .rep-ok { color: #9fe87a; }
#dlg-btns .rep-card { min-width: 120px; font-size: 22px; font-weight: 800; }
#dlg-body .rep-ask { margin: 14px 0 4px; text-align: center; font-size: 32px; font-weight: 800; color: #ffd873; }
#dlg-body .rep-col { margin: 6px auto 0; width: max-content; text-align: right; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
#dlg-body .rep-col-line { border-top: 3px solid #ffe9b8; margin-top: 2px; color: #9fe87a; }
#minimap { position: fixed; top: 18px; right: 20px; z-index: 10; width: 132px; height: 132px; pointer-events: none; }
body.touch #minimap { top: calc(186px + env(safe-area-inset-top)); right: auto; left: calc(16px + env(safe-area-inset-left)); width: 110px; height: 110px; }
@media (max-height: 560px) {
  .cat-tabs { margin-bottom: 6px; } .cat-tabs button { font-size: 14px; padding: 6px 10px; }
  .cat-rent { margin: -4px 0 4px; font-size: 13px; }
  #dlg-body { font-size: 14px; } #dlg-body .dlg-list { font-size: 15px; }
  #dlg-btns .route-card { min-width: 140px; padding: 8px 10px; } #dlg-btns .route-card .rc-ico { font-size: 26px; }
  body.touch #minimap { top: calc(172px + env(safe-area-inset-top)); width: 92px; height: 92px; }
}
/* настроение покупателя у кассы (CASH.mood): лицо и полоска под ценой чека */
#cash #cash-mood { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#cash #cash-mood .cm-face { letter-spacing: 0; color: inherit; font-size: 26px; line-height: 1; }
#cash #cash-mood .cm-bar { flex: 1; min-width: 80px; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.15); overflow: hidden; display: block; }
#cash #cash-mood .cm-bar i { display: block; height: 100%; width: 100%; background: #7dff9a; transition: width 0.25s linear; }
#cash #cash-mood .cm-bar i.mid { background: #ffd873; }
#cash #cash-mood .cm-bar i.low { background: #ff6a5c; }
/* срез 2 склада: затемнение при поимке, кнопка свистка на сенсоре, выбранная сложность */
#blackout { position: fixed; inset: 0; z-index: 45; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
#blackout.on { opacity: 0.92; }
#touch .t-slot-W { right: calc(236px + var(--r)); bottom: calc(112px + var(--b)); }
#dlg-btns .route-card.on { outline: 3px solid #ffd873; }
#pause .menu-btn + .menu-btn { margin-top: 10px; }
/* склад на сенсоре: 🫳 положить крупное (слот U2 — вместо 🔦), 💥 стряхнуть Липучку (по центру снизу), 📳 разрешить датчик */
#touch .t-slot-S { left: 50%; bottom: calc(22px + var(--b)); width: 124px; height: 124px; margin-left: -62px;
  background: rgba(120,220,110,0.45); border-color: #8fe06a; animation: tShake 0.5s ease-in-out infinite; }
#touch .t-slot-S .t-ico { font-size: 48px; }
#touch .t-slot-S small { font-size: 14px; }
#touch .t-slot-S.down { animation: none; }
#touch .t-slot-M { left: 50%; top: calc(64px + env(safe-area-inset-top)); width: 260px; height: 54px; margin-left: -130px; border-radius: 27px;
  flex-direction: row; gap: 8px; background: rgba(77,163,255,0.55); border-color: #9fd0ff; }
#touch .t-slot-M .t-ico { font-size: 26px; }
#touch .t-slot-M small { font-size: 15px; margin-top: 0; }
@keyframes tShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@media (max-height: 420px) {
  #touch .t-slot-S { width: 104px; height: 104px; margin-left: -52px; }
  #touch .t-slot-M { top: calc(52px + env(safe-area-inset-top)); }
}
/* сердечки склада (DIFFICULTY[].lives) в строке HUD; вспышка при −❤ */
#stock-ind .raid-lives { display: block; text-align: right; font-size: 20px; letter-spacing: 1px; transform-origin: right center; }
#stock-ind .raid-lives.hidden { display: none; }
#stock-ind .raid-lives.lost { animation: livesLost 0.6s ease-in-out 2; }
@keyframes livesLost { 50% { transform: scale(1.35); filter: drop-shadow(0 0 6px #ff5a4a); } }
#blackout.hurt { background: #ff3b30; }
#blackout.hurt.on { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { #touch .t-slot-S, #stock-ind .raid-lives.lost { animation: none; } }