/* Main stylesheet */

/* Colour palette: dark forest and stone ruins */
:root {
  --forest-darkest: #0c130e;
  --forest-dark: #16211a;
  --forest: #24342a;
  --moss: #56663f;
  --stone-dark: #5f5a4c;
  --stone: #8f8771;
  --stone-light: #cfc6ab;
  --sunlight: #d9b65c;

  /* Notebook tab stickers */
  --sticker-1: #8a9a5b;
  --sticker-2: #c99a4e;
  --sticker-3: #a8604a;
  --sticker-4: #6f8a96;
  --sticker-5: #8e7391;

  /* Speech bubbles */
  --bubble-spirit: #1f2b23;
  --bubble-spirit-border: #3d4a3f;
  --bubble-player: #2a2c20;
  --bubble-player-border: #6b5d36;

  /* Glyph categories (reply vocabulary) */
  --cat-actions: #8a9a5b;
  --cat-people: #c99a4e;
  --cat-time: #7f9aa3;
  --cat-feelings: #b8735c;
  --cat-nature: #6e9478;
  --cat-quantities: #9a87ad;
  --cat-grammar: #a3998a;

  --font-main: "Cormorant Garamond", Georgia, serif;
  --font-handwriting: "Caveat", "Segoe Print", cursive;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--forest-darkest);
  color: var(--stone-light);
}

/* Main menu */
.main-menu {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 16px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 35%, var(--forest) 0%, var(--forest-dark) 45%, var(--forest-darkest) 100%);
}

.game-title {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stone-light);
  text-shadow: 0 0 24px rgba(217, 182, 92, 0.25);
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(260px, 100%);
}

.menu-buttons button {
  font: inherit;
  font-size: 1.4rem;
  padding: 10px 20px;
  color: var(--stone-light);
  background: rgba(95, 90, 76, 0.25);
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.menu-buttons button:hover,
.menu-buttons button:focus-visible {
  background: rgba(86, 102, 63, 0.45);
  border-color: var(--sunlight);
  color: #f1e8cf;
  outline: none;
}

.menu-buttons button:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
  border-color: var(--stone-dark);
  color: var(--stone);
}

[hidden] {
  display: none !important;
}

/* Placeholder for a missing asset: a plain box with its name */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: var(--stone-light);
  background: var(--forest-dark);
  border: 1px dashed var(--stone);
}

/* A glyph: its drawing (see .glyph-image), or until it's drawn, its word in small capitals.
   No circle around either: their states (hover, gold, category, notebook ink) show on the glyph itself. */
.glyph {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  padding: 0;
  font-family: inherit;
  font-variant-caps: all-small-caps;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--stone-light);
  background: none;
}

/* The placeholder word shrinks with its length so it always fits its box,
   whatever the box's size (cqi = % of the box's width) */
.glyph {
  container-type: inline-size;
}

/* Names (cartouches) keep their own size; word glyphs are a little bigger */
.glyph.name-cartouche {
  width: 72px;
  height: 72px;
}

.glyph-word {
  font-size: min(1em, calc(190cqi / var(--length)));
  white-space: nowrap;
}

.glyph-with-meaning .glyph {
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Hover: grows slightly (and glows, see the drawn glyphs and placeholder words below) */
.glyph-with-meaning .glyph:hover,
.glyph-with-meaning .glyph:focus-visible {
  transform: scale(1.08);
  outline: none;
}

/* Click: pressed in */
.glyph-with-meaning .glyph:active {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

.notebook .glyph {
  cursor: default;
}

/* Glyph meaning: handwriting while it's the player's guess, print once confirmed */
.glyph-meaning {
  width: 8em;
  padding: 0 4px;
  text-align: center;
  font-family: var(--font-handwriting);
  font-size: 1.4rem;
  color: inherit;
  background: transparent;
  border: none;
}

.glyph-meaning:focus {
  outline: none;
}

.glyph-meaning.is-confirmed {
  font-family: var(--font-main);
  font-size: 1.2rem;
}

/* A glyph met in the world, with its meaning underneath.
   The meaning floats below the circle so showing it never moves anything. */
.glyph-with-meaning {
  position: relative;
  color: var(--stone-light);
}

.glyph-with-meaning .glyph-meaning {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 6em;
  field-sizing: content; /* shrinks to the text where the browser supports it */
  min-width: 2em;
  max-width: 8em;
}

.glyph-with-meaning div.glyph-meaning {
  width: max-content;
}

/* Placed in a scene */
/* Inscription popup: the name of the missing picture, and the glyphs on it */
.poi-content {
  position: relative;
}

.inscription-label {
  align-self: flex-start;
  color: var(--stone);
}

/* Glyphs in a row (here and below) are centred on one line, so names and glyphs of
   different sizes line up */
.inscription-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  row-gap: 44px; /* room for the meanings floating under the glyphs */
  /* room for a meaning below the glyphs, balanced by space above so they sit centred */
  padding: 20px 0 28px;
}

/* Right below the sentence describing it (e.g. the ritual stone) */
.inscription-words.is-close {
  padding-top: 0;
}

/* Spirit popup: portrait at the bottom left, the conversation on the right from the top.
   Fixed size from the start, so nothing moves as the conversation grows. */
.poi-popup.is-wide {
  width: min(820px, 100%);
  max-width: none;
}

/* Tall enough for three lines of dialogue and the Reply button without scrolling */
.poi-popup.is-wide .poi-content {
  height: min(610px, calc(100vh - 64px));
  flex-direction: row;
  align-items: stretch;
  padding: 24px;
}

.spirit-view {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  height: 100%;
}

/* Portrait: a zoomed-in crop of the spirit's full image, no frame,
   fading out softly at the edges where the crop cuts the figure */
.spirit-portrait {
  position: relative;
  align-self: flex-end; /* sits at the bottom of the popup */
  flex-shrink: 0;
  width: 200px;
  height: 240px;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, black 55%, transparent 100%);
}

.spirit-portrait img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
}

/* Mirrored so the spirit looks towards the dialogue */
.spirit-portrait.is-mirrored {
  transform: scaleX(-1);
}

/* The conversation so far: spirit lines on the left, the player's replies on the right */
.dialogue-log {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 36px; /* room for the meanings floating under the glyphs */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark) transparent;
  padding: 18px 30px 40px 18px; /* room for glows, the translate buttons, and a meaning under the last line */
}

/* Speech bubble: the spirit's on the left with its tail bottom left,
   the player's on the right with its tail bottom right */
.dialogue-line {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 30px 10px 14px;
  background: var(--bubble-spirit);
  border: 1px solid var(--bubble-spirit-border);
  border-radius: 18px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

.dialogue-line::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 26px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid var(--bubble-spirit-border);
  border-bottom: 1px solid var(--bubble-spirit-border);
  transform: rotate(45deg);
}

.dialogue-line.is-player {
  align-self: flex-end;
  background: var(--bubble-player);
  border-color: var(--bubble-player-border);
}

.dialogue-line.is-player::after {
  left: auto;
  right: 26px;
  border-color: var(--bubble-player-border);
}


.dialogue-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
}

.dialogue-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  row-gap: 44px;
}

/* The last two glyphs of a question, kept on the same line (see appendWords) */
.keep-together {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: inherit;
}

