/* PALPABLE PRESS STYLESHEET */

:root {
  /* colors */
  --content: #d23dff;
  --bg-color: #b85eff;
  --text-color: #000000;
  --accent-color: #39ff14;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  background-image: var(--body-bg-image);
  animation: pageLoad 0.3s ease-in;
  position: relative;
}

/* Console mode colors (green terminal theme) */
body.console-mode {
  --bg-color: #000000;
  --text-color: #39ff14;
  --accent-color: #39ff14;
}

body.console-mode #dark-mode-toggle {
  background-color: #39ff14;
  color: #000000;
  border-color: #39ff14;
}

body.console-mode main {
  background-color: #000000;
  color: #39ff14;
  padding: 15px;
  border: 2px solid #39ff14;
}

body.console-mode h1,
body.console-mode h2,
body.console-mode h3,
body.console-mode strong {
  color: #39ff14;
}

body.console-mode h1 {
  border-bottom-color: #39ff14;
}

body.console-mode a {
  color: #39ff14;
}

body.console-mode #container a {
  color: #39ff14;
}

body.console-mode #navbar li a {
  color: #39ff14;
}

body.console-mode #navbar li a:hover,
body.console-mode #navbar li a:focus,
body.console-mode #navbar li a:focus-visible {
  background-color: #39ff14;
  color: #000000;
}

body.console-mode footer {
  background-color: #000000;
  color: #39ff14;
}

body.console-mode img {
  background-color: #39ff14;
}

body.console-mode .collection-card {
  background-color: #000000;
  color: #39ff14;
  border-color: #39ff14;
  background-image: radial-gradient(circle, rgba(184, 94, 255, 0.03) 1px, transparent 1px);
}

body.console-mode .collection-card:hover {
  background-color: #39ff14;
  color: #000000;
  border-color: #000000;
}

body.console-mode .collection-card:hover h2 {
  color: #000000;
}

body.console-mode .collection-card:hover img {
  background-color: #39ff14;
}

/* Archive page dark mode styles */
body.console-mode .book-card {
  background-color: rgba(184, 94, 255, 0.1);
  border-color: #39ff14;
}

body.console-mode .book-card:hover {
  background-color: #39ff14;
  border-color: #000000;
}

body.console-mode .book-card:hover h3,
body.console-mode .book-card:hover .author {
  color: #000000;
}

body.console-mode .book-card .author {
  color: #39ff14;
}

body.console-mode .book-card img {
  background-color: transparent;
}

body.console-mode .buy-button {
  background-color: #39ff14;
  color: #000000 !important;
  border-color: #39ff14;
}

body.console-mode .buy-button:hover {
  background-color: #000000;
  color: #39ff14 !important;
  border-color: #39ff14;
}

body.console-mode .year-header {
  background-color: #000000;
  color: #39ff14;
}

body.console-mode .year-header:hover {
  background-color: #39ff14;
  color: #000000;
}

body.console-mode .year-nav-btn {
  background-color: #000000;
  color: #39ff14;
  border-color: #39ff14;
}

body.console-mode .year-nav-btn:hover {
  background-color: #39ff14;
  color: #000000;
  border-color: #000000;
}

body.console-mode .year-nav-btn.active {
  background-color: #39ff14;
  color: #000000;
  border-color: #000000;
}

body.console-mode .year-nav-btn.active:hover {
  background-color: #39ff14;
  color: #000000;
  border-color: #000000;
}

body.console-mode .year-navigation {
  background-color: #39ff14;
  color: #000000;
  border-bottom-color: #39ff14;
}

body.console-mode .year-separator {
  color: #000000;
}

body.console-mode .modal-content {
  background-color: #39ff14;
  border-color: #39ff14;
  color: #000000;
}

body.console-mode .modal-content h2,
body.console-mode .modal-content h3,
body.console-mode .modal-content p {
  color: #000000;
}

body.console-mode .close-modal {
  color: #000000;
}

