New REM client: REM-Client 49486db, 64-bit (inventory: the credits stay on one line with eight digits and more - the hold's bar gives way)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

DATA/EQUIPMENT/st_equip.ini

@@ -4913,3 +4913,39 @@ separation_explosion = sever_debris
 LODranges = 0, 1500
 lootable = true
 phantom_physics = true
+
+
+; Sublight-Modul
+[ShieldGenerator]
+;[JumpEngine]
+nickname = jump_drive
+ids_name = 265001
+ids_info = 265002
+DA_archetype = equipment\models\st\li_refractor_shield.3db
+material_library = equipment\models\li_equip.mat
+HP_child = HpConnect
+hit_pts = 8000
+mass = 0
+explosion_resistance = 0.300000
+debris_type = debris_normal
+parent_impulse = 20
+child_impulse = 80
+volume = 0.000000
+regeneration_rate = 0
+max_capacity = 0
+toughness = 0
+hp_type = hp_rem_module02
+offline_rebuild_time = 0
+offline_threshold = 0.000000
+constant_power_draw = 0
+rebuild_power_draw = 0
+shield_type = S_Graviton01
+shield_collapse_sound = shield_offline
+shield_rebuilt_sound = shield_rebuilt
+shield_hit_effects = 0, gf_li_shield01
+shield_hit_effects = 100, gf_li_shield02
+shield_hit_effects = 500, gf_li_shield03
+separation_explosion = sever_debris
+LODranges = 0, 1500
+lootable = true
+phantom_physics = true

DATA/EQUIPMENT/st_good.ini

@@ -1864,3 +1864,16 @@ ids_name = 263960
 ids_info = 263960
 shop_archetype = equipment\models\st\ku_thruster.3db
 material_library = equipment\models\ku_equip.mat
+
+; Sublight-Modul
+[Good]
+nickname = jump_drive
+equipment = jump_drive
+category = equipment
+price = 75000
+item_icon = equipment\models\commodities\nn_icons\EQUIPICON_thruster.3db
+combinable = false
+ids_name = 265001
+ids_info = 265002
+shop_archetype = equipment\models\st\ku_thruster.3db
+material_library = equipment\models\ku_equip.mat

DATA/FX/MISC/misc_ale.ini

@@ -549,16 +549,17 @@ effect_crc = 116864929
 
 [VisEffect]
 nickname = gf_tradeinnerring
-alchemy = fx\misc\gf_tradeinnerring.ale
+alchemy = fx\misc\gf_tradeinnerring.tale
 effect_crc = -141786875
 textures = fx\sarma.txm
 textures = fx\beam.txm
+textures = fx\newglows.txm
 
 [VisEffect]
 nickname = gf_tradelaneendsplash
-alchemy = fx\misc\gf_tradelaneendsplash.ale
+alchemy = fx\misc\gf_tradelaneendsplash.tale
 effect_crc = 272986435
-textures = fx\planetflare.txm
+textures = fx\newglows.txm
 
 [VisEffect]
 nickname = gf_tradelaneflash
@@ -568,11 +569,13 @@ textures = fx\sarma.txm
 
 [VisEffect]
 nickname = tradelaneinship01
-alchemy = fx\misc\gf_tradelaneinship01.ale
+alchemy = fx\misc\gf_tradelaneinship01.tale
 effect_crc = -422626017
 textures = fx\sarma.txm
-textures = fx\planetflare.txm
+textures = fx\flwt.txm
-textures = fx\kioncannon.txm
+textures = fx\efx.txm
+textures = FX\smoke.txm
+textures = fx\newglows.txm
 
 [VisEffect]
 nickname = tradelaneship01donut
@@ -605,10 +608,13 @@ textures = fx\planetflare.txm
 
 [VisEffect]
 nickname = tradelaneshipdebris01
-alchemy = fx\misc\gf_tradelaneship01.ale
+alchemy = fx\misc\gf_tradelaneship01.tale
 effect_crc = 383368615
-textures = fx\beam.txm
+textures = fx\sarma.txm
-textures = fx\planetflare.txm
+textures = fx\flwt.txm
+textures = fx\efx.txm
+textures = FX\smoke.txm
+textures = fx\newglows.txm
 
 [VisEffect]
 nickname = tradelaneshipdebris03

DATA/INTERFACE/keylist.ini

@@ -331,6 +331,9 @@ id = USER_REM_WAYPOINT_BOT
 [key]
 id = USER_REM_SECTOR_SCANNER
 
+[key]
+id = USER_REM_HUDLESS
+
 [key]
 id = USER_REM_WAYPOINTS
 

DATA/INTERFACE/keymap.ini

@@ -1073,6 +1073,12 @@ ids_name = 524526
 ids_info = 524527
 state = keydown
 
+[KeyCmd]
+nickname = USER_REM_HUDLESS
+ids_name = 524528
+ids_info = 524529
+state = keydown
+
 [KeyMap]
 nickname = IDR_ALWAYS_PRESENT
 key = USER_REM_WAYPOINTS
@@ -1080,6 +1086,7 @@ key = USER_REM_BASE
 key = USER_REM_MISSIONS
 key = USER_REM_CONTRACTS
 key = USER_REM_PLAYER
+key = USER_REM_HUDLESS
 key = USER_YES
 key = USER_NO
 key = USER_CANCEL

DATA/MISSIONS/REM_ARCs/m014_s001x_li01_01_nrml.ini

@@ -0,0 +1,10 @@
+[CharacterEncounter]
+Location = Li01_01_base, Cityscape
+start_room = Cityscape
+action = scripts\rem_arcs\manhattan_story_arc01_start.thn
+autoplay
+
+[Char]
+npc = Trent
+actor = trent
+fidget = scripts\extras\fidget_stand_male_NULL.thn

DATA/SHIPS/loadouts.ini

@@ -10807,3 +10807,29 @@ cargo = commodity_ship_hull_panels, 25
 nickname = SECRET_transport_large_anomalie01
 archetype = suprise_transport_large
 cargo = commodity_shield_schematic, 1
+
+
+; Drone
+
+[Loadout]
+nickname = ge_drone_loadout01
+archetype = ge_drone
+equip = ge_gf6_engine_01, HpDrive01
+equip = shield01_mark07_hf, HpShield01
+equip = ge_fighter6_power01, HpPower01
+equip = ge_s_scanner_01
+equip = ge_s_tractor_01
+equip = ge_s_thruster_01, HpThruster01
+equip = rem_gun05_mark05, HpWeapon01
+equip = rem_gun05_mark05, HpWeapon02
+equip = rem_gun05_mark05, HpWeapon03
+equip = rem_gun05_mark05, HpWeapon04
+equip = ge_s_cm_01, HpCM01
+cargo = ge_s_cm_01_ammo, 50
+equip = LargeWhiteSpecial, HpHeadlight
+equip = SlowSmallBlue, HpRunningLight01
+equip = SlowSmallBlue, HpRunningLight02
+equip = SlowSmallBlue, HpRunningLight03
+equip = SlowSmallBlue, HpRunningLight04
+equip = DockingLightRedSmall, HpDockLight01
+equip = DockingLightRedSmall, HpDockLight02

DATA/SHIPS/shiparch.ini

@@ -5020,6 +5020,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
+hp_type = hp_rem_module02, HpJump
 
 [CollisionGroup]
 obj = wing_port_lod1
@@ -5657,6 +5658,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
+hp_type = hp_rem_module02, HpJump
 hp_type = hp_elite_shield_special_2, HpCloak01
 
 [CollisionGroup]
@@ -6395,6 +6397,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
+hp_type = hp_rem_module02, HpJump
 
 [CollisionGroup]
 obj = bw_port_wing01_lod1
@@ -10239,6 +10242,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
+hp_type = hp_rem_module02, HpJump
 
 [CollisionGroup]
 obj = cv02_port_wing_lod1

EXE/REM/Lua/Infocards.lua

@@ -41,6 +41,8 @@ rem.AddInfoCard(524524, "MODULE SLOT 9")
 rem.AddInfoCard(524525, "MODULE SLOT 10")
 rem.AddInfoCard(524526, "SECTOR SCANNER")
 rem.AddInfoCard(524527, "Shows / hides the 3D sector scanner (contacts within 7.5 km).")
+rem.AddInfoCard(524528, "HUDLESS")
+rem.AddInfoCard(524529, "Hides the HUD, then also the mouse cursor, then shows both again (screenshots).")
 
 -- RACE INFOCARDS
 rem.AddInfoCard(9001, "1")
@@ -90,7 +92,7 @@ rem.AddInfoCard(458752, "Find Ashcroft in the Pittsburgh Debris Field")
 rem.AddInfoCard(458753, "Destroy Ashcroft's Ship")
 rem.AddInfoCard(458754, "Tractor in Ashcroft's Lifepod")
 rem.AddInfoCard(458755, "Land on Planet Pittsburgh")
-rem.AddInfoCard(458756, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Mission 02: Zero Point</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Status: Mission accomplished</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT></TEXT><PARA/><JUST loc="left"/><TEXT>Excellent! Through his smuggling connections, Ashcroft had obtained an ancient artifact: the Athena Orb.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>This could be the beginning to a journey finding more Daam-K'vosh artifacts by its ability to locate other artifacts, potentially makes it a tracking device for the entire collection. Meanwhile there's another mission on Planet Manhattan.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Launch your ship to continue the next mission. Diplomat Harrison will contact you in space.</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])
+rem.AddInfoCard(458756, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Mission 01: Zero Point</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Status: Mission accomplished</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT></TEXT><PARA/><JUST loc="left"/><TEXT>Excellent! Through his smuggling connections, Ashcroft had obtained an ancient artifact: the Athena Orb.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>This could be the beginning to a journey finding more Daam-K'vosh artifacts by its ability to locate other artifacts, potentially makes it a tracking device for the entire collection. Meanwhile there's another mission on Planet Manhattan.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Launch your ship to continue the next mission. Diplomat Harrison will contact you in space.</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])
 rem.AddInfoCard(458757, "Launch your Ship")
 rem.AddInfoCard(458758, "Fly to Planet Manhattan")
 

EXE/REM/ServerModule/missions/story_arc1_m01.ini

@@ -0,0 +1,223 @@
+[Mission]
+nickname = li_story_arc_chapter_1
+story_name = li_arc_chapter_1_m01                 ; progress key, lowercase
+offer_type = CapturePrisoner
+offer_target_system = Li01
+offer_faction = li_n_grp
+offer_title_id = 458760
+offer_description_id = 458751
+offer_bases = Li01_01_Base
+; reoffer defaults to OnFail for story missions
+
+; >>> NPC SECTION <<<
+
+[NpcShipArch]
+nickname = MSN14_Ashcroft
+archetype = pi_elite               ; shiparch nickname from your mod data
+loadout = MSN02_Ashcroft     	   ; loadout nickname from your mod data
+state_graph = fighter
+pilot = MSN02_Ashcroft             ; pilot nickname from pilots.ini
+level = 5
+
+[MsnNpc]
+nickname = Ashcroft
+npc_ship = MSN14_Ashcroft
+string_id = 216206
+faction = fc_lr_grp
+system = Li01
+position = 32234, 0, -82297
+label = lr_pirates
+
+[NpcShipArch]
+nickname = MSN14_Ashcroft_Escort
+archetype = pi_fighter              ; shiparch nickname from your mod data
+loadout = MSN02_Ashcroft_Escort     ; loadout nickname from your mod data
+state_graph = fighter
+pilot = MSN02_Ashcroft_Escort        ; pilot nickname from pilots.ini
+level = 5
+
+[MsnNpc]
+nickname = Ashcroft_Escort_1
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 216206
+faction = fc_lr_grp
+system = Li01
+position = 32254, 0, -82297
+label = lr_pirates
+
+[MsnNpc]
+nickname = Ashcroft_Escort_2
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 216206
+faction = fc_lr_grp
+system = Li01
+position = 32234, 0, -82297
+label = lr_pirates
+
+[MsnNpc]
+nickname = Ashcroft_Escort_3
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 216206
+faction = fc_lr_grp
+system = Li01
+position = 32224, 0, -82297
+label = lr_pirates
+
+[MsnNpc]
+nickname = Ashcroft_Escort_4
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 216206
+faction = fc_lr_grp
+system = Li01
+position = 32264, 0, -82297
+label = lr_pirates
+
+
+
+
+; >>> LOOT SECTION <<<
+
+[MsnLoot]
+nickname = ashcroft_pod
+archetype = escape_lifeboat
+string_id = 216206
+rel_pos_obj = Ashcroft
+rel_pos_offset = 50, 0, 0
+velocity = 0, 0, 0
+equip_amount = 1
+health = 1
+Can_Jettison = false
+
+; >>> TRIGGER SECTION <<<
+
+[Trigger]
+nickname = arc01_m01_c01_scene
+InitState = Active
+Act_SetTHNConfig = players, manhattan_gen, li_arc01_m01_c01
+Act_PlayTHN = players, 48, 458760, 458751
+
+[Trigger]
+nickname = arc01_m01_scene
+InitState = Active
+Cnd_THNComplete = players
+Act_DisplayMsg = players, 458700
+
+[Trigger]
+nickname = t_ashcroft_spawn_destination
+InitState = Active
+Cnd_LaunchComplete = players, Li01_01_Base
+Act_NNPath = players, 458752, Li01, 32234, 0, -82297, true
+Act_Mark = players, lr_pirates, true
+Act_ActTrig = t_ashcroft_ship_spawn
+
+[Trigger]
+nickname = t_ashcroft_ship_spawn
+Cnd_DistVec = Player, 32234, 0, -82297, 7500, Li01, inside
+Act_SpawnShip = Ashcroft, no_ol
+Act_SpawnShip = Ashcroft_Escort_1, no_ol
+Act_SpawnShip = Ashcroft_Escort_2, no_ol
+Act_SpawnShip = Ashcroft_Escort_3, no_ol
+Act_SpawnShip = Ashcroft_Escort_4, no_ol
+Act_Mark = players, lr_pirates, true
+Act_ActTrig = t_ashcroft_ship_hostile
+
+[Trigger]
+nickname = t_ashcroft_ship_hostile
+Cnd_DistVec = Player, 32234, 0, -82297, 6000, Li01, inside
+Act_SetVibe = Ashcroft, Player, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_1, Player, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_2, Player, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_3, Player, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_4, Player, REP_HOSTILE_MAX
+Act_ActTrig = t_ashcroft_ship_comm
+
+[Trigger]
+nickname = t_ashcroft_ship_comm
+Cnd_DistVec = Player, 32234, 0, -82297, 2500, Li01, inside
+Act_EtherComm = ashcroft_m2_0880, players, ashcroft_voice_m02, DX_M02_0880_ASHCROFT, 0.5, false, 600019, pi_pirate4_head, pi_pirate8_body
+
+[Trigger]
+nickname = t_ashcroft_ship_destroyed
+InitState = Active
+Cnd_Destroyed = lr_pirates, 1, EXPLODE      ; explicit count = wait for ALL
+Act_DisplayMsg = players, 458754
+Act_SpawnLoot = ashcroft_pod
+Act_ActTrig = t_ashcroft_cargopod_loot
+
+[Trigger]
+nickname = t_ashcroft_health_50
+InitState = Active
+;system = Li01
+Cnd_HealthDec = Ashcroft, 0.5
+Act_EtherComm = ashcroft_m2_0900, players, ashcroft_voice_m02, DX_M02_0900_ASHCROFT, 0.5, false, 600019, pi_pirate4_head, pi_pirate8_body
+Act_ActTrig = t_ashcroft_health_25
+
+[Trigger]
+nickname = t_ashcroft_health_25
+Cnd_HealthDec = Ashcroft, 0.25
+
+[Trigger]
+nickname = t_ashcroft_cargopod_loot
+Cnd_LootAcquired = ashcroft_pod, Player
+Act_NNPath = players, 458755, Li01, 50655, 0, -77595, true, Li01_02_dock_ring
+Act_SetTHNConfig = players, pittsburgh_gen, li_arc01_m01_c02
+Act_ActTrig = t_ashcroft_cargopod_landed
+Act_ActTrig = t_pittsburgh_marked
+
+[Trigger]
+nickname = t_pittsburgh_marked
+Cnd_Timer = 1
+Act_Mark = players, Li01_02, true
+
+[Trigger]
+nickname = t_ashcroft_cargopod_landed
+Cnd_BaseEnter = players, Li01_02_Base
+;Act_PlayTHN = players, 30, 458760, 458756
+Act_ActTrig = t_ashcroft_pittsburgh_launched
+Act_ActTrig = t_mission_ending
+
+[Trigger]
+nickname = t_mission_ending
+Cnd_Timer = 33
+Act_PopUpDialog = players, 458760, 458756
+Act_ActTrig = t_ashcroft_pittsburgh_close
+
+[Trigger]
+nickname = t_ashcroft_pittsburgh_close
+Cnd_PopUpDialog = CLOSE
+Act_RemoveCargo = players, ashcroft_pod, 1
+Act_DisplayMsg = players, 458700
+
+[Trigger]
+nickname = t_ashcroft_pittsburgh_launched
+Cnd_LaunchComplete = players, Li01_02_Base
+;Act_DisplayMsg = players, 458757
+Act_ActTrig = t_ashcroft_mission_outro
+
+[Trigger]
+nickname = t_ashcroft_mission_outro
+Cnd_Timer = 1
+Act_EtherComm = harrison_intro, players, harrison_voice_m14, dx_m14_0000_HARRISON, 0.5, false, 227159, rh_captain_head, li_rockford_body
+Act_NNPath = players, 458757, Li01, -33267, 0, -28810, true, Dock_Ring_Li01_01
+Act_ActTrig = t_ashcroft_mission_completed
+
+[Trigger]
+nickname = t_ashcroft_mission_completed
+Cnd_DistVec = Player, -33267, 0, -28810, 3500, Li01, inside
+Act_DisplayMsg = players, 458758
+Act_ActTrig = t_ashcroft_mission_completed2
+
+[Trigger]
+nickname = t_ashcroft_mission_completed2
+Cnd_BaseEnter = players, Li01_01_Base
+Act_PopUpDialog = players, 458760, 458759
+Act_ActTrig = t_ashcroft_mission_completed3
+
+[Trigger]
+nickname = t_ashcroft_mission_completed3
+Cnd_PopUpDialog = CLOSE
+Act_SetMsnResult = Success
+Act_AdjAcct = players, 250000          ; the actual payout
+Act_DisplayMsg = players, 479000	   ; Mission Success NEURAL-NET MESSAGE
+Act_LeaveMsn = players, Success        ; records li_arc_chapter_1_m01 for all participants
+Act_TerminateMsn = Ashcroft

EXE/THIRD_PARTY_NOTICES.md

@@ -59,3 +59,39 @@ LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+## The modern interface (docs/rem/ui-modern.md)
+
+The modern windows are drawn with these libraries and fonts, shipped unchanged:
+
+- RmlUi 6.3, https://github.com/mikke89/RmlUi -- src/RmlUi/vendor, license below.
+- FreeType 2.14.3, https://freetype.org -- src/freetype/vendor. Portions of this software are
+  copyright (c) 2026 The FreeType Project (www.freetype.org). All rights reserved. Used under the
+  FreeType License (src/freetype/vendor/FTL.TXT).
+- Saira Semi Condensed, Barlow and IBM Plex Mono (Google Fonts) -- assets/remui/fonts, each under
+  the SIL Open Font License 1.1 (the OFL-*.txt files beside the fonts).
+
+RmlUi:
+
+MIT License
+
+Copyright (c) 2008-2014 CodePoint Ltd, Shift Technology Ltd, and contributors
+Copyright (c) 2019-2026 The RmlUi Team, and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

EXE/rem.ini

@@ -16,17 +16,23 @@
 [REM]
 
 ; ---- Display ----
-better_resolutions = false         ; default mode = main monitor size
+better_resolutions = true          ; default mode = main monitor size
 png_screenshots = false            ; screenshots as PNG (WIC) instead of BMP
 run_in_background = true           ; keep running and drawing without focus (Alt+Tab)
 alt_enter_toggle = true            ; Alt+Enter: borderless fullscreen <-> window filling the desktop
+dpi_aware = true                   ; per monitor DPI aware: Windows display scaling (125 %) does not shrink the modes
+
+; ---- Physics ----
+draw_time_extrapolation = true     ; multiplayer: moving objects drawn as of the frame's time (false: as of the last physics step, retail)
 
 ; ---- Cursor and mouse ----
-cursor_color_custom = false        ; draw every cursor in the colour below
+cursor_color = 0                   ; cursor colour: 0 game default, 1 red, 2 green, 3 blue, 4 yellow, 5 pink
+cursor_color_custom = false        ; older switch (no preset chosen): every cursor in the colour below
 cursor_color_r = 255
 cursor_color_g = 255
 cursor_color_b = 255
 more_cursor_colors = false         ; target cursor in group / trade-request colour
+lead_marker_color = 0              ; crosshair (lead cross) colour: 0 game default, 1 red, 2 green, 3 blue, 4 yellow, 5 pink
 lead_marker_color_custom = false   ; the lead cross (aim point) in the colour below (ClientHook "crosshair colour")
 lead_marker_color_r = 191
 lead_marker_color_g = 29
