/* Responsive refinements: tablet, phone, safe areas and touch input. */
html { scroll-behavior:smooth; scroll-padding-top:24px; }
main, .hero>div, .bottom>section, .lesson-info { min-width:0; }
button { touch-action:manipulation; }
dialog { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.close { position:sticky; top:0; min-width:44px; min-height:44px; background:var(--paper); border-radius:50%; }
@media (max-width:1024px) and (min-width:781px) {
  aside { width:176px; padding:28px 16px; }
  main { margin-left:176px; padding:24px; }
  .brand { font-size:18px; }
  .hero { grid-template-columns:1fr; padding:30px 0; }
  .hero-art { display:none; }
  .paths { gap:10px; }
  .path { padding:17px; }
  .path h3 { font-size:18px; }
  .bottom { grid-template-columns:1fr; }
  .stats { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
}
@media (max-width:780px) {
  html { scroll-padding-top:20px; }
  body { padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)); }
  aside { padding:18px max(20px,env(safe-area-inset-left,0px)); }
  .brand { font-size:21px; }
  nav { position:fixed; bottom:0; left:0; right:0; z-index:10; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:8px max(6px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)); background:#f7f8f0f5; backdrop-filter:blur(16px); border-top:1px solid var(--line); overflow:visible; }
  nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:8px 2px; min-height:54px; font-size:19px; border-radius:10px; }
  nav a span { font-size:10px; line-height:1.3; }
  nav a.active { background:#e2e9d5; color:var(--green); }
  main { padding:20px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px)); }
  header { font-size:11px; gap:12px; align-items:flex-start; }
  .profile>span { display:none; }
  .avatar { width:30px; height:30px; flex-shrink:0; }
  .hero { padding:27px 0; }
  .hero h1 { font-size:clamp(32px,8.7vw,44px); letter-spacing:-1px; }
  .hero p { font-size:14px; }
  .hero .primary, .hero .secondary { width:100%; min-height:48px; margin:0 0 10px; }
  .stats { display:grid; grid-template-columns:1fr 1fr; gap:20px 12px; padding:20px 16px; }
  .stats>div { min-width:0; gap:9px; font-size:11px; }
  .stats strong { font-size:25px; }
  .section-title { margin:28px 0 16px; flex-wrap:wrap; gap:12px; }
  .section-title h2 { font-size:20px; }
  .section-title>span { font-size:10px; letter-spacing:1px; }
  .path { padding:22px; }
  .path p { font-size:14px; }
  .path button { min-height:46px; font-size:13px; }
  .lesson { gap:12px; padding:15px 12px; align-items:flex-start; flex-wrap:wrap; }
  .lesson-icon { width:40px; height:40px; flex-shrink:0; }
  .lesson-info { flex:1; min-width:150px; }
  .lesson h3 { font-size:14px; line-height:1.6; }
  .lesson p { line-height:1.6; font-size:12px; }
  .lesson button { min-height:44px; width:100%; font-size:13px; margin-top:3px; }
  .tabs button { min-height:44px; min-width:48px; font-size:12px; }
  .audio { width:44px; height:44px; }
  .daily #saveWord { min-height:44px; font-size:13px!important; }
  footer { flex-direction:column; gap:8px; font-size:11px; }
  dialog { width:calc(100% - 24px); padding:20px; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); border-radius:16px; }
  .modal-content h2 { font-size:22px; padding-right:35px; line-height:1.5; }
  .modal-content { font-size:15px; overflow-wrap:anywhere; }
  .modal-content h3 { font-size:16px; }
  .answers button { min-height:48px; font-size:15px; line-height:1.6; }
  .modal-content .primary, .modal-content .secondary { min-height:44px; }
  .done { width:100%; }
  .toast { bottom:calc(90px + env(safe-area-inset-bottom,0px)); width:max-content; max-width:calc(100% - 32px); text-align:center; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }