/*
 * photon-room.css — оформление виджета.
 * Палитра взята из дизайн-системы сайта: фон #10131a, панели #131924,
 * границы #222D3F, акцент #00e5ff. Все классы с префиксом pr- —
 * виджет не должен цеплять стили страницы, а страница — его.
 */

.pr-root {
  --pr-bg: #10131a;
  --pr-panel: #131924;
  --pr-panel-2: #182031;
  --pr-line: #222d3f;
  --pr-accent: #00e5ff;
  --pr-text: #e8eef7;
  --pr-muted: #8ea0b8;
  --pr-warm: #ffb86b;
  font-family: 'Geologica', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--pr-text);
  -webkit-font-smoothing: antialiased;
}

.pr-root *,
.pr-root *::before,
.pr-root *::after { box-sizing: border-box; }

.pr-hidden { display: none !important; }
html.pr-lock { overflow: hidden; }

/* ─────────── Оболочка ─────────── */

.pr-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 28px);
}

.pr-modal .pr-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 40%, rgba(0, 40, 60, .55), rgba(6, 8, 12, .88));
  backdrop-filter: blur(6px);
}

.pr-inline { display: block; width: 100%; }

.pr-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1440px, 100%);
  height: min(880px, 100%);
  background: var(--pr-bg);
  border: 1px solid var(--pr-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 229, 255, .06);
  animation: pr-in .32s cubic-bezier(.2, .9, .3, 1);
}

.pr-inline .pr-shell { height: min(78vh, 760px); animation: none; }

@keyframes pr-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ─────────── Верхняя панель ─────────── */

.pr-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pr-line);
  background: linear-gradient(180deg, #151b27, #11151e);
  flex: 0 0 auto;
}

.pr-title {
  font-family: 'Unbounded', 'Geologica', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.pr-title em {
  font: 400 12px/1 'Geologica', sans-serif;
  color: var(--pr-muted);
  font-style: normal;
  padding-left: 10px;
  border-left: 1px solid var(--pr-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pr-accent);
  box-shadow: 0 0 12px var(--pr-accent);
  animation: pr-pulse 2.6s ease-in-out infinite;
}

@keyframes pr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.pr-tools { margin-left: auto; display: flex; gap: 8px; }

.pr-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--pr-line);
  background: var(--pr-panel-2);
  color: var(--pr-text);
  font: 500 13px/1 'Geologica', sans-serif;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}

.pr-chip:hover:not(:disabled) { border-color: #2f4054; background: #1d2637; }
.pr-chip:disabled { opacity: .38; cursor: default; }
.pr-chip-ico { font-size: 15px; line-height: 1; opacity: .8; }

.pr-chip.pr-active {
  border-color: rgba(255, 184, 107, .55);
  background: rgba(255, 184, 107, .13);
  color: var(--pr-warm);
}

.pr-chip-close { width: 34px; padding: 0; justify-content: center; font-size: 20px; }

/* ─────────── Сцена ─────────── */

.pr-body { flex: 1 1 auto; display: flex; min-height: 0; }

.pr-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #05070a;
  overflow: hidden;
  touch-action: none;
}

.pr-stage.pr-grabbable { cursor: grab; }
.pr-stage.pr-grabbing { cursor: grabbing; }
.pr-canvas { display: block; width: 100%; height: 100%; }

.pr-overlay { position: absolute; inset: 0; pointer-events: none; }

/* Реплика Фотончика — окно внизу сцены, как в визуальной новелле.
   Место постоянное: взгляд не ищет текст по кадру, а сама комната
   остаётся открытой. */

.pr-bubble {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 28px));
  min-height: 92px;
  padding: 20px 22px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, .28);
  background: linear-gradient(180deg, rgba(18, 27, 40, .93), rgba(11, 17, 26, .95));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

/* Табличка с именем на верхней кромке окна */
.pr-bubble-name {
  position: absolute;
  left: 18px;
  top: 0;
  transform: translateY(-55%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, .45);
  background: #0f1a26;
  color: var(--pr-accent);
  font: 600 12px/1 'Unbounded', 'Geologica', sans-serif;
  letter-spacing: .02em;
}
.pr-bubble-name::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #dff7ff;
  box-shadow: 0 0 8px rgba(120, 225, 255, .9);
}

