/* =========================================================
   WasabiTales App Shell
   ========================================================= */

:root {
  color-scheme: dark;
  --bg-1: #100603;
  --bg-2: #160904;
  --bg-3: #221008;
  --panel: rgba(24, 11, 7, 0.88);
  --panel-2: rgba(31, 14, 8, 0.95);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 211, 53, 0.18);
  --text: #fff5dc;
  --muted: #ffdba7;
  --muted-2: rgba(255, 245, 220, 0.66);
  --yellow: #ffd335;
  --yellow-2: #fff1a6;
  --orange: #ff7a14;
  --green: #b6e55c;
  --cyan: #74dbff;
  --violet: #9e7bff;
  --danger: #ff7e87;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.22);
  --radius-xl: 1.5rem;
  --radius-lg: 1.1rem;
  --radius-md: 1rem;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--text);
  accent-color: var(--yellow);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 122, 20, 0.18), transparent 20%),
    radial-gradient(circle at 88% 12%, rgba(182, 229, 92, 0.12), transparent 18%),
    radial-gradient(circle at 50% 0%, rgba(255, 211, 53, 0.08), transparent 25%),
    linear-gradient(180deg, var(--bg-2) 0%, #0d0503 100%);
  scrollbar-color: rgba(255, 211, 53, 0.5) rgba(255, 255, 255, 0.04);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 211, 53, 0.05), transparent 14%),
    radial-gradient(circle at 80% 18%, rgba(182, 229, 92, 0.04), transparent 16%),
    radial-gradient(circle, rgba(255, 255, 255, 0.022) 1px, transparent 1.8px) 0 0 / 180px 180px;
}

body::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 10%, transparent 90%, rgba(255, 255, 255, 0.02));
  opacity: 0.35;
}

body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.7), rgba(255, 122, 20, 0.65));
  border-radius: 999px;
  border: 2px solid rgba(12, 5, 3, 0.92);
}

::selection {
  background: rgba(255, 211, 53, 0.26);
  color: #fffdf1;
}

img {
  max-width: 100%;
  display: block;
}

main,
nav,
header,
section,
footer,
.scroll-progress,
.back-top,
.ux-toast,
.skip-link,
.noscript-banner {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 0;
}

section,
header {
  scroll-margin-top: 104px;
}

code {
  color: #fff2b9;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.12rem 0.38rem;
  border-radius: 0.45rem;
}

/* =========================================================
   Accessibility / Typography helpers
   ========================================================= */

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1600;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  font-family: "Lilita One", cursive;
  color: #2b1404;
  background: linear-gradient(180deg, var(--yellow-2), var(--yellow) 60%, #ff9a1f);
  box-shadow: var(--shadow-soft);
  transform: translateY(-160%);
  transition: transform 0.24s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.noscript-banner {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 211, 53, 0.14);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.18), rgba(255, 122, 20, 0.08));
  color: #fff8e6;
}

.brand-font,
.navbar-brand,
.nav-link,
.nav-cta,
.hero-badge,
.display-title,
.section-title,
.card-title,
.section-kicker,
.pill,
.chip,
.mini-label,
.summary-card span,
.quick-link strong,
.nav-status span,
.form-label,
.footer-brand,
.toast-title,
.empty-title,
.alert-title,
.tabs .nav-link,
.rank-badge,
.status-pill,
.eyebrow,
.main-nav .dropdown-item strong,
.user-meta strong,
.user-card__meta strong {
  font-family: "Lilita One", cursive;
  letter-spacing: 0.02em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.dropdown-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.18rem rgba(255, 211, 53, 0.14), 0 0 0 0.4rem rgba(255, 122, 20, 0.12);
}

/* =========================================================
   Motion
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(10px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(182, 229, 92, 0.22), 0 0 18px rgba(182, 229, 92, 0.2);
  }
  50% {
    box-shadow: 0 0 0 0.45rem rgba(182, 229, 92, 0.06), 0 0 24px rgba(182, 229, 92, 0.28);
  }
}

@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-14px, 12px, 0); }
}

@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(4px); opacity: 1; }
}

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

/* =========================================================
   Global UI chrome
   ========================================================= */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 1500;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green));
  box-shadow: 0 0 18px rgba(255, 211, 53, 0.35);
}

.back-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(31, 14, 8, 0.98), rgba(18, 7, 4, 0.96));
  color: #fff3c7;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  z-index: 1300;
}

.back-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-top:hover {
  border-color: rgba(255, 211, 53, 0.28);
  transform: translateY(-3px) scale(1.02);
}

.ux-toast {
  position: fixed;
  left: 50%;
  bottom: 5rem;
  transform: translate(-50%, 14px);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(28, 12, 7, 0.98), rgba(15, 7, 4, 0.98));
  color: #fff9df;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1350;
  max-width: calc(100vw - 2rem);
  cursor: pointer;
  user-select: none;
}

.ux-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ux-toast__icon,
.nav-cta__icon,
.alert-box__icon,
.card-icon,
.quick-link__icon,
.empty-icon,
.nav-status i,
.user-avatar,
.nav-icon-btn i {
  display: grid;
  place-items: center;
}

.ux-toast__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 999px;
  background: rgba(255, 211, 53, 0.16);
  color: #fff3b1;
  border: 1px solid rgba(255, 211, 53, 0.18);
}

.loading-spinner {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.72s linear infinite;
}

/* =========================================================
   Navbar
   ========================================================= */

.main-nav {
  background: linear-gradient(180deg, rgba(16, 7, 4, 0.92), rgba(16, 7, 4, 0.72));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.main-nav.is-scrolled {
  background: linear-gradient(180deg, rgba(14, 6, 4, 0.96), rgba(14, 6, 4, 0.82));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  border-bottom-color: rgba(255, 211, 53, 0.12);
}

.navbar-brand {
  color: var(--yellow) !important;
  font-size: 1.7rem;
  text-shadow: 0 3px 0 var(--orange), 0 8px 24px rgba(255, 122, 20, 0.24);
}

.navbar-brand span {
  color: var(--green);
  text-shadow: 0 3px 0 #4f7f2d, 0 8px 24px rgba(124, 207, 82, 0.18);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.15);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 122, 20, 0.18);
}

.main-nav .nav-link {
  position: relative;
  padding: 0.85rem 1rem !important;
  color: rgba(255, 245, 220, 0.82) !important;
  font-size: 0.92rem;
  text-transform: uppercase;
  transition: color 0.25s ease, transform 0.25s ease;
}

.main-nav .nav-link--account {
  color: #b6e55c !important;
}

.main-nav .nav-link::before {
  content: "";
  position: absolute;
  inset: 0.32rem 0.28rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  z-index: -1;
}

.main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.38rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .nav-dropdown:hover > .nav-link,
.main-nav .nav-dropdown:focus-within > .nav-link {
  color: #fff !important;
  transform: translateY(-1px);
}

.main-nav .nav-link--account:hover,
.main-nav .nav-dropdown:hover > .nav-link--account,
.main-nav .nav-dropdown:focus-within > .nav-link--account {
  color: #cde972 !important;
}

.main-nav .nav-link:hover::before,
.main-nav .nav-link.active::before,
.main-nav .nav-dropdown:hover > .nav-link::before,
.main-nav .nav-dropdown:focus-within > .nav-link::before {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 211, 53, 0.18);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.12), rgba(255, 122, 20, 0.03));
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after,
.main-nav .nav-dropdown:hover > .nav-link::after,
.main-nav .nav-dropdown:focus-within > .nav-link::after {
  opacity: 1;
  transform: scaleX(1);
}

.main-nav .nav-link--account::after {
  background: linear-gradient(90deg, #cde972, #7fb63a);
}

.main-nav .nav-dropdown {
  position: relative;
}

@media (min-width: 992px) {
  .main-nav .nav-dropdown:hover > .dropdown-menu,
  .main-nav .nav-dropdown:focus-within > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .main-nav .nav-dropdown > .dropdown-toggle {
    pointer-events: none;
  }
}

.nav-meta-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: 1rem;
  flex-wrap: wrap;
}

.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #fff8dd;
}

.nav-status i {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(255, 211, 53, 0.12);
  border: 1px solid rgba(255, 211, 53, 0.16);
}

.nav-icon-btn,
.user-menu-toggle {
  position: relative;
  min-height: 46px;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  color: #fff5dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 24px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  backdrop-filter: blur(8px);
}

.nav-icon-btn {
  width: 46px;
  height: 46px;
  padding: 0;
}

.nav-icon-btn:hover,
.user-menu-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 211, 53, 0.18);
}

.nav-icon-btn i {
  font-size: 1.05rem;
  color: #fff3c7;
}

.nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb4ba, var(--danger));
  color: #2b1404;
  font-family: "Lilita One", cursive;
  font-size: 0.7rem;
  box-shadow: 0 10px 16px rgba(255, 126, 135, 0.25);
}

.nav-badge[hidden] {
  display: none !important;
}

.user-menu {
  position: relative;
}

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem 0.45rem 0.45rem;
}

.user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 1rem;
  font-size: 0.95rem;
  color: #2b1404;
  background: linear-gradient(180deg, var(--yellow-2), var(--yellow) 60%, #ff9a1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 10px 18px rgba(255, 122, 20, 0.18);
}

.user-avatar--lg {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-radius: 1.15rem;
  font-size: 1.05rem;
}

.user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.user-meta strong {
  color: #fff8e7;
  font-size: 0.95rem;
}

.user-meta small,
.user-card__meta small {
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.35rem 0.35rem 0.75rem;
}

.user-card__meta strong {
  display: block;
  color: #fff8ea;
  font-size: 1rem;
  line-height: 1;
}

.app-dropdown {
  min-width: 280px;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(31, 14, 8, 0.98), rgba(16, 7, 4, 0.96));
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34);
}

.account-dropdown {
  right: 0;
  left: auto;
  width: min(340px, calc(100vw - 1rem));
  padding: 0.65rem;
  border: 1px solid rgba(182, 229, 92, 0.18);
  border-radius: 8px;
  background: rgba(14, 7, 5, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.account-dropdown__head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.25rem 0.25rem 0.6rem;
  border-bottom: 1px solid rgba(255, 245, 220, 0.08);
}

.account-dropdown__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, #cde972, #7fb63a);
  color: #1f1007;
  font-family: "Lilita One", cursive;
  font-size: 1.1rem;
}

.account-dropdown__head span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.account-dropdown__head strong {
  overflow: hidden;
  color: #fff7dc;
  font-family: "Lilita One", cursive;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown__head small {
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.78rem;
}

.account-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.6rem 0 0.55rem;
}

.account-dropdown__grid a,
.account-dropdown__logout {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 38px;
  padding: 0.48rem 0.5rem;
  border-radius: 8px;
  color: rgba(255, 245, 220, 0.82);
  text-decoration: none;
}

.account-dropdown__grid a {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.account-dropdown__grid a:hover,
.account-dropdown__grid a:focus-visible,
.account-dropdown__logout:hover,
.account-dropdown__logout:focus-visible {
  color: #fff;
  background: rgba(182, 229, 92, 0.1);
}

.account-dropdown i {
  flex: 0 0 auto;
  color: #cde972;
  font-size: 0.95rem;
}

.account-dropdown__grid span,
.account-dropdown__logout span {
  overflow: hidden;
  font-family: "Lilita One", cursive;
  font-size: 0.82rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown__logout {
  justify-content: center;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 245, 220, 0.08);
  color: #ffd55f;
}

.logout-form {
  display: inline-flex;
  margin: 0;
}

.account-dropdown > .logout-form {
  display: block;
}

.logout-form .text-link {
  padding: 0;
  border: 0;
  background: transparent;
}

.rankings-dropdown {
  right: 0;
  left: auto;
  width: min(320px, calc(100vw - 1rem));
  padding: 0.55rem;
  border: 1px solid rgba(255, 211, 53, 0.14);
  border-radius: 8px;
  background: rgba(14, 7, 5, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.rankings-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.5rem 0.58rem;
  border-radius: 8px;
  color: rgba(255, 245, 220, 0.82);
  text-decoration: none;
}

.rankings-dropdown a:hover,
.rankings-dropdown a:focus-visible {
  color: #fff;
  background: rgba(255, 211, 53, 0.08);
}

.rankings-dropdown i {
  width: 24px;
  color: var(--yellow);
  font-size: 1rem;
  text-align: center;
}

.rankings-dropdown span {
  overflow: hidden;
  font-family: "Lilita One", cursive;
  font-size: 0.92rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-dropdown {
  right: 0;
  left: auto;
  width: 190px;
  min-width: 190px;
  padding: 0.45rem;
  border: 1px solid rgba(255, 211, 53, 0.16);
  border-radius: 10px;
  background: rgba(14, 7, 5, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}

.language-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: rgba(255, 245, 220, 0.84);
  text-decoration: none;
}

.language-dropdown__option:hover,
.language-dropdown__option:focus-visible,
.language-dropdown__option[aria-current="page"] {
  color: #fff;
  background: rgba(255, 211, 53, 0.1);
}

.language-dropdown__code {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 211, 53, 0.2);
  border-radius: 7px;
  background: rgba(255, 211, 53, 0.08);
  color: var(--yellow);
  font-family: "Lilita One", cursive;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.language-dropdown__name {
  min-width: 0;
  font-family: "Lilita One", cursive;
  font-size: 0.9rem;
  line-height: 1;
}

.language-dropdown__check {
  margin-left: auto;
  color: #b6e55c;
  font-size: 1rem;
}

.app-dropdown--guides {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

.app-dropdown .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.08);
}

.app-dropdown .dropdown-header {
  padding: 0.45rem 0.85rem 0.25rem;
  color: #cde972;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.app-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0.85rem;
  border-radius: 0.95rem;
  color: rgba(255, 245, 220, 0.82);
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: normal;
}

.app-dropdown button.dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
}

.app-dropdown .dropdown-item:hover,
.app-dropdown .dropdown-item:focus,
.app-dropdown .dropdown-item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.14), rgba(255, 122, 20, 0.06));
  transform: translateY(-1px);
}

.app-dropdown__empty {
  pointer-events: none;
}

.app-dropdown .dropdown-item i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--yellow);
}

