/* Overlays, the notebook's flying icon, and tutorial tips */

/* 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 piece of aged parchment with faceted,
   pointed ends and a fine dotted bronze outline (its SVG shape, see drawTipShape). 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 {
  /* Its colours: parchment, bronze ink, dark ink */
  --tip-paper: rgba(234, 224, 197, 0.97);
  --tip-paper-deep: #ddcfa8;
  --tip-bronze: #8a6a36;
  --tip-ink: #2b2318;
  --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: var(--tip-ink);
  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: var(--tip-paper);
  stroke: var(--tip-bronze);
  stroke-width: 2;
  stroke-dasharray: 0 6; /* fine 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 ✓, and as much above, so the text stays
   in the middle of the tip */
.tutorial-tip:has(.tutorial-done) {
  padding-top: 21px;
  padding-bottom: 21px;
}

/* Lines that each start with an icon (the mouse buttons): a little more room between them, and a
   tighter box around them (the line spacing already gives the ✓ its room) */
.tutorial-tip p:has(.tutorial-icon.is-mouse) {
  line-height: 1.6;
}

.tutorial-tip:has(.tutorial-icon.is-mouse) {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* 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: var(--tip-ink);
  background: var(--tip-paper-deep); /* solid, so the dotted outline doesn't show through */
  border: 1.5px solid var(--tip-bronze);
  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: #d2c08f;
  transform: scale(1.08);
  outline: none;
}

/* ‹ and ›, between parts: outside the tip, its end's faceted profile again, shorter and deeper
   (drawn and placed by drawTipShape). A bronze line with a soft dark shadow, so it shows on dark
   scenes and light pages alike; brighter when hovered. */
.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-line {
  stroke: #b08a4a;
  stroke-width: 3;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transition: stroke 0.2s ease;
}

.tutorial-arrow:hover .arrow-line,
.tutorial-arrow:focus-visible .arrow-line {
  stroke: var(--sunlight);
}

.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: var(--tip-ink);
  stroke-width: 1.5;
}

.tutorial-icon.is-mouse .click-hint-button {
  fill: var(--tip-ink);
  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 */
}

/* What a tip in the reply box is about (the switch, the Sentences filter): lit up while it shows */
.reply-easy.is-tip-target,
#reply-filters .is-tip-target {
  color: var(--sunlight);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(217, 182, 92, 0.8), 0 0 12px rgba(217, 182, 92, 0.6);
}

.reply-easy.is-tip-target .reply-easy-track {
  border-color: var(--sunlight);
}

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