/* Identical hard-word treatment across the four word-bank games. */
.wp-special-word {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: .24em;
  max-width: 100%;
  line-height: 1;
  vertical-align: middle;
}
html body .zine-stage .wp-special-word > .wp-special-ink {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  translate: none;
}
html body .zine-stage .wp-special-word[data-hard="true"] > .wp-special-ink {
  color: #a12c23;
  -webkit-text-fill-color: #a12c23;
}
.wp-hard-flame {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 1.02em;
  height: 1.2em;
  filter: drop-shadow(.018em .025em .012em rgb(58 31 19 / .24));
  pointer-events: none;
}
.wp-hard-flame::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - .6em);
  width: 1.2em;
  height: 1.2em;
  background: url("assets/nachtzine/special-words-2026-10-19/paper-flame-atlas-v2.png") 0 0 / 300% 200% no-repeat;
}
.wp-special-word[data-flame-motion="true"] > .wp-hard-flame::before {
  animation: wp-paper-flame-frames 1s steps(1, end) infinite;
}
@keyframes wp-paper-flame-frames {
  0%, 100% { background-position: 0 0; }
  16.6667% { background-position: 50% 0; }
  33.3333% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  66.6667% { background-position: 50% 100%; }
  83.3333% { background-position: 100% 100%; }
}
/* Cached documents retain their old star nodes; hide them only once the
   shared component has successfully mounted, never erase the fallback. */
.fs-word-line:has(.wp-special-word) > .fs-hard-mark,
#zineRoyaleApp .royale-word-slot:has(.wp-special-word)::after { display: none !important; }
.fs-word-line:has(.wp-special-word) { display: flex; justify-content: center; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .wp-special-word[data-flame-motion="true"] > .wp-hard-flame::before { animation: none; background-position: 0 0; }
}
@media (forced-colors: active) {
  html body .zine-stage .wp-special-word[data-hard="true"] > .wp-special-ink {
    color: CanvasText; -webkit-text-fill-color: CanvasText;
    text-decoration: underline double; text-underline-offset: .12em;
  }
  .wp-hard-flame { forced-color-adjust: none; }
}
