/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Which message shows in which state (Blazor toggles the classes on the dialog). */
.components-reconnect-first-attempt-visible[b-8nym999mly],
.components-reconnect-repeated-attempt-visible[b-8nym999mly],
.components-reconnect-failed-visible[b-8nym999mly],
.components-pause-visible[b-8nym999mly],
.components-resume-failed-visible[b-8nym999mly],
.components-rejoining-animation[b-8nym999mly] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8nym999mly],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8nym999mly],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8nym999mly],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8nym999mly],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8nym999mly],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8nym999mly],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8nym999mly] {
    display: inline-flex;
}

/* A toast, not a modal: fixed at the bottom, no backdrop, the page stays usable. */
#components-reconnect-modal[b-8nym999mly] {
    position: fixed;
    inset: auto auto 1.25rem 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.55rem 0.9rem;
    max-width: calc(100% - 2rem);
    z-index: 60;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 12px 40px oklch(0 0 0 / 0.35);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

#components-reconnect-modal[open][b-8nym999mly] {
    opacity: 1;
}

@starting-style {
    #components-reconnect-modal[open][b-8nym999mly] {
        opacity: 0;
    }
}

.components-reconnect-container[b-8nym999mly] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

/* Small spinner ring in the site's primary. */
.components-rejoining-animation[b-8nym999mly] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--primary) 25%, transparent);
    border-top-color: var(--primary);
    animation: components-rejoining-spin-b-8nym999mly 0.9s linear infinite;
}

@keyframes components-rejoining-spin-b-8nym999mly {
    to { transform: rotate(360deg); }
}
/* /Components/Ui/Carousel.razor.rz.scp.css */
/* Scoped styles for the screenshot carousel (CSS isolation: lives with the component). */
.carousel[b-ko0of23s9s] { position: relative; outline: none; }
.carousel-viewport[b-ko0of23s9s] {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / 0.06);
  box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.5);
  background: oklch(0.12 0.02 330);
}
html:not(.dark) .carousel-viewport[b-ko0of23s9s] { border-color: oklch(0 0 0 / 0.12); }
.carousel-slide[b-ko0of23s9s] { display: none; margin: 0; }
.carousel-slide.is-active[b-ko0of23s9s] { display: block; }
.carousel-slide img[b-ko0of23s9s] { display: block; width: 100%; height: auto; }
.carousel-caption[b-ko0of23s9s] { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted-foreground); text-align: center; min-height: 1.2rem; }
.carousel-cap[b-ko0of23s9s] { display: none; }
.carousel-cap.is-active[b-ko0of23s9s] { display: inline; }
.carousel-nav[b-ko0of23s9s] {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--foreground); border: 1px solid var(--border); cursor: pointer;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.3);
  opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.carousel:hover .carousel-nav[b-ko0of23s9s], .carousel:focus-within .carousel-nav[b-ko0of23s9s] { opacity: 1; }
.carousel-nav:hover[b-ko0of23s9s] { color: var(--primary); border-color: var(--primary); }
.carousel-prev[b-ko0of23s9s] { left: 0.75rem; }
.carousel-next[b-ko0of23s9s] { right: 0.75rem; }
.carousel-dots[b-ko0of23s9s] { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; }
.carousel-dot[b-ko0of23s9s] { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--border); border: 0; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.carousel-dot.is-active[b-ko0of23s9s] { background: var(--primary); transform: scale(1.25); }
/* /Widgets/BluePosts/BluePostsStrip.razor.rz.scp.css */
/* Subtle "blue post" accent: the forum blue for names, region badges and title hover. */
.blue-posts[b-9fqtez8vsp] { --blue: #4fb3ff; }
html:not(.dark) .blue-posts[b-9fqtez8vsp] { --blue: #1a7fd6; }
.blue-name[b-9fqtez8vsp] { color: var(--blue); }
.blue-heading[b-9fqtez8vsp] { color: var(--blue); }
.blue-region[b-9fqtez8vsp] { margin-left: 0.25rem; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.blue-title[b-9fqtez8vsp] { transition: color 0.15s ease; }
a:hover .blue-title[b-9fqtez8vsp] { color: var(--blue); }

/* Row separators: a hairline that fades out at both ends instead of a plain edge-to-edge rule. */
.blue-row + .blue-row[b-9fqtez8vsp] {
  position: relative;
}
.blue-row + .blue-row[b-9fqtez8vsp]::before {
  content: "";
  position: absolute; left: 0.25rem; right: 0.25rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border) 90%, var(--blue)) 25%, color-mix(in oklab, var(--border) 90%, var(--blue)) 75%, transparent);
}




/* Column heading in the two-region view (US | EU) */
.blue-col-heading[b-9fqtez8vsp] {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-foreground); padding: 0.15rem 0.25rem 0.35rem;
}


