/*
 * Duskheven Website Stylesheet
 *
 * This stylesheet defines the look and feel of the Duskheven web
 * template. The design draws inspiration from classic fantasy and
 * MMORPG aesthetics without using any copyrighted artwork. A dark
 * colour palette, ornate typography and subtle animations evoke the
 * mysterious atmosphere of a far‑away realm.
 */

/* Import fantasy and body fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

/* Colour variables for easy theming */
:root {
  /* Base colours adjusted to be lighter and more vibrant.  A richer
     combination of blues and golds brings out the “technology meets
     fantasy” look while avoiding an overly dark feel.  These variables
     drive the entire palette so adjusting them here propagates
     throughout the site. */
  --primary-bg: #152a46;      /* deep sapphire blue for page backgrounds */
  --secondary-bg: #203b63;    /* slightly lighter blue for alternating sections */
  --accent: #d0a858;          /* brighter golden accent */
  --accent-light: #e1bf74;    /* pale gold for highlights */
  --text-light: #f0f4ff;      /* near white text for maximum contrast */
  --text-muted: #c2cee5;      /* soft pale blue for secondary text */
  --card-bg: rgba(29, 48, 79, 0.85); /* translucent panels for cards and modals */
  --border-radius: 8px;
}

/* Global styles */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  /* Replace the abstract gradient with a full‑size fantasy illustration.
     The image fills the viewport and stays fixed while scrolling,
     enveloping visitors in the world of Duskheven on every page. */
  background: url('../images/castle.png') center/cover no-repeat fixed;
  color: var(--text-light);
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--accent-light);
}

/* Navigation bar */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  /* Semi‑transparent blue overlay for the header instead of pure black */
  background: rgba(15, 25, 45, 0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-left {
  display: flex;
  align-items: center;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
.nav-logo {
  display: flex;
  align-items: center;
}
.nav-logo img {
  height: 42px;
  width: auto;
}
.nav-online {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}
.nav-online .online-text {
  font-size: 0.85rem;
  color: var(--accent-light);
  white-space: nowrap;
}
.nav-online .online-bar {
  width: 120px;
  height: 6px;
  background: var(--secondary-bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.nav-online .online-bar .online-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c79c49, #e0b761);
  transition: width 3s ease-out;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav-links li a {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--text-light);
  padding: 0.5rem 0;
  position: relative;
}
.nav-links li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-links li a:hover:after,
.nav-links li a.active:after {
  width: 100%;
}
/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}
.nav-toggle span {
  height: 3px;
  width: 25px;
  background: var(--text-light);
  transition: transform 0.3s ease;
}

/* Transform bars into a cross when nav is open */
.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 5px);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .nav-links.open {
    transform: translateX(0);
  }
  .nav-toggle {
    display: flex;
  }
}

/* Hero Section */
.hero {
  height: 100vh;
  background: url('../images/hero.png') center/cover no-repeat fixed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  /* Slowly zoom the background for an immersive effect */
  animation: heroZoom 60s ease-in-out infinite;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Subtle overlay to enhance readability on top of the hero image.  The overlay
     colours are lightened to keep the scene vibrant while maintaining
     legibility. */
  background: linear-gradient(to bottom, rgba(20, 30, 50, 0.4), rgba(20, 30, 50, 0.7));
  z-index: 0;
}
.hero .orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.hero .orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.8;
}
.hero .orbs .orb.gold {
  background: radial-gradient(circle at center, rgba(199,156,73,0.9), rgba(199,156,73,0.3), rgba(199,156,73,0));
}
.hero .orbs .orb.blue {
  background: radial-gradient(circle at center, rgba(46,72,109,0.9), rgba(46,72,109,0.3), rgba(46,72,109,0));
}
/* Individual orb animations create a mesmerising drift across the hero */
.orb1 {
  width: 120px;
  height: 120px;
  animation: float1 35s infinite linear;
}
.orb2 {
  width: 80px;
  height: 80px;
  animation: float2 45s infinite linear;
}
.orb3 {
  width: 150px;
  height: 150px;
  animation: float3 55s infinite linear;
}
.orb4 {
  width: 100px;
  height: 100px;
  animation: float4 40s infinite linear;
}
.orb5 {
  width: 90px;
  height: 90px;
  animation: float5 50s infinite linear;
}

