/* RiconTop Footy "Liquid Glass" look. Only applies when <html> has the class "glass"
   (set by theme.js). Without it the site keeps the classic look. */
html.glass { --glass: rgba(255,255,255,.32); --glass-solid: rgba(255,255,255,.78); --edge: rgba(255,255,255,.75); }
html.glass { background: #e9eefb; }
html.glass body { background: transparent !important; }
html.glass body::before { content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 10% 5%, var(--tint-a, rgba(31,58,147,.55)), transparent 70%),
    radial-gradient(55% 45% at 90% 30%, var(--tint-b, rgba(14,165,233,.50)), transparent 70%),
    radial-gradient(45% 40% at 80% 80%, rgba(139,92,246,.22), transparent 70%),
    radial-gradient(45% 40% at 10% 65%, rgba(14,165,233,.55), transparent 70%),
    #eef2ff; filter: blur(20px); }

/* frosted panels */
html.glass header, html.glass .fx, html.glass .card, html.glass .tile, html.glass .comptabs, html.glass .roundbar .arrow,
html.glass .banner, html.glass .strip .game, html.glass .gamestats, html.glass .matchhead, html.glass .leadbox, html.glass .teams section,
html.glass footer.site, html.glass .sugg, html.glass .mk-menu, html.glass .quick > *, html.glass .search input,
html.glass .rtc-panel, html.glass .waitnote {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid var(--edge) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(15,23,42,.10) !important;
}
html.glass .fx, html.glass .card, html.glass .teams section, html.glass .gamestats, html.glass .quick > * {
  border-radius: 24px !important; position: relative; overflow: hidden; isolation: isolate; }
html.glass .tile { border-radius: 18px !important; }
html.glass .matchhead, html.glass .leadbox { border-radius: 24px !important; padding: 16px 18px !important; position: relative; isolation: isolate; }
html.glass .leadbox .leaders { margin-bottom: 4px; }
html.glass .leadbox .leader { background: rgba(255,255,255,.42) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
                              box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.7) !important; }
html.glass .leadbox .pcredits { margin: 8px 0 0; }
html.glass .shelf-btn { background: rgba(255,255,255,.7); border-color: var(--edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(15,23,42,.15); }
html.glass .shelf-btn[disabled] { box-shadow: none; }
/* player page: their photo becomes a soft coloured glow behind the frosted page */
html.glass .hero.has-photo { position:relative; isolation:isolate; padding:14px; border-radius:26px; }
html.glass .hero.has-photo::before { content:""; position:absolute; inset:-30px -10px; z-index:-1; border-radius:40px;
  background-image: var(--photo); background-size: cover; background-position: 50% 25%;
  filter: blur(38px) saturate(160%); opacity:.55; }
html.glass .hero .pphoto img, html.glass .hero .pinit { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 10px 30px rgba(15,23,42,.25); }
html.glass .leader .lphoto { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 3px 10px rgba(15,23,42,.2); }
/* the soft shine sits BEHIND the content so club stripes stay solid */
html.glass .fx::after, html.glass .card::after, html.glass .teams section::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18) 100%); }
html.glass .flag { box-shadow: 0 0 0 1px rgba(255,255,255,.7); }

