/**
 * glassmorphism-overrides.css
 *
 * Additive override layer that applies the glowing glassmorphism aesthetic
 * (matching the D20 Animation Preview and style-board-glassmorphism.html)
 * to the live app UI.
 *
 * HOW TO REVERT
 * -------------
 * Remove (or comment out) this single <link> in index.html:
 *   <link rel="stylesheet" href="css/glassmorphism-overrides.css" />
 * Original CSS files are completely untouched.
 *
 * Loads LAST so specificity automatically wins over earlier sheets.
 * No !important needed except where the originals already used it.
 */

/* DESIGN TOKENS -- local overrides only
   (we re-declare on :root because that's what all the existing var() refs read) */
:root {
  /* Neon glow strength multipliers */
  --gm-glow-cyan:   color-mix(in srgb, var(--system) 35%, transparent);
  --gm-glow-gold:   color-mix(in srgb, var(--warning) 45%, transparent);
  --gm-glow-green:  color-mix(in srgb, var(--success) 40%, transparent);
  --gm-glow-red:    color-mix(in srgb, var(--error) 40%, transparent);
  --gm-glow-purple: color-mix(in srgb, var(--spell-cast) 40%, transparent);

  /* Reusable accent/dice and bg tints for repeated glass values */
  --gm-accent-02: color-mix(in srgb, var(--dice) 2%, transparent);
  --gm-accent-03: color-mix(in srgb, var(--dice) 3%, transparent);
  --gm-accent-04: color-mix(in srgb, var(--dice) 4%, transparent);
  --gm-accent-05: color-mix(in srgb, var(--dice) 5%, transparent);
  --gm-accent-06: color-mix(in srgb, var(--dice) 6%, transparent);
  --gm-accent-07: color-mix(in srgb, var(--dice) 7%, transparent);
  --gm-accent-08: color-mix(in srgb, var(--dice) 8%, transparent);
  --gm-accent-09: color-mix(in srgb, var(--dice) 9%, transparent);
  --gm-accent-10: color-mix(in srgb, var(--dice) 10%, transparent);
  --gm-accent-11: color-mix(in srgb, var(--dice) 11%, transparent);
  --gm-accent-12: color-mix(in srgb, var(--dice) 12%, transparent);
  --gm-accent-13: color-mix(in srgb, var(--dice) 13%, transparent);
  --gm-accent-14: color-mix(in srgb, var(--dice) 14%, transparent);
  --gm-accent-15: color-mix(in srgb, var(--dice) 15%, transparent);
  --gm-accent-16: color-mix(in srgb, var(--dice) 16%, transparent);
  --gm-accent-18: color-mix(in srgb, var(--dice) 18%, transparent);
  --gm-accent-20: color-mix(in srgb, var(--dice) 20%, transparent);
  --gm-accent-22: color-mix(in srgb, var(--dice) 22%, transparent);
  --gm-accent-25: color-mix(in srgb, var(--dice) 25%, transparent);
  --gm-accent-26: color-mix(in srgb, var(--dice) 26%, transparent);
  --gm-accent-28: color-mix(in srgb, var(--dice) 28%, transparent);
  --gm-accent-30: color-mix(in srgb, var(--dice) 30%, transparent);
  --gm-accent-32: color-mix(in srgb, var(--dice) 32%, transparent);
  --gm-accent-35: color-mix(in srgb, var(--dice) 35%, transparent);
  --gm-accent-38: color-mix(in srgb, var(--dice) 38%, transparent);
  --gm-accent-40: color-mix(in srgb, var(--dice) 40%, transparent);
  --gm-accent-45: color-mix(in srgb, var(--dice) 45%, transparent);
  --gm-accent-50: color-mix(in srgb, var(--dice) 50%, transparent);
  --gm-accent-55: color-mix(in srgb, var(--dice) 55%, transparent);
  --gm-accent-60: color-mix(in srgb, var(--dice) 60%, transparent);
  --gm-accent-65: color-mix(in srgb, var(--dice) 65%, transparent);
  --gm-accent-75: color-mix(in srgb, var(--dice) 75%, transparent);
  --gm-accent-80: color-mix(in srgb, var(--dice) 80%, transparent);
  --gm-accent-85: color-mix(in srgb, var(--dice) 85%, transparent);
  --gm-accent-90: color-mix(in srgb, var(--dice) 90%, transparent);
  --gm-accent-95: color-mix(in srgb, var(--dice) 95%, transparent);

  --gm-bg-55: color-mix(in srgb, var(--bg-primary) 55%, transparent);
  --gm-bg-60: color-mix(in srgb, var(--bg-primary) 60%, transparent);
  --gm-bg-65: color-mix(in srgb, var(--bg-primary) 65%, transparent);
  --gm-bg-68: color-mix(in srgb, var(--bg-primary) 68%, transparent);
  --gm-bg-72: color-mix(in srgb, var(--bg-primary) 72%, transparent);
  --gm-bg-75: color-mix(in srgb, var(--bg-primary) 75%, transparent);
  --gm-bg-80: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  --gm-bg-86: color-mix(in srgb, var(--bg-primary) 86%, transparent);
  --gm-bg-88: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  --gm-bg-89: color-mix(in srgb, var(--bg-primary) 89%, transparent);
  --gm-bg-92: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  --gm-bg-93: color-mix(in srgb, var(--bg-primary) 93%, transparent);
  --gm-bg-95: color-mix(in srgb, var(--bg-primary) 95%, transparent);
  --gm-bg-96: color-mix(in srgb, var(--bg-primary) 96%, transparent);
  --gm-bg-97: color-mix(in srgb, var(--bg-primary) 97%, transparent);
  --gm-bg-98: color-mix(in srgb, var(--bg-primary) 98%, transparent);

  /* Glass surface */
  --gm-surface:     color-mix(in srgb, var(--text-primary) 4%, transparent);
  --gm-surface-mid: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --gm-surface-hi:  color-mix(in srgb, var(--text-primary) 11%, transparent);
  --gm-border:      color-mix(in srgb, var(--text-primary) 9%, transparent);

  /* Fallback blob/glow tokens - ” overridden per-theme by variables.css */
  --gm-glow-accent: color-mix(in srgb, var(--dice) 45%, transparent);
  --gm-bg-blob-a: radial-gradient(ellipse 55% 35% at 10% 15%, color-mix(in srgb, var(--dice) 7%, transparent) 0%, transparent 70%);
  --gm-bg-blob-b: radial-gradient(ellipse 45% 45% at 85% 75%, color-mix(in srgb, var(--spell-cast) 6%, transparent) 0%, transparent 70%);
  --gm-bg-blob-c: radial-gradient(ellipse 35% 25% at 50% 50%, color-mix(in srgb, var(--system) 4%, transparent) 0%, transparent 70%);
}


