/* Word Scramble — own styles, theme variables only. */

.ws {
  width: 100%;
  max-width: 640px;
}

.ws-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.ws-stat {
  min-width: 0;
  padding: 8px 10px 6px;
  text-align: center;
  border-radius: 10px;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
}

.ws-stat b {
  display: block;
  font: 500 1.3rem/1.15 var(--gm-display, "Fraunces", Georgia, serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ws-lab {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gm-muted, rgba(242, 238, 230, 0.66));
}

.ws-play {
  padding: 22px 18px 18px;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  border-radius: var(--gm-radius, 12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.ws-answer,
.ws-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
}

.ws-answer {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--gm-line-2, rgba(255, 255, 255, 0.16));
}

.ws-space,
.ws-tile {
  appearance: none;
  -webkit-appearance: none;
  width: 52px;
  height: 56px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  font: 600 1.5rem/1 var(--gm-display, "Fraunces", Georgia, serif);
  text-transform: uppercase;
  color: var(--gm-text, #f2eee6);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.ws-tile {
  background: var(--gm-bg-2, #131c2b);
  border: 1px solid var(--gm-line-2, rgba(255, 255, 255, 0.16));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.ws-tile:hover:not(:disabled) {
  border-color: var(--gm-accent-bright, #e0584a);
  transform: translateY(-2px);
}

.ws-tile.is-used {
  background: transparent;
  border-style: dashed;
  color: transparent;
  box-shadow: none;
  cursor: default;
}

.ws-tile:disabled:not(.is-used) {
  opacity: 0.5;
  cursor: default;
}

.ws-space {
  background: transparent;
  border: 2px dashed var(--gm-line-2, rgba(255, 255, 255, 0.16));
  cursor: default;
}

.ws-space.is-filled {
  background: var(--gm-accent, #c0392b);
  border: 2px solid var(--gm-accent, #c0392b);
  color: #fff;
  cursor: pointer;
}

.ws-space.is-filled:hover:not(:disabled) {
  background: var(--gm-accent-bright, #e0584a);
  border-color: var(--gm-accent-bright, #e0584a);
}

.ws-space.is-locked {
  background: var(--gm-surface-2, #22304a);
  border-color: var(--gm-accent-line, rgba(192, 57, 43, 0.42));
  color: var(--gm-text, #f2eee6);
  cursor: default;
}

.ws-space.is-solved {
  background: var(--gm-ws-good, #2e9e6b);
  border-color: var(--gm-ws-good, #2e9e6b);
  color: #fff;
  animation: ws-pop 0.4s ease-out;
}

.ws-space.is-shown {
  background: var(--gm-surface-2, #22304a);
  border-color: var(--gm-line-2, rgba(255, 255, 255, 0.16));
  color: var(--gm-text, #f2eee6);
}

.ws-space:focus-visible,
.ws-tile:focus-visible {
  outline: 3px solid var(--gm-accent-bright, #e0584a);
  outline-offset: 2px;
}

.ws-answer.is-shake { animation: ws-shake 0.4s ease; }

.ws-clue {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--gm-bg-2, #131c2b);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  color: var(--gm-text, #f2eee6);
}

.ws-clue .gm-label { margin: 0 0 4px; }

.ws-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ws-tools .gm-btn {
  flex: 1 1 auto;
  min-height: 44px;
}

.ws-lvhint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--gm-muted, rgba(242, 238, 230, 0.66));
}

#gm-word-scramble .gm-status { margin-top: 12px; }

@keyframes ws-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes ws-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@media (max-width: 480px) {
  .ws-bar { gap: 6px; }
  .ws-stat { padding: 8px 4px 6px; }
  .ws-stat b { font-size: 1.1rem; }
  .ws-lab { font-size: 0.56rem; letter-spacing: 0.1em; }
  .ws-play { padding: 16px 12px 12px; }
  .ws-answer, .ws-rack { gap: 6px; }
  .ws-space, .ws-tile { width: 46px; height: 50px; font-size: 1.3rem; }
  .ws-tools .gm-btn { flex: 1 1 calc(50% - 4px); padding: 10px 8px; }
  .gm-actions .gm-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-space, .ws-tile { transition: none; }
  .ws-space.is-solved, .ws-answer.is-shake { animation: none; }
}

.gm-seg button, .gm-actions .gm-btn { min-height: 44px; }