/* Touch controls, safe areas and board-first phone layout. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100svh}
body.modal-open{overflow:hidden}
button,a{touch-action:manipulation}
.brand{min-height:44px;display:flex;align-items:center}
.icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
.text-button{min-height:44px;min-width:44px}
.topbar{padding-top:calc(16px + var(--safe-top));padding-left:max(24px,calc(var(--safe-left) + 12px));padding-right:max(24px,calc(var(--safe-right) + 12px))}
#app{padding-left:max(24px,calc(var(--safe-left) + 12px));padding-right:max(24px,calc(var(--safe-right) + 12px))}
.page-footer{padding-bottom:calc(18px + var(--safe-bottom));padding-left:max(24px,calc(var(--safe-left) + 12px));padding-right:max(24px,calc(var(--safe-right) + 12px))}
.cat[data-mood=sad],.cat[data-mood=celebrate]{transform:none}
.board{touch-action:pinch-zoom}
.tile{touch-action:inherit}
.board-help button{min-height:44px;min-width:100px;padding:8px 10px;font-size:12px}
dialog{max-height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 28px);max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 24px);overscroll-behavior:contain}
dialog .dialog-actions>button{min-height:48px}
.toast{bottom:calc(24px + var(--safe-bottom))}
@media(max-width:767px){
 .topbar{padding-top:calc(10px + var(--safe-top));padding-bottom:6px;padding-left:max(16px,calc(var(--safe-left) + 10px));padding-right:max(16px,calc(var(--safe-right) + 10px))}
 .header-actions{gap:4px}.brand{font-size:21px}.brand span{font-size:10px}.text-button{padding:8px;font-size:12px}
 #app{padding-left:max(12px,calc(var(--safe-left) + 10px));padding-right:max(12px,calc(var(--safe-right) + 10px));min-height:calc(100svh - 120px - var(--safe-top) - var(--safe-bottom))}
 .hero{padding-top:4px}.hero-art .cat{width:clamp(180px,30svh,270px);max-width:100%}
 .hero h1{font-size:40px}.hero-actions{margin:18px 0 12px}.hero-actions .primary,.hero-actions .secondary{min-height:48px}
 .fineprint{font-size:12px}.game-heading{margin:8px 0 10px}.game-heading h1{font-size:22px}.game-heading p{font-size:12px}
 .game-layout{flex-direction:column;gap:10px}.board-shell{width:min(100%,480px);padding:10px}
 .goalbar{min-height:50px}.goals{gap:8px}.goal{grid-template-columns:30px auto;grid-template-rows:17px 16px}.goal svg{width:30px;height:30px}.goal b{font-size:12px}.goal small{font-size:10px}
 .steps{min-width:44px}.steps strong{font-size:28px}.steps small{font-size:10px}
 .board-help{padding-top:4px;font-size:10px;align-items:center}.board-help button{font-size:12px}
 .companion{min-height:72px}.companion .cat{width:88px}.companion .bubble{font-size:12px;padding:10px 12px}
 .level-button .level-name{font-size:11px}.level-button .stars{font-size:10px}.scene-heading span{font-size:11px}
 .page-footer{padding-top:12px;font-size:9px}.page-footer span{letter-spacing:0}
 dialog{width:min(92vw,430px);padding:20px}.toast{font-size:12px}
}
@media(max-width:400px){.brand span{display:none}.goalbar{gap:6px}.goals{gap:5px}.goal{column-gap:0}.goal b{font-size:11px}}
@media(max-height:700px) and (max-width:599px){.hero .description{font-size:13px}.game-heading{margin:4px 0 8px}.companion{min-height:60px}.companion .cat{width:68px}.companion .bubble{font-size:11px;padding:8px 10px}.collection{margin-top:14px}.game-heading h1{font-size:20px}}
@media(max-height:520px) and (min-width:600px){
 .topbar{height:auto;padding-top:calc(4px + var(--safe-top));padding-bottom:4px}.game-heading{margin:0 0 6px}.game-heading .eyebrow{display:none}.game-heading h1{font-size:18px;margin:0}
 #app{min-height:0}.game-layout{display:grid;grid-template-columns:min(310px,calc(100svh - var(--safe-top) - var(--safe-bottom) - 146px)) 200px;gap:24px}
 .board-shell{padding:8px}.goalbar{min-height:32px;padding-bottom:6px}.goal{grid-template-columns:23px auto;grid-template-rows:13px 12px}.goal svg{width:23px;height:23px}.goal b{font-size:10px}.goal small{font-size:8px}.steps strong{font-size:22px}
 .board-help{position:absolute;left:calc(100% + 24px);bottom:0;width:200px;padding:0}.board-help span{display:none}.board-help button{width:100%;border:1px solid #c6bca3;background:#fff9ed;border-radius:24px;min-height:44px}
 .companion{display:block;width:200px;padding-bottom:52px}.companion .cat{width:110px;margin:auto}.companion .bubble{font-size:11px;padding:8px}.scene-progress,.score-line{display:none}.page-footer{padding-top:8px;padding-bottom:calc(8px + var(--safe-bottom))}
 dialog .cat{width:80px}dialog{padding:16px}dialog h2{font-size:21px}dialog p{font-size:12px}.tutorial-example{margin:8px}.tutorial-example svg{width:36px;height:36px}.dialog-actions{margin-top:12px!important}
}