/* Base Styling & Background */
body {
  background-color: #0c020f; 
  margin: 0;
  padding: 0;
  font-family: 'Cinzel', serif;
  min-height: 100vh; /* Replaces fixed height with dynamic viewport tracking */
}

/* Prevents background scrolling when the modal window is active */
body.no-scroll {
  overflow: hidden;
}

/* Main Header Outline Box */
.site-header {
  position: fixed; 
  top: 25px; 
  left: 50%;
  transform: translateX(-50%); 
  border: 1px solid #2A9DB7; 
  border-radius: 20px;
  padding: 10px 25px; 
  width: calc(100% - 40px); 
  max-width: 1147px; 
  box-sizing: border-box;
  z-index: 9999; 

  /* Darker, rich translucent purple with 12px blur for clean diffusion */
  background-color: rgba(40, 38, 38, 0.3);
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
}

/* Container holding the top and bottom rows */
.header-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Reduced from 22px to bring the bottom row closer */
}

/* Top Row Layout - Context layer for absolute elements */
.header-top-row {
  position: relative; 
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Left Group: Logo, Home, and Name Box expanding to fill up to the absolute center */
.left-elements-group {
  display: flex;
  align-items: center;
  gap: 20px; 
  flex-grow: 1; 
  max-width: calc(50% - 46px); 
}

/* Sub-group to keep HOME pulled tightly to the logo image */
.logo-home-subgroup {
  display: flex;
  align-items: center;
  gap: 10px; 
  flex-shrink: 0; 
  margin-right: -8px; 
}

/* Vinezyl Logo Image Container */
.logo-container {
  display: flex;
  align-items: center;
}
.logo-link {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.logo-link:hover {
  transform: scale(1.03); 
}
.logo-img {
  width: 78px; 
  height: 78px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* Home Link with Cinzel Decorative updates */
.nav-home {
  font-family: 'Cinzel Decorative', serif; 
  font-size: 38px; 
  text-decoration: underline; 
  text-decoration-color: #0014a8; 
  text-decoration-thickness: 3px; 
  text-underline-offset: 4px; 
  font-weight: 900 !important; 
  letter-spacing: 2px;
}

.nav-home span,
.nav-home:link span,
.nav-home:visited span {
  color: #0014a8 !important;
}

/* 2x2 Navigation Box */
.grid-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 6px 25px; 
  border: 1px solid #2A9DB7; 
  border-radius: 8px;
  padding: 4px 15px; 
  flex-grow: 1; 
}
.grid-nav a {
  color: #0055ff;
  text-decoration: none;
  font-family: 'Cinzel', serif; 
  font-size: 20px; 
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.2; 
  display: flex;
  justify-content: center;
  text-align: center;
}
.grid-nav a:hover {
  color: #2A9DB7;
}

/* Circular Menu Button */
.menu-circle-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
  width: 56px; 
  height: 56px; 
  border: 1.5px solid #2A9DB7; 
  border-radius: 50%;
  background: transparent;
  color: #34D0EF;
  font-family: 'Cinzel', serif; 
  font-size: 14px; 
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.menu-circle-btn:hover {
  background-color: transparent; 
  color: #0c020f; 
  border-color: #0c020f; 
}

/* Far Right Group */
.right-nav-group {
  display: flex;
  align-items: center;
  flex-grow: 1; 
  max-width: calc(50% - 46px); 
  margin-left: auto; 
}

/* Search and Language Interactive Button Block */
.search-language-bar {
  background-color: #34D0EF; 
  color: #0c020f; 
  border: 1px solid #34D0EF; 
  padding: 14px 22px;
  border-radius: 10px;
  font-family: 'Cinzel Decorative', serif; 
  font-weight: 900;
  font-style: italic;
  font-size: 15px; 
  letter-spacing: 1px;
  text-align: center;
  width: 100%; 
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.search-language-bar:hover {
  background-color: rgba(12, 2, 15, 0.45); 
  color: #34D0EF; 
  border-color: #34D0EF; 
}

/* Bottom Row Layout */
.header-bottom-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Sub-nav Buttons (Zzz and Genshin) */
.sub-nav-btn {
  border: 1px solid #34D0EF; 
  border-radius: 6px; 
  color: #34D0EF; 
  text-decoration: none;
  padding: 10px 12px; /* Reduced horizontal padding from 32px to 16px to narrow the boxes */
  font-family: 'Cinzel', serif; 
  font-size: 22px; 
  font-weight: bold;
  letter-spacing: 1px;
  background: transparent;
  
  /* Setup for the fill hover effect */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
}

/* Background expansion layer */
.sub-nav-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #34D0EF;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  z-index: -1;
  transition: width 0.4s ease, height 0.4s ease, border-radius 0.4s ease;
}

/* New Hover State */
.sub-nav-btn:hover {
  color: #0c020f; 
}

/* Triggers the background fill expansion from the center */
.sub-nav-btn:hover::before {
  width: 300%; 
  height: 500%; 
  border-radius: 0%; 
}

/* ==========================================================================
   MODAL OVERLAY WINDOW SYSTEM
   ========================================================================== */

/* Overlay background mask covering the screen with a faint shadow layout */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(12, 2, 15, 0.6); 
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Active visibility selector rule triggered via JavaScript hook states */
.menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Context Window Shell - Decreased padding for a tighter fit */
.menu-modal-window {
  background-color: #000000; 
  width: 92%;
  max-width: 1200px; 
  box-sizing: border-box;
  padding: 25px 40px; 
  position: relative;
  
  /* Distinctive neon inner-and-outer double-border configuration from image */
  border: 2px solid #2A9DB7;
  outline: 4px solid #000000;
  box-shadow: 0 0 0 7px #2A9DB7;
  margin: 20px;
}

/* Layout Top Container Segment - Decreased bottom margin */
.modal-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* Brand and Social Links Bar */
.modal-socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* --- IMAGE-BASED SOCIAL ICON LINKS --- */
.social-icon-wrapper {
  width: 34px;
  height: 34px;
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
  line-height: 0; 
}

/* Smooth scale hover effects for interactive feedback */
.social-icon-wrapper:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}

/* Direct image wrapper constraints */
.social-img-asset {
  width: 100%;
  height: 100%;
  display: block;
}

/* Asset Class Utility Variants for differing image aspect layouts */
.object-contain { object-fit: contain; }
.radius-circle  { border-radius: 50%; }
.radius-standard { border-radius: 6px; }

/* Custom backdrops if needed to preserve visibility context against pure black */
.img-logo-wrapper { background: transparent; }
.img-hoyolab-wrapper { background: transparent; }

/* Cross Close Handle */
.modal-close-trigger {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  
  /* Add transform to the baseline and include it in the transition */
  transform: rotate(0deg);
  transition: color 0.2s ease, transform 0.3s ease; 
}

/* Rotate 90 degrees on hover */
.modal-close-trigger:hover {
  color: #2A9DB7;
  transform: rotate(90deg);
}

/* Primary Category Containers - Decreased padding from 20px to 10px */
.modal-nav-section {
  border-top: 1px solid rgba(42, 157, 183, 0.4);
  padding: 10px 0;
}

/* Global Direct Core Title Settings - Decreased bottom margin from 14px to 6px */
.modal-main-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 24px; 
  letter-spacing: 1px;
  margin: 0 0 6px 0;
}
.modal-main-title a {
  color: #34D0EF;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

/* Main Title Line - Setup for scrolling in from left */
.modal-main-title a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #34D0EF;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out;
}

/* Hover effect for Main Menu titles */
.modal-main-title a:hover::before {
  transform: scaleX(1);
}
.modal-main-title a:hover {
  text-shadow: 0 0 8px rgba(52, 208, 239, 0.6);
}

/* --- ACTIVE CURRENT PAGE SPECIFICATIONS --- */
.modal-main-title a.active {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.modal-main-title a.active::before {
  background-color: #ffffff !important;
  transform: scaleX(1);
}

/* Custom Override Specifier matching white text constraints when not active */
/* Custom Override Specifier targeting ONLY the core main header link when parent container has .title-white */
.title-white .modal-main-title a:not(.active) {
  color: #ffffff;
}
.title-white .modal-main-title a:not(.active)::before {
  background-color: #ffffff;
}

/* Subcategory Internal Layout Matrices - Decreased row gap from 14px to 8px */
.modal-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
  gap: 8px 24px;
  padding-left: 5px;
  align-items: start;
}

