body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 20px;
  background-color: #f4f4f4;
  color: #333; /* Added default text color for body */
}

/* Styles for the new rules/info section */
.info-box {
  /* NEW: Common class for info boxes */
  background-color: #e9f7fd; /* Light blue background */
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #bce8f1; /* Light blue border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.info-box h2,
.info-box h3 {
  color: #31708f; /* Darker blue for headings in this section */
  margin-top: 0; /* Remove default top margin for first heading */
}
.info-box h3 {
  margin-top: 1em; /* Add some space above subheadings */
}

/* New styles for the quick start guide */
#quick-start-guide {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #bce8f1;
}

.steps {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 10px 15px; /* Row and column gap */
}

.step {
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.arrow {
  font-size: 1.5em;
  color: #555;
}

.info-box ul {
  padding-left: 20px; /* Indent list items */
}
.info-box p {
  margin-bottom: 0.8em;
}

.toggle-info-button {
  /* NEW: Common class for toggle buttons */
  background-color: #5bc0de; /* Info blue color */
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 15px; /* Space between button and content */
  font-size: 0.9em;
  display: block; /* Make it a block to control width or center if needed */
}

.toggle-info-button:hover {
  background-color: #31b0d5;
}

/* Wrapper for content that will be toggled */
.info-content-wrapper {
  /* NEW: Common class for content wrappers */
  overflow: hidden; /* For smooth transition if you add one */
  transition: max-height 0.5s ease-in-out; /* Optional: for smooth collapse/expand */
  max-height: 1500px; /* Large enough to fit content, adjust if necessary. */
}

.info-content-wrapper.collapsed {
  max-height: 0;
}

/* Styles for cards on referrals.html */
.dashboard-card {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Main Page Layout --- */
.page-layout {
  display: flex;
  gap: 2rem; /* Space between main content and log column */
  margin-bottom: 1rem;
  flex-wrap: wrap; /* Allows columns to stack on smaller screens */
}

/* NEW: Styles for the main page header */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #bce8f1;
  margin-bottom: 20px;
}
.main-header h1 {
  margin: 0; /* Remove default margin from h1 */
}

/* NEW: Style for the cross-site link inside the main title */
.main-header h1 a {
  font-size: 0.5em; /* Make the link text smaller */
  font-weight: normal;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 15px;
}

/* NEW: Style for the active users count in the header */
.main-header .active-users {
  margin: 0; /* Remove default paragraph margin */
  font-size: 0.9em;
  color: #555;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically align the dot and text */
}

/* NEW: Style for the 24h visitors count in the header */
.main-header .visitors-24h {
  margin: 0;
  font-size: 0.9em;
  color: #555;
  margin-left: 20px; /* Add some space between the two stats */
}
/* Left column for the four main cards */
.main-content-column {
  flex: 2; /* Takes up more space */
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Space between the info-grid and main-grid */
  min-width: 320px;
}

/* Grids for layout */
.info-grid,
.main-grid,
.referral-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Specific widths for info and main grid cards to allow more space for game status */
#connection-status,
#game-controls {
  flex: 1;
}

#game-info,
#game-state {
  flex: 1.5; /* Give more space to the middle column */
}

/* Specific styling for referral grid items to adjust their width */
#referral-earnings-container {
  flex: 0.5; /* Make the earnings card narrower */
}
#pending-confirmations-container {
  flex: 1.5; /* Make the confirmations card wider to fill space */
}
/* NEW: Make all referrals container take up full width on its row */
#all-referrals-container {
  flex-basis: 100%;
}
/* Common card style for all content blocks including logs and dashboard cards */
.info-card,
.main-card,
.log-column,
.dashboard-card {
  flex: 1;
  min-width: 300px;
  padding: 1.5rem;
  border: 1px solid #bce8f1; /* Match the rules section border */
  border-radius: 8px;
  background: #e9f7fd; /* Light blue background for all cards */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Match the rules section shadow */
  margin-bottom: 1rem; /* Add some margin back */
}

/* Specific layout for the log column */
.log-column {
  display: flex;
  flex-direction: column;
}

/* Common heading style for all cards */
.info-card h2,
.main-card h2,
.log-column h2,
.dashboard-card h2,
.dashboard-card h3 {
  margin-top: 0;
  color: #31708f; /* Match the rules section heading color */
}

/* Ensure text inside cards is readable */
.info-card p,
.main-card p,
.main-card h3,
.main-card ul,
.dashboard-card p,
.dashboard-card ul {
  color: #333;
}

/* --- End Main Page Layout --- */

h1,
h2,
h3 {
  /* General h1,h2,h3 not inside #game-rules-and-info */
  color: #333;
}