body.console-mode .close-modal:hover {
  color: #39ff14;
}

/* Left sidebar dark mode styles */
body.console-mode #leftSidebar h2 {
  background-color: #000000 !important;
  color: #39ff14 !important;
  border: 2px solid #39ff14 !important;
}

body.console-mode #random-comic-content > div {
  background-color: #39ff14 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

body.console-mode #random-comic-content h6 {
  color: #000000 !important;
}

body.console-mode #random-comic-content p {
  color: #000000 !important;
}

body.console-mode aside {
  background-color: #000000;
}

/* Right sidebar dark mode styles */
body.console-mode #rightSidebar h2:first-of-type {
  background-color: #000000 !important;
  color: #39ff14 !important;
  border: 2px solid #39ff14 !important;
}

body.console-mode #rightSidebar h2 {
  background-color: #000000;
  color: #39ff14;
}

body.console-mode #rightSidebar p {
  border-bottom-color: #39ff14;
}

body.console-mode #rightSidebar p[style*="border-bottom"] {
  border-bottom-color: #39ff14 !important;
}

/* Left sidebar collections dark mode styles */
body.console-mode .collections > div:first-child {
  background-color: #000000 !important;
  color: #39ff14 !important;
  border: 2px solid #39ff14 !important;
}

body.console-mode .collections a > div {
  background-color: #000000 !important;
  border-color: #39ff14 !important;
  color: #39ff14 !important;
}

body.console-mode .collections a > div:hover {
  background-color: #39ff14 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body.console-mode .collections a > div h6 {
  color: #39ff14;
}

body.console-mode .collections a > div:hover h6 {
  color: #000000;
}

body.console-mode .collections a > div:hover img {
  background-color: #39ff14;
}

/* Collection pages dark mode styles */
body.console-mode .book-entry {
  border-bottom-color: #39ff14;
}

body.console-mode .book-entry img {
  background-color: #39ff14;
}

/* Page transition animation */
@keyframes pageLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Grain overlay canvas */
#grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.25;
  mix-blend-mode: multiply;
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

/* Ensure common elements don't display rounded corners */
img, button, input, select, textarea, fieldset {
  border-radius: 0 !important;
}

/* below this line is CSS for the layout */

/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */


/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
    max-width: 1000px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
}

/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
  color: #000000;
    font-weight: bold;
    /* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}

#header {
    width: 100%;
    background-color: #b85eff;
    /* header color here! */
    height: 150px;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-size: 100%;
    transition: background-color 0.3s ease;
}

/* navigation section!! */
#navbar {
    height: 40px;
  background-color: #000000;
    /* navbar color */
    width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#navbar li {
  padding: 0;
}

/* navigation links*/
#navbar li a {
  color: #b85eff;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
    display: block;
    padding: 0 14px;
    border-radius: 0;
    transition: background-color 150ms ease, color 150ms ease;
    background-color: transparent;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    font-family: 'VT323', monospace;
    font-size: 25px
}

/* navigation link when a link is hovered over or focused */
#navbar li a:hover,
#navbar li a:focus,
#navbar li a:focus-visible {
  background-color: #b85eff;
  color: #000000;
  text-decoration: none;
  outline: none;
}

#flex {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 20px;
}

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
    background-color: #b85eff;
    width: 240px;
    padding: 20px;
    padding-top: 0;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}


/* this is the color of the main content area,
between the sidebars! */
main {
    background-color: #b85eff;
    flex: 1;
    padding: 15px;
    order: 2;
    transition: all 0.3s ease;
    border: 2px solid #000000;
}

main > *:first-child,
aside > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure all h1 and h2 at top of containers align */
main h1:first-child,
aside h2:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

#leftSidebar {
    order: 1;
    align-self: flex-start;
}

#rightSidebar {
    order: 3;
    align-self: flex-start;
}

