/* ═══════════════════════════════════════════════════════════════
   punts.css  — shared stylesheet
   Covers:  /horseracing/richest-races/  and  /daily-punt/

   Loaded after cleverpunts.css (via head.php), so all global
   tokens are already available and are NOT redefined here:
     --gold, --gold-lt, --gold-dim, --gold-glow
     --ink, --ink-2, --ink-3, --card-bg
     --border, --border-dim
     --text, --text-dim
     --green, --green-dim, --cyan, --cyan-dim, --red
     --radius
     --font-display, --font-body

   Page-specific tokens defined here (no global equivalent, or
   intentionally different from the global value):
     --rp-gold      Amber #F59E0B — richer accent for prize/value context
     --rp-surface   Deep navy page surface
     --rp-s2        Mid navy card surface
     --rp-s3        Upper navy surface — bar tracks, badge fills
     --rp-muted     #cbd5e1 — legible blue-grey on navy (~7:1 on rp-surface)
     --rr-silver    Rank-2 badge colour
     --rr-bronze    Rank-3 badge colour
     --rr-green     Race-time green (distinct hue from global --green)

   Previous issues resolved
   ────────────────────────
   • --rp-muted / --rr-muted were both #64748b (~3:1 on dark navy — unreadable).
     Unified as --rp-muted: #cbd5e1. All rr- classes now reference --rp-muted.
   • --rr-* surface/border/radius/gold tokens removed — reference --rp-* or globals.
   • Font floor raised to 0.72rem throughout both namespaces.
   • rp-stat hover blink fixed: animation property no longer overridden on :hover,
     so rpFadeUp cannot re-fire on mouse-leave. Glow is via box-shadow transition.
   • rpGlow keyframe removed (no longer used).
   • <style> block removed from fp-load-top-5-horse-races.php — styles live here.
   • dp-hero and card surfaces shifted from purple-black (--ink) to blue-navy
     (--rp-surface / --rp-s2) to match richest-races visual language.
═══════════════════════════════════════════════════════════════ */

/* ── Page-specific tokens ───────────────────────────────────── */
:root {
    --rp-gold:    #F59E0B;
    --rp-surface: #0f172a;
    --rp-s2:      #1e293b;
    --rp-s3:      #334155;
    --rp-muted:   #cbd5e1;   /* was #64748b — raised for legibility on navy */
    --rr-silver:  #9CA3AF;
    --rr-bronze:  #CD7C4A;
    --rr-green:   #34d399;   /* race-time green — slightly different from --green */
}


/* ════════════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════════════ */
@keyframes rpFadeUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes rpShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes rpBarGrow { from{width:0} to{width:var(--w)} }

/* rr- widget keyframes */
@keyframes rrFadeUp  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes rrShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes rrPulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* daily-punt keyframes */
@keyframes cheeky-spin  { to{transform:rotate(360deg)} }
@keyframes dp-ticker    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes dp-odds-pulse{ 0%,100%{opacity:1;text-shadow:none} 50%{opacity:.8;text-shadow:0 0 16px currentColor} }
@keyframes dp-pill-pulse{ 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px rgba(245,158,11,.35)} }
@keyframes dp-card-in   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes gg-card-in   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }


/* ════════════════════════════════════════════════════════════════
   RP-  RICHEST RACES PAGE COMPONENTS
════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.rp-hero {
    background:    linear-gradient(155deg,#080d1a 0%,#0d1e3a 50%,#080d1a 100%);
    border:        1px solid var(--border-dim);
    border-radius: var(--radius);
    padding:       1.75rem 1.5rem 1.5rem;
    position:      relative;
    overflow:      hidden;
    animation:     rpFadeUp .4s ease both;
    margin-bottom: 1.25rem;
}
.rp-hero::after {
    content:''; position:absolute; top:0; right:0; bottom:0; width:40%;
    background:radial-gradient(ellipse at 80% 50%,rgba(245,158,11,.08) 0%,transparent 70%);
    pointer-events:none;
}
.rp-hero-eyebrow {
    font-family:var(--font-body);
    font-size:.75rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--rp-gold);
    display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem;
}
.rp-hero-h1 {
    font-family:var(--font-display);
    font-size:clamp(1.45rem,3.5vw,2.2rem);
    font-weight:800; line-height:1.2; color:var(--text); margin-bottom:.45rem;
}
.rp-hero-h1 em {
    font-style:normal;
    background:linear-gradient(90deg,var(--rp-gold) 0%,#fde68a 50%,var(--rp-gold) 100%);
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:rpShimmer 3.5s linear infinite;
}
.rp-hero-sub {
    font-family:var(--font-body);
    font-size:.875rem; color:var(--text-dim); line-height:1.65; max-width:600px;
}

/* ── Stat trio ──────────────────────────────────────────────── */
.rp-stat-trio {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:.75rem; margin-top:1.4rem;
}
.rp-stat {
    background:var(--rp-s2); border:1px solid var(--border-dim);
    border-radius:var(--radius); padding:.8rem 1rem;
    animation:rpFadeUp .45s ease both;
    animation-delay:calc(var(--i,0) * .07s);
    /* Glow via transition only — changing animation on :hover causes rpFadeUp
       to re-fire on mouse-leave (the "blink"). box-shadow is safe. */
    transition:border-color .25s, box-shadow .25s;
}
.rp-stat:hover {
    border-color:rgba(245,158,11,.35);
    box-shadow:0 0 18px rgba(245,158,11,.18);
}
.rp-stat-lbl {
    font-family:var(--font-body);
    font-size:.72rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--rp-muted);
    margin-bottom:.25rem;
}
.rp-stat-val {
    font-family:var(--font-display);
    font-size:1.4rem; font-weight:800; color:var(--text); line-height:1.1;
}
.rp-stat-val.gold {
    background:linear-gradient(90deg,var(--rp-gold) 0%,#fde68a 50%,var(--rp-gold) 100%);
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:rpShimmer 3s linear infinite;
}
.rp-stat-sub {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--rp-muted); margin-top:.18rem;
}

