@import url("/fonts/fonts.css");

:root {
  --cr-site-header-height: 64px;
  --cr-site-bg: #050509;
  --cr-site-panel: rgba(8, 8, 13, 0.94);
  --cr-site-panel-strong: rgba(12, 11, 17, 0.98);
  --cr-site-line: rgba(200, 168, 56, 0.42);
  --cr-site-line-strong: #c8a838;
  --cr-site-gold: #ffd166;
  --cr-site-gold-bright: #ffd100;
  --cr-site-text: #f2ead5;
  --cr-site-muted: #a99d7b;
  --cr-site-focus: #fff2a8;
  --cr-site-shadow: 0 10px 34px rgba(0, 0, 0, 0.62);
  --cr-site-brand-track: 220px;
  --cr-site-action-track: 522px;
}

html {
  scrollbar-gutter: stable;
}

body.cr-public-page {
  min-width: 280px;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  color: var(--cr-site-text);
  background-color: var(--cr-site-bg);
  background-image:
    linear-gradient(90deg, rgba(3, 4, 8, 0.96), rgba(4, 6, 12, 0.72), rgba(3, 4, 8, 0.96)),
    radial-gradient(circle at 18% 14%, rgba(207, 88, 69, 0.18), transparent 32%),
    radial-gradient(circle at 80% 16%, rgba(91, 184, 213, 0.13), transparent 30%),
    url("/cryptic-realm-loading-bg.webp");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* The admin SPA uses the same header contract, while its own theme controls
   the dashboard surface (including the light theme). */
body.cr-admin-page {
  min-width: 280px;
  min-height: 100svh;
}

/* Legacy centered utility pages keep their content centered after the shared
   header is injected as the first body child. */
body.cr-public-page > .cr-site-header {
  grid-column: 1 / -1;
  align-self: start;
  width: 100%;
}

/* Legacy static pages and the admin entry may carry an older inline body rule.
   The public shell owns the surface so every entry has the same visual identity. */
body.cr-public-page {
  background-color: var(--cr-site-bg) !important;
  background-image:
    linear-gradient(90deg, rgba(3, 4, 8, 0.96), rgba(4, 6, 12, 0.72), rgba(3, 4, 8, 0.96)),
    radial-gradient(circle at 18% 14%, rgba(207, 88, 69, 0.18), transparent 32%),
    radial-gradient(circle at 80% 16%, rgba(91, 184, 213, 0.13), transparent 30%),
    url("/cryptic-realm-loading-bg.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body.cr-public-page :where(a.button, button.button, a.card, .contact-link, .back-link) {
  min-height: 44px;
  box-sizing: border-box;
}

body.cr-public-page :where(a, button):focus-visible {
  outline: 3px solid var(--cr-site-focus);
  outline-offset: 3px;
}

.cr-site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  min-height: var(--cr-site-header-height);
  border-bottom: 1px solid var(--cr-site-line);
  background:
    linear-gradient(180deg, rgba(25, 21, 15, 0.98), rgba(8, 8, 13, 0.97)),
    var(--cr-site-panel-strong);
  box-shadow: var(--cr-site-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.cr-site-header-inner {
  display: grid;
  /* Standalone pages have no action rail. Giving them the game's empty third
     column squeezed the navigation into the brand at desktop widths. */
  grid-template-columns: var(--cr-site-brand-track) minmax(0, 1fr);
  align-items: center;
  width: min(1880px, 100%);
  min-height: var(--cr-site-header-height);
  margin: 0 auto;
  padding:
    6px max(18px, env(safe-area-inset-right))
    6px max(18px, env(safe-area-inset-left));
  box-sizing: border-box;
}

/* Dashboard headers own a real realm and account action rail, so they retain
   the third column without forcing that empty space on every public page. */
.cr-dash-header .cr-site-header-inner {
  grid-template-columns: var(--cr-site-brand-track) minmax(0, 1fr) var(--cr-site-action-track);
}

/* The game landing header reuses this shell but has a wider action rail
   (account, music, tip, wallet). Keep its Login/Register control in the
   reserved center track instead of allowing the action rail to cover it. */
.homepage-header.cr-site-header {
  min-height: var(--cr-site-header-height);
  padding: 0;
}

.homepage-header.cr-site-header .cr-site-header-inner {
  grid-template-columns: var(--cr-site-brand-track) minmax(0, 1fr) var(--cr-site-action-track);
}

.homepage-header.cr-site-header .header-actions {
  grid-column: 3;
  grid-row: 1;
}

/* The game entry carries the same public navigation plus a compact action rail.
   Keep both inside the shared header grid so account, tip, music, and wallet
   controls cannot paint over navigation labels at any desktop width. */
.homepage-header.cr-site-header .header-menu-container {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--cr-site-action-track));
  align-items: center;
  min-width: 0;
}

.homepage-header.cr-site-header .homepage-nav {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.homepage-header.cr-site-header .homepage-nav > .nav-list {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.homepage-header.cr-site-header .header-actions {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
  gap: 6px;
  overflow: visible;
}

.homepage-header.cr-site-header #cr-user-dropdown {
  flex: 0 1 150px;
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
}

.homepage-header.cr-site-header .cr-user-trigger {
  width: 100%;
  min-width: 0;
  max-width: 150px;
  gap: 5px;
  padding-inline: 6px;
}

.homepage-header.cr-site-header .cr-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homepage-header.cr-site-header .homepage-music-btn {
  flex: 0 0 40px;
  width: 40px;
}

.homepage-header.cr-site-header .donate-cta {
  flex: 0 1 112px;
  min-width: 0;
  max-width: 112px;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding-inline: 8px;
}

.homepage-header.cr-site-header .donate-cta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homepage-header.cr-site-header #cr-wallet-panel,
.homepage-header.cr-site-header .cr-wallet-widget,
.homepage-header.cr-site-header .cr-wallet-trigger {
  min-width: 0;
  max-width: 190px;
}

.homepage-header.cr-site-header #cr-wallet-panel {
  flex: 0 1 190px;
}

.homepage-header.cr-site-header .cr-wallet-widget,
.homepage-header.cr-site-header .cr-wallet-trigger {
  width: 100%;
}

/* The full menu cannot share one horizontal row with the action rail on a
   laptop-sized viewport. It gets a stable second row, not an overlap. */
@media (min-width: 1025px) and (max-width: 1650px) {
  .homepage-header.cr-site-header .cr-site-header-inner {
    grid-template-columns: minmax(180px, 200px) minmax(0, 1fr);
    grid-template-rows: var(--cr-site-header-height) 52px;
    min-height: calc(var(--cr-site-header-height) + 52px);
  }

  .homepage-header.cr-site-header .header-menu-container {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 410px);
  }

  .homepage-header.cr-site-header .homepage-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .homepage-header.cr-site-header .homepage-nav::-webkit-scrollbar {
    display: none;
  }

  .homepage-header.cr-site-header .homepage-nav > .nav-list {
    width: max-content;
    max-width: none;
    justify-content: flex-start;
  }

  .homepage-header.cr-site-header .header-actions {
    max-width: 410px;
  }
}

