/* ============================================================
   RatSignal — Prediction-market ("Bets") product styles
   Palette: the site's existing cyan (--accent-cyan #06B6D4).
   No new brand colour. 2026-09-28
   ============================================================ */
:root {
    --bets: var(--accent-cyan, #06B6D4);
    --bets-strong: #0891b2;
    --bets-soft: rgba(6, 182, 212, 0.14);
    --bets-line: rgba(6, 182, 212, 0.32);
    --bets-glow: rgba(6, 182, 212, 0.22);
    --bets-card: #0e2136;
    --bets-border: #1c3a55;
}

/* ---------- section divider on the homepage ---------- */
.bets-divider {
    display: flex; align-items: center; gap: 14px;
    max-width: 1200px; margin: 56px auto 8px; padding: 0 24px;
    color: var(--text-muted, #55556a);
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 1px;
}
.bets-divider:before, .bets-divider:after { content: ''; flex: 1; height: 1px; background: var(--border, #1a2d4a); }

.bets-section { padding: 24px 24px 60px; max-width: 1200px; margin: 0 auto; }
.bets-section .section-tag { color: var(--bets); }
.bets-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.bets-intro { flex: 1 1 380px; max-width: 560px; color: var(--text-secondary, #8888a0); font-size: 0.98rem; line-height: 1.75; padding-top: 4px; }
.bets-intro h3 { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; color: var(--text-primary, #f0f0f5); margin: 0 0 10px; }
.bets-intro b { color: var(--text-primary, #f0f0f5); }
.bets-intro .hl { color: var(--bets); font-weight: 600; }
.bets-intro .mono { font-family: 'JetBrains Mono', monospace; color: var(--text-primary, #f0f0f5); font-size: 0.9rem; }
.bets-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn-bets {
    display: inline-block; background: linear-gradient(135deg, var(--bets-strong), var(--bets));
    color: #fff !important; padding: 11px 18px; border-radius: 9px; font-weight: 600; font-size: 0.9rem;
    text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 6px 20px var(--bets-glow); transition: transform .2s, box-shadow .2s;
}
.btn-bets:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--bets-glow); }
.btn-bets[disabled], .btn-bets.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-bets-ghost {
    display: inline-block; border: 1px solid var(--bets-line); color: var(--bets) !important; padding: 10px 16px;
    border-radius: 9px; font-size: 0.9rem; text-decoration: none; background: transparent;
}
.btn-bets-ghost:hover { background: var(--bets-soft); }

/* ---------- the bet-slip card ---------- */
.bet-slip {
    background: var(--bets-card); border: 1px solid var(--bets-border); border-radius: 14px;
    width: 320px; position: relative; overflow: visible; flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(6,182,212,.06), 0 10px 30px rgba(0,0,0,.35);
    transition: transform .25s, border-color .25s;
}
.bet-slip:hover { transform: translateY(-2px); border-color: var(--bets-line); }
.bet-slip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--bets-strong), var(--bets), #67e8f9); box-shadow: 0 0 18px var(--bets-glow); }
.bet-slip .bs-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 10px; }
.bs-badge {
    display: inline-flex; align-items: center; gap: 6px; background: var(--bets-soft); border: 1px solid var(--bets-line);
    color: var(--bets); font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
}
.bs-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--bets); display: inline-block; }
.bs-status { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--bets); }
.bs-status .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bets); animation: pulse 2s infinite; }
.bs-status.live { color: var(--accent-green, #00e676); } .bs-status.live .status-dot { background: var(--accent-green, #00e676); }
.bs-status.paused { color: var(--accent-red, #ff4757); } .bs-status.paused .status-dot { background: var(--accent-red, #ff4757); animation: none; }
.bet-slip .bs-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.98rem; padding: 0 20px 6px; color: var(--text-primary, #f0f0f5); }
.bet-slip .bs-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 20px 12px; }
.bs-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; padding: 8px 10px; }
.bs-stat b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--text-primary, #f0f0f5); }
.bs-stat b.good { color: var(--accent-green, #00e676); } .bs-stat b.bad { color: var(--accent-red, #ff4757); } .bs-stat b.na { color: var(--text-muted, #55556a); }
.bs-stat span { font-size: 0.62rem; color: var(--text-secondary, #8888a0); text-transform: uppercase; letter-spacing: .6px; }
.bs-tear { border-top: 2px dashed var(--bets-border); position: relative; margin: 4px 0; }
.bs-tear:before, .bs-tear:after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-dark, #0a1628); }
.bs-tear:before { left: -9px; } .bs-tear:after { right: -9px; }
.bs-streak { display: flex; gap: 4px; padding: 10px 20px 4px; flex-wrap: wrap; }
.bs-streak i { width: 14px; height: 14px; border-radius: 3px; background: var(--accent-green, #00e676); display: inline-block; }
.bs-streak i.l { background: var(--accent-red, #ff4757); } .bs-streak i.p { background: var(--bets-border); }
.bs-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 20px; }
.bs-chip { font-size: 0.7rem; color: #a5f3fc; background: var(--bets-soft); border: 1px solid rgba(6,182,212,.28); padding: 3px 9px; border-radius: 999px; }
.bet-slip .bs-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 20px 16px; font-size: 0.74rem; color: var(--text-secondary, #8888a0); }
.bet-slip .bs-cta { background: linear-gradient(135deg, var(--bets-strong), var(--bets)); color: #fff !important; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 0.76rem; text-decoration: none; white-space: nowrap; }

/* ---------- /bets page ---------- */
.bets-hero { max-width: 1100px; margin: 0 auto; padding: 10px 0 26px; }
.bets-hero .section-tag { color: var(--bets); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 1px; }
.bets-hero h1 { font-family: 'Orbitron', sans-serif; font-size: 1.9rem; margin: 6px 0 10px; color: var(--text-primary, #f0f0f5); }
.bets-hero p { color: var(--text-secondary, #8888a0); font-size: 1rem; max-width: 760px; }
.bets-wrap { max-width: 1100px; margin: 0 auto; }
.bets-h2 { font-family: 'Orbitron', sans-serif; font-size: 1.15rem; margin: 40px 0 16px; color: var(--text-primary, #f0f0f5); }
.bets-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bets-step { background: var(--bets-card); border: 1px solid var(--bets-border); border-radius: 14px; padding: 22px 20px 18px; position: relative; }
.bets-step.hot { border-color: var(--bets); box-shadow: 0 0 0 3px var(--bets-soft); }
.bets-step .n { position: absolute; top: -14px; left: 18px; background: linear-gradient(135deg, var(--bets-strong), var(--bets)); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 600; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bets-step h4 { margin: 4px 0 8px; font-size: 0.98rem; color: var(--text-primary, #f0f0f5); }
.bets-step p { font-size: 0.84rem; color: var(--text-secondary, #8888a0); line-height: 1.6; }
.bets-step .fine { font-size: 0.74rem; color: var(--text-muted, #55556a); margin-top: 8px; }
.bets-field { background: rgba(255,255,255,.03); border: 1px solid var(--bets-border); border-radius: 9px; padding: 9px 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; margin: 6px 0 8px; color: var(--text-primary, #f0f0f5); }
.bets-label { font-size: 0.68rem; color: var(--text-secondary, #8888a0); text-transform: uppercase; letter-spacing: .6px; }
.bets-ex { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bets-ex .c { font-size: 0.74rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bets-border); color: #a5f3fc; background: var(--bets-soft); }
.bets-ex .c.off { color: var(--text-muted, #55556a); background: transparent; text-decoration: line-through; }
.bets-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.bets-panel { background: var(--bets-card); border: 1px solid var(--bets-border); border-radius: 14px; padding: 18px 20px; }
.bets-panel h4 { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; margin: 0 0 8px; color: var(--text-primary, #f0f0f5); }
.bets-panel p, .bets-panel li { font-size: 0.86rem; color: var(--text-secondary, #8888a0); line-height: 1.65; }
.bets-panel ul { padding-left: 18px; margin: 0; }
.bets-note { margin-top: 26px; font-size: 0.8rem; color: var(--text-muted, #55556a); }

@media (max-width: 900px) {
    .bets-steps { grid-template-columns: 1fr 1fr; }
    .bets-two { grid-template-columns: 1fr; }
    .bet-slip { width: 100%; }
}
@media (max-width: 560px) { .bets-steps { grid-template-columns: 1fr; } }

/* ============================================================
   v2 (2026-09-28): "arena" layout for the homepage section
   ============================================================ */
.bets-center { text-align: center; max-width: 820px; margin: 0 auto 28px; }
.bets-center .section-tag { color: var(--bets); }
.bets-center .section-title { margin-bottom: 8px; }
.bets-center .section-title .cy { color: var(--bets); }
.bets-center p { color: var(--text-secondary, #8888a0); font-size: 1rem; line-height: 1.7; margin: 0 auto; max-width: 720px; }

.bets-arena {
    position: relative; border: 1px solid var(--bets-border); border-radius: 22px; overflow: hidden;
    padding: 34px 34px 30px;
    background:
        radial-gradient(900px 340px at 18% 0%, rgba(6,182,212,.16), transparent 60%),
        radial-gradient(700px 300px at 92% 100%, rgba(6,182,212,.10), transparent 60%),
        linear-gradient(180deg, #0d1f35, #0a1628);
}
.bets-arena::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(6,182,212,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,.07) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.bets-arena > * { position: relative; }
.bets-arena-grid { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: start; }
.bets-arena .bet-slip { width: 100%; }

.bets-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bets-tile { background: rgba(255,255,255,.03); border: 1px solid var(--bets-border); border-radius: 14px; padding: 16px 16px 14px; min-height: 128px; position: relative; }
.bets-tile .k { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--bets); letter-spacing: 1px; }
.bets-tile h4 { margin: 6px 0 6px; font-size: 0.98rem; color: var(--text-primary, #f0f0f5); }
.bets-tile p { font-size: 0.82rem; color: var(--text-secondary, #8888a0); line-height: 1.55; margin: 0; }
.bets-tile.hot { border-color: var(--bets-line); box-shadow: inset 0 0 0 1px rgba(6,182,212,.18), 0 0 26px var(--bets-glow); }

.bets-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.bets-cat { display: flex; align-items: center; gap: 10px; background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.25); border-radius: 12px; padding: 10px 12px; }
.bets-cat .ic { font-size: 1.35rem; line-height: 1; }
.bets-cat b { display: block; font-size: 0.86rem; color: var(--text-primary, #f0f0f5); }
.bets-cat span { font-size: 0.68rem; color: var(--text-secondary, #8888a0); text-transform: uppercase; letter-spacing: .5px; }
.bets-cats-note { font-size: 0.74rem; color: var(--text-muted, #55556a); margin-top: 8px; }
.bets-arena .bets-actions { margin-top: 18px; }

.bets-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.bets-fact { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border, #1a2d4a); border-radius: 12px; background: var(--bg-card, #0f1f35); }
.bets-fact .ic { font-size: 1.3rem; line-height: 1; color: var(--bets); }
.bets-fact b { display: block; font-size: 0.9rem; color: var(--text-primary, #f0f0f5); margin-bottom: 2px; }
.bets-fact span { font-size: 0.8rem; color: var(--text-secondary, #8888a0); line-height: 1.5; }

@media (max-width: 980px) {
    .bets-arena-grid { grid-template-columns: 1fr; }
    .bets-tiles, .bets-facts { grid-template-columns: 1fr; }
    .bets-cats { grid-template-columns: 1fr 1fr; }
    .bets-arena { padding: 24px 18px; }
}

/* ---- interactive streak (2026-09-28) ---- */
.bs-streak-label { padding: 10px 20px 0; font-size: 0.62rem; color: var(--text-secondary, #8888a0); text-transform: uppercase; letter-spacing: .6px; }
.bs-streak-label span { color: var(--text-muted, #55556a); text-transform: none; letter-spacing: 0; }
.bs-streak { padding-top: 6px; }
.bs-sq { position: relative; width: 16px; height: 16px; border-radius: 4px; display: inline-block; cursor: pointer; outline: none;
         background: var(--accent-green, #00e676); transition: transform .15s, box-shadow .15s; }
.bs-sq.l { background: var(--accent-red, #ff4757); }
.bs-sq.p { background: var(--bets-border); cursor: default; }
.bs-sq.w:hover, .bs-sq.w:focus { transform: scale(1.25); box-shadow: 0 0 10px rgba(0,230,118,.6); }
.bs-sq.l:hover, .bs-sq.l:focus { transform: scale(1.25); box-shadow: 0 0 10px rgba(255,71,87,.6); }
.bs-tip { display: none; position: absolute; bottom: calc(100% + 10px); width: 270px; z-index: 50;
          background: #0b1a2c; border: 1px solid var(--bets-line); border-radius: 10px; padding: 11px 13px;
          box-shadow: 0 14px 34px rgba(0,0,0,.55); text-align: left; cursor: default; }
.bs-sq.tip-l .bs-tip { left: -6px; } .bs-sq.tip-r .bs-tip { right: -6px; }
.bs-sq:hover .bs-tip, .bs-sq:focus .bs-tip { display: block; }
.bs-tip::after { content: ''; position: absolute; top: 100%; border: 7px solid transparent; border-top-color: var(--bets-line); }
.bs-sq.tip-l .bs-tip::after { left: 8px; } .bs-sq.tip-r .bs-tip::after { right: 8px; }
.bs-tip-res { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 5px; }
.bs-tip-res.w { color: var(--accent-green, #00e676); } .bs-tip-res.l { color: var(--accent-red, #ff4757); }
.bs-tip-title { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-primary, #f0f0f5); line-height: 1.35; margin-bottom: 8px; }
.bs-tip-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.72rem; padding: 2px 0; border-top: 1px solid rgba(255,255,255,.04); }
.bs-tip-row em { font-style: normal; color: var(--text-secondary, #8888a0); }
.bs-tip-row b { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--text-primary, #f0f0f5); text-align: right; }
.bs-tip-row b.w { color: var(--accent-green, #00e676); } .bs-tip-row b.l { color: var(--accent-red, #ff4757); }