/* Share the game's portrait, skill and utility sprite atlases. */
.tutOfferBig img.toIcon{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;}

/* ── The coach strip (docs/tutorial-rework-plan.md) ──
   One line in the top HUD band while the fight runs. js/tutorial.js layoutTutorial() places it in
   the free space there and never over the pilot; nothing on it but the line and the step pips. */
#tutBox{position:fixed;top:calc(106px + var(--sat,0px));left:var(--hud-space-2);display:flex;flex-direction:column;gap:var(--hud-space-1);box-sizing:border-box;width:min(420px,calc(100vw - 16px));padding:var(--hud-space-1) var(--hud-space-2) var(--hud-space-2);z-index:8;border:var(--hud-border-width) solid var(--hud-border);pointer-events:auto;}
#tutBox[hidden]{display:none;}
#tutMore{display:flex;align-items:center;gap:var(--hud-space-2);width:100%;min-height:var(--hud-target);margin:0;padding:0;border:0;background:none;color:var(--hud-text);text-align:left;cursor:pointer;touch-action:manipulation;}
#tutMore:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-space-1);}
#tutArt{display:flex;flex:none;align-items:center;image-rendering:pixelated;}
#tutArt:empty{display:none;}
#tutBox.tutNarrow #tutArt{display:none;}
#tutArt :is(.heroPortrait,.hudSprite,.skillIcon){width:30px;height:30px;}
#tutArt .heroPortrait{border:var(--hud-border-width) solid var(--hud-border);}
#tutLine{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:700 var(--hud-text-body)/1.25 var(--hud-font-body);letter-spacing:0;color:var(--hud-text);overflow-wrap:anywhere;}
.tutInfo{flex:none;display:grid;place-items:center;width:22px;height:22px;border:var(--hud-border-width) solid var(--hud-border);border-radius:50%;font:700 var(--hud-text-xs)/1 var(--hud-font-label);color:var(--hud-accent);}
#tutPips{display:flex;gap:3px;}
#tutPips:empty{display:none;}
#tutPips i{flex:1;height:4px;background:var(--hud-border-subtle);}
#tutPips i.done{background:var(--hud-accent);}
#tutPips i.now{background:var(--hud-text-muted);animation:tutPip 1.2s ease-in-out infinite;}
@keyframes tutPip{50%{opacity:.35;}}
/* A finished step is a beat, not a dialog: the strip flashes and the next line takes its place. */
#tutBox.tutDone{animation:tutDone .6s ease-out;}
@keyframes tutDone{0%{box-shadow:0 0 0 0 var(--hud-accent);border-color:var(--hud-accent);}100%{box-shadow:0 0 0 10px transparent;}}
#tutBox[data-urgent="true"]{border-color:var(--hud-danger);}
#tutBox[data-urgent="true"] #tutLine{color:var(--hud-danger);}
#tutBox[data-urgent="true"] #tutPips{display:none;}
body.tutorial-active #objectiveHint{display:none;}

/* ── The ghost thumb: the first step shows the gesture instead of naming it. ── */
#tutThumb{position:fixed;left:50%;bottom:calc(20% + var(--sab,0px));width:84px;height:120px;margin-left:-42px;z-index:7;pointer-events:none;}
#tutThumb[hidden]{display:none;}
#tutThumb::before{content:"";position:absolute;left:50%;bottom:0;width:2px;height:100%;margin-left:-1px;background:linear-gradient(to top,var(--hud-accent),transparent);opacity:.5;}
#tutThumb i{position:absolute;left:50%;bottom:0;width:44px;height:44px;margin:0 0 -22px -22px;border:3px solid var(--hud-accent);border-radius:50%;background:color-mix(in srgb,var(--hud-accent) 25%,transparent);animation:tutThumb 1.6s ease-in-out infinite;}
@keyframes tutThumb{0%{transform:translateY(0) scale(.9);opacity:0;}15%{opacity:1;transform:translateY(0) scale(1);}70%{transform:translateY(-96px);opacity:1;}100%{transform:translateY(-96px);opacity:0;}}

/* ── The spotlight: a paused beat for the few things the world cannot show by itself. ── */
#tutSpot{position:fixed;inset:0;z-index:30;cursor:pointer;touch-action:none;
  background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),transparent var(--spot-r,60px),rgba(4,3,8,.78) calc(var(--spot-r,60px) + 4px));}