@keyframes heroZoom {
  0% {
    background-size: 100%;
    background-position: center;
  }
  50% {
    background-size: 110%;
    background-position: top center;
  }
  100% {
    background-size: 100%;
    background-position: center;
  }
}

@keyframes float1 {
  0% {
    transform: translate(-10%, 90%);
  }
  25% {
    transform: translate(20%, 60%);
  }
  50% {
    transform: translate(70%, 40%);
  }
  75% {
    transform: translate(40%, 10%);
  }
  100% {
    transform: translate(-10%, 90%);
  }
}
@keyframes float2 {
  0% {
    transform: translate(70%, 80%);
  }
  50% {
    transform: translate(10%, 20%);
  }
  100% {
    transform: translate(70%, 80%);
  }
}
@keyframes float3 {
  0% {
    transform: translate(30%, 100%);
  }
  50% {
    transform: translate(80%, 10%);
  }
  100% {
    transform: translate(30%, 100%);
  }
}
@keyframes float4 {
  0% {
    transform: translate(90%, 60%);
  }
  50% {
    transform: translate(20%, 80%);
  }
  100% {
    transform: translate(90%, 60%);
  }
}
@keyframes float5 {
  0% {
    transform: translate(50%, 110%);
  }
  50% {
    transform: translate(30%, 10%);
  }
  100% {
    transform: translate(50%, 110%);
  }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 1rem;
  animation: fadeInUp 1.5s ease forwards;
  opacity: 0;
  transform: translateY(40px);
}
.hero-logo {
  max-width: 500px;
  margin: 0 auto 1rem;
}
.hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.hero p {
  font-size: 1.2rem;
  margin: 1rem 0 2rem;
  color: var(--text-muted);
}
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--accent);
  color: #000;
  font-weight: bold;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sections */
section {
  padding: 4rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

section.dark {
  background: var(--secondary-bg);
}

section.light {
  background: var(--primary-bg);
}

section .section-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Feature cards */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.feature-card i {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 1rem;
}
.feature-card h3 {
  font-family: 'Cinzel', serif;
  margin: 0 0 0.5rem;
  color: var(--accent-light);
  font-size: 1.2rem;
}
.feature-card p {
  font-size: 0.95rem;
  color: var(--text-light);
}
.feature-card .btn {
  margin-top: 1rem;
}

/*------------------------------------------------------------------*/
/* Personal account styles
 * These rules style the login form and account information table
 * in the personal account page.  They follow the overall dark
 * fantasy aesthetic of the site and reuse colour variables.
 */
.login-form {
  background: var(--card-bg);
  padding: 1.5rem 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.login-form .form-group {
  margin-bottom: 1rem;
}
.login-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--accent-light);
}
.login-form input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: none;
  border-radius: var(--border-radius);
  background: var(--secondary-bg);
  color: var(--text-light);
  font-size: 0.95rem;
}
.login-form input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

.account-info {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.account-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.account-table th,
.account-table td {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.account-table th {
  background: var(--secondary-bg);
  font-weight: 600;
  color: var(--accent);
}
.account-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.2);
}

