/* ==========================================================================
   market.css — TRADER MARKET, walkable 3D exchange hall
   Scene: bright ivory/porcelain marble hall (PAPER 0xedeae3), unchanged —
   same token family as network.css. The HUD floating over that hall is what
   this file styles.

   LIQUID GLASS PASS (2026-08-16, owner: "looking like vomit... i told you
   the glass thing is for trader. i want it high end"): the previous
   TERMINAL SHAPE PASS's flat squared terminal-bar language (2px radii, solid
   ink-block active states, hairline dock) is retired. Every HUD control now
   runs through two reusable glass utilities, --lg-dark and --lg-dark-strong
   (owner's own recipe, adapted DARK for this BRIGHT marble scene instead of
   his white-glass reference so text stays readable against a light floor):
   translucent near-black background + backdrop blur + a 1.4px gradient ring
   traced with a mask/exclude trick (an inner-highlight arc top and bottom,
   thin sides) so each chip reads as a lens sitting on the hall, not a flat
   dark rectangle. .lg-dark is the everyday weight (14px blur, thinner ring)
   for pills that sit directly on marble most of the time (top bar, nav,
   walk toggle); .lg-dark-strong is the heavier weight (40px blur, brighter
   ring) reserved for anything that needs to read as a distinct surface —
   the corner card and the three overlay panels, plus the active station
   pill and the floating popovers/toasts/walk-chip.

   Text on glass gets its own pair of tokens instead of the old --ink family:
   --ivory / --ivory-75 / --ivory-55 (primary/secondary/tertiary) and a new
   --mint-glass, a brighter mint than the base --mint token specifically so
   it still pops on a translucent near-black chip. --gold stays for the one
   accent it already owned ("Press E" walk chip, TC digits) and --up/--down
   are unchanged. --panel / --panel-solid / --ink family remain defined and
   still drive the no-WebGL #fallback screen, which is a full opaque light
   page, not a floating HUD control, so it's out of this pass's scope.

   Radius scale is the other repeal: --radius-pill is back to a true 999px
   pill (owner: "the glass thing is for trader... rounded-full pills ARE
   allowed now — the square language is REPEALED"), panels get a soft
   16–18px radius instead of the old 4px terminal corner.
   ========================================================================== */

:root{
  --paper:#edeae3;
  --porcelain:#f3f1ea;
  --panel:rgba(255,255,255,0.66);
  --panel-solid:#f8f6f0;
  --ink:#1c211f;
  --ink-muted:#565d59;
  --ink-faint:#8a908b;
  --line:rgba(28,33,31,0.14);
  --line-strong:rgba(28,33,31,0.4);
  --mint:#0e8f6b;
  --mint-deep:#0a6b51;
  --gold:#a8863c;
  --up:#1f9e68;
  --down:#cf5a4c;

  /* ---- LIQUID GLASS PASS: dark-glass-on-bright-marble tokens ---- */
  --mint-glass:#3ddc97;
  --ivory:#efe9dc;
  --ivory-75:rgba(239,233,220,0.75);
  --ivory-55:rgba(239,233,220,0.55);
  --ivory-40:rgba(239,233,220,0.4);
  --glass-bg:rgba(12,14,13,0.38);
  --glass-bg-dense:rgba(12,14,13,0.5);
  --glass-fallback:rgba(14,16,15,0.82);

  --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* one radius scale — every rounded corner in this file references one of
     these. LIQUID GLASS PASS: --radius-pill is a true pill again (was 2px
     terminal-square); panels get a soft 16–18px radius (was 4px). */
  --radius-pill:999px;
  --radius-lg:18px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-sm:0 12px 30px rgba(10,12,10,0.22);
  --shadow-md:0 20px 40px rgba(10,12,10,0.26);
  --shadow-lg:0 30px 70px rgba(10,12,10,0.34);

  /* every clickable control is at least this tall — mono, 44px */
  --btn-h:44px;

  /* live-measured by js/market.js (updateNavHeightVar); the fallback here
     only matters for the first paint before that JS runs. */
  --market-nav-h:64px;
}

*{box-sizing:border-box;}

html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

#market-canvas{
  position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--paper);
  touch-action:none;
}

