/* ============================================================
   dream : havoc — skin.
   Night-ops navy with a faint grid; the copy is destructible.
   Classes without a [data-theme] scope (.df-tiles, .df-debris,
   .df-hint …) are only ever created by this dream's JS.
   ============================================================ */

html[data-theme="havoc"] body {
  background: radial-gradient(120% 90% at 50% 0%, #1C2A4A 0%, #111B36 45%, #0A1122 100%) #0A1122;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}
html[data-theme="havoc"] #stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(251,250,246,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,250,246,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}

html[data-theme="havoc"] #df-change-dream { cursor: pointer; }

/* the reticle replaces entrance choreography; content just fades in */
html[data-theme="havoc"] .df-name,
html[data-theme="havoc"] .df-sub,
html[data-theme="havoc"] .df-tagline,
html[data-theme="havoc"] .df-soon { animation: none; }
html[data-theme="havoc"] #content { animation: df-fade-in 0.5s ease-out both; }

.df-logo.df-tiled img { opacity: 0; }
.df-tiles {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 44px rgba(201,162,75,0.35)) drop-shadow(0 0 90px rgba(52,87,166,0.30));
}
.df-tile {
  position: absolute;
  /* url() is relative to this CSS file: dreams/dream_havoc/ */
  background-image: url("../../assets/dreamfinder-logo.png");
  background-repeat: no-repeat;
}

.df-dead { visibility: hidden; }
.df-reborn { animation: df-rebirth 0.6s ease-out both; }
@keyframes df-rebirth {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.df-debris {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  will-change: transform, opacity;
  line-height: 1;
  background-repeat: no-repeat;
}

.df-hint {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 7;
  padding: 10px 16px;
  border: 1px solid rgba(201,162,75,0.35);
  border-radius: 10px;
  background: rgba(11,19,38,0.72);
  backdrop-filter: blur(4px);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(251,250,246,0.75);
  pointer-events: none;
  animation: df-fade-in 0.9s 0.6s ease-out both;
  transition: opacity 0.8s;
}
.df-hint kbd {
  font-family: var(--df-mono);
  font-size: 0.72rem;
  color: var(--gold-400, #D9BC6E);
  border: 1px solid rgba(201,162,75,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 2px;
}
.df-hint.out { opacity: 0; }

@media (max-width: 720px) {
  .df-hint {
    left: 50%;
    transform: translateX(-50%);
    bottom: 64px;
    white-space: nowrap;
  }
}