/* Mobile HUD: compact task, top-centre release notice, proximity below people. */
body.touch-directional:is(.playing-landscape,.playing-portrait){--compact-hud-top:calc(4px + var(--hud-top,0px));--compact-left-width:136px;--compact-right-width:164px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-strip{top:var(--compact-hud-top)!important;left:calc(8px + var(--hud-left,0px))!important;right:auto!important;width:var(--compact-left-width)!important;height:30px!important;gap:2px!important;padding:0 3px!important;border-radius:16px!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-strip #portrait-avatar,body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-strip #portrait-location{width:26px!important;height:26px!important;padding:4px!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-strip .portrait-stat{gap:4px;padding-left:0;border:0}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-strip .icon-button svg{width:16px;height:16px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-strip .portrait-stat b{font-size:12px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-status-right{position:fixed;display:flex;align-items:center;justify-content:space-between;right:calc(8px + var(--hud-right,0px));top:var(--compact-hud-top);height:30px;width:var(--compact-right-width);gap:6px;padding:0 4px 0 8px;box-sizing:border-box;border:1px solid #d5e2d1bd;border-radius:16px;background:#f4faf0e8;color:#264b3b;box-shadow:0 1px 4px #183e2710}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-status-right .portrait-stat{border:0;padding:0}
body.touch-directional:is(.playing-landscape,.playing-portrait) #portrait-more{width:26px!important;height:26px!important;padding:4px!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #hunter-warning#hunter-warning:not([hidden]){left:auto!important;right:calc(8px + var(--hud-right,0px))!important;top:calc(var(--compact-hud-top) + 36px)!important;bottom:auto!important;transform:none!important;height:26px!important;width:max-content!important;max-width:var(--compact-right-width)!important;padding:3px 9px!important;margin:0!important;border-radius:14px!important;font-size:11px;white-space:nowrap}
body.touch-directional:is(.playing-landscape,.playing-portrait) #hunter-distance{font-size:11px!important;line-height:18px;margin:0!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #opening-escape#opening-escape{top:var(--compact-hud-top)!important;left:calc(156px + var(--hud-left,0px))!important;right:calc(184px + var(--hud-right,0px))!important;transform:none!important;width:auto!important;max-width:none!important;min-height:30px;box-sizing:border-box;padding:2px 8px!important;gap:2px 4px!important;border-radius:16px;line-height:18px;box-shadow:none}
body.touch-directional:is(.playing-landscape,.playing-portrait) #opening-escape>span,body.touch-directional:is(.playing-landscape,.playing-portrait) #opening-escape small{font-size:11px!important;line-height:14px!important;white-space:nowrap}
body.touch-directional:is(.playing-landscape,.playing-portrait) #opening-escape strong{font-size:15px!important;line-height:14px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission.mission{top:calc(var(--compact-hud-top) + 38px)!important;left:calc(8px + var(--hud-left,0px))!important;right:auto!important;bottom:auto!important;width:260px!important;max-width:calc(var(--game-width,100vw) - 32px)!important;padding:5px 8px!important;border-radius:12px!important;max-height:calc(var(--game-height,100dvh) - 145px)!important;overflow:auto!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission:not(.is-hunter) .mission-header{grid-template-columns:16px minmax(0,1fr) auto;grid-template-rows:17px 21px;min-height:0!important;gap:2px 4px!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .mission-tag{font-size:10px!important;line-height:17px!important;letter-spacing:0}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .mission-header .icon-button{width:24px!important;height:22px!important;min-height:22px!important;padding:3px!important;margin:-3px -3px 0 0}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission #mission-title{font-size:11px!important;line-height:21px!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .runner-mission-icon svg{width:16px;height:16px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .runner-mission-summary{gap:4px;line-height:19px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .runner-mission-summary>span{font-size:10px;padding:0 4px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .runner-mission-summary>strong{font-size:10px}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission #alarm-message{font-size:11px!important;margin:7px 0!important;line-height:1.6!important}
body.touch-directional:is(.playing-landscape,.playing-portrait) #mission#mission .mission-objective{padding-top:6px;font-size:11px}
/* Mobile notices stay by the controls, rather than below the opening banner. */
body.touch-directional:is(.playing-landscape,.playing-portrait):has(#opening-escape#opening-escape:not([hidden])) #events.events{top:auto!important;bottom:calc(164px + var(--hud-bottom,0px))!important;transform:none!important}
body.touch-directional.playing-portrait #opening-escape#opening-escape{top:calc(var(--compact-hud-top) + 68px)!important;left:calc(8px + var(--hud-left,0px))!important;right:calc(8px + var(--hud-right,0px))!important}
body.touch-directional.playing-portrait #mission#mission.mission{top:calc(var(--compact-hud-top) + 104px)!important}

body.touch-directional.playing-portrait:not(:has(#opening-escape:not([hidden]))) #mission#mission.mission{top:calc(var(--compact-hud-top) + 68px)!important}
/* One event ribbon at the top in every viewport; no left-hand event stack. */
body #events#events#events#events.events{display:block!important;position:fixed!important;z-index:12;top:var(--hud-top,env(safe-area-inset-top,0px))!important;left:calc(8px + var(--hud-left,0px))!important;right:auto!important;bottom:auto!important;transform:none!important;width:calc(var(--game-width,100vw) - 16px - var(--hud-left,0px) - var(--hud-right,0px))!important;max-width:none!important;height:26px!important;max-height:26px!important;padding:0!important;margin:0!important;overflow:hidden!important;pointer-events:none}
body #events#events#events#events.events:empty{display:none!important}
body #events#events#events#events.events>div{display:block!important;box-sizing:border-box;width:100%;max-width:none!important;height:26px;min-height:0;padding:4px 10px!important;margin:0;border:0;border-radius:0 0 9px 9px;background:#203e33ed;color:#f6f7e7;font:600 12px/18px 'Microsoft YaHei',sans-serif!important;text-align:center;white-space:nowrap!important;overflow-wrap:normal!important;overflow:hidden;text-overflow:ellipsis;animation:none!important}
body #events#events#events#events.events>div:not(:first-child){display:none!important}
body.touch-directional:is(.playing-landscape,.playing-portrait):has(#events>div){--compact-hud-top:calc(30px + var(--hud-top,0px))}

body:not(.touch-directional) #events#events#events#events.events{display:none!important}