/* TickerOne — redesign-specific styles. Tokens come from tokens.css.
 *
 * Ported from docs/Market-Duel-Redesign-2026-05/app.css with three
 * deliberate deviations for the real Capacitor/web environment:
 *   1. Removed `html, body { background: #1a1a2e }` — that was preview-
 *      only (the dark surround behind the iOS frame demo). In the real
 *      app body uses the existing styles.css rule.
 *   2. Removed `#root { min-height: 100vh }` — no React root here.
 *   3. Replaced fixed `padding-top: 52px` / `padding-bottom: 30px` on
 *      `.md-app` with `env(safe-area-inset-*)` so iOS notch / dynamic
 *      island / home indicator are respected on real devices instead
 *      of the simulator frame's static measurements.
 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ──────────────────────────── App shell ──────────────────────────── */

.md-app {
  width: 100%;
  height: 100%;
  background: var(--tia-white);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--fg-primary);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
  position: relative;
}

.md-screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 4px;
  display: block;
}
.md-screen > * { flex-shrink: 0; }

.md-screen::-webkit-scrollbar { display: none; }
.md-screen { scrollbar-width: none; -ms-overflow-style: none; }

/* ──────────────────────────── Top header ──────────────────────────── */

.md-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 10px;
  flex-shrink: 0;
}
.md-header-brand { white-space: nowrap; }

.md-header-brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* v1.0.5 — title case "TickerOne" instead of ALL CAPS. The
     uppercase + wide letter-spacing felt shouty; title case lets
     the brand mark feel like a name. */
  text-transform: none;
  color: var(--tia-navy);
}
.md-header-brand .accent { color: var(--tia-red); }

.md-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-points-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--tia-navy);
  background: var(--tia-navy-50);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.md-points-pill .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--tia-red);
}

/* v2.0.3 — Wildcard deck count chip in the header. Always-visible
 * at-a-glance count of unused cards. */
.md-deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(201, 162, 39, 0.40);
  background: rgba(201, 162, 39, 0.10);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #c9a227;
  transition: transform 160ms var(--ease-standard, ease),
              background 160ms var(--ease-standard, ease);
  -webkit-tap-highlight-color: transparent;
}
.md-deck-chip:active {
  transform: scale(0.96);
  background: rgba(201, 162, 39, 0.22);
}
.md-deck-chip-icon { font-size: 13px; line-height: 1; }
.md-deck-chip-val  { letter-spacing: 0.04em; }

/* Brief gold-pulse to draw attention when the trade-in / deck is
 * scrolled into view from a chip tap. */
@keyframes md-pulse-attention {
    0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.40); }
    70%  { box-shadow: 0 0 0 12px rgba(201, 162, 39, 0);    }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);    }
}
.md-pulse-attention {
    animation: md-pulse-attention 1.2s ease-out;
}

/* v2.0.3 — First-time wildcard hint coachmark. Sits under the
 * predict stepper, dismissable, persists in localStorage. */
.md-wildcard-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px;
    padding: 8px 12px;
    background: rgba(201, 162, 39, 0.10);
    border: 1px solid rgba(201, 162, 39, 0.30);
    border-radius: 10px;
}
.md-wildcard-hint-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.md-wildcard-hint-icon { font-size: 18px; line-height: 1; }
.md-wildcard-hint-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--fg-primary);
}
.md-wildcard-hint-text strong { color: #c9a227; }
.md-wildcard-hint-close {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
}
.md-wildcard-hint-close:active { background: rgba(0,0,0,0.06); }

/* v2.0.3 — Wildcard catalog screen */
.md-back-btn {
    background: transparent;
    border: 0;
    color: var(--fg-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    margin: 0 4px 0 -10px;
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
}
.md-back-btn:active { background: rgba(0,0,0,0.06); }
.md-wildcard-catalog {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 24px;
}
.md-wcc-card {
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px;
}
.md-wcc-card.is-owned  { border-color: rgba(201, 162, 39, 0.55); background: linear-gradient(135deg, rgba(201, 162, 39, 0.06), var(--tia-white)); }
.md-wcc-card.is-locked { opacity: 0.85; }
.md-wcc-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.md-wcc-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.md-wcc-headline { flex: 1; min-width: 0; }
.md-wcc-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-wcc-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.md-wcc-cat, .md-wcc-owned {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
}
.md-wcc-cat.armed   { background: rgba(15, 23, 42, 0.08); color: var(--fg-muted); }
.md-wcc-cat.one-tap { background: rgba(15, 23, 42, 0.08); color: var(--fg-muted); }
.md-wcc-owned.in-deck  { background: rgba(201, 162, 39, 0.20); color: #8a6f0f; }
.md-wcc-owned.earned   { background: rgba(15, 23, 42, 0.08); color: var(--fg-muted); }
.md-wcc-owned.locked   { background: rgba(229, 62, 76, 0.10); color: var(--tia-red, #e53e4c); }
.md-wcc-desc {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-body);
}
.md-wcc-earn {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
}
.md-wcc-earn-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 4px;
}
.md-wcc-earn-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--fg-body);
}
.md-wcc-earn-list li {
    line-height: 1.4;
    margin-bottom: 2px;
}

/* v2.0.3 - Awarding celebration polish */
.wildcard-card-front:not(.hidden) .wildcard-card-front-inner {
    /* Subtle idle-hover float so the revealed card feels alive
       instead of static. Slower + smaller than a UI motion to feel
       like a held physical card. */
    animation: md-wcc-idle-float 3.2s ease-in-out infinite;
}
@keyframes md-wcc-idle-float {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-0.3deg); }
}
.wildcard-card-earn {
    margin: 12px 0 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(201, 162, 39, 0.10);
    border-left: 2px solid #c9a227;
    font-size: 12px;
    line-height: 1.4;
    color: var(--fg-body, #333);
    font-style: italic;
}
#wildcard-reveal-use-now {
    margin-bottom: 8px;
}

.md-icon-btn {
  width: 32px; height: 32px;
  border: none; background: transparent;
  display: grid; place-items: center;
  color: var(--tia-navy);
  cursor: pointer;
  border-radius: 999px;
}
.md-icon-btn:active { background: var(--tia-navy-100); }

/* ──────────────────────────── Eyebrow / dateline ──────────────────────────── */

.md-dateline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
.md-dateline .md-eyebrow,
.md-dateline .md-game-num { white-space: nowrap; }
.md-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tia-red);
}
.md-eyebrow.muted { color: var(--fg-muted); }
.md-game-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

/* ──────────────────────────── Ticker hero ──────────────────────────── */

.md-ticker {
  background: var(--tia-white);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 12px 14px 10px;
  margin-bottom: 10px;
}

.md-ticker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.md-ticker-symbol {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tia-navy);
  line-height: 1;
  margin-bottom: 4px;
}
.md-ticker-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-muted);
  line-height: 1.3;
}
.md-ticker-price {
  text-align: right;
  flex-shrink: 0;
}
.md-ticker-price .price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--tia-navy);
  line-height: 1;
  letter-spacing: -0.01em;
}
.md-ticker-price .delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.delta.up { color: var(--tia-positive); }
.delta.down { color: var(--tia-negative); }

.md-spark {
  width: 100%;
  height: 36px;
  display: block;
  margin-top: 4px;
}

.md-ticker-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.md-ticker-meta .live-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--tia-red);
  margin-right: 5px;
  animation: pulse 1.6s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ──────────────────────────── Edge chip ──────────────────────────── */

.md-edge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--tia-navy);
  color: var(--tia-white);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.md-edge:active { background: var(--tia-navy-800); }
.md-edge-left {
  display: flex; align-items: center; gap: 10px;
}
.md-edge-mult {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-edge-mult .accent { color: var(--tia-red); }
.md-edge-label {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.md-edge-chevron { opacity: 0.6; }

/* ──────────────────────────── The ticket ──────────────────────────── */

.md-ticket {
  background: var(--tia-white);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 4px 0 0;
  margin-bottom: 12px;
  overflow: hidden;
}

.md-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}
.md-row:last-child { border-bottom: none; }
.md-row-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Direction segmented */
.md-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 4px;
}
.md-dir-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--border-subtle);
  background: var(--tia-white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 160ms var(--ease-standard);
}
.md-dir-btn .arrow {
  font-size: 20px;
  line-height: 1;
}
.md-dir-btn.up.active {
  border-color: var(--tia-positive);
  background: var(--tia-positive-soft);
  color: var(--tia-positive);
}
.md-dir-btn.down.active {
  border-color: var(--tia-negative);
  background: var(--tia-negative-soft);
  color: var(--tia-negative);
}
/* v1.0.6 — stronger physical "depression" feedback on press:
   scale down + 1px push-down + inner shadow + faster transition.
   Replaces the barely-visible scale(0.98) that didn't read as a
   button press. */
.md-dir-btn {
  box-shadow: 0 1px 0 rgba(0, 0, 50, 0.04), inset 0 -2px 0 rgba(0, 0, 50, 0.06);
  transition: transform 60ms ease-out, box-shadow 60ms ease-out,
              background-color 160ms var(--ease-standard),
              border-color 160ms var(--ease-standard),
              color 160ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.md-dir-btn:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 50, 0.12);
}

/* Confidence segmented */
.md-conf {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 6px 12px 10px;
}
.md-conf-btn {
  padding: 11px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--tia-white);
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 160ms var(--ease-standard);
}
.md-conf-btn .lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-primary);
}
.md-conf-btn .pay {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.md-conf-btn.active {
  border-color: var(--tia-navy);
  background: var(--tia-navy-50);
}
.md-conf-btn.active .lbl { color: var(--tia-navy); }
/* v1.0.6 — Physical press feedback (matches .md-dir-btn) */
.md-conf-btn {
  box-shadow: 0 1px 0 rgba(0, 0, 50, 0.04), inset 0 -2px 0 rgba(0, 0, 50, 0.06);
  transition: transform 60ms ease-out, box-shadow 60ms ease-out,
              background-color 160ms var(--ease-standard),
              border-color 160ms var(--ease-standard),
              color 160ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.md-conf-btn:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 50, 0.12);
}

/* Range chips */
.md-range {
  padding: 4px 12px 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.md-range-chip {
  flex: 1;
  min-width: 0;
  padding: 9px 6px;
  border-radius: 999px;
  border: 1.5px solid var(--border-subtle);
  background: var(--tia-white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-align: center;
  transition: all 160ms var(--ease-standard);
}
.md-range-chip.active {
  border-color: var(--tia-navy);
  background: var(--tia-navy);
  color: var(--tia-white);
}
.md-range-chip.dim { opacity: 0.45; }
/* v1.0.6 — Physical press feedback on range chips. Range chips
   were missing any :active state — taps felt dead. */
.md-range-chip {
  box-shadow: 0 1px 0 rgba(0, 0, 50, 0.04), inset 0 -2px 0 rgba(0, 0, 50, 0.06);
  transition: transform 60ms ease-out, box-shadow 60ms ease-out,
              background-color 160ms var(--ease-standard),
              border-color 160ms var(--ease-standard),
              color 160ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.md-range-chip:active {
  transform: scale(0.94) translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 50, 0.14);
}

/* Payout summary */
.md-summary {
  padding: 12px 16px;
  background: var(--tia-navy-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
}
.md-summary .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.md-summary .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--tia-navy);
  letter-spacing: -0.01em;
}
.md-summary .val .accent { color: var(--tia-red); }

/* ──────────────────────────── Swipe to lock ──────────────────────────── */

.md-swipe {
  position: relative;
  height: 60px;
  background: var(--tia-white);
  border-radius: 999px;
  overflow: hidden;
  user-select: none;
  border: 1px solid var(--border-default);
}
.md-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 8px -18px 0;
  /* v2.5.8 — clear the iOS home indicator / tab bar via safe-area inset. */
  padding: 10px 18px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--tia-white);
}
.md-swipe.disabled { opacity: 0.5; pointer-events: none; }
.md-swipe-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tia-navy);
  pointer-events: none;
}
.md-swipe-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 56px;
  background: var(--tia-navy);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 14px;
  color: var(--tia-white);
  transition: width 100ms ease-out;
}
.md-swipe-fill.full {
  background: var(--tia-red);
  transition: width 200ms var(--ease-standard);
}
.md-swipe-handle {
  position: absolute;
  top: 6px;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--tia-navy);
  display: grid;
  place-items: center;
  color: var(--tia-white);
  cursor: grab;
  box-shadow: 0 4px 12px rgba(0,0,100,0.3);
  transition: left 100ms ease-out, background 200ms;
}
.md-swipe-handle.armed { background: var(--tia-red); box-shadow: 0 4px 16px rgba(255,0,0,0.4); }
.md-swipe-handle:active { cursor: grabbing; }
.md-swipe-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tia-navy);
  pointer-events: none;
  padding-left: 30px;
}
.md-swipe-hint.fading { opacity: 0; transition: opacity 200ms; }

/* ──────────────────────────── Bottom tab bar ──────────────────────────── */

.md-tabs {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--tia-white);
  border-top: 1px solid var(--border-subtle);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.md-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}
.md-tab.active { color: var(--tia-navy); }
.md-tab.active::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--tia-red);
  border-radius: 999px;
}

/* ──────────────────────────── Awaiting state ──────────────────────────── */

.md-await-card {
  background: var(--tia-navy);
  color: var(--tia-white);
  border-radius: 16px;
  padding: 22px 20px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.md-await-card .eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tia-red);
  margin-bottom: 10px;
}
.md-await-call {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.md-await-call .dir {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.md-await-call .ticker {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.8);
}
.md-await-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}
.md-await-meta .sep { margin: 0 6px; opacity: 0.4; }
.md-await-divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 16px 0;
}
.md-await-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.md-await-row:last-child { margin-bottom: 0; }
.md-await-row .lbl {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.md-await-row .val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--tia-white);
  letter-spacing: 0.02em;
}
.md-await-row .val.live { color: #5fe3a4; }

.md-await-pnl {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.md-await-pnl .lbl {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.md-await-pnl .val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #5fe3a4;
}

.md-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 1.5px solid var(--tia-navy);
  background: var(--tia-white);
  color: var(--tia-navy);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-bottom: 10px;
}
.md-secondary-btn:active { background: var(--tia-light-blue); }
.md-secondary-btn.danger { border-color: var(--tia-red); color: var(--tia-red); }

/* Section card (community / recent / etc) */
.md-section {
  background: var(--tia-white);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.md-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.md-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tia-navy);
}
.md-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
}

/* Community split bar */
.md-split {
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--tia-white);
  margin-bottom: 8px;
}
.md-split-up {
  background: var(--tia-positive);
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.md-split-down {
  background: var(--tia-negative);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}
.md-split-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ──────────────────────────── Result state ──────────────────────────── */

.md-result-hero {
  position: relative;
  padding: 32px 20px 28px;
  text-align: center;
  border-radius: 16px;
  background: var(--tia-navy);
  color: var(--tia-white);
  margin-bottom: 14px;
  overflow: hidden;
}
.md-result-hero.win {
  background: linear-gradient(180deg, #001a47 0%, var(--tia-navy) 100%);
}
.md-result-hero .eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tia-red);
  margin-bottom: 14px;
}
.md-result-verdict {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 10px;
}
.md-result-verdict .accent { color: var(--tia-red); }
.md-result-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.md-result-points {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  font-family: var(--font-mono);
}
.md-result-points .num {
  font-size: 22px;
  font-weight: 600;
  color: var(--tia-white);
}
.md-result-points .num.accent { color: #5fe3a4; }
.md-result-points .lbl {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.md-result-breakdown {
  background: var(--tia-white);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.md-result-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 13px;
}
.md-result-line:last-child { border-bottom: none; padding-bottom: 0; }
.md-result-line:first-child { padding-top: 0; }
.md-result-line .lbl { color: var(--fg-muted); }
.md-result-line .val {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--tia-navy);
}
.md-result-line .val.win { color: var(--tia-positive); }
.md-result-line .val.miss { color: var(--fg-muted); text-decoration: line-through; }

.md-next-game {
  text-align: center;
  padding: 14px 0 4px;
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.md-next-game .timer {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--tia-navy);
  letter-spacing: 0.04em;
  margin: 4px 0;
}

/* ──────────────────────────── Generic stub screens ──────────────────────────── */

.md-stub-head {
  padding: 6px 0 18px;
}
.md-stub-h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tia-navy);
  margin: 0 0 4px;
}
.md-stub-sub {
  font-size: 13px;
  color: var(--fg-muted);
}

.md-lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.md-lb-row:last-child { border-bottom: none; }
.md-lb-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.md-lb-rank.top { color: var(--tia-red); font-weight: 600; }
.md-lb-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--tia-navy);
}
.md-lb-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--tia-navy);
}
.md-lb-row.you {
  background: var(--tia-navy-50);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 8px;
  border-bottom-color: transparent;
}

.md-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.md-stat-card {
  background: var(--tia-white);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
}
.md-stat-card .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.md-stat-card .val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--tia-navy);
  letter-spacing: -0.01em;
}
.md-stat-card .val.accent { color: var(--tia-red); }
.md-stat-card .delta {
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 4px;
}
.md-stat-card .delta.up { color: var(--tia-positive); }

/* ──────────────────────────── Edge sheet ──────────────────────────── */

.md-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,30,0.4);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  animation: fadeIn 200ms;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.md-sheet {
  width: 100%;
  background: var(--tia-white);
  border-radius: 20px 20px 0 0;
  padding: 18px 20px 28px;
  animation: slideUp 240ms var(--ease-standard);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.md-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-default);
  border-radius: 999px;
  margin: 0 auto 14px;
}
.md-sheet-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--tia-navy);
  margin-bottom: 4px;
}
.md-sheet-sub {
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.md-mult-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.md-mult-row:last-child { border-bottom: none; }
.md-mult-row .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--tia-navy);
}
.md-mult-row .desc {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  font-weight: 300;
}
.md-mult-row .mult {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--tia-red);
  flex-shrink: 0;
}
.md-mult-row .mult.dim { color: var(--fg-subtle); }

.md-sheet-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--tia-navy);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.md-sheet-total .lbl {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tia-navy);
}
.md-sheet-total .val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--tia-red);
  letter-spacing: -0.02em;
}