/*------------------------------------------------------------------*/
/* News page styles */
.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.news-card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.news-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.news-card-content {
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.news-card h3 {
  margin: 0 0 0.5rem;
  font-family: 'Cinzel', serif;
  color: var(--accent-light);
  font-size: 1.1rem;
}
.news-card .date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.news-card p {
  font-size: 0.9rem;
  color: var(--text-light);
  flex-grow: 1;
}
.news-card .btn {
  margin-top: 1rem;
  align-self: flex-start;
}

/* Social links in footer */
.social-links {
  margin-top: 1rem;
}
.social-links a {
  color: var(--accent);
  margin: 0 0.5rem;
  font-size: 1.4rem;
  transition: color 0.2s ease;
}
.social-links a:hover {
  color: var(--accent-light);
}

/* Footer */
footer {
  /* Lightened footer background for better contrast with the page */
  background: #111d33;
  color: var(--text-muted);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
}

/* Online statistics bar */
.stats-section {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.stats-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  text-align: center;
}
.stats-container h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--accent-light);
}
.stats-bar {
  width: 100%;
  height: 16px;
  background: var(--secondary-bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.stats-bar .fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c79c49, #e0b761);
  border-radius: 8px;
  transition: width 3s ease-out;
}

/* Carousel */
.carousel-section {
  padding-top: 2rem;
  padding-bottom: 4rem;
  position: relative;
}

/* Site-wide floating orbs for subtle ambience */
.site-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.site-animation .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.5;
}
.site-animation .gold {
  background: radial-gradient(circle at center, rgba(199,156,73,0.8), rgba(199,156,73,0.2), rgba(199,156,73,0));
}
.site-animation .blue {
  background: radial-gradient(circle at center, rgba(46,72,109,0.8), rgba(46,72,109,0.2), rgba(46,72,109,0));
}
.site-orb1 {
  width: 300px;
  height: 300px;
  animation: siteFloat1 80s infinite linear;
}
.site-orb2 {
  width: 200px;
  height: 200px;
  animation: siteFloat2 100s infinite linear;
}
.site-orb3 {
  width: 250px;
  height: 250px;
  animation: siteFloat3 90s infinite linear;
}

@keyframes siteFloat1 {
  0% {
    transform: translate(-10%, 100%);
  }
  50% {
    transform: translate(110%, -10%);
  }
  100% {
    transform: translate(-10%, 100%);
  }
}
@keyframes siteFloat2 {
  0% {
    transform: translate(80%, 120%);
  }
  50% {
    transform: translate(-20%, -20%);
  }
  100% {
    transform: translate(80%, 120%);
  }
}
@keyframes siteFloat3 {
  0% {
    transform: translate(50%, 110%);
  }
  50% {
    transform: translate(-30%, 10%);
  }
  100% {
    transform: translate(50%, 110%);
  }
}
.carousel {
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius);
}
.carousel .slides {
  display: flex;
  width: 300%;
  animation: slideShow 30s infinite;
}
.carousel .slides img {
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
  height: 500px;
}
.carousel .indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel .dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: background 0.3s;
}
.carousel .dot.active {
  background: var(--accent);
}

@keyframes slideShow {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  63% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
  96% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Generic page banner with animated background */
.page-banner {
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--text-light);
  background-size: cover;
  background-position: center;
  animation: bannerZoom 40s ease-in-out infinite;
}
.page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Lightened overlay on banners for a brighter impression */
  background: linear-gradient(to bottom, rgba(20, 30, 50, 0.4), rgba(20, 30, 50, 0.7));
  z-index: 0;
}
.page-banner h1 {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  color: var(--accent-light);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.page-banner .orbs {
  z-index: 1;
}

@keyframes bannerZoom {
  0% {
    background-size: 100%;
    background-position: center;
  }
  50% {
    background-size: 110%;
    background-position: top center;
  }
  100% {
    background-size: 100%;
    background-position: center;
  }
}

/* Animated gradient across the entire page */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
footer a {
  color: var(--accent-light);
}

/* Forms */
form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
label {
  font-weight: bold;
  color: var(--accent-light);
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  padding: 0.8rem;
  border-radius: var(--border-radius);
  border: none;
  background: var(--secondary-bg);
  color: var(--text-light);
  font-size: 0.95rem;
}
textarea {
  resize: vertical;
  min-height: 100px;
}
input[type="submit"] {
  cursor: pointer;
  border: none;
  font-size: 1rem;
  align-self: flex-start;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  overflow: hidden;
}
table th, table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
table th {
  background: rgba(0, 0, 0, 0.4);
  color: var(--accent);
  font-family: 'Cinzel', serif;
}
table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 0.95rem;
  }
  .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
  }
}