.app-dropdown .dropdown-item span {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.app-dropdown .dropdown-item strong {
  font-size: 0.95rem;
  line-height: 1;
  color: #fff7dc;
}

.app-dropdown .dropdown-item small {
  color: rgba(255, 245, 220, 0.6);
  font-size: 0.78rem;
  line-height: 1.3;
}

/* =========================================================
   Buttons / Shared badges
   ========================================================= */

.btn-brand,
.btn-ghost,
.btn-discord,
.btn-info-soft,
.btn-danger-soft,
.nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 46px;
  padding: 0.88rem 1.2rem;
  font-family: "Lilita One", cursive;
  letter-spacing: 0.02em;
  border-radius: 1rem;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}

.btn-brand::before,
.btn-ghost::before,
.btn-discord::before,
.btn-info-soft::before,
.btn-danger-soft::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: -120% auto -120% -45%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-180%) rotate(15deg);
  transition: transform 0.8s ease;
  z-index: 0;
}

.btn-brand > *,
.btn-ghost > *,
.btn-discord > *,
.btn-info-soft > *,
.btn-danger-soft > *,
.nav-cta > * {
  position: relative;
  z-index: 1;
}

.btn-brand:hover::before,
.btn-ghost:hover::before,
.btn-discord:hover::before,
.btn-info-soft:hover::before,
.btn-danger-soft:hover::before,
.nav-cta:hover::before {
  transform: translateX(340%) rotate(15deg);
}

.nav-cta__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.btn-brand,
.nav-cta--gold {
  background: linear-gradient(180deg, var(--yellow-2), var(--yellow) 55%, #ff9a1f);
  color: #2b1404 !important;
  box-shadow: 0 14px 32px rgba(255, 122, 20, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 10px rgba(193, 90, 14, 0.18);
}

.btn-brand .nav-cta__icon,
.nav-cta--gold .nav-cta__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #2c1505;
}

.btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
}


.btn-discord {
  background: linear-gradient(180deg, rgba(129, 139, 255, 0.42), rgba(88, 101, 242, 0.9));
  color: #f9faff;
  border-color: rgba(162, 171, 255, 0.64);
  box-shadow: 0 0 0 1px rgba(139, 149, 255, 0.3), 0 14px 34px rgba(88, 101, 242, 0.45);
}

.btn-discord .nav-cta__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.btn-discord:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(175, 182, 255, 0.44), 0 18px 40px rgba(88, 101, 242, 0.52);
}

.btn-info-soft,
.nav-cta--violet {
  background: linear-gradient(180deg, rgba(133, 146, 255, 0.28), rgba(111, 134, 255, 0.18) 55%, rgba(88, 58, 255, 0.2));
  color: #f6f8ff !important;
  border-color: rgba(133, 146, 255, 0.38);
  box-shadow: 0 14px 32px rgba(111, 134, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-info-soft .nav-cta__icon,
.nav-cta--violet .nav-cta__icon {
  background: rgba(111, 134, 255, 0.14);
  color: #dce2ff;
}

.btn-danger-soft {
  background: linear-gradient(180deg, rgba(255, 140, 148, 0.22), rgba(255, 126, 135, 0.12));
  color: #fff5f6 !important;
  border-color: rgba(255, 126, 135, 0.28);
  box-shadow: 0 14px 32px rgba(255, 126, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-brand:hover,
.btn-ghost:hover,
.btn-discord:hover,
.btn-info-soft:hover,
.btn-danger-soft:hover,
.nav-cta:hover {
  transform: translateY(-3px) scale(1.015);
  filter: saturate(1.05);
}

.btn-brand.is-loading,
.btn-ghost.is-loading,
.btn-discord.is-loading,
.btn-info-soft.is-loading,
.btn-danger-soft.is-loading {
  pointer-events: none;
}

.btn-brand:disabled,
.btn-ghost:disabled,
.btn-discord:disabled,
.btn-info-soft:disabled,
.btn-danger-soft:disabled,
.nav-cta:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
  filter: saturate(0.75);
}

.section-kicker,
.pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff4bf;
  font-size: 0.92rem;
  backdrop-filter: blur(8px);
}

.section-kicker i,
.chip i {
  color: var(--green);
}

.pill {
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  border-color: rgba(255, 211, 53, 0.2);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.12), rgba(255, 122, 20, 0.08));
}

.pill--green {
  border-color: rgba(182, 229, 92, 0.22);
  background: linear-gradient(180deg, rgba(182, 229, 92, 0.14), rgba(124, 207, 82, 0.07));
  color: #efffcf;
}

.pill--violet {
  border-color: rgba(111, 134, 255, 0.22);
  background: linear-gradient(180deg, rgba(111, 134, 255, 0.14), rgba(111, 134, 255, 0.08));
  color: #edf0ff;
}

.badge-list,
.button-list,
.chip-list,
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: #fff7da;
  font-size: 0.88rem;
}

.badge-item i { color: var(--yellow); }

.badge-item.success {
  color: #efffcf;
  border-color: rgba(182, 229, 92, 0.22);
  background: linear-gradient(180deg, rgba(182, 229, 92, 0.14), rgba(124, 207, 82, 0.06));
}

.badge-item.info {
  color: #eef7ff;
  border-color: rgba(116, 219, 255, 0.2);
  background: linear-gradient(180deg, rgba(116, 219, 255, 0.14), rgba(111, 134, 255, 0.05));
}

.badge-item.warning {
  color: #fff4bf;
  border-color: rgba(255, 211, 53, 0.22);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.14), rgba(255, 122, 20, 0.05));
}

.badge-item.danger {
  color: #fff0f2;
  border-color: rgba(255, 126, 135, 0.22);
  background: linear-gradient(180deg, rgba(255, 126, 135, 0.14), rgba(255, 126, 135, 0.05));
}


.online-status-bar {
  position: relative;
  z-index: 5;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(255, 122, 20, 0.2), rgba(255, 211, 53, 0.2), rgba(182, 229, 92, 0.18)),
    rgba(8, 7, 16, 0.86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.online-status-bar__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: "Lilita One", cursive;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: #fff9e0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}

.online-status-bar__label {
  color: #fff2bf;
}

.online-status-bar__value {
  color: var(--yellow);
  text-shadow: 0 2px 0 var(--orange), 0 0 18px rgba(255, 211, 53, 0.45);
}

.online-status-bar__separator {
  margin: 0 0.3rem;
  color: rgba(255, 255, 255, 0.8);
}

.online-showcase--bottom {
  padding-bottom: 6.5rem;
}

.online-showcase__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: end;
  margin-bottom: 1.2rem;
}

.online-showcase__head .section-title {
  margin-bottom: 0.65rem;
}

.online-showcase__badges {
  justify-content: flex-end;
  max-width: 34rem;
}

.online-showcase-tools {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
}

.online-showcase-tools[hidden] {
  display: none;
}

.online-showcase-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 245, 220, 0.72);
}

.online-showcase-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff8e7;
  font: inherit;
}

.online-showcase-search input::placeholder {
  color: rgba(255, 245, 220, 0.5);
}

.online-showcase-pager {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.55rem;
  color: rgba(255, 245, 220, 0.78);
  font-size: 0.86rem;
}

.online-showcase-page-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.065);
  color: #fff3af;
}

.online-showcase-page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.online-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
}

.online-showcase-empty {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.95rem;
  align-items: center;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}

.online-showcase-empty__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  color: #2b1404;
  font-size: 1.55rem;
  background: linear-gradient(180deg, var(--yellow-2), var(--yellow) 60%, #ff9a1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 12px 22px rgba(255, 122, 20, 0.16);
}

.online-player-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.online-player-card.is-clickable {
  cursor: pointer;
}

.online-player-card.is-clickable:focus-visible {
  outline: 2px solid rgba(255, 211, 53, 0.88);
  outline-offset: 4px;
}

.online-player-card__avatar {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 211, 53, 0.32), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 211, 53, 0.75), rgba(255, 122, 20, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 12px 22px rgba(0, 0, 0, 0.16);
}

.online-player-card__avatar img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  image-rendering: pixelated;
}

.online-player-card__avatar.is-fallback {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 211, 53, 0.75), rgba(255, 122, 20, 0.72));
}

.online-player-card__initials {
  color: #2b1404;
  font-family: "Lilita One", cursive;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.online-player-card__body {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.online-player-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.online-player-card__copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.online-player-card__copy strong {
  display: block;
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 0.98rem;
  line-height: 1;
}

.online-player-card__copy span {
  color: rgba(255, 245, 220, 0.68);
  font-size: 0.82rem;
  line-height: 1.35;
}

.online-player-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.online-player-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 30px;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(182, 229, 92, 0.14);
  background: linear-gradient(180deg, rgba(182, 229, 92, 0.09), rgba(255, 255, 255, 0.02));
  color: rgba(255, 245, 220, 0.84);
  font-size: 0.78rem;
}

.online-player-card__meta i {
  color: var(--green);
}

.online-player-card__link,
.online-player-card__footer .hero-user-menu__roster-link {
  color: #fff3af;
  font-family: "Lilita One", cursive;
  font-size: 0.82rem;
  text-decoration: none;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: 4rem;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
}

.hero::before {
  inset: 0;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 34%), rgba(255, 232, 155, 0.16), transparent 18%),
    radial-gradient(circle at 18% 30%, rgba(255, 122, 20, 0.18), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(182, 229, 92, 0.12), transparent 16%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25));
}

.hero::after {
  top: 10%;
  left: 56%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 20, 0.28), transparent 60%);
  filter: blur(40px);
  opacity: 0.6;
  animation: floaty 10s ease-in-out infinite;
}

.hero-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: -1;
  opacity: 0.32;
  filter: blur(8px);
}

.hero-deco--1 {
  width: 300px;
  height: 300px;
  left: -4%;
  top: 18%;
  background: radial-gradient(circle, rgba(255, 122, 20, 0.34), transparent 72%);
  animation: floaty 12s ease-in-out infinite;
}

.hero-deco--2 {
  width: 240px;
  height: 240px;
  right: 4%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(182, 229, 92, 0.28), transparent 72%);
  animation: floaty 14s ease-in-out infinite reverse;
}

.hero-shell {
  padding-top: clamp(6.5rem, 10vw, 8rem);
  padding-bottom: 3rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: #fff4bf;
  font-size: 0.92rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.badge-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--green);
  animation: pulseGlow 2.3s ease-in-out infinite;
}

.display-title {
  font-size: clamp(3.1rem, 7.8vw, 6rem);
  line-height: 0.92;
  max-width: 11ch;
  color: var(--yellow);
  text-shadow: 0 4px 0 var(--orange), 0 10px 28px rgba(255, 122, 20, 0.22);
  text-wrap: balance;
}

.hero-copy {
  max-width: 44rem;
  font-size: 1.08rem;
}

.hero-copy.hero-brand-title-sm {
  max-width: none;
  text-wrap: initial;
}

.hero-brand-float {
  display: inline-grid;
  gap: 1rem;
  max-width: 33rem;
  position: relative;
  top: -1.1rem;
  animation: heroBrandFloat 3.2s ease-in-out infinite;
}

.hero-brand-logo {
  width: min(100%, 520px);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.34));
}


@keyframes heroBrandFloat {
  0%,
  100% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(8px);
  }
}

.hero-brand-title-sm {
  font-size: clamp(1.35rem, 2.9vw, 2.15rem);
  line-height: 1.05;
  max-width: 20ch;
  color: var(--yellow);
  text-shadow: 0 3px 0 var(--orange), 0 8px 20px rgba(255, 122, 20, 0.2);
  font-family: "Lilita One", cursive;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-scroll a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 245, 220, 0.76);
  font-family: "Lilita One", cursive;
  font-size: 0.95rem;
}

.hero-scroll a::after {
  content: "↓";
  color: var(--yellow);
  animation: scrollHint 1.6s ease-in-out infinite;
}

/* =========================================================
   Panels / cards / sections
   ========================================================= */

.section-block {
  padding: 6rem 0;
}

.section-title {
  margin: 1rem 0;
  font-size: clamp(2.7rem, 5vw, 4.2rem);
  line-height: 0.94;
  color: var(--yellow);
  text-shadow: 0 3px 0 var(--orange), 0 10px 20px rgba(255, 122, 20, 0.18);
  text-wrap: balance;
}

.section-text {
  max-width: 52rem;
}

.card-title {
  margin: 0.9rem 0 0.65rem;
  font-size: 1.8rem;
  line-height: 0.96;
  color: #fff4c8;
}

.eyebrow,
.mini-label {
  display: inline-flex;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: rgba(255, 245, 220, 0.7);
}

.eyebrow {
  color: #cde972;
  font-size: 0.85rem;
}

.panel-card,
.stat-card,
.summary-card,
.quick-link,
.form-progress {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--panel), rgba(16, 7, 4, 0.92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.11), transparent 22%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.06), transparent 34%, transparent 68%, rgba(255, 211, 53, 0.05));
  pointer-events: none;
}

.panel-card > * {
  position: relative;
  z-index: 1;
}

.panel-card:hover {
  border-color: rgba(255, 211, 53, 0.14);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.34);
}

.component-shell,
.extra-card,
.alert-shell,
.mini-card,
.info-card,
.hero-panel {
  padding: 1.25rem;
  height: 100%;
}

.hero-panel {
  background: linear-gradient(180deg, rgba(31, 15, 9, 0.96), rgba(12, 6, 4, 0.93));
}

.hero-links {
  margin-top: 2.5rem;
  padding: 1.15rem;
  background: linear-gradient(180deg, rgba(24, 11, 7, 0.84), rgba(13, 6, 4, 0.88));
}

.hero-links__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.quick-link {
  --accent: var(--yellow);
  display: block;
  min-height: 180px;
  padding: 1rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.28s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease;
}

.quick-link:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 211, 53, 0.18);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24);
}

.quick-link__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.95rem;
  border-radius: 1rem;
  font-size: 1.25rem;
  color: #fff7e3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), color-mix(in srgb, var(--accent) 65%, transparent));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-link strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.04;
  color: #fff7dc;
  margin-bottom: 0.5rem;
}

