/* MU Beyond - premium polish layer (loaded last). Visual only: no layout, order, text or tab changes.
   Remove the <link> in templates/muhobby/inc/frost-layout.php to disable. */
:root {
  --pp-ice: #aee6ff;
  --pp-ice-2: #62c6ef;
  --pp-deep: #0a3f72;
  --pp-gold: #ecc972;
  --pp-edge: rgba(140, 215, 250, .38);
  --pp-edge-soft: rgba(140, 215, 250, .16);
  --pp-glass: rgba(4, 16, 30, .66);
  --pp-ease: cubic-bezier(.22, .8, .24, 1);
}

html { scroll-behavior: smooth; }
::selection { background: rgba(98, 198, 239, .38); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(98, 198, 239, .5) rgba(3, 12, 22, .6); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(3, 12, 22, .6); }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #62c6ef, #2a6fb8); border-radius: 10px; border: 2px solid rgba(3, 12, 22, .6); }
:focus-visible { outline: 2px solid rgba(174, 230, 255, .85); outline-offset: 2px; }

/* ---- top bar: deeper glass with a light hairline and soft glow */
html body .topbar {
  background: linear-gradient(115deg, rgba(5, 25, 42, .9), rgba(4, 17, 31, .82)) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--pp-edge-soft);
  box-shadow: inset 0 1px 0 rgba(190, 236, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 8, 20, .55), 0 0 40px rgba(60, 160, 220, .10);
}

/* ---- navigation: pill buttons with glow */
html body .topbar .nav a {
  border-radius: 999px;
  transition: transform .25s var(--pp-ease), box-shadow .25s var(--pp-ease), filter .25s var(--pp-ease), border-color .25s var(--pp-ease);
  box-shadow: inset 0 1px 0 rgba(210, 246, 255, .28), 0 4px 14px rgba(0, 10, 24, .45);
}
html body .topbar .nav a:hover {
  transform: translateY(-2px);
  filter: brightness(1.14) saturate(1.1);
  border-color: rgba(200, 244, 255, .9);
  box-shadow: inset 0 1px 0 rgba(220, 248, 255, .4), 0 8px 22px rgba(30, 130, 200, .38), 0 0 18px rgba(98, 198, 239, .32);
}
html body .topbar .nav a.active {
  box-shadow: inset 0 1px 0 rgba(220, 248, 255, .42), 0 6px 20px rgba(30, 130, 200, .42), 0 0 22px rgba(98, 198, 239, .34);
}

/* ---- buttons: luminous gradient CTA with a sheen sweep on hover */
html body .btn,
html body .play-button,
html body .auth-nav a {
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .30) 50%, transparent 62%),
    linear-gradient(135deg, #5fc9f3 0%, #2c86d6 52%, #1b4f9c 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  border-color: rgba(190, 240, 255, .6);
  box-shadow: inset 0 1px 0 rgba(235, 250, 255, .5), inset 0 -2px 0 rgba(4, 30, 70, .5), 0 8px 24px rgba(28, 120, 205, .38), 0 0 0 1px rgba(98, 198, 239, .12);
  text-shadow: 0 1px 8px rgba(0, 20, 50, .55);
  transition: background-position .7s var(--pp-ease), transform .25s var(--pp-ease), box-shadow .25s var(--pp-ease), filter .25s var(--pp-ease);
}
html body .btn:hover,
html body .play-button:hover,
html body .auth-nav a:hover {
  background-position: -30% 0, 0 0;
  transform: translateY(-2px);
  filter: brightness(1.1) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(235, 250, 255, .6), inset 0 -2px 0 rgba(4, 30, 70, .5), 0 14px 34px rgba(28, 130, 220, .5), 0 0 26px rgba(98, 198, 239, .4);
}
html body .btn:active, html body .play-button:active, html body .auth-nav a:active { transform: translateY(0); filter: brightness(.98); }
html body .play-button-secondary {
  background-image: linear-gradient(135deg, rgba(8, 34, 60, .85), rgba(5, 22, 42, .9));
  background-size: 100% 100%;
  border-color: var(--pp-edge);
  box-shadow: inset 0 1px 0 rgba(190, 236, 255, .18), 0 6px 18px rgba(0, 8, 20, .45);
}

/* ---- glass cards: blur, gradient edge light, lift on hover */
html body .stat,
html body .content-card,
html body .victory-card,
html body .realm-stat-strip .stat {
  background-color: var(--pp-glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-color: var(--pp-edge);
  box-shadow: inset 0 1px 0 rgba(190, 236, 255, .12), 0 14px 38px rgba(0, 8, 20, .45), 0 0 28px rgba(60, 160, 220, .07);
  transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease), border-color .35s var(--pp-ease);
}
html body .stat:hover,
html body .content-card:hover,
html body .victory-card:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 240, 255, .62);
  box-shadow: inset 0 1px 0 rgba(210, 246, 255, .22), 0 22px 54px rgba(0, 10, 26, .55), 0 0 40px rgba(80, 180, 235, .2);
}
html body .stat-icon {
  box-shadow: inset 0 1px 0 rgba(210, 246, 255, .25), 0 0 18px rgba(98, 198, 239, .28);
}
html body .stat strong, html body .stat b { text-shadow: 0 0 16px rgba(98, 198, 239, .45); font-variant-numeric: tabular-nums; }

