/* --- BASE STYLES (Apply to all themes) --- */
body {
  font-family: 'Consolas', 'Courier New', monospace;
  text-align: center;
  margin: 0;
  padding: 10px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s, color 0.2s;

  background-color: var(--color-bg-primary);
  color: var(--color-text-main);
}

#container {
max-width: 500px;
width: 95%;
padding: 30px 20px;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border-main);
border-radius: 0;
box-shadow: var(--shadow-container);
transition: background-color 0.2s, border-color 0.2s;
}

h1 {
  color: var(--color-text-title);
  margin-bottom: 5px;
  font-size: 2.5em;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: var(--shadow-text);
  line-height: 1.1;
  text-transform: uppercase;
}

p {
  color: var(--color-text-sub);
  margin-bottom: 30px;
  font-size: 0.85em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Updated styles for theme name and clock */
#output-message {
font-size: 0.8em;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
color: var(--color-text-sub);
text-transform: uppercase;
}

#date-display {
font-size: 0.8em;
font-weight: bold;
margin-top: 5px;
margin-bottom: 30px; /* Provides separation before H1 */
color: var(--color-text-sub);
text-transform: uppercase;
}

hr {
  border: 0;
  border-top: 1px dashed var(--color-border-sub);
  margin: 30px 0;
}

/* --- BUTTON STYLES (Use variables) --- */

.social-link, .main-link-button {
  display: block;
  padding: 18px 20px;
  margin: 15px 0;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  text-transform: uppercase;

  color: var(--color-btn-text);
  background: var(--gradient-btn-base);

  border: 2px solid var(--color-btn-border);
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--shadow-btn-base);
  transition: all 0.05s linear;
}

.social-link:hover, .main-link-button:hover {
  background: var(--gradient-btn-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translate(-3px, -3px);
  border-color: var(--color-btn-border-hover);
}

#mode-toggle {
padding: 8px 15px;
margin-bottom: 5px;
margin-top: 0;
cursor: pointer;
text-transform: uppercase;
font-size: 0.9em;

color: var(--color-toggle-text);
background: var(--color-toggle-bg);
border: 1px solid var(--color-toggle-border);
border-radius: 20px; /* Rounded edges */
font-weight: bold;
box-shadow: var(--shadow-toggle);
transition: all 0.1s linear;
}

#mode-toggle:hover {
background: var(--color-toggle-bg-hover);
color: var(--color-toggle-text-hover);
box-shadow: var(--shadow-toggle-hover);
}

/* ======================================= */
/* ====== 3. THEME DEFINITIONS HERE (10 Total) ====== */
/* ======================================= */


