@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&family=Nunito:wght@400;600;700;800&display=swap");

:root {
  --primary: #00b4d8;
  --primary-dark: #0077b6;
  --primary-light: #90e0ef;
  --accent: #ffd60a;
  --accent-green: #70e000;
  --accent-red: #ef233c;

  --bg-dark: #0d1321;
  --bg-card: rgba(13, 19, 33, 0.9);
  --bg-overlay: rgba(13, 19, 33, 0.85);
  --bg-nav: rgba(13, 19, 33, 0.95);

  --text-main: #f0f4f8;
  --text-muted: #bcccdc;

  --glass-border: rgba(255, 255, 255, 0.15);

  --font-heading: "Kanit", sans-serif;
  --font-body: "Nunito", sans-serif;

  --radius: 12px;
  --transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Background Logic */
/* Global background for body (below hero) */
body {
  background:
    linear-gradient(rgba(13, 19, 33, 0.92), rgba(13, 19, 33, 0.98)),
    url("./image/bg-1.webp"); /* Static blurred background */
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  min-height: 100vh;
}

/* Carousel ONLY for Hero */
.bg-carousel-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.bg-slide.active {
  opacity: 1;
}

.bg-overlay-global {
  display: none; /* Removed global overlay */
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
button {
  cursor: pointer;
  border: none;
  font-family: var(--font-heading);
  font-weight: 800;
}
ul {
  list-style: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 2;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0;
  background: rgba(13, 19, 33, 0.95);
  backdrop-filter: blur(10px);
  z-index: 2000; /* Higher priority */
  border-bottom: 2px solid var(--primary-dark);
  transition:
    padding 0.3s ease,
    background 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.logo {
  font-size: 1.8rem;
  color: white;
  display: flex;
  gap: 0.5rem;
  z-index: 1001; /* Ensure logo is above mobile menu */
}
.logo .gold {
  color: var(--accent);
  text-shadow: 2px 2px 0 #e85d04;
}
.logo .white {
  color: white;
}

.nav-links {
  display: flex;
  gap: 2rem;
  transition: var(--transition);
}

/* Hamburger Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 1001;
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animation for hamburger to X */
.menu-toggle.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* Navigation Links */
.nav-links a {
  font-weight: 800;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-transform: uppercase; /* Uppercase links */
  position: relative;
}

.nav-links a:hover {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
}

.nav-links a.active {
  color: var(--primary);
  background: rgba(0, 180, 216, 0.1);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50%;
  height: 2px;
  background: var(--primary);
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border-radius: var(--radius);
  transition: var(--transition);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  align-items: center; /* Fix for centering content */
  justify-content: center;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 6px 0 var(--primary-dark);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--primary-light);
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: none;
}

.btn-secondary {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: rgba(0, 180, 216, 0.1);
  box-sizing: border-box; /* Ensure border doesn't mess layout */
}
.btn-secondary:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}

.btn.small {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
}
.btn.large {
  padding: 1.2rem 3rem; /* Reduced padding */
  font-size: 1.4rem; /* Reduced font size */
  width: auto; /* Let it size naturally or keep width but smaller max */
  min-width: 250px;
  max-width: 350px;
}

/* Global Responsive Image Fix */
img {
  max-width: 100%;
  height: auto;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  position: relative; /* Essential for absolute bg */
  z-index: 1; /* Create stacking context for negative z-index children */
  overflow: hidden;
  border-bottom: 4px solid var(--primary-dark);
}

/* Hero Overlay - Dark Curtain */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 19, 33, 0.65); /* Darker 75% opacity */
  z-index: 0; /* Behind content, above bg */
  /* backdrop-filter: blur(3px); Optional: slight blur */
}

.hero-content {
  position: relative;
  z-index: 2;
  /* margin-top: 1rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo-wrapper {
  animation: logoFloat 12s ease-in-out infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.hero-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 214, 10, 0.2));
  animation: logoSwing 12s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes logoSwing {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: white;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  letter-spacing: -1px;
}

.hero-title .highlight,
.hero-title .gold {
  color: var(--accent);
  text-shadow: 0 0 15px rgba(255, 214, 10, 0.4);
}

.hero-subtitle {
  font-size: 1.2rem;
  color: #e0e7ff;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  opacity: 1;
}

/* Hero Actions - Improved Alignment */
.hero-actions {
  display: flex;
  flex-direction: column; /* Stacked */
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.play-btn {
  position: relative;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  padding: 0.8rem 2rem; /* Reduced padding */
  color: #3e2723;
  background: linear-gradient(to bottom, #ffd700, #ffca28);
  border: none;
  clip-path: polygon(
    15px 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 15px
  ); /* Cut corners shape */
  min-width: 400px;
  transition: all 0.2s ease;
  z-index: 1;
}

/* Faux Border & Depth with Before/After */
.play-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
  z-index: -1;
}

.play-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.3); /* Bottom shadow for 3D feel */
  z-index: -1;
}