/* ---- list rows (rankings, events): soft hover tint */
html body .list-row { transition: background-color .25s var(--pp-ease), box-shadow .25s var(--pp-ease); border-radius: 10px; }
html body .list-row:hover { background-color: rgba(98, 198, 239, .08); box-shadow: inset 2px 0 0 rgba(98, 198, 239, .75); }
html body .rank-place { text-shadow: 0 0 14px rgba(236, 201, 114, .45); }

/* ---- headings: gentle light bloom */
html body h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 0 32px rgba(98, 198, 239, .22); letter-spacing: .01em; }
html body .eyebrow { text-shadow: 0 0 14px rgba(98, 198, 239, .5); }
html body .card-head h2, html body .card-head h3 { text-shadow: 0 0 18px rgba(98, 198, 239, .28); }

/* ---- beta countdown: crystal tiles */
html body .beta-countdown-unit {
  box-shadow: inset 0 1px 0 rgba(190, 236, 255, .22), inset 0 -10px 18px rgba(0, 20, 44, .45), 0 8px 22px rgba(0, 8, 20, .45), 0 0 22px rgba(60, 160, 230, .18);
  font-variant-numeric: tabular-nums;
}
html body .beta-countdown-digits { text-shadow: 0 0 18px rgba(120, 214, 255, .55); }

/* ---- systems strip and tabs */
html body .systems-strip-toggle { transition: background-color .25s var(--pp-ease), box-shadow .25s var(--pp-ease); border-radius: 12px; }
html body .systems-strip-toggle:hover { background-color: rgba(98, 198, 239, .08); box-shadow: 0 0 26px rgba(98, 198, 239, .16); }

/* ---- images: refined edge light */
html body .content-card img, html body .thumb img { border-radius: inherit; transition: transform .6s var(--pp-ease), filter .6s var(--pp-ease); }
html body .content-card:hover img { filter: brightness(1.06) saturate(1.06); }

/* ---- frame: faint inner glow around the whole page */
html body .site-frame { box-shadow: 0 0 90px rgba(40, 120, 200, .10); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html body .topbar .nav a, html body .btn, html body .play-button, html body .auth-nav a,
  html body .stat, html body .content-card, html body .victory-card, html body .list-row { transition: none; }
  html body .stat:hover, html body .content-card:hover, html body .victory-card:hover,
  html body .btn:hover, html body .play-button:hover, html body .auth-nav a:hover, html body .topbar .nav a:hover { transform: none; }
}
@media (hover: none) {
  html body .stat:hover, html body .content-card:hover, html body .victory-card:hover { transform: none; }
}

/* ================= v2: ambient life (GPU-friendly, reduced-motion safe) ================= */
/* snowfall on html::before / ::after (fixed geometry, transform-only animation, above content, never blocks clicks) */
html::before,
html::after {
  content: "" !important;
  position: fixed !important;
  left: 0 !important;
  top: -800px !important;
  width: 100% !important;
  height: calc(100vh + 800px) !important;
  pointer-events: none !important;
  z-index: 4 !important;
  will-change: transform;
  background-repeat: repeat !important;
}
html::before {
  opacity: .95;
  background-image:
    radial-gradient(3.4px 3.4px at 60px 80px, rgba(255, 255, 255, 1), rgba(255, 255, 255, .55) 45%, transparent 70%),
    radial-gradient(2.8px 2.8px at 230px 310px, rgba(214, 240, 255, 1), rgba(190, 228, 255, .5) 45%, transparent 70%),
    radial-gradient(4px 4px at 150px 560px, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5) 45%, transparent 70%),
    radial-gradient(3px 3px at 340px 700px, rgba(200, 234, 255, 1), rgba(190, 228, 255, .5) 45%, transparent 70%);
  background-size: 400px 800px;
  animation: ppSnowSlow 30s linear infinite;
}
html::after {
  opacity: .8;
  background-image:
    radial-gradient(2px 2px at 40px 50px, rgba(255, 255, 255, 1), transparent 68%),
    radial-gradient(1.8px 1.8px at 130px 220px, rgba(205, 236, 255, 1), transparent 68%),
    radial-gradient(2.2px 2.2px at 90px 400px, rgba(255, 255, 255, 1), transparent 68%),
    radial-gradient(1.8px 1.8px at 175px 620px, rgba(220, 242, 255, 1), transparent 68%),
    radial-gradient(2px 2px at 20px 760px, rgba(255, 255, 255, 1), transparent 68%);
  background-size: 200px 800px;
  animation: ppSnowFast 17s linear infinite;
}
@keyframes ppSnowSlow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, 800px, 0); } }
@keyframes ppSnowFast { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(24px, 800px, 0); } }

