/* Libertalia HQ — UI Sprite Skin (integrated) Scope: only active when is present. Note: visual-only overrides; no layout logic changes. */ /* Prevent a visible flash of fallback fonts while custom faces load */ html[data-skin="ui"].fonts-loading .brand, html[data-skin="ui"].fonts-loading .legend, html[data-skin="ui"].fonts-loading .win, html[data-skin="ui"].fonts-loading .inspect, html[data-skin="ui"].fonts-loading .hud, html[data-skin="ui"].fonts-loading .statusBar{ visibility: hidden; } /* Hold the Station Log HUD briefly on initial load so it doesn't render in the old bottom position before JS applies the docked topbar layout (desktop). */ html[data-skin="ui"].hud-hold .hud{ visibility: hidden; } /* ----------------------------------------------------------- Fonts (integrated) Note: these override the base font variables only when skin is active. ----------------------------------------------------------- */ @font-face{ font-family: "Practa"; src: url("assets/fonts/practa.otf") format("opentype"); font-display: swap; } @font-face{ font-family: "Practa Outline"; src: url("assets/fonts/practa-outline.otf") format("opentype"); font-display: swap; } @font-face{ font-family: "MGS1 Codec"; src: url("assets/fonts/mgs1-codec.ttf") format("truetype"); font-display: swap; } @font-face{ font-family: "MGS1 Ammo"; src: url("assets/fonts/mgs1-ammo.ttf") format("truetype"); font-display: swap; } @font-face{ font-family: "MGS1 HUD"; src: url("assets/fonts/mgs1-hud.ttf") format("truetype"); font-display: swap; } /* ----------------------------------------------------------- Sprite variables ----------------------------------------------------------- */ html[data-skin="ui"]{ /* Fonts */ /* Practa is missing a handful of punctuation glyphs; include bundled MGS fonts early so we never fall back to system fonts. */ --font-ui: "MGS1 HUD", "MGS1 Codec", "Practa", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-practa: "Practa", "MGS1 HUD", "MGS1 Codec", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-stamp: "Practa", "MGS1 HUD", "Oswald", system-ui, sans-serif; --font-mono: "MGS1 Codec", "MGS1 HUD", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-hud: "MGS1 HUD", "MGS1 Codec", "Practa", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Part 1 */ --ui-btn-normal: url("assets/ui/button-normal.png"); --ui-btn-hover: url("assets/ui/button-hover.png"); --ui-btn-active: url("assets/ui/button-active.png"); --ui-btn-disabled: url("assets/ui/button-disabled.png"); --ui-frame: url("assets/ui/frame.png"); /* Part 2 */ --ui-grid: url("assets/ui/grid.png"); --ui-title-01: url("assets/ui/titlepanel-01.png"); --ui-title-02: url("assets/ui/titlepanel-02.png"); --ui-textbox: url("assets/ui/textbox.png"); --ui-switch: url("assets/ui/switch-01.png"); /* background wash (swap to game-menu.png / main-menu.png / nvl.png if you prefer) */ --ui-bg: url("assets/ui/mid-variant.png"); /* Icons */ --ic-close: url("assets/icons/close.png"); --ic-prev: url("assets/icons/prev.png"); --ic-next: url("assets/icons/next.png"); --ic-caret: url("assets/icons/caret.png"); --ic-step: url("assets/icons/step.png"); --ic-audio-off: url("assets/icons/audio-off.png"); --ic-audio-on: url("assets/icons/audio-on.png"); --ic-expand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2018%2018%27%20fill%3D%27none%27%20stroke%3D%27%2312dcff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M7%202H2v5M11%2016h5v-5M16%207V2h-5M2%2011v5h5%27/%3E%3C/svg%3E"); } /* ----------------------------------------------------------- Background wash (subtle, behind everything) ----------------------------------------------------------- */ html[data-skin="ui"] body{ position: relative; } html[data-skin="ui"] body::before{ content: ""; position: fixed; inset: 0; background-image: var(--ui-bg); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .08; pointer-events: none; z-index: -1; } /* Disable the existing faux-bolt overlays on main panels so the sprite frame reads cleanly */ html[data-skin="ui"] .legend::before, html[data-skin="ui"] .legend::after, html[data-skin="ui"] .win::before, html[data-skin="ui"] .win::after, html[data-skin="ui"] .inspect::before, html[data-skin="ui"] .inspect::after{ content: none !important; } html[data-skin="ui"] .win__bar::after, html[data-skin="ui"] .inspect__bar::after{ content: none !important; } /* ----------------------------------------------------------- Panel frames (border-image) ----------------------------------------------------------- */ html[data-skin="ui"] .legend, html[data-skin="ui"] .win, html[data-skin="ui"] .inspect, html[data-skin="ui"] .airlock__panel, html[data-skin="ui"] .hud{ border: 14px solid transparent !important; border-image-source: var(--ui-frame) !important; border-image-slice: 72 !important; border-image-repeat: stretch !important; border-image-width: 14 !important; border-radius: 0 !important; } /* Panel backplates + subtle grid */ html[data-skin="ui"] .legend, html[data-skin="ui"] .win, html[data-skin="ui"] .inspect{ background-color: rgba(8, 10, 14, .70) !important; background-image: var(--ui-grid) !important; background-repeat: repeat !important; background-size: 454px 337px !important; } html[data-skin="ui"] .hud{ background-color: rgba(8, 10, 14, .55) !important; background-image: var(--ui-grid) !important; background-repeat: repeat !important; background-size: 454px 337px !important; } html[data-skin="ui"] .airlock__panel{ background-color: rgba(8, 10, 14, .92) !important; background-image: var(--ui-grid) !important; background-repeat: repeat !important; background-size: 454px 337px !important; } /* Title strips (part 2) */ html[data-skin="ui"] .win__bar, html[data-skin="ui"] .inspect__bar{ background-image: var(--ui-title-01) !important; background-repeat: repeat-x !important; background-size: auto 20px !important; background-position: 12px center !important; } html[data-skin="ui"] .legend__head{ background-image: var(--ui-title-02) !important; background-repeat: repeat-x !important; background-size: auto 20px !important; background-position: 12px 10px !important; } /* ----------------------------------------------------------- Button sprites (border-image w/ fill) ----------------------------------------------------------- */ html[data-skin="ui"] .btn, html[data-skin="ui"] .chip, html[data-skin="ui"] .hud__btn, html[data-skin="ui"] .hud__icon, html[data-skin="ui"] .win__close, html[data-skin="ui"] .win__max, html[data-skin="ui"] .legendBtn, html[data-skin="ui"] .inspect__actions button{ border: 6px solid transparent !important; border-image-source: var(--ui-btn-normal) !important; border-image-slice: 14 fill !important; border-image-repeat: stretch !important; border-image-width: 6 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; min-height: 38px; } /* keep chip spacing tight */ html[data-skin="ui"] .chip{ padding: 8px 10px !important; } /* Keep the "×" close buttons compact */ html[data-skin="ui"] .win__close{ min-width: 44px; padding: 0 10px !important; } html[data-skin="ui"] .hud__icon{ width: 44px; height: 38px; padding: 0 !important; } /* Hover/active */ html[data-skin="ui"] .btn:hover, html[data-skin="ui"] .chip:hover, html[data-skin="ui"] .hud__btn:hover, html[data-skin="ui"] .hud__icon:hover, html[data-skin="ui"] .win__close:hover, html[data-skin="ui"] .win__max:hover, html[data-skin="ui"] .legendBtn:hover, html[data-skin="ui"] .inspect__actions button:hover{ border-image-source: var(--ui-btn-hover) !important; } html[data-skin="ui"] .btn:active, html[data-skin="ui"] .chip:active, html[data-skin="ui"] .hud__btn:active, html[data-skin="ui"] .hud__icon:active, html[data-skin="ui"] .win__close:active, html[data-skin="ui"] .win__max:active, html[data-skin="ui"] .legendBtn:active, html[data-skin="ui"] .inspect__actions button:active{ border-image-source: var(--ui-btn-active) !important; transform: translateY(1px); } /* Pressed chips */ html[data-skin="ui"] .chip[aria-pressed="true"]{ border-image-source: var(--ui-btn-active) !important; } /* Disabled */ html[data-skin="ui"] button:disabled, html[data-skin="ui"] .btn[disabled]{ border-image-source: var(--ui-btn-disabled) !important; cursor: not-allowed !important; opacity: .9; } /* Make sure the big module buttons keep their internal spacing */ html[data-skin="ui"] .legendBtn{ width: 100%; text-align: left; padding: 10px 12px !important; } /* Avoid double borders on internal separators now that frames exist */ html[data-skin="ui"] .win__bar, html[data-skin="ui"] .inspect__bar{ border-bottom-color: rgba(255,255,255,.10) !important; } /* ----------------------------------------------------------- Textbox sprite for Transmission search Fix: draw the textbox on the wrapper so the input text can’t drift ----------------------------------------------------------- */ html[data-skin="ui"] .txSearch{ position: relative; height: 48px; } html[data-skin="ui"] .txSearch::before{ content: ""; position: absolute; inset: 0; border: 10px solid transparent; border-image-source: var(--ui-textbox); border-image-slice: 70 fill; border-image-repeat: stretch; border-image-width: 10; pointer-events: none; } html[data-skin="ui"] .txInput{ position: relative; z-index: 1; width: 100%; height: 48px; background: transparent !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box; /* Align text cleanly inside the sprite safe area */ padding: 14px 18px 10px !important; font-size: 15px; line-height: 16px; } html[data-skin="ui"] .txInput::placeholder{ opacity: .72; } /* A tiny switch glyph on the Audio toggle (keeps the text) */ html[data-skin="ui"] #audioToggle{ background-image: var(--ui-switch) !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 66px 24px !important; background-color: transparent !important; padding-left: 86px !important; } /* ----------------------------------------------------------- Font application (coverage fix) ----------------------------------------------------------- */ /* Force the skin font across all controls/content so nothing falls back to the base theme. */ html[data-skin="ui"], html[data-skin="ui"] body, html[data-skin="ui"] button, html[data-skin="ui"] input, html[data-skin="ui"] textarea, html[data-skin="ui"] select, html[data-skin="ui"] option{ font-family: var(--font-ui) !important; } /* Practa accents: keep key UI labels in Practa for a 50/50 balance */ html[data-skin="ui"] .btn, html[data-skin="ui"] .chip, html[data-skin="ui"] .legendBtn, html[data-skin="ui"] .win__close, html[data-skin="ui"] .win__max, html[data-skin="ui"] .hud__btn, html[data-skin="ui"] .hud__icon, html[data-skin="ui"] .inspect__actions button, html[data-skin="ui"] .txTitle{ font-family: var(--font-practa) !important; } /* Headings / stamps */ html[data-skin="ui"] .legend__title, html[data-skin="ui"] .win__title, html[data-skin="ui"] .inspect__title, html[data-skin="ui"] .airlock__title{ font-family: var(--font-stamp) !important; } html[data-skin="ui"] .brand__title{ font-family: "MGS1 HUD", var(--font-hud) !important; letter-spacing: .14em; text-transform: uppercase; } html[data-skin="ui"] .brand__sub{ font-family: var(--font-practa) !important; letter-spacing: .12em; text-transform: uppercase; } /* HUD + mono surfaces */ html[data-skin="ui"] .hud__label{ font-family: var(--font-hud) !important; } html[data-skin="ui"] .airlock__url, html[data-skin="ui"] .txInput{ border: 10px solid transparent !important; border-image-source: var(--ui-textbox) !important; border-image-slice: 70 fill !important; border-image-repeat: stretch !important; border-image-width: 10 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; /* Fix baseline alignment inside sprite textbox (MGS font has different metrics) */ -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box; display: block; height: 48px; padding: 8px 14px 5px !important; /* nudges text down slightly */ font-size: 15px; line-height: 15px; } html[data-skin="ui"] .txInput::placeholder{ opacity: .75; } /* ----------------------------------------------------------- Icons (pt3) — visual-only overlays ----------------------------------------------------------- */ /* Close icons (Console / Inspector / Airlock) */ html[data-skin="ui"] .win__close, html[data-skin="ui"] #inspectClose, html[data-skin="ui"] .airlock__close{ position: relative; color: transparent !important; text-shadow: none !important; } /* Win maximise (immersive toggle) */ html[data-skin="ui"] .win__bar{ justify-content: flex-start !important; gap: 10px; } html[data-skin="ui"] .win__title{ flex: 1 1 auto; min-width: 0; } html[data-skin="ui"] #winMax{ margin-left: auto; } html[data-skin="ui"] #winClose{ margin-left: 8px; } html[data-skin="ui"] .win__max{ position: relative; width: 44px; min-width: 44px; padding: 0 !important; color: transparent !important; text-shadow: none !important; } html[data-skin="ui"] .win__max::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-image: var(--ic-expand); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; pointer-events: none; } html[data-skin="ui"] .win__max[aria-pressed="true"]::before{ opacity: .75; } html[data-skin="ui"] .win__close::before, html[data-skin="ui"] #inspectClose::before, html[data-skin="ui"] .airlock__close::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-image: var(--ic-close); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; pointer-events: none; } /* Inspector previous/next (replace ‹ ›) */ html[data-skin="ui"] #inspectPrev, html[data-skin="ui"] #inspectNext{ position: relative; color: transparent !important; text-shadow: none !important; min-width: 44px; } html[data-skin="ui"] #inspectPrev::before, html[data-skin="ui"] #inspectNext::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; pointer-events: none; } html[data-skin="ui"] #inspectPrev::before{ background-image: var(--ic-prev); } html[data-skin="ui"] #inspectNext::before{ background-image: var(--ic-next); } /* HUD collapse toggle (replace ▾ / ▴) */ html[data-skin="ui"] #hudToggle{ position: relative; color: transparent !important; text-shadow: none !important; width: 44px; } html[data-skin="ui"] #hudToggle::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-image: var(--ic-caret); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; pointer-events: none; transform: rotate(90deg); /* default: down */ } /* When collapsed (aria-expanded=false), point up */ html[data-skin="ui"] #hudToggle[aria-expanded="false"]::before{ transform: rotate(-90deg); } /* HUD Next: keep text, add step icon */ html[data-skin="ui"] #hudNext{ position: relative; padding-right: 46px !important; } html[data-skin="ui"] #hudNext::after{ content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background-image: var(--ic-step); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; pointer-events: none; } /* Audio: keep switch on left (pt2), add speaker state on right */ html[data-skin="ui"] #audioToggle{ position: relative; padding-right: 54px !important; } html[data-skin="ui"] #audioToggle::after{ content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 16px; margin-top: -8px; background-image: var(--ic-audio-off); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .95; pointer-events: none; } html[data-skin="ui"] #audioToggle[aria-pressed="true"]::after{ background-image: var(--ic-audio-on); } /* ----------------------------------------------------------- Station Log — compact + topbar dock (desktop) - JS adds .hud--topbar when >= 961px and positions HUD between brand + Modules button ----------------------------------------------------------- */ @media (min-width: 961px){ html[data-skin="ui"] #hud.hud--topbar{ /* Ensure Broadcast Station dropdown layers above module console windows */ z-index: 120; box-shadow: none !important; /* slimmer frame for the topbar strip */ border: 10px solid transparent !important; border-image-source: var(--ui-frame) !important; border-image-slice: 72 !important; border-image-repeat: stretch !important; border-image-width: 10 !important; padding: 0 10px !important; background-color: rgba(8,10,14,.35) !important; background-image: var(--ui-grid) !important; background-repeat: repeat !important; background-size: 454px 337px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: visible; } /* Ticker row: label + live log + caret */ html[data-skin="ui"] #hud.hud--topbar .hud__row{ height: 100%; align-items: center; gap: 12px; } html[data-skin="ui"] #hud.hud--topbar .hud__label{ font-size: .82em; letter-spacing: .20em; white-space: nowrap; } html[data-skin="ui"] #hud.hud--topbar #hudLog{ flex: 1 1 auto; min-width: 0; margin: 0; opacity: .90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; } html[data-skin="ui"] #hud.hud--topbar .hud__rowBtns{ display: flex; gap: 8px; align-items: center; } html[data-skin="ui"] #hud.hud--topbar #hudToggle{ min-height: 34px; height: 34px; width: 42px; } /* Dropdown panel (actions) */ html[data-skin="ui"] #hud.hud--topbar #hudBody{ position: absolute; top: calc(100% + 10px); right: 0; left: auto; width: min(520px, 56vw); margin: 0 !important; border: 14px solid transparent; border-image-source: var(--ui-frame); border-image-slice: 72; border-image-repeat: stretch; border-image-width: 14; background-color: rgba(8,10,14,.82); background-image: var(--ui-grid); background-repeat: repeat; background-size: 454px 337px; box-shadow: 0 20px 60px rgba(0,0,0,.55); } html[data-skin="ui"] #hud.hud--topbar #hudBody[hidden]{ display: none !important; } } /* ----------------------------------------------------------- Broadcast Station layering - Requirement: whenever Broadcast Station opens, it must sit above any console panel. - Simplest + stable: keep HUD above .win stacking layer. ----------------------------------------------------------- */ html[data-skin="ui"] .hud{ z-index: 120 !important; } @media (min-width: 961px){ html[data-skin="ui"] #hud.hud--topbar #hudBody{ z-index: 130; } } /* ----------------------------------------------------------- Station Log — slightly slimmer on mobile ----------------------------------------------------------- */ @media (max-width: 960px){ html[data-skin="ui"] #hud{ border-width: 12px !important; border-image-width: 12 !important; padding: 8px 10px !important; } html[data-skin="ui"] #hud .hud__btn, html[data-skin="ui"] #hud .hud__icon{ min-height: 34px; height: 34px; } html[data-skin="ui"] #hud .hud__icon{ width: 40px; } } /* ----------------------------------------------------------- Station Log — sci‑fi pale neon green (text only) ----------------------------------------------------------- */ html[data-skin="ui"]{ --hud-neon: rgba(182, 255, 195, .92); --hud-neon-glow: rgba(182, 255, 195, .25); } html[data-skin="ui"] #hud .hud__label, html[data-skin="ui"] #hud #hudLog, html[data-skin="ui"] #hud #hudLog .hud__time, html[data-skin="ui"] #hud #hudLog .hud__sep, html[data-skin="ui"] #hud #hudLog .hud__msg{ color: var(--hud-neon) !important; text-shadow: 0 0 10px var(--hud-neon-glow); } html[data-skin="ui"] #hud #hudLog .hud__sep{ opacity: .55; } html[data-skin="ui"] #hud #hudLog .hud__time{ letter-spacing: .14em; } /* ----------------------------------------------------------- Typography balance (MGS vs Practa) - MGS fonts read smaller; scale them up slightly so the mix feels 50/50. ----------------------------------------------------------- */ html[data-skin="ui"] body{ font-size: 16.5px; /* global bump (MGS reads smaller than Practa) */ line-height: 1.2; } /* Reduce Practa-only UI elements a touch so they don't overpower */ html[data-skin="ui"] .btn, html[data-skin="ui"] .chip, html[data-skin="ui"] .legendBtn, html[data-skin="ui"] .win__close, html[data-skin="ui"] .win__max, html[data-skin="ui"] .hud__btn, html[data-skin="ui"] .hud__icon, html[data-skin="ui"] .inspect__actions button{ font-size: .93em; } /* Brand clarity: make LIBERTALIA HQ (MGS) slightly larger */ html[data-skin="ui"] .brand__title{ font-size: 16px; line-height: 1.05; } html[data-skin="ui"] .brand__sub{ font-size: 12px; } /* Desktop topbar ticker: keep it readable */ @media (min-width: 961px){ html[data-skin="ui"] #hud.hud--topbar #hudLog{ font-size: 15px; } } /* =========================================================== HOTFIX: MGS visibility / sizing Goal: MGS1 fonts read smaller than Practa. Scale MGS surfaces up without inflating Practa-heavy buttons/chips. (Overrides live at end of file.) =========================================================== */ html[data-skin="ui"]{ --mgs-scale: 1.28; /* stronger, visibly different */ } /* Top-left brand: make "LIBERTALIA HQ" clearer */ html[data-skin="ui"] .topbar .brand__title{ font-family: var(--font-hud) !important; font-size: calc(14px * var(--mgs-scale)) !important; letter-spacing: .18em; line-height: 1.05; } /* Keep subline a touch smaller so hierarchy stays clean */ html[data-skin="ui"] .topbar .brand__sub{ font-size: 12px !important; letter-spacing: .12em; } /* Station Log / HUD surfaces (covers both old bottom HUD and new docked ticker) */ html[data-skin="ui"] .hud__label, html[data-skin="ui"] #hud .hud__label{ font-size: calc(11px * var(--mgs-scale)) !important; letter-spacing: .22em; } html[data-skin="ui"] .hud__log, html[data-skin="ui"] #hudLog, html[data-skin="ui"] #hud #hudLog, html[data-skin="ui"] .hud__msg{ font-size: calc(12px * var(--mgs-scale)) !important; line-height: 1.15 !important; letter-spacing: .10em; } /* General body copy that uses MGS */ html[data-skin="ui"] .win__body, html[data-skin="ui"] .legend__hint, html[data-skin="ui"] .airlock__body, html[data-skin="ui"] .inspect__body, html[data-skin="ui"] .txList, html[data-skin="ui"] .txItem{ font-size: calc(13px * var(--mgs-scale)) !important; line-height: 1.18 !important; } /* Practa-heavy UI elements stay readable but don't dominate */ html[data-skin="ui"] .btn, html[data-skin="ui"] .chip, html[data-skin="ui"] .legendBtn, html[data-skin="ui"] .hud__btn{ font-size: 13px !important; } /* Obvious visual confirm (subtle): brand title glow slightly stronger */ html[data-skin="ui"] .topbar .brand__title{ text-shadow: 0 0 10px rgba(150,255,200,.18); } /* ========================= Broadcast Station (Radio + Trash+) Additive layer for Station Log expanded panel ========================= */ .broadcast-station { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); } .broadcast-station__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .broadcast-station__title { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; white-space: nowrap; } .broadcast-station__modes { display: inline-flex; gap: 6px; } .bs-btn { appearance: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.18); color: inherit; font: inherit; padding: 6px 10px; border-radius: 10px; cursor: pointer; line-height: 1; } .bs-btn[aria-pressed="true"] { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); } .bs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .bs-field { display: grid; gap: 4px; min-width: 200px; flex: 1 1 240px; } .bs-label { font-size: 11px; opacity: 0.8; } .bs-select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.22); color: inherit; font: inherit; } .bs-controls { display: inline-flex; gap: 6px; align-items: center; } .bs-status { font-size: 11px; opacity: 0.8; } .bs-now { display: flex; gap: 12px; align-items: center; margin-top: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; background: rgba(0,0,0,0.16); line-height: 1.25; } .bs-seek { width: 100%; accent-color: currentColor; } .bs-videoWrap { margin-top: 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.22); } .bs-video { display: block; width: 100%; height: auto; max-height: 320px; /* stability-first, no viewport units */ } .bs-hint { font-size: 11px; opacity: 0.75; margin-top: 6px; } .bs-thumbWrap { display: flex; gap: 10px; align-items: center; } .bs-thumb { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.22); flex: 0 0 auto; } /* Broadcast Station - Now Playing block */ .bs-nowText { display: grid; gap: 3px; min-width: 0; } .bs-nowKicker { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .bs-nowLine1 { font-size: 12px; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bs-nowLine2 { font-size: 11px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bs-nowLine3 { font-size: 11px; opacity: 0.8; } /* Trash+ monitor skin */ .bs-videoWrap { position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 0 18px rgba(0,255,200,0.10); } .bs-videoWrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.00) 4px ); opacity: 0.10; mix-blend-mode: overlay; } .bs-videoWrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.40) 100%); opacity: 0.85; } .bs-video { background: #000; filter: contrast(1.08) brightness(1.03) saturate(0.95); } /* ----------------------------------------------------------- Codex immersive: expand console over the map (desktop) ----------------------------------------------------------- */ @media (min-width: 961px){ html[data-skin="ui"] body[data-win-max="1"] .winOverlay{ inset: calc(var(--topbar-h, 64px) + 12px) calc(var(--desktop-right-panel) + 12px) 12px 12px; } html[data-skin="ui"] body[data-win-max="1"] .win{ left: 12px; right: calc(var(--desktop-right-panel) + 12px); top: calc(var(--topbar-h, 64px) + 12px); bottom: 12px; width: auto; max-height: none; } html[data-skin="ui"] body[data-win-max="1"] .win__body{ max-height: calc(100% - 54px); } html[data-skin="ui"] body[data-win-max="1"][data-win="open"] .win{ transform-origin: 100% 100%; animation: winExpand 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } } @keyframes winExpand{ from{ transform: translate(24px, 24px) scale(0.90); opacity: 0.0; } to{ transform: translate(0,0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce){ html[data-skin="ui"] body[data-win-max="1"][data-win="open"] .win{ animation: none !important; } } /* ----------------------------------------------------------- Transmission Console — richer relay cards ----------------------------------------------------------- */ html[data-skin="ui"] .txConsole{ display: grid; gap: 14px; } html[data-skin="ui"] .txList{ display: grid; gap: 12px; } html[data-skin="ui"] .txItem{ display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 14px; align-items: stretch; width: 100%; min-width: 0; padding: 14px; border-radius: 18px; border: 1px solid rgba(120,255,232,.18); background: linear-gradient(180deg, rgba(10,18,24,.80), rgba(6,11,16,.88)), var(--ui-grid); background-repeat: no-repeat, repeat; background-size: auto, 454px 337px; box-shadow: inset 0 0 0 1px rgba(180,255,246,.06), 0 0 0 1px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.24); text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } html[data-skin="ui"] button.txItem{ appearance: none; -webkit-appearance: none; color: inherit; font: inherit; cursor: pointer; } html[data-skin="ui"] .txItem:hover, html[data-skin="ui"] .txItem:focus-visible{ transform: translateY(-1px); border-color: rgba(120,255,232,.42); box-shadow: inset 0 0 0 1px rgba(180,255,246,.08), 0 0 20px rgba(68,255,226,.10), 0 14px 30px rgba(0,0,0,.28); } html[data-skin="ui"] .txThumb{ position: relative; width: 132px; min-height: 94px; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.22); box-shadow: inset 0 0 0 1px rgba(0,255,200,.08); } html[data-skin="ui"] .txThumb::after{ content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.56)); pointer-events: none; } html[data-skin="ui"] .txThumb img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.96) contrast(1.06); } html[data-skin="ui"] .txThumb--blank{ display: flex; align-items: center; justify-content: center; background: rgba(2,10,13,0.88); } html[data-skin="ui"] .txThumbMark{ position: absolute; inset: 0; background-image: var(--ui-grid); background-repeat: repeat; background-size: 454px 337px; opacity: 0.22; } html[data-skin="ui"] .txThumbText{ position: relative; z-index: 1; padding: 0 10px; text-align: center; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(214,255,247,.90); text-shadow: 0 0 12px rgba(91,255,224,.18); } html[data-skin="ui"] .txMain{ min-width: 0; display: grid; gap: 10px; } html[data-skin="ui"] .txHead, html[data-skin="ui"] .txFoot, html[data-skin="ui"] .txTitleRow{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } html[data-skin="ui"] .txLead, html[data-skin="ui"] .txRoute, html[data-skin="ui"] .txAction{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(191,246,237,.72); } html[data-skin="ui"] .txRoute, html[data-skin="ui"] .txAction{ text-align: right; } html[data-skin="ui"] .txTitle{ min-width: 0; font-size: 1.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(235,255,249,.96); } html[data-skin="ui"] .txBadge{ flex: 0 0 auto; padding: 6px 10px 5px; border-radius: 999px; border: 1px solid rgba(120,255,232,.22); background: rgba(0,0,0,.24); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(194,255,244,.86); } html[data-skin="ui"] .txCap{ color: rgba(227,241,239,.78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-skin="ui"] .txPills{ display: flex; flex-wrap: wrap; gap: 8px; } html[data-skin="ui"] .txPill{ padding: 6px 10px 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(215,234,231,.70); } html[data-skin="ui"] .txAction{ white-space: nowrap; color: rgba(146,255,228,.88); } html[data-skin="ui"] .txEmpty{ padding: 18px 16px; border-radius: 16px; border: 1px solid rgba(120,255,232,.16); background: rgba(7,12,18,.72); } @media (max-width: 700px){ html[data-skin="ui"] .txItem{ grid-template-columns: 86px minmax(0,1fr); padding: 12px; gap: 12px; } html[data-skin="ui"] .txThumb{ width: 86px; min-height: 72px; } html[data-skin="ui"] .txHead, html[data-skin="ui"] .txFoot, html[data-skin="ui"] .txTitleRow{ display: grid; gap: 8px; } html[data-skin="ui"] .txRoute, html[data-skin="ui"] .txAction{ text-align: left; } html[data-skin="ui"] .txTitle{ white-space: normal; overflow: visible; text-overflow: unset; } } /* ----------------------------------------------------------- Intro Gate (Phase 1) - Full-screen dialogue overlay - Click triggers bit-fade reveal ----------------------------------------------------------- */ html:not(.libertalia-booted):not(.intro-bypass){ background: #05080c; } html:not(.libertalia-booted):not(.intro-bypass) body{ background: #05080c !important; } html:not(.libertalia-booted):not(.intro-bypass) .topbar, html:not(.libertalia-booted):not(.intro-bypass) .layout, html:not(.libertalia-booted):not(.intro-bypass) .legend, html:not(.libertalia-booted):not(.intro-bypass) .statusBar, html:not(.libertalia-booted):not(.intro-bypass) .hud, html:not(.libertalia-booted):not(.intro-bypass) .hudOpen, html:not(.libertalia-booted):not(.intro-bypass) .inspect, html:not(.libertalia-booted):not(.intro-bypass) .win{ visibility: hidden !important; } .introGate[hidden]{ display:none !important; } .introGate{ position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 18px; /* Sealed-door vibe: do NOT show the station behind until the "doors" open */ background: radial-gradient(120% 120% at 50% 50%, rgba(0,255,200,.06), transparent 55%), linear-gradient(180deg, #091015 0%, #04080c 58%, #020406 100%); overflow: hidden; } /* Door panels */ .introGate::before, .introGate::after{ content:""; position:absolute; top:0; bottom:0; width: 50.5%; background: radial-gradient(120% 120% at 25% 20%, rgba(0,255,200,.14), transparent 45%), radial-gradient(120% 120% at 80% 70%, rgba(0,180,255,.10), transparent 52%), repeating-linear-gradient(180deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 6px, rgba(255,255,255,.06) 7px); box-shadow: 0 0 0 1px rgba(0,255,200,.10) inset, 0 0 140px rgba(0,0,0,.92) inset, 0 0 0 1px rgba(255,255,255,.03); transition: transform 900ms cubic-bezier(.2,.9,.2,1), filter 900ms cubic-bezier(.2,.9,.2,1), opacity 900ms ease; filter: saturate(1.05) contrast(1.02); pointer-events: none; z-index: 0; } .introGate::before{ left: 0; border-right: 1px solid rgba(0,255,200,.16); } .introGate::after{ right: 0; border-left: 1px solid rgba(0,255,200,.16); } .introGate__panel{ position: relative; z-index: 1; width: min(760px, calc(100% - 28px)); border-radius: 18px; border: 1px solid rgba(182,255,195,.22); background: linear-gradient(180deg, rgba(6,14,13,.92) 0%, rgba(3,8,10,.88) 100%); backdrop-filter: blur(12px); padding: 46px 22px 58px; text-align: left; cursor: pointer; color: inherit; font: inherit; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,255,200,.12) inset, 0 22px 80px rgba(0,0,0,.62), 0 0 30px rgba(0,255,200,.08); } .introGate__panel::before{ content:"ENTRY PROTOCOL // AIRLOCK 01"; position:absolute; left: 18px; right: 18px; top: 14px; height: 18px; border-bottom: 1px solid rgba(182,255,195,.16); padding-bottom: 10px; pointer-events:none; font-family: var(--font-hud); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(182,255,195,.82); } .introGate__title{ font-family: var(--font-stamp); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.08; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px 0; text-shadow: 0 0 18px rgba(182,255,195,.14); } .introGate__sub{ font-family: var(--font-ui); font-size: 17px; opacity: .88; line-height: 1.5; letter-spacing: .04em; margin: 0; max-width: 34ch; } .introGate__panel::after{ content:"PRESS TO ENTER"; position:absolute; left: 22px; right: 22px; bottom: 18px; display:flex; align-items:center; justify-content:flex-end; min-height: 20px; font-family: var(--font-hud); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(182,255,195,.78); opacity: .82; animation: introPromptPulse 1.8s ease-in-out infinite; } @keyframes introPromptPulse{ 0%,100%{ opacity:.52; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-1px); } } /* Door open + panel fade */ .introGate.introGate--exit::before{ transform: translateX(-105%); opacity:.94; } .introGate.introGate--exit::after{ transform: translateX(105%); opacity:.94; } .introGate.introGate--exit .introGate__panel{ opacity: 0; transform: translateY(10px) scale(.975); filter: blur(1px); transition: opacity 320ms ease, transform 360ms ease, filter 320ms ease; } .introGate.introGate--exit{ background: rgba(2,6,9,.18); transition: background 900ms ease; } /* --- Broadcast Station: Log Entry target line --- */ .bs-logTarget{ margin-top: 6px; font-size: 12px; letter-spacing: .08em; opacity: .7; } /* --- Codex Signals: thumb card with Log Entry button --- */ .thumbCard{ display:flex; flex-direction:column; gap:10px; } .thumbCard .thumb{ width:100%; } .thumbLog{ height: 38px; border-radius: 999px; border: 1px solid rgba(120,255,232,.35); background: rgba(0,0,0,.25); color: rgba(200,255,244,.92); font-family: inherit; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; display:inline-flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1px rgba(0,255,200,.08), 0 0 16px rgba(0,255,200,.12); } .thumbLog:hover, .thumbLog:focus-visible{ border-color: rgba(120,255,232,.7); box-shadow: 0 0 16px rgba(0,255,200,.18), inset 0 0 0 1px rgba(120,255,232,.22); } /* ----------------------------------------------------------- Codex Lore rail — sequential video dossiers ----------------------------------------------------------- */ html[data-skin="ui"] .loreRail{ display: grid; gap: 12px; } html[data-skin="ui"] .loreIntro{ display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(120,255,232,.16); background: linear-gradient(180deg, rgba(10,18,24,.78), rgba(6,11,16,.86)); box-shadow: inset 0 0 0 1px rgba(180,255,246,.05); } html[data-skin="ui"] .loreIntro__kicker, html[data-skin="ui"] .loreCue, html[data-skin="ui"] .loreBadge, html[data-skin="ui"] .loreTrail, html[data-skin="ui"] .loreAction{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } html[data-skin="ui"] .loreIntro__kicker{ color: rgba(198,255,243,.84); } html[data-skin="ui"] .loreIntro__text{ color: rgba(224,239,236,.76); } html[data-skin="ui"] .loreItem{ display: grid; grid-template-columns: 60px 150px minmax(0,1fr); gap: 14px; align-items: center; width: 100%; padding: 14px; border-radius: 18px; border: 1px solid rgba(120,255,232,.18); background: linear-gradient(180deg, rgba(10,18,24,.82), rgba(6,11,16,.90)), var(--ui-grid); background-repeat: no-repeat, repeat; background-size: auto, 454px 337px; box-shadow: inset 0 0 0 1px rgba(180,255,246,.06), 0 0 0 1px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.24); text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } html[data-skin="ui"] button.loreItem{ appearance: none; -webkit-appearance: none; color: inherit; font: inherit; cursor: pointer; } html[data-skin="ui"] .loreItem:hover, html[data-skin="ui"] .loreItem:focus-visible{ transform: translateY(-1px); border-color: rgba(120,255,232,.42); box-shadow: inset 0 0 0 1px rgba(180,255,246,.08), 0 0 20px rgba(68,255,226,.10), 0 14px 30px rgba(0,0,0,.28); } html[data-skin="ui"] .loreItem--start{ border-color: rgba(152,255,232,.34); box-shadow: inset 0 0 0 1px rgba(180,255,246,.08), 0 0 20px rgba(68,255,226,.08), 0 14px 30px rgba(0,0,0,.28); } html[data-skin="ui"] .loreSeq{ width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; border: 1px solid rgba(120,255,232,.20); background: rgba(0,0,0,.20); color: rgba(224,255,249,.92); font-size: 1.35em; letter-spacing: .12em; box-shadow: inset 0 0 0 1px rgba(180,255,246,.04); } html[data-skin="ui"] .loreThumb{ position: relative; width: 150px; min-height: 90px; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.22); box-shadow: inset 0 0 0 1px rgba(0,255,200,.08); } html[data-skin="ui"] .loreThumb::after{ content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.52)); pointer-events: none; } html[data-skin="ui"] .loreThumb img{ width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.96) contrast(1.04); } html[data-skin="ui"] .loreMain{ min-width: 0; display: grid; gap: 8px; } html[data-skin="ui"] .loreTop, html[data-skin="ui"] .loreFoot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } html[data-skin="ui"] .loreCue{ color: rgba(191,246,237,.72); } html[data-skin="ui"] .loreBadge{ flex: 0 0 auto; padding: 6px 10px 5px; border-radius: 999px; border: 1px solid rgba(120,255,232,.22); background: rgba(0,0,0,.24); color: rgba(194,255,244,.86); } html[data-skin="ui"] .loreTitle{ min-width: 0; font-size: 1.08em; color: rgba(235,255,249,.96); } html[data-skin="ui"] .loreSummary{ color: rgba(227,241,239,.78); } html[data-skin="ui"] .loreTrail{ color: rgba(191,246,237,.68); } html[data-skin="ui"] .loreAction{ white-space: normal; text-align: right; overflow-wrap: anywhere; color: rgba(146,255,228,.88); } html[data-skin="ui"] .loreTop, html[data-skin="ui"] .loreFoot{ flex-wrap: wrap; align-items: flex-start; } html[data-skin="ui"] .loreCue, html[data-skin="ui"] .loreBadge, html[data-skin="ui"] .loreTrail, html[data-skin="ui"] .loreAction, html[data-skin="ui"] .loreTitle, html[data-skin="ui"] .dockCard__v, html[data-skin="ui"] .dockLore__text{ min-width: 0; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 700px){ html[data-skin="ui"] .loreItem{ grid-template-columns: 52px 88px minmax(0,1fr); gap: 12px; padding: 12px; } html[data-skin="ui"] .loreSeq{ width: 52px; height: 52px; border-radius: 14px; font-size: 1.16em; } html[data-skin="ui"] .loreThumb{ width: 88px; min-height: 72px; } html[data-skin="ui"] .loreTop, html[data-skin="ui"] .loreFoot{ display: grid; gap: 8px; } } /* Hotspot icon pass */ html[data-skin="ui"] .hotspot{ --hotspot-size: 80px; width: var(--hotspot-size); height: var(--hotspot-size); border: 0; background: transparent; backdrop-filter: none; box-shadow: none; overflow: visible; isolation: isolate; } html[data-skin="ui"] .hotspot::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid rgba(137,255,233,.24); background: radial-gradient(circle, rgba(0,186,204,.16) 0%, rgba(0,0,0,.10) 58%, rgba(0,0,0,0) 72%); box-shadow: 0 0 0 0 rgba(18,220,255,0), inset 0 0 18px rgba(18,220,255,.10); transition: border-color .14s ease, box-shadow .18s ease, background .14s ease; } html[data-skin="ui"] .hotspot::after{ display: none; } html[data-skin="ui"] .hotspot__img{ position: relative; z-index: 2; display: block; width: calc(var(--hotspot-size) * 0.92); height: auto; margin: 0 auto; pointer-events: none; user-select: none; filter: drop-shadow(0 0 12px rgba(18,220,255,.15)) drop-shadow(0 0 26px rgba(0,0,0,.38)); transform: translateY(0); transition: transform .14s ease, filter .14s ease, opacity .14s ease; } html[data-skin="ui"] .hotspot[data-module="codex"] .hotspot__img{ width: calc(var(--hotspot-size) * 0.82); } html[data-skin="ui"] .hotspot[data-module="cargo"] .hotspot__img{ width: calc(var(--hotspot-size) * 0.88); } html[data-skin="ui"] .hotspot[data-module="fuel"] .hotspot__img{ width: calc(var(--hotspot-size) * 0.98); } html[data-skin="ui"] .hotspot:hover, html[data-skin="ui"] .hotspot:focus-visible, html[data-skin="ui"] .hotspot:active{ background: transparent; border: 0; box-shadow: none; } html[data-skin="ui"] .hotspot:hover::before, html[data-skin="ui"] .hotspot:focus-visible::before{ border-color: rgba(149,255,235,.54); background: radial-gradient(circle, rgba(0,196,222,.22) 0%, rgba(0,0,0,.10) 56%, rgba(0,0,0,0) 74%); box-shadow: 0 0 0 8px rgba(18,220,255,.10), 0 0 0 18px rgba(18,220,255,.06), inset 0 0 18px rgba(18,220,255,.18); } html[data-skin="ui"] .hotspot:hover .hotspot__img, html[data-skin="ui"] .hotspot:focus-visible .hotspot__img{ transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 0 16px rgba(18,220,255,.24)) drop-shadow(0 0 32px rgba(0,0,0,.42)); } /* =========================================================== Draft overpaint pass — Wallpaper Menu + Atompunk hybrid Goal: keep existing skeleton, add stronger environmental identity. =========================================================== */ html[data-skin="ui"]{ --ui-bg: url("assets/ui-next/body-backdrop.webp"); } html[data-skin="ui"] body::before{ opacity: .16; filter: saturate(.88) brightness(.7); } html[data-skin="ui"] body::after{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(80% 60% at 50% 0%, rgba(255,120,60,.05), transparent 55%), radial-gradient(90% 90% at 10% 20%, rgba(0,170,255,.05), transparent 50%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)); } html[data-skin="ui"] .topbar .brand{ position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 26px 6px 14px; isolation: isolate; } html[data-skin="ui"] .topbar .brand::before{ content:""; position:absolute; left:-10px; right:-18px; top:-10px; bottom:-12px; background: url("assets/ui-next/topbar-plate.png") left center / 100% 100% no-repeat; opacity:.82; pointer-events:none; z-index:-1; filter: drop-shadow(0 10px 22px rgba(0,0,0,.34)); } html[data-skin="ui"] .topbar .brand__title{ text-shadow: 0 0 10px rgba(150,255,200,.18), 0 0 30px rgba(255,140,72,.08); } html[data-skin="ui"] .topbar .brand__sub{ color: rgba(210,240,228,.82) !important; } html[data-skin="ui"] .legend__head, html[data-skin="ui"] .win__bar, html[data-skin="ui"] .inspect__bar, html[data-skin="ui"] .hud__row{ position: relative; overflow: hidden; } html[data-skin="ui"] .legend__head::before{ content:""; position:absolute; right:8px; top:50%; width: 220px; height: 72px; transform: translateY(-50%); background: url("assets/ui-next/legend-plate.png") right center / contain no-repeat; opacity: .28; pointer-events:none; } html[data-skin="ui"] .win__bar::before, html[data-skin="ui"] .inspect__bar::before, html[data-skin="ui"] .hud__row::before{ content:""; position:absolute; right:10px; top:50%; width: 170px; height: 80px; transform: translateY(-50%); background: url("assets/ui-next/console-ornament.png") right center / contain no-repeat; opacity: .16; pointer-events:none; } html[data-skin="ui"] .statusBar{ position: relative; min-height: 44px; padding: 12px 18px 12px 22px; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,246,240,.86); overflow: hidden; } html[data-skin="ui"] .statusBar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:min(560px, 100%); background: url("assets/ui-next/status-field.png") left center / 100% 100% no-repeat; opacity:.86; pointer-events:none; } html[data-skin="ui"] .statusBar::after{ content:""; position:absolute; left:18px; top:50%; width:14px; height:28px; transform:translateY(-50%); background: url("assets/ui-next/indicator-slab.png") center / contain no-repeat; opacity:.78; pointer-events:none; } html[data-skin="ui"] .statusBar > *{ position: relative; z-index: 1; padding-left: 18px; } /* module thumb seals in legend */ html[data-skin="ui"] .legendBtn{ position: relative; overflow: hidden; padding-right: 76px !important; } html[data-skin="ui"] .legendBtn::after{ content:""; position:absolute; right:10px; top:50%; width:52px; height:52px; transform:translateY(-50%); border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.28); opacity:.92; } html[data-skin="ui"] .legendBtn[data-module="dock"]::after{ background-image: url("assets/ui-next/seal-dock.webp"); } html[data-skin="ui"] .legendBtn[data-module="codex"]::after{ background-image: url("assets/ui-next/seal-codex.webp"); } html[data-skin="ui"] .legendBtn[data-module="cargo"]::after{ background-image: url("assets/ui-next/seal-cargo.webp"); } html[data-skin="ui"] .legendBtn[data-module="fuel"]::after{ background-image: url("assets/ui-next/seal-fuel.webp"); } @media (max-width: 960px){ html[data-skin="ui"] .legendBtn[data-module="dock"]::after{ background-image: url("assets/ui-next/seal-dock-mobile.webp"); } html[data-skin="ui"] .legendBtn[data-module="codex"]::after{ background-image: url("assets/ui-next/seal-codex-mobile.webp"); } html[data-skin="ui"] .legendBtn[data-module="cargo"]::after{ background-image: url("assets/ui-next/seal-cargo-mobile.webp"); } html[data-skin="ui"] .legendBtn[data-module="fuel"]::after{ background-image: url("assets/ui-next/seal-fuel-mobile.webp"); } } /* module-specific console ambience */ html[data-skin="ui"] .win__body{ position: relative; isolation: isolate; } html[data-skin="ui"] .win__body::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.26; background: linear-gradient(180deg, rgba(3,7,10,.68), rgba(5,8,12,.86)), var(--module-console-bg, none) center center / cover no-repeat; } html[data-skin="ui"] .win__body > *{ position: relative; z-index: 1; } html[data-skin="ui"] body[data-mod="dock"] .win__body{ --module-console-bg: url("assets/ui-next/module-dock.webp"); } html[data-skin="ui"] body[data-mod="codex"] .win__body{ --module-console-bg: url("assets/ui-next/module-codex.webp"); } html[data-skin="ui"] body[data-mod="cargo"] .win__body{ --module-console-bg: url("assets/ui-next/module-cargo.webp"); } html[data-skin="ui"] body[data-mod="fuel"] .win__body{ --module-console-bg: url("assets/ui-next/module-fuel.webp"); } /* intro gate: more urban portal, still readable */ .introGate{ background: radial-gradient(120% 120% at 50% 10%, rgba(255,100,70,.10), transparent 40%), radial-gradient(120% 120% at 20% 80%, rgba(0,180,255,.08), transparent 44%), linear-gradient(180deg, rgba(3,7,10,.62), rgba(2,4,6,.92)), url("assets/ui-next/intro-panel.webp") center center / cover no-repeat; } .introGate::before, .introGate::after{ background: linear-gradient(180deg, rgba(4,8,10,.74), rgba(2,5,7,.92)), repeating-linear-gradient(180deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 6px, rgba(255,255,255,.04) 7px) !important; } .introGate__panel{ background: linear-gradient(180deg, rgba(6,12,14,.84), rgba(2,6,9,.90)), url("assets/ui-next/intro-panel.webp") center center / cover no-repeat; border-color: rgba(234,247,243,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 80px rgba(0,0,0,.66), 0 0 30px rgba(255,145,72,.10); } .introGate__title, .introGate__sub, .introGate__panel::before, .introGate__panel::after{ text-shadow: 0 2px 18px rgba(0,0,0,.55); } @media (max-width: 960px){ html[data-skin="ui"] .topbar .brand{ padding-right: 14px; } html[data-skin="ui"] .topbar .brand::before{ left:-6px; right:-6px; top:-6px; bottom:-8px; opacity:.64; } html[data-skin="ui"] .legend__head::before, html[data-skin="ui"] .win__bar::before, html[data-skin="ui"] .inspect__bar::before, html[data-skin="ui"] .hud__row::before{ opacity:.10; width: 124px; } html[data-skin="ui"] .legendBtn{ padding-right: 62px !important; } html[data-skin="ui"] .legendBtn::after{ width: 42px; height: 42px; right:8px; } .introGate{ background: linear-gradient(180deg, rgba(3,7,10,.72), rgba(2,4,6,.94)), url("assets/ui-next/intro-mobile.webp") center center / cover no-repeat; } .introGate__panel{ padding: 44px 18px 54px; background: linear-gradient(180deg, rgba(7,11,14,.88), rgba(2,6,9,.92)), url("assets/ui-next/intro-mobile.webp") center center / cover no-repeat; } html[data-skin="ui"] .statusBar::before{ width:100%; opacity:.76; } } /* =========================================================== Phase 2 draft — module scene switcher + stronger Atompunk HUD =========================================================== */ html[data-skin="ui"] .mapFigure{ background: linear-gradient(180deg, rgba(2,5,7,.28), rgba(3,6,10,.54)), var(--scene-bg, url("assets/ui-next/scene-home.webp")) center center / cover no-repeat, rgba(0,0,0,.22); } html[data-skin="ui"] body[data-scene="home"]{ --scene-bg: url("assets/ui-next/scene-home.webp"); } html[data-skin="ui"] body[data-scene="dock"]{ --scene-bg: url("assets/ui-next/scene-dock.webp"); } html[data-skin="ui"] body[data-scene="codex"]{ --scene-bg: url("assets/ui-next/scene-codex.webp"); } html[data-skin="ui"] body[data-scene="cargo"]{ --scene-bg: url("assets/ui-next/scene-cargo.webp"); } html[data-skin="ui"] body[data-scene="fuel"]{ --scene-bg: url("assets/ui-next/scene-fuel.webp"); } html[data-skin="ui"] #hqMap{ transition: opacity .38s ease, transform .38s ease, filter .38s ease; } html[data-skin="ui"] body[data-scene="home"] #hqMap{ opacity: .92; filter: saturate(.92) contrast(1.04) brightness(.98); } html[data-skin="ui"] body[data-scene]:not([data-scene="home"]) #hqMap, html[data-skin="ui"] body[data-scene]:not([data-scene="home"]) .mapFigure picture{ opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.025); filter: blur(1px) saturate(.82); } html[data-skin="ui"] body[data-scene]:not([data-scene="home"]) .mapFigure::before, html[data-skin="ui"] body[data-scene]:not([data-scene="home"]) .mapFigure::after{ opacity: 0; } html[data-skin="ui"] body[data-scene]:not([data-scene="home"]) .hotspots{ opacity: 0; visibility: hidden; } html[data-skin="ui"] .sceneHotspot{ pointer-events: auto; position: absolute; display: inline-flex; align-items: center; justify-content: flex-start; left: var(--scene-x, 50%); top: var(--scene-y, 50%); transform: translate(-50%, -50%); z-index: 5; min-width: 184px; min-height: 56px; padding: 10px 18px 10px 48px; border: 0 !important; border-radius: 12px; background: linear-gradient(180deg, rgba(8,12,10,.18), rgba(0,0,0,.10)), url("assets/ui-next/module-btn-active.png") center center / 100% 100% no-repeat !important; color: #e8eed9 !important; text-transform: uppercase; letter-spacing: .14em; box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.07) inset; animation: nodePulse 5.2s ease-in-out infinite; } html[data-skin="ui"] .sceneHotspot::before{ content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); background: var(--scene-icon) center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(120,255,160,.2)); } html[data-skin="ui"] .sceneHotspot:hover, html[data-skin="ui"] .sceneHotspot:focus-visible{ transform: translate(-50%, -50%) translateY(-1px); box-shadow: 0 16px 42px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 22px rgba(255,170,60,.16); } html[data-skin="ui"] .sceneHotspot__label{ position:relative; z-index:1; font-size: 11px; line-height: 1.2; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image{ min-width: 0 !important; min-height: 0 !important; width: var(--scene-hotspot-w, 220px) !important; aspect-ratio: var(--scene-hotspot-ratio, 1) !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--scene-hotspot-image) center center / 100% 100% no-repeat !important; box-shadow: none !important; animation: none !important; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image::before{ display: none !important; content: none !important; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image .sceneHotspot__label{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:hover, html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:focus-visible, html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:active{ transform: translate(-50%, -50%) scale(1.015) !important; box-shadow: none !important; filter: drop-shadow(0 0 14px rgba(255, 126, 126, .34)) drop-shadow(0 0 36px rgba(255, 62, 62, .28)); } html[data-skin="ui"] .sceneTextOverlay{ display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; pointer-events:none; z-index:4; opacity:1; transition: opacity .16s ease, filter .16s ease; filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 16px rgba(255, 115, 115, .64)) drop-shadow(0 0 38px rgba(255, 45, 45, .48)); mix-blend-mode: screen; animation: sceneTextBeacon 2.8s ease-in-out infinite; } html[data-skin="ui"] .sceneTextOverlay[hidden]{ display:none !important; } html[data-skin="ui"] .sceneHotspot:is(:hover,:focus-visible,:active) + .sceneTextOverlay{ opacity:1; filter: drop-shadow(0 0 18px rgba(255, 115, 115, .72)) drop-shadow(0 0 42px rgba(255, 45, 45, .52)); } @keyframes sceneTextBeacon{ 0%, 100%{ opacity: .96; filter: drop-shadow(0 0 8px rgba(255, 90, 90, .30)) drop-shadow(0 0 20px rgba(255, 35, 35, .22)); } 50%{ opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 110, 110, .46)) drop-shadow(0 0 30px rgba(255, 40, 40, .34)); } } @media (max-width: 960px){ html[data-skin="ui"] .sceneTextOverlay{ display:none !important; } html[data-skin="ui"] body[data-scene="dock"] .sceneTextOverlay{ object-position: 59% center; } html[data-skin="ui"] body[data-scene="codex"] .sceneTextOverlay{ object-position: 34% center; } html[data-skin="ui"] body[data-scene="cargo"] .sceneTextOverlay{ object-position: 66% center; } html[data-skin="ui"] body[data-scene="fuel"] .sceneTextOverlay{ object-position: 39% center; } } html[data-skin="ui"] #modulesBtn{ min-width: 134px; min-height: 44px; padding: 10px 18px !important; border: 0 !important; background: linear-gradient(180deg, rgba(6,8,9,.22), rgba(0,0,0,.08)), url("assets/ui-next/topbar-btn.png") center center / 100% 100% no-repeat !important; color: #f3e5b4 !important; text-shadow: 0 1px 10px rgba(0,0,0,.38); box-shadow: 0 10px 26px rgba(0,0,0,.26); } html[data-skin="ui"] .legend{ position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(5,10,11,.86), rgba(2,5,7,.94)); } html[data-skin="ui"] .legend::before{ content:""; position:absolute; right:-120px; bottom:-90px; width: 420px; height: 250px; background: url("assets/ui-next/legend-rig.png") center / contain no-repeat; opacity: .14; pointer-events:none; } html[data-skin="ui"] .legend__head{ padding-bottom: 20px; } html[data-skin="ui"] .legend__head::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:16px; background: url("assets/ui-next/hud-gauge.png") center / 100% 100% no-repeat; opacity: .54; pointer-events:none; } html[data-skin="ui"] .legendItem{ position: relative; padding: 3px 0; } html[data-skin="ui"] .legendNum{ position: relative; min-width: 52px; color: rgba(242,228,182,.92) !important; } html[data-skin="ui"] .legendNum::before{ content:""; position:absolute; inset:-6px 0; background: url("assets/ui-next/topbar-btn.png") center / 100% 100% no-repeat; opacity: .62; z-index:-1; } html[data-skin="ui"] .legendBtn{ border: 0 !important; min-height: 82px; padding: 14px 74px 14px 18px !important; background: linear-gradient(180deg, rgba(6,10,8,.16), rgba(0,0,0,.08)), url("assets/ui-next/module-btn-base.png") center center / 100% 100% no-repeat !important; box-shadow: 0 12px 24px rgba(0,0,0,.16); } html[data-skin="ui"] .legendBtn:hover, html[data-skin="ui"] .legendBtn:focus-visible, html[data-skin="ui"] body[data-mod="dock"] .legendBtn[data-module="dock"], html[data-skin="ui"] body[data-mod="codex"] .legendBtn[data-module="codex"], html[data-skin="ui"] body[data-mod="cargo"] .legendBtn[data-module="cargo"], html[data-skin="ui"] body[data-mod="fuel"] .legendBtn[data-module="fuel"]{ background: linear-gradient(180deg, rgba(6,10,8,.12), rgba(0,0,0,.06)), url("assets/ui-next/module-btn-active.png") center center / 100% 100% no-repeat !important; } html[data-skin="ui"] .legendBtn::before{ content:""; position:absolute; left:16px; top:14px; width:18px; height:18px; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 0 8px rgba(120,255,160,.14)); } html[data-skin="ui"] .legendBtn[data-module="dock"]::before{ background-image: url("assets/ui-next/icon-dock.png"); } html[data-skin="ui"] .legendBtn[data-module="codex"]::before{ background-image: url("assets/ui-next/icon-codex.png"); } html[data-skin="ui"] .legendBtn[data-module="cargo"]::before{ background-image: url("assets/ui-next/icon-cargo.png"); } html[data-skin="ui"] .legendBtn[data-module="fuel"]::before{ background-image: url("assets/ui-next/icon-fuel.png"); } html[data-skin="ui"] .legendBtn__title{ padding-left: 28px; color: rgba(244,237,203,.94); } html[data-skin="ui"] .legendBtn__purpose{ padding-left: 28px; color: rgba(210,224,198,.74); } html[data-skin="ui"] .hud{ position: relative; overflow: hidden; } html[data-skin="ui"] .hud::before{ content:""; position:absolute; right:-32px; top:-10px; width: 164px; height: 230px; background: url("assets/ui-next/hud-rig.png") center / contain no-repeat; opacity: .18; pointer-events:none; } html[data-skin="ui"] .hud__row{ padding-bottom: 18px; } html[data-skin="ui"] .hud__row::after{ content:""; position:absolute; left:12px; right:12px; bottom:3px; height: 14px; background: url("assets/ui-next/hud-gauge.png") center / 100% 100% no-repeat; opacity: .48; } html[data-skin="ui"] .hud__body{ position: relative; background: linear-gradient(180deg, rgba(4,8,9,.76), rgba(1,3,5,.82)); } html[data-skin="ui"] .hud__btn{ border: 0 !important; background: linear-gradient(180deg, rgba(6,10,8,.16), rgba(0,0,0,.08)), url("assets/ui-next/topbar-btn.png") center center / 100% 100% no-repeat !important; color: #efe4ba !important; } @media (max-width: 960px){ html[data-skin="ui"] body[data-scene="home"]{ --scene-bg: url("assets/ui-next/scene-home-mobile.webp"); } html[data-skin="ui"] body[data-scene="dock"]{ --scene-bg: url("assets/ui-next/scene-dock-mobile.webp"); } html[data-skin="ui"] body[data-scene="codex"]{ --scene-bg: url("assets/ui-next/scene-codex-mobile.webp"); } html[data-skin="ui"] body[data-scene="cargo"]{ --scene-bg: url("assets/ui-next/scene-cargo-mobile.webp"); } html[data-skin="ui"] body[data-scene="fuel"]{ --scene-bg: url("assets/ui-next/scene-fuel-mobile.webp"); } html[data-skin="ui"] .sceneHotspot{ min-width: 150px; min-height: 50px; padding: 8px 14px 8px 40px; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image{ width: var(--scene-hotspot-w, 36%) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; } html[data-skin="ui"] .sceneHotspot__label{ font-size: 10px; } html[data-skin="ui"] .legend::before{ width: 300px; height: 180px; right: -80px; bottom: -70px; opacity: .10; } html[data-skin="ui"] .legendBtn{ min-height: 74px; padding-right: 62px !important; } html[data-skin="ui"] .legendBtn__title, html[data-skin="ui"] .legendBtn__purpose{ padding-left: 24px; } html[data-skin="ui"] #modulesBtn{ min-width: 116px; } html[data-skin="ui"] .hud::before{ width: 132px; height: 186px; right: -24px; opacity: .14; } } html[data-skin="ui"] .mapFigure[data-scene]:not([data-scene="home"]) picture{ display:none !important; } html[data-skin="ui"] .mapFigure[data-scene]:not([data-scene="home"]) #hqMap{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } html[data-skin="ui"] .mapFigure[data-scene]:not([data-scene="home"]) .hotspots{ display:none !important; } html[data-skin="ui"] .mapFigure[data-scene]:not([data-scene="home"]) .sceneHotspot[hidden]{ display:none !important; } /* 2026-03-13 reset fix: retire HQ image layer and use wallpaper scenes as the visible surface */ html[data-skin="ui"] .mapFigure > picture, html[data-skin="ui"] .mapFigure > #hqMap{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } html[data-skin="ui"] body[data-scene="home"] .hotspots{ display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } html[data-skin="ui"] .mapFigure{ background-position:center center !important; background-size:cover !important; } /* 2026-03-16 mobile red hotspot beacon pass */ @keyframes mobileRedHotspotPulse { 0%,100% { opacity: .72; transform: scale(1); filter: blur(5px) saturate(1.12) brightness(1.02) drop-shadow(0 0 10px rgba(255, 70, 70, .40)) drop-shadow(0 0 24px rgba(255, 30, 30, .28)); } 50% { opacity: .98; transform: scale(1.035); filter: blur(6px) saturate(1.2) brightness(1.08) drop-shadow(0 0 16px rgba(255, 90, 90, .60)) drop-shadow(0 0 34px rgba(255, 35, 35, .44)); } } @media (max-width: 960px){ html[data-skin="ui"] .sceneHotspot.sceneHotspot--image{ position: absolute !important; isolation: isolate; filter: drop-shadow(0 0 8px rgba(255, 90, 90, .30)) drop-shadow(0 0 20px rgba(255, 35, 35, .22)); } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image::after{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--scene-hotspot-image) center center / 100% 100% no-repeat; opacity: .82; transform-origin: center center; animation: mobileRedHotspotPulse 3.2s ease-in-out infinite; mix-blend-mode: screen; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:hover, html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:focus-visible, html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:active{ filter: drop-shadow(0 0 12px rgba(255, 110, 110, .46)) drop-shadow(0 0 30px rgba(255, 40, 40, .34)) !important; } html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:hover::after, html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:focus-visible::after, html[data-skin="ui"] .sceneHotspot.sceneHotspot--image:active::after{ opacity: 1; animation-duration: 1.8s; filter: blur(7px) saturate(1.28) brightness(1.12) drop-shadow(0 0 18px rgba(255, 115, 115, .72)) drop-shadow(0 0 42px rgba(255, 45, 45, .52)); } } /* 2026-03-20 desktop fixed HUD / portrait portal pass */ html[data-skin="ui"] .stationTicker, html[data-skin="ui"] .topbarGhosts{ display: none; } html[data-skin="ui"] .topbarRight{ display: flex; align-items: center; gap: 12px; margin-left: auto; } html[data-skin="ui"] .mapPortalShell{ position: relative; width: 100%; height: 100%; } html[data-skin="ui"] .mapPortalFrame{ display: none; } html[data-skin="ui"] .mapStage{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; background: var(--scene-bg) center center / cover no-repeat; } html[data-skin="ui"] .mapStage picture, html[data-skin="ui"] .mapStage #hqMap{ width: 100%; height: 100%; } html[data-skin="ui"] .mapSceneSurface{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: var(--scene-bg) center center / cover no-repeat; } html[data-skin="ui"] .mapSceneSurface picture, html[data-skin="ui"] .mapSceneSurface #hqMap{ width: 100%; height: 100%; } @media (min-width: 961px){ html[data-skin="ui"] .topbar{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; } html[data-skin="ui"] .stationTicker{ display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; min-height: 74px; padding: 12px 18px; border: 1px solid rgba(185, 226, 255, .18); border-radius: 0; background: linear-gradient(180deg, rgba(8,12,16,.72), rgba(4,8,10,.84)), var(--ui-grid) !important; background-repeat: repeat !important; background-size: 454px 337px !important; box-shadow: inset 0 0 0 1px rgba(130, 210, 255, .08), 0 0 24px rgba(0,0,0,.32); overflow: hidden; } html[data-skin="ui"] .stationTicker__label{ font-family: 'MGS1HUD', var(--font-ui); font-size: 12px; letter-spacing: .22em; color: rgba(185, 232, 208, .88); white-space: nowrap; } html[data-skin="ui"] .stationTicker__text{ min-width: 0; font-size: 12px; color: rgba(185, 232, 208, .88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-skin="ui"] .stationTicker__text .hud__time, html[data-skin="ui"] .stationTicker__text .hud__msg, html[data-skin="ui"] .stationTicker__text .hud__sep{ font: inherit; letter-spacing: .16em; } html[data-skin="ui"] .topbarGhosts{ display: flex; align-items: center; gap: 12px; } html[data-skin="ui"] .topbarGhost{ display: block; border: 1px solid rgba(185, 226, 255, .18); background: linear-gradient(180deg, rgba(8,12,16,.72), rgba(4,8,10,.84)); box-shadow: inset 0 0 0 1px rgba(130, 210, 255, .08), 0 0 18px rgba(0,0,0,.24); overflow: hidden; } html[data-skin="ui"] .topbarGhost--square{ width: 74px; height: 74px; } html[data-skin="ui"] .topbarGhost--logo{ display: grid; place-items: center; padding: 3px; } html[data-skin="ui"] .topbarGhost--logo img{ display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; } html[data-skin="ui"] .topbarGhost--wide{ width: 188px; height: 74px; position: relative; } html[data-skin="ui"] .commodityTicker{ position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 8px 10px 7px 10px; color: rgba(208, 240, 223, .92); background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0) 26%, rgba(0,0,0,.16)), repeating-linear-gradient(90deg, rgba(200,255,220,.03) 0 1px, transparent 1px 17px); } html[data-skin="ui"] .commodityTicker__label{ display: block; font-family: 'MGS1HUD', var(--font-ui); font-size: 9px; line-height: 1; letter-spacing: .24em; color: rgba(181, 234, 204, .74); white-space: nowrap; } html[data-skin="ui"] .commodityTicker__mask{ position: relative; display: block; overflow: hidden; min-width: 0; align-self: stretch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); } html[data-skin="ui"] .commodityTicker__track{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 28px; min-width: max-content; will-change: transform; animation: commodityTickerScroll 34s linear infinite; } html[data-skin="ui"] .commodityTicker__chunk{ display: inline-block; font-family: 'MGS1HUD', var(--font-ui); font-size: 11px; line-height: 1.1; letter-spacing: .12em; color: rgba(210, 242, 222, .94); white-space: nowrap; text-shadow: 0 0 10px rgba(120, 255, 176, .18); } html[data-skin="ui"] [data-commodity-ticker][data-state="loading"] .commodityTicker__chunk, html[data-skin="ui"] [data-commodity-ticker][data-state="error"] .commodityTicker__chunk{ color: rgba(210, 226, 214, .82); } @keyframes commodityTickerScroll{ from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(calc(-50% - 14px), -50%, 0); } } html[data-skin="ui"] #modulesBtn{ display: none !important; } html[data-skin="ui"] .layout, html[data-skin="ui"] body[data-legend="closed"] .layout{ grid-template-columns: 390px minmax(0, 1fr) !important; padding-right: clamp(400px, 30vw, 500px); } html[data-skin="ui"] body[data-legend="closed"] .legend{ display: block !important; } html[data-skin="ui"] .legend{ display: block !important; } html[data-skin="ui"] .mapPane{ padding: 16px 10px 16px 10px; } html[data-skin="ui"] .mapFigure{ display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 760px at 50% 50%, rgba(20,35,30,.12), rgba(0,0,0,.12) 60%, rgba(0,0,0,.38) 100%), linear-gradient(180deg, rgba(9,14,18,.88), rgba(6,10,14,.96)), var(--ui-grid) !important; background-repeat: repeat !important; background-size: 454px 337px !important; background-position: center center !important; background-image: radial-gradient(1200px 760px at 50% 50%, rgba(20,35,30,.12), rgba(0,0,0,.12) 60%, rgba(0,0,0,.38) 100%), linear-gradient(180deg, rgba(9,14,18,.88), rgba(6,10,14,.96)), var(--ui-grid) !important; } html[data-skin="ui"] .mapFigure::before{ opacity: .22; } html[data-skin="ui"] .mapFigure::after{ opacity: .18; } html[data-skin="ui"]{ --desktop-left-panel: 390px; --desktop-right-panel: clamp(360px, 29vw, 490px); } html[data-skin="ui"] .mapPortalShell{ position: relative; width: min(44vh, 30vw, 560px); aspect-ratio: 734 / 1166; height: auto; flex: 0 0 auto; } html[data-skin="ui"] .mapPortalFrame{ display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url("assets/ui-next/desktop-portal-frame-v2.png") center center / contain no-repeat; filter: drop-shadow(0 16px 30px rgba(0,0,0,.42)); } html[data-skin="ui"] .mapStage{ position: absolute; inset: 0; z-index: 1; overflow: visible; border-radius: 0; box-shadow: none; background: transparent !important; background-image: none !important; } html[data-skin="ui"] .mapStage .mapSceneSurface{ position: absolute; inset: 4.8% 6.8% 4.8% 13.8%; overflow: hidden; border-radius: 24px; background: var(--scene-bg) center center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.30); } html[data-skin="ui"] .mapStage::after{ content: ""; position: absolute; inset: 4.8% 6.8% 4.8% 13.8%; border-radius: 24px; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 42%, rgba(0,0,0,.18)), radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.20) 100%); z-index: 2; } html[data-skin="ui"] .mapStage .mapSceneSurface #sceneHotspot, html[data-skin="ui"] .mapStage .mapSceneSurface #sceneTextOverlay, html[data-skin="ui"] .mapStage .mapSceneSurface #hotspots{ z-index: 4; } html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--image{ width: min(calc(var(--scene-hotspot-w, 34%) * .92), 42%) !important; filter: drop-shadow(0 0 8px rgba(255, 95, 95, .26)) drop-shadow(0 0 24px rgba(255, 35, 35, .18)); } html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--image:hover, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--image:focus-visible, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--image:active{ filter: drop-shadow(0 0 12px rgba(255, 110, 110, .40)) drop-shadow(0 0 34px rgba(255, 40, 40, .32)) !important; } html[data-skin="ui"] .statusBar{ display: none; } html[data-skin="ui"] body:not([data-win-max="1"]) .winOverlay{ inset: calc(var(--topbar-h, 64px) + 12px) calc(var(--desktop-right-panel) + 12px) 12px calc(var(--desktop-left-panel) + 12px); background: rgba(0,0,0,.34); z-index: 78; } html[data-skin="ui"] body:not([data-win-max="1"]) .win{ top: calc(50% + (var(--topbar-h, 64px) / 2)); left: calc(50% + ((var(--desktop-left-panel) - var(--desktop-right-panel)) / 2)); right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(clamp(320px, 34vw, 460px), calc(100vw - var(--desktop-left-panel) - var(--desktop-right-panel) - 72px)); max-height: calc(100vh - var(--topbar-h, 64px) - 56px); z-index: 96; box-shadow: 0 28px 60px rgba(0,0,0,.62); } html[data-skin="ui"] body:not([data-win-max="1"]) .win__body{ max-height: calc(100vh - var(--topbar-h, 64px) - 112px); } html[data-skin="ui"] #hud{ position: fixed; top: calc(var(--topbar-h, 64px) + 12px); right: 12px; bottom: 12px; left: auto; width: clamp(360px, 29vw, 490px); padding: 12px; display: flex; flex-direction: column; border-radius: 14px; z-index: 65; } html[data-skin="ui"] #hud::before{ display: none; } html[data-skin="ui"] #hud .hud__row{ display: none !important; } html[data-skin="ui"] #hud #hudBody, html[data-skin="ui"] #hud #hudBody[hidden]{ display: grid !important; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; margin-top: 0; min-height: 0; height: 100%; } html[data-skin="ui"] #hudLog{ display: none !important; } html[data-skin="ui"] #broadcastStationMount{ min-height: 0; overflow: auto; padding-right: 2px; } html[data-skin="ui"] #broadcastStationMount .broadcast-station{ min-height: 100%; } html[data-skin="ui"] .bs-video{ max-height: min(42vh, 430px); } html[data-skin="ui"] .hud__actions{ margin-top: auto; } } /* 2026-03-20 desktop panels integration */ html[data-skin="ui"] .scenePanelImage{ display: none; width: 100%; height: 100%; object-fit: contain; object-position: center center; user-select: none; -webkit-user-drag: none; pointer-events: none; } @media (min-width: 961px){ html[data-skin="ui"] .mapPortalFrame{ display: none !important; } html[data-skin="ui"] .mapPortalShell{ position: relative; height: calc(100% - 20px); aspect-ratio: 734 / 1166; width: auto; max-width: calc(100% - 20px); flex: 0 0 auto; } html[data-skin="ui"] .mapStage, html[data-skin="ui"] .mapSceneSurface{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; border-radius: 0; background: transparent !important; background-image: none !important; box-shadow: none !important; } html[data-skin="ui"] .mapStage::after, html[data-skin="ui"] .mapSceneSurface picture, html[data-skin="ui"] .mapSceneSurface #hqMap{ display: none !important; } html[data-skin="ui"] .mapSceneSurface{ display: block; } html[data-skin="ui"] .scenePanelImage{ display: block; position: absolute; inset: 0; z-index: 1; } html[data-skin="ui"] .sceneTextOverlay{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; z-index: 3; pointer-events: none; } html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop{ position: absolute; left: var(--scene-x); top: var(--scene-y); width: var(--scene-hotspot-w) !important; aspect-ratio: var(--scene-hotspot-ratio) !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; transform: translate(-50%, -50%); z-index: 4; border: 0 !important; border-radius: 12px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; padding: 0 !important; color: transparent !important; animation: none !important; outline: 0; } html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop::before, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop::after{ display: none !important; content: none !important; } html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:hover, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:focus-visible{ outline: 1px solid rgba(255,110,110,.45); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,55,55,.14), 0 0 22px rgba(255,55,55,.14) !important; } html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop .sceneHotspot__label{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } html[data-skin="ui"] body:not([data-win-max="1"]) .winOverlay{ inset: calc(var(--topbar-h, 64px) + 18px) calc(var(--desktop-right-panel) + 22px) 18px calc(var(--desktop-left-panel) + 22px); background: rgba(0,0,0,.22); z-index: 78; } html[data-skin="ui"] body:not([data-win-max="1"]) .win{ top: calc(50% + (var(--topbar-h, 64px) / 2)); left: calc(var(--desktop-left-panel) + ((100vw - var(--desktop-left-panel) - var(--desktop-right-panel)) / 2)); right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(460px, calc(100vw - var(--desktop-left-panel) - var(--desktop-right-panel) - 84px)); max-height: min(72vh, calc(100vh - var(--topbar-h, 64px) - 72px)); z-index: 96; box-shadow: 0 28px 60px rgba(0,0,0,.62); } html[data-skin="ui"] body:not([data-win-max="1"]) .win__body{ max-height: calc(min(72vh, calc(100vh - var(--topbar-h, 64px) - 72px)) - 54px); } } /* 2026-03-20 desktop backpanel fill pass */ html[data-skin="ui"] .scenePanelBackdrop{ display:none; user-select:none; -webkit-user-drag:none; pointer-events:none; } html[data-skin="ui"] .scenePanelBackdrop[hidden]{ display:none !important; } html[data-skin="ui"] .scenePanelStack{ position:absolute; inset:0; z-index:3; } @media (min-width: 961px){ html[data-skin="ui"] .mapPane{ padding: 16px 10px 16px 10px; } html[data-skin="ui"] .mapPortalShell{ position:relative; width:100% !important; height:100% !important; max-width:none !important; aspect-ratio:auto !important; flex:1 1 auto !important; } html[data-skin="ui"] .mapPortalFrame{ display:none !important; } html[data-skin="ui"] .mapStage, html[data-skin="ui"] .mapSceneSurface{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden !important; border-radius:24px; background: transparent !important; background-image:none !important; box-shadow:none !important; } html[data-skin="ui"] .mapSceneSurface picture, html[data-skin="ui"] .mapSceneSurface #hqMap, html[data-skin="ui"] .mapStage::after{ display:none !important; } html[data-skin="ui"] .scenePanelBackdrop{ display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; filter: blur(4px) brightness(.68) saturate(1.05) contrast(1.06); transform: scale(1.18); opacity:.94; z-index:1; } html[data-skin="ui"] .mapSceneSurface::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.02) 28%, rgba(0,0,0,.12) 100%), radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 34%, rgba(0,0,0,.16) 100%); } html[data-skin="ui"] .scenePanelStack{ position:absolute; left:50%; top:50%; width:auto; height:min(calc(100% - 10px), 98%); aspect-ratio:734 / 1166; max-width:min(calc(100% - 20px), 86%); transform:translate(-50%, -50%); z-index:4; pointer-events:none; } html[data-skin="ui"] .scenePanelStack > .scenePanelImage, html[data-skin="ui"] .scenePanelStack > .sceneTextOverlay{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center center; user-select:none; -webkit-user-drag:none; pointer-events:none; } html[data-skin="ui"] .scenePanelStack > .scenePanelImage{ display:block; z-index:1; } html[data-skin="ui"] .scenePanelStack > .sceneTextOverlay{ display:block; z-index:3; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop{ position:absolute; left:var(--scene-x); top:var(--scene-y); width:var(--scene-hotspot-w) !important; aspect-ratio:var(--scene-hotspot-ratio) !important; min-width:0 !important; min-height:0 !important; height:auto !important; transform:translate(-50%, -50%); z-index:4; border:0 !important; border-radius:12px !important; background:transparent !important; background-image:none !important; box-shadow:none !important; padding:0 !important; color:transparent !important; animation:none !important; outline:0; pointer-events:auto; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop::before, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop::after{ display:none !important; content:none !important; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:hover, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:focus-visible{ outline: 1px solid rgba(255,110,110,.45); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,55,55,.14), 0 0 22px rgba(255,55,55,.14) !important; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop .sceneHotspot__label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; } } /* 2026-03-20 desktop triptych center-column pass */ @media (min-width: 961px){ html[data-skin="ui"] .mapPane{ padding: 16px 0 !important; display: flex; align-items: center; justify-content: center; } html[data-skin="ui"] .mapFigure{ flex: 0 0 auto !important; margin: 0 auto !important; height: calc(100vh - var(--topbar-h, 64px) - 32px); max-height: calc(100vh - var(--topbar-h, 64px) - 32px); width: min(calc((100vh - var(--topbar-h, 64px) - 32px) * 0.70), calc(100vw - var(--desktop-left-panel) - var(--desktop-right-panel) - 24px), 500px); max-width: calc(100vw - var(--desktop-left-panel) - var(--desktop-right-panel) - 24px); align-self: center; justify-self: center; } html[data-skin="ui"] .mapPortalShell, html[data-skin="ui"] .mapStage, html[data-skin="ui"] .mapSceneSurface, html[data-skin="ui"] .scenePanelStack{ width: 100% !important; height: 100% !important; } html[data-skin="ui"] .mapPortalShell{ aspect-ratio: auto !important; } html[data-skin="ui"] .scenePanelBackdrop, html[data-skin="ui"] .mapSceneSurface::before{ display: none !important; content: none !important; } html[data-skin="ui"] .scenePanelStack{ left: 0 !important; top: 0 !important; max-width: none !important; aspect-ratio: auto !important; transform: none !important; } html[data-skin="ui"] .scenePanelStack > .scenePanelImage, html[data-skin="ui"] .scenePanelStack > .sceneTextOverlay{ object-fit: contain !important; object-position: center center !important; } } /* 2026-03-20 desktop portrait-center reset: make the middle column itself the portrait panel */ @media (min-width: 961px){ html[data-skin="ui"] .mapPane{ padding: 6px 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; } html[data-skin="ui"] .mapFigure{ position: relative !important; width: min( calc((100vh - var(--topbar-h, 64px) - 12px) * 734 / 1166), calc(100vw - var(--desktop-left-panel) - var(--desktop-right-panel) - 20px) ) !important; max-width: calc(100vw - var(--desktop-left-panel) - var(--desktop-right-panel) - 20px) !important; max-height: calc(100vh - var(--topbar-h, 64px) - 12px) !important; height: auto !important; aspect-ratio: 734 / 1166 !important; margin: 0 auto !important; display:block !important; align-self:center !important; justify-self:center !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } html[data-skin="ui"] .mapFigure::before, html[data-skin="ui"] .mapFigure::after, html[data-skin="ui"] .scenePanelBackdrop, html[data-skin="ui"] .mapSceneSurface::before, html[data-skin="ui"] .mapStage::after, html[data-skin="ui"] .mapPortalFrame, html[data-skin="ui"] .mapSceneSurface picture, html[data-skin="ui"] .mapSceneSurface #hqMap{ display:none !important; content:none !important; } html[data-skin="ui"] .mapPortalShell, html[data-skin="ui"] .mapStage, html[data-skin="ui"] .mapSceneSurface, html[data-skin="ui"] .scenePanelStack{ position:absolute !important; display:block !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; aspect-ratio:auto !important; overflow:visible !important; background: transparent !important; background-image:none !important; box-shadow:none !important; border-radius: 0 !important; transform:none !important; } html[data-skin="ui"] .scenePanelStack{ left:0 !important; top:0 !important; z-index:4 !important; pointer-events:none !important; } html[data-skin="ui"] .scenePanelStack > .scenePanelImage, html[data-skin="ui"] .scenePanelStack > .sceneTextOverlay{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:fill !important; object-position:center center !important; display:block !important; user-select:none; -webkit-user-drag:none; pointer-events:none !important; } html[data-skin="ui"] .scenePanelStack > .scenePanelImage{ z-index:1 !important; } html[data-skin="ui"] .scenePanelStack > .sceneTextOverlay{ z-index:3 !important; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop{ position:absolute !important; left:var(--scene-x) !important; top:var(--scene-y) !important; width:var(--scene-hotspot-w) !important; aspect-ratio:var(--scene-hotspot-ratio) !important; height:auto !important; min-width:0 !important; min-height:0 !important; transform:translate(-50%, -50%) !important; z-index:4 !important; border:0 !important; border-radius:12px !important; background:transparent !important; background-image:none !important; box-shadow:none !important; padding:0 !important; color:transparent !important; outline:0; pointer-events:auto !important; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop::before, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop::after{ display:none !important; content:none !important; } } /* 2026-03-20 desktop hotspot glow cleanup */ @media (min-width: 961px){ html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:hover, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:focus-visible, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:active, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:hover, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:focus-visible, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:active{ outline: 0 !important; box-shadow: none !important; border-color: transparent !important; } html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:hover + .sceneTextOverlay, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:focus-visible + .sceneTextOverlay, html[data-skin="ui"] .scenePanelStack > #sceneHotspot.sceneHotspot--desktop:active + .sceneTextOverlay, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:hover + .sceneTextOverlay, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:focus-visible + .sceneTextOverlay, html[data-skin="ui"] .mapStage .sceneHotspot.sceneHotspot--desktop:active + .sceneTextOverlay{ filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 18px rgba(255, 115, 115, .72)) drop-shadow(0 0 42px rgba(255, 45, 45, .52)) !important; opacity: 1 !important; } } @media (prefers-reduced-motion: reduce){ html[data-skin="ui"] .commodityTicker__track{ animation-duration: 52s; } } @media (min-width: 961px){ html[data-skin="ui"] body[data-mod="codex"] .win__body, html[data-skin="ui"] body[data-mod="dock"] .win__body{ overflow-x: hidden; } } /* 2026-03-25 desktop center-column width fill pass */ @media (min-width: 961px){ html[data-skin="ui"] .mapFigure{ overflow: visible !important; } html[data-skin="ui"] .scenePanelStack{ transform: scaleX(1.14) !important; transform-origin: center center !important; } } /* 2026-03-25 micro-fix: Broadcast Station should not show extra mount scrollbars */ @media (min-width: 961px){ html[data-skin="ui"] #broadcastStationMount{ overflow: hidden !important; min-width: 0; min-height: 0; padding-right: 0 !important; } html[data-skin="ui"] #broadcastStationMount .broadcast-station{ margin-top: 0; padding-top: 0; border-top: 0; min-height: 0 !important; height: auto !important; overflow: hidden; } html[data-skin="ui"] #broadcastStationMount .bs-row, html[data-skin="ui"] #broadcastStationMount .bs-now, html[data-skin="ui"] #broadcastStationMount .bs-field, html[data-skin="ui"] #broadcastStationMount .bs-controls, html[data-skin="ui"] #broadcastStationMount .bs-nowText{ min-width: 0; } html[data-skin="ui"] #broadcastStationMount .bs-seek{ display: block; max-width: 100%; } } @media (max-width: 960px){ html[data-skin="ui"] #broadcastStationMount{ overflow: hidden !important; min-width: 0; } html[data-skin="ui"] #broadcastStationMount .broadcast-station{ overflow: hidden; } } html.page-hidden .commodityTicker__track, html.page-hidden .sceneTextOverlay, html.page-hidden .sceneHotspot.sceneHotspot--image::after, html.page-hidden .introGate__sub, html.page-hidden .hotspot, html.page-hidden .legendBtn::before{ animation-play-state: paused !important; }