/* ===========================================================================
   Mood Street landing demo: the iconic card, the deck, the throw.
   A web translation of MoodStreet/Views/Sentiment/SentimentCardView.swift,
   DeckStack.swift (deck geometry + throw constants) and Color+Theme.swift.
   Loaded after the inline page styles, so it may override them.
   =========================================================================== */

:root {
    /* surfaces */
    --ms-card: #1E1E1E;
    --ms-obsidian: #0A0A0A;
    /* brand */
    --ms-accent: #DA7756;
    --ms-sand: #E8C49A;
    --ms-coin-gold: #FFD452;
    /* market */
    --ms-bull: #33D97F;
    --ms-bear: #EF4444;
    --ms-flat: #8E8E93;
    /* ink */
    --ms-ink-90: rgba(255,255,255,.90);
    --ms-ink-70: rgba(255,255,255,.70);
    --ms-ink-45: rgba(255,255,255,.45);
    --ms-ink-40: rgba(255,255,255,.40);
    --ms-ink-35: rgba(255,255,255,.35);
    --ms-ink-25: rgba(255,255,255,.25);
    --ms-hairline: rgba(255,255,255,.06);
    /* geometry */
    --ms-card-radius: 24px;
    --ms-plate-radius: 20px;
    --ms-gutter: 16px;
    --ms-ring-width: 2px;
    --ms-chart-h: 150px;
    --ms-bar-h: 8px;
    /* the one brand ring: card border, coin chip, story circles */
    --ms-ring: conic-gradient(from 0deg, #DA7756, #FFD452, #FF8C73, #D98CF2, #E8C49A, #DA7756);
    --ms-card-shadow: 0 5px 20px rgba(218,119,86,.12), 0 12px 24px rgba(0,0,0,.4);
    --ms-glow-top: linear-gradient(to bottom, rgba(218,119,86,.14), rgba(218,119,86,.03), transparent);
    --ms-glow-bottom: linear-gradient(to bottom, transparent, rgba(218,119,86,.08));
}

/* A card thrown 500px sideways must never widen the document. */
body { overflow-x: clip; }

/* ---------------------------------------------------------------- the demo */
.demo { min-width: 0; position: relative; padding: 8px 12px 0; }
.demo-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--soft); font-size: 12px; }
.demo-label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.demo figcaption { color: rgba(233,228,220,.55); font-size: 12px; text-align: center; margin-top: 14px; text-wrap: balance; }

/* ----------------------------------------------------------- the deck stack
   Three bottom anchored layers: front card, the real next card at .955 / +12,
   a bare plate at .91 / +22. DeckGeometry.homePeekRoom is 38. */
.deck {
    --ms-card-h: clamp(560px, 82vh, 700px);
    position: relative;
    width: min(100%, 400px);
    /* The card is a phone: about 0.57 wide for tall. The viewport height alone
       cannot hold that, because in tablet portrait the hero column is narrow
       while 82vh is tall, and the card became a 700px skyscraper (0.448 at
       768x1024). aspect-ratio drives the height from the card's OWN width and
       the vh clamp stays on as the cap. 726 = 700 + the 26px of peek room. */
    aspect-ratio: 400 / 726;
    height: auto;
    max-height: calc(var(--ms-card-h) + 26px);
    margin-inline: auto;
}
/* The empty state is one seal, one line and a text button: holding a whole
   card of near black under it reads as a page that failed to load. */
.deck.is-empty { aspect-ratio: auto; height: clamp(300px, 46vh, 380px); }
.deck-slot { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 26px); transform-origin: bottom center; }
.deck-slot[data-layer="1"] { z-index: 3; }
.deck-slot[data-layer="2"] { z-index: 2; }
.deck-slot[data-layer="3"] { z-index: 1; }
.deck-rim { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.20); border-radius: var(--ms-card-radius); pointer-events: none; }
/* The next card peeks by 12px: that sliver reads as a card edge, not as a
   half line of someone else's paragraph. */
.deck-slot[data-layer="2"] .deck-rim {
    /* border-box origin, or the gradient is laid out inside the padding box and
       the 1px border line shows the repeat, which leaks a sliver of the card
       behind it into the peek. */
    background: linear-gradient(to top, #1E1E1E 0 34px, rgba(30,30,30,0) 74px) border-box no-repeat;
}
.msc.is-dim .msc-ring { display: none; }
.deck-plate { position: absolute; inset: 0; background: rgba(30,30,30,.7); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ms-plate-radius); }
.msc-throw { position: absolute; inset: 0; will-change: transform; }