/* Below the desktop contract, use the same hamburger drawer behavior as the
   public shell. This also covers 861px to 1024px tablets, where the old game
   header had no visible menu toggle but still had too little room for the rail. */
@media (max-width: 1024px) {
  .homepage-header.cr-site-header .cr-site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .homepage-header.cr-site-header .mobile-menu-toggle {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .homepage-header.cr-site-header .header-menu-container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--cr-site-line);
    background: rgba(8, 8, 13, 0.98);
    box-shadow: var(--cr-site-shadow);
    z-index: 99;
  }

  .homepage-header.cr-site-header.menu-open .header-menu-container {
    display: flex;
  }

  .homepage-header.cr-site-header .homepage-nav {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .homepage-header.cr-site-header .homepage-nav > .nav-list {
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }

  .homepage-header.cr-site-header .homepage-nav > .nav-list > .nav-item,
  .homepage-header.cr-site-header .homepage-nav > .nav-list > .nav-item > .nav-link,
  .homepage-header.cr-site-header .homepage-nav > .nav-list > .nav-item > .cr-site-more,
  .homepage-header.cr-site-header .homepage-nav > .nav-list > .nav-item > .cr-site-more > summary {
    width: 100%;
  }

  .homepage-header.cr-site-header .header-actions {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 360px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.cr-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  color: var(--cr-site-gold);
  font-family: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.cr-site-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 209, 0, 0.2));
}

