/* Kiki's Reset Room — authoritative Room Key component.
   Loaded after styles.css on every story and Reset Room page. */

.room-key-plaque {
  --room-key-max: 680px;
  --room-key-art-max: 210px;
  --room-key-quote-max: 36px;
  --room-key-rose-light: #9d4c51;
  --room-key-rose: #843845;
  --room-key-rose-deep: #6f2938;
  --room-key-cream: #fff8ef;
  --room-key-gold: #d7a84f;
  --room-key-gold-bright: #fbe7af;

  position: relative;
  isolation: isolate;
  width: min(100%, var(--room-key-max));
  box-sizing: border-box;
  margin: clamp(42px, 5vw, 58px) auto clamp(34px, 4vw, 46px);
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--room-key-gold);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 248, 239, 0.10), transparent 29%),
    linear-gradient(145deg, var(--room-key-rose-light), var(--room-key-rose) 52%, var(--room-key-rose-deep));
  box-shadow: 0 22px 52px rgba(73, 24, 37, 0.24), inset 0 0 0 3px rgba(251, 231, 175, 0.18);
  text-align: center;
  break-inside: avoid;
}

.room-key-plaque::before,
.room-key-plaque::after {
  position: absolute;
  z-index: 0;
  width: 154px;
  aspect-ratio: 1;
  border: 1px solid rgba(251, 231, 175, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 17%, rgba(251, 231, 175, 0.20) 0 8px, transparent 9px),
    radial-gradient(circle at 83% 50%, rgba(255, 248, 239, 0.16) 0 8px, transparent 9px),
    radial-gradient(circle at 50% 83%, rgba(251, 231, 175, 0.17) 0 8px, transparent 9px),
    radial-gradient(circle at 17% 50%, rgba(255, 248, 239, 0.16) 0 8px, transparent 9px);
  content: "";
  pointer-events: none;
}

.room-key-plaque::before { top: -84px; left: -76px; }
.room-key-plaque::after { right: -80px; bottom: -90px; }

.room-key-plaque__panel {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 38px) clamp(22px, 6vw, 54px) clamp(31px, 4vw, 42px);
  border: 1px solid var(--room-key-gold);
  border-radius: 19px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 248, 239, 0.10), transparent 30%),
    linear-gradient(145deg, #934552, var(--room-key-rose) 50%, var(--room-key-rose-deep));
  box-shadow: inset 0 0 0 3px rgba(255, 248, 239, 0.06), inset 0 0 0 4px rgba(251, 231, 175, 0.28);
}

.room-key-plaque__panel::before,
.room-key-plaque__panel::after {
  position: absolute;
  top: 16px;
  color: rgba(251, 231, 175, 0.78);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  content: "❦";
}

.room-key-plaque__panel::before { left: 19px; transform: rotate(-28deg); }
.room-key-plaque__panel::after { right: 19px; transform: rotate(28deg) scaleX(-1); }

.room-key-plaque__kicker {
  margin: 0 0 11px;
  color: var(--room-key-gold-bright);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.room-key-plaque__kicker span { color: var(--room-key-cream); }

.room-key-plaque__ornament {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) minmax(160px, var(--room-key-art-max)) minmax(24px, 1fr);
  gap: clamp(9px, 1.7vw, 16px);
  width: min(100%, 540px);
  align-items: center;
  margin: 0 auto 12px;
  color: var(--room-key-gold-bright);
}

.room-key-plaque__ornament span {
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 35%, currentColor);
}

.room-key-plaque__ornament span:last-child { transform: scaleX(-1); }

.room-key-plaque__ornament .room-key-plaque__key {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 7px 8px rgba(50, 14, 27, 0.34));
}

.room-key-plaque .room-key-plaque__panel .room-key-plaque__title {
  margin: 0;
  color: var(--room-key-gold-bright);
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.23em;
  line-height: 1.4;
  text-transform: uppercase;
}

.room-key-plaque .room-key-plaque__panel .room-key-plaque__text {
  max-width: 25ch;
  margin: 10px auto 0;
  color: var(--room-key-cream);
  font-family: var(--serif);
  font-size: clamp(29px, 3.4vw, var(--room-key-quote-max));
  font-style: italic;
  font-weight: 500;
  line-height: 1.14;
  text-wrap: balance;
}

.room-key-plaque .room-key-plaque__panel .room-key-plaque__support {
  max-width: 48ch;
  margin: 11px auto 0;
  color: var(--room-key-cream);
  font-size: 15px;
  line-height: 1.58;
}

.room-key-plaque__signature {
  margin: 13px 0 0;
  color: var(--room-key-gold-bright);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

.topic-room-key { scroll-margin-top: 110px; }

@media (max-width: 620px) {
  .room-key-plaque {
    --room-key-art-max: 116px;
    --room-key-quote-max: 27px;

    margin: 28px auto 25px;
    padding: 5px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(73, 24, 37, 0.22), inset 0 0 0 2px rgba(251, 231, 175, 0.18);
  }

  .room-key-plaque__panel {
    padding: 21px 14px 23px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px rgba(255, 248, 239, 0.06), inset 0 0 0 3px rgba(251, 231, 175, 0.28);
  }

  .room-key-plaque__kicker {
    margin-bottom: 7px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .room-key-plaque__ornament {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--room-key-art-max)) minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 8px;
  }

  .room-key-plaque .room-key-plaque__panel .room-key-plaque__title {
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .room-key-plaque .room-key-plaque__panel .room-key-plaque__text {
    max-width: 23ch;
    margin-top: 8px;
    font-size: clamp(23px, 6.8vw, var(--room-key-quote-max));
    line-height: 1.12;
  }

  .room-key-plaque .room-key-plaque__panel .room-key-plaque__support {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.48;
  }

  .room-key-plaque__signature {
    margin-top: 9px;
    font-size: 16px;
  }

  .room-key-plaque__panel::before,
  .room-key-plaque__panel::after { top: 11px; font-size: 20px; }

  .room-key-plaque__panel::before { left: 12px; }
  .room-key-plaque__panel::after { right: 12px; }
}

@media (forced-colors: active) {
  .room-key-plaque,
  .room-key-plaque__panel {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
  }

  .room-key-plaque__ornament { display: none; }

  .room-key-plaque .room-key-plaque__panel .room-key-plaque__title,
  .room-key-plaque .room-key-plaque__panel .room-key-plaque__text,
  .room-key-plaque .room-key-plaque__panel .room-key-plaque__support,
  .room-key-plaque__kicker,
  .room-key-plaque__kicker span,
  .room-key-plaque__signature,
  .room-key-plaque__panel::before,
  .room-key-plaque__panel::after {
    color: CanvasText;
  }
}

@media print {
  .room-key-plaque,
  .room-key-plaque__panel {
    border-color: #000;
    background: #fff;
    box-shadow: none;
  }

  .room-key-plaque .room-key-plaque__panel .room-key-plaque__title,
  .room-key-plaque .room-key-plaque__panel .room-key-plaque__text,
  .room-key-plaque .room-key-plaque__panel .room-key-plaque__support,
  .room-key-plaque__kicker,
  .room-key-plaque__kicker span,
  .room-key-plaque__signature,
  .room-key-plaque__panel::before,
  .room-key-plaque__panel::after {
    color: #000;
  }
}