/* ============================================================================
   HKPL PREMIUM POLISH — family-wide depth + motion (loaded LAST, app-wide).
   The operator asked to fix the FAMILY, not one page: this elevates the shared
   card / pill / button / tab patterns every page already uses, so the whole app
   gains the same premium feel without touching each page. Depth = softer layered
   shadows + rounder cards; Motion = smooth transitions, hover-lift, tap feedback,
   a gentle page-content rise; Accent = HKPL-green glow on primary actions.
   Kept tasteful + additive so no layout breaks.
   ========================================================================== */

/* ---- DEPTH: soft, layered elevation on the shared card shadow utility ---- */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(4, 45, 27, .05), 0 8px 22px -12px rgba(4, 45, 27, .18) !important;
}
.shadow-md {
  box-shadow: 0 2px 6px rgba(4, 45, 27, .06), 0 16px 34px -16px rgba(4, 45, 27, .24) !important;
}
/* a hair rounder — feels more premium than the stock 16px */
.rounded-2xl { border-radius: 18px; }
.rounded-xl { border-radius: 14px; }

/* ---- MOTION: smooth transitions on everything interactive ---- */
.hkpl-card, .dp-mcard, .dp-scard, .rr-card, .sb-cell, .pcard, .hkplc-sp-card,
.hkplc-mcard, .hkplc-gallery-cell, .dl-pill, .div-tab, .range-btn, .qa-cell,
.ap-card, .ap-q, .rg-item, .rf-match, .rf-live-btn, .pp-row, .ft-teams .flex,
[class*="rounded-2xl"], [class*="rounded-xl"] {
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .15s ease, background-color .15s ease;
}

/* hover-lift on pointer devices (phones don't hover, so no sticky states) */
@media (hover: hover) {
  .pcard:hover, .ap-card:hover, .ap-q:hover, .rg-item:hover, .rf-match:hover,
  .dp-mcard:hover, .hkplc-mcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(4, 45, 27, .30) !important;
  }
}

/* tap feedback — a subtle press on anything tappable (feels native) */
a:active, button:active, .dl-pill:active, .div-tab:active, .range-btn:active,
.qa-cell:active, .ap-q:active, .rf-live-btn:active, .pcard:active {
  transform: scale(.975);
}

/* ---- MOTION: gentle content rise on each page (SPA route change) ---- */
@keyframes hkpl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  #dp-home, #match-list, .wrap, .rf-wrap, .rg-wrap, .ap-wrap, .ls-wrap,
  main > .max-w-2xl, main > .max-w-3xl, main > .max-w-5xl {
    animation: hkpl-rise .34s cubic-bezier(.2, .8, .2, 1) both;
  }
}

/* ---- ACCENT: HKPL-green glow on primary actions (like the live scoreboard) ---- */
.rf-live-btn, .ap-btn, .dp-feat-cta, .rg-approve, .si-submit, button.primary,
.btn.primary, .register-cta {
  box-shadow: 0 8px 22px -8px rgba(0, 128, 52, .55);
}
.rf-live-btn:hover, .ap-btn:hover, .rg-approve:hover {
  box-shadow: 0 10px 28px -8px rgba(0, 128, 52, .7);
}

/* ---- POLISH: crisper pills / tabs ---- */
#league-nav a { box-shadow: 0 2px 8px -6px rgba(4, 45, 27, .3); }
#league-nav a.on { box-shadow: 0 4px 12px -4px rgba(0, 128, 52, .55); }
.hero-pill { box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3); }

