.tutorial-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; color: #f1e9d8; font-family: var(--nunito); }
.tutorial-layer[hidden], .tutorial-layer [hidden] { display: none !important; }
.is-tutorial:has(.tutorial-layer[data-motion="preparing"]) .puzzle-map-viewport { visibility: hidden; }
.tutorial-shade, .tutorial-connectors { position: absolute; inset: 0; overflow: visible; }
.tutorial-shade, .tutorial-connectors, .tutorial-labels { transition: opacity 180ms ease; }
.tutorial-layer:is([data-motion="out"], [data-motion="focusing"], [data-motion="playing"]) :is(.tutorial-shade, .tutorial-connectors, .tutorial-labels) { opacity: 0; }
.tutorial-layer:not([data-motion="ready"]) .tutorial-panel { pointer-events: none; }
.tutorial-panel { position: absolute; isolation: isolate; box-sizing: border-box; width: min(220px, calc(100vw - 140px)); padding: 10px 16px 15px; border: 1px solid #977f53; border-radius: 10px; background: linear-gradient(#342e2c 1.57%, #1b1914); box-shadow: 10px 10px 20px #0004; pointer-events: auto; text-shadow: 1px 1px #0004; }
.tutorial-panel::before { content: ''; position: absolute; z-index: -1; left: -13px; top: -25px; width: calc(100% + 26px); height: 74px; background: url(assets/victory-v2/email-panel.webp) center 8px / 100% auto no-repeat; mask: url(assets/tutorial/header-mask.svg) center top / 100% 74px no-repeat; pointer-events: none; }
.tutorial-panel[data-variant="intro"], .tutorial-panel[data-variant="complete"] { width: min(356px, calc(100vw - 34px)); padding: 0 22px 24px; }
.tutorial-panel[data-variant="intro"] { padding: 12px 16px 10px; }
.tutorial-topline { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 10px; color: #d3c5a8; font-size: 10px; font-weight: 400; line-height: 14px; }
.tutorial-panel h2 { margin: 0 0 10px; color: #e4c073; font: 600 19px/1 var(--trajan); }
.tutorial-panel p { margin: 0; color: #eee1bd; font-size: 14px; font-weight: 400; line-height: 1.2; }
.tutorial-panel #tutorial-instruction { line-height: 1.35; }
.tutorial-panel strong { color: #eee1bd; font-weight: 800; }
.tutorial-panel .tutorial-note { margin-top: 14px; color: #d3c5a8; font-size: 12px; font-weight: 400; line-height: 1.2; }
.tutorial-panel .tutorial-combat-preview { margin-top: 10px; border-top: 1px solid #ffffff21; padding-top: 8px; color: #eee1bd; font-size: 14px; font-weight: 800; }
.tutorial-panel:is([data-variant="intro"], [data-variant="complete"]) .tutorial-topline { margin-bottom: 16px; font-size: 14px; }
.tutorial-panel:is([data-variant="intro"], [data-variant="complete"]) h2 { font-size: 25px; }
.tutorial-panel:is([data-variant="intro"], [data-variant="complete"]) p { font-size: 16px; }
.tutorial-panel:is([data-variant="intro"], [data-variant="complete"]) .tutorial-note { font-size: 14px; line-height: 1; }
.tutorial-layer .tutorial-roman { color: #f6a242; }
.tutorial-layer .tutorial-dacian { color: #ae282b; }
.tutorial-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.tutorial-next { position: relative; isolation: isolate; flex-shrink: 0; width: 83px; height: 36px; min-height: 36px; border: 0; padding: 0; background: transparent; color: #232323; cursor: pointer; font: 700 18px/.91 var(--trajan); text-shadow: 1px -.5px #ffe3b3; }
.tutorial-next::before { content: ''; position: absolute; z-index: -1; left: -10px; top: -10px; width: 123px; height: 76px; background: url(assets/tutorial/start-button.svg) no-repeat; pointer-events: none; }
/* Reuse Finish Turn's 150 × 33.7489 SVG without stretching. */
.tutorial-panel[data-variant="complete"] .tutorial-footer { flex-wrap: nowrap; gap: 8px; }
.tutorial-panel:is([data-variant="intro"], [data-variant="complete"]) .tutorial-next { width: 150px; height: 36px; padding-top: 2px; font-size: 14px; }
.tutorial-panel:is([data-variant="intro"], [data-variant="complete"]) .tutorial-next::before { left: 0; top: 50%; transform: translateY(-50%); width: 150px; height: 33.7489px; background-image: url(assets/v6/end-round-button.svg?v=2); }
.tutorial-panel[data-variant="complete"] .tutorial-replay { white-space: nowrap; }
.tutorial-replay { min-height: 36px; border: 0; padding: 6px 0; background: transparent; color: #d3c5a8; cursor: pointer; font: 400 12px/1.2 var(--nunito); }
.tutorial-skip { position: absolute; isolation: isolate; right: max(26px, env(safe-area-inset-right)); top: max(5px, env(safe-area-inset-top)); width: 101px; min-height: 36px; padding: 9px 0; border: 0; color: #d3c5a8; background: transparent; font: 400 12px/18px var(--nunito); cursor: pointer; pointer-events: auto; }
.tutorial-layer button:focus-visible { outline: none; }
.tutorial-layer > .tutorial-skip { right: max(26px, calc((100vw - 720px) / 2 + 26px), env(safe-area-inset-right)); }
.tutorial-connectors { color: #d5cdbf; }
.tutorial-callout-arrow { fill: none; stroke: currentColor; stroke-width: 1.5; }
.tutorial-drag-route { fill: none; stroke: #f1e9d8; stroke-width: 2; stroke-dasharray: 5 8; opacity: .6; visibility: hidden; }
.tutorial-rear-guide { position: absolute; z-index: 1; inset: 0; overflow: visible; pointer-events: none; }
.is-tutorial .map-rear-guides { display: none; }
.tutorial-target-label { position: absolute; transform: translateX(-50%); box-sizing: border-box; min-height: 24px; white-space: nowrap; padding: 5px 8px; border: 1px solid #977f53; border-radius: 5px; background: linear-gradient(#342e2c 1.57%, #1b1914); color: #eee1bd; box-shadow: 10px 10px 20px #0004; font-size: 10px; font-weight: 600; line-height: 12px; text-shadow: 1px 1px #0004; }
.tutorial-camp-sticker { width: max-content; padding-left: 22px; }
.tutorial-cell-label { transform: translate(-50%, -50%); pointer-events: none; }
.tutorial-drag-label { visibility: hidden; }
.is-tutorial:has(.card-target-drag) .tutorial-drag-label { visibility: visible; }
.tutorial-camp-sticker::before { content: ''; position: absolute; left: 6px; top: 5px; width: 13.4815px; height: 13px; background: url(assets/tutorial/dacian-icon.svg) no-repeat; }
.tutorial-camp-sticker.tutorial-dacian { padding-left: 26px; color: #e05735; }
.tutorial-camp-sticker.tutorial-roman { color: #f6a243; }
.tutorial-camp-sticker.tutorial-roman::before { top: 2px; width: 11.1108px; height: 18px; background-image: url(assets/tutorial/roman-icon.svg); }
.tutorial-you-balloon { position: absolute; isolation: isolate; width: 60px; height: 28px; transform: translate(-50%, -100%); color: #211b10; text-align: center; white-space: nowrap; font: 700 15px/25px var(--trajan); filter: drop-shadow(0 2px 2px #0008); }
.tutorial-you-balloon::before, .tutorial-you-balloon::after { content: ''; position: absolute; z-index: -1; inset: 0; clip-path: polygon(7% 0, 93% 0, 100% 13%, 100% 66%, 93% 79%, 61% 79%, 50% 100%, 39% 79%, 7% 79%, 0 66%, 0 13%); background: #614921; }
.tutorial-you-balloon::after { inset: 1.5px; background: linear-gradient(#ffe29a, #f6ba51); }
.tutorial-ghost { position: absolute; left: 0; top: 0; pointer-events: none; }
.tutorial-ghost-card { position: absolute; width: 120px; height: 168px; transform-origin: center; }
.tutorial-ghost-card .card-choice { position: absolute; width: 120px; height: 168px; transform: none !important; pointer-events: none; --card-scale: 1; }
.tutorial-ghost-pointer { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff9ec; box-shadow: 0 0 0 6px #fff9ec33, 0 2px 5px #0008; }
.is-tutorial :is(#card-ux-info, .battle-header, .hand-restart, .card-drop-zone, .attack-preview) { visibility: hidden; }
.is-tutorial :is(.card-target-drag, .card-drag-preview) { z-index: 51; }
@media (max-height: 650px) {
  .tutorial-panel { padding: 10px 13px 12px; width: min(220px, calc(100vw - 140px)); }
  .tutorial-panel h2 { font-size: 17px; margin-bottom: 6px; }
  .tutorial-panel p { font-size: 13px; }
  .tutorial-panel .tutorial-note { font-size: 11px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-layer * { transition: none !important; }
  .tutorial-ghost { display: none; }
}
/* The hint is a real-size card clone; all layers inherit the hand's coordinates. */
.tutorial-ghost { width: 20px; height: 20px; }
.tutorial-ghost-card { --card-width: 120px; --card-height: 168px; --card-scale: 1.1; }
.is-tutorial .hand-card .card-surface { animation: none !important; box-shadow: none !important; }
.is-tutorial .card-choice:focus-visible { outline: none; }
.is-tutorial .hand-end-round:focus-visible { outline: none; }
.is-tutorial:has(.tutorial-layer[data-step="end-round"][data-motion="ready"][data-awaiting-next="false"]) .hand-end-round:not(:disabled) .finish-turn-button { animation: tutorial-end-round-pulse 1200ms ease-in-out infinite; }
@keyframes tutorial-end-round-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.035); filter: brightness(1.2) drop-shadow(0 0 5px #e4c07380); }
}
@media (prefers-reduced-motion: reduce) {
  .is-tutorial:has(.tutorial-layer[data-step="end-round"][data-motion="ready"][data-awaiting-next="false"]) .hand-end-round:not(:disabled) .finish-turn-button { animation: none; filter: brightness(1.15); }
}
@media (max-height: 500px) and (min-width: 700px) {
  .is-tutorial .puzzle-canvas { height: 100dvh; min-height: 100dvh; gap: 0; }
  .is-tutorial .battle-header { height: 0; }
  .is-tutorial .puzzle-map-viewport {
    --tutorial-map-feather: 56px;
    inset: 0 auto 0 max(0px, calc((100vw - 720px) / 2)); width: calc(min(100vw, 720px) - 390px);
    mask-image: linear-gradient(transparent, #000 45px, #000 calc(100% - 45px), transparent),
      linear-gradient(to right, #000 calc(100% - var(--tutorial-map-feather)), transparent);
    mask-composite: intersect;
  }
  .is-tutorial .card-hand { position: absolute; right: max(0px, calc((100vw - 720px) / 2)); bottom: 0; margin: 0; }
  .is-tutorial .hand-stage { --control-spread: 0px; }
}


/* A shared title/Skip row keeps the opening compact on phones. */
.tutorial-panel[data-variant="intro"] h2 { padding-right: 105px; min-height: 24px; margin-bottom: 8px; font-size: 20px; line-height: 24px; }
.tutorial-panel[data-variant="intro"] #tutorial-instruction { font-size: 14px; }
.tutorial-panel[data-variant="intro"] .tutorial-note { margin-top: 8px; font-size: 12px; line-height: 1.25; }
.tutorial-panel[data-variant="intro"] .tutorial-footer { margin-top: 8px; }
.tutorial-panel[data-variant="intro"] .tutorial-skip { top: 6px; right: 12px; }
.tutorial-panel[data-variant="complete"] .tutorial-topline { justify-content: flex-start; }