/* ================= EQUITY REALISM PASS: vignette + film grain =================
   Sit above the WebGL canvas (z-index:0 default stacking) and below #hud
   (z-index:10) — always visible, never intercept clicks. Deliberately kept
   subtle: this is a light-toned ivory hall gaining depth at the edges, not a
   dark theme. */
#fx-vignette, #fx-grain{
  position:fixed;inset:0;z-index:5;pointer-events:none;
}
#fx-vignette{
  background:radial-gradient(120% 100% at 50% 42%, transparent 48%, rgba(15,14,11,0.32) 100%);
}
#fx-grain{
  opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ==========================================================================
   LIQUID GLASS UTILITIES — .lg-dark / .lg-dark-strong
   Applied as class hooks in floor.html (static controls) and appended into
   className strings in js/market.js (dynamically-built chips/popovers/
   panels). Every property that makes a chip *read as glass* (background,
   blur, ring, shadow) lives here once; component-specific rules below only
   ever add layout, font and text-color on top — never their own background/
   border/backdrop-filter, so the material stays one system everywhere.
   ========================================================================== */
.lg-dark, .lg-dark-strong{
  background:var(--glass-bg);
  background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.12), 0 8px 24px rgba(10,12,10,0.18);
  position:relative;
  overflow:hidden;
}
.lg-dark-strong{
  -webkit-backdrop-filter:blur(40px);
  backdrop-filter:blur(40px);
}
/* the ring: a 1.4px gradient traced around the chip's own edge via
   mask/exclude — brighter top+bottom arcs, thin sides, so it reads as a
   lens catching light, not a flat outline. Its own pseudo-element, so it
   never collides with a component's :hover tooltip or icon ::before/::after. */
.lg-dark::before, .lg-dark-strong::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.16) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.16) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.8;pointer-events:none;
  transition:opacity .2s ease;
}
.lg-dark-strong::before{
  background:linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.22) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.22) 80%, rgba(255,255,255,0.6) 100%);
}
/* hover = ring brightens, transform-only scale handled per-component below
   and gated behind prefers-reduced-motion further down this file. */
.lg-dark:hover::before, .lg-dark-strong:hover::before{ opacity:1; }

/* legibility escape hatch (acid test: bright marble behind a thin chip can
   still wash text out) — bump to this instead of reaching for pure black.
   Not applied by default; only where a probe showed a weak label. */
.lg-glass-dense{ background:var(--glass-bg-dense) !important; }

@supports not (backdrop-filter: blur(1px)){
  .lg-dark, .lg-dark-strong{ background:var(--glass-fallback); }
}

/* ================= HUD shell ================= */
#hud{
  position:fixed;inset:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:20px 22px;
  z-index:10;
}
#hud a, #hud button, #hud input{pointer-events:auto;}

#hud-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;
}
.market-top-right{display:flex;align-items:center;gap:10px;}

#fps-badge{
  font-size:10.5px;color:var(--ivory-55);
  border-radius:var(--radius-pill);padding:5px 12px;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}

#wallet-btn{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--btn-h);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ivory-75);
  border-radius:var(--radius-pill);
  padding:0 16px;cursor:pointer;
  transition:color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#wallet-btn:hover{color:var(--mint-glass);}
#wallet-btn:active{color:var(--mint-glass);}
#wallet-btn[disabled]{opacity:0.6;cursor:not-allowed;}
.wallet-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ivory-40);flex:none;
}
.wallet-dot-connected{background:var(--mint-glass);box-shadow:0 0 6px rgba(61,220,151,0.7);}
#wallet-btn.wallet-connected{color:var(--mint-glass);}

/* ================= DEMO / REAL mode toggle ================= */
.mode-pill{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ivory-75);
  border-radius:var(--radius-pill);padding:0 15px;cursor:pointer;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mode-pill:hover{color:var(--gold);}