/* day / section headers get a subtle green gradient instead of flat fill */
.bg-hkpl-500 {
  background-image: linear-gradient(120deg, #0a5a36 0%, #008034 55%, #0aa065 100%) !important;
}

/* ==========================================================================
   PREMIUM v2 — 2026 MODERN WEB LAYER (family-wide, all screen sizes)
   Every rule is @supports-guarded so unsupported engines simply keep the v1
   look — progressive enhancement, never a break. These are the genuinely
   current (Chrome 130+/Safari 18+/Firefox 130+) capabilities that make an H5
   app feel native: scroll-driven reveal, dynamic viewport height, glass bars,
   container queries (reflow by a component's OWN width, not the viewport),
   fluid type. Refs: web-standards 2026 (container queries / scroll-driven
   animations / view transitions are production-ready as progressive enh.).
   ========================================================================== */

/* ---- dvh: full-height surfaces stop jumping when the mobile URL bar hides ---- */
@supports (height: 100dvh) {
  .wv-shell, .wx-shell, .si-split { min-height: 100dvh; }
  #ml-host, .idx-redirect { min-height: 60dvh; }
}

/* ---- Glass: sticky app bars blur the content scrolling under them ---- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wv-appbar, .wx-topbar, .wx-navbar, .dp-nav {
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
  }
}

/* ---- Scroll-driven reveal: cards fade + rise as they enter, native, no JS ---- */
@keyframes hkpl-reveal { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pcard, .ap-card, .ap-q, .rg-item, .rf-match, .dp-mcard, .dp-scard,
    .hkplc-mcard, .hkplc-sp-card, .hkplc-gallery-cell, .up-mrow, .up-mday,
    .sb-cell, .pp-row, .rr-card {
      animation: hkpl-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 42%;
    }
    /* the once-per-route page rise is redundant when per-card reveal is live */
    #dp-home, #match-list, .rf-wrap, .rg-wrap, .ap-wrap, .ls-wrap { animation: none; }
  }
}

/* ---- Container queries: an opt-in grid that reflows by its OWN width. Add
   class="cq" to a wrapper + class="cq-grid" to the grid inside it and the same
   markup gives 1 / 2 / 3 columns whether it sits in a phone, a tablet, or a
   wide desktop side-column — with zero @media breakpoints. ---- */
@supports (container-type: inline-size) {
  .cq { container-type: inline-size; }
  .cq-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @container (min-width: 460px) { .cq-grid { grid-template-columns: 1fr 1fr; } }
  @container (min-width: 720px) { .cq-grid { grid-template-columns: 1fr 1fr 1fr; } }
  @container (min-width: 1040px) { .cq-grid { grid-template-columns: repeat(4, 1fr); } }
}

/* ---- Fluid type: hero titles scale smoothly across every width (no steps) ---- */
.rg-hero h1, .rf-hero h1, .ap-hero h1, .dp-hero h1, .si-hero h1, .lp-hero h1 {
  font-size: clamp(24px, 4.5vw, 36px) !important;
  line-height: 1.1;
}

/* ---- color-mix accent: cells warm to HKPL-green on hover (pointer only) ---- */
@supports (background: color-mix(in srgb, red, blue)) {
  @media (hover: hover) {
    .rg-item:hover, .ap-card:hover, .rf-match:hover, .pcard:hover {
      border-color: color-mix(in srgb, #008034 35%, #e5e7eb) !important;
    }
  }
}

/* ---- View Transitions: cross-fade SPA route changes where supported ---- */
@supports (view-transition-name: none) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
}

/* ==========================================================================
   SIGNATURE "WOW" — a living hero. A drifting aurora glow (green + lime,
   blended with `screen` so it only adds light, never hurts text legibility)
   plus a slow Ken-Burns zoom on the banner. Added as a real element
   (.hkpl-aurora) inside each hero so it never collides with existing pseudo
   elements. Hero content is lifted above it. All motion reduced-motion-guarded.
   ========================================================================== */
.dp-hero, .mh-hero { position: relative; }
.dp-hero-left, .dp-hero-card, .mh-in, .mh-final, .mh-chips { position: relative; z-index: 2; }
.hkpl-aurora {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(50% 50% at 28% 30%, rgba(157, 255, 91, .50), transparent 60%),
    radial-gradient(55% 55% at 74% 66%, rgba(10, 160, 101, .52), transparent 62%),
    radial-gradient(40% 40% at 55% 20%, rgba(120, 220, 255, .28), transparent 60%);
  background-size: 160% 160%, 175% 175%, 150% 150%;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .hkpl-aurora { animation: hkpl-aurora 13s ease-in-out infinite; }
  .dp-hero-bg { animation: hkpl-kenburns 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
}
@keyframes hkpl-aurora {
  0%, 100% { opacity: .45; background-position: 0% 0%, 100% 100%, 50% 0%; }
  50%      { opacity: .78; background-position: 34% 22%, 66% 78%, 40% 30%; }
}
@keyframes hkpl-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

/* ---- Top navigation progress bar (GitHub/YouTube style) ---- */
#hkpl-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #008034 0%, #0aa065 60%, #9dff5b 100%);
  box-shadow: 0 0 10px rgba(10, 160, 101, .55), 0 1px 0 rgba(157, 255, 91, .4);
  z-index: 99999; opacity: 0; pointer-events: none;
  border-bottom-right-radius: 3px; border-top-right-radius: 3px;
}