/* Misc */
.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
 * PHASE 1.3 TRANSITIONAL SHELL
 * ─────────────────────────────────────────────────────────────────
 * The redesign's source app.css assumes a single flex-column .md-app
 * wrapper containing .md-header, .md-screen, and .md-tabs. Wrapping
 * the existing 1500-line #app in that structure is high-risk for a
 * single commit. Instead, Phase 1.3 layers the new .md-header and
 * .md-tabs as fixed-position overlays on top of the legacy #app,
 * pads the body to make room, and hides the legacy .header + the
 * hamburger button. Visually equivalent to the wrapped structure,
 * structurally trivial to revert.
 *
 * Phase 2 (or a later cleanup pass) can collapse this into the
 * architecturally pure .md-app wrapper once the inner screens are
 * fully on the new design system.
 * ───────────────────────────────────────────────────────────────── */

/* Fixed top header overlay */
.md-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--tia-white);
    border-bottom: 1px solid var(--border-subtle);
    /* Respect iOS notch / dynamic-island top inset */
    padding-top: calc(env(safe-area-inset-top, 0) + 12px);
}

/* Fixed bottom tab bar overlay */
.md-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* v1.0.5 — second wobble pass. Removed will-change + backface-
       visibility (known iOS WKWebView jitter triggers during inertial
       scroll). `contain: layout style paint` isolates the tab bar's
       layout/paint from the rest of the document so scroll events
       don't trigger style invalidation here. */
    contain: layout style paint;
    /* Static padding-bottom that covers all iPhone home-indicator
       heights (24px is the visible indicator on iPhone X+). Replaces
       the previous calc() with env() so the value can't change mid-
       scroll if iOS recomputes the inset. */
    padding-bottom: 24px;
}

/* ─────────── v1.0.6 — Crystal Ball reveal panel ─────────── */
.crystal-ball-reveal {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: var(--tia-white);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance);
}
.crystal-ball-reveal .cb-head {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.crystal-ball-reveal .cb-split-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}
.crystal-ball-reveal .cb-up { background: #10b981; transition: width 300ms ease; }
.crystal-ball-reveal .cb-down { background: var(--tia-red, #ef4444); transition: width 300ms ease; }
.crystal-ball-reveal .cb-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 700;
}
.crystal-ball-reveal .cb-up-label { color: #6ee7b7; }
.crystal-ball-reveal .cb-down-label { color: #fca5a5; }
.crystal-ball-reveal .cb-meta {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─────────── v2.2.2 — Echo suggestion chip ───────────
 * Lives next to the wildcard deck when the user arms Echo. One-tap
 * Apply copies the top Pro Pick's direction + confidence + range
 * into the user's call. */
.echo-suggestion {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: linear-gradient(135deg, #0284c7 0%, #075985 100%);
    color: var(--tia-white);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance);
}
.echo-suggestion .echo-head {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.echo-suggestion .echo-body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
.echo-suggestion .echo-body-loading { font-style: italic; opacity: 0.85; }
.echo-suggestion .echo-pick {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.echo-suggestion .echo-pick-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    margin-bottom: 4px;
}
.echo-suggestion .echo-pick-name { font-weight: 700; }
.echo-suggestion .echo-pick-acc {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.echo-suggestion .echo-pick-call {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.echo-suggestion .echo-pick-call.up   .echo-pick-dir { color: #6ee7b7; font-size: 22px; }
.echo-suggestion .echo-pick-call.down .echo-pick-dir { color: #fca5a5; font-size: 22px; }
.echo-suggestion .echo-pick-conf {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
}
.echo-suggestion .echo-pick-range {
    font-size: 12px;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.75);
    margin-left: auto;
}
.echo-suggestion .echo-cta-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.echo-suggestion .echo-apply-btn { flex: 1; }
.echo-suggestion .echo-dismiss-btn {
    flex: 0 0 auto;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: var(--tia-white) !important;
}
.echo-suggestion .echo-foot {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─────────── v1.0.4 — DoN sub-line in If-You're-Right tile ─────────── */
.pnl-sub {
    margin-top: 4px;
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    line-height: 1.2;
}

/* ─────────── v1.0.6 — TIA contextual placements ───────────
   Card-shaped CTAs that replace the removed persistent bottom banner.
   Three placements share this style:
     • Stats screen footer (analytical context)
     • Result screen — only on losses / near-misses (teaching moment)
     • Weekend / market-closed screen (no game running)
   Plus the More-tab About row opens the info popup which carries
   a matching .md-info-cta-button. */
.md-tia-card {
    display: block;
    margin: 14px 0 4px;
    padding: 14px 16px 12px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--tia-navy) 0%, #20206a 100%);
    color: var(--tia-white);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease);
    border: 0;
    width: 100%;
}
.md-tia-card:active { transform: scale(0.98); }
.md-tia-card-eyebrow {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}
.md-tia-card-headline {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--tia-white);
    margin-bottom: 4px;
}
.md-tia-card-body {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
}
.md-tia-card-cta {
    display: inline-block;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--tia-white);
    color: var(--tia-navy);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: none; /* parent button handles tap */
}
/* Loss-CTA variant — red gradient pull, signals "the pros got this" */
.md-tia-card.result-loss-cta {
    background: linear-gradient(135deg, var(--tia-red, #e53e4c) 0%, #991b1b 100%);
}

/* More-tab variant — sits directly above the settings list, so add
   breathing room below to visually separate the ad from menu rows. */
.md-tia-card.more-header {
    margin-bottom: 22px;
}

/* Info popup CTA — same pill style for the About-TIA popup body. */
.md-info-cta-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-top: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--tia-navy);
    color: var(--tia-white);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 100, 0.18);
}
.md-info-cta-button:active { transform: scale(0.98); }

/* v1.0.5 — Bottom toolbar wobble: the real cause was native WKWebView
 * rubber-band (iOS) + Android WebView overscroll. Both fixed natively
 * in CustomBridgeViewController.swift (bounces=false) and
 * MainActivity.java (OVER_SCROLL_NEVER). CSS-only attempts couldn't
 * suppress the native scroll-view bounce — overscroll-behavior:contain
 * governs scroll-chaining, not the WKScrollView's own animation. The
 * structural body-scroll workaround from the prior commit was reverted
 * since native fixes are sufficient and cleaner. */
body {
    padding-top: calc(env(safe-area-inset-top, 0) + 52px);
    /* v1.0.6 — Persistent ad banner removed (64px reclaimed).
       Padding now just clears the fixed .md-tabs (~62px) + 8px buffer. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 70px);
}

/* Hide the legacy header (logo + auth + hamburger) — replaced by
 * .md-header. Keep the markup in the DOM for Phase 2 migration of
 * the hamburger contents into a real More tab screen. */
#app > .header {
    display: none !important;
}

/* Hide the hamburger button specifically too. Some flows may still
 * reference it for now; the More tab will eventually take over. */
#hamburger-toggle {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 1.4 — TODAY SCREEN COMPOSE STATE
 * ─────────────────────────────────────────────────────────────────
 * Restyle the existing predict-screen markup to match the redesign
 * without restructuring the DOM (which would risk breaking the
 * ~10K-line app.js wiring). Hides legacy chrome that the design
 * dropped (stepper, market clock, ticker tape, bonus strips, etc.)
 * and overlays the new .md-* visual language onto the existing
 * .ticker-display / .direction-buttons / .confidence-meter / etc.
 * containers via more-specific selectors.
 * ───────────────────────────────────────────────────────────────── */

/* HIDE LEGACY CHROME NOT IN THE DESIGN
 * Bonus chips (Earnings, Golden Hour, Comeback) and the wildcard deck
 * will return in Phase 2 as the Edge sheet — for now they're not on
 * the predict screen. */
#market-clock,
#ticker-tape-predict,
.bonus-strip,
.bonus-strip-secondary,
#bonus-wheel-area,
.predict-stepper,
.predict-stepper-spacer,
.game-header,
.ticker-description,
.live-counter,
.risk-meter,
.payout-header {
    display: none !important;
}

/* WILDCARD DECK — visible as selectable cards.
 * The legacy markup hides the deck inline via style="display:none"
 * and app.js shows it when the user has wildcards. Force the deck
 * to render whenever it has content, and restyle the cards. */
.wildcard-deck {
    display: block !important;
    margin: 14px 0 0 !important;
}
.wildcard-deck .section-label {
    margin-bottom: 8px !important;
}
.wildcard-deck .optional {
    font-size: 10px !important;
    color: var(--fg-subtle) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* v2.2.3 — Horizontal carousel for 3+ wildcards. The old grid wrapped
 * to multiple rows once you held more than two cards, which stretched
 * the Play a Wildcard section vertically and pushed Lock In off-screen.
 * Carousel layout: each card is a fixed-width flex item with x-axis
 * scroll-snap. Touch users swipe; the snap keeps each card neatly
 * framed at the start. -webkit-overflow-scrolling preserves iOS
 * momentum.
 *
 * 1- and 2-card decks still look fine because the row simply doesn't
 * overflow — no horizontal scroll happens until card #3 lands. */
.wildcard-cards {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding-bottom: 4px; /* room for the scrollbar / momentum overshoot */
}
.wildcard-cards > .wildcard-card {
    flex: 0 0 152px !important;
    scroll-snap-align: start;
}
/* Hide the native scrollbar on WebKit — the cards themselves are the
 * progress indicator. Keep it visible-on-hover for desktop. */
.wildcard-cards::-webkit-scrollbar { height: 4px; }
.wildcard-cards::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 100, 0.18);
    border-radius: 999px;
}
.wildcard-cards::-webkit-scrollbar-track { background: transparent; }
.wildcard-card {
    /* v1.0.5 — Was white-on-white with 1.5px border, which read as a
       card-within-a-card inside the predict screen's main .card.
       Now: very subtle grey tile with no border. The activated state
       (below) still pops with navy fill so the armed wildcard is
       unmistakable. */
    background: var(--tia-grey-50) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 12px 10px !important;
    cursor: pointer !important;
    transition: all 160ms var(--ease-standard) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    box-shadow: none !important;
    text-align: left !important;
}
.wildcard-card:hover {
    background: var(--tia-grey-100, #e7e7ed) !important;
}
.wildcard-card-icon {
    font-size: 22px !important;
    line-height: 1 !important;
}
.wildcard-card-title {
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.01em !important;
}
.wildcard-card-detail {
    font-size: 11px !important;
    font-weight: 300 !important;
    color: var(--fg-muted) !important;
    line-height: 1.35 !important;
}
.wildcard-card-expiry {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    color: var(--fg-subtle) !important;
    letter-spacing: 0.02em !important;
    margin-top: auto !important;
}
.wildcard-card.activated,
.wildcard-card.armed {
    background: var(--tia-navy) !important;
    border-color: var(--tia-navy) !important;
}
.wildcard-card.activated .wildcard-card-title,
.wildcard-card.armed .wildcard-card-title { color: var(--tia-white) !important; }
.wildcard-card.activated .wildcard-card-detail,
.wildcard-card.armed .wildcard-card-detail { color: rgba(255,255,255,0.7) !important; }
.wildcard-card.activated .wildcard-card-expiry,
.wildcard-card.armed .wildcard-card-expiry { color: rgba(255,255,255,0.5) !important; }
.wildcard-card-armed-badge {
    margin-top: 4px !important;
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--tia-red) !important;
    background: var(--tia-white) !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
}

/* Hide the legacy btn-submit — the swipe-to-lock CTA from b53c4d0
 * is the primary control, the legacy submit button is just an a11y
 * fallback that becomes confusing once it's not the focus. */
#app .btn-submit {
    display: none !important;
}

/* TICKER HERO CARD
 * The legacy .ticker-display is a flat row of inline elements;
 * restyle it to match the design's .md-ticker card layout.
 * v2.2.2 — Unified panel on the predict screen: description and
 * 30-day chart are folded inside the same card. The 5-day sparkline
 * is gone. Awaiting / results screens keep the slim layout (no
 * description/chart children to display). */
.ticker-display {
    background: var(--tia-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    padding: 14px 16px 12px !important;
    margin-bottom: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "symbol price"
        "name name"
        "desc desc"
        "chart chart" !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: baseline !important;
}
.ticker-display #ticker-logo {
    display: none !important; /* design doesn't use a logo image */
}
.ticker-display .ticker-symbol {
    grid-area: symbol;
    font-family: var(--font-display) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--tia-navy) !important;
    line-height: 1 !important;
}
.ticker-display .ticker-name {
    grid-area: name;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--fg-muted) !important;
}
.ticker-display .info-tip-inline {
    display: none !important; /* legacy info-tip — no longer rendered */
}
.ticker-display .sparkline {
    display: none !important; /* v2.2.2 — 5-day sparkline removed */
}
/* v2.2.2 — Description sits inside the unified panel. Awaiting /
 * results screens host their own ticker-description outside the
 * card; this rule only matches when the description is a direct
 * child of .ticker-display. */
.ticker-display > .ticker-description {
    grid-area: desc;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--fg-muted) !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.ticker-display > .ticker-description:empty {
    display: none !important;
}
/* 30-day chart folded inside the same card. Drop the chart's own
 * border / padding so it visually belongs to the ticker panel,
 * not a separate sibling card. */
.ticker-display > .md-precall-chart {
    grid-area: chart;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px 0 0 !important;
}

/* Live price block (current price + delta) — design has these in
 * top-right of ticker card. Currently rendered in a separate
 * .price-info row below; pull it up into the ticker grid via CSS. */
.price-info {
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-align: right !important;
    font-family: var(--font-mono) !important;
}
.price-info .price-row { display: block !important; }
.price-info .price-label {
    display: none !important; /* "Current" label not in design */
}
.price-info .price-value {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.01em !important;
}

/* DIRECTION BUTTONS (.direction-buttons → .md-dir layout) */
.direction-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
}
.btn-direction {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 18px 8px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border-subtle) !important;
    background: var(--tia-white) !important;
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--fg-muted) !important;
    transition: all 160ms var(--ease-standard) !important;
    /* Override legacy gradient/glow styles */
    box-shadow: none !important;
    text-shadow: none !important;
}
.btn-direction .arrow {
    font-size: 20px !important;
    line-height: 1 !important;
}
.btn-direction.btn-up.selected,
.btn-direction.btn-up.active {
    border-color: var(--tia-positive) !important;
    background: var(--tia-positive-soft) !important;
    color: var(--tia-positive) !important;
}
.btn-direction.btn-down.selected,
.btn-direction.btn-down.active {
    border-color: var(--tia-negative) !important;
    background: var(--tia-negative-soft) !important;
    color: var(--tia-negative) !important;
}
.btn-direction:active { transform: scale(0.98); }

/* CONFIDENCE METER (.confidence-meter → .md-conf layout) */
.confidence-meter {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    margin: 14px 0 0 !important;
}
.btn-conf {
    padding: 11px 4px !important;
    border-radius: 6px !important;  /* tile-style, small corner radius */
    border: 1.5px solid var(--border-subtle) !important;
    background: var(--tia-white) !important;
    font-family: var(--font-body) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    transition: all 160ms var(--ease-standard) !important;
    box-shadow: none !important;
}
.btn-conf .conf-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--fg-primary) !important;
}
.btn-conf .conf-payoff,
.btn-conf .conf-win,
.btn-conf .conf-sep,
.btn-conf .conf-loss {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
    color: var(--fg-muted) !important;
    background: none !important; /* kill legacy chip backgrounds */
}
/* Selected confidence: navy fill with white text — full inversion so
 * the choice reads at a glance. Override every nested text colour
 * (label, payoff, win, sep, loss) since legacy CSS sets them
 * individually with high specificity. */
.btn-conf.selected,
.btn-conf.active {
    border-color: var(--tia-navy) !important;
    background: var(--tia-navy) !important;
}
.btn-conf.selected .conf-label,
.btn-conf.active .conf-label,
.btn-conf.selected .conf-payoff,
.btn-conf.active .conf-payoff,
.btn-conf.selected .conf-win,
.btn-conf.active .conf-win,
.btn-conf.selected .conf-loss,
.btn-conf.active .conf-loss,
.btn-conf.selected .conf-sep,
.btn-conf.active .conf-sep { color: var(--tia-white) !important; }
.btn-conf:active { transform: scale(0.98); }

/* RANGE BRACKETS (.range-brackets → .md-range chips) */
.range-brackets {
    display: flex !important;
    gap: 6px !important;
    margin: 14px 0 0 !important;
    flex-wrap: wrap !important;
}
.range-brackets > * {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 9px 6px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--border-subtle) !important;
    background: var(--tia-white) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    transition: all 160ms var(--ease-standard) !important;
    box-shadow: none !important;
}
.range-brackets > .selected,
.range-brackets > .active {
    border-color: var(--tia-navy) !important;
    background: var(--tia-navy) !important;
    color: var(--tia-white) !important;
}

/* PAYOUT SUMMARY (.payout-potential → .md-summary) */
.payout-potential {
    padding: 12px 16px !important;
    margin-top: 14px !important;
    background: var(--tia-navy-50) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-subtle) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.payout-breakdown {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.01em !important;
}

/* SECTION LABELS (.section-label → .md-row-label) */
.section-label {
    margin: 14px 0 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
    padding: 0 !important;
}
.section-label .step-number {
    display: none !important; /* drop the numbered badges; design has no stepper */
}
.section-label .info-tip {
    color: var(--fg-muted) !important;
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
}

/* v2.5.8 — Kill the per-control info-tip "i" icons on the compose Ticket.
 * They were the last unfixed design finding (icon overload). A single
 * "How scoring works" link (#md-scoring-link) opens the staking-aware
 * #scoring-popup instead. Scoped to .predict-step so any info-tips on
 * other screens are untouched. The hidden tips keep their data-staking
 * carriers, so applyStakingTooltips() still runs harmlessly. */
.predict-step .section-label .info-tip {
    display: none !important;
}

/* The single consolidated scoring explainer link. Quiet, centered, sits
 * just above the Lock-In CTA — discoverable without shouting. */
