:root {
  --bk-gold: #ffd76a;
  --bk-gold-strong: #f2b632;
  --bk-cream: #fff0b6;
  --bk-ink: #090806;
  --bk-panel: rgba(24, 20, 12, .68);
  --bk-panel-deep: rgba(10, 9, 7, .82);
  --bk-line: rgba(255, 215, 106, .24);
  --bk-muted: rgba(255, 236, 180, .66);
  --bk-shadow: 0 30px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 244, 204, .12);
  --bk-radius-xl: clamp(24px, 3vw, 44px);
  --bk-radius-lg: 26px;
}

html { background: var(--bk-ink); }

body {
  color: var(--bk-cream);
  background:
    radial-gradient(circle at 12% 8%, rgba(218, 163, 46, .18), transparent 34rem),
    radial-gradient(circle at 88% 40%, rgba(255, 196, 67, .12), transparent 38rem),
    linear-gradient(145deg, #080806 0%, #121008 52%, #080705 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.bk-public-ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.bk-public-ambient i {
  position: absolute;
  display: block;
  width: min(60vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  background: radial-gradient(circle, rgba(255, 205, 91, .9), rgba(181, 114, 12, .22) 42%, transparent 70%);
  animation: bkPublicDrift 19s ease-in-out infinite alternate;
}

.bk-public-ambient i:nth-child(1) { left: -18%; top: -25%; }
.bk-public-ambient i:nth-child(2) { right: -24%; top: 22%; animation-delay: -7s; animation-duration: 24s; }
.bk-public-ambient i:nth-child(3) { left: 30%; bottom: -52%; animation-delay: -13s; animation-duration: 28s; opacity: .14; }

@keyframes bkPublicDrift {
  0% { transform: translate3d(-4%, -3%, 0) scale(.9); }
  55% { transform: translate3d(8%, 7%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 14%, 0) scale(.96); }
}

/* Shared navigation becomes the same floating gold-glass command bar everywhere. */
body > .navbar,
.navbar {
  width: min(calc(100% - 32px), 1840px) !important;
  margin: 16px auto 0 !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(42, 35, 20, .72), rgba(9, 8, 6, .86)) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,245,210,.12) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
}

.bk-suite-nav {
  position: sticky !important;
  top: 14px !important;
  right: auto !important;
  left: auto !important;
  z-index: 10020 !important;
  width: min(calc(100% - 32px), 1840px) !important;
  max-width: none !important;
  margin: 14px auto 0 !important;
  transform: none !important;
  animation: bkSuiteNavIn .65s cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes bkSuiteNavIn {
  from { opacity: 0; translate: 0 -12px; }
  to { opacity: 1; translate: 0 0; }
}

.bk-suite-nav .golden-dock__brand {
  text-decoration: none;
}

/* Hero language shared by games, projects, community, news, shop and lore. */
body > .hero,
body > section.hero,
.bk-public-standalone .hero,
.forum-plaza-hero {
  width: min(calc(100% - 40px), 1500px) !important;
  margin: clamp(28px, 6vw, 88px) auto clamp(24px, 4vw, 56px) !important;
  padding: clamp(34px, 6vw, 92px) !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: var(--bk-radius-xl) !important;
  background: linear-gradient(140deg, rgba(57, 45, 21, .72), rgba(11, 10, 7, .72) 62%, rgba(86, 53, 10, .25)) !important;
  box-shadow: var(--bk-shadow) !important;
  backdrop-filter: blur(34px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(135%) !important;
  overflow: hidden;
  position: relative;
}

.hero::after,
.forum-plaza-hero::after {
  content: "";
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  right: -17%;
  top: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,219,119,.2), transparent 70%);
  pointer-events: none;
}