body {
  background: var(--body-bg);
  background-attachment: fixed;
}


.container {
  background: linear-gradient(
    155deg,
    var(--gm-bg-92) 0%,
    var(--gm-bg-88) 50%,
    var(--gm-bg-92) 100%
  );
  border: 1px solid var(--gm-accent-22);
  box-shadow:
    0 25px 80px color-mix(in srgb, black 70%, transparent),
    0 0 0 1px color-mix(in srgb, var(--text-primary) 3%, transparent),
    0 0 80px var(--gm-accent-10),
    0 0 140px var(--gm-accent-05),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}


.choice-btn {
  background: linear-gradient(135deg, var(--gm-accent-08), color-mix(in srgb, var(--system) 4%, transparent));
  border: 1px solid var(--gm-accent-22);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease;
}
.choice-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--dice), color-mix(in srgb, var(--system) 80%, transparent));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.choice-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--gm-accent-16), color-mix(in srgb, var(--system) 9%, transparent));
  border-color: var(--gm-accent-55);
  box-shadow: 0 0 20px var(--gm-accent-18), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  transform: translateX(6px);
}
.choice-btn:hover:not(:disabled)::before { opacity: 1; }

/* List-item choices (markdown ol/ul) */
.message.assistant .message-content ul.choices li,
.message.assistant .message-content ol.choices li {
  background: linear-gradient(135deg, var(--gm-accent-08), color-mix(in srgb, var(--system) 4%, transparent));
  border: 1px solid var(--gm-accent-22);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease;
}
.message.assistant .message-content ul.choices li::before,
.message.assistant .message-content ol.choices li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--dice), color-mix(in srgb, var(--system) 80%, transparent));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.message.assistant .message-content ul.choices li:hover,
.message.assistant .message-content ol.choices li:hover {
  background: linear-gradient(135deg, var(--gm-accent-16), color-mix(in srgb, var(--system) 9%, transparent));
  border-color: var(--gm-accent-55);
  box-shadow: 0 0 20px var(--gm-accent-18), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.message.assistant .message-content ul.choices li:hover::before,
.message.assistant .message-content ol.choices li:hover::before { opacity: 1; }

/* .choice-button (legacy gold buttons) -> ' restyle to blue glass */
.choice-button {
  background: linear-gradient(135deg, var(--gm-accent-12), color-mix(in srgb, var(--system) 7%, transparent));
  border: 1px solid var(--gm-accent-30);
  color: var(--text-primary);
  box-shadow: 0 0 12px var(--gm-accent-10), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.choice-button:hover {
  background: linear-gradient(135deg, var(--gm-accent-22), color-mix(in srgb, var(--system) 14%, transparent));
  border-color: var(--gm-accent-60);
  box-shadow: 0 0 24px var(--gm-accent-28), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  transform: translateX(6px);
}


.message.user .message-content {
  background: linear-gradient(135deg, var(--gm-accent-14), color-mix(in srgb, var(--system) 8%, transparent));
  border: 1px solid var(--gm-accent-28);
  box-shadow: 0 0 20px var(--gm-accent-10), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.message.assistant .message-content {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--text-primary) 5%, transparent) 0%,
    color-mix(in srgb, var(--text-primary) 3%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
  box-shadow: 0 2px 16px color-mix(in srgb, black 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}



/* Scene ->  gold glow */
.gm-scene {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 9%, transparent), color-mix(in srgb, var(--warning) 4%, transparent));
  border-left-color: color-mix(in srgb, var(--warning) 75%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--warning) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Narration ->  white */
.gm-narration {
  background: linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 6%, transparent), color-mix(in srgb, var(--text-primary) 2%, transparent));
  border-left-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--text-primary) 3%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Dialogue ->  blue */
