/* =========================================================
   NexaMC - Custom Tebex Theme (generic.css)
   Skyblock server | Nether / Fire / Lava aesthetic
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap");

/* ------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------ */
:root {
  /* Brand palette */
  --nexa-black:        #0A0706;
  --nexa-black-soft:   #14100D;
  --nexa-panel:        #1A1109;
  --nexa-panel-2:      #221812;
  --nexa-coal:         #2C1A14;
  --nexa-ash:          #3A241C;

  --nexa-red-deep:     #8F0808;
  --nexa-red:          #E01818;
  --nexa-orange:       #FF6A1A;
  --nexa-orange-hot:   #FF8A1A;
  --nexa-yellow:       #FFC83D;
  --nexa-ember:        #FFE08A;

  --nexa-border:       rgba(255,106,26,0.35);
  --nexa-border-hot:   rgba(255,138,26,0.70);
  --nexa-glow:         rgba(255,106,26,0.55);
  --nexa-glow-red:     rgba(224, 24,24,0.55);
  --nexa-glow-yellow:  rgba(255,200,61,0.45);

  /* Tebex-mapped semantic tokens */
  --color-text:               #FFF2DC;
  --color-text-secondary:     #E8B89A;
  --color-text-dark:          #120503;

  --color-bg:                 var(--nexa-black);
  --color-brighter-bg:        var(--nexa-panel);

  --color-primary:            var(--nexa-orange);
  --color-primary-hover:      var(--nexa-yellow);
  --color-primary-text:       #120503;
  --color-primary-text-hover: #120503;

  --color-secondary:          var(--nexa-panel-2);
  --color-secondary-hover:    var(--nexa-coal);
  --color-secondary-text:     var(--color-text);
  --color-secondary-text-hover: var(--nexa-yellow);

  --color-tertiary:           transparent;
  --color-tertiary-hover:     rgba(255,106,26,0.12);
  --color-tertiary-text:      var(--color-text);
  --color-tertiary-text-hover: var(--nexa-yellow);

  --color-removed:            #C12E2E;
  --color-sale-banner-bg:     var(--nexa-red-deep);
  --color-sale-banner-text:   #FFF2DC;

  /* Layout */
  --btn-icon-size:            18px;
  --btn-icon-gap:             8px;
  --tebex-footer-height:      88px;
  --widget-padding:           16px;
  --content-padding:          var(--widget-padding);
  --content-inner-width:      1280px;
  --content-width:            calc((var(--content-padding) * 2) + var(--content-inner-width));
  --sidebar-width:            287px;

  --tebex-legal-footer-background-color: var(--nexa-black-soft);
  --tebex-legal-footer-border-color:     var(--nexa-border);
  --tebex-legal-footer-text-color:       var(--color-text-secondary);
}

@media (width >  600px) { :root { --widget-padding: 20px; } }
@media (width >  960px) { :root { --widget-padding: 24px; } }
@media (width >  960px) { :root { --content-padding: calc(var(--widget-padding) * 2); } }
@media (max-width: 900px) { :root { --tebex-footer-height: 70px; } }
@media (max-width: 600px) { :root { --tebex-footer-height: 80px; } }

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--color-text);
  font-family: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  background-color: var(--nexa-black);
  scroll-behavior: smooth;
}

/* Subtle ambient glow overlay on top of the bg image */
body {
  background-image:
    radial-gradient(ellipse 1200px 600px at 50%  -120px, rgba(255,106,26,0.14) 0%, transparent 60%),
    radial-gradient(ellipse  900px 500px at 90%  110%,  rgba(224, 24, 24,0.10) 0%, transparent 60%),
    radial-gradient(ellipse  900px 500px at 10%  110%,  rgba(255,200, 61,0.06) 0%, transparent 60%);
  background-attachment: fixed;
}