.pr-bubble-body { display: flex; align-items: flex-end; gap: 18px; }

/* Смена реплики: только проявление, без движения и масштабирования —
   прыгающее окно мешает читать. */
.pr-bubble.pr-flash .pr-bubble-text { animation: pr-flash .2s ease-out; }
@keyframes pr-flash { from { opacity: .25; } to { opacity: 1; } }

.pr-bubble-text { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.55; }

/* Кнопки шага — в правом нижнем углу окна реплики */
.pr-next {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.pr-next:empty { display: none; }

.pr-cta {
  border: 0;
  border-radius: 9px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #00e5ff, #0aa5c4);
  color: #05161c;
  font: 600 13px/1 'Geologica', sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 229, 255, .28);
  transition: .18s;
}
.pr-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(0, 229, 255, .4); }

/* «Сделать за меня» — запасной выход, поэтому подчёркнуто тише основной кнопки */
.pr-cta-ghost {
  background: rgba(10, 16, 24, .82);
  color: var(--pr-muted);
  border: 1px solid var(--pr-line);
  box-shadow: none;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.pr-cta-ghost:hover { color: var(--pr-text); border-color: #2f4054; box-shadow: none; }

/* Точки, куда можно посадить Фотончика */

.pr-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pr-dragging .pr-hotspot { display: flex; animation: pr-fade .2s; }
@keyframes pr-fade { from { opacity: 0; } to { opacity: 1; } }

.pr-hotspot i {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px dashed rgba(0, 229, 255, .5);
  background: rgba(0, 229, 255, .07);
  transition: .18s;
}

.pr-hotspot b {
  font: 500 12px/1 'Geologica', sans-serif;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(8, 14, 22, .85);
  border: 1px solid var(--pr-line);
  color: var(--pr-muted);
  white-space: nowrap;
}

.pr-hotspot.pr-near i {
  border-style: solid;
  border-color: var(--pr-accent);
  background: rgba(0, 229, 255, .2);
  box-shadow: 0 0 26px rgba(0, 229, 255, .45);
  transform: scale(1.14);
}
.pr-hotspot.pr-near b { color: var(--pr-accent); border-color: rgba(0, 229, 255, .4); }


/* ─────────── Режим монтажа ─────────── */

.pr-marks { position: absolute; inset: 0; pointer-events: none; }

.pr-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 229, 255, .75);
  background: rgba(8, 20, 30, .55);
  pointer-events: auto;
  cursor: grab;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-mark i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pr-accent);
  box-shadow: 0 0 8px var(--pr-accent);
}
.pr-mark:hover { transform: translate(-50%, -50%) scale(1.15); background: rgba(0, 229, 255, .2); }
.pr-mark.pr-sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(0, 229, 255, .25), 0 0 18px rgba(0, 229, 255, .6); }
.pr-mark.pr-mark-fixed { border-color: rgba(255, 184, 107, .8); cursor: pointer; }
.pr-mark.pr-mark-fixed i { background: var(--pr-warm); box-shadow: 0 0 8px var(--pr-warm); }

/* Призрак эталонного места */
.pr-mark-ghost {
  width: 20px; height: 20px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .45);
  background: none;
  pointer-events: none;
}

/* Прицел: куда прибор светит */
.pr-aim {
  position: absolute;
  transform: translate(-50%, -50%);
  /*
   * Прицел крупный, сплошной и с тёмной обводкой: пунктирный кружок 22 px
   * терялся на оранжевой двери — игрок не видел, куда наведён спот.
   */
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--pr-warm);
  background: rgba(255, 184, 107, .22);
  box-shadow: 0 0 0 2px rgba(10, 14, 22, .85), 0 0 14px rgba(255, 184, 107, .7);
  pointer-events: auto;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-aim i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pr-warm);
}

