.alphabet-app { --alphabet-blue:#6d92e8; --alphabet-yellow:#ffd96b; --alphabet-green:#78cda5; max-width:760px; }
.alphabet-app svg { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.alphabet-welcome { display:grid; justify-items:center; gap:4px; padding:8px 0 2px; text-align:center; }
.alphabet-welcome h1 { margin:0; font-size:clamp(28px,8vw,48px); letter-spacing:.08em; }
.alphabet-welcome p { margin:0; color:var(--muted); font-size:15px; }
.alphabet-hero { display:block; width:112px; height:112px; object-fit:cover; border-radius:30px; box-shadow:0 12px 30px #6d64b52c; transform:rotate(-2deg); }
.alphabet-language-list { display:grid; gap:10px; width:min(100%,560px); margin:4px auto 0; }
.family-games .alphabet-language { display:grid; grid-template-columns:48px 1fr 24px; align-items:center; gap:10px; width:100%; min-height:72px; padding:10px 18px; text-align:left; }
.alphabet-language > span { font-size:34px; }
.alphabet-language > strong { font-size:21px; }
.alphabet-language > i { color:var(--muted); font:400 30px/1 system-ui; }
.family-games .alphabet-manage-link { width:min(100%,560px); margin:8px auto 0; }
.alphabet-manage-link svg { width:20px; height:20px; }
.alphabet-edit-language { align-self:flex-end; }
.alphabet-letter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:10px; width:100%; }
.family-games .alphabet-letter { display:grid; place-items:center; align-content:center; gap:3px; aspect-ratio:1; min-height:72px; padding:5px; }
.alphabet-letter strong { font-size:clamp(32px,9vw,54px); line-height:1; }
.alphabet-letter small { color:var(--muted); font-size:11px; }
.alphabet-word-card { display:grid; justify-items:center; align-content:center; gap:12px; width:min(100%,600px); min-height:calc(100dvh - 170px); margin:0 auto; padding:18px; overflow:hidden; }
.alphabet-card-screen { position:fixed; z-index:30; inset:0; width:100%; max-width:none; height:100dvh; margin:0; padding:0; gap:0; overflow:hidden; }
.alphabet-card-screen .alphabet-word-card { width:100%; max-width:none; height:100%; min-height:100%; margin:0; padding:84px 20px 24px; border:0; border-radius:0; }
body.alphabet-card-open { overflow:hidden; }
.alphabet-word-card .alphabet-card-letter { color:var(--brand-ink); font:800 clamp(52px,18vw,100px)/.9 system-ui; }
.alphabet-word-card img { display:block; width:min(68vw,360px); height:min(68vw,360px); max-height:43dvh; object-fit:cover; border-radius:32px; background:var(--panel-2); }
.alphabet-word-card img.broken { opacity:.08; }
.alphabet-word-card > strong { max-width:100%; font-size:clamp(30px,9vw,58px); line-height:1; overflow-wrap:anywhere; }
.alphabet-sound { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; color:#fff; background:var(--brand); }
.alphabet-sound svg { width:30px; height:30px; }
.alphabet-admin-intro { padding:18px 20px; }
.alphabet-admin-intro h2,.alphabet-admin-intro p { margin:0; }
.alphabet-admin-intro p { margin-top:4px; color:var(--muted); font-size:13px; }
.alphabet-admin-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.family-games .alphabet-admin-actions .game-button { width:100%; min-height:54px; }
.alphabet-filters { display:flex; gap:7px; overflow-x:auto; padding:2px 1px 8px; scrollbar-width:none; }
.alphabet-filters button { flex:none; min-height:38px; padding:7px 12px; color:var(--text); }
.alphabet-filters button.active { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft); }
.alphabet-word-list { display:grid; gap:8px; }
.family-games .alphabet-word-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:5px 12px; align-items:center; width:100%; min-height:66px; padding:10px 14px; text-align:left; }
.alphabet-word-row strong { min-width:0; font-size:18px; overflow-wrap:anywhere; }
.alphabet-word-row small { grid-column:1/-1; width:fit-content; padding:3px 8px; border-radius:99px; color:var(--muted); background:#7771; }
.alphabet-word-row small.ready { color:#14723f; background:#56c98d22; }
.alphabet-word-row small.disabled { color:var(--danger); }
.family-games .alphabet-add-word { width:100%; min-height:52px; }
.alphabet-empty { margin:0; padding:18px; color:var(--muted); text-align:center; }
.alphabet-word-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px; }
.alphabet-word-form label { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.alphabet-word-form label:nth-child(3),.alphabet-word-form .alphabet-switch,.alphabet-word-form button { grid-column:1/-1; }
.alphabet-word-form input,.alphabet-word-form select { width:100%; min-height:48px; padding:10px 12px; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:14px; font:16px system-ui; }
.alphabet-word-form .alphabet-switch { display:flex; align-items:center; color:var(--text); font-size:15px; }
.alphabet-switch input { width:24px; min-height:24px; }
.family-games .alphabet-word-form button { width:100%; }
.alphabet-media-grid { display:grid; gap:12px; }
.alphabet-media-panel { display:grid; gap:12px; padding:16px; }
.alphabet-media-panel h3,.alphabet-media-panel p { margin:0; }
.alphabet-media-panel p { color:var(--muted); font-size:13px; }
.alphabet-media-panel img { width:100%; max-height:360px; object-fit:contain; border-radius:22px; background:var(--panel-2); }
.alphabet-media-panel audio,.alphabet-recorder audio { width:100%; }
.alphabet-media-empty { display:grid; place-items:center; min-height:90px; color:var(--muted); border:1px dashed var(--border); border-radius:18px; }
.alphabet-media-actions { display:flex; flex-wrap:wrap; gap:8px; }
.alphabet-media-actions label { cursor:pointer; }
.alphabet-delete-word { align-self:center; }
.alphabet-recorder-backdrop { position:fixed; z-index:1000; inset:0; display:grid; place-items:end center; padding:16px; background:#0007; }
.alphabet-recorder { display:grid; gap:14px; width:min(100%,520px); padding:22px; background:var(--panel); }
.alphabet-recorder > strong { font-size:24px; }
.alphabet-recorder p { margin:0; }
.alphabet-rec-live { display:flex; justify-content:center; align-items:center; gap:8px; min-height:70px; color:#d93656; font-size:20px; }
.alphabet-rec-live i { width:13px; height:13px; border-radius:50%; background:#e32646; animation:alphabet-pulse 1s infinite; }
@keyframes alphabet-pulse { 50% { opacity:.25; } }
.alphabet-queue-progress { align-self:center; padding:5px 12px; color:var(--muted); font-size:13px; }
.alphabet-review-card { display:grid; justify-items:center; gap:12px; padding:18px; text-align:center; }
.alphabet-review-card > span { color:var(--brand-ink); font-size:54px; font-weight:800; }
.alphabet-review-card > strong { font-size:32px; overflow-wrap:anywhere; }
.alphabet-review-card img { width:min(100%,360px); aspect-ratio:1; object-fit:cover; border-radius:28px; }
.alphabet-review-card p { margin:0; font-size:15px; }
.family-games .alphabet-record-main { width:100%; min-height:62px; font-size:19px; }
.alphabet-queue-nav { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.family-games .alphabet-queue-nav .game-button { width:100%; }
.alphabet-done { display:grid; justify-items:center; gap:10px; padding:32px; text-align:center; }
.alphabet-done strong { font-size:30px; }
.alphabet-done p { margin:0; color:var(--muted); }
@media(min-width:700px) {
  .alphabet-language-list { grid-template-columns:1fr 1fr; max-width:760px; }
  .alphabet-letter-grid { grid-template-columns:repeat(7,1fr); }
  .alphabet-media-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:420px) {
  .alphabet-app { gap:9px; }
  .alphabet-letter-grid { grid-template-columns:repeat(4,1fr); gap:8px; }
  .family-games .alphabet-letter { min-height:66px; }
  .alphabet-admin-actions { grid-template-columns:1fr; }
  .alphabet-word-card { min-height:calc(100dvh - 150px); }
  .alphabet-card-screen .alphabet-word-card { min-height:100%; padding:max(86px,calc(78px + env(safe-area-inset-top))) 14px max(94px,calc(86px + env(safe-area-inset-bottom))); }
  .alphabet-word-form { grid-template-columns:1fr; }
  .alphabet-word-form label,.alphabet-word-form label:nth-child(3) { grid-column:1; }
}