/* ============================================================================
   dialogue.css — the NPC dialogue box (moved from index.html unchanged)
============================================================================ */
/* (2026-07-21, Dexter's reference shot: "no to wide and cover the player")
   Two things were wrong. `bottom:30vh` floated the box a third of the way UP
   the screen — right across the character you are talking to — and 600px of
   width made it a banner. It now sits DOWN at the bottom edge, out of the
   scene, and is narrower so the isle stays the picture. */
#dlg {
  position:absolute; left:50%; bottom:calc(6vh + var(--sab)); transform:translateX(-50%);
  width:min(520px, calc(100vw - 24px)); z-index:30;
  display:none; cursor:pointer;
}
#dlg .name-tag {
  position:absolute; top:-16px; left:22px; z-index:2;
  font-family:var(--font-display); font-weight:800; font-size:15px;
  background:var(--forest-600); color:var(--cream-50);
  padding:6px 16px; border-radius:999px; box-shadow:var(--pop-sm);
}
#dlg .body {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:18px 16px 16px; border-radius:22px; min-height:86px;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
#dlg .body.pulse { transform:scale(1.025); }
#dlg .portrait {
  flex:0 0 58px; width:58px; height:58px; border-radius:50%;
  background:var(--cream-200); border:2px solid rgb(43 32 25 / .18);
  overflow:hidden; box-shadow:var(--pop-sm);
}
#dlg .portrait svg { width:100%; height:100%; display:block; }
/* (2026-07-21, Dexter: "Give Something button ... keep moving while dialogue
   running as it should track stay still") The typewriter used to shuffle the
   button: the text was `flex:1 1 auto`, so its BASIS was its content, and
   every character added re-solved the row and pushed the button along. The
   first fix was to give the actions their own wrapped row — which worked, but
   his reference shot wants the button back INLINE at the right.

   `flex:1 1 0` is what makes both possible: a zero basis means the text takes
   whatever space is left over regardless of how much text there is, so the
   button's position is decided by the ROW, not by the sentence. It types
   without anything moving. The reserved min-height keeps vertical growth from
   nudging things too. */
/* min-width is load-bearing, not cosmetic: with a 0 basis and no floor the
   text happily collapses to a sliver and wraps into a dozen lines rather than
   letting the button move — measured 468px tall on a 375px screen. The floor
   is what makes the row WRAP (button drops below) instead of squeezing. */
#dlg .text {
  flex:1 1 0; min-width:min(230px, 100%);
  font-size:16.5px; font-weight:700; line-height:1.45; padding-top:3px;
  min-height:66px;   /* ≈3 lines at this size — the common case, measured */
}
#dlg .next {
  position:absolute; right:16px; bottom:10px; font-size:16px; color:var(--forest-600);
  animation:nextbob 1s ease-in-out infinite; font-family:var(--font-display); font-weight:800;
}
@keyframes nextbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---- small screens tune ------------------------------------------------------ */
@media (max-width:520px){
  #dlg { bottom:calc(5vh + var(--sab)); }
  #dlg .text { font-size:15.5px; min-height:60px; }
  /* the wrap is automatic now (the text's min-width forces it) — this just
     lines the dropped button up under the text rather than under the portrait */
  #dlg .body { align-items:flex-start; }
  .dlg-actions { flex-direction:row; margin-left:72px; }
}

/* ---- (2026-07-21) conversation verbs — "Give something" and friends ----
   A row inside the dialogue box, because handing a thing to somebody is part
   of talking to them, not an inventory operation (Dexter's direction). */
.dlg-actions {
  display:flex; gap:8px; flex-direction:column;
  flex:0 0 auto; align-self:center;   /* inline at the right, per the reference shot */
}
.dlg-actions:empty { display:none; }
.dlg-act {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--earth-800);
  background:linear-gradient(180deg, var(--gold-300), var(--gold-400));
  border:2px solid var(--earth-800); border-radius:13px; padding:8px 16px;
  box-shadow:0 3px 0 0 var(--gold-600);
}
.dlg-act:active { transform:translateY(2px); box-shadow:0 1px 0 0 var(--gold-600); }