/* The narrative tutorial (tutorial.js): the coach over everything, what it points at, the parts of the screen
   it keeps hidden, the page of chapters and the card on the start page. */

/* ---- the coach: a character over everything — the map, the hand, the sale contract, the develop menu —
   with a big portrait and a speech bubble; tutorial.js keeps it in its place (--cx, --cy) and lays an arrow at
   the edge of what the step points at; only when it would cover that does it glide away ---- */
#coach { position: fixed; left: 0; top: 0; z-index: 57; width: min(470px, calc(100vw - 16px)); pointer-events: none;
  transform: translate3d(var(--cx, calc(100vw - 480px)), var(--cy, 72px), 0); transition: transform .6s cubic-bezier(.25, .8, .3, 1); }
#coach.still { transition: none; }
#coach > * { pointer-events: auto; }
#coach.min { width: auto; }
.coach-card { position: relative; display: flex; align-items: flex-end; }
.coach-card[data-side="right"] { flex-direction: row-reverse; }
/* the portrait: an oval cut out of the page, in a gold frame, a little over the bubble's edge */
.coach-figure { position: relative; z-index: 1; flex: none; width: 124px; height: 152px; margin: 0 -16px 4px 0; border-radius: 50% / 46%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 30%, var(--panel)), var(--panel) 70%);
  border: 3px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent), 0 12px 22px rgba(40, 28, 10, .34); overflow: hidden; }
.coach-card[data-side="right"] .coach-figure { margin: 0 0 4px -16px; }
.coach-face { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.coach-face.pop { animation: coachIn .5s cubic-bezier(.2, 1.4, .4, 1) both; } /* a new speaker */
.coach-figure.noface .coach-face, .coach-mini.noface .coach-face { display: none; }
.coach-figure.noface::after, .coach-mini.noface::after { content: attr(data-ini); position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 54px/1 var(--f-title); color: var(--accent-deep); }
.coach-mini.noface::after { font-size: 26px; }
/* the bubble: its tail toward the portrait */
.coach-bubble { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: min(62vh, 470px); padding: 10px 14px 9px 26px;
  background: var(--panel); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent-deep) 70%, var(--line)); border-radius: 16px;
  box-shadow: 0 14px 32px rgba(40, 32, 18, .26), inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.coach-card[data-side="right"] .coach-bubble { padding: 10px 26px 9px 14px; }
.coach-bubble::before { content: ''; position: absolute; left: -9px; bottom: 44px; width: 16px; height: 16px; background: var(--panel);
  border-left: 1px solid color-mix(in srgb, var(--accent-deep) 70%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--accent-deep) 70%, var(--line)); transform: rotate(45deg); }
.coach-card[data-side="right"] .coach-bubble::before { left: auto; right: -9px; transform: rotate(-135deg); }
:root[data-theme="dark"] .coach-bubble { box-shadow: 0 14px 32px rgba(0, 0, 0, .55), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
:root[data-theme="dark"] .coach-figure { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent), 0 12px 22px rgba(0, 0, 0, .55); }
.coach-card.free .coach-figure { width: 76px; height: 92px; }
.coach-head { display: flex; align-items: center; gap: 10px; }
.coach-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.coach-id b { font: 600 18px/1.2 var(--f-title); }
.coach-id span { font-size: 12.5px; color: var(--muted); }
.coach-ch { font: 600 11px/1 var(--f-sign); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text, var(--muted)); white-space: nowrap; align-self: flex-start; margin-top: 3px; }
.coach-min { border: 0; background: none; min-height: 0; padding: 2px 6px; font-size: 15px; color: var(--muted); align-self: flex-start; }
.coach-min:hover { color: var(--ink); }
.coach-body { margin: 8px 0 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 0 1 auto; }
.coach-body p { margin: 0 0 8px; }
.coach-kicker { font: 600 11px/1.2 var(--f-sign); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text, var(--muted)); }
.coach-text { font-size: 15px; line-height: 1.5; animation: coachText .35s ease-out both; }
.coach-text b, .coach-task b, .coach-learned b { color: var(--ink); }
.coach-task { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 15%, var(--panel)); border-left: 4px solid var(--accent); }
.coach-arrow { color: var(--accent-deep); font-size: 15px; line-height: 1.3; animation: coachNudge 1.4s ease-in-out infinite; }
.coach-hint { font-size: 13px; color: var(--muted); border-left: 2px dashed var(--line); padding-left: 9px; }
.coach-nope { color: var(--bad); font-weight: 700; font-size: 13.5px; }
.coach-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.coach-dots { display: inline-flex; gap: 3px; }
.coach-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); animation: coachDot 1s ease-in-out infinite; }
.coach-dots i:nth-child(2) { animation-delay: .15s; } .coach-dots i:nth-child(3) { animation-delay: .3s; }
.coach-quiz { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.coach-quiz button { text-align: left; justify-content: flex-start; white-space: normal; line-height: 1.35; padding: 7px 10px; min-height: 0; font-weight: 600; }
.coach-quiz button.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--panel)); color: var(--ink); opacity: 1; }
.coach-quiz button.wrong { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); text-decoration: line-through; opacity: .7; }
.coach-why { font-size: 13.5px; color: var(--bad); }
.coach-right { font-weight: 700; color: var(--good); }
.coach-done { font: 600 16px/1.3 var(--f-title); color: var(--good); }
/* a rule ([[…]] in a line): a band of its own in river blue with a small mark — the story around it stays plain; the
   chapter's summary of what was learned (its rules) has the same look */
.tut-rule { display: block; margin: 7px 0; padding: 4px 10px 6px 11px; border-radius: 7px; border-left: 3px solid var(--river);
  background: color-mix(in srgb, var(--river) 9%, var(--panel)); color: var(--ink); line-height: 1.45; }
.tut-rule.lead { margin-top: 1px; }
.tut-rule.tail { margin-bottom: 1px; }
.tut-rule::before { content: attr(data-k); }
.tut-rule::before, .coach-rules-k { display: block; font: 600 10px/1.6 var(--f-sign); letter-spacing: .1em; text-transform: uppercase; color: var(--river); }
.tut-rule b, .coach-rules b { color: var(--ink); }
.coach-hint .tut-rule { margin: 5px 0 3px; padding: 3px 9px 4px 10px; }
.coach-rules { margin: 0 0 8px; padding: 4px 10px 6px 11px; border-radius: 7px; border-left: 3px solid var(--river); background: color-mix(in srgb, var(--river) 9%, var(--panel)); }
.coach-learned { margin: 2px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.coach-learned li + li { margin-top: 3px; }
.coach-learned li::marker { content: '✓  '; color: var(--river); font-weight: 800; }
:root[data-theme="dark"] .tut-rule, :root[data-theme="dark"] .coach-rules { background: color-mix(in srgb, var(--river) 13%, var(--panel)); }
.coach-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.coach-foot .spacer { flex: 1; }
.coach-bar { flex: 1 1 100%; height: 3px; border-radius: 2px; background: var(--line-soft, var(--line)); overflow: hidden; margin-bottom: 4px; }
.coach-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transition: width .4s; }
/* a task: the goal, the count it is about, the hints shown so far, a failed try */
.coach-goal { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; margin: 0 0 8px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1.4;
  background: color-mix(in srgb, var(--good) 11%, var(--panel)); border-left: 4px solid var(--good); }
