@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  font-family: 'Courier New', 'Courier', monospace !important;
  font-size: 18px; /* Increased base font size for better readability */
  line-height: 1.7; /* Better line spacing */
  /* Basic 8-bit color palette inspiration */
  --color-8bit-black: #000000;
  --color-8bit-red: #FF0000;
  --color-8bit-green: #00FF00;
  --color-8bit-blue: #0000FF; /* Using Tailwind's blue-700 & blue-900 which are close */
  --color-8bit-cyan: #00FFFF; /* Using Tailwind's cyan-300 */
  --color-8bit-magenta: #FF00FF;
  --color-8bit-yellow: #FFFF00; /* Using Tailwind's yellow-300/400/500 */
  --color-8bit-white: #FFFFFF;
}

/* Custom style for link cards */
.link-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.5), /* shadow-yellow-500/50 */
    0 4px 6px -2px rgba(234, 179, 8, 0.05); /* Adjusted shadow for yellow */
}

/* Code block styling */
pre {
  background-color: #581c87; /* Deep violet to match theme */
  border: 1px solid #7c3aed; /* Lighter violet border */
  color: #e5e7eb; /* Tailwind gray-200 (lighter for better contrast) */
  border-radius: 0.375rem; /* rounded-md */
  padding: 1rem; /* p-4 */
  overflow-x: auto;
  font-family: 'Courier New', 'Courier', monospace !important;
  font-size: 1rem; /* Increased for better readability */
  margin-top: 0.5rem; /* mt-2 */
  margin-bottom: 1rem; /* mb-4 */
  position: relative; /* For potential future enhancements like copy buttons */
  line-height: 1.6; /* Better line spacing */
}

/* Inline code styling */
code {
  font-family: 'Courier New', 'Courier', monospace !important;
  background-color: rgba(55, 65, 81, 0.8); /* Slightly transparent Tailwind gray-700 */
  color: #e5e7eb; /* Tailwind gray-200 */
  padding: 0.25rem 0.5rem; /* Larger padding for better mobile touch */
  border-radius: 0.25rem; /* rounded-sm */
  font-size: 1em; /* Increased for better readability */
}

/* Reset styling for code elements specifically within pre blocks */
pre code {
  background-color: transparent; /* Inherit background from pre */
  color: inherit; /* Inherit text color from pre */
  padding: 0;
  border-radius: 0;
  font-size: 1em; /* Match font size of pre */
  border: none; /* No separate border needed */
}

/* Interactive Section Styling */
.interactive-section {
  background-color: #581c87; /* Deep violet for better visual harmony */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-md */
  margin-bottom: 1.5rem; /* mb-6 */
  border: 1px solid rgba(250, 204, 21, 0.2); /* Subtle gold border */
}

/* Button Styling */
.btn {
  background-color: #3b82f6; /* blue-500 */
  color: white;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.375rem; /* rounded-md */
  font-weight: 500; /* font-medium */
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  margin-right: 0.5rem; /* mr-2 */
  margin-top: 0.5rem; /* Add some top margin for buttons */
}

.btn:hover:not(:disabled) {
  background-color: #2563eb; /* blue-600 */
}

.btn:disabled {
  background-color: #9ca3af; /* gray-400 */
  cursor: not-allowed;
}

.btn-green {
  background-color: #22c55e; /* green-500 */
}

.btn-green:hover:not(:disabled) {
  background-color: #16a34a; /* green-600 */
}

/* Input and Select Field Styling */
.input-field,
.select-field {
  background-color: #374151; /* Tailwind gray-700 */
  color: #F3F4F6;           /* Tailwind gray-100 */
  border: 1px solid #6B7280; /* Tailwind gray-500 */
  padding: 0.5rem;           /* p-2 */
  border-radius: 0.375rem;   /* rounded-md */
  margin-right: 0.5rem;      /* mr-2 */
  margin-top: 0.25rem;       /* mt-1 */
  margin-bottom: 0.5rem;     /* mb-2 */
}

