@font-face{font-family:Nunito;src:url('assets/fonts/Nunito.ttf')}@font-face{font-family:Amiri;src:url('assets/fonts/Amiri-Regular.ttf')}
:root{--cream:#fff6de;--paper:#fffdf4;--ink:#363326;--teal:#11695f;--gold:#e7a72a;--red:#ae3542;--line:#e8d7ab;--muted:#726a51;--shadow:0 7px 22px #68401b16}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--cream);color:var(--ink);font-family:Nunito,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #14796f;outline-offset:3px}button{touch-action:manipulation}a{color:var(--teal)}h1,h2,h3,p{margin:0}h1{font-size:26px;line-height:1.2}h2{font-size:22px}h3{font-size:18px}p{line-height:1.6}svg.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}.ar{font-family:Amiri,serif;direction:rtl;unicode-bidi:isolate}.muted{color:var(--muted);font-size:14px}.eyebrow{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:900;color:var(--teal)}
#app{max-width:760px;min-height:100%;margin:auto}.boot{min-height:90vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}.brand-mark{display:inline-grid;place-items:center;background:var(--teal);color:#ffe7a0;border-radius:22px;width:76px;height:76px;font:58px Amiri}.toolbar{height:74px;display:flex;gap:12px;align-items:center;padding:12px 18px;position:sticky;top:0;z-index:5;background:#fff6def5;border-bottom:1px solid var(--line)}.toolbar-title{flex:1;min-width:0}.toolbar-title strong{display:block;font-size:17px}.toolbar-title span{font-size:12px;color:var(--muted)}.icon-btn{border:1px solid var(--line);border-radius:16px;width:46px;height:46px;background:var(--paper);display:inline-grid;place-items:center;flex:none}.icon-btn:active{transform:scale(.95)}.page{padding:26px 22px 35px}.page>p{margin:12px 0 24px}.page-heading{margin-bottom:22px}.row{display:flex;gap:12px;align-items:center}.spread{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:12px}.grow{flex:1}.card{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:23px;padding:22px}.button{border:0;border-radius:16px;background:var(--teal);color:white;min-height:50px;padding:13px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:850;line-height:1.3;box-shadow:0 4px 0 #094f48}.button:active{transform:translateY(2px);box-shadow:0 2px 0 #094f48}.button.secondary{background:#fff8e3;border:1px solid var(--line);color:var(--teal);box-shadow:0 3px 0 #e4d1a2}.button.gold{background:#ffc552;color:#473513;box-shadow:0 4px 0 #c68c23}.button.danger{background:#a72e3b;box-shadow:0 4px 0 #7b1b25}.button.full{width:100%}.button.small{min-height:42px;padding:9px 15px;font-size:14px}.pill{display:inline-flex;align-items:center;gap:6px;background:#e7efe2;color:var(--teal);padding:7px 12px;border-radius:20px;font-size:12px;font-weight:850}.progress{height:8px;border-radius:8px;background:#e6ddc7;overflow:hidden}.progress>i{display:block;height:100%;background:var(--teal);border-radius:8px;transition:width .3s}.section-space{margin-top:25px}.empty{padding:30px;text-align:center;color:var(--muted)}
/* The native container consumes Android system insets once; this is the WebView viewport. */
#app[data-view="home"],#app[data-view="corridor"]{max-width:none;height:var(--app-height,100dvh);min-height:0;overflow:hidden}
#app[data-view="corridor"]{display:flex;flex-direction:column}
.home{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#ffc424;overflow:hidden}
.home-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px clamp(10px,3vw,24px);background:#fff2d8;border-bottom:1px solid #e0bd75;z-index:2;min-width:0}
.home-bar .icon-btn{width:44px;height:44px;border-radius:14px}
.home-caption{text-align:center;font-size:clamp(13px,3.7vw,17px);font-weight:900;line-height:1.35;min-width:0}
.home-caption span{display:block;color:var(--muted);font-size:clamp(10px,2.6vw,12px);font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.room-wrap{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#ffd14f,#ffbf1f 72%);touch-action:pan-y}
.room{position:relative;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex:none}
.room>img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.room-action{position:absolute;left:50%;transform:translateX(-50%);bottom:8%;width:max-content;max-width:84%;min-width:min(200px,80%);min-height:44px;padding:11px clamp(10px,2.8vw,20px);font-size:clamp(13px,3.8vw,18px);white-space:normal;line-height:1.25;text-align:center}
.room-action:active{transform:translate(-50%,2px)}
.room-prev,.room-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:54px;display:grid;place-items:center;background:#fff5d9e8;border:1px solid #d9ab43;border-radius:15px;box-shadow:0 4px 8px #51340022;z-index:1}
.room-prev{left:clamp(5px,1.7vw,20px)}.room-next{right:clamp(5px,1.7vw,20px)}
.room-prev .ico,.room-next .ico{width:21px;height:21px}
.home-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff5dd;border-top:1px solid #d6b677;padding:6px clamp(6px,2vw,18px);gap:6px;z-index:2;min-width:0}
.home-nav button{min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;padding:6px 4px;border-radius:15px;font-size:clamp(11px,3.3vw,14px);font-weight:900;color:#756544;line-height:1.25}
.home-nav button.active{background:var(--teal);color:#fff9dd}
.home-nav .ico{width:23px;height:23px}
.room-indicator{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:center;gap:7px;pointer-events:none}
.room-indicator i{width:7px;height:7px;border-radius:50%;background:#ffefb790;border:1px solid #80552b}
.room-indicator i.active{width:22px;border-radius:8px;background:#fff4d0}
.scene-arrival{animation:scene-arrival .32s cubic-bezier(.2,.65,.2,1)}
@keyframes scene-arrival{from{opacity:.35;transform:translateX(calc(var(--scene-direction,1)*22px))}to{opacity:1;transform:translateX(0)}}
.corridor{--door-card-width:clamp(200px,76vw,330px);background:linear-gradient(#fff4d3 0,#fff4d3 67%,#d7e4c6 67%,#d7e4c6 87%,#794127 87%);flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.corridor-heading{padding:clamp(8px,2vh,20px) 18px 5px;text-align:center;flex:none}
.corridor-heading h1{font-size:clamp(20px,5.5vw,29px);margin-top:3px}
.corridor-heading p{margin-top:5px}
.doors{position:relative;display:flex;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px max(12px,calc((100% - var(--door-card-width))/2)) 10px;gap:clamp(18px,4vw,38px);scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch}
.doors::-webkit-scrollbar{display:none}
.door-card{flex:0 0 var(--door-card-width);width:var(--door-card-width);min-width:0;min-height:0;text-align:center;scroll-snap-align:center;position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto}
.door-stars{color:#b58a35;font-size:clamp(18px,3vh,24px);letter-spacing:3px;line-height:1.2;padding:2px 0}
.door-stars .earned{color:#d48100}
.door-top{font-family:Amiri,serif;font-size:clamp(21px,4.5vw,29px);color:#fff8d4;background:#b33341;border:4px solid #d18b45;border-radius:40% 40% 13px 13px/28% 28% 13px 13px;min-height:clamp(48px,8vh,72px);display:flex;align-items:center;justify-content:center;padding:4px 8px;margin:0 4px 7px;line-height:1.3;overflow-wrap:normal}
.door-portal{position:relative;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;perspective:850px}
.door-portal:before{content:'';position:absolute;bottom:0;width:var(--door-width,78%);height:var(--door-height,100%);background:radial-gradient(ellipse at 50% 60%,#fffde1,#eeb343 70%,#926133);border-radius:11px 11px 0 0}
.door-body{position:relative;width:var(--door-width,78%);height:var(--door-height,100%);min-height:0;border:clamp(5px,1.7vw,10px) solid #b98b4e;border-bottom:0;border-radius:11px 11px 0 0;background:#f4e9b3;box-shadow:5px 0 0 #513a24,inset 5px 3px 0 #ddce92;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px;overflow:hidden;transform-origin:left center;backface-visibility:hidden}
.door-body:before{content:'';position:absolute;inset:7% 10% 12%;border:3px solid #dacf9e;pointer-events:none}
.door-body:after{content:'';position:absolute;right:6%;bottom:26%;width:clamp(8px,calc(var(--door-width,200px)*.065),16px);height:clamp(15px,calc(var(--door-height,290px)*.1),30px);background:#b3b3a1;border:2px solid #818377;border-radius:15px}
.door-body .number{font:clamp(28px,calc(var(--door-width,200px)*.38),88px) Amiri;color:#ab813c;line-height:1.1;z-index:1}
.door-body .door-lock{position:relative;display:grid;place-items:center;color:#5c7059;width:clamp(24px,calc(var(--door-width,200px)*.25),58px);height:clamp(24px,calc(var(--door-width,200px)*.24),55px);border-radius:10px;background:#d8d9b5;margin-top:clamp(3px,2vh,18px);z-index:1}
.door-lock .ico{width:60%;height:60%}
.door-body.available .door-lock{color:#fffbe9;background:var(--teal)}
.door-body:focus-visible{outline-offset:-4px}
.door-rug{width:88%;height:clamp(9px,2.5vh,22px);background:#946235;border:3px solid #54371d;transform:perspective(80px) rotateX(18deg);margin:5px auto 7px}
.door-desc{padding:clamp(8px,1.6vh,14px);background:#fff8e5;border-radius:16px;border:1px solid #e5cc97;text-align:left}
.door-desc h3{font-size:clamp(13px,3.5vw,16px);line-height:1.25;min-height:0}
.door-desc .muted{font-size:12px;margin:5px 0;line-height:1.35}
.door-desc .progress{height:6px}
.door-navigation{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,28px);padding:7px 12px;background:#fff4d9;flex:none;border-top:1px solid #d6b677}
.door-navigation>div{text-align:center;min-width:0}
.door-navigation strong{display:block;font-size:14px}
.door-navigation span{font-size:11px;color:var(--muted);display:block}
.door-navigation .icon-btn{width:44px;height:44px}

.arabic-heading{font-family:Amiri,serif;direction:rtl;font-size:34px;color:var(--teal);margin:10px 0}.part-card{display:flex;align-items:center;gap:18px;width:100%;border:1px solid var(--line);background:var(--paper);border-radius:22px;padding:17px;text-align:left;box-shadow:var(--shadow)}.part-symbol{font:43px Amiri;direction:rtl;width:82px;min-height:75px;border-radius:17px;background:#f8e3ac;display:grid;place-items:center;color:#684c20;line-height:1.5}.part-card .title{font-size:17px;font-weight:900}.part-card .muted{margin:5px 0 9px}.part-card .ico{width:20px}.lesson-tabs{display:flex;gap:8px;margin:17px 0 23px}.lesson-tabs .button{flex:1;padding:10px;font-size:14px}.letter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;direction:rtl}.letter{position:relative;min-height:85px;border:1px solid #e3ce91;border-bottom:4px solid #d9bb6f;border-radius:17px;background:var(--paper);font:44px Amiri;color:var(--teal);line-height:1.5}.letter.done{background:#ecf2df;border-color:#afc69b}.letter .tick{position:absolute;top:5px;right:7px;font:12px Nunito;color:var(--teal)}.lesson-instruction{font-size:14px;color:var(--muted);margin-bottom:17px}.chalkboard{border:9px solid #c58f43;border-radius:18px;background:radial-gradient(ellipse at 30% 20%,#344b3e,#20362b);box-shadow:inset 0 0 14px #0005,0 5px 0 #996831;position:relative;overflow:hidden}.animation-frame{border:0;display:block;width:100%;height:260px;filter:brightness(1.65);pointer-events:none}.word-image{display:block;width:100%;height:115px;object-fit:contain;filter:brightness(1.8);padding:15px}.play-row{display:flex;align-items:center;gap:12px;margin-top:20px}.play-row .button{flex:1}.audio-status{text-align:center;min-height:24px;margin:13px 0 0;color:var(--muted);font-size:13px}.example-nav{display:flex;gap:8px;margin-top:20px}.example-dot{flex:1;height:45px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-weight:900}.example-dot.selected{background:var(--teal);color:white;border-color:var(--teal)}.example-dot.done:after{content:' ✓';font-size:10px}.word-caption{font-size:13px;text-align:center;color:var(--muted);margin:15px 0}.tip{padding:15px 18px;border-left:4px solid var(--gold);background:#fff1c8;border-radius:0 15px 15px 0;font-size:14px;line-height:1.6}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.quiz-option{min-height:110px;border:2px solid var(--line);border-radius:22px;background:var(--paper);font:46px Amiri;line-height:1.5;color:var(--teal)}.quiz-option.correct{background:#e0edcd;border-color:#5c925c}.quiz-option.wrong{background:#fbe6de;border-color:#b9544b}.quiz-feedback{font-weight:850;text-align:center;min-height:45px;line-height:1.6}.quiz-count{font-size:13px;color:var(--muted)}.score{font-size:70px;font-weight:1000;line-height:1;color:var(--teal);margin:22px}.result{text-align:center}.result-stars{color:#db9a1e;font-size:42px;letter-spacing:7px;margin:12px}
.search{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 17px;color:var(--ink);margin:18px 0}.surah-card{border:1px solid var(--line);background:var(--paper);border-radius:20px;display:flex;gap:15px;align-items:center;text-align:left;padding:16px;margin-bottom:10px;width:100%}.surah-number{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f7e8bd;color:#8b6a25;font-size:13px;font-weight:900}.surah-card .ar{font-size:24px}.surah-card .name{font-size:15px;font-weight:900}.surah-card .muted{font-size:12px}.surah-content{padding:22px 18px 172px}.surah-title{text-align:center;margin-bottom:22px}.surah-title .ar{font-size:32px;line-height:1.8}.verse{display:block;width:100%;padding:15px 18px;margin-bottom:10px;border:1px solid var(--line);background:var(--paper);border-radius:19px;text-align:right;transition:background .2s;color:var(--ink)}.verse .ar{font-size:31px;line-height:1.9;display:block}.verse .verse-label{display:flex;justify-content:space-between;font:11px Nunito;color:var(--muted);margin-top:5px}.verse.current{background:#e5efd8;border:2px solid #6b9270;padding:14px 17px}.verse.heard .verse-label{color:var(--teal)}.quran-controls{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:760px;padding:13px 18px 18px;background:#fff7e5f7;box-shadow:0 -5px 24px #69491515;border-top:1px solid var(--line);z-index:4}.quran-controls .row{justify-content:center}.quran-controls .button{min-width:134px}.quran-controls .repeat-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:12px}.toggle-btn{border:1px solid var(--line);background:var(--paper);padding:7px 11px;border-radius:12px;min-height:38px;font-size:12px}.toggle-btn.on{background:var(--teal);border-color:var(--teal);color:white}.quran-time{font-variant-numeric:tabular-nums}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0}.setting p{font-size:12px;color:var(--muted);margin-top:4px}.setting input[type=checkbox]{width:24px;height:24px;accent-color:var(--teal);flex:none}.setting select{border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:8px}.setting label{flex:1}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.stat{padding:18px;background:#f5e9c7;border-radius:20px;text-align:center}.stat strong{display:block;font-size:31px;color:var(--teal)}.stat span{font-size:12px}.settings-note{margin:20px 0;color:var(--muted);font-size:13px}.footer-note{text-align:center;color:var(--muted);font-size:11px;margin-top:28px;line-height:1.7}
.modal-shade{position:fixed;inset:0;background:#25251be0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.modal{background:var(--cream);width:100%;max-width:470px;border-radius:29px;padding:24px;max-height:94dvh;overflow:auto;box-shadow:0 20px 60px #0006}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.modal-header h2{font-size:22px}.modal .animation-frame{height:min(31dvh,260px)}.modal p{margin:12px 0 20px}.modal .play-row{margin-top:18px}.modal-actions{display:flex;gap:12px;margin-top:25px}.modal-actions .button{flex:1}.modal .arabic-big{font-size:72px;text-align:center;color:var(--teal)}#toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%,15px);background:#253e33;color:#fffbe5;padding:12px 19px;border-radius:17px;z-index:50;box-shadow:var(--shadow);font-size:14px;font-weight:800;max-width:88%;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}
/* Content grows vertically on small screens, while the home and door stage fit the viewport. */
.grow,.part-card>div,.toolbar-title,.setting label{min-width:0}
.toolbar{height:auto;min-height:64px;flex:none;padding:9px 14px}
.toolbar-title strong{font-size:clamp(14px,3.9vw,17px);line-height:1.3;overflow-wrap:anywhere}
.toolbar-title span{display:block;line-height:1.3;margin-top:2px}
.page,.surah-content{max-width:760px;margin-inline:auto}
.page{padding:22px clamp(14px,4vw,30px) 30px}
.part-card{gap:12px;padding:14px}
.part-symbol{width:clamp(58px,20vw,82px);flex:none;font-size:clamp(33px,9vw,43px)}
.part-card .title{font-size:clamp(14px,4vw,17px)}
.modal-shade{padding:12px}
.modal{max-height:calc(var(--app-height,100dvh) - 24px);padding:clamp(16px,4vw,24px)}
.modal-header h2{font-size:clamp(18px,5vw,22px)}
.modal .animation-frame{height:clamp(110px,calc(var(--app-height,100dvh)*.3),260px)}
.quran-controls{padding:10px 14px 12px}
.verse .ar{font-size:clamp(25px,7.4vw,33px);overflow-wrap:break-word}
.verse .verse-label{gap:8px;flex-wrap:wrap}
.quran-controls .repeat-row{flex-wrap:wrap;row-gap:6px}
.setting{gap:10px}.setting select{max-width:45%;font-size:13px}
.lesson-tabs .button{padding:10px 7px;font-size:13px}
.letter-grid{gap:8px}.letter{min-width:0;font-size:clamp(32px,10vw,44px)}
.page{animation:page-arrival .2s ease-out}
@keyframes page-arrival{from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:600px){
 .letter-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
 .animation-frame{height:330px}.quiz-option{min-height:140px}
 .home-nav{padding-inline:max(12px,calc((100% - 600px)/2))}
 .home-nav button{font-size:14px}
}
@media(max-height:650px){
 .home-bar{padding-block:4px}.home-caption{font-size:13px}
 .home-nav{padding-block:4px}.home-nav button{min-height:48px;padding:4px}
 .room-action{font-size:13px;min-height:44px;padding:8px 12px}
 .corridor-heading{padding-top:6px}.corridor-heading .eyebrow{font-size:10px}
 .corridor-heading h1{font-size:21px}.corridor-heading p{display:none}
 .door-top{min-height:42px;font-size:21px;margin-bottom:4px;border-width:3px}
 .door-desc{padding:7px 10px}.door-desc .muted{font-size:11px;margin:3px 0}
 .door-stars{font-size:17px}.door-rug{height:10px;margin:4px auto}
 .door-navigation{padding-block:5px}
 .toolbar{min-height:56px;padding-block:5px}
 .modal-header{margin-bottom:12px}.modal .play-row{margin-top:10px}
 .modal .audio-status{margin-top:8px}
}
@media(orientation:landscape) and (max-height:600px){
 .home{grid-template-columns:minmax(0,1fr) 90px;grid-template-rows:auto minmax(0,1fr)}
 .home-bar{grid-column:1/-1}
 .home-nav{grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));padding:8px 6px;border-top:0;border-left:1px solid #d6b677;gap:7px}
 .home-nav button{font-size:12px;min-height:44px}
 .room-action{min-width:0;max-width:94%;width:max-content;min-height:40px;font-size:12px;padding:7px 9px;bottom:7%}
 .room-action .ico{width:19px;height:19px}
 .corridor{--door-card-width:clamp(270px,54vw,430px)}
 .door-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:10px}
 .door-portal{grid-column:1;grid-row:1/-1}
 .door-stars{grid-column:2;grid-row:1}
 .door-top{grid-column:2;grid-row:2}
 .door-desc{grid-column:2;grid-row:3;align-self:end}
 .corridor-heading{padding:4px 14px 1px}.corridor-heading .eyebrow{display:none}
 .corridor-heading h1{font-size:18px;margin:0}
 .door-stars{font-size:14px;padding:0}
 .door-top{min-height:31px;font-size:18px;padding:2px 7px;margin-bottom:3px}
 .door-desc{padding:4px 8px}.door-desc h3{font-size:12px}
 .door-desc .muted{font-size:10px;margin:2px 0}.door-desc .progress{height:4px}
 .door-rug{display:none}
 .door-navigation{padding:4px 10px}.door-navigation span{display:none}
 .doors{padding-bottom:5px}
}
@media(max-width:340px){
 .home-bar .home-caption span{letter-spacing:.3px}
 .room-prev,.room-next{width:40px;height:48px}
 .room-action{max-width:86%;font-size:13px}
 .page{padding-inline:12px}.card{padding:16px}
 .toolbar{gap:8px;padding-inline:10px}.toolbar .icon-btn{width:42px;height:44px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
.animation-frame.letter-animation{filter:none}
/* The board is a centered responsive component; text is never baked into art. */
.lesson-home .room-wrap{background:radial-gradient(ellipse at 50% 30%,#ffe085,#ffc62e 74%)}
.lesson-home .room-wrap:before{content:'';position:absolute;inset:0 5% 16%;border-inline:6px double #e9a92566;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),#edac2624 calc(50% - 1px),#edac2624 50%);pointer-events:none}
.lesson-home .room-wrap:after{content:'';position:absolute;inset:84% 0 0;background:repeating-linear-gradient(0deg,transparent 0,transparent 24px,#d898563d 25px,#5e2e1c 27px),linear-gradient(#955323,#60311f);border-top:10px solid #ad6b2f;box-shadow:0 -3px 0 #d89b46;pointer-events:none}
.lesson-scene{display:grid;place-items:center;z-index:1;padding:18px 18px 64px;overflow:auto}
.lesson-entrance{width:min(100%,500px);display:flex;flex-direction:column;align-items:center;text-align:center}
.classroom-clock{display:block;height:clamp(48px,calc(var(--app-height,100dvh)*.11),90px);width:auto;flex:none;margin-bottom:16px}
.board-assembly{width:100%;position:relative}
.lesson-board{position:relative;min-height:145px;height:clamp(145px,calc(var(--app-height,100dvh)*.3),270px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 12px 22px;border:clamp(8px,2.5vw,14px) solid #ca8d3c;border-radius:17px;background:radial-gradient(ellipse at 35% 20%,#39433c,#252f2b);box-shadow:inset 0 3px 8px #10150f80,0 4px 0 #986027,0 8px 16px #88532124}
.board-arabic{display:flex;align-items:center;justify-content:center;gap:clamp(24px,9vw,58px);font:clamp(44px,calc(var(--app-height,100dvh)*.095),78px)/1.15 Amiri,serif;color:#fff9e8;text-shadow:1px 2px 0 #ffffff22;flex:none}
.lesson-board p{font-size:clamp(12px,3.5vw,18px);color:#f8eed1;line-height:1.4;letter-spacing:.1px}
.chalk-piece{position:absolute;width:24px;height:4px;bottom:4px;left:20px;border-radius:2px;background:#f1efdf;box-shadow:0 1px 0 #a19d82}
.lesson-plaque{position:relative;display:inline-block;max-width:90%;margin:-3px auto 0;z-index:1;background:linear-gradient(#b92f3f,#9f2433);color:#fff7d8;border:3px solid #bf8036;border-top:0;border-radius:0 0 18px 18px;padding:11px clamp(12px,4vw,27px);font-size:clamp(17px,4.7vw,26px);font-weight:850;line-height:1.3;box-shadow:0 3px 0 #935329}
.classroom-lamp{position:absolute;top:-14px;z-index:2;width:35px;height:16px;background:linear-gradient(#394a43,#192e2b);border-radius:30px 30px 4px 4px;box-shadow:0 3px 0 #f4e4a7;pointer-events:none}
.classroom-lamp:after{content:'';position:absolute;top:19px;left:50%;transform:translateX(-50%);width:100px;height:90px;background:linear-gradient(#fff4b553,transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.lamp-left{left:18%}.lamp-right{right:18%}
.lesson-enter{margin-top:27px;min-height:50px;min-width:210px;max-width:90%;font-size:17px;padding-inline:25px}
.lesson-home .room-prev,.lesson-home .room-next{top:auto;bottom:12px;transform:none;height:44px;width:44px;z-index:3;border-radius:13px}
.lesson-home .room-prev{left:16px}.lesson-home .room-next{right:16px}
.lesson-home .room-indicator{bottom:29px;z-index:3}
@media(max-height:600px){.classroom-clock{height:45px;margin-bottom:10px}.lesson-scene{padding-top:10px;padding-bottom:58px}.lesson-board{height:135px;min-height:120px;gap:7px;padding:12px}.board-arabic{font-size:44px}.lesson-plaque{padding-block:8px;font-size:17px}.lesson-enter{margin-top:16px;min-height:44px;font-size:14px}}
@media(orientation:landscape) and (max-height:600px){.lesson-scene{padding:8px 64px 52px}.lesson-entrance{width:min(100%,620px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center}.classroom-clock{display:none}.lesson-enter{min-width:0;margin:0;font-size:14px;padding:13px;max-width:150px}.lesson-board{height:125px;min-height:100px}.board-arabic{font-size:38px}.lesson-board p{font-size:12px}.lesson-plaque{font-size:15px;padding:8px}.classroom-lamp{display:none}}
/* Independent letter / form / upper mark / lower mark workbench. */
.puzzle-page{padding:20px clamp(12px,4vw,26px) 28px;max-width:760px;margin:auto}
.puzzle-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.puzzle-heading h1{font-size:clamp(20px,5.5vw,28px);margin-top:5px}
.puzzle-heading .pill{white-space:nowrap}
.puzzle-instruction{font-size:14px;color:var(--muted);margin:12px 0 16px;line-height:1.55}
.puzzle-listen{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.puzzle-listen .button{flex:1}
.puzzle-workspace{border:6px solid #c38b42;border-bottom-width:9px;border-radius:20px;background:#edf2dc;box-shadow:inset 0 2px 12px #48684016,0 4px 0 #916430;padding:14px 8px 8px}
.puzzle-slots{display:flex;gap:clamp(3px,1vw,7px);overflow-x:auto;overscroll-behavior-x:contain;padding:3px 2px 6px;scrollbar-width:thin;scrollbar-color:#b29965 transparent}
.puzzle-slot{flex:1 0 39px;min-width:39px;max-width:100px;margin-inline:auto;display:grid;grid-template-rows:44px 72px 44px 19px;gap:3px;min-height:0}
.puzzle-slot button{border:1px dashed #c2c8a4;border-radius:9px;background:#ffffff9c;padding:4px;width:100%;display:grid;place-items:center;min-width:0;position:relative}
.puzzle-slot button.has-mark,.puzzle-slot button.occupied{border-style:solid;border-color:#a6b598;background:#fffef5}
.puzzle-slot.selected .letter-zone{box-shadow:0 0 0 2px #548b75}
.slot-number{color:#9caa88;font-size:18px;font-weight:800}
.zone-plus{color:#899672;font-size:18px;font-weight:500}
.slot-form{font-size:10px;text-align:center;color:#56664d;direction:ltr;white-space:nowrap}
.puzzle-glyph{display:block;width:100%;height:100%;max-height:59px;object-fit:contain;pointer-events:none;user-select:none}
.puzzle-mark{display:block;width:100%;height:100%;max-width:38px;max-height:27px;object-fit:contain;pointer-events:none;user-select:none}
.ghost{opacity:.22;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}
.puzzle-tools{display:flex;align-items:center;gap:8px;justify-content:space-between;border-top:1px solid #d6dfc0;padding-top:8px;color:#647457;font-size:11px;line-height:1.4}
.erase-tool{border:1px solid #b4bc9e;border-radius:9px;background:#fffcec;padding:6px 11px;min-height:40px;flex:none;font-weight:800}
.puzzle-section-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 9px}
.puzzle-section-label h2{font-size:15px}.puzzle-section-label>span{font-size:11px;color:var(--muted)}
.mark-navigation{display:flex;gap:7px}.mark-navigation .icon-btn{width:44px;height:40px;border-radius:11px}.mark-navigation .ico{width:20px;height:20px}
.puzzle-bank{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.letter-tile{height:64px;padding:9px;border:1px solid #dac593;border-bottom:4px solid #cfb47b;border-radius:12px;background:var(--paper);display:grid;place-items:center;min-width:0}
.letter-tile .puzzle-glyph{height:45px;width:100%}
.puzzle-bank button.selected,.mark-bank button.selected,.erase-tool.selected{border-color:var(--teal);background:#dcebdd;box-shadow:0 0 0 2px var(--teal)}
.mark-bank{display:flex;overflow-x:auto;overscroll-behavior-x:contain;gap:7px;padding:3px 2px 10px;scrollbar-width:thin;scrollbar-color:#b29965 transparent}
.mark-tile{flex:0 0 70px;min-height:83px;border:1px solid #dcc998;border-bottom:3px solid #d4b977;border-radius:11px;background:#fffaf0;padding:9px 5px 5px;display:flex;align-items:center;flex-direction:column;gap:7px;justify-content:space-between}
.mark-tile .puzzle-mark{height:27px;flex:none}
.mark-tile>span{font-size:10px;line-height:1.25;color:#706145;pointer-events:none}
.puzzle-feedback{font-size:13px;font-weight:850;line-height:1.5;text-align:center;color:#905327;min-height:28px;margin:8px 0}
.puzzle-feedback.success{color:var(--teal)}
.puzzle-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.puzzle-solved-word{display:grid;place-items:center;padding:12px;margin-bottom:18px;border:5px solid #c28b43;border-radius:14px;background:#284236}.puzzle-solved-word img{display:block;width:100%;height:96px;object-fit:contain}
.puzzle-secondary .button{padding-inline:7px;font-size:12px}
.puzzle-secondary .ico{width:19px;height:19px}
[data-drag]{touch-action:none;user-select:none;-webkit-user-select:none}
.drop-hover{outline:3px solid #dba322!important;background:#fff1b4!important}
.puzzle-drag-ghost{position:fixed;z-index:60;width:60px;height:68px;border:2px solid #d6ae52;border-radius:12px;background:#fff5d8;box-shadow:0 8px 16px #382a3740;padding:9px;pointer-events:none;display:grid;place-items:center;transform:rotate(-4deg)}
.puzzle-drag-ghost>span:not(.ghost){display:none}
.game-guide{padding-left:22px;line-height:1.6;font-size:14px}.game-guide li+li{margin-top:9px}
@media(min-width:600px){.puzzle-bank{grid-template-columns:repeat(10,minmax(0,1fr))}.mark-bank{flex-wrap:wrap}.mark-tile{flex-basis:75px}.puzzle-slot{grid-template-rows:48px 90px 48px 20px}.puzzle-glyph{max-height:76px}}
@media(min-width:600px){.mark-navigation{display:none}}
@media(orientation:landscape) and (max-height:600px){.puzzle-page{max-width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.puzzle-heading,.puzzle-instruction{grid-column:1/-1}.puzzle-workspace{grid-column:1;grid-row:4;align-self:start}.puzzle-listen{grid-column:1;grid-row:3}.puzzle-library{grid-column:2;grid-row:3/6;min-width:0}.puzzle-section-label:first-child{margin-top:0}.puzzle-feedback,.puzzle-actions{grid-column:1}.puzzle-bank{grid-template-columns:repeat(5,minmax(0,1fr))}}