/* La Mazmorra — the big screen (.dg) and the phone panel (.dgp).
   A storybook over a stage: Bungee for the shouts, Playfair for the narrator's
   words, a dark panel with a gold rule for everything the Dungeon Master says. */

.dg, .dgp {
  --p-color-dungeon-gold: #e8c46a;
  --p-color-dungeon-panel: rgba(22, 16, 30, 0.9);
  --p-color-dungeon-good: #7dffa9;
  --p-color-dungeon-bad: #ff8f8f;
  --p-color-dungeon-crit: #ffd23f;
  --p-color-dungeon-fumble: #c79bff;
  --p-font-family-dungeon-story: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ================================================================ big screen */

/* --uw / --uh: 1% of the width / height of the largest 16:9 picture that fits
   the viewport. Every size below is in these, so a screen that is not 16:9
   (the /demo embed is 2.4:1) keeps a TV's proportions instead of giant type. */
.dg {
  --uw: min(1vw, 1.778vh); --uh: min(1vh, 0.5625vw);
  flex: 1; position: relative; min-height: 0; overflow: hidden;
}
.dg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dg__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 20, 0.7) 0%, rgba(10, 8, 20, 0) 20%),
    linear-gradient(0deg, rgba(10, 8, 20, 0.55) 0%, rgba(10, 8, 20, 0) 36%);
}
.dg[data-phase="presentation"] .dg__shade, .dg[data-phase="results"] .dg__shade { background: rgba(10, 8, 20, 0.5); }
.dg__fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--p-motion-ease); }
.dg__fade.is-on { opacity: 1; }

