/* stockbetting.com — Play board v3 (light cards on the dark shell)
   Loads AFTER site.css and only touches the Play board. Nothing here is used by
   GEX or the pricer, so site.css stays untouched — which also means every rule
   below that restyles a `.pc-*` from site.css has to match or beat its
   specificity, since both files define the same selectors.

   The design rules this file encodes, so they survive future edits:
     1. NO YELLOW. Sideways is steel blue; the old --spot yellow marked the least
        interesting state while being the loudest hue on the page.
     2. Colour means exactly one thing: the side you took. Everything else —
        labels, chips, thresholds, deltas — lives on the neutral grey ramp.
     3. The card is light (#FAFBFD); the page around it stays dark. Text is
        near-black, because grey-on-black was unreadable at these sizes. */

/* ---------- board grid ---------- */
.play-cards { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }

/* signed-out hero: same three-way language as the board, so the colours a
   visitor learns here are the ones they meet on the cards. Lightened from the
   card values because these sit on the dark page, not on near-white. */
.dir-up   { color: #35B98F; }
.dir-flat { color: #7DA0CC; }
.dir-down { color: #E0716E; }
.play-hero h1 em { color: #35B98F; font-style: normal; }

/* ---------- card shell ---------- */
.play-card {
  /* semantic — darkened from the dark-theme values so they hold on near-white */
  --up: #0F7D63;      /* teal  */
  --dn: #B8403C;      /* brick */
  --fl: #3D5A80;      /* steel blue */
  /* GLYPH-ONLY variants, deliberately separate from the three above. The arrows
     wanted to be louder; the surfaces did not. --up/--dn/--fl are also --seal,
     which is a SOLID fill under WHITE text on the receipt strip — pushing those
     to full saturation would have taken that text under AA. These are the most
     saturated version of each hue that still clears 4.5:1 on every background an
     arrow lands on: white segment, #FAFBFD card, all three picked washes, and
     the #F1F4F9 hover. Measured worst case: 4.67 / 4.59 / 4.66. */
  --up-g: #007A50;
  --dn-g: #D60B00;
  --fl-g: #1F5AFF;
  /* light surfaces + ink ramp, local to the card so the dark shell is untouched */
  --c-card: #FAFBFD;
  --c-head: #FFFFFF;
  --c-well: #EFF2F7;
  --c-line: #E1E6EE;
  --c-line2: #D3DAE5;
  --c-ink: #111826;
  --c-ink2: #3D4757;
  /* the bottom of the card's ink ramp had the same problem the dark shell's grey
     ramp did, just inverted: ink3 measured 4.1:1 on the PRE/AH tag and ink4 3.0:1
     on the chart labels. Darkened to ~7:1 and ~5.5:1 — the light-card analogue of
     taking --muted and --dim up. */
  --c-ink3: #4E5869;
  --c-ink4: #5F6A7C;
  --c-rim: #C6CEDB;
  --seal: #4C596B;    /* strip fill; overridden per direction below */

  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  background: var(--c-card);
  border: 1px solid var(--c-rim);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .75);
  transition: border-color .15s, box-shadow .15s;
}
.play-card:hover { border-color: #AEB9CA; }
.play-card.pick-up   { --seal: var(--up); --c-rim: rgba(15, 125, 99, .5); }
.play-card.pick-down { --seal: var(--dn); --c-rim: rgba(184, 64, 60, .5); }
.play-card.pick-flat { --seal: var(--fl); --c-rim: rgba(61, 90, 128, .55); }

/* ---------- header ---------- */
.pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 0;
  padding: 10px 12px 9px;
  background: var(--c-head);
  border-bottom: 1px solid var(--c-line);
}
/* .pc-sym is a flex row, so site.css's text-overflow no longer applies to it —
   the ellipsis has to live on .pc-name (the only part allowed to shrink), or a
   long company name paints straight over the state tag and the price */
.pc-sym { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: visible; }
.pc-sym b { font-size: 16.5px; font-weight: 650; letter-spacing: .005em; color: var(--c-ink); flex: none; }
.pc-name {
  min-width: 0;
  margin-left: 0;
  flex: 0 1 auto;
  color: var(--c-ink3);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-quote { flex: none; gap: 6px; }
.pc-last { font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; color: var(--c-ink); }
/* the change % is NOT a direction call — keep it off the semantic ramp so the
   only coloured thing on the card stays the side you took */
.pc-chg, .pc-chg.pos, .pc-chg.neg, .pc-chg.muted { font-size: 13px; color: var(--c-ink3); }

/* The star stays on the neutral ramp — rule 2 above reserves hue for the side
   you took — so the ON/OFF difference has to come from the glyph (☆ vs ★) plus
   real contrast. The old pair was #B9C2D0 / #5B6577: 1.8:1 for the empty star,
   which is invisible on #FFF, so a board with no favorites yet looked like the
   feature had failed to render. Now 3.0:1 outline vs near-black fill.
   Padding is the tap target: the glyph box was 10 × 12px, well under the 24px
   minimum, so on a phone the tap usually landed on the card instead. The
   negative margin pulls the padding back out of the header's layout. */
.pc-fav {
  flex: none;
  background: none;
  border: none;
  margin: -7px 0 -7px -7px;
  padding: 7px;
  font-size: 13.5px;
  line-height: 1;
  color: var(--c-ink4);
  cursor: pointer;
  transition: color .12s, transform .12s;
}
.pc-fav:hover { color: var(--c-ink2); transform: scale(1.15); }
.pc-fav.on { color: var(--c-ink); }
.pc-fav.on:hover { color: var(--c-ink2); }

.pc-tag {
  color: var(--c-ink3);
  border-color: var(--c-line2);
  background: #F1F4F8;
  align-self: center;
}

/* ============================================================
   THE RUNWAY CHART (v4)
   Five sessions of hourly candles, then the lane the bet settles in, on one
   shared price axis. Replaced the v3 per-card chart entirely — that one drew a
   prev-session spine because it had no intraday history to draw; this has the
   real week, so the spine, its close tick and the day-range wick are all gone.
   ============================================================ */
.rw { display: block; width: 100%; height: auto; background: var(--c-well); }
.rw text { font-family: var(--font-mono); }

/* the lane: everything right of NOW hasn't happened yet */
.rw-lane { fill: #E6EAF1; }
/* the sideways band, spanning history AND lane. Neutral grey, never the
   steel-blue sideways hue — rule 2 keeps colour for the side you took, and a
   permanently tinted middle would shout "sideways" on every symbol. */
.rw-band { fill: rgba(17, 24, 38, .05); pointer-events: none; }
.rw-edge { stroke: #8E9AAC; stroke-width: 1.5; pointer-events: none; }
.rw-sess { stroke: #D3DAE5; stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }

/* Zones carry no hue at rest: up/flat/down is already encoded by vertical
   position, and rule 2 keeps colour for the side you took. Hover is the
   exception — while the cursor is inside a zone it IS "the side you're about to
   take", so the whole group lights up in that direction's colour: wash, ring and
   caption together. Grouping is what makes that possible; hovering the rect
   alone left the caption sitting there unchanged, which read as inert. */
/* --z is the muted surface hue (washes, rings); --zv is the saturated glyph hue,
   the same pair the ticket arrows use. Redeclared here rather than inherited:
   --up-g and friends live on .play-card, and the chart is a sibling container. */
.rw-zg { cursor: pointer; }
.rw-zg.rw-up   { --z: #0F7D63; --zv: #007A50; --zt: rgba(15, 125, 99, .13); --zh: rgba(15, 125, 99, .22); }
.rw-zg.rw-flat { --z: #3D5A80; --zv: #1F5AFF; --zt: rgba(61, 90, 128, .15); --zh: rgba(61, 90, 128, .24); }
.rw-zg.rw-down { --z: #B8403C; --zv: #D60B00; --zt: rgba(184, 64, 60, .13); --zh: rgba(184, 64, 60, .22); }

.rw-zone { fill: transparent; }
.rw-zring { fill: none; stroke: none; stroke-width: 2; pointer-events: none; }

/* the persistent state: the side you actually took */
.rw-zg.picked .rw-zone { fill: var(--zt); }
.rw-zg.picked .rw-zring { stroke: var(--z); stroke-opacity: .55; }
/* Solid plate for the same reason hover has one: a coloured caption over the
   translucent #E6EAF1 backing measured 4.17:1 on up and 4.50:1 on down. On white
   the muted hues clear it comfortably (5.08 / 7.06 / 5.47). Muted rather than
   --zv here so the picked zone stays quieter than the one under the cursor. */
.rw-zg.picked .rw-zlab { fill: var(--z); }
.rw-zg.picked .rw-lbg { fill: #FFF; opacity: 1; }

/* the transient state: where the cursor is. Deliberately stronger than picked —
   it only exists while you're pointing at it, so it can afford to shout. */
.rw-zg:hover .rw-zone { fill: var(--zh); }
.rw-zg:hover .rw-zring { stroke: var(--zv); stroke-opacity: 1; }
.rw-zg:hover .rw-zlab { fill: var(--zv); }
.rw-zg:hover .rw-zsub { fill: #1B2333; }
/* The plate goes SOLID WHITE, and that is a contrast fix as much as an effect.
   A coloured caption over the translucent #E6EAF1 backing measured 4.17:1 on the
   up zone — the hover state would have been the one place on the board below AA.
   On white all three glyph hues clear 4.5 (4.67 / 4.59 / 4.66), and the plate
   lighting up under the cursor is exactly the "you are in this zone" cue. */
.rw-zg:hover .rw-lbg { fill: #FFF; opacity: 1; }

/* Locked (a bet placed, past the opening bell) — the class is on the SVG, not on
   the card: the chart and the ticket are separate containers in v4, so the old
   `.has-bet:not(.editable)` selector could never have reached in here. */
.rw.locked .rw-zg { cursor: default; }
.rw.locked .rw-zg:not(.picked):hover .rw-zone { fill: transparent; }
.rw.locked .rw-zg:not(.picked):hover .rw-zring { stroke: none; }
.rw.locked .rw-zg:not(.picked):hover .rw-zlab { fill: #313B4C; }

/* hollow = closed up, filled = closed down. Neutral slate, NOT the teal/brick
   semantic pair — an hourly candle being green is not a call you made. */
.rw-cu { stroke: #7A8698; fill: #FFF; stroke-width: 1; pointer-events: none; }
.rw-cd { stroke: #4E5869; fill: #4E5869; stroke-width: 1; pointer-events: none; }

.rw-lab { fill: #5F6A7C; font-size: 11.5px; font-weight: 600; pointer-events: none; }
.rw-empty { fill: #5F6A7C; font-size: 12px; text-anchor: middle; }
.rw-now { stroke: #111826; stroke-width: 1.5; stroke-dasharray: 2 3; pointer-events: none; }
.rw-dot { fill: #111826; pointer-events: none; }

/* zone captions sit at the TOP of their zone; the backing keeps the live-price
   line off the glyphs whatever the band width turns out to be */
.rw-lbg { fill: #E6EAF1; opacity: .88; pointer-events: none; }
.rw-zlab { fill: #313B4C; font-size: 12px; font-weight: 600; letter-spacing: .06em; pointer-events: none; }
.rw-zsub { fill: #4E5869; font-size: 11px; pointer-events: none; }

/* on a light card you anchor the eye with darkness, the way you anchor with
   brightness on a dark one — the live price is the one dark object */
.rw-pill { fill: #111826; pointer-events: none; }
.rw-pillt { fill: #FFF; font-size: 13px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.rw-chip { cursor: pointer; }
.rw-chip rect { fill: #FFF; stroke: #C6CEDB; }
.rw-chip text { fill: #111826; font-size: 12px; font-weight: 600; text-anchor: middle; }
.rw-chip:hover rect { stroke: #8E9AAC; }
.has-bet:not(.editable) .rw-chip { cursor: default; }

/* ---------- segmented control: three rows collapsed into one ----------
   The thresholds are already printed in the chart chips, so this only has to
   carry the choice, not repeat the numbers. */
.pc-lower { padding: 10px 12px 10px; }
.pc-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--c-line2);
  border-radius: 8px;
  overflow: hidden;
  background: #FFF;
}
.pc-segb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 3px;
  border: none;
  border-right: 1px solid var(--c-line2);
  background: #FFF;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-ink2);
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s;
}
.pc-segb:last-child { border-right: none; }
.pc-segb:hover { background: #F1F4F9; }
/* the arrows carry the three sides, so they get to be the loud thing on the
   ticket: up from 11.5px/400 to 16px/700 in the saturated glyph palette */
.pc-segb .k {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.pc-segb.s-up .k   { color: var(--up-g); }
.pc-segb.s-flat .k { color: var(--fl-g); }
.pc-segb.s-down .k { color: var(--dn-g); }
.pc-segb.picked { color: var(--c-ink); font-weight: 650; }
.pc-segb.s-up.picked   { background: rgba(15, 125, 99, .10);  box-shadow: inset 0 0 0 1px rgba(15, 125, 99, .55); }
.pc-segb.s-flat.picked { background: rgba(61, 90, 128, .10);  box-shadow: inset 0 0 0 1px rgba(61, 90, 128, .6); }
.pc-segb.s-down.picked { background: rgba(184, 64, 60, .10);  box-shadow: inset 0 0 0 1px rgba(184, 64, 60, .55); }
.has-bet:not(.editable) .pc-segb { cursor: default; }
.has-bet:not(.editable) .pc-segb:hover { background: #FFF; }
.has-bet:not(.editable) .pc-segb.picked:hover { background: rgba(184, 64, 60, .10); }

/* ---------- the receipt strip ----------
   height is FIXED, not min-height: a Sideways bet needs two prices where up and
   down need one, so its label is always the longest string on the board and the
   strip used to wrap to a second line, making that card's bar taller than its
   neighbours'. Three slots — dir is fixed, thr flexes and ellipsises, rt is
   pinned right — so it stays one line at any price length.
   margin-top:auto pins it flush to the card's bottom edge whatever the card
   above it does; never give .pc-strip a margin-top, it would cancel that. */
.pc-strip {
  margin-top: auto;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.pc-strip .dir { flex: none; }
.pc-strip .thr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pc-strip .rt { flex: none; display: flex; align-items: center; gap: 9px; }
.pc-strip.placed { background: var(--seal); color: #FFF; }
.pc-strip.placed .thr { color: rgba(255, 255, 255, .82); }
.pc-strip.placed .amt { background: rgba(255, 255, 255, .2); border-radius: 3px; padding: 1px 5px; }
/* same box metrics as .placed — inset shadow rather than a border, so the empty
   strip can't end up 1px taller and knock the row out of alignment */
/* "NO BET PLACED" was #939DAD on #F1F4F9 — 2.48:1, the least readable thing on
   the board, on the strip whose whole job is telling you a card still needs a call */
.pc-strip.empty {
  justify-content: center;
  background: #F1F4F9;
  color: #5A6474;
  font-weight: 500;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.pc-editbtn {
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pc-editbtn:hover { color: #FFF; border-bottom-color: #FFF; }

.pc-fallback {
  margin: 0;
  padding: 0 12px 9px;
  color: var(--c-ink4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
}

.board-empty {
  grid-column: 1 / -1;
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- watchlist picker (dark shell — unchanged) ---------- */
.board-picker {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  padding: 11px 12px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.picker-btn .l { display: flex; align-items: baseline; gap: 8px; }
.picker-btn .l .mono { font-size: 13px; font-weight: 400; color: var(--muted); }
.picker-btn .r { display: flex; align-items: center; gap: 10px; }
.picker-btn .favs { font-size: 13px; color: var(--text-2); }
.picker-btn .caret { font-size: 13px; color: var(--muted); }

.picker-body[hidden] { display: none; }
.picker-body {
  border-top: 1px solid var(--border-soft);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* this line is the only thing that tells you the ★ is tappable at all, and it
   was the least readable text on the page: --dim at 9.5px with .1em tracking */
.picker-hint {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--muted);
}
.favonly-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .12s;
}
.favonly-btn:hover { border-color: var(--accent); }
.favonly-btn .mono { font-size: 13px; color: var(--muted); }
.favonly-btn.on { border-color: var(--accent); background: rgba(59, 130, 246, .08); }
.favonly-btn.on .mono { color: var(--accent); }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
  gap: 6px;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--panel-2);
}
.picker-row.off { opacity: .55; }
/* Same two problems as .pc-fav, mirrored onto the dark shell: --dim on
   --panel-2 is 2.3:1, so the empty star the "TAP ★ TO FAVORITE" hint points at
   was barely there — and :hover used to resolve to exactly the .on colour, so
   brushing an unfavorited symbol made it look favorited (and on touch the
   hover state sticks after the tap, so it looked favorited until you scrolled).
   Hover now sits between the two states instead of impersonating one. */
.pk-fav {
  background: none;
  border: none;
  margin: -7px 0 -7px -6px;
  padding: 7px 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s, transform .12s;
}
.pk-fav:hover { color: var(--text-2); transform: scale(1.15); }
.pk-fav.on { color: var(--text); }
.pk-sym {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
/* "hidden" used to be opacity:.55 over an already-dark --dim, and opacity
   multiplies against the backdrop: the declared colour reads 2.1:1 but what
   reached the screen was 1.5:1, so you could not read which symbols you had
   hidden. A dashed border says "off the board" without touching legibility. */
.picker-row.off { opacity: 1; border-style: dashed; }
.picker-row.off .pk-sym { color: var(--dim); }
.pk-sym .c { font-size: 13px; }
/* --neg is tuned for chart strokes and stays as it is; at this size it needs a
   lighter tint, and this is the only place it renders at 11px. Lifted again with
   the grey ramp — against near-white siblings the old tint read as broken. */
.pk-sym .c.neg { color: #FCA5A5; }

/* ---------- hamburger menu (dark shell — unchanged) ---------- */
.play-topbar .menu-wrap { position: relative; margin-left: auto; }
.hamburger {
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hamburger:hover, .hamburger.open { border-color: var(--accent); color: var(--text); }

.menu-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 236px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  z-index: 60;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-pop[hidden] { display: none; }
.menu-h {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--dim);
  padding: 8px 10px 4px;
}
.menu-sep { height: 1px; background: var(--border-soft); margin: 5px 8px; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
}
.menu-item:hover { background: var(--panel-2); }
.menu-pop #logoutBtn { margin-left: 0; }
.menu-item.danger { color: #FCA5A5; }
.menu-item.danger:hover { background: rgba(239, 68, 68, .1); }

@media (max-width: 560px) {
  .play-cards { grid-template-columns: minmax(0, 1fr); }
  .play-topbar { gap: 10px; }
  .picker-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #viewBoard, #viewMybets, #viewLeaderboard { padding: 12px; }
}

/* very narrow phones: the segments are ~90px there, which still clears a touch
   target, but the labels need the last few px back.
   .pc-strip is the binding constraint on this whole type scale — a sideways bet
   prints two prices in .thr, and at a 262px card that string has no headroom
   left. It stays smaller than the rest of the card here on purpose: take it up
   with the others and the second price gets ellipsised away. */
@media (max-width: 380px) {
  .pc-segb { font-size: 12px; gap: 4px; }
  .pc-segb .k { font-size: 14px; }   /* the label loses 1.5px here; the arrow follows */
  .pc-strip { font-size: 11px; padding: 0 10px; }
  .pc-strip .dir .w { display: none; }
  /* the price block needs 148 of the 261px header here, which leaves the company
     name about one character before the ellipsis — a 5px "…" stub is noise, so
     drop it and let the ticker stand alone. It returns at 380px and up. */
  .pc-name { display: none; }
  .pc-fallback { font-size: 10.5px; padding: 0 10px 9px; }
  .pc-lower { padding: 9px 10px; }
  .pc-head { padding: 9px 10px 8px; }
}

/* .seg is shared with the GEX view toggle, so the board's type scale reaches
   only the two segmented controls that live on this page */
.play-tabs button, .auth-seg button { font-size: 15px; }

/* keep the topbar chrome on one line (the tab labels and countdown wrapped at
   phone width before) */
.seg button, .countdown-chip { white-space: nowrap; }

/* …except on a phone, where the full sentence ("Bets for Tue, Jul 28’s 4:00pm ET
   close lock in 17h 00m") can't fit on one line at any sane font size. Let it
   wrap between words; the <b> spans keep the date and the timer unbroken. */
@media (max-width: 560px) {
  .countdown-chip { white-space: normal; border-radius: var(--radius); }
  .countdown-chip b { white-space: nowrap; }
}

/* ============================================================
   FOCUS BOARD (v4) — one symbol at a time
   The 16-up grid is gone. The rail picks the symbol, the ticket carries the
   decision, the runway carries the picture.
   ============================================================ */
.fx {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* ---------- the symbol rail ----------
   The dot is the one thing the old grid did better than a focus view — "which
   symbols still need a call" — so it has to survive here, or the redesign loses
   information the board used to give away for free. */
.fx-rail {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 620px;
  overflow-y: auto;
}
.fx-tick {
  display: grid;
  grid-template-columns: 10px auto 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 9px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.fx-tick:hover { background: #202839; }
.fx-tick.on { background: #1D2B3F; border-left-color: #7DA0CC; color: var(--text); }
.fx-tick .s { font-family: var(--font-mono); font-weight: 600; }
/* off the semantic ramp on purpose: a red day is not a call you made */
.fx-tick .c, .fx-tick .c.pos, .fx-tick .c.neg, .fx-tick .c.muted {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
}
.fx-star { color: var(--dim); font-size: 10px; }
/* the dot IS semantic — it is your call, which is exactly what rule 2 keeps hue for */
.fx-dot { width: 8px; height: 8px; border-radius: 50%; background: #3A4457; }
.fx-dot.up { background: #35B98F; }
.fx-dot.down { background: #E0716E; }
.fx-dot.flat { background: #7DA0CC; }

/* ---------- focus header: picker, arrows, progress ---------- */
.fx-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fx-pick { position: relative; }
.fx-pickbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  padding: 9px 14px;
  background: var(--panel-2);
  border: 1px solid #3A4457;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
}
.fx-pickbtn:hover { border-color: #7DA0CC; }
.fx-pickbtn .sym { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fx-pickbtn .nm {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--dim);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-pickbtn .car { flex: none; font-size: 11px; color: var(--muted); }
.fx-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 330px;
  max-width: calc(100vw - 48px);
  padding: 8px;
  background: var(--panel);
  border: 1px solid #3A4457;
  border-radius: 10px;
  box-shadow: 0 18px 44px -12px #000;
}
.fx-pop .input { width: 100%; margin-bottom: 6px; }
.fx-poplist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-height: 270px;
  overflow-y: auto;
}
.fx-nohit { grid-column: 1 / -1; padding: 12px; color: var(--dim); font-size: 13px; text-align: center; }
.fx-nav { display: inline-flex; gap: 6px; }
.fx-arrow {
  width: 38px;
  height: 38px;
  background: var(--panel-2);
  border: 1px solid #3A4457;
  border-radius: 9px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.fx-arrow:hover { border-color: #7DA0CC; }
.fx-kbd { font-size: 11.5px; color: var(--dim); }
.fx-kbd kbd {
  margin-right: 2px;
  padding: 2px 5px;
  background: #0F1421;
  border: 1px solid #3A4457;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
}
.fx-prog { margin-left: auto; font-size: 12.5px; color: var(--dim); }
.fx-prog b { color: var(--text); }

/* ---------- ticket + chart ---------- */
.fx-body {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.fx-ticketwrap { display: flex; }
.fx-ticketwrap .play-card { flex: 1; }
.fx-chart {
  display: flex;
  flex-direction: column;
  background: #FAFBFD;
  border: 1px solid #C6CEDB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .75);
}
.fx-ctop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  background: #FFF;
  border-bottom: 1px solid #E1E6EE;
}
.fx-ctop .t { font-size: 12.5px; font-weight: 600; color: #111826; }
.fx-ctop .r { font-size: 11.5px; color: #4E5869; letter-spacing: .06em; }
.fx-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: #EFF2F7;
  color: #5F6A7C;
  font-size: 13px;
}

/* the ticket is the v3 card minus its chart: the runway took that job */
.fx-px {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 14px 2px;
  color: var(--c-ink);
}
.fx-px .big { font-size: 36px; font-weight: 600; letter-spacing: -.02em; }
.fx-px .d { font-size: 13.5px; color: var(--c-ink3); }
.fx-need { padding: 4px 14px 10px; font-size: 12.5px; line-height: 1.5; color: var(--c-ink2); }

/* ---------- tab badges ---------- */
.tab-badge {
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 20px;
  background: #2A3446;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
}
.tab-badge.hot { background: #0F7D63; color: #FFF; }
.tab-badge.rank { background: #3D5A80; color: #FFF; }

@media (max-width: 1040px) {
  /* the rail turns into a horizontal strip; the dropdown carries the load */
  .fx { grid-template-columns: minmax(0, 1fr); }
  .fx-rail { display: flex; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .fx-tick { width: auto; flex: none; border-left: 0; border-bottom: 3px solid transparent; }
  .fx-tick.on { border-left-color: transparent; border-bottom-color: #7DA0CC; }
}
@media (max-width: 780px) {
  .fx-body { grid-template-columns: minmax(0, 1fr); }
  .fx-kbd { display: none; }              /* no keyboard to speak of */
  .fx-prog { margin-left: 0; }
  .fx-head { flex-wrap: nowrap; }
  .fx-pick { flex: 1 1 auto; min-width: 0; }
  .fx-pickbtn { min-width: 0; width: 100%; }
  .fx-px .big { font-size: 30px; }
}

/* ============================================================
   PERFORMANCE PANELS — My bets
   ============================================================ */
.perf {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.perf-card {
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.perf-card h4 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--dim);
}
.perf-empty { padding: 14px 0; color: var(--dim); font-size: 13px; }
.perf-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.perf-note b { color: var(--text); font-weight: 600; }
.perf-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.perf-hero .v { font-family: var(--font-mono); font-size: 32px; font-weight: 600; letter-spacing: -.02em; }
.perf-hero .v.up { color: #35B98F; }
.perf-hero .v.dn { color: #E0716E; }
.perf-hero .s { font-size: 12.5px; color: var(--dim); }
.perf-hero .s b { color: var(--text); font-family: var(--font-mono); }

/* P/L chart: bars are each session, the line is what they add up to. The
   viewBox width is measured by play.js (see PERF.curve), so this renders 1:1 and
   the axis text comes out at its nominal size — the old chart used
   preserveAspectRatio="none" and was stretching 1.12x horizontally. */
.pf-chart { display: block; width: 100%; height: auto; }
.pf-chart text { font-family: var(--font-mono); }
.pf-ax { fill: var(--dim); font-size: 11px; text-anchor: end; }
.pf-ax.zero { fill: var(--muted); }
.pf-ax.d { text-anchor: middle; }
.pf-zero { stroke: #4A5468; stroke-width: 1; }
.pf-bar.up { fill: #35B98F; }
.pf-bar.dn { fill: #E0716E; }
.pf-bar:hover { fill-opacity: .78; }
/* the running total is deliberately NOT green/red: it is a different quantity
   from the bars, so it gets a different encoding rather than a third shade */
.pf-line { fill: none; stroke: #E8ECF4; stroke-width: 2; stroke-linejoin: round; }
.pf-end { fill: #E8ECF4; }

.pf-key { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--dim); }
.pf-key span { display: inline-flex; align-items: center; gap: 5px; }
.pf-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.pf-key .k-up { background: #35B98F; }
.pf-key .k-dn { background: #E0716E; }
.pf-key .k-line { width: 14px; height: 2px; border-radius: 0; background: #E8ECF4; }

.dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.dial { display: block; width: 100%; max-width: 82px; margin: 0 auto; }
.dl-track { fill: none; stroke: #2A3446; stroke-width: 7; }
.dl-arc { fill: none; stroke-width: 7; stroke-linecap: round; }
.dial.up .dl-arc { stroke: #35B98F; }
.dial.flat .dl-arc { stroke: #7DA0CC; }
.dial.down .dl-arc { stroke: #E0716E; }
.dl-t { fill: var(--text); font-family: var(--font-mono); font-size: 15px; font-weight: 600; text-anchor: middle; }
.dials .d .n { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dials .d .p { font-size: 11.5px; color: var(--dim); }

/* ============================================================
   LEADERBOARD — podium + the sticky "you" bar
   ============================================================ */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 14px; }
.pod {
  padding: 12px 8px 14px;
  text-align: center;
  background: linear-gradient(180deg, #212B3E, #171E2C);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
}
.pod.p1 { padding-top: 22px; background: linear-gradient(180deg, #26324A, #1A2233); border-color: #46536B; }
.pod.p2 { padding-top: 15px; }
.pod.p3 { padding-top: 9px; }
.pod .m { font-size: 21px; line-height: 1; }
.pod .u {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod .st { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--text); }
.pod .wr { display: block; font-size: 11.5px; color: var(--dim); }

.mv { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.mv.up { color: #35B98F; }
.mv.dn { color: #E0716E; }

/* ---------- house-bot benchmark group ----------
   Sits between the podium and the ranked table: four robots that call every
   symbol every session, shown as a bar to clear rather than as competitors (the
   ranking itself is humans only — see split_bots in api/play.php).

   Rule 2 of this file does the design work here: colour means the side you took,
   and a bot's side IS its whole personality, so the rim and the chip carry the
   same three hues the board uses, on the dark-shell variants from the top of
   this file. Randy has no fixed side, so he stays on the neutral ramp — and the
   "in play" dot is a status rather than a call, so it stays neutral on all four.
   Measured on --panel-2: teal 6.6:1, steel blue 6.0:1, brick 5.2:1, --dim 11.5:1. */
.botwrap { margin-bottom: 16px; }
.bothead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.bothead .bt {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text);
}
.bothead .bs { font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* Explicit column counts, 2 → 4 → 1, rather than auto-fit. There are exactly
   four cards, and auto-fit lands on THREE columns for most of the desktop range
   (the panel is only 719px wide at a 800px viewport), which orphans Randy on a
   row of his own — that reads as a bug, not a layout. 4-up switches on only once
   a card clears ~215px: at 980px the panel is 899px, so (899 − 30) / 4 = 217. */
.botgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 980px) { .botgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .botgrid { grid-template-columns: minmax(0, 1fr); } }
.bot {
  padding: 11px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid #6B7789;      /* neutral default; overridden per strategy */
  border-radius: 10px;
}
.bot.up   { border-left-color: #35B98F; }
.bot.flat { border-left-color: #7DA0CC; }
.bot.down { border-left-color: #E0716E; }

/* portrait | (name over call). `min-width:0` on the text column is what lets a
   long name ellipsis instead of forcing the card wider than its grid track. */
.bot .bh { display: flex; align-items: center; gap: 9px; }
.bot .bid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bot .bn {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bdir { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.bdir.rnd { color: var(--muted); }

/* The portraits are drawn in a 64-unit box with the shoulders running off the
   bottom edge, so they sit flush against the name's baseline block rather than
   floating in a padded square. Fixed size (no `width:100%`) — a flex item that
   can shrink would rescale every stroke in the drawing. */
.bav { width: 50px; height: 50px; flex: none; display: block; }

.bot .bstat { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; }
.bot .bstat b { font-size: 16px; font-weight: 600; color: var(--text); }
.bot .bstat span { font-size: 12.5px; color: var(--dim); }
.bot .bnote { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--dim); }

.bot .blive {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}
.bot .blive i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.bot .blive.off { color: var(--dim); }

.lb-you {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 11px 13px;
  background: #1D2B3F;
  border: 1px solid #3D5A80;
  border-radius: 10px;
}
.lb-you.none { justify-content: center; color: var(--dim); font-size: 13px; }
.lb-you .rk { font-size: 17px; font-weight: 600; color: var(--text); }
.lb-you .u { font-weight: 600; color: var(--text); }
.lb-you .s { font-size: 12.5px; color: var(--dim); }
.lb-you .gap { margin-left: auto; font-size: 12.5px; color: var(--dim); }
.lb-you .gap b { color: var(--text); font-family: var(--font-mono); }

@media (max-width: 860px) {
  .perf { grid-template-columns: minmax(0, 1fr); }
  .lb-you .gap { margin-left: 0; flex-basis: 100%; }
}