/* Combat information sits at the edges. Event text has no opaque panel. */
body #play-surface #announcement.announcement {
  top:24%!important; left:50%!important; right:auto; bottom:auto;
  transform:translate(-50%,-50%)!important; width:min(440px,44%); max-width:440px;
  min-width:0; padding:0; border:0; border-radius:0; background:none!important;
  box-shadow:none; text-align:center; text-shadow:0 2px 2px #071222,1px 0 2px #071222,-1px 0 2px #071222;
}
body #play-surface #announcement.announcement>span {font:700 24px/1.12 Barlow,Impact,sans-serif;letter-spacing:0;color:#fff2b7}
body #play-surface #announcement.announcement p {font-size:13px;line-height:1.35;margin:5px 0 0;color:#fff;display:block}
#play-surface #hud .objective {
  top:calc(var(--hud-edge,68px) + 12px);left:18px;width:250px;max-width:250px;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  text-shadow:0 1px 2px #061425,1px 0 2px #061425,-1px 0 2px #061425;
}
#play-surface #hud .objective>.eyebrow {font-size:8px;letter-spacing:1px}
#play-surface #hud .objective h2 {font-size:21px;line-height:1.08;margin:5px 0}
#play-surface #hud .objective p {font-size:11px;line-height:1.35;margin:5px 0 0;max-width:none}
#play-surface #hud .objective .side-story {border:0;padding:0;margin-top:8px;color:#c8e7ff;font-size:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#play-surface #hud .objective .side-story:empty,#play-surface #hud .objective .side-task:empty {display:none}
#play-surface #hud .objective .side-task {color:#fff0bc;font-size:10px}
#play-surface #hud .objective #crew-count {display:none}
#play-surface #hud .goal-progress {margin-top:7px}
#play-surface #hud .goal-progress .lock-track {height:5px;box-shadow:0 0 0 1px #0717278a}
#play-surface #hud .goal-progress.active-task .lock-track i {background:#69dcff}
#play-surface #hud .boss-hud {
  top:calc(var(--hud-edge,68px) + 8px);bottom:auto;left:50%;right:auto;transform:translateX(-50%);
  width:300px;max-width:40%;padding:0;border:0;background:none;box-shadow:none;
  text-shadow:0 1px 2px #0b1726,1px 0 2px #0b1726;
}
#play-surface #hud .boss-hud>div:first-child {display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;margin:0 0 4px}
#play-surface #hud .boss-hud strong {font:700 18px/1 Barlow,Impact,sans-serif;margin:0;order:-1}
#play-surface #hud .boss-hud span {font-size:8px;letter-spacing:.6px;display:block}
#play-surface #hud .boss-hud small {display:none}
#play-surface #hud .boss-hud .bar {height:6px;border:1px solid #071421;background:#301c35}
#play-surface #hud .hud-top {padding:10px 20px 9px;background:linear-gradient(#101f35ef,#101f35bf);box-shadow:none;gap:22px}
#play-surface #hud .bottom-hud {padding:8px 18px 7px;min-height:0;background:linear-gradient(#101f35b8,#101f35ed);box-shadow:none}
#play-surface #hud .weapon-slot {min-height:42px;padding:6px 9px}
#play-surface #hud .weapon-dock {max-width:1080px}
#play-surface #hud .loadout-row {grid-template-columns:minmax(0,1fr) 135px;gap:8px}
#play-surface #hud .weapons {grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:6px}
#play-surface #hud .run-count {min-width:60px}
#play-surface #hud .weapon-slot b {font-size:15px}
#play-surface #hud .special-power {min-height:46px}
#play-surface #hud .last-upgrade {font-size:9px;min-height:10px;margin-top:4px}
#play-surface #hud .map-panel {width:128px;right:16px;bottom:calc(var(--dock-edge,105px) + 12px)}
#play-surface #hud .map-panel.expanded {width:240px}
#play-surface #hud #map-toggle {min-height:29px;padding:6px 9px}
#play-surface #hud .dialogue {padding:0;background:none;border:0;box-shadow:none;text-shadow:0 1px 2px #061425,1px 0 2px #061425}