.coach-goal.failed { background: color-mix(in srgb, var(--bad) 8%, var(--panel)); border-left-color: var(--bad); }
.coach-goal-k { flex: none; font: 600 10.5px/1.6 var(--f-sign); letter-spacing: .08em; text-transform: uppercase; color: var(--good); }
.coach-goal.failed .coach-goal-k { color: var(--bad); }
/* a task's way to its target, and its ★ (an advanced goal under it, lit once reached) */
.coach-goal-now { display: block; margin-top: 3px; font-weight: 500; font-size: 13px; color: var(--muted); }
.coach-goal-now b { color: var(--ink); font-variant-numeric: tabular-nums; }
.coach-goal-now b.up { color: var(--good); }
.coach-goal.star { font-weight: 500; background: color-mix(in srgb, #c9a227 12%, var(--panel)); border-left-color: #c9a227; }
.coach-goal.star .coach-goal-k { font-size: 15px; line-height: 1.2; color: #a8841a; }
.coach-goal.star.done { font-weight: 600; background: color-mix(in srgb, #c9a227 24%, var(--panel)); }
.coach-count { font-size: 13px; color: var(--muted); }
.coach-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.coach-count b.up { color: var(--good); }
.coach-count b.down { color: var(--bad); }
.coach-hint-n { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  font: 700 10.5px/1 var(--f-ui); background: var(--accent); color: var(--accent-ink, #1a1f1c); }
.coach-fail { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line));
  background: color-mix(in srgb, var(--bad) 7%, var(--panel)); animation: coachText .35s ease-out both; }
.coach-fail p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.coach-fail-who { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 13px; }
.coach-fail-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 26%; border: 1.5px solid var(--bad); }
.coach-card.shake .coach-bubble { animation: coachShake .45s ease-in-out; }
/* folded: a small portrait in the corner above the hand (the dot: something to say; red: a refusal) */
.coach-mini { position: relative; width: 66px; height: 66px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid var(--accent); background: var(--panel); overflow: visible;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 8px 18px rgba(0, 0, 0, .3); }
.coach-mini .coach-face { border-radius: 50%; }
.coach-mini-dot { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink, #1a1f1c); font: 700 13px/1 var(--f-ui); box-shadow: 0 2px 5px rgba(0, 0, 0, .25); }
.coach-mini-dot.alert { background: var(--bad); color: #fff; }
.coach-mini:hover, .coach-mini:focus-visible { transform: scale(1.06); }
@keyframes coachIn { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes coachText { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes coachNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes coachDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes coachShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* the arrow at the edge of what the coach speaks of: its tip at --px/--py, turned by --pa */
#coachPoint { position: fixed; left: 0; top: 0; z-index: 57; width: 46px; height: 28px; pointer-events: none; opacity: 0; transform-origin: 100% 50%;
  transform: translate(var(--px, -99px), var(--py, -99px)) rotate(var(--pa, 0deg)); transition: transform .5s cubic-bezier(.25, .8, .3, 1), opacity .25s; }
#coachPoint.on { opacity: 1; }
#coachPoint svg { display: block; width: 100%; height: 100%; overflow: visible; animation: coachPoint 1.1s ease-in-out infinite; }
#coachPoint path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
@keyframes coachPoint { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(0); } }

/* what the coach points at */
.tut-focus { outline: 3px solid var(--accent) !important; outline-offset: 3px; border-radius: 6px; animation: tutGlow 1.6s ease-in-out infinite; }
@keyframes tutGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent), 0 0 16px 2px color-mix(in srgb, var(--accent) 45%, transparent); } }

/* a phone: the coach is a sheet above the hand (or under the top bar), the portrait at its corner */
@media (max-width: 760px) {
  #coach { width: calc(100vw - 16px); }
  .coach-card, .coach-card[data-side="right"] { flex-direction: row; align-items: flex-start; }
  .coach-figure, .coach-card[data-side="right"] .coach-figure { width: 70px; height: 86px; margin: 0 -12px 0 0; }
  .coach-figure.noface::after { font-size: 32px; }
  .coach-bubble, .coach-card[data-side="right"] .coach-bubble { max-height: 44vh; padding: 8px 12px 8px 20px; }
  .coach-bubble::before, .coach-card[data-side="right"] .coach-bubble::before { left: -9px; right: auto; top: 26px; bottom: auto; transform: rotate(45deg); }
  .coach-text { font-size: 14px; }
  .coach-id b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #coach, #coachPoint { transition: none; }
  .coach-face, .coach-text, .coach-arrow, .coach-dots i, .coach-card.shake .coach-bubble, .tut-focus, .coach-fail, #coachPoint svg, .tut-reveal { animation: none; }
}

/* the screen grows with the course: the panels a chapter doesn't need yet are not there (tutorial.js sets
   the classes; normal games never get them), one coming in arrives with a flourish, and a right column left
   with nothing in it gives its room to the map */
html.tut-hide-markets #markets, html.tut-hide-mat #mat, html.tut-hide-played #played, html.tut-hide-log #logpanel, html.tut-hide-review #review { display: none !important; }
html.tut-side-empty #side, html.tut-side-empty #splitter { display: none !important; }
html.tut-side-empty #leftcol { flex: 1 1 auto; max-width: none; }
.tut-reveal { animation: tutReveal 1.5s cubic-bezier(.2, .9, .3, 1) both; }
.tut-reveal.tut-focus { animation: tutReveal 1.5s cubic-bezier(.2, .9, .3, 1) both, tutGlow 1.6s ease-in-out 1.5s infinite; }
@keyframes tutReveal {
  0% { opacity: 0; transform: translateY(18px) scale(.95); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  45% { opacity: 1; transform: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 34px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ---- the chapters: a page over everything (the coach too) but the windows ---- */
.tut-page { position: fixed; inset: 0; z-index: 59; background: color-mix(in srgb, var(--bg) 97%, transparent); overflow-y: auto; overscroll-behavior: contain; }
.tut-wrap { max-width: 860px; margin: 0 auto; padding: 22px 16px 40px; }
.tut-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tut-top > div { flex: 1; }
.tut-top h2 { margin: 0 0 4px; font: 600 28px/1.15 var(--f-title); }
.tut-top p { margin: 0; }
.tut-close { border: 0; background: none; font-size: 28px; line-height: 1; min-height: 0; padding: 2px 10px; color: var(--muted); }
.tut-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tut-ch { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tut-ch.next { border-color: var(--accent-deep); box-shadow: inset 4px 0 0 var(--accent); }
.tut-ch.done { background: color-mix(in srgb, var(--good) 6%, var(--panel)); }
.tut-face { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 26%; flex: none; border: 2px solid var(--line); }
.tut-ch.next .tut-face { border-color: var(--accent); }
.tut-ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tut-ch-main b { font: 600 18px/1.25 var(--f-title); }
.tut-ch-main .muted { font-size: 13px; }
.tut-n { font: 600 11px/1.2 var(--f-sign); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tut-tick { color: var(--good); }
.tut-ch button { flex: none; }
/* a heading for each part of the course; the finale stands out */
.tut-part { margin: 10px 2px -2px; font: 600 12px/1.2 var(--f-sign); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text, var(--muted)); }
.tut-part:first-child { margin-top: 0; }
.tut-ch.final { border-color: color-mix(in srgb, var(--accent-deep) 60%, var(--line)); background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel) 70%); }
.tut-leave { margin-top: 14px; text-align: center; }
@media (max-width: 560px) { .tut-ch { flex-wrap: wrap; } .tut-ch button { width: 100%; } .tut-face { width: 46px; height: 46px; } }

/* ---- the start page: the tutorial's card ---- */
.tut-card { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent-deep) 55%, var(--line));
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 60%); }
.tut-card h2 { margin: 0 0 4px; }
.tut-card p { margin: 0 0 8px; }
.tut-card-main { flex: 1; min-width: 0; }
.tut-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-faces { display: flex; flex: none; padding-left: 14px; }
.tut-faces img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 26%; border: 2px solid var(--panel); margin-left: -14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.tut-faces img:nth-child(odd) { transform: translateY(-5px); }
@media (max-width: 760px) { .tut-card { flex-direction: column; align-items: stretch; } .tut-faces { justify-content: center; } }

/* what a step points at on the map: a pulsing gold ring around a space or a merchant, a glow along a road */
.b-slot.tut-mark rect.ring, .b-mtile.tut-mark rect.ring { stroke: var(--accent); stroke-width: 4; fill: none; animation: tutRing 1.3s ease-in-out infinite; }
.b-line.tut-glow { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; opacity: .55; pointer-events: none; animation: tutLine 1.3s ease-in-out infinite; }
@keyframes tutRing { 0%, 100% { stroke-opacity: 1; stroke-width: 4; } 50% { stroke-opacity: .35; stroke-width: 7; } }
@keyframes tutLine { 0%, 100% { opacity: .6; } 50% { opacity: .2; } }
/* the players' portraits on the map: the whole strip, my portrait or the next round */
.b-strip.tut-mark > .stripbg, .b-pl.tut-mark .plbox, .b-next.tut-mark .nxbg { stroke: var(--accent); stroke-width: 4; animation: tutStrip 1.3s ease-in-out infinite; }
@keyframes tutStrip { 0%, 100% { stroke-opacity: 1; stroke-width: 4; } 50% { stroke-opacity: .4; stroke-width: 7; } }
@media (prefers-reduced-motion: reduce) { .b-slot.tut-mark rect.ring, .b-mtile.tut-mark rect.ring, .b-line.tut-glow, .b-strip.tut-mark > .stripbg, .b-pl.tut-mark .plbox, .b-next.tut-mark .nxbg { animation: none; } }

/* ---- before a real game while the tutorial isn't finished (tutorial.js askBeforePlay) ---- */
#tutAsk .modal-bg { z-index: 66; }
.modal.tut-ask { max-width: 540px; border-top: 4px solid var(--accent); }
.tut-ask .tut-faces { margin-bottom: 10px; }
.tut-ask .kicker { color: var(--accent-text); }
.tut-ask h2 { margin: 2px 0 8px; font-size: 22px; line-height: 1.25; }
.tut-ask p { margin: 0 0 14px; line-height: 1.45; }

/* a smaller board (the tutorial's first chapters): what isn't in play yet lies in the fog — dimmed, and the
   pointer passes through it */
#board .b-town.off-area, #board .b-merchant.off-area { opacity: .26; filter: grayscale(.9); pointer-events: none; }