/* ---------- top bar ---------- */
.dg__top {
  position: absolute; top: 0; left: 0; right: 0; padding: calc(2 * var(--uh)) calc(3 * var(--uw)) 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: calc(3 * var(--uw));
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.dg-top__title { font-size: clamp(1.1rem, calc(2.3 * var(--uw)), 2.8rem); line-height: 1.1; color: var(--p-color-dungeon-gold); }
.dg-top__where { color: #f4ead8; font-size: clamp(0.8rem, calc(1.3 * var(--uw)), 1.6rem); font-weight: var(--p-font-weight-semibold); margin-top: calc(0.4 * var(--uh)); }
.dg-top__right { display: flex; flex-direction: column; align-items: flex-end; gap: calc(0.9 * var(--uh)); text-align: right; min-width: 0; }
.dg-top__goal { font-size: clamp(0.85rem, calc(1.4 * var(--uw)), 1.75rem); font-weight: var(--p-font-weight-bold); }
.dg-quest { display: flex; gap: calc(0.45 * var(--uw)); }
.dg-quest__pip {
  width: calc(2.4 * var(--uw)); height: calc(1.5 * var(--uh)); border-radius: var(--p-border-radius-full);
  background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  transition: background 0.4s, box-shadow 0.4s;
}
.dg-quest__pip.is-on { background: linear-gradient(90deg, #ffe9a8, var(--p-color-dungeon-gold)); box-shadow: 0 0 calc(1.4 * var(--uh)) rgba(232, 196, 106, 0.85); }

/* ---------- tags over the heads ---------- */
.dg__tags { position: absolute; inset: 0; pointer-events: none; }
.dg-tag {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(0.35 * var(--uh));
  will-change: transform;
}
.dg-tag .team-chip { font-size: clamp(0.55rem, calc(1.05 * var(--uw)), 1.3rem); max-width: calc(15 * var(--uw)); box-shadow: 0 calc(0.4 * var(--uh)) calc(1.2 * var(--uh)) rgba(0, 0, 0, 0.55); }
.dg-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-tag__line {
  display: flex; gap: calc(0.5 * var(--uw)); align-items: center; white-space: nowrap;
  font-size: clamp(0.5rem, calc(0.95 * var(--uw)), 1.15rem); font-weight: var(--p-font-weight-bold);
  background: rgba(10, 8, 20, 0.72); border-radius: var(--p-border-radius-full); padding: calc(0.2 * var(--uh)) calc(0.7 * var(--uw));
}
.dg-tag__hp { letter-spacing: -0.08em; }
.dg-tag.is-active .team-chip { max-width: calc(24 * var(--uw)); font-size: clamp(0.7rem, calc(1.35 * var(--uw)), 1.7rem); box-shadow: 0 0 0 calc(0.3 * var(--uh)) #fff, 0 0 calc(2.4 * var(--uh)) var(--p-color-dungeon-gold); }
.dg-tag--card {
  background: var(--p-color-dungeon-panel); border: calc(0.2 * var(--uh)) solid var(--p-color-dungeon-gold);
  border-radius: calc(1.4 * var(--uh)); padding: calc(0.9 * var(--uh)) calc(0.9 * var(--uw)); gap: calc(0.6 * var(--uh));
  transform-origin: 50% 100%; animation: dg-pop-pinned 0.5s var(--p-motion-ease-bounce) backwards;
}
.dg-tag--card .dg-tag__line { background: none; font-size: clamp(0.65rem, calc(1.25 * var(--uw)), 1.55rem); }
.dg-tag__mods { display: grid; gap: calc(0.2 * var(--uh)); font-size: clamp(0.5rem, calc(0.95 * var(--uw)), 1.15rem); color: var(--p-color-dungeon-gold); white-space: nowrap; font-weight: var(--p-font-weight-bold); }
/* everyone but the hero on the clock: just the crest and the hearts — the party stands shoulder to shoulder */
.dg-tag--mini .dg-tag__line { padding: calc(0.3 * var(--uh)) calc(0.5 * var(--uw)); gap: calc(0.3 * var(--uw)); }
.dg-tag--mini .team-emblem { font-size: clamp(0.6rem, calc(1.1 * var(--uw)), 1.4rem); }
.dg-tag__title {
  font-family: var(--p-font-family-dungeon-story); font-style: italic; color: var(--p-color-dungeon-gold);
  font-size: clamp(0.65rem, calc(1.25 * var(--uw)), 1.55rem); white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  animation: dg-pop 0.5s var(--p-motion-ease-bounce) backwards;
}
.dg-tag__pop {
  position: absolute; bottom: 100%; font-family: var(--p-font-family-display); color: var(--p-color-dungeon-good);
  font-size: clamp(1rem, calc(2.4 * var(--uw)), 3rem); opacity: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); white-space: nowrap;
}
.dg-tag__pop.is-on { animation: dg-rise 2.6s ease-out forwards; }
.dg-npc {
  background: #8a1c24; color: #fff; border: calc(0.2 * var(--uh)) solid #ffb3b3; border-radius: var(--p-border-radius-full);
  padding: calc(0.4 * var(--uh)) calc(1 * var(--uw)); font-weight: 800; font-size: clamp(0.7rem, calc(1.35 * var(--uw)), 1.7rem); white-space: nowrap;
  box-shadow: 0 calc(0.4 * var(--uh)) calc(1.4 * var(--uh)) rgba(0, 0, 0, 0.6);
}
.dg-tag--npc.is-down .dg-npc { filter: grayscale(0.7); opacity: 0.85; }
/* the results card covers the party: no tags peeking out from behind it */
.dg[data-phase="results"] .dg__tags, .dg[data-phase="presentation"] .dg__tags { display: none; }

/* ---------- what the player said ---------- */
.dg-bubble {
  position: absolute; left: 0; top: 0; max-width: calc(36 * var(--uw)); text-align: center;
  background: #fff; color: #17131f; border-radius: calc(1.8 * var(--uh)); padding: calc(1 * var(--uh)) calc(1.3 * var(--uw));
  font-size: clamp(0.8rem, calc(1.6 * var(--uw)), 2.05rem); font-weight: var(--p-font-weight-bold); line-height: 1.25;
  box-shadow: 0 calc(0.6 * var(--uh)) calc(2.2 * var(--uh)) rgba(0, 0, 0, 0.55);
}
.dg-bubble[hidden] { display: none; }
.dg-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -calc(1.1 * var(--uh)); width: calc(2.2 * var(--uh)); height: calc(2.2 * var(--uh));
  background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: calc(0.3 * var(--uh));
}
.dg-bubble--wait { letter-spacing: 0.3em; padding-left: calc(2 * var(--uw)); padding-right: calc(1.6 * var(--uw)); animation: dg-pulse 1.1s ease-in-out infinite alternate; }
.dg-bubble--live { background: #ffe4e4; color: #9c1020; animation: dg-pulse 0.5s ease-in-out infinite alternate; }
.dg-bubble--said { transform-origin: 50% 100%; animation: dg-pop-pinned 0.35s var(--p-motion-ease-bounce); }

/* ---------- the d20 ---------- */
.dg-dice {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(0.9 * var(--uh));
  transition: opacity 0.6s var(--p-motion-ease);
}
.dg-dice[hidden] { display: none; }
.dg-dice.is-away { opacity: 0; }
.dg-die {
  position: relative; width: clamp(70px, calc(9.5 * var(--uw)), 180px); aspect-ratio: 1; display: grid; place-items: center;
  filter: drop-shadow(0 calc(0.8 * var(--uh)) calc(2 * var(--uh)) rgba(0, 0, 0, 0.6));
  --die-a: #8f73ff; --die-b: #3d2a9c;
}
.dg-die__shape {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--die-a), var(--die-b));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.dg-die__shape::after {
  content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.16);
  clip-path: polygon(50% 17%, 84% 71%, 16% 71%);
}
.dg-die__n { position: relative; color: #fff; font-size: clamp(1.5rem, calc(3.6 * var(--uw)), 4.4rem); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.dg-die.is-rolling .dg-die__shape { animation: dg-spin 0.55s linear infinite; }
.dg-die.is-landed { animation: dg-land 0.45s var(--p-motion-ease-bounce); }
.dg-die.is-good { --die-a: #4ade80; --die-b: #15803d; }
.dg-die.is-bad { --die-a: #f87171; --die-b: #991b1b; }
.dg-die.is-crit { --die-a: #fff1a8; --die-b: #d99a1c; filter: drop-shadow(0 0 calc(2.6 * var(--uh)) rgba(255, 210, 63, 0.95)); }
.dg-die.is-crit .dg-die__n { color: #3a2500; text-shadow: none; }
.dg-die.is-fumble { --die-a: #6b5a8a; --die-b: #1f1730; }
.dg-sum {
  display: flex; align-items: baseline; gap: calc(0.7 * var(--uw)); white-space: nowrap;
  background: var(--p-color-dungeon-panel); border-radius: var(--p-border-radius-full); padding: calc(0.6 * var(--uh)) calc(1.3 * var(--uw));
  font-size: clamp(0.8rem, calc(1.5 * var(--uw)), 1.9rem); font-weight: 800; animation: dg-pop 0.35s var(--p-motion-ease-bounce);
}
.dg-sum__eq { font-size: 1.25em; }
.dg-sum__dc { color: var(--p-color-dungeon-gold); font-weight: var(--p-font-weight-semibold); }
.dg-verdict {
  font-size: clamp(1.6rem, calc(4.6 * var(--uw)), 5.8rem); line-height: 1; animation: dg-stamp 0.4s var(--p-motion-ease-bounce);
  text-shadow: 0 calc(0.4 * var(--uh)) 0 rgba(0, 0, 0, 0.55), 0 0 calc(3 * var(--uh)) rgba(0, 0, 0, 0.6);
}
.dg-verdict--good { color: var(--p-color-dungeon-good); }
.dg-verdict--bad { color: var(--p-color-dungeon-bad); }
.dg-verdict--crit { color: var(--p-color-dungeon-crit); }
.dg-verdict--fumble { color: var(--p-color-dungeon-fumble); }

/* ---------- the Dungeon Master's panel ---------- */
.dg-panel {
  position: absolute; left: calc(3 * var(--uw)); right: calc(3 * var(--uw)); bottom: calc(2.4 * var(--uh)); min-height: calc(13 * var(--uh));
  display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--uh));
  background: var(--p-color-dungeon-panel); border: calc(0.25 * var(--uh)) solid var(--p-color-dungeon-gold);
  border-radius: calc(2 * var(--uh)); padding: calc(1.7 * var(--uh)) calc(2.2 * var(--uw)); box-shadow: var(--p-shadow-300);
}
.dg-panel[hidden] { display: none; }
.dg-panel--good { border-color: var(--p-color-dungeon-good); }
.dg-panel--fail, .dg-panel--defeat { border-color: var(--p-color-dungeon-bad); }
.dg-panel__kicker { font-family: var(--p-font-family-display); color: var(--p-color-dungeon-gold); font-size: clamp(0.9rem, calc(1.7 * var(--uw)), 2.1rem); letter-spacing: 0.04em; }
.dg-panel__title { font-size: clamp(1.2rem, calc(2.6 * var(--uw)), 3.2rem); line-height: 1.1; color: var(--p-color-dungeon-gold); }
.dg-panel__text {
  font-family: var(--p-font-family-dungeon-story); font-size: clamp(1.05rem, calc(2.15 * var(--uw)), 2.7rem); line-height: 1.3;
  min-height: 2.6em;                 /* two lines held from the first word: nothing jumps while it is read */
}
.dg-panel__goal { font-size: clamp(0.85rem, calc(1.5 * var(--uw)), 1.9rem); color: #f4ead8; font-weight: var(--p-font-weight-bold); }
.dg-rules { display: grid; gap: calc(0.7 * var(--uh)); font-size: clamp(0.9rem, calc(1.6 * var(--uw)), 2rem); line-height: 1.3; }
.dg-rules strong { color: var(--p-color-dungeon-gold); }

.dg-turn__head { display: flex; align-items: center; gap: calc(1 * var(--uw)); flex-wrap: wrap; }
.dg-turn__mic { font-size: clamp(1.4rem, calc(2.8 * var(--uw)), 3.4rem); line-height: 1; animation: dg-pulse 0.8s ease-in-out infinite alternate; }
.dg-turn__who { display: flex; align-items: center; gap: calc(0.8 * var(--uw)); font-size: clamp(1rem, calc(2.1 * var(--uw)), 2.6rem); }
.dg-turn__who .team-chip { font-size: 0.8em; font-family: var(--p-font-family-body); }
.dg-turn__class { margin-left: auto; color: var(--p-color-dungeon-gold); font-weight: var(--p-font-weight-bold); font-size: clamp(0.8rem, calc(1.35 * var(--uw)), 1.7rem); }
.dg-turn__ask { font-size: clamp(0.9rem, calc(1.6 * var(--uw)), 2rem); }
.dg-turn__items { color: var(--p-color-dungeon-gold); font-weight: var(--p-font-weight-bold); }
.dg__timebar { background: rgba(255, 255, 255, 0.14); }
.dg__timebar .mg__timebar-fill { background: linear-gradient(90deg, #ff7a59, var(--p-color-dungeon-gold)); }
.dg-turn__foot { display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--uw)); color: #cfc6dc; font-size: clamp(0.75rem, calc(1.25 * var(--uw)), 1.55rem); }
.dg-turn__now { flex: 1; min-width: 0; font-family: var(--p-font-family-dungeon-story); font-style: italic; }
.dg-turn__now .team-chip { font-family: var(--p-font-family-body); font-style: normal; font-size: 0.85em; vertical-align: middle; }
.dg-turn__bets { white-space: nowrap; color: var(--p-color-dungeon-gold); font-weight: var(--p-font-weight-bold); }

.dg-chips { display: flex; flex-wrap: wrap; gap: calc(0.8 * var(--uw)); align-items: center; }
.dg-chipline {
  display: inline-flex; align-items: center; gap: calc(0.4 * var(--uw)); white-space: nowrap;
  background: rgba(255, 255, 255, 0.1); border-radius: var(--p-border-radius-full); padding: calc(0.4 * var(--uh)) calc(1 * var(--uw));
  font-weight: 800; font-size: clamp(0.75rem, calc(1.3 * var(--uw)), 1.6rem); animation: dg-pop 0.4s var(--p-motion-ease-bounce) backwards;
}
.dg-chipline .team-chip { font-size: 0.85em; }
.dg-chipline--pts { color: var(--p-color-dungeon-good); }
.dg-chipline--bad { color: var(--p-color-dungeon-bad); }
.dg-chipline--bet { color: var(--p-color-dungeon-gold); }

/* ---------- centre cards ---------- */
.dg__center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(6 * var(--uh)) calc(4 * var(--uw)); pointer-events: none;
}
.dg__center:empty { display: none; }
.dg-results {
  width: min(calc(76 * var(--uw)), 1300px); display: grid; gap: calc(1.1 * var(--uh));
  background: var(--p-color-dungeon-panel); border: calc(0.25 * var(--uh)) solid var(--p-color-dungeon-gold);
  border-radius: calc(2 * var(--uh)); padding: calc(3 * var(--uh)) calc(2.6 * var(--uw)); box-shadow: var(--p-shadow-300);
}
.dg-results__title { text-align: center; color: var(--p-color-dungeon-gold); font-size: clamp(1.4rem, calc(3 * var(--uw)), 3.6rem); margin-bottom: calc(1 * var(--uh)); }
.dg-results__row {
  display: grid; grid-template-columns: calc(4 * var(--uw)) minmax(0, 1.2fr) minmax(0, 1.5fr) auto auto; gap: calc(1.4 * var(--uw)); align-items: center;
  background: rgba(255, 255, 255, 0.07); border-left: calc(0.6 * var(--uw)) solid var(--team-color, #888);
  border-radius: calc(1.2 * var(--uh)); padding: calc(1.1 * var(--uh)) calc(1.4 * var(--uw)); font-size: clamp(0.85rem, calc(1.5 * var(--uw)), 1.9rem);
  animation: dg-pop 0.5s var(--p-motion-ease-bounce) backwards;
}
.dg-results__team { font-weight: 800; display: flex; align-items: center; gap: calc(0.6 * var(--uw)); min-width: 0; }
.dg-results__class { font-family: var(--p-font-family-dungeon-story); font-style: italic; color: var(--p-color-dungeon-gold); min-width: 0; }
.dg-results__stats { color: #cfc6dc; white-space: nowrap; }
.dg-results__pts { color: var(--p-color-dungeon-good); font-size: 1.3em; }

@keyframes dg-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* for what is pinned to the stage by an inline transform: `scale` composes with it, `transform` would replace it */
@keyframes dg-pop-pinned { from { scale: 0.6; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes dg-pulse { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes dg-spin { to { transform: rotate(360deg); } }
@keyframes dg-land { 0% { transform: scale(1.7) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes dg-stamp { 0% { transform: scale(3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
@keyframes dg-rise { 0% { transform: translateY(calc(1 * var(--uh))) scale(0.6); opacity: 0; } 15% { transform: translateY(-calc(1 * var(--uh))) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-calc(5 * var(--uh))) scale(1); opacity: 0; } }

/* ================================================================ phone */

.dgp { flex: 1; display: flex; flex-direction: column; gap: var(--p-space-400); min-height: 0; }

/* the hero's sheet */
.dgp-sheet {
  display: flex; align-items: center; gap: var(--p-space-300);
  background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-300); padding: var(--p-space-300);
}
.dgp-sheet:empty { display: none; }
.dgp-sheet__icon { font-size: 2.2rem; line-height: 1; }
.dgp-sheet__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--p-space-100); }
.dgp-sheet__class { font-size: var(--p-font-size-heading-md); color: var(--p-color-dungeon-gold); }
.dgp-sheet__title { font-family: var(--p-font-family-dungeon-story); font-style: italic; font-size: var(--p-font-size-body-sm); color: var(--p-color-text-secondary); }
.dgp-sheet__mods { display: flex; flex-wrap: wrap; gap: var(--p-space-150); }
.dgp-mod { font-size: var(--p-font-size-body-xs); font-weight: var(--p-font-weight-bold); background: var(--p-color-bg-surface-secondary); border-radius: var(--p-border-radius-full); padding: 2px var(--p-space-200); white-space: nowrap; }
.dgp-sheet__items { font-size: var(--p-font-size-body-sm); color: var(--p-color-text-secondary); }
.dgp-sheet__side { text-align: right; flex-shrink: 0; }
.dgp-sheet__hp { letter-spacing: -0.05em; }
.dgp-sheet__pts { font-weight: var(--p-font-weight-bold); font-size: var(--p-font-size-body-sm); color: var(--p-color-text-success); }

.dgp-body { flex: 1; display: flex; flex-direction: column; gap: var(--p-space-300); min-height: 0; }
.dgp-h { font-size: var(--p-font-size-heading-xl); margin: 0; }
.dgp-sub { margin: 0; }
.dgp-big { font-size: 4rem; text-align: center; line-height: 1; animation: dg-pulse 0.6s ease-in-out infinite alternate; }

/* the microphone: one big round button, a ring that breathes with the voice */
.dgp-mic {
  --level: 0;
  position: relative; align-self: center; width: min(62vw, 240px); aspect-ratio: 1; margin: var(--p-space-300) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-200);
  border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.25); color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #9a7dff, var(--p-color-bg-fill-brand) 60%, #4a32b8);
  box-shadow: var(--p-shadow-glow-brand); font: inherit; padding: var(--p-space-400);
  transition: transform var(--p-motion-duration-150) var(--p-motion-ease), background var(--p-motion-duration-200);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dgp-mic:active { transform: scale(0.96); }
.dgp-mic:focus-visible { outline: 3px solid var(--p-color-border-focus); outline-offset: 4px; }
.dgp-mic:disabled { opacity: 0.7; cursor: progress; }
.dgp-mic__icon { font-size: 3.6rem; line-height: 1; }
.dgp-mic__label { font-weight: var(--p-font-weight-bold); font-size: var(--p-font-size-body-md); text-align: center; line-height: 1.2; }
.dgp-mic__ring {
  position: absolute; inset: -10px; border-radius: 50%; border: 4px solid #ff6b6b; opacity: 0; pointer-events: none;
  transform: scale(calc(1 + var(--level) * 0.22));
}
.dgp-mic[data-state="recording"] {
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e0303a 60%, #8a1420);
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.6);
}
.dgp-mic[data-state="recording"] .dgp-mic__ring { opacity: 0.9; }
.dgp-notice { min-height: 1.3em; text-align: center; color: var(--p-color-text-warning); font-size: var(--p-font-size-body-sm); font-weight: var(--p-font-weight-semibold); }
.dgp-nomic { margin: 0; text-align: center; color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-sm); }

.dgp-text { display: flex; gap: var(--p-space-200); margin-top: auto; }
.dgp-input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--p-space-300); font: inherit; font-size: 16px;   /* 16px: iOS does not zoom */
  color: var(--p-color-text); background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-200);
}
.dgp-input:focus-visible { outline: 2px solid var(--p-color-border-focus); outline-offset: 1px; }
.dgp-send { min-height: 48px; }

.dgp-said {
  align-self: center; max-width: 100%; text-align: center; font-family: var(--p-font-family-dungeon-story); font-style: italic;
  font-size: var(--p-font-size-body-lg); background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-300);
  padding: var(--p-space-300) var(--p-space-400);
}
.dgp-said[hidden] { display: none; }

/* everyone else: a bet on the roll */
.dgp-turnof { text-align: center; font-weight: var(--p-font-weight-semibold); }
.dgp-bets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-300); flex: 1; max-height: 220px; }
.dgp-bet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-200);
  min-height: 110px; border-radius: var(--p-border-radius-400); border: 3px solid transparent; color: #fff; cursor: pointer;
  font: inherit; font-family: var(--p-font-family-display); font-size: var(--p-font-size-heading-md);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dgp-bet span { font-size: 2.4rem; line-height: 1; }
.dgp-bet--yes { background: #188a52; }
.dgp-bet--no { background: #b3282d; }
.dgp-bet[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, 0.35); }
.dgp-bet[aria-pressed="false"] { opacity: 0.6; }
.dgp-bets:not(:has([aria-pressed="true"])) .dgp-bet { opacity: 1; }
.dgp-bet:focus-visible { outline: 3px solid var(--p-color-border-focus); outline-offset: 3px; }
.dgp-sum { font-weight: var(--p-font-weight-bold); color: var(--p-color-text-secondary); }