.quick-link span {
  display: block;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.5;
  font-size: 0.95rem;
  max-width: 18ch;
}

.stats-grid,
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.stats-grid {
  margin-bottom: 1rem;
}

.summary-grid {
  margin-bottom: 1.2rem;
}

.stat-card,
.summary-card {
  padding: 1rem 1.1rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover,
.summary-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 211, 53, 0.18);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

.stat-card span,
.summary-card span {
  display: block;
  color: rgba(255, 245, 220, 0.7);
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
}

.stat-card strong,
.summary-card strong {
  display: block;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1;
  color: #fffbe7;
}

.stat-card small,
.summary-card small {
  display: block;
  margin-top: 0.45rem;
  color: rgba(255, 245, 220, 0.6);
  font-size: 0.9rem;
  line-height: 1.35;
}

.info-grid,
.alerts-grid {
  display: grid;
  gap: 1.25rem;
}

.info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alerts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-icon,
.empty-icon {
  width: 74px;
  height: 74px;
  border-radius: 1.3rem;
  font-size: 1.7rem;
  color: #fff8d6;
  border: 1px solid rgba(255, 211, 53, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 211, 53, 0.22), rgba(255, 122, 20, 0.24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.16);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.card-icon--green {
  border-color: rgba(182, 229, 92, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(182, 229, 92, 0.24), rgba(124, 207, 82, 0.24));
}

.card-icon--violet {
  border-color: rgba(145, 120, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(145, 120, 255, 0.28), rgba(111, 134, 255, 0.24));
}

.panel-card:hover .card-icon {
  transform: rotate(-4deg) scale(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(255, 122, 20, 0.18);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  color: #fff3a6;
  font-family: "Lilita One", cursive;
  font-size: 0.95rem;
}

.text-link::after {
  content: "→";
  transition: transform 0.25s ease;
}

.text-link:hover::after {
  transform: translateX(4px);
}

.alert-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 1rem 1.05rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.alert-box__icon {
  width: 44px;
  height: 44px;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.15rem;
  color: #fff9df;
}

.alert-title {
  display: block;
  color: #fff8e8;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 0.22rem;
}

.alert-box p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 245, 220, 0.74);
}

.alert-box--success {
  border-color: rgba(182, 229, 92, 0.18);
  background: linear-gradient(180deg, rgba(182, 229, 92, 0.12), rgba(255, 255, 255, 0.02));
}

.alert-box--success .alert-box__icon {
  background: rgba(182, 229, 92, 0.16);
  color: #efffcf;
}

.alert-box--warning {
  border-color: rgba(255, 211, 53, 0.18);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.12), rgba(255, 255, 255, 0.02));
}

.alert-box--warning .alert-box__icon {
  background: rgba(255, 211, 53, 0.16);
  color: #fff4bf;
}

.alert-box--info {
  border-color: rgba(116, 219, 255, 0.18);
  background: linear-gradient(180deg, rgba(116, 219, 255, 0.12), rgba(255, 255, 255, 0.02));
}

.alert-box--info .alert-box__icon {
  background: rgba(116, 219, 255, 0.14);
  color: #eef7ff;
}

.alert-box--danger {
  border-color: rgba(255, 126, 135, 0.18);
  background: linear-gradient(180deg, rgba(255, 126, 135, 0.12), rgba(255, 255, 255, 0.02));
}

.alert-box--danger .alert-box__icon {
  background: rgba(255, 126, 135, 0.14);
  color: #fff1f3;
}

/* =========================================================
   Forms
   ========================================================= */

.form-grid,
.sidebar-grid,
.mini-list,
.timeline {
  display: grid;
  gap: 1rem;
}

.form-label {
  font-size: 0.84rem;
  color: #fff4bf;
  margin-bottom: 0.42rem;
}

.form-control,
.form-select,
.input-group-text {
  min-height: 54px;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
  color: #fff8e3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.form-control::placeholder {
  color: rgba(255, 219, 167, 0.48);
}

.form-control:hover,
.form-select:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 211, 53, 0.42) !important;
  box-shadow: 0 0 0 0.22rem rgba(255, 122, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 32px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-1px);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: rgba(182, 229, 92, 0.45) !important;
  box-shadow: 0 0 0 0.18rem rgba(182, 229, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 26px rgba(0, 0, 0, 0.18) !important;
  background-image: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: rgba(255, 126, 135, 0.45) !important;
  box-shadow: 0 0 0 0.18rem rgba(255, 126, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 26px rgba(0, 0, 0, 0.18) !important;
  background-image: none;
}

.form-control:disabled,
.form-select:disabled {
  color: rgba(255, 245, 220, 0.56) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  cursor: not-allowed;
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

.input-group-text {
  color: rgba(255, 245, 220, 0.72) !important;
  padding-inline: 1rem;
}

.form-select option {
  background: #1f0d07;
  color: #fff3d2;
}

.form-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.form-check-input {
  margin-top: 0.18rem;
  width: 1.15rem;
  height: 1.15rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}

.form-check-input:checked {
  background-color: var(--yellow);
  border-color: var(--yellow);
}

.form-check-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-check-label {
  color: rgba(255, 245, 220, 0.74);
  line-height: 1.45;
}

.form-note,
.validation-note {
  color: rgba(255, 245, 220, 0.68);
  font-size: 0.88rem;
  line-height: 1.45;
}

.form-helper-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.88rem;
}

.counter.is-limit {
  color: #fff4bf;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: #fff3c8;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.password-toggle:hover {
  border-color: rgba(255, 211, 53, 0.24);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(calc(-50% - 1px));
}

.strength-meter,
.meter-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.strength-meter i,
.meter-track i,
#formProgressBar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), var(--orange), var(--yellow), var(--green));
  box-shadow: 0 0 18px rgba(255, 211, 53, 0.24);
  transition: width 0.3s ease;
}

.form-progress {
  padding: 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.form-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.form-progress__head strong {
  display: block;
  color: #fff9e9;
  font-size: 1.9rem;
  line-height: 1;
  font-family: "Lilita One", cursive;
}

.mini-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.mini-item strong {
  display: block;
  color: #fff8e8;
  font-size: 1.1rem;
  line-height: 1;
}

.mini-item small {
  display: block;
  color: rgba(255, 245, 220, 0.6);
  font-size: 0.84rem;
  margin-top: 0.2rem;
}

.mini-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.mini-pill {
  min-width: 82px;
  color: #fff8e2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.mini-pill.success {
  color: #efffcf;
  border-color: rgba(182, 229, 92, 0.22);
  background: linear-gradient(180deg, rgba(182, 229, 92, 0.14), rgba(124, 207, 82, 0.06));
}

.mini-pill.warning {
  color: #fff4bf;
  border-color: rgba(255, 211, 53, 0.22);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.14), rgba(255, 122, 20, 0.06));
}

.mini-pill.info {
  color: #eef7ff;
  border-color: rgba(116, 219, 255, 0.22);
  background: linear-gradient(180deg, rgba(116, 219, 255, 0.14), rgba(111, 134, 255, 0.06));
}

.rank-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  font-size: 0.95rem;
  color: #2b1404;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 20px rgba(0, 0, 0, 0.16);
}

.rank-badge--1 { background: linear-gradient(180deg, #fff7c7, var(--yellow)); }
.rank-badge--2 { background: linear-gradient(180deg, #ffffff, #d8dde7); }
.rank-badge--3 { background: linear-gradient(180deg, #ffd7b6, #ff9f63); }
.rank-badge--default {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  color: #fff8e6;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.status-pill {
  font-family: "Lilita One", cursive;
}

.status-pill--published,
.status-pill--online {
  color: #efffd0;
  background: linear-gradient(180deg, rgba(182, 229, 92, 0.16), rgba(124, 207, 82, 0.07));
  border-color: rgba(182, 229, 92, 0.24);
}

.status-pill--review,
.status-pill--draft {
  color: #fff7d7;
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.16), rgba(255, 122, 20, 0.07));
  border-color: rgba(255, 211, 53, 0.24);
}

.status-pill--offline {
  color: #eef1ff;
  background: linear-gradient(180deg, rgba(111, 134, 255, 0.18), rgba(111, 134, 255, 0.07));
  border-color: rgba(111, 134, 255, 0.24);
}

/* =========================================================
   Extras / tabs / accordion / timeline / empty
   ========================================================= */

.breadcrumb-mini {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: rgba(255, 245, 220, 0.72);
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
  font-family: "Lilita One", cursive;
}

.breadcrumb-mini span::after {
  content: "/";
  margin-left: 0.55rem;
  opacity: 0.4;
}

.breadcrumb-mini span:last-child::after {
  display: none;
}

.tabs .nav-link {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: rgba(255, 245, 220, 0.82);
  padding: 0.75rem 1rem !important;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.tabs .nav-link.active {
  color: #2b1404 !important;
  border-color: rgba(255, 211, 53, 0.28);
  background: linear-gradient(180deg, var(--yellow-2), var(--yellow));
  box-shadow: 0 18px 32px rgba(255, 122, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.tabs .nav-link:hover {
  transform: translateY(-2px);
}

.accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem !important;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.accordion-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: #fff6d8;
  font-family: "Lilita One", cursive;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: #2b1404;
  background: linear-gradient(180deg, var(--yellow-2), var(--yellow));
}

.accordion-button::after {
  filter: invert(1) brightness(1.4);
}

.accordion-button:not(.collapsed)::after {
  filter: none;
}

.accordion-body {
  color: rgba(255, 245, 220, 0.74);
  line-height: 1.65;
}

.timeline {
  position: relative;
  gap: 0.9rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.4), rgba(111, 134, 255, 0.15));
}

.timeline-item {
  position: relative;
  padding-left: 2.3rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--yellow), var(--orange));
  box-shadow: 0 0 0 0.3rem rgba(255, 211, 53, 0.08);
}

.timeline-item strong {
  display: block;
  color: #fff7dd;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  font-family: "Lilita One", cursive;
}

.timeline-item small {
  display: block;
  color: rgba(255, 245, 220, 0.55);
  margin-top: 0.25rem;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  border-radius: 1.35rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.empty-icon {
  margin: 0 auto 1rem;
  border-radius: 1.25rem;
  font-size: 1.8rem;
}

.empty-title {
  color: #fff6d8;
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 0.45rem;
}

.empty-state p {
  max-width: 28rem;
  margin-inline: auto;
  color: rgba(255, 245, 220, 0.68);
}

.modal-content .btn-close {
  filter: invert(1) brightness(1.4);
}

/* =========================================================
   Modal / footer
   ========================================================= */

.modal-content {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(30, 14, 8, 0.98), rgba(12, 6, 4, 0.96));
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.36);
  color: var(--text);
  overflow: hidden;
}

.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.modal-title {
  color: #fff4bf;
  font-family: "Lilita One", cursive;
}

.site-footer {
  padding: 0 0 2rem;
}

.footer-inner {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 245, 220, 0.68);
}

.footer-brand {
  color: var(--yellow);
  font-size: 1.2rem;
  text-shadow: 0 3px 0 var(--orange);
}

.info-hub {
  margin-top: 1.5rem;
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
  gap: 1.25rem;
  align-items: end;
}

.section-intro__badges {
  justify-content: flex-end;
  align-self: center;
}

.section-intro__badges .badge-item {
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}

.info-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.info-hub-card {
  --accent: #ffd335;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1rem;
  padding: 1.35rem;
  height: 100%;
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, rgba(34, 15, 9, 0.96)), rgba(12, 5, 3, 0.97) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}

.info-hub-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%);
  opacity: 0.9;
  pointer-events: none;
}

.info-hub-card:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, rgba(255, 255, 255, 0.2));
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.3);
}

.info-hub-card:hover .info-hub-card__icon {
  transform: translateY(-4px) rotate(-5deg) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 34px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.22));
}

.info-hub-card:hover .info-hub-card__cta i {
  transform: translateX(4px);
}

.info-hub-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.info-hub-card__eyebrow,
.info-hub-card__state {
  display: inline-flex;
  font-family: "Lilita One", cursive;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-hub-card__eyebrow {
  color: color-mix(in srgb, var(--accent) 62%, #fff7df);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.02));
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.14));
}

.info-hub-card__state {
  margin-left: auto;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.info-hub-card__state i,
.info-hub-card__meta-row i {
  color: color-mix(in srgb, var(--accent) 72%, #fff0ad);
}

.info-hub-card__lead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.info-hub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 1.15rem;
  font-size: 1.45rem;
  color: #fff9e7;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, rgba(255, 255, 255, 0.16));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 52%, transparent), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.info-hub-card__content {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.info-hub-card .card-title {
  margin: 0;
  font-size: 1.52rem;
  line-height: 0.98;
}

.info-hub-card p {
  margin: 0;
  color: rgba(255, 245, 220, 0.78);
  line-height: 1.65;
}

.info-hub-card__feature-list,
.ranking-preview-list {
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-hub-card__feature-list li,
.ranking-preview-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.info-hub-card__feature-list i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 0.95rem;
  color: #fffaf0;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.14));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.04));
}

.info-hub-card__feature-list strong,
.ranking-preview-item strong {
  display: block;
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 0.97rem;
  line-height: 1;
  margin-bottom: 0.28rem;
}

.info-hub-card__feature-list small,
.ranking-preview-item small {
  display: block;
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.87rem;
  line-height: 1.45;
}

.ranking-preview-item {
  align-items: center;
}

.ranking-preview-item .rank-badge {
  width: 40px;
  height: 40px;
  border-radius: 0.95rem;
  font-size: 0.88rem;
}

.info-hub-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: auto;
}

.info-hub-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.info-hub-card__meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 36px;
  padding: 0.46rem 0.74rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  color: rgba(255, 245, 220, 0.88);
  font-size: 0.82rem;
}

.info-hub-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff2b3;
  font-family: "Lilita One", cursive;
  font-size: 0.95rem;
  line-height: 1;
}

.info-hub-card__cta i {
  transition: transform 0.25s ease;
}