/* Цель шага обучения: куда навести спот. Зеленеет, когда освещена. */
.pr-target {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 2px rgba(10, 14, 22, .6);
  pointer-events: none;
  animation: pr-pulse 1.6s ease-in-out infinite;
}
.pr-target i {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px;
  border-radius: 50%;
  background: #fff;
}
.pr-target b {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  font: 600 12px/1.2 Geologica, system-ui, sans-serif;
  color: #fff;
  background: rgba(10, 14, 22, .8);
  border-radius: 8px;
  padding: 3px 8px;
}
.pr-target.pr-target-ok {
  border: 2px solid #5be38a;
  box-shadow: 0 0 0 2px rgba(10, 14, 22, .6), 0 0 16px rgba(91, 227, 138, .6);
  animation: none;
}
.pr-target.pr-target-ok i { background: #5be38a; }
.pr-target.pr-target-ok b { color: #5be38a; }

.pr-beam {
  position: absolute;
  height: 0;
  border-top: 2px dashed rgba(255, 184, 107, .8);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Панель монтажа */

.pr-editor {
  border-bottom: 1px solid var(--pr-line);
  padding: 11px 12px 13px;
  flex: 0 0 auto;
  background: #151d2b;
}

.pr-editor-head { font-size: 12px; color: var(--pr-muted); margin-bottom: 8px; }

.pr-palette { display: flex; flex-wrap: wrap; gap: 6px; }

.pr-pal-btn {
  border: 1px solid var(--pr-line);
  background: var(--pr-panel-2);
  color: var(--pr-text);
  border-radius: 8px;
  padding: 6px 10px;
  font: 500 11.5px/1 'Geologica', sans-serif;
  cursor: pointer;
  transition: .16s;
}
.pr-pal-btn:hover:not(:disabled) { border-color: rgba(0, 229, 255, .5); background: #1d2637; }
.pr-pal-btn:disabled { opacity: .4; cursor: default; }
.pr-pal-btn b { color: var(--pr-accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-pal-btn:disabled b { color: var(--pr-muted); }
.pr-pal-btn.pr-danger { border-color: rgba(255, 120, 120, .4); color: #ffa4a4; }

.pr-editor-sel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pr-muted);
}
.pr-editor-sel b { color: var(--pr-text); font-size: 12.5px; font-weight: 500; }

.pr-editor-ref { display: flex; gap: 6px; margin-top: 10px; }

.pr-match {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 11px;
  font-size: 11.5px;
  color: var(--pr-muted);
}
.pr-match b { color: var(--pr-accent); font-variant-numeric: tabular-nums; }

.pr-match-bar { height: 3px; border-radius: 3px; background: #26324a; margin-top: 5px; overflow: hidden; }
.pr-match-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #00e5ff, #6ce7ff);
  transition: width .3s;
}

/* Освещённость в точке, где стоит Фотончик */

.pr-lux {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, .3);
  background: rgba(8, 14, 22, .8);
  color: var(--pr-accent);
  font: 500 11px/1 'Geologica', sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.pr-lux.pr-lux-low { color: #8ea0b8; border-color: var(--pr-line); }

/* Задания */

.pr-quests {
  border-bottom: 1px solid var(--pr-line);
  padding: 10px 12px 12px;
  flex: 0 0 auto;
  max-height: 42%;
  overflow-y: auto;
}

.pr-quests-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: var(--pr-muted);
  margin-bottom: 8px;
}
.pr-quests-head b { color: var(--pr-accent); font-size: 12px; font-variant-numeric: tabular-nums; }

.pr-quest {
  display: flex;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .18s;
}
.pr-quest:hover { background: #182031; border-color: var(--pr-line); }

.pr-quest-mark {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid #33425a;
  font-style: normal;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  color: #05161c;
}

.pr-quest.pr-done .pr-quest-mark {
  background: var(--pr-accent);
  border-color: var(--pr-accent);
  box-shadow: 0 0 10px rgba(0, 229, 255, .5);
}
.pr-quest.pr-done .pr-quest-title { color: var(--pr-muted); text-decoration: line-through; }
.pr-quest.pr-just-done { animation: pr-questpop .9s ease-out; }
@keyframes pr-questpop {
  0%   { background: rgba(0, 229, 255, .22); }
  100% { background: transparent; }
}

/*
 * «Применить» — пресет сценария. Стоит справа в строке задания и не
 * растягивается; «Вернуть эталон и применить» появляется под целью только
 * после неудачи и выделен тёплым — он двигает приборы.
 */
.pr-quest-body { flex: 1 1 auto; min-width: 0; }
.pr-quest-apply {
  flex: 0 0 auto;
  align-self: flex-start;
  border: 1px solid var(--pr-line);
  background: var(--pr-panel-2);
  color: var(--pr-accent);
  border-radius: 7px;
  padding: 4px 8px;
  font: 500 11px/1.2 'Geologica', sans-serif;
  cursor: pointer;
  transition: .16s;
}
.pr-quest-apply:hover { border-color: rgba(0, 229, 255, .5); background: #1d2637; }
.pr-quest-apply:focus-visible { outline: 2px solid var(--pr-accent); outline-offset: 1px; }
.pr-quest.pr-done .pr-quest-apply { color: var(--pr-muted); }
.pr-quest-restore {
  display: block;
  margin-top: 6px;
  color: var(--pr-warm);
  border-color: rgba(255, 184, 107, .35);
  text-align: left;
}
.pr-quest-restore:hover { border-color: rgba(255, 184, 107, .7); }

.pr-quest-title { font-size: 12.5px; font-weight: 500; }
.pr-quest-goal { font-size: 11px; line-height: 1.4; color: var(--pr-muted); margin-top: 2px; }
.pr-quest-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--pr-accent);
  margin-top: 5px;
  padding-left: 8px;
  border-left: 2px solid rgba(0, 229, 255, .35);
}

/* Подсказка снизу */

.pr-toast {
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--pr-line);
  background: rgba(10, 15, 23, .88);
  color: var(--pr-muted);
  font-size: 13px;
  backdrop-filter: blur(6px);
  animation: pr-fade .3s;
  max-width: 90%;
  text-align: center;
}

/* Загрузка */

.pr-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #05070a;
  z-index: 5;
}

.pr-loader-orb {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #bdeeff 45%, #4bb8dd 100%);
  box-shadow: 0 0 60px rgba(90, 210, 255, .65);
  animation: pr-bob 1.5s ease-in-out infinite;
}

@keyframes pr-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.04); }
}