::selection { background: var(--nexa-orange); color: var(--color-text-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", "Rubik", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-transform: uppercase;
  margin: 0 0 0.6em;
}

a {
  color: var(--nexa-orange);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
a:hover {
  color: var(--nexa-yellow);
  text-shadow: 0 0 10px var(--nexa-glow);
}

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------
   Layout containers
   ------------------------------------------------------------ */
.content,
.page-content,
.site-content {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

/* Constrain store-products within its grid cell so it doesn't overflow the sidebar layout */
.store-products {
  max-width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------ */
header,
.site-header {
  position: relative;
  background: transparent;
  border-bottom: 1px solid var(--nexa-border);
  padding: 18px 0;
}

.site-header .logo img,
.site-header img.logo,
.site-header .site-title img {
  max-height: 180px;
  filter: drop-shadow(0 0 18px var(--nexa-glow));
  transform-origin: center center;
  animation: nexa-logo-pulse 4.5s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes nexa-logo-pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 14px var(--nexa-glow));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 26px var(--nexa-glow-yellow, var(--nexa-glow)));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 14px var(--nexa-glow));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .logo img,
  .site-header img.logo,
  .site-header .site-title img {
    animation: none;
  }
}

nav, .navigation {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ------------------------------------------------------------
   Panels / Cards
   ------------------------------------------------------------ */
.panel,
.card,
.widget,
.sidebar .widget,
.store-products > .package,
.package-entry,
.cms-page,
.text-content {
  background: linear-gradient(180deg, rgba(26,17,9,0.92) 0%, rgba(20,13,10,0.88) 100%);
  border: 1px solid var(--nexa-border);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,138,26,0.05) inset,
    0 12px 32px rgba(0,0,0,0.45),
    0 0 24px rgba(255,106,26,0.05);
  padding: var(--widget-padding);
  color: var(--color-text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.widget + .widget { margin-top: 16px; }

.package-entry:hover,
.card:hover {
  border-color: var(--nexa-border-hot);
  box-shadow:
    0 1px 0 rgba(255,138,26,0.12) inset,
    0 16px 36px rgba(0,0,0,0.55),
    0 0 32px rgba(255,106,26,0.18);
  transform: translateY(-2px);
}

.widget .widget-title,
.widget > h2,
.widget > h3,
.card h2,
.card h3 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nexa-border);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--nexa-yellow);
  text-shadow: 0 0 12px var(--nexa-glow-yellow);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
}

/* Category nav block */
.category-nav,
.store-nav,
.sidebar .categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.category-nav a,
.store-nav a,
.sidebar .categories a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--color-text);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.06em;
  font-size: 13px;
}
.category-nav a:hover,
.store-nav a:hover,
.sidebar .categories a:hover {
  background: var(--color-tertiary-hover);
  border-color: var(--nexa-border);
  color: var(--nexa-yellow);
}
.category-nav a.active,
.store-nav a.active,
.sidebar .categories a.active {
  background: linear-gradient(180deg, rgba(255,106,26,0.18) 0%, rgba(224,24,24,0.12) 100%);
  border-color: var(--nexa-border-hot);
  color: var(--nexa-yellow);
  box-shadow: 0 0 16px rgba(255,106,26,0.18);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn,
.button,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-icon-gap);
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
  background: linear-gradient(180deg, var(--nexa-orange) 0%, var(--nexa-red) 100%);
  color: var(--color-primary-text);
  box-shadow: 0 6px 18px rgba(224,24,24,0.25), 0 0 18px rgba(255,106,26,0.18);
}
.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
  background: linear-gradient(180deg, var(--nexa-yellow) 0%, var(--nexa-orange) 100%);
  color: var(--color-primary-text-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,138,26,0.30), 0 0 24px rgba(255,200,61,0.25);
}
.btn:active,
.button:active,
button:active {
  transform: translateY(0);
}

.btn.secondary,
.button.secondary,
.btn-secondary {
  background: var(--nexa-panel-2);
  color: var(--color-text);
  border-color: var(--nexa-border);
  box-shadow: none;
}
.btn.secondary:hover,
.button.secondary:hover,
.btn-secondary:hover {
  background: var(--nexa-coal);
  color: var(--nexa-yellow);
  border-color: var(--nexa-border-hot);
}

.btn.ghost,
.button.ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--nexa-border);
  box-shadow: none;
}
.btn.ghost:hover,
.button.ghost:hover {
  background: var(--color-tertiary-hover);
  color: var(--nexa-yellow);
}

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(10,7,6,0.7);
  color: var(--color-text);
  border: 1px solid var(--nexa-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--nexa-border-hot);
  box-shadow: 0 0 0 3px rgba(255,106,26,0.15);
}

