/* Touch targets and typography also benefit desktop and keyboard users. */
button,select,input,.chatgpt-link{min-height:48px;touch-action:manipulation}
button:active:not(:disabled){filter:brightness(.95)}
input,select,textarea{font-size:16px!important}
.link{min-height:48px;padding:10px 12px;font-size:13px}
header nav{gap:4px}header nav button{font-size:13px;min-width:64px}
.map-pages button{width:48px;height:48px;flex-shrink:0}
.journey-selectors{top:224px;gap:12px;padding:8px 12px}
.journey-selectors label{font-size:12px;flex-direction:column;align-items:stretch;gap:4px}
.journey-selectors select{max-width:none;width:160px;min-height:48px}
.map-pages{top:330px}
.world{touch-action:pan-y pinch-zoom}
.swipe-hint{position:absolute;top:720px;left:50%;transform:translateX(-50%);margin:0;padding:7px 12px;border-radius:16px;background:#fff9e8e8;color:#365c3a;font-size:12px;text-align:center;white-space:nowrap;pointer-events:none}
.traveller{min-width:64px;min-height:64px;touch-action:manipulation}
.apple{min-height:96px;min-width:0;width:100%;aspect-ratio:auto}.apple strong{font-size:14px;max-width:100%;overflow-wrap:anywhere}.apple small{font-size:11px}
.part-tree{min-height:116px}.part-tree small{font-size:12px}
.settings-card label,.muted{font-size:13px}.settings-card input{min-height:48px}
.settings-card button:not(.primary),#accountTools button,#exportFamily{padding:12px 16px;border-radius:12px;background:#e9f1df;color:#365b36;margin:4px}
.character-actions{gap:12px;flex-wrap:wrap}.chatgpt-link{display:inline-flex;align-items:center;padding:10px 12px}
.avatar-upload-area{min-width:0}.avatar-upload-area>div{min-width:0}.character-card input[type=file]{width:100%;max-width:100%}
html:has(dialog[open]){overflow:hidden}
#lessonDialog[open]{display:flex;flex-direction:column;max-height:94dvh;height:94dvh;overflow:hidden;padding:60px 16px 0}
#lessonContent{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-bottom:16px}
#lessonDialog .close-modal{width:48px;height:48px;min-width:48px;top:6px;left:10px;font-size:21px;z-index:3}
#lessonDialog .workspace{align-items:start}
#lessonDialog .lesson{min-width:0}
#lessonDialog .lesson-head{flex-wrap:wrap;gap:8px;font-size:20px}
#lessonDialog .verse{font-size:36px;line-height:1.9;overflow-wrap:anywhere;margin:16px 0}
#lessonDialog .steps{gap:18px;font-size:14px}
.lesson-dock{flex-shrink:0;gap:12px;min-height:82px;border-top:1px solid #d6dfca;background:#fffcf3;padding:12px 8px max(12px,env(safe-area-inset-bottom));margin:0 -16px}
.lesson-dock .round{width:52px;height:52px;flex-shrink:0;font-size:24px}
.lesson-dock .primary{min-width:180px;min-height:52px;font-size:16px;padding:12px 18px}
#lessonDialog .settings{gap:14px;margin:18px 0;font-size:14px;align-items:center}
#lessonDialog .settings label{display:flex;align-items:center;gap:8px}
#lessonDialog .settings select{margin:0;min-width:100px}
#lessonDialog .practice,#lessonDialog .next-surah{min-height:52px;font-size:14px;max-width:100%}
#lessonDialog .lesson-foot{align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
#lessonDialog .status{font-size:14px;margin:18px 0}
.verse-jump{font-size:14px;gap:12px}.verse-jump select{min-width:84px}
@media(max-width:1100px),(pointer:coarse){
 #lessonDialog .workspace{grid-template-columns:1fr}#lessonDialog aside{display:none}
 .world{min-height:820px}.guide{bottom:110px}.swipe-hint{top:710px}
 .apple:hover{transform:none}.station:hover{transform:translateX(-50%)}.station.current:hover{transform:translateX(-50%) scale(1.1)}
}
@media(max-width:700px){
 header{padding:10px 12px;flex-wrap:wrap;justify-content:center;gap:8px}
 header .brand{font-size:19px;padding:7px 14px}header .brand small{display:none}
 header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,420px);padding:3px;gap:2px}
 header nav button{font-size:12px;padding:8px 5px;min-width:0;min-height:48px}
 .world{height:100svh;min-height:760px}
 .world-heading{top:130px}.world-heading h1{font-size:28px}.world-heading p{font-size:12px}
 .journey-selectors{top:215px;width:calc(100% - 32px);max-width:380px;gap:10px;border-radius:18px}
 .journey-selectors label{flex:1;min-width:0;font-size:12px}
 .journey-selectors select{width:100%;max-width:none}
 .map-pages{top:316px;min-width:280px;font-size:13px;padding:7px 10px}
 .station{top:415px!important}.station.current strong{font-size:21px}
 .traveller,.traveller:has(img:not([hidden])){top:520px}
 .traveller>img{width:112px;height:145px}.traveller span{font-size:76px}
 .swipe-hint{top:674px;font-size:11px;white-space:normal;width:280px}
 .guide{display:none}
 .wood-sign{bottom:14px;right:16px;min-height:52px;font-size:15px;padding:12px 18px;transform:none}
 .garden-sign{bottom:17px;left:16px;min-height:52px;font-size:13px;padding:12px 14px}
 .world-note{display:none}
 #garden,#parent,#settings{padding:138px 16px 32px}
 .apple-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px}
 .tree-crown{padding:24px 12px 28px}.apple strong{font-size:13px}
 .part-trees{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .part-tree{padding:10px 5px}.part-tree strong{font-size:12px}
 .fruit-legend{font-size:12px;gap:12px;flex-wrap:wrap}
 .child-settings-grid{grid-template-columns:1fr}.settings-card{padding:18px}
 #lessonDialog[open]{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:58px 10px 0}
 #lessonDialog .lesson{padding:14px 12px;border-radius:18px}
 #lessonDialog .verse-wrap{padding:14px 10px}
 #lessonDialog .verse{font-size:33px}
 .lesson-dock{margin:0 -10px;gap:10px}.lesson-dock .primary{min-width:0;flex:1;max-width:280px;font-size:15px}
 .lesson-dock .round{width:52px;height:52px}
}
@media(max-height:520px) and (orientation:landscape){
 #lessonDialog[open]{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding-top:54px}
 #lessonDialog .verse{font-size:30px;margin:10px 0}
 #lessonDialog .steps{margin:12px 0}.lesson-dock{min-height:72px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .world{min-height:760px}
}
@media(prefers-reduced-motion:reduce){.swipe-hint{animation:none}}
.account-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;background:#fff9e8;border:2px solid #cdb979;border-radius:16px;color:#3d653e;text-decoration:none;font-size:13px}#accountEntry .primary{display:inline-flex;align-items:center;text-decoration:none;font-size:14px;margin:12px 0}@media(max-width:700px){header .brand{margin-right:auto}header .account-link{margin-left:auto}header nav{order:3}}