.hero h1, .forum-plaza-hero h1,
.content-section > h1, .main-container > h1,
.page-container > h1 {
  color: var(--bk-cream) !important;
  font-size: clamp(3rem, 8vw, 8.4rem) !important;
  line-height: .92 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

.hero p, .hero-subtitle, .forum-plaza-hero p {
  color: var(--bk-muted) !important;
  font-size: clamp(1rem, 1.5vw, 1.32rem) !important;
  line-height: 1.65 !important;
  max-width: 780px;
}

/* Page shells retain their semantic layouts but share width and rhythm. */
.games-section, .projects-section, .timeline-section, .pdf-section,
.news-section, .content-section, .social-cards, .main-container,
.page-container, .bk-public-standalone .shell {
  width: min(calc(100% - 40px), 1500px) !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.games-section, .projects-section, .timeline-section, .pdf-section,
.news-section, .content-section, .page-container {
  padding-top: clamp(28px, 5vw, 72px) !important;
  padding-bottom: clamp(42px, 7vw, 110px) !important;
}

/* All recurring content surfaces use one material system. */
.game-card, .project-card, .news-card, .social-cards > .card,
.timeline-item, .pdf-container, .article-card, .plaza-stat-card,
.community-card, .sidebar-selector-shell, .forum-content-shell,
.product-card, .status-card, .toolbar, .contact-card, .form-container,
.message-card, .donate-card, .content-area, .wiki-sidebar,
.bk-public-standalone .card {
  border: 1px solid var(--bk-line) !important;
  border-radius: var(--bk-radius-lg) !important;
  background: linear-gradient(145deg, rgba(48, 39, 22, .62), rgba(10, 9, 7, .78)) !important;
  box-shadow: 0 22px 65px rgba(0,0,0,.34), inset 0 1px rgba(255,248,218,.09) !important;
  backdrop-filter: blur(24px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(125%) !important;
}

.game-card, .project-card, .news-card, .social-cards > .card,
.article-card, .community-card, .product-card {
  transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease !important;
}

.game-card:hover, .project-card:hover, .news-card:hover,
.social-cards > .card:hover, .article-card:hover,
.community-card:hover, .product-card:hover {
  transform: none !important;
  border-color: rgba(255, 218, 112, .5) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.44), inset 0 1px rgba(255,248,218,.14) !important;
}

h1, h2, h3, .title, .product-title { color: var(--bk-cream); }
p, .desc, .meta { color: var(--bk-muted); }

button, .btn, .primary-btn, a.button, .cta-button,
input[type="submit"], button[type="submit"] {
  border: 1px solid rgba(255, 235, 167, .54) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffe59a, #e6a82f) !important;
  color: #19130a !important;
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 10px 30px rgba(217,151,29,.18) !important;
  font-weight: 800 !important;
  transition: filter .25s ease, box-shadow .25s ease !important;
}

button:hover, .btn:hover, .primary-btn:hover, a.button:hover,
.cta-button:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  transform: none !important;
  filter: brightness(1.08);
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 14px 36px rgba(217,151,29,.28) !important;
}

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  color: var(--bk-cream) !important;
  border: 1px solid rgba(255, 218, 112, .22) !important;
  border-radius: 15px !important;
  background: rgba(5, 5, 4, .62) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(255, 218, 112, .7) !important;
  outline: 3px solid rgba(255, 202, 73, .1) !important;
}

.copyright-bar {
  display: flex;
  position: relative;
  z-index: 2;
  min-height: 66px;
  padding: 12px max(24px, calc((100% - 1120px) / 2));
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(255,226,139,.12);
  color: rgba(255,222,139,.43);
  background: rgba(8,7,5,.72);
  font-size: .72rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.copyright-bar__identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.copyright-bar__logo-link { display: inline-flex; flex: 0 0 auto; align-items: center; text-decoration: none; }
.copyright-bar__logo { display: block; width: auto; height: 34px; max-width: 116px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0,0,0,.35)); }
.copyright-bar nav { display: flex; gap: 18px; }
.copyright-bar a { color: rgba(255,222,139,.55) !important; text-decoration: none; }
.copyright-bar nav a:hover { color: var(--bk-gold) !important; }

