/* trialEngine visuals — objective/hint/error bars, reward toast, journal
   panel, and the title/success cinematic overlays (trial1, lava_qlearn).
   Every color/font here is a CSS variable specifically so this file is
   the one place to edit to reskin those screens — trialEngine.py only
   assigns class names, it no longer hardcodes any color/font itself. */

:root {
  --trial-font-display: "IM Fell English", Georgia, "Times New Roman", serif;
  --trial-font-code: "DejaVu Sans Mono", "Courier New", monospace;
  --trial-font-code-green: "DejaVu Sans Mono", "Courier New", monospace;

  /* "grimoire" theme — carved stone/parchment + gold leaf, used by the
     title/success modals. */
  --trial-gold: #c79b4a;
  --trial-gold-light: #e9c877;
  --trial-gold-dark: #7a5518;
  --trial-gold-btn-text: #2a1806;
  --trial-title-ink: #241708;
  --trial-title-rule: #6b4a26;
  --trial-success-text: #8fd4a0;

  /* flat phosphor-amber terminal theme — reward toast, objective/hint/
     error bars + corner buttons, journal panel. */
  --trial-term-bg: #050300;
  --trial-amber: #ffb000;
  --trial-amber-bright: #ffd166;
  --trial-amber-dim: #8a5c00;
  --trial-amber-line: #4a3200;
  --trial-code-green: #39e673;
  --trial-error-text: #ff6363;

  /* per-bar accent colors */
  --trial-accent-obj: #e0a55c;
  --trial-accent-hint: #fbbf24;
  --trial-accent-error: #fa2b2b;
}

/* ---- dividers ---- */

.trial-gold-rule {
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--trial-gold), transparent);
}

.trial-ink-rule {
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--trial-title-rule), transparent);
}

/* ---- shared "Continue" button ---- */

/* Compound selector (.ap-ui-btn.trial-gold-btn), not just .trial-gold-btn
   — every element with this class also always carries ap-ui-btn (see
   uiManager.js's class-merge logic), so this is guaranteed to match, and
   the extra specificity is what makes this win over ui.css's .ap-ui-btn
   regardless of which stylesheet happens to load second (that load
   order differs between dev and a production build, so relying on it —
   or reaching for !important — isn't a real fix). */
.ap-ui-btn.trial-gold-btn {
  font-family: var(--trial-font-display);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--trial-gold-btn-text);
}

/* ---- full-screen cinematic overlays (title / success) ---- */

.trial-overlay {
  background-color: transparent;
}

.trial-success-message {
  color: var(--trial-success-text);
  font-family: var(--trial-font-display);
  font-style: italic;
  font-size: clamp(18px, 5vw, 26px);
  text-align: center;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(143, 212, 160, 0.85),
    0 0 10px rgba(143, 212, 160, 0.8);
}

.trial-title-text {
  color: var(--trial-title-ink);
  font-family: var(--trial-font-display);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-size: clamp(26px, 7vw, 42px);
  font-weight: 700;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 3px rgba(0, 0, 0, 0.35);
}

/* Placeholder theme for steps that want the title card to read as a
   dropped-in "message" rather than the default carved-stone/gold-leaf
   card — swaps the ink text (and its flat white-highlight/black-shadow
   text-shadow, meant for reading against a light parchment card) for
   the same soft green + glow already used by this modal's own subtext
   (trial-subtext, below), so it still reads as one family instead of a
   clashing accent color, and actually glows against the dark scene
   this theme has no card/frame to sit on. Declared after
   .trial-title-text so it wins on equal specificity without
   !important. */
.trial-title-text--green {
  color: var(--trial-success-text);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(143, 212, 160, 0.85),
    0 0 10px rgba(143, 212, 160, 0.8);
}

.trial-subtext {
  color: var(--trial-success-text);
  font-family: var(--trial-font-display);
  font-size: clamp(18px, 5vw, 26px);
  text-align: center;
  white-space: pre-wrap;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(143, 212, 160, 0.85),
    0 0 10px rgba(143, 212, 160, 0.8);
}

