/* Basic reset and typography */
/* CSS variables for theming. Default (dark theme) values are defined here.
   When body has the class .light-theme, overrides are provided below. */
:root {
  --bg-color: #121212;
  --text-color: #ffffff;
  --cell-unknown-bg: #3a3a3c;
  --cell-unknown-border: #3a3a3c;
  --cell-unknown-color: #ffffff;
  --cell-present-bg: #b59f3b;
  --cell-present-border: #b59f3b;
  --cell-present-color: #ffffff;
  --cell-correct-bg: #538d4e;
  --cell-correct-border: #538d4e;
  --cell-correct-color: #ffffff;
  --suggestion-bg: #2a2a2c;
  --suggestion-border: #3a3a3c;
}

body.light-theme {
  --bg-color: #fafafa;
  --text-color: #333333;
  --cell-unknown-bg: #d3d6da;
  --cell-unknown-border: #d3d6da;
  --cell-unknown-color: #000000;
  --cell-present-bg: #c9b458;
  --cell-present-border: #c9b458;
  --cell-present-color: #ffffff;
  --cell-correct-bg: #6aaa64;
  --cell-correct-border: #6aaa64;
  --cell-correct-color: #ffffff;
  --suggestion-bg: #efefef;
  --suggestion-border: #dddddd;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

header {
  width: 100%;
  max-width: 600px;
  /* Use flexbox so that the title and control bar sit beside each other on
     larger screens.  These items can wrap onto multiple lines when the
     viewport becomes narrow.  On small screens the layout will switch to
     a column so the controls appear beneath the title rather than being
     pushed off screen. */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

header h1 {
  font-size: 2rem;
  margin: 0;
}

/* Controls container for toggles and buttons */
.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Individual toggle grouping label + switch */
/*
 * Layout for the toggle group.  The `gap` property controls the spacing
 * between the slider component and its text label.  The label itself
 * stays on a single line via `white-space: nowrap;` so that the knob
 * never overlaps the text when the switch is tapped on mobile devices.
 */
.toggle {
  display: flex;
  align-items: center;
  /* Provide enough space between the switch and its label to avoid
     overlapping.  Increasing this value helps on small screens. */
  gap: 8px;
  font-size: 0.9rem;
}

.toggle .label {
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* On very small screens, increase the gap slightly and reduce font size
     so that the toggle contents fit comfortably without overlap. */
  .toggle {
    gap: 10px;
  }
  .toggle .label {
    font-size: 0.85rem;
  }
}

/* Responsive layout adjustments for the header on narrow screens.  When the
   viewport width is below 600px, stack the title above the controls and
   allow the control elements themselves to wrap onto multiple lines.  This
   prevents the clear button from being pushed off the screen. */
@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  .controls {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
    gap: 8px;
  }
  .clear-button {
    /* Allow the clear button to grow so it doesn’t wrap on its own */
    flex: 1 0 auto;
  }
}

/* Clear button styling */
.clear-button {
  padding: 6px 10px;
  font-size: 0.85rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #888;
  color: #fff;
}

.clear-button:hover {
  background-color: #777;
}

/* Toggle switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: #4caf50;
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

main {
  width: 100%;
  max-width: 600px;
}

#board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.row {
  display: flex;
  gap: 4px;
}

.cell {
  width: 50px;
  height: 50px;
  border: 2px solid var(--cell-unknown-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  user-select: none;
  background-color: var(--cell-unknown-bg);
  color: var(--cell-unknown-color);
}

/* Color states matching Wordle */
.cell.unknown {
  background-color: var(--cell-unknown-bg);
  border-color: var(--cell-unknown-border);
  color: var(--cell-unknown-color);
}

.cell.present {
  background-color: var(--cell-present-bg);
  border-color: var(--cell-present-border);
  color: var(--cell-present-color);
}

.cell.correct {
  background-color: var(--cell-correct-bg);
  border-color: var(--cell-correct-border);
  color: var(--cell-correct-color);
}

#message {
  min-height: 24px;
  margin-top: 8px;
  color: #d32f2f;
  font-size: 0.9rem;
  text-align: center;
}

#suggestions-section {
  margin-top: 24px;
}

#suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
}

#suggestions li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--suggestion-bg);
  border: 1px solid var(--suggestion-border);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 1rem;
  margin-bottom: 6px;
}

/* On-screen keyboard styles */
#keyboard {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.key {
  flex: 1;
  padding: 8px 6px;
  min-width: 28px;
  border: 1px solid var(--cell-unknown-border);
  border-radius: 4px;
  background-color: var(--cell-unknown-bg);
  color: var(--cell-unknown-color);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  /* Enable immediate tap behaviour on touch devices and prevent double‑tap zoom */
  touch-action: manipulation;
}
.key.special {
  flex: 1.5;
  font-size: 0.9rem;
}
.key:active {
  background-color: var(--cell-present-bg);
  border-color: var(--cell-present-border);
  color: var(--cell-present-color);
}

/* Responsive adjustments for the on-screen keyboard on small screens */
@media (max-width: 480px) {
  .key {
    padding: 6px 4px;
    font-size: 0.8rem;
  }
  .key.special {
    font-size: 0.75rem;
  }
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.6rem;
  }
  .cell {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
  .clear-button {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}