/* Roll back the unlayered Vikinger button defaults that outrank Nova's
   utility-based Story controls. */
:where(.js_stories, .js_story-viewer, .js_composer) button:not(.button):not(.close-button) {
  all: revert-layer;
}

/* Recreate Nova's button baseline inside the utilities layer. Its specific
   size, surface and state classes can override these defaults as intended. */
@layer utilities {
  :where(.js_stories, .js_story-viewer, .js_composer) :where(button:not(.button):not(.close-button)) {
    appearance: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0 solid;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
  }
}

/*
 * Story UI adaptations for Gameskel's Vikinger theme.
 * Story playback and creation stay in Sngine's shared stories.js and
 * stories-composer.js files; this stylesheet only supplies theme-specific
 * layering and styling that the Nova utility bundle provided implicitly.
 */

body.vikinger-theme .js_story-viewer {
  /* Keep the story viewer above Vikinger's fixed header and floating widgets. */
  z-index: 100100;
}

body.vikinger-theme:has(.js_story-viewer, .js_composer) .modal__backdrop.open {
  /* Sngine confirmation and action dialogs must remain above the story UI. */
  z-index: 100200;
}

body.vikinger-theme .js_stories,
body.vikinger-theme .js_story-viewer,
body.vikinger-theme .js_composer {
  /*
   * Tailwind v5 utilities use these values as inputs to translate, scale and
   * gradient declarations. The generated reset does not provide them in this
   * rendering context, so seed the Story roots without changing other pages.
   */
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
  --tw-gradient-position: to bottom;
  --tw-gradient-from: #0000;
  --tw-gradient-via: #0000;
  --tw-gradient-to: #0000;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
}

body.vikinger-theme .js_composer-pick > span:first-child {
  background-color: #8b5cf6;
  background-image: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
}

