/* Shared Wordle-family board + keyboard styles (forest / lemonade) */

[data-theme="lemonade"] {
  --su: 64.8% 0.150 160;
  --suc: 0% 0 0;
  --wa: 84.71% 0.199 83.87;
  --wac: 0% 0 0;
  --n: 30.6985% 0.039032 171.364646;
  --nc: 86.1397% 0.007806 171.364646;
}

.game-header.navbar { min-height: 2.75rem; }
.game-header .btn { height: 2.25rem; min-height: 2.25rem; }
.game-header .btn-ghost.text-xl { font-size: 1.1rem; }

.game-stack { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.tile {
  width: min(12vw, 3rem);
  height: min(12vw, 3rem);
  min-width: 2.15rem;
  min-height: 2.15rem;
  font-size: clamp(0.9rem, 3.6vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  border-radius: 0.375rem;
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.tile-empty { border-color: oklch(var(--bc) / 0.2); background: transparent; }
.tile-filled { border-color: oklch(var(--bc) / 0.45); }
.tile-active { outline: 2px solid oklch(var(--p)); outline-offset: 1px; }
.tile-pop { animation: wg-pop 0.1s ease-in-out; }
@keyframes wg-pop { 50% { transform: scale(1.08); } }

.tile-sm {
  width: min(9vw, 2.25rem);
  height: min(9vw, 2.25rem);
  min-width: 1.6rem;
  min-height: 1.6rem;
  font-size: clamp(0.7rem, 2.8vw, 1rem);
}

.kb-key {
  min-width: 1.5rem;
  min-height: 2.35rem;
  height: 2.35rem;
  padding: 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  flex: 1 1 0;
  max-width: 2.25rem;
}
.kb-key-wide {
  min-width: 2.75rem;
  max-width: 4rem;
  flex: 1.5 1 0;
  font-size: 0.65rem;
}

.shake { animation: wg-shake 0.4s ease-in-out; }
@keyframes wg-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

#message, .wg-message { min-height: 1.25rem; margin-bottom: 0.35rem; font-size: 0.8rem; }
#keyboard, .wg-keyboard { gap: 0.3rem; }

@media (min-width: 480px) {
  .tile {
    width: min(13vw, 3.25rem);
    height: min(13vw, 3.25rem);
    min-width: 2.4rem;
    min-height: 2.4rem;
    font-size: clamp(1rem, 3.8vw, 1.4rem);
  }
  .tile-sm {
    width: min(10vw, 2.5rem);
    height: min(10vw, 2.5rem);
    min-width: 1.85rem;
    min-height: 1.85rem;
    font-size: clamp(0.8rem, 3vw, 1.1rem);
  }
  .kb-key { min-height: 2.85rem; height: 2.85rem; font-size: 0.85rem; max-width: 2.6rem; }
  .kb-key-wide { min-width: 3.5rem; max-width: 5rem; }
}

@media (max-height: 740px) {
  .tile {
    width: min(11vw, 2.65rem);
    height: min(11vw, 2.65rem);
    min-width: 2rem;
    min-height: 2rem;
    font-size: clamp(0.85rem, 3.2vw, 1.15rem);
  }
  .kb-key { min-height: 2.1rem; height: 2.1rem; font-size: 0.7rem; }
}

/* Multi-board (Dordle / Quordle) */
.multi-boards {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  margin-bottom: 0.5rem;
}
.multi-boards.boards-2 {
  grid-template-columns: 1fr;
}
.multi-boards.boards-4 {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 640px) {
  .multi-boards.boards-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.board-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.board-panel.solved {
  opacity: 0.85;
}

/* Connections */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 36rem;
  margin: 0 auto;
}
.conn-word {
  min-height: 3.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  padding: 0.4rem 0.25rem;
  border-radius: 0.5rem;
  border: 2px solid oklch(var(--bc) / 0.15);
  background: oklch(var(--b2));
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  word-break: break-word;
}
.conn-word:hover { border-color: oklch(var(--p) / 0.5); }
.conn-word.selected {
  background: oklch(var(--p) / 0.25);
  border-color: oklch(var(--p));
  transform: scale(0.97);
}
.conn-word:disabled { cursor: default; opacity: 0.5; }
.conn-solved {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.conn-solved .conn-words { font-size: 0.8rem; font-weight: 500; opacity: 0.9; margin-top: 0.15rem; }
.conn-level-0 { background: #f9df6d; color: #1a1a1a; } /* yellow */
.conn-level-1 { background: #a0c35a; color: #1a1a1a; } /* green */
.conn-level-2 { background: #b0c4ef; color: #1a1a1a; } /* blue */
.conn-level-3 { background: #ba81c5; color: #1a1a1a; } /* purple */

/* Waffle */
.waffle-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  max-width: 18rem;
  margin: 0 auto 0.75rem;
}
.waffle-cell {
  aspect-ratio: 1;
  font-size: clamp(0.95rem, 4vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 2px solid transparent;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.waffle-cell.hole {
  visibility: hidden;
  pointer-events: none;
  border: none;
  cursor: default;
}
.waffle-cell.selected {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}
.waffle-cell.dragging { opacity: 0.55; }