@@ -43,7 +49,28 @@ particle_linger_seconds = 20       ; particles of a stopped emitter fade over th
 ; ---- Interface ----
 hide_npc_players = false            ; leave the server's player bots ("[NPC] " names) out of the player lists (chat window, chat target)
 numeric_damage = true              ; target hull (with armour) and shield as numbers beside the bars (adoxa Numeric Damage)
+delay_display = true               ; refire time left beside the ammo count of slow launchers, "20--1.5" (M0tah DelayDisplay)
+zone_messages = true               ; "Entered <zone>." / "Left <zone>." in the arrival text, coloured for dangerous zones (adoxa Zone)
+join_server_button = true          ; JOIN SERVER in the main menu: straight to the first rem_servers entry
+chat_widescreen_shift = true       ; the chat window at the left screen edge on wide screens (adoxa HudShift, chat groups)
 rem_bar = true                     ; REM bar top left (NeuroNet bar twin with the REM windows) *
+modern_ui = true                   ; the modern windows (new design, docs/rem/ui-modern.md) where there are some; off: all classic
+modern_ui_scale = 1.0              ; size of the modern windows (1 = 1 dp per pixel at 1080 lines)
+hud_scale = 1.0                    ; size of the modern flight HUD (the parts keep their own size from the HUD editor)
+hud_opacity = 1.0                  ; opacity of the modern flight HUD
+ui_theme = 0                       ; colours of the modern windows: 0 REM, 1 neon blue, 2 red, 3 green, 4 purple, 5 high contrast
+colorblind_mode = 0                ; friend / foe colours: 0 FL red / green, 1 orange / blue (red-green), 2 red / cyan (blue-yellow)
+; chat colours per channel (the chat settings, gear in the chat line): rrggbb, empty = FL's own
+chat_color_universe =
+chat_color_system =
+chat_color_local =
+chat_color_group =
+chat_color_private =
+chat_color_server =
+chat_color_console =
+chat_timestamps = true             ; times in the modern chat history
+chat_ignore =                      ; ignored players (the chat menu on a name), names joined by |
+modern_ui_debugger = false         ; F8 shows the RmlUi debugger over the modern windows *
 rem_protocol_log = true            ; every REM server message in LOGS\rem_protocol.log *
 rem_servers = srv.rem-freelancer.moe:2302 ; servers always in the multiplayer list (host:port, comma separated) *
 copy_paste_feature = false         ; Ctrl+C / Ctrl+V in text boxes

EXE/remgfx.ini

@@ -14,6 +14,9 @@ VSync = -1
 ; full-screen (non-windowed) modes: 1 = borderless window over the monitor, the back buffer is
 ; scaled to it (no exclusive mode switch); 0 = leave the window alone
 Fullscreen = 1
+; ... and the back buffer takes the monitor's size: a mode smaller than the monitor is not scaled
+; up with black bars (16:9 on an ultrawide), the picture is simply wider; 0 = scale the mode up
+FullscreenNative = 1
 ; anti-aliasing: 0/1 off, 2, 4 or 8 = MSAA samples (the back buffer is resolved before present)
 Msaa = 0
 ; texture filtering: 0 = as the game sets it, 2..16 = force anisotropic filtering
@@ -82,8 +85,14 @@ Overlay = 1
 ; R4 sun shadows in space and space cutscenes (cascaded shadow maps): ShadowMapSize is the atlas
 ; of the four cascades (2048 / 4096 / 8192), ShadowDistance how far from the camera (metres).
 Shadows = 1
+; R32 soft shadow-map shadows (PCSS): the sun's angular size in degrees -- sharp where a shadow touches
+; its caster, softer farther away (0 = the fixed 3x3 filter). The ray-traced shadows (RtShadows) are
+; not affected.
+ShadowSoftness = 1.5
 ShadowMapSize = 4096
 ShadowDistance = 3000
+; PlanetShadows = 1: planets also receive the shadows of ships, docking rings and stations
+PlanetShadows = 0
 ; objects up to this many metres outside the picture are still drawn, so their shadows do not
 ; pop in and out when the camera turns (0 = the original culling)
 ShadowCullMargin = 400
@@ -93,24 +102,49 @@ ShadowCullMargin = 400
 DynamicLights = 1
 ; R17 weapon lights: laser beams light their surroundings along their length, muzzle flashes,
 ; projectiles, impacts and explosions as points in the colour of their particles (needs
-; DynamicLights = 1). WeaponGlow draws weapon effects brighter for the bloom (1 = original).
+; DynamicLights = 1). WeaponGlow draws weapon effects brighter for the bloom (1 = original, below 1
+; dimmer); BeamGlow the lasers' glowing volumes (R24, 0 = off).
 WeaponLights = 1
 WeaponLightIntensity = 1.0
 WeaponLightRange = 1.0