/* Message Box Styling */
.message-box {
  margin-top: 1rem; /* mt-4 */
  padding: 0.75rem; /* p-3 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
}

.message-box-success {
  background-color: #052e16; /* green-950 */
  color: #dcfce7; /* green-100 */
  border: 1px solid #15803d; /* green-600 */
}

.message-box-error {
  background-color: #450a0a; /* red-950 */
  color: #fee2e2; /* red-100 */
  border: 1px solid #b91c1c; /* red-700 */
}

.message-box-info {
  background-color: #082f49; /* sky-950 */
  color: #e0f2fe; /* sky-100 */
  border: 1px solid #0369a1; /* sky-700 */
}

/* Output Display Styling */
.output-display {
  background-color: #581c87; /* Deep violet to match interactive sections */
  border: 1px dashed #facc15; /* yellow-400 for border */
  color: #facc15; /* yellow-400 for text */
  padding: 1rem; /* p-4 */
  border-radius: 0.375rem; /* rounded-md */
  min-height: 100px; /* Increased height */
  font-family: monospace;
  white-space: pre-wrap; /* Keep formatting */
  margin-top: 0.5rem; /* mt-2 */
  max-height: 300px; /* Limit height and allow scroll */
  overflow-y: auto; /* Add scrollbar if needed */
}

/* BST Visualization Styling */
.tree-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  overflow-x: auto; /* Allow horizontal scrolling for wide trees */
  min-height: 150px;
  background-color: #111827; /* Tailwind gray-900 for contrast */
  border-radius: 0.375rem; /* rounded-md */
  margin-top: 1rem;
}

.node-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* For line positioning */
  padding: 0 5px; /* Horizontal padding for spacing between sibling nodes */
}

.tree-node {
  background-color: #facc15; /* Tailwind yellow-400 */
  color: #1e3a8a; /* Tailwind blue-900 */
  border: 2px solid #eab308; /* Tailwind yellow-500 */
  border-radius: 50%; /* Circular nodes */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.875rem; /* text-sm */
  margin-bottom: 20px; /* Space for lines to children */
  position: relative;
  z-index: 1; /* Ensure node is above lines */
}

.node-children {
  display: flex;
  justify-content: center;
  position: relative;
}

/* --- Connecting Lines --- */
/* Vertical line from parent to the horizontal line connecting children */
.node-wrapper.has-children > .tree-node::after {
  content: '';
  position: absolute;
  bottom: -20px; /* Start from bottom of node, extend downwards */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px; /* Height of the vertical part of the line */
  background-color: #9ca3af; /* Tailwind gray-400 */
  z-index: 0;
}

/* Horizontal line connecting children, only if there are children */
.node-wrapper.has-children > .node-children::before {
  content: '';
  position: absolute;
  top: -20px; /* Position it just above where children wrappers start, aligned with parent's vertical line end */
  left: 50%;
  right: 50%;
  height: 2px;
  background-color: #9ca3af; /* Tailwind gray-400 */
  z-index: 0;
}

/* Adjust horizontal line for single children to point correctly */
/* If only left child, horizontal line extends from center to left child's center */
.node-wrapper.has-left-only > .node-children::before {
  left: 0;
  right: 50%;
  transform: translateX(-50%); /* Nudge to align with child if only one */
}

/* If only right child, horizontal line extends from center to right child's center */
.node-wrapper.has-right-only > .node-children::before {
  left: 50%;
  right: 0;
  transform: translateX(50%); /* Nudge to align with child if only one */
}

/* If has both children, horizontal line spans between them */
.node-wrapper.has-both-children > .node-children::before {
  left: 25%; /* Approximate start */
  right: 25%; /* Approximate end */
  /* Exact positioning might need JS or more complex CSS based on dynamic child widths */
}


/* Vertical line from child up to the horizontal connector */
/* This is tricky without knowing exact child position relative to parent's horizontal line */
/* A simpler approach is to ensure children are spaced and parent lines point down */

