/* BuffStreams stylesheet */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg,#080e12);
    color:var(--text,#e6e8ec);
    font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    font-size:16px;
    line-height:1.65;
}
a{color:var(--accent,#2b6ef2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- header ---------- */
header{
    position:sticky;top:0;z-index:50;
    background:var(--icle,#0c161c);
    border-bottom:1px solid var(--border,#262b35);
}
.header-inner{
    max-width:1100px;margin:0 auto;padding:12px 16px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.logo{font-size:24px;font-weight:700;color:#fff;letter-spacing:.3px}
.logo span{color:#e8ff00}
.logo:hover{text-decoration:none}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{
    padding:8px 14px;border-radius:6px;color:var(--text,#e6e8ec);font-weight:500;
}
nav a:hover{background:var(--card,#000);text-decoration:none}

/* ---------- layout ---------- */
main{max-width:1100px;margin:0 auto;padding:24px 16px 48px}
#article h1{font-size:clamp(26px,4.5vw,38px);line-height:1.2;margin:8px 0 16px}
#article h2{font-size:clamp(21px,3.2vw,28px);margin:36px 0 12px;padding-top:6px}
#article h3{font-size:19px;margin:22px 0 8px}
#article p{margin:0 0 14px;color:var(--muted,#f9fbfd)}
#article ul,#article ol{margin:0 0 16px;padding-left:22px}
#article li{margin-bottom:6px}

.watch-live-btn{
    display:inline-flex;align-items:center;gap:10px;
    margin:10px 0 8px;padding:14px 28px;
    background:var(--accent,#2b6ef2);color:#fff;font-weight:700;font-size:17px;
    border-radius:8px;letter-spacing:.4px;
}
.watch-live-btn:hover{filter:brightness(1.12);text-decoration:none}

/* ---------- player ---------- */
.player-section{
    margin:24px 0;background:var(--card,#000);
    border:1px solid var(--border,#262b35);border-radius:10px;overflow:hidden;
}
.iframe-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(78px,1fr));
    gap:8px;padding:10px;
    border-bottom:1px solid var(--border,#262b35);
}
.player-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.theatre_btn{
    display:block;text-align:center;padding:10px 12px;
    background:var(--icle,#0c161c);color:var(--text,#e6e8ec);
    border:1px solid var(--border,#262b35);border-radius:6px;
    font-weight:700;font-size:14px;cursor:pointer;
}
.theatre_btn:hover{background:#1c2a33;text-decoration:none}
.theatre_btn.active{background:var(--accent,#2b6ef2);border-color:var(--accent,#2b6ef2);color:#fff}
.theatre_btn.disabled{opacity:.4;cursor:not-allowed;background:#333}
.theatre_btn.wide{grid-column:1/-1}

/* ---------- schedule ---------- */
#schedule{scroll-margin-top:80px}
.sport-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.sport-tab{
    padding:9px 16px;background:var(--icle,#0c161c);color:var(--text,#e6e8ec);
    border:1px solid var(--border,#262b35);border-radius:6px;
    font:inherit;font-weight:700;font-size:14px;cursor:pointer;
}
.sport-tab:hover{background:#1c2a33}
.sport-tab.active{background:var(--accent,#2b6ef2);border-color:var(--accent,#2b6ef2);color:#fff}

.sport-panel[hidden]{display:none}
.schedule-empty{padding:16px 4px;margin:0}
.table-wrapper{overflow-x:auto}
.ppvs-schedule-wrapper table{width:100%;border-collapse:collapse;background:#0c161c;}
.ppvs-schedule-wrapper td{padding:12px 8px;border-bottom:1px solid var(--border,#262b35);vertical-align:middle}
.ppvs-schedule-wrapper tr:last-child td{border-bottom:0}
.home-team{text-align:right;font-weight:500}
.away-team{text-align:left;font-weight:500}
.vs{text-align:center;white-space:nowrap;min-width:78px}
.game_time{display:block;font-weight:700}
.main_vs{font-size:12px;opacity:.55}
.schedule_date{display:block;font-size:12px;opacity:.7}
.watch-cell{text-align:right;width:1%;white-space:nowrap}
.watch_btn{
    padding:8px 16px;background:var(--accent,#2b6ef2);color:#fff;
    border:0;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;
}
.watch_btn:hover{filter:brightness(1.12)}
@keyframes blinkLive{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.game_time.live-blink{color:#ff3b3b;animation:blinkLive 1s infinite}

/* ---------- table (Free vs Paid) ---------- */
#article table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
#article th,#article td{padding:10px 12px;border:1px solid var(--border,#262b35);text-align:cente;}
#article th{background:var(--icle,#0c161c)}

/* ---------- FAQ ---------- */
.faq-item{
    background:var(--icle,#0c161c);border:1px solid var(--border,#262b35);
    border-radius:8px;padding:14px 16px;margin-bottom:10px;
}
.faq-item h3{margin:0 0 6px;font-size:17px}
.faq-item p{margin:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border,#262b35);background:var(--icle,#0c161c)}
.footer-inner{max-width:1100px;margin:0 auto;padding:22px 16px}
.footer-inner p{margin:0}

/* ---------- mobile ---------- */
@media (max-width:640px){
    .header-inner{padding:10px 12px}
    nav a{padding:6px 10px;font-size:14px}
    main{padding:16px 12px 36px}
    .ppvs-schedule-wrapper td{padding:10px 4px;font-size:13px}
    .vs{min-width:60px}
    .watch_btn{padding:7px 10px}
    .iframe-links{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:6px;padding:8px}
    .theatre_btn{padding:9px 6px;font-size:13px}
    #article table{font-size:13px}
    #article th,#article td{padding:8px}
}