/** K4 per-stil inline CSS from source HTML landing files. Scoped to slotivo-kostur-d only. */
html[data-slotivo-template-ready] body[class*='slotivo-kostur-d'] {
  background-color: var(--background, #131313) !important;
  color: var(--on-background, #e5e2e1) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind important prefix scopes utilities to descendants — body utilities need explicit rules */
body[class*='slotivo-kostur-d'].bg-background {
  background-color: var(--background) !important;
}
body[class*='slotivo-kostur-d'].text-on-background {
  color: var(--on-background) !important;
}

body[class*='slotivo-kostur-d'][data-slotivo-stil='S1'].bg-background,
body[class*='slotivo-kostur-d']:not([data-slotivo-stil]).bg-background {
  background-color: #131313;
}

body[class*='slotivo-kostur-d'][data-slotivo-stil='S2'].bg-background {
  background-color: #0a0a0a;
}

/* Tailwind v4 color-mix breaks from-background/via-background/80 hero overlays — match source HTML */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S1'] .bg-gradient-to-r.from-background.via-background\/80.to-transparent,
body[class*='slotivo-kostur-d']:not([data-slotivo-stil]) .bg-gradient-to-r.from-background.via-background\/80.to-transparent,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S2'] .bg-gradient-to-r.from-background.via-background\/80.to-transparent {
  background-image: linear-gradient(
    to right,
    rgb(19, 19, 19),
    rgba(19, 19, 19, 0.8),
    transparent
  ) !important;
}

/* game-darktechbarber-ui-landing.html inline body block */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'].slotivo-kostur-darktech {
  background-color: #0c1324;
  color: #dce1fb;
}

/* S3 hero overlay — via-background/90 not /80 */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] .bg-gradient-to-r.from-background.via-background\/90.to-transparent {
  background-image: linear-gradient(
    to right,
    rgb(12, 19, 36),
    rgba(12, 19, 36, 0.9),
    transparent
  ) !important;
}

/* S4 hero overlay */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] .bg-gradient-to-r.from-background.via-background\/90.to-transparent {
  background-image: linear-gradient(
    to right,
    rgb(19, 19, 20),
    rgba(19, 19, 20, 0.9),
    transparent
  ) !important;
}

/* tokens-d .text-display-lg line-height must not beat Tailwind leading-none on hero */
body[class*='slotivo-kostur-d'] .font-display-lg.text-display-lg.leading-none,
body[class*='slotivo-kostur-d'] .text-display-lg.leading-none {
  line-height: 1 !important;
}

body[class*='slotivo-kostur-d'] .bg-surface\/95 {
  background-color: color-mix(in srgb, var(--surface) 95%, transparent);
}

body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home .fixed.inset-0 img,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home .fixed.inset-0 img {
  opacity: 0.6;
}

/* file:// Tailwind CDN skips white arbitrary drop-shadow on S3 mobile header */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home header h1 {
  filter: none !important;
}

body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #global-sidebar h1 {
  filter: none !important;
}

/* Tailwind v4 color-mix vs CDN rgba on footer social chips */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home footer a.rounded.border-primary\/30 {
  background-color: rgba(21, 27, 45, 0.5) !important;
}
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home footer a.rounded.border-primary\/30 {
  background-color: rgba(28, 27, 28, 0.5) !important;
}

/* CDN does not apply arbitrary shadow utilities on S3 watch-video button */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home footer button.backdrop-blur-md {
  box-shadow: none !important;
}

/* Tailwind v4 color-mix vs CDN rgba on S1/S2 footer social chips */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S1'] #screen-home footer a.rounded-full.border-primary\/20,
body[class*='slotivo-kostur-d']:not([data-slotivo-stil]) #screen-home footer a.rounded-full.border-primary\/20,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S2'] #screen-home footer a.rounded-full.border-primary\/20 {
  background-color: rgba(19, 19, 19, 0.5) !important;
}

/* tokens-d forces 24px on all material icons — HTML only sets font-variation-settings */
body[class*='slotivo-kostur-d'] .material-symbols-outlined.text-sm {
  font-size: 14px !important;
  line-height: 20px !important;
}