.pr-loader-text { font-size: 13px; color: var(--pr-muted); }
.pr-loader-text.pr-error { max-width: 380px; text-align: center; line-height: 1.6; color: #ffa4a4; }

.pr-loader-bar {
  width: 220px; height: 3px;
  border-radius: 3px;
  background: #1b2434;
  overflow: hidden;
}
.pr-loader-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #00e5ff, #7ef0ff);
  transition: width .2s;
}

/* ─────────── Панель управления ─────────── */

.pr-panel {
  flex: 0 0 336px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--pr-line);
  background: var(--pr-panel);
  min-height: 0;
  transition: opacity .25s;
}

.pr-panel.pr-dimmed { opacity: .35; pointer-events: none; }

.pr-panel-head { padding: 13px 16px; border-bottom: 1px solid var(--pr-line); }

.pr-progress span {
  display: block;
  font-size: 12px;
  color: var(--pr-muted);
  margin-bottom: 7px;
}
.pr-progress i {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #00e5ff, #6ce7ff);
  width: 0;
  transition: width .4s cubic-bezier(.2, .9, .3, 1);
  order: 2;
  margin-top: 7px;
}
.pr-progress { display: flex; flex-direction: column; }

.pr-cards { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pr-cards::-webkit-scrollbar { width: 8px; }
.pr-cards::-webkit-scrollbar-thumb { background: #223047; border-radius: 8px; }

.pr-card {
  border: 1px solid var(--pr-line);
  border-radius: 12px;
  background: var(--pr-panel-2);
  padding: 11px 13px 13px;
  transition: .25s;
}

.pr-card.pr-off { opacity: .55; }
.pr-card.pr-focus { border-color: rgba(0, 229, 255, .55); box-shadow: 0 0 0 3px rgba(0, 229, 255, .08); }
.pr-card.pr-appear { animation: pr-slide .5s cubic-bezier(.2, .9, .3, 1); }

@keyframes pr-slide {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

.pr-card-head { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.pr-card-name { font-size: 13.5px; font-weight: 500; flex: 1 1 auto; }
.pr-card-val { font-size: 12px; color: var(--pr-accent); font-variant-numeric: tabular-nums; }

.pr-card-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pr-muted);
  margin: 7px 0 9px;
}

/* Переключатель */

.pr-switch { position: absolute; opacity: 0; width: 0; height: 0; }
.pr-switch-ui {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 19px;
  border-radius: 999px;
  background: #26324a;
  transition: .2s;
}
.pr-switch-ui::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #7d8ea6;
  transition: .2s;
}
.pr-switch:checked + .pr-switch-ui { background: rgba(0, 229, 255, .3); }
.pr-switch:checked + .pr-switch-ui::after { left: 17px; background: var(--pr-accent); }

/* Ползунки */

.pr-row { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.pr-row-label { font-size: 11px; color: var(--pr-muted); flex: 0 0 76px; }
.pr-row.pr-hidden-soft, .pr-row.pr-locked { display: none; }
.pr-cct-val { font-size: 11px; color: var(--pr-muted); flex: 0 0 46px; text-align: right; font-variant-numeric: tabular-nums; }

.pr-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 4px;
  background: #26324a;
  outline: none;
  cursor: pointer;
}

.pr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--pr-accent);
  border: 2px solid #0e141d;
  box-shadow: 0 0 10px rgba(0, 229, 255, .5);
  cursor: grab;
}
.pr-range::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--pr-accent);
  border: 2px solid #0e141d;
  cursor: grab;
}