/* A meaning being written sits on its own background, over the bubble (or the lamp's Press button) */
.dialogue-line .glyph-with-meaning input.glyph-meaning,
.lamp-glyph .glyph-with-meaning input.glyph-meaning {
  z-index: 2;
  background: var(--forest-darkest);
  border-radius: 4px;
}

/* Translate button: the arrows, overlapping the bubble's right side */
.translate-button {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 24px;
  height: 24px;
  padding: 5px;
  transform: translateY(-50%);
  background: var(--forest-darkest);
  border: 1px solid var(--stone-dark);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The arrows image, recoloured with filters (the original is dark grey):
   pale stone normally, sunlight gold on hover or while the meanings are shown.
   (Filters, not a mask, so it also shows when index.html is opened straight from the folder.) */
.translate-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(86%) sepia(14%) saturate(320%) hue-rotate(8deg);
  transition: filter 0.2s ease, transform 0.3s ease;
}

.translate-button:hover,
.translate-button:focus-visible {
  transform: translateY(-50%) scale(1.15);
  border-color: var(--sunlight);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.7), 0 0 10px rgba(217, 182, 92, 0.35);
  outline: none;
}

.translate-button:hover .translate-icon,
.translate-button:focus-visible .translate-icon,
.translate-button.is-active .translate-icon {
  filter: brightness(0) invert(76%) sepia(45%) saturate(620%) hue-rotate(5deg) brightness(95%);
}

.translate-button:active {
  transform: translateY(-50%) scale(0.9);
  transition-duration: 0.08s;
}

/* While the meanings are shown: gold, and the arrows turn over */
.translate-button.is-active {
  border-color: var(--sunlight);
}

.translate-button.is-active .translate-icon {
  transform: rotate(180deg);
}

/* Glyph ↔ meaning: each item flips over like a card, word by word */
.dialogue-item {
  display: inline-flex;
  align-items: center;
}

/* A glyph flipping to its meaning, or a whole sentence flipping to its phrase */
.dialogue-item.is-flipping,
.dialogue-words.is-flipping,
.inscription-words.is-flipping {
  animation: item-flip 0.32s ease-in-out;
}

/* A whole sentence in place of its glyphs, once all are confirmed (see the phrase bank) */
.translation-phrase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 0 8px;
  font-family: var(--font-main);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  color: var(--stone-light);
}

/* In place of the glyphs, it fills the space they took (the bubble keeps its size) */
.is-whole > .translation-phrase {
  flex: 1 1 100%;
  align-self: stretch;
  min-height: 0;
}

.dialogue-line.is-player .translation-phrase {
  color: var(--sunlight);
}

/* Glyphs written somewhere (inscription, wall) with the translate switch on their right */
.translatable-line {
  position: relative;
  padding-right: 46px; /* room between the glyphs and the switch */
}

.translatable-line .translate-button {
  right: 0;
}

@keyframes item-flip {
  0% { transform: perspective(300px) rotateY(0deg); opacity: 1; }
  50% { transform: perspective(300px) rotateY(90deg); opacity: 0.3; }
  100% { transform: perspective(300px) rotateY(0deg); opacity: 1; }
}

/* A meaning in place of its glyph: same height as the circle, so the bubble keeps its size */
.translation-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 84px;
  padding: 0 6px;
  font-family: var(--font-handwriting);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--stone-light);
  white-space: nowrap;
}

.translation-word.is-confirmed {
  font-family: var(--font-main);
  font-size: 1.3rem;
}

.dialogue-line.is-player .translation-word {
  color: var(--sunlight);
}

.translation-word.is-unknown {
  color: var(--stone);
}

/* The Reply button, in the place the player's reply will appear */
.dialogue-reply-slot {
  align-self: flex-end;
  min-height: 72px;
  display: flex;
  align-items: center;
}

/* Reply popup: the sentence on top, the known glyphs below.
   Its height follows the number of known glyphs, up to a limit (then the list scrolls). */
.reply-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(820px, 100%);
  max-height: min(640px, calc(100vh - 32px));
  padding: 40px 24px 24px;
  background: linear-gradient(to bottom, var(--forest) 0%, var(--forest-dark) 45%);
  border: 1px solid var(--stone);
}

.reply-message {
  min-height: 1.4em;
  margin: 0;
  font-style: italic;
  color: var(--stone);
  text-align: center;
}

.reply-compose {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Speak, and beside it Clear: quieter, in italics */
.reply-actions {
  display: flex;
  gap: 12px;
}

.ui-button.reply-clear {
  font-style: italic;
  color: var(--stone);
  background: transparent;
  border-color: rgba(120, 120, 110, 0.45);
}

/* Drop zone for the sentence */
.reply-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 110px;
  padding: 16px;
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  background: var(--forest-darkest);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Vocabulary: a mossy panel holding the filters and the known glyphs */
.reply-vocabulary {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  background: rgba(86, 102, 63, 0.18);
  overflow: hidden;
}

/* Filters: sort (Recent / A–Z) on the left, categories on the right */
.reply-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 10px 12px;
  background: rgba(12, 19, 14, 0.35);
  border-bottom: 1px solid var(--stone-dark);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-button {
  font: inherit;
  font-size: 0.95rem;
  padding: 2px 12px;
  color: var(--stone);
  background: transparent;
  border: 1px solid var(--stone-dark);
  border-radius: 999px;
  cursor: pointer;
}

.filter-button:hover,
.filter-button:focus-visible {
  color: var(--stone-light);
  outline: none;
}

.filter-button.is-active {
  color: var(--forest-darkest);
  background: var(--cat-colour, var(--stone-light));
  border-color: var(--cat-colour, var(--stone-light));
}

/* Each category has its own colour: on its filter, and on its glyphs (see the category tints below) */
[data-category="Actions"] { --cat-colour: var(--cat-actions); }
[data-category="People"] { --cat-colour: var(--cat-people); }
[data-category="Time"] { --cat-colour: var(--cat-time); }
[data-category="Feelings"] { --cat-colour: var(--cat-feelings); }
[data-category="Nature"] { --cat-colour: var(--cat-nature); }
[data-category="Quantities"] { --cat-colour: var(--cat-quantities); }
[data-category="Grammar"] { --cat-colour: var(--cat-grammar); }

.filter-button[data-category]:not([data-category="All"]) {
  border-color: var(--cat-colour, var(--stone-dark));
}


/* Known glyphs: a grid that scrolls when there are many */
.reply-known {
  flex: 0 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  align-content: start;
  gap: 14px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark) transparent;
  padding: 16px 12px;
}

/* A known sentence (Sentences filter): its glyphs in a row, the whole row is one button */
.known-sentence {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px;
  font: inherit;
  background: rgba(95, 90, 76, 0.18);
  border: 1px solid var(--stone-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.known-sentence:hover,
.known-sentence:focus-visible {
  background: rgba(86, 102, 63, 0.35);
  border-color: var(--sunlight);
  outline: none;
}

.known-sentence-glyphs {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Its meaning underneath: small, italic, faded */
.known-sentence-translation {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--stone);
  opacity: 0.8;
}

.known-sentence .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
  pointer-events: none; /* the row is the button */
}

/* Nothing to show (e.g. no confirmed glyphs yet) */
.reply-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  font-style: italic;
  color: var(--stone);
  text-align: center;
}

