/* Движок тренажёра v2: скриншот + зоны. Общие стили для обоих тренажёров. */

[hidden] { display: none !important; }
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #ececf1;
  color: #16181d;
  display: flex;
  flex-direction: column;
}

/* ---------- Верхняя панель ---------- */
.tbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 16px;
  background: #16181d;
  color: #f5f6f8;
  font-size: 13px;
}
.tbar a.back { color: #f5f6f8; text-decoration: none; border: 1px solid #3c4049; border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
.tbar a.back:hover { background: #2a2d34; }
.tbar .title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.tbar button {
  font: inherit; color: #f5f6f8; background: none; border: 1px solid #3c4049;
  border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.tbar button:hover { background: #2a2d34; }
.tbar button.active { background: #e08b3c; border-color: #e08b3c; color: #231302; }
.tbar .modes { display: flex; gap: 4px; }
.tbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.t-search { position: relative; }
.t-search input {
  font: inherit; font-size: 13px; width: 210px;
  background: #23262d; color: #f5f6f8; border: 1px solid #3c4049;
  border-radius: 8px; padding: 5px 10px;
}
.t-search input::placeholder { color: #8a8f9b; }
.t-search .results {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1200;
  width: 300px; max-height: 320px; overflow: auto;
  background: #fff; color: #16181d; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3); padding: 6px;
}
.t-search .results .res { padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.t-search .results .res:hover { background: #f1f1f4; }
.t-search .results .res small { display: block; color: #8a8f9b; }

.progress { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.progress .track { width: 110px; height: 6px; border-radius: 3px; background: #3c4049; overflow: hidden; }
.progress .fill { display: block; height: 100%; width: 0; background: #58b368; transition: width 0.25s; }
.progress .count { font-variant-numeric: tabular-nums; color: #d7dae0; }

.plan-toggle { display: flex; border: 1px solid #3c4049; border-radius: 8px; overflow: hidden; }
.plan-toggle button { border: none; border-radius: 0; }
.plan-toggle button.active { background: #4a8df0; border-color: #4a8df0; color: #fff; }

/* ---------- Полоса контекста (экран, назад, режимы) ---------- */
.ctxbar {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: #dfe1e7; font-size: 13px; color: #3c4049;
}
.ctxbar button { font: inherit; background: #fff; border: 1px solid #c3c7d0; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.ctxbar button:hover { background: #f1f1f4; }
.ctxbar .screen-name { font-weight: 600; }
.ctxbar .hint { color: #6b7180; }
.ctxbar .tourbox { display: flex; align-items: center; gap: 8px; background: #fff7ec; border: 1px solid #e8c9a0; border-radius: 10px; padding: 6px 10px; }
.ctxbar .quizbox { display: flex; align-items: center; gap: 8px; background: #edf4ff; border: 1px solid #b9d2f5; border-radius: 10px; padding: 6px 10px; }
.ctxbar .tourbox b, .ctxbar .quizbox b { white-space: nowrap; }

/* ---------- Сцена со скриншотом ---------- */
.stage { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.shot-wrap {
  position: relative; margin: 0 auto; max-width: 1500px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.18); border-radius: 10px; overflow: hidden;
  background: #fff;
}
.shot-wrap img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.zone {
  position: absolute; cursor: pointer; border-radius: 6px;
  outline: 2px solid transparent; outline-offset: 1px;
}
.zone:hover, .zone:focus-visible { outline-color: rgba(224, 139, 60, 0.95); background: rgba(224, 139, 60, 0.12); }
.zone:focus-visible { outline-style: solid; }
body.zones-on .zone { outline-color: rgba(224, 139, 60, 0.9); background: rgba(224, 139, 60, 0.07); }
body.zones-on .zone.explored { outline-color: rgba(88, 179, 104, 0.95); }
.zone.pulse { animation: zpulse 1.1s ease-in-out 0s 3; }
@keyframes zpulse {
  0%, 100% { outline-color: rgba(74, 141, 240, 0); background: rgba(74, 141, 240, 0); }
  50% { outline-color: rgba(74, 141, 240, 1); background: rgba(74, 141, 240, 0.18); }
}
.zone .lock {
  display: none; position: absolute; top: -10px; right: -8px;
  font-size: 13px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.zone.locked:hover .lock, .zone.locked:focus-visible .lock { display: block; }
body.zones-on .zone.locked .lock { display: block; }
body.zones-on .zone.locked { outline-style: dashed; outline-color: rgba(154, 84, 200, 0.95); background: rgba(154, 84, 200, 0.08); }

.tip .twarn { margin-top: 5px; color: #ffb3a6; font-size: 12.5px; }

.zone .num {
  display: none; position: absolute; top: -9px; left: -9px;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: #e08b3c; color: #231302; font-size: 12px; font-weight: 700;
  line-height: 20px; text-align: center;
}
body.zones-on .zone .num { display: block; }
body.zones-on .zone.explored .num { background: #58b368; color: #10240f; }
body.zones-on.dimmed .shot-wrap img { filter: brightness(0.55); }

/* ---------- Подсказка при наведении ---------- */
.tip {
  position: fixed; z-index: 2000; max-width: 330px;
  background: #16181d; color: #f5f6f8; border-radius: 10px; padding: 9px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); pointer-events: none;
  font-size: 13px; line-height: 1.45;
}
.tip .tname { font-weight: 700; color: #ffd79a; }
.tip .tshort { margin-top: 3px; }
.tip .tmore { margin-top: 5px; color: #9aa1ae; font-size: 12px; }

/* ---------- Карточка элемента ---------- */
.cardback {
  position: fixed; inset: 0; z-index: 2500;
  background: rgba(10, 12, 16, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.card {
  width: min(560px, 94vw); max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.4);
}
.card h3 { margin: 0 0 4px; font-size: 20px; }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.card .badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; padding: 3px 10px; background: #eef0f4; color: #4b5260;
}
.card .badge.warn { background: #fdeeda; color: #8a5a17; }
.card .sect { margin: 10px 0; }
.card .sect b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #8a8f9b; margin-bottom: 2px; }
.card .sect p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.card .actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.card .actions button {
  font: inherit; font-size: 14px; border-radius: 10px; padding: 8px 14px; cursor: pointer;
  border: 1px solid #c3c7d0; background: #fff;
}
.card .actions button:hover { background: #f1f1f4; }
.card .actions button.primary { background: #16181d; border-color: #16181d; color: #fff; }
.card .path { margin-top: 12px; font-size: 12.5px; color: #8a8f9b; }

/* ---------- Тост практики ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2600; background: #16181d; color: #fff; border-radius: 10px;
  padding: 10px 16px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.toast.ok { background: #1f7a34; }
.toast.err { background: #a33224; }