/* So Smooth ABC — native-style responsive mobile shell, v6 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overscroll-behavior-y:none}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#mobileNav{display:none}
@media(max-width:760px){
  :root{--nav-height:72px}
  html,body{width:100%;min-height:100%;overflow-x:hidden}
  body{background:#e9ddff}
  .world-bg{background-position:52% 50%;background-size:cover}
  .wash{background:linear-gradient(180deg,#fffcff67 0%,#fffdff89 38%,#f9f1ffb2 100%)}
  .app{max-width:none;min-height:100svh;padding:0 12px calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column}
  .topbar{z-index:3;position:sticky;top:0;top:env(safe-area-inset-top,0px);padding:10px 4px 8px;gap:9px;background:linear-gradient(to bottom,#ffffffd9,#ffffff75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:0 0 23px 23px}
  .brand{min-width:82px;width:96px;border-radius:20px;padding:0 8px;box-shadow:0 5px 15px #593a9a20}
  .brand img{height:57px}
  .top-actions{gap:6px}
  .kid-pill{display:block;max-width:calc(100vw - 240px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;padding:10px;border-radius:18px}
  .icon-btn{min-width:42px;width:42px;height:42px;font-size:21px;border-radius:15px;box-shadow:0 5px 12px #6b459124}
  main{display:flex;flex-direction:column;align-content:initial;flex:1;margin:12px auto 0;max-width:560px;min-height:0;width:100%}
  main>section{width:100%;margin-left:auto;margin-right:auto}
  .glass{border:2px solid #ffffffee;border-radius:28px;box-shadow:0 18px 43px #3c1f8540,0 4px 0 #eee1ff}
  .hub{display:flex;flex-direction:column;gap:13px}
  .hub-hero{padding:19px 16px 16px;margin:0;width:100%;border-radius:25px}
  .hub-hero h1{font-size:clamp(28px,7.5vw,38px)}
  .hub-hero p{font-size:14px;margin:7px 0 3px}
  .hub-hero .button{margin-top:12px;padding:12px 15px;font-size:15px}
  .worlds{display:grid;grid-template-columns:1fr;gap:12px}
  .world-card{display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 12px;min-height:122px;padding:15px 16px;border-width:3px;border-radius:28px;text-align:left;box-shadow:0 9px 23px #5c398f33,0 4px 0 #fff9}
  .world-card .picture{width:95px;height:81px;min-height:0;grid-column:1;grid-row:1/3;align-self:center}
  .world-card .card-icon{display:flex;align-items:center;min-height:0;gap:2px;transform:scale(.83);transform-origin:center}
  .world-card .toy-block{width:38px;height:52px;font-size:24px;border-radius:13px;flex:none}
  .world-card .num-two,.world-card .block-b{transform:translateY(-6px)}
  .world-card .mini-picture{width:34px;height:46px;font-size:21px;border-radius:12px;flex:none}
  .world-card>div:nth-child(2){grid-column:2;grid-row:1;align-self:end}
  .world-card h2{font-size:34px;line-height:1}
  .world-card p{font-size:12px;margin:3px 0 0;line-height:1.25}
  .world-card .mini-progress{grid-column:2;grid-row:2;height:10px;margin-top:10px;align-self:start}
  .world-card .world-done{right:11px;top:8px;font-size:10px}
  .world-card:hover{transform:none}
  .world-card:active{transform:scale(.985)}
  .progress-panel{padding:18px 19px;margin:0;width:100%;border-radius:23px}
  .progress-panel .progress-meta{font-size:13px}
  .progress-panel .track{height:15px;margin:11px 0}
  .progress-panel .small{font-size:12px}
  .welcome{padding:19px 16px 24px;margin:auto}
  .welcome h1{font-size:clamp(27px,7vw,42px)}
  .welcome .mascot{width:126px;height:126px;margin:-12px auto -8px}
  .field input,.field select{font-size:16px;min-height:48px}
  .button{min-height:46px;border-radius:17px;font-size:15px;padding:10px 14px}
  .game{width:100%;margin:0;max-width:none;padding:16px 13px 18px;border-radius:28px}
  .game-head{display:grid;grid-template-columns:85px minmax(0,1fr) 32px;gap:4px;align-items:center}
  .game-head .button{font-size:13px;min-height:43px;padding:9px 8px}
  .game-head h2{font-size:clamp(22px,7vw,34px);white-space:nowrap;text-align:center}
  .game-sub{font-size:19px;margin:15px 0 11px}
  .challenge{min-height:175px;max-height:35svh;padding:12px 6px;overflow:hidden;border-radius:22px}
  .challenge .big-symbol{font-size:clamp(82px,26vw,125px)}
  .challenge .big-emoji{font-size:75px}
  .number-stars{font-size:clamp(23px,6vw,35px);letter-spacing:0;line-height:1.35;max-width:100%;overflow-wrap:anywhere}
  .choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0 9px}
  .choice{min-height:clamp(78px,22vw,107px);font-size:clamp(38px,10vw,61px);border-radius:20px;box-shadow:0 5px 0 #cbb5f0}
  .word-visual.emoji{font-size:clamp(65px,18vw,88px)}
  .word-visual{min-height:87px;margin-bottom:0}
  .word-slots{gap:5px;margin:4px 0 0}
  .slot{width:51px;height:56px;border-radius:14px;font-size:30px}
  .word-pick{gap:9px;margin:17px 0 10px}
  .word-tile{width:clamp(68px,20vw,85px);height:73px;font-size:38px;border-radius:17px}
  .toast{font-size:16px;min-height:58px;line-height:1.25;padding:0 10px}
  .game-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;justify-content:stretch}
  .game-foot .button{font-size:12px;padding:8px;min-height:44px}
  .game-progress{min-width:0;width:100%;grid-column:auto}
  .game-progress .progress-meta{font-size:10px;gap:2px}
  .game-progress .track{height:10px;margin:7px 0}
  .game-foot:has(#repeat):not(:has(#undo)) {grid-template-columns:auto minmax(0,1fr)}
  .game-foot:has(#download){display:flex;justify-content:center;flex-wrap:wrap}
  .celebrate{padding:20px 14px}
  .celebrate .trophy{font-size:65px}
  .celebrate h2{font-size:31px}
  .cert-preview{border-width:5px;padding:13px 7px;border-radius:17px}
  .cert-preview h2{font-size:clamp(21px,6vw,30px)}
  .cert-preview strong{font-size:26px;overflow-wrap:anywhere}
  .cert-preview img{max-width:45%;height:auto}
  .modal-backdrop{align-items:end;padding:0;overscroll-behavior:contain}
  .modal{width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 20px);border-radius:28px 28px 0 0;padding:21px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -15px 60px #170c4477}
  .modal h2{font-size:26px}
  .modal h3{font-size:19px}
  .setting-row{padding:13px 0}
  .modal input[type=range]{min-height:34px;accent-color:#7b4dda}
  .modal .note{font-size:12px}
  footer{font-size:10px;padding:13px 6px 5px}
  footer span{display:none}
  #mobileNav{position:fixed;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;left:0;right:0;bottom:0;z-index:9;height:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));padding:6px 10px calc(7px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#fffffffa,#f3eafffc);border-top:2px solid white;box-shadow:0 -10px 30px #4b27833b;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  #mobileNav .mobile-tab{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;min-width:0;height:56px;padding:4px 0;border:0;border-radius:18px;background:transparent;color:#6f578f;font-weight:900;font-size:11px;box-shadow:none}
  #mobileNav .mobile-tab .tab-symbol{font-size:25px;line-height:1.2}
  #mobileNav .mobile-tab.active{color:#6734bc;background:linear-gradient(155deg,#f4e2ff,#d7eaff);box-shadow:0 4px 12px #8160ba20}
  #mobileNav .mobile-tab:active{transform:scale(.96)}
  #mobileNav .mobile-tab:focus-visible{outline:3px solid #ffbe45;outline-offset:-2px}
}
@media(max-width:360px){.app{padding-left:7px;padding-right:7px}.topbar{padding-left:0;padding-right:0}.kid-pill{max-width:98px;font-size:10px}.brand{width:81px;min-width:81px}.world-card{grid-template-columns:85px minmax(0,1fr);padding:12px}.world-card .picture{width:82px}.world-card .card-icon{transform:scale(.7)}.world-card h2{font-size:30px}.game{padding:13px 9px}.game-foot{gap:3px}.game-foot .button{font-size:11px;padding:6px}.choice{min-height:70px}.word-tile{width:62px}}
@media (min-width:761px) and (max-width:1024px){.app{padding-left:18px;padding-right:18px}.world-card{min-height:230px;padding:20px 10px}.world-card .toy-block{width:58px;height:66px;font-size:35px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}