/* V148: labels yield width before touch targets do. Keep the original button
   nodes, handlers and full accessible names; fine-pointer PC stays unchanged. */
#game-ui > header .header-label-compact{display:none}
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px),(pointer:coarse) and (max-width:1100px){
 /* A real two-column header reserves the right edge. Long map names grow only
    their own column; they cannot push the controls below or cover a button. */
 #game-ui > header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:8px;row-gap:0;height:auto;min-height:52px;padding:4px max(12px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));top:env(safe-area-inset-top);flex-wrap:nowrap}
 #game-ui > header #header-location{grid-column:1;grid-row:1;align-self:center;flex:initial;width:auto;min-width:0;min-height:44px;max-width:100%;overflow:hidden}
 #game-ui > header #header-location .location{width:100%;gap:0}
 #game-ui > header #header-location .location>div{width:100%;min-width:0}
 #game-ui > header #header-location .location-icon,
 #game-ui > header #header-location .weather{display:none}
 #game-ui > header #header-location h2{font-size:13px;line-height:18px;letter-spacing:0;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
 #game-ui > header #header-location p{margin-top:0;font-size:9px;line-height:14px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
 #game-ui > header .header-right{--header-control-gap:4px;grid-column:2;grid-row:1;justify-self:end;align-self:start;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;flex-wrap:nowrap;width:max-content;max-width:none;min-height:44px;margin:0;gap:var(--header-control-gap)}
 #game-ui > header .display-controls{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:var(--header-control-gap)}
 #game-ui > header #journal-toggle,
 #game-ui > header #to-title,
 #game-ui > header #fullscreen-toggle,
 #game-ui > header #volume-toggle,
 #game-ui > header #pause{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;gap:0;font-size:14px;line-height:20px;touch-action:manipulation}
 #game-ui > header #journal-toggle .header-menu-icon,
 #game-ui > header #to-title .header-menu-icon,
 #game-ui > header #fullscreen-label,
 #game-ui > header .header-label-wide{display:none}
 #game-ui > header #journal-toggle .header-menu-label,
 #game-ui > header #to-title .header-menu-label{display:inline;padding:0;font-size:14px;line-height:20px;white-space:nowrap}
 #game-ui > header .header-label-compact{display:inline;padding:0;font-size:inherit;line-height:inherit;white-space:nowrap}
 #game-ui > header #fullscreen-toggle[data-fullscreen-available="false"]{display:none}
 /* Larger touch tablets keep their existing map-control location. */
 #game-ui > header #header-world-tools .header-menu-button{height:44px;min-height:44px;touch-action:manipulation}
}
/* A supported fifth fullscreen control takes real space. On the narrowest
   phones the controls still occupy the TOP row; the complete map/level line
   gets the full width immediately below, instead of a squeezed 52px column. */
@media(max-width:360px){
 #game-ui > header:has(#fullscreen-toggle:not([data-fullscreen-available="false"])){grid-template-columns:minmax(0,1fr);row-gap:4px}
 #game-ui > header:has(#fullscreen-toggle:not([data-fullscreen-available="false"])) .header-right{grid-column:1;grid-row:1}
 #game-ui > header:has(#fullscreen-toggle:not([data-fullscreen-available="false"])) #header-location{grid-column:1;grid-row:2;min-height:0}
 #game-ui > header:has(#fullscreen-toggle:not([data-fullscreen-available="false"])) #header-location .location>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
}

/* V149: the four ordinary header controls share the real Q/W/E/R columns.
   Geometry comes from the live spell rectangles; a narrow or extra-control
   fallback preserves distinct 44px targets and the measured right edge. */
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px),(pointer:coarse) and (max-width:1100px){
 #game-ui > header{padding-right:var(--header-qwer-right,max(12px,env(safe-area-inset-right)))}
 #game-ui > header .header-right{--header-control-gap:var(--header-qwer-gap,4px)}
 #game-ui > header #journal-toggle .header-menu-label,
 #game-ui > header #to-title .header-menu-label{display:none}
 #game-ui > header #journal-toggle .header-menu-icon,
 #game-ui > header #to-title .header-menu-icon,
 #game-ui > header #fullscreen-toggle svg,
 #game-ui > header #volume-toggle svg,
 #game-ui > header #pause .header-menu-icon{display:block;flex:0 0 16px;width:16px;height:16px}
 #game-ui > header #journal-toggle,
 #game-ui > header #to-title,
 #game-ui > header #fullscreen-toggle,
 #game-ui > header #volume-toggle,
 #game-ui > header #pause{flex-basis:var(--header-qwer-width,44px);width:var(--header-qwer-width,44px);height:var(--header-qwer-height,44px);min-height:44px}
 #game-ui[data-header-qwer="aligned"] > header .header-right,
 #game-ui[data-header-qwer="minimum-targets"] > header .header-right{display:grid;grid-template-columns:var(--header-qwer-columns);gap:0}
 #game-ui[data-header-qwer="aligned"] > header .display-controls,
 #game-ui[data-header-qwer="minimum-targets"] > header .display-controls{display:contents}
 #game-ui[data-header-qwer="aligned"] > header #journal-toggle,
 #game-ui[data-header-qwer="minimum-targets"] > header #journal-toggle{grid-column:1;grid-row:1;width:100%}
 #game-ui[data-header-qwer="aligned"] > header #to-title,
 #game-ui[data-header-qwer="minimum-targets"] > header #to-title{grid-column:3;grid-row:1;width:100%}
 #game-ui[data-header-qwer="aligned"] > header #volume-toggle,
 #game-ui[data-header-qwer="minimum-targets"] > header #volume-toggle{grid-column:5;grid-row:1;width:100%}
 #game-ui[data-header-qwer="aligned"] > header #pause,
 #game-ui[data-header-qwer="minimum-targets"] > header #pause{grid-column:7;grid-row:1;width:100%}
 #game-ui[data-header-qwer-row="below"] > header{grid-template-columns:minmax(0,1fr);row-gap:4px}
 #game-ui[data-header-qwer-row="below"] > header .header-right{grid-column:1;grid-row:1}
 #game-ui[data-header-qwer-row="below"] > header #header-location{grid-column:1;grid-row:2;min-height:0}
 #game-ui[data-header-qwer-row="below"] > header #header-location .location>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
}