footer {
    background-color: #b85eff;
    /* background color for footer */
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    /* this centers the footer text */
    font-size: 12px;
    transition: all 0.3s ease;
}

h1,
h2 {
  font-family: 'VT323', monospace;
  color: #000000;
  margin-top: 0;
}

h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 900;
  color: #000000;
}

h1 {
  font-size: 30px;
  border-bottom: 1px solid #000000;
  padding-bottom: 4px;
  margin-bottom: 4px;
  display: block;
}

h6 {
  margin-top: 2px;
  margin-bottom: 8px;
  font-weight: 400;
}

strong {
    /* this styles bold text */
    color: #000000;
}

#leftSidebar p,
#rightSidebar p {
    margin: 4px 0;
}

/* Divider between collection images in the left sidebar */
.collections {
  border-top: none;
}

.collections p {
  border-bottom: 1px solid #000000;
  padding: 4px 0;
  margin: 0;
}

/* make sure the last item also has a bottom border */
.collections p:last-child {
  border-bottom: 1px solid #000000;
}

/* override inline margin on the images to make spacing smaller */
.collections p img {
  display: block;
  width: 100%;
  margin: 4px 0 !important;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

/* Hover overlay and subtle scale for collection images */
.collections p {
  position: relative;
  overflow: hidden;
  background: rgba(184,94,255,0);
  transition: background-color 180ms ease;
}

.collections p::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.collections p:hover {
  background: #b85eff;
}

.collections p:hover img {
  transform: scale(1.03);
  filter: brightness(0.92);
}

/* this is just a cool box, it's the darker colored one */
.box {
    background-color: #000000;
    border: 1px solid #000000;
    padding: 10px;
  color: #39ff14;
}

.box a { color: #39ff14; }
.box strong { color: #39ff14; }

/* Ensure links inside black-background containers are purple */
#topBar a,
.box a,
*[style*="background-color: #000000"] a {
  color: #39ff14;
}

/* Left sidebar collections animation */
.collections a > div {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.collections a > div:hover {
  background-color: #b85eff !important;
  transform: translateY(-6px) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

body.console-mode .collections a > div:hover {
  background-color: #39ff14 !important;
}

/* CSS for extras */

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #000000;
  color: #b85eff;
  font-family: 'VT323', monospace;
}

/* Console mode topBar */
body.console-mode #topBar {
  color: #39ff14;
}

/* Language selector */
#langSelector {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #000000;
  color: #39ff14;
  border: 2px solid #39ff14;
  padding: 8px 12px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 150ms ease, color 150ms ease;
}

#langSelector:hover {
  background-color: #39ff14;
  color: #000000;
}

#langSelector option {
  background-color: #000000;
  color: #39ff14;
}


/* BELOW THIS POINT IS MEDIA QUERY */

/* Dark Mode Toggle Button */
#dark-mode-toggle {
  position: fixed;
  top: 60px;
  right: 15px;
  background-color: var(--text-color);
  color: var(--bg-color);
  border: 2px solid var(--text-color);
  width: 50px;
  height: 50px;
  font-family: 'VT323', monospace;
  font-size: 20px;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  line-height: 1;
  padding: 0;
}

#dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Hide dark mode toggle on mobile */
@media (max-width: 768px) {
  #dark-mode-toggle {
    display: none !important;
  }
}

/* Custom Scrollbar Styling */
/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 24px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--text-color);
  border: 3px solid var(--bg-color);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-color) var(--bg-color);
}

/* Console mode scrollbar - MUST come after base scrollbar styles */
html body.console-mode::-webkit-scrollbar {
  width: 24px !important;
}

html body.console-mode::-webkit-scrollbar-track {
  background: #000000 !important;
}

html body.console-mode::-webkit-scrollbar-thumb {
  background: #39ff14 !important;
  border: 3px solid #000000 !important;
  border-radius: 0 !important;
}

html body.console-mode::-webkit-scrollbar-thumb:hover {
  background: #39ff14 !important;
  filter: brightness(1.2);
}

