/* Avalon landing-page visual language for the Avalon site.
   Presentation only: existing routes, forms, data hooks, and scripts stay intact. */

:root {
  --bg-black: #0f0f0f;
  --bg-dark: #1a1a1a;
  --bg-panel: #242424;
  --bg-panel-deep: #151515;
  --bg-panel-soft: #2b2b2b;
  --border-dark: #483626;
  --border-light: #8c5729;
  --gold-dark: #a94d00;
  --gold: #ff8c00;
  --gold-light: #ffb84d;
  --text-primary: #f6f3ef;
  --text-secondary: #c9c5c0;
  --text-muted: #999591;
  --avalon-void: #0f0f0f;
  --avalon-black: #0f0f0f;
  --avalon-black-rgb: 15, 15, 15;
  --avalon-dark: #1a1a1a;
  --avalon-dark-rgb: 26, 26, 26;
  --avalon-surface: #242424;
  --avalon-surface-rgb: 36, 36, 36;
  --avalon-panel: #242424;
  --avalon-panel-rgb: 36, 36, 36;
  --avalon-red: #ff8c00;
  --avalon-red-rgb: 255, 140, 0;
  --avalon-red-deep-rgb: 169, 77, 0;
  --avalon-mist: #aaa5a0;
  --avalon-mist-rgb: 170, 165, 160;
  --avalon-silver: #f6f3ef;
  --avalon-silver-rgb: 246, 243, 239;
  --panel-surface: #242424;
  --panel-border: rgba(255, 140, 0, 0.24);
  --panel-gold: #ff8c00;
  --panel-gold-muted: rgba(255, 184, 77, 0.76);
  --panel-text: #f6f3ef;
  --panel-text-muted: rgba(246, 243, 239, 0.65);
  --title-font: "Cinzel", serif;
  --body-font: "Manrope", system-ui, sans-serif;
}

html { background: var(--bg-black); }

body {
  background: radial-gradient(circle at 78% 2%, rgba(255, 140, 0, 0.08), transparent 38rem),
    linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 70%);
  color: var(--text-primary);
  font-family: var(--body-font);
}

