/* ============================================================================
   claudia-bubbles.css  ·  The Japanese Gengo — "gengo dialogue windows"
   The floating speech-bubble style from the SparkleSnap gengo-sol rooms, themed
   per character. Static-safe for the book; shines in the interactive Web Modules.
   Link AFTER claudia-gengo-core.css. Author: Ms. Claudia · for Cezar Borgkrans.
   ========================================================================== */

.bubble-field { position: relative; display: flex; flex-direction: column; gap: 16px; margin: 12px 0; }

.gengo-bubble {
  position: relative; align-self: flex-start; max-width: 68%;
  padding: 13px 16px;
  border: 1.5px solid var(--bub-line, rgba(45,41,38,.22));
  border-radius: 22px 22px 22px 8px;
  background: var(--bub-bg, #fff);
  box-shadow: 0 12px 28px rgba(45,41,38,.10);
  color: var(--ink);
  font-family: var(--f-body); font-weight: 700; font-size: 1rem; line-height: 1.45;
}
.gengo-bubble strong {
  display: block; margin-bottom: 5px;
  font-family: var(--f-mono); font-weight: 800; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bub-name, var(--ink-soft));
}
.gengo-bubble::after {           /* speech tail, bottom-left */
  content: ""; position: absolute; bottom: -8px; left: 22px; width: 16px; height: 16px;
  background: var(--bub-bg, #fff);
  border-left: 1.5px solid var(--bub-line, rgba(45,41,38,.22));
  border-bottom: 1.5px solid var(--bub-line, rgba(45,41,38,.22));
  border-radius: 0 0 0 14px; transform: rotate(-22deg);
}
/* right-aligned variant (tail bottom-right) */
.gengo-bubble.right { align-self: flex-end; border-radius: 22px 22px 8px 22px; }
.gengo-bubble.right::after {
  left: auto; right: 22px;
  border-left: 0; border-bottom: 1.5px solid var(--bub-line, rgba(45,41,38,.22));
  border-right: 1.5px solid var(--bub-line, rgba(45,41,38,.22));
  border-radius: 0 0 14px 0; transform: rotate(22deg);
}
/* a small Japanese line can sit inside a bubble */
.gengo-bubble .jp-main { font-size: 1.2rem; }
.gengo-bubble .romaji { font-weight: 400; }

/* ---- per-character themes (matches the gengo-sol room palette) ---- */
.b-sol     { --bub-bg: #fbf1de; --bub-line: rgba(201,111,47,.45); --bub-name: #7d3824; }
.b-tsuki   { --bub-bg: #e7f8f2; --bub-line: rgba(0,166,184,.45);  --bub-name: #0e9488; }
.b-selene  { --bub-bg: #f2ecfd; --bub-line: rgba(109,40,217,.40); --bub-name: #6d28d9; }
.b-marina  { --bub-bg: #fff0f4; --bub-line: rgba(190,18,60,.40);  --bub-name: #be123c; }
.b-fuku    { --bub-bg: #f1ece2; --bub-line: rgba(125,90,60,.45);  --bub-name: #7a5a3c; }
.b-claudia { --bub-bg: #ffffff; --bub-line: rgba(187,30,44,.40);  --bub-name: #bb1e2c; }