/* MATHE mobile layout repair 20261018. Loaded after existing page styles. */
html{width:100%;min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:100vh;min-height:100dvh;gap:16px}
body>.wrap,body>.game-wrap,body>.lernmusik,body>.ki-credit{flex:none;width:100%;min-width:0;margin-left:auto;margin-right:auto}
body>.wrap{grid-template-columns:minmax(0,1fr)}
body>.lernmusik,body>.ki-credit{max-width:1100px;position:relative;z-index:1}
body.mathe-arithmetic>.lernmusik,body.mathe-arithmetic>.ki-credit{max-width:560px}
.wrap>*,main>*,.grid>*,.grid2>*,.brand,.title,.cardBody,.actions,.hud{min-width:0}
.lernmusik{width:100%;min-width:0;margin-top:0;margin-bottom:0}
.ki-credit{margin-top:0;margin-bottom:0}
audio{max-width:100%;min-width:0}
.title h1{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
button,a.btn,input,select{max-width:100%;box-sizing:border-box}
button,a.btn{white-space:normal;overflow-wrap:anywhere;touch-action:manipulation}
.start-overlay,.reward-popup,.popup{overflow-y:auto;overscroll-behavior:contain}
.start-card,.reward-popup-inner,.popupInner{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;min-height:0}
@media(max-width:1024px){
 body{padding:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));background-attachment:scroll}
 main{grid-template-columns:minmax(0,1fr)}
 .hud{justify-content:flex-start;flex-wrap:wrap}
 input:not([type=checkbox]):not([type=range]),select{font-size:16px;min-height:44px}
 button,a.btn{min-height:44px}
 .brand{max-width:100%}
 .title p,.pill,.badge,.chip{white-space:normal;overflow-wrap:anywhere}
 .cardHead{flex-wrap:wrap;gap:8px}
 body.mathe-home header{margin-top:0;opacity:1}
 body.mathe-home{background-size:cover;background-position:center top;background-color:#10243f}
 body.mathe-home .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .actions{flex-wrap:wrap}
 .actions>*{min-width:0}
}
@media(max-width:600px){
 body.mathe-home .grid{grid-template-columns:minmax(0,1fr)}
 .grid2{grid-template-columns:minmax(0,1fr)}
 .game-wrap{padding:16px 12px}
 .lernmusik{padding:16px}
 .answers{grid-template-columns:minmax(0,1fr)}
 body.mathe-home .actions a{width:100%;min-width:0}
}
@media(orientation:landscape) and (max-height:540px){
 body{padding-top:8px;gap:10px}
 body.mathe-home .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lernmusik{padding:12px 16px}
 .start-overlay,.reward-popup,.popup{padding:8px}
 .start-card,.reward-popup-inner,.popupInner{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
}

/* Full artwork on mobile, independent of page height. */
.mathe-mobile-cover{display:none;margin:0;min-width:0}
@media(max-width:1024px), (orientation:landscape) and (max-height:540px) and (pointer:coarse){
 body.mathe-home{background-image:radial-gradient(ellipse at top,#244f60 0%,#10243f 65%);background-size:auto;background-repeat:no-repeat;background-attachment:scroll}
 body.mathe-home .mathe-mobile-cover{display:block;border-radius:18px;overflow:hidden;background:#10243f;box-shadow:0 8px 28px #0004}
 .mathe-mobile-cover img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
}
@media(orientation:landscape) and (max-height:540px){
 .mathe-mobile-cover img{max-height:65vh;max-height:65svh;object-fit:contain}
}

/* Touch panning is allowed; pinch and double-tap zoom are not. */
@media (any-pointer:coarse){
 html,body{touch-action:pan-x pan-y}
 button,a.btn,input,select,audio{touch-action:pan-x pan-y}
}