.info-hub-card--general { --accent: #ffd335; }
.info-hub-card--quest { --accent: #7fd4ff; }
.info-hub-card--woe { --accent: #ff8c68; }
.info-hub-card--pvp { --accent: #59b8ff; }
.info-hub-card--zeny { --accent: #ffd35f; }
.info-hub-card--instancias { --accent: #a891ff; }
.info-hub-card--items { --accent: #93e76f; }
.info-hub-card--skills { --accent: #ff7ad1; }

/* =========================================================
   Ranking podium cards
   ========================================================= */

.ranking-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}

.ranking-stage-card {
  --accent: #ffd335;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.1rem;
  padding: 1.35rem;
  height: 100%;
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 28%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, rgba(31, 13, 8, 0.98)), rgba(10, 4, 2, 0.98) 64%);
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}

.ranking-stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.02)), transparent 18%),
    linear-gradient(130deg, rgba(255, 255, 255, 0.06), transparent 34%, transparent 66%, color-mix(in srgb, var(--accent) 8%, transparent));
  pointer-events: none;
}

.ranking-stage-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%);
  opacity: 0.92;
  pointer-events: none;
}

.ranking-stage-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent) 58%, rgba(255, 255, 255, 0.18));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.34);
}

.ranking-stage-card:hover .ranking-stage-card__icon {
  transform: translateY(-4px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 36px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.22));
}

.ranking-stage-card:hover .ranking-stage-card__cta i {
  transform: translateX(4px);
}

.ranking-stage-card__header {
  display: grid;
  gap: 0.9rem;
}

.ranking-stage-card__pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.ranking-stage-card__pill,
.ranking-stage-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "Lilita One", cursive;
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ranking-stage-card__pill {
  color: color-mix(in srgb, var(--accent) 64%, #fff7dc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.02));
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.14));
}

.ranking-stage-card__status {
  margin-left: auto;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.ranking-stage-card__title-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.ranking-stage-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 1.2rem;
  font-size: 1.5rem;
  color: #fff8ea;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, rgba(255, 255, 255, 0.16));
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.22), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 58%, transparent), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.ranking-stage-card__title-copy {
  display: grid;
  gap: 0.4rem;
}

.ranking-stage-card .card-title {
  margin: 0;
  font-size: 1.54rem;
  line-height: 0.98;
}

.ranking-stage-card p {
  margin: 0;
  color: rgba(255, 245, 220, 0.76);
  line-height: 1.6;
}

.ranking-stage-podium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-stage-podium > li:first-child {
  grid-column: 1 / -1;
}

.ranking-stage-entry {
  position: relative;
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 28px rgba(0, 0, 0, 0.18);
}

.ranking-stage-entry--champion {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 184px;
  padding: 1.08rem;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.14));
}

.ranking-stage-entry__rank {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.ranking-stage-entry__rank small,
.ranking-stage-entry__metric small,
.ranking-stage-entry__score small {
  display: block;
  color: rgba(255, 245, 220, 0.56);
  font-size: 0.7rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ranking-stage-entry__profile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.ranking-stage-entry__profile--compact {
  align-items: center;
}

.ranking-stage-entry__profile:hover,
.ranking-stage-entry__profile:focus-visible {
  transform: translateY(-2px);
}

.ranking-stage-entry__profile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 66%, #fff0b8);
  outline-offset: 4px;
  border-radius: 1rem;
}

.ranking-stage-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  color: #1b0b03;
  font-family: "Lilita One", cursive;
  font-size: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), color-mix(in srgb, var(--accent) 82%, #fff0b8));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.ranking-stage-avatar--lg {
  width: 72px;
  height: 72px;
  border-radius: 1.25rem;
  font-size: 1.18rem;
}

.ranking-stage-avatar--full {
  width: 78px;
  height: 92px;
  flex-basis: 78px;
}

.ranking-stage-avatar--full.ranking-stage-avatar--lg {
  width: 112px;
  height: 128px;
  flex-basis: 112px;
}

.ranking-stage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.ranking-stage-avatar--full img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: 4px;
}

.ranking-stage-avatar.is-fallback {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 211, 53, 0.75), rgba(255, 122, 20, 0.72));
}

.ranking-stage-avatar__initials {
  color: #2b1404;
  font-family: "Lilita One", cursive;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ranking-stage-avatar--lg .ranking-stage-avatar__initials {
  font-size: 1.18rem;
}

.ranking-stage-entry__copy {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.ranking-stage-entry__copy strong {
  display: block;
  margin: 0;
  color: #fff8eb;
  font-family: "Lilita One", cursive;
  font-size: 1.03rem;
  line-height: 1;
}

.ranking-stage-entry__copy span {
  display: block;
  color: rgba(255, 245, 220, 0.64);
  font-size: 0.84rem;
  line-height: 1.35;
}

.ranking-stage-entry__copy p {
  margin: 0.12rem 0 0;
  font-size: 0.88rem;
  line-height: 1.48;
  color: rgba(255, 245, 220, 0.74);
}

.ranking-stage-entry__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.ranking-stage-entry__stats span,
.ranking-stage-card__footer-badges span,
.ranking-stage-entry__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  color: rgba(255, 245, 220, 0.88);
  font-size: 0.78rem;
}

.ranking-stage-entry__stats i,
.ranking-stage-card__footer-badges i {
  color: color-mix(in srgb, var(--accent) 72%, #fff0ad);
}

.ranking-stage-entry__score {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0.24rem;
  text-align: right;
}

.ranking-stage-entry__score strong,
.ranking-stage-entry__metric strong {
  display: block;
  font-family: "Lilita One", cursive;
  line-height: 0.95;
  color: #fff6da;
}

.ranking-stage-entry__score strong {
  font-size: 1.8rem;
  color: color-mix(in srgb, var(--accent) 64%, #fff6da);
}

.ranking-stage-entry--secondary {
  align-content: start;
}

.ranking-stage-entry__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ranking-stage-entry__tag {
  min-height: 30px;
  padding-inline: 0.56rem;
  color: color-mix(in srgb, var(--accent) 62%, #fff3cb);
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.12));
}

.ranking-stage-entry__metric {
  display: grid;
  gap: 0.2rem;
}

.ranking-stage-entry__metric strong {
  font-size: 1.22rem;
}

.ranking-stage-card__footer {
  display: grid;
  gap: 0.78rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ranking-stage-card__footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ranking-stage-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff2b3;
  font-family: "Lilita One", cursive;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
}

.ranking-stage-card__cta i {
  transition: transform 0.25s ease;
}

.ranking-stage-card--woe { --accent: #ff8c68; }
.ranking-stage-card--pvp { --accent: #59b8ff; }
.ranking-stage-card--zeny { --accent: #ffd35f; }
.ranking-stage-card--online-time { --accent: #7ce6c0; }
/* =========================================================
   Responsive
   ========================================================= */

@media (min-width: 992px) {
  .hero-panel {
    transform: translateY(-6px);
  }
}

@media (max-width: 1199.98px) {
  .quick-links,
  .stats-grid,
  .summary-grid,
  .info-hub-grid,
  .ranking-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .section-intro {
    grid-template-columns: 1fr;
  }

  .section-intro__badges {
    justify-content: flex-start;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(31, 14, 8, 0.98), rgba(18, 7, 4, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34);
    overflow: visible;
  }

  .nav-meta-group {
    width: 100%;
    margin-left: 0;
    margin-top: 0.45rem;
    flex-direction: row;
    align-items: center;
  }

  .nav-meta-group .nav-cta {
    width: auto;
    justify-content: center;
  }

  .user-menu {
    flex: 1 1 100%;
  }

  .user-menu-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .hero {
    min-height: auto;
  }

  .online-showcase__head {
    grid-template-columns: 1fr;
  }

  .online-showcase__badges {
    justify-content: flex-start;
  }

  .online-showcase-tools {
    grid-template-columns: 1fr;
  }

  .online-showcase-pager {
    justify-self: stretch;
    justify-content: space-between;
  }

  .info-grid,
  .alerts-grid,
  .info-hub-grid,
  .ranking-stage-grid {
    grid-template-columns: 1fr;
  }

  .main-nav .dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    margin-top: 0.35rem;
  }

  .app-dropdown {
    min-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .section-block {
    padding: 4.8rem 0;
  }

  .hero-actions .btn-brand,
  .hero-actions .btn-ghost,
  .button-list > * {
    width: 100%;
  }

  .hero-brand-logo {
    width: min(100%, 420px);
  }

  .quick-links,
  .stats-grid,
  .summary-grid,
  .info-hub-grid {
    grid-template-columns: 1fr;
  }

  .ux-toast {
    bottom: 4.8rem;
  }
}

@media (max-width: 575.98px) {
  .online-showcase-empty,
  .online-player-card {
    grid-template-columns: 1fr;
  }

  .online-showcase-empty__icon,
  .online-player-card__avatar {
    width: 72px;
    height: 72px;
  }

  .online-player-card__top {
    display: grid;
  }

  .back-top {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 48px;
    height: 48px;
  }

  .form-helper-row {
    align-items: flex-start;
  }
}


@media (max-width: 575.98px) {
  .section-intro__badges {
    gap: 0.6rem;
  }

  .info-hub-card {
    padding: 1.15rem;
  }

  .info-hub-card__lead {
    grid-template-columns: 1fr;
  }

  .info-hub-card__state {
    margin-left: 0;
  }

  .info-hub-card__footer {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   RO theme refinements
   ========================================================= */

.hero-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-panel .stat-card {
  min-height: 132px;
}

.quick-link--button {
  width: 100%;
  border: 1px solid var(--stroke);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.quick-link--button:focus-visible {
  box-shadow: 0 0 0 0.18rem rgba(255, 211, 53, 0.14), 0 0 0 0.4rem rgba(255, 122, 20, 0.12);
}

@media (max-width: 991.98px) {
  .hero-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .hero-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-auth-card {
  padding: 1.3rem;
  border-color: rgba(255, 211, 53, 0.2);
  background: linear-gradient(180deg, rgba(33, 15, 9, 0.96), rgba(12, 5, 3, 0.96));
}

.hero-auth-head {
  margin-bottom: 1rem;
}

.hero-auth-head .card-title {
  margin: 0.65rem 0 0.45rem;
  font-size: 1.55rem;
}

.hero-auth-head p {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: rgba(255, 245, 220, 0.72);
}

.hero-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem !important;
}

.hero-auth-tabs .nav-item,
.hero-auth-tabs .nav-link {
  width: 100%;
}

.hero-auth-tabs .nav-link {
  justify-content: center;
  min-height: 46px;
  border-radius: 0.8rem;
  padding: 0.55rem 0.75rem !important;
}

.hero-auth-form {
  gap: 0.75rem;
}

.hero-auth-card .form-label {
  margin-bottom: 0.28rem;
  font-size: 0.8rem;
}

.hero-auth-card .form-control,
.hero-auth-card .form-select {
  min-height: 44px;
  border-radius: 0.8rem;
}

.hero-form-section {
  display: grid;
  gap: 0.58rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-form-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.hero-form-section__title {
  margin: 0;
  color: #fff4bf;
  font-family: "Lilita One", cursive;
  font-size: 0.98rem;
  line-height: 1;
}

.hero-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.hero-form-grid__wide {
  grid-column: 1 / -1;
}

.hero-form-grid--profile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-auth-submit {
  min-height: 40px;
  padding: 0.62rem 0.95rem;
  border-radius: 0.82rem;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 9px 20px rgba(255, 122, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero-auth-submit .nav-cta__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0.78rem;
}

.hero-auth-submit:hover {
  transform: translateY(-1px);
}

.hero-auth-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


.hero-user-menu__welcome {
  color: rgba(255, 245, 220, 0.86);
}

.hero-user-menu__summary {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.hero-user-menu__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.hero-user-menu__summary-card {
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
}

.hero-user-menu__summary-card strong {
  display: block;
  margin: 0.3rem 0 0.35rem;
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 1.3rem;
  line-height: 1;
}

.hero-user-menu__summary-card p {
  color: rgba(255, 245, 220, 0.7);
  font-size: 0.86rem;
  line-height: 1.45;
}

.hero-user-menu__roster {
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.hero-user-menu__roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hero-user-menu__roster-list {
  display: grid;
  gap: 0.55rem;
}

.hero-user-menu__roster-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}

.hero-user-menu__roster-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.hero-user-menu__roster-copy strong {
  display: block;
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 0.92rem;
  line-height: 1;
}

.hero-user-menu__roster-copy span {
  color: rgba(255, 245, 220, 0.66);
  font-size: 0.8rem;
  line-height: 1.35;
}

.hero-user-menu__roster-link {
  color: #fff3af;
  font-family: "Lilita One", cursive;
  font-size: 0.84rem;
  white-space: nowrap;
}

.hero-user-menu__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.hero-user-menu__actions .hero-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-password-wrap {
  position: relative;
}

.hero-password-wrap .form-control {
  padding-right: 2.9rem;
}

.hero-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 245, 220, 0.92);
}

.hero-password-toggle:hover {
  border-color: rgba(255, 211, 53, 0.48);
  color: var(--yellow);
}

.hero-password-toggle:focus-visible,
.hero-captcha__reload:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.16rem rgba(255, 211, 53, 0.2), 0 0 0 0.35rem rgba(255, 122, 20, 0.16);
}

.hero-link-inline {
  color: var(--cyan);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-link-inline--button {
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-link-inline:hover {
  color: #c4efff;
}

.quick-side-menu {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.quick-side-menu__btn {
  min-width: 160px;
  padding: 0.8rem 1rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Lilita One", cursive;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.quick-side-menu__btn i {
  font-size: 1.2rem;
}

.quick-side-menu__btn:hover {
  transform: translateX(-4px);
  filter: saturate(1.15);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.34);
}

.quick-side-menu__btn--download {
  color: #fff6d5;
  background: linear-gradient(135deg, rgba(255, 122, 20, 0.95), rgba(255, 211, 53, 0.92));
}

.quick-side-menu__btn--discord {
  color: #f7f3ff;
  background: linear-gradient(135deg, rgba(111, 133, 255, 0.95), rgba(158, 123, 255, 0.92));
}

.quick-side-menu__btn--vote {
  color: #f2ffe1;
  background: linear-gradient(135deg, rgba(106, 190, 62, 0.95), rgba(182, 229, 92, 0.92));
}

.hero-captcha {
  display: grid;
  gap: 0.35rem;
}

.hero-captcha__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.hero-captcha__equation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 0.7rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 211, 53, 0.18);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.16), rgba(255, 122, 20, 0.08));
  color: #fff5c0;
  font-size: 1.08rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero-captcha__reload {
  width: 44px;
  height: 44px;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff2ca;
}

.hero-captcha__reload:hover {
  border-color: rgba(255, 211, 53, 0.4);
  color: var(--yellow);
}

.hero-auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

@media (max-width: 575.98px) {
  .hero-auth-card {
    padding: 1rem;
  }

  .hero-form-grid,
  .hero-form-grid--profile {
    grid-template-columns: 1fr;
  }

  .hero-captcha__row {
    gap: 0.45rem;
  }

  .hero-captcha__equation {
    padding: 0 0.55rem;
    font-size: 1rem;
  }
}

#heroCaptchaFeedback.is-valid {
  color: #9cffc6;
}

#heroCaptchaFeedback.is-invalid {
  color: #ffc7bf;
}

@media (max-width: 991.98px) {
  .hero-auth-card {
    margin-top: 0.2rem;
  }

  .hero-user-menu__summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .quick-side-menu {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .ranking-stage-card {
    padding: 1.12rem;
  }

  .ranking-stage-card__status {
    margin-left: 0;
  }

  .ranking-stage-card__title-row,
  .ranking-stage-entry--champion,
  .ranking-stage-entry__profile {
    grid-template-columns: 1fr;
  }

  .ranking-stage-entry--champion {
    min-height: auto;
  }

  .ranking-stage-entry__rank,
  .ranking-stage-entry__score {
    justify-items: start;
    text-align: left;
  }

  .ranking-stage-podium {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Account roster
   ========================================================= */

.account-shell {
  display: grid;
  gap: 1.5rem;
}

.account-shell .panel-card {
  padding: 1.45rem;
}

.account-overview__header,
.account-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.account-shell__actions {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.portal-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.portal-section-card {
  padding: 1rem 1.05rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 30px rgba(0, 0, 0, 0.16);
}

.portal-checklist-stack,
.portal-module-grid {
  display: grid;
  gap: 0.85rem;
}

.portal-checklist-item {
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}

.portal-checklist-item__top,
.portal-module-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.portal-checklist-item strong {
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 1rem;
  line-height: 1.1;
}

.portal-checklist-item p,
.portal-module-card p,
.portal-inline-note p {
  margin: 0;
  color: rgba(255, 245, 220, 0.74);
  font-size: 0.92rem;
  line-height: 1.55;
}

.vote-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.vote-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.vote-requirement {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: 30rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 211, 53, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 245, 220, 0.78);
}

.vote-requirement.is-complete {
  border-color: rgba(182, 229, 92, 0.3);
  color: #e8ffb7;
}

.vote-requirement strong,
.vote-requirement em {
  font-style: normal;
  line-height: 1;
}

.vote-requirement em {
  margin-left: 0.35rem;
  color: rgba(255, 245, 220, 0.66);
}

.vote-requirement small {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.86rem;
  line-height: 1.25;
}

.vote-site-card {
  display: grid;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 30px rgba(0, 0, 0, 0.16);
}

.vote-site-card__banner,
.vote-admin-site__banner {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 211, 53, 0.08);
  color: #fff3af;
}

.vote-site-card__banner {
  min-height: 92px;
}

.vote-site-card__banner img,
.vote-admin-site__banner img,
.vote-form-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vote-site-card__body {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.vote-captcha {
  margin-bottom: 0.75rem;
}

.vote-site-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.vote-site-card h3 {
  margin: 0 0 0.35rem;
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 1.28rem;
}

.vote-site-card p {
  margin: 0;
  color: rgba(255, 245, 220, 0.7);
  line-height: 1.45;
}

.vote-admin-site {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

.vote-admin-site__banner {
  width: 110px;
  height: 44px;
  border-radius: 8px;
}

.vote-form-preview {
  display: grid;
  gap: 0.45rem;
}

.vote-form-preview img {
  max-width: 468px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vote-admin-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 245, 220, 0.82);
  font-weight: 700;
}

.portal-module-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 211, 53, 0.1), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.portal-module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 211, 53, 0.22);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.18);
}

.portal-module-card.is-current {
  border-color: rgba(111, 134, 255, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 134, 255, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}

.portal-inline-note {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 211, 53, 0.16);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.09), rgba(255, 122, 20, 0.04));
}

.portal-inline-note strong {
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 0.95rem;
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.account-summary-card {
  padding: 1rem 1.05rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-summary-card strong {
  display: block;
  margin: 0.35rem 0 0.4rem;
  color: #fff8e7;
  font-family: "Lilita One", cursive;
  font-size: 1.45rem;
  line-height: 1;
}

.account-summary-card p {
  color: rgba(255, 245, 220, 0.72);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.account-password-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
}

.account-password-form__submit {
  display: flex;
}

.account-roster__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.account-roster__actions {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.75rem;
  align-items: center;
}

.account-alert {
  align-items: flex-start;
}

.account-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.account-character-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 211, 53, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 34px rgba(0, 0, 0, 0.18);
}

.account-character-card__avatar {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 211, 53, 0.75), rgba(255, 122, 20, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 18px 28px rgba(0, 0, 0, 0.18);
}

.account-character-card__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.account-character-card__avatar img[hidden] {
  display: none;
}

.account-character-card__avatar.is-fallback {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 211, 53, 0.75), rgba(255, 122, 20, 0.72));
}

.account-character-card__initials {
  position: relative;
  z-index: 0;
  color: #2b1404;
  font-family: "Lilita One", cursive;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-character-card__body {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.account-character-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.account-character-card__top strong {
  display: block;
  color: #fff7e2;
  font-family: "Lilita One", cursive;
  font-size: 1.1rem;
  line-height: 1;
}

.account-character-card__top p {
  margin-top: 0.35rem;
  color: rgba(255, 245, 220, 0.68);
  font-size: 0.9rem;
  line-height: 1.45;
}

.account-character-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.account-character-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 32px;
  padding: 0.38rem 0.66rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  color: rgba(255, 245, 220, 0.84);
  font-size: 0.8rem;
}

.account-character-card__stats i {
  color: var(--yellow);
}

.account-character-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.account-character-action {
  min-height: 38px;
  padding: 0.45rem 0.72rem;
  justify-content: flex-start;
  gap: 0.48rem;
  border-radius: 0.68rem;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 14px rgba(0, 0, 0, 0.12);
}

.account-character-action--primary {
  border-color: rgba(255, 211, 53, 0.3);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.16), rgba(255, 122, 20, 0.08));
  color: #fff6d2;
}

.account-character-action--secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
}

