/* The tutorial uses the shell container so manual screen rotation follows the arena. */
.tutorial-entry { border-color: #9e7c44; }
.tutorial-entry small { color: var(--heraldry-cream, #eadcb6); }
/* Tutorial 1: a control not taught yet is absent (no dimmed promise of later, nothing to press), on touch and on the
   desktop ability tiles alike. Taught, it fades and settles into the place it held all along, so nothing else moves. */
.touch-controls .touch-btn { transition: opacity .32s ease, scale .32s ease, transform .06s ease, background .06s ease; }
.touch-controls .touch-stick { transition: opacity .12s ease, scale .32s ease; }
.abilities .ability { transition: opacity .32s ease, scale .32s ease; }
.abilities .ability.tutorial-absent,
.touch-controls .touch-btn.tutorial-absent, .touch-controls .touch-stick.tutorial-absent {
  opacity: 0; scale: .82; pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, scale .2s ease, visibility 0s linear .2s;
}
.tutorial-onboarding[hidden], .tutorial-lesson[hidden], .tutorial-lesson [hidden] { display: none; }
.tutorial-onboarding {
  position: absolute; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 20px; box-sizing: border-box; background: rgba(15, 18, 13, .72);
}
.tutorial-onboarding-card {
  width: min(440px, 100%); max-height: calc(100cqh - 40px); overflow: auto; box-sizing: border-box;
  padding: clamp(20px, 4cqw, 32px); border: 1px solid #ac884d; border-top: 3px solid #8e2932;
  background: #241c17; color: #eadcb6; font: 16px/1.4 var(--font-script, sans-serif);
}
.tutorial-onboarding h2 { margin: 0; color: #f1dfae; font: 400 clamp(26px, 4cqw, 34px)/1.1 var(--font-inscription, Georgia, serif); }
.tutorial-onboarding p { margin: 12px 0 20px; }
.tutorial-onboarding small { display: block; margin-top: 18px; font-size: 13px; color: #c8b99c; }
.tutorial-onboarding-actions { display: grid; gap: 10px; }
.tutorial-onboarding button, .tutorial-lesson button, .tutorial-options summary {
  min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ac884d;
  background: #30241c; color: #eadcb6; cursor: pointer; font: 700 12px/1.3 var(--font-script, sans-serif);
  touch-action: manipulation;
}
.tutorial-onboarding [data-tutorial-begin], .tutorial-lesson [data-tutorial-continue], .tutorial-lesson [data-tutorial-practice] { background: #bc9756; color: #251a14; }
.tutorial-onboarding button:focus-visible, .tutorial-lesson button:focus-visible, .tutorial-options summary:focus-visible { outline: 2px solid #8fd4e4; outline-offset: 2px; }
.tutorial-lesson { position: absolute; inset: 0; z-index: 45; color: #eadcb6; font: 16px/1.35 var(--font-script, sans-serif); pointer-events: none; }
.tutorial-objective {
  position: absolute; top: 54px; left: calc(var(--safe-l, 0px) + 14px); max-width: min(290px, 50cqw);
  padding: 7px 10px; border-left: 2px solid #a47e43; background: rgba(23, 20, 14, .72);
}
.tutorial-objective small { display: block; color: #bea77c; font-size: 9px; letter-spacing: .12em; }
.tutorial-objective strong { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; font-weight: 600; }
/* the final duel's objective: one short line, up and out of the fight's way */
.tutorial-objective.tutorial-objective-compact { top: 40px; padding: 4px 8px; background: rgba(23, 20, 14, .5); border-left-width: 1px; }
.tutorial-objective-compact small { display: none; }
.tutorial-objective-compact strong { margin-top: 0; font-size: 10px; letter-spacing: .04em; }
@container app (max-height: 500px) {
  .tutorial-objective { top: 36px; max-width: min(250px, 32cqw); padding: 5px 8px; }
  .tutorial-objective strong { font-size: 10px; }
}
.tutorial-caption {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); width: min(590px, calc(100cqw - 48px));
  box-sizing: border-box; padding: 12px 16px; border: 1px solid #ac884d; border-top: 3px solid #8e2932;
  background: rgba(36, 28, 23, .94); max-height: calc(50cqh - 32px); overflow: auto;
}
.tutorial-caption > small { display: block; font-size: 10px; letter-spacing: .1em; color: #cbb184; }
.tutorial-caption > strong { display: block; margin-top: 6px; color: #f2d38e; font-size: 11px; letter-spacing: .1em; }
.tutorial-caption p { margin: 6px 0; }
.tutorial-instruction {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100cqw - 48px)); padding: 7px 12px; box-sizing: border-box;
  background: rgba(12, 10, 8, .78); text-align: center; border-bottom: 1px solid #8d7144;
}
.tutorial-instruction strong { color: #f2d38e; font-size: 12px; letter-spacing: .08em; }
.tutorial-instruction p { margin: 3px 0; font-size: 13px; line-height: 1.35; }
.tutorial-instruction [data-tutorial-prompt] { color: #bce7ef; }
.tutorial-instruction [data-tutorial-blocked] { color: #edcf9c; font-size: 12px; }
.tutorial-caption button { pointer-events: auto; }
.tutorial-caption-actions { position: sticky; bottom: 0; display: flex; gap: 6px; margin-top: 5px; }
/* Back: there, and small, and plain (the line before, read again) */
.tutorial-lesson .tutorial-back {
  min-width: 34px; padding: 0 10px; border-color: rgba(172, 136, 77, .45); background: rgba(36, 28, 23, .6);
  color: #b9a37c; font: 600 16px/1 var(--font-script, sans-serif);
}
.tutorial-lesson .tutorial-back:hover { color: #eadcb6; border-color: #ac884d; }
/* Top controls: transcript slip on the left, options summary on the right, anchored together near upper-right safe area */
.tutorial-top-controls {
  position: absolute; right: calc(var(--safe-r, 0px) + 12px); top: calc(var(--safe-t, 0px) + 8px);
  display: flex; align-items: flex-start; gap: 8px; z-index: 10; pointer-events: none;
}
.tutorial-top-controls > * { pointer-events: auto; }
/* The transcript: a slip of parchment beside the options, and the page it opens */
.tutorial-lesson .tutorial-transcript-open {
  position: relative; right: auto; top: auto; pointer-events: auto;
  min-height: 44px; padding: 10px 14px; border: 1px solid #9c7c4a; border-radius: 1px 3px 2px 3px;
  background: linear-gradient(176deg, #efe3c4, #e2d1a6 70%, #d8c495); color: #3b2a19;
  font: 700 11px/1.2 var(--font-script, sans-serif); letter-spacing: .1em; box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.tutorial-lesson .tutorial-transcript-open:hover { background: linear-gradient(176deg, #f5ebd2, #e8d8b0 70%, #dccb9e); }
.tutorial-transcript {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; pointer-events: auto;
  display: flex; flex-direction: column; width: min(640px, calc(100cqw - 32px)); max-height: calc(100cqh - 32px);
  box-sizing: border-box; border: 1px solid #8f6f3f; box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  background: radial-gradient(120% 90% at 50% 40%, #f3e8cc, #e6d5ab 75%, #d9c391); color: #2e2116;
  font: 15px/1.4 var(--font-script, sans-serif);
}
.tutorial-transcript-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(110, 80, 40, .4); }
.tutorial-transcript-head h2 { margin: 0; color: #5a1c1f; font: 400 18px/1.1 var(--font-inscription, Georgia, serif); letter-spacing: .12em; }
.tutorial-lesson .tutorial-transcript button { border-color: rgba(110, 80, 40, .55); background: rgba(255, 250, 235, .45); color: #3b2a19; }
.tutorial-lesson .tutorial-transcript button:hover { background: rgba(255, 250, 235, .8); }
.tutorial-lesson .tutorial-transcript-close { min-height: 34px; padding: 6px 12px; }
.tutorial-transcript-list { overflow: auto; padding: 4px 14px 14px; overscroll-behavior: contain; }
.tutorial-transcript-chapter header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0 6px; background: linear-gradient(#ecdfbf 75%, rgba(236, 223, 191, 0)); }
.tutorial-transcript-chapter h3 { margin: 0; color: #5a1c1f; font: 400 14px/1.2 var(--font-inscription, Georgia, serif); letter-spacing: .08em; }
.tutorial-lesson .tutorial-transcript-begin { min-height: 28px; padding: 3px 9px; font-size: 10px; letter-spacing: .06em; }
.tutorial-transcript-chapter.not-reached h3 { color: #7a6448; }
.tutorial-transcript-line { display: grid; grid-template-columns: 30px 64px 1fr; align-items: baseline; gap: 6px; margin: 0; padding: 4px 6px 4px 0; opacity: .55; }
.tutorial-transcript-line.heard { opacity: 1; }
.tutorial-transcript-line.current { background: rgba(142, 41, 50, .1); box-shadow: inset 2px 0 #8e2932; }
.tutorial-transcript-line.aside span { font-style: italic; }
.tutorial-transcript-line b { color: #6a4a24; font: 800 9px/1.2 var(--font-script, sans-serif); letter-spacing: .08em; }
.tutorial-lesson .tutorial-transcript-play { min-height: 26px; width: 26px; padding: 0; font-size: 10px; line-height: 1; align-self: center; }
.tutorial-lesson .tutorial-transcript-play:disabled { opacity: .35; cursor: default; }
/* (the transcript open, the lesson's own captions and slips keep out of its way) */
.tutorial-lesson.tutorial-transcript-open .tutorial-caption,
.tutorial-lesson.tutorial-transcript-open .tutorial-instruction, .tutorial-lesson.tutorial-transcript-open .tutorial-transcript-open { visibility: hidden; }
.tutorial-options { position: relative; right: auto; top: auto; pointer-events: auto; }
.tutorial-options summary { display: grid; place-content: center; list-style: none; user-select: none; background: rgba(36, 28, 23, .88); }
.tutorial-options summary::-webkit-details-marker { display: none; }
.tutorial-options[open] { width: 220px; max-height: calc(100cqh - 24px); overflow: auto; background: #241c17; border: 1px solid #ac884d; }
.tutorial-options[open] summary { border: 0; border-bottom: 1px solid #ac884d; }
.tutorial-lesson-actions { display: grid; gap: 6px; padding: 8px; }
.tutorial-reactive .tutorial-caption { border: 0; padding: 10px 16px; background: rgba(12, 10, 8, .85); text-align: left; font: 400 16px/1.35 var(--font-script, sans-serif); }
.tutorial-reactive .tutorial-caption > small { display: none; }
.tutorial-reactive .tutorial-caption > strong { margin-top: 0; font: 800 10px/1.2 var(--font-script, sans-serif); }
.tutorial-reactive .tutorial-caption [data-tutorial-prompt] { font-family: var(--font-script, sans-serif); }
[data-tutorial-optional] { color: #f3e6c4; }
[data-tutorial-optional-line] { margin: 0; }
.tutorial-end .tutorial-caption { bottom: auto; top: 50%; transform: translate(-50%, -50%); max-height: calc(100cqh - 120px); }
.tutorial-title .tutorial-caption { bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100cqw - 40px)); text-align: center; background: rgba(12, 10, 8, .7); border: 0; }
.tutorial-title [data-tutorial-chapter] { display: none; }
.tutorial-brand { margin: 10px 0; }
.tutorial-brand h1 { color: #f1dfae; font-size: clamp(28px, 5.2cqw, 66px); line-height: 1.05; text-shadow: 0 2px 0 #3a120e, 0 6px 22px #000; }

/* On touch, the conversation and the instruction are one column at the top centre (over the mode's label), as wide
   as the room between the bars on the left and the options on the right; the thumbs' controls below stay clear. */
.tutorial-lesson.tutorial-touch { --tutorial-stack-w: max(260px, min(420px, calc(100cqw - 2 * (var(--safe-l, 0px) + 264px)))); }
.tutorial-lesson.tutorial-touch:not([hidden]):not(.tutorial-title):not(.tutorial-end) {
  display: flex; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box;
  padding-top: calc(var(--safe-t, 0px) + 6px);
}
.tutorial-touch:not(.tutorial-title):not(.tutorial-end) .tutorial-caption,
.tutorial-touch:not(.tutorial-title):not(.tutorial-end) .tutorial-instruction {
  position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none;
  width: var(--tutorial-stack-w); min-width: 0;
}
.tutorial-touch .tutorial-transcript-open { min-height: 44px; font-size: 11px; padding: 10px 12px; }
/* (the column covers the mode's label: it is not seen through the card, and is back when nothing is there) */
.touch-ui:has(.tutorial-lesson.tutorial-touch:not([hidden]) :is([data-tutorial-caption], [data-tutorial-instruction]):not([hidden])) .match-info { visibility: hidden; }
/* On touch, upper left bars and lower corner controls stay clear of gameplay captions. */
/* (on touch it sits under the health and stamina bars, right of the left thumb's Sprint and Crouch) */
.tutorial-touch .tutorial-objective { top: calc(var(--safe-t, 0px) + 82px); left: calc(var(--safe-l, 0px) + 104px); max-width: min(220px, 32cqw); padding: 5px 8px; }
/* (beside the centre column, never under it) */
.tutorial-touch:not(.tutorial-title):not(.tutorial-end) .tutorial-objective {
  max-width: max(110px, min(220px, calc(50cqw - var(--tutorial-stack-w) / 2 - var(--safe-l, 0px) - 112px)));
}
.tutorial-touch .tutorial-objective strong { font-size: 10px; }
.tutorial-touch .tutorial-objective.tutorial-objective-compact { top: calc(var(--safe-t, 0px) + 80px); padding: 3px 7px; }
.tutorial-touch .tutorial-options summary span { display: none; }
.tutorial-touch .tutorial-instruction { top: calc(var(--safe-t, 0px) + 90px); width: min(350px, calc(100cqw - 448px)); min-width: 180px; }
.tutorial-touch .tutorial-instruction p { font-size: 12px; }
.tutorial-touch.tutorial-reactive .tutorial-caption {
  bottom: calc(var(--safe-b, 0px) + 12px); width: min(460px, calc(100cqw - 448px - var(--safe-l, 0px) - var(--safe-r, 0px)));
  min-width: 180px; max-height: calc(50cqh - 28px); padding: 5px 8px; font-size: 14px;
}
.tutorial-touch.tutorial-blocking .tutorial-caption {
  left: auto; right: calc(var(--safe-r, 0px) + 96px); top: 8px; bottom: auto; transform: none;
  width: min(360px, calc(100cqw - 370px - var(--safe-l, 0px) - var(--safe-r, 0px)));
  min-width: 220px; max-height: calc(50cqh - 24px); padding: 8px 10px; font-size: 14px;
}
.tutorial-touch .tutorial-caption [data-tutorial-prompt] { font-size: 12px; line-height: 1.3; }
@container app (max-height: 500px) {
  .tutorial-onboarding-card { padding: 18px 24px; }
  .tutorial-onboarding p { margin: 8px 0 12px; }
  .tutorial-onboarding small { margin-top: 10px; font-size: 12px; }
  .tutorial-onboarding-actions { grid-template-columns: 1fr 1fr; }
  .tutorial-caption { bottom: 92px; padding: 8px 12px; font-size: 14px; max-height: calc(50cqh - 24px); }
  .tutorial-caption p { margin: 4px 0; }
  .tutorial-reactive .tutorial-caption { font-size: 14px; }
  .tutorial-touch.tutorial-blocking .tutorial-caption { padding: 6px 10px; font-size: 13px; max-height: calc(50cqh - 40px); }
  .tutorial-touch.tutorial-blocking .tutorial-caption > small { font-size: 9px; }
  .tutorial-touch.tutorial-blocking .tutorial-caption > strong { margin-top: 4px; font-size: 10px; }
  .tutorial-touch.tutorial-blocking .tutorial-caption [data-tutorial-continue] { margin-top: 2px; }
  .tutorial-end .tutorial-caption { width: min(420px, calc(100cqw - 280px)); }
}
@container app (max-width: 540px) and (min-height: 501px) {
  .tutorial-touch.tutorial-reactive .tutorial-caption, .tutorial-touch.tutorial-blocking .tutorial-caption {
    top: 104px; left: 16px; right: 16px; bottom: auto; transform: none;
    width: auto; min-width: 0; max-height: calc(35cqh - 24px);
  }
  /* (upright: the column under the bars, the screen's width) */
  .tutorial-lesson.tutorial-touch { --tutorial-stack-w: calc(100cqw - 32px); }
  .tutorial-lesson.tutorial-touch:not([hidden]):not(.tutorial-title):not(.tutorial-end) { padding-top: 104px; }
  .tutorial-touch:not(.tutorial-title):not(.tutorial-end) .tutorial-caption { top: auto; }
  .tutorial-title .tutorial-caption { width: calc(100cqw - 32px); }
  .tutorial-end .tutorial-caption { top: 35%; }
}

/* The title owns the opening. Visibility prevents a one-frame caption or Continue flash. */
.tutorial-opening-held .tutorial-caption,
.tutorial-opening-held .tutorial-instruction,
.tutorial-opening-held .tutorial-objective { visibility: hidden; opacity: 0; pointer-events: none; }
.tutorial-opening-reveal .tutorial-caption { animation: tutorial-dialogue-reveal .18s ease-out both; }
@keyframes tutorial-dialogue-reveal { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tutorial-opening-reveal .tutorial-caption { animation: none; } }