.combat-tutorial { position: absolute; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; font-family: "Alegreya Sans", "Segoe UI", sans-serif; color: #f4e7c9; }
.combat-tutorial [hidden] { display: none !important; }
.tutorial-shade { position: absolute; inset: 0; background: #020711b8; pointer-events: auto; }
.tutorial-spotlight { position: absolute; border: 2px solid #f2cb7b; border-radius: 12px; box-shadow: 0 0 0 3000px #020711bd, inset 0 0 18px #f2cb7b33, 0 0 18px #f2cb7b66; }
.tutorial-card { position: absolute; width: min(440px, calc(100% - 24px)); max-height: calc(100% - 82px); overflow: auto; box-sizing: border-box; padding: 23px 26px; border: 1px solid #b78c48; border-left: 4px solid #f2cb7b; border-radius: 4px 16px 16px 4px; background: linear-gradient(130deg, #14243a, #08121ff7); box-shadow: 0 14px 55px #000a; pointer-events: auto; }
.tutorial-kicker { margin: 0 0 10px; color: #e6bb72; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tutorial-card h2 { margin: 0 0 13px; font-family: "Cinzel", Georgia, serif; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.3; color: #fff0d1; }
.tutorial-card p:not(.tutorial-kicker) { font-size: 18px; line-height: 1.4; margin: 0 0 14px; }
.tutorial-card .tutorial-hint { color: #9ec4dc; font-size: 15px !important; }
.tutorial-navigation { display: flex; justify-content: flex-end; gap: 12px; }
.tutorial-navigation button, .tutorial-skip { min-height: 44px; padding: 10px 15px; border-radius: 6px; font: 700 15px "Alegreya Sans", "Segoe UI", sans-serif; cursor: pointer; }
[data-tutorial-next] { border: 1px solid #eac17a; background: #eac17a; color: #142132; }
[data-tutorial-back] { border: 1px solid #76899c; background: #16283c; color: #e2eaf3; }
.tutorial-skip { position: absolute; top: 12px; right: 12px; background: #0a1429f5; color: #f5e1af; border: 1px solid #b78c48; pointer-events: auto; }
.combat-tutorial button:hover { filter: brightness(1.15); }
.combat-tutorial button:focus-visible { outline: 3px solid #83d8ff; outline-offset: 3px; }
.archive-tutorial { padding: 22px; margin-bottom: 22px; border: 1px solid #bc9555; border-radius: 12px; background: #101e32e6; }
.archive-tutorial h3 { margin: 4px 0 10px; color: #f2cb7b; }
.archive-tutorial p { max-width: 65ch; }
@media (max-width: 980px) {
  .tutorial-card { width: min(360px, calc(100% - 24px)); padding: 16px; }
  .tutorial-card p:not(.tutorial-kicker) { font-size: 16px; }
  .tutorial-card .tutorial-hint { font-size: 13px !important; }
}
@media (max-height: 600px) {
  .tutorial-card { max-height: calc(100% - 82px); overflow: auto; padding: 14px 18px; }
  .tutorial-card p:not(.tutorial-kicker) { font-size: 15px; margin-bottom: 9px; }
  .tutorial-card h2 { font-size: 18px; margin-bottom: 8px; }
}