html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}
#game{display:block;width:100%!important;height:100%!important;outline:0}
#status{position:fixed;bottom:0;right:0;max-width:65%;font:11px Tahoma,Arial,sans-serif;color:#ddd;background:#000a;padding:2px 5px;pointer-events:none}
#status[hidden],#patch-panel[hidden],#patch-panel [hidden]{display:none!important}

/* Native desktop geometry; smaller viewports shorten the notice area. */
#patch-panel{
  position:fixed;inset:0;margin:auto;box-sizing:border-box;
  width:446px;height:492px;
  max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);
  max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);
  max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  display:grid;grid-template-rows:24px minmax(0,1fr);
  border:1px solid #fff;border-radius:0;background:#f0f0f0;color:#000;
  font:12px/1.25 Tahoma,Arial,sans-serif;z-index:40;
}
#patch-titlebar{display:flex;align-items:center;justify-content:space-between;min-width:0;background:#fff;user-select:none;touch-action:none;cursor:default}
#patch-title{margin:0;padding:0 2px;font:11px Tahoma,Arial,sans-serif}
#patch-panel #patch-close{position:relative;align-self:stretch;width:32px;min-width:32px;height:auto;padding:0;border:0;background:#fff;box-shadow:none}
#patch-close::before,#patch-close::after{content:"";position:absolute;left:11px;top:11px;width:11px;height:1px;background:#000;transform:rotate(45deg)}
#patch-close::after{transform:rotate(-45deg)}
#patch-panel #patch-close:hover{background:#e81123}
#patch-close:hover::before,#patch-close:hover::after{background:#fff}
#patch-content{display:grid;grid-template-rows:23px minmax(0,1fr) minmax(33px,auto) 16px 58px;min-height:0;padding:13px 4px 9px 5px}
#patch-notice-label{align-self:start}
#patch-notice{
  box-sizing:border-box;min-width:0;min-height:0;overflow-x:hidden;overflow-y:scroll;
  padding:2px 4px;border:1px solid;border-color:#808080 #fff #fff #808080;
  box-shadow:inset 1px 1px #a0a0a0;background:#f0f0f0;
  white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.25 Tahoma,Arial,sans-serif;
  scrollbar-color:#c8c8c8 #f0f0f0;
}
#patch-status{align-self:start;min-width:0;padding-top:5px}
#patch-state,#patch-details{margin:0;font-weight:400}
#patch-details{font-size:11px;overflow-wrap:anywhere;padding-bottom:3px}
#patch-footer{display:contents}
#patch-progress{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;height:16px;margin:0;padding:1px;border:1px solid;border-color:#a0a0a0 #fff #fff #a0a0a0;border-radius:0;background:#f0f0f0;color:#0078d7}
#patch-progress::-webkit-progress-bar{background:#f0f0f0}
#patch-progress::-webkit-progress-value{background:#0078d7}
#patch-progress::-moz-progress-bar{background:#0078d7}
#patch-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:9px;min-width:0}
#patch-panel button{
  box-sizing:border-box;width:88px;height:25px;margin:0;padding:1px 6px;
  border:1px solid;border-color:#fff #555 #555 #fff;border-radius:0;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #a0a0a0;background:#f0f0f0;
  color:#000;font:11px Tahoma,Arial,sans-serif;cursor:default;
}
#patch-panel button:active:not(:disabled){border-color:#555 #fff #fff #555;box-shadow:inset 1px 1px #a0a0a0;padding:2px 5px 0 7px}
#patch-panel button:focus-visible{outline:1px dotted #000;outline-offset:-5px}
#patch-panel button:disabled{color:#808080;text-shadow:1px 1px #fff}
#patch-panel #patch-retry{margin-right:auto}
#patch-notice:focus-visible{outline:1px dotted #000;outline-offset:-4px}
@media(max-width:350px){#patch-actions{gap:6px}#patch-panel button{width:80px}}

/* Landscape mobile: leave a black perimeter, keep progress/actions in one row. */
body[data-hud=mobile] #patch-panel{
  width:874px;height:494px;grid-template-rows:32px minmax(0,1fr);font-size:12px;
  max-width:calc(95vw - 16px);max-height:calc(95vh - 16px);
  max-width:calc(95vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
  max-height:calc(95dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body[data-hud=mobile] #patch-titlebar{touch-action:auto}
body[data-hud=mobile] #patch-title{padding-left:6px;font-size:12px}
body[data-hud=mobile] #patch-panel #patch-close{width:44px;min-width:44px;height:32px}
body[data-hud=mobile] #patch-close::before,body[data-hud=mobile] #patch-close::after{left:15px;top:15px;width:14px}
body[data-hud=mobile] #patch-content{padding:4px 6px 6px;grid-template-rows:18px minmax(0,1fr) minmax(18px,auto) 44px;row-gap:5px}
body[data-hud=mobile] #patch-notice{padding:4px 6px;font-size:13px;line-height:1.4;touch-action:pan-y;overscroll-behavior:contain}
body[data-hud=mobile] #patch-status{padding-top:0;align-self:center;font-size:11px;line-height:1.35}
body[data-hud=mobile] #patch-details{font-size:11px;padding-bottom:0}
body[data-hud=mobile] #patch-footer{display:flex;align-items:center;gap:8px;min-width:0}
body[data-hud=mobile] #patch-progress{flex:1;min-width:60px;width:0}
body[data-hud=mobile] #patch-actions{flex:none;align-items:center;gap:6px}
body[data-hud=mobile] #patch-actions button{width:100px;height:44px;font-size:13px;touch-action:manipulation}
body[data-hud=mobile] #patch-panel #patch-exit{width:64px}
body[data-hud=mobile] #patch-panel #patch-retry{width:76px;margin-right:0}
