/*
 * Hatmas Market — shared theme
 * Stock-terminal aesthetic. Near-black backgrounds, amber primary,
 * vivid green/red ticks, monospace numbers with tabular figures.
 */

/* Inter + JetBrains Mono.
 *
 * Inter — designed by Rasmus Andersson specifically for screen UI.
 * The default sans for Vercel, Linear, Stripe, GitHub-y dashboards.
 * Reads as "serious data product" without leaning generic; ships
 * 400/500/600/700 so we get real weights instead of synthesized.
 *
 * JetBrains Mono — designed for code editors with optimized
 * vertical metrics, tabular figures, and clear digit-vs-letter
 * discrimination. Perfect for price numbers / portfolio values
 * where 0/O and 1/l/I must not blur.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Bebas+Neue&display=swap');

:root {
  /* ─── Hatmas brand palette (May 2026) ───────────────────────
     Five-color brand system, with white added for body legibility:
       #202C39  Jet Black      — backgrounds, deepest surface
       #7D98A1  Cool Steel     — secondary text, borders, muted UI
       #DF2935  Scarlet Rush   — loss / down / danger
       #F5F3BB  Lemon Chiffon  — highlight flashes (price tick,
                                 preview banner) only
       #DFA06E  Light Bronze   — primary accent / call-to-action
       #FFFFFF  White          — primary body text (added separately
                                 from the brand palette for the bulk
                                 of long-form reading)
     The palette deliberately has no green; "up" indicators reuse
     Light Bronze so positive movement shares the accent treatment. */
  --bg:        #202C39;     /* Jet Black — page background */
  --bg-2:      #28344A;
  --panel:     #2A3645;     /* lifted panel surface */
  --panel-hi:  #344252;
  --border:    rgba(125, 152, 161, 0.22);   /* Cool Steel @ low alpha */
  --border-hi: #7D98A1;     /* Cool Steel — hover/active border */
  --grid:      #2B3845;
  --text:      #FFFFFF;     /* White — primary body text */
  --text-dim:  #9FB4BB;     /* Cool Steel (lightened) — secondary text, AA 4.5:1 on all surfaces */
  --text-fade: rgba(159, 180, 187, 0.78);   /* faded meta text — AA 4.5:1 on page bg */
  --accent:    #DFA06E;     /* Light Bronze — primary accent */
  --accent-hi: #E8B583;
  --green:     #DFA06E;     /* gain — strict palette reuses Bronze */
  --green-bg:  rgba(223, 160, 110, 0.10);
  --red:       #FF6B73;     /* Scarlet Rush (lightened) — loss, AA 4.5:1 on page bg */
  --red-bg:    rgba(223, 41, 53, 0.10);
  --tick-flash:#F5F3BB;     /* Lemon Chiffon flash on price update */

  /* ─── Typography ───────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono',
               Consolas, 'Courier New', monospace;
  /* Display face for page-level identity ONLY (hero, god name,
     portfolio name). Bebas Neue is the webfont sibling of the Big
     Noodle Titling used on stream overlays + YouTube thumbnails —
     same condensed all-caps DNA, so the site finally shares the
     channel's visual identity. Body text and section labels stay
     Inter/JetBrains; restraint keeps it from looking like a poster. */
  --font-display: 'Bebas Neue', 'Big Noodle Titling', Impact,
                  'Arial Narrow', sans-serif;

  /* ─── Surface metrics ─────────────────────────────────────── */
  --radius-sm: 3px;
  --radius:    4px;
  --radius-lg: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

body {
  /* very subtle vertical gradient — not flat, gives terminal depth.
     Bottom stop is a slightly deeper tint of Jet Black so the page
     still has gradient lift on big screens. */
  background-image:
    linear-gradient(180deg, var(--bg) 0%, #151E28 100%);
  background-attachment: fixed;
}

/* ─── Numbers always monospace + tabular ──────────────────────── */
.num,
.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums;
}

/* Headers — slightly tracked-out, terminal feel */
h1, h2, h3 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  font-weight: 600;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

/* Selection color */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Scrollbar — subtle dark, doesn't fight the aesthetic */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ─── Shared utility classes ──────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
}
.tag.green  { color: var(--green); border-color: var(--green); }
.tag.red    { color: var(--red);   border-color: var(--red); }
.tag.accent { color: var(--accent); border-color: var(--accent); }

.up    { color: var(--green) !important; }
.down  { color: var(--red)   !important; }
.muted { color: var(--text-dim) !important; }

/* "SECTION TITLE" — the header that goes above panels. Set in the
 * display face (Bebas Neue — same condensed DNA as the stream
 * overlays and thumbnails) so sections read as channel-brand
 * headers, not terminal log lines. Opens with a skewed bronze bar
 * (a quieter echo of the old // mark) and closes with a hairline
 * rule fading right. */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1;
  color: var(--text);
  margin: 0 0 12px;
}
.section-title::before {
  content: '';
  width: 5px;
  height: 15px;
  flex-shrink: 0;
  background: var(--accent);
  transform: skewX(-14deg);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ─── Tab row (small mono pills, terminal-style) ─────────────── */
.tab-row {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.tab {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ─── Icon-style toggle (custom vs official) ───────────────── */
.icon-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
  margin-right: 12px;
  white-space: nowrap;
}
.icon-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  /* Light Bronze @ low alpha — matches --accent (#DFA06E). */
  background: rgba(223, 160, 110, 0.06);
}

/* Right-side cluster in the brand-band */
.brand-band .right-cluster {
  display: flex;
  align-items: center;
  gap: 0;
}

/* On phones the cluster (auth chip + Market/Community/Events) is
 * wider than the viewport — let the band wrap instead of forcing
 * a horizontal scrollbar on the whole page. */
@media (max-width: 640px) {
  .brand-band { flex-wrap: wrap; row-gap: 6px; }
  .brand-band .right-cluster {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
}

/* ─── Twitch stream embed (shared landing + god pages) ───────── */
.stream-section {
  margin: 16px 0 24px;
}
.stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  gap: 12px;
  flex-wrap: wrap;
}
.stream-header .title {
  flex: 1;
  min-width: 200px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 13px;
}
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.live-indicator .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: livepulse 1.6s infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.9); }
}
.stream-meta-right {
  flex-shrink: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}
.stream-meta-right .viewers { color: var(--accent); font-weight: 600; }

.now-playing-line {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.now-playing-line .god {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.stream-grid {
  display: flex;
  gap: 6px;
  width: 100%;
}
.stream-player, .stream-chat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.stream-player { flex: 2; height: 480px; }
.stream-chat   { flex: 1; height: 480px; min-width: 280px; }
.stream-player iframe, .stream-chat iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 880px) {
  .stream-grid { flex-direction: column; }
  .stream-player {
    flex: none;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;  /* 16:9 */
  }
  .stream-chat {
    flex: none;
    width: 100%;
    height: 360px;
  }
}

/* Preview mode banner */
.preview-banner {
  /* Lemon Chiffon @ alpha — matches --tick-flash (#F5F3BB). */
  background: rgba(245, 243, 187, 0.10);
  border: 1px solid rgba(245, 243, 187, 0.45);
  color: var(--tick-flash);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
}

/* ─── Shared "ambient" polish (every page) ─────────────────────
 *
 * These rules were originally inline in landing.html. Hoisted up
 * so portfolio / god / community pages get the same chart-grid
 * background and brand-band offline state without duplicating
 * CSS per page.
 */

/* Subtle bronze chart-grid pattern fixed to the viewport. Sells the
 * terminal-depth feel without competing with content (~3% opacity).
 * Stacked over the existing dark gradient by re-declaring the body
 * background-image as a layer list — the grid sits on top of the
 * gradient. The two rgba values are Light Bronze (#DFA06E) at ~3%
 * alpha; keep them in sync with --accent if the palette ever changes. */
html body {
  background-image:
    linear-gradient(rgba(223, 160, 110, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 160, 110, 0.030) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg) 0%, #151E28 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  background-attachment: fixed;
}

/* Brand band: shared offline/live treatment. Pages that have a
 * .brand-band .status pill (community, landing) get OFFLINE state
 * styling for free via the .offline modifier toggled by JS. */
.brand-band .status .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  margin-right: 6px;
  vertical-align: middle;
}
.brand-band .status.offline .dot {
  background: var(--text-fade);
  box-shadow: none;
}
.brand-band .status.offline {
  color: var(--text-fade);
}

/* Hero kicker — the small tracked-out mono label that goes above
 * a page title. Used on landing, available on any page that wants
 * to introduce itself visually. */
.kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── Reduced-motion ───────────────────────────────────────────
 * Respect the user's OS / browser preference for less motion.
 * Pauses the scrolling ticker tape and the LIVE-pulse dot so
 * vestibular-sensitive viewers (or anyone who set the OS toggle)
 * don't get a constantly-animating page. Static state still
 * conveys all the same info — the data is in the text, not the
 * motion. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track            { animation: none !important; }
  .live-indicator .dot     { animation: none !important; }
  .platform-pill .pip      { animation: none !important; }
  .brand-band .status .dot { box-shadow: none !important; }
}