/* ======================================================
 * Feature Slice Sections
 * Each slice spans a significant portion of the viewport with
 * a background illustration.  A dark overlay ensures text
 * remains legible.  Content is centred with a title, a brief
 * description and a call‑to‑action button.  The height
 * adapts on small screens to maintain proportion.
 */
.feature-slice {
  position: relative;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.feature-slice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(20, 30, 50, 0.4), rgba(20, 30, 50, 0.8));
  z-index: 0;
}
.feature-slice .content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  padding: 0 1rem;
}
.feature-slice h2 {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-light);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.feature-slice p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .feature-slice {
    height: 50vh;
    min-height: 300px;
  }
  .feature-slice h2 {
    font-size: 1.5rem;
  }
  .feature-slice p {
    font-size: 0.9rem;
  }
}

/* ======================================================
 * Intro Section
 * Provides a prominent area on the home page for longer text
 * describing the server.  It uses a background image and a dark
 * overlay similar to the hero but with more space for prose.
 */
.intro-section {
  position: relative;
  padding: 4rem 1.5rem;
  background-image: url('../images/hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-light);
  text-align: center;
  overflow: hidden;
}
.intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(20, 30, 50, 0.5), rgba(20, 30, 50, 0.8));
  z-index: 0;
}
.intro-section .content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}
.intro-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
  color: var(--accent-light);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.intro-section p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .intro-section h2 {
    font-size: 1.8rem;
  }
  .intro-section p {
    font-size: 0.95rem;
  }
}

/* ======================================================
 * Feature Panels
 * Larger sections that combine two related actions into a single
 * atmospheric panel.  Each panel uses a background illustration,
 * has a title and short description, and provides a horizontal
 * group of buttons.  On smaller screens the buttons wrap.
 */
.feature-panel {
  position: relative;
  height: 65vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-light);
  text-align: center;
  overflow: hidden;
}
.feature-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(20, 30, 50, 0.45), rgba(20, 30, 50, 0.85));
  z-index: 0;
}
.feature-panel .content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}
.feature-panel h2 {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-light);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}
.feature-panel p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}
.feature-panel .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.feature-panel .btn-group .btn {
  margin: 0;
}
@media (max-width: 640px) {
  .feature-panel {
    height: 55vh;
    min-height: 300px;
  }
  .feature-panel h2 {
    font-size: 1.6rem;
  }
  .feature-panel p {
    font-size: 0.9rem;
  }
}

/* ======================================================
 * Side Navigation
 * A slim vertical bar on the left with a logo and navigation dots.
 * Hidden on mobile for better usability.
 */
.side-nav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 1100;
}
.side-nav .side-logo img {
  width: 48px;
  height: auto;
}
.side-nav .side-dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.side-nav .side-dots li a {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-light);
  border-radius: 50%;
  transition: background 0.3s ease;
}
.side-nav .side-dots li a:hover,
.side-nav .side-dots li a.active {
  background: var(--accent-light);
}
@media (max-width: 768px) {
  .side-nav {
    display: none;
  }
}

/* ======================================================
 * Hero Section (new layout)
 * A full‑screen introduction with a dramatic illustration, title,
 * tagline, call‑to‑action and online indicator overlay.  The top
 * navigation overlays this section.
 */
