/* Spexial components — buttons, chips, reusable UI
   All interactive elements ≥ 56px target (exceeds 44px WCAG minimum). */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:12px 22px;border-radius:14px;border:2px solid transparent;
  font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;
  transition:transform .18s,filter .18s,background .18s;position:relative}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-ghost:hover{background:var(--brand-soft)}
.btn-danger{background:transparent;color:#b3403a;border-color:#b3403a}
.btn-danger:hover{background:var(--warn-soft)}
.btn-big{min-height:72px;font-size:1.15rem;padding:16px 30px;border-radius:18px}
.btn-sm{min-height:48px;font-size:.9rem;padding:8px 14px}
.btn-sub{display:block;font-size:.72rem;font-weight:600;opacity:.85}

.chip{min-height:48px;padding:8px 18px;border-radius:999px;border:2px solid var(--line);
  background:var(--card);font-weight:700;font-size:.92rem;cursor:pointer;transition:transform .15s}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.chip.tint[data-tint="cream"][aria-pressed="true"],
.chip.tint[data-tint="mint"][aria-pressed="true"],
.chip.tint[data-tint="white"][aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}

.lang-row{display:flex;gap:10px;margin:14px 0 20px}
.lang-chip{min-height:56px;padding:10px 26px;font-size:1rem}

/* STT push-to-talk mic button */
.mic{width:84px;height:84px;border-radius:50%;border:4px solid var(--brand);background:var(--card);
  font-size:2.2rem;cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.mic:active{transform:scale(.92)}
.mic.rec{background:var(--brand);color:var(--brand-ink);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(13,94,94,.4)}50%{box-shadow:0 0 0 16px rgba(13,94,94,0)}}
body[data-motion="calm"] .mic.rec{animation:none}
.mic-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0}
.mic-hint{font-size:.85rem;color:var(--muted);text-align:center}
.stt-out{background:var(--card);border:2px dashed var(--line);border-radius:12px;padding:12px;min-height:56px;text-align:center;font-size:1.05rem}

/* build-word tiles */
.tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.tile{min-width:64px;min-height:64px;border-radius:14px;border:3px solid var(--line);background:var(--card);
  font-size:1.8rem;font-weight:800;cursor:pointer;display:grid;place-items:center;padding:6px 12px}
.tile:active{transform:scale(.94)}
.slots{display:flex;gap:10px;justify-content:center;margin:6px 0 14px}
.slot{width:64px;height:64px;border-radius:14px;border:3px dashed var(--line);display:grid;place-items:center;
  font-size:1.8rem;font-weight:800;background:var(--bg)}
.slot.filled{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}

/* Urdu display */
.urdu{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Segoe UI",serif;
  direction:rtl;line-height:2.1;letter-spacing:0;word-spacing:.06em}
.ex-word.urdu{font-size:3.4rem}

/* star fly animation for calm-off mode */
.fly-star{position:fixed;font-size:2rem;z-index:99;pointer-events:none;animation:fly 1s ease-out both}
@keyframes fly{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-120px) scale(1.6)}}
body[data-motion="calm"] .fly-star{animation:none}