label {
  color: var(--color-text-secondary);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Package / product entry
   ------------------------------------------------------------ */
.store-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.store-products-list {
  grid-template-columns: 1fr;
}

.package-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.package-entry .package-image img,
.package-entry img.package-image {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--nexa-border);
  background: var(--nexa-black-soft);
}
.package-entry .package-name,
.package-entry h3 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nexa-ember);
  font-size: 16px;
  text-shadow: 0 0 10px var(--nexa-glow-yellow);
}
.package-entry .package-price {
  font-family: "Oswald", sans-serif;
  color: var(--nexa-yellow);
  font-size: 18px;
}
.package-entry .package-price::before {
  content: var(--text-price) " ";
  color: var(--color-text-secondary);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* ------------------------------------------------------------
   Basket / Checkout
   ------------------------------------------------------------ */
.basket,
.basket-summary,
.checkout-summary {
  background: var(--nexa-panel);
  border: 1px solid var(--nexa-border);
  border-radius: 10px;
  padding: var(--widget-padding);
}
.basket .removed,
.basket-item.removed {
  color: var(--color-removed);
  text-decoration: line-through;
}

/* ------------------------------------------------------------
   Sale banner
   ------------------------------------------------------------ */
.sale-banner,
.sale-banner-container {
  background: var(--color-sale-banner-bg);
  color: var(--color-sale-banner-text);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  box-shadow: 0 0 24px rgba(224,24,24,0.35);
}

/* ------------------------------------------------------------
   Tables (recent payments, top donators)
   ------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255,106,26,0.12);
  font-size: 13px;
}
th {
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
footer,
.site-footer {
  margin-top: 32px;
  padding: 24px 0;
  background: var(--tebex-legal-footer-background-color);
  border-top: 1px solid var(--tebex-legal-footer-border-color);
  color: var(--tebex-legal-footer-text-color);
  font-size: 13px;
  text-align: center;
}

/* ------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------ */
* {
  scrollbar-color: var(--nexa-orange) var(--nexa-black);
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--nexa-black); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--nexa-orange), var(--nexa-red));
  border-radius: 10px;
  border: 2px solid var(--nexa-black);
}

/* ------------------------------------------------------------
   Utility
   ------------------------------------------------------------ */
.text-muted    { color: var(--color-text-secondary); }
.text-accent   { color: var(--nexa-yellow); }
.text-danger   { color: var(--color-removed); }
.hidden        { display: none !important; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nexa-border-hot), transparent);
  margin: 20px 0;
  border: 0;
}


/* Hide payment provider logos in footer */
.site-footer .we-accept {
  display: none !important;
}


/* Stick site footer to the bottom of its grid cell so there's no empty gap above the Tebex legal footer */
.site-footer {
  align-self: end;
  margin-top: 0 !important;
}

/* ============================================================
   Ambient ember / flame atmosphere (dense, cinematic)
   - Three layered particle fields at different sizes/speeds/blur
   - Corner firelit glow pools
   - pointer-events disabled so content stays fully interactive
   ============================================================ */

html {
  position: relative;
}

body {
  position: relative;
  overflow-x: hidden;
}