.account-character-action i {
  flex: 0 0 auto;
  color: var(--yellow);
  font-size: 0.94rem;
}

.account-character-action span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-roster__header .hero-auth-submit[disabled] {
  opacity: 0.72;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .portal-card-grid {
    grid-template-columns: 1fr;
  }

  .account-summary-grid {
    grid-template-columns: 1fr;
  }

  .account-overview__header,
  .account-section-heading {
    display: grid;
  }

  .account-password-form {
    grid-template-columns: 1fr;
  }

  .account-roster__header {
    flex-direction: column;
  }

  .account-roster__actions {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .portal-checklist-item__top,
  .portal-module-card__top {
    display: grid;
  }

  .account-character-card {
    grid-template-columns: 1fr;
  }

  .account-character-card__avatar {
    width: 84px;
    height: 84px;
  }

  .account-character-card__top,
  .account-character-card__actions {
    grid-template-columns: 1fr;
  }

  .account-character-card__top {
    display: grid;
  }
}

/* =========================================================
   Character Profile
   ========================================================= */

.character-profile-page {
  padding-top: 7.5rem;
}

.character-profile-shell {
  display: grid;
  gap: 1.2rem;
}

.character-profile-hero {
  padding: 0;
}

.character-profile-hero__back {
  margin-bottom: 0.85rem;
}

.character-profile-hero__layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.character-profile-showcase {
  display: grid;
  gap: 0.9rem;
  align-self: start;
}

.character-profile-render {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 211, 53, 0.14), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 34px rgba(0, 0, 0, 0.18);
}

.character-profile-render img {
  position: relative;
  z-index: 1;
  image-rendering: pixelated;
}

.character-profile-render--body {
  height: clamp(340px, 52vh, 520px);
  min-height: 0;
  align-content: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 34%, rgba(183, 120, 255, 0.16), transparent 34%),
    radial-gradient(ellipse at 50% 77%, rgba(255, 183, 52, 0.32), rgba(255, 183, 52, 0.09) 34%, transparent 64%),
    linear-gradient(145deg, #0c0610 0%, #160807 52%, #05090d 100%);
  border-color: rgba(255, 222, 128, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -52px 90px rgba(0, 0, 0, 0.38),
    0 24px 44px rgba(0, 0, 0, 0.28);
}

.character-profile-render--body::before,
.character-profile-render--body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.character-profile-render--body::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 76%, transparent 100%);
  opacity: 0.24;
}

.character-profile-render--body::after {
  inset: auto 10% 12% 10%;
  height: 88px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 221, 105, 0.34), rgba(255, 150, 40, 0.16) 42%, transparent 72%);
  transform: perspective(220px) rotateX(62deg);
  filter: blur(1px);
}

.character-profile-render--body img {
  width: auto;
  max-width: min(82%, 320px);
  height: clamp(220px, 25vw, 310px);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.62));
  transform: translateY(4px);
}

.character-profile-render__label {
  position: relative;
  z-index: 1;
  color: rgba(255, 245, 220, 0.74);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.character-profile-render-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.character-profile-render--small {
  min-height: 168px;
  align-content: center;
}

.character-profile-render--small img {
  max-height: 96px;
}

.character-profile-render--fallback {
  min-height: 360px;
  align-content: center;
  text-align: center;
}

.character-profile-render__fallback-initials {
  color: #2b1404;
  font-family: "Lilita One", cursive;
  font-size: 3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.online-player-card__avatar:not(.is-fallback),
.account-character-card__avatar:not(.is-fallback),
.ranking-stage-avatar--image:not(.is-fallback) {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(183, 120, 255, 0.18), transparent 38%),
    radial-gradient(ellipse at 50% 78%, rgba(255, 190, 64, 0.38), rgba(255, 151, 32, 0.12) 38%, transparent 66%),
    linear-gradient(145deg, #100712 0%, #180a0a 54%, #060c10 100%);
  border-color: rgba(255, 222, 128, 0.22);
}

.online-player-card__avatar:not(.is-fallback)::before,
.account-character-card__avatar:not(.is-fallback)::before,
.ranking-stage-avatar--image:not(.is-fallback)::before,
.online-player-card__avatar:not(.is-fallback)::after,
.account-character-card__avatar:not(.is-fallback)::after,
.ranking-stage-avatar--image:not(.is-fallback)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.online-player-card__avatar:not(.is-fallback)::before,
.account-character-card__avatar:not(.is-fallback)::before,
.ranking-stage-avatar--image:not(.is-fallback)::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.36;
}

.online-player-card__avatar:not(.is-fallback)::after,
.account-character-card__avatar:not(.is-fallback)::after,
.ranking-stage-avatar--image:not(.is-fallback)::after {
  inset: auto 14% 12% 14%;
  height: 18%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 220, 92, 0.42), rgba(255, 144, 31, 0.12) 55%, transparent 74%);
}

.online-player-card__avatar:not(.is-fallback) img,
.account-character-card__avatar:not(.is-fallback) img,
.ranking-stage-avatar--image:not(.is-fallback) img {
  z-index: 1;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.48));
}

.online-player-card__avatar:not(.is-fallback) img,
.ranking-stage-avatar--image:not(.is-fallback) img {
  position: relative;
}

.online-player-card__avatar:not(.is-fallback) img,
.account-character-card__avatar:not(.is-fallback) img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: 4px;
}

.character-profile-summary {
  display: grid;
  align-content: start;
  align-self: stretch;
  gap: 0.85rem;
  max-width: none;
  padding: 1.15rem;
}

.character-profile-summary__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.character-profile-summary__header .card-title {
  margin-bottom: 0;
}

.character-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ro-asset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.character-profile-assets {
  margin-top: 0.1rem;
}

.character-profile-relations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.character-profile-relation-card {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.72rem 0.78rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(207, 247, 94, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

.character-profile-relation-card span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(207, 247, 94, 0.88);
  font-family: "Lilita One", cursive;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.character-profile-relation-card strong,
.character-profile-relation-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-profile-relation-card strong {
  color: #fff8e5;
  font-weight: 900;
}

.character-profile-relation-card small {
  color: rgba(255, 245, 220, 0.62);
}

.ro-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.42rem 0.68rem 0.42rem 0.45rem;
  border-radius: 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(20, 10, 8, 0.64);
  color: #fff5d4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ro-asset-chip--skill {
  border-color: rgba(144, 190, 255, 0.18);
}

.ro-asset-chip--item {
  border-color: rgba(255, 211, 53, 0.18);
}

.ro-asset-chip__icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 0.62rem;
  background: rgba(208, 235, 102, 0.12);
  color: var(--lime);
  overflow: hidden;
}

.ro-asset-chip__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

.ro-asset-chip__copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.ro-asset-chip__copy strong,
.ro-asset-chip__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ro-asset-chip__copy strong {
  color: #fff8df;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.05;
}

.ro-asset-chip__copy small {
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.76rem;
}

.ro-asset-chip--compact {
  padding: 0.32rem 0.54rem 0.32rem 0.34rem;
}

.ro-asset-chip--compact .ro-asset-chip__icon {
  flex-basis: 31px;
  width: 31px;
  height: 31px;
  border-radius: 0.5rem;
}

.ro-asset-chip--compact .ro-asset-chip__icon img {
  width: 25px;
  height: 25px;
}

.ro-asset-chip--compact .ro-asset-chip__copy strong {
  max-width: 8.5rem;
  font-size: 0.82rem;
}

.ro-asset-chip--compact .ro-asset-chip__copy small {
  font-size: 0.72rem;
}

.character-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: flex-start;
  margin-top: 0;
}