/* tokens-d forces 24px on all material icons — HTML active HUD uses text-xl (20px) */
body[class*='slotivo-kostur-d'] #screen-home nav a .material-symbols-outlined.text-xl {
  font-size: 20px !important;
  line-height: 28px !important;
}

/* tokens-d .text-ui-button (0.05em) beats Tailwind tracking-widest (0.1em) on HUD labels */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S1'] .tracking-widest.text-ui-button,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S1'] .tracking-widest.font-ui-button,
body[class*='slotivo-kostur-d']:not([data-slotivo-stil]) .tracking-widest.text-ui-button,
body[class*='slotivo-kostur-d']:not([data-slotivo-stil]) .tracking-widest.font-ui-button,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S2'] .tracking-widest.text-ui-button,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S2'] .tracking-widest.font-ui-button {
  letter-spacing: 0.1em !important;
}

/* tokens-d .text-label-caps (0.08em) beats Tailwind tracking-widest (0.1em) on HTML */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] .tracking-widest.text-label-caps,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] .tracking-widest.font-label-caps,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] .tracking-widest.text-label-caps,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] .tracking-widest.font-label-caps {
  letter-spacing: 0.1em !important;
}

body[class*='slotivo-kostur-d'] .opacity-30 {
  opacity: 0.3 !important;
}

/* S3/S4 — tracking-tighter + leading-none must beat tokens-d text-display-lg (-0.02em / lh 1.1) */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home .font-display-lg.text-display-lg.tracking-tighter.leading-none,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home .font-display-lg.text-display-lg.tracking-tighter.leading-none {
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

/* game-darktechbarber + game_cyberbarber inline mobile header clamp */
@media (max-width: 767px) {
  body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home > .relative.z-10 > header.md\:hidden h1,
  body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home > .relative.z-10 > header.md\:hidden h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
  }
}

/* Tailwind v4 color-mix on /80 HUD nav backgrounds — match source HTML rgba (active item only) */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home nav a[class*='border-primary/30'] {
  background-color: rgba(46, 52, 71, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home nav a[class*='border-primary/30'] {
  background-color: rgba(53, 52, 54, 0.8) !important;
}

/* file:// Tailwind skips zero-opacity drop-shadow; React v4 applies filter — match HTML */
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home nav a.border-transparent .material-symbols-outlined,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S3'] #screen-home nav a.border-transparent .font-label-caps,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home nav a.border-transparent .material-symbols-outlined,
body[class*='slotivo-kostur-d'][data-slotivo-stil='S4'] #screen-home nav a.border-transparent .font-label-caps {
  filter: none !important;
}

/*
 * Mobile K4: body scroll + transform on .game-screen breaks position:fixed hero layers
 * (background drifts with content). Each visible screen becomes its own scroll
 * container; body stays locked; backgrounds stay viewport-pinned.
 */
@media (max-width: 767px) {
  html[data-slotivo-template-ready] body[class*='slotivo-kostur-d']:has(.game-screen:not(.hidden)) {
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
    overscroll-behavior: none;
  }

  html[data-slotivo-template-ready] body[class*='slotivo-kostur-d'] .game-screen:not(.hidden) {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  html[data-slotivo-template-ready] body[class*='slotivo-kostur-d'] .game-screen:not(.hidden) > .fixed.inset-0 {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    transform: translateZ(0);
    backface-visibility: hidden;
    pointer-events: none;
  }

  html[data-slotivo-template-ready] body[class*='slotivo-kostur-d'] #screen-home .fixed.inset-0 img {
    animation: none !important;
    transform: none !important;
  }

  html[data-slotivo-template-ready] body[class*='slotivo-kostur-d'] .game-screen.slotivo-screen-enter {
    animation: k4-mobile-screen-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  html[data-slotivo-template-ready] body[class*='slotivo-kostur-d'] .game-screen.slotivo-screen-exit {
    animation: k4-mobile-screen-out 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }
}

@keyframes k4-mobile-screen-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes k4-mobile-screen-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}