/* =========================================================
   NexusHub shared styles: page transitions, phone menu,
   flip cards and "coming soon" pages.
   Used by: index, tools, other, minecraft, matched-betting
   ========================================================= */

/* ---------- Smooth page-to-page transitions ----------
   Modern browsers (Chrome, Edge, Safari) cross-fade between
   Home / Tools / Other while the header stays still.
   Other browsers simply open the page normally. */
@view-transition { navigation: auto; }

/* Nothing should ever push the page sideways. "clip" does the job without
   breaking sticky headers the way overflow-x: hidden can. */
html { overflow-x: clip; }
/* Pictures never grow past their box, even if a stylesheet is slow to arrive. */
img, svg, video { max-width: 100%; }

.nexus-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  view-transition-name: nexus-nav;
}
/* The open menu sits above everything on the page below it. */
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { z-index: 60; }
.nav-drop-panel { z-index: 60; }

::view-transition-old(root) { animation: nexus-page-out .22s ease both; }
::view-transition-new(root) { animation: nexus-page-in .5s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes nexus-page-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes nexus-page-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* 3D FLIP CARDS CSS */
.heavy-font {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.cat-card {
  --c: #fff;
  --g10: rgba(255, 255, 255, .1);
  --g20: rgba(255, 255, 255, .2);
  --g30: rgba(255, 255, 255, .35);
  --g40: rgba(255, 255, 255, .55);
  display: block;
  height: 244px;
  width: 100%;
  border-radius: 20px;
  color: inherit;
  cursor: pointer;
  perspective: 1800px;
  position: relative;
  text-decoration: none;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.cat-card:hover, .cat-card:focus-visible {
  outline: none;
  transform: scale(1.045);
  z-index: 10;
}
.flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.25, .6, .25, 1);
}
.cat-card:hover .flip-inner, .cat-card:focus-visible .flip-inner {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid rgba(255, 255, 255, .05);
  border-radius: 20px;
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  text-align: center;
  transition: border-color .4s, box-shadow .4s;
}
.face-back {
  transform: rotateY(180deg);
}
.cat-card:hover .face, .cat-card:focus-visible .face {
  border-color: var(--c);
  box-shadow: 0 0 35px var(--g40), inset 0 0 15px var(--g20);
}
.card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  color: var(--c);
}
.face-front h2 {
  font-size: .88rem;
  line-height: 1.45;
  margin: 0;
  letter-spacing: .06em;
}
.sub {
  color: #a1a1aa;
  font-size: 9px;
  letter-spacing: .12em;
  margin-top: 6px;
  text-transform: uppercase;
}
.face-back h3 {
  font-size: .82rem;
  margin-bottom: 14px;
}
.desc {
  color: #b9b9c4;
  font-size: .8rem;
  line-height: 1.5;
  max-width: 230px;
  margin: 0 auto;
}
.lets-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--c);
  color: #080808;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 9px 14px;
  text-transform: uppercase;
  transition: filter .25s, transform .25s;
}
.lets-go:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Ambient Pulsing Glow Logic */
@keyframes ambient-card-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 32px var(--g30), 0 0 11px var(--g20); }
}
@keyframes ambient-stroke-pulse {
  0%, 100% { opacity: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { opacity: .72; box-shadow: 0 0 22px var(--g30), inset 0 0 10px var(--g20); }
}
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 2px solid var(--c);
  border-radius: 20px;
  opacity: 0;
}
.pulse { animation: none; }
.pulse.is-pulsing {
  animation: ambient-card-pulse 7.2s cubic-bezier(.45, 0, .55, 1) both;
}
.pulse.is-pulsing::after {
  animation: ambient-stroke-pulse 7.2s cubic-bezier(.45, 0, .55, 1) both;
}
.pulse:hover, .pulse:focus-visible, .pulse:hover::after, .pulse:focus-visible::after {
  animation: none;
}

/* Colors */
.c-blue { --c: rgb(59, 130, 246); --g20: rgba(59, 130, 246, 0.2); --g30: rgba(59, 130, 246, 0.4); --g40: rgba(59, 130, 246, 0.6); }
.c-purple { --c: rgb(168, 85, 247); --g20: rgba(168, 85, 247, 0.2); --g30: rgba(168, 85, 247, 0.4); --g40: rgba(168, 85, 247, 0.6); }
.c-orange { --c: rgb(249, 115, 22); --g20: rgba(249, 115, 22, 0.2); --g30: rgba(249, 115, 22, 0.4); --g40: rgba(249, 115, 22, 0.6); }
.c-pink { --c: rgb(236, 72, 153); --g20: rgba(236, 72, 153, 0.2); --g30: rgba(236, 72, 153, 0.4); --g40: rgba(236, 72, 153, 0.6); }
.c-cyan { --c: rgb(6, 182, 212); --g20: rgba(6, 182, 212, 0.2); --g30: rgba(6, 182, 212, 0.4); --g40: rgba(6, 182, 212, 0.6); }
.c-yellow { --c: rgb(234, 179, 8); --g20: rgba(234, 179, 8, 0.2); --g30: rgba(234, 179, 8, 0.4); --g40: rgba(234, 179, 8, 0.6); }
.c-red { --c: rgb(239, 68, 68); --g20: rgba(239, 68, 68, 0.2); --g30: rgba(239, 68, 68, 0.4); --g40: rgba(239, 68, 68, 0.6); }

