:root {
  --dk-locked-text: #888;
  --dk-locked-border: #444;
  --auth-connecting-spinner-ring: rgba(255, 255, 255, 0.35);
  --auth-connecting-spinner-head: rgba(255, 255, 255, 0.95);
  --auth-reload-border: rgba(255, 255, 255, 0.35);
  --auth-reload-text: rgba(255, 255, 255, 0.95);
  --auth-reload-background: transparent;
}
/* Remove: body { background-color: #f8f9fa; } since it's now handled by themes */

#auth-container button {
  cursor: pointer;
}

#auth-container {
  max-width: 860px;
  margin: 0 auto;
}

body.is-logged-out #auth-container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.is-logged-out #dashboard-view,
body.is-logged-out #new-campaign-view,
body.is-logged-out #game-view,
body.is-logged-out #settings-view {
  display: none;
}

body.is-logged-out #auth-view.active-view {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 0 3.5rem;
  background: none;
}

body.is-logged-out .container.mt-4 {
  max-width: none;
  margin-top: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

/* Logged-out nav override: hide user dropdown/email and show sign-in indicator copy. */
body.is-logged-out .navbar .dropdown,
body.is-logged-out #user-email {
  display: none;
}

body.is-logged-out .navbar-brand::after {
  content: ' · Sign in';
  font-size: 0.9rem;
  opacity: 0.75;
}


/* Scrollable textarea styling */
.scrollable-textarea {
  max-height: 300px;
  overflow-y: auto;
}

#story-content p {
  white-space: pre-wrap;
  margin-bottom: 1rem;
}

/* Debug mode styles */
.debug-content {
  background-color: rgba(255, 193, 7, 0.1);
  border-left: 4px solid #ffc107;
  padding: 0.5rem;
  margin: 0.5rem 0;
  font-style: italic;
  color: #666;
}


/* Dice roll specific styling */
.debug-rolls {
  background-color: rgba(13, 202, 240, 0.1);
  border-left: 4px solid #0dcaf0;
  padding: 0.5rem;
  margin: 0.5rem 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #0c63e4;
}


/* Story entry container */
.story-entry {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


/* Session header styling */
.session-header {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  border-radius: 5px;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Planning block specific styling */
.planning-block {
  background-color: #e3f2fd;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  white-space: pre-wrap;
  font-family: inherit;
}

/* Structured fields styling */
.dice-rolls {
  background-color: #e8f4e8;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
}

.dice-rolls ul {
  margin: 5px 0;
  padding-left: 20px;
}

.resources {
  background-color: #fff3cd;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
}

.system-warnings {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
}

.system-warnings ul {
  margin: 5px 0;
  padding-left: 20px;
}

.living-world-updates {
  background-color: #f0e6ff;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
  border: 2px dashed #9966cc;
}

.living-world-section {
  margin-top: 8px;
}

.living-world-list {
  margin: 5px 0;
  padding-left: 20px;
}

.living-world-scene {
  background-color: #ffe6e6;
  padding: 5px;
  border-radius: 3px;
}

.living-world-complication {
  background-color: #ffcccc;
  padding: 5px;
  border-radius: 3px;
}

.debug-info {
  background-color: #f5f5f5;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  font-size: 0.9em;
}

.debug-info pre {
  margin: 5px 0;
}

#debug-indicator {
  background-color: #f8e88e;
  color: #5a5a5a;
  padding: 0.4rem 0.8rem;
  border-radius: 0.25rem;
  font-weight: bold;
  font-size: 0.875rem;
  display: none;
  white-space: nowrap;
}

#byok-indicator {
  background-color: #d1f5d3;
  color: #146c2e;
  padding: 0.4rem 0.8rem;
  border-radius: 0.25rem;
  font-weight: bold;
  font-size: 0.875rem;
  display: none;
  white-space: nowrap;
}

/* BYOK CTA banner — shown when no BYOK key is active */
#byok-cta {
  display: none;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.byok-cta-btn {
  background: linear-gradient(135deg, #7b68ee, #9d4edd);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.byok-cta-btn:hover {
  opacity: 0.85;
}

.byok-cta-dismiss {
  background: transparent;
  border: none;
  color: #888;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.byok-cta-dismiss:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #555;
}

.byok-cta-btn:focus-visible {
  outline: 2px solid #7b68ee;
  outline-offset: 2px;
}

.byok-cta-dismiss:focus-visible {
  outline: 2px solid #7b68ee;
  outline-offset: 2px;
}

/* Fantasy theme overrides for BYOK CTA */
[data-theme='fantasy'] .byok-cta-btn {
  background: linear-gradient(135deg, #d4a843, #c8860a);
  color: #0d0f1f;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  display: none;
}

#loading-overlay .spinner-border {
  width: 3rem;
  height: 3rem;
  color: white;
}

#auth-container .auth-connecting-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 4px solid var(--auth-connecting-spinner-ring, rgba(255, 255, 255, 0.35));
  border-top-color: var(--auth-connecting-spinner-head, rgba(255, 255, 255, 0.95));
  animation: auth-connecting-spin 1s linear infinite;
}

