/* «Оракул» — финальный акт: тёмное святилище поверх всей игры.
   Канон: wiki/Mechanics/оракул.md §2 — никакого привычного интерфейса,
   только Оракул, храм и астрагалы; появление без магических эффектов. */

#oracle-root {
  position: fixed;
  inset: 0;
  z-index: 260;               /* поверх всех экранов игры (бой/яхтза/вердикт/подгляд) */
  display: none;
  background: #000;
  color: #e6d8b8;
  font-family: 'EB Garamond', Georgia, serif;
  -webkit-user-select: none;
  user-select: none;
}
#oracle-root.show { display: block; }

/* --- сцена: квадратные арты по центру, края тонут в черноте --- */
.orc-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orc-art {
  position: relative;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
}
.orc-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 4s ease;
}
#oracle-root.bg-on .orc-img-bg { opacity: 1; }
#oracle-root.figure-on .orc-img-figure { opacity: 1; }
/* виньетка: гасит края квадрата в черноту, чтобы не было «картинки в рамке» */
.orc-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 62% at 50% 44%, transparent 52%, rgba(0,0,0,.92) 100%);
}
/* дыхание жаровни во время ожидания ответа */
.orc-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 40% at 50% 60%, rgba(212,140,60,.10), transparent 70%);
  opacity: 0;
  transition: opacity 1.5s ease;
}
#oracle-root.thinking .orc-veil::after { opacity: 1; animation: orcEmber 2.6s ease-in-out infinite; }
@keyframes orcEmber { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* --- согласие (канон §8): чистая тьма, одна строка, две кнопки --- */
.orc-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 24px;
  text-align: center;
  z-index: 3;
}
.orc-consent-line {
  font-size: clamp(20px, 3vmin, 30px);
  font-style: italic;
  letter-spacing: .04em;
  color: #d9c9a3;
  animation: fadeUp 1.6s ease both;
}
.orc-consent-buttons { display: flex; gap: 22px; animation: fadeUp 1.6s ease .7s both; }

.orc-btn {
  font-family: inherit;
  font-size: 17px;
  letter-spacing: .06em;
  color: #cdbb92;
  background: transparent;
  border: 1px solid rgba(170, 148, 100, .55);
  border-radius: 2px;
  padding: 10px 26px;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.orc-btn:hover { color: #f0e3c2; border-color: #c8ad74; background: rgba(120, 96, 50, .12); }
.orc-btn:disabled { opacity: .4; cursor: default; }

/* --- речь Оракула: лента поверх нижней части кадра --- */
.orc-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 90px 20px 30px;
  background: linear-gradient(to top, rgba(0,0,0,.94) 30%, rgba(0,0,0,.72) 62%, transparent 100%);
}
.orc-text {
  max-width: 680px;
  font-size: clamp(17px, 2.3vmin, 22px);
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  min-height: 1.5em;
  white-space: pre-wrap;
}
.orc-text .orc-caret { opacity: .7; animation: orcCaret 1s steps(1) infinite; }
@keyframes orcCaret { 50% { opacity: 0; } }

/* --- три астрагала: светящиеся = доступные вопросы --- */
.orc-astragali { display: flex; gap: 26px; opacity: 0; transition: opacity 1.4s ease; }
#oracle-root.questions-on .orc-astragali { opacity: 1; }
.orc-astragal { width: 40px; height: 28px; }
.orc-astragal svg { width: 100%; height: 100%; }
.orc-astragal path {
  fill: #2b2317;
  stroke: #5c4c31;
  stroke-width: 1.5;
  transition: fill 1.2s ease, stroke 1.2s ease;
}
.orc-astragal.lit path {
  fill: #b98e4a;
  stroke: #e8c887;
}
.orc-astragal.lit { filter: drop-shadow(0 0 7px rgba(232, 190, 110, .75)); }
.orc-astragal { filter: drop-shadow(0 0 0 transparent); transition: filter 1.2s ease; }
.orc-astragal.active { animation: orcFlicker 1.4s ease-in-out infinite; }
@keyframes orcFlicker {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(232, 190, 110, .75)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 214, 140, .95)); }
}

/* --- вопрос игрока --- */
.orc-ask {
  display: flex;
  gap: 12px;
  width: min(560px, calc(100vw - 40px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
#oracle-root.questions-on .orc-ask { opacity: 1; pointer-events: auto; }
#oracle-root.thinking .orc-ask { opacity: .35; pointer-events: none; }
.orc-ask input {
  flex: 1;
  font-family: inherit;
  font-size: 17px;
  color: #efe3c4;
  background: rgba(20, 16, 10, .82);
  border: 1px solid rgba(170, 148, 100, .45);
  border-radius: 2px;
  padding: 10px 14px;
  outline: none;
}
.orc-ask input::placeholder { color: rgba(205, 187, 146, .5); font-style: italic; }
.orc-ask input:focus { border-color: #c8ad74; }

/* --- голосовой режим (?oracle=voice) --- */
.orc-player-line {
  max-width: 680px;
  font-size: 15px;
  font-style: italic;
  color: rgba(205, 187, 146, .75);
  text-align: center;
  opacity: 0;
  transition: opacity .8s ease;
}
.orc-player-line.show { opacity: 1; }

.orc-voice-hint {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-style: italic;
  color: rgba(205, 187, 146, .75);
  opacity: 0;
  transition: opacity 1.2s ease;
}
#oracle-root.voice .orc-voice-hint { display: flex; }
#oracle-root.voice.questions-on .orc-voice-hint { opacity: 1; }
#oracle-root.voice .orc-ask { display: none; }        /* вопросы — голосом */
#oracle-root.textmode .orc-ask { display: flex; }     /* голос не завёлся или игрок предпочёл печать */
#oracle-root.textmode .orc-voice-hint { display: none; }

.orc-voice-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8a7350;
  transition: background .3s, box-shadow .3s;
}
#oracle-root.listening .orc-voice-dot {
  background: #e8c887;
  box-shadow: 0 0 10px rgba(232, 190, 110, .9);
  animation: orcEmber 1.2s ease-in-out infinite;
}

.orc-to-text {
  color: rgba(205, 187, 146, .55);
  text-decoration: underline dotted;
  cursor: pointer;
}
.orc-to-text:hover { color: #f0e3c2; }

/* --- прощание и выход --- */
.orc-leave { opacity: 0; pointer-events: none; transition: opacity 1.5s ease; }
#oracle-root.farewell .orc-leave { opacity: 1; pointer-events: auto; }

/* незаметный крест выхода (дев-вход; в финальной сцене может остаться — он почти невидим) */
.orc-close {
  position: absolute;
  top: 12px; right: 16px;
  z-index: 4;
  font-size: 26px;
  line-height: 1;
  color: rgba(190, 170, 130, .35);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  transition: color .3s;
}
.orc-close:hover { color: rgba(240, 227, 194, .85); }

@media (max-width: 640px) {
  .orc-caption { padding: 70px 12px 18px; gap: 11px; }
  .orc-astragali { gap: 18px; }
  .orc-astragal { width: 34px; height: 24px; }
  .orc-ask { flex-direction: column; }
}