:root{--sky:#eaf6ff;--paper:#fff;--ink:#183653;--muted:#607b92;--blue:#287bb4;--blue2:#145b92;--line:#d4e8f5;--coral:#ef9577;--gold:#efc05f;--mint:#65bfae;--shadow:0 16px 42px #245d8218}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:var(--sky)}body{margin:0;min-height:100vh;color:var(--ink);font:500 15px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 14% 0,#fff 0,transparent 38%),radial-gradient(ellipse at 94% 30%,#dbf1fc 0,transparent 31%),#edf7fc}button,input,select{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e99b62;outline-offset:3px}.topbar{height:70px;padding:0 clamp(14px,4vw,52px);display:flex;align-items:center;justify-content:space-between;background:#ffffffdf;border-bottom:1px solid #dbeaf4;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-height:48px}.brand b{display:block;font-size:17px;line-height:1.05;letter-spacing:-.4px}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.brand-mark{width:38px;height:38px;border-radius:13px;background:#287bb4;display:flex;align-items:end;justify-content:center;gap:3px;padding:9px 8px;box-shadow:0 6px 15px #287bb43b}.brand-mark i{display:block;width:5px;border-radius:9px;background:#fff;height:14px}.brand-mark i:nth-child(2){height:20px;background:#ffd076}.brand-mark i:nth-child(3){height:11px}.head-tools{display:flex;align-items:center;gap:8px}.stat-pill,.profile-btn{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);background:#fff;min-height:44px;border-radius:14px;padding:7px 12px;font-weight:800}.stat-pill small{font-size:10px;color:var(--muted);font-weight:650}.stars{color:#ab7412;background:#fff9e9;border-color:#f1dfaf}.profile-btn{gap:7px;border-radius:99px;max-width:160px}.profile-btn img{width:29px;height:29px;border-radius:50%;object-fit:contain}.profile-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shell{max-width:1120px;margin:0 auto;padding:17px 24px 20px;min-height:calc(100vh - 110px)}.welcome{height:188px;border-radius:25px;padding:22px 32px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;background:linear-gradient(110deg,#1e6da8 2%,#388fc3 62%,#73c6ca);color:white;box-shadow:0 13px 28px #347ea426}.welcome:after{content:'';position:absolute;width:270px;height:270px;right:0;top:-104px;border-radius:50%;background:#ffffff13}.welcome-copy{position:relative;z-index:1}.kicker{font-size:10px;letter-spacing:1.7px;font-weight:850;color:#276b91}.welcome .kicker{color:#d7f4ff}.welcome h1{font:700 clamp(27px,3vw,37px)/1.06 Georgia,serif;letter-spacing:-.4px;margin:8px 0}.welcome h1 em{color:#ffe3a0;font-weight:600}.welcome p{margin:8px 0 0;color:#e4f4ff;font-size:13px}.storybook{position:relative;width:285px;height:150px;z-index:1;flex:none}.book{position:absolute;left:75px;top:15px;width:140px;height:120px;background:#fdf7e9;border-radius:9px 13px 13px 7px;transform:rotate(-5deg);box-shadow:0 14px 19px #173b4c40;border-left:9px solid #edaa67}.book:before{content:'';position:absolute;inset:8px 8px 8px 4px;border:1px solid #e4d4b7;border-radius:4px}.book-spine{position:absolute;left:16px;top:8px;height:104px;border-left:1px solid #e8d9bd}.book-lines{position:absolute;left:32px;right:13px;top:28px;height:68px;background:repeating-linear-gradient(to bottom,transparent 0 14px,#bdd9df 15px 16px)}.cloud{position:absolute;width:52px;height:20px;border-radius:99px;background:#d9f2fa}.cloud:before,.cloud:after{content:'';position:absolute;border-radius:50%;background:inherit}.cloud:before{width:25px;height:25px;left:8px;top:-12px}.cloud:after{width:34px;height:33px;right:5px;top:-17px}.cloud-a{left:15px;top:25px}.cloud-b{right:6px;bottom:24px;transform:scale(.72)}.spark{position:absolute;color:#ffdb86;font-size:27px}.spark-a{left:52px;top:4px}.spark-b{right:32px;top:37px}.controls{height:52px;display:flex;align-items:center;justify-content:space-between}.controls label{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13px}.controls select{min-height:40px;border-radius:12px;border:1px solid #cfe3f0;background:white;color:var(--ink);padding:6px 31px 6px 12px;font-weight:700}.tiny-note{font-size:11px;color:var(--muted)}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.game-card{border:1px solid var(--line);background:#fff;border-radius:19px;min-height:126px;padding:12px;display:grid;grid-template-columns:72px minmax(0,1fr) 18px;align-items:center;gap:11px;text-align:left;box-shadow:0 5px 13px #1642670a;transition:transform .16s,border .16s,box-shadow .16s}.game-card:hover{transform:translateY(-3px);border-color:#96c9e3;box-shadow:var(--shadow)}.game-drawing{height:82px;width:72px;border-radius:15px;background:#e7f5fc;position:relative;display:grid;place-items:center;overflow:hidden}.game-drawing i{font-style:normal;font:700 26px Georgia,serif;color:#267db1}.card-1 .game-drawing,.card-4 .game-drawing{background:#fff3dc}.card-1 .game-drawing i,.card-4 .game-drawing i{color:#cb8c31}.card-2 .game-drawing,.card-5 .game-drawing{background:#e5f6f0}.card-2 .game-drawing i,.card-5 .game-drawing i{color:#3a9a85}.card-3 .game-drawing,.card-6 .game-drawing{background:#fff0e9}.card-3 .game-drawing i,.card-6 .game-drawing i{color:#d3795e}.game-drawing:before,.game-drawing:after{content:'';position:absolute;border-radius:50%;border:1px solid currentColor;opacity:.15;width:52px;height:52px;left:-20px;bottom:-27px}.game-drawing:after{width:35px;height:35px;right:-18px;left:auto;top:-15px;bottom:auto}.game-drawing i{z-index:1}.card-copy{min-width:0}.card-copy b{display:block;font-size:15px;line-height:1.15;letter-spacing:-.2px}.card-copy small{display:block;color:var(--muted);font-size:11px;line-height:1.3;margin-top:6px}.card-arrow{align-self:start;color:#8aa6b9;font-size:15px}.reward-strip{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:11px;padding:9px 13px;min-height:55px}.reward-star{width:34px;height:34px;display:grid;place-items:center;background:#fff2cd;color:#bd8621;border-radius:11px}.reward-strip div{flex:1}.reward-strip b,.reward-strip small{display:block}.reward-strip b{font-size:12px}.reward-strip small{font-size:10px;color:var(--muted)}.quiet{border:0;background:transparent;color:#2475aa;font-weight:800;min-height:44px;padding:8px 12px}.primary{border:0;background:#206fa3;color:#fff;border-radius:14px;padding:11px 18px;min-height:46px;font-weight:850;box-shadow:0 7px 15px #287bb42b}.primary:hover{background:#176697}.loading,.empty{text-align:center;padding:60px 16px;color:var(--muted)}.sun{display:block;width:28px;height:28px;margin:0 auto 12px;border:4px solid #b7dceb;border-top-color:#3388b4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.play-screen{max-width:850px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px 22px 18px;box-shadow:var(--shadow)}.play-head{display:grid;grid-template-columns:auto 1fr 48px;align-items:center;gap:12px}.back{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#ffffff;border:2px solid #bce0f3;border-radius:14px;color:#145b92;font-weight:800;font-size:14px;padding:8px 14px;min-height:44px;min-width:44px;box-shadow:0 3px 8px rgba(20,91,146,0.08);cursor:pointer;transition:all .15s ease;user-select:none;white-space:nowrap;text-decoration:none}.back:hover{background:#f0f8fd;border-color:#7ebbdf;transform:translateY(-1px);box-shadow:0 5px 12px rgba(20,91,146,0.12)}.back:active{transform:translateY(1px);background:#e3f2fb;box-shadow:0 2px 4px rgba(20,91,146,0.1)}.back-icon,.back-arrow{font-size:22px;line-height:1;display:inline-flex;align-items:center}.play-title .kicker{color:#276b91}.play-title h1{font:700 27px/1.12 Georgia,serif;margin:2px 0 3px}.play-title p{margin:0;color:var(--muted);font-size:12px}.listen{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#f1f9fd;color:#145b92;font-size:17px}.trace-stage{height:370px;max-height:48vh;position:relative;margin:12px 0;border:1px solid #dbeef6;border-radius:18px;background:radial-gradient(#d9ebf1 1px,transparent 1px),#f9fdff;background-size:16px 16px;overflow:hidden}.trace-word{position:absolute;inset:0;display:grid;place-items:center;font:900 min(28vw,220px)/1 Georgia,serif;color:#d3e8f0;letter-spacing:.05em;pointer-events:none}.trace-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.trace-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.trace-tools span{flex:1;color:var(--muted);font-size:11px}.word-art{height:120px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted)}.word-art img{width:110px;height:110px;object-fit:contain}.syllable-bank,.answer-options{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap;margin:16px auto}.syllable,.option{min-width:67px;min-height:55px;border:1px solid #cce2ef;border-radius:16px;background:#f2f9fd;color:#205982;font-weight:850;font-size:20px;box-shadow:0 4px 10px #1642670c}.syllable{touch-action:none}.syllable:disabled{opacity:.36}.assembled{min-height:54px;border-bottom:2px dashed #c2dce9;text-align:center;padding:12px;font-size:20px;font-weight:800;letter-spacing:1px}.game-actions{text-align:center;margin-top:12px}.sound-card{text-align:center;padding:23px}.sound-orbit{width:120px;height:120px;margin:auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 30%,#dff3fc 31%,#dff3fc 64%,#f1f9fd 65%);box-shadow:inset 0 0 0 1px #d7eaf4}.big-listen{border:0;background:#fff;border-radius:50%;width:66px;height:66px;color:#287bb4;font-size:22px;box-shadow:0 7px 20px #25628520}.sound-card p{font-size:12px;color:var(--muted)}.flash-word{padding:14px;text-align:center;font:800 35px Georgia,serif;color:#205c83;background:#edf8fd;border-radius:17px;transition:filter .2s}.flash-word.covered{filter:blur(13px);user-select:none}.picture-options{margin:16px auto}.picture-option{min-width:130px;min-height:140px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:10px;display:grid;justify-items:center;gap:7px}.picture-option img{width:90px;height:90px;object-fit:contain}.picture-option span{font-size:11px;color:var(--muted)}.wheel-set{display:flex;justify-content:center;align-items:center;gap:18px;padding:15px}.wheel-dial{width:126px;height:126px;border:5px solid #b9deec;border-radius:50%;background:linear-gradient(145deg,#fff,#e5f6fb);box-shadow:0 8px 18px #245d8218;display:grid;place-items:center;align-content:center}.wheel-dial:nth-of-type(2){border-color:#f0d89d;background:linear-gradient(145deg,#fff,#fff7df)}.wheel-dial small{font-size:8px;letter-spacing:1px;color:var(--muted)}.wheel-dial b{font:800 42px Georgia,serif;color:#236d9c}.wheel-dial span{font-size:10px;color:var(--muted)}.plus{font-size:27px;color:#9bb4c2}.combo{text-align:center;font:800 39px Georgia,serif;color:#257aad;margin:0 0 10px;letter-spacing:5px}.center{text-align:center}.play-screen>#board>.primary{display:block;margin:0 auto}.play-screen .quiet{display:block;margin:4px auto}.muted{color:var(--muted);font-size:12px}.missing-word{text-align:center;font:800 56px Georgia,serif;letter-spacing:8px;color:#2879a7;padding:28px;background:#eff9fd;border-radius:20px;margin:14px 0}.message{min-height:22px;text-align:center;margin:9px auto;color:var(--muted);font-weight:750;font-size:13px}.message.good{color:#237b63}.message.try{color:#b76c42}.next{display:block;margin:6px auto 0}.tetris-settings{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}.mode-tabs,.speed-tabs{display:flex;gap:5px}.mode-tabs button,.speed-tabs button{min-height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:5px 11px;font-weight:750;font-size:11px}.mode-tabs .active,.speed-tabs .active{background:#e8f5fb;border-color:#91c5dd;color:#155f8c}.tetris-layout{display:grid;grid-template-columns:minmax(240px,1fr) minmax(200px,.8fr);gap:22px;align-items:center;max-width:650px;margin:10px auto}.tetris-board{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(16,20px);gap:3px;max-width:290px;width:100%;padding:7px;border-radius:14px;background:#285a7a;box-shadow:inset 0 0 0 2px #6e9bb4}.cell{background:#477998;border-radius:4px}.cell.filled{background:#51b7aa;box-shadow:inset 0 0 0 1px #c4fff2}.cell.piece{background:#ffc966;box-shadow:inset 0 0 0 1px #fff0bd}.tetris-side{text-align:center}.falling-piece{display:grid;place-items:center;margin:0 auto 8px;width:72px;height:58px;border-radius:14px;background:#fff1ce;color:#61400e;font-weight:900;font-size:18px}.tetris-side p{font-weight:800}.tetris-answer{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.tetris-answer .option{min-width:56px;min-height:44px;font-size:14px}.touch-controls{display:none;justify-content:center;gap:12px}.touch-controls button{width:54px;height:48px;border:1px solid var(--line);border-radius:13px;background:#f5fbfe;font-size:20px}footer{height:40px;padding:0 26px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:10px;color:#72899a}footer a{color:inherit;text-decoration:none;min-height:44px;display:flex;align-items:center}.quiet[aria-pressed=false]{color:#a4573b}dialog{border:0;border-radius:24px;padding:0;width:min(500px,92vw);max-height:88vh;box-shadow:0 24px 70px #102d4566}dialog::backdrop{background:#16385280;backdrop-filter:blur(4px)}.dialog-card{padding:23px;max-height:88vh;overflow:auto}.dialog-card h2{font:700 26px Georgia,serif;margin:4px 0 14px}.dialog-card label{display:block;font-size:12px;font-weight:800;margin:12px 0 5px}.dialog-card input{height:48px;width:100%;border:1px solid #cfe3ef;border-radius:13px;padding:8px 12px}.wide{width:100%;margin-top:13px}.avatar-picks{display:flex;gap:12px}.avatar-pick{width:75px;height:75px;border:2px solid var(--line);border-radius:19px;background:#f4fbfe}.avatar-pick img{width:56px;height:56px}.avatar-pick.selected{border-color:#3387b5;background:#e8f6fc}.profile-row{width:100%;height:52px;margin:4px 0;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#f9fcfe;border-radius:12px;padding:5px 10px;text-align:left}.profile-row img{width:36px;height:36px}.profile-row span{flex:1;font-weight:800}.profile-row b{font-size:11px;color:var(--muted)}.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.reward{display:grid;justify-items:center;align-content:start;text-align:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:14px;font-size:11px}.reward>b{height:38px;font-size:26px;color:#d39732}.reward img{width:35px;height:35px}.reward small{font-size:9px;color:var(--muted)}.reward button{border:0;background:#e5f4fb;color:#176491;border-radius:9px;min-height:34px}.reward button:disabled{opacity:.45}.reward.unlocked{background:#f7fcfe}.toast{position:fixed;z-index:9;left:50%;bottom:54px;transform:translateX(-50%);background:#193e59;color:white;border-radius:99px;padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .2s;font-size:12px}.toast.show{opacity:1}[hidden]{display:none!important}
@media(min-width:761px){.shell{height:calc(100vh - 114px);min-height:0}.game-grid{grid-template-rows:repeat(2,minmax(0,1fr))}.game-card{min-height:0}.welcome{height:clamp(155px,24vh,205px)}}
@media(max-width:760px){.topbar{height:62px;padding:0 11px}.brand b{font-size:14px}.brand small{display:none}.brand-mark{width:34px;height:34px}.head-tools{gap:5px}.stat-pill{min-height:38px;padding:5px 8px;font-size:12px}.profile-btn{min-height:44px;padding:4px 8px;max-width:112px;font-size:12px}.profile-btn img{width:25px;height:25px}.shell{padding:12px 13px 18px}.welcome{height:160px;padding:18px 20px;border-radius:20px}.welcome h1{font-size:27px}.welcome p{max-width:250px;font-size:11px}.storybook{width:180px;transform:scale(.7);transform-origin:right center;margin-left:-65px}.controls{height:49px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.game-card{min-height:112px;padding:8px;grid-template-columns:56px minmax(0,1fr) 12px;gap:7px;border-radius:15px}.game-drawing{width:56px;height:67px;border-radius:12px}.game-drawing i{font-size:22px}.card-copy b{font-size:13px}.card-copy small{font-size:9px;margin-top:4px}.reward-strip{min-height:49px}.tiny-note{font-size:9px}.play-screen{padding:11px;border-radius:19px}.play-head{grid-template-columns:auto 1fr 44px;gap:8px}.back{padding:6px 10px;font-size:13px;min-height:40px;border-radius:12px}.play-title h1{font-size:22px}.play-title p{font-size:10px}.trace-stage{height:44vh;max-height:370px}.trace-tools span{width:100%;flex-basis:100%}.trace-tools button{flex:1;padding:8px}.tetris-settings{flex-direction:column;align-items:stretch}.mode-tabs,.speed-tabs{justify-content:center}.mode-tabs button,.speed-tabs button{flex:1;padding:4px;font-size:10px}.tetris-layout{grid-template-columns:minmax(170px,1fr) minmax(120px,.8fr);gap:9px}.tetris-board{grid-template-rows:repeat(16, minmax(15px,2.2vh));gap:2px;padding:5px}.tetris-side{font-size:12px}.tetris-answer{gap:4px}.tetris-answer .option{min-width:45px;padding:4px;font-size:12px}.touch-controls{display:flex;margin-top:8px}.touch-controls button{min-height:48px}.wheel-dial{width:112px;height:112px}.missing-word{font-size:46px;padding:20px}.picture-option{min-width:105px;min-height:125px}.picture-option img{width:76px;height:76px}footer{height:42px;gap:10px;padding:0 8px;font-size:9px}}
@media(max-width:400px){.storybook{transform:scale(.55);margin-left:-91px}.welcome{height:145px;padding:14px}.welcome h1{font-size:24px}.game-card{grid-template-columns:48px minmax(0,1fr) 10px;min-height:103px}.game-drawing{width:48px;height:61px}.card-copy b{font-size:12px}.card-copy small{font-size:8px}.stat-pill small{display:none}.tetris-layout{grid-template-columns:minmax(155px,1fr) minmax(110px,.75fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Frontend corrections: large visual cues, legible tracing and avatar identity. */
.initial-letter{display:block;font:900 clamp(5rem,18vw,10rem)/.95 system-ui,sans-serif;color:var(--blue2);text-shadow:0 8px 0 #d7eaf7;letter-spacing:.02em}.sound-card{text-align:center}.sound-card p{font-size:1rem}.missing-art{display:grid;place-items:center;margin:8px auto 12px;min-height:180px}.missing-art img{display:block;max-width:min(42vw,250px);max-height:240px;object-fit:contain}.trace-stage{position:relative}.trace-word{font-family:system-ui,sans-serif!important;font-weight:900!important;letter-spacing:.02em}.trace-stage canvas{background-color:transparent}.trace-tools{flex-wrap:wrap}.profile-btn[data-frame="gold"] img{box-shadow:0 0 0 4px #e9b63f}.profile-btn[data-frame="emerald"] img{box-shadow:0 0 0 4px #35a77c}.profile-btn[data-frame="ruby"] img{box-shadow:0 0 0 4px #d45c6b}.profile-btn[data-frame="violet"] img{box-shadow:0 0 0 4px #9472c5}.profile-btn[data-shape="star"] img{clip-path:polygon(50% 0,62% 34%,98% 36%,70% 58%,79% 94%,50% 74%,21% 94%,30% 58%,2% 36%,38% 34%);border-radius:0}.profile-btn[data-shape="heart"] img{clip-path:path('M25 48 C-5 25 8 0 25 18 C42 0 55 25 25 48')}.profile-btn[data-shape="shield"] img{clip-path:polygon(5% 0,95% 0,90% 65%,50% 100%,10% 65%)}.profile-btn[data-shape="crown"] img{clip-path:polygon(0 15%,25% 35%,35% 5%,50% 35%,68% 5%,76% 35%,100% 15%,85% 100%,15% 100%)}.profile-btn[data-shape="circle"] img{border-radius:50%}.picture-option img{object-fit:contain}.tetris-answer{display:flex;flex-wrap:wrap;gap:8px}.tetris-answer .picture-option{flex:1 1 78px;min-width:72px}.falling-piece{transition:transform .22s,opacity .22s}.falling-piece.cleared{transform:translateY(24px) scale(.4);opacity:0}.falling-piece.landed{transform:translateY(20px)}
@keyframes pequenin-fall{from{transform:translateY(0)}to{transform:translateY(calc(var(--board-height,420px) - 40px))}}.tetris-board{position:relative;overflow:hidden;grid-template-rows:repeat(12,minmax(20px,1fr))}.tetris-board .falling-piece{position:absolute;z-index:2;top:4px;left:4px;right:4px;text-align:center;padding:8px 4px;background:#f6d47e;border:2px solid #d8a94e;border-radius:12px;font-weight:900;animation:pequenin-fall var(--fall-time,4s) linear forwards;pointer-events:none}.tetris-board .cell.filled{background:#ef987c;border-color:#d8785d}.tetris-board{--board-height:360px} .trace-stage .trace-word{position:absolute;inset:0;z-index:0;display:grid;place-items:center;color:#287bb42b;font-size:min(58vw,270px);line-height:1}.trace-stage canvas{position:relative;z-index:1;display:block;width:100%;height:100%;touch-action:none}.tetris-board.paused .falling-piece{animation-play-state:paused}
@media(max-width:760px){.missing-art{min-height:140px}.missing-art img{max-width:52vw;max-height:180px}.flash-word{font-size:clamp(2.4rem,12vw,4rem)}.profile-btn[data-shape="heart"] img{clip-path:none;border-radius:50%}}


/* Verified compact gameplay; physical fall position is owned by the engine. */
.game-drawing{padding:0!important;background:transparent!important}.game-drawing img{width:100%;height:100%;object-fit:contain;border-radius:12px}
button,input,select{min-height:44px}.picture-option{padding:7px;min-height:120px}.picture-option img{width:clamp(88px,12vw,142px);height:clamp(88px,12vw,142px)}
.trace-stage #guideCanvas,.trace-stage #traceCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.trace-stage #guideCanvas{z-index:1;pointer-events:none}.trace-stage #traceCanvas{z-index:2}.trace-mnemonic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.18;pointer-events:none}
.trace-tools{gap:8px}.trace-tools label{display:flex;gap:7px;align-items:center}.trace-tools span{font-size:12px}.assembled{min-height:52px;border:2px dashed #8fb6ce;border-radius:14px;touch-action:none;display:flex;align-items:center;justify-content:center;gap:14px}.assembled.drop-ready{background:#e4f5e6;border-color:#287b50}.syllable{touch-action:none}
.tetris-board{display:block;position:relative;height:360px;max-width:none;padding:0;overflow:hidden;background:repeating-linear-gradient(to bottom,#1e526f 0,#1e526f calc(10% - 1px),#366e8d calc(10% - 1px),#366e8d 10%);border:3px solid #427b9b;border-radius:14px}.tetris-board .falling-piece{animation:none!important;position:absolute;left:5px;right:5px;margin:0;padding:0 3px;display:flex;align-items:center;justify-content:center;line-height:1;font-size:clamp(15px,2.1vw,23px);transform:none;transition:opacity 150ms,scale 150ms;min-height:0}.tetris-board .falling-piece.cleared{opacity:0;scale:.5}.stack-brick{position:absolute;left:5px;right:5px;border:2px solid #cf795c;border-radius:7px;background:#efac90;color:#183653;display:grid;place-items:center;line-height:1;font-size:clamp(11px,1.5vw,16px);font-weight:800}.danger-line{position:absolute;left:0;right:0;border-top:3px dashed #ff9e9e;z-index:3;pointer-events:none}.danger-line span{position:absolute;top:-18px;right:5px;color:#fff;font-size:9px;font-weight:800;background:#883f48;padding:0 5px;border-radius:3px}.tetris-actions{display:flex;justify-content:center;gap:6px;margin:8px 0}.tetris-layout{width:100%;max-width:750px;grid-template-columns:minmax(210px,.7fr) minmax(310px,1.3fr);align-items:stretch;gap:16px;margin:4px auto}.tetris-side{display:flex;flex-direction:column;justify-content:center}.tetris-answer .picture-option{flex:0 1 calc(50% - 5px);min-width:80px;min-height:95px}.tetris-answer .picture-option img{width:clamp(65px,9vw,100px);height:clamp(65px,9vw,100px)}.tetris-answer .option{width:100%;font-size:18px;min-height:58px}.tetris-side p{margin:6px 0}.tetris-settings button{min-height:44px}
.profile-btn[data-shape="heart"] img{clip-path:polygon(50% 94%,5% 48%,5% 20%,25% 4%,50% 20%,75% 4%,95% 20%,95% 48%)}
dialog:has(.collection){width:min(95vw,800px)}.reward-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.reward{padding:5px!important;gap:2px!important}.reward b{height:32px!important}.reward b img{width:32px!important;height:32px!important}.reward span{font-size:12px}.reward small{font-size:10px}.reward button{min-height:44px}.dialog-card{max-height:92dvh}.dialog-card h2{margin:3px 0 6px}
@media(min-width:761px){.shell{height:calc(100dvh - 110px);padding-top:12px;padding-bottom:12px}.play-screen{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px;max-width:950px;padding:12px 18px}#board{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.play-head{width:100%}.play-title p{margin:4px 0;font-size:13px}.play-title h1{font-size:28px;margin:2px 0}.play-head .kicker{font-size:10px}.message{min-height:25px;padding:2px;font-size:14px;margin:0}.next{justify-self:center;margin:0;min-height:44px}.trace-stage{width:100%;height:auto;flex:1;min-height:190px;max-height:390px;margin:3px 0}.trace-tools{width:100%;justify-content:center}.trace-tools span{flex-basis:auto}.word-art{margin:0;height:clamp(120px,24vh,190px);flex-shrink:0}.word-art img{height:clamp(120px,24vh,190px);width:clamp(120px,24vh,190px)}.word-art span{display:none}.syllable-bank{margin:4px 0}.syllable{min-height:52px;font-size:28px}.assembled{width:min(100%,550px)}.game-actions{margin:4px 0}.sound-card{padding:0;margin:0}.initial-letter{font-size:clamp(70px,13vh,110px)}.picture-options{margin:4px auto;gap:10px}.flash-word{padding:5px 16px;font-size:clamp(40px,7vh,62px);margin:4px auto}.missing-art{min-height:0;margin:2px}.missing-art img{height:clamp(110px,22vh,175px);width:clamp(110px,22vh,175px)}.missing-word{padding:3px 10px;font-size:52px;margin:4px}.answer-options{margin:3px auto}.option{font-size:30px;min-width:65px;min-height:60px}.wheel-dial{width:145px;height:145px}.wheel-set{margin:6px 0}.combo{font-size:70px;margin:2px}.tetris-settings{width:100%;margin:0}.tetris-layout{min-height:0;flex:1;max-height:420px}.tetris-board{height:100%;min-height:280px}.dialog-card.collection{overflow:visible}.collection .muted{margin:3px 0 8px}}
@media(max-width:760px){.tetris-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:7px}.tetris-side{min-width:0}.tetris-answer .picture-option{min-width:58px}.tetris-answer .picture-option img{max-width:100%}.tetris-board{height:360px}.tetris-answer .picture-option{min-height:80px;padding:3px}.tetris-answer .picture-option img{width:65px;height:65px}.tetris-settings{width:100%}.tetris-settings button{font-size:10px}.tetris-side p{font-size:12px}.tetris-answer .option{font-size:14px;min-height:55px}.trace-stage{height:300px}.trace-tools span{flex-basis:100%}.picture-options{gap:6px}.picture-option{min-width:90px}.picture-option img{width:90px;height:90px}.initial-letter{font-size:90px}.reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.collection .reward{min-width:0}.dialog-card.collection{overflow:auto}.missing-word{font-size:42px;padding:4px}.profile-btn[data-shape="heart"] img{clip-path:polygon(50% 94%,5% 48%,5% 20%,25% 4%,50% 20%,75% 4%,95% 20%,95% 48%)}}

footer{height:44px}@media(min-width:761px){.shell{height:calc(100dvh - 114px)}}

@media(max-width:760px){.topbar{gap:5px}.brand{min-width:0;gap:5px}.brand b{font-size:13px;max-width:108px}.brand-mark{flex-shrink:0;width:30px;height:32px}.head-tools{flex-shrink:0;gap:4px}.stat-pill{padding:4px 6px}.profile-btn{max-width:100px;padding:4px 6px}.profile-btn span{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-card{min-width:0}.card-copy{min-width:0}.card-copy small{font-size:10px}.card-copy b{font-size:13px}.reward-strip{min-width:0}.reward-strip div{min-width:0}.reward-strip small{font-size:9px}}

:root{--muted:#4d657b}.card-copy small,.reward-strip small,.stat-pill small,.muted,footer,.tiny-note,.brand small,.reward small{color:#4d657b}.stars{color:#785000}.reward-frame{display:block;width:30px;height:30px;border-radius:50%;border:5px solid var(--reward-color);background:#fff}.reward-shape{display:block;font:28px/30px system-ui;color:#235f91}.reward b{display:grid;place-items:center}.reward button:disabled{opacity:1;background:#eef2f5;color:#526879}.profile-btn[data-frame="gold"] img{background:#c0921f;padding:3px;box-shadow:none}.profile-btn[data-frame="emerald"] img{background:#287d59;padding:3px;box-shadow:none}.profile-btn[data-frame="ruby"] img{background:#b83b53;padding:3px;box-shadow:none}.profile-btn[data-frame="violet"] img{background:#7451a7;padding:3px;box-shadow:none}

.reward .reward-shape{font:28px/30px system-ui}

/* Joined handwriting for literacy; system UI remains the interface face. */
@font-face{font-family:'Playwrite ES';src:url('./fonts/PlaywriteES-Regular-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.initial-letter,.trace-word,.syllable,.assembled,.word-art span,.picture-option span,.flash-word,.missing-word,.combo,.wheel-dial b,.falling-piece,.stack-brick,.tetris-answer .option{font-family:'Playwrite ES',cursive}
.initial-letter,.trace-word,.flash-word,.missing-word,.combo,.falling-piece,.stack-brick,.tetris-answer .option{font-weight:400}
.trace-stage .trace-word{font-family:'Playwrite ES',cursive!important;text-transform:lowercase!important;letter-spacing:0!important;text-shadow:0 1px 0 #d3e8f0}
.tetris-board .falling-piece{font-family:'Playwrite ES',cursive!important;font-weight:400!important}
.initial-letter{text-transform:lowercase;letter-spacing:0!important;text-shadow:0 4px 0 #d7eaf7}
.syllable,.assembled{letter-spacing:0;text-transform:lowercase;font-weight:400}.answer-options>.option{font-family:'Playwrite ES',cursive;text-transform:lowercase;font-weight:400}.wheel-dial b,.tetris-board .falling-piece,.stack-brick{text-transform:lowercase}.missing-slot{border-bottom:3px solid #287bb4;display:inline-block;min-width:.8em}.missing-slot.correct{color:#1e7155;border-color:#1e7155}.missing-slot.incorrect{color:#a34a32;border-color:#a34a32}.option.selected{background:#e2f1fb;border:2px solid #287bb4}
.flash-word,.missing-word,.combo{text-transform:lowercase;letter-spacing:0}
.tetris-board .falling-piece,.stack-brick{font-size:clamp(15px,2vw,22px)}

/* Six literacy activities in two rows; Tetris occupies the last row. */
@media(min-width:761px){
 .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-content:stretch}
 .game-grid>.game-card:nth-child(7){grid-column:1/-1}
 .game-card{min-height:0;padding:clamp(9px,1.2vh,14px)}
 .game-drawing{width:clamp(54px,6vw,72px);height:clamp(58px,8vh,82px)}
 .game-grid>.game-card:nth-child(7) .game-drawing{width:100%;height:100%;max-height:82px}
 .shell{overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:760px){
 .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .game-grid>.game-card:nth-child(7){grid-column:1/-1}
 .game-grid>.game-card:nth-child(7) .game-drawing{width:56px;height:67px}
 .tetris-setting-group{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;min-width:0}
 .tetris-settings{gap:10px;padding:8px 0}
}
.tetris-setting-group{display:flex;align-items:center;gap:8px;min-width:0}
.settings-label{font-size:11px;font-weight:850;color:#4d657b;white-space:nowrap}
.tetris-setting-group .mode-tabs,.tetris-setting-group .speed-tabs{flex:1;min-width:0}
.mode-tabs button{background:#eef8fd;border-color:#b6d9e9;color:#205f84}
.mode-tabs .active{background:#287bb4;border-color:#287bb4;color:#fff;box-shadow:0 3px 8px #287bb433}
.speed-tabs button{background:#fff6e9;border-color:#efd7a8;color:#765923}
.speed-tabs .active{background:#f0c46c;border-color:#d9a947;color:#4f390f;box-shadow:0 3px 8px #b87c2530}
.mode-tabs button,.speed-tabs button{min-height:44px}
.back{min-height:44px!important;min-width:44px}
@media(min-width:761px) and (max-height:760px){.shell{height:auto;min-height:calc(100dvh - 110px)}.game-grid{grid-template-rows:repeat(3,minmax(100px,1fr))}.game-card{min-height:100px}.welcome{height:150px}}

/* A simple grey companion grows through four earned customization stages. */
.starter-avatars img{filter:grayscale(1) contrast(.85)}
.profile-btn[data-color="gray"] img,.avatar-preview[data-color="gray"] img{filter:grayscale(1) contrast(.85)}
.profile-btn[data-color="sky"] img,.avatar-preview[data-color="sky"] img{filter:grayscale(1) sepia(1) saturate(1.5) hue-rotate(165deg)}
.profile-btn[data-color="mint"] img,.avatar-preview[data-color="mint"] img{filter:grayscale(1) sepia(1) saturate(1.4) hue-rotate(95deg)}
.profile-btn[data-color="coral"] img,.avatar-preview[data-color="coral"] img{filter:grayscale(1) sepia(1) saturate(1.6) hue-rotate(310deg)}
.profile-btn[data-color="gold"] img,.avatar-preview[data-color="gold"] img{filter:grayscale(1) sepia(1) saturate(1.5) hue-rotate(350deg)}
.profile-btn[data-color="gray"] img{background:#dce1e6;padding:2px;border-radius:50%}
.profile-btn[data-frame="aurora"] img{background:linear-gradient(135deg,#7bbcd4,#a185c7,#8cc6ad);padding:4px;border-radius:50%}
.profile-btn[data-frame="sunburst"] img{background:repeating-conic-gradient(#e6b246 0deg 15deg,#ffe0a0 15deg 30deg);padding:4px;box-shadow:0 0 0 2px #f3d691;border-radius:50%}
.avatar-workshop{display:flex;align-items:center;gap:20px;background:linear-gradient(130deg,#edf7fc,#fffaf0);border:1px solid #d4e6ed;border-radius:20px;padding:16px 20px;margin:12px 0}
.avatar-workshop p{margin:5px 0}.avatar-workshop b{font-size:21px}.workshop-score{font-weight:850;color:#195c87;font-size:14px}
.avatar-preview{position:relative;display:grid;place-items:center;width:110px;height:110px;flex-shrink:0;background:#f4f9fc;border:5px solid #79b4d5;border-radius:32%;box-shadow:0 8px 16px #1c567c16}
.avatar-preview img{width:86px;height:86px;object-fit:contain}.avatar-preview[data-color="gray"]{border-color:#b5bfc9;background:#f0f2f4}
.avatar-preview[data-frame="gold"]{border-color:#c0921f}.avatar-preview[data-frame="emerald"]{border-color:#287d59}.avatar-preview[data-frame="ruby"]{border-color:#b83b53}.avatar-preview[data-frame="violet"]{border-color:#7451a7}
.avatar-preview[data-frame="aurora"]{border:5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#59adcb,#ae75c1,#6dbf9e) border-box}
.avatar-preview[data-frame="sunburst"]{border:6px solid #d4a12c;background:#fffae9;box-shadow:0 0 0 4px #fae4a8,0 8px 24px #d49f3233}
.avatar-badge{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:31px;height:31px;background:white;border:1px solid #d6e6ef;border-radius:50%;font-size:20px;color:#82631c}
.milestone-track{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;margin:18px 0 8px;gap:8px}
.milestone-track li{display:grid;justify-items:center;gap:2px;border-top:4px solid #dfe6ec;padding-top:10px;color:#536a7c}.milestone-track li.reached{border-color:#40977d;color:#23674e}
.milestone-track li>span{border:2px solid #d2dde6;background:#f3f6f8;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-weight:850}.milestone-track .reached>span{background:#e5f5ed;border-color:#6eae94;color:#23674e}.milestone-track b{font-size:15px}.milestone-track small{font-size:11px}
.reward-rates{font-size:12px;line-height:1.5;color:#4d657b;text-align:center;margin:10px 0 18px}
.reward-stage{margin:18px 0 0;border-top:1px solid #dce8f1;padding:12px 0}.reward-stage h3{display:flex;align-items:center;gap:7px;font-size:16px;margin:0 0 10px}.reward-stage h3>span{display:grid;place-items:center;background:#e8f3f9;border-radius:8px;width:27px;height:27px;color:#205f84;font-size:13px}.reward-stage h3>small{margin-left:auto;font:700 11px system-ui;color:#4d657b;white-space:nowrap}
.collection .reward-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.collection .reward{padding:10px 6px!important;gap:5px!important;min-width:0}.collection .reward>b{height:42px!important}.collection .reward>b img{width:42px!important;height:42px!important}.collection .reward button{width:100%;font-weight:750}.collection .reward button[aria-pressed="true"]{background:#dff3e9;color:#216548;box-shadow:inset 0 0 0 1px #7bae94}.collection .reward.locked>b{opacity:.6}
.color-swatch{display:block;width:32px;height:32px;border-radius:50%;background:var(--swatch);border:3px solid white;box-shadow:0 0 0 1px #d3dde6}
.dialog-card.collection{overflow:auto;max-height:88dvh;padding:22px}.wheel-count{margin:2px 0;text-align:center}
@media(max-width:600px){.dialog-card.collection{padding:15px}.collection .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-workshop{gap:12px;padding:14px 12px}.avatar-preview{width:86px;height:86px}.avatar-preview img{width:65px;height:65px}.avatar-workshop b{font-size:18px}.reward-stage h3{font-size:14px;flex-wrap:wrap}.reward-stage h3>small{font-size:10px}.collection .reward span{font-size:11px}.collection .reward small{font-size:10px}}

.points-hint{font-size:12px;font-weight:750;color:#42657e;background:#f5fbff;border:1px solid #d7e8f4;padding:6px 10px;border-radius:10px}
.collection[data-color="gray"] .reward img{filter:grayscale(1) contrast(.85)}
.collection[data-color="sky"] .reward img{filter:grayscale(1) sepia(1) saturate(1.5) hue-rotate(165deg)}
.collection[data-color="mint"] .reward img{filter:grayscale(1) sepia(1) saturate(1.4) hue-rotate(95deg)}
.collection[data-color="coral"] .reward img{filter:grayscale(1) sepia(1) saturate(1.6) hue-rotate(310deg)}
.collection[data-color="gold"] .reward img{filter:grayscale(1) sepia(1) saturate(1.5) hue-rotate(350deg)}
@media(max-width:400px){.points-hint{font-size:10px;padding:6px}.controls label{font-size:12px;gap:5px}.controls select{padding:5px 20px 5px 8px}}

.brand-app-icon{display:block;width:44px;height:44px;object-fit:contain;border-radius:12px;flex-shrink:0;box-shadow:0 3px 8px #23698c22}
@media(max-width:760px){.brand-app-icon{width:36px;height:36px;border-radius:10px}}

/* Tablet-first learning surfaces: illustrations scale, never overlap controls. */
:root{--app-bar-height:70px}
.shell:has(.play-screen){height:calc(100dvh - var(--app-bar-height) - 44px);min-height:0;overflow:visible;padding-top:12px;padding-bottom:12px}
.play-screen{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;max-width:1120px}
.play-head{min-width:0}.play-title{min-width:0}.play-title h1{overflow-wrap:anywhere}.play-title p{line-height:1.4}
.play-screen #board{width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.play-screen .message{margin:0;min-height:26px;line-height:1.45;padding:1px;font-size:14px}
.play-screen .next{justify-self:center;margin:0}
.play-screen .word-art{display:grid;place-items:center;width:min(100%,380px);height:auto;aspect-ratio:1;flex-shrink:0;margin:0}
.play-screen .word-art img{width:100%;height:100%;max-height:none;max-width:none;object-fit:contain}
.play-screen .missing-art{width:min(100%,350px);height:auto;min-height:0;aspect-ratio:1;flex-shrink:0;margin:0}
.play-screen .missing-art img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.play-screen .sound-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0;margin:0;flex-shrink:0}
.play-screen .initial-letter{font-size:clamp(74px,10dvh,110px);line-height:1.8;padding:0 10px;margin:0;flex-shrink:0}
.play-screen #hear{margin:0;line-height:1.4;max-width:100%;min-height:44px}
.play-screen .picture-options{--choice-size:clamp(150px,26vw,230px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,600px);gap:12px;margin:0}
.play-screen .picture-option{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0;padding:7px;gap:4px}
.play-screen .picture-options .picture-option img{width:var(--choice-size);height:var(--choice-size);max-width:100%;object-fit:contain;flex-shrink:0}
.play-screen .picture-option span{font:500 11px/1.4 system-ui;color:#4d657b}
.play-screen .flash-word{font-size:clamp(36px,7dvh,66px);line-height:1.8;margin:0;padding:0 12px;max-width:100%;overflow-wrap:anywhere}
.play-screen .missing-word{font-size:clamp(32px,6dvh,60px);line-height:1.8;padding:0 8px;margin:0;max-width:100%;overflow-wrap:anywhere}
.play-screen .syllable-bank{gap:10px;margin:0;max-width:100%}.play-screen .syllable{font-size:clamp(25px,3.8vw,38px);line-height:1.8;min-height:68px;padding:0 16px}
.play-screen .assembled{width:min(100%,600px);font-size:clamp(26px,3.8vw,40px);line-height:1.8;min-height:72px;padding:4px 12px;overflow-wrap:anywhere;flex-wrap:wrap;gap:6px}
.play-screen .game-actions{margin:0}.play-screen .answer-options{margin:0;gap:10px}
.play-screen #board:has(#tetrisBoard){justify-content:flex-start;gap:10px}
.play-screen .tetris-settings{flex-shrink:0;width:100%;gap:12px;padding:0;margin:0;align-items:stretch}
.play-screen .tetris-setting-group{flex:1;flex-direction:column;align-items:stretch;gap:4px}
.play-screen .tetris-layout{width:100%;max-width:none;flex:1;min-height:0;height:auto;max-height:none;margin:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:16px;align-items:stretch}
.play-screen .tetris-board{height:100%;min-height:0;max-height:none;width:100%}
.play-screen .tetris-side{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.play-screen .tetris-side p{margin:0}
.play-screen .tetris-answer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.play-screen .tetris-answer .picture-option{min-width:0;min-height:0;padding:6px}
.play-screen .tetris-answer .picture-option img{width:clamp(120px,18vw,180px);height:clamp(120px,18vw,180px);max-width:100%;object-fit:contain}
.play-screen .tetris-answer .option{font:750 16px/1.5 system-ui;min-height:64px;margin:0}
.play-screen .tetris-actions{margin:0;gap:8px}
@media(min-width:761px) and (orientation:landscape){
 .play-screen #board:has(.word-art),.play-screen #board:has(.missing-art),.play-screen #board:has(.sound-card),.play-screen #board:has(.flash-word){display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);grid-template-rows:minmax(0,1fr) auto auto;gap:12px 24px;align-items:center;justify-items:center}
 .play-screen .word-art{grid-column:1;grid-row:1/4;height:min(100%,380px);width:min(100%,380px);aspect-ratio:1}
 .play-screen .syllable-bank{grid-column:2;grid-row:1;align-self:end}.play-screen .assembled{grid-column:2;grid-row:2}.play-screen .game-actions{grid-column:2;grid-row:3;align-self:start}
 .play-screen #board:has(.missing-art),.play-screen #board:has(.flash-word){grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
 .play-screen .missing-art{grid-column:1;grid-row:1/3;width:min(100%,350px);height:min(100%,350px)}
 .play-screen .missing-word{grid-column:2;grid-row:1;align-self:end}.play-screen #board:has(.missing-art)>.answer-options{grid-column:2;grid-row:2;align-self:start}
 .play-screen #board:has(.sound-card){grid-template-columns:minmax(180px,.65fr) minmax(0,1.7fr);grid-template-rows:minmax(0,1fr)}
 .play-screen .sound-card{grid-column:1;grid-row:1}
 .play-screen .picture-options{--choice-size:clamp(145px,calc((100dvh - 400px)/2),220px);width:100%}
 .play-screen #board:has(.sound-card)>.picture-options{grid-column:2;grid-row:1}
 .play-screen .flash-word{grid-column:1;grid-row:1;align-self:end;font-size:clamp(30px,5dvh,48px)}
 .play-screen #repeatWord{grid-column:1;grid-row:2;align-self:start}
 .play-screen #board:has(.flash-word)>.picture-options{grid-column:2;grid-row:1/3}
 .play-screen .tetris-settings{flex-direction:row;align-items:end}
 .play-screen .tetris-answer{grid-template-columns:repeat(3,minmax(0,1fr))}
 .play-screen .tetris-answer .picture-option img{width:clamp(110px,16vw,180px);height:clamp(110px,16vw,180px)}
 .play-screen .tetris-answer:has(button:nth-child(4)) .picture-option img{width:clamp(100px,calc((100dvh - 480px)/2),160px);height:clamp(100px,calc((100dvh - 480px)/2),160px)}
}
@media(max-width:760px){
 :root{--app-bar-height:62px}
 .shell:has(.play-screen){padding:8px 10px}
 .play-screen{padding:10px;gap:6px}
 .play-screen #board{gap:8px}
 .play-screen .play-title h1{font-size:20px}.play-screen .play-title p{font-size:11px;margin:3px 0}
 .play-screen .word-art{width:min(100%,220px)}.play-screen .missing-art{width:min(100%,300px)}
 .play-screen .picture-options{--choice-size:clamp(120px,32vw,150px);gap:8px}
 .play-screen .picture-option{padding:5px}
 .play-screen .initial-letter{font-size:64px;line-height:1.7}.play-screen .sound-card{gap:8px}
 .play-screen .flash-word{font-size:32px;line-height:1.7}
 .play-screen .missing-word{font-size:32px;line-height:1.7}
 .play-screen .syllable{min-height:56px;padding:0 12px;font-size:26px}
 .play-screen .assembled{min-height:58px;font-size:28px}
 .play-screen .tetris-layout{gap:8px;grid-template-columns:minmax(0,.85fr) minmax(0,1.05fr)}
 .play-screen .tetris-settings{gap:8px}.play-screen .tetris-settings button{font-size:10px;padding:4px;min-height:40px}
 .play-screen .tetris-side{gap:7px}
 .play-screen .tetris-answer{gap:6px}.play-screen .tetris-answer .picture-option{padding:3px}
 .play-screen .tetris-answer .picture-option img{width:clamp(64px,20vw,110px);height:clamp(64px,20vw,110px)}
 .play-screen .tetris-answer .option{font-size:12px;min-height:60px}.play-screen .tetris-actions{flex-wrap:wrap;gap:0}.play-screen .tetris-actions button{padding:4px;font-size:11px}
 .play-screen .message{font-size:12px;min-height:20px}
}

/* Case and direction controls belong to the tracing board, not the profile. */
.play-screen .trace-options{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%;flex-shrink:0}
.case-tabs,.trace-group-tabs{display:flex;gap:6px}.case-tabs button,.trace-group-tabs button,.trace-hints-toggle{min-height:44px;border:1px solid #bfd9e9;border-radius:12px;background:#f2f9fd;color:#205f84;padding:7px 13px;font-size:13px;font-weight:800;cursor:pointer}
.case-tabs button[aria-pressed="true"],.trace-group-tabs button[aria-pressed="true"]{background:#287bb4;color:white;border-color:#287bb4}.trace-hints-toggle{background:#fff5e8;border-color:#ebd1ab;color:#7b5422}
.play-screen .trace-stage{width:100%;position:relative;flex:1;min-height:140px;max-height:none;margin:0;height:auto}
.trace-surface{position:absolute;touch-action:none}.trace-directions{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.trace-surface canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.play-screen .trace-tools{width:100%;gap:8px;flex-shrink:0;justify-content:center;flex-wrap:wrap}
.trace-tools .quiet{border:1px solid #bad8e9;background:#eef7fc;border-radius:12px}
.play-screen .trace-tools #traceLetterLabel,.play-screen .trace-tools #traceProgress{flex:0 1 auto;white-space:normal;font-size:12px;color:#4d657b}
@media(max-width:760px){.case-tabs button,.trace-hints-toggle{padding:6px 9px;font-size:12px}.play-screen .trace-options{gap:7px}.play-screen .trace-tools #traceLetterLabel,.play-screen .trace-tools #traceProgress{flex-basis:auto;width:auto}.play-screen .trace-tools #traceProgress{flex-basis:100%;text-align:center}}

.play-screen .tetris-board .falling-piece{width:auto;min-width:0;max-width:none;white-space:nowrap;overflow:hidden}

/* Syllable length is an explicit local difficulty choice (2 / 3 / 4). */
.play-screen .game-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;width:100%}
.syllable-settings{display:flex;gap:6px;align-items:center;justify-content:center}
.syllable-settings button{min-height:44px;padding:6px 10px;border:1px solid #bfd9e9;border-radius:12px;background:#f2f9fd;color:#205f84;font-size:13px;font-weight:800;white-space:nowrap}
.syllable-settings button[aria-pressed="true"]{background:#287bb4;border-color:#287bb4;color:white}
@media(max-width:760px){.play-screen .game-actions{gap:7px}.syllable-settings button{font-size:12px;padding:6px 8px}.play-screen #undoSyllable{padding:4px 8px;font-size:12px}}
@media(max-width:360px){.play-screen .word-art{width:200px}.play-screen .syllable{font-size:22px;min-height:50px;padding:0 8px}.play-screen .assembled{font-size:25px;min-height:54px}}

@media(max-width:360px){.play-screen .syllable-bank:has(button:nth-child(4)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}.play-screen .syllable-bank:has(button:nth-child(4)) .syllable{min-width:0;padding:0 4px;font-size:20px}}

/* Short screens need document scrolling rather than compressing the game over its header and footer. */
@media(max-width:760px), (max-height:600px){
 .shell:has(.play-screen){height:auto;min-height:calc(100dvh - var(--app-bar-height) - 44px);overflow:visible}
 .play-screen{height:auto;min-height:0;display:flex;flex-direction:column}
 .play-screen #board{flex:none;min-height:0;justify-content:flex-start}
 .play-screen .trace-stage{flex:none;height:clamp(180px,50vw,360px)}
 .play-screen .tetris-layout{flex:none;min-height:360px}
 .play-screen .tetris-board{min-height:360px}
 .controls select,.play-screen .tetris-settings button{min-height:44px}
}