@keyframes auth-connecting-spin {
  to {
    transform: rotate(360deg);
  }
}

#auth-container .btn-reload {
  border: 1px solid var(--auth-reload-border, rgba(255, 255, 255, 0.35));
  color: var(--auth-reload-text, rgba(255, 255, 255, 0.95));
  background: var(--auth-reload-background, transparent);
  border-radius: 10px;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* View management */
#auth-view,
#dashboard-view,
#new-campaign-view,
#game-view,
#settings-view {
  display: none;
}

#auth-view.active-view,
#dashboard-view.active-view,
#new-campaign-view.active-view,
#settings-view.active-view {
  display: block;
}

#game-view.active-view {
  display: flex;
  flex-direction: column;
  height: 85vh;
}

/* Prevent any descendant (long pre blocks, wide tables, debug-info JSON,
   inline-editor inputs, the toolbar's nowrap pills) from forcing a
   horizontal scrollbar on the page. Without `overflow-x: clip` here a
   single child wider than the viewport — even one inside the scrollable
   #story-content — expands the document and shows a horizontal scrollbar
   at the page level. `clip` (vs `hidden`) is preferred because it does
   not establish a new scroll container, so it doesn't interfere with
   the existing `overflow-y: auto` on #story-content. */
#game-view {
  overflow-x: clip;
  max-width: 100%;
}

/* The toolbar inside #game-view is a flex row with `flex-wrap: wrap`,
   which lets *multiple* items drop to a new line when the row is too
   narrow. But flex items default to `min-width: auto`, which means they
   refuse to shrink below their intrinsic content width — so a long
   "🔍 Debug Mode Active" or "🟢 BYOK Active" pill, or any white-space:
   nowrap element, will pin the row to its content width and overflow the
   viewport. Adding `min-width: 0` on every direct child lets the row
   actually reflow multiple items onto a second line. It does NOT make a
   single item that is itself wider than the viewport wrap internally —
   that case is still caught by the page-level `overflow-x: clip` guard
   above (clipped/scroll-contained, not wrapped). See PR for the
   screenshot repro. */
#game-view > .d-flex.flex-wrap > * {
  min-width: 0;
}

/* The outer-row rule above only reaches the toolbar row's direct children
   (the title `<h2>` and the right-cluster `<div>`). The nowrap pills
   (`#debug-indicator`, `#byok-indicator`, `#byok-cta`) and the icon buttons
   are direct children of the right cluster, which is itself a
   `d-flex ... flex-wrap` element one level deeper. Without this second rule
   those pills keep `min-width: auto` and a single nowrap pill wider than the
   cluster's available width is clipped by the page-level `overflow-x: clip`
   guard instead of wrapping. Reaching the cluster's direct children lets
   the cluster reflow *multiple* pills onto a second line when they
   collectively overflow. A single pill that is itself wider than the
   cluster still overflows and is clipped by the page-level guard — not
   wrapped. */
#game-view > .d-flex.flex-wrap > .d-flex.flex-wrap > * {
  min-width: 0;
}

#story-content {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: clip;
  min-height: 0;
  min-width: 0;
  border: 1px solid;
  border-radius: 0.25rem;
  padding: 1rem;
}

/* Long unbroken tokens inside <pre> blocks (URLs, base64, JSON dumps,
   hex strings, debug_info state dumps) cannot be broken by
   `white-space: pre-wrap` alone — the wrap only happens at whitespace
   boundaries. `overflow-wrap: anywhere` lets the browser break inside
   a single token when no other wrap point exists, so the pre never
   blows past the container width. Combined with `max-width: 100%` on
   the pre element itself, this keeps the pre inside its parent even
   when the text is wider than the viewport. */
#story-content pre {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The "Load older entries" button is the first child of the scrollable
   #story-content container. With position: sticky it pinned itself to the
   scrollport top and floated over the narrative while the user read older
   entries (PR #8256). We want it to scroll with the content like a normal
   in-flow element and only be visible when the user is at the very top of
   the story — visibility is toggled by JS based on #story-content's
   scrollTop. Theme panel variables keep the button readable on light and
   dark themes. */
#load-older-btn {
  background-color: var(--panel-bg, #f4f5f6);
  color: var(--panel-text, #1f2328);
  border-color: var(--border-color, #dee2e6);
}

#interaction-form textarea {
  resize: vertical;
}

/* Icon button styling */
#shareStoryBtn,
#downloadStoryBtn {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
}

#shareStoryBtn i,
#downloadStoryBtn i {
  font-size: 1.1rem;
}

#downloadStoryBtn {
  background-color: #98fbcb !important;
  color: #222 !important;
  /* dark text for contrast */
  border: none;
}

#downloadStoryBtn:hover,
#downloadStoryBtn:focus {
  background-color: #7edbb2 !important;
  /* slightly darker mint for hover */
  color: #111 !important;
}


/* Navbar must create a stacking context above view containers.
   animation-helpers.js sets transform:translateY(0) on active views,
   which creates stacking contexts that would otherwise cover the dropdown. */
