/* The scene's interface: notes, close buttons, the scene and its stage, the icons */

/* "Items added." and the other notes: below the icons, on the right (so they never cover one) */
.items-added {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: max-content; /* each note on one line, not squeezed to the icons' width */
  text-align: right;
  z-index: 30; /* above popups and the notebook */
  white-space: pre-line; /* several notes at once, one per line */
  padding: 8px 18px;
  font-size: 1.5rem;
  color: var(--stone-light);
  background: var(--forest-darkest);
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.items-added.is-showing {
  animation: items-added var(--note-duration, 2.6s) ease forwards;
}

/* A note held a while after its tip (fully shown, then fading at the end) */
.items-added.is-holding {
  animation: note-hold var(--note-duration, 4.5s) ease forwards;
}

@keyframes note-hold {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* A note that stays (e.g. a confirmation waiting): it fades in like the others, then stays */
.items-added.is-staying {
  animation: note-in 0.3s ease forwards;
}

@keyframes note-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes items-added {
  0% { opacity: 0; transform: translateY(-8px); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Notebook: items found, one row each, straight on the page */
.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 1.2rem;
}

.item-row .stone {
  flex-shrink: 0;
}

.item-row .stone {
  width: 90px;
  height: 90px;
}

.item-row .stone .glyph {
  width: 40px;
  height: 40px;
  font-size: 0.8rem;
  color: var(--stone-light);
}

/* X in the top right corner, inside the box */
.poi-close {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 0 4px;
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--stone-light);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover: turns gold, grows and gives a quarter turn */
.poi-close:hover,
.poi-close:focus-visible {
  color: var(--sunlight);
  transform: scale(1.2) rotate(90deg);
  outline: none;
}

/* Click: pressed in */
.poi-close:active {
  transform: scale(0.85) rotate(90deg);
  transition-duration: 0.08s;
}

/* UI buttons (scene and options) */
.ui-button {
  font: inherit;
  font-size: 1.1rem;
  padding: 6px 16px;
  color: var(--stone-light);
  background: rgba(22, 33, 26, 0.85);
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  cursor: pointer;
}

.ui-button:hover,
.ui-button:focus-visible {
  border-color: var(--sunlight);
  outline: none;
}

/* Scene */
.scene {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* The view: the window's part of the scene. The picture covers it (a little may be cut off); when that
   would hide a point of interest, a scroll bar reaches the rest, one way only (see layoutSceneStage).
   It keeps the scene's layers (points, spirits) among themselves, under the popups. */
.scene-view {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark) var(--forest-darkest);
}

/* The stage holds the background and the points of interest.
   With a picture, it takes the picture's shape and covers the view (whatever doesn't fit is
   scrolled to), so points stay on their spot in the picture.
   Without one (placeholder), it simply fills the view. */
.scene-stage {
  position: absolute;
  inset: 0;
  overflow: clip; /* what goes past the picture (a spirit walking off) neither shows nor widens the scroll */
}

.scene-stage.has-aspect {
  inset: auto;
  top: 0;
  left: 0; /* its size: see layoutSceneStage */
}

.scene-background {
  position: absolute;
  inset: 0;
}

/* Placeholder background: its name in the top left corner */
.scene-background.placeholder {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
}

/* Background picture: fills the stage (which has its shape) */
.scene-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-ui {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Image buttons (notebook, options) with a dark shadow */
.icon-button {
  width: 52px;
  height: 52px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* Half transparent until hovered or clicked */
.icon-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

/* Hover: fully visible, lifts up, shadow grows */
.icon-button:hover img,
.icon-button:focus-visible img {
  opacity: 1;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.8));
}

.icon-notebook:hover img,
.icon-notebook:focus-visible img {
  transform: translateY(-3px) scale(1.08) rotate(-4deg);
}

/* The magnifying glass tilts as if picked up */
.icon-investigate:hover img,
.icon-investigate:focus-visible img {
  transform: translateY(-3px) scale(1.08) rotate(8deg);
}

/* Investigating: every outline and dot in the scene lights up for a moment (see investigate) */
.scene.is-investigating .poi-shape:not(:hover) {
  animation: investigate-shape 2.4s ease-in-out;
}

@keyframes investigate-shape {
  0%, 100% { fill: transparent; stroke: transparent; filter: none; }
  20%, 70% {
    fill: rgba(255, 226, 150, 0.16);
    stroke: rgba(255, 226, 150, 0.95);
    filter: drop-shadow(0 0 4px rgba(255, 214, 120, 0.9)) drop-shadow(0 0 10px rgba(255, 214, 120, 0.5));
  }
}

.scene.is-investigating .poi-dot {
  animation: investigate-dot 2.4s ease-in-out;
}

@keyframes investigate-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(12, 19, 14, 0.7), 0 0 8px rgba(217, 182, 92, 0.6), 0 2px 4px rgba(0, 0, 0, 0.6); }
  20%, 70% { box-shadow: 0 0 0 2px rgba(12, 19, 14, 0.7), 0 0 24px 8px rgba(255, 214, 120, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6); }
}

/* Something new in the notebook: the icon lights up for a moment */
.icon-notebook.is-highlighted img {
  animation: notebook-glow var(--glow-duration, 2.8s) ease-in-out;
}

/* Held lit while a tip points at it, and a while after; then it fades back */
.icon-notebook.is-tip-target img,
.icon-brush.is-tip-target img,
.icon-investigate.is-tip-target img,
.icon-notebook.is-lit img {
  animation: none;
  opacity: 1;
  transform: scale(1.25) rotate(-5deg);
  filter: drop-shadow(0 0 14px rgba(255, 214, 120, 0.95));
  transition: transform 0.6s ease, filter 0.6s ease, opacity 0.6s ease;
}

.icon-notebook.is-fading img {
  transition-duration: 0.6s;
}

/* One glow: lights up, holds, then fades back */
@keyframes notebook-glow {
  0% { opacity: 0.55; transform: scale(1); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); }
  15%, 75% { opacity: 1; transform: scale(1.25) rotate(-5deg); filter: drop-shadow(0 0 14px rgba(255, 214, 120, 0.95)); }
  100% { opacity: 0.55; transform: scale(1); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); }
}

.icon-options:hover img,
.icon-options:focus-visible img {
  transform: translateY(-3px) scale(1.08) rotate(30deg);
}

.icon-button:focus-visible {
  outline: none;
}

/* Click: pressed down, shadow tightens */
.icon-button:active img {
  opacity: 1;
  transform: scale(0.92);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
  transition-duration: 0.08s;
}