.md-scoring-link {
    display: block;
    margin: 4px auto 12px;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    font: 600 var(--fs-caption, 0.8125rem)/1 var(--font-body, inherit);
    letter-spacing: 0.01em;
    color: var(--fg-muted, #6B6B82);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.md-scoring-link:hover,
.md-scoring-link:focus-visible {
    color: var(--tia-navy, #000064);
}

/* Predict step containers: show ALL at once (vs. legacy step-by-step
 * stepper progression) so the single-card design works. */
.predict-step {
    display: block !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 1.5 — AWAITING STATE
 * ─────────────────────────────────────────────────────────────────
 * The post-lock "awaiting close" screen had 4 nested sub-tabs
 * (Your Call / Market / Community / Social). The redesign shows
 * a single primary card with the locked call + live P/L + secondary
 * buttons + community split. Hide the sub-tabs, hide everything
 * except the "Your Call" tab content, restyle that into the design's
 * navy card layout.
 * ───────────────────────────────────────────────────────────────── */

/* Hide the awaiting sub-tab nav — redesign doesn't have it */
.awaiting-tabs {
    display: none !important;
}

/* Hide all awaiting tab contents EXCEPT "Your Call" — the others
 * surface deeper analytics that the design defers to other surfaces */
.awaiting-tab-content[data-awaiting-tab-content="market"],
.awaiting-tab-content[data-awaiting-tab-content="community"],
.awaiting-tab-content[data-awaiting-tab-content="social"] {
    display: none !important;
}
/* Force the "Your Call" content to be visible regardless of tab state */
.awaiting-tab-content[data-awaiting-tab-content="call"] {
    display: block !important;
}

/* Countdown header — "Market closes in HH:MM" */
.countdown-section {
    text-align: center !important;
    margin-bottom: 16px !important;
}
.countdown-section .label {
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--tia-red) !important;
    margin: 0 0 4px !important;
}
#close-countdown,
.countdown-section .countdown {
    font-family: var(--font-mono) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: var(--tia-navy) !important;
    letter-spacing: 0.04em !important;
}

/* Locked-call panel — turn into the navy hero card */
.awaiting-panels {
    display: block !important;
    margin-bottom: 14px !important;
}
.awaiting-panel.range-panel {
    background: var(--tia-navy) !important;
    color: var(--tia-white) !important;
    border-radius: 16px !important;
    padding: 22px 20px 20px !important;
    margin-bottom: 12px !important;
    border: none !important;
    box-shadow: none !important;
}
.awaiting-panel.range-panel .ftw-label {
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--tia-red) !important;
    margin-bottom: 12px !important;
}
.awaiting-panel.range-panel .prediction-badge {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--tia-white) !important;
    margin-bottom: 6px !important;
    background: none !important; /* kill legacy badge background */
    padding: 0 !important;
    border: none !important;
}
.awaiting-panel.range-panel .prediction-range,
.awaiting-panel.range-panel .prediction-conf {
    font-size: 13px !important;
    color: rgba(255,255,255,0.7) !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
}

/* "If you're right" P/L panel — flatten into the navy card or
 * keep as a sibling. Style consistently with the navy aesthetic. */
#pnl-tracker {
    background: var(--tia-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    border-style: solid !important; /* override inline 'dashed' */
}
#pnl-tracker .ftw-label {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
    margin-bottom: 6px !important;
}
#pnl-tracker .pnl-value {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--tia-positive) !important;
    letter-spacing: -0.01em !important;
}
/* v2.3.6 — Colour the projected number by its sign. updatePnL() toggles
 * .pnl-positive / .pnl-negative on #pnl-tracker, but no rule ever acted on
 * .pnl-negative, so a loss ("-148 pts") rendered green (smoke report:
 * "if I'm right I lose 148 points?" — green negative number). */
#pnl-tracker.pnl-positive .pnl-value { color: var(--tia-positive) !important; }
#pnl-tracker.pnl-negative .pnl-value { color: var(--tia-negative) !important; }

/* v3.0 — Staking control (replaces the Safe/Normal/Bold meter when the
 * STAKING flag is on; hidden + inert otherwise). The confidence meter
 * carries `display:grid !important`, so hide it with a matching-weight
 * rule when staking is active. */
.confidence-meter.staking-hidden,
.risk-meter.staking-hidden { display: none !important; }
.stake-meter { margin-top: 4px; }
.stake-presets { display: flex; gap: 8px; margin-bottom: 12px; }
.btn-stake {
    flex: 1; padding: 11px 0; border-radius: 10px;
    border: 1.5px solid var(--border-subtle, #e2e5ee);
    background: var(--tia-white, #fff); color: var(--tia-navy, #000064);
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 140ms var(--ease-standard, ease),
                background 140ms var(--ease-standard, ease),
                color 140ms var(--ease-standard, ease);
}
.btn-stake:active { transform: scale(0.96); }
.btn-stake.selected {
    background: var(--tia-navy, #000064); color: #fff;
    border-color: var(--tia-navy, #000064);
}
.stake-slider { width: 100%; margin: 4px 0 12px; accent-color: var(--tia-navy, #000064); }
.stake-readout {
    text-align: center; font-family: var(--font-display); font-size: 15px;
    color: var(--fg-muted, #6b7280); padding: 11px; border-radius: 10px;
    background: var(--bg-alt, #f6f7fb); transition: opacity 140ms ease;
}
.stake-readout.is-loading { opacity: 0.5; }
.stake-readout .stake-win { color: var(--tia-positive, #16a34a); }
.stake-ceiling-note {
    text-align: center; font-size: 11px; font-weight: 600;
    color: var(--tia-red, #e53e4c); margin-top: 6px;
}
/* Result-screen wager line */
.result-stake-line {
    text-align: center; font-size: 13px; font-weight: 600;
    color: var(--fg-muted, #6b7280); margin-top: 6px;
}
.result-stake-line .stake-win { color: var(--tia-positive, #16a34a); }
.result-stake-line .stake-loss { color: var(--tia-negative, #e53e4c); }

/* Stake calibration panel (Stats tab) */
.md-stakecal { margin-top: 8px; }
.md-stakecal-roi { text-align: center; margin-bottom: 12px; }
.md-stakecal-roi .val {
    display: block; font-family: var(--font-display);
    font-size: 30px; font-weight: 800; letter-spacing: -0.01em;
    color: var(--fg-muted, #6b7280);
}
.md-stakecal.v-sharp .md-stakecal-roi .val { color: var(--tia-positive, #16a34a); }
.md-stakecal.v-underwater .md-stakecal-roi .val { color: var(--tia-negative, #e53e4c); }
.md-stakecal-roi .lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fg-muted, #6b7280);
}
.md-stakecal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.md-stakecal-grid .cell {
    text-align: center; background: var(--bg-alt, #f6f7fb);
    border-radius: 10px; padding: 10px 4px;
}
.md-stakecal-grid .cell .m {
    display: block; font-family: var(--font-display);
    font-size: 16px; font-weight: 700; color: var(--tia-navy, #000064);
}
.md-stakecal-grid .cell .k {
    font-size: 10px; color: var(--fg-muted, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* Private-league invite QR */
.md-league-qr { display: flex; justify-content: center; margin-top: 14px; }
.md-league-qr svg {
    width: 168px; height: 168px; background: #fff;
    padding: 8px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Secondary buttons (Share Your Call, Use Second Chance, Your Insights)
 * — outlined navy buttons matching .md-secondary-btn */
.btn-share,
.btn-insights,
#second-chance-edit-btn,
.share-call-bar .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 13px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--tia-navy) !important;
    background: var(--tia-white) !important;
    color: var(--tia-navy) !important;
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    /* v1.0.7 — pushable feedback. Matches the 160ms transition used
       on .btn-direction / .btn-conf in the Call setup so the press
       depression feels consistent across the Today screen. */
    transition: transform 160ms var(--ease-standard, ease),
                background 160ms var(--ease-standard, ease),
                color 160ms var(--ease-standard, ease) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}
.btn-share:active,
.btn-insights:active,
#second-chance-edit-btn:active,
.share-call-bar .btn:active {
    /* Brief navy-fill + white-text inversion on press to mirror the
       "selected" state of the Call-setup buttons — gives the button a
       clear tactile "depression" feel. */
    transform: scale(0.98) !important;
    background: var(--tia-navy) !important;
    color: var(--tia-white) !important;
}

/* Second Chance is the danger-flavoured secondary — red outline */
.second-chance-panel {
    border: 1.5px solid var(--tia-red) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: var(--tia-white) !important;
}
#second-chance-edit-btn {
    border-color: var(--tia-red) !important;
    color: var(--tia-red) !important;
    margin-top: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 1.5 — RESULT STATE
 * ─────────────────────────────────────────────────────────────────
 * The result reveal has a 3-stage progressive animation. The
 * design's result hero is a single navy card with verdict + big
 * points + breakdown lines. Restyle the existing markup to match.
 * ───────────────────────────────────────────────────────────────── */

/* Hide redundant chrome on the result screen */
#screen-results .game-header,
#screen-results .ticker-description,
#screen-results .welcome-message,
.result-logo-burst {
    display: none !important;
}

/* Ticker display on result screen — small caption, not the
 * full hero card (the result hero IS the focal point now) */
#screen-results .ticker-display {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
}
#screen-results .ticker-display .ticker-symbol {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.02em !important;
}
#screen-results .ticker-display .ticker-name {
    font-size: 11px !important;
    color: var(--fg-subtle) !important;
}

/* Reveal stages — show all at once (the staged animation can layer
 * on top via opacity transitions; for now we render them inline) */
.reveal-stage {
    display: block !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* Direction + change rows — small, mono, above the hero */
.result-direction,
.result-change {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    color: var(--fg-muted) !important;
    text-align: center !important;
    margin-bottom: 4px !important;
    background: none !important;
    padding: 0 !important;
}

/* Result hero card — navy fill, big verdict + points */
.result-card {
    background: linear-gradient(180deg, #001a47 0%, var(--tia-navy) 100%) !important;
    color: var(--tia-white) !important;
    border-radius: 16px !important;
    padding: 28px 20px 24px !important;
    text-align: center !important;
    margin: 12px 0 14px !important;
    border: none !important;
    box-shadow: none !important;
}
/* Breakdown lines inside the result card */
.result-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed rgba(255,255,255,0.18) !important;
    font-size: 13px !important;
    text-align: left !important;
    color: rgba(255,255,255,0.75) !important;
    font-family: var(--font-body) !important;
}
.result-line:last-of-type { border-bottom: none !important; }
/* Big points number — the focal element */
.result-points {
    /* Rendered structure: <span class="num">+N</span><span class="lbl">PTS</span>
     * so the count-up number can animate at 44px while the PTS label
     * sits small + tracked beside it. */
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 18px 0 6px !important;
    text-align: center !important;
}
.result-points .num {
    font-family: var(--font-display) !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    color: var(--tia-white) !important;
}
.result-points .lbl {
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
.result-points .mult {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    color: var(--tia-red) !important;
    margin-left: 6px !important;
}
.result-streak {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--tia-red) !important;
    margin-top: 14px !important;
    text-align: center !important;
}
.result-earnings-tag,
.result-near-flat,
.result-community-beat {
    font-size: 11px !important;
    color: rgba(255,255,255,0.65) !important;
    margin-top: 6px !important;
    text-align: center !important;
}

/* Next-game countdown — small mono callout below the hero */
.next-game-timer {
    text-align: center !important;
    margin-top: 16px !important;
    padding: 14px 0 4px !important;
    color: var(--fg-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}
.next-game-timer .next-game-label {
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
    margin: 0 0 4px !important;
}
.next-game-timer .countdown {
    font-family: var(--font-mono) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: var(--tia-navy) !important;
    letter-spacing: 0.04em !important;
}
.next-game-timer .next-game-opens {
    font-size: 11px !important;
    color: var(--fg-subtle) !important;
    margin-top: 4px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 1.6 — GLOBAL POLISH
 * ─────────────────────────────────────────────────────────────────
 * Lock the app to light mode (per the May 2026 brand pivot — dark
 * mode dropped), push Raleway to the front of the font stack so the
 * brand body typeface actually wins, align legacy .btn-primary /
 * .btn-secondary to the TIA tokens so any modal or auth surface
 * inherits the right look without per-modal CSS.
 * ───────────────────────────────────────────────────────────────── */

/* Force light theme even if anything sets data-theme="dark".
 * Override the legacy CSS variables so any surface still using them
 * (modals, popups, etc.) renders against the new brand palette. */
html,
html[data-theme="light"],
html[data-theme="dark"] {
    --bg: var(--tia-white) !important;
    --surface: var(--tia-white) !important;
    --surface-2: var(--tia-light-blue) !important;
    --text: var(--tia-navy) !important;
    --text-muted: var(--fg-muted) !important;
    --text-faint: var(--fg-subtle) !important;
    --navy: var(--tia-navy) !important;
    --accent: var(--tia-red) !important;
    --accent-light: var(--tia-navy-50) !important;
    --border: var(--border-subtle) !important;
}

/* Body — Raleway-first, white background, navy text. The legacy
 * body rule's system-font stack wins specificity over tokens.css's
 * :where(html), so we override directly. */
body {
    font-family: var(--font-body) !important;
    font-weight: var(--fw-body-light) !important;
    color: var(--tia-navy) !important;
    background: var(--tia-white) !important;
}

/* Headings — Poppins, navy. tokens.css uses :where() so legacy
 * heading rules win; explicit override pulls the brand display
 * type onto every h1-h6 regardless of legacy class noise. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.01em !important;
    line-height: var(--lh-snug) !important;
}

/* Buttons — bring legacy .btn-primary / .btn-secondary in line with
 * the TIA tokens. Many modals and the welcome flow use these and
 * would otherwise stay cosmic. */
.btn-primary {
    background: var(--tia-navy) !important;
    color: var(--tia-white) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
    background-image: none !important;
}
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--tia-navy-800) !important; opacity: 1 !important; }
}
.btn-primary:disabled { background: var(--tia-grey-300) !important; opacity: 1 !important; }

.btn-secondary {
    background: var(--tia-white) !important;
    color: var(--tia-navy) !important;
    border: 1.5px solid var(--tia-navy) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
    .btn-secondary:hover { background: var(--tia-light-blue) !important; }
}

/* Welcome message banner — slim red eyebrow line above each screen */
.welcome-message {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--tia-navy) !important;
    margin-bottom: 12px !important;
    text-align: left !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Modals — generic overlay restyle. Many popup containers use
 * .modal-content or .popup-content; brand-align their surface. */
.modal-content,
.popup-content,
.modal-card,
.popup-card {
    background: var(--tia-white) !important;
    color: var(--tia-navy) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
/* Dark-on-dark modal backdrops — re-tone with navy-tinted scrim */
.modal-backdrop,
.popup-backdrop {
    background: rgba(0, 0, 30, 0.45) !important;
}

/* Cosmic gradient surfaces — flatten to clean white. Catches the
 * legacy hero gradients, login screen gradients, etc. */
.gradient-surface,
.hero-gradient,
.cosmic-bg {
    background: var(--tia-white) !important;
    background-image: none !important;
}

/* Selection highlight — match brand */
::selection {
    background: var(--tia-navy);
    color: var(--tia-white);
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 1.6 ITERATION — user-feedback fixes (visual diff round 2)
 * ───────────────────────────────────────────────────────────────── */

/* 1. TickerOne header — more prominent wordmark.
 *    Increase size 13px → 18px, tighten letter-spacing 0.16em → 0.06em. */
.md-header-brand {
    font-size: 18px !important;
    letter-spacing: 0.06em !important;
}

/* 2. Range call tiles — pill 999px → tile 10px corner radius, AND
 *    match the height/weight of the direction buttons so the two
 *    rows read as siblings (5 chips vs 2 chips, but same scale). */
.range-brackets > * {
    border-radius: 10px !important;
    padding: 18px 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    /* Drop mono — match direction tiles' display font for hierarchy */
    font-family: var(--font-display) !important;
}

/* 3. Locked-call + P/L cards — side-by-side and white eyebrow on the
 *    navy hero (was red, user wants white for hierarchy clarity). */
.awaiting-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
}
.awaiting-panel.range-panel,
#pnl-tracker {
    margin-bottom: 0 !important; /* gap handles vertical rhythm now */
}
.awaiting-panel.range-panel .ftw-label {
    color: var(--tia-white) !important;
}

/* 5. Legacy mobile leaderboard FAB — hide. The Ranks bottom-tab
 *    now serves this role, and the floating button was overlaying
 *    one of the bottom-bar tabs. */
.mobile-lb-toggle,
#mobile-lb-toggle {
    display: none !important;
}

/* 4. Sparkline markers — small RED dots at each data point regardless
 *    of trend. The previous trend-matched colour blended into the line;
 *    red is unambiguously visible against green or red trends both.
 *    Stroked with a thin white halo so they stand out cleanly even
 *    where the dot sits on the polyline path. */
.sparkline-dot {
    fill: var(--tia-red);
    stroke: var(--tia-white);
    stroke-width: 0.6;
}
.sparkline-dot.sparkline-up,
.sparkline-dot.sparkline-down { fill: var(--tia-red); }

/* ─────────────────────────────────────────────────────────────────
 * PHASE 2 — STATS + MORE TAB SCREENS
 * ─────────────────────────────────────────────────────────────────
 * Full-viewport overlays mounted at body level. Show/hide is
 * controlled by mdSelectTab() — when their tab is active, #app is
 * display:none and the relevant screen has hidden=false. Positioned
 * to clear the fixed header at top and fixed tabs at bottom.
 * ───────────────────────────────────────────────────────────────── */

.md-tab-screen {
    position: fixed;
    /* Clear the fixed .md-header (safe-area + 52px) */
    top: calc(env(safe-area-inset-top, 0) + 52px);
    /* v1.0.6 — Ad banner removed; back to clearing tabs only. */
    bottom: calc(env(safe-area-inset-bottom, 0) + 62px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--tia-white);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
}
.md-tab-screen[hidden] { display: none !important; }

/* ─────────── Settings rows (More tab) ─────────── */
.md-settings-section {
    padding: 14px 16px 6px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border-top: 1px solid var(--border-subtle);
    background: var(--tia-white);
}
.md-settings-section:first-child {
    border-top: none;
    padding-top: 4px;
}

.md-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-top: 1px solid var(--border-subtle);
    background: var(--tia-white);
    color: var(--tia-navy);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard);
}
/* v2.1.3 — iOS sticky-hover fix. Hover styles only apply to devices
 * that actually have a hover-capable pointer. On touch, the first
 * tap previously triggered hover state and absorbed the click — the
 * user had to tap twice to fire the onclick handler. */
@media (hover: hover) and (pointer: fine) {
    .md-settings-item:hover { background: var(--tia-navy-50); }
}
.md-settings-item:active { background: var(--tia-navy-100); }
.md-settings-item .lbl {
    flex: 1;
    color: inherit;
}
.md-settings-item .state {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-muted);
}
.md-settings-item .chev {
    color: var(--fg-subtle);
    font-size: 18px;
    line-height: 1;
}
.md-settings-item.danger {
    color: var(--tia-red);
    font-weight: 500;
}
.md-settings-item.danger .chev { color: var(--tia-red); }
@media (hover: hover) and (pointer: fine) {
    .md-settings-item.danger:hover { background: var(--tia-red-100); }
}

/* Stats grid spacing tweak — design uses tighter row gap than .md-section */
#md-screen-stats .md-stat-grid { margin-bottom: 16px; }

/* ─────────────────────────────────────────────────────────────────
 * PHASE 2.4 — MODAL POLISH (per-modal TIA brand alignment)
 * ─────────────────────────────────────────────────────────────────
 * Each modal restyled individually rather than via the P1.6 generic
 * .modal-content / .popup-content catch-all, so each one matches
 * the design language properly (Poppins headings, Raleway body,
 * subtle navy shadows, no cosmic glows).
 * ───────────────────────────────────────────────────────────────── */

/* ─────────── Welcome screen (first launch / signed-out) ─────────── */
.welcome-screen {
    background: var(--tia-white) !important;
    background-image: none !important;
    /* Sit above the new md-header/tabs so the welcome takes the
     * full viewport. body's padding-top from P1.3 pushes content
     * down; override here so welcome covers the header zone. */
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}
.welcome-inner {
    background: var(--tia-white) !important;
    text-align: center !important;
}
.welcome-logo {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    margin-bottom: var(--space-6) !important;
}
.welcome-title {
    font-family: var(--font-display) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--tia-navy) !important;
    margin: 0 0 8px !important;
}
.welcome-sub {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--fg-muted) !important;
    line-height: var(--lh-relaxed) !important;
    margin: 0 0 24px !important;
}
.welcome-auth-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}
.welcome-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    transition: all var(--dur-fast) var(--ease-standard) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
}
/* Primary brand sign-in — navy fill */
.welcome-btn-lw {
    background: var(--tia-navy) !important;
    color: var(--tia-white) !important;
    border: none !important;
}
@media (hover: hover) and (pointer: fine) {
    .welcome-btn-lw:hover { background: var(--tia-navy-800) !important; }
}
/* Apple, Google, Email — outlined secondaries */
.welcome-btn-apple,
.welcome-btn-google,
.welcome-btn-email {
    background: var(--tia-white) !important;
    color: var(--tia-navy) !important;
    border: 1.5px solid var(--border-default) !important;
}
@media (hover: hover) and (pointer: fine) {
    .welcome-btn-apple:hover,
    .welcome-btn-google:hover,
    .welcome-btn-email:hover { background: var(--tia-grey-50) !important; }
}
.welcome-auth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--fg-subtle) !important;
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin: 4px 0 !important;
}
.welcome-auth-divider::before,
.welcome-auth-divider::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--border-subtle) !important;
}
.welcome-skip {
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    margin-top: 18px !important;
    padding: 8px 16px !important;
}
@media (hover: hover) and (pointer: fine) {
    .welcome-skip:hover { color: var(--tia-navy) !important; }
}
.welcome-legal {
    font-size: 11px !important;
    color: var(--fg-subtle) !important;
    line-height: 1.5 !important;
    margin-top: 18px !important;
    max-width: 320px !important;
}
.welcome-legal a {
    color: var(--tia-navy) !important;
    text-decoration: underline !important;
}

/* ─────────── Email Auth modal (login / register flow) ─────────── */
.auth-modal-overlay {
    background: rgba(0, 0, 30, 0.45) !important;
}
.auth-modal {
    background: var(--tia-white) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
    background-image: none !important;
}
.auth-modal-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.auth-modal-header h3 {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}
.auth-modal-close {
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 0 4px !important;
    line-height: 1 !important;
}
.auth-modal-body {
    padding: 20px !important;
}
.auth-label {
    display: block !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
    margin-bottom: 6px !important;
    margin-top: 14px !important;
}
.auth-input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--tia-navy) !important;
    background: var(--tia-white) !important;
    transition: border-color var(--dur-fast) var(--ease-standard) !important;
    box-shadow: none !important;
}
.auth-input:focus {
    outline: none !important;
    border-color: var(--tia-navy) !important;
    box-shadow: var(--focus-ring) !important;
}
.auth-password-wrapper {
    position: relative !important;
}
.auth-password-toggle {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    cursor: pointer !important;
    padding: 4px !important;
}
.auth-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--fg-body) !important;
    margin-top: 12px !important;
}
.auth-error {
    background: var(--tia-red-100) !important;
    color: var(--tia-red-700) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    margin-top: 12px !important;
    border: 1px solid var(--tia-red) !important;
}
.referral-callout {
    background: var(--tia-navy-50) !important;
    border: 1px solid var(--tia-navy-200) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    color: var(--tia-navy) !important;
    font-size: 13px !important;
    margin: 12px 0 8px !important;
}

/* ─────────── Scoring + Prizes popups (shared classes) ─────────── */
.scoring-popup-overlay {
    background: rgba(0, 0, 30, 0.45) !important;
}
.scoring-popup {
    background: var(--tia-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    background-image: none !important;
    color: var(--tia-navy) !important;
}
.scoring-popup-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 16px 20px !important;
    background: var(--tia-white) !important;
    background-image: none !important;
}
.scoring-popup-header h3 {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}
.scoring-popup-close {
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-size: 24px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.scoring-popup-scroll {
    padding: 16px 20px 24px !important;
}
.scoring-section {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.scoring-section:last-child {
    border-bottom: none !important;
}
.scoring-heading {
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.01em !important;
}
.scoring-section p {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--fg-body) !important;
    line-height: var(--lh-relaxed) !important;
    margin: 6px 0 !important;
}
.scoring-section p strong {
    color: var(--tia-navy) !important;
    font-weight: 600 !important;
}
.scoring-note {
    font-size: 12px !important;
    color: var(--fg-muted) !important;
    background: var(--tia-grey-50) !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-sm) !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
}
.scoring-table {
    margin: 10px 0 !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
}
.scoring-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    color: var(--tia-navy) !important;
    background: var(--tia-white) !important;
}
.scoring-row:last-child {
    border-bottom: none !important;
}
.scoring-row-header {
    background: var(--tia-navy-50) !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
}
.scoring-row .val-green { color: var(--tia-positive) !important; font-weight: 600 !important; }
.scoring-row .val-red { color: var(--tia-negative) !important; font-weight: 600 !important; }

/* Prizes grid (1st / 2nd / 3rd slots) */
.prizes-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
}
.prizes-slot {
    background: var(--tia-white) !important;
    border: 1.5px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 8px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.prizes-slot.gold { border-color: var(--tia-warning) !important; background: var(--tia-warning-soft) !important; }
.prizes-slot.silver { border-color: var(--tia-grey-300) !important; }
.prizes-slot.bronze { border-color: #C8836F !important; }
.prizes-rank {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
}
.prizes-value {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
}
.prizes-brands {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
}
.prizes-brand {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--fg-muted) !important;
    background: var(--tia-grey-50) !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
}

/* ─────────── Wildcard Reveal + View popups (shared structure) ─────────── */
.wildcard-reveal-overlay {
    background: rgba(0, 0, 30, 0.55) !important;
}
/* v2.2.2 — Smoke feedback: the wildcard reveal shouldn't render
   AS a popup window wrapping the card. The card itself should be
   the visual — animate in (wc-flip-in), tap reveals (flip), then
   animate out (wc-flip-out) on accept/select. So .wildcard-reveal-popup
   becomes a transparent positioning shell; no background, no border,
   no shadow, no padding. The card-back / card-front carry their own
   gradient + border + shadow styling. */
.wildcard-reveal-popup {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.wildcard-card-front {
    text-align: center !important;
}
.wildcard-card-front-inner {
    padding: 14px 0 !important;
}
.wildcard-card-front-inner .wildcard-card-icon {
    font-size: 56px !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
}
.wildcard-card-name {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
}
.wildcard-card-desc {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--fg-body) !important;
    line-height: var(--lh-relaxed) !important;
    margin-bottom: 8px !important;
}
.wildcard-card-expires {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 16px !important;
}
.wildcard-view-reward {
    background: var(--tia-navy-50) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
    color: var(--tia-navy) !important;
    font-size: 13px !important;
}
.wildcard-view-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 2.4b — TIER 2/3 MODAL POLISH
 * ─────────────────────────────────────────────────────────────────
 * Less-frequent modals brought into the brand palette. Several
 * share class families (guest-login-* across 4 modals, loot-box-
 * overlay shared with bonus wheel) so per-family rules cover
 * multiple surfaces.
 * ───────────────────────────────────────────────────────────────── */

/* ─────────── Save Streak modal ─────────── */
.save-streak-overlay {
    background: rgba(0, 0, 30, 0.55) !important;
    background-image: none !important;
}
.save-streak-popup {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    text-align: center !important;
    padding: 28px 24px 22px !important;
}
.save-streak-emoji {
    font-size: 44px !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
}
.save-streak-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
}
.save-streak-sub {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--fg-muted) !important;
    line-height: var(--lh-relaxed) !important;
    margin-bottom: 18px !important;
}
.save-streak-auth-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 auto 14px !important;
}
.save-streak-skip {
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
}
.save-streak-error {
    background: var(--tia-red-100) !important;
    color: var(--tia-red-700) !important;
    border: 1px solid var(--tia-red) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    margin-top: 10px !important;
    text-align: left !important;
}

