/* Reuse the game's parchment, heraldry and painted button atlases. */
.game-modal[data-variant='tutorial']{width:min(94vw,590px);max-height:94dvh}
.game-modal[data-variant='tutorial'] #modal-content{padding:24px}
.game-modal[data-variant='tutorial'] .modal-close{position:absolute;float:none;right:5px;top:5px;z-index:3;width:58px;height:58px;border:0;border-radius:0;background:transparent url('./art-web/governor-regalia-v1-d5b7eac8bf.webp') right center/200% 100% no-repeat;color:#f7d796;filter:drop-shadow(0 2px 2px #28160780)}
.tutorial-intro{color:var(--antique-ink)}
.tutorial-intro-emblem{display:none}
.tutorial-intro h3{font:700 27px/1.15 var(--serif);margin:8px 0;color:var(--antique-ink)}
.tutorial-intro>p{font:13px/1.5 var(--sans);color:var(--antique-muted)}
.tutorial-roadmap{list-style:none;padding:0;margin:18px 0;display:grid;gap:14px}
.tutorial-roadmap li{display:flex;gap:14px;align-items:center;padding-bottom:14px;border-bottom:1px solid #98744355}
.tutorial-roadmap .campaign-field-crest{width:42px;height:52px;flex:none}.tutorial-roadmap .campaign-field-crest .icon{width:26px;height:26px}
.tutorial-roadmap strong{font:700 20px/1.15 var(--serif)}
.game-modal .tutorial-roadmap p{margin:4px 0 0;font:12px/1.45 var(--sans);color:var(--antique-muted)}
.tutorial-intro-actions{display:grid;gap:14px;margin:20px 0 12px}.tutorial-intro-actions button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px}.tutorial-intro-actions .icon{width:23px;height:23px}
.tutorial-intro .tutorial-footnote{font-size:11px;text-align:center}
.tutorial-guide{position:relative;padding:12px;color:var(--antique-ink);border:10px solid transparent;border-image:var(--ornate-paper) 8% / 10px / 0 stretch;background:var(--paper);background-image:var(--paper-veil),var(--ornate-paper);background-size:100% 100%,119.05% 119.05%;background-position:center;background-origin:padding-box;background-clip:padding-box;margin:0 0 14px;box-shadow:0 3px 12px #21170933}
.tutorial-guide.is-floating{position:absolute;z-index:14;left:16px;bottom:66px;width:min(365px,calc(100% - 32px));max-height:calc(100% - 90px);overflow:auto;margin:0;box-shadow:0 5px 18px #0008}
.tutorial-guide-heading{display:flex;align-items:center;gap:9px}
.tutorial-seal{display:grid;place-items:center;flex:none;width:35px;height:42px;background:linear-gradient(130deg,#234d39,#092b20);border:2px ridge #b89652;color:#e8c984;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.tutorial-seal .icon{width:24px;height:26px}
.tutorial-guide-heading>div{min-width:0;flex:1}.tutorial-guide .eyebrow{font-size:8px;letter-spacing:.14em;color:var(--antique-muted)}
.tutorial-guide h3{margin:3px 0 0;font:700 20px/1.1 var(--serif);color:var(--antique-ink)}
.tutorial-guide-heading>button{flex:none;min-width:44px;min-height:44px;font:24px var(--serif);color:var(--antique-muted);border:1px solid #99744355;border-radius:50%;background:#f3e9d080}
.tutorial-meter{display:flex;gap:4px;margin:10px 0 0}.tutorial-meter>span{flex:1;height:4px;background:#8f795a40;border:1px solid #99744344}.tutorial-meter>.is-done{background:#315d42}.tutorial-meter>.is-current{background:#b18b47}
.tutorial-guide-body>p{font:12px/1.45 var(--sans);margin:10px 0;color:var(--antique-muted)}
.tutorial-guide-body>.tutorial-wait{display:flex;align-items:center;gap:6px;font-weight:700;color:#315d42}.tutorial-wait .icon{width:17px;height:17px}
.tutorial-guide-body>.tutorial-connection{font-weight:700;color:#852c25}
.tutorial-guide-actions{display:flex;align-items:center;gap:8px;margin-top:13px}.tutorial-guide-actions .primary-button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;min-height:44px;font-size:17px;padding:9px 17px}.tutorial-guide-actions .icon{width:18px;height:18px;flex:none}
.tutorial-skip{min-height:44px;min-width:44px;color:var(--antique-muted);font:600 14px var(--serif);text-decoration:underline;text-underline-offset:3px}
.tutorial-manage{display:block;margin-top:8px;min-height:44px;width:100%;color:#792d25;font:700 13px/1.3 var(--sans);text-decoration:underline}
.tutorial-guide-body>.tutorial-count{margin:7px 0 0;text-align:right;font-size:10px}
.sheet-navigation:has(.tutorial-shortcut:not([hidden])){display:flex;align-items:center;justify-content:space-between;gap:10px}
.tutorial-shortcut.secondary-button{min-width:108px;width:auto;min-height:44px;padding:9px 16px;font-size:15px}
.is-tutorial-target{outline:3px solid #b88a32!important;outline-offset:4px;box-shadow:0 0 0 6px #f6df9c70!important;scroll-margin:25px}
.tutorial-guide :is(button,input):focus-visible,.tutorial-shortcut:focus-visible,.game-modal[data-variant='tutorial'] button:focus-visible{outline:3px solid #80622f;outline-offset:3px}
@media(max-width:560px){
 .game-modal[data-variant='tutorial']{width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-width:12px;border-image-width:12px}
 .game-modal[data-variant='tutorial'] #modal-content{padding:18px}.game-modal[data-variant='tutorial'] .modal-close{width:48px;height:48px;right:0;top:2px}
 .tutorial-intro h3{font-size:24px}.tutorial-roadmap{gap:12px}.tutorial-roadmap li{gap:12px}.tutorial-guide{padding:10px;border-width:8px;border-image-width:8px}.tutorial-guide.is-floating{left:12px;width:calc(100% - 24px)}
 .tutorial-guide h3{font-size:19px}.tutorial-guide-actions .primary-button{font-size:16px}
}
@media(forced-colors:active){.tutorial-guide{border:2px solid CanvasText;border-image:none;background:Canvas;color:CanvasText}.tutorial-meter>span{border-color:CanvasText}.tutorial-meter>.is-done,.tutorial-meter>.is-current{background:Highlight}.tutorial-seal{background:Canvas;color:CanvasText;clip-path:none}.is-tutorial-target{outline-color:Highlight!important}.tutorial-guide h3,.tutorial-guide p,.tutorial-guide .eyebrow,.tutorial-skip,.tutorial-manage{color:CanvasText}}