@font-face{font-family:ATTArabic;src:url("fonts/NotoNaskhArabic.3a7ec93ba230.ttf") format('truetype');font-display:swap}@font-face{font-family:ATTBangla;src:url("fonts/NotoSansBengali.6499c6011f0c.ttf") format('truetype');font-display:swap}@font-face{font-family:ATTUrdu;src:url("fonts/NotoNastaliqUrdu.3dcb619f91f4.ttf") format('truetype');font-display:swap}:root{--ink:#173b50;--muted:#5a7180;--teal:#137c78;--paper:#fff;--line:#dce7e8;--bg:#f2f6f6;--red:#a13846}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif}header{display:flex;justify-content:space-between;align-items:center;gap:24px;background:white;border-bottom:1px solid var(--line);padding:20px max(24px,calc((100vw - 1260px)/2))}.brand{display:flex;align-items:center;gap:15px;text-decoration:none;font-weight:650;white-space:nowrap}.brand small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}.logo{background:#11364c;color:white;border-radius:13px;font-size:25px;padding:6px 12px;letter-spacing:-2px}.logo span{color:#7bd0bf;margin-left:3px}nav{display:flex;align-items:center;gap:23px}a{color:var(--teal);text-underline-offset:3px}nav>a{color:var(--ink);text-decoration:none;font-size:13px}main{max-width:1260px;margin:0 auto;padding:32px 24px 44px}h1{font-size:32px;letter-spacing:-1px;line-height:1.25;margin:6px 0 10px}h2{font-size:21px;letter-spacing:-.4px;margin:5px 0 14px}p{margin:8px 0 18px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.6px;color:var(--teal);margin:0 0 5px}small{color:var(--muted);font-size:12px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.page-heading p:not(.eyebrow){color:var(--muted);margin-bottom:0}.language-tabs{display:flex;background:#e4ecee;border-radius:14px;padding:5px;gap:3px}.language-tabs a{min-width:96px;text-align:center;text-decoration:none;padding:10px 16px;border-radius:10px;color:var(--muted);font-size:22px}.language-tabs small{display:block;font:11px system-ui;margin-top:2px}.language-tabs .selected{background:white;box-shadow:0 2px 7px #163c4c0b;color:var(--teal)}.workspace{display:grid;grid-template-columns:244px minmax(0,1fr);gap:22px;align-items:start}.card{background:white;border:1px solid var(--line);border-radius:17px;padding:25px;margin-bottom:20px;box-shadow:0 6px 22px #193f4d03}.lesson-nav{padding:23px 14px}.lesson-nav .eyebrow{padding:0 12px 14px}.lesson-nav>a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:9px;text-decoration:none;color:var(--muted);font-size:13px;margin-bottom:4px}.lesson-nav .active{background:#e5f3ef;color:#086660;font-weight:650}.step{font-size:10px;border:1px solid #d5e2e3;border-radius:6px;width:21px;text-align:center;padding:2px}.lesson-nav button{width:100%;margin-top:22px}.lesson-nav>small{display:block;text-align:center;margin-top:8px;font-size:10px}.studio-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}.pill{font-size:10px;white-space:nowrap;border-radius:20px;background:#eff5f6;padding:5px 10px;color:var(--muted)}label{display:block;font-size:12px;font-weight:600;color:var(--muted)}select,input,textarea{font:inherit;max-width:100%;background:white;color:var(--ink);border:1px solid #cbdcde;border-radius:8px;padding:10px 12px}label>select,label>input:not([type=checkbox]),label>textarea{display:block;width:100%;margin-top:6px}input[type=checkbox]{accent-color:var(--teal)}select{min-width:110px}textarea{resize:vertical;width:100%;line-height:1.8}button,.button{font:600 12px/1.5 system-ui;cursor:pointer;border:1px solid transparent;background:var(--teal);color:white;padding:11px 18px;border-radius:8px;text-decoration:none;display:inline-block;white-space:nowrap}button:hover,.button:hover{filter:brightness(.94)}button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#f3f8f8;color:var(--ink);border-color:#d7e4e5}.small{padding:7px 11px;font-size:11px}.controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:14px 0}.controls label:first-child{flex:1}.controls label{min-width:140px}.controls select{width:100%}.custom-options{border-top:1px solid var(--line);margin-top:17px;padding-top:14px}.custom-options summary,details>summary{cursor:pointer;color:var(--muted);font-size:12px}.custom-options button{margin-top:10px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);background:#f4f8f8;border:1px solid #e3ecec;border-radius:12px;margin:22px 0 15px;padding:13px 0}.metrics>div{text-align:center;border-right:1px solid var(--line)}.metrics>div:last-child{border:0}.metrics strong{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}.metrics small{display:block;font-size:8px;letter-spacing:1px}.status{font-size:12px;color:var(--muted);min-height:20px}.target{font-size:30px;line-height:2.35;min-height:135px;max-height:235px;overflow:auto;padding:16px 19px;background:#fafcfb;border:1px solid var(--line);border-radius:11px;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin}.target span.good{color:#13776f;background:#e4f3ee}.target span.bad{color:#9e263b;background:#fce3e6;text-decoration:underline;text-decoration-style:wavy}.target span.current{box-shadow:0 3px var(--teal);background:#e0eded}.typing-label{margin:16px 0 6px}#typing{font-size:28px;min-height:110px;line-height:2.1}#typing:focus{outline:2px solid #77bdb6;outline-offset:2px}.typing-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 20px}.typing-actions span{font-size:10px;color:var(--muted)}[lang=ar].target,[lang=ar]#typing,textarea[lang=ar]{font-family:ATTArabic,'Noto Naskh Arabic',serif}[lang=ur].target,[lang=ur]#typing,textarea[lang=ur]{font-family:ATTUrdu,'Noto Nastaliq Urdu',serif;line-height:2.6}[lang=bn].target,[lang=bn]#typing,textarea[lang=bn]{font-family:ATTBangla,'Noto Sans Bengali',sans-serif}.result{padding:18px;background:#e8f5ee;border-radius:10px;margin:14px 0;color:#195c55}.result strong{font-size:22px}.keyboard{margin-top:12px;overflow:auto;padding:3px}.keyboard-row{display:flex;justify-content:center;gap:4px;min-width:540px;margin:5px 0;direction:ltr}.key{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:35px;width:7.1%;min-height:48px;padding:3px 2px;border:1px solid #dce5e7;border-bottom-width:3px;background:#f6f9fa;border-radius:6px;color:var(--ink);font-size:18px;font-weight:400;line-height:1.6;white-space:normal}.key small{font:8px system-ui}.key.wide{width:18%;font:10px system-ui}.key.space{width:60%;font:11px system-ui}.key.hint{outline:2px solid var(--teal);background:#d4eee7}.keyboard-tools{display:flex;gap:6px;margin-top:12px}.finger{font-size:11px;color:var(--muted);text-align:center;margin:14px 0 8px}.finger-legend{display:flex;gap:7px;justify-content:center;font-size:8px;color:var(--muted);flex-wrap:wrap}.finger-legend>span{border-radius:5px;padding:3px 6px}.f0{background:#f1e8f3!important}.f1{background:#e7edf9!important}.f2{background:#fff0d8!important}.f3{background:#e3f2ec!important}.notice{background:#edf6f5;padding:12px 16px;border-radius:9px;color:#255c60;font-size:12px}.auth{max-width:500px;margin:30px auto}.auth h1{font-size:27px}.auth form p{margin-bottom:18px}.auth input:not([type=checkbox]){display:block;width:100%;margin-top:7px}.helptext{display:block;font-size:11px;color:var(--muted);margin-top:5px}.errorlist{color:var(--red);font-size:12px;padding-left:18px}.check{margin-bottom:20px}.best-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.filter{display:flex;gap:12px;align-items:end;margin-bottom:22px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line)}th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.weak-letters{display:flex;gap:8px;flex-wrap:wrap}.weak-letters>span{font-size:28px;background:#f3f7f7;border-radius:9px;padding:9px 16px}.weak-letters small{display:block;font:10px system-ui}.chart{min-height:180px;overflow:auto}.chart svg{width:100%;min-width:400px;height:230px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}#challenge-form select,#challenge-form input:not([type=checkbox]){width:100%;display:block;margin-top:5px}.challenge-link{display:block;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}.challenge-link small{display:block}.racers>div{padding:10px;background:#f2f7f7;margin-bottom:6px;border-radius:7px}.racers progress{width:100%;accent-color:var(--teal)}footer{display:flex;justify-content:space-between;max-width:1212px;margin:0 auto;padding:18px 0 30px;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}.account{position:relative}.account>summary{font-weight:600;color:var(--teal)}.account>div{position:absolute;right:0;top:30px;width:230px;z-index:5;background:white;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 8px 25px #11364c20}.account a,.account button{display:block;width:100%;text-align:left;font-size:11px;padding:8px}.help{max-width:900px;margin:auto}.help h2{margin-top:28px}.help li{margin-bottom:8px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #5eb2ac;outline-offset:3px}@media(max-width:900px){header{padding:16px 20px;flex-wrap:wrap;gap:14px}nav{gap:16px;flex-wrap:wrap}.workspace{grid-template-columns:1fr}.lesson-nav{display:flex;overflow:auto;gap:5px;padding:12px;margin-bottom:0;align-items:center}.lesson-nav .eyebrow,.lesson-nav>small{display:none}.lesson-nav>a{white-space:nowrap;margin:0;padding:8px}.lesson-nav button{margin:0;width:auto;white-space:nowrap}.page-heading{align-items:start}.language-tabs a{min-width:73px;padding:8px 10px}.two-col{grid-template-columns:1fr}footer{margin:0 24px}.brand small{display:none}}@media(max-width:600px){main{padding:22px 13px}h1{font-size:27px}.page-heading{flex-direction:column;gap:16px}.language-tabs{width:100%}.language-tabs a{flex:1}.card{padding:18px;border-radius:13px}.lesson-nav{padding:8px}.studio-heading{align-items:start}.studio-heading h2{font-size:18px}.metrics strong{font-size:22px}.target{padding:12px;font-size:28px;max-height:205px}.typing-actions{align-items:start}.typing-actions span{max-width:55%}.best-grid{grid-template-columns:1fr;gap:0}.controls label{min-width:110px}.best-grid .card{margin-bottom:10px}footer span{display:none}nav{gap:15px;width:100%}.brand{font-size:14px}.auth{margin:0 auto}.keyboard-row{min-width:480px}.key{min-width:30px}.pill{font-size:9px}}@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s}}
[hidden]{display:none!important}#typing::placeholder{font:14px/2 system-ui;color:#799095}.language-tabs a[lang=ur],.key span[lang=ur]{font-family:ATTUrdu,serif}.language-tabs a[lang=ar],.key span[lang=ar]{font-family:ATTArabic,serif}.language-tabs a[lang=bn],.key span[lang=bn]{font-family:ATTBangla,sans-serif}.keyboard[lang=ur] .key{min-height:64px}.key span[lang=ur]{line-height:2.2}
.workspace>*{min-width:0}.lesson-nav{max-width:100%}.card{min-width:0}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}}