.node-placeholder {
  width: 40px; /* Match node width to keep spacing consistent */
  height: 40px;
  margin: 0 5px; /* Match node-wrapper padding */
}

/* Highlight for nodes during traversal or selection (if needed later) */
.tree-node.highlight {
  background-color: #fbbf24; /* amber-400 */
  box-shadow: 0 0 10px #fde047; /* yellow-300 glow */
}

/* Loop Item Styling for forLoopSequence in loops.html */
.loop-item {
  color: #facc15; /* Tailwind yellow-400 */
  background-color: #1e40af; /* Tailwind blue-800 */
  padding: 0.25rem 0.5rem; /* py-1 px-2 */
  margin: 0.25rem; /* m-1 */
  border-radius: 0.25rem; /* rounded-sm */
  font-size: 0.875rem; /* text-sm */
  display: inline-block;
  /* font-family: Arial, sans-serif; */ /* Reverted */
  /* border: 1px solid red;    */ /* Reverted */
}

.loop-item.highlight {
  background-color: #fde047; /* Tailwind yellow-300 */
  color: #1e3a8a; /* Tailwind blue-900 */
  font-weight: bold;
  /* border: 1px solid blue; */ /* Reverted */
}

/* ENCHANTED 8-BIT FOREST THEME - START */

body {
  font-family: 'Courier New', 'Courier', monospace !important; /* Use Courier instead of Press Start 2P */
  color: #f0c060; /* Sunlight Gold - General text */
  background-color: #224022; /* Forest Green - Body BG */
  font-size: 18px; /* Increased base font size for readability */
  line-height: 1.7; /* Better line spacing */
}

.console-screen-border {
  border: 8px solid #503020; /* Deep Bark - Console border */
  box-shadow: 
    inset 0 0 0 4px #706050, /* Lighter Bark/Moss - Inner bevel highlight */
    inset 0 0 0 8px #302010, /* Darkest Bark - Inner bevel shadow */
    0 0 0 8px #302010,       /* Outer shadow */
    4px 4px 0 4px #503020, 
    calc(100% - 8px) 4px 0 4px #503020, 
    4px calc(100% - 8px) 0 4px #503020, 
    calc(100% - 8px) calc(100% - 8px) 0 4px #503020; 
  background-color: #605040; /* Mossy Brown - Screen area BG */
  padding: 16px; 
  max-width: 1000px; 
  margin: 30px auto; 
  border-radius: 12px; /* Slightly rounded console screen corners */
}

.pixel-header { /* Typically for H1 on main page */
  color: #f0c060; /* Sunlight Gold */
  font-family: 'Press Start 2P', cursive !important;
  text-shadow: 
    /* Top-left highlight for 3D effect */
    -1px -1px 0 #f8e8c0, /* Pale Gold highlight */
    -2px -2px 0 #f8e8c0,
    /* Bottom-right shadows for depth and solidity */
    1px 1px 0 #a07030,   /* Darker Brownish Gold - Layer 1 */
    2px 2px 0 #a07030,
    3px 3px 0 #503020,   /* Deep Bark - Layer 2 */
    4px 4px 0 #503020,
    5px 5px 0 #302010,   /* Darkest Bark - Layer 3 (deepest shadow) */
    6px 6px 0 #302010;
  font-size: 3rem; /* Increased size */
  line-height: 1.2; 
}

.pixel-subheader { /* Typically for P subtitle on main page */
  color: #40a090; /* Mystic Teal */
  text-shadow: 2px 2px 0px #302010; /* Darkest Bark shadow for depth */
  font-size: 1.2rem;
}

/* General page title for sub-pages */
.page-title-8bit {
  color: #f0c060; /* Sunlight Gold */
  font-family: 'Press Start 2P', cursive !important;
  text-shadow: 
    -1px -1px 0 #f8e8c0,
    1px 1px 0 #a07030,
    2px 2px 0 #503020,
    3px 3px 0 #302010;
  font-size: 2.5rem; /* Increased size */
  line-height: 1.2;
  text-align: center;
  margin-bottom: 20px;
}