/* A mailto: link auto-generated inside subtext (see trialEngine.py's
   _linkify_subtext) — color:inherit beats the browser's default blue
   a:link/a:visited (author-origin CSS always wins over the user-agent
   stylesheet regardless of specificity), so it reads as the same glowing
   green as the rest of the subtext with just an underline as the "this
   is tappable" affordance. No separate hover/active rule — text links
   were never in scope for the buttons' hover-removal, and this one
   never had a hover effect to begin with. */
.trial-subtext-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(143, 212, 160, 0.6);
  text-underline-offset: 3px;
}

/* ---- reward toast ---- */

.trial-reward-card {
  background: var(--trial-term-bg);
  border: 1px solid var(--trial-amber);
}

.trial-reward-label {
  font-family: var(--trial-font-code-green);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--trial-amber);
}

.trial-reward-text {
  font-family: var(--trial-font-code);
  font-size: 12.5px;
  color: var(--trial-amber-bright);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ---- objective / hint / error bars ---- */

.trial-bar {
  background: var(--trial-term-bg);
  border: 2px solid var(--trial-bar-accent);
  color: var(--trial-bar-accent);
  font-family: var(--trial-font-code-green);
}
.trial-bar--obj {
  --trial-bar-accent: var(--trial-accent-obj);
}
.trial-bar--hint {
  --trial-bar-accent: var(--trial-accent-hint);
}
.trial-bar--error {
  --trial-bar-accent: var(--trial-accent-error);
  color: var(--trial-error-text);
}
.trial-bar--journal {
  --trial-bar-accent: var(--trial-accent-hint);
}
/* Opt back into text selection (ui.css's html/body rule turns it off
   globally) — hints and journal entries are the two bars worth actually
   selecting/copying text out of (a hint's code snippet, a journal API
   example), unlike the objective/error bars. user-select is inherited,
   so this covers the label/line text inside each box too. */
.trial-bar--hint,
.trial-bar--journal {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.trial-bar-label {
  font-family: var(--trial-font-code-green);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trial-bar-accent);
  opacity: 0.9;
}

/* ---- corner buttons (hint / error / journal) ----
   Matches the composer's own Run/Clear buttons (APComposer.py's
   DEFAULT_COMPOSER_STYLE) — same font/case/spacing/padding/shape, just
   themeable via these vars instead of Run/Clear's hardcoded colors.
   Compound selector for the same reason as .ap-ui-btn.trial-gold-btn
   above: these buttons always carry ap-ui-btn too, and the extra
   specificity is what beats ui.css's .ap-ui-btn regardless of load
   order. */
.ap-ui-btn.trial-btn {
  font-family: var(--trial-font-code-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  background: var(--trial-btn-bg, transparent);
  border: 2px solid var(--trial-btn-border);
  color: var(--trial-btn-text, var(--trial-term-bg));
}
.trial-btn--hint,
.trial-btn--journal {
  --trial-btn-border: var(--trial-amber-line);
  --trial-btn-text: var(--trial-amber);
}
.trial-btn--error {
  --trial-btn-border: var(--trial-accent-error);
  --trial-btn-bg: var(--trial-accent-error);
  --trial-btn-text: var(--trial-term-bg);
}

/* ---- journal panel ---- */
/* Look/size now come from .trial-bar / .trial-bar--journal (shared with
   objective/hint/error, see above) — only entry-line text styling is
   journal-specific. */

.trial-journal-empty {
  font-family: var(--trial-font-code-green);
  font-size: 13px;
  color: var(--trial-amber-dim);
  text-align: center;
}

.trial-journal-line--code {
  font-family: var(--trial-font-code-green);
  color: var(--trial-code-green);
}

.trial-journal-line--text {
  font-family: var(--trial-font-code);
  color: var(--trial-amber-bright);
}

/* ---------------------------------------------------------
   Relocated from src/engine/ui.css — these were only ever used by
   trialEngine.py (trial1/lava_qlearn), so they live here now instead of
   the shared engine stylesheet.
   --------------------------------------------------------- */

/* Self-hosted display font (illuminated-manuscript styling). */
@font-face {
  font-family: "IM Fell English";
  src: url("/fonts/IMFellEnglish-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("/fonts/IMFellEnglish-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Objective/hint/error bars — themed scrollbar. Only shows up once
   content exceeds the bar's 3-line ceiling (see _bar_base_style:
   overflowY: auto). Thin gold thumb over a dark-stone track. */
.ap-trial-bar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--trial-gold) transparent;
}
.ap-trial-bar::-webkit-scrollbar {
  width: 6px;
}
.ap-trial-bar::-webkit-scrollbar-track {
  background: transparent;
}
.ap-trial-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--trial-gold-light), var(--trial-gold-dark));
  border-radius: 4px;
}
.ap-trial-bar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--trial-gold-light), var(--trial-gold));
}

