/* ============================================
   Bhutan Teer — Public Styles v3.1
   Unique Green/Gold Bhutan Archery Theme
   ============================================ */

/* ── VARIABLES ── */
:root {
    --bt-g900: #062E1F;
    --bt-g800: #0A4B33;
    --bt-g700: #0F6B48;
    --bt-g600: #148A5E;
    --bt-g500: #1AAF78;
    --bt-g400: #34D399;
    --bt-g100: #D1FAE5;
    --bt-g50: #ECFDF5;
    --bt-gold-600: #CA8A04;
    --bt-gold-500: #EAB308;
    --bt-gold-400: #FACC15;
    --bt-gold-100: #FEF9C3;
    --bt-bg: #F0F2F5;
    --bt-white: #FFFFFF;
    --bt-dark: #1B2A3D;
    --bt-mid: #475569;
    --bt-light: #94A3B8;
    --bt-border: #E2E8F0;
}

/* =============================================
   TODAY'S RESULT CARD
   ============================================= */
.bt-result-card {
    background: var(--bt-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(10, 75, 51, 0.10);
    border: 1px solid var(--bt-border);
    margin-bottom: 16px;
}

.bt-rc-header {
    background: linear-gradient(135deg, var(--bt-g800) 0%, var(--bt-g700) 100%);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-rc-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.bt-rc-date {
    color: var(--bt-gold-400);
    font-size: 0.82rem;
    font-weight: 600;
}

.bt-rc-timebar {
    background: linear-gradient(135deg, var(--bt-g400), var(--bt-g500));
    color: var(--bt-g900);
    text-align: center;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.bt-rc-timebar strong {
    font-weight: 800;
}

.bt-rc-rounds-label {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    border-bottom: 1px solid var(--bt-border);
}

.bt-rc-rl {
    padding: 10px 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bt-g700);
    letter-spacing: 0.02em;
}

.bt-rc-rl:first-child {
    border-right: 1px solid var(--bt-border);
}

.bt-rc-results {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 90px;
}

.bt-rc-val {
    text-align: center;
    padding: 20px 12px;
}

.bt-rc-divider {
    width: 1px;
    height: 60px;
    background: var(--bt-border);
}

.bt-rc-num {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--bt-g800);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bt-rc-num.bt-rc-await {
    color: var(--bt-light);
    font-size: 2.4rem;
}

.bt-rc-num.bt-rc-loading {
    font-size: 1rem;
    color: var(--bt-light);
}

.bt-loading-gif {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

/* =============================================
   COUNTDOWN
   ============================================= */
.bt-countdown {
    background: var(--bt-white);
    border: 1px solid var(--bt-g100);
    border-left: 4px solid var(--bt-g500);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin-bottom: 14px;
}

.bt-cd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bt-cd-icon {
    font-size: 18px;
}

.bt-cd-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bt-g600);
}

.bt-cd-timer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bt-cd-block {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.bt-cd-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--bt-g800);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bt-cd-unit {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bt-mid);
    text-transform: uppercase;
}

.bt-cd-sep {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bt-g400);
    animation: bt-blink 1s step-end infinite;
}

@keyframes bt-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.bt-cd-live {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bt-gold-600);
    animation: bt-pulse 2s ease-in-out infinite;
}

@keyframes bt-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.bt-cd-sub {
    font-size: 0.72rem;
    color: var(--bt-light);
    margin-top: 6px;
}

/* =============================================
   GAME OFF / EVENT
   ============================================= */
.bt-game-off {
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: #dc2626;
    background: #fef2f2;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bt-game-off-icon {
    font-size: 1.1rem;
}

.bt-event-msg {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bt-gold-600);
    background: var(--bt-gold-100);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #FDE68A;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bt-event-icon {
    font-size: 1rem;
}

/* ── DATE BADGE ── */
.trs-result-date {
    display: inline;
    background: transparent;
    color: var(--bt-mid);
    font-weight: 600;
    font-size: 12px;
}

/* =============================================
   PREVIOUS RESULTS TABLE
   ============================================= */
.bt-prev-table {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bt-border);
    background: var(--bt-white);
}

table.bt-table {
    width: 100%;
    border-collapse: collapse;
}

table.bt-table thead tr {
    background: var(--bt-g800);
}

table.bt-table thead th {
    padding: 12px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    text-align: center;
}

table.bt-table thead th:first-child {
    text-align: left;
    padding-left: 18px;
}

table.bt-table thead th span {
    color: var(--bt-gold-400);
}

table.bt-table tbody tr {
    border-bottom: 1px solid var(--bt-border);
    transition: background 0.15s ease;
}

