/* ===================================================================
   Playr24 UI — FULL stylesheet (with mobile header + brand improvements)
   Build: mobile-header-v3 (logo larger/clearer, tabs scrollable)
   =================================================================== */

/* Base tokens */
:root{
  /* Adjusted colour palette for a more premium feel.  The dark background
     remains, but cards are slightly lighter, edges soft, and vibrant
     violet accents are used throughout. */
  --bg:#0f172a;      /* primary page background */
  --card:#1e293b;    /* card and panel background */
  --edge:#334155;    /* subtle border colour */
  --text:#f1f5f9;    /* primary text colour */
  --muted:#94a3b8;   /* muted secondary text colour */
  --pill:#1e293b;    /* pill/button background (matches cards) */
  --accent:#ef4444;  /* main accent colour (Playr24 red) */
  --live:#ef4444;    /* live indicator uses accent colour */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  /* Use our primary background for both stops of the gradient */
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg) 100%);
  color:var(--text)
}

/* Header */
.header{
  position:sticky;top:0;
  background:rgba(9,14,20,0.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge);
  z-index:10
}
.bar{
  max-width:1040px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  gap:12px;
  align-items:center
}
.controls{
  display:flex;gap:10px;margin-left:auto;align-items:center;flex-wrap:wrap
}
.controls input[type="text"], .controls input[type="date"]{
  background:var(--card);border:1px solid var(--edge);color:var(--text);
  border-radius:12px;padding:10px 12px;min-width:160px;outline:none
}

/* Style the main search bar in the header (outside of .controls) */
#q{
  background:var(--card);
  border:1px solid var(--edge);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  min-width:200px;
  max-width:320px;
  outline:none;
  flex-grow:1;
  flex-shrink:0;
}
#q::placeholder{
  color:var(--muted);
}
.pill{
  background:var(--pill);border:1px solid var(--edge);color:var(--text);
  border-radius:999px;padding:8px 12px;cursor:pointer
}
.pill.active{border-color:transparent;background:rgba(239,68,68,0.18);color:var(--text);font-weight:800}
.ghost{background:transparent;border:1px solid var(--edge);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
.league-wrap{position:relative;display:flex;align-items:center;gap:6px}
.league-menu{
  position:absolute;top:110%;left:0;min-width:260px;background:var(--card);
  border:1px solid var(--edge);border-radius:12px;padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35)
}
.league-menu.hidden{display:none}
.league-menu .menuitem{
  display:block;width:100%;text-align:left;border:1px solid transparent;
  background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer
}
.league-menu .menuitem:hover{background:rgba(255,255,255,0.06)}
.switch{display:flex;align-items:center;gap:8px}
.switch span{color:var(--muted);font-size:12px;font-weight:600}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:var(--card);position:relative;cursor:pointer}
.switch input:checked{background:linear-gradient(120deg,var(--accent),rgba(37,99,235,0.9))}
.switch input::after{content:"";position:absolute;top:3px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);transition:left .18s}
.switch input:checked::after{left:18px}

/* Main */
main{max-width:1040px;margin:0 auto;padding:16px}
.hero{
  margin:18px 0 10px;
  /* Use the new accent palette in the hero background */
  background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(124,58,237,0.25));
  border:1px solid var(--edge);
  border-radius:16px;
  padding:18px;
}
.hero h1{margin:0 0 6px;font-size:22px}
.hero p{margin:0;color:var(--muted)}
.counts{margin:10px 2px;color:var(--muted)}
.section{background:transparent;border:0;padding:0;margin-top:6px}
.section>h2{margin:10px 0 10px;font-size:16px;color:rgba(239,68,68,0.92)}
.feed{display:flex;flex-direction:column;gap:14px}

/* Game Card */
.game-card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:14px;
  padding:14px;
  position:relative;
  /* Add depth to cards for a more premium feel */
  box-shadow:0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
  transition:transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* Subtle lift and stronger shadow on hover to enhance interactivity */
.game-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.3);
}