.gm-dialogue {
  background: linear-gradient(135deg, var(--gm-accent-09), color-mix(in srgb, var(--system) 4%, transparent));
  border-left-color: var(--gm-accent-75);
  box-shadow: 0 0 18px var(--gm-accent-09), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Dialogue disposition overrides */
.gm-dialogue[data-disposition="hostile"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--error) 9%, transparent), color-mix(in srgb, var(--error) 4%, transparent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--error) 9%, transparent);
}
.gm-dialogue[data-disposition="friendly"],
.gm-dialogue[data-disposition="helpful"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, transparent), color-mix(in srgb, var(--system) 4%, transparent));
  border-left-color: color-mix(in srgb, var(--success) 70%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--success) 8%, transparent);
}
/* Skill check ->  blue */
.gm-skillcheck {
  background: linear-gradient(135deg, var(--gm-accent-10), color-mix(in srgb, var(--system) 5%, transparent));
  border-color: var(--gm-accent-32);
  box-shadow: 0 0 18px var(--gm-accent-10), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Saving throw ->  red */
.gm-savingthrow {
  background: linear-gradient(135deg, color-mix(in srgb, var(--error) 10%, transparent), color-mix(in srgb, var(--error) 5%, transparent));
  border-color: color-mix(in srgb, var(--error) 32%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--error) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Dice roll ->  gold */
.gm-diceroll {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 9%, transparent), color-mix(in srgb, var(--warning) 4%, transparent));
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--warning) 9%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Combat ->  red */
.gm-combat {
  background: linear-gradient(135deg, color-mix(in srgb, var(--error) 10%, transparent), color-mix(in srgb, var(--error) 5%, transparent));
  border-left-color: color-mix(in srgb, var(--error) 80%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--error) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Loot ->  gold */
.gm-loot {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 10%, transparent), color-mix(in srgb, var(--warning) 4%, transparent));
  border-left-color: color-mix(in srgb, var(--warning) 85%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--warning) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Roll prompt ->  purple */
.gm-rollprompt {
  background: linear-gradient(135deg, color-mix(in srgb, var(--spell-cast) 10%, transparent), color-mix(in srgb, var(--spell-cast) 5%, transparent));
  border-color: color-mix(in srgb, var(--spell-cast) 32%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--spell-cast) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
/* Transition ->  faded */
.gm-transition {
  background: linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 3%, transparent), transparent);
  border-left-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
}

/* Roll total glow */
.roll-total { text-shadow: 0 0 10px var(--gm-glow-gold); }
.roll-success { text-shadow: 0 0 8px var(--gm-glow-green); }
.roll-failure { text-shadow: 0 0 8px var(--gm-glow-red); }

/* Roll chip buttons */
.roll-chip--prompt {
  background: linear-gradient(135deg, color-mix(in srgb, var(--spell-cast) 20%, transparent), color-mix(in srgb, var(--spell-cast) 12%, transparent));
  border-color: color-mix(in srgb, var(--spell-cast) 60%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--spell-cast) 20%, transparent);
}
.roll-chip--prompt:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--spell-cast) 30%, transparent), color-mix(in srgb, var(--spell-cast) 20%, transparent));
  border-color: color-mix(in srgb, var(--spell-cast) 85%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--spell-cast) 35%, transparent);
}


.modal-content {
  background: linear-gradient(
    155deg,
    var(--gm-bg-93) 0%,
    var(--gm-bg-89) 60%,
    var(--gm-bg-86) 100%
  );
  border: 1px solid var(--gm-accent-18);
  box-shadow:
    0 10px 60px color-mix(in srgb, black 65%, transparent),
    0 0 0 1px color-mix(in srgb, var(--text-primary) 3%, transparent),
    0 0 80px var(--gm-accent-12),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.modal-header {
  background: linear-gradient(135deg, var(--gm-accent-14), color-mix(in srgb, var(--system) 7%, transparent));
  border-bottom-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.modal-close {
  background: var(--glass-hover);
  border-color: var(--glass-border);
  transition: all 0.2s ease;
}
.modal-close:hover {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
  box-shadow: 0 0 14px color-mix(in srgb, var(--error) 22%, transparent);
}


.tab-item {
  background: var(--glass-bg);
  border-color: color-mix(in srgb, var(--text-primary) 9%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
  transition: all 0.22s ease;
}
.tab-item:hover {
  background: var(--glass-hover);
  border-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--text-primary) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.tab-item.active {
  background: linear-gradient(135deg, var(--gm-accent-18), color-mix(in srgb, var(--system) 10%, transparent));
  border-color: var(--gm-accent-45);
  box-shadow: 0 0 22px var(--gm-accent-20), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--dice, var(--dice));
  text-shadow: 0 0 10px var(--gm-accent-50);
}
.tab-item.active::after {
  background: var(--gm-accent-35);
  box-shadow: 0 0 10px var(--gm-accent-50);
}


input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 3%, transparent);
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
input[type="text"]:hover:not(:focus):not([disabled]),
input[type="number"]:hover:not(:focus):not([disabled]),
textarea:hover:not(:focus):not([disabled]),
select:hover:not(:focus):not([disabled]) {
  border-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: var(--glass-hover);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--gm-accent-65);
  background: var(--gm-accent-06);
  box-shadow: 0 0 0 3px var(--gm-accent-12), 0 0 22px var(--gm-accent-16), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  animation: none; /* disable the existing gold pulse; replaced by above */
}
input.important:focus,
textarea.important:focus {
  border-color: color-mix(in srgb, var(--warning) 65%, transparent);
  background: color-mix(in srgb, var(--warning) 5%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 12%, transparent), 0 0 22px color-mix(in srgb, var(--warning) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}


.btn-primary {
  background: linear-gradient(135deg, var(--gm-accent-22), color-mix(in srgb, var(--system) 14%, transparent));
  border: 1px solid var(--gm-accent-50);
  color: var(--text-primary);
  box-shadow: 0 0 18px var(--gm-accent-20), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  text-shadow: 0 0 10px var(--gm-accent-50);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--gm-accent-35), color-mix(in srgb, var(--system) 24%, transparent));
  border-color: var(--gm-accent-85);
  box-shadow: 0 0 32px var(--gm-accent-40), 0 0 60px var(--gm-accent-12), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.btn-secondary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.btn-secondary:hover {
  background: var(--glass-active);
  border-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--text-primary) 6%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
}

/* Token-limit action buttons reuse the same classes */
.token-limit-actions .btn-primary  { /* inherits above */ }
.token-limit-actions .btn-secondary { /* inherits above */ }