html body.console-mode::-webkit-scrollbar-thumb:active {
  background: #39ff14 !important;
}

/* Firefox console mode scrollbar */
html body.console-mode,
html body.console-mode * {
  scrollbar-width: thin !important;
  scrollbar-color: #39ff14 #000000 !important;
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite, skeleton-slideIn 0.4s ease-out;
  border: 1px solid var(--text-color);
  opacity: 0.3;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes skeleton-slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.3;
    transform: translateY(0);
  }
}

@keyframes glitchShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

/* ═══════════════════════════════════════════════════════════════
   SECRET CONSOLE STYLING
   ═══════════════════════════════════════════════════════════════ */

#secret-console-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

#secret-console {
  background-color: #000000;
  border: 3px solid #39ff14;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  font-family: 'IBM Plex Mono', monospace;
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.5);
  animation: consoleSlideIn 0.4s ease;
}

@keyframes consoleSlideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.console-header {
  background-color: #39ff14;
  color: #000000;
  padding: 8px 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.console-close {
  background: none;
  border: none;
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
}

.console-close:hover {
  color: #ff0000;
}

.console-body {
  padding: 20px;
  color: #39ff14;
  overflow-y: auto;
  max-height: calc(80vh - 50px);
}

.ascii-art {
  color: #39ff14;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 20px;
  font-family: monospace;
}

.story-text {
  color: #39ff14;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: 'IBM Plex Mono', monospace;
}

.bife-ascii {
  color: #39ff14;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 20px;
  font-family: monospace;
  white-space: pre;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════ */

.skeleton-line {
  height: 20px;
  margin: 10px 0;
  border-radius: 4px !important;
}

.skeleton-box {
  height: 200px;
  margin: 20px 0;
}

/* Hamburger Menu */
#menu-toggle {
  display: none;
  width: auto;
  height: 40px;
  background-color: var(--text-color);
  border: none;
  cursor: pointer;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: all 0.3s ease;
  margin: 0 auto;
  font-family: 'VT323', monospace;
  font-size: 25px;
  color: var(--bg-color);
  font-weight: bold;
}

#menu-toggle.hidden {
  opacity: 0.5;
}

#menu-toggle.active {
  background-color: var(--accent-color);
  color: var(--text-color);
  transform: scale(1.05);
}

body.console-mode #menu-toggle {
  background-color: #000000;
  color: #39ff14;
}

body.console-mode #menu-toggle.active {
  background-color: #39ff14;
  color: #000000;
}

#mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background-color: var(--bg-color);
  border-right: 3px solid var(--text-color);
  z-index: 9999;
  padding: 80px 20px 20px 20px;
  transition: left 0.3s ease;
  overflow-y: auto;
}

#mobile-nav-overlay.active {
  left: 0;
}

#mobile-nav-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mobile-nav-overlay li {
  margin: 0;
  border-bottom: 2px solid var(--text-color);
}

#mobile-nav-overlay li a {
  display: block;
  padding: 20px 15px;
  color: var(--text-color);
  text-decoration: none;
  font-family: 'VT323', monospace;
  font-size: 28px;
  transition: background-color 0.3s ease;
}

#mobile-nav-overlay li a:hover {
  background-color: var(--accent-color);
  color: #000000;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

@media only screen and (max-width: 900px) {
    #flex {
      flex-direction: column;
      flex-wrap: nowrap;
    }
    aside {
      width: 100%;
    }
    main {
      order: 1;
    }
    #leftSidebar {
      order: 2;
    }
    #rightSidebar {
      order: 3;
    }
    
    /* Show hamburger menu on mobile */
    #navbar {
      display: flex !important;
      justify-content: center;
      align-items: center;
    }
    
    #navbar ul {
      display: none;
    }
    
    #menu-toggle {
      display: flex;
    }
    
    #mobile-nav-overlay {
      display: block;
    }
    
    /* Adjust dark mode toggle position on mobile */
    #dark-mode-toggle {
      top: 15px;
      right: 15px;
      width: 45px;
      height: 45px;
      font-size: 20px;
    }
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* ---------------------------------------------------------------
   FAUX CONSOLE / TERMINAL STYLES
   --------------------------------------------------------------- */

