/* Observatory practice table. All selectors are isolated from the match and deck-builder UI. */
.tutorial {
  --tt-ink: #080f14;
  --tt-mint: #a4f8d8;
  --tt-copper: #cf9d72;
  --tt-ivory: #f3efe5;
  --tt-muted: #9dabb1;
  --tt-line: rgba(164, 248, 216, .16);
  max-width: 1500px;
  margin: 0 auto;
  padding: 25px 28px 28px;
  color: var(--tt-ivory);
  font-family: var(--font-ui, 'Avenir Next', Avenir, 'Segoe UI', sans-serif);
  font-size: 14px;
}
.tutorial *, .tutorial-inspector * { box-sizing: border-box; }
.tutorial h1, .tutorial h2, .tutorial h3, .tutorial p { margin: 0; }
.tutorial h1, .tutorial h2 {
  font-family: var(--font-display, Optima, Candara, 'Trebuchet MS', sans-serif);
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--tt-ivory);
  text-transform: none;
}
.tutorial h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.tutorial h2 { font-size: 27px; line-height: 1.2; }
.tutorial h3 { font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.tutorial p { line-height: 1.65; }
.tutorial button { font: inherit; cursor: pointer; color: inherit; letter-spacing: 0; text-transform: none; }
.tutorial button:disabled { cursor: wait; opacity: .6; }
.tutorial :focus-visible, .tutorial-inspector :focus-visible { outline: 2px solid var(--tt-mint, #a4f8d8); outline-offset: 4px; }
.tutorial a { color: var(--tt-mint); text-underline-offset: 3px; }
.tutorial a:hover { color: white; }
.tutorial-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 27px; }
.tutorial-header p { margin-top: 8px; color: var(--tt-muted); font-size: 14px; }
.tutorial-course-progress { flex: 0 0 185px; color: var(--tt-muted); font-size: 12px; }
.tutorial-course-progress progress { display: block; margin-top: 10px; width: 100%; height: 4px; appearance: none; border: 0; background: #26343a; border-radius: 8px; overflow: hidden; }
.tutorial-course-progress progress::-webkit-progress-bar { background: #26343a; }
.tutorial-course-progress progress::-webkit-progress-value { background: var(--tt-mint); }
.tutorial-course-progress progress::-moz-progress-bar { background: var(--tt-mint); }
.tutorial-layout { display: grid; grid-template-columns: 180px minmax(340px, 1fr) 270px; gap: 24px; align-items: start; }
.tutorial-lesson-nav { display: grid; gap: 5px; position: sticky; top: 12px; }
.tutorial-lesson {
  width: 100%; min-height: 64px; display: flex; gap: 10px; align-items: center; padding: 10px 8px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left;
}
.tutorial-lesson:hover { background: rgba(164, 248, 216, .04); }
.tutorial-lesson.is-current { background: linear-gradient(100deg, rgba(164, 248, 216, .10), rgba(164, 248, 216, .02)); border-color: var(--tt-line); }
.tutorial-lesson-number { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #42535a; color: var(--tt-muted); font-size: 12px; }
.tutorial-lesson.is-current .tutorial-lesson-number { color: var(--tt-ink); background: var(--tt-mint); border-color: var(--tt-mint); }
.tutorial-lesson-text { display: block; min-width: 0; }
.tutorial-lesson-text strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; }
.tutorial-lesson-text small { display: block; color: var(--tt-muted); font-size: 10px; line-height: 1.45; margin-top: 4px; }
.tutorial-board-column { min-width: 0; perspective: 1100px; }
.tutorial-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 11px; color: var(--tt-copper); font-size: 12px; }
.tutorial-turn { color: var(--tt-muted); font-size: 11px; }
.tutorial-table {
  isolation: isolate; position: relative; display: grid; gap: 7px; padding: 12px 16px;
  border: 1px solid rgba(207, 157, 114, .4); border-radius: 24px 24px 40px 40px;
  background: radial-gradient(ellipse at 50% 40%, rgba(83, 132, 119, .15), transparent 66%), linear-gradient(145deg, #14262a, #101c23 40%, #0d191e);
  box-shadow: 0 9px 0 #070d12, 0 10px 0 rgba(207, 157, 114, .28), 0 25px 38px rgba(0, 0, 0, .3), inset 0 0 0 5px #102128, inset 0 0 0 6px rgba(207, 157, 114, .1);
  transform: rotateX(5deg); transform-origin: center 20%;
}
.tutorial-table::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1; top: 20%; left: 20%; right: 20%; bottom: 15%; border: 1px solid rgba(207, 157, 114, .07); border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(207, 157, 114, .025), 0 0 0 51px rgba(207, 157, 114, .018); transform: rotate(-28deg);
}
.tutorial-seat { display: flex; align-items: center; gap: 9px; color: #b2bcbf; font-size: 11px; min-height: 26px; }
.tutorial-seat strong { margin-left: auto; color: var(--tt-ivory); font-size: 20px; font-weight: 500; }
.tutorial-seat small { font-size: 11px; color: var(--tt-muted); }
.tutorial-seat.is-you { color: var(--tt-mint); }
.tutorial-seat.is-you strong { color: var(--tt-mint); }
.tutorial-seat-mark { color: var(--tt-copper); font-size: 23px; line-height: 1; }
.tutorial-base { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; min-height: 98px; padding: 7px 10px 3px; }
.tutorial-enemy-base { min-height: 56px; }
.tutorial-enemy-base:has(.tutorial-card-wrap) { min-height: 101px; }
.tutorial-zone-label { position: absolute; top: 3px; left: 0; color: #94a7ad; font-size: 10px; pointer-events: none; }
.tutorial-empty { color: #85989e; font-size: 11px; font-style: italic; text-align: center; }
.tutorial-battlefields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 5px 0 8px; }
.tutorial-battlefield { position: relative; min-width: 0; min-height: 168px; border: 1px solid rgba(177, 192, 187, .18); border-radius: 11px; background: #09171b; overflow: hidden; }
.tutorial-field-art { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; filter: brightness(.29) saturate(.65); opacity: .7; pointer-events: none; }
.tutorial-field-title { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 2px; gap: 7px; font-size: 10px; color: #d1cbc0; }
.tutorial-field-title small { font-size: 9px; color: #a1b3b5; }
.tutorial-field-units { position: relative; display: flex; gap: 12px; min-height: 117px; align-items: center; justify-content: center; padding: 8px 4px 15px; }
.tutorial-battlefield.is-owned { border-color: rgba(164, 248, 216, .48); }
.tutorial-battlefield.is-destination { outline: 1px solid var(--tt-copper); outline-offset: 3px; }
.tutorial .tutorial-destination { position: relative; display: block; width: calc(100% - 18px); min-height: 32px; margin: -10px 9px 8px; padding: 5px 8px; border: 1px solid rgba(207, 157, 114, .65); border-radius: 5px; background: rgba(38, 33, 27, .88); color: #f1d6bb; font-size: 11px; }
.tutorial-card-wrap { flex: 0 0 auto; position: relative; width: 72px; display: flex; flex-direction: column; align-items: center; }
.tutorial .tutorial-card {
  display: block; position: relative; flex: 0 0 auto; width: 72px; height: 101px; min-height: 0; padding: 0; border: 1px solid #857b66; border-radius: 6px; background: #17262d; overflow: visible;
  box-shadow: 1px 2px 0 #333028, 2px 4px 0 #090d10, 4px 7px 9px rgba(0, 0, 0, .65);
  transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease;
}
.tutorial .tutorial-card > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.tutorial-card-name { position: absolute; bottom: 0; left: 0; right: 0; display: block; padding: 4px 3px; background: linear-gradient(transparent, rgba(4, 11, 15, .95)); font-size: 9px; color: white; border-radius: 0 0 5px 5px; line-height: 1.3; }
.tutorial-card .is-missing { opacity: 0; }
.tutorial .tutorial-card:hover { transform: translateY(-4px); box-shadow: 2px 5px 0 #070e12, 5px 11px 16px rgba(0, 0, 0, .55); }
.tutorial .tutorial-card.is-actionable { outline: 2px solid var(--tt-mint); outline-offset: 3px; }
.tutorial .tutorial-card.is-selected { outline-color: var(--tt-copper); transform: translateY(-7px); }
.tutorial .tutorial-card.is-exhausted { transform: rotate(9deg); filter: saturate(.68); }
.tutorial-card-status { position: relative; z-index: 2; margin-top: 5px; font-size: 8px; white-space: nowrap; line-height: 1.2; color: #d9b791; }
.tutorial .tutorial-inspect-link { border: 0; background: none; font-size: 9px; padding: 3px; min-height: 20px; color: #b4c9c7; text-decoration: underline; text-underline-offset: 2px; }
.tutorial-might { position: absolute; bottom: 14px; right: -8px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #efc299; color: #fff1df; background: #322820; box-shadow: 0 2px 5px #0009; font-size: 13px; font-weight: 700; }
.tutorial-player-area { display: grid; grid-template-columns: 140px 1fr; gap: 16px; margin-top: 22px; }
.tutorial-runes { padding: 9px 0; font-size: 11px; color: var(--tt-muted); }
.tutorial-rune-cards { display: flex; padding-left: 2px; min-height: 51px; margin-bottom: 8px; }
.tutorial .tutorial-rune { position: relative; width: 32px; height: 45px; min-height: 0; padding: 0; margin-right: -5px; border: 1px solid #637d79; border-radius: 4px; background: #10232a; box-shadow: 2px 3px 3px #0008; }
.tutorial .tutorial-rune img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.tutorial .tutorial-rune.is-exhausted { transform: rotate(20deg) translateY(3px); filter: brightness(.5) saturate(.35); }
.tutorial-runes strong { display: block; color: #c4d6d2; font-size: 11px; font-weight: 500; }
.tutorial-runes span { display: block; margin-top: 3px; }
.tutorial-hand { min-height: 141px; display: flex; position: relative; align-items: center; justify-content: center; gap: 17px; padding-top: 20px; border-top: 1px solid var(--tt-line); }
.tutorial-hand .tutorial-zone-label { top: 3px; }
.tutorial .in-hand .tutorial-card, .tutorial .in-hand { width: 84px; }
.tutorial .in-hand .tutorial-card { height: 117px; }
.tutorial-chain { display: grid; gap: 6px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--tt-line); }
.tutorial-chain h3 { color: var(--tt-copper); font-size: 12px; font-weight: 500; }
.tutorial-chain-item { display: flex; align-items: center; gap: 10px; min-height: 45px; padding: 5px 10px; background: #16252d; border-left: 2px solid var(--tt-copper); border-radius: 0 6px 6px 0; font-size: 12px; }
.tutorial-chain-item img { width: 25px; height: 35px; object-fit: cover; border-radius: 2px; }
.tutorial-chain-order { flex: 0 0 30px; color: var(--tt-copper); font-size: 10px; }
.tutorial-guide { padding: 4px 0 0 19px; border-left: 1px solid var(--tt-line); }
.tutorial-guide-meta { display: flex; justify-content: space-between; color: var(--tt-muted); font-size: 11px; margin-bottom: 14px; }
.tutorial-explanation { margin-top: 15px !important; color: #bdc7c9; font-size: 13px; }
.tutorial-step { padding: 17px 15px; margin-top: 23px; border-left: 2px solid var(--tt-copper); background: linear-gradient(95deg, rgba(207, 157, 114, .1), rgba(207, 157, 114, .01)); border-radius: 0 8px 8px 0; }
.tutorial-step h3 { color: #efcaaa; font-weight: 600; }
.tutorial-step p { color: #e0dfd5; font-size: 13px; margin-top: 7px; }
.tutorial-step.is-complete { border-color: var(--tt-mint); background: linear-gradient(95deg, rgba(164, 248, 216, .1), rgba(164, 248, 216, .01)); }
.tutorial-step.is-complete h3 { color: var(--tt-mint); }
.tutorial-step-title:focus { outline: none; }
.tutorial-actions { display: grid; gap: 9px; margin-top: 15px; }
.tutorial .tutorial-button, .tutorial-inspector .tutorial-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; padding: 11px 14px;
  background: #172831; color: #e3ede7; border: 1px solid #42595d; border-radius: 7px; line-height: 1.4; text-align: center; font-size: 12px; font-weight: 600;
}
.tutorial .tutorial-button:hover { background: #223b42; border-color: #80a699; }
.tutorial .tutorial-button.is-primary { background: var(--tt-mint); border-color: var(--tt-mint); color: #092c25; box-shadow: inset 0 1px 0 #e9fff4; }
.tutorial .tutorial-button.is-primary:hover { background: #c8ffe9; }
.tutorial-next { margin-top: 14px; width: 100%; }
.tutorial-guide-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 9px; }
.tutorial .tutorial-text-button { min-height: 40px; padding: 5px 0; background: transparent; border: 0; color: var(--tt-muted); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.tutorial .tutorial-text-button:hover { color: var(--tt-ivory); }
.tutorial-hint { margin-top: 6px !important; padding: 12px; border: 1px solid rgba(164, 248, 216, .22); border-radius: 6px; color: #c7dfd7; font-size: 12px; }
.tutorial-rule-notes { border-top: 1px solid var(--tt-line); margin-top: 17px; padding-top: 11px; font-size: 11px; color: var(--tt-muted); }
.tutorial-rule-notes summary { padding: 7px 0; color: #bdc9c8; cursor: pointer; }
.tutorial-rule-notes p { margin: 8px 0; }
.tutorial-keyboard-note { color: #849ba3; font-size: 10px; margin-top: 14px !important; }
.tutorial-sources { margin: 28px 0 0 204px; padding-top: 16px; border-top: 1px solid var(--tt-line); color: #849da5; font-size: 10px; }
.tutorial-sources p + p { margin-top: 4px; }
.tutorial-loading { display: grid; gap: 22px; justify-items: center; align-content: center; min-height: 450px; color: #b6cec9; }
.tutorial-compass { width: 75px; height: 75px; border: 1px solid var(--tt-copper); border-radius: 50%; box-shadow: inset 0 0 0 12px var(--tt-ink), inset 0 0 0 13px #486158; transform: rotate(45deg); }
.tutorial-error { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px; margin-bottom: 20px; border: 1px solid #ca9b79; border-radius: 8px; background: #30241e; color: #f2d8c2; }
.tutorial-inspector { position: fixed; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 48px 24px 24px; border: 1px solid #a78a6e; border-radius: 15px; background: #101d24; color: #f3efe5; box-shadow: 0 30px 90px #0009; }
.tutorial-inspector[open] { display: grid; grid-template-columns: minmax(140px, 230px) 1fr; gap: 25px; align-items: center; }
.tutorial-inspector::backdrop { background: rgba(2, 8, 12, .8); }
.tutorial-inspector > img { width: 100%; border-radius: 10px; }
.tutorial-inspector h2 { font: 500 26px var(--font-display, Optima, sans-serif); margin: 0 0 14px; }
.tutorial-inspector p { line-height: 1.65; font-size: 14px; white-space: pre-line; }
.tutorial-inspector .tutorial-inspector-close { position: absolute; right: 10px; top: 8px; min-height: 32px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.tutorial-muted { color: #a5b9bd; }
.tutorial-table.has-action { animation: tutorial-feedback .22s ease-out; }
@keyframes tutorial-feedback { from { opacity: .7; } to { opacity: 1; } }

@media (max-width: 1180px) {
  .tutorial { padding: 22px 20px; }
  .tutorial-layout { grid-template-columns: minmax(360px, 1fr) 270px; gap: 22px; }
  .tutorial-lesson-nav { grid-column: 1 / -1; position: static; display: flex; overflow-x: auto; gap: 8px; padding: 2px 4px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .tutorial-lesson { min-width: 155px; width: 155px; padding: 8px; min-height: 59px; scroll-snap-align: start; }
  .tutorial-lesson-text small { font-size: 9px; }
  .tutorial-sources { margin-left: 0; }
}
@media (max-width: 760px) {
  .tutorial { padding: 20px 14px; }
  .tutorial-header { align-items: start; gap: 15px; margin-bottom: 17px; }
  .tutorial-header p { font-size: 12px; max-width: 40ch; }
  .tutorial-course-progress { flex-basis: 100px; font-size: 10px; padding-top: 5px; }
  .tutorial-layout { display: flex; flex-direction: column; gap: 16px; }
  .tutorial-lesson-nav { width: 100%; order: 0; }
  .tutorial-board-column { width: 100%; order: 2; }
  .tutorial-guide { width: 100%; order: 1; padding: 0; border-left: 0; display: grid; grid-template-columns: 1fr; }
  .tutorial-guide-meta { margin-bottom: 7px; }
  .tutorial-guide h2 { font-size: 25px; }
  .tutorial-explanation { font-size: 12px; margin-top: 8px !important; }
  .tutorial-step { margin-top: 12px; padding: 12px; }
  .tutorial-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .tutorial-actions .tutorial-button { flex: 1 1 140px; }
  .tutorial-guide-tools { margin-top: 1px; }
  .tutorial-rule-notes { margin-top: 1px; }
  .tutorial-keyboard-note { display: none; }
  .tutorial-table { transform: rotateX(3deg); padding: 10px; border-radius: 18px 18px 28px 28px; }
  .tutorial-table-heading { font-size: 11px; }
  .tutorial-field-title { display: block; padding: 8px 8px 0; }
  .tutorial-field-title small { display: block; margin-top: 2px; }
  .tutorial-battlefields { gap: 9px; }
  .tutorial-battlefield { min-height: 174px; }
  .tutorial-field-units { gap: 9px; padding: 8px 2px 12px; }
  .tutorial-field-units .tutorial-card, .tutorial-field-units .tutorial-card-wrap { width: 61px; }
  .tutorial-field-units .tutorial-card { height: 86px; }
  .tutorial-player-area { grid-template-columns: 114px 1fr; gap: 8px; }
  .tutorial-hand { justify-content: center; gap: 13px; flex-wrap: wrap; }
  .tutorial .in-hand .tutorial-card, .tutorial .in-hand { width: 74px; }
  .tutorial .in-hand .tutorial-card { height: 103px; }
  .tutorial-sources { margin-top: 24px; }
}
@media (max-width: 410px) {
  .tutorial { padding-left: 10px; padding-right: 10px; }
  .tutorial-header { display: block; }
  .tutorial-course-progress { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
  .tutorial-course-progress progress { max-width: 130px; margin: 0; }
  .tutorial-field-title { font-size: 9px; }
  .tutorial-player-area { grid-template-columns: 100px 1fr; }
  .tutorial-inspector[open] { grid-template-columns: 1fr; }
  .tutorial-inspector > img { max-width: 210px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial *, .tutorial *::before, .tutorial *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tutorial-table { transform: none; }
}