/* ─────────── guest-login-* family (covers Guest Login,
 *             Password Reset, Forgot Password, Delete Account) ─────────── */
.guest-login-overlay {
    background: rgba(0, 0, 30, 0.45) !important;
    background-image: none !important;
}
.guest-login-popup {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 22px 22px 20px !important;
    position: relative !important;
}
.guest-login-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
.guest-login-title {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
}
.guest-login-label {
    display: block !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
    margin-bottom: 6px !important;
    margin-top: 8px !important;
}
.guest-login-input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--tia-navy) !important;
    background: var(--tia-white) !important;
    transition: border-color var(--dur-fast) var(--ease-standard) !important;
    box-shadow: none !important;
}
.guest-login-input:focus {
    outline: none !important;
    border-color: var(--tia-navy) !important;
    box-shadow: var(--focus-ring) !important;
}
.guest-login-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
}
.guest-login-actions .btn { flex: 1 !important; }

/* ─────────── Loot Box overlay + Bonus Wheel (share loot-box-overlay) ─────────── */
.loot-box-overlay {
    background: rgba(0, 0, 30, 0.55) !important;
    background-image: none !important;
}
.loot-box {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 28px 22px 22px !important;
    text-align: center !important;
}
.loot-box-chest {
    font-size: 56px !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
}
.loot-box-reward {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--tia-navy) !important;
    margin-bottom: 14px !important;
}
.wheel-popup {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 22px 22px 22px !important;
    text-align: center !important;
    position: relative !important;
}
.wheel-close {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
.wheel-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
}

/* ─────────── Win Back overlay ─────────── */
.winback-overlay {
    background: rgba(0, 0, 30, 0.55) !important;
    background-image: none !important;
}
.winback-popup {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 24px 22px 22px !important;
}
.winback-title {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}

/* ─────────── Login reward overlay ─────────── */
.login-reward-overlay {
    background: rgba(0, 0, 30, 0.55) !important;
    background-image: none !important;
}
.login-reward-popup {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 24px 22px 22px !important;
    text-align: center !important;
}
.login-reward-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
}