button {
  /* General button styles */
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px 5px 5px 0;
  font-size: 1em;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

#react-button {
  background-color: #dc3545; /* Red for emphasis */
  font-weight: bold;
  padding: 15px 25px;
}
#react-button:hover:not(:disabled) {
  background-color: #c82333;
}
#react-button:disabled {
  background-color: #f8d7da;
  color: #721c24;
}

#player-list {
  list-style: none;
  padding-left: 0;
}

#player-list li {
  font-family: monospace;
  font-size: 0.9em;
}

#log-output {
  background-color: #e9ecef; /* This is the light gray background for the log text area */
  color: #333; /* Dark text for readability */
  padding: 10px;
  border-radius: 4px;
  height: 200px; /* Fixed height */
  overflow-y: auto; /* Scroll if content overflows */
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.9em;
}

/* Specific overrides for the log output in the new layout */
.log-column #log-output {
  flex-grow: 1; /* Make the log area fill the available space */
  height: auto; /* Let it grow with content */
  max-height: 75vh; /* But cap its height to 75% of the viewport height */
  overflow-y: auto; /* Ensure scrollbar appears when content overflows */
  border: 1px solid #ced4da; /* A slightly softer border for the log area */
}

hr {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 20px 0;
}

.timer-container {
  background-color: #ffeeba;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 10px;
  text-align: center;
}

.timer-value {
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
}

/* New styles for the non-editable referral link display */
.referral-link-display {
  border: none !important;
  background-color: transparent !important;
  font-weight: bold;
  color: #c82333; /* A bootstrap-like danger red */
  padding: 4px;
  font-family: monospace;
  font-size: 2em; /* Increased font size */
  flex-grow: 1; /* Make it take available space */
  width: 100%; /* Fallback for non-flex context */
}

/* Specific style for the copy button to prevent wrapping */
#copy-referral-link-button {
  white-space: nowrap;
}

/* Styles for referral link input and button */
.referral-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Utility classes */
.active-state {
  font-weight: bold;
  color: #28a745;
}
.error-state {
  font-weight: bold;
  color: #dc3545;
}

/* Styles for the top info container (How to Play & Record) */
.top-info-container {
  display: flex;
  justify-content: space-between; /* Changed for better alignment */
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}
#quick-start-guide {
  flex: 2; /* Takes more space to make the record block narrower */
  min-width: 300px;
}
#record-info {
  flex: 1; /* Takes less space */
  background-color: #e9ecef; /* Light grey background like logs */
  min-width: 250px;
  padding: 0.1rem 1.5rem; /* Reduced vertical padding to make it shorter */
}

/* NEW: Styles for the referrals list table */
.referrals-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.referrals-table th,
.referrals-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  font-family: monospace;
}

.referrals-table th {
  background-color: #f2f2f2;
  color: #333;
}

/* NEW: Styles for social media icons */
#community-links ul {
  align-items: center; /* Vertically align icons */
}

.social-icon-link svg {
  width: 32px;
  height: 32px;
  fill: #31708f; /* Match the theme's heading color */
  transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.social-icon-link:hover svg {
  fill: #007bff; /* A brighter blue on hover */
  transform: scale(1.1);
}

/* Styles moved from HTML files */
#community-links a svg {
  transition: transform 0.2s ease-in-out;
  width: 36px;
  height: 36px;
}
#community-links a:hover svg {
  transform: scale(1.2);
}
/* Increase size of Nostr icon specifically */
.link-list a[title="Nostr"] img {
  width: 42px;
  height: 42px;
}

/* Dashboard-specific styles */
body.dashboard-page {
  background-color: #1a1a1d;
  color: #c5c6c7;
}
.dashboard-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem 2rem 2rem;
  background: #2a2a2e;
  border-radius: 8px;
}
.stat-card {
  background: #333;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
}
.stat-card h3 {
  margin-top: 0;
  color: #66fcf1;
  font-size: 1.2rem;
}
.stat-card .value {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
}
.stat-card .conversion {
  font-size: 1rem;
  color: #a0a0a0;
  margin-top: 0.5rem;
}
.funnel-arrow {
  text-align: center;
  font-size: 2rem;
  color: #4b5263;
  margin: -0.5rem 0;
}
.dashboard-page hr {
  border-color: #4b5263;
  margin: 2rem 0;
}
.filter-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.filter-controls label {
  font-weight: bold;
}
.filter-controls input,
.filter-controls select,
.filter-controls button {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #4b5263;
  background: #333;
  color: #c5c6c7;
}

/* Styles for the active users indicator */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #2ecc71; /* green */
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}