.known-glyph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.known-glyph .glyph {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 0.95rem;
}

.known-glyph .glyph.name-cartouche {
  width: 56px;
  height: 56px;
}

/* Meaning as a tooltip above any hovered glyph (only if there is one).
   It floats above everything so popups and scrolling lists never cut it off. */
.glyph-tooltip {
  position: fixed;
  z-index: 20;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 12em;
  padding: 2px 10px;
  font-size: 1.2rem;
  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);
  pointer-events: none;
}

.glyph-tooltip.is-confirmed {
  font-size: 1.05rem;
}

/* Glyphs that can be dragged */
.glyph[draggable="true"] {
  cursor: grab;
}

.glyph[draggable="true"]:active {
  cursor: grabbing;
}

/* Point of interest: a glowing dot with a slow pulse */
.poi-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid rgba(241, 232, 207, 0.9);
  border-radius: 50%;
  background: radial-gradient(circle, var(--sunlight) 0%, rgba(217, 182, 92, 0.6) 60%, transparent 100%);
  /* thin dark ring so the dot also stands out on bright backgrounds */
  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);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Soft ring that keeps expanding outwards to draw the eye */
.poi-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(217, 182, 92, 0.7);
  animation: poi-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes poi-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.poi-dot:hover,
.poi-dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 2px rgba(12, 19, 14, 0.7), 0 0 16px rgba(217, 182, 92, 0.9), 0 3px 6px rgba(0, 0, 0, 0.6);
  outline: none;
}

.poi-dot:active {
  transform: translate(-50%, -50%) scale(0.9);
  transition-duration: 0.08s;
}

/* Something new at this point: bigger, brighter, with a stronger pulse, until opened */
.poi-dot.is-highlighted {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, #fff3cf 0%, var(--sunlight) 45%, rgba(217, 182, 92, 0.5) 100%);
  box-shadow: 0 0 0 2px rgba(12, 19, 14, 0.7), 0 0 22px 6px rgba(255, 214, 120, 0.85), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.poi-dot.is-highlighted:not(:hover) {
  animation: dot-shine 1.6s ease-in-out infinite;
}

@keyframes dot-shine {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.25); }
}

.poi-dot.is-highlighted::after {
  border-width: 3px;
  border-color: rgba(255, 214, 120, 0.9);
  animation-duration: 1.6s;
}

/* Point of interest popup: sized to its content (the spirit's popup has a fixed size, see .is-wide) */
.poi-popup {
  position: relative;
  width: fit-content;
  min-width: min(360px, 100%);
  max-width: min(720px, 100%);
}

.poi-content {
  flex-direction: column;
  gap: 16px;
  padding: 36px 44px 28px;
  border-style: solid;
}

/* Story text in a popup */
.poi-text {
  margin: 0;
  max-width: 34em;
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}

/* A popup's text revealed step by step (see stagedBlocks): each step keeps its room from the start.
   The button for the next step sits in its place; a revealed step has space and a faint line above. */
.poi-step {
  position: relative;
  display: grid;
  width: 100%;
  padding-top: 20px;
}

/* The step's text and its button share the same place */
.poi-step > * {
  grid-area: 1 / 1;
}

.poi-step > .ui-button {
  justify-self: center;
  align-self: start;
}

.poi-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.poi-step-content.is-hidden,
.poi-step > .ui-button.is-hidden {
  visibility: hidden;
}

.poi-step.is-revealed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  border-top: 1px solid rgba(207, 198, 171, 0.25);
}

/* In place of a button once its action is done (e.g. a spirit called forth) */
.poi-done {
  font-style: italic;
  color: var(--sunlight);
}

/* Result of an action (e.g. placing a stone) */
.poi-message {
  min-height: 1.4em;
  font-style: italic;
  color: var(--sunlight);
}

.poi-message:empty {
  display: none;
}

/* Stone slot popup: its final size from the start, so placing a stone moves nothing.
   (Fixed width, and room kept for a two-line message even before there is one.) */
.poi-popup[data-type="stone-slot"] {
  width: min(680px, 100%);
}

.poi-popup[data-type="stone-slot"] .poi-message {
  display: block;
  min-height: 2.8em;
}

/* ---- Stones ---- */
.stone-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* A stone picture with its glyph carved on the front */
.stone {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.stone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}

.stone .stone-glyph,
.stone .glyph-with-meaning {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
}

.stone .glyph-with-meaning .stone-glyph {
  position: static;
  transform: none;
}

.stone .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
}

/* Stones that can be picked up and placed */
.stone.is-movable {
  cursor: grab;
  transition: transform 0.2s ease;
}

.stone.is-movable:hover {
  transform: translateY(-4px) scale(1.04);
}

.stone.is-movable:active {
  cursor: grabbing;
  transform: scale(0.96);
}

/* Stones in hand on the left, the slot on the right */
.slot-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* The slot: a box to drop a stone into */
.stone-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border: 1px solid var(--stone-dark);
  border-radius: 6px;
  background: var(--forest-darkest);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* ---- Doorway light: fades and swells in, with a slow shimmer while lit ---- */
.scene-light {
  position: absolute;
  width: auto;
  transform: translate(-50%, -50%) scale(0.7);
  mix-blend-mode: screen; /* adds its light to the picture underneath */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scene-light.is-lit {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: light-shimmer 3s ease-in-out 0.6s infinite;
}

@keyframes light-shimmer {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.04); }
}

/* ---- Scene 2 ---- */

/* Darkness: one half per lamp, each fading away when its lamp is lit */
.scene-darkness {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 7, 0.8);
  pointer-events: none;
  transition: opacity 1.4s ease;
}

.scene-darkness.is-left {
  -webkit-mask-image: linear-gradient(to right, black 45%, transparent 65%);
  mask-image: linear-gradient(to right, black 45%, transparent 65%);
}

.scene-darkness.is-right {
  -webkit-mask-image: linear-gradient(to left, black 45%, transparent 65%);
  mask-image: linear-gradient(to left, black 45%, transparent 65%);
}

.scene-darkness.is-lit {
  opacity: 0;
}

/* The lamps on the scene: dim when off, glowing warm when lit */
.scene-lamp {
  position: absolute;
  height: auto;
  transform: translateX(-50%);
  filter: brightness(0.45) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  transition: filter 0.8s ease;
}

.scene-lamp.is-on {
  filter: drop-shadow(0 0 18px rgba(255, 160, 60, 0.75));
}

/* The wandering spirit: floats from the right to the archway on the left, pauses,
   turns back, floats back, pauses, turns again... (one loop: 60 s).
   The walker moves, the float bobs gently, the figure turns to face where it goes. */
/* Layering: the spirit passes in front of the points of interest in the background,
   except those marked as in front (e.g. the way back) */
.poi-dot {
  z-index: 1;
}

.poi-dot.is-front {
  z-index: 3;
}

/* The spirit's track: as wide as the scene, slid along with a transform, so his position is the
   track's (in % of the scene). Moving it with "transform" rather than "left" spares the browser a new
   layout and a repaint of the figure on every frame: the graphics card just slides the picture. */
.spirit-walker {
  position: absolute;
  z-index: 2;
  inset: 0;
  will-change: transform;
  animation: spirit-walk 60s ease-in-out infinite;
}