.mode-pill.mode-real{
  color:#f4faf7;background:var(--mint) !important;background-blend-mode:normal !important;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
.mode-pill.mode-real::before{ opacity:0; }
.mode-pill.mode-real:hover{background:var(--mint-deep) !important;}

/* ================= wallet account popover (address + copy + disconnect) ================= */
.wallet-popover{
  position:fixed;z-index:32;width:240px;padding:14px 16px 16px;
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
.wallet-popover.visible{opacity:1;transform:translateY(0);}
.wallet-popover-address{
  margin:0 0 10px;font-size:12px;color:var(--ivory);word-break:break-all;line-height:1.4;
}
.wallet-popover-copy, .wallet-popover-disconnect{
  width:100%;min-height:36px;margin-top:8px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--radius-sm);cursor:pointer;
}
.wallet-popover-copy{
  background:rgba(255,255,255,0.06);border:1px solid rgba(239,233,220,0.16);color:var(--ivory-75);
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wallet-popover-copy:hover{color:var(--mint-glass);border-color:rgba(61,220,151,0.4);}
.wallet-popover-copy:active{color:var(--mint-glass);}
.wallet-popover-mode{margin:10px 0 0;font-size:10.5px;color:var(--ivory-55);}
.wallet-popover-disconnect{
  background:rgba(207,90,76,0.14);border:1px solid rgba(207,90,76,0.4);color:#e8887a;
}
.wallet-popover-disconnect:hover{background:rgba(207,90,76,0.22);}
.wallet-popover-disconnect:active{background:rgba(207,90,76,0.3);}

/* ================= wallet toast (connect/disconnect/gate messages) ================= */
.wallet-toast{
  position:fixed;left:50%;top:76px;z-index:33;transform:translate(-50%,-6px);
  border-radius:var(--radius-pill);
  padding:10px 18px;font-size:11.5px;color:var(--ivory);box-shadow:var(--shadow-sm);
  opacity:0;transition:opacity .22s ease, transform .22s ease;pointer-events:none;
}
.wallet-toast a{color:var(--mint-glass);}
.wallet-toast[hidden]{display:none;}
.wallet-toast.visible{opacity:1;transform:translate(-50%,0);}

.icon-btn{
  pointer-events:auto;
  width:var(--btn-h);height:var(--btn-h);border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  color:var(--ivory-75);cursor:pointer;
  font-family:var(--font-mono);
  transition:color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.icon-btn:hover{color:var(--mint-glass);}
.icon-btn:active{color:var(--mint-glass);}
.icon-btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible{
  outline:2px solid var(--mint-glass);outline-offset:2px;
}

/* ================= settings popover ================= */
#settings-popover{
  position:absolute;top:64px;right:22px;
  width:220px;padding:14px 16px 16px;
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  pointer-events:auto;
}
.settings-label{
  margin:0 0 8px;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ivory-55);
}
#res-scale{width:100%;accent-color:var(--mint-glass);}
.settings-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
#res-scale-value{font-size:12px;color:var(--ivory);}
.settings-hint{font-size:9.5px;color:var(--ivory-55);letter-spacing:.03em;}

/* CC-BY ATTRIBUTION (2026-08-18, cryptobro NPC wire): trader-npc-cryptobro.glb
   is CC-BY 4.0 (J-Toastie), so the site must carry visible credit -- tucked
   into the existing settings popover rather than a new UI surface, same
   dark-glass/tiny-text grammar as the audio row above it (border-top row,
   9-9.5px text). Fixed 220px popover width (see #settings-popover above)
   wraps this fine at both 1440 and 390 -- no layout disruption, just a
   taller popover. */
.settings-credits-row{margin-top:14px;padding-top:14px;border-top:1px solid rgba(239,233,220,0.16);}
.settings-credits-text{margin:0;font-size:9px;line-height:1.5;color:var(--ivory-55);letter-spacing:.01em;}

/* ================= station info card ================= */
/* Corner card discipline: top-left, capped at 300px, never a modal. Full
   detail for 5s (js/market.js schedules it), then it fades to a slim title
   chip (.collapsed) so it never competes with the hall — hover or tap on
   the collapsed chip brings the full card back. LIQUID GLASS PASS: strong
   weight (40px blur) since it sits directly on marble and needs to read as
   a distinct surface at a glance. */
#station-card{
  position:absolute;left:22px;top:64px;
  max-width:min(300px, calc(100vw - 44px));
  border-radius:var(--radius-md);padding:18px 20px;
  box-shadow:var(--shadow-sm);
  pointer-events:auto;cursor:default;
  transition:max-width .3s cubic-bezier(.16,1,.3,1), padding .3s cubic-bezier(.16,1,.3,1);
  animation:market-card-in .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes market-card-in{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
#station-eyebrow{
  margin:0 0 6px;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mint-glass);
}
#station-title{
  margin:0 0 8px;font-family:var(--font-serif);font-weight:400;font-size:24px;
  letter-spacing:-0.01em;color:var(--ivory);
}
#station-desc{
  margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ivory-75);
}
#station-note{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--gold);border:1px solid rgba(168,134,60,0.45);
  border-radius:var(--radius-pill);padding:5px 11px;background:rgba(168,134,60,0.12);
}
#station-note[hidden]{display:none;}

