/* Shared viewport budget: home panels, navigation and touch controls occupy
   separate lanes. Keep this after feature skins so their fixed sizes cannot win. */
:root {
  --screen-top:max(16px, env(safe-area-inset-top));
  --screen-bottom:max(16px, env(safe-area-inset-bottom));
  --screen-left:max(16px, env(safe-area-inset-left));
  --screen-right:max(16px, env(safe-area-inset-right));
  --nav-height:84px;
  --home-top:var(--screen-top);
  --home-stack-top:120px;
  --home-stack-bottom:180px;
}
.hud.compact-hud {
  left:var(--screen-left);right:var(--screen-right);
  grid-template-columns:var(--home-left-width) minmax(0,1fr) var(--home-right-width);
}
.compact-hud>.hud-center { min-width:0;max-width:100%; }
.compact-hud .hud-center h1 { white-space:nowrap; }
.home-left-stack { left:calc(var(--screen-left) - 4px); }
.home-right-stack { right:var(--screen-right); }
.bottom-hud { bottom:var(--screen-bottom);max-width:calc(100% - var(--screen-left) - var(--screen-right));overflow-x:auto; }
.bottom-hud .hotkey { flex-shrink:0; }
.window-shade {
  padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.game-window { min-width:0;min-height:0;max-height:100%; }
.window-body { min-height:0;min-width:0;overflow-x:hidden; }
.window-body :is(.intro,.shop-head,.bag-summary,.section-head,.exchange-overview) { flex-wrap:wrap;gap:12px; }
.window-body :is(.cards,.workbench,.two-col,.craft-layout,.diy-layout,.mail-layout,.social-layout)>* { min-width:0; }
.window-body :is(h1,h2,h3,p,.item-info,.task-card,.mail-row) { overflow-wrap:anywhere; }
.window-title>span:first-child { min-width:0;overflow-wrap:anywhere; }
.window-title .close-window { flex-shrink:0;min-width:36px;min-height:36px; }
.window-nav { overflow-x:auto;min-width:0; }
.window-nav button { flex-shrink:0;white-space:nowrap; }
.dialogue { max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain; }
dialog { max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain; }

@media (max-width:1100px) {
  :root { --home-left-width:200px;--home-right-width:180px; }
  .compact-hud .hud-center h1 { font-size:25px;letter-spacing:5px; }
  .compact-hud .hud-center p { font-size:9px;letter-spacing:1px; }
  .window-body .workbench { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .window-body .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .window-body .item-bottom { flex-wrap:wrap;gap:8px; }
  .window-body .item-bottom button { white-space:normal; }
}
@media (max-width:900px) {
  .window-body :is(.workbench,.diy-layout,.craft-layout,.mail-layout,.social-layout) { display:grid;grid-template-columns:minmax(0,1fr); }
  .window-body .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mail-list { max-height:220px; }
  .mail-detail { min-height:200px; }
  .window-body .intro:has(.bag-total-value) { align-items:stretch; }
  .bag-total-value { min-width:0; }
}
/* A wide touch device still needs the same movement and interaction controls
   as a phone. Width alone previously hid them on tablets. */
@media (any-pointer:coarse), (max-width:1024px) {
  :root { --home-stack-bottom:258px; }
  .world-controls { display:none; }
  .dpad {
    display:grid;position:absolute;left:var(--screen-left);bottom:calc(var(--screen-bottom) + var(--nav-height) + 12px);
    grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:3px;touch-action:none;
  }
  .dpad button { width:42px;height:42px;min-width:42px;min-height:42px;border:2px solid #c8c09c;background:#516247dc;color:#f5e8bf;border-radius:8px;touch-action:none; }
  .dpad .up { grid-column:2;grid-row:1; }.dpad .left { grid-column:1;grid-row:2; }
  .dpad .right { grid-column:3;grid-row:2; }.dpad .down { grid-column:2;grid-row:3; }
  .dpad .center { grid-column:2;grid-row:2;border-radius:6px;background:#6d7a4d88; }
  .touch-interact {
    display:grid;place-items:center;position:absolute;right:var(--screen-right);bottom:calc(var(--screen-bottom) + var(--nav-height) + 12px);
    width:72px;height:52px;min-height:52px;border:2px solid #c7b783;border-radius:12px;background:#e4cc91ed;color:#51452c;touch-action:manipulation;
  }
  .interaction-prompt { bottom:calc(var(--screen-bottom) + var(--nav-height) + 158px);max-width:calc(100% - var(--home-left-width) - var(--home-right-width) - 64px);white-space:normal;text-align:center; }
  .interaction-prompt kbd { display:none; }
  .hotkey small { display:none; }
  #app:has(.window-shade,.dialogue) :is(.dpad,.touch-interact,.interaction-prompt) { visibility:hidden; }
}
@media (max-width:700px) {
  :root {
    --screen-top:max(12px, env(safe-area-inset-top));--screen-bottom:max(12px, env(safe-area-inset-bottom));
    --screen-left:max(12px, env(safe-area-inset-left));--screen-right:max(12px, env(safe-area-inset-right));
    --home-left-width:clamp(136px,calc(50vw - 25px),176px);--home-right-width:clamp(136px,calc(50vw - 25px),176px);
    --home-stack-top:104px;--home-stack-bottom:258px;--nav-height:76px;
  }
  .compact-hud .hud-center { display:none; }
  .bottom-hud { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:min(390px,calc(100% - var(--screen-left) - var(--screen-right)));gap:5px;padding:7px;overflow:visible; }
  .bottom-hud .hotkey { width:100%;min-width:0;height:58px; }
  .hotkey span { white-space:nowrap;letter-spacing:0; }
  .interaction-prompt { max-width:calc(100% - 32px); }
  .home-left-stack .quest-tracker .task-hub-entry { font-size:11px; }
  .window-title { gap:8px; }.paused-badge { display:none; }
  .window-body .two-col { grid-template-columns:minmax(0,1fr); }
  .window-body .bag-total-value { width:100%;text-align:left; }
  .dialogue { bottom:calc(var(--screen-bottom) + var(--nav-height) + 8px);max-height:calc(100dvh - var(--nav-height) - 48px); }
}
/* Short landscape screens move the pad beside the task column, freeing its
   lower edge without shrinking tap targets or covering navigation. */
@media (max-height:600px) and (min-width:601px) {
  :root { --home-top:var(--screen-top);--home-stack-top:108px;--home-stack-bottom:116px;--home-left-width:180px;--home-right-width:156px; }
  .world-status { aspect-ratio:auto;height:156px;padding:9px;gap:5px; }
  .status-time { gap:6px;padding-bottom:5px; }.status-time small,.status-map .map-caption { display:none; }
  .status-time .day-label { font-size:11px; }.status-map .map-title { font-size:10px; }
  .home-right-stack { gap:8px; }.home-right-stack .money-card { min-height:32px;padding:6px 10px;font-size:12px; }
  .compact-hud>.player-card { padding:8px;gap:8px; }.compact-hud .pixel-portrait { width:36px;height:42px; }
  .compact-hud .player-name { font-size:12px;letter-spacing:0; }.compact-hud .hud-sub { font-size:8px;letter-spacing:0; }
  .compact-hud .hud-center h1 { font-size:22px; }.compact-hud .hud-center p { font-size:8px; }
  .dpad { left:calc(var(--screen-left) + var(--home-left-width) + 18px); }
  .interaction-prompt { left:calc(var(--screen-left) + var(--home-left-width) + 168px);right:calc(var(--screen-right) + 90px);width:auto;max-width:none;transform:none;bottom:calc(var(--screen-bottom) + var(--nav-height) + 20px); }
  .home-left-stack .quest-tracker { padding:10px; }
  .dialogue { bottom:calc(var(--screen-bottom) + var(--nav-height) + 8px);max-height:calc(100dvh - var(--nav-height) - 48px); }
}
@media (max-width:600px) and (max-height:600px) {
  :root { --home-stack-bottom:236px; }
  .dpad { grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px); }
  .dpad button { width:36px;height:36px;min-width:36px;min-height:36px; }
}