/*!
 * Prayer Dome — Cartoon Host ("Domey") styles
 * ---------------------------------------------------------------------------
 * One shared, self-contained cartoon character used by the Faith Journey game
 * (game.html) and the Live page waiting room (live.html). Everything here is
 * drawn with CSS + inline SVG so it works offline, on a cold start, on a slow
 * phone, and inside the Android WebView without a single image download.
 *
 *   .pd-mascot                 root scope (all tokens live here)
 *   .pdm-stage / .pdm-char     the cartoon stage and the animated character
 *   .pdm-bubble                speech bubble + captions (aria-live)
 *   .pdm-chips / .pdm-answer   quick replies and typed answers
 *   .pdm-bar                   voice / mic / repeat controls
 *   .pdm-hud                   round + score display
 *
 * Character states are set with `data-pdm-state` on the root:
 *   idle | speaking | listening | thinking | happy | celebrating |
 *   encouraging | praying
 *
 * Motion respects `prefers-reduced-motion`; the character simply stops
 * animating (expressions and captions still change) for members who ask the
 * operating system for less movement.
 */

.pd-mascot {
  --pdm-skin: #f2c69a;
  --pdm-skin-shade: #dda878;
  --pdm-hair: #38251c;
  --pdm-robe: #0A4D9B;
  --pdm-robe-deep: #07244d;
  --pdm-gold: #d4af37;
  --pdm-gold-soft: #f6df8a;
  --pdm-ink: #16233b;
  --pdm-cheek: #f2958c;
  --pdm-stage-1: #123a6c;
  --pdm-stage-2: #061a33;
  --pdm-stage-3: #0A4D9B;
  --pdm-bubble-bg: #ffffff;
  --pdm-bubble-fg: #12233c;
  --pdm-bubble-line: rgba(15, 42, 82, .12);
  --pdm-surface: rgba(255, 255, 255, .07);
  --pdm-surface-line: rgba(255, 255, 255, .16);
  --pdm-surface-fg: #eaf2ff;
  --pdm-focus: #f0d060;

  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 26px);
  align-items: center;
  width: 100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--pdm-surface-fg);
  -webkit-tap-highlight-color: transparent;
}

body.dark-mode .pd-mascot,
html[data-pd-theme="dark"] .pd-mascot {
  --pdm-stage-1: #0d2a52;
  --pdm-stage-2: #04101f;
  --pdm-bubble-bg: #101d33;
  --pdm-bubble-fg: #eaf2ff;
  --pdm-bubble-line: rgba(148, 163, 184, .24);
}

body.light-mode .pd-mascot {
  --pdm-surface: rgba(10, 77, 155, .06);
  --pdm-surface-line: rgba(10, 77, 155, .16);
  --pdm-surface-fg: #12233c;
  --pdm-bubble-bg: #ffffff;
  --pdm-bubble-fg: #12233c;
}

/* ============================== STAGE ==================================== */

.pdm-stage {
  position: relative;
  aspect-ratio: 11 / 13;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%, rgba(212, 175, 55, .35), transparent 62%),
    linear-gradient(168deg, var(--pdm-stage-1) 0%, var(--pdm-stage-2) 78%);
  box-shadow: 0 22px 60px rgba(5, 18, 40, .34), inset 0 0 0 1px rgba(255, 255, 255, .07);
  isolation: isolate;
}