.navbar {
  z-index: 1050;
}
.navbar .dropdown-menu {
  z-index: 1051;
}

/* Navbar brand link styling */
a.navbar-brand {
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

a.navbar-brand:hover {
  opacity: 0.8;
  color: inherit;
}

/* ========== CAMPAIGN LIST STYLING ========== */

/* Ensure consistent campaign list layout between local and production */
.list-group-item[data-campaign-id] .campaign-list-header {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.list-group-item[data-campaign-id] .campaign-list-header .campaign-list-actions {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.list-group-item[data-campaign-id] .edit-campaign-btn {
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

.list-group-item[data-campaign-id] .text-muted {
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Ensure campaign title doesn't overflow */
.list-group-item[data-campaign-id] .campaign-list-header .campaign-title-link {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-right: 1rem !important;
}

@media (max-width: 575.98px) {
  .list-group-item[data-campaign-id] .campaign-list-header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .list-group-item[data-campaign-id] .campaign-list-header .campaign-list-actions {
    width: 100%;
    justify-content: flex-start;
    white-space: normal !important;
  }

  .list-group-item[data-campaign-id] .campaign-list-header .campaign-title-link {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-right: 0 !important;
  }
}

/* ========== STRUCTURED FIELDS STYLING ========== */

/* Session Header - Gray background with monospace font */
.session-header {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  border-radius: 5px;
}

/* God Mode Response - Purple border with emphasis */
.god-mode-response {
  background-color: #f8f4ff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #9c27b0;
}

.god-mode-response pre {
  margin: 10px 0 0 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow-x: auto;
}

/* Entities Mentioned - Light blue background */
.entities-mentioned {
  background-color: #e7f3ff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #2196f3;
}

.entities-mentioned ul {
  margin: 5px 0 0 20px;
  padding: 0;
}

/* Location Confirmed - Alice blue background */
.location-confirmed {
  background-color: #f0f8ff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #4169e1;
}

/* Dice Rolls - Light green background */
.dice-rolls {
  background-color: #e8f4e8;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #4caf50;
}

.dice-rolls ul {
  margin: 5px 0 0 20px;
  padding: 0;
}

/* Resources - Yellow background */
.resources {
  background-color: #fff3cd;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #ffc107;
}

/* System Warnings - Yellow background */
.system-warnings {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
}

.system-warnings ul {
  margin: 5px 0;
  padding-left: 20px;
}

/* Rewards Box - Green background */
.rewards-box {
  background-color: #d4edda;
  border: 2px solid #28a745;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  color: #155724;
}

.rewards-box strong {
  color: #155724;
}

/* Equipment Display - Light blue background */
.equipment-display {
  background-color: #e6f3ff;
  padding: 8px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #2196f3;
}

.equipment-display ul {
  margin: 5px 0;
  padding-left: 20px;
}

/* State Updates - Light gray background */
.state-updates {
  background-color: #f5f5f5;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #9e9e9e;
}

.state-updates pre {
  margin: 5px 0 0 0;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Planning Block - Light blue background */
.planning-block {
  background-color: #e3f2fd;
  padding: 15px;
  margin: 15px 0;
  border-radius: 5px;
  border-left: 4px solid #2196f3;
  white-space: pre-wrap;
}

/* Planning block choice buttons - simplified design */
.planning-block-choices {
  margin-top: 10px;
  margin-bottom: 0;
}

.choice-button {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  text-align: left;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: pre-wrap;
  font-family: inherit;
  color: #212529;
}

.choice-button:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.choice-button:active {
  background: #dee2e6;
}

.planning-block-thinking {
  margin-bottom: 0.5rem;
  font-style: italic;
  opacity: 0.8;
}

/* Debug Info - Light gray with nested sections */
.debug-info {
  background-color: #f8f9fa;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #dee2e6;
}

/* DM Notes - Light purple background */
.dm-notes {
  background-color: #f8f4ff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #9c27b0;
}

.dm-notes ul {
  margin: 5px 0 0 20px;
  padding: 0;
}

/* State Rationale - Light yellow background */
.state-rationale {
  background-color: #fff8e7;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-left: 4px solid #ff9800;
}


pre {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================
   Neutral Character Info Cards (stats/equipment/spells)
   Scoped under #game-view to avoid Bootstrap collisions
   ============================================ */
#game-view .stats-panel,
#game-view .info-card {
  background: var(--panel-bg, #f4f5f6);
  border: 1px solid var(--panel-border, #d0d4da);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  color: var(--panel-text, #1f2328);
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#game-view .stats-header,
#game-view .info-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}

#game-view .stat-badge,
#game-view .info-badge {
  background: var(--badge-bg, #e8eaed);
  border: 1px solid var(--panel-border, #d0d4da);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--badge-text, #202428);
}

#game-view .stat-badge.spell,
#game-view .info-badge.spell {
  background: var(--spell-badge-bg, #e6ebf7);
  border-color: var(--spell-badge-border, #c7d2ec);
  color: var(--spell-badge-text, #2f3b68);
}

#game-view .info-subtext {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

#game-view .stats-spellcasting,
#game-view .info-subrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

#game-view .stats-table,
#game-view .info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

#game-view .stats-table th,
#game-view .stats-table td,
#game-view .info-table th,
#game-view .info-table td {
  padding: 8px;
  border-bottom: 1px solid var(--panel-border, #d7dbe1);
  color: var(--panel-text, #1f2328);
  text-align: left;
}

#game-view .info-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

#game-view .stats-table th,
#game-view .info-table th {
  background: var(--badge-bg, #e8eaed);
  color: var(--badge-text, #2b2f34);
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

#game-view .compact-table th,
#game-view .compact-table td {
  padding: 6px 8px;
}

#game-view .features-section,
#game-view .info-block {
  background: var(--features-bg, #edf0f5);
  border: 1px solid var(--panel-border, #d0d4da);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.9rem;
  color: var(--panel-text, #1f2328);
}

#game-view .info-section-title {
  font-weight: 700;
  margin: 6px 0 4px;
  color: var(--panel-text, #1f2328);
  letter-spacing: 0.3px;
}

#game-view .stats-section {
  background: var(--stats-section-bg, #f1f2f4);
  border: 1px solid var(--stats-section-border, #d4d7dc);
  border-radius: 6px;
  padding: 10px;
  margin: 10px 0;
  font-size: 0.85rem;
  color: var(--badge-text, #2b2f34);
}

/* ========== SPLASH PAGE / LOGGED-OUT VIEW STYLING ========== */

/* Background image for logged-out state */
body.is-logged-out {
  min-height: 100vh;
}


/* Adjust navbar for logged-out state */
body.is-logged-out .navbar {
  background: transparent !important;
}
/* ============================================================
   WELCOME SCREEN — Dragon GCP login
   ============================================================ */
.welcome-screen {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dragon background */
.welcome-bg {
  position: absolute;
  inset: 0;
  background-image: url('/frontend_v1/images/twin_dragon.png');
  background-image: -webkit-image-set(url('/frontend_v1/images/twin_dragon.webp') 1x,
      url('/frontend_v1/images/twin_dragon.png') 1x);
  background-image: image-set(url('/frontend_v1/images/twin_dragon.webp') type('image/webp'),
      url('/frontend_v1/images/twin_dragon.png') type('image/png'));
  background-size: cover;
  background-position: center 45%;
  z-index: 0;
}

.welcome-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 6, 20, 0.65) 0%,
    rgba(10, 6, 20, 0.10) 25%,
    rgba(10, 6, 20, 0.08) 55%,
    rgba(10, 6, 20, 0.75) 100%
  );
  z-index: 1;
}

.welcome-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 75% at 50% 45%, transparent 30%, rgba(5, 3, 15, 0.65) 100%);
  z-index: 2;
}

.welcome-stars {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.welcome-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: star-twinkle 3s ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* Card */
.welcome-card {
  position: relative;
  z-index: 10;
  width: min(460px, calc(100% - 2rem));
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  background: rgba(8, 5, 22, 0.30);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(88, 28, 180, 0.20), 0 32px 64px rgba(0, 0, 0, 0.35);
}

.welcome-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.welcome-logo__icon {
  font-size: 3.5rem;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.6));
  animation: welcome-icon-float 4s ease-in-out infinite alternate;
}
@keyframes welcome-icon-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-logo__icon { animation: none; }
  .welcome-star       { animation: none; }
}

.welcome-logo__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #e8d5ff 0%, #a855f7 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.welcome-tagline {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f59e0b;
}

.welcome-desc {
  font-size: 0.85rem;
  color: #b8b2d8;
  line-height: 1.6;
  max-width: 320px;
}

/* Google button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: #ffffff;
  color: #1a1a2e;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.btn-google:hover {
  background: #f1f3f4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
.btn-google:disabled {
  cursor: default;
  box-shadow: none;
}
.btn-google:disabled:hover {
  box-shadow: none;
}
.btn-google__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-waitlist-requested,
.btn-waitlist-requested:hover {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #d1fae5;
}

.waitlist-status {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  text-align: left;
}

.waitlist-status--requested {
  background: rgba(6, 78, 59, 0.48);
  border: 1px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
}

.waitlist-status__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #10b981;
  color: #052e1b;
  font-weight: 800;
}

.waitlist-status__copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #d1fae5;
  font-size: 0.82rem;
  line-height: 1.35;
}

.waitlist-status__copy span {
  color: rgba(209, 250, 229, 0.78);
}

.welcome-legal {
  font-size: 0.7rem;
  color: rgba(168, 163, 200, 0.7);
  line-height: 1.5;
}
.welcome-legal a {
  color: rgba(168, 85, 247, 0.8);
  text-decoration: none;
}
.welcome-legal a:hover { text-decoration: underline; }

/* Ensure auth-view fills viewport for welcome screen */
body.is-logged-out #auth-view {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
body.is-logged-out #main-content {
  width: 100%;
  padding: 0;
}

/* ── Rate Limit Modal (always-loaded styles) ──────────────────────────────── */
.rate-limit-modal-content {
  border-radius: 16px !important;
  overflow: hidden;
  background-color: #ffffff !important;
  color: var(--text-primary, #0a0a0a) !important;
}

.rate-limit-modal-header,
.rate-limit-modal-body,
.rate-limit-modal-footer {
  background-color: #ffffff !important;
}

.rate-limit-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rate-limit-timer {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 0.5rem;
}

.rate-limit-timer-icon { color: #3b82f6; }

.rate-limit-byok-hint {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
}

.rate-limit-key-icon { color: #7b68ee; }

.rate-limit-settings-btn {
  background: linear-gradient(135deg, #7b68ee, #9d4edd) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px;
}

.rate-limit-settings-btn:hover,
.rate-limit-settings-btn:focus {
  background: linear-gradient(135deg, #9d4edd, #7b68ee) !important;
  color: #fff !important;
}

.rate-limit-close-secondary {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: inherit !important;
}

/* Wiki nav link (header) and campaign help link */
.wiki-nav-link {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Inline variant — used when the Wiki link sits next to the brand in the navbar. */
.wiki-nav-link--inline {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

/*
 * Pill variant — prominent, clickable-looking button in the navbar.
 *
 * Renders as a rounded pill with a translucent accent background and a
 * soft accent border so it reads as an interactive element even at rest.
 * Hover fills the pill with the accent color and inverts the text for a
 * clear "this is a button" affordance. Focus-visible gets a 2px outline
 * for keyboard accessibility.
 *
 * Uses color-mix() with safe fallbacks to var(--accent-hover-bg) so the
 * link degrades gracefully on browsers that do not support color-mix.
 */
.wiki-nav-link--pill {
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.32rem 0.67rem;
  border-radius: 999px;
  border: 1px solid var(--accent-hover-bg, rgba(13, 110, 253, 0.35));
  background-color: var(--accent-hover-bg, rgba(13, 110, 253, 0.1));
  color: var(--accent-color);
  letter-spacing: 0.005em;
  text-shadow: none;
  min-height: 25px;
  white-space: nowrap;
}

.wiki-nav-link--pill .wiki-nav-link__label {
  display: inline-flex;
  align-items: baseline;
}

.wiki-nav-link--pill .wiki-nav-link__sep {
  opacity: 0.55;
  font-weight: 500;
  padding: 0 0.15em;
}

.wiki-nav-link--pill .wiki-ext-icon {
  margin-left: 1px;
  opacity: 0.85;
}

.wiki-nav-link--pill:hover,
.wiki-nav-link--pill:focus-visible {
  color: var(--text-on-accent, #ffffff);
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
}

.wiki-nav-link--pill:hover .wiki-ext-icon,
.wiki-nav-link--pill:focus-visible .wiki-ext-icon {
  opacity: 1;
}

.wiki-nav-link--pill:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Light theme: stronger outline so the pill stays visible on light bg. */
[data-theme='light'] .wiki-nav-link--pill,
[data-theme='default'] .wiki-nav-link--pill {
  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/*
 * Social-pill nav links (Reddit, Discord) — sit immediately to the right
 * of the Knowledge-base / wiki pill. Distinct brand colors per platform
 * so each is visually recognizable as a community shortcut, not a
 * generic UI button. The pill geometry mirrors .wiki-nav-link--pill so
 * the row reads as a coherent cluster.
 */
.social-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  min-height: 25px;
}

.social-nav-link--pill {
  font-size: 0.67rem;
  padding: 0.32rem 0.67rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: transparent;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.social-nav-link--pill .social-nav-link__icon {
  flex-shrink: 0;
  opacity: 0.92;
}

.social-nav-link--pill .social-nav-link__label {
  display: inline-block;
}

/* Reddit — brand orange #FF4500 (readable on dark and light themes). */
.social-nav-link--reddit {
  color: #FF4500;
  border-color: color-mix(in srgb, #FF4500 35%, transparent);
  background-color: color-mix(in srgb, #FF4500 10%, transparent);
}

.social-nav-link--reddit:hover,
.social-nav-link--reddit:focus-visible {
  color: #ffffff;
  background-color: #FF4500;
  border-color: #FF4500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
}

.social-nav-link--reddit:hover .social-nav-link__icon,
.social-nav-link--reddit:focus-visible .social-nav-link__icon {
  opacity: 1;
}

.social-nav-link--reddit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Discord — brand blurple #5865F2 (readable on dark and light themes). */
.social-nav-link--discord {
  color: #5865F2;
  border-color: color-mix(in srgb, #5865F2 35%, transparent);
  background-color: color-mix(in srgb, #5865F2 10%, transparent);
}

.social-nav-link--discord:hover,
.social-nav-link--discord:focus-visible {
  color: #ffffff;
  background-color: #5865F2;
  border-color: #5865F2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
}

.social-nav-link--discord:hover .social-nav-link__icon,
.social-nav-link--discord:focus-visible .social-nav-link__icon {
  opacity: 1;
}

.social-nav-link--discord:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/*
 * Mobile navbar (<= 768px): keep all six elements (brand, wiki pill, reddit
 * pill, discord pill, user email, theme dropdown) on a single line at the
 * narrowest supported viewport (360px). The previous rule set shrunk the
 * pills but left the email + theme cluster in .navbar-nav.ms-auto at the
 * default Bootstrap size, so the ms-auto div wrapped to a new line, the
 * pills got crushed in the remaining space, and the wiki text disappeared.
 *
 * Strategy:
 *   - Pin the .container inside the navbar to a single line (flex-wrap:nowrap)
 *     and let flex auto-fit child widths rather than wrap onto a new row.
 *   - Mark every pill as flex-shrink:0 so its label cannot be cut off again.
 *   - Tighten pill font + padding + icon size so all three pills + brand fit.
 *   - Shrink the email font and force white-space:nowrap so the address
 *     stays on one line instead of wrapping into two stacked rows.
 *   - Compact the theme dropdown button to match the new pill rhythm.
 *   - Reduce inter-element margins via direct-child overrides on the
 *     container so we don't have to change the HTML.
 */
@media (max-width: 768px) {
  .navbar > .container {
    flex-wrap: nowrap !important;
    align-items: center;
    padding-left: 6px;
    padding-right: 6px;
    gap: 0;
  }
  .navbar > .container > .navbar-nav.ms-auto {
    margin-left: auto !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Brand: tighter spacing so the pill cluster has room. */
  .navbar > .container > a.navbar-brand {
    margin-right: 4px !important;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.1;
    flex-shrink: 0;
  }

  /* Pills: never shrink. Font 0.55rem (~8.8px) is the smallest legible
     size that still fits all three pills on one line at 390x844; the prior
     0.5rem (~8px) fell below the 8px legibility minimum CR flagged. Padding
     trimmed to 0.1rem 0.2rem to keep the same overall pill width. */
  .navbar > .container > .wiki-nav-link--pill,
  .navbar > .container > .social-nav-link--pill {
    flex-shrink: 0;
    margin-right: 2px !important;
    margin-left: 0 !important;
    font-size: 0.55rem;
    padding: 0.1rem 0.2rem;
    gap: 2px;
    min-height: 20px;
    line-height: 1.1;
  }
  /* Wiki pill needs at least 50px so the short "Wiki" label + icon stays
     visible at 360px (otherwise it gets clipped by tight flex sizing). */
  .navbar > .container > .wiki-nav-link--pill {
    min-width: 50px;
    padding: 0.1rem 0.25rem;
  }
  .navbar > .container > .social-nav-link--pill .social-nav-link__icon {
    width: 8px;
    height: 8px;
  }
  .navbar > .container > .wiki-nav-link--pill .wiki-ext-icon {
    width: 7px;
    height: 7px;
  }
  /* Show the short "Wiki" label instead of "Knowledge base / wiki" so the
     pill is wide enough for the label on a 360px viewport. */
  .navbar > .container > .wiki-nav-link--pill .wiki-nav-link__label-full {
    display: none;
  }
  .navbar > .container > .wiki-nav-link--pill .wiki-nav-link__label-short {
    display: inline;
  }

  /* Email: shrink, nowrap, drop its default 8px vertical padding so it
     matches the pill row's height instead of forcing a wrap.

     Overflow strategy: long emails (e.g. with +tags or long local parts)
     must truncate with "..." rather than expand the navbar past the
     viewport. flex-shrink: 1 + min-width: 0 + max-width + overflow:hidden
     + text-overflow:ellipsis is the standard flex-item truncation
     recipe. Without min-width: 0 the flex item refuses to shrink below
     its intrinsic content width, so flex-shrink: 1 alone is a no-op.
     The other navbar items (brand, pills, theme) keep flex-shrink: 0
     so they reserve their space; the email is the one element allowed
     to give up width under pressure. */
  .navbar > .container > .navbar-nav > .navbar-text#user-email {
    font-size: 0.6rem;
    line-height: 1.1;
    white-space: nowrap;
    padding: 0;
    margin: 0 4px 0 auto !important;
    flex-shrink: 1;
    min-width: 0;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Theme dropdown button: compact to match the new pill rhythm.
     flex-shrink: 0 matches the same invariant the brand, pills, and email
     use — every direct child of .navbar > .container must resist shrinking
     so a tight viewport cannot collapse the theme toggle. */
  .navbar > .container > .navbar-nav > .nav-item.dropdown > .dropdown-toggle {
    padding: 0.1rem 0.3rem;
    font-size: 0.8rem;
    line-height: 1.1;
    flex-shrink: 0;
  }
}

/* Desktop / tablet: show the full label, hide the short label. */
.wiki-nav-link--pill .wiki-nav-link__label-short {
  display: none;
}

.wiki-nav-link:hover {
  color: var(--accent-color);
  background-color: var(--accent-hover-bg, rgba(13, 110, 253, 0.1));
  text-decoration: none;
}

.wiki-nav-link:focus-visible {
  color: var(--accent-color);
  background-color: var(--accent-hover-bg, rgba(13, 110, 253, 0.1));
  text-decoration: none;
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.wiki-ext-icon {
  vertical-align: middle;
  flex-shrink: 0;
}

.wiki-campaign-help {
  color: var(--text-secondary);
}

.wiki-campaign-link {
  color: var(--accent-color);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.wiki-campaign-link:hover {
  color: var(--accent-color);
  text-decoration: none;
}

.wiki-campaign-link:focus-visible {
  color: var(--accent-color);
  text-decoration: none;
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dragon Knight Locked Input Styles */
:root {
  --dk-locked-text: #888;
  --dk-locked-border: #444;
}
.dk-locked-input {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--dk-locked-text, #888) !important;
  cursor: not-allowed;
  border-color: var(--dk-locked-border, #444) !important;
}

/* ==========================================================================
   ⚡ Premium Quick Start UI Design System (OSS Design Excellence)
   ========================================================================== */

/* Creation CTA pair — outlined glowing pill (Quick Start) alongside a filled
   glowing gradient pill (Custom Campaign). Both share the site's primary hue
   family: Bootstrap blue #0d6efd (default theme) / brand purple #a855f7
   (fantasy theme). The two buttons share padding/font metrics (border-width
   difference compensated in padding) so their heights match by construction. */
.quick-start-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.4375rem - 1px) 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #0b5ed7 !important;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.03));
  border: 2px solid rgba(13, 110, 253, 0.75);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(13, 110, 253, 0.3);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Glass sheen — a soft top-left highlight for a premium glossy feel (filled pill) */
.detailed-campaign-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140% 120% at 18% -20%, rgba(255, 255, 255, 0.22), transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Shimmer sweep bar, triggered on hover */
.quick-start-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 36%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transition: left 900ms ease;
  pointer-events: none;
}

.quick-start-btn-primary:hover::after {
  left: 130%;
}

.quick-start-btn-primary:hover {
  transform: translateY(-1px);
  background: rgba(13, 110, 253, 0.12);
  box-shadow: 0 0 18px rgba(13, 110, 253, 0.45);
  color: #0b5ed7 !important;
}

.quick-start-btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.quick-start-btn-primary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Fantasy theme override for Quick Start button — outlined dark pill with a
   glowing purple border */
[data-theme='fantasy'] .quick-start-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(88, 40, 140, 0.35)),
    rgba(22, 26, 53, 0.6);
  border-color: rgba(192, 132, 252, 0.9);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5), inset 0 0 14px rgba(168, 85, 247, 0.18);
}

[data-theme='fantasy'] .quick-start-btn-primary:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.42), rgba(110, 50, 175, 0.45)),
    rgba(30, 26, 60, 0.7);
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.65), inset 0 0 16px rgba(168, 85, 247, 0.24);
  color: #ffffff !important;
}

/* Bolt icon — plain white glyph directly on the gradient, no chip circle. */
.quick-start-bolt {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.quick-start-bolt svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Custom Campaign — the filled member of the CTA pair: glowing gradient pill
   with white text. 1px border vs the outlined pill's 2px, so its vertical
   padding carries the extra 1px to keep the rendered heights identical. */
.detailed-campaign-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #1d4ed8 0%, #0b5ed7 55%, #0c63e0 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 16px rgba(29, 78, 216, 0.45),
    0 6px 18px -6px rgba(29, 78, 216, 0.55);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Same hover shimmer sweep as the primary — the pair moves as a set, and the
   sweep is the "this is clickable" invitation cue on the secondary too. */
.detailed-campaign-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 36%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 900ms ease;
  pointer-events: none;
}

.detailed-campaign-btn:hover::after {
  left: 130%;
}

.detailed-campaign-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.26) inset, 0 0 22px rgba(29, 78, 216, 0.55),
    0 9px 22px -7px rgba(29, 78, 216, 0.65);
  color: #ffffff;
}

.detailed-campaign-btn:active {
  transform: translateY(0) scale(0.98);
}

.detailed-campaign-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.detailed-campaign-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
}

[data-theme='fantasy'] .detailed-campaign-btn {
  /* Lighter purple per operator direction. The lightest stop sits at ~3.4:1
     against white (AA large-text tier, not the 4.5:1 body-text tier) — an
     accepted tradeoff for the brighter look; the text-shadow keeps the bold
     white label crisp on the light end of the gradient. */
  background: linear-gradient(135deg, #b476f9 0%, #a855f7 45%, #9333ea 100%);
  border-color: rgba(233, 213, 255, 0.4);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25) inset, 0 0 18px rgba(168, 85, 247, 0.55),
    0 6px 18px -6px rgba(147, 51, 234, 0.55);
}

[data-theme='fantasy'] .detailed-campaign-btn:focus-visible {
  outline: 2px solid #c084fc;
  outline-offset: 2px;
}

[data-theme='fantasy'] .detailed-campaign-btn:hover {
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 0 26px rgba(168, 85, 247, 0.65),
    0 9px 22px -7px rgba(147, 51, 234, 0.65);
  color: #ffffff;
}

/* Quick Start Hero Feature Card for Zero-Campaign / Campaign Creation View.
   Accent re-tinted from teal to on-brand blue (default) / purple (fantasy) to
   match .btn-primary, same rationale as the button gradient above. */
.quick-start-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(13, 110, 253, 0.07), rgba(11, 94, 215, 0.04)), #fbfaf8;
  border: 1px solid rgba(13, 110, 253, 0.16);
  border-radius: 24px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 24px 60px -30px rgba(11, 94, 215, 0.35);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The card's background stays a fixed light tint (#fbfaf8) in BOTH themes,
   but the fantasy theme sets `body { color: ... }` to a near-white light
   lavender for the dark page background elsewhere on the page. Without this
   override the <h4> inherits that near-white body color and renders
   near-invisible against the card's own light background — it read as the
   heading "overlapping" the icon because the (barely visible) text sat
   underneath/behind the fully-opaque icon and badge rather than being
   genuinely unreadable text. `.text-muted` and the badge already set their
   own explicit colors, which is why only the plain <h4> was affected. */
.quick-start-hero-card h4 {
  color: #1e293b;
}

/* Same inheritance trap as the h4 above for the description line: Bootstrap's
   .text-muted resolves through --bs-secondary-color, which the fantasy theme
   tunes for the dark page background — too light for this card's fixed light
   surface (~3.3:1). Retune the variable inside the card to an AA-compliant
   slate. */
.quick-start-hero-card {
  --bs-secondary-color: #475569;
}

/* "Pre-built Campaign" badge: the stock text-success on bg-success-subtle
   pair is only ~3.5:1. Explicit AA-compliant green pair instead. */
.quick-start-hero-badge {
  background: #d1e7dd;
  color: #0f5132;
  border: 1px solid #a3cfbb;
}

/* Blurred accent blob, top-right — decorative atmosphere, non-interactive */
.quick-start-hero-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 110, 253, 0.18), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}

.quick-start-hero-card:hover {
  border-color: rgba(13, 110, 253, 0.32);
  box-shadow: 0 28px 68px -28px rgba(11, 94, 215, 0.45);
}

[data-theme='fantasy'] .quick-start-hero-card {
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.08), rgba(126, 34, 206, 0.04)), #fbfaf8;
  border-color: rgba(168, 85, 247, 0.18);
  box-shadow: 0 24px 60px -30px rgba(126, 34, 206, 0.35);
}

[data-theme='fantasy'] .quick-start-hero-card::before {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2), transparent 70%);
}

[data-theme='fantasy'] .quick-start-hero-card:hover {
  border-color: rgba(168, 85, 247, 0.36);
  box-shadow: 0 28px 68px -28px rgba(126, 34, 206, 0.45);
}

/* Standalone decorative icon (hero card headline) — plain emoji pulse, no glass chip */
.quick-start-icon-pulse {
  display: inline-block;
  animation: pulse-icon 2s infinite ease-in-out;
}

@keyframes pulse-icon {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(4, 120, 87, 0.5)); }
  50% { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(6, 95, 70, 0.8)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(4, 120, 87, 0.5)); }
}

@media (prefers-reduced-motion: reduce) {
  .quick-start-icon-pulse {
    animation: none;
  }
}

/* Button icon chip is intentionally static — see the "single carrying effect"
   note on .quick-start-btn-primary above. No continuous animation here. */

/* Hero card header row (icon + heading + "Pre-built Campaign" badge). The
   badge is a Bootstrap `.badge`, which is `white-space: nowrap` by default —
   it refuses to shrink below its full text width. In a non-wrapping flex
   row that leaves the `<h4>` to absorb ALL of the squeeze on narrow
   viewports: it shrinks to the width of its single longest word, wraps into
   a tall multi-line column, and `align-items: center` then centers the
   short icon on that tall column's vertical midpoint — visually landing the
   icon in the middle of the wrapped heading text. Letting the row wrap
   keeps the icon + heading on one line (heading gets the full row width to
   flow across, wrapping at most once) and pushes the badge to its own line
   instead of stealing the heading's width.
   Regression: quick-start mobile hero card icon/heading overlap. */
.quick-start-hero-header {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.quick-start-hero-header h4 {
  flex: 1 1 auto;
  min-width: 0;
}

.quick-start-hero-header .badge {
  flex-shrink: 0;
}

/* Dashboard "My Campaigns" header (title + Quick Start / Custom Campaign /
   settings CTA cluster). At <= 575.98px (Bootstrap's `sm` breakpoint, same
   cutoff the `flex-column flex-sm-row` utility pair on the row uses) the
   title stacks above the CTA cluster (HTML utility classes), and the CTA
   cluster itself wraps onto as many lines as it needs via `flex-wrap` so
   neither button is ever pushed off-screen or forced into a squeezed
   multi-line label. The "• Express Launch" suffix is hidden below `sm`
   (`.d-none.d-sm-inline` span in the HTML) so "Quick Start" stays a single
   line at its narrowest — a 3-line button label is what previously blew out
   the row height and horizontal scroll.
   Regression: quick-start mobile dashboard header overflow/wrap. */
@media (max-width: 575.98px) {
  .dashboard-header-row .quick-start-btn-primary,
  .dashboard-header-row .detailed-campaign-btn {
    font-size: 0.85rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}