/* mini lightning bolts: two small fixed bolts that flash at irregular moments with a soft sky glow */
body::before,
body::after {
  content: "" !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 4 !important;
  opacity: 0;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  filter: drop-shadow(0 0 5px #8fd8ff) drop-shadow(0 0 14px #3aa0ff);
}
body::before {
  top: 9vh !important; left: 7vw !important; width: 70px !important; height: 130px !important; bottom: auto !important; right: auto !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 150'%3E%3Cpath d='M50 0 L36 40 L52 48 L28 98 L44 106 L18 148' fill='none' stroke='%23eaf8ff' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M44 106 L58 126 L52 138' fill='none' stroke='%23bfe8ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 40 L22 58' fill='none' stroke='%23bfe8ff' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: ppBoltA 11s linear infinite;
}
body::after {
  top: 20vh !important; right: 9vw !important; width: 56px !important; height: 104px !important; bottom: auto !important; left: auto !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 150'%3E%3Cpath d='M30 0 L46 38 L30 46 L54 96 L38 104 L62 148' fill='none' stroke='%23eaf8ff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M38 104 L24 124 L30 136' fill='none' stroke='%23bfe8ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: ppBoltB 16s linear infinite 3s;
}
@keyframes ppBoltA { 0%, 90%, 100% { opacity: 0; } 90.6% { opacity: 1; } 91.4% { opacity: .15; } 92.2% { opacity: .95; } 94% { opacity: 0; } }
@keyframes ppBoltB { 0%, 86%, 100% { opacity: 0; } 86.5% { opacity: .9; } 87.3% { opacity: .1; } 88% { opacity: 1; } 89% { opacity: .25; } 90.5% { opacity: 0; } }

/* logo: slow breathing glow */
html body .brand-game-logo { animation: ppLogoGlow 5.5s ease-in-out infinite; }
@keyframes ppLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(98, 198, 239, .35)) drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(130, 214, 255, .7)) drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
}

/* active nav tab: gentle pulse; primary call-to-action: soft attention ring */
html body .topbar .nav a.active { animation: ppActivePulse 3.6s ease-in-out infinite; }
@keyframes ppActivePulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(220, 248, 255, .42), 0 6px 20px rgba(30, 130, 200, .42), 0 0 14px rgba(98, 198, 239, .26); }
  50%      { box-shadow: inset 0 1px 0 rgba(220, 248, 255, .5), 0 8px 26px rgba(30, 140, 215, .55), 0 0 30px rgba(130, 214, 255, .5); }
}
html body .play-button:not(.play-button-secondary) { animation: ppCtaRing 3.2s ease-out infinite; }
@keyframes ppCtaRing {
  0%   { box-shadow: inset 0 1px 0 rgba(235, 250, 255, .5), inset 0 -2px 0 rgba(4, 30, 70, .5), 0 8px 24px rgba(28, 120, 205, .38), 0 0 0 0 rgba(98, 198, 239, .5); }
  70%  { box-shadow: inset 0 1px 0 rgba(235, 250, 255, .5), inset 0 -2px 0 rgba(4, 30, 70, .5), 0 8px 24px rgba(28, 120, 205, .38), 0 0 0 14px rgba(98, 198, 239, 0); }
  100% { box-shadow: inset 0 1px 0 rgba(235, 250, 255, .5), inset 0 -2px 0 rgba(4, 30, 70, .5), 0 8px 24px rgba(28, 120, 205, .38), 0 0 0 0 rgba(98, 198, 239, 0); }
}
html body .stat-icon { animation: ppIconBreath 4.8s ease-in-out infinite; }
@keyframes ppIconBreath { 0%, 100% { box-shadow: inset 0 1px 0 rgba(210, 246, 255, .25), 0 0 10px rgba(98, 198, 239, .2); } 50% { box-shadow: inset 0 1px 0 rgba(210, 246, 255, .3), 0 0 22px rgba(130, 214, 255, .45); } }

/* page entrance: soft rise + fade */
html body .site-frame { animation: ppEnter .9s var(--pp-ease) both; }
@keyframes ppEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html::before, html::after, body::before, body::after { display: none !important; }
  html body .brand-game-logo, html body .topbar .nav a.active, html body .play-button:not(.play-button-secondary), html body .stat-icon, html body .site-frame { animation: none !important; }
}
@media (max-width: 640px) {
  html::after, body::after { display: none !important; }   /* lighter on phones */
  html::before { opacity: .8; }
}