/* His body, centred on the track's left edge (his position) */
.spirit-body {
  position: absolute;
  left: 0;
  bottom: 4%;
  height: 62%;
  aspect-ratio: 604 / 806;
  transform: translateX(-50%);
}

.spirit-float {
  width: 100%;
  height: 100%;
  pointer-events: none; /* the picture itself doesn't block clicks... */
  will-change: transform;
  animation: spirit-appear 2.5s ease-out, spirit-bob 6s ease-in-out infinite;
}

.spirit-walker {
  pointer-events: none;
}

/* ...only his body does, so the points behind him are reachable again a little sooner */
.spirit-hitbox {
  position: absolute;
  top: 8%;
  bottom: 4%;
  left: 27%;
  right: 27%;
  pointer-events: auto;
}

.spirit-walker .poi-dot {
  pointer-events: auto;
}

.spirit-figure {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
  animation: spirit-turn 60s linear infinite;
}

.spirit-walker .poi-dot {
  left: 50%;
  top: 24%;
}

/* A spirit floating in place (the old farmer): placed by its centre and bottom edge, it bobs
   gently where it stands; the picture doesn't block clicks, its dot does */
.spirit-standing {
  position: absolute;
  z-index: 2;
  aspect-ratio: 327 / 604;
  transform: translateX(-50%);
  pointer-events: none;
}

/* While the player interacts with him, he stops */
.spirit-walker.is-paused,
.spirit-walker.is-paused * {
  animation-play-state: paused !important;
}

/* Float left past the archway and off the left side of the scene, on to the garden (0-42%),
   away only a moment (42-44%, turning around meanwhile), back in and float back (44-94%),
   pause (94-100%). He keeps his speed through the left edge (easing only at his stop on the right),
   so he isn't out of sight for long. In scene 3 he comes in from the right, as if carrying on
   (see spirit-walk-garden). */
@keyframes spirit-walk {
  0% { transform: translateX(76%); animation-timing-function: ease-in; }
  42% { transform: translateX(-15%); animation-timing-function: linear; }
  44% { transform: translateX(-15%); animation-timing-function: ease-out; }
  94% { transform: translateX(76%); }
  100% { transform: translateX(76%); }
}

/* He turns while out of sight beyond the left edge, and again during his pause on the right */
@keyframes spirit-turn {
  0%, 42.9% { transform: scaleX(1); }
  43%, 99.9% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

@keyframes spirit-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5%); }
}

@keyframes spirit-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scene 3, the garden: he comes in from the right (from the archway), walks to the middle,
   stays a while, turns and goes back out to the right, then is away for a while (in scene 2) */
.spirit-walker.is-garden {
  animation: spirit-walk-garden 60s ease-in-out infinite;
}

.spirit-walker.is-garden .spirit-figure {
  animation: spirit-turn-garden 60s linear infinite;
}

/* In (0-28%), stay (28-48%), out (48-76%), away (76-100%).
   He starts just past the right edge and comes in at speed, slowing down as he arrives, so he shows
   almost as soon as the scene opens; while away he drifts back to that start, out of sight. */
@keyframes spirit-walk-garden {
  0% { transform: translateX(108%); animation-timing-function: ease-out; }
  28% { transform: translateX(60%); }
  48% { transform: translateX(60%); }
  76% { transform: translateX(115%); animation-timing-function: linear; }
  100% { transform: translateX(108%); }
}

/* He faces left coming in, turns before leaving, and turns back while away */
@keyframes spirit-turn-garden {
  0%, 46.9% { transform: scaleX(1); }
  47%, 99.9% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

/* Lamp popup: its final size from the start */
.poi-popup[data-type="lamp"] {
  width: min(560px, 100%);
}

/* Messages after an action (a lamp pressed, a stone placed) keep room for two lines from the start */
.poi-popup[data-type="lamp"] .poi-message,
.poi-popup[data-type="stone-slot"] .poi-message {
  display: block;
  min-height: 2.8em;
}

.lamp-zoom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 170px;
}

