.word-builder-screen {
  background:
    radial-gradient(circle at 10% 14%, rgba(255, 207, 86, .3), transparent 18rem),
    radial-gradient(circle at 88% 20%, rgba(109, 227, 179, .3), transparent 18rem),
    linear-gradient(145deg, #fff8e7, #f1fbff);
}

.word-builder-mode {
  display: grid;
  min-width: 76px;
  min-height: 54px;
  padding: 7px 12px;
  place-items: center;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(39,50,72,.12);
  font-weight: 900;
  white-space: nowrap;
}

.word-builder-picture {
  display: grid;
  width: min(72vw, 350px);
  height: min(30vh, 220px);
  min-height: 130px;
  margin: 0 auto;
  padding: 10px;
  place-items: center;
  border: 6px solid rgba(255,255,255,.94);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}

.word-builder-picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.word-builder-picture .spec-emoji {
  font-size: min(20vh, 8rem);
}

.word-builder-instruction {
  margin: -5px 0 0;
  color: var(--muted);
  font-size: clamp(.82rem, 3vw, 1rem);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.word-builder-answer,
.word-builder-tiles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
  min-width: 0;
}

.word-builder-answer {
  min-height: 72px;
  padding: 8px 12px;
  border: 5px solid rgba(114,201,255,.48);
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 3px 8px rgba(39,50,72,.06);
}

.word-builder-slot {
  display: grid;
  width: clamp(36px, 9vw, 64px);
  height: clamp(48px, 11vw, 70px);
  flex: 0 1 64px;
  place-items: center;
  border-bottom: 5px solid rgba(39,50,72,.25);
  color: var(--ink);
  font-size: clamp(1.7rem, 7vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.word-builder-slot.filled {
  border-color: var(--mint);
  animation: builderPop 180ms ease-out;
}

.word-builder-tiles {
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: center;
}

.word-builder-tile {
  display: grid;
  width: clamp(54px, 14vw, 86px);
  height: clamp(58px, 14vw, 86px);
  place-items: center;
  border: 5px solid rgba(255,255,255,.94);
  border-radius: 20px;
  color: var(--ink);
  cursor: pointer;
  background: linear-gradient(155deg, #fff6bd, #ffd56c);
  box-shadow: 0 8px 0 rgba(194,139,28,.18), 0 13px 22px rgba(39,50,72,.1);
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
}

.word-builder-tile.used:disabled {
  visibility: hidden;
}

.word-builder-tile.wrong:disabled {
  filter: grayscale(.85);
  opacity: .3;
  animation: builderShake 260ms ease;
}

@keyframes builderPop {
  from { transform: scale(.55); opacity: .3; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes builderShake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-6px); }
  70% { transform: translateX(6px); }
}

@media (max-width: 760px) {
  .word-builder-picture { width: min(78vw, 310px); height: min(27vh, 185px); min-height: 110px; }
  .word-builder-answer { min-height: 62px; padding-inline: 7px; }
  .word-builder-tiles { gap: 8px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .word-builder-picture { width: min(31vw, 240px); height: min(29vh, 145px); min-height: 92px; }
  .word-builder-instruction { display: none; }
  .word-builder-answer { min-height: 54px; }
  .word-builder-slot { height: 48px; font-size: 1.8rem; }
  .word-builder-tile { width: 58px; height: 55px; font-size: 2rem; }
}