/* The betting card — shared by the home page grid and the chart page.
   Extracted from Views/Home/Index.cshtml so the chart page could carry a live card
   instead of a read-only list, without the two copies drifting apart. */

/* ---------- round selector ----------
   A native select cannot be restyled past its own box, so the work goes into the box:
   a proper field look, a custom arrow, and readable option groups. */
.round-select-wrap { position: relative; }

.round-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border-radius: .5rem;
    border: 1px solid #4b5563;
    background: linear-gradient(180deg, #374151, #2b3444);
    color: #f3f4f6;
    padding: .6rem 2.2rem .6rem .75rem;
    font-size: .875rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.round-select:hover { border-color: #6b7280; }
.round-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

.round-select-arrow {
    position: absolute; right: .8rem; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .7rem;
    color: #9ca3af;
    transition: transform .2s;
}
.round-select-wrap:focus-within .round-select-arrow { transform: translateY(-50%) rotate(180deg); }

/* The dropdown list itself is drawn by the OS; only these two carry over. */
.round-select optgroup { background: #1f2937; color: #93c5fd; font-weight: 600; }
.round-select option   { background: #111827; color: #e5e7eb; padding: .4rem; }

/* ---------- custom round dropdown ----------
   The native picker is unusable on a phone here: each option carries a duration, a start
   and an end, and the OS wraps that into rows tall enough to fill the screen. The select
   stays as the source of truth — every listener already bound to its change event keeps
   working — and this is drawn over the top of it.

   Only enhanced when the script runs; without it the plain select is still there. */
.rs { position: relative; }
.rs .round-select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.rs[hidden] { display: none; }

.rs-trigger {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; text-align: left;
    border-radius: .6rem;
    border: 1px solid #4b5563;
    background: linear-gradient(180deg, #374151, #2b3444);
    color: #f3f4f6;
    padding: .55rem .75rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.rs-trigger:hover { border-color: #6b7280; }
.rs-trigger:focus-visible {
    outline: none; border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
.rs-trigger__text { min-width: 0; flex: 1; }
.rs-trigger__label { display: block; font-size: .875rem; font-weight: 600; line-height: 1.2; }
.rs-trigger__sub {
    display: block; font-size: .7rem; color: #9ca3af; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-trigger__chev { font-size: .7rem; color: #9ca3af; transition: transform .2s; }
.rs[data-open="true"] .rs-trigger__chev { transform: rotate(180deg); }

.rs-panel {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + .35rem);
    max-height: 17rem; overflow-y: auto;
    border-radius: .6rem;
    border: 1px solid #4b5563;
    background: #111827;
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
    padding: .3rem;
}
.rs[data-open="false"] .rs-panel,
.rs[data-open="false"] .rs-backdrop { display: none; }

.rs-group {
    padding: .45rem .6rem .25rem;
    font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #93c5fd;
}

/* A rule above every group but the first, so Today / This week / Long term read as
   separate blocks rather than one continuous list. */
.rs-group + .rs-opt ~ .rs-group,
.rs-group:not(:first-child) {
    margin-top: .35rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(75,85,99,.55);
}

.rs-opt {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; text-align: left;
    border: 0; background: transparent; color: #e5e7eb;
    border-radius: .45rem;
    padding: .5rem .6rem;
    cursor: pointer;
}
.rs-opt:hover, .rs-opt:focus-visible { background: #1f2937; outline: none; }
.rs-opt[aria-selected="true"] { background: rgba(59,130,246,.16); color: #bfdbfe; }
.rs-opt__text { min-width: 0; flex: 1; }
.rs-opt__label { display: block; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.rs-opt__sub { display: block; font-size: .7rem; color: #9ca3af; line-height: 1.3; }
.rs-opt__tick { font-size: .7rem; color: #60a5fa; opacity: 0; }
.rs-opt[aria-selected="true"] .rs-opt__tick { opacity: 1; }

.rs-backdrop { display: none; }

/* On a phone it becomes a sheet: the list is the thing being chosen from, so it gets the
   bottom of the screen and touch-sized rows instead of a cramped popover. */
@media (max-width: 639px) {
    .rs-backdrop {
        position: fixed; inset: 0; z-index: 45;
        background: rgba(0,0,0,.6);
        display: block;
    }
    .rs-panel {
        position: fixed; z-index: 46;
        left: 0; right: 0; bottom: 0; top: auto;
        max-height: 70vh;
        border-radius: .9rem .9rem 0 0;
        border-bottom: 0;
        padding: .4rem .4rem calc(.6rem + env(safe-area-inset-bottom));
    }
    .rs-panel::before {
        content: ""; display: block;
        width: 2.5rem; height: .25rem; margin: .35rem auto .5rem;
        border-radius: 999px; background: #4b5563;
    }
    .rs-opt { padding: .7rem .75rem; }
    .rs-opt__label { font-size: .9rem; }
}

/* ---------- pool bars ---------- */
.pool-bar {
    display: flex; height: 1rem; width: 100%;
    overflow: hidden; border-radius: .35rem;
    background: #374151;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
/* Width and colour both ease, so a refresh slides rather than jumps. */
.pool-bar__up, .pool-bar__down { height: 100%; transition: width .7s cubic-bezier(.4,0,.2,1), filter .3s; }
.pool-bar__up   { background: linear-gradient(90deg,#34d399,#059669); }
.pool-bar__down { background: linear-gradient(90deg,#dc2626,#f87171); }
.pool-bar__up--soft   { background: linear-gradient(90deg,#6ee7b7,#34d399); }
.pool-bar__down--soft { background: linear-gradient(90deg,#f87171,#fca5a5); }

/* A bar that just changed brightens for a moment. */
.pool-bar__up.is-moved, .pool-bar__down.is-moved { filter: brightness(1.5); }

/* ---------- live numbers ---------- */
.live-num {
    display: inline-flex; align-items: center; gap: .2rem;
    font-variant-numeric: tabular-nums;
    border-radius: .25rem;
    padding: 0 .15rem;
    transition: color .4s, background-color .4s;
}
.live-num__arrow { font-size: .65em; line-height: 1; }

.live-num.is-up   { color: #34d399; background: rgba(16,185,129,.14); animation: numPulse .9s ease-out; }
.live-num.is-down { color: #f87171; background: rgba(239,68,68,.14);  animation: numPulse .9s ease-out; }

@keyframes numPulse {
    0%   { transform: translateY(-2px) scale(1.06); }
    60%  { transform: translateY(0) scale(1); }
    100% { transform: none; }
}

/* Deliberately small and quiet — it must not compete with the two bet buttons. */
.chart-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    flex-shrink: 0;
    border-radius: .5rem;
    border: 1px solid #4b5563;
    padding: .35rem .6rem;
    font-size: .75rem; font-weight: 600;
    color: #9ca3af;
    transition: border-color .2s, color .2s, background .2s;
}
.chart-btn:hover { border-color: #3b82f6; color: #93c5fd; background: rgba(59,130,246,.1); }

/* ---------- card ---------- */
.crypto-card {
    transition: transform .25s, box-shadow .25s, border-color .25s;
    border: 1px solid rgba(75,85,99,.35);
}
.crypto-card:hover {
    transform: translateY(-3px);
    border-color: rgba(59,130,246,.45);
    box-shadow: 0 20px 35px -25px rgba(59,130,246,.9);
}

/* The market filter buttons, so switching does not snap. */
.type-btn { transition: background-color .2s, color .2s, transform .1s; }
.type-btn:active { transform: scale(.97); }

/* Anyone who has asked their system for less motion gets none of this. */
@media (prefers-reduced-motion: reduce) {
    .pool-bar__up, .pool-bar__down, .live-num, .crypto-card, .type-btn { transition: none; }
    .live-num.is-up, .live-num.is-down { animation: none; }
}