/* ── Direction badge ────────────────────────────────────────── */
.rp-dir-badge {
    font-family:var(--font-body);
    display:inline-flex; align-items:center; gap:.2rem;
    font-size:.75rem; font-weight:700; border-radius:999px; padding:.14rem .48rem;
}
.badge-up      { background:var(--green-dim);        color:var(--green); }
.badge-down    { background:rgba(224,85,85,.15);      color:var(--red);   }
.badge-neutral { background:var(--rp-s3);             color:var(--rp-muted); }

/* ── Panel ──────────────────────────────────────────────────── */
.rp-panel {
    background:    var(--rp-surface);
    border:        1px solid var(--border-dim);
    border-radius: var(--radius);
    padding:       1.1rem 1.2rem;
    animation:     rpFadeUp .45s ease both;
}
.rp-panel.d1 { animation-delay:.06s; }
.rp-panel.d2 { animation-delay:.12s; }
.rp-panel.d3 { animation-delay:.18s; }

.rp-panel-hdr {
    font-family:var(--font-body);
    display:flex; align-items:center; justify-content:space-between;
    font-size:.75rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--rp-gold);
    margin-bottom:.85rem; padding-bottom:.5rem;
    border-bottom:1px solid var(--border-dim);
}
.rp-panel-hdr-sub {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--rp-muted);
    font-weight:500; letter-spacing:0; text-transform:none;
}
/* Small-print below charts — replaces inline style="font-size:.7rem" in index.php */
.rp-panel-note {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--rp-muted);
    line-height:1.55; margin:0; margin-top:.5rem;
}

/* ── Leaderboard ────────────────────────────────────────────── */
.rp-lb { display:flex; flex-direction:column; gap:.55rem; }
.rp-lb-row { display:grid; grid-template-columns:1.3rem 1fr auto; gap:.5rem; align-items:center; }
.rp-lb-rank {
    font-family:var(--font-body);
    font-size:.75rem; font-weight:800; color:var(--rp-muted); text-align:right;
}
.rp-lb-rank.g { color:var(--rp-gold); }
.rp-lb-rank.s { color:#cbd5e1; }
.rp-lb-course {
    font-family:var(--font-body);
    font-size:.82rem; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rp-lb-bar-wrap { height:.3rem; background:var(--rp-s3); border-radius:999px; margin-top:.25rem; overflow:hidden; }
.rp-lb-bar {
    height:100%; border-radius:999px;
    background:linear-gradient(90deg,var(--rp-gold),#fde68a);
    --w:var(--pct); width:var(--w);
    animation:rpBarGrow .65s ease both;
    animation-delay:calc(var(--i,0) * .05s);
}
.rp-lb-prize {
    font-family:var(--font-body);
    font-size:.78rem; font-weight:700; color:#fbbf24; white-space:nowrap;
}
.rp-lb-cnt {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--rp-muted);
}

/* ── Chart wrapper ──────────────────────────────────────────── */
.rp-chart-wrap { position:relative; width:100%; }

/* ── Editorial ──────────────────────────────────────────────── */
.rp-editorial {
    background:linear-gradient(135deg,rgba(30,58,95,.45) 0%,rgba(15,23,42,.95) 100%);
    border:1px solid var(--border-dim); border-radius:var(--radius);
    padding:1.4rem 1.5rem; margin-top:1.25rem;
    animation:rpFadeUp .5s ease both; animation-delay:.15s;
}
.rp-editorial p {
    font-family:var(--font-body);
    font-size:.875rem; color:var(--rp-muted); line-height:1.72; margin-bottom:.8rem;
}
.rp-editorial p:last-child { margin:0; }
.rp-editorial strong { color:var(--text); }
.rp-pull {
    font-family:var(--font-body);
    font-size:1rem; font-weight:700; color:var(--text);
    border-left:3px solid var(--rp-gold);
    padding:.1rem 0 .1rem .9rem; margin:.9rem 0; line-height:1.55;
}


/* ════════════════════════════════════════════════════════════════
   RR-  RACE LIST WIDGET  (fp-load-top-5-horse-races.php)
   Extracted from inline <style> block. Uses --rp-* tokens
   so both namespaces share the same palette.
════════════════════════════════════════════════════════════════ */

.rr-card {
    background:    var(--rp-surface);
    border:        1px solid var(--border-dim);
    border-radius: var(--radius);
    overflow:      hidden;
}

/* ── Header bar ─────────────────────────────────────────────── */
.rr-header {
    background:    linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);
    border-bottom: 1px solid var(--border-dim);
    padding:       .7rem 1rem;
    display:       flex; align-items:center;
    justify-content:space-between; gap:.5rem; flex-wrap:wrap;
}
.rr-header-title {
    font-family:var(--font-body);
    font-size:.82rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--rp-gold); text-decoration:none;
    display:flex; align-items:center; gap:.4rem;
}
.rr-header-title:hover { color:#fde68a; }

.rr-day-badge {
    font-family:var(--font-body);
    background:rgba(245,158,11,.15); color:var(--rp-gold);
    border:1px solid rgba(245,158,11,.3); border-radius:999px;
    font-size:.75rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; padding:.18rem .6rem;
}

/* ── Context stat strip ─────────────────────────────────────── */
.rr-context-strip {
    background:    var(--rp-s2);
    border-bottom: 1px solid var(--border-dim);
    padding:       .5rem 1rem;
    display:       flex; gap:1.2rem; flex-wrap:wrap; align-items:center;
}
.rr-context-item {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--rp-muted);
    display:flex; align-items:center; gap:.3rem;
}
.rr-context-item strong { color:var(--text); font-weight:600; }
.rr-up      { color:var(--rr-green); }
.rr-down    { color:var(--red); }
.rr-neutral { color:var(--rp-muted); }

