/* App/mobile layer, after current Friends + Horizon design. Desktop wallpaper
 * remains in horizon-modern.css. No logic or card order changes here. */
.app-tools{display:flex;justify-content:flex-end;margin:-8px 0 12px;min-width:0}
.app-tools[hidden],.app-install[hidden],#appUpdate[hidden],#appInstallConfirm[hidden]{display:none!important}
.app-tools .app-install{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid #d3a12b;border-radius:99px;background:#f4c352;color:#17202a;font-size:.76rem;font-weight:800;box-shadow:0 4px 12px #9e6d1620}
.app-tools .app-install:hover{background:#ecc052;border-color:#bd8c1b;color:#111820;box-shadow:0 5px 15px #9e6d1630}
.app-tools .app-install:focus-visible{outline:3px solid #17202a;outline-offset:3px}
.app-install::before{content:'';width:15px;height:15px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3v12m-4-4 4 4 4-4M4 16v4h16v-4'/%3E%3C/svg%3E") center/contain no-repeat}
.account-card .app-install{width:auto;margin:0;min-height:40px}
.account-install-tools{margin:0 0 12px}.app-update-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.app-update-tools span{font-size:.72rem;line-height:1.4;color:#606972}.app-update-tools .btn{font-size:.73rem;margin-bottom:10px}
#appInstallHelp{width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #e1e4e7;border-radius:24px;background:#fff;color:#111820;box-shadow:0 24px 90px #0004;overflow:auto}
#appInstallHelp::backdrop{background:#080c1166}.app-install-heading{display:flex;align-items:center;gap:14px}.app-install-heading img{border-radius:16px;flex-shrink:0}.app-install-heading small{font-size:.58rem;letter-spacing:.14em;color:#67717a}.app-install-heading h2{margin:7px 0 0;font:750 1.22rem/1.2 var(--display);letter-spacing:-.03em}
#appInstallHelp p{font-size:.88rem;line-height:1.65;color:#4d5862}.app-install-steps{background:#f2f4f5;border-radius:14px;padding:14px}.app-install-note{font-size:.75rem!important}.app-install-actions{display:flex;gap:8px;justify-content:flex-end}.app-install-actions .btn{min-height:44px}.app-install-actions .p{background:#111820;color:#fff}
@media(max-width:760px){
  :root{padding:0;scroll-padding-top:0}
  html,body{background:#fff}
  body{padding-bottom:0;min-height:100svh}
  body::before{display:none!important;background:none!important}
  .screen,#start,#game{width:100%;max-width:none;margin:0;padding:16px max(14px,env(safe-area-inset-left)) calc(100px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;background:#fff;min-height:100svh}
  .site-credit{display:none}
  .main-brand{grid-template-columns:clamp(68px,20vw,88px) minmax(0,1fr);gap:12px;margin:4px auto 22px;max-width:480px;justify-content:center}
  .main-brand-mascot{width:100%;max-width:88px}
  .main-brand-copy{min-width:0}.main-brand-copy strong{font-size:clamp(1.25rem,6vw,2.75rem);font-size:clamp(1.2rem,12cqw,3rem);letter-spacing:-.055em}
  .main-brand-copy span{font-size:clamp(.55rem,1.6vw,.7rem);letter-spacing:.08em;margin-top:8px;line-height:1.5}
  .mode-kicker{font-size:.55rem;margin-bottom:8px}
  #ttl{font-size:clamp(1.25rem,5.5vw,1.8rem);margin-top:8px}
  .tag{font-size:.79rem;margin-top:8px}
  .app-tools{margin:0 0 8px}.app-tools .app-install{min-height:40px;padding:8px 13px;font-size:.72rem}
  .player-dashboard{padding:14px;gap:10px;margin-top:20px;border-radius:16px}
  .home-feature-actions{gap:9px;margin:16px auto}.home-feature-actions .btn{min-height:48px;padding:11px 14px}
  .school-entry,.friends-entry{margin-top:-4px}
  .recommended-level{margin-top:20px}.school-hero{margin-top:24px}
  .app-footer{width:calc(100% - 16px);max-width:560px;min-height:64px;padding:4px;bottom:calc(6px + env(safe-area-inset-bottom));gap:0;border-radius:19px}
  .app-footer .btn,.app-footer #snd,.app-footer #cfgbtn,.app-footer #navFriends{font-size:0;height:56px;min-height:44px;padding:6px 0;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;line-height:1;border-radius:13px}
  .app-footer .btn::before{content:'';display:block;width:20px;height:20px;background:currentColor;mask:var(--nav-icon) center/contain no-repeat;flex-shrink:0}
  .app-footer .btn::after{content:attr(data-short-label);font-size:9px;font-weight:650;line-height:1.15;white-space:nowrap;letter-spacing:-.02em}
  #profileBtn{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-2a8 7 0 0 1 16 0v2'/%3E%3C/g%3E%3C/svg%3E")}
  #snd{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M11 5 6 9H3v6h3l5 4V5Zm5 3a6 6 0 0 1 0 8m3-11a10 10 0 0 1 0 14'/%3E%3C/svg%3E")}
  #cfgbtn{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='8' cy='7' r='3' fill='white'/%3E%3Ccircle cx='16' cy='17' r='3' fill='white'/%3E%3C/g%3E%3C/svg%3E")}
  #navStudy{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' d='M12 5C8 2 3 4 3 4v15s5-2 9 1c4-3 9-1 9-1V4s-5-2-9 1Zm0 0v15'/%3E%3C/svg%3E")}
  #navOnline{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='5'/%3E%3Cpath d='M8 10v5m-2.5-2.5h5M16 11h.01M18 14h.01'/%3E%3C/g%3E%3C/svg%3E")}
  #navFriends{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M2 21v-2a7 7 0 0 1 14 0v2M16 5a3 3 0 0 1 0 6m2 3c3 1 4 3 4 6'/%3E%3C/g%3E%3C/svg%3E")}
  .modal{padding:12px}.box{width:100%;max-height:calc(100dvh - 24px);overflow:auto;padding:20px}
  .account-gate{padding:0;background:#fff;align-items:flex-start}
  .account-card{width:100%;max-width:480px;margin:0 auto;max-height:none;padding:18px 20px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none}
  .account-card input,.account-card select{font-size:16px;min-height:46px}
  .account-card h2{font-size:24px}.account-card .account-brand{margin-bottom:16px}
  .top{padding:10px;gap:7px;flex-wrap:wrap}.top .btn{min-height:42px;padding:9px 13px}
  .stats{gap:6px}.stats .pill{font-size:.76rem;padding:8px 10px}
  .grid{gap:8px}.card .word{overflow-wrap:anywhere}
  .quiz-panel{padding:18px 14px}.quiz-options{gap:9px}.quiz-option{min-height:54px}
  .school-list{padding:16px 10px}.friends-shell{margin-top:16px}.friends-hero{margin-left:0;margin-right:0}
  .study-grid,.online-panels,.lobby-shell{gap:12px}
  .instruction-card{padding:14px;gap:12px}.instruction-card .study-mascot{width:68px}.how{font-size:.78rem}
}
@media(display-mode:standalone) and (max-width:760px){
  .screen,#start,#game{padding-top:calc(14px + env(safe-area-inset-top))}
  .account-card{padding-top:calc(16px + env(safe-area-inset-top))}
}