.lesson-info{font-size:11px;color:var(--teal);margin:8px 0 4px}.library-count{font-size:10px;color:var(--muted);margin:0 0 12px}.filter{flex-wrap:wrap}.filter label{min-width:110px;max-width:100%}.filter select{max-width:100%}optgroup{font-style:normal}

.continue-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 22px;border:1px solid #cde3de;border-radius:13px;background:#e8f4f0;margin:0 0 22px}.continue-card p{margin:3px 0}.continue-card small{font-size:10px}.guided-option{margin:12px 0;font-size:11px}.guided-option small{font-size:10px;margin-left:6px}.input-feedback{font-size:11px;color:var(--muted);padding:8px 0;border-top:1px solid var(--line)}.progress-tabs{display:flex;gap:5px;margin-bottom:20px;flex-wrap:wrap}.progress-tabs a{padding:9px 14px;border-radius:8px;text-decoration:none;background:#e7efef;color:var(--ink);font-size:12px}.progress-tabs a.selected{background:var(--teal);color:white}.chart-note{font-size:10px;color:var(--muted)}.chart h3{font-size:14px;margin-top:20px}@media(max-width:600px){.continue-card{padding:14px;align-items:start;flex-direction:column;gap:12px}.guided-option small{display:block;margin-left:22px}.input-feedback{font-size:10px}}
/* Quiet learning games: icons and legible text, no graphics dependencies. */
.game-choices{display:flex;gap:12px;margin-bottom:22px}.game-choices button{flex:1;font-size:20px;text-align:left}.game-choices small{display:block;font-size:13px;font-weight:400;margin-top:6px}.game-choices [aria-pressed=true]{background:#e0f2ed;border:2px solid #117b7a;color:#11364c}.game-settings,.game-toolbar{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.game-settings label{flex:1;min-width:140px}.game-settings small{display:block;font-size:11px;max-width:210px}.game-toolbar{margin:18px 0;padding-top:18px;border-top:1px solid #dce6e8;align-items:center;font-size:13px}.game-toolbar select{width:auto}.game-metrics{display:flex;gap:24px;flex-wrap:wrap;background:#f0f6f6;border-radius:12px;padding:14px;margin:12px 0;font-weight:650}.race-track{padding:16px;background:#edf5f5;border-radius:14px;margin:18px 0}.track-label{font-size:11px;letter-spacing:1px;display:flex;justify-content:space-between}.lane{position:relative;height:54px;border-bottom:2px dashed #bbcdd2;direction:ltr;margin-bottom:12px}.car{position:absolute;transform:scaleX(-1);font-size:38px;color:#087d7b;left:0;line-height:1}.pc .car{color:#254f6c}.finish-flag{position:absolute;right:0;font-size:30px}.star-field{height:500px;position:relative;background:#f0f6f8;border-radius:14px;margin:18px 0 32px;overflow:hidden}.falling-star{position:absolute;transform:translateX(-50%);width:max-content;min-height:42px;background:#fff;color:#174459;border:2px solid transparent;padding:5px 10px;font-size:23px;line-height:1.35;overflow-wrap:anywhere;max-height:140px;overflow:auto}.falling-star.selected{border-color:#087d7b;background:#e0f2ed}.star-ground{position:absolute;bottom:0;margin:0;width:100%;text-align:center;border-top:2px dashed #a5b9c4;font-size:11px;color:#496476}.star-field.reduced{height:180px}.star-field.reduced .star-ground{bottom:0}.game-history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-card #game-target{min-height:100px;max-height:210px}.game-card textarea{width:100%;font-size:27px}.game-card #game-target[lang=bn],.falling-star[lang=bn]{font-family:ATTBangla,sans-serif}.game-card #game-target[lang=ur],.falling-star[lang=ur]{font-family:ATTUrdu,serif}.game-card #game-target[lang=ar],.falling-star[lang=ar]{font-family:ATTArabic,serif}[hidden]{display:none!important}@media(max-width:600px){.game-choices{gap:8px}.game-choices button{font-size:16px;padding:12px}.game-metrics{gap:10px;font-size:13px}.game-settings button{width:100%}.falling-star{font-size:19px;padding:6px}.game-toolbar label:first-child{width:100%}.game-history-heading{align-items:start;flex-direction:column}}

.star-seconds{display:block;font:11px/1.4 system-ui;color:#496476;letter-spacing:0}

.game-card #game-typing::placeholder{color:#607a84;opacity:1}

/* Compact game workspace */
@media(min-width:1000px){.game-layout{display:grid;grid-template-columns:minmax(340px, 39%) minmax(0,1fr);gap:18px;align-items:start}.game-card .game-settings{gap:8px}.game-card .game-settings label{min-width:120px}.game-card .game-toolbar{margin:8px 0;padding-top:8px;gap:8px}.game-card #game-rules{margin:6px 0;font-size:12px}.game-card .game-metrics{margin:4px 0 8px;padding:8px}.game-card .race-track{margin:8px 0;padding:10px}.game-card .lane{height:40px;margin-bottom:5px}.game-card .car{font-size:30px}.game-card .star-field{height:clamp(250px,38vh,370px);margin:8px 0}.game-card #game-target{min-height:70px;max-height:125px;font-size:24px;line-height:1.8;padding:6px 12px}.game-card textarea{font-size:23px;line-height:1.7;min-height:65px;padding:5px 10px}.game-card .keyboard-row{min-width:0;gap:2px;margin:2px 0}.game-card .key,.game-card .keyboard[lang=ur] .key{min-width:0;min-height:36px;font-size:15px}.game-card .keyboard-tools{margin-top:6px}.game-card .keyboard{margin-top:5px}.game-card .finger{margin:4px 0}.game-card #last-caught-note{font-size:11px}.game-card #game-keyboard-panel p{margin:5px 0;font-size:11px}.game-card .game-choices{margin-bottom:12px}.game-card .game-choices button{font-size:16px;padding:8px 12px}.game-card .game-choices small{font-size:11px;margin-top:2px}.game-card #game-status{margin:0 0 4px}.game-card #computer-setting small{font-size:10px}}

/* Compact practice view: retain the vertical reading, typing and keyboard order. */
@media (min-width: 901px) {
 body:has(.workspace) header{padding-top:8px;padding-bottom:8px}
 body:has(.workspace) main{padding-top:10px;padding-bottom:20px}
 body:has(.workspace) .page-heading{margin-bottom:8px}
 body:has(.workspace) .page-heading h1{font-size:25px;margin:0 0 2px}
 body:has(.workspace) .page-heading p:not(.eyebrow){margin:0;font-size:12px}
 body:has(.workspace) .language-tabs a{font-size:18px;padding:4px 12px}
 body:has(.workspace) .continue-card{padding:7px 12px;margin-bottom:8px}
 body:has(.workspace) .continue-card p{margin:0}
 body:has(.workspace) .studio{padding:12px 16px}
 body:has(.workspace) .studio-heading{padding-bottom:5px;margin-bottom:6px}
 body:has(.workspace) .studio-heading h2{margin:0;font-size:18px}
 body:has(.workspace) .controls{margin:5px 0;gap:8px}
 body:has(.workspace) .controls select{padding:6px 9px;margin-top:3px}
 body:has(.workspace) .controls button{padding:8px 12px}
 body:has(.workspace) .lesson-info, body:has(.workspace) .library-count{margin:2px 0;line-height:1.25}
 body:has(.workspace) .custom-options{margin-top:5px;padding-top:5px}
 body:has(.workspace) .metrics{margin:7px 0 4px;padding:3px 0}
 body:has(.workspace) .metrics strong{font-size:19px}
 body:has(.workspace) #status{margin:2px 0;min-height:0}
 body:has(.workspace) #target{min-height:65px;max-height:110px;padding:5px 12px;font-size:26px;line-height:1.8}
 body:has(.workspace) #typing{min-height:65px;height:72px;padding:5px 12px;font-size:25px;line-height:1.8}
 body:has(.workspace) .typing-label{margin:4px 0 2px}
 body:has(.workspace) .typing-actions{margin:4px 0;gap:8px}
 body:has(.workspace) .typing-actions button{padding:6px 12px}
 body:has(.workspace) #input-feedback:empty{display:none}
 body:has(.workspace) #keyboard-panel .keyboard-tools{margin-top:4px}
 body:has(.workspace) #keyboard-panel .keyboard-tools button{padding:4px 9px}
 body:has(.workspace) #keyboard{margin-top:4px;padding:1px}
 body:has(.workspace) #keyboard .keyboard-row{margin:2px 0;gap:3px}
 body:has(.workspace) #keyboard .key{min-height:35px;font-size:17px;line-height:1.35}
 body:has(.workspace) #keyboard[lang=ur] .key{min-height:39px}
 body:has(.workspace) #keyboard .key span[lang=ur]{line-height:1.5}
 body:has(.workspace) #finger{margin:3px 0;font-size:10px}
 body:has(.workspace) .finger-legend>span{padding:1px 5px}
}

/* Keep the guide beneath the typing box in both games. */
@media(min-width:1000px){
.game-layout{display:block}.game-card .game-toolbar{margin:5px 0;padding-top:5px}.game-card .star-field{height:clamp(220px,27vh,300px)}.game-card .keyboard-row{min-width:540px}.game-card .key,.game-card .keyboard[lang=ur] .key{min-height:38px;font-size:17px}.game-card #game-keyboard-panel .keyboard-tools{margin-top:3px}.game-card #game-keyboard-panel .keyboard{margin-top:3px}.game-card #game-keyboard-panel p{margin:2px 0}.game-card textarea{height:80px;min-height:80px}.game-card #game-target{min-height:80px;max-height:135px}
}
@media(min-width:901px){body:has(.workspace) #target{min-height:80px;max-height:130px}body:has(.workspace) #typing{min-height:84px;height:84px}}

/* Page introductions sit beside the working area on wider displays. */
@media(min-width:1000px){
body:has(.workspace) .workspace{grid-template-columns:244px minmax(0,1fr);gap:18px}
body:has(.workspace) .practice-sidebar .page-heading{display:block;margin:0 0 10px}
body:has(.workspace) .practice-sidebar .language-tabs{margin-top:8px;gap:2px;padding:3px}
body:has(.workspace) .practice-sidebar .language-tabs a{min-width:0;flex:1;padding:4px 2px;font-size:17px}
body:has(.workspace) .practice-sidebar .continue-card{display:block;padding:10px;margin:0 0 10px}
body:has(.workspace) .practice-sidebar .continue-card small{display:block;line-height:1.35}
body:has(.workspace) .practice-sidebar .continue-card .button{margin-top:8px;padding:7px 9px}
body:has(.workspace) .practice-sidebar .lesson-nav{margin-bottom:0}
main:has(> .page-heading):not(:has(.workspace)){display:grid;grid-template-columns:244px minmax(0,1fr);gap:0 18px;align-items:start}
main:has(> .page-heading):not(:has(.workspace)) > *{grid-column:2}
main:has(> .page-heading):not(:has(.workspace)) > .page-heading{grid-column:1;grid-row:1;display:block;margin:0}
main:has(> .page-heading):not(:has(.workspace)) > .page-heading h1{font-size:24px;line-height:1.2}
main:has(> .page-heading):not(:has(.workspace)) > .page-heading .language-tabs{margin-top:12px;padding:3px;gap:2px}
main:has(> .page-heading):not(:has(.workspace)) > .page-heading .language-tabs a{min-width:0;flex:1;font-size:15px;padding:8px 3px}
main:has(> .page-heading):not(:has(.workspace)) > .page-heading > a{margin-top:10px;display:inline-block}
main:has(> .page-heading):not(:has(.workspace)) > .page-heading + *{grid-column:2;grid-row:1}
}
@media(max-width:999px){.practice-sidebar{min-width:0}}

/* Game controls on the right; keyboard stays below the typing area. */
@media(min-width:1100px){
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,260px);gap:18px;align-items:start}
.game-play{grid-column:1;grid-row:1;min-width:0}.game-sidebar{grid-column:2;grid-row:1;min-width:0}
.game-card .game-choices{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.game-card .game-choices button{width:100%}
.game-card .game-settings{display:flex;flex-direction:column;align-items:stretch;gap:7px}.game-card .game-settings label{min-width:0;width:100%}.game-card .game-settings select,.game-card .game-settings input{width:100%}.game-card .game-settings button{width:100%}.game-card .game-settings small{max-width:none}
.game-card .game-toolbar{align-items:center;gap:7px}.game-card .game-toolbar label:first-child{width:100%}.game-card .game-toolbar select{width:100%}.game-card .keyboard-row{min-width:0}.game-card .key{min-width:0}
}

/* Bring game controls and play area closer to the header. */
@media(min-width:1000px){body:has(.game-card) main{padding-top:8px}}

/* Shift character reference on the main keyboard layer. */
.keyboard .key{position:relative}.keyboard .key .key-shift-hint{position:absolute;top:1px;right:3px;color:#627480;font-size:11px;line-height:1.3;pointer-events:none}

/* Balloon Shooting uses the same play area and keyboard placement as Falling Stars. */
.star-field.balloon-field .star-ground{top:0;bottom:auto;border-top:0;border-bottom:2px dashed #a5beca}.star-field .rising-balloon{border-radius:48% 48% 42% 42%;background:#e6f5ef;border:1px solid #9dcbbb;box-shadow:0 2px 0 #bddbd1;padding:7px 13px}.star-field .rising-balloon:after{content:"";position:absolute;top:100%;left:50%;height:11px;border-left:1px solid #8ca5a3}.star-field .rising-balloon.selected{background:#d1eee4;border:2px solid #087e78}

/* Balloon shapes and a brief arrow on a successful hit. */
.star-field .rising-balloon{overflow:visible;max-height:none;min-width:66px;min-height:78px;border-radius:50% 50% 46% 46%;background:#ccefe4;border:2px solid #6daea1;box-shadow:inset -6px -6px 0 #95ccbc,0 2px 4px #17445922;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 11px 12px;line-height:1.3}.star-field .rising-balloon:before{content:"";position:absolute;bottom:-6px;left:calc(50% - 4px);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid #6daea1}.star-field .rising-balloon:after{height:22px;top:calc(100% + 5px);border-left:1px solid #719e99}.star-field .rising-balloon.selected{background:#d5f4e9;border-color:#087e78}.star-field .rising-balloon.balloon-hit{pointer-events:none;z-index:5;animation:balloon-pop .6s ease-out forwards}.star-field .rising-balloon.balloon-hit:after{content:"➜";position:absolute;border:0;top:35%;left:-50px;height:auto;color:#18596d;font:28px/1 sans-serif;animation:balloon-arrow .35s ease-in forwards}@keyframes balloon-arrow{to{transform:translateX(55px)}}@keyframes balloon-pop{0%,60%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.2)}}

/* Larger, legible key characters while retaining the vertical typing layout. */
.keyboard .key:not(.wide):not(.space) > span:not(.key-shift-hint){font-size:clamp(26px,2.3vw,34px);line-height:1.25;min-height:1.15em}.keyboard .key span[lang=ur]:not(.key-shift-hint){line-height:1.5}.keyboard .key .key-shift-hint{font-size:clamp(12px,1.05vw,15px);line-height:1.2}.keyboard .key small{font-size:9px}.keyboard .key:not(.wide):not(.space){min-height:48px;padding:2px 2px}.game-card .keyboard .key:not(.wide):not(.space),body:has(.workspace) #keyboard .key:not(.wide):not(.space){min-height:48px}.game-card #game-keyboard-panel .keyboard-row,body:has(.workspace) #keyboard .keyboard-row{gap:2px;margin:2px 0}
@media(min-width:1000px) and (max-height:1100px){.game-card .star-field{height:clamp(150px,19vh,180px)}.game-card .race-track{margin:4px 0;padding:5px 10px}.game-card .lane{height:32px;margin-bottom:3px}.game-card textarea{height:65px;min-height:65px}.game-card .game-metrics{margin:3px 0;padding:5px 8px}.game-card #game-keyboard-panel p{margin:1px 0}}

/* Make the secondary Shift characters easier to read on every keyboard. */
.keyboard .key .key-shift-hint{font-size:clamp(17px,1.5vw,21px);line-height:1.05;top:1px;right:2px;color:#536b77;text-shadow:0 0 2px #fff,0 0 2px #fff}

/* The Urdu honorific occupies several letters; keep it within its key. */
.keyboard .key[aria-label*="Shift: ﷺ"] .key-shift-hint{font-size:9px;line-height:1}

/* Make the secondary Shift and physical-key labels easier to read. */
.keyboard .key:not(.wide):not(.space) > span:not(.key-shift-hint){transform:translate(-4px,3px)}
.keyboard .key .key-shift-hint{font-size:clamp(22px,1.8vw,26px);line-height:1;top:0;right:1px;color:#536b77}
.keyboard .key small{font:600 12px/1 system-ui,sans-serif;color:#b32635}
.keyboard .key[aria-label*="Shift: ﷺ"] .key-shift-hint{font-size:9px;line-height:1}

/* Separate the three labels on each key, for at-a-glance reading. */
.keyboard .key:not(.wide):not(.space){position:relative;min-height:72px;height:72px;padding:0;overflow:hidden}
.keyboard .key:not(.wide):not(.space)>span:not(.key-shift-hint){position:absolute;left:3px;bottom:15px;transform:none;font-size:clamp(29px,2.5vw,36px);line-height:1.1;min-height:0;max-width:72%;}
.keyboard .key:not(.wide):not(.space)>span[lang=ur]:not(.key-shift-hint){line-height:1.3}
.keyboard .key .key-shift-hint{position:absolute;top:0;right:2px;font-size:clamp(25px,2.1vw,29px);line-height:1.05;color:#536b77;text-shadow:none;max-width:65%;}
.keyboard .key small{position:absolute;bottom:1px;right:3px;font:700 16px/1 system-ui,sans-serif;color:#b32635}
.keyboard .key[aria-label*="Shift: ﷺ"] .key-shift-hint{font-size:10px;line-height:1}

/* ATT wider games layout 20261029 */
@media (min-width: 1000px) {
 body:has(.game-card) main:has(> .page-heading):not(:has(.workspace)) { max-width:1600px; grid-template-columns:160px minmax(0,1fr); column-gap:16px; }
 body:has(.game-card) main > .page-heading h1 { font-size:21px; line-height:1.25; }
 body:has(.game-card) main > .page-heading .language-tabs { flex-wrap:wrap; }
 body:has(.game-card) main > .page-heading .language-tabs a { flex:1 1 100%; padding:7px 6px; }
}
@media (min-width: 1100px) {
 .game-card .game-layout { grid-template-columns:minmax(0,1fr) 220px; gap:16px; }
 .game-card #game-keyboard-panel .keyboard-row { gap:4px; }
}

/* ATT game keyboard palette 20261029 */
.game-card #game-keyboard .key[aria-label$="little finger"] { background:#e9eaf6; border-color:#d1d5e8; }
.game-card #game-keyboard .key[aria-label$="ring finger"] { background:#e0edf8; border-color:#c9ddeb; }
.game-card #game-keyboard .key[aria-label$="middle finger"] { background:#f5efd8; border-color:#e7dbb7; }
.game-card #game-keyboard .key[aria-label$="index finger"] { background:#dbefeb; border-color:#bfddd6; }
.game-card #game-keyboard .key.wide, .game-card #game-keyboard .key.space { background:#edf3f5; border-color:#d1dfe3; }
.game-card #game-keyboard .key.hint { background:#bce2da; border-color:#77b5a7; outline:2px solid var(--teal); }
.game-card #game-keyboard .key:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }

/* ATT stars and balloons scenery 20261029 */
.game-card .star-field:not(.balloon-field) {
 background-color:#13263e;
 background-image:radial-gradient(circle at 12% 18%,#dae8f7 0 1px,transparent 2px),radial-gradient(circle at 72% 30%,#a5c8df 0 1px,transparent 2px),radial-gradient(circle at 45% 67%,#ebdfb8 0 1px,transparent 2px),linear-gradient(155deg,#0e1c32,#234662);
 background-size:117px 89px,173px 113px,211px 137px,100% 100%;border:1px solid #315674;
}
.game-card .star-field:not(.balloon-field) .star-ground { color:#dceaf4;border-color:#7e9db7;background:#162d45e8;z-index:2; }
.game-card .star-field:not(.balloon-field) .falling-star {
 isolation:isolate;background:transparent;border:0;border-radius:12px;box-shadow:none;color:#253747;
 min-width:100px;min-height:82px;padding:15px 26px 13px;overflow:visible;text-align:center;z-index:1;
}
.game-card .star-field:not(.balloon-field) .falling-star::before {
 content:"";position:absolute;inset:0;z-index:-1;background:#ffe7a0;
 clip-path:polygon(50% 0%,62% 25%,96% 14%,85% 43%,100% 57%,73% 66%,76% 96%,50% 82%,24% 96%,27% 66%,0% 57%,15% 43%,4% 14%,38% 25%);
}
.game-card .star-field:not(.balloon-field) .falling-star.selected::before { background:#fff5c9; }
.game-card .star-field:not(.balloon-field) .falling-star.selected { filter:drop-shadow(0 0 4px #ffe5a0);outline:2px solid #fff0b2;outline-offset:1px; }
.game-card .star-field:not(.balloon-field) .star-seconds { color:#46515a; }
.game-card .star-field.balloon-field { background:radial-gradient(ellipse at 16% 65%,#ffffffb8 0 9%,transparent 10%),radial-gradient(ellipse at 82% 38%,#ffffffb8 0 12%,transparent 13%),linear-gradient(#dfeff8,#f1faf7);border:1px solid #c5dfe8; }
.game-card .star-field.balloon-field .star-ground { color:#35576b;background:#ffffffc9;border-color:#91b8c9;z-index:2; }
.game-card .star-field .rising-balloon { --balloon-fill:#d7eee6;--balloon-edge:#8ab8a6;background:radial-gradient(ellipse at 30% 22%,#ffffffb0,transparent 32%),var(--balloon-fill);border-color:var(--balloon-edge);box-shadow:inset -5px -5px 0 #183c5110,0 2px 5px #183c5120;color:#173c51; }
.game-card .star-field .rising-balloon:nth-of-type(4n+2) { --balloon-fill:#dcecfb;--balloon-edge:#98b9d8; }
.game-card .star-field .rising-balloon:nth-of-type(4n+3) { --balloon-fill:#eee5f6;--balloon-edge:#b4a2cd; }
.game-card .star-field .rising-balloon:nth-of-type(4n+4) { --balloon-fill:#fff0c9;--balloon-edge:#ccb778; }
.game-card .star-field .rising-balloon::before { border-bottom-color:var(--balloon-edge); }
.game-card .star-field .rising-balloon.selected { outline:3px solid #177b79;outline-offset:2px;border-color:#177b79; }
.game-card .star-field .falling-star:focus-visible { outline:3px solid #41bcb3;outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .game-card .star-field .balloon-hit { animation:none;opacity:0; } }
.game-card .star-field.reduced .balloon-hit { animation:none;opacity:0; }

/* ATT taller game fields 20261029 */
body:has(.game-card) .page-heading .game-status-panel { margin-top:18px;padding:12px;background:#eaf4f3;border:1px solid #cbdedc;border-radius:12px;min-width:0; }
body:has(.game-card) .page-heading #game-status { margin:0 0 10px;font-size:12px;line-height:1.5;overflow-wrap:anywhere; }
body:has(.game-card) .page-heading .game-metrics { display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:0;background:transparent;font-size:13px;line-height:1.5; }
body:has(.game-card) .page-heading #game-clock { color:#136c70;font-size:17px;font-weight:750; }
.game-card #star-field { height:clamp(300px,36vh,440px); }
@media(max-width:999px) {
 body:has(.game-card) .page-heading .game-status-panel { flex-basis:100%;width:100%;margin-top:5px; }
 body:has(.game-card) .page-heading .game-metrics { flex-direction:row;flex-wrap:wrap;gap:8px 20px; }
 body:has(.game-card) .page-heading { flex-wrap:wrap; }
 .game-card #star-field { height:clamp(280px,42vh,400px); }
}

/* ATT sidebar typing notes 20261029 */
body:has(.game-card) .page-heading .game-typing-notes { margin-top:14px;padding:10px 12px;border:1px solid #d4e3e5;border-radius:12px;background:#f7fafb; }
body:has(.game-card) .page-heading #last-caught-note { display:block;font-size:11px;line-height:1.5;color:#506c79; }
body:has(.game-card) .page-heading #game-hint { font-size:11px;line-height:1.5;text-align:left;margin:8px 0 0;overflow-wrap:anywhere; }
.game-card #game-keyboard-panel { margin-top:5px; }
@media(min-width:1000px) {
 body:has(.game-card) header { padding-top:10px;padding-bottom:10px; }
 .game-card { padding-top:16px;padding-bottom:16px; }
 .game-card #star-field { height:clamp(300px,calc(100vh - 620px),440px);margin-top:0;margin-bottom:8px; }
 .game-card #game-keyboard-panel > summary { font-size:11px;line-height:1.2; }
 .game-card #game-keyboard-panel .keyboard-tools { margin-top:2px; }
 .game-card #game-keyboard-panel .keyboard-tools button { padding:4px 9px; }
}

/* ATT compact game keys taller field 20261029 */
@media(min-width:1100px) {
 .game-card #game-keyboard .key:not(.wide):not(.space) { height:60px;min-height:60px; }
 .game-card #game-keyboard .key:not(.wide):not(.space) > span:not(.key-shift-hint) { bottom:14px; }
 .game-card #game-keyboard .key small { font-size:15px; }
 .game-card #game-keyboard .key.wide,.game-card #game-keyboard .key.space { min-height:30px;height:30px; }
 .game-card #star-field { height:clamp(340px,calc(100vh - 565px),490px); }
}