/* ========================================
   CUSTOM STYLES - MOBILE-FIRST APPROACH
   ======================================== */

/* ===================
   FONT DEFINITIONS
   =================== */

@font-face {
  font-family: "CookieRun";
  src: url("../fonts/CookieRunFont_OTF/CookieRun Regular.otf") format("opentype"),
       url("../fonts/CookieRunFont_TTF/CookieRun Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: "CookieRun";
  src: url("../fonts/CookieRunFont_OTF/CookieRun Bold.otf") format("opentype"),
       url("../fonts/CookieRunFont_TTF/CookieRun Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CookieRun";
  src: url("../fonts/CookieRunFont_OTF/CookieRun Black.otf") format("opentype"),
       url("../fonts/CookieRunFont_TTF/CookieRun Black.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
} */

/* ===================
   CSS VARIABLES
   =================== */

   :root {
    --slider-height: 120px; /* Height principal care controlează totul */
  }
  
  /* ===================
     BASE STYLES - SEMANTIC CSS
     =================== */
  
  /* HTML & Body Reset */
  html, body {
    height: 100%;
    margin: 0;
  }
  
  body {
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    background: linear-gradient(to bottom, #010101, #05011a, #050118);
    margin: 0;
    /*padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);*/
    /* Fallback pentru browsere care nu suportă safe-area-inset */
    padding: 0;
    /*padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);*/
    overflow: hidden;
  }
  
  /* Main Wrapper */
  .wrap {
    position: relative;
    height: 100dvh;
    margin: 0;
    padding: 0;
    isolation: isolate;
    /* Ajustează înălțimea pentru safe areas */
    /*min-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));*/
  }
  
  /* ===================
     LAYOUT COMPONENTS
     =================== */
  
  /* Header */
  .header {
    position: relative;
    height: 100px;
    margin: auto;
    width: 100%;
    max-width: 74rem;
    background: url('./../images/bg-header.jpg') no-repeat center top;
    background-size: 125% 100%;
    z-index: 0;
    margin-bottom: 17px;
    display: flex;
    /* Adaugă padding top pentru safe area - doar pe partea de sus */
    /*padding-top: env(safe-area-inset-top, 0);*/
  }
  
  /* Footer */
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px; /* Redus de la 120px */
    
       /* background: none; Se încarcă lazy prin JavaScript */
    /*background-repeat: no-repeat;*/
    /*background-position: center bottom;*/
    background: url('./../images/bg-footer.jpg') no-repeat center bottom;
    background-size: 130% 60%; /* Redus de la 150% 70% */
    pointer-events: none;
    z-index: 0;
    /* Optimizare LCP - exclude footer din calculul de dimensiune */
    transform: translateZ(0);
    will-change: auto;
    /* Adaugă padding bottom pentru safe area - doar pe partea de jos */
    /*padding-bottom: env(safe-area-inset-bottom, 0);*/
  }
  
  /* Logo Container */
  .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 30;
    margin-bottom: 20px;
    /* position: absolute; */
    /* bottom: 20px; */
  }
  
  .logo img {
    height: 1.5rem;
  }
  
  /* Page Viewport */
  .page-viewport {
    /* position: absolute;
    top: 6rem;
    bottom: var(--footer-h);
    left: 0;
    right: 0; */
    /* display: flex;
    flex-direction: column;
    z-index: 50; */
    /* margin-top: 10px; */
    z-index: 100;
    position: relative;
  
  }
  
  /* Content Container */
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  

  
  /* ===================
     CAROUSEL COMPONENTS - MOBILE FIRST
     =================== */
  
  /* Carousel Main Container */
  .carousel-main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    position: relative;
    margin-bottom: 23px;
  }
  
  /* Carousel Container */
  .carousel-container {
    -webkit-perspective: 400px;
    perspective: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  
  /* Main Slider */
  .main-slider {
    position: relative;
    width: 100%;
    height: var(--slider-height); /* Mobile-first: 320px+ baza */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: transform 0.6s ease;
  }
  
  /* Video Base Styles */
  .main-slider video {
    position: absolute;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    border: 2px solid;
    border-image: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red) 1;
    border-radius: 5px;
    transition: transform 0.6s ease, opacity 0.6s ease;
    left: 50%;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Video Controls */
  .main-slider video.active {
    pointer-events: auto;
  }
  
  .main-slider video:not(.active) {
    pointer-events: none;
  }
  
  /* Video Poster Styles */
  .main-slider video[poster] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
  }
  
  .main-slider video:not(.active) {
    background-image: attr(poster url);
  }
  
  .main-slider video.prev,
  .main-slider video.next {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .main-slider video.show-poster {
    background-image: attr(poster url) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  
  /* Video States */
  .main-slider video.active {
    transform: translateX(-50%) translateZ(0px) rotateY(0deg) scale(1);
    opacity: 1;
    z-index: 10;
  }
  
  .main-slider video.prev {
    transform: translateX(-262.8px) translateZ(-108px) rotateY(-67deg);
    opacity: 0.8;
    z-index: 5;
    cursor: pointer;
  }
  
  .main-slider video.next {
    transform: translateX(45.6px) translateZ(-108px) rotateY(67deg);
    opacity: 0.8;
    z-index: 5;
    cursor: pointer;
  }
  
  .main-slider video:not(.active):not(.prev):not(.next) {
    transform: translateX(-50%) translateZ(-300px) scale(0.3);
    opacity: 0;
    z-index: 1;
  }
  
  /* ===================
     ARROW COMPONENTS
     =================== */
  
  /* Arrow Containers */
  .arrow-prev, .arrow-next {
    justify-content: center;
    align-items: center;
    z-index: 20;
  }
  
  .arrow-prev img, .arrow-next img {
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    transition: transform 300ms;
    margin: -20px;
  }
  
  .arrow-prev img:hover, .arrow-next img:hover {
    transform: scale(1.1);
  }
  
  /* .arrow {
    width: 10rem;
    height: 10rem;
  } */
  
  /* Arrow Animations */
  .arrow-pulse {
    animation: arrowPulse 2.5s ease-in-out infinite;
    will-change: transform, filter;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  }
  
  @keyframes arrowPulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    }
    50% {
      transform: scale(1.08);
      filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.5));
    }
  }
  
  .arrow-pulse:hover {
    animation-play-state: paused;
    transform: scale(1.12) !important;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.7)) !important;
  }
  
 
  
  /* ===================
     TEXT AND CONTENT
     =================== */
  
  /* Dynamic Title Container */
  .text-game img {
    height: 100%;
    width: 320px;
    object-fit: contain;
    transition: all 300ms;
    margin-top: 15px;
  }
  
  /* ===================
     TEXT STYLES
     =================== */
  
  /* Font Sour Gummy */
  /* .sour-gummy-title {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-shadow: 
      0 0 2px rgba(255, 255, 255, 0.6),
      0 0 4px rgba(255, 255, 255, 0.4),
      0 0 8px rgba(255, 215, 0, 0.3);
    color: #ffffff;
    filter: brightness(1.05);
  } */
  
  /* Game Text Content - CookieRun Style */
  .game-text-content {
    font-family: "CookieRun", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #f9e27d; /* Culoarea galben auriu specificată de client */
    text-align: center;
    line-height: 1.6;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow pentru contrast */
    margin: 0;
    /* padding: 8px; */
    white-space: nowrap; /* Nu permite rânduri noi pentru container */
  }
  
  .game-text-content p {
    white-space: nowrap; /* Fiecare paragraf pe un singur rând */
    /*overflow: hidden;  Ascunde textul care depășește */
    /*text-overflow: ellipsis;  Adaugă "..." dacă textul e prea lung */
  }
  
  /* Text container să fie de mărimea video-ului activ */
  .text-game {
    /*max-width: var(--slider-height, 275px);  Aceeași dimensiune ca video-ul activ */
    margin-bottom: 17px;
   
  }
  
  .game-text-content .line {
    font-size: 8px; /* Dimensiune uniformă pentru toate liniile */
    margin: 4px 0 2px;
  }
  /* .mb-0 {
    margin-bottom: 0;
  }
  .mt-0 {
    margin-top: 0;
  } */
  /* Rubber Text Animation */
  .rubber-text {
    animation: rubberBand 1s ease-in-out;
  }
  
  .rubber-image {
    animation: rubberBandImage 0.8s ease-in-out;
  }
  
  @keyframes rubberBand {
    0% { transform: scaleX(1) scaleY(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scaleX(1) scaleY(1); }
  }
  
  @keyframes rubberBandImage {
    0% { transform: scaleX(1) scaleY(1); }
    25% { transform: scaleX(1.15) scaleY(0.85); }
    35% { transform: scaleX(0.85) scaleY(1.15); }
    45% { transform: scaleX(1.08) scaleY(0.92); }
    60% { transform: scaleX(0.96) scaleY(1.04); }
    75% { transform: scaleX(1.02) scaleY(0.98); }
    100% { transform: scaleX(1) scaleY(1); }
  }
  

  

  /* Play Button Container */
  .play-btn {
    display: flex;
    justify-content: center;
  }
  
  .play-btn a {
    position: relative;
    display: inline-block;
    width: 18rem;
    transition: all 300ms;
    background-size: 110px 50px;
    background-position: center; 
    background-repeat: no-repeat;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 50px;
  }
  
  .play-btn a:hover {
    transform: scale(1.05);
  }
  
  .play-btn .button-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 0.75rem 1.5rem; */
  }
  
  .play-btn .button-inner img {
    width: 5.5rem;
    height: auto;
    filter: brightness(1.1) contrast(1.1);
  }
  
  /* ===================
     NAVIGATION SLIDER
     =================== */
  
  /* Nav Container */
  .nav-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-top: 10px;
  }
  
  /* Nav Slider */
  .nav-slider {
    position: relative;
    width: 20rem;
    height: 6rem;
    overflow: visible;
 
  }
  
  .nav-slider img {
    position: absolute;
    width: 3.7rem;
    /* height: 3rem; */
    object-fit: contain;
    cursor: pointer;
    transition: all 600ms ease-in-out;
   
  }
  
  /* Nav-slider States */
  .nav-slider img.active {
    transform: translateX(-50%) translateY(-50%) scale(1.2);
    opacity: 1;
    z-index: 10;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
    left: 50%;
    top: 50%;
  }
  
  .nav-slider img.prev {
    transform: translateX(-40%) translateY(-50%) translateX(-70px) scale(0.7);
    opacity: 0.6;
    z-index: 5;
    left: 50%;
    top: 50%;
  }
  
  .nav-slider img.next {
    transform: translateX(-40%) translateY(-50%) translateX(70px) scale(0.7);
    opacity: 0.6;
    z-index: 5;
    left: 50%;
    top: 50%;
  }
  
  .nav-slider img:not(.active):not(.prev):not(.next) {
    transform: translateX(-50%) translateY(-50%) scale(0.3);
    opacity: 0;
    z-index: 1;
    left: 50%;
    top: 50%;
  }