/* IMPORT FONTS */
@font-face { font-family: Rosarivo; src: url('https://mercury-atlas.neocities.org/fonts/Rosarivo-Regular.ttf'); }
@font-face { font-family: Iceberg; src: url('https://mercury-atlas.neocities.org/fonts/Iceberg-Regular.ttf'); }

* { box-sizing: border-box; }

/* UI Toggle Button */
#toggle-ui-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* Ensures it stays above the space battle! */
  background-color: #191919;
  color: #858585; /* Matches your site's text color */
  border: 2px groove #454545;
  padding: 8px 12px;
  font-family: 'Iceberg', sans-serif;
  font-size: 16px;
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_normal1.cur'), default; /* Keeps your custom skull cursor active when hovering */
}

/* Adds a nice glow when you hover over it */
#toggle-ui-btn:hover {
  color: #d49531;
  border-color: #d49531;
}

/* UI and Battle Toggle Buttons */
#toggle-ui-btn, 
#toggle-battle-btn {
  position: fixed;
  bottom: 20px;
  z-index: 1000;
  background-color: #191919;
  color: #858585;
  border: 2px groove #454545;
  padding: 8px 12px;
  font-family: 'Iceberg', sans-serif;
  font-size: 16px;
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_normal1.cur'), default;
}

#toggle-ui-btn:hover, 
#toggle-battle-btn:hover {
  color: #d49531;
  border-color: #d49531;
}

#toggle-ui-btn {
  right: 20px;
}

#toggle-battle-btn {
  left: 20px; 
}

/* BASE BODY STYLES */
body {
  font-family: 'Rosarivo', sans-serif;
  margin: 0;
  min-height: 100vh;
  background-color: #08031A;
  background-image: url('https://mercury-atlas.neocities.org/images/tiles/skulls.jpg');
  background-size: 65px;
  color: #e39c19;
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_normal1.cur'), default;
  
  /* Flexbox to center the wrapper on the screen */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CUSTOM JS CURSOR FIX */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

#canvas-cage {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;            /* Middle layer (above the body's skulls) */
  pointer-events: none;  /* Allows clicks to pass through */
}

/* THE MASTER WRAPPER */
#construction-wrapper {
  position: relative; 
  z-index: 10; /* A simple 10 is more than enough to sit above the 0 layer cage */ 
  display: flex;
  flex-direction: column;
  align-items: center;    
  gap: 30px;              
  width: 100%;
  padding: 20px;
}

/* THE TEXT BOX */
#construction-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4px groove #454545;
  width: 100%;
  max-width: 690px;
  padding: 20px;
  background-color: #191919;
  color: #858585;
  text-align: center;
  text-shadow: 0px 0px 4px #000000, 0px 0px 8px #000000, 0px 0px 12px #000000, 0px 0px 16px #000000;
}

/* THE GIF ROWS */
.gif-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px; /* Space between the individual GIFs */
  flex-wrap: wrap; /* Allows GIFs to wrap to the next line on tiny mobile screens */
}

/* HEADINGS AND LINKS */
h1 {
  font-family: 'Iceberg', sans-serif;
  color: #999999;
  font-size: 27px;
  margin-top: 0;
}

a { cursor: none; }