/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Keyboard container internal styling */
#keyboard-container {
  background-color: transparent;
  border-radius: 8px;
  box-shadow: none;
  /* vertical padding only — horizontal clips the backspace key on narrow screens */
  padding: clamp(5px, 1.5vh, 20px) 0;
  gap: clamp(2px, 0.8vh, 8px);
}

/* Keyboard Row */
.keyboard-row {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: clamp(2px, 0.5vw, 6px);
}

.keyboard-row:last-child {
  max-width: 100%;
  width: 100%;
}

/* Individual Key Styles */
.key {
  /* key-size accounts for 200px sidebar; fits 10 keys + gaps in content area.
     Divisor 15 gives a safe margin for the 1.6x-wide backspace in the top row. */
  --key-size: clamp(28px, calc((100vw - 200px) / 15), 60px);
  flex: 1 1 0;
  min-width: var(--key-size);
  max-width: var(--key-size);
  aspect-ratio: 1 / 1;
  padding: 0 clamp(4px, 1.2vw, 14px);
  font-size: clamp(0.8rem, 2.8vw, 1.15rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #818384;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Remove focus outline */
.key:focus {
  outline: none;
}

/* Spacebar */
.key-spacebar {
  flex: 5 1 0;
  min-width: 0;
  max-width: calc(var(--key-size) * 5);
  aspect-ratio: unset;
  min-height: var(--key-size);
}

/* Wide keys: Shift and Backspace */
.key-wide {
  flex: 1.6 1 0;
  min-width: 0;
  /* inherit --key-size from .key so any context override propagates automatically */
  max-width: calc(var(--key-size) * 1.6);
  aspect-ratio: unset;
  font-size: clamp(0.8rem, 2.4vw, 1rem);
}

/* Shift key: normal colour by default (lowercase mode) */
.key-shift {}

/* Shift highlighted when caps is ON (uppercase active) */
.key-shift-active {
  background-color: #565758 !important;
  color: #cccccc !important;
}

/* Hover Effect */
.key:hover:not(:disabled):not(.pressed) {
  background-color: #9a9a9c;
  transform: scale(1.05);
  transition: transform 0.1s ease, background-color 0.1s ease;
}

/* Press Animation */
@keyframes pressAnimation {
  0% {
    transform: scale(1);
    background-color: #818384;
  }

  50% {
    transform: scale(0.9);
    background-color: #565758;
  }

  100% {
    transform: scale(1);
    background-color: #818384;
  }
}

.key.pressed {
  animation: pressAnimation 0.2s ease-in-out;
  pointer-events: none;
  animation-fill-mode: forwards;
}

/* Disabled State */
.key:disabled,
.key.disabled {
  background-color: #3a3a3c;
  color: #565758;
  cursor: not-allowed;
  opacity: 0.5;
}

.key:disabled:hover,
.key.disabled:hover {
  transform: none;
  background-color: #3a3a3c;
}

/* Special Key States (for future Wordle-like functionality) */
.key.correct {
  background-color: #538d4e;
}

.key.present {
  background-color: #b59f3b;
}

.key.absent {
  background-color: #3a3a3c;
}

/* Instructions */
.instructions {
  margin-top: 30px;
  padding: 20px;
  background-color: #1a1a1b;
  border-radius: 8px;
  max-width: 600px;
  text-align: center;
  line-height: 1.6;
}

.instructions h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #818384;
}

.instructions p {
  color: #818384;
  font-size: 0.9rem;
  margin: 5px 0;
}

.instructions code {
  background-color: #2d2d2e;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #d4d4d4;
}

/* ===========================
   Narrow-screen / mobile keyboard
   Row 1 has 10 keys; with flex-shrink row-1 keys end up smaller than
   row-3 keys (7 keys). Fix: pin min-width = max-width = --key-size
   (using a vw value sized to fit 10 keys) so every row is uniform.
   =========================== */
@media (max-width: 768px) {
  #keyboard-container {
    padding: clamp(2px, 0.8vh, 8px) 0;
    overflow-x: hidden;
    width: calc(100% + 32px);
    transform: translateX(-16px);
  }

  .keyboard-row {
    gap: 2px;
  }

  .key {
    --key-size: clamp(18px, calc((100vw - 28px) / 11.6), 40px);
    min-width: var(--key-size);
    max-width: var(--key-size);
    min-height: calc(var(--key-size) + 6px);
    height: calc(var(--key-size) + 6px);
    aspect-ratio: auto;
    padding: 0;
    font-size: clamp(0.9rem, 4vw, 1.2rem);
  }

  .key-spacebar {
    flex: 5 1 0;
    min-width: 0;
    max-width: calc(var(--key-size) * 5);
    min-height: calc(var(--key-size) + 6px);
  }

  .key-wide {
    max-width: calc(var(--key-size) * 1.6);
    min-width: calc(var(--key-size) * 1.6);
    min-height: calc(var(--key-size) + 6px);
    font-size: clamp(0.9rem, 3.6vw, 1.1rem);
  }
}

/* Ultra-narrow screens: tower column is now 36px, so keyboard fits normally. */
@media (max-width: 430px) {
  #keyboard-container {
    width: 100%;
    transform: none;
  }

  .key {
    --key-size: clamp(18px, calc((100vw - 48px) / 11.6), 40px);
  }
}