#station-card.collapsed{
  max-width:fit-content;padding:10px 18px;
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
}
#station-card.collapsed #station-eyebrow{margin:0;font-size:9px;}
#station-card.collapsed #station-title{margin:0;font-size:14px;}
#station-card.collapsed #station-desc,
#station-card.collapsed #station-note{display:none;}

/* ================= bottom hint ================= */
/* LIQUID GLASS PASS: was bare centered text floating directly on marble —
   the acid test (legibility over bright marble) failed it outright on a
   light patch of floor, so it's now a small lg-dark pill sized to its own
   content instead of a full-width text line. Same bottom offset formula,
   same copy, same "never overlaps the nav row" contract. */
#market-hint{
  position:absolute;bottom:calc(var(--market-nav-h) + 40px);left:50%;
  transform:translateX(-50%);
  display:inline-block;max-width:calc(100vw - 32px);
  margin:0;padding:7px 16px;border-radius:var(--radius-pill);
  font-size:10.5px;letter-spacing:.06em;color:var(--ivory-75);white-space:nowrap;
}

/* ================= station switcher + walk toggle row ================= */
.market-nav-row{
  display:flex;align-items:center;gap:10px;
  align-self:center;max-width:calc(100vw - 32px);
}
/* Nav bar: one rounded-full lg-dark bar (was a flat hairlined terminal
   dock, border-radius:0) — the container itself carries the glass class in
   floor.html; this rule only adds the pill layout on top of it. */
#station-nav{
  display:flex;gap:2px;
  border-radius:var(--radius-pill);padding:5px;
  pointer-events:auto;overflow-x:auto;
}
#station-nav::-webkit-scrollbar{display:none;}
/* NAV IN NUMBERS (owner: "make it in number") — compact numbers ("00".."06",
   44px min touch target) by default so the whole row reads at a glance
   without every station's full name on screen at once. Only the ACTIVE
   pill expands to show its name via .station-label's max-width transition
   (200ms ease, no bounce); inactive pills reveal their name as a
   hover/focus tooltip instead (below). */
.station-btn{
  display:flex;align-items:center;gap:0;flex:none;min-height:var(--btn-h);min-width:var(--btn-h);
  justify-content:center;position:relative;overflow:hidden;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--ivory-55);background:none;border:none;
  padding:10px 14px;border-radius:var(--radius-pill);cursor:pointer;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.station-num{
  font-size:9.5px;color:var(--ivory-40);font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}
.station-label{
  display:inline-block;max-width:0;margin-left:0;opacity:0;overflow:hidden;
  transition:max-width .2s ease, margin-left .2s ease, opacity .2s ease;
  vertical-align:middle;
}
/* transparent-until-active pills: hover = a soft ivory ring, not a fill */
.station-btn:hover{color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(239,233,220,0.3);}
.station-btn:active{box-shadow:inset 0 0 0 1.5px rgba(239,233,220,0.4);}
/* ACTIVE STATION: lg-dark-strong pill (own copy of the recipe, since the
   class is toggled by data — not a static hook) with mint text + a small
   mint dot ahead of the number. */
.station-btn.active{
  color:var(--mint-glass);
  background:var(--glass-bg);background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.12), 0 8px 24px rgba(10,12,10,0.18);
}
.station-btn.active::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.22) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.22) 80%, rgba(255,255,255,0.6) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.station-btn.active .station-num{color:rgba(61,220,151,0.75);}
.station-btn.active .station-num::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--mint-glass);box-shadow:0 0 6px rgba(61,220,151,0.65);
  margin-right:6px;vertical-align:middle;
}
.station-btn.active .station-label{max-width:150px;margin-left:8px;opacity:1;}