*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb {
  background: var(--gm-accent-28);
  border-radius: 3px;
  border: none;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gm-accent-55); }
*::-webkit-scrollbar-thumb:active { background: var(--gm-accent-80); }



/* Base tab: themed glass pill */
.book-tab,
.settings-button,
.character-sheet-tab,
.tome-button {
  background: linear-gradient(
    90deg,
    var(--gm-accent-22) 0%,
    var(--gm-accent-16) 100%
  ) !important;
  border: 1px solid var(--gm-accent-30) !important;
  border-right: none !important;
  color: var(--text-primary) !important;
  box-shadow:
    0 4px 12px color-mix(in srgb, black 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.book-tab:hover,
.settings-button:hover,
.character-sheet-tab:hover,
.tome-button:hover {
  background: linear-gradient(
    90deg,
    var(--gm-accent-35) 0%,
    var(--gm-accent-28) 100%
  ) !important;
  border-color: var(--gm-accent-55) !important;
  box-shadow:
    0 4px 18px var(--gm-accent-25),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}

/* Active/open tab gets a stronger glow */
.book-tab[data-tab-open="true"] {
  background: linear-gradient(
    90deg,
    var(--gm-accent-45) 0%,
    var(--gm-accent-35) 100%
  ) !important;
  border-color: var(--gm-accent-65) !important;
  box-shadow:
    0 4px 18px color-mix(in srgb, black 50%, transparent),
    0 0 20px var(--gm-accent-30),
    inset 0 2px 4px var(--gm-accent-18) !important;
}

/* SVG icons in tabs */
.book-tab svg,
.settings-button svg,
.character-sheet-tab svg,
.tome-button svg {
  color: var(--text-primary) !important;
  fill: currentColor;
}



/* Background ->  match dark app glass instead of gradient */
.welcome-screen {
  /* Frosted glass - ” lets chat content show through as a blurred backdrop */
  background: linear-gradient(
    155deg,
    var(--gm-bg-72) 0%,
    var(--gm-bg-68) 50%,
    var(--gm-bg-72) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* Title */
.welcome-title {
  text-shadow:
    0 0 40px var(--gm-accent-35),
    0 2px 20px color-mix(in srgb, black 60%, transparent);
  letter-spacing: 0.02em;
}

/* Early Access pill - ” uses theme dice colour */
.welcome-early-access {
  background: linear-gradient(135deg, var(--gm-accent-25), var(--gm-accent-14));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--dice) 40%, transparent);
  box-shadow: 0 0 16px var(--gm-accent-20), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  letter-spacing: 1.5px;
}

/* Welcome icon wrapper ->  let the canvas breathe */
.welcome-icon {
  filter: none; /* remove any inherited drop-shadow that clashes with canvas */
}
.floating-hexagon__core {
  border-radius: 50%;
  box-shadow:
    0 0 35px 12px var(--gm-accent-08),
    0 0 80px 35px var(--gm-accent-04),
    0 0 145px 65px color-mix(in srgb, var(--dice) 1.5%, transparent),
    inset 0 0 20px var(--gm-accent-03);
  animation: hexagon-orb-pulse 4s ease-in-out infinite;
}

@keyframes hexagon-orb-pulse {
  0%, 100% {
    box-shadow:
      0 0 30px 10px var(--gm-accent-06),
      0 0 70px 30px var(--gm-accent-03),
      0 0 130px 60px color-mix(in srgb, var(--dice) 1.5%, transparent),
      inset 0 0 20px var(--gm-accent-02);
    opacity: 0.8;
  }
  50% {
    box-shadow:
      0 0 40px 14px var(--gm-accent-11),
      0 0 90px 40px color-mix(in srgb, var(--dice) 5.5%, transparent),
      0 0 160px 80px var(--gm-accent-02),
      inset 0 0 28px var(--gm-accent-04);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-hexagon__core {
    animation: none;
  }
}

/* Primary CTA button */
.welcome-button-primary {
  background: linear-gradient(135deg, var(--gm-accent-30), var(--gm-accent-20));
  border: 1px solid var(--gm-accent-55);
  border-width: 1px;
  color: var(--text-primary);
  box-shadow:
    0 4px 20px var(--gm-accent-25),
    0 0 50px var(--gm-accent-08),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  text-shadow: 0 0 12px var(--gm-accent-40);
}
.welcome-button-primary:hover {
  background: linear-gradient(135deg, var(--gm-accent-45), var(--gm-accent-32));
  border-color: var(--gm-accent-85);
  box-shadow:
    0 8px 32px var(--gm-accent-45),
    0 0 70px var(--gm-accent-15),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent);
  transform: translateY(-3px);
}
.welcome-button-primary::before { display: none; } /* remove old shimmer */

/* Secondary button */
.welcome-button-secondary {
  background: var(--gm-accent-06);
  border: 1px solid var(--gm-accent-18);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
  opacity: 1;
}
.welcome-button-secondary:hover {
  background: var(--gm-accent-12);
  border-color: var(--gm-accent-35);
  box-shadow: 0 0 20px var(--gm-accent-12), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  opacity: 1;
}

/* Back link */
.welcome-button-back {
  color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}
.welcome-button-back:hover { color: color-mix(in srgb, var(--text-secondary) 85%, transparent); }

/* Sign-out button */
.welcome-signout-btn {
  border-color: var(--glass-border);
  color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}
.welcome-signout-btn:hover {
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
  color: color-mix(in srgb, var(--error) 75%, transparent);
}



/* Stop the old gentleFloat ->  canvas die has its own motion */
.dice-roller-button {
  animation: none;
  background: linear-gradient(
    155deg,
    var(--gm-bg-92) 0%,
    var(--gm-bg-88) 60%,
    var(--gm-bg-92) 100%
  );
  border: 1px solid var(--gm-accent-28);
  border-radius: 24px;
  padding: 28px 36px;
  box-shadow:
    0 8px 40px color-mix(in srgb, black 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--text-primary) 3%, transparent),
    0 0 60px var(--gm-accent-14),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: all 0.25s ease;
}
.dice-roller-button:hover {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--bg-primary) 92%, black) 0%,
    color-mix(in srgb, var(--bg-primary) 84%, black) 60%,
    color-mix(in srgb, var(--bg-primary) 92%, black) 100%
  );
  border-color: var(--gm-accent-60);
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 14px 56px color-mix(in srgb, black 65%, transparent),
    0 0 80px var(--gm-accent-22),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 9%, transparent);
  animation: none;
}
.dice-roller-button:active {
  transform: translateY(-2px) scale(1.01);
}