/* --- STANDARD SINGLE-LINE LINKS --- */
.modal-links-grid a {
  color: #cccccc;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 15px; 
  
  display: inline-block;
  width: fit-content;
  position: relative;
  padding-bottom: 6px; 
  transition: color 0.2s;
}

/* Generate double-underlines for single line links right beneath text elements */
.modal-links-grid a::before,
.modal-links-grid a::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #34D0EF;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out;
}
.modal-links-grid a::before { bottom: 4px; }
.modal-links-grid a::after  { bottom: 0px; transition-delay: 0.05s; }

/* Hover states for standard items */
.modal-links-grid a:hover { color: #34D0EF; }
.modal-links-grid a:not(.multiline-item):hover::before,
.modal-links-grid a:not(.multiline-item):hover::after {
  transform: scaleX(1);
}

/* Active current page sub-link state settings */
.modal-links-grid a.active {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.modal-links-grid a:not(.multiline-item).active::before,
.modal-links-grid a:not(.multiline-item).active::after {
  background-color: #ffffff !important;
  transform: scaleX(1);
}

/* --- MULTI-LINE ITEM CONFIGURATION --- */
.modal-links-grid a.multiline-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 0; 
}

/* Clear default absolute values off multi-line links */
.modal-links-grid a.multiline-item::before,
.modal-links-grid a.multiline-item::after {
  display: none !important;
}

.modal-links-grid a.multiline-item span {
  position: relative;
  display: inline-block;
  width: fit-content;
}

/* Word 1 Setup */
.modal-links-grid a.multiline-item .line-1 {
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.modal-links-grid a.multiline-item .line-1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #34D0EF;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out;
}

/* Word 2 Setup */
.modal-links-grid a.multiline-item .line-2 {
  padding-bottom: 6px;
}
.modal-links-grid a.multiline-item .line-2::before,
.modal-links-grid a.multiline-item .line-2::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #34D0EF;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out;
}
.modal-links-grid a.multiline-item .line-2::before { bottom: 4px; transition-delay: 0.04s; }
.modal-links-grid a.multiline-item .line-2::after  { bottom: 0px; transition-delay: 0.08s; }

/* Hover states for multiline links */
.modal-links-grid a.multiline-item:hover .line-1::before,
.modal-links-grid a.multiline-item:hover .line-2::before,
.modal-links-grid a.multiline-item:hover .line-2::after {
  transform: scaleX(1);
}

/* Active multi-line current page handler variables */
.modal-links-grid a.multiline-item.active .line-1::before,
.modal-links-grid a.multiline-item.active .line-2::before,
.modal-links-grid a.multiline-item.active .line-2::after {
  background-color: #ffffff !important;
  transform: scaleX(1);
}

/* ==========================================================================
   SUB-HEADER BANNER COMPONENT (SUBTLE ELEMENT SCALE BUMP)
   ========================================================================== */

.banner-sub-header {
  width: 100%;
  max-width: 1650px; 
  margin: 245px auto 30px auto; 
  padding: 0 40px; 
  box-sizing: border-box;
}

.banner-container {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  width: 100%;
  gap: 90px; 
}