/* ─────────── Prize Winner popup ─────────── */
.prize-winner-overlay {
    background: rgba(0, 0, 30, 0.65) !important;
    background-image: none !important;
}
.prize-winner-popup {
    background: linear-gradient(180deg, #001a47 0%, var(--tia-navy) 100%) !important;
    color: var(--tia-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: 32px 24px 24px !important;
    text-align: center !important;
}
.prize-winner-trophy {
    font-size: 56px !important;
    line-height: 1 !important;
    margin-bottom: 16px !important;
}
.prize-winner-title {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tia-white) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
}
.prize-winner-detail {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 12px !important;
}
.prize-winner-amount {
    font-family: var(--font-display) !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--tia-red) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
}
.prize-winner-deadline {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-bottom: 18px !important;
}
.prize-claim-btn {
    background: var(--tia-red) !important;
    color: var(--tia-white) !important;
    border: none !important;
}
@media (hover: hover) and (pointer: fine) {
    .prize-claim-btn:hover { background: var(--tia-red-600) !important; }
}
.prize-winner-note {
    margin-top: 12px !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ─────────── Achievement toast + Fun fact toast ─────────── */
.achievement-toast,
.fun-fact-toast {
    background: var(--tia-navy) !important;
    color: var(--tia-white) !important;
    background-image: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 12px 16px !important;
    border: none !important;
}
.achievement-toast-icon {
    font-size: 28px !important;
    line-height: 1 !important;
}
.achievement-toast-text strong {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--tia-white) !important;
}
.achievement-toast-text span {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ─────────── Insights overlay ─────────── */
.insights-overlay {
    background: rgba(0, 0, 30, 0.45) !important;
}
.insights-panel {
    background: var(--tia-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.insights-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: var(--tia-white) !important;
    background-image: none !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.insights-header-title {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.01em !important;
}
.insights-close-btn {
    background: none !important;
    border: none !important;
    color: var(--fg-muted) !important;
    font-size: 24px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.insights-content {
    padding: 16px 20px !important;
    color: var(--fg-body) !important;
}
.insights-loading {
    color: var(--fg-muted) !important;
    text-align: center !important;
    padding: 24px 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 2.5 — ANIMATIONS
 * ─────────────────────────────────────────────────────────────────
 * Restrained motion across the redesigned surfaces. Every animation
 * respects prefers-reduced-motion (turned off entirely for users who
 * request it). Timings come from the tokens (--dur-base / --ease-
 * standard) so they stay coherent with the rest of the design system.
 * ───────────────────────────────────────────────────────────────── */

@keyframes md-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes md-fade-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes md-sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes md-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes md-screen-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modal overlays — fade their backdrop in */
.scoring-popup-overlay:not(.hidden),
.wildcard-reveal-overlay:not(.hidden),
.auth-modal-overlay:not(.hidden),
.insights-overlay:not(.hidden),
.guest-login-overlay:not([style*="display:none"]):not([style*="display: none"]),
.save-streak-overlay:not([style*="display:none"]):not([style*="display: none"]),
.loot-box-overlay:not([style*="display:none"]):not([style*="display: none"]),
.winback-overlay:not([style*="display:none"]):not([style*="display: none"]),
.login-reward-overlay:not([style*="display:none"]):not([style*="display: none"]),
.prize-winner-overlay:not([style*="display:none"]):not([style*="display: none"]) {
    animation: md-fade-in var(--dur-base) var(--ease-standard);
}

/* Modal cards — scale + fade in on open */
.scoring-popup-overlay:not(.hidden) .scoring-popup,
.wildcard-reveal-overlay:not(.hidden) .wildcard-reveal-popup,
.auth-modal-overlay:not(.hidden) .auth-modal,
.insights-overlay:not(.hidden) .insights-panel,
.guest-login-overlay:not([style*="display:none"]):not([style*="display: none"]) .guest-login-popup,
.save-streak-overlay:not([style*="display:none"]):not([style*="display: none"]) .save-streak-popup,
.loot-box-overlay:not([style*="display:none"]):not([style*="display: none"]) .loot-box,
.loot-box-overlay:not([style*="display:none"]):not([style*="display: none"]) .wheel-popup,
.winback-overlay:not([style*="display:none"]):not([style*="display: none"]) .winback-popup,
.login-reward-overlay:not([style*="display:none"]):not([style*="display: none"]) .login-reward-popup,
.prize-winner-overlay:not([style*="display:none"]):not([style*="display: none"]) .prize-winner-popup {
    animation: md-scale-in var(--dur-slow) var(--ease-entrance);
}

/* Edge sheet — slide up from bottom (already in design tokens) */
.md-sheet-overlay {
    animation: md-fade-in var(--dur-base) var(--ease-standard);
}
.md-sheet-overlay .md-sheet {
    animation: md-sheet-slide-up var(--dur-slow) var(--ease-entrance);
}

/* Stats / More tab screens — fade + small slide on open */
.md-tab-screen:not([hidden]) {
    animation: md-screen-slide-in var(--dur-slow) var(--ease-entrance);
}

/* Result card breakdown — sequential reveal of each line so the
 * staged reveal animation from the legacy renderer (which I
 * flattened in P1.5) is restored as pure CSS, no JS needed.
 * Each .result-line fades in 80ms after the previous. */
.result-card .result-line {
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance) both;
}
.result-card .result-line:nth-child(1) { animation-delay: 40ms; }
.result-card .result-line:nth-child(2) { animation-delay: 120ms; }
.result-card .result-line:nth-child(3) { animation-delay: 200ms; }
.result-card .result-line:nth-child(4) { animation-delay: 280ms; }
.result-card .result-line:nth-child(5) { animation-delay: 360ms; }
.result-card .result-points {
    animation: md-fade-slide-up 480ms var(--ease-entrance) both;
    animation-delay: 440ms;
}
.result-card .result-streak {
    animation: md-fade-slide-up 480ms var(--ease-entrance) both;
    animation-delay: 520ms;
}

/* Confidence + direction + range — small bounce on the selected
 * one so the tap feels confirming. transform: scale already on
 * :active in P1.4; here we add a brief settle animation when
 * .selected is added (via animationiterationcount: 1). */
@keyframes md-tap-confirm {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.btn-conf.selected,
.btn-conf.active,
.btn-direction.selected,
.btn-direction.active,
.range-brackets > .selected,
.range-brackets > .active {
    animation: md-tap-confirm 240ms var(--ease-standard);
}

/* Tab switch — fade the bottom-tab active bar */
.md-tab.active::before {
    animation: md-fade-in var(--dur-base) var(--ease-standard);
}

/* Wildcard card — gentle reveal as the deck populates */
.wildcard-cards .wildcard-card {
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance) both;
}
.wildcard-cards .wildcard-card:nth-child(1) { animation-delay: 0ms; }
.wildcard-cards .wildcard-card:nth-child(2) { animation-delay: 60ms; }
.wildcard-cards .wildcard-card:nth-child(3) { animation-delay: 120ms; }
.wildcard-cards .wildcard-card:nth-child(4) { animation-delay: 180ms; }

/* Respect user preference — kill every redesign animation when the
 * OS-level reduced-motion flag is set. Don't fight the user. */
@media (prefers-reduced-motion: reduce) {
    .scoring-popup-overlay:not(.hidden),
    .wildcard-reveal-overlay:not(.hidden),
    .auth-modal-overlay:not(.hidden),
    .insights-overlay:not(.hidden),
    .md-sheet-overlay,
    .md-sheet-overlay .md-sheet,
    .md-tab-screen:not([hidden]),
    .scoring-popup-overlay:not(.hidden) .scoring-popup,
    .wildcard-reveal-overlay:not(.hidden) .wildcard-reveal-popup,
    .auth-modal-overlay:not(.hidden) .auth-modal,
    .insights-overlay:not(.hidden) .insights-panel,
    .result-card .result-line,
    .result-card .result-points,
    .result-card .result-streak,
    .btn-conf.selected, .btn-conf.active,
    .btn-direction.selected, .btn-direction.active,
    .range-brackets > .selected, .range-brackets > .active,
    .wildcard-cards .wildcard-card,
    .md-tab.active::before {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * PHASE 3.3 — UNIFIED 15px CORNER RADIUS
 * ─────────────────────────────────────────────────────────────────
 * Per user direction: every tile / panel / pop-up / card sits at a
 * consistent 15px radius. The exceptions (deliberate, signed off
 * in prior reviews) are:
 *   - Confidence chips at 6px (small tiles — sharp tile feel)
 *   - Range chips at 10px (mid-tile — moderate softness)
 *   - Pills at 999px (full pill)
 *   - Small buttons / inputs at 6px (.btn / .auth-input — input feel)
 *
 * Loaded LAST so it overrides earlier component-specific radii.
 * ───────────────────────────────────────────────────────────────── */

/* Predict screen — ticker hero, ticket card, direction tiles, edge
 * banner, payout summary, wildcard cards (back to the card aesthetic). */
.ticker-display,
.md-ticker,
.md-ticket,
.md-edge,
.md-summary,
.btn-direction,
.payout-potential,
.wildcard-card {
    border-radius: 15px !important;
}
/* v2.2.2 — Wildcard reveal popup no longer in the unified-radius
   list. It's a transparent positioning shell now; the visible
   radius lives on .wildcard-card-back / .wildcard-card-front. */

/* Awaiting state — locked-call hero card + P/L tracker side card */
.awaiting-panel.range-panel,
#pnl-tracker,
.md-await-card,
.second-chance-panel {
    border-radius: 15px !important;
}

/* Result state — navy gradient hero + breakdown card */
.result-card,
.md-result-hero,
.md-result-breakdown {
    border-radius: 15px !important;
}

/* Stats + More tab screens — stat cards + section containers */
.md-stat-card,
.md-section,
.md-section-card {
    border-radius: 15px !important;
}

/* Popups + modals — every surface that overlays the app */
.scoring-popup,
.auth-modal,
.guest-login-popup,
.save-streak-popup,
.loot-box,
.wheel-popup,
.winback-popup,
.login-reward-popup,
.prize-winner-popup,
.insights-panel,
.modal-content,
.popup-content,
.modal-card,
.popup-card {
    border-radius: 15px !important;
}

/* Bottom sheet — 15px top corners, square bottom (anchored to viewport) */
.md-sheet {
    border-radius: 15px 15px 0 0 !important;
}

/* Secondary action buttons that read as "card-sized" — Share / Use
 * Second Chance / Insights row buttons all get the same radius so
 * they sit cleanly alongside the cards. */
.btn-share,
.btn-insights,
#second-chance-edit-btn,
.share-call-bar .btn,
.md-secondary-btn {
    border-radius: 15px !important;
}

/* Override the b53c4d0 swipe-to-lock — currently full pill. The pill
 * feel is intentional for "swipe" affordance, but you asked for
 * consistency across all major surfaces. Keep it pill ONLY if you
 * decide later — leaving at pill for now feels right for the CTA. */
/* .md-swipe-lock { border-radius: 15px !important; } */

/* Note: Confidence chips (6px), range chips (10px), and pills
 * (999px) intentionally NOT overridden — see prior review rounds. */

/* ─────────────────────────────────────────────────────────────────
 * P3.4 TIER 1 — Numeric typography (mono numbers everywhere)
 * + Community split bar polish + Tier progress bar polish
 * ───────────────────────────────────────────────────────────────── */

/* Mono numbers — every numeric / data value reads as IBM Plex Mono
 * per the brand guide. Selectors target the most common containers
 * where numbers live so anything in them inherits cleanly. */
.md-game-num,
.md-ticker-price .price,
.md-ticker-price .delta,
.md-ticker-meta,
.price-info .price-value,
.live-price-row,
.pnl-value,
#close-countdown,
.next-game-timer .countdown,
.md-stat-card .delta,
.btn-conf .conf-payoff,
.btn-conf .conf-win,
.btn-conf .conf-loss,
.btn-conf .conf-sep,
.md-lb-rank,
.md-lb-score,
.streak-pill-text,
.points-pill-text,
.md-result-line .val,
.result-change {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
}

/* Community split bar — restyle the legacy markup that the
 * mirror function injects so it reads as a brand-spec split. */
.community-split-host {
    background: var(--tia-white) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: 14px 16px !important;
}
/* v1.0.10 — Achievement progress nudge on the awaiting screen.
 * Small "X more until Y" hint card. Sits below the community split. */
.md-achievement-nudge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.08), rgba(201, 162, 39, 0.02));
    border: 1px solid rgba(201, 162, 39, 0.30);
    border-radius: 12px;
}
.md-nudge-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}
.md-nudge-body { flex: 1; min-width: 0; }
.md-nudge-headline {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--tia-navy);
    letter-spacing: -0.01em;
}
.md-nudge-headline strong { color: #c9a227; }
.md-nudge-sub {
    font-size: 11px;
    color: var(--fg-muted);
    margin-top: 2px;
}

/* v2.0.2 — Wildcard waiting-room trade-in. Sits below the achievement
 * nudge on the awaiting call tab. */
.md-wildcard-tradein {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}
.md-tradein-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.md-tradein-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.md-tradein-sub {
    font-size: 10px;
    color: var(--fg-muted);
}
.md-tradein-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.md-tradein-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--tia-grey-50, #f7f7fa);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--tia-navy);
    text-align: left;
    transition: transform 160ms var(--ease-standard, ease),
                background 160ms var(--ease-standard, ease);
    -webkit-tap-highlight-color: transparent;
}
.md-tradein-row:active {
    transform: scale(0.98);
    background: var(--tia-navy);
    color: var(--tia-white);
}
.md-tradein-icon { font-size: 18px; line-height: 1; }
.md-tradein-name { flex: 1; font-weight: 600; }
.md-tradein-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #c9a227;
}
.md-tradein-row:active .md-tradein-cta { color: var(--tia-white); }

/* v2.0.2 — Pro Pick Spotlight. Featured pro card above the
 * scrolling rail with bio + blurb + deep-link. */