.character-profile-progress {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.character-profile-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  min-width: 0;
}

.character-profile-data-grid .character-profile-data-card:nth-child(3) {
  grid-column: 1 / -1;
}

.character-profile-data-card {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.character-profile-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.character-profile-table th,
.character-profile-table td {
  padding: 0.48rem 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.character-profile-table tr:first-child th,
.character-profile-table tr:first-child td {
  border-top: 0;
}

.character-profile-table th {
  width: 19%;
  color: rgba(207, 247, 94, 0.88);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.character-profile-table td {
  width: 31%;
  color: #fff8e5;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.character-profile-table td + th {
  padding-left: 0.85rem;
}

.character-profile-table--visits th {
  width: 42%;
}

.character-profile-table--visits td {
  width: 58%;
  text-align: right;
  color: rgba(255, 245, 220, 0.74);
}

.character-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}

.character-profile-panel {
  padding: 1.25rem;
}

.character-profile-bars {
  display: grid;
  gap: 0.9rem;
}

.character-profile-bar {
  display: grid;
  gap: 0.45rem;
}

.character-profile-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: #fff6dc;
  font-size: 0.95rem;
}

.character-profile-bar__track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.character-profile-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 211, 53, 0.94), rgba(255, 122, 20, 0.94));
}

.character-profile-bar__fill--sp {
  background: linear-gradient(90deg, rgba(116, 219, 255, 0.94), rgba(158, 123, 255, 0.9));
}

.character-profile-stat-grid,
.character-profile-kv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.character-profile-stat-card,
.character-profile-kv {
  padding: 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.character-profile-stat-card strong,
.character-profile-kv strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fff8e5;
  font-family: "Lilita One", cursive;
  font-size: 1.15rem;
  line-height: 1;
}

.character-profile-stat-card span,
.character-profile-kv span {
  display: block;
  margin-top: 0.38rem;
  color: rgba(255, 245, 220, 0.7);
  font-size: 0.82rem;
}

.character-profile-state {
  padding: 1.25rem;
}

.character-profile-views-list {
  display: grid;
  gap: 0.45rem;
}

.character-profile-view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.character-profile-view-row strong {
  overflow: hidden;
  color: #fff8e5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-profile-view-row span {
  flex: 0 0 auto;
  color: rgba(255, 245, 220, 0.64);
  font-size: 0.88rem;
}

.woe-ranking-page {
  padding-top: clamp(7.25rem, 11vw, 8.75rem);
}

.woe-ranking-shell {
  display: grid;
  gap: 1.15rem;
}

.woe-ranking-state,
.woe-ranking-item {
  border-radius: 1.55rem;
}

.woe-ranking-state {
  padding: clamp(1.35rem, 3vw, 2rem);
}

.woe-ranking-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 24px rgba(0, 0, 0, 0.14);
}

.woe-ranking-toolbar__back {
  white-space: nowrap;
}

.woe-ranking-toolbar__title {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.woe-ranking-toolbar__title .card-title {
  margin: 0;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
}

.woe-ranking-toolbar__badges {
  justify-content: flex-end;
  gap: 0.55rem;
}

.woe-ranking-top3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.woe-ranking-leader,
.woe-ranking-item__profile,
.woe-ranking-table__profile {
  text-decoration: none;
}

.woe-ranking-leader {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 140, 104, 0.1), transparent 35%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.woe-ranking-leader--rank-1 {
  border-color: rgba(255, 211, 53, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 211, 53, 0.16), transparent 35%),
    rgba(255, 255, 255, 0.045);
}

.woe-ranking-leader--rank-2 {
  border-color: rgba(225, 231, 244, 0.18);
}

.woe-ranking-leader--rank-3 {
  border-color: rgba(255, 168, 114, 0.22);
}

.woe-ranking-leader__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.woe-ranking-leader:hover,
.woe-ranking-leader:focus-visible,
.woe-ranking-item:hover,
.woe-ranking-item:focus-within {
  transform: translateY(-3px);
  border-color: rgba(255, 140, 104, 0.32);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.24);
}

.woe-ranking-leader:focus-visible {
  outline: 2px solid rgba(255, 220, 176, 0.8);
  outline-offset: 4px;
}

.woe-ranking-section {
  display: grid;
  gap: 0.85rem;
}

.woe-ranking-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.woe-ranking-section__head .card-title {
  margin-bottom: 0.35rem;
}

.woe-ranking-section__head p {
  margin: 0;
  color: rgba(245, 231, 214, 0.66);
}

.woe-ranking-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.woe-ranking-item {
  display: grid;
  gap: 0.95rem;
  padding: 1.1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(18, 10, 8, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.woe-ranking-item--empty {
  grid-column: 1 / -1;
}

.woe-ranking-item--empty strong {
  font-family: "Lilita One", cursive;
  font-size: 1.1rem;
  color: #fff2b3;
}

.woe-ranking-item--empty span {
  color: rgba(245, 231, 214, 0.74);
}

.woe-ranking-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.woe-ranking-item__rank {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.woe-ranking-item__rank strong {
  display: block;
  font-size: 1rem;
  color: #fff8e0;
}

.woe-ranking-item__rank span:not(.rank-badge) {
  font-size: 0.85rem;
  color: rgba(245, 231, 214, 0.68);
}

.woe-ranking-item__meta,
.woe-ranking-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.woe-ranking-assets {
  min-height: 32px;
}

.woe-ranking-metric {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.woe-ranking-metric small {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 231, 214, 0.62);
}

.woe-ranking-metric strong {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #fff6d8;
}

.woe-ranking-table-wrap {
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(18, 10, 8, 0.94);
}

.woe-ranking-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.woe-ranking-table th,
.woe-ranking-table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(247, 237, 220, 0.82);
  font-size: 0.92rem;
  vertical-align: middle;
}

.woe-ranking-table th {
  color: rgba(245, 231, 214, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woe-ranking-table tbody tr:hover {
  background: rgba(255, 140, 104, 0.08);
}

.woe-ranking-table tbody tr:last-child td {
  border-bottom: 0;
}

.woe-ranking-table__profile {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: inherit;
}

.woe-ranking-table__profile strong,
.woe-ranking-table__profile small {
  display: block;
}

.woe-ranking-table__profile strong {
  color: #fff8e0;
  font-size: 0.98rem;
}

.woe-ranking-table__profile small {
  color: rgba(245, 231, 214, 0.62);
  font-size: 0.78rem;
}

.woe-ranking-support-icons {
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.woe-ranking-support-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(208, 235, 102, 0.11);
  color: var(--lime);
  overflow: hidden;
}

.woe-ranking-support-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
}

.woe-ranking-support-empty {
  color: rgba(245, 231, 214, 0.48);
  font-size: 0.82rem;
}

.dt-container {
  color: rgba(247, 237, 220, 0.82);
}

.dt-container .dt-layout-row {
  margin: 0;
  padding: 0.9rem 1rem;
  gap: 0.8rem;
}

.dt-container .dt-layout-row:first-child,
.dt-container .dt-layout-row:last-child {
  background: rgba(255, 255, 255, 0.035);
}

.dt-container .dt-input {
  min-height: 38px;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff8e0;
}

.dt-container .dt-input:focus {
  border-color: rgba(255, 140, 104, 0.42);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 140, 104, 0.12);
}

.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info {
  color: rgba(245, 231, 214, 0.72);
  font-size: 0.9rem;
}

.dt-container .dt-paging .dt-paging-button {
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(247, 237, 220, 0.82) !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
  border-color: rgba(255, 140, 104, 0.38);
  background: rgba(255, 140, 104, 0.18);
  color: #fff8e0 !important;
}

.dt-container .dt-paging .dt-paging-button:hover {
  border-color: rgba(255, 140, 104, 0.28);
  background: rgba(255, 140, 104, 0.1);
}

@media (max-width: 991.98px) {
  .woe-ranking-top3,
  .woe-ranking-list,
  .woe-ranking-toolbar {
    grid-template-columns: 1fr;
  }

  .woe-ranking-toolbar__badges {
    justify-content: flex-start;
  }

  .character-profile-hero__layout,
  .character-profile-grid {
    grid-template-columns: 1fr;
  }

  .character-profile-data-grid {
    grid-template-columns: 1fr;
  }

  .character-profile-relations {
    grid-template-columns: 1fr;
  }

  .character-profile-data-grid .character-profile-data-card:nth-child(3) {
    grid-column: auto;
  }

}

@media (max-width: 575.98px) {
  .woe-ranking-page {
    padding-top: 6.6rem;
  }

  .woe-ranking-item__meta,
  .woe-ranking-metric-grid {
    grid-template-columns: 1fr;
  }

  .character-profile-page {
    padding-top: 6.6rem;
  }

  .character-profile-render-grid,
  .character-profile-stat-grid,
  .character-profile-kv-grid,
  .character-profile-relations {
    grid-template-columns: 1fr;
  }

  .character-profile-summary .character-profile-kv-grid,
  .character-profile-actions {
    grid-template-columns: 1fr;
  }

  .character-profile-summary__header,
  .character-profile-bar__top {
    display: grid;
  }

  .character-profile-render--body {
    height: 360px;
  }

  .character-profile-table,
  .character-profile-table tbody,
  .character-profile-table tr,
  .character-profile-table th,
  .character-profile-table td {
    display: block;
    width: 100%;
  }

  .character-profile-table tr {
    display: grid;
    grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1.25fr);
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .character-profile-table tr:first-child {
    border-top: 0;
  }

  .character-profile-table th,
  .character-profile-table td {
    padding: 0.25rem 0.35rem;
    border-top: 0;
  }

  .character-profile-table--visits td {
    text-align: left;
  }
}

/* ponytail: final home override; remove when the old dense home CSS is split. */
.has-online-status-bar {
  --online-status-bar-height: 38px;
  scroll-padding-top: calc(104px + var(--online-status-bar-height));
}

.has-online-status-bar .main-nav {
  top: var(--online-status-bar-height);
}

.online-status-bar {
  left: 0;
  padding: 0.45rem 0;
  background: rgba(8, 7, 16, 0.88);
  box-shadow: none;
}

.has-online-status-bar .online-status-bar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1040;
  min-height: var(--online-status-bar-height);
}

.online-status-bar__text {
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.95rem;
  gap: 0.35rem;
  text-shadow: none;
  scrollbar-width: none;
}

.online-status-bar__text::-webkit-scrollbar {
  display: none;
}

.hero-copy.hero-brand-title-sm {
  max-width: 34rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.25;
  color: rgba(255, 245, 220, 0.82);
  text-shadow: none;
  font-family: inherit;
}

.hero-auth-head p,
#guias .section-text,
#ranking .section-text,
#guias .section-intro__badges,
#ranking .section-intro__badges,
#guias .info-hub-card__top,
#guias .info-hub-card__feature-list,
#guias .info-hub-card__footer,
#ranking .ranking-stage-card__pill-row,
#ranking .ranking-stage-entry--secondary,
#ranking .ranking-stage-card__title-copy p {
  display: none;
}

#guias.section-block,
#ranking.section-block {
  padding-bottom: 3.4rem;
}

#guias.section-block {
  padding-bottom: 2rem;
}

#guias .section-intro,
#ranking .section-intro {
  margin-bottom: 1rem !important;
}

#guias .info-hub-grid,
#ranking .ranking-stage-grid {
  gap: 0.85rem;
}

#guias .info-hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#guias .info-hub-card {
  min-height: 0;
  padding: 0.95rem 1rem;
}

#guias .info-hub-card__lead {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

#guias .info-hub-card__icon {
  width: 44px;
  height: 44px;
}

#guias .section-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
}

#ranking .section-title {
  font-size: clamp(2.45rem, 4.8vw, 4rem);
}

#guias .info-hub-card .card-title {
  font-size: 1.18rem;
  line-height: 1.05;
}

#guias .info-hub-card p {
  max-width: 24rem;
  color: rgba(255, 245, 220, 0.68);
  font-size: 0.88rem;
  line-height: 1.35;
}

#ranking .ranking-stage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

#guias .info-hub-card,
#ranking .ranking-stage-card {
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 24px rgba(0, 0, 0, 0.14);
}

#guias .info-hub-card::after,
#ranking .ranking-stage-card::before,
#ranking .ranking-stage-card::after {
  display: none;
}

#guias .info-hub-card:hover,
#ranking .ranking-stage-card:hover {
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 28px rgba(0, 0, 0, 0.16);
}

#guias .info-hub-card,
#ranking .ranking-stage-card {
  gap: 0.92rem;
}

#guias .info-hub-card__lead,
#ranking .ranking-stage-card__title-row {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

#guias .info-hub-card__icon,
#ranking .ranking-stage-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 0.85rem;
  font-size: 1rem;
  box-shadow: none;
}

#guias .info-hub-card .card-title,
#ranking .ranking-stage-card .card-title {
  font-size: 1.16rem;
}

#ranking .ranking-stage-podium {
  display: block;
}

#ranking .ranking-stage-entry {
  box-shadow: none;
}

#ranking .ranking-stage-entry--champion {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "rank profile"
    "score score";
  min-height: 224px;
  gap: 0.9rem;
  padding: 0.95rem;
  border-radius: 1rem;
  align-items: center;
}

#ranking .ranking-stage-avatar--lg {
  width: 132px;
  height: 154px;
  border-radius: 1rem;
  flex-basis: 132px;
}

#ranking .ranking-stage-avatar--full.ranking-stage-avatar--lg img {
  width: 218%;
  height: 218%;
  transform: translate(2%, -14px);
}

#ranking .rank-badge {
  width: 42px;
  height: 42px;
  border-radius: 0.85rem;
}

#ranking .ranking-stage-entry__rank {
  grid-area: rank;
  align-self: start;
}

#ranking .ranking-stage-entry__profile {
  grid-area: profile;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0.9rem;
}

#ranking .ranking-stage-entry__copy {
  gap: 0.35rem;
}

#ranking .ranking-stage-entry__copy strong {
  font-size: 1.1rem;
}

#ranking .ranking-stage-entry__copy span {
  color: rgba(255, 245, 220, 0.7);
  font-size: 0.82rem;
}

