/* Share the game's portrait, skill and utility sprite atlases. */
.tutOfferBig img.toIcon{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;}
#tutBox{position:fixed;display:flex;flex-direction:column;box-sizing:border-box;top:106px;width:min(480px,calc(100vw - 32px));padding:var(--hud-space-3);z-index:8;background:var(--hud-surface-panel);border-color:var(--hud-border);}
#tutBox[hidden]{display:none;}
#tutBar{margin-bottom:10px;flex:none;width:calc(100% - 40px);}
#tutBarFill{transition:width var(--hud-motion-fast);}
#tutBox button[hidden]{display:none;}
#tutBox .tbRow{align-items:flex-start;gap:var(--hud-space-3);min-height:0;flex-shrink:0;}
#tutBox{overflow:auto;}
#tutToggle{position:absolute;right:8px;top:4px;width:36px;height:36px;border:1px solid #7295b4;background:#101725;color:#e0ebf8;font:22px Arial,sans-serif;}
#tutTitle{display:block;padding-right:30px;}
#tutBox.tutCollapsed .tbRow,#tutBox.tutCollapsed #tutClose{display:none;}
#tutBox.tutCollapsed .tutActions{margin-top:20px;}
.tutCopy{flex:1;min-width:0;overflow-wrap:anywhere;}
#tutTitle{font:700 12px/1.3 Silkscreen,monospace;color:#ffdc92;}
#tutText{margin:6px 0 0;font:14px/1.45 Arial,sans-serif;letter-spacing:0;color:#e0ebf8;}
#tutArt{display:flex;gap:5px;flex:none;align-items:center;image-rendering:pixelated;}
#tutArt .heroPortrait,#tutArt .hudSprite{width:46px;height:46px;}
#tutArt .heroPortrait{border:1px solid #4b637d;}
.tutCore{display:block;width:54px;height:54px;background:url('../assets/world/thrones.png') 0 0/300% 300%;}
.tutSkill{display:flex;flex-direction:column;align-items:center;gap:3px;}
.tutSkill .skillIcon{width:30px;height:30px;}
.tutSkill b{font:11px/1 Arial,sans-serif;color:#ffdc92;}
#tutBox[data-step="ability"] .tbRow{flex-direction:column;gap:7px;}
.tutActions{display:flex;flex:none;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap;}
#tutProgress{margin-right:auto;font:11px/1.4 Arial,sans-serif;color:#b7c8df;}
#tutClose,#tutExit{min-height:36px;font:700 10px/1.3 Arial,sans-serif;}
#tutClose{color:#101725;background:#ffdc92;border-color:#ffdc92;}
#tutBox button:focus-visible{outline:2px solid #8fe9ff;outline-offset:3px;}
body.tutorial-active #objectiveHint{display:none;}
body.touch #tutBox{top:calc(214px + var(--sat,0px));width:min(440px,calc(100vw - 24px - var(--sal,0px) - var(--sar,0px)));max-height:calc(100dvh - 400px - var(--sat,0px) - var(--sab,0px));overflow:auto;}
body.tutorial-active #tutBox #banner{position:static;flex:none;transform:none;animation:none;box-sizing:border-box;width:100%;max-width:none;margin:var(--hud-space-2) 0 0;white-space:normal;overflow-wrap:anywhere;}
body.tutorial-active #tutBox #banner:not(.in){display:none;}
body.touch #tutClose,body.touch #tutExit{min-height:44px;min-width:44px;}
body.touch #tutToggle{width:44px;height:44px;}
@media(max-height:560px) and (orientation:landscape){
  body.touch #tutBox{left:calc(50% + 32px);top:calc(65px + var(--sat,0px));width:min(360px,calc(100vw - 430px - var(--sal,0px) - var(--sar,0px)));padding:8px;max-height:calc(100dvh - 90px - var(--sat,0px) - var(--sab,0px));overflow:auto;}
  #tutText{font-size:12px;line-height:1.35;}
  #tutArt .heroPortrait,#tutArt .hudSprite{width:32px;height:32px;}
  #tutTitle{font-size:10px;}
  .tutActions{gap:5px;margin-top:6px;}
  #tutProgress{width:100%;}
}
@media(prefers-reduced-motion:reduce){#tutBarFill{transition:none;}}

#tutFeatures,#tutPrev,#tutNext{min-height:var(--hud-target);font-family:var(--hud-font-body);font-size:var(--hud-text-xs);}
#tutArt>.skillIcon{width:46px;height:46px;}