/* ------------------------------------------------------------- the surface */
.msc {
    position: absolute; inset: 0;
    background: var(--ms-card);
    border-radius: var(--ms-card-radius);
    box-shadow: var(--ms-card-shadow);
    overflow: hidden;
    touch-action: pan-y;
    -webkit-user-select: none; user-select: none;
}
.msc.is-dim { opacity: .5; }
.msc.is-grabbed { touch-action: none; }
.msc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: var(--ms-glow-top); pointer-events: none; }
.msc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: var(--ms-glow-bottom); pointer-events: none; }
.msc-front { animation: msFloat 2.8s ease-in-out infinite alternate; }
@keyframes msFloat { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.msc:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 4px; }

/* the 2px conic mood ring, drawn as a masked border */
.msc-ring {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: var(--ms-card-radius);
    padding: var(--ms-ring-width);
    background: var(--ms-ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* the vote edge takes the ring's place while the card is grabbed */
.msc-edge { position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 3px solid transparent; border-radius: var(--ms-card-radius); opacity: 0; }
.msc-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }

/* overscroll-behavior is deliberately NOT set: contain froze the whole page
   while the cursor sat over the card, and on a phone it ate the first reading
   swipe. The default chains to the page once the card's content ends, which is
   what the app does when the card is not being thrown. */
.msc-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.msc-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.msc-body { padding-bottom: 24px; }

/* ---------------------------------------------------------------- header */
.msc-head { padding: 24px var(--ms-gutter) 14px; }
.msc-over { display: flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.msc-over .ticker { color: var(--ms-ink-70); }
.msc-over .sep { color: var(--ms-ink-25); margin: 0 6px; }
.msc-over .cls { color: var(--ms-ink-45); }
.msc-glyphs { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ms-ink-40); }
.msc-glyphs svg { width: 14px; height: 14px; display: block; }
.msc-name { margin-top: 12px; font-size: 20px; font-weight: 500; line-height: 1.2; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msc-quote { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; }
.msc-price { font-family: ui-rounded, "SF Pro Rounded", Inter, sans-serif; font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msc-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msc-pill svg { width: 11px; height: 11px; display: block; }
.msc-pill.up { color: var(--ms-bull); background: rgba(51,217,127,.15); }
.msc-pill.down { color: var(--ms-bear); background: rgba(239,68,68,.15); }
.msc-pill.flat { color: var(--ms-flat); background: rgba(142,142,147,.15); }
.msc-cap { margin-top: 8px; font-size: 11px; color: var(--ms-flat); }

/* ----------------------------------------------------------- chart block */
.msc-chart { padding-bottom: 10px; }
.msc-ranges { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 0 10px; }
/* .40 ink measured 3.78:1 on #1E1E1E; .55 measures 5.5:1. Five of the six
   chips are inactive at any moment, so this is most of the chart row. */
.msc-range { border: 0; background: transparent; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.1; color: rgba(255,255,255,.55); transition: color .18s, background-color .18s; }
.msc-range[aria-pressed="true"] { color: var(--ms-accent); font-weight: 700; background: rgba(218,119,86,.12); }
.msc-plot { margin-top: 8px; padding: 0 6px; height: var(--ms-chart-h); }
.msc-plot svg { display: block; width: 100%; height: var(--ms-chart-h); }
.msc-axis-t { font-size: 9px; fill: var(--ms-ink-35); }
.msc-prev-t { font-size: 9px; font-weight: 500; fill: var(--ms-ink-40); }

/* -------------------------------------------------------------- KPI grid */
.msc-kpis { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 8px; padding: 0 var(--ms-gutter) 10px; }
.msc-kpi { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.msc-kpi .k { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.46); white-space: nowrap; }
.msc-kpi .v { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ms-ink-90); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------- sentiment bar */
.msc-sent { padding: 12px var(--ms-gutter); }
.msc-bar { position: relative; height: var(--ms-bar-h); }
.msc-bar-track { position: absolute; inset: 0; border-radius: 4px; background: rgba(255,255,255,.14); transition: opacity .25s ease-out; }
.msc-bar-fills { position: absolute; inset: 0; display: flex; gap: 1.5px; }
.msc-bar-fills i { display: block; width: 0; border-radius: 4px; transition: width .3s ease-out; }
.msc-bar-fills .bear { background: var(--ms-bear); }
.msc-bar-fills .pass { background: rgba(232,196,154,.6); }
.msc-bar-fills .bull { background: var(--ms-bull); }
.msc-sent.is-revealed .msc-bar-track { opacity: 0; }
.msc-sent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.msc-sent-h { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ms-accent); white-space: nowrap; }
/* The tallies hold no width before the reveal, or they crowd the header off
   its line on a narrow card. */
.msc-tally { display: none; align-items: center; gap: 12px; }
.msc-sent.is-revealed .msc-tally { display: flex; }
.msc-tally span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.msc-tally .t-bear { color: var(--ms-bear); }
.msc-tally .t-pass { color: var(--ms-sand); }
.msc-tally .t-bull { color: var(--ms-bull); }
.msc-tally svg { display: block; }
.msc-filter { color: var(--ms-ink-40); display: flex; }
.msc-filter svg { width: 13px; height: 13px; display: block; }
/* The label that makes an illustrative bar acceptable cannot be the least
   legible line on the card: .35 ink measured 3.21:1, .6 measures 6.0:1. */
.msc-illus { display: none; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.6); }
.msc-sent.is-revealed .msc-illus { display: block; }

.msc-div { height: 1px; background: var(--ms-hairline); }

/* --------------------------------------------------------------- recap */
.msc-about { padding: 16px var(--ms-gutter) 0; }
.msc-sec { display: flex; align-items: center; gap: 8px; }
.msc-sec i { display: block; width: 2px; height: 14px; border-radius: 1px; background: var(--ms-sand); }
.msc-sec span { font-size: 13px; font-weight: 500; color: var(--ms-ink-45); }
.msc-about p { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--ms-ink-90); text-align: justify; hyphens: auto; }

