/* ── Window-title + dock icon: Goop's idle sprite (one-off) ──
 * Used as the window-title and dock icon for /goop soul. Other content
 * windows use lucide SVG icons; this one uses the slime sprite sheet
 * (idle frame, first row, first column). */
.window-icon-slime {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../assets/Slime.png');
  background-repeat: no-repeat;
  /* native sprite sheet is 192x144 with 48x48 frames (4 cols x 3 rows).
     Scale to 1/3 (64x48) so each frame renders at 16x16. */
  background-size: 64px 48px;
  background-position: 0 0;          /* row 1 (idle), col 1 */
  image-rendering: pixelated;
  vertical-align: middle;
  flex-shrink: 0;
}
/* When the icon sits in a dock tile, its parent constrains size.
   Bumped to 32px (vs 16px in the title bar) so it has presence on a 48px tile.
   The slime sprite doesn't fill its 48x48 frame edge-to-edge (he sits on the
   "floor"), so we nudge him up a few px to look centered in the tile. */
.dock-tile .window-icon-slime {
  width: 32px;
  height: 32px;
  background-size: 128px 96px;     /* 2/3 of native = 32px per frame */
  transform: translateY(-3px);
}

/* ── Sprite sheet display (inside /goop soul) ── */
.ep .sprite-sheet {
  display: block;
  width: 100%;
  max-width: 384px;                  /* native 192px sheet × 2 */
  height: auto;
  image-rendering: pixelated;
  margin: 1rem auto;
  padding: 12px;
  background: rgba(var(--speech-tint-r, 111), var(--speech-tint-g, 137), var(--speech-tint-b, 231), 0.10);
  border-radius: 8px;
}
.ep .sprite-caption {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: -.25rem;
  margin-bottom: 1.5rem;
}

/* ── Goop in-OS speech bubble ──
 *
 * Smaller and lighter than the intro bubble. Color is parametric via
 * --speech-tint-* custom properties so future characters can use their
 * own sprite color. Theme-aware (dark/light) with verified WCAG AA+ contrast.
 */

:root {
  /* Goop's defaults — overridable per character via inline style */
  --speech-tint-r: 111;
  --speech-tint-g: 137;
  --speech-tint-b: 231;
}

[data-theme="dark"] {
  --speech-bg:        rgba(107, 130, 214, 0.95);
  --speech-text:      #ffffff;
  --speech-border:    #879ff8;
  --speech-pill-bg:   #4658a0;
  --speech-pill-text: #c9d5f5;
}

[data-theme="light"] {
  --speech-bg:        rgba(199, 211, 245, 0.95);
  --speech-text:      #000000;
  --speech-border:    #6f89e7;
  --speech-pill-bg:   #ebf0ff;
  --speech-pill-text: #000000;
}

/* ── Bubble base ── */
.goop-bubble {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  max-width: 260px;
  /* padding-top clears the nameplate so text doesn't overlap it */
  padding: 19px 13px 9px;
  border: 2px solid var(--speech-border);
  border-radius: 8px;
  background: var(--speech-bg);
  color: var(--speech-text);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.goop-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

.goop-bubble-text {
  margin: 0;
  white-space: pre-line;
}

/* ── Command pills inside Goop's lines (clickable) ── */
.goop-bubble .goop-cmd {
  pointer-events: auto;            /* bubble has none globally; pills opt in */
  cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
  white-space: nowrap;
}
[data-theme="dark"] .goop-bubble .goop-cmd {
  background: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .goop-bubble .goop-cmd:hover {
  background: rgba(255, 255, 255, 0.32);
}
[data-theme="light"] .goop-bubble .goop-cmd {
  background: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .goop-bubble .goop-cmd:hover {
  background: rgba(0, 0, 0, 0.20);
}

/* ── Speaker name pill ── */
.goop-bubble-name {
  position: absolute;
  top: -11px;
  left: 10px;
  font-family: 'Sniglet', 'Comic Sans MS', cursive;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--speech-pill-text);
  background: var(--speech-pill-bg);
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid var(--speech-border);
}

/* ── Arrow (CSS triangle; position set by JS based on placement) ── */
.goop-bubble-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.goop-bubble[data-placement="top"] .goop-bubble-arrow {
  top: 100%;
  border-left:  6px solid transparent;
  border-right: 6px solid transparent;
  border-top:   7px solid var(--speech-border);
}
.goop-bubble[data-placement="bottom"] .goop-bubble-arrow {
  bottom: 100%;
  border-left:   6px solid transparent;
  border-right:  6px solid transparent;
  border-bottom: 7px solid var(--speech-border);
}
.goop-bubble[data-placement="right"] .goop-bubble-arrow {
  right: 100%;
  border-top:    6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right:  7px solid var(--speech-border);
}
.goop-bubble[data-placement="left"] .goop-bubble-arrow {
  left: 100%;
  border-top:    6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left:   7px solid var(--speech-border);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .goop-bubble {
    transition: none;
    transform: none;
  }
  .goop-bubble.visible {
    transform: none;
  }
}