/* Main page on Bootstrap 5. multiview.html keeps style.css, which the Android APK also bundles. */
:root{color-scheme:dark;--as-bg:#05070c;--as-panel:#0e121b;--as-panel-2:#141a26;--as-border:#232b3a;--as-muted:#9aa4b8;--as-cyan:#30e5ef;--as-pink:#ff5fa2;--as-yellow:#ffdb57;--as-red:#ff354f;--as-green:#3ddc97;
  --bs-body-bg:var(--as-bg);--bs-body-color:#f2f4f8;--bs-border-color:var(--as-border);--bs-body-font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif}
body{background:radial-gradient(1200px 500px at 85% -10%,#132544 0%,transparent 60%),var(--as-bg);background-attachment:fixed;min-height:100vh;font-size:15px}
a{color:var(--as-cyan)}
:focus-visible{outline:2px solid var(--as-cyan);outline-offset:3px}
.btn{--bs-btn-color:#e7eaf1;--bs-btn-bg:var(--as-panel-2);--bs-btn-border-color:var(--as-border);--bs-btn-hover-bg:#1c2433;--bs-btn-hover-border-color:var(--as-cyan);--bs-btn-hover-color:#fff;--bs-btn-active-bg:#1c2433;--bs-btn-active-border-color:var(--as-cyan);border-radius:10px}
.btn-icon{width:44px;height:44px;display:inline-grid;place-items:center;padding:0}
button:disabled{opacity:.5;cursor:wait}

/* Navbar */
.as-navbar{background:#05070cee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--as-border);padding:.5rem 0}
.navbar-brand{display:flex;align-items:center;gap:10px;color:#fff;margin-right:1rem;padding:0}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:850;font-size:1.3rem;letter-spacing:-.5px}
.brand-name b{color:var(--as-cyan)}
.brand-text .eyebrow{font-size:8.5px;letter-spacing:1.4px;margin-top:3px;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--as-cyan),#9b7aff);color:#000;font-style:italic;font-size:26px;font-weight:900;box-shadow:0 0 22px #30e5ef30}
.navbar-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--as-muted)}
.navbar-toggler{border-color:var(--as-border);color:#fff;padding:.45rem .7rem}
.navbar-toggler:focus{box-shadow:0 0 0 2px var(--as-cyan)}
/* Every menu entry has the same height, font and icon width so the row lines up. */
.as-navbar .navbar-nav{align-items:center}
.as-navbar .nav-link,.timezone-pill{display:flex;align-items:center;gap:7px;height:38px;line-height:1;font-size:.86rem;font-weight:600;white-space:nowrap}
.as-navbar .nav-link{color:#c9cfdb;border-radius:9px;padding:0 .6rem!important}
.as-navbar .nav-link i{width:1.1em;text-align:center;font-size:.95em}
.as-navbar .nav-link:hover{color:#fff;background:#ffffff0d}
.as-navbar .nav-link.active{color:#001719;background:var(--as-cyan)}
.as-navbar .dropdown-toggle::after{margin-left:2px;vertical-align:middle}
.nav-extra .nav-link{color:var(--as-pink)}
.nav-extra .nav-link.active{background:var(--as-pink);color:#1d0010}
.dropdown-menu-dark{--bs-dropdown-bg:#0e121b;--bs-dropdown-border-color:var(--as-border);--bs-dropdown-link-active-bg:var(--as-cyan);--bs-dropdown-link-active-color:#001719;--bs-dropdown-link-hover-bg:#1c2433;border-radius:12px;padding:.4rem}
.dropdown-item{border-radius:8px;padding:.55rem .75rem;display:flex;gap:8px;align-items:center;font-size:.86rem;font-weight:600}
.dropdown-item i{width:1.1em;text-align:center}
.timezone-pill{padding:0 .7rem;border:1px solid #3a3620;border-radius:9px;color:var(--as-yellow);background:#14120a;font-variant-numeric:tabular-nums}
.timezone-offset{color:#c9b96a;font-weight:500}
.timezone-item{margin-left:6px}
@media(max-width:1199.98px){
  /* Collapsed menu: the ☰ button sits on the left under the logo, LIVE on the right of that row. */
  .navbar-brand{flex-basis:100%;margin-right:0}
  .navbar-toggler{order:2;margin-top:8px}
  .navbar-live{order:3;margin-top:8px}
  .navbar-collapse{order:4}
  .navbar-collapse{max-height:calc(100vh - 70px);overflow-y:auto;padding:.75rem 0 .5rem}
  #sports,.nav-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:stretch}
  .nav-extra{margin-top:8px;padding-top:8px;border-top:1px solid var(--as-border)}
  .as-navbar .nav-link{height:42px;padding:0 .75rem!important;background:#ffffff08}
  .timezone-item{grid-column:1 / -1;margin:4px 0 0}
  .timezone-pill{height:40px;justify-content:center}
}
@media(min-width:576px) and (max-width:1199.98px){#sports,.nav-extra{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.as-navbar .navbar-nav{gap:2px}}
@media(min-width:1200px) and (max-width:1399.98px){.brand-text .eyebrow{font-size:7.5px;letter-spacing:.7px}.as-navbar .nav-link{padding:0 .45rem!important;font-size:.82rem}}
@media(min-width:1200px) and (max-width:1259.98px){.brand-text .eyebrow{display:none}}
@media(max-width:380px){.brand-text .eyebrow{font-size:7.5px;letter-spacing:.8px}}

/* Toolbar: filters + summary on the left, search + refresh + last update on the right, one row on wide screens */
.eyebrow{font-size:11px;font-weight:750;letter-spacing:2.5px;color:var(--as-cyan);margin:0}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:16px 0 6px}
.filter-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}
.filter-pills button{display:inline-flex;align-items:center;gap:8px;font-size:13px;border:1px solid transparent;color:var(--as-muted);background:transparent;border-radius:999px;padding:0 14px;height:38px}
.filter-pills button:hover{color:#fff;background:#ffffff0d}
.filter-pills button.active{background:#2a1220;color:var(--as-pink);border-color:#5a2442;font-weight:700}
.count{padding:1px 8px;background:#ff5fa21f;border-radius:999px;font-size:11px}
.toolbar-note{font-size:12px;color:var(--as-muted);white-space:nowrap;margin:0 4px}
.teams-summary{margin:4px 0 0}
.toolbar-actions{display:flex;gap:8px;align-items:center}
.toolbar-actions .btn-icon{width:38px;height:38px}
.search{width:240px}
.search .input-group-text{background:var(--as-panel);border-color:var(--as-border);color:var(--as-muted)}
.search .form-control{background:var(--as-panel);border-color:var(--as-border);color:#fff;height:38px}
.search .form-control:focus{box-shadow:none;border-color:var(--as-cyan)}
.alert{font-size:13px;border-radius:10px}
.empty{padding:50px 20px;text-align:center;color:var(--as-muted);border:1px dashed var(--as-border);border-radius:14px;margin:18px 0}

/* Groups */
.sport-section{margin:22px 0 34px}
.sport-heading{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:800;color:var(--as-cyan);margin:0;padding:12px 0;border-bottom:1px solid var(--as-border)}
.league-heading{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin:20px 0 12px;min-height:40px}
.league-heading-logo{width:32px;height:32px}
.league-heading-name{flex:1;min-width:0;line-height:1.45;overflow-wrap:anywhere}
.league-top{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:1px;color:#1b1400;background:var(--as-yellow);border-radius:6px;padding:2px 7px}
.league-live{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-size:11px;font-weight:800;color:var(--as-red);white-space:nowrap}
.league-follow{flex-shrink:0;min-height:38px;padding:6px 12px;font-size:12px;white-space:nowrap;color:var(--as-muted);background:transparent;border:1px solid #384154;border-radius:999px}
.league-follow:hover{color:#fff;border-color:var(--as-yellow)}
.league-follow.selected{color:var(--as-yellow);border-color:#796629;background:#211d0c}
.followed-live{border:1px solid #574821;border-radius:16px;padding:16px 18px;margin:16px 0 30px;background:linear-gradient(180deg,#1a160a,#0b0d12)}
.followed-live-title{color:var(--as-yellow);font-size:1.15rem;font-weight:800;margin:0 0 4px}
.followed-live-note{color:var(--as-muted);font-size:12px;margin:0 0 6px}
.followed-live .sport-section:first-of-type{margin-top:8px}
.followed-live .sport-section:last-child{margin-bottom:4px}

/* Cards: line 1 competition, line 2 teams and score, line 3 LIVE / start time */
.match-card{height:100%;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,var(--as-panel-2),var(--as-panel));border:1px solid var(--as-border);border-radius:14px;padding:10px 12px;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.match-card:hover,.match-card:focus-visible{border-color:#3c8ea0;transform:translateY(-2px);box-shadow:0 10px 30px #0008}
.match-card.is-live{border-color:#6b2232;box-shadow:inset 0 2px 0 var(--as-red)}
.match-card.is-soon{box-shadow:inset 0 2px 0 var(--as-yellow)}
.match-logo{display:block;object-fit:contain;flex-shrink:0;background:transparent}
.card-line1{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--as-muted);min-height:34px}
.sport-tag{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;color:var(--as-cyan);font-weight:700;white-space:nowrap}
.sep{flex-shrink:0;color:#4b5568}
.competition{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;flex:1;min-width:0;color:#d5dae4;line-height:1.3}
.league-logo{width:32px;height:32px}
.league-name{min-width:0;overflow-wrap:anywhere;font-weight:600}
.country{display:inline-flex;align-items:center;gap:5px;color:var(--as-muted);white-space:nowrap}
.country-flag{width:20px;height:14px;object-fit:cover;border-radius:2px}
.favorite{flex-shrink:0;border:0;background:transparent;color:var(--as-muted);font-size:17px;line-height:1;padding:6px;border-radius:8px;min-width:32px;min-height:32px;margin:-4px -6px -4px 0}
.favorite:hover{color:#fff;background:#ffffff10}
.favorite.selected{color:var(--as-yellow)}
.card-line2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;flex:1}
.side{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;font-weight:650;line-height:1.3}
.side.away{flex-direction:row-reverse;text-align:right}
.team-name{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.team-badge{position:relative;flex-shrink:0}
.team-logo{width:44px;height:44px}
.team-follow{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;display:grid;place-items:center;padding:0;border:1px solid var(--as-border);border-radius:50%;background:#0b0e15;color:var(--as-muted);font-size:10px;line-height:1}
.side.away .team-follow{right:auto;left:-6px}
.team-follow:hover{color:#fff;border-color:var(--as-pink)}
.team-follow.selected{color:var(--as-pink);border-color:#7a2a50}
.scoreline{font-size:20px;font-weight:800;color:var(--as-yellow);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.scoreline.versus{font-size:12px;font-weight:700;color:var(--as-muted);text-transform:uppercase;letter-spacing:1px}
.event-title{grid-column:1 / -1;font-size:15px;font-weight:650;line-height:1.4}
.card-line3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:#c8cdd8;font-variant-numeric:tabular-nums;border-top:1px solid var(--as-border);padding-top:7px}
.card-line3 .live{display:inline-flex;align-items:center;gap:6px;color:var(--as-red);font-weight:800;letter-spacing:1px;animation:live-text 1.25s ease-in-out infinite}
@keyframes live-text{0%,100%{opacity:1}50%{opacity:.45}}
.card-line3 .soon{color:var(--as-yellow);font-weight:700}
.now-playing{color:#e8f9fb}
.followed-clear{margin-left:auto;font-size:11px;font-weight:600;color:var(--as-muted);background:transparent;border:1px solid #4a4130;border-radius:999px;padding:4px 10px;white-space:nowrap}
.followed-clear:hover{color:#fff;border-color:var(--as-yellow)}
.followed-live-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.load-more{display:flex;justify-content:center;padding:18px 0 30px;min-height:60px}
.live-dot{display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--as-red);box-shadow:0 0 0 3px #ff354f18;animation:live-blink 1.25s ease-in-out infinite}
@keyframes live-blink{0%,100%{opacity:1;box-shadow:0 0 0 3px #ff354f18}50%{opacity:.28;box-shadow:0 0 0 6px #ff354f08}}

/* Followed teams */
.teams-panel{border:1px solid #4a2035;border-radius:16px;padding:16px 18px;margin:4px 0 12px;background:linear-gradient(180deg,#1b0c14,#0b0d12)}
.panel-title{display:flex;align-items:center;gap:9px;font-size:1.1rem;font-weight:800;color:var(--as-pink);margin:0 0 12px}
.teams-upcoming .panel-title{color:#e7eaf1;margin-top:26px}
.team-chips,.team-results{display:flex;flex-wrap:wrap;gap:8px}
.team-chips{margin-bottom:12px}
.team-results{margin-top:10px}
.team-search{width:100%;max-width:520px}
.team-chip,.team-result{display:inline-flex;align-items:center;gap:7px;border:1px solid #5a2442;background:#2a1220;color:#ffd1e5;border-radius:999px;padding:7px 13px;font-size:13px;min-height:38px}
.team-chip:hover{border-color:var(--as-pink)}
.team-result{background:var(--as-panel-2);border-color:var(--as-border);color:#e7eaf1}
.team-result small{color:var(--as-muted)}
.team-result.selected,.team-result:hover{border-color:var(--as-pink)}
.team-result.selected .fa-heart{color:var(--as-pink)}

footer{margin-top:50px;border-top:1px solid var(--as-border);padding:22px 0 40px;display:flex;flex-wrap:wrap;justify-content:space-between;color:var(--as-muted);font-size:11px;gap:12px}
footer>span:first-child{font-size:14px;color:var(--as-cyan);font-weight:800}

/* Player */
dialog{width:min(980px,96vw);max-height:94vh;border:1px solid var(--as-border);background:#06080d;color:#fff;border-radius:18px;padding:20px;overflow:auto}
dialog::backdrop{background:#000d;backdrop-filter:blur(6px)}
.player-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
#player h2{font-size:1.2rem;font-weight:800;margin:0 0 6px}
#player-time{font-size:12px;color:var(--as-yellow);margin:0 0 14px;line-height:1.7}
.player-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.host-picker{display:flex;align-items:center;gap:9px;flex:1;min-width:220px;margin:0;font-size:12px;color:var(--as-muted);white-space:nowrap}
.host-picker .form-select{flex:1;min-width:0;background-color:var(--as-panel);color:#fff;border-color:#1f6b72;border-radius:10px;min-height:44px}
.host-picker .form-select:focus{border-color:var(--as-cyan);box-shadow:0 0 0 2px #30e5ef40}
video{display:block;width:100%;max-height:62vh;aspect-ratio:16/9;background:#000;border-radius:12px}
#play-status{font-size:13px;color:var(--as-muted);margin:10px 0 0}
#player:fullscreen{width:100vw;max-width:none;max-height:none;height:100vh;border-radius:0;display:flex;flex-direction:column}
#player:fullscreen video{max-height:none;min-height:0;flex:1}
#player.floating-player{position:fixed;inset:auto 16px 16px auto;margin:0;width:min(430px,calc(100vw - 24px));max-height:70vh;padding:12px;z-index:1080;box-shadow:0 10px 45px #000b;border-color:var(--as-cyan)}
.floating-player .eyebrow,.floating-player #player-time,.floating-player #fullscreen-toggle,.floating-player #reload-stream{display:none}
.floating-player h2{font-size:13px!important;margin-bottom:10px}
.floating-player .player-actions{gap:6px}
.floating-player .btn{padding:6px 8px;font-size:11px}
.floating-player video{max-height:40vh}
.floating-player #play-status{font-size:10px}
.floating-player .host-picker{flex-basis:100%}
.safari-help{border:1px solid #3f544d;border-radius:12px;background:#091f19;padding:14px;margin:0 0 14px;font-size:13px;line-height:1.7}
.safari-help strong{color:var(--as-cyan)}
.safari-help p{margin:6px 0;color:#c4d1cd}
.safari-help a{display:inline-block;padding:9px 12px;border:1px solid var(--as-cyan);border-radius:10px;color:var(--as-cyan);text-decoration:none;margin:0 8px 6px 0}

/* Phones */
@media(max-width:575.98px){
  body{font-size:14px}
  .toolbar{gap:10px}
  .filter-pills{flex-basis:100%}
  .filter-pills button{padding:7px 11px;font-size:12px}
  .toolbar-actions{flex:1}
  .search{width:auto;flex:1}
  .league-heading{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 9px}
  .league-heading-logo{grid-row:1 / 3}
  .league-heading-name{grid-column:2}
  .league-top,.league-live{grid-column:2;justify-self:start}
  .league-follow{grid-column:3;grid-row:1 / 3;padding:6px 10px;font-size:11px}
  .followed-live,.teams-panel{padding:12px}
  dialog{padding:14px;border-radius:14px;width:100vw;max-width:100vw;max-height:100vh}
  .host-picker{flex-basis:100%}
  .player-actions .btn{font-size:12px}
}

/* Android TV / remote */
.tv-mode .btn,.tv-mode button,.tv-mode select,.tv-mode .nav-link{min-height:48px;font-size:16px}
.tv-mode :focus-visible,.tv-mode .nav-link:focus{outline:4px solid var(--as-yellow);outline-offset:3px;box-shadow:0 0 22px #ffdb5740}
.tv-mode .team{font-size:19px}
.tv-mode .team-logo{width:36px;height:36px}
.tv-mode .scheduled{font-size:14px}
.tv-mode dialog{width:min(1280px,96vw)}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}.match-card{transition:none}.match-card:hover{transform:none}}
[hidden]{display:none!important}