#ranking .ranking-stage-entry__copy p {
  display: -webkit-box;
  max-width: 18rem;
  overflow: hidden;
  color: rgba(255, 245, 220, 0.72);
  font-size: 0.8rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#ranking .ranking-stage-entry__copy p + p {
  display: none;
}

#ranking .ranking-stage-entry__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

#ranking .ranking-stage-entry__stats span {
  min-width: 0;
  min-height: 28px;
  padding: 0.28rem 0.48rem;
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ranking .ranking-stage-entry__score {
  grid-area: score;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.58rem 0.72rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.12));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.025));
}

#ranking .ranking-stage-entry__score strong {
  font-size: 1.5rem;
  white-space: nowrap;
}

#ranking .ranking-stage-card__footer {
  gap: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

#ranking .ranking-stage-card__footer-badges {
  display: flex;
  gap: 0.42rem;
}

#ranking .ranking-stage-card__footer-badges span {
  min-height: 28px;
  padding: 0.28rem 0.52rem;
  font-size: 0.7rem;
}

#ranking .ranking-stage-card__cta {
  color: #fff4be;
  font-size: 0.88rem;
}

@media (max-width: 991.98px) {
  #guias .info-hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #ranking .ranking-stage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  #guias .info-hub-grid {
    grid-template-columns: 1fr;
  }

  #ranking .ranking-stage-entry--champion {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rank"
      "profile"
      "score";
    min-height: auto;
  }

  #ranking .ranking-stage-entry__profile {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  #ranking .ranking-stage-avatar--lg {
    width: 104px;
    height: 124px;
    flex-basis: 104px;
  }

  #ranking .ranking-stage-entry__score {
    text-align: left;
  }

  #ranking .ranking-stage-entry__stats {
    grid-template-columns: 1fr;
  }
}

#informacion.quick-info {
  padding-bottom: 3rem;
}

.quick-info__intro {
  display: block;
  margin-bottom: 1rem !important;
}

.quick-info__copy {
  max-width: 42rem;
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.55;
}

.quick-info-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.quick-info-summary,
.quick-info-facts,
.quick-info-lane {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 24px rgba(0, 0, 0, 0.14);
}

.quick-info-summary {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  padding: 1.2rem;
}

.quick-info-summary h3,
.quick-info-lane h3 {
  margin: 0;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  line-height: 1;
}

.quick-info-summary h3 {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.quick-info-summary p,
.quick-info-lane p {
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.5;
}

.quick-info-facts {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.quick-info-facts div {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quick-info-facts div:last-child {
  border-bottom: 0;
}

.quick-info-facts span {
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.quick-info-facts strong {
  color: var(--yellow);
  font-family: "Lilita One", cursive;
  font-size: 1.35rem;
  line-height: 1;
}

.quick-info-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.quick-info-lane {
  --lane-accent: var(--yellow);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.7rem 0.85rem;
  align-items: center;
  padding: 1rem;
}

.quick-info-lane i {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #1f1007;
  background: color-mix(in srgb, var(--lane-accent) 86%, #fff);
}

.quick-info-lane h3 {
  font-size: 1.08rem;
}

.quick-info-lane p {
  font-size: 0.88rem;
}

.quick-info-lane--server { --lane-accent: #ffd335; }
.quick-info-lane--content { --lane-accent: #9bd7ff; }
.quick-info-lane--competitive { --lane-accent: #b6e55c; }

.downloads-section {
  padding-bottom: 3.4rem;
}

.downloads-section__intro {
  display: block;
  margin-bottom: 1rem !important;
}

.downloads-section__copy {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.55;
}

.download-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 0.85rem;
}

.download-card {
  --download-accent: #ffd335;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.85rem;
  min-height: 250px;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--download-accent) 16%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 24px rgba(0, 0, 0, 0.14);
}

.download-card--primary { --download-accent: #ffd335; }
.download-card--support { --download-accent: #8fa2ff; }

.download-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #1f1007;
  background: color-mix(in srgb, var(--download-accent) 86%, #fff);
  font-size: 1.25rem;
}

.download-card__body {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.download-card__eyebrow {
  color: color-mix(in srgb, var(--download-accent) 70%, #fff);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.download-card h3 {
  margin: 0;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  font-size: 1.35rem;
  line-height: 1;
}

.download-card p {
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.5;
}

.download-card__button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 245, 220, 0.58);
  font-family: "Lilita One", cursive;
  text-decoration: none;
}

.download-card__button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.download-card__button--active {
  color: #fff8e7;
  background: color-mix(in srgb, var(--download-accent) 34%, rgba(255, 255, 255, 0.08));
}

.guides-section {
  padding-bottom: 3.2rem;
}

.guides-section__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem !important;
}

.guides-section__copy {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.55;
}

.guide-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.guides-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.guide-sidebar {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0.7rem;
  max-height: calc(100vh - 7.5rem);
  padding: 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 7, 4, 0.34);
}

.guide-sidebar h2 {
  margin: 0;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  font-size: 1.15rem;
  line-height: 1;
}

.guide-search {
  display: grid;
  gap: 0.45rem;
}

.guide-search__field {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}

.guide-search__field > i {
  color: #e9ffb6;
  text-align: center;
}

.guide-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff8e7;
  font: inherit;
}

.guide-search input::placeholder {
  color: rgba(255, 245, 220, 0.52);
}

.guide-search button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(182, 229, 92, 0.14);
  color: #e9ffb6;
}

.guide-search__clear {
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.9rem;
  text-decoration: none;
}

.guide-search__clear:hover,
.guide-search__clear:focus-visible {
  color: #fff4be;
}

.guide-sidebar__nav {
  display: grid;
  gap: 0.22rem;
  overflow-y: auto;
  padding-right: 0.2rem;
  scrollbar-width: thin;
}

.guide-sidebar__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.5rem 0.58rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 245, 220, 0.82);
  text-decoration: none;
}

.guide-sidebar__nav a:hover,
.guide-sidebar__nav a:focus-visible,
.guide-sidebar__nav a.is-active {
  color: #fff;
  border-color: rgba(255, 211, 53, 0.22);
  background: linear-gradient(180deg, rgba(255, 211, 53, 0.13), rgba(255, 255, 255, 0.04));
}

.guide-sidebar__nav strong {
  min-width: 1.45rem;
  min-height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(182, 229, 92, 0.14);
  color: #e9ffb6;
  font-size: 0.75rem;
}

.guide-category-stack,
.guide-category-section {
  display: grid;
  gap: 1rem;
}

.guide-category-stack {
  gap: 1.2rem;
}

.guide-category-section {
  gap: 0.45rem;
  scroll-margin-top: 6.5rem;
}

.guide-category-section__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0 0 0.35rem;
  border-bottom: 1px solid rgba(255, 245, 220, 0.08);
  color: rgba(255, 245, 220, 0.62);
}

.guide-category-section__head .section-kicker {
  padding: 0;
  border: 0;
  background: transparent;
  color: #e9ffb6;
  font-size: 0.95rem;
  backdrop-filter: none;
}

.guide-card {
  display: grid;
  gap: 0.75rem;
  min-height: 220px;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 100% 0%, rgba(182, 229, 92, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 24px rgba(0, 0, 0, 0.14);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.guides-page .guide-card {
  width: 100%;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
  gap: 0;
  min-height: 260px;
  padding: 0;
}

.guide-card__media {
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(182, 229, 92, 0.08);
  color: #e9ffb6;
  font-size: 2.4rem;
}

.guide-card__media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.guide-card__body {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  padding: 1.15rem;
}

.guide-card:hover,
.guide-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(182, 229, 92, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 30px rgba(0, 0, 0, 0.18);
}

.guide-card:focus-visible {
  outline: 3px solid rgba(255, 211, 53, 0.34);
  outline-offset: 3px;
}

.guide-card__category {
  width: max-content;
  max-width: 100%;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(182, 229, 92, 0.13);
  color: #e9ffb6;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.guide-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.86rem;
}

.guide-card h2,
.guide-card h3 {
  margin: 0;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  font-size: 1.35rem;
  line-height: 1;
}

.guide-card p {
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.5;
}

.guide-card__link {
  align-self: end;
  color: #fff4be;
  font-family: "Lilita One", cursive;
}

.guide-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.guide-pagination a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 245, 220, 0.82);
  text-decoration: none;
  font-family: "Lilita One", cursive;
}

.guide-pagination a:hover,
.guide-pagination a:focus-visible,
.guide-pagination a.is-active {
  color: #1f1007;
  border-color: rgba(255, 211, 53, 0.36);
  background: var(--yellow);
}

.guide-card--empty {
  grid-column: 1 / -1;
  min-height: 150px;
}

.guides-page,
.guide-detail-page {
  padding-top: 9rem;
}

.guide-empty {
  padding: 1.5rem;
}

.guide-empty--results {
  min-height: 260px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.guide-detail-shell {
  display: grid;
  gap: 1rem;
  max-width: 980px;
}

.guide-detail-head,
.guide-content {
  padding: 1.4rem;
}

.guide-detail-date {
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.92rem;
}

.guide-content {
  color: rgba(255, 245, 220, 0.82);
  line-height: 1.7;
}

.guide-wiki-article .guide-content {
  padding: 0.2rem 0 0;
}

.guide-content > *:first-child {
  margin-top: 0;
}

.guide-content > *:last-child {
  margin-bottom: 0;
}

.guide-content h2,
.guide-content h3,
.guide-content h4 {
  margin: 1.5rem 0 0.65rem;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  line-height: 1.05;
}

.guide-content h2 {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 245, 220, 0.09);
  font-size: 1.75rem;
  scroll-margin-top: 7rem;
}

.guide-content h2:first-child {
  padding-top: 0;
  border-top: 0;
}

.guide-content h3 {
  font-size: 1.35rem;
  scroll-margin-top: 7rem;
}

.guide-content p,
.guide-content li {
  max-width: 76ch;
}

.guide-content a {
  color: #ffe071;
}

.guide-content figure {
  margin: 1rem 0;
}

.guide-content img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-content img[width="24"][height="24"] {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: middle;
  object-fit: contain;
  image-rendering: pixelated;
  border: 0;
  border-radius: 0;
}

.guide-content .image-style-side {
  float: right;
  max-width: 120px;
  margin: 0 0 0.75rem 1rem;
}

.guide-content img[width="120"][height="120"] {
  width: 120px;
  height: 120px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 0;
}

.guide-content figure.table {
  overflow-x: auto;
}

.guide-content figcaption {
  margin-top: 0.45rem;
  color: rgba(255, 245, 220, 0.6);
  font-size: 0.9rem;
  text-align: center;
}

.guide-content blockquote {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--yellow);
  border-radius: 8px;
  background: rgba(255, 211, 53, 0.08);
}

.guide-content table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
}

.guide-content th,
.guide-content td {
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-comments {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.15rem;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-comments__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.guide-comments__head h2 {
  margin: 0.2rem 0 0;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  font-size: 1.45rem;
  line-height: 1;
}

.guide-comments__count {
  min-width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(182, 229, 92, 0.14);
  color: #e9ffb6;
  font-family: "Lilita One", cursive;
}

.guide-comments__empty,
.guide-comment-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 245, 220, 0.08);
  background: rgba(255, 245, 220, 0.035);
  color: rgba(255, 245, 220, 0.72);
}

.guide-comments__empty {
  justify-content: flex-start;
}

.guide-comments__empty i {
  color: #cde972;
}

.guide-comments__empty p {
  margin: 0;
}

.guide-comments__list {
  display: grid;
  gap: 0.7rem;
}

.guide-comment {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 245, 220, 0.08);
  background: rgba(16, 7, 4, 0.28);
}

.guide-comment__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 211, 53, 0.95), rgba(182, 229, 92, 0.8));
  color: #1a0803;
  font-family: "Lilita One", cursive;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(255, 159, 28, 0.16);
}

.guide-comment__body {
  min-width: 0;
}

.guide-comment__meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

.guide-comment__meta strong {
  color: #fff6da;
  font-family: "Lilita One", cursive;
}

.guide-comment__meta span {
  color: rgba(255, 245, 220, 0.5);
  font-size: 0.82rem;
}

.guide-comment__body p {
  margin: 0;
  color: rgba(255, 245, 220, 0.78);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.guide-comment__delete {
  margin: 0;
}

.guide-comment__delete-button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 119, 119, 0.22);
  border-radius: 8px;
  background: rgba(255, 119, 119, 0.07);
  color: #ffb8a8;
}

.guide-comment__delete-button:hover,
.guide-comment__delete-button:focus-visible {
  border-color: rgba(255, 119, 119, 0.46);
  background: rgba(255, 119, 119, 0.14);
}

.guide-comment-form {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 211, 53, 0.16);
  background: linear-gradient(135deg, rgba(255, 211, 53, 0.06), rgba(16, 7, 4, 0.28));
}

.guide-comment-form textarea {
  min-height: 110px;
  resize: vertical;
}

.guide-comment-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.9rem;
}

.guide-sidebar__group {
  display: grid;
  gap: 0.35rem;
}

.guide-sidebar__pages {
  display: grid;
  gap: 0.2rem;
  margin-left: 0.6rem;
  padding: 0 0 0.15rem 0.65rem;
  border-left: 1px solid rgba(255, 245, 220, 0.1);
}

.guide-sidebar__pages a {
  display: block;
  padding: 0.22rem 0.4rem;
  border: 0;
  background: transparent;
  color: rgba(255, 245, 220, 0.64);
  font-size: 0.84rem;
  line-height: 1.25;
}

.guide-sidebar__pages a:hover,
.guide-sidebar__pages a:focus-visible,
.guide-sidebar__pages a.is-current {
  color: #fff4be;
  background: rgba(255, 211, 53, 0.08);
}

.guide-sidebar__pages a.guide-sidebar__more {
  color: #cde972;
  font-family: "Lilita One", cursive;
}

.guide-wiki-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 245, 220, 0.08);
  border-radius: 8px;
  background: rgba(16, 7, 4, 0.24);
}

.guide-wiki-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.7rem;
  border-bottom: 1px solid rgba(255, 245, 220, 0.07);
  color: inherit;
  text-decoration: none;
}

.guide-wiki-row:last-child {
  border-bottom: 0;
}

