/* Word guess — own styles, theme tokens only. */

.wg {
  width: 100%;
  max-width: 560px;
}

.wg-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  border-radius: var(--gm-radius, 12px);
}

.wg-house {
  flex: none;
  width: 120px;
  height: auto;
  overflow: visible;
}

.wg-ground { fill: var(--gm-line-2, rgba(255, 255, 255, 0.16)); }

.wg-brick {
  fill: none;
  stroke: var(--gm-line-2, rgba(255, 255, 255, 0.16));
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
  transition: fill 0.45s ease, stroke 0.45s ease;
}

.wg-brick * { fill: inherit; stroke: inherit; stroke-dasharray: inherit; }

.wg-brick.is-built { stroke: var(--gm-bg, #0f1520); stroke-width: 1; stroke-dasharray: none; }
.wg-b1.is-built, .wg-b3.is-built, .wg-b6.is-built { fill: var(--gm-accent, #c0392b); }
.wg-b2.is-built, .wg-b4.is-built { fill: var(--gm-text, #f2eee6); }
.wg-b5.is-built { fill: var(--gm-surface-2, #22304a); stroke: var(--gm-text, #f2eee6); }
.wg-b5.is-built .wg-lamp { fill: var(--gm-warm, #ffd25a); }

.wg-beam { fill: var(--gm-warm, #ffd25a); opacity: 0; transition: opacity 0.6s ease; }
.wg.is-won .wg-beam { opacity: 0.42; }
.wg.is-won .wg-brick { fill-opacity: 1; }

.wg-info { min-width: 0; flex: 1; }

.wg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.wg-row b {
  font: 500 1.15rem/1.2 var(--gm-display, "Fraunces", Georgia, serif);
  text-align: right;
}

.wg-info .gm-btn { min-height: 44px; width: 100%; margin-top: 4px; touch-action: manipulation; }

.wg-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 4px;
  min-height: 56px;
}

.wg-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 9.5vw, 46px);
  height: clamp(40px, 12vw, 56px);
  border-bottom: 3px solid var(--gm-text, #f2eee6);
  font: 600 clamp(1.4rem, 5.6vw, 2rem)/1 var(--gm-display, "Fraunces", Georgia, serif);
  text-transform: uppercase;
  color: var(--gm-text, #f2eee6);
}

.wg-slot.is-hinted { color: var(--gm-accent-bright, #e0584a); }
.wg-slot.is-missed { color: var(--gm-muted, rgba(242, 238, 230, 0.66)); border-bottom-color: var(--gm-accent-bright, #e0584a); }
.wg-slot.is-pop { animation: wg-pop 0.28s ease; }

@keyframes wg-pop {
  0% { transform: translateY(6px); opacity: 0.3; }
  100% { transform: none; opacity: 1; }
}

.wg .gm-status { margin-top: 14px; flex-wrap: wrap; }
.wg .gm-status .wg-next { margin-left: auto; min-height: 44px; }
.wg .gm-status .wg-next[hidden] { display: none; }

.wg-keys {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 420px;
  margin: 16px auto 0;
}

.wg-key {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  min-height: 46px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--gm-line-2, rgba(255, 255, 255, 0.16));
  background: var(--gm-surface, #1b2740);
  color: var(--gm-text, #f2eee6);
  font: 600 1.05rem/1 var(--gm-body, "DM Sans", system-ui, sans-serif);
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.wg-key:hover { border-color: var(--gm-accent-bright, #e0584a); }
.wg-key:focus-visible { outline: 3px solid var(--gm-accent-bright, #e0584a); outline-offset: 2px; }
.wg-key[aria-disabled="true"] { cursor: default; }
.wg-key.is-hit { background: var(--gm-accent, #c0392b); border-color: var(--gm-accent, #c0392b); color: #fff; }
.wg-key.is-miss { opacity: 0.35; background: transparent; }
.wg-key:nth-child(n+22) { grid-column: auto; }
.wg-key:nth-child(22) { grid-column: 2; }

.gm-seg button { min-height: 40px; }
#wg-catpick { max-width: 100%; }

@media (max-width: 480px) {
  .wg-top { gap: 14px; padding: 12px 14px; }
  .wg-house { width: 96px; }
  .wg-keys { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-brick, .wg-beam, .wg-key { transition: none; }
  .wg-slot.is-pop { animation: none; }
}

#wg-catpick { border-radius: 16px; }

.wg.is-won .wg-b5 .wg-lamp { fill: var(--gm-warm, #ffd25a); stroke-dasharray: none; stroke: var(--gm-warm, #ffd25a); }
.wg.is-won .wg-beam { opacity: 0.6; }