/* Reading practice: the word across the top with the place you are up to
   marked in it, the reading being built underneath, and the bank of tiles
   below that. Two rows saying the same thing on purpose -- one is what there
   is to read, the other is how far you have got with it. */

.read-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: .5rem 0 1.5rem;
}

/* The word itself, and it has to hold anything from two characters to ten.
   The size comes down as the line grows rather than the line wrapping: a
   reading exercise that breaks its word across two lines has moved the
   difficulty out of the characters and into the layout. Three steps rather
   than one clamp, so a two-character word is as big as the drill's single
   character instead of being sized for the phrase it might have been. */
.read-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  line-height: 1.15;
  font-weight: 500;
  animation: kanaIn .2s ease-out;
}
.read-word.w-short { font-size: clamp(3.25rem, 18vw, 4.75rem); }
.read-word.w-mid   { font-size: clamp(2.4rem, 13vw, 3.5rem); }
.read-word.w-long  { font-size: clamp(1.7rem, 9.5vw, 2.5rem); }
/* the sound direction's prompt is a button, because the reading can be replayed */
.read-word-say {
  padding: .4rem .75rem;
  border-radius: 1rem;
  letter-spacing: .04em;
  transition: background .15s;
}
@media (hover: hover) { .read-word-say:hover { background: var(--bg); } }

/* one character, or one combo, or the long mark: the piece the next tile has
   to answer for */
.ru {
  padding: 0 .06em;
  border-radius: .2em;
  color: var(--muted);
  transition: color .15s, background .15s;
}
.ru.done { color: var(--ink); }
.ru.here {
  color: var(--indigo);
  background: var(--indigo-soft);
  /* the tint alone is nearly invisible against the dark surface, and where the
     reader is up to is the one thing on this screen that must not be guessed */
  box-shadow: 0 .09em 0 var(--indigo);
}

/* the reading as it is assembled, one slot per character of the word */
.slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
}
.slot {
  min-width: 2.5rem;
  min-height: 2.1rem;
  padding: .15rem .35rem;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: .02em;
  border-bottom: 2px solid var(--track);
  color: var(--muted);
}
.slot.filled {
  color: var(--ink);
  border-bottom-color: var(--good);
  animation: slotIn .18s ease-out;
}
@keyframes slotIn { from { opacity: 0; transform: translateY(-.25rem); } }

/* What a finished word turns out to have meant. This is the whole reward for
   getting through it, and set in fine print it read like a footnote to the
   exercise rather than the point of it — so it arrives at the size of an
   answer. It steps down for the occasional long gloss so a two-word meaning
   never wraps into three lines. */
.gloss {
  /* the zone's own gap already separates it from the reading above */
  margin: 0;
  text-align: center;
  font-size: clamp(1.4rem, 7vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  animation: slotIn .2s ease-out;
}
.gloss.long { font-size: clamp(1.1rem, 5.2vw, 1.45rem); }
/* its line before it has anything to say, holding the space it will need —
   sized as the real thing so that revealing it moves nothing at all */
.gloss.pending { visibility: hidden; animation: none; }

/* The bank. Unlike the drill's four answers these are not a fixed grid -- a
   word needs as many tiles as it has characters -- so they wrap, and stay wide
   enough to hit with a thumb however many there are. */
.bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}
.tile {
  min-width: 4.25rem;
  min-height: 4rem;
  padding: .4rem .7rem;
  display: grid;
  place-items: center;
  border-radius: .875rem;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  line-height: 1;
  font-size: 2.3rem;
  transition: background .15s, border-color .15s, color .15s, transform .1s, opacity .15s;
  /* the same bargain the answer tiles strike: nothing here scrolls, so a drag
     that starts on a tile belongs to the tile and not to the browser's pan */
  touch-action: manipulation;
  touch-action: pinch-zoom;
}
.tile.two { font-size: 1.6rem; }
.tile.roman { font-size: 1.35rem; font-weight: 650; letter-spacing: .03em; }
@media (hover: hover) { .tile:hover:not(:disabled) { border-color: var(--indigo); } }
.tile:active:not(:disabled) { transform: scale(.97); }
.tile.used {
  opacity: .28;
  background: transparent;
  border-style: dashed;
}
.tile.wrong {
  background: var(--bad-soft);
  border-color: var(--seal);
  color: var(--seal);
  animation: shake .3s;
}
.tile:disabled { cursor: default; }

/* A long word brings a long bank with it, and a small phone does not have room
   for both, plus the reading being built, plus the meaning underneath: the
   bottom row of tiles ends up below the fold, which on a screen answered by
   tapping is the same as not being there. So a big item tightens everything at
   once rather than letting its last row slide out of reach. */
.read-zone.tight { gap: .8rem; padding: .25rem 0 .75rem; }
.read-zone.tight .slot { min-height: 1.8rem; font-size: 1rem; }
.read-zone.tight .gloss { font-size: clamp(1.2rem, 5.5vw, 1.55rem); }
.read-zone.tight .gloss.long { font-size: clamp(1rem, 4.4vw, 1.3rem); }
.read-zone.tight + .bank { gap: .4rem; }
.read-zone.tight + .bank .tile { min-width: 3.4rem; min-height: 3.1rem; font-size: 1.9rem; }
.read-zone.tight + .bank .tile.two { font-size: 1.35rem; }
.read-zone.tight + .bank .tile.roman { font-size: 1.15rem; }