/* style.css */







/* --- KEYFRAMES FOR ANIMATIONS --- */







@keyframes full-fade-in {



  from { opacity: 0; }



  to { opacity: 1; }



}



@keyframes crossbones-fade-in {
  from { opacity: 0; }
  to { opacity: 0.25; }
}





@keyframes cascade-fade-in {



  from { opacity: 0; }



  to { opacity: 1; }



}







@keyframes title-entrance-glow {



  from {



    opacity: 0;



    text-shadow: 4px 4px 4px #000, 0 0 5px #8b0000, 0 0 8px #8b0000;



  }



  to {



    opacity: 1;



    text-shadow: 4px 4px 4px #000, 0 0 7px #a11d1d, 0 0 10px #a11d1d;



  }



}







/* CHANGE 2: Updated fade-out opacity and timing */



@keyframes title-glow-pulse {



  0% {



    opacity: 1;



    text-shadow: 4px 4px 4px #000, 0 0 7px #a11d1d, 0 0 10px #a11d1d;



  }



  88% { /* Long fade-out */



    opacity: 0.44; 



    text-shadow: 4px 4px 4px #000, 0 0 4px #8b0000, 0 0 6px #8b0000;



  }



  100% { /* Rapid fade-in */



    opacity: 1;



    text-shadow: 4px 4px 4px #000, 0 0 7px #a11d1d, 0 0 10px #a11d1d;



  }



}







@keyframes background-fade-reveal {



  0% { opacity: 0; }



  100% { opacity: 1; }



}







/* CHANGE 3: Reduced aura range and realigned */



@keyframes aura-pulse {



  0%, 100% {



    box-shadow: -1px 1px 13px 1px rgba(108, 20, 120, 0.35), inset 0 0 10px 7px rgba(40, 10, 30, 0.7);



  }



  50% {



    box-shadow: -1px 1px 19px 3px rgba(108, 20, 120, 0.45), inset 0 0 13px 8px rgba(40, 10, 30, 0.7);



  }



}







@keyframes cascade-unfold {



  from { opacity: 0; transform: translateY(-10px) translateZ(0); }



  to { opacity: 1; transform: translateY(0) translateZ(0); }



}







@keyframes objective-fade-in {



  from { opacity: 0; }



  to { opacity: 0.125; }



}











/* --- GENERAL & BASE STYLING --- */







body {



  font-family: Verdana, arial, sans-serif; color: white; max-width: 100%;



  overflow: hidden; 



  background-color: #000;



}







#background-overlay {



  position: fixed;



  inset: 0;



  z-index: -2;



  background-image: url('741.png');



  background-repeat: no-repeat;



  background-attachment: fixed;



  background-size: cover;



  background-blend-mode: lighten;



  background-position: center 70%; 



  opacity: 0;



}







html, body { width: 100%; height: 100%; overflow: hidden !important; margin: 0; padding: 0; }







#main {



  position: fixed;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%);



  white-space: nowrap;



  width: 90%;



  max-width: 670px;



  text-align: center;



  display: flex;



  flex-direction: column;



  align-items: center;



}







h1 {



  font-size: 10vw;



  text-align: center;



  font-family: "Trebuchet MS", sans-serif;



  text-shadow: 4px 4px #000000;



  line-height: .69;



  margin-bottom: 50px; 



  color: #ddd;



}







p {



  background-color: rgba(22, 22, 22, 0.6);



  backdrop-filter: blur(10px);



  -webkit-backdrop-filter: blur(10px);



  border: none; 



}