/* --------------------------------------------------------------- stamps */
.msc-stamps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* The stamp is a positioned FRAME, and .box is the stamped word inside it.
   A stamp that was its own box could only be as wide as the space left of
   its own inset, so "SUPER BULL" broke over two lines at every width and its
   strapline, hung below the box, landed on the KPI grid. The frame spans the
   card for the centred stamps, the box shrinks to its one nowrap line, and
   the strapline is a second row of the same column. */
.msc-stamp { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 9px; opacity: 0; }
.msc-stamp .box { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 3px solid currentColor; border-radius: 8px; font-size: 24px; font-weight: 900; letter-spacing: 2px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.msc-stamp svg { width: 20px; height: 20px; display: block; }
.msc-stamp[data-k="bull"] { top: 28px; left: 28px; align-items: flex-start; color: var(--ms-bull); }
.msc-stamp[data-k="bear"] { top: 28px; right: 28px; align-items: flex-end; color: var(--ms-bear); }
.msc-stamp[data-k="pass"] { top: 50%; left: 0; right: 0; color: var(--ms-sand); }
.msc-stamp[data-k="superbull"] { top: 50%; left: 0; right: 0; color: var(--ms-bull); }
.msc-stamp[data-k="superbear"] { top: 50%; left: 0; right: 0; color: var(--ms-bear); }
/* The app ignites a super over a full card ZStack, so its two lines always
   have a ground of their own (SentimentFeedView.swift:2628). The three
   centred stamps land wherever the card's middle happens to be, which on a
   700px card is the KPI grid, so they carry that ground with them. The two
   corner stamps sit over the header and are left as they are. */
.msc-stamp[data-k="pass"] .box,
.msc-stamp[data-k="superbull"] .box,
.msc-stamp[data-k="superbear"] .box { background: rgba(14,14,14,.74); }
.msc-stamp .sub { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; white-space: nowrap; padding: 3px 9px; border-radius: 6px; background: rgba(14,14,14,.74); }
.msc-pass-glyph { display: block; width: 26px; height: 9px; border-radius: 5px; background: currentColor; }

/* ---------------------------------------------------------- empty deck */
.deck-empty { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 26px); z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 0 24px; }
.deck-empty svg { width: 64px; height: 64px; color: var(--ms-bull); }
.deck-empty .deck-empty-t { font-family: Barlow, sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: -.01em; }
.deck-empty p { font-size: 15px; color: var(--soft); max-width: 320px; }
.deck-again { border: 0; background: transparent; color: var(--ms-accent); font-size: 13px; font-weight: 600; min-height: 44px; padding: 0 8px; }
.deck-again:hover { color: #f0a288; }

/* ---------------------------------------------------- hint and feedback */
.deck-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 12px; color: var(--muted); text-wrap: balance; }
.deck-hint svg { width: 15px; height: 15px; flex: none; color: var(--ms-accent); }
.deck-hint span { text-align: center; text-wrap: balance; }
.demo-answer { margin-top: 10px; min-height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--soft); text-wrap: balance; }