.pr-range-cct {
  background: linear-gradient(90deg, #ff9a3c, #ffd9a8, #fff6e8, #eaf3ff);
}
.pr-range-cct::-webkit-slider-thumb { background: var(--pr-cct, #fff); box-shadow: 0 0 10px rgba(255, 220, 170, .5); }
.pr-range-cct::-moz-range-thumb { background: var(--pr-cct, #fff); }

/* Слот реплики под комнатой — только в раскладке pr-stack (см. ниже) */
.pr-dialog { display: none; }

/* ─────────── Узкий экран ─────────── */

/*
 * Узкая раскладка. Класс pr-narrow вешает сам виджет, замеряя свою ширину, —
 * так она срабатывает и на телефоне, и когда виджет встроен в узкую колонку
 * на широком мониторе (медиазапрос по ширине окна такой случай не ловит).
 */
@media (max-width: 900px) {
  .pr-modal { padding: 0; }
  .pr-modal .pr-shell { width: 100%; height: 100%; border-radius: 0; border: 0; }
}

.pr-narrow .pr-panel { flex-basis: 270px; }
.pr-narrow .pr-top { gap: 8px; padding: 8px 10px; }
.pr-narrow .pr-title { font-size: 13px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.pr-narrow .pr-title em { display: none; }
/* Полное название на телефоне обрезалось до «Комната Фото» — оставляем имя */
.pr-title-short { display: none; }
.pr-narrow .pr-title-full { display: none; }
.pr-narrow .pr-title-short { display: inline; }
.pr-narrow .pr-tools { gap: 6px; }
.pr-narrow .pr-chip { height: 32px; padding: 0 10px; font-size: 12px; }
.pr-narrow .pr-chip-close { width: 32px; }
/* Солнышки у «Как было» и «Монтажа» одинаковые и места не стоят; у «Заново»
   наоборот — остаётся стрелка, уходит подпись. */
.pr-narrow .pr-chip-compare .pr-chip-ico,
.pr-narrow .pr-chip-edit .pr-chip-ico,
.pr-narrow .pr-chip-restart .pr-chip-text { display: none; }
.pr-narrow .pr-chip-restart { width: 32px; padding: 0; justify-content: center; }

/* Окно реплики то же, только плотнее; кнопки уходят под текст. */
.pr-narrow .pr-bubble {
  bottom: 8px;
  width: calc(100% - 16px);
  min-height: 0;
  padding: 16px 14px 12px;
  border-radius: 12px;
}
.pr-narrow .pr-bubble-name { left: 12px; font-size: 11px; }
.pr-narrow .pr-bubble-body { flex-direction: column; align-items: stretch; gap: 10px; }
.pr-narrow .pr-bubble-text { font-size: 13px; line-height: 1.5; }
.pr-narrow .pr-next { justify-content: flex-end; }
/*
 * Подсказка на телефоне — за кнопкой «?» в правом верхнем углу сцены (её
 * ставит widget.js, на широком экране она скрыта). Закрытая плашка не видна
 * вовсе; открытая — карточка посередине кадра, крупным шрифтом. Закрывается
 * нажатием на неё же или повторно на «?».
 */
.pr-narrow .pr-toast { display: none; cursor: pointer; }
.pr-narrow.pr-help-open .pr-toast {
  display: block;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 440px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 16px 40px 16px 18px;
  border-radius: 14px;
  border-color: rgba(0, 229, 255, .35);
  background: rgba(10, 15, 23, .95);
  color: var(--pr-text);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  /* Размытие поверх WebGL-канваса делало карточку мутной и текст серым;
     фон и так почти непрозрачный. */
  backdrop-filter: none;
  z-index: 6;
}
/* Телефон в ландшафте: внизу сцены лежит окно реплики — карточку поднимаем наверх. */
.pr-narrow:not(.pr-stack).pr-help-open .pr-toast {
  top: 8px;
  transform: translateX(-50%);
  width: calc(100% - 64px);
  max-height: calc(55% - 8px);
}
.pr-narrow.pr-help-open .pr-toast::after {
  content: '×';
  position: absolute;
  top: 8px; right: 12px;
  color: var(--pr-muted);
  font-size: 20px;
  line-height: 1;
}
.pr-help { display: none; }
.pr-narrow .pr-help.pr-help-on {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pr-line);
  background: rgba(10, 15, 23, .88);
  color: var(--pr-text);
  font: 700 18px/1 'Unbounded', 'Geologica', sans-serif;
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 7;
}
.pr-narrow.pr-help-open .pr-help { border-color: var(--pr-accent); color: var(--pr-accent); }
/* Новая подсказка ещё не прочитана — кнопка светится и «дышит». */
.pr-narrow .pr-help.pr-help-new {
  border-color: var(--pr-accent);
  color: var(--pr-accent);
  animation: pr-help-ping 1.8s ease-out infinite;
}
@keyframes pr-help-ping {
  0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, .55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
}
.pr-narrow .pr-cta { padding: 8px 12px; font-size: 12px; }
.pr-narrow .pr-quests { max-height: 34%; }
.pr-narrow .pr-editor { padding: 8px 10px 10px; }
.pr-narrow .pr-palette { flex-wrap: nowrap; overflow-x: auto; }
.pr-narrow .pr-quest-goal, .pr-narrow .pr-quest-hint { display: none; }
.pr-narrow .pr-quest { display: inline-flex; }
.pr-narrow .pr-hotspot i { width: 44px; height: 44px; }

/*
 * Стопка — телефон в портрете: комната во всю ширину и ровно по высоте
 * картинки (её задаёт _resize()), под ней окно реплики, ниже панель с
 * прокруткой. Раньше сцена занимала 54 % высоты, картинка вписывалась по
 * ширине, и сверху и снизу оставались чёрные поля в пол-экрана, а карточки
 * ехали горизонтальной лентой при пустой панели.
 */
.pr-stack .pr-body { flex-direction: column; }
.pr-stack .pr-stage { flex: 0 0 auto; }
.pr-stack .pr-dialog {
  display: block;
  flex: 0 0 auto;
  padding: 16px 8px 8px;
  background: #05070a;
  border-top: 1px solid var(--pr-line);
}
.pr-stack .pr-dialog .pr-bubble {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  box-shadow: none;
}
.pr-stack .pr-panel { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--pr-line); }
.pr-stack .pr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  padding: 10px;
}
.pr-stack .pr-panel-head { padding: 10px 14px; }

/* Телефон в ландшафте: панель сбоку, реплика поверх комнаты — делаем её
   ниже, чтобы не закрывала полкадра: кнопки снова справа от текста. */
.pr-narrow:not(.pr-stack) .pr-bubble { bottom: 6px; padding: 14px 12px 10px; }
.pr-narrow:not(.pr-stack) .pr-bubble-body { flex-direction: row; align-items: flex-end; }
.pr-narrow:not(.pr-stack) .pr-bubble-text { font-size: 12.5px; line-height: 1.45; }