/* V393 — Apresentacao do combate na primeira entrada em um Stage.
 *
 * Dois avisos em sequencia, com o combate pausado: a barra de acao (pocoes,
 * AUTO, skills) e o Survival Timer com o RE-RUN. Mostrados uma unica vez.
 *
 * Tambem da um destaque permanente ao relogio quando o boss libera. Ate aqui
 * isso existia apenas como title do HTML, invisivel no toque.
 */

/* --- Overlay dos avisos ---------------------------------------------- */
#stageIntroGuideV393{
  position:fixed;inset:0;z-index:1200001;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(1,4,8,.8);backdrop-filter:blur(2px);
}
#stageIntroGuideV393.open{display:flex}

.stageIntroCardV393{
  width:min(560px,90vw);padding:22px;
  border:2px solid #b17c1c;background:linear-gradient(150deg,#121b24,#080c11 72%);
  box-shadow:0 0 0 3px #06090c,0 0 0 5px #3a2c13,0 18px 60px #000;
  color:#cbd5da;font-family:var(--pixel-font,monospace);
}
.stageIntroCardV393 small{display:block;color:#d9ad4c;font-size:11px;font-weight:900;letter-spacing:1.5px}
.stageIntroCardV393 h2{margin:8px 0 14px;color:#ffe19a;font:900 22px var(--font-display);letter-spacing:1.5px}

/* Cada linha explica um controle: rotulo a esquerda, funcao a direita. */
.stageIntroCardV393 dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 13px;align-items:baseline}
.stageIntroCardV393 dt{
  padding:3px 7px;border:1px solid #6b5220;background:#0b1015;
  color:#f2d078;font-size:11px;font-weight:900;letter-spacing:.08em;white-space:nowrap;
}
.stageIntroCardV393 dd{margin:0;color:#b7c2c7;font-size:11px;font-weight:700;line-height:1.6}
.stageIntroCardV393 dd b{color:#e6d3a4}

.stageIntroCardV393 p{margin:14px 0 0;color:#9aa7ae;font-size:11px;line-height:1.7}
.stageIntroCardV393 button{
  width:100%;min-height:42px;margin-top:18px;
  border:2px solid #bd8522;background:linear-gradient(#68420e,#302008);
  color:#ffe09a;font:900 11px var(--pixel-font,monospace);letter-spacing:1px;cursor:pointer;
}
.stageIntroCardV393 button:hover,.stageIntroCardV393 button:focus-visible{filter:brightness(1.18)}

/* Passo 1 de 2 / 2 de 2. */
.stageIntroDotsV393{display:flex;gap:6px;margin-top:15px}
.stageIntroDotsV393 i{width:7px;height:7px;background:#3b4650}
.stageIntroDotsV393 i.active{background:#f2b24c}

@media(max-width:850px){
  .stageIntroCardV393{padding:16px}
  .stageIntroCardV393 h2{font-size:18px}
  .stageIntroCardV393 dl{grid-template-columns:1fr;gap:3px 0}
  .stageIntroCardV393 dt{justify-self:start;margin-top:7px}
}

/* V498 — celular deitado: a caixa passava da altura da tela (o topo sumia) e
   empilhava rotulo e texto. Aqui ela cabe, rola se precisar e mantem rotulo
   ao lado do texto. Tocar fora fecha (92-stage-intro-guide). */
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  #stageIntroGuideV393{padding:6px}
  .stageIntroCardV393{width:min(640px,94vw);max-height:calc(100dvh - 12px);overflow-y:auto;padding:12px 14px}
  .stageIntroCardV393 h2{margin:4px 0 8px;font-size:16px}
  .stageIntroCardV393 dl{grid-template-columns:auto 1fr;gap:5px 10px}
  .stageIntroCardV393 dt{margin-top:0}
  .stageIntroCardV393 dd{line-height:1.4}
  .stageIntroCardV393 p{margin-top:8px;line-height:1.45}
  .stageIntroDotsV393{margin-top:8px}
  .stageIntroCardV393 button{min-height:34px;margin-top:10px}
}

/* --- Relogio destacado quando o boss libera --------------------------- */
/* 04-patch.js ja marca .ready e escreve BOSS READY, mas so o title dizia que
   o relogio e clicavel - e title nao existe no toque. O halo torna o alvo
   visivel; o cursor confirma que ali se clica. */
/* Sem mexer em position: o relogio ja e position:absolute no canto
   (00-main.css), o que basta para ancorar o ::after. Um position:relative
   aqui tirava o relogio do canto e o esticava pela largura da tela. */
#portalSurvivalTimer.ready{cursor:pointer}
#portalSurvivalTimer.ready::after{
  content:"";position:absolute;inset:-4px;pointer-events:none;
  border:2px solid #45cf75;
  animation:stageBossReadyPulseV393 1.4s ease-in-out infinite;
}
@keyframes stageBossReadyPulseV393{
  0%,100%{opacity:.2;box-shadow:0 0 0 0 #45cf7500}
  50%{opacity:1;box-shadow:0 0 20px 4px #45cf75a6}
}

/* Mesma leitura do beacon do MAP: reduzir movimento nao apaga o aviso, apenas
   suaviza; reduzir flashes troca a piscada por brilho fixo. */
@keyframes stageBossReadyCalmV393{
  0%,100%{opacity:.5;box-shadow:0 0 6px 1px #45cf754d}
  50%{opacity:1;box-shadow:0 0 15px 3px #45cf758f}
}
@media(prefers-reduced-motion:reduce){
  #portalSurvivalTimer.ready::after{animation:stageBossReadyCalmV393 2.4s ease-in-out infinite}
}
.tharkiraReduceMotionV300 #portalSurvivalTimer.ready::after{
  animation:stageBossReadyCalmV393 2.4s ease-in-out infinite;
}
.tharkiraReduceFlashesV300 #portalSurvivalTimer.ready::after{
  animation:none;opacity:1;box-shadow:0 0 15px 3px #45cf758f;
}