/* Radar do Dragão (topo, centro) e tela de invocação do dragão */
#db-radar { position: fixed; top: clamp(8px, 1vw, 16px); left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  display: grid; justify-items: center; gap: 4px; }
#db-radar[hidden] { display: none; }
#db-radar canvas { width: clamp(112px, 9vw, 160px); height: clamp(112px, 9vw, 160px); image-rendering: pixelated; border-radius: 50%;
  border: 4px solid #cfd6de; box-shadow: 0 0 0 3px #4a5563, 0 6px 18px rgba(0,0,0,.6); background: #0b2412; }
#db-radar span { font: bold 12px Tahoma, sans-serif; color: #ffdc3c; text-shadow: 0 1px 2px #000; }

#db-dragon { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: grid; place-items: center; align-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(0, 30, 10, .55), rgba(0, 0, 0, .88) 70%); animation: db-in .6s ease-out; }
#db-dragon[hidden] { display: none; }
#db-dragon img { width: min(250px, 60vw); image-rendering: pixelated; filter: drop-shadow(0 0 24px rgba(80, 255, 120, .45)); }
#db-dragon b { font: bold clamp(16px, 2vw, 24px) Tahoma, sans-serif; color: #ffe066; text-shadow: 0 2px 6px #000; }
@keyframes db-in { from { opacity: 0; } }
/* com o dragão na tela: ele fica no alto e a janela do desejo embaixo, sem escurecer por cima */
body.dragon-on #db-dragon { align-content: start; padding-top: clamp(12px, 4vh, 48px); }
body.dragon-on #dialog { background: transparent; align-items: end; padding-bottom: clamp(12px, 5vh, 60px); }