html, body {
  overflow: hidden;
  overscroll-behavior: none;
}

.game {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0.75rem 1rem 1rem;
  gap: 1rem;
}

.game-head {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  font-size: 1.5rem;
  background: var(--c-tile);
  border-radius: var(--r-tile);
  text-decoration: none;
  color: var(--c-text);
  font-weight: 700;
  box-shadow: var(--shadow-tile);
  line-height: 1;
}

.back:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-tile-sm);
}

.prompt {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.4rem;
  font-family: inherit;
  text-align: center;
  margin: 0;
  font-size: clamp(1rem, 5vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
  background: var(--c-tile);
  padding: 0.7rem 0.9rem;
  border: none;
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
  cursor: pointer;
}

.prompt-icon {
  width: 1.7em;
  height: 1.7em;
  display: inline-block;
  vertical-align: middle;
  filter: grayscale(0.6) brightness(0.85);
  opacity: 0.75;
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.prompt-plus {
  font-weight: 700;
  color: var(--c-muted);
  margin: 0 0.1em;
  transition: color 0.18s ease;
}

.prompt-plus.is-speaking {
  color: var(--c-accent);
}

.prompt-word {
  color: var(--c-muted);
  white-space: nowrap;
  transition: color 0.18s ease, transform 0.18s ease;
}

.prompt-text {
  color: var(--c-muted);
  transition: color 0.18s ease, transform 0.18s ease;
}

.prompt-text.is-speaking,
.prompt-word.is-speaking {
  color: var(--c-accent);
  transform: scale(1.12);
}

.prompt-icon.is-speaking {
  transform: scale(1.25);
  filter: grayscale(0) brightness(1) drop-shadow(0 5px 0 var(--c-tile-shadow));
  opacity: 1;
}

.prompt-text { line-height: 1; }

.field {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--c-tile);
  border-radius: var(--r-tile-lg);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}

.item {
  position: absolute;
  width: clamp(48px, 14vw, 88px);
  height: clamp(48px, 14vw, 88px);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.18));
  transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.2s ease,
              left 0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
              top  0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 0.45s ease;
  will-change: transform;
}

.item.is-faded {
  opacity: 0;
  pointer-events: none;
}

/* Round transitions: items bobble out, then the new set bobbles in.
 * `forwards` on leaving keeps them at scale(0) until the round swaps. */
.item.is-leaving {
  animation: bobble-out 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.item.is-entering {
  animation: bobble-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bobble-out {
  0%   { transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1)) scale(1);                opacity: 1; }
  35%  { transform: translate3d(-50%, calc(-50% - 18px), 0) scaleX(var(--flip, 1)) scale(1.1); opacity: 1; }
  100% { transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1)) scale(0);                opacity: 0; }
}

@keyframes bobble-in {
  0%   { transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1)) scale(0);                opacity: 0; }
  60%  { transform: translate3d(-50%, calc(-50% - 6px), 0) scaleX(var(--flip, 1)) scale(1.2);  opacity: 1; }
  100% { transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1)) scale(1);                opacity: 1; }
}

/* Each item bobbles up + bounces back to its rest position when its number is
 * spoken. No persistent raised state — every item ends back where it started,
 * so the engine can re-highlight any item later (e.g. on replay). */
.item.is-pop {
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  0%   { transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1)) scale(1); }
  40%  { transform: translate3d(-50%, calc(-50% - 22px), 0) scaleX(var(--flip, 1)) scale(1.22); }
  70%  { transform: translate3d(-50%, calc(-50% + 4px), 0) scaleX(var(--flip, 1)) scale(0.95); }
  100% { transform: translate3d(-50%, -50%, 0) scaleX(var(--flip, 1)) scale(1); }
}

.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.num {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.08s ease;
  height: clamp(64px, 11vh, 100px);
}

.num img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.num.is-selected {
  transform: translateY(-6px) scale(1.08);
  filter: drop-shadow(0 6px 0 var(--c-tile-shadow));
}

.num:disabled { opacity: 0.5; }

.go {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: white;
  box-shadow: var(--shadow-button);
  cursor: pointer;
  align-self: stretch;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.go:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: var(--shadow-button-pressed);
}

.go:disabled {
  opacity: 0.55;
  cursor: default;
}

.feedback-counting .field {
  box-shadow: 0 8px 0 var(--c-success-shadow);
  background: var(--c-success);
}

.feedback-correct .field {
  box-shadow: 0 8px 0 var(--c-success-shadow);
  background: var(--c-success);
}

/* On wrong: their picked number stays highlighted in red so they see the diff. */
.feedback-wrong .field {
  box-shadow: 0 8px 0 var(--c-error-shadow);
  background: #fff3f3;
}

.feedback-wrong .num.is-selected {
  filter: drop-shadow(0 6px 0 var(--c-error-shadow));
}

/* === spelling-specific === */

.spelling .hero-icon {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 30vw, 200px);
  height: clamp(120px, 30vw, 200px);
  filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.18));
}

.spelling .hero-icon.is-leaving {
  animation: hero-bobble-out 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.spelling .hero-icon.is-entering {
  animation: hero-bobble-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hero-bobble-out {
  0%   { transform: translate(-50%, -50%) scale(1);                  opacity: 1; }
  35%  { transform: translate(-50%, calc(-50% - 18px)) scale(1.1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0);                  opacity: 0; }
}

@keyframes hero-bobble-in {
  0%   { transform: translate(-50%, -50%) scale(0);                  opacity: 0; }
  60%  { transform: translate(-50%, calc(-50% - 6px)) scale(1.18);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);                  opacity: 1; }
}

.spelling .spelled-out {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  width: min(90%, calc(var(--n, 4) * 80px));
  justify-content: center;
}

.spelling .spelled-letter {
  width: clamp(46px, 11vw, 72px);
  height: clamp(46px, 11vw, 72px);
  object-fit: contain;
  animation: spelled-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.spelling .spelled-letter.is-highlighted {
  transform: translateY(-8px) scale(1.18);
  filter: drop-shadow(0 6px 0 var(--c-accent-shadow));
}

@keyframes spelled-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.letters {
  /* Column count = number of tiles, capped at 7 so they don't get tiny. */
  display: grid;
  grid-template-columns: repeat(min(var(--n, 4), 7), 1fr);
  gap: 0.6rem;
  padding: 0 0.25rem;
  justify-content: center;
}

.letter {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.08s ease, filter 0.15s ease;
  height: clamp(64px, 14vh, 110px);
}

.letter img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.letter.is-selected {
  transform: translateY(-8px) scale(1.08);
  filter: drop-shadow(0 6px 0 var(--c-tile-shadow));
}

.letter:disabled { opacity: 0.55; }

.feedback-wrong .letter.is-selected {
  filter: drop-shadow(0 6px 0 var(--c-error-shadow));
}