:root{
--ink:#0A1628;
--ink-soft:#16243C;
--panel:#0F1E33;
--panel-2:#142639;
--line:#22344C;
--paper:#F5F7FA;
--teal:#15D6B5;
--teal-dim:#0E8F78;
--amber:#FFB23E;
}
/* Light theme — kicks in when . Brand colours
(teal, amber, red) stay the same for continuity; only the surface
colors invert. */
:root[data-theme="light"]{
--ink:#F5F7FA;
--ink-soft:#E9EEF5;
--panel:#FFFFFF;
--panel-2:#F1F4F9;
--line:#D5DBE4;
--paper:#0A1628;
--text:#0A1628;
--text-dim:#3F5063;
--text-faint:#6E7D91;
}
:root[data-theme="light"] body{color:#0A1628;}
:root[data-theme="light"] .app{background:var(--ink);}
:root[data-theme="light"] .match-hero{background:radial-gradient(circle at top,rgba(21,214,181,.15),transparent 55%),var(--panel-2);}
:root[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.92) !important;border-top:1px solid var(--line) !important;}
:root[data-theme="light"] .m-time .live,
:root[data-theme="light"] .m-time .min{color:#DC2626;}
:root[data-theme="light"] .search input{color:var(--text);}
/* Rest of the dark-theme defaults */
:root{
--red:#FF5C5C;
--text:#E8EDF4;
--text-dim:#8FA0B8;
--text-faint:#5C7089;
--font-d:'Sora','Segoe UI',system-ui,sans-serif;
--font-b:'Inter','Segoe UI',system-ui,sans-serif;
--font-m:'JetBrains Mono','Courier New',monospace;
--radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--ink);color:var(--text);font-family:var(--font-b);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{max-width:100%;display:block;}
/* App shell */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--ink);
display:flex;flex-direction:column;position:relative;
border-left:1px solid var(--line);border-right:1px solid var(--line);}
/* Region bar */
.region-bar{display:flex;align-items:center;justify-content:space-between;
padding:8px 14px;background:var(--panel-2);font-size:11px;color:var(--text-dim);
border-bottom:1px solid var(--line);}
.region-bar .geo{display:flex;align-items:center;gap:6px;}
.geo-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(21,214,181,.15);}
.lang-switch{display:flex;background:var(--ink);border-radius:20px;padding:2px;border:1px solid var(--line);}
.lang-switch button{color:var(--text-faint);font-size:10.5px;font-weight:700;letter-spacing:.04em;
padding:4px 10px;border-radius:18px;}
.lang-switch button.active{background:var(--teal);color:var(--ink);}
/* Header */
.header{padding:16px 16px 0;}
.header-row{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.brand__logo{display:block;height:32px;width:auto;max-width:180px;object-fit:contain;}
/* Dark logo hidden by default (light theme wins). */
.brand__logo--dark{display:none;}
/* Explicit theme override always wins. */
[data-theme="dark"] .brand__logo--light{display:none;}
[data-theme="dark"] .brand__logo--dark {display:block;}
[data-theme="light"] .brand__logo--dark{display:none;}
[data-theme="light"] .brand__logo--light{display:block;}
/* No explicit theme cookie → follow OS preference. */
@media (prefers-color-scheme:dark){
html:not([data-theme]) .brand__logo--light{display:none;}
html:not([data-theme]) .brand__logo--dark {display:block;}
}
.brand-mark{width:30px;height:30px;border-radius:8px;
background:linear-gradient(135deg,var(--teal),var(--teal-dim));
display:flex;align-items:center;justify-content:center;
font-family:var(--font-d);font-weight:800;font-size:14px;color:var(--ink);}
.brand-name{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em;}
.brand-name span{color:var(--teal);}
.header-icons{display:flex;gap:14px;color:var(--text-dim);font-size:18px;align-items:center;}
.header-icons a,.header-icons button{color:inherit;}
/* Gear button: yellow SVG icon (settings-gear from SVG Repo). */
.gear-btn{background:transparent;border:0;padding:0;cursor:pointer;line-height:0;
display:inline-flex;align-items:center;justify-content:center;}
.gear-svg{width:22px;height:22px;display:block;
transition:transform .35s cubic-bezier(.4,1.6,.6,1);}
.gear-btn:hover .gear-svg,
.gear-btn:focus .gear-svg{transform:rotate(45deg);}
.search{margin-top:14px;display:flex;align-items:center;gap:8px;
background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
color:var(--text-faint);font-size:13px;
transition:border-color .15s, box-shadow .15s;}
.search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,180,120,.14);}
.search input{background:transparent;border:none;outline:none;color:var(--text);flex:1;font-size:13px;font-family:inherit;}
.search input::placeholder{color:var(--text-faint);}
/* Desktop-only search polish — wider, softer edges, hero placement. */
@media (min-width:900px){
.search{
max-width:520px; margin:16px auto 0; padding:12px 18px;
border-radius:999px; /* pill */
background:var(--panel);
box-shadow:0 4px 14px rgba(0,0,0,.28);
font-size:14px;
}
.search span{font-size:16px;color:var(--teal);}
.search input{font-size:14px;padding-left:2px;}
.search:focus-within{
box-shadow:0 4px 14px rgba(0,0,0,.28), 0 0 0 3px rgba(0,180,120,.22);
}
}
/* Sport rail */
.sport-rail{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 10px;scrollbar-width:none;}
.sport-rail::-webkit-scrollbar{display:none;}
.sport-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:58px;color:inherit;}
.sport-chip .ico{width:42px;height:42px;border-radius:12px;background:var(--panel-2);
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;}
.sport-chip.active .ico{background:rgba(21,214,181,.12);border-color:var(--teal);color:var(--teal);}
.sport-chip .lbl{font-size:10.5px;color:var(--text-faint);font-weight:600;}
.sport-chip.active .lbl{color:var(--text);}
/* Date strip */
.date-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 16px 14px;scrollbar-width:none;border-bottom:1px solid var(--line);}
.date-strip::-webkit-scrollbar{display:none;}
.date-pill{flex:0 0 auto;padding:7px 14px;border-radius:20px;background:transparent;border:1px solid var(--line);
font-size:12px;font-weight:600;color:var(--text-dim);}
.date-pill.active{background:var(--text);color:var(--ink);border-color:var(--text);}
/* Filter row */
.filter-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px;}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;}
.seg button,.seg a{color:var(--text-faint);font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px;}
.seg button.active,.seg a.active{background:var(--teal);color:var(--ink);}
.filter-row .sort{font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:4px;}
/* League group */
.league-group{margin-top:14px;}
.league-head{display:flex;align-items:center;gap:8px;padding:0 16px 8px;font-size:12.5px;color:var(--text-dim);font-weight:700;}
.league-head img,.league-head .flag{width:16px;height:16px;border-radius:3px;background:var(--line);flex:0 0 auto;}
.league-head .star{margin-left:auto;color:var(--text-faint);font-size:14px;}
.league-head a{color:inherit;}
.match-card{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);}
.match-card:active{background:var(--panel-2);}
.m-time{width:42px;flex:0 0 42px;text-align:center;}
.m-time .t{font-family:var(--font-m);font-size:12px;color:var(--text-faint);}
.m-time .live{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--red);}
.m-time .min{font-family:var(--font-m);font-size:10.5px;color:var(--red);}
.live-tick{display:inline-block;animation:live-tick-blink 1s ease-in-out infinite;}
@keyframes live-tick-blink{
0%,100%{opacity:1;}
50%{opacity:.15;}
}
.m-teams{flex:1;min-width:0;}
.m-team{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:2px 0;}
.m-team .dot{width:18px;height:18px;border-radius:50%;background:var(--line);flex:0 0 auto;object-fit:contain;}
.m-team .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.m-score{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-m);
font-weight:700;font-size:13.5px;width:24px;flex:0 0 24px;text-align:center;position:relative;}
.m-score .s.lead{color:var(--teal);}
/* AET / PEN mini-badge tucked above the score */
.m-score--ext{padding-top:10px;}
.m-score--ext::before{
content:attr(data-note);position:absolute;top:-2px;left:50%;transform:translateX(-50%);
font-size:8px;font-weight:800;letter-spacing:.08em;
color:var(--amber);background:rgba(255,178,62,.14);
border:1px solid rgba(255,178,62,.4);border-radius:99px;
padding:1px 5px;line-height:1;
}
.m-extra{width:18px;flex:0 0 18px;text-align:center;color:var(--text-faint);font-size:15px;}
/* Bottom nav */
.bottom-nav{position:sticky;bottom:0;display:flex;background:var(--panel-2);
border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
color:var(--text-faint);font-size:10px;font-weight:600;padding:4px 0;}
.nav-item .ico{font-size:19px;}
.nav-item.active{color:var(--teal);}
/* Note callouts */
.note{font-size:10.5px;color:var(--amber);background:rgba(255,178,62,.08);
border:1px dashed rgba(255,178,62,.4);border-radius:6px;padding:6px 8px;margin:8px 16px 0;}
/* Side col */
.side-col{display:none;}
.side-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;}
.side-card h4{font-family:var(--font-d);font-size:13px;margin-bottom:10px;color:var(--text);}
.standing-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0;color:var(--text-dim);}
.standing-row .pos{width:16px;color:var(--text-faint);font-family:var(--font-m);}
.standing-row .logo{width:16px;height:16px;}
.standing-row .pts{margin-left:auto;font-family:var(--font-m);font-weight:700;color:var(--text);}
/* Ad slot — block layout so any admin-provided HTML renders in natural flow.
Transparent bg + no border per admin request; center-align content. */
.ad-slot{margin:12px 16px;padding:6px;background:transparent;border:none;text-align:center;}
.ad-slot--top{margin:10px 16px 0;}
.ad-slot--inline{margin:10px 16px;}
.ad-slot--bottom{margin:14px 16px 0;}
/* Common tags used by advertisers — behave sanely inside the slot */
.ad-slot a{display:inline-block;color:inherit;}
.ad-slot img{max-width:100%;height:auto;display:inline-block;vertical-align:middle;border-radius:6px;}
.ad-slot iframe{max-width:100%;border:none;}
/* Admin-only debug badge — never shown to normal visitors */
.ad-slot--debug{
border:1px dashed var(--amber);background:rgba(255,178,62,.08);
color:var(--amber);font-size:11px;text-align:left;padding:8px 12px;
}
.ad-slot--debug code{background:rgba(255,178,62,.15);padding:1px 5px;border-radius:3px;
font-family:var(--font-m);}
/* Floating icon */
.floating-icon{position:fixed;z-index:50;border-radius:50%;
background:transparent;box-shadow:0 6px 18px rgba(0,0,0,.35);
display:flex;align-items:center;justify-content:center;overflow:hidden;
transition:transform .15s;}
.floating-icon:hover{transform:scale(1.06);}
.floating-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.floating-icon__emoji{font-size:24px;color:#fff;}
/* Match detail page */
.match-hero{padding:16px;background:linear-gradient(180deg,var(--panel-2),var(--ink));border-bottom:1px solid var(--line);}
.match-hero .row{display:flex;align-items:center;justify-content:space-between;}
.match-hero .team{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.match-hero .team img{width:48px;height:48px;}
.match-hero .team .name{font-family:var(--font-d);font-size:14px;text-align:center;}
.match-hero .score{font-family:var(--font-m);font-weight:700;font-size:34px;letter-spacing:.04em;}
.match-hero .meta{text-align:center;font-size:11px;color:var(--text-dim);margin-top:8px;}
.match-hero .status{display:inline-block;padding:3px 8px;border-radius:99px;background:rgba(255,92,92,.12);color:var(--red);font-size:10px;font-weight:700;letter-spacing:.06em;}
.tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs a{padding:7px 12px;border-radius:7px;font-size:12px;font-weight:700;color:var(--text-faint);background:var(--panel-2);border:1px solid var(--line);white-space:nowrap;}
.tabs a.active{background:var(--teal);color:var(--ink);border-color:var(--teal);}
.section{padding:14px 16px;border-bottom:1px solid var(--line);}
.section h3{font-family:var(--font-d);font-size:13px;margin-bottom:10px;color:var(--text);text-transform:uppercase;letter-spacing:.06em;}
.section .row{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px;color:var(--text-dim);}
.section .row .v{font-family:var(--font-m);color:var(--text);}
.event-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px;}
.event-row:last-child{border:none;}
.event-row .time{width:34px;font-family:var(--font-m);color:var(--text-faint);}
.event-row .ico{width:18px;}
.event-row .txt{flex:1;}
.stat-bar{display:grid;grid-template-columns:42px 1fr 80px 1fr 42px;align-items:center;gap:6px;padding:6px 0;font-size:12px;}
.stat-bar .lbl{grid-column:3;text-align:center;color:var(--text-dim);font-size:11px;}
.stat-bar .h{font-family:var(--font-m);text-align:right;}
.stat-bar .a{font-family:var(--font-m);text-align:left;}
.stat-bar .bar-h{height:5px;background:var(--line);border-radius:99px;overflow:hidden;justify-self:end;width:100%;}
.stat-bar .bar-a{height:5px;background:var(--line);border-radius:99px;overflow:hidden;width:100%;}
.stat-bar .fill{height:100%;background:var(--teal);}
.stat-bar .fill.r{background:var(--amber);}
.list-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px;}
.list-row:first-child{border:none;}
.list-row .logo{width:24px;height:24px;border-radius:4px;background:var(--line);object-fit:contain;}
.list-row .meta{margin-left:auto;color:var(--text-dim);font-size:11.5px;font-family:var(--font-m);}
.err{padding:24px 16px;color:var(--amber);text-align:center;font-size:13px;}
/* Standings table */
.std-table{width:100%;border-collapse:collapse;font-size:12px;}
.std-table th,.std-table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;color:var(--text-dim);}
.std-table td.team{text-align:left;color:var(--text);}
.std-table td.team img{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:6px;}
.std-table th{color:var(--text-faint);font-weight:700;font-size:10.5px;letter-spacing:.06em;}
.std-table tr.cl td:first-child{box-shadow:inset 3px 0 0 var(--teal);}
.std-table tr.el td:first-child{box-shadow:inset 3px 0 0 var(--amber);}
.std-table tr.rl td:first-child{box-shadow:inset 3px 0 0 var(--red);}
/* ---- Combined landscape pitch (both teams, formation view) ---- */
.lineup-heads{display:flex;justify-content:space-between;align-items:center;
gap:10px;margin:12px 0 8px;font-size:12.5px;}
.lineup-head{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.lineup-head--right{justify-content:flex-end;text-align:right;}
.lineup-head img{width:26px;height:26px;object-fit:contain;flex:0 0 26px;}
.lineup-head__name{font-family:var(--font-d);font-weight:700;font-size:13px;line-height:1.15;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lineup-head__meta{font-size:11px;color:var(--text-dim);line-height:1.15;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lineup-head__meta b{color:var(--teal);letter-spacing:.03em;}
.pitch--full{
position:relative;aspect-ratio:3/2;border-radius:12px;margin:8px 0;overflow:hidden;
background:
/* stripes go across the long axis (horizontal on desktop) */
repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 6%,transparent 6% 12%),
linear-gradient(180deg,#1e6b43 0%,#175033 55%,#1e6b43 100%);
}
/* Player wrapper reads x/y as custom props so mobile can swap axes */
.pl-wrap{position:absolute;left:var(--x);top:var(--y);
transform:translate(-50%,-50%);z-index:2;}
/* Show landscape markings by default, hide portrait */
.pitch__lines--land{display:block;}
.pitch__lines--port{display:none;}
.pl-abs{display:flex;flex-direction:column;align-items:center;gap:4px;
color:#fff;text-decoration:none;width:82px;text-align:center;}
.pl-abs__ring{
position:relative;width:44px;height:44px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),rgba(0,0,0,.4));
border:2px solid rgba(255,255,255,.5);
overflow:hidden;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.pl-abs__jersey{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-m);font-weight:800;font-size:13px;color:rgba(255,255,255,.85);z-index:1;}
.pl-abs__ring img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;background:#0A1628;}
.pl-abs__rating{position:absolute;top:-4px;right:-8px;z-index:3;
min-width:24px;height:18px;padding:0 4px;border-radius:99px;
font-family:var(--font-m);font-size:10.5px;font-weight:800;line-height:18px;
border:1.5px solid var(--ink);box-shadow:0 2px 5px rgba(0,0,0,.5);text-align:center;}
.pl-abs__badge{position:absolute;bottom:-4px;left:-6px;z-index:3;
font-size:10px;line-height:1;padding:2px;background:rgba(0,0,0,.6);
border-radius:99px;border:1.5px solid var(--ink);}
.pl-abs__badge--r{background:#FF5C5C;}
.pl-abs__badge--y{background:#FFB23E;}
.pl-abs__meta{font-size:10.5px;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.85);
max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.pl-abs__num{color:rgba(255,255,255,.65);font-family:var(--font-m);font-weight:800;
font-size:9.5px;margin-right:2px;}
.pl-abs__name{color:#fff;}
.pl-abs__ev{font-size:10px;margin-left:2px;}
/* Benches — side by side */
.benches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;}
.bench h5{font-family:var(--font-d);font-size:12px;color:var(--text-dim);
letter-spacing:.05em;margin-bottom:6px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:640px){
.benches{grid-template-columns:1fr;gap:8px;}
}
/* --- Mobile: portrait pitch (2:3), home team top, away team bottom --- */
@media (max-width:640px){
.pitch--full{
aspect-ratio:2/3;
background:
/* stripes now horizontal so they cross the short axis */
repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 6%,transparent 6% 12%),
linear-gradient(90deg,#1e6b43 0%,#175033 55%,#1e6b43 100%);
}
/* Swap desktop x↔y — home team's x=5% (left edge) becomes y=5% (top). */
.pl-wrap{left:var(--y);top:var(--x);}
/* Toggle line markings */
.pitch__lines--land{display:none;}
.pitch__lines--port{display:block;}
/* Smaller circles + tighter meta so 11 players per side fit without touching */
.pl-abs{width:56px;}
.pl-abs__ring{width:32px;height:32px;border-width:1.5px;}
.pl-abs__jersey{font-size:11px;}
.pl-abs__rating{min-width:20px;height:15px;font-size:9px;line-height:15px;top:-3px;right:-6px;}
.pl-abs__meta{font-size:9.5px;max-width:58px;}
.pl-abs__num{font-size:8.5px;}
/* Team header row also stacks — otherwise it gets cramped */
.lineup-heads{flex-direction:column;gap:6px;}
.lineup-head--right{justify-content:flex-start;text-align:left;}
.lineup-head--right img{order:-1;}
}
/* ---- Legacy per-team pitch (kept for edge cases where only one team has XI) ---- */
.pitch{position:relative;border-radius:10px;padding:18px 10px;margin:10px 0;overflow:hidden;
background:
/* alternating "grass stripes" */
repeating-linear-gradient(
180deg,
rgba(255,255,255,.05) 0 20px,
transparent 20px 40px
),
linear-gradient(180deg,#1e6b43 0%,#175033 55%,#1e6b43 100%);
}
.pitch__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.pitch__players{position:relative;z-index:2;}
.pitch .row-p{display:flex;justify-content:space-around;align-items:center;margin:10px 0;flex-wrap:wrap;gap:4px 0;}
.pitch .pl{display:flex;flex-direction:column;align-items:center;color:#fff;font-size:10px;text-align:center;
width:64px;text-decoration:none;transition:transform .1s;}
.pitch .pl:hover{transform:translateY(-2px);}
.pitch .pl__num{position:relative;width:32px;height:32px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,.12));
display:flex;align-items:center;justify-content:center;
font-family:var(--font-m);font-size:12px;font-weight:800;
box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.15);
border:1px solid rgba(255,255,255,.25);
}
.pitch .pl__name{margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.7);max-width:70px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
/* Rating chip — badge in the top-right of the number bubble */
.rating{
position:absolute;top:-6px;right:-8px;
min-width:22px;height:18px;padding:0 4px;border-radius:99px;
font-family:var(--font-m);font-size:10.5px;font-weight:800;line-height:18px;
color:#0A1628;text-align:center;
border:1.5px solid var(--ink);box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.rating--good{background:linear-gradient(135deg,#22e6a4,#0eb17b);} /* ≥ 7.5 */
.rating--ok {background:linear-gradient(135deg,#15D6B5,#0E8F78);color:#fff;} /* 7.0–7.5 */
.rating--mid {background:linear-gradient(135deg,#FFB23E,#f38a0f);} /* 6.0–7.0 */
.rating--bad {background:linear-gradient(135deg,#FF6b6b,#d94040);color:#fff;} /* < 6.0 */
/* Small event badges around the number */
.pl__badge{
position:absolute;font-size:10px;line-height:1;padding:2px;background:rgba(0,0,0,.55);
border-radius:99px;border:1.5px solid var(--ink);
}
.pl__badge--g{bottom:-6px;left:-8px;}
.pl__badge--a{bottom:-6px;right:-8px;font-size:9px;padding:2px 4px;}
.pl__badge--y{top:-6px;left:-8px;background:#FFB23E;}
.pl__badge--r{top:-6px;left:-8px;background:#FF5C5C;}
/* Compact lineup rating in the standings-style bench row */
.list-row .rating{position:static;margin-left:6px;}
/* Team headline above pitch */
.team-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px;font-size:12.5px;}
.team-line__name{font-family:var(--font-d);font-weight:700;font-size:14px;}
.team-line__form,.team-line__coach{color:var(--text-dim);font-size:11.5px;}
.team-line__form b{color:var(--teal);letter-spacing:.04em;}
/* Recent-form fallback (empty h2h / empty lineups) */
.form-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);}
.form-line:first-of-type{border-top:none;}
.form-line__logo{width:24px;height:24px;object-fit:contain;flex:0 0 24px;}
.form-line__name{flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.form-line__badges{display:flex;gap:5px;}
.form-badge{
width:22px;height:22px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-m);font-weight:800;font-size:10.5px;line-height:1;
cursor:default;
}
.form-badge--w{background:rgba(21,214,181,.18);color:var(--teal);border:1px solid rgba(21,214,181,.45);}
.form-badge--d{background:rgba(143,160,184,.15);color:var(--text-dim);border:1px solid rgba(143,160,184,.4);}
.form-badge--l{background:rgba(255,92,92,.14);color:var(--red);border:1px solid rgba(255,92,92,.45);}
.form-badge--\?{background:var(--panel-2);color:var(--text-faint);border:1px solid var(--line);}
/* Admin */
.admin{ width: min(100%, 1200px);margin: 16px auto;padding: 18px;background: var(--panel);border: 1px solid var(--line);border-radius: 14px;box-sizing: border-box;}
.admin h1{font-family:var(--font-d);font-size:18px;margin-bottom:14px;}
.admin h2{font-family:var(--font-d);font-size:14px;margin:18px 0 8px;color:var(--teal);}
.admin .row{display:flex;gap:10px;align-items:center;margin:6px 0;flex-wrap:wrap;}
.admin label{font-size:12px;color:var(--text-dim);min-width:90px;}
.admin input,.admin textarea,.admin select{background:var(--ink);border:1px solid var(--line);border-radius:6px;
padding:8px 10px;color:var(--text);font-family:inherit;font-size:13px;}
.admin textarea{width:100%;min-height:100px;font-family:var(--font-m);}
.admin button.btn,.admin .btn{padding:8px 14px;border-radius:7px;background:var(--teal);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;border:none;display:inline-block;}
.admin .btn.alt{background:var(--panel-2);color:var(--text);border:1px solid var(--line);}
.admin .btn.danger{background:#e64545;color:#fff;border:1px solid #b83030;}
.admin .btn.danger:hover{background:#d13232;}
.admin .card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin:10px 0;}
.admin .flash{padding:10px 14px;border-radius:8px;background:rgba(21,214,181,.12);color:var(--teal);border:1px solid var(--teal);font-size:12.5px;margin:10px 0;}
.admin .err{padding:10px 14px;border-radius:8px;background:rgba(255,92,92,.12);color:var(--red);border:1px solid var(--red);font-size:12.5px;margin:10px 0;text-align:left;}
/* -------- Match chat -------- */
/* ============================================================
Chat — avatar/name/bubble/timestamp layout with optional
admin-configured background image + tint overlay.
============================================================ */
.section--chat{padding:0 16px 20px;}
.chat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
display:flex;flex-direction:column;overflow:hidden;position:relative;isolation:isolate;}
.chat.chat--has-bg{background:var(--panel-2) var(--chat-bg) center/cover no-repeat;}
.chat__tint{position:absolute;inset:0;z-index:0;pointer-events:none;}
.chat__tint--black{background:#000;}
.chat__tint--white{background:#fff;}
.chat > *{position:relative;z-index:1;}
.chat__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:10px 14px;border-bottom:1px solid var(--line);background:var(--ink-soft);}
.chat__title{font-family:var(--font-d);font-size:14px;font-weight:700;}
.chat__viewers{font-size:11.5px;color:var(--text-dim);font-family:var(--font-m);}
.chat__lang{background:var(--ink);color:var(--text);border:1px solid var(--line);
border-radius:6px;padding:4px 8px;font-size:11.5px;font-family:inherit;
cursor:pointer;max-width:150px;}
.chat__lang:focus{border-color:var(--teal);outline:none;}
.chat__log{
padding:12px 14px;height:340px;overflow-y:auto;
display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;
}
.chat__row{
display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:flex-start;
will-change:transform; /* smoother swipe */
}
.chat__row--me{grid-template-columns:auto 1fr auto;} /* keep same layout for own msgs */
.chat__avatar{
width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
background:var(--panel);border:1px solid var(--line);
}
.chat__avatar--txt{display:inline-flex;align-items:center;justify-content:center;
color:#000;font-family:var(--font-m);font-weight:700;font-size:13px;}
.chat__body{min-width:0;display:flex;flex-direction:column;gap:3px;}
.chat__meta{font-size:12px;line-height:1;}
.chat__u{font-family:var(--font-m);font-weight:700;font-size:12.5px;}
.chat__bubble{
display:inline-block;max-width:100%;
background:var(--panel);border:1px solid var(--line);
padding:7px 11px;border-radius:14px 14px 14px 4px;
color:var(--text);font-size:14px;line-height:1.4;word-break:break-word;
}
.chat__row--me .chat__bubble{background:rgba(0,180,120,.14);border-color:rgba(0,180,120,.32);}
.chat__row--bot .chat__bubble{background:rgba(255,178,62,.10);border-color:rgba(255,178,62,.32);}
.chat__t.is-translated{color:var(--text);}
.chat__t.is-translated::after{content:" 🌐";font-size:10px;opacity:.55;margin-left:2px;}
.chat__t.is-translating{opacity:.55;font-style:italic;}
.chat__time{
font-size:10.5px;font-family:var(--font-m);color:var(--text-faint);
align-self:flex-end;white-space:nowrap;padding-bottom:2px;
}
.chat__quote{
display:flex;flex-direction:column;
background:rgba(255,255,255,.05);border-left:3px solid var(--teal);
padding:4px 8px;border-radius:6px;
font-size:11.5px;line-height:1.35;margin-bottom:2px;max-width:100%;
}
.chat__quote b{font-family:var(--font-m);color:var(--teal);font-weight:600;}
.chat__quote span{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;}
/* System / join row — transient flash. Renders, sits ~3.5s, then
fades and gets removed by JS. Never persists in the log. */
.chat__sys{
text-align:center;font-size:12px;color:var(--text-dim);
padding:4px 0;background:transparent;border:none;
animation:chat-sys-in .25s ease-out;
transition:opacity .5s ease-out, transform .5s ease-out;
}
.chat__sys-name{font-family:var(--font-m);font-weight:700;}
.chat__sys--fade{opacity:0;transform:translateY(-4px);}
@keyframes chat-sys-in{
from{opacity:0;transform:translateY(-4px);}
to {opacity:1;transform:translateY(0);}
}
/* Reply-to preview bar above the input */
.chat__reply{
display:flex;align-items:center;gap:8px;
padding:8px 12px;border-top:1px solid var(--line);background:var(--ink-soft);
font-size:12px;
}
.chat__reply-label{color:var(--text-dim);}
.chat__reply-label b{color:var(--teal);}
.chat__reply-text{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.chat__reply-x{background:transparent;border:0;color:var(--text-faint);cursor:pointer;font-size:14px;padding:2px 6px;}
.chat__reply-x:hover{color:var(--text);}
/* Compose form */
.chat__form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--ink-soft);align-items:center;}
.chat__form input[data-role="msg"]{
flex:1;min-width:0;background:var(--ink);border:1px solid var(--line);color:var(--text);
border-radius:999px;padding:9px 14px;font-size:14px;font-family:inherit;
}
.chat__form input:focus{outline:none;border-color:var(--teal);}
.chat__send{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;
background:var(--teal);color:#000;border:0;cursor:pointer;
transition:filter .15s;
}
.chat__send:hover{filter:brightness(1.08);}
/* Login CTA in place of the compose form when guest — a full-width button. */
.chat__login{
display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;padding:12px 14px;border:0;border-top:1px solid var(--line);
background:var(--ink-soft);font:inherit;font-size:13px;color:var(--text-dim);
text-align:left;cursor:pointer;
transition:background .12s;
}
.chat__login:hover, .chat__login:focus{background:var(--panel);outline:none;}
.chat__login-btn{
background:var(--teal);color:#000;font-family:var(--font-m);font-weight:700;
padding:7px 16px;border-radius:6px;font-size:12.5px;flex-shrink:0;
}
/* Sign-in modal that pops up when a guest clicks the chat */
.chat-login-modal{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
padding:16px;
}
.chat-login-modal[hidden]{display:none;}
.chat-login-modal__scrim{
position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(2px);
animation:cl-fade .18s ease-out;
}
.chat-login-modal__card{
position:relative;background:var(--panel);border:1px solid var(--line);
border-radius:14px;padding:24px 22px 18px;width:100%;max-width:380px;
box-shadow:0 12px 40px rgba(0,0,0,.5);
animation:cl-pop .22s cubic-bezier(.4,1.6,.6,1);
}
.chat-login-modal__x{
position:absolute;top:8px;right:10px;width:30px;height:30px;
background:transparent;border:0;color:var(--text-faint);cursor:pointer;font-size:16px;
border-radius:50%;
}
.chat-login-modal__x:hover{color:var(--text);background:var(--panel-2);}
.chat-login-modal__title{
font-family:var(--font-d);font-size:18px;font-weight:800;margin-bottom:4px;text-align:center;
}
.chat-login-modal__sub{
font-size:12.5px;color:var(--text-dim);text-align:center;margin-bottom:18px;line-height:1.5;
}
.chat-login-modal__btn{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:11px 14px;margin-bottom:8px;border-radius:8px;
text-decoration:none;font-family:var(--font-m);font-weight:600;font-size:13px;
transition:filter .12s;
}
.chat-login-modal__btn:hover{filter:brightness(1.08);}
.chat-login-modal__btn--g{background:#fff;color:#333;}
.chat-login-modal__btn--f{background:#1877F2;color:#fff;}
.chat-login-modal__btn--alt{background:var(--ink);color:var(--text);border:1px solid var(--line);}
.chat-login-modal__logo{
width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.06);
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--font-d);font-weight:800;font-size:13px;
}
.chat-login-modal__btn--f .chat-login-modal__logo{background:rgba(255,255,255,.14);color:#fff;}
.chat-login-modal__or{
display:flex;align-items:center;gap:10px;
color:var(--text-faint);font-size:11px;text-transform:uppercase;letter-spacing:1px;
margin:14px 0 10px;
}
.chat-login-modal__or::before, .chat-login-modal__or::after{
content:"";flex:1;height:1px;background:var(--line);
}
.chat-login-modal__signup{
display:block;text-align:center;margin-top:14px;
font-size:12px;color:var(--text-dim);text-decoration:none;
}
.chat-login-modal__signup b{color:var(--teal);font-family:var(--font-m);}
@keyframes cl-fade{ from{opacity:0} to{opacity:1} }
@keyframes cl-pop { from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:none} }
.chat__hint{padding:12px;color:var(--text-faint);font-size:13px;text-align:center;}
[data-role="hint"]{
padding:8px 12px;font-size:12px;color:var(--amber);
background:rgba(255,178,62,.10);border-top:1px solid rgba(255,178,62,.35);
}
/* Mobile — a bit shorter, adjusted spacing */
@media (max-width:979px){
.chat__log{height:300px;padding:10px 12px;gap:10px;}
.chat__avatar{width:30px;height:30px;}
.chat__bubble{font-size:13.5px;padding:6px 10px;}
}
/* -------- Featured — flip-grid mode ----------------------- */
/* 2×2 on mobile, 3×3 on desktop. Cards outside the current
page get hidden via the [hidden] attribute in JS. */
.fc-flip{position:relative;padding:0 12px;}
.fc-flip__grid{
display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;transition:opacity .28s ease;
}
@media (min-width:900px){
.fc-flip__grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;}
}
.fc-flip__grid.is-swapping{opacity:0;}
.fc-flip__grid > a[hidden]{display:none !important;}
/* No-flash: before JS attaches, only the first row is visible. Once the
flip module boots it adds .fc-flip--ready and switches to controlling
visibility per-card via the [hidden] attribute. Selectors mirror the
pageSize in JS: 2 cards mobile, 3 cards desktop. */
.fc-flip:not(.fc-flip--ready) .fc-flip__grid > a:nth-child(n+3){display:none;}
@media (min-width:900px){
.fc-flip:not(.fc-flip--ready) .fc-flip__grid > a:nth-child(n+4){display:none;}
}
.fc-flip__dots{
display:flex;justify-content:center;gap:6px;margin-top:10px;
}
.fc-flip__dot{
width:8px;height:8px;border-radius:50%;
background:var(--line);border:0;padding:0;cursor:pointer;
transition:background .15s, transform .15s;
}
.fc-flip__dot:hover{background:var(--text-faint);}
.fc-flip__dot.is-active{background:var(--teal);transform:scale(1.3);}
/* -------- Category rail (Football / CF / …) --------------- */
/* Sits between the featured carousel and the date strip on the
homepage. Each chip is a pill link; the active category is
filled with the teal accent. */
.cat-rail{
display:flex;gap:8px;padding:8px 12px;
overflow-x:auto;scrollbar-width:none;
}
.cat-rail::-webkit-scrollbar{display:none;}
.cat-chip{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
padding:8px 14px;border-radius:999px;
background:var(--panel);border:1px solid var(--line);
color:var(--text);text-decoration:none;font-family:var(--font-m);font-weight:600;font-size:13px;
transition:all .12s;
}
.cat-chip:hover{border-color:var(--teal);color:var(--teal);}
.cat-chip.active{
background:var(--teal);color:#000;border-color:var(--teal);
}
.cat-chip__ico{font-size:15px;line-height:1;}
.cat-chip__ico--img{width:18px;height:18px;object-fit:contain;border-radius:3px;}
.cat-chip__lbl{white-space:nowrap;}
/* -------- Pinned-strip marquee (admin toggle) -------------- */
/* Horizontal continuous scroll of the tournament chips at the top
of the homepage. Content is duplicated in PHP so a translateX(-50%)
loop is visually seamless. Hover pauses. */
.pinned-strip--marquee{
overflow:hidden;position:relative;padding:8px 0;
mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
-webkit-mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.pinned-strip--marquee .pinned-strip__track{
display:inline-flex;align-items:center;gap:8px;
white-space:nowrap;will-change:transform;
animation:pin-strip-scroll var(--pin-marquee-secs,30s) linear infinite;
}
.pinned-strip--marquee .pinned-strip__track > span{
display:inline-flex;align-items:center;gap:8px; /* the duplicated aria-hidden block */
}
.pinned-strip--marquee:hover .pinned-strip__track,
.pinned-strip--marquee:focus-within .pinned-strip__track{animation-play-state:paused;}
@keyframes pin-strip-scroll{
from{transform:translateX(0);}
to {transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
.pinned-strip--marquee{mask-image:none;-webkit-mask-image:none;overflow-x:auto;}
.pinned-strip--marquee .pinned-strip__track{animation:none;}
}
/* -------- Sidebar: compact standings + bracket ------------- */
.mini-std{width:100%;border-collapse:collapse;font-size:12px;}
.mini-std td{padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.05);}
.mini-std .rank{width:22px;color:var(--text-faint);font-family:var(--font-m);text-align:right;}
.mini-std .tm{display:flex;align-items:center;gap:6px;min-width:0;}
.mini-std .tm img{width:16px;height:16px;object-fit:contain;flex-shrink:0;}
.mini-std .tm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mini-std .pts{width:32px;text-align:right;font-family:var(--font-m);color:var(--teal);font-weight:700;}
.mini-bracket{padding:6px 0;display:flex;flex-direction:column;gap:4px;}
.mini-bracket__round{
font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px;
margin:6px 0 2px;padding:0 4px;font-family:var(--font-m);
}
.mini-bracket__match{
display:flex;align-items:center;gap:6px;
padding:5px 8px;background:var(--ink);border:1px solid var(--line);border-radius:5px;
font-size:11.5px;color:var(--text);text-decoration:none;
}
.mini-bracket__match:hover{border-color:var(--teal);}
.mini-bracket__match span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mini-bracket__match span:last-child{text-align:right;}
.mini-bracket__match b{color:var(--teal);font-family:var(--font-m);font-size:11.5px;padding:0 4px;}
/* -------- Knockout bracket (bracket.php) -------- */
.bracket{display:flex;gap:16px;padding:14px 16px;overflow-x:auto;scrollbar-width:thin;}
.bracket__col{flex:0 0 240px;display:flex;flex-direction:column;gap:12px;}
.bracket__round{
font-family:var(--font-d);font-size:11.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--teal);text-align:center;
padding:6px 8px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
}
.br-match{
display:flex;flex-direction:column;gap:6px;
background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
padding:10px 12px;color:var(--text);text-decoration:none;
transition:border-color .15s;
}
.br-match:hover{border-color:var(--teal);}
.br-team{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.br-team img{width:20px;height:20px;object-fit:contain;flex:0 0 20px;}
.br-team__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.br-team__score{
font-family:var(--font-m);font-weight:700;color:var(--text-dim);
min-width:24px;text-align:right;
}
.br-team__score.is-winner{color:var(--teal);font-weight:800;}
.br-ext{
font-family:var(--font-m);font-size:11px;color:var(--amber);
border-top:1px dashed var(--line);padding-top:6px;text-align:center;letter-spacing:.04em;
}
.br-ext--ft{color:var(--text-faint);}
.br-ext--ko{color:var(--text-dim);}
/* -------- Overview quick-stats strip (top of Overview) -------- */
.quick-stats{padding:12px 16px;display:flex;flex-direction:column;gap:10px;
background:linear-gradient(180deg,var(--panel-2),transparent);border-radius:12px;margin:12px 16px;border:1px solid var(--line);}
.qs-row{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:10px;}
.qs-num{font-family:var(--font-m);font-weight:800;font-size:18px;text-align:center;}
.qs-num--h{color:var(--teal);}
.qs-num--a{color:var(--amber);}
.qs-bars{display:flex;flex-direction:column;gap:4px;}
.qs-label{font-size:11px;color:var(--text-dim);text-align:center;letter-spacing:.04em;font-weight:600;}
.qs-track{display:flex;height:6px;border-radius:99px;background:var(--ink);overflow:hidden;}
.qs-fill{height:100%;}
.qs-fill--h{background:linear-gradient(90deg,var(--teal),var(--teal-dim));border-radius:99px 0 0 99px;}
.qs-fill--a{background:linear-gradient(90deg,var(--amber),#f38a0f);border-radius:0 99px 99px 0;margin-left:auto;}
@media (max-width:640px){
.quick-stats{margin:10px 12px;padding:10px 12px;gap:8px;}
.qs-num{font-size:15px;}
.qs-label{font-size:10.5px;}
}
/* Small fade when the AJAX tab wrap is being swapped */
#match-tabs-wrap{transition:opacity .18s ease;}
#match-tabs-wrap.is-swapping{opacity:.55;}
/* Nuke every visible Google Translate element while keeping the service
fully functional. The widget still initialises off-screen and rewrites
text nodes — we just refuse to render any of its UI. */
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-combo,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
.goog-te-menu-frame,
.goog-te-menu-value,
.goog-logo-link,
.goog-tooltip,
.goog-tooltip:hover,
iframe.goog-te-menu-frame{
display:none !important;
visibility:hidden !important;
height:0 !important;
width:0 !important;
opacity:0 !important;
pointer-events:none !important;
}
/* Google injects inline style="top: 40px" on when the banner is
present — force it back to zero. Same for margin-top which some
Google templates apply. */
body{top:0 !important;margin-top:0 !important;position:static !important;}
/* Kill the yellow underline / hover balloon on translated words */
.goog-text-highlight{background:transparent !important;box-shadow:none !important;}
font[style]{background-color:transparent !important;}
/* -------- Match-hero CTA buttons -------- */
.hero-cta{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;}
/* Custom live-stream image button */
.hero-live-btn{
background:none;border:none;padding:0;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:transform .12s, filter .15s;
width:80px;
}
.hero-btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 16px;border-radius:99px;font-size:12.5px;font-weight:800;
letter-spacing:.04em;text-decoration:none;border:1.5px solid;
transition:transform .1s, box-shadow .15s;
}
.hero-btn:hover{transform:translateY(-1px);}
.hero-btn:active{transform:scale(.96);}
.hero-btn--predict{
background:linear-gradient(135deg,var(--teal),var(--teal-dim));color:var(--ink);border-color:var(--teal);
box-shadow:0 4px 12px rgba(21,214,181,.3);
font-size:8px;
}
/* Wrapper toggled by the WATCH LIVE button — contains video + ad below. */
.live-stream-wrap{animation:live-slide-in .28s ease-out;}
@keyframes live-slide-in{
from{opacity:0;transform:translateY(-8px);}
to {opacity:1;transform:translateY(0);}
}
/* Inline stream panel — 16:9 fixed aspect, centered */
.live-panel{
width:100%;
aspect-ratio: 16 / 9;
margin: 0 auto 12px;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--panel-2);
box-sizing: border-box;
}
/* Ad slot right under the stream — transparent, no border */
.stream-ad-slot{padding:6px 16px 12px;text-align:center;}
.stream-ad-slot .ad-slot{
background:transparent !important;
border:none !important;
padding:0;margin:0;min-height:0;
}
/* Standalone Match Player ads section — sits either in place of the video
(no channels) or right under it (channels + ads). */
.match-player-ads{padding:8px 16px;}
.match-player-ads .ad-slot{margin:0;}
/* Mini-player ads-only fallback (sidebar, no channels bound) */
.mini-player__ad-only{margin:0 0 14px 0;}
.mini-player__ad-only .ad-slot{margin:0;}
/* -------- Odds tables (Overview tab, one per market) -------- */
.odds-table{width:100%;border-collapse:collapse;font-size:13px;}
.odds-table th,.odds-table td{padding:9px 8px;border-bottom:1px solid var(--line);}
.odds-table th{color:var(--text-faint);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:center;}
.odds-table__bk{display:flex;align-items:center;gap:8px;text-align:left;font-weight:600;}
.odds-table__bk img{width:22px;height:22px;object-fit:contain;flex:0 0 22px;background:#fff;border-radius:4px;padding:2px;}
.odds-table__val{text-align:center;font-family:var(--font-m);font-weight:800;color:var(--teal);}
.odds-table__arrow{width:24px;text-align:center;color:var(--text-faint);font-size:14px;}
/* Row becomes a link when the bookmaker has a redirect URL set in admin */
.odds-row.is-linked{cursor:pointer;transition:background .15s;}
.odds-row.is-linked:hover{background:rgba(21,214,181,.08);}
.odds-row.is-linked:hover .odds-table__arrow{color:var(--teal);}
/* -------- Redemption store -------- */
.prize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.prize-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
overflow:hidden;display:flex;flex-direction:column;}
.prize-card__img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink);display:block;}
.prize-card__img--empty{display:flex;align-items:center;justify-content:center;
font-size:44px;color:var(--text-faint);}
.prize-card__body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.prize-card__name{font-family:var(--font-d);font-weight:700;font-size:14px;}
.prize-card__desc{font-size:12px;color:var(--text-dim);line-height:1.4;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.prize-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px;}
.prize-card__cost{font-family:var(--font-m);font-weight:800;color:var(--teal);font-size:15px;}
.prize-card__stock{font-size:11px;color:var(--text-faint);font-family:var(--font-m);}
.prize-card form .btn{width:100%;}
/* -------- Predictions -------- */
.pred-group{margin:14px 16px;}
.pred-group__head{font-family:var(--font-d);font-size:12.5px;color:var(--teal);
text-align:center;letter-spacing:.05em;padding:6px 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--panel-2);margin-bottom:8px;text-transform:uppercase;}
/* -------- Predictions hero: title + Guide/Sign-in buttons ---- */
.pred-hero{
text-align:center;padding:20px 16px;
background:linear-gradient(180deg, var(--panel-2), transparent 80%);
border-radius:12px;margin:8px 0 16px;
}
.pred-hero__title{margin:0 0 12px;font-size:18px;font-family:var(--font-d);}
.pred-hero__btns{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.pred-hero__btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 18px;border-radius:999px;font-family:var(--font-m);font-weight:700;
font-size:13px;cursor:pointer;text-decoration:none;border:0;
transition:filter .12s, transform .1s;
}
.pred-hero__btn:hover{filter:brightness(1.08);}
.pred-hero__btn:active{transform:scale(.97);}
.pred-hero__btn--guide {background:var(--panel);color:var(--text);border:1px solid var(--line);}
.pred-hero__btn--signin {background:var(--teal);color:#000;}
.pred-hero__me{
margin-top:12px;font-family:var(--font-m);font-size:14px;color:var(--text-dim);
}
.pred-hero__me span{color:var(--teal);font-weight:800;}
/* -------- Guide modal ---------------------------------------- */
.pred-guide{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px;}
.pred-guide[hidden]{display:none;}
.pred-guide__scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(2px);}
.pred-guide__card{
position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
padding:22px 24px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:pg-pop .22s cubic-bezier(.4,1.6,.6,1);
}
@keyframes pg-pop{ from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
.pred-guide__x{
position:absolute;top:10px;right:12px;width:32px;height:32px;
background:transparent;border:0;color:var(--text-faint);cursor:pointer;font-size:16px;
border-radius:50%;
}
.pred-guide__x:hover{color:var(--text);background:var(--panel-2);}
.pred-guide__title{margin:0 0 14px;font-size:18px;font-family:var(--font-d);text-align:center;}
.pred-guide__section{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06);}
.pred-guide__section:last-of-type{border-bottom:0;}
.pred-guide__section h3{
margin:0 0 6px;font-size:14px;font-family:var(--font-d);color:var(--teal);
}
.pred-guide__section h4{
margin:0 0 5px;font-size:13px;font-family:var(--font-m);font-weight:700;color:var(--text);
}
.pred-guide__section p{
margin:0;font-size:13px;line-height:1.65;color:var(--text-dim);
}
.pred-guide__section--parlay{
background:rgba(255,178,62,.06);border:1px dashed var(--amber);border-radius:10px;
padding:12px 14px;border-bottom:0;
}
.pred-guide__section--parlay h3{color:var(--amber);}
.pred-guide__ok{
display:block;width:100%;margin-top:8px;
background:var(--teal);color:#000;border:0;border-radius:8px;
padding:11px 20px;font-family:var(--font-m);font-weight:700;font-size:13.5px;cursor:pointer;
}
.pred-guide__ok:hover{filter:brightness(1.08);}
.pred-card{
display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;
align-items:center;gap:6px 10px;background:var(--panel-2);border:1px solid var(--line);
border-radius:12px;padding:14px 12px;margin:8px 0;
}
.pred-card__team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.pred-card__team img{width:44px;height:44px;object-fit:contain;}
.pred-card__name{font-size:12.5px;font-weight:700;text-align:center;line-height:1.2;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;}
.pred-card__scores{display:flex;align-items:center;gap:10px;justify-content:center;}
.pred-card__scores input{
width:52px;height:52px;background:var(--ink);border:1px solid var(--line);
border-radius:8px;color:var(--text);font-family:var(--font-m);font-weight:800;
font-size:22px;text-align:center;
}
.pred-card__scores input:focus{border-color:var(--teal);outline:none;
box-shadow:0 0 0 3px rgba(21,214,181,.2);}
.pred-card__scores input[readonly]{opacity:.6;}
.pred-card__vs{font-family:var(--font-m);font-weight:800;font-size:14px;color:var(--text);}
.pred-card__foot{
grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;
padding-top:8px;border-top:1px dashed var(--line);
font-size:11.5px;color:var(--text-dim);margin-top:4px;
}
.pred-card__foot .btn{padding:6px 14px;font-size:12px;}
/* -------- Extra markets — Over/Under · BTTS · DC · HT/FT · Parlay -------- */
.pred-card__extras{grid-column:1 / -1;margin-top:12px;}
.pred-card__extras details{
background:linear-gradient(180deg, var(--ink) 0%, var(--panel-2) 100%);
border:1px solid var(--line);border-radius:10px;overflow:hidden;
transition:border-color .15s;
}
.pred-card__extras details[open]{border-color:rgba(0,180,120,.35);}
.pred-card__extras summary{
cursor:pointer;padding:10px 14px;
display:flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;color:var(--text);
list-style:none;user-select:none;
transition:background .12s;
}
.pred-card__extras summary::-webkit-details-marker{display:none;}
.pred-card__extras summary::before{
content:"";width:8px;height:8px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
transform:rotate(-45deg);transition:transform .18s ease;flex-shrink:0;margin-right:2px;
}
.pred-card__extras details[open] summary::before{transform:rotate(45deg);}
.pred-card__extras summary:hover{background:rgba(0,180,120,.05);}
.pred-card__extras-hint{
font-weight:400;color:var(--text-faint);font-size:11px;margin-left:auto;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pred-mkts{
padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
border-top:1px solid var(--line);background:rgba(0,0,0,.15);
}
.pred-mkt{
display:flex;flex-direction:column;gap:6px;
background:var(--panel);border:1px solid var(--line);border-radius:8px;
padding:9px 11px;transition:border-color .12s;
}
.pred-mkt:hover{border-color:rgba(0,180,120,.35);}
.pred-mkt__lbl{
font-size:10.5px;color:var(--text-faint);
font-family:var(--font-m);font-weight:700;
text-transform:uppercase;letter-spacing:.4px;
}
.pred-mkt__opts{display:flex;gap:4px;flex-wrap:wrap;}
.pred-mkt__opt{
cursor:pointer;user-select:none;flex:1;min-width:0;
}
.pred-mkt__opt input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
.pred-mkt__opt span{
display:flex;align-items:center;justify-content:center;
padding:6px 8px;min-width:32px;height:28px;
background:var(--ink);border:1px solid var(--line);border-radius:6px;
font-size:12px;font-family:var(--font-m);font-weight:600;color:var(--text);
transition:all .12s;
}
.pred-mkt__opt:hover span{border-color:var(--teal);color:var(--teal);}
.pred-mkt__opt input:checked + span{
background:var(--teal);color:#000;border-color:var(--teal);
box-shadow:0 2px 6px rgba(0,180,120,.35);
}
.pred-mkt__opt input:disabled + span{opacity:.4;cursor:not-allowed;}
.pred-mkt__opt input:disabled ~ *:hover{border-color:var(--line);color:var(--text);}
/* HT/FT market has 9 options — needs finer sizing */
.pred-mkt:last-of-type .pred-mkt__opts{grid-template-columns:repeat(5, 1fr);display:grid;gap:3px;}
.pred-mkt:last-of-type .pred-mkt__opt{flex:none;}
.pred-mkt:last-of-type .pred-mkt__opt span{padding:5px 4px;font-size:11px;min-width:0;}
/* Parlay callout — spans full grid width, gold accent */
.pred-parlay{
grid-column:1 / -1;
display:flex;align-items:center;gap:12px;
padding:12px 14px;margin-top:2px;
background:linear-gradient(135deg, rgba(255,178,62,.10), rgba(255,178,62,.02));
border:1px solid rgba(255,178,62,.4);border-radius:10px;
font-size:13px;cursor:pointer;
transition:all .12s;
}
.pred-parlay:hover{border-color:var(--amber);background:linear-gradient(135deg, rgba(255,178,62,.15), rgba(255,178,62,.04));}
.pred-parlay:has(input:checked){
background:linear-gradient(135deg, rgba(255,178,62,.22), rgba(255,178,62,.06));
border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,178,62,.15);
}
.pred-parlay__box{
flex-shrink:0;width:22px;height:22px;
border:2px solid var(--amber);border-radius:5px;
display:flex;align-items:center;justify-content:center;
background:var(--ink);transition:all .15s;
}
.pred-parlay input{position:absolute;opacity:0;pointer-events:none;}
.pred-parlay input:checked ~ .pred-parlay__box{background:var(--amber);}
.pred-parlay input:checked ~ .pred-parlay__box::after{content:"✓";color:#000;font-weight:900;font-size:14px;line-height:1;}
.pred-parlay__body{flex:1;min-width:0;line-height:1.4;}
.pred-parlay__body b{font-family:var(--font-d);font-size:14px;color:var(--amber);display:block;margin-bottom:2px;}
.pred-parlay__hint{color:var(--text-dim);font-size:11.5px;line-height:1.5;}
.pred-parlay__hint b{display:inline;font-size:inherit;color:var(--amber);}
@media (max-width:640px){
.pred-mkts{grid-template-columns:1fr;padding:12px;gap:8px;}
.pred-mkt{padding:10px;}
.pred-mkt:last-of-type .pred-mkt__opts{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:640px){
.pred-card{padding:12px 8px;gap:4px 6px;}
.pred-card__team img{width:36px;height:36px;}
.pred-card__scores input{width:44px;height:44px;font-size:18px;}
.pred-card__name{font-size:11.5px;max-width:82px;}
}
/* -------- Favourite stars -------- */
.fav-star{
background:transparent;border:none;color:var(--text-faint);
font-size:18px;line-height:1;padding:4px 8px;cursor:pointer;
transition:color .15s,transform .1s;
}
.fav-star:hover{color:var(--amber);transform:scale(1.15);}
.fav-star:active{transform:scale(.92);}
.fav-star.is-fav{color:var(--amber);text-shadow:0 0 12px rgba(255,178,62,.5);}
.fav-star--big{font-size:26px;padding:6px 10px;}
.fav-star--sm{font-size:14px;padding:2px 6px;margin-left:auto;}
/* Star tucked into a match card row */
.m-fav{margin-left:2px;color:var(--text-faint);font-size:14px;}
.m-fav.is-fav{color:var(--amber);}
.fav-remove{
background:transparent;border:1px solid var(--line);border-radius:6px;
color:var(--text-faint);width:26px;height:26px;cursor:pointer;font-size:12px;
display:inline-flex;align-items:center;justify-content:center;
margin-left:auto;transition:color .15s,border-color .15s;
}
.fav-remove:hover{color:var(--red);border-color:var(--red);}
/* -------- Toast -------- */
.toast{
position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));
transform:translateX(-50%) translateY(20px);
background:var(--panel);border:1px solid var(--line);color:var(--text);
padding:10px 18px;border-radius:999px;font-size:12.5px;font-weight:600;
z-index:200;opacity:0;pointer-events:none;
transition:opacity .2s,transform .2s;
box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}
@media (min-width:980px){.toast{bottom:32px;}}
/* -------- Featured-matches carousel (14 cards, horizontal scroll) -------- */
/* Layout: [ < card ][ card ][ card ]… > ] — arrows are teal pills
floating over the left/right edges of the track. */
.featured-carousel{margin:14px 16px;position:relative;}
.featured-carousel__track{display:flex;gap:10px;overflow-x:auto;
scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;}
.featured-carousel__track::-webkit-scrollbar{display:none;}
.fc-btn{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
color:var(--text);cursor:pointer;font-weight:800;line-height:1;
display:flex;align-items:center;justify-content:center;}
.fc-btn:hover{filter:brightness(1.1);}
.fc-btn:active{transform:scale(.94);}
.fc-btn--overlay{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:34px;height:44px;font-size:22px;border:none;
background:linear-gradient(135deg,var(--teal),var(--teal-dim));
color:var(--ink);
box-shadow:0 6px 16px rgba(21,214,181,.35), 0 2px 4px rgba(0,0,0,.4);
}
.fc-btn--overlay:hover{
background:linear-gradient(135deg,#22e6c4,var(--teal));
color:var(--ink);
}
.fc-btn--overlay:active{transform:translateY(-50%) scale(.94);}
.fc-btn--left{left:-4px;}
.fc-btn--right{right:-4px;}
.fc-card{flex:0 0 240px;scroll-snap-align:start;background:var(--panel-2);border:1px solid var(--line);
border-radius:12px;padding:12px;text-decoration:none;color:var(--text);
display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .1s;}
.fc-card:hover{border-color:var(--teal);transform:translateY(-1px);}
.fc-card__lg{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-faint);font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fc-card__lg img{width:12px;height:12px;object-fit:contain;flex:0 0 12px;}
.fc-card__body{display:flex;flex-direction:column;gap:6px;}
.fc-card__team{display:flex;align-items:center;gap:8px;font-size:13px;}
.fc-card__team img{width:20px;height:20px;object-fit:contain;flex:0 0 20px;}
.fc-card__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fc-card__g{font-family:var(--font-m);font-weight:700;font-size:14px;width:20px;text-align:right;}
.fc-card__foot{text-align:right;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.pill--kick{background:transparent;border-color:var(--line);color:var(--text-dim);}
.pill--countdown{
font-family:var(--font-m);letter-spacing:.06em;
background:rgba(255,178,62,.12);color:var(--amber);
border-color:rgba(255,178,62,.35);
}
.pill--day{
background:rgba(21,214,181,.10);color:var(--teal);
border-color:rgba(21,214,181,.35);font-weight:700;
}
/* Match-card kickoff cell: date line under the time */
.m-time .d{font-family:var(--font-b);font-size:10px;color:var(--teal);
margin-top:1px;letter-spacing:.03em;font-weight:700;}
/* -------- Ad slider (rotates every 5s when >1 banner matches) -------- */
.ad-slider{position:relative;min-height:60px;}
.ad-slider .ad-slide{display:none;}
.ad-slider .ad-slide.is-active{display:block;}
/* -------- Gear-menu drawer -------- */
.drawer{position:fixed;inset:0;z-index:120;pointer-events:none;}
.drawer.is-open{pointer-events:auto;}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);
opacity:0;transition:opacity .2s;}
.drawer.is-open .drawer__scrim{opacity:1;}
.drawer__panel{
position:absolute;top:0;right:0;bottom:0;width:min(360px, 88vw);
background:var(--panel);border-left:1px solid var(--line);
transform:translateX(100%);transition:transform .22s ease;
display:flex;flex-direction:column;overflow-y:auto;
padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.drawer.is-open .drawer__panel{transform:translateX(0);}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:1px solid var(--line);}
.drawer__title{font-family:var(--font-d);font-weight:700;font-size:16px;}
.drawer__x{background:transparent;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:4px 8px;}
.drawer__section{padding:14px 18px;border-bottom:1px solid var(--line);}
.drawer__label{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.drawer__btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
font-weight:600;font-size:13.5px;margin-bottom:8px;border:1px solid var(--line);background:var(--ink);color:var(--text);
text-decoration:none;transition:transform .1s;}
.drawer__btn:hover{transform:translateY(-1px);}
.drawer__logo{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
border-radius:50%;background:#fff;color:#000;font-family:var(--font-d);font-weight:800;font-size:14px;}
.drawer__btn--google{background:#fff;color:#3c4043;border-color:#dadce0;}
.drawer__btn--fb {background:#1877f2;color:#fff;border-color:#1877f2;}
.drawer__btn--fb .drawer__logo{background:#fff;color:#1877f2;}
.drawer__btn--alt {background:var(--panel-2);}
.drawer__divider{display:flex;align-items:center;gap:8px;color:var(--text-faint);font-size:11px;margin:8px 0;}
.drawer__divider::before,.drawer__divider::after{content:"";flex:1;height:1px;background:var(--line);}
.drawer__row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;}
.drawer__row select{background:var(--ink);color:var(--text);border:1px solid var(--line);
border-radius:6px;padding:5px 10px;font-family:inherit;}
/* Language picker — real flag images */
.lang-picker{position:relative;}
.lang-picker__btn{
display:inline-flex;align-items:center;gap:6px;
background:var(--ink);color:var(--text);
border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;
font-family:inherit;font-size:13px;
min-width:150px;justify-content:flex-start;
}
.lang-picker__btn > span[data-role="lang-name"]{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lang-picker__item[data-lang="ar"],
.lang-picker__item[data-lang="ur"]{direction:rtl;}
.lang-picker__btn img{width:22px;height:16px;object-fit:cover;border-radius:2px;flex:0 0 22px;}
.lang-picker__caret{color:var(--text-faint);font-size:10px;margin-left:2px;}
.lang-picker__menu{
position:absolute;top:100%;right:0;margin-top:6px;z-index:130;
background:var(--panel);border:1px solid var(--line);border-radius:10px;
min-width:200px;max-height:60vh;overflow-y:auto;
box-shadow:0 10px 28px rgba(0,0,0,.5);
padding:4px;
}
.lang-picker__item{
display:flex;align-items:center;gap:9px;
width:100%;background:transparent;border:none;
padding:8px 10px;border-radius:6px;
color:var(--text);font-family:inherit;font-size:13px;text-align:left;cursor:pointer;
}
.lang-picker__item img{width:22px;height:16px;object-fit:cover;border-radius:2px;flex:0 0 22px;}
.lang-picker__item:hover{background:var(--panel-2);}
.drawer__link{display:block;padding:8px 0;color:var(--text);text-decoration:none;font-size:13px;}
.drawer__link:hover{color:var(--teal);}
.drawer__me{display:flex;align-items:center;gap:10px;}
.drawer__avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);
color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;}
.drawer__foot{padding:16px 18px;font-size:11px;color:var(--text-faint);text-align:center;}
.drawer__foot a{color:var(--text-dim);}
/* -------- 365scores-style side rail widgets -------- */
.side-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.side-card__head h4{margin:0;}
.side-card__more{font-size:11px;color:var(--teal);font-weight:700;}
.side-card--hot{padding-bottom:8px;}
.hot-rail{display:flex;flex-direction:column;gap:8px;}
.hot-card{display:block;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 10px 8px;transition:transform .1s,border-color .15s;}
.hot-card:hover{border-color:var(--teal);transform:translateY(-1px);}
.hot-card__lg{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-faint);margin-bottom:6px;font-weight:600;}
.hot-card__lg img{width:12px;height:12px;object-fit:contain;}
.hot-card__row{display:flex;align-items:center;justify-content:space-between;padding:2px 0;font-size:12.5px;}
.hot-card__team{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.hot-card__team img{width:16px;height:16px;object-fit:contain;flex:0 0 16px;}
.hot-card__team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hot-card__score{font-family:var(--font-m);font-weight:700;font-size:13.5px;color:var(--text);width:20px;text-align:right;}
.hot-card__foot{margin-top:6px;text-align:right;}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--panel);border:1px solid var(--line);
font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--text-dim);font-family:var(--font-m);}
.pill--live{background:rgba(255,92,92,.14);color:var(--red);border-color:rgba(255,92,92,.4);}
/* mobile — turn the hot rail into a swipeable strip */
@media (max-width:979px){
.side-col{display:block;padding:12px 16px 0;}
.side-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;}
.hot-rail{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;padding-bottom:4px;}
.hot-rail::-webkit-scrollbar{display:none;}
.hot-card{flex:0 0 82%;scroll-snap-align:start;}
}
/* TV widget */
.tv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.tv-chip{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:11px;color:var(--text-dim);}
.tv-chip__ico{font-size:12px;}
.tv-chip__nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* -------- Match-page LIVE tab (eye-catching red pill) -------- */
.tabs a.tab--live{
background:linear-gradient(135deg,#ff3b3b,#ff5c5c);
color:#fff;border-color:#ff3b3b;
box-shadow:0 2px 8px rgba(255,59,59,.35);
animation:live-pulse 1.6s ease-in-out infinite;
font-weight:800;
}
.tabs a.tab--live.active{
background:linear-gradient(135deg,#ff5c5c,#ff8a8a);
color:#fff;border-color:#ff5c5c;
}
.tabs a.tab--live:hover{transform:translateY(-1px);}
@keyframes live-pulse{
0%,100%{box-shadow:0 2px 8px rgba(255,59,59,.35);}
50% {box-shadow:0 2px 16px rgba(255,59,59,.75);}
}
/* -------- Match-page full-width player (inside the LIVE tab) -------- */
.section--player{padding:12px 16px;}
.match-player{
background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;
box-shadow:0 8px 22px rgba(0,0,0,.35);
display:flex;flex-direction:column;height:100%;
}
/* Channel tabs — pill style, only rendered when 2+ streams */
.match-player__tabs{
display:flex;gap:4px;padding:6px;
background:rgba(0,0,0,.6);border-bottom:1px solid var(--line);
backdrop-filter:blur(6px);
}
.match-player__tab{
flex:1;background:transparent;color:var(--text-dim);
border:1px solid rgba(255,255,255,.12);
padding:6px 12px;border-radius:8px;
font-size:12px;font-weight:800;letter-spacing:.06em;
font-family:var(--font-m);cursor:pointer;transition:all .15s;
}
.match-player__tab:hover{color:var(--text);background:rgba(255,255,255,.06);}
.match-player__tab.is-active{
background:linear-gradient(135deg,var(--teal),var(--teal-dim));
color:var(--ink);border-color:var(--teal);
box-shadow:0 3px 10px rgba(21,214,181,.35);
}
.match-player__stage{position:relative;background:#000;flex:1;width:100%;height:80%;}
.match-player__stage video,
.match-player__stage iframe{width:100%;height:100%;border:none;display:block;background:#000;}
.match-player__ad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:var(--panel-2);color:var(--text-dim);font-size:13px;padding:16px;text-align:center;overflow:hidden;}
.match-player__ad .ad-slot{margin:0;border:none;background:transparent;min-height:0;width:100%;height:100%;}
/* -------- Mini video player (fixture-scoped, no chrome) -------- */
.mini-player{
position:fixed;
right:12px;
bottom:calc(70px + env(safe-area-inset-bottom)); /* above bottom nav on mobile */
width:280px;
background:#000;
border:1px solid var(--line);
border-radius:12px;
overflow:hidden;
z-index:60;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.mini-player__tabs{
display:flex;gap:3px;padding:4px;
background:rgba(0,0,0,.55);border-bottom:1px solid var(--line);
}
.mini-player__tab{
flex:1;background:transparent;color:var(--text-dim);
border:1px solid rgba(255,255,255,.12);
padding:4px 8px;border-radius:6px;font-size:11px;font-weight:800;
letter-spacing:.05em;font-family:var(--font-m);cursor:pointer;transition:all .15s;
}
.mini-player__tab:hover{color:var(--text);background:rgba(255,255,255,.06);}
.mini-player__tab.is-active{
background:linear-gradient(135deg,var(--teal),var(--teal-dim));
color:var(--ink);border-color:var(--teal);
box-shadow:0 2px 6px rgba(21,214,181,.3);
}
.mini-player__stage{position:relative;background:#000;aspect-ratio:16/9;width:100%;min-height:150px;}
.mini-player__stage video,
.mini-player__stage iframe{width:100%;height:100%;border:none;display:block;background:#000;}
.mini-player__ad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:var(--panel-2);color:var(--text-dim);font-size:11px;padding:8px;text-align:center;overflow:hidden;}
.mini-player__ad .ad-slot{margin:0;border:none;background:transparent;min-height:0;width:100%;height:100%;}
/* Desktop: dock inside the side rail */
@media (min-width:980px){
.mini-player{
position:static;
width:100%;
min-width:240px;
margin:0 0 14px 0;
box-shadow:none;
}
}
/* Section title (matches 365scores "Popular Football Leagues" heading) */
.section-title{
padding:12px 16px 6px;font-family:var(--font-d);font-size:13px;color:var(--text);
font-weight:700;letter-spacing:.02em;
}
/* Pinned events strip (top row across the page) */
.pinned-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 10px;
scrollbar-width:none;border-bottom:1px solid var(--line);background:var(--ink-soft);}
.pinned-strip::-webkit-scrollbar{display:none;}
.pinned-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);
font-size:11.5px;color:var(--text);font-weight:600;}
.pinned-chip:hover{border-color:var(--teal);color:var(--teal);}
.pinned-chip img{width:14px;height:14px;object-fit:contain;}
/* Breadcrumb */
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 16px;
font-size:12px;color:var(--text-dim);border-bottom:1px solid var(--line);}
.crumbs__item{color:var(--text-dim);}
.crumbs__item--current{color:var(--text);font-weight:600;}
.crumbs__sep{color:var(--text-faint);font-size:14px;}
.crumbs a:hover{color:var(--teal);}
/* Featured match hero (365scores center panel) */
.featured{margin:12px 16px;background:linear-gradient(180deg,var(--panel-2),var(--ink));
border:1px solid var(--line);border-radius:12px;padding:14px 14px 4px;overflow:hidden;position:relative;}
.featured__head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;margin-bottom:6px;}
.featured__badge{background:var(--panel);border:1px solid var(--line);color:var(--text-dim);
padding:3px 10px;border-radius:99px;font-weight:700;font-size:10.5px;letter-spacing:.05em;}
.featured__lg{color:var(--text-dim);font-weight:600;}
.featured__lg:hover{color:var(--teal);}
.featured__count{text-align:center;font-family:var(--font-m);font-weight:700;font-size:32px;letter-spacing:.06em;padding:6px 0 4px;color:var(--text);}
.featured__count--live{color:var(--red);font-size:16px;letter-spacing:.08em;}
.featured__count--done{color:var(--text-dim);font-size:16px;letter-spacing:.08em;}
.featured__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;}
.featured__team{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.featured__team img{width:56px;height:56px;object-fit:contain;}
.featured__name{font-family:var(--font-d);font-size:14px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
.featured__center{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font-m);}
.featured__vs{color:var(--text-faint);font-weight:700;font-size:12px;letter-spacing:.1em;}
.featured__score{font-size:22px;font-weight:800;color:var(--text);}
.featured__score span{color:var(--text-faint);margin:0 4px;}
.featured__meta{text-align:center;font-size:11px;color:var(--text-dim);padding:6px 0 12px;}
.featured__tabs{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding-top:8px;margin:0 -14px;background:var(--ink);}
.featured__tabs a{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:8px 4px;
font-size:11px;color:var(--text-dim);font-weight:600;border-bottom:2px solid transparent;}
.featured__tabs a span{font-size:18px;}
.featured__tabs a.active{color:var(--teal);border-color:var(--teal);}
.featured__tabs a:hover{color:var(--text);}
/* Match hero polish — bigger team logos + LIVE pill (365scores mobile style) */
.match-hero{padding:20px 16px 18px;text-align:center;background:radial-gradient(circle at top,rgba(21,214,181,.08),transparent 55%),var(--panel-2);border-bottom:1px solid var(--line);}
.match-hero .row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.match-hero .team img{width:64px;height:64px;}
.match-hero .team .name{font-family:var(--font-d);font-size:15px;text-align:center;font-weight:700;}
.match-hero .score{font-family:var(--font-m);font-weight:800;font-size:40px;letter-spacing:.02em;color:var(--text);}
.match-hero .status{display:inline-block;padding:4px 12px;border-radius:99px;
background:linear-gradient(135deg,rgba(255,92,92,.9),rgba(255,60,60,.9));
color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;font-family:var(--font-m);
box-shadow:0 4px 12px rgba(255,60,60,.25);margin-bottom:8px;}
/* Desktop grid — sport rail is now horizontal (below header/pinned strip),
grid collapses to 2 cols: main-col + side-col */
@media (min-width:980px){
body{padding:32px 0;}
.app{max-width:1240px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto auto auto auto 1fr;}
.region-bar {grid-column:1/3;}
.header {grid-column:1/3;padding:18px 22px 0;display:flex;align-items:center;justify-content:space-between;}
.header-row {flex:1;}
.header .search {flex:0 0 360px;margin-top:0;}
.sport-rail {grid-column:1/3;flex-direction:row;padding:12px 22px;border-bottom:1px solid var(--line);}
.sport-chip {flex:0 0 auto;flex-direction:row;min-width:0;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;}
.sport-chip.active{background:var(--panel-2);}
.sport-chip .ico{width:26px;height:26px;border-radius:7px;font-size:13px;}
.sport-chip .lbl{font-size:12.5px;}
.pinned-strip {grid-column:1/3;padding:8px 22px;}
.main-col {grid-column:1;border-right:1px solid var(--line);overflow-y:auto;max-height:80vh;}
.date-strip {padding:12px 18px;}
.filter-row {padding:10px 18px 4px;}
.side-col {grid-column:2;padding:18px;overflow-y:auto;max-height:80vh;display:block;}
.bottom-nav {display:none;}
.featured {margin:14px 18px;}
.featured__team img{width:64px;height:64px;}
.featured__count{font-size:38px;}
}
/* ==========================================================================
Mobile polish (max-width: 979px)
Region-bar is gone, so we own the top of the viewport now. Tighten every
surface, add a sticky sport rail, round the icon buttons, stack the two
segmented controls in the filter row, shrink the featured cards, glassy
bottom nav with an active-pill indicator.
========================================================================== */
@media (max-width:979px){
/* App shell — remove the desktop side borders on mobile so content
goes edge-to-edge, and add a tiny gradient behind the header so it
reads as a UI band, not floating text. */
.app{border-left:none;border-right:none;
background:linear-gradient(180deg,var(--ink-soft) 0,var(--ink) 220px);}
/* Header — tight, punchy, tap targets are real 36px circles */
.header{padding:14px 14px 0;}
.brand-mark{width:34px;height:34px;border-radius:10px;font-size:15px;}
.brand-name{font-size:18px;letter-spacing:-.015em;}
.header-icons{gap:8px;font-size:18px;align-items:center;}
.header-icons a,
.header-icons button{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:50%;
background:var(--panel-2);border:1px solid var(--line);
color:var(--text);
}
/* The gear is its own icon button — kill the circle chip look. */
.header-icons button.gear-btn{
background:transparent;border:none;width:auto;height:auto;
}
.header-icons button#menu-btn{color:var(--teal);}
.header-icons a:active,
.header-icons button:active{transform:scale(.94);}
/* Search bar */
.search{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:13px;}
.search input{font-size:14px;}
/* Sport rail — sticky under scroll for one-tap sport switching */
.sport-rail{position:sticky;top:0;z-index:15;
padding:12px 14px 6px;gap:6px;
background:rgba(10,22,40,.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid rgba(34,52,76,.5);}
.sport-chip{min-width:52px;}
.sport-chip .ico{width:38px;height:38px;border-radius:11px;font-size:16px;}
.sport-chip .lbl{font-size:10px;}
.sport-chip.active .ico{
background:linear-gradient(135deg,rgba(21,214,181,.22),rgba(21,214,181,.05));
border-color:var(--teal);
box-shadow:0 4px 12px rgba(21,214,181,.15);
}
/* Pinned events strip — smaller pills */
.pinned-strip{padding:6px 14px 8px;gap:6px;}
.pinned-chip{padding:5px 10px;font-size:10.5px;}
.pinned-chip img{width:12px;height:12px;}
/* Date strip — spacious pills */
.date-strip{padding:6px 14px 12px;gap:6px;}
.date-pill{padding:7px 13px;font-size:11.5px;border-radius:99px;}
.date-pill.active{box-shadow:0 3px 10px rgba(232,237,244,.15);}
/* Filter row — stack the two segs so nothing wraps mid-word */
.filter-row{flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px 4px;}
.filter-row .seg{width:100%;margin-left:0 !important;}
.filter-row .seg a,
.filter-row .seg button{flex:1;text-align:center;padding:7px 6px;font-size:11.5px;}
/* Section titles — a subtle left accent */
.section-title{padding:16px 14px 6px;font-size:13px;position:relative;}
.section-title::before{
content:"";position:absolute;left:14px;bottom:2px;
width:22px;height:2px;background:var(--teal);border-radius:99px;
}
/* Featured carousel — smaller cards, tighter spacing */
.featured-carousel{margin:14px 12px;}
.fc-btn--overlay{width:28px;height:38px;font-size:18px;border-radius:8px;}
.fc-card{flex:0 0 205px;padding:10px;border-radius:11px;}
.fc-card__lg{font-size:10px;}
.fc-card__team{font-size:12.5px;}
.fc-card__team img{width:18px;height:18px;flex-basis:18px;}
.fc-card__g{font-size:13px;width:18px;}
/* League groups + match cards */
.league-group{margin-top:14px;}
.league-head{padding:0 14px 6px;font-size:12px;font-weight:700;}
.match-card{padding:12px 14px;gap:12px;transition:background .1s;}
.match-card:active{background:var(--panel-2);}
.m-team{font-size:13px;gap:9px;}
.m-team .dot{width:20px;height:20px;}
.m-score{font-size:14px;}
.m-time .live{font-size:10px;}
.m-time .min{font-size:11px;}
/* Match hero — the whole page hinges on this */
.match-hero{padding:22px 14px 18px;}
.match-hero .row{gap:10px;}
.match-hero .team img{width:58px;height:58px;}
.match-hero .team .name{font-size:13.5px;font-weight:700;margin-top:4px;}
.match-hero .score{font-size:38px;letter-spacing:.03em;}
.match-hero .status{font-size:11px;padding:4px 11px;}
.match-hero .meta{font-size:10.5px;}
/* Breadcrumb + tabs */
.crumbs{padding:10px 14px;font-size:11.5px;gap:5px;}
.tabs{padding:8px 14px;gap:4px;}
.tabs a{padding:7px 11px;font-size:11.5px;}
.tabs a.tab--live{padding:7px 13px;}
/* Sections + list rows */
.section{padding:14px 14px;}
.section h3{font-size:12px;letter-spacing:.08em;}
.list-row{padding:10px 0;font-size:13px;gap:11px;}
/* Bottom nav — truly pinned to the viewport bottom */
.bottom-nav{
position:fixed;left:0;right:0;bottom:0;z-index:30;
max-width:480px;margin:0 auto; /* mirror the .app centered column */
background:rgba(20,38,57,.92);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-top:1px solid rgba(34,52,76,.7);
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
/* Reserve viewport space at the bottom of the page so content
never disappears behind the pinned nav (incl. iOS safe-area). */
.app{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
.nav-item{padding:8px 0;gap:3px;font-size:10px;position:relative;transition:color .15s;}
.nav-item .ico{font-size:20px;transition:transform .15s;}
.nav-item.active .ico{transform:translateY(-1px) scale(1.08);}
.nav-item.active::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:26px;height:3px;background:var(--teal);
border-radius:0 0 4px 4px;box-shadow:0 0 8px rgba(21,214,181,.5);
}
/* Match "LIVE" tab pulse — softer on mobile so it's not overwhelming */
.tabs a.tab--live{animation-duration:2.2s;}
/* Mini player — a bit smaller so it doesn't dominate the viewport */
.mini-player{width:260px;right:10px;bottom:calc(66px + env(safe-area-inset-bottom));
box-shadow:0 8px 22px rgba(0,0,0,.55);}
/* Featured match hero (homepage — replaced by carousel but kept for admin preview) */
.featured{margin:12px 14px;padding:14px 12px 4px;}
.featured__team img{width:48px;height:48px;}
.featured__count{font-size:28px;}
.featured__name{font-size:13px;max-width:100px;}
/* Side rail (below-fold on mobile) — trim padding */
.side-col{padding:0 14px 20px;}
.side-card{padding:12px;border-radius:11px;}
.side-card h4{font-size:12.5px;}
/* Ads */
.ad-slot{margin:10px 14px;}
/* Ensure images inside ad HTML never overflow the tight mobile slot */
.ad-slot img{max-width:100%;height:auto;display:block;}
}
/* ================ Shared loading indicator ================
Use for any long-running async op, native app splash-ins, or slow
AJAX. Drop this into your markup where you want the spinner:
For a full-page overlay, add the --overlay modifier:
*/
.app-loader{display:flex;align-items:center;justify-content:center;padding:32px 12px;}
.app-loader img{width:96px;height:auto;display:block;}
.app-loader--overlay{
position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;
display:flex;align-items:center;justify-content:center;padding:0;
}
.app-loader--overlay img{width:140px;}
.app-loader--inline{padding:8px 0;}
.app-loader--inline img{width:44px;}
