/* tutorial.css — the orientation panel (top-centre, between the HUD boxes), its progress dots, and the highlight ring.
   z-index 12 sits above the HUD (10) and under the Rolodex (15) and modal (40). Palette and classes follow style.css. */
#tut{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:12;width:min(440px,calc(100vw - 32px));pointer-events:none;transition:opacity .25s,top .25s,bottom .2s}
#tut.dim{opacity:.55}
.tut-card{pointer-events:auto;background:var(--paper);color:var(--ink);border-top:6px solid var(--amber);box-shadow:0 14px 34px rgba(0,0,0,.5);padding:12px 16px 12px;animation:tutin .3s ease}
@keyframes tutin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tut-kicker{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#8a6a2e;margin-bottom:6px}
.tut-kicker span:last-child{color:#6b5a48}
.tut-text{font-size:14px;line-height:1.5}
.tut-text b{color:#241c16}
.tut-text i{font-style:italic;color:#6b5a48}
.tut-text kbd{display:inline-block;background:var(--ink);color:var(--paper);padding:1px 6px;border-radius:3px;font-weight:800;font-size:12px;font-family:inherit;margin:0 1px;vertical-align:baseline;box-shadow:0 1px 0 #000}
.tut-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #cdbfa3}
.tut-dots{display:flex;gap:4px;flex-wrap:wrap}
.tut-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#d9cdb2;border:1px solid #cdbfa3}
.tut-dots i.done{background:var(--amber);border-color:#8a5f1e}
.tut-dots i.cur{background:var(--amber);border-color:#8a5f1e;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--amber);animation:tutdot 1.2s ease-in-out infinite}
@keyframes tutdot{0%,100%{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--amber)}50%{box-shadow:0 0 0 2px var(--paper),0 0 0 4px rgba(224,163,67,.35)}}
.tut-btns{display:flex;gap:6px;flex:none}
.tut-btns .btn{padding:7px 12px;font-size:11px}
.tut-btns .btn.ghost{box-shadow:inset 0 0 0 2px #8a6a2e;color:#8a6a2e}
.tut-btns .btn.ghost:hover{background:rgba(224,163,67,.12)}

/* ring around the element a step points at */
.tut-ring{box-shadow:0 0 0 2px var(--amber),0 0 22px rgba(224,163,67,.55)!important;animation:tutring 1.3s ease-in-out infinite;position:relative;z-index:11}
@keyframes tutring{0%,100%{box-shadow:0 0 0 2px var(--amber),0 0 22px rgba(224,163,67,.55)}50%{box-shadow:0 0 0 4px rgba(224,163,67,.55),0 0 8px rgba(224,163,67,.25)}}

/* Where the card sits, in three cases.

   1. Wide and tall, no conversation: in the gap between the two HUD boxes. Centring it on the window put its right
      edge at x 860 over an objective box that begins at x 834, so its heading read "HIS QUARTER" and "E interact"
      was cut to "eract". The objective box is always 340 px wide and 106 px in from the right edge, so a 462 px
      right inset clears it with 16 px to spare; the status box ends at 314.
   2. Narrow or short: bottom-left, clear of the character (who sits in the lower-middle third of the frame) and of
      the centred interaction prompt. Below 1100 the two HUD boxes leave no gap worth putting a paragraph in.
   3. A conversation is live: the band owns the bottom of the window and the dock the right. The card lifts clear of
      the band — all of it, including its Skip and Next buttons, because the band is z 20 and this card is z 12, so
      any overlap hides the card's own controls behind the conversation. The band's own 16 px bottom margin is in
      the 30. On a short window with a tall band that can carry the card over the lower rows of the status box,
      which is the lesser loss: the stats are still there when the step is done, the buttons would not be. */
@media (min-width:1100px) and (min-height:700px){
  #tut{left:318px;right:calc(462px + var(--tut-dock,0px));width:auto;max-width:440px;transform:none}
}
@media (max-width:1099px),(max-height:699px){
  #tut{top:auto;bottom:14px;left:14px;right:auto;transform:none;width:min(400px,calc(100vw - 28px))}
}
@media (max-width:640px){#tut{top:auto;bottom:14px;left:14px;right:14px;width:auto;transform:none}}
body.dock-open{--tut-dock:var(--dock-w,0px)}
body.band-open #tut{top:auto;bottom:calc(var(--band-h,0px) + 30px);
  left:14px;right:auto;transform:none;width:min(400px,calc(100vw - var(--tut-dock,0px) - 28px));max-width:none}