/*
 * Overlay styles — edit in /data/overlay/styles.css (Docker volume).
 * Tile states: .tile.correct | .tile.present | .tile.absent
 * Keyboard keys: .key.correct | .key.present | .key.absent
 */

:root {
  --tile-size: 72px;
  --tile-gap: 8px;

  --bg: #121214;
  --bg-elevated: #1a1a1e;
  --border: #2f2f35;
  --border-strong: #3d3d44;

  --text: #e8e8ec;
  --text-muted: #8b8b95;

  --correct: #538d4e;
  --present: #b59f3b;
  --absent: #3a3a3c;
  --key-idle: #1a1a1e;
  --key-idle-border: #2f2f35;
}

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

body {
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-frame {
  padding: 16px 18px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.overlay-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.overlay-guesses {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: var(--tile-gap);
}

.row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--tile-gap);
}

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border-radius: 4px;
  transition: transform 0.4s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.tile.filled {
  border-color: var(--border-strong);
  animation: pop 0.1s ease;
}

.tile.reveal {
  animation: flip 0.5s ease forwards;
}

.tile.correct {
  background-color: var(--correct);
  border-color: var(--correct);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.12) 4px,
    transparent 4px,
    transparent 8px
  );
}

.tile.present {
  background-color: var(--present);
  border-color: var(--present);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.12) 3px,
    transparent 3px,
    transparent 6px
  );
}

.tile.absent {
  background: var(--absent);
  border-color: var(--absent);
}

.tile .letter {
  opacity: 0;
}

.tile.reveal .letter {
  animation: fadeIn 0.2s ease 0.25s forwards;
}

.toast {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
}

.status-banner {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--correct);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
}

.hidden {
  display: none !important;
}

.keyboard {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

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

.key {
  min-width: 32px;
  padding: 6px 7px;
  border-radius: 4px;
  border: 1px solid var(--key-idle-border);
  background: var(--key-idle);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.key.correct {
  background-color: var(--correct);
  border-color: var(--correct);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.12) 4px,
    transparent 4px,
    transparent 8px
  );
}

.key.present {
  background-color: var(--present);
  border-color: var(--present);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.12) 3px,
    transparent 3px,
    transparent 6px
  );
}

.key.absent {
  background: var(--absent);
  border-color: var(--absent);
  color: var(--text-muted);
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}