/* Rich quest copy: parsed in JS (no innerHTML). Allowed tags: b, i, code, blockquote, a (https), span.tg-spoiler, map (lat/lng) */

@property --quest-rich-spoiler-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.quest-rich-text {
  white-space: pre-line;
}

.quest-rich-text .quest-rich-blockquote {
  margin: 10px 0;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 55%, var(--outline));
  background: color-mix(in srgb, var(--surface) 88%, var(--primary));
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var(--on-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.quest-rich-text .quest-rich-blockquote:first-child {
  margin-top: 0;
}

.quest-rich-text .quest-rich-blockquote:last-child {
  margin-bottom: 0;
}

.quest-rich-text .quest-rich-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--on-surface) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.quest-rich-text .quest-rich-code:hover {
  background: color-mix(in srgb, var(--on-surface) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline));
}

.quest-rich-text .quest-rich-code.quest-rich-code--copied {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline));
}

.quest-rich-text .quest-rich-code:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

.quest-rich-text .quest-rich-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

/*
 * Why horizontal drift was seamless but tilted gradients jumped:
 * — With horizontal bands we set background-size height = stripe period (8px) and only moved Y by 8px:
 *   one tile = one period, so frame N matches frame 0.
 * — With repeating-linear-gradient at arbitrary angles + background-size: auto, the gradient is tied to
 *   the inline fragment box; the raster phase and “one period in px” don’t line up, so (Δx,Δy) from trig
 *   rarely lands on an exact repeat → visible hitch each loop.
 * Fix: fixed square tile with side S = n×(stripe period)/√2 so shifting by (S,S) advances integer
 * stripe periods along the diagonal; animate one layer only so counterposed −45°/+45° grids stay phase-locked.
 */

.quest-rich-spoiler {
  display: inline;
  border-radius: 6px;
  /* Same box hidden/revealed so the line doesn’t jump */
  padding: 1px 5px;
  margin: 0 1px;
  cursor: pointer;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  outline: none;
  vertical-align: baseline;
  box-sizing: border-box;
}

.quest-rich-spoiler__inner {
  display: inline;
  transition: opacity 0.14s ease;
}

.quest-rich-spoiler:not(.quest-rich-spoiler--revealed) {
  user-select: none;
  -webkit-user-select: none;
  --quest-rich-spoiler-angle: 0deg;
  /* Stripe period along gradient = 6px; seamless scroll needs Δ along (1,1) = n×6px → tile S = n×6/√2 */
  --quest-rich-spoiler-tile: 16.971px;
  background-color: color-mix(in srgb, var(--on-surface) 17%, var(--surface));
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 5px,
      color-mix(in srgb, var(--on-surface) 14%, transparent) 5px,
      color-mix(in srgb, var(--on-surface) 14%, transparent) 6px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 5px,
      color-mix(in srgb, var(--on-surface) 10%, transparent) 5px,
      color-mix(in srgb, var(--on-surface) 10%, transparent) 6px
    ),
    conic-gradient(
      from var(--quest-rich-spoiler-angle),
      transparent 0deg,
      transparent 78deg,
      color-mix(in srgb, var(--on-surface) 18%, transparent) 92deg,
      color-mix(in srgb, var(--on-surface) 28%, transparent) 102deg,
      transparent 118deg,
      transparent 360deg
    );
  background-size:
    var(--quest-rich-spoiler-tile) var(--quest-rich-spoiler-tile),
    var(--quest-rich-spoiler-tile) var(--quest-rich-spoiler-tile),
    auto;
  background-position: 0 0, 0 0, center center;
  background-blend-mode: normal, normal, soft-light;
  animation:
    quest-rich-spoiler-diagonals 2.35s linear infinite,
    quest-rich-spoiler-gloss 5.5s linear infinite;
}

.quest-rich-spoiler:not(.quest-rich-spoiler--revealed) .quest-rich-spoiler__inner {
  opacity: 0;
}

/*
 * Revealed: light tint only (per fragment via box-decoration-break: clone).
 */
.quest-rich-spoiler.quest-rich-spoiler--revealed {
  user-select: text;
  cursor: text;
  animation: none;
  --quest-rich-spoiler-angle: 0deg;
  background-color: color-mix(in srgb, var(--primary) 14%, transparent);
  background-image: none;
}

.quest-rich-spoiler.quest-rich-spoiler--revealed .quest-rich-spoiler__inner {
  opacity: 1;
}

.quest-rich-spoiler.quest-rich-spoiler--revealed ::selection {
  background: color-mix(in srgb, var(--primary) 38%, transparent);
}

@keyframes quest-rich-spoiler-diagonals {
  from {
    background-position: 0 0, 0 0, center center;
  }
  to {
    /* Only layer 1 moves: exact tile wrap for -45° / 6px period at S = 24/√2 */
    background-position:
      var(--quest-rich-spoiler-tile) var(--quest-rich-spoiler-tile),
      0 0,
      center center;
  }
}

@keyframes quest-rich-spoiler-gloss {
  from {
    --quest-rich-spoiler-angle: 0deg;
  }
  to {
    --quest-rich-spoiler-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quest-rich-spoiler:not(.quest-rich-spoiler--revealed) {
    animation: none;
    --quest-rich-spoiler-angle: 0deg;
    background-position: 0 0, 0 0, center center;
  }
}

.quest-rich-spoiler:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

.quest-rich-text .quest-rich-map {
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
}

.quest-rich-text .quest-rich-map:first-child {
  margin-top: 0;
}

.quest-rich-text .quest-rich-map:last-child {
  margin-bottom: 0;
}