.pdm-stage::before {
  /* Curtains: two vertical folds, kept behind the character. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(4, 14, 30, .55) 0 10px, rgba(10, 34, 66, .25) 10px 26px),
    linear-gradient(180deg, rgba(4, 14, 30, .78), transparent 62%);
  clip-path: polygon(0 0, 22% 0, 16% 100%, 0 100%);
  opacity: .9;
  z-index: 1;
  pointer-events: none;
}

.pdm-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(4, 14, 30, .55) 0 10px, rgba(10, 34, 66, .25) 10px 26px),
    linear-gradient(180deg, rgba(4, 14, 30, .78), transparent 62%);
  clip-path: polygon(78% 0, 100% 0, 100% 100%, 84% 100%);
  opacity: .9;
  z-index: 1;
  pointer-events: none;
}

.pdm-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(212, 175, 55, .30), transparent 70%),
    linear-gradient(180deg, rgba(4, 16, 34, .05), rgba(3, 12, 26, .82));
  z-index: 2;
}

.pdm-spot {
  position: absolute;
  left: 50%;
  top: -14%;
  width: 82%;
  height: 86%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(255, 236, 176, .30), rgba(255, 236, 176, .06) 55%, transparent 72%);
  filter: blur(2px);
  animation: pdm-spot-sway 9s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

.pdm-halo {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 62%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px dashed rgba(246, 223, 138, .5);
  background: radial-gradient(circle at 50% 60%, rgba(246, 223, 138, .22), transparent 68%);
  animation: pdm-halo-spin 26s linear infinite;
  z-index: 2;
  pointer-events: none;
}

.pdm-listen-ring {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 46%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 3px solid rgba(246, 223, 138, .0);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.pd-mascot[data-pdm-state="listening"] .pdm-listen-ring {
  opacity: 1;
  animation: pdm-ring 1.5s ease-out infinite;
}

.pdm-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.pdm-hud[hidden] { display: none; }

.pdm-hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(4, 16, 34, .62);
  border: 1px solid rgba(246, 223, 138, .32);
  color: #f6df8a;
  backdrop-filter: blur(6px);
}

.pdm-hud-chip.good { color: #b9f6ca; border-color: rgba(185, 246, 202, .42); }
.pdm-hud-chip.warn { color: #ffd8a8; border-color: rgba(255, 216, 168, .42); }

.pdm-dots {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.pdm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform .25s ease, background .25s ease;
}

.pdm-dot.is-correct { background: #4ade80; transform: scale(1.22); }
.pdm-dot.is-wrong { background: #fb923c; transform: scale(1.22); }
.pdm-dot.is-current { background: #f6df8a; animation: pdm-pulse 1.4s ease-in-out infinite; }

/* ============================ CHARACTER ================================== */

.pdm-char-wrap {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 84%;
  transform: translateX(-50%);
  z-index: 3;
  animation: pdm-float 4.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* ======================= 3D CHARACTER (pd-domey3d.js) =====================
   The three-dimensional Domey is a WebGL canvas living on the same stage as
   the drawing: the stylesheet's spot, halo and floor stay behind him, so the
   only thing that changes is that the character itself has depth, real
   lighting and a mouth that moves in three dimensions. The SVG character is
   hidden (not removed) so a lost WebGL context can bring it straight back. */

.pd-mascot.pdm-render-3d .pdm-char-wrap {
  display: none;
}

.pdm-canvas3d {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  touch-action: pan-y;
}

.pd-mascot.pdm-render-3d .pdm-spot,
.pd-mascot.pdm-render-3d .pdm-halo {
  opacity: .8;
}

/* Reduced motion still shows the 3D character — talking is the point — but the
   engine is told to damp the decorative sway, and the CSS float is dropped. */
@media (prefers-reduced-motion: reduce) {
  .pd-mascot.pdm-render-3d .pdm-char-wrap { animation: none; }
}

.pdm-char {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 26px rgba(3, 11, 24, .42));
}

.pdm-shadow { fill: rgba(3, 11, 24, .34); animation: pdm-shadow 4.4s ease-in-out infinite; }

/* The robe, face, hair, iris and book cover are painted with the gradients
   declared inside the character SVG itself, so the stylesheet must NOT set a
   flat `fill` on them: a CSS declaration beats a presentation attribute, and
   the character would lose all of its shading. */
.pdm-robe-light { opacity: .8; }
.pdm-robe-fold { fill: none; stroke: #06356f; stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.pdm-robe-hem { fill: none; stroke: #06356f; stroke-width: 2.6; stroke-linecap: round; opacity: .5; }
.pdm-robe-trim { fill: none; stroke: var(--pdm-gold); stroke-width: 3.5; stroke-linejoin: round; }
.pdm-sash { fill: var(--pdm-gold); opacity: .92; }
.pdm-sash-knot { fill: var(--pdm-gold); }
.pdm-sash-knot + .pdm-sash-tail,
.pdm-sash-tail { fill: none; stroke: var(--pdm-gold); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.pdm-leg { fill: #1b3a63; }
.pdm-shoe { fill: #101d33; }
.pdm-skin { fill: var(--pdm-skin); }
.pdm-skin-shade { fill: var(--pdm-skin-shade); }

.pdm-neck-shade { fill: var(--pdm-skin-shade); opacity: .75; }


.pdm-hair-lock { fill: #6f4c38; }
.pdm-face-light { fill: #ffffff; opacity: .13; }
.pdm-face-side { fill: var(--pdm-skin-shade); opacity: .2; }
.pdm-face-shade { fill: #b8804f; opacity: .22; }
.pdm-ear { fill: var(--pdm-skin-shade); }
.pdm-eye-white { fill: #ffffff; }

.pdm-pupil { fill: #1b2436; }
.pdm-glint { fill: #ffffff; opacity: .92; }
.pdm-glint-sm { opacity: .55; }
.pdm-lash { fill: none; stroke: var(--pdm-hair); stroke-width: 2.6; stroke-linecap: round; opacity: .8; }
.pdm-lid { fill: var(--pdm-skin); opacity: 0; }
.pdm-brow { fill: none; stroke: var(--pdm-hair); stroke-width: 5.4; stroke-linecap: round; }
.pdm-nose { fill: none; stroke: var(--pdm-skin-shade); stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
.pdm-nose-shade { fill: none; stroke: var(--pdm-skin-shade); stroke-width: 2.4; stroke-linecap: round; opacity: .5; }
.pdm-cheek { fill: var(--pdm-cheek); opacity: .32; }
.pdm-mouth { fill: none; stroke: #7b2f2a; stroke-width: 5; stroke-linecap: round; }
.pdm-mouth-fill { fill: #7b2f2a; stroke: none; }
/* speaking mouths: cavity, teeth and tongue, revealed one viseme at a time */
.pdm-mouth-cavity { fill: #5c1f22; }
.pdm-lip-fill { fill: #8d4038; }
.pdm-lip { fill: none; stroke: #8d4038; stroke-width: 3.2; stroke-linecap: round; }
.pdm-teeth { fill: #fdf6e3; }
.pdm-tongue { fill: #c4626a; }

.pdm-book-page { fill: #fdf6e3; }
.pdm-book-lines { fill: none; stroke: #d8cbaa; stroke-width: 1.4; }
.pdm-book-cross { fill: none; stroke: var(--pdm-gold-soft); stroke-width: 4; stroke-linecap: round; }
.pdm-emblem { fill: none; stroke: var(--pdm-gold); stroke-width: 3.4; stroke-linecap: round; }
.pdm-hand { fill: var(--pdm-skin); }
.pdm-fingers { fill: none; stroke: var(--pdm-skin-shade); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.pdm-finger { stroke: var(--pdm-skin-shade); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.pdm-sleeve-light { pointer-events: none; }
.pdm-glow-pool { opacity: .5; pointer-events: none; }
/* the hand microphone, only visible when Domey is listening to you */
.pdm-prop { opacity: 0; transition: opacity .2s ease; }
.pdm-prop-mic { transform-box: fill-box; transform-origin: 50% 100%; }
.pdm-mic-body { fill: #223046; }
.pdm-mic-grille { fill: #0f1726; stroke: #8fb6e8; stroke-width: 1.6; }
.pdm-mic-band { fill: none; stroke: var(--pdm-gold); stroke-width: 2; }
.pdm-mic-stem { fill: #223046; }
.pdm-sparkle { fill: var(--pdm-gold-soft); opacity: 0; transform-origin: center; }

.pdm-arm-r,
.pdm-arm-l { transform-box: fill-box; transform-origin: 84% 10%; }
.pdm-arm-l { transform-origin: 16% 10%; }

.pdm-head,
.pdm-hair-group,
.pdm-brows,
.pdm-mouths,
.pdm-eyes { transform-box: fill-box; }

.pdm-head { transform-origin: 50% 90%; }

/* --- expressions: one mouth / brow shape at a time --- */
.pdm-mouths .pdm-mouth { opacity: 0; transition: opacity .16s ease; }
.pd-mascot[data-pdm-state="idle"] .pdm-mouth-smile,
.pd-mascot[data-pdm-state="listening"] .pdm-mouth-smile,
.pd-mascot[data-pdm-state="happy"] .pdm-mouth-smile,
.pd-mascot[data-pdm-state="celebrating"] .pdm-mouth-smile,
.pd-mascot[data-pdm-state="encouraging"] .pdm-mouth-smile { opacity: 1; }

.pd-mascot[data-pdm-state="speaking"] .pdm-mouth-open { opacity: 1; }
.pd-mascot[data-pdm-state="thinking"] .pdm-mouth-think { opacity: 1; }
.pd-mascot[data-pdm-state="praying"] .pdm-mouth-pray { opacity: 1; }

.pd-mascot[data-pdm-state="happy"] .pdm-cheek,
.pd-mascot[data-pdm-state="celebrating"] .pdm-cheek { opacity: .55; }

/* --- speaking: the viseme mouth ------------------------------------------
   While Domey speaks, the fixed expression mouths step aside and the lip-sync
   engine picks a mouth posture per syllable through `data-pdm-vis`. A browser
   without the engine (rare) falls back to the single flapping open mouth. */
.pdm-visemes .pdm-vis { opacity: 0; transition: opacity .055s linear; }
.pd-mascot[data-pdm-vis="rest"] .pdm-vis-rest,
.pd-mascot[data-pdm-vis="M"] .pdm-vis-M,
.pd-mascot[data-pdm-vis="F"] .pdm-vis-F,
.pd-mascot[data-pdm-vis="E"] .pdm-vis-E,
.pd-mascot[data-pdm-vis="I"] .pdm-vis-I,
.pd-mascot[data-pdm-vis="A"] .pdm-vis-A,
.pd-mascot[data-pdm-vis="O"] .pdm-vis-O,
.pd-mascot[data-pdm-vis="U"] .pdm-vis-U,
.pd-mascot[data-pdm-vis="L"] .pdm-vis-L { opacity: 1; }

.pdm-mouths,
.pdm-visemes { transform-box: fill-box; transform-origin: 50% 12%; transition: opacity .12s ease; }
.pdm-visemes { transform: translateY(calc(var(--pdm-jaw, 0) * 1.1px)); }

/* While the lip-sync engine owns the mouth (`data-pdm-vis` present — see the
   viseme rules above), the fixed expression mouths step aside. When it lets go,
   the mood takes the mouth back: the smile, the pout, the praying lips. */
.pd-mascot[data-pdm-vis] .pdm-mouths { opacity: 0; }
/* A browser with no speech engine still gets a talking mouth, not a frozen one. */
.pd-mascot[data-pdm-state="speaking"]:not([data-pdm-vis]) .pdm-mouth-open { opacity: 1; }
.pd-mascot[data-pdm-state="speaking"]:not([data-pdm-vis]) .pdm-mouth-open {
  transform-box: fill-box;
  transform-origin: 50% 20%;
  animation: pdm-talk var(--pdm-talk-speed, .17s) steps(2, end) infinite;
}
.pd-mascot[data-pdm-state="speaking"] .pdm-head { animation: pdm-head-talk .5s ease-in-out infinite; }
.pd-mascot[data-pdm-state="speaking"] .pdm-char-wrap { animation: pdm-float-talk 1.1s ease-in-out infinite; }

/* --- eyes that follow the member's pointer -------------------------------- */
.pdm-gaze {
  transform: translate(var(--pdm-gaze-x, 0px), var(--pdm-gaze-y, 0px));
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  transform-box: fill-box;
}
.pd-mascot[data-pdm-state="idle"] .pdm-head { transform: rotate(var(--pdm-head-yaw, 0deg)); transition: transform .5s ease; }

/* --- thinking: eyes up, one brow raised --- */
.pd-mascot[data-pdm-state="thinking"] .pdm-eyes { transform: translateY(-3px); }
.pd-mascot[data-pdm-state="thinking"] .pdm-brow-r { transform: translateY(-4px); }
.pd-mascot[data-pdm-state="thinking"] .pdm-head { transform: rotate(-3deg); }

/* --- listening: head tilt + brows up, warm attention --- */
.pd-mascot[data-pdm-state="listening"] .pdm-head { transform: rotate(4deg); }
.pd-mascot[data-pdm-state="listening"] .pdm-brows { transform: translateY(-3px); }
.pd-mascot[data-pdm-state="listening"] .pdm-brow-r { transform: translateY(-2px); }

/* --- celebrating: arms up, jump, sparkles --- */
.pd-mascot[data-pdm-state="celebrating"] .pdm-arm-l { animation: pdm-arm-up-l .6s ease-in-out infinite alternate; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-arm-r { animation: pdm-arm-up-r .6s ease-in-out infinite alternate; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-char-wrap { animation: pdm-jump .62s ease-in-out infinite; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-sparkle { animation: pdm-sparkle 1.05s ease-in-out infinite; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-sparkle:nth-child(2) { animation-delay: .22s; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-sparkle:nth-child(3) { animation-delay: .44s; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-sparkle:nth-child(4) { animation-delay: .66s; }

/* --- happy: gentle wave hello --- */
.pd-mascot[data-pdm-state="happy"] .pdm-arm-r { animation: pdm-wave .95s ease-in-out infinite; }

/* --- encouraging: soft nod, hand of comfort --- */
.pd-mascot[data-pdm-state="encouraging"] .pdm-head { animation: pdm-nod 2.6s ease-in-out infinite; }
.pd-mascot[data-pdm-state="encouraging"] .pdm-arm-l { animation: pdm-comfort 3.2s ease-in-out infinite; }

/* --- praying: hands together, still head --- */
.pd-mascot[data-pdm-state="praying"] .pdm-arm-l { transform: rotate(-26deg) translate(6px, -2px); }
.pd-mascot[data-pdm-state="praying"] .pdm-arm-r { transform: rotate(26deg) translate(-6px, -2px); }
.pd-mascot[data-pdm-state="praying"] .pdm-char-wrap { animation: pdm-float 6s ease-in-out infinite; }

/* --- idle blink loop (all states except closed-eye praying) --- */
.pdm-eyes .pdm-lid { animation: pdm-blink 5.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.pd-mascot[data-pdm-state="praying"] .pdm-eyes .pdm-lid { opacity: 1; animation: none; }
.pd-mascot[data-pdm-state="celebrating"] .pdm-eyes .pdm-lid { animation-duration: 3.2s; }
.pdm-eye .pdm-lid { animation-delay: var(--pdm-blink-delay, 0s); }

/* ============================== ACTIONS ==================================
   Short, readable performances: a wave hello, a pointed finger, counting on
   the fingers, a shrug, a clap, hands on the heart, a dance. Each one is a
   class on the root, played for as long as the host leaves it there. */

.pdm-act-wave .pdm-arm-r { animation: pdm-g-wave 1.15s ease-in-out 1; }
.pdm-act-wave .pdm-head { animation: pdm-g-hail 1.15s ease-in-out 1; }
.pdm-act-wave .pdm-cheek { opacity: .5; }

.pdm-act-point .pdm-arm-r { animation: pdm-g-point 1.05s ease-in-out 1; }
.pdm-act-point .pdm-head { animation: pdm-g-lean-r 1.05s ease-in-out 1; }
.pdm-act-point .pdm-brow-r { transform: translateY(-3px); }

.pdm-act-open .pdm-arm-l { animation: pdm-g-open-l 1.3s ease-in-out 1; }
.pdm-act-open .pdm-arm-r { animation: pdm-g-open-r 1.3s ease-in-out 1; }
.pdm-act-open .pdm-brows { transform: translateY(-2px); }

.pdm-act-offer .pdm-arm-l { animation: pdm-g-offer-l 1.2s ease-in-out 1; }
.pdm-act-offer .pdm-arm-r { animation: pdm-g-offer-r 1.2s ease-in-out 1; }
.pdm-act-offer .pdm-head { animation: pdm-g-nod-soft 1.2s ease-in-out 1; }

.pdm-act-count .pdm-arm-l { animation: pdm-g-count 1.1s ease-in-out 1; }
.pdm-act-count .pdm-head { animation: pdm-g-nod-soft 1.1s ease-in-out 1; }

.pdm-act-thumb .pdm-arm-r { animation: pdm-g-thumb 1.15s ease-in-out 1; }
.pdm-act-thumb .pdm-cheek { opacity: .55; }

.pdm-act-raise .pdm-arm-l { animation: pdm-g-up-l 1.25s ease-in-out 1; }
.pdm-act-raise .pdm-arm-r { animation: pdm-g-up-r 1.25s ease-in-out 1; }
.pdm-act-raise .pdm-char-wrap { animation: pdm-jump 1.25s ease-in-out 1; }

.pdm-act-shrug .pdm-arm-l { animation: pdm-g-shrug-l 1.2s ease-in-out 1; }
.pdm-act-shrug .pdm-arm-r { animation: pdm-g-shrug-r 1.2s ease-in-out 1; }
.pdm-act-shrug .pdm-head { animation: pdm-g-tilt 1.2s ease-in-out 1; }

.pdm-act-clap .pdm-arm-l { animation: pdm-g-clap-l .34s ease-in-out 4; }
.pdm-act-clap .pdm-arm-r { animation: pdm-g-clap-r .34s ease-in-out 4; }
.pdm-act-clap .pdm-cheek { opacity: .6; }
.pdm-act-clap .pdm-mouths { opacity: 0; }

.pdm-act-heart .pdm-arm-l { animation: pdm-g-heart-l 1.5s ease-in-out 1; }
.pdm-act-heart .pdm-arm-r { animation: pdm-g-heart-r 1.5s ease-in-out 1; }
.pdm-act-heart .pdm-head { animation: pdm-g-tilt 1.5s ease-in-out 1; }
.pdm-act-heart .pdm-cheek { opacity: .6; }

.pdm-act-think .pdm-arm-l { animation: pdm-g-chin 1.6s ease-in-out 1; }
.pdm-act-think .pdm-head { animation: pdm-g-tilt 1.6s ease-in-out 1; }

.pdm-act-mic .pdm-arm-l { transform: rotate(-24deg) translate(4px, -4px); }
.pdm-act-mic .pdm-head { animation: pdm-g-tilt 2.4s ease-in-out infinite; }

.pdm-act-dance .pdm-char-wrap { animation: pdm-g-dance .46s ease-in-out 5; }
.pdm-act-dance .pdm-arm-l { animation: pdm-g-dance-l .46s ease-in-out 5; }
.pdm-act-dance .pdm-arm-r { animation: pdm-g-dance-r .46s ease-in-out 5; }
.pdm-act-dance .pdm-head { animation: pdm-head-talk .46s ease-in-out 5; }

.pdm-act-jump .pdm-char-wrap { animation: pdm-jump .5s ease-in-out 2; }

/* the little hand microphone appears exactly when he is listening */
.pd-mascot[data-pdm-state="listening"] .pdm-prop-mic,
.pd-mascot[data-pdm-act="mic"] .pdm-prop-mic { opacity: 1; }

/* ============================== REACTIONS ================================
   Icons that float up the stage when something good happens. Decoration only
   — never the only way a result is communicated. */
.pdm-reactions {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.pdm-reaction {
  position: absolute;
  bottom: 20%;
  color: var(--pdm-gold-soft);
  opacity: 0;
  font-size: clamp(15px, 4.4vw, 24px);
  filter: drop-shadow(0 4px 10px rgba(3, 11, 24, .5));
  animation: pdm-reaction 1.9s ease-out forwards;
}

.pdm-reaction .pd-i { font-size: inherit; }

/* ============================== BUBBLE =================================== */

.pdm-dialog {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.pdm-bubble {
  position: relative;
  background: var(--pdm-bubble-bg);
  color: var(--pdm-bubble-fg);
  border-radius: 20px;
  padding: 16px 18px;
  border: 1px solid var(--pdm-bubble-line);
  box-shadow: 0 16px 40px rgba(6, 22, 46, .18);
  min-height: 92px;
}

.pdm-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 34px;
  width: 18px;
  height: 18px;
  background: var(--pdm-bubble-bg);
  border-left: 1px solid var(--pdm-bubble-line);
  border-bottom: 1px solid var(--pdm-bubble-line);
  transform: rotate(45deg);
  border-bottom-left-radius: 5px;
}

.pdm-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--pdm-gold);
}

.pdm-text {
  margin: 6px 0 0;
  font-size: clamp(.98rem, 2.4vw, 1.12rem);
  line-height: 1.55;
  font-weight: 500;
  min-height: 1.55em;
}

.pdm-text .pdm-word { opacity: 0; transition: opacity .18s ease; }
.pdm-text .pdm-word.shown { opacity: 1; }

.pdm-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: .74rem;
  font-weight: 700;
  color: #64748b;
}

.pdm-status .pdm-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.pd-mascot[data-pdm-state="speaking"] .pdm-status .pdm-pip { background: #22c55e; animation: pdm-pulse 1s ease-in-out infinite; }
.pd-mascot[data-pdm-state="listening"] .pdm-status .pdm-pip { background: #ef4444; animation: pdm-pulse .8s ease-in-out infinite; }
.pd-mascot[data-pdm-state="thinking"] .pdm-status .pdm-pip { background: #f59e0b; animation: pdm-pulse 1.2s ease-in-out infinite; }

/* =========================== ANSWER CONTROLS ============================= */

.pdm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pdm-chip {
  appearance: none;
  border: 1.5px solid var(--pdm-surface-line);
  background: var(--pdm-surface);
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: .84rem;
  padding: 10px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  text-align: left;
}

.pdm-chip:hover { transform: translateY(-1px); border-color: var(--pdm-gold); }
.pdm-chip:focus-visible { outline: 3px solid var(--pdm-focus); outline-offset: 2px; }
.pdm-chip[disabled] { opacity: .5; cursor: default; transform: none; }
/* The verdict is the point of answering: a marked chip keeps its full colour
   even though every chip is disabled once the answer is in. */
.pdm-chip[disabled].is-correct, .pdm-chip[disabled].is-wrong, .pdm-chip[disabled].is-picked { opacity: 1; }
.pdm-chip.is-picked { border-color: var(--pdm-gold); background: rgba(212, 175, 55, .18); }
.pdm-chip.is-correct { border-color: #22c55e; background: rgba(34, 197, 94, .18); }
.pdm-chip.is-wrong { border-color: #f97316; background: rgba(249, 115, 22, .16); }

.pdm-answer {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pdm-answer[hidden] { display: none; }

.pdm-answer input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .92rem;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--pdm-surface-line);
  background: var(--pdm-surface);
  color: inherit;
}

.pdm-answer input::placeholder { color: #8fa0b8; }
.pdm-answer input:focus-visible { outline: 3px solid var(--pdm-focus); outline-offset: 1px; }

.pdm-send {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--pdm-gold), #b8941f);
  color: #201a05;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pdm-send:focus-visible { outline: 3px solid var(--pdm-focus); outline-offset: 2px; }

.pdm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pdm-btn {
  appearance: none;
  border: 1.5px solid var(--pdm-surface-line);
  background: var(--pdm-surface);
  color: inherit;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}

.pdm-btn:hover { transform: translateY(-1px); border-color: var(--pdm-gold); }
.pdm-btn:focus-visible { outline: 3px solid var(--pdm-focus); outline-offset: 2px; }
.pdm-btn[aria-pressed="true"] { border-color: var(--pdm-gold); background: rgba(212, 175, 55, .2); }
.pdm-btn[disabled] { opacity: .45; cursor: default; transform: none; }
.pdm-btn.is-live { border-color: #ef4444; background: rgba(239, 68, 68, .16); color: #ffe4e6; }

.pdm-hint {
  font-size: .74rem;
  color: #93a5bd;
  line-height: 1.5;
}

.pdm-enable-voice {
  appearance: none;
  border: none;
  width: 100%;
  border-radius: 16px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 900;
  font-size: .9rem;
  cursor: pointer;
  color: #201a05;
  background: linear-gradient(120deg, #f6df8a, var(--pdm-gold));
  box-shadow: 0 12px 26px rgba(212, 175, 55, .28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pdm-enable-voice[hidden] { display: none; }
.pd-mascot[data-pdm-state="speaking"] .pdm-enable-voice { box-shadow: 0 0 0 4px rgba(212, 175, 55, .18); }

/* ============================== LAYOUTS ================================== */

/* Compact: character beside a short bubble (used in the Live waiting room). */
.pd-mascot.pdm-compact { grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); }

/* Stacked: character above the dialogue (phones). */
@media (max-width: 640px) {
  .pd-mascot,
  .pd-mascot.pdm-compact {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: left;
  }
  .pd-mascot .pdm-stage { max-width: 260px; }
  .pd-mascot .pdm-dialog { width: 100%; }
  .pdm-bubble::before { display: none; }
}

/* ============================= KEYFRAMES ================================= */

@keyframes pdm-float {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -7px); }
}
@keyframes pdm-float-talk {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -5px) scale(1.012); }
}
@keyframes pdm-shadow {
  0%, 100% { transform: scale(1); opacity: .34; }
  50% { transform: scale(.92); opacity: .24; }
}
@keyframes pdm-talk {
  0% { transform: scaleY(.42) scaleX(.94); }
  100% { transform: scaleY(1.08) scaleX(1.02); }
}
@keyframes pdm-head-talk {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(-2px); }
}
@keyframes pdm-wave {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(34deg); }
}
@keyframes pdm-arm-up-l {
  from { transform: rotate(-8deg); }
  to { transform: rotate(-58deg); }
}
@keyframes pdm-arm-up-r {
  from { transform: rotate(8deg); }
  to { transform: rotate(58deg); }
}
@keyframes pdm-jump {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  40% { transform: translate(-50%, -18px) scale(1.03); }
}
@keyframes pdm-nod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(2deg) translateY(3px); }
  60% { transform: rotate(-1deg) translateY(-2px); }
}
@keyframes pdm-comfort {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-16deg); }
}
@keyframes pdm-blink {
  0%, 92%, 100% { opacity: 0; transform: translateY(-2px); }
  94%, 98% { opacity: 1; transform: translateY(0); }
}
@keyframes pdm-sparkle {
  0% { opacity: 0; transform: scale(.5) rotate(0deg); }
  45% { opacity: 1; transform: scale(1.15) rotate(16deg); }
  100% { opacity: 0; transform: scale(.6) rotate(0deg); }
}
@keyframes pdm-halo-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes pdm-spot-sway {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); opacity: .9; }
  50% { transform: translateX(-50%) rotate(2deg); opacity: 1; }
}
@keyframes pdm-ring {
  0% { transform: translateX(-50%) scale(.7); border-color: rgba(246, 223, 138, .55); }
  100% { transform: translateX(-50%) scale(1.25); border-color: rgba(246, 223, 138, 0); }
}
@keyframes pdm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .42; }
}
@keyframes pdm-reaction {
  0% { opacity: 0; transform: translateY(6px) scale(.55) rotate(-6deg); }
  22% { opacity: 1; transform: translateY(-16px) scale(1.05) rotate(4deg); }
  100% { opacity: 0; transform: translateY(-118px) scale(1.16) rotate(-8deg); }
}

/* ---- gestures: hands, head and body ---- */
@keyframes pdm-g-wave {
  0% { transform: rotate(2deg); }
  22% { transform: rotate(-58deg); }
  42% { transform: rotate(-34deg); }
  60% { transform: rotate(-56deg); }
  78% { transform: rotate(-38deg); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-hail {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(5deg) translateY(-2px); }
  65% { transform: rotate(-3deg); }
}
@keyframes pdm-g-point {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-30deg) translate(-6px, -6px); }
  60% { transform: rotate(-24deg) translate(-4px, -4px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-lean-r {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(3deg); }
}
@keyframes pdm-g-open-l {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-34deg) translate(4px, -4px); }
  70% { transform: rotate(-27deg) translate(3px, -2px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-open-r {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(34deg) translate(-4px, -4px); }
  70% { transform: rotate(27deg) translate(-3px, -2px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-offer-l {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-46deg) translate(7px, -12px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-offer-r {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(46deg) translate(-7px, -12px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-count {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-60deg) translate(8px, -6px); }
  50% { transform: rotate(-56deg) translate(7px, -5px); }
  75% { transform: rotate(-62deg) translate(8px, -7px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-nod-soft {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40% { transform: rotate(0deg) translateY(3px); }
}
@keyframes pdm-g-thumb {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-44deg) translate(4px, -2px); }
  75% { transform: rotate(-40deg) translate(3px, -1px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-up-l {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-64deg) translate(2px, -4px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-up-r {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(64deg) translate(-2px, -4px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-shrug-l {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-18deg) translate(3px, -6px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-shrug-r {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(18deg) translate(-3px, -6px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-tilt {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-6deg); }
}
@keyframes pdm-g-clap-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-52deg) translate(16px, -14px); }
}
@keyframes pdm-g-clap-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(52deg) translate(-16px, -14px); }
}
@keyframes pdm-g-heart-l {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-38deg) translate(12px, -10px); }
  80% { transform: rotate(-34deg) translate(11px, -9px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-heart-r {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(38deg) translate(-12px, -10px); }
  80% { transform: rotate(34deg) translate(-11px, -9px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-chin {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-72deg) translate(6px, 8px); }
  85% { transform: rotate(-70deg) translate(6px, 7px); }
  100% { transform: rotate(0deg); }
}
@keyframes pdm-g-dance {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  25% { transform: translate(-50%, -10px) rotate(-3deg); }
  75% { transform: translate(-50%, -10px) rotate(3deg); }
}
@keyframes pdm-g-dance-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-46deg) translate(3px, -6px); }
}
@keyframes pdm-g-dance-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(46deg) translate(-3px, -6px); }
}

/* ============================ OTHER PIECES =============================== */

/* Small "Domey says" strip for pages that only need a nudge, not the stage. */
.pdm-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--pd-grad-glass, rgba(10, 77, 155, .06));
  border: 1px solid rgba(212, 175, 55, .28);
  font-size: .86rem;
  line-height: 1.5;
}

.pdm-note .pd-i { color: var(--pd-gold, #d4af37); font-size: 1.15rem; margin-top: 2px; }

.pdm-note strong { display: block; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--pd-gold-deep, #a67c00); }

/* Talking badge shown while Domey is listening (mic permission state). */
.pdm-mic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, .14);
  color: #fecdd3;
  border: 1px solid rgba(239, 68, 68, .34);
}

.pdm-mic-badge[hidden] { display: none; }

/* ========================== REDUCED MOTION =============================== */

@media (prefers-reduced-motion: reduce) {
  .pd-mascot *,
  .pd-mascot *::before,
  .pd-mascot *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .05ms !important;
  }
  .pdm-char-wrap { animation: none !important; transform: translateX(-50%) !important; }
  .pd-mascot[data-pdm-state="speaking"] .pdm-mouth-open { opacity: 1 !important; }
}

/* ==========================================================================
   THE COMPANION LAYOUT  (layout: 'companion')
   --------------------------------------------------------------------------
   The Domey learning experience on a phone: a compact bar with back, round,
   score and XP at the top; the character herself full width, head to feet,
   with nothing ever drawn over her face; then one rounded dialogue card
   (name, message, microphone, listening indicator), the answer choices or
   voice area, the controls, and the written conversation. Text lives above
   and below the character — never on top of her.
   ========================================================================== */

.pd-mascot.pdm-companion {
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

/* ---- the top bar: back · round · correct · XP ---------------------------- */

.pdm-companion .pdm-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
}

.pdm-companion .pdm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 1px solid var(--pdm-surface-line);
  background: var(--pdm-surface);
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  padding: 8px 13px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.pdm-companion .pdm-back:hover { border-color: var(--pdm-gold); }
.pdm-companion .pdm-back:focus-visible { outline: 3px solid var(--pdm-focus); outline-offset: 2px; }

/* The HUD sits INSIDE the top bar here — not floating over the stage — so
   the badges can never cover the character's face. */
.pdm-companion .pdm-topbar .pdm-hud {
  position: static;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  font-size: .64rem;
}

.pdm-companion .pdm-topbar .pdm-hud .pdm-dots { margin-left: 8px; }

/* ---- the stage: all Domey, all the time ---------------------------------- */

.pdm-companion .pdm-stage {
  width: 100%;
  min-height: clamp(300px, 58vh, 460px);
  border-radius: 20px;
}

/* ---- the dialogue card ---------------------------------------------------- */

.pdm-companion .pdm-dialogue-card {
  background: var(--pdm-bubble-bg);
  color: var(--pdm-bubble-fg);
  border: 1px solid var(--pdm-bubble-line);
  border-radius: 18px;
  padding: 14px 16px 12px;
  box-shadow: 0 10px 28px rgba(6, 26, 51, .18);
}

.pdm-companion .pdm-dialogue-card .pdm-bubble {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  color: var(--pdm-bubble-fg);
}

/* Her name in gold on the card, in Prayer Dome's blue-and-gold. */
.pdm-companion .pdm-dialogue-card .pdm-name {
  color: #0A4D9B;
  font-weight: 800;
  letter-spacing: .4px;
}

.pdm-companion .pdm-dialogue-card .pdm-text { font-size: 1rem; line-height: 1.5; }

.pdm-companion .pdm-dialogue-card .pdm-status {
  border: 0;
  padding: 2px 0 0;
  margin-top: 8px;
}

/* The live listening indicator + what was heard, inside the card. */
.pdm-heard {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10, 77, 155, .07);
  border: 1px dashed rgba(10, 77, 155, .3);
  font-size: .92rem;
  color: #16324f;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pdm-heard[hidden] { display: none; }

.pdm-heard .pd-i-mic { color: #0A4D9B; }
.pdm-heard-who {
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #0A4D9B;
}

.pdm-companion .pdm-dialogue-card .pdm-bar {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--pdm-bubble-line);
}

/* Mic button stays a big, friendly tap target inside the card. */
.pdm-companion .pdm-bar .pdm-mic { min-height: 46px; }

/* ---- the choices: A · B · C · D as big separated buttons ------------------- */

.pdm-companion .pdm-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.pdm-chip.pdm-chip-big {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .95rem;
  min-height: 52px;
  background: var(--pdm-bubble-bg);
  border: 1.5px solid var(--pdm-bubble-line);
  color: var(--pdm-bubble-fg);
  box-shadow: 0 3px 10px rgba(6, 26, 51, .08);
}

.pdm-chip-letter {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #0A4D9B;
  color: #f6df8a;
  font-weight: 800;
  font-size: .82rem;
}

.pdm-chip-label { flex: 1; min-width: 0; }

.pdm-chip.pdm-chip-big.is-correct {
  border-color: #22c55e;
  background: rgba(34, 197, 94, .16);
}

.pdm-chip.pdm-chip-big.is-correct .pdm-chip-letter { background: #16a34a; color: #fff; }

.pdm-chip.pdm-chip-big.is-wrong {
  border-color: #f97316;
  background: rgba(249, 115, 22, .14);
}

.pdm-chip.pdm-chip-big.is-wrong .pdm-chip-letter { background: #ea580c; color: #fff; }

.pdm-chip.pdm-chip-big:not([disabled]):active { transform: scale(.97); }

/* The Continue button spans the full row. */
.pdm-chip-continue { grid-column: 1 / -1; justify-content: center; background: #0A4D9B; color: #fff; border-color: #07244d; }
.pdm-chip-continue .pd-i-arrow-right { color: #f6df8a; }
.pdm-chip-continue:not([disabled]):hover { border-color: var(--pdm-gold); }

/* A single choice (or an odd count) still lines up. */
.pdm-companion .pdm-chips .pdm-chip:not(.pdm-chip-big):last-child:nth-child(odd) { grid-column: 1 / -1; }

.pdm-companion .pdm-answer { margin-top: 12px; }

.pdm-companion .pdm-answer input {
  background: var(--pdm-bubble-bg);
  color: var(--pdm-bubble-fg);
  border-color: var(--pdm-bubble-line);
}

.pdm-companion .pdm-hint { margin: 10px 2px 0; }

/* ---- the written conversation --------------------------------------------- */

.pdm-log {
  margin-top: 14px;
  border: 1px solid var(--pdm-bubble-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  color: var(--pdm-bubble-fg);
  padding: 10px 12px;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.pdm-log-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #0A4D9B;
  margin: 0 0 8px;
}

.pdm-log-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
  font-size: .92rem;
  line-height: 1.45;
}

/* DOMEY: soft blue from the left. YOU: gold-tinted from the right. */
.pdm-log-host { background: rgba(10, 77, 155, .08); }
.pdm-log-you { background: rgba(212, 175, 55, .14); flex-direction: row-reverse; text-align: right; }

.pdm-log-who {
  flex: none;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #0A4D9B;
}

.pdm-log-you .pdm-log-who { color: #8a6d1a; }

.pdm-log-text { min-width: 0; overflow-wrap: anywhere; }

/* ---- narrow phones: the four choices stack, everything breathes ----------- */

@media (max-width: 420px) {
  .pdm-companion .pdm-chips { grid-template-columns: 1fr; }
  .pdm-companion .pdm-stage { min-height: min(64vw, 380px); }
  .pdm-companion .pdm-topbar { font-size: .9rem; }
  .pdm-companion .pdm-topbar .pdm-hud { font-size: .58rem; }
}

/* Small tablets and up: she keeps most of the width and the dialogue card
   grows beside her — the same order, just roomier. */
@media (min-width: 760px) {
  .pdm-companion .pdm-dialog { max-width: 720px; margin: 0 auto; width: 100%; }
  .pdm-companion .pdm-stage { min-height: clamp(380px, 62vh, 560px); }
}