.hero-section {
  position: relative;
  height: 90vh;
  min-height: 550px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: var(--text-light);
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(20, 30, 50, 0.3), rgba(20, 30, 50, 0.8));
  z-index: 0;
}
.hero-section .hero-container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-left: 150px;
  padding: 0 1rem;
}
.hero-section h1 {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--accent-light);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}
.hero-section p {
  font-size: 1.2rem;
  max-width: 700px;
  margin-bottom: 2rem;
  color: var(--text-muted);
}
.hero-section .cta-btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background: var(--accent);
  color: #0a130f;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius);
  transition: background 0.3s ease, transform 0.2s ease;
}
.hero-section .cta-btn:hover {
  background: var(--accent-light);
  transform: translateY(-3px);
}
.hero-section .hero-online {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius);
  font-size: 0.85rem;
}
.hero-section .hero-online .bar {
  width: 140px;
  height: 8px;
  background: var(--secondary-bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.hero-section .hero-online .bar .fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c79c49, #e0b761);
  transition: width 3s ease-out;
}

/* Top navigation overlay for the new layout */
header.top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 15, 25, 0.6);
  backdrop-filter: blur(6px);
  z-index: 1050;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* News Section */
.news-section {
  background: var(--primary-bg);
  padding: 4rem 1.5rem;
  color: var(--text-light);
}
.news-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

/* On tablets and phones stack the news sections vertically */
@media (max-width: 768px) {
  .news-container {
    flex-direction: column;
  }
  .news-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .news-item {
    flex: 1 1 calc(50% - 0.5rem);
  }
}
.news-main {
  flex: 2;
  background: var(--card-bg);
  padding: 2rem;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news-main img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius);
}
.news-main h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--accent-light);
  margin: 0;
}
.news-main p {
  font-size: 0.95rem;
  color: var(--text-muted);
}
.news-main .btn {
  align-self: flex-start;
  margin-top: auto;
}
.news-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news-item {
  background: var(--card-bg);
  padding: 1rem;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.news-item .label {
  font-size: 0.95rem;
  color: var(--text-light);
}
.news-item .read-more {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  background: var(--accent);
  color: #0a130f;
  border-radius: var(--border-radius);
  transition: background 0.3s ease;
}
.news-item .read-more:hover {
  background: var(--accent-light);
}

/* How to Start Section */
.how-start-section {
  background: var(--secondary-bg);
  padding: 4rem 1.5rem;
  color: var(--text-light);
  text-align: center;
}
.how-start-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--accent-light);
}
.how-start-section .steps {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.step-card {
  flex: 1 1 240px;
  background: var(--card-bg);
  padding: 2rem 1.5rem;
  border-radius: var(--border-radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.step-card i {
  font-size: 2rem;
  color: var(--accent);
}
.step-card h4 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: var(--accent-light);
}
.step-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-grow: 1;
}
.step-card .btn {
  margin-top: 1rem;
  align-self: center;
}

/* ======================================================
 * Sections Grid
 * Inspired by modern private server layouts, this grid
 * presents each of the key site sections as a large card
 * with a rich background illustration.  Cards scale
 * naturally across screen sizes and feature a dark
 * overlay that fades slightly on hover, revealing more
 * of the artwork beneath.  The titles adopt the accent
 * colours and the call‑to‑action buttons reuse the base
 * `.btn` styling for consistency.
 */
.sections-grid-section {
  position: relative;
}
.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.section-card {
  position: relative;
  height: 220px;
  border-radius: var(--border-radius);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.section-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 30, 50, 0.55);
  transition: background 0.3s ease;
  z-index: 1;
}
.section-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 0.7rem;
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--accent-light);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.section-card .btn {
  position: relative;
  z-index: 2;
}
.section-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
.section-card:hover .overlay {
  background: rgba(20, 30, 50, 0.35);
}

/* ======================================================
 * Play Button
 * A prominent call‑to‑action styled after popular private
 * servers.  The vivid green gradient sets it apart from
 * the golden accent used throughout the rest of the
 * interface.  On hover, the gradient brightens and the
 * button lifts slightly to draw the eye.
 */