/* hover/focus tooltip for the compact (inactive) pills — gated to real
   hover+fine-pointer so a tap on touch never leaves a phantom label stuck
   open; absolutely positioned so it can never shift the row. */
@media (hover:hover) and (pointer:fine){
  .station-btn:not(.active):hover::after,
  .station-btn:not(.active):focus-visible::after{
    content:attr(data-name);
    position:absolute;left:50%;bottom:calc(100% + 8px);
    transform:translateX(-50%);
    background:var(--glass-fallback);border:1px solid rgba(239,233,220,0.18);
    border-radius:var(--radius-sm);padding:6px 10px;
    font-family:var(--font-mono);font-size:10.5px;font-weight:600;
    letter-spacing:.04em;color:var(--ivory);white-space:nowrap;
    box-shadow:var(--shadow-sm);pointer-events:none;z-index:1;
  }
}

.walk-toggle-btn{
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--mint-glass);
  border-radius:var(--radius-pill);
  padding:10px 18px;cursor:pointer;white-space:nowrap;
  min-height:var(--btn-h);
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.walk-toggle-btn.active{
  color:#0c1210;background:var(--mint-glass) !important;background-blend-mode:normal !important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 8px 20px rgba(61,220,151,0.32);
}
.walk-toggle-btn.active::before{ opacity:0; }

/* "Press E — <Station>" proximity chip, bottom-center — offset is measured
   clear of the nav row (see --market-nav-h) so it can never overlap it.
   Gold accent kept (owner's existing "prompt" color) on top of the strong
   glass weight, so the ring underneath is overridden by an explicit
   gold border instead. */
.walk-chip{
  position:fixed;left:50%;bottom:calc(var(--market-nav-h) + 48px);z-index:18;
  transform:translate(-50%,6px);
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);
  border:1px solid rgba(168,134,60,0.55);
  color:var(--gold);border-radius:var(--radius-pill);
  padding:0 18px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;pointer-events:auto;font-family:var(--font-mono);
  opacity:0;transition:opacity .25s ease, transform .25s ease;
  box-shadow:var(--shadow-sm);
}
.walk-chip::before{ opacity:0; }
.walk-chip[hidden]{display:none;}
.walk-chip.visible{opacity:1;transform:translate(-50%,0);}

/* walk-mode teleport veil (pill-click station hop): a "small fade" over the
   500ms move so it reads as a soft cut, not a jump-cut. Opacity is driven
   entirely by JS (pulseWalkFade, market.js) via inline style.transition/
   .opacity -- this rule only sets the static base (full-bleed, above the
   3D canvas, below any modal panel, never eats clicks). */
.walk-fade{
  position:fixed;inset:0;z-index:16;background:var(--ink);
  opacity:0;pointer-events:none;
}

/* mobile move/look joystick pair — transparent circles + thumb, WALK only,
   <=768px. Kept as literal circles (functionally round — thumb travels in
   a circle), untouched by the pill-radius token.
   OVERLAP FIX (2026-08-16 QA pass, owner: "make trader work everywhere"):
   was a flat bottom:26px, which put the joysticks directly under the
   station-nav row once it wraps to two lines on a narrow phone (<=390px,
   probe-confirmed screenshot: the "01/02/../06" pill row painted straight
   over both thumb circles). bottom:calc(var(--market-nav-h) + 26px) is the
   same clear-of-the-nav-row pattern .walk-chip already uses above — the
   nav row's real live-measured height (js/market.js updateNavHeightVar),
   not a per-breakpoint guess, so it stays correct whether the row is one
   line or wrapped to two. */
.walk-joystick{
  position:fixed;bottom:calc(var(--market-nav-h) + 26px);width:96px;height:96px;border-radius:50%;
  background:rgba(12,14,13,0.22);border:1px solid rgba(239,233,220,0.28);
  z-index:19;touch-action:none;
}
.walk-joystick[hidden]{display:none;}
.walk-joystick-move{left:22px;}
.walk-joystick-look{right:22px;}
.walk-joystick-thumb{
  position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;background:rgba(239,233,220,0.34);border:1px solid rgba(239,233,220,0.4);
  pointer-events:none;
}
@media (min-width:769px){ .walk-joystick{display:none;} }

