/* Loki Locksmith: shared styles for the service "scene" pages (loaded after styles.css) */

.scene-hero {
  padding: 40px 0 24px;
  background: radial-gradient(ellipse at 70% 0%, rgba(181,18,27,.3), transparent 60%), var(--grain), var(--black);
}
.back-link { display: flex; width: fit-content; align-items: center; gap: 6px; color: var(--mist); text-decoration: none; font-weight: 600; margin-bottom: 18px; }
.back-link:hover { color: var(--bone); }
.scene-hero h1 {
  font-family: "Cinzel", "Noto Sans Runic", serif; font-weight: 900;
  font-size: clamp(2rem, 7vw, 3.4rem); margin: 0 0 .2em;
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(227,38,47,.3);
}
.scene-hero .lead { margin: 0; }

/* The area where each page's interactive scene lives */
.stage { padding: 24px 0 56px; }
.stage-box { position: relative; max-width: 760px; margin: 0 auto; padding: 24px 18px; }
@media (min-width: 720px) { .stage-box { padding: 36px; } }

/* Result / next-step panel shown at the end of a scene */
.result { text-align: center; max-width: 560px; margin: 24px auto 0; }
.result .big-rune { font-family: "Noto Sans Runic"; font-size: 2.6rem; line-height: 1; color: var(--red-hot); text-shadow: 0 0 18px rgba(227,38,47,.6); }
.result h2 { margin: 8px 0 6px; font-size: clamp(1.4rem, 4vw, 2rem); }
.result p { color: var(--mist); margin: 0 0 18px; }
.result .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.result.show { animation: rise .5s ease-out both; }

/* Choice buttons used in several scenes */
.choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice {
  font: 600 1rem "Source Sans 3", sans-serif; color: var(--bone); cursor: pointer; text-align: center;
  padding: 16px 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ash), var(--coal));
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.choice:hover, .choice:focus-visible { outline: none; border-color: var(--red-hot); box-shadow: 0 0 16px rgba(227,38,47,.4); transform: translateY(-2px); }
.choice[aria-pressed="true"] { border-color: var(--red-hot); background: linear-gradient(180deg, #3a1416, var(--coal)); }
.choice .rune { display: block; font-family: "Noto Sans Runic"; font-size: 1.6rem; color: var(--red-hot); margin-bottom: 4px; }

/* "Not sure? Call" strip at the bottom of each scene */
.scene-help { text-align: center; color: var(--mist); padding-bottom: 48px; }