/* Homepage room: pre-rendered images, hover-to-light via CSS only (no canvas, no rAF). Built by scripts/render-room.py */
.nr-room { --nr-serif: "Playfair Display", Georgia, serif; --nr-sans: "DM Sans", system-ui, sans-serif; --nr-gold: #f1cf8c; --nr-ink: #fff4e2; --nr-pill: rgba(22, 15, 10, .8);
  position: absolute; inset: 0; overflow: hidden; background: #0c0b12; container-type: size; }
.nr-fit { position: absolute; left: 50%; top: 50%; width: max(100%, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.nr-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.nr-lit { opacity: 0; transition: opacity .3s ease; will-change: opacity; }
.nr-room:has(.nr-hs[data-id="mushroom"]:is(:hover, :focus-visible)) .nr-lit-mushroom,
.nr-room:has(.nr-hs[data-id="qmark1"]:is(:hover, :focus-visible)) .nr-lit-qmark1,
.nr-room:has(.nr-hs[data-id="lantern"]:is(:hover, :focus-visible)) .nr-lit-lantern,
.nr-room:has(.nr-hs[data-id="glowstick"]:is(:hover, :focus-visible)) .nr-lit-glowstick,
.nr-room:has(.nr-hs[data-id="picturelight"]:is(:hover, :focus-visible)) .nr-lit-picturelight,
.nr-room:has(.nr-hs[data-id="spiral"]:is(:hover, :focus-visible)) .nr-lit-spiral,
.nr-room.nr-on-all:not(:has(.nr-hs:is(:hover, :focus-visible))) .nr-lit-all { opacity: 1; }
.nr-room[data-on="mushroom"] .nr-lit-mushroom, .nr-room[data-on="qmark1"] .nr-lit-qmark1, .nr-room[data-on="lantern"] .nr-lit-lantern, .nr-room[data-on="glowstick"] .nr-lit-glowstick, .nr-room[data-on="picturelight"] .nr-lit-picturelight, .nr-room[data-on="spiral"] .nr-lit-spiral { opacity: 1; }
.nr-room[data-on="mushroom"] .nr-hs[data-id="mushroom"] .nr-label, .nr-room[data-on="qmark1"] .nr-hs[data-id="qmark1"] .nr-label, .nr-room[data-on="lantern"] .nr-hs[data-id="lantern"] .nr-label, .nr-room[data-on="glowstick"] .nr-hs[data-id="glowstick"] .nr-label, .nr-room[data-on="picturelight"] .nr-hs[data-id="picturelight"] .nr-label, .nr-room[data-on="spiral"] .nr-hs[data-id="spiral"] .nr-label { opacity: 1; }
.nr-room[data-on="mushroom"] .nr-mark[data-id="mushroom"], .nr-room[data-on="qmark1"] .nr-mark[data-id="qmark1"], .nr-room[data-on="lantern"] .nr-mark[data-id="lantern"], .nr-room[data-on="glowstick"] .nr-mark[data-id="glowstick"], .nr-room[data-on="picturelight"] .nr-mark[data-id="picturelight"], .nr-room[data-on="spiral"] .nr-mark[data-id="spiral"] { opacity: 0; }
.nr-hs { position: absolute; z-index: 3; display: block; border-radius: 12px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.nr-hs:focus-visible { box-shadow: 0 0 0 2px var(--nr-gold); }
.nr-label { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -10px); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: 300px;
  padding: 8px 16px 9px; border-radius: 999px; text-align: center; background: var(--nr-pill); color: var(--nr-ink); border: 1px solid rgba(255, 232, 196, .25);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.nr-hs:is(:hover, :focus-visible) .nr-label { opacity: 1; }
.nr-hs[data-id="spiral"] .nr-label { left: 80%; }
.nr-name { font: 400 15px/1.25 var(--nr-serif); text-wrap: balance; }
.nr-price { font: 500 12.5px/1.2 var(--nr-sans); letter-spacing: .06em; color: var(--nr-gold); }
.nr-ui { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; z-index: 4; pointer-events: none; }
.nr-hint { font: 500 14px/1 var(--nr-sans); letter-spacing: .05em; color: var(--nr-ink); background: rgba(22, 15, 10, .82); border: 1px solid rgba(241, 207, 140, .35); padding: 10px 16px; border-radius: 999px; }
.nr-hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #f1cf8c; box-shadow: 0 0 9px 2px rgba(241, 207, 140, .8); vertical-align: 1px; }
.nr-all { pointer-events: auto; font: 500 12.5px/1 var(--nr-sans); letter-spacing: .05em; color: var(--nr-ink); background: var(--nr-pill); border: 1px solid rgba(255, 232, 196, .25); padding: 9px 15px; border-radius: 999px; cursor: pointer; }
.nr-all:hover, .nr-all:focus-visible { border-color: rgba(241, 207, 140, .7); outline: none; }
.nr-all[aria-pressed="true"] { color: #1d140c; background: var(--nr-gold); border-color: var(--nr-gold); }
.nr-mark { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; transition: opacity .3s ease; }
.nr-mark::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 0 2px rgba(20, 12, 6, .55), 0 0 12px 3px rgba(255, 214, 140, .9); }
.nr-mark::after { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid rgba(255, 226, 168, .95); opacity: 0; transform: scale(.55); }
@media (prefers-reduced-motion: no-preference) { .nr-mark::after { animation: nr-ring 2.6s ease-out infinite; } .nr-mark:nth-of-type(2n)::after { animation-delay: -1.3s; } }
@media (prefers-reduced-motion: reduce) { .nr-mark::after { opacity: .85; transform: none; } .nr-lit, .nr-label { transition: none; } }
.nr-room:has(.nr-hs[data-id="mushroom"]:is(:hover, :focus-visible)) .nr-mark[data-id="mushroom"],
.nr-room:has(.nr-hs[data-id="qmark1"]:is(:hover, :focus-visible)) .nr-mark[data-id="qmark1"],
.nr-room:has(.nr-hs[data-id="lantern"]:is(:hover, :focus-visible)) .nr-mark[data-id="lantern"],
.nr-room:has(.nr-hs[data-id="glowstick"]:is(:hover, :focus-visible)) .nr-mark[data-id="glowstick"],
.nr-room:has(.nr-hs[data-id="picturelight"]:is(:hover, :focus-visible)) .nr-mark[data-id="picturelight"],
.nr-room:has(.nr-hs[data-id="spiral"]:is(:hover, :focus-visible)) .nr-mark[data-id="spiral"],
.nr-room.nr-on-all .nr-mark { opacity: 0; }
@keyframes nr-ring { 0% { opacity: .95; transform: scale(.5); } 70% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } }
@media (max-width: 768px) { .nr-room { display: none; } }