/* Two columns with air and a hairline between them */
@media (width >= 64rem) {
  .strip-col[b-9fqtez8vsp] { padding-right: 0.75rem; }
  .strip-col + .strip-col[b-9fqtez8vsp] { padding-right: 0; padding-left: 0.75rem; }
  .strip-col + .strip-col[b-9fqtez8vsp] { position: relative; }
  .strip-col + .strip-col[b-9fqtez8vsp]::before {
    content: ""; position: absolute; left: 0; top: 0.25rem; bottom: 0.25rem; width: 1px;
    background: linear-gradient(180deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
  }
}

.blue-col-heading[b-9fqtez8vsp] { display: flex; align-items: center; gap: 0.35rem; }

/* /Widgets/BluePosts/BluePostsWidget.razor.rz.scp.css */
/* Subtle "blue post" accent: the forum blue for names, region badges and title hover. */
.blue-posts[b-o3h1318qij] { --blue: #4fb3ff; }
html:not(.dark) .blue-posts[b-o3h1318qij] { --blue: #1a7fd6; }
.blue-name[b-o3h1318qij] { color: var(--blue); }
.blue-heading[b-o3h1318qij] { color: var(--blue); }
.blue-region[b-o3h1318qij] { margin-left: 0.25rem; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.blue-title[b-o3h1318qij] { transition: color 0.15s ease; }
a:hover .blue-title[b-o3h1318qij] { color: var(--blue); }

/* Row separators: a hairline that fades out at both ends instead of a plain edge-to-edge rule. */
.blue-row + .blue-row[b-o3h1318qij] {
  position: relative;
}
.blue-row + .blue-row[b-o3h1318qij]::before {
  content: "";
  position: absolute; left: 0.25rem; right: 0.25rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border) 90%, var(--blue)) 25%, color-mix(in oklab, var(--border) 90%, var(--blue)) 75%, transparent);
}


/* In the mobile block (above the content) keep it short: four rows. */
.widget-mobile .blue-row:nth-child(n+5)[b-o3h1318qij] { display: none; }

/* /Widgets/LodestoneNews/LodestoneNewsStrip.razor.rz.scp.css */
/* Lodestone accent: the Lodestone's own gold (it is gold on dark blue over there). */
.lodestone[b-qtf9js84mb] { --lode: #e0b95a; }
html:not(.dark) .lodestone[b-qtf9js84mb] { --lode: #8f6a14; }
.lodestone-heading[b-qtf9js84mb] { color: var(--lode); }
.lodestone-title[b-qtf9js84mb] { transition: color 0.15s ease; }
a:hover .lodestone-title[b-qtf9js84mb] { color: var(--lode); }
.lodestone-tag[b-qtf9js84mb] { margin-left: 0.35rem; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.lodestone-tag[data-category="maintenance"][b-qtf9js84mb] { color: #d9822b; }
.lodestone-tag[data-category="status"][b-qtf9js84mb] { color: #c94f4f; }
.lodestone-tag[data-category="updates"][b-qtf9js84mb] { color: var(--primary); }

/* Row separators: fading hairlines like the Blue Posts card. */
.lodestone-row + .lodestone-row[b-qtf9js84mb] { position: relative; }
.lodestone-row + .lodestone-row[b-qtf9js84mb]::before {
  content: ""; position: absolute; left: 0.25rem; right: 0.25rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border) 90%, var(--lode)) 25%, color-mix(in oklab, var(--border) 90%, var(--lode)) 75%, transparent);
}

/* Narrow (sharing the row with Blue Posts): one column, 3 topics + 2 news = five rows like its neighbour.
   Two columns once the card itself is wide enough. */
.lodestone-strip[b-qtf9js84mb] { container-type: inline-size; }
.strip-col-topics .lodestone-row:nth-child(n+4)[b-qtf9js84mb] { display: none; }
.strip-col-news .lodestone-row:nth-child(n+3)[b-qtf9js84mb] { display: none; }
/* stacked: the same fading hairline between the topics group and the news group */
.strip-col + .strip-col[b-qtf9js84mb] { position: relative; }
.strip-col + .strip-col[b-qtf9js84mb]::before {
  content: ""; position: absolute; left: 0.25rem; right: 0.25rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border) 90%, var(--lode)) 25%, color-mix(in oklab, var(--border) 90%, var(--lode)) 75%, transparent);
}
@container (min-width: 44rem) {
  .strip-col-topics .lodestone-row:nth-child(n+4)[b-qtf9js84mb], .strip-col-news .lodestone-row:nth-child(n+3)[b-qtf9js84mb] { display: block; }
  .lodestone-grid[b-qtf9js84mb] { grid-template-columns: 1fr 1fr; }
  .strip-col[b-qtf9js84mb] { padding-right: 0.75rem; }
  .strip-col + .strip-col[b-qtf9js84mb] { padding-right: 0; padding-left: 0.75rem; }
  .strip-col + .strip-col[b-qtf9js84mb]::before {
    left: 0; right: auto; top: 0.25rem; bottom: 0.25rem; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
  }
}