@media(max-width:900px) and (hover:hover) {
  #play-surface #hud .objective {width:220px;max-width:27%}
  #play-surface #hud .objective h2 {font-size:19px}
  #play-surface #hud .weapon-slot b {font-size:13px}
}
.touch-mode #play-surface #hud .hud-top {padding:7px 10px;gap:7px}
.touch-mode #play-surface #hud .objective {top:calc(var(--hud-edge,96px) + 9px);left:12px;width:calc(100% - 132px);max-width:270px}
.touch-mode #play-surface #hud .objective h2 {font-size:18px}
.touch-mode #play-surface #hud .objective p {font-size:11px}
.touch-mode #play-surface #hud .objective .side-story {font-size:10px}
.touch-mode #play-surface #hud .bottom-hud {padding:6px 9px calc(6px + env(safe-area-inset-bottom))}
.touch-mode #play-surface #hud .loadout-row {grid-template-columns:minmax(0,1fr) 96px}
.touch-mode #play-surface #hud .weapons {grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.touch-mode #play-surface #hud .weapon-slot {min-height:44px;padding:5px}
.touch-mode #play-surface #hud .weapon-slot b {font-size:12px}
.touch-mode #play-surface #hud .map-panel {top:calc(var(--hud-edge,96px) + 9px);bottom:auto;right:10px;width:96px}
.touch-mode #play-surface #hud .map-panel.expanded {width:210px}
.touch-mode #play-surface #hud .boss-hud {top:calc(var(--goal-edge,197px) + 9px);left:50%;max-width:76%;width:270px}
.touch-mode #play-surface #hud .boss-hud strong {font-size:16px}
.touch-mode #play-surface #hud .boss-hud span {font-size:7px}
body.touch-mode #play-surface #announcement.announcement {top:max(32%,var(--notice-top,220px))!important;transform:translate(-50%,0)!important;width:calc(100% - 42px);max-width:370px;left:50%!important}
body.touch-mode #play-surface #announcement.announcement>span {font-size:22px}
body.touch-mode #play-surface #announcement.announcement p {font-size:12px}

@media(max-width:350px) and (orientation:portrait) {
  .touch-mode #play-surface #hud .objective .side-story {display:none}
}

@media(orientation:landscape) and (max-height:650px) {
  .touch-mode #play-surface #hud .loadout-row {max-width:none;grid-template-columns:minmax(0,1fr) 105px}
  .touch-mode #play-surface #hud .weapons {grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}
  .touch-mode #play-surface #hud .last-upgrade {display:none}
  .touch-mode #play-surface #hud .objective {max-width:27%;width:235px;left:12px}
  .touch-mode #play-surface #hud .objective h2 {font-size:16px}
  .touch-mode #play-surface #hud .objective p {font-size:10px}
  .touch-mode #play-surface #hud .objective .side-story {display:none}
  .touch-mode #play-surface #hud .boss-hud {top:calc(var(--hud-edge,60px) + 7px);max-width:30%;width:250px}
  .touch-mode #play-surface #hud .map-panel {width:82px}
  .touch-mode #play-surface #hud .map-panel.expanded {width:160px}
  body.touch-mode #play-surface #announcement.announcement {top:29%!important;transform:translate(-50%,-50%)!important;max-width:38%;width:320px}
  body.touch-mode #play-surface #announcement.announcement>span {font-size:19px}
  body.touch-mode #play-surface #announcement.announcement p {font-size:11px}
}

