/* TitanMC production stability layer — 2026-07-12 */
/* Pageflow v6: route-aware cross-document motion. Navigation starts
   immediately; Chromium composites two root snapshots and legacy engines only
   animate the arriving document. No curtain, loader or artificial delay. */
@view-transition { navigation: auto; }

html {
  background: #08080d;
  color-scheme: dark;
}

/* The shared fixed navbar used a full-width live backdrop blur. On content-
   dense routes that forced the compositor to resample the page behind the bar
   on every scroll frame. A visually equivalent near-opaque surface keeps the
   premium depth while allowing scrolling to remain compositor-only. */
html body #navbar.nav,
html body .tryby-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #navbar.nav[data-titan-nav="shared"],
html body .tryby-nav[data-titan-nav="tryby"] {
  background: rgba(8, 8, 13, .985) !important;
}

/* Mode titles already own a dedicated animated radial glow pseudo-element.
   A second CSS `filter: drop-shadow()` on the title forced Chrome to reraster
   the entire hero whenever that pseudo-element or a particle moved (roughly
   30–40 FPS at 1440p). Keeping the authored glow and removing only the
   redundant filter restores compositor-speed motion without flattening the
   art direction. The class is attached only on the eight mode detail pages. */
body.titan-mode-detail-page .hero-title {
  filter: none !important;
}

html body {
  opacity: 1 !important;
  min-height: 100vh;
}

/* CLS guardrails for legacy content pages. These rules preserve the final
   geometry while moving nav offsets inside already-sized boxes, so first
   paint and hydrated paint occupy the same coordinates. */
:is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands) {
  inline-size: 1.25em;
  text-align: center;
}

main:has(> .titan-breadcrumb--page) {
  position: relative;
}

main > .titan-breadcrumb--page {
  position: absolute !important;
  inset: 0 0 auto !important;
  padding-top: 90px !important;
  pointer-events: none;
}

main > .titan-breadcrumb--page :is(a, [aria-current="page"]) {
  pointer-events: auto;
}

/* The shared effects bundle used to hide this link only after deferred JS ran,
   briefly leaving a 25px text row in normal flow on legacy articles. */
.skip-to-content:not(:focus) {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  transform: none !important;
}

.skip-to-content:focus {
  position: fixed !important;
  top: 8px !important;
  left: 50% !important;
  z-index: 100100 !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 18px !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
}

body > header.blog-hero {
  box-sizing: content-box !important;
  margin-top: 0 !important;
  padding-top: 64px !important;
}

body > header.blog-hero > .blog-hero-content {
  opacity: 0;
  animation: titanStableBlogHero .42s cubic-bezier(.16, 1, .3, 1) .28s both !important;
}

