/* ===== Link back panel: a little isometric room, drawn in js/room.js ===== */
.flip-container.show-link {
  width: min(var(--card-width-link), 92vw);
  /* Keep the main site's full-screen cherry-blossom canvas behind the room.
     Blossoms remain visible everywhere outside this card. */
  z-index: 10000;
}

.flip-container.show-link .back-link {
  display: block;
}

.back-link {
  background: linear-gradient(to top, #4b1637 0%, #702443 38%, #98454f 70%, #bd733a 100%);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

.back-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  /* Six-kite asanoha stars on an offset triangular lattice. */
  background-image: url("../pic/asanoha-pattern.svg");
  background-size: 58px 100.46px;
}

#room-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  line-height: 0;
  font-family: var(--font);
}

#room-scene {
  display: block;
  width: 100%;
  height: auto;
}

#room-night-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

#room-scene.lights-off #room-night-overlay {
  opacity: 0.68;
}

#room-moonlight,
#room-night-window-frames,
#room-night-flue-occluder,
#room-night-roof-occluder,
#room-night-hood-occluder,
#room-laptop-glow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

#room-scene.lights-off #room-moonlight,
#room-scene.lights-off #room-night-window-frames,
#room-scene.lights-off #room-night-flue-occluder,
#room-scene.lights-off #room-night-roof-occluder,
#room-scene.lights-off #room-night-hood-occluder,
#room-scene.lights-off #room-laptop-glow {
  opacity: 1;
}

#room-scene.lights-off #room-moonlight {
  filter: drop-shadow(0 0 12px rgba(174, 215, 255, 0.68));
}

#room-scene.lights-off #room-laptop-glow {
  filter: drop-shadow(0 0 9px rgba(156, 220, 255, 0.95));
}

#room-light-switch {
  cursor: pointer;
  outline: none;
}

.room-light-switch-hit {
  fill: #fff;
  fill-opacity: 0.001;
  stroke: transparent;
  stroke-width: 2;
}

#room-light-switch:focus-visible .room-light-switch-hit {
  stroke: rgba(255, 239, 183, 0.9);
}

/* ===== Furniture that links out ===== */
.hotspot {
  cursor: pointer;
}

.hotspot .hit {
  fill-opacity: 0;
  transition: fill-opacity 0.25s ease;
}

.hotspot:hover,
.hotspot:focus-visible {
  filter: drop-shadow(0 0 7px rgba(255, 238, 244, 0.95));
  outline: none;
}

.hotspot:hover .hit,
.hotspot:focus-visible .hit {
  fill-opacity: 0.16;
}

/* Tooltip that follows the cursor around the room */
#room-tip {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  color: #333;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -170%);
  transition: opacity 0.2s ease;
  z-index: 10;
}

#room-tip.visible {
  opacity: 1;
}

#room-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#room-wrapper:hover #room-hint {
  opacity: 0;
}

/* ===== Room-only snowfall; the main site keeps its canvas cherry blossoms ===== */
.room-snowflake {
  position: absolute;
  top: -6%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
  opacity: 0.9;
  pointer-events: none;
  animation: room-snowfall linear infinite;
}

@keyframes room-snowfall {
  0%   { transform: translate(0, 0) scale(var(--snow-scale)); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translate(var(--snow-drift), 640px) scale(var(--snow-scale)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .room-snowflake { display: none; }
}