/* ── Toggle button ──────────────────────────────────────────── */
.rr-toggle {
    font-family:var(--font-body);
    background:var(--rp-s3); border:1px solid var(--border-dim);
    color:var(--text); border-radius:999px; font-size:.75rem; font-weight:600;
    padding:.28rem .8rem; cursor:pointer;
    transition:background .2s, color .2s, border-color .2s;
}
.rr-toggle:hover {
    background:rgba(245,158,11,.2);
    color:var(--rp-gold);
    border-color:rgba(245,158,11,.4);
}

/* ── Featured row (rank 1) ──────────────────────────────────── */
.rr-featured {
    display:block; text-decoration:none;
    background:linear-gradient(135deg,rgba(245,158,11,.1) 0%,var(--rp-surface) 55%);
    border-bottom:1px solid rgba(245,158,11,.18);
    padding:1rem 1.1rem;
    transition:background .25s;
    animation:rrFadeUp .35s ease both;
}
.rr-featured:hover {
    background:linear-gradient(135deg,rgba(245,158,11,.18) 0%,var(--rp-s2) 55%);
}
.rr-featured-top {
    display:flex; align-items:flex-start;
    justify-content:space-between; gap:.75rem; margin-bottom:.5rem;
}
.rr-featured-time {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--rp-gold); font-weight:600;
    letter-spacing:.04em; margin-bottom:.2rem;
}
.rr-featured-course {
    font-family:var(--font-display);
    font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.25;
}
.rr-prize-featured {
    font-family:var(--font-display);
    font-size:1.35rem; font-weight:800; white-space:nowrap; line-height:1.1;
    background:linear-gradient(90deg,var(--rp-gold) 0%,#fde68a 45%,var(--rp-gold) 100%);
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:rrShimmer 3s linear infinite;
}
.rr-prize-label {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--rp-muted);
    letter-spacing:.08em; text-transform:uppercase;
    margin-top:.1rem; text-align:right;
}
.rr-trophy {
    font-size:1.5rem; color:var(--rp-gold);
    animation:rrPulse 2.8s ease-in-out infinite; flex-shrink:0;
}
.rr-featured-meta { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ── Standard rows (ranks 2–5) ──────────────────────────────── */
.rr-row {
    display:flex; align-items:center; gap:.7rem;
    padding:.65rem 1rem;
    text-decoration:none;
    border-bottom:1px solid var(--border-dim);
    transition:background .2s;
    animation:rrFadeUp .35s ease both;
}
.rr-row:last-child { border-bottom:none; }
.rr-row:hover      { background:var(--rp-s2); }

/* ── Rank badges ────────────────────────────────────────────── */
.rr-rank-badge {
    width:1.9rem; height:1.9rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-body);
    font-size:.72rem; font-weight:800; flex-shrink:0; border:1.5px solid;
}
.rr-rank-gold   { color:var(--rp-gold);   border-color:var(--rp-gold);   background:rgba(245,158,11,.1); }
.rr-rank-silver { color:var(--rr-silver); border-color:var(--rr-silver); background:rgba(156,163,175,.1); }
.rr-rank-bronze { color:var(--rr-bronze); border-color:var(--rr-bronze); background:rgba(205,124,74,.1);  }
.rr-rank-plain  { color:var(--rp-muted);  border-color:var(--rp-s3);     background:transparent; }
.rr-rank-course { color:#60a5fa; border-color:#60a5fa; background:rgba(96,165,250,.08); font-size:.85rem; }

/* ── Row content ────────────────────────────────────────────── */
.rr-row-body { flex:1; min-width:0; }
.rr-row-top  { display:flex; align-items:baseline; gap:.35rem; margin-bottom:.12rem; }
.rr-row-time {
    font-family:var(--font-body);
    font-size:.78rem; font-weight:700; color:var(--rr-green); flex-shrink:0;
}
.rr-row-course {
    font-family:var(--font-body);
    font-size:.85rem; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rr-row-name {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--rp-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.12rem;
}
.rr-row-meta { display:flex; gap:.35rem; align-items:center; }

/* ── Pills ──────────────────────────────────────────────────── */
.rr-prize-pill {
    font-family:var(--font-body);
    background:linear-gradient(90deg,rgba(245,158,11,.2) 0%,rgba(253,230,138,.12) 50%,rgba(245,158,11,.2) 100%);
    background-size:200% auto;
    border:1px solid rgba(245,158,11,.3); color:#fbbf24;
    border-radius:999px; font-size:.72rem; font-weight:700;
    padding:.15rem .55rem; white-space:nowrap; flex-shrink:0;
    animation:rrShimmer 4.5s linear infinite;
}
.rr-meta-pill {
    font-family:var(--font-body);
    background:var(--rp-s3); color:var(--rp-muted);
    border-radius:999px; font-size:.72rem; font-weight:500;
    padding:.12rem .45rem; white-space:nowrap;
}

/* ── Animation delays ───────────────────────────────────────── */
.rr-d1{animation-delay:.04s} .rr-d2{animation-delay:.08s}
.rr-d3{animation-delay:.12s} .rr-d4{animation-delay:.16s}
.rr-d5{animation-delay:.20s}

/* ── Bootstrap tab nav — hidden, toggled via JS ─────────────── */
#rrHiddenTabs { display:none !important; }


/* ════════════════════════════════════════════════════════════════
   SHARED PUNT SYSTEM
   punt-card, accent modifiers, leg rows, footer, prev badges
   Used by: daily-punt.php
════════════════════════════════════════════════════════════════ */

/* ── Punt card ──────────────────────────────────────────────── */
.punt-card {
    background:    var(--rp-s2);
    border:        1px solid var(--border-dim);
    border-radius: var(--radius);
    overflow:      hidden;
    margin-bottom: 1.2rem;
    position:      relative;
    transition:    box-shadow .2s;
}
.punt-card:hover { box-shadow:0 0 0 1px rgba(255,255,255,.07); }
.punt-card::before { content:''; display:block; height:3px; }
.punt-card.accent-gold::before  { background:linear-gradient(90deg,var(--gold),transparent); }
.punt-card.accent-green::before { background:linear-gradient(90deg,var(--green),transparent); }
.punt-card.accent-cyan::before  { background:linear-gradient(90deg,var(--cyan),transparent); }

/* ── Accent title colours ───────────────────────────────────── */
.punt-card.accent-gold  .punt-title h2 { color:var(--gold);  }
.punt-card.accent-green .punt-title h2 { color:var(--green); }
.punt-card.accent-cyan  .punt-title h2 { color:var(--cyan);  }

.punt-title h2 {
    font-family:var(--font-display);
    font-size:1rem; font-weight:700; margin:0; line-height:1.2;
}
.punt-bet-type {
    font-family:var(--font-body);
    font-size:1.1rem; color:var(--text); margin-top:.15rem; letter-spacing:.04em;
}
.punt-odds-pill {
    font-family:var(--font-body);
    font-size:.75rem; font-weight:700; border-radius:20px;
    padding:.2rem .65rem; letter-spacing:.04em; white-space:nowrap; flex-shrink:0;
}
.accent-gold  .punt-odds-pill { background:var(--gold-dim);  color:var(--gold);  border:1px solid rgba(201,168,76,.3); }
.accent-green .punt-odds-pill { background:var(--green-dim); color:var(--green); border:1px solid rgba(62,207,108,.3); }
.accent-cyan  .punt-odds-pill { background:var(--cyan-dim);  color:var(--cyan);  border:1px solid rgba(56,200,232,.3); }

/* ── Generated copy ─────────────────────────────────────────── */
.punt-copy {
    font-family:var(--font-body);
    font-size:.86rem; font-style:italic; color:rgba(255,255,255,.65);
    padding:0 1rem .7rem; line-height:1.5;
    border-bottom:1px solid var(--border-dim);
}

/* ── Leg rows ───────────────────────────────────────────────── */
.leg-row {
    display:flex; align-items:center; gap:.5rem;
    padding:.4rem .5rem; border-radius:8px; margin-bottom:.2rem;
    font-family:var(--font-body); font-size:.88rem; transition:background .15s;
}
.leg-row:hover    { background:rgba(255,255,255,.03); }
.leg-row.leg-won  { background:rgba(62,207,108,.07); }
.leg-row.leg-lost { background:rgba(231,76,60,.07); }
.leg-row.leg-void { background:rgba(255,255,255,.03); }

.leg-num {
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; flex-shrink:0; color:#fff;
}
.accent-gold  .leg-num { background:rgba(201,168,76,.25); }
.accent-green .leg-num { background:rgba(62,207,108,.25); }
.accent-cyan  .leg-num { background:rgba(56,200,232,.25); }

.leg-sport-icon { font-size:.75rem; flex-shrink:0; }
.leg-detail     { flex:1; min-width:0; }
.leg-selection  {
    font-weight:600; color:rgba(255,255,255,.9);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.leg-meta {
    font-family:var(--font-body);
    color:var(--text-dim); font-size:.78rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.leg-odds {
    font-family:var(--font-body);
    font-weight:700; font-size:.78rem; white-space:nowrap; flex-shrink:0;
}
.accent-gold  .leg-odds { color:var(--gold);  }
.accent-green .leg-odds { color:var(--green); }
.accent-cyan  .leg-odds { color:var(--cyan);  }

.leg-confidence {
    font-family:var(--font-body);
    font-size:.75rem; background:var(--cyan-dim); color:var(--cyan);
    border-radius:10px; padding:.05rem .35rem; flex-shrink:0;
}

/* Outcome icons */
.oi           { font-style:normal; font-size:.75rem; font-weight:700; }
.oi-win       { color:var(--green); }
.oi-lose      { color:var(--red); }
.oi-void      { color:var(--text-dim); }
.dp-oi        { font-style:normal; font-size:.75rem; font-weight:700; }
.dp-win       { color:var(--green); }
.dp-lose      { color:var(--red); }
.dp-void      { color:var(--text-dim); }

/* ── Card footer / CTA ──────────────────────────────────────── */
.punt-footer {
    border-top:1px solid var(--border-dim);
    padding:.55rem 1rem;
    display:flex; align-items:center;
    justify-content:space-between; gap:.5rem; flex-wrap:wrap;
}
.punt-footer-label {
    font-family:var(--font-body);
    font-size:.78rem; color:var(--text-dim);
}
.punt-cta-btn {
    font-family:var(--font-body);
    font-size:.75rem; font-weight:700;
    border-radius:20px; padding:.28rem .8rem;
    text-decoration:none; letter-spacing:.04em;
    transition:opacity .15s; white-space:nowrap;
    border:none; cursor:pointer;
}
.punt-cta-btn:hover { opacity:.82; }
.accent-gold  .punt-cta-btn { background:var(--gold);  color:#000; }
.accent-green .punt-cta-btn { background:var(--green); color:#000; }
.accent-cyan  .punt-cta-btn { background:var(--cyan);  color:#000; }

/* ── Yesterday's result badges ──────────────────────────────── */
.prev-badge {
    font-family:var(--font-body);
    font-size:.75rem; font-weight:600;
    border-radius:20px; padding:.25rem .8rem; letter-spacing:.04em;
}
.badge-win     { background:var(--green-dim);          border:1px solid rgba(62,207,108,.4);  color:var(--green); }
.badge-lose    { background:rgba(231,76,60,.12);        border:1px solid rgba(231,76,60,.35);  color:var(--red); }
.badge-partial { background:rgba(243,156,18,.12);       border:1px solid rgba(243,156,18,.3);  color:#f39c12; }

/* ── Disclaimer ─────────────────────────────────────────────── */
.cheeky-disclaimer {
    font-family:var(--font-body);
    font-size:.77rem; color:var(--text-dim);
    text-align:center; margin-top:1.5rem; line-height:1.6;
}
.cheeky-disclaimer a { color:inherit; }


/* ════════════════════════════════════════════════════════════════
   DP-  DAILY PUNT PAGE
════════════════════════════════════════════════════════════════ */

main.main-content  { overflow-x:hidden; }
div.top-nav-content { overflow-x:hidden; }
.top-nav-content { margin-left:100px; }
#targetInput, #calcTarget { padding-left:1.6rem !important; }

/* ── Hero ───────────────────────────────────────────────────── */
.dp-hero {
    position:relative;
    background:var(--rp-surface);     /* navy — matches richest-races palette */
    overflow:hidden;
    padding:2.5rem 1.5rem 3rem;
    margin-left:100px;
    width:stretch;
}
.dp-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%,rgba(245,158,11,.07) 0%,transparent 60%),
        radial-gradient(ellipse 50% 80% at 5%  80%,rgba(56,200,232,.04) 0%,transparent 50%);
    pointer-events:none; z-index:0;
}
.dp-hero::after {
    content:''; position:absolute; bottom:-1px; left:0; right:0; height:60px;
    background:linear-gradient(to bottom right,transparent 49.5%,var(--rp-surface) 50%);
    pointer-events:none; z-index:0;
}
.dp-hero-wm {
    position:absolute; top:0; right:0; width:45%; height:100%;
    background:url("/images/cleverman-cheeky1.webp") right bottom / contain no-repeat;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.6) 30%,rgba(0,0,0,0.85) 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.6) 30%,rgba(0,0,0,0.85) 100%);
    pointer-events:none; z-index:1;
}
.dp-hero-content { position:relative; z-index:2; }
.dp-hero-eyebrow {
    font-family:var(--font-body);
    font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--gold); display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
}
.dp-hero-eyebrow::before {
    content:''; display:inline-block; width:20px; height:2px; background:var(--gold);
}
.dp-hero h1 {
    font-family:var(--font-display);
    font-size:clamp(2rem,6vw,4rem); font-weight:900; font-style:italic;
    color:#fff; line-height:1; margin:0 0 .5rem;
}
.dp-hero h1 span { color:var(--gold); }

/* ── Ticker ─────────────────────────────────────────────────── */
.dp-ticker {
    background:rgba(245,158,11,.08);
    border-top:1px solid rgba(245,158,11,.15);
    border-bottom:1px solid rgba(245,158,11,.15);
    height:36px; overflow:hidden;
    display:flex; align-items:center;
}
.dp-ticker-label {
    font-family:var(--font-body);
    background:var(--rp-gold); color:#000;
    font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    padding:0 .85rem; height:100%;
    display:flex; align-items:center; white-space:nowrap; flex-shrink:0;
}
.dp-ticker-wrap  { overflow:hidden; flex:1; }
.dp-ticker-track {
    display:inline-flex; align-items:center; white-space:nowrap;
    animation:dp-ticker var(--ticker-dur,60s) linear infinite;
}
.dp-ticker-wrap:hover .dp-ticker-track { animation-play-state:paused; cursor:default; }
.dp-ticker-item {
    font-family:var(--font-body);
    font-size:.72rem; color:rgba(255,255,255,.6);
    padding:0 .8rem; display:inline-flex; align-items:center; gap:.3rem;
}
.dp-ticker-item strong { color:#fff; }
.dp-ticker-sep  { padding:0 .4rem; opacity:.5; }
.dp-ticker-runner {
    text-decoration:none; border-radius:4px; border:1px solid transparent;
    transition:background .15s, border-color .15s;
}
.dp-ticker-runner:hover {
    background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); color:#fff;
}
.dp-ticker-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:15px; height:15px;
    background:rgba(255,255,255,.1); border-radius:50%;
    font-size:.65rem; font-weight:700; color:rgba(255,255,255,.6); flex-shrink:0;
}
.dp-ticker-tip {
    display:none; position:fixed; z-index:9999;
    background:var(--rp-s2); border:1px solid rgba(245,158,11,.3);
    border-radius:8px; padding:.4rem .65rem;
    font-family:var(--font-body); font-size:.72rem; color:#fff;
    pointer-events:none; white-space:nowrap;
    align-items:center; gap:.5rem;
    box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.dp-ticker-tip.visible { display:flex; }
.dp-ticker-tip img { height:20px; width:auto; border-radius:3px; background:#333; padding:1px; }

/* ── Featured single-bet card ───────────────────────────────── */
.dp-featured { cursor:pointer; transition:transform .2s; }
.dp-featured:hover { transform:translateY(-2px); }
.dp-featured.accent-gold  {
    background:linear-gradient(135deg,var(--rp-surface),#0d2535);
    border-color:rgba(245,158,11,.35) !important;
}
.dp-featured.accent-green {
    background:linear-gradient(135deg,var(--rp-surface),#0a1f12);
    border-color:rgba(62,207,108,.3) !important;
}
.dp-featured.accent-cyan  {
    background:linear-gradient(135deg,var(--rp-surface),#091518);
    border-color:rgba(56,200,232,.25) !important;
}

/* ── Pulsing / animated states ──────────────────────────────── */
.dp-odds-pulse { animation:dp-odds-pulse 2.5s ease-in-out infinite; }
.dp-pill-pulse { animation:dp-pill-pulse 2s ease-in-out infinite; }
.dp-card-enter { animation:dp-card-in .4s ease both; animation-play-state:paused; }

/* ── Section title ──────────────────────────────────────────── */
.dp-section-title {
    font-family:var(--font-display);
    font-size:1.1rem; font-weight:700; color:var(--gold);
    border-bottom:1px solid rgba(201,168,76,.12);
    padding-bottom:.4rem; margin-bottom:1rem;
}

/* ── Sidebar teaser cards ───────────────────────────────────── */
.dp-scard {
    display:block; text-decoration:none;
    border-radius:var(--radius); border:1px solid var(--border-dim);
    background:var(--rp-s2);
    overflow:hidden; margin-bottom:.5rem;
    transition:transform .15s, border-color .15s;
}
.dp-scard:hover { transform:translateY(-2px); }
.dp-scard.accent-gold::before  { content:''; display:block; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.dp-scard.accent-green::before { content:''; display:block; height:2px; background:linear-gradient(90deg,var(--green),transparent); }
.dp-scard.accent-cyan::before  { content:''; display:block; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); }
.dp-scard:hover.accent-gold  { border-color:rgba(201,168,76,.4); }
.dp-scard:hover.accent-green { border-color:rgba(62,207,108,.35); }
.dp-scard:hover.accent-cyan  { border-color:rgba(56,200,232,.3); }
.dp-scard-inner {
    padding:.55rem .7rem; display:flex; align-items:center; gap:.55rem;
}
.dp-scard-icon {
    font-size:1.2rem; width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border-radius:7px; flex-shrink:0;
}
.dp-scard.accent-gold  .dp-scard-icon { background:rgba(201,168,76,.1); }
.dp-scard.accent-green .dp-scard-icon { background:rgba(62,207,108,.08); }
.dp-scard.accent-cyan  .dp-scard-icon { background:rgba(56,200,232,.08); }
.dp-scard-body { flex:1; min-width:0; }
.dp-scard-label {
    font-family:var(--font-body);
    font-size:.72rem; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-dim);
}
.dp-scard-value {
    font-family:var(--font-display);
    font-size:.88rem; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}
.dp-scard.accent-gold  .dp-scard-value { color:var(--gold); }
.dp-scard.accent-green .dp-scard-value { color:var(--green); }
.dp-scard.accent-cyan  .dp-scard-value { color:var(--cyan); }
.dp-scard-sub {
    font-family:var(--font-body);
    font-size:.78rem; color:var(--text-dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Grand snapshot card ────────────────────────────────────── */
.dp-grand-card {
    background:linear-gradient(135deg,#081e25,#0d1f1f);
    border:1px solid rgba(76,201,172,.25) !important;
}
.dp-grand-return {
    font-family:var(--font-display);
    font-size:2rem; font-weight:900; color:var(--green); line-height:1;
}

/* ── AI prediction badge ────────────────────────────────────── */
.dp-pred-badge {
    font-family:var(--font-body);
    font-size:.65rem; background:var(--cyan-dim); color:var(--cyan);
    border:1px solid rgba(56,200,232,.2); border-radius:8px; padding:.02rem .3rem;
}


/* ════════════════════════════════════════════════════════════════
   GG-  GET A GRAND CALCULATOR  (daily-punt.php grand section)
════════════════════════════════════════════════════════════════ */

/* ── Controls panel ─────────────────────────────────────────── */
.gg-controls {
    background:var(--rp-s2);
    border:1px solid var(--border-dim);
    border-radius:var(--radius);
    padding:1.2rem 1.4rem; margin-bottom:1.5rem;
}
.gg-controls-inner {
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem;
}
.gg-field { display:flex; flex-direction:column; gap:.35rem; }
.gg-field label {
    font-family:var(--font-body);
    font-size:.75rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-dim);
}

/* Stake pills */
.stake-pills { display:flex; gap:.4rem; flex-wrap:wrap; }
.stake-pill {
    font-family:var(--font-body);
    font-size:.82rem; font-weight:500;
    background:var(--rp-s3); border:1px solid var(--border-dim);
    color:var(--text-dim); border-radius:20px;
    padding:.35rem .85rem; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.stake-pill:hover,
.stake-pill.active {
    background:var(--gold-dim); border-color:var(--rp-gold); color:var(--rp-gold);
}

/* Target input */
.gg-target-wrap { position:relative; }
.gg-target-wrap .prefix {
    position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
    color:var(--rp-gold); font-family:var(--font-display);
    font-size:1rem; font-weight:700; pointer-events:none;
}
#targetInput, #calcTarget {
    background:var(--rp-s3); border:1px solid var(--border-dim);
    border-radius:8px; color:var(--text);
    font-family:var(--font-body); font-size:1rem; font-weight:500;
    padding:.45rem .75rem .45rem 1.75rem; width:130px;
    transition:border-color .15s;
    -moz-appearance:textfield;
}
#targetInput::-webkit-outer-spin-button,
#targetInput::-webkit-inner-spin-button,
#calcTarget::-webkit-outer-spin-button,
#calcTarget::-webkit-inner-spin-button { -webkit-appearance:none; }
#targetInput:focus, #calcTarget:focus {
    outline:none;
    border-color:var(--rp-gold);
    box-shadow:0 0 0 3px rgba(245,158,11,.15);
}

/* Buttons */
.gg-calc-btn {
    font-family:var(--font-body);
    font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    background:linear-gradient(135deg,var(--rp-gold),#c47d0a);
    color:#0c0c14; border:none; border-radius:8px;
    padding:.5rem 1.4rem; cursor:pointer; transition:all .2s; white-space:nowrap;
    box-shadow:0 4px 16px rgba(245,158,11,.2);
}
.gg-calc-btn:hover  { transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,158,11,.3); }
.gg-calc-btn:active { transform:translateY(0); }
.gg-calc-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.gg-refresh-btn {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--text-dim);
    background:none; border:1px solid rgba(255,255,255,.1);
    border-radius:6px; padding:.35rem .75rem;
    cursor:pointer; transition:all .15s;
}
.gg-refresh-btn:hover { color:var(--text); border-color:rgba(255,255,255,.25); }
.gg-timestamp {
    font-family:var(--font-body);
    font-size:.78rem; color:var(--text-dim); align-self:center; margin-left:auto;
}

/* ── Accumulator result cards (JS-built in buildCard()) ──────── */
.gg-card {
    background:var(--rp-s2);
    border:1px solid var(--border-dim);
    border-radius:var(--radius);
    overflow:hidden; margin-bottom:1rem; position:relative;
    animation:gg-card-in .35s ease both;
}
.gg-card:nth-child(2) { animation-delay:.08s; }
.gg-card:nth-child(3) { animation-delay:.16s; }
.gg-card::before {
    content:''; display:block; height:2px;
    background:linear-gradient(90deg,var(--rp-gold),transparent);
}
.gg-card.unavailable { opacity:.5; }

.gg-card-header {
    display:flex; align-items:center; gap:.8rem;
    padding:.9rem 1rem .5rem;
    border-bottom:1px solid rgba(245,158,11,.08);
}
.gg-leg-badge {
    font-family:var(--font-display);
    font-size:1.5rem; font-weight:900; color:var(--rp-gold); line-height:1; min-width:32px;
}
.gg-card-title { flex:1; }
.gg-card-title h3 {
    font-family:var(--font-display);
    font-size:.95rem; font-weight:700; color:var(--text); margin:0;
}
.gg-card-title .sub {
    font-family:var(--font-body);
    font-size:.78rem; color:var(--text-dim);
    letter-spacing:.06em; text-transform:uppercase; margin-top:.1rem;
}
.gg-return          { text-align:right; }
.gg-return .amount  { font-family:var(--font-display); font-size:1.3rem; font-weight:900; line-height:1; }
.gg-return.hits   .amount { color:var(--green); }
.gg-return.misses .amount { color:var(--red); }
.gg-return .label {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.06em;
}
.gg-return .shortfall {
    font-family:var(--font-body);
    font-size:.75rem; color:var(--red); margin-top:.1rem;
}

/* Legs */
.gg-legs { padding:.4rem .6rem .5rem; }
.gg-leg  {
    display:flex; align-items:center; gap:.5rem; padding:.4rem;
    border-radius:8px; font-family:var(--font-body); font-size:.78rem; transition:background .12s;
}
.gg-leg:hover { background:rgba(255,255,255,.03); }
.gg-leg-num {
    width:20px; height:20px; border-radius:50%;
    background:var(--gold-dim); border:1px solid rgba(245,158,11,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:700; color:var(--rp-gold); flex-shrink:0;
}
.gg-leg-detail { flex:1; min-width:0; }
.gg-leg-horse  {
    font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:flex; align-items:center; gap:.3rem;
}
.gg-leg-race {
    color:var(--text-dim); font-size:.78rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gg-leg-odds {
    font-weight:700; color:var(--gold-lt); white-space:nowrap; font-size:.8rem; flex-shrink:0;
}
.gg-pred-tag {
    font-family:var(--font-body);
    font-size:.65rem; background:var(--cyan-dim); border:1px solid rgba(56,200,232,.25);
    color:var(--cyan); border-radius:10px; padding:.05rem .3rem;
    white-space:nowrap; flex-shrink:0;
}

/* Card footer */
.gg-card-footer {
    border-top:1px solid rgba(245,158,11,.08);
    padding:.55rem 1rem;
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.gg-footer-label {
    font-family:var(--font-body); font-size:.78rem; color:var(--text-dim);
}
.gg-bk-btn {
    font-family:var(--font-body);
    font-size:.75rem; font-weight:700;
    background:linear-gradient(135deg,var(--rp-gold),#c47d0a);
    color:#0c0c14; border:none; border-radius:20px;
    padding:.28rem .85rem; cursor:pointer;
    text-decoration:none; transition:opacity .15s; white-space:nowrap;
}
.gg-bk-btn:hover { opacity:.85; color:#0c0c14; }
.gg-unavail-msg {
    padding:.8rem 1rem;
    font-family:var(--font-body); font-size:.78rem;
    color:var(--text-dim); font-style:italic;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS — Grand History + Personality Form
   Append to punts.css  (/assets/css/punts.css)
════════════════════════════════════════════════════════════════ */

/* ── Grand History list ─────────────────────────────────────── */
.dp-hist-list { display:flex; flex-direction:column; }

.dp-hist-row {
    display:flex; align-items:flex-start;
    justify-content:space-between; gap:.6rem;
    padding:.55rem 0;
    border-bottom:1px solid var(--border-dim);
}
.dp-hist-row:last-child { border-bottom:none; }

/* Category colour cues on the day label */
.dp-hist-win     .dp-hist-day { color:var(--green); }
.dp-hist-near    .dp-hist-day { color:var(--rp-gold); }
.dp-hist-partial .dp-hist-day { color:var(--text); }

.dp-hist-meta { flex:1; min-width:0; }

.dp-hist-day {
    font-family:var(--font-body);
    font-size:.78rem; font-weight:700;
    color:var(--text); display:block; margin-bottom:.2rem;
}

/* Horse names strip */
.dp-hist-horses {
    display:flex; flex-wrap:wrap; gap:.25rem; align-items:center;
}
.dp-hist-horse {
    font-family:var(--font-body);
    font-size:.65rem; color:var(--rp-muted);
    max-width:72px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}
.dp-hist-horse.won    { color:var(--green); font-weight:600; }
.dp-hist-horse.placed { color:var(--rp-gold); font-weight:600; }

/* Dot separator between horses via CSS */
.dp-hist-horse + .dp-hist-horse::before {
    content:'·';
    margin-right:.2rem;
    color:var(--rp-s3);
}

/* Result column */
.dp-hist-result { flex-shrink:0; text-align:right; }

.dp-hist-badge {
    font-family:var(--font-body);
    display:inline-block; font-size:.65rem; font-weight:700;
    border-radius:999px; padding:.12rem .48rem;
    letter-spacing:.04em; white-space:nowrap;
}
.dp-hist-hit {
    background:var(--green-dim); color:var(--green);
    border:1px solid rgba(62,207,108,.3);
}
.dp-hist-near-badge {
    background:rgba(245,158,11,.15); color:var(--rp-gold);
    border:1px solid rgba(245,158,11,.3);
}
.dp-hist-miss {
    background:var(--rp-s3); color:var(--rp-muted);
    border:1px solid var(--border-dim);
}
.dp-hist-na {
    background:var(--rp-s3); color:var(--rp-muted);
}

.dp-hist-return {
    font-family:var(--font-display);
    font-size:.88rem; font-weight:800; color:var(--green);
    line-height:1.2; margin-top:.2rem;
}
.dp-hist-frame {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--rp-gold);
    font-weight:600; margin-top:.2rem;
}
.dp-hist-odds {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--rp-muted);
    margin-top:.2rem;
}

/* ── Personality Form rows ──────────────────────────────────── */
.dp-form-row {
    padding:.65rem 0;
    border-bottom:1px solid var(--border-dim);
}
.dp-form-row:last-child { border-bottom:none; }

.dp-form-icon {
    font-size:1.1rem; line-height:1; flex-shrink:0;
}
.dp-form-name {
    font-family:var(--font-body);
    font-size:.82rem; font-weight:700; color:var(--text);
}
.dp-form-stats {
    font-family:var(--font-body);
    font-size:.72rem; color:var(--rp-muted);
    display:flex; align-items:center; gap:.3rem; margin-top:.1rem;
}
.dp-form-sep { color:var(--rp-s3); }

/* Strike rate display — right side */
.dp-form-rate {
    text-align:right; flex-shrink:0;
    font-family:var(--font-display);
    font-size:.95rem; font-weight:800; line-height:1.1;
}
.dp-form-rate.accent-gold  { color:var(--gold); }
.dp-form-rate.accent-green { color:var(--green); }
.dp-form-rate.accent-cyan  { color:var(--cyan); }

.dp-form-rate-row {
    display:flex; align-items:center; justify-content:flex-end;
    gap:.2rem; margin-top:.15rem;
}
.dp-form-rate-7d {
    font-family:var(--font-body);
    font-size:.65rem; color:var(--rp-muted); font-weight:500;
}

/* Progress bar */
.dp-form-bar-wrap {
    height:.25rem; background:var(--rp-s3);
    border-radius:999px; overflow:hidden;
}
.dp-form-bar {
    height:100%; border-radius:999px;
    width:var(--w, 0%);
    animation:rpBarGrow .65s ease both;
}
.dp-form-bar.accent-gold  { background:linear-gradient(90deg,var(--gold),var(--gold-lt)); }
.dp-form-bar.accent-green { background:linear-gradient(90deg,var(--green),#6ee7a0); }
.dp-form-bar.accent-cyan  { background:linear-gradient(90deg,var(--cyan),#7de8f5); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .dp-sidebar-scroll {
        display:flex; overflow-x:auto; gap:.6rem; padding-bottom:.5rem;
        -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .dp-sidebar-scroll::-webkit-scrollbar { display:none; }
    .dp-sidebar-scroll .punt-card,
    .dp-sidebar-scroll .dp-scard { flex:0 0 180px; margin-bottom:0; }
}

@media (max-width: 767px) {
    .dp-hero        { margin-left:0; }
    .dp-ticker      { margin-left:0; }
    .top-nav-content{ margin-left:0; }
}