@keyframes titanStableBlogHero {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

body > .breadcrumb {
  margin-top: 0 !important;
  padding-top: 24px !important;
}

body > .blog-hero-img:has(+ .breadcrumbs) {
  aspect-ratio: auto !important;
  margin-top: 0 !important;
  padding-top: 84px !important;
}

body > .blog-hero-img:has(+ .breadcrumbs) img {
  aspect-ratio: 1200 / 630;
  height: auto !important;
  object-fit: cover;
}

@media (max-width: 768px) {
  main > .titan-breadcrumb--page {
    padding-top: 72px !important;
  }

  main > .titan-breadcrumb--page ol {
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow: hidden;
  }

  main > .titan-breadcrumb--page li:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Four legacy detail templates keep their breadcrumb as a direct body child;
   one even places it after the hero. The old global 24px reset moved those
   links underneath the fixed navigation. Anchor them to the same safe header
   line without changing document order or the route transition snapshot. */
html[data-titan-reveal-owner="local"] body > .breadcrumb {
  position: absolute !important;
  inset: 90px 0 auto !important;
  width: 100%;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  z-index: 12;
}

.titan-mode-detail-page :is(.hero-scroll, .scroll-indicator, .titan-mode-scroll-cue) {
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint style;
  isolation: isolate;
}

/* The authored mode pages used three fixed 200–400px circles with blur(80px).
   Even while their drift was paused, those layers repeatedly rasterized at
   33–100ms in controlled A/B runs. Preserve the same three pools of colour in
   one precomposed radial field: no filter, no moving full-screen texture and
   only one paint layer. Motion remains on the small compositor-owned scroll
   cue below, where it does not compromise frame pacing. */
body[data-mode-page] .ambient-orb--1 {
  display: block !important;
  visibility: visible !important;
  inset: -8vh -6vw !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  filter: none !important;
  opacity: .035 !important;
  /* Legacy fallback: a browser without color-mix still gets soft coloured
     pools instead of falling back to the page's old solid orb background. */
  background:
    radial-gradient(circle at 16% 24%, var(--accent, var(--gold, #d4a017)) 0%, transparent 76%),
    radial-gradient(circle at 82% 68%, var(--accent-light, var(--gold-light, #f5d061)) 0%, transparent 82%),
    radial-gradient(circle at 60% 52%, var(--gold, #d4a017) 0%, transparent 72%) !important;
  background:
    radial-gradient(circle at 16% 24%, var(--accent, var(--gold, #d4a017)) 0%, color-mix(in srgb, var(--accent, var(--gold, #d4a017)) 44%, transparent) 34%, transparent 76%),
    radial-gradient(circle at 82% 68%, var(--accent-light, var(--gold-light, #f5d061)) 0%, color-mix(in srgb, var(--accent-light, var(--gold-light, #f5d061)) 42%, transparent) 36%, transparent 82%),
    radial-gradient(circle at 60% 52%, var(--gold, #d4a017) 0%, color-mix(in srgb, var(--gold, #d4a017) 38%, transparent) 31%, transparent 72%) !important;
  contain: strict !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

body[data-mode-page] :is(.ambient-orb--2, .ambient-orb--3) {
  display: none !important;
}

/* Mode pages used two JavaScript scroll loops: one recalculated the complete
   document height for the progress bar, the other rewrote hero transform and
   opacity on every frame. Modern engines can run both effects declaratively
   on the compositor. The inline code remains as a fallback for older browsers
   and exits early when this feature is supported. */
@supports (animation-timeline: scroll()) {
  body[data-mode-page] .scroll-progress {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: titanModeScrollProgress linear both;
    animation-timeline: scroll(root block);
  }

  body[data-mode-page] .hero-content {
    animation: titanModeHeroScroll linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 80vh;
  }
}

@keyframes titanModeScrollProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes titanModeHeroScroll {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, 24vh, 0); }
}

@supports (animation-timeline: scroll()) {
  #titanScrollProgress[data-titan-native-scroll] {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: titanSharedScrollProgress linear both;
    animation-timeline: scroll(root block);
  }

  #titanBackToTop[data-titan-native-scroll] .btt-progress {
    animation: titanSharedBackToTopRing linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes titanSharedScrollProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes titanSharedBackToTopRing {
  from { stroke-dashoffset: 125.66; }
  to { stroke-dashoffset: 0; }
}

@supports (animation-timeline: scroll()) {
  #scrollProgress[data-shop-native-scroll] {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: titanShopScrollProgress linear both;
    animation-timeline: scroll(root block);
  }

  #bttRingFill[data-shop-native-scroll] {
    animation: titanShopBackToTopRing linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes titanShopScrollProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes titanShopBackToTopRing {
  from { stroke-dashoffset: 100.53; }
  to { stroke-dashoffset: 0; }
}

.titan-mode-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 26px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--accent, var(--gold, #d4a017));
  font-family: "Rajdhani", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0);
  animation: titan-mode-scroll-cue 2.2s ease-in-out infinite;
}

.titan-mode-scroll-cue i {
  font-size: .78rem;
}

@keyframes titan-mode-scroll-cue {
  0%, 100% { transform: translate3d(-50%, 0, 0); opacity: .58; }
  50% { transform: translate3d(-50%, 7px, 0); opacity: 1; }
}

@media (max-width: 768px) {
  html[data-titan-reveal-owner="local"] body > .breadcrumb {
    inset-block-start: 80px !important;
    padding-top: 8px !important;
  }

  html[data-titan-reveal-owner="local"] body > .breadcrumb .breadcrumb-inner {
    justify-content: flex-start;
    padding-inline: 16px;
    font-size: .76rem;
  }

  html[data-titan-reveal-owner="local"] body > .breadcrumb .breadcrumb-inner > :not(.current) {
    display: none !important;
  }

  html[data-titan-reveal-owner="local"] body > .breadcrumb .breadcrumb-inner .current::before {
    content: "\2190";
    margin-right: 8px;
    color: rgba(255, 255, 255, .48);
  }

  .titan-mode-scroll-cue {
    bottom: 18px;
  }
}

/* UHC stacks two full-width hero actions on narrow phones. Its authored
   40px cue offset left the 0–8px bounce overlapping the Discord action.
   Keep the cue animation intact while reserving a stable visual gap. */
@media (max-width: 480px) {
  body[data-mode-page="uhc"] .hero-scroll {
    bottom: 24px;
  }
}

/* Used only as a last-resort recovery marker; normal reveal transforms stay intact. */
html.titan-reveal-fallback body main section:not(.hero):not(.section-inview) > .container {
  opacity: 1 !important;
  transform: none !important;
}

/* Clean-rendering policy: procedural/static grain must never veil artwork,
   typography or 4K screenshots. Keep the authored light, grid and particle
   systems; remove only dedicated noise layers and their raster cost. */
.film-grain,
.grain {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background-image: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}

.hero-grain-overlay {
  display: none !important;
  visibility: hidden !important;
}

.hero-grain-overlay::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
  opacity: 0 !important;
  animation: none !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

html body[data-mode-page="skyblock"]::before,
html body[data-mode-page="survival"]::before,
html body[data-mode-page="uhc"]::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* First-frame motion for direct visits and hard reloads. force-motion marks
   exactly one route-owned surface during HTML parsing, so the shared navbar
   and the rest of the long document never become one oversized layer. */
html.titan-entry-pending:not(.titan-entry-play) [data-titan-entry-surface] {
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) scale(.998) !important;
  animation: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

html.titan-entry-pending:not(.titan-entry-play) #navbar[data-titan-nav] > .nav-inner {
  opacity: 0 !important;
  transform: translate3d(0, -7px, 0) !important;
}

html.titan-entry-pending.titan-entry-play #navbar[data-titan-nav] > .nav-inner {
  animation: titanEntryNavigation 460ms 35ms cubic-bezier(.16, 1, .3, 1) both !important;
}

html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="home"] [data-titan-entry-surface] {
  animation: titanEntryHome 620ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-route="friends"] [data-titan-entry-surface] {
  animation: titanEntryCommunityLeft 610ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-route="creators"] [data-titan-entry-surface] {
  animation: titanEntryCommunityRight 610ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="voice"] [data-titan-entry-surface] {
  animation: titanEntryVoice 540ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="commerce"] [data-titan-entry-surface] {
  animation: titanEntryCommerce 680ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="vote"] [data-titan-entry-surface] {
  animation: titanEntryVote 620ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="rankings"] [data-titan-entry-surface] {
  animation: titanEntryRankings 600ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="modes"] [data-titan-entry-surface] {
  animation: titanEntryModes 600ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="economy"] [data-titan-entry-surface] {
  animation: titanEntryEconomy 640ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}
html.titan-entry-pending.titan-entry-play[data-titan-entry-profile="standard"] [data-titan-entry-surface] {
  animation: titanEntryStandard 560ms 20ms cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes titanEntryNavigation {
  from { opacity: 0; transform: translate3d(0, -7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes titanEntryHome {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.992); }
  62% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryCommunityLeft {
  from { opacity: 0; transform: translate3d(-20px, 0, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryCommunityRight {
  from { opacity: 0; transform: translate3d(20px, 0, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryVoice {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(1.012); }
  58% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryCommerce {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(1.01); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryVote {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryRankings {
  from { opacity: 0; transform: translate3d(0, -12px, 0) scale(.996); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryModes {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryEconomy {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.994); }
  66% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanEntryStandard {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Native cross-document View Transition. The two snapshots overlap, so the
   URL starts loading immediately while the compositor carries the motion. */
::view-transition {
  background: #08080d;
}

::view-transition-group(root) { animation: titanRouteGroupHold 500ms linear both; }

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
  backface-visibility: hidden;
  mix-blend-mode: normal;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Shared navigation stays spatially anchored while page content moves beneath
   it. This removes the cheap-looking effect of sliding the whole browser UI. */
#navbar { view-transition-name: titan-site-navigation; }
#titanBottomNav { view-transition-name: titan-mobile-navigation; }

::view-transition-group(titan-site-navigation),
::view-transition-group(titan-mobile-navigation) {
  z-index: 20;
  animation: titanRouteGroupHold 300ms linear both;
}

::view-transition-old(titan-site-navigation),
::view-transition-old(titan-mobile-navigation) {
  animation: titanRouteNavOld 150ms linear both;
}

::view-transition-new(titan-site-navigation),
::view-transition-new(titan-mobile-navigation) {
  animation: titanRouteNavNew 280ms cubic-bezier(.16, 1, .3, 1) both;
}

::view-transition-old(root) {
  z-index: 1;
  animation: titanRouteOldStandard 240ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  z-index: 2;
  animation: titanRouteNewStandard 400ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes titanRouteGroupHold {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes titanRouteNavOld {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: .88; transform: translate3d(0, 0, 0); }
}

@keyframes titanRouteNavNew {
  from { opacity: .86; transform: translate3d(0, -2px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Standard navigation is intentionally restrained. Route profiles below
   replace it with a distinct spatial language where that meaning helps. */
@keyframes titanRouteOldStandard {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .72; transform: translate3d(-10px, 0, 0) scale(.996); }
}
@keyframes titanRouteNewStandard {
  from { opacity: .18; transform: translate3d(18px, 0, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanRouteOldStandardBack {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .72; transform: translate3d(10px, 0, 0) scale(.996); }
}
@keyframes titanRouteNewStandardBack {
  from { opacity: .18; transform: translate3d(-18px, 0, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html[data-titan-transition-direction='backwards']::view-transition-old(root),
html:active-view-transition-type(backwards)::view-transition-old(root) {
  animation-name: titanRouteOldStandardBack;
}
html[data-titan-transition-direction='backwards']::view-transition-new(root),
html:active-view-transition-type(backwards)::view-transition-new(root) {
  animation-name: titanRouteNewStandardBack;
}

/* Returning home is a reveal/fade, never a sideways page push. */
@keyframes titanHomeReturnOld {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .68; transform: translate3d(0, -5px, 0) scale(.992); }
}
@keyframes titanHomeReturnNew {
  from { opacity: .16; transform: translate3d(0, 14px, 0) scale(.994); }
  58% { opacity: .96; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-titan-transition-profile='home-return']::view-transition-old(root),
html:active-view-transition-type(home-return)::view-transition-old(root) {
  animation: titanHomeReturnOld 250ms cubic-bezier(.4, 0, 1, 1) both;
  box-shadow: none;
}
html[data-titan-transition-profile='home-return']::view-transition-new(root),
html:active-view-transition-type(home-return)::view-transition-new(root) {
  animation: titanHomeReturnNew 460ms cubic-bezier(.16, 1, .3, 1) both;
  box-shadow: 0 -1px rgba(245, 208, 97, .12), 0 -28px 84px rgba(212, 160, 23, .07);
}

/* Leaving home uses depth rather than recycling the home-return entrance. */
@keyframes titanHomeDepartOld {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .7; transform: translate3d(0, -5px, 0) scale(.988); }
}
@keyframes titanHomeDepartNew {
  from { opacity: .18; transform: translate3d(0, 12px, 0) scale(1.006); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-titan-transition-profile='home-depart']::view-transition-old(root),
html:active-view-transition-type(home-depart)::view-transition-old(root) {
  animation: titanHomeDepartOld 240ms cubic-bezier(.4, 0, 1, 1) both;
}
html[data-titan-transition-profile='home-depart']::view-transition-new(root),
html:active-view-transition-type(home-depart)::view-transition-new(root) {
  animation: titanHomeDepartNew 420ms cubic-bezier(.16, 1, .3, 1) both;
}

/* Znajomi <-> Twórcy are adjacent community spaces: a short, reversible
   lateral hand-off conveys direction without throwing the whole page. */
@keyframes titanCommunityOldForward {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .7; transform: translate3d(-12px, 0, 0) scale(.997); }
}
@keyframes titanCommunityNewForward {
  from { opacity: .16; transform: translate3d(22px, 0, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes titanCommunityOldBack {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .7; transform: translate3d(12px, 0, 0) scale(.997); }
}
@keyframes titanCommunityNewBack {
  from { opacity: .16; transform: translate3d(-22px, 0, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-titan-transition-profile='community-cross']::view-transition-old(root),
html:active-view-transition-type(community-cross)::view-transition-old(root) {
  animation: titanCommunityOldForward 230ms cubic-bezier(.4, 0, 1, 1) both;
}
html[data-titan-transition-profile='community-cross']::view-transition-new(root),
html:active-view-transition-type(community-cross)::view-transition-new(root) {
  animation: titanCommunityNewForward 440ms cubic-bezier(.16, 1, .3, 1) both;
}
html[data-titan-transition-profile='community-cross'][data-titan-transition-direction='backwards']::view-transition-old(root),
html:active-view-transition-type(community-cross):active-view-transition-type(backwards)::view-transition-old(root) {
  animation-name: titanCommunityOldBack;
}
html[data-titan-transition-profile='community-cross'][data-titan-transition-direction='backwards']::view-transition-new(root),
html:active-view-transition-type(community-cross):active-view-transition-type(backwards)::view-transition-new(root) {
  animation-name: titanCommunityNewBack;
}

/* Voice resolves as a cyan signal lock: no sideways movement. */
@keyframes titanVoiceOld {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .66; transform: translate3d(0, -4px, 0) scale(.992); }
}
@keyframes titanVoiceNew {
  from { opacity: .14; transform: translate3d(0, 9px, 0) scale(1.008); }
  62% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-titan-transition-profile='voice-signal']::view-transition-old(root),
html:active-view-transition-type(voice-signal)::view-transition-old(root) {
  animation: titanVoiceOld 180ms cubic-bezier(.4, 0, 1, 1) both;
}
html[data-titan-transition-profile='voice-signal']::view-transition-new(root),
html:active-view-transition-type(voice-signal)::view-transition-new(root) {
  animation: titanVoiceNew 340ms cubic-bezier(.16, 1, .3, 1) both;
  box-shadow: 0 -1px rgba(95, 227, 255, .42), 0 -34px 94px rgba(0, 191, 255, .12);
}
html[data-titan-transition-profile='voice-signal']::view-transition-group(root),
html:active-view-transition-type(voice-signal)::view-transition-group(root) {
  animation-duration: 340ms;
}

/* Marketplace / shop settle forward in depth with a restrained gold edge. */
@keyframes titanCommerceOld {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .68; transform: translate3d(0, -7px, 0) scale(.984); }
}
@keyframes titanCommerceNew {
  from { opacity: .16; transform: translate3d(0, 13px, 0) scale(1.012); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-titan-transition-profile='commerce']::view-transition-old(root),
html:active-view-transition-type(commerce)::view-transition-old(root) {
  animation: titanCommerceOld 260ms cubic-bezier(.4, 0, 1, 1) both;
}
html[data-titan-transition-profile='commerce']::view-transition-new(root),
html:active-view-transition-type(commerce)::view-transition-new(root) {
  animation: titanCommerceNew 480ms cubic-bezier(.16, 1, .3, 1) both;
  box-shadow: 0 -1px rgba(255, 226, 130, .44), 0 -36px 100px rgba(212, 160, 23, .13);
}

/* Voting opens vertically like a beacon being uncovered. */
@keyframes titanVoteOld {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: .7; transform: translate3d(0, -16px, 0) scale(.996); }
}
@keyframes titanVoteNew {
  from { opacity: .16; transform: translate3d(0, 26px, 0) scale(.998); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html[data-titan-transition-profile='vote']::view-transition-old(root),
html:active-view-transition-type(vote)::view-transition-old(root) {
  animation: titanVoteOld 240ms cubic-bezier(.4, 0, 1, 1) both;
}
html[data-titan-transition-profile='vote']::view-transition-new(root),
html:active-view-transition-type(vote)::view-transition-new(root) {
  animation: titanVoteNew 440ms cubic-bezier(.16, 1, .3, 1) both;
  box-shadow: 0 -1px rgba(245, 208, 97, .28), 0 -30px 82px rgba(212, 160, 23, .09);
}

/* Reload and same-document anchors do not impersonate route changes. */
html[data-titan-transition-profile='reload']::view-transition-old(root),
html[data-titan-transition-profile='reload']::view-transition-new(root),
html[data-titan-transition-profile='anchor']::view-transition-old(root),
html[data-titan-transition-profile='anchor']::view-transition-new(root),
html:active-view-transition-type(reload)::view-transition-old(root),
html:active-view-transition-type(reload)::view-transition-new(root),
html:active-view-transition-type(anchor)::view-transition-old(root),
html:active-view-transition-type(anchor)::view-transition-new(root) {
  animation: none;
  box-shadow: none;
}

/* Fallback: the link commits immediately. Keep the next document in normal
   layout and settle opacity only. Transforming the complete body generated a
   false ~1.9 CLS outlier and made rare non-View-Transition navigations jump. */
html.titan-route-fallback-in {
  --titan-fallback-duration: 420ms;
  --titan-fallback-opacity: .88;
}

html.titan-route-fallback-in body {
  pointer-events: none;
  opacity: var(--titan-fallback-opacity) !important;
  transform: none !important;
  transition: none !important;
}
html.titan-route-fallback-in.titan-route-profile-home-return {
  --titan-fallback-duration: 460ms;
  --titan-fallback-opacity: .86;
}
html.titan-route-fallback-in.titan-route-profile-community-cross {
  --titan-fallback-duration: 440ms;
}
html.titan-route-fallback-in.titan-route-profile-voice-signal {
  --titan-fallback-duration: 340ms;
  --titan-fallback-opacity: .86;
}
html.titan-route-fallback-in.titan-route-profile-commerce {
  --titan-fallback-duration: 480ms;
}
html.titan-route-fallback-in.titan-route-profile-vote {
  --titan-fallback-duration: 440ms;
}

html.titan-route-fallback-in.titan-route-fallback-play body {
  pointer-events: auto;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity var(--titan-fallback-duration) cubic-bezier(.16, 1, .3, 1) !important;
}

@media (max-width: 640px) {
  ::view-transition-group(root) { animation-duration: 460ms; }
}

/* Product policy explicitly keeps TitanMC route motion enabled even if the OS
   advertises reduced motion. These rules also beat generic page-level media
   queries that otherwise collapse the fallback to a single frame. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation-duration: 500ms !important; }
  ::view-transition-old(root) { animation-duration: 250ms !important; animation-iteration-count: 1 !important; }
  ::view-transition-new(root) { animation-duration: 460ms !important; animation-iteration-count: 1 !important; }
  html.titan-route-fallback-in.titan-route-fallback-play body {
    transition-duration: 320ms !important;
  }
  html[data-titan-transition-profile='voice-signal']::view-transition-group(root),
  html:active-view-transition-type(voice-signal)::view-transition-group(root),
  html[data-titan-transition-profile='voice-signal']::view-transition-new(root),
  html:active-view-transition-type(voice-signal)::view-transition-new(root) {
    animation-duration: 340ms !important;
  }
  html[data-titan-transition-profile='voice-signal']::view-transition-old(root),
  html:active-view-transition-type(voice-signal)::view-transition-old(root) {
    animation-duration: 180ms !important;
  }
}

html[data-titan-page="panel"] #content {
  padding-top: calc(var(--titan-launch-bar-height, 30px) + 82px) !important;
}

.titan-cookie-visible {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

.cookie-banner a,
.cookie-notice a,
.ck-banner a {
  color: #f5d061 !important;
  text-decoration-thickness: 1.5px;
}

.ach-row.off,
.achievement.locked,
.achievement-card.locked {
  color: rgba(242, 239, 232, .72) !important;
  opacity: .78 !important;
}

.titan-server-notice {
  width: min(760px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 11px 15px;
  border: 1px solid rgba(231, 76, 60, .34);
  border-radius: 12px;
  background: rgba(231, 76, 60, .09);
  color: #f2d6d2;
  font: 600 .84rem/1.45 "Rajdhani", sans-serif;
  text-align: center;
}

#titanServerDeliveryNotice.titan-server-notice {
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 15px;
  overflow: hidden;
  border: 1px solid rgba(212, 160, 23, .28);
  border-radius: 12px;
  background: rgba(212, 160, 23, .075);
  color: #eee7d7;
  transition: color .28s ease, border-color .28s ease, background-color .28s ease;
}

#titanServerDeliveryNotice.titan-server-notice::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #d4a017;
  box-shadow: 0 0 10px rgba(212, 160, 23, .55);
}

#titanServerDeliveryNotice.titan-server-notice[data-titan-state="online"] {
  border-color: rgba(46, 204, 113, .31);
  background: rgba(46, 204, 113, .075);
  color: #dff5e7;
}
#titanServerDeliveryNotice.titan-server-notice[data-titan-state="online"]::before {
  background: #46d982;
  box-shadow: 0 0 10px rgba(70, 217, 130, .55);
}
#titanServerDeliveryNotice.titan-server-notice[data-titan-state="offline"] {
  border-color: rgba(231, 76, 60, .34);
  background: rgba(231, 76, 60, .09);
  color: #f2d6d2;
}
#titanServerDeliveryNotice.titan-server-notice[data-titan-state="offline"]::before {
  background: #e74c3c;
  box-shadow: 0 0 10px rgba(231, 76, 60, .55);
}
#titanServerDeliveryNotice.titan-server-notice[data-titan-state="unknown"]::before {
  background: #e5aa35;
}

@media (max-width: 640px) {
  #titanServerDeliveryNotice.titan-server-notice {
    width: min(100% - 24px, 760px);
    height: 78px;
    padding: 9px 12px;
    font-size: .78rem;
    line-height: 1.28;
  }
}

/* An anchored shop visit must land on a stable target immediately. The
   section's ordinary reveal remains active for unanchored scrolling. */
#topup:target.section-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.titan-server-disabled,
[data-titan-server-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
  filter: saturate(.45) !important;
}

html[data-titan-server-state="offline"] .launch-tag,
html[data-titan-server-state="offline"] .hv4-status-chip {
  color: #ffe2de !important;
  -webkit-text-fill-color: currentColor !important;
  background: rgba(231, 76, 60, .13) !important;
  border-color: rgba(231, 76, 60, .36) !important;
  box-shadow: none !important;
}

html[data-titan-server-state="offline"] .mode-live-dot,
html[data-titan-server-state="offline"] .hv4-pulse,
html[data-titan-server-state="offline"] .hero-status-dot,
html[data-titan-server-state="offline"] .server-dot {
  background: #e74c3c !important;
  box-shadow: 0 0 9px rgba(231, 76, 60, .55) !important;
  animation: none !important;
}

.mode-live[data-titan-state="offline"] {
  color: #e99b91 !important;
}

.mode-live[data-titan-state="unknown"] {
  color: var(--text-dim, #8a8692) !important;
}

html[data-titan-server-state="loading"] .mode-live-dot,
html[data-titan-server-state="loading"] .hv4-pulse,
html[data-titan-server-state="loading"] .hero-status-dot,
html[data-titan-server-state="loading"] .server-dot,
html[data-titan-server-state="loading"] .vote-hero-online .pulse,
html[data-titan-server-state="unknown"] .mode-live-dot,
html[data-titan-server-state="unknown"] .hv4-pulse,
html[data-titan-server-state="unknown"] .hero-status-dot,
html[data-titan-server-state="unknown"] .server-dot,
html[data-titan-server-state="unknown"] .vote-hero-online .pulse {
  background: #8a8692 !important;
  box-shadow: none !important;
  animation: none !important;
}

.table-responsive,
.table-wrap,
.table-scroll,
.leaderboard-table-wrap,
.rank-table-wrap,
.transactions-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-section,
.compare-result,
.compare-card,
.compare-bars,
.compare-row,
.profile-card,
.rank-card {
  min-width: 0;
}

/* Desktop dropdowns stay fully keyboard reachable on every nav variant. */
#navbar .nav-dropdown:focus-within:not([data-titan-menu-closed]) .nav-dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#navbar .nav-dropdown-toggle:focus-visible,
#navbar .nav-dropdown-menu a:focus-visible {
  outline: 2px solid var(--gold, #d4a017) !important;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  html body #cookieBanner.cookie-banner .cookie-btn {
    min-height: 44px !important;
    padding-block: 9px !important;
  }
}

/* The route snapshot already supplies the page-level entrance. Do not stack
   the delayed TitanCreators hero fade on top of it: that combination created
   a dark mid-transition valley on /znajomi -> /tworcy. Direct visits keep the
   original staged hero entrance. */
html[data-titan-route-arrival="native"][data-titan-page="tworcy"] :is(
  .cr-hero-badge,
  .cr-title,
  .cr-subtitle,
  .hero-stats,
  .hero-cta-row
) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html[data-titan-route-arrival="native"][data-titan-page="tworcy"] .cr-title-gradient {
  opacity: 1 !important;
  transform: none !important;
  animation: heroGlow 4s ease-in-out infinite !important;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html[data-titan-page="panel"] #content {
    padding-top: calc(var(--titan-launch-bar-height, 0px) + 76px) !important;
  }

  .compare-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .compare-row .btn-compare {
    grid-column: 1 / -1;
    width: 100%;
  }

  table { max-width: 100%; }

  html[data-titan-page="wiki"] .wiki-mobile-toggle {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-titan-page="wiki"] .back-to-top,
  html[data-titan-page="wiki"] #backToTop {
    bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-titan-page="gracz"] .error-state > div,
  html[data-titan-page="gracz"] #errorState .error-state > div {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* Mode detail pages: replace live glass blur with optically equivalent,
   near-opaque surfaces. The old combination stacked 20+ backdrop filters on
   long pages and forced repeated backdrop rasterization while scrolling. */
body[data-mode-page] :is(
  .live-player-count,
  .hero-ip,
  #copyIP,
  #heroIP,
  #ipCopy,
  .hero-badge,
  .faq-item,
  .read-also,
  .related-card,
  .mode-card,
  .kit-card
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-mode-page] :is(.faq-item,.read-also,.related-card,.mode-card,.kit-card) {
  background: linear-gradient(145deg, rgba(24, 23, 33, .975), rgba(11, 11, 18, .992)) !important;
}

body[data-mode-page] :is(.live-player-count,.hero-ip,#copyIP,#heroIP,#ipCopy,.hero-badge) {
  background-color: rgba(19, 19, 29, .975) !important;
}

/* Mode detail CTA: keep the conversion action available without covering the
   hero or an in-flow CTA. The runtime toggles one state attribute only after
   the hero has left the viewport. A restrained compositor entrance replaces
   the permanent box-shadow pulse from the legacy shared stylesheet. */
@media (max-width: 768px) {
  html:is(
    [data-titan-page="survival"],
    [data-titan-page="bedwars"],
    [data-titan-page="prison"],
    [data-titan-page="skywars"],
    [data-titan-page="duels"],
    [data-titan-page="boxpvp"],
    [data-titan-page="skyblock"],
    [data-titan-page="uhc"]
  ) .mobile-sticky-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0) scale(.985);
    animation: none;
    transition:
      opacity .22s ease,
      transform .36s cubic-bezier(.16, 1, .3, 1),
      visibility 0s linear .36s;
    will-change: transform, opacity;
  }

  html:is(
    [data-titan-page="survival"],
    [data-titan-page="bedwars"],
    [data-titan-page="prison"],
    [data-titan-page="skywars"],
    [data-titan-page="duels"],
    [data-titan-page="boxpvp"],
    [data-titan-page="skyblock"],
    [data-titan-page="uhc"]
  ) .mobile-sticky-cta[data-titan-sticky-visible="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  }
}