.box {
  block-size: 100%;
  padding: var(--space-2xs);
  border: var(--border-thin) solid var(--color-dark-grey);
  border-radius: 1px;
  --tile-bg: #f5f5f5;
  --tile-fg: var(--color-dark);
  color: var(--tile-fg);
  background-color: var(--tile-bg);
  font-size: var(--step-5);
  font-weight: 550;
}

.box.played-to-grid {
  border: var(--border-medium) solid var(--color-dark-grey);
  font-size: var(--step-5);
  font-weight: 600;
}

/* Mirrors alpha.css's .js-palette-square phoneme coloring so a played tile's
   "resting" color (what the flip animations below animate to/from) matches
   how it looked in the palette, instead of every tile flipping to a flat
   white/dark regardless of whether it's a vowel. */
.box.played-to-grid.vowel,
.box.played-to-grid.pseudovowel {
  --tile-bg: var(--color-vowls);
  --tile-fg: var(--color-white);
}

.box.played-to-grid.difficult-consonant {
  --tile-bg: #B5446E;
  --tile-fg: #0F0F0F;
}

.js-grid-square-container {
  perspective: 400px;
}

/* The blank placeholder square and the played tile (appended as a second child
   once a tile is played) are meant to be two visual states of the same square,
   never both visible at once in steady state. But mid-drag, the JS briefly
   un-hides the blank square before hiding the outgoing tile (see games_controller.js's
   "drag" listener), so there's a window where both are simultaneously in normal
   flow -- without this, that doubles the container's block-size (each child
   contributes its own height) and shoves every row below it down and back by a
   full tile's height. Absolutely positioning both over the position:relative
   container makes them overlap instead of stack, so toggling either's visibility
   never changes layout. */
.js-grid-square-container > * {
  position: absolute;
  inset: 0;
}

.js-grid-row-short.hint .box,
.js-grid-row-mid.hint .box,
.js-grid-row-long.hint .box {
  background-color: var(--color-hint);
  color: var(--color-white);
  animation: flip-to-hint 0.6s ease-in-out;
}

@keyframes flip-to-hint {
  0% {
    transform: rotateY(0deg);
    background-color: var(--tile-bg);
    color: var(--tile-fg);
  }
  49.9% {
    background-color: var(--tile-bg);
    color: var(--tile-fg);
  }
  50% {
    transform: rotateY(90deg);
    background-color: var(--color-hint);
    color: var(--color-white);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.js-grid-row-short.hint-reverting .box,
.js-grid-row-mid.hint-reverting .box,
.js-grid-row-long.hint-reverting .box {
  background-color: var(--tile-bg);
  color: var(--tile-fg);
  animation: flip-from-hint 0.6s ease-in-out;
}

@keyframes flip-from-hint {
  0% {
    transform: rotateY(0deg);
    background-color: var(--color-hint);
    color: var(--color-white);
  }
  49.9% {
    background-color: var(--color-hint);
    color: var(--color-white);
  }
  50% {
    transform: rotateY(90deg);
    background-color: var(--tile-bg);
    color: var(--tile-fg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.js-grid-row-short.correct .box,
.js-grid-row-mid.correct .box,
.js-grid-row-long.correct .box {
  background-color: var(--color-hint);
  color: var(--color-white);
  animation: flip-to-correct 0.6s ease-in-out;
}

@keyframes flip-to-correct {
  0% {
    transform: rotateY(0deg);
    background-color: var(--tile-bg);
    color: var(--tile-fg);
  }
  49.9% {
    background-color: var(--tile-bg);
    color: var(--tile-fg);
  }
  50% {
    transform: rotateY(90deg);
    background-color: var(--color-hint);
    color: var(--color-white);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.js-grid-row-short.correct-reverting .box,
.js-grid-row-mid.correct-reverting .box,
.js-grid-row-long.correct-reverting .box {
  background-color: var(--tile-bg);
  color: var(--tile-fg);
  animation: flip-from-correct 0.6s ease-in-out;
}

@keyframes flip-from-correct {
  0% {
    transform: rotateY(0deg);
    background-color: var(--color-hint);
    color: var(--color-white);
  }
  49.9% {
    background-color: var(--color-hint);
    color: var(--color-white);
  }
  50% {
    transform: rotateY(90deg);
    background-color: var(--tile-bg);
    color: var(--tile-fg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.box.played-from-palette {
  background-color: #fff;
  border: var(--border-thin) solid var(--color-dark-grey);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.9),
    inset -1px -1px 2px rgba(0,0,0,0.18);
}

.box.blank {
  background: #fff;
  border: var(--border-medium) solid var(--color-dark-grey);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.9),
    inset -1px -1px 2px rgba(0,0,0,0.18);
}

.box.filling {
  --color-filling: #f2f2f2;
  background-color: var(--color-filling);
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.95),
    inset -5px -5px 8px rgba(0,0,0,0.28);
}

.box.invert {
  color: var(--color-light);
  background-color: var(--color-dark);
}

.box[disabled] {
  color: var(--color-inactive);
  border-color: var(--color-grey);
  pointer-events: none;
}

.box.progress-bar {
  display: flex;
  inline-size: 100%;
  padding: 0;
  border: var(--border-thin) solid var(--color-dark-grey);
  border-radius: 8px;
  font-size: var(--font-size-m);
  overflow: hidden;
}

.box.progress-bar .filled {
  background-color: var(--color-vowls);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-inline-size: 0;
}

.box.progress-bar .filled .count {
  color: #F5F5F5;
  padding-right: 6px;
}

.box.progress-bar .empty .count {
  padding-left: 12px;
}

.box.progress-bar .empty {
  background-color: #F5F5F5;
}

.onboarding-container {
  block-size: 100%;
  outline-offset: -2px;
  outline: 2px dashed var(--color-vowls-inactive);
}

.onboarding-animation {
  position: relative;
  block-size: 100%;
  animation-name: demonstrateTileDrag;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes demonstrateTileDrag {
  0% {
      transform: translate(0);
  }
  20% {
      transform: translateY(-2px);
  }
  60% {
      transform: translateY(20px);
  }
  65% {
      transform: translateY(20px);
  }
  90% {
      transform: translateY(-2px);
  }
  96% {
      transform: translateY(0);
  }
  100% {
      transform: translate(0);
  }
}

.onboarding-icon {
  pointer-events: none;
  position: absolute;
  top: 75%;
  left: -20%;
  right: -15%;
  animation-name: yankPointer;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.onboarding-icon svg {
  color: inherit;
  z-index: 1; /* Lays underneath guide box */
}

@keyframes yankPointer {
  0% {
      transform: translate(0);
  }
  15% {
      transform: translateY(0);
  }
  60% {
      transform: translateY(10px);
  }
  75% {
      transform: translateY(10px);
  }
  90% {
      transform: translateY(0);
  }
  100% {
      transform: translate(0);
  }
}

.box.animation-guide {
  position: absolute;
  left: -50%;
  block-size: inherit; /* Allows box to expand vertically with its content */
  font-size: var(--font-size-m-sm);
  background-color: #d1d6dd; /* Matches pointer SVG's fill color */
  border: 2px solid #183254; /* Color matches pointer SVG's border */
  border-radius: 3px;
  margin: -12px;
  padding: var(--space-3xs);
  z-index: 2; /* Overlays pointer icon */
}