@media (max-width: 1050px) {
    .demo { padding-inline: 4px; }
}
@media (max-width: 760px) {
    .demo { max-width: 420px; width: 100%; margin-inline: auto; padding-inline: 8px; }
    .deck { --ms-card-h: clamp(520px, 76vh, 660px); }
}
@media (max-width: 480px) {
    /* One line for the sentiment row on a phone width card. The header keeps
       the app's 1.2px tracking and the filter glyph keeps its place: the
       tallies give up the width instead, since they only exist after a call. */
    .msc-tally { gap: 7px; }
    .msc-tally span { font-size: 9px; gap: 3px; }
}
@media (max-width: 370px) {
    .deck { --ms-card-h: clamp(500px, 74vh, 620px); }
    .msc-kpis { column-gap: 10px; }
    /* On a 272px card the header and the three tallies cannot share a line at
       the app's tracking, so the tallies take a second line with the filter
       glyph at its end, rather than the header giving up its letter spacing. */
    .msc-sent-row { flex-wrap: wrap; row-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .msc-front { animation: none; }
}

/* No JavaScript, no deck: do not leave a tall empty box. */
.deck:empty { height: 0; }

/* ===========================================================================
   The board and the desk: the leaderboard row (LeaderboardView.swift spine,
   AnalystAvatar plate + worded AI badge) and the portfolio treemap with the
   Finviz heat scale (TreemapLayout.swift MarketHeat) plus the buy ticket
   (SentimentCardView.swift, the "Simulated buy" order preview).
   =========================================================================== */

/* -------------------------------------------------------------- the board */
.board { list-style: none; margin: 0; padding: 0; }
/* The app's spine: seat 26, gutter 8, name, the AI capsule against the name,
   then four fixed numeric columns (Acc %, Day %, Season %, Entry %) with
   tabular figures (LeaderboardView.swift:203-234). The cells are empty on the
   website, by founder call: the columns show the shape of the board, the
   numbers live in the app. */
.arena { --colw: 56px; }
.board li, .board-head {
    display: grid; align-items: center; column-gap: 8px;
    grid-template-columns: 26px minmax(0, 1fr) auto repeat(4, var(--colw));
    padding: 10px 10px; margin-inline: -10px;
    border-bottom: 1px solid var(--line);
    border-radius: 6px;
}
.board-head {
    padding-block: 4px 8px; border-radius: 0; margin-bottom: 2px;
    font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .01em;
}
.board-head span { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-head .bh-player { grid-column: 1 / 4; text-align: left; }
.board-head .bh-sort { color: var(--rust); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.board .col { display: block; min-height: 1em; text-align: right; font-variant-numeric: tabular-nums; }
.board li:last-child { border-bottom: 0; }
/* The plate the app puts under every analyst logo: ten PNGs ship with four
   different grounds (white squares, a black square, bare glyphs), so the white
   disc plus the 14% inset plus the hairline ring is what makes them one row.
   AnalystAvatar, LeaderboardView.swift:2512. */
.board .seat {
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    display: grid; place-items: center;
}
.board .seat img { display: block; width: 100%; height: 100%; padding: 14%; object-fit: contain; }
.board .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; line-height: 1.25; color: #fff; }
.board .who small { font-size: 11px; color: var(--muted); }
/* "an analyst logo is not a disclosure": every machine run seat says so in
   words, exactly as the app does (LeaderboardView.swift:1492). In the app the
   capsule sits against the name and four numeric columns hold the right of the
   row. With no real standings to print, the capsule takes that job: it is the
   right hand cell, so the hairline has something to run to. */
.board .ai {
    justify-self: start; font-size: 9px; font-weight: 600; letter-spacing: .14em; line-height: 1;
    color: rgba(255,255,255,.55); padding: 4px 6px 3px;
    border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
}
.board .seat-bench, .board .seat-me { background: transparent; }
.board .bench .who, .board .me .who { grid-column: 2 / 4; }
.board .seat-bench svg, .board .seat-me svg { width: 15px; height: 15px; display: block; }
.board .bench { background: rgba(232,196,154,.06); }
.board .bench .who { color: var(--sand); }
.board .bench .seat-bench { border-color: rgba(232,196,154,.45); color: var(--sand); }
.board .bench .who small { color: rgba(232,196,154,.6); }
.board .me { background: rgba(218,119,86,.10); }
.board .me .who { color: var(--rust); font-weight: 700; }
.board .me .seat-me { border-color: rgba(218,119,86,.5); color: var(--rust); background: rgba(218,119,86,.14); }
/* Full strength accent: at .75 alpha this measured 3.79:1 on the row
   tint, the only colour contrast violation axe found on the page. */
.board .me .who small { color: var(--rust); font-weight: 400; }
.board-note { margin-top: 16px; font-size: 12px; color: var(--muted); }
.board-legal { margin-top: 8px; font-size: 11px; line-height: 1.5; color: rgba(233,228,220,.55); }

/* ------------------------------------------- the coins and portfolio block */
.coins {
    padding-block: 84px 88px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
    border-bottom: 1px solid var(--line);
}
.coins-copy h2 { font-size: clamp(40px, 4.1vw, 56px); }
.eyebrow {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sand);
}
.coin-mark {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--coin); color: #1a1205;
    font-family: Barlow, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: 0;
}
.coins-lead { margin-top: 22px; max-width: 430px; font-size: 16px; line-height: 1.55; color: var(--soft); }
.coins-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; max-width: 450px; }
.coins-points li { position: relative; padding-left: 19px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.coins-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }

/* the desk, a web reading of the treemap in 02-desk-flip.png */
.desk { min-width: 0; }
.desk-map { border-radius: 14px; padding: 8px; background: rgba(232,196,154,.05); border: 1px solid rgba(232,196,154,.10); }
.treemap { display: grid; grid-template-columns: 60% 1fr; gap: 3px; height: 252px; }
/* The app draws the positions as one rounded block cut by hairline gaps,
   not as four separate lozenges (02-desk-flip.png). */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; min-width: 0; overflow: hidden; border-radius: 9px; }
.tile {
    border-radius: 0; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-align: center; padding: 4px;
}
/* White on every step of the scale with a shadow under it, because the mid
   greens and the neutral grey are light enough that plain white type would sit
   flat on them. The app's own answer, PortfolioTankView.swift:556. */
/* The seven heat anchors are the founder's own Finviz colours and do not
   move; white on the lightest of them measures 4.44:1, so the shadow is what
   carries the edge. */
.tile .tk, .tile .mv { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.62); }
.tile .tk { font-size: 15px; font-weight: 800; letter-spacing: .01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .mv { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Unallocated, never "cash": nothing in this game is cash (founder call
   2026-09-13, PortfolioTankView.swift:567). */
.tile-free { background: var(--bg); border: 1px dashed rgba(232,196,154,.32); border-radius: 9px; }
.tile-free.tile { border-radius: 9px; }
.tile-free .tk, .tile-free .mv { color: rgba(232,196,154,.72); text-shadow: none; }
.tile-free .tk { font-size: 17px; font-weight: 600; }
.tile-free .mv { font-size: 14px; font-weight: 500; }
.heat-legend { display: flex; justify-content: flex-end; gap: 2px; padding: 8px 2px 2px; }
.heat-legend span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.heat-legend i { display: block; width: 22px; height: 7px; border-radius: 1.5px; }

.ticket { margin-top: 16px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.ticket-head { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.ticket-rows { margin: 10px 0 0; }
.ticket-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 4px 0; font-size: 12px; }
.ticket-rows dt { flex: 0 0 auto; color: rgba(255,255,255,.55); }
/* The label never wraps and the value does: the former label broke over
   two lines on a tablet while its value held one nowrap line beside it. */
.ticket-rows dd { flex: 1 1 auto; min-width: 0; margin: 0; text-align: right; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.ticket-rows dd.sand { color: var(--sand); }
.ticket-total { margin-top: 5px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); }
.ticket-total dd { font-weight: 600; }
.desk-note { margin-top: 13px; font-size: 12px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1050px) {
    .coins { gap: 54px; }
    .treemap { height: 224px; }
}
@media (max-width: 760px) {
    .coins { grid-template-columns: 1fr; gap: 34px; padding-block: 50px 50px; }
    .coins-copy h2 { font-size: 46px; }
    .coins-lead { font-size: 15px; margin-top: 18px; }
    .treemap { height: 200px; }
    .tile .tk { font-size: 13px; }
    .tile .mv { font-size: 11px; }
    .tile-free .tk { font-size: 15px; }
    .tile-free .mv { font-size: 13px; }
    .heat-legend { justify-content: center; }
    .heat-legend i { width: 100%; min-width: 16px; }
    .heat-legend span { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 370px) {
    .coins-copy h2 { font-size: 40px; }
    .ticket-rows > div { gap: 10px; }
    .ticket-rows dt { line-height: 1.35; }
}

/* The app's board carries four numeric columns to the right of the name, and
   this one has no real standings to print. A 460px column left every hairline
   running 327px past the last thing on its row, which reads as a table that
   failed to load its numbers, so the column is cut to the width the seat, the
   name and the AI capsule actually use. */
.challenge { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
@media (max-width: 1050px) { .challenge { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } .arena { --colw: 48px; } }
@media (max-width: 760px) { .challenge { grid-template-columns: 1fr; } .arena { --colw: 50px; } .board li, .board-head { column-gap: 6px; } .board .bench .who, .board .me .who { grid-column: 2 / 6; } }
@media (max-width: 420px) { .arena { --colw: 44px; } .board-head { font-size: 10px; } .board .who { font-size: 13px; } .board .ai { padding-inline: 5px; } }
/* Below 370px the four columns do not fit beside a name and the AI capsule,
   so the two middle ones step out and the header follows. */
@media (max-width: 370px) { .arena { --colw: 46px; } .board .who small { display: none; } .board .c-day, .board .c-season, .board-head .c-day, .board-head .c-season { display: none; } .board li, .board-head { grid-template-columns: 26px minmax(0, 1fr) auto repeat(2, var(--colw)); } }

/* ============================================================================
   Season 1 teaser (docs/SEASONS_RULEBOOK.md, landing/seasons): the dates,
   the bank, the S&P 500 row and the ten analysts, in the rulebook's words.
   The clock is filled by demo.js from the data attributes and
   changes state on opening day and at the closing bell, so the copy cannot
   go stale between publishes while scripts run; the static fallback names
   both dates so it is never wrong either.
   ========================================================================= */
.season {
    padding-block: 84px 88px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center;
    border-top: 1px solid var(--line);
}
.eyebrow-season { color: var(--rust); }
.season-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px rgba(218,119,86,.18); }
.season-copy h2 { font-size: clamp(44px, 4.6vw, 64px); }
.season-lead { margin-top: 22px; max-width: 460px; font-size: 16px; line-height: 1.55; color: var(--soft); }
.season-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; }
.season-cta {
    display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 5px;
    background: var(--rust); color: #1a1205; font-size: 13px; font-weight: 700; text-decoration: none;
    transition: background .2s;
}
.season-cta:hover { background: #e58b6c; }
.season-actions .text-link { margin-top: 0; }
/* The clock: four Barlow numbers with tabular digits so the seconds never
   jitter, terracotta colons, small caps labels. role=timer keeps screen
   readers quiet (a timer's live region is off by default); the aria-label
   carries the day count and is refreshed once a minute. */
.season-clock { min-width: 0; }
.clock-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.clock-label.is-open { color: var(--green); }
.clock-label.is-closed { color: var(--sand); }
.clock-digits { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; }
.clock-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.clock-unit strong {
    font-family: Barlow, sans-serif; font-weight: 700; font-size: clamp(64px, 6.6vw, 104px); line-height: .9; letter-spacing: -.01em;
    color: #fff; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
}
.clock-unit span { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(233,228,220,.55); }
.clock-colon { font-family: Barlow, sans-serif; font-weight: 700; font-size: clamp(48px, 5vw, 80px); line-height: 1.05; color: var(--rust); flex: 0 0 auto; padding-top: 0; }
.clock-date { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.clock-digits.is-done .clock-unit strong { color: var(--sand); }
.season-prizes { margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1050px) { .season { gap: 48px; } }
/* Two columns squeeze the tiles below phone width between 760 and 900px
   (iPad portrait), where "3 months" broke over two lines, so the section
   stacks earlier than its neighbours. */
@media (max-width: 900px) { .season { grid-template-columns: 1fr; gap: 40px; } .clock-unit strong { font-size: clamp(64px, 14vw, 104px); } .clock-colon { font-size: clamp(44px, 10vw, 80px); } }
@media (max-width: 760px) {
    .season { grid-template-columns: 1fr; gap: 34px; padding-block: 49px 52px; }
    .season-copy h2 { font-size: 50px; }
    .season-lead { margin-top: 18px; }
}
@media (max-width: 370px) { .season-copy h2 { font-size: 40px; } .clock-unit strong { font-size: 52px; } .clock-colon { font-size: 36px; } .clock-unit span { font-size: 9px; letter-spacing: .08em; } }