/* Layer 1: SPARKS - small, bright, fast-drifting pinpoints */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2.5px 2.5px at 3% 94%,  rgba(255,220,140,1),   rgba(255,140,40,0) 70%),
    radial-gradient(2px 2px     at 7% 82%,  rgba(255,210,130,1),   rgba(255,130,40,0) 70%),
    radial-gradient(2.5px 2.5px at 11% 96%, rgba(255,200,100,1),   rgba(255,110,30,0) 70%),
    radial-gradient(1.8px 1.8px at 14% 70%, rgba(255,230,170,0.95),rgba(255,150,60,0) 70%),
    radial-gradient(2px 2px     at 18% 88%, rgba(255,190,90,1),    rgba(255,120,40,0) 70%),
    radial-gradient(2.5px 2.5px at 22% 78%, rgba(255,220,140,0.95),rgba(255,140,40,0) 70%),
    radial-gradient(1.8px 1.8px at 26% 92%, rgba(255,210,120,0.95),rgba(255,130,40,0) 70%),
    radial-gradient(2.3px 2.3px at 30% 66%, rgba(255,240,180,0.9), rgba(255,160,70,0) 70%),
    radial-gradient(2px 2px     at 34% 84%, rgba(255,200,100,1),   rgba(255,110,30,0) 70%),
    radial-gradient(2.5px 2.5px at 38% 96%, rgba(255,190,90,1),    rgba(255,110,30,0) 70%),
    radial-gradient(1.8px 1.8px at 42% 74%, rgba(255,230,160,0.9), rgba(255,150,60,0) 70%),
    radial-gradient(2px 2px     at 46% 88%, rgba(255,210,130,0.95),rgba(255,130,40,0) 70%),
    radial-gradient(2.5px 2.5px at 50% 80%, rgba(255,200,100,1),   rgba(255,110,30,0) 70%),
    radial-gradient(1.8px 1.8px at 54% 94%, rgba(255,240,180,0.9), rgba(255,160,70,0) 70%),
    radial-gradient(2.3px 2.3px at 58% 72%, rgba(255,220,140,0.95),rgba(255,140,40,0) 70%),
    radial-gradient(2px 2px     at 62% 86%, rgba(255,200,110,1),   rgba(255,120,30,0) 70%),
    radial-gradient(2.5px 2.5px at 66% 96%, rgba(255,190,90,1),    rgba(255,110,30,0) 70%),
    radial-gradient(1.8px 1.8px at 70% 78%, rgba(255,230,160,0.9), rgba(255,150,60,0) 70%),
    radial-gradient(2px 2px     at 74% 90%, rgba(255,210,130,0.95),rgba(255,130,40,0) 70%),
    radial-gradient(2.5px 2.5px at 78% 82%, rgba(255,200,100,1),   rgba(255,110,30,0) 70%),
    radial-gradient(1.8px 1.8px at 82% 94%, rgba(255,240,180,0.9), rgba(255,160,70,0) 70%),
    radial-gradient(2.3px 2.3px at 86% 70%, rgba(255,220,140,0.95),rgba(255,140,40,0) 70%),
    radial-gradient(2px 2px     at 90% 88%, rgba(255,200,100,1),   rgba(255,110,30,0) 70%),
    radial-gradient(2.5px 2.5px at 94% 76%, rgba(255,190,90,1),    rgba(255,110,30,0) 70%),
    radial-gradient(2px 2px     at 97% 90%, rgba(255,220,130,1),   rgba(255,140,40,0) 70%);
  background-repeat: no-repeat;
  background-size: 100% 220vh;
  animation: nexa-embers-rise 22s linear -11s infinite, nexa-embers-flicker-a 2.8s ease-in-out infinite;
  opacity: 1;
}

/* Layer 2: MEDIUM EMBERS - larger, softer, slower, slightly blurred for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(4px 4px at 5% 92%,  rgba(255,160,60,0.95),  rgba(255,90,15,0) 70%),
    radial-gradient(3.5px 3.5px at 12% 70%, rgba(255,180,80,0.9), rgba(255,110,30,0) 70%),
    radial-gradient(4.5px 4.5px at 20% 96%, rgba(255,140,40,0.95),rgba(255,80,10,0) 70%),
    radial-gradient(3.5px 3.5px at 28% 78%, rgba(255,170,70,0.9), rgba(255,100,20,0) 70%),
    radial-gradient(4px 4px     at 36% 90%, rgba(255,150,50,0.95),rgba(255,90,15,0) 70%),
    radial-gradient(3px 3px     at 44% 64%, rgba(255,190,100,0.85),rgba(255,120,40,0) 70%),
    radial-gradient(4.5px 4.5px at 50% 88%, rgba(255,160,60,0.95),rgba(255,90,15,0) 70%),
    radial-gradient(3.5px 3.5px at 58% 74%, rgba(255,180,80,0.9), rgba(255,110,30,0) 70%),
    radial-gradient(4px 4px     at 66% 94%, rgba(255,140,40,0.95),rgba(255,80,10,0) 70%),
    radial-gradient(3px 3px     at 74% 68%, rgba(255,200,110,0.85),rgba(255,120,40,0) 70%),
    radial-gradient(4.5px 4.5px at 82% 90%, rgba(255,160,60,0.95),rgba(255,90,15,0) 70%),
    radial-gradient(3.5px 3.5px at 90% 76%, rgba(255,180,80,0.9), rgba(255,110,30,0) 70%),
    radial-gradient(4px 4px     at 96% 94%, rgba(255,150,50,0.95),rgba(255,90,15,0) 70%),
    /* Firelit corner glow pools */
    radial-gradient(55% 40% at 0%   100%, rgba(255,106,26,0.22), rgba(255,106,26,0) 75%),
    radial-gradient(55% 40% at 100% 100%, rgba(255,106,26,0.22), rgba(255,106,26,0) 75%),
    radial-gradient(40% 30% at 0%   0%,   rgba(255,138,26,0.10), rgba(255,138,26,0) 75%),
    radial-gradient(40% 30% at 100% 0%,   rgba(255,138,26,0.10), rgba(255,138,26,0) 75%);
  background-repeat: no-repeat;
  background-size:
    100% 260vh, 100% 260vh, 100% 260vh, 100% 260vh, 100% 260vh,
    100% 260vh, 100% 260vh, 100% 260vh, 100% 260vh, 100% 260vh,
    100% 260vh, 100% 260vh, 100% 260vh,
    auto, auto, auto, auto;
  animation: nexa-embers-rise-slow 38s linear -19s infinite, nexa-embers-flicker-b 3.6s ease-in-out infinite;
  filter: blur(0.7px);
  opacity: 1;
}

