/* English games: Spelling Bee, Phonics Pop, Word Ladder, Sentence Builder, Five-Letter Quest */
.sb-play,.pp-play,.wl-play,.sbd-play,.fq-play{display:grid;gap:14px;max-width:660px;margin-inline:auto;width:100%;justify-items:center;text-align:center}
.sb-play[hidden],.pp-play[hidden],.wl-play[hidden],.sbd-play[hidden],.fq-play[hidden]{display:none}
.sb-row,.wl-row,.sbd-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sb-msg,.wl-msg,.sbd-msg,.fq-msg,.pp-info{margin:0;min-height:1.5em;font-weight:700;color:var(--ink-2)}
.sb-msg.good,.wl-msg.good,.sbd-msg.good,.fq-msg.good,.pp-info.good{color:#17753A}.sb-msg.bad,.wl-msg.bad,.sbd-msg.bad,.fq-msg.bad{color:#B3261E}
/* spelling bee */
.sb-clue{margin:0;font:500 clamp(20px,4vw,28px)/1.4 var(--serif);max-width:30ch}
.sb-slots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:56px}
.sb-slot{width:clamp(28px,8vw,42px);height:clamp(40px,10vw,52px);display:grid;place-items:center;border-bottom:4px solid var(--c);font:700 clamp(22px,6vw,30px) var(--sans);text-transform:uppercase;color:var(--ink)}
.sb-slot.ok{color:#17753A;border-color:#17753A}.sb-slot.no{color:#B3261E;border-color:#B3261E}
.sb-input{width:min(100%,360px);padding:12px 16px;border-radius:14px;border:2px solid var(--line-2);font:600 22px var(--sans);text-align:center;background:#fff;color:var(--ink)}
.sb-input:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
/* phonics pop */
.pp-prompt{margin:0;font:500 clamp(22px,5vw,30px)/1.25 var(--serif);color:var(--c-ink)}.pp-hint{margin:0;color:var(--ink-2)}
.pp-field{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:620px}
.pp-bubble{width:clamp(88px,22vw,108px);aspect-ratio:1;border-radius:50%;border:3px solid color-mix(in srgb,var(--c) 55%,#fff);background:radial-gradient(circle at 30% 25%,#fff,var(--c-soft) 55%,color-mix(in srgb,var(--c) 28%,#fff));display:grid;place-content:center;gap:2px;cursor:pointer;animation:pp-bob 3.2s ease-in-out infinite;animation-delay:var(--d);transition:transform .2s,background .2s;box-shadow:0 10px 18px -12px var(--c)}
.pp-bubble:hover:not(:disabled){transform:scale(1.07)}
.pp-e{font-size:clamp(30px,8vw,40px);line-height:1}.pp-w{font:700 15px var(--sans);color:var(--ink)}
.pp-bubble.ok{background:#dff3e6;border-color:#17753A;animation:none;transform:scale(.88);opacity:.8}.pp-bubble.no{background:#fdeceb;border-color:#B3261E}.pp-bubble:disabled{cursor:default}
@keyframes pp-bob{50%{transform:translateY(-7px)}}
/* word ladder */
.wl-goal{margin:0;font:500 clamp(18px,3.6vw,24px)/1.4 var(--serif)}.wl-goal small{color:var(--ink-2);font:600 14px var(--sans)}
.wl-chain{list-style:none;padding:0;margin:0;display:grid;gap:8px;justify-items:center}
.wl-step{display:flex;gap:6px}
.wl-step b{width:46px;height:50px;display:grid;place-items:center;border-radius:10px;background:var(--c-soft);border:2px solid var(--c);font:700 24px var(--sans);text-transform:uppercase;color:var(--c-ink)}
.wl-step.start b{background:var(--c);color:#fff}.wl-step.end b{background:#fff;border-style:dashed;color:var(--ink-2)}.wl-step b.chg{background:#fff4c8;border-color:#E5A12C;color:#6b4b00}
.wl-input{width:160px;padding:11px 14px;border-radius:12px;border:2px solid var(--line-2);font:700 22px var(--sans);text-align:center;text-transform:uppercase;background:#fff;color:var(--ink)}
.wl-input:focus{outline:0;border-color:var(--c)}
/* sentence builder */
.sbd-line{width:100%;min-height:68px;display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:16px;border:2px dashed var(--line-2);background:#fff;justify-content:center;align-items:center}
.sbd-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sbd-tile{padding:10px 16px;border-radius:12px;border:2px solid var(--c);background:var(--c-soft);font:700 18px var(--sans);cursor:pointer;color:var(--c-ink);transition:transform .15s,opacity .15s}
.sbd-tile:hover:not(:disabled){transform:translateY(-2px)}.sbd-tile:disabled{opacity:.3;cursor:default}.sbd-tile.in{background:var(--c);color:#fff}
/* five-letter quest */
.fq-grid{display:grid;gap:6px;--n:5}.fq-row{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px}
.fq-tile{width:clamp(44px,12vw,58px);aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--line-2);border-radius:8px;background:#fff;font:800 clamp(22px,6vw,30px) var(--sans);text-transform:uppercase;color:var(--ink);transition:background-color 0s linear calc(var(--d,0s) + .25s),color 0s linear calc(var(--d,0s) + .25s),border-color 0s linear calc(var(--d,0s) + .25s)}
.fq-tile.filled{border-color:var(--ink-2)}
.fq-tile.flip{animation:fq-flip .5s both;animation-delay:var(--d)}
@keyframes fq-flip{50%{transform:rotateX(90deg)}}
.fq-tile.right,.fq-key.right{background:#17753A;border-color:#17753A;color:#fff}
.fq-tile.present,.fq-key.present{background:#F2C94C;border-color:#F2C94C;color:#3b2a00}
.fq-tile.absent,.fq-key.absent{background:#6b7280;border-color:#6b7280;color:#fff}
.fq-keys{display:grid;gap:6px;width:100%;max-width:520px}.fq-krow{display:flex;gap:5px;justify-content:center}
.fq-key{flex:1;max-width:44px;height:52px;border:0;border-radius:8px;background:#dfe3ea;font:700 14px var(--sans);text-transform:uppercase;cursor:pointer;color:var(--ink)}
.fq-key.wide{max-width:70px;font-size:12px}.fq-end{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.pp-bubble{animation:none}.fq-tile.flip{animation:none}}