/* =================================
   HANSBARD - HOUSE OF COMMONS INSPIRED STYLING
   Authentic parliamentary design language
   ================================= */

/* Import serif fonts - using free, globally available options */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap");

/* =================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Based on House of Commons color palette
   ================================= */
:root {
  /* Primary Commons Colors */
  --commons-green: #355e3b; /* Deep forest green - primary institutional color */
  --commons-green-light: #4a7c59; /* Lighter green for hover states */
  --commons-green-dark: #2c4e32; /* Darker green for emphasis */

  /* Accent Colors */
  --parliamentary-gold: #d4af37; /* Gold accents for ornamental details */
  --brass: #b5a642; /* Brass tone for secondary accents */

  /* Neutral Parliamentary Tones */
  --stone-white: #f8f6f0; /* Aged stone color for background */
  --oak-brown: #8b4513; /* Oak panelling inspiration */
  --text-black: #1a1a1a; /* High contrast black for text */
  --border-grey: #d3d3d3; /* Light grey for subtle borders */
  --success-green: #228b22; /* For correct answers */
  --error-red: #b22222; /* For incorrect answers */

  /* Typography weights */
  --font-light: 300;
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;
}

/* =================================
   RESET & BASE STYLES
   Clean foundation for parliamentary styling
   ================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Primary serif font for institutional gravitas */
  font-family: "Crimson Text", "Times New Roman", Times, serif;
  background: var(--stone-white);
  color: var(--text-black);
  line-height: 1.6;
  font-weight: var(--font-regular);
}

/* =================================
   HEADER - PARLIAMENTARY TITLE AREA
   Formal, centered layout with Commons green accent
   ================================= */
header {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  /* Green bottom border echoing Commons chamber design */
  border-bottom: 3px solid var(--commons-green);
  margin-bottom: 2rem;
  background: linear-gradient(to bottom, var(--stone-white) 0%, #f0ede3 100%);
}

/* Main title - authoritative serif styling */
h1 {
  font-family: "Crimson Text", "Times New Roman", Times, serif;
  font-size: 3rem;
  font-weight: var(--font-bold);
  color: var(--commons-green);
  margin-bottom: 0.5rem;
  /* Subtle text shadow for institutional weight */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

/* Subtitle - formal descriptor */
header p {
  font-size: 1.2rem;
  color: var(--text-black);
  opacity: 0.8;
  font-weight: var(--font-regular);
  font-style: italic;
}

/* =================================
   MAIN CONTENT AREA
   Centered, readable layout for game content
   ================================= */
main {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

/* =================================
   RESPONSIVE DESIGN
   Ensure readability on all devices
   ================================= */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }

  header {
    padding: 2rem 1rem 1.5rem;
  }

  header p {
    font-size: 1.1rem;
  }
}

/* =================================
   UTILITY CLASSES
   Reusable styling components for future game elements
   ================================= */

/* Commons green button style (for future use) */
.btn-commons {
  background: var(--commons-green);
  color: var(--stone-white);
  border: 2px solid var(--commons-green);
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-weight: var(--font-semibold);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-commons:hover {
  background: var(--commons-green-light);
  border-color: var(--commons-green-light);
}

/* Gold accent text (for theme reveals, etc.) */
.text-gold {
  color: var(--parliamentary-gold);
}
/* =================================
   GAME LAYOUT STYLES
   Professional parliamentary game interface
   ================================= */

/* Progress Tracker - horizontal layout */
.progress-tracker {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Individual round boxes */
.round-box {
  width: 50px;
  height: 50px;
  border: 2px solid var(--border-grey);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  background: var(--stone-white);
  transition: all 0.3s ease;
}

/* Current round highlighting - FIXED: now shows as outline, not filled */
.round-box.current {
  border-color: var(--commons-green);
  border-width: 3px; /* Thicker border */
  background: var(--stone-white); /* Keep background light */
  color: var(--commons-green); /* Green text */
  box-shadow: 0 0 10px rgba(53, 94, 59, 0.3); /* Subtle glow */
}
/* ADDED: Correct answer styling - green background */
.round-box.correct {
  background: var(--success-green);
  border-color: var(--success-green);
  color: white;
  box-shadow: 0 0 8px rgba(34, 139, 34, 0.4);
}

/* ADDED: Incorrect answer styling - red background */
.round-box.incorrect {
  background: var(--error-red);
  border-color: var(--error-red);
  color: white;
  box-shadow: 0 0 8px rgba(178, 34, 34, 0.4);
}

/* =================================
   MOBILE RESPONSIVE STYLES
   Optimized for phones and small tablets
   ================================= */

@media (max-width: 768px) {
  /* Make progress boxes smaller with less gap on mobile */
  .progress-tracker {
    gap: 0.5rem; /* Smaller gap between boxes */
  }

  .round-box {
    width: 40px; /* Smaller boxes */
    height: 40px;
    font-size: 0.9rem; /* Slightly smaller text */
  }

  /* Stack word cards vertically on mobile */
  .word-chain {
    flex-direction: column; /* Stack vertically instead of horizontal */
    gap: 1rem; /* Smaller gap between elements */
  }

  /* Hide the arrow on mobile - we don't need it when stacked */
  .arrow {
    display: none;
  }

  /* Make word cards full width on mobile */
  .word-card {
    min-width: 80%; /* Take up most of the screen width */
    max-width: 280px; /* But not too wide */
  }

  /* Make buttons more mobile-friendly */
  .choice-buttons {
    gap: 1rem; /* Less gap between buttons */
  }

  .choice-btn {
    padding: 12px 25px; /* Slightly smaller padding on mobile */
    min-width: 120px; /* Slightly narrower */
    font-size: 14px; /* Slightly smaller text */
  }

  /* Make question text slightly smaller on mobile */
  .question {
    font-size: 1.1rem;
    padding: 0 1rem; /* Add some padding so text doesn't touch edges */
  }
}

.game-area {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  padding: 16px;
  border-radius: 0;
  margin: 0 auto;
  max-width: 600px;
  box-shadow: none;
}

/* Word chain - side by side layout */
.word-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Individual word cards */
.word-card {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  padding: 12px 16px;
  min-width: 160px;
  text-align: center;
  font-family: "MS Sans Serif", sans-serif;
  border-radius: 0;
}

/* Unknown word card styling */
.word-card.unknown {
  border-color: var(--border-grey);
  background: #f0f0f0;
}

/* Word text styling */
.word-text {
  font-size: 1.5rem;
  font-weight: var(--font-bold);
  margin-bottom: 0.5rem;
  color: var(--commons-green);
}

.word-count {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Arrow between words */
.arrow {
  font-size: 2rem;
  color: var(--commons-green);
  font-weight: bold;
}

/* Complete the cut-off question style first */
.question {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  font-weight: var(--font-semibold);
  color: var(--text-black);
}

/* =================================
   90'S CIVIL SERVICE CRT BUTTONS
   Windows 95/98 inspired institutional computing
   ================================= */

.choice-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.choice-btn {
  /* Core CRT button structure */
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;

  /* Typography - chunky 90s feel */
  font-family: "MS Sans Serif", sans-serif;
  font-size: 16px; /* Bigger text */
  font-weight: bold;
  color: #000;
  text-align: center;

  /* Dimensions - MUCH bigger for prominence */
  padding: 15px 35px; /* Much bigger padding */
  min-width: 140px; /* Much wider */
  height: 45px; /* Much taller */

  /* No modern touches */
  border-radius: 0;
  cursor: pointer;
  transition: none;
  background-image: none;
}

.choice-btn:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #b8b8b8;
  transform: translate(1px, 1px);
}

.choice-btn:hover {
  background: #d4d0c8;
}

.choice-btn:disabled {
  background: #c0c0c0;
  color: #808080;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  cursor: default;
  transform: none;
}

.choice-btn:focus {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* =================================
   CRT SCREEN EFFECTS (OPTIONAL)
   ================================= */

.crt-effect {
  background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.02) 50%);
  background-size: 100% 4px;
  border-radius: 8px;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
}

/* =================================
help button styling
================================= */
.help-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  border-radius: 0;
  cursor: pointer;
  margin-left: 10px;
}

/* =================================
   WINDOWS 95 MODAL DIALOG STYLING
   Authentic dialog box appearance
   ================================= */

/* Modal overlay - covers entire screen when modal is open */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 1000; /* Appears above everything else */
}