body.vikinger-theme .js_composer-text-story > span:first-child {
  background-color: #0ea5e9;
  background-image: linear-gradient(135deg, #0ea5e9 0%, #4f46e5 100%);
}

body.vikinger-theme .js_story-backdrop.from-indigo-500.via-purple-500.to-pink-500,
body.vikinger-theme .js_composer-backdrop.from-indigo-500.via-purple-500.to-pink-500,
body.vikinger-theme .js_composer-background.from-indigo-500.via-purple-500.to-pink-500 {
  background-image: linear-gradient(135deg, var(--color-indigo-500, #6366f1) 0%, var(--color-purple-500, #a855f7) 50%, var(--color-pink-500, #ec4899) 100%);
}

body.vikinger-theme .js_story-backdrop.from-orange-400.via-rose-500.to-fuchsia-600,
body.vikinger-theme .js_composer-backdrop.from-orange-400.via-rose-500.to-fuchsia-600,
body.vikinger-theme .js_composer-background.from-orange-400.via-rose-500.to-fuchsia-600 {
  background-image: linear-gradient(135deg, var(--color-orange-400, #fb923c) 0%, var(--color-rose-500, #f43f5e) 50%, var(--color-fuchsia-600, #c026d3) 100%);
}

body.vikinger-theme .js_story-backdrop.from-cyan-400.via-sky-500.to-indigo-600,
body.vikinger-theme .js_composer-backdrop.from-cyan-400.via-sky-500.to-indigo-600,
body.vikinger-theme .js_composer-background.from-cyan-400.via-sky-500.to-indigo-600 {
  background-image: linear-gradient(135deg, var(--color-cyan-400, #22d3ee) 0%, var(--color-sky-500, #0ea5e9) 50%, var(--color-indigo-600, #4f46e5) 100%);
}

body.vikinger-theme .js_story-backdrop.from-emerald-400.via-teal-500.to-cyan-700,
body.vikinger-theme .js_composer-backdrop.from-emerald-400.via-teal-500.to-cyan-700,
body.vikinger-theme .js_composer-background.from-emerald-400.via-teal-500.to-cyan-700 {
  background-image: linear-gradient(135deg, var(--color-emerald-400, #34d399) 0%, var(--color-teal-500, #14b8a6) 50%, var(--color-cyan-700, #0e7490) 100%);
}

body.vikinger-theme .js_story-backdrop.from-pink-400.via-rose-400.to-amber-300,
body.vikinger-theme .js_composer-backdrop.from-pink-400.via-rose-400.to-amber-300,
body.vikinger-theme .js_composer-background.from-pink-400.via-rose-400.to-amber-300 {
  background-image: linear-gradient(135deg, var(--color-pink-400, #f472b6) 0%, var(--color-rose-400, #fb7185) 50%, var(--color-amber-300, #fcd34d) 100%);
}

body.vikinger-theme .js_story-backdrop.from-fuchsia-600.via-purple-700.to-indigo-900,
body.vikinger-theme .js_composer-backdrop.from-fuchsia-600.via-purple-700.to-indigo-900,
body.vikinger-theme .js_composer-background.from-fuchsia-600.via-purple-700.to-indigo-900 {
  background-image: linear-gradient(135deg, var(--color-fuchsia-600, #c026d3) 0%, var(--color-purple-700, #7e22ce) 50%, var(--color-indigo-900, #312e81) 100%);
}

body.vikinger-theme .js_story-backdrop.from-amber-300.via-orange-400.to-rose-500,
body.vikinger-theme .js_composer-backdrop.from-amber-300.via-orange-400.to-rose-500,
body.vikinger-theme .js_composer-background.from-amber-300.via-orange-400.to-rose-500 {
  background-image: linear-gradient(135deg, var(--color-amber-300, #fcd34d) 0%, var(--color-orange-400, #fb923c) 50%, var(--color-rose-500, #f43f5e) 100%);
}

body.vikinger-theme .js_story-backdrop.from-slate-700.via-slate-900.to-black,
body.vikinger-theme .js_composer-backdrop.from-slate-700.via-slate-900.to-black,
body.vikinger-theme .js_composer-background.from-slate-700.via-slate-900.to-black {
  background-image: linear-gradient(135deg, var(--color-slate-700, #334155) 0%, var(--color-slate-900, #0f172a) 50%, #000 100%);
}

/* Core Sngine creates Tabler class names dynamically; map the two missing
   Vikinger glyphs after the theme bridge converts them. */
body.vikinger-theme .vikinger-icon--align-right {
  --vikinger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 6h18M9 10h12M3 14h18M9 18h12'/%3E%3C/g%3E%3C/svg%3E");
}

body.vikinger-theme .vikinger-icon--arrows-diagonal {
  --vikinger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 4h6v6m0-6l-7 7M10 20H4v-6m0 6l7-7'/%3E%3C/g%3E%3C/svg%3E");
}


/* Bootstrap's .invisible uses !important and overrides the layered utility variant. Reveal only the active Story sheet. */
body.vikinger-theme .js_composer[data-panel="stickers"] .js_sheet[data-story-panel="stickers"],
body.vikinger-theme .js_composer[data-panel="mention"] .js_sheet[data-story-panel="mention"],
body.vikinger-theme .js_composer[data-panel="link"] .js_sheet[data-story-panel="link"],
body.vikinger-theme .js_composer[data-panel="draw"] .js_sheet[data-story-panel="draw"],
body.vikinger-theme .js_composer[data-panel="filter"] .js_sheet[data-story-panel="filter"],
body.vikinger-theme .js_composer[data-panel="background"] .js_sheet[data-story-panel="background"],
body.vikinger-theme .js_composer[data-panel="poll"] .js_sheet[data-story-panel="poll"],
body.vikinger-theme .js_composer[data-panel="audience"] .js_sheet[data-story-panel="audience"],
body.vikinger-theme .js_composer[data-panel="music"] .js_sheet[data-story-panel="music"] {
  visibility: visible !important;
}

/*
 * Nova app/HeroUI rules needed by the Story composer but not emitted in
 * Gameskel's utility bundle (some controls are created by Sngine JavaScript).
 * Keep the additions scoped to the composer and use Vikinger surface tokens.
 */
@layer utilities {
  body.vikinger-theme .js_composer .active\:scale-90:active {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  body.vikinger-theme .js_composer .aria-pressed\:scale-110[aria-pressed=true] {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  body.vikinger-theme .js_composer .aria-pressed\:border-white[aria-pressed=true] {
    border-color: var(--color-white, #fff);
  }

  body.vikinger-theme .js_composer .aria-pressed\:ring-white\/60[aria-pressed=true] {
    --tw-ring-color: #fff9;
  }

  @supports (color: color-mix(in oklab, white, transparent)) {
    body.vikinger-theme .js_composer .aria-pressed\:ring-white\/60[aria-pressed=true] {
      --tw-ring-color: color-mix(in oklab, var(--color-white, #fff) 60%, transparent);
    }
  }

  body.vikinger-theme .js_composer .border-white\/50 {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in oklab, white, transparent)) {
    body.vikinger-theme .js_composer .border-white\/50 {
      border-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
    }
  }

  body.vikinger-theme .js_composer .corner-squircle {
    corner-shape: squircle;
  }

  @supports (corner-shape: squircle) {
    body.vikinger-theme .js_composer [class~="supports-[corner-shape:squircle]:rounded-[1.25rem]"] {
      border-radius: 1.25rem;
    }
  }
}

body.vikinger-theme .js_composer .close-button--default {
  background-color: var(--vikinger-surface-raised, #dedeea);
  color: var(--vikinger-ink, #3e3f5e);
  color: color-mix(in srgb, var(--vikinger-ink, #3e3f5e) 65%, var(--vikinger-surface-soft, #f8f8fb) 35%);
}

@media (hover: hover) {
  body.vikinger-theme .js_composer .close-button--default:hover,
  body.vikinger-theme .js_composer .close-button--default[data-hovered="true"] {
    background-color: var(--vikinger-surface-raised, #dedeea);
    background-color: color-mix(in srgb, var(--vikinger-surface-raised, #dedeea) 96%, var(--vikinger-ink, #3e3f5e) 4%);
  }
}

body.vikinger-theme .js_composer .close-button--default:active,
body.vikinger-theme .js_composer .close-button--default[data-pressed="true"] {
  transform: scale(.93);
}