:root {

  --main-theme: #800000;         /* Deep Maroon */

  --theme-bright: #ff4d4d;       /* Bright accent red */

  --theme-glow: #000000;         /* Glowing red */

  --bg-dark: #0a0202;            /* Very dark maroon-black background */

  --box-bg: #140404;             /* Container box background */

  --text-main: #ffcccc;          /* Light pinkish text for high contrast */

  --header-grad-top: #4a0000;    /* Dark red gradient top */

  --header-grad-bottom: #260000;/* Dark red gradient bottom */

  --glow-black: #2A1F1B;

}





* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  background-color: var(--bg-dark);

  padding-top: 200px;

  background-image: 

    linear-gradient(45deg, #1f0505 25%, transparent 25%), 

    linear-gradient(-45deg, #1f0505 25%, transparent 25%), 

    linear-gradient(45deg, transparent 75%, #1f0505 75%), 

    linear-gradient(-45deg, transparent 75%, #1f0505 75%);

  background-size: 20px 20px;

  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

  color: var(--text-main);

  font-family: "Courier New", Courier, monospace;

  display: flex;

  justify-content: center;

  padding: 50px 10px;

}



.site-wrapper {

  width: 100%;

  max-width: 980px;

  background: var(--box-bg);

  border-radius: 70px 70px 0px 0px; 

  position: relative;

  padding: 30px; /* Inner spacing around your content boxes */

  margin-top: 140px;

 

  

  /* 1. Outer Border Outline Glow */

  border: 7px ridge #0a0202;

 box-shadow: 0 0 12px var(--theme-glow);

}



/* 2. THE MOVING BORDER TRACK (Sits between wrapper & content) */

.site-wrapper::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 0;

  border-radius: 66px 66px 0px 0px;



  /* Animated Checkerboard Pattern */

  background-image: 

    linear-gradient(45deg, var(--main-theme) 25%, transparent 25%), 

    linear-gradient(-45deg, var(--main-theme) 25%, transparent 25%), 

    linear-gradient(45deg, transparent 75%, var(--main-theme) 75%), 

    linear-gradient(-45deg, transparent 75%, var(--main-theme) 75%);

  background-size: 16px 16px;

  

  /* Scroll Animation */

  animation: moveBorderTrack 2s linear infinite;

}



/* 3. INNER MASK (Blocks the pattern from covering the middle) */

.site-wrapper::after {

  content: "";

  position: absolute;

  /* Adjust top/left/right/bottom to control border thickness (e.g. 12px) */

  top: 12px;

  left: 12px;

  right: 12px;

  bottom: 12px;

  z-index: 0;

  background-image: url('/scenepng/lace.jpg');

  background-repeat: repeat;

  background-position: center top; /* Solid inner background */

  border: 7px ridge #0a0202; /* Inner edge line */

  border-radius: 54px 54px 0px 0px;

}



/* KEEP ALL CONTENT FLOATING ABOVE BOTH LAYERS */

.top-header,
.inner-layout,
.header-logo-container,
.blinkies-container,.custom-bottom-row,.wide-box{
  position: relative !important;
  z-index: 2 !important;

}





/* ANIMATION KEYFRAMES */

@keyframes moveBorderTrack {

  0% {

    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;

  }

  100% {

    background-position: 32px 0, 32px 8px, 40px -8px, 24px 0px;

  }

}

.top-header {



  height: 110px;



 background-image: url("/scenepng/Kirs2.png"); 





  background-repeat: no-repeat; 



  background-position: center -30px;


  background-size: auto 120%;
  



  border: 7px ridge #0a0202;



  border-radius: 54px 54px 0px 0px ; 



  position: relative;



  margin-bottom: -5px;



  box-shadow: 

    /* Dark shade on the inner edge of the border */

    inset 0 0 0 2px rgba(0, 0, 0, 0.75), 

    /* Subtle highlight line inside the border */

    inset 0 0 8px 3px rgba(0, 0, 0, 0.9), 

    /* Dark shade on the outer edge of the border */

    0 0 0 2px #000000;       



}



/* OVERLAPPING CENTER LOGO */

.header-logo-container {

  position: absolute;

  top: -170px; /* Make this more negative (e.g., -60px, -70px, -80px) to pull it up */

  left: auto;

  right:-500px;

  margin-right: 0; 

  transform:none ;

  z-index: 10;

}



.header-logo {

  max-width: 600px;

  height: auto;

  filter: 

    drop-shadow(0px 0px 6px #000000) 

    drop-shadow(0px 0px 12px #000000);

}



.inner-layout {

    display: grid;

    grid-template-columns: 180px 1fr 200px;

    gap: 7px;

    align-items: stretch; /* Forces all 3 grid columns to equal height */
    

}



/* Force the wrapper divs inside the grid to take full grid height */

.inner-layout > div {

    height: 100%;

    display: flex;

    flex-direction: column;

}





.pixel-box {

    
    background: var(--box-bg);

    border: 7px ridge #0a0202;

    padding: 6px;

    margin-top: 0;           /* Remove the negative top margin */

    margin-bottom: 0;        /* Remove bottom margin to avoid overflow */

    box-shadow: inset 0 0 5px rgba(128, 0, 0, 0.5);

    

    /* Height fill rules */

    height: 100%;            /* Fills the grid wrapper height completely */

    flex: 1;                 /* Expands to fill flex container */

    box-sizing: border-box;  /* Includes padding/borders in height */

    overflow-y: VISIBLE;        /* Adds vertical scrollbar if content is too tall */

}



/* HEADER BARS INSIDE BOXES */
@font-face {
  font-family: 'Gothical';
  src: url('/scenepng/Break.ttf') format('truetype');
}
.box-header {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  
  /* Text styling */
  color: #ffffff; /* INSIDE COLOR (White or Light Red) */
  font-weight: bold;
  font-size: 14px; /* Slightly bigger so font is readable */
  font-family: 'Gothical', sans-serif;
  letter-spacing: 2px;
  padding: 8px 12px;

  /* REMOVE -webkit-text-stroke! USE THIS INSTEAD: */
  text-shadow: 
    -1px -1px 0 #000000,  
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
     0px  0px 4px #ff0000; /* Subtle outer glow */
  
  
  /* Matches button capsule ends */
  border-radius: 14px;
  
  /* WEB 2.0 CYLINDER GRADIENT (Using your exact button red tones) */
  background: linear-gradient(
    180deg, 
    #110000 0%, 
    #ff2222 16%,   /* Sharp glass glare streak */
    #660000 45%,   /* Mid-tone transition */
    #a30000 60%,   /* Rich button red */
    #2b0000 100%   /* Dark bottom shadow */
  );
  
  /* MATCHES BUTTON METALLIC BEVEL RIM */
  border: 1px solid #111111;
  outline: 1px solid #444444;
  outline-offset: -2px;
  
  /* MATCHES BUTTON 3D SHADOWS & RING */
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.8), /* Crisp top glare edge */
    inset 0 -2px 4px rgba(0, 0, 0, 0.95),     /* Dark bottom depth */
    0 0 0 2px #1e1e1e,                        /* Chrome border ring match */
    0 3px 5px rgba(0, 0, 0, 0.9);             /* Outer drop shadow */
    
  text-shadow: 1px 1px 3px #000000, 0 0 4px #ff0000;
  margin-bottom: 12px;
}


/* NAVIGATION LINKS */
@font-face {
  font-family: 'Main';
  src: url('/scenepng/Read.ttf') format('truetype');
}

.nav-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px;
  background-image: url("scenepng/gray.jpg") !important;
  background-repeat: repeat !important;
  background-position: center !important;
  background-color: rgba(0, 0, 0, 0.65) !important; /* Dark black overlay */
  background-blend-mode: multiply !important;
  filter: brightness(100%) !important;
  width: 100% !important;        /* Stretch full width */
  height: 100% !important;       /* Stretch full height */
  margin: 0 !important;          /* Remove the gaps around the edges */
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  
  
  /* Flexbox alignment for your buttons */
 
  justify-content: center !important; /* Centers buttons vertically */
  gap: 8px !important;
  padding: 10px !important;

 
  
  background-size: auto !important;
  
  /* Snaps to rounded bottom-left swoop corner */
  border-radius: inherit !important;
}

/* THE METALLIC CAPSULE BUTTON */
.nav-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  
  /* Text styling */
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  font-family: 'Main', monospace; /* Change to your preferred font */
  padding: 6px 16px;
  
  /* Pill Capsule Shape */
  border-radius: 10px;
  
  /* RED METALLIC GLOW GRADIENT */
  background: radial-gradient(ellipse at center, #d00000 0%, #800000 50%, #2b0000 100%);
  
  /* DOUBLE METALLIC RIM (Dark outer border + Silver/Grey bevel ring) */
  border: 1px solid #111111;
  outline: 1px solid #444444;
  outline-offset: -2px;
  
  /* 3D GLASS & BEVEL SHADOWS */
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.7), /* Top inner glare line */
    inset 0 -2px 4px rgba(0, 0, 0, 0.95),     /* Bottom inner dark shadow */
    0 0 0 2px #1e1e1e,                        /* Outer chrome border ring */
    0 3px 5px rgba(0, 0, 0, 0.9);             /* Drop shadow underneath */
    
  text-shadow: 1px 1px 3px #000000, 0 0 4px #ff0000;
  transition: all 0.15s ease-in-out;
}

/* HOVER EFFECT (Glows brighter when hovered) */
.nav-btn:hover {
  color: #ffffff;
  background: radial-gradient(ellipse at center, #ff1a1a 0%, #a30000 50%, #400000 100%);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.95),
    0 0 0 2px #333333,
    0 0 8px rgba(235, 0, 0, 0.8);
  transform: translateY(-1px);
}

/* CLICK EFFECT (Pushes down slightly) */
.nav-btn:active {
  transform: translateY(1px);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 0 2px #111111;
}

.nav-inner-box {
  background: #0d0003; /* Matches your dark main background */
 
  border-radius: 8px;
  
  /* BRIGHT RED GOTHIC FRAME BORDER */
  border: 6px ridge #8b0012; 
  outline: 1px solid #1a0003;
  
  /* Outer glow to tie it into the main container */
  box-shadow: 
    0 0 8px rgba(139, 0, 18, 0.4),
    inset 0 0 4px rgba(0, 0, 0, 0.8);
    
   margin: 8px 4px;
}


.main-welcome-box {
  position: relative;
  font-family: 'Main';
  letter-spacing: 2px;
  margin-top: 0px;
  text-shadow: 
    -2px -2px 0 #000000,  
     2px -2px 0 #000000,
    -2px  2px 0 #000000,
     2px  2px 0 #000000,
     0px  0px 8px #000000,
     0px  0px 12px #ff0000 !important;
 background-image: url("scenepng/moving.gif") !important; /* Change to your image path */
  
  /* 2. CHOOSE HOW IT FITS: */
  background-repeat: repeat !important;        /* Use 'repeat' for seamless patterns/tiles */
  /* background-size: cover !important; */     /* Uncomment if it's one large single picture */
  background-position: center !important;
}

/* INNER CONTAINER WITH WORKING BACKGROUND IMAGE */
.main-welcome-box .nav-inner-box {
  width: 80% !important;
  height: 200px !important;
  margin: 30px auto 0 auto !important;
  
  /* FLEXBOX (Centers text horizontally & vertically) */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;

  /* BACKGROUND IMAGE & TINT OVERLAY */
  background-image: url("scenepng/bg.jpeg") !important; /* DOUBLE CHECK IF IT'S .jpeg OR .jpg IN NEOCITIES */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;

  filter: saturate(8%) contrast(100%) !important;
  
}


  

 .sticker {
  position: absolute;
  z-index: 999;              /* Makes sure it sits on top of EVERYTHING */
  pointer-events: none;      /* Prevents giant sticker from blocking text clicks */
  filter: drop-shadow(4px 4px 0px #000); /* Extra bold shadow for big graphics */
}

/* 3. Make L BIG AS HELL */
.sticker-l {
  width: 600px;              /* <-- Crank this up higher (e.g. 300px, 350px) */
  height: auto;
  filter:sepia(100%) hue-rotate(315deg) saturate(400%)  drop-shadow(0px 0px 10px #000000)
          /* Black mist / aura layer 2 (medium blur) */
         
          contrast(130%) brightness(0.75);
  bottom: 3px;             /* Negative value pulls him way down out of the box */
  right: -20px;              /* Negative value pulls him out to the right */
  
  transform: rotate(0);   /* Slight angle */
}





.small-info {

  font-size: 10px;

  margin-bottom: 4px;

}

.right-col .pixel-box {
  background-image: url("scenepng/hand.gif") !important; /* Change to your background image path */
  background-repeat: repeat !important;
  background-position: center !important;
  
  /* OPTIONAL: Darken it like the left box so the ad pops */
  background-color: rgba(0, 0, 0, 0.65) !important;
  background-blend-mode: multiply !important;
  
  /* Keeps the content neatly padded inside */
  padding: 10px !important;
  box-sizing: border-box !important;
}

.link-textarea {

  width: 100%;

  height: 45px;

  background: #000;

  color: var(--theme-bright);

  border: 1px solid var(--main-theme);

  font-size: 10px;

  resize: none;

}

.box-header-link {

  text-decoration: none;

  display: block;

}



.box-header-link:hover .box-header {

  background: linear-gradient(180deg, #ff0000 0%, #800000 100%);

  color: #ffffff;

  cursor: pointer;

}
.pic-me img {

  max-width: 100%; /* Controls image width so they stay small */

  height: auto;

  display: block;

  object-fit: contain;
  margin-bottom: 25px
  
}
  
 .vampire-ad-container {
  position: relative !important;
  width: 100% !important;
  max-width: 180px !important; /* Adjust to match your ad width */
  margin: 0 auto !important;
  display: block !important;
  margin-top: 10px
}

/* BASE VAMPIRE AD IMAGE */
.vamp-bg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* YOUR CUSTOM PHOTO OVERLAY (LEFT SIDE ONLY) */
#my-vamp-photo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 53.5% !important; /* Bump up to 50% if you still see a tiny hair-thin gap */
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important;
  pointer-events: none !important; /* Lets clicks pass through to the trigger if needed */
}

.pic-me img:hover {
  transform: scale(1.02) !important;
  }/* Subtle hover effect to show it's clickable */
.join-btn-trigger {
  position: absolute !important;
  bottom: 12% !important;        /* Adjust up/down to align over Join Now */
  right: 5% !important;          /* Adjust left/right positioning */
  width: 45% !important;         /* Covers the width of the blue button */
  height: 25% !important;        /* Covers the height of the blue button */
  cursor: pointer !important;
  z-index: 10000 !important;     /* Sits above everything to catch the click */
  background: transparent !important;
  cursor: url('scenepng/vamp.png'), pointer !important;
}


.box-header-link.second-btn {
  margin-top: 500px !important; /* Increase number (e.g., 20px, 30px) to push it lower */
  display: block !important;
  margin-top: 25px !important; /* Increase to 30px or 40px to push it even lower */
}




/* SCROLLABLE PICTURE BOX (REPLACES TEXTAREA) */


.blinkies-container {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 5px !important;
  background: var(--box-bg) !important;
  border: 7px ridge #0a0202 !important;
  box-shadow: inset 0 0 5px rgba(128, 0, 0, 0.5) !important;
  padding: 10px !important;
  color: var(--text-main) !important;
}

.custom-bottom-row {
  display: grid !important;
  /* Left width (180px) | Middle takes rest (1fr) | Right width (200px) */
  grid-template-columns: 180px 1fr 200px !important; 
  gap: 7px !important;
  margin-top: 4px !important;
  width: 100% !important;
}

/* Base style for all 3 boxes in this row */
.custom-side-box,
.custom-center-box {
  background: var(--box-bg) !important;
  border: 7px ridge #0a0202 !important;
  box-shadow: inset 0 0 5px rgba(128, 0, 0, 0.5) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

.custom-center-box .nav-inner-box {
  width: 80%;   /* Set desired width (px or %) */
  height: 120px;  /* Set desired height */
  align-items: center;
  /* Optional: center it horizontally inside the welcome box */
  margin: 0 auto; 
  margin-top: 25px,
 
}

/* Center box height settings */
.custom-center-box:nth-child(1) {
  height: 250px !important; 
  overflow-y: auto !important;
  background-image: url("scenepng/moving.gif") !important; /* Replace with your background image path */
  background-repeat: repeat !important;
  background-position: center !important;
  align-items: center
}

.custom-center-box:nth-child(2) {
  height: 50px !important; 
  overflow-y: visible !important;
}

.custom-side-box {
  height: auto !important;     /* Allows height to fit buttons */
  max-height: none !important; 
     /* Clips the box border cleanly to the curve */
}
.custom-side-box {
  position: relative;
  overflow: hidden !important;
}


  

/* 2. Position this specific sticker */
.sticker-bat {
  position: absolute;
  
  width: 450px;             /* Adjust size here */
  height: auto;
  pointer-events: none;     /* Stops it from blocking clicks on your links */
  position: absolute;
  z-index: 9999; /* Forces it over ALL elements */
  pointer-events: none;
  
  /* Adjust these to pin it exactly where you want */
  left: -170px;
  top: 620px; /* Or use relative positioning depending on your setup */

             /* Pulls it OUT past right border *
  transform: rotate(5deg);  /* Adds a slight angle */
}
.sticker-bite {
  position: absolute !important;
  z-index: 9999 !important;      /* Forces it to sit on top of boxes */
  pointer-events: auto !important; /* Stops it from blocking clicks */
  cursor: url('scenepng/vamp.png'), pointer !important;
  /* POSITIONING: Adjust 'top' or 'bottom' to move it up */
  top: -165px !important;           /* Negative number pulls ONLY the gif up higher! */
  left: 10px !important;          /* Adjust left position if needed */
  width: auto !important;         /* Preserves sticker size */
}


/* LEFT SIDE BOX (Swoop on bottom-left) */
.custom-side-box:first-child {
  border-radius: 0px 0px 0px 54px !important;
 
}

/* RIGHT SIDE BOX (Swoop on bottom-right) */
.custom-side-box:last-child {
  border-radius: 0px 0px 54px 0px !important;
}

.custom-side-box:first-child .nav-inner-box {
  border-radius: 0px 0px 0px 40px !important;
  margin-bottom: 12px !important;
  margin-left: 5px !important;
  overflow: hidden !important;
}


.custom-center-box .nav-inner-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 120px !important; /* Ensures box keeps fixed height while typing */
  padding: 15px !important;
  box-sizing: border-box !important;
  background-image: url("scenepng/paper.jpg") !important; /* Replace with your background image path */
  background-repeat: repeat !important;
  background-position: center !important;
  width: 80% !important; /* Adjust box width as needed */
  filter: saturate(8%) contrast(100%) !important;
  
  box-sizing: border-box !important;
  margin-top:40px
  
}

/* CENTER THE POEM TEXT AND PRESERVE BREAKS */
#poem-text {
  margin: 0 !important;
  text-align: center !important;
  white-space: pre-line !important; /* Respects centered line breaks automatically */
  display: inline-block !important;
  position: relative !important;
  font-family: 'Main', Courier, monospace !important; 
  font-size: 14px !important;

  color: #E8E8E8 !important;
  text-shadow: 0 0 4px #000000, 0 0 8px #000000 !important;/* Optional: change text color */
}

/* TYPEWRITER FLICKERING CURSOR */
#poem-text::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: #ff0000;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* HEADER BUTTON STYLES */
.custom-center-box .box-header {
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.1s ease, filter 0.2s ease !important;
  cursor: url('scenepng/eye3.png'), pointer !important;
}

.custom-center-box .box-header:hover {
  filter: brightness(1.2) !important;
}

.custom-center-box .box-header:active {
  transform: scale(0.97) !important;
}
.wide-box {
  width: 100%;
  box-sizing: border-box;
  background: #0d0003;
  border: 7px ridge #0a0202;
  box-shadow: inset 0 0 5px rgba(128, 0, 0, 0.5) !important;
  outline: 1px solid #1a0003;
  border-radius: 0px;
  padding: 6px;
  box-shadow: 0 0 10px rgba(139, 0, 18, 0.4);
  margin-top: 15px; /* Spacing above it */
  width:100%;           /* Set your desired fixed width */
  height: 200px;          /* Set your desired fixed height */
  box-sizing: border-box;
  
  /* 2. PREVENT RESIZING / FLEX SHRANK */
  flex-shrink: 0;
  flex-grow: 0;

}

.pagedoll-container {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  width: 150px;
  cursor: pointer;
}

.left-doll { left: 0; }
.right-doll { 
  right: 0; 
  /* Offsets the animation so they don't glitch at the exact same time */
  animation-delay: 1.2s; 
}

/* Make both containers glitch using your animation */
.pagedoll-container {
  animation: danganronpaGlitch 3s infinite;
}

.pagedoll-container img {
  width: 100%;
  display: block;
}

/* --- SPEECH BUBBLE STYLING --- */
.speech-bubble {
  position: absolute;
  /* Allows the bubble to expand horizontally up to 260px */
  width: max-content;
  max-width: 260px;
  
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  
  /* Gothic Aesthetics */
  background: #111111;
  color: #ff3344;
  border: 2px solid #8b0000;
  padding: 8px 14px;
  font-family: monospace, sans-serif;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
  
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

/* --- LEFT SIDE (JUNKO) POSITIONING --- */
.left-doll .speech-bubble {
  left: 100%;
  transform: scale(0.8);
}

.left-doll:hover .speech-bubble {
  transform: scale(1);
}

/* Point Junko's bubble slightly to the left so it doesn't clip off the right screen edge */
.right-doll .speech-bubble {
  left: auto;
  right: -50%;
  transform: scale(0.8);
}

.right-doll:hover .speech-bubble {
  transform: scale(1);
}
/* Little speech bubble tail pointing down */
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #8b0000 transparent;
  display: block;
  width: 0;
}

/* --- HOVER EFFECT --- */
/* Shows the speech bubble when hovering over the container */
.pagedoll-container:hover .speech-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* Pauses glitching while reading the message */
.pagedoll-container:hover {
  animation-play-state: paused;
}


/* --- YOUR GOTHIC GLITCH ANIMATION --- */
@keyframes danganronpaGlitch {
  0%, 84%, 100% {
    transform: translate(0, 0) scale(1);
    filter: none;
  }
  85% {
    transform: translate(-6px, 1px) scale(1.03);
    filter: drop-shadow(5px -2px 0px #008b8b); 
  }
  87% {
    transform: translate(6px, -3px) scale(0.98);
    filter: drop-shadow(-5px 2px 0px #003366); 
  }
  90% {
    transform: translate(-3px, 3px);
    filter: sepia(100%) hue-rotate(300deg) saturate(1200%) brightness(0.35) drop-shadow(0px 0px 8px #8b0000);
  }
  93% {
    transform: translate(0, 0);
    filter: none;
  }
}

/*webmusic */

 #musicplayer {

 

  font-family: 'Radio1', monospace !important;

  font-weight: bold;

  height: 40px; /* Slightly increased to fit 30px slider thumbs cleanly */

  width: 100%;

  left: 0;

  top: 0;

  position: fixed; /* Keep fixed if you want it pinned to the top of the screen */

  z-index: 9999;

  display: flex;

  align-items: center; /* Vertically centers controls, song title, and seekbars */

  justify-content: space-between;

  padding: 0 8px;

  box-sizing: border-box;



  background: linear-gradient(180deg, #3d0006 0%, #7a000d 45%, #1a0205 47%, #3d0006 100%);

  border: ridge 2px #5e000a;

  outline: solid 2px #000000;

  box-shadow: 

    inset 10px 0px 6px -10px #0d0002, 

    inset -13px 0px 6px -10px #0d0002, 

    inset 0px 10px 6px -10px #aa0014, 

    inset 0px -13px 6px -10px #0d0002;

}



.songtitle {

  display: block;

  padding: 2px 6px;

  font-family: 'Radio1', monospace;

  font-size: 12px;

  color: #ff2e2e; 

  letter-spacing: 1px;

  white-space: nowrap;



  background: #0d0002; /* Dark background */

  border: #4a0000 inset 1px;

  border-radius: 4px;

  box-shadow: 

    inset 13px 0px 6px -10px rgb(0 0 0 / 60%), 

    inset -13px 0px 6px -10px rgb(0 0 0 / 80%), 

    inset 0px 13px 6px -10px #3d0006, 

    inset 0px -13px 6px -10px rgb(0 0 0 / 60%);

}



.controls {

  font-size: 12px;

  text-align: center;

  width: 90px;

  height: auto;

  text-decoration: none;

  filter: 

    drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) 

    drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) 

    drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);

}



.controls td {

  padding: 0 2px;

}



.seeking {

  width: 50%;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

  padding: 2px;

}



.current-time,

.total-duration {

  font-size: 12px;

  color: #000;

  filter: 

    drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) 

    drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white);

}



.ctrlimg {

  height: 16px;

  width: 16px;

  display: block;

}



.ctrlimg:hover {

  cursor: pointer;

}



/* RANGE INPUT BASE STYLES */

input[type=range] {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  background: transparent;

}



input[type=range]:focus {

  outline: none;

}



/* SEEK BAR TRACK & THUMB */

input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 6px;

  cursor: pointer;

  border-radius: 6px;

  background: black;

  border: 1px white solid;

}



