/* Keep tools reachable while leaving the middle of the scene unobstructed. */
.hud-tools{display:contents}.hud-menu-button{display:none!important}
/* The wider device switch owns its column, including inside a narrow preview. */
#app:not(.wide):not(.playing) #hudTools{display:grid;grid-column:1/-1;grid-template-columns:44px minmax(56px,1fr) 44px;gap:5px;min-width:0}
#app:not(.wide):not(.playing) #hudTools>.icon-button{grid-column:auto;width:100%;min-width:0;height:44px;min-height:44px}
#app.playing .top-actions,#playWrap .play-toolbar{position:relative;display:flex;flex-flow:row nowrap;direction:ltr;gap:4px;padding:4px;max-width:none;overflow:visible}
#app.playing .hud-menu-button,#playWrap .hud-menu-button{display:grid!important}
#app.playing .top-actions .icon-button,#playWrap .play-toolbar .icon-btn{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;border-radius:12px;flex:none}
#app.playing #hudTools,#playWrap #hudTools{display:none;position:absolute;right:0;top:calc(100% + 8px);padding:6px;gap:4px;grid-template-columns:44px 56px 44px;border:1px solid #b6c6a85c;border-radius:16px;background:#101f18f2;box-shadow:0 8px 25px #0005;backdrop-filter:blur(14px);z-index:20}
#app.playing #hudTools[data-open=true],#playWrap #hudTools[data-open=true]{display:grid}
#hudMenuBtn[aria-expanded=true]{border-color:#d7b974;background:#6f5e363d}
#soundBtn[data-muted=true]{color:#c5bcaa}
#app.playing .topbar{overflow:visible}
#touchDock{position:absolute;pointer-events:none;z-index:1;border:1px solid #d5e0c43d;border-radius:15px;background:#10201855;box-shadow:inset 0 1px 0 #eef5db14}
#touchControls>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#touchControls button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#touchControls[data-compact=true]>button{min-width:44px;min-height:44px;padding:4px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;overflow:hidden;box-shadow:inset 0 1px 0 #f5ffdf30;background:#21392d80;border:1px solid #c4d4ac6b;touch-action:none}
#touchControls[data-compact=true]>button[data-tool=true]{border-color:transparent;border-radius:11px;background:transparent;box-shadow:none}
#touchControls[data-compact=true]>button[data-tool=true]>small{display:none}
#touchControls[data-compact=true]>button>svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:hidden;flex:none}
#touchControls[data-compact=true]>button>small{font:600 9px/1 var(--magic-text);max-width:100%;margin:0}
#touchControls[data-compact=true]>button[aria-pressed=true]{color:#f6d58a;background:#8b6d3466}
#touchControls[data-compact=true]>button:active{background:#a4ba7d55}
#touchControls[data-compact=true]>:is(#touchFire,#fireBtn){background:#a27a3599;border-color:#e2c585b3;color:#ffe0a2;border-radius:50%}
#touchControls[data-compact=true]>:is(#touchUse,#useBtn){border-radius:50%}
#touchControls[data-compact=true]>#movePad{background:#172f2355;border:1px solid #d6e3bd80;box-shadow:inset 0 1px 0 #eaffce44}
#touchControls[data-compact=true]>#movePad>span{width:38%;height:38%;background:#bdcba36b;border:1px solid #d6e2b67a}
#touchControls[data-compact=true]>#movePad>small{display:none}
#touchControls[data-compact=true] #lookPad .turn-hint{width:32px;top:49%;right:20%;opacity:.23}
#touchControls[data-compact=true] #lookLabel{display:none}
#app.playing[data-controls=touch][data-touch-layout=compact]{--hud-height:var(--touch-hud-height,70px);--hud-bottom:10px}
#app.playing[data-controls=touch][data-touch-layout=compact] .operator-status{left:12px;bottom:10px;width:60px;height:var(--hud-height);margin:0;padding:3px;border-radius:10px;display:grid;grid-template-rows:minmax(0,1fr) 15px;gap:2px;background:#12241ac4}
#app.playing[data-controls=touch][data-touch-layout=compact] .operator-face{width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:7px;background-size:200% 200%}
#app.playing[data-controls=touch][data-touch-layout=compact] .operator-status .lives-meter{gap:3px;margin:0;flex-wrap:nowrap;align-items:center}
#app.playing[data-controls=touch][data-touch-layout=compact] .operator-status #livesIcons{font-size:8px;letter-spacing:-1px}
#app.playing[data-controls=touch][data-touch-layout=compact] .operator-status #livesValue{font-size:10px}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom{left:80px;right:12px;bottom:10px;transform:none;width:auto;height:var(--hud-height);margin:0;padding:8px;gap:8px;display:grid;grid-template-columns:1fr .7fr 1fr;border-radius:12px;background:#12241ac4}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom :is(.hud-health,.hud-slot,.hud-ammo){min-width:0;width:auto;margin:0;padding:0 0 0 7px;gap:0;align-self:center}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom .hud-health{padding:0}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom :is(.kills-slot,.health-icon,.ammo-icon){display:none}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom b{font-size:24px;line-height:1.1;white-space:nowrap;letter-spacing:-.5px;margin:4px 0}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom :is(small,#keyText){font-size:9px;line-height:1.2;letter-spacing:0;overflow-wrap:normal}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom em{font-size:11px}
#app.playing[data-controls=touch][data-touch-layout=compact] .health-track{height:3px;margin-top:4px;width:100%;max-width:70px}
#app.playing[data-controls=touch][data-touch-layout=compact] .combat-status{left:80px;bottom:calc(var(--hud-height) + 15px);transform:none;font:10px/1 var(--magic-text);letter-spacing:0}
#app.playing[data-controls=touch][data-touch-layout=compact] .hud-keyguide{display:none}
#app.playing[data-controls=touch][data-touch-layout=compact] .voice-caption{left:15%;right:15%;bottom:calc(var(--hud-height) + 192px);font-size:14px;line-height:1.3}
#app.playing[data-controls=touch] .topbar{top:10px;left:12px;right:12px;width:auto;max-width:none;padding:0;gap:8px;align-items:center}
#app.playing[data-controls=touch] .brand{font-size:16px;gap:8px}
#app.playing[data-controls=touch] .brand-mark{width:22px;height:26px;gap:3px}
#app.playing[data-controls=touch] .brand-mark i{width:5px}
#app.playing[data-controls=touch] .brand small{display:none}
#app.playing[data-controls=touch] .mission-chip{top:72px;left:12px;max-width:calc(100% - 108px);padding:8px 10px;gap:7px;border-radius:12px;background:#11231bb5}
#app.playing[data-controls=touch] .mission-chip b{font:600 10px/1.2 var(--magic-text);letter-spacing:.5px}
#app.playing[data-controls=touch] .mission-chip small{font:12px/1.3 var(--magic-text);margin-top:5px}
#app.playing[data-controls=touch] .power-indicator{font:9px/1.3 var(--magic-text);margin-top:3px}
#app.playing[data-controls=touch] .hud #minimap{top:72px;right:12px;width:72px;height:72px;border-radius:7px;opacity:.8}
#app.playing[data-controls=touch] .companion-chip{left:12px;top:166px;max-width:calc(100% - 24px);padding:5px 8px;font-size:10px}
#app.playing[data-controls=touch] .boss-hud{top:192px;left:12px;right:12px;padding:6px}
#playWrap{container-type:size}
#playWrap[data-controls=touch] .play-top{top:10px;left:12px;right:12px;display:block}
#playWrap[data-controls=touch] .play-toolbar{position:absolute;top:0;right:0;pointer-events:auto}
#playWrap[data-controls=touch] .mission{margin-top:62px;max-width:calc(100% - 96px);padding:8px 10px;font-size:11px}
#playWrap[data-controls=touch] #miniMap{top:72px;right:12px;width:72px;height:72px;opacity:.8}
#playWrap[data-controls=touch][data-touch-layout=compact] .team-hud{left:12px;right:12px;width:auto;bottom:10px;height:var(--touch-hud-height,70px);transform:none;display:flex;justify-content:space-between;gap:8px;padding:7px 8px;background:#12241ac4}
#playWrap[data-controls=touch][data-touch-layout=compact] .team-hud>div{min-width:0}
#playWrap[data-controls=touch][data-touch-layout=compact] .team-hud .face{width:40px;height:46px;flex:none}
#playWrap[data-controls=touch][data-touch-layout=compact] .team-hud :is(span,small){font-size:9px;line-height:1.2;max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#playWrap[data-controls=touch][data-touch-layout=compact] .team-hud strong{font-size:18px;line-height:1.1}
#playWrap[data-controls=touch][data-touch-layout=compact] .keyboard-hint{display:none}
#playWrap[data-controls=touch][data-touch-layout=compact] #caption{bottom:calc(var(--touch-hud-height,70px) + 192px);font-size:14px}
.layout-preview:not(.wide){aspect-ratio:9/16}
@container(max-height:450px){
 #app.playing[data-controls=touch] .mission-chip{max-width:50%;padding:6px 8px}
 #app.playing[data-controls=touch] .power-indicator{display:none}
 #app.playing[data-controls=touch] .companion-chip{top:126px;max-width:44%}
 #app.playing[data-controls=touch] .boss-hud{top:160px;max-width:40%}
 #app.playing[data-controls=touch][data-touch-layout=compact] .voice-caption,#playWrap[data-controls=touch][data-touch-layout=compact] #caption{bottom:auto;top:14px;left:30%;right:22%;font-size:12px}
 #app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom b{font-size:21px;margin:2px 0}
 #app.playing[data-controls=touch][data-touch-layout=compact] .operator-status{width:54px}
 #app.playing[data-controls=touch][data-touch-layout=compact] .hud-bottom{left:74px}
}
html[lang=he] #touchControls[data-compact=true] button small{font-family:var(--magic-text)}
@media(prefers-reduced-motion:reduce){#hudTools{transition:none}}

/* Room around both device icons without enlarging the toolbar height. */
#app .top-actions #formatBtn,#playWrap #deviceBtn{width:56px;min-width:56px;flex:0 0 56px;padding-inline:6px;display:flex;align-items:center;justify-content:center;direction:ltr}
#playWrap #deviceBtn svg{width:34px;height:24px;flex:none}

/* Phone mission summary: details are available on tap, without covering the view. */
.mission-toggle{display:none}
.mission-content{min-width:0}
#app.playing[data-controls=touch] .mission-chip{width:min(280px,calc(100% - 108px));max-width:none;min-height:58px;align-items:flex-start;padding:8px 10px;gap:6px}
#app.playing[data-controls=touch] .mission-content{width:100%;padding-inline-end:18px}
#app.playing[data-controls=touch] .mission-chip b{display:block;font:600 10px/1.25 var(--magic-text);letter-spacing:.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app.playing[data-controls=touch] .mission-chip .objective-row{font-size:12px;line-height:1.3;min-height:2.6em;margin-top:4px}
#app.playing[data-controls=touch] .mission-chip #objective{font:12px/1.3 var(--magic-text);margin:0}
#app.playing[data-controls=touch] .mission-chip[data-open=false] #objective{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#app.playing[data-controls=touch] .mission-chip[data-open=false] :is(#powerStatus,#alertStatus:not(.hot)){display:none}
#app.playing[data-controls=touch] .mission-chip #alertStatus{font:10px/1.35 var(--magic-text);letter-spacing:0;margin-top:4px}
#app.playing[data-controls=touch] .mission-chip[data-open=true] b{white-space:normal}
#app.playing[data-controls=touch] .mission-chip[data-open=true] #powerStatus{display:block;font:11px/1.4 var(--magic-text);margin-top:7px}
#app.playing[data-controls=touch] .mission-toggle{display:block;position:absolute;inset:0;width:100%;height:100%;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#d9c28c;box-shadow:none;pointer-events:auto;touch-action:manipulation;z-index:1}
#app.playing[data-controls=touch] .mission-toggle:active{transform:none}
#app.playing[data-controls=touch] .mission-toggle svg{position:absolute;top:8px;inset-inline-end:8px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#app.playing[data-controls=touch] .mission-toggle[aria-expanded=true] svg{transform:rotate(180deg)}

/* Mobile notices are light strips; keep the scene and touch controls visible. */
#app[data-controls=touch] :is(#toast,#voiceCaption),
#playWrap[data-controls=touch] #caption,
body:has(#playWrap[data-controls=touch]) > #toast{
 background:rgb(8 19 13 / 28%);
 border:1px solid rgb(215 231 207 / 18%);
 border-radius:6px;
 box-shadow:none;
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
 padding:5px 10px;
 color:#f2f4e6;
 font-weight:400;
 line-height:1.3;
 letter-spacing:0;
 text-shadow:0 1px 2px #000,0 0 4px #000b;
 text-align:center;
 overflow-wrap:anywhere;
 pointer-events:none;
}
#app[data-controls=touch] #toast,
body:has(#playWrap[data-controls=touch]) > #toast{
 width:max-content;
 max-width:calc(100% - 32px);
 font-size:14px;
}
#app[data-controls=touch] #voiceCaption,
#playWrap[data-controls=touch] #caption{
 width:fit-content;
 max-width:calc(100% - 32px);
 margin-inline:auto;
}
#playWrap[data-controls=touch] #caption:empty{display:none}
/* Online lobby notices also stay compact before the touch layout is applied. */
@media(any-pointer:coarse),(max-width:700px){
 body > #toast{width:max-content;max-width:calc(100% - 32px);font-size:14px;font-weight:400;line-height:1.3;padding:5px 10px;background:rgb(8 19 13 / 28%);border:1px solid rgb(215 231 207 / 18%);border-radius:6px;box-shadow:none;text-shadow:0 1px 2px #000,0 0 4px #000b;overflow-wrap:anywhere;pointer-events:none}
}
@media(prefers-reduced-transparency:reduce){
 #app[data-controls=touch] :is(#toast,#voiceCaption),#playWrap[data-controls=touch] #caption,body > #toast{background:#14251c}
}