@media (max-width:720px){
  /* station-btn is already compact-by-default (numbers only) from the base
     rule above — no override needed here. */
  #market-hint{display:none;}
  .station-btn{padding:10px 12px;font-size:9.5px;}
  #station-card{max-width:min(300px, calc(100vw - 44px));}
  .market-nav-row{flex-wrap:wrap;justify-content:center;}
}
@media (max-width:480px){
  #station-nav{max-width:calc(100vw - 96px);}
  .walk-chip{font-size:10px;padding:0 14px;}
  /* MOBILE HUD REACHABILITY (INTEGRATION_2026-08-18): the top-right icon
     cluster (X / wallet / TC chip / chat / fps / sound / settings) no longer
     fits one row at 390px once the chat toggle joined it -- was silently
     overflowing past the viewport edge (unreachable, not just visually
     cramped). Wraps to a second row instead of clipping off-screen; nothing
     removed, nothing hidden, every control stays reachable. */
  .market-top-right{flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
  #hud-top{flex-wrap:wrap;}
}

/* ---- transform-only hover scale for the interactive glass controls,
   gated behind prefers-reduced-motion so a reduced-motion user never gets
   the lift. Ring/color transitions above stay unconditional; only the
   scale itself is gated. ---- */
@media (prefers-reduced-motion: no-preference){
  #wallet-btn:hover, .icon-btn:hover, .mode-pill:hover, .walk-toggle-btn:hover,
  .station-btn:hover, .market-panel-close:hover,
  .pit-place-btn:hover:not(:disabled), .sentiment-vote-btn:hover:not(:disabled),
  .pit-dir-btn:hover:not(:disabled), .wallet-popover-copy:hover, .wallet-popover-disconnect:hover{
    transform:scale(1.04);
  }
}

/* ================= fallback (no WebGL) ================= */
/* Full opaque light page shown in place of the canvas — not a floating HUD
   control, out of the LIQUID GLASS PASS's scope; unchanged. */
#fallback[hidden]{display:none}
#fallback{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(14,143,107,0.10), transparent 70%),
    var(--paper);
  padding:24px;
}
.fallback-inner{max-width:560px;text-align:center;}
.fallback-eyebrow{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mint);margin:0 0 14px;
}
#fallback h1{
  font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1.15;
  letter-spacing:-0.01em;color:var(--ink);margin:0 0 14px;
}
.fallback-copy{color:var(--ink-muted);font-size:14.5px;line-height:1.6;margin:0 0 26px;}
.fallback-links{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;}
.market-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--mint);text-decoration:none;
  border-bottom:1px solid rgba(14,143,107,0.35);padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease, gap .15s ease;
}
.market-link:hover{color:var(--mint-deep);border-color:var(--mint-deep);gap:9px;}

/* ================= PHASE 2: wallet chip + station panels (pit / sentiment / vault) ================= */
.wallet-coin-chip{
  /* same lg-dark family as its #wallet-btn and #fps-badge neighbors in the
     top bar. Bordered pill with tabular numerals — exchange-board TC chip,
     gold digits kept as the one accent color it already owned. */
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em;color:var(--gold);
  border-radius:var(--radius-pill);padding:8px 15px;
  white-space:nowrap;
}