/* ─── Website login (auth.js) ─────────────────────────────────────
   Auth chip + market state pill rendered into .brand-band by
   /auth.js on every page. Plain text, no emoji (Tone rule). */
.auth-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}
.auth-avatar {
  width: 18px;
  height: 18px;
  border-radius: 0;       /* sharp corners — brand */
  border: 1px solid var(--border);
  display: block;
}
.auth-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}
.auth-name:hover { color: var(--accent); }
.market-chip {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-right: 10px;
  white-space: nowrap;
}
.market-chip.open   { color: var(--green); border-color: var(--green); }
.market-chip.closed { color: var(--text-dim); }
/* Cross-platform badge in the auth chip: shows when the logged-in
   identity has its other platform linked (YT Linked on a Twitch
   session, Linked to Twitch on a YouTube session). */
.linked-chip {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  color: var(--green);
  white-space: nowrap;
  cursor: default;
}

/* ─── Trade panel (portfolio + god pages) ───────────────────────── */
.trade-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.trade-row input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  min-width: 0;
}
.trade-row input:focus { outline: none; border-color: var(--accent); }
.trade-row .t-god    { flex: 2 1 140px; }
.trade-row .t-amount { flex: 1 1 100px; }
/* God picker dropdown — replaces the native datalist popup, whose
   height can't be capped by CSS. Short list, scrolls inside. */
.t-god-wrap { position: relative; flex: 2 1 140px; display: flex; }
.t-god-wrap .t-god { flex: 1 1 auto; width: 100%; }
.t-god-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 198px;   /* ~6 rows, then scroll */
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 30;
}
.t-god-menu.open { display: block; }
.t-god-menu .opt {
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.t-god-menu .opt:hover,
.t-god-menu .opt.active {
  background: var(--panel);
  color: var(--accent);
}
.trade-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.trade-btn.buy:hover  { border-color: var(--green); color: var(--green); }
.trade-btn.sell:hover { border-color: var(--red);   color: var(--red); }
.trade-btn:disabled   { opacity: 0.4; cursor: default; }
.trade-sub {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-sub .num, .trade-sub [data-num] { font-family: var(--font-mono); }
.trade-msg {
  font-family: var(--font-sans);
  font-size: 12px;
  margin-top: 8px;
  min-height: 14px;
}
.trade-msg.ok  { color: var(--green); }
.trade-msg.err { color: var(--red); }
.trade-login-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-dim);
}
.trade-login-note a { color: var(--accent); }
/* Secondary row: buy-all / sell-all shortcuts under the main buttons. */
.trade-row.trade-all { margin-top: 6px; }
.trade-btn.all { flex: 1 1 0; font-size: 11px; padding: 7px 10px; color: var(--text-dim); }
/* Current position for the selected god — shares + approx hat value. */
.trade-owned {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
}
.trade-owned .q { font-family: var(--font-mono); color: var(--text); }

/* ─── Look-and-feel pass (June 2026, Fable) ──────────────────────
 * Display typography, brand-band hat mark, card depth language,
 * focus rings. Palette untouched — this is execution polish. */

/* Brand-band hat mark — the channel logo finally lives on the site.
 * Served from /hat.png (copy of overlays/hat.png). The wordmark is
 * set in the display face so the site header carries the same
 * condensed identity as the stream overlays and thumbnails. */
.brand-band .left,
.brand-band a.left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
}
.brand-hat {
  height: 20px;
  width: 20px;
  object-fit: contain;
  display: block;
  /* subtle lift so the dark hat reads on the dark band */
  filter: drop-shadow(0 0 4px rgba(223, 160, 110, 0.35));
}

/* Card depth language: one consistent treatment for every panel.
 * Inset top highlight = light source from above; soft drop = panels
 * float a hair off the page. Reads as depth at a glance without
 * borders getting heavier. */
.card, .chart-card, .total-card, .search-card,
.trade-card, .priority-card, .stream-player, .stream-chat {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 2px 8px rgba(11, 16, 22, 0.35);
}

/* Keyboard focus: bronze ring, consistent with the hover language.
 * Buttons, links, inputs — anything focusable. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content link: off-screen until focused by keyboard (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: #000;
  padding: 8px 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}