/* Sound Shift lesson. All rules scoped under .sds-* */
.sds-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* word tiles */
.sds-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 340px; }
.sds-t { display: inline-block; text-align: center; white-space: nowrap; min-width: 92px; padding: 10px 12px 8px; border-radius: 14px;
  background: linear-gradient(180deg, #2E2A4C, #1D1A35); border: 1.5px solid var(--line-strong); box-shadow: 0 4px 0 #0E0C22;
  color: var(--text); font: inherit; animation: sdsDrop .5s cubic-bezier(.2,.9,.25,1.2) both; transition: transform .17s ease-in; }
button.sds-t { cursor: pointer; }
@keyframes sdsDrop { from { opacity: 0; translate: 0 -24px; } }
.sds-wd { display: block; font: 700 26px var(--serif); letter-spacing: .01em; }
.sds-wd i { font-style: normal; color: var(--violet-bright); }
.sds-say { display: block; margin-top: 2px; font: 700 12px var(--sans); color: var(--dim); letter-spacing: .04em; min-height: 15px; }
.sds-t.sds-flip { transform: rotateX(90deg); }
.sds-t.sds-now { border-color: rgba(252,192,80,.6); }
.sds-t.sds-now .sds-wd i, .sds-done .sds-s .sds-wd i, .sds-done .sds-n .sds-wd i { color: #1A1206; background: var(--gold); border-radius: 6px; padding: 0 2px; box-shadow: 0 0 12px rgba(252,192,80,.55); }

/* the map */
.sds-map { position: relative; width: 82%; max-width: 290px; aspect-ratio: 1; }
.sds-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.sds-sweep { position: absolute; inset: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(0deg, rgba(252,192,80,.85), rgba(252,192,80,.6) 85%, rgba(252,192,80,0)); clip-path: inset(100% 0 0 0); transition: clip-path 2s cubic-bezier(.3,.6,.3,1); }
.sds-go .sds-sweep { clip-path: inset(57% 0 0 0); }
.sds-lab { position: absolute; display: flex; flex-direction: column; align-items: center; padding: 4px 9px; border-radius: 10px; background: rgba(10,14,26,.86); border: 1.5px solid var(--line-strong);
  opacity: 0; translate: 0 6px; transition: opacity .35s, translate .35s; white-space: nowrap; }
.sds-lab b { font: 700 16px var(--serif); color: var(--text); }
.sds-lab small { font: 700 11.5px var(--sans); color: var(--dim); }
.sds-lab.sds-on { opacity: 1; translate: 0 0; }
.sds-south { left: 56%; top: 76%; border-color: rgba(252,192,80,.7); }
.sds-north { right: 52%; top: 18%; border-color: var(--violet-bright); }

/* a fork: one old word, two paths */
.sds-fork { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; }
.sds-gl { margin-top: 6px; font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.sds-arms { width: 64%; height: 32px; margin: 6px 0 4px; }
.sds-arms path { stroke: var(--violet-bright); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; opacity: .7; }
.sds-ends { width: 100%; display: flex; justify-content: space-around; }
.sds-end { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sds-end small { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.sds-old { animation: none; }
.sds-s, .sds-n { animation-delay: .2s; }

/* your mouth */
.sds-pair { display: flex; gap: 14px; justify-content: center; transition: opacity .25s; }
.sds-pair.sds-swap { opacity: 0; }
.sds-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; min-height: 108px; padding: 10px; border-radius: 18px;
  background: linear-gradient(180deg, #2E2A4C, #1D1A35); border: 1.5px solid var(--line-strong); box-shadow: 0 5px 0 #0E0C22; }
.sds-card b { font: 700 32px var(--serif); color: var(--text); }
.sds-card small { margin-top: 4px; font: 700 12px var(--sans); color: var(--dim); }
.sds-one .sds-card { border-color: rgba(252,192,80,.6); }

@media (max-height: 700px) {
  .sds-t { min-width: 84px; padding: 8px 10px 6px; }
  .sds-wd { font-size: 23px; }
  .sds-map { width: 66%; max-width: 236px; }
  .sds-card { min-height: 90px; }
}
@media (prefers-reduced-motion: reduce) { .sds-t { animation: none; transition: none; } .sds-sweep { transition: none; } }