/* Base properties shared across all three inline wrappers */
.banner-box {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Left Section: Crisp left alignment */
.left-brand {
  justify-content: flex-start;
  text-align: left;
}

.brand-title {
  font-family: 'Cinzel Decorative', serif; 
  font-size: 42px;
  font-weight: 700; 
  color: #34D0EF;
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(52, 208, 239, 0.25);
}

/* Center Section: Graphic Frame with 15px Rounded Corners */
.center-graphic {
  justify-content: center;
  flex: 0 0 450px; /* Slightly increased scale to prevent distortion or shrinking */
}

.graphic-crop-box {
  width: 450px;      /* Updated width by a tiny amount from 420px to 450px */
  height: 125px;     /* Subtle height bump to match the width proportions */
  overflow: hidden;  
  position: relative;
  display: flex;     
  align-items: center; 
  justify-content: center;
  border-radius: 15px; 
}

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

/* Right Section: Crisp right alignment */
.right-links-container {
  justify-content: flex-end;
}

.links-card {
  background: #174e5e; 
  border: 5px solid #20697F; /* Increased thickness by 1.5px and updated to your custom color */
  border-radius: 0px 18px 0px 18px; 
  
  padding: 14px 15px 24px 15px;
  min-width: 385px; 
  min-height: 145px; 
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.links-card-title {
  font-family: 'Cinzel Decorative', serif; 
  font-size: 32px; 
  font-weight: 200; 
  color: #34d0ef;
  margin: 0; 
  letter-spacing: 2px;
  line-height: 1;
  display: inline-block;
  
  border-bottom: 2px solid #34d0ef;
  padding-bottom: 4px;
  width: 80px; 
}

.links-social-row {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  gap: 20px;
  margin-top: 14px; 
}

.social-icon {
  width: 40px; 
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-icon:hover {
  transform: scale(1.12);
  filter: brightness(1.25);
}

/* Responsive adjustment layer for mobile setups */
@media (max-width: 1200px) {
  .banner-sub-header {
    margin-top: 290px;
    padding: 0 20px;
  }
  .banner-container {
    flex-direction: column;
    gap: 30px;
  }
  .banner-box, .left-brand, .center-graphic, .right-links-container {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .graphic-crop-box {
    max-width: 100%;
  }
}

/* ==========================================================================
   DASHBOARD ARCHITECTURE GRID CSS
   ========================================================================== */

.dashboard-section {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto 80px auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ==========================================================================
   UPDATED CORE DASHBOARD LAYOUT & SPACING CONTROLS
   ========================================================================== */

/* Update the dashboard container to handle spacing perfectly */
.dashboard-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Forces the side columns to stretch to the exact same height */
  gap: 24px;
  width: 100%;
}

/* Center column holding the main games panel and footer grid */
.games-col { 
  flex: 1; 
  min-width: 500px;
  padding: 0; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  gap: 0px; 
  background: transparent; 
  border: none;
  box-shadow: none;
  align-self: center; /* Drops the entire column to the vertical middle */
}

/* ==========================================================================
   CENTER PANE (GAMES SHOWCASE VIEWPORT) WITH 16:9 SPECIFICATIONS
   ========================================================================== */

.games-showcase-viewport {
  width: 100%;
  aspect-ratio: 16 / 9; /* Enforces clean cinematic layout window constraint */
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  /* #20697F matching the update column outline frame */
  border: 3.5px solid #20697F; 
  
  /* #20697F translated to RGBA with exactly 30% alpha transparency */
  background: rgba(32, 105, 127, 0.3); 
  
  /* CORRECTED ROUNDING: Only the top two corners are rounded at 15px */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Interactive logo anchor wrappers */
.game-logo-link {
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

.game-logo-link:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
}

/* ==========================================================================
   CENTER PANE GRAPHIC ELEMENTS & IMAGES
   ========================================================================== */

.games-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;        /* Distance giving larger graphics room to breathe */
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.showcase-logo {
  max-height: 150px; /* Base maximum scale threshold */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Specific framing structure for the Zenless Zone Zero logo box layout */
.game-logo-link.card-style {
  background: transparent;  
  border: none;             
  border-radius: 0px;       
  padding: 0;               
}

/* TARGETED SIZE ADJUSTMENT: Forces the ZZZ image inside the link wrapper to scale larger */
.game-logo-link.card-style .showcase-logo {
  max-height: 220px; /* Bumps up the individual size scale layout parameters */
  width: auto;
}

.games-col   { flex: 1; padding: 0; overflow: hidden; justify-content: space-between; }

/* Update news column layout distribution */
.news-col {
  flex: 0 0 340px; 
  display: flex;
  flex-direction: column;
  background: rgba(32, 105, 127, 0.8); 
  border: 3.5px solid #20697F;          
  border-radius: 15px;                  
  padding: 8px 10px 14px 10px; /* Enhanced bottom padding for the pinned button */
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Ensure card links don't inherit default text-decoration underlines */
.news-card {
  background: #0d2129;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  border: 1px solid rgba(32, 105, 127, 0.4);
  text-decoration: none; /* Prevents underlines on titles */
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Give the clickable news cards a nice interactive hover effect */
.news-card:hover {
  background: #112b36;
  border-color: rgba(52, 208, 239, 0.6);
  transform: translateY(-1px);
}

/* Forces the bottom controls container to push down to the base edge */
.news-col-footer {
  margin-top: auto; /* Pushes the entire block down cleanly */
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Ensure the full-width link wrapper wraps the button correctly */
.view-more-link {
  text-decoration: none;
  width: 100%;
  display: block;
}

/* Tighten pagination margins slightly now that it sits inside the footer block */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 12px 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #1a8fa6;
}

/* Reusable header formats inside containers */
.col-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 28px;
  font-weight: 700;
  color: #34d0ef;
  margin: 0 0 14px 0;
  letter-spacing: 2px;
  border-bottom: 2px solid #20697f;
  padding-bottom: 6px;
  display: inline-block;
  width: fit-content;
}

/* ==========================================================================
   UPDATED LEFT COLUMN STYLE (UPDATES)
   ========================================================================== */

.updates-col {
  flex: 0 0 260px; /* Slightly widened to gracefully accommodate inner padding frames */
  background: rgba(32, 105, 127, 0.8); /* #20697F at 80% opacity */
  border: 3.5px solid #20697F;          /* #20697F at 100% opacity */
  border-radius: 15px;                  /* Corrected to exactly 15px uniform rounding */
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Thicker and wider title dividing line setup */
.updates-col .col-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 28px;
  font-weight: 700;
  color: #34d0ef;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
  border-bottom: 3.5px solid #20697f; /* Thicker accent line */
  padding-bottom: 8px;
  display: block;                     /* Forces line to span wider across container */
  width: 100%;                        /* Expands width safely */
  box-sizing: border-box;
}

.updates-stack {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Comfortable vertical spacing between the image cards */
}

/* Photo box style accurately mimicking image_d4b67e.png & image_d454ac.png */
.update-card {
  position: relative;
  display: block;                 /* Critical for anchor layout behavior */
  text-decoration: none;          /* Removes default link behaviors */
  width: 100%;
  padding: 12px;                  /* Creates dark frame backdrop border padding effect */
  background: #174e5e;            /* Deep teal color frame */
  box-sizing: border-box;
  overflow: hidden;               /* Seamlessly clips child corners to the rounded frame */
  transition: transform 0.2s ease, filter 0.2s ease;
  
  /* MATCHES image_d454ac.png: Distinctive bottom-right curve rounding */
  border-bottom-right-radius: 36px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* Subtle interactive scale click indicator */
.update-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* The bright interior container window hosting graphics */
.update-img-box {
  width: 100%;
  height: 105px;
  background: #2cc5e8;            /* Vibrant light blue fill directly from image_d4b67e.png */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  /* Curvature styling to blend flush into the parent's asymmetric curve structure */
  border-bottom-right-radius: 24px; 
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.update-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Refined Orange Overlay Badges with Original Rounding and Accent Shadow */
.badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #e95331;            /* Vibrant reddish orange matching sample */
  padding: 5px 18px;
  
  /* Typography enhancements */
  font-family: 'Cinzel Decorative', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 16px;                
  color: #34d0ef;                 
  
  letter-spacing: 1px;
  z-index: 5;
  
  /* UPDATED: Saturated dark orange-red shadow that pops aggressively over the cyan block */
box-shadow: 3px 3px 6px rgba(133, 27, 3, 0.95);

  /* Asymmetric bottom-right rounding configuration */
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.badge-update {
  background: #de3f1c;            
  /* Corresponding darker shade variant shadow for the secondary badge condition */
box-shadow: 3px 3px 6px rgba(133, 27, 3, 0.95);
}

/* ==========================================================================
   CENTER COLUMN STYLES (GAMES PANEL Showcase)
   ========================================================================== */
.games-showcase-viewport {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  min-height: 400px;
}

.games-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.showcase-logo {
  max-height: 110px;
  object-fit: contain;
}

.showcase-logo.card-style {
  background: #000000;
  border-radius: 12px;
  padding: 14px;
  border: 2px solid #2a2a2a;
}

.center-title {
  margin: auto 0 0 0;
  font-size: 34px;
  border-bottom: none;
}

/* Lower Footer Split Navigation Link Cards */
.games-footer-grid {
  display: flex;
  width: 100%;
  border-top: 3.5px solid #20697F;
  background: rgba(13, 33, 41, 0.4);
}

.grid-tile {
  flex: 1;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border-right: 2px solid #20697F;
  transition: background 0.2s ease;
}

.grid-tile:last-child { border-right: none; }
.grid-tile:hover { background: rgba(52, 208, 239, 0.1); }

.tile-icon-box {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-icon-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tile-label {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #34d0ef;
  letter-spacing: 1px;
}

/* ==========================================================================
   RIGHT COLUMN STYLES (NEWS PORTAL)
   ========================================================================== */
/* Update the stack container to fill empty vertical space */
.news-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1; /* Pushes the footer down */
  margin-bottom: 16px; 
}

/* Ensure dynamic cards stretch taller automatically */
.news-card {
  background: #0d2129;
  border-radius: 4px;
  padding: 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(32, 105, 127, 0.4);
  text-decoration: none; 
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  flex: 1; /* Automatically stretches the items to evenly consume all vertical space! */
}

/* Make sure the text constraints handle stretching well */
.news-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1; 
}

/* Add an interactive pointer to the pagination buttons */
.pag-btn {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.pag-btn:hover {
  color: #fff;
}

/* Disable styles for when buttons hit the end of the pages */
.pag-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.news-content h3 {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: #34d0ef;
  margin: 0;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.news-date {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #1a8fa6;
  font-weight: 700;
}

.news-thumb {
  width: 90px;
  height: 55px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(52, 208, 239, 0.2);
}

/* News Navigation Controls styling */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 16px 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #1a8fa6;
}

.pag-current { color: #34d0ef; min-width: 30px; text-align: center; }

/* Fixes the base button styling back to its intended custom design */
.zzz-btn,
.go-now-btn {
  background: var(--accent-yellow, #34d0ef) !important; /* Re-links your orange/yellow variable, fallback included */
  color: #000000 !important;
  border: none !important;
  padding: 10px 20px !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border-radius: 0px !important; /* Resets flat rounding to match original skewed geometry */
  transition: transform 0.3s ease, background-color 0.3s, box-shadow 0.3s !important;
}

/* Restores the custom cinematic hover animation and glow effects */
.zzz-btn:hover,
.go-now-btn:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: scale(1.05) skewX(-3deg) !important; /* Restores the intended aggressive skew pop */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6) !important;
}

/* Ensure text links within Item 5 style seamlessly without default underlines */
.zzz-grid-box h3 a.zzz-list-item {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.zzz-grid-box h3 a.zzz-list-item:hover {
  color: var(--accent-cyan); /* Matches utility interaction setups */
}

/* Base structural adjustments for new clickable banner containers */
.bottom-banner-link {
  display: inline-block;
  transition: transform 0.2s ease;
}
.bottom-banner-link:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONSTRAINTS
   ========================================================================== */
@media (max-width: 1200px) {
  .dashboard-container {
    flex-direction: column;
  }
  .updates-col, .news-col {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ==========================================================================
   CENTER PANEL STACK STRUCTURE & FOUR FOOTER TILES
   ========================================================================== */

/* Outer structural wrapper container managing the vertical layout flow */
.games-column-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  gap: 20px; /* Even separation between upper showcase box and lower boxes */
}

/* Update your main grid block to 4 explicit columns */
/* ==========================================================================
   CENTER PANEL STACK STRUCTURE & FOUR FOOTER TILES
   ========================================================================== */

/* Pull the grid up so the borders overlap perfectly */
.games-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  gap: 6px; /* Tightened the horizontal gap to match the reference image */
  width: 100%;
  margin-top: -3.5px; /* Merges the tile's top border directly over the panel's bottom border */
  position: relative;
  z-index: 2; /* Ensures the tile border sits cleanly on top */
}

/* Ensure individual tiles preserve structural scaling boundaries */
.footer-nav-tile {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  
  /* Exact colors and opacities requested */
  border: 3.5px solid rgba(250, 250, 250, 0.48); 
  background: rgba(52, 208, 239, 0.32); 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  
  /* Sharp top corners, rounded bottom corners */
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  
  /* Transition for color only */
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  min-width: 0; 
  flex-shrink: 0; 
}

/* Hover state: Only shifts background opacity slightly, no upward jump */
.footer-nav-tile:hover {
  background: rgba(52, 208, 239, 0.45); 
}

/* Increase the base frame size for all tile graphics */
.tile-graphic-frame {
  width: 95px;  /* Increased from 70px */
  height: 95px; /* Increased from 70px */
  margin-bottom: 6px; /* Reduced slightly to leave room for the larger images */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0; 
}

/* Box 1 & 3 Graphic Style (Favicon) */
.tile-graphic-frame.circle-style {
  background: transparent;
  border: none; 
  padding: 0; /* Removed padding to let the logo expand to the edges */
  width: 95px;
  height: 95px;
}

/* Box 2 Graphic Style (Wide filled banner crop) */
.tile-graphic-frame.wide-banner-style {
  width: 100%; 
  height: 95px; /* Match the new global height */
  border-radius: 4px;
}

/* Box 4 Graphic Style (SVG Promo) */
.tile-graphic-frame.square-promo-style {
  width: 95px;
  height: 95px;
  background: transparent; 
  border: none;
  padding: 0; /* Removed padding to let the SVG expand to the edges */
}

.tile-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tile-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-promo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ensure text doesn't overflow or blow up the layout */
.tile-nav-label {
  font-family: 'Cinzel', serif;
  font-size: 11px; /* Slightly dropped font size to prevent multi-line overflow on smaller monitors */
  font-weight: 700;
  color: #34d0ef;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 2px;
  white-space: nowrap; /* Forces text to stay on one clean line */
}

/* ==========================================================================
   ZENLESS ZONE ZERO LIGHT SECTION
   ========================================================================== */
.zzz-light-section {
  width: 100%;
  background-color: #f5f5f5; 
  font-family: 'Cinzel', serif; 
  color: #000000;
  margin-top: 40px; 
}

/* White top banner */
.zzz-header-band {
  background-color: #ffffff;
  text-align: center;
  padding: 20px 0;
}

.zzz-header-band h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Main container restricting width and handling column layout */
.zzz-content-wrapper {
  max-width: 1650px; 
  margin: 0 auto;
  padding: 60px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

/* --- Left: Featured Guides --- */
.zzz-featured-guides {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.zzz-featured-guides h3 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 30px 0;
  line-height: 1.3;
}

.zzz-character-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.zzz-char-img {
  height: 220px;
  width: auto;
  object-fit: contain;
}

/* Elevate the center character slightly */
.zzz-char-img.main-char {
  height: 280px; 
}

.zzz-guides-btn {
  background-color: #2a0808; 
  color: #ffffff;
  text-decoration: none;
  padding: 12px 35px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.zzz-guides-btn:hover {
  background-color: #4a1515;
  transform: translateY(-2px);
}

/* --- Middle: Dark Info Card --- */
.zzz-dark-card-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.zzz-dark-card {
  background-color: #0c020f; 
  width: 300px;
  height: 300px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.zzz-card-meta {
  color: #20697F;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zzz-card-title {
  color: #34D0EF; 
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  flex-grow: 1;
}

.zzz-card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border-top: 1px solid rgba(32, 105, 127, 0.5);
  padding-top: 15px;
  color: #20697F;
  font-size: 12px;
}

.zzz-card-footer .heart-icon {
  margin-left: auto;
  color: #e95331; 
  font-size: 16px;
  cursor: pointer;
}

/* --- Right: Links Navigation --- */
.zzz-links-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.zzz-link-item {
  color: #000000;
  text-decoration: none;
  font-size: 22px;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s ease;
}

/* Black underline */
.zzz-link-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: #000000;
  transition: background-color 0.2s ease;
}

/* Hover effects utilizing your cyan theme[cite: 2] */
.zzz-link-item:hover {
  color: #34D0EF;
}

.zzz-link-item:hover::after {
  background-color: #34D0EF;
}

/* Responsive collapse for smaller monitors */
@media (max-width: 1000px) {
  .zzz-content-wrapper {
    flex-direction: column;
    gap: 60px;
  }
}

/* ==========================================================================
   TAB SYSTEM STYLES
   ========================================================================== */
.game-tabs-band {
  display: flex;
  justify-content: center;
  background-color: #0c020f; /* Matches page background behind the tabs */
  width: 100%;
}

.game-tab {
  background-color: #0c020f; /* Default inactive background */
  color: #ffffff; /* White text for readability on dark background */
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  padding: 20px 60px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
  outline: none;
}

/* Hover State matches the search bar */
.game-tab:hover {
  background-color: #34D0EF;
  color: #0c020f;
}

/* Active/Selected State */
.game-tab.active {
  background-color: #ffffff;
  color: #000000;
}

/* Hide inactive panels */
.game-tab-content {
  display: none;
}

/* Show the active panel */
.game-tab-content.active {
  display: block;
}

/* Ensure the link wrappers don't break the character alignments */
.zzz-char-link {
  display: inline-block;
  line-height: 0;
  transition: transform 0.2s ease;
}
.zzz-char-link:hover {
  transform: scale(1.03);
}

/* Center the dynamic title within the card layout */
#zzz-card-title {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Genshin specific character image shaping */
.genshin-char-img {
  width: 200px; 
  height: 180px !important; /* Overrides the ZZZ 220px height */
  aspect-ratio: 1 / 1;
  object-fit: cover; /* Ensures the image crops into the square nicely instead of distorting */
  border-radius: 8px; /* Slightly rounds the square corners so they look polished */
}

/* Elevate the center character slightly, keeping it square */
.genshin-char-img.main-char {
  width: 320px;
  height: 220px !important;
}

/* ==========================================================================
   VERTICAL NEWS & ARCHIVES SECTION
   ========================================================================== */
.news-list-section {
  background-color: #0c020f; /* Seamless color match with the document body */
  padding: 80px 40px;
  font-family: 'Cinzel', serif;
  color: #ffffff;
}

.news-list-container {
  max-width: 1650px; /* Aligned width constraint matching the dashboard */
  margin: 0 auto;
}

.news-list-header {
  font-family: 'Cinzel Decorative', serif;
  font-size: 32px;
  font-weight: 700;
  color: #34d0ef;
  margin-top: 0;
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* Two Column Layout Grid */
.news-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* --- Left Column: Vertical Post Items --- */
.news-posts-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vertical-post-item {
  padding: 50px 0;
  border-bottom: 1px solid rgba(32, 105, 127, 0.4); /* Deep teal separator line */
  display: flex;
  flex-direction: column;
}

.vertical-post-item:first-child {
  padding-top: 0;
}

/* Post Top Thumbnail Configuration */
.vertical-post-image {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 25px;
  border: 1px solid rgba(52, 208, 239, 0.2);
  background-color: #0d2129;
}

.vertical-post-date {
  color: #1a8fa6; /* Soft cyan-gray secondary tone */
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.vertical-post-title {
  font-size: 28px;
  color: #34d0ef; /* Main light blue text color */
  text-decoration: none;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 20px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.vertical-post-title:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(52, 208, 239, 0.5);
}

.vertical-post-readmore {
  color: #34d0ef;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.vertical-post-readmore:hover {
  transform: translateX(6px);
  color: #ffffff;
}

/* --- Right Column: Sidebar Archive Filtering Layout --- */
.news-sidebar {
  width: 340px;
  flex-shrink: 0;
}

.archive-box {
  background: rgba(32, 105, 127, 0.3); /* Translucent theme panel styling */
  border: 3.5px solid #20697F;
  border-radius: 15px;
  padding: 35px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.archive-box h3 {
  font-family: 'Cinzel Decorative', serif;
  color: #34d0ef;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 25px;
  border-bottom: 2px solid #20697f;
  padding-bottom: 12px;
  letter-spacing: 1px;
}

.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.archive-list li {
  cursor: pointer;
  color: #cccccc;
  font-size: 16px;
  font-weight: 700;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.archive-list li:hover, 
.archive-list li.active-filter {
  color: #34d0ef;
  text-shadow: 0 0 6px rgba(52, 208, 239, 0.4);
}

/* Smooth Stacking Adaptation for Responsive Screens */
@media (max-width: 1200px) {
  .news-layout {
    flex-direction: column;
    gap: 40px;
  }
  .news-sidebar {
    width: 100%;
  }
}

/* ==========================================================================
   REAL DESIGN FOOTER SECTION (VERTICAL BALANCE & ALIGNED SHIFT)
   ========================================================================== */
.custom-cyan-footer {
  background-color: #279cb3; /* Exact solid deep cyan background color from image_b982dd.png */
  max-width: 1350px; 
  width: calc(100% - 40px);
  margin: 60px auto 0 auto; 
  
  /* Top-only rounding configuration */
  border-top-left-radius: 40px;  
  border-top-right-radius: 40px; 
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
  padding: 15px 20px;
  font-family: 'Cinzel Decorative', serif;
  box-sizing: border-box;
}

.cyan-footer-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; 
}

/* Base columns configurations with text centered */
.cyan-footer-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 25px; 
  box-sizing: border-box;
}

/* COLUMN 1: Anchored Left (Untouched reference point) */
.cyan-footer-content .cyan-footer-col:nth-child(1) {
  gap: 38px; 
}

/* COLUMN 2: Shifted rightwards */
.cyan-footer-content .cyan-footer-col:nth-child(2) {
  gap: 31.5px; 
  margin-left: 120px; /* Slides Column 2 rightwards */
}

/* COLUMN 3 (Site Information): 
   - align-self: center handles the perfect vertical alignment automatically.
   - transform: translate(X, Y) alters the position independently.
     Increase/decrease '60px' to push it more or less to the RIGHT.
     The '0px' keeps its vertical baseline perfectly centered. */
.cyan-footer-content .cyan-footer-col.col-center-align {
  align-items: center;
  align-self: center;        /* Centered vertically inside the footer */
  margin: 0;                 /* Reset margins so they do not push column 4 */
  
  transform: translate(60px, 0px); /* Pushes column 3 exactly 60px to the RIGHT */
}

/* COLUMN 4 (Socials / Support): 
   Stays perfectly locked in its original track */
.cyan-footer-content .cyan-footer-col.col-right-align {
  align-items: center; 
  text-align: center;
  gap: 30px; 
}

/* Global Text Links System Architectures */
.cyan-footer-link {
  color: #0c020f; 
  text-decoration: none;
  font-size: 26px; 
  font-weight: 400; 
  text-transform: capitalize; 
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
}

.cyan-footer-link:hover {
  opacity: 0.7;
}

.cyan-footer-link.main-title-link {
  font-size: 28px;
  text-align: center;
  margin-top: 15px;
}

.cyan-footer-text-header {
  color: #0c020f;
  font-size: 22px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.cyan-footer-link.underlined-link {
  font-size: 20px;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Clickable Copyright string styling position */
.cyan-footer-copyright {
  color: #0c020f;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  margin-top: 40px; 
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
  display: inline-block;
}

.cyan-footer-copyright:hover {
  opacity: 0.6;
}

/* --- Social Icons Tray Layout --- */
.cyan-footer-icons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
  width: 100%;
}

.cyan-icon-item img {
  height: 32px; 
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.12));
  transition: transform 0.2s ease;
}

.cyan-icon-item:hover img {
  transform: scale(1.08);
}

.cyan-icon-item img.round-brand-icon {
  height: 36px; 
  border-radius: 50%;
}

/* Responsive collapse breaks mapping adjustments */
@media (max-width: 1000px) {
  .custom-cyan-footer {
    margin: 40px 20px 0 20px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 15px 20px;
  }
  .cyan-footer-content {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .cyan-footer-content .cyan-footer-col {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: center !important;
  }
}

/* ==========================================================================
   PURE CSS CUSTOM VERTICAL "TO TOP" MORPHING CAPSULE
   ========================================================================== */
.back-to-top-capsule {
  position: fixed;
  right: 25px;                   /* Exactly 25px from the right edge of screen */
  top: 50%;                      /* Anchor to viewport center line */
  transform: translateY(-50%);   /* Baseline vertical alignment centering */
  z-index: 99999;                /* Layers cleanly above all other components */
  
  /* Precision Capsule Dimensions */
  width: 54px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                     
  
  /* Core Skins */
  background-color: #ffffff;     /* Bright solid white capsule wrapper base */
  border: 2px solid #000000;     /* Crisp black outer framing lines */
  border-radius: 50px;           /* Perfect stadium capsule rounding profiles */
  text-decoration: none;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  
  /* Synchronized animations for smooth state-machine transitions */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.3s ease, 
              background-color 0.3s ease;
}

/* --- THE CIRCULAR NAVICON RING --- */
.capsule-arrow-icon {
  width: 30px;
  height: 30px;
  border: 2px solid #000000;     /* Strong inner border layout alignment frame */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* --- THE MORPHING POINTING ACCENT GEOMETRY --- */
.morphing-pointer {
  /* Default: Sharp Upward Chevron Arrow Configuration */
  width: 8px;
  height: 8px;
  background: transparent;
  
  /* Draws only the top and left edges of a box */
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  
  /* Rotates the square lines exactly 45deg to point straight UP */
  transform: rotate(45deg) translate(1px, 1px);
  box-sizing: border-box;
  
  /* Transitions individual border weights, dimensions, and rotation speeds seamlessly */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.3s ease,
              height 0.3s ease,
              border-color 0.3s ease;
}

/* --- VERTICAL TYPOGRAPHY CONFIGURATION --- */
.capsule-text {
  color: #000000;
  font-family: 'Cinzel Decorative', serif; /* Elegant branding font stack pairing */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  
  /* Stacks string characters directly downwards */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  
  transition: color 0.3s ease;
}

/* ==========================================================================
   HOVER / ACTIVE INTERACTIVE TRANSITION LAYERS
   ========================================================================== */

.back-to-top-capsule:hover {
  /* SLIDE UPWARDS: Alters the Y alignment to pull the element slightly higher */
  transform: translateY(-58%); 
  box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.25);
  background-color: #fafafa;
}

/* Turn text blue and adjust the icon frame boundary colors */
.back-to-top-capsule:hover .capsule-text {
  color: #34d0ef;                /* Turns the vertical text into your theme blue */
}
.back-to-top-capsule:hover .capsule-arrow-icon {
  border-color: #34d0ef;         /* Turns the circular ring element blue */
}

/* MORPH ARROW INTO CHECKMARK: Shift layout properties dynamically */
.back-to-top-capsule:hover .morphing-pointer {
  /* Elongates one side of the box shape to match traditional checkmark proportions */
  width: 7px;
  height: 12px;
  
  /* Shifts which borders are visible to create the baseline legs of a checkmark */
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #34d0ef;   /* Becomes the longer right check mark leg */
  border-bottom: 2px solid #34d0ef;  /* Becomes the shorter base check mark leg */
  
  /* Rotates the box from 45deg up to exactly 40deg forward for a perfect check posture */
  transform: rotate(40deg) translate(-2px, -3px);
}

/* --- ACTIVE SNAP PRESS CLICK --- */
.back-to-top-capsule:active {
  transform: translateY(-54%) scale(0.96);
}

/* Mobile viewport layout optimizations */
@media (max-width: 768px) {
  .back-to-top-capsule {
    right: 15px;
    width: 44px;
    padding: 18px 0;
    gap: 12px;
  }
  .back-to-top-capsule:hover {
    transform: translateY(-55%); /* Muted slide height constraint adjustments for mobile */
  }
  .capsule-arrow-icon {
    width: 24px;
    height: 24px;
  }
  .capsule-text {
    font-size: 11px;
  }
}

/* ==========================================================================
   FINISHING TOUCHES: REFINED CINEMATIC KEYFRAMES (POSITION PRESERVING)
   ========================================================================= */

/* 1. Fixed Centered Header: Merges translate(-50%, 0) seamlessly with expansion scale */
@keyframes headerExpandBlur {
  0% {
    /* Retains the fixed top position and horizontal centering math */
    transform: translateX(-50%) scaleX(0.2) scaleY(0.6);
    filter: blur(25px);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 2. Banner Block Cards: Expand scale centered without breaking inline grids */
@keyframes boxExpandBlur {
  0% {
    transform: scaleX(0.3) scaleY(0.7);
    filter: blur(20px);
    opacity: 0;
  }
  100% {
    transform: scaleX(1) scaleY(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 3. Main Dashboard Columns: Smoothly scales outward away from center context */
@keyframes centerColumnExpand {
  0% {
    transform: scaleX(0.7) scaleY(0.9);
    filter: blur(15px);
    opacity: 0;
  }
  100% {
    transform: scaleX(1) scaleY(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 4. Text Scanline Reveal: Clean edge handling to prevent typographic character clipping */
@keyframes textScanLineReveal {
  0% {
    clip-path: inset(0 100% 0 0); /* Closed tight to the left boundary edge */
    filter: brightness(1.8) blur(1px);
  }
  100% {
    clip-path: inset(0 -20px 0 -20px); /* Overshoots side bounds slightly to prevent cutting off trailing letters */
    filter: brightness(1) blur(0px);
  }
}

/* 5. Sub-stack Info Cards: Clean blur entry */
@keyframes stackBlurIn {
  0% {
    filter: blur(20px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* 6. Four Grid Tiles: Drops vertically down, remaining behind the showcase mask container context */
@keyframes tileDropDown {
  0% {
    transform: translateY(-80px) scaleY(0.4);
    opacity: 0;
    z-index: 1;
  }
  70% {
    transform: translateY(5px) scaleY(1.03);
  }
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    z-index: 2;
  }
}


/* ==========================================================================
   ANIMATION CLASS BINDINGS & STAGGER DELAYS
   ========================================================================== */

/* ==========================================================================
   HEADER CORRECTION: TRUE CENTER EXPANSION KEYFRAMES
   ========================================================================== */
@keyframes headerExpandBlur {
  0% {
    /* Holds the absolute horizontal center coordinate (-50%) while scaling up */
    transform: translateX(-50%) scaleX(0.2) scaleY(0.6);
    filter: blur(25px);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    /* Returns to perfect full scale while maintaining horizontal screen centering */
    transform: translateX(-50%) scaleX(1) scaleY(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/* --- SITE NAVIGATION HEADER BINDINGS --- */
.site-header {
  animation: headerExpandBlur 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  
  /* CRITICAL CHANGE: Tells the browser to run the scale multiplier 
     directly from the horizontal middle of the header box */
  transform-origin: top center; 
}

/* --- BANNER HEADER LINKS COMPONENT --- */
.links-card {
  animation: boxExpandBlur 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  transform-origin: center center;
  opacity: 0;
}

/* --- CORE MAIN DASHBOARD GRIDS --- */
.games-showcase-viewport {
  animation: centerColumnExpand 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  transform-origin: center center;
  opacity: 0;
}
.updates-col {
  animation: centerColumnExpand 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
  transform-origin: right center;
  opacity: 0;
}
.news-col {
  animation: centerColumnExpand 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
  transform-origin: left center;
  opacity: 0;
}

/* --- THEATRICAL TYPOGRAPHY CORES (OVERSHOOT PROTECTION ENABLED) --- */
.brand-title, 
.col-title, 
.links-card-title,
.news-content h3,
.vertical-post-title {
  position: relative;
  animation: textScanLineReveal 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
  clip-path: inset(0 100% 0 0);
  padding-right: 4px; /* Tiny spacing pad buffering the last character tracks */
}

/* --- COMPACT COLUMN STACK CARD ELEMENTS --- */
.update-card:nth-child(1) { animation: stackBlurIn 0.6s ease 1.1s forwards; opacity: 0; }
.update-card:nth-child(2) { animation: stackBlurIn 0.6s ease 1.3s forwards; opacity: 0; }
.update-card:nth-child(3) { animation: stackBlurIn 0.6s ease 1.5s forwards; opacity: 0; }

.news-card:nth-child(1) { animation: stackBlurIn 0.6s ease 1.2s forwards; opacity: 0; }
.news-card:nth-child(2) { animation: stackBlurIn 0.6s ease 1.4s forwards; opacity: 0; }
.news-card:nth-child(3) { animation: stackBlurIn 0.6s ease 1.6s forwards; opacity: 0; }

/* --- THE FOUR GRID ENVELOPE TILES --- */
.games-tiles-grid {
  background: transparent; 
}
.footer-nav-tile {
  opacity: 0;
  transform-origin: top center;
}
.footer-nav-tile:nth-child(1) { animation: tileDropDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards; }
.footer-nav-tile:nth-child(2) { animation: tileDropDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s forwards; }
.footer-nav-tile:nth-child(3) { animation: tileDropDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s forwards; }
.footer-nav-tile:nth-child(4) { animation: tileDropDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s forwards; }

/* ==========================================================================
   PROGRESSIVE BANNER SCROLL CAPTURE SYSTEM
   ========================================================================== */

/* Gives the progressive JavaScript values a buttery smooth glide 
   so the scroll wheel increments don't look jagged */
.banner-sub-header .brand-title,
.banner-sub-header .graphic-crop-box {
  transition: font-size 0.1s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.1s cubic-bezier(0.25, 1, 0.5, 1),
              height 0.1s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Forces the browser to hardware accelerate the resize so it doesn't stutter */
  will-change: font-size, width, height; 
}

/* Keeps the image frame centered inside its flexing container layout during calculations */
.banner-sub-header .graphic-crop-box {
  margin: 0 auto;
}

/* ==========================================================================
   MOBILE HOTFIXES (Screens 768px and smaller)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* --- 1. GLOBAL SAFETY NET --- */
  body {
    overflow-x: hidden; 
  }

  /* --- 2. HEADER FIXES --- */
  .grid-nav, 
  .right-nav-group {
    display: none !important; /* Hides desktop navigation */
  }

  .site-header {
    width: calc(100% - 20px) !important;
    max-width: 100%;
    left: 50% !important;
    top: 10px !important;
    transform: translateX(-50%) !important;
    padding: 10px 15px;
    border-radius: 15px;
  }
  
  .header-top-row {
    flex-direction: row !important;
    justify-content: space-between;
  }

  .left-elements-group {
    max-width: 70%; 
    justify-content: flex-start;
  }
  
  .menu-circle-btn {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
  }

  .header-bottom-row {
    flex-direction: column;
    width: 100%;
  }
  
  .sub-nav-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* --- 3. BANNER OVERFLOW & SPACING FIXES --- */
  .banner-sub-header {
    margin-top: 130px !important; 
    padding: 0 15px;
  }

  .banner-container {
    flex-direction: column;
    gap: 30px;
    align-items: center !important;
  }

  .banner-box, 
  .graphic-crop-box, 
  .links-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto !important;
  }

  /* --- 4. TRI-COLUMN MAIN SECTION FIXES --- */
  .dashboard-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
    align-items: center !important;
  }

  .updates-col, 
  .games-col, 
  .news-col {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .games-logos-row {
    flex-direction: column;
    gap: 30px;
  }

  .games-tiles-grid {
    grid-template-columns: repeat(2, 1fr); 
  }

  /* --- 5. TAB MENU SECTION FIXES --- */
  .zzz-content-wrapper {
    padding: 30px 15px;
    flex-direction: column; 
  }

  .game-tabs-band {
    flex-direction: column; 
  }
  
  .game-tab {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }

  .zzz-character-group {
    flex-direction: column;
    align-items: center;
  }

  /* --- 6. FOOTER FIXES --- */
  .cyan-footer-content {
    flex-direction: column;
    padding: 20px 15px;
    gap: 30px;
  }
  
  .cyan-footer-col {
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100%;
    align-items: center !important;
    text-align: center;
    overflow: hidden;
  }

  .cyan-footer-col div {
    display: flex;
    flex-wrap: wrap !important; 
    justify-content: center;
    gap: 15px !important;
  }

  .cyan-icon-item,
  .cyan-icon-item img {
    max-width: 40px; 
    height: auto;
  }

  /* --- 7. MAIN MENU (MODAL) FIXES --- */
  .menu-modal-window {
    width: 90% !important; 
    max-width: 350px !important;
    box-sizing: border-box !important;
    padding: 50px 20px 20px !important; 
  }

  .modal-close-btn {
    top: 15px !important;
    right: 15px !important;
  }

  .modal-socials,
  .menu-modal-window div[class*="social"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .menu-modal-window .cyan-icon-item,
  .menu-modal-window .cyan-icon-item img {
    max-width: 40px !important;
    height: auto !important;
  }

  /* --- 8. TO-TOP BUTTON FIXES --- */
  .back-to-top-capsule {
    top: auto !important;
    bottom: 20px;
    right: 15px;
    transform: none !important;
    padding: 12px 0;
    width: 44px; 
  }
  
  .back-to-top-capsule:hover {
    transform: translateY(-5px) !important;
  }
}

/* ==========================================================================
   ZENLESS ZONE ZERO DASHBOARD (NEW PAGE)
   ========================================================================== */

.zzz-dashboard-wrapper {
  max-width: 1550px;
  margin: 220px auto 50px auto; /* Offsets for your fixed header */
  padding: 0 40px;
  color: #34D0EF;
}

/* Breadcrumbs */
.zzz-breadcrumbs {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: #20697F;
  margin-bottom: 25px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.zzz-breadcrumbs a {
  color: #20697F;
  text-decoration: none;
  transition: color 0.2s;
}
.zzz-breadcrumbs a:hover {
  color: #34D0EF;
}

/* 3-Column Layout */
.zzz-dashboard-layout {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  width: 100%;
}

/* Reusable Panel Class for cyan bordered blocks */
.zzz-panel {
  background: rgba(32, 105, 127, 0.4);
  border: 2px solid #20697F;
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
}

.zzz-panel-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 32px;
  color: #34D0EF;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
}

.zzz-btn {
  background: #34D0EF;
  color: #0c020f;
  border: none;
  padding: 10px 0;
  width: 100%;
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.zzz-btn:hover {
  background: #20697F;
  color: #ffffff;
}

/* --- COLUMN 1: NEWS --- */
.zzz-news-col {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
}
.zzz-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.zzz-news-header .zzz-panel-title { margin: 0; font-size: 28px; }
.zzz-news-header .zzz-btn { width: auto; padding: 6px 16px; border-radius: 4px; }

.zzz-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.zzz-news-card {
  background: #081114;
  border: 1px solid #1a4f61;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.zzz-news-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}
.zzz-news-card h4 {
  color: #34D0EF;
  margin: 0 0 5px 0;
  font-size: 11px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  line-height: 1.3;
}
.zzz-news-card p, .card-stats {
  margin: 0;
  font-family: sans-serif;
  font-size: 10px;
  color: #777;
}
.card-stats { margin-top: 6px; color: #34D0EF; }

.zzz-pagination {
  text-align: center;
  margin-top: 25px;
  font-family: 'Cinzel', serif;
  letter-spacing: 2px;
  color: #20697F;
}

/* --- COLUMN 2: CENTER GRID --- */
.zzz-center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
}
.zzz-updates-row {
  display: flex;
  gap: 15px;
}
.zzz-updates-row img {
  flex: 1;
  width: 0; 
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.zzz-center-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.zzz-grid-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  height: 230px;
}
.zzz-grid-box h3 {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  margin: 0;
  text-transform: uppercase;
  color: #ffffff;
}
.zzz-grid-box img.logo {
  max-width: 120px;
  max-height: 90px;
  object-fit: contain;
}

.zzz-list-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding-left: 10px;
}
.zzz-list-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #34D0EF;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  transition: transform 0.2s;
}
.zzz-list-item:hover { transform: translateX(5px); color: #ffffff; }
.zzz-list-item img { width: 35px; height: 35px; object-fit: contain; }

.zzz-bottom-banners {
  display: flex;
  justify-content: space-evenly;
  padding: 15px;
}
.zzz-bottom-banners img {
  height: 260px;
  border-radius: 8px;
}

/* ==========================================================================
   FIXED STICKY SIDEBAR (NO BLEED-THROUGH SPACERS & CORRECTED STICKY TOP)
   ========================================================================== */

/* 
   Core Sidebar Framework 
*/
.zzz-sidebar {
  background: #16313f; /* Deep teal tile color matches your normal state */
  width: 260px;
  display: flex;
  flex-direction: column;
  border: 2px solid #000000;
  padding: 0;
  box-sizing: border-box;

  /* Sticky positioning configuration */
  position: sticky;
  top: 120px; /* Increased from 80px to completely clear your header height */
  z-index: 100;
  height: fit-content;
}

/* 
   Structural Section Separators
   -------------------------------------------------
   Switched to padding and explicit backgrounds to create empty, dark 
   separators instead of letting the baseline color bleed through.
*/
.zzz-sidebar-header {
  background: #1e627e; /* Kept lighter teal for active page state */
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid #000000;
}

.zzz-sidebar-section {
  background: #16313f; /* Force the exact same dark color as the sidebar background */
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid #000000;
  
  /* Reduced from 16px to 8px of tight, clean padding layout space */
  padding-bottom: 8px; 
}

/* Restores layout border logic safely for stacked elements */
.zzz-sidebar-section + .zzz-sidebar-section {
  border-top: 2px solid #000000;
  padding-top: 8px;
}

/* Removes trailing pad blocks on the final section stack */
.zzz-sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 
   Active Top Header (Zenless Zone Zero) 
*/
.zzz-sidebar-header .header-link {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff !important;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 25px 14px;
}

.zzz-sidebar-header .header-link::before {
  content: "•";
  font-size: 20px;
  color: #ffffff;
  line-height: 1;
}

/* 
   Standard Navigation Content Links 
*/
.zzz-sidebar-section .zzz-side-link {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 16px;
  font-weight: 400;
  color: #7a8f9a; /* Default grey text state */
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  position: relative;
  transition: color 0.25s ease;
}

/* Targeted Endgame Modifier Sizing */
.zzz-endgame-section .zzz-side-link {
  font-size: 14px;
}

/* 
   Dynamic Floating Hover Dot 
*/
.zzz-sidebar-section .zzz-side-link::before {
  content: "•";
  font-size: 20px;
  color: #ffffff;
  
  display: inline-block;
  margin-right: 0px;
  width: 0px;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease, margin-right 0.25s ease;
}

/* 
   Interactive Responsive Target Changes
*/
.zzz-sidebar-section .zzz-side-link:hover {
  color: #ffffff !important; /* Text shifts cleanly to radiant white */
}

/* Activates the dot animation smoothly on hover */
.zzz-sidebar-section .zzz-side-link:hover::before {
  opacity: 1;
  transform: scale(1);
  width: 12px;         
  margin-right: 6px;  
}

/* --- MOBILE SLIDE OUT MENU OVERLAY --- */
.side-menu-overlay {
  position: fixed;
  top: 0;
  right: -100%; /* Hidden off-screen by default */
  width: 100%;
  height: 100%;
  background: rgba(12, 2, 15, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toggle state class injected via JS */
.side-menu-overlay.is-open {
  right: 0;
}

.side-menu-content {
  display: flex;
  flex-direction: column;
  padding: 40px;
  height: 100%;
}

.menu-close-btn {
  align-self: flex-end;
  background: none;
  border: none;
  color: #34D0EF;
  font-size: 44px;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 50px;
  text-align: center;
}

.mobile-nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.2s;
}

.mobile-nav-links a:hover {
  color: #34D0EF;
}

/* ==========================================================================
   SUB NAVIGATION HIGHLIGHT FILL STATES
   ========================================================================== */

/* This class styles the link when auto-applied by JavaScript */
.header-bottom-row .sub-nav-btn.active-nav-filled {
  background-color: #34D0EF !important;
  color: #0c020f !important;
  font-weight: bold !important;
  border-color: #34D0EF !important;
  box-shadow: 0 0 14px rgba(52, 208, 239, 0.45);
}

/* Forces the active menu link to display in the custom bright theme cyan color */
.menu-modal-window a.active {
  color: #34D0EF !important;
  text-shadow: 0 0 10px rgba(52, 208, 239, 0.5) !important;
}

/* Keeps the sub-nav filled-in state running cleanly simultaneously */
.header-bottom-row .sub-nav-btn.active-nav-filled {
  background-color: #34D0EF !important;
  color: #0c020f !important;
  font-weight: bold !important;
  border-color: #34D0EF !important;
}

/* ==========================================================================
   FIX: FORCES ACTIVE MODAL LINK TO TURN WHITE & REMOVE GENERIC UNDERLINES
   ========================================================================== */

/* This targets main titles (like ZENLESS ZONE ZERO) and grid links (like Tierlist) */
.menu-modal-window a.active,
.modal-links-grid a.active,
.modal-nav-section h2 a.active {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
  font-weight: bold !important;
  text-decoration: none !important; /* Prevents unwanted browser underlining if needed */
}

/* Keeps your horizontal header row sub-navigation working seamlessly alongside it */
.header-bottom-row .sub-nav-btn.active-nav-filled {
  background-color: #34D0EF !important;
  color: #0c020f !important;
  font-weight: bold !important;
  border-color: #34D0EF !important;
}

/* --- NEWS CARD CONTAINER OVERWRITES --- */
.zzz-news-card {
  background: rgba(8, 17, 20, 0.6);
  border: 1px solid #1a4f61;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

.zzz-news-card:hover {
  border-color: #34D0EF;
  transform: translateY(-2px);
}

.zzz-news-card img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.zzz-news-card h4 {
  color: #ffffff;
  margin: 0 0 6px 0;
  font-size: 13px;
  font-family: 'Cinzel', serif;
  line-height: 1.3;
  /* Keeps text contained cleanly over strict 2-line boundaries */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zzz-news-card p.author-timestamp {
  margin: 0;
  font-family: sans-serif;
  font-size: 11px;
  color: #2a9db7;
  line-height: 1.4;
}

.zzz-news-card .card-stats {
  margin-top: 8px;
  font-family: sans-serif;
  font-size: 10px;
  color: #34D0EF;
  letter-spacing: 0.5px;
}

/* Button link wrapper fix helper */
.zzz-btn-link {
  text-decoration: none;
  display: inline-block;
}

/* ==========================================================================
   GLOBAL CAPITAL CASE CONTROL (ONLY FIRST LETTER CAPITALIZED)
   ========================================================================== */
.zzz-breadcrumbs,
.zzz-dashboard-layout,
.zzz-panel-title,
.zzz-sidebar-title,
.zzz-sidebar-menu a,
.zzz-grid-box h3,
.zzz-list-links a,
.zzz-news-card h4,
.zzz-news-card p,
.rss-loading-text {
  text-transform: capitalize !important;
}

/* ==========================================================================
   NEWS COMPONENT: 'VIEW MORE' BUTTON REFINE HOVER
   ========================================================================== */

/* Neutral Standard State */
.zzz-news-header .zzz-btn {
  background-color: #34D0EF;
  color: #0c020f;
  border: 1px solid #34D0EF;
  padding: 6px 16px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase; /* Keeps button action text sharp */
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Hover State - Swaps background to dark tone, turns text and border blue */
.zzz-news-header .zzz-btn:hover {
  background-color: #0c020f !important;
  color: #34D0EF !important;
  border-color: #34D0EF !important;
}

/* ==========================================================================
   HORIZONTAL UPDATES ROW (ZZZ PAGE SPECIFIC)
   ========================================================================== */

/* Container shell reconfigured to stretch full width instead of an aside column */
.updates-col-horizontal {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto 40px auto;
  background: #152c33; /* #20697F at 80% opacity matching index */
  border: 3.5px solid #20697F;
  border-radius: 15px;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Full width title header matching the original design aesthetics */
.updates-col-horizontal .col-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 28px;
  font-weight: 700;
  color: #34d0ef;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
  border-bottom: 3.5px solid #20697f;
  padding-bottom: 8px;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Flex row setting that forces cards to align left-to-right */
.updates-stack-horizontal {
  display: flex;
  flex-direction: row;
  gap: 16px; /* Optimized horizontal gap spacing */
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   HORIZONTAL UPDATES ROW (REVISED)
   ========================================================================== */

.updates-stack-horizontal .update-card {
  flex: 1;
  min-width: 0;
  padding: 10px;
  
  /* FIX: Forces all inner elements (like images/backgrounds) to respect the card's rounded corners */
  position: relative;
  overflow: hidden; 
  border-radius: 12px; /* Matches your design's border radius token */
}

/* Ensure the absolute positioned badge aligns perfectly flush with the rounded edge */
.updates-stack-horizontal .badge {
  top: 0;
  left: 0;
  border-top-left-radius: 9px; /* Slightly smaller than card radius to nest cleanly inside */
}

/* ==========================================================================
   ENTRY ANIMATION EXTENSION (ALL 4 ITEMS)
   ========================================================================== */

/* Triggers the fade/slide effect for all four elements sequentially */
.updates-stack-horizontal .update-card {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.updates-stack-horizontal .update-card:nth-child(1) { animation-delay: 0.1s; }
.updates-stack-horizontal .update-card:nth-child(2) { animation-delay: 0.2s; }
.updates-stack-horizontal .update-card:nth-child(3) { animation-delay: 0.3s; }
.updates-stack-horizontal .update-card:nth-child(4) { animation-delay: 0.4s; }

/* Responsive break points optimized for 4 items */
@media (max-width: 900px) {
  .updates-stack-horizontal .update-card {
    flex: 1 1 calc(50% - 12px); /* Drops into a clean 2x2 grid on tablets */
  }
}

/* Responsive adjustment layer for tablets and mobile devices */
@media (max-width: 900px) {
  .updates-stack-horizontal {
    flex-wrap: wrap; /* Allows cards to wrap onto a secondary line instead of breaking boundaries */
  }
  .updates-stack-horizontal .update-card {
    flex: 1 1 calc(33.333% - 12px); /* Displays 3 items per row on tablets */
  }
}

@media (max-width: 600px) {
  .updates-stack-horizontal .update-card {
    flex: 1 1 calc(50% - 8px); /* Displays 2 items per row on mobile screens */
  }
}

/* Add this to your CSS to fix the disappearing cards */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* Structural adjustment to ensure the horizontal updates layout handles widths correctly */
.updates-col-horizontal {
  width: 100%;
  box-sizing: border-box;
}

.updates-stack-horizontal {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}

.updates-stack-horizontal .update-card {
  flex: 1;
  min-width: 0; /* Prevents long titles or image boundaries from exploding the flexible flex rows */
}

/* Restores the interactive hover states for the horizontal update items */
.updates-stack-horizontal .update-card:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  cursor: pointer;
}

/* ==========================================================================
   SAFE FOOTER SPACE FIX (PRESERVES EXISTING PAGE LAYOUTS)
   ========================================================================== */

/* Triggers a containment layout context on the footer so internal element margins cannot leak underneath it */
.custom-cyan-footer {
  display: block !important;
  margin-bottom: 0 !important;
  overflow: hidden !important; /* Contains collapsing margins cleanly */
}

/* Strips any accidental bottom margins from the very last elements inside your columns */
.cyan-footer-col > *:last-child,
.custom-cyan-footer *:last-child {
  margin-bottom: 0 !important;
}

/* Ensure the floating capsule layer stays out of the document scroll flow */
.back-to-top-capsule {
  position: fixed !important;
  margin: 0 !important;
}

/* ==========================================================================
   ZENLESS ZONE ZERO DASHBOARD - MOBILE RESPONSIVENESS
   ========================================================================== */

/* --- TABLET FIXES (Screens 1200px and smaller) --- */
@media (max-width: 1200px) {
  /* Break the rigid horizontal layout into a vertical stack */
  .zzz-dashboard-layout {
    flex-direction: column !important;
    align-items: center;
  }
  
  /* Allow the fixed 320px news column to span the full width */
  .zzz-news-col {
    flex: 1 1 auto !important;
    width: 100%;
  }

  /* Release the sticky sidebar to flow naturally if it renders in this view */
  .zzz-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    margin-top: 30px;
  }
}

/* --- MOBILE FIXES (Screens 768px and smaller) --- */
@media (max-width: 768px) {
  /* Adjust the main wrapper to account for your mobile sticky header */
  .zzz-dashboard-wrapper {
    margin-top: 140px; 
    padding: 0 15px;
  }
  
  /* Stack the news grid items into a single column */
  .zzz-news-grid {
    grid-template-columns: 1fr;
  }

  /* Compress the 3-column center grid into 2 columns for better screen usage */
  .zzz-center-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* Stack the horizontal update row images */
  .zzz-updates-row {
    flex-direction: column;
  }

  .zzz-updates-row img {
    width: 100% !important;
    height: auto;
    max-height: 200px;
  }

  /* Stack the bottom promotional banners */
  .zzz-bottom-banners {
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
  }
  
  .zzz-bottom-banners img {
    width: 100%;
    height: auto;
  }

  /* Ensure the breadcrumbs wrap neatly */
  .zzz-breadcrumbs {
    font-size: 16px;
    line-height: 1.4;
  }
}

/* --- SMALL MOBILE FIXES (Screens 480px and smaller) --- */
@media (max-width: 480px) {
  /* Force the center grid into a single vertical column */
  .zzz-center-grid {
    grid-template-columns: 1fr;
  }

  /* Force the horizontal updates stack to take 100% width per card */
  .updates-stack-horizontal .update-card {
    flex: 1 1 100% !important;
  }
  
  /* Reduce panel padding to save screen real estate */
  .zzz-panel {
    padding: 15px;
  }
  
  .zzz-panel-title {
    font-size: 26px;
  }
}

/* --- ONLY APPLY HEADER OVERLAP FIX TO MOBILE SCREENS --- */
@media (max-width: 768px) {
  .zzz-dashboard-wrapper {
    padding-top: 60px; /* Adjust this value based on your exact header height */
  }
  
  /* If the news column specifically is still bumping up, uncomment the below */
  /*
  .zzz-news-col {
    margin-top: 20px;
  }
  */
}

/* ==========================================================================
   VIEW MORE NEWS BUTTON STYLING
   ========================================================================== */
.view-more-btn {
  width: 100%;
  background-color: #34D0EF; 
  color: #0c020f; 
  border: 1px solid #34D0EF; 
  padding: 12px 20px;
  border-radius: 6px;
  
  font-family: 'Cinzel Decorative', serif; 
  font-weight: 900;
  font-size: 14px; 
  letter-spacing: 2px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  
  /* Smooth transitions matching your layout interaction styles */
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover & Active States */
.view-more-btn:hover {
  background-color: rgba(12, 2, 15, 0.45); 
  color: #34D0EF; 
  border-color: #34D0EF; 
  transform: scale(1.02);
  box-shadow: 0 0 12px rgba(52, 208, 239, 0.3);
}

.view-more-btn:active {
  transform: scale(0.98);
}