/* Section styling for main page sections */
.game-section {
  background-color: #581c87; /* Deep violet - Section BG */
  border: 4px solid #7c3aed; /* Lighter violet - Section border */
  box-shadow: 
    inset 0 0 0 3px #6d28d9, /* Purple highlight line */
    5px 5px 0 0 #1e1b4b,    /* Dark purple - Main outer shadow */
    -3px -3px 0 0 #a78bfa;  /* Light purple - Top-left highlight */
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 10px; 
}

.section-title-8bit { /* For H2 titles within .game-section on main page */
  background-color: #40a090; /* Mystic Teal - Title BG */
  color: #f0e0c0; /* Cream - Title Text */
  font-family: 'Press Start 2P', cursive !important;
  padding: 8px 16px; 
  display: inline-block; 
  border: 3px solid #503020; /* Deep Bark border */
  border-right-color: #f0c060; /* Sunlight Gold accent */
  border-bottom-color: #f0c060; /* Sunlight Gold accent */
  text-shadow: 2px 2px 0 #224022; /* Forest Green shadow */
  font-size: 1.5rem; /* Increased size */
  margin-bottom: 24px;
  border-radius: 6px; 
}

/* Link cards on index.html, also base for general themed buttons */
.link-card-8bit, .btn-8bit {
  background: linear-gradient(145deg, #7080b0, #506090); /* Gradient for 3D effect */
  color: #f0e0c0; /* Cream text for readability */
  border: none; /* Remove border for smoother look */
  padding: 20px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  display: block;
  border-radius: 15px; /* Smooth rounded corners */
  box-shadow: 
    5px 5px 0px #302010, /* Main shadow */
    inset 0 2px 4px rgba(255, 255, 255, 0.2), /* Inner highlight */
    inset 0 -2px 4px rgba(0, 0, 0, 0.2); /* Inner shadow */
  position: relative; /* For 3D effect */
}

.link-card-8bit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  border-radius: 15px;
  z-index: 1;
}

