/* ==========================================================
   POOL MAGIC PREMIUM SHARED HEADER — V8 reference-match
   Target: identičan izgled sa referentnom slikom
   ========================================================== */

:root {
  --pmx-cyan:  #00e5ff;
  --pmx-blue:  #118dff;
  --pmx-red:   #ff2b49;
  --pmx-green: #16f272;
  --pmx-ink:   #020810;
}

/* ── HEADER SHELL ──────────────────────────────────────────── */
.pmx-header {
  position: relative;
  z-index: 5;
  height: 240px;
  min-height: 240px;
  overflow: visible;
  isolation: isolate;
  background: #020810;
  border-bottom: 1px solid rgba(0, 229, 255, .22);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .65);
}

/* ── BACKGROUND IMAGE ──────────────────────────────────────── */
.pmx-header-bg {
  position: absolute;
  inset: 0;
  /*z-index: -6;*/
  overflow: hidden;
  background-image: url('../img/header/header-bg-desktop.webp');
  background-size: cover;
  background-position: center 48%;
  /*filter: saturate(1.15) contrast(1.1) brightness(.60);*/
}

/* ── CINEMATIC COLOR WASH ──────────────────────────────────── */
.pmx-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(ellipse 38% 72% at 35% 62%, rgba(255,43,73,.52), transparent 100%),
    radial-gradient(ellipse 38% 72% at 65% 62%, rgba(17,141,255,.52), transparent 100%),
    radial-gradient(circle 14% at 50% 52%, rgba(0,229,255,.28), transparent 100%),
    linear-gradient(90deg,
      rgba(255,30,60,.55)   0%,
      rgba(255,43,73,.28)  32%,
      rgba(0,0,0,.06)      48%,
      rgba(0,0,0,.06)      52%,
      rgba(17,141,255,.30) 68%,
      rgba(17,141,255,.58) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.05)  0%,
      rgba(0,0,0,.32) 55%,
      rgba(0,0,0,.96) 100%
    );
  pointer-events: none;
}

/* ── BOTTOM VIGNETTE ───────────────────────────────────────── */
.pmx-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 0% 18%, rgba(0,0,0,.22) 46%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.92) 100%);
  pointer-events: none;
}

.pmx-header-wash {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(2,8,16,0), rgba(2,8,16,.82) 60%, rgba(2,8,16,1));
  pointer-events: none;
  z-index: -1;
}

/* ── LEFT / RIGHT UI ───────────────────────────────────────── */
.pmx-header-ui {
  position: absolute;
  top: 26px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 230px;
}

.pmx-header-ui-left  { left:  clamp(24px, 3vw, 58px); align-items: flex-start; }
.pmx-header-ui-right { right: clamp(24px, 3vw, 58px); align-items: flex-end;   }

.pmx-header-link,
.pmx-header-season,
.pmx-header-online {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display, 'Arial Narrow', Arial, sans-serif);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(238, 250, 255, .94);
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 0 22px rgba(0, 229, 255, .22);
}

.pmx-header-link   { font-size: 19px; }
.pmx-header-link i { color: var(--pmx-cyan); font-size: 26px; filter: drop-shadow(0 0 12px rgba(0,229,255,.95)); }

.pmx-header-season {
  font-size: 15px;
  color: rgba(200, 228, 242, .94);
  padding-top: 20px;
  border-top: 1px solid rgba(170, 220, 240, .28);
  width: 238px;
}

.pmx-header-season i { color: var(--pmx-cyan); font-size: 21px; }

.pmx-header-online {
  gap: 8px;
  font-size: 15px;
  color: #35ff84;
  padding-top: 20px;
  border-top: 1px solid rgba(170, 220, 240, .28);
  width: 238px;
  justify-content: flex-end;
}

.pmx-header-online small {
  display: block;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .2px;
  text-transform: none;
  font-weight: 800;
  margin-left: 4px;
}

.pmx-online-dot {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #17f36f;
  box-shadow: 0 0 22px rgba(23,243,111,1), 0 0 8px rgba(23,243,111,.8);
}