#faux-console {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

#faux-console.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.console-window {
  width: 90%;
  max-width: 800px;
  height: 600px;
  max-height: 80vh;
  background: #000;
  border: 2px solid #0f0;
  box-shadow: 
    0 0 20px rgba(0, 255, 0, 0.3),
    inset 0 0 100px rgba(0, 255, 0, 0.05);
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: consoleGlitchIn 0.3s ease-out;
}

/* Scanlines effect */
.console-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03) 0px,
    transparent 1px,
    transparent 2px,
    rgba(0, 255, 0, 0.03) 3px
  );
  pointer-events: none;
  z-index: 2;
}

/* CRT flicker */
.console-window::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 0, 0.02);
  pointer-events: none;
  animation: crtFlicker 0.15s infinite alternate;
  z-index: 1;
}

.console-header {
  background: #0a0a0a;
  border-bottom: 1px solid #0f0;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
}

.console-title {
  font-weight: bold;
  letter-spacing: 1px;
}

.console-close {
  color: #0f0;
  opacity: 1;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  text-shadow: none;
}

.console-close:hover {
  color: #0f0;
}

.console-output {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  color: #0f0;
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 0 2px #0f0;
  scrollbar-width: thin;
  scrollbar-color: #0f0 #000;
}

.console-output::-webkit-scrollbar {
  width: 8px;
}

.console-output::-webkit-scrollbar-track {
  background: #000;
}

.console-output::-webkit-scrollbar-thumb {
  background: #0f0;
  box-shadow: 0 0 5px #0f0;
}

.console-line {
  margin-bottom: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.console-ascii {
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.8;
  display: block;
  margin-bottom: 10px;
}

.console-prompt {
  color: #0f0;
  margin-right: 8px;
  font-weight: bold;
}

.console-input-line {
  border-top: 1px solid #0f0;
  padding: 10px 15px;
  background: #000;
  display: flex;
  align-items: center;
  gap: 5px;
}

.console-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  text-shadow: 0 0 2px #0f0;
  caret-color: #0f0;
}

.console-input::selection {
  background: #0f0;
  color: #000;
}

/* Command output styles */
.console-cmd {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
  font-weight: bold;
  margin-top: 10px;
}

.console-info {
  color: #0f0;
  opacity: 0.8;
}

.console-success {
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
  font-weight: bold;
}

.console-error {
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
}

.console-hint {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
  font-size: 12px;
  opacity: 0.7;
}

.console-loading {
  color: #0f0;
  animation: blink 0.8s infinite;
}

.console-glitch {
  animation: textGlitch 0.3s infinite;
}

