.invaders-pad{display:flex;gap:4px;flex-shrink:0}.invaders-pad button{min-width:44px;min-height:48px;touch-action:none;user-select:none}.invaders-pad button[data-hold=fire]{color:#fff0c6;background:#6f3e25;border-color:#f0a768}.invaders .dispatch-hud{font-size:12px;letter-spacing:0}.invaders-scores{overflow:auto;flex:1;min-height:0;border:1px solid #658654;padding:12px}.invaders-scores[hidden]{display:none}.invaders-scores h3{color:#fa9852;font-size:18px;margin:0}.invaders-scores p{margin:6px 0!important}.invaders-scores ol{margin:0;font:14px/1.5 TerminalCells,monospace}.invaders canvas[hidden]{display:none}@media(max-width:600px){.invaders .dispatch-hud{font-size:10px}.invaders-pad{gap:2px}.invaders-pad button{padding:3px;font-size:10px;min-width:44px}.invaders .dispatch-actions{grid-template-columns:1fr 1fr}.invaders-scores ol{font-size:12px}}

/* Reuse the Playground game-world mode, as Odd Hours does. */
.portal-dialog.is-invaders .invaders{position:fixed;inset:0;z-index:30;height:100dvh;width:100%;box-sizing:border-box;padding:14px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#08111a;overflow:auto;isolation:isolate}
.invaders>h2,.invaders>.dispatch-hud,.invaders>.dispatch-status,.invaders>.dispatch-controls,.invaders>.dispatch-help{width:min(1200px,100%);margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
.invaders canvas{margin:auto!important;max-width:100%;border-color:#739891}
.invaders .dispatch-controls{padding-top:8px;flex-shrink:0}.invaders .dispatch-actions{display:flex;flex-wrap:wrap}.invaders .dispatch-actions button{flex:1;min-width:80px;font-size:12px}.invaders .dispatch-hud{margin-top:8px}.invaders .invaders-pad button{min-width:60px;min-height:52px;font-size:14px}.invaders-scores{width:min(1000px,100%);margin:12px auto;box-sizing:border-box}.invaders .dispatch-status{min-height:1.5em}
@media(max-width:600px){.portal-dialog.is-invaders .invaders{padding:12px 8px}.invaders .dispatch-controls{flex-wrap:wrap}.invaders .dispatch-actions{width:100%;flex:auto}.invaders .dispatch-actions button{min-width:44px;font-size:9px;min-height:44px}.invaders-pad{width:100%;justify-content:space-between}.invaders .invaders-pad button{min-width:72px;min-height:54px}.invaders .dispatch-hud{font-size:11px}.invaders .dispatch-status{font-size:11px}.invaders canvas{margin:auto!important}}
@media(max-height:500px){.portal-dialog.is-invaders .invaders{padding:6px 10px}.invaders h2{font-size:16px}.invaders .dispatch-help{display:none}.invaders .dispatch-hud{margin-top:3px;font-size:10px}.invaders .dispatch-status{font-size:10px}.invaders .invaders-pad button{min-height:44px;min-width:44px}.invaders .dispatch-actions button{min-height:44px;font-size:9px;padding:4px}.invaders .dispatch-controls{padding-top:2px}}

/* Mobile thumb layout: movement left, fire right. Desktop rules remain above. */
@media (pointer:coarse){
.invaders .invaders-pad{display:grid;grid-template-columns:56px 56px minmax(16px,1fr) 84px;gap:6px;width:100%;box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.invaders .invaders-pad button{min-width:0;width:100%;min-height:54px;padding:4px;font-size:14px}
.invaders-pad [data-hold=left]{grid-column:1;grid-row:1}.invaders-pad [data-hold=right]{grid-column:2;grid-row:1}.invaders-pad [data-hold=fire]{grid-column:4;grid-row:1}
.invaders .dispatch-controls{flex-wrap:wrap;gap:6px;padding-bottom:env(safe-area-inset-bottom,0px)}
.invaders .dispatch-actions{width:100%;flex:auto}
}
@media (pointer:coarse) and (max-height:500px){.invaders .invaders-pad button{min-height:44px}}

/* Gameplay buttons only: retain normal page selection and zoom elsewhere. */
.invaders .invaders-pad button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(any-pointer:coarse){
 .invaders .invaders-pad{display:grid;grid-template-columns:64px 64px minmax(12px,1fr) 88px;gap:6px;width:100%;}
 .invaders .invaders-pad button{min-width:0;width:100%;min-height:60px;}
 .invaders-pad [data-hold=left]{grid-column:1;grid-row:1}.invaders-pad [data-hold=right]{grid-column:2;grid-row:1}.invaders-pad [data-hold=fire]{grid-column:4;grid-row:1}
 .invaders .dispatch-controls{flex-wrap:wrap;}.invaders .dispatch-actions{width:100%;flex:auto;}
}
@media(any-pointer:coarse) and (min-width:701px){
 .invaders .invaders-pad{grid-template-columns:80px 80px minmax(16px,1fr) 112px;gap:8px;}
 .invaders .invaders-pad button{min-height:72px;font-size:16px;}
 .invaders .dispatch-actions button{min-height:52px;}
}
@media(any-pointer:coarse) and (max-height:500px){.invaders .invaders-pad button{min-height:52px;}}