/* Crit glow states */
.dice-roller-button.crit-success {
  border-color: color-mix(in srgb, var(--success) 60%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb, var(--success) 35%, transparent), 0 0 120px color-mix(in srgb, var(--success) 12%, transparent);
}
.dice-roller-button.crit-failure {
  border-color: color-mix(in srgb, var(--error) 60%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb, var(--error) 35%, transparent), 0 0 120px color-mix(in srgb, var(--error) 12%, transparent);
}

/* d20-container: size to fit the canvas */
.dice-roller-ui .d20-container {
  width: 240px;
  height: 240px;
  perspective: none;
}

/* Label */
.dice-roller-label {
  color: color-mix(in srgb, var(--text-secondary) 75%, transparent);
  letter-spacing: 1.5px;
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* Backdrop */
.dice-roller-backdrop {
  background: color-mix(in srgb, black 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}



/* Right page: dark glass surface matching left page */
.book-right-page {
  background: linear-gradient(
    180deg,
    var(--gm-bg-88) 0%,
    var(--gm-bg-92) 100%
  ) !important;
  border: none !important;
  box-shadow:
    0 25px 80px color-mix(in srgb, black 70%, transparent),
    inset 0 1px 0 var(--gm-accent-08) !important;
}

/* Right page viewport clips page-turn animations ->  keep overflow hidden */
.book-right-page__viewport {
  background: transparent;
}

/* Right page footer ->  glass dock */
.book-right-page__footer {
  background: var(--gm-bg-75) !important;
  border-top: 1px solid var(--gm-accent-12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.book-right-page__footer .input-container {
  background: transparent !important;
  border-top: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Left page container: subtle blue left-edge for the book spine glow */
.book-left-page .container {
  box-shadow:
    0 25px 80px color-mix(in srgb, black 70%, transparent),
    inset 0 1px 0 var(--gm-accent-08),
    inset 2px 0 12px var(--gm-accent-04) !important;
}

/* Chapter header (adventure title bar on left page) */
.book-chapter-header {
  background: var(--gm-bg-60) !important;
  border-bottom: 1px solid var(--gm-accent-10) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.book-chapter-header__text {
  color: var(--text-secondary) !important;
}

/* Quest objective strip */
.book-quest-objective {
  background: var(--gm-accent-45) !important;
  border-bottom: 1px solid var(--gm-accent-07) !important;
}

.book-quest-objective__text {
  color: var(--gm-accent-55) !important;
  letter-spacing: 0.5px;
}

.book-quest-objective__icon {
  opacity: 0.5;
}

/* Right page: page header (e.g. "YOUR TURN") */
.bl-page-header {
  background: var(--gm-bg-60) !important;
  border-bottom: 1px solid var(--gm-accent-12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.bl-page-header__title {
  color: var(--text-primary) !important;
  letter-spacing: 0.6px;
}

/* Book nav bar (page dots + prev/next arrows) */
.book-nav-bar {
  background: var(--gm-bg-65) !important;
  border-top: 1px solid var(--gm-accent-10) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.book-nav {
  background: var(--gm-accent-07) !important;
  border: 1px solid var(--gm-accent-20) !important;
  color: color-mix(in srgb, var(--text-primary) 80%, transparent) !important;
}

.book-nav:not(:disabled):hover {
  background: var(--gm-accent-18) !important;
  border-color: var(--gm-accent-45) !important;
  box-shadow: 0 2px 12px var(--gm-accent-25) !important;
}

.bl-page-dot {
  background: var(--gm-accent-18) !important;
}

.bl-page-dot--active {
  background: var(--gm-accent-85) !important;
  box-shadow: 0 0 6px var(--gm-accent-50);
}



/* Character / companion summary card */
.right-page-character-summary {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-primary) 76%, black) 0%,
    color-mix(in srgb, var(--bg-primary) 84%, black) 100%
  ) !important;
  border: 1px solid var(--gm-accent-22) !important;
  border-left: 3px solid var(--gm-accent-55) !important;
  box-shadow:
    0 2px 12px color-mix(in srgb, black 35%, transparent),
    inset 0 1px 0 var(--gm-accent-06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.right-page-character-summary:first-of-type {
  border-left-width: 1px !important;
  border-color: var(--gm-accent-22) !important;
}

.right-page-character-summary--companion {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-primary) 74%, var(--spell-cast)) 0%,
    color-mix(in srgb, var(--bg-primary) 82%, black) 100%
  ) !important;
  border-left: 1px solid color-mix(in srgb, var(--spell-cast) 45%, transparent) !important;
  border-color: color-mix(in srgb, var(--spell-cast) 20%, transparent) !important;
}

.right-page-character__name {
  color: color-mix(in srgb, var(--text-primary) 96%, transparent) !important;
}

/* Skill/check chips (Perception, Investigation, etc.) */
.right-page-character__pill {
  background: var(--gm-accent-12) !important;
  border: 1px solid var(--gm-accent-28) !important;
  color: color-mix(in srgb, var(--text-primary) 90%, transparent) !important;
}

/* bl-* character page content */
.bl-char-name {
  color: color-mix(in srgb, var(--text-primary) 96%, transparent) !important;
  text-shadow: 0 2px 12px var(--gm-accent-30) !important;
}

.bl-char-subtitle {
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent) !important;
}

.bl-hp-label,
.bl-stat-label,
.bl-ability-label,
.bl-section-label {
  color: var(--gm-accent-55) !important;
}

.bl-hp-value,
.bl-stat-value,
.bl-ability-score,
.bl-ability-mod {
  color: color-mix(in srgb, var(--text-primary) 96%, transparent) !important;
}

.bl-stat-box {
  background: var(--gm-accent-06) !important;
  border: 1px solid var(--gm-accent-14) !important;
}

.bl-ability-block {
  background: var(--gm-accent-05) !important;
  border: 1px solid var(--gm-accent-11) !important;
}

/* HP bar track */
.bl-hp-bar-track {
  background: var(--gm-accent-10) !important;
}

/* HP fill colours */
.bl-hp-bar-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--healing) 85%, transparent), color-mix(in srgb, var(--healing) 90%, transparent)) !important;
}