html.glass .fx.fav { box-shadow: 0 0 0 2px var(--fav, #1F3A93), inset 0 1px 0 rgba(255,255,255,.9), 0 12px 34px rgba(31,58,147,.25) !important; }
html.glass .fx.live { background: linear-gradient(rgba(255,255,255,.6), rgba(254,226,226,.55)) !important; }
html.glass .btn-live { background: linear-gradient(180deg, #ef4444, #dc2626) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 22px rgba(220,38,38,.45) !important; }
html.glass .btn-ghost { background: rgba(255,255,255,.65); }
html.glass .comptabs { border-radius: 999px !important; }
html.glass .comptabs a.on { background: rgba(255,255,255,.92) !important; box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(15,23,42,.12) !important; }
html.glass main { background: transparent !important; }

/* tables: no blur per row (keeps scrolling smooth), slightly solid rows so numbers stay crisp */
html.glass table.stats th, html.glass table.stats td { background: rgba(255,255,255,.55) !important; }
html.glass table.stats tbody tr:nth-child(even) td { background: rgba(255,255,255,.72) !important; }
html.glass .teams section h2 { background: rgba(255,255,255,.4) !important; }
html.glass .card table td, html.glass .card table th { background: transparent; }

/* score banner */
html.glass .banner { margin: 10px 12px 0; border-radius: 24px !important; }
html.glass .strip { background: transparent !important; gap: 8px; padding: 8px !important; }
html.glass .strip .game { border-radius: 18px !important; }
html.glass .comp { background: transparent !important; border-right: 0 !important; }
html.glass .comp .seg { background: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.5); }
html.glass .comp .seg a.on { background: rgba(255,255,255,.92); }
html.glass footer.site { margin: 20px 12px 24px; border-radius: 22px !important; }

/* floating glass header; the menu is its own floating pill (theme.js moves it out of the header) */
html.glass header { position: sticky !important; top: 10px !important; margin: 10px 12px 0 !important; border-radius: 999px !important;
                    padding: 10px 16px !important; z-index: 60; min-height: 56px; }
html.glass body > .topnav { position: fixed; top: 19px; right: 26px; z-index: 70; margin: 0; }
html.glass .topnav a.on { background: rgba(31,58,147,.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(31,58,147,.35); }

/* phones: the menu becomes a floating glass tab bar at the bottom; the logo scrolls away like iOS */
@media (max-width: 700px) {
  html.glass header { position: relative !important; justify-content: center; background: transparent !important; border-color: transparent !important;
                      box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.glass body > .topnav { top: auto; right: auto; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    padding: 6px; gap: 4px; border-radius: 999px; white-space: nowrap;
    background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(16px) saturate(200%); backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 40px rgba(15,23,42,.22); }
  html.glass body > .topnav a { padding: 10px 16px !important; font-size: .9rem !important; }
  html.glass footer.site { margin-bottom: 100px; }
  html.glass .rtc-btn { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 74px) !important; }   /* chat button above the tab bar */
}

/* iOS-style edge blur: content blurs more the closer it gets to the top and bottom of the screen */
html.glass .edge { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 55;
                   opacity: 0; transition: opacity .45s ease; }
html.glass.scrolling .edge { opacity: 1; transition: opacity .15s ease; }
html.glass .edge.top { top: 0; height: 110px; }
html.glass .edge.bottom { bottom: 0; height: 120px; }
html.glass .edge > i { position: absolute; inset: 0; display: block; }
html.glass .edge.top > i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 25%); mask-image: linear-gradient(to top, transparent 0%, #000 25%); }
html.glass .edge.top > i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 45%); mask-image: linear-gradient(to top, transparent 20%, #000 45%); }
html.glass .edge.top > i:nth-child(3) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to top, transparent 40%, #000 65%); mask-image: linear-gradient(to top, transparent 40%, #000 65%); }
html.glass .edge.top > i:nth-child(4) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to top, transparent 60%, #000 85%); mask-image: linear-gradient(to top, transparent 60%, #000 85%); }
html.glass .edge.top > i:nth-child(5) { background: linear-gradient(to bottom, rgba(238,242,255,.85), rgba(238,242,255,0)); }
html.glass .edge.bottom > i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%); mask-image: linear-gradient(to bottom, transparent 0%, #000 25%); }
html.glass .edge.bottom > i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 45%); mask-image: linear-gradient(to bottom, transparent 20%, #000 45%); }
html.glass .edge.bottom > i:nth-child(3) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 65%); mask-image: linear-gradient(to bottom, transparent 40%, #000 65%); }
html.glass .edge.bottom > i:nth-child(4) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 85%); mask-image: linear-gradient(to bottom, transparent 60%, #000 85%); }
html.glass .edge.bottom > i:nth-child(5) { background: linear-gradient(to top, rgba(238,242,255,.8), rgba(238,242,255,0)); }
/* things that must stay above the blur */
html.glass .rtc-btn, html.glass .rtc-panel, html.glass .adm-bar, html.glass .mk-menu { z-index: 80 !important; }
html.glass header { z-index: 60; }

/* phones only: small game and pick cards come into focus as they scroll in from the bottom.
   (Never on big panels like tables, and never on computers, where the middle of the page stays sharp.) */
@media (max-width: 700px) {
  @supports (animation-timeline: view()) {
    html.glass .fx, html.glass .pick { animation: rt-focusin linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rt-focusin { from { filter: blur(3px); opacity: .6; transform: translateY(12px) scale(.985); } to { filter: none; opacity: 1; transform: none; } }
  }
}
/* computers: a gentler, shorter edge blur, so it's only a soft fade at the very top and bottom */
@media (min-width: 701px) {
  html.glass .edge.top { height: 70px; }
  html.glass .edge.bottom { height: 80px; }
  html.glass .edge > i:nth-child(4) { display: none; }          /* drop the strongest blur layer */
}
@media (prefers-reduced-motion: reduce) { html.glass .fx, html.glass .pick { animation: none !important; } }

/* devices that can't blur: plain white panels instead, nothing breaks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.glass header, html.glass .fx, html.glass .card, html.glass .tile, html.glass .banner, html.glass .gamestats,
  html.glass .teams section, html.glass footer.site, html.glass body > .topnav { background: var(--glass-solid) !important; }
  html.glass .edge { display: none; }
}