/* Layer 3: LARGE SOFT EMBERS - background depth, heavy blur, very slow */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(7px 7px  at 9% 88%,  rgba(255,120,30,0.7), rgba(255,70,10,0) 75%),
    radial-gradient(8px 8px  at 25% 72%, rgba(255,140,50,0.6), rgba(255,80,20,0) 75%),
    radial-gradient(9px 9px  at 41% 94%, rgba(255,110,30,0.7), rgba(255,60,10,0) 75%),
    radial-gradient(7px 7px  at 57% 66%, rgba(255,150,60,0.55),rgba(255,90,20,0) 75%),
    radial-gradient(9px 9px  at 73% 92%, rgba(255,120,40,0.7), rgba(255,70,15,0) 75%),
    radial-gradient(8px 8px  at 89% 76%, rgba(255,140,50,0.6), rgba(255,80,20,0) 75%);
  background-repeat: no-repeat;
  background-size: 100% 320vh;
  animation: nexa-embers-rise-slowest 60s linear -30s infinite, nexa-embers-flicker-c 4.4s ease-in-out infinite;
  filter: blur(2px);
  opacity: 0.75;
}

/* Keyframes: upward drift with slight horizontal sway */
@keyframes nexa-embers-rise {
  0%   { background-position:
    0 0,   0 0,   0 0,   0 0,   0 0,
    0 0,   0 0,   0 0,   0 0,   0 0,
    0 0,   0 0,   0 0,   0 0,   0 0,
    0 0,   0 0,   0 0,   0 0,   0 0,
    0 0,   0 0,   0 0,   0 0,   0 0;
  }
  100% { background-position:
    -25px -140vh,  30px -140vh, -20px -140vh,  35px -140vh, -30px -140vh,
     25px -140vh, -35px -140vh,  20px -140vh, -28px -140vh,  32px -140vh,
    -22px -140vh,  28px -140vh, -30px -140vh,  24px -140vh, -26px -140vh,
     30px -140vh, -24px -140vh,  28px -140vh, -32px -140vh,  22px -140vh,
    -30px -140vh,  26px -140vh, -22px -140vh,  30px -140vh, -28px -140vh;
  }
}

@keyframes nexa-embers-rise-slow {
  0%   { background-position:
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    0 100%, 100% 100%, 0 0, 100% 0;
  }
  100% { background-position:
     40px -180vh, -50px -180vh,  45px -180vh, -35px -180vh,  50px -180vh,
    -40px -180vh,  45px -180vh, -50px -180vh,  35px -180vh, -45px -180vh,
     40px -180vh, -50px -180vh,  45px -180vh,
    0 100%, 100% 100%, 0 0, 100% 0;
  }
}

@keyframes nexa-embers-rise-slowest {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position:
     60px -240vh, -70px -240vh,  55px -240vh, -65px -240vh,  70px -240vh, -60px -240vh;
  }
}

/* Independent flicker phases so scene doesn't pulse in unison */
@keyframes nexa-embers-flicker-a {
  0%, 100% { opacity: 1;    }
  40%      { opacity: 0.7;  }
  60%      { opacity: 0.85; }
}
@keyframes nexa-embers-flicker-b {
  0%, 100% { opacity: 1;    }
  35%      { opacity: 0.75; }
  70%      { opacity: 0.9;  }
}
@keyframes nexa-embers-flicker-c {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0.45; }
}

/* Keep site content above all ember layers */
.site,
.tebex-template-preview-banner,
tebex-footer {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  body::before,
  body::after {
    animation: none;
  }
}


/* ============================================================
   Keep ember / flame effects out of the footer area
   ============================================================ */