.play-btn:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.1);
  background: linear-gradient(180deg, #ffeb3b 0%, #ffc107 100%);
}

.play-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 15px rgba(0, 0, 0, 0.2),
    0 0 0 4px #5e6668,
    0 2px 10px rgba(0, 0, 0, 0.5);
}

.server-ip-box {
  background: rgba(13, 19, 33, 0.9);
  border: 2px solid var(--glass-border);
  padding: 0 1.5rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  height: 60px; /* Specific smaller height */
  width: auto; /* Allow flex to size it */
  min-width: 250px; /* Ensure it's not too small */
  max-width: 350px; /* Slightly narrower than play button */
  justify-content: space-between; /* Space out content */
}

.server-ip-box:hover {
  background: rgba(255, 214, 10, 0.1);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.ip-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  position: absolute;
  top: 8px;
  left: 1.5rem;
  font-weight: 700;
}

#ip-text {
  color: white;
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 1.4rem;
  margin-top: 12px;
}

.copy-icon {
  background: var(--glass-border);
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: var(--transition);
}

.server-ip-box:hover .copy-icon {
  background: var(--accent);
  color: black;
}

.hero-secondary-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  width: 100%;
}

/* Fix Discord Button */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 2.5rem;
  height: 60px; /* Match IP box height */
  border-radius: var(--radius);
  background: #5865f2; /* Solid color default */
  color: white; /* White text default */
  font-weight: 800;
  border: 2px solid var(--glass-border);
  font-family: var(--font-heading);
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
  transition: var(--transition);
}
.social-link:hover {
  background: #4752c4; /* Darker shade */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
  filter: brightness(1.1);
}

/* Sections & Cards */
section {
  padding: 100px 0;
}

.section-title {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
  color: white;
  text-shadow: 3px 3px 0 var(--primary-dark);
}

/* Game Modes Tabs */
.modes-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.mode-tab {
  background: var(--bg-card);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-width: 200px;
}

.mode-tab img {
  width: 80px;
  height: 80px;
  filter: grayscale(1);
  transition: var(--transition);
}
.mode-tab h3 {
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  margin: 0;
  white-space: nowrap;
}

.mode-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}
.mode-tab.active {
  border-color: var(--accent);
  background: var(--primary-dark); /* Solid background */
  color: white;
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.5);
  opacity: 1;
}

.mode-tab.active img {
  filter: grayscale(0);
  transform: scale(1.1);
}

.coming-soon-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--accent-red);
  color: white;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.mode-content-wrapper {
  position: relative;
  min-height: 400px;
}
.mode-content {
  display: none;
  width: 100%;
  animation: fadeIn 0.5s ease;
}
.mode-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coming-soon-content {
  text-align: center;
  padding: 4rem;
  background: var(--bg-card);
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius);
}