/* ── LOGO ──────────────────────────────────────────────────── */
.pmx-header-logo {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: clamp(220px, 15.5vw, 295px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  text-decoration: none;
  overflow: visible;
}

/* Oštar conic-gradient prsten: crvena levo, bela na spoju, plava desno */
.pmx-header-logo::before {
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  z-index: 4;
   background: conic-gradient(from 180deg, rgba(255, 43, 73, .00) 0deg, rgb(255 0 0) 20deg, rgb(200 63 71) 80deg, rgba(255, 120, 100, .95) 155deg, rgba(255, 255, 255, 1.00) 178deg, rgba(255, 255, 255, 1.00) 182deg, rgb(0 16 125) 205deg, rgb(35 17 255) 280deg, rgb(126 150 194 / 95%) 340deg, rgba(255, 43, 73, .00) 360deg);

  -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%, #000 67.5%, transparent 69.5%);
          mask: radial-gradient(circle, transparent 63%, #000 64%, #000 66%, transparent 67.5%);
  filter:
    drop-shadow(-10px 0 14px rgba(255,43,73,.95))
    drop-shadow( 10px 0 14px rgba(0,145,255,.98))
    drop-shadow(   0 0 22px rgba(255,255,255,.25));
  pointer-events: none;
}

/* Meki bloom prsten — prostire se van za "sjaj" efekat */
.pmx-header-logo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  background: conic-gradient(from 180deg,
    rgba(255,43,73,.00)   0deg,
    rgba(255,43,73,.72)  40deg,
    rgba(255,43,73,.65) 160deg,
    rgba(255,255,255,.28) 180deg,
    rgba(17,141,255,.68) 200deg,
    rgba(17,141,255,.72) 322deg,
    rgba(17,141,255,.00) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%, #000 76%, transparent 82%);
          mask: radial-gradient(circle, transparent 56%, #000 60%, #000 76%, transparent 82%);
  filter: blur(12px);
  opacity: .88;
  pointer-events: none;
}

.pmx-header-logo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.22))
    drop-shadow(-10px 0 18px rgba(255,43,73,.72))
    drop-shadow( 10px 0 18px rgba(0,145,255,.80))
    drop-shadow(0 16px 24px rgba(0,0,0,.92));
}

/* Široki bloom span — crvena/plava aura koja se prostire van loga */
.pmx-logo-bloom {
  position: absolute;
  inset: -40% -65% -30% -65%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 52%, rgba(255,43,73,.52), rgba(255,43,73,.18) 38%, transparent 65%),
    radial-gradient(ellipse at 65% 52%, rgba(0,153,255,.58), rgba(0,153,255,.20) 38%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 42%);
  filter: blur(22px);
  opacity: .78;
  pointer-events: none;
}

/* ── NEON STAGE ────────────────────────────────────────────── */
.pmx-neon-stage {
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 106px;
  z-index: 22;
  pointer-events: none;
}

.pmx-neon-stage::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
  height: 28px;
  background: linear-gradient(90deg,
    rgba(255,43,73,.32),
    rgba(255,43,73,.08) 42%,
    rgba(17,141,255,.08) 58%,
    rgba(17,141,255,.32)
  );
  filter: blur(18px);
  opacity: .82;
}

.pmx-neon-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Dodatni drop-shadow na SVG za pojačan glow efekat */
  filter:
    drop-shadow(0 0 7px rgba(255,43,73,.60))
    drop-shadow(0 0 7px rgba(17,141,255,.60));
}

