html,body,canvas{touch-action:none;overscroll-behavior:none;user-select:none}#touchControls{display:none;position:absolute;inset:0;pointer-events:none}#stick{position:absolute;left:30px;bottom:25px;width:118px;height:118px;border:2px solid #8ac6a755;border-radius:50%;background:#15362b66;pointer-events:auto;touch-action:none}#knob{position:absolute;left:36px;top:36px;width:42px;height:42px;background:#96e0bbaa;border:2px solid #cefbe3;border-radius:50%;pointer-events:none}#dashButton{position:absolute;right:30px;bottom:35px;width:95px;height:95px;border-radius:50%;border:2px solid #ffac50aa;background:#3f3324b0;color:#ffca84;touch-action:none;font-size:11px;font-weight:700;padding:0}
@media(pointer:coarse){#touchControls{display:block}footer{display:none}header{padding:10px 18px}.brand{font-size:12px}.brand small{display:none}.mark{font-size:23px}#stats{font-size:12px}#pause{font-size:10px;padding:10px}#hud{top:55px;left:18px;width:160px}.label{margin:8px 0 4px;font-size:9px}#modules{font-size:9px;line-height:1.4;margin-top:8px}#panel{max-height:94vh;overflow:auto;padding:22px}h1{font-size:32px;margin:8px 0}h2{font-size:24px}p{font-size:12px;margin-bottom:8px}.primary{padding:12px 20px;margin-top:8px}.meta{margin-top:12px;padding-top:12px;font-size:10px}.cards{grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.card{padding:12px;min-height:140px}.card strong{font-size:16px}.card small{font-size:11px}.card em{font-size:10px}}

/* Keep combat controls and statistics on separate rows in portrait. Village
   navigation has its own header, and the ad dialog uses a nested header. */
@media(max-width:650px){
 body:not(.in-village)>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand pause sound" "stats stats stats";gap:6px 8px;padding:10px 12px 8px;align-items:center;background:linear-gradient(#101619f7,#101619d9 80%,transparent)}
 body:not(.in-village)>header .brand{grid-area:brand;min-width:0;gap:8px;font-size:11px;letter-spacing:1.5px;white-space:nowrap}
 body:not(.in-village)>header .brand small{display:none}
 body:not(.in-village)>header .mark{font-size:23px}
 body:not(.in-village)>header #pause{grid-area:pause}
 body:not(.in-village)>header #beltSound{grid-area:sound}
 body:not(.in-village)>header #pause,body:not(.in-village)>header #beltSound{min-height:44px;padding:8px 10px;font-size:10px;line-height:1.2;white-space:nowrap}
 body:not(.in-village)>header #stats{grid-area:stats;min-width:0;width:100%;font-size:10px;line-height:14px;text-align:center;white-space:normal;overflow-wrap:normal}
 body:not(.in-village) #hud{left:12px;top:104px;width:min(160px,calc((100vw - 36px)/2))}
}

/* A grid item's automatic min-width otherwise lets long upgrade names push
   the whole modal sideways on touch screens. All choices remain scrollable. */
@media(pointer:coarse),(max-width:1000px){
 #panel{min-width:0;max-width:92vw}
 #panel .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 #panel .cards>.card{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
 #panel .cards>.card strong,#panel .cards>.card small,#panel .cards>.card em{min-width:0;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:650px){
 #panel .cards{grid-template-columns:minmax(0,1fr);gap:8px}
 #panel .cards>.card{min-height:86px;padding:12px}
}

/* Short landscape screens reserve the lower corners for movement/dash.
   Only secondary inventories are hidden; health, defense, shield and XP stay. */
@media(max-height:520px) and (min-width:650px){
 body:not(.in-village)>header{padding:9px 18px;gap:12px}
 body:not(.in-village)>header #pause,body:not(.in-village)>header #beltSound{min-height:44px;padding:8px 12px;white-space:nowrap}
 body:not(.in-village) #hud{top:68px;left:18px;width:180px}
 body:not(.in-village) #hud .label{font-size:8px;letter-spacing:.5px;margin:6px 0 3px}
 body:not(.in-village) #defenseText{font-size:8px;line-height:1.35;margin:4px 0 5px}
 body:not(.in-village) #shieldHud .meter{margin-bottom:6px}
 body:not(.in-village) #economy,body:not(.in-village) #bossStatus{font-size:8px;line-height:1.4;margin-top:6px}
 body:not(.in-village) #campaignStatus,body:not(.in-village) #environmentStatus,body:not(.in-village) #modules{display:none}
}
@media(max-height:360px) and (min-width:650px){
 body:not(.in-village) #economy{display:none}
 body:not(.in-village) #hud{top:64px}
}