/* =============================================================
   Strumyk 2026 — design tokens + components (production)
   Port iz strumyk-2026.html demo-a
   ============================================================= */

@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  button { font: inherit; cursor: pointer; }
  ol, ul { list-style: none; }
  a { color: inherit; text-decoration: none; }
  input, button, textarea { background: none; border: 0; color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: dark;

    --bg-0: oklch(13% 0.005 270);
    --bg-1: oklch(17% 0.008 270);
    --bg-2: oklch(22% 0.012 270);
    --bg-3: oklch(28% 0.015 270);

    --fg-0: oklch(98% 0.005 270);
    --fg-1: oklch(78% 0.012 270);
    --fg-2: oklch(58% 0.018 270);
    --fg-3: oklch(40% 0.018 270);

    --accent: oklch(85% 0.17 110);
    --accent-fg: oklch(20% 0.05 110);
    --live: oklch(64% 0.24 27);
    --live-glow: oklch(64% 0.24 27 / 0.45);

    --sport-football:   oklch(86% 0.21 132);
    --sport-tennis:     oklch(86% 0.16 90);
    --sport-basketball: oklch(74% 0.18 38);
    --sport-hockey:     oklch(85% 0.14 200);
    --sport-mma:        oklch(70% 0.22 27);
    --sport-boxing:     oklch(70% 0.22 27);
    --sport-motorsport: oklch(70% 0.22 27);
    --sport-volleyball: oklch(75% 0.18 310);
    --sport-handball:   oklch(80% 0.15 60);
    --sport-baseball:   oklch(78% 0.05 270);
    --sport-nfl:        oklch(60% 0.18 60);
    --sport-cricket:    oklch(75% 0.15 100);
    --sport-snooker:    oklch(50% 0.18 280);
    --sport-darts:      oklch(70% 0.22 15);
    --sport-futsal:     oklch(80% 0.18 145);

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur: 220ms;
    --dur-fast: 150ms;
  }
}

@layer base {
  body {
    background: var(--bg-0);
    color: var(--fg-0);
    overflow: hidden;
  }
  ::selection { background: var(--accent); color: var(--accent-fg); }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: oklch(35% 0.015 270); }
}