/* Favourite star */
.game-card .fav{
  position:absolute;
  top:8px;
  right:8px;
  font-size:18px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  transition:color 0.2s ease;
}

/*
 * Mobile improvements:
 * On narrow screens, allow team names to wrap instead of clipping them with ellipsis,
 * and reposition the favourite star so it doesn’t overlap the sport label. These
 * changes apply at widths below 500px, which covers most phones. They ensure
 * long team names are readable and the star sits unobtrusively near the bottom of
 * each card.
 */
@media (max-width: 600px){
  /* Let team names wrap onto up to two lines to avoid ellipsis */
  .team-name,
  .home-name,
  .away-name{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal;
  }
  /* Reposition the favourite star near the bottom right on phones */
  .game-card .fav{
    top:auto;
    bottom:14px;
    right:14px;
  }
  /* Give the watch button space for the star */
  .watch-btn{
    margin-right:40px;
  }
  /* Additional padding on sport tag to separate it from other elements */
  .sport-tag{
    margin-right:20px;
  }

  /* On very small screens, stack the home team, score/time and away team
     vertically.  Use a wrapping flexbox so each child occupies the full
     width, and specify explicit ordering to maintain the desired order
     (home → score → away).  Centre each row and reduce spacing to keep
     cards compact. */
  .gc-main{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:8px 8px;
    text-align:center;
    align-items:center;
  }
  .gc-main > .team.left,
  .gc-main > .score,
  .gc-main > .team.right{
    flex:1 0 100%;
    justify-content:center;
  }
  .gc-main > .team.left{ order:1; }
  .gc-main > .score{ order:2; }
  .gc-main > .team.right{ order:3; }
  .score .num{ font-size:22px; }
  /* Reduce padding and watch button size on small screens */
  .game-card{ padding:10px; }
  .watch-btn{ padding:8px 12px; font-size:14px; }

  /* Reduce font size for long team names on small screens to prevent
     awkward line breaks.  A slightly smaller font with tighter
     line-height allows names like “Strasbourg” to fit cleanly. */
  .team .name{
    font-size:14px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }
}
.game-card .fav.active{
  color:#facc15;
}
.game-card.favourite{
  border-color:#facc15;
  box-shadow:0 6px 14px rgba(255,204,0,0.3), 0 3px 6px rgba(255,204,0,0.15);
}
.game-card .gc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.gc-head .left{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
.dot.live{background:var(--live);box-shadow:0 0 0 4px rgba(255,77,77,0.12)}
.state{font-weight:700;letter-spacing:0.4px}
.comp{color:var(--muted)}
.sport-tag{color:#a5b4fc;font-weight:700}

.gc-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 10px}
.team{display:flex;align-items:center;gap:10px;min-width:0}
.team.right{justify-content:flex-end}
.badge{width:36px;height:36px;border-radius:50%;object-fit:contain;background:var(--card);border:1px solid var(--edge)}
.name{
  /* Allow team names to wrap on smaller screens instead of truncating with an ellipsis */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width:100%;
}
.score{display:flex;flex-direction:column;align-items:center;min-width:100px}
.score .num{font-size:26px;font-weight:800}
.score .when{margin-top:4px;color:var(--muted);font-size:12px}
.gc-foot{display:flex;justify-content:flex-start;padding:8px 4px 0}
.watch-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  /* Updated to use the violet accent gradient */
  background:linear-gradient(145deg,var(--accent),#7c3aed);
  border:1px solid var(--edge);
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  /* Lift button off the page with a soft shadow */
  box-shadow:0 3px 6px rgba(0,0,0,0.2);
  transition:background 0.18s ease, box-shadow 0.18s ease;
}
.watch-btn:hover{
  /* Hover uses a reversed accent gradient and slightly brighter border */
  background:linear-gradient(145deg,#7c3aed,var(--accent));
  border-color:#7c3aed;
  box-shadow:0 4px 8px rgba(0,0,0,0.4);
}
.play{width:0;height:0;border-left:10px solid var(--text);border-top:6px solid transparent;border-bottom:6px solid transparent;display:inline-block}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,#1e293b,#334155,#1e293b);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:0 0}100%{background-position:-200% 0}}

/* Mobile defaults */
@media(max-width:640px){
  .controls{width:100%}
  .controls input[type="text"]{flex:1 1 100%}
  /* Allow team names to fill the available width on mobile.  A fixed
     maximum width can cut off longer names when combined with the
     stacked layout. */
  .name{max-width:100%}
}
.empty{color:var(--muted);padding:10px;text-align:center;border:1px dashed var(--edge);border-radius:12px}

/* Footer */
.footer{border-top:1px solid var(--edge);margin-top:28px}
.footer .inner{
  max-width:1040px;margin:0 auto;padding:16px;display:flex;gap:10px;
  justify-content:space-between;align-items:center;flex-wrap:wrap
}
.muted{color:var(--muted)} .small{font-size:12px}
.hidden{display:none !important}

/* === Mobile menu toggle styles ========================================= */
/* Button to toggle the collapsible menu. Hidden on desktops by default. */
.menu-btn{
  display:none;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:28px;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  line-height:1;
}

/* Overlay behind the menu; hidden by default */
.menu-overlay{
  display:none;
}

@media (max-width:768px){
  /* Show the hamburger button on small screens */
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  /* Convert controls into an off-canvas panel that slides down */
  .controls{
    position:fixed;
    top:60px; /* approximate header height; adjust if header size changes */
    left:0;
    right:0;
    background:rgba(10,14,20,0.95);
    padding:16px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    transform:translateY(-200%);
    transition:transform 0.3s ease-in-out;
    z-index:999;
  }
  /* When open, slide the controls into view */
  .controls.open{
    transform:translateY(0);
  }
  /* Display the overlay when menu is open */
  .menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:998;
  }
  .menu-overlay.active{display:block;}
  /* Ensure search input spans full width on mobile */
  .bar > input[type="text"]{flex:1 1 100%;min-width:0;}
}

/* === Mobile polish: general ========================================== */
:root{ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
@media (max-width: 768px){
  body{ padding-top: var(--safe-top); padding-bottom: calc(10px + var(--safe-bottom)); }
  .header, .toolbar, .filters-bar{
    position: sticky; top: calc(0px + var(--safe-top)); z-index: 1000;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    background: rgba(10,14,20,0.75);
  }
  .filters-bar{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .filters-bar .chip, .chip{
    display:inline-flex; min-width:72px; padding:10px 14px; margin-right:8px; border-radius:10px;
  }
  .date-row button, .date-controls button{ padding:9px 12px; border-radius:10px; }
  .match-card, .card{ margin:12px; border-radius:14px; }
  .teams{ display:grid; grid-template-columns:32px 1fr auto 1fr 32px; align-items:center; gap:8px; }
  .team-name, .home-name, .away-name{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.2;
  }
  .team-badge, .badge{ width:32px; height:32px; border-radius:50%; object-fit:contain; }
  .kickoff, .kickoff-time{ font-size:12px; opacity:.8; margin-top:2px; }
  .watch-btn, .cta-watch{ width:100%; padding:14px 16px; font-size:16px; border-radius:12px; margin-top:10px; }
  .load-summary{ font-size:12px; opacity:.8; }
}

/* === Timers addon states ============================================= */
.state.live{ color: var(--live); }
.state.finished{ color: var(--muted); }
.state.scheduled{ color: var(--text); opacity:.85; }
.state.half{ color:var(--accent); }
.countdown{ margin-top:4px; font-size:12px; color:var(--muted); }

/* =====================================================================
   MOBILE HEADER + BRAND REWORK (v3)
   - bigger, brighter logo at top-left
   - tabs become horizontal pill bar
   - extra spacing so logo never overlaps search
   ===================================================================== */
@media (max-width: 640px){
  /* Layout space for the brand */
  .header .bar{ position: relative; padding-top: 72px; }

  /* Brand node: try several common wrappers */
  .header .bar .brand,
  .header .bar .logo,
  .header .bar .site-brand,
  .header .bar a.brand,
  .header .bar > a:first-child{
    position: absolute;
    top: 12px; left: 14px;
    z-index: 1400;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  /* Icon itself: larger + contrasted */
  .header .bar .brand img,
  .header .bar .logo img,
  .header .bar .site-brand img,
  .header .bar a.brand img,
  .header .bar > a:first-child > img{
    width: 48px; height: 48px;
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.12), rgba(255,255,255,0));
    border: 1px solid var(--edge);
    padding: 6px;
    object-fit: contain;
    filter: brightness(1.45) contrast(1.2) drop-shadow(0 2px 10px rgba(0,0,0,.7));
  }

  /* Optional wordmark to ensure readability on dark icons */
  .header .bar .brand:not(.brand--no-text)::after,
  .header .bar .logo:not(.brand--no-text)::after,
  .header .bar .site-brand:not(.brand--no-text)::after,
  .header .bar a.brand:not(.brand--no-text)::after,
  .header .bar > a:first-child:not(.brand--no-text)::after{
    content: "Playr24";
    color: var(--text);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    margin-left: 6px;
  }
  /* Override: remove brand caption on mobile */
  .header .bar .brand::after,
  .header .bar .logo::after,
  .header .bar .site-brand::after,
  .header .bar a.brand::after,
  .header .bar > a:first-child::after{
    content: none !important;
    display: none !important;
  }


  /* Controls stack cleanly */
  .controls{ margin-left: 0; width: 100%; gap: 8px; flex-wrap: wrap; }

  /* Search first, full width */
  #q{ order: 1; flex: 1 1 100%; min-width: 0; }

  /* Sport tabs as pill bar */
  .filters, .sport-tabs, .filters-sports{
    order: 2; display: flex; gap: 8px; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar, .sport-tabs::-webkit-scrollbar, .filters-sports::-webkit-scrollbar{ display: none; }
  .filters .pill, .sport-tabs .pill, .filters-sports .pill{ flex: 0 0 auto; }

  /* Leagues + major toggle + dates */
  .league-wrap{ order: 3; }
  .switch{ order: 4; }
  .datepick, .dates, .date-row{ order: 5; width: 100%; display: flex; gap: 8px; overflow-x:auto; }
}

/* ===================================================================
   Mobile header layout refinement
   Place the logo, search bar and menu button on a single line for
   screens up to 640px wide.  This overrides the earlier mobile
   header rules that absolutely positioned the logo and stacked the
   search bar below it.  By restoring static positioning and allowing
   the search bar to flex, we achieve a cleaner, single‑row layout.
   =================================================================== */
@media (max-width: 640px) {
  /* Reduce the top padding reserved for the absolute logo */
  .header .bar {
    padding-top: 12px;
  }
  /* Keep the brand in the normal flow rather than absolute */
  .header .bar .brand,
  .header .bar .logo,
  .header .bar .site-brand,
  .header .bar a.brand,
  .header .bar > a:first-child {
    position: static;
  }
  /* Allow the search input to grow between the logo and menu button */
  #q {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-left: 8px;
  }
  /* Push the hamburger menu to the far right */
  #menuBtn {
    margin-left: auto;
  }
}


/* Desktop: make the logo 56x56 */
@media (min-width: 641px){
  .brand img,
  .header .bar .logo img,
  .header .bar .site-brand img,
  .header .bar a.brand img,
  .header .bar > a:first-child > img{
    width: 56px;
    height: 56px;
  }
}


/* =========================================================
   Match line layout (Playr24)
   - Rows show: time + "Home vs Away"
   - Click row to reveal Watch button
   ========================================================= */
.game-card.match-line{
  padding:12px 14px;
}
.game-card.match-line .mr-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.game-card.match-line .mr-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.game-card.match-line .mr-time{
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-weight:700;
  min-width:48px;
}
.game-card.match-line .mr-teams{
  display:inline-flex;
  gap:8px;
  align-items:baseline;
  min-width:0;
  font-weight:800;
}

.game-card.match-line .mr-teams .team{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.game-card.match-line .mr-teams .team-ico{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.game-card.match-line .team-logo{
  width:16px;
  height:16px;
  object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Safety net: never let any fixture logos explode in size (some APIs return huge SVG/PNGs).
   NOTE: Some legacy styles use percentage widths on images; we override inside match cards. */
.game-card .team-logo,
.game-card .badge,
.game-card .team-badge,
.game-card img{
  width:auto !important;
  height:auto !important;
  max-width:56px !important;
  max-height:56px !important;
}

/* Ensure team names are always visible in match-line rows */
.game-card.match-line .mr-teams .teamname{
  display:inline-block;
}

@media (max-width: 640px){
  /* Make rows more compact on phones */
  .game-card.match-line{ padding:12px 12px; }
  .game-card.match-line .mr-time{ min-width:44px; font-size:13px; }
  .game-card.match-line .mr-teams{ font-size:14px; line-height:1.2; }
  .game-card.match-line .team-logo{ width:14px; height:14px; }
  .game-card.match-line .mr-teams .teamname{ max-width:36vw; }
  .game-card.match-line .mr-right{ gap:8px; }
  .game-card.match-line .mr-state{ font-size:11px; padding:4px 8px; }
  .game-card.match-line .mr-actions{ margin-top:8px; }
  .game-card.match-line .watch-btn{ width:100%; justify-content:center; }
}

@media (max-width: 420px){
  /* Allow full names on very small screens */
  .game-card.match-line .mr-teams{ flex-wrap:wrap; }
  .game-card.match-line .mr-teams .teamname{ max-width:70vw; }
  .game-card.match-line .mr-time{ display:none; }
}
.game-card.match-line .mr-teams .teamname{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:38vw;
}

/* Mobile: stack crest + full team name */
@media (max-width: 520px){
  .game-card.match-line .mr-teams{
    align-items:flex-start;
  }
  .game-card.match-line .mr-teams .team{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:0;
  }
  .game-card.match-line .mr-teams .team-ico{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .game-card.match-line .team-logo{ width:26px; height:26px; }
  .game-card.match-line .mr-teams .teamname{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    max-width:90px;
    font-size:11px;
    line-height:1.1;
    text-align:center;
  }
}

/* Mobile: put names under crests so they stay readable */
@media (max-width: 520px){
  .game-card.match-line .mr-teams{
    align-items:flex-start;
    gap:10px;
  }
  .game-card.match-line .mr-teams .team{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:0;
  }
  .game-card.match-line .mr-teams .team-ico{
    width:22px;
    height:22px;
  }
  .game-card.match-line .mr-teams .team-logo{
    width:22px;
    height:22px;
    border-radius:8px;
  }
  .game-card.match-line .mr-teams .teamname{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    max-width:92px;
    text-align:center;
    font-size:11px;
    line-height:1.15;
  }
  .game-card.match-line .mr-teams .vs{
    align-self:center;
  }
}
.game-card.match-line .mr-teams .vs{
  color:rgba(239,68,68,0.95);
  font-weight:900;
}
.game-card.match-line .mr-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.game-card.match-line .mr-state{
  font-size:12px;
  font-weight:900;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--edge);
  color:var(--muted);
}
.game-card.match-line .mr-state.live{
  color:white;
  border-color:rgba(239,68,68,0.55);
  background:rgba(239,68,68,0.22);
}
.game-card.match-line .mr-state.finished{
  color:rgba(148,163,184,0.9);
  background:rgba(148,163,184,0.08);
}
.game-card.match-line .mr-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}
.game-card.match-line .mr-actions{
  margin-top:10px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .18s ease, opacity .18s ease, transform .18s ease;
  transform:translateY(-4px);
}
.game-card.match-line.expanded .mr-actions{
  max-height:60px;
  opacity:1;
  transform:translateY(0);
}
.game-card.match-line .watch-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(90deg,rgba(239,68,68,0.95),rgba(37,99,235,0.9));
  color:white;
  text-decoration:none;
  font-weight:900;
  border-radius:12px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,0.12);
  position:relative;
}
.game-card.match-line .watch-btn.clicked{
  animation:watchPop .18s ease-out;
}
@keyframes watchPop{
  0%{ transform:scale(1); filter:brightness(1); }
  60%{ transform:scale(1.06); filter:brightness(1.12); }
  100%{ transform:scale(1); filter:brightness(1); }
}
@media (max-width: 600px){
  .game-card.match-line .mr-teams .teamname{ max-width:42vw; }
  .game-card.match-line .mr-meta{ flex-direction:column; gap:4px; }
}



/* ==========================================================
   Playr24 mobile match layout: logos + full names readable
   Stacks teams vertically on phones, keeps desktop inline
   ========================================================== */
@media (max-width: 520px){
  .game-card.match-line .mr-left{ align-items:flex-start; gap:10px; }
  .game-card.match-line .mr-teams{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:0;
    width:100%;
  }
  .game-card.match-line .mr-teams .team{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .game-card.match-line .mr-teams .team .team-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
  }
  .game-card.match-line .mr-teams .team .team-ico img,
  .game-card.match-line .mr-teams .team .team-ico svg{
    width:34px !important;
    height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    object-fit:contain;
  }
  .game-card.match-line .mr-teams .teamname{
    display:block !important;
    max-width:72vw !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    text-align:center;
    font-size:13px;
    line-height:1.15;
  }
  .game-card.match-line .mr-teams .vs{
    font-size:12px;
    margin:0;
    opacity:.9;
  }
}

/* On larger screens, keep names from truncating too aggressively */
@media (min-width: 521px){
  .game-card.match-line .mr-teams .teamname{
    max-width:240px;
  }
}



/* ============================================================
   Playr24 Mobile Card Layout v2
   - Move time/league/starts-in to the top row
   - Put status pill + star top-right
   ============================================================ */

.game-card.match-line{ position: relative; }

.mr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.mr-hl{ min-width:0; flex:1; }
.mr-hrow{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.mr-comp{
  color: var(--muted);
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mr-count{
  display:block;
  margin-top:6px;
  color: var(--muted);
  font-size:12px;
}

.mr-hr{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.fav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, color .12s ease, background .12s ease;
}
.fav-btn:active{ transform: scale(.96); }
.fav-btn.on, .fav-btn.active{ color: var(--accent); background: rgba(230,57,70,.12); border-color: rgba(230,57,70,.35); }

.mr-teams-stack{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:4px 0 6px;
}
.mr-teams-stack .team-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 0;
  min-width:0;
}
.mr-teams-stack .team-row:first-child{ justify-content:flex-end; }
.mr-teams-stack .team-row:last-child{ justify-content:flex-start; }

.mr-teams-stack .teamname{
  font-weight:750;
  font-size:14.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:40vw;
}
.mr-teams-stack .team-logo{ width:22px; height:22px; flex:0 0 auto; }

.mr-teams-stack .vs{
  color: var(--accent);
  font-weight:800;
  letter-spacing:.6px;
  flex:0 0 auto;
}

/* Hide old layout blocks that may still exist in DOM for older cached HTML */
.mr-main, .mr-meta{ display:none !important; }

/* Desktop: keep compact single-line look */
@media (min-width: 768px){
  .mr-head{ margin-bottom:0; align-items:center; }
  .mr-count{ margin-top:0; display:none; }
  .mr-teams-stack{
    flex-direction:row;
    justify-content:center;
    gap:12px;
    padding:0;
  }
  .mr-teams-stack .team-row{ width:auto; justify-content:flex-start; }
  .mr-teams-stack .teamname{ font-size:14px; text-align:left; white-space:nowrap; }
}