.phonics-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 22px; }
.phonics-intro h1 { font-size:clamp(1.65rem,3.2vw,2.5rem); }
.phonics-intro .lead { margin:0; }
.phonics-experiment { flex:none; color:var(--ink-soft); font-size:.9rem; margin:0; }
.phonics-board { background:#fff; border:3px solid var(--english); border-radius:26px; box-shadow:0 6px 0 var(--english); padding:18px 24px 22px; text-align:center; }
.phonics-status { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink-soft); font-size:.95rem; margin-bottom:14px; }
.phonics-progress { display:flex; gap:7px; }
.phonics-progress span { width:14px; height:14px; border-radius:50%; border:2px solid var(--english); background:white; }
.phonics-progress .is-done { background:var(--english); }
.phonics-board h2 { margin:0 0 8px; font-size:clamp(1.3rem,2.3vw,1.8rem); }
.phonics-instruction { margin-bottom:14px; color:var(--ink-soft); }
.phonics-prompt { display:flex; align-items:center; justify-content:center; gap:22px; margin:6px 0 12px; }
.phonics-jigby svg { width:82px; height:96px; }
.phonics-listen { display:flex; flex-direction:column; align-items:center; gap:8px; }
.phonics-listen .btn { min-height:58px; min-width:150px; gap:10px; display:inline-flex; align-items:center; justify-content:center; }
.phonics-listen .icon { width:1.4em; height:1.4em; }
.phonics-help-short { display:none; }
.phonics-text-button { font:inherit; font-size:1rem; border:0; background:none; color:var(--ink-soft); text-decoration:underline; cursor:pointer; min-height:44px; padding:6px 10px; }
.phonics-word { display:flex; justify-content:center; gap:10px; margin:8px 0 14px; }
.phonics-slot { display:inline-flex; align-items:center; justify-content:center; width:76px; height:80px; border:3px solid #62677e; border-radius:14px; background:#f9f7f3; color:var(--ink); font-family:var(--font-kid); font-size:2.3rem; font-weight:800; line-height:1; position:relative; }
button.phonics-slot { cursor:pointer; }
.phonics-slot::after { content:''; position:absolute; width:8px; height:8px; bottom:7px; border-radius:50%; background:var(--ink-soft); }
.phonics-slot.is-digraph { width:92px; }
.phonics-slot.is-digraph::after { width:32px; height:5px; bottom:9px; border-radius:3px; }
.phonics-slot.is-gap { border-color:var(--english); background:var(--english-t); }
.phonics-slot.is-fixed { border-color:#c8c7ce; background:#f6f5f3; }
.phonics-slot.is-correct { border-color:var(--good); background:var(--good-soft); }
.phonics-tiles { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:12px 0; }
.phonics-tile { font:inherit; font-family:var(--font-kid); font-size:1.8rem; font-weight:800; background:#ffe066; color:var(--ink); border:3px solid var(--ink); border-radius:13px; box-shadow:0 4px 0 var(--ink); min-width:62px; height:64px; padding:3px 14px; cursor:pointer; }
.phonics-tile:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.phonics-tile:disabled { color:#636477; background:#f0eee9; border-color:#cccbd1; box-shadow:0 3px 0 #cccbd1; cursor:default; }
.phonics-feedback { min-height:34px; margin:16px 0 12px; font-weight:650; }
.phonics-feedback.is-correct { color:var(--good-dark); }
.phonics-feedback.is-retry { color:var(--bad-dark); }
.phonics-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; align-items:center; }
.phonics-from { margin:0 0 8px; color:var(--ink-soft); }
.phonics-from strong { color:var(--ink); }
.phonics-note { font-size:.95rem; color:var(--ink-soft); margin:20px 0 28px; text-align:center; }
.phonics-grownups { border-top:1px solid var(--line); padding-top:8px; margin:24px 0; }
.phonics-grownups summary { cursor:pointer; min-height:44px; padding:8px 0; font-weight:700; }
.phonics-grownups .prose { padding-top:14px; }
.phonics-help { margin:0; color:var(--ink-soft); min-height:30px; }
.phonics-complete .phonics-jigby svg { width:140px; height:160px; }
.phonics-complete h2 { margin-top:10px; }
@media(max-width:700px) {
 .phonics-intro { display:block; margin:12px 0 16px; }
 .phonics-intro h1 { margin-bottom:4px; }
 .phonics-experiment { margin-top:3px; }
 .phonics-board { padding:12px 12px 16px; border-radius:20px; }
 .phonics-status { font-size:.85rem; margin-bottom:12px; }
 .phonics-progress { gap:5px; }
 .phonics-progress span { width:11px; height:11px; }
 .phonics-instruction { font-size:.92rem; margin-bottom:6px; }
 .phonics-prompt { gap:12px; margin:0 0 12px; }
 .phonics-listen { flex-direction:row; }
 .phonics-listen .btn { min-width:130px; }
 .phonics-help-long { display:none; }
 .phonics-help-short { display:inline; }
 .phonics-jigby svg { width:64px; height:76px; }
 .phonics-word { gap:7px; margin:10px 0 14px; }
 .phonics-slot { width:62px; height:68px; font-size:2rem; }
 .phonics-slot.is-digraph { width:80px; }
 .phonics-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:6px; max-width:340px; margin:10px auto; }
 .phonics-tile { min-width:44px; height:50px; font-size:1.5rem; padding:3px; }
 .phonics-feedback { font-size:.92rem; min-height:26px; margin:10px 0 8px; }
}

.phonics-game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:28px 0; }
.phonics-game-card { display:flex; flex-direction:column; align-items:flex-start; color:var(--ink); text-decoration:none; background:var(--card); border:3px solid var(--english); border-radius:24px; padding:24px; box-shadow:0 5px 0 var(--english); }
.phonics-game-card:hover { transform:translateY(-2px); }
.phonics-card-mark { display:inline-flex; align-items:center; justify-content:center; border-radius:16px; background:var(--english-t); font-family:var(--font-kid); font-size:1.8rem; font-weight:800; min-height:74px; padding:10px 20px; margin-bottom:16px; }
.phonics-game-card h2 { font-size:1.5rem; margin:0 0 10px; }
.phonics-game-card p { color:var(--ink-soft); margin:0 0 22px; }
.phonics-card-play { margin-top:auto; font-weight:750; text-decoration:underline; text-underline-offset:4px; }
.phonics-audio-credit { color:var(--ink-soft); font-size:.9rem; text-align:center; }
.phonics-other-games { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin:24px 0; }
.phonics-other-games a { display:inline-flex; align-items:center; min-height:44px; }
.phonics-board-build .phonics-slot { border-radius:12px 12px 20px 20px; box-shadow:0 4px 0 #62677e; }
@media(max-width:700px) {
 .phonics-game-grid { grid-template-columns:1fr; gap:18px; margin:20px 0; }
 .phonics-game-card { padding:20px; }
 .phonics-card-mark { min-height:56px; margin-bottom:12px; }
 .phonics-game-card p { margin-bottom:14px; }
}
/* Use the normal game shell as the card; keep a single border and room for tiles. */
.game-stage:has([data-phonics]) { padding:0; min-height:0; }
.game [data-phonics] { width:100%; }
.game .phonics-board { border:0; border-radius:0; box-shadow:none; background:transparent; padding:18px 24px; }
@media(max-width:700px) {
 .game .phonics-board { padding:12px; }
}