.pmx-line {
  fill: none;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pmx-line-red  { stroke: #ff2b49; }
.pmx-line-blue { stroke: #118dff; }

/* ── BILIJARSKE LOPTE ──────────────────────────────────────── */
.pmx-ball {
  position: absolute;
  width: clamp(82px, 5.4vw, 106px);
  height: auto;
  bottom: 22px;
  opacity: 0.75;
  z-index:  -1;
}

.pmx-ball-8 {
  left: clamp(240px, 22vw, 400px);
  filter:
    drop-shadow(0 0  8px rgba(255,43,73,1.00))
    drop-shadow(0 0 26px rgba(255,43,73,.88))
    drop-shadow(0 0 52px rgba(255,43,73,.55))
    drop-shadow(0 20px 30px rgba(0,0,0,.82));
}

.pmx-ball-10 {
  right: clamp(240px, 22vw, 400px);
  filter:
    drop-shadow(0 0  8px rgba(17,141,255,1.00))
    drop-shadow(0 0 26px rgba(17,141,255,.90))
    drop-shadow(0 0 52px rgba(17,141,255,.56))
    drop-shadow(0 20px 30px rgba(0,0,0,.82));
}

/* ── CONTENT OVERLAP ───────────────────────────────────────── */
.pmx-header + .pm-wrap,
.pmx-header + .pm-hero {
  position: relative;
/*  z-index: 6;*/
  margin-top: -12px;
}

.pmx-header + .pm-wrap .pm-back { display: none; }
.pmx-header + .pm-hero { padding-top: 28px; }

/* ── BALL ICONS U MATCH KARTICI ────────────────────────────── */
.pm-ball-icon {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

.pm-ball-8  { background-image: url('../img/ui/ball-8-small.webp')  !important; }
.pm-ball-9  { background-image: url('../img/ui/ball-9-small.webp')  !important; }
.pm-ball-10 { background-image: url('../img/ui/ball-10-small.webp') !important; }

/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .pmx-header { height: 190px; min-height: 190px; }
  .pmx-header-bg {
    background-image: url('../img/header/header-bg-tablet.webp');
    background-position: center 44%;
    filter: saturate(1.12) contrast(1.08) brightness(.62);
  }
  .pmx-header-logo  { width: clamp(178px, 18vw, 224px); top: 8px; }
  .pmx-header-ui    { top: 22px; gap: 16px; min-width: 170px; }
  .pmx-header-link  { font-size: 15px; letter-spacing: 2.2px; }
  .pmx-header-season,
  .pmx-header-online{ font-size: 12px; width: 185px; letter-spacing: 1.8px; padding-top: 15px; }
  .pmx-neon-stage   { height: 86px; bottom: -8px; }
  .pmx-line         { stroke-width: 4.6; }
  .pmx-ball         { width: 68px; bottom: 20px; }
  .pmx-ball-8       { left: 15vw; }
  .pmx-ball-10      { right: 15vw; }
  .pmx-header + .pm-wrap,
  .pmx-header + .pm-hero { margin-top: -10px; }
}

@media (max-width: 760px) {
  .pmx-header { height: 140px; min-height: 140px; }
  .pmx-header-bg {
    background-image: url('../img/header/header-bg-mobile.webp');
    background-position: center top;
    filter: saturate(1.08) contrast(1.05) brightness(.60);
  }
  .pmx-header-logo  { width: 125px; top: 5px; }
  .pmx-logo-bloom   { inset: -22%; filter: blur(12px); opacity: .85; }
  .pmx-header-ui    { top: 16px; min-width: auto; gap: 0; }
  .pmx-header-ui-left  { left: 14px; }
  .pmx-header-ui-right { right: 14px; }
  .pmx-header-link {
    font-size: 0; letter-spacing: 0;
    width: 38px; height: 38px;
    place-items: center;
    border-radius: 999px;
    background: rgba(1,10,18,.50);
    backdrop-filter: blur(8px);
  }
  .pmx-header-link i    { font-size: 22px; }
  .pmx-header-season,
  .pmx-header-online    { display: none; }
  .pmx-neon-stage       { height: 64px; bottom: -3px; }
  .pmx-line             { stroke-width: 5.2; }
  .pmx-ball             { width: 44px; bottom: 15px; }
  .pmx-ball-8           { left: 8vw; }
  .pmx-ball-10          { right: 8vw; }
  .pmx-header + .pm-wrap,
  .pmx-header + .pm-hero{ margin-top: -6px; }
}

@media (max-width: 420px) {
  .pmx-header      { height: 132px; min-height: 132px; }
  .pmx-header-logo { width: 110px; top: 9px; }
  .pmx-ball        { width: 40px; bottom: 14px; }
}

@media (min-width: 1500px) {
  .pmx-header      { height: 248px; min-height: 248px; }
  .pmx-header-logo { width: 230px; top: 6px; }
  .pmx-neon-stage  { height: 112px; bottom: -10px; }
  .pmx-ball        { width: 112px; bottom: 22px; }
}

/* ── LIGA HERO COMPACT PREMIUM V2 FINAL POLISH ────────────────
   Header ostaje netaknut. Ovo redefiniše samo hero karticu ispod header-a. */
.pmx-header + .pm-hero.pm-hero-compact {
  margin-top: -6px;
  padding: 0;
}

.pm-hero.pm-hero-compact {
  position: relative;
  overflow: hidden;
  min-height: 100px;
  padding: 0;
  border-top: 1px solid rgba(0,229,255,.18);
  border-bottom: 1px solid rgba(0,229,255,.22);
  background:
    radial-gradient(circle at 12% 50%, rgba(255,43,73,.17), transparent 30%),
    radial-gradient(circle at 86% 42%, rgba(0,145,255,.22), transparent 34%),
    linear-gradient(90deg, rgba(3,8,15,.96), rgba(3,17,31,.96) 48%, rgba(2,7,14,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.pm-hero.pm-hero-compact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,229,255,.10), transparent 28%, rgba(255,43,73,.06) 50%, transparent 70%, rgba(0,145,255,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0, rgba(255,255,255,.026) 1px, transparent 1px, transparent 48px);
  opacity: .65;
  pointer-events: none;
}

.pm-hero.pm-hero-compact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,.95) 22%, rgba(255,43,73,.45) 55%, rgba(0,145,255,.90) 82%, transparent 100%);
  opacity: .9;
  pointer-events: none;
}

.pm-hero-compact .pm-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  min-height: 100px;
  margin: 0 auto;
  padding: 11px 16px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.pm-hero-copy { min-width: 0; }

.pm-hero-compact .pm-hero-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .19em;
  color: var(--neon);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0,229,255,.45);
}