#aim-reticle{position:absolute;pointer-events:none;z-index:3;transform:translate(-50%,-50%);font:22px/1 monospace;color:#fff6c9;text-shadow:0 1px 2px #071421,1px 0 2px #071421}
.health-point-status{--health-state:#8df1a7;padding:5px 6px 7px;pointer-events:none;line-height:1.3;background:#142339;text-align:center}
.health-point-status span{display:block;font-size:8px;letter-spacing:.5px;color:#c3d4e6}
.health-point-status strong{display:block;font-size:10px;color:var(--health-state);font-variant-numeric:tabular-nums}
.health-point-status progress{display:block;width:100%;height:4px;margin:4px 0 0;border:0;border-radius:2px;appearance:none;background:#3a4b60;color:var(--health-state)}
.health-point-status progress::-webkit-progress-bar{background:#3a4b60;border-radius:2px}
.health-point-status progress::-webkit-progress-value{background:var(--health-state);border-radius:2px}
.health-point-status progress::-moz-progress-bar{background:var(--health-state);border-radius:2px}
.touch-mode .health-point-status strong{font-size:8px}
@media(orientation:landscape) and (max-height:400px){
  .touch-mode #play-surface #hud .map-panel{right:calc(138px + max(14px,env(safe-area-inset-right)))}
  .touch-mode #play-surface #hud .map-panel.expanded{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:240px}
  .touch-mode #play-surface #hud .map-panel.expanded #map-toggle{grid-column:1/-1}
  .touch-mode #play-surface #hud .map-panel.expanded #map-canvas{grid-column:1;grid-row:2;height:auto;width:100%}
  .touch-mode #play-surface #hud .map-panel.expanded .health-point-status{grid-column:1;grid-row:3}
  .touch-mode #play-surface #hud .map-panel.expanded #map-legend{grid-column:2;grid-row:2/4;margin:0;padding:8px;font-size:10px;line-height:1.5;align-self:start}
}

.weapon-lab-link{margin:20px 0;color:#b8cde6;font-size:12px;line-height:1.5}.weapon-lab-link a{display:inline-block;color:#8fe8fa;font-size:15px;font-weight:700;padding:10px 0;text-underline-offset:4px}.weapon-lab-link span{display:block}

/* V18: one reading area, a stable hero view and a thumb-sized health reserve. */
#play-surface .vitals{position:relative}
#play-surface .health{position:relative}
#play-surface #health-loss-fill{position:absolute;top:0;bottom:0;display:block;width:0;background:#ff668d;pointer-events:none}
#play-surface #health-loss{position:absolute;right:0;top:calc(100% + 4px);color:#ffd3e0;font:700 16px/1.2 system-ui,sans-serif;text-shadow:0 2px 2px #1a122b;z-index:9;pointer-events:none;white-space:nowrap}
#play-surface #health-bottle{position:absolute;left:14px;bottom:12px;width:72px;height:66px;min-height:66px;z-index:8;border:1px solid #ffafd2;border-radius:12px;background:linear-gradient(145deg,#693954,#242b4e);box-shadow:inset 0 1px #ffe8f93d,0 3px 0 #101830;color:#fff5fc;padding:5px 7px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:36px 16px;align-items:center;justify-items:center;gap:0;touch-action:manipulation}
#health-bottle svg{width:28px;height:34px}
#health-bottle> b{font:700 24px/1 Barlow,Impact,sans-serif}
#health-bottle>span{grid-column:1/-1;white-space:nowrap;font:700 10px/1.1 Arial,sans-serif;letter-spacing:.2px}
#health-bottle kbd{position:absolute;top:-10px;right:-6px;margin:0;border-color:#dfa4c6;background:#182a47;font-size:10px;border-radius:3px}
#play-surface #health-bottle:disabled{background:#253148;border-color:#9b899f;color:#cfc7d7;box-shadow:none;filter:saturate(.35);cursor:default;opacity:1}
#play-surface #hud .bottom-hud{padding-left:100px}
#play-surface #hud .objective{width:280px;max-width:30%;overflow-wrap:anywhere}
#play-surface #hud .objective h2{font-size:22px}
#play-surface #hud #objective-detail{font-size:15px;line-height:1.35}
#play-surface #hud .objective .side-story,#play-surface #hud .objective .side-task{font-size:13px;line-height:1.35}
#play-surface #hud .objective .side-task{display:none}
#play-surface #hud .objective .side-story{display:none}
#play-surface #hud .goal-progress>div:first-child{font-size:13px}
#play-surface #hud .goal-progress b{font-size:10px}
body #play-surface #announcement.announcement,body #play-surface #toast.toast{position:absolute!important;top:calc(var(--hud-edge,80px) + 18px)!important;left:50%!important;right:auto;bottom:auto;transform:translateX(-50%)!important;width:min(420px,38%);max-width:420px;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;white-space:normal;overflow-wrap:anywhere;text-align:center;text-shadow:0 1px 3px #0b1830,1px 0 3px #0b1830,-1px 0 3px #0b1830;font-size:16px;line-height:1.35;z-index:7}
body #play-surface #announcement.announcement>span{font-size:22px;line-height:1.15;color:#ffd990}
body #play-surface #announcement.announcement p{font-size:15px;line-height:1.35;margin-top:5px}
#play-surface #dialogue{display:none!important}
body.has-event-notice #play-surface #hud .boss-hud{visibility:hidden}
#play-surface #world-chest-open{max-width:calc(100% - 24px);font-size:13px}
.menu-feedback{font-size:16px;line-height:1.4;color:#ffd3e4;padding:12px 0}

/* Touch uses physical view pixels. A rotating or zoomed browser retains this layout. */
body.touch-mode #play-surface #hud .hud-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:6px 12px;padding:8px 10px;background:linear-gradient(#15243ced,#14213dcc);min-width:0}
body.touch-mode #play-surface #hud .vitals{grid-column:1;grid-row:1;min-width:0;width:auto}
body.touch-mode #play-surface #hud .vitals .bar-head{font-size:11px;line-height:1.2;margin-bottom:4px;gap:6px}
body.touch-mode #play-surface #hud .vitals .bar-head>strong{font-size:18px}
body.touch-mode #play-surface #hud .health{height:8px}
body.touch-mode #play-surface #hud .power-row{font-size:10px;margin-top:5px}
body.touch-mode #play-surface #hud .power-label{font-size:10px}
body.touch-mode #play-surface #hud .power-row>b{width:37px;flex:none}
body.touch-mode #play-surface #hud .hud-actions{grid-column:2;grid-row:1;gap:6px;align-self:start}
body.touch-mode #play-surface #hud .icon-button{width:42px;height:44px;min-height:44px;font-size:18px;border-radius:7px}
body.touch-mode #play-surface #hud .level-block{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:auto minmax(60px,1fr);grid-template-rows:auto;gap:6px;max-width:none;min-width:0;align-items:center}
body.touch-mode #play-surface #hud .level-block .bar-head{font-size:11px;margin:0;gap:9px;min-width:0;white-space:nowrap}
body.touch-mode #play-surface #hud #xp-hint{display:none}
body.touch-mode #play-surface #hud .experience{height:6px;min-width:0;width:100%}
body.touch-mode #play-surface #hud .gold-block{grid-column:1;grid-row:2;display:flex;flex-direction:row;align-items:center;gap:5px;min-width:0;text-align:left}
body.touch-mode #play-surface #hud .gold-block strong{font:700 16px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
body.touch-mode #play-surface #hud .gold-block>span:last-child{font-size:10px;letter-spacing:.4px;order:-1}
body.touch-mode #play-surface #hud .deadline{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:0;padding:0;min-width:0;border:0}
body.touch-mode #play-surface #hud .deadline>span{font-size:9px;line-height:1.1;letter-spacing:0;max-width:50px;text-align:right}
body.touch-mode #play-surface #hud .deadline strong{font:700 16px/1 system-ui,sans-serif;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums}
body.touch-mode #play-surface #hud .objective{top:calc(var(--hud-edge,112px) + 12px);left:12px;width:calc(100% - 124px);max-width:none;padding:0}
body.touch-mode #play-surface #hud .objective>.eyebrow{font-size:9px;letter-spacing:.4px;line-height:1.2}
body.touch-mode #play-surface #hud .objective h2{font-size:19px;line-height:1.15;margin:5px 0}
body.touch-mode #play-surface #hud #objective-detail{font:400 16px/1.32 Arial,sans-serif;margin:5px 0 0}
body.touch-mode #play-surface #hud .goal-progress{margin-top:7px}
body.touch-mode #play-surface #hud .goal-progress>div:first-child{font-size:13px;gap:8px;line-height:1.25}
body.touch-mode #play-surface #hud .goal-progress b{display:none}
body.touch-mode #play-surface #hud .goal-progress .lock-track{height:6px;margin-top:4px}
body.touch-mode #play-surface #hud #route-progress{font-size:13px;line-height:1.3}
body.touch-mode #play-surface #hud .map-panel{top:calc(var(--hud-edge,112px) + 12px);bottom:auto;right:10px;width:96px;border-radius:9px}
body.touch-mode #play-surface #hud #map-toggle{font-size:11px;min-height:36px;padding:6px 8px}
body.touch-mode #play-surface #map-panel:not(.expanded) #map-canvas{width:100%;height:65px}
body.touch-mode #play-surface #hud .health-point-status{padding:4px 4px 6px;line-height:1.2}
body.touch-mode #play-surface #hud .health-point-status span{font-size:9px;letter-spacing:0}
body.touch-mode #play-surface #hud .health-point-status strong{font-size:11px;white-space:normal}
body.touch-mode #play-surface #hud .health-point-status progress{height:5px;margin-top:5px}
body.touch-mode #play-surface #hud .boss-hud{top:calc(var(--goal-edge,270px) + 8px);width:220px;max-width:70%;left:50%}
body.touch-mode #play-surface #hud .boss-hud span{display:none}
body.touch-mode #play-surface #hud .boss-hud strong{font-size:17px}
body.touch-mode #play-surface #announcement.announcement,body.touch-mode #play-surface #toast.toast{top:calc(var(--hud-edge,112px) + 12px)!important;left:12px!important;transform:none!important;width:calc(100% - 124px);max-width:none;text-align:left;line-height:1.3;padding:0}
body.touch-mode #play-surface #announcement.announcement>span{font-size:19px;line-height:1.15}
body.touch-mode #play-surface #announcement.announcement p{font-size:16px;line-height:1.32;margin-top:7px}
body.touch-mode.has-event-notice #play-surface #hud .objective{visibility:hidden}
body.touch-mode #play-surface:has(#toast:not([hidden])) #hud .objective{visibility:hidden}
body.touch-mode #play-surface #hud .bottom-hud{display:block;padding:6px 9px 7px 92px;min-height:76px}
body.touch-mode #play-surface #hud .loadout-row{display:block;max-width:none}
body.touch-mode #play-surface #hud .special-power{display:none}
body.touch-mode #play-surface #hud .dock-label{display:block;font-size:10px;letter-spacing:.5px;margin:0 0 4px}
body.touch-mode #play-surface #hud .dock-label>span{display:none}
body.touch-mode #play-surface #hud .weapons{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:0 0 3px;scrollbar-width:thin;scrollbar-color:#6681a2 transparent;pointer-events:auto;touch-action:pan-x;overscroll-behavior:contain;scroll-snap-type:x proximity}
body.touch-mode #play-surface #hud .weapon-slot{flex:0 0 112px;display:block;min-height:45px;height:auto;padding:6px;scroll-snap-align:start;border-radius:7px}
body.touch-mode #play-surface #hud .weapon-slot.empty{display:none}
body.touch-mode #play-surface #hud .weapon-slot b{font-size:15px;line-height:1.05;white-space:normal}
body.touch-mode #play-surface #hud .weapon-slot .weapon-state{font-size:10px;line-height:1.1;margin-top:4px}
body.touch-mode #play-surface #hud .last-upgrade{display:none}
body.touch-mode #play-surface #health-bottle{bottom:10px;left:10px;width:72px;height:62px;min-height:62px;grid-template-rows:32px 16px}
body.touch-mode #play-surface #health-bottle svg{height:30px}
body.touch-mode #play-surface #health-bottle kbd{display:none}
body.touch-mode #play-surface #health-loss{top:21px;right:0;font-size:16px;transform:translateY(1px);padding:1px 4px;background:#3a1834c9;border-radius:4px}
body.touch-mode #play-surface #touch-stick{width:110px;height:110px;left:12px;bottom:calc(var(--dock,90px) + 10px)}
body.touch-mode #play-surface .stick-thumb{left:33px;top:33px;width:40px;height:40px}
body.touch-mode #play-surface .stick-guide{font-size:10px;top:11px}
body.touch-mode #play-surface .touch-actions{right:12px;bottom:calc(var(--dock,90px) + 10px);grid-template-columns:60px 60px;gap:7px}
body.touch-mode #play-surface .touch-actions button{min-height:49px;padding:7px 4px}
body.touch-mode #play-surface .touch-actions b{font-size:11px;letter-spacing:.4px}
body.touch-mode #play-surface .touch-actions small{font-size:10px}
body.touch-mode #play-surface .touch-actions .touch-power{min-height:48px}
body.touch-mode #play-surface #hud .weapon-detail{position:absolute;top:auto;bottom:calc(100% + 12px);left:auto;right:0;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);padding:15px 52px 15px 15px;max-height:240px;overflow:auto;background:#172843f5}
body.touch-mode #play-surface #hud .weapon-detail p{font-size:16px;line-height:1.4}
body.touch-mode #play-surface #hud .weapon-detail small{font-size:13px;line-height:1.4}
body.touch-mode #play-surface #hud .weapon-detail strong{font-size:22px}
body.touch-mode #play-surface.wide-view #hud .hud-top{grid-template-columns:minmax(160px,1fr) minmax(155px,1fr) auto auto auto;grid-template-rows:1fr;gap:16px;padding:7px 12px}
body.touch-mode #play-surface.wide-view #hud .vitals{grid-column:1;grid-row:1}
body.touch-mode #play-surface.wide-view #hud .level-block{grid-column:2;grid-row:1;display:block}
body.touch-mode #play-surface.wide-view #hud .level-block .bar-head{font-size:11px;margin-bottom:6px}
body.touch-mode #play-surface.wide-view #hud .gold-block{grid-column:3;grid-row:1;display:grid;gap:4px;text-align:right}
body.touch-mode #play-surface.wide-view #hud .gold-block>span:last-child{grid-column:1}
body.touch-mode #play-surface.wide-view #hud .deadline{grid-column:4;grid-row:1;display:grid;justify-content:end;gap:4px}
body.touch-mode #play-surface.wide-view #hud .deadline>span{max-width:none}
body.touch-mode #play-surface.wide-view #hud .hud-actions{grid-column:5;grid-row:1}
body.touch-mode #play-surface.wide-view #hud .objective{width:240px;max-width:29%;top:calc(var(--hud-edge,65px) + 9px)}
body.touch-mode #play-surface.wide-view #hud .objective h2{font-size:17px;line-height:1.1}
body.touch-mode #play-surface.wide-view #hud #objective-detail{font-size:16px;line-height:1.25}
body.touch-mode #play-surface.wide-view #hud .map-panel{top:calc(var(--hud-edge,65px) + 9px);right:12px;width:94px}
body.touch-mode #play-surface.wide-view #map-panel:not(.expanded) #map-canvas{height:56px}
body.touch-mode #play-surface.wide-view #hud .boss-hud{top:calc(var(--hud-edge,65px) + 10px);width:220px;max-width:27%}
body.touch-mode #play-surface.wide-view #announcement.announcement,body.touch-mode #play-surface.wide-view #toast.toast{left:50%!important;transform:translateX(-50%)!important;width:34%;max-width:310px;top:calc(var(--hud-edge,65px) + 12px)!important;text-align:center}
body.touch-mode.has-event-notice #play-surface.wide-view #hud .objective{visibility:visible}
body.touch-mode #play-surface.wide-view:has(#toast:not([hidden])) #hud .objective{visibility:visible}
body.touch-mode #play-surface.wide-view #hud .bottom-hud{min-height:67px;padding-top:5px;padding-bottom:5px}
body.touch-mode #play-surface.wide-view #hud .dock-label{display:none}
body.touch-mode #play-surface.wide-view #hud .weapon-slot{flex-basis:110px;min-height:50px}
body.touch-mode #play-surface.wide-view #health-bottle{height:57px;min-height:57px;bottom:7px;grid-template-rows:29px 14px}
body.touch-mode #play-surface.wide-view #touch-stick{width:96px;height:96px;bottom:calc(var(--dock,76px) + 8px)}
body.touch-mode #play-surface.wide-view .stick-thumb{left:29px;top:29px;width:34px;height:34px}
body.touch-mode #play-surface.wide-view .touch-actions{bottom:calc(var(--dock,76px) + 8px)}
body.touch-mode #play-surface.wide-view .touch-actions button{min-height:44px}
body.touch-mode #play-surface.wide-view .touch-actions .touch-power{min-height:44px}
@media(prefers-reduced-motion:reduce){#play-surface #health-loss-fill{transition:none}}
body.touch-mode #play-surface #hud .map-panel.expanded{width:min(260px,calc(100% - 24px));right:12px;display:block;z-index:10;background:#142339}
body.touch-mode #play-surface #hud .map-panel.expanded #map-canvas{width:100%;height:auto}
body.touch-mode #play-surface #hud .map-panel.expanded #map-legend{display:block;font-size:13px;line-height:1.4;padding:0 12px 12px}
body.touch-mode #play-surface #hud .map-panel.expanded .health-point-status span{font-size:11px}
body.touch-mode #play-surface #hud .map-panel.expanded .health-point-status strong{font-size:13px}
body.touch-mode #play-surface.wide-view #hud .map-panel.expanded{display:grid;grid-template-columns:1fr 1fr;width:350px;max-width:calc(100% - 24px)}
body.touch-mode #play-surface.wide-view #hud .map-panel.expanded #map-toggle{grid-column:1/-1}
body.touch-mode #play-surface.wide-view #hud .map-panel.expanded #map-canvas{grid-column:1;grid-row:2}
body.touch-mode #play-surface.wide-view #hud .map-panel.expanded .health-point-status{grid-column:1;grid-row:3}
body.touch-mode #play-surface.wide-view #hud .map-panel.expanded #map-legend{grid-column:2;grid-row:2/4;padding:10px;font-size:13px}
/* Leave the action buttons their own column in a short landscape window. */
body.touch-mode #play-surface.wide-view.short-view #hud .map-panel:not(.expanded){right:calc(139px + max(12px,env(safe-area-inset-right)))}