.play-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0b1f10;
  background: linear-gradient(90deg, #40c057, #2ebf51);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}
.play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  background: linear-gradient(90deg, #4cd964, #33c763);
}


/* =============================
 * Circular Features Diagram
 * Inspired by modern WoW private server designs, this diagram places
 * feature icons around a central node.  Each item uses the custom
 * property --angle to position itself around the circle.  On small
 * screens the diagram scales down gracefully.
 */
.features-diagram-section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: var(--primary-bg);
}
.features-diagram {
  position: relative;
  width: 420px;
  height: 420px;
  margin: 0 auto;
  max-width: 90vw;
}
.features-diagram .diagram-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--accent-light);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 0.5rem;
}
.features-diagram .diagram-item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--accent-light);
  transform: rotate(var(--angle)) translate(0, -190px) rotate(calc(-1 * var(--angle)));
  text-align: center;
}
.features-diagram .diagram-item i {
  font-size: 1.6rem;
  color: var(--accent);
}
.features-diagram .diagram-item span {
  font-size: 0.85rem;
  font-family: 'Cinzel', serif;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .features-diagram {
    width: 300px;
    height: 300px;
  }
  .features-diagram .diagram-center {
    width: 100px;
    height: 100px;
    font-size: 0.8rem;
  }
  .features-diagram .diagram-item {
    transform: rotate(var(--angle)) translate(0, -130px) rotate(calc(-1 * var(--angle)));
  }
  .features-diagram .diagram-item i {
    font-size: 1.3rem;
  }
  .features-diagram .diagram-item span {
    font-size: 0.65rem;
  }
}

/* ======================================================
 * SEO Section
 * Provides a long descriptive text for search engines and users.
 * Uses a secondary background color and centralizes its content.
 */
.seo-section {
  padding: 4rem 1.5rem;
  background-color: var(--secondary-bg);
  color: var(--text-color);
  text-align: center;
}
.seo-section .content {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.seo-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-light);
}
.seo-section p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Hidden SEO keywords.  Keep this block off screen to avoid
 * cluttering the page while still allowing crawlers to read it. */
.hidden-seo {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* ======================================================
 * Shop Layout
 * Styles for the advanced donation shop including a balance panel,
 * tab navigation, sidebar categories and item/service tables.
 */
.shop-section {
  padding: 3rem 1rem;
}

.shop-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

/* On small screens stack the shop panel items vertically */
@media (max-width: 768px) {
  .shop-panel {
    flex-direction: column;
    align-items: flex-start;
  }
}
.shop-title {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--accent-light);
}
.shop-balance {
  font-size: 1.1rem;
  color: var(--text-muted);
}
.shop-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-tab-btn {
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.shop-tab-btn.active {
  color: var(--accent-light);
  border-color: var(--accent);
}
.shop-main {
  display: flex;
  flex-wrap: wrap;
}
.shop-sidebar {
  flex: 0 0 200px;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
}
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-list li {
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--text-muted);
  border-left: 3px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.category-list li:hover,
.category-list li.active {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-light);
  border-color: var(--accent);
}
.shop-table-wrapper {
  overflow-x: auto;
  flex: 1;
}
.shop-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-light);
  min-width: 520px;
}
.shop-table th,
.shop-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-table th {
  text-align: left;
  color: var(--accent-light);
  font-weight: 600;
}
.shop-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Small item icons in shop tables.  These icons accompany the
   item names to resemble the WoW Circle shop screenshot.  They are
   sized and spaced consistently so the table remains tidy. */
.item-icon {
  margin-right: 0.5rem;
  font-size: 1rem;
  color: var(--accent);
  vertical-align: middle;
}
.btn-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

/* Currency purchase overlay styles.  This overlay appears when the
   user chooses to top up their donation coin balance.  It lists
   several packages with amounts and prices. */
.currency-overlay {
  background: rgba(15, 25, 45, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: var(--border-radius);
}
.currency-overlay h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  color: var(--accent);
  font-size: 1.4rem;
  text-align: center;
}
.currency-packages {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.currency-package {
  flex: 1 1 200px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.currency-package .amount {
  font-size: 1.1rem;
  color: var(--accent-light);
  margin-bottom: 0.3rem;
}
.currency-package .price {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.currency-package .btn {
  margin-top: auto;
}

/* Currency selector styling */
.currency-label {
  display: block;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.currency-label select {
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--secondary-bg);
  color: var(--text-light);
}