#rules-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%; 
    max-width: 520px;
    margin: 0 auto 50px auto;
    padding: 35px 45px;
    box-sizing: border-box;
    color: #c7c7c7;
    letter-spacing: 1px;
    line-height: 1.8;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    z-index: 1;
    font-size: 0.9em; /* CHANGE 1: Rule text made smaller */

    /* --- Diamond Shape --- */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transform: rotate(0deg);

    /* --- Blue Diamond Glass Effect --- */
    background: 
        linear-gradient(
            135deg, 
            rgba(100, 150, 255, 0.08) 0%,
            rgba(50, 120, 255, 0.04) 30%,
            rgba(30, 100, 255, 0.02) 70%,
            rgba(0, 80, 255, 0.06) 100%
        );
    
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    
    /* Diamond-like border with blue tint */
    border: 1px solid rgba(100, 150, 255, 0.15);
    
    /* Diamond sparkle shadows */
    box-shadow: 
        /* Blue outer glow */
        0 0 40px -10px rgba(50, 120, 255, 0.2),
        /* Inner diamond highlight */
        inset 0 2px 0 rgba(150, 200, 255, 0.1),
        inset 0 -2px 0 rgba(0, 80, 200, 0.08),
        /* Depth shadow */
        0 20px 40px -15px rgba(0, 0, 0, 0.4),
        /* Subtle facet lines */
        inset -1px 1px 0 rgba(100, 150, 255, 0.05),
        inset 1px -1px 0 rgba(0, 80, 200, 0.05);
    
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#rules-container:hover {
    border-color: rgba(150, 200, 255, 0.25);
    transform: rotate(0deg) scale(1.02);
    
    background: 
        linear-gradient(
            135deg, 
            rgba(120, 170, 255, 0.12) 0%,
            rgba(70, 140, 255, 0.06) 30%,
            rgba(40, 120, 255, 0.04) 70%,
            rgba(20, 100, 255, 0.08) 100%
        );
    
    box-shadow: 
        /* Enhanced blue glow */
        0 0 60px -5px rgba(50, 120, 255, 0.3),
        inset 0 3px 0 rgba(200, 230, 255, 0.12),
        inset 0 -3px 0 rgba(0, 80, 200, 0.1),
        0 25px 50px -15px rgba(0, 0, 0, 0.5),
        inset -2px 2px 0 rgba(150, 200, 255, 0.08),
        inset 2px -2px 0 rgba(0, 80, 200, 0.08);
}

/* Crossbones GIF - much more visible */
#rules-container::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px;
    width: calc(100% + 20px); 
    height: calc(100% + 20px);
    
    background-image: url('crossbones.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* CHANGE 2: GIF size reduced from 'contain' to 90% */
    
    /* Minimal filtering to keep visibility */
    filter: blur(1px) brightness(0.6) contrast(1.1);
    opacity: 0;
    mix-blend-mode: screen;
    z-index: -2;
    
    /* Diamond shape mask */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    
    /* Subtle vignette */
    mask: radial-gradient(ellipse at center, black 70%, rgba(0,0,0,0.8) 90%, transparent 100%);
    -webkit-mask: radial-gradient(ellipse at center, black 70%, rgba(0,0,0,0.8) 90%, transparent 100%);

    animation: crossbones-fade-in 2.5s ease-in 9.5s forwards;

}

/* Diamond facet reflections */
#rules-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    
    background: 
        /* Mouse-following diamond sparkle */
        radial-gradient(
            circle 80px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
            rgba(200, 230, 255, 0.08) 0%, 
            rgba(100, 170, 255, 0.04) 40%,
            transparent 70%
        ),
        /* Diamond facet lines */
        linear-gradient(45deg, transparent 48%, rgba(150, 200, 255, 0.03) 49%, rgba(150, 200, 255, 0.03) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(100, 150, 255, 0.02) 49%, rgba(100, 150, 255, 0.02) 51%, transparent 52%);

    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#rules-container:hover::after {
    opacity: 1;
}

/* Enhanced text for diamond aesthetic */
#rules-container .rule {
    position: relative;
    z-index: 2;
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 4px rgba(50, 120, 255, 0.2);
    transition: all 0.3s ease;
}

#rules-container:hover .rule {
    color: #d5d5d5;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 0 6px rgba(100, 170, 255, 0.3);
}

/* Mobile diamond adjustments */
@media screen and (max-width: 768px) {
    #rules-container {
        padding: 35px 40px;
        backdrop-filter: blur(12px) saturate(120%);
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        
        /* Slightly less pronounced diamond on mobile */
        clip-path: polygon(25% 5%, 75% 5%, 95% 30%, 85% 70%, 50% 95%, 15% 70%, 5% 30%);
    }
    
    #rules-container::before {
        filter: blur(0.5px) brightness(0.7) contrast(1.05);
        opacity: 0; /* Keep it 0 to respect animation */
        clip-path: polygon(50% 5%, 95% 25%, 95% 75%, 50% 95%, 5% 75%, 5% 25%);
    }
    
    #rules-container::after {
        clip-path: polygon(50% 5%, 95% 25%, 95% 75%, 50% 95%, 5% 75%, 5% 25%);
    }
}