/* The actual modal window - Windows 95 dialog box */
.modal-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the modal */
  width: 480px;
  max-width: 90vw; /* Responsive on mobile */
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf; /* Windows 95 raised border */
  font-family: "MS Sans Serif", sans-serif;
}

/* Windows 95 Title Bar */
.modal-title-bar {
  background: linear-gradient(to right, #0052cc, #0066ff);
  color: white;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: bold;
}

.modal-title-text {
  padding-left: 4px;
}

/* Close button in title bar */
.modal-close-btn {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  width: 16px;
  height: 14px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  font-family: "MS Sans Serif", sans-serif;
  color: #000;
}

.modal-close-btn:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
}

/* Modal body content */
.modal-body {
  padding: 16px;
  background: #c0c0c0;
}

.modal-section {
  margin-bottom: 16px;
}

.modal-section h3 {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #000;
  font-family: "MS Sans Serif", sans-serif;
}

.modal-section p {
  font-size: 11px;
  line-height: 1.4;
  color: #000;
  font-family: "MS Sans Serif", sans-serif;
  margin: 0;
}

/* Show modal when it has 'show' class */
.modal-overlay.show {
  display: block;
}

/* =================================
   WEEKEND EDITION STYLING
   Special colors and styling for weekend games
   ================================= */

/* Change header to warm oak brown on weekends */
.weekend-edition header {
  border-bottom-color: var(--oak-brown);
}

/* Change main title to oak brown */
.weekend-edition h1 {
  color: var(--oak-brown);
}

/* Change word text from green to oak brown */
.weekend-edition .word-text {
  color: var(--oak-brown);
}

/* Change arrow to oak brown */
.weekend-edition .arrow {
  color: var(--oak-brown);
}

/* Change current round box border to oak brown */
.weekend-edition .round-box.current {
  border-color: var(--oak-brown);
  color: var(--oak-brown);
  box-shadow: 0 0 10px rgba(139, 69, 19, 0.3); /* Brown glow */
}

/* Update the weekend badge styling */
.weekend-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 3px 8px; /* Slightly more padding */
  background: var(--oak-brown);
  color: var(--stone-white);
  font-size: 0.65rem; /* Tiny bit smaller */
  font-weight: bold;
  font-family: "MS Sans Serif", sans-serif;
  border: 1px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  letter-spacing: 0.3px; /* Tighter spacing */
}