* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Lexend', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1a1a2e;
  padding: 10px;
  overflow-x: hidden;
}
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 500px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 5px;
}
.boards-icon {
  width: 36px;
  height: 36px;
  background: #008E97;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}
.boards-value {
  color: #008E97;
  font-size: 28px;
  font-weight: 900;
}
.score-value {
  color: #fff;
  font-size: 48px;
  font-weight: 900;
}
.score-target {
  color: #008E97;
  font-size: 24px;
}
.timer {
  color: #4a9eda;
  font-size: 48px;
  font-weight: 900;
}
.timer.warning { color: #FF9800; }
.timer.critical { color: #F44336; animation: pulse 0.5s ease-in-out infinite; }
canvas {
  border-radius: 16px;
  background: #16213e;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  touch-action: none;
}
.word-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.word-pill {
  padding: 10px 25px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.word-pill.visible { opacity: 1; }
.word-pill.selecting { background: rgba(255, 255, 255, 0.15); }
.word-pill.valid { background: #4CAF50; }
.word-pill.invalid { background: #F44336; }
.word-pill.duplicate { background: #FF9800; }
.word-pill.trap { background: #F44336; animation: shake 0.5s ease-in-out; }
.word-pill.overshoot { background: #F44336; animation: shake 0.5s ease-in-out; }
.word-pill.bonus { background: linear-gradient(135deg, #FF9800, #FFC107); animation: pulse 0.5s ease-in-out; }
.word-pill.timeout { background: #FF9800; }
.boards.winner { animation: pulse 0.5s ease-in-out; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}