/* Ultra-wide screens */
@media screen and (min-width: 1200px) and (max-height: 600px) {
    #rules-container {
        max-width: 500px;
        padding: 30px 45px;
    }
}


video {



  padding: 0;



  border-radius: 4px;



  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);



  background-color: rgba(22, 22, 22, 0.6);



  backdrop-filter: blur(10px);



  -webkit-backdrop-filter: blur(10px);



  border-width: 0.42vw;



  border-style: ridge;



  border-color: rgba(61, 20, 48, .69);



  width: 100%;



  height: auto;



}







a:link, a:visited { color: white; text-decoration: none; transition: color 0.3s ease; }



a:hover, a:active { color: #c364c3; }







#objective-text {



  display: block;



  text-align: center;



  font-family: 'Times New Roman', serif;



  text-shadow: 2px 2px #120110;



  color: #555;



  opacity: 0;



  background-color: transparent;



  border: none;



  backdrop-filter: none;



  -webkit-backdrop-filter: none;



  margin-top: 35px;



  font-size: 3vw;



}







/* FIXED: Header centering issue - using proper centering method */



#header, #footer { position: fixed; width: 120%; left: 50%; transform: translateX(-50%); }



#header { top: -2px; }



#footer { bottom: 0; }







/* --- ANIMATION ORCHESTRATION --- */







#background-overlay {



  animation: background-fade-reveal 7s ease-in 4.1s forwards;



}







#word-you, #word-just, #word-lost {



  opacity: 0;



  animation: cascade-fade-in 1s ease-in forwards;



}



#word-just { animation-delay: 2s; }



#word-lost { animation-delay: 2.6s; }







#title-part-2 {



  display: inline-block;



  color: #e62020;



  opacity: 0;



  animation: 



    title-entrance-glow 3.69s ease-out 4.4s forwards,



    title-glow-pulse 11s ease-in-out 7.4s infinite;



}







#rules-container { opacity: 0; animation: full-fade-in 1s ease-in 4.8s forwards; }



.rule { display: block; opacity: 0; animation: cascade-unfold 1.0s ease-out forwards; padding: 5px 0; }



#rule-1 { animation-delay: 5.8s; }



#rule-2 { animation-delay: 6.3s; }



#rule-3 { animation-delay: 6.8s; }







#video-container { position: relative; width: 100%; height: auto; margin: 0 auto; }







#video-container video { 



  position: relative; 



  z-index: 2; 



  width: 100%; 



  height: 100%; 



  opacity: 0; 



  box-shadow: -1px 1px 13px 1px rgba(108, 20, 120, 0.35), inset 0 0 10px 7px rgba(40, 10, 30, 0.7);



  animation: full-fade-in 1s ease-in 8.0s forwards, aura-pulse 10.5s ease-in-out 9.5s infinite; 



}







#header, #footer { opacity: 0; animation: full-fade-in 1s ease-in 8.0s forwards; }



#objective-text { animation: objective-fade-in 2.5s ease-in 9.5s forwards; }







/* --- RESPONSIVENESS & MOBILE DEVICE ADAPTATIONS --- */







/* Enhanced mobile compatibility for modern iOS/Android devices */



@media screen and (min-width: 768px) {



  h1 {



    font-size: 74.1px;



  }



  #objective-text {



    font-size: 1em;



  }



}







/* Comprehensive mobile adaptations for iOS/Android */



@media screen and (max-width: 768px) {



  #main { 



    white-space: normal; 



    width: 95%; 



    left: 50%; 



    top: 50%;



  }



  #background-overlay {



    background-position: center 85%;



  }



  #rules-container { 



    width: 100%; 



    padding: 15px 20px; 



    white-space: normal;



    border-radius: 15px; /* Slightly smaller radius for mobile */



  }



  h1 { 



    font-size: 8vw; 



    white-space: normal;



    line-height: 0.8; /* Better mobile line spacing */



  }



  #video-container { 



    width: 100%; 



    height: auto; 



  }



  video { 



    width: 100%; 



    height: auto; 



    border-width: 2.5vw; 



    border-radius: 8px; /* Mobile-friendly border radius */



  }



  #objective-text {



    font-size: 4vw;



    margin-top: 25px; /* Tighter spacing on mobile */



  }



}







