/* Shockword — board-specific styles (chrome comes from /games/puzzle.css) */
.sw-grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  width: min(88vw, 330px);
  aspect-ratio: 5 / 6;
  margin: 0 auto;
}
.sw-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sw-tile {
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-bright);
  border-radius: 8px;
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(22px, 7vw, 32px);
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  transition: transform 0.1s, background 0.2s, border-color 0.2s;
}
.sw-tile.filled { border-color: var(--text-muted); animation: swPop 0.1s ease-out; }
@keyframes swPop { 0% { transform: scale(0.9); } 100% { transform: scale(1); } }
.sw-tile.correct { background: linear-gradient(135deg,#7FDB2E,#5BC020); border-color: #5BC020; color: #08210F; }
.sw-tile.present { background: linear-gradient(135deg,#F4C430,#D9A410); border-color: #D9A410; color: #2A1F00; }
.sw-tile.absent { background: #16241A; border-color: #16241A; color: #6E7C68; }
.sw-tile.reveal { animation: swFlip 0.5s ease; }
@keyframes swFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.sw-msg { min-height: 20px; font-size: 13px; font-weight: 700; color: var(--gold); text-align: center; }

.sw-keyboard { display: flex; flex-direction: column; gap: 6px; width: min(96vw, 500px); margin: 0 auto; }
.sw-krow { display: flex; justify-content: center; gap: 5px; }
.sw-key {
  flex: 1 1 auto; min-width: 0;
  height: 46px;
  border-radius: 7px;
  border: none;
  background: #263524;
  color: var(--text);
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.06s;
}
.sw-key:active { transform: scale(0.94); }
.sw-key.wide { flex: 1.5 1 auto; font-size: 11px; }
.sw-key.correct { background: #5BC020; color: #08210F; }
.sw-key.present { background: #D9A410; color: #2A1F00; }
.sw-key.absent { background: #131C13; color: #55604F; }
@media (max-width: 400px) { .sw-key { height: 42px; font-size: 13px; } }