/* Animations */
@keyframes consoleGlitchIn {
  0% {
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
    filter: blur(5px);
  }
  50% {
    transform: scale(1.02) translateX(2px);
    filter: hue-rotate(20deg);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes crtFlicker {
  0% { opacity: 0.02; }
  100% { opacity: 0.05; }
}

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

@keyframes textGlitch {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .console-window {
    width: 95%;
    height: 500px;
    max-height: 90vh;
  }
  
  .console-output {
    font-size: 12px;
    padding: 10px;
  }
  
  .console-input {
    font-size: 12px;
  }
  
  .console-ascii {
    font-size: 8px;
  }
}

/* === CHAT WINDOW OVERLAY === */
.chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(3px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.chat-window {
  width: 90%;
  max-width: 600px;
  height: 70vh;
  max-height: 500px;
  background: #000;
  border: 3px solid #0f0;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3),
              inset 0 0 50px rgba(0, 255, 0, 0.05);
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', monospace;
  animation: chatWindowIn 0.3s ease;
}

@keyframes chatWindowIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.chat-header {
  background: #0f0;
  color: #000;
  padding: 10px 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #0f0;
  font-size: 14px;
  letter-spacing: 2px;
}

.chat-close {
  cursor: pointer;
  font-size: 18px;
}

.chat-close:hover {
  color: #000;
}

.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  color: #0f0;
  text-shadow: 0 0 2px #0f0;
  background: #000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-messages::-webkit-scrollbar {
  width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #000;
  border-left: 1px solid #0f0;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #0f0;
  box-shadow: inset 0 0 3px #000;
}

.chat-message {
  padding: 8px 10px;
  border-radius: 4px;
  line-height: 1.5;
  font-size: 14px;
  animation: messageSlideIn 0.2s ease;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-message {
  background: rgba(0, 255, 0, 0.1);
  border-left: 3px solid #0f0;
  align-self: flex-end;
  max-width: 80%;
}

.intern-message {
  background: rgba(0, 255, 0, 0.05);
  border-left: 3px solid #0a0;
  align-self: flex-start;
  max-width: 80%;
}

.chat-sender {
  font-weight: bold;
  margin-right: 8px;
  opacity: 0.8;
}

.chat-input-line {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #000;
  border-top: 2px solid #0f0;
  gap: 10px;
}

.chat-prompt {
  color: #0f0;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px #0f0;
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  outline: none;
  text-shadow: 0 0 2px #0f0;
  caret-color: #0f0;
}

.chat-input::placeholder {
  color: #0a0;
  opacity: 0.5;
}

/* === TEXT SCRAMBLE EFFECT === */
@keyframes textScramble {
  0%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
  10% {
    opacity: 0.8;
    filter: blur(1px);
  }
  20% {
    opacity: 1;
    filter: blur(0px);
  }
  30% {
    opacity: 0.7;
    filter: blur(2px);
  }
  40% {
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    opacity: 0.6;
    filter: blur(1px);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
  }
  70% {
    opacity: 0.8;
    filter: blur(1px);
  }
  80% {
    opacity: 1;
    filter: blur(0px);
  }
}

.text-scrambling {
  animation: textScramble 0.5s ease-in-out;
}

/* === HORIZONTAL SLICE DISPLACEMENT EFFECT === */
@keyframes sliceDisplacement {
  0%, 100% {
    text-shadow: none;
    transform: translateX(0);
  }
  10% {
    text-shadow: -5px 0 0 currentColor;
    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
    transform: translateX(8px);
  }
  15% {
    clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
    transform: translateX(-12px);
  }
  20% {
    clip-path: polygon(0 30%, 100% 30%, 100% 45%, 0 45%);
    transform: translateX(6px);
  }
  25% {
    clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
    transform: translateX(-15px);
  }
  30% {
    clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
    transform: translateX(10px);
  }
  35% {
    clip-path: polygon(0 75%, 100% 75%, 100% 90%, 0 90%);
    transform: translateX(-8px);
  }
  40% {
    clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
    transform: translateX(5px);
  }
}

.slice-glitching {
  position: relative;
  animation: sliceDisplacement 0.4s steps(7);
}

.slice-glitching::before,
.slice-glitching::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  color: inherit;
}

.slice-glitching::before {
  animation: sliceShiftRed 0.4s steps(7);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  transform: translateX(-8px);
}

.slice-glitching::after {
  animation: sliceShiftBlue 0.4s steps(7);
  clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
  transform: translateX(8px);
}

@keyframes sliceShiftRed {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-15px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(12px); }
}

@keyframes sliceShiftBlue {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(12px); }
  40% { transform: translateX(-10px); }
  60% { transform: translateX(15px); }
  80% { transform: translateX(-5px); }
}

.text-scrambling {
  animation: textScramble 0.5s ease-in-out;
}