.tutorial-app { max-width:1240px; }
.tutorial-emblem { color:var(--gold); font-size:37px; }
.tutorial-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:22px; margin:24px 0; }
.tutorial-intro h1 { font-size:clamp(31px,4vw,48px); line-height:1.15; margin:8px 0; }.tutorial-intro h1 em { color:var(--gold-light); font-style:normal; }
.tutorial-intro p { color:var(--muted); font-size:12px; }.tutorial-progress { flex-shrink:0; border:1px solid var(--line); border-radius:30px; padding:7px 13px; color:var(--gold); font-size:11px; }
.lesson-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:28px; }
.lesson-tab { display:flex; align-items:center; gap:8px; min-height:48px; min-width:0; padding:8px; text-align:left; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--muted); font-size:10px; }
.lesson-tab b { display:grid; place-items:center; width:23px; height:23px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; color:var(--gold); font-size:10px; }
.lesson-tab.active { border-color:var(--gold); color:var(--ink); }.lesson-tab.completed b { background:rgba(128,180,123,.14); color:#a9d7a7; }
.lesson-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; scroll-margin-top:12px; }.lesson-heading h2 { font-size:30px; margin:6px 0; }.lesson-heading .button { font-size:11px; }
.lesson-intro { max-width:900px; font-size:13px; color:var(--muted); line-height:1.75; margin:10px 0 22px; }
.lesson-layout { display:grid; grid-template-columns:300px minmax(0,1fr); align-items:start; gap:20px; }
.lesson-coach { position:sticky; top:16px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }.lesson-coach h2 { font-size:24px; line-height:1.3; margin:10px 0 13px; }.lesson-coach>p { color:var(--muted); font-size:12px; line-height:1.75; }
.lesson-coach .combat-reference { display:grid; gap:8px; margin-top:20px; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.5; }
.lesson-coach .combat-reference b { color:var(--gold-light); }.lesson-coach .reference-note { font-size:9px; }
.lesson-table { padding:23px; }.lesson-divider { color:var(--gold); text-align:center; font-size:24px; padding:3px; }
.tutorial-army .army-header { border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:14px; }.tutorial-army .army-header h2 { font-size:20px; }.lesson-side { color:var(--muted); font-size:10px; }
.lesson-zone { margin:12px 0 18px; }.lesson-zone h3 { font:10px "Segoe UI",Arial,sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.lesson-cards { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }.tutorial-card-wrap { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; }
.lesson-wall { width:100%; border:1px solid #657357; color:#d5ddbc; background:#334231; border-radius:3px; text-align:center; font-size:8px; line-height:18px; }.lesson-wall.is-breach { background:#4a2d22; border-color:#9d6e47; color:#e4c199; }
.tutorial-page .card.eligible { border-color:rgba(217,183,121,.55); box-shadow:0 3px 0 #9c895f; }
.tutorial-page .lesson-highlight .card { outline:2px solid #f1d49d; outline-offset:3px; box-shadow:0 0 19px rgba(217,183,121,.2); }
.tutorial-page .card.selected { outline:2px solid #a7d6ad; outline-offset:3px; transform:none; }
.tutorial-page .card.leaving { margin-bottom:21px; }.tutorial-page .card .loss-mark { max-width:95px; font-size:7px; }
.commit-label { color:var(--gold); font-size:8px; }
.lesson-actionbar { position:sticky; bottom:10px; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 18px; margin-top:20px; border:1px solid rgba(217,183,121,.3); border-radius:9px; background:var(--panel); box-shadow:0 5px 22px rgba(0,0,0,.3); }
.lesson-actionbar strong { display:block; font-size:12px; font-weight:500; color:var(--gold-light); }.lesson-actionbar small { display:block; font-size:10px; margin-top:4px; color:var(--muted); }.lesson-actionbar .button { flex-shrink:0; font-size:11px; }.lesson-pick-note { font-size:11px; color:var(--muted); }
.lesson-powers { display:flex; gap:12px; margin-top:18px; }.lesson-powers>div { flex:1; padding:10px; border:1px solid var(--line); border-radius:5px; }.lesson-powers span,.lesson-powers small { display:block; color:var(--muted); font-size:10px; }.lesson-powers strong { display:block; color:var(--gold-light); font-family:Georgia,serif; font-size:30px; }
.tutorial-message { flex-basis:100%; color:#b6d8ad; font-size:11px; }.tutorial-message:empty { display:none; }.tutorial-message.is-error { color:#e4a290; }
.lesson-actionbar { flex-wrap:wrap; }
@media(max-width:850px) { .lesson-layout { grid-template-columns:240px minmax(0,1fr); gap:14px; }.lesson-table { padding:17px; }.lesson-coach { padding:16px; }.lesson-coach h2 { font-size:21px; }.lesson-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }.lesson-tab span { font-size:9px; } }
@media(max-width:680px) {
  .tutorial-app { padding:14px 12px 25px; }.tutorial-page .brand h1 { font-size:25px; }.tutorial-page .brand .eyebrow { display:none; }.tutorial-emblem { font-size:28px; }.tutorial-page .masthead { gap:10px; }.tutorial-page .top-actions .button { font-size:9px; padding:8px; }
  .tutorial-intro { display:block; margin:18px 0; }.tutorial-progress { display:inline-block; margin-top:12px; }.lesson-nav { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin-bottom:21px; }.lesson-tab { justify-content:center; padding:6px 3px; min-height:39px; }.lesson-tab span { display:none; }.lesson-tab.active b { background:rgba(217,183,121,.14); }
  .lesson-heading { align-items:flex-start; }.lesson-heading h2 { font-size:25px; }.lesson-heading .eyebrow { font-size:8px; letter-spacing:.08em; }.lesson-heading .button { font-size:9px; padding:7px; max-width:87px; }
  .lesson-intro { font-size:12px; margin:10px 0 15px; }.lesson-layout { display:block; }.lesson-coach { position:static; padding:15px; margin-bottom:14px; }.lesson-coach h2 { font-size:21px; margin:7px 0 9px; }.lesson-coach .combat-reference { display:none; }
  .lesson-table { padding:16px; }.tutorial-army .army-header h2 { font-size:17px; }.lesson-side { font-size:9px; }.lesson-cards { gap:11px; }.tutorial-page .card { --card-w:53px; --card-h:76px; padding:5px; }.tutorial-page .card .rank { font-size:23px; }.tutorial-page .card .suit { font-size:17px; top:5px; right:5px; }.tutorial-page .card .role { font-size:7px; }.tutorial-page .card .slot { font-size:8px; }.tutorial-page .card.back::after { font-size:24px; }.lesson-zone { margin-bottom:12px; }
  .lesson-actionbar { bottom:6px; padding:11px; gap:9px; flex-wrap:wrap; }.lesson-actionbar>div { flex:1 1 160px; }.lesson-actionbar strong { font-size:11px; }.lesson-actionbar small,.lesson-pick-note { font-size:9px; }.lesson-actionbar .button { font-size:10px; min-height:40px; }
}
@media(prefers-reduced-motion:reduce) { .tutorial-page .card { transition:none; } }