/* ---------- Tools / Other pages: rows of cards ---------- */
.tool-group + .tool-group { margin-top: 64px; }
.group-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 auto 28px;
  max-width: 1240px;
}
.group-head::before,
.group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12));
}
.group-head::after { background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent); }
.group-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #d4d4d8;
  font-family: "Montserrat", sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}
.group-head h2::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 12px var(--c, #fff);
}
.tool-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
/* Up to 5 cards sit in one line; they shrink a little to fit, then wrap */
.tool-row > .tool-slot {
  width: min(280px, calc((100% - 96px) / 5));
  min-width: 220px;
}
@media (max-width: 639px) {
  .tool-row > .tool-slot { width: 100%; max-width: 340px; min-width: 0; }
}

/* Cards and headings glide in one after another when the page opens.
   (The wrapper animates, so the card's own hover flip/glow is untouched.) */
.enter {
  animation: nexus-enter .8s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
@keyframes nexus-enter {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .enter { animation: none; }
}

/* ---------- Phone / tablet menu (under 1024px wide) ---------- */
.nexus-menu-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.nexus-menu-toggle:hover,
.nexus-menu-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.nexus-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #e4e4e7;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.nexus-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nexus-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nexus-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nexus-mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
.nexus-mobile-menu.open { grid-template-rows: 1fr; border-top-color: rgba(255, 255, 255, .06); background: rgba(5, 5, 5, .96); }
.nexus-mobile-menu > div { overflow: hidden; }
.nexus-mobile-menu nav { display: grid; gap: 6px; padding: 14px 0 20px; }
.nexus-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  color: #d4d4d8;
  font-family: Inter, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.nexus-mobile-link::after { content: "\2192"; color: #52525b; transition: color .2s ease, transform .3s ease; }
.nexus-mobile-link:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: translateX(3px); }
.nexus-mobile-link:hover::after { color: #fff; transform: translateX(3px); }
.nexus-mobile-link[aria-current="page"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.nexus-mobile-discord {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding-inline: 14px;
  box-sizing: border-box;
}
/* The label shortens rather than stretching the button past the screen. */
.nexus-mobile-discord span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .nexus-menu-toggle, .nexus-mobile-menu { display: none !important; }
}

/* ---------- "Coming soon" pages (Minecraft, Matched Betting) ---------- */
.soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: soon-ping 1.8s ease-out infinite;
}
@keyframes soon-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.soon-bar {
  position: relative;
  width: min(360px, 80%);
  height: 6px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.soon-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--bar, #a855f7), transparent);
  animation: soon-slide 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes soon-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .soon-dot, .soon-bar::after { animation: none; }
}

/* ---------- Discord buttons: 3D bevel, glass sheen on hover, press on click ----------
   <a class="discord-btn discord-btn--sm"> header size
   <a class="discord-btn">                 normal size
   <a class="discord-btn discord-btn--lg"> big (homepage invite card) */
.discord-btn {
  --bevel: 5px;
  --bevel-colour: #3139a8;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #5865f2, #404eed);
  color: #fff;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 var(--bevel) 0 var(--bevel-colour),                  /* bevel / 3D base */
    0 calc(var(--bevel) + 3px) 20px rgba(88, 101, 242, .45),
    inset 0 2px 0 rgba(255, 255, 255, .25);               /* top gloss */
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Glass sheen that slides across on hover */
.discord-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .15) 55%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.discord-btn:hover::before { left: 140%; }
/* Subtle brightness boost on hover */
.discord-btn:hover {
  background: linear-gradient(145deg, #6974f5, #4f5bf0);
  box-shadow:
    0 var(--bevel) 0 var(--bevel-colour),
    0 calc(var(--bevel) + 5px) 24px rgba(88, 101, 242, .55),
    inset 0 2px 0 rgba(255, 255, 255, .3);
}
/* Push-down effect on click */
.discord-btn:active {
  transform: translateY(calc(var(--bevel) - 1px));
  box-shadow:
    0 1px 0 var(--bevel-colour),
    0 2px 8px rgba(88, 101, 242, .4),
    inset 0 2px 0 rgba(255, 255, 255, .2);
}
.discord-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.discord-btn > * { position: relative; z-index: 1; }   /* icon + text sit above the sheen */
.discord-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.discord-btn--sm { --bevel: 4px; gap: 8px; padding: 10px 18px; border-radius: 11px; font-size: 14px; }
.discord-btn--sm svg { width: 16px; height: 16px; }
.discord-btn--lg { --bevel: 6px; gap: 12px; padding: 19px 34px; border-radius: 14px; font-size: 18px; }
.discord-btn--lg svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) {
  .discord-btn::before { transition: none; }
}

/* ---------- Header dropdowns (Matched Betting + Other) ---------- */
.nav-item { position: relative; }
.nav-chev {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.nav-item:hover .nav-pill .nav-chev,
.nav-item:focus-within .nav-pill .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-item:hover > .nav-pill { color: #fff; background: rgba(255, 255, 255, .05); }
.nav-item:hover > .nav-pill[aria-current="page"] { background: rgba(255, 255, 255, .1); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 16px;              /* invisible bridge so the menu stays open while you move down */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .2s;
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav-item.drop-closed > .nav-drop { opacity: 0; visibility: hidden; pointer-events: none; }

.nav-drop-panel {
  position: relative;
  width: 320px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 20, 26, .98), rgba(10, 10, 13, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: Inter, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
.nav-drop-panel--wide { width: 480px; }
/* little pointer at the top of the panel */
.nav-drop-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-left: 1px solid rgba(255, 255, 255, .09);
  border-radius: 3px 0 0 0;
  background: rgb(20, 20, 26);
  transform: translateX(-50%) rotate(45deg);
}

.drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 10px;
  color: #71717a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.drop-count { color: #52525b; letter-spacing: .12em; }
.drop-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid rgba(6, 182, 212, .25);
  border-radius: 999px;
  background: rgba(6, 182, 212, .08);
  color: #22d3ee;
  letter-spacing: .14em;
}
.drop-badge .soon-dot { width: 6px; height: 6px; }

.drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
/* Single-column menus (Minecraft, Digital Media) */
.drop-list { display: grid; gap: 2px; }
.nav-drop-panel--tall { width: 380px; }

.drop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.drop-item:hover,
.drop-item:focus-visible { outline: none; background: rgba(255, 255, 255, .055); transform: translateX(3px); }
.drop-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--c), .28);
  border-radius: 12px;
  background: rgba(var(--c), .1);
  color: rgb(var(--c));
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.drop-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop-item:hover .drop-icon,
.drop-item:focus-visible .drop-icon { border-color: rgba(var(--c), .6); background: rgba(var(--c), .16); box-shadow: 0 0 18px rgba(var(--c), .35); }
.drop-text { display: grid; gap: 2px; min-width: 0; }
.drop-text strong { color: #f4f4f5; font-size: 14px; font-weight: 600; line-height: 1.25; }
.drop-text small { overflow: hidden; color: #71717a; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.drop-item--compact { gap: 10px; padding: 8px; }
.drop-item--compact .drop-icon { width: 34px; height: 34px; border-radius: 10px; }
.drop-item--compact .drop-icon svg { width: 17px; height: 17px; }
.drop-item--compact .drop-text strong { font-size: 13px; }
.drop-item--compact .drop-text small { font-size: 11px; }
/* Little "opens another site" arrow on partner links */
.drop-ext { display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.drop-item:hover .drop-ext { opacity: .9; }

.drop-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 11px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.drop-foot:hover { color: #fff; }
.drop-foot span { transition: transform .25s ease; }
.drop-foot:hover span { transform: translateX(3px); }
.drop-foot--cta {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top-color: rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  color: #e4e4e7;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.drop-foot--cta:hover { border-color: rgba(168, 85, 247, .5); background: linear-gradient(145deg, rgba(168, 85, 247, .16), rgba(59, 130, 246, .12)); color: #fff; }

.drop-note { margin: 6px 0 0; padding: 10px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .06); color: #52525b; font-size: 11px; text-align: center; }

/* Featured row at the top of the Minecraft menu - the server itself, in gold */
.drop-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(234, 179, 8, .38);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(234, 179, 8, .2), rgba(180, 83, 9, .12) 55%, rgba(234, 179, 8, .06));
  box-shadow: inset 0 1px 0 rgba(253, 224, 71, .22), 0 10px 30px rgba(180, 83, 9, .16);
}
/* A slow sheen sweeping across the gold */
.drop-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 245, 200, .16) 50%, transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.drop-hero:hover::after, .drop-hero:focus-visible::after { left: 130%; }
.drop-hero:hover, .drop-hero:focus-visible {
  transform: none;
  border-color: rgba(250, 204, 21, .75);
  background: linear-gradient(120deg, rgba(234, 179, 8, .3), rgba(180, 83, 9, .18) 55%, rgba(234, 179, 8, .1));
  box-shadow: inset 0 1px 0 rgba(253, 224, 71, .35), 0 14px 38px rgba(180, 83, 9, .3);
}
.drop-hero .drop-icon {
  width: 44px;
  height: 44px;
  border-color: rgba(250, 204, 21, .55);
  background: linear-gradient(145deg, rgba(253, 224, 71, .26), rgba(180, 83, 9, .18));
  color: #fde68a;
  box-shadow: 0 0 24px rgba(234, 179, 8, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.drop-hero:hover .drop-icon, .drop-hero:focus-visible .drop-icon {
  border-color: rgba(250, 204, 21, .85);
  background: linear-gradient(145deg, rgba(253, 224, 71, .38), rgba(180, 83, 9, .24));
  box-shadow: 0 0 30px rgba(234, 179, 8, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.drop-hero .drop-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.drop-hero .drop-text strong {
  background: linear-gradient(100deg, #fef3c7, #fde68a 40%, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.drop-hero .drop-text small { overflow: visible; color: #d6bc7a; line-height: 1.35; white-space: normal; }
.drop-soon {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(250, 204, 21, .4);
  border-radius: 999px;
  background: rgba(234, 179, 8, .16);
  color: #fde68a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Phone menu: expandable Matched Betting + Other groups ---------- */
.nexus-mobile-menu nav { max-height: calc(100dvh - 90px); overflow-y: auto; }
.nexus-mobile-row { display: flex; gap: 6px; }
.nexus-mobile-row .nexus-mobile-link { flex: 1; }
.nexus-sub-toggle {
  width: 52px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  color: #a1a1aa;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.nexus-sub-toggle:hover, .nexus-sub-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .06); color: #fff; }
.nexus-sub-toggle .nav-chev { width: 18px; height: 18px; opacity: 1; }
.nexus-sub-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.nexus-mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1);
}
.nexus-mobile-sub.open { grid-template-rows: 1fr; }
.nexus-mobile-sub > div { overflow: hidden; display: grid; gap: 2px; padding-left: 14px; }
.nexus-mobile-sub.open > div { padding-top: 6px; padding-bottom: 4px; }
.nexus-mobile-sub a {
  padding: 10px 14px;
  border-left: 1px solid rgba(255, 255, 255, .1);
  color: #a1a1aa;
  font-family: Inter, sans-serif;
  font-size: .9rem;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nexus-mobile-sub a:hover { color: #fff; border-left-color: #a855f7; background: rgba(255, 255, 255, .03); }

/* ---------------------------------------------------------------
   Sign in / My account button (sits next to "Add to Discord")
   --------------------------------------------------------------- */
.nav-auth {
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #e4e4e7;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-auth:hover { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .4); color: #fff; }
.nav-auth svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-auth.is-in { padding-left: 5px; }
.nav-auth .nav-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.nexus-mobile-auth { gap: 10px; justify-content: flex-start; }
.nexus-mobile-auth::after { content: none; }
.nexus-mobile-auth svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nexus-mobile-auth .nav-avatar {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; font-size: 11px; font-weight: 800;
}

/* ---------------------------------------------------------------
   Space backdrop
   Painted straight from this stylesheet, so it is on screen the
   moment the page appears - nothing waits for a script. A tiny
   blurred copy of the picture is built into this file and shows
   instantly, then the full picture loads on top of it, so there is
   no flash. It is fixed (never scrolls) and uses "cover", which
   crops rather than stretches.
   --------------------------------------------------------------- */
html { background-color: #04040a; }
body { background-color: transparent !important; background-image: none !important; }
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #04040a;
  background-image:
    linear-gradient(rgba(4, 4, 10, .30), rgba(4, 4, 10, .55)),
    url("/assets/space-bg.webp?v=20260923"),
    url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAgCdASooABcAPrVYpk6nJSOiJWgA4BaJaQAAKUNx6AD+9ZO29lvxj/e6TcQkhkbjEAAA");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (max-width: 820px) {
  /* On a phone the picture sits across the top at its own shape
     (never squashed) and fades into the page colour underneath. */
  html::before {
    background-image:
      linear-gradient(to bottom, rgba(4, 4, 10, .18) 0%, rgba(4, 4, 10, .34) 38%, rgba(4, 4, 10, .9) 64%, #04040a 74%),
      url("/assets/space-bg-sm.webp?v=20260923"),
      url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAADwAgCdASooABcAPrVYpk6nJSOiJWgA4BaJaQAAKUNx6AD+9ZO29lvxj/e6TcQkhkbjEAAA");
    background-size: auto, 100% auto, 100% auto;
    background-position: center, top center, top center;
  }
}