-WeaponGlow = 1.6
+WeaponGlow = 1.0
+BeamGlow = 0.4
+; R2 debug view (diagnosis from screenshots): 0 off, 1 normals, 2 depth (1 m black .. 130 km
+; white), 3 motion vectors (grey = still, magenta = unknown), 4 material class (glass, nomad,
+; planet water, engine glow ... one colour each), 5 game object (one colour per object), 6 phase
+DebugView = 0
+; motion diagnostics in remgfx.log after each statistics line (planet surfaces, own ship, camera): 1 on
+MotionLog = 0
+; slow frames: a line in remgfx.log for each frame far slower than the running average (new pipelines,
+; ray-tracing meshes, textures / buffers created, presenting and Reflex / Anti-Lag wait); 10 per 600 frames at most
+HitchLog = 1
+; where RemGfx spends its CPU time per frame (draws, constants, motion, pipelines, ray tracing, post, present): 1 on
+CpuLog = 0
+; ray tracing: new meshes (their acceleration structures) built per frame at most, and their triangles;
+; the rest waits for the next frames (a group of ships coming into view built everything in one frame)
+RtBuildPerFrame = 16
+RtBuildTriangles = 400000
 ; R16 distortion: heat haze behind engines and around explosions, refraction at shield hits and
 ; cloaks, a swirl in the jump tunnel; Distortion switches all of it, the others scale each kind
 ; (0 = off). Needs Taa = 1 (it shares the scene's extra targets with the motion vectors).
 Distortion = 1
 HeatHaze = 1.0
 ShieldRefraction = 1.0
-CloakRefraction = 1.0
 TunnelDistortion = 1.0
-; R15 planet atmospheres: light scattering (blue rim on the day side, red at the terminator, glow
+; R15 planet atmospheres: light scattering like Earth's (blue rim on the day side, red at the
-; against the sun); AtmosphereReplace = 1 hides the planets' original atmosphere layer
+; terminator, glow against the sun); AtmosphereReplace = 1 hides the planets' original atmosphere
+; layer. AtmosphereColor turns that blue to the planet's hue: 1 = the mean colour of its surface
+; texture (a desert planet gets an orange rim), 2 = its atmosphere layer's colour (the material's
+; Dc), 0 = Earth's blue for every planet. Grey and white planets keep the blue. The layer's Alpha
+; sets the strength (a thin layer a weak atmosphere, a black or invisible layer none).
+; AtmosphereSaturation = how colourful the turned colour is (1 = as Earth's blue).
+; AtmosphereDensity = thickness of the shell (higher = a thicker veil, 1 = the first R15 version)
 Atmosphere = 1
 AtmosphereStrength = 1.0
 AtmosphereReplace = 1
+AtmosphereColor = 1
+AtmosphereSaturation = 1.0
+AtmosphereDensity = 0.5
 ; R14 soft particles: explosions, smoke and glows fade out where they meet ships and stations
 ; (over SoftParticleRange metres in front of them) instead of cutting hard edges
 SoftParticles = 1

EXE/remui/account.rml

@@ -0,0 +1,28 @@
+<rml>
+<head>
+    <title>Account</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .explain { white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; margin-bottom: 14dp; background-color: #5cc8f008; }
+        .label { margin-bottom: 6dp; }
+    </style>
+</head>
+<body class="window small" data-model="account">
+    <div class="win-head">
+        <span class="title">MULTIPLAYER ACCOUNT</span><span class="sl">\\\</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="explain">{{ explain }}</div>
+            <div class="label">Account key</div>
+            <input class="text" type="text" data-value="key" maxlength="40"/>
+            <div class="actions" style="margin-top: 14dp;">
+                <div class="btn primary" data-class-disabled="key == ''" data-action="go">Continue<div class="tip">Checks the key and goes on to the server list.</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back</div>
+    </div>
+</body>
+</rml>

EXE/remui/admin.rml

@@ -0,0 +1,77 @@
+<rml>
+<head>
+    <title>Admin</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .side { flex: 0 0 38%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+        .row { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-family: "IBM Plex Mono"; font-size: 14dp; }
+        .row:hover { background-color: #122033; }
+        .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+        .help { padding: 12dp 14dp; line-height: 1.5; margin-bottom: 14dp; background-color: #5cc8f008; }
+        .cmd { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; margin-bottom: 8dp; }
+        .runline { display: flex; flex-direction: row; align-items: center; }
+        .runline input { flex: 1; margin-right: 10dp; }
+        .search { margin-bottom: 8dp; }
+        .recent { margin-top: 14dp; }
+        .recent .row { font-size: 13dp; color: #8197ad; }
+        .slots { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; }
+        .slot { padding: 5dp 10dp; margin: 0 6dp 6dp 0; border-bottom: 2dp #ffffff14; font-family: "IBM Plex Mono"; font-size: 14dp; }
+        .slot:hover { background-color: #122033; }
+        .slot.active { background-color: #f2b13c24; border-bottom-color: #f2b13c; }
+        .slot .k { color: #8197ad; margin-right: 6dp; }
+        .slot .v { color: #dbe6f0; }
+        .options { flex: 1 1 0; min-height: 0; overflow-y: auto; margin-top: 8dp; }
+        .options .row { font-size: 13dp; }
+        .options .row .n { color: #8197ad; margin-left: 8dp; }
+    </style>
+</head>
+<body class="window medium" data-model="admin">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/>
+        <span class="title">ADMIN</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">{{ commands.size }} commands</span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="side">
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="commands.size == 0">{{ received ? 'No command matches.' : 'Asking the server...' }}</div>
+                        <div class="row" data-for="c : commands" data-class-selected="c.selected" data-action="pick" data-attr-data-arg="c.name">{{ c.name }}</div>
+                    </div>
+                </div>
+                <div class="detail">
+                    <div class="help">
+                        <div class="cmd">{{ has_pick ? pick_name : 'Pick a command' }}</div>
+                        <div>{{ has_pick ? pick_help : 'Every admin command of the server, run from here - its answer comes in the chat.' }}</div>
+                    </div>
+                    <div class="label">Arguments</div>
+                    <div class="slots" data-if="slots.size &gt; 0">
+                        <div class="slot" data-for="s, i : slots" data-class-active="s.active" data-action="slot" data-attr-data-arg="i"><span class="k">{{ s.label }}</span><span class="v">{{ s.value }}</span></div>
+                    </div>
+                    <div class="runline">
+                        <input class="text" type="text" data-value="args" maxlength="200"/>
+                        <div class="btn primary" data-class-disabled="!has_pick" data-action="run">Run<div class="tip">Runs the command on the server as you typed it; the answer comes as a system message in the chat.</div></div>
+                    </div>
+                    <div class="options" data-if="options.size &gt; 0">
+                        <div class="row" data-for="o : options" data-action="option" data-attr-data-arg="o.value">{{ o.label }}<span class="n" data-if="o.label != o.value">{{ o.value }}</span></div>
+                    </div>
+                    <div class="recent" data-if="recent.size &gt; 0">
+                        <div class="label">Run here</div>
+                        <div class="row" data-for="r : recent" data-action="again" data-attr-data-arg="r">{{ r }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/charcreate.rml

@@ -0,0 +1,88 @@
+<rml>
+<head>
+    <title>New pilot</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list { flex: 1; }
+        .colm.side { flex: 0 0 32%; margin-left: 18dp; }
+        .colm.fig { flex: 0 0 24%; margin-left: 18dp; }
+        #figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        .fig .hint { text-align: center; margin-top: 6dp; }
+        .starts { flex: 1; overflow-y: auto; }
+        .region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; }
+        .start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .start:hover { border-left-color: #5cc8f0; }
+        .start.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
+        .start img { width: 38dp; height: 38dp; margin-right: 12dp; }
+        .start .txt { flex: 1; min-width: 0; }
+        .start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
+        .start.selected .n { color: #f2b13c; }
+        .start .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .start .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
+        .namebox { margin-bottom: 14dp; }
+        .namebox .label { margin-bottom: 6dp; }
+        .detail { padding: 12dp; flex: 1; display: flex; flex-direction: column; min-height: 0; background-color: #5cc8f008; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
+        .detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
+        .detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
+        .detail .facts div { margin-right: 24dp; }
+        .detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 16dp; }
+        .detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; }
+    </style>
+</head>
+<body class="window" data-model="charcreate">
+    <div class="win-head">
+        <span class="title">NEW PILOT</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Starts <span class="v">{{ count }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm list">
+                    <h3 style="margin-bottom: 4dp;">Where do you start?</h3>
+                    <div class="hint" data-if="count == 0">The server offers no start.</div>
+                    <div class="starts">
+                        <div data-for="r : regions">
+                            <div class="region">{{ r.name }}</div>
+                            <div class="start" data-for="s : r.starts" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
+                                <img data-if="s.icon != ''" data-attr-src="s.icon"/>
+                                <div class="txt"><div class="n">{{ s.base }}</div><div class="k">{{ s.ship }}</div></div>
+                                <span class="m">{{ s.money }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm fig">
+                    <h3 style="margin-bottom: 8dp;">Your pilot</h3>
+                    <div id="figure"></div>
+                    <div class="hint">drag to turn</div>
+                </div>
+                <div class="colm side">
+                    <div class="namebox">
+                        <div class="label">Pilot name</div>
+                        <input class="text" type="text" data-value="name" maxlength="23" placeholder="Your name in Sirius"/>
+                    </div>
+                    <div class="detail" data-if="has_pick">
+                        <div class="n">{{ pick.base }}</div>
+                        <div class="k">{{ pick_region }}</div>
+                        <div class="facts">
+                            <div><div class="label">Ship</div><div class="v">{{ pick.ship }}</div></div>
+                            <div><div class="label">Credits</div><div class="v">{{ pick.money }}</div></div>
+                        </div>
+                        <div class="d">{{ pick_desc }}</div>
+                    </div>
+                    <div class="actions" style="margin-top: 12dp;">
+                        <div class="btn primary" data-class-disabled="name == '' || !has_pick || !ready" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start; the server may refuse a name that is taken.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back</div>
+    </div>
+</body>
+</rml>

EXE/remui/charselect.rml

@@ -0,0 +1,84 @@
+<rml>
+<head>
+    <title>Characters</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list { flex: 1; }
+        .colm.side { flex: 0 0 32%; margin-left: 18dp; }
+        .colm.fig { flex: 0 0 22%; margin-left: 18dp; }
+        #figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        .fig .hint { text-align: center; margin-top: 6dp; }
+        .roster { flex: 1; overflow-y: auto; }
+        .pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .pilot:hover { border-left-color: #5cc8f0; }
+        .pilot.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
+        .pilot img { width: 44dp; height: 44dp; margin-right: 14dp; }
+        .pilot .txt { flex: 1; min-width: 0; }
+        .pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
+        .pilot.selected .n { color: #f2b13c; }
+        .pilot .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .pilot .r { text-align: right; }
+        .pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
+        .pilot .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; }
+        .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
+        .detail .k { font-size: 14dp; color: #8197ad; }
+        .detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
+        .motd { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
+        .empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+    </style>
+</head>
+<body class="window" data-model="charselect">
+    <div class="win-head">
+        <span class="title">{{ server }}</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm list">
+                    <h3 style="margin-bottom: 8dp;">Your pilots</h3>
+                    <div class="empty-roster" data-if="chars.size == 0">
+                        <div class="hint">No pilot on this server yet. Create one to begin.</div>
+                    </div>
+                    <div class="roster" data-if="chars.size &gt; 0">
+                        <div class="pilot" data-for="c : chars" data-class-selected="c.selected" data-action="pick" data-attr-data-arg="c.key">
+                            <img data-if="c.icon != ''" data-attr-src="c.icon"/>
+                            <div class="txt"><div class="n">{{ c.name }}</div><div class="k">{{ c.ship }} - {{ c.place }}</div></div>
+                            <div class="r"><div class="m">{{ c.money }}</div><div class="lv">{{ c.level }}</div></div>
+                        </div>
+                    </div>
+                    <div class="actions" style="margin-top: 10dp;">
+                        <div class="btn primary" data-class-disabled="!has_pick || !ready" data-action="load">Launch<div class="tip">Plays the picked pilot. A double click on a pilot does the same.</div></div>
+                        <div class="btn" data-class-disabled="!can_new || !ready" data-action="new">New pilot<div class="tip">Creates a new pilot (at most five per account).</div></div>
+                        <div class="btn" data-class-disabled="!has_pick || !ready" data-action="delete">Delete<div class="tip">Deletes the picked pilot for good (you are asked first).</div></div>
+                    </div>
+                </div>
+                <div class="colm fig">
+                    <h3 style="margin-bottom: 8dp;">Pilot</h3>
+                    <div id="figure"></div>
+                    <div class="hint">drag to turn</div>
+                </div>
+                <div class="colm side">
+                    <div class="detail" data-if="has_pick">
+                        <div class="n">{{ pick.name }}</div>
+                        <div class="k">{{ pick.level }} - {{ pick.money }}</div>
+                        <div class="k">{{ pick.ship }}, {{ pick.place }}</div>
+                        <div class="s">{{ pick_stats }}</div>
+                    </div>
+                    <div class="detail" data-if="!has_pick"><div class="k">Pick a pilot.</div></div>
+                    <h3 style="margin-bottom: 8dp;">Message of the day</h3>
+                    <div class="motd">{{ motd }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back to servers</div>
+        <div class="btn" data-action="menu">Main menu</div>
+    </div>
+</body>
+</rml>

EXE/remui/chatfeed.rml

@@ -0,0 +1,32 @@
+<rml>
+<head>
+    <title>Chat</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the running chat as FL shows it: lines at the left edge without a frame, the newest at
+           the bottom; the chat line below while one is typed. Its foot 420dp up (the HUD's contacts and
+           target panel below reaches 341dp): at 67 % of the height it ran into that panel */
+        body.feed { position: absolute; left: 16dp; bottom: 420dp; width: 46%; height: 40%; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; font-family: "Saira SemiCondensed"; font-size: 19dp; color: #dbe6f0; }
+        .lines { pointer-events: none; overflow: hidden; line-height: 1.25; font-effect: shadow(1dp 1dp #000000d0); }
+        .line { margin-top: 8dp; padding: 5dp 10dp; display: flex; flex-direction: row; decorator: ninepatch(fw, fw-i); }
+        .line .p { white-space: nowrap; margin-right: 6dp; }
+        .line .t { flex: 1; white-space: pre-wrap; word-break: break-word; }
+        /* the chat line under the running chat: a long one wraps and grows downwards (the lines above stay) */
+        .line.typing { position: absolute; left: 0; right: 0; top: 100%; align-items: flex-start; }
+        .gear { width: 22dp; height: 22dp; margin-left: 8dp; image-color: #8fb8d8; }
+        .gear:hover { image-color: #f2b13c; }
+        .caret { color: #f2d23c; animation: 1s steps(1) infinite blink; }
+        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
+        .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="feed movable" data-model="chatfeed">
+    <div class="win-head edit-grip">Chat &#10021;</div>
+    <div class="lines" data-if="feed_shown" data-rml="feed"></div>
+    <div class="line typing" data-if="typing">
+        <span class="p" data-rml="prefix"></span><span class="t">{{ text }}<span class="caret">|</span></span>
+        <img class="gear" src="img/gear.png" data-action="settings"/>
+    </div>
+</body>
+</rml>

EXE/remui/chathistory.rml

@@ -0,0 +1,58 @@
+<rml>
+<head>
+    <title>Chat history</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .histcol { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .ctabs { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        .ct { padding: 4dp 12dp; margin-right: 4dp; font-size: 13dp; color: #8197ad; border-bottom: 2dp #00000000; }
+        .ct:hover { color: #dbe6f0; border-bottom-color: #3d6d96; }
+        .ct.on { color: #f2b13c; background-color: #f2b13c1a; border-bottom-color: #f2b13c; }
+        .hl { padding: 1dp 4dp; border-radius: 2dp; }
+        .hl.mention { background-color: #f2b13c26; border-left: 2dp #f2b13c; }
+        .hl .tm { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 8dp; }
+        #hist { flex: 1; overflow-y: auto; padding: 12dp; font-size: 16dp; line-height: 1.35; background-color: #5cc8f008; }
+        .gear { width: 22dp; height: 22dp; margin: 0 10dp; image-color: #8fb8d8; }
+        .gear:hover { image-color: #f2b13c; }
+        .targets { width: 260dp; margin-left: 14dp; display: flex; flex-direction: column; min-height: 0; }
+        .tl { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
+        .tg { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; white-space: nowrap; overflow: hidden; }
+        .tg:hover { background-color: #122033; }
+        .tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; }
+        .tg.ch { font-family: "Saira SemiCondensed"; font-weight: 600; letter-spacing: 0.6dp; }
+    </style>
+</head>
+<body class="window medium" data-model="chathistory">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Chat.3db"/>
+        <span class="title">CHAT</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Targets <span class="v">{{ count }}</span></span>
+        <img class="gear" src="img/gear.png" data-action="settings"/>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column;">
+            <div class="cols">
+                <div class="histcol">
+                    <div class="ctabs">
+                        <div class="ct" data-for="t : tabs" data-class-on="t.on" data-action="tab" data-attr-data-arg="t.key">{{ t.label }}</div>
+                    </div>
+                    <div id="hist">
+                        <div class="hint" data-if="lines.size == 0">No messages yet.</div>
+                        <div class="hl" data-for="l : lines" data-class-mention="l.mention"><span class="tm" data-if="stamps">{{ l.time }}</span><span data-rml="l.rml"></span></div>
+                    </div>
+                </div>
+                <div class="targets">
+                    <h3>Write to</h3>
+                    <div class="tl">
+                        <div class="tg" data-for="t : targets" data-class-cur="t.current" data-class-ch="t.channel" data-action="target" data-ctx="target" data-attr-data-arg="t.key" data-rml="t.name"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="hint" style="margin-top: 10dp;">Pick whom to write to, then press Enter in flight or on a base to type.</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/chatsettings.rml

@@ -0,0 +1,60 @@
+<rml>
+<head>
+    <title>Chat settings</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.chatset { left: 50%; margin-left: -330dp; top: 12%; width: 660dp; height: 640dp; }
+        .sec { margin-bottom: 16dp; }
+        .tgl { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; background-color: #5cc8f008; }
+        .tgl:hover { background-color: #122033; }
+        .tgl .box { width: 18dp; height: 18dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
+        .tgl .box.on { border-color: #f2b13c; background-color: #f2b13c; }
+        .tgl .l { flex: 1; font-size: 16dp; }
+        .info { margin-top: 6dp; font-size: 13dp; color: #8197ad; }
+        .row { display: flex; flex-direction: row; align-items: center; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
+        .row .l { width: 130dp; font-size: 15dp; }
+        .row .sample { width: 170dp; font-family: "Saira SemiCondensed"; font-size: 16dp; white-space: nowrap; overflow: hidden; }
+        .sw { width: 22dp; height: 22dp; margin-right: 6dp; border: 2dp #00000000; border-radius: 4dp; }
+        .sw .c { width: 100%; height: 100%; border-radius: 2dp; }
+        .sw:hover { border-color: #5cc8f0; }
+        .sw.on { border-color: #f2b13c; }
+        .sw.fl { margin-right: 12dp; }
+        .foot2 { display: flex; flex-direction: row; align-items: center; margin-top: 16dp; }
+        .foot2 .hint { flex: 1; }
+        .foot2 .btn { margin: 0 0 0 8dp; }
+    </style>
+</head>
+<body class="window chatset" data-model="chatsettings">
+    <div class="win-head">
+        <img class="head-ico" src="img/gear.png"/>
+        <span class="title">CHAT SETTINGS</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="cancel">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="sec">
+                <h3>Players</h3>
+                <div class="tgl" data-action="npc"><div class="box" data-class-on="hide_npc"></div><span class="l">Hide NPC pilots</span></div>
+                <div class="info">Hides the server's NPC pilots ([NPC] names) from the chat, the player list of the chat window, the chat targets and the contact list.</div>
+                <div class="tgl" style="margin-top: 8dp;" data-action="stamps"><div class="box" data-class-on="stamps"></div><span class="l">Show times in the chat history</span></div>
+            </div>
+            <div class="sec">
+                <h3>Colours</h3>
+                <div class="row" data-for="r : rows">
+                    <span class="l">{{ r.label }}</span>
+                    <span class="sample" data-style-color="r.colour">Pilot: Hello Sirius!</span>
+                    <div class="sw" data-for="w : r.swatches" data-class-on="w.on" data-class-fl="w.key == 0" data-action="pick" data-attr-data-arg="w.arg"><div class="c" data-style-background-color="w.colour"></div></div>
+                </div>
+                <div class="info">The first colour of a row is FL's own. Server messages (new players, server notices) run as Admin / Server.</div>
+            </div>
+            <div class="foot2">
+                <span class="hint">{{ dirty ? 'Unsaved changes' : '' }}</span>
+                <div class="btn" data-action="reset">FL colours</div>
+                <div class="btn" data-action="cancel">Cancel</div>
+                <div class="btn primary" data-action="save">Save settings</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/contracts.rml

@@ -0,0 +1,58 @@
+<rml>
+<head>
+    <title>Contracts</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.gap { margin-right: 18dp; }
+        .colm.side { flex: 0 0 360dp; }
+        .banner { height: 120dp; margin-bottom: 14dp; decorator: image(3db:INTERFACE/REM/IMAGES/contracts_banner.3db cover); }
+        .target { display: flex; flex-direction: row; align-items: center; margin-bottom: 14dp; }
+        .target img { width: 34dp; height: 34dp; margin-right: 12dp; }
+        .target.off img { opacity: 0.3; }
+        .namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .namefield .label { margin-right: 10dp; }
+        .namefield input.text { flex: 1; }
+        .row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
+    </style>
+</head>
+<body class="window medium" data-model="contracts">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_contracts.3db"/>
+        <span class="title">CONTRACT NETWORK</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Bounties <span class="v">{{ bounties.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="banner"></div>
+            <div class="split">
+                <div class="colm gap">
+                    <div class="col-h" style="display: flex; flex-direction: row; margin-bottom: 8dp;"><h3>Bounty contracts</h3></div>
+                    <div class="table" style="flex: 1;">
+                        <div class="head"><span class="c1">Pilot</span><span class="c4">Reward</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="bounties.size == 0">{{ has_list ? 'No bounties open.' : 'Waiting for the server...' }}</div>
+                            <div class="row" data-for="r : bounties"><span class="c1"><img src="3db:INTERFACE/REM/IMAGES/icon_bounty.3db"/>{{ r.a }}</span><span class="c4">{{ r.b }}</span></div>
+                        </div>
+                    </div>
+                    <div class="actions" style="margin-top: 10dp;"><div class="btn" data-action="refresh">Refresh list</div></div>
+                </div>
+                <div class="colm side">
+                    <h3 style="margin-bottom: 10dp;">Place a bounty</h3>
+                    <div class="target" data-class-off="target != 1"><img src="3db:INTERFACE/REM/IMAGES/icon_skull.3db"/><span>{{ target_text }}</span></div>
+                    <div class="namefield"><span class="label">Credits</span><input class="text" type="text" data-value="credits" maxlength="13"/></div>
+                    <div class="actions"><div class="btn primary" data-action="place">On my target<div class="tip">Puts a bounty of these credits on the player you have targeted. Paid from your credits.</div></div></div>
+                    <div class="hint">Whoever destroys the pilot gets the reward.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/ctxmenu.rml

@@ -0,0 +1,22 @@
+<rml>
+<head>
+    <title>Menu</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the whole screen: a click beside the menu closes it */
+        body.ctx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; }
+        .menu { position: absolute; width: 220dp; padding: 4dp; decorator: ninepatch(fw, fw-i); }
+        .menu .t { font-size: 12dp; color: #f2b13c; padding: 4dp 8dp 6dp 8dp; white-space: nowrap; overflow: hidden; border-bottom: 1dp #24405c; margin-bottom: 3dp; }
+        .menu .r { padding: 6dp 10dp; font-size: 15dp; border-radius: 3dp; }
+        .menu .r:hover { background-color: #122033; color: #5cc8f0; }
+        .menu .r.disabled { color: #5d6e80; }
+        .menu .r.disabled:hover { background-color: transparent; color: #5d6e80; }
+    </style>
+</head>
+<body class="ctx" data-model="ctxmenu" data-action="dismiss">
+    <div class="menu" data-style-left="left" data-style-top="top">
+        <div class="t" data-if="title != ''">{{ title }}</div>
+        <div class="r" data-for="r : rows" data-class-disabled="r.disabled" data-action="pick" data-attr-data-arg="r.key">{{ r.label }}</div>
+    </div>
+</body>
+</rml>

EXE/remui/dialog.rml

@@ -0,0 +1,42 @@
+<rml>
+<head>
+    <title>Message</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.box
+        {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 520dp;
+            margin-left: -260dp;
+            margin-top: -140dp;
+            display: block;
+            decorator: ninepatch(fw, fw-i);
+        }
+        /* the windows' head (rem.rcss .win-head): clear of the cut corner, the title with its three slashes */
+        .box-head { display: flex; flex-direction: row; align-items: center; padding: 12dp 18dp 12dp 28dp; border-bottom: 1dp #2b6f9e; }
+        .box-head .title { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: 2dp; text-transform: uppercase; color: #e8f4ff; }
+        .box-head .sl { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: -1dp; color: #5cc8f0; margin-left: 10dp; }
+        .box-body { padding: 16dp 18dp 16dp 28dp; }
+        .box-body .text { white-space: pre-line; line-height: 1.5; font-size: 15dp; max-height: 320dp; overflow-y: auto; }
+        .box-body input.text { margin-top: 12dp; }
+        .box-foot { display: flex; flex-direction: row; justify-content: flex-end; padding: 0 18dp 14dp 18dp; }
+        .box-foot .btn { margin: 0 0 0 8dp; min-width: 90dp; text-align: center; }
+    </style>
+</head>
+<body class="box" data-model="dialog">
+    <div class="box-head">
+        <span class="title">{{ title }}</span><span class="sl">\\\</span>
+        <span class="close" data-action="button" data-arg="-1">&#215;</span>
+    </div>
+    <div class="box-body">
+        <div class="text">{{ text }}</div>
+        <input class="text" type="text" data-if="has_edit &amp;&amp; !secret" data-value="edit" maxlength="64"/>
+        <input class="text" type="password" data-if="has_edit &amp;&amp; secret" data-value="edit" maxlength="64"/>
+    </div>
+    <div class="box-foot">
+        <div class="btn" data-for="b, i : buttons" data-class-primary="i == 0" data-action="button" data-attr-data-arg="i">{{ b }}</div>
+    </div>
+</body>
+</rml>

EXE/remui/fonts/OFL-barlow.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

EXE/remui/fonts/OFL-ibmplexmono.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

EXE/remui/fonts/OFL-sairasemicondensed.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Saira Project Authors (omnibus.type@gmail.com), with reserved font name "Saira".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

EXE/remui/group.rml

@@ -0,0 +1,46 @@
+<rml>
+<head>
+    <title>Group</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .members { margin-bottom: 14dp; }
+        .member { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; font-size: 15dp; border-left: 3dp #5cc8f0; background-color: #5cc8f010; }
+        .request { padding: 12dp; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
+        .request .t { white-space: pre-line; line-height: 1.5; font-size: 15dp; }
+        .request .w { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
+    </style>
+</head>
+<body class="window small" data-model="group">
+    <div class="win-head">
+        <span class="title">GROUP</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Members <span class="v">{{ members.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <h3 style="margin-bottom: 8dp;">Requests</h3>
+            <div class="hint" data-if="!has_request" style="margin-bottom: 14dp;">No invitation or trade request is waiting.</div>
+            <div class="request" data-if="has_request">
+                <div class="t">{{ request }}</div>
+                <div class="w" data-if="waiting != ''">{{ waiting }}</div>
+                <div class="actions" style="margin-top: 10dp;">
+                    <div class="btn primary" data-action="accept">{{ is_trade ? 'Accept trade' : 'Join group' }}</div>
+                    <div class="btn" data-action="decline">Decline</div>
+                </div>
+            </div>
+            <h3 style="margin-bottom: 8dp;">Your group</h3>
+            <div class="hint" data-if="members.size == 0">You are not in a group. Invite a pilot from the chat (/invite name).</div>
+            <div class="members">
+                <div class="member" data-for="m : members">{{ m }}</div>
+            </div>
+            <div class="actions" data-if="can_leave">
+                <div class="btn" data-action="leave">Leave group</div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/help.rml

@@ -0,0 +1,25 @@
+<rml>
+<head>
+    <title>Information</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 14dp 16dp; background-color: #5cc8f008; }
+    </style>
+</head>
+<body class="window small" data-model="help">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
+        <span class="title">{{ title }}</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="card">{{ text }}</div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/hud.rml

@@ -0,0 +1,279 @@
+<rml>
+<head>
+    <title>HUD</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the flight HUD in the shape of FL's own (bottom left / centre / right, the maneuver bar):
+           panels with cut corners (the hudframes sprites, rem.rcss), FL's icons,
+           labelled bars, drawn by RmlUi */
+        body.hud { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; pointer-events: none; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbe6f0; }
+        .fp { position: absolute; box-sizing: border-box; decorator: ninepatch(fa, fa-i); }
+        .fp.all { decorator: ninepatch(fb, fb-i); }
+        .fp.small { decorator: ninepatch(fs, fs-i); }
+        .ico { width: 40dp; height: 40dp; margin: 0 3dp; }
+        .ib { display: inline-block; padding: 1dp; border-radius: 4dp; }
+        .ib:hover { background-color: #f2b13c14; }
+        .ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
+        .ib.on { background-color: #f2b13c1f; }
+        .ib.off { opacity: 0.35; }
+        /* a panel's title: caps, spaced, three slashes after it */
+        .ttl { font-weight: 600; font-size: 16dp; letter-spacing: 2dp; color: #e8f4ff; white-space: nowrap; }
+        .ttl .sl { margin-left: 10dp; color: #5cc8f0; letter-spacing: -1dp; }
+        .sp { flex: 1; }
+
+        /* --- the maneuver bar, top centre: icon over its name, the active one amber ----------- */
+        .mans { left: 50%; margin-left: -300dp; top: 8dp; width: 600dp; height: 76dp; padding: 0 18dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
+        .mans .ib { flex: 1; display: flex; flex-direction: column; align-items: center; height: 62dp; padding: 6dp 4dp 0 4dp; border-left: 1dp #2b6f9e; border-radius: 0; }
+        .mans .ib:first-child { border-left-width: 0; }
+        .mans .ib.on { border-left-width: 0; }
+        .mans .ico { width: 34dp; height: 34dp; margin: 0; }
+        .mans .lb { margin-top: 2dp; font-weight: 600; font-size: 12dp; letter-spacing: 1dp; color: #b9d4ea; white-space: nowrap; text-transform: uppercase; }
+        .mans .ib.on .lb { color: #f2b13c; }
+        .cruise { left: 50%; margin-left: -300dp; top: 90dp; width: 64dp; height: 56dp; display: flex; justify-content: center; align-items: center; }
+        .cruise .ico { width: 40dp; height: 40dp; }
+
+        /* --- bottom centre: the ship in its shield ring (the hull the red ring inside); power and thrust as a
+           wing on the left, the speed as one on the right -- arcs of a large circle under the panel rising to the
+           ring; the rings and wings are lit segments, each turned about its circle's centre (seg16 / seg32) */
+        .fp.core { left: 50%; margin-left: -310dp; bottom: 8dp; width: 620dp; height: 170dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
+        .core .disc { position: absolute; left: 242dp; top: 24dp; width: 134dp; height: 134dp; border: 1dp #2b6f9e; border-radius: 68dp; }
+        .core .ship { display: block; position: absolute; left: 280dp; top: 58dp; width: 60dp; height: 56dp; }
+        .core .pc { position: absolute; left: 242dp; top: 114dp; width: 136dp; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 1dp; }
+        .core .pc .s { color: #4fc6ee; margin-right: 8dp; }
+        .core .pc .h { color: #e0484e; }
+        /* the segments as soft-edged geometry (<segarc>: centre, radius and size in dp from the panel's corner) */
+        .core segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
+        .core .side { position: absolute; top: 106dp; width: 180dp; }
+        .core .side.l { left: 50dp; text-align: right; }
+        .core .side.r { left: 390dp; text-align: left; }
+        .core .cap { font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #8fb3d0; margin: 0 6dp; }
+        .core .big { font-weight: 600; font-size: 26dp; color: #e8f4ff; }
+        .core .big.low { color: #ef6a5b; }
+        .core .big .u { font-weight: 400; font-size: 12dp; color: #8fb3d0; margin-left: 4dp; }
+        .core .pw { display: block; font-weight: 600; font-size: 13dp; color: #f0943c; }
+        .core .pw .cap { color: #f0943c; }
+        /* the other ship status (REM settings: Ship status "bars"): thrust | shield / hull / power | speed, one panel */
+        .fp.coreb { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
+        .coreb .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
+        .coreb .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
+        .coreb .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
+        .coreb .thrust.low { color: #ef6a5b; }
+        .coreb .sep { width: 1dp; height: 42dp; background-color: #2b6f9e; margin: 0 10dp; }
+        .bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+        .brow { display: flex; flex-direction: row; align-items: center; height: 15dp; }
+        .brow .l { width: 52dp; font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #b9d4ea; }
+        .bar { position: relative; flex: 1; height: 8dp; }
+        .chips { position: absolute; left: 0; top: 0; right: 0; height: 8dp; display: flex; flex-direction: row; }
+        .sg { flex: 1; height: 8dp; margin-right: 2dp; }
+        .sg:last-child { margin-right: 0; }
+        /* each segment lit by the value (no clipped fill row: the HUD's scaled parts are not clipped) */
+        .power .sg { background-color: #f0943c26; }
+        .power .sg.lit { background-color: #f0943c; }
+        .shield .sg { background-color: #4fc6ee26; }
+        .shield .sg.lit { background-color: #4fc6ee; }
+        .hull .sg { background-color: #e0484e26; }
+        .hull .sg.lit { background-color: #e0484e; }
+
+        /* --- bottom left: target / contacts --------------------------------------------------- */
+        .lhead { left: 8dp; bottom: 340dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 8dp 0 22dp; }
+        .lhead .ico { width: 30dp; height: 30dp; }
+        /* as high as the weapons panel (symmetric): FL's eight contact rows a little taller */
+        .lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 334dp; padding: 12dp 16dp; }
+        .filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 6dp; padding-bottom: 6dp; border-bottom: 1dp #2b6f9e; }
+        .filters .ico { width: 32dp; height: 32dp; margin: 0 4dp; }
+        .rows { height: 246dp; margin-right: 22dp; }
+        .c { display: flex; flex-direction: row; align-items: center; height: 30dp; padding: 0 2dp; border-bottom: 1dp #24405c66; }
+        .c:hover { background-color: #3a8fc822; }
+        .c img { width: 20dp; height: 20dp; margin-right: 8dp; }
+        .c .n { flex: 1; white-space: nowrap; overflow: hidden; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; text-transform: uppercase; }
+        .c .r { width: 64dp; text-align: right; margin-left: 8dp; font-size: 16dp; }
+        /* a scroll bar at the right of the rows: the arrows and a click on the track above / below
+           the middle step a row (the classic list's own scroll); the thumb's place and size come from
+           the list (thumb_top / thumb_size), dragged it scrolls the list (rem_ui_hud.cpp) */
+        .sbar { position: absolute; right: 6dp; top: 66dp; bottom: 12dp; width: 20dp; display: flex; flex-direction: column; align-items: center; }
+        .sbar .ar { width: 20dp; height: 20dp; line-height: 20dp; text-align: center; font-size: 11dp; color: #5cc8f0; }
+        .sbar .ar:hover { color: #f2b13c; background-color: #f2b13c1f; }
+        .sbar .ar.off { color: #2b6f9e; }
+        .sbar .ar.off:hover { color: #2b6f9e; background-color: transparent; }
+        .sbar .track { position: relative; flex: 1; width: 20dp; margin: 2dp 0; }
+        .sbar .rail { position: absolute; left: 8dp; top: 0; bottom: 0; width: 4dp; background-color: #24405c; }
+        .sbar .thumb { position: absolute; left: 7dp; width: 6dp; background-color: #5cc8f0; drag: drag; }
+        .sbar .zu, .sbar .zd { position: absolute; left: 0; right: 0; height: 50%; }
+        .sbar .zu { top: 0; }
+        .sbar .zd { top: 50%; }
+        .sbar .track:hover .thumb { background-color: #f2b13c; }
+        .tname { font-weight: 600; font-size: 22dp; letter-spacing: 1dp; color: #e8f1fa; text-transform: uppercase; }
+        .tsub { font-size: 15dp; letter-spacing: 1dp; color: #8fb3d0; margin-bottom: 10dp; }
+        .tbar { display: flex; flex-direction: row; align-items: center; height: 20dp; margin: 3dp 0; }
+        .tbar .l { width: 74dp; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #b9d4ea; }
+        .tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10dp; }
+        .tbtns .ico { width: 40dp; height: 40dp; }
+
+        /* --- bottom right: status ------------------------------------------------------------- */
+        .rhead { right: 8dp; bottom: 340dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 12dp 0 22dp; }
+        .rhead .ico { width: 26dp; height: 26dp; margin: 0 4dp 0 10dp; }
+        .rhead .cnt { font-weight: 600; font-size: 18dp; }
+        /* 10 weapons fit (a ship may carry more: the list scrolls; it drew the 9th and on outside the frame) */
+        .rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 334dp; padding: 12dp 16dp; }
+        .rbody .wl { height: 100%; overflow-y: auto; }
+        .w { display: flex; flex-direction: row; align-items: center; height: 28dp; padding: 0 6dp 0 8dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; color: #8197ad; text-transform: uppercase; }
+        .w:hover { background-color: #3a8fc822; }
+        .w.on { color: #e8f4ff; border-left-color: #5cc8f0; background-color: #5cc8f014; }
+        .w .k { width: 30dp; font-size: 14dp; color: #5cc8f0; }
+        .w .n { flex: 1; white-space: nowrap; overflow: hidden; }
+        .w .a { margin-left: 8dp; color: #b9d4ea; }
+        .w.cloak { margin-top: 4dp; color: #8fb8d8; }
+        .w.cloak.on { color: #b98cf2; border-left-color: #b98cf2; }
+        .special { color: #f2d23c; font-size: 16dp; letter-spacing: 1dp; margin-top: 8dp; }
+        /* the HUD editor: four layers over the whole screen, each moved / sized as one */
+        .grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
+        .grp .fp, .grp .tag { pointer-events: auto; }
+        .g0 { transform-origin: 50% 0%; }
+        .g1 { transform-origin: 50% 100%; }
+        .g2 { transform-origin: 0% 100%; }
+        .g3 { transform-origin: 100% 100%; }
+        .grp.gone { display: none; }
+        .grp.faded { opacity: 0.35; }
+        .editing .fp { decorator: ninepatch(fed, fed-i); drag: drag; cursor: move; }
+        .editing .tag { drag: drag; cursor: move; }
+        .editing .fp * { pointer-events: none; }
+        .tag { position: absolute; padding: 3dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-radius: 3dp; white-space: nowrap; }
+        .tag .eye { margin-right: 8dp; padding: 0 6dp; background-color: #05080d; color: #f2b13c; border-radius: 2dp; }
+        .tag .eye:hover { color: #ffffff; }
+        .edbar { position: absolute; left: 50%; margin-left: -300dp; top: 190dp; width: 600dp; padding: 14dp 18dp; background-color: #070b12f2; border: 2dp #f2b13c; border-radius: 6dp; text-align: center; pointer-events: auto; }
+        .edbar .et { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 20dp; letter-spacing: 2dp; color: #f2b13c; }
+        .edbar .eh { margin: 6dp 0 12dp 0; font-size: 14dp; color: #b9cbe0; }
+        .edbar .eb { display: flex; flex-direction: row; justify-content: center; }
+        .edbar .btn { margin: 0 4dp; }
+    </style>
+</head>
+<body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity">
+    <!-- maneuvers -->
+    <div class="grp g0" data-grp="0" data-style-transform="grp[0].tf" data-class-gone="!grp[0].shown && !editing" data-class-faded="!grp[0].shown && editing">
+    <div class="tag" data-if="editing" style="left: 50%; margin-left: 310dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
+    <div class="fp all mans" data-if="maneuvers_shown || editing">
+        <div class="ib" data-for="m : maneuvers" data-class-on="m.active" data-class-off="m.disabled" data-action="maneuver" data-attr-data-arg="m.key"><img class="ico" data-attr-src="m.icon"/><span class="lb">{{ m.label }}</span></div>
+    </div>
+    <div class="fp small cruise" data-if="(maneuvers_shown && has_cruise) || editing" data-action="maneuver" data-arg="4">
+        <div class="ib" data-class-on="cruise_on"><img class="ico" src="3db:interface/HUD/hud_mnvrwarp.3db"/></div>
+    </div>
+    </div>
+
+    <!-- bottom centre -->
+    <div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing">
+    <div class="tag" data-if="editing &amp;&amp; core_ring" style="left: 50%; margin-left: -310dp; bottom: 184dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div class="tag" data-if="editing &amp;&amp; !core_ring" style="left: 50%; margin-left: -240dp; bottom: 82dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div data-if="(core || editing) &amp;&amp; core_ring">
+        <div class="fp all core">
+            <div class="disc"></div>
+            <shipwire class="ship"/>
+            <segarc cx="310" cy="92" r="60" w="10.5" h="7" n="32" a0="5.6" da="11.25" data-attr-lit="shield_n * 2" on="#4fc6ee" off="#4fc6ee26"/>
+            <segarc cx="310" cy="92" r="48" w="8" h="3" n="32" a0="5.6" da="11.25" data-attr-lit="hull_n * 2" on="#e0484e" off="#e0484e33"/>
+            <segarc cx="310" cy="420" r="370" w="10" h="8" n="16" a0="-42" da="2" data-attr-lit="power_n" on="#f0943c" off="#f0943c26"/>
+            <segarc cx="310" cy="420" r="384" w="10" h="4" n="16" a0="-42" da="2" data-attr-lit="thrust_n" data-attr-on="thrust_low ? '#ef6a5b' : '#dbe6f0'" off="#dbe6f026"/>
+            <segarc cx="310" cy="420" r="372" w="10" h="12" n="16" a0="42" da="-2" data-attr-lit="speed_n" on="#5cc8f0" off="#5cc8f026"/>
+            <div class="pc"><span class="s">{{ shield_t }}%</span><span class="h">{{ hull_t }}%</span></div>
+            <div class="side l">
+                <span class="cap">THRUST</span><span class="big" data-class-low="thrust_low">{{ thrust }}</span>
+                <span class="pw"><span class="cap">POWER</span>{{ power_t }}%</span>
+            </div>
+            <div class="side r">
+                <span class="big">{{ speed }}<span class="u">m/s</span></span><span class="cap">SPEED</span>
+            </div>
+        </div>
+    </div>
+    <div data-if="(core || editing) &amp;&amp; !core_ring">
+        <div class="fp all coreb">
+            <div class="val thrust" data-class-low="thrust_low"><span class="cap">THRUST</span>{{ thrust }}</div>
+            <div class="sep"></div>
+            <div class="bars">
+                <div class="brow power"><span class="l">POWER</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="power_n &gt; 0"></div><div class="sg" data-class-lit="power_n &gt; 1"></div><div class="sg" data-class-lit="power_n &gt; 2"></div><div class="sg" data-class-lit="power_n &gt; 3"></div><div class="sg" data-class-lit="power_n &gt; 4"></div><div class="sg" data-class-lit="power_n &gt; 5"></div><div class="sg" data-class-lit="power_n &gt; 6"></div><div class="sg" data-class-lit="power_n &gt; 7"></div><div class="sg" data-class-lit="power_n &gt; 8"></div><div class="sg" data-class-lit="power_n &gt; 9"></div><div class="sg" data-class-lit="power_n &gt; 10"></div><div class="sg" data-class-lit="power_n &gt; 11"></div><div class="sg" data-class-lit="power_n &gt; 12"></div><div class="sg" data-class-lit="power_n &gt; 13"></div><div class="sg" data-class-lit="power_n &gt; 14"></div><div class="sg" data-class-lit="power_n &gt; 15"></div></div></div></div>
+                <div class="brow shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="shield_n &gt; 0"></div><div class="sg" data-class-lit="shield_n &gt; 1"></div><div class="sg" data-class-lit="shield_n &gt; 2"></div><div class="sg" data-class-lit="shield_n &gt; 3"></div><div class="sg" data-class-lit="shield_n &gt; 4"></div><div class="sg" data-class-lit="shield_n &gt; 5"></div><div class="sg" data-class-lit="shield_n &gt; 6"></div><div class="sg" data-class-lit="shield_n &gt; 7"></div><div class="sg" data-class-lit="shield_n &gt; 8"></div><div class="sg" data-class-lit="shield_n &gt; 9"></div><div class="sg" data-class-lit="shield_n &gt; 10"></div><div class="sg" data-class-lit="shield_n &gt; 11"></div><div class="sg" data-class-lit="shield_n &gt; 12"></div><div class="sg" data-class-lit="shield_n &gt; 13"></div><div class="sg" data-class-lit="shield_n &gt; 14"></div><div class="sg" data-class-lit="shield_n &gt; 15"></div></div></div></div>
+                <div class="brow hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="hull_n &gt; 0"></div><div class="sg" data-class-lit="hull_n &gt; 1"></div><div class="sg" data-class-lit="hull_n &gt; 2"></div><div class="sg" data-class-lit="hull_n &gt; 3"></div><div class="sg" data-class-lit="hull_n &gt; 4"></div><div class="sg" data-class-lit="hull_n &gt; 5"></div><div class="sg" data-class-lit="hull_n &gt; 6"></div><div class="sg" data-class-lit="hull_n &gt; 7"></div><div class="sg" data-class-lit="hull_n &gt; 8"></div><div class="sg" data-class-lit="hull_n &gt; 9"></div><div class="sg" data-class-lit="hull_n &gt; 10"></div><div class="sg" data-class-lit="hull_n &gt; 11"></div><div class="sg" data-class-lit="hull_n &gt; 12"></div><div class="sg" data-class-lit="hull_n &gt; 13"></div><div class="sg" data-class-lit="hull_n &gt; 14"></div><div class="sg" data-class-lit="hull_n &gt; 15"></div></div></div></div>
+            </div>
+            <div class="sep"></div>
+            <div class="val speed"><span class="cap">SPEED</span>{{ speed }}<span class="u">m/s</span></div>
+        </div>
+    </div>
+
+    </div>
+
+    <!-- bottom left: contacts / target -->
+    <div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing">
+    <div class="tag" data-if="editing" style="left: 8dp; bottom: 390dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts &amp; target</div>
+    <div data-if="panel || editing">
+        <div class="fp lhead">
+            <span class="ttl">{{ mode == 1 ? 'TARGET' : 'CONTACTS' }}<span class="sl">\\\</span></span>
+            <span class="sp"></span>
+            <div class="ib" data-for="t : tabs" data-class-on="t.active" data-action="tab" data-attr-data-arg="t.key"><img class="ico" data-attr-src="t.icon"/></div>
+        </div>
+        <div class="fp lbody">
+            <div data-if="mode == 1">
+                <div class="tsub" data-if="!has_target">No target</div>
+                <div data-if="has_target">
+                    <div class="tname">{{ target_name }}</div>
+                    <div class="tsub">{{ target_sub }} {{ target_rank }}  {{ target_range }}</div>
+                    <div class="tbar hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_hull_n > 0"></div><div class="sg" data-class-lit="target_hull_n > 1"></div><div class="sg" data-class-lit="target_hull_n > 2"></div><div class="sg" data-class-lit="target_hull_n > 3"></div><div class="sg" data-class-lit="target_hull_n > 4"></div><div class="sg" data-class-lit="target_hull_n > 5"></div><div class="sg" data-class-lit="target_hull_n > 6"></div><div class="sg" data-class-lit="target_hull_n > 7"></div><div class="sg" data-class-lit="target_hull_n > 8"></div><div class="sg" data-class-lit="target_hull_n > 9"></div><div class="sg" data-class-lit="target_hull_n > 10"></div><div class="sg" data-class-lit="target_hull_n > 11"></div><div class="sg" data-class-lit="target_hull_n > 12"></div><div class="sg" data-class-lit="target_hull_n > 13"></div><div class="sg" data-class-lit="target_hull_n > 14"></div><div class="sg" data-class-lit="target_hull_n > 15"></div></div></div></div>
+                    <div class="tbar shield" data-if="target_has_shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_shield_n > 0"></div><div class="sg" data-class-lit="target_shield_n > 1"></div><div class="sg" data-class-lit="target_shield_n > 2"></div><div class="sg" data-class-lit="target_shield_n > 3"></div><div class="sg" data-class-lit="target_shield_n > 4"></div><div class="sg" data-class-lit="target_shield_n > 5"></div><div class="sg" data-class-lit="target_shield_n > 6"></div><div class="sg" data-class-lit="target_shield_n > 7"></div><div class="sg" data-class-lit="target_shield_n > 8"></div><div class="sg" data-class-lit="target_shield_n > 9"></div><div class="sg" data-class-lit="target_shield_n > 10"></div><div class="sg" data-class-lit="target_shield_n > 11"></div><div class="sg" data-class-lit="target_shield_n > 12"></div><div class="sg" data-class-lit="target_shield_n > 13"></div><div class="sg" data-class-lit="target_shield_n > 14"></div><div class="sg" data-class-lit="target_shield_n > 15"></div></div></div></div>
+                    <div class="tbtns">
+                        <div class="ib" data-for="b : target_buttons" data-action="tbutton" data-attr-data-arg="b.key"><img class="ico" data-attr-src="b.icon"/></div>
+                    </div>
+                </div>
+            </div>
+            <div data-if="mode != 1 && contacts_shown">
+                <div class="filters">
+                    <div class="ib" data-for="f : filters" data-class-on="f.active" data-action="filter" data-attr-data-arg="f.key"><img class="ico" data-attr-src="f.icon"/></div>
+                </div>
+                <div class="rows">
+                    <div class="c" data-for="c : contacts" data-style-color="c.colour" data-action="row" data-ctx="contact" data-attr-data-arg="c.key">
+                        <img data-attr-src="c.icon" data-style-image-color="c.colour"/><span class="n">{{ c.name }}</span><span class="r">{{ c.range }}</span>
+                    </div>
+                </div>
+                <div class="sbar" data-if="more_up || more_down">
+                    <div class="ar" data-class-off="!more_up" data-action="up">&#9650;</div>
+                    <div class="track">
+                        <div class="rail"></div>
+                        <div class="zu" data-action="up"></div><div class="zd" data-action="down"></div>
+                        <div class="thumb" data-style-top="thumb_top" data-style-height="thumb_size"></div>
+                    </div>
+                    <div class="ar" data-class-off="!more_down" data-action="down">&#9660;</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+
+    <!-- bottom right: the player's ship -->
+    <div class="grp g3" data-grp="3" data-style-transform="grp[3].tf" data-class-gone="!grp[3].shown && !editing" data-class-faded="!grp[3].shown && editing">
+    <div class="tag" data-if="editing" style="right: 8dp; bottom: 390dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons &amp; equipment</div>
+    <div data-if="status || editing">
+        <div class="fp rhead">
+            <span class="ttl">WEAPONS<span class="sl">\\\</span></span>
+            <span class="sp"></span>
+            <div class="ib" data-if="has_repair" data-action="repair"><img class="ico" src="3db:interface/hud/HUD_repairactivate.3db"/></div><span class="cnt" data-if="has_repair">{{ repair }}</span>
+            <div class="ib" data-if="has_battery" data-action="battery"><img class="ico" src="3db:interface/hud/HUD_shieldgaugeicon.3db"/></div><span class="cnt" data-if="has_battery">{{ battery }}</span>
+            <div class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
+        </div>
+        <div class="fp rbody"><div class="wl">
+            <div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
+                <span class="k">{{ w.key + 1 }}</span><span class="n">{{ w.name }}</span><span class="a">{{ w.ammo }}</span>
+            </div>
+            <div class="w cloak" data-if="has_cloak" data-class-on="cloak_on" data-action="cloak"><span class="k"></span><span class="n">{{ cloak_name }}</span><span class="a">{{ cloak_on ? 'ON' : 'OFF' }}</span></div>
+            <div class="special" data-if="special != ''">{{ special }}</div>
+        </div></div>
+    </div>
+    </div>
+
+    <!-- the HUD editor's bar -->
+    <div class="edbar" data-if="editing">
+        <div class="et">CUSTOMIZE HUD</div>
+        <div class="eh">Drag a part or its label to move it &#183; mouse wheel over it to size it &#183; Hide / Show on its label &#183; the REM bars, the radar and the chat by their tags. Parts snap to their home place.</div>
+        <div class="eb">
+            <div class="btn" data-action="ed_reset">Reset all</div>
+            <div class="btn" data-action="ed_cancel">Cancel</div>
+            <div class="btn primary" data-action="ed_save">Save</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/inventory.rml

@@ -0,0 +1,120 @@
+<rml>
+<head>
+    <title>Inventory</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list-col { flex: 0 0 38%; margin-right: 18dp; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+        .inv { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+        .inv:hover { background-color: #122033; }
+        .inv.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .inv img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .inv .txt { flex: 1; min-width: 0; }
+        .inv .n { font-size: 14dp; }
+        .inv .note { font-size: 12dp; color: #8197ad; }
+        .inv .c { font-family: "IBM Plex Mono"; color: #8197ad; margin-left: 8dp; }
+        #ship { flex: 1; min-height: 140dp; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; }
+        .card { height: 110dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
+        .pick-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .pick-head img { width: 40dp; height: 40dp; margin-right: 12dp; }
+        .pick-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
+        .jet { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
+        .jet .abar { margin-right: 10dp; }
+        /* as the equipment dealer's list: the ship's hardpoints (what sits on each, the empty ones dim), what is mounted
+           without one, the hold -- not mounted, an amber edge; the hold's bar over the list (rem.rcss .dstat) */
+        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
+        .sec:first-child { margin-top: 0; }
+        .sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
+        .sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
+        .inv .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
+        .inv.empty .n { color: #5c7a94; }
+        .inv.empty .txt { margin-left: 40dp; }
+        .inv.held { border-left-color: #f2b13c66; }
+        .inv.held.selected { border-left-color: #f2b13c; }
+        .holdrow { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        /* the credits keep their width on one line whatever the sum; the hold's bar takes what is left of the
+           column (up to 140dp) -- with eight digits the row was wider than the column and the "cr" wrapped */
+        .holdrow .dstat { margin-left: 0; flex-shrink: 0; }
+        .holdrow .dstat + .dstat { margin-left: 18dp; flex: 1 1 0; min-width: 0; }
+        .holdrow .hbar { flex: 1 1 0; width: auto; min-width: 0; max-width: 140dp; }
+        .holdrow .sv { font-size: 17dp; white-space: nowrap; }
+        .holdrow .ht { white-space: nowrap; }
+        .jet .btn { margin: 0; }
+        /* the picked piece's figures (rem_ui_stats), two to a row */
+        .figs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; padding: 6dp 10dp; background-color: #5cc8f008; }
+        .figs .fg { width: 50%; display: flex; flex-direction: row; padding: 2dp 8dp 2dp 0; box-sizing: border-box; }
+        .figs .fl { flex: 1; white-space: nowrap; overflow: hidden; color: #8fb3d0; font-size: 13dp; }
+        .figs .fv { font-family: "IBM Plex Mono"; font-size: 13dp; color: #e8f4ff; }
+    </style>
+</head>
+<body class="window medium" data-model="inventory">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
+        <span class="title">INVENTORY</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="filter == 5" data-action="filter" data-arg="5"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/><span>Everything</span></div>
+            <div class="item" data-class-active="filter == 0" data-action="filter" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_bounty.3db"/><span>Weapons</span></div>
+            <div class="item" data-class-active="filter == 1" data-action="filter" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_arrow.3db"/><span>Ammunition</span></div>
+            <div class="item" data-class-active="filter == 2" data-action="filter" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/><span>Equipment</span></div>
+            <div class="item" data-class-active="filter == 3" data-action="filter" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Cargo</span></div>
+        </div>
+        <div class="content">
+            <div class="split">
+                <div class="colm list-col">
+                    <div class="holdrow"><div class="dstat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div><div class="dstat"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div></div>
+                    <input class="text search" type="text" data-value="search" maxlength="40" style="margin-bottom: 8dp;"/>
+                    <div class="list">
+                        <div class="sec" data-if="hps.size &gt; 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
+                        <div class="inv" data-for="r : hps" data-class-empty="r.key == ''" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.key == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
+                            <span class="c">{{ r.note }}</span>
+                        </div>
+                        <div class="sec" data-if="inside.size &gt; 0">MOUNTED, NO HARDPOINT</div>
+                        <div class="inv" data-for="r : inside" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span>
+                        </div>
+                        <div class="sec held">CARGO HOLD &#183; NOT MOUNTED<span class="cnt">{{ items.size }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing in the hold.</div>
+                        <div class="inv held" data-for="r : items" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div id="ship"></div>
+                    <div data-if="has_pick">
+                        <div class="pick-head"><img data-if="pick.icon != ''" data-attr-src="pick.icon"/><div><div class="t">{{ pick.name }}</div><div class="hint">{{ pick.note }}</div></div></div>
+                        <div class="figs" data-if="stats.size &gt; 0"><div class="fg" data-for="f : stats"><span class="fl">{{ f.label }}</span><span class="fv">{{ f.value }}</span></div></div>
+                        <div class="card">{{ info }}</div>
+                        <div class="jet" data-if="mount_label != ''"><div class="btn primary" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div></div>
+                        <div class="jet" data-if="can_jettison">
+                            <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                                <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                                <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                            </div>
+                            <span class="num" style="width: 60dp; text-align: right; margin-right: 12dp;">{{ amount }}</span>
+                            <div class="btn danger" data-action="jettison">Jettison<div class="tip">Throws the amount overboard. It floats in space as loot.</div></div>
+                        </div>
+                    </div>
+                    <div class="hint" data-if="!has_pick">Pick an item to see what it is.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/loadgame.rml

@@ -0,0 +1,56 @@
+<rml>
+<head>
+    <title>Load game</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.lg { left: 50%; margin-left: -460dp; top: 12%; width: 920dp; height: 600dp; }
+        .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .savelist { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
+        .sv { display: flex; flex-direction: row; align-items: center; padding: 9dp 12dp; border-bottom: 1dp #ffffff08; border-left: 3dp #00000000; }
+        .sv:hover { background-color: #122033; }
+        .sv.sel { border-left-color: #f2b13c; background-color: #f2b13c1a; }
+        .sv .n { flex: 1; font-size: 16dp; white-space: nowrap; overflow: hidden; }
+        .sv .t { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 12dp; }
+        .det { width: 300dp; margin-left: 16dp; padding: 14dp; background-color: #5cc8f008; }
+        .det .row { display: flex; flex-direction: row; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
+        .det .row .k { width: 90dp; color: #8197ad; font-size: 13dp; text-transform: uppercase; letter-spacing: 1dp; }
+        .det .row .v { flex: 1; font-size: 15dp; }
+        .acts { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 14dp; }
+        .acts .btn { margin-left: 8dp; }
+    </style>
+</head>
+<body class="window lg" data-model="loadgame">
+    <div class="win-head">
+        <span class="title">LOAD GAME</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column;">
+            <div class="cols">
+                <div class="savelist">
+                    <div class="hint" style="padding: 12dp;" data-if="saves.size == 0">No saved games.</div>
+                    <div class="sv" data-for="s : saves" data-class-sel="s.selected" data-action="pick" data-dbl="open" data-attr-data-arg="s.key">
+                        <span class="n">{{ s.name }}</span><span class="t">{{ s.time }}</span>
+                    </div>
+                </div>
+                <div class="det">
+                    <h3>Saved game</h3>
+                    <div class="hint" data-if="!has_pick">Pick a saved game.</div>
+                    <div data-if="has_pick">
+                        <div class="row"><span class="k">Credits</span><span class="v">{{ money }}</span></div>
+                        <div class="row"><span class="k">Rank</span><span class="v">{{ rank }}</span></div>
+                        <div class="row"><span class="k">Place</span><span class="v">{{ place }}</span></div>
+                        <div class="row"><span class="k">Ship</span><span class="v">{{ ship }}</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="acts">
+                <div class="btn" data-class-disabled="busy" data-action="menu">Main menu</div>
+                <div class="btn" data-class-disabled="!has_pick || busy" data-action="delete">Delete</div>
+                <div class="btn primary" data-class-disabled="!has_pick || busy" data-action="load">Load game</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/loading.rml

@@ -0,0 +1,23 @@
+<rml>
+<head>
+    <title>Loading</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.loaddoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
+        /* a small HUD panel (cut corners): the title with its three slashes, a segmented rail as the HUD's
+           bars with the amber sweep running over it (the loading screen's own phase: no real progress) */
+        .load { position: absolute; left: 50%; bottom: 60dp; transform: translateX(-50%); width: 460dp; padding: 12dp 22dp 16dp 26dp; decorator: ninepatch(fw, fw-i); }
+        .load .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 3dp; color: #e8f4ff; margin-bottom: 10dp; }
+        .load .t .sl { margin-left: 10dp; letter-spacing: -1dp; color: #5cc8f0; }
+        .load .track { position: relative; height: 8dp; display: flex; flex-direction: row; }
+        .load .sg { flex: 1; height: 8dp; margin-right: 2dp; background-color: #f2b13c26; }
+        .load .sweep { position: absolute; top: 0; width: 25%; height: 8dp; background-color: #f2b13ccc; }
+    </style>
+</head>
+<body class="loaddoc" data-model="loading">
+    <div class="load" data-if="shown">
+        <div class="t">LOADING<span class="sl">\\\</span></div>
+        <div class="track"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sweep" data-style-left="sweep"></div></div>
+    </div>
+</body>
+</rml>

EXE/remui/loadsave.rml

@@ -0,0 +1,55 @@
+<rml>
+<head>
+    <title>Saved games</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list { flex: 1; }
+        .colm.side { flex: 0 0 36%; margin-left: 18dp; }
+        .table .c2 { width: 40%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; text-align: right; }
+        .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 6dp; }
+        .detail .s { white-space: pre; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.6; }
+        .namebox { margin-bottom: 12dp; }
+        .namebox .label { margin-bottom: 6dp; }
+        .side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
+    </style>
+</head>
+<body class="window medium" data-model="loadsave">
+    <div class="win-head">
+        <span class="title">{{ title }}</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm list">
+                    <div class="table" style="flex: 1;">
+                        <div class="head"><span class="c1">Name</span><span class="c2">Saved</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="saves.size == 0">No saved games.</div>
+                            <div class="row" data-for="s : saves" data-class-selected="s.selected" data-action="pick" data-dbl="open" data-attr-data-arg="s.key">
+                                <span class="c1">{{ s.name }}</span><span class="c2">{{ s.time }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm side">
+                    <div class="namebox" data-if="is_save">
+                        <div class="label">Save as</div>
+                        <input class="text" type="text" data-value="save_name" maxlength="30" placeholder="A new save (empty: numbered)"/>
+                    </div>
+                    <div class="detail" data-if="has_pick"><div class="s">{{ info }}</div></div>
+                    <div class="detail" data-if="!has_pick"><div class="hint">{{ is_save ? 'Pick a save to overwrite it, or name a new one.' : 'Pick a save.' }}</div></div>
+                    <div class="btn" data-for="b : buttons" data-class-primary="b.primary" data-class-disabled="!b.enabled" data-action="button" data-attr-data-arg="b.key">{{ b.label }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">back to the game</span>
+    </div>
+</body>
+</rml>

EXE/remui/mainmenu.rml

@@ -0,0 +1,45 @@
+<rml>
+<head>
+    <title>Main menu</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* a panel at the left in the flight HUD's frame (cut corners, rem.rcss hudframes): the title with
+           its three slashes, the entries as the windows' side tabs -- amber the first, cyan under the mouse */
+        body.menu
+        {
+            position: absolute;
+            left: 28dp;
+            top: 20%;
+            width: 400dp;
+            bottom: 28dp;
+            decorator: ninepatch(fw, fw-i);
+            display: flex;
+            flex-direction: column;
+            padding: 0 0 0 0;
+        }
+        .brand { padding: 22dp 28dp 16dp 32dp; border-bottom: 1dp #2b6f9e; margin-bottom: 18dp; }
+        .brand .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 40dp; letter-spacing: 6dp; color: #e8f4ff; white-space: nowrap; }
+        .brand .t .sl { margin-left: 12dp; font-weight: 600; font-size: 34dp; letter-spacing: -1dp; color: #5cc8f0; }
+        .brand .s { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 4dp; text-transform: uppercase; color: #f2b13c; margin-top: -4dp; }
+        .entry { margin: 0 24dp 6dp 24dp; padding: 11dp 16dp; border-left: 2dp #2b6f9e; background-color: #5cc8f008; }
+        .entry:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
+        .entry.primary { border-left-color: #f2b13c; background-color: #f2b13c14; }
+        .entry .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 2dp; text-transform: uppercase; color: #dbe6f0; }
+        .entry.primary .l { color: #f2b13c; }
+        .entry:hover .l { color: #5cc8f0; }
+        .entry .h { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .foot { margin: auto 28dp 22dp 32dp; padding-top: 10dp; border-top: 1dp #24405c; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
+    </style>
+</head>
+<body class="menu" data-model="mainmenu">
+    <div class="brand">
+        <div class="t">REMNANT<span class="sl">\\\</span></div>
+        <div class="s">Freelancer</div>
+    </div>
+    <div class="entry" data-for="e : entries" data-class-primary="e.primary" data-action="command" data-attr-data-arg="e.command">
+        <div class="l">{{ e.label }}</div>
+        <div class="h" data-if="e.hint != ''">{{ e.hint }}</div>
+    </div>
+    <div class="foot">{{ version }}</div>
+</body>
+</rml>

EXE/remui/market.rcss

@@ -0,0 +1,65 @@
+/* the market's view (market.rml): its own window and the base manager's Galactic Market page
+   (base.rml #mkt-pane, the same RML) - every rule under .mkt, beside the base manager's own */
+.mkt .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+.mkt .goods { flex: 0 0 34%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
+.mkt .detail { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
+.mkt .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+.mkt .g { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-size: 14dp; }
+.mkt .g:hover { background-color: #122033; }
+.mkt .g.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+.mkt .g .n { flex: 1; }
+.mkt .g.quiet .n { color: #8197ad; }
+.mkt .g .v { font-family: "IBM Plex Mono"; width: 50dp; text-align: right; font-size: 13dp; }
+.mkt .g .v.s { color: #f2b13c; }
+.mkt .g .v.b { color: #5fd08a; }
+.mkt .g .v.a { color: #dbe6f0; }
+.mkt .ghead { display: flex; flex-direction: row; padding: 0 10dp 4dp 12dp; font-size: 12dp; color: #8197ad; }
+.mkt .ghead .n { flex: 1; }
+.mkt .ghead .v { width: 50dp; text-align: right; }
+.mkt .tools { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+.mkt .tools input { flex: 1; margin-right: 8dp; }
+.mkt .toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border-bottom: 2dp #00000000; }
+.mkt .toggle.on { color: #f2b13c; border-bottom-color: #f2b13c; }
+.mkt .toggle:hover { color: #5cc8f0; }
+.mkt .ihead { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 8dp; }
+.mkt .ihead .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; color: #dbe6f0; flex: 1; }
+.mkt .ihead .prices { font-size: 13dp; color: #8197ad; }
+.mkt .chartbar { display: flex; flex-direction: row; align-items: center; margin-bottom: 6dp; }
+.mkt .chartbar .toggle { margin-right: 6dp; }
+.mkt .legend { margin-left: auto; font-size: 12dp; color: #8197ad; }
+.mkt .legend .k { display: inline-block; width: 10dp; height: 10dp; margin: 0 4dp 0 12dp; border-radius: 2dp; }
+.mkt .chart { position: relative; height: 190dp; margin-left: 76dp; background-color: #5cc8f008; }
+.mkt .chart .grid { position: absolute; left: 0; right: 0; height: 1dp; background-color: #24405c66; }
+.mkt .chart .col { position: absolute; top: 0; bottom: 0; }
+.mkt .chart .col:hover { background-color: #5cc8f014; }
+.mkt .chart .mean { position: absolute; bottom: 0; left: 0; right: 0; background-color: #f2b13c55; border-top: 2dp #f2b13c; border-radius: 2dp 2dp 0 0; }
+.mkt .chart .band { position: absolute; left: 35%; width: 30%; min-height: 2dp; background-color: #dbe6f0cc; border-radius: 1dp; }
+.mkt .chart .empty { position: absolute; left: 0; right: 0; top: 80dp; text-align: center; color: #8197ad; }
+.mkt .axis { position: relative; height: 0; }
+.mkt .axis .y { position: absolute; left: 0; width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
+.mkt .vol { position: relative; height: 34dp; margin-left: 76dp; margin-top: 3dp; }
+.mkt .vol .vb { position: absolute; bottom: 0; background-color: #3d6d96; border-radius: 2dp 2dp 0 0; }
+.mkt .dates { display: flex; flex-direction: row; margin-left: 76dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; margin-bottom: 12dp; }
+.mkt .dates .r { margin-left: auto; }
+.mkt .books { display: flex; flex-direction: row; min-height: 150dp; }
+.mkt .book { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.mkt .book.gap { margin-right: 14dp; }
+.mkt .book .table { flex: 1; height: 160dp; }
+.mkt .table .c2 { width: 60dp; text-align: right; font-family: "IBM Plex Mono"; }
+.mkt .table .mine .c1 { color: #5cc8f0; }
+.mkt .table .row.quiet { opacity: 0.55; }
+.mkt .panel { margin-top: 12dp; padding: 10dp 12dp; background-color: #5cc8f010; }
+.mkt .panel .row2 { display: flex; flex-direction: row; align-items: center; }
+.mkt .panel .label { width: 120dp; }
+.mkt .panel input.text { width: 120dp; margin-right: 10dp; }
+.mkt .panel .sum { font-family: "IBM Plex Mono"; color: #f2b13c; margin: 0 14dp; }
+.mkt .panel .info { font-size: 13dp; color: #8197ad; margin-top: 6dp; }
+.mkt .panel .pick { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; color: #dbe6f0; margin-bottom: 6dp; }
+.mkt .status { margin-top: 10dp; padding: 6dp 10dp; border-left: 3dp #5fd08a; background-color: #0d1622; }
+.mkt .status.bad { border-left-color: #ef6a5b; }
+.mkt .mine-split { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.mkt .mine-split .table { flex: 1; }
+.mkt .mt .c1 { flex: 1; }
+.mkt .mt .cs { width: 70dp; }
+.mkt .mt .cb { width: 24%; }
+.mkt .mt .cn { width: 110dp; text-align: right; font-family: "IBM Plex Mono"; margin-right: 14dp; }

EXE/remui/market.rml

@@ -0,0 +1,172 @@
+<rml>
+<head>
+    <title>Market</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <link type="text/rcss" href="market.rcss"/>
+</head>
+<body class="window mkt" data-model="market">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
+        <span class="title">MARKET</span><span class="sl">\\\</span>
+        <span class="loc">{{ here }}</span>
+        <span class="spacer"></span>
+        <span class="chip">{{ fees }}<div class="tip">Broker fee: from your bank when you place an order or give it a new price. Sales tax: from what you get for a sale. Orders end after their days: goods back into the depot, escrow back to the bank.</div></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <!--PANE-->
+            <div class="subtabs">
+                <div class="tab" data-class-active="tab == 0" data-action="tab" data-arg="0">Market</div>
+                <div class="tab" data-class-active="tab == 1" data-action="tab" data-arg="1">My orders</div>
+                <span class="hint" style="margin-left: auto;">updates by itself</span>
+            </div>
+
+            <!-- ================================================= MARKET -->
+            <div class="split" data-if="tab == 0">
+                <div class="goods">
+                    <div class="tools">
+                        <input class="text" type="text" data-value="filter" maxlength="40"/>
+                        <span class="toggle" data-class-on="only_orders" data-action="only-orders">with orders<div class="tip">Only goods somebody offers or wants. Off: every commodity, to place a buy order for it.</div></span>
+                        <span class="toggle" data-class-on="only_watched" data-action="only-watched">watched<div class="tip">Only the goods you watch (Watch on a good). You hear when one gets a new best price.</div></span>
+                    </div>
+                    <div class="ghead"><span class="n">Good</span><span class="v">sell</span><span class="v">buy</span><span class="v">avg</span></div>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="goods.size == 0">{{ received ? 'No good matches.' : 'Asking the server...' }}</div>
+                        <div class="g" data-for="r : goods" data-class-selected="r.selected" data-class-quiet="!r.has_orders" data-action="good" data-attr-data-arg="r.key">
+                            <span class="n">{{ r.watched ? '* ' : '' }}{{ r.name }}</span><span class="v s">{{ r.sell }}</span><span class="v b">{{ r.buy }}</span><span class="v a">{{ r.avg }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail">
+                    <div class="ihead">
+                        <span class="t">{{ has_item ? item_name : 'Pick a good' }}</span>
+                        <span class="toggle" data-if="has_item" data-class-on="item_watched" data-action="watch" style="margin-right: 12dp;">{{ item_watched ? 'Watched' : 'Watch' }}<div class="tip">Follow this good: the watched filter shows it, a new best offer or buy order is reported to you. Your own orders: you hear when someone undercuts / outbids them or when they expire.</div></span>
+                        <span class="prices">{{ item_prices }}</span>
+                    </div>
+                    <div class="chartbar">
+                        <span class="toggle" data-class-on="!days90" data-action="days" data-arg="30">30 days</span>
+                        <span class="toggle" data-class-on="days90" data-action="days" data-arg="90">90 days</span>
+                        <span class="toggle" style="margin-left: 10dp;" data-class-on="!region_here" data-action="region" data-arg="all">all regions</span>
+                        <span class="toggle" data-class-on="region_here" data-action="region" data-arg="here">{{ here_region != '' ? here_region : 'this region' }}</span>
+                        <span class="legend"><span class="k" style="background-color: #f2b13c;"></span>market mean<span class="k" style="background-color: #dbe6f0;"></span>low - high<span class="k" style="background-color: #3d6d96;"></span>volume</span>
+                    </div>
+                    <div class="axis">
+                        <span class="y" style="top: 0dp;">{{ chart_hi }}</span>
+                        <span class="y" style="top: 176dp;">{{ chart_lo }}</span>
+                    </div>
+                    <div class="chart">
+                        <div class="grid" style="top: 25%;"></div><div class="grid" style="top: 50%;"></div><div class="grid" style="top: 75%;"></div>
+                        <div class="col" data-for="b : bars" data-style-left="b.x + '%'" data-style-width="b.w + '%'">
+                            <div class="mean" data-if="b.trades" data-style-height="b.mean + '%'"></div>
+                            <div class="band" data-if="b.trades" data-style-bottom="b.lo + '%'" data-style-height="(b.hi - b.lo) + '%'"></div>
+                            <div class="tip">{{ b.tip }}</div>
+                        </div>
+                        <div class="empty" data-if="chart_note != ''">{{ chart_note }}</div>
+                    </div>
+                    <div class="vol">
+                        <div class="vb" data-for="b : bars" data-style-left="b.x + '%'" data-style-width="b.w + '%'" data-style-height="b.vol + '%'"></div>
+                    </div>
+                    <div class="dates"><span>{{ chart_from }}</span><span class="r">{{ chart_to }}</span></div>
+
+                    <div class="books" data-if="has_item">
+                        <div class="book gap">
+                            <div class="label">Sell orders - buy from them</div>
+                            <div class="table">
+                                <div class="head"><span class="c1">Base</span><span class="c2">jumps</span><span class="c3">qty</span><span class="c4">price</span></div>
+                                <div class="body">
+                                    <div class="hint" style="padding: 8dp;" data-if="sells.size == 0">Nobody sells this. Place a buy order.</div>
+                                    <div class="row" data-for="r : sells" data-class-selected="r.selected" data-class-mine="r.mine" data-action="pick-sell" data-attr-data-arg="r.id">
+                                        <span class="c1">{{ r.base }}</span><span class="c2">{{ r.jumps }}</span><span class="c3">{{ r.qty }}</span><span class="c4">{{ r.price }}</span>
+                                        <div class="tip">{{ r.who }} - ends in {{ r.expires }}{{ r.mine ? ' - your order' : '' }}{{ r.eta }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="book">
+                            <div class="label">Buy orders - sell into them</div>
+                            <div class="table">
+                                <div class="head"><span class="c1">Base</span><span class="c2">jumps</span><span class="c3">qty</span><span class="c4">price</span></div>
+                                <div class="body">
+                                    <div class="hint" style="padding: 8dp;" data-if="buys.size == 0">Nobody wants this yet. Place a sell order.</div>
+                                    <div class="row" data-for="r : buys" data-class-selected="r.selected" data-class-mine="r.mine" data-class-quiet="!r.reach" data-action="pick-buy" data-attr-data-arg="r.id">
+                                        <span class="c1">{{ r.base }}</span><span class="c2">{{ r.jumps }}</span><span class="c3">{{ r.qty }}</span><span class="c4">{{ r.price }}</span>
+                                        <div class="tip">{{ r.who }} - ends in {{ r.expires }}{{ r.mine ? ' - your order' : '' }} - holds for {{ r.range }}{{ r.reach ? ' - you can sell into it from here' : ' - not from here' }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="panel" data-if="has_pick">
+                        <div class="pick">{{ pick_text }}</div>
+                        <div class="row2">
+                            <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                            <span class="num" style="width: 80dp; text-align: right;">{{ amount_text }}</span>
+                            <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
+                            <span class="sum">{{ deal_total }}</span>
+                            <div class="btn primary" data-action="deal">{{ pick_buy ? 'Sell' : 'Buy' }}<div class="tip">{{ pick_buy ? 'Sells from your depot on that base into the buy order; the credits go to your bank.' : 'Buys with your bank credits; the goods go into your depot on that base.' }}</div></div>
+                        </div>
+                    </div>
+
+                    <div class="panel" data-if="has_item">
+                        <div class="row2" style="margin-bottom: 8dp;">
+                            <span class="toggle" data-class-on="!place_buy" data-action="place-mode" data-arg="sell">Sell order</span>
+                            <span class="toggle" style="margin-left: 6dp;" data-class-on="place_buy" data-action="place-mode" data-arg="buy">Buy order</span>
+                            <span class="hint" style="margin-left: 14dp;">{{ place_have }}</span>
+                        </div>
+                        <div class="row2">
+                            <span class="label">Amount</span><input class="text" type="text" data-value="place_qty" maxlength="10"/>
+                            <span class="label" style="width: 90dp;">Price / unit</span><input class="text" type="text" data-value="place_price" maxlength="12"/>
+                            <span class="label" style="width: 50dp;">Days</span><input class="text" type="text" style="width: 50dp;" data-value="place_days" maxlength="2"/>
+                            <span class="toggle on" data-if="place_buy" style="margin-right: 10dp;" data-action="place-range">Reach: {{ place_range }}<div class="tip">Where sellers may sell into your buy order: this station, this system, up to some jumps or the whole region. What they sell from another base goes into your depot there - you fetch it. Click for the next.</div></span>
+                            <div class="btn primary" data-class-disabled="!can_place" data-action="place">Place<div class="tip">Sell order: the goods leave your depot here and wait on the market. Buy order: the credits wait in escrow; what is sold into it goes into your depot here.</div></div>
+                        </div>
+                        <div class="info">{{ place_info }}</div>
+                    </div>
+
+                    <div class="status" data-class-bad="!status_ok" data-if="status != ''">{{ status }}</div>
+                </div>
+            </div>
+
+            <!-- ================================================= MY ORDERS -->
+            <div class="mine-split" data-if="tab == 1">
+                <div class="label">Your orders</div>
+                <div class="table mt" style="flex: 1 1 0;">
+                    <div class="head"><span class="cs">Kind</span><span class="c1">Good</span><span class="cb">Base</span><span class="cn">qty</span><span class="cn">price</span><span class="cn">ends in</span></div>
+                    <div class="body">
+                        <div class="hint" style="padding: 8dp;" data-if="mine.size == 0">You have no orders on the market.</div>
+                        <div class="row" data-for="r : mine" data-class-selected="r.selected" data-action="mine-pick" data-attr-data-arg="r.id">
+                            <span class="cs" data-style-color="r.buy ? '#5fd08a' : '#f2b13c'">{{ r.kind }}</span><span class="c1">{{ r.item }}</span><span class="cb">{{ r.base }}</span>
+                            <span class="cn">{{ r.qty }}</span><span class="cn">{{ r.price }}</span><span class="cn">{{ r.expires }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="panel" data-if="has_mine_pick">
+                    <div class="row2">
+                        <span class="label">New price</span><input class="text" type="text" data-value="reprice" maxlength="12"/>
+                        <div class="btn primary" data-action="mine-price">Set price<div class="tip">A new price per unit; the broker fee is charged again. A buy order's escrow follows the price.</div></div>
+                        <div class="btn danger" style="margin-left: 10dp;" data-action="mine-cancel">Take back<div class="tip">Sell order: the goods go back into your depot on that base. Buy order: the escrow goes back to your bank.</div></div>
+                    </div>
+                </div>
+                <div class="status" data-class-bad="!status_ok" data-if="status != ''">{{ status }}</div>
+                <div class="label" style="margin-top: 12dp;">Your last trades</div>
+                <div class="table mt" style="flex: 1 1 0;">
+                    <div class="head"><span class="cb">When</span><span class="cs">Side</span><span class="c1">Good</span><span class="cn">qty</span><span class="cn">price</span><span class="cb">Base</span></div>
+                    <div class="body">
+                        <div class="hint" style="padding: 8dp;" data-if="trades.size == 0">No trades yet.</div>
+                        <div class="row" data-for="r : trades">
+                            <span class="cb">{{ r.when }}</span><span class="cs">{{ r.side }}</span><span class="c1">{{ r.item }}</span>
+                            <span class="cn">{{ r.qty }}</span><span class="cn">{{ r.price }}</span><span class="cb">{{ r.base }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--/PANE-->
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/missionboard.rml

@@ -0,0 +1,78 @@
+<rml>
+<head>
+    <title>Mission board</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 46%; margin-right: 18dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .offer:hover { border-left-color: #5cc8f0; }
+        .offer.selected { border-left-color: #f2b13c; }
+        .offer img { width: 40dp; height: 40dp; margin-right: 12dp; }
+        .offer .mid { flex: 1; min-width: 0; }
+        .offer .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
+        .offer .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .offer .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-left: 12dp; text-align: right; }
+        .brief-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .brief-head img { width: 54dp; height: 54dp; margin-right: 14dp; }
+        .brief-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
+        .brief-head .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
+        /* the offer's picture (NN_MissionVendor's video screen) */
+        .photo { display: block; width: 280dp; height: 280dp; margin: 0 0 10dp 0; }
+        .briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
+        .empty-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+        .empty-board img { width: 64dp; height: 64dp; margin-bottom: 12dp; opacity: 0.6; }
+    </style>
+</head>
+<body class="window medium" data-model="missionboard">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
+        <span class="title">MISSION BOARD</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Offers <span class="v">{{ all_count }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="subtabs">
+                <div class="tab" data-class-active="tab == 0" data-action="tab" data-arg="0">Arc missions ({{ arc_count }})</div>
+                <div class="tab" data-class-active="tab == 1" data-action="tab" data-arg="1">Job offers ({{ job_count }})</div>
+            </div>
+            <div class="empty-board" data-if="offers.size == 0">
+                <img src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+                <div class="hint">{{ all_count == 0 ? empty_text : (tab == 0 ? 'No story chapter for you here right now.' : 'No other job offers here.') }}</div>
+            </div>
+            <div class="split" data-if="offers.size &gt; 0">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">Offers</h3>
+                    <div class="list">
+                        <div class="offer" data-for="o : offers" data-class-selected="o.selected" data-action="pick" data-dbl="accept" data-attr-data-arg="o.key">
+                            <img data-attr-src="o.icon"/>
+                            <div class="mid"><div class="t">{{ o.title }}</div><div class="d">{{ o.text }}</div></div>
+                            <span class="r">{{ o.reward }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="brief-head" data-if="has_pick">
+                        <img data-attr-src="pick.icon"/>
+                        <div><div class="t">{{ pick.title }}</div><div class="r">{{ pick.reward }}</div></div>
+                    </div>
+                    <img class="photo" data-if="has_pick &amp;&amp; photo != ''" data-attr-src="photo"/>
+                    <div class="briefing" data-if="has_pick">{{ briefing }}</div>
+                    <div class="hint" data-if="!has_pick">{{ status == '' ? 'Pick an offer.' : status }}</div>
+                    <div class="actions" style="margin-top: 12dp;" data-if="has_pick">
+                        <div class="btn primary" data-class-disabled="waiting" data-action="accept">Accept mission<div class="tip">Takes the mission; the board closes when the mission giver agrees.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/missionlog.rml

@@ -0,0 +1,40 @@
+<rml>
+<head>
+    <title>Mission log</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* accents at the left instead of boxes in the window's box */
+        .cap { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #8fb3d0; margin-bottom: 8dp; }
+        .cap .sl { margin-left: 8dp; color: #5cc8f0; letter-spacing: -1dp; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .now { border-left: 3dp #f2b13c; background-color: #f2b13c14; padding: 10dp 14dp; margin-bottom: 18dp; }
+        .now .cap { color: #f2b13c; margin-bottom: 4dp; }
+        .now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; color: #e8f4ff; }
+        .list { flex: 1; overflow-y: auto; }
+        .entry { padding: 8dp 12dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; white-space: pre-line; line-height: 1.4; font-size: 14dp; color: #8197ad; }
+        .entry.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #5cc8f00f; }
+    </style>
+</head>
+<body class="window medium" data-model="missionlog">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+        <span class="title">MISSION LOG</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">ENTRIES <span class="v">{{ entries.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="colm">
+                <div class="now" data-if="current != ''"><span class="cap">CURRENT OBJECTIVE</span><div class="t">{{ current }}</div></div>
+                <span class="cap">HISTORY<span class="sl">\\\</span></span>
+                <div class="list">
+                    <div class="hint" data-if="entries.size == 0">Nothing logged yet.</div>
+                    <div class="entry" data-for="e : entries" data-class-objective="e.objective">{{ e.text }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/missions.rml

@@ -0,0 +1,50 @@
+<rml>
+<head>
+    <title>Missions</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .panel { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f010; }
+        .panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; margin-bottom: 4dp; }
+        .row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
+    </style>
+</head>
+<body class="window medium" data-model="missions">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
+        <span class="title">MISSIONS</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Story <span class="v">{{ story.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/><span>Story progress</span></div>
+            <div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_waypoint.3db"/><span>Race</span></div>
+        </div>
+        <div class="content">
+            <div class="colm" data-if="page == 0">
+                <div class="panel"><div class="t">Completed story missions: {{ story.size }}</div><div class="hint">Missions are offered at the bars and on the mission boards of the bases.</div></div>
+                <div class="table" style="flex: 1;">
+                    <div class="head"><span class="c3" style="text-align: left; width: 50dp;">#</span><span class="c1">Mission</span></div>
+                    <div class="body">
+                        <div class="empty" data-if="story.size == 0">No story mission completed yet.</div>
+                        <div class="row" data-for="r : story"><span class="c3" style="text-align: left; width: 50dp;">{{ r.a }}</span><span class="c1">{{ r.b }}</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="colm" data-if="page == 1">
+                <div class="panel"><div class="t">{{ race_status }}</div><div class="hint">{{ race_info }}</div></div>
+                <div class="table" style="flex: 1;">
+                    <div class="head"><span class="c1">Pilot</span><span class="c2">Lap, checkpoint, time</span></div>
+                    <div class="body">
+                        <div class="empty" data-if="leaders.size == 0">No leaderboard yet.</div>
+                        <div class="row" data-for="r : leaders" data-class-current="r.current"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/navbar.rml

@@ -0,0 +1,50 @@
+<rml>
+<head>
+    <title>Nav bar</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* only as big as the bar, centred at the top: the mouse beside it goes to the game */
+        body.navstrip
+        {
+            position: absolute;
+            left: 50%;
+            top: 4dp;
+            width: auto;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: transparent;
+        }
+        /* in the flight HUD's design, as its maneuver bar (hud.rml .mans): one frame with cut corners
+           (rem.rcss, hudframes), icon over its name, a thin line between, the active one amber */
+        .navbar { display: flex; flex-direction: row; align-items: center; height: 76dp; box-sizing: border-box; padding: 0 18dp; decorator: ninepatch(fb, fb-i); }
+        .nb { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84dp; height: 62dp; padding: 0 10dp; border-left: 1dp #2b6f9e; }
+        .nb:first-child, .nb.active { border-left-width: 0; }
+        .nb:hover { background-color: #f2b13c14; }
+        .nb.active { background-color: #f2b13c1f; }
+        .nb.disabled { opacity: 0.35; }
+        .nb.disabled:hover { background-color: transparent; }
+        .nb img { width: 34dp; height: 34dp; }
+        .nb:hover img, .nb.active img { image-color: #f2b13c; }
+        .nb span { margin-top: 2dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #b9d4ea; }
+        .nb.active span { color: #f2b13c; }
+        /* the room's services (repair, launch, the dealer's desk, ...) in a smaller second row under it */
+        .navbar.tabs { height: 56dp; margin-top: 4dp; padding: 0 14dp; }
+        .tabs .nb { min-width: 72dp; height: 46dp; }
+        .tabs .nb img { width: 26dp; height: 26dp; }
+    </style>
+</head>
+<body class="navstrip" data-model="navbar">
+    <div class="navbar" data-if="shown">
+        <div class="nb" data-for="b : rooms" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
+            <img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
+        </div>
+    </div>
+    <div class="navbar tabs" data-if="shown && tabs.size &gt; 0">
+        <div class="nb" data-for="b : tabs" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
+            <img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/navmap.rml

@@ -0,0 +1,197 @@
+<rml>
+<head>
+    <title>Nav map</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        /* the map box is clear: the nav map draws its own backgrounds under it (DrawUnder), so
+           the window's colour is laid around it instead of under the whole body */
+        /* the frame's edge alone over the whole window (hudframes fo); the head and the side bring
+           their fills with the cut corners, just inside the edge -- no fill over the map. The map
+           box is 760 dp (rem_ui_navmap.cpp kMapDp): the window only as big as map and side */
+        body.window { decorator: ninepatch(fo, fo-i); left: 19%; top: 7%; width: 1180dp; height: 880dp; max-width: none; }
+        .win-head { decorator: ninepatch(fh, fh-i); margin: 2dp 2dp 0 2dp; }
+        .win-main .content { padding: 0; }
+        .mapframe { display: flex; flex-direction: column; margin: 0 0 2dp 2dp; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
+        .mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
+        #map .gcol, #map .gnum { position: absolute; font-family: "Saira SemiCondensed"; font-size: 13dp; letter-spacing: 1dp; color: #8fb3d0c0; }
+        #map .gcol { top: 4dp; width: 20dp; margin-left: -10dp; text-align: center; }
+        #map .gnum { left: 6dp; height: 16dp; margin-top: -8dp; line-height: 16dp; }
+        #map .region { position: absolute; width: 200dp; margin-left: -100dp; margin-top: -10dp; text-align: center; font-family: "Saira SemiCondensed"; font-size: 17dp; letter-spacing: 3dp; text-transform: uppercase; color: #dbe6f0b0; }
+        /* uncharted space has no map art: the whole box dark, never the scene through it */
+        #map.blank, #map.blank.revealed { background-color: #03070d; }
+        #map .uncharted-note { position: absolute; left: 0; right: 0; top: 360dp; text-align: center; color: #8197ad; font-size: 14dp; }
+        #map { position: relative; width: 760dp; height: 760dp; overflow: hidden; border: 1dp #24405c; cursor: pointer; background-color: #03070d; transition: background-color 0.3s cubic-out; }
+        /* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
+        #map.revealed { background-color: #03070d00; }
+        .side { flex: 1; margin: 0 2dp 2dp 0; padding: 18dp; decorator: ninepatch(fbr, fbr-i); display: flex; flex-direction: column; min-width: 0; }
+        .tbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10dp; }
+        .tbar .btn { display: block; margin: 0 6dp 6dp 0; }
+        .sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
+        .pcard { padding: 12dp; margin-bottom: 10dp; background-color: #5cc8f008; }
+        .pcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
+        .pcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
+        .pcard .btn { margin: 0 6dp 6dp 0; }
+        .pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
+        .pcard .acts .btn { display: block; }
+        .objs { padding: 10dp 12dp; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
+        .obj { white-space: pre-line; font-size: 13dp; line-height: 1.4; padding: 4dp 0; border-bottom: 1dp #ffffff08; }
+        .info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
+        .zoom { position: absolute; right: 8dp; bottom: 8dp; display: flex; flex-direction: row; align-items: center; }
+        .zoom .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
+        .zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; }
+
+        /* map items: centred on their point */
+        .mi { position: absolute; width: 0; height: 0; }
+        .mi .s { position: absolute; }
+        .mi .lbl { position: absolute; left: 9dp; top: -8dp; white-space: nowrap; font-size: 11dp; color: #b9cbe0; }
+        .mi.sel .lbl { color: #f2b13c; }
+        .planet .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border-radius: 6dp; background-color: #3d79b8; border: 1dp #8fc2ff; }
+        .sun .s { left: -8dp; top: -8dp; width: 16dp; height: 16dp; border-radius: 8dp; background-color: #f2c94c; border: 1dp #fff2b0; }
+        .station .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #5cc8f0; border: 1dp #dbf3ff; }
+        .gate .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #b98cf2; transform: rotate(45deg); }
+        .hole .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #ef6a5b; border-radius: 6dp; }
+        .ring .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #2f6d8f; }
+        .platform .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; background-color: #ef6a5b; }
+        .object .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #8197ad; }
+        .system .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border-radius: 7dp; background-color: #f2c94c; border: 2dp #3d6d96; }
+        .system .lbl { font-size: 12dp; color: #dbe6f0; }
+        .player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
+        .hits, .marks { margin-bottom: 10dp; max-height: 220dp; overflow-y: auto; background-color: #5cc8f008; }
+        .marks h3 { margin: 6dp 10dp 2dp 10dp; }
+        .hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
+        .hit:hover { background-color: #122033; color: #5cc8f0; }
+        .hit .hn { flex: 1; white-space: nowrap; overflow: hidden; }
+        .hit .hk { font-size: 12dp; color: #8197ad; }
+        .bookmark .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #f2b13c; border: 2dp #05080d; border-radius: 6dp; }
+        .bookmark .lbl { color: #f2b13c; }
+        .bookmark.locked .s { border-color: #f2b13c; background-color: #8a6420; }
+        .bookmark.sel .s { border-color: #ffffff; }
+        .hit .mk { margin-left: 6dp; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
+        .hit .mk:hover { color: #f2b13c; border-color: #f2b13c; }
+        .hit .mk.del:hover { color: #ef6a5b; border-color: #ef6a5b; }
+        .waypoint .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; border-radius: 2dp; }
+        .waypoint .lbl, .bestpath .lbl { left: -4dp; top: -7dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; }
+        .bestpath .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border: 2dp #5cc8f0; border-radius: 6dp; }
+        .bestpath .lbl { color: #5cc8f0; }
+        .group .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #7cf27c; }
+        .mi.sel .s { border-color: #f2b13c; }
+        .sel .ring2 { position: absolute; left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 1dp #f2b13c; border-radius: 12dp; }
+
+        /* the tools at the click point (as the classic map's ring of tools) */
+        .pop { position: absolute; width: 150dp; padding: 4dp; decorator: ninepatch(fw, fw-i); }
+        .pop .pt { font-size: 11dp; color: #f2b13c; padding: 2dp 6dp 4dp 6dp; white-space: nowrap; overflow: hidden; }
+        .pop .pb { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
+        .pop .pb:hover { background-color: #122033; color: #5cc8f0; }
+
+        /* lines: from their start, rotated */
+        .ln { position: absolute; height: 0; transform-origin: 0 0; }
+        .ln.jump { border-top: 2dp #3d6d96; }
+        .ln.lane { border-top: 3dp #2f6d8f; }
+        .ln.route { border-top: 3dp #5cc8f0; }
+        .ln.waypath { border-top: 3dp #f2b13c; }
+
+        /* the original's look (player's wish): lanes, jump links, the route and every marker are drawn by
+           the original map under the box (NeuroNetNavMap::RemDrawBackground); ours stay as names, the
+           selection ring and the bookmarks (REM's own) */
+        .ln { display: none; }
+        .mi .s { opacity: 0; }
+        .bookmark .s { opacity: 1; }
+    </style>
+</head>
+<body class="window" data-model="navmap">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
+        <span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Waypoints <span class="v">{{ waypoints }}</span></span>
+        <span class="close" data-if="!briefing" data-action="tool" data-arg="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="mapframe"><div id="map" data-class-blank="universe &amp;&amp; uncharted">
+                    <div class="region" data-for="r : regions" data-style-left="r.left" data-style-top="r.top">{{ r.name }}</div>
+                    <div class="gcol" data-for="g : grid_cols" data-style-left="g.left">{{ g.name }}</div>
+                    <div class="gnum" data-for="g : grid_rows" data-style-top="g.top">{{ g.name }}</div>
+                    <div class="uncharted-note" data-if="universe && uncharted && items.size == 0">No uncharted system visited yet.</div>
+                    <div class="ln" data-for="l : lines" data-class-jump="l.cls == 'jump'" data-class-lane="l.cls == 'lane'" data-class-route="l.cls == 'route'" data-class-waypath="l.cls == 'waypath'" data-style-left="l.left" data-style-top="l.top" data-style-width="l.width" data-style-transform="l.transform"></div>
+                    <div class="mi" data-for="i : items" data-attr-class="'mi ' + i.cls + (i.selected ? ' sel' : '')" data-style-left="i.left" data-style-top="i.top">
+                        <div class="ring2" data-if="i.selected"></div>
+                        <div class="s" data-style-transform="i.rot"></div>
+                        <div class="lbl" data-if="i.label != ''" data-style-left="i.lleft" data-style-top="i.ltop">{{ i.label }}</div>
+                    </div>
+                    <div class="pop" data-if="popup" data-style-left="pop_left" data-style-top="pop_top">
+                        <div class="pt">{{ pick_name }}</div>
+                        <div class="pb" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
+                        <div class="pb" data-action="tool" data-arg="waypoint">Set waypoint</div>
+                        <div class="pb" data-action="tool" data-arg="route">Plot route</div>
+                        <div class="pb" data-if="can_target" data-action="tool" data-arg="target">Target</div>
+                        <div class="pb" data-if="can_info" data-action="tool" data-arg="info">Info</div>
+                        <div class="pb" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
+                        <div class="pb" data-if="can_mark" data-action="bookmark">Set bookmark</div>
+                        <div class="pb" data-if="pick_mark" data-action="mark_lock">{{ mark_locked ? 'Unlock bookmark' : 'Lock bookmark' }}</div>
+                        <div class="pb" data-if="pick_mark &amp;&amp; !mark_locked" data-action="mark_del">Delete bookmark</div>
+                    </div>
+                    <div class="zoom">
+                        <span class="v">{{ zoom }}</span>
+                        <div class="btn" data-action="zoomout">-</div>
+                        <div class="btn" data-action="zoomin">+</div>
+                    </div>
+                </div><div class="mapfill"></div></div>
+                <div class="side">
+                    <div class="sysname">{{ system }}</div>
+                    <div class="tbar">
+                        <div class="btn" data-class-primary="universe" data-action="tool" data-arg="universe">Universe</div>
+                        <div class="btn" data-action="tool" data-arg="myship">My system</div>
+                        <div class="btn" data-class-primary="labels" data-action="labels">Names</div>
+                        <div class="btn" data-action="tool" data-arg="clearall">Clear waypoints</div>
+                        <div class="btn" data-if="can_abort" data-action="abort">Abort mission</div>
+                    </div>
+                    <div class="pcard" data-if="has_pick">
+                        <div class="n">{{ pick_name }}</div>
+                        <div class="k">{{ pick_kind }}</div>
+                        <div class="acts">
+                        <div class="btn" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
+                        <div class="btn primary" data-action="tool" data-arg="waypoint">Set waypoint</div>
+                        <div class="btn" data-action="tool" data-arg="route">Plot route</div>
+                        <div class="btn" data-if="can_target" data-action="tool" data-arg="target">Target</div>
+                        <div class="btn" data-if="can_info" data-action="tool" data-arg="info">Info</div>
+                        <div class="btn" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
+                        <div class="btn" data-if="can_mark" data-action="bookmark">Bookmark</div>
+                        </div>
+                    </div>
+                    <input class="text" type="text" data-value="search" maxlength="40" style="margin-bottom: 6dp;"/>
+                    <div class="hits" data-if="search != ''">
+                        <div class="hint" style="padding: 6dp;" data-if="results.size == 0">Nothing on this map by that name.</div>
+                        <div class="hit" data-for="r : results" data-action="result" data-attr-data-arg="r.key"><span class="hn">{{ r.name }}</span><span class="hk">{{ r.kind }}</span></div>
+                    </div>
+                    <div class="marks" data-if="universe &amp;&amp; uncharted_list.size &gt; 0 &amp;&amp; search == ''">
+                        <h3>Known uncharted systems</h3>
+                        <div class="hit" data-for="u : uncharted_list"><span class="hn">{{ u.name }}</span><span class="hk">{{ u.kind }}</span></div>
+                    </div>
+                    <div class="marks" data-if="bookmarks.size &gt; 0 &amp;&amp; search == ''">
+                        <h3>Bookmarks</h3>
+                        <div class="hit" data-for="b : bookmarks" data-action="gomark" data-ctx="mark" data-attr-data-arg="b.key"><span class="hn">{{ b.name }}</span><span class="mk" data-action="mark_lock" data-attr-data-arg="b.key">{{ b.kind == 'locked' ? 'Unlock' : 'Lock' }}<span class="tip">{{ b.kind == 'locked' ? 'Locked: it can be neither moved nor deleted. Click to unlock.' : 'Lock it in place: no moving, no deleting.' }}</span></span><span class="mk del" data-if="b.kind != 'locked'" data-action="mark_del" data-attr-data-arg="b.key">&#215;</span></div>
+                    </div>
+                    <div class="pcard" data-if="!has_pick"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
+                    <div class="objs" data-if="objectives.size &gt; 0">
+                        <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp;">
+                            <h3 style="flex: 1;">Route</h3>
+                            <div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objup">&#8593;</div>
+                            <div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objdown">&#8595;</div>
+                        </div>
+                        <div class="obj" data-for="o : objectives">{{ o }}</div>
+                    </div>
+                    <div class="info" data-if="show_info">{{ infocard }}</div>
+                    <div class="tbar" data-if="show_info" style="margin-top: 8dp;">
+                        <div class="btn" data-action="tool" data-arg="closeinfo">Close info</div>
+                    </div>
+                    <div style="flex: 1;" data-if="!show_info"></div>
+                    <div class="btn primary" data-if="briefing" style="text-align: center;" data-action="tool" data-arg="continue">Continue</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/news.rml

@@ -0,0 +1,53 @@
+<rml>
+<head>
+    <title>News</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 40%; margin-right: 18dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .story:hover { border-left-color: #5cc8f0; }
+        .story.selected { border-left-color: #f2b13c; }
+        .story img { width: 34dp; height: 34dp; margin-right: 12dp; }
+        .story .t { flex: 1; font-size: 14dp; }
+        .head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
+        .head img { width: 54dp; height: 54dp; margin-right: 14dp; }
+        /* the story's picture (NN_News' video screen) */
+        .photo { display: block; width: 320dp; height: 320dp; margin: 4dp 0 12dp 0; }
+        .head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
+        .text { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; padding: 14dp; font-size: 16dp; background-color: #5cc8f008; }
+    </style>
+</head>
+<body class="window medium" data-model="news">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+        <span class="title">NEWS</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Stories <span class="v">{{ stories.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="hint" data-if="stories.size == 0">No news here.</div>
+            <div class="split" data-if="stories.size &gt; 0">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">Headlines</h3>
+                    <div class="list">
+                        <div class="story" data-for="s : stories" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
+                            <img data-attr-src="s.icon"/><span class="t">{{ s.headline }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm" data-if="has_pick">
+                    <div class="head"><img data-attr-src="pick.icon"/><div class="t">{{ pick.headline }}</div></div>
+                    <img class="photo" data-if="photo != ''" data-attr-src="photo"/>
+                    <div class="text">{{ story }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/nnbar.rml

@@ -0,0 +1,33 @@
+<rml>
+<head>
+    <title>NeuroNet</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* only as big as the bar, at the top right: the mouse beside it goes to the game */
+        body.nnstrip { position: absolute; right: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
+        /* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
+        .nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; height: 52dp; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0 16dp; decorator: ninepatch(fb, fb-i); }
+        .nb { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
+        .nb:hover { background-color: #5cc8f01a; }
+        .nb.active { background-color: #f2b13c1f; }
+        .nb img { width: 30dp; height: 30dp; display: block; image-color: #b9d4ea; }
+        .nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
+        /* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
+        .nb { transition: background-color 0.15s cubic-out; }
+        .nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
+        .nb.active img { image-color: #f2b13c; }
+        .nb .tip { top: 46dp; right: 0; left: auto; bottom: auto; width: 230dp; white-space: normal; text-align: right; }
+        .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="nnstrip movable" data-model="nnbar">
+    <div class="win-head edit-grip">NeuroNet bar &#10021;</div>
+    <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 32 + 'dp'">
+        <div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
+            <img data-attr-src="i.icon"/>
+            <div class="tip" data-if="i.label != ''">{{ i.label }}</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/nnfly.rml

@@ -0,0 +1,17 @@
+<rml>
+<head>
+    <title>Bar icon flight</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the clicked bar icon on its way to the screen's middle, where its window opens (as FL's
+           NeuroNet buttons fly in before their panel grows); no box, no clicks */
+        body.flydoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
+        #fly { position: absolute; display: none; image-color: #f2b13c; transform: perspective(600dp) rotateY(0deg); }
+        #fly.on { display: block; animation: 0.32s cubic-in-out 1 fly-spin; }
+        @keyframes fly-spin { from { transform: perspective(600dp) rotateY(0deg); } to { transform: perspective(600dp) rotateY(360deg); } }
+    </style>
+</head>
+<body class="flydoc">
+    <img id="fly"/>
+</body>
+</rml>

EXE/remui/notify.rml

@@ -0,0 +1,29 @@
+<rml>
+<head>
+    <title>Notifications</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* cards at the right edge, above the HUD's right panel; the empty strip is the game's */
+        body.notify { position: absolute; right: 16dp; top: 120dp; width: 340dp; height: 520dp; background-color: transparent; display: flex; flex-direction: column; }
+        .card { margin-bottom: 8dp; padding: 9dp 12dp 9dp 14dp; decorator: ninepatch(fw, fw-i); }
+        .card:hover { background-color: #0d1622f5; }
+        .card .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; }
+        .card .x { float: right; color: #8197ad; font-size: 13dp; }
+        .card .b { margin-top: 2dp; font-size: 14dp; color: #b9cbe0; }
+        .card.good { border-left-color: #5fd08a; }
+        .card.warn { border-left-color: #ef6a5b; }
+        .card.group { border-left-color: #ff7efd; }
+        .card.trade { border-left-color: #f2b13c; }
+        .card.mail { border-left-color: #87c3e0; }
+        .card { animation: 0.25s cubic-out slidein; decorator: ninepatch(fw, fw-i); }
+        @keyframes slidein { from { opacity: 0; margin-left: 40dp; } to { opacity: 1; margin-left: 0; } }
+    </style>
+</head>
+<body class="notify" data-model="notify">
+    <div class="card" data-for="c : cards" data-attr-class="'card ' + c.kind" data-action="dismiss" data-attr-data-arg="c.key">
+        <span class="x">&#215;</span>
+        <div class="t">{{ c.title }}</div>
+        <div class="b" data-if="c.text != ''">{{ c.text }}</div>
+    </div>
+</body>
+</rml>

EXE/remui/objective.rml

@@ -0,0 +1,28 @@
+<rml>
+<head>
+    <title>Objective</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* no box of its own: only the banner, centred under the top bars. The body spans the
+           screen (a 0 x 0 body made the banner's box shrink to nothing at the left edge with the
+           text running out of it) and lets the mouse through. */
+        body.objdoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; background-color: transparent; pointer-events: none; }
+        .obj
+        {
+            margin-top: 70dp;
+            max-width: 900dp;
+            padding: 8dp 22dp;
+            font-family: "Saira SemiCondensed";
+            font-weight: 600;
+            font-size: 17dp;
+            letter-spacing: 1.5dp;
+            color: #f2b13c;
+            text-align: center;
+            decorator: ninepatch(fw, fw-i);
+        }
+    </style>
+</head>
+<body class="objdoc" data-model="objective">
+    <div class="obj" data-if="shown" data-style-opacity="opacity">{{ text }}</div>
+</body>
+</rml>

EXE/remui/options.rml

@@ -0,0 +1,114 @@
+<rml>
+<head>
+    <title>Options</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .side { flex: 0 0 200dp; margin-right: 18dp; display: flex; flex-direction: column; }
+        .main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .page { padding: 11dp 14dp; margin-bottom: 6dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 1.5dp; text-transform: uppercase; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .page:hover { color: #5cc8f0; border-left-color: #5cc8f0; }
+        .page.active { border-left-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
+        .subtabs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; }
+        .subtab { padding: 5dp 12dp; margin: 0 6dp 6dp 0; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; border-bottom: 2dp #00000000; }
+        .subtab:hover { color: #5cc8f0; border-bottom-color: #5cc8f0; }
+        .subtab.active { color: #f2b13c; border-bottom-color: #f2b13c; }
+        .rows { flex: 1; overflow-y: auto; }
+        .head { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 12dp 0 6dp 0; }
+        .opt { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; border-bottom: 1dp #ffffff08; }
+        .opt:hover { background-color: #122033; }
+        .opt .l { flex: 1; min-width: 0; font-size: 16dp; }
+        .opt.locked .l, .opt.locked .v { color: #5d6e80; }
+        .opt.changed { border-left: 2dp #f2b13c; }
+        .opt.changed .l { color: #f2b13c; }
+        /* nothing of the window's content until NN_Preferences stands on its page */
+        .win-main, .win-head .title { transition: opacity 0.18s; }
+        .settling .win-main, .settling .win-head .title { opacity: 0; }
+        .rows.settle { opacity: 0; transition: opacity 0.15s; }
+        .rows.settle.shown { opacity: 1; }
+        .switch { width: 58dp; padding: 3dp 0; text-align: center; border: 2dp #3d6d96; border-radius: 4dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; color: #8197ad; }
+        .switch.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c1f; }
+        .switch:hover { border-color: #5cc8f0; }
+        .slide { display: flex; flex-direction: row; align-items: center; width: 330dp; }
+        .slide .step { width: 26dp; padding: 2dp 0; text-align: center; border: 1dp #24405c; border-radius: 3dp; color: #dbe6f0; }
+        .slide .step:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .slide .track { flex: 1; height: 18dp; margin: 0 8dp; padding: 6dp 0; cursor: pointer; }
+        .slide .rail { height: 6dp; background-color: #24405c; border-radius: 3dp; }
+        .slide .track:hover .rail { background-color: #2e5378; }
+        .slide .fill { height: 6dp; background-color: #f2b13c; border-radius: 3dp; }
+        .opt .v { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 10dp; }
+        .ask { padding: 12dp; margin-bottom: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
+        .ask .t { flex: 1; }
+        .ask .btn { margin: 0 0 0 8dp; }
+        .side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
+        .kb { width: 150dp; margin-left: 10dp; padding: 4dp 8dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .kb:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .kb.fixed { color: #5d6e80; }
+        .kb.fixed:hover { border-color: #24405c; color: #5d6e80; }
+        .credits { flex: 1; overflow-y: auto; white-space: pre-line; text-align: center; line-height: 1.6; font-size: 14dp; padding: 12dp; }
+    </style>
+</head>
+<body class="window" data-model="options" data-class-settling="!settled">
+    <div class="win-head">
+        <span class="title">{{ title }}</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="side">
+                    <div class="page" data-for="p : pages" data-class-active="p.active" data-action="page" data-attr-data-arg="p.key">{{ p.label }}</div>
+                    <div style="flex: 1;"></div>
+                    <div class="btn primary" data-if="can_save" data-class-disabled="!unsaved" data-action="save">Save settings<div class="tip">Applies and keeps the changed settings (marked).</div></div>
+                    <div class="btn" data-if="can_defaults" data-action="defaults">Defaults<div class="tip">Every setting of this page back to its default.</div></div>
+                    <div class="btn" data-class-disabled="!can_cancel" data-action="cancel">Undo changes<div class="tip">Back to the values the page opened with.</div></div>
+                    <div class="btn primary" data-action="close">{{ in_game ? 'Back to the game' : 'Main menu' }}</div>
+                </div>
+                <div class="main">
+                    <div class="ask" data-if="asking">
+                        <span class="t">{{ question }}</span>
+                        <div class="btn primary" data-if="can_yes" data-action="yes">{{ yes_label }}</div>
+                        <div class="btn" data-action="no">{{ no_label }}</div>
+                    </div>
+                    <div class="subtabs" data-if="is_rem">
+                        <div class="subtab" data-for="t : subtabs" data-class-active="t.active" data-action="subtab" data-attr-data-arg="t.key">{{ t.label }}</div>
+                    </div>
+                    <div class="subtabs" data-if="is_keys">
+                        <div class="subtab" data-for="t : keygroups" data-class-active="t.active" data-action="keygroup" data-attr-data-arg="t.key">{{ t.label }}</div>
+                    </div>
+                    <div class="rows" data-if="is_keys">
+                        <div class="opt keyrow" data-for="k : keys" data-class-locked="!k.editable">
+                            <span class="l">{{ k.name }}</span>
+                            <span class="kb" data-class-fixed="!k.editable" data-action="bind" data-attr-data-arg="k.row">{{ k.key == '' ? '-' : k.key }}</span>
+                            <span class="kb" data-class-fixed="!k.editable" data-action="bindalt" data-attr-data-arg="k.row">{{ k.alt == '' ? '-' : k.alt }}</span>
+                        </div>
+                    </div>
+                    <div class="credits" data-if="is_credits">{{ credits }}</div>
+                    <div class="rows settle" data-if="!is_keys &amp;&amp; !is_credits" data-class-shown="settled">
+                        <div data-for="r : rows">
+                            <div class="head" data-if="r.kind == 0">{{ r.label }}</div>
+                            <div class="opt" data-if="r.kind != 0" data-class-locked="r.kind == 3" data-class-changed="r.changed">
+                                <span class="l">{{ r.label }}</span>
+                                <div class="switch" data-if="r.kind == 1" data-class-on="r.on" data-action="toggle" data-attr-data-arg="r.key">{{ r.value }}</div>
+                                <div class="slide" data-if="r.kind == 2">
+                                    <span class="step" data-action="dec" data-attr-data-arg="r.key">-</span>
+                                    <div class="track" data-scrub="set" data-attr-data-arg="r.key"><div class="rail"><div class="fill" data-style-width="r.fill + '%'"></div></div></div>
+                                    <span class="step" data-action="inc" data-attr-data-arg="r.key">+</span>
+                                    <span class="v">{{ r.value }}</span>
+                                </div>
+                                <span class="v" data-if="r.kind == 3">{{ r.value }}</span>
+                                <div class="btn" data-if="r.kind == 4" data-action="open-window" data-attr-data-arg="r.value">Open</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">back</span>
+        <span class="status">{{ unsaved ? 'Settings changed - not saved yet.' : 'Settings marked * take effect after a restart.' }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/outfitter.rml

@@ -0,0 +1,196 @@
+<rml>
+<head>
+    <title>Equipment dealer</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.mid { flex: 0 0 34%; margin: 0 18dp; }
+        .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .col-h .hint { margin-left: auto; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+        .good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+        .good:hover { background-color: #122033; }
+        .good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .good.disabled .n, .good.disabled .p { color: #8197ad; }
+        .good.misfit { opacity: 0.45; } /* fits no hardpoint of the ship: still for sale, into the hold */
+        .good img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .good .txt { flex: 1; min-width: 0; }
+        .good .n { font-size: 14dp; }
+        .good .note { font-size: 12dp; color: #8197ad; }
+        .good .c { font-family: "IBM Plex Mono"; width: 40dp; text-align: right; color: #8197ad; }
+        .good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
+        #ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); }
+        .deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
+        .deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
+        .deal .what { width: 300dp; }
+        .deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
+        .deal .amount { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0 14dp; }
+        .deal .amount .v { font-family: "IBM Plex Mono"; width: 70dp; text-align: right; margin-left: 10dp; }
+        .deal .sum { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; width: 150dp; text-align: right; margin-right: 14dp; }
+        .deal .btn { margin: 0; }
+        .why { color: #ef6a5b; margin-right: 14dp; }
+        .search { margin-bottom: 8dp; }
+        .cmp { margin-top: 10dp; padding: 8dp 10dp; background-color: #5cc8f008; }
+        .cmp .ch, .cmp .cr { display: flex; flex-direction: row; padding: 2dp 0; }
+        .cmp .ch { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-bottom: 1dp #24405c; margin-bottom: 4dp; }
+        .cmp .cl { flex: 1; white-space: nowrap; overflow: hidden; }
+        .cmp .cv { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 13dp; }
+        .cmp .ch .cv { font-family: "Saira SemiCondensed"; font-size: 12dp; color: #8197ad; }
+        .cmp .cv.up { color: #5fd08a; }
+        .cmp .cv.down { color: #ef6a5b; }
+        .cmp .cv.dim { color: #8197ad; }
+        .cmp .cn { margin-top: 4dp; font-size: 12dp; color: #8197ad; }
+        .col-h .tools { margin-left: auto; display: flex; flex-direction: row; align-items: center; }
+        .col-h .tools .btn { margin: 0 0 0 8dp; padding: 3dp 10dp; }
+        .switch { width: 58dp; padding: 3dp 0; text-align: center; border: 2dp #3d6d96; border-radius: 4dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; color: #8197ad; }
+        .switch.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c1f; }
+        .switch:hover { border-color: #5cc8f0; }
+        .flag { display: flex; flex-direction: row; align-items: center; font-size: 13dp; color: #b8c4cc; }
+        .flag .switch { width: 44dp; margin-right: 6dp; }
+        .gear { font-size: 16dp; }
+        .panel { position: absolute; top: 60dp; width: 420dp; max-height: 70%; display: flex; flex-direction: column; padding: 14dp; z-index: 10; decorator: ninepatch(fw, fw-i); }
+        .panel.left { left: 24dp; }
+        .panel.right { right: 24dp; }
+        .panel h3 { margin-bottom: 4dp; }
+        .panel .pnote { font-size: 12dp; color: #8197ad; margin-bottom: 10dp; }
+        .panel .plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+        .panel .prow { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
+        .panel .prow .n { flex: 1; min-width: 0; }
+        .panel .pfoot { display: flex; flex-direction: row; margin-top: 10dp; }
+        .panel .pfoot .btn { margin: 0 8dp 0 0; padding: 3dp 10dp; }
+        .content { position: relative; }
+        /* your equipment in three parts: the ship's hardpoints (what sits on each, the empty ones dim), what is
+           mounted without a hardpoint, the hold -- not mounted, an amber edge */
+        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
+        .sec:first-child { margin-top: 0; }
+        .sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
+        .sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
+        .good .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
+        .good.empty .n { color: #5c7a94; }
+        .good.empty .txt { margin-left: 40dp; } /* in line with the rows that have an icon (30 + 10 dp) */
+        .good.held { border-left-color: #f2b13c66; }
+        .good.held.selected { border-left-color: #f2b13c; }
+        .good.held .note { color: #5fd08a; }
+    </style>
+</head>
+<body class="window" data-model="outfitter">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
+        <span class="title">EQUIPMENT DEALER</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip" data-if="tax != ''">{{ tax }}<div class="tip">The server takes this share of what you sell to the base. It follows the region's trade of the last days: the busiest region pays the most.</div></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="subtabs">
+                <div class="tab" data-class-active="category == -1" data-action="category" data-arg="-1">All</div>
+                <div class="tab" data-class-active="category == 0" data-action="category" data-arg="0">Weapons</div>
+                <div class="tab" data-class-active="category == 1" data-action="category" data-arg="1">Ammo</div>
+                <div class="tab" data-class-active="category == 2" data-action="category" data-arg="2">Equipment</div>
+                <div class="tab" data-class-active="category == 3" data-action="category" data-arg="3">Cargo bay</div>
+                <div class="dstat" style="margin-left: auto;"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
+                <div class="dstat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div>
+            </div>
+            <div class="split">
+                <div class="colm">
+                    <div class="col-h"><h3>For sale here</h3><span class="hint" style="margin-left: 10dp;">{{ market.size }}</span>
+                        <span class="tools"><div class="btn" data-class-active="panel == 1" data-action="autobuy-panel"><span class="gear">&#9881;</span> Autobuy<div class="tip">What the server buys by itself when you dock: ammunition for your launchers, nanobots and shield batteries.</div></div></span>
+                    </div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="market.size == 0">No equipment for sale here.</div>
+                        <div class="good" data-for="r : market" data-class-selected="r.selected" data-class-disabled="r.disabled" data-class-misfit="r.slot == 'Incompatible'" data-action="buy-pick" data-dbl="deal" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="slot" data-if="r.slot != ''">{{ r.slot }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm mid">
+                    <div class="col-h"><h3>Your ship</h3><span class="tools"><div class="btn" data-action="ship-reset">Reset view<div class="tip">Turns the ship back to its start view and zoom.</div></div></span></div>
+                    <div id="ship"></div>
+                    <div class="cmp" data-if="cmp.size &gt; 0">
+                        <div class="ch"><span class="cl">{{ pick.name }}</span><span class="cv">this</span><span class="cv" data-if="cmp_other != ''">mounted</span></div>
+                        <div class="cr" data-for="c : cmp"><span class="cl">{{ c.label }}</span><span class="cv" data-class-up="c.better == 1" data-class-down="c.better == -1">{{ c.value }}</span><span class="cv dim" data-if="cmp_other != ''">{{ c.other }}</span></div>
+                        <div class="cn" data-if="cmp_other != ''">compared with {{ cmp_other }}</div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="col-h"><h3>Your equipment</h3>
+                        <span class="tools">
+                            <span class="flag"><div class="switch" data-class-on="hide_mounted" data-action="hide-mounted">{{ hide_mounted ? 'ON' : 'OFF' }}</div>loot only<div class="tip">Leaves out what is mounted and the ammunition, nanobots and shield batteries your ship uses: what is left is loot to sell.</div></span>
+                            <div class="btn" data-class-disabled="loot_count == 0" data-action="sell-loot">Sell all loot ({{ loot_count }})<div class="tip">Sells everything that came aboard since you last launched (loot), except what you keep (the gear button).</div></div>
+                            <div class="btn" data-class-active="panel == 2" data-action="keep-panel"><span class="gear">&#9881;</span><div class="tip">What "Sell all loot" keeps.</div></div>
+                        </span>
+                    </div>
+                    <div class="list">
+                        <div class="sec" data-if="hps.size &gt; 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
+                        <div class="good" data-for="r : hps" data-class-empty="r.key == ''" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-dbl="deal" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.key == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
+                            <span class="p">{{ r.price }}</span>
+                        </div>
+                        <div class="sec" data-if="inside.size &gt; 0">MOUNTED, NO HARDPOINT</div>
+                        <div class="good" data-for="r : inside" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-dbl="deal" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div></div>
+                            <span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                        <div class="sec held">CARGO HOLD &#183; NOT MOUNTED<span class="cnt">{{ hold }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="gear.size == 0">Nothing in the hold.</div>
+                        <div class="good held" data-for="r : gear" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-dbl="deal" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="panel left" data-if="panel == 1">
+                <h3>AUTOBUY</h3>
+                <div class="pnote" data-if="autobuy_known">Bought by itself when you dock, where the base sells it, as far as hold and credits go (also /autobuy in the chat).</div>
+                <div class="pnote" data-if="!autobuy_known">This server sends no autobuy settings.</div>
+                <div class="plist">
+                    <div class="prow" data-for="r : autobuy"><span class="n">{{ r.name }}</span><div class="switch" data-class-on="r.on" data-action="autobuy" data-attr-data-arg="r.key">{{ r.on ? 'ON' : 'OFF' }}</div></div>
+                </div>
+                <div class="pfoot"><div class="btn" data-action="autobuy-all" data-arg="1">All on</div><div class="btn" data-action="autobuy-all" data-arg="0">All off</div><div class="btn" data-action="autobuy-panel">Close</div></div>
+            </div>
+            <div class="panel right" data-if="panel == 2">
+                <h3>KEEP LOOT</h3>
+                <div class="pnote">"Sell all loot" sells everything that came aboard since you launched; what is set to KEEP here stays in the hold.</div>
+                <div class="plist">
+                    <div class="hint" style="padding: 10dp;" data-if="keep.size == 0">No equipment in the hold.</div>
+                    <div class="prow" data-for="r : keep"><span class="n">{{ r.name }}</span><div class="switch" data-class-on="r.on" data-action="keep" data-attr-data-arg="r.key">{{ r.on ? 'KEEP' : 'SELL' }}</div></div>
+                </div>
+                <div class="pfoot"><div class="btn" data-action="keep-panel">Close</div></div>
+            </div>
+            <div class="deal">
+                <img data-if="has_pick &amp;&amp; pick.icon != ''" data-attr-src="pick.icon"/>
+                <div class="what">
+                    <div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
+                    <div class="t">{{ has_pick ? pick.name : 'Pick a piece of equipment' }}</div>
+                </div>
+                <div class="amount">
+                    <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                        <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                        <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                    </div>
+                    <span class="v">{{ amount_text }}</span>
+                    <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
+                </div>
+                <span class="why" data-if="reason != ''">{{ reason }}</span>
+                <span class="sum">{{ total }}</span>
+                <span class="why" data-if="tax_note != ''" style="color: #b8c4cc;">{{ tax_note }}</span>
+                <div class="btn" style="margin-right: 10dp;" data-if="side == 1 &amp;&amp; mount_label != ''" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div>
+                <div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys it: onto a free hardpoint of your ship when there is one, else into the hold.' : 'Sells it; used equipment fetches less.' }}</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/pause.rml

@@ -0,0 +1,43 @@
+<rml>
+<head>
+    <title>Pause</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the whole screen dimmed, the menu in the middle */
+        body.dim
+        {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #02050acc;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .menu { width: 440dp; padding: 18dp 22dp 12dp 22dp; decorator: ninepatch(fw, fw-i); }
+        .menu .title { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 4dp; text-transform: uppercase; margin-bottom: 14dp; }
+        .row { padding: 11dp 14dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .row:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
+        .row.primary { border-left-color: #f2b13c; }
+        .row.danger { border-left-color: #ef6a5b; }
+        .row .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 1.5dp; text-transform: uppercase; }
+        .row.primary .l { color: #f2b13c; }
+        .row:hover .l { color: #5cc8f0; }
+        .row .h { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
+        .foot { margin-top: 6dp; text-align: center; }
+    </style>
+</head>
+<body class="dim" data-model="pause">
+    <div class="menu">
+        <div class="title">{{ title }}</div>
+        <div class="row" data-for="r : rows" data-class-primary="r.primary" data-class-danger="r.danger" data-action="row" data-attr-data-arg="r.key">
+            <div class="l">{{ r.label }}</div>
+            <div class="h" data-if="r.hint != ''">{{ r.hint }}</div>
+        </div>
+        <div class="foot"><span class="key">Esc</span><span class="hint"> resume</span></div>
+    </div>
+</body>
+</rml>

EXE/remui/player.rml

@@ -0,0 +1,127 @@
+<rml>
+<head>
+    <title>Player</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .grid { display: flex; flex-direction: row; flex-wrap: wrap; }
+        .stat { display: flex; flex-direction: row; align-items: center; width: 30%; margin: 0 3% 12dp 0; padding: 10dp 12dp; background-color: #5cc8f010; }
+        .stat .stat-ico { width: 34dp; height: auto; max-height: 34dp; margin-right: 12dp; } /* the icons' own colours, their own proportions (a blue tint and a forced square made them look washed out and squashed) */
+        .stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
+        .stat .v { font-family: "IBM Plex Mono"; font-size: 20dp; margin-top: 2dp; }
+        .skill { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .skill:hover { border-left-color: #5cc8f0; }
+        .skill.selected { border-left-color: #f2b13c; }
+        .skill .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; width: 220dp; }
+        .skill .lvl { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-right: 14dp; color: #8197ad; }
+        .skill .bar { flex: 1; margin-right: 14dp; }
+        .skill .next { font-family: "IBM Plex Mono"; width: 120dp; text-align: right; }
+        .skill .next.max { color: #5fd08a; }
+        .skill .eff { display: block; font-family: "IBM Plex Mono"; font-weight: 400; font-size: 11dp; color: #8197ad; margin-top: 2dp; }
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.gap { margin-right: 18dp; }
+        .big-num { font-family: "IBM Plex Mono"; font-size: 30dp; color: #f2b13c; margin: 6dp 0 14dp 0; }
+        .namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .namefield .label { margin-right: 10dp; }
+        .namefield input.text { flex: 1; }
+        .xp { margin-left: auto; }
+        .coin-log .row .c1 { width: 120dp; font-family: "IBM Plex Mono"; color: #8197ad; }
+        .coin-log .row .c2 { width: 110dp; font-family: "IBM Plex Mono"; text-align: right; margin-right: 12dp; }
+        .coin-log .row .c2.plus { color: #5fd08a; }
+        .coin-log .row .c3 { width: 80dp; }
+        .coin-log .row .c4 { flex: 1; color: #8197ad; }
+    </style>
+</head>
+<body class="window medium" data-model="player">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/><span class="title">PLAYER</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">XP <span class="v">{{ xp }}</span></span>
+        <span class="chip">Bank <span class="v">{{ balance }}</span></span>
+        <span class="chip">REM Coin <span class="v">{{ coins }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_kill_icon_total.3db"/><span>Statistics</span></div>
+            <div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Skills</span></div>
+            <div class="item" data-class-active="page == 2" data-action="page" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Account bank</span></div>
+            <div class="item" data-class-active="page == 3" data-action="page" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/><span>REM Coin</span></div>
+        </div>
+        <div class="content">
+            <div data-if="page == 0">
+                <h3 style="margin-bottom: 10dp;">Statistics</h3>
+                <div class="grid">
+                    <div class="stat" data-for="s : stats"><img class="stat-ico" data-attr-src="s.icon"/><div class="sv"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
+                </div>
+            </div>
+
+            <div class="colm" data-if="page == 1">
+                <div class="win-head" style="padding: 0 0 10dp 0; border-bottom-width: 0;"><h3>Skills</h3><span class="hint xp">Level up with your experience points</span></div>
+                <div class="skill" data-for="k : skills" data-class-selected="k.selected" data-action="skill" data-attr-data-arg="k.key">
+                    <span class="n">{{ k.name }}<span class="eff" data-if="k.effect != ''">{{ k.effect }}</span></span>
+                    <span class="lvl">{{ k.level }} / {{ k.maxlvl }}</span>
+                    <div class="bar"><div class="fill" data-style-width="k.percent + '%'"></div></div>
+                    <span class="next" data-class-max="k.max">{{ k.next }}</span>
+                </div>
+                <div class="hint" style="margin: 6dp 0 10dp 0;">{{ skill_info }}</div>
+                <div class="actions"><div class="btn primary" data-action="levelup">Level up<div class="tip">Spends the experience points shown beside the skill on its next level.</div></div></div>
+            </div>
+
+            <div class="split" data-if="page == 2">
+                <div class="colm gap">
+                    <h3>Account balance</h3>
+                    <div class="big-num">{{ balance }}</div>
+                    <div class="hint" data-if="bank_note != ''">{{ bank_note }}</div>
+                    <div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="amount" maxlength="13"/></div>
+                    <div class="actions">
+                        <div class="btn primary" data-action="deposit">Deposit<div class="tip">Moves the amount from your ship's credits into the account.</div></div>
+                        <div class="btn primary" data-action="withdraw">Withdraw<div class="tip">Moves the amount from the account to your ship's credits.</div></div>
+                    </div>
+                    <div class="hint">Deposit and withdraw move credits between your ship and the account. The account is shared by your characters.</div>
+                </div>
+                <div class="colm">
+                    <h3 style="margin-bottom: 8dp;">Send to</h3>
+                    <div class="table" style="flex: 1;">
+                        <div class="body">
+                            <div class="empty" data-if="recipients.size == 0">Nobody online.</div>
+                            <div class="row" data-for="r : recipients" data-class-selected="r.selected" data-action="recipient" data-attr-data-arg="r.name"><span class="c1">{{ r.name }}</span></div>
+                        </div>
+                    </div>
+                    <div class="actions" style="margin-top: 10dp;"><div class="btn primary" data-action="send">Send amount<div class="tip">Sends the amount from your account to the picked pilot's account.</div></div></div>
+                </div>
+            </div>
+
+            <div class="split" data-if="page == 3">
+                <div class="colm gap">
+                    <h3>REM Coin</h3>
+                    <div class="big-num">{{ coins }}</div>
+                    <div class="hint" data-if="coin_note != ''">{{ coin_note }}</div>
+                    <div class="hint" style="margin-bottom: 10dp;">{{ coin_drones }}</div>
+                    <div class="namefield"><span class="label">This character</span><span class="v">{{ coin_xp }}</span></div>
+                    <div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="coin_amount" maxlength="13"/></div>
+                    <div class="actions">
+                        <div class="btn primary" data-action="coin_xp">XP to REM Coin<div class="tip">{{ coin_xp_rule }}</div></div>
+                        <div class="btn" data-action="coin_all_xp">All XP<div class="tip">Turns all XP of this character into REM Coin.</div></div>
+                        <div class="btn primary" data-if="coin_exchange" data-action="coin_credits">REM Coin to credits<div class="tip">{{ coin_cr_rule }}</div></div>
+                    </div>
+                    <div class="hint">REM Coin belongs to your Discord account - all your characters share it. You earn it with XP and with your drones, and spend it in the shop.</div>
+                </div>
+                <div class="colm">
+                    <h3 style="margin-bottom: 8dp;">Bookings</h3>
+                    <div class="table coin-log" style="flex: 1;">
+                        <div class="body">
+                            <div class="empty" data-if="coin_log.size == 0">No bookings yet.</div>
+                            <div class="row" data-for="l : coin_log"><span class="c1">{{ l.time }}</span><span class="c2" data-class-plus="l.plus">{{ l.delta }}</span><span class="c3">{{ l.kind }}</span><span class="c4">{{ l.note }}</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/playerinfo.rml

@@ -0,0 +1,70 @@
+<rml>
+<head>
+    <title>Player status</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        /* the career narrow on the left (a stat a line), the reputation list, the picked faction's card beside it */
+        .colm.side { flex: 0 0 26%; margin-right: 18dp; overflow-y: auto; }
+        .colm.cardcol { margin-left: 18dp; }
+        .grid { display: block; margin-bottom: 8dp; }
+        .stat { display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp; padding: 6dp 10dp; background-color: #5cc8f010; }
+        .stat .k { flex: 1; min-width: 0; font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
+        .stat .v { font-family: "IBM Plex Mono"; font-size: 15dp; margin-left: 8dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .faction:hover { border-left-color: #5cc8f0; }
+        .faction.selected { border-left-color: #f2b13c; }
+        .faction.own .n { color: #f2b13c; }
+        .faction .n { width: 40%; font-size: 14dp; }
+        .faction .rep { flex: 1; display: flex; flex-direction: row; height: 6dp; margin: 0 12dp; }
+        .faction .half { width: 50%; height: 6dp; background-color: #00000066; display: flex; flex-direction: row; }
+        .faction .half.l { justify-content: flex-end; border-right: 1dp #8197ad; }
+        .faction .neg { height: 6dp; background-color: #ef6a5b; }
+        .faction .pos { height: 6dp; background-color: #5fd08a; }
+        .faction .s { width: 90dp; text-align: right; font-size: 12dp; color: #8197ad; font-family: "Saira SemiCondensed"; text-transform: uppercase; letter-spacing: 1dp; }
+        .card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
+    </style>
+</head>
+<body class="window medium" data-model="playerinfo">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
+        <span class="title">PLAYER STATUS</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="hint" data-if="!received">Waiting for the server...</div>
+            <div class="split" data-if="received">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">Career</h3>
+                    <div class="grid"><div class="stat" data-for="s : stats"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
+                    <h3 style="margin-bottom: 8dp;">Kills</h3>
+                    <div class="grid"><div class="stat" data-for="s : kills"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
+                </div>
+                <div class="colm">
+                    <h3 style="margin-bottom: 8dp;">Reputation</h3>
+                    <div class="list">
+                        <div class="hint" data-if="factions.size == 0">You have met no factions yet.</div>
+                        <div class="faction" data-for="f : factions" data-class-own="f.own" data-class-selected="f.selected" data-action="faction" data-attr-data-arg="f.key">
+                            <span class="n">{{ f.name }}</span>
+                            <div class="rep">
+                                <div class="half l"><div class="neg" data-style-width="(f.left * 2) + '%'"></div></div>
+                                <div class="half"><div class="pos" data-style-width="(f.right * 2) + '%'"></div></div>
+                            </div>
+                            <span class="s">{{ f.standing }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm cardcol" data-if="has_card">
+                    <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>{{ card_title }}</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="card-close">Close</div></div>
+                    <div class="card">{{ card }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/pm.rml

@@ -0,0 +1,41 @@
+<rml>
+<head>
+    <title>Private message</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.pmwin { left: auto; right: 250dp; top: auto; bottom: 360dp; width: 480dp; height: 440dp; }
+        #pmhist { flex: 1; overflow-y: auto; padding: 10dp; background-color: #5cc8f008; }
+        .ln { margin: 4dp 0; display: block; }
+        .ln .b { display: block; width: 80%; padding: 6dp 10dp; border-radius: 6dp; background-color: #122033; font-size: 15dp; line-height: 1.3; text-align: left; }
+        .ln.mine .b { margin-left: auto; }
+        .ln.mine .tm { text-align: right; }
+        .ln.mine .b { background-color: #f2b13c1f; border: 1dp #f2b13c55; }
+        .ln .tm { display: block; font-family: "IBM Plex Mono"; font-size: 10dp; color: #8197ad; margin: 1dp 4dp; }
+        .send { display: flex; flex-direction: row; margin-top: 10dp; }
+        .send input.text { flex: 1; margin: 0 8dp 0 0; }
+    </style>
+</head>
+<body class="window pmwin" data-model="pm">
+    <div class="win-head">
+        <span class="title" style="font-size: 18dp;">{{ name }}</span><span class="sl">\\\</span>
+        <span class="loc">private</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column; padding: 12dp;">
+            <div id="pmhist">
+                <div class="hint" data-if="lines.size == 0">No messages yet.</div>
+                <div class="ln" data-for="l : lines" data-class-mine="l.mine">
+                    <div class="b" data-rml="l.rml"></div>
+                    <span class="tm">{{ l.time }}</span>
+                </div>
+            </div>
+            <div class="send">
+                <input class="text" type="text" data-value="edit" maxlength="250"/>
+                <div class="btn primary" data-action="send">Send</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/pmdock.rml

@@ -0,0 +1,28 @@
+<rml>
+<head>
+    <title>Messages</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the open conversations docked at the right edge, above the HUD's right panel */
+        body.pmdock { position: absolute; right: 16dp; bottom: 360dp; width: 220dp; height: 300dp; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; }
+        .tab { display: flex; flex-direction: row; align-items: center; margin-top: 6dp; padding: 7dp 10dp; decorator: ninepatch(fw, fw-i); }
+        .tab:hover { background-color: #122033; }
+        .tab.open { ; }
+        .tab .ic { font-size: 15dp; margin-right: 8dp; color: #87c3e0; }
+        .tab .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; white-space: nowrap; overflow: hidden; }
+        .tab .u { min-width: 20dp; height: 20dp; line-height: 20dp; text-align: center; border-radius: 10dp; background-color: #ef6a5b; color: #ffffff; font-size: 12dp; margin-right: 6dp; }
+        .tab .x { color: #8197ad; padding: 0 4dp; }
+        .tab .x:hover { color: #ef6a5b; }
+        .tab.new { animation: 1.2s sine-in-out infinite pulse; }
+        @keyframes pulse { 0% { border-left-color: #87c3e0; } 50% { border-left-color: #f2b13c; } 100% { border-left-color: #87c3e0; } }
+    </style>
+</head>
+<body class="pmdock" data-model="pmdock">
+    <div class="tab" data-for="t : tabs" data-class-open="t.open" data-class-new="t.unread > 0" data-action="open" data-attr-data-arg="t.key">
+        <span class="ic">PM</span>
+        <span class="n">{{ t.name }}</span>
+        <span class="u" data-if="t.unread > 0">{{ t.unread }}</span>
+        <span class="x" data-action="close" data-attr-data-arg="t.key">&#215;</span>
+    </div>
+</body>
+</rml>