.market-panel{
  position:fixed;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.market-panel[hidden]{display:none;}
.market-panel-backdrop{
  position:absolute;inset:0;
  background:rgba(10,12,10,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* LIQUID GLASS PASS: the overlay panel itself carries lg-dark-strong (class
   hook added in the market.js template string) — this rule only adds
   layout on top. Inner content (pit form fields, bet rows, odds rows) keeps
   its existing structure/spacing; only its colors are retinted below so
   labels and values stay legible against the now-dark glass sheet instead
   of the old porcelain-card background. */
.market-panel-inner{
  position:relative;width:100%;max-width:640px;max-height:calc(100vh - 48px);
  overflow-y:auto;
  border-radius:var(--radius-lg);padding:26px 28px 24px;
  box-shadow:var(--shadow-lg);
  animation:market-card-in .3s cubic-bezier(.16,1,.3,1) both;
}
.market-panel-close{
  position:absolute;top:12px;right:12px;width:var(--btn-h);height:var(--btn-h);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);border:1px solid rgba(239,233,220,0.2);background:rgba(255,255,255,0.06);
  color:var(--ivory-75);font-size:18px;line-height:1;cursor:pointer;font-family:var(--font-mono);
  transition:color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.market-panel-close:hover{color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(239,233,220,0.35);}
.market-panel-close:active{box-shadow:inset 0 0 0 1.5px rgba(239,233,220,0.45);}
.market-panel-eyebrow{
  margin:0 0 6px;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mint-glass);
}
.market-panel-title{
  margin:2px 0 10px;font-family:var(--font-serif);font-weight:400;font-size:26px;
  letter-spacing:-0.01em;color:var(--ivory);
}
/* header bar: eyebrow + title + sub read as one block, hairline-underlined
   and clear of the body below. */
.market-panel-sub{
  margin:0 0 18px;padding-bottom:18px;font-size:13px;line-height:1.5;color:var(--ivory-75);
  border-bottom:1px solid rgba(239,233,220,0.16);
}

.pit-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:640px){.pit-layout{grid-template-columns:1fr;}}

.pit-form{display:flex;flex-direction:column;gap:12px;}
.pit-field{
  display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ivory-55);
}
.pit-field select, .pit-field input{
  font-family:var(--font-mono);font-size:14px;color:var(--ivory);
  background:rgba(255,255,255,0.06);border:1px solid rgba(239,233,220,0.18);border-radius:var(--radius-sm);
  padding:9px 10px;min-height:var(--btn-h);
}
.pit-badge{margin:-4px 0 0;font-size:10px;letter-spacing:.04em;color:var(--ivory-55);}
.pit-badge.pit-badge-live{color:var(--up);}
.pit-dir-row{display:flex;gap:8px;}
.pit-dir-btn{
  flex:1;min-height:var(--btn-h);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.06em;
  padding:0 11px;border-radius:var(--radius-sm);border:1px solid rgba(239,233,220,0.18);background:rgba(255,255,255,0.06);
  color:var(--ivory-75);cursor:pointer;transition:box-shadow .15s ease, transform .15s ease;
}
.pit-dir-btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(239,233,220,0.4);}
.pit-dir-btn:active:not(:disabled){box-shadow:inset 0 0 0 1.5px rgba(239,233,220,0.5);}
.pit-dir-btn.pit-dir-up.active{background:rgba(31,158,104,0.2);border-color:var(--up);color:#5fe0a3;}
.pit-dir-btn.pit-dir-down.active{background:rgba(207,90,76,0.2);border-color:var(--down);color:#f0958a;}
.pit-place-btn{
  margin-top:4px;min-height:var(--btn-h);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:#0c1210;background:var(--mint-glass);
  border:none;border-radius:var(--radius-sm);padding:0 13px;cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.pit-place-btn:hover{background:#57e6a7;}
.pit-place-btn:active:not(:disabled){background:#57e6a7;box-shadow:inset 0 2px 6px rgba(10,12,10,0.35);}
.pit-place-btn:disabled{opacity:0.5;cursor:not-allowed;background:var(--ivory-40);}
.pit-field select:disabled, .pit-field input:disabled, .pit-dir-btn:disabled{
  opacity:0.5;cursor:not-allowed;
}
.pit-form-msg{min-height:14px;margin:0;font-size:11px;color:var(--ivory-55);}

.pit-side{display:flex;flex-direction:column;gap:20px;min-width:0;}
.pit-odds-note{margin:0 0 8px;font-size:11px;color:var(--ivory-55);}

.pit-bets-list, .pit-odds-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:220px;overflow-y:auto;
}
.pit-bet-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(239,233,220,0.14);border-radius:var(--radius-sm);padding:9px 11px;
}
.pit-bet-head{font-size:11px;color:var(--ivory);}
.pit-bet-status{font-size:10.5px;font-weight:700;color:var(--ivory-55);white-space:nowrap;}
.pit-bet-row.pit-bet-won .pit-bet-status{color:var(--up);}
.pit-bet-row.pit-bet-lost .pit-bet-status{color:var(--down);}
.pit-bet-row.pit-bet-push .pit-bet-status{color:var(--gold);}
.pit-bet-empty, .pit-odds-loading{font-size:12px;color:var(--ivory-55);padding:6px 2px;}

.pit-odds-row{background:rgba(255,255,255,0.05);border:1px solid rgba(239,233,220,0.14);border-radius:var(--radius-sm);padding:9px 11px;}
.pit-odds-question{margin:0 0 4px;font-size:12px;color:var(--ivory);line-height:1.35;}
.pit-odds-meta{margin:0;font-size:10px;color:var(--ivory-55);letter-spacing:.02em;}
/* honest handoff link (market.js patch P4, TraderPoly.marketUrl) -- real
   Polymarket URL, opened in a new tab, never shown before the URL exists */
.pit-odds-link{display:inline-block;margin-top:6px;font-size:10.5px;color:var(--mint-glass);text-decoration:none;letter-spacing:.02em;}
.pit-odds-link:hover{text-decoration:underline;}

.sentiment-vote-row{display:flex;gap:12px;margin-bottom:14px;}
.sentiment-vote-btn{
  flex:1;min-height:calc(var(--btn-h) + 16px);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.06em;
  padding:0 16px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid rgba(239,233,220,0.18);
  background:rgba(255,255,255,0.06);color:var(--ivory-75);
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sentiment-vote-btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px currentColor;}
.sentiment-vote-btn:active:not(:disabled){box-shadow:inset 0 0 0 1.5px currentColor;}
.sentiment-vote-bull:hover:not(:disabled){border-color:var(--up);color:#5fe0a3;}
.sentiment-vote-bear:hover:not(:disabled){border-color:var(--down);color:#f0958a;}
.sentiment-vote-btn:disabled{opacity:.5;cursor:not-allowed;}

.vault-balance{font-size:14px;color:var(--ivory);margin:0 0 4px;}
.vault-balance strong{color:var(--gold);}
.vault-mode-row{margin:0 0 18px;font-size:10.5px;color:var(--ivory-55);letter-spacing:.03em;}
.vault-mode-row.vault-mode-real{color:var(--mint-glass);}

/* ================= REAL-mode honest gate (pit panel) ================= */
.pit-real-gate{
  margin:0 0 18px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(168,134,60,0.14);border:1px solid rgba(168,134,60,0.4);
}
.pit-real-gate[hidden]{display:none;}
.pit-real-gate-title{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--ivory);}
.pit-real-gate-addr{margin:0;font-size:10.5px;color:var(--gold);letter-spacing:.02em;}

/* position card focus highlight (THE SAFE -> vault bet-history row) */
.pit-bet-row.pit-bet-focused{
  border-color:var(--gold);box-shadow:0 0 0 2px rgba(168,134,60,0.35);
}

@media (max-width:480px){
  .market-panel{padding:12px;}
  .market-panel-inner{padding:20px 18px 18px;border-radius:var(--radius-md);}
  .market-panel-title{font-size:22px;}
}

/* VAULT VISIBILITY FIX (2026-08-16 THE FLOOR fixes, owner: "when i go in
   the vault i can barely see the visual"): every overlay panel shares
   .market-panel above -- fixed, centered, full-bleed 0.5-opacity dark
   backdrop. For the pit/sentiment forms that's fine (there's no scene
   detail behind them worth seeing); for THE VAULT it sat dead center over
   the wall safe's own dark alcove and stacked its own dark scrim on top --
   "double darkness," the safe (and the open shutter/shelf/gold-bar
   flourishes THE VAULT panel's onOpen hook plays, see openVaultDoor in
   market.js) effectively invisible behind it. Vault-only, docked wide
   (>=641px -- narrow phones keep the standard centered layout, this
   panel/safe split isn't the mobile-responsive concern this pass covers):
   pushed to the right edge and capped narrower (an info panel, not a form,
   doesn't need the shared 640px form width) so the safe stays in view
   beside it, plus a much lighter scrim so the 3D scene reads through
   instead of dimming under it. Interior brightness (+40% shelf glow strips
   + cabinet spot while open) is handled in market.js, setVaultInteriorBright
   -- this rule only handles what's covering the safe, not how lit it is. */
@media (min-width:641px){
  #vault-panel{justify-content:flex-end;padding-right:40px;}
  #vault-panel .market-panel-inner{max-width:380px;}
}
#vault-panel .market-panel-backdrop{background:rgba(10,12,10,0.12);}