/* Additional mobile optimizations */



@media screen and (max-width: 480px) {



  #rules-container {



    padding: 12px 15px;



    margin-bottom: 35px;



  }



  h1 {



    margin-bottom: 35px;



  }



  #objective-text {



    font-size: 4.5vw;



  }



}







/* High-resolution displays (Retina) */



@media screen and (-webkit-min-device-pixel-ratio: 2), 



       screen and (min-resolution: 192dpi) {



  video {



    image-rendering: -webkit-optimize-contrast;



    image-rendering: crisp-edges;



  }



}







/* Touch-friendly enhancements */



@media (hover: none) and (pointer: coarse) {



  a:link, a:visited {



    padding: 2px 4px; /* Larger touch targets */



  }



  video {



    -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */



  }



}







/* Accessibility - Reduced motion preference */



@media (prefers-reduced-motion: reduce) {



  * { animation: none !important; transition: none !important; }



  #background-overlay { opacity: 1; }



  #word-you, #word-just, #word-lost, #title-part-2, #rules-container, .rule, #video-container video, #header, #footer, #objective-text { opacity: 1; }



  #objective-text { opacity: 0.125; }



}



@media screen and (max-width: 768px) and (orientation: portrait) {

  #main { 

    white-space: normal; 

    width: 95%; 

    left: 50%; 

    top: 50%;

  }

  #background-overlay {

    background-position: center 85%;

  }

  #rules-container { 

    width: 100%; 

    max-width: 90vw; /* Prevent overflow */

    padding: 15px 20px; 

    white-space: normal;

    border-radius: 15px;

  }

  h1 { 

    font-size: min(8vw, 48px); /* Cap the maximum size */

    white-space: normal;

    line-height: 0.8;

  }

  #video-container { 

    width: 100%; 

    max-width: 90vw; /* Prevent overflow */

    height: auto; 

  }

  video { 

    width: 100%; 

    height: auto; 

    border-width: min(2.5vw, 8px); /* Cap border size */

    border-radius: 8px;

  }

  #objective-text {

    font-size: min(4vw, 18px); /* Cap font size */

    margin-top: 25px;

  }

}



/* Mobile Landscape - Handles ultra-wide screens like iPhone 15 Pro Max */

@media screen and (max-width: 1366px) and (orientation: landscape) {

  #main { 

    white-space: normal; 

    width: 95%; 

    max-width: 800px; /* Prevent excessive width */

  }

  #rules-container { 

    width: 100%; 

    max-width: min(550px, 80vh); /* Corrected line */

    padding: 12px 20px; 

    white-space: normal;

  }

  h1 { 

    font-size: min(6vh, 42px); /* Use vh for landscape, cap size */

    white-space: normal;

    line-height: 0.8;

  }

  #video-container { 

    width: 100%; 

    max-width: 600px; /* Control video container */

  }

  video { 

    width: 100%; 

    height: auto; 

    border-width: min(1vh, 6px); /* Much smaller borders in landscape */

    border-radius: 8px;

  }

  #objective-text {

    font-size: min(2.5vh, 16px); /* Use vh units, cap size */

    margin-top: 20px;

  }

}



/* Ultra-wide screens (iPhone 15 Pro Max landscape, etc.) */

@media screen and (min-width: 1200px) and (max-height: 600px) {

  h1 {

    font-size: 38px; /* Fixed size for ultra-wide */

  }

  #rules-container {

    max-width: 500px;

    padding: 10px 20px;

  }

  #video-container {

    max-width: 500px;

  }

  video {

    border-width: 4px; /* Fixed border for ultra-wide */

  }

  #objective-text {

    font-size: 14px; /* Fixed size for ultra-wide */

  }

}



/* Additional fix for very small screens */

@media screen and (max-width: 480px) {

  #rules-container {

    padding: 12px 15px;

    margin-bottom: 35px;

    max-width: 95vw;

  }

  h1 {

    margin-bottom: 35px;

    font-size: min(8vw, 36px); /* Smaller cap for tiny screens */

  }

  #objective-text {

    font-size: min(4.5vw, 16px);

  }

}