.cr-site-brand:hover {
  color: var(--cr-site-gold-bright);
}

.cr-site-nav {
  display: flex;
  grid-column: 2;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  overflow: visible;
}

.cr-site-nav > .nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-site-nav > .nav-list > .nav-item {
  display: flex;
  flex: 0 0 auto;
}

.cr-site-nav :is(a, button.nav-link, summary.nav-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 12.5px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--cr-site-muted);
  font-family: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.cr-site-nav :is(a, button.nav-link, summary.nav-link):hover,
.cr-site-nav :is(a, button.nav-link, summary.nav-link):focus-visible {
  color: var(--cr-site-gold-bright);
  border-color: var(--cr-site-line-strong);
  background: rgba(255, 209, 0, 0.05);
  box-shadow: 0 0 10px rgba(255, 209, 0, 0.18);
}

.cr-site-nav :is(a, button.nav-link, summary.nav-link)[aria-current="page"],
.cr-site-nav button.nav-link.active {
  color: var(--cr-site-gold-bright);
  border-color: var(--cr-site-line-strong);
  background: linear-gradient(
    180deg,
    rgba(200, 168, 56, 0.2),
    rgba(110, 90, 42, 0.05) 65%,
    rgba(11, 11, 18, 0.4)
  );
  box-shadow:
    inset 0 0 6px rgba(255, 209, 0, 0.14),
    0 0 9px rgba(255, 209, 0, 0.18);
}

.cr-site-more {
  position: relative;
  flex: 0 0 auto;
}

.cr-site-more > summary {
  list-style: none;
  cursor: pointer;
}

.cr-site-more > summary::-webkit-details-marker {
  display: none;
}

.cr-site-more > summary::after {
  content: ' ▾';
  font-size: 0.85em;
}

.cr-site-more[open] > summary,
.cr-site-more > summary[aria-current="page"] {
  color: var(--cr-site-gold-bright);
  border-color: var(--cr-site-line-strong);
  background: rgba(255, 209, 0, 0.08);
}

.cr-site-more-menu {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  min-width: 190px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--cr-site-line);
  border-radius: 5px;
  background: rgba(8, 8, 13, 0.98);
  box-shadow: var(--cr-site-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.cr-site-more-menu a {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  white-space: nowrap;
}

.cr-site-more-menu :is(a, button.nav-link) {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  padding: 7px 13px;
  white-space: nowrap;
}

.cr-site-realm-menu {
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(200, 168, 56, 0.24);
  padding-bottom: 5px;
}

.cr-site-realm-summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 13px;
  color: var(--cr-site-gold);
  font-family: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}

.cr-site-realm-summary::-webkit-details-marker {
  display: none;
}

.cr-site-realm-summary::after {
  content: ' ▾';
  font-size: 0.85em;
}

.cr-site-realm-menu[open] > .cr-site-realm-summary {
  color: var(--cr-site-gold-bright);
  background: rgba(255, 209, 0, 0.06);
}

.cr-site-realm-list {
  display: grid;
  gap: 2px;
}

.cr-site-realm-list .nav-link {
  justify-content: flex-start;
  width: 100%;
  min-height: 38px;
  padding: 7px 13px;
  font-size: 12px;
  text-align: left;
}

.cr-site-menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid var(--cr-site-line);
  border-radius: 5px;
  background: rgba(255, 209, 0, 0.04);
  color: var(--cr-site-gold);
  cursor: pointer;
}