.lamp-zoom img {
  max-width: 240px;
  max-height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.lamp-glyphs {
  display: flex;
  justify-content: center;
  gap: 56px;
}

/* Each glyph with its Press button below */
.lamp-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* While its meaning is being written, the Press button steps aside for the meaning box */
.lamp-glyph:has(.glyph.is-editing) .ui-button {
  visibility: hidden;
}


/* The engraved scenes: the spoken glyphs in two groups */
.spell-words {
  gap: 40px;
}

.spell-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Glyphs set close together as one group (e.g. the two on the doorway's lintel). Thin drawings
   sit in the middle of wide boxes, so the boxes overlap to bring the drawings themselves together;
   the translate switch keeps its usual distance */
.inscription-words.is-tight {
  gap: 0;
}

.inscription-words.is-tight > * + * {
  margin-left: -30px; /* no further: the next box would start covering the drawing before it */
}

/* "Items added." next to the notebook icon */
.items-added {
  position: relative;
  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: translateX(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes items-added {
  0% { opacity: 0; transform: translateX(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);
}

/* 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-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;
}

/* Overlays (notebook, options) */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(12, 19, 14, 0.75);
}

/* The notebook always opens on top, even over a popup (e.g. right-clicking a glyph in a dialogue) */
#notebook {
  z-index: 10;
}

/* The closed notebook flying from its icon to the middle as the notebook opens (see animateNotebookOpening) */
.notebook-flyer {
  position: fixed;
  z-index: 11; /* above the notebook */
  object-fit: contain;
  transform-origin: top left;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

/* A short tutorial tip, next to what it's about (see showTip): a soft sage-green lozenge with a
   dotted outline (its SVG shape). Every tip has the same spacing: the text wraps at the same
   maximum width, the tip narrows to fit it (see fitTipText), the text keeps the same distance
   from the lozenge's points, ‹ › sit in the points (only when there's a part to go to),
   and the ✓ button sits on the outline below the text's right edge. */
.tutorial-tip {
  --tip-max-width: 550px;
  --tip-pad-x: 32px;   /* from the ends of the lozenge to the text */
  position: fixed;
  z-index: 41;
  display: flex;
  align-items: center;
  max-width: min(var(--tip-max-width), calc(100vw - 32px));
  padding: 16px var(--tip-pad-x);
  color: #22301f;
  animation: tip-in 0.3s ease-out;
}

.tutorial-shape {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tutorial-shape path {
  fill: rgba(203, 216, 186, 0.93);
  stroke: #5f7a52;
  stroke-width: 3.5;
  stroke-dasharray: 0 9; /* round dots */
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.tutorial-body {
  flex: 1;
  min-width: 0;
}

.tutorial-tip p {
  margin: 0;
  font-size: 22px; /* big on purpose: a tip says what to do, and goes */
  line-height: 1.35;
}

/* On the last part, a little more room under the text for the ✓ */
.tutorial-tip:has(.tutorial-done) {
  padding-bottom: 21px;
}

/* The ✓ (last part): on the outline, below the text's right edge */
.tutorial-done {
  position: absolute;
  right: var(--tip-pad-x);
  bottom: -13px;
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: #22301f;
  background: #c3d1b1; /* solid, so the dotted outline doesn't show through */
  border: 1.5px solid #4c6542;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tutorial-done:hover,
.tutorial-done:focus-visible {
  background: #aebf98;
  transform: scale(1.08);
  outline: none;
}

/* ‹ and ›, between parts: outside the lozenge, a second outline along its point, as tall as
   the tip (drawn and placed by drawTipShape). A sage band, so it shows on dark scenes and
   light pages alike, with a full dark line along it. */
.tutorial-arrow {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tutorial-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutorial-arrow .arrow-band {
  stroke: rgba(203, 216, 186, 0.93);
  stroke-width: 10;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.tutorial-arrow .arrow-line {
  stroke: #4c6542;
  stroke-width: 3.5;
  transition: stroke 0.2s ease;
}

.tutorial-arrow:hover .arrow-line,
.tutorial-arrow:focus-visible .arrow-line {
  stroke: #1d2a19;
}

.tutorial-arrow:hover,
.tutorial-arrow:focus-visible {
  outline: none;
  transform: translateX(var(--arrow-nudge));
}

.tutorial-arrow.is-back { --arrow-nudge: -3px; }
.tutorial-arrow.is-next { --arrow-nudge: 3px; }

/* Icons in a tip's text: the mouse buttons, the translate switch */
.tutorial-icon {
  display: inline-block;
  vertical-align: -7px;
  margin: 0 4px 0 0;
}

.tutorial-icon.is-mouse svg {
  width: 20px;
  height: 27px;
  fill: none;
  stroke: #22301f;
  stroke-width: 1.5;
}

.tutorial-icon.is-mouse .click-hint-button {
  fill: #22301f;
  stroke: none;
}

/* the switch as it looks in the game: pale arrows on a dark round */
.tutorial-icon.is-translate {
  width: 27px;
  height: 27px;
  padding: 5px;
  background: var(--forest-darkest);
  border-radius: 50%;
  vertical-align: -6px;
  margin: 0 2px;
}

.tutorial-icon.is-translate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(86%) sepia(14%) saturate(320%) hue-rotate(8deg); /* as on the switch */
}

/* While a tip shows, the game underneath can't be used */
.tutorial-blocker {
  position: fixed;
  inset: 0;
  z-index: 40;
}

@keyframes tip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Notebook: page areas are percentages of the journal image (1066 x 720) */
.notebook {
  position: relative;
  /* leave room above the book for the Close button */
  width: min(100%, calc((100vh - 112px) * 1066 / 720));
  aspect-ratio: 1066 / 720;
}

.notebook-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The two pages have the same size, so content measured on one fits the other.
   Content is split into pages (see paginate), so a page doesn't scroll. */
.notebook-page {
  position: absolute;
  top: 6%;
  bottom: 11%; /* the strip below is kept for the page numbers and arrows */
  padding: 12px;
  overflow: hidden;
  color: var(--forest-darkest);
}

.notebook-page-left {
  left: 13%; /* clear of the tab stickers */
  right: 53%;
}

.notebook-page-right {
  left: 51%;
  right: 15%;
}

/* Invisible page used to measure what fits */
.notebook-measure {
  visibility: hidden;
  pointer-events: none;
}

/* Page numbers at the bottom of each page */
.page-number {
  position: absolute;
  top: 89%;
  font-size: 0.95rem;
  color: rgba(43, 33, 24, 0.55);
  transform: translateX(-50%);
}

.page-number-left { left: 30%; }
.page-number-right { left: 68%; }

/* ‹ › in the bottom corners of the pages */
/* The page arrows: a line arrow drawn in faded ink, darker on hover */
.page-turn {
  position: absolute;
  top: 88%;
  width: 64px;
  height: 36px;
  padding: 6px 0;
  color: rgba(43, 33, 24, 0.42);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.page-turn-prev { left: 12%; }
.page-turn-next { right: 14%; } /* the mirror of the back arrow: just past the right page's edge, as that one is past the left page's */

.page-turn svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-turn:hover,
.page-turn:focus-visible {
  color: rgba(43, 33, 24, 0.85);
  transform: scale(1.1);
  outline: none;
}

/* Glyphs and Language tabs: turning pages goes through what's on the left page (the glyph index,
   the confirmation drawings), so both arrows sit at the bottom of the left page */
#notebook[data-tab="glyphs"] .page-turn-prev,
#notebook[data-tab="language"] .page-turn-prev { left: 19%; }
#notebook[data-tab="glyphs"] .page-turn-next,
#notebook[data-tab="language"] .page-turn-next { left: 37%; right: auto; }

.page-turn-prev:hover { transform: scale(1.1) translateX(-4px); }
.page-turn-next:hover { transform: scale(1.1) translateX(4px); }

/* The turning page: a leaf hinged on the spine, covering the right page's paper.
   Lying on the right it shows its front; turned over onto the left it shows its back.
   Its content areas match the pages' content areas, so nothing jumps when it lands. */
.page-leaf {
  position: absolute;
  z-index: 5;
  left: 48.8%;
  width: 40.7%;
  top: 3.9%;
  height: 90.3%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: perspective(2200px) rotateY(0deg);
  transition: transform 0.75s ease-in-out;
  pointer-events: none;
}

.page-leaf.is-turned {
  transform: perspective(2200px) rotateY(-180deg);
}

.page-leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: var(--forest-darkest);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}

/* Paper, darker towards the spine, matching the book's pages */
.page-leaf-front {
  background: linear-gradient(to right, #ddd5c4 0%, #f2ede4 7%, #f5f1e9 60%, #ece6da 100%);
  border-radius: 0 3px 3px 0;
}

.page-leaf-back {
  transform: rotateY(180deg);
  background: linear-gradient(to left, #ddd5c4 0%, #f2ede4 7%, #f8f4ec 60%, #f1ece2 100%);
  border-radius: 3px 0 0 3px;
}

.page-leaf-content {
  position: absolute;
  top: 2.3%;
  bottom: 5.7%; /* ends where the pages' content area ends (see .notebook-page), measured */
  width: 83.5%;
  padding: 12px;
  overflow: hidden;
}

.page-leaf-front .page-leaf-content { left: 5.4%; }
.page-leaf-back .page-leaf-content { left: 12%; }

/* Journal entries: handwritten */
.journal-entry {
  margin: 14px 0 0;
  font-family: var(--font-handwriting);
  font-size: 1.45rem;
  line-height: 1.25;
}

/* A space where the story moves to another scene */
.journal-entry.is-new-scene {
  margin-top: 40px;
}

/* ...except at the top of a page, where every first paragraph starts at the same height */
.notebook-page > .journal-entry:first-child,
.page-leaf-content > .journal-entry:first-child {
  margin-top: 14px;
}

/* Items: picture, name and description */
.item-text strong {
  display: block;
  font-size: 1.2rem;
}

.item-text p {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.3;
}

/* ---- Glyph groups ---- */
.group-page h3 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}

/* A group right under the tab's title and instruction */
.group-intro + .group-page {
  margin-top: 8px;
}

/* The Language tab's instruction, under its title */
.group-intro {
  margin: 2px 0 0;
  font-style: italic;
  color: rgba(43, 33, 24, 0.7);
}

.group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

/* A confirmed meaning, written under its drawing and glyph (its space kept until then) */
.group-card .glyph-meaning {
  margin-top: 2px;
  font-size: 1.2rem;
  text-align: center;
}

.group-card .glyph-meaning.is-space {
  visibility: hidden;
}

/* Glyphs on the confirmation pages, as outside the notebook: the box to write a meaning
   floats under the glyph, over the page */
.notebook .group-page .glyph-with-meaning {
  color: var(--forest-darkest);
}

.notebook .group-page .glyph-with-meaning input.glyph-meaning {
  flex: none;
  z-index: 3;
  text-align: center;
  background: #f4ecd8;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* The cursor says what can be done: grab what can still be moved, the hand for a meaning to write,
   the plain arrow once confirmed (nothing to move or write any more) */
.notebook .group-page .glyph,
.notebook .group-page .name-cartouche {
  cursor: default;
}

.notebook .group-page .glyph-with-meaning:has(> input) .glyph {
  cursor: pointer;
}

.notebook .group-page [draggable="true"] {
  cursor: grab;
}

.notebook .group-page [draggable="true"]:active {
  cursor: grabbing;
}

/* The page with the drawings: the title at the top, the drawings in the middle of the space
   left under it. The page turning over lays it out the same way, so nothing jumps as it lands. */
.notebook-page:has(> .group-page.is-drawings),
.page-leaf-content:has(> .group-page.is-drawings) {
  display: flex;
  flex-direction: column;
}

.group-page.is-drawings {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 64px; /* room for the stamp, clear of the page arrows below */
}

.group-page.is-drawings > .group-grid {
  margin: auto 0;
}

.group-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.group-picture {
  width: 100%;
  height: 84px;
  object-fit: contain;
}

.group-picture.placeholder {
  font-size: 0.85rem;
  text-align: center;
  color: var(--stone-light);
}

/* A slot under each drawing, to drop a glyph into */
.group-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1.5px dashed rgba(43, 33, 24, 0.45);
  border-radius: 50%;
}

.group-slot .glyph,
.group-palette .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
  color: var(--forest-darkest);
  cursor: pointer;
}

.group-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.group-palette .glyph[draggable="true"] {
  cursor: grab;
}

.group-message {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-style: italic;
  color: #8a3b2a;
  text-align: center;
}

/* ---- Characters tab: each person met, their name cartouche, and what the player calls them ---- */
/* Two people per row, three rows per page, from the top */
.character-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  margin-top: 14px;
}

/* A person: the portrait with their cartouche beside it, and the name they're given underneath */
.character-card {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.character-card .character-name {
  grid-column: 1 / -1;
  justify-self: center;
}

/* The portrait, in an oval on a dark ground so the ghostly figure shows on the paper */
.character-card .spirit-portrait {
  align-self: center;
  width: 70px;
  height: 84px;
  border: 1.5px solid rgba(43, 33, 24, 0.55);
  border-radius: 50%;
  background: #2a3324;
  -webkit-mask-image: none;
  mask-image: none;
}

/* A cartouche slot: an upright rounded frame (dashed while empty) for the name to place there */
.group-slot.cartouche {
  position: relative;
  width: 52px;
  height: 70px;
  border-radius: 26px;
}

/* A name placed in it fills it: the name is drawn as a cartouche already */
.group-slot.cartouche .name-cartouche {
  width: 66px;
  height: 66px;
}

.group-slot.cartouche .glyph-image {
  object-fit: contain;
}

.group-slot.cartouche:has(.name-cartouche) {
  border-color: transparent;
}

/* Confirmed: a green frame around the name, like the Confirmed stamp */
.character-card.is-confirmed .group-slot.cartouche {
  outline: 2px solid #5c7a3a;
  outline-offset: 6px;
}

/* Just confirmed: the circle grows in from wider out, with a bright glow that settles */
.character-card.is-new .group-slot.cartouche {
  animation: name-confirm 1.1s ease-out;
}

@keyframes name-confirm {
  0% { outline-offset: 18px; outline-color: rgba(92, 122, 58, 0); box-shadow: 0 0 0 0 rgba(255, 226, 140, 0); }
  35% { outline-offset: 4px; outline-color: #7fa64f; box-shadow: 0 0 22px 10px rgba(255, 226, 140, 0.85); }
  100% { outline-offset: 6px; outline-color: #5c7a3a; box-shadow: 0 0 0 0 rgba(255, 226, 140, 0); }
}

/* Unconfirmed Cartouches: big, three per row (there are few names in all, so they fit on one page),
   each with the name the player gives it underneath */
.group-palette:has(.cartouche-cell) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 12px;
}

.cartouche-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.group-palette .cartouche-cell .name-cartouche {
  width: 84px;
  height: 84px;
}

/* The name being written: in place of the name, centred, no line */
.notebook .cartouche-cell .glyph-meaning {
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1.1;
  text-align: center;
  color: var(--forest-darkest);
  background: none;
  border: none;
  outline: none;
}

.cartouche-cell .index-meaning {
  text-align: center;
}

/* What the player calls them: their own handwriting, always theirs to change */
.character-name {
  width: 100%;
  max-width: 8em;
  margin-top: 10px;
  padding: 0 4px;
  font-family: var(--font-handwriting);
  font-size: 1.25rem;
  text-align: center;
  color: var(--forest-darkest);
  background: none;
  border: none;
  border-bottom: 1px dotted rgba(43, 33, 24, 0.5);
}

.character-name:focus {
  outline: none;
  border-bottom-color: var(--forest-darkest);
}

/* Stamp on a confirmed group, in the page's bottom right corner (it takes no room from the drawings) */
.group-stamp {
  position: absolute;
  right: 4px;
  bottom: 30px;
  overflow: hidden; /* for its shine */
  margin: 0;
  padding: 2px 14px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c7a3a;
  border: 2px solid #5c7a3a;
  border-radius: 4px;
  transform: rotate(-4deg);
}

/* Just confirmed: the stamp lands (a quick zoom down onto the page), then a shine runs across it */
.group-stamp.is-new {
  animation: stamp-land 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

.group-stamp.is-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 225, 0.95) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: stamp-shine 0.8s ease-out 0.45s forwards;
}

@keyframes stamp-land {
  0% { opacity: 0; transform: rotate(-4deg) scale(2.2); }
  60% { opacity: 1; transform: rotate(-4deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@keyframes stamp-shine {
  to { transform: translateX(130%); }
}

/* (also on the page turning over, so the title doesn't shift as it lands) */
.notebook-page h2,
.page-leaf-content h2 {
  margin: 0;
  font-size: 1.8rem;
}

.notebook .glyph {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
  color: var(--forest-darkest);
}

.notebook .glyph-meaning {
  flex: 1;
  min-width: 0;
  width: auto;
  text-align: left;
}

/* Tabs: coloured stickers stuck on the left page edge.
   Anchored on the right so they grow outwards, away from the page. */
.notebook-tabs {
  position: absolute;
  top: 10%;
  left: 0;
  width: 8%; /* from just outside the cover to the page edge, as if tucked between pages */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.notebook-tab {
  flex-shrink: 0;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--forest-darkest);
  border: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  /* hand-stuck look: a slight tilt, worn shading and a soft dark shadow */
  transform: rotate(var(--tilt, 0deg));
  background-image:
    linear-gradient(170deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.12));
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);
  transition: width 0.15s, height 0.15s, transform 0.15s;
}

/* Each sticker is a little different: colour, tilt, corners, size */
.notebook-tab[data-tab="journal"] {
  --tilt: -2.5deg;
  background-color: var(--sticker-1);
  border-radius: 2px 5px 3px 1px;
  height: 42px;
}

.notebook-tab[data-tab="glyphs"] {
  --tilt: 1.5deg;
  background-color: var(--sticker-2);
  border-radius: 4px 1px 2px 5px;
  height: 38px;
}

.notebook-tab[data-tab="language"] {
  --tilt: -1.5deg;
  background-color: var(--sticker-4);
  border-radius: 3px 2px 4px 1px;
  height: 40px;
}

.notebook-tab[data-tab="characters"] {
  --tilt: 2deg;
  background-color: var(--sticker-5);
  border-radius: 2px 4px 1px 3px;
  height: 39px;
}

.notebook-tab[data-tab="items"] {
  --tilt: 1deg;
  background-color: var(--sticker-3);
  border-radius: 1px 3px 6px 2px;
  height: 41px;
}

/* The open tab's sticker lines up with the others on the left
   and reaches further right, over the current page */
.notebook-tab.is-active {
  width: 150%;
  margin-right: -50%;
}

/* Name hidden until hovered */
.notebook-tab span {
  visibility: hidden;
}

.notebook-tab:hover,
.notebook-tab:focus-visible,
.notebook-tab.is-tip-target {
  width: calc(100% + 80px);
  height: 48px;
  transform: rotate(0deg);
  outline: none;
}

.notebook-tab.is-active:hover,
.notebook-tab.is-active:focus-visible {
  width: calc(150% + 80px);
}

.notebook-tab:hover span,
.notebook-tab:focus-visible span,
.notebook-tab.is-tip-target span {
  visibility: visible;
}

.close-button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-110%);
  padding: 4px 12px;
  cursor: pointer;
}

/* Options */
.options-panel {
  flex-direction: column;
  gap: 12px;
  width: min(320px, 100%);
  padding: 24px;
}

.options-panel h2 {
  margin: 0 0 8px;
}

.options-panel .ui-button {
  width: 100%;
}

/* ---- Sightings panel: everywhere a glyph has been seen ---- */

/* Glyphs in the notebook's lists open it */
.glyph.has-sightings {
  cursor: pointer;
}

.notebook-empty {
  margin-top: 14px;
  font-style: italic;
  color: rgba(43, 33, 24, 0.7);
}

.sightings-overlay {
  z-index: 15; /* above the notebook */
}

/* Fixed size, so going through the places moves nothing */
.sightings-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  /* its usual size, growing only if a long line wraps (and never taller than the screen) */
  min-height: min(360px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  padding: 28px 24px 20px;
  color: var(--stone-light);
  background: var(--forest-dark);
  border: 1px solid var(--stone);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* The glyph and its meaning */
.sightings-glyph {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sightings-glyph .glyph-meaning {
  width: auto;
  font-size: 1.6rem;
}

.sightings-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sightings-content {
  flex: 1;
  min-width: 0; /* lets its line of glyphs wrap instead of pushing the panel wider */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 150px;
  padding: 16px;
  background: var(--forest-darkest);
  border: 1px solid var(--stone-dark);
  border-radius: 6px;
}

.sightings-where {
  margin: 0;
  font-size: 1.15rem;
  text-align: center;
  color: var(--stone-light);
}

.sightings-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
}

/* Smaller glyphs here, so a line of four or five fits; longer ones wrap onto another row */
.sightings-line .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
}

.sightings-glyph .glyph {
  width: 64px;
  height: 64px;
}


.sightings-nav {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0 0 6px;
  font: inherit;
  font-size: 3rem;
  line-height: 1;
  color: var(--stone-light);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sightings-nav:hover:not(:disabled) {
  color: var(--sunlight);
  transform: scale(1.15);
}

.sightings-nav:disabled {
  opacity: 0.2;
  cursor: default;
}

.sightings-count {
  margin: 0;
  color: var(--stone);
}

/* ---- Arrows between the panels of a popup (e.g. the spirit's narrative and conversation) ---- */
.panel-arrow {
  width: 64px;
  height: 64px;
  padding: 0 0 8px;
  font: inherit;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--stone-light);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.panel-arrow:hover,
.panel-arrow:focus-visible {
  color: var(--sunlight);
  outline: none;
}

/* Forward: at the end of the narrative, on the right */
.panel-arrow.is-forward {
  align-self: flex-end;
  margin: -8px -20px -12px 0;
}

.panel-arrow.is-forward:hover {
  transform: translateX(4px) scale(1.1);
}

/* Back: in the conversation's top left corner */
.panel-arrow.is-back {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 1;
}

.panel-arrow.is-back:hover {
  transform: translateX(-4px) scale(1.1);
}

/* ---- Glyphs tab: a dictionary ---- */

/* Title with its information tooltip */
.notebook-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On the title's right: a mouse icon for each click, with what it does in a tooltip */
.click-hints {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.click-hint {
  display: inline-flex;
  color: rgba(43, 33, 24, 0.6);
  cursor: help;
  transition: color 0.2s ease;
}

.click-hint svg {
  width: 19px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.click-hint svg .click-hint-button {
  fill: currentColor;
  stroke: none;
}

.click-hint:hover,
.click-hint:focus-visible {
  color: var(--forest-darkest);
  outline: none;
}

.info-text {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 3;
  padding: 8px 12px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--stone-light);
  background: var(--forest-darkest);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.click-hint:hover .info-text,
.click-hint:focus-visible .info-text {
  opacity: 1;
}

/* The index: a grid of glyphs, each with its meaning underneath */
.glyph-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 4px;
  margin-top: 12px;
}

.glyph-index-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 2px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.glyph-index-cell:hover {
  background: rgba(43, 33, 24, 0.06);
}

/* The glyph whose entry is open */
.glyph-index-cell.is-selected {
  background: rgba(217, 182, 92, 0.22);
}

.glyph-index-cell .glyph {
  pointer-events: none; /* the whole cell is the button */
}

.index-meaning {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-handwriting);
  font-size: 1.15rem;
  line-height: 1.1;
}

.index-meaning.is-confirmed {
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 700;
}

.index-meaning.is-unknown {
  color: rgba(43, 33, 24, 0.4);
}


/* The entry, on the right page */
.glyph-entry h4 {
  margin: 14px 0 4px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(43, 33, 24, 0.6);
}

.entry-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.notebook .glyph.entry-glyph {
  width: 88px;
  height: 88px;
  font-size: 1.2rem;
}

.entry-head .glyph-meaning {
  font-size: 1.9rem;
}

.entry-head .glyph-meaning.is-confirmed {
  font-size: 1.6rem;
  font-weight: 700;
}

.entry-status {
  margin: 10px 0 0;
  font-style: italic;
  color: rgba(43, 33, 24, 0.75);
}

/* The category, in its colour (as in the reply popup) */
.entry-category {
  width: fit-content;
  margin: 6px 0 0;
  padding: 1px 10px;
  font-size: 0.9rem;
  color: var(--forest-darkest);
  background: var(--cat-colour, var(--stone-light));
  border-radius: 999px;
}

.entry-places {
  margin: 0;
  padding-left: 1.1em;
}

.entry-place {
  padding: 1px 0;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--forest-darkest);
  background: none;
  border: none;
  border-bottom: 1px dotted rgba(43, 33, 24, 0.4);
  cursor: pointer;
}

.entry-place:hover,
.entry-place:focus-visible {
  color: #6b4a14;
  border-bottom-color: currentColor;
  outline: none;
}

.entry-none {
  margin: 0;
  font-style: italic;
  color: rgba(43, 33, 24, 0.6);
}

.entry-alongside {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notebook .entry-alongside .glyph {
  width: 44px;
  height: 44px;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Category dropdown in an entry, until the glyph is confirmed (coloured once one is chosen) */
.entry-category-choice {
  display: inline-block;
  margin-top: 6px;
}

.entry-category-select {
  padding: 1px 8px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--forest-darkest);
  background: var(--cat-colour, transparent);
  border: 1px dashed rgba(43, 33, 24, 0.5);
  border-radius: 999px;
  cursor: pointer;
}

.entry-category-choice:not([data-category="Unsorted"]) .entry-category-select {
  border-style: solid;
  border-color: transparent;
}

/* ---- Main menu shortcut (for testing): start at a scene with everything before it done ---- */
.shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--stone);
}

.shortcut select {
  padding: 4px 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--stone-light);
  background: rgba(95, 90, 76, 0.25);
  border: 1px dashed var(--stone-dark);
  border-radius: 4px;
  cursor: pointer;
}

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

.shortcut option {
  color: var(--forest-darkest);
}

/* ---- Drawn glyphs (from _assets/Glyphs) ----
   The drawings are near-black ink on transparent: recoloured to pale stone on the game's
   dark popups, kept as dark ink on the notebook's paper. */
.glyph-image {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
  filter: invert(1) sepia(0.3) brightness(0.88);
}

/* Drawn glyphs stand on their own (like in Chants of Sennaar): the drawing uses the glyph's whole space */
.glyph.has-image .glyph-image {
  width: 100%;
  height: 100%;
}

/* Hover: a soft golden glow around the drawing */

.glyph.has-image:hover .glyph-image,
.glyph.has-image:focus-visible .glyph-image {
  filter: invert(1) sepia(0.3) brightness(0.88) drop-shadow(0 0 6px rgba(255, 214, 120, 0.85));
}

/* Gold ink: the player's own words, the glyph picked out in the sightings panel, a pressed glyph */
.dialogue-line.is-player .glyph.has-image .glyph-image,
.glyph.has-image.is-current .glyph-image,
.glyph.has-image.is-glowing .glyph-image {
  filter: brightness(0) invert(76%) sepia(45%) saturate(620%) hue-rotate(5deg) brightness(95%);
}



/* Category (reply popup): the ink itself takes the category's colour (an SVG tint, see
   buildCategoryTints); unsorted glyphs keep the plain pale ink */

.glyph.has-image[data-category] .glyph-image {
  filter: var(--cat-tint, invert(1) sepia(0.3) brightness(0.88));
}

.glyph.has-image[data-category]:hover .glyph-image {
  filter: var(--cat-tint, invert(1) sepia(0.3) brightness(0.88)) drop-shadow(0 0 6px rgba(255, 214, 120, 0.85));
}

/* On the notebook's paper: dark ink, a little fainter until the meaning is confirmed */
.notebook .glyph-image {
  filter: none;
  opacity: 0.72;
}


.notebook .glyph.has-image.is-confirmed-glyph .glyph-image {
  opacity: 1;
}

/* Placeholder words (glyphs not drawn yet): their states show on the word itself */
.glyph:not(.has-image):hover,
.glyph:not(.has-image):focus-visible {
  color: var(--sunlight);
  text-shadow: 0 0 8px rgba(255, 214, 120, 0.6);
}

/* Gold: the player's own words, the word picked out in the sightings panel, a pressed glyph */
.dialogue-line.is-player .glyph:not(.has-image),
.glyph:not(.has-image).is-current,
.glyph:not(.has-image).is-glowing {
  color: var(--sunlight);
}

/* Category (reply popup): the word takes the category's colour, lightened to read on the dark popup */
.glyph:not(.has-image)[data-category] {
  color: color-mix(in srgb, var(--cat-colour, var(--stone-light)) 60%, white);
}

/* On the notebook's paper: dark ink, a little fainter until the meaning is confirmed */
.notebook .glyph:not(.has-image) {
  color: var(--forest-darkest);
  opacity: 0.72;
}

.notebook .glyph:not(.has-image).is-confirmed-glyph {
  opacity: 1;
}

/* Glyphs placed in a group's slots count as known ink */
.group-slot .glyph-image {
  opacity: 0.9;
}

.notebook .glyph.has-image:hover .glyph-image {
  filter: drop-shadow(0 0 5px rgba(217, 182, 92, 0.9));
}

/* Carved into the stones: dark grooves with a faint light edge below */
.stone .glyph.has-image {
  width: 76px;
  height: 76px;
}

.item-row .stone .glyph.has-image {
  width: 50px;
  height: 50px;
}

/* (a soft pale halo around the strokes lifts them off the stone's texture) */
.stone .glyph-image,
.notebook .stone .glyph-image {
  width: 100%;
  height: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 0 4px rgba(255, 250, 235, 0.75));
}

.stone .glyph.has-image:hover .glyph-image {
  filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 0 4px rgba(255, 250, 235, 0.75))
    drop-shadow(0 0 6px rgba(255, 214, 120, 0.9));
}

/* ---- Debug panel (New game (debug)): plain and compact, above everything ---- */
.debug-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 60;
  padding: 3px 10px;
  font: 0.85rem/1.4 system-ui, sans-serif;
  color: #f1e8cf;
  background: rgba(120, 40, 30, 0.85);
  border: 1px solid rgba(241, 232, 207, 0.5);
  border-radius: 4px;
  cursor: pointer;
}

.debug-panel {
  position: absolute;
  top: 48px;
  left: 16px;
  z-index: 60;
  width: 250px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 10px 12px 12px;
  font: 0.85rem/1.3 system-ui, sans-serif;
  color: #f1e8cf;
  background: rgba(14, 18, 14, 0.94);
  border: 1px solid rgba(241, 232, 207, 0.3);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.debug-heading {
  margin: 0 0 4px;
  font-weight: 700;
}

.debug-title {
  margin: 10px 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241, 232, 207, 0.6);
}

.debug-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.debug-commands button {
  padding: 3px 8px;
  font: inherit;
  color: inherit;
  background: rgba(241, 232, 207, 0.08);
  border: 1px solid rgba(241, 232, 207, 0.25);
  border-radius: 4px;
  cursor: pointer;
}

.debug-commands button:hover,
.debug-commands button:focus-visible {
  background: rgba(241, 232, 207, 0.2);
  outline: none;
}

/* Debug: a spirit's whole conversation, with labels between its ideas */
.dialogue-log .debug-label {
  max-width: none;
  margin: 0;
  text-align: left;
  font-family: system-ui, sans-serif;
  color: #f1e8cf;
}


.dialogue-log .debug-label.is-idea {
  margin-bottom: -20px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sunlight);
}

.dialogue-log .debug-label.is-missing {
  align-self: flex-end;
  font-style: italic;
  color: var(--sunlight);
}

.dialogue-log .debug-label.is-note {
  margin: -20px 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--stone);
}