/* NEXT: independently shrink mobile button faces to 2/3. Keep live QWER gaps
   and the pause button's original top/right edge; never scale the entire row.
   Transparent hit regions retain the old height downward, and take only each
   control's own half-gap horizontally, leaving 1px between adjacent targets. */
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px),(pointer:coarse) and (max-width:1100px){
 #game-ui > header .header-right{align-items:start;min-height:max(44px,var(--header-qwer-height,44px))}
 #game-ui > header .display-controls{align-items:start}
 #game-ui[data-header-qwer="aligned"] > header .header-right,
 #game-ui[data-header-qwer="minimum-targets"] > header .header-right{grid-template-columns:var(--header-small-columns)}
 #game-ui > header #journal-toggle,
 #game-ui > header #to-title,
 #game-ui > header #fullscreen-toggle,
 #game-ui > header #volume-toggle,
 #game-ui > header #pause{position:relative;align-self:start;flex-basis:calc(var(--header-qwer-width,44px) * 2 / 3);width:calc(var(--header-qwer-width,44px) * 2 / 3);min-width:0;height:calc(var(--header-qwer-height,44px) * 2 / 3);min-height:0;overflow:visible}
 #game-ui[data-header-qwer="aligned"] > header #journal-toggle,
 #game-ui[data-header-qwer="minimum-targets"] > header #journal-toggle,
 #game-ui[data-header-qwer="aligned"] > header #to-title,
 #game-ui[data-header-qwer="minimum-targets"] > header #to-title,
 #game-ui[data-header-qwer="aligned"] > header #volume-toggle,
 #game-ui[data-header-qwer="minimum-targets"] > header #volume-toggle,
 #game-ui[data-header-qwer="aligned"] > header #pause,
 #game-ui[data-header-qwer="minimum-targets"] > header #pause{width:100%}
 #game-ui > header #journal-toggle .header-menu-icon,
 #game-ui > header #to-title .header-menu-icon,
 #game-ui > header #fullscreen-toggle svg,
 #game-ui > header #volume-toggle svg,
 #game-ui > header #pause .header-menu-icon{flex-basis:calc(16px * 2 / 3);width:calc(16px * 2 / 3);height:calc(16px * 2 / 3)}
 #game-ui > header #journal-toggle{--header-hit-left:0px;--header-hit-right:var(--header-touch-gap-0,1.5px)}
 #game-ui > header #to-title{--header-hit-left:var(--header-touch-gap-0,1.5px);--header-hit-right:var(--header-touch-gap-1,1.5px)}
 #game-ui > header #fullscreen-toggle{--header-hit-left:var(--header-touch-gap-0,1.5px);--header-hit-right:var(--header-touch-gap-0,1.5px)}
 #game-ui > header #volume-toggle{--header-hit-left:var(--header-touch-gap-1,1.5px);--header-hit-right:var(--header-touch-gap-2,1.5px)}
 #game-ui > header #pause{--header-hit-left:var(--header-touch-gap-2,1.5px);--header-hit-right:0px}
 #game-ui > header #journal-toggle::before,
 #game-ui > header #to-title::before,
 #game-ui > header #fullscreen-toggle::before,
 #game-ui > header #volume-toggle::before,
 #game-ui > header #pause::before{content:"";position:absolute;top:-1px;left:calc(-1px - var(--header-hit-left));right:calc(-1px - var(--header-hit-right));height:max(44px,var(--header-qwer-height,44px));background:transparent;pointer-events:auto}
}

/* V166: keep the compact faces level with the visible map heading. The extra
   bottom padding includes the unchanged 44px touch regions in header bounds. */
@media (max-width:760px), (orientation:landscape) and (max-height:600px) and (max-width:1100px), (pointer:coarse) and (max-width:1100px){
 #game-ui[data-header-qwer-row="alongside"] > header{padding-bottom:calc(4px + var(--header-control-y,0px))}
 #game-ui[data-header-qwer-row="alongside"] > header .header-right{transform:translateY(var(--header-control-y,0px))}
}