body::before {
  background-image: radial-gradient(rgba(255, 140, 0, 0.18) 0.7px, transparent 0.7px);
  background-size: 38px 38px;
  opacity: 0.22;
  mask-image: none;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: linear-gradient(#ff8c00, #fb7b00); border: 2px solid #1a1a1a; border-radius: 7px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: var(--gold-light); }

/* Fixed, translucent navigation from the Avalon landing page. */
.ek-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 180;
  border: 0;
  border-bottom: 1px solid rgba(255, 140, 0, 0.28);
  background: rgba(15, 15, 15, 0.91);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.ek-site-header::before, .ek-site-header::after,
.ek-brand::before, .ek-footer-brand::before { display: none; }

.ek-nav-shell {
  width: min(100% - 3rem, 1480px);
  min-height: 76px;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) auto auto;
  gap: clamp(0.8rem, 1.3vw, 1.5rem);
}

.ek-brand, .ek-footer-brand { color: #fff; letter-spacing: 0.08em; line-height: 0.92; }
.ek-brand span:first-child, .ek-footer-brand span:first-child { color: var(--gold); font-size: 1.47rem; }
.ek-brand span:nth-child(2), .ek-footer-brand span:nth-child(2) { font-size: 0.95rem; letter-spacing: 0.23em; }
.ek-brand:hover { color: var(--gold-light); }

.ek-main-nav {
  align-items: center;
  justify-self: center;
  gap: clamp(0.9rem, 1.4vw, 1.65rem);
  border: 0;
  box-shadow: none;
}

.ek-main-nav a {
  min-height: 76px;
  padding: 0;
  color: #d7d3ce;
  font-family: var(--body-font);
  font-size: clamp(0.64rem, 0.72vw, 0.79rem);
  font-weight: 700;
  letter-spacing: 0.075em;
}

.ek-main-nav a + a, .ek-main-nav a + .ek-nav-item,
.ek-main-nav .ek-nav-item + a, .ek-main-nav .ek-nav-item + .ek-nav-item {
  border: 0;
  box-shadow: none;
}

.ek-main-nav a:hover, .ek-main-nav a.is-active,
.ek-nav-item:hover > a { color: var(--gold); }

.ek-main-nav a.is-active::before, .ek-nav-item.is-active > a::before { display: none; }
.ek-main-nav a.is-active::after, .ek-nav-item.is-active > a::after {
  left: 0;
  bottom: 17px;
  width: 100%;
  height: 2px;
  transform: none;
  background: var(--gold);
  box-shadow: none;
}

.ek-nav-menu {
  top: calc(100% - 9px);
  padding: 0.5rem;
  border: 1px solid rgba(255, 140, 0, 0.3);
  border-radius: 8px;
  background: rgba(22, 22, 22, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.ek-main-nav .ek-nav-menu a { min-height: 2.4rem; padding: 0.5rem 0.7rem; border-radius: 5px; }
.ek-main-nav .ek-nav-menu a:hover { background: rgba(255, 140, 0, 0.12); color: var(--gold-light); }

.ek-nav-actions, .ek-user-nav--edge {
  min-height: 76px;
  border: 0;
  box-shadow: none;
}
.ek-nav-cta { gap: 0.5rem; }
.ek-discord-link, .ek-vote-link {
  width: 2.55rem;
  height: 2.55rem;
  flex-basis: 2.55rem;
  border: 1px solid rgba(255, 140, 0, 0.26);
  border-radius: 6px;
  background: rgba(255, 140, 0, 0.07);
}
.ek-discord-link:hover, .ek-vote-link:hover { border-color: var(--gold); background: rgba(255, 140, 0, 0.18); }
.ek-discord-link img, .ek-vote-link img { filter: none; }
.ek-account-link {
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: linear-gradient(180deg, #fb7b00, #ff5400);
  color: #17110b !important;
  font-family: var(--body-font);
  font-weight: 800;
  text-shadow: none;
}
.ek-account-link::before, .ek-account-link::after { display: none; }
.ek-account-link:hover { color: #17110b !important; background: var(--gold-light); transform: translateY(-2px); }
.ek-welcome-link strong, .ek-welcome-link span { color: var(--gold-light); }
.ek-user-separator { color: rgba(255, 140, 0, 0.42); }
.ek-menu-button { border-radius: 6px; border-color: rgba(255, 140, 0, 0.46); color: var(--gold); }
.ek-mobile-drawer { background: #171717; border-left-color: rgba(255, 140, 0, 0.32); }
.ek-mobile-nav a:hover, .ek-mobile-nav a.is-active { color: var(--gold); background: rgba(255, 140, 0, 0.1); }

#page-content { padding-top: 76px; }
.home-route #page-content { padding-top: 0; }

/* Left-aligned hero, with the existing Avalon artwork kept on the right. */
.ek-home { background: transparent; }
.ek-hero {
  min-height: min(760px, 100svh);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 140, 0, 0.2);
  box-shadow: none;
}
.ek-hero__media {
  background-position: center 46%;
  filter: saturate(1.1) contrast(1.05) brightness(0.82);
}
.ek-hero__shade {
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.93) 0%, rgba(10, 10, 10, 0.75) 38%, rgba(10, 10, 10, 0.22) 78%),
    linear-gradient(0deg, #0f0f0f 0%, transparent 27%, rgba(15, 15, 15, 0.24) 100%),
    radial-gradient(circle at 80% 50%, rgba(255, 140, 0, 0.13), transparent 40%);
}
.ek-hero__content {
  width: min(100% - 4rem, 1400px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  padding: 125px 0 90px;
  text-align: left;
}
.ek-hero__eyebrow {
  margin: 0 0 1rem;
  color: var(--gold-light);
  font-family: var(--body-font);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.ek-hero__title {
  display: block;
  max-width: 720px;
  margin: 0 0 0.9rem;
  color: var(--gold);
  font-family: var(--title-font);
  font-size: clamp(3.45rem, 6.3vw, 6.1rem);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.04;
  text-shadow: 0 4px 20px rgba(255, 140, 0, 0.28);
  text-transform: uppercase;
}
.ek-hero__tagline {
  margin: 0 0 0.9rem;
  color: var(--gold-light);
  font-family: var(--body-font);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-shadow: none;
}
.ek-hero__description {
  max-width: 530px;
  margin: 0 0 2.1rem;
  color: #d2ceca;
  font-size: 1.05rem;
  line-height: 1.8;
}
.ek-hero__actions { justify-content: flex-start; gap: 1rem; margin: 0; }

/* Simple buttons, cards, and section structure inspired by nodejs/public/style.css. */
.ek-btn, .btn-gold, .btn-avalon, .Avalon-iconbtn, .Avalon-mirror-link,
.panel-btn, .vote-submit, .vote-register-link {
  border-radius: 6px;
  font-family: var(--body-font);
  font-weight: 800;
  letter-spacing: 0.075em;
}
.ek-btn--play, .ek-btn--gold, .btn-gold, .btn-avalon,
.register-submit .btn-gold, .login-submit .btn-gold,
.panel-btn-primary, .vote-submit {
  border: 1px solid #ff8c00 !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #fb7b00 0%, #ff5400 100%) !important;
  color: #17110b !important;
  text-shadow: none !important;
  box-shadow: 0 10px 30px rgba(255, 140, 0, 0.22) !important;
}
.ek-btn--play:hover, .ek-btn--gold:hover, .btn-gold:hover, .btn-avalon:hover,
.register-submit .btn-gold:hover, .login-submit .btn-gold:hover,
.panel-btn-primary:hover, .vote-submit:hover {
  border-color: var(--gold-light) !important;
  background: var(--gold-light) !important;
  color: #17110b !important;
  filter: none;
  text-shadow: none;
  box-shadow: 0 14px 35px rgba(255, 140, 0, 0.36);
  transform: translateY(-3px);
}
.btn-gold::before, .btn-gold::after { display: none !important; }
.ek-btn--dark, .ek-btn--download, .panel-btn-secondary, .vote-register-link {
  border: 2px solid var(--gold) !important;
  border-radius: 6px !important;
  background: rgba(15, 15, 15, 0.54) !important;
  color: var(--gold) !important;
  text-shadow: none;
  box-shadow: none;
}
.ek-btn--dark:hover, .ek-btn--download:hover, .panel-btn-secondary:hover,
.vote-register-link:hover { background: var(--gold) !important; color: #17110b !important; filter: none; text-shadow: none; }
.ek-btn--play, .ek-btn--download { min-width: 190px; min-height: 55px; padding: 0.9rem 1.6rem; }

.ek-home__body { width: min(100% - 3rem, 1400px); margin: 0 auto; padding: 5rem 0 6rem; }
.ek-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "news news" "server side";
  gap: 1.5rem;
  align-items: stretch;
}
.ek-panel--news { grid-area: news; order: initial; }
.ek-panel--server { grid-area: server; }
.ek-side-stack { grid-area: side; order: initial; gap: 1.5rem; }
.ek-panel--server, .ek-panel--news, .ek-side-stack > .ek-panel { height: auto; }

.ek-panel, .inner-page-panel, .chaos-panel, .avalon-panel,
.rank-podium-card, .Avalon-card, .panel-card, .panel-hero,
.panel-alert, .vote-card, .donate-purchase-card,
.register-aside, .login-aside {
  border: 1px solid rgba(255, 140, 0, 0.24) !important;
  border-image: none !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.94), rgba(24, 24, 24, 0.96)) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3) !important;
}
.ek-panel::before, .ek-panel::after, .inner-page-panel::before,
.inner-page-panel::after, .chaos-panel::before, .chaos-panel::after,
.avalon-panel::before, .avalon-panel::after, .rank-podium-card::before,
.rank-podium-card::after, .Avalon-card::before, .Avalon-card::after,
.register-aside::before, .register-aside::after,
.login-aside::before, .login-aside::after { display: none !important; }

.ek-panel__title {
  padding: 1.2rem 1.55rem;
  border-bottom: 1px solid rgba(255, 140, 0, 0.23);
  background: rgba(14, 14, 14, 0.32);
  box-shadow: none;
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
}
.ek-panel__body { padding: 1.45rem; }
.ek-panel__body--tight { padding: 1.1rem; }
.ek-panel-link { color: var(--gold-light); }
.ek-panel-link:hover { color: var(--gold); }
.ek-news-item, .ek-realm-status, .ek-quick-links a, .ek-feature-strip a {
  border: 1px solid rgba(255, 140, 0, 0.17);
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.42);
  box-shadow: none;
}
.ek-news-item:hover, .ek-quick-links a:hover, .ek-feature-strip a:hover {
  border-color: rgba(255, 140, 0, 0.72);
  background: rgba(255, 140, 0, 0.08);
  box-shadow: 0 16px 28px rgba(255, 140, 0, 0.12);
  transform: translateY(-4px);
}
.ek-realm-status[data-status="online"]::after { background: #4fbf3c; }
.ek-status-grid > div { border-bottom-color: rgba(255, 140, 0, 0.14); }
.ek-feature-panel { margin-top: 1.5rem; }
.ek-feature-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1.35rem; }
.ek-feature-strip a { min-height: 115px; padding: 1rem; }
.ek-feature-strip a:hover { transform: translateY(-6px); }
.ek-feature-strip span { border-color: rgba(255, 140, 0, 0.25); background: rgba(255, 140, 0, 0.08); }

/* Common page framing, forms, rankings, voting, and donation screens. */
.ek-inner-main { background: transparent; }
.inner-page-shell { padding: clamp(3.5rem, 6vw, 6rem) 0; background: transparent; }
.inner-page-container { width: min(100% - 3rem, 1200px); }
.inner-page-container.is-wide { width: min(100% - 3rem, 1400px); }
.inner-page-hero { max-width: 900px; }
.inner-page-kicker, .inner-page-caption { color: var(--gold-light) !important; }
.inner-page-title {
  color: var(--gold) !important;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-shadow: 0 4px 20px rgba(255, 140, 0, 0.22);
}
.inner-page-divider { width: 150px; height: 2px; margin: 1.35rem auto; background: var(--gold); }
.inner-page-divider::after { display: none; }
.inner-page-copy { color: var(--text-secondary) !important; }
.inner-page-panel-body.is-lg, .inner-page-panel-body { padding: clamp(1.5rem, 3vw, 2.5rem) !important; }
.inner-page-backlink:hover, .footer-link:hover { color: var(--gold-light); }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea, .inner-page-search {
  border: 1px solid rgba(255, 140, 0, 0.26) !important;
  border-radius: 6px !important;
  background: #171717 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus, .inner-page-search:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.12) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
input::placeholder, textarea::placeholder { color: #918b85 !important; }

.register-layout, .login-layout { gap: clamp(1.5rem, 3vw, 2.8rem); }
.register-aside, .login-aside { padding: clamp(1.5rem, 3vw, 2.5rem); }
.register-aside h2, .login-aside h2 { color: var(--gold-light); }
.register-aside__eyebrow, .login-aside__eyebrow { color: var(--gold); }
.register-field label, .login-fields label { color: var(--text-secondary); }
.register-field:focus-within label { color: var(--gold-light); }
.register-captcha-prompt { border-color: rgba(255, 140, 0, 0.32); background: rgba(255, 140, 0, 0.08); }

.ranking-table thead th { border-bottom-color: rgba(255, 140, 0, 0.45) !important; color: var(--gold-light) !important; }
.ranking-row:hover { background: rgba(255, 140, 0, 0.08); }
.vote-card-head h2, .donate-card-label { color: var(--gold-light); }
.donate-purchase-grid { gap: 1.5rem; }
.vote-layout { gap: 1.5rem; }

/* Player and admin panels keep their original navigation and form behavior. */
.userpanel-shell {
  background: transparent;
}
.userpanel-shell::before { display: none; }
.userpanel-shell > .max-w-7xl { width: min(100% - 3rem, 1500px) !important; }
.userpanel-page-head h2 { color: var(--gold); font-family: var(--title-font); font-weight: 700; }
.userpanel-kicker { color: var(--gold-light); }
.userpanel-page-head p { color: var(--text-secondary); }
.userpanel-nav {
  border: 1px solid rgba(255, 140, 0, 0.26) !important;
  border-radius: 10px;
  background: linear-gradient(180deg, #252525, #161616) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3) !important;
}
.userpanel-session-bar { border-color: rgba(255, 140, 0, 0.22); border-radius: 7px; }
.userpanel-nav-section { border-top-color: rgba(255, 140, 0, 0.18); }
.userpanel-nav-section h4 { color: var(--gold-light) !important; }
.userpanel-nav a.userpanel-tool-link {
  border: 1px solid rgba(255, 140, 0, 0.16) !important;
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.54) !important;
  color: #d8d5d1 !important;
}
.userpanel-nav a.userpanel-tool-link:hover,
.userpanel-nav a.userpanel-tool-link.is-active {
  border-color: var(--gold) !important;
  background: rgba(255, 140, 0, 0.13) !important;
  color: #fff !important;
}
.userpanel-nav a.userpanel-tool-link i,
.userpanel-nav a.userpanel-tool-link svg { color: var(--gold); }
.userpanel-nav a.userpanel-tool-link.is-active::before { background: var(--gold); }
.userpanel-sidebar-art { border-radius: 8px; border-color: rgba(255, 140, 0, 0.18); }
.userpanel-sidebar-brand strong { color: var(--gold-light); }
.userpanel-shell .chaos-panel > div[class*="bg-avalon-black"] {
  border-radius: 8px;
  /*background: rgba(15, 15, 15, 0.5) !important;*/
}
.panel-card-head { border-bottom-color: rgba(255, 140, 0, 0.2); }
.panel-card-head i, .panel-card-head svg { color: var(--gold); }
.panel-hero {
  background: linear-gradient(90deg, rgba(15, 15, 15, 0.92), rgba(15, 15, 15, 0.38)),
    linear-gradient(transparent, transparent) center 36% / cover no-repeat !important;
}
.panel-summary-card { border-color: rgba(255, 140, 0, 0.22); border-radius: 8px; background: #1b1b1b; }
.panel-summary-card i, .panel-summary-card svg { color: var(--gold); }
.panel-btn { border-radius: 6px; }
.glitch-title { color: var(--gold-light); }

.ek-site-footer {
  border-top: 1px solid rgba(255, 140, 0, 0.25);
  background: linear-gradient(180deg, #191919, #0f0f0f);
}
.ek-footer-shell { width: min(100% - 3rem, 1400px); min-height: 120px; }
.ek-footer-brand small, .ek-footer-credit { color: var(--gold-light); }
.ek-footer-social a:hover { color: var(--gold); }

@media (max-width: 1320px) {
  .ek-nav-shell { width: min(100% - 2rem, 100%); grid-template-columns: minmax(165px, 195px) minmax(0, 1fr) auto auto; }
  .ek-main-nav { gap: 0.8rem; }
  .ek-main-nav a { font-size: 0.65rem; }
  .ek-discord-link, .ek-vote-link { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }
}

@media (max-width: 1180px) {
  .ek-nav-shell { min-height: 72px; grid-template-columns: 1fr auto; }
  .ek-main-nav, .ek-nav-actions, .ek-user-nav--edge { display: none; }
  .ek-menu-button { display: inline-flex; }
  #page-content { padding-top: 72px; }
  .home-route #page-content { padding-top: 0; }
  .ek-hero { min-height: 650px; }
  .ek-hero__content { padding-top: 130px; }
}

@media (max-width: 767px) {
  .ek-nav-shell { width: min(100% - 1.5rem, 100%); min-height: 68px; }
  #page-content { padding-top: 68px; }
  .home-route #page-content { padding-top: 0; }
  .ek-hero { min-height: 640px; }
  .ek-hero__media { background-position: 62% center; }
  .ek-hero__shade {
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.91), rgba(10, 10, 10, 0.57)),
      linear-gradient(0deg, #0f0f0f, transparent 30%);
  }
  .ek-hero__content { width: min(100% - 2rem, 100%); padding: 115px 0 60px; }
  .ek-hero__title { font-size: clamp(2.8rem, 12vw, 4.5rem); }
  .ek-hero__description { font-size: 0.96rem; }
  .ek-home__body { width: min(100% - 1.5rem, 100%); padding: 3rem 0 4rem; }
  .ek-dashboard { grid-template-columns: 1fr; grid-template-areas: "news" "server" "side"; gap: 1rem; }
  .ek-side-stack { gap: 1rem; }
  .ek-feature-panel { margin-top: 1rem; }
  .ek-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0.9rem; }
  .ek-feature-strip a { min-height: 100px; }
  .inner-page-container, .inner-page-container.is-wide { width: min(100% - 1.5rem, 100%); }
  .userpanel-shell > .max-w-7xl { width: min(100% - 1.5rem, 100%) !important; }
  .ek-footer-shell { width: min(100% - 1.5rem, 100%); }
}

@media (max-width: 480px) {
  .ek-hero__actions { flex-direction: column; align-items: stretch; }
  .ek-btn--play, .ek-btn--download { width: 100%; }
  .ek-feature-strip { grid-template-columns: 1fr 1fr; }
  .ek-panel__title { padding: 1rem 1.15rem; }
  .ek-panel__body { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ek-news-item, .ek-quick-links a, .ek-feature-strip a,
  .ek-btn, .btn-gold { transition: none; }
}