/* Compact mobile controls shared by the carrier and shared ocean. */
#mobileHUD { --mh-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); --mh-dock-height:66px; color:var(--game-fg); font-family:var(--game-body); }
#mobileHUD *,#mobileHUD *::before,#mobileHUD *::after { box-sizing:border-box; }
#mobileHUD button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
#mobileHUD button:focus-visible { outline:2px solid var(--game-deck-yellow); outline-offset:3px; }
#mobileHUD svg { width:21px; height:21px; flex-shrink:0; }
.mh-header,.mh-dock,.mh-camera button,.mh-panel { background:rgba(5,26,30,.94); border:1px solid #42605b; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 8px 24px #0003; }
.mh-header { position:fixed; z-index:15; top:calc(10px + env(safe-area-inset-top,0px)); left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); border-radius:20px; padding:5px 10px 0; }
.mh-top { min-height:44px; display:flex; align-items:center; gap:7px; }
.mh-brand { padding:6px 8px; border-radius:11px; font:14px var(--game-display); background:var(--game-deck-yellow); color:#162225; }
.mh-time { flex:1; min-width:0; font:600 12px var(--game-mono); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mh-playback { display:flex; gap:2px; }
#mobileHUD .mh-top button { width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; border:1px solid var(--game-line); border-radius:50%; background:transparent; box-shadow:none; }
#mobileHUD .mh-playback button:first-child { background:var(--game-deck-yellow); border-color:transparent; color:#182626; }
#mobileHUD .mh-playback small { display:none; }
#mobileHUD .mh-playback b { font-size:12px; }
#mobileHUD .mh-status { border:0; border-top:1px solid #42605b80; border-radius:0; background:none; width:100%; min-height:44px; padding:5px 0; display:flex; align-items:center; gap:10px; text-align:left; font-size:12px; }
.mh-pop { display:flex; gap:6px; align-items:center; white-space:nowrap; min-width:0; max-width:45%; }
.mh-pop span { overflow:hidden; text-overflow:ellipsis; }
.mh-pop svg { width:18px!important; height:18px!important; }
.mh-health { display:flex; align-items:center; gap:6px; min-width:0; flex:1; padding-left:10px; border-left:1px solid #42605b; }
.mh-health span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-health i { flex:none; width:7px; height:7px; border-radius:50%; background:var(--game-good); }
.mh-warning .mh-health { color:var(--game-warn); }
.mh-warning .mh-health i { background:var(--game-warn); }
.mh-status>svg { width:14px!important; }
.mh-dock { position:fixed; z-index:17; left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); bottom:var(--mh-bottom); height:var(--mh-dock-height); border-radius:19px; display:flex; padding:5px 0; }
#mobileHUD .mh-dock button { position:relative; display:flex; flex:1; flex-direction:column; gap:3px; justify-content:center; align-items:center; min-width:0; min-height:44px; padding:0 5px; border:0; border-radius:0; background:none; font-size:12px; font-weight:600; }
#mobileHUD .mh-dock button+button { border-left:1px solid #42605b80; }
#mobileHUD .mh-dock button:first-child,#mobileHUD .mh-dock button[aria-expanded=true] { color:var(--game-deck-yellow); }
.mh-dock button[aria-expanded=true]::before { content:''; position:absolute; bottom:-5px; width:24px; height:3px; border-radius:3px; background:var(--game-deck-yellow); }
.mh-badge { position:absolute; top:0; left:calc(50% + 10px); min-width:17px; padding:0 4px; border-radius:6px; background:var(--game-deck-yellow); color:#10272c; font:600 11px/17px var(--game-mono); }
.mh-camera { position:fixed; z-index:14; right:max(12px,env(safe-area-inset-right,0px)); bottom:calc(var(--mh-bottom) + var(--mh-dock-height) + 10px); display:flex; gap:8px; }
#mobileHUD .mh-camera button { min-height:44px; padding:0 12px; border-radius:24px; display:flex; align-items:center; gap:8px; font-size:12px; }
#mobileHUD .mh-camera .mh-center { width:44px; padding:0; justify-content:center; }
.mh-panel { position:fixed; z-index:16; left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); bottom:calc(var(--mh-bottom) + var(--mh-dock-height) + 10px); max-height:min(62dvh,calc(100dvh - var(--mobile-header-bottom,110px) - 100px)); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; }
.mh-panel-head { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 8px 16px; gap:8px; border-bottom:1px solid var(--game-line); }
.mh-panel-head h2 { margin:0; font-size:17px; font-weight:600; }
#mobileHUD .mh-panel-head button { width:44px; height:44px; flex:none; padding:0; display:grid; place-items:center; border:1px solid var(--game-line); border-radius:50%; background:var(--game-panel-2); }
.mh-panel-body { padding:12px; overflow:auto; overscroll-behavior:contain; display:grid; gap:12px; min-height:0; }
.mobile-panel-open .mh-camera,.mobile-context-open .mh-camera,.mobile-native-panel .mh-camera { visibility:hidden; }
body.mobile-layout:has(#coach:not([hidden])) .mh-camera { visibility:hidden; }
body.mobile-layout .hud { display:none; }
body.mobile-layout #bar { bottom:calc(76px + env(safe-area-inset-bottom,0px)); padding:0 12px 10px; z-index:16; }
body.mobile-layout #bar,body.mobile-layout #bar>* { box-sizing:border-box; min-width:0; }
body.mobile-layout #bsheet:not(.open) { display:none; }
body.mobile-layout :is(.sheet,#orderPanel) { top:auto; left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); width:auto; bottom:calc(86px + env(safe-area-inset-bottom,0px)); max-height:min(60dvh,calc(100dvh - var(--mobile-header-bottom,110px) - 100px)); z-index:16; }
body.mobile-layout .shead { padding:8px; }
body.mobile-layout .shead .seg { overflow:auto; border-radius:12px; flex-wrap:nowrap; }
body.mobile-layout .shead .seg button { min-height:44px; flex:none; }
body.mobile-layout .shead .x { width:44px; height:44px; }
body.mobile-layout .grab { display:none; }
body.mobile-layout .icard { max-height:calc(100dvh - var(--mobile-header-bottom,110px) - 100px); overflow:auto; }
body.mobile-layout .icard:has([data-act=confirm]),body.mobile-layout .icard:has([aria-label="Stop placing"]) { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:10px 12px; }
body.mobile-layout .icard:has([aria-label="Stop placing"])>img,body.mobile-layout .icard:has([aria-label="Stop placing"])>span:first-child,body.mobile-layout .icard:has([aria-label="Stop placing"]) .tags { display:none; }
body.mobile-layout .icard h3 { font-size:15px; }
body.mobile-layout .icard .x { width:44px; height:44px; }
body.mobile-layout .icard .acts button { min-height:44px; padding:8px 10px; }
body.mobile-layout .icard .note { font-size:12px; }
body.mobile-layout .cards { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:30dvh; }
body.mobile-layout .cats { padding-top:4px; }
body.mobile-layout .cat { min-height:44px; }
body.mobile-panel-open #bar,body.mobile-native-panel #bar { display:none; }
body.mobile-layout.minigame :is(#bar,.sheet,#pcard) { display:none; }
#mobileHUD .goal { max-width:none; border-radius:12px; }
#mobileHUD .pills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#mobileHUD .pill { min-height:44px; padding:6px; }
#mobileHUD .pill .v { font-size:14px; }
#mobileHUD .pop { width:100%; box-shadow:none; }
#mobileHUD .quests { max-width:none; width:100%; }
#mobileHUD .quest { max-width:none; width:100%; min-height:52px; font-size:13px; }
#mobileHUD .quest .qt { white-space:normal; }
#mobileHUD .quest.bhide { display:grid!important; }
#mobileHUD #boardMore { display:none!important; }
#mobileHUD .order { min-height:48px; border-radius:12px; }
#mobileHUD .order .ot { white-space:normal; }
#mobileHUD .agenda { display:flex; position:static; transform:none; width:auto; max-width:none; white-space:normal; }
#mobileHUD #projectShortcut { position:static; transform:none; width:100%; min-width:0; max-width:none; padding:12px; text-align:left; border-radius:12px; }
#mobileHUD #projectShortcut small { display:block; }
body.mobile-layout #mobileHUD #projectShortcut:not([hidden]) { display:block; }
#mobileHUD #fabs { position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#mobileHUD #fabs .fab { position:relative; display:flex; flex-direction:column; gap:6px; width:100%; height:70px; padding:8px; border-radius:14px; box-shadow:none; }
#mobileHUD #fabs .fab small { position:static; transform:none; font-size:11px; }
#mobileHUD #fabs .audio-tools { display:contents; }
#mobileHUD #fabs #fabRadio { position:relative; right:auto; }
#mobileHUD #fabs :is(#fabView,#fabLevel) { display:none; }
#mobileHUD .mh-game-menu { min-height:44px; border:1px solid var(--game-line); border-radius:14px; background:var(--game-panel-2); }
body.mobile-layout #coach { bottom:calc(var(--bar-h) + 90px + env(safe-area-inset-bottom,0px)); }
body.mobile-layout.learning #coach { box-sizing:border-box; top:calc(var(--mobile-header-bottom,110px) + 10px); bottom:auto; left:12px; width:calc(100% - 24px); max-height:calc(100dvh - var(--mobile-header-bottom,110px) - var(--bar-h) - 116px); }
body.mobile-panel-open #coach,body.mobile-native-panel #coach { visibility:hidden; }
body.mobile-layout #pcard { bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
body:is(.titling,.photo,.cine,.skiffing,.visiting,.tiding,.minigame) #mobileHUD,body:has(#gameMenu[open]) #mobileHUD { display:none!important; }
body.mobile-layout.playing .mast { display:none; }
body.mobile-layout.playing #game { position:fixed; inset:0; height:100dvh; }
body.mobile-layout #game>:is(#tabs,#captainHUD),body.mobile-layout #sea :is(.scene-note,.legend,.center,.quality) { display:none; }
#mobileHUD #captainHUD { position:static; pointer-events:auto; width:auto; }
#mobileHUD #captainHUD .captain-stats { display:flex; }
#mobileHUD #tabs { position:static; transform:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; max-width:none; padding:0; }
#mobileHUD #tabs button { min-height:54px; font-size:12px; }
#mobileHUD #tabs button::after,#mobileHUD #captainHUD .supply-name,#mobileHUD .scene-note :is(p,span) { font-size:11px; }
#mobileHUD .quality { position:static; }
body.mobile-layout #travel { top:calc(var(--mobile-header-bottom,110px) + 8px); }
body.mobile-layout #assetStatus { top:calc(var(--mobile-header-bottom,110px) + 8px); }
@media (max-width:359px) {
  .mh-header { padding-left:7px; padding-right:7px; }
  .mh-top { gap:3px; }
  .mh-brand { font-size:12px; padding:5px; }
  .mh-time { font-size:11px; }
  #mobileHUD .mh-status { gap:6px; font-size:11px; }
  .mh-health { padding-left:6px; }
}
@media (max-height:500px) and (max-width:950px) {
  .mh-header { right:auto; width:360px; top:calc(6px + env(safe-area-inset-top,0px)); }
  .mh-dock { right:auto; width:300px; }
  .mh-camera { bottom:var(--mh-bottom); }
  .mh-panel,body.mobile-layout :is(.sheet,#orderPanel) { left:auto; right:max(12px,env(safe-area-inset-right,0px)); top:8px; bottom:64px; width:min(360px,calc(100vw - 390px)); max-height:none; }
  body.mobile-layout #bar { left:auto; top:8px; bottom:64px; width:min(360px,calc(100vw - 390px)); }
  body.mobile-layout .icard { max-height:calc(100dvh - 80px); }
  body.mobile-layout .cards { max-height:45dvh; }
  body.mobile-layout.learning #coach { width:340px; max-height:calc(100dvh - var(--mobile-header-bottom,110px) - 100px); }
}