.link-card-8bit:hover, .btn-8bit:hover {
  background: linear-gradient(145deg, #8090c0, #6070a0); /* Brighter gradient on hover */
  color: #f8e8c0; /* Pale Gold text on hover */
  transform: translate(-2px, -2px); 
  box-shadow: 
    7px 7px 0px #302010,
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.link-card-8bit:active, .btn-8bit:active { 
  background: linear-gradient(145deg, #405080, #304070); /* Darker gradient when pressed */
  transform: translate(3px, 3px); 
  box-shadow: 
    2px 2px 0px #302010,
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.link-card-8bit h3 { /* Specific to index.html cards */
  color: #f0c060; /* Sunlight Gold for titles */
  font-size: 1rem; 
  margin-bottom: 0.75rem;
  text-shadow: 1px 1px 0px #224022; 
  position: relative;
  z-index: 2; /* Above the gradient overlay */
}

.link-card-8bit:hover h3 {
  color: #f8e8c0; /* Pale Gold on hover */
}

.link-card-8bit p { /* Specific to index.html cards */
  color: #f0e0c0; /* Cream text for paragraph */
  font-size: 0.9em;
  margin-top: 8px;
  position: relative;
  z-index: 2; /* Above the gradient overlay */
}

.link-card-8bit:hover p {
  color: #f8e8c0; /* Pale Gold text on hover for paragraph */
}

.link-card-container-8bit {
  /* display: flex; */ /* Changed from flex */
  /* flex-wrap: wrap; */
  /* justify-content: center; */
  display: grid; /* Use grid for layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  gap: 20px;
  padding: 20px 0;
}

.footer-8bit { /* For main index.html footer */
  border-top: 4px solid #503020; 
  box-shadow: 0 -3px 0 0 #f0c060; 
  color: #f0c060; 
  padding-top: 20px;
  margin-top: 40px;
  border-bottom-left-radius: 8px; 
  border-bottom-right-radius: 8px;
  text-align: center;
}

.footer-8bit a {
  color: #80b0d0; 
  text-shadow: 1px 1px 0px #503020; 
}

.footer-8bit a:hover {
  color: #a0c0e0; 
  text-shadow: 1px 1px 0px #224022; 
}

/* Theme adjustments for existing generic classes */
.interactive-section { /* From original shared-styles */
  background-color: #581c87; /* Deep violet - to match .game-section */
  border: 2px solid #7c3aed; /* Lighter violet */
  box-shadow: inset 0 0 0 2px #6d28d9, 3px 3px 0 0 #1e1b4b;
  padding: 1.5rem; 
  margin-bottom: 1.5rem; 
  border-radius: 8px; /* Rounded to fit theme */
  color: #f0e0c0; /* Cream text for contrast on violet */
}

.interactive-section h2, .interactive-section h3 {
    color: #f0c060; /* Sunlight Gold for titles within these sections */
    font-family: 'Press Start 2P', cursive !important;
    text-shadow: 1px 1px 0px #503020;
    margin-bottom: 1rem;
    font-size: 1.2rem; /* Increased size */
}

.btn { /* Generic .btn from original shared-styles, now themed */
  background-color: #40a090; /* Mystic Teal */
  color: #f0c060; /* Sunlight Gold */
  padding: 0.6rem 1rem;
  border-radius: 8px; /* Rounded */
  font-weight: normal; /* Courier is readable without heavy boldness */
  cursor: pointer;
  transition: transform 0.07s linear, box-shadow 0.07s linear, background-color 0.1s linear;
  border: none; /* Remove default border if any */
  margin-right: 0.5rem; 
  margin-top: 0.5rem;
  border-top: 3px solid #60c0b0;
  border-left: 3px solid #60c0b0;
  border-bottom: 3px solid #208070;
  border-right: 3px solid #208070;
  box-shadow: 3px 3px 0px #503020;
  text-decoration: none;
  display: inline-block;
}

.btn:hover:not(:disabled) {
  background-color: #50b0a0;
  color: #f8e8c0;
  transform: translate(-1px, -1px); 
  box-shadow: 4px 4px 0px #302010;
}

.btn:disabled {
  background-color: #706050; /* Lighter Bark/Moss */
  color: #a08070; /* Muted color */
  cursor: not-allowed;
  border-top-color: #807060;
  border-left-color: #807060;
  border-bottom-color: #605040;
  border-right-color: #605040;
  box-shadow: 2px 2px 0px #503020;
}

.input-field,
.select-field {
  background-color: #706050; /* Lighter Bark/Moss */
  color: #f0e0c0;           /* Cream text */
  border: 3px solid #503020; /* Deep Bark */
  border-top-color: #302010; /* Darkest Bark for inset feel */
  border-left-color: #302010;
  padding: 0.5rem;          
  border-radius: 6px;  
  margin-right: 0.5rem;     
  margin-top: 0.25rem;      
  margin-bottom: 0.5rem;    
  font-family: 'Courier New', 'Courier', monospace !important; /* Ensure font */
}

.input-field:focus,
.select-field:focus {
  outline: 2px solid #f0c060; /* Sunlight Gold focus outline */
  background-color: #807060;
}

.message-box {
  margin-top: 1rem; 
  padding: 0.75rem; 
  border-radius: 6px; 
  font-size: 0.875rem; 
  border-width: 3px;
  border-style: solid;
  box-shadow: 3px 3px 0px #503020;
}

.message-box-success {
  background-color: #309080; /* Darker Teal */
  color: #f0e0c0; /* Cream */
  border-color: #208070; /* Darkest Teal */
}

.message-box-error {
  background-color: #dc2626; /* Keep error red for clarity */
  color: #fecaca; /* Light red text */
  border-color: #b91c1c; /* Darker red border */
}

.message-box-info {
  background-color: #6080a0; /* Muted Sky Blue */
  color: #f0e0c0; /* Cream */
  border-color: #507090; /* Darker Muted Sky Blue */
}

.output-display { /* For code outputs etc. */
  background-color: #581c87; /* Deep violet */
  border: 3px solid #7c3aed; /* Lighter violet */
  border-top-color: #4c1d95;
  border-left-color: #4c1d95;
  color: #f0c060; /* Sunlight Gold text */
  padding: 1rem; 
  border-radius: 6px; 
  min-height: 100px; 
  font-family: 'Courier New', 'Courier', monospace !important; /* Ensure font for output */
  white-space: pre-wrap; 
  margin-top: 0.5rem; 
  max-height: 300px; 
  overflow-y: auto; 
}

/* Code block styling (pre) */
pre {
  background-color: #581c87; /* Deep violet */
  border: 3px solid #7c3aed; /* Lighter violet */
  color: #f0c060; /* Sunlight Gold */
  border-radius: 6px; 
  padding: 1rem; 
  overflow-x: auto;
  font-family: 'Courier New', 'Courier', monospace !important; /* Use Courier instead */
  font-size: 0.9rem; /* Increased for better readability */
  margin-top: 0.5rem; 
  margin-bottom: 1rem; 
  position: relative;
  line-height: 1.4;
  box-shadow: inset 0 0 0 3px #4c1d95; /* Inner violet shadow */
}

/* Inline code styling (code) */
code {
  font-family: 'Courier New', 'Courier', monospace !important;
  background-color: #706050; /* Lighter Bark/Moss */
  color: #f8e8c0; /* Pale Gold */
  padding: 0.2rem 0.4rem; /* Slightly larger for better mobile touch */
  border-radius: 4px; 
  font-size: 0.95em; /* Increased for better readability */
  border: 1px solid #503020; /* Deep Bark border for inline code */
}

pre code { /* Reset for code inside pre */
  background-color: transparent; 
  color: inherit; 
  padding: 0;
  border-radius: 0;
  font-size: 1em; 
  border: none; 
}


/* Specific Theming for BST Visualization */
.tree-container {
  background-color: #581c87; /* Deep violet, like game-section */
  padding: 20px;
  border-radius: 8px;
  margin-top: 1rem;
  border: 2px solid #7c3aed;
  box-shadow: inset 0 0 0 2px #6d28d9, 3px 3px 0 0 #1e1b4b;
}

.tree-node {
  background-color: #f0c060; /* Sunlight Gold */
  color: #503020; /* Deep Bark text for contrast */
  border: 3px solid #503020; /* Deep Bark */
  border-top-color: #f8e8c0; /* Pale Gold highlight */
  border-left-color: #f8e8c0;
  border-radius: 50%; 
  width: 45px; /* Slightly larger */
  height: 45px;
  font-size: 0.85rem; /* Adjusted for Courier readability */
  box-shadow: 2px 2px 0px #302010; /* Darkest Bark shadow */
}

.tree-node.highlight { /* If used */
  background-color: #80b0d0; /* Sky Blue for highlight */
  color: #224022; /* Forest Green text */
  box-shadow: 0 0 8px #a0c0e0; /* Lighter Sky Blue glow */
}

/* Connecting lines for BST - use a muted color */
.node-wrapper.has-children > .tree-node::after,
.node-wrapper.has-children > .node-children::before {
  background-color: #706050; /* Lighter Bark/Moss */
}


/* Specific Theming for Loop Items */
.loop-item {
  color: #f0e0c0; /* Cream */
  background-color: #40a090; /* Mystic Teal */
  padding: 0.35rem 0.6rem; 
  margin: 0.25rem; 
  border-radius: 6px; 
  font-size: 0.85rem; /* Increased for better readability */
  display: inline-block;
  border: 2px solid #208070; /* Darker Mystic Teal */
  box-shadow: 2px 2px 0 #503020; /* Deep Bark shadow */
}

.loop-item.highlight {
  background-color: #f0c060; /* Sunlight Gold */
  color: #224022; /* Forest Green */
  border-color: #a07030; /* Darker Brownish Gold */
  box-shadow: 2px 2px 0 #302010; /* Darkest Bark shadow */
}

/* Navbar styling for sub-pages */
.navbar-8bit {
  background-color: #503020; /* Deep Bark */
  padding: 10px 20px;
  border-bottom: 4px solid #302010; /* Darkest Bark */
  display: flex;
  justify-content: space-around; /* Distribute items */
  align-items: center;
  border-radius: 8px 8px 0 0; /* Rounded top corners if used at top of console-screen */
  margin-bottom: 10px; /* Space below navbar if content follows directly */
}

.navbar-8bit a {
  color: #f0c060; /* Sunlight Gold */
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.1s linear, color 0.1s linear;
}

.navbar-8bit a:hover {
  background-color: var(--theme-accent1); /* Golden Sap */
  color: var(--theme-bg); /* Dark Forest Green text */
  border-color: var(--theme-shadow); /* Deep Forest Shadow for subtle border on hover */
}

/* General Content Wrapper for sub-pages inside console-screen-border */
.content-wrapper-8bit {
    padding: 1.5rem; /* p-6 */
    background-color: var(--theme-bg); /* Dark Forest Green - ensure it matches body or desired inner bg */
    border: 3px solid var(--theme-accent2); /* Dark Wood Brown */
    border-radius: 10px;
    box-shadow: 0 0 10px var(--theme-shadow); /* Deep Forest Shadow */
    max-width: 900px; /* Max width for content pages */
    margin: 0 auto 2rem auto; /* Centering and bottom margin */
}

/* New class for nested interactive boxes, simpler than .interactive-section */
.sub-interactive-box {
  background-color: rgba(88, 28, 135, 0.3); /* Subtle violet overlay */
  border: 1px solid #7c3aed; /* Violet border */
  padding: 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.sub-interactive-box h3 {
  color: var(--theme-text); /* Moss Green for titles in sub-boxes */
  border-bottom: 1px dashed var(--theme-accent2); /* Dark Wood Brown dashed underline */
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
  font-size: 1.1em; /* Slightly smaller than .interactive-section h2/h3 */
}

/* Styling for quiz options and labels */
.quiz-options .quiz-option-label {
  display: block;
  padding: 0.5rem;
  border: 1px solid var(--theme-accent2); /* Dark Wood Brown border */
  border-radius: 4px;
  margin-bottom: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.quiz-options .quiz-option-label:hover {
  background-color: var(--theme-accent2); /* Dark Wood Brown on hover */
  border-color: var(--theme-text); /* Moss Green border on hover */
  color: var(--theme-highlight);
}

.quiz-options .quiz-option-label input[type="radio"] {
  margin-right: 0.5rem;
  /* Custom radio button appearance could be added here if desired */
}

/* Placeholder text styling */
.placeholder-text {
  color: var(--theme-text); /* Moss Green */
  opacity: 0.6; /* Slightly faded */
  font-style: italic;
}

/* Universal font application - ensure this is last or very high specificity if needed */
body, p, a, span, div, button, input, select, textarea {
  font-family: 'Courier New', 'Courier', monospace !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Press Start 2P', cursive !important;
}

/* Mobile responsive font sizes */
@media (max-width: 768px) {
  body {
    font-size: 20px; /* Larger base font for mobile */
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
  
  p, div, span {
    font-size: 1.1rem;
    line-height: 1.8;
  }
  
  button {
    font-size: 1.1rem;
    padding: 0.8rem 1.2rem;
  }
  
  input, select, textarea {
    font-size: 1.1rem;
    padding: 0.8rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 21px;
  }
  
  h1 {
    font-size: 1.7rem;
  }
  
  h2 {
    font-size: 1.4rem;
  }
  
  h3 {
    font-size: 1.2rem;
  }
}

/* ENCHANTED 8-BIT FOREST THEME - END */