/* Launcher Title Styling */
.launcher-title {
  font-size: 3rem; /* Large impact */
  font-weight: 900;
  text-transform: uppercase;
  color: white;
  margin-bottom: 0.5rem;
  letter-spacing: -1px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Deep shadow */
  background: linear-gradient(to right, #ffffff, #e0e0e0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Gradient text effect */
  display: inline-block;
}

.launcher-title .gold {
  background: linear-gradient(to right, #ffd700, #ffaa00);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

/* Windows Download Button Style */
.btn-windows {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-windows svg {
  flex-shrink: 0;
}

.coming-soon-content h2 {
  font-size: clamp(1.5rem, 8vw, 3rem);
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.coming-soon-content p {
  font-size: 1.2rem;
  color: var(--text-muted);
}

/* Re-add glass-card styles for reuse if needed, but remove modes-grid specific styles */
.glass-card,
.gold-edge {
  background: var(--bg-card);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.gold-edge:hover,
.glass-card:hover {
  border-color: var(--primary);
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3);
}

/* Showcase & Play Button Fix */
.showcase-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.showcase-info {
  margin-right: 2rem; /* Gap between text and updates */
}
.showcase-info h2 {
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  color: var(--accent);
  margin-bottom: 1rem;
}
.accent-line {
  width: 60px;
  height: 6px;
  background: var(--primary);
  margin-bottom: 2rem;
  border-radius: 3px;
}
.feature-list li {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feature-list li::before {
  content: "►";
  color: var(--accent);
  font-size: 0.8rem;
}

.video-placeholder {
  position: relative; /* Essential for play button positioning */
  width: 100%;
  height: 100%;
}

.showcase-visual {
  border-radius: var(--radius);
  overflow: hidden;
  border: 4px solid var(--bg-card);
}
.showcase-visual img {
  width: 100%;
  display: block;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(13, 19, 33, 0.8);
  border: 3px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(255, 214, 10, 0.3);
  z-index: 10;
  transition: var(--transition);
}
.play-button:hover {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 30px var(--accent);
}
.play-button svg path {
  fill: var(--accent);
}
.play-button:hover svg path {
  fill: black;
}

/* Updates */
.updates-timeline {
  max-width: 800px;
  margin: 0 auto;
}
.update-item {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: flex-start;
  text-align: left;
}
.update-badge {
  background: var(--accent);
  color: black;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
.update-content h3 {
  color: white;
  font-size: 1.5rem;
}
.update-date {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.6;
}

.update-content ul {
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
}
.update-content li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.4rem;
  opacity: 0.9;
  font-size: 1rem;
  line-height: 1.4;
  color: #ddd;
}
.update-content li:before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-overlay.active {
  display: flex;
}
.modal-content {
  max-width: 500px;
  width: 90%;
  background: #162032;
  border: 2px solid var(--primary);
  padding: 3rem;
  border-radius: var(--radius);
  position: relative;
  /* More gap for title */
}

/* Styled Close Button */
.close-btn-styled {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.close-btn-styled:hover {
  background: var(--accent-red);
  color: white;
  border-color: var(--accent-red);
  transform: rotate(90deg);
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--primary-light);
  font-weight: bold;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 8px;
  font-family: inherit;
}

/* Footer */
.footer {
  background: linear-gradient(to top, #020408, #0d1321);
  padding: 3rem 0;
  text-align: center;
  border-top: 4px solid var(--primary-dark);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* Responsive */
/* Responsive */
@media (max-width: 900px) {
  .launcher-card {
    grid-template-columns: 1fr;
    padding: 2rem;
    text-align: center;
  }
  .launcher-card .download-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .launcher-card img {
    margin-top: 2rem;
  }

  .req-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.8rem; /* Responsive font size */
    word-wrap: break-word; /* Prevent overflow */
  }
  .section-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
    padding: 0 1rem;
  }
  .navbar {
    padding: 0.5rem 1rem;
  }

  /* Fix for Hamburger menu being off-screen */
  .menu-toggle {
    display: flex;
    margin-right: 0;
  }

  /* Mobile Navigation */
  .nav-links {
    position: fixed;
    top: 0;
    left: -100%; /* Hidden by default */
    width: 100%;
    height: 100vh;
    background: rgba(13, 19, 33, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
    transition: left 0.4s ease; /* Ensure smooth transition */
  }

  .nav-links.active {
    left: 0;
  }

  .nav-links a {
    font-size: 1.5rem;
  }

  .nav-cta {
    display: none;
  }

  /* Updates Responsive Fix */
  .update-item {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
  }

  .update-badge {
    margin-top: 0;
    font-size: 0.8rem;
  }

  .showcase-container {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    min-width: auto;
  }

  .container {
    padding: 1rem;
  }

  .hero-content {
    margin-top: 6rem; /* More space for fixed header */
  }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--accent);
  color: black;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 800;
  transform: translateY(200%);
  transition: var(--transition);
  z-index: 3000;
}

/* Ornate RPG Button Styles */
.play-btn-ornate {
  --btn-pd-y: 8px;
  --btn-pd-x: 16px;
  --border-color: #ffd60a;

  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  position: relative;
  padding: var(--btn-pd-y) var(--btn-pd-x);
  margin: 0;
  transform: translateZ(0);
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.35))
    drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
  text-decoration: none;
  display: inline-block;
  min-width: 400px;
}

.play-btn-ornate:before,
.play-btn-ornate:after {
  content: "";
  width: 23px;
  height: 15px;
  position: absolute;
  z-index: 2;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 15"><path d="M8 14L7.29289 14.7071L7.58579 15H8V14ZM20 14V15H22.4142L20.7071 13.2929L20 14ZM10.5 4.5L11.2071 3.79289L10.5 3.08579L9.79289 3.79289L10.5 4.5ZM7 8L6.29289 7.29289L5.58579 8L6.29289 8.70711L7 8ZM9.5 10.5L8.79289 11.2071L9.5 11.9142L10.2071 11.2071L9.5 10.5ZM16 4L16.7071 4.70711L17.4142 4L16.7071 3.29289L16 4ZM14.2071 0.792893L13.5 0.0857864L12.0858 1.5L12.7929 2.20711L14.2071 0.792893ZM4.5 10.5L5.20711 9.79289L4.44352 9.0293L3.74074 9.84921L4.5 10.5ZM1.5 14V15H1.95993L2.25926 14.6508L1.5 14ZM8 15H20V13H8V15ZM20.7071 13.2929L11.2071 3.79289L9.79289 5.20711L19.2929 14.7071L20.7071 13.2929ZM9.79289 3.79289L6.29289 7.29289L7.70711 8.70711L11.2071 5.20711L9.79289 3.79289ZM6.29289 8.70711L8.79289 11.2071L10.2071 9.79289L7.70711 7.29289L6.29289 8.70711ZM8.70711 13.2929L5.20711 9.79289L3.79289 11.2071L7.29289 14.7071L8.70711 13.2929ZM3.74074 9.84921L0.740743 13.3492L2.25926 14.6508L5.25926 11.1508L3.74074 9.84921ZM1.5 13H0V15H1.5V13ZM10.2071 11.2071L12.2071 9.20711L10.7929 7.79289L8.79289 9.79289L10.2071 11.2071ZM15.2071 6.20711L16.7071 4.70711L15.2929 3.29289L13.7929 4.79289L15.2071 6.20711ZM14 0V3H16V0H14ZM16.7071 3.29289L15.7071 2.29289L14.2929 3.70711L15.2929 4.70711L16.7071 3.29289ZM15.7071 2.29289L14.2071 0.792893L12.7929 2.20711L14.2929 3.70711L15.7071 2.29289Z"></path></svg>')
    no-repeat;
}

.play-btn-ornate:before {
  left: 0;
  transform: scaleX(-1);
}

.play-btn-ornate:after {
  right: 0;
}

/* Hide Corner Artifacts */
.play-btn-ornate:before,
.play-btn-ornate:after {
  display: none !important;
}

.play-btn-ornate .defs {
  color: var(--border-color);
  transition: color 0.3s;
}

/* CSS Houdini for smooth angle animation */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.play-btn-ornate .border {
  position: absolute;
  inset: var(--btn-pd-y) var(--btn-pd-x); /* Match button padding exactly */
  border-radius: 12px;
  overflow: visible; /* Prevent glow clipping */
  display: block;
  z-index: 2;
  pointer-events: none;

  /* Conic Gradient Snake with Sparkle Head */
  background: conic-gradient(
    from var(--angle),
    transparent 40%,
    #ffd60a 90%,
    #ffffff 100%
  );

  /* Creating the border shape via mask */
  padding: 4px; /* Border thickness */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* Glow Effect */
  filter: drop-shadow(0 0 5px #ffd60a) drop-shadow(0 0 10px #ffd60a);

  /* Animation */
  animation: rotate-angle 4s linear infinite;
}

/* Cleanup old line elements */
.play-btn-ornate .border .line,
.play-btn-ornate .border svg {
  display: none !important;
}

@keyframes rotate-angle {
  to {
    --angle: 360deg;
  }
}

.play-btn-ornate .label {
  padding: 24px;
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    #00b4d8 0%,
    #023e8a 100%
  ); /* Brighter Hytale Blue */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 15px rgba(0, 180, 216, 0.4);
  /* clip-path removed for rounded look */
  border-radius: 12px;
  overflow: hidden; /* Clips inner gradients to border-radius */
  border: 1px solid rgba(255, 214, 10, 0.3); /* Faint border for contrast */

  color: #fff;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
  text-shadow: 0 2px 0px rgba(0, 0, 0, 0.4);
  transform: translateZ(0);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.play-btn-ornate:hover .label {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 20px rgba(0, 180, 216, 0.6);
  background: linear-gradient(180deg, #48cae4 0%, #0096c7 100%);
  border-color: #fff;
}

.play-btn-ornate .label span {
  /* Solid white for better readability on bright blue */
  color: white;
  background: none;
  -webkit-text-fill-color: white;
  display: block;
}

.play-btn-ornate .label .top,
.play-btn-ornate .label .bottom {
  left: 0;
  right: 0;
  position: absolute;
  height: 6px;
  overflow: hidden;
}
.play-btn-ornate .label .top div,
.play-btn-ornate .label .top:before,
.play-btn-ornate .label .top:after,
.play-btn-ornate .label .bottom div,
.play-btn-ornate .label .bottom:before,
.play-btn-ornate .label .bottom:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.play-btn-ornate .label .top {
  top: 0;
  background: radial-gradient(
    61.17% 100% at 50% 100%,
    transparent,
    rgba(255, 255, 255, 0) 100%
  );
}
.play-btn-ornate .label .top div {
  inset: 0;
  background: radial-gradient(
    70% 100% at 50% 100%,
    rgba(255, 255, 255, 0.75) 0%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  opacity: var(--top-shine-opacity, 0.75);
  transition: opacity 0.3s;
}
.play-btn-ornate .label .top div:nth-child(2) {
  background: radial-gradient(
    80% 100% at 50% 100%,
    rgba(255, 255, 255, 1) 40%,
    transparent 100%
  );
}
.play-btn-ornate .label .top div:nth-child(3) {
  background: radial-gradient(
    80% 100% at 50% 100%,
    rgba(255, 255, 255, 1) 20%,
    transparent 100%
  );
}
.play-btn-ornate .label .top:before {
  height: 0;
  bottom: 0;
  background: radial-gradient(
    61.17% 100% at 50% 100%,
    #ffffff 0%,
    rgba(255, 255, 255, 1) 100%
  );
  mix-blend-mode: overlay;
  background-blend-mode: screen;
}
.play-btn-ornate .label .top:after {
  height: 1px;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 1) 50%,
    transparent 100%
  );
}

.play-btn-ornate .label .bottom {
  bottom: 0;
  background: radial-gradient(
    89.02% 100% at 50% 100%,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0.6) 100%
  );
  mix-blend-mode: overlay;
  transform: matrix(1, 0, 0, -1, 0, 0);
}
.play-btn-ornate .label .bottom div {
  height: 1px;
  bottom: 0;
  background:
    radial-gradient(
      circle at 33% 0%,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 66% 0%,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 20%
    );
  opacity: var(--bottom-shine-opacity, 0.7);
  transition: opacity 0.3s;
}

.play-btn-ornate:focus-visible,
.play-btn-ornate:hover {
  --top-shine-opacity: 1;
  --bottom-shine-opacity: 1;
  --border-color: #ffe5c2;
  --text-opacity: 1;
  transform: scale(1.05);
  transition: transform 0.2s;
}

@media (max-width: 500px) {
  .play-btn {
    min-width: auto;
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
  }
  .play-btn-ornate {
    --btn-pd-y: 3px;
    --btn-pd-x: 3px;
    min-width: auto;
    width: 100%;
    font-size: 1rem;
  }
  .play-btn-ornate .label {
    padding: 1rem 0.5rem;
    font-size: 1.1rem;
    line-height: normal;
  }
  .server-ip-box {
    max-width: 100%;
  }
  /* Ensure logo fits */
  .logo img {
    height: 35px !important;
  }
}

/* Animations removed (replaced by rotate-angle) */

/* Skyblock Video Styles */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: black;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Launcher Platform Buttons */
.main-download {
  display: flex;
  justify-content: center;
}

.secondary-downloads {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.btn-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition);
  text-transform: uppercase;
}

.btn-platform:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.btn-platform svg {
  opacity: 0.7;
}

.btn-platform:hover svg {
  opacity: 1;
}

.download-info {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

@media (max-width: 600px) {
  .secondary-downloads {
    flex-direction: column;
    gap: 0.5rem;
  }
  .btn-platform {
    justify-content: center;
  }
}

/* Support Form & File Upload */
.modal-content {
  max-width: 500px !important;
  width: 90% !important;
}

.ticket-form .form-group {
  margin-bottom: 1.2rem;
  text-align: left;
}

.ticket-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ticket-form input[type="text"],
.ticket-form input[type="email"],
.ticket-form textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: white;
  font-family: var(--font-body);
  transition: var(--transition);
  font-size: 0.95rem;
}

.ticket-form input:focus,
.ticket-form textarea:focus {
  border-color: var(--primary);
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 180, 216, 0.2);
}

.file-upload-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--glass-border);
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition);
}

.file-upload-wrapper:hover {
  border-color: var(--primary);
  background: rgba(0, 180, 216, 0.05);
}

.file-upload-wrapper input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.file-upload-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: white;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  transition: var(--transition);
  flex-shrink: 0;
}

.file-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full-width {
  width: 100%;
}

@media (max-width: 500px) {
  .modal-content {
    padding: 1.5rem !important;
  }
  .modal-title {
    font-size: 1.5rem !important;
  }
}

/* Button Loading & Disabled States */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.btn:disabled::after,
.btn:disabled::before {
  display: none;
}