.bl-hp-bar-fill.hp-low {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 85%, transparent), color-mix(in srgb, var(--warning) 90%, transparent)) !important;
}

.bl-hp-bar-fill.hp-critical {
  background: linear-gradient(90deg, color-mix(in srgb, var(--error) 85%, transparent), color-mix(in srgb, var(--error) 90%, transparent)) !important;
}

/* Identity section separator */
.bl-identity {
  border-bottom-color: var(--gm-accent-12) !important;
}

/* Combat board */
.combat-board {
  background: color-mix(in srgb, var(--bg-primary) 76%, black) !important;
  border: 1px solid var(--gm-accent-15) !important;
  border-radius: 8px;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}



.input-container {
  background: linear-gradient(
    135deg,
    var(--gm-accent-06) 0%,
    var(--gm-accent-04) 100%
  ) !important;
  border-top: 1px solid var(--gm-accent-12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#messageInput {
  background: var(--gm-bg-60) !important;
  border: 1px solid var(--gm-accent-18) !important;
  color: color-mix(in srgb, var(--text-primary) 95%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#messageInput::placeholder {
  color: var(--gm-accent-35) !important;
}

#messageInput:focus {
  border-color: var(--gm-accent-50) !important;
  background: color-mix(in srgb, var(--bg-primary) 78%, black) !important;
  box-shadow: 0 0 0 3px var(--gm-accent-10),
              0 0 16px var(--gm-accent-08) !important;
  outline: none !important;
}

#messageInput.input-roll-mode {
  border-color: color-mix(in srgb, var(--warning) 65%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 15%, transparent),
              0 0 16px color-mix(in srgb, var(--warning) 10%, transparent) !important;
}




.chat-messages {
  background: linear-gradient(
    180deg,
    var(--gm-bg-96) 0%,
    var(--gm-bg-98) 100%
  ) !important;
}


@media (min-width: 768px) {
  .book-left-page .container {
    background: linear-gradient(
      155deg,
      var(--gm-bg-95) 0%,
      var(--gm-bg-92) 100%
    ) !important;
    border: none !important;
    box-shadow:
      0 25px 80px color-mix(in srgb, black 70%, transparent),
      inset 0 1px 0 var(--gm-accent-08),
      inset 2px 0 12px var(--gm-accent-04) !important;
  }

  
  .book-right-page {
    background: linear-gradient(
      180deg,
      var(--gm-bg-95) 0%,
      var(--gm-bg-98) 100%
    ) !important;
    box-shadow:
      0 25px 80px color-mix(in srgb, black 70%, transparent),
      inset 0 1px 0 var(--gm-accent-07) !important;
    border: none !important;
  }

  
  .book-right-page__footer {
    background: var(--gm-bg-80) !important;
    border-top: 1px solid var(--gm-accent-12) !important;
  }

  
  .book-chapter-header {
    background: var(--gm-bg-72) !important;
    border-bottom: 1px solid var(--gm-accent-10) !important;
  }

  .book-chapter-header__text {
    color: color-mix(in srgb, var(--text-secondary) 70%, transparent) !important;
  }

  
  .book-quest-objective {
    background: var(--gm-bg-55) !important;
    border-bottom: 1px solid var(--gm-accent-07) !important;
  }

  .book-quest-objective__text {
    color: var(--gm-accent-60) !important;
  }

  
  .bl-page-header {
    background: var(--gm-bg-72) !important;
    border-bottom: 1px solid var(--gm-accent-12) !important;
  }

  .bl-page-header__title {
    color: color-mix(in srgb, var(--text-primary) 90%, transparent) !important;
  }

  
  .book-nav-bar {
    background: var(--gm-bg-75) !important;
    border-top: 1px solid var(--gm-accent-10) !important;
  }

  .book-nav {
    background: var(--gm-accent-07) !important;
    border: 1px solid var(--gm-accent-20) !important;
    color: color-mix(in srgb, var(--text-primary) 85%, transparent) !important;
  }

  .book-nav:not(:disabled):hover {
    background: var(--gm-accent-18) !important;
    border-color: var(--gm-accent-45) !important;
    box-shadow: 0 2px 12px var(--gm-accent-25) !important;
  }

  
  .book-tab-strip .book-tab {
    border-radius: 0 8px 8px 0 !important;
    border-right: 1px solid var(--gm-accent-30) !important;
    border-left: none !important;
    background: linear-gradient(
      90deg,
      var(--gm-accent-22) 0%,
      var(--gm-accent-16) 100%
    ) !important;
    border-color: var(--gm-accent-30) !important;
    color: color-mix(in srgb, var(--text-primary) 90%, transparent) !important;
  }

  .book-tab-strip .book-tab[data-tab-open="true"] {
    background: linear-gradient(
      90deg,
      var(--gm-accent-45) 0%,
      var(--gm-accent-35) 100%
    ) !important;
    border-color: var(--gm-accent-65) !important;
    box-shadow:
      0 4px 18px color-mix(in srgb, black 50%, transparent),
      0 0 20px var(--gm-accent-30),
      inset 0 2px 4px var(--gm-accent-18) !important;
  }

  
  .settings-menu,
  .character-sheet-panel {
    background: linear-gradient(
      160deg,
      var(--gm-bg-97) 0%,
      var(--gm-bg-97) 100%
    ) !important;
    border: 1px solid var(--gm-accent-18) !important;
    border-right: none !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  }
}


