/* Std 2 (TIE) language kit: listen button, syllable and letter tiles, word and story cards, tap-to-hear cards. */

/* ---------- pictures and cards ---------- */
.step-vis > .vis.tz-pic { width: 170px; height: 170px; }
.step-vis > .vis.tz-word { width: auto; height: 86px; max-width: 100%; }
.step-vis > .vis.tz-syl { width: auto; height: 74px; max-width: 100%; }
.step-vis > .vis.tz-letters { width: auto; height: 78px; max-width: 100%; }
.step-vis > .vis.tz-story { width: min(100%, 520px); height: auto; }
.opt .vis.tz-pic { width: 96px; height: 96px; }
.t-pre .opt .vis.tz-pic { width: 104px; height: 104px; }
.node .vis.tz-pic, .node .vis.tz-word, .node .vis.tz-syl, .node .vis.tz-letters { width: 64%; height: 64%; }
.fb-vis .vis.tz-syl, .fb-vis .vis.tz-letters { width: auto; height: 60px; max-width: 100%; }
.worked .step-vis .vis.tz-syl, .worked .step-vis .vis.tz-letters { height: 64px; }
.opts.text .opt .lbl { overflow-wrap: anywhere; }

/* ---------- listen button ---------- */
.tz-listen { display: flex; flex-direction: column; gap: 16px; }
.tz-play { align-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px; border-radius: 999px; border: 0;
  background: var(--accent-soft); color: var(--accent); font: 750 18px var(--round); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .12s; }
.tz-play .ic { width: 26px; height: 26px; }
.tz-play:active { transform: scale(.96); }
.tz-play.on .ic { animation: tz-pulse .9s ease-out; }
@keyframes tz-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
.t-pre .tz-play { min-height: 72px; padding: 0 30px 0 24px; font-size: 22px; }
.t-pre .tz-play .ic { width: 36px; height: 36px; }

/* ---------- tiles ---------- */
.tz-build { display: flex; flex-direction: column; align-items: center; gap: 18px; user-select: none; -webkit-user-select: none; }
.tz-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px; border-radius: 20px; background: var(--surface-2); }
.tz-letters .tz-slots { gap: 8px; }
.tz-slot { min-width: 72px; height: 66px; border-radius: 16px; border: 2.5px dashed color-mix(in srgb, var(--ink-3) 55%, transparent); display: grid; place-items: center; transition: border-color .15s, background .15s; }
.tz-letters .tz-slot { min-width: 58px; }
.tz-slot.full { border-style: solid; border-color: transparent; }
.tz-slot.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.tz-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 66px; }
.tz-cell { min-width: 64px; height: 58px; border-radius: 14px; background: color-mix(in srgb, var(--surface-3) 70%, transparent); display: grid; place-items: center; }
.tz-tile { position: relative; min-width: 64px; height: 58px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink);
  font: 800 27px/1 var(--round); letter-spacing: .01em; box-shadow: 0 3px 0 var(--line), var(--shadow); touch-action: none; cursor: grab;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.15), box-shadow .2s, background .2s; will-change: transform; }
.tz-letters .tz-tile { min-width: 52px; padding: 0 10px; font-size: 30px; }
.tz-letters .tz-cell { min-width: 52px; }
.tz-tile.dragging { transition: none; z-index: 30; cursor: grabbing; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.tz-tile.flying { z-index: 20; }
.tz-slot .tz-tile { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tz-tile.good { background: var(--good-bg); color: var(--good); box-shadow: 0 3px 0 var(--good); }
.tz-tile.nope { animation: tz-shake .42s ease-in-out; background: var(--warm-bg); }
@keyframes tz-shake { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 4px; } }
.tz-build.locked .tz-tile { cursor: default; }
.tz-build.is-dragging { cursor: grabbing; }
.t-pre .tz-tile { height: 76px; min-width: 84px; font-size: 34px; border-radius: 20px; }
.t-pre .tz-cell { height: 76px; min-width: 84px; border-radius: 20px; }
.t-pre .tz-slot { height: 84px; min-width: 92px; border-radius: 22px; }
@media (max-width: 380px) { .tz-tile { font-size: 24px; padding: 0 10px; } .tz-slots { padding: 10px 8px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .tz-tile { transition: none; } .tz-tile.nope { animation: none; } }

/* ---------- tap-to-hear cards (learn steps) ---------- */
.tz-taps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 620px; }
.tz-taps.n3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) { .tz-taps.n4 { grid-template-columns: repeat(4, 1fr); } .tz-taps.n5, .tz-taps.n6, .tz-taps.n7, .tz-taps.n8 { grid-template-columns: repeat(4, 1fr); } }
.tz-tap { min-height: 92px; padding: 10px; border-radius: 18px; border: 3px solid transparent; background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--line), var(--shadow);
  display: grid; place-items: center; transition: transform .12s, border-color .15s; }
.tz-tap:active { transform: scale(.97); }
.tz-tap.on { border-color: var(--sun); }
.tz-tap .vis { width: 100%; max-width: 120px; height: auto; max-height: 90px; }
.tz-tap .vis.tz-word { max-width: 100%; max-height: 64px; }
.t-pre .tz-tap { min-height: 120px; border-radius: 26px; }
.t-pre .tz-tap .vis { max-width: 130px; max-height: 110px; }