.cr-site-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background: currentColor;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.cr-site-header.is-open .cr-site-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.cr-site-header.is-open .cr-site-menu-toggle span:nth-child(2) {
  opacity: 0;
}

.cr-site-header.is-open .cr-site-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.cr-site-brand:focus-visible,
.cr-site-menu-toggle:focus-visible,
.cr-site-nav :is(a, button.nav-link, summary.nav-link):focus-visible,
.cr-site-more > summary:focus-visible {
  outline: 3px solid var(--cr-site-focus);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .cr-site-nav :is(a, button.nav-link, summary.nav-link) {
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* Standalone pages and the dashboard do not have the game's second-row action
   layout. Switch those shells to the shared drawer before their full menu can
   crowd the brand, while keeping desktop More flyouts out of a scroll clip. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .cr-site-header:not(.homepage-header) .cr-site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .cr-site-header:not(.homepage-header) .cr-site-brand {
    min-width: 0;
  }

  .cr-site-header:not(.homepage-header) .cr-site-menu-toggle {
    display: block;
    grid-column: 2;
  }

  .cr-site-header:not(.homepage-header) .cr-site-nav {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    max-height: calc(100svh - var(--cr-site-header-height) - 12px);
    padding: 8px 0 max(12px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }

  .cr-site-header:not(.homepage-header) .cr-site-nav.is-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-site-header:not(.homepage-header) .cr-site-nav > .nav-list,
  .cr-site-header:not(.homepage-header) .cr-site-nav > .nav-list > .nav-item {
    display: contents;
  }

  .cr-site-header:not(.homepage-header) .cr-site-more {
    display: grid;
    width: 100%;
  }

  .cr-site-header:not(.homepage-header) .cr-site-more > summary {
    width: 100%;
  }

  .cr-site-header:not(.homepage-header) .cr-site-more-menu {
    position: static;
    min-width: 0;
    max-height: none;
    margin-top: 4px;
    box-shadow: none;
  }

  .cr-site-header:not(.homepage-header) .cr-site-nav :is(a, button.nav-link, summary.nav-link) {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: normal;
  }

  .cr-dash-header .cr-dash-actions {
    display: none;
  }
}

@media (max-width: 1024px) {
  body.cr-site-menu-open {
    overflow: hidden;
  }

  .cr-site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .cr-site-brand {
    min-width: 0;
  }

  .cr-site-menu-toggle {
    display: block;
    grid-column: 2;
  }

  .cr-site-nav {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    max-height: calc(100svh - var(--cr-site-header-height) - 12px);
    padding: 8px 0 max(12px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }

  .cr-site-nav.is-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-site-nav > .nav-list,
  .cr-site-nav > .nav-list > .nav-item {
    display: contents;
  }

  .cr-site-more {
    display: grid;
    width: 100%;
  }

  .cr-site-more > summary {
    width: 100%;
  }

  .cr-site-more-menu {
    position: static;
    min-width: 0;
    max-height: none;
    margin-top: 4px;
    box-shadow: none;
  }

  .cr-site-nav :is(a, button.nav-link, summary.nav-link) {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .cr-site-header-inner {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .cr-site-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cr-site-nav.is-open {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1920px) and (pointer: coarse) {
  :root {
    --cr-site-header-height: 78px;
  }

  .cr-site-brand {
    font-size: 20px;
  }

  .cr-site-brand img {
    width: 54px;
    height: 54px;
  }

  .cr-site-nav :is(a, button.nav-link, summary.nav-link) {
    min-height: 58px;
    padding-inline: 18px;
    font-size: 16px;
  }
}

@media (max-width: 1024px), (pointer: coarse) {
  body.cr-public-page {
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-site-menu-toggle span,
  .cr-site-nav :is(a, button.nav-link, summary.nav-link) {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cr-site-header,
  .cr-site-menu-toggle,
  .cr-site-nav :is(a, button.nav-link, summary.nav-link),
  .cr-site-nav :is(a, button.nav-link, summary.nav-link)[aria-current="page"] {
    border-color: ButtonText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
}