/* Approved English concepts: cream canvas, pastel areas, illustrated white cards. */
.english-learning main.wrap { max-width:1100px; padding-inline:20px; }
.english-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:140px; padding:22px 28px; margin:18px 0 22px; background:var(--c,var(--brand-soft)); border-radius:24px; box-shadow:0 6px 0 var(--d,var(--brand)); }
.english-banner h1 { font-size:clamp(1.8rem,1.2rem + 2.6vw,2.8rem); line-height:1.2; margin:0 0 10px; }
.english-banner p { margin:0; font-size:1.45rem; }
.english-banner > div:first-child > p { font-family:var(--font-kid); font-weight:700; font-size:1.9rem; }
.english-art { display:block; flex:none; width:180px; height:180px; background-image:url('../img/english-learning.webp'); background-image:image-set(url('../img/english-learning.avif') type('image/avif'), url('../img/english-learning.webp') type('image/webp')); background-size:300% 200%; background-repeat:no-repeat; }
.art-book { background-position:0 0; }.art-pencil { background-position:50% 0; }.art-talk { background-position:100% 0; }
.art-train { background-position:0 100%; }.art-swap { background-position:50% 100%; }.art-detective { background-position:100% 100%; }
.english-banner-art { position:relative; width:340px; height:140px; flex:none; }
.english-banner-art .english-art { position:absolute; width:210px; height:210px; right:120px; top:-32px; }
.english-banner-art .art-pencil { width:170px; height:170px; right:0; top:-15px; }
.english-section-title { font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem); margin:20px 0 16px; }
.english-area-grid,.english-game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.english-area { background:white; border-radius:22px; box-shadow:0 8px 25px #2422400b; overflow:hidden; scroll-margin-top:24px; }
.english-area-art { height:124px; display:flex; align-items:center; justify-content:center; background:#d3efff; }
.english-area-art .english-art { width:136px; height:136px; }
.area-writing .english-area-art { background:#ffe8bc; }.area-speaking .english-area-art { background:#d1f4dc; }
.english-area-body { padding:22px 24px 28px; }
.english-area h3 { text-align:center; font-size:1.5rem; margin:0 0 8px; }
.english-area-intro { text-align:center; color:var(--ink-soft); font-size:1.2rem; line-height:1.4; min-height:3em; margin:0 0 20px; }
.english-area-links > a,.english-area-links summary { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:12px 8px; border-top:1px solid #e5e5ef; color:var(--ink); text-decoration:none; font-size:1.15rem; line-height:1.35; cursor:pointer; list-style:none; }
.english-area-links summary::-webkit-details-marker { display:none; }
.english-area-links summary span[aria-hidden="true"],.english-area-links > a span[aria-hidden="true"] { font-size:1.7rem; line-height:1; }
.english-area-links details[open] summary span { transform:rotate(90deg); }
.english-area-links details p { font-size:1rem; margin:4px 8px 12px; line-height:1.5; }
.english-area-links .english-availability { color:var(--ink-soft); }
.english-area-links > a:hover,.english-area-links summary:hover { background:#f6f6fc; border-radius:8px; }
.english-browse-note { text-align:center; color:var(--ink-soft); font-size:1.1rem; margin:24px 0; }
.english-browse-note a,.english-back { display:inline-flex; align-items:center; min-height:44px; }
.english-back { font-size:1.1rem; }
.english-spelling-banner { justify-content:flex-start; margin-top:8px; padding:22px 32px; }
.english-spelling-banner p { line-height:1.35; }
.english-spelling-banner > .english-art { width:130px; height:130px; }
.english-spelling-banner .english-context { font-family:var(--font-kid); font-weight:700; margin-bottom:8px; font-size:1.25rem; }
.english-spelling-banner h1 { margin-bottom:2px; }
.english-section-lead { font-size:1.2rem; margin:-8px 0 20px; }
.english-game-grid { list-style:none; padding:0; margin:0; }
.english-game-card { display:flex; flex-direction:column; align-items:center; min-width:0; padding:12px 18px 18px; background:var(--card); border:3px solid var(--c,var(--english)); border-radius:var(--radius); box-shadow:0 5px 0 var(--c,var(--english)),var(--shadow); text-align:center; }
.english-game-illustration { position:relative; height:185px; width:100%; overflow:hidden; }
.english-game-illustration .english-art { position:absolute; width:300px; height:300px; top:-80px; left:50%; transform:translateX(-50%); }
.english-game-illustration .art-swap { top:-70px; }
.english-game-illustration .art-detective { width:220px; height:220px; top:-12px; clip-path:inset(0 0 0 5%); }
.english-game-card h3 { font-size:1.4rem; margin:0 0 6px; }
.english-game-card > p { font-size:1.1rem; margin:0 0 16px; line-height:1.4; flex:1; }
.english-play { width:100%; min-width:0; }
.english-play > span { min-width:0; overflow-wrap:anywhere; }
.english-game-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:12px; font-size:1rem; }
.english-game-meta > span { display:inline-flex; gap:6px; align-items:center; color:var(--ink-soft); }
.english-game-meta .icon { width:20px; height:20px; }
.english-game-meta a { display:inline-flex; align-items:center; min-height:44px; }
.english-adults { margin-top:40px; border:3px solid #dfe3f0; background:#f7f8fc; border-radius:26px; }
.english-adults > summary { display:flex; align-items:center; gap:14px; cursor:pointer; font-weight:800; font-size:1.25rem; padding:18px 24px; min-height:64px; list-style:none; }
.english-adults > summary::-webkit-details-marker { display:none; }
.english-adults > summary::after { content:'⌄'; margin-left:auto; }
.english-adults[open] > summary::after { content:'⌃'; }
.english-adults > summary .icon { width:30px; height:30px; }
.english-adults > .prose { max-width:none; padding:4px 24px 24px; }
@media(max-width:1050px) {
 .english-area-body { padding-inline:18px; }
 .english-area-links > a,.english-area-links summary { font-size:1rem; }
 .english-game-meta { flex-wrap:wrap; justify-content:center; }.english-area-grid,.english-game-grid { gap:16px; }
}
@media(max-width:760px) {
 .english-learning main.wrap { padding-inline:20px; }
 .english-banner { min-height:140px; padding:22px; gap:10px; border-radius:20px; }
 .english-banner-art { width:70px; height:70px; }.english-banner-art .english-art { position:static; width:70px; height:70px; }.english-banner-art .art-pencil { display:none; }
 .english-banner > div:first-child > p { font-size:1.25rem; }
 .english-banner p,.english-section-lead { font-size:1.1rem; }
 .english-area-grid,.english-game-grid { grid-template-columns:1fr; gap:22px; }
 .english-area-intro { min-height:0; }
 .english-area-links > a,.english-area-links summary { font-size:1.1rem; }
 .english-area-art { height:110px; }.english-area-art .english-art { width:104px; height:104px; }
 .english-spelling-banner > .english-art { width:72px; height:72px; }
 .english-spelling-banner .english-context { font-size:1.1rem; }

 .english-game-meta { justify-content:space-between; }
}
@media(prefers-reduced-motion:no-preference) { .english-play { transition:background .15s ease; } }
/* Games lead each collection; guidance stays underneath. */
.english-card-type { flex:none!important; margin:12px 0 0!important; font-size:1rem!important; color:var(--ink-soft); }
.english-guided,.english-learning-guide { margin-top:36px; scroll-margin-top:24px; }
.english-learning-guide > h2 { font-size:1.5rem; }
.english-faq summary { min-height:44px; padding:10px 0; cursor:pointer; font-weight:700; }
.english-guided { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.english-guided > h2 { grid-column:1/-1; margin:0; }
.english-guided article { padding:24px; background:#fff; border-radius:20px; border:1px solid var(--line); scroll-margin-top:24px; }
.english-guided li { padding-left:4px; margin-bottom:14px; line-height:1.6; }
.english-learning-guide.prose { max-width:46em; padding:28px 0; }
.english-learning-guide h3 { margin-top:24px; font-size:1.2rem; }
.english-learning-guide p { line-height:1.7; }
.english-faq { border-bottom:1px solid var(--line); }
.english-related a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:760px) { .english-guided { grid-template-columns:1fr; } }
.english-spelling-banner > div { min-width:0; }
.english-banner h1 { overflow-wrap:break-word; }
@media(max-width:760px) {
 .english-collection-banner { flex-direction:column; align-items:flex-start; gap:8px; }
 .english-collection-banner > .english-art { width:64px; height:64px; }
}
/* Top-row category art uses a different crop from the wider game illustrations. */
.english-game-illustration .art-book,.english-game-illustration .art-pencil,.english-game-illustration .art-talk { width:220px; height:220px; top:-12px; }

.english-game-illustration>img,.english-game-illustration>picture>img{width:100%;height:100%;object-fit:cover}

.english-guided{padding:0 20px 20px}.english-guided article h2{font-size:1.4rem}

.match-audio-entry{display:flex;gap:4px;align-items:stretch;min-width:0}.match-audio-entry .card{flex:1;min-width:0;padding-inline:4px;font-size:1.1rem}.match-audio-entry .btn-icon{flex:none;min-width:44px;width:44px;padding:4px}
@media(min-width:761px){.match-audio-entry .card{font-size:1.35rem;padding-inline:8px}}

.english-reading-text,.english-message-text{max-width:80ch;padding:22px;margin:20px 0;border:2px solid #e5ca7b;border-radius:20px;background:#fff8de}.english-reading-text h2{margin-top:0}.english-reading-text p{line-height:1.75}.english-message-text summary{min-height:44px;font-weight:700;cursor:pointer}.english-message-text li{margin:12px 0;line-height:1.6}
.english-game-illustration > picture { display:contents; }