.bl-choice-item {
  background: var(--gm-accent-05) !important;
  border: 1px solid var(--gm-accent-22) !important;
  color: color-mix(in srgb, var(--text-primary) 92%, transparent) !important;
  flex-direction: row !important;
  align-items: center !important;
}

.bl-choice-item .choice-text {
  flex: 1 1 auto;
  text-align: left;
}

.bl-choice-item .choice-roll-badge {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}

.bl-choice-item:hover {
  background: var(--gm-accent-13) !important;
  border-color: var(--gm-accent-45) !important;
  box-shadow: 0 2px 14px var(--gm-accent-18) !important;
}

.bl-choice-item.bl-choice-selected {
  background: var(--gm-accent-14) !important;
  border-color: var(--gm-accent-55) !important;
}

/* Action labels hidden for now */
.bl-choice-action-label {
  display: none !important;
}


.choice-roll-badge--neu,
.right-page-character__pill {
  background: var(--gm-accent-10) !important;
  border: 1px solid var(--gm-accent-28) !important;
  color: color-mix(in srgb, var(--text-primary) 92%, transparent) !important;
}

/* Positive/negative badges keep their semantic green/red colors */
.choice-roll-badge--pos {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.12) !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
}

.choice-roll-badge--neg {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  border: 1px solid rgba(248, 113, 113, 0.25) !important;
}


.bl-tome-entry,
.bl-adventure-entry {
  background: var(--gm-accent-05) !important;
  border: 1px solid var(--gm-accent-12) !important;
  color: color-mix(in srgb, var(--text-primary) 90%, transparent) !important;
}

.bl-tome-entry:hover,
.bl-adventure-entry:hover {
  background: var(--gm-accent-12) !important;
  border-color: var(--gm-accent-28) !important;
}


.bl-roll-overlay {
  background: rgba(0, 0, 0, 0.82) !important;
}

.bl-roll-panel--overlay {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.80) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  clip-path: inset(0 round 14px) !important;
}

/* Panel: fixed height + top-anchored so btn-area flex:1 fills the gap below content */
.bl-roll-panel--overlay.bl-rp {
  height: min(78dvh, 520px) !important;
  max-height: calc(100dvh - (2 * clamp(8px, 1.6vh, 18px))) !important;
  justify-content: flex-start !important;
}

/* middle stays compact so btn-area below it can grow */
.bl-roll-panel--overlay .bl-rp__middle {
  flex: 0 0 auto !important;
}

/* btn-area fills all remaining panel height; dismiss pushed to midpoint */
.bl-roll-panel--overlay .bl-rp__btn-area {
  flex: 1 !important;
  max-height: none !important;
  justify-content: space-between !important;
  padding-bottom: clamp(1.5rem, 5vh, 3rem) !important;
}

/* Disable both shimmer animations — glows bleed outside the panel */
@keyframes bl-rp-btn-shimmer {
  0%, 50%, 100% { box-shadow: none; }
}

/* filter:drop-shadow bleeds through clip-path — kill it at the property level on all states */
.bl-rp__die-wrap,
.bl-rp--idle .bl-rp__die-wrap,
.bl-rp--idle .bl-rp__die-wrap:hover {
  animation: none !important;
  filter: none !important;
}

/* Redefine the keyframe as a no-op for belt-and-suspenders */
@keyframes bl-rp-die-shimmer {
  0%, 50%, 100% { filter: none; }
}

/* Kill both idle shimmer animations at the selector level */
.bl-rp--idle .bl-rp__roll-btn:not(:disabled) {
  animation: none !important;
  box-shadow: none !important;
}

.bl-roll-panel__roll-btn,
.bl-roll-panel__submit-btn {
  background: linear-gradient(135deg, var(--gm-accent-25), var(--gm-accent-30)) !important;
  border: 1px solid var(--gm-accent-45) !important;
  color: color-mix(in srgb, var(--text-primary) 95%, transparent) !important;
  font-weight: 700;
  box-shadow: none !important;
}

.bl-roll-panel__roll-btn:hover:not(:disabled),
.bl-roll-panel__submit-btn:hover {
  background: linear-gradient(135deg, var(--gm-accent-38), var(--gm-accent-45)) !important;
  border-color: var(--gm-accent-65) !important;
}


/* Ensure text doesn't inherit tan/parchment from Celestial theme */
.book-right-page,
.bl-choices-slot,
.bl-character-page,
.bl-tome-page,
.bl-adventures-content {
  color: color-mix(in srgb, var(--text-primary) 90%, transparent) !important;
}