input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  height: 24px;

  width: 20px;

  background-image: url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif');

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  margin-top: -9px;

  cursor: pointer;

}



/* Firefox Compatibility */

input[type=range]::-moz-range-thumb {

  height: 24px;

  width: 20px;

  background-image: url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif');

  background-size: contain;

  background-repeat: no-repeat;

  border: none;

}



/* VOLUME BAR TRACK & THUMB */

input[type=range].volume_slider::-webkit-slider-runnable-track { 

  background: #000000;

  border:1px solid white;

  filter: drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black);

}



input[type=range].volume_slider::-webkit-slider-thumb {

  background-image: url('https://neocities.org/site_thumbnails/21/08/sharkizzah06/scenepng/heart.gif.210x158.webp');

  background-size: contain;

  background-repeat: no-repeat;

  height: 18px;

  width: 18px;

  margin-top: -6px;

  filter: drop-shadow(0px 0px 8px #000000) drop-shadow(0px 0px 14px #000000);

}





html {
  overflow-y: auto !important; /* Single custom scrollbar for the page */
}

body {
  overflow: visible !important; /* Stops body from creating a 2nd scrollbar */
  margin: 0;
}



/* 1. Scrollbar Overall Width & Outer Black Border */

html::-webkit-scrollbar {

  width: 16px;

  height: 16px;

  border-left: 2px solid #000000; /* Solid black outer border */

}



/* 2. Scrollbar Track (Inside background - Pitch Black) */

html::-webkit-scrollbar-track {

  background-color: #000000 !important; /* Pure black inside */

  background-image: none !important;     /* Removes the pattern */

}



/* 3. The Draggable Thumb (Dark Red 3D block with black border) */

html::-webkit-scrollbar-thumb {

  background-color: #5a000a;

  border-top: 1px solid #ff3333;   /* Bright red top highlight */

  border-left: 1px solid #ff3333;  /* Bright red left highlight */

  border-right: 1px solid #000000; /* Black right edge */

  border-bottom: 1px solid #000000;/* Black bottom edge */

  box-shadow: inset 1px 1px 0 0 #800000, inset -1px -1px 0 0 #000000;

  width: 16px;

  height: 16px;

}



/* 4. Scrollbar Corner */

html::-webkit-scrollbar-corner {

  background-color: #000000;

}



/* 5. Top & Bottom Arrow Buttons (Black borders) */

html::-webkit-scrollbar-button {

  background-color: #5a000a;

  border-top: 1px solid #ff3333;

  border-left: 1px solid #ff3333;

  border-right: 1px solid #000000;

  border-bottom: 1px solid #000000;

  box-shadow: inset 1px 1px 0 0 #800000, inset -1px -1px 0 0 #000000;

  display: block;

  width: 16px;

  height: 16px;

  image-rendering: pixelated;

  background-repeat: no-repeat;

  background-position: center center;

  filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(330deg);

}



/* 6. Button Click State */

html::-webkit-scrollbar-button:active {

  background-position: 2px 2px;

  border: 1px solid #000000;

  box-shadow: none;

}



/* ARROW BUTTON ASSIGNMENTS */

html::-webkit-scrollbar-button:horizontal:decrement {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");

}



html::-webkit-scrollbar-button:horizontal:increment {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");

}



html::-webkit-scrollbar-button:vertical:decrement {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");

}



html::-webkit-scrollbar-button:vertical:increment {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");

}



/* HIDE DUPLICATE ARROWS */

html::-webkit-scrollbar-button:horizontal:increment:start,

html::-webkit-scrollbar-button:horizontal:decrement:end,

html::-webkit-scrollbar-button:vertical:increment:start,

html::-webkit-scrollbar-button:vertical:decrement:end {

  display: none;

}



html, body {

  cursor: url('/scenepng/cursorpoint.png'), auto;

}



a, 

a:hover, 

a *, 

button, 

button:hover, 

input[type="submit"], 

input[type="button"],

.clickable {

  cursor: url('/scenepng/eye3.png') 0 0, pointer !important;

}
.blinkies-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* Prevents images from dropping to a second line */
}

.blinkies-track {
  display: inline-flex; /* Forces images to line up horizontally */
  align-items: center;
  gap: 4px; /* Optional spacing between images */
  
  /* Change 6s to a smaller number (like 3s) for faster speed */
  animation: marquee-scroll 6s linear infinite;
}

.blinkies-track img {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.blinkies-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%); /* Starts filled across the screen instantly */
  }
  100% {
    transform: translateX(-50%); /* Moves exactly half way to loop endlessly */
  }
  
  
}