@media (max-width: 760px) {
  body > .navbar, .navbar { width: calc(100% - 16px) !important; margin-top: 8px !important; }
  body > .hero, body > section.hero, .bk-public-standalone .hero, .forum-plaza-hero,
  .games-section, .projects-section, .timeline-section, .pdf-section,
  .news-section, .content-section, .social-cards, .main-container,
  .page-container, .bk-public-standalone .shell { width: calc(100% - 20px) !important; }
  body > .hero, body > section.hero, .bk-public-standalone .hero, .forum-plaza-hero { padding: 30px 22px !important; }
  .hero h1, .forum-plaza-hero h1, .content-section > h1,
  .main-container > h1, .page-container > h1 { font-size: clamp(2.7rem, 15vw, 5rem) !important; }
  .bk-suite-nav { width: calc(100% - 16px) !important; top: 8px !important; }
  .copyright-bar { align-items: flex-start; flex-direction: column; padding: 16px 20px; }
  .copyright-bar nav { flex-wrap: wrap; }
  .copyright-bar__logo { height: 30px; max-width: 102px; }
}

/* BK-Navigator/mobile viewport: keep the dock clear of system bars in both
   portrait and landscape, and make wide phone layouts deliberately compact. */
@media (max-width: 760px) and (orientation: portrait) {
  .bk-suite-nav {
    top: 12px !important;
    margin-top: 12px !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .bk-suite-nav {
    top: 6px !important;
    width: calc(100% - 14px) !important;
    margin-top: 6px !important;
    padding: 4px 9px !important;
    border-radius: 17px !important;
    display: flex !important;
    overflow: visible !important;
  }
  .bk-suite-nav::-webkit-scrollbar { display: none; }
  .bk-suite-nav a,
  .bk-suite-nav label.dock-account,
  .bk-suite-nav .dock-balance {
    min-width: 0 !important;
    height: 42px !important;
    padding: 4px 7px !important;
    flex: 1 1 0 !important;
  }
  .bk-suite-nav > a:not(.dock-balance):not(.dock-account) {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .bk-suite-nav a span,
  .bk-suite-nav label.dock-account span,
  .bk-suite-nav .dock-balance__full { display: none !important; }
  .bk-suite-nav svg { width: 21px !important; height: 21px !important; }
  .bk-suite-nav .golden-dock__brand {
    min-width: 46px !important;
    height: 42px !important;
    margin-right: 3px !important;
    flex: 0 0 46px !important;
  }
  .bk-suite-nav .golden-dock__brand img { width: 38px !important; height: 38px !important; }
  .bk-suite-nav .dock-balance { flex: 0 1 54px !important; }
  .bk-suite-nav .dock-account { flex: 0 1 46px !important; }
}

@media (orientation: portrait) and (max-width: 620px) {
  .bk-suite-nav.golden-dock {
    display: grid !important;
    grid-template-columns: repeat(7,minmax(0,1fr)) !important;
    width: calc(100% - 12px) !important;
    padding: 6px !important;
    gap: 4px !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .bk-suite-nav > a,
  .bk-suite-nav > label.dock-account,
  .bk-suite-nav > .dock-balance,
  .bk-suite-nav > a:not(.dock-balance):not(.dock-account),
  .bk-suite-nav .golden-dock__brand {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 4px !important;
    justify-self: stretch !important;
    flex: none !important;
  }
  .bk-suite-nav label.dock-account {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    outline: 1px solid rgba(255,215,92,.28) !important;
  }
  .bk-suite-nav label.dock-account::after {
    content: "Account";
    position: absolute;
    left: 50%;
    bottom: 2px;
    translate: -50% 0;
    color: #ffe58a;
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
  }
  .bk-suite-nav label.dock-account img { width: 25px !important; height: 25px !important; }
  .bk-suite-nav .golden-dock__brand img { width: 36px !important; height: 36px !important; }
  .bk-suite-nav svg { width: 20px !important; height: 20px !important; }
  .bk-suite-nav .dock-balance__compact { font-size: .68rem !important; }
  body > .hero, body > section.hero { padding-top: 128px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-public-ambient i { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}