/* ABC-only play layer. Shared Kids subjects remain unchanged. */
:root { --abc-mint:#86efd0; --abc-gold:#ffe18c; --abc-lilac:#c2b2ff; --abc-ink:#111e39; }
body.abc-play { background: radial-gradient(ellipse at 18% 5%,#313163 0,transparent 48%),radial-gradient(ellipse at 90% 35%,#173f58 0,transparent 50%),#101a31; color:#f4f7ff; font-family: ui-rounded,'Trebuchet MS',system-ui,sans-serif; }
body.abc-play::before { content:''; position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(#c5d5ff55 1px,transparent 1px); background-size:61px 61px; opacity:.35; z-index:-1; }
.abc-play > .container { max-width:1120px !important; padding:12px 20px !important; }
.abc-play .page-header { position:relative; padding:4px 0 12px !important; margin-bottom:0 !important; }
.abc-play .page-header h1 { font-size:clamp(1.4rem,2.5vw,2rem) !important; letter-spacing:-.025em; margin:2px 0 4px !important; color:#fff; }
.abc-play .subtitle { color:#c4d6eb; font-size:.95rem !important; line-height:1.4; }
.abc-play .back-to-church-btn { background:#1a2d4d; border:1px solid #567394; min-height:36px; padding:5px 12px !important; font-size:.8rem !important; margin-bottom:7px !important; }
.abc-brand { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--abc-mint); font-size:.65rem; font-weight:800; letter-spacing:.2em; margin:0 0 3px; }
.abc-mascot { width:34px; height:34px; overflow:visible; }
.abc-mascot .eye { transform-origin:center; }
.abc-cheer .abc-mascot { animation:abc-hop .6s ease; }
.abc-play :is(button,[role=button],a) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.abc-play :is(button,[role=button],a):focus-visible { outline:3px solid var(--abc-gold); outline-offset:3px; }
.abc-play :is(.mode-btn,.primary-btn,.next-btn,.play-again-btn,.audio-btn,.back-btn) { min-height:40px; font-family:inherit; }
.abc-play :is(.mode-btn.active,.primary-btn,.next-btn,.play-again-btn) { background:linear-gradient(130deg,#7b6cde,#506adc); color:white; border-color:#baa9ff; box-shadow:0 3px 0 #302f6f; }
.abc-play .mode-toggle { background:#14233c; }
.abc-play .replay-btn { min-width:44px; min-height:44px; border-color:#55799c; }
.abc-play .game-controls { margin:6px auto 12px !important; }
.abc-play :is(.game-area,.hangman-container,.prompt-card) { background:linear-gradient(145deg,#243756eb,#1b2a46eb); border:1px solid #537091; box-shadow:0 12px 36px #07102144,inset 0 1px #ffffff12; border-radius:24px; }
.abc-play .game-area { max-width:780px !important; padding:22px !important; }
.abc-play .game-prompt { margin-bottom:16px !important; }
.abc-play .big-play-btn { width:82px !important; height:82px !important; background:linear-gradient(145deg,#a0f5dc,#5dc5d7); color:#17334a; border:3px solid #c6ffed; box-shadow:0 5px 0 #247c92,0 8px 22px #66d9ce25; }
.abc-play .big-play-btn.playing { animation:abc-listen .75s ease infinite; }
.abc-play .prompt-text { color:#e0e9ff; font-size:.95rem !important; }
.abc-play #choices-grid { gap:12px !important; }
.abc-play .choice-btn { border:2px solid #879dd6; border-radius:18px; background:linear-gradient(155deg,#3b527b,#293e65); box-shadow:0 5px 0 #111e36; min-height:102px !important; font-family:inherit; font-size:2rem !important; font-weight:800; line-height:1.2; color:#fff; transition:transform .18s,background .18s,border-color .18s; }
.abc-play .choice-btn:nth-child(2n) { border-color:#ac98db; background:linear-gradient(155deg,#504670,#323958); }
.abc-play .choice-btn.correct { background:#175c54; border-color:var(--abc-mint); animation:abc-hop .45s ease; }
.abc-play .choice-btn.wrong { background:#633951; border-color:#ffadba; }
.abc-play .choice-btn:disabled:not(.correct) { opacity:.6; }
.abc-play .choice-btn span { font-size:1.05rem !important; }
.abc-play .choice-img { width:82px !important; height:82px !important; object-fit:contain; background:white; border-radius:13px; }
.abc-play .prompt-img { max-width:138px !important; max-height:138px !important; border-radius:18px; background:#fff; box-shadow:0 6px 0 #09183044; }
.abc-play .prompt-letter { background:#564e83; border:2px solid #c5b3ff; color:#fff; font-family:inherit; font-size:3rem !important; font-weight:800; line-height:1.3; }
.abc-play .missing-word { letter-spacing:.08em; color:var(--abc-gold); }
.abc-play .audio-answer-btn.primed { border-color:var(--abc-gold); background:#57503f; }
.abc-play .audio-answer-btn .speaker-mark { font-size:1.8rem !important; }
.abc-confirm { display:block; margin:14px auto 0; padding:10px 22px; min-height:44px; font-family:inherit; font-size:.95rem; font-weight:700; border:2px solid #bcaeff; border-radius:14px; background:#6253b6; color:#fff; }
.abc-confirm:disabled { opacity:.55; }
.abc-play .game-feedback { min-height:36px; border-radius:12px; padding:8px 12px !important; }
.abc-play .feedback-wrong,.abc-play .feedback.bad { color:#ffc1ce; }
.abc-play .feedback-correct,.abc-play .feedback.good { color:#a5ffe2; }
.abc-journey { display:flex; align-items:center; gap:12px; max-width:560px; margin:5px auto 10px; padding:5px 12px; font-size:.78rem; color:#dbe7ff; }
.abc-journey span { white-space:nowrap; }
.abc-journey progress { flex:1; min-width:40px; height:8px; accent-color:var(--abc-mint); border:0; border-radius:9px; overflow:hidden; }
.abc-journey progress::-webkit-progress-bar { background:#2b3e60; }
.abc-journey progress::-webkit-progress-value { background:linear-gradient(90deg,#9891ff,#84efd2); border-radius:9px; transition:width .35s; }
.abc-play .game-info { padding:7px 0 !important; gap:22px !important; }
.abc-play .info-label { color:#b9cde8; font-size:.78rem !important; }
.abc-play .info-value { font-size:1.1rem !important; color:var(--abc-gold); }
.abc-play .instruction { color:#d1deef; font-size:.87rem !important; }
.abc-play .group-nav { margin:5px auto !important; max-width:840px !important; }
.abc-play .group-nav button { background:#253553; color:#f0f3ff; border-color:#6d7c9e; min-height:40px; }
.abc-play .group-nav button.active,.abc-play .letter-nav button.active { background:#5c5092; border-color:#c9b8ff; }
.abc-play .group-nav button.completed,.abc-play .letter-nav button.completed { background:#20564e; border-color:#88e7c9; }
.abc-play .memory-grid { perspective:900px; gap:10px !important; }
.abc-play .memory-card { background:#253552; border-color:#8c9acd; border-radius:16px !important; isolation:isolate; box-shadow:0 4px 0 #09122666; }
.abc-play .memory-card .card-back { color:#f6e9b9; font-size:2rem !important; background:radial-gradient(circle at 50% 40%,#605b99,#383863); border-radius:13px !important; backface-visibility:hidden; transition:transform .38s ease,opacity .15s; }
.abc-play .memory-card .card-back::before { content:''; position:absolute; inset:6px; border:1px solid #d2caff55; border-radius:9px; pointer-events:none; }
.abc-play .memory-card .card-face { position:absolute; inset:0; padding:7px !important; font-size:1.1rem !important; transform:rotateY(-180deg); backface-visibility:hidden; transition:transform .38s ease; }
.abc-play .memory-card.flipped .card-back,.abc-play .memory-card.matched .card-back,.abc-play .memory-grid.is-peeking .card-back { transform:rotateY(180deg); opacity:0; }
.abc-play .memory-card.flipped .card-face,.abc-play .memory-card.matched .card-face,.abc-play .memory-grid.is-peeking .card-face { transform:rotateY(0); }
.abc-play .memory-card .card-face img { width:82%; height:75%; object-fit:contain; background:white; }
.abc-play .memory-card.matched { background:#1b594f; border-color:#94f6d4; }
.abc-play :is(.memory-card.matched,.match-card.matched,.pic-card.found)::after { content:'✓'; position:absolute; top:3px; right:5px; font-size:14px; font-weight:900; color:#071e2c; background:#9bf3d1; border-radius:50%; width:21px; height:21px; text-align:center; line-height:21px; }
.abc-peek { display:block; margin:3px auto 7px; border:1px solid #b4a2e5; border-radius:12px; background:#34355e; color:#e7e2ff; font-family:inherit; font-size:.8rem; font-weight:700; min-height:38px; padding:5px 15px; }
.abc-peek:disabled { opacity:.55; }
.abc-play .match-grid { gap:12px !important; }
.abc-play .match-card { border-color:#9a9bcc; border-radius:16px; background:#303f62; box-shadow:0 4px 0 #0d182c; }
.abc-play .match-card img { max-width:84% !important; max-height:80% !important; object-fit:contain; border-radius:10px; background:white; }
.abc-play .match-card .word-text { font-size:1rem !important; }
.abc-play .match-card.selected { border-color:var(--abc-gold) !important; background:#515074; }
.abc-play .match-card.matched { border-color:var(--abc-mint); background:#20534e; }
.abc-play .letter-nav { gap:5px !important; max-width:900px !important; }
.abc-play .letter-nav button { min-width:36px; min-height:36px; border-color:#7285aa; }
.abc-play .game-wrap { max-width:960px !important; margin:auto; }
.abc-play .prompt-card { padding:12px !important; margin-bottom:12px !important; }
.abc-play .prompt-card h2 { font-size:1.25rem !important; }
.abc-play .prompt-card .play-btn { min-width:44px; min-height:44px; }
.abc-play .grid-pics { gap:10px !important; }
.abc-play .pic-card { position:relative; background:#2a3d5e; border:2px solid #8099bd !important; border-radius:16px !important; padding:7px !important; box-shadow:0 4px 0 #09172b; transition:transform .2s,background .2s; }
.abc-play .pic-card img { background:#fff; border-radius:11px !important; object-fit:contain; }
.abc-play .pic-card .w { font-size:.87rem !important; color:#fff; }
.abc-play .pic-card.found { background:#1d5b4f; border-color:var(--abc-mint) !important; opacity:1; animation:abc-hop .4s; }
.abc-play .pic-card.wrong { border-color:#ffb4c5 !important; }
.abc-play.abc-odd .grid-pics { grid-template-columns:repeat(4,minmax(0,1fr)) !important; max-width:720px; }
.abc-play.abc-odd .pic-card img { max-height:150px !important; }
.abc-play .chips { min-height:130px; align-items:center; }
.abc-play .chip { background:#f5f3ff; color:#243354; border:3px solid #b4a4e8; border-radius:16px; padding:8px; touch-action:none; box-shadow:0 4px 0 #746795; }
.abc-play .chip img { width:74px; height:74px; object-fit:contain; }
.abc-play .chip.gone { visibility:hidden; opacity:0; pointer-events:none; }
.abc-play .chip.dragging { z-index:30; pointer-events:none; transform:rotate(-5deg); }
.abc-play .bucket { border:3px solid #9e91d4; border-top:7px solid #cbb6ff; border-radius:14px 14px 32px 32px; background:linear-gradient(#4c4871,#28334f); min-height:120px !important; position:relative; }
.abc-play .bucket:nth-child(2) { border-color:#71cfc4; border-top-color:#a1f4dc; background:linear-gradient(#2c6766,#23444f); }
.abc-play .bucket .letter-big { font-size:2.3rem !important; color:#fff; }
.abc-play .bucket.hot { box-shadow:0 0 0 5px #ffe18c66; border-color:var(--abc-gold); }
.abc-play .bucket.abc-drop { animation:abc-hop .45s; }
.abc-play .hangman-container { padding:18px !important; max-width:760px; margin:auto; }
.abc-play .hangman-image-area { display:flex; align-items:center; justify-content:center; gap:22px; min-height:100px !important; }
.abc-play .hangman-word-img { max-height:125px !important; background:white; border-radius:18px; }
.abc-play .hangman-slots { gap:7px !important; margin:12px auto !important; }
.abc-play .hangman-slot { min-width:0; width:42px !important; height:48px !important; background:#435577; border:2px solid #afbddb; border-bottom:5px solid #b8a7ff; border-radius:9px; font-size:1.6rem !important; }
.abc-play .hangman-slot.filled { color:#b4ffe5; border-color:#8ddcc1; background:#245449; }
.abc-play .hangman-key { min-width:0; min-height:44px !important; background:#344b70; border:1px solid #889cbf; border-radius:10px; font-size:1rem !important; }
.abc-play .hangman-key.correct { background:#1b6956; }
.abc-play .hangman-key.wrong { background:#583644; }
.abc-play :is(.letter-complete,.level-complete,.all-complete,.game-over,.panel) { max-width:740px; margin:12px auto; background:#263650; border:1px solid #8195bc; border-radius:22px; padding:20px !important; }
.abc-play :is(.letter-complete,.level-complete,.all-complete,.game-over,.panel) h2 { color:var(--abc-gold); }
.abc-play .letter-display { max-width:760px; margin:auto; }
.abc-play .letter-card:not(.memory-card) { background:linear-gradient(145deg,#344269,#22364f); border:1px solid #869cca; border-radius:24px; }
.abc-play .letter-giant { color:var(--abc-gold); text-shadow:0 5px #7863aa; font-family:inherit; }
.abc-play .word-tag { font-family:inherit; color:#fff; border:1px solid #7c96ba; border-radius:10px; }
.abc-play .audio-btn { background:#364872; border:1px solid #8a9ec2; border-radius:12px; }
.abc-play .audio-btn.playing,.abc-play .audio-btn.active-word { background:#367060; border-color:var(--abc-mint); }
.abc-play .word-image { animation:abc-arrive .35s ease; }
.abc-play .alphabet-tile { position:relative; border-radius:18px; }
.abc-play .alphabet-tile.abc-explored::after { content:'★'; position:absolute; right:6px; top:2px; font-size:14px; color:var(--abc-gold); }
.abc-play.hub-index .hub-card { background:linear-gradient(145deg,#32496b,#252f51); border:1px solid #8198c6; box-shadow:0 6px 0 #0d192f; border-radius:20px; }
.abc-play.hub-index .hub-card:nth-child(2n) { background:linear-gradient(145deg,#4c426c,#292f51); }
.abc-play.hub-index .hub-card h3 { color:white; }
.abc-play.hub-index .hub-card p { color:#d0dff3; }
.abc-play.hub-index .hub-tab { min-height:42px; font-size:.8rem; border-color:#718bb4; }
.abc-play.hub-index .hub-tab.is-active { background:#584c85; border-color:#d0baff; }
.abc-play.hub-index .hub-panel--dense .hub-card-icon { display:block; font-size:1.6rem; }
.abc-play.hub-index .hub-section:first-of-type .hub-grid { max-width:620px; }
.abc-play.hub-index .hub-section:first-of-type .hub-card { width:100%; min-height:190px; padding:24px; }
.abc-play.hub-index .hub-panel > .hub-grid:has(> .hub-card:only-child) { grid-template-columns:minmax(0,1fr); max-width:460px; justify-content:center; }
.abc-spark { position:fixed; width:8px; height:8px; border-radius:3px; pointer-events:none; z-index:100; background:var(--spark-color); animation:abc-spark .7s ease-out forwards; }
.abc-flying { position:fixed; z-index:99; width:64px; height:64px; border-radius:12px; pointer-events:none; object-fit:contain; background:white; }
@keyframes abc-spark { to { transform:translate(var(--dx),var(--dy)) rotate(150deg) scale(.2); opacity:0; } }
@keyframes abc-arrive { from { opacity:0; transform:translateY(10px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes abc-hop { 40% { transform:translateY(-6px) rotate(-2deg); } 70% { transform:translateY(1px) rotate(1deg); } }
@keyframes abc-listen { 50% { box-shadow:0 5px 0 #247c92,0 0 0 9px #8af0d21f; } }
@media (hover:hover) { .abc-play :is(.choice-btn,.pic-card,.hub-card):hover:not(:disabled) { transform:translateY(-3px); } }
@media (min-width:641px) { .abc-play .memory-grid { grid-template-columns:repeat(var(--mem-cols,5),minmax(0,110px)) !important; } .abc-play .match-grid { grid-template-columns:repeat(4,minmax(0,125px)) !important; max-width:600px !important; } }
@media (max-width:640px) {
 .abc-play > .container { padding:10px 12px !important; }
 .abc-play .page-header h1 { font-size:1.4rem !important; }
 .abc-play .subtitle { font-size:.84rem !important; }
 .abc-play .abc-brand { font-size:.58rem; }
 .abc-play .abc-mascot { width:26px; height:26px; }
 .abc-play .game-area { padding:16px !important; }
 .abc-play .choice-btn { min-height:94px !important; font-size:1.65rem !important; }
 .abc-play .choice-img { width:64px !important; height:64px !important; }
 .abc-play .choice-btn span { font-size:.9rem !important; }
 .abc-play .memory-grid { gap:7px !important; }
 .abc-play .memory-grid:has(> :nth-child(10):last-child) { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
 .abc-play .memory-card .card-face { font-size:.9rem !important; padding:3px !important; }
 .abc-play .memory-card .card-face .face-icon { font-size:1.3rem !important; }
 .abc-play .memory-card .card-back { font-size:1.55rem !important; }
 .abc-play .group-nav { gap:4px !important; }
 .abc-play .group-nav button { height:38px !important; min-height:38px; font-size:.72rem !important; }
 .abc-play .group-nav:has(> :nth-child(5):last-child) { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
 .abc-play .letter-nav { gap:4px !important; }
 .abc-play .letter-nav button { min-width:38px; min-height:38px; }
 .abc-play .match-grid { gap:7px !important; }
 .abc-play .match-card .word-text { font-size:.78rem !important; }
 .abc-play .pic-card { padding:4px !important; border-radius:12px !important; }
 .abc-play .pic-card .w { font-size:.7rem !important; }
 .abc-play .grid-pics { gap:6px !important; }
 .abc-play.abc-odd .grid-pics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 .abc-play.abc-odd .pic-card img { max-height:120px !important; }
 .abc-play .chips { min-height:108px; gap:6px; }
 .abc-play .word-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
 .abc-play .word-chips .chip { width:auto; min-width:0; }
 .abc-play .word-chips .chip span { font-size:.65rem; overflow-wrap:anywhere; }
 .abc-play .chip { padding:5px; width:76px; font-size:.73rem; }
 .abc-play .chip img { width:56px; height:56px; }
 .abc-play .hangman-container { padding:12px !important; }
 .abc-play .hangman-slot { width:30px !important; height:39px !important; font-size:1.25rem !important; }
 .abc-play .hangman-slots { gap:4px !important; }
 .abc-play .hangman-keyboard { grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px !important; }
 .abc-play.hub-index .hub-tab { min-height:38px; font-size:.7rem; padding:6px 8px; }
 .abc-play.hub-index .hub-panel--dense .hub-card { min-height:111px; padding:8px; }
 .abc-play.hub-index .hub-card h3 { font-size:.85rem; }
 .abc-play.hub-index .hub-card p { font-size:.7rem; }
 .abc-play.hub-index .hub-panel--dense .hub-card { padding:7px; min-height:100px; }
 .abc-play.hub-index .hub-panel--dense .hub-card-icon { font-size:1.2rem; margin-bottom:3px; }
 .abc-play.hub-index .hub-panel--dense .hub-card h3 { font-size:.8rem; line-height:1.2; margin-bottom:3px; }
 .abc-play.hub-index .hub-panel--dense .hub-card p { font-size:.68rem; line-height:1.25; }
}
@media (max-height:639px) and (min-width:641px) {
 .abc-play .abc-brand { display:none; }
 .abc-play .page-header h1 { font-size:1.3rem !important; }
 .abc-play .game-area { padding:12px !important; }
 .abc-play .memory-grid { grid-template-columns:repeat(var(--mem-cols,5),minmax(0,84px)) !important; }
 .abc-play .match-grid { grid-template-columns:repeat(8,minmax(0,90px)) !important; max-width:850px !important; }
}
@media (prefers-reduced-motion:reduce) { .abc-play *, .abc-play *::before,.abc-play *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Final fit refinements: preserve room for feedback in listening rounds. */
.abc-play .chip span { color:#243354; }
@media (min-width:641px) {
 .abc-play .game-area:has(.abc-confirm) { padding-block:14px !important; }
 .abc-play .game-area:has(.abc-confirm) .game-prompt { margin-bottom:8px !important; }
 .abc-play .game-area:has(.abc-confirm) .choice-btn { min-height:86px !important; }
}
/* Compact the chrome, not the game: generous targets without off-screen feedback. */
.abc-play .page-header { padding-bottom:8px !important; }
.abc-play .page-header h1 { line-height:1.25; }
.abc-play .abc-mascot { width:28px; height:28px; }
.abc-play .game-controls { margin:3px auto 9px !important; }
.abc-play #game-prompt { margin-bottom:10px !important; }
.abc-play #game-prompt .prompt-visual:has(.prompt-word) { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; }
.abc-play #game-prompt .prompt-word { margin:0; font-size:1.1rem !important; line-height:1.2; }
.abc-play #game-prompt .prompt-visual:has(.prompt-word) .prompt-img { max-width:70px !important; max-height:70px !important; }
.abc-play .game-wrap .prompt-card:has(.play-btn) { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:0 8px; padding:8px 16px !important; }
.abc-play .game-wrap .prompt-card:has(.play-btn) .play-btn { grid-row:span 2; }
.abc-play .game-wrap .prompt-card:has(.play-btn) h2 { margin:0 !important; }
.abc-play .game-wrap .prompt-card:has(.play-btn) p { grid-column:2; }
.abc-play .hangman-image-area { margin:0 !important; }
.abc-play .hangman-lives { margin:2px 0 4px !important; font-size:1.15rem; }
.abc-play .hangman-slots { margin:8px auto !important; }
.abc-play .hangman-key { aspect-ratio:auto; }
@media (min-width:641px) {
 .abc-play .page-header h1 { font-size:1.75rem !important; }
 .abc-play .game-area { padding:16px !important; }
 .abc-play .game-prompt { margin-bottom:12px !important; }
 .abc-play .game-area .game-next { margin-top:6px !important; }
 .abc-play .game-feedback { margin:8px auto 6px !important; }
 .abc-play .game-area .prompt-img { max-height:110px !important; max-width:110px !important; }
 .abc-play .hangman-word-img { max-height:100px !important; }
 .abc-play .game-wrap .grid-pics { gap:8px !important; }
 .abc-play .game-wrap .pic-card { padding:5px !important; }
 .abc-play .game-wrap .pic-card img { max-height:77px; }
}