/* =========================================
   ENTRY PAGE STYLES (Meowlzebub)
   ========================================= */
body.entry-page {
  background-color: #1a0101; 
  color: #f5c760; 
  font-family: 'Courier New', Courier, monospace; 
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh; 
  justify-content: center; 
}

.content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px; 
  margin: 40px auto; 
  padding: 30px;
  background-color: rgba(0,0,0,0.8); 
  border-radius: 15px;
  border: 2px solid #3d0303; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
}

.content-container h1 {
  margin-top: 0; 
  margin-bottom: 25px; 
  font-size: 2.8em; 
  text-transform: uppercase; 
  font-weight: bold;
}

.content-container img {
  max-width: 480px; 
  width: 100%; 
  height: auto; 
  border: 6px solid #4a0606; 
  box-shadow: 0 5px 20px rgba(245, 199, 96, 0.4); 
  border-radius: 10px; 
  transition: transform 0.2s ease-in-out; /* Adds a smooth hover effect */
}

.content-container img:hover {
  transform: scale(1.03); /* Makes the image pop slightly when hovered! */
}

/* =========================================
   THE FLUSH ANIMATION
   ========================================= */
.flush-it-down {
  animation: swirlAway 1.5s ease-in forwards;
  overflow: hidden;
}

@keyframes swirlAway {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  100% { transform: rotate(1080deg) scale(0); opacity: 0; }
}

/* =========================================
   HOME PAGE STYLES (Ragnarok Online Theme)
   ========================================= */
/* This imports a free retro pixel font from Google! */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body.ro-home {
  background-color: #7BA555; /* Prontera Grass Green! */
  color: #2b2b2b;
  font-family: 'VT323', monospace; /* The retro 8-bit font */
  font-size: 24px; /* Slightly larger because pixel fonts run small */
  margin: 0;
  padding: 20px;
  cursor: url('images/ragnarokCursor.gif'), auto;
}

/* The main content box designed to look like an RO interface window */
.ro-window {
  background-color: #e4d7c5; /* Classic parchment UI color */
  border: 4px solid #8b7355; /* Wood-like border */
  border-radius: 4px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.3); /* Hard pixel shadow */
  padding: 20px;
  margin-bottom: 20px;
}

/* The top blue bar of the window */
.ro-header {
  background-color: #6581a6; /* Classic blue UI bar */
  color: white;
  padding: 5px 15px;
  margin: -20px -20px 20px -20px;
  border-bottom: 4px solid #4a6382;
  text-align: left;
  font-size: 1.2em;
  text-shadow: 2px 2px 0px #000;
}

/* Navigation layout */
.ro-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #c2b4a0;
  padding-bottom: 15px;
}

/* Chunky retro buttons */
.ro-btn {
  background-color: #d1bda0;
  border: 2px solid #fff;
  border-bottom-color: #8b7355;
  border-right-color: #8b7355;
  padding: 5px 15px;
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Makes the button look like it's being pressed down! */
.ro-btn:active {
  border: 2px solid #8b7355;
  border-bottom-color: #fff;
  border-right-color: #fff;
}

/* =========================================
   3-COLUMN LAYOUT
   ========================================= */
.ro-layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
}

/* Make sure sidebars look nice and compact */
.ro-sidebar .ro-window {
  padding: 15px;
}

.ro-sidebar .ro-header {
  margin: -15px -15px 15px -15px;
  font-size: 1.1em;
}

/* =========================================
   AUDIO PLAYER
   ========================================= */
.ro-audio-player .now-playing {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 0.9em;
}

.player-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.player-controls .ro-btn {
  flex: 1;
  text-align: center;
  font-size: 0.9em;
  padding: 3px 5px;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}

.player-volume input[type=range] {
  flex: 1;
  accent-color: #8b7355; /* Matches the wood theme */
}

/* =========================================
   WEB CHIP
   ========================================= */
.web-chip-container {
  text-align: center;
}

.web-chip-img {
  width: 190px;
  height: 100px;
  image-rendering: auto; /* Keeps it looking crisp and retro */
  border: 2px solid #8b7355;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}

.web-chip-img:hover {
  transform: scale(1.05);
}

.web-chip-link {
  display: inline-block;
}

/* Adjust content style slightly */
.ro-content p {
  margin-top: 0;
  margin-bottom: 15px;
}

.ro-content p:last-child {
  margin-bottom: 0;
}