#tutSpot[hidden]{display:none;}
#tutSpot::before{content:"";position:absolute;left:var(--spot-x,50%);top:var(--spot-y,50%);width:calc(var(--spot-r,60px) * 2);height:calc(var(--spot-r,60px) * 2);transform:translate(-50%,-50%);border:3px solid var(--hud-accent);border-radius:50%;box-sizing:border-box;animation:tutSpotRing 1.2s ease-in-out infinite;}
@keyframes tutSpotRing{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.6;}}
#tutSpotCard{position:absolute;box-sizing:border-box;max-width:420px;padding:var(--hud-space-3);border:var(--hud-border-width) solid var(--hud-accent);background:var(--hud-surface-overlay);text-align:center;}
#tutSpotText{margin:0;font:700 var(--hud-text-count)/1.3 var(--hud-font-body);color:var(--hud-text);}
#tutSpotGo{display:block;margin-top:var(--hud-space-2);font:700 var(--hud-text-xs)/1 var(--hud-font-label);letter-spacing:.08em;color:var(--hud-accent);animation:tutPip 1.4s ease-in-out infinite;}

/* ── The lesson sheet: the long text, the feature tour and "tips off", with a solo match paused. ── */
#tutSheet{position:fixed;inset:0;z-index:29;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(var(--hud-space-4) + var(--sat,0px)) calc(var(--hud-space-4) + var(--sar,0px)) calc(var(--hud-space-4) + var(--sab,0px)) calc(var(--hud-space-4) + var(--sal,0px));background:rgba(4,3,8,.62);}
#tutSheet[hidden]{display:none;}
#tutSheetCard{display:flex;flex-direction:column;box-sizing:border-box;width:min(480px,100%);max-height:100%;overflow:auto;padding:var(--hud-space-3);background:var(--hud-surface-overlay);border-color:var(--hud-border);}
#tutSheet .tbRow{display:flex;align-items:flex-start;gap:var(--hud-space-3);}
.tutCopy{flex:1;min-width:0;overflow-wrap:anywhere;}
#tutTitle{display:block;font:700 var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);color:var(--hud-accent);}
#tutText{margin:var(--hud-space-1) 0 0;font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);letter-spacing:0;color:var(--hud-text);}
#tutSheetArt{display:flex;gap:var(--hud-space-1);flex:none;align-items:center;image-rendering:pixelated;}
#tutSheetArt :is(.heroPortrait,.hudSprite){width:46px;height:46px;}
#tutSheetArt>.skillIcon{width:46px;height:46px;}
#tutSheetArt .heroPortrait{border:var(--hud-border-width) solid var(--hud-border);}
.tutCore{display:block;width:54px;height:54px;background:url('../assets/world/thrones.png') 0 0/300% 300%;}
.tutActions{display:flex;flex:none;align-items:center;justify-content:flex-end;gap:var(--hud-space-2);margin-top:var(--hud-space-3);flex-wrap:wrap;}
#tutProgress{margin-right:auto;font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
#tutSheet button[hidden]{display:none;}
#tutSheet .btn{min-height:var(--hud-target);font:700 var(--hud-text-xs)/var(--hud-leading) var(--hud-font-body);}
#tutClose{color:var(--hud-text-on-accent);background:var(--hud-accent);border-color:var(--hud-accent);}
#tutSheet button:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-space-1);}

/* ── A feature card on the results screen, one per match (Archero-style: meta is taught between runs). ── */
.tutFeatureCard{display:flex;gap:var(--hud-space-3);align-items:flex-start;padding:var(--hud-space-3);text-align:left;}
.tutFeatureCard .hudSprite{width:40px;height:40px;flex:none;image-rendering:pixelated;}
.tutFeatureCard b{display:block;font:700 var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);color:var(--hud-accent);}
.tutFeatureCard b em{font-style:normal;margin-right:var(--hud-space-2);padding:0 var(--hud-space-1);background:var(--hud-danger);color:var(--hud-text);}
.tutFeatureCard p{margin:var(--hud-space-1) 0 0;font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text);}

/* A 320px phone squeezes the strip beside the pilot: a smaller line still says all of it. */
@media(max-width:360px){#tutLine{font-size:var(--hud-text-sm);}}
@media(prefers-reduced-motion:reduce){
  #tutPips i.now,#tutBox.tutDone,#tutThumb i,#tutSpot::before,#tutSpotGo{animation:none;}
  #tutThumb i{transform:translateY(-48px);}
}