@layer components {
  /* === Layout === */
  .app {
    display: grid;
    grid-template-columns: clamp(240px, 18vw, 320px) 1fr clamp(260px, 19vw, 340px);
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "nav nav nav"
      "sidebar main chat";
    height: 100dvh;
    transition: grid-template-columns var(--dur) var(--ease);
  }

  /* === Top nav === */
  .nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.25rem;
    background: var(--bg-0);
    border-bottom: 1px solid var(--bg-2);
  }

  .logo {
    display: flex;
    align-items: center;
    color: var(--fg-0);
    transition: color var(--dur-fast) var(--ease);
  }
  .logo:hover { color: var(--accent); }
  .logo svg { height: 36px; width: auto; display: block; }
  .brand {
    display: flex;
    align-items: center;
    gap: .5rem;       /* tight pairing inside the brand block */
  }
  .logo-by {
    font: 700 .78rem/1 'Inter', system-ui;
    color: #facc15;                   /* same gold as admin name in chat */
    letter-spacing: .02em;
    white-space: nowrap;
    /* Slight optical lift so the descender lines up with the baseline of
       the chunky STRUMYK svg letters. */
    margin-block-start: 2px;
  }
  .nav-btn--discord {
    color: #5865f2;
  }
  .nav-btn--discord:hover {
    background: color-mix(in oklch, #5865f2 18%, transparent);
    color: #fff;
  }
  .nav-btn--discord svg { width: 18px; height: 18px; }

  .nav .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .375rem;
  }
  .nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .425rem .625rem;
    background: var(--bg-1);
    border-radius: var(--radius-sm);
    color: var(--fg-1);
    font: 600 .75rem/1 'Inter', system-ui;
    letter-spacing: .04em;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .nav-btn:hover { background: var(--bg-2); color: var(--fg-0); }
  .nav-btn svg { width: 16px; height: 16px; }
  .nav-btn .lang-code { font-weight: 700; }

  /* Language dialog */
  #lang-dialog {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    color: var(--fg-0);
    padding: 1.5rem;
    inline-size: min(420px, 90vw);
    margin: auto;
    box-shadow: 0 24px 64px oklch(0% 0 0 / 0.6);
  }
  #lang-dialog::backdrop {
    background: oklch(0% 0 0 / 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  #lang-dialog h2 {
    font: 700 1rem/1.2 'Inter', system-ui;
    margin-block-end: 1rem;
  }
  .lang-options {
    display: flex;
    flex-direction: column;
    gap: .375rem;
  }
  .lang-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--bg-2);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
    text-align: left;
    color: var(--fg-0);
  }
  .lang-option:hover { background: var(--bg-3); }
  .lang-option[aria-pressed="true"] {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--accent);
  }
  .lang-option .flag {
    width: 28px; height: 21px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.4);
  }
  .lang-option .name {
    flex: 1;
    font: 600 .9rem/1.2 'Inter', system-ui;
  }
  .lang-option .code {
    font: 700 .7rem/1 'Inter', system-ui;
    letter-spacing: .08em;
    color: var(--fg-2);
  }

  /* === Sidebar === */
  .sidebar {
    grid-area: sidebar;
    container: sidebar / inline-size;
    background: var(--bg-0);
    border-right: 1px solid var(--bg-2);
    overflow-y: auto;
    scroll-timeline: --side block;
  }
  .sidebar .group:has(.events:empty) { display: none; }

  .sidebar[data-sport="football"]   event-card:not([sport="football"])   { display: none; }
  .sidebar[data-sport="tennis"]     event-card:not([sport="tennis"])     { display: none; }
  .sidebar[data-sport="basketball"] event-card:not([sport="basketball"]) { display: none; }
  .sidebar[data-sport="hockey"]     event-card:not([sport="hockey"])     { display: none; }
  .sidebar[data-sport="mma"]        event-card:not([sport="mma"])        { display: none; }
  .sidebar[data-sport="boxing"]     event-card:not([sport="boxing"])     { display: none; }
  .sidebar[data-sport="motorsport"] event-card:not([sport="motorsport"]) { display: none; }
  .sidebar[data-sport="volleyball"] event-card:not([sport="volleyball"]) { display: none; }
  .sidebar[data-sport="handball"]   event-card:not([sport="handball"])   { display: none; }
  .sidebar[data-sport="nfl"]        event-card:not([sport="nfl"])        { display: none; }
  .sidebar[data-sport="cricket"]    event-card:not([sport="cricket"])    { display: none; }
  .sidebar[data-sport="snooker"]    event-card:not([sport="snooker"])    { display: none; }
  .sidebar[data-sport="darts"]      event-card:not([sport="darts"])      { display: none; }
  .sidebar[data-sport="futsal"]     event-card:not([sport="futsal"])     { display: none; }

  .side-head {
    position: sticky; top: 0; z-index: 2;
    padding: 1rem;
    background: color-mix(in oklch, var(--bg-0) 78%, transparent);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    animation: head-shadow linear both;
    animation-timeline: --side;
    animation-range: 0 60px;
  }
  @keyframes head-shadow {
    to { box-shadow: 0 8px 24px oklch(0% 0 0 / 0.5); }
  }

  .search-box {
    display: flex; align-items: center; gap: .5rem;
    padding: .625rem .75rem;
    background: var(--bg-1);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease);
  }
  .search-box:has(input:focus-visible) { border-color: var(--accent); }
  .search-box svg { width: 16px; height: 16px; color: var(--fg-2); flex-shrink: 0; }
  .search-box input { flex: 1; font-size: .88rem; min-width: 0; }
  .search-box input::placeholder { color: var(--fg-2); }
  .search-box input:focus { outline: 0; }
  .search-box kbd {
    padding: 2px 6px;
    font: 500 11px/1 'Inter', system-ui;
    background: var(--bg-2);
    color: var(--fg-2);
    border-radius: 4px;
  }

  .filter-trigger {
    anchor-name: --filter-trig;
    display: flex; align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: var(--bg-1);
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 500;
  }
  .filter-trigger .label { flex: 1; text-align: left; color: var(--fg-1); }
  .filter-trigger svg { width: 14px; height: 14px; color: var(--fg-2); transition: rotate var(--dur) var(--ease); }
  .filter-trigger[aria-expanded="true"] svg { rotate: 180deg; }
  .filter-trigger:hover { background: var(--bg-2); }

  .sport-pop {
    position-anchor: --filter-trig;
    position-area: bottom span-right;
    margin: 8px 0 0;
    padding: .375rem;
    min-inline-size: 220px;
    max-block-size: 70vh;
    overflow-y: auto;
    background: var(--bg-1);
    border: 1px solid var(--bg-2);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px oklch(0% 0 0 / .55);
    display: flex; flex-direction: column; gap: 1px;
    transition: opacity var(--dur), translate var(--dur),
                display var(--dur) allow-discrete,
                overlay  var(--dur) allow-discrete;
  }
  .sport-pop:popover-open {
    opacity: 1; translate: 0 0;
    pointer-events: auto;
  }
  @starting-style {
    .sport-pop:popover-open { opacity: 0; translate: 0 -8px; }
  }
  .sport-pop:not(:popover-open) {
    opacity: 0; translate: 0 -8px;
    pointer-events: none;
  }

  .chip {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--fg-1);
    text-align: left;
    transition: background var(--dur-fast) var(--ease);
  }
  .chip:hover { background: var(--bg-2); }
  .chip[aria-pressed="true"] {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--accent);
  }

  .group { padding: 0 0 1rem; }

  /* Popular section sa featured grid karticama — vidi se samo dok event nije odabran */
  .app[data-event-active="true"] #popular-section { display: none; }
  #popular-section[hidden] { display: none; }
  #popular-section h3 {
    color: var(--accent);
  }
  .group h2 {
    display: flex; align-items: center; gap: .5rem;
    padding: 1rem 1rem .5rem;
    font: 600 .72rem/1 'Inter', system-ui;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fg-2);
  }
  .group h2 svg { width: 12px; height: 12px; }
  .group h2 .count {
    margin-inline-start: auto;
    padding: 1px 7px;
    background: var(--bg-2); color: var(--fg-1);
    border-radius: 999px;
    font: 500 11px/1.4 'Inter', system-ui; letter-spacing: 0;
  }

  .live-dot {
    display: inline-block;
    inline-size: 8px; block-size: 8px;
    background: var(--live);
    border-radius: 50%;
    animation: pulse 2s var(--ease) infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--live-glow); }
    50%      { box-shadow: 0 0 0 7px transparent; }
  }

  .events { display: flex; flex-direction: column; gap: 1px; padding: 0 .5rem; }

  /* === Main / Player === */
  .main {
    grid-area: main;
    overflow-y: auto;
    padding: 1.25rem;
  }

  .player-wrap {
    aspect-ratio: 16 / 9;
    background:
      radial-gradient(ellipse at 30% 20%, oklch(25% 0.08 270 / 0.6), transparent 60%),
      radial-gradient(ellipse at 70% 80%, oklch(22% 0.1 320 / 0.5), transparent 60%),
      var(--bg-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    view-transition-name: player;
    cursor: zoom-in;
  }
  .player-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-1);
  }
  .player-wrap:has(iframe) {
    cursor: default;
    view-transition-name: none;
  }

  .player-empty { position: absolute; inset: 0; display: grid; place-items: center; }
  .player-empty .badge {
    padding: .35rem .75rem;
    background: oklch(20% 0.05 270 / 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-3);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--fg-1);
  }
  .player-empty .hero {
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; gap: 1rem;
    padding: 1rem;
  }
  .player-empty h1 {
    font: 800 2.25rem/1.1 'Inter', system-ui;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .player-empty h1 span { color: var(--accent); }
  .player-empty p {
    color: var(--fg-2);
    font-size: .95rem;
    max-inline-size: 32ch;
    text-wrap: balance;
  }

  .player-meta {
    margin-block-start: 1rem;
    display: flex; align-items: center; gap: 1rem;
    padding: .875rem 1rem;
    background: var(--bg-1);
    border-radius: var(--radius);
  }
  .player-meta .meta-emoji {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  .player-meta .meta-text { flex: 1; min-width: 0; }
  .player-meta h2 {
    font: 600 .95rem/1.2 'Inter', system-ui;
    letter-spacing: -0.01em;
  }
  .player-meta .meta-sub {
    margin-block-start: 4px;
    font-size: .78rem;
    color: var(--fg-2);
    display: flex; gap: .5rem; align-items: center;
    flex-wrap: wrap;
  }
  .player-meta .meta-sub .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); }
  .player-meta .meta-actions { display: flex; gap: .375rem; flex-shrink: 0; }
  .player-meta .meta-actions button {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    color: var(--fg-1);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .player-meta .meta-actions button:hover { background: var(--bg-3); color: var(--fg-0); }
  .player-meta .meta-actions svg { width: 16px; height: 16px; }
  /* Brief flash after Copy click so the user knows it registered. */
  .player-meta .meta-actions button.btn-copied {
    background: color-mix(in oklch, var(--accent) 25%, var(--bg-2));
    color: var(--accent);
  }

  /* Report-problem dialog — mirrors the lang-dialog visual treatment so
     the two feel like part of the same chrome. */
  #report-dialog {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    color: var(--fg-0);
    padding: 1.5rem;
    inline-size: min(440px, 92vw);
    margin: auto;
    box-shadow: 0 24px 64px oklch(0% 0 0 / 0.6);
  }
  #report-dialog::backdrop {
    background: oklch(0% 0 0 / 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  #report-dialog h2 {
    font: 700 1.05rem/1.2 'Inter', system-ui;
    margin-block-end: .65rem;
  }
  #report-dialog p {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--fg-1);
    margin-block-end: .85rem;
  }
  #report-dialog .report-steps {
    list-style-position: inside;
    padding-left: .25rem;
    margin-block-end: 1.2rem;
    color: var(--fg-1);
  }
  #report-dialog .report-steps li {
    font-size: .85rem;
    line-height: 1.55;
    margin-block-end: .25rem;
  }
  #report-dialog .report-actions {
    display: flex; gap: .5rem; justify-content: flex-end; align-items: center;
  }
  #report-dialog .report-cta {
    padding: .55rem 1rem;
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--radius-sm);
    font: 700 .85rem/1.2 'Inter', system-ui;
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease);
  }
  #report-dialog .report-cta:hover { filter: brightness(1.06); }
  #report-dialog .report-close {
    padding: .55rem 1rem;
    background: var(--bg-2);
    color: var(--fg-1);
    border-radius: var(--radius-sm);
    font: 600 .8rem/1.2 'Inter', system-ui;
    cursor: pointer;
  }
  #report-dialog .report-close:hover { background: var(--bg-3); color: var(--fg-0); }

  /* Quality / sources row (multi-country) */
  .quality-row {
    margin-block-start: .75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--bg-1);
    border-radius: var(--radius);
  }

  .lang-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    min-height: 36px;
  }
  .lang-row + .lang-row {
    border-top: 1px solid var(--bg-2);
    padding-top: .5rem;
  }
  .lang-row .lang {
    display: flex; align-items: center; gap: .425rem;
    flex-shrink: 0;
    min-width: 76px;
  }
  .lang-row .flag {
    width: 22px; height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.4);
    display: block;
  }
  .lang-row .lang-name {
    font: 600 .72rem/1 'Inter', system-ui;
    color: var(--fg-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .lang-row .qualities { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
  .lang-row .qualities button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .55rem .35rem .625rem;
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    font: 500 .78rem/1.1 'Inter', system-ui;
    letter-spacing: -0.005em;
    color: var(--fg-1);
    transition: all var(--dur-fast) var(--ease);
  }
  .lang-row .qualities button:hover { background: var(--bg-3); color: var(--fg-0); }
  .lang-row .qualities button.active { background: var(--accent); color: var(--accent-fg); }
  .lang-row .qualities button .quality-tag {
    font: 700 .62rem/1 'Inter', system-ui;
    padding: 2px 5px;
    background: var(--bg-3);
    color: var(--fg-2);
    border-radius: 3px;
    letter-spacing: 0.06em;
  }
  .lang-row .qualities button.active .quality-tag {
    background: color-mix(in oklch, var(--accent-fg) 80%, transparent);
    color: var(--accent);
  }

  /* Flat source list (data-flat) — one source per row, sorted by viewers.
     align-items: flex-start keeps each chip at content width (the column
     would otherwise stretch them full-width). Chips are enlarged vs the
     default .src-btn so the vertical list doesn't look sparse. */
  .lang-row[data-flat] .qualities {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .4rem;
  }
  .lang-row[data-flat] .qualities button {
    gap: .5rem;
    padding: .55rem .85rem;
    font-size: .9rem;
  }
  .lang-row[data-flat] .qualities button .src-flag {
    width: 21px;
    height: 15px;
  }
  .lang-row[data-flat] .qualities button .quality-tag {
    font-size: .68rem;
    padding: 3px 6px;
  }

  .upcoming-grid { margin-block-start: 1.5rem; }
  .upcoming-grid h3 {
    font: 700 .8rem/1 'Inter', system-ui;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-1);
    margin-block-end: .75rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .upcoming-grid .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
  }
  .ucard {
    padding: .875rem 1rem;
    background: var(--bg-1);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
    border: 1px solid transparent;
  }
  .ucard:hover {
    background: color-mix(in oklch, var(--sport, var(--bg-2)) 14%, var(--bg-1));
    translate: 0 -2px;
    border-color: var(--bg-3);
  }
  .ucard[data-sport="football"]   { --sport: var(--sport-football); }
  .ucard[data-sport="tennis"]     { --sport: var(--sport-tennis); }
  .ucard[data-sport="basketball"] { --sport: var(--sport-basketball); }
  .ucard[data-sport="hockey"]     { --sport: var(--sport-hockey); }
  .ucard[data-sport="mma"]        { --sport: var(--sport-mma); }
  .ucard[data-sport="boxing"]     { --sport: var(--sport-boxing); }
  .ucard[data-sport="motorsport"] { --sport: var(--sport-motorsport); }
  .ucard[data-sport="volleyball"] { --sport: var(--sport-volleyball); }
  .ucard[data-sport="handball"]   { --sport: var(--sport-handball); }
  .ucard[data-sport="nfl"]        { --sport: var(--sport-nfl); }
  .ucard .ucard-time {
    font: 600 .72rem/1 'Inter', system-ui;
    letter-spacing: 0.04em;
    color: var(--sport, var(--accent));
    margin-block-end: .5rem;
    display: flex; align-items: center; gap: .375rem;
  }
  .ucard .ucard-title {
    font: 600 .9rem/1.3 'Inter', system-ui;
    letter-spacing: -0.01em;
    margin-block-end: .25rem;
  }
  .ucard .ucard-meta { font-size: .75rem; color: var(--fg-2); }

  /* === Chat === */
  .chat {
    grid-area: chat;
    background: var(--bg-0);
    border-left: 1px solid var(--bg-2);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .chat-head {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--bg-2);
    display: flex; align-items: center; gap: .5rem;
  }
  .chat-head h3 {
    font: 600 .78rem/1 'Inter', system-ui;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-1);
  }
  .chat-head .chat-count {
    margin-inline-start: auto;
    display: flex; align-items: center; gap: .375rem;
    font-size: .72rem;
    color: var(--fg-2);
  }
  .chat-head .chat-count .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: oklch(70% 0.18 145);
    box-shadow: 0 0 8px oklch(70% 0.18 145 / 0.6);
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex; flex-direction: column; gap: 1.1rem;
  }
  .chat-empty {
    display: grid; place-items: center;
    flex: 1;
    color: var(--fg-3);
    font-size: .85rem;
    padding: 2rem 1rem;
    text-align: center;
    text-wrap: balance;
  }

  .chat-input {
    padding: .75rem;
    border-top: 1px solid var(--bg-2);
    display: flex; gap: .5rem; align-items: flex-end;
  }
  .chat-input textarea {
    flex: 1;
    padding: .5rem .75rem;
    background: var(--bg-1);
    border-radius: var(--radius-sm);
    color: var(--fg-0);
    font: inherit; font-size: .85rem;
    resize: none;
    field-sizing: content;
    min-height: 36px;
    max-height: 120px;
  }
  .chat-input textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; }
  /* iOS Safari hard-codes auto-zoom on focus when input font-size < 16px.
     Apple won't let CSS disable that — the only fix is to actually use 16px.
     We scope it to iOS only via the WebKit-only `-webkit-touch-callout`
     feature query, so Android (which already behaves) keeps the original
     compact .85rem look. */
  @supports (-webkit-touch-callout: none) {
    .chat-input textarea { font-size: 16px; }
  }
  .chat-input button {
    padding: .5rem .85rem;
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--radius-sm);
    font: 700 .8rem/1.2 'Inter', system-ui;
    transition: filter var(--dur-fast) var(--ease);
  }
  .chat-input button:hover { filter: brightness(1.08); }
  .chat-input button:disabled,
  .chat-input textarea:disabled {
    opacity: .5; cursor: not-allowed;
  }

  /* Discord login gate (shown when chat_jwt cookie is absent) */
  .chat-gate {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .9rem;
    flex: 1;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--fg-2);
  }
  .chat-gate p { font-size: .85rem; line-height: 1.4; max-width: 28ch; }
  .chat-login-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem;
    background: #5865f2;             /* Discord brand */
    color: #fff;
    border-radius: var(--radius-sm);
    font: 600 .85rem/1 'Inter', system-ui;
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease);
  }
  .chat-login-btn:hover { filter: brightness(1.1); }

  /* Inline variant — fills the chat-input bar when user is a guest.
     Centered, padded enough to feel like a card, brand purple background,
     subtle gradient + lift on hover. */
  .chat-login-btn--inline {
    width: 100%;
    justify-content: center;
    padding: .8rem 1rem;
    margin: 0;
    background: linear-gradient(180deg, #5865f2 0%, #4752c4 100%);
    box-shadow: 0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 4px 12px oklch(0% 0 0 / 0.4);
    transform: translateZ(0);
    transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  }
  .chat-login-btn--inline:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .chat-login-btn--inline svg { width: 22px; height: 22px; }
  .chat-login-btn--inline span { font-size: .9rem; }

  .chat-gate-bar {
    display: flex; flex-direction: column; gap: .55rem;
    width: 100%;
    padding: .25rem .25rem .15rem;
  }
  .chat-gate-title {
    font: 700 .82rem/1 'Inter', system-ui;
    color: var(--fg-1);
    text-align: center;
    letter-spacing: .02em;
  }
  .chat-gate-note {
    font-size: .65rem; line-height: 1.35;
    color: var(--fg-3);
    text-align: center;
    max-width: 36ch;
    margin: 0 auto;
    text-wrap: balance;
  }
  .chat-gate-bar--error .chat-gate-title { color: oklch(75% 0.16 25); }
  .chat-gate-retry {
    display: block;
    text-align: center;
    font-size: .68rem;
    color: var(--fg-3);
    text-decoration: underline;
    margin-top: .15rem;
  }
  .chat-gate-retry:hover { color: var(--fg-1); }

  /* Identity chip in chat header */
  .chat-userchip {
    margin-inline-start: .5rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .5rem;
    background: var(--bg-2);
    border-radius: 999px;
    font: 600 .68rem/1 'Inter', system-ui;
    color: var(--fg-1);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }
  .chat-userchip:hover { background: var(--bg-3); }
  .chat-userchip .chip-name {
    max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-userchip .chip-role {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .6rem;
    padding: 0 .35rem; border-radius: 4px;
    background: color-mix(in oklch, var(--accent) 20%, transparent);
    color: var(--accent);
  }

  /* Individual messages — avatar on the left, name+time+body on the right.
     Mirrors the reference design: round colour-coded initial, role-tinted
     username with a "X min ago" timestamp inline, body indented under. */
  .chat-msg {
    display: flex; flex-direction: row; gap: .65rem; align-items: flex-start;
    padding: .15rem .25rem;
    font-size: .9rem; line-height: 1.4;
    color: var(--fg-0);
    word-wrap: break-word;
  }
  .chat-msg .msg-avatar {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font: 700 .82rem/1 'Inter', system-ui;
    user-select: none;
  }
  .chat-msg .msg-avatar--img {
    object-fit: cover;
    background: var(--bg-2);
  }
  .chat-msg .msg-body-wrap {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: .15rem;
  }
  .chat-msg .msg-meta {
    display: flex; align-items: baseline; gap: .45rem;
  }
  .chat-msg .msg-time {
    font: 500 .68rem/1 'Inter', system-ui;
    color: var(--fg-3);
    flex-shrink: 0;
  }
  .chat-msg .msg-mod-btn {
    margin-inline-start: .25rem;
    padding: 0 .35rem;
    font-size: .9rem;
    line-height: 1;
    color: var(--fg-3);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .chat-msg .msg-mod-btn:hover { color: var(--fg-0); background: var(--bg-2); }

  .msg-mod-menu {
    z-index: 9999;
    min-inline-size: 200px;
    padding: .35rem;
    background: var(--bg-1);
    border: 1px solid var(--bg-3);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px oklch(0% 0 0 / 0.5);
    display: flex; flex-direction: column; gap: .15rem;
  }
  .msg-mod-menu .mod-menu-head {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--bg-2);
    display: flex; flex-direction: column; gap: .15rem;
    margin-bottom: .25rem;
  }
  .msg-mod-menu .mod-menu-head strong {
    font: 700 .78rem/1.1 'Inter', system-ui;
    color: var(--fg-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .msg-mod-menu .mod-menu-ip {
    font: 600 .65rem/1 ui-monospace, monospace;
    color: oklch(75% 0.16 25);
  }
  .msg-mod-menu button {
    text-align: left;
    padding: .4rem .55rem;
    font: 500 .8rem/1.2 'Inter', system-ui;
    color: var(--fg-1);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }
  .msg-mod-menu button:hover { background: var(--bg-2); color: var(--fg-0); }
  .chat-msg .msg-name {
    font-weight: 700;
    font-size: .82rem;
    color: var(--fg-0);
  }
  .chat-msg .msg-mod-btn {
    margin-left: auto;   /* push to right end of meta row */
  }
  /* Role-tinted usernames + role badges make mods/admins pop in scroll.
     Admin: vivid gold #facc15 (Tailwind yellow-400 territory).
     Moderator: clean cyan-blue.
     User: default. */
  .chat-msg[data-role="admin"] .msg-name {
    color: #facc15 !important;
  }
  .chat-msg[data-role="moderator"] .msg-name {
    color: #2ecc71 !important;
  }
  .chat-msg[data-role="admin"] .msg-role {
    background: #facc15 !important;
    color: #1a1300 !important;
  }
  .chat-msg[data-role="moderator"] .msg-role {
    background: #2ecc71 !important;
    color: #06321a !important;
  }

  /* Logout icon next to the textarea */
  .chat-logout-btn {
    padding: .5rem;
    background: transparent;
    color: var(--fg-3);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    align-self: flex-end;
  }
  .chat-logout-btn:hover { color: var(--fg-0); background: var(--bg-2); }
  .chat-logout-btn svg { display: block; }
  .chat-msg .msg-role {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 0 .3rem;
    border-radius: 3px;
    background: color-mix(in oklch, currentColor 18%, transparent);
  }
  .chat-msg .msg-role--moderator { color: oklch(70% 0.18 160); }
  .chat-msg .msg-role--admin     { color: oklch(70% 0.20 25); }
  .chat-msg .msg-body {
    color: var(--fg-0);
  }
  .chat-msg--system {
    align-self: stretch;
    color: var(--fg-1);
    font-size: .75rem;
    font-style: normal;
    text-align: center;
    padding: .55rem .75rem;
    background: color-mix(in oklch, var(--accent) 10%, var(--bg-1));
    border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
    border-radius: var(--radius-sm);
    text-wrap: balance;
  }
  .chat-msg--alert {
    color: #fecaca;
    background: color-mix(in oklch, #ef4444 18%, var(--bg-1));
    border-color: color-mix(in oklch, #ef4444 55%, transparent);
    font-weight: 600;
    font-size: .82rem;
    animation: chatAlertPulse 1.4s var(--ease) 0s 2;
  }
  @keyframes chatAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, #ef4444 0%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in oklch, #ef4444 35%, transparent); }
  }
  .chat-msg--in {
    animation: chatMsgIn .25s var(--ease);
  }
  @keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* === Event card === */
  event-card { display: block; }

  event-card[sport="football"]   { --sport: var(--sport-football); }
  event-card[sport="tennis"]     { --sport: var(--sport-tennis); }
  event-card[sport="basketball"] { --sport: var(--sport-basketball); }
  event-card[sport="hockey"]     { --sport: var(--sport-hockey); }
  event-card[sport="mma"]        { --sport: var(--sport-mma); }
  event-card[sport="boxing"]     { --sport: var(--sport-boxing); }
  event-card[sport="motorsport"] { --sport: var(--sport-motorsport); }
  event-card[sport="volleyball"] { --sport: var(--sport-volleyball); }
  event-card[sport="handball"]   { --sport: var(--sport-handball); }
  event-card[sport="nfl"]        { --sport: var(--sport-nfl); }

  event-card a {
    display: grid;
    grid-template-columns: 44px 30px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "time emoji title"
      "time emoji meta";
    column-gap: .625rem;
    row-gap: 2px;
    align-items: center;
    padding: .625rem .5rem;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease);
    cursor: pointer;
  }
  event-card a:hover {
    background: color-mix(in oklch, var(--sport, var(--bg-2)) 14%, var(--bg-0));
  }
  event-card .ec-time {
    grid-area: time;
    font: 600 .8rem/1 'Inter', system-ui;
    letter-spacing: -0.01em;
    color: var(--sport, var(--fg-1));
    text-align: center;
    align-self: center;
  }
  event-card .ec-emoji {
    grid-area: emoji;
    font-size: 1.05rem;
    text-align: center;
    align-self: center;
  }
  event-card .ec-title {
    grid-area: title;
    font: 500 .85rem/1.2 'Inter', system-ui;
    letter-spacing: -0.01em;
    color: var(--fg-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  event-card .ec-meta {
    grid-area: meta;
    display: flex; align-items: center; gap: .375rem;
    font-size: .72rem;
    color: var(--fg-2);
    overflow: hidden;
    min-width: 0;
  }
  event-card .ec-meta .league {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  event-card .ec-meta .viewers { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; }
  event-card .ec-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); flex-shrink: 0; }

  event-card[live="true"] .ec-time {
    color: var(--live);
    font-size: .68rem;
    letter-spacing: 0.04em;
  }
  event-card[live="true"] .ec-time::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--live);
    border-radius: 50%;
    margin-inline-end: 4px;
    vertical-align: 1px;
    animation: pulse 2s var(--ease) infinite;
  }
  event-card.is-active a {
    background: color-mix(in oklch, var(--sport, var(--accent)) 22%, var(--bg-0));
  }

  @container sidebar (inline-size < 280px) {
    event-card .ec-meta .league { display: none; }
  }

  /* === Bottom tabbar (mobile) === */
  .tabbar { display: none; }
  .tab {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    color: var(--fg-2);
    font: 600 .62rem/1 'Inter', system-ui;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--dur-fast) var(--ease);
    min-height: 56px;
  }
  .tab svg { width: 22px; height: 22px; transition: scale var(--dur) var(--ease); }
  .tab[aria-selected="true"] { color: var(--accent); }
  .tab[aria-selected="true"] svg { scale: 1.1; }
  .tab[aria-selected="true"]::before {
    content: '';
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
  }
  .tab .tab-badge {
    position: absolute;
    top: 6px; right: calc(50% - 22px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--live);
    color: white;
    border-radius: 999px;
    font: 700 9px/16px 'Inter', system-ui;
    letter-spacing: 0;
    text-align: center;
  }

  /* === Mobile === */
  @media (max-width: 900px) {
    .app {
      grid-template-columns: 1fr;
      grid-template-rows: 52px 1fr calc(56px + env(safe-area-inset-bottom));
      grid-template-areas:
        "nav"
        "panel"
        "tabbar";
      touch-action: pan-y;
    }
    .nav { padding: 0 1rem; gap: .75rem; }
    .logo svg { height: 28px; }

    .sidebar, .main, .chat {
      grid-area: panel;
      border: 0 !important;
    }
    .app[data-tab="sidebar"] .main,
    .app[data-tab="sidebar"] .chat,
    .app[data-tab="main"] .sidebar,
    .app[data-tab="main"] .chat,
    .app[data-tab="chat"] .sidebar,
    .app[data-tab="chat"] .main { display: none; }

    .app[data-tab="sidebar"] .sidebar,
    .app[data-tab="main"] .main,
    .app[data-tab="chat"] .chat { view-transition-name: panel; }

    .main { padding: .75rem; }
    .player-meta { padding: .75rem; gap: .625rem; }
    .player-meta .meta-actions button { width: 32px; height: 32px; }
    .player-meta h2 { font-size: .9rem; }
    .upcoming-grid .grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .player-empty h1 { font-size: 1.5rem; }
    .player-empty p { font-size: .85rem; }

    .tabbar {
      grid-area: tabbar;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--bg-2);
      background: color-mix(in oklch, var(--bg-0) 90%, transparent);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      padding-bottom: env(safe-area-inset-bottom);
      view-transition-name: tabbar;
    }

    ::view-transition-old(panel),
    ::view-transition-new(panel) {
      animation-duration: 220ms;
      animation-timing-function: var(--ease);
    }
  }

  @media (max-width: 380px) {
    .upcoming-grid .grid { grid-template-columns: 1fr; }
  }

  /* === Cinema mode === */
  .app[data-cinema="true"] {
    --cinema-w: min(100%, calc((100dvh - 56px - 200px) * 16 / 9));
    grid-template-columns: 0 1fr 340px;
  }
  .app[data-cinema="true"] .sidebar {
    inline-size: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .app[data-cinema="true"] .upcoming-grid { display: none; }
  .app[data-cinema="true"] .main {
    padding: 1rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .app[data-cinema="true"] .player-wrap {
    border-radius: 0;
    aspect-ratio: 16 / 9;
    width: var(--cinema-w);
    max-block-size: none;
  }
  .app[data-cinema="true"] .player-meta,
  .app[data-cinema="true"] .quality-row {
    width: var(--cinema-w);
    margin: 0;
  }
  #btn-cinema.active {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
  }

  @media (max-width: 900px) {
    #btn-cinema { display: none; }
    .app[data-cinema="true"] { grid-template-columns: 1fr; }
  }

  /* === Mini-player (mobile) === */
  .mini-player { display: none; }

  @media (max-width: 900px) {
    .app[data-event-active="true"]:not([data-tab="main"]) .mini-player { display: flex; }

    .app:not([data-tab="main"]) .player-wrap { view-transition-name: none; }
    .app:not([data-tab="main"])[data-event-active="true"] .mini-thumb {
      view-transition-name: player;
    }

    .app[data-event-active="true"]:not([data-tab="main"]) .sidebar,
    .app[data-event-active="true"]:not([data-tab="main"]) .chat {
      padding-bottom: 64px;
    }

    .mini-player {
      position: fixed;
      bottom: calc(56px + env(safe-area-inset-bottom));
      left: 0; right: 0;
      z-index: 10;
      align-items: center;
      gap: .625rem;
      padding: .5rem .75rem;
      background: color-mix(in oklch, var(--bg-1) 92%, transparent);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-top: 1px solid var(--bg-2);
      cursor: pointer;
    }
    .mini-thumb {
      width: 44px; height: 44px;
      border-radius: var(--radius-sm);
      background:
        radial-gradient(ellipse at 30% 20%, oklch(28% 0.08 270 / 0.8), transparent 65%),
        radial-gradient(ellipse at 70% 80%, oklch(25% 0.1 320 / 0.7), transparent 65%),
        var(--bg-2);
      display: grid; place-items: center;
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
    }
    .mini-emoji { font-size: 1.4rem; }
    .mini-live {
      position: absolute;
      top: 4px; right: 4px;
      width: 8px; height: 8px;
      background: var(--live);
      border-radius: 50%;
      box-shadow: 0 0 0 2px var(--bg-1), 0 0 8px var(--live-glow);
      animation: pulse 2s var(--ease) infinite;
      display: none;
    }
    .app[data-event-live="true"] .mini-live { display: block; }
    .mini-text { flex: 1; min-width: 0; }
    .mini-title {
      font: 600 .85rem/1.2 'Inter', system-ui;
      letter-spacing: -0.01em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mini-meta {
      font-size: .72rem;
      color: var(--fg-2);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      margin-top: 2px;
    }
    .mini-btn {
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border-radius: var(--radius-sm);
      color: var(--fg-1);
      flex-shrink: 0;
      transition: background var(--dur-fast) var(--ease);
      background: none;
    }
    .mini-btn:active { background: var(--bg-2); }
    .mini-btn svg { width: 16px; height: 16px; }
  }

  /* === Ad slots === */
  .ad-slot {
    --ad-w: 100%;
    --ad-h: 90px;
    display: grid;
    place-items: center;
    inline-size: var(--ad-w);
    block-size: var(--ad-h);
    max-block-size: var(--ad-h);
    max-inline-size: 100%;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    background: var(--bg-1);
    border: 1px dashed var(--bg-3);
    border-radius: var(--radius);
    color: var(--fg-3);
    font: 500 .72rem/1.3 'Inter', system-ui;
    text-align: center;
  }
  /* Force AdSense <ins> to fit within slot — vendor sets inline height that
     would otherwise blow up the slot (e.g. 160×600 skyscraper inside 300×250 box). */
  .ad-slot > ins.adsbygoogle {
    max-inline-size: 100% !important;
    max-block-size: 100% !important;
  }
  .ad-slot[data-size="300x250"] { --ad-w: 300px; --ad-h: 250px; }
  .ad-slot[data-size="300x100"] { --ad-w: 300px; --ad-h: 100px; }
  .ad-slot[data-size="728x90"]  { --ad-w: 728px; --ad-h: 90px; }
  .ad-slot[data-size="970x90"]  { --ad-w: 970px; --ad-h: 90px; }
  .ad-slot[data-size="320x100"] { --ad-w: 320px; --ad-h: 100px; }

  /* Empty slot: show placeholder label so admin sees where ads go */
  .ad-slot:empty::before {
    content: 'AD · ' attr(data-size);
    color: var(--fg-3);
    font: 500 .7rem/1 'Inter', system-ui;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Filled slot (joinAds output): hide dashed border but keep min-height */
  .ad-slot:not(:empty) {
    background: transparent;
    border: 0;
  }
  /* When real ads come through but don't visually render (e.g. AdSense <ins> with placeholder slot ID),
     keep at least a subtle outline so the structure is visible. */
  .ad-slot:has(ins.adsbygoogle):not(:has(iframe)) {
    background: var(--bg-1);
    border: 1px dashed var(--bg-3);
  }
  .ad-slot:has(ins.adsbygoogle):not(:has(iframe))::before {
    content: 'AD · ' attr(data-size);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--fg-3);
    font: 500 .7rem/1 'Inter', system-ui;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .sidebar > .ad-slot { margin: 0 .5rem 1rem; }
  #ad-inline { margin: 1rem auto 0; }
  #ad-bottom { margin: 1.75rem auto 0; }
  #ad-chat   { margin: 0 .75rem .5rem; border-radius: var(--radius-sm); }

  .app:not([data-event-active="true"]) .player-meta,
  .app:not([data-event-active="true"]) .quality-row { display: none; }
  .app[data-cinema="true"] #ad-inline,
  .app[data-cinema="true"] #ad-bottom { display: none; }

  @media (max-width: 900px) {
    .ad-slot[data-size="970x90"],
    .ad-slot[data-size="728x90"] {
      --ad-w: 100%;
      --ad-h: 100px;
    }
    .sidebar > .ad-slot { margin: 0 auto 1rem; }
    #ad-chat { margin: 0 auto .5rem; }
  }

  #ad-mobile-sticky { display: none; }
  @media (max-width: 900px) {
    #ad-mobile-sticky {
      display: grid;
      position: fixed;
      bottom: calc(56px + env(safe-area-inset-bottom));
      inset-inline: 0;
      z-index: 5;
      --ad-w: 100%;
      --ad-h: 100px;
      max-inline-size: none;
      border-radius: 0;
      border-width: 1px 0 0 0;
      margin: 0;
      background-color: color-mix(in oklch, var(--bg-1) 92%, transparent);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
    }
    .app[data-event-active="true"]:not([data-tab="main"]) #ad-mobile-sticky { display: none; }
    .app:not([data-event-active="true"]) .sidebar,
    .app:not([data-event-active="true"]) .main,
    .app:not([data-event-active="true"]) .chat,
    .app[data-tab="main"] .main { padding-bottom: 164px; }
  }

  /* Loading skeleton */
  .skeleton {
    background: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s linear infinite;
    border-radius: var(--radius-sm);
  }
  @keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}

/* --- chat reply + mention (added 2026-07) --- */
.msg-mention{color:#f7b733;font-weight:700}
/* Discord-style mention highlight: bg tint carries the signal, thin gold accent. */
.chat-msg--mentioned{background:rgba(247,183,51,.11);border-left:2px solid #f7b733;border-radius:6px;padding-left:6px}
/* Reply quote block — standard quoted-text left rule (like a blockquote). */
.msg-reply{font-size:12px;line-height:1.3;color:#9aa8c4;border-left:2px solid #46577a;padding:1px 0 1px 8px;margin:0 0 3px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.msg-reply-btn{background:none;border:0;color:#9aa8c4;cursor:pointer;font-size:13px;line-height:1;padding:0 4px;opacity:.5;transition:opacity .12s,color .12s}
.chat-msg:hover .msg-reply-btn{opacity:1}
.msg-reply-btn:hover{opacity:1;color:#fff}
.msg-name{cursor:pointer}
.msg-name:hover{text-decoration:underline}
.chat-reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#18202f;border-top:1px solid #26324a;font-size:12.5px;color:#c4d0e6}
.chat-reply-bar__txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply-bar__txt b{color:#f7b733}
.chat-reply-bar__x{background:none;border:0;color:#9aa8c4;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.chat-reply-bar__x:hover{color:#f04a5b}

@media (max-width:768px){.msg-reply-btn{opacity:.7;font-size:15px;padding:2px 7px}}

/* --- Harden column scroll vs AdSense auto-ads (keeps ads; 2026-07) --- */
.app{height:100dvh!important;max-height:100dvh;overflow:hidden!important}
.sidebar,.main,.chat-messages{overflow-y:auto!important;min-height:0!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* keep an injected body-level auto-ad from pushing the app shell */
body{display:flex!important;flex-direction:column!important}
body>.app{flex:1 1 auto!important;min-height:0!important}
body>ins.adsbygoogle,body>div[id^=google_ads]{flex:0 0 auto}

/* --- Constrain AdSense auto-ads to column width (fixed manual units keep size; 2026-07) --- */
.sidebar,.main,.chat-messages{overflow-x:hidden}
.sidebar .google-auto-placed,.main .google-auto-placed,.chat-messages .google-auto-placed{
  display:block!important;width:100%!important;max-width:100%!important;
  box-sizing:border-box!important;margin-left:0!important;margin-right:0!important;overflow:hidden!important}
.sidebar ins.adsbygoogle,.main ins.adsbygoogle,.chat-messages ins.adsbygoogle{max-width:100%!important;box-sizing:border-box!important}
.sidebar .ad-slot ins.adsbygoogle{margin-inline:auto}
.sidebar ins.adsbygoogle iframe,.main ins.adsbygoogle iframe,.chat-messages ins.adsbygoogle iframe,
.sidebar .google-auto-placed iframe{max-width:100%!important}

/* mobile-sticky: pin pun na viewport (fix desni pomak na match) */
@media (max-width: 900px) {
  #ad-mobile-sticky {
    left: 0 !important;
    right: 0 !important;
    inline-size: auto !important;
    width: auto !important;
    max-inline-size: none !important;
    margin: 0 !important;
  }
  #ad-mobile-sticky > a { display: block; margin: 0 auto; max-width: 100%; }
  #ad-mobile-sticky > a > img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
}