/* board.css - the exchange board carried through the rest of the desktop UI
   (1.11.9.31). Picked from the overhaul mockups: A, "board".

   One vocabulary, taken from the header board (terminal-skin.css .fmb) and
   the centre tab strip (tab-board.css):
     bezel  a dark moulded frame, per skin, with a black ring and a drop
     glass  near-black screen with a faint amber dot grid and an inset shadow
     title  Doto dot-matrix in amber with a green status LED
   Applied here to the three main panels, their section titles and the Galaxy
   tab's sector map. Other panels follow in later releases, one at a time.

   Desktop only: every rule is scoped off body.fm-mobile, so phones keep their
   own shell. Galaxy markup carries inline styles from galaxy.js and
   index.html, so the Galaxy rules use !important to win over them; each one
   names what it overrides. */

:root{--fm-bezel:linear-gradient(180deg,#161a16,#070907);--fm-glass:color-mix(in srgb,var(--bg) 60%,#000);
  --fm-grid:radial-gradient(circle,color-mix(in srgb,var(--amber) 6%,transparent) .7px,transparent 1.1px)}
:root.red-theme{--fm-bezel:linear-gradient(180deg,#1c1313,#0b0606)}
:root.jade-theme{--fm-bezel:linear-gradient(180deg,#132019,#06100b)}

/* ── The three main panels ────────────────────────────────────────────────
   Bezel and glass on one element: the glass is painted on the padding box,
   the bezel gradient on the border box under a transparent border, so the
   radius holds and no wrapper element is needed. */
body:not(.fm-mobile) .grid>.panel{border:4px solid transparent;border-radius:7px;
  background:var(--fm-grid) 0 0/3px 3px padding-box,linear-gradient(var(--fm-glass),var(--fm-glass)) padding-box,var(--fm-bezel) border-box;
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 0 14px #000;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ── Section titles (COMPANIES, NEWS and the rest built on .fm-sec) ────── */
body:not(.fm-mobile) .fm-sec-t{display:inline-flex;align-items:center;gap:7px;
  font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;font-size:14px;letter-spacing:.14em;line-height:1}
body:not(.fm-mobile) .fm-sec-t::before{content:'';width:5px;height:5px;border-radius:50%;flex:0 0 auto;background:var(--green);box-shadow:0 0 5px var(--green)}
body:not(.fm-mobile) .fm-sec-rule{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 22%,transparent),transparent)}
body:not(.fm-mobile) .fm-sec-meta{font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;font-size:9px}

/* ── Galaxy: sector map ───────────────────────────────────────────────────
   The Galaxy tab was built on its own navy palette (#07070e, #1a1a2e, a
   Courier face) and a painted nebula, which is why it read as another game.
   The shell and the map move onto the board; the panes behind the other
   sub-tabs keep their own styling for now. */
body:not(.fm-mobile) #galacticTab{font-family:'Share Tech Mono',ui-monospace,Menlo,Consolas,monospace!important}   /* was Courier New inline */

/* Sub-tabs: a board strip like the centre tabs. galaxy.js writes colour and
   underline inline on click and now also toggles .active. Stribor Net keeps
   its red: it is the illegal surface and is meant to look different. */
body:not(.fm-mobile) #galaxySubTabs{background:#000!important;border-bottom:0!important;border-radius:4px;margin:0 0 6px;padding:0 4px;
  box-shadow:inset 0 0 10px #000,0 0 0 1px #000;overflow-x:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--amber) 28%,transparent) transparent}
body:not(.fm-mobile) .galaxy-stab{font-family:'Doto','Share Tech Mono',ui-monospace,monospace!important;font-weight:700;font-size:14px!important;
  letter-spacing:.03em!important;padding:8px 10px 6px!important;white-space:nowrap;color:var(--amber)!important;opacity:.7;
  border-bottom:2px solid transparent!important;transition:opacity .15s}
/* The labels lead with an emoji (gstab.* strings, shared with the phone
   shell, so the strings stay). ::first-letter hides it here only; a browser
   that does not treat the emoji as a first letter simply shows it. */
body:not(.fm-mobile) .galaxy-stab::first-letter{font-size:0}
/* Eight labels in the centre panel, 14 px on a wide screen (1.11.9.32, up from
   12), then a step down at 1700, 1500 and 1400 px wide, measured so all eight
   fit without scrolling at 1600, 1440, 1366 and 1280. */
@media (max-width:1700px){body:not(.fm-mobile) .galaxy-stab{font-size:13px!important;padding:8px 7px 6px!important}}
@media (max-width:1500px){body:not(.fm-mobile) .galaxy-stab{font-size:12px!important;letter-spacing:0!important;padding:8px 6px 6px!important}}
@media (max-width:1400px){body:not(.fm-mobile) .galaxy-stab{font-size:11px!important;padding:8px 5px 6px!important}}
body:not(.fm-mobile) .galaxy-stab:hover{opacity:.92}
body:not(.fm-mobile) .galaxy-stab.active{opacity:1;color:var(--gold)!important;border-bottom-color:var(--amber)!important;text-shadow:0 0 6px var(--amber);
  background:color-mix(in srgb,var(--amber) 9%,transparent)}
body:not(.fm-mobile) .galaxy-stab.active[data-gstab="stribor"]{color:#e04a4a!important;border-bottom-color:#e04a4a!important;text-shadow:0 0 6px #e04a4a}

/* The map sits on glass. The nebula is back on the desktop map as of
   1.11.9.102: the sector plates (blue Coalition, green Circuit, red Stribor)
   replaced the painted nebulae that were retired here, and draw over the glass
   at the opacity galaxy.js gives them. */
body:not(.fm-mobile) #gMapPane{background:transparent!important;gap:6px}
body:not(.fm-mobile) #gMapGlass{border-radius:4px;background:#000 var(--fm-grid) 0 0/3px 3px!important;box-shadow:inset 0 0 22px #000,0 0 0 1px #000}
body:not(.fm-mobile) #galaxySVG{background:transparent!important}   /* eod-timer.css paints it #02020a */
body:not(.fm-mobile) #galaxySVG .gx-lbl{fill:var(--amber);font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;opacity:.85}
body:not(.fm-mobile) #galaxySVG .gx-lbl-fs{fill:var(--gold);opacity:1}
body:not(.fm-mobile) .g-zoom-btn{background:rgba(0,0,0,.8)!important;border:1px solid color-mix(in srgb,var(--amber) 18%,transparent)!important;color:var(--amber)!important}
body:not(.fm-mobile) .g-zoom-btn:hover{border-color:var(--amber)!important}
body:not(.fm-mobile) #gLegend{background:rgba(0,0,0,.8)!important;border:1px solid color-mix(in srgb,var(--amber) 18%,transparent)!important;border-radius:3px;color:var(--muted)!important}
body:not(.fm-mobile) #gLegend>div:first-child{color:var(--amber)!important;font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;letter-spacing:.16em!important}
body:not(.fm-mobile) #gColonyDetail{background:transparent!important;border-left:1px solid color-mix(in srgb,var(--amber) 14%,transparent)!important}

/* 1.11.9.120: a dark halo under each world name, so a label reads over a nebula
   or the edge of a planet. Placement (galaxy.js placeColonyLabels) keeps names
   off other worlds; this keeps them legible where they land. */
/* 1.11.9.121: the dot-matrix face (Doto) went to mush at map scale behind a
   halo and over the twinkling stars. Names are now solid Share Tech Mono at
   full strength on a dark plate (gx-lbl-bg, drawn by placeColonyLabels). */
body:not(.fm-mobile) #galaxySVG .gx-lbl{font-family:'Share Tech Mono',ui-monospace,monospace;font-weight:400;opacity:1;fill:#ffc56a;
  paint-order:stroke;stroke:#000;stroke-width:2px;stroke-linejoin:round}
body:not(.fm-mobile) #galaxySVG .gx-lbl-fs{fill:#ffe08a}
body:not(.fm-mobile) #galaxySVG .gx-lbl-bg{fill:rgba(3,5,4,.72);stroke:rgba(240,180,84,.22);stroke-width:1px}
body.fm-mobile #galaxySVG .gx-lbl-bg{display:none}