.md-propick-spotlight {
    margin: 10px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--tia-navy) 0%, #1a1a8e 100%);
    border-radius: 14px;
    color: var(--tia-white);
}
.md-spotlight-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.md-spotlight-eyebrow {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9a227;
}
.md-spotlight-acc {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.65);
}
.md-spotlight-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}
.md-spotlight-bio {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    margin-bottom: 10px;
}
.md-spotlight-call {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 12px;
    margin: 4px 0 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
}
.md-spotlight-call.up   { background: rgba(110, 231, 183, 0.22); }
.md-spotlight-call.down { background: rgba(252, 165, 165, 0.22); }
.md-spotlight-dir {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.md-spotlight-call.up   .md-spotlight-dir { color: #6ee7b7; }
.md-spotlight-call.down .md-spotlight-dir { color: #fca5a5; }
.md-spotlight-conf {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.06em;
}
.md-spotlight-blurb {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.92);
    margin: 8px 0;
    font-style: italic;
}
.md-spotlight-more {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c9a227;
    text-decoration: none;
}
.md-spotlight-more:hover { text-decoration: underline; }

/* v2.0.2 — Live win-probability bar inside the PnL tracker. */
.md-winprob {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-subtle);
}
.md-winprob-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.md-winprob-fill {
    height: 100%;
    width: 50%;
    border-radius: 999px;
    transition: width 280ms cubic-bezier(.22,.61,.36,1),
                background 280ms ease;
}
.md-winprob-fill.good    { background: #16a34a; }
.md-winprob-fill.neutral { background: #eab308; }
.md-winprob-fill.rough   { background: var(--tia-red, #e53e4c); }
.md-winprob-label {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
    text-align: center;
}

/* v2.0.2 — Mini-prediction (SPY companion call). */
.md-mini-call {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}
.md-mini-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.md-mini-eyebrow {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9a227;
}
.md-mini-stake {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-muted);
}
.md-mini-q {
    font-size: 13px;
    color: var(--fg-primary);
    margin-bottom: 10px;
}
.md-mini-q strong { color: var(--tia-navy); }
.md-mini-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.md-mini-btn {
    padding: 11px;
    border-radius: 10px;
    border: 1.5px solid var(--border-subtle);
    background: var(--tia-grey-50, #f7f7fa);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--tia-navy);
    cursor: pointer;
    transition: transform 160ms var(--ease-standard, ease),
                background 160ms var(--ease-standard, ease);
    -webkit-tap-highlight-color: transparent;
}
.md-mini-btn-up   { color: #16a34a; border-color: rgba(22,163,74,0.30); }
.md-mini-btn-down { color: var(--tia-red, #e53e4c); border-color: rgba(229,62,76,0.30); }
.md-mini-btn:active {
    transform: scale(0.97);
    background: var(--tia-navy);
    color: var(--tia-white);
    border-color: var(--tia-navy);
}
.md-mini-locked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.md-mini-pick {
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.md-mini-pick-up   { background: rgba(22,163,74,0.18); color: #16a34a; }
.md-mini-pick-down { background: rgba(229,62,76,0.18); color: var(--tia-red, #e53e4c); }
.md-mini-status {
    font-size: 11px;
    color: var(--fg-muted);
    font-style: italic;
}
.md-mini-result {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
}
.md-mini-result.win  { color: #16a34a; }
.md-mini-result.loss { color: var(--tia-red, #e53e4c); }
.md-mini-result.flat { color: var(--fg-muted); }
.community-split-host .md-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}
.community-split-host .md-section-title {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
}
.community-split-host .md-section-meta {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--fg-muted) !important;
}
/* The legacy renderCommunitySplit emits a structure with up/down
 * halves and percentages. Style any inner percentage spans + the
 * containing row. */
.awaiting-community-mirror {
    display: flex !important;
    height: 32px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tia-white) !important;
}

/* Tier progress bar — currently a generic navy bar. Add a track
 * shadow, brand-aligned fill colour, percentage label tick. The
 * legacy renderer outputs something like:
 *   <div class="tier-progress"><div class="tier-progress-fill"></div></div>
 * plus a label row. Targeting both. */
.tier-progress,
.md-stat-tier-bar-host > .tier-progress {
    height: 8px !important;
    background: var(--tia-navy-50) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 6px 0 !important;
    box-shadow: var(--shadow-inset-xs) !important;
}
.tier-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--tia-navy) 0%, var(--tia-red) 100%) !important;
    border-radius: 999px !important;
    transition: width var(--dur-slow) var(--ease-standard) !important;
}
.tier-progress-label,
.tier-progress-meta {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.02em !important;
}

/* ─────────────────────────────────────────────────────────────────
 * P3.5 TIER 2 — Eyebrows, shadows, tab press, welcome logo, skeletons
 * ───────────────────────────────────────────────────────────────── */

/* 6. Eyebrow class consistency. The .tia-eyebrow style is the brand-
 * spec micro-label (uppercase, tracked, brand-red). Force every
 * legacy eyebrow-like label across the app onto the same token so
 * the visual rhythm is identical regardless of which CSS file
 * defined the label.  */
/* Eyebrows — small labels above sections. Stay uppercase / tracked. */
.md-eyebrow,
.tia-eyebrow,
.md-dateline .md-eyebrow,
.awaiting-panel.range-panel .ftw-label,
.result-streak,
.countdown-section .label,
.next-game-timer .next-game-label,
.md-section-title,
.md-settings-section {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}
/* v1.0.6 — Subtitles + the welcome greeting are now Normal-case per
   user feedback. They were swept into the eyebrow rule above, which
   made the friendly "Good morning, Geoff. Make your call…" copy read
   as a shouted label rather than a personal sentence. Keep the display
   font + slight letter-spacing but allow normal capitalisation. */
.welcome-message,
.md-stub-sub {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* Most eyebrows are red; a few (settings sections, stub-sub, section
 * titles) are muted grey for visual hierarchy. The selectors above
 * give the font + tracking; these refine the colour. */
.md-eyebrow,
.tia-eyebrow,
.md-dateline .md-eyebrow,
.welcome-message,
.awaiting-panel.range-panel .ftw-label,
.countdown-section .label,
.result-streak {
    color: var(--tia-red) !important;
}
.next-game-timer .next-game-label,
.md-section-title,
.md-settings-section {
    color: var(--fg-muted) !important;
}

/* 7. Subtle navy-tinted shadows on every card surface. tokens.css
 * defines --shadow-sm/md/lg with navy rather than black; apply
 * consistently so cards lift off the white surface evenly. */
.ticker-display,
.md-ticker,
.md-ticket,
.md-section,
.md-stat-card,
.wildcard-card,
#pnl-tracker,
.payout-potential,
.md-edge,
.md-result-breakdown,
.awaiting-panel.range-panel,
.result-card,
.community-split-host {
    box-shadow: var(--shadow-sm) !important;
}

/* 8. Tap-pressed state on the bottom tabs. Native press feedback
 * for touch — scale slightly + dim, snap back. Pairs with the
 * existing 'click' haptic we already wired. */
.md-tab {
    transition: transform var(--dur-fast) var(--ease-standard),
                opacity var(--dur-fast) var(--ease-standard);
}
.md-tab:active {
    transform: scale(0.96);
    opacity: 0.85;
}

/* 9. Welcome screen logo polish — bigger logo with shadow + tighter
 * title spacing. Matches the design's first-launch hero. */
.welcome-logo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 22px !important;     /* slightly higher than 15px — app-icon convention */
    box-shadow: var(--shadow-lg) !important;
    margin: 0 auto 22px !important;
    display: block !important;
}
.welcome-inner {
    padding-top: env(safe-area-inset-top, 0) !important;
}
.welcome-title {
    font-size: 36px !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
}
.welcome-sub {
    max-width: 320px !important;
    margin: 0 auto 24px !important;
}

/* 10. Loading skeleton placeholders. Reusable .md-skeleton class +
 * variants for line / circle / card shape. Pulses via a slow
 * shimmer; consumers replace the skeleton element with real
 * content when the API responds. */
@keyframes md-skeleton-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.md-skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        var(--tia-grey-100) 0px,
        var(--tia-grey-50) 80px,
        var(--tia-grey-100) 160px
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    background-position: -200px 0;
    border-radius: 8px;
    animation: md-skeleton-shimmer 1.4s linear infinite;
}
.md-skeleton-line {
    height: 14px;
    margin: 6px 0;
}
.md-skeleton-line.short  { width: 40%; }
.md-skeleton-line.medium { width: 60%; }
.md-skeleton-line.long   { width: 88%; }
.md-skeleton-card {
    height: 96px;
    margin: 6px 0;
    border-radius: 15px;
}
.md-skeleton-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.md-skeleton-row .md-skeleton {
    height: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .md-skeleton { animation: none !important; background: var(--tia-grey-100) !important; }
}

/* ─────────────────────────────────────────────────────────────────
 * P3.6 TIER 3 — Tour, trash-talk, invite hub, tab transitions
 * ─────────────────────────────────────────────────────────────────
 * Sparkline hover labels (#15) deferred — the 100×30 stretched
 * viewBox makes precise tap targets on individual data points
 * unreliable. Better solved by upgrading the sparkline to a wider
 * native-pixel SVG in a future pass.
 * ───────────────────────────────────────────────────────────────── */

/* 11. ONBOARDING TOUR — brand-aligned overlay + tooltip */
.tour-overlay {
    background: rgba(0, 0, 30, 0.55) !important;
}
.tour-tooltip {
    background: var(--tia-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 15px !important;
    box-shadow: var(--shadow-lg) !important;
    background-image: none !important;
    padding: 16px 18px 14px !important;
    color: var(--tia-navy) !important;
}
.tour-tooltip-header {
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--tia-red) !important;
    margin-bottom: 8px !important;
}
.tour-tooltip-title {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--tia-navy) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 6px !important;
}
.tour-tooltip-content {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--fg-body) !important;
    line-height: var(--lh-relaxed) !important;
    margin: 0 0 12px !important;
}
.tour-tooltip-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.tour-tooltip-actions .btn,
.tour-tooltip-actions button {
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
}

/* 12. TRASH-TALK SECTION — brand-align the inbox + send composer */
.trash-talk-section {
    background: var(--tia-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 15px !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 14px !important;
    margin: 12px 0 !important;
}
.trash-talk-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}
.trash-talk-title {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--fg-muted) !important;
}
.trash-talk-badge {
    background: var(--tia-red) !important;
    color: var(--tia-white) !important;
    border-radius: 999px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
}
.trash-talk-inbox {
    background: var(--tia-grey-50) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    min-height: 60px !important;
}

/* 13. REFERRAL / INVITE HUB — brand-align the modal body */
.referral-hub-modal {
    /* Inherits .auth-modal styling — extra polish: bigger code display
     * + brand accent. */
}
.referral-code-value {
    font-family: var(--font-mono) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: var(--tia-navy) !important;
    background: var(--tia-navy-50) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 12px 0 !important;
    text-align: center !important;
}

/* 14. TAB TRANSITIONS — fade-out on screen leave */
@keyframes md-screen-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
.md-tab-screen.md-leaving {
    animation: md-screen-slide-out var(--dur-base) var(--ease-exit);
}
@media (prefers-reduced-motion: reduce) {
    .md-tab-screen.md-leaving { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
 * P4.1 SPRINT 1 — Tier badge, achievement rail, regret card
 * ───────────────────────────────────────────────────────────────── */

/* Tier badge — small pill next to points in header. Uses a
 * CSS variable for the tier-specific accent colour so JS can set
 * it via .style.setProperty('--tier-accent', '#…'). */
.md-tier-badge {
    --tier-accent: var(--tia-navy);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1.5px solid var(--tier-accent);
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--tier-accent);
    line-height: 1;
}
.md-tier-badge .icon {
    font-size: 12px;
    line-height: 1;
}
.md-tier-badge .name {
    /* Truncate at small sizes so the badge never breaks the header */
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* On Untouchable a subtle glow draws the eye — earned status */
.md-tier-badge[data-tier="untouchable"] {
    background: var(--tia-navy);
    color: var(--tia-white);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.10);
}
.md-tier-badge[data-tier="untouchable"] .icon { filter: none; }

/* ─────────── Achievement rail (Today screen) ─────────── */
.md-achievement-rail {
    margin: 12px 0 14px;
}
.md-achievement-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.md-achievement-rail-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.md-achievement-rail-progress {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}
.md-achievement-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 6px;
    scrollbar-width: none;
}
.md-achievement-scroll::-webkit-scrollbar { display: none; }

.md-achievement-card {
    flex: 0 0 96px;
    height: 110px;
    border-radius: 12px;
    border: 1.5px solid var(--border-subtle);
    background: var(--tia-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease-standard);
}
.md-achievement-card:active { transform: scale(0.97); }
.md-achievement-card .icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 6px;
}
.md-achievement-card .name {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--tia-navy);
    line-height: 1.2;
}
.md-achievement-card.locked {
    background: var(--tia-grey-50);
    border-color: var(--tia-grey-200);
}
.md-achievement-card.locked .icon { filter: grayscale(1); opacity: 0.4; }
.md-achievement-card.locked .name { color: var(--fg-subtle); }

/* Icons-only variant — v1.0.4 user feedback wanted the keyword
   labels ("gem", "diamond", "chart") gone. The card shrinks to
   a chip and the icon scales up so the rail reads at a glance. */
.md-achievement-card.icons-only {
    flex: 0 0 64px;
    height: 64px;
    padding: 0;
    border-radius: 14px;
}
.md-achievement-card.icons-only .icon {
    font-size: 32px;
    margin-bottom: 0;
}
.md-achievement-card.icons-only .name { display: none; }

/* v1.0.6 — Inline ⚔ Challenge button on Friends leaderboard rows */
.md-ranks-challenge {
    margin-left: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--tia-red);
    color: var(--tia-white);
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 4px rgba(229, 62, 76, 0.25);
    transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}
.md-ranks-challenge:active { transform: scale(0.9); }

/* ─────────── v1.0.5 — Ranks "Compete with friends" section ─────────── */
.md-compete-section {
    /* v1.0.6 — margin-bottom added so the segmented Monthly/All-Time/
       Friends/Cohort pills below get visible breathing room. The
       compete panel previously butted right up against them. */
    margin: 16px 0 18px;
    padding: 14px 14px 8px;
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 15px;
}
.md-compete-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 8px;
}
.md-compete-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 4px 0;
}
.md-compete-row + .md-compete-row { border-top: 1px solid var(--border-subtle); }
.md-compete-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}
.md-compete-icon {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 24px;
    text-align: center;
}
.md-compete-text { flex: 1 1 auto; min-width: 0; }
.md-compete-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-compete-meta {
    font-size: 11px;
    color: var(--fg-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-compete-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--tia-grey-100, #e7e7ed);
    color: var(--tia-navy);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.md-compete-count.has-pending {
    background: var(--tia-red);
    color: var(--tia-white);
}
.md-compete-chev {
    color: var(--fg-muted);
    font-size: 18px;
    flex: 0 0 auto;
    padding: 0 4px;
}
.md-compete-info {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    align-self: center;
    border: 1px solid var(--border-subtle);
    background: var(--tia-grey-50);
    border-radius: 50%;
    font-family: var(--font-display, 'Poppins', serif);
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    color: var(--fg-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.md-compete-info:active { background: var(--tia-grey-100, #e7e7ed); }

/* ─────────── v1.0.5 — Generic info popup body content ─────────── */
.md-info-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0 14px;
}
.md-info-hero-icon {
    font-size: 36px;
    line-height: 1;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tia-grey-50);
}
.md-info-hero-icon.locked { filter: grayscale(1); opacity: 0.45; }
.md-info-hero-text { flex: 1 1 auto; min-width: 0; }
.md-info-hero-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--tia-navy);
    margin-bottom: 4px;
}
.md-info-status {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 6px;
}
.md-info-status.unlocked { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.md-info-status.locked { background: var(--tia-grey-100, #e7e7ed); color: var(--fg-muted); }
.md-info-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--tia-navy);
    margin: 0 0 12px;
}
.md-info-meta {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}
.md-info-list {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tia-navy);
}
.md-info-list li { margin-bottom: 6px; }
.md-info-list strong { color: var(--tia-navy); font-weight: 700; }

/* ─────────── Sprint 5b (v1.0.5) — Private Leagues ─────────── */
.md-leagues-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 6px 0 14px;
    padding: 12px 14px;
    background: var(--tia-white);
    border: 1.5px solid var(--tia-navy);
    border-radius: 15px;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.md-leagues-entry:active { transform: scale(0.98); }
.md-leagues-entry-icon { font-size: 20px; line-height: 1; }
.md-leagues-entry-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tia-navy);
    text-transform: uppercase;
    flex: 1 1 auto;
    text-align: left;
}
.md-leagues-entry-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--tia-navy);
    color: var(--tia-white);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.md-leagues-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 50, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: md-fade-in var(--dur-fast, 0.12s) ease;
}
.md-leagues-sheet-overlay.hidden { display: none; }
.md-leagues-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 84vh;
    background: var(--tia-white);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -16px 40px rgba(0, 0, 50, 0.2);
    display: flex;
    flex-direction: column;
    animation: md-sheet-up var(--dur-slow, 0.32s) var(--ease-out, ease);
}
.md-leagues-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.md-leagues-sheet-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-leagues-sheet-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: var(--fg-muted);
    cursor: pointer;
}
.md-leagues-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.md-leagues-action {
    flex: 1 1 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.md-leagues-action.create { background: var(--tia-navy); color: var(--tia-white); }
.md-leagues-action.join { background: var(--tia-grey-50); color: var(--tia-navy); border: 1px solid var(--border-subtle); }
.md-leagues-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.md-league-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.md-league-row:last-child { border-bottom: 0; }
.md-league-row-main { flex: 1 1 auto; min-width: 0; }
.md-league-row-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-league-row-meta {
    font-size: 11px;
    color: var(--fg-muted);
    margin-top: 2px;
}
.md-league-row-chev {
    color: var(--fg-muted);
    font-size: 18px;
}
.md-league-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.md-league-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.md-league-input {
    padding: 10px 12px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 14px;
    background: var(--tia-white);
    color: var(--tia-navy);
}
.md-league-input:focus { outline: none; border-color: var(--tia-navy); }
.md-league-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.md-league-btn {
    flex: 1 1 0;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.md-league-btn.primary { background: var(--tia-navy); color: var(--tia-white); }
.md-league-btn.cancel { background: var(--tia-grey-50); color: var(--fg-muted); }
.md-league-btn.back {
    flex: 0 0 auto;
    background: transparent;
    color: var(--fg-muted);
    padding: 6px 0;
}
.md-league-detail-head {
    margin-bottom: 12px;
}
/* Legacy inline code line — kept for compatibility but the new
   .md-league-invite-box block below is the active surface. */
.md-league-detail-code {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.md-league-detail-code .code {
    color: var(--tia-navy);
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.12em;
}

/* v1.0.6 — League invite box: big tappable code chip + share row. */
.md-league-invite-box {
    margin-top: 10px;
    padding: 14px;
    background: var(--tia-grey-50);
    border: 1px dashed var(--border-subtle);
    border-radius: 12px;
}
.md-league-invite-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 8px;
    text-align: center;
}
.md-league-invite-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 14px 12px;
    border: 1.5px dashed var(--tia-navy);
    border-radius: 12px;
    background: var(--tia-white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}
.md-league-invite-code:active { transform: scale(0.98); background: var(--tia-grey-50); }
.md-league-invite-code .code-text {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--tia-navy);
    line-height: 1.1;
}
.md-league-invite-code .copy-hint {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.md-league-share-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.md-league-share-btn {
    flex: 1 1 0;
    padding: 11px 10px;
    border: 0;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.md-league-share-btn .ico { font-size: 14px; line-height: 1; }
.md-league-share-btn.primary {
    background: var(--tia-navy);
    color: var(--tia-white);
}
.md-league-share-btn.secondary {
    background: var(--tia-white);
    color: var(--tia-navy);
    border: 1px solid var(--border-subtle);
}
.md-league-share-btn:active { transform: scale(0.98); }
.md-league-detail-desc {
    font-size: 12px;
    color: var(--fg-muted);
    margin: 4px 0 8px;
}

/* ─────────── Sprint 5c (v1.0.5) — Deeper stats ─────────── */
.md-deep-stats { display: block; }
.md-deep-section {
    padding: 14px;
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 15px;
    margin-bottom: 12px;
}
.md-deep-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tia-navy);
    margin-bottom: 12px;
}
.md-deep-trend {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 110px;
    padding-bottom: 4px;
}
.md-trend-bar-wrap {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.md-trend-bar {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, var(--tia-navy) 0%, #1a1a8e 100%);
    border-radius: 3px;
}
.md-trend-bar-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9px;
    color: var(--fg-muted);
}
.md-deep-hours {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.md-hour-cell {
    display: grid;
    grid-template-columns: 36px 1fr 46px;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-family: var(--font-display);
    font-size: 11px;
}
.md-hour-cell .hour {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--fg-muted);
}
.md-hour-cell .bar {
    height: 8px;
    border-radius: 4px;
    background: var(--tia-navy);
}
.md-hour-cell.heat-hot .bar { background: #16a34a; }
.md-hour-cell.heat-warm .bar { background: #84cc16; }
.md-hour-cell.heat-neutral .bar { background: #eab308; }
.md-hour-cell.heat-cool .bar { background: #f97316; }
.md-hour-cell.heat-none .bar { background: var(--border-subtle); }
.md-hour-cell .rate {
    text-align: right;
    color: var(--tia-navy);
    font-weight: 700;
}
.md-deep-bias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.md-bias-card {
    padding: 14px 12px;
    border-radius: 12px;
    text-align: center;
}
.md-bias-card.up { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); }
.md-bias-card.down { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); }
.md-bias-card .dir {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
}
.md-bias-card.up .dir { color: #16a34a; }
.md-bias-card.down .dir { color: var(--tia-red); }
.md-bias-card .games {
    font-size: 11px;
    color: var(--fg-muted);
    margin-top: 2px;
}
.md-bias-card .rate {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 14px;
    font-weight: 700;
    color: var(--tia-navy);
    margin-top: 4px;
}

/* ─────────── v1.0.6 — Advanced Stats analyses ─────────── */
.md-deep-sub {
    font-size: 12px;
    color: var(--fg-muted);
    margin-top: -8px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.md-deep-note {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--tia-grey-50);
    border-radius: 8px;
    font-size: 12px;
    color: var(--tia-navy);
    line-height: 1.45;
}

/* B1 — Calibration */
.md-calibration { display: flex; flex-direction: column; gap: 12px; }
.md-calib-row { display: flex; flex-direction: column; gap: 4px; }
.md-calib-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-display);
    font-size: 13px;
}
.md-calib-head .lbl { font-weight: 700; color: var(--tia-navy); }
.md-calib-head .games { font-size: 10px; color: var(--fg-muted); }
.md-calib-head .rate { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--tia-navy); }
.md-calib-bar {
    position: relative;
    height: 10px;
    background: var(--tia-grey-50);
    border-radius: 5px;
    overflow: hidden;
}
.md-calib-fill { height: 100%; background: var(--tia-navy); transition: width 300ms ease; }
.md-calib-row.v-sharp .md-calib-fill { background: #16a34a; }
.md-calib-row.v-edge .md-calib-fill { background: #84cc16; }
.md-calib-row.v-flat .md-calib-fill { background: #eab308; }
.md-calib-row.v-underwater .md-calib-fill { background: var(--tia-red); }
.md-calib-be {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--tia-navy);
    opacity: 0.5;
}
.md-calib-note { font-size: 11px; color: var(--fg-muted); line-height: 1.4; }

/* B2/B3/B4 — Behavioural */
.md-beh-list { display: flex; flex-direction: column; gap: 12px; }
.md-beh-row { padding: 10px 12px; border-radius: 10px; background: var(--tia-grey-50); border-left: 3px solid var(--border-subtle); }
.md-beh-row.warn { background: rgba(229, 62, 76, 0.06); border-left-color: var(--tia-red); }
.md-beh-head { display: flex; justify-content: space-between; align-items: baseline; }
.md-beh-head .lbl { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--tia-navy); letter-spacing: 0.04em; text-transform: uppercase; }
.md-beh-head .val { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700; color: var(--tia-navy); }
.md-beh-row.warn .val { color: var(--tia-red); }
.md-beh-meta { font-size: 12px; color: var(--tia-navy); margin: 4px 0 4px; line-height: 1.4; }
.md-beh-note { font-size: 11px; color: var(--fg-muted); }

/* C2 — Pro Picks alignment */
.md-pro-align { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.md-pro-cell { padding: 12px; border-radius: 12px; text-align: center; }
.md-pro-cell.agreed { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); }
.md-pro-cell.faded { background: rgba(229, 62, 76, 0.08); border: 1px solid rgba(229, 62, 76, 0.22); }
.md-pro-cell .lbl { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.md-pro-cell .big { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--tia-navy); margin: 4px 0; }
.md-pro-cell .meta { font-size: 11px; color: var(--fg-muted); }

/* S4 — Win/loss asymmetry */
.md-asym-bar {
    display: flex;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.md-asym-win, .md-asym-loss {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono, monospace);
    font-size: 13px; font-weight: 700;
    color: var(--tia-white);
    transition: width 300ms ease;
    min-width: 24px;
}
.md-asym-win { background: #16a34a; }
.md-asym-loss { background: var(--tia-red); }
.md-asym-meta {
    margin-top: 8px;
    font-size: 11px;
    color: var(--fg-muted);
    text-align: center;
}

/* G1 — Range adoption */
.md-range-adopt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.md-range-cell {
    padding: 12px;
    border-radius: 12px;
    background: var(--tia-grey-50);
    text-align: center;
}
.md-range-cell .lbl { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.md-range-cell .big { font-family: var(--font-mono, monospace); font-size: 24px; font-weight: 700; color: var(--tia-navy); margin: 4px 0; }
.md-range-cell .meta { font-size: 11px; color: var(--fg-muted); }

/* S6 — Skill vs luck */
.md-svl-bar {
    position: relative;
    height: 24px;
    background: var(--tia-grey-50);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 4px;
}
.md-svl-ci {
    position: absolute; top: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,0,100,0.18), rgba(0,0,100,0.32), rgba(0,0,100,0.18));
}
.md-svl-mean {
    position: absolute; top: -2px; bottom: -2px;
    width: 3px;
    background: var(--tia-navy);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
    transform: translateX(-1.5px);
}
.md-svl-ticks {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--fg-muted);
}

/* S8 — Strength matrix */
.md-strength-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 4px;
}
.md-strength-cell {
    padding: 10px 6px;
    border-radius: 8px;
    text-align: center;
    background: var(--tia-grey-50);
}
.md-strength-cell.head {
    background: transparent;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    display: flex; align-items: center; justify-content: center;
}
.md-strength-cell .rate {
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-strength-cell .games {
    font-size: 10px;
    color: var(--fg-muted);
    margin-top: 2px;
}
.md-strength-cell.heat-hot { background: rgba(22, 163, 74, 0.22); }
.md-strength-cell.heat-warm { background: rgba(132, 204, 22, 0.22); }
.md-strength-cell.heat-neutral { background: rgba(234, 179, 8, 0.22); }
.md-strength-cell.heat-cool { background: rgba(249, 115, 22, 0.22); }
.md-strength-cell.heat-cold { background: rgba(229, 62, 76, 0.22); }
.md-strength-cell.heat-none { background: var(--tia-grey-100, #e7e7ed); }

/* v1.0.7 — Strongest-cell highlight + sparseness coaching */
.md-strength-edge {
    font-size: 12px;
    color: var(--fg-muted);
    margin: 6px 0 10px;
    text-align: center;
}
.md-strength-edge strong { color: var(--tia-navy); }
.md-strength-cell.is-strongest {
    outline: 2px solid #c9a227; /* gold */
    outline-offset: -2px;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.18) inset;
    position: relative;
}
.md-strength-cell.is-strongest::after {
    content: '★';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    color: #c9a227;
    line-height: 1;
}
.md-strength-cell.is-needs-more .rate {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--fg-muted) !important;
}
.md-strength-cell.is-needs-more .games {
    font-size: 9px !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.02em;
}

/* v1.0.7 — Confidence calibration window toggle */
.md-calib-toggle-row {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--tia-grey-100, #eef0f4);
    margin: 4px 0 10px;
}
.md-calib-toggle {
    padding: 6px 12px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background 160ms var(--ease-standard, ease), color 160ms var(--ease-standard, ease);
    -webkit-tap-highlight-color: transparent;
}
.md-calib-toggle.is-active {
    background: var(--tia-navy);
    color: var(--tia-white);
}

/* G2 — Multiplier capture */
.md-mult-bar {
    display: flex;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.md-mult-bar .seg {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono, monospace);
    font-size: 11px; font-weight: 700;
    color: var(--tia-white);
    transition: width 300ms ease;
    overflow: hidden;
    white-space: nowrap;
}
.md-mult-bar .seg.base     { background: var(--tia-navy); }
.md-mult-bar .seg.bonus    { background: #6366f1; }
.md-mult-bar .seg.streak   { background: #f97316; }
.md-mult-bar .seg.timing   { background: #14b8a6; }
.md-mult-bar .seg.golden   { background: #facc15; color: var(--tia-navy); }
.md-mult-bar .seg.earnings { background: #ec4899; }
.md-mult-bar .seg.mult     { background: #16a34a; }
.md-mult-bar .seg.don      { background: #eab308; color: var(--tia-navy); }
.md-mult-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--fg-muted);
}
.md-mult-legend span { display: inline-flex; align-items: center; gap: 6px; }
.md-mult-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.md-mult-legend .dot.base     { background: var(--tia-navy); }
.md-mult-legend .dot.bonus    { background: #6366f1; }
.md-mult-legend .dot.streak   { background: #f97316; }
.md-mult-legend .dot.timing   { background: #14b8a6; }
.md-mult-legend .dot.golden   { background: #facc15; }
.md-mult-legend .dot.earnings { background: #ec4899; }
.md-mult-legend .dot.mult     { background: #16a34a; }
.md-mult-legend .dot.don      { background: #eab308; }

/* ─────────── Sprint 4a (v1.0.5) — Avatar cosmetics ─────────── */
.md-avatar-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 50, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: md-fade-in var(--dur-fast, 0.12s) ease;
}
.md-avatar-sheet-overlay.hidden { display: none; }
.md-avatar-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    background: var(--tia-white);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -16px 40px rgba(0, 0, 50, 0.2);
    display: flex;
    flex-direction: column;
    animation: md-sheet-up var(--dur-slow, 0.32s) var(--ease-out, ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.md-avatar-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.md-avatar-sheet-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-avatar-sheet-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: var(--fg-muted);
    cursor: pointer;
}
.md-avatar-sheet-sub {
    font-size: 12px;
    color: var(--fg-muted);
    margin: 4px 0 14px;
    line-height: 1.4;
}
.md-avatar-group-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 6px 0 6px 2px;
}
.md-avatar-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.md-avatar-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--tia-white);
    cursor: pointer;
    min-height: 96px;
    text-align: center;
    transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}
.md-avatar-tile:active { transform: scale(0.96); }
.md-avatar-tile .icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.md-avatar-tile .name {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--tia-navy);
    line-height: 1.2;
}
.md-avatar-tile .hint {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-top: 4px;
}
.md-avatar-tile.equipped {
    border-color: var(--tia-navy);
    background: var(--tia-grey-50);
    box-shadow: 0 0 0 2px rgba(0, 0, 100, 0.1);
}
.md-avatar-tile.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.md-avatar-tile.locked .icon { filter: grayscale(1); }

/* ─────────── Sprint 4b (v1.0.5) — Tournaments ─────────── */
.md-tournaments-rail {
    margin: 0 0 14px;
    padding: 14px 0 12px;
    border-radius: 15px;
    background: linear-gradient(135deg, #b91c1c 0%, var(--tia-red, #e53e4c) 100%);
    color: var(--tia-white);
    box-shadow: var(--shadow-sm);
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance);
    overflow: hidden;
}
.md-tournaments-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 16px 10px;
}
.md-tournaments-rail-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.md-tournaments-rail-meta {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.md-tournaments-list {
    display: flex;
    gap: 10px;
    padding: 0 14px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.md-tournaments-list::-webkit-scrollbar { display: none; }
.md-tournament-card {
    flex: 0 0 240px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.md-tournament-card:active { transform: scale(0.98); }
.md-tournament-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.md-tournament-card-desc {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
    max-height: 2.7em;
    overflow: hidden;
}
.md-tournament-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.md-tournament-card-foot .days { color: var(--tia-white); }
.md-tournament-card-foot .reward { color: rgba(255, 255, 255, 0.78); }

.md-tournament-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 50, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: md-fade-in var(--dur-fast, 0.12s) ease;
}
.md-tournament-sheet-overlay.hidden { display: none; }
.md-tournament-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 84vh;
    background: var(--tia-white);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -16px 40px rgba(0, 0, 50, 0.2);
    display: flex;
    flex-direction: column;
    animation: md-sheet-up var(--dur-slow, 0.32s) var(--ease-out, ease);
}
.md-tournament-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.md-tournament-sheet-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-tournament-sheet-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: var(--fg-muted);
    cursor: pointer;
}
.md-tournament-sheet-meta {
    font-size: 12px;
    color: var(--fg-muted);
    margin: 4px 0 14px;
    line-height: 1.4;
}
.md-tournament-sheet-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.md-tournament-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display);
}
.md-tournament-row:last-child { border-bottom: 0; }
.md-tournament-row .rank {
    flex: 0 0 36px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-muted);
}
.md-tournament-row .name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--tia-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-tournament-row .pts {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-tournament-row.you {
    background: var(--tia-grey-50);
    border-radius: 8px;
    border-bottom: 0;
    padding: 10px 8px;
}
.md-tournament-row.you .name { color: var(--tia-red); }
.md-tournament-row.your-rank-divider {
    justify-content: center;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border-bottom: 0;
}

/* ─────────── Sprint 3b (v1.0.5) — Friend Battles ─────────── */
.md-battles-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 6px 0 14px;
    padding: 12px 14px;
    background: var(--tia-white);
    border: 1.5px solid var(--tia-red);
    border-radius: 15px;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}
.md-battles-entry:active { transform: scale(0.98); }
.md-battles-entry.has-pending {
    background: var(--tia-red-50, #fff5f5);
    box-shadow: 0 0 0 3px rgba(229, 62, 76, 0.08);
}
.md-battles-entry-icon {
    font-size: 20px;
    line-height: 1;
}
.md-battles-entry-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tia-navy);
    text-transform: uppercase;
    flex: 1 1 auto;
    text-align: left;
}
.md-battles-entry-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--tia-red);
    color: var(--tia-white);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.md-battles-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 50, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: md-fade-in var(--dur-fast, 0.12s) ease;
}
.md-battles-sheet-overlay.hidden { display: none; }
.md-battles-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    background: var(--tia-white);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -16px 40px rgba(0, 0, 50, 0.2);
    display: flex;
    flex-direction: column;
    animation: md-sheet-up var(--dur-slow, 0.32s) var(--ease-out, ease);
}
@keyframes md-sheet-up { from { transform: translateY(20%); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }

.md-battles-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.md-battles-sheet-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--tia-navy);
}
.md-battles-sheet-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: var(--fg-muted);
    cursor: pointer;
}
.md-battles-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--tia-grey-50);
    border-radius: 12px;
}
.md-battles-tab {
    flex: 1 1 0;
    padding: 8px 6px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    cursor: pointer;
}
.md-battles-tab.active {
    background: var(--tia-white);
    color: var(--tia-navy);
    box-shadow: var(--shadow-xs);
}
.md-battles-tab-count {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--tia-red);
    color: var(--tia-white);
    font-size: 10px;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.md-battles-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.md-battles-loading, .md-battles-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--fg-muted);
    font-size: 13px;
}
.md-battle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.md-battle-row:last-child { border-bottom: 0; }
.md-battle-row-main { flex: 1 1 auto; min-width: 0; }
.md-battle-row-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--tia-navy);
    margin-bottom: 2px;
}
.md-battle-row-meta {
    font-size: 11px;
    color: var(--fg-muted);
}
.md-battle-row-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.md-battle-btn {
    border: 0;
    border-radius: 10px;
    padding: 7px 12px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.md-battle-btn.accept {
    background: var(--tia-navy);
    color: var(--tia-white);
}
.md-battle-btn.decline {
    background: var(--tia-grey-50);
    color: var(--fg-muted);
}
.md-battle-row-status {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--tia-grey-50);
}
.md-battle-row-status.win { color: var(--tia-white); background: var(--green, #2BAA67); }
.md-battle-row-status.loss { color: var(--tia-white); background: var(--tia-red); }
.md-battle-row-status.tie { color: var(--tia-navy); background: var(--tia-grey-100); }

/* ─────────── Sprint 3a (v1.0.5) — Pro Picks rail ─────────── */
.md-propicks-rail {
    margin: 0 0 14px;
    padding: 14px 0 12px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--tia-navy) 0%, #1a1a8e 100%);
    color: var(--tia-white);
    box-shadow: var(--shadow-sm);
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance);
    overflow: hidden;
}
.md-propicks-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 16px 10px;
}
.md-propicks-rail-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tia-white);
}
.md-propicks-rail-meta {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.md-propicks-scroll {
    display: flex;
    gap: 10px;
    padding: 0 14px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.md-propicks-scroll::-webkit-scrollbar { display: none; }

.md-propick {
    flex: 0 0 156px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    backdrop-filter: blur(8px);
}
.md-propick-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.md-propick-name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tia-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.md-propick-acc {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--tia-green-300, #6ee7b7);
    flex: 0 0 auto;
}
.md-propick-call {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.md-propick-call .dir {
    font-size: 22px;
    line-height: 1;
}
.md-propick-call.up .dir { color: var(--tia-green-300, #6ee7b7); }
.md-propick-call.down .dir { color: var(--tia-red-300, #fca5a5); }

/* v2.2.2 — Pro Picks reasoning blurbs on result screen
   (#results-pro-blurbs). Shows the analyst's "why" alongside
   the user's outcome. Light-card aesthetic so it sits below
   the navy result hero without competing with it. */
.results-pro-blurbs {
    background: var(--tia-white, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 15px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.results-pro-blurb-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted, #6b7280);
    margin-bottom: 10px;
}
.results-pro-blurb-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--border-subtle, #f1f5f9);
}
.results-pro-blurb-row:first-of-type { border-top: none; padding-top: 0; }
.results-pro-blurb-row:last-of-type  { padding-bottom: 0; }
.results-pro-blurb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
}
.results-pro-blurb-name {
    font-weight: 700;
    color: var(--tia-navy, #000064);
}
.results-pro-blurb-acc {
    color: var(--fg-muted, #6b7280);
    font-weight: 600;
}
.results-pro-blurb-dir {
    margin-left: auto;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
}
.results-pro-blurb-dir.up   { color: #15803d; background: rgba(16, 185, 129, 0.10); }
.results-pro-blurb-dir.down { color: #b91c1c; background: rgba(239, 68, 68, 0.10);  }
.results-pro-blurb-body {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-primary, #111827);
}
.md-propick-call .range {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}
.md-propick-meta {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
/* v1.0.7 — Per-pick reasoning blurb + "more from this analyst" link */
.md-propick-blurb {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 8px;
    font-style: italic;
}
.md-propick-more {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c9a227;
    text-decoration: none;
}
.md-propick-more:hover,
.md-propick-more:active {
    text-decoration: underline;
}

/* ─────────── Regret card (top of predict screen) ─────────── */
.md-regret-card {
    background: var(--tia-red-100);
    border: 1px solid var(--tia-red);
    border-radius: 15px;
    padding: 14px 16px 12px;
    margin: 0 0 14px;
    position: relative;
    box-shadow: var(--shadow-sm);
    animation: md-fade-slide-up var(--dur-slow) var(--ease-entrance);
}
.md-regret-card .eyebrow {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tia-red-700);
    margin-bottom: 6px;
}
.md-regret-card .body {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--tia-navy);
    line-height: var(--lh-relaxed);
}
.md-regret-card .body strong {
    color: var(--tia-red-700);
    font-weight: 700;
}
.md-regret-card .dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--tia-red-700);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    opacity: 0.6;
}
.md-regret-card .dismiss:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
 * P4.2 SPRINT 2 — Today's Missions (quests) + live feed
 * ───────────────────────────────────────────────────────────────── */

/* Quest rail — sits above the dateline, below regret card.
 * Stacked list (not horizontal scroll) — each quest is read in
 * full at a glance, not scanned. */
.md-quest-rail {
    margin: 0 0 14px;
}
.md-quest-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.md-quest-rail-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.md-quest-rail-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}
.md-quest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.md-quest {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 15px;
    box-shadow: var(--shadow-xs);
    transition: opacity var(--dur-fast) var(--ease-standard);
}
.md-quest.done { opacity: 0.72; }
.md-quest-icon {
    font-size: 22px;
    line-height: 1;
    text-align: center;
}
.md-quest-body {
    min-width: 0;
}
.md-quest-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--tia-navy);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.md-quest-title .scope {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--fg-subtle);
}
.md-quest-progress {
    height: 4px;
    background: var(--tia-navy-50);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0;
}
.md-quest-progress .bar {
    height: 100%;
    background: linear-gradient(90deg, var(--tia-navy), var(--tia-red));
    border-radius: 999px;
    transition: width var(--dur-slow) var(--ease-standard);
}
.md-quest.done .md-quest-progress .bar {
    background: var(--tia-positive);
}
.md-quest-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-muted);
    letter-spacing: 0.04em;
}
.md-quest-meta .claimed {
    color: var(--tia-positive);
    font-weight: 600;
}

/* Live activity feed — vertical list, capped height, scrollable.
 * Shows the most recent N predictions/wildcards within the last
 * 2 hours of market activity. The .md-feed-pulse blinking dot
 * signals "live" state. */
.md-feed {
    margin: 0 0 14px;
    background: var(--tia-white);
    border: 1px solid var(--border-subtle);
    border-radius: 15px;
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
}
.md-feed-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.md-feed-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    flex: 1;
}
.md-feed-pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tia-red);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
    animation: md-feed-pulse 1.4s ease-out infinite;
}
@keyframes md-feed-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .md-feed-pulse { animation: none; }
}
.md-feed-list {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.md-feed-list::-webkit-scrollbar { width: 2px; }
.md-feed-list::-webkit-scrollbar-thumb { background: var(--tia-grey-200); border-radius: 999px; }
.md-feed-item {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--fg-body);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.4;
}
.md-feed-item:last-child { border-bottom: none; }
.md-feed-item .name {
    font-weight: 600;
    color: var(--tia-navy);
}
.md-feed-item .dir.up { color: var(--tia-positive); font-weight: 600; }
.md-feed-item .dir.down { color: var(--tia-negative); font-weight: 600; }
.md-feed-item .conf {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}
.md-feed-item .wc {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--tia-red);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.md-feed-item .time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-subtle);
    float: right;
}