.guide-wiki-row:hover,
.guide-wiki-row:focus-visible {
  background: rgba(255, 211, 53, 0.055);
}

.guide-wiki-row__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(182, 229, 92, 0.08);
  color: #e9ffb6;
  font-size: 0.9rem;
}

.guide-wiki-row__body {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.guide-wiki-row__title {
  overflow: hidden;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  font-size: 0.98rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-wiki-row__summary {
  overflow: hidden;
  color: rgba(255, 245, 220, 0.72);
  font-size: 0.92rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-wiki-row__meta {
  color: rgba(255, 245, 220, 0.54);
  font-size: 0.78rem;
  line-height: 1.25;
}

.guide-wiki-row__arrow {
  color: rgba(255, 245, 220, 0.55);
  font-size: 0.85rem;
}

.guide-wiki-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 860px) 220px;
  gap: 1.35rem;
  align-items: start;
  justify-content: center;
}

.guide-sidebar--detail,
.guide-toc {
  position: sticky;
  top: 6.5rem;
}

.guide-wiki-article {
  min-width: 0;
  padding: 1.45rem 1.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 245, 220, 0.1);
  background: rgba(16, 7, 4, 0.42);
}

.guide-wiki-head {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-back-link {
  justify-self: start;
  margin-top: 0;
}

.guide-back-link::after {
  content: none;
}

.guide-wiki-head .section-kicker {
  justify-self: start;
  padding: 0.42rem 0.7rem;
  border-radius: 8px;
  background: rgba(182, 229, 92, 0.08);
  font-size: 0.78rem;
}

.guide-wiki-head h1 {
  margin: 0;
  color: #fff6da;
  font-family: "Lilita One", cursive;
  font-size: clamp(1.9rem, 2.45vw, 2.55rem);
  line-height: 1;
}

.guide-wiki-head p {
  max-width: 58rem;
  margin: 0;
  color: rgba(255, 245, 220, 0.72);
  line-height: 1.55;
}

.guide-toc {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 7, 4, 0.28);
}

.guide-toc p {
  margin: 0;
  color: rgba(255, 245, 220, 0.62);
  font-size: 0.9rem;
}

.guide-toc nav {
  display: grid;
  gap: 0.18rem;
  padding-left: 0.65rem;
  border-left: 1px solid rgba(255, 245, 220, 0.12);
}

.guide-toc a {
  display: block;
  padding: 0.16rem 0;
  color: rgba(255, 245, 220, 0.72);
  text-decoration: none;
  font-size: 0.86rem;
  line-height: 1.3;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: #fff4be;
}

.guide-toc a.is-subitem {
  padding-left: 0.85rem;
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.86rem;
}

.guide-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.45rem;
}

.guide-admin-actions,
.guide-form-actions,
.guide-admin-row-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.guide-admin-list,
.guide-form {
  padding: 1.45rem;
}

.guide-admin-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(170px, 0.8fr) minmax(190px, 0.8fr) auto auto;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 1rem;
}

.guide-admin-filter-count {
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.92rem;
  white-space: nowrap;
}

.guide-admin-table-wrap {
  overflow-x: auto;
}

.guide-admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0 0.65rem;
}

.guide-admin-table th {
  padding: 0 0.85rem 0.35rem;
  color: rgba(255, 245, 220, 0.58);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.guide-admin-table td {
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.045);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 245, 220, 0.75);
}

.guide-admin-table td:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px 0 0 8px;
}

.guide-admin-table td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 8px 8px 0;
}

.guide-admin-table strong,
.guide-admin-table span {
  display: block;
}

.guide-admin-table strong {
  color: #fff8e7;
  line-height: 1.15;
}

.guide-admin-table span:not(.status-pill) {
  color: rgba(255, 245, 220, 0.54);
  font-size: 0.9rem;
}

.guide-admin-icon-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.guide-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.guide-form-grid__full {
  grid-column: 1 / -1;
}

.guide-form #guideSummary {
  min-height: 86px;
  height: 86px;
}

.guide-editor {
  min-height: 360px;
}

.guide-editor-host {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 211, 53, 0.22);
  background: #1c0f0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 24px rgba(0, 0, 0, 0.18);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.guide-editor-host:focus-within {
  border-color: rgba(255, 211, 53, 0.42);
  box-shadow: 0 0 0 0.2rem rgba(255, 122, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 30px rgba(0, 0, 0, 0.24);
}

.guide-form .cke_chrome {
  overflow: hidden;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
}

.guide-form .cke_inner {
  background: #160a06 !important;
}

.guide-form .cke_top,
.guide-form .cke_bottom {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 245, 220, 0.08), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: none !important;
}

.guide-form .cke_top {
  padding: 0.72rem !important;
}

.guide-form .cke_toolbox {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.guide-form .cke_toolbar {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.guide-form .cke_toolgroup,
.guide-form .cke_combo_button {
  border-color: rgba(255, 211, 53, 0.14) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 245, 220, 0.08), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.guide-form .cke_toolgroup {
  margin: 0 !important;
  display: inline-flex !important;
  white-space: nowrap;
  overflow: hidden;
}

.guide-form .cke_button {
  min-width: 36px !important;
  height: 36px !important;
  display: inline-grid !important;
  place-items: center;
  padding: 0 0.4rem !important;
  border-radius: 7px !important;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.guide-form .cke_button_icon {
  opacity: 0.92;
  filter: invert(91%) sepia(19%) saturate(464%) hue-rotate(343deg) brightness(108%) contrast(97%);
}

.guide-form .cke_button_label,
.guide-form .cke_combo_text {
  color: rgba(255, 245, 220, 0.88) !important;
  text-shadow: none !important;
}

.guide-form .cke_combo_arrow,
.guide-form .cke_button_arrow {
  filter: invert(91%) sepia(19%) saturate(464%) hue-rotate(343deg) brightness(108%) contrast(97%);
}

.guide-form .cke_combo {
  margin: 0 !important;
}

.guide-form .cke_combo_button {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center;
}

.guide-form .cke_combo_text {
  padding-inline: 0.55rem !important;
  font-family: "Baloo 2", system-ui, sans-serif !important;
  font-size: 0.9rem !important;
}

.guide-form .cke_toolbar_separator {
  width: 1px !important;
  height: 22px !important;
  margin: 0 0.2rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.guide-form .cke_button:hover,
.guide-form .cke_button:focus,
.guide-form .cke_combo_button:hover,
.guide-form .cke_combo_button:focus {
  background: rgba(255, 211, 53, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 53, 0.16) !important;
}

.guide-form .cke_button:hover .cke_button_icon,
.guide-form .cke_button:focus .cke_button_icon,
.guide-form .cke_button_on .cke_button_icon {
  opacity: 1;
  filter: invert(83%) sepia(63%) saturate(830%) hue-rotate(350deg) brightness(104%) contrast(101%);
}

.guide-form .cke_button_on,
.guide-form .cke_combo_on .cke_combo_button {
  background: rgba(255, 211, 53, 0.2) !important;
}

.guide-form .cke_button_disabled .cke_button_icon {
  opacity: 0.34;
}

.guide-form .cke_contents {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #160a06 !important;
  min-height: 420px !important;
}

.guide-form.panel-card:hover {
  border-color: var(--stroke);
  box-shadow: var(--shadow);
}

.guide-form.panel-card:hover::before {
  opacity: 1;
}

.guide-form .cke_resizer {
  border-color: transparent rgba(255, 211, 53, 0.54) transparent transparent !important;
}

.cke_panel.cke_combopanel {
  overflow: hidden !important;
  border: 1px solid rgba(255, 211, 53, 0.28) !important;
  border-radius: 8px !important;
  background: #1c0f0a !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.cke_panel.cke_combopanel .cke_panel_frame {
  background: #1c0f0a !important;
}

.ck.ck-editor__main > .ck-editor__editable {
  min-height: 360px;
  border-radius: 0 0 8px 8px !important;
}

.ck.ck-toolbar {
  border-radius: 8px 8px 0 0 !important;
}

.guide-form-actions {
  justify-content: flex-end;
  margin-top: 1rem;
}

.guide-admin-pagination {
  margin-top: 1rem;
}

.download-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.download-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 245, 220, 0.76);
}

.download-steps strong {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #1f1007;
  background: var(--yellow);
  font-family: "Lilita One", cursive;
}

@media (max-width: 991.98px) {
  .quick-info-shell,
  .quick-info-lanes,
  .download-grid,
  .guide-card-grid,
  .guides-layout,
  .download-steps {
    grid-template-columns: 1fr;
  }

  .guide-sidebar {
    position: static;
  }

  .guide-wiki-layout {
    grid-template-columns: 1fr;
  }

  .guide-sidebar--detail,
  .guide-toc {
    position: static;
  }

  .guides-page .guide-card {
    grid-template-columns: 1fr;
  }

  .guides-section__intro,
  .guide-admin-head {
    align-items: stretch;
    flex-direction: column;
  }

  .guide-form-grid {
    grid-template-columns: 1fr;
  }

  .guide-admin-filters {
    grid-template-columns: 1fr 1fr;
  }

  .guide-admin-filter-field--search,
  .guide-admin-filter-count {
    grid-column: 1 / -1;
  }

  .quick-info-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-info-facts div {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
  }

  .quick-info-facts div:last-child {
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  .online-status-bar__text {
    justify-content: flex-start;
  }

  .guide-wiki-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .guide-wiki-row__arrow {
    display: none;
  }

  .guide-wiki-article {
    padding: 1rem;
  }

  .guide-admin-filters {
    grid-template-columns: 1fr;
  }

  .quick-info-facts {
    grid-template-columns: 1fr;
  }

  .quick-info-facts div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .quick-info-lane {
    grid-template-columns: 1fr;
  }

  .quick-info-lane i {
    grid-row: auto;
  }
}

/* Compact rankings and account tools. */
.ranking-simple-page { padding-top: 8rem; }
.ranking-simple-list .woe-ranking-table { min-width: 600px; }
.ranking-simple-list .woe-ranking-table__profile { min-width: 180px; }
.ranking-simple-heading { display: grid; gap: 1.1rem; margin-bottom: 1.5rem; }
.ranking-simple-heading h1 { margin: 0; }
.ranking-category-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.ranking-category-nav a { padding: .5rem .9rem; border: 1px solid var(--border-color, #593b32); border-radius: 999px; color: var(--text-muted, #d2bbb1); text-decoration: none; font-weight: 600; }
.ranking-category-nav a[aria-current="page"] { color: #fff; background: #743321; border-color: #c76b43; }
.ranking-category-nav a:hover, .ranking-category-nav a:focus-visible { color: #fff; border-color: #e99566; }
.ranking-simple-list { padding: 1.2rem; }
.ranking-simple-list .woe-ranking-table-wrap { margin: 0; }
.ranking-simple-list .woe-ranking-table td { padding-top: .8rem; padding-bottom: .8rem; }
.ranking-simple-list .ranking-stage-avatar { width: 42px; height: 42px; min-width: 42px; }
.ranking-position { display: inline-flex; min-width: 2rem; height: 2rem; align-items: center; justify-content: center; }
.ranking-position.is-leading { color: #ffd196; border: 1px solid #a56942; border-radius: 50%; }
.vote-requirements-details { margin: 1rem 0; }
.vote-requirements-details summary { cursor: pointer; font-weight: 600; }
.vote-reward-fields { border: 1px solid #704b3b; border-radius: 12px; padding: 1rem; }
.vote-reward-fields legend { font-size: 1.05rem; font-weight: 700; float: none; width: auto; padding: 0 .4rem; }
.vote-pending-rewards { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: 1rem; }
.vote-pending-rewards span, .vote-reward-label { color: #ffd196; }
@media (max-width: 575px) {
  .ranking-simple-list { padding: .7rem; }
  .ranking-category-nav { gap: .4rem; }
  .ranking-category-nav a { font-size: .85rem; padding: .45rem .65rem; }
}

/* Compact home ranking summaries. */
.ranking-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ranking-summary-card { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.ranking-summary-card .card-title { margin: 0; font-size: 1.1rem; }
.ranking-summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ranking-summary-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.ranking-summary-list a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, #f9e7d0); }
.ranking-summary-list strong { font-size: .9rem; white-space: nowrap; }
.ranking-summary-link { margin-top: auto; font-size: .85rem; }
@media (max-width: 991px) { .ranking-summary-grid { grid-template-columns: 1fr; } }

/* Discord account management */
.portal-account-list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.portal-game-account { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; }
.portal-game-account.is-selected { border-color: var(--brand, #ffb733); }
.portal-game-account strong, .portal-game-account span { display: block; overflow-wrap: anywhere; }
.portal-game-account span { font-size: .9rem; opacity: .7; }
.portal-game-account .btn-ghost { flex-shrink: 0; }
.portal-account-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; margin-top: 1.5rem; }
.portal-account-action { min-width: 0; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; }
.portal-account-action summary { cursor: pointer; font-weight: 700; }
.portal-account-action[open] summary { margin-bottom: 1rem; }
.portal-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.portal-settings-form { max-width: 32rem; }
.discord-card > .text-link { display: inline-block; }
@media (max-width: 640px) {
  .portal-account-forms, .portal-field-pair { grid-template-columns: 1fr; }
  .portal-game-account { flex-wrap: wrap; }
}
.portal-referral-onboarding { max-width: 38rem; }
.portal-referral-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.portal-referral-list { display: grid; gap: .75rem; }
.portal-referrals input[readonly] { cursor: text; font-size: .9rem; }

.launch-notice {
  display: grid;
  gap: .65rem;
  max-width: 34rem;
  margin: 0 0 1.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(255, 183, 51, .45);
  border-radius: 1.25rem;
  background: linear-gradient(120deg, rgba(255, 183, 51, .13), rgba(113, 173, 69, .08));
}
.launch-notice__label { color: var(--brand, #ffb733); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.launch-notice time { display: grid; gap: .3rem; }
.launch-notice time strong { font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.2; }
.launch-notice time span { font-size: .9rem; line-height: 1.5; }
.launch-notice > a { width: fit-content; color: inherit; font-size: .9rem; font-weight: 700; }
.launch-notice > a i { margin-right: .35rem; }