@charset "utf-8";
/* Consolidated spinner, adventure, and meta styles */
/* ================================
   TOKENS & GLOBALS
==================================*/
:root {
  --bg: #0b0f14;
  --panel: #121821;
  --muted: #9aa6bf;
  --accent: #ffb703;
  --accent-2: #00d4ff;
  --soft-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  --attrRows: 3;
  --cardH: 220px;
  --statsH: min(80dvh, 760px);
  --rarity-common: rgba(200, 210, 230, 0.18);
  --rarity-common-bg: rgba(200, 210, 230, 0.06);
  --rarity-common-outline: rgba(184, 192, 204, 0.25);
  --rarity-common-text: #b8c0cc;
  --rarity-uncommon: rgba(120, 255, 204, 0.25);
  --rarity-uncommon-bg: rgba(120, 255, 204, 0.12);
  --rarity-uncommon-outline: rgba(52, 211, 153, 0.35);
  --rarity-uncommon-text: #34d399;
  --rarity-uncommon-glow: rgba(52, 211, 153, 0.1);
  --rarity-rare: rgba(0, 212, 255, 0.35);
  --rarity-rare-bg: rgba(0, 212, 255, 0.12);
  --rarity-rare-outline: rgba(96, 165, 250, 0.45);
  --rarity-rare-text: #60a5fa;
  --rarity-rare-glow: rgba(96, 165, 250, 0.12);
  --rarity-epic: rgba(150, 130, 255, 0.45);
  --rarity-epic-bg: rgba(150, 130, 255, 0.14);
  --rarity-epic-outline: rgba(192, 132, 252, 0.55);
  --rarity-epic-text: #c084fc;
  --rarity-epic-glow: rgba(192, 132, 252, 0.16);
  --rarity-legendary: rgba(255, 183, 3, 0.55);
  --rarity-legendary-bg: rgba(255, 183, 3, 0.16);
  --rarity-legendary-outline: rgba(251, 191, 36, 0.65);
  --rarity-legendary-text: #fbbf24;
  --rarity-legendary-glow: rgba(251, 191, 36, 0.18);
  --rarity-mythic: rgba(248, 113, 113, 0.75);
  --rarity-mythic-text: #f87171;
  --rarity-mythic-glow: rgba(248, 113, 113, 0.22);
  --card-top: #402819;
  --card-mid: #4a2a16;
  --card-bottom: #2c1f17;
  --stone-top: #1e2532;
  --stone-mid: #151d29;
  --stone-deep: #0e1621;
  --rim: rgba(255, 140, 0, 0.25);
  --smoke: rgba(255, 255, 255, 0.02);
  --engrave-ink: #f4e5c1;
  --engrave-highlight: rgba(255, 255, 255, 0.16);
  --engrave-shadow: rgba(0, 0, 0, 0.65);
  --noise:
    repeating-linear-gradient(
      90deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.01) 2px 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(0, 0, 0, 0.05) 2px 3px
    );
  --pill-min: 80px;
  --n-ink-dark: #0b0f14;
  --n-ink: #0f1420;
  --n-on-warm: #1a1200;
  --n-on-dark: #e6eefb;
  --chrome-bg: rgba(255, 255, 255, 0.04);
  --chrome-brd: rgba(255, 255, 255, 0.1);
  --chrome-brd-2: rgba(255, 255, 255, 0.14);
  --n-orange: #ff5f00;
  --n-orange-hi: #ff7a1a;
  --n-orange-lo: #bf3f00;
  --n-gold: #ffcc00;
  --n-blue: #00c8ff;
  --n-blue-hi: #33d6ff;
  --n-blue-lo: #008fb3;
  --n-leaf: #1ea94d;
  --n-red: #e11d48;
  --ex-color: #a445ff;
  --ex-pink: #ff69c9;
  --ex-pink-soft: #ffd2ff;
  --ex-ice: #d6ecff;
  --ex-blue: #66b3ff;
  --ex-grad: linear-gradient(
    90deg,
    var(--ex-pink) 0%,
    var(--ex-pink-soft) 25%,
    var(--ex-ice) 55%,
    var(--ex-blue) 85%,
    var(--ex-pink) 100%
  );
  --blur-s: 6px;
  --blur-m: 10px;
  --blur-l: 14px;
  --blur-xl: 18px;
  --leg-gold-1: #fee9a0;
  --leg-gold-2: #ffd36b;
  --leg-gold-3: #ffba45;
  --leg-amber: #ffecb3;
  --leg-shadow: rgba(0, 0, 0, 0.35);
  --epic-1: #e1a4ff;
  --epic-2: #c070ff;
  --epic-3: #7c3cff;
  --level-hue: 210;
  --level-glow: 0;
  --level-speed: 2s;
  --tier-sat: 0.9;
  --chip-bg: rgba(0, 0, 0, 0.5);
  --chip-border: rgba(255, 255, 255, 0.12);
  --nar-orange: #f58220;
  --nar-navy: #1e3a8a;
  --nar-green: #2e7d32;
  --nar-silver: #c2c8cc;
  --nar-rasengan: #22a4ff;
  --nar-chakra-amber: rgba(245, 130, 32, 0.35);
  --nar-chakra-blue: rgba(34, 164, 255, 0.28);
  --nar-ink: #000;
  --nar-paper: #fff;
  --nar-text-solid: #ffe8c6;
  --nar-text-contrast: #fffdf7;
  --nar-text-stroke: #000;
  --skeleton-base: rgba(255, 255, 255, 0.08);
  --skeleton-highlight: rgba(255, 255, 255, 0.24);
  --skeleton-radius: 10px;

  /* default text color for the heading */
  --nar-text-color: var(--nar-text-contrast);
  --meta-shop-bg: rgba(11, 15, 20, 0.78);
  --meta-keeper-color-default: #e6eefb;
  --meta-keeper-color-tontons-forge: #e4008c;
  --meta-keeper-color-tsubakis-bladeworks: #38bdf8;
  --meta-keeper-color-mount-myoboku-scrolls: #60a5fa;
  --meta-keeper-color-lees-training-pavilion: #34d399;
  --meta-keeper-color-kuramas-mirage-den: #f472b6;
  --meta-keeper-color-ichiraku-provisions: #ffffff;
  --meta-keeper-color-orochi-biotech: #a78bfa;
  --meta-keeper-color-gato-trading-co: #facc15;

  /* Cursor tokens: update URLs or hotspots if you swap assets */
  --cursor-default: url("../cursors/default.svg") 2 2, auto;
  --cursor-clickable: url("../cursors/clickable.svg") 8 4, pointer;
  --cursor-loading: url("../cursors/loading.svg") 16 16, progress;
  --cursor-typeable: url("../cursors/typeable.svg") 12 4, text;
  --cursor-pressed: url("../cursors/pressed.svg") 6 2, pointer;
  --cursor-disabled: url("../cursors/default.svg") 2 2, not-allowed;
}

@media (prefers-color-scheme: light) {
  :root {
    --skeleton-base: rgba(0, 0, 0, 0.08);
    --skeleton-highlight: rgba(0, 0, 0, 0.16);
    --cursor-default: url("../cursors/default.svg") 2 2, auto;
    --cursor-clickable: url("../cursors/clickable.svg") 8 4, pointer;
    --cursor-loading: url("../cursors/loading.svg") 16 16, progress;
    --cursor-typeable: url("../cursors/typeable.svg") 12 4, text;
    --cursor-pressed: url("../cursors/pressed.svg") 6 2, pointer;
    --cursor-disabled: url("../cursors/default.svg") 2 2, not-allowed;
  }
}

/* Resets / base */
* {
  box-sizing: border-box;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important; /* IE and Edge */
  font-family:
    Russo One,
    sans-serif !important;
}
body,
html {
  height: 100%;
  overflow: hidden; /* lock page scroll; panels handle it */
}
@media (max-width: 1900px) {
  body,
  html {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }
  .nrt-announce--coming .nrt-announce__label {
font: 700 13px / 1.1 Russo One, system-ui, sans-serif;
  }



.meta-catalog-header p {
display: none;
}



}

body {
  background: radial-gradient(
      1200px 1200px at 18% 8%,
      #172231 0%,
      var(--bg) 55%
    )
    fixed;
  color: #e6eefb;
  font:
    16px/1.45 system-ui,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial;
  font-family:
    Russo One,
    sans-serif;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Soft shadow for a lifted effect */
  cursor: var(--cursor-default, auto);
}

/* ================================
   Cursor States
==================================*/
:where(a, button, .btn, .clickable, [role="button"], label[for], input[type="button"], input[type="submit"], input[type="reset"]) {
  cursor: var(--cursor-clickable, pointer);
}

:where(
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="url"],
    textarea,
    [contenteditable=""],
    [contenteditable="true"]
  ) {
  cursor: var(--cursor-typeable, text);
}

.cursor-loading,
.is-loading,
[aria-busy="true"],
[data-loading="true"],
[data-state="loading"],
body.cursor-loading,
body.is-loading {
  cursor: var(--cursor-loading, progress) !important;
}

body.is-pointer-down {
  cursor: var(--cursor-pressed, pointer);
  --cursor-default: var(--cursor-pressed, pointer);
  --cursor-clickable: var(--cursor-pressed, pointer);
  --cursor-typeable: var(--cursor-pressed, pointer);
}

/* ================================
   Skeleton Loading System
==================================*/
[data-skeleton-active="true"] {
  position: relative;
}
[data-skeleton-active="true"] > :not([data-skeleton-element]) {
  opacity: 0;
  pointer-events: none;
}
[data-skeleton-element] {
  pointer-events: none !important;
}
.skeleton-overlay {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}
.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--skeleton-radius);
  min-height: 0.75rem;
  color: transparent;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--skeleton-highlight),
    transparent
  );
  animation: skeleton-shimmer 1.15s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation-duration: 2.4s;
  }
}
.skeleton-line {
  height: 0.75rem;
}
.skeleton-line--lg {
  height: 1.25rem;
}
.skeleton-line--xl {
  height: 1.6rem;
}
.skeleton-line--sm {
  height: 0.5rem;
}
.skeleton-circle {
  width: 2.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.skeleton-pill {
  height: 1.5rem;
  border-radius: 999px;
}
.skeleton-stack {
  display: grid;
  gap: 0.45rem;
}
.skeleton-grid {
  display: grid;
  gap: 1rem;
}
.skeleton-card {
  border-radius: var(--skeleton-radius);
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
}
.skeleton-card .skeleton {
  border-radius: calc(var(--skeleton-radius) * 0.6);
}
.meta-keepers-skeleton {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.meta-items-skeleton {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.meta-items-skeleton .skeleton-card {
  min-height: 150px;
}
.pnList-skeleton {
  grid-template-columns: 1fr;
}
.pnList-skeleton .skeleton-card {
  min-height: 88px;
}
.lbList-skeleton {
  grid-template-columns: 1fr;
  gap: 0.8rem;
}
.lbList-skeleton .skeleton-card {
  min-height: 76px;
}
.lbModal-skeleton {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lbModal-skeleton .skeleton-card {
  min-height: 120px;
}
.adv-chat-skeleton {
  display: grid;
  gap: 0.9rem;
  padding: 0.25rem 0;
}
.adv-chat-skeleton__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
}
.adv-chat-skeleton__avatar {
  width: 2.5rem;
}
.adv-chat-skeleton__lines {
  width: 100%;
}
.adv-chat-skeleton__lines .skeleton-line:nth-child(1) {
  width: 45%;
}
.adv-chat-skeleton__lines .skeleton-line:nth-child(2) {
  width: 100%;
}
.adv-chat-skeleton__lines .skeleton-line:nth-child(3) {
  width: 65%;
}
.adv-chat-skeleton-overlay {
  width: 100%;
}
.adv-profile-loading {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.adv-profile-loading__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
.ency-header-skeleton {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  width: 100%;
}
.ency-header-skeleton__stack {
  display: grid;
  gap: 0.5rem;
  max-width: 22rem;
}
.ency-header-skeleton__category {
  max-width: 6.5rem;
}
.ency-header-skeleton__title {
  max-width: min(28rem, 70vw);
}
.ency-header-skeleton__rarity {
  max-width: 8rem;
}
.ency-body-skeleton {
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 1.2rem;
  align-items: flex-start;
  width: 100%;
}
.ency-body-skeleton__nav {
  display: grid;
  gap: 0.6rem;
}
.ency-body-skeleton__nav-item {
  width: 100%;
}
.ency-body-skeleton__content {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.ency-body-skeleton__section {
  display: grid;
  gap: 0.55rem;
}
.ency-body-skeleton__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ency-body-skeleton__chips .skeleton {
  min-width: 5.5rem;
  height: 1.5rem;
}
.ency-body-skeleton__paragraph {
  width: 100%;
}
@media (max-width: 1900px) {
  .ency-header-skeleton {
    justify-items: flex-start;
  }
  .ency-body-skeleton {
    grid-template-columns: 1fr;
  }
}
.adv-profile-loading__avatar {
  width: 4rem;
}
.adv-profile-loading__header-lines .skeleton-line:nth-child(2) {
  width: 72%;
}
.adv-profile-loading__header-lines .skeleton-line:nth-child(3) {
  width: 50%;
}
.adv-profile-loading__status .skeleton-line:first-child {
  width: 36%;
}
.adv-profile-loading__status .skeleton-line:last-child {
  width: 60%;
}
.adv-profile-loading__detail .skeleton-line:first-child {
  width: 90%;
}
.adv-profile-loading__detail .skeleton-line:last-child {
  width: 65%;
}
.adv-profile-loading__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.adv-profile-loading__metric {
  min-width: 140px;
  max-width: 220px;
}
.adv-profile-loading__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.adv-profile-loading__badge {
  min-width: 110px;
  height: 1.35rem;
}
.adv-profile-loading__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.adv-profile-loading__btn {
  min-width: 140px;
  height: 2.4rem;
  border-radius: 999px;
}
.adv-profile-loading__btn--primary {
  min-width: 180px;
}
.profile-loading-skeleton {
  display: grid;
  gap: 1.35rem;
  align-content: start;
  width: 100%;
}
.profile-loading-skeleton__field {
  display: grid;
  gap: 0.45rem;
}
.profile-loading-skeleton__input {
  height: 2.75rem;
  border-radius: 12px;
}
.profile-loading-skeleton__section {
  display: grid;
  gap: 0.75rem;
}
.profile-loading-skeleton__heading {
  display: grid;
  gap: 0.35rem;
}
.profile-loading-skeleton__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.profile-loading-skeleton__swatches .skeleton-circle {
  width: 2.75rem;
}
.profile-loading-skeleton__stats {
  display: grid;
  gap: 0.65rem;
}
.profile-loading-skeleton__stat {
  display: grid;
  gap: 0.4rem;
}
@media (min-width: 720px) {
  .profile-loading-skeleton__stat {
    grid-template-columns: minmax(0, 1fr) 1fr;
    align-items: center;
  }
}
.profile-loading-skeleton__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.profile-loading-skeleton__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}
.profile-loading-skeleton__btn {
  height: 2.5rem;
  min-width: 120px;
  border-radius: 999px;
}
.profile-loading-skeleton__btn--primary {
  min-width: 160px;
}
.profile-skeleton-grid--avatars {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.profile-skeleton-grid--avatars .skeleton-card {
  min-height: 120px;
}
.profile-skeleton-grid--builds {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.profile-skeleton-grid--builds .skeleton-card {
  min-height: 132px;
}

/* ================================
   RARITY SYSTEM COLORS
==================================*/

/* EX Rarity (Special) */
.card[data-rarity="ex"] {
  --ex-crystal-pink-1: #f9a8d4;
  --ex-crystal-pink-2: #f472b6;
  --ex-crystal-iris: #c084fc;
  --ex-crystal-az-1: #93c5fd;
  --ex-crystal-az-2: #38bdf8;
  --ex-crystal-ice: #ecfeff;
  --ex-glow-inner: rgba(168, 85, 247, 0.32);
  --ex-glow-outer: rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  position: relative;
  --ex-border: conic-gradient(
    from 0deg at 50% 50%,
    #9ef,
    #a9f,
    #f9a,
    #ff9,
    #9f9,
    #9ef 85%,
    #9ef
  );
  animation: exGlowPulse 3.4s ease-in-out infinite;
  background:
    radial-gradient(
        120% 120% at 50% 35%,
        hsl(205 100% 72%/0.8) 20%,
        hsl(280 100% 75%/0.75) 70%,
        hsl(260 60% 30%/0.6) 80%,
        hsl(240 30% 10%/0.8) 90%
      )
      padding-box,
    conic-gradient(
        from 210deg at 50% 50%,
        hsl(200 100% 70%),
        hsl(320 100% 70%),
        hsl(200 100% 70%)
      )
      border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  border-color: rgba(164, 69, 255, 0.6);
  box-shadow:
    0 0 26px rgba(164, 69, 255, 0.18),
    0 0 60px rgba(124, 58, 237, 0.12),
    inset 0 0 18px rgba(66, 99, 255, 0.16);
  overflow: hidden;
}

/* ================================
   LAYOUT
==================================*/
.app {
  display: grid;
  gap: 14px;
  grid-template-columns: min(360px, 26vw) 1fr;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for iOS Safari */
  align-content: stretch;
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
  padding: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-top: max(14px, env(safe-area-inset-top));
}
.app > * {
  min-height: 0;
}
@media (max-width: 1900px) {
  .app {
    gap: 10px;
    grid-template-columns: 1fr;
    height: auto;
    height: 100vh;
    height: 100dvh; /* better viewport unit on mobile */
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
    padding: 10px;
  }

  .app .adv-panel {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}
.btnRow {
  align-items: center;
  display: flex;
  justify-content: center;
}
.stage {
  background: rgba(255, 255, 255, 0.04);
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.02)
      )
      padding-box,
    radial-gradient(
        120% 100% at 0% 0%,
        rgba(255, 95, 0, 0.1),
        rgba(0, 0, 0, 0) 65%
      )
      border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
  box-shadow:
    var(--soft-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
@media (max-width: 1900px) {
  .stage {
    grid-template-rows: auto auto;
    height: auto;
  }
}
.stageBody {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.2fr);
  height: 100%;
  min-height: 0;
  padding: 12px;
}
@media (max-width: 1900px) {
  .stageBody {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    gap: 8px;
    gap: 10px;
    gap: 0px;
    grid-template-columns: 1fr; /* single column */
    height: auto;
    justify-content: center;
    padding: 8px;
    padding: 10px;
  }
}

/* Columns */
.infoCol,
.spinCol {
  min-height: 0;
  min-width: 0;
  overflow: visible;
}
.statsHeader-slot {
  display: contents;
}
@media (min-width: 1900px) {
  #statsHeaderDesktopSlot .statsHeader {
    margin-top: 12px;
  }
}

/* ================================
   DOCK (sidebar) + HAMBURGER
==================================*/
.dock {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto auto auto 1fr;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
      )
      padding-box,
    radial-gradient(
        120% 100% at 0% 0%,
        rgba(255, 95, 0, 0.14),
        rgba(0, 0, 0, 0) 55%
      )
      border-box;
  background-attachment: scroll;
  background-image:
    url("/dock.webp"), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important;
  background-position: 50%;
  background-size: cover !important; /* Ensures the image covers the entire div */
  border: 1px solid var(--chrome-brd);
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overscroll-behavior: contain;
}
.dock > * {
  max-width: 100%;
  min-width: 0;
}
.dock .h {
  color: #ffe9c2;
  isolation: isolate; /* keep blend effects tidy */
  letter-spacing: 0.2px;
  margin-top: 25px;
  position: relative;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.dock .h,
.dock .row {
  align-items: center;
  display: flex;
  justify-content: center;
}
.dock .row {
  flex-wrap: wrap;
  gap: 8px;
  justify-items: center;
}
.dock .row > * {
  max-width: 95%;
  min-width: 0;

}
.dockToggle {
  display: none !important; /* legacy toggle hidden on desktop */
}
.hamburger {
  background: transparent;
  border: transparent;
  display: none;
  height: 42px;
  position: fixed;
  right: 14px;
  top: max(14px, env(safe-area-inset-top));
  width: 42px;
  z-index: 1100;
}
.hamburger span {
  background: #e6eefb;
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  width: 22px;
}
.hamburger span:nth-child(1) {
  top: 13px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 27px;
}

/* Scrim */
.dock-scrim {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(6, 10, 16, 0.5);
  inset: 0;
  position: fixed;
  z-index: 1000;
}
.dock-scrim[hidden] {
  display: none;
}

/* ================================
   BUTTONS
==================================*/
.btn {
  background: linear-gradient(180deg, #1c2736, #131c29);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #e6eefb;
  cursor: var(--cursor-clickable, pointer);
  letter-spacing: 0.2px;
  min-width: 0;
  outline: none;
  padding: 0.58rem 0.85rem;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition:
    transform 0.15s,
    filter 0.15s;
  white-space: nowrap;
  /* iOS optimization */
  will-change: transform, filter;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn:active {
  transform: translateY(1px) scale(0.995);
}
.btn.sm {
  color: #dffff2;
}
.btn.sa,
.btn.sm {
  border-radius: 10px;
  font-size: 0.92rem;
  padding: 0.48rem 0.65rem;
}
.btn.sa {
  background: linear-gradient(180deg, #b3e5fc, #81d4fa);
  background: linear-gradient(180deg, #ffe066, var(--n-gold));
  border: 1px solid color-mix(in oklab, var(--n-gold) 60%, black 8%);
  box-shadow:
    0 10px 22px rgba(180, 140, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #003344;
  color: var(--n-on-warm);
}
.btn.primary {
  background: linear-gradient(180deg, #2b3a52, #202d40);
  background: linear-gradient(180deg, var(--n-blue-hi), var(--n-blue));
  border-color: rgba(255, 255, 255, 0.16);
  border: 1px solid color-mix(in oklab, var(--n-blue) 80%, white 0%);
  box-shadow:
    0 10px 24px rgba(0, 160, 230, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--n-on-dark);
}
.btn.success {
  background: linear-gradient(180deg, #2a4b3e, #1b322a);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--n-leaf) 85%, white 8%),
    var(--n-leaf)
  );
  border-color: rgba(120, 255, 204, 0.35);
  border: 1px solid color-mix(in oklab, var(--n-leaf) 75%, black 10%);
  box-shadow:
    0 10px 22px rgba(20, 120, 60, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #dffff2;
  color: #eafff3;
}
.btn.danger {
  background: linear-gradient(180deg, #4b2a2a, #2a1b1b);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--n-red) 85%, white 6%),
    var(--n-red)
  );
  border: 1px solid rgba(255, 120, 120, 0.35);
  border: 1px solid color-mix(in oklab, var(--n-red) 70%, black 10%);
  box-shadow:
    0 10px 24px rgba(160, 0, 40, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffecec;
  color: #ffecef;
}
.btn.ghost {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(0, 0, 0, 0.22)
  );
  border-color: rgba(0, 212, 255, 0.22);
  box-shadow: 0 6px 16px rgba(4, 12, 20, 0.32);
  color: #d2e6ff;
}
.btn.ghost:hover {
  box-shadow: 0 10px 22px rgba(4, 12, 20, 0.42);
  filter: brightness(1.1) saturate(1.05);
}
.btn.ghost:active {
  box-shadow: 0 4px 12px rgba(4, 12, 20, 0.3);
  transform: translateY(1px) scale(0.99);
}
.pin-serum-btn {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: inline-flex;
  font-size: 1.1rem;
  height: 36px;
  isolation: isolate;
  justify-content: center;
  line-height: 1;
  min-width: 36px;
  padding: 0;
  position: relative;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  width: 36px;
}
.pin-serum-btn .pin-serum-btn__icon {
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.pin-serum-btn .pin-serum-btn__pulse {
  background: radial-gradient(circle at 50% 50%, rgba(0, 200, 255, 0.55) 0%, rgba(0, 200, 255, 0) 65%);
  border-radius: inherit;
  inset: -12%;
  opacity: 0;
  position: absolute;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}
.pin-serum-btn::after {
  background: linear-gradient(180deg, var(--n-blue-hi), var(--n-blue));
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(8, 12, 20, 0.6);
  content: '';
  height: 0.48rem;
  opacity: 0;
  position: absolute;
  right: 6px;
  top: 6px;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: 0.48rem;
  z-index: 2;
}
.pin-serum-btn.has-pins::after {
  opacity: 1;
  transform: scale(1);
}
.pin-serum-btn.is-limit-reached::after {
  background: linear-gradient(180deg, var(--n-orange-hi), var(--n-orange));
}
.pin-serum-btn.is-inactive {
  filter: saturate(0.25) brightness(0.85);
}
.pin-serum-btn.is-inactive .pin-serum-btn__icon {
  opacity: 0.55;
}
.pin-serum-btn.is-active {
  box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.35), 0 12px 26px rgba(0, 160, 255, 0.28);
}
.pin-serum-btn.is-active .pin-serum-btn__pulse {
  animation: pinSerumPulse 2.6s ease-in-out infinite;
  opacity: 1;
  transform: scale(1);
}
.pin-serum-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.85), 0 10px 24px rgba(0, 160, 255, 0.3);
  filter: brightness(1.1);
}
.pin-serum-btn[disabled] {
  filter: grayscale(0.2) saturate(0.6) brightness(0.9);
  opacity: 0.7;
}

@keyframes pinSerumPulse {
  0% {
    opacity: 0.8;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.8;
    transform: scale(0.95);
  }
}
.btn[disabled],
button[disabled] {
  cursor: var(--cursor-disabled, not-allowed);
  filter: grayscale(0.2) saturate(0.7) opacity(0.7);
  opacity: 0.5;
  pointer-events: none;
}

/* Link-style button (used by the mobile summary toggle) */
.btn.link {
  background: none;
  border: 0;
  color: var(--accent);
  color: var(--n-orange);
  cursor: var(--cursor-clickable, pointer);
  font: inherit;
  padding: 4px 0;
  text-decoration: underline;
}
.btn.link.sm {
  font-size: 0.9rem;
}

/* ================================
   FORMS / NAME BOX
==================================*/
.dock-scroll__summary .dock-scroll__title {
  align-items: center;
  background: transparent;
  -webkit-background-clip: initial;
  background-clip: initial;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  box-sizing: border-box;
  color: #18110b;
  display: flex;
  display: inline-flex;
  font-family: var(--dock-scroll-title-font);
  font-size: 1.18rem;
  font-weight: 600;
  gap: 0.45rem;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1.05;
  margin: 0;
  min-height: 2.2rem;
  padding: 0.5rem 1rem;
  position: relative;
  text-transform: none;
  visibility: visible;
  white-space: nowrap;
}

/* ================================
   WHEEL
==================================*/
.wheelWrap {
  aspect-ratio: 1/1;
  contain: size none;
  isolation: isolate;
  margin-top: 0 !important;
  max-width: 560px; /* a sane desktop cap */
  overflow: visible;
  place-self: center;
  align-self: start;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
  position: relative;
  --callout-anchor-top: clamp(68px, 17vh, 180px);
  transition:
    filter 0.2s ease,
    transform 0.35s ease;
  width: auto;
  z-index: 0;
}
.wheelWrap::before {
  background:
    radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0) 62%
    ),
    conic-gradient(
      from 90deg,
      rgba(255, 183, 3, 0.35),
      rgba(0, 212, 255, 0.32),
      rgba(248, 113, 113, 0.32),
      rgba(255, 183, 3, 0.35)
    );
  border-radius: 50%;
  content: "";
  filter: blur(0.4px);
  inset: -5%;
  opacity: 0.28;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.wheelWrap:hover {
  filter: brightness(1.02);
  transform: translateY(-2px);
}
.wheelWrap:hover::before {
  opacity: 0.38;
}
.double-spin-callout {
  align-items: center;
  background: linear-gradient(135deg, rgba(10, 16, 24, 0.92), rgba(26, 19, 10, 0.78));
  border: 1px solid rgba(255, 197, 92, 0.58);
  border-radius: 20px;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.38),
    inset 0 0 0 rgba(255, 196, 105, 0.18);
  box-sizing: border-box;
  color: #fff8e8;
  display: flex;
  gap: clamp(0.55rem, 1.8vw, 0.85rem);
  left: 50%;
  max-width: min(88vw, 420px);
  padding: clamp(0.75rem, 2.4vw, 1.05rem) clamp(1rem, 2.8vw, 1.4rem);
  pointer-events: none;
  position: absolute;
  text-align: left;
  top: var(--callout-anchor-top, 16%);
  transform: translate(-50%, calc(var(--callout-offset, 0px))) scale(0.92);
  transform-origin: 50% 0;
  opacity: 0;
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 220ms ease,
    box-shadow 220ms ease;
  z-index: 6;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: clamp(0.98rem, 2.4vw, 1.18rem);
  letter-spacing: 0.02em;
  line-height: 1.22;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  isolation: isolate;
  overflow: hidden;
}
.double-spin-callout::before {
  content: "";
  inset: 0;
  border-radius: inherit;
  position: absolute;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    linear-gradient(320deg, rgba(255, 214, 132, 0.08), rgba(255, 167, 95, 0.04));
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: screen;
}
.double-spin-callout.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(var(--callout-offset, 0px))) scale(1);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 24px rgba(255, 196, 105, 0.2);
}
.double-spin-callout__icon {
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  filter: drop-shadow(0 6px 14px rgba(255, 198, 92, 0.4));
  flex-shrink: 0;
}
.double-spin-callout__copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.double-spin-callout__title {
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.double-spin-callout__detail {
  font-family: 'Cinzel', 'IM Fell English', serif;
  font-size: clamp(0.8rem, 2.1vw, 0.96rem);
  opacity: 0.92;
  white-space: normal;
  word-break: break-word;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.double-spin-callout[data-has-detail="false"] .double-spin-callout__detail {
  display: none;
}
.double-spin-callout--legendary {
  background: linear-gradient(135deg, rgba(26, 12, 42, 0.92), rgba(12, 6, 26, 0.82));
  border-color: rgba(186, 148, 255, 0.78);
  box-shadow:
    0 20px 46px rgba(70, 32, 128, 0.55),
    inset 0 0 36px rgba(182, 148, 255, 0.28);
}
.double-spin-callout--legendary::before {
  background:
    linear-gradient(130deg, rgba(182, 148, 255, 0.32), rgba(60, 28, 100, 0.06)),
    linear-gradient(325deg, rgba(226, 196, 255, 0.22), rgba(18, 10, 40, 0.08));
}
.double-spin-callout--legendary .double-spin-callout__icon {
  filter: drop-shadow(0 6px 16px rgba(182, 148, 255, 0.65));
}
.double-spin-callout--rare {
  background: linear-gradient(135deg, rgba(6, 28, 34, 0.92), rgba(4, 18, 25, 0.82));
  border-color: rgba(126, 226, 255, 0.78);
  box-shadow:
    0 20px 44px rgba(12, 88, 132, 0.52),
    inset 0 0 36px rgba(126, 226, 255, 0.26);
}
.double-spin-callout--rare::before {
  background:
    linear-gradient(130deg, rgba(126, 226, 255, 0.28), rgba(34, 128, 162, 0.06)),
    linear-gradient(325deg, rgba(170, 244, 255, 0.18), rgba(8, 42, 58, 0.08));
}
.double-spin-callout--rare .double-spin-callout__icon {
  filter: drop-shadow(0 6px 16px rgba(126, 226, 255, 0.54));
}
@media (max-width: 1024px) {
  .wheelWrap {
    --callout-anchor-top: clamp(56px, 18vh, 168px);
  }
  .double-spin-callout {
    max-width: min(92vw, 400px);
  }
}
@media (max-width: 720px) {
  .wheelWrap {
    --callout-anchor-top: clamp(44px, 22vh, 160px);
  }
  .double-spin-callout {
    font-size: 0.95rem;
    gap: 0.52rem;
    padding: clamp(0.68rem, 2.6vw, 0.95rem) clamp(0.9rem, 3vw, 1.15rem);
  }
}
@media (max-width: 560px) {
  .wheelWrap {
    --callout-anchor-top: clamp(36px, 26vh, 148px);
  }
  .double-spin-callout {
    width: min(92vw, 360px);
  }
}
@media (max-width: 480px) {
  .double-spin-callout {
    font-size: 0.9rem;
    flex-direction: column;
    text-align: center;
    gap: 0.42rem;
  }
  .double-spin-callout__icon {
    font-size: 1.6rem;
  }
  .double-spin-callout__copy {
    align-items: center;
  }
}
@media (min-width: 1900px) {
  .wheelWrap {
    max-width: clamp(320px, 34vw, 440px);
    max-width: clamp(340px, 28vw, 480px);
  }
  .stageBody {
    grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.28fr);
  }
}
.ryoFloatLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 130;
  font-family: inherit;
}

.ryoFloat {
  position: absolute;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #f6e07b;
  text-shadow: 0 1px 4px rgba(6, 6, 8, 0.55);
  opacity: 0;
  transform: translate(-50%, 18px) scale(0.9);
  white-space: nowrap;
  pointer-events: none;
}

.ryoFloat.is-active {
  animation: ryoFloatRise 1.2s ease-out forwards;
}

.ryoFloat[data-tier='uncommon'] {
  color: #8ff0a4;
}

.ryoFloat[data-tier='rare'] {
  color: #7dd2ff;
}

.ryoFloat[data-tier='epic'] {
  color: #d1a7ff;
}

.ryoFloat[data-tier='legendary'] {
  color: #ffcf73;
}

.ryoFloat[data-tier='mythic'] {
  color: #ff93d8;
}

.ryoFloat[data-tier='ex'] {
  color: #ffe7ff;
}

@keyframes ryoFloatRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(0.95);
  }
}
canvas#wheel {
  background:
    radial-gradient(
      48% 38% at 50% 24%,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0) 65%
    ),
    radial-gradient(
      75% 78% at 50% 68%,
      rgba(16, 28, 43, 0.85),
      rgba(8, 14, 22, 0.95)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(10, 16, 24, 0.85));
  background:
    radial-gradient(
      60% 60% at 50% 50%,
      rgba(255, 255, 255, 0.05),
      rgba(0, 0, 0, 0.12)
    ),
    conic-gradient(
      from 0.25turn,
      rgba(255, 95, 0, 0.1),
      rgba(0, 200, 255, 0.1),
      rgba(255, 95, 0, 0.1)
    );
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  box-shadow:
    inset 0 24px 36px rgba(255, 255, 255, 0.08),
    inset 0 -34px 48px rgba(0, 0, 0, 0.58),
    0 26px 42px rgba(3, 8, 16, 0.55);
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  /* iOS optimization */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition:
    filter 0.25s ease,
    box-shadow 0.35s ease;
  width: 100%;
  will-change: transform, filter;
}
.wheelWrap:hover canvas#wheel {
  box-shadow:
    inset 0 26px 40px rgba(255, 255, 255, 0.12),
    inset 0 -36px 52px rgba(0, 0, 0, 0.6),
    0 34px 54px rgba(3, 8, 16, 0.6);
  filter: brightness(1.04) saturate(1.05);
}
.pointer {
  display: grid;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  height: clamp(52px, 6.8vw, 82px);
  left: 50%;
  place-items: center;
  pointer-events: none;
  position: absolute;
  top: clamp(4px, 1vmin, 12px);
  transform: translate(-50%, -30%);
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
  width: clamp(38px, 5.5vw, 58px);
  z-index: 3;
}

/* Sculpted pointer arrow with glassy bevel */
.pointer::before {
  background: linear-gradient(180deg, #fff2c0, #ffc84e 45%, #f4941c);
  border-radius: 14px;
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.38),
    0 14px 20px rgba(0, 0, 0, 0.32);
  clip-path: polygon(50% 100%, 12% 30%, 50% 10%, 88% 30%);
  content: "";
  height: 76%;
  width: 68%;
}
.pointer::after {
  display: none;
}
.wheelWrap:hover .pointer {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  transform: translate(-50%, -30%) scale(1.01);
}
@media (max-width: 1900px) {
  .pointer {
    height: clamp(48px, 20vw, 66px);
    transform: translate(-50%, -20%);
    width: clamp(34px, 15vw, 48px);
  }
  .wheelWrap:hover .pointer {
    transform: translate(-50%, -26%) scale(1.005);
  }
}
@supports not (clip-path: polygon(50% 100%, 10% 26%, 50% 8%, 90% 26%)) {
  .pointer {
    border-bottom: 26px solid var(--accent);
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    top: clamp(4px, 1.2vmin, 10px);
    transform: translateX(-50%);
    width: 0;
  }
  .pointer::after,
  .pointer::before {
    display: none;
  }
}
.hub {
  pointer-events: none;
}
.hub,
.hub .dot {
  inset: 0;
  position: absolute;
}
.hub .dot {
  aspect-ratio: 1/1;
  background: radial-gradient(
    circle at 38% 32%,
    #fff2bc 0%,
    #ffd364 36%,
    #dd8d09 68%,
    #8a4a00 100%
  );
  background: radial-gradient(
    circle at 35% 35%,
    #fff4c7,
    #ffd064 35%,
    #d08a00 70%
  );
  border: 3px solid rgba(13, 18, 26, 0.55);
  border: 4px solid rgba(0, 0, 0, 0.38);
  border-radius: 50%;
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.35),
    inset 0 -14px 24px rgba(0, 0, 0, 0.55),
    0 16px 28px rgba(0, 0, 0, 0.38);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.45),
    0 10px 34px rgba(0, 0, 0, 0.45);
  margin: auto;
  overflow: hidden;
  width: clamp(54px, 12%, 78px);
}
.hub .dot::before {
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.1) 70%
  );
  inset: 16% 18% 28% 18%;
  opacity: 0.95;
}
.hub .dot::after,
.hub .dot::before {
  border-radius: 50%;
  content: "";
  position: absolute;
}
.hub .dot::after {
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 22px rgba(255, 183, 3, 0.35);
  inset: -18%;
  opacity: 0.4;
}

/* ================================
   INFO / STATS
==================================*/
.sectionTitle {
  align-items: flex-start; /* Aligns content to the top */
  color: #ffd98a;
  display: flex;
  justify-content: center;
  letter-spacing: 0.2px;
  opacity: 0.9;
}
.statsHeader {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 5px !important;
}
.progress {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  flex: 1;
  height: 10px;
  overflow: hidden;
}
.progress .bar {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
  height: 100%;
  width: 0%;
}

/* Badge component (used in total level counter) */
.badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #c8d5f0;
  padding: 0.25rem 0.5rem;
}
.infoBody {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  height: 96%;
  min-height: 0;
}
.infoBody-main,
.infoBody-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  min-width: 0;
}
.infoBody-side > #rsPanel {
  flex: 1 1 auto;
  min-height: 0;
}
.infoBody-side > #rsPanel:not(.is-collapsed):not([data-collapsed="true"]) {
  height: var(--statsH);
  max-height: var(--statsH);
}
.infoBody-chat {
  gap: 16px;
  grid-column: 1 / -1;
  min-width: 0;
}
.global-chat-dock,
.infoBody-chat {
  display: flex;
  flex-direction: column;
}
.global-chat-dock {
  gap: 12px;
  min-height: 0;
}
.global-chat-dock > * {
  min-height: 0;
}
.global-chat-dock .adv-pane--chat {
  flex: 1 1 auto;
  max-height: min(65vh, 620px);
  position: sticky;
  top: 12px;
}

/* Embedded adventure/chat overrides tuned for the main spinner layout */
.adv-panel {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}
.app .adv-panel {
  height: 100%;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.app .adv-panel::-webkit-scrollbar {
  width: 8px;
}
.app .adv-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.app .adv-panel::-webkit-scrollbar-track {
  background: transparent;
}
.adv-embed {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.adv-embed.adv-body {
  min-height: 0;
  height: auto;
  width: 100%;
}
.adv-embed .adv-shell {
  box-sizing: border-box;
  gap: 18px;
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 0;
  width: 100%;
}
.adv-embed .adv-menu-header {
  margin: 0 0 12px;
  padding: 0 4px;
}
.adv-embed .adv-menu-grid,
.adv-embed .adv-menu-panel,
.adv-embed .adv-menu-panel header,
.adv-embed .adv-menu-panels {
  gap: 10px;
  min-width: 0;
}
.adv-embed .adv-pane {
  gap: 10px;
  padding: 12px;
}
.adv-embed .adv-pane--chat {
  flex: 0 0 clamp(240px, 48vh, 320px);
  gap: 12px;
  height: clamp(240px, 48vh, 320px);
  max-height: clamp(240px, 48vh, 320px);
  overflow: hidden;
  padding: 12px;
}
.adv-embed .adv-chat-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adv-embed .adv-chat-main {
  order: 1;
}
.adv-embed .adv-chat-sidebar {
  max-height: clamp(180px, 40vh, 260px);
  order: 2;
  overflow: auto;
  padding: 10px;
}
.adv-embed .adv-chat-feed {
  flex: 0 0 clamp(140px, 36vh, 240px);
  height: clamp(140px, 36vh, 240px);
  overflow-y: auto;
}
.adv-embed .adv-chat-top {
  padding-bottom: 4px;
}
.adv-embed .adv-chat-compose {
  padding-top: 4px;
}
.adv-embed .adv-chat-room-list {
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
}
.adv-embed .adv-chat-room {
  min-width: 120px;
}
.adv-embed .adv-chat-friends {
  max-height: clamp(120px, 35vh, 200px);
}
@media (max-width: 1900px) {
  .adv-embed .adv-shell {
    gap: 16px;
  }
  .adv-embed .adv-pane {
    padding: 10px;
  }
  .adv-embed .adv-pane--chat {
    max-height: clamp(260px, 60vh, 360px);
  }
  .adv-embed .adv-chat-feed {
    max-height: clamp(200px, 65vh, 340px);
    min-height: clamp(150px, 45vh, 280px);
  }
}

/* ================================
   STATS SECTION
==================================*/

/* Main attributes grid */
#statsGrid {
  align-content: start;
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: var(--statsH);
  max-height: var(--statsH);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overscroll-behavior: contain; /* Smooth scrolling for better UX */
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* Custom scrollbar styling */
#statsGrid::-webkit-scrollbar {
  width: 8px;
}
#statsGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
#statsGrid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px;
}

/* Stats panel container */
.rs {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  gap: 4px;
  grid-template-rows: auto auto 1fr;
  min-height: 0;

  /* Scrolling */
  overflow: auto;
  padding: 12px;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.035),
        rgba(255, 255, 255, 0.02)
      )
      padding-box,
    linear-gradient(180deg, rgba(0, 200, 255, 0.1), rgba(255, 95, 0, 0.1))
      border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Character Stats title with subtle glow */
#statsTitle {
  letter-spacing: 0.3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* ================================
   TOTAL LEVEL COUNTER
==================================*/
#totalBadge {
  display: flex;
  font-size: 500px;
  gap: 12px;
  justify-content: flex-start;
  max-width: 100%;
}
#totalBadge,
.totalToggle {
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}
.totalToggle {
  background: none;
  border: 0;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  margin: 0;
  touch-action: manipulation;
}
.totalToggle:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
#totalLevelCount {
  --counter-hue: var(--level-hue, 210);
  --counter-sat: calc(0.58 + var(--level-glow, 0) * 0.32);
  --counter-light: calc(0.46 + var(--level-glow, 0) * 0.28);
  --badge-radius: 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background:
    linear-gradient(135deg, rgba(9, 14, 23, 0.92), rgba(18, 28, 45, 0.78)),
    radial-gradient(
      120% 140% at 14% 120%,
      rgba(255, 255, 255, 0.18),
      transparent 45%
    );
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--badge-radius);
  box-shadow:
    0 18px 34px rgba(3, 11, 22, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  clip-path: inset(0 round var(--badge-radius));
  color: hsl(var(--counter-hue) 82% var(--counter-light));
  display: inline-flex;
  flex-direction: column;
  font-size: 2rem;
  gap: 6px;
  isolation: isolate;
  justify-content: center;
  letter-spacing: 0.01em;
  margin-inline: auto;
  margin-bottom: 12px;
  max-width: clamp(220px, 26vw, 280px);
  min-width: clamp(168px, 18vw, 238px);
  overflow: hidden;
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease,
    color 0.35s ease;
  transition:
    background 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 120ms ease;
  width: 100%;
  --levelIntensity: 0; /* 0..1, driven by JS */
  font-variant-numeric: tabular-nums;
  --number-change: 0;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}
#totalLevelCount:hover {
  box-shadow: 0 22px 38px rgba(4, 12, 26, 0.5);
  filter: brightness(1.04);
  transform: translateY(-2px);
}
#totalLevelCount:active {
  box-shadow: 0 16px 28px rgba(4, 12, 26, 0.42);
  filter: brightness(0.98);
  transform: translateY(0);
}
#totalLevelCount .tl-label {
  color: rgba(220, 233, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#totalLevelCount .tl-value {
  align-items: baseline;
  color: inherit;
  display: inline-flex;
  font-size: clamp(1.9rem, 1.35rem + 1.6vw, 2.7rem);
  font-weight: 700;
  gap: 0.45rem;
  line-height: 1;
}
#totalLevelCount .tl-value::before {
  content: "Lv";
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.24em;
  opacity: 0.6;
  text-transform: uppercase;
}
#totalLevelCount .tl-delta {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 16px;
  transform: translateY(6px);
  transition:
    opacity 0.26s ease,
    transform 0.26s ease,
    color 0.26s ease;
}
#totalLevelCount[data-delta] .tl-delta {
  opacity: 1;
  transform: translateY(0);
}
#totalLevelCount[data-delta^="+"] .tl-delta {
  color: hsl(var(--level-hue, 195) 90% 72%);
}
#totalLevelCount[data-delta^="-"] .tl-delta {
  color: #ff8d8d;
}
#totalLevelCount[data-delta^="+"] .tl-delta::before,
#totalLevelCount[data-delta^="-"] .tl-delta::before {
  font-size: 0.82em;
  margin-right: 4px;
  opacity: 0.75;
}
#totalLevelCount[data-delta^="+"] .tl-delta::before {
  content: "▲";
}
#totalLevelCount[data-delta^="-"] .tl-delta::before {
  content: "▼";
}
#totalLevelCount .tl-glow {
  background:
    radial-gradient(
      circle at 25% 25%,
      hsla(var(--level-hue, 195) 85% 70%/0.45),
      transparent 58%
    ),
    radial-gradient(
      circle at 70% 80%,
      hsla(var(--level-hue, 195) 70% 60%/0.3),
      transparent 60%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.18),
      transparent 65%
    );
  filter: blur(26px);
  inset: -40% -50%;
  opacity: 0.22;
  pointer-events: none;
  position: absolute;
  transform: scale(0.82);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    filter 0.4s ease;
  z-index: -1;
}
#totalLevelCount.down {
  box-shadow:
    0 18px 32px rgba(38, 8, 8, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffcdc7;
}
#totalLevelCount.down .tl-glow {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 124, 124, 0.55),
      transparent 65%
    ),
    radial-gradient(circle at 65% 80%, rgba(255, 90, 90, 0.35), transparent 60%);
  opacity: 0.28;
}
#totalLevelCount.down.levelGlow {
  color: #ffcdc7;
  filter: brightness(1.02) saturate(1.05);
}
#totalLevelCount.down.levelGlow .tl-glow {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 124, 124, 0.55),
      transparent 65%
    ),
    radial-gradient(circle at 65% 80%, rgba(255, 90, 90, 0.35), transparent 60%);
}
@media (max-width: 1900px) {
  #totalLevelCount {
    gap: 4px;
    max-width: clamp(200px, 40vw, 240px);
    min-width: clamp(150px, 32vw, 210px);
    --badge-radius: 16px;
    align-items: center;
    border-radius: var(--badge-radius);
    font-size: 1.1rem;
    font-size: clamp(1.4rem, 1rem + 1vw, 2.2rem);
    margin-inline: auto;
    max-width: clamp(200px, 32vw, 240px);
    min-width: clamp(150px, 28vw, 220px);
    min-width: 0;
    text-align: center;
    width: 100%;
  }
  #totalLevelCount .tl-label {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }
  #totalLevelCount .tl-value {
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem);
    font-size: clamp(1rem, 1rem + 1vw, 1.25rem);
  }
  #totalLevelCount .tl-delta {
    right: 14px;
    right: 15%;
    top: 14px;
    transform: translate(50%, 6px);
  }
  #totalBadge {
    font-size: 65px;
    height: 100%;
    justify-content: center;
    max-height: 100%;
    max-height: none;
    padding: 6px 10px;
    padding: 0;
    width: 100%;
  }
  .infoBody-side > #rsPanel:not(.is-collapsed):not([data-collapsed="true"]) {
    height: auto;
    max-height: none;
  }
  .infoBody-side
    > #rsPanel:not(.is-collapsed):not([data-collapsed="true"])
    .rsList {
    max-height: none;
    overflow: visible;
  }
}
@media (min-width: 1900px) {
  .infoBody-side > #rsPanel:not(.is-collapsed):not([data-collapsed="true"]) {
    height: auto !important;
    max-height: none !important;
  }
  .infoBody-side
    > #rsPanel:not(.is-collapsed):not([data-collapsed="true"])
    .rsList {
    max-height: none !important;
    overflow: visible !important;
  }
}
@media (max-width: 1900px) {
  #totalLevelCount[data-delta] .tl-delta {
    transform: translate(50%, 0);
  }
}

/* ================================
   STATS RESPONSIVE BREAKPOINTS
==================================*/

/* Tablet Landscape & Compact Viewports */
@media (max-height: 100px) {
  /* Stats grid adjustments */
  #statsGrid {
    height: 14vmax;
    width: 100%;
  }

  /* Row stat compacting */
  .rowStat {
    max-height: 25px;
  }
  .rowStat,
  .rowStat .name .icon {
    font-size: 11px;
  }

  /* Total level counter tablet sizing */
  .totalLevel .badge {
    border: 1px solid rgba(255, 255, 255, 0.12);
    height: 50%;
    width: 100%;
  }
  #totalBadge {
    font-size: 65px;
    height: 65px;
  }
}

/* Desktop-to-tablet breakpoint: stack layout only on narrow viewports */
@media (max-width: 1900px) {
  /* Keep smaller wheel size that you liked */
  .wheelWrap {
    align-self: center;
    aspect-ratio: 1;
    justify-self: center;
    max-height: 30vh;
    max-width: 30vh;
    transform: none;
    width: 100%;
  }

  /* Restore original mobile app structure */

  /* Mobile stats - use CSS Grid for precise 5-column layout */
  #rsStats {
    align-items: start !important;
    display: grid !important;
    gap: 6px !important;
    gap: 4px !important;
    grid-auto-flow: row dense !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-items: center !important;
    padding: 8px !important;
    padding: 6px !important;
  }

  /* Completely remove stat details from layout flow */
  #rsStats .rowStatDetails {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
  }

  /* Ensure rowStat elements fit grid cells properly */
  #rsStats .rowStat {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    grid-column: span 1 !important;
    max-width: 100% !important;
    min-height: 35px;
    padding: 2px 1px;
    position: relative !important;
    text-align: center;
    width: 100% !important;
    z-index: 1 !important;
  }

  /* Restore original stage body */

  /* Compact mobile controls */
  #rsStats .rowStat,
  .controlsRow {
    align-items: center;
    justify-content: center;
  }
  .controlsRow {
    align-content: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    gap: 8px;
    height: auto;
    max-width: 100%;
    min-height: 42px;
    min-height: 48px;
    overflow-x: hidden;
    overflow-x: auto; /* was hidden */
  overflow-y: visible;
    padding: 6px 4px;
    width: 100%;
    z-index: 8;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(
        0deg,
        rgba(11, 15, 20, 0.96),
        rgba(11, 15, 20, 0.85) 60%,
        rgba(11, 15, 20, 0)
      ),
      linear-gradient(90deg, rgba(255, 95, 0, 0.12), rgba(0, 200, 255, 0.12));
    flex-wrap: wrap;
    position: relative;
    scrollbar-width: none;
    z-index: 12;
  }
  .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }

  /* Mobile info layout - stack main + sidebar */
  .infoBody {
    align-items: start;
    display: flex;
    display: grid;
    flex-direction: column;
    gap: 8px;
    gap: 4px;
    grid-template-columns: 1fr; /* stack info grids */
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    height: 100%;
    justify-items: stretch;
    min-height: 0;
  }
  .infoBody-main,
  .infoBody-side {
    gap: 12px;
  }
  .global-chat-dock .adv-pane--chat {
    max-height: none;
    position: static;
  }

  /* Compact mobile total level */
  .badge {
    margin-bottom: 1px;
  }

  /* Ultra-compact stats list for mobile */
  .rsList {
    height: auto;
    max-height: none;
  }

  /* Restore stats panel positioning */
  #rsPanel {
    background: var(--bg, #0c111a);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    flex-shrink: 0;
    height: auto !important;
    height: 180px;
    margin-bottom: 4px;
    max-height: none !important;
    padding-bottom: 2px;
    padding-top: 2px;
    padding: 6px 4px;
    position: static;
    position: relative;
    position: sticky;
    top: auto;
    top: 0;
    z-index: auto;
    z-index: 3;
  }

  /* Mobile rowStat optimized for 5-column grid */

  /* Explicit positioning for first 5 stats (top row) */
  #rsStats .rowStat:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  #rsStats .rowStat:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }
  #rsStats .rowStat:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
  }
  #rsStats .rowStat:nth-of-type(4) {
    grid-column: 4;
    grid-row: 1;
  }
  #rsStats .rowStat:nth-of-type(5) {
    grid-column: 5;
    grid-row: 1;
  }

  /* Explicit positioning for next 5 stats (bottom row) */
  #rsStats .rowStat:nth-of-type(6) {
    grid-column: 1;
    grid-row: 2;
  }
  #rsStats .rowStat:nth-of-type(7) {
    grid-column: 2;
    grid-row: 2;
  }
  #rsStats .rowStat:nth-of-type(8) {
    grid-column: 3;
    grid-row: 2;
  }
  #rsStats .rowStat:nth-of-type(9) {
    grid-column: 4;
    grid-row: 2;
  }
  #rsStats .rowStat:nth-of-type(10) {
    grid-column: 5;
    grid-row: 2;
  }

  /* Hide unnecessary mobile elements */

  /* Show only icon, hide stat names on mobile */
  #rsStats .rowStat .barWrap,
  #rsStats .rowStat .deltaBadge,
  #rsStats .rowStat .name span:not(.icon),
  #rsStats .rowStatDetails {
    display: none !important;
  }

  /* Mobile stat icons */
  #rsStats .rowStat .name .icon {
    font-size: 0.9rem;
    font-size: 11px;
    font-size: 1.05rem;
    line-height: 1;
  }

  /* Mobile stat values */
  #rsStats .rowStat .valWrap .val {
    font-size: 0.7rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  /* Make section titles more compact */
  .sectionTitle {
    font-size: 0.8rem;
    line-height: 1.2;
    margin: 0;
    padding: 2px 0;
  }

  /* Mobile attributes grid - very compact to preserve stats visibility */
  #statsGrid {
    column-gap: 8px;
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 14vmax;
    max-height: 20vh;
    max-width: 100%;
    overflow-y: auto;
    padding: 2px;
    row-gap: 4px;
    row-gap: 6px;
    gap: 8px;
    width: 100%;
  }

  /* Compact attributes section title */
  #statsGrid .sectionTitle {
    font-size: 0.9rem;
    margin-bottom: 4px;
    padding: 4px 0;
  }
  #attrTitle {
    font-size: 0.85rem;
  }

  /* Compact but readable mobile attribute cards */
  .attrCard {
    align-content: start;
    display: grid;
    grid-template-rows: auto 1fr;
    height: var(--cardH);
    height: auto !important;
    max-height: 120px !important;
    max-height: 200px;
    min-height: 90px !important;
    min-height: 180px;
    min-height: 140px;
    overflow: hidden !important;
    padding: 8px !important;
    word-wrap: break-word !important; /* Ensure text breaks properly */
  }
  .attrCard .cardHead {
    margin-bottom: 4px;
  }
  .attrCard .k {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  .attrCard .pill {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.2rem 0.35rem;
  }
  .attrCard .meta {
    box-sizing: border-box !important;
    gap: 4px;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .attrCard .impactChip {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
}
#rsPanel.is-collapsed .totalToggle,

  .attrCard.is-pinned {
    border-color: rgba(249, 115, 22, 0.35);
  }

  .attrCard__pinBadge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(249, 115, 22, 0.16);
    color: #fbbf24;
  }
#rsPanel[data-collapsed="true"] .totalToggle {
  opacity: 0.85;
}
.rsList {
  display: grid;
  gap: 0.2px;
  grid-auto-rows: minmax(32px, auto);
  max-height: calc(var(--statsH) - 84px);
  min-height: 0;
  overflow: auto;
}
#rsPanel[data-collapsed="true"] .rsList {
  display: none !important;
  visibility: hidden;
}
#rsPanel.is-expanded .rsList {
  display: grid;
  visibility: visible;
}
#rsPanel {
  --rs-collapsed-height: clamp(112px, 22vh, 156px);
  transition:
    max-height 0.25s ease,
    padding-bottom 0.2s ease;
}
#rsPanel.is-collapsed,
#rsPanel.is-expanded,
#rsPanel[data-collapsed="true"] {
  height: auto !important;
}
#rsPanel.is-expanded {
  max-height: clamp(260px, 42vh, 360px);
}
#rsPanel.is-collapsed,
#rsPanel[data-collapsed="true"] {
  grid-template-rows: auto auto;
  max-height: var(--rs-collapsed-height);
  min-height: 0;
  overflow: hidden;
  padding-bottom: 4px;
}
#rsPanel:not(.is-collapsed):not([data-collapsed="true"]) {
  height: var(--statsH);
  max-height: var(--statsH);
}
#rsPanel:not(.is-collapsed):not([data-collapsed="true"]) .rsList {
  max-height: none;
}
@media (max-width: 1900px) {
  :root {
    --rs-panel-mobile-height: clamp(180px, 20vh, 240px);
  }
  #rsPanel:not(.is-collapsed):not([data-collapsed="true"]) {
    height: var(--rs-panel-mobile-height) !important;
    max-height: var(--rs-panel-mobile-height) !important;
  }
  #rsPanel:not(.is-collapsed):not([data-collapsed="true"]) .rsList {
    max-height: calc(var(--rs-panel-mobile-height) - 84px) !important;
  }
}
@media (min-width: 720px) and (max-width: 1900px) {
  .spinCol {
    width: 80% !important;
  }
  #rsPanel,
  .controlsRow {
    width: 100% !important;
  }
}
@media (max-width: 720px) {
  #rsPanel,
  .controlsRow,
  .spinCol {
    width: 100% !important;
  }
}

/* Individual stat row */
.rowStat {
  background: transparent;
  display: grid;
  grid-template-columns: 126px 1fr 50px;
}
.rowStat,
.rowStat .name {
  align-items: center;
  gap: 8px;
}
.rowStat .name {
  color: #dbe6ff;
  display: flex;
  font-size: 0.79rem;
  /* Allow icon to render without being vertically clipped */
  overflow: visible;
}

/* Keep label truncation without affecting the emoji icon */
.rowStat .name span:not(.icon) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Emoji/stat icon rendering tweaks to prevent clipping */
.rowStat .name .icon {
  align-items: center;
  display: inline-flex;
  font-family:
    system-ui,
    Segoe UI Emoji,
    Apple Color Emoji,
    Noto Color Emoji,
    sans-serif;
  justify-content: center;
  line-height: 1;
}
.rowStat .valWrap {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Expandable stat details */
.rowStatDetails {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  display: none;
  grid-column: 1 / -1;
  margin-top: -2px;
  padding: 6px 8px;
}
.rowStat.expanded + .rowStatDetails {
  display: block;
}

/* Stats components */
.icon {
  display: inline-grid;
  font-size: 0.98rem;
  height: 18px;
  place-items: center;
  width: 18px;
}
.barWrap {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  position: relative;
}
.bar {
  background: #3aaed0;
  background: linear-gradient(90deg, var(--n-orange), var(--n-blue));
  height: 100%;
  transition:
    width 0.35s ease,
    background-color 0.25s ease,
    filter 0.25s ease;
  width: 0%;
  will-change: width;
}

/* Animated stripes on gains */
.rowStat.gain .bar {
  animation: barStripes 1.2s linear infinite;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.18) 0 6px,
      transparent 6px 12px
    ),
    var(--gain-grad, linear-gradient(90deg, #26d07c, #18a999));
}

/* Dim and reddish tone on loss */
.rowStat.loss .bar {
  background-image: linear-gradient(90deg, #d44545, #b13737);
  filter: saturate(0.85) brightness(0.9);
}
@keyframes barStripes {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      24px 0,
      0 0;
  }
}

/* Baseline marker for base stat */
.barMark {
  background: rgba(255, 255, 255, 0.35);
  bottom: -2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  margin-left: -1px;
  pointer-events: none;
  position: absolute;
  top: -2px;
  width: 2px;
  z-index: 2; /* ensure it renders above the bar fill */
}
.val {
  font-size: 0.94rem;
}

/* Delta badge styling */
.deltaBadge,
.val {
  text-align: right;
}
.deltaBadge {
  color: #cdd9ef;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  opacity: 0.9;
}
.rowStat.gain .deltaBadge {
  color: #7ff5c9;
}
.rowStat.loss .deltaBadge {
  color: #ff9898;
}
.summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 10px;
}
.tag {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: flex;
  font-size: 0.86rem;
  gap: 6px;
  padding: 0.28rem 0.55rem;
}
.summary .tag {
  max-height: 25%;
}

/* Inline/roll headings */
.inlineTitle {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 8px !important;
  gap: 6px;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  padding: 6px 2px;
  width: 100%; /* ensures centering works as expected */
}
.inlineRollNow > *,
.inlineTitle,
.inlineTitle > * {
  min-width: 0;
}
.inlineRollNow .rollTitle,
.inlineTitle .rollTitle {
  flex: 1 1 auto;
  max-width: 100%;
  text-align: center;
}
.inlineTitle .rollTitle {
  background: rgba(255, 255, 255, 0.08);
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, var(--n-gold), var(--n-orange));
  border: 1px solid #f39c12;
  border-radius: 999px;
  box-shadow: none;
  color: transparent;
}
@media (max-width: 1900px) {
  .inlineRollNow .rollTitle,
  .inlineTitle .rollTitle {
    max-width: calc(100vw - 32px);
  }
}
.rollTitle {
  box-sizing: border-box;
  color: #f39c12;
  /* Prevent long text from reflowing layout */
  flex: 0 1 auto;
  font-size: 18px;
  letter-spacing: 0.2px;
  letter-spacing: 0.1rem;
}
#rollNow,
.rollTitle {
  background: none;
  border: none;
  max-width: 100%;
  overflow: hidden;
  padding: 0.26rem 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rollNow {
  align-items: center;
  /* Prevent long text from reflowing layout */
  box-shadow: none;
  display: flex;
  display: inline-flex;
  justify-content: center;
  letter-spacing: 0.2px;
  min-width: 6ch;
  text-align: center;
}

/* Impact/Chips */
.impact {
  color: #a7b5d4;
  flex: 1 1 100%;
  font-size: 0.76rem;
  opacity: 0.9;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}
.impactChip {
  background: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  border-radius: 9px;
  box-sizing: border-box;
  flex-shrink: 1;
  font-size: 0.82rem;
  font-size: 0.65rem;
  max-width: 100%;
  min-width: 0; /* Allow shrinking below natural size */
  padding: 0.18rem 0.44rem;
  padding: 0.16rem 0.38rem;
}
.impactChip.neg {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.28);
  filter: saturate(0.95);
  opacity: 0.9;
}

/* ================================
   CARDS & RARITY
==================================*/
.grid {
  --fitScale: 1;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-sizing: border-box;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  max-width: 100%;
  min-width: 0; /* Important for grid containment */
  padding: 10px;
  transform: scale(var(--fitScale));
  transform-origin: top center;
  width: 100%;
}

/* Base Card Class */
.card,
.grid {
  display: grid;
  position: relative;
}
.card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  background: rgba(10, 12, 18, 0.35);
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.28),
    inset -1px -1px 0 rgba(0, 0, 0, 0.4); /* bottom/right shadow */
  contain: layout style;
  gap: 6px;
  grid-template-rows: auto auto;
  isolation: isolate;
  max-height: none;
  min-height: 240px;
  overflow: hidden;
  padding: 8px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Attribute Card Specialization 
   Additional styling for .card.attrCard is defined in the 
   "Attribute Card Specializations" section below */
.card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.card.popEpic {
  animation: popIn 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.card[data-rarity] .chip {
  border-color: currentColor;
  border-color: var(--chip-border) !important;
  z-index: 898989 !important;
}

/* Base rarity styling using CSS custom properties */
.card[data-rarity="common"] {
  background: linear-gradient(
    180deg,
    var(--rarity-common-bg),
    calc(var(--rarity-common-bg) / 2)
  );
  border-color: var(--rarity-common);
  outline: 1px solid var(--rarity-common-outline);
}
.card[data-rarity="uncommon"] {
  background: linear-gradient(
    180deg,
    var(--rarity-uncommon-bg),
    calc(var(--rarity-uncommon-bg) / 3)
  );
  border-color: var(--rarity-uncommon);
  box-shadow: 0 0 18px var(--rarity-uncommon-glow);
  outline: 1px solid var(--rarity-uncommon-outline);
}
.card[data-rarity="rare"] {
  background: linear-gradient(
    180deg,
    var(--rarity-rare-bg),
    calc(var(--rarity-rare-bg) / 3)
  );
  border-color: var(--rarity-rare);
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 20px var(--rarity-rare-glow);
  outline: 1px solid var(--rarity-rare-outline);
}
.card[data-rarity="epic"] {
  background: linear-gradient(
    180deg,
    var(--rarity-epic-bg),
    calc(var(--rarity-epic-bg) / 3)
  );
  border-color: var(--rarity-epic);
  border-color: rgba(150, 130, 255, 0.6);
  box-shadow: 0 0 22px var(--rarity-epic-glow);
  outline: 1px solid var(--rarity-epic-outline);
}
.card[data-rarity="legendary"] {
  background: linear-gradient(
    180deg,
    var(--rarity-legendary-bg),
    calc(var(--rarity-legendary-bg) / 3)
  );
  border-color: var(--rarity-legendary);
  border-color: rgba(255, 183, 3, 0.65);
  box-shadow: 0 0 24px var(--rarity-legendary-glow);
  outline: 1px solid var(--rarity-legendary-outline);
  position: relative;
}
.card[data-rarity="mythic"] {
  background-blend-mode: overlay, normal;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0) 28%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 26%);
  border-color: rgba(255, 120, 200, 0.65);
  box-shadow: 0 0 28px var(--rarity-mythic-glow);
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.45),
    0 8px 10px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 16px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  isolation: isolate;
  outline: 1px solid var(--rarity-mythic);
  position: relative;
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateZ(0);
  transform: translateZ(8px); /* parallax layer */
  transform-style: preserve-3d;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

/* Rarity labels */
.rarity {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  font-size: 0.72rem;
  padding: 0.22rem 0.48rem;
  position: relative;
  z-index: 0; /* establish stacking context */
}
.rarity.common {
  color: var(--rarity-common-text);
}
.rarity.uncommon {
  color: var(--rarity-uncommon-text);
}
.rarity.rare {
  color: var(--rarity-rare-text);
}
.rarity.epic {
  color: var(--rarity-epic-text);
}
.rarity.legendary {
  animation: shimmerSweep 2.6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9),
    #fbbf24,
    rgba(255, 255, 255, 0.9)
  );
  background-size: 200% 100%;
  color: var(--rarity-legendary-text);
  color: transparent;
}
.rarity.mythic {
  color: var(--rarity-mythic-text);
}
.card[data-rarity="legendary"]::before {
  border: 2px solid rgba(255, 193, 7, 0.4);
  border-radius: 12px;
  content: "";
  inset: -2px;
  pointer-events: none;
  position: absolute;
}
.card[data-rarity="legendary"]::after {
  animation: glowPulse 2.2s ease-in-out infinite;
  border-radius: 16px;
  box-shadow:
    0 0 22px rgba(255, 193, 7, 0.35),
    0 0 46px rgba(255, 193, 7, 0.22);
  content: "";
  inset: -8px;
  opacity: 0.95;
  pointer-events: none;
  position: absolute;
}

/* Mythic FX */
.card[data-rarity="mythic"]::before {
  background:
    linear-gradient(#0000, #0000) padding-box,
    conic-gradient(from 0.25turn, #ff4d4d, #ff8a00, #ffd166, #ff8a00, #ff4d4d)
      border-box;
  background-clip: padding-box, border-box;
  background:
    linear-gradient(#0000, #0000) padding-box,
    conic-gradient(from 0.25turn, #ff4d4d, #ff8a00, #ffd166, #ff8a00, #ff4d4d)
      border-box,
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0) 40%
      )
      border-box,
    linear-gradient(315deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 40%)
      border-box;
  background-blend-mode: normal, normal, screen, multiply;
  background-clip: padding-box, border-box, border-box, border-box;
  border: 2px solid transparent;
  border-radius: 12px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  inset: -2px;
  /* Ensure this ring stays behind content in 2D space */
}
.card[data-rarity="mythic"]::after,
.card[data-rarity="mythic"]::before {
  content: "";
  pointer-events: none;
  position: absolute;
  transform: none;
  z-index: 0;
}
.card[data-rarity="mythic"]::after {
  animation:
    shimmerSweep 2.2s ease-in-out infinite,
    heatRipple 1.6s ease-in-out infinite;
  background:
    radial-gradient(
        60% 60% at 50% 60%,
        rgba(255, 120, 80, 0.25),
        rgba(255, 120, 80, 0) 70%
      )
      no-repeat,
    linear-gradient(
        120deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0) 60%
      )
      no-repeat;
  background-position:
    50%,
    0 0;
  background-size:
    100% 100%,
    220% 100%;
  background:
    radial-gradient(
        60% 60% at 50% 60%,
        rgba(255, 120, 80, 0.25),
        rgba(255, 120, 80, 0) 70%
      )
      no-repeat,
    linear-gradient(
        120deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0) 60%
      )
      no-repeat,
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22),
      rgba(0, 0, 0, 0) 20%,
      rgba(0, 0, 0, 0) 80%,
      rgba(0, 0, 0, 0.22)
    );
  background-position:
    50%,
    0 0,
    50%;
  background-size:
    100% 100%,
    220% 100%,
    100% 100%;
  background:
    radial-gradient(
      30px 30px at 10% 12%,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      26px 26px at 90% 88%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0) 70%
    );
  /* Keep glints without backdrop blending to avoid rectangles */
  background-blend-mode: screen;
  border-radius: 12px;
  border-radius: 10px;
  inset: 0;
  inset: 2px;
}
.card[data-rarity="mythic"] .cardBody {
  position: relative;
}
.card[data-rarity="mythic"] .cardBody::before {
  animation: flamePulse 1.8s ease-in-out infinite;
  background:
    radial-gradient(
      120px 60px at 20% 100%,
      rgba(255, 120, 80, 0.55),
      transparent 60%
    ),
    radial-gradient(
      140px 70px at 60% 100%,
      rgba(255, 180, 60, 0.45),
      transparent 60%
    ),
    radial-gradient(
      100px 50px at 90% 100%,
      rgba(255, 90, 90, 0.35),
      transparent 60%
    );
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  bottom: -6px;
  content: "";
  filter: blur(0.4px);
  height: 38%;
  left: -6px;
  pointer-events: none;
  position: absolute;
  right: -6px;
}

/* === Mythic 3D Treatment (tilt, bevel, cast shadow, parallax) === */

/* Hover tilt and lift */
.card[data-rarity="mythic"]:hover {
  box-shadow:
    0 28px 42px rgba(0, 0, 0, 0.55),
    0 12px 16px rgba(0, 0, 0, 0.35);
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateZ(6px);
}

/* Pressed state feels “clickable” */
.card[data-rarity="mythic"]:active {
  box-shadow:
    0 12px 18px rgba(0, 0, 0, 0.5),
    0 6px 8px rgba(0, 0, 0, 0.35);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0)
    scale(0.985);
}

/* Beveled face with inner highlights and a base vignette */

/* Use your existing ::before flamePulse, but add a glint rim for bevel */

/* Your shimmer ::after gets side shading and sits above the face */

/* Raise card content above mythic decorative layers */
.card[data-rarity="mythic"] .cardBody,
.card[data-rarity="mythic"] .cardFoot,
.card[data-rarity="mythic"] .cardHead {
  position: relative;
  z-index: 1;
}

/* Optional idle bob so it doesn’t sit there like a dead relic */
.card[data-rarity="mythic"].idle {
  animation: mythicBob 4.5s ease-in-out infinite;
}
@keyframes mythicBob {
  0%,
  100% {
    transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateZ(0);
  }
  50% {
    transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateZ(4px);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .card[data-rarity="mythic"],
  .card[data-rarity="mythic"].idle,
  .card[data-rarity="mythic"]:hover {
    animation: none;
    transform: perspective(900px) rotateX(3deg) rotateY(-4deg);
  }
}

/* ================================
   CARD COMPONENT STRUCTURE  
==================================*/

/* Card Header */
.cardHead {
  align-items: center;
  gap: 6px;
}

/* Card Body */
.cardBody,
.cardHead {
  display: flex;
  min-width: 0;
}
.cardBody {
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
}

/* Card Elements */
.chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: grid;
  flex: 0 0 auto;
  height: 22px;
  place-items: center;
  width: 22px;
}
.chip,
.k {
  font-size: 0.78rem;
}
.k {
  color: #cdd9ef;
  letter-spacing: 0.2px;
  line-height: 1.15;
  min-width: 0;
}
.k,
.pill {
  overflow-wrap: anywhere;
}
.pill {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  flex: 1 1 100%;
  font-size: 0.8rem;
  hyphens: auto;
  line-height: 1.2;
  max-width: 100%;
  padding: 0.24rem 0.48rem;
  white-space: normal;
}
.card[data-rarity="legendary"] .pill {
  border-color: var(--rarity-legendary);
}
.card[data-rarity="epic"] .pill {
  border-color: var(--rarity-epic);
}
.card[data-rarity="rare"] .pill {
  border-color: var(--rarity-rare);
}

/* ================================
   OVERLAYS / MODALS / FINISH
==================================*/
.srOnly {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  clip: rect(0 0 0 0);
  border: 0;
  padding: 0;
}

/* Single source of truth for the submit modal */

/* === Finish Overlay Mobile === */
/* === Mobile Overlay Styles === */
@media (max-width: 1900px) {
  #bonusOverlay.overlay {
    align-items: flex-end;
    padding: 0;
  }
  .rowStatDetails {
    grid-column: 1 / -1 !important;
  }
  #bonusOverlay .overlayCard {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-width: 100%;
    padding: 20px 20px max(20px, env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease;
    width: 100%;
    will-change: transform;
  }
  #bonusOverlay.overlay.show .overlayCard {
    transform: translateY(0);
  }
  #bonusOverlay .bonusList {
    max-height: calc(80dvh - 140px);
    overflow-y: auto;
  }
}

/* Attribute Card Specializations */
.attrCard .pill {
  font-size: clamp(10px, 1.5vw, 11px);
  line-height: 1.5;
  text-overflow: ellipsis;
}
.attrCard .cardHead {
  gap: 8px;
}
.attrCard .cardHead .chip,
.attrCard .cardHead .rarity {
  flex: 0 0 auto;
}
.attrCard .cardHead .pill {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tablet Landscape & Compact Viewports */
@media (max-width: 1900px) {
  .totalLevel .badge {
    background: transparent !important;
    border: none !important;
    height: 50%;
    padding: 10px !important;
    width: 100%;
  }
  .rowStat {
    font-size: 11px;
    max-height: 25px;
  }
  .grid {
    width: 100%;
  }
}
.submitwindowbtn {
  color: #dffff2;
}
.lbSummary .sumItem,
.submitwindowbtn {
  align-items: center;
  display: flex;
  justify-content: center;
}
.lbSummary .sumItem {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg, red, orange, yellow, #ff4500);
  background: linear-gradient(
    135deg,
    rgba(120, 190, 255, 0.12),
    rgba(140, 120, 255, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(180, 205, 255, 0.28);
  border-radius: 12px;
  box-shadow:
    0 8px 22px rgba(40, 80, 160, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  position: relative; /* neutralize any inherited weirdness */
}
#nameInputOverlay {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  padding: 0.55rem 0.7rem;
  width: 100%;
}
#chatModalBtn {
  background: linear-gradient(
    135deg,
    rgba(0, 212, 255, 0.22),
    rgba(0, 82, 120, 0.4)
  );
  border: 1px solid rgba(0, 212, 255, 0.32);
  border-radius: 14px;
  box-shadow:
    0 10px 18px rgba(4, 12, 20, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #e8f6ff;
  display: none;
  height: 36px;
  min-width: 46px;
  padding: 0 0.9rem;
  position: relative;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}
#chatModalBtn:hover {
  box-shadow: 0 16px 28px rgba(4, 12, 20, 0.46);
  filter: brightness(1.08) saturate(1.1);
}
#chatModalBtn:active {
  box-shadow: 0 8px 16px rgba(4, 12, 20, 0.38);
  transform: translateY(1px) scale(0.98);
}
#chatModalBtn:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.7);
  outline-offset: 3px;
}
#chatModalBtn[data-unread="true"]::after {
  background: linear-gradient(135deg, #ff7a7a, #ff3b3b);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 90, 90, 0.6);
  content: "";
  height: 10px;
  position: absolute;
  right: 8px;
  top: 6px;
  width: 10px;
}

/* === Finish Overlay Base === */
#finishOverlay[hidden] {
  display: none !important;
}
#finishOverlay .finishOverlay__close {
  background: transparent;
  border: 0;
  color: rgba(230, 238, 251, 0.78);
  cursor: var(--cursor-clickable, pointer);
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  position: absolute;
  right: 18px;
  top: 18px;
  transition: color 0.15s ease, text-shadow 0.2s ease;
  z-index: 3;
}
#finishOverlay .finishOverlay__close:hover {
  color: var(--accent-2);
  text-shadow: 0 0 14px rgba(0, 212, 255, 0.55);
}
#finishOverlay .finishOverlay__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
#finishOverlay .finishOverlay__title {
  color: rgba(200, 210, 230, 0.9);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
#finishOverlay .finishOverlay__savedName {
  background-image: linear-gradient(120deg, var(--n-orange-hi), var(--n-blue-hi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.1;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(0, 200, 255, 0.45);
}
#finishOverlay .finishOverlay__savedName[hidden] {
  display: none !important;
}
#finishOverlay .finishOverlay__savedName--interactive {
  cursor: var(--cursor-clickable, pointer);
  outline: none;
}
#finishOverlay .finishOverlay__savedName--interactive:focus {
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.6);
  outline: none;
}
#finishOverlay .finishOverlay__nameBlock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#finishOverlay .finishOverlay__nameRow {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
}
#finishOverlay .finishOverlay__nameRow[hidden] {
  display: none !important;
}
#finishOverlay input {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(9, 12, 18, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 10px;
  color: var(--n-on-dark);
  font: inherit;
  font-size: 16px;
  padding: 12px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#finishOverlay input::placeholder {
  color: rgba(200, 210, 230, 0.5);
}
#finishOverlay input:focus {
  background: rgba(11, 17, 26, 0.88);
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.35);
  outline: none;
}
#finishOverlay button {
  background: linear-gradient(135deg, rgba(255, 95, 0, 0.18), rgba(0, 200, 255, 0.2));
  border: 1px solid rgba(0, 212, 255, 0.32);
  border-radius: 11px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
  color: var(--n-on-dark);
  cursor: var(--cursor-clickable, pointer);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 11px 16px;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#finishOverlay button:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#finishOverlay button:active {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  filter: brightness(0.95);
  transform: translateY(0);
}
#finishOverlay button:disabled {
  background: rgba(20, 26, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: rgba(154, 166, 191, 0.5);
  cursor: var(--cursor-disabled, not-allowed);
  filter: none;
  transform: none;
}
#finishOverlay .finishOverlay__action--primary {
  background: linear-gradient(135deg, rgba(255, 95, 0, 0.9), rgba(0, 200, 255, 0.9));
  border-color: rgba(0, 212, 255, 0.5);
  color: #0b0f14;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.35);
}
#finishOverlay .finishOverlay__action--primary:disabled {
  background: rgba(36, 44, 60, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(154, 166, 191, 0.55);
}
#finishOverlay .finishOverlay__action {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
}
#finishOverlay .finishOverlay__loginStatus {
  align-items: center;
  background: rgba(18, 24, 38, 0.78);
  border: 1px solid rgba(230, 238, 255, 0.18);
  border-radius: 999px;
  color: rgba(230, 238, 255, 0.86);
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.4rem;
  text-align: center;
  width: 100%;
}
#finishOverlay .finishOverlay__loginStatus strong {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}
#finishOverlay .finishOverlay__label {
  letter-spacing: 0.12em;
}
#finishOverlay .finishOverlay__bonus {
  background: rgba(255, 183, 3, 0.22);
  border: 1px solid rgba(255, 183, 3, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.35);
  color: #ffcf6d;
  font-size: 0.75rem;
}
#finishOverlay .finishOverlay__bonus--inline {
  font-size: 0.72rem;
  margin-left: auto;
}

/* Modal (detail) */
.modal {
  display: grid;
  inset: 0;
  place-items: center;
  position: fixed;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--modal-fade-duration, 0.22s) ease;
}
.modal[hidden] {
  display: none !important;
}
.modal.modal-is-visible {
  opacity: 1;
  pointer-events: auto;
}
.modal.modal-is-hiding {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .adv-modal,
  #legal-modal {
    transition-duration: 0ms !important;
  }
}
.modal::before {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(6, 10, 16, 0.6);
  content: "";
  inset: 0;
  position: absolute;
}
.chat-modal {
  z-index: 1200; /* lower priority so other overlays can stack above */
}
.profile-modal {
  z-index: 11000;
}
#encyModal {
  z-index: 12500;
}
.modalCard {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 10px;
  max-height: 80vh;
  overflow: auto;
  padding: 16px;
  position: relative;
  width: min(680px, 92vw);
  z-index: 1;
}

.howto-trigger {
  cursor: var(--cursor-clickable, pointer);
}

.howto-modal__card {
  background: linear-gradient(160deg, rgba(18, 23, 34, 0.98) 0%, rgba(9, 12, 20, 0.98) 60%),
    radial-gradient(circle at 15% 15%, rgba(255, 136, 43, 0.22), transparent 55%);
  border: 1px solid rgba(255, 160, 73, 0.45);
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(6, 10, 16, 0.55);
  color: #f8fafc;
  gap: 28px;
  max-height: 82vh;
  padding: 34px 38px 36px;
  width: min(880px, 94vw);
}

.howto-modal__close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 10px;
  position: absolute;
  right: 20px;
  top: 20px;
}
.howto-modal__close:focus-visible,
.howto-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.howto-modal__header {
  display: grid;
  gap: 12px;
}
.howto-modal__eyebrow {
  color: rgba(255, 200, 128, 0.86);
  font:
    600 0.8rem/1.2 Cinzel,
    system-ui,
    serif;
  letter-spacing: 0.6px;
  margin: 0;
  text-transform: uppercase;
}
.howto-modal__header h3 {
  font:
    600 1.9rem/1.2 Russo One,
    system-ui,
    sans-serif;
  letter-spacing: 0.4px;
  margin: 0;
}
.howto-modal__lede {
  color: rgba(226, 232, 240, 0.82);
  font-size: 1rem;
  margin: 0;
  max-width: 60ch;
}

.howto-step-grid {
  display: grid;
  gap: 26px;
}

.howto-step {
  align-items: center;
  background: linear-gradient(150deg, rgba(18, 22, 34, 0.75), rgba(12, 16, 26, 0.95));
  border: 1px solid rgba(255, 160, 73, 0.28);
  border-radius: 18px;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  padding: 22px 24px;
}

.howto-step__media {
  background: rgba(15, 21, 33, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  min-height: 180px;
  overflow: hidden;
  position: relative;
}
.howto-step__media::after {
  background: linear-gradient(135deg, rgba(255, 138, 76, 0.18), transparent 70%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.howto-step__art {
  display: block;
  height: auto;
  max-width: 240px;
  width: 100%;
  z-index: 1;
}
.howto-step__art--wheel {
  filter: drop-shadow(0 10px 24px rgba(255, 167, 92, 0.15));
}
.howto-step__art--panel {
  filter: drop-shadow(0 10px 24px rgba(99, 210, 255, 0.18));
}
.howto-step__art--submit {
  filter: drop-shadow(0 10px 24px rgba(255, 199, 125, 0.16));
}

.howto-step__body {
  display: grid;
  gap: 12px;
}
.howto-step__body h4 {
  font:
    600 1.2rem/1.25 Cinzel,
    system-ui,
    serif;
  letter-spacing: 0.2px;
  margin: 0;
}
.howto-step__body p {
  color: rgba(226, 232, 240, 0.86);
  margin: 0;
}
.howto-step__body ul {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
}
.howto-step__body li {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 6px 0 0;
}

.howto-modal__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
  padding-top: 18px;
}
.howto-modal__footer h4 {
  font:
    600 1.1rem/1.3 Cinzel,
    system-ui,
    serif;
  margin: 0;
}
.howto-modal__footer p {
  color: rgba(203, 213, 225, 0.82);
  margin: 0;
}
.howto-modal__footer .howto-modal__cta {
  justify-self: start;
  min-width: 0;
}
.howto-modal__hint {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.9rem;
}
.howto-modal__footer code {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  color: inherit;
  font-size: 0.85rem;
  padding: 1px 6px;
}

#comingSoonModal {
  z-index: 12300;
}
.comingsoon-card {
  background:
    radial-gradient(circle at 18% -10%, rgba(55, 182, 255, 0.22), transparent 52%),
    radial-gradient(circle at 90% 120%, rgba(95, 255, 226, 0.18), transparent 55%),
    linear-gradient(158deg, rgba(12, 21, 34, 0.98) 0%, rgba(6, 13, 24, 0.98) 58%, rgba(4, 10, 19, 0.98) 100%);
  border: 1px solid rgba(61, 176, 255, 0.38);
  border-radius: 24px;
  box-shadow:
    0 32px 68px rgba(5, 11, 22, 0.65),
    inset 0 0 0 1px rgba(117, 233, 255, 0.12);
  color: #e8f8ff;
  gap: 28px;
  max-height: 82vh;
  padding: 38px 42px 40px;
  width: min(900px, 94vw);
}
.comingsoon-close {
  background: rgba(7, 15, 26, 0.75);
  border: 1px solid rgba(95, 255, 226, 0.3);
  border-radius: 999px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px 12px;
  position: absolute;
  right: 22px;
  top: 22px;
}
.comingsoon-close:focus-visible,
.comingsoon-close:hover {
  background: rgba(95, 255, 226, 0.18);
  outline: none;
}
.comingsoon-header {
  display: grid;
  gap: 12px;
  text-align: left;
}
.comingsoon-eyebrow {
  color: rgba(117, 233, 255, 0.86);
  font:
    600 0.8rem/1.2 Cinzel,
    serif;
  letter-spacing: 0.45px;
  margin: 0;
  text-transform: uppercase;
}
.comingsoon-header h3 {
  font:
    600 2rem/1.15 Russo One,
    system-ui,
    sans-serif;
  letter-spacing: 0.3px;
  margin: 0;
  text-shadow: 0 0 24px rgba(73, 208, 255, 0.45);
}
.comingsoon-subtitle {
  color: rgba(198, 236, 255, 0.9);
  font-size: 1rem;
  margin: 0;
  max-width: 60ch;
}
.comingsoon-section {
  background: rgba(9, 17, 28, 0.68);
  border: 1px solid rgba(61, 176, 255, 0.22);
  border-radius: 16px;
  display: grid;
  gap: 14px;
  padding: 22px 24px;
}
.comingsoon-section + .comingsoon-section {
  margin-top: 6px;
}
.comingsoon-section h4 {
  color: #8cf6ff;
  font:
    600 1.2rem/1.25 Cinzel,
    serif;
  letter-spacing: 0.2px;
  margin: 0;
}
.comingsoon-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.comingsoon-list li {
  align-items: start;
  color: rgba(210, 241, 255, 0.92);
  display: grid;
  font-size: 0.95rem;
  gap: 10px;
  grid-template-columns: 18px 1fr;
}
.comingsoon-list li::before {
  background: radial-gradient(circle at 50% 50%, rgba(95, 255, 226, 0.9), rgba(35, 216, 255, 0.35));
  border-radius: 50%;
  content: "";
  height: 10px;
  margin-top: 6px;
  width: 10px;
}
.comingsoon-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0;
}
.comingsoon-grid > div {
  background: rgba(7, 14, 24, 0.82);
  border: 1px solid rgba(61, 176, 255, 0.22);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}
.comingsoon-grid dt {
  color: #7ce8ff;
  font:
    600 0.95rem/1.25 Cinzel,
    serif;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.comingsoon-grid dd {
  color: rgba(206, 237, 255, 0.9);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}
.comingsoon-timeline {
  counter-reset: comingstep;
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.comingsoon-timeline li {
  align-items: start;
  background: rgba(7, 14, 24, 0.78);
  border: 1px solid rgba(61, 176, 255, 0.2);
  border-radius: 14px;
  color: rgba(203, 236, 255, 0.92);
  display: grid;
  gap: 6px;
  padding: 16px 18px 16px 54px;
  position: relative;
}
.comingsoon-timeline li strong {
  color: #86f8ff;
  font-family: Russo One, system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.3px;
}
.comingsoon-timeline li::before {
  align-items: center;
  background: linear-gradient(135deg, rgba(35, 216, 255, 0.92), rgba(95, 255, 226, 0.72));
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(35, 216, 255, 0.18), 0 0 30px rgba(61, 176, 255, 0.6);
  color: #021e2b;
  content: counter(comingstep);
  counter-increment: comingstep;
  display: grid;
  font:
    700 0.95rem/1 Russo One,
    sans-serif;
  height: 32px;
  left: 14px;
  place-items: center;
  position: absolute;
  top: 16px;
  width: 32px;
}
.comingsoon-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  padding-top: 10px;
}
.comingsoon-footer__secondary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-left: auto;
}
.comingsoon-footer .btn.primary {
  background: linear-gradient(90deg, rgba(35, 216, 255, 0.88), rgba(95, 255, 226, 0.82));
  border: 1px solid rgba(60, 186, 255, 0.65);
  box-shadow:
    0 14px 30px rgba(8, 71, 110, 0.55),
    inset 0 0 0 1px rgba(222, 255, 249, 0.3);
  color: #04263a;
  min-width: 200px;
}
.comingsoon-footer .btn.ghost {
  border: 1px solid rgba(61, 176, 255, 0.45);
  color: rgba(195, 237, 255, 0.92);
}
.comingsoon-footer .btn:hover,
.comingsoon-footer .btn:focus-visible {
  filter: brightness(1.05);
}

@media (max-width: 840px) {
  .comingsoon-card {
    padding: 30px 26px 32px;
  }
  .comingsoon-footer {
    justify-content: center;
  }
  .comingsoon-footer__secondary {
    justify-content: center;
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .howto-modal__card {
    padding: 28px 26px 30px;
  }
  .howto-step {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .howto-modal__card {
    gap: 24px;
  }
  .howto-step {
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }
  .howto-step__media {
    justify-self: stretch;
    min-height: 160px;
  }
}

@media (max-width: 520px) {
  .howto-modal__card {
    padding: 24px 18px 26px;
  }
  .howto-modal__close {
    right: 14px;
    top: 14px;
  }
}

/* Continuing from where the first document cut off... */
.modalCard h3 {
  margin: 0;
}
.profile-modal__scrim {
  background: transparent;
  cursor: var(--cursor-clickable, pointer);
  inset: 0;
  position: absolute;
  z-index: 1;
}
.profile-modal__card {
  gap: 18px;
  max-height: 85vh;
  padding: 20px 22px 24px;
  width: min(560px, 92vw);
  z-index: 2;
}
.profile-modal__header {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-areas: "title preview close";
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.profile-modal__header > div:first-child {
  grid-area: title;
}
.profile-modal__header h3 {
  font-size: 1.4rem;
}
.profile-modal__header p {
  font-size: 0.92rem;
  margin: 6px 0 0;
  opacity: 0.7;
}
.profile-modal__avatar-preview {
  align-self: start;
  background: linear-gradient(
    135deg,
    rgba(79, 142, 247, 0.25),
    rgba(255, 255, 255, 0.12)
  );
  border: 2px solid var(--profile-preview-accent, #4f8ef7);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(6, 10, 16, 0.36);
  display: grid;
  font-size: 2.35rem;
  grid-area: preview;
  height: 64px;
  line-height: 1;
  place-items: center;
  width: 64px;
}
.profile-modal__close {
  align-self: start;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  font-size: 1.6rem;
  grid-area: close;
  justify-self: end;
  padding: 4px;
  transition: background 0.15s ease;
}
.profile-modal__close:focus-visible,
.profile-modal__close:hover {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.profile-modal__body {
  display: grid;
  gap: 20px;
}
.profile-modal__loading,
.profile-modal__signed-out {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 8px;
  text-align: center;
}
.profile-modal__loading {
  display: grid;
  gap: 1.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  align-content: start;
}
.profile-modal__signed-out p {
  margin-bottom: 16px;
}
.profile-modal__form {
  display: grid;
  gap: 24px;
}
.profile-modal__fieldset {
  border: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.profile-modal__label {
  font-size: 0.95rem;
  font-weight: 600;
}
#profileDisplayNameInput {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: inherit;
  font: inherit;
  padding: 10px 12px;
}
#profileDisplayNameInput:focus {
  outline: 2px solid rgba(79, 142, 247, 0.6);
  outline-offset: 2px;
}
.profile-modal__section {
  display: grid;
  gap: 12px;
}
.profile-modal__section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-modal__section-header h4 {
  font-size: 1.05rem;
  margin: 0;
}
.profile-modal__hint {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.7;
}
.profile-avatar-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.profile-avatar-option {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: var(--cursor-clickable, pointer);
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  transition:
    transform 0.15s ease,
    border 0.15s ease,
    background 0.15s ease;
}
.profile-avatar-option:focus-visible,
.profile-avatar-option:hover {
  background: rgba(79, 142, 247, 0.12);
  border-color: rgba(79, 142, 247, 0.8);
  outline: none;
}
.profile-avatar-option.is-selected {
  border-color: rgba(79, 142, 247, 0.95);
  box-shadow: 0 8px 18px rgba(79, 142, 247, 0.2);
}
.profile-avatar-option__emoji {
  font-size: 1.7rem;
  line-height: 1;
}
.profile-avatar-option__label {
  font-weight: 600;
}
.profile-avatar-option__desc {
  font-size: 0.78rem;
  opacity: 0.7;
}
.profile-accent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-accent-swatch {
  background: var(--profile-swatch, #ffffff);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: var(--cursor-clickable, pointer);
  height: 40px;
  transition:
    transform 0.15s ease,
    border 0.15s ease;
  width: 40px;
}
.profile-accent-swatch:focus-visible,
.profile-accent-swatch:hover {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
  transform: translateY(-2px);
}
.profile-accent-swatch.is-selected {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.profile-wallet {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.profile-wallet__balance {
  background:
    linear-gradient(135deg, rgba(255, 214, 102, 0.24), rgba(255, 186, 46, 0.42)),
    radial-gradient(circle at 20% 20%, rgba(255, 238, 170, 0.6), transparent 55%);
  border: 1px solid rgba(255, 196, 38, 0.6);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(255, 190, 46, 0.22);
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  cursor: var(--cursor-clickable, pointer);
  transition: transform 0.15s ease;
}
.profile-wallet__balance:focus-visible,
.profile-wallet__balance:hover {
  transform: translateY(-2px);
}
.profile-wallet__balance:focus-visible {
  outline: 2px solid rgba(255, 222, 145, 0.85);
  outline-offset: 3px;
  box-shadow: 0 14px 32px rgba(255, 210, 72, 0.35);
}
.profile-wallet__label {
  color: #ffe8b5;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
  text-transform: uppercase;
}
.profile-wallet__amount {
  color: #ffdf6b;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(255, 205, 88, 0.35);
}
.profile-wallet__hint {
  color: rgba(255, 233, 174, 0.9);
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.9;
}
.profile-wallet--meta {
  grid-template-columns: minmax(0, 1fr);
}
.meta-panel-wallet {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
}
.meta-panel-wallet__header h4 {
  color: #f8fafc;
  font-size: 1rem;
  margin: 0;
}
.meta-panel-wallet__subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.85rem;
  margin: 4px 0 0;
}
.meta-panel-wallet .profile-wallet__balance {
  cursor: default;
  gap: 4px;
  padding: 8px 14px;
}
.meta-panel-wallet .profile-wallet__balance:hover,
.meta-panel-wallet .profile-wallet__balance:focus-visible {
  transform: none;
}
.meta-panel-wallet .profile-wallet__balance:focus-visible {
  box-shadow: 0 10px 26px rgba(255, 190, 46, 0.22);
  outline: none;
}
.profile-stats-list {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
}
.profile-stats-list dt {
  font-size: 0.9rem;
  font-weight: 600;
}
.profile-stats-list dd {
  margin: 0;
  opacity: 0.82;
}
.profile-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-badge {
  --badge-bg: rgba(255, 255, 255, 0.08);
  --badge-border: rgba(255, 255, 255, 0.14);
  --badge-text: #f6f7ff;
  align-items: center;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  cursor: var(--cursor-clickable, pointer);
  color: var(--badge-text);
  display: inline-flex;
  font-size: 0.85rem;
  gap: 6px;
  padding: 6px 12px;
}
.profile-badge:focus-visible {
  outline: 2px solid rgba(79, 142, 247, 0.6);
  outline-offset: 2px;
}
.profile-badge-detail {
  font-size: 0.85rem;
  margin: 10px 0 0;
  min-height: 1.2em;
  opacity: 0.8;
}
.profile-builds-list {
  display: grid;
  gap: 12px;
}
.profile-builds-section {
  display: grid;
  gap: 8px;
}
.profile-builds-section[data-section="drafts"],
.profile-builds-section[data-section="submitted"] {
  max-height: clamp(220px, 32vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable both-edges;
}
.profile-builds-section__heading {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  opacity: 0.75;
  text-transform: uppercase;
  background: var(--panel, rgba(9, 13, 23, 0.96));
  padding: 6px 2px;
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(6px);
}
.profile-build-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}
.profile-build-card__header {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.profile-build-card__name {
  font-size: 0.95rem;
  font-weight: 600;
}
.profile-build-card__total {
  font-size: 0.9rem;
  opacity: 0.85;
}
.profile-build-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.78;
}
.profile-build-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-build-card__rename {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-build-card__name-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: inherit;
  flex: 1 1 160px;
  font: inherit;
  min-width: 0;
  padding: 8px 10px;
}
.profile-build-card__name-input:focus {
  outline: 2px solid rgba(79, 142, 247, 0.6);
  outline-offset: 2px;
}
.profile-build-card__status-note {
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.8;
}
.profile-build-card__status-note[data-tone="info"] {
  color: rgba(255, 255, 255, 0.76);
}
.profile-build-card__status-note[data-tone="success"] {
  color: #7ef0c5;
}
.profile-build-card__status-note[data-tone="warn"] {
  color: #ffd27f;
}
.profile-build-card__status-note[data-tone="error"] {
  color: #ff8c99;
}
.profile-build-card__status {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  text-transform: uppercase;
}
.profile-build-card__status[data-state="submitted"] {
  background: rgba(79, 142, 247, 0.28);
  color: #f6f9ff;
}
.adv-profile-chip[data-difficulty="bronze"],
.profile-badge[data-difficulty="bronze"] {
  --badge-bg: rgba(184, 115, 51, 0.18);
  --badge-border: rgba(184, 115, 51, 0.42);
  --badge-text: #f8e3d0;
}
.adv-profile-chip[data-difficulty="silver"],
.profile-badge[data-difficulty="silver"] {
  --badge-bg: rgba(192, 192, 192, 0.18);
  --badge-border: rgba(192, 192, 192, 0.45);
  --badge-text: #f2f4f7;
}
.adv-profile-chip[data-difficulty="gold"],
.profile-badge[data-difficulty="gold"] {
  --badge-bg: rgba(255, 215, 0, 0.2);
  --badge-border: rgba(255, 215, 0, 0.5);
  --badge-text: #fff4c7;
}
.adv-profile-chip[data-difficulty="platinum"],
.profile-badge[data-difficulty="platinum"] {
  --badge-bg: rgba(162, 217, 255, 0.2);
  --badge-border: rgba(162, 217, 255, 0.46);
  --badge-text: #e8f6ff;
}
.adv-profile-chip[data-difficulty="diamond"],
.profile-badge[data-difficulty="diamond"] {
  --badge-bg: rgba(127, 255, 212, 0.2);
  --badge-border: rgba(127, 255, 212, 0.46);
  --badge-text: #e9fff8;
}
.adv-profile-chip[data-difficulty="mythic"],
.profile-badge[data-difficulty="mythic"] {
  --badge-bg: rgba(168, 85, 247, 0.24);
  --badge-border: rgba(168, 85, 247, 0.5);
  --badge-text: #f2e8ff;
}
.adv-profile-chip[data-difficulty="standard"],
.profile-badge[data-difficulty="standard"] {
  --badge-bg: rgba(255, 255, 255, 0.08);
  --badge-border: rgba(255, 255, 255, 0.14);
  --badge-text: #f6f7ff;
}
.profile-empty-note {
  font-size: 0.88rem;
  margin: 0;
  opacity: 0.68;
}
.profile-modal__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.profile-modal__timestamp {
  font-size: 0.8rem;
  opacity: 0.6;
}
@media (max-width: 1900px) {
  .profile-modal__header {
    grid-template-areas: "title close" "preview preview";
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .profile-modal__avatar-preview {
    justify-self: flex-start;
  }
  .profile-modal__close {
    justify-self: end;
  }
  .profile-modal__card {
    padding: 18px;
  }
  .profile-avatar-grid {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }
}
#lbDetail .modalCard {
  backdrop-filter: blur(14px);
  background:
    linear-gradient(180deg, rgba(14, 19, 30, 0.97), rgba(14, 19, 30, 0.94))
      padding-box,
    linear-gradient(135deg, rgba(0, 200, 255, 0.36), rgba(255, 95, 0, 0.24))
      border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: clamp(18px, 3vw, 24px);
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  padding: clamp(24px, 4vw, 34px);
  position: relative;
}
#lbFullModal .modalCard {
  backdrop-filter: blur(18px);
  background:
    linear-gradient(180deg, rgba(15, 18, 32, 0.96), rgba(15, 21, 36, 0.92))
      padding-box,
    linear-gradient(135deg, rgba(100, 180, 255, 0.34), rgba(255, 128, 72, 0.22))
      border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow:
    0 22px 52px rgba(3, 6, 12, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  gap: clamp(18px, 3vw, 26px);
  max-height: 90vh;
  padding: clamp(24px, 4vw, 32px);
  width: min(920px, 96vw);
}
#lbFullModalClose {
  background: rgba(6, 10, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(240, 246, 255, 0.88);
  cursor: var(--cursor-clickable, pointer);
  display: grid;
  font-size: 1rem;
  height: 36px;
  place-items: center;
  position: absolute;
  right: 12px;
  top: 12px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
  width: 36px;
  z-index: 2;
}
#lbFullModalClose:hover,
#lbFullModalClose:focus-visible {
  background: rgba(18, 24, 38, 0.92);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  outline: none;
}
.lbFullModal__header {
  display: grid;
  gap: 6px;
  align-items: start;
}
.lbFullModal__header h3 {
  font-size: clamp(1.1rem, 2vw, 1.28rem);
  margin: 0;
}
#lbFullModal .modalCard {
  backdrop-filter: blur(18px);
  background:
    linear-gradient(180deg, rgba(15, 18, 32, 0.96), rgba(15, 21, 36, 0.92))
      padding-box,
    linear-gradient(135deg, rgba(100, 180, 255, 0.34), rgba(255, 128, 72, 0.22))
      border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow:
    0 22px 52px rgba(3, 6, 12, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  gap: clamp(18px, 3vw, 26px);
  max-height: 90vh;
  padding: clamp(24px, 4vw, 32px);
  width: min(920px, 96vw);
}
#lbFullModal .lbFullModal__header {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.lbFullModal__heading {
  display: grid;
  gap: 6px;
}
.lbFullModal__filters {
  display: grid;
  gap: 14px;
  justify-items: stretch;
  width: 100%;
}
.lbFullModal__summary {
  color: rgba(235, 241, 255, 0.78);
  font-size: 0.95rem;
  margin: 0;
}
.lbFullModal__hint {
  color: rgba(235, 241, 255, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}
.lbFullModal__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lbFullModal__searchRow {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.lbFullModal__select {
  appearance: none;
  background: rgba(18, 26, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #f2f6ff;
  font-size: 0.88rem;
  padding: 8px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lbFullModal__select:focus-visible,
.lbFullModal__select:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(97, 162, 255, 0.25);
  outline: none;
}

.lbFullModal__searchInput {
  background: rgba(18, 26, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #f2f6ff;
  font-size: 0.9rem;
  padding: 9px 18px;
  width: 100%;
}
.lbFullModal__searchInput::placeholder {
  color: rgba(235, 241, 255, 0.44);
}
.lbFullModal__searchInput:focus-visible,
.lbFullModal__searchInput:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(97, 162, 255, 0.25);
  outline: none;
}
.lbFullModal__statTabs {
  align-items: center;
  display: flex;
  flex: 0 1 240px;
  justify-content: flex-end;
  min-width: 0;
}
.lbStatDropdown {
  flex: 1 1 auto;
  max-width: 280px;
  min-width: 180px;
  position: relative;
  width: 100%;
}
.lbStatSelect {
  appearance: none;
  background: rgba(20, 30, 50, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(235, 241, 255, 0.86);
  cursor: var(--cursor-clickable, pointer);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 9px 42px 9px 18px;
  text-transform: uppercase;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  width: 100%;
}
.lbStatSelect:focus-visible,
.lbStatSelect:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(97, 162, 255, 0.25);
  outline: none;
}
.lbStatSelect option {
  background: #111a2c;
  color: #f2f6ff;
}
.lbStatDropdown::after {
  border-color: rgba(235, 241, 255, 0.72) transparent transparent transparent;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  content: '';
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-25%);
}
.lbStatTab {
  background: rgba(20, 30, 50, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(235, 241, 255, 0.86);
  cursor: var(--cursor-clickable, pointer);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  text-transform: uppercase;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}
.lbStatTab:hover,
.lbStatTab:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(97, 162, 255, 0.25);
  outline: none;
  transform: translateY(-1px);
}
.lbStatTab.is-active {
  background: linear-gradient(130deg, rgba(92, 186, 255, 0.38), rgba(132, 92, 255, 0.28));
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.lbStatTab.is-active:focus-visible {
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(97, 162, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.lbFullModal__body {
  display: grid;
  gap: 14px;
  min-height: 0;
}
#lbFullModal .lbList {
  gap: 12px;
  max-height: none;
  overflow: auto;
  padding-right: 6px;
}
#lbFullModal .lbList--modal {
  max-width: 100%;
}
#lbFullModal .lbItem {
  grid-template-columns: 60px minmax(0, 1fr);
  padding: 16px 18px;
}
#lbFullModal .lbBody {
  display: grid;
  gap: 10px;
}
#lbFullModal .lbRow {
  align-items: baseline;
}
#lbFullModal .lbName {
  font-size: clamp(1.08rem, 2vw, 1.22rem);
}
#lbFullModal .lbScore {
  font-size: 0.98rem;
}
.lbDetailSecondary {
  color: rgba(235, 241, 255, 0.72);
}
#lbFullModal .lbDetail {
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 6px 12px;
  white-space: normal;
}
#lbFullModal .lbDetail--main {
  row-gap: 6px;
}
#lbFullModal .lbDetail--main {
  margin-top: 2px;
}
#lbFullModal .lbDetail--meta {
  color: rgba(235, 241, 255, 0.65);
  font-size: 0.8rem;
  gap: 6px 14px;
}
#lbFullModal .lbDetailPrimary {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 5px 14px;
  text-transform: uppercase;
}
#lbFullModal .lbDetailHighlight {
  background: rgba(93, 177, 255, 0.26);
  border: 1px solid rgba(135, 195, 255, 0.45);
  border-radius: 999px;
  color: #e9f5ff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 16px;
  text-transform: uppercase;
}
#lbFullModal .lbDetailSecondary {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 5px 12px;
}
#lbFullModal .lbDetailStamp {
  color: rgba(235, 241, 255, 0.6);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
#lbFullModal .lbDetailDot {
  display: none;
}
#lbFullModal .lbEmpty {
  color: rgba(235, 241, 255, 0.75);
  font-size: 0.95rem;
  padding: 16px;
}

@media (max-width: 720px) {
  #lbFullModal .modalCard {
    width: 94vw;
    padding: 22px 18px 26px;
  }
  #lbFullModal .lbFullModal__header {
    gap: 12px;
    grid-template-columns: 1fr;
  }
  .lbFullModal__filters {
    justify-items: stretch;
  }
  .lbFullModal__controls {
    gap: 8px;
    justify-content: flex-start;
  }
  .lbFullModal__select {
    flex: 1 1 120px;
    min-width: 0;
  }
  .lbFullModal__searchRow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .lbFullModal__statTabs {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .lbStatDropdown {
    max-width: 100%;
    min-width: 0;
  }
}
#lbDetailClose {
  background: rgba(6, 10, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(240, 246, 255, 0.88);
  cursor: var(--cursor-clickable, pointer);
  display: grid;
  font-size: 1rem;
  height: 36px;
  place-items: center;
  position: absolute;
  right: 10px;
  top: 10px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
  width: 36px;
  z-index: 2;
}

/* Disable wheel interactions while modal open */
body.modal-open #wheel,
body.modal-open #wheelWrap,
body.modal-open .pointer {
  pointer-events: none !important;
}

/* ================================
   LEADERBOARD
==================================*/
.lbPanel,
.pnPanel {
  background: rgba(6, 12, 28, 0.7);
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.045),
        rgba(255, 255, 255, 0.02)
      )
      padding-box,
    linear-gradient(180deg, rgba(255, 95, 0, 0.15), rgba(255, 95, 0, 0))
      border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--chrome-brd);
  border-radius: 16px;
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  width: 100%;
}
.lbHeader {
  align-items: center;
  background-image:
    url("/crown.webp"), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important;
  background-size: cover !important; /* Ensures the image covers the entire div */
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  text-align: center;
}
#leaderboardPanel.lbPanel {
  backdrop-filter: blur(24px);
  background: linear-gradient(
    180deg,
    rgba(8, 14, 28, 0.94),
    rgba(10, 16, 30, 0.82)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 0 26px 50px rgba(3, 6, 12, 0.55);
  gap: 0;
  grid-template-rows: auto 1fr;
  padding: 0;
  position: relative;
}
#leaderboardPanel.lbPanel::before {
  background:
    radial-gradient(
      120% 95% at 14% -10%,
      rgba(255, 175, 78, 0.28),
      transparent 70%
    ),
    radial-gradient(
      110% 90% at 95% 110%,
      rgba(88, 128, 255, 0.24),
      transparent 70%
    );
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
#leaderboardPanel .lbHeader {
  backdrop-filter: blur(26px);
  background:
    linear-gradient(190deg, rgba(255, 179, 91, 0.62), rgba(74, 110, 232, 0.58)),
    linear-gradient(180deg, rgba(6, 10, 20, 0.92), rgba(9, 13, 24, 0.88)),
    url("/crown.webp");
  background-position: 50%;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px 22px 18px 18px;
  box-shadow: 0 20px 44px rgba(4, 6, 12, 0.45);
  margin: 0;
  overflow: hidden;
  padding: 16px 16px 10px;
  position: sticky;
  top: 0;
  z-index: 2;
}
#leaderboardPanel .lbHeader::before {
  background:
    radial-gradient(
      120% 85% at 18% 88%,
      rgba(255, 156, 46, 0.9),
      rgba(255, 156, 46, 0) 72%
    ),
    radial-gradient(
      100% 80% at 84% 12%,
      rgba(78, 134, 255, 0.85),
      rgba(78, 134, 255, 0) 70%
    ),
    linear-gradient(110deg, rgba(255, 189, 108, 0.85), rgba(78, 134, 255, 0.65));
  content: "";
  filter: blur(18px);
  inset: -50% -15% 45%;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}
#leaderboardPanel .lbHeader::after {
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
}
#leaderboardPanel .lbHeader > *,
#leaderboardPanel .lbPanelMain {
  position: relative;
  z-index: 1;
}
#leaderboardPanel .lbPanelMain {
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  margin-top: 6px;
  min-height: 0;
  padding: 8px 20px 0px;
  overflow: auto;
}
#leaderboardPanel .lbHeader h3 {
  align-items: center;
  background: linear-gradient(
    110deg,
    rgba(255, 191, 103, 0.95),
    rgba(93, 125, 255, 0.9)
  );
  border-radius: 999px;
  box-shadow:
    0 12px 26px rgba(255, 173, 86, 0.35),
    0 4px 12px rgba(30, 52, 122, 0.28);
  color: #0b0f14;
  column-gap: 12px;
  display: grid;
  font-family:
    Russo One,
    Cinzel,
    serif;
  font-size: 1.05rem;
  grid-template-columns: auto 1fr;
  margin: 0;
  position: relative;
  padding: 10px 22px;
  text-transform: uppercase;
  width: 100%;
}
#leaderboardPanel .lbHeader h3[role="button"] {
  cursor: var(--cursor-clickable, pointer);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
#leaderboardPanel .lbHeader h3[role="button"]:hover {
  box-shadow:
    0 16px 30px rgba(255, 173, 86, 0.45),
    0 6px 18px rgba(30, 52, 122, 0.36);
  transform: translateY(-1px);
}
#leaderboardPanel .lbHeader h3[role="button"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 4px;
  box-shadow:
    0 16px 30px rgba(255, 173, 86, 0.48),
    0 6px 18px rgba(30, 52, 122, 0.4);
}
#leaderboardPanel .lbHeader .lbHeadingIcon {
  background: radial-gradient(
    circle at 50% 35%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.35)
  );
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
  display: inline-grid;
  font-size: 1.1rem;
  height: 32px;
  justify-self: start;
  line-height: 1;
  place-items: center;
  width: 32px;
}
#leaderboardPanel .lbHeader .lbHeadingLabel {
  display: inline-block;
  justify-self: center;
  letter-spacing: 0.18em;
  text-align: center;
  width: 100%;
}
#leaderboardPanel .lbControls {
  align-items: stretch;
  background: linear-gradient(
    190deg,
    rgba(13, 19, 33, 0.92),
    rgba(18, 26, 44, 0.94)
  );
  border: 1px solid rgba(140, 182, 255, 0.22);
  border-radius: 18px;
  box-shadow:
    0 18px 38px rgba(2, 6, 16, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 8px;
  overflow: hidden;
  padding: 16px;
  position: relative;
  width: 100%;
}
#leaderboardPanel .lbControls::before {
  background:
    radial-gradient(
      130% 90% at 12% -10%,
      rgba(255, 161, 76, 0.18),
      transparent 55%
    ),
    radial-gradient(
      110% 95% at 100% 120%,
      rgba(72, 124, 253, 0.18),
      transparent 60%
    );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
#leaderboardPanel .lbControls > * {
  max-width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 720px) {
  #leaderboardPanel .lbControls {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  #leaderboardPanel .lbControl--search {
    grid-column: 1 / -1;
  }
}
.lbControl {
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
}
.lbSearch,
.lbSelect {
  background: rgba(14, 20, 32, 0.68);
  border: 1px solid rgba(153, 178, 215, 0.26);
  border-radius: 12px;
  color: #e6eefb;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.95rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  width: 100%;
}
#leaderboardPanel .lbSearch,
#leaderboardPanel .lbSelect {
  background: linear-gradient(
    150deg,
    rgba(24, 32, 56, 0.96),
    rgba(18, 26, 48, 0.85)
  );
  border: 1px solid rgba(146, 184, 255, 0.32);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.32);
  color: #eaf3ff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.3;
  min-height: 50px;
  padding: 0.50rem 0.75rem;
  text-transform: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
  width: 100%;
}
.lbSearch::placeholder {
  color: rgba(226, 237, 255, 0.58);
  letter-spacing: 0.02em;
}
#leaderboardPanel .lbSearch::placeholder {
  color: rgba(226, 237, 255, 0.68);
  letter-spacing: 0.03em;
}
.lbControl--search::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b2c6f3' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m17 17 4 4'/%3E%3C/svg%3E")
    50% / contain no-repeat;
  content: "";
  height: 18px;
  inset-inline-start: 16px;
  opacity: 0.6;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease;
  width: 18px;
}
#leaderboardPanel .lbControl--search::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fdd18f' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m17 17 4 4'/%3E%3C/svg%3E")
    50% / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  height: 20px;
  inset-inline-start: 18px;
  opacity: 0.9;
  width: 20px;
}
.lbControl--search .lbSearch {
  padding-inline-start: 44px;
}
#leaderboardPanel .lbControl--search .lbSearch {
  padding-inline-start: 58px;
}
.lbControl--select {
  position: relative;
}
.lbControl--select::after {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b2c6f3' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    50% / contain no-repeat;
  content: "";
  height: 12px;
  inset-inline-end: 16px;
  opacity: 0.6;
  pointer-events: none;
  position: absolute;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  width: 12px;
}
#leaderboardPanel .lbControl--select::after {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23f0e7ff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    50% / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  height: 14px;
  inset-inline-end: 18px;
  opacity: 0.85;
  width: 14px;
}
.lbControl--select .lbSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  letter-spacing: 0.02em;
  padding-inline-end: 48px;
}
#leaderboardPanel .lbControl--select .lbSelect {
  letter-spacing: 0.04em;
  padding-inline-end: 64px;
}
#leaderboardPanel .lbSearch:hover,
#leaderboardPanel .lbSelect:hover,
.lbSearch:hover,
.lbSelect:hover {
  background: rgba(22, 31, 48, 0.82);
  border-color: rgba(178, 198, 243, 0.38);
}
.lbControl--search:focus-within::before {
  opacity: 0.85;
}
.lbControl--select:focus-within::after {
  opacity: 0.85;
  transform: translateY(-1px);
}
.lbSearch:focus-visible,
.lbSelect:focus-visible {
  background: rgba(32, 44, 68, 0.92);
  border-color: rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18);
  outline: none;
}
#leaderboardPanel .lbSearch:focus-visible,
#leaderboardPanel .lbSelect:focus-visible {
  background: rgba(32, 44, 68, 0.92);
  border-color: rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18);
  outline: none;
  transform: translateY(-1px);
}
#leaderboardPanel {
  box-sizing: border-box;
  margin-inline: auto;
  max-height: 20vh;
  max-width: min(100%, 820px);
  min-height: clamp(480px, 65vh, 580px);
  overflow: auto;
  width: 95%;
}
#leaderboardPanel .lbSearch,
.lbList {
  width: 100%;
}
.lbList {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  max-height: clamp(320px, 60vh, 520px);
  max-width: 100%;
  overflow-y: auto;
  padding: 0;
  padding-right: 6px;
  scrollbar-width: thin;
}
@media (max-width: 1900px) {
  .lbList {
    max-height: min(
      78dvh,
      640px
    ); /* give mobile more scroll room for entries */
    min-height: 420px;
  }
}
.lbList::-webkit-scrollbar {
  width: 8px;
}
.lbList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.lbList::-webkit-scrollbar-track {
  background: transparent;
}
.lbEmpty {
  font-size: 0.92rem;
  opacity: 0.8;
  padding: 10px;
  text-align: center;
}
.lbItem {
  align-items: stretch;
  background: rgba(19, 25, 44, 0.8);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--chrome-brd);
  border-radius: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  cursor: var(--cursor-clickable, pointer);
  display: grid;
  gap: 12px;
  grid-template-columns: 48px minmax(0, 1fr);
  isolation: isolate;
  max-width: 100%;
  padding: 12px 14px;
  position: relative;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
  user-select: none;
  width: 100%;
}
.lbItem.first,
.lbItem.second,
.lbItem.third {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}
.lbItem.first {
  background: linear-gradient(
    140deg,
    rgba(35, 28, 5, 0.78),
    rgba(65, 44, 0, 0.82) 55%,
    rgba(28, 22, 4, 0.9)
  );
  border-color: rgba(255, 210, 110, 0.55);
  box-shadow:
    0 22px 48px rgba(255, 183, 3, 0.32),
    0 0 38px rgba(255, 209, 124, 0.35);
}
.lbItem.second {
  background: linear-gradient(
    140deg,
    rgba(18, 28, 46, 0.82),
    rgba(28, 38, 58, 0.86) 50%,
    rgba(12, 20, 34, 0.92)
  );
  border-color: rgba(208, 220, 255, 0.48);
  box-shadow:
    0 20px 46px rgba(141, 161, 196, 0.3),
    0 0 34px rgba(168, 192, 248, 0.28);
}
.lbItem.third {
  background: linear-gradient(
    140deg,
    rgba(44, 24, 6, 0.82),
    rgba(68, 33, 4, 0.84) 52%,
    rgba(24, 15, 4, 0.9)
  );
  border-color: rgba(255, 185, 120, 0.48);
  box-shadow:
    0 20px 46px rgba(255, 166, 86, 0.28),
    0 0 34px rgba(255, 199, 146, 0.26);
}
.lbItem::after {
  background: linear-gradient(
    135deg,
    rgba(108, 197, 255, 0.18),
    rgba(123, 97, 255, 0.12)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.16s ease;
  z-index: 0;
}
.lbItem.first::after {
  background:
    radial-gradient(
      120% 140% at 14% 0%,
      rgba(255, 238, 173, 0.45),
      transparent 65%
    ),
    linear-gradient(135deg, rgba(255, 215, 120, 0.42), rgba(255, 164, 64, 0.18));
  opacity: 0.85;
}
.lbItem.second::after {
  background:
    radial-gradient(
      120% 140% at 20% 0%,
      rgba(214, 226, 255, 0.42),
      transparent 65%
    ),
    linear-gradient(135deg, rgba(192, 208, 255, 0.3), rgba(118, 138, 196, 0.16));
  opacity: 0.75;
}
.lbItem.third::after {
  background:
    radial-gradient(
      120% 140% at 18% 0%,
      rgba(255, 202, 160, 0.42),
      transparent 65%
    ),
    linear-gradient(135deg, rgba(255, 181, 113, 0.32), rgba(255, 126, 56, 0.16));
  opacity: 0.75;
}
.lbItem.first:hover::after {
  opacity: 0.95;
}
.lbItem.second:hover::after,
.lbItem.third:hover::after {
  opacity: 0.85;
}
.lbItem:hover {
  border-color: color-mix(in oklab, var(--n-orange) 40%, white 0%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.32),
    inset 0 0 0 2px rgba(255, 95, 0, 0.1);
  transform: translateY(-2px);
  transform: translateY(-1px);
}
.lbItem:not(.first):not(.second):not(.third):hover::after {
  opacity: 0.65;
}
.lbItem:active {
  transform: translateY(0);
}
.lbItem > * {
  position: relative;
  z-index: 1;
}
.lbRank {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: grid;
  font-size: 1.1rem;
  font-weight: 700;
  height: 38px;
  place-items: center;
  width: 38px;
}
.lbBody {
  flex-direction: column;
  gap: 4px;
}
.lbBody,
.lbRow {
  display: flex;
  min-width: 0;
}
.lbRow {
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.lbName {
  color: #e9f1ff;
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lbScore {
  align-items: center;
  background: rgba(92, 186, 255, 0.18);
  border: 1px solid rgba(92, 186, 255, 0.36);
  border-radius: 999px;
  color: color-mix(in oklab, var(--n-blue) 80%, white 10%);
  display: inline-flex;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  justify-content: center;
  padding: 0.25rem 0.7rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.lbItem:hover .lbScore {
  transform: translateY(-1px);
}
.lbDetail {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  gap: 6px;
  line-height: 1.3;
  min-width: 0;
}
.lbDetail,
.lbDetailPrimary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lbDetailStamp {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lbDetailDot {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
}
@media (min-width: 1900px) {
  .lbControls,
  .lbHeader {
    max-width: 100%;
  }
}
.meta {
  box-sizing: border-box; /* Include padding/border in width */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  top: 0;
  width: 100%;
}
.lbPill {
  visibility: hidden;
}
.lbItem.first .lbRank {
  background: radial-gradient(
    60% 60% at 50% 40%,
    #ffe9b5,
    #ffd064 40%,
    #d08a00
  );
  border-color: rgba(255, 183, 3, 0.6);
  box-shadow:
    0 6px 16px rgba(255, 183, 3, 0.42),
    inset 0 0 0 1px rgba(255, 210, 110, 0.6);
  color: #121821;
  text-shadow: 0 4px 12px rgba(255, 180, 60, 0.45);
}
.lbItem.second .lbRank {
  background: radial-gradient(
    60% 60% at 50% 40%,
    #f2f4f7,
    #cbd5e1 40%,
    #94a3b8
  );
  background: radial-gradient(
    60% 60% at 50% 40%,
    #e6eef7,
    #cbd5e1 40%,
    #94a3b8
  );
  border-color: rgba(203, 213, 225, 0.7);
  box-shadow:
    0 6px 16px rgba(173, 186, 210, 0.38),
    inset 0 0 0 1px rgba(210, 220, 248, 0.6);
  color: #121821;
  text-shadow: 0 4px 12px rgba(200, 212, 255, 0.42);
}
.lbItem.third .lbRank {
  background: radial-gradient(
    60% 60% at 50% 40%,
    #ffd6a5,
    #ffb86b 40%,
    #cc7a29
  );
  border-color: rgba(255, 184, 107, 0.6);
  box-shadow:
    0 6px 16px rgba(255, 168, 96, 0.36),
    inset 0 0 0 1px rgba(255, 194, 140, 0.58);
  color: #121821;
  text-shadow: 0 4px 12px rgba(255, 165, 90, 0.42);
}
.lbItem.first .lbScore {
  background: rgba(255, 200, 92, 0.22);
  border-color: rgba(255, 183, 3, 0.6);
  color: #fff8de;
  text-shadow: 0 3px 10px rgba(255, 185, 60, 0.4);
}
.lbItem.second .lbScore {
  background: rgba(188, 204, 255, 0.22);
  border-color: rgba(168, 192, 248, 0.55);
  color: #f5f9ff;
  text-shadow: 0 3px 10px rgba(190, 204, 255, 0.35);
}
.lbItem.third .lbScore {
  background: rgba(255, 183, 120, 0.2);
  border-color: rgba(255, 152, 76, 0.55);
  color: #fff3e5;
  text-shadow: 0 3px 10px rgba(255, 176, 110, 0.32);
}

/* Picks panel */
.picks {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: 160px 1fr;
  padding: 10px;
}
.pRow {
  display: contents;
}
.pKey {
  align-self: center;
  color: #cdd9ef;
}
.pVal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pChip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 0.22rem 0.5rem;
}
.lbSectionTitle {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.3px;
  margin: 12px 0 6px;
}
.lbBreakdown {
  display: grid;
  gap: 8px;
}
.lbBreakItem {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px;
}
.lbBreakHead {
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lbBreakCat {
  opacity: 0.9;
}
.lbBreakPick {
  opacity: 0.8;
}
.lbBreakChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
details {
  margin-bottom: 5px;
}

/* ================================
   TOASTS
==================================*/
#toastHost {
  bottom: 24px;
  display: grid;
  gap: 8px;
  left: 50%;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 10000;
}
.toast {
  background: #e6f7ea;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  color: #0b0f14;
  font:
    600 14px/1.2 system-ui,
    Segoe UI,
    sans-serif;
  max-width: 92vw;
  min-width: 240px;
  opacity: 0;
  padding: 10px 14px;
  pointer-events: auto;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.err {
  background: #ffe8e6;
  color: #4d0b0b;
}
.toast.ok {
  background: #e8fff3;
  color: #0b3d27;
}

/* ================================
   SPARKLES / EMBERS FX
==================================*/
/* Mythic "embers" */
.emberHost {
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 10000;
}
.ember {
  animation: emberFly var(--d, 900ms) ease-out var(--delay, 0ms) forwards;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd27a 55%, #ff8a00);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 180, 60, 0.9);
  left: 0;
  position: absolute;
  top: 0;
}
@keyframes emberFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x, 0), var(--y, 0)) scale(0.7);
  }
}

/* Sparkles */
.sparkleHost {
  height: 0;
  inset: 0 0 auto auto;
  pointer-events: none;
  position: fixed;
  width: 0;
  z-index: 10000;
}
.sparkleDot {
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    #e6f3ff 45%,
    rgba(43, 209, 255, 0.9)
  );
  border-radius: 50%;
  height: 8px;
  width: 8px;
}
.sparkleDot,
.sparkleTrail {
  left: 0;
  position: absolute;
  top: 0;
}
.sparkleTrail {
  background: linear-gradient(
    90deg,
    rgba(43, 209, 255, 0),
    rgba(255, 183, 3, 0.95)
  );
  border-radius: 2px;
  height: 2px;
  opacity: 0.9;
  transform-origin: 0 50%;
}
.sparkleSplash {
  animation: sparkleSplash 420ms ease forwards;
  background: radial-gradient(circle, #fff, #ffb703);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 183, 3, 0.9);
  height: 14px;
  pointer-events: none;
  position: fixed;
  width: 14px;
  z-index: 10000;
}
@keyframes sparkleSplash {
  0% {
    opacity: 1;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
.attrCard.flash {
  animation: cardFlash 650ms ease;
}
@keyframes cardFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 183, 3, 0);
  }
  30% {
    box-shadow: 0 0 0 10px rgba(255, 183, 3, 0.18);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 183, 3, 0);
  }
}

/* ================================
   ANIMATIONS (shared)
==================================*/
@keyframes hubThud {
  0% {
    transform: scale3d(1, 1, 1);
  }
  40% {
    transform: scale3d(1.06, 1.06, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes glow {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 183, 3, 0));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(255, 183, 3, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 183, 3, 0));
  }
}
@keyframes spin360 {
  to {
    transform: rotate(1turn);
  }
}
@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}
@keyframes popIn {
  0% {
    filter: saturate(1.4) brightness(1.2);
    transform: scale3d(0.92, 0.92, 1);
  }
  60% {
    transform: scale3d(1.02, 1.02, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes shimmerSweep {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}
@keyframes heatRipple {
  0% {
    filter: blur(0);
    transform: translateZ(0) scale(1);
  }
  50% {
    filter: blur(0.6px);
    transform: translateZ(0) scale(1.01);
  }
  100% {
    filter: blur(0);
    transform: translateZ(0) scale(1);
  }
}
@keyframes flamePulse {
  0%,
  100% {
    opacity: 0.55;
  }
  40% {
    opacity: 0.95;
  }
  70% {
    opacity: 0.75;
  }
}

/* Lock body scroll when a modal or drawer is open */
body.modal-open {
  overflow: hidden;
}

/* Make the controls row wrap and/or scroll on narrow screens */
.controlsRow {
  align-items: center;
  border-radius: 12px;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  height: 50px;
  justify-content: center;

  /* subtle backdrop so they’re readable over content when pinned */
  margin-top: 6px;
  overflow: visible;
  padding: 10px 8px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  position: sticky;
  z-index: 5;
}
#patchNotesPanel {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 15px;
  width: 80%;
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* Off-canvas sidebar defaults for mobile */
@media (max-width: 1900px) {
  #leaderboardPanel {
    min-height: min(70dvh, 520px);
  }

  /* Show hamburger on mobile */
  .hamburger {
    display: block;
  }

  /* Dock becomes an off-canvas drawer */
  .dock {
    background:
      linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.02)
        )
        padding-box,
      radial-gradient(
          120% 100% at 0% 0%,
          rgba(255, 95, 0, 0.18),
          rgba(0, 0, 0, 0) 65%
        )
        border-box;
    border: 1px solid var(--chrome-brd);
    bottom: 10px;
    left: 10px;
    max-width: 85vw;
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    transform: translateX(-110%);
    transition: transform 0.22s ease;
    width: min(85vw, 360px);
    z-index: 1101;
  }
  .dock.open {
    transform: translateX(0);
  }

  /* Main stage fills screen under the hamburger */

  /* Make small buttons a bit larger for touch */
  .btn.sa,
  .btn.sm {
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }

  /* Controls can horizontally scroll if needed */
}

/* Slightly larger touch targets on very small phones */
@media (max-width: 380px) {
  .btn {
    padding: 0.65rem 0.9rem;
  }
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* Optional: subtle drawer open animation for hamburger icon */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  top: 20px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Use the dynamic viewport unit so the URL bar doesn't steal space */

/* Make the left column: [title][wheel area grows/shrinks][controls pinned] */
.spinCol {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-rows: auto auto 1fr auto; /* <-- add the second 'auto' for the label */
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
  position: relative;
  row-gap: 1px;
  z-index: 2;
  -webkit-overflow-scrolling: touch;
}

/* Keep the controls visible without scrolling */

/* Speed button selected state */
.btn.is-active,
.btn[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.3);
  filter: brightness(1.18);
  outline: 1px solid rgba(255, 255, 255, 0.28);
  transform: none; /* cancel the tiny press shift */
}

/* Optional: give each variant a nice “on” look */
.btn.sa.is-active,
.btn.sa[aria-pressed="true"] {
  background: linear-gradient(180deg, #c8effe, #9be2fb);
  border-color: rgba(0, 0, 0, 0.08);
  color: #003344;
}
.btn.primary.is-active,
.btn.primary[aria-pressed="true"] {
  background: linear-gradient(180deg, #344662, #28374f);
}
.btn.success.is-active,
.btn.success[aria-pressed="true"] {
  background: linear-gradient(180deg, #2f5a49, #214033);
}
.infoCol {
  position: relative;
  z-index: 1;
}

/* --- Finish overlay: cross-device sizing & scroll --- */
/* === Finish Overlay Layout === */
#finishOverlay.overlay {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(6, 10, 16, 0.82);
  display: none;
  inset: 0;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top));
  position: fixed;
  z-index: 9999;
}
#finishOverlay.overlay.show {
  animation: overlayFadeIn 0.2s ease;
  display: flex;
}
#finishOverlay .overlayCard {
  background: linear-gradient(160deg, rgba(18, 24, 33, 0.96), rgba(12, 18, 28, 0.98));
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  color: var(--n-on-dark);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: min(92dvh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 28px 0px;
  position: relative;
  scroll-behavior: smooth;
  width: min(540px, 100%);
}
#finishOverlay .finishOverlay__subtitle {
  color: rgba(200, 210, 230, 0.82);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}
#finishOverlay .finishOverlay__subtitle--accent {
  color: var(--accent-2);
  font-weight: 600;
  margin-top: 8px;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(0, 212, 255, 0.35);
}
#finishOverlay .finishOverlay__stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#finishOverlay .finishOverlay__statCard {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 16px 12px;
  position: relative;
  z-index: 0;
  text-align: center;
}
#finishOverlay .finishOverlay__statCard > * {
  position: relative;
  z-index: 1;
}
#finishOverlay .finishOverlay__statCard::before {
  background: radial-gradient(circle at top center, rgba(255, 255, 255, 0.18), transparent 70%);
  content: "";
  height: 70%;
  left: -20%;
  opacity: 0.35;
  pointer-events: none;
  position: absolute;
  top: -28%;
  transform: translateY(-12%);
  width: 140%;
  z-index: 0;
}
#finishOverlay .finishOverlay__statLabel {
  color: rgba(154, 166, 191, 0.85);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#finishOverlay .finishOverlay__statValue {
  color: var(--n-on-dark);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}
#finishOverlay .finishOverlay__statCard--total {
  background: linear-gradient(150deg, rgba(13, 32, 45, 0.94), rgba(23, 54, 79, 0.78));
  border-color: color-mix(in oklab, var(--n-blue-hi) 62%, rgba(0, 0, 0, 0) 38%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(51, 214, 255, 0.24);
}
#finishOverlay .finishOverlay__statCard--total .finishOverlay__statLabel {
  color: color-mix(in oklab, var(--n-blue-hi) 55%, rgba(230, 238, 251, 0.8) 45%);
}
#finishOverlay .finishOverlay__statCard--total .finishOverlay__statValue {
  color: color-mix(in oklab, var(--n-blue-hi) 80%, white 15%);
}
#finishOverlay .finishOverlay__statCard--rank {
  background: linear-gradient(150deg, rgba(42, 15, 47, 0.92), rgba(73, 23, 58, 0.78));
  border-color: color-mix(in oklab, var(--ex-pink) 55%, rgba(0, 0, 0, 0) 45%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(255, 105, 201, 0.22);
}
#finishOverlay .finishOverlay__statCard--rank .finishOverlay__statLabel {
  color: color-mix(in oklab, var(--ex-pink) 50%, rgba(230, 238, 251, 0.8) 50%);
}
#finishOverlay .finishOverlay__statCard--rank .finishOverlay__statValue {
  color: color-mix(in oklab, var(--ex-pink) 75%, white 18%);
}
#finishOverlay .finishOverlay__statCard--earned {
  background: linear-gradient(150deg, rgba(46, 30, 6, 0.9), rgba(78, 44, 8, 0.8));
  border-color: color-mix(in oklab, var(--n-gold) 60%, rgba(0, 0, 0, 0) 40%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(255, 204, 0, 0.22);
}
#finishOverlay .finishOverlay__statCard--earned .finishOverlay__statLabel {
  color: color-mix(in oklab, var(--n-gold) 45%, rgba(230, 238, 251, 0.8) 55%);
}
#finishOverlay .finishOverlay__statCard--earned .finishOverlay__statValue {
  color: color-mix(in oklab, var(--n-gold) 82%, white 14%);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
#finishOverlay .finishOverlay__statCard--wallet {
  background: linear-gradient(150deg, rgba(16, 41, 21, 0.92), rgba(26, 72, 38, 0.78));
  border-color: color-mix(in oklab, var(--n-leaf) 58%, rgba(0, 0, 0, 0) 42%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(30, 169, 77, 0.24);
}
#finishOverlay .finishOverlay__statCard--wallet .finishOverlay__statLabel {
  color: color-mix(in oklab, var(--n-leaf) 50%, rgba(230, 238, 251, 0.8) 50%);
}
#finishOverlay .finishOverlay__statCard--wallet .finishOverlay__statValue {
  color: color-mix(in oklab, var(--n-leaf) 78%, white 17%);
}
#finishOverlay .finishOverlay__actions {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
#finishOverlay .finishOverlay__breakdownFooter {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
}
#finishOverlay .finishOverlay__breakdownAction {
  width: 100%;
}
#finishOverlay .finishOverlay__resetBar {
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.97), rgba(11, 15, 20, 0.97));
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  bottom: 0;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: -28px;
  margin-right: -28px;
  margin-bottom: 0px;
  margin-top: auto;
  padding: 12px 16px 12px;
  position: sticky;
  z-index: 10;
}
#finishOverlay .finishOverlay__reset {
  width: 100%;
}
#finishOverlay .finishOverlay__achievements {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}
#finishOverlay .finishOverlay__achievements[hidden] {
  display: none !important;
}
#finishOverlay .finishOverlay__achievementsHeader {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
#finishOverlay .finishOverlay__achievementsTitle {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
#finishOverlay .finishOverlay__achievementsHint {
  color: rgba(154, 166, 191, 0.8);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}
#finishOverlay .finishOverlay__achievementsList {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#finishOverlay .finishOverlay__achievement {
  align-items: center;
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.18), rgba(255, 95, 0, 0.18));
  border: 1px solid rgba(0, 212, 255, 0.24);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 8px 12px;
}
#finishOverlay .finishOverlay__achievementLabel {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}
#finishOverlay .finishOverlay__achievementDifficulty {
  color: rgba(154, 166, 191, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
#finishOverlay .finishOverlay__achievementsEmpty {
  color: rgba(154, 166, 191, 0.78);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
#finishOverlay .finishOverlay__hint {
  color: rgba(154, 166, 191, 0.85);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
}
#finishOverlay .finishOverlay__breakdown {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  padding: 14px 16px;
}
#finishOverlay .finishOverlay__breakdown[hidden] {
  display: none !important;
}
#finishOverlay .finishOverlay__breakdownSummary {
  color: var(--n-on-dark);
  cursor: var(--cursor-clickable, pointer);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}
#finishOverlay .finishOverlay__breakdownSummary::-webkit-details-marker {
  display: none;
}
#finishOverlay .finishOverlay__breakdown[open] .finishOverlay__breakdownSummary::after {
  content: '-';
  float: right;
}
#finishOverlay .finishOverlay__breakdownSummary::after {
  content: '+';
  float: right;
}
#finishOverlay .finishOverlay__breakdownHint {
  color: rgba(154, 166, 191, 0.78);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin: 6px 0 16px;
  text-transform: uppercase;
}
#finishOverlay .overlaySection {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  margin: 0 0 16px;
  padding: 14px 16px;
}
#finishOverlay .overlaySection h4 {
  color: rgba(200, 210, 230, 0.88);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
#finishOverlay .overlaySummaryList {
  display: grid;
  gap: 8px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
#finishOverlay .overlaySummaryList dt {
  color: rgba(154, 166, 191, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}
#finishOverlay .overlaySummaryList dd {
  color: var(--n-on-dark);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}
#finishOverlay .overlayBadgesList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
#finishOverlay .overlayBadge.profile-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.24);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  color: inherit;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 6px;
  padding: 6px 12px;
}
#finishOverlay .overlayBadge.profile-badge[data-badge-new="true"] {
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.45),
    0 0 20px rgba(0, 212, 255, 0.35);
}
#finishOverlay .overlayBadgeTag {
  background: linear-gradient(135deg, var(--n-orange), var(--n-blue));
  border-radius: 999px;
  color: #0b0f14;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  text-transform: uppercase;
}
#finishOverlay .overlayBadge.profile-badge::before {
  color: rgba(0, 212, 255, 0.75);
  content: '★';
  font-size: 0.75rem;
  opacity: 0.9;
}
@media (max-width: 760px) {
  #finishOverlay .finishOverlay__nameRow {
    grid-template-columns: 1fr;
  }
  #finishOverlay .finishOverlay__actions {
    grid-template-columns: 1fr;
  }
  #finishOverlay .finishOverlay__stats {
    grid-template-columns: 1fr;
  }
  #finishOverlay .overlaySummaryList {
    grid-template-columns: 1fr;
  }
  #finishOverlay .overlaySummaryList dd {
    text-align: left;
  }
}
@media (max-width: 1900px) {
  #finishOverlay.overlay {
    align-items: flex-end;
    padding: 0;
  }
  #finishOverlay .overlayCard {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: calc(min(100svh, 100lvh, 100dvh) - 12px);
    width: 100%;
  }
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes cardSlideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* buttons row: allow wrap on narrow screens */
#finishOverlay .btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* mobile: turn dialog into a bottom sheet, with comfy touch space */
@media (max-width: 1900px) {
  #finishOverlay.overlay {
    align-items: flex-end; /* bottom sheet presentation */
    padding: 0;
  }
  #finishOverlay .overlayCard {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: calc(min(100svh, 100lvh, 100dvh) - 12px);
    max-width: 100%;
    overflow: auto;
    padding: 24px 18px 0px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    width: 100%;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
  }
  #finishOverlay.overlay.show .overlayCard {
    transform: translateY(0);
  }
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* name row: let input expand properly (already partially present) */
#finishOverlay .overlayRow {
  align-items: center;
  display: flex;
  gap: 8px;
}
#finishOverlay .overlayRow input {
  flex: 1;
}

/* success state for the Submit button (already wired in JS) */

/* Patch notes + roadmap content */
.pnList {
  align-items: stretch;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  max-height: clamp(280px, 45vh, 520px);
  overflow-y: auto;
  padding: 0;
  width: 100%;
}
.pnList::-webkit-scrollbar {
  width: 6px;
}
.pnList::-webkit-scrollbar-thumb {
  background: rgba(121, 84, 36, 0.3);
  border-radius: 999px;
}
.pnItem {
  align-items: stretch;
  gap: 1.1rem;
}
.pnItem,
.pnItem .pnCard,
.pnItem details {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pnItem .pnCard,
.pnItem details {
  background: none;
  border-radius: 16px;
  gap: 0.85rem;
  overflow: hidden;
  position: relative;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
  z-index: 0;
}
.pnItem .pnCard:hover,
.pnItem details:hover {
  border-color: rgba(126, 84, 34, 0.6);
  transform: translateY(-1px);
}
.pnCard__header {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
  width: 100%;
}
.pnCard__label {
  align-items: center;
  background: rgba(16, 36, 52, 0.14);
  border: 1px solid rgba(52, 94, 120, 0.35);
  border-radius: 999px;
  color: #123049;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.3rem;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.6rem;
  text-transform: uppercase;
}
.pnItem summary {
  align-items: center;
  color: #3a1d0a;
  cursor: var(--cursor-clickable, pointer);
  display: flex;
  flex-wrap: wrap;
  font-family:
    IM Fell English,
    EB Garamond,
    Times New Roman,
    serif;
  font-size: 1.02rem;
  gap: 0.65rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  padding-right: 1.8rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* Roadmap tweaks get their own accent palette */
#roadmapPanel .pnList {
  gap: 1.2rem;
}
#roadmapPanel .pnItem .pnCard,
#roadmapPanel .pnItem details {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: rgba(52, 94, 120, 0.35);
}
#roadmapPanel .pnItem .pnCard:hover,
#roadmapPanel .pnItem details:hover {
  border-color: rgba(52, 94, 120, 0.55);
}
#roadmapPanel .pnItem details[open] {
  border-color: rgba(52, 94, 120, 0.7);
}
#roadmapPanel .pnItem summary {
  color: #123049;
}
#roadmapPanel .pnItem details[open] summary {
  color: #0d283a;
}
#roadmapPanel .pnItem summary::after {
  border-color: currentColor;
}
#roadmapPanel .pnBullets {
  color: #0c1f2e;
  gap: 0.4rem;
  padding-left: 1.1rem;
}
#roadmapPanel .pnBullets li::marker {
  color: #3a6b89;
}
.pnItem summary::marker {
  content: "";
  font-size: 0;
}
.pnItem summary::-webkit-details-marker {
  display: none;
}
.pnItem summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 0.55rem;
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.2s ease;
  width: 0.55rem;
}
.pnItem details[open] summary {
  color: #5b2c11;
}
.pnItem details[open] summary::after {
  transform: translateY(-50%) rotate(225deg);
}
.pnItem summary h3,
.pnItem summary p {
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #2d1405;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
.pnBullets {
  color: #34190b;
  display: flex;
  flex-direction: column;
  font-family:
    EB Garamond,
    IM Fell English,
    Times New Roman,
    serif;
  font-size: 0.98rem;
  gap: 0.45rem;
  line-height: 1.5;
  padding: 0 0 0 1.25rem;
  position: relative;
  width: 100%;
  z-index: 1;
}
.pnBullets,
.pnBullets li {
  margin: 0;
}
.pnBullets li::marker {
  color: #a06729;
}
#patchNotesPanel,
#roadmapPanel {
  width: 100%;
}
@media (max-width: 720px) {
  .pnList {
    max-height: none;
    padding-right: 0;
  }
  .pnItem details {
    padding: 1rem 1.1rem 1.15rem;
  }
  .pnItem summary {
    font-size: 0.98rem;
    padding-right: 1.4rem;
  }
  .pnItem summary::after {
    right: 0.2rem;
  }
  .pnBullets {
    font-size: 0.95rem;
    gap: 0.35rem;
    padding-left: 1rem;
  }
}

/* ================================
   ENCYCLOPEDIA MODAL SYSTEM
==================================*/

/* === Modal Base === */
#encyModal.modal::before {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background:
    radial-gradient(
      120% 120% at 50% 90%,
      rgba(0, 0, 0, 0.85),
      rgba(0, 0, 0, 0.55) 60%,
      rgba(0, 0, 0, 0.7)
    ),
    rgba(0, 0, 0, 0.65);
}

/* Stone tablet aesthetic variables */

/* === Modal Card (Tablet Slab) === */
#encyModal .modalCard {
  background:
    /* chiseled perimeter vignette */
    radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 50%),
    linear-gradient(180deg, var(--stone-top), var(--stone-mid) 40%, var(--stone-deep)),
    var(--noise);
  background-blend-mode: overlay, normal, normal;
  border-radius: 18px;
  border: 1px solid var(--rim);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 -60px 80px rgba(0, 0, 0, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.6);
  overflow: clip;
  height: 80vh !important;
}

/* Hairline bevel around the slab */
#encyModal .modalCard::after {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* === Close Button === */
#encyClose {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)),
    radial-gradient(
      160% 100% at 50% 0%,
      rgba(255, 255, 255, 0.08),
      transparent 60%
    );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #e7ded3;
  cursor: var(--cursor-clickable, pointer);
  height: 38px;
  position: absolute;
  right: 12px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  top: 12px;
  transition: filter 0.15s ease;
  width: 38px;
}
#encyClose:hover {
  filter: brightness(1.06);
}

/* === Header (Tablet Crest) === */
.encyHeader {
  align-items: flex-end;
  background:
    radial-gradient(circle, rgba(255, 140, 0, 0.5), transparent 70%),
    radial-gradient(circle, rgba(0, 123, 255, 0.15), transparent 80%),
    radial-gradient(circle, rgba(227, 29, 45, 0.2), transparent 90%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.01)
    ),
    var(--noise);
  background-blend-mode: screen, screen, screen, normal, normal;
  background-size: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 18px 16px 14px 16px;
  position: relative;
}

/* Tiny etched border under header */
.encyHeader::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.35;
  position: absolute;
  right: 0;
}

/* Header Text */
#encyTitle {
  color: var(--engrave-ink);
  font:
    700 1.35rem/1.15 IM Fell English,
    Georgia,
    serif;
  letter-spacing: 0.4px;
  margin: 2px 0;
  margin: 2px 0 2px 0;
  /* carving illusion: inner and outer ridges */
  text-shadow:
    0 1px 0 var(--engrave-highlight),
    0 -1px 0 var(--engrave-shadow),
    0 0 20px rgba(227, 29, 45, 0.15);
}
.encyCat {
  color: #cdbfa7;
  font: 600 0.8rem/1 system-ui;
  font-size: 0.8rem;
  letter-spacing: 0.18px;
  opacity: 0.9;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.encyRarity {
  font: 600 0.84rem/1 system-ui;
  opacity: 0.85;
}
.encySearch {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  font: inherit;
  min-width: 240px;
  padding: 0.55rem 0.7rem;
}

/* === Layout Body === */
.encyBody {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 240px) 1fr;
  max-height: min(78dvh, 1900px);
  min-height: 0;
}

/* === Left Navigation === */
.encyNav {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 12%), var(--smoke);
  border-right: 1px solid var(--rim);
  overflow: auto;
  padding: 12px 10px;
}
.encyNav .navGroupLabel {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 6px 8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.encyNav .navItem {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)),
    var(--smoke);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  color: #e9e0d3;
  cursor: var(--cursor-clickable, pointer);
  display: block;
  margin-bottom: 5px;
  padding: 0.5rem 0.6rem;
  transition: filter 0.15s ease;
}
.encyNav .navItem:hover {
  filter: brightness(1.08);
}
.encyNav .navItem.active {
  background:
    radial-gradient(
      160% 120% at 50% 0%,
      rgba(255, 140, 0, 0.25),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255, 140, 0, 0.25), rgba(255, 140, 0, 0.35));
  border-color: rgba(255, 140, 0, 0.55); /* matching border to the orange */
  box-shadow:
    0 0 18px rgba(255, 140, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #2b0004;
}

/* === Right Content Area === */
.encyContent {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 18px;
  position: relative;
}

/* Decorative fracture lines */
.encyContent::before {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.04), transparent 12%),
    linear-gradient(70deg, rgba(255, 255, 255, 0.025), transparent 16%);
  content: "";
  inset: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  position: absolute;
}

/* Section headings */
.encyContent h4 {
  color: #e8d9b8;
  letter-spacing: 0.3px;
  margin: 0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgba(227, 29, 45, 0.15);
}

/* === Content Components === */
.encyText {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25)),
    var(--smoke);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #e6eefb;
  color: #e9e0d3;
  font-family: Helvetica, sans-serif !important;
  line-height: 1.65;
  padding: 10px;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 -1px 0 rgba(255, 255, 255, 0.06);
  text-transform: none !important;
}
.encyImpact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#encyModal .encyImpact .chip,
#encyModal .encyImpact .impactChip,
.encyImpact .chip,
.encyImpact .impactChip {
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(255, 140, 0, 0.22),
    rgba(255, 140, 0, 0.14)
  );
  border: 1px solid rgba(255, 140, 0, 0.45);
  border-radius: 999px;
  box-shadow:
    inset 0 0 18px rgba(255, 140, 0, 0.25),
    0 0 18px rgba(255, 140, 0, 0.18);
  color: #ffe9e9;
  display: inline-flex;
  font-size: 0.86rem;
  gap: 6px;
  line-height: 1.1;
  padding: 0.22rem 0.6rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
#encyModal .encyImpact .impactChip.neg,
.encyImpact .impactChip.neg {
  background: linear-gradient(
    180deg,
    rgba(104, 0, 7, 0.45),
    rgba(104, 0, 7, 0.28)
  );
  border-color: rgba(255, 120, 140, 0.45);
}

/* Legacy chip support */
#encyModal .encyImpact .chip,
#lbDetail .lbBreakChips .chip {
  height: auto;
  padding: 2px 8px;
  position: static;
  width: auto;
}
.encyNotes {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1rem;
}
.encyMeta .encyText {
  color: #d8cfbf;
  opacity: 0.95;
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* === Encyclopedia Mobile Responsive === */
@media (max-width: 1900px) {
  .encyBody {
    grid-template-columns: 1fr;
  }
  .encyNav {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 12%),
      var(--smoke);
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.5);
    order: 2;
    padding-top: 8px;
  }
  .encyNavToggle {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.25)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1e7da;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .encyNav .navItem {
    transition: none;
  }
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* --- Bonus overlay --- */
/* === Bonus Overlay === */
#bonusOverlay.overlay {
  align-items: center;
  display: none;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 10000;
}
#bonusOverlay.overlay::before {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(5, 8, 12, 0.66);
  content: "";
  inset: 0;
  position: absolute;
}
#bonusOverlay.overlay.show {
  animation: overlayFadeIn 0.2s ease;
  display: flex;
}

/* Card Container */
#bonusOverlay .overlayCard {
  max-height: min(92dvh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  width: min(560px, 92vw);
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #141b28, #111722);
  border-radius: 14px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #e6eefb;
  display: grid;
  gap: 12px;
  padding: 16px;
}

/* Button Row */
#bonusOverlay .btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Bonus List */
#bonusOverlay .bonusList {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#bonusOverlay .bonusList li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 0.75rem 1rem;
}
#bonusOverlay .bonusList li .meta {
  color: var(--muted);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Pill chips for stat deltas inside LB detail (encyclopedia styles are in main section) */
#lbDetail .lbBreakChips .impactChip {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  display: inline-flex;
  line-height: 1.1;
  padding: 2px 8px;
  white-space: nowrap;
}
#lbDetail .lbBreakChips .impactChip.neg {
  background: rgba(255, 0, 0, 0.12);
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(255, 0, 0, 0.25);
  border-color: rgba(225, 29, 72, 0.28);
}

/* Defensive: if any old code still uses .chip in LB sections */
#lbDetail .lbBreakChips .chip {
  border-radius: 999px;
  display: inline-flex;
  height: auto;
  padding: 2px 8px;
  position: static;
  white-space: nowrap;
  width: auto;
}
#lbDetail .lbStatChartWrap {
  margin-bottom: 12px;
  position: relative;
}
#lbDetail .lbStatChart {
  background: linear-gradient(
    180deg,
    rgba(14, 24, 36, 0.86),
    rgba(6, 12, 20, 0.94)
  );
  border: 1px solid rgba(136, 208, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 44px rgba(3, 8, 16, 0.45);
  display: block;
  height: 190px;
  width: 100%;
}
#lbDetail .lbStatChart[data-empty="true"] {
  opacity: 0.4;
}
#lbDetail .lbStatChartFallback {
  color: rgba(220, 234, 255, 0.72);
  display: grid;
  font-size: 0.82rem;
  inset: 0;
  margin: 0;
  place-items: center;
  pointer-events: none;
  position: absolute;
  text-align: center;
}
#lbDetail .lbStatChartWrap > .lbStatChartFallback[hidden] {
  display: none;
}
#lbDetail .lbImpactChartWrap {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
#lbDetail .lbImpactChart {
  background: linear-gradient(
    180deg,
    rgba(10, 18, 28, 0.92),
    rgba(6, 12, 20, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 44px rgba(3, 8, 16, 0.45);
  display: block;
  height: 240px;
  width: 100%;
}
#lbDetail .lbImpactChart[data-empty="true"] {
  opacity: 0.45;
}
#lbDetail .lbImpactChartFallback {
  color: rgba(210, 228, 255, 0.7);
  font-size: 0.82rem;
  text-align: center;
}
#lbDetail .lbFunFacts {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
#lbDetail .lbFunFact {
  background: linear-gradient(
    180deg,
    rgba(14, 24, 36, 0.94),
    rgba(8, 14, 24, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(230, 240, 255, 0.88);
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 12px 14px;
}
#lbDetail .lbFunFallback {
  color: rgba(210, 228, 255, 0.7);
  font-size: 0.82rem;
  margin-top: 12px;
  text-align: center;
}
#lbDetail .lbRarityBars {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
#lbDetail .lbRaritySummary {
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(16, 26, 38, 0.92),
    rgba(8, 14, 24, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(225, 236, 255, 0.9);
  display: flex;
  font-size: 0.9rem;
  gap: 10px;
  padding: 12px 14px;
}
#lbDetail .lbRaritySummaryLabel {
  color: rgba(167, 214, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#lbDetail .lbRaritySummaryHint {
  color: rgba(190, 220, 255, 0.68);
  font-size: 0.72rem;
  letter-spacing: 0;
  margin-left: auto;
  text-transform: none;
}
#lbDetail .lbRaritySummaryValue {
  color: rgba(240, 248, 255, 0.96);
  font-variant-numeric: tabular-nums;
}
#lbDetail .lbRarityBar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: flex;
  min-height: 34px;
  overflow: hidden;
}
#lbDetail .lbRaritySegment {
  align-items: center;
  color: rgba(12, 18, 28, 0.86);
  display: flex;
  font-size: 0.78rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.05em;
  padding: 0 10px;
  position: relative;
  text-transform: uppercase;
}
#lbDetail .lbRaritySegment span {
  pointer-events: none;
  white-space: nowrap;
}
#lbDetail .lbRaritySegment[data-small="true"] span {
  display: none;
}
#lbDetail .lbRaritySegment.rarity-common {
  background: var(--rarity-common-bg);
  border-right: 1px solid var(--rarity-common-outline);
  color: var(--rarity-common-text);
}
#lbDetail .lbRaritySegment.rarity-uncommon {
  background: var(--rarity-uncommon-bg);
  border-right: 1px solid var(--rarity-uncommon-outline);
  color: var(--rarity-uncommon-text);
}
#lbDetail .lbRaritySegment.rarity-rare {
  background: var(--rarity-rare-bg);
  border-right: 1px solid var(--rarity-rare-outline);
  color: var(--rarity-rare-text);
}
#lbDetail .lbRaritySegment.rarity-epic {
  background: var(--rarity-epic-bg);
  border-right: 1px solid var(--rarity-epic-outline);
  color: var(--rarity-epic-text);
}
#lbDetail .lbRaritySegment.rarity-legendary {
  background: var(--rarity-legendary-bg);
  border-right: 1px solid var(--rarity-legendary-outline);
  color: var(--rarity-legendary-text);
}
#lbDetail .lbRaritySegment.rarity-mythic {
  background: rgba(248, 113, 113, 0.16);
  border-right: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--rarity-mythic-text);
}
#lbDetail .lbRaritySegment.rarity-ex {
  background: rgba(255, 115, 190, 0.18);
  border-right: 1px solid rgba(255, 115, 190, 0.35);
  color: #ffbde3;
}
#lbDetail .lbRarityLegend {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
#lbDetail .lbRarityLegendItem {
  align-items: center;
  color: rgba(215, 232, 255, 0.82);
  display: flex;
  font-size: 0.78rem;
  gap: 8px;
}
#lbDetail .lbRaritySwatch {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.06);
  height: 14px;
  width: 14px;
}
#lbDetail .lbRaritySwatch.rarity-common {
  background: var(--rarity-common-bg);
  border-color: var(--rarity-common-outline);
  box-shadow: 0 0 6px var(--rarity-common);
}
#lbDetail .lbRaritySwatch.rarity-uncommon {
  background: var(--rarity-uncommon-bg);
  border-color: var(--rarity-uncommon-outline);
  box-shadow: 0 0 8px var(--rarity-uncommon);
}
#lbDetail .lbRaritySwatch.rarity-rare {
  background: var(--rarity-rare-bg);
  border-color: var(--rarity-rare-outline);
  box-shadow: 0 0 8px var(--rarity-rare);
}
#lbDetail .lbRaritySwatch.rarity-epic {
  background: var(--rarity-epic-bg);
  border-color: var(--rarity-epic-outline);
  box-shadow: 0 0 10px var(--rarity-epic);
}
#lbDetail .lbRaritySwatch.rarity-legendary {
  background: var(--rarity-legendary-bg);
  border-color: var(--rarity-legendary-outline);
  box-shadow: 0 0 10px var(--rarity-legendary);
}
#lbDetail .lbRaritySwatch.rarity-mythic {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
  box-shadow: 0 0 12px var(--rarity-mythic);
}
#lbDetail .lbRaritySwatch.rarity-ex {
  background: rgba(255, 115, 190, 0.2);
  border-color: rgba(255, 115, 190, 0.4);
  box-shadow: 0 0 12px rgba(255, 115, 190, 0.4);
}
#lbDetail .lbRarityLabel {
  color: rgba(230, 240, 255, 0.84);
  flex: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#lbDetail .lbRarityCount {
  color: rgba(200, 220, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
#lbDetail .lbRarityFallback {
  color: rgba(210, 228, 255, 0.7);
  font-size: 0.82rem;
  text-align: center;
}
#lbDetail .lbPickGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
#lbDetail .lbPickCard {
  background: linear-gradient(
    180deg,
    rgba(18, 30, 44, 0.88),
    rgba(10, 14, 22, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 34px rgba(0, 0, 0, 0.38);
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 14px;
  position: relative;
}
#lbDetail .lbPickCard::before {
  background: radial-gradient(
    120% 120% at 0% 0%,
    rgba(72, 192, 255, 0.14),
    transparent 65%
  );
  border-radius: 16px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
#lbDetail .lbPickCardHead {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
#lbDetail .lbPickLabel {
  color: #f3f8ff;
  font-size: 0.94rem;
  font-weight: 600;
}
#lbDetail .lbPickMeta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
#lbDetail .lbPickRarity {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(230, 240, 255, 0.86);
  font-size: 0.72rem;
  padding: 2px 8px;
}
#lbDetail .lbPickOdds {
  color: rgba(210, 228, 255, 0.75);
  font-size: 0.74rem;
}
#lbDetail .lbPickChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}
#lbDetail .lbPickChip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: var(--cursor-clickable, pointer);
  font-size: 0.82rem;
  padding: 4px 10px;
  transition:
    transform 0.16s ease,
    box-shadow 0.18s ease;
}
#lbDetail .lbPickChip:hover {
  box-shadow: 0 10px 20px rgba(72, 192, 255, 0.2);
  transform: translateY(-1px);
}
#lbDetail .lbPickChip.rarity-common,
#lbDetail .lbPickRarity.rarity-common {
  background: var(--rarity-common-bg);
  border-color: var(--rarity-common-outline);
  color: var(--rarity-common-text);
}
#lbDetail .lbPickChip.rarity-uncommon,
#lbDetail .lbPickRarity.rarity-uncommon {
  background: var(--rarity-uncommon-bg);
  border-color: var(--rarity-uncommon-outline);
  box-shadow: 0 0 12px var(--rarity-uncommon-glow);
  color: var(--rarity-uncommon-text);
}
#lbDetail .lbPickChip.rarity-rare,
#lbDetail .lbPickRarity.rarity-rare {
  background: var(--rarity-rare-bg);
  border-color: var(--rarity-rare-outline);
  box-shadow: 0 0 12px var(--rarity-rare-glow);
  color: var(--rarity-rare-text);
}
#lbDetail .lbPickChip.rarity-epic,
#lbDetail .lbPickRarity.rarity-epic {
  background: var(--rarity-epic-bg);
  border-color: var(--rarity-epic-outline);
  box-shadow: 0 0 18px var(--rarity-epic-glow);
  color: var(--rarity-epic-text);
}
#lbDetail .lbPickChip.rarity-legendary,
#lbDetail .lbPickRarity.rarity-legendary {
  background: var(--rarity-legendary-bg);
  border-color: var(--rarity-legendary-outline);
  box-shadow: 0 0 18px var(--rarity-legendary-glow);
  color: var(--rarity-legendary-text);
}
#lbDetail .lbPickChip.rarity-mythic,
#lbDetail .lbPickRarity.rarity-mythic {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
  box-shadow: 0 0 22px var(--rarity-mythic-glow);
  color: var(--rarity-mythic-text);
}
#lbDetail .lbPickChip.rarity-ex,
#lbDetail .lbPickRarity.rarity-ex {
  background: rgba(255, 115, 190, 0.18);
  border-color: rgba(255, 115, 190, 0.55);
  box-shadow: 0 0 24px rgba(255, 115, 190, 0.28);
  color: #ffbde3;
}
#lbDetail .lbBreakdown {
  display: grid;
  gap: 12px;
}
#lbDetail .lbBreakCard {
  background: linear-gradient(
    180deg,
    rgba(12, 20, 32, 0.9),
    rgba(6, 10, 18, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.42);
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 14px 14px 16px;
  position: relative;
}
#lbDetail .lbBreakCard::before {
  background: radial-gradient(
    130% 120% at 12% -10%,
    rgba(120, 220, 255, 0.14),
    transparent 65%
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
#lbDetail .lbBreakCardHead {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
#lbDetail .lbBreakLabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(70%, 360px);
}
#lbDetail .lbBreakCat {
  color: #f5f9ff;
  font-size: 0.88rem;
  font-weight: 600;
}
#lbDetail .lbBreakPick {
  color: rgba(220, 232, 255, 0.78);
  font-size: 0.8rem;
}
#lbDetail .lbBreakScore {
  align-self: flex-start;
  background: rgba(72, 192, 255, 0.14);
  border: 1px solid rgba(72, 192, 255, 0.35);
  border-radius: 999px;
  color: rgba(180, 236, 255, 0.92);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 2px 10px;
}
#lbDetail .lbBreakScore.pos {
  background: rgba(54, 212, 162, 0.16);
  border-color: rgba(54, 212, 162, 0.35);
  color: rgba(172, 255, 220, 0.92);
}
#lbDetail .lbBreakScore.neg {
  background: rgba(255, 120, 140, 0.16);
  border-color: rgba(255, 140, 140, 0.35);
  color: rgba(255, 205, 205, 0.9);
}
#lbDetail .lbBreakMeter {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  position: relative;
}
#lbDetail .lbBreakMeterFill {
  background: linear-gradient(
    90deg,
    rgba(72, 192, 255, 0.65),
    rgba(72, 192, 255, 0)
  );
  inset: 0;
  position: absolute;
  transition: width 0.25s ease;
  width: 0;
}
#lbDetail .lbBreakMeterFill.pos {
  background: linear-gradient(
    90deg,
    rgba(54, 212, 162, 0.7),
    rgba(54, 212, 162, 0.04)
  );
}
#lbDetail .lbBreakMeterFill.neg {
  background: linear-gradient(
    90deg,
    rgba(255, 120, 140, 0.7),
    rgba(255, 120, 140, 0.08)
  );
}
#lbDetail .lbBreakChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}
#lbDetail .lbBreakCard .impactChip {
  background: rgba(72, 192, 255, 0.12);
  border: 1px solid rgba(72, 192, 255, 0.25);
  cursor: var(--cursor-default, auto);
  font-size: 0.78rem;
  padding: 3px 9px;
}
#lbDetail .lbBreakCard .impactChip.neg {
  background: rgba(255, 120, 140, 0.14);
  border-color: rgba(255, 120, 140, 0.35);
}
.overlayResetBtn {
  background-color: gray;
}
/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* --- Mobile: compact stats + compact attribute cards --- */
@media (max-width: 1900px) {
  .badge:not(#totalLevelCount) {
    margin-bottom: 2px;
    margin-top: 2px;
    padding: 3px 6px !important;
  }

  /* === Fix: keep attribute titles visible on mobile === */
  .card.attrCard .cardHead {
    align-items: flex-start;
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    min-width: 0;
  }
  .card.attrCard .cardHead .k {
    flex: 1 1 auto;
    font-size: clamp(0.6rem, 2vw, 0.75rem); /* Responsive font size */
    font-size: 0.75rem;
    line-height: 1.2;
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card.attrCard .cardHead .rarity {
    flex: 0 0 auto; /* keep rarity compact */
    font-size: 0.8rem;
    margin-left: 8px;
    margin-left: auto;
    opacity: 0.9;
    white-space: nowrap;
  }

  /* Mobile layout: compact stats at top, scrollable attributes below */

  /* Ultra-compact Stats panel for mobile viewport */

  /* Mobile stats - use CSS Grid for precise 5-column layout */

  /* Mobile rowStat optimized for 5-column grid */

  /* Explicit positioning for first 5 stats (top row) */

  /* Explicit positioning for next 5 stats (bottom row) */

  /* hide the long bits; show just icon + current value */

  /* Completely remove stat details from layout flow */

  /* show only the stat icon (hide the text label) */

  /* Attribute grid: smaller cards, tighter grid */
  .card.attrCard {
    border-radius: 12px;
    margin: 0;
    max-height: 150px; /* you have max-height: 200px in one mobile block */
    min-height: auto;
    min-height: 100px;
    padding: 10px 12px;
  }
  .card.attrCard .cardHead .chip {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    width: 28px;
  }

  /* Hide the long “picked value” line on mobile; go straight to buffs */
  .card.attrCard .meta {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    width: 100%; /* Explicit width constraint */
  }

  /* Buff chips as [icon] [amount] (hide label text on phones) */
  .impactChip {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    box-sizing: border-box !important;
    display: inline-flex;
    flex-shrink: 1;
    font-size: 0.65rem !important;
    gap: 6px;
    margin: 2px 4px 2px 0;
    max-width: 100% !important; /* Force containment */
    overflow-wrap: break-word !important;
    padding: 4px 8px;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .impactChip .lbl {
    display: none;
  }
  .impactChip .icon {
    font-size: 0.8rem;
    font-size: 1rem;
    line-height: 1.1;
    line-height: 1;
  }
  .rsSummaryToggle,
  .summary {
    display: none;
  }
  .infoCol#rsPanel {
    height: 450px;
  }
  .attrCard .cardBody {
    align-content: start;
    max-width: 100%; /* Ensure body doesn't exceed card width */
    overflow: hidden;
  }
  .attrCard .cardBody,
  .attrCard .meta,
  .impact,
  .impactChip,
  .pChip {
    overflow-wrap: break-word !important; /* not "anywhere" */
    white-space: normal !important;
    word-break: normal !important;
  }
  .impact {
    overflow-wrap: break-word !important;
  }
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
@media (max-width: 1900px) {
  /* Attribute card layout fix */ /* just [icon]+[amount] on phones */

  /* ===== Attributes: single wide column - rules moved to consolidated stats section ===== */

  /* Cards should size to content (no fixed height clamp) */

  /* Make sure text is horizontal and wraps at word boundaries, not every character */

  /* If you have a rule somewhere using "overflow-wrap:anywhere" on .impact,
   this line neutralizes it without editing that original rule. */

  /* Universal containment fix for impact chips at all resolutions */

  /* Ensure meta containers are properly constrained at all resolutions */

  /* Specific fix for desktop resolutions between 1900px-1920px */
  @media (min-width: 1900px) and (max-width: 1920px) {
    .attrCard .meta {
      display: flex !important;
      flex-wrap: wrap !important;
      overflow: hidden !important;
    }
    .attrCard .meta,
    .attrCard .meta .impactChip {
      box-sizing: border-box !important;
      max-width: 100% !important;
    }
    .attrCard .meta .impactChip {
      flex-shrink: 1 !important;
      overflow-wrap: break-word !important;
      white-space: normal !important;
      word-break: break-word !important;
    }
    .attrCard .cardBody {
      max-width: 100% !important;
      overflow: hidden !important;
    }
    .card.attrCard {
      contain: layout style !important;
      overflow: hidden !important;
    }
  }

  /* Additional fix for larger desktop resolutions */
  @media (min-width: 1921px) {
    .attrCard .meta {
      max-width: 100% !important;
      overflow: hidden !important;
    }
    .attrCard .meta .impactChip {
      max-width: 100% !important;
      white-space: normal !important;
      word-break: break-word !important;
    }
  }
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* Attribute card chip (desktop) */
.attrCard .icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 22px; /* centers single-character emoji perfectly */
}

/* ===== EX rarity: holo-foil + prismatic border ===== */
/* EX rim override */
.card[data-rarity="ex"]::before {
  background: linear-gradient(
    45deg,
    rgba(249, 168, 212, 0.2),
    rgba(147, 197, 253, 0.2),
    rgba(192, 132, 252, 0.2)
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(inherit - 2px);
  content: "";
  inset: 2px;
  pointer-events: none;
  position: absolute;
}

/* Replace the one-time sweep with a looping shimmer and a subtle aura */
/* EX shimmer + aura override */
.card[data-rarity="ex"]::after {
  animation: shimmerSweep 2.6s linear infinite;
  background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.22) 45%,
      rgba(255, 255, 255, 0) 60%
    )
    no-repeat;
  background-size: 220% 100%;
  border-radius: inherit;
  box-shadow:
    0 0 24px var(--ex-glow-inner),
    0 0 52px var(--ex-glow-outer);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.card[data-rarity="ex"] .card-face {
  animation: exCrystalBreath 5s ease-in-out infinite;
  background-blend-mode: screen;
  background-image:
    radial-gradient(
      120% 120% at 20% 10%,
      rgba(249, 168, 212, 0.22),
      transparent 45%
    ),
    radial-gradient(
      120% 120% at 80% 90%,
      rgba(56, 189, 248, 0.18),
      transparent 50%
    );
  isolation: isolate;
  position: relative;
  will-change: filter;
}
@keyframes exCrystalBreath {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.12) brightness(1.05);
  }
}

/* Optional: gentle breathing of the holo to read as a glow */
@keyframes exGlowPulse {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.15) brightness(1.08);
  }
}

/* =========================
   UX Polish: non-selectable UI
   Prevent text selection on interactive furniture so it feels like a game UI.
   ========================= */
.attrCard,
.badge,
.btn, 
.btnRow .btn, 
.card,
.chip,
.lbItem,
.navItem,.noSelect,
.sectionTitle,
.statsHeader,
.sumItem,
.tab,
/* Patch notes */
/* Scroll art assets: update these URLs to match your files */
:root {
  --dock-scroll-patch-closed-image: url("/patchNotesClosed.webp");
  --dock-scroll-roadmap-closed-image: url("/roadmapClosed.webp");
  --dock-scroll-closed-image: var(--dock-scroll-patch-closed-image);
  --dock-scroll-open-image: url("/scrollOpen.webp");
  --dock-scroll-padding-inline: 2.6rem;
  --dock-scroll-padding-block: 2.2rem;
  --dock-scroll-closed-height: 172px;
  --dock-scroll-summary-color: #2f1d0b;
  --dock-scroll-summary-padding-block: 1.6rem;
  --dock-scroll-summary-bg: rgba(255, 255, 255, 1);
  --dock-scroll-label-border: 3px;
  --dock-scroll-label-shadow: none;
  --dock-scroll-title-font:
    "IM Fell English SC", "Yu Mincho", "MS Mincho", serif;
  --dock-scroll-offset: calc(var(--dock-scroll-padding-inline) * 0.65);
}
#patchNotesPanel.pnPanel,
#roadmapPanel.pnPanel {
  box-shadow: none;
  justify-content: center;
}
#patchNotesPanel.pnPanel,
#roadmapPanel.pnPanel,
.dock-scroll {
  background: none;
  border: none;
  display: flex;
  padding: 0;
}
.dock-scroll {
  align-items: center;
  color: inherit;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  min-height: var(--dock-scroll-closed-height);
  position: relative;
  width: 90%;
}
.dock-scroll--patch {
  --dock-scroll-closed-image: var(--dock-scroll-patch-closed-image);
}
.dock-scroll--roadmap {
  --dock-scroll-closed-image: var(--dock-scroll-roadmap-closed-image);
}
.dock-scroll::before {
  background-image: var(--dock-scroll-closed-image);
  background-size: contain;
  border-radius: inherit;
  content: "";
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.34));
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition:
    background-image 0.2s ease-out,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dock-scroll::before,
.dock-scroll[open]::before {
  background-position: top;
  background-repeat: no-repeat;
}
.dock-scroll[open]::before {
  background-image: var(--dock-scroll-open-image);
  background-size: cover;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.4));
  transform: scaleY(1.01);
}
.dock-scroll:not([open]):hover::before,
.dock-scroll:not([open]):focus-within::before {
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.45));
  transform: translateY(-6px) scale(1.02);
}
.dock-scroll:not([open]) .dock-scroll__summary {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    text-shadow 0.35s ease;
}
.dock-scroll:not([open]) .dock-scroll__summary:hover,
.dock-scroll:not([open]) .dock-scroll__summary:focus-visible {
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(255, 231, 180, 0.6);
}
.dock-scroll:not([open]) .dock-scroll__summary:hover .dock-scroll__title,
.dock-scroll:not([open]) .dock-scroll__summary:focus-visible .dock-scroll__title {
  text-shadow:
    0 0 8px rgba(255, 230, 170, 0.75),
    0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .dock-scroll::before,
  .dock-scroll:not([open]) .dock-scroll__summary {
    transition: none;
  }
  .dock-scroll:not([open]):hover::before,
  .dock-scroll:not([open]):focus-within::before {
    transform: none;
  }
  .dock-scroll:not([open]) .dock-scroll__summary:hover,
  .dock-scroll:not([open]) .dock-scroll__summary:focus-visible {
    transform: none;
  }
}
.dock-scroll__summary {
  align-items: center;
  color: var(--dock-scroll-summary-color);
  cursor: var(--cursor-clickable, pointer);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  min-height: var(--dock-scroll-closed-height);
  padding: calc(var(--dock-scroll-summary-padding-block) * 0.75)
    var(--dock-scroll-padding-inline) var(--dock-scroll-summary-padding-block);
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  width: 100%;
  z-index: 1;
}
.dock-scroll__summary::after {
  content: none;
}
.dock-scroll__summary::-webkit-details-marker {
  display: none;
}
.dock-scroll__summary::marker {
  content: "";
}
.dock-scroll[open] .dock-scroll__summary {
  gap: 0.5rem;
  min-height: auto;
  padding-bottom: calc(var(--dock-scroll-summary-padding-block) * 0.6);
  padding-top: calc(var(--dock-scroll-summary-padding-block) * 0.5);
}
.dock-scroll__close {
  align-items: center;
  background: rgba(46, 30, 18, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  color: #fff;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(var(--dock-scroll-summary-padding-block) * 0.35);
  transform: translate(-50%, -60%);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  user-select: none;
  width: 30px;
  z-index: 2;
}
.dock-scroll__close::selection {
  background: transparent;
}
.dock-scroll[open] .dock-scroll__close {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dock-scroll[open] .dock-scroll__close:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}
.dock-scroll__body {
  align-self: stretch;
  box-sizing: border-box;
  color: #2d1405;
  display: grid;
  font-family:
    EB Garamond,
    IM Fell English,
    Times New Roman,
    serif;
  gap: 1.1rem;
  margin-bottom: 5%;
  margin-left: var(--dock-scroll-offset);
  margin-right: var(--dock-scroll-offset);
  margin-top: 10%;
  max-width: 100%;
  position: relative;
  width: max(0px, calc(100% - var(--dock-scroll-offset) * 2));
  z-index: 1;
}
/* Keep the open patch notes panel scrollable instead of endlessly growing */
#patchNotesPanel .dock-scroll[open] .dock-scroll__body {
  max-height: min(70dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dock-scroll__summary:focus-visible {
  outline: 2px solid rgba(255, 214, 154, 0.8);
  outline-offset: 4px;
}
.dock-scroll__body::after,
.dock-scroll__body::before {
  content: "";
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
}
.dock-scroll:not([open]) .dock-scroll__body {
  padding-bottom: 0;
}
.bar,
.barWrap,
.dropdown,
.footer,
.modalCard .title,
.modalHeader,
.pill,
.stat,
.tile,
.tooltip {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Keyboard focus visibility for interactive cards and list items */
.btn:focus-visible,
.card:focus-visible,
.lbItem:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Respect reduced motion users across flashy effects */
@media (prefers-reduced-motion: reduce) {
  /* Disable shimmer/breathing/idle animations */
  /* Disable animated bars */
  #totalLevelCount.celebrate::before,
  #totalLevelCount.pulsing,
  .card[data-rarity="ex"],
  .card[data-rarity="ex"]::after,
  .card[data-rarity="mythic"],
  .card[data-rarity="mythic"].idle,
  .card[data-rarity="mythic"]::after,
  .rowStat.gain .bar {
    animation: none !important;
  }
}

/* Prevent accidental image/icon dragging */
img,
svg {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

/* Remove the tap highlight on mobile for UI chrome */
*:where(
    .card,
    .attrCard,
    .btn,
    .chip,
    .badge,
    .lbItem,
    .navItem,
    .tab,
    .sumItem
  )
  a {
  -webkit-tap-highlight-color: transparent;
}

/* Enhanced iOS touch interaction support */
.attrCard,
.btn,
.card,
.clickable,
.lbItem,
.navItem,
[role="button"],
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none; /* Disable callout on iOS Safari */
}

/* Scrollable areas need different touch handling */
#statsGrid,
.dock,
.encyContent,
.infoCol,
.lbList,
.scrollable {
  touch-action: pan-y pan-x;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
}

/* Prevent double-tap zoom on interactive elements */
.wheelWrap,
canvas#wheel {
  touch-action: none; /* Prevent zoom and pan on wheel */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hide selection highlight inside interactive UI, as an extra guard */
.attrCard::selection,
.badge::selection,
.btn::selection,
.card::selection,
.chip::selection,
.lbItem::selection,
.navItem::selection,
.sectionTitle::selection,
.statsHeader::selection,
.sumItem::selection,
.tab::selection {
  background: transparent;
  color: inherit;
}

/* Common rarity */
.common {
  color: #6d6d6d;
}

/* Uncommon rarity */
.uncommon {
  color: #1eb800;
}

/* Rare rarity */
.rare {
  color: #2980b9;
}

/* Epic rarity */
.epic {
  color: #8e44ad;
}

/* Legendary rarity */
.legendary {
  color: #f39c12;
}

/* Mythic rarity */
.mythic {
  color: #e74c3c;
}

/* EX rarity */
#donate-button {
  margin-left: 10px;
  max-height: 40px;
  max-width: 80px;
}
.colorfulDonate,
.ninjaTitle {
  background: linear-gradient(90deg, #ff5f00, #ffcc00);
  background-clip: text;
  color: transparent;
  letter-spacing: 0.1rem;
}
.ninjaTitle {
  font-size: 22px;
}
#attrTitle,
#statsTitle {
  background: linear-gradient(90deg, #ff5f00, #ffcc00);
  background-clip: text;
  color: transparent;
  letter-spacing: 0.1rem;
}
#lbHeading {
  animation: chakraPulse 3.5s ease-in-out infinite;
  background: linear-gradient(
    120deg,
    rgba(255, 196, 102, 0.2),
    rgba(255, 119, 71, 0.26)
  );
  background:
    radial-gradient(
      120% 140% at 85% 15%,
      rgba(194, 200, 204, 0.35) 0%,
      rgba(194, 200, 204, 0) 50%
    ),
    linear-gradient(120deg, rgba(245, 130, 32, 0.92), rgba(30, 58, 138, 0.92)) !important;
  border: 1px solid rgba(255, 196, 102, 0.45);
  border: 2px solid var(--nar-orange) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 28px rgba(5, 6, 10, 0.45);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 10px var(--nar-chakra-amber),
    0 0 14px var(--nar-chakra-blue) !important;
  color: #ffe8b5;
  color: var(--nar-text-color) !important; /* was var(--nar-paper) */
  inset: 0 !important;
  isolation: isolate;
  letter-spacing: 0.1rem;
  padding: 5px !important;
  position: relative;
  width: 100%;
  width: 95%;
}
.h .ninjaTitle .versionNum {
  font-size: 13px;
}

/* 1) Reduce excessive space between inlineRollNow and wheel */
.inlineRollNow {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-size: 24px;
  height: auto !important;
  justify-content: center;
  line-height: 1.1;
  margin: 0;
  margin-bottom: 2% !important; /* you had 'margin-bottom 0' */
  margin-top: 10% !important;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

/* 3) Guardrail: wheel area keeps tight spacing from its header */
#spinCol .wheelWrap {
  margin-top: 6px;
}

/* StatsGrid scroll behavior */
#statsGrid .attrCard {
  max-height: 250px;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Let the head be a clean flex row */
.card .cardHead {
  align-items: center;
  display: flex;
  gap: 8px;
  position: relative; /* allows z-index to do something */
}

/* Make the title actually own space in the row */

/* Chips shouldn’t bully the title */
.card .cardHead .chip,
.card .cardHead .rarity {
  flex: 0 0 auto;
  z-index: 0;
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* Removed legacy JS-driven .mobile attribute card layout (replaced by unified structure). */

/* =============================================
   RESPONSIVE BREAKPOINT MAP (SCSS-like doc)
   -- XS / Mobile:        0   - 480px (stacked, narrow chips)
   -- SM / Handset+ :   481   - 768px (minor spacing adjustments)
   -- MD / Tablet:      769   - 1024px (single column attr layout)
   -- LG / Compact DT: 1025   - 1600px (two-column pill + chips)
   -- XL / Wide DT:    1601   - 1900px (wider but retain compact attr grid)
   -- UHD / Ultra:     1901px + (full spacious desktop)
   NOTE: Actual enforced queries below consolidate some ranges.
============================================= */

/* Compact + Wide Desktop unified attr card layout (was :not(.mobile)) */
@media (min-width: 1900px) {
  .card.attrCard .cardBody {
    align-items: start;
    column-gap: 10px;
    display: grid;
  }
  .card.attrCard .pill {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  .card.attrCard .meta {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    max-width: 100%;
    width: 100%; /* Ensure it takes full width */
  }
  .card.attrCard .impactChip {
    flex: 0 1 auto;
    max-width: 100%; /* Prevent individual chips from exceeding container */
    min-width: 0;
    white-space: nowrap;
  }
  .card.attrCard .cardHead {
    align-items: center;
    column-gap: 8px; /* Give the icon and title breathing room on desktop */
    display: grid;
    grid-template-columns: 24px 1fr minmax(0, auto);
  }
  .card.attrCard .cardHead .k {
    font-size: 0.7rem !important; /* Even smaller for mobile */
    max-width: 120px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .card.attrCard .cardHead .rarity {
    font-size: 0.6rem; /* Smaller rarity text */
    justify-self: end;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =============================================
   MOBILE ATTR CARD TWO-COLUMN LAYOUT (≤1024px)
   HIGH PRIORITY: Override all conflicting 1900px rules
============================================= */
@media (max-width: 1900px) {
  /* MOBILE HEADER: Icon + Label + Rarity (3-column grid) */
  #statsGrid .card.attrCard .cardHead {
    align-items: center !important;
    column-gap: 8px !important; /* keep mobile header spacing consistent */
    display: grid !important;
    grid-template-columns: 28px 1fr max-content !important;
    margin-bottom: 6px !important;
  }
  #statsGrid .card.attrCard .cardHead .chip {
    font-size: 16px !important;
    height: 28px !important;
    width: 28px !important;
  }
  #statsGrid .card.attrCard .cardHead .k {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #statsGrid .card.attrCard .cardHead .rarity {
    justify-self: end !important;
    margin-left: auto !important;
  }

  /* MOBILE BODY: Pill + Chips (2-column grid) */
  #statsGrid .card.attrCard .cardBody {
    align-items: center !important;
    column-gap: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(var(--pill-min, 80px), 1fr) max-content !important;
  }
  #statsGrid .card.attrCard .pill {
    flex: 0 1 auto !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    height: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    width: auto !important;
  }
  #statsGrid .card.attrCard .meta {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    max-width: 100% !important;
    width: auto !important;
  }
  #statsGrid .card.attrCard .meta .rarity {
    display: none !important; /* Hide rarity from meta on mobile */
  }
  #statsGrid .card.attrCard .meta .impactChip {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
}

/* Ultra-small devices: stack chips under pill when width very tight */
@media (max-width: 430px) {
  .card.attrCard .cardBody {
    grid-template-columns: 1fr; /* stack */
  }
  .card.attrCard .meta {
    justify-content: flex-start;
    max-width: 100%;
  }

  /* Extra small font for very small screens */
  .card.attrCard .cardHead .k {
    font-size: 0.65rem !important;
    max-width: 100px !important; /* Even more aggressive width limit for tiny screens */
  }
}
.rarityLabels,
.rarityPercentages {
  text-align: center;
}

/* === Mobile mythic glow fix === */
@media (max-width: 1900px) {
  /* 1) Let mythic cards actually paint outside their box */
  .card.attrCard[data-rarity="mythic"] {
    overflow: visible;
  }

  /* 2) Give the glow some room inside the box too */
  .card.attrCard[data-rarity="mythic"] .cardBody {
    padding-bottom: 16px; /* room for the glow layer */
    position: relative;
  }

  /* 3) Keep the pseudo-element inside the card so even if overflow were hidden, it still shows */
  .card.attrCard[data-rarity="mythic"] .cardBody::before {
    bottom: 0;
    height: 44%;
    /* a touch taller to compensate */
    left: -4px;
    right: -4px;
  }

  /* 4) Do NOT clamp card height on mobile; mythic needs vertical breathing room */
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
#bmc-wbtn {
  margin: 8px;
  max-height: 50px;
  max-width: 50px;
}

/* 1) Define 4 rows: title / current-spin / wheel / controls */

/* 2) Make the inline header truly centered and full-width */

/* 3) Kill accidental extra spacing (and fix the missing colon) */
@media (max-width: 640px) {
  .inlineRollNow,
  .inlineTitle {
    padding-inline: 4px;
  }
  .inlineRollNow .rollTitle,
  .inlineTitle .rollTitle {
    flex: 1 1 100%;
    width: 100%;
  }
  .rollTitle {
    font-size: 16px;
    letter-spacing: 0.04rem;
    padding: 0.24rem 0.52rem;
  }
}

/* Optional: keep the wheel tight to the label */

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
@media (max-width: 1900px) {
  .inlineRollNow,
  .rollTitle {
    margin-top: 0 !important;
  }
}
#speedBtns button[data-speed="2"],
#speedBtns button[data-speed="3"],
#stopBtn {
  display: none;
}

.wheel-controls-settings {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.wheel-controls-settings__menu {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  box-shadow: 0 18px 34px rgba(8, 15, 29, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
  padding: 12px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 48;
}

.wheel-controls-settings__menu[hidden] {
  display: none;
}

.wheel-controls-settings__menu .btn {
  justify-content: flex-start;
  width: 100%;
}

#chatModalBtn,
#wheelSettingsToggle {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: inline-flex;
  font-size: 1.15rem;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

#chatModalBtn {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #bfdbfe;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#chatModalBtn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(147, 197, 253, 0.65);
  transform: translateY(-1px);
}

#chatModalBtn:focus-visible {
  outline: 2px solid rgba(191, 219, 254, 0.7);
  outline-offset: 3px;
}

#wheelSettingsToggle {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.95);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#wheelSettingsToggle:hover {
  background: rgba(148, 163, 184, 0.22);
  border-color: rgba(203, 213, 225, 0.55);
  transform: translateY(-1px);
}

#wheelSettingsToggle:focus-visible {
  outline: 2px solid rgba(203, 213, 225, 0.7);
  outline-offset: 3px;
}

#chatModalBtn {
  display: none;
}

@media (max-width: 1900px) {
  #chatModalBtn {
    display: inline-flex;
  }
  .wheel-controls-settings__menu {
    bottom: auto;
    top: calc(100% + 8px);
  }
}

/* === Mobile: keep controls in one line without pushing layout === */
@media (max-width: 1900px) {
  /* Let the wheel column shrink instead of being pushed wider by its children */
  .spinCol {
    display: flex;
    flex-direction: column;
    isolation: auto;
    max-height: 100% !important;
    min-width: 0;
    overflow: visible;
  }

  /* Make sure children don't stretch if some global .btn styles set flex-grow */
  #wheelControls .btn,
  #wheelControls .btnGroup {
    flex: 0 0 auto;
  }

  /* Optional: keep the speed button cluster from splitting on wrap */
  #wheelControls .btnGroup {
    display: inline-flex;
    gap: 4px;
  }

  /* Belt-and-suspenders center for the wheel */
  #wheel,
  #wheelWrap {
    display: block;
    margin-inline: auto;
  }
  #wheelWrap {
    margin-bottom: -26px;
  }

  /* Make the controls a horizontal scroller that doesn't affect page width */

  /* Critical: children don’t get to force a wider row */
  .controlsRow > * {
    flex: 0 0 auto;
    margin: 0 !important;
    scroll-snap-align: start; /* optional: snaps each button into view */
  }
  #status {
    display: none !important;
    visibility: hidden !important;
  }
  #stepLabel {
    align-items: center !important;
    background: none !important;
    border: 0px !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 0px !important;
    margin-left: 18px !important;
    margin-right: 10px !important;
    margin-top: 0px !important;
    max-height: 15px !important;
    padding: 0px !important;
  }
  .progress {
    margin-right: 18px !important;
  }
  #bmc-wbtn {
    left: 8px;
    margin: 8px;
    max-height: 30px;
    max-height: 40px;
    max-width: 30px;
    max-width: 40px;
    position: fixed;
    top: 8px;
    z-index: 0 !important;
    z-index: 2 !important;
  }
  #bmc-wbtn img {
    max-height: 30px;
    max-width: 30px;
  }
  donate-button-container {
    left: 20px;
    position: fixed;
    top: 20px;
    z-index: 0 !important;
  }
}

/* Mobile: make the controls truly centered */
@media (max-width: 1900px) {
  /* Prevent any child margin from shifting the visual center */

  /* If you still need horizontal scrolling, let it scroll (not clip) */
  .controlsRow::-webkit-scrollbar {
    display: none;
  }
}
/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
.rowStat .valWrap .deltaBadge {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  font-size: 12px;
  padding: 2px;
}

/* This targets all scrollable elements */
*::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, and Opera */
}
/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* === Leaderboard Detail: Mobile sheet layout === */
@media (max-width: 1900px) {
  #lbDetail .modalCard {
    border-radius: 16px 16px 0 0;
    display: grid;
    gap: 8px;
    grid-template-rows: auto auto auto 1fr; /* header rows + scroller */
    height: 95dvh;
    max-height: 95dvh;
    max-width: 100vw;
    padding: 6px;
    width: 100vw;
  }

  /* Sticky header area: Close button + title + total */
  #lbDetail .modalCard h3 {
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
  }
  #lbDetail .total {
    font-size: 0.95rem;
    opacity: 0.9;
  }

  /* Keep the X easy to hit and pinned */
  #lbDetailClose {
    align-self: start;
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    margin-left: auto;
    padding: 6px;
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* Make inner content a single scroll area */
  .lbDetailContent {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 12px; /* breathing room above iOS nav bar */
  }

  /* Stats grid: 2 columns on phones, smaller gaps */
  .lbStatGrid {
    gap: 10px;
  }
  .lbStatRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .lbDetailHeader {
    align-items: flex-start;
    flex-direction: column;
  }
  .lbDetailScore {
    align-self: stretch;
  }
  .lbDetailSection {
    padding: 14px;
  }
  .lbSectionHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  #lbDetail .lbStatChart {
    height: 170px;
  }
  #lbDetail .lbPickGrid {
    gap: 10px;
    grid-template-columns: 1fr;
  }
  #lbDetail .lbPickCard {
    padding: 12px;
  }
  #lbDetail .lbPickChip {
    font-size: 0.8rem;
  }
  #lbDetail .lbBreakdown {
    gap: 10px;
  }
  #lbDetail .lbBreakCard {
    padding: 12px;
  }
  #lbDetail .lbBreakCardHead {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  #lbDetail .lbBreakLabel {
    max-width: 100%;
  }
  #lbDetail .lbBreakScore {
    align-self: flex-start;
  }
  #lbDetail .lbBreakChips {
    margin-top: 4px;
  }
}

/* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* Prevent scroll chaining while overlays are open */
#bonusOverlay.overlay,
#finishOverlay.overlay {
  overscroll-behavior: contain;
}

/* Reduce touch delays on controls */
.btn,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Removed empty universal ruleset */

/* Global nuclear option */
*,
body,
html {
  text-transform: uppercase;
}
.nocaps {
  text-transform: none;
}
selector {
  text-transform: uppercase;
}
.body {
  background-image: url("/akatsuki.jpg");
  background-repeat: repeat; /* Prevent tiling */
}

/* ================================
   NARUTO BUTTON SKIN
   No markup changes. Targets your existing classes and IDs.
==================================*/

/* Palette */

/* Base polish stays intact but nicer focus */
.btn:focus-visible {
  box-shadow:
    0 0 0 4px rgba(255, 204, 0, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  outline: 2px solid var(--n-gold);
  outline-offset: 2px;
}

/* Map your existing variants to Naruto colors */

/* success → leaf green */
.btn.success:hover {
  filter: brightness(1.06);
}
.btn.success:active {
  transform: translateY(1px) scale(0.995);
}

/* danger → akatsuki red */
.btn.danger:hover {
  filter: brightness(1.05);
}
.btn.danger:active {
  transform: translateY(1px) scale(0.995);
}

/* primary → rasengan blue */
.btn.primary:hover {
  filter: brightness(1.06);
}
.btn.primary:active {
  transform: translateY(1px) scale(0.995);
}

/* .sa small alt → hokage gold */

/* Base .btn for neutral actions keeps your dark chrome,
   but we’ll add orange outlines for certain controls via IDs below */

/* ================================
   Per-button targeting by ID
   These match your exact HTML without changing classes.
==================================*/

/* Start is your big CTA. Make it Naruto orange even though it’s .success */
#randomAllBtn.btn.success {
  background: linear-gradient(180deg, var(--n-orange-hi), var(--n-orange));
  border: 1px solid color-mix(in oklab, var(--n-orange) 70%, black 6%);
  box-shadow:
    0 10px 24px rgba(191, 63, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--n-on-warm);
}

/* Stop is already .danger, inherits akatsuki red */

/* Speed buttons are .btn.sm with no variant. Give them orange outline style */
#speedBtns .btn.sm {
  background: linear-gradient(180deg, #1c2736, #131c29);
  border: 1px solid color-mix(in oklab, var(--n-orange) 60%, white 0%);
  color: color-mix(in oklab, var(--n-orange) 86%, white 8%);
}
#speedBtns .btn.sm[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.3);
  filter: brightness(1.14);
  outline: 1px solid rgba(255, 255, 255, 0.28);
}

/* Prev and Next feel navigational. Use Hokage gold so they read distinct from Reset */
#nextBtn.btn,
#prevBtn.btn {
  background: linear-gradient(180deg, #ffe066, var(--n-gold));
  border: 1px solid color-mix(in oklab, var(--n-gold) 60%, black 8%);
  box-shadow:
    0 10px 22px rgba(180, 140, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--n-on-warm);
}

/* Reset is already .btn with no variant in your HTML.
   Make it destructive without changing its class */
#resetBtn.btn {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--n-red) 85%, white 6%),
    var(--n-red)
  );
  border: 1px solid color-mix(in oklab, var(--n-red) 70%, black 10%);
  box-shadow:
    0 10px 24px rgba(160, 0, 40, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffecef;
}

/* Mute as ghost orange so it doesn’t scream */
#muteBtn.btn {
  background: transparent;
  border: 1px dashed color-mix(in oklab, var(--n-orange) 60%, white 0%);
  color: var(--n-orange);
}
#muteBtn.btn:hover {
  background: rgba(255, 95, 0, 0.1);
  border-style: solid;
}

/* Overlay open button is .sa. Gold is fine. If you prefer rasengan, uncomment below */
/*
#overlayOpenBtn.btn.sa {
  color: var(--n-on-dark);
  border: 1px solid color-mix(in oklab, var(--n-blue) 80%, white 0%);
  background: linear-gradient(180deg, var(--n-blue-hi), var(--n-blue));
}
*/

/* Finish overlay buttons */
#overlaySheetBtn.btn.sm {
  background: linear-gradient(180deg, var(--n-blue-hi), var(--n-blue));
  border: 1px solid color-mix(in oklab, var(--n-blue) 80%, white 0%);
  /* download sheet */
  color: var(--n-on-dark);
}
#overlaySubmitBtn.btn.sm.primary {
  background: linear-gradient(180deg, var(--n-orange-hi), var(--n-orange));
  border: 1px solid color-mix(in oklab, var(--n-orange) 70%, black 6%);
  /* submit to leaderboard */
  color: var(--n-on-warm);
}
#overlayResetBtn.btn.danger {
  background: linear-gradient(180deg, #4b2a2a, #2a1b1b);
  border-color: rgba(255, 120, 120, 0.35);
}

/* Bonus overlay */
#startBonusBtn.btn.sm.primary {
  background: linear-gradient(180deg, var(--n-blue-hi), var(--n-blue));
  border: 1px solid color-mix(in oklab, var(--n-blue) 80%, white 0%);
  color: var(--n-on-dark);
}

/* Dock toggle in case it shows on mobile */
#dockToggleBtn.btn {
  background: linear-gradient(180deg, #1c2736, #131c29);
  border: 1px solid color-mix(in oklab, var(--n-orange) 60%, white 0%);
  color: color-mix(in oklab, var(--n-orange) 86%, white 8%);
}

/* Pressed and hover affordances for any of the patched buttons */
#dockToggleBtn.btn:hover,
#nextBtn.btn:hover,
#overlaySheetBtn.btn.sm:hover,
#overlaySubmitBtn.btn.sm.primary:hover,
#prevBtn.btn:hover,
#resetBtn.btn:hover,
#startBonusBtn.btn.sm.primary:hover {
  filter: brightness(1.06);
}
#dockToggleBtn.btn:active,
#nextBtn.btn:active,
#overlaySheetBtn.btn.sm:active,
#overlaySubmitBtn.btn.sm.primary:active,
#prevBtn.btn:active,
#resetBtn.btn:active,
#startBonusBtn.btn.sm.primary:active {
  transform: translateY(1px) scale(0.995);
}

/* Respect high contrast users */
@media (prefers-contrast: more) {
  #randomAllBtn.btn.success {
    background: var(--n-orange) !important;
  }
  #nextBtn.btn,
  #prevBtn.btn {
    background: var(--n-gold) !important;
  }
  #resetBtn.btn {
    background: var(--n-red) !important;
  }
  #overlaySheetBtn.btn.sm,
  #startBonusBtn.btn.sm.primary {
    background: var(--n-blue) !important;
  }
}

/* ================================
   NARUTO DOCK + PANELS SKIN
   No markup changes. Works with your HTML as-is.
==================================*/

/* Palette reuse */

/* ================================
   Dock shell
==================================*/

/* Header in dock */

/* Generic panel inside dock */

/* Section titles inside these panels */
.lbPanel h3,
.pnPanel h3 {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, #ffcc00, #ff5f00, #00c8ff);
  color: transparent;
  letter-spacing: 0.1rem;
}

/* ================================
   Leaderboard list items
==================================*/

/* Name + score */

/* Empty state */
#lbEmpty {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #c8d5f0;
  opacity: 0.9;
  padding: 0.6rem 0.8rem;
}

/* ================================
   Leaderboard detail modal (#lbDetail)
==================================*/
#lbDetail .modalCard::before {
  background:
    radial-gradient(
      160% 120% at 100% -10%,
      rgba(0, 200, 255, 0.22),
      transparent 65%
    ),
    radial-gradient(
      150% 140% at -20% 110%,
      rgba(255, 95, 0, 0.18),
      transparent 70%
    );
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
#lbDetail .modalCard h3 {
  margin: 0;
}
#lbDetail h3 {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, #ffcc00, #ff5f00);
  color: transparent;
}
#lbDetail .total {
  color: color-mix(in oklab, var(--n-blue) 86%, white 8%);
}
#lbDetailClose:focus-visible,
#lbDetailClose:hover {
  background: rgba(0, 200, 255, 0.25);
  border-color: rgba(0, 200, 255, 0.45);
  color: #fff;
}
.lbDetailHeader {
  align-items: stretch;
  background: linear-gradient(
    140deg,
    rgba(35, 52, 78, 0.82),
    rgba(18, 26, 40, 0.9)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(8px, 1.2vw, 11px);
  position: relative;
}
.lbDetailHeader::after {
  background: radial-gradient(
    120% 140% at 0% 0%,
    rgba(0, 200, 255, 0.18),
    transparent 70%
  );
  content: "";
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
}
.lbDetailTitle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(440px, 68%);
  position: relative;
}
#lbDetailName {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: 0.01em;
}
.lbDetailCreator {
  color: rgba(222, 234, 255, 0.88);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: none;
}
.lbDetailScore {
  align-items: flex-end;
  background: linear-gradient(
    180deg,
    rgba(0, 200, 255, 0.22),
    rgba(0, 200, 255, 0.07)
  );
  border: 1px solid rgba(0, 200, 255, 0.25);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 24px rgba(0, 200, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 168px;
  padding: 12px 18px;
  position: relative;
}
.lbDetailScore::before {
  background: radial-gradient(
    120% 120% at 50% 0%,
    rgba(255, 255, 255, 0.2),
    transparent 70%
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
}
.lbDetailTotalLabel {
  color: rgba(233, 245, 255, 0.82);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lbDetailTotalValue {
  color: color-mix(in oklab, var(--n-blue) 86%, white 8%);
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-shadow: 0 6px 16px rgba(0, 200, 255, 0.28);
}
.lbDetailMeta {
  color: rgba(198, 211, 238, 0.8);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 10px;
}
.lbDetailMeta span {
  text-transform: none;
}
.lbDetailMeta span:not([hidden]) {
  align-items: center;
  background: rgba(24, 36, 56, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: inline-flex;
  gap: 8px;
  padding: 6px 10px;
}
.lbDetailMeta span:not([hidden])::before {
  background: rgba(0, 200, 255, 0.75);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.18);
  content: "";
  height: 6px;
  width: 6px;
}
#lbDetailScroll {
  min-height: 0;
}
.lbDetailContent {
  display: grid;
  gap: 20px;
  max-height: 100%;
  overflow: auto;
  padding-right: 6px;
  position: relative;
  scroll-behavior: smooth;
  scrollbar-color: rgba(0, 200, 255, 0.4) rgba(10, 16, 28, 0.4);
  scrollbar-width: thin;
}
.lbDetailContent::after {
  background: linear-gradient(180deg, transparent, rgba(14, 19, 30, 0.9));
  bottom: 0;
  content: "";
  height: 14px;
  left: 0;
  pointer-events: none;
  position: sticky;
}
.lbDetailContent::-webkit-scrollbar {
  width: 8px;
}
.lbDetailContent::-webkit-scrollbar-track {
  background: rgba(6, 12, 24, 0.55);
  border-radius: 999px;
}
.lbDetailContent::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(0, 200, 255, 0.65),
    rgba(0, 140, 255, 0.6)
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}
.lbDetailSection {
  background: linear-gradient(
    180deg,
    rgba(29, 42, 64, 0.85),
    rgba(18, 26, 40, 0.92)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 7px;
  padding: clamp(16px, 2.4vw, 22px);
  position: relative;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.lbDetailSection::before {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 255, 0.16),
    rgba(255, 95, 0, 0.12)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease;
  z-index: -1;
}
.lbDetailSection:focus-within,
.lbDetailSection:hover {
  border-color: rgba(0, 200, 255, 0.38);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
  transform: translateY(-1px);
}
.lbDetailSection:focus-within::before,
.lbDetailSection:hover::before {
  opacity: 0.7;
}
.lbDetailSection--combo {
  gap: 22px;
}
@media (max-width: 640px) {
  #lbDetail .modalCard {
    gap: 7px;
    padding: 20px 18px 26px;
  }
  .lbDetailHeader {
    gap: 8px;
    grid-template-columns: 1fr;
  }
  .lbDetailTitle {
    max-width: 100%;
  }
  .lbDetailScore {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
    width: 100%;
  }
  .lbDetailTotalLabel {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }
  .lbDetailMeta span:not([hidden]) {
    width: 100%;
  }
  .lbDetailContent {
    max-height: clamp(340px, 60vh, 540px);
  }
}
.lbPickImpactLayout {
  background: linear-gradient(
    180deg,
    rgba(20, 32, 48, 0.65),
    rgba(12, 18, 30, 0.82)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.36);
  display: grid;
  gap: 16px;
  isolation: isolate;
  overflow: hidden;
  padding: 18px;
  position: relative;
}
.lbPickImpactLayout::before {
  background: radial-gradient(
    180% 140% at 0% 0%,
    rgba(72, 192, 255, 0.12),
    transparent 65%
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.lbPickImpactHeader {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  position: relative;
}
.lbSubsectionTitle {
  color: rgba(215, 228, 248, 0.78);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin: 0;
  text-transform: uppercase;
}
.lbPickImpactRows {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.lbPickImpactCard {
  background: linear-gradient(
    180deg,
    rgba(18, 30, 44, 0.88),
    rgba(10, 14, 22, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 34px rgba(0, 0, 0, 0.38);
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
  position: relative;
}
.lbPickImpactCard::before {
  background: radial-gradient(
    120% 120% at 0% 0%,
    rgba(72, 192, 255, 0.14),
    transparent 65%
  );
  border-radius: 16px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.lbPickImpactCardHead {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.lbPickImpactTitle {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lbPickImpactLabel {
  color: #f3f8ff;
  font-size: 0.94rem;
  font-weight: 600;
}
.lbPickImpactSelection {
  color: rgba(210, 228, 255, 0.75);
  font-size: 0.78rem;
}
.lbPickImpactSection {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.lbPickImpactSection.is-empty {
  opacity: 0.7;
}
.lbPickImpactEmpty {
  color: rgba(210, 228, 255, 0.68);
  font-size: 0.78rem;
  margin: 0;
}
.lbPickImpactDivider {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 1px;
  position: relative;
  z-index: 1;
}
.lbPickImpactSection--impact .lbBreakChips {
  margin-top: 4px;
}
.lbPickImpactCard.is-missing-impact .lbPickImpactDivider {
  display: none;
}
.lbSectionHeader {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.lbSectionHeader h4 {
  margin: 0;
}
.lbSectionHint {
  color: rgba(205, 217, 239, 0.72);
  font-size: 0.78rem;
  margin: 0;
  text-transform: none;
}
.lbStatGrid {
  display: grid;
  gap: 12px;
}
.lbStatRow {
  align-items: center;
  display: grid;
  gap: 6px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.lbStatLabel {
  color: rgba(230, 238, 251, 0.92);
  font-weight: 600;
  text-transform: none;
}
.lbStatValue {
  color: rgba(230, 238, 251, 0.78);
  font-variant-numeric: tabular-nums;
}
.lbStatBar {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
}
.lbStatBarFill {
  background: linear-gradient(
    90deg,
    rgba(0, 200, 255, 0.65),
    rgba(0, 200, 255, 0.28)
  );
  border-radius: inherit;
  height: 100%;
  transition: width 0.3s ease;
}
.lbStatBarFill.neg {
  background: linear-gradient(
    90deg,
    rgba(255, 95, 95, 0.65),
    rgba(255, 95, 95, 0.28)
  );
}
.lbEmptyText {
  color: rgba(200, 213, 240, 0.7);
  font-size: 0.82rem;
  margin: 0;
  text-align: center;
}

/* Stat grid inside details */
#lbDetail .grid .card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#lbDetail .picks {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
#lbDetail .pChip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Breakdown section chips */
#lbDetail .lbBreakItem {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
@media (max-width: 820px) {
  .lbPickImpactRows {
    grid-template-columns: minmax(0, 1fr);
  }
}
#lbDetail .lbPickImpactColumn--picks .lbPickGrid {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
#lbDetail .lbPickImpactColumn--impact .lbBreakdown {
  padding: 0;
}

/* Close button hover */
#lbDetailClose:hover {
  filter: brightness(1.18);
}

/* ================================
   Badges and small UI bits in dock
==================================*/
.totalLevel .badge {
  align-items: center;
  background: transparent !important;
  border: none !important;
  color: #ffe9c2;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

/* Progress bar accent already tracks --accent; make it Naruto if desired */
.theme-naruto .progress .bar {
  background: linear-gradient(90deg, var(--n-orange), var(--n-blue));
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
}

/* ================================
   Hover accents for links or “learn more” style .btn.link
==================================*/
.btn.link:hover {
  color: color-mix(in oklab, var(--n-orange) 90%, white 10%);
  text-decoration-thickness: 2px;
}

/* ================================
   Mobile polish for dock panels
==================================*/
@media (max-width: 1900px) {
  .lbItem:hover {
    transform: none;
  }
}

/* ================================
   High contrast users
==================================*/
@media (prefers-contrast: more) {
  .lbItem,
  .pnItem details {
    background: #121821 !important;
  }
  .lbRank {
    background: #ffcc00 !important;
  }
}

/* ================================
   NARUTO STAGE + CONTENT SKIN
   No markup changes. Targets your existing selectors.
==================================*/

/* palette reuse */

/* Stage chrome */

/* Stage grid gutters */

/* Titles above wheel */
.inlineRollNow #rollNow {
  color: color-mix(in oklab, var(--n-blue) 86%, white 10%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Wheel area */
@keyframes naruGlow {
  0%,
  100% {
    filter: drop-shadow(0 6px 14px rgba(191, 63, 0, 0.45));
  }
  50% {
    filter: drop-shadow(0 8px 20px rgba(191, 63, 0, 0.75));
  }
}

/* Stats header in the right column */
.statsHeader .badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffe7b8;
}
.statsHeader .progress .bar {
  background: linear-gradient(90deg, var(--n-orange), var(--n-blue));
}
#status.badge {
  color: color-mix(in oklab, var(--n-blue) 86%, white 10%);
}

/* Grid panels and attribute cards */
.card.attrCard {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.card.attrCard:hover {
  border-color: color-mix(in oklab, var(--n-orange) 35%, white 0%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* Attribute header bits */
.card .cardHead .chip {
  background:
    radial-gradient(
      100% 100% at 30% 30%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(180deg, rgba(255, 95, 0, 0.18), rgba(255, 95, 0, 0));
  border-color: rgba(255, 255, 255, 0.14);
}
.card .cardHead .k {
  color: #e9f1ff;
}
.card .rarity {
  border-color: rgba(255, 255, 255, 0.14);
  max-height: 27px;
}

/* Pills and chips inside cards */

/* RS panel on the right */

/* Re-assert stateful bar styles so they take precedence after later bar rules */

/* Section titles inside the stage */

/* Rarity legend at bottom-right */
.rarityLabels span,
.rarityPercentages span {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.rarityLabels .ex,
.rarityPercentages .ex {
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    radial-gradient(
      120% 160% at 80% 0%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(135deg, #ff007f, #ff69b4 40%, #ffc0ff 70%, #b2d8f7);
  color: transparent;
  text-shadow:
    0 0 10px rgba(255, 0, 127, 0.8),
    0 0 20px rgba(255, 0, 127, 0.6),
    0 0 30px rgba(255, 0, 127, 0.4),
    0 0 40px rgba(255, 0, 127, 0.2); /* Stronger glow effect for depth */
}

/* Finish overlay card polish to match theme, if opened from stage */
#finishOverlay .hint {
  color: #c8d5f0;
}

/* Mobile guardrails */
@media (max-width: 1900px) {
  .card.attrCard:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  }
}

/* High contrast users */
@media (prefers-contrast: more) {
  canvas#wheel {
    background: radial-gradient(
      60% 60% at 50% 50%,
      rgba(255, 255, 255, 0.06),
      rgba(0, 0, 0, 0.12)
    );
  }
  .pointer::before {
    background: linear-gradient(180deg, var(--n-orange-hi), var(--n-orange));
    box-shadow:
      inset 0 0 6px rgba(255, 255, 255, 0.4),
      0 16px 20px rgba(0, 0, 0, 0.45);
  }
  .bar,
  .progress .bar {
    background: var(--n-orange) !important;
  }
}

/* === Chakra Halo behind logo (no HTML changes) === */

/* Soft blue radial aura */
.dock .h::before {
  animation: chakraPulse 3.6s ease-in-out infinite; /* plays nicely over dark bg */
  background: radial-gradient(
    closest-side,
    rgba(0, 210, 255, 0.55),
    rgba(0, 160, 255, 0.28) 45%,
    rgba(0, 120, 255, 0.14) 65%,
    transparent 72%
  );
  filter: blur(10px) saturate(120%);
  width: min(230px, 60vw);
    overflow: visible;
}

/* Subtle rotating energy ring */
.dock .h::after,
.dock .h::before {
  aspect-ratio: 1/1;
  border-radius: 50%;
  content: "";
  left: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  z-index: 0;
    overflow: visible;
    
}
.dock .h::after {
  animation: chakraSpin 14s linear infinite;
  background: conic-gradient(
    from 0turn,
    rgba(0, 200, 255, 0) 0 20%,
    rgba(0, 200, 255, 0.22) 25%,
    rgba(120, 240, 255, 0) 35%,
    rgba(0, 150, 255, 0.18) 55%,
    rgba(0, 200, 255, 0) 75%,
    rgba(100, 220, 255, 0.16) 90%,
    rgba(0, 200, 255, 0) 100%
  );
  filter: blur(12px);
  opacity: 0;
  width: min(270px, 70vw);
    overflow: visible;

}

/* Keep the logo above the aura and give it some glow */
.dock .h img {
  filter: drop-shadow(0 10px 28px rgba(0, 170, 255, 0.28))
    drop-shadow(0 0 22px rgba(0, 210, 255, 0.26));
  position: relative;
  z-index: 1;
overflow: visible;


}

@media (max-width: 720px) {
  .dock .h::after,
  .dock .h::before {
    content: none;
  }

  .dock .h img {
    filter: none !important;
  }
}


/* Animations */
@keyframes chakraSpin {
  to {
    transform: rotate(1turn);
  }
}

/* Optional: tighten the header so the aura centers nicely */

/* Character submit summary: fix spacing and make it pop */
.lbSummary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lbSummary .sumItem p {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg, red, orange, yellow, #ff4500);
  border-radius: 8px;
  color: transparent; /* Make the text color transparent so the gradient shows */
  display: inline-block;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 2;
  margin: 0;
  padding: 0.1rem;
}
.lbSummary .sumItem span {
  letter-spacing: 0.2px;
  opacity: 0.9;
}

/* motion-safety for the dramatic types */
@media (prefers-reduced-motion: reduce) {
  .lbSummary .sumItem {
    box-shadow: 0 4px 12px rgba(40, 80, 160, 0.16);
  }
}
.globalRank {
  width: 50px;
}

/* Keep both tiles wide enough to avoid wrapping under normal widths */

/* One-line, no-wrap stat rows */
.lbSummary .sumItem p,
.lbSummary .sumItem span {
  white-space: nowrap; /* keep label and number on one line */
}

/* Make the numbers behave like inline pills, not block elements */

/* Safety: if the viewport gets comically narrow, shrink numbers slightly */
@media (max-width: 380px) {
  .lbSummary .sumItem p {
    font-size: 0.95rem;
  }
}

/* === Full-column parchment scroll skin =============================== */
.scroll-pane {
  align-self: stretch;
  background:
    radial-gradient(
      120% 80% at 12% 10%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    ),
    radial-gradient(
      100% 70% at 88% 16%,
      rgba(255, 255, 255, 0.045),
      transparent 60%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0 2px,
      rgba(0, 0, 0, 0) 2px 6px
    ),
    linear-gradient(180deg, rgba(255, 238, 200, 0.12), rgba(210, 175, 110, 0.1));
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05);

  /* ensure it stretches the whole column area */
  height: calc(100% + 24px);
  isolation: isolate;
  margin-bottom: -12px;
  margin-left: -12px;
  margin-right: -12px;
  margin-top: -12px;
  mask-composite: add;
  -webkit-mask-image: linear-gradient(black, black);
  mask-image:
    radial-gradient(12px 16px at 0 8px, transparent 60%, black 62%),
    radial-gradient(12px 16px at 100% 8px, transparent 60%, black 62%) right top,
    linear-gradient(black, black);
  -webkit-mask-position:
    left top,
    right top,
    0 0;
  mask-position:
    left top,
    right top,
    0 0;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-size:
    12px 24px,
    12px 24px,
    100% 100%;
  mask-size:
    12px 24px,
    12px 24px,
    100% 100%;
  overflow: visible;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  position: relative;
}

/* Top and bottom curls (rolled ends) */
.scroll-pane::after,
.scroll-pane::before {
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(0, 0, 0, 0.38), transparent 62%)
      top/100% 100% no-repeat,
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08),
      rgba(0, 0, 0, 0.25) 20%,
      rgba(0, 0, 0, 0.25) 80%,
      rgba(255, 255, 255, 0.08)
    );
  content: "";
  filter: blur(0.25px);
  height: 18px;
  left: -10px;
  position: absolute;
  right: -10px;
  z-index: -1; /* behind the paper */
}
.scroll-pane::before {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  top: -16px;
}
.scroll-pane::after {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  bottom: -16px;
  transform: scaleY(-1);
}

/* Side rods (optional, pure CSS; remove if you don’t want them) */
.scroll-pane::marker {
  display: none;
} /* defensive */
.scroll-pane .rod {
  background:
    radial-gradient(circle at 40% 20%, #ffe9b5, #ffd064 35%, #8a5a1e 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  bottom: -22px;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.35),
    0 10px 22px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  position: absolute;
  top: -22px;
  width: 16px;
  z-index: -1;
}
.scroll-pane .rod.left {
  left: -26px;
}
.scroll-pane .rod.right {
  right: -26px;
}

/* Gently ragged side edges using a mask (keeps content crisp) */

/* Let your sticky controls sit “on” the paper (not in a dark chip) */
.scroll-pane .controlsRow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Add a faint inner divider where controls stick to the bottom */
.scroll-pane .controlsRow::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.28),
    transparent
  );
  content: "";
  height: 1px;
  left: 8px;
  position: absolute;
  right: 8px;
  top: 0;
}

/* Keep the wheel’s drop shadow from overpowering the paper */
.scroll-pane .wheelWrap {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.32));
}

/* Mobile: slimmer curls, hide rods for space */
@media (max-width: 1900px) {
  .scroll-pane::after,
  .scroll-pane::before {
    height: 12px;
    left: -6px;
    right: -6px;
  }
  .scroll-pane .rod {
    display: none;
  }
  .scroll-pane {
    height: calc(100% + 20px);
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  #finishOverlay .row {
    flex-wrap: wrap;
  }
  #finishOverlay .btnRow {
    flex-wrap: wrap;
    justify-content: center;
  }
  #finishOverlay button,
  #finishOverlay input {
    max-width: 100%;
  }
  #finishOverlay .hint {
    overflow-wrap: anywhere;
  }
  .overlayRank p {
    margin: 0;
    /* Your styles here */
  }
}

/* Let the parchment “touch” the container edges */

/* Match mobile padding (your stageBody drops to ~10px) */

/* Keep the bottom curl aligned after the shift */
/* (keep your existing ::before/::after from the scroll skin) */

/* Let the parchment “touch” the container edges */

/* Match mobile padding (your stageBody drops to ~10px) */

/* Keep the bottom curl aligned after the shift */
/* (keep your existing ::before/::after from the scroll skin) */

/* Mobile fit improvements for finish overlay */

/* Level animation rules moved to consolidated section above */

/* EX look without sheen, with rotating text colors */

/* Base EX card shell (static background, no card-level animation) */
.card.ex,
.card[data-rarity="ex"] {
  background:
    radial-gradient(
      120% 160% at 80% 0%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      135deg,
      var(--ex-pink) 0%,
      #ffc0ff 30%,
      #d0e3ff 60%,
      var(--ex-blue) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px !important;
  box-shadow:
    0 20px 80px rgba(255, 120, 200, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
  --ex-text-anim: exTextSweep 7s linear infinite;
  --rarity-tint: rgba(255, 120, 200, 0.12); /* pink glass */
  --rarity-fallback: rgba(255, 120, 200, 0.1);
  --rarity-blur: var(--blur-xl);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Subtle crosshatch foil texture (kept) */
.card.ex::before,
.card[data-rarity="ex"]::before {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.06) 0 2px,
      transparent 2px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 6px
    );
  border-radius: inherit;
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  transform: translateZ(0);
}

/* Removed sheen: no ::after highlight */

/* Text legibility tweaks for non-animated parts (optional) */
.card.ex .title,
.card[data-rarity="ex"] .title {
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.card.ex .stat,
.card[data-rarity="ex"] .stat {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Rotating gradient text */
@keyframes exTextSweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Apply the rotating text to common elements inside EX cards */
.card.ex #totalLevelBadge,
.card.ex .desc,
.card.ex .label,
.card.ex .stat,
.card.ex .title,
.card.ex .value,
.card[data-rarity="ex"] #totalLevelBadge,
.card[data-rarity="ex"] .desc,
.card[data-rarity="ex"] .label,
.card[data-rarity="ex"] .stat,
.card[data-rarity="ex"] .title,
.card[data-rarity="ex"] .value {
  animation: exTextSweep 7s linear infinite;
  background: linear-gradient(
    90deg,
    var(--ex-pink) 0%,
    var(--ex-pink-soft) 25%,
    var(--ex-ice) 55%,
    var(--ex-blue) 85%,
    var(--ex-pink) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 300% 100%;
  color: transparent;
  /* keep it readable on busy backgrounds */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

/* Optional: make all text inside EX cards rotate without adding classes everywhere */
.card.ex *:not(svg):not(path),
.card[data-rarity="ex"] *:not(svg):not(path) {
  animation: var(--ex-text-anim);
  /* Only color-cycle elements that have gradient text applied.
     If an element still has normal color, this does nothing visible. */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card.ex #totalLevelBadge,
  .card.ex *:not(svg):not(path),
  .card.ex .desc,
  .card.ex .label,
  .card.ex .stat,
  .card.ex .title,
  .card.ex .value,
  .card[data-rarity="ex"] #totalLevelBadge,
  .card[data-rarity="ex"] *:not(svg):not(path),
  .card[data-rarity="ex"] .desc,
  .card[data-rarity="ex"] .label,
  .card[data-rarity="ex"] .stat,
  .card[data-rarity="ex"] .title,
  .card[data-rarity="ex"] .value {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ===== Fix: force gradient text to actually show ===== */

/* Shared palette + gradient token */

/* Apply gradient text to the usual suspects */
.card.ex :is(.title, .stat, .label, .value, .desc, #totalLevelBadge),
.card[data-rarity="ex"]
  :is(.title, .stat, .label, .value, .desc, #totalLevelBadge) {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-image: var(--ex-grad) !important;
  background-position: 0% 50% !important;
  background-size: 300% 100% !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important; /* Safari & some Chromium builds */
  animation: exTextSweep 7s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

/* Optional: an opt-in attribute you can slap on any element that should color-cycle */
.card.ex [data-ex-chroma],
.card[data-rarity="ex"] [data-ex-chroma] {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-image: var(--ex-grad) !important;
  background-size: 300% 100% !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: exTextSweep 7s linear infinite;
}

/* If something renders as plain white because it's inline in a weird browser,
   making it inline-block helps the background paint correctly. */
.card.ex :is(.title, .stat, .label, .value, .desc, #totalLevelBadge),
.card.ex [data-ex-chroma],
.card[data-rarity="ex"]
  :is(.title, .stat, .label, .value, .desc, #totalLevelBadge),
.card[data-rarity="ex"] [data-ex-chroma] {
  display: inline-block;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card.ex :is(.title, .stat, .label, .value, .desc, #totalLevelBadge),
  .card.ex [data-ex-chroma],
  .card[data-rarity="ex"]
    :is(.title, .stat, .label, .value, .desc, #totalLevelBadge),
  .card[data-rarity="ex"] [data-ex-chroma] {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ===== GLASS BLUR PER RARITY =====
   Works with either .card.common or [data-rarity="common"].
   Requires the card background to be at least partially transparent.
*/

/* Base “glass” shell */

/* The blur/tint layer */
.card::after {
  backdrop-filter: blur(var(--rarity-blur, 10px)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--rarity-blur, 10px)) saturate(1.1);
  background: var(--rarity-tint, rgba(255, 255, 255, 0.08));
  /* soft inner glow so the glass reads even with busy BGs */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 10px 40px rgba(255, 255, 255, 0.06);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* Fallback when backdrop-filter isn’t available */
@supports not (backdrop-filter: blur(10px)) {
  .card::after {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.02)
      ),
      var(--rarity-fallback, rgba(255, 255, 255, 0.05));
    filter: none;
  }
}

/* ===== RARITY TOKENS ===== */

/* Common */
.card.common,
.card[data-rarity="common"] {
  --rarity-tint: rgba(180, 200, 220, 0.12);
  --rarity-fallback: rgba(180, 200, 220, 0.08);
  --rarity-blur: var(--blur-s);
  border-color: rgba(200, 220, 240, 0.1);
}

/* Uncommon */
.card.uncommon,
.card[data-rarity="uncommon"] {
  --rarity-tint: rgba(120, 230, 170, 0.12);
  --rarity-fallback: rgba(120, 230, 170, 0.08);
  --rarity-blur: var(--blur-m);
  border-color: rgba(120, 230, 170, 0.18);
}

/* Rare (blue) */
.card.rare,
.card[data-rarity="rare"] {
  --rarity-tint: rgba(80, 160, 255, 0.12);
  --rarity-fallback: rgba(80, 160, 255, 0.08);
  --rarity-blur: var(--blur-m);
  border-color: rgba(80, 160, 255, 0.2);
}

/* Epic (purple) */
.card.epic,
.card[data-rarity="epic"] {
  --rarity-tint: rgba(170, 110, 255, 0.13);
  --rarity-fallback: rgba(170, 110, 255, 0.09);
  --rarity-blur: var(--blur-l);
  animation: epicNebula 20s ease-in-out infinite;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(140, 0, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(255, 0, 255, 0.18),
      transparent 60%
    ),
    rgba(40, 0, 60, 0.6);
  background-size: 200% 200%;
  border-color: rgba(170, 110, 255, 0.22);
  border: 1px solid rgba(200, 150, 255, 0.35);
  border-radius: 18px;
  box-shadow:
    0 8px 24px rgba(140, 80, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* Legendary (gold) */
.card.legendary,
.card[data-rarity="legendary"] {
  --rarity-tint: rgba(255, 210, 110, 0.14);
  --rarity-fallback: rgba(255, 210, 110, 0.1);
  --rarity-blur: var(--blur-l);
  /* translucent to let backdrop-filter glass from your rarity system show through */
  background:
    radial-gradient(
      140% 180% at 50% 0%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(180deg, rgba(255, 240, 210, 0.1), rgba(255, 210, 120, 0.08));
  border-color: rgba(255, 210, 110, 0.26);
  border: 1px solid rgba(255, 240, 190, 0.35);
  border-radius: 18px;
  box-shadow:
    0 10px 36px rgba(255, 210, 110, 0.12),
    0 8px 24px var(--leg-shadow),
    0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
  position: relative;
}

/* Mythic (pink) */
.card.mythic,
.card[data-rarity="mythic"] {
  --rarity-tint: rgba(255, 120, 200, 0.16);
  --rarity-fallback: rgba(255, 120, 200, 0.12);
  --rarity-blur: var(--blur-xl);
  border-color: rgba(255, 120, 200, 0.28);
  box-shadow:
    0 10px 36px rgba(255, 120, 200, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

/* EX (your pink ↔ blue aesthetic) */

/* Optional: vignette to add depth without extra filters */
.card > .vignette {
  background: radial-gradient(
    120% 140% at 50% 10%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.22) 95%
  );
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}

/* ===== Legendary upgrade kit ===== */

/* Base legendary shell */

/* Corner filigree that appears on hover */
.card.legendary .filigree,
.card[data-rarity="legendary"] .filigree {
  background:
    radial-gradient(
      40% 40% at 0% 0%,
      rgba(255, 220, 140, 0.18),
      rgba(255, 220, 140, 0) 60%
    ),
    radial-gradient(
      40% 40% at 100% 0%,
      rgba(255, 220, 140, 0.18),
      rgba(255, 220, 140, 0) 60%
    ),
    radial-gradient(
      40% 40% at 0% 100%,
      rgba(255, 220, 140, 0.18),
      rgba(255, 220, 140, 0) 60%
    ),
    radial-gradient(
      40% 40% at 100% 100%,
      rgba(255, 220, 140, 0.18),
      rgba(255, 220, 140, 0) 60%
    );
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.25s ease;
}
.card.legendary:hover .filigree,
.card[data-rarity="legendary"]:hover .filigree {
  opacity: 1;
}

/* Subtle lift and glint on hover */
.card.legendary:hover,
.card[data-rarity="legendary"]:hover {
  box-shadow:
    0 14px 44px rgba(255, 210, 110, 0.16),
    0 10px 30px var(--leg-shadow);
  transform: translateY(-2px);
}

/* Optional: big number gets a gold gradient text treatment */
.card.legendary #totalLevelBadge,
.card[data-rarity="legendary"] #totalLevelBadge {
  background: linear-gradient(
    90deg,
    #fff6cc,
    #ffd36b,
    #ffb341,
    #ffd36b,
    #fff6cc
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 250% 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: legText 8s linear infinite;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
@keyframes legText {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card.legendary::before,
  .card[data-rarity="legendary"]::before {
    animation: none;
  }
  .card.legendary:hover,
  .card[data-rarity="legendary"]:hover {
    transform: none;
  }
  .card.legendary #totalLevelBadge,
  .card[data-rarity="legendary"] #totalLevelBadge {
    animation: none;
  }
}

/* Outer glowing animated border */
.card.epic::before,
.card[data-rarity="epic"]::before {
  animation: epicBorderSpin 14s linear infinite;
  background: conic-gradient(
    from var(--epic-rot, 0deg),
    var(--epic-1),
    var(--epic-2),
    var(--epic-3),
    var(--epic-2),
    var(--epic-1)
  );
  border-radius: inherit;
  content: "";
  inset: 0;

  /* Proper mask for ring cutout */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  padding: 2px;
  pointer-events: none;
  position: absolute;
}
@keyframes epicBorderSpin {
  to {
    --epic-rot: 360deg;
  }
}
@keyframes epicNebula {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes epicTextSweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.card.epic .stat,
.card.epic .title,
.card[data-rarity="epic"] .stat,
.card[data-rarity="epic"] .title {
  background: linear-gradient(90deg, #e4b3ff, #ff70f5, #b070ff, #e4b3ff);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 300% 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: epicTextSweep 8s linear infinite;
  text-shadow: 0 2px 8px rgba(100, 0, 140, 0.6);
}
.lbMeta {
  display: none !important;
  visibility: hidden !important;
}
.socialIcons {
  align-items: center !important;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, #ffcc00, #ff5f00, #00c8ff);
  color: transparent;
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}
.socialIcons a {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  margin: 0 6px;
  padding: 6px;
  position: relative;
  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.socialIcons a::after {
  background: radial-gradient(circle at 50% 50%, rgba(255, 153, 0, 0.55), rgba(255, 84, 0, 0));
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.7);
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.socialIcons a img {
  display: block;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.28s ease;
}
.socialIcons a:hover,
.socialIcons a:focus-visible {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 8px 18px rgba(0, 200, 255, 0.35));
}
.socialIcons a:hover::after,
.socialIcons a:focus-visible::after {
  opacity: 1;
  transform: scale(1.1);
}
.socialIcons a:hover img,
.socialIcons a:focus-visible img {
  transform: rotate(-4deg) scale(1.08);
  filter: saturate(1.15);
}
.socialIcons a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .socialIcons a,
  .socialIcons a::after,
  .socialIcons a img {
    transition: none;
  }
  .socialIcons a:hover,
  .socialIcons a:focus-visible {
    transform: none;
    filter: none;
  }
  .socialIcons a:hover::after,
  .socialIcons a:focus-visible::after {
    opacity: 0.85;
    transform: none;
  }
  .socialIcons a:hover img,
  .socialIcons a:focus-visible img {
    transform: none;
    filter: none;
  }
}
.socialLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 8px auto 18px;
  max-width: 420px;
}
.socialLinks__item {
  align-items: center;
  background: rgba(11, 15, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #e6eefb;
  display: inline-flex;
  font: 600 13px/1.2 Russo One, system-ui, sans-serif;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}
.socialLinks__item:hover,
.socialLinks__item:focus-visible {
  border-color: rgba(0, 200, 255, 0.65);
  box-shadow: 0 8px 22px rgba(0, 200, 255, 0.28);
  transform: translateY(-2px);
}
.socialLinks__item:focus-visible {
  outline: 2px solid rgba(0, 200, 255, 0.8);
  outline-offset: 3px;
}
@media (max-width: 540px) {
  .socialLinks__item {
    flex: 1 1 45%;
    justify-content: center;
    padding: 9px 12px;
  }
}
.appLogo {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  max-width: 200px;
  min-width: 120px;
  overflow: visible;
  padding: 4px;
  position: relative;
  width: min(200px, 60vw);
  transition:
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.38s ease;
  transform-origin: 50% 50%;
  will-change: transform;

}
.appLogo::before,
.appLogo::after {
  opacity: 0;
}
.appLogo::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(143, 255, 255, 0.6), rgba(143, 255, 255, 0) 65%),
    radial-gradient(circle at 36% 34%, rgba(58, 192, 255, 0.55), rgba(58, 192, 255, 0) 55%),
    radial-gradient(circle at 70% 68%, rgba(224, 255, 255, 0.5), rgba(224, 255, 255, 0) 55%);
  border-radius: 50%;
  content: "";
  filter: blur(11px) drop-shadow(0 0 28px rgba(83, 241, 255, 0.54));
  inset: -24%;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  transform: scale(0.6);
  transition:
    opacity 0.36s ease,
    transform 0.48s cubic-bezier(0.33, 1, 0.68, 1),
    filter 0.48s ease;
  z-index: -2;
    overflow: visible;
}
.appLogo::after {
  background: radial-gradient(circle at 50% 50%, rgba(255, 176, 67, 0.45), rgba(255, 106, 0, 0));
  border-radius: inherit;
  content: "";
  inset: -18%;
  pointer-events: none;
  position: absolute;
  transform: scale(0.62);
  transition:
    opacity 0.38s ease,
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
  overflow: visible;
}
.appLogo img {
  display: block;
  border-radius: 50%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  width: 100%;
  transition:
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.38s ease;
      overflow: visible;
}

@media (pointer: coarse) {
  .appLogo::before {
    filter: blur(16px);
  }
  .appLogo::after {
    filter: blur(13px);
  }
}
.appLogo:focus-visible {
  filter: drop-shadow(0 18px 34px rgba(46, 191, 255, 0.45)) saturate(1.1);
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
  transform: translateY(-6px) scale(0.94) rotate(-4deg);
}
.appLogo:focus-visible::before {
  opacity: 1;
  animation: nsRasenShurikenAura 1.45s linear infinite;
}
.appLogo:focus-visible::after {
  background: radial-gradient(circle at 50% 50%, rgba(66, 216, 255, 0.6), rgba(0, 92, 255, 0));
  opacity: 1;
  transform: scale(0.9);
}
.appLogo:focus-visible img {
  filter: saturate(1.2) brightness(1.08);
  transform: scale(0.88) rotate(7deg);
}

@media (hover: hover) and (pointer: fine) {
  .appLogo:hover {
    filter: drop-shadow(0 18px 34px rgba(46, 191, 255, 0.45)) saturate(1.1);
    transform: translateY(-6px) scale(0.94) rotate(-4deg);
  }
  .appLogo:hover::before {
    opacity: 1;
    animation: nsRasenShurikenAura 1.45s linear infinite;
    overflow: visible;
  }
  .appLogo:hover::after {
    background: radial-gradient(circle at 50% 50%, rgba(66, 216, 255, 0.6), rgba(0, 92, 255, 0));
    opacity: 1;
    transform: scale(0.9);
    overflow: visible;
  }
  .appLogo:hover img {
    filter: saturate(1.2) brightness(1.08);
    transform: scale(0.88) rotate(7deg);
  }
}
.appLogo--spin {
  animation: nsLogoSpin 2.4s cubic-bezier(0.12, 0.9, 0.28, 1);
  pointer-events: none;
}
@keyframes nsLogoSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(10turn);
  }
}
@keyframes nsRasenShurikenAura {
  0% {
    transform: scale(0.7);
    opacity: 0.68;
    filter: blur(12px) drop-shadow(0 0 20px rgba(121, 255, 255, 0.46));
  }
  25% {
    transform: scale(0.95);
    opacity: 0.94;
    filter: blur(8px) drop-shadow(0 0 28px rgba(121, 255, 255, 0.56));
  }
  50% {
    transform: scale(0.78);
    opacity: 0.78;
    filter: blur(13px) drop-shadow(0 0 22px rgba(121, 255, 255, 0.48));
  }
  75% {
    transform: scale(0.94);
    opacity: 0.92;
    filter: blur(9px) drop-shadow(0 0 26px rgba(121, 255, 255, 0.55));
  }
  100% {
    transform: scale(0.7);
    opacity: 0.68;
    filter: blur(12px) drop-shadow(0 0 20px rgba(121, 255, 255, 0.46));
  }
}

.socialIcons.legal-links {
  -webkit-background-clip: initial;
  background-clip: border-box;
  background-image: none;
  color: #e6eefb;
  font-size: 0.9rem;
  gap: 0.4rem;
}
.socialIcons.legal-links span {
  color: rgba(230, 238, 251, 0.55);
}
.socialIcons .ns-legal-link {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
  padding: 0 0.2rem;
  text-decoration: none;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
.socialIcons .ns-legal-link:focus-visible,
.socialIcons .ns-legal-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.socialIcons .ns-legal-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Saved name display inside Finish overlay */
.overlayName {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg, red, orange, yellow, #ff4500);
  color: transparent;
  font-size: 0.95rem;
  font-size: 28px;
  margin: 0 0 6px 0;
  opacity: 0.95;
}
#finishTitle,
.overlayName {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

/* Ninja Spinner Loading Overlay */
.nsl[hidden] {
  display: none !important;
}
.nsl {
  display: grid;
  inset: 0;
  place-items: center;
  position: fixed;
  z-index: 100000;
}
.nsl-scrim {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: color-mix(in oklab, #0b0f14 85%, transparent);
  inset: 0;
  position: absolute;
}
.nsl-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  border-radius: 14px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #e6edf3;
  padding: 20px 20px 16px;
  position: relative;
  width: min(420px, 86vw);
  z-index: 1;
}
.nsl-title {
  align-items: center !important;
  display: flex !important;
  font:
    700 18px/1.2 Russo One,
    system-ui,
    sans-serif;
  justify-content: center !important;
  letter-spacing: 0.3px;
  margin: 10px 0 12px;
  width: 100%;
}
.nsl-bar {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.nsl-bar-fill {
  background: linear-gradient(90deg, #39d353, #1f6feb);
  height: 100%;
  transition: width 0.18s ease;
  width: 0;
}
.nsl-spinner {
  animation: nsl-spin 0.8s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  border-top-color: #ffb703;
  height: 36px;
  margin: 0 auto 8px;
  width: 36px;
}
@keyframes nsl-spin {
  to {
    transform: rotate(360deg);
  }
}
.nsl.nsl-reduced .nsl-spinner {
  animation: none;
}
#legal-modal[hidden] {
  display: none;
}
#legal-modal {
  inset: 0;
  position: fixed;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--modal-fade-duration, 0.22s) ease;
}
#legal-modal.modal-is-visible {
  opacity: 1;
  pointer-events: auto;
}
.ns-legal__backdrop {
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
  position: fixed;
}
.ns-legal__dialog {
  background: #101215;
  border-radius: 12px;
  color: #eaecef;
  contain: content;
  left: 50%;
  max-height: 90vh;
  opacity: 0;
  overflow: auto;
  padding: 16px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  transition:
    transform 160ms ease-out,
    opacity 160ms ease-out;
  width: min(900px, 92vw);
  will-change: transform, opacity;
}
#legal-modal.modal-is-visible .ns-legal__dialog {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
.ns-legal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.ns-legal__tab {
  background: #151922;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  padding: 6px 10px;
}
.ns-legal__tab[aria-selected="true"] {
  background: #1f2633;
  border-color: #3a4252;
}
.ns-legal__content {
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  contain-intrinsic-size: 800px 1200px;
  content-visibility: auto;
  max-height: 60vh;
  overflow: auto;
  padding: 12px;
}
.ns-legal__header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.ns-legal__title {
  margin: 0;
}
.ns-legal__subtitle {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.7;
}
.ns-legal__close,
.ns-legal__close-secondary {
  background: #2a2f3a;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: var(--cursor-clickable, pointer);
  padding: 6px 10px;
}
.ns-legal__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .ns-legal__dialog {
    transition: none;
  }
}

/* === Total Level badge tiers === */
/* We color purely via data-tier on #totalLevelCount to avoid touching other badges. */

/* Base look */
#totalLevelCount.badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 calc(6px + 10px * var(--levelIntensity)) rgba(255, 255, 255, 0.08),
    inset 0 0 calc(2px + 6px * var(--levelIntensity)) rgba(255, 255, 255, 0.06);
  color: #c8d5f0;
}

/* Subtle glow that scales with intensity regardless of tier */

/* Tiers. Keep legible text color for light/dark with slight shadow. */
#totalLevelCount[data-tier="common"] {
  background: linear-gradient(135deg, #3c475c, #2a3344);
  color: #e8eefc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
#totalLevelCount[data-tier="uncommon"] {
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  color: #eafcf1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
#totalLevelCount[data-tier="rare"] {
  background: linear-gradient(135deg, #2456aa, #18376a);
  color: #eef5ff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
#totalLevelCount[data-tier="epic"] {
  background: linear-gradient(135deg, #6a2daa, #3d1c6a);
  color: #f3e9ff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
#totalLevelCount[data-tier="legendary"] {
  animation: tierGlow 2.6s ease-in-out infinite alternate;
  background: linear-gradient(135deg, #c79b00, #8a6a00);
  color: #fff8dc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
#totalLevelCount[data-tier="mythic"] {
  animation: tierGlow 2.2s ease-in-out infinite alternate;
  /* Slightly extra, because of course it is */
  background:
    radial-gradient(
      120% 160% at 80% 0%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      135deg,
      #ff4d4d,
      #ff8a00 30%,
      #ffd166 60%,
      #ff8a00 80%,
      #ff4d4d
    );
  color: #fff8ee;
  position: relative;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Gentle breathing glow that scales with intensity variable */
@keyframes tierGlow {
  0% {
    box-shadow:
      0 0 calc(8px + 14px * var(--levelIntensity)) rgba(255, 255, 255, 0.16),
      inset 0 0 calc(4px + 10px * var(--levelIntensity))
        rgba(255, 255, 255, 0.1);
    transform: translateZ(0) scale(1);
  }
  100% {
    box-shadow:
      0 0 calc(12px + 24px * var(--levelIntensity)) rgba(255, 255, 255, 0.22),
      inset 0 0 calc(6px + 16px * var(--levelIntensity))
        rgba(255, 255, 255, 0.16);
    transform: translateZ(0) scale(calc(1 + var(--levelIntensity) * 0.01));
  }
}

/* You already have .pulsing from change delta; keep it. Pair it with high tiers nicely. */
/* Removed empty ruleset - #totalLevelCount.pulsing styles are defined above */

/* === Duplicated Encyclopedia Section Removed === */
/* The comprehensive encyclopedia styles are now located above in the main section */

/* ================================
   LEVEL-REACTIVE FX (moved up to proper location)
==================================*/

/* Tablet slab */

/* Hairline bevel around the slab */

/* Close control styled like a carved plug */

/* Header becomes the “tablet crest” with Sharingan rings */
/* Header becomes the “tablet crest” with Sharingan rings across the whole background */
/* Header becomes the “tablet crest” with Sharingan rings across the whole background */

/* Tiny etched border under header */

/* Engraved text treatment */

/* Left column: carved index well */

/* Right column content: slab face with subtle veins */

/* Decorative fracture lines, very faint */

/* Section headings etched in gold-chalk with red glow echo */

/* Body copy engraved */
#encyModal .encyImpact .chip,
.encyImpact .impactChip {
  background: linear-gradient(
    180deg,
    rgba(255, 140, 0, 0.22),
    rgba(255, 140, 0, 0.14)
  );
  border: 1px solid rgba(255, 140, 0, 0.45);
  border-radius: 999px;
  box-shadow:
    inset 0 0 18px rgba(255, 140, 0, 0.25),
    0 0 18px rgba(255, 140, 0, 0.18); /* Orange outer glow */
  color: #ffe9e9;
  padding: 0.22rem 0.6rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.encyImpact .impactChip.neg {
  background: linear-gradient(
    180deg,
    rgba(104, 0, 7, 0.45),
    rgba(104, 0, 7, 0.28)
  );
  border-color: rgba(255, 120, 140, 0.45);
}

/* Subtle etched meta block */

/* Mobile off-canvas stays intact, just retheme */

/* Respect reduced motion like a civilized shinobi */

/* ================================
   LEVEL-REACTIVE FX
   Driven by CSS variables set in app.js:updateLevelFX
   --level-hue: 0..360
   --level-glow: 0..1 intensity
   --level-speed: seconds for pulse
==================================*/
#totalLevelCount.levelGlow {
  border-color: hsla(
    var(--level-hue) 96% calc(54% + 20% * var(--level-glow)) /
      calc(0.3 + var(--level-glow) * 0.45)
  );
  box-shadow:
    0 0 calc(14px + 18px * var(--level-glow))
      hsla(var(--level-hue) 95% 68% / calc(0.32 + var(--level-glow) * 0.32)),
    0 0 calc(30px + 26px * var(--level-glow))
      hsla(var(--level-hue) 90% 60% / calc(0.18 + var(--level-glow) * 0.22)),
    inset 0 1px calc(4px + 6px * var(--level-glow))
      hsla(var(--level-hue) 70% 86% / calc(0.16 + var(--level-glow) * 0.22));
  color: hsl(var(--level-hue) 88% calc(48% + 28% * var(--level-glow)));
  filter: brightness(calc(1 + var(--level-glow) * 0.08))
    saturate(calc(1 + var(--level-glow) * 0.18));
}
#totalLevelCount.levelGlow .tl-glow {
  filter: blur(calc(30px + 18px * var(--level-glow)));
  opacity: calc(0.35 + var(--level-glow) * 0.35);
  transform: scale(1);
}
#totalLevelCount.levelGlowPulse {
  animation: levelGlowPulse var(--level-speed) cubic-bezier(0.4, 0, 0.6, 1)
    infinite;
  will-change: transform, filter;
}
@keyframes levelGlowPulse {
  0% {
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    filter: brightness(calc(1 + var(--level-glow) * 0.05))
      saturate(calc(1 + var(--level-glow) * 0.1));
    transform: translate3d(0, -0.5px, 0)
      scale(calc(1.01 + var(--level-glow) * 0.02));
  }
  50% {
    filter: brightness(calc(1 + var(--level-glow) * 0.08))
      saturate(calc(1 + var(--level-glow) * 0.15));
    transform: translate3d(0, 0, 0) scale(calc(1.02 + var(--level-glow) * 0.05));
  }
  75% {
    filter: brightness(calc(1 + var(--level-glow) * 0.03))
      saturate(calc(1 + var(--level-glow) * 0.08));
    transform: translate3d(0, 0.5px, 0)
      scale(calc(1.01 + var(--level-glow) * 0.02));
  }
  100% {
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}
#totalLevelCount::before {
  background:
    radial-gradient(
      3px 3px at 20% 30%,
      hsla(var(--level-hue) 90% 70%/0.9),
      transparent 60%
    ),
    radial-gradient(
      2px 2px at 70% 20%,
      hsla(var(--level-hue) 70% 72%/0.85),
      transparent 60%
    ),
    radial-gradient(
      2px 2px at 40% 75%,
      rgba(255, 255, 255, 0.9),
      transparent 60%
    ),
    radial-gradient(
      3px 3px at 85% 60%,
      hsla(var(--level-hue) 85% 65%/0.9),
      transparent 65%
    ),
    radial-gradient(
      2px 2px at 15% 80%,
      rgba(255, 255, 255, 0.85),
      transparent 60%
    );
  content: "";
  inset: -36%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.7);
  z-index: -2;
}
#totalLevelCount.celebrate::before {
  animation: particleBurst 1.15s ease-out;
}
@keyframes particleBurst {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: scale(1.25) rotate(38deg);
  }
  35% {
    opacity: 0.85;
    transform: scale(1.8) rotate(86deg);
  }
  65% {
    opacity: 0.3;
    transform: scale(2.6) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(3.4) rotate(252deg);
  }
}
#totalLevelCount.pulsing {
  animation: levelPulse 680ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  will-change: transform, filter;
}
@keyframes levelPulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  15% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.1) saturate(1.1);
    transform: translate3d(0, -2px, 0) scale3d(1.12, 1.12, 1);
  }
  30% {
    box-shadow: 0 0 var(--pulseBlur, 16px) rgba(255, 255, 255, 0.4);
    filter: brightness(1.2) saturate(1.2);
    transform: translate3d(0, 0, 0)
      scale3d(var(--pulseScale, 1.25), var(--pulseScale, 1.25), 1);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
    filter: brightness(1.1) saturate(1.1);
    transform: translate3d(0, 1px, 0) scale3d(1.1, 1.1, 1);
  }
  65% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.05) saturate(1.05);
    transform: translate3d(0, 0, 0) scale3d(1.05, 1.05, 1);
  }
  80% {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
    filter: brightness(1.02) saturate(1.02);
    transform: translate3d(0, -0.5px, 0) scale3d(1.02, 1.02, 1);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
#totalLevelCount.milestone {
  animation:
    milestoneCelebration 2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    levelGlowPulse calc(var(--level-speed) * 0.5) ease-in-out infinite 0.5s;
}
@keyframes milestoneCelebration {
  0% {
    filter: brightness(1) saturate(1) hue-rotate(0deg);
    transform: translate3d(0, 0, 0) scale(1) rotateZ(0deg);
  }
  10% {
    filter: brightness(1.4) saturate(1.4) hue-rotate(15deg);
    transform: translate3d(0, -4px, 0) scale(1.3) rotateZ(-2deg);
  }
  25% {
    filter: brightness(1.6) saturate(1.6) hue-rotate(30deg);
    transform: translate3d(0, -2px, 0) scale(1.5) rotateZ(2deg);
  }
  40% {
    filter: brightness(1.3) saturate(1.3) hue-rotate(15deg);
    transform: translate3d(0, 2px, 0) scale(1.2) rotateZ(-1deg);
  }
  55% {
    filter: brightness(1.2) saturate(1.2) hue-rotate(10deg);
    transform: translate3d(0, 0, 0) scale(1.1) rotateZ(1deg);
  }
  70% {
    filter: brightness(1.1) saturate(1.1) hue-rotate(5deg);
    transform: translate3d(0, -1px, 0) scale(1.05) rotateZ(-0.5deg);
  }
  85% {
    filter: brightness(1.05) saturate(1.05) hue-rotate(2deg);
    transform: translate3d(0, 0, 0) scale(1.02) rotateZ(0.5deg);
  }
  100% {
    filter: brightness(1) saturate(1) hue-rotate(0deg);
    transform: translate3d(0, 0, 0) scale(1) rotateZ(0deg);
  }
}
@keyframes milestoneRipple {
  0% {
    background: radial-gradient(
      circle,
      var(--accent) 0%,
      var(--accent-2) 40%,
      transparent 70%
    );
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0);
  }
  20% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(2);
  }
  50% {
    background: radial-gradient(
      circle,
      var(--accent-2) 0%,
      var(--accent) 30%,
      transparent 60%
    );
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(8);
  }
  80% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(20);
  }
}
#wheelWrap {
  margin-bottom: -22px;
}
.wheelWrap.levelGlow::after {
  background:
    radial-gradient(
      closest-side,
      hsl(var(--level-hue) 100% / calc(0.08 + var(--level-glow) * 0.35)),
      transparent 70%
    ),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.6) 5%, transparent 45%);
  border-radius: 50%;
  content: "";
  filter: blur(calc(10px + 20px * var(--level-glow)));
  inset: -6%;
  mix-blend-mode: screen;
  opacity: calc(0.18 + var(--level-glow) * 0.52);
  pointer-events: none;
  position: absolute;
}
canvas#wheel.levelGlow {
  filter: drop-shadow(
      0 0 calc(6px + 18px * var(--level-glow)) hsl(var(--level-hue) 90%/0.55)
    )
    drop-shadow(
      0 0 calc(2px + 8px * var(--level-glow)) hsl(var(--level-hue) 90%/0.55)
    );
}
#wheel.levelGlowPulse,
.wheelWrap.levelGlow {
  animation: wheelPulse var(--level-speed) ease-in-out infinite;
}
#wheel.levelGlowPulse {
  transform-origin: 50% 50%;
}
@keyframes wheelPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(calc(1.01 + var(--level-glow) * 0.03));
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 1900px) {
  #totalLevelCount.pulsing {
    animation-duration: 500ms;
  }
  #totalLevelCount.levelGlow {
    box-shadow:
      0 0 calc(3px + 6px * var(--level-glow))
        hsla(
          var(--level-hue) calc(var(--tier-sat) * 100%) /
            calc(0.25 + var(--level-glow) * 0.3)
        ),
      0 0 calc(6px + 12px * var(--level-glow))
        hsla(
          var(--level-hue) calc(var(--tier-sat) * 100%) /
            calc(0.15 + var(--level-glow) * 0.2)
        ),
      inset 0 0 calc(2px + 6px * var(--level-glow))
        hsla(
          var(--level-hue) calc(var(--tier-sat) * 100%) /
            calc(0.2 + var(--level-glow) * 0.25)
        );
  }
  #totalLevelCount.milestone {
    animation: milestoneCelebrationMobile 1.5s ease-out;
  }
  @keyframes milestoneCelebrationMobile {
    0%,
    100% {
      filter: brightness(1) saturate(1);
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      filter: brightness(1.3) saturate(1.3);
      transform: translate3d(0, -2px, 0) scale(1.2);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  #totalLevelCount.levelGlowPulse {
    animation: none;
    filter: brightness(calc(1 + var(--level-glow) * 0.1))
      saturate(calc(1 + var(--level-glow) * 0.2));
  }
  #totalLevelCount.pulsing {
    animation: levelPulseReduced 0.3s ease-out;
  }
  #totalLevelCount.milestone {
    animation: none;
    filter: brightness(1.2) saturate(1.2);
    transition: filter 0.5s ease;
  }
  #totalLevelCount.celebrate::before {
    animation: none;
    opacity: 0;
  }
  #wheel.levelGlowPulse,
  .wheelWrap.levelGlow {
    animation: none;
  }
  @keyframes levelPulseReduced {
    0%,
    100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.2);
    }
  }
}

/* === Attribute-card aura by rarity (tiny, additive) === */
.card.attrCard[data-rarity] {
  /* one aura rendered as two drop-shadows for a soft falloff */
  filter: drop-shadow(
      0 0 var(--glow-outer, 6px) var(--glow-color, rgba(184, 192, 204, 0.28))
    )
    drop-shadow(
      0 0 calc(var(--glow-outer, 6px) * 0.55)
        var(--glow-color, rgba(184, 192, 204, 0.18))
    );
}

/* Intensity steps by rarity */
.card.attrCard[data-rarity="common"] {
  --glow-color: rgba(184, 192, 204, 0.3);
  --glow-outer: 6px;
}
.card.attrCard[data-rarity="uncommon"] {
  --glow-color: rgba(52, 211, 153, 0.4);
  --glow-outer: 10px;
}
.card.attrCard[data-rarity="rare"] {
  --glow-color: rgba(96, 165, 250, 0.42);
  --glow-outer: 12px;
}
.card.attrCard[data-rarity="epic"] {
  --glow-color: rgba(192, 132, 252, 0.46);
  --glow-outer: 14px;
}
.card.attrCard[data-rarity="legendary"] {
  --glow-color: rgba(251, 191, 36, 0.5);
  --glow-outer: 16px;
}
.card.attrCard[data-rarity="mythic"] {
  --glow-color: rgba(248, 113, 113, 0.55);
  --glow-outer: 18px;
}

/* Optional: EX tier if you use it */
.card.attrCard[data-rarity="ex"] {
  --glow-color: rgba(164, 69, 255, 0.55);
  --glow-outer: 22px;
}

/* Small tasteful lift on hover, no gimmicks */
.card.attrCard[data-rarity]:hover {
  --glow-outer: calc(var(--glow-outer) * 1.2);
}

/* Inset bevel that plays nicely with your existing styles */

/* same transparent-black background for all pills/chips */
.chip,
.pill {
  background: rgba(0, 0, 0, 0.5) !important; /* adjust 0.5 to taste */
}

/* nuke old blend/invert layers */
.chip::after,
.chip::before,
.pill::after,
.pill::before {
  content: none !important;
}

/* CHIP NORMALIZER */
#lbDetail .lbBreakChips .chip,
.chip,
.encyImpact .chip,
.impactChip,
.pChip {
  background: var(--chip-bg) !important;
  border-color: var(--chip-border) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 898989 !important;
}

/* === EX rarity %: give the crystal gradient + animation to the percent row === */
.card[data-rarity="ex"] .rarityPercentages,
.card[data-rarity="ex"] .rarityPercentages * {
  background: linear-gradient(
    90deg,
    var(--ex-pink) 0%,
    var(--ex-pink-soft) 25%,
    var(--ex-ice) 55%,
    var(--ex-blue) 85%,
    var(--ex-pink) 100%
  ) !important;
  background-size: 300% 100% !important; /* reuse your existing keyframes */
}

/* Safety: if your percent lives inside a .rarity chip instead, cover that too */
.card[data-rarity="ex"] .rarity .pct,
.card[data-rarity="ex"] .rarity .percent,
.card[data-rarity="ex"] .rarityPercentages,
.card[data-rarity="ex"] .rarityPercentages * {
  animation: exTextSweep 7s linear infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* EPIC rarity % */
.card[data-rarity="epic"] .rarityPercentages,
.card[data-rarity="epic"] .rarityPercentages * {
  animation: shimmerSweep 3s linear infinite !important;
  background-image: linear-gradient(
    90deg,
    #b388ff,
    #a78bfa,
    #8b5cf6
  ) !important;
  background-size: 300% 100% !important;
}
.card[data-rarity="epic"] .rarityPercentages,
.card[data-rarity="epic"] .rarityPercentages *,
.rarity .pct,
.rarity .percent {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Attribute-card rarity % chip: animated blue↔pink glow */
.card.attrCard .cardHead .chip {
  animation: shimmerSweep 2.4s linear infinite;
  background: linear-gradient(90deg, #60a5fa, #f472b6, #60a5fa);
  background-size: 200% 100%;
  border-color: transparent;
  box-shadow:
    0 0 10px rgba(96, 165, 250, 0.35),
    0 0 18px rgba(244, 114, 182, 0.28);
  color: #0b0f14; /* readable over the bright gradient */
  position: relative;
}

/* Optional: subtle idle pulse that respects your motion vibe */
@media (prefers-reduced-motion: reduce) {
  .card.attrCard .cardHead .chip {
    animation: none;
  }
}

/* EX rarity % chip: match common EX patterns without touching markup */
.card .cardHead .chip.ex,
.card.exCard .cardHead .chip,
.card[class*="ex" i] .cardHead .chip {
  animation: shimmerSweep 2.4s linear infinite;
  background: linear-gradient(90deg, #60a5fa, #f472b6, #60a5fa);
  background-size: 200% 100%;
  border-color: transparent;
  box-shadow:
    0 0 10px rgba(96, 165, 250, 0.35),
    0 0 18px rgba(244, 114, 182, 0.28);
  color: #0b0f14;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.35));
  overflow: hidden;
  position: relative;
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card .cardHead .chip.ex,
  .card.exCard .cardHead .chip,
  .card[class*="ex" i] .cardHead .chip {
    animation: none;
  }
}
.rarity.ex {
  animation: shimmerSweep 2.6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    90deg,
    var(--ex-crystal-ice),
    var(--ex-crystal-pink-1),
    var(--ex-crystal-az-2),
    var(--ex-crystal-ice)
  );
  background-size: 220% 100%;
  color: transparent;
}

/* ===========================
   Ninja Spinner — Announcement (Centered, Standalone)
   =========================== */
.nrt-announce {
  --nrt-bg: #0f1720;
  --nrt-surface: #0b0f14;
  --nrt-text: #e6edf3;
  --nrt-muted: #a9b6c5;
  --nrt-border: rgba(255, 255, 255, 0.08);
  --nrt-accent: #ff6a00;
  --nrt-accent-2: #fdd835;
  background: linear-gradient(180deg, var(--nrt-bg), var(--nrt-surface));
  border: 1px solid var(--nrt-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: var(--nrt-text);
  margin: 12px auto;
  overflow: hidden;
  padding: 12px;
  position: relative;

  /* Center everything inside */
  text-align: center;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 220ms ease,
    filter 160ms ease;
  will-change: transform, box-shadow;
  width: min(900px, 100%);
}
.nrt-announce[data-modal-section] {
  cursor: var(--cursor-clickable, pointer);
}
.nrt-announce[data-modal-section] .nrt-announce__inner {
  transition: transform 220ms ease;
}
.nrt-announce[data-modal-section]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.45);
}
.nrt-announce[data-modal-section]:hover,
.nrt-announce[data-modal-section]:focus-visible,
.nrt-announce[data-modal-section]:focus-within {
  transform: translateY(-3px);
}
.nrt-announce[data-modal-section]:hover .nrt-announce__inner,
.nrt-announce[data-modal-section]:focus-visible .nrt-announce__inner,
.nrt-announce[data-modal-section]:focus-within .nrt-announce__inner {
  transform: scale(1.015);
}
.nrt-announce[data-modal-section="coming"]:hover,
.nrt-announce[data-modal-section="coming"]:focus-visible,
.nrt-announce[data-modal-section="coming"]:focus-within {
  border-color: rgba(255, 134, 33, 0.55);
  box-shadow:
    0 12px 36px rgba(255, 134, 33, 0.32),
    0 4px 16px rgba(0, 0, 0, 0.35);
}
.nrt-announce[data-modal-section="howto"]:hover,
.nrt-announce[data-modal-section="howto"]:focus-visible,
.nrt-announce[data-modal-section="howto"]:focus-within {
  box-shadow:
    0 16px 38px rgba(103, 56, 12, 0.35),
    0 4px 18px rgba(0, 0, 0, 0.28);
  filter: saturate(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .nrt-announce[data-modal-section],
  .nrt-announce[data-modal-section] .nrt-announce__inner {
    transition: none;
  }
  .nrt-announce[data-modal-section]:hover,
  .nrt-announce[data-modal-section]:focus-visible,
  .nrt-announce[data-modal-section]:focus-within {
    transform: none;
  }
  .nrt-announce[data-modal-section]:hover .nrt-announce__inner,
  .nrt-announce[data-modal-section]:focus-visible .nrt-announce__inner,
  .nrt-announce[data-modal-section]:focus-within .nrt-announce__inner {
    transform: none;
  }
}
.nrt-announce--scroll {
  --scroll-texture: url("/scrollOpen.webp");
  background:
    linear-gradient(
      180deg,
      rgba(255, 213, 134, 0.18) 0%,
      rgba(250, 197, 116, 0.78) 36%,
      rgba(245, 176, 87, 0.82) 64%,
      rgba(255, 213, 134, 0.18) 100%
    ),
    var(--scroll-texture);
  background-blend-mode: multiply;
  background-position: 50%;
  background-size: cover;
  border: 2px solid rgba(23, 26, 36, 0.65);
  box-shadow: 0 24px 36px rgba(8, 6, 3, 0.45);
  color: #1b1207;
}
.nrt-announce--scroll::after,
.nrt-announce--scroll::before {
  content: none;
}
.nrt-announce--scroll .nrt-announce__inner {
  position: relative;
  z-index: 1;
}
.nrt-announce--scroll .nrt-announce__label {
  background: linear-gradient(
    135deg,
    rgba(30, 34, 46, 0.95),
    rgba(17, 20, 31, 0.95)
  );
  border-color: rgba(255, 123, 0, 0.6);
  box-shadow:
    0 8px 24px rgba(10, 9, 6, 0.55),
    inset 0 0 0 1px rgba(255, 123, 0, 0.25);
  color: #ffb347;
  min-width: 100%;
  width: 100%;
}
.nrt-announce--scroll .nrt-announce__message {
  color: #22150a;
  font:
    600 16px/1.45 IM Fell English,
    serif;
}
.nrt-announce--scroll .nrt-announce__list {
  border-top: 1px solid rgba(34, 39, 53, 0.55);
  padding-top: 16px;
}
.nrt-announce--scroll .nrt-announce__list li {
  color: #381f0e;
  font:
    500 14px/1.4 IM Fell English,
    serif;
  padding-top: 14px;
}
.nrt-announce--scroll .nrt-announce__list li::before {
  background: radial-gradient(circle at 50% 50%, #5ada68 0%, #ff7b00 70%);
  box-shadow: 0 0 12px rgba(255, 123, 0, 0.7);
  height: 10px;
  width: 10px;
}

/* Sticky inside the dock */
.nrt-announce.sticky {
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Internal layout, hard reset so globals do not ruin the vibe */
.nrt-announce__inner {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: 0;
  padding: 0;
}

/* Visual cue that a surface is clickable */
.click-indicator {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  bottom: 4px;
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  font-size: 0.7rem;
  height: 24px;
  justify-content: center;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  right: 6px;
  transition: transform 0.18s ease, opacity 0.18s ease;
  width: 24px;
  z-index: 2;
}
.nrt-announce[data-modal-section]:hover .click-indicator,
.nrt-announce[data-modal-section]:focus-visible .click-indicator,
.nrt-announce[data-modal-section]:focus-within .click-indicator {
  opacity: 1;
  transform: translate(-2px, -2px);
}
.click-indicator--coming {
  color: #9bf6ff;
  text-shadow: 0 0 8px rgba(61, 191, 255, 0.6);
}
.click-indicator--scroll {
  color: #ffe7c2;
  text-shadow: 0 0 6px rgba(255, 199, 128, 0.55);
}

/* Pill label */
.nrt-announce__label {
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(255, 106, 0, 0.12),
    rgba(253, 216, 53, 0.12)
  );
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 999px;
  color: var(--nrt-accent);
  display: inline-flex;
  font:
    700 14px/1.1 Russo One,
    system-ui,
    sans-serif;
  gap: 6px;
  justify-content: center;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 6px 12px;
  text-transform: uppercase;
  transition: filter 140ms ease;
  white-space: nowrap;
  width: 100%;
}
.nrt-announce__icon {
  fill: currentColor;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

/* Main message */
.nrt-announce__message {
  font:
    500 15px/1.45 Cinzel,
    system-ui,
    serif;
  margin: 0;
  max-width: 60ch;
  text-wrap: balance;
}
.nrt-announce__label:focus-visible,
.nrt-announce__label:hover {
  filter: brightness(1.05);
}

/* Recent items list */
.nrt-announce__list {
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  justify-items: center;
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
}

/* List items */
.nrt-announce__list li {
  color: var(--nrt-muted);
  font:
    400 13px/1.35 IM Fell English,
    serif;
  margin: 0;
  max-width: 60ch;
  padding: 10px 0 0;
  position: relative;
}

/* Centered glowing dot above each item */
.nrt-announce__list li::before {
  background: radial-gradient(
    circle at 30% 30%,
    var(--nrt-accent-2),
    var(--nrt-accent)
  );
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 106, 0, 0.7);
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 6px;
}

.nrt-announce--coming {
  --nrt-bg: rgba(13, 20, 33, 0.9);
  --nrt-surface: rgba(10, 16, 28, 0.92);
  --nrt-accent: #23d8ff;
  --nrt-accent-2: #5fffe2;
  background:
    radial-gradient(circle at 12% -10%, rgba(61, 104, 255, 0.32), transparent 55%),
    radial-gradient(circle at 88% 120%, rgba(44, 201, 255, 0.35), transparent 45%),
    linear-gradient(160deg, rgba(9, 16, 27, 0.95) 0%, rgba(7, 11, 18, 0.92) 60%, rgba(7, 17, 27, 0.98) 100%);
  border: 1px solid rgba(33, 165, 255, 0.24);
  box-shadow:
    0 18px 42px rgba(5, 12, 22, 0.65),
    inset 0 0 0 1px rgba(28, 110, 205, 0.16);
  position: relative;
  width:100%;
}
.nrt-announce--coming::before {
  background: linear-gradient(90deg, rgba(35, 216, 255, 0.65), rgba(95, 255, 226, 0.35), rgba(35, 216, 255, 0.65));
  content: "";
  filter: blur(38px);
  height: 120px;
  left: 50%;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: 0;
}
.nrt-announce--coming .nrt-announce__inner {
  position: relative;
  z-index: 1;
}
.nrt-announce--coming .nrt-announce__label {
  background: linear-gradient(90deg, rgba(35, 216, 255, 0.22), rgba(95, 255, 226, 0.16));
  border-color: rgba(35, 216, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(93, 208, 255, 0.3),
    0 10px 26px rgba(7, 81, 120, 0.45);
  color: #9bf6ff;
  text-shadow: 0 0 14px rgba(63, 196, 255, 0.45);
}
.nrt-announce--coming .nrt-announce__list {
  border-top: 1px dashed rgba(79, 184, 255, 0.32);
}
.nrt-announce--coming .nrt-announce__list li {
  color: rgba(204, 244, 255, 0.92);
  font:
    500 13px/1.45 "Cinzel", serif;
  letter-spacing: 0.2px;
}
.nrt-announce--coming .nrt-announce__message {
  color: #bdfff2;
  font:
    600 14px/1.5 "Cinzel", serif;
  text-shadow: 0 0 22px rgba(63, 180, 255, 0.4);
}
.nrt-announce--coming .nrt-announce__list li::before {
  background: radial-gradient(circle at 50% 50%, #5fffe2 0%, rgba(35, 216, 255, 0.6) 65%);
  box-shadow: 0 0 12px rgba(69, 233, 255, 0.9);
}

.nrt-announce__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}
.nrt-announce__actions .btn {
  min-width: 210px;
  text-transform: uppercase;
}
.nrt-announce__actions .btn.primary {
  background: linear-gradient(90deg, rgba(35, 216, 255, 0.85), rgba(95, 255, 226, 0.75));
  border: 1px solid rgba(29, 180, 220, 0.65);
  box-shadow:
    0 12px 24px rgba(12, 83, 140, 0.45),
    inset 0 0 0 1px rgba(220, 255, 249, 0.28);
  color: #04263a;
}
.nrt-announce__actions .btn.primary:hover,
.nrt-announce__actions .btn.primary:focus-visible {
  filter: brightness(1.05);
}

/* Light theme option if you toggle a data-theme attribute */
[data-theme="light"] .nrt-announce {
  --nrt-bg: #f7fafc;
  --nrt-surface: #ffffff;
  --nrt-text: #0d1117;
  --nrt-muted: #445566;
  --nrt-border: rgba(0, 0, 0, 0.08);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .nrt-announce.sticky {
    backdrop-filter: none;
  }
  .nrt-announce__list li::before {
    box-shadow: none;
  }
}

/* Small screens */
@media (max-width: 1900px) {
  .nrt-announce {
    border-radius: 12px;
    margin: 8px auto;
    padding: 10px;
    width: calc(100% - 16px);
  }
  .nrt-announce__list li,
  .nrt-announce__message {
    max-width: 100%;
  }
}

  .dock .h:is(:hover, :focus-within)::before,
  .dock .h:is(:hover, :focus-within)::after {
    opacity: 0.55;
  }
/* Optional flash when message changes. Toggle .is-updated in JS after text swap */
.nrt-announce__message.is-updated {
  animation: nrtFlash 900ms ease-out;
}
@keyframes nrtFlash {
  0% {
    background: rgba(253, 216, 53, 0.18);
  }
  100% {
    background: transparent;
  }
}

/* 1) Nuke the native marker */
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  content: "";
} /* for good measure */

/* 2) Lay out the summary as a row */
summary {
  align-items: center;
  cursor: var(--cursor-clickable, pointer);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between; /* text on left, marker on right */
  list-style: none;
  padding: 0.5rem 0;
}

/* 3) Fake marker with ::after on the right */
summary::after {
  content: "▸"; /* closed state */
  flex: none;
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* 4) Rotate when open */
details[open] > summary::after {
  transform: rotate(90deg);
}

/* Optional polish */
summary:focus-visible {
  outline: 2px solid #6aa9ff;
  outline-offset: 2px;
}

/* Put near other card rules (intentionally no base overrides here) */
/* Attribute card title shrinks with card width, stays one line */
.attrCard .cardHead .title {
  flex: 1 1 auto;
  font-size: clamp(12px, 3.2cqw, 18px);
  line-height: 1.1;
  min-width: 0;
  white-space: nowrap;
}
.encyTitleTop {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}
.encyActualTitle {
  margin-left: 20px !important;
}
.comPoll {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 15px;
  width: 100%;
}
#communityPollBtn {
  background: linear-gradient(180deg, var(--n-orange-hi), var(--n-orange));
  border: 1px solid color-mix(in oklab, var(--n-orange) 70%, black 6%);
  border-radius: 999px;
  box-shadow:
    0 10px 24px rgba(191, 63, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--n-on-warm);
  font:
    600 14px/1.2 Russo One,
    system-ui,
    sans-serif;
  letter-spacing: 0.4px;
  padding: 10px 24px;
  text-transform: uppercase;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
}
#communityPollBtn:focus-visible,
#communityPollBtn:hover {
  box-shadow:
    0 14px 28px rgba(191, 63, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  filter: brightness(1.04);
  transform: translateY(-1px);
}
#communityPollBtn:active {
  box-shadow:
    0 8px 18px rgba(191, 63, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: none;
}
.pollCommLabel {
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(0, 170, 255, 0.12),
    rgba(0, 133, 204, 0.12)
  );
  border: 1px solid rgba(0, 170, 255, 0.35); /* Border using Chakra Blue */
  border-radius: 999px;
  color: #00aaff;
  display: inline-flex;
  font:
    700 18px/1.1 Russo One,
    system-ui,
    sans-serif;
  gap: 6px;
  justify-content: center;
  letter-spacing: 0.3px;
  margin-top: 10px;
  padding: 6px 12px;
  text-transform: uppercase;
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
  width: 80%;
}
.pollCommLabel:focus-visible,
.pollCommLabel:hover {
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.35);
  transform: translateY(-1px);
}

/* ========================================
   iOS SAFARI MOBILE FIXES
   Fix corner overflow issues on iPhone
========================================== */

/* Disable all EX card pseudo-elements on mobile devices */
@media (hover: none), (max-width: 1900px) {
  .card[data-rarity="ex"]::after,
  .card[data-rarity="ex"]::before {
    display: none !important;
  }
  .card[data-rarity="ex"] {
    animation: mobileExGlow 4s ease-in-out infinite !important;
    background:
      radial-gradient(
        circle at 50% 30%,
        rgba(249, 168, 212, 0.3),
        transparent 60%
      ),
      radial-gradient(
        circle at 20% 80%,
        rgba(147, 197, 253, 0.25),
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(192, 132, 252, 0.25),
        transparent 50%
      ),
      linear-gradient(
        135deg,
        hsl(205 100% 72%/0.25),
        hsl(280 100% 75%/0.3) 30%,
        hsl(320 100% 70%/0.25) 60%,
        hsl(200 100% 70%/0.3)
      ) !important;
    border: 2px solid rgba(147, 197, 253, 0.8) !important;
    border-radius: 14px !important;
    /* Create prismatic border using box-shadow instead of border-image */
    box-shadow:
      0 0 0 1px rgba(147, 197, 253, 0.6),
      0 0 0 2px rgba(249, 168, 212, 0.5),
      0 0 0 3px rgba(255, 255, 153, 0.4),
      0 0 26px rgba(164, 69, 255, 0.18),
      0 0 60px rgba(124, 58, 237, 0.12),
      inset 0 0 18px rgba(66, 99, 255, 0.16),
      inset 0 0 40px rgba(255, 255, 255, 0.1) !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Subtle mobile-safe animation (much lighter than desktop) */

  /* Disable problematic card-face animations but keep card glow */
  .card[data-rarity="ex"] .card-face {
    animation: none !important;
    background: none !important;
  }

  /* === EPIC CARD MOBILE FIXES === */

  /* Disable problematic ::before mask on epic cards */
  .card[data-rarity="epic"]::before {
    display: none !important;
  }

  /* Replace epic border effect with mobile-safe box-shadow */
  .card[data-rarity="epic"] {
    /* Mobile-safe border using box-shadow (conic gradient colors) */
    box-shadow:
      0 0 0 2px rgba(150, 130, 255, 0.6),
      0 0 0 3px rgba(165, 155, 255, 0.4),
      0 0 26px rgba(139, 92, 246, 0.3),
      0 0 60px rgba(124, 58, 237, 0.2),
      inset 0 0 18px rgba(139, 92, 246, 0.2),
      inset 0 0 40px rgba(255, 255, 255, 0.1) !important;
    overflow: visible !important;
  }
}

/* Mobile-safe EX card animation - Optimized for iOS */
@keyframes mobileExGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(147, 197, 253, 0.6),
      0 0 0 2px rgba(249, 168, 212, 0.5),
      0 0 0 3px rgba(255, 255, 153, 0.4),
      0 0 26px rgba(164, 69, 255, 0.18),
      0 0 60px rgba(124, 58, 237, 0.12),
      inset 0 0 18px rgba(66, 99, 255, 0.16),
      inset 0 0 40px rgba(255, 255, 255, 0.1);
    filter: brightness(1) saturate(1);
    transform: translateZ(0) scale3d(1, 1, 1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(147, 197, 253, 0.8),
      0 0 0 2px rgba(249, 168, 212, 0.7),
      0 0 0 3px rgba(255, 255, 153, 0.6),
      0 0 30px rgba(164, 69, 255, 0.25),
      0 0 70px rgba(124, 58, 237, 0.18),
      inset 0 0 22px rgba(66, 99, 255, 0.22),
      inset 0 0 50px rgba(255, 255, 255, 0.15);
    filter: brightness(1.05) saturate(1.1);
    transform: translateZ(0) scale3d(1.01, 1.01, 1);
  }
}

/* LEGENDARY CARD MOBILE FIXES */
@media (hover: none), (max-width: 1900px) {
  .card[data-rarity="legendary"]::after,
  .card[data-rarity="legendary"]::before {
    display: none !important;
  }
  .card[data-rarity="legendary"] {
    animation: mobileLegendaryGlow 3s ease-in-out infinite !important;
    background:
      radial-gradient(
        circle at 30% 20%,
        rgba(255, 215, 0, 0.25),
        transparent 50%
      ),
      radial-gradient(
        circle at 70% 80%,
        rgba(255, 183, 3, 0.2),
        transparent 60%
      ),
      linear-gradient(
        135deg,
        rgba(255, 240, 210, 0.15),
        rgba(255, 215, 0, 0.12),
        rgba(255, 183, 3, 0.1)
      ) !important;
    border: 2px solid rgba(255, 193, 7, 0.6) !important;
    border-radius: 18px !important;

    /* Legendary glow effect */
    box-shadow:
      0 0 0 1px rgba(255, 215, 0, 0.4),
      0 0 24px rgba(255, 193, 7, 0.35),
      0 0 46px rgba(255, 193, 7, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.25) !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Gentle legendary glow animation for mobile */
}

/* Mobile-safe legendary animation */
@keyframes mobileLegendaryGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 215, 0, 0.4),
      0 0 24px rgba(255, 193, 7, 0.35),
      0 0 46px rgba(255, 193, 7, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.25);
    filter: brightness(1) saturate(1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 215, 0, 0.6),
      0 0 30px rgba(255, 193, 7, 0.45),
      0 0 55px rgba(255, 193, 7, 0.3),
      0 1px 0 rgba(255, 255, 255, 0.35);
    filter: brightness(1.08) saturate(1.1);
  }
}
.chat-modal .modalCard {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(90vh, 640px);
  padding: 1px;
  width: min(96vw, 520px);
}
.chat-modal__header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.chat-modal__close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: var(--cursor-clickable, pointer);
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px;
}
.chat-modal__close:hover {
  color: #e6eefb;
}
.chat-modal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
.chat-modal__body > * {
  min-height: 0;
  width: 100%;
}
.pin-modal {
  max-width: 460px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--modal-bg, rgba(16, 20, 24, 0.95));
  color: inherit;
}
.pin-modal__close {
  align-self: flex-end;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.pin-modal__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pin-modal__header h3 {
  margin: 0;
}
.pin-modal__status,
.pin-modal__penalty,
.pin-modal__limit {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}
.pin-modal__notice {
  margin: 0;
  font-size: 0.85rem;
  color: #f97316;
}
.pin-modal__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pin-modal__section h4 {
  margin: 0;
  font-size: 1rem;
}
.pin-modal__pins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pin-modal__pinItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
}
.pin-modal__pinLabel {
  font-weight: 600;
}
.pin-modal__pinMeta {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 2px;
}
.pin-modal__pinActions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pin-modal__pinActions button {
  background: none;
  border: none;
  color: inherit;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  background-color: rgba(248, 113, 113, 0.12);
}

.pin-modal__pinActions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pin-modal__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pin-modal__form.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.pin-modal__formRow {
  display: flex;
  gap: 8px;
}
.pin-modal__select {
  flex: 1;
  min-width: 0;
}
.pin-modal__empty {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}
.meta-effects {
  max-width: 520px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--modal-bg, rgba(16, 20, 24, 0.95));
  color: inherit;
}
.meta-effects__close {
  align-self: flex-end;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.meta-effects__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meta-effects__titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.meta-effects__header h3 {
  margin: 0;
}
.meta-effects__header p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.8;
}
.meta-effects__statusChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(148, 163, 184, 0.14);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.9);
}
.meta-effects__statusChip[data-state="active"] {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(74, 222, 128, 0.4);
  color: rgba(134, 239, 172, 0.95);
}
.meta-effects__statusChip[data-state="inactive"] {
  color: rgba(148, 163, 184, 0.9);
}
.meta-effects__summary {
  margin: 10px 0 2px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.meta-effects__summaryItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.meta-effects__summaryItem dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}
.meta-effects__summaryItem dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.95);
}
.meta-effects__summaryItem dd[data-accent="true"] {
  color: rgba(134, 239, 172, 0.95);
}
.meta-effects__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
}
.meta-effects__empty {
  margin: 0;
  font-style: italic;
  opacity: 0.75;
}
.meta-effects__sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta-effects__section {
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meta-effects__sectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.meta-effects__sectionHeading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.meta-effects__sectionTitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.meta-effects__sectionMeta {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}
.meta-effects__sectionStatus {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(148, 163, 184, 0.14);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.9);
}
.meta-effects__sectionStatus--active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.42);
  color: rgba(191, 219, 254, 0.95);
}
.meta-effects__sectionStatus--inactive {
  opacity: 0.7;
}
.meta-effects__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meta-effects__fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}
.meta-effects__fact::before {
  content: '\2022';
  flex: 0 0 auto;
  opacity: 0.6;
  margin-top: 0.2rem;
}
.meta-effects__factLabel {
  font-weight: 600;
  color: rgba(226, 232, 240, 0.95);
}
.meta-effects__factValue {
  color: rgba(226, 232, 240, 0.85);
}

.meta-effects__pinPanel {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-effects__pinPanel.pin-modal {
  max-width: none;
  width: 100%;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

.meta-effects__pinPanel .pin-modal__section {
  gap: 10px;
}

.meta-effects__pinPanel .pin-modal__formRow {
  flex-wrap: wrap;
  gap: 8px;
}

.meta-effects__pinPanel .pin-modal__formRow select {
  min-width: 0;
  flex: 1 1 220px;
}

.meta-effects__pinPanel .pin-modal__formRow button {
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .meta-effects {
    max-width: calc(100vw - 32px);
    padding: 20px;
  }
  .meta-effects__summary {
    grid-template-columns: 1fr;
  }

  .meta-effects__pinPanel.pin-modal {
    padding: 16px;
  }

  .meta-effects__pinPanel .pin-modal__formRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .meta-effects__pinPanel .pin-modal__formRow select,
  .meta-effects__pinPanel .pin-modal__formRow button {
    width: 100%;
  }
}

.meta-effects-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
}

.meta-effects-btn::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(16, 20, 24, 0.95);
}

.meta-effects-btn[data-meta-effects-count]:not([data-meta-effects-count=""])::after {
  content: attr(data-meta-effects-count);
  display: inline-flex;
}
.chat-modal .adv-pane--chat {
  flex: 1 1 auto;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  position: static;
}
.chat-modal .adv-chat-layout,
.chat-modal .adv-chat-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.chat-modal .adv-chat-layout {
  gap: 12px;
  height: 100%;
}
.chat-modal .adv-chat-sidebar {
  flex: 0 0 auto;
  order: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
height: 40%;
}
.chat-modal .adv-chat-room-list {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.chat-modal .adv-chat-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  order: 2;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat-modal .adv-chat-feed {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}
.chat-modal .adv-chat-compose {
  margin-top: auto;
}
.chat-modal .adv-chat-top {
  gap: 8px;
  grid-template-columns: 1fr;
}
.chat-modal .adv-chat-top-actions {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
}
.chat-modal .adv-chat-top-status {
  width: auto;
}
.chat-modal .global-chat-dock {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

}
.chat-modal .global-chat-dock .adv-pane--chat {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  position: static;
  top: auto;
}
.chat-modal .adv-chat-friends,
.chat-modal .adv-chat-friends-list,
.chat-modal .adv-chat-sidebar-footer {
  flex: 1 1 auto;
  min-height: 0;
}
.chat-modal .adv-chat-friends-list {
  max-height: none;
}
@media (max-width: 1900px) {
  #chatModalBtn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }
  #rsPanel:not(.is-expanded) .rsList {
    display: none;
  }
  .spinCol > #rsPanel {
    background: transparent;
    border-bottom: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    position: static;
    top: auto;
    z-index: auto;
  }
  .spinCol > #rsPanel .sectionTitle {
    margin-bottom: 2px;
    margin-top: 0;
  }
  .spinCol .statsHeader-slot {
    width: 100%;
  }
  .spinCol #statsGrid {
    height: auto;
    margin-top: 0;
    max-height: clamp(140px, 20vh, 240px);
    min-height: clamp(140px, 20vh, 240px);
    padding: 8px 4px;
  }
  .spinCol .statsHeader-slot .statsHeader {
    font-size: small;
    margin-top: 0;
  }
  .infoBody-chat {
    display: none;
  }
  .chat-modal .modalCard {
    border-radius: 18px;
    height: calc(
      min(100vh, 100dvh) - var(--chat-modal-pad-top) -
        var(--chat-modal-pad-bottom)
    );
    max-height: 88vh;
    max-height: none;
    width: 92vw;
    width: 100%;
  }
  .chat-modal {
    align-items: stretch;
    justify-items: stretch;
    --chat-modal-pad-top: max(16px, env(safe-area-inset-top, 0px));
    --chat-modal-pad-right: max(16px, env(safe-area-inset-right, 0px));
    --chat-modal-pad-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    --chat-modal-pad-left: max(16px, env(safe-area-inset-left, 0px));
    padding: var(--chat-modal-pad-top) var(--chat-modal-pad-right)
      var(--chat-modal-pad-bottom) var(--chat-modal-pad-left);
  }

  .chat-modal__header {
    padding-top: 5px;
            padding-right: 5px;
  }
  .adv-chat-layout {
      gap: 3px !important;

  }
}

/* MYTHIC CARD MOBILE FIXES */
@media (hover: none), (max-width: 1900px) {
  .card[data-rarity="mythic"] .cardBody::before,
  .card[data-rarity="mythic"]::after,
  .card[data-rarity="mythic"]::before {
    display: none !important;
  }
  .card[data-rarity="mythic"] {
    animation: mobileMythicFire 2.5s ease-in-out infinite !important;
    background:
      radial-gradient(
        circle at 20% 80%,
        rgba(255, 77, 77, 0.3),
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(255, 138, 0, 0.25),
        transparent 60%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(255, 180, 60, 0.2),
        transparent 40%
      ),
      linear-gradient(
        135deg,
        rgba(255, 120, 200, 0.12),
        rgba(255, 77, 77, 0.15),
        rgba(255, 138, 0, 0.12)
      ) !important;
    border: 2px solid rgba(255, 77, 77, 0.6) !important;
    border-radius: 12px !important;

    /* Mythic glow effect */
    box-shadow:
      0 0 0 1px rgba(255, 138, 0, 0.5),
      0 0 28px rgba(255, 120, 200, 0.22),
      0 0 45px rgba(255, 77, 77, 0.18),
      inset 0 0 20px rgba(255, 180, 60, 0.15) !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    transform-style: flat !important;
  }
  .card[data-rarity="mythic"] .cardBody {
    /* Remove any problematic nested effects */
    background: none !important;
    position: relative !important;
  }

  /* Mythic fire animation for mobile */
}

/* Mobile-safe mythic fire animation */
@keyframes mobileMythicFire {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 138, 0, 0.5),
      0 0 28px rgba(255, 120, 200, 0.22),
      0 0 45px rgba(255, 77, 77, 0.18),
      inset 0 0 20px rgba(255, 180, 60, 0.15);
    filter: brightness(1) saturate(1.1);
  }
  33% {
    box-shadow:
      0 0 0 1px rgba(255, 138, 0, 0.7),
      0 0 35px rgba(255, 120, 200, 0.3),
      0 0 55px rgba(255, 77, 77, 0.25),
      inset 0 0 25px rgba(255, 180, 60, 0.2);
    filter: brightness(1.1) saturate(1.2);
  }
  66% {
    box-shadow:
      0 0 0 1px rgba(255, 77, 77, 0.6),
      0 0 32px rgba(255, 120, 200, 0.28),
      0 0 50px rgba(255, 138, 0, 0.22),
      inset 0 0 22px rgba(255, 180, 60, 0.18);
    filter: brightness(1.05) saturate(1.15);
  }
}

/* Specific iPhone Safari fixes */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 1900px) {
  .card[data-rarity="ex"],
  .card[data-rarity="legendary"],
  .card[data-rarity="mythic"] {
    /* Force software rendering to avoid GPU layer issues */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    transform-style: flat !important;
    will-change: auto !important;
  }
}

/* iOS Safari: prevent top clipping of header/pills inside mythic cards */
@supports (-webkit-touch-callout: none) {
  .card[data-rarity="mythic"] {
    /* iOS can clip first line content when parent has border-radius + transforms */
    overflow: visible;
  }
  .card[data-rarity="mythic"] .cardHead {
    margin-top: -1px; /* keeps overall height consistent */
    padding-top: 2px;
    z-index: 2;
  }

  /* iOS-only: prevent impact chips clipping inside mythic attribute cards */
  .card.attrCard[data-rarity="mythic"] {
    /* Flatten 3D transforms to avoid raster clipping on iOS */
    transform: none !important;
    -webkit-transform: none !important;
    transform-style: flat !important;
  }
  .card.attrCard[data-rarity="mythic"] .cardBody {
    overflow: visible !important; /* allow chips to render fully */
  }
  .card.attrCard[data-rarity="mythic"] .meta {
    margin-top: -1px; /* own layer prevents weird clipping */
    overflow: visible !important;
    padding-top: 1px;
  }
  .card.attrCard[data-rarity="mythic"] .impactChip,
  .card.attrCard[data-rarity="mythic"] .meta {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ================================
   ENCYCLOPEDIA V2.0 ADDITIONS
==================================*/

/* Impact grid layout for better organization */
.impact-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 8px;
}

/* Enhanced impact chips with better color coding */
.impact-chip {
  align-items: center;
  border-radius: 6px;
  display: flex;
  font-size: 0.85rem;
  font-weight: 500;
  justify-content: space-between;
  padding: 6px 12px;
  transition: all 0.2s ease;
}
.impact-chip.impact-positive {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.15),
    rgba(34, 197, 94, 0.08)
  );
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}
.impact-chip.impact-negative {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15),
    rgba(239, 68, 68, 0.08)
  );
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.impact-chip.impact-neutral {
  background: linear-gradient(
    135deg,
    rgba(156, 163, 175, 0.15),
    rgba(156, 163, 175, 0.08)
  );
  border: 1px solid rgba(156, 163, 175, 0.3);
  color: #9ca3af;
}
.impact-stat {
  font-weight: 600;
}
.impact-value {
  font-size: 0.9rem;
  font-weight: 700;
}

/* No impact message */
.impact-none {
  background: rgba(156, 163, 175, 0.05);
  border: 1px dashed rgba(156, 163, 175, 0.2);
  border-radius: 6px;
  color: var(--muted);
  font-style: italic;
  padding: 12px;
  text-align: center;
}

/* Encyclopedia navigation improvements */
.ency-nav-item {
  background: rgba(255, 183, 3, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  margin-bottom: 4px;
  padding: 8px 12px;
}
.nav-category {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.7;
  text-transform: uppercase;
}
.nav-title {
  display: block;
  font-weight: 500;
  margin-top: 2px;
}
.grecaptcha-badge {
  visibility: hidden;
}
#socialRow {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
  width: 100%;
}
.adv-chat-room-nav {
  display: block;
  max-height: 100%;
  overflow: scroll;
}
.adv-chat-room {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 1px;
  min-height: 16%;
  overflow: hidden;
  padding: 6px 40px 6px 9px;
  position: relative;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
  width: 100%;
}

/* Short viewport layout adjustments */
@media (max-height: 600px) {
  .stageBody {
    align-items: center !important;
  }
  .spinCol {
    align-items: start !important;
    display: grid !important;
    gap: 12px !important;
    grid-auto-flow: row dense !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  .spinCol > * {
    grid-column: 1 / span 1 !important;
  }
  .spinCol > #statsGrid {
    align-self: stretch !important;
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    height: 100% !important;
    max-height: none !important;
  }
  #statsGrid {
    max-height: none !important;
    width: 100% !important;
  }
  .inlineTitle {
    margin-bottom: -10px;
  }
  .pointer {
    height: 33px;
    width: 24px;
  }
}

/* Naruto palette with nar-* names */

/* Optional dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --nar-paper: #0b0f1a;
    --nar-ink: #eef2ff;
    --nar-text-solid: #fff1db;
    --nar-text-contrast: #ffffff;
  }
}

/* Base heading: use the variable, not a hard-coded color */

/* Plate sheen */
#lbHeading::after {
  background: linear-gradient(
    135deg,
    rgba(194, 200, 204, 0.18),
    rgba(194, 200, 204, 0.06) 35%,
    rgba(194, 200, 204, 0) 55%,
    rgba(194, 200, 204, 0.08) 70%,
    rgba(194, 200, 204, 0)
  );
  border-radius: inherit;
  content: "";
  inset: 2px;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

/* Text styles switch the variable or do special effects */

/* Solid themed text */
#lbHeading.nar-text-solid {
  --nar-text-color: var(--nar-text-solid);
  text-shadow:
    0 1px 0 #000,
    0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Gradient text */
/* Gradient text on an inner span so the pill background survives */
#lbHeading .nar-text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    90deg,
    var(--nar-orange) 0%,
    var(--nar-rasengan) 55%,
    var(--nar-navy) 100%
  );
  color: transparent !important;
  -webkit-text-fill-color: transparent;

  /* Black stroke */
  -webkit-text-stroke: 1px #000;
}

/* Rasengan glow */
#lbHeading.nar-text-rasengan {
  --nar-text-color: var(--nar-rasengan);
  text-shadow:
    0 0 6px rgba(34, 164, 255, 0.65),
    0 0 14px rgba(34, 164, 255, 0.35),
    1px 1px 0 #000;
}

/* Leaf Village accent */
#lbHeading.nar-text-konoha {
  --nar-text-color: var(--nar-green);
  text-shadow:
    0 0 8px rgba(46, 125, 50, 0.4),
    1px 1px 0 #000;
}

/* Safety nets */
@media (prefers-contrast: more) {
  #lbHeading {
    --nar-text-color: var(--nar-text-contrast);
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }
}
@keyframes chakraPulse {
  0% {
    box-shadow:
      0 0 0 0 var(--nar-chakra-amber),
      0 0 0 0 var(--nar-chakra-blue),
      0 2px 12px rgba(0, 0, 0, 0.35);
  }
  100% {
    box-shadow:
      0 0 0 0 var(--nar-chakra-amber),
      0 0 0 0 var(--nar-chakra-blue),
      0 2px 12px rgba(0, 0, 0, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  #lbHeading {
    animation: none !important;
  }
}
.konoha-accent {
  box-shadow:
    0 0 0 2px var(--nar-green),
    0 0 12px rgba(46, 125, 50, 0.45),
    0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
#lbHeading:focus-visible {
  outline: 3px solid var(--nar-rasengan);
  outline-offset: 2px;
}
#fpsToggleBtn {
  display: none !important;
  visibility: hidden !important;
}

/* === Adventure Standalone Styles === */

/* Adventure Mode UI (modular, accessible, and consistent) */
body.adv-standalone {
  background:
    radial-gradient(
      circle at top left,
      rgba(22, 32, 54, 0.9),
      rgba(6, 10, 16, 0.95)
    ),
    #05080f;
  color: var(--ns-text-primary, #f5f7ff);
  font-family:
    Inter,
    Segoe UI,
    system-ui,
    sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: clamp(16px, 4vw, 32px) clamp(12px, 5vw, 48px) clamp(48px, 8vw, 72px);
}
.adv-standalone-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 4vw, 32px);
  justify-content: space-between;
  margin: 0 auto clamp(24px, 4vw, 40px);
  max-width: 1280px;
}
.adv-standalone-brand {
  align-items: center;
  display: flex;
  gap: clamp(12px, 3vw, 24px);
}
.adv-standalone-logo {
  background: rgba(13, 18, 28, 0.6);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(8, 14, 28, 0.45);
  padding: 8px;
}
.adv-standalone-title {
  font-family:
    Russo One,
    Cinzel,
    system-ui;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}
.adv-grid {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 8px;
}
@media (max-width: 1900px) {
  .adv-grid {
    grid-template-columns: 1fr;
  }
}
.adv-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  padding: 8px;
}
.adv-list {
  display: grid;
  gap: 6px;
  grid-auto-rows: minmax(36px, auto);
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-item {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  display: block;
  padding: 8px 10px;
}
.adv-chat-message-content,
.adv-chat-message-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.adv-chat-message-main {
  align-items: stretch;
}
.adv-chat-message-header {
  align-items: baseline;
  display: flex;
  font-size: 0.8rem;
  gap: 8px;
  gap: 6px;
  justify-content: flex-start;
  letter-spacing: 0.04em;
  min-width: 0;
  width: 100%;
}
.adv-chat-message-header strong {
  flex: 1 1 auto;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.adv-chat-item-time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  letter-spacing: 0.06em;
  margin-left: auto;
  opacity: 0.65;
  padding-left: 12px;
  padding-left: 10px;
  white-space: nowrap;
}
.adv-chat-message-body {
  flex: 1 1 auto;
  font-size: 0.94rem;
  font-size: 0.8rem;
  line-height: 1.32;
  line-height: 1.28;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}
.adv-chat-message-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
}
.adv-modal[hidden] {
  display: none;
}
.adv-modal .modalCard {
  background: rgba(18, 24, 33, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 12px;
  padding: 18px;
  width: min(520px, 92vw);
}
.adv-modal-close {
  background: none;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border: none;
  border-radius: 999px;
  color: var(--accent);
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  font-size: 1.2rem;
  font-size: 1.3rem;
  height: 36px;
  width: 36px;
}
.adv-modal .adv-list {
  max-height: 50vh;
  overflow: auto;
}

/* --- Adventure command center layout --- */
.adv-body {
  background: radial-gradient(
    circle at top,
    rgba(34, 46, 74, 0.6),
    rgba(4, 6, 10, 0.96)
  );
  color: #f4f6fb;
  font-family:
    Inter,
    Segoe UI,
    system-ui,
    -apple-system,
    sans-serif;
  margin: 0;
  min-height: 100vh;
}
.adv-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 auto;
  max-width: 1240px;
  padding: 32px 24px 64px;
}
.adv-screen {
  display: none;
}
.adv-screen.adv-screen--active {
  display: block;
}
.adv-menu-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
}
.adv-menu-header h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  letter-spacing: 0.04em;
  margin: 6px 0;
}
.adv-menu-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  opacity: 0.72;
  text-transform: uppercase;
}
.adv-menu-sub {
  max-width: 56ch;
  opacity: 0.85;
}
.adv-menu-meta {
  align-items: flex-start;
  background: rgba(12, 18, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px;
}
.adv-auth-controls {
  align-items: center;
  display: flex;
  @media (min-width: 1200px) {
    .adv-chat-layout {
      grid-template-columns: minmax(320px, 0.48fr) minmax(360px, 0.52fr);
    }
    .adv-chat-sidebar {
      display: grid;
      gap: 14px;
      grid-template-areas: "header header" "rooms friends";
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto minmax(0, 1fr);
      padding: 14px;
    }
    .adv-chat-sidebar-header {
      grid-area: header;
    }
    .adv-chat-room-nav {
      display: flex;
      grid-area: rooms;
    }
    .adv-chat-room-list,
    .adv-chat-room-nav {
      flex-direction: column;
      min-height: 0;
    }
    .adv-chat-room-list {
      flex: 1 1 auto;
      gap: 8px;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .adv-chat-room {
      flex: initial;
      min-width: 0;
    }
    .adv-chat-sidebar-footer {
      border-top: 0;
      gap: 8px;
      grid-area: friends;
      margin-top: 0;
      padding-top: 0;
    }
    .adv-chat-friends,
    .adv-chat-sidebar-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
    }
    .adv-chat-friends {
      flex: 1 1 auto;
      max-height: none;
    }
    .adv-chat-friends-list {
      height: 100%;
      min-height: 0;
      overflow-y: auto;
    }
  }
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px 12px;
  width: 100%;
}
.auth-btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 600;
  gap: 0.45rem;
  justify-content: center;
  letter-spacing: 0.08em;
  padding-block: 0.55rem;
  padding-inline: 0.85rem;
  text-transform: uppercase;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}
.auth-btn[hidden] {
  display: none !important;
}
.auth-btn:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.65);
  outline-offset: 2px;
}
.auth-btn__icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  display: inline-flex;
  font-size: 1rem;
  height: 1.8rem;
  justify-content: center;
  line-height: 1;
  transition:
    transform 0.2s ease,
    background 0.3s ease;
  width: 1.8rem;
}
.auth-btn:hover .auth-btn__icon {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.1);
}
.auth-btn__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.1;
  text-align: center;
}
.auth-btn__label {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}
.auth-btn__bonus {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}
.auth-btn[data-bonus-active="true"] {
  gap: 0.6rem;
}
.auth-btn--primary {
  background: linear-gradient(
    135deg,
    rgba(34, 139, 230, 0.92),
    rgba(20, 82, 176, 0.92)
  );
  border-color: rgba(58, 170, 255, 0.4);
  box-shadow: 0 10px 24px rgba(10, 24, 40, 0.45);
}
.auth-btn--primary:hover {
  box-shadow: 0 12px 28px rgba(10, 24, 40, 0.6);
  transform: translateY(-1px);
}
.auth-btn--profile {
  background: linear-gradient(
    135deg,
    rgba(32, 40, 60, 0.92),
    rgba(24, 30, 48, 0.92)
  );
  border-color: rgba(0, 212, 255, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #e5f4ff;
}
.auth-btn--profile:hover {
  background: linear-gradient(
    135deg,
    rgba(44, 56, 80, 0.95),
    rgba(28, 36, 56, 0.95)
  );
  transform: translateY(-1px);
}
[data-bonus-pill] {
  align-items: center;
  background: rgba(255, 183, 3, 0.18);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 183, 3, 0.45),
    0 8px 16px rgba(255, 183, 3, 0.18);
  color: #ffe9b0;
  display: inline-flex;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  text-transform: none;
  white-space: nowrap;
}
[data-bonus-pill] .bonus-pill__sign {
  font-size: 1.05em;
  line-height: 1;
  margin-top: -0.05rem;
}
[data-bonus-pill] .bonus-pill__icon {
  height: 1rem;
  width: 1rem;
  filter: drop-shadow(0 0 6px rgba(255, 183, 3, 0.38));
}
[data-bonus-pill] .bonus-pill__amount {
  font-variant-numeric: tabular-nums;
}
[data-bonus-active="false"] [data-bonus-pill] {
  display: none !important;
}
.adv-auth-controls .btn {
  white-space: nowrap;
}
.adv-toggle-row .adv-auth-controls {
  order: 99;
}
.adv-toggle-row #profileModalBtn {
  order: 98;
}
.adv-auth-identity {
  display: grid;
  gap: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  opacity: 0.82;
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.adv-auth-identity .auth-label {
  display: block;
  overflow-wrap: anywhere;
}
.adv-auth-identity .auth-label--prefix {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.adv-auth-identity .auth-label--secondary {
  font-size: 0.68rem;
  opacity: 0.85;
}
@media (max-width: 640px) {
  .adv-auth-identity {
    text-align: center;
    overflow: visible;
  }
}
.adv-stay-toggle {
  align-items: center;
  display: inline-flex;
  font-size: 0.75rem;
  gap: 6px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.adv-stay-toggle[hidden] {
  display: none;
}
.adv-stay-toggle input {
  margin: 0;
}
#advUserBadge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.adv-menu-auth-hint {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.65;
  text-transform: uppercase;
}
.adv-menu-grid {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(220px, 0.28fr) minmax(420px, 1fr);
}
.adv-menu-options {
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  position: sticky;
  top: 24px;
}
.adv-menu-option {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.adv-menu-option.is-active,
.adv-menu-option:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
.adv-menu-link {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  margin-top: 12px;
  text-decoration: none;
}
.adv-menu-panels {
  display: grid;
  grid-auto-rows: 1fr;
}
.adv-menu-panel {
  background: rgba(9, 12, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 28px 60px rgba(3, 6, 10, 0.45);
  display: none;
  gap: 16px;
  min-height: 420px;
  padding: 24px;
}
.adv-menu-panel.is-active {
  display: grid;
}
.adv-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.72;
  text-transform: uppercase;
}
.adv-input,
.adv-textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: inherit;
  font-family:
    JetBrains Mono,
    Menlo,
    Consolas,
    ui-monospace,
    monospace;
  font-size: 0.95rem;
  min-height: 160px;
  padding: 12px 14px;
  width: 100%;
}
.adv-input {
  font-family: inherit;
  min-height: auto;
}
.adv-menu-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}
.adv-menu-grow {
  flex: 1 1 auto;
}
.adv-hint {
  font-size: 0.85rem;
  opacity: 0.7;
}
.adv-status {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  margin-top: 12px;
  min-height: 48px;
  padding: 12px 16px;
}
.adv-menu-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-menu-card {
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}
.adv-menu-heading {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 6px;
  padding: 4px 2px;
  text-transform: uppercase;
}
.adv-menu-card--empty {
  color: rgba(255, 255, 255, 0.64);
  font-style: italic;
  justify-content: center;
}
.adv-menu-card h3 {
  font-size: 1rem;
  margin: 0;
}
.adv-menu-card small {
  display: block;
  opacity: 0.7;
}
.adv-menu-card button {
  white-space: nowrap;
}
.adv-debug {
  background: rgba(6, 9, 14, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-family:
    JetBrains Mono,
    ui-monospace,
    monospace;
  font-size: 0.82rem;
  max-height: 320px;
  overflow: auto;
  padding: 16px;
}

/* --- Run layout --- */
.adv-topbar {
  align-items: center;
  background: #050507;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  font-size: 0.95rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.16em;
  padding: 18px 24px;
  text-transform: uppercase;
}
.adv-topbar,
.adv-topbar-nav {
  display: flex;
  gap: 12px;
}
.adv-topbar-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 10px 18px;
  transition: background 0.18s ease;
}
.adv-topbar-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.adv-layout {
  column-gap: 18px;
  display: grid;
  grid-template-areas: "console party" "controls inventory" "chat chat";
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  grid-template-rows: minmax(320px, 1fr) auto minmax(200px, 0.7fr);
  max-width: 100%;
  min-width: 0;
  row-gap: 0;
}
.adv-pane {
  background: rgba(5, 7, 12, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 26px 58px rgba(2, 4, 8, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 18px;
}
.adv-pane h2 {
  font-size: 1rem;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}
.adv-pane--console {
  grid-area: console;
}
.adv-pane--controls {
  grid-area: controls;
}
.adv-pane--party {
  grid-area: party;
}
.adv-pane--inventory {
  grid-area: inventory;
}
.adv-pane--chat {
  gap: 8px;
  grid-area: chat;
  height: clamp(240px, 48vh, 320px);
  max-height: clamp(240px, 48vh, 320px);
  min-height: 0;
  overflow: hidden;
  padding: 10px;
}
.adv-pane--chat h2 {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}
.adv-chat-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.adv-chat-shell,
.adv-chat-shell.chat-consent-blocked {
  flex: 1 1 auto;
  min-height: 0;
}
.adv-chat-shell.chat-consent-blocked .adv-chat-layout {
  pointer-events: none;
  visibility: hidden;
}
.chat-consent-overlay {
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(3, 6, 12, 0.92);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: absolute;
  text-align: center;
  z-index: 5;
}
.chat-consent-overlay[hidden] {
  display: none;
}
.chat-consent-card {
  background: rgba(10, 15, 24, 0.96);
  border: 1px solid rgba(139, 210, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 12px;
  max-width: 336px;
  padding: 20px;
}
.chat-consent-card h3 {
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.chat-consent-card p {
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
  opacity: 0.85;
}
.chat-consent-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.adv-chat-layout {
  align-items: stretch;
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  grid-template-columns: minmax(260px, 0.42fr) minmax(340px, 0.58fr);
  height: 100%;
  min-height: 0;
}
.adv-chat-sidebar {
  background: rgba(11, 17, 27, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}
.adv-chat-sidebar-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  position: relative;
}
.adv-chat-friends-title,
.adv-chat-section-title,
.adv-chat-sidebar-header h2 {
  color: rgba(200, 232, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin: 0;
  text-align: left;
  text-transform: uppercase;
}
.adv-chat-friends-title,
.adv-chat-section-title {
  margin-bottom: 10px;
  padding-bottom: 6px;
  position: relative;
}
.adv-chat-friends-title::after,
.adv-chat-section-title::after {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(139, 210, 255, 0.45),
    rgba(139, 210, 255, 0.45) 6px,
    rgba(139, 210, 255, 0) 0,
    rgba(139, 210, 255, 0) 12px
  );
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  right: 0;
}
.adv-chat-sidebar-header::after {
  background: linear-gradient(
    90deg,
    rgba(139, 210, 255, 0.35),
    rgba(139, 210, 255, 0)
  );
  border-radius: 999px;
  content: "";
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  position: absolute;
}
.adv-chat-room-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-chat-room-list,
.adv-chat-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adv-chat-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex: 1 1 auto;
  margin-top: 5px;
  min-height: 0;
  padding-top: 6px;
}
.adv-chat-sidebar-divider {
  background: linear-gradient(
    90deg,
    rgba(139, 210, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  border-radius: 999px;
  height: 1px;
}
.adv-chat-friends-btn {
  background: rgba(20, 40, 72, 0.65);
  border: 1px solid rgba(139, 210, 255, 0.35);
  box-shadow: inset 0 0 10px rgba(139, 210, 255, 0.15);
  font-size: 0.68rem;
  justify-content: center;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  white-space: normal;
  width: 100%;
}
.adv-chat-friends-btn,
.adv-chat-send-btn {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}
.adv-chat-friends-btn:hover,
.adv-chat-send-btn:hover {
  box-shadow: 0 18px 32px rgba(6, 12, 24, 0.45);
  transform: translateY(-1px);
}
.adv-chat-friends-btn:active,
.adv-chat-send-btn:active {
  box-shadow: 0 10px 18px rgba(4, 8, 16, 0.45);
  transform: translateY(2px) scale(0.98);
}
.adv-chat-friends {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  gap: 4px;
}
.adv-chat-friends-title {
  opacity: 0.92;
  white-space: normal;
  word-break: break-word;
}
.adv-chat-friends-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  padding-right: 2px;
  scrollbar-width: thin;
}
.adv-chat-friends-list::-webkit-scrollbar {
  width: 6px;
}
.adv-chat-friends-list::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(122, 182, 255, 0.5),
    rgba(122, 182, 255, 0.2)
  );
  border-radius: 999px;
}
.adv-chat-friends-list::-webkit-scrollbar-track {
  background: rgba(11, 17, 27, 0.6);
}
.adv-chat-friend {
  align-items: center;
  background: rgba(18, 32, 50, 0.5);
  border: 1px solid rgba(139, 210, 255, 0.16);
  border-radius: 10px;
  display: flex;
  font-size: 0.72rem;
  gap: 8px;
  justify-content: flex-start;
  letter-spacing: 0.03em;
  min-width: 0;
  padding: 4px 8px;
  width: 100%;
}
.adv-chat-friend-avatar {
  flex-shrink: 0;
}
.adv-chat-friend-info {
  align-items: flex-start;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}
.adv-chat-friend[data-status="online"] {
  background: rgba(32, 56, 82, 0.65);
  border-color: rgba(139, 210, 255, 0.42);
}
.adv-chat-friend-name {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.adv-chat-friend-status-dot {
  background: rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.22);
  height: 8px;
  margin-left: auto;
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
  width: 8px;
}
.adv-chat-friend[data-status="online"] .adv-chat-friend-status-dot {
  background: #3ddc84;
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.45);
}
.adv-chat-friend.adv-chat-friend--empty {
  font-size: 0.7rem;
  justify-content: center;
  letter-spacing: 0.14em;
  opacity: 0.65;
  text-transform: uppercase;
}
.adv-chat-room:focus-visible {
  outline: 2px solid #8bd2ff;
  outline-offset: 3px;
}
.adv-chat-room:hover:not([aria-disabled="true"]) {
  background: rgba(28, 40, 62, 0.78);
  border-color: rgba(139, 210, 255, 0.65);
  box-shadow: 0 18px 28px rgba(8, 12, 22, 0.45);
  transform: translateY(-1px);
}
.adv-chat-room.is-active {
  background: linear-gradient(
    145deg,
    rgba(27, 43, 68, 0.92),
    rgba(15, 25, 40, 0.88)
  );
  border-color: rgba(139, 210, 255, 0.9);
  box-shadow: 0 18px 32px rgba(7, 11, 18, 0.45);
  margin-top: 4px;
}
.adv-chat-room:active:not([aria-disabled="true"]) {
  box-shadow: 0 8px 18px rgba(6, 10, 18, 0.45);
  transform: translateY(2px) scale(0.99);
}
.adv-chat-room.has-unread {
  animation: advChatRoomPulse 2.8s ease-in-out infinite;
  background: linear-gradient(
    155deg,
    rgba(36, 60, 92, 0.85),
    rgba(12, 20, 34, 0.82)
  );
  border-color: rgba(139, 210, 255, 0.75);
}
.adv-chat-room.has-unread::before {
  background: radial-gradient(
    circle at top right,
    rgba(139, 210, 255, 0.35),
    transparent 55%
  );
  content: "";
  inset: 0;
  opacity: 1;
  transform: translate(-2px, -2px);
  transition: opacity 220ms ease;
}
.adv-chat-room.has-unread:hover::before {
  opacity: 1;
}
.adv-chat-room-close {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  opacity: 0.45;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 6px;
  transition:
    opacity 0.16s ease,
    background 0.16s ease;
  width: 22px;
  z-index: 1;
}
.adv-chat-room.is-active .adv-chat-room-close,
.adv-chat-room:hover .adv-chat-room-close {
  opacity: 0.9;
}
.adv-chat-room-close:hover {
  background: rgba(255, 255, 255, 0.12);
  opacity: 0.95;
}
.adv-chat-room-close:focus-visible {
  opacity: 1;
  outline: 2px solid #8bd2ff;
  outline-offset: 2px;
}
.adv-chat-room-close::after,
.adv-chat-room-close::before {
  background: currentColor;
  border-radius: 1px;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background 0.16s ease;
  width: 12px;
}
.adv-chat-room-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.adv-chat-room-unread {
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(247, 118, 45, 0.95),
    rgba(247, 178, 45, 0.9)
  );
  border-radius: 999px;
  box-shadow: 0 6px 12px rgba(247, 138, 55, 0.4);
  color: #0b0f16;
  display: inline-flex;
  font-size: 0.66rem;
    --cursor-default: url("/cursors/default.svg") 2 2, auto;
    --cursor-clickable: url("/cursors/clickable.svg") 8 4, pointer;
    --cursor-loading: url("/cursors/loading.svg") 16 16, progress;
    --cursor-typeable: url("/cursors/typeable.svg") 12 4, text;
  min-width: 20px;
  padding: 0 5px;
  position: absolute;
  right: 36px;
}
@keyframes advChatRoomPulse {
  0%,
  100% {
    box-shadow: 0 18px 28px rgba(8, 12, 22, 0.32);
  }
  45% {
    box-shadow: 0 22px 36px rgba(12, 18, 30, 0.52);
  }
}
.adv-chat-room[aria-disabled="true"],
.adv-chat-room[data-locked="true"] {
  border-style: dashed;
  cursor: var(--cursor-default, auto);
  opacity: 0.65;
}
.adv-chat-room[data-locked="true"]:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(139, 210, 255, 0.45);
  transform: none;
}
.adv-chat-room[data-locked="true"].is-active {
  border-color: rgba(139, 210, 255, 0.6);
  opacity: 0.85;
}
.adv-chat-room-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adv-chat-room-meta,
.adv-chat-room-tag {
  display: none;
}
.adv-chat-main {
  background: rgba(11, 17, 27, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 24px 52px rgba(4, 7, 12, 0.34);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 8px 8px 0;
  position: relative;
}
.adv-chat-main.is-locked::after {
  background: rgba(6, 10, 16, 0.82);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  content: attr(data-locked-message);
  display: grid;
  font-size: 0.9rem;
  inset: 18px;
  letter-spacing: 0.08em;
  place-items: center;
  position: absolute;
  text-transform: uppercase;
}
.adv-chat-top {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}
.adv-chat-top-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
}
.adv-notifications-wrapper {
  align-items: stretch;
  display: inline-flex;
  position: relative;
}
.adv-notifications-btn {
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(28, 46, 72, 0.86),
    rgba(12, 20, 32, 0.78)
  );
  border: 1px solid rgba(139, 210, 255, 0.18);
  border-radius: 999px;
  color: #c8e8ff;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.64rem;
  gap: 0;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.08em;
  margin-right: 6px;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
  width: 36px;
}
.adv-notifications-btn:hover {
  border-color: rgba(139, 210, 255, 0.42);
  box-shadow: 0 6px 16px rgba(8, 16, 26, 0.4);
}
.adv-notifications-btn:focus-visible {
  outline: 2px solid #8bd2ff;
  outline-offset: 3px;
}
.adv-notifications-btn[data-state="has-items"] {
  background: linear-gradient(
    135deg,
    rgba(70, 40, 12, 0.92),
    rgba(32, 18, 6, 0.85)
  );
  border-color: rgba(255, 198, 102, 0.72);
  box-shadow: 0 0 18px rgba(255, 198, 102, 0.35);
  color: #ffdca3;
}
.adv-notifications-icon {
  fill: #8bd2ff;
  height: 20px;
  transition: fill 0.18s ease;
  width: 20px;
}
.adv-notifications-label {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
.adv-notifications-btn[data-state="has-items"] .adv-notifications-icon {
  fill: #ffc666;
}
.adv-notifications-badge {
  align-items: center;
  background: #ffc666;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(6, 10, 16, 0.8);
  color: #121a24;
  display: inline-flex;
  font-size: 0.6rem;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  letter-spacing: 0.08em;
  min-width: 16px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -4px;
}
.adv-notifications-badge[hidden] {
  display: none !important;
}
.adv-notifications-btn--pulse {
  animation: advNotifyPulse 0.75s ease-out;
}
.adv-notifications-popover {
  background: rgba(8, 14, 24, 0.94);
  border: 1px solid rgba(139, 210, 255, 0.24);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(3, 8, 16, 0.6);
  color: #c8e8ff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(320px, 80vw);
  min-width: 220px;
  opacity: 0;
  padding: 14px 16px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  transform: translateY(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  z-index: 40;
}
.adv-notifications-popover::before {
  background: rgba(8, 14, 24, 0.94);
  border-left: 1px solid rgba(139, 210, 255, 0.24);
  border-top: 1px solid rgba(139, 210, 255, 0.24);
  content: "";
  height: 12px;
  position: absolute;
  right: 18px;
  top: -6px;
  transform: rotate(45deg);
  width: 12px;
  z-index: -1;
}
.adv-notifications-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}
.adv-notifications-popover[data-state="has-items"] {
  border-color: rgba(255, 198, 102, 0.56);
  box-shadow: 0 18px 40px rgba(68, 40, 12, 0.55);
}
.adv-notifications-popover__summary {
  color: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.adv-notifications-popover[data-state="has-items"]
  .adv-notifications-popover__summary {
  color: #ffdca3;
}
.adv-notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 0;
}
.adv-notifications-list[hidden] {
  display: none;
}
.adv-notification-item {
  align-items: stretch;
  background: rgba(12, 20, 32, 0.78);
  border: 1px solid rgba(139, 210, 255, 0.18);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}
.adv-notification-item--party {
  border-color: rgba(255, 198, 102, 0.4);
}
.adv-notification-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.adv-notification-item__title {
  color: #fff8e6;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.adv-notification-item__meta {
  color: #c8e8ff;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  opacity: 0.72;
}
.adv-notification-item__note {
  color: #ffdca3;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.adv-notification-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
}
.adv-notification-actions .btn.sm {
  min-width: 96px;
}
.adv-notification-empty {
  background: rgba(12, 20, 32, 0.6);
  border: 1px dashed rgba(139, 210, 255, 0.22);
  border-radius: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 10px;
  text-align: center;
}
@keyframes advNotifyPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.adv-chat-load-btn,
.adv-chat-self-btn {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.adv-chat-room-header h3 {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}
.adv-chat-room-description {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 2px 0 0;
  opacity: 0.66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-chat-top-status {
  align-items: center;
  background: rgba(20, 36, 56, 0.72);
  border: 1px solid rgba(139, 210, 255, 0.28);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.66rem;
  gap: 6px;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  text-transform: uppercase;
}
.adv-chat-top-actions .adv-chat-top-status {
  margin-left: auto;
  order: 99;
}
.adv-chat-presence-label {
  opacity: 0.72;
}
.adv-chat-presence-count {
  align-items: center;
  background: rgba(139, 210, 255, 0.2);
  border-radius: 999px;
  color: #8bd2ff;
  display: inline-flex;
  font-weight: 600;
  height: 24px;
  justify-content: center;
  letter-spacing: 0.1em;
  min-width: 24px;
}

/* removed chat header buttons */
.adv-chat-feed {
  background: linear-gradient(
    160deg,
    rgba(5, 10, 18, 0.92),
    rgba(14, 22, 34, 0.78)
  );
  border: 1px solid rgba(139, 210, 255, 0.12);
  border-radius: 3px;
  display: flex;
  flex: 0 1 clamp(150px, 18vh, 210px);
  flex-direction: column;
  gap: 6px;
  max-height: clamp(150px, 18vh, 210px);
  min-height: 0;
  overflow-y: auto;
  padding: 9px;
  scrollbar-width: thin;
}
.adv-chat-feed::-webkit-scrollbar {
  width: 6px;
}
.adv-chat-feed::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(122, 182, 255, 0.6),
    rgba(122, 182, 255, 0.18)
  );
  border-radius: 999px;
}
.adv-chat-message {
  --sender-accent: #4f8ef7;
  align-items: flex-start;
  background: rgba(18, 28, 42, 0.82);
  border: 1px solid rgba(139, 210, 255, 0.14);
  border-radius: 12px;
  box-shadow: inset 0 0 20px rgba(6, 12, 20, 0.48);
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  position: relative;
  white-space: normal;
}
.adv-chat-message:not(.adv-chat-message--with-avatar) {
  padding-left: 10px;
}
.adv-chat-avatar {
  align-self: center;
  padding-top: 0;
}
.adv-chat-avatar .adv-avatar {
  --avatar-size: 26px;
  font-size: calc(var(--avatar-size) * 0.62);
}
.adv-avatar {
  --avatar-size: 42px;
  --avatar-accent-hex: #4f8ef7;
  --avatar-accent-glow: rgba(79, 142, 247, 0.35);
  align-items: center;
  border: 2px solid var(--avatar-accent-hex);
  border-radius: 999px;
  box-shadow: 0 0 16px var(--avatar-accent-glow);
  display: inline-flex;
  font-size: calc(var(--avatar-size) * 0.55);
  height: var(--avatar-size);
  justify-content: center;
  line-height: 1;
  transition: transform 180ms ease;
  width: var(--avatar-size);
}
.adv-avatar:hover {
  transform: translateY(-1px) scale(1.02);
}
.adv-avatar--sm {
  --avatar-size: 36px;
  font-size: calc(var(--avatar-size) * 0.58);
}
.adv-chat-friend .adv-avatar {
  --avatar-size: 28px;
  font-size: calc(var(--avatar-size) * 0.6);
}
.adv-avatar--md {
  --avatar-size: 24px;
}
.adv-chat-message[data-state="hidden"] {
  background: rgba(80, 18, 18, 0.25);
  border-color: rgba(214, 72, 72, 0.45);
  opacity: 0.55;
}
.adv-chat-status {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  min-height: 10px;
  opacity: 0.78;
}
.adv-chat-compose {
  background: rgba(10, 18, 30, 0.78);
  border: 1px solid rgba(139, 210, 255, 0.12);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 9px 6px;
}
.adv-chat-actions {
  align-items: stretch;
  display: flex;
  gap: 6px;
  width: 100%;
}
.adv-chat-top-actions > .adv-notifications-wrapper {
  flex: 0 0 auto;
}
.adv-chat-input-wrap {
  flex: 1 1 auto;
  min-height: 36px;
  position: relative;
}
.adv-chat-input {
  background: rgba(6, 12, 20, 0.72);
  border: 1px solid rgba(139, 210, 255, 0.2);
  border-radius: 9px;
  color: inherit;
  font-family: Inter, sans-serif;
  font-size: 0.70rem;
  height: 36px;
  line-height: 1.28;
  min-height: 36px;
  padding: 6px 54px 7px 12px;
  resize: vertical;
  width: 100%;
}
.adv-chat-input::placeholder {
  letter-spacing: 0.18em;
  opacity: 0.5;
  text-transform: uppercase;
}
.adv-chat-counter {
  background: rgba(8, 16, 28, 0.82);
  border-radius: 6px;
  bottom: 8px;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  opacity: 0.68;
  padding: 2px 8px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  text-transform: uppercase;
}
.adv-chat-counter.is-over {
  color: #ff9b9b;
}
.adv-chat-send-btn {
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(78, 142, 255, 0.98),
    rgba(40, 96, 212, 0.95)
  );
  border: none;
  border-radius: 9px;
  box-shadow: 0 10px 22px rgba(28, 66, 160, 0.42);
  color: #f4f6fb;
  display: inline-flex;
  font-size: 0.7rem;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.18em;
  min-width: 88px;
  padding: 0 16px;
  text-transform: uppercase;
}
@media (max-width: 1900px) {
  .adv-notifications-popover {
    left: 0;
    max-width: calc(100vw - 36px);
    right: auto;
    transform-origin: top left;
  }
  .adv-notifications-popover::before {
    left: 18px;
    right: auto;
  }
  .adv-chat-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: 1fr;
  }
  .adv-chat-sidebar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    order: 2;
    padding: 10px;
          border-radius: 0;
  }
  .adv-chat-room-nav {
    width: 100%;
  }
  .adv-chat-room-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .adv-chat-room {
    flex: 1 1 0;
    flex: 0 0 auto;
    min-width: 150px;
    padding: 6px 8px;
  }
  .adv-chat-sidebar-footer {
    width: 100%;
  }
  .adv-chat-top {
    gap: 8px;
    grid-template-columns: 1fr;
  }
  .adv-chat-top-actions {
    flex-wrap: wrap;
    gap: 6px;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
  }
  .adv-chat-top-status {
    justify-content: space-between;
    justify-content: center;
    width: auto;
    width: 100%;
  }
  .adv-pane--chat {
    gap: 10px;
    padding: 0px !important;
  }
  .adv-chat-main {
    gap: 10px;
    order: 1;
    padding: 10px 10px 6px;
    border-radius: 0;
  }
  .adv-chat-friends {
    max-height: clamp(160px, 40vh, 220px);
  }
  .adv-chat-top-actions > * {
    flex: 1 1 45%;
  }
  .adv-chat-top-actions > .adv-notifications-wrapper {
    flex: 0 0 auto;
  }
  .adv-chat-feed {
    flex: 1 1 auto;
    flex: 0 1 clamp(160px, 32vh, 220px);
    max-height: clamp(240px, 58vh, 420px);
    max-height: clamp(160px, 32vh, 220px);
    min-height: clamp(220px, 48vh, 360px);
  }
  .adv-chat-message {
    align-items: flex-start;
    gap: 6px;
  }
  .adv-chat-message-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .adv-chat-message-main {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .adv-chat-message-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    white-space: normal;
  }
  .adv-chat-message-header strong {
    font-size: 0.8rem;
  }
  .adv-chat-item-time {
    font-size: 0.72rem;
    margin-left: auto;
    order: 99;
  }
  .adv-chat-message-body {
    line-height: 1.34;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
  }
  .adv-chat-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .adv-chat-input-wrap {
    width: 100%;
  }
  .adv-chat-send-btn {
    height: 36px;
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .adv-chat-actions {
    align-items: stretch;
    flex-direction: row;
    gap: 6px;
  }
  .adv-chat-input-wrap {
    flex: 1 1 auto;
  }
  .adv-chat-send-btn {
    flex: 0 0 auto;
    min-width: 88px;
    width: auto;
  }
}
.adv-chat-message .adv-chat-moderation {
  font-size: 0.75rem;
  grid-column: 1 / span 3;
  letter-spacing: 0.06em;
  opacity: 0.72;
}
.adv-chat-message[data-state="flagged"] .adv-chat-moderation {
  color: #ffb478;
}
.adv-chat-message[data-state="hidden"] .adv-chat-moderation {
  color: #ff9b9b;
}
.adv-chat-empty {
  font-size: 0.9rem;
  opacity: 0.72;
  text-align: center;
}
.adv-social-actions {
  display: grid;
  gap: 12px;
}
.adv-social-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 12px;
  justify-content: space-between;
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.adv-social-limits {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.adv-social-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.adv-social-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 12px;
  padding: 16px;
}
.adv-social-section header {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.adv-social-section h3 {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}
.adv-social-count {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.adv-social-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-social-list--highlight {
  animation: advSocialListPulse 0.95s ease-out 0s 2;
}
@keyframes advSocialListPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 210, 255, 0.45);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(139, 210, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 210, 255, 0);
  }
}
.adv-social-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}
.adv-social-item-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.adv-social-item strong {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.adv-social-item-meta {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.adv-social-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adv-social-empty {
  font-size: 0.85rem;
  opacity: 0.7;
}
.adv-party-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-party-card {
  --party-accent: var(--party-accent, #4f8ef7);
  --party-accent-rgba: var(--party-accent-rgba, rgba(79, 142, 247, 0.28));
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.05),
    rgba(12, 18, 30, 0.75)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 14px 32px rgba(4, 12, 26, 0.45),
    inset 0 0 24px rgba(12, 18, 30, 0.55);
  cursor: var(--cursor-clickable, pointer);
  display: grid;
  gap: 12px;
  padding: 10px 12px;
  transition:
    transform 0.18s ease,
    border 0.18s ease,
    box-shadow 0.18s ease;
}
.adv-party-card:hover {
  border-color: var(--party-accent-rgba);
  box-shadow: 0 20px 44px var(--party-accent-rgba);
  transform: translateY(-4px);
}
.adv-party-card-head {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto 1fr auto;
}
.adv-party-avatar {
  align-items: center;
  display: flex;
  justify-content: center;
}
.adv-party-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adv-party-player {
  align-items: center;
  color: var(--sender-accent, #dce7ff);
  display: none;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.adv-party-role {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  text-transform: uppercase;
}
.adv-party-character {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  opacity: 0.82;
}
.adv-party-detail {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.65;
}
.adv-party-hp {
  color: rgba(235, 245, 255, 0.96);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.adv-bar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  height: 10px;
  overflow: hidden;
}
.adv-bar-fill {
  align-items: center;
  box-sizing: border-box;
  border-radius: inherit;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 6px;
  position: relative;
  transition: width 0.2s ease;
}
.adv-bar-fill.hp-high {
  background: linear-gradient(90deg, #2fd573, #1fb666);
}
.adv-bar-fill.hp-mid {
  background: linear-gradient(90deg, #f2c94c, #f2994a);
}
.adv-bar-fill.hp-low {
  background: linear-gradient(90deg, #ff6b6b, #d64444);
}
.adv-bar-fill.chakra {
  background: linear-gradient(90deg, #4f9dff, #375dff);
}
.adv-console {
  background: #050507;
  border: 2px solid rgba(64, 136, 255, 0.25);
  border-radius: 20px;
  box-shadow:
    0 20px 48px rgba(4, 10, 26, 0.55),
    inset 0 0 30px rgba(16, 40, 90, 0.28);
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  min-height: 50%;
  overflow: hidden;
}
.adv-console-bar {
  align-items: center;
  display: flex;
  font-size: 0.8rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}
.adv-console-bar--hp {
  background: linear-gradient(180deg, #ff4242, #b9002e);
}
.adv-console-bar--chakra {
  background: linear-gradient(180deg, #2b7bff, #0428a8);
}
.adv-console-main {
  align-items: flex-start;
  background: radial-gradient(
    circle at top left,
    rgba(30, 58, 138, 0.32),
    rgba(6, 12, 24, 0.95)
  );
  color: #dce7ff;
  display: flex;
  font-family:
    JetBrains Mono,
    Fira Code,
    SFMono-Regular,
    ui-monospace,
    monospace;
  justify-content: center;
  padding: 32px 28px;
  position: relative;
}
.adv-console-main::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0) 14%
    ),
    linear-gradient(90deg, rgba(15, 40, 78, 0.35), rgba(15, 40, 78, 0) 40%);
  mix-blend-mode: screen;
  opacity: 0.35;
}
.adv-console-main::after,
.adv-console-main::before {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.adv-console-main::after {
  background-image: repeating-linear-gradient(
    rgba(12, 18, 32, 0),
    rgba(12, 18, 32, 0) 8px,
    rgba(12, 18, 32, 0.35) 0,
    rgba(12, 18, 32, 0.35) 9px
  );
  opacity: 0.45;
}
.adv-console-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-color: rgba(108, 160, 255, 0.42) rgba(8, 14, 24, 0.6);
  scrollbar-width: thin;
  width: 100%;
}
.adv-console-feed::-webkit-scrollbar {
  width: 6px;
}
.adv-console-feed::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(108, 160, 255, 0.66),
    rgba(108, 160, 255, 0.22)
  );
  border-radius: 999px;
}
.adv-console-feed::-webkit-scrollbar-track {
  background: rgba(8, 14, 24, 0.6);
}
.adv-console-line {
  align-items: flex-start;
  background: rgba(7, 14, 24, 0.88);
  border: 1px solid rgba(38, 80, 150, 0.38);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(2, 6, 14, 0.6);
  color: inherit;
  display: grid;
  font-size: 0.9rem;
  gap: 12px;
  grid-template-columns: auto auto auto 1fr;
  line-height: 1.5;
  padding: 12px 16px;
  position: relative;
}
.adv-console-line::after {
  background: linear-gradient(
    135deg,
    rgba(72, 115, 198, 0.14),
    rgba(16, 24, 40, 0)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.25;
  pointer-events: none;
  position: absolute;
}
.adv-console-timestamp {
  color: rgba(129, 212, 255, 0.82);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  min-width: 72px;
}
.adv-console-label {
  color: rgba(120, 200, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.adv-console-prompt {
  color: #45ffb4;
  font-size: 0.85rem;
  font-weight: 700;
}
.adv-console-text {
  color: #dce7ff;
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.adv-console-line[data-type="combat"] {
  background: rgba(60, 10, 18, 0.82);
  border-color: rgba(255, 115, 115, 0.55);
}
.adv-console-line[data-type="combat"] .adv-console-label {
  color: rgba(255, 168, 168, 0.95);
}
.adv-console-line[data-type="loot"],
.adv-console-line[data-type="vendor"] {
  background: rgba(54, 36, 8, 0.85);
  border-color: rgba(255, 212, 128, 0.55);
}
.adv-console-line[data-type="loot"] .adv-console-label,
.adv-console-line[data-type="vendor"] .adv-console-label {
  color: rgba(255, 221, 161, 0.95);
}
.adv-console-line[data-type="event"],
.adv-console-line[data-type="rest"] {
  background: rgba(16, 48, 32, 0.82);
  border-color: rgba(118, 222, 177, 0.45);
}
.adv-console-line[data-type="event"] .adv-console-label,
.adv-console-line[data-type="rest"] .adv-console-label {
  color: rgba(144, 243, 198, 0.92);
}
.adv-console-line[data-type="decision"],
.adv-console-line[data-type="status"] {
  background: rgba(20, 36, 68, 0.9);
  border-color: rgba(116, 181, 255, 0.55);
}
.adv-console-line[data-type="decision"] .adv-console-label,
.adv-console-line[data-type="status"] .adv-console-label {
  color: rgba(160, 215, 255, 0.95);
}
.adv-console-line[data-type="route"] {
  background: rgba(44, 20, 68, 0.88);
  border-color: rgba(192, 160, 255, 0.5);
}
.adv-console-line[data-type="route"] .adv-console-label {
  color: rgba(210, 190, 255, 0.92);
}
.adv-console-line[data-type="idle"],
.adv-console-line[data-type="log"] {
  background: rgba(12, 18, 30, 0.88);
  border-color: rgba(92, 118, 160, 0.36);
}
.adv-console-line[data-type="idle"] .adv-console-label,
.adv-console-line[data-type="log"] .adv-console-label {
  color: rgba(146, 176, 214, 0.9);
}
.adv-tile-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-tile {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  font-size: 0.95rem;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
}

/* --- Lobby controls --- */
.adv-lobby-panel {
  background: rgba(4, 7, 11, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  display: grid;
  gap: 16px;
  margin-top: 12px;
  padding: 18px;
}
.adv-lobby-summary {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
}
.adv-lobby-status {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adv-lobby-meta {
  font-size: 0.9rem;
  margin-top: 4px;
  opacity: 0.75;
}
.adv-lobby-code {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  font-weight: 600;
  gap: 10px;
  letter-spacing: 0.18em;
  padding: 8px 12px;
}
.adv-lobby-members {
  display: grid;
  gap: 10px;
}
.adv-lobby-member {
  --member-accent: var(--member-accent, #4f8ef7);
  --member-accent-rgba: var(--member-accent-rgba, rgba(79, 142, 247, 0.24));
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(4, 12, 26, 0.35);
  display: grid;
  gap: 14px;
  grid-template-columns: auto 1fr auto;
  padding: 14px 16px;
  transition:
    border 0.18s ease,
    box-shadow 0.18s ease;
}
.adv-lobby-member:hover {
  border-color: var(--member-accent-rgba);
  box-shadow: 0 14px 36px var(--member-accent-rgba);
}
.adv-lobby-avatar {
  align-items: center;
  display: flex;
  justify-content: center;
}
.adv-lobby-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adv-lobby-name {
  align-items: center;
  color: var(--sender-accent, #dce7ff);
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.adv-lobby-role {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  text-transform: uppercase;
}
.adv-lobby-detail {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.adv-lobby-slot {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-self: end;
}
.adv-lobby-slot select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: inherit;
  min-width: 180px;
  padding: 6px 10px;
}
.adv-lobby-ready {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.adv-lobby-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.adv-lobby-controls > .btn {
  min-width: 140px;
}
.adv-decision {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.adv-decision[hidden] {
  display: none;
}
.adv-decision--highlight {
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.adv-decision-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}
.adv-decision-header h3 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.adv-decision-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 6px 12px;
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.adv-decision-countdown {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
  padding: 2px 10px;
  text-transform: uppercase;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.adv-decision-countdown.is-urgent {
  background: rgba(255, 120, 120, 0.22);
  color: #ffd3c6;
}
.adv-decision-voters {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.adv-decision-voters[hidden] {
  display: none;
}
.adv-decision-voters li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 6px;
  letter-spacing: 0.05em;
  opacity: 0.82;
}
.adv-decision-voter-names {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adv-decision-voter-tag {
  align-items: center;
  background: rgba(102, 196, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  padding: 2px 8px;
}
.adv-decision-voter-tag.is-self {
  background: rgba(102, 196, 255, 0.25);
  color: #e8f7ff;
  font-weight: 600;
}
.adv-decision-voter-pending {
  font-style: italic;
  opacity: 0.76;
}
.adv-decision-options {
  display: grid;
  gap: 10px;
}
.adv-decision-empty {
  font-size: 0.9rem;
  opacity: 0.72;
  padding: 6px 0;
}
.adv-decision-option {
  background: rgba(12, 16, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  display: grid;
  column-gap: 3px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    'title tally'
    'desc tally';
  row-gap: 6px;
  padding: 12px 14px;
  text-align: left;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}
.adv-decision-option:hover:not([disabled]) {
  background: rgba(20, 28, 40, 0.65);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.adv-decision-option.is-selected {
  background: rgba(16, 48, 72, 0.68);
  border-color: rgba(102, 196, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(102, 196, 255, 0.45);
}
.adv-decision-option[disabled] {
  cursor: var(--cursor-disabled, not-allowed);
  opacity: 0.65;
}
.adv-decision-option-title {
  grid-area: title;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adv-decision-option-desc {
  grid-area: desc;
  font-size: 0.9rem;
  opacity: 0.75;
}
.adv-decision-option-effect {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
  font-style: italic;
  margin-top: 2px;
}
#advDecisionPanel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 100%;
  min-height: clamp(240px, 42vh, 320px);
  overflow: hidden;
}
.adv-decision-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.adv-decision-scroll .adv-decision-options {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.adv-decision-scroll .adv-decision-voters {
  flex: 0 0 auto;
  max-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.adv-decision-scroll .adv-decision-options::-webkit-scrollbar,
.adv-decision-scroll .adv-decision-voters::-webkit-scrollbar {
  width: 6px;
}
.adv-decision-scroll .adv-decision-options::-webkit-scrollbar-thumb,
.adv-decision-scroll .adv-decision-voters::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(96, 150, 255, 0.55),
    rgba(96, 150, 255, 0.2)
  );
  border-radius: 999px;
}
.adv-decision-scroll .adv-decision-options::-webkit-scrollbar-track,
.adv-decision-scroll .adv-decision-voters::-webkit-scrollbar-track {
  background: rgba(12, 18, 28, 0.6);
}
.adv-decision-option-tally {
  align-self: start;
  grid-area: tally;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
  justify-self: end;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}
.adv-secondary-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
}
.adv-modal {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(4, 7, 12, 0.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 32px;
  position: fixed;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--modal-fade-duration, 0.22s) ease;
}
.adv-modal.modal-is-visible {
  opacity: 1;
  pointer-events: auto;
}
.adv-modal.modal-is-hiding {
  opacity: 0;
  pointer-events: none;
}
.adv-modal-card {
  background: rgba(8, 12, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 16px;
  padding: 24px;
  width: min(520px, 94vw);
}
.adv-modal-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.adv-modal-body {
  display: grid;
  gap: 12px;
}
.adv-modal-section {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  padding: 12px;
}
.adv-modal-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.adv-modal-pill {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 6px 12px;
}
.adv-modal-loading,
.adv-modal-message {
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  font-size: 0.95rem;
  gap: 12px;
  justify-content: center;
  letter-spacing: 0.04em;
  padding: 32px 0;
}
.adv-modal-message[data-tone="error"] {
  color: #ffd1d1;
}
.adv-modal-message[data-tone="info"] {
  color: rgba(255, 255, 255, 0.8);
}
.adv-spinner {
  animation: adv-spin 0.9s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  border-top-color: #4f8ef7;
  height: 26px;
  width: 26px;
}
@keyframes adv-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.adv-profile-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.adv-profile-header {
  display: flex;
  gap: 16px;
}
.adv-profile-avatar .adv-avatar {
  font-size: 2.2rem;
  height: 72px;
  width: 72px;
}
.adv-profile-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adv-profile-info h3 {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  margin: 0;
}
.adv-profile-title {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adv-profile-badges,
.adv-profile-flair {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adv-profile-chip {
  --badge-bg: rgba(255, 255, 255, 0.08);
  --badge-border: rgba(255, 255, 255, 0.12);
  --badge-text: #f6f7ff;
  align-items: center;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  color: var(--badge-text);
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  text-transform: uppercase;
}
.adv-profile-chip[data-difficulty="bronze"] {
  --badge-bg: rgba(184, 115, 51, 0.18);
  --badge-border: rgba(184, 115, 51, 0.42);
  --badge-text: #f8e3d0;
}
.adv-profile-chip[data-difficulty="silver"] {
  --badge-bg: rgba(192, 192, 192, 0.18);
  --badge-border: rgba(192, 192, 192, 0.45);
  --badge-text: #f2f4f7;
}
.adv-profile-chip[data-difficulty="gold"] {
  --badge-bg: rgba(255, 215, 0, 0.2);
  --badge-border: rgba(255, 215, 0, 0.5);
  --badge-text: #fff4c7;
}
.adv-profile-chip[data-difficulty="platinum"] {
  --badge-bg: rgba(162, 217, 255, 0.2);
  --badge-border: rgba(162, 217, 255, 0.46);
  --badge-text: #e8f6ff;
}
.adv-profile-chip[data-difficulty="diamond"] {
  --badge-bg: rgba(127, 255, 212, 0.2);
  --badge-border: rgba(127, 255, 212, 0.46);
  --badge-text: #e9fff8;
}
.adv-profile-chip[data-difficulty="mythic"] {
  --badge-bg: rgba(168, 85, 247, 0.24);
  --badge-border: rgba(168, 85, 247, 0.5);
  --badge-text: #f2e8ff;
}
.adv-profile-chip[data-difficulty="standard"] {
  --badge-bg: rgba(255, 255, 255, 0.08);
  --badge-border: rgba(255, 255, 255, 0.12);
  --badge-text: #f6f7ff;
}
.adv-profile-chip--status {
  background: rgba(79, 142, 247, 0.2);
  border-color: rgba(79, 142, 247, 0.4);
}
.adv-profile-detail,
.adv-profile-meta {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.adv-profile-status {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  min-height: 20px;
}
.adv-profile-status[hidden] {
  display: none;
}
.adv-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.adv-profile-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.adv-profile-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.adv-profile-metric {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  text-align: center;
}
.adv-profile-metric-value {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.adv-profile-metric-label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adv-profile-trigger {
  cursor: var(--cursor-clickable, pointer);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.adv-profile-trigger:focus-visible {
  outline: 2px solid rgba(79, 142, 247, 0.8);
  outline-offset: 2px;
}
.adv-profile-trigger:hover {
  box-shadow: 0 6px 18px rgba(79, 142, 247, 0.18);
  transform: translateY(-1px);
}
.adv-chat-handle {
  align-items: baseline;
  background: none;
  border: none;
  color: inherit;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  font: inherit;
  gap: 4px;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.adv-chat-handle:focus-visible {
  outline: 2px solid rgba(79, 142, 247, 0.8);
  outline-offset: 2px;
}
.adv-chat-handle:hover {
  color: rgba(102, 196, 255, 0.95);
}
.adv-chat-handle-separator {
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.adv-social-item--clickable {
  cursor: var(--cursor-clickable, pointer);
}
.adv-social-item--clickable:hover {
  background: rgba(79, 142, 247, 0.08);
}
.adv-social-item--clickable button {
  cursor: var(--cursor-clickable, pointer);
}
@media (max-width: 1900px) {
  .adv-menu-grid {
    grid-template-columns: 1fr;
  }
  .adv-menu-options {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: static;
  }
  .adv-menu-option {
    flex: 1 1 calc(50% - 10px);
    text-align: center;
  }
  .adv-layout {
    column-gap: 0;
    grid-template-areas: "console" "controls" "party" "inventory" "chat";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 18px;
  }
  .adv-lobby-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .adv-menu-actions {
    flex-wrap: wrap;
  }
  .adv-secondary-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .adv-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .adv-topbar-nav {
    flex-wrap: wrap;
    width: 100%;
  }
  .adv-topbar-btn {
    flex: 1 1 auto;
    text-align: center;
  }
  #advDecisionPanel {
    min-height: 0;
  }
  .adv-decision-scroll .adv-decision-options {
    max-height: 260px;
  }
}

/* === Meta Shop Styles === */
.meta-shop-launch {
  align-items: center;
  appearance: none;
  background: rgba(255, 204, 0, 0.16);
  border: 1px solid rgba(255, 214, 102, 0.48);
  border-radius: 999px;
  color: #fff7d6;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  width: 40px;
}
.meta-shop-launch:hover {
  background: rgba(255, 204, 0, 0.26);
  border-color: rgba(255, 229, 153, 0.7);
  transform: translateY(-1px);
}
.meta-shop-launch:focus-visible {
  outline: 2px solid rgba(255, 229, 153, 0.65);
  outline-offset: 3px;
}
.meta-shop-launch.is-active,
.meta-shop-launch[aria-pressed="true"] {
  background: rgba(255, 204, 0, 0.32);
  border-color: rgba(153, 101, 7, 0.75);
  box-shadow: 0 0 0 2px rgba(255, 229, 153, 0.28);
}
.meta-shop-launch__icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.meta-shop-launch svg {
  display: block;
  height: 100%;
  width: 100%;
}
.meta-shop-launch:hover svg stop:first-child {
  stop-color: #fde68a;
}
.meta-shop-launch:hover svg stop:last-child {
  stop-color: #f59e0b;
}
.meta-wallet-badge {
  align-items: center;
  appearance: none;
  background: rgba(255, 196, 64, 0.1);
  border: 1px solid rgba(255, 196, 64, 0.35);
  border-radius: 999px;
  border-style: solid;
  border-width: 1px;
  color: #facc15;
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  font-weight: 600;
  font: inherit;
  gap: 6px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  text-transform: uppercase;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
  position: relative;
}
.meta-wallet-badge:hover {
  background: rgba(255, 196, 64, 0.16);
}
.meta-wallet-badge:focus-visible {
  outline: 2px solid rgba(250, 204, 21, 0.6);
  outline-offset: 3px;
}

.meta-wallet-badge__indicator {
  align-items: center;
  background: #f97316;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: #0f172a;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0 5px;
  pointer-events: none;
  position: absolute;
  right: -6px;
  top: -6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.meta-wallet-badge__indicator[hidden] {
  display: none;
}

.meta-wallet-badge.has-meta-alert {
  background: rgba(255, 196, 64, 0.18);
  box-shadow: 0 0 0 2px rgba(255, 196, 64, 0.18);
}
.meta-interaction-panel {
  margin-bottom: 16px;
}

.meta-investments {
  position: relative;
}
.meta-investments__header {
  margin-bottom: 12px;
}
.meta-investments__header h2 {
  font-size: 1.25rem;
  margin: 0;
}
.meta-investments__header p {
  color: rgba(226, 232, 240, 0.75);
  font-size: 0.9rem;
  margin: 6px 0 0;
}
.meta-investments__overview {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  .meta-investments__overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .meta-investments__overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.meta-investments__stat {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}
.meta-investments__stat-value {
  font-size: 1.1rem;
  font-weight: 600;
}
.meta-investments__stat-label {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.meta-investments__stat-helper {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.75rem;
}
.meta-investments__body {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .meta-investments__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meta-investments__body > .is-history {
    grid-column: span 2;
  }
}
.meta-investments-section {
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.meta-investments-section.is-history {
  opacity: 0.88;
}
.meta-investments-section h3 {
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}
.meta-investments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.meta-investments-list.is-compact {
  gap: 8px;
}
.meta-investments-empty {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.85rem;
  margin: 0;
}
.meta-investment-form__option {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: auto 1fr;
  padding: 8px 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.meta-investment-form__option:hover {
  background: rgba(59, 130, 246, 0.08);
}
.meta-investment-form__option[data-selected="true"] {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.45);
}
.meta-investment-form__option input {
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.meta-investment-form__option:focus-within {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}
.meta-investment-form__option > span:first-of-type {
  font-weight: 600;
}
.meta-investment-form__option-desc {
  color: rgba(148, 163, 184, 0.85);
  display: block;
  font-size: 0.75rem;
  margin-top: 4px;
}
.meta-investment-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}
.meta-investment-card.is-ready {
  background: rgba(15, 32, 24, 0.6);
  border-color: rgba(34, 197, 94, 0.35);
}
.meta-investment-card.is-history {
  opacity: 0.9;
}
.meta-investment-card__header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.meta-investment-card__title {
  font-size: 0.95rem;
  font-weight: 600;
}
.meta-investment-card__rate {
  color: rgba(94, 234, 212, 0.85);
  font-size: 0.8rem;
}
.meta-investment-card[data-outcome="loss"] .meta-investment-card__rate {
  color: rgba(248, 113, 113, 0.8);
}
.meta-investment-card__row {
  align-items: center;
  color: rgba(226, 232, 240, 0.76);
  display: flex;
  font-size: 0.85rem;
  gap: 12px;
  justify-content: space-between;
}
.meta-investment-card__meta {
  color: rgba(148, 163, 184, 0.8);
  display: flex;
  font-size: 0.8rem;
  gap: 12px;
  justify-content: space-between;
}
.meta-investment-card__meta .is-gain {
  color: rgba(74, 222, 128, 0.9);
}
.meta-investment-card__meta .is-loss {
  color: rgba(248, 113, 113, 0.9);
}
.meta-investment-card__status {
  color: rgba(148, 206, 255, 0.95);
  font-size: 0.82rem;
  font-weight: 600;
}
.meta-investment-card__progress {
  background: rgba(30, 41, 59, 0.65);
  border-radius: 999px;
  height: 6px;
  margin-top: -4px;
  overflow: hidden;
}
.meta-investment-card__progress-fill {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.8), rgba(16, 185, 129, 0.85));
  height: 100%;
  transition: width 0.3s ease;
}

.meta-investment-form__helper,
.meta-investment-form__notice,
.meta-investment-form__warning,
.meta-investment-form__error {
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 6px 0 0;
}

.meta-investment-form__helper {
  color: rgba(203, 213, 225, 0.78);
}

.meta-investment-form__warning {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  color: rgba(250, 204, 21, 0.92);
  padding: 8px 10px;
}

.meta-investment-form__notice {
  color: rgba(251, 191, 36, 0.85);
}

.meta-investment-form__error {
  color: rgba(248, 113, 113, 0.9);
}

.meta-investment-form__forecast {
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px 12px;
}
.meta-investment-form__forecast-line {
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.82rem;
  margin: 0;
}
.meta-investment-form__forecast-line + .meta-investment-form__forecast-line {
  margin-top: 6px;
}
.meta-investment-form__forecast-line strong {
  color: rgba(125, 211, 252, 0.85);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.meta-investment-form__forecast-line.is-downside strong {
  color: rgba(248, 113, 113, 0.85);
}

.meta-panel.meta-missions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.meta-missions__header {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  padding: 16px 18px;
}
.meta-missions__header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}
.meta-missions__header p {
  color: rgba(203, 213, 225, 0.82);
  flex-basis: 100%;
  font-size: 0.85rem;
  margin: 0;
}
.meta-missions__badge {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(74, 222, 128, 0.38);
  border-radius: 999px;
  color: rgba(134, 239, 172, 0.95);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 12px;
}
.meta-missions__timer {
  color: rgba(148, 206, 255, 0.9);
  font-size: 0.78rem;
  margin: 0;
}
.meta-missions__body {
  display: grid;
  gap: 16px;
}
.meta-missions-section {
  background: rgba(10, 22, 41, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px 16px;
}
.meta-missions-section > h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}
.meta-missions-section.is-actions {
  background: rgba(15, 23, 42, 0.62);
}
.meta-missions-section.is-rotation {
  background: rgba(15, 23, 42, 0.6);
}
.meta-missions-section.is-ready {
  background: rgba(17, 24, 39, 0.65);
  border-color: rgba(59, 130, 246, 0.4);
}
.meta-missions-empty {
  color: rgba(148, 163, 184, 0.78);
  font-size: 0.85rem;
  margin: 0;
}
.meta-missions-list,
.meta-missions-rotation-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.meta-missions-list.is-compact {
  gap: 10px;
}
.meta-mission-rotation {
  background: rgba(15, 23, 42, 0.48);
  border: 1px dashed rgba(148, 163, 184, 0.26);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
}
.meta-mission-rotation__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}
.meta-mission-rotation__title {
  font-size: 0.9rem;
  font-weight: 600;
}
.meta-mission-rotation__difficulty {
  background: rgba(248, 113, 113, 0.16);
  border-radius: 999px;
  color: rgba(248, 113, 113, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  text-transform: uppercase;
}
.meta-mission-rotation__success {
  color: rgba(94, 234, 212, 0.85);
  font-size: 0.72rem;
  font-weight: 600;
}
.meta-mission-rotation__summary {
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.82rem;
  margin: 0;
}
.meta-mission-rotation__reward {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.78rem;
  margin: 0;
}
.meta-mission-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}
.meta-mission-card.is-active {
  border-color: rgba(56, 189, 248, 0.28);
}
.meta-mission-card.is-ready {
  background: rgba(17, 24, 39, 0.62);
  border-color: rgba(59, 130, 246, 0.42);
}
.meta-mission-card.is-history {
  opacity: 0.92;
}
.meta-mission-card__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}
.meta-mission-card__title {
  font-size: 0.95rem;
  font-weight: 600;
}
.meta-mission-card__pill {
  background: rgba(248, 113, 113, 0.18);
  border-radius: 999px;
  color: rgba(248, 113, 113, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  text-transform: uppercase;
}
.meta-mission-card__success {
  color: rgba(94, 234, 212, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
}
.meta-mission-card__summary {
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.85rem;
  margin: 0;
}
.meta-mission-card__meta {
  color: rgba(148, 163, 184, 0.82);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.8rem;
}
.meta-mission-card__meta .is-gain {
  color: rgba(74, 222, 128, 0.9);
}
.meta-mission-card__meta .is-loss {
  color: rgba(248, 113, 113, 0.9);
}
.meta-mission-card__reward {
  color: rgba(148, 206, 255, 0.9);
  font-size: 0.78rem;
  margin: 0;
}
.meta-mission-card__story {
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.78rem;
  margin: 0;
}
.meta-mission-card__boost {
  color: rgba(250, 204, 21, 0.85);
  font-size: 0.78rem;
  margin: 0;
}
.meta-mission-card__status {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.meta-mission-card__status.is-success {
  color: rgba(74, 222, 128, 0.92);
}
.meta-mission-card__status.is-failed {
  color: rgba(248, 113, 113, 0.92);
}
.meta-mission-card__progress {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 999px;
  height: 6px;
  margin-top: -2px;
  overflow: hidden;
}
.meta-mission-card__progress-fill {
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.85), rgba(56, 189, 248, 0.85));
  height: 100%;
  transition: width 0.3s ease;
}
.meta-missions-ack {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.meta-missions-ack .meta-investment-form__error {
  margin: 0;
}
.meta-missions-selected {
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 12px;
}
.meta-missions-selected__name {
  font-size: 0.85rem;
  font-weight: 600;
}
.meta-missions-selected__meta {
  color: rgba(94, 234, 212, 0.85);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.meta-missions-selected__summary {
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.82rem;
  margin: 0;
}
.meta-missions-selected__reward {
  color: rgba(148, 206, 255, 0.9);
  font-size: 0.78rem;
}

@media (min-width: 640px) {
  .meta-missions__header {
    align-items: center;
  }
  .meta-missions__header p {
    flex-basis: auto;
  }
}

@media (min-width: 960px) {
  .meta-missions__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meta-missions-section.is-ready,
  .meta-missions-section.is-history {
    grid-column: span 2;
  }
}

.meta-panel.meta-momentum {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.meta-momentum__header {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}
.meta-momentum__header h2 {
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0;
}
.meta-momentum__stored {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.88rem;
  margin: 0;
}
.meta-momentum__progress {
  appearance: none;
  background: rgba(15, 23, 42, 0.45);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  width: 100%;
}
.meta-momentum__progress::-webkit-progress-bar {
  background: rgba(15, 23, 42, 0.45);
  border-radius: 999px;
}
.meta-momentum__progress::-webkit-progress-value {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(59, 130, 246, 0.9));
  border-radius: 999px;
}
.meta-momentum__progress::-moz-progress-bar {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(59, 130, 246, 0.9));
  border-radius: 999px;
}
.meta-momentum__status {
  color: rgba(134, 239, 172, 0.94);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}
.meta-panel[aria-busy="true"] .meta-momentum__status {
  color: rgba(148, 206, 255, 0.9);
}
.meta-momentum__header[data-ready="false"] .meta-momentum__status {
  color: rgba(248, 113, 113, 0.9);
}
.meta-momentum__body {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .meta-momentum__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meta-momentum__history {
    grid-column: span 2;
  }
}
.meta-momentum__stats {
  background: rgba(10, 22, 41, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  padding: 16px 18px;
}
.meta-momentum__stats dt {
  color: rgba(148, 163, 184, 0.86);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}
.meta-momentum__stats dd {
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}
.meta-momentum__stat-helper {
  color: rgba(148, 163, 184, 0.78);
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 4px;
}
.meta-momentum__form {
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  display: grid;
  gap: 16px;
  padding: 16px 18px;
}
.meta-momentum__field {
  display: grid;
  gap: 8px;
}
.meta-momentum__label {
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.9rem;
  font-weight: 600;
}
.meta-momentum__input {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 10px;
  color: rgba(248, 250, 252, 0.95);
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.meta-momentum__input:focus {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22);
  outline: none;
}
.meta-momentum__input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.meta-momentum__helper {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.8rem;
  margin: 0;
}
.meta-momentum__error {
  color: rgba(248, 113, 113, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
}
.meta-momentum__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-momentum__preset {
  align-items: center;
  appearance: none;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.92);
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 4px;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.meta-momentum__preset:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(129, 140, 248, 0.5);
}
.meta-momentum__preset:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 3px;
}
.meta-momentum__preset:disabled {
  background: rgba(15, 23, 42, 0.38);
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(148, 163, 184, 0.6);
  cursor: not-allowed;
}
.meta-momentum__submit {
  justify-self: start;
  min-width: 0;
}
.meta-panel[aria-busy="true"] .meta-momentum__submit {
  cursor: progress;
}
.meta-momentum__history {
  background: rgba(10, 22, 41, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}
.meta-momentum__history h3 {
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}
.meta-momentum__history-empty {
  color: rgba(148, 163, 184, 0.78);
  font-size: 0.85rem;
  margin: 0;
}
.meta-momentum-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.meta-momentum-history__entry {
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}
.meta-momentum-history__entry.is-cash-in {
  border-color: rgba(34, 197, 94, 0.35);
}
.meta-momentum-history__header {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.meta-momentum-history__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}
.meta-momentum-history__entry.is-earn .meta-momentum-history__title {
  color: rgba(56, 189, 248, 0.92);
}
.meta-momentum-history__entry.is-cash-in .meta-momentum-history__title {
  color: rgba(134, 239, 172, 0.95);
}
.meta-momentum-history__time {
  color: rgba(148, 163, 184, 0.78);
  font-size: 0.75rem;
  margin: 0;
  white-space: nowrap;
}
.meta-momentum-history__details,
.meta-momentum-history__upgrades,
.meta-momentum-history__boost {
  color: rgba(203, 213, 225, 0.85);
  font-size: 0.8rem;
  margin: 0;
}
.meta-momentum-history__boost {
  color: rgba(129, 140, 248, 0.85);
}

.meta-keeper-alert {
  align-items: center;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  color: #4ade80;
  display: flex;
  font-size: 0.7rem;
  font-weight: 600;
  gap: 0;
  padding: 3px 8px;
  max-width: 100%;
  position: absolute;
  right: 16px;
  top: 12px;
  pointer-events: none;
  z-index: 2;
}
.meta-keeper-alert__text {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.meta-panel {
  backdrop-filter: blur(8px);
  background: var(--meta-shop-bg);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 16px;
}
.meta-panel-header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.meta-panel-header h2 {
  font-size: 1.4rem;
  margin: 0;
}
.meta-panel-header p {
  color: rgba(226, 232, 240, 0.76);
  margin: 4px 0 0;
  font-size: 0.9rem;
}
.meta-panel-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
}

.meta-action-btn {
  align-items: center;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  color: rgba(248, 250, 252, 0.9);
  cursor: var(--cursor-clickable, pointer);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  min-width: 38px;
  padding: 8px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}

.meta-action-btn:hover {
  background: rgba(30, 41, 59, 0.78);
  border-color: rgba(226, 232, 240, 0.55);
  color: #f8fafc;
  transform: translateY(-1px);
}

.meta-action-btn:focus-visible {
  outline: 2px solid rgba(250, 204, 21, 0.6);
  outline-offset: 2px;
}

.meta-action-btn:active {
  transform: translateY(0);
}

.meta-action-btn[disabled] {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.25);
  color: rgba(148, 163, 184, 0.6);
  cursor: not-allowed;
  transform: none;
}

.meta-action-btn[disabled]:hover {
  transform: none;
}

.meta-action-icon {
  height: 18px;
  pointer-events: none;
  width: 18px;
}

.meta-action-btn.is-loading .meta-action-icon {
  animation: meta-action-spin 0.9s linear infinite;
}

@keyframes meta-action-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.meta-catalog {
  overflow-y: auto;
}

.meta-shop-modal {
  align-items: center;
  background: rgba(7, 12, 22, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 32px 24px;
  position: fixed;
  z-index: 2200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.meta-shop-modal.modal-is-visible {
  opacity: 1;
  pointer-events: auto;
}
.meta-shop-modal.modal-is-hiding {
  pointer-events: none;
}
.meta-shop-modal[hidden] {
  display: none;
}
.meta-shop-backdrop {
  inset: 0;
  position: absolute;
}
.meta-shop-dialog {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(7, 11, 20, 0.6);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: min(1080px, 94vw);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.meta-shop-dialog:focus {
  outline: 2px solid rgba(248, 250, 252, 0.45);
  outline-offset: 4px;
}
.meta-shop-dialog .meta-panel-header {
  background: rgba(15, 23, 42, 0.97);
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: 0;
  padding: 20px 24px;
  padding-right: 110px;

}
.meta-shop-dialog .meta-shop-shell {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 24px 24px;
}
.meta-shop-dialog .meta-shopkeepers {
  overflow-y: auto;
  max-height: 76vh;
}
.meta-shop-dialog .meta-panel-header .meta-panel-actions {
  align-items: flex-start;
}
.meta-shop-close {
  margin: 0;
}
body.meta-shop-active {
  overflow: hidden;
}
.meta-shop-shell {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 260px) 1fr;
}
.meta-shopkeepers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meta-keeper-card {
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.6),
    rgba(15, 23, 42, 0.6)
  );
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  cursor: var(--cursor-clickable, pointer);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 72px 12px 16px;
  position: relative;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.meta-keeper-card:hover {
  border-color: rgba(250, 204, 21, 0.65);
  transform: translateY(-2px);
}
.meta-keeper-card.is-active {
  border-color: rgba(250, 204, 21, 0.95);
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.22);
}
.meta-keeper-card h4 {
  color: var(--meta-keeper-color-default);
  font-size: 0.9rem;
  margin: 0;
  transition: color 0.2s ease;

}
.meta-keeper-card[data-shop-id="tontons_forge"] h4 {
  color: var(--meta-keeper-color-tontons-forge);
}
.meta-keeper-card[data-shop-id="tsubakis_bladeworks"] h4 {
  color: var(--meta-keeper-color-tsubakis-bladeworks);
}
.meta-keeper-card[data-shop-id="mount_myoboku_scrolls"] h4 {
  color: var(--meta-keeper-color-mount-myoboku-scrolls);
}
.meta-keeper-card[data-shop-id="lees_training_pavilion"] h4 {
  color: var(--meta-keeper-color-lees-training-pavilion);
}
.meta-keeper-card[data-shop-id="kuramas_mirage_den"] h4 {
  color: var(--meta-keeper-color-kuramas-mirage-den);
}
.meta-keeper-card[data-shop-id="ichiraku_provisions"] h4 {
  color: var(--meta-keeper-color-ichiraku-provisions);
}
.meta-keeper-card[data-shop-id="orochi_biotech"] h4 {
  color: var(--meta-keeper-color-orochi-biotech);
}
.meta-keeper-card[data-shop-id="gato_trading_co"] h4 {
  color: var(--meta-keeper-color-gato-trading-co);
}
.meta-keeper-card span {
  color: rgba(226, 232, 240, 0.72);
  display: block;
  font-size: 0.7rem;
  margin-top: 4px;
}
.meta-keeper-card.is-placeholder {
  cursor: not-allowed;
  filter: grayscale(0.2);
}
.meta-keeper-card.is-placeholder::after {
  background: rgba(15, 23, 42, 0.1);
  content: '';
  position: relative;
  inset: 0;
  position: absolute;
  z-index: 1;
}
.meta-keeper-card.is-placeholder .meta-keeper-badge {
  align-items: center;
  color: rgba(226, 232, 240, 0.92);
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  inset: 0;
  justify-content: center;
  letter-spacing: 0.12em;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}
.meta-keeper-card.is-placeholder .meta-keeper-avatar,
.meta-keeper-card.is-placeholder .meta-keeper-copy {
  opacity: 0.15;
}
.meta-keeper-card.is-placeholder .meta-keeper-avatar img {
  filter: grayscale(0.6);
}
.meta-keeper-tooltip {
  align-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.9), rgba(251, 146, 60, 0.85));
  border: 1px solid rgba(249, 115, 22, 0.65);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.25);
  color: rgba(30, 41, 59, 0.9);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  text-transform: none;
  width: 22px;
}
.meta-keeper-tooltip span {
  display: block;
  transform: translateY(-1px);
}
.meta-keeper-avatar {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(148, 163, 184, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  flex-shrink: 0;
  height: 56px;
  overflow: hidden;
  position: relative;
  width: 56px;
}
.meta-keeper-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.meta-keeper-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}
.meta-catalog-header h3 {
  font-size: 1.25rem;
  margin: 0;
}
.meta-catalog-header p {
  color: rgba(226, 232, 240, 0.76);
  margin: 6px 0 8px;
  font-size: 0.8rem;
}
.meta-catalog-meta {
  color: rgba(148, 163, 184, 0.9);
  display: flex;
  font-size: 0.85rem;
  gap: 12px;
}
.meta-upgrade-summary {
  background: linear-gradient(
    145deg,
    rgba(59, 130, 246, 0.18),
    rgba(37, 99, 235, 0.08)
  );
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 14px;
  color: rgba(226, 232, 240, 0.92);
  margin-top: 18px;
  padding: 16px 18px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.meta-upgrade-summary.is-empty {
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: none;
  opacity: 0.85;
}
.meta-upgrade-summary h4 {
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.meta-upgrade-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.meta-upgrade-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 12px 14px;
  position: relative;
}
.meta-upgrade-card[data-has-sub="1"] {
  cursor: pointer;
  padding-right: 36px;
}
.meta-upgrade-card[data-has-sub="1"]::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(226, 232, 240, 0.8);
  content: '';
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 20px;
  transform: rotate(0deg);
  transition: transform 0.25s ease;
  width: 0;
}
.meta-upgrade-card.is-expanded[data-has-sub="1"]::after {
  transform: rotate(180deg);
}
.meta-upgrade-card[data-has-sub="1"]:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.6);
  outline-offset: 2px;
}
.meta-upgrade-card[data-rank="0"] {
  opacity: 0.75;
}
.meta-upgrade-card header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.meta-upgrade-title {
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meta-upgrade-rank {
  color: rgba(248, 250, 252, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
}
.meta-upgrade-body {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.86rem;
  margin: 0;
}
.meta-upgrade-extra {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
}
.meta-upgrade-sub {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.75rem;
  margin: 0;
}
.meta-upgrade-card.is-expanded .meta-upgrade-extra {
  max-height: 200px;
  margin-top: 6px;
  opacity: 1;
}
.meta-items-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 18px;
}
.meta-conversation {
  --conversation-accent: #a855f7;
  --conversation-accent-strong: #c084fc;
  --conversation-shadow: rgba(168, 85, 247, 0.22);
  --conversation-parchment: rgba(76, 29, 149, 0.12);
  --conversation-line: rgba(192, 132, 252, 0.2);
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(170deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.68));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
  margin-bottom: 12px;
}
.meta-conversation::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 60%),
    repeating-linear-gradient(90deg, transparent, transparent 52px, rgba(255, 255, 255, 0.05) 52px, rgba(255, 255, 255, 0.05) 104px);
  opacity: 0.25;
  pointer-events: none;
  mix-blend-mode: screen;
}
.meta-conversation::after {
  content: '';
  position: absolute;
  inset: -20% -35%;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 65%);
  opacity: 0.4;
  pointer-events: none;
}
.meta-conversation[hidden] {
  display: none;
}
.meta-conversation-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.74) 52%, rgba(11, 18, 33, 0.92) 100%), linear-gradient(180deg, transparent, var(--conversation-parchment));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.meta-conversation-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  flex-wrap: wrap;
}
.meta-conversation-crest {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 65%), rgba(15, 23, 42, 0.85);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.9) inset, 0 0 0 3px rgba(255, 255, 255, 0.04), 0 18px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.meta-conversation-crest::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}
.meta-conversation-crest__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.meta-conversation-heading {
  flex: 1;
  min-width: 0;
}
.meta-conversation-title {
  margin: 0;
  color: rgba(248, 250, 252, 0.96);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.meta-conversation-seal {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--conversation-accent), var(--conversation-accent-strong));
  border: 1px solid rgba(15, 23, 42, 0.4);
  color: rgba(15, 23, 42, 0.92);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 255, 255, 0.12);
}
.meta-conversation[data-village="konohagakure"] .meta-conversation-seal {
  color: rgba(88, 28, 18, 0.92);
}
.meta-conversation[data-village="shipping-consortium"] .meta-conversation-seal {
  color: rgba(8, 47, 73, 0.92);
}
.meta-conversation[data-village="land-of-iron"] .meta-conversation-seal {
  color: rgba(69, 26, 3, 0.9);
}
.meta-conversation-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meta-conversation-line {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 22px;
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.95rem;
  line-height: 1.6;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.6));
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
}
.meta-conversation-line::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--conversation-accent), transparent 85%);
  opacity: 0.85;
}
.meta-conversation-line.is-fresh {
  animation: meta-conversation-fade-highlight 2.6s ease-out;
  border-color: var(--conversation-accent-strong);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.4);
}
.meta-conversation-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 18px;
}
.meta-conversation-status-pill {
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.6));
  color: rgba(226, 232, 240, 0.88);
  display: inline-flex;
  font-size: 0.72rem;
  gap: 6px;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}
.meta-conversation-status-pill.is-success {
  background: linear-gradient(140deg, rgba(34, 197, 94, 0.32), rgba(15, 23, 42, 0.7));
  border-color: rgba(74, 222, 128, 0.4);
  color: rgba(220, 252, 231, 0.96);
}
.meta-conversation-status-pill.is-cooldown {
  background: linear-gradient(140deg, rgba(37, 99, 235, 0.32), rgba(15, 23, 42, 0.7));
  border-color: rgba(96, 165, 250, 0.38);
  color: rgba(191, 219, 254, 0.94);
}
.meta-conversation-status-pill.is-error {
  background: linear-gradient(140deg, rgba(185, 28, 28, 0.35), rgba(15, 23, 42, 0.78));
  border-color: rgba(248, 113, 113, 0.42);
  color: rgba(254, 226, 226, 0.92);
}
.meta-conversation-choices {
  display: grid;
  gap: 12px;
}
.meta-conversation-choice {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 12px 48px 12px 28px;
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.62));
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: rgba(248, 250, 252, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  text-align: left;
  line-height: 1.55;
  white-space: normal;
}
.meta-conversation-choice::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--conversation-accent);
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}
.meta-conversation-choice:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.meta-conversation-choice:hover:not([disabled]),
.meta-conversation-choice:focus-visible {
  border-color: var(--conversation-accent);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32), 0 0 26px rgba(249, 115, 22, 0.25);
  transform: translateY(-1px);
}
.meta-conversation-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.8), 0 0 0 4px var(--conversation-accent);
}
.meta-conversation-choice[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}
.meta-conversation-cooldown {
  background: rgba(15, 23, 42, 0.85);
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.8);
  display: inline-flex;
  font-size: 0.68rem;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.55);
}
.meta-conversation-empty {
  color: rgba(203, 213, 225, 0.86);
  font-size: 0.82rem;
  margin: 0;
}
.meta-conversation[data-pending="true"] .meta-conversation-choice {
  pointer-events: none;
}
.meta-conversation[data-pending="true"] .meta-conversation-choice:not([disabled]) {
  opacity: 0.85;
}
.meta-conversation-status-pill.is-success,
.meta-conversation-status-pill.is-cooldown,
.meta-conversation-status-pill.is-error {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}
@keyframes meta-conversation-fade-highlight {
  0% {
    background: linear-gradient(145deg, rgba(248, 250, 252, 0.16), rgba(15, 23, 42, 0.7));
    box-shadow: 0 18px 34px rgba(34, 197, 94, 0.22);
  }
  60% {
    background: linear-gradient(145deg, rgba(248, 250, 252, 0.08), rgba(15, 23, 42, 0.7));
    box-shadow: 0 12px 28px rgba(34, 197, 94, 0.16);
  }
  100% {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.6));
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
  }
}

@media (max-width: 640px) {
  .meta-conversation-shell {
    padding: 16px;
    gap: 14px;
  }
  .meta-conversation-crest {
    width: 52px;
    height: 52px;
  }
  .meta-conversation-crest__img {
    width: 100%;
    height: 100%;
  }
  .meta-conversation-title {
    font-size: 0.98rem;
    letter-spacing: 0.1em;
  }
  .meta-conversation-seal {
    font-size: 0.59rem;
    letter-spacing: 0.14em;
    padding: 5px 10px;
  }
  .meta-conversation-line {
    padding: 10px 14px 10px 20px;
    font-size: 0.8rem;
  }
  .meta-conversation-choice {
    padding: 11px 42px 11px 24px;
    letter-spacing: 0.13em;
    justify-content: flex-start;
  }
  .meta-conversation-choice::after {
    right: 24px;
  }
  .meta-conversation-choices {
    gap: 10px;
  }
}
.meta-items-section {
  display: grid;
  gap: 12px;
}
.meta-items-section + .meta-items-section {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 16px;
}
.meta-items-heading-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.meta-items-heading {
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.meta-items-heading-timer {
  color: rgba(148, 163, 184, 0.88);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
.meta-items-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.meta-item-card {
  align-items: stretch;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  min-height: 100%;
  padding: 14px;
  position: relative;
}
.meta-item-rotation {
  align-items: center;
  background: rgba(15, 23, 42, 0.70);
  border-radius: 12px;
  color: rgba(248, 250, 252, 0.9);
  display: inline-flex;
  font-size: 0.62rem;
  gap: 4px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  position: absolute;
  right: 12px;
  top: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.meta-item-rotation[data-at-cap="true"] {
  background: rgba(127, 29, 29, 0.85);
  border-color: rgba(248, 113, 113, 0.55);
  color: rgba(254, 226, 226, 0.95);
}
.meta-item-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
}
.meta-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meta-item-icon {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28);
  display: flex;
  flex-shrink: 0;
  height: 56px;
  justify-content: center;
  overflow: hidden;
  width: 56px;
}
.meta-item-icon img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.meta-item-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-item-card h5 {
  font-size: 1rem;
  margin: 0;
}
.meta-item-card p {
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.85rem;
  margin: 6px 0 0;
}
.meta-item-card .meta-item-odds {
  color: rgba(148, 191, 255, 0.82);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  margin: 2px 0 0;
}
.meta-item-card .meta-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.meta-item-card .meta-item-tags span {
  background: rgba(15, 118, 110, 0.24);
  border-radius: 999px;
  color: rgba(45, 212, 191, 0.82);
  font-size: 0.7rem;
  padding: 3px 8px;
}
.meta-item-card .meta-item-meta {
  color: rgba(148, 163, 184, 0.9);
  display: flex;
  font-size: 0.75rem;
  gap: 8px;
  margin-top: 6px;
}
.meta-item-controls {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  width: 100%;
}
.meta-item-card button {
  min-width: 120px;
}
.meta-item-controls .btn {
  min-width: 160px;
  width: 100%;
}
.meta-item-card.is-owned {
  border-style: dashed;
  opacity: 0.7;
}
.meta-item-card.is-owned:not([data-repeatable="true"]) button.btn.primary {
  pointer-events: none;
}
.meta-item-card[data-rarity="common"] {
  background: var(--rarity-common-bg);
  border-color: var(--rarity-common-outline);
  color: var(--rarity-common-text);
}
.meta-item-card[data-rarity="uncommon"] {
  background: var(--rarity-uncommon-bg);
  border-color: var(--rarity-uncommon-outline);
  color: var(--rarity-uncommon-text);
}
.meta-item-card[data-rarity="rare"] {
  background: var(--rarity-rare-bg);
  border-color: var(--rarity-rare-outline);
  color: var(--rarity-rare-text);
}
.meta-item-card[data-rarity="epic"] {
  background: var(--rarity-epic-bg);
  border-color: var(--rarity-epic-outline);
  color: var(--rarity-epic-text);
}
.meta-item-card[data-rarity="legendary"] {
  background: var(--rarity-legendary-bg);
  border-color: var(--rarity-legendary-outline);
  color: var(--rarity-legendary-text);
}
.meta-item-card[data-rarity="mythic"] {
  background: var(--rarity-ex-bg);
  border-color: var(--rarity-ex-outline);
  color: var(--rarity-ex-text);
}
@media (max-width: 1900px) {
  .meta-shop-shell {
    grid-template-columns: 1fr;
  }
  .meta-shopkeepers {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .meta-keeper-card {
    min-width: 200px;
  }
}

@media (max-width: 1100px) {
  .meta-items-list {
    grid-template-columns: 1fr;
  }
  .meta-item-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .meta-item-controls {
    align-items: stretch;
  }
  .meta-item-controls .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .meta-shop-modal {
    padding: 16px;
  }
  .meta-shop-dialog {
    max-width: 100%;
    border-radius: 12px;
    max-height: 80vh;
  }
  .meta-shop-dialog .meta-panel-header {
    padding: 16px 18px;
    padding-right: 18px;
  }
  .meta-shop-dialog .meta-shop-shell {
    padding: 0 18px 18px;
  }
}

@media (max-width: 600px) {
  .meta-shop-modal {

    padding: 12px;
  }
  .meta-shop-dialog {
    border-radius: 10px;
    max-height: 80vh;
  }
  .meta-shop-dialog .meta-panel-header {
    padding: 16px;
    padding-right: 16px;
  }
  .meta-shop-dialog .meta-shop-shell {
    padding: 0 16px 16px;
  }
  .meta-panel-actions {
    top: 12px;
    right: 12px;
  }
  .meta-action-btn {
    height: 34px;
    min-width: 34px;
    padding: 6px;
  }
}


.adv-controls-grid {


  display: none;
}

.adv-decision-footer{


  display: none;
}

.noticePanel {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(14, 24, 36, 0.78);
  border-radius: 14px;
  border: 1px solid rgba(81, 120, 162, 0.25);
  color: #dceaff;
  box-shadow: 0 6px 18px rgba(5, 10, 18, 0.35);
}

.noticePanel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.noticePanel__title {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ff3ff;
}

.noticePanel__stamp {
  font-size: 0.75rem;
  color: rgba(220, 234, 255, 0.7);
}

.noticePanel__message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.noticePanel[data-state="loading"] .noticePanel__message {
  opacity: 0.7;
}

.noticePanel[data-state="error"] {
  border-color: rgba(255, 138, 138, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 114, 114, 0.2);
}

.noticePanel[data-state="error"] .noticePanel__message {
  color: #ffd1d1;
}

.auth-label { color: gold; }

.adv-toggle-row {

margin-top: 5px;

}

.ryo-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ryo-amount .emoji-img {
  display: block;
  flex-shrink: 0;
}

.meta-btn-ryo {
  gap: 6px;
}

.meta-btn-ryo__icon {
  width: 18px;
  height: 18px;
}

.meta-btn-ryo__amount {
  font-weight: 600;
}

.meta-btn-ryo__unit {
  font-weight: 500;
  font-size: 0.85em;
  opacity: 0.85;
}

.meta-item-controls .btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
}

.meta-btn-ryo__prefix,
.meta-btn-ryo__separator,
.meta-btn-ryo__suffix {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.meta-btn-ryo__separator {
  font-weight: 600;
}

.meta-btn-ryo__suffix {
  margin-left: 0;
  font-size: 0.85em;
  opacity: 0.85;
}