/* ─────────────────────────────────────────────────────────────────
 * P4.2.1 — Live-deploy review fixes
 *   - Awaiting trading-range panels fill the full screen width
 *   - Leaderboard segmented control + pill tabs all 15px
 *   - Double-or-Nothing line in result card styled
 * ───────────────────────────────────────────────────────────────── */

/* Awaiting trading-range panels — make them genuinely fill the
 * available horizontal space side-by-side. Cancel any parent
 * horizontal padding contribution (md-screen 18px L/R) by negative-
 * margin so the grid edges hit the viewport gutters. Also bump
 * vertical padding so each card feels substantial. */
.awaiting-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 0 12px !important;
}
.awaiting-panel.range-panel,
#pnl-tracker {
    width: 100% !important;
    min-width: 0 !important;       /* allow grid children to shrink instead of overflow */
    padding: 22px 18px 20px !important;
    margin: 0 !important;
}
/* Inside the navy locked-call card, tighten the type so 2-column
 * layout doesn't make labels wrap awkwardly */
.awaiting-panel.range-panel .ftw-label { white-space: nowrap; }
.awaiting-panel.range-panel .prediction-badge {
    font-size: 24px !important;     /* was 28px — fits the half-width better */
}

/* Leaderboard segmented control + all generic .tab pill options
 * brought into the 15px world. */
.tab,
.md-segmented-item,
.timeline-filter,
.awaiting-tab,
.referral-tab {
    border-radius: 15px !important;
}
/* Per-row Leaderboard pills (.md-lb-row.you with margin negatives)
 * also pick up 15px to match the rest of the card system. */
.md-lb-row.you { border-radius: 15px !important; }

/* DoN result line — celebratory when WON (red eyebrow + bold +pts),
 * muted when LOST (greyed). Reads inside the navy result hero. */
#result-don-line {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tia-white) !important;
    margin: 2px 0 !important;
    padding: 4px 0 !important;
    border-bottom: 1px dashed rgba(255,255,255,0.18) !important;
}
#result-don-line .result-icon { margin-right: 6px; }

/* Range-tag refinements for Phase 4 penalty surface.
 * The .range-miss class is the wide-miss "-3 pts" surface — bump
 * its emphasis so the cost reads. .range-neutral is the new
 * direction-wrong-but-range-within-2-brackets state. */
.range-tag.range-miss {
    background: var(--tia-red-100) !important;
    color: var(--tia-red-700) !important;
    font-weight: 600 !important;
    border: 1px solid var(--tia-red) !important;
}
.range-tag.range-neutral {
    background: var(--tia-grey-100) !important;
    color: var(--fg-muted) !important;
    font-size: 11px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * P4.2.2 — Engagement stack relocation
 * The Sprint 1+2 elements moved from inside #screen-predict to a
 * top-level container above the screen switcher so they appear on
 * every state (predict / awaiting / results / weekend) — not just
 * when the user hasn't yet predicted. Needs its own horizontal
 * padding now that it's not inheriting from a .card wrapper.
 * ───────────────────────────────────────────────────────────────── */
#md-engagement-stack {
    padding: 0 16px;
    margin-top: 4px;
}
#md-engagement-stack:empty,
#md-engagement-stack:has(> :is(#md-regret-host:empty + .md-quest-rail[style*="display:none"] + .md-feed[style*="display:none"] + .md-achievement-rail[style*="display:none"])) {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────
 * P4 — Proper Ranks tab screen
 * ───────────────────────────────────────────────────────────────── */

