/* RIIZE slate white: frosted white panels over the city, slate type, a slate-900
   primary. Layout: a slim top row (logo, search, actions), the numbers docked
   along the bottom, the selected project or Trader on the left, the feeds on
   the right as one tabbed panel, so the middle of the map stays clear.
   Loaded last. */

:root {
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --glass-line: rgba(39, 39, 42, 0.09);
  --glass-shadow: 0 1px 2px rgba(39, 39, 42, 0.06), 0 10px 30px rgba(39, 39, 42, 0.12);
  --ink: #27272a;
  --ink-2: #3f3f41;
  --ink-3: #727274;
  --edge: 12px;
}
html, body { background: #f1f1f3; color: var(--ink); }

/* every floating surface: frosted glass */
.brand, .search input, .clocks, .card, .fpanel, .legend, .tray, #chip, .notices > *, .keys, .wpick, .sheet, .search ul, .toast {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--glass-line) !important;
  box-shadow: var(--glass-shadow) !important;
}
.sheet, .wpick, .tray, .search ul { background: var(--glass-strong) !important; }
.modal { background: rgba(39, 39, 42, 0.28) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.toast { color: var(--ink) !important; font-weight: 600; }
.toast.err { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }

/* ---- the top row ---- */
.bar { top: var(--edge); left: var(--edge); right: var(--edge); gap: 10px; justify-content: space-between; }
.brand { padding: 6px 8px 6px 10px !important; gap: 10px; border-radius: 14px; }
.brand-home { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-mark { height: 24px; width: auto; display: block; }
.brand-word { height: 15px; width: auto; display: block; margin-top: 1px; }
.brand .tag { background: rgba(39, 39, 42, 0.05); color: var(--ink-2); border-radius: 8px; font-weight: 600; }
.brand .tag:hover { background: var(--ink); color: #fff; }
.search { position: relative; display: flex; align-items: center; margin: 0 auto; }
.search > svg { position: absolute; left: 13px; color: var(--ink-3); pointer-events: none; z-index: 1; }
.search input { width: min(340px, 28vw) !important;  padding: 10px 14px 10px 36px !important; color: var(--ink) !important; font-size: 13px; }
.search input::placeholder { color: var(--ink-3) !important; }
.search input:focus { border-color: rgba(39, 39, 42, 0.3) !important; }
.actions { gap: 8px; }
.btn { background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 16px rgba(39, 39, 42, 0.18); }
.btn:hover { background: #27272a; }
.btn.ghost { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn.ghost:hover { background: #fff; }
/* the day / night switch sits with the actions now */
.actions .daynight { position: static !important; inset: auto !important; transform: none !important; margin: 0; background: var(--glass) !important; border: 1px solid var(--glass-line) !important; box-shadow: var(--glass-shadow) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---- the numbers, docked along the bottom ---- */
.clocks.dock { position: fixed; left: 50%; bottom: var(--edge); transform: translateX(-50%); z-index: 5; margin: 0; display: flex; gap: 4px; padding: 5px;  }
.clocks.dock .clock { display: block !important; padding: 5px 12px; border-radius: 11px; background: transparent !important; min-width: 0; color: var(--ink); text-decoration: none; }
.clocks.dock .clock + .clock { box-shadow: inset 1px 0 0 rgba(39, 39, 42, 0.07); }
.clocks.dock .clock small { color: var(--ink-3) !important; font-size: 11px; white-space: nowrap; }
.clocks.dock .clock b { font-size: 13px; color: var(--ink); }
.clocks.dock .clock.token small { color: #27272a !important; }
.clocks.dock a.clock:hover { background: rgba(39, 39, 42, 0.05) !important; }
.clocks.dock .clock.lime { background: var(--ink) !important; color: #fff; box-shadow: none; }
.clocks.dock .clock.lime small { color: #a1a1a3 !important; }
.clocks.dock .clock.lime b { color: #fff; }

/* ---- the selected project / Trader: left ---- */
.card { left: var(--edge) !important; right: auto !important; top: 70px !important; width: 340px !important; max-height: calc(100% - 150px) !important;  }

/* ---- the feeds: right, one panel with a switch ---- */
.feed { left: auto !important; right: var(--edge) !important; top: 70px !important; bottom: auto !important; width: 350px !important; height: min(620px, calc(100% - 160px)) !important; display: flex !important; flex-direction: column; gap: 6px !important; }
.fswitch { display: flex !important; gap: 4px; flex: none; padding: 4px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.fswitch button { flex: 1; border: 0 !important; background: none !important; color: var(--ink-3) !important; font: 600 13px Inter, sans-serif; padding: 7px; border-radius: 10px; cursor: pointer; }
.fswitch button.on { background: var(--ink) !important; color: #fff !important; }
.fpanel { display: none !important; }
.fpanel.on { display: flex !important; flex: 1 !important; min-height: 0;  }
.feed li.fi { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(39, 39, 42, 0.05) !important; }
.feed li.fi:hover { background: #fff !important; }
.fpanel > header .ftabs button.on, .fseg button.on, .fpill.on { background: var(--ink) !important; color: #fff !important; }

/* ---- rewards popover (opens above the dock), notices, the key hints ---- */
.legend {  }
.notices { top: 70px !important; }
.keys { left: var(--edge) !important; right: auto !important; bottom: var(--edge) !important; color: var(--ink-3) !important; font-size: 11px; padding: 6px 10px; border-radius: 10px; }
.keys b { color: var(--ink) !important; }
@media (max-width: 1300px) { .keys { display: none; } }
.tray { top: 64px !important; right: var(--edge) !important; }

/* ---- the tags over buildings ---- */
.lbl { background: rgba(255, 255, 255, 0.95) !important; color: var(--ink) !important; border: 1px solid rgba(39, 39, 42, 0.1) !important; box-shadow: 0 4px 14px rgba(39, 39, 42, 0.16) !important; }
.lbl i { background-color: #e7e7e9 !important; color: var(--ink-2) !important; }
.lbl span { color: var(--ink-2) !important; }
.lbl u { background: var(--ink) !important; color: #fff !important; }
.lbl.hq { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.lbl.on { border-color: #27272a !important; box-shadow: 0 0 0 1px #27272a, 0 6px 18px rgba(39, 39, 42, 0.2) !important; }
.atag, .bubble { background: rgba(255, 255, 255, 0.95) !important; color: var(--ink) !important; border-color: rgba(39, 39, 42, 0.1) !important; box-shadow: 0 4px 14px rgba(39, 39, 42, 0.16) !important; }

/* ---- the loading screen: the logo on slate white ---- */
.loading { background: #fafafc !important; }
.loading::before { background: url(/img/riize-mark-dark.png) 0 0 / 110px 110px repeat !important; opacity: 0.045 !important; }
.loading .logo { width: min(280px, 60vw) !important; height: auto !important; background: none !important; }

/* ---- phones: the top row, the dock under it, the feeds as a bottom sheet ---- */
@media (max-width: 900px) {
  :root { --edge: 8px; }
  .brand-word { display: none; }
  .brand .tag { display: none; }
  .search input { width: 38vw !important; }
  .actions .btn { padding: 8px 10px; font-size: 13px; }
  .actions #btn-mine, .actions #btn-admin { display: none; }
  .clocks.dock { top: 60px; bottom: auto; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
  .clocks.dock .clock { padding: 4px 9px; }
  .feed { top: auto !important; bottom: var(--edge) !important; left: var(--edge) !important; right: var(--edge) !important; width: auto !important; height: 250px !important; }
  .card { top: auto !important; bottom: var(--edge) !important; left: var(--edge) !important; right: var(--edge) !important; width: auto !important; max-height: 60vh !important; z-index: 6; }
}
.lbl .lbl-logo { width: 16px; height: 16px; object-fit: contain; }

/* ---- revision: square corners, search in the bottom bar, the controls bottom left ---- */
/* every component is square; only the little status dots stay round */

/* corners: square shapes with rounded corners, one radius for panels and one for controls */
:root { --rad: 10px; --rad-ctl: 8px; --rad-sm: 6px; }
*, *::before, *::after { border-radius: var(--rad-sm) !important; }
/* panels and sheets */
.brand, .clocks, .card, .fpanel, .legend, .tray, .sheet, .wpick, #chip, .notices > *, .toast, .search ul, .filters, .dtile, .wtile, .acard, .anew, .proj, .lsteps, .mine-sum, .hr-drops, .ag-pos, .inc, .rsplit div, .stat, .cards div { border-radius: var(--rad) !important; }
/* controls */
button, .btn, input, textarea, select, .tag, .xbtn, .clock, .fswitch button, .daynight, .dd-btn, .fseg, .fbtn, .fpill, .chip, .chip-in, .pill, .lbl, .atag, .lpic, .pic, .dt-pic, .wt-logo { border-radius: var(--rad-ctl) !important; }
/* things that are round, and hairlines that shouldn't be */
.wdot, .live, i.live, .st-dot, .st i, .dn-knob, #btn-signin .nb, .fbtn em, #ft-n { border-radius: 999px !important; }
.dn-knob { border-radius: 6px !important; }
hr, .rbar, .rbar i, .track, .fill { border-radius: 999px !important; }
/* the X: centred in its square */
.brand .xbtn { display: grid !important; place-items: center; width: 26px !important; height: 26px !important; padding: 0 !important; }
.brand .xbtn svg { display: block; }

.bar { justify-content: space-between; }
.brand .xbtn { display: grid; place-items: center; width: 28px; height: 28px; background: rgba(39, 39, 42, 0.06); border: 1px solid var(--glass-line); color: var(--ink); text-decoration: none; }
.brand .xbtn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* the search lives at the left of the bottom bar */
.clocks.dock { align-items: stretch; }
.clocks.dock .search { margin: 0 4px 0 0; display: flex; align-items: center; }
.clocks.dock .search input { width: 250px !important; height: 100%; min-height: 40px; background: rgba(39, 39, 42, 0.04) !important; border: 1px solid var(--glass-line) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.clocks.dock .search ul { top: auto !important; bottom: calc(100% + 8px); left: 0; right: auto; width: 320px; }

/* the controls hint: bottom left, along the same line as the bar */
.keys { display: block !important; left: var(--edge) !important; bottom: var(--edge) !important; max-width: calc(50vw - 330px); white-space: normal; line-height: 1.5; }
@media (max-width: 1450px) { .keys { display: none !important; } }

/* dark, not black: charcoal accents and buttons */
.btn, .clocks.dock .clock.lime, .fswitch button.on, .lbl.hq, .lbl u { background: #27272a !important; border-color: #27272a !important; }
.btn:hover { background: #3f3f46 !important; }
.btn.ghost { background: var(--glass) !important; border-color: var(--glass-line) !important; color: var(--ink) !important; }
.btn.ghost:hover { background: #fff !important; }
.clocks.dock .clock.token small { color: var(--ink-3) !important; }
.lbl.on { border-color: #27272a !important; box-shadow: 0 0 0 1px #27272a, 0 6px 18px rgba(39, 39, 42, 0.2) !important; }

@media (max-width: 900px) {
  .clocks.dock .search input { width: 44vw !important; }
  .clocks.dock .search ul { top: calc(100% + 8px) !important; bottom: auto; }
}

/* ---- revision 2: one control height, one type scale, the controls hint under the bar ---- */
:root { --ctl: 36px; }
/* every button in the top row, the day/night switch, the logo block and the feed switch: the same height */
.bar .btn, .bar .daynight, .brand, .fswitch button, .clocks.dock .search input {
  height: var(--ctl) !important; min-height: var(--ctl) !important; box-sizing: border-box;
}
.bar .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px !important; font: 600 13px Inter, sans-serif !important; line-height: 1 !important; white-space: nowrap; }
/* My RIIZE and the wallet button: the same size */
#btn-mine, #btn-signin { min-width: 150px; }
#btn-signin.connected { font: 600 13px Inter, system-ui, sans-serif !important; }
.brand { padding: 0 8px 0 10px !important; }
.brand .xbtn, .brand .tag { height: 26px; display: inline-flex; align-items: center; font-size: 11px !important; }
.bar .daynight { width: auto; }
.fswitch { padding: 0 !important; gap: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fswitch button { font: 600 13px Inter, sans-serif !important; padding: 0 12px !important; background: var(--glass) !important; border: 1px solid var(--glass-line) !important; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.fswitch button + button { border-left: 0 !important; }
.fswitch button.on { background: #27272a !important; border-color: #27272a !important; color: #fff !important; }
.clocks.dock .search input { font-size: 13px !important; }

/* one type scale inside every panel */
.bar, .clocks, .card, .feed, .legend, .tray, .sheet, .modal, .notices, #chip, .toast, .keys { font-size: 13px; }
.clocks.dock .clock small { font-size: 11px !important; }
.clocks.dock .clock b { font-size: 13px !important; }

/* the controls hint: centred, directly under the bottom bar */
.clocks.dock { bottom: 40px !important; }
.keys { display: block !important; left: 50% !important; right: auto !important; bottom: 10px !important; transform: translateX(-50%); max-width: none; white-space: nowrap; font-size: 11px !important; padding: 4px 10px; }
.keys b { font-size: 11px !important; }
@media (max-width: 900px) { .keys { display: none !important; } .clocks.dock { bottom: auto !important; } }
.feed { height: min(620px, calc(100% - 200px)) !important; }
.card { max-height: calc(100% - 190px) !important; }
/* the day/night switch at the control height, square */
.bar .daynight { height: var(--ctl) !important; width: 74px !important; }
.bar .daynight .dn-i { height: calc(var(--ctl) - 2px); width: 36px; }
.bar .daynight .dn-knob { top: 3px; left: 3px; height: calc(var(--ctl) - 8px); width: 30px; }
.bar .daynight[data-mode="night"] .dn-knob { transform: translateX(36px); }
.fswitch { gap: 6px !important; }
.fswitch button + button { border-left: 1px solid var(--glass-line) !important; }

/* ---- the rewards popover: one inset (14px), one tile style, the type scale ---- */
#legend.race { width: 340px !important; padding: 0 0 12px !important; }
#legend.race > header { padding: 12px 10px 10px 14px !important; }
#legend.race .rhero { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 14px !important; }
#legend.race .rhero > div, .rsplit div { background: rgba(39, 39, 42, 0.035) !important; border: 1px solid var(--glass-line) !important; border-radius: var(--rad-ctl) !important; padding: 10px 12px !important; min-width: 0; }
#legend.race .rhero small, .rsplit small { display: block; font: 600 11px Inter, sans-serif !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3) !important; margin: 0 0 4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#legend.race .rhero b, .rsplit b { display: block !important; font: 600 16px Inter, system-ui, sans-serif !important; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#legend.race .rbar { margin: 12px 14px 0 !important; }
#legend.race .rhow { margin: 10px 14px !important; font-size: 13px !important; color: var(--ink-2) !important; }
.rsplit { display: grid; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin: 0 14px 4px !important; }
#legend.race .sub { padding: 12px 14px 4px !important; font: 600 11px Inter, sans-serif !important; color: var(--ink-3) !important; }
#legend.race ol, #legend.race ul { padding: 0 6px !important; }
#legend.race li { padding: 8px 8px !important; gap: 10px !important; }
#legend.race .rank li::before, #legend.race .rank li:not(.empty)::before { content: none !important; }
#legend.race .rank li.lead { background: none !important; box-shadow: none !important; }
#legend.race .rr b { font: 500 13px Inter, sans-serif !important; color: var(--ink-2) !important; }
#legend.race .rn { font: 600 11px Inter, system-ui, sans-serif !important; color: var(--ink) !important; }
#legend.race li.empty { padding: 6px 8px !important; font-size: 13px !important; color: var(--ink-3) !important; }
.rsplit { grid-template-columns: 1fr 1fr !important; }
#legend.race li { border: 0 !important; box-shadow: none !important; background: none !important; }
#legend.race li:hover { background: rgba(39, 39, 42, 0.04) !important; }

/* ---- revision 3: Trades bottom left, Activity bottom right (no tabs), filters pop out
   to the right of Trades; wallet choices and the Launch / Trade choices as buttons ---- */
@media (min-width: 901px) {
  /* the feed box becomes an overlay: its two panels place themselves */
  #feed { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: block !important; pointer-events: none; background: none !important; border: 0 !important; box-shadow: none !important; z-index: 6; }
  #feed .fswitch { display: none !important; }
  #feed .fpanel { display: flex !important; position: fixed !important; bottom: var(--edge) !important; width: 340px !important; height: min(360px, calc(100vh - 300px)) !important; pointer-events: auto; flex: none !important; overflow: visible; }
  #feed .fpanel.trades { left: var(--edge) !important; }
  #feed .fpanel.activity { right: var(--edge) !important; }
  #feed .fpanel .flist { overflow-y: auto; }
  /* the filters, out to the right of the Trades panel */
  #feed .fpanel.trades .filters { position: absolute !important; left: calc(100% + 10px) !important; top: auto !important; bottom: 0 !important; width: 320px !important; max-height: min(520px, calc(100vh - 120px)) !important; margin: 0 !important; z-index: 6; }
  /* the card sits above the Trades panel */
  .card { max-height: calc(100vh - 70px - min(360px, calc(100vh - 300px)) - 28px) !important; }
  /* the bar and its hint between the two panels; on narrower screens they step up above them */
  @media (max-width: 1260px) { .clocks.dock { bottom: calc(min(360px, calc(100vh - 300px)) + 52px) !important; } .keys { bottom: calc(min(360px, calc(100vh - 300px)) + 22px) !important; } }
}

/* connect a wallet: a list of buttons */
.wtiles { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.wtile { height: 48px !important; display: flex !important; align-items: center; gap: 12px; padding: 0 14px !important; background: #fff !important; border: 1px solid var(--glass-line) !important; box-shadow: none !important; color: var(--ink) !important; }
.wtile:hover, .wtile:focus-visible { transform: none !important; border-color: #27272a !important; box-shadow: 0 0 0 1px #27272a !important; }
.wtile .wt-pat { display: none !important; }
.wtile .wt-logo { position: static !important; width: 26px !important; height: 26px !important; box-shadow: none !important; transform: none !important; }
.wtile .wt-name { position: static !important; max-width: none !important; font: 600 13px Inter, sans-serif !important; }
.wtile .wt-go { position: static !important; margin-left: auto; height: 30px !important; background: rgba(39, 39, 42, 0.06) !important; border: 0 !important; color: var(--ink) !important; }
.wtile .wt-go i { max-width: 140px !important; opacity: 1 !important; font: 600 13px Inter, sans-serif !important; }
.wtile:hover .wt-go { background: #27272a !important; color: #fff !important; }
.wpick { width: min(420px, 100%) !important; }

/* Launch / Trade: two buttons */
.hub-btns { display: grid; gap: 10px; }
.hub-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: #fff; border: 1px solid var(--glass-line); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.hub-btn:hover { border-color: #27272a; box-shadow: 0 0 0 1px #27272a; }
.hub-btn .hi { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: #27272a; color: #fff; }
.hub-btn .ht { flex: 1; min-width: 0; }
.hub-btn b { display: block; font: 600 13px Inter, sans-serif; }
.hub-btn small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.hub-btn .ha { font: 600 13px Inter, sans-serif; padding: 8px 12px; background: rgba(39, 39, 42, 0.06); white-space: nowrap; }
.hub-btn:hover .ha { background: #27272a; color: #fff; }
.hub-btn.locked { opacity: 0.6; }
#hub .sheet { width: min(460px, 100%) !important; }

/* trade pops: the SOL amount in bold, its dollar value under it */
.pop { flex-direction: column; align-items: center; gap: 0; border-radius: 10px !important; padding: 4px 10px !important; line-height: 1.15; font: 500 13px Inter, system-ui, sans-serif !important; }
.pop b { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 15px; }
.pop em { margin-left: 0 !important; font-size: 11px; font-weight: 600; opacity: 0.8; }
.pop.big b { font-size: 17px; }
.pop.buy, .pop.sell { color: #18181b !important; }
/* SOL amounts in notifications: bold, a little bigger, black */
.notice .solv { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 800; color: #18181b; vertical-align: -1px; }
.notice span .solv { font-size: 14px; }

/* buy and sell pops always sit above the building labels */
.pop { z-index: 20000 !important; }
/* Copy CA, styled like the links beside it */
.links .copy-ca { font: 600 13px Inter, sans-serif; color: #ffffff; background: var(--slate-900); border: 1px solid var(--slate-900); border-radius: 9px; padding: 6px 10px; cursor: pointer; }
.links .copy-ca:hover { opacity: 0.9; }
/* notifications: picture, then the title and the line under it, both centred on it */
.notice { align-items: center; gap: 12px; padding: 10px 18px 10px 10px !important; }
.notice > i, .notice > .av, .notice > img { width: 40px !important; height: 40px !important; border-radius: 11px; flex: none; }
.notice > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.notice > div > b { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.25; font-size: 14px; }
.notice > div > span { display: flex; align-items: center; gap: 6px; line-height: 1; font-size: 12px; white-space: nowrap; }
.notice .solv { vertical-align: 0; line-height: 1; }
.notice > div > span em { font-size: 12px; }
/* big trades: 10+ SOL a size up, 25+ flash while they're up */
.pop.whale b { font-size: 20px; }
.pop.whale em { font-size: 12px; }
.pop.huge { animation: popFlash 0.55s ease-in-out infinite alternate; }
@keyframes popFlash { from { filter: brightness(1); box-shadow: 0 4px 14px rgba(39, 39, 42, 0.16), 0 0 0 1px rgba(39, 39, 42, 0.1); } to { filter: brightness(1.35); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 24px 8px var(--glow, #ffffff); } }
.pop.huge.buy { --glow: rgba(34, 197, 94, 0.9); }
.pop.huge.sell { --glow: rgba(239, 68, 68, 0.9); }
/* the music: a speaker (mute) and a volume slider, left of the day/night switch */
.actions .music { display: flex; align-items: center; gap: 6px; height: var(--ctl, 38px); padding: 0 12px 0 6px; border-radius: 999px; background: var(--glass) !important; border: 1px solid var(--glass-line) !important; box-shadow: var(--glass-shadow) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.music .snd-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--slate-900); cursor: pointer; padding: 0; }
.music .snd-btn:hover { background: rgba(39, 39, 42, 0.08); }
.music.off .snd-btn { color: var(--slate-500); }
.music .snd-vol { -webkit-appearance: none; appearance: none; width: 84px; height: 4px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient(to right, var(--slate-900) var(--fill, 35%), rgba(39, 39, 42, 0.18) var(--fill, 35%)); }
.music .snd-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--slate-900); border: 2px solid #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.music .snd-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--slate-900); border: 2px solid #ffffff; }
@media (max-width: 760px) { .music .snd-vol { display: none; } .actions .music { padding: 0 5px; } }
/* building labels look like the HQ's: dark, white text (the ▲/▼ brightened for the dark) */
.lbl { background: #27272a !important; color: #ffffff !important; border-color: #27272a !important; }
.lbl span { color: #b1b1b3 !important; }
.lbl i { background-color: #3f3f46 !important; color: #d4d4d8 !important; }
.lbl em.up { color: #4ade80 !important; }
.lbl em.down { color: #f87171 !important; }
.lbl u { background: #ffffff !important; color: #27272a !important; }
.lbl.on { border-color: #ffffff !important; box-shadow: 0 0 0 1px #ffffff, 0 6px 18px rgba(39, 39, 42, 0.3) !important; }
/* a Trader's name on its tag: bold */
.atag b { font-weight: 800 !important; font-size: 12px !important; }
/* clicking round the city never selects text (inputs and addresses still can) */
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable], .mono, .desc, .hr-l a { -webkit-user-select: text; user-select: text; }