/* ============================================================
   Fawa Sports — tokens
   Layout: sticky header, notice/toolbar strip, chip filter row,
   grouped card grid on the home view; breadcrumb + 16:9 player
   with click-to-play poster and source tabs on the event view.
   ============================================================ */
:root{
  --bg: hsl(30 25% 97%);
  --surface: hsl(0 0% 100%);
  --surface-2: hsl(30 20% 93%);
  --border: hsl(30 15% 86%);
  --text: hsl(220 20% 14%);
  --text-dim: hsl(220 10% 42%);
  --accent: hsl(9 82% 54%);
  --accent-ink: hsl(0 0% 100%);
  --live: hsl(9 82% 54%);
  --shadow: 0 1px 2px hsl(220 20% 14% / 0.04), 0 6px 16px hsl(220 20% 14% / 0.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: hsl(222 20% 8%);
    --surface: hsl(222 18% 11%);
    --surface-2: hsl(222 16% 15%);
    --border: hsl(222 14% 20%);
    --text: hsl(30 20% 95%);
    --text-dim: hsl(220 10% 65%);
    --accent: hsl(9 85% 58%);
    --accent-ink: hsl(0 0% 100%);
    --live: hsl(9 85% 60%);
    --shadow: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 20px hsl(0 0% 0% / 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: hsl(222 20% 8%);
  --surface: hsl(222 18% 11%);
  --surface-2: hsl(222 16% 15%);
  --border: hsl(222 14% 20%);
  --text: hsl(30 20% 95%);
  --text-dim: hsl(220 10% 65%);
  --accent: hsl(9 85% 58%);
  --accent-ink: hsl(0 0% 100%);
  --live: hsl(9 85% 60%);
  --shadow: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 20px hsl(0 0% 0% / 0.35);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Work Sans', system-ui, -apple-system, sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:860px;margin:0 auto;padding-inline:20px}

.topbar{height:4px;background:linear-gradient(90deg, var(--accent), hsl(28 85% 58%));}

/* header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding-block:14px;
}
.header-inner{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text)}
.brand-flame{color:var(--accent); flex:none}
.brand-word{
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:800;
  font-size:26px;
  letter-spacing:0.5px;
}
.brand-word em{color:var(--accent); font-style:normal}
.tagline{margin:0; color:var(--text-dim); font-size:13px}

main.wrap{padding-block:22px 48px}

.page-title{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; font-size:26px; letter-spacing:.2px;
  margin:0 0 6px;
}
.page-intro{
  margin:0 0 16px; max-width:62ch;
  color:var(--text-dim); font-size:13px;
}

/* notice */
.notice{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:16px;
}
.notice-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* toolbar */
.toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.refresh-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:999px;
  padding:8px 16px; font:inherit; font-weight:600; font-size:13px;
  cursor:pointer; box-shadow:var(--shadow);
}
.refresh-btn:hover{border-color:var(--accent); color:var(--accent)}
.refresh-btn:disabled{opacity:.55; cursor:default; color:var(--text-dim); border-color:var(--border)}
.refresh-btn svg{transition:transform .5s ease}
.refresh-btn.spinning svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.updated-at{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-dim)}

/* chips */
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.chip{
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); border-radius:999px;
  padding:6px 13px; font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.chip[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.chip .n{opacity:.7; font-weight:500}

/* sections */
.section-title{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; font-size:14px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-dim); margin:26px 0 10px;
  display:flex; align-items:center; gap:8px;
}
.section-title:first-child{margin-top:0}
.section-title .pulse{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent);animation:pulse 1.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.card-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
@media (max-width:560px){ .card-grid{grid-template-columns:minmax(0, 1fr)} }

.card{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:11px 12px; text-align:left; cursor:pointer; position:relative;
  font:inherit; color:var(--text); width:100%; min-width:0;
}
.card:hover{border-color:var(--accent)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:11px;
  color:#fff; letter-spacing:.3px; overflow:hidden;
}
.icon.has-badge{background:#fff; border:1px solid var(--border); padding:5px}
.icon.has-badge img{width:100%; height:100%; object-fit:contain}
.icon.poster-icon{width:44px; height:44px}
.card-body{min-width:0; flex:1}
.card-title{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card-meta{display:flex; align-items:center; gap:6px; margin-top:2px; font-size:12px; color:var(--text-dim)}
.badge-live{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--live); font-weight:700; font-size:11px; letter-spacing:.3px;
}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
.card-time{font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums}

.kebab{
  flex:none; width:26px; height:26px; border-radius:50%; border:none; background:transparent;
  color:var(--text-dim); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kebab:hover{background:var(--surface-2); color:var(--text)}

.empty{color:var(--text-dim); font-size:13px; padding:30px 0; text-align:center}

/* ===== event view ===== */
#view-event{padding-top:4px}
.crumbs{font-size:12.5px; color:var(--text-dim); margin-bottom:14px}
.crumbs a{color:var(--accent); text-decoration:none; font-weight:600}
.crumbs a:hover{text-decoration:underline}

.ev-title{
  font-family:'Big Shoulders Display', sans-serif; font-weight:800;
  font-size:clamp(24px, 4vw, 34px); line-height:1.1; margin:0 0 8px; text-wrap:balance;
}
.ev-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; font-size:13px; color:var(--text-dim)}
.ev-cat{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
  padding:4px 10px; border-radius:999px; color:#fff; font-size:11.5px; letter-spacing:.3px;
}
.ev-time{font-family:'IBM Plex Mono', monospace}

.ev-notice{
  display:flex; align-items:flex-start; gap:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; font-size:12.5px; color:var(--text-dim); margin-bottom:14px;
}
.ev-notice svg{flex:none; margin-top:1px; color:var(--accent)}
.link-btn{
  background:none; border:none; padding:0; margin:0; font:inherit;
  color:var(--accent); font-weight:600; cursor:pointer; text-decoration:underline;
}

.source-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.source-tab{
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim);
  border-radius:8px; padding:7px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.source-tab[aria-selected="true"]{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface))}

.player{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player-poster{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(circle at 50% 40%, hsl(222 25% 20%), hsl(222 30% 7%));
}
.play-btn{
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
}
.play-btn svg{margin-left:3px}
.play-btn:hover{filter:brightness(1.08)}
.poster-caption{color:hsl(0 0% 100% / 0.75); font-size:12.5px; font-family:'IBM Plex Mono', monospace}

.fine-print{color:var(--text-dim); font-size:12px; margin-top:14px}

/* about / seo copy */
.seo-content{
  margin-top:44px; padding-top:28px; border-top:1px solid var(--border);
  max-width:68ch; color:var(--text-dim); font-size:14px;
}
.seo-content h2{
  font-family:'Big Shoulders Display', sans-serif; font-weight:700;
  font-size:24px; color:var(--text); margin:0 0 10px; text-wrap:balance;
}
.seo-content h3{font-size:16px; font-weight:700; color:var(--text); margin:24px 0 8px}
.seo-content h4{font-size:14px; font-weight:600; color:var(--text); margin:16px 0 4px}
.seo-content p{margin:0 0 10px}
.seo-content ul{margin:0 0 10px; padding-left:20px; display:grid; gap:4px}
.seo-content strong{color:var(--text)}

/* footer */
.site-footer{border-top:1px solid var(--border); padding-block:18px; margin-top:20px; color:var(--text-dim); font-size:12px}
.site-footer code{font-family:'IBM Plex Mono', monospace}
.site-footer p{margin:0 0 8px; max-width:68ch}
.site-footer p:last-child{margin-bottom:0}

[hidden]{display:none !important}