/* Segmented control under the heading — same 15px tile look as
 * confidence chips, scaled wider. */
.md-ranks-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
.md-ranks-tab {
    padding: 11px 8px;
    border-radius: 15px;
    border: 1.5px solid var(--border-subtle);
    background: var(--tia-white);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
    /* league pills can carry long names — keep them on one line */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-ranks-tab.active {
    background: var(--tia-navy);
    color: var(--tia-white);
    border-color: var(--tia-navy);
}
.md-ranks-tab:active { transform: scale(0.97); }

/* Podium — 3 columns, middle (1st place) slightly bigger */
.md-ranks-podium {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    align-items: end;
}
.md-podium-slot {
    background: var(--tia-white);
    border: 1.5px solid var(--border-subtle);
    border-radius: 15px;
    padding: 14px 8px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.md-podium-slot.rank-1 {
    background: linear-gradient(180deg, #FFF6D5 0%, var(--tia-white) 60%);
    border-color: var(--tia-warning);
    padding-top: 18px;
    padding-bottom: 16px;
}
.md-podium-slot.rank-2 { border-color: var(--tia-grey-300); }
.md-podium-slot.rank-3 { border-color: #C8836F; }
.md-podium-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}
.md-podium-avatar {
    width: 36px;
    height: 36px;
    margin: 4px auto 6px;
    border-radius: 999px;
    background: var(--tia-navy-50);
    color: var(--tia-navy);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.md-podium-name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--tia-navy);
    margin-bottom: 2px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-podium-pts {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
    letter-spacing: 0.02em;
}
.md-podium-prize {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--tia-red);
    margin-top: 6px;
    letter-spacing: -0.01em;
}

/* Your-rank pinned card */
.md-ranks-you {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--tia-navy);
    color: var(--tia-white);
    border-radius: 15px;
    box-shadow: var(--shadow-md);
}
.md-ranks-you .rank {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    min-width: 48px;
    text-align: center;
}
.md-ranks-you .body {
    flex: 1;
    min-width: 0;
}
.md-ranks-you .name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.md-ranks-you .meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 2px;
}
.md-ranks-you .gap {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tia-red);
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.md-ranks-you .gap.in-prize {
    background: var(--tia-positive);
    color: var(--tia-white);
}

/* v2.2.3 — Stats-tab Weekly Recap CTA. Navy gradient hero so it
 * pops above the stat grid + insights cards (was a Settings row,
 * easy to miss). */
.md-stats-recap-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 16px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, #000064 0%, #1a1a8e 100%);
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 100, 0.18);
    color: var(--tia-white, #fff);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms var(--ease-standard);
    text-align: left;
}
.md-stats-recap-cta:active {
    transform: scale(0.985);
}
@media (hover: hover) and (pointer: fine) {
    .md-stats-recap-cta:hover { box-shadow: 0 6px 22px rgba(0, 0, 100, 0.26); }
}
.md-stats-recap-cta-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.md-stats-recap-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.md-stats-recap-cta-headline {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.md-stats-recap-cta-sub {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.3;
}
.md-stats-recap-cta-arrow {
    font-size: 24px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

/* Standings list */
.md-ranks-list { padding: 0 16px; position: relative; }

/* v2.2.2 — Live leaderboard polling.
 * .md-ranks-list--live: set on the list when the market is open and
 *   live deltas are being merged. Shows a "LIVE" pill at the top-right.
 * .md-ranks-row--live: set on rows whose displayed points include a
 *   non-zero today's-projection delta. Subtle dot in the points
 *   column so the user sees which numbers are moving. */
.md-ranks-list--live::before {
    content: 'LIVE';
    position: absolute;
    top: -22px;
    right: 16px;
    background: var(--tia-red, #dc2626);
    color: var(--tia-white, #fff);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
    animation: md-ranks-live-pulse 1.6s ease-in-out infinite;
}
@keyframes md-ranks-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.md-ranks-row--live .pts {
    color: var(--tia-navy, #000064);
    font-weight: 700;
    position: relative;
}
.md-ranks-row--live .pts::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--tia-red, #dc2626);
    vertical-align: middle;
    animation: md-ranks-live-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .md-ranks-list--live::before,
    .md-ranks-row--live .pts::after {
        animation: none;
    }
}
.md-ranks-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.md-ranks-row:last-child { border-bottom: none; }
.md-ranks-row .rank {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted);
    text-align: center;
}
.md-ranks-row .name {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--tia-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-ranks-row .streak {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tia-red);
    font-weight: 600;
}
.md-ranks-row .pts {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--tia-navy);
    text-align: right;
    min-width: 60px;
}
/* v2.4.6 — hit-rate board: call-count secondary (muted, not the red streak) */
.md-ranks-row .streak.md-ranks-calls {
    color: var(--fg-muted);
    font-weight: 500;
}

/* v3.0 staking — flag-aware copy. initStakingUI() adds body.md-staking when
   STAKING_ENABLED is on; that swaps every Safe/Normal/Bold explainer for its
   staking variant. Default (flag off) shows confidence copy unchanged. Block
   + inline variants so both div sections and inline info-tips switch cleanly. */
.staking-only { display: none; }
.staking-only-inline { display: none; }
body.md-staking .staking-only { display: block; }
body.md-staking .staking-only-inline { display: inline; }
body.md-staking .confidence-only,
body.md-staking .confidence-only-inline { display: none !important; }
/* Provisional standings (under the qualifying call count) — shown below the
   ranked board, visually de-emphasised so they don't read as ranked. */
.md-ranks-subhead {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 16px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.md-ranks-note {
    font-size: 12px;
    color: var(--fg-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}
.md-ranks-row--provisional { opacity: 0.62; }
.md-ranks-row--provisional .rank { color: var(--fg-muted); }
.md-ranks-row.me {
    background: var(--tia-navy-50);
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 15px;
}
.md-ranks-row.me .rank { color: var(--tia-navy); font-weight: 700; }
.md-ranks-loading,
.md-ranks-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────
 * P4 live-deploy round 3 — final polish
 *   - Edge bottom sheet anchored to viewport, not containing block
 *   - Today's-Range / 52-Week-Range cards fill full width side-by-side
 *   - Those range cards' labels are white (override the P3.5 eyebrow
 *     consistency rule that re-set them to red)
 *   - TICKERONE header wordmark narrower letter-spacing
 * ───────────────────────────────────────────────────────────────── */

/* Edge sheet now position:fixed so it always anchors to the
 * viewport, not whichever ancestor might have a transform/perspective.
 * Some Capacitor / iOS embeds set position on a parent which broke
 * the design's position:absolute origin. */
.md-sheet-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
}

/* Today's-Range / 52-Week-Range cards live in two containers:
 *   - #awaiting-ranges (awaiting Market sub-tab, currently hidden)
 *   - #predict-ranges-row (injected dynamically below the predict
 *     screen's price-info row by render52WeekRange)
 * Both have class .awaiting-panels. Target the CLASS so we cover
 * both. Need to OVERRIDE max-width: calc(50% - 6px) !important from
 * legacy styles.css — that's what was caging the cards.
 *
 * Also targeting #predict-ranges-row + #awaiting-ranges by id with
 * even higher specificity to ensure the grid layout wins. */
.awaiting-panels,
#predict-ranges-row,
#awaiting-ranges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 !important;
    align-items: stretch !important;
}
.awaiting-panels > .awaiting-panel,
#predict-ranges-row > .awaiting-panel,
#awaiting-ranges > .awaiting-panel,
/* Even higher specificity in case anything else competes */
.card .awaiting-panels > .awaiting-panel.range-panel,
#screen-predict .awaiting-panels > .awaiting-panel.range-panel {
    /* Belt + braces: both grid behaviours (justify-self: stretch +
     * width: 100%) AND flex behaviour (flex: 1 1 0) so the children
     * fill the parent regardless of which layout mode the parent
     * is currently in. Legacy styles set both display:flex and
     * a max-width cage; this neutralises the cage and ensures
     * stretch wherever the rule lands. */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1 1 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: block !important;
}
/* Specific tuning for the range cards themselves */
.awaiting-panels > .awaiting-panel.range-panel,
#predict-ranges-row > .awaiting-panel.range-panel,
#awaiting-ranges > .awaiting-panel.range-panel {
    padding: 18px 16px 16px !important;
}

/* WHITE labels in the range cards (NOT the locked-call card). Need
 * to cover both container IDs since render52WeekRange uses a
 * different parent than renderAwaitingRanges. */
#awaiting-ranges .awaiting-panel.range-panel .ftw-label,
#predict-ranges-row .awaiting-panel.range-panel .ftw-label {
    color: var(--tia-white) !important;
}
#awaiting-ranges .awaiting-panel.range-panel .ftw-label .info-tip,
#predict-ranges-row .awaiting-panel.range-panel .ftw-label .info-tip {
    background: rgba(255,255,255,0.15) !important;
    color: var(--tia-white) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
/* Range price labels (the $-amount markers below the bar) — slight
 * brightening so they read on navy too. */
#awaiting-ranges .ftw-marker-price,
#predict-ranges-row .ftw-marker-price {
    color: var(--tia-white) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Narrower TICKERONE wordmark per design feedback */
.md-header-brand {
    letter-spacing: 0.02em !important;
}

/* ─────────────────────────────────────────────────────────────────
 * v1.0.7 — Swipe-to-dismiss affordances
 * Two parts:
 *   1. A drag-handle pill at the top of every closeable card (iOS-style)
 *   2. The legacy "×" close-button glyph swapped for a swipe-down
 *      chevron so the visual matches the gesture.
 * Pairs with attachPopupSwipeDismiss() in index.html which moves the
 * card with the finger.
 * ─────────────────────────────────────────────────────────────────*/

/* Cards need position:relative so the absolutely-positioned handle
 * pseudo-element anchors to them. Forcing it is safe — these are all
 * self-contained layout roots and aren't absolutely-positioned in
 * their parents. */
.scoring-popup,
.insights-panel,
.md-battles-sheet,
.md-leagues-sheet,
.md-avatar-sheet,
.md-tournament-sheet,
.auth-modal,
.guest-login-popup {
    position: relative !important;
}

/* The handle itself — 38×4 rounded slate pill, centered at the top.
 * pointer-events:none so it doesn't intercept touches; the gesture
 * goes straight through to the card's touchstart listener.
 * v2.2.2 — Wildcard reveal popup dropped from the handle list; it's
 * not a swipe-dismiss surface and the handle was reading as "popup
 * window" chrome around the card. */
.scoring-popup::before,
.insights-panel::before,
.md-battles-sheet::before,
.md-leagues-sheet::before,
.md-avatar-sheet::before,
.md-tournament-sheet::before,
.auth-modal::before,
.guest-login-popup::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.20);
    pointer-events: none;
    z-index: 2;
}

/* Push existing header content down so it clears the handle. The
 * cards have their own padding; this nudge is just enough that the
 * handle doesn't sit ON TOP of the title. */
.scoring-popup-header,
.insights-header,
.md-battles-sheet-head,
.md-leagues-sheet-head,
.md-avatar-sheet-head,
.md-tournament-sheet-head,
.auth-modal-header {
    padding-top: 16px !important;
}

/* Replace the legacy "×" close-button glyph with a downward chevron
 * (U+2304 DOWN ARROWHEAD) so the affordance matches the swipe-down
 * gesture. The click target stays — keyboard / mouse users still get
 * a tappable button — but the visible mark now says "swipe down". */
.scoring-popup-close,
.insights-close-btn,
.auth-modal-close,
.wildcard-view-close,
.guest-login-close,
.md-battles-sheet-close,
.md-leagues-sheet-close,
.md-avatar-sheet-close,
.md-tournament-sheet-close {
    /* Hide the original × character. */
    font-size: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.scoring-popup-close::after,
.insights-close-btn::after,
.auth-modal-close::after,
.wildcard-view-close::after,
.guest-login-close::after,
.md-battles-sheet-close::after,
.md-leagues-sheet-close::after,
.md-avatar-sheet-close::after,
.md-tournament-sheet-close::after {
    content: '\02304'; /* ⌄ — DOWN ARROWHEAD */
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--fg-muted, #6b7280) !important;
    font-weight: 700 !important;
}

/* v2.0.4 — Tier badge promoted from <div> to <button> so it's
 * tappable for the info-popup. Reset the native button defaults
 * that would otherwise bleed through the .md-tier-badge styling. */
/* v2.1.2 — Settings toggle row + iOS-style switch + contacts match list.
 * Used by the "Discoverable by contacts" row and the contacts-match
 * results popup. Visual language matches the rest of the More tab. */
.md-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.md-settings-toggle .lbl { flex: 1; }
.md-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.md-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.md-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 180ms ease;
}
.md-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 999px;
    transition: transform 180ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.md-toggle-switch input:checked + .md-toggle-slider {
    background: var(--tia-navy, #000064);
}
.md-toggle-switch input:checked + .md-toggle-slider::before {
    transform: translateX(18px);
}

.md-contact-match-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}
.md-contact-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}
.md-contact-match-name {
    font-weight: 600;
    color: var(--tia-navy, #000064);
}
.md-contact-add-btn {
    padding: 6px 16px !important;
    font-size: 13px !important;
}
.md-contact-state {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}
.md-contact-state.friends {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.10);
}
.md-contact-state.pending {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.10);
}

button.md-tier-badge {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
button.md-tier-badge:active { transform: scale(0.96); }

/* v2.2.0 — Pending invite chip in the redesign header. Mirrors the
 * 🃏 deck chip styling so the two chips read as a matched pair. */
.md-invite-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  margin-right: 6px;
  border: 1px solid rgba(0, 0, 100, 0.40);
  background: rgba(0, 0, 100, 0.10);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--tia-navy);
  transition: transform 160ms var(--ease-standard, ease),
              background 160ms var(--ease-standard, ease);
  -webkit-appearance: none;
  appearance: none;
}
.md-invite-chip:active { transform: scale(0.96); }

/* v2.2.0 — Player Picker. Search input + result rows used by the
 * Battles "Send" tab and the League invite sub-view. One component,
 * many flows. */
.md-pp-wrap { padding: 4px 2px 8px; }
.md-pp-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1.5px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px;
    background: var(--tia-white, #fff);
    color: var(--tia-navy, #000064);
    font-family: var(--font-body, system-ui);
}
.md-pp-input:focus {
    outline: none;
    border-color: var(--tia-navy, #000064);
}
.md-pp-hint {
    margin-top: 8px;
    color: var(--fg-muted, #6b7280);
    font-size: 13px;
    text-align: center;
    padding: 14px 0;
}
.md-pp-loading,
.md-pp-empty {
    margin-top: 10px;
    color: var(--fg-muted, #6b7280);
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
}
.md-pp-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    max-height: 50vh;
    overflow-y: auto;
}
.md-pp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px;
    background: var(--tia-white, #fff);
}
.md-pp-row-name {
    font-weight: 600;
    color: var(--tia-navy, #000064);
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-pp-row-btn {
    padding: 6px 16px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
}
.md-pp-row-state {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted, #6b7280);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(107, 114, 128, 0.10);
}

/* v2.2.0 — Unified invite-inbox rows (1v1 battles + league invites). */
.md-invite-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.md-invite-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 12px;
    background: var(--tia-white, #fff);
}
.md-invite-row.resolved {
    text-align: center;
    color: var(--fg-muted, #6b7280);
    font-weight: 600;
    padding: 14px;
}
.md-invite-row-main { display: flex; flex-direction: column; gap: 4px; }
.md-invite-row-title {
    font-weight: 600;
    color: var(--tia-navy, #000064);
    font-size: 14px;
}
.md-invite-row-sub {
    font-size: 12px;
    color: var(--fg-muted, #6b7280);
}
.md-invite-row-actions {
    display: flex;
    gap: 8px;
}
.md-invite-row-actions .btn {
    flex: 1;
    padding: 8px 16px !important;
    font-size: 13px !important;
}
.md-invite-decline {
    background: transparent !important;
    color: var(--fg-muted, #6b7280) !important;
    border: 1px solid var(--border-subtle, #e5e7eb) !important;
}

/* v2.0.4 — CTA row inside info-popup bodies. Used by the header-pill
 * tooltips (wildcards / tier) so multi-action popups stack the CTAs
 * neatly and wrap on narrow screens. */
.md-info-cta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.md-info-cta-row .btn {
    flex: 1 1 auto;
    min-width: 140px;
}

/* v2.1.0 — Pre-call 30-day chart + awaiting intraday chart wrappers.
 * Single chart engine in app.js (mdRenderLineChart) drives both; this
 * just styles the surrounding card chrome. */
.md-precall-chart,
.md-awaiting-intraday {
    background: var(--tia-white, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 14px;
    padding: 12px 12px 10px;
    margin: 12px 0;
}
.md-precall-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    font-family: var(--font-display, 'Raleway', sans-serif);
}
.md-precall-chart-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--tia-navy, #000064);
}
.md-precall-chart-range {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}
.md-precall-chart-body,
#md-intraday-body {
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.md-precall-chart-body svg,
#md-intraday-body svg {
    width: 100%;
    height: 100%;
    display: block;
}
.md-intraday-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--fg-muted, #6b7280);
}
.md-intraday-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.md-intraday-swatch {
    display: inline-block;
    width: 12px;
    height: 8px;
    border-radius: 2px;
    opacity: 0.6;
}
.md-intraday-dash {
    display: inline-block;
    width: 14px;
    height: 0;
    border-top: 1.5px dashed #9ca3af;
}

/* v2.0.4 — Info icon on every stat panel title. Small "i" badge that
 * opens a plain-English explainer popup (mdShowInfoPopup). Same
 * pattern used by the Compete-with-friends section tooltips. */
.md-stats-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--tia-navy, #000064);
    background: transparent;
    color: var(--tia-navy, #000064);
    font-family: 'Georgia', serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    transition: background 140ms ease, color 140ms ease;
}
.md-stats-info:hover,
.md-stats-info:active {
    background: var(--tia-navy, #000064);
    color: var(--tia-white, #fff);
}