/* --- 1. THEME: CHROME BLACK (Your Aggressive Cybercore Default) --- */
.theme-chrome-black {
  /* Colors */
  --color-bg-primary: #000000;
  --color-bg-secondary: #0a0a0a;
  --color-text-main: #cccccc;
  --color-text-title: #ffffff;
  --color-text-sub: #888888;
  --color-border-main: #333333;
  --color-border-sub: #333333;

  /* Shadows */
  --shadow-container: 0 0 10px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
  --shadow-text: 0 0 3px #ffffff;

  /* Buttons (Chrome) */
  --color-btn-text: #000000;
  --color-btn-border: #555555;
  --color-btn-border-hover: #aaaaaa;
  --gradient-btn-base: linear-gradient(to bottom, #eeeeee 0%, #bbbbbb 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #333333;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #555555;

  /* Toggle */
  --color-toggle-text: #ffffff;
  --color-toggle-bg: #000000;
  --color-toggle-border: #666666;
  --color-toggle-bg-hover: #111111;
  --color-toggle-text-hover: #ffffff;
  --shadow-toggle: 0 0 5px rgba(255, 255, 255, 0.2);
  --shadow-toggle-hover: 0 0 8px rgba(255, 255, 255, 0.4);
}


/* --- 2. THEME: SILVER CORE (Stark, Dark Silver) --- */
.theme-silver-core {
  /* Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #333333;
  --color-text-main: #cccccc;
  --color-text-title: #f0f0f0;
  --color-text-sub: #aaaaaa;
  --color-border-main: #555555;
  --color-border-sub: #444444;

  /* Shadows */
  --shadow-container: 0 0 0 #000000;
  --shadow-text: none;

  /* Buttons (Bright Silver) */
  --color-btn-text: #111111;
  --color-btn-border: #888888;
  --color-btn-border-hover: #aaaaaa;
  --gradient-btn-base: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #eeeeee 0%, #bbbbbb 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #111111;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #222222;

  /* Toggle */
  --color-toggle-text: #f0f0f0;
  --color-toggle-bg: #333333;
  --color-toggle-border: #888888;
  --color-toggle-bg-hover: #555555;
  --color-toggle-text-hover: #ffffff;
  --shadow-toggle: 0 0 0 #000000;
  --shadow-toggle-hover: 0 0 5px rgba(255, 255, 255, 0.2);
}


/* --- 3. THEME: CYBER PURPLE (Black with Purple Accents) --- */
.theme-cyber-purple {
  /* Colors */
  --color-bg-primary: #000000;
  --color-bg-secondary: #0a001a; /* Very dark purple */
  --color-text-main: #dddddd;
  --color-text-title: #bb00ff; /* Purple Title */
  --color-text-sub: #aa55ff;
  --color-border-main: #5500aa;
  --color-border-sub: #220055;

  /* Shadows */
  --shadow-container: 0 0 10px rgba(187, 0, 255, 0.2), inset 0 0 5px rgba(187, 0, 255, 0.1);
  --shadow-text: 0 0 3px #bb00ff;

  /* Buttons (Chrome with Purple Shadow) */
  --color-btn-text: #000000;
  --color-btn-border: #555555;
  --color-btn-border-hover: #aaaaaa;
  --gradient-btn-base: linear-gradient(to bottom, #cccccc 0%, #888888 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #7700cc; /* Purple Shadow */
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #550099;

  /* Toggle */
  --color-toggle-text: #ffffff;
  --color-toggle-bg: #000000;
  --color-toggle-border: #bb00ff;
  --color-toggle-bg-hover: #5500aa;
  --color-toggle-text-hover: #ffffff;
  --shadow-toggle: 0 0 5px rgba(187, 0, 255, 0.4);
  --shadow-toggle-hover: 0 0 8px rgba(187, 0, 255, 0.7);
}


/* --- 4. THEME: ALT WHITE LIGHT (Pure White/Silver Light Mode) --- */
.theme-alt-white-light {
  /* Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f0f0f0;
  --color-text-main: #333333;
  --color-text-title: #111111;
  --color-text-sub: #555555;
  --color-border-main: #cccccc;
  --color-border-sub: #cccccc;

  /* Shadows */
  --shadow-container: 0 0 10px rgba(0, 0, 0, 0.1);
  --shadow-text: none;

  /* Buttons (Darker Chrome) */
  --color-btn-text: #000000;
  --color-btn-border: #aaaaaa;
  --color-btn-border-hover: #888888;
  --gradient-btn-base: linear-gradient(to bottom, #dddddd 0%, #aaaaaa 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #cccccc;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #bbbbbb;

  /* Toggle */
  --color-toggle-text: #000000;
  --color-toggle-bg: #dddddd;
  --color-toggle-border: #000000;
  --color-toggle-bg-hover: #ffffff;
  --color-toggle-text-hover: #000000;
  --shadow-toggle: none;
  --shadow-toggle-hover: 0 0 5px rgba(0, 0, 0, 0.3);
}


/* ======================================= */
/* ====== 5. THEME: SUNSET ORANGE ====== */
/* ======================================= */
.theme-sunset-orange {
  /* Colors */
  --color-bg-primary: #0A0A0A; /* Dark background */
  --color-bg-secondary: #222222; /* Slightly lighter container */
  --color-text-main: #F0F0F0;
  --color-text-title: #FF8C00; /* Bright Orange Title */
  --color-text-sub: #FFA07A; /* Light Salmon/Orange Subtext */
  --color-border-main: #FF8C00;
  --color-border-sub: #B85F00;

  /* Shadows */
  --shadow-container: 0 4px 15px rgba(255, 140, 0, 0.4);
  --shadow-text: 0 0 3px #FF8C00;

  /* Buttons */
  --color-btn-text: #FFFFFF;
  --color-btn-border: #FF8C00;
  --color-btn-border-hover: #FFA500;
  --gradient-btn-base: linear-gradient(to bottom, #FF8C00 0%, #FF8C00 100%); /* Solid Orange */
  --gradient-btn-hover: linear-gradient(to bottom, #FFA500 0%, #FFA500 100%); /* Solid Hover Orange */
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #B85F00;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #FF8C00;

  /* Toggle */
  --color-toggle-text: #F0F0F0;
  --color-toggle-bg: #0A0A0A;
  --color-toggle-border: #FF8C00;
  --color-toggle-bg-hover: #B85F00;
  --color-toggle-text-hover: #FFFFFF;
  --shadow-toggle: 0 0 5px rgba(255, 140, 0, 0.5);
  --shadow-toggle-hover: 0 0 8px rgba(255, 140, 0, 0.8);
}


/* ======================================= */
/* ====== 6. THEME: MIDNIGHT NAVY ====== */
/* ======================================= */
.theme-midnight-navy {
  /* Colors */
  --color-bg-primary: #0D1A26; /* Very Dark Navy */
  --color-bg-secondary: #1F3044; /* Darker Navy container */
  --color-text-main: #E0FFFF; /* Light Cyan */
  --color-text-title: #40E0D0; /* Turquoise Title */
  --color-text-sub: #A0CED9;
  --color-border-main: #008B8B; /* Dark Cyan/Teal Border */
  --color-border-sub: #1E90FF; /* Dodger Blue Accent */

  /* Shadows */
  --shadow-container: 0 4px 15px rgba(64, 224, 208, 0.3);
  --shadow-text: 0 0 3px #40E0D0;

  /* Buttons */
  --color-btn-text: #0D1A26;
  --color-btn-border: #008B8B;
  --color-btn-border-hover: #40E0D0;
  --gradient-btn-base: linear-gradient(to bottom, #40E0D0 0%, #40E0D0 100%); /* Solid Turquoise */
  --gradient-btn-hover: linear-gradient(to bottom, #00CED1 0%, #00CED1 100%); /* Darker Turquoise Hover */
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #1E90FF;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #40E0D0;

  /* Toggle */
  --color-toggle-text: #E0FFFF;
  --color-toggle-bg: #0D1A26;
  --color-toggle-border: #40E0D0;
  --color-toggle-bg-hover: #008B8B;
  --color-toggle-text-hover: #FFFFFF;
  --shadow-toggle: 0 0 5px rgba(64, 224, 208, 0.5);
  --shadow-toggle-hover: 0 0 8px rgba(64, 224, 208, 0.8);
}


/* ======================================= */
/* ====== 7. THEME: FOREST OLIVE ====== */
/* ======================================= */
.theme-forest-olive {
  /* Colors */
  --color-bg-primary: #1F321E; /* Very Dark Forest Green */
  --color-bg-secondary: #2C472A; /* Dark Olive Green */
  --color-text-main: #EFEFEF;
  --color-text-title: #A8C665; /* Muted Green/Yellow Title */
  --color-text-sub: #C6D8AA;
  --color-border-main: #588157;
  --color-border-sub: #4A6E49;

  /* Shadows */
  --shadow-container: 0 0 10px rgba(168, 198, 101, 0.2);
  --shadow-text: 0 0 3px #A8C665;

  /* Buttons */
  --color-btn-text: #1F321E;
  --color-btn-border: #A8C665;
  --color-btn-border-hover: #C6D8AA;
  --gradient-btn-base: linear-gradient(to bottom, #A8C665 0%, #87A353 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #C6D8AA 0%, #A8C665 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #588157;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #4A6E49;

  /* Toggle */
  --color-toggle-text: #EFEFEF;
  --color-toggle-bg: #1F321E;
  --color-toggle-border: #A8C665;
  --color-toggle-bg-hover: #2C472A;
  --color-toggle-text-hover: #FFFFFF;
  --shadow-toggle: 0 0 5px rgba(168, 198, 101, 0.5);
  --shadow-toggle-hover: 0 0 8px rgba(168, 198, 101, 0.8);
}


/* ======================================= */
/* ====== 8. THEME: CORAL PEACH ====== */
/* ======================================= */
.theme-coral-peach {
  /* Colors */
  --color-bg-primary: #FFFFFF; /* Light background */
  --color-bg-secondary: #FFF5EE; /* Peach-tone container */
  --color-text-main: #333333;
  --color-text-title: #FF6B6B; /* Vibrant Coral Title */
  --color-text-sub: #9C5151;
  --color-border-main: #FF6B6B;
  --color-border-sub: #FFAD99;

  /* Shadows */
  --shadow-container: 0 4px 10px rgba(255, 107, 107, 0.2);
  --shadow-text: none;

  /* Buttons */
  --color-btn-text: #FFFFFF;
  --color-btn-border: #FF6B6B;
  --color-btn-border-hover: #FFAD99;
  --gradient-btn-base: linear-gradient(to bottom, #FF6B6B 0%, #E65A5A 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #FF8E8E 0%, #FF6B6B 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #FFAD99;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #FFAD99;

  /* Toggle */
  --color-toggle-text: #FF6B6B;
  --color-toggle-bg: #FFFFFF;
  --color-toggle-border: #FF6B6B;
  --color-toggle-bg-hover: #FFAD99;
  --color-toggle-text-hover: #FFFFFF;
  --shadow-toggle: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-toggle-hover: 0 0 5px rgba(255, 107, 107, 0.5);
}


/* ======================================= */
/* ====== 9. NEW THEME: DARK RED / CRIMSON ====== */
/* ======================================= */
.theme-dark-red {
  /* Colors */
  --color-bg-primary: #1A0000; /* Deepest Red/Black */
  --color-bg-secondary: #330000; /* Dark Crimson Container */
  --color-text-main: #F0F0F0;
  --color-text-title: #E60000; /* Bright Red Title */
  --color-text-sub: #FF5555;
  --color-border-main: #880000;
  --color-border-sub: #550000;

  /* Shadows */
  --shadow-container: 0 4px 15px rgba(230, 0, 0, 0.3);
  --shadow-text: 0 0 3px #E60000;

  /* Buttons */
  --color-btn-text: #FFFFFF;
  --color-btn-border: #E60000;
  --color-btn-border-hover: #FF5555;
  --gradient-btn-base: linear-gradient(to bottom, #CC0000 0%, #AA0000 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #E60000 0%, #CC0000 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #880000;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #550000;

  /* Toggle */
  --color-toggle-text: #F0F0F0;
  --color-toggle-bg: #1A0000;
  --color-toggle-border: #E60000;
  --color-toggle-bg-hover: #330000;
  --color-toggle-text-hover: #FFFFFF;
  --shadow-toggle: 0 0 5px rgba(230, 0, 0, 0.5);
  --shadow-toggle-hover: 0 0 8px rgba(230, 0, 0, 0.8);
}


/* ======================================= */
/* ====== 10. NEW THEME: NEON BLUE / ELECTRIC BLUE ====== */
/* ======================================= */
.theme-neon-blue {
  /* Colors */
  --color-bg-primary: #00001A; /* Very dark navy/black */
  --color-bg-secondary: #000033; /* Dark blue container */
  --color-text-main: #E0FFFF;
  --color-text-title: #00FFFF; /* Pure Cyan/Blue Title */
  --color-text-sub: #00AAAA;
  --color-border-main: #0088CC;
  --color-border-sub: #006699;

  /* Shadows */
  --shadow-container: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 5px rgba(0, 255, 255, 0.2);
  --shadow-text: 0 0 5px #00FFFF;

  /* Buttons */
  --color-btn-text: #000033;
  --color-btn-border: #00FFFF;
  --color-btn-border-hover: #00AAFF;
  --gradient-btn-base: linear-gradient(to bottom, #00CCFF 0%, #0099FF 100%);
  --gradient-btn-hover: linear-gradient(to bottom, #00FFFF 0%, #00CCFF 100%);
  --shadow-btn-base: 0 0 0 #000000, 4px 4px 0 #006699;
  --shadow-btn-hover: 0 0 0 #000000, 6px 6px 0 #0088CC;

  /* Toggle */
  --color-toggle-text: #00FFFF;
  --color-toggle-bg: #00001A;
  --color-toggle-border: #00FFFF;
  --color-toggle-bg-hover: #000033;
  --color-toggle-text-hover: #FFFFFF;
  --shadow-toggle: 0 0 8px rgba(0, 255, 255, 0.7);
  --shadow-toggle-hover: 0 0 12px rgba(0, 255, 255, 1);
}

/* ======================================= */
/* ====== SIDE AD PLACEMENT STYLES (160x600 Banner) ====== */
/* ======================================= */

.side-ad-wrapper {
  /* Base styling to match the theme background */
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-main);
  box-shadow: var(--shadow-container);
  padding: 0; /* Ensures the ad iframe fills the space cleanly */

  /* New Fixed Size */
  width: 160px; /* Fixed width for 160x600 banner */
  height: 600px; /* Fixed height for 160x600 banner */

  /* Position and size */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

  /* Content centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center the ad vertically */
  text-align: center;
  overflow: hidden; /* Important to prevent ad spillage */
}

#ad-left {
left: 10px;
}

#ad-right {
right: 10px;
}

/* HIDE SIDE ADS ON SMALL SCREENS (e.g., phones) */
@media (max-width: 800px) {
  .side-ad-wrapper {
    display: none;
  }
}

/* ======================================= */
/* ====== NEW TOP/BOTTOM AD PLACEMENT STYLES (728x90 Banner) ====== */
/* ======================================= */

.top-bottom-ad-wrapper {
  /* Base styling */
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-main);
  box-shadow: var(--shadow-container);
  padding: 0;

  /* Fixed size for 728x90 content */
  width: 728px;
  height: 90px;

  /* Positioning: Scrollable and centered */
  margin: 20px auto; /* Add vertical margin for spacing, auto for horizontal centering */
  position: relative; /* Ensure it respects document flow */
  z-index: 5; /* Lower Z-index than the fixed side ads */

  /* Content centering */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


/* HIDE TOP/BOTTOM ADS ON SMALL SCREENS */
/* Also hide on medium screens if the ad can't fit (e.g., below 730px wide) */
@media (max-width: 780px) {
  .top-bottom-ad-wrapper {
    display: none;
  }
}

/* ======================================= */
/* ====== MESSAGE MODAL STYLES (RETAINED) ====== */
/* ======================================= */

/* --- Message Modal Window --- */
#message-modal {
position: fixed;
bottom: -300px; /* Hidden below screen */
right: 50%;
transform: translateX(50%);
width: 90%;
max-width: 350px;
padding: 15px;
z-index: 999;

/* Using generic dark/neon variables for the modal style */
--terminal-bg: #0a0a0a;
--terminal-border: #00FF00;
--terminal-glow: rgba(0, 255, 0, 0.7);
--terminal-prompt: #00FFFF;
--terminal-text: #00FF00;

background-color: var(--terminal-bg);
border: 3px solid var(--terminal-border);
box-shadow: 0 0 20px var(--terminal-glow);
transition: bottom 0.5s ease-in-out;

font-family: 'Consolas', monospace;
}

#message-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
color: var(--terminal-prompt);
border-bottom: 1px dashed var(--color-border-main);
padding-bottom: 5px;
}

#message-header h2 {
font-size: 1.1em;
margin: 0;
color: inherit;
text-shadow: none;
letter-spacing: normal;
}

#message-close {
background: none;
border: 1px solid var(--terminal-border);
color: var(--terminal-border);
padding: 2px 8px;
cursor: pointer;
font-size: 0.8em;
font-weight: bold;
}
#message-close:hover {
background: var(--terminal-border);
color: var(--terminal-bg);
}

#message-body {
display: flex;
flex-direction: column;
}

/* Style for the new Name input (ID) */
#message-name-input {
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;

background-color: var(--color-bg-primary);
color: var(--terminal-text);
border: 1px solid var(--color-border-main);
font-family: inherit;
font-size: 0.9em;
}

/* Style for the original Message textarea (ID) */
#message-input {
width: 100%;
height: 80px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;
resize: none;

background-color: var(--color-bg-primary);
color: var(--terminal-text);
border: 1px solid var(--color-border-main);
font-family: inherit;
font-size: 0.9em;
}

#message-footer {
display: flex;
justify-content: space-between;
align-items: center;
}

#message-submit {
padding: 8px 15px;
background-color: var(--terminal-border);
color: var(--terminal-bg);
border: none;
cursor: pointer;
font-weight: bold;
}
#message-submit:hover:not(:disabled) {
background-color: var(--terminal-prompt);
}
#message-submit:disabled {
background-color: #555;
cursor: not-allowed;
}

#message-status {
font-size: 0.8em;
color: var(--terminal-text);
margin-left: 10px;
}