table.bt-table tbody tr:last-child {
    border-bottom: none;
}

table.bt-table tbody tr:hover {
    background: var(--bt-g50);
}

table.bt-table tbody tr.bt-row-today {
    background: var(--bt-g50);
}

.bt-td-date {
    padding: 12px 14px;
    padding-left: 18px;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bt-dark);
}

.bt-td-day {
    padding: 12px 14px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--bt-mid);
    font-weight: 500;
}

.bt-td-result {
    padding: 10px 14px;
    text-align: center;
}

.bt-td-event {
    padding: 12px 14px;
    text-align: center;
    color: var(--bt-gold-600);
    font-weight: 600;
    font-size: 0.82rem;
    font-style: italic;
}

.bt-result-pill {
    display: inline-block;
    background: linear-gradient(135deg, var(--bt-g800), var(--bt-g700));
    color: var(--bt-gold-400);
    font-weight: 800;
    font-size: 1rem;
    padding: 5px 16px;
    border-radius: 8px;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    min-width: 48px;
}

.bt-result-empty {
    color: var(--bt-light);
    font-size: 0.9rem;
}

.bt-badge-today {
    display: inline-block;
    background: var(--bt-gold-500);
    color: var(--bt-g900);
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 4px;
}

/* =============================================
   COMMON NUMBERS
   ============================================= */
.bt-common {
    width: 100%;
}

/* Top row: House + Ending pills */
.bt-common-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.bt-common-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bt-white);
    border: 1px solid var(--bt-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bt-pill-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.bt-pill-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bt-light);
    margin-bottom: 2px;
}

.bt-pill-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--bt-g700);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* FR / SR Target cards */
.bt-common-targets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bt-target-card {
    background: linear-gradient(135deg, var(--bt-g800), var(--bt-g700));
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.bt-target-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bt-target-badge {
    background: var(--bt-gold-500);
    color: var(--bt-g900);
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.bt-target-nums {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.bt-target-num {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 8px;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
}

.bt-target-num.bt-target-pending {
    color: rgba(255,255,255,0.3);
}

.bt-disclaimer-sm {
    font-size: 0.65rem;
    color: var(--bt-light);
    text-align: center;
    margin-top: 12px;
}

/* =============================================
   LUCKY NUMBERS
   ============================================= */
.bt-lucky {
    width: 100%;
}

.bt-lucky-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bt-lucky-chip {
    background: var(--bt-white);
    border: 1px solid var(--bt-border);
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bt-lucky-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 75, 51, 0.1);
}

.bt-lucky-emoji {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.bt-lucky-val {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--bt-g800);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.bt-lucky-val.bt-lucky-pending {
    color: var(--bt-light);
}

.bt-lucky-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bt-g600);
}

/* ── UPDATE TIME ── */
.bt-update-time {
    display: inline-block;
    color: var(--bt-mid);
    padding: 4px 12px;
    font-size: 0.7rem;
    border: 1px solid var(--bt-border);
    border-radius: 20px;
    font-weight: 600;
    opacity: 0.8;
}

.bt-update-time:hover {
    opacity: 1;
    border-color: var(--bt-g500);
    color: var(--bt-g700);
}

/* =============================================
   STATISTICS
   ============================================= */
.bt-stats {
    margin-bottom: 16px;
}

.bt-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bt-stat {
    background: var(--bt-white);
    border: 1px solid var(--bt-border);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.bt-stat-val {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bt-g800);
    line-height: 1.2;
}

.bt-stat-lbl {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bt-light);
    margin-top: 4px;
}

/* =============================================
   CALENDAR VIEW
   ============================================= */
.bt-calendar-view {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.bt-month-cal {
    flex: 1 1 480px;
    background: var(--bt-white);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--bt-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.bt-month-cal h4 {
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bt-g900);
    margin: 0 0 12px;
}

.bt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--bt-border);
    padding: 1px;
    border-radius: 8px;
    overflow: hidden;
}

.bt-cal-head {
    background: var(--bt-g800);
    color: var(--bt-gold-400);
    padding: 8px 2px;
    text-align: center;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bt-cal-day {
    background: var(--bt-white);
    min-height: 58px;
    padding: 4px;
}

.bt-cal-day:hover {
    background: var(--bt-g50);
}

.bt-cal-day.bt-cal-empty {
    background: #fafafa;
}

.bt-cal-dn {
    display: block;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--bt-dark);
    margin-bottom: 2px;
}

.bt-cal-results {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.6rem;
}

.bt-cal-fr {
    display: block;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 700;
    background: rgba(26, 175, 120, 0.15);
    color: var(--bt-g700);
}