/* Error bar's scrollbar uses the light red already defined for its body
   text (--trial-error-text) instead of the shared gold, so it reads as
   part of the error's own color rather than the neutral theme. */
.ap-trial-bar.trial-bar--error {
  scrollbar-color: var(--trial-error-text) transparent;
}
.ap-trial-bar.trial-bar--error::-webkit-scrollbar-thumb {
  background: var(--trial-error-text);
}
.ap-trial-bar.trial-bar--error::-webkit-scrollbar-thumb:hover {
  background: var(--trial-error-text);
}

/* Slower, drifting fade — for text meant to feel narrated/read aloud
   (title + success message) rather than popped up like a UI card. No
   scale distortion (that reads as a UI element appearing, not a line
   being spoken); a gentle downward drift + longer fade instead, since
   this text now sits near the top of the screen. */
@keyframes apTrialNarrate {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ap-trial-narrate {
  /* "backwards" fill-mode: while an animation-delay (set inline per
     element, e.g. staggering title -> subtext -> button) is still
     counting down, the element renders at the animation's FIRST
     keyframe (opacity:0) instead of its normal full-opacity resting
     style — otherwise it'd flash fully visible, then abruptly vanish
     to 0 right as the delayed fade-in kicks in. */
  animation: apTrialNarrate 1400ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .ap-trial-narrate {
    animation: none;
  }
}

/* Plain opacity fade, no drift — for the Continue button specifically:
   the title/subtext/success text drift in (ap-trial-narrate above) to
   read as spoken, but the button is a control, not a line of narration,
   so it just fades in place. Same duration/delay mechanism (delay is
   set inline per-element via animationDelay, same as ap-trial-narrate). */
@keyframes apTrialFadeOnly {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ap-trial-fade-only {
  animation: apTrialFadeOnly 1400ms ease-out backwards;
}
@media (prefers-reduced-motion: reduce) {
  .ap-trial-fade-only {
    animation: none;
  }
}

/* Card behind the title text — a 64x64 RPGUI-style riveted-frame tile
   (textures/rpgui-container.png). border-image (9-slice) is what makes a
   single fixed-resolution raster both stretchable AND keep its corner
   rivets/top-highlight crisp: the four corner slices are drawn at their
   native size and never stretched, the four edge strips stretch/tile
   along one axis only, and `fill` stretches the remaining middle region
   to cover the box interior — so a short success-popup-width card and a
   wide desktop title card both get the same frame art without it looking
   squashed or tiled oddly. 16px slice/width comfortably covers the rivet
   dots (~1-2px in from each edge) and the top-edge highlight/bottom-edge
   wear pattern measured in the source PNG. */
.ap-rpgui-container {
  border-style: solid;
  border-width: 16px;
  border-image-source: url("/textures/rpgui-container.png");
  border-image-slice: 16 fill;
  border-image-width: 40px;
  border-image-repeat: stretch;
  image-rendering: pixelated;

  background: transparent;
  image-rendering: crisp-edges;
}

/* Placeholder "message" card theme (see .trial-title-text--green above)
   — no gold riveted border-image frame, just the green text (and, see
   .trial-title-portrait below, a portrait image) floating on the dimmed
   scene. */
.trial-title-card--message {
  border-style: none;
  border-image-source: none;
  background: transparent;
}

/* Portrait shown above the title text in the "message" theme (e.g. an
   in-world character's face accompanying their message) instead of
   being stretched into a background — the source art is a person's
   portrait, not a tileable texture, so squashing it to fill the card
   distorts it. max-height/max-width (both paired with the matching
   auto on width/height) is what keeps the browser's default
   replaced-element sizing free to preserve the source image's own
   aspect ratio — pairing a fixed height with max-width instead would
   let max-width win on a narrow viewport while height stayed fixed,
   visibly squashing the portrait. */
.trial-title-portrait {
  display: block;
  width: auto;
  height: auto;
  max-height: clamp(140px, 28vh, 220px);
  max-width: 100%;
  /* drop-shadow (not box-shadow) — the source PNG has a transparent
     background around an irregular silhouette, so a box-shadow would
     glow around the image's rectangular bounding box instead of
     hugging the actual portrait. Two layered drop-shadows (tight +
     wide) for a soft glow, same green as the title text's glow. */
  filter:
    drop-shadow(0 0 8px rgba(143, 212, 160, 0.9))
    drop-shadow(0 0 22px rgba(143, 212, 160, 0.6));
}

/* Bordered, glowing box wrapping the title text in the "message" theme
   — this is the actual visible frame around the words that
   .trial-title-card--message dropped when it lost the gold border-image,
   sized to sit directly beneath trial-title-portrait (see that node's
   zeroed-out gap in trialEngine.py) so the border reads as picking up
   right where the portrait leaves off. Shared by both the step title
   card (trialEngine.py) and the onboarding screen's #ob-title
   (onboarding.html/css) — trialEngine.css is loaded globally, so both
   can reference this one class instead of each defining their own.
   No background of its own — see .trial-title-textbox--filled below for
   the step-card-only solid fill; onboarding's #ob-title stays
   see-through, so that variant isn't folded in here. */
.trial-title-textbox--green {
  border: 2px solid var(--trial-success-text);
  border-radius: 4px;
  padding: 16px 28px;
  box-shadow:
    0 0 10px rgba(143, 212, 160, 0.7),
    0 0 24px rgba(143, 212, 160, 0.4),
    inset 0 0 14px rgba(143, 212, 160, 0.25);
}

/* Solid dark fill for the step title card's textbox specifically (see
   trialEngine.py's title_theme == "message" branch) — reuses the same
   near-black already established for the flat terminal-themed cards
   elsewhere in this file (.trial-bar, .trial-reward-card) rather than a
   literal #000, so it reads as the same "panel" surface. */
.trial-title-textbox--filled {
  background: var(--trial-term-bg);
}

/* Continue/action button frame — textures/rpgui-button.png, a 76x26
   pill-shaped riveted-metal tile. 8px slice/width covers the rounded
   corner + rivet columns near each end while the flat middle tiles
   however wide the button's text needs. background:transparent lets the
   border-image's `fill` middle region show through as the button's own
   surface instead of a separate CSS background layer. */
/* Compound selector — see .ap-ui-btn.trial-gold-btn's comment above;
   this button always carries ap-ui-btn too, so this beats ui.css's
   .ap-ui-btn border/background regardless of stylesheet load order. */
.ap-ui-btn.ap-rpgui-button {
  border-style: solid;
  border-color: transparent;
  border-width: 12px;
  border-image-source: url("/textures/rpgui-button.png");
  border-image-slice: 8 fill;
  border-image-width: 24px;
  border-image-repeat: stretch;
  background: transparent;
  image-rendering: pixelated;
}