.bl-choices-header,
.bl-choices-freeform,
.bl-choices-empty,
.bl-choices-unfolding {
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent) !important;
}


.right-page-character-summary {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-primary) 82%, black) 0%,
    color-mix(in srgb, var(--bg-primary) 72%, black) 100%
  ) !important;
  border: 1px solid var(--gm-accent-22) !important;
  border-left: 3px solid var(--gm-accent-55) !important;
  color: color-mix(in srgb, var(--text-primary) 92%, transparent) !important;
}

.right-page-character-summary:first-of-type {
  border-left-width: 1px !important;
}

.right-page-character-summary--companion {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-primary) 72%, var(--spell-cast)) 0%,
    color-mix(in srgb, var(--bg-primary) 80%, black) 100%
  ) !important;
  border-left: 1px solid color-mix(in srgb, var(--spell-cast) 45%, transparent) !important;
  border-color: color-mix(in srgb, var(--spell-cast) 20%, transparent) !important;
}

.right-page-character__name,
.right-page-character__hp {
  color: color-mix(in srgb, var(--text-primary) 98%, transparent) !important;
}


.right-page-character-summary .combatant__hp-bar-fill,
.right-page-character-summary .bl-hp-bar-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--healing) 90%, transparent), color-mix(in srgb, var(--healing) 95%, transparent)) !important;
}

#sendButton {
  background: linear-gradient(
    135deg,
    var(--gm-accent-18) 0%,
    var(--gm-accent-22) 100%
  ) !important;
  border: 1px solid var(--gm-accent-28) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#sendButton:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--gm-accent-30) 0%,
    var(--gm-accent-35) 100%
  ) !important;
  border-color: var(--gm-accent-50) !important;
  box-shadow: 0 6px 18px var(--gm-accent-25) !important;
  transform: translateY(-2px) !important;
}

#sendButton:active:not(:disabled) {
  transform: translateY(0) !important;
}

#sendButton:disabled {
  background: var(--gm-accent-06) !important;
  border-color: var(--gm-accent-10) !important;
  color: var(--gm-accent-30) !important;
  opacity: 0.5 !important;
}

#sendButton.retry-mode {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--warning) 20%, transparent) 0%,
    color-mix(in srgb, var(--warning) 25%, transparent) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--warning) 38%, transparent) !important;
  color: color-mix(in srgb, var(--text-primary) 92%, var(--warning)) !important;
}

#sendButton.retry-mode:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--warning) 32%, transparent) 0%,
    color-mix(in srgb, var(--warning) 38%, transparent) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--warning) 55%, transparent) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--warning) 25%, transparent) !important;
}


/* -- Hide inline dice math chips (e.g. "1d20+5", "1d8+4") -------------------- */
/* The outcome text that follows the arrow (-> 16 vs AC 13) is preserved.    */
.dnd-dice {
  display: none;
}

.roll-prompt-dismiss {
  border-color: var(--glass-border);
  color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
  background: transparent;
}
.roll-prompt-dismiss:hover {
  background: var(--glass-bg);
  border-color: color-mix(in srgb, var(--text-primary) 25%, transparent);
  color: color-mix(in srgb, var(--text-primary) 75%, transparent);
}

/* NPC block */
.gm-npc {
  background: linear-gradient(135deg, color-mix(in srgb, var(--spell-cast) 18%, transparent), color-mix(in srgb, var(--spell-cast) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--spell-cast) 35%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--spell-cast) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* Quest block */
.gm-quest {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 14%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 24%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--warning) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* Table blocks */
.gm-table {
  border: 1px solid var(--gm-accent-18);
  box-shadow: 0 0 14px var(--gm-accent-06);
}
.gm-table th {
  background: var(--gm-accent-10);
  border-bottom-color: var(--gm-accent-30);
}
.gm-table tr:hover td {
  background: var(--gm-accent-05);
}



.loading-container {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--dice) 10%, var(--gm-bg-72)) 0%,
    color-mix(in srgb, var(--dice)  6%, var(--gm-bg-65)) 100%
  );
  border: 1px solid var(--gm-accent-32);
  box-shadow:
    0 0 28px var(--gm-accent-14),
    0 8px 32px color-mix(in srgb, black 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  animation: loading-container-breathe 3s ease-in-out infinite;
}

@keyframes loading-container-breathe {
  0%, 100% { box-shadow: 0 0 28px var(--gm-accent-14), 0 8px 32px color-mix(in srgb, black 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent); }
  50%       { box-shadow: 0 0 40px var(--gm-accent-26), 0 8px 32px color-mix(in srgb, black 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent); }
}

/* Spinner: dice-colored glowing arc */
.loading-circle {
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--dice) 0%, transparent) 0%,
    var(--gm-accent-15) 25%,
    var(--gm-accent-65) 70%,
    var(--dice) 100%
  );
  filter: drop-shadow(0 0 7px var(--gm-accent-60));
}

/* Progress bar track */
.loading-progress-bar {
  background: var(--gm-accent-08);
  box-shadow: inset 0 1px 3px color-mix(in srgb, black 40%, transparent), 0 0 8px var(--gm-accent-06);
}

/* Progress fill: dice-colored with glow */
.loading-progress-fill {
  background: linear-gradient(
    90deg,
    var(--dice) 0%,
    color-mix(in srgb, var(--dice) 80%, white) 50%,
    var(--dice) 100%
  );
  box-shadow: 0 0 8px var(--gm-accent-50);
}

/* Percent label */
.loading-status-percent {
  color: var(--text-primary);
  text-shadow: 0 0 8px var(--gm-accent-50);
}

/* Dots: glow pulse */
.loading-dots span {
  background-color: var(--gm-accent-80);
  box-shadow: 0 0 6px var(--gm-accent-50);
}