.pm-hero-compact .pm-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.55vw, 36px);
  line-height: .96;
  font-weight: 900;
  letter-spacing: .035em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 22px rgba(0,145,255,.22);
}

.pm-hero-compact .pm-hero-title span { color: #fff; }
.pm-hero-compact .pm-hero-title span + * { color: var(--neon); }
.pm-hero-compact .pm-hero-title { color: var(--neon); }
.pm-hero-compact .pm-hero-title span { color: #fff; }

.pm-hero-compact .pm-hero-sub {
  margin: 5px 0 0;
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .15em;
  color: rgba(219,234,254,.66);
  text-transform: uppercase;
}

.pm-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.pm-hero-stat {
  height: 60px;
  min-width: 82px;
  padding: 6px 9px;
  border-radius: 11px;
  border: 1px solid rgba(0,229,255,.17);
  background: linear-gradient(180deg, rgba(7,22,38,.78), rgba(2,9,18,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 24px rgba(0,0,0,.20);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(10px);
}

.pm-hero-stat i {
  font-size: 17px;
  line-height: 1;
  color: var(--neon);
  filter: drop-shadow(0 0 10px rgba(0,229,255,.45));
  margin-bottom: 2px;
}

.pm-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: .96;
  font-weight: 900;
  color: #fff;
}

.pm-hero-stat span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,.68);
  text-transform: uppercase;
}

.pm-hero-stat-playoff {
  border-color: rgba(94,255,85,.52);
  background:
    radial-gradient(circle at 50% 0%, rgba(94,255,85,.18), transparent 58%),
    linear-gradient(180deg, rgba(10,48,18,.78), rgba(2,18,9,.76));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 20px rgba(94,255,85,.16),
    0 10px 24px rgba(0,0,0,.23);
}

.pm-hero-stat-playoff i,
.pm-hero-stat-playoff span { color: #8cff6f; }
.pm-hero-stat-playoff strong { font-size: 17px; }

.pm-hero-compact .pm-badges { display: none; }

@media (max-width: 900px) {
  .pm-hero-compact .pm-hero-inner {
    grid-template-columns: 1fr;
    gap: 9px;
    min-height: 134px;
    padding: 12px 14px 12px;
  }
  .pm-hero-stats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .pm-hero-stat { min-width: 0; height: 52px; border-radius: 10px; padding: 6px 5px; }
  .pm-hero-stat i { font-size: 15px; margin-bottom: 1px; }
  .pm-hero-stat strong { font-size: 20px; }
  .pm-hero-stat-playoff strong { font-size: 14px; }
  .pm-hero-stat span { font-size: 7px; }
}

@media (max-width: 520px) {
  .pmx-header + .pm-hero.pm-hero-compact { margin-top: -5px; }
  .pm-hero.pm-hero-compact { min-height: 124px; }
  .pm-hero-compact .pm-hero-inner {
    min-height: 124px;
    padding: 11px 10px 10px;
  }
  .pm-hero-compact .pm-hero-eyebrow { font-size: 8px; margin-bottom: 4px; }
  .pm-hero-compact .pm-hero-title { font-size: 23px; letter-spacing: .025em; }
  .pm-hero-compact .pm-hero-sub { margin-top: 5px; font-size: 8px; letter-spacing: .12em; }
  .pm-hero-stats { gap: 6px; }
  .pm-hero-stat { padding: 5px 4px; border-radius: 9px; }
  .pm-hero-stat i { font-size: 18px; }
  .pm-hero-stat strong { font-size: 14px; }
  .pm-hero-stat-playoff strong { font-size: 12px; }
  .pm-hero-stat span { font-size: 10px; letter-spacing: .04em; }
}

/* ── Header LIVE entry polish ─────────────────────────────── */
.pmx-header-link-live {
  position: relative;
  gap: 10px;
  color: #eaffff;
  padding: 7px 12px 7px 10px;
  margin-left: -10px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 50%, rgba(53,255,132,.18), transparent 42%),
    linear-gradient(135deg, rgba(0,229,255,.10), rgba(0,10,22,.12));
  border: 1px solid rgba(0,229,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 24px rgba(0,229,255,.08);
}

.pmx-header-link-live.is-live::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #35ff84;
  box-shadow: 0 0 0 4px rgba(53,255,132,.10), 0 0 18px rgba(53,255,132,.95);
  margin-left: 1px;
  animation: pmx-live-pulse 1.65s ease-in-out infinite;
}

.pmx-header-link-live i {
  color: #35ff84;
  filter: drop-shadow(0 0 13px rgba(53,255,132,.95));
}

.pmx-header-link-live span {
  color: #ffffff;
  text-shadow:
    0 0 16px rgba(53,255,132,.45),
    0 0 22px rgba(0,229,255,.22);
}

@keyframes pmx-live-pulse {
  0%, 100% { transform: scale(.92); opacity: .72; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (max-width: 760px) {
  .pmx-header-link-live {
    margin-left: 0;
    padding: 0;
    background: rgba(0, 12, 22, .40);
  }
  .pmx-header-link-live.is-live::after {
    width: 7px;
    height: 7px;
    position: absolute;
    top: 8px;
    right: 8px;
  }
}


/* Live status conditional polish */
.pmx-header-link-live:not(.is-live) {
  background:
    linear-gradient(135deg, rgba(0,229,255,.08), rgba(0,10,22,.10));
  border-color: rgba(0,229,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(0,229,255,.045);
}

.pmx-header-link-live:not(.is-live) i {
  color: rgba(220,245,255,.78);
  filter: none;
}

.pmx-header-link-live:not(.is-live) span {
  color: rgba(245,252,255,.88);
  text-shadow: none;
}


/* =========================================================
   POOL MAGIC GLOBAL — STICKY MINI HEADER V1
   Compact header appears after the large premium header scrolls away.
   ========================================================= */

.pmx-mini-header{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + 8px);
  z-index:80;
  width:min(100% - 18px, 430px);
  height:58px;
  transform:translate(-50%, -82px);
  opacity:0;
  pointer-events:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:6px 8px 6px 7px;
  border:1px solid rgba(0,229,255,.20);
  border-radius:18px;
  background:
    radial-gradient(circle at 4% 50%, rgba(255,43,73,.20), transparent 34%),
    radial-gradient(circle at 86% 50%, rgba(17,141,255,.18), transparent 38%),
    linear-gradient(135deg, rgba(5,17,30,.82), rgba(3,8,16,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 14px 34px rgba(0,0,0,.42),
    0 0 22px rgba(0,229,255,.08);
  backdrop-filter:blur(14px) saturate(1.22);
  -webkit-backdrop-filter:blur(14px) saturate(1.22);
  transition:
    transform .20s ease,
    opacity .20s ease,
    border-color .20s ease,
    box-shadow .20s ease;
}

.pmx-mini-header.is-visible{
  transform:translate(-50%, 0);
  opacity:1;
  pointer-events:auto;
}

.pmx-mini-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#eefaff;
  text-decoration:none;
}

.pmx-mini-brand img{
  width:43px;
  height:43px;
  border-radius:50%;
  object-fit:contain;
  flex:0 0 auto;
  filter:
    drop-shadow(0 0 7px rgba(0,229,255,.24))
    drop-shadow(0 0 8px rgba(255,43,73,.10));
}

.pmx-mini-brand span{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

.pmx-mini-brand strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-display, inherit);
  font-size:15px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:.01em;
  color:#f2fbff;
  text-shadow:0 2px 8px rgba(0,0,0,.42);
}

.pmx-mini-brand small{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  font-weight:800;
  color:#22eaff;
  text-shadow:0 0 8px rgba(0,229,255,.18);
}

.pmx-mini-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.pmx-mini-live,
.pmx-mini-menu{
  position:relative;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(0,229,255,.17);
  background:rgba(4,17,29,.62);
  color:#7fdcf2;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.pmx-mini-live i,
.pmx-mini-menu i{
  font-size:21px;
  line-height:1;
}

.pmx-mini-live.is-live,
[data-live-active="1"] .pmx-mini-live{
  color:#42ff91;
  border-color:rgba(66,255,145,.34);
  background:
    radial-gradient(circle at 50% 48%, rgba(66,255,145,.20), transparent 64%),
    rgba(4,17,29,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 16px rgba(66,255,145,.13);
}

.pmx-mini-live-dot{
  position:absolute;
  right:7px;
  top:7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5c7890;
  box-shadow:0 0 0 3px rgba(92,120,144,.08);
}

.pmx-mini-live.is-live .pmx-mini-live-dot,
[data-live-active="1"] .pmx-mini-live-dot{
  background:#43ff7d;
  box-shadow:0 0 0 4px rgba(67,255,125,.13), 0 0 12px rgba(67,255,125,.44);
}

@media (min-width:701px){
  .pmx-mini-header{
    display:none;
  }
}

@media (max-width:370px){
  .pmx-mini-header{
    width:min(100% - 14px, 430px);
    height:54px;
    border-radius:16px;
    padding:6px 7px;
  }

  .pmx-mini-brand{
    gap:7px;
  }

  .pmx-mini-brand img{
    width:39px;
    height:39px;
  }

  .pmx-mini-brand strong{
    font-size:13.5px;
  }

  .pmx-mini-brand small{
    font-size:10px;
  }

  .pmx-mini-live,
  .pmx-mini-menu{
    width:37px;
    height:37px;
    border-radius:13px;
  }

  .pmx-mini-live i,
  .pmx-mini-menu i{
    font-size:19px;
  }
}


/* =========================================================
   POOL MAGIC GLOBAL — STICKY MINI HEADER V2 ICON MAP
   Mini header now uses page-aware left/right actions instead of a hardcoded live icon.
   ========================================================= */

.pmx-mini-action{
  position:relative;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(0,229,255,.17);
  background:rgba(4,17,29,.62);
  color:#7fdcf2;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.pmx-mini-action i{
  font-size:21px;
  line-height:1;
}

.pmx-mini-action-live.is-live,
[data-live-active="1"] .pmx-mini-action-live{
  color:#42ff91;
  border-color:rgba(66,255,145,.34);
  background:
    radial-gradient(circle at 50% 48%, rgba(66,255,145,.20), transparent 64%),
    rgba(4,17,29,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 16px rgba(66,255,145,.13);
}

.pmx-mini-action-live.is-live .pmx-mini-live-dot,
[data-live-active="1"] .pmx-mini-action-live .pmx-mini-live-dot{
  background:#43ff7d;
  box-shadow:0 0 0 4px rgba(67,255,125,.13), 0 0 12px rgba(67,255,125,.44);
}

@media (max-width:370px){
  .pmx-mini-action{
    width:37px;
    height:37px;
    border-radius:13px;
  }

  .pmx-mini-action i{
    font-size:19px;
  }
}