/* Fade each ember layer to transparent near the bottom so particles
   never render within the footer strip. */
html::before,
body::before,
body::after {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 200px),
    rgba(0,0,0,0) calc(100% - 80px),
    rgba(0,0,0,0) 100%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 200px),
    rgba(0,0,0,0) calc(100% - 80px),
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* Give the site footer and Tebex legal footer solid opaque backgrounds so
   nothing visually bleeds through them. */
.site-footer {
  background: var(--nexa-black, #0A0706) !important;
  position: relative;
  z-index: 2;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.site-footer-inner {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

tebex-footer {
  display: block !important;
  position: relative;
  z-index: 2;
  background: var(--tebex-legal-footer-background-color, #14100D);
}


/* ============================================================
   Navigation widget - thinner, softer border and tighter inner highlight
   to prevent the Home/Embers selected/hover background from clashing
   with the panel's outer border
   ============================================================ */

.site-navigation,
.site-navigation.navigation-vertical {
  border-width: 1px;
  border-color: rgba(255, 106, 26, 0.18);
  padding: 8px;
}

/* Give the selected/hover highlight a margin so it never hits the panel border */
.menu.navigation-list li a,
.site-navigation a {
  margin: 2px 0;
}
.menu.navigation-list li a:hover,
.site-navigation a:hover,
.menu.navigation-list li.active > a,
.menu.navigation-list a.link-active {
  border-radius: 6px;
}


/* ============================================================
   Server IP + Discord pill buttons on the left of the header,
   mirrored opposite of the Username + Basket buttons on the right.
   ============================================================ */

.site-header-inner {
  position: relative;
}

.server-actions {
  position: absolute;
  top: var(--widget-padding);
  left: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 3;
}

.server-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(20, 13, 10, 0.85);
  border: 1px solid rgba(255, 106, 26, 0.35);
  border-radius: 6px; /* squared-ish edges as requested */
  color: var(--nexa-text, #FFF2DC);
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  line-height: 1;
  min-height: 46px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 16px rgba(255, 106, 26, 0.05) inset;
}
.server-pill:hover {
  background: rgba(30, 18, 12, 0.95);
  border-color: rgba(255, 106, 26, 0.55);
  transform: translateY(-1px);
  color: var(--nexa-text, #FFF2DC);
}

.server-pill .pill-label {
  font-weight: 700;
  color: #FFF2DC;
}

.server-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CD964;             /* online green dot for player count */
  box-shadow: 0 0 8px rgba(76, 217, 100, 0.9);
  flex: 0 0 auto;
}
.server-pill .pill-dot-blue {
  background: #5865F2;             /* Discord blurple for discord pill */
  box-shadow: 0 0 8px rgba(88, 101, 242, 0.9);
}

.server-pill .pill-count {
  font-weight: 600;
  color: var(--nexa-text-dim, #E8B89A);
  font-variant-numeric: tabular-nums;
}

/* Ensure they don't overlap the basket/username group on small screens */
@media (max-width: 900px) {
  .server-actions {
    position: static;
    margin-bottom: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ------------------------------------------------------------
   Package preview popup - shrink the product image
   ------------------------------------------------------------ */
.store-product-full .image {
  max-width: 320px;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ------------------------------------------------------------
   Sticky footer fix
   The default .site rule reserves --tebex-footer-height (88px)
   for the Tebex legal footer, but the actual rendered footer
   is shorter (~39px on desktop), leaving an empty gap below it.
   Using flexbox here pins <tebex-footer> to the very bottom of
   the viewport on short pages while leaving its markup, content,
   and behavior fully intact (Tebex compliance preserved).
   ------------------------------------------------------------ */
body {
  display: flex;
  flex-direction: column;
  /* min-height: 100vh already declared above */
}

.site {
  /* Override the fixed-height reservation so .site simply grows
     to fill all space above the Tebex legal footer. */
  min-height: 0 !important;
  flex: 1 0 auto;
}

tebex-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

/* ------------------------------------------------------------------
   Tebex template preview banner accommodation
   The preview banner (.tebex-template-preview-banner) is a fixed-position
   bar shown only inside the Tebex editor preview. It sits at the bottom
   of the viewport and overlaps the site footer. Add bottom padding to
   the body when the banner is present so all content remains visible.
   This rule has no effect on the published store (banner does not exist).
   ------------------------------------------------------------------ */
body:has(.tebex-template-preview-banner) {
  padding-bottom: 56px;
}