.bt-cal-sr {
    display: block;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 700;
    background: rgba(234, 179, 8, 0.12);
    color: var(--bt-gold-600);
}

.bt-cal-event {
    font-size: 0.5rem;
    color: var(--bt-gold-600);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
}

/* =============================================
   LIST VIEW
   ============================================= */
.bt-list-view {
    max-width: 760px;
    margin: 0 auto;
}

.bt-list-month {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--bt-g900);
    margin: 16px 0 8px;
    padding-bottom: 5px;
    border-bottom: 3px solid var(--bt-g500);
    display: inline-block;
}

.bt-list-group {
    margin-bottom: 16px;
}

.bt-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bt-border);
    transition: background 0.15s ease;
}

.bt-list-item:hover {
    background: var(--bt-g50);
}

.bt-list-date {
    color: var(--bt-mid);
    font-weight: 500;
    font-size: 0.82rem;
}

.bt-list-vals {
    display: flex;
    gap: 14px;
}

.bt-list-fr,
.bt-list-sr {
    font-size: 0.82rem;
    color: var(--bt-mid);
}

.bt-list-fr strong,
.bt-list-sr strong {
    color: var(--bt-g800);
    font-size: 0.95rem;
}

.bt-list-event {
    color: var(--bt-gold-600);
    font-weight: 600;
    font-size: 0.82rem;
}

/* ── NO DATA ── */
.bt-no-data {
    text-align: center;
    color: var(--bt-mid);
    font-size: 0.88rem;
    padding: 24px;
    background: var(--bt-g50);
    border-radius: 10px;
    border: 1px solid var(--bt-g100);
}

/* =============================================
   RESPONSIVE — TABLET
   ============================================= */
@media (max-width: 768px) {
    .bt-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .bt-lucky-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .bt-cal-day {
        min-height: 50px;
        padding: 3px;
    }

    .bt-cal-dn {
        font-size: 0.65rem;
    }

    .bt-cal-results {
        font-size: 0.55rem;
    }

    .bt-common-targets {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   RESPONSIVE — MOBILE
   ============================================= */
@media (max-width: 480px) {
    .bt-result-card {
        border-radius: 12px;
    }

    .bt-rc-header {
        padding: 12px 14px;
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .bt-rc-title {
        font-size: 1rem;
    }

    .bt-rc-date {
        font-size: 0.75rem;
    }

    .bt-rc-timebar {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .bt-rc-rl {
        font-size: 0.75rem;
        padding: 8px 6px;
    }

    .bt-rc-num {
        font-size: 2.2rem;
    }

    .bt-rc-num.bt-rc-await {
        font-size: 2rem;
    }

    .bt-rc-val {
        padding: 16px 8px;
    }

    /* Countdown */
    .bt-countdown {
        padding: 12px 14px;
    }

    .bt-cd-num {
        font-size: 1.6rem;
    }

    /* Table */
    table.bt-table thead th {
        font-size: 0.62rem;
        padding: 10px 8px;
    }

    .bt-td-date {
        font-size: 0.72rem;
        padding-left: 12px;
    }

    .bt-td-day {
        font-size: 0.7rem;
    }

    .bt-result-pill {
        font-size: 0.85rem;
        padding: 4px 10px;
        letter-spacing: 1.5px;
    }

    /* Common */
    .bt-common-top {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .bt-common-pill {
        padding: 10px 12px;
        gap: 8px;
    }

    .bt-pill-icon {
        font-size: 1.2rem;
    }

    .bt-pill-num {
        font-size: 1.4rem;
    }

    .bt-target-card {
        padding: 12px;
    }

    .bt-target-num {
        font-size: 1.1rem;
        padding: 6px 14px;
    }

    /* Lucky */
    .bt-lucky-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .bt-lucky-chip {
        padding: 10px 6px;
    }

    .bt-lucky-val {
        font-size: 1.3rem;
    }

    /* Stats */
    .bt-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .bt-stat {
        padding: 10px 8px;
    }

    .bt-stat-val {
        font-size: 1.2rem;
    }

    /* Calendar */
    .bt-cal-head {
        font-size: 0.55rem;
        padding: 5px 1px;
    }

    .bt-cal-day {
        min-height: 44px;
        padding: 2px;
    }

    .bt-cal-dn {
        font-size: 0.6rem;
    }

    .bt-cal-results {
        font-size: 0.5rem;
    }

    /* List */
    .bt-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 10px;
    }

    .bt-list-date {
        font-size: 0.75rem;
    }

    .bt-list-fr strong,
    .bt-list-sr strong {
        font-size: 0.88rem;
    }
}