* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #000;
  color: #fff;
  font-family: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* Fixed full-screen page background (like the Wix page background) */
.page-bg {
  position: fixed; inset: 0; z-index: -1;
  background: #000 center / cover no-repeat;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  height: 54px;
  display: flex; align-items: center;
  padding: 0 12px 0 3px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img.spin { width: 48px; height: 49px; }
.logo img.word { width: 241px; height: 54px; margin-left: -6px; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid #c5c5c5; color: #c5c5c5;
  font: bold 20px/1 sans-serif; padding: 6px 10px; cursor: pointer;
}
.nav { margin-left: auto; margin-right: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.nav li { position: relative; }
.nav a, .nav .more-btn {
  display: block; margin: 0 14px; padding: 2px 0;
  border-top: 1px solid #c5c5c5;
  color: #c5c5c5; text-decoration: none;
  font: italic bold 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer;
  white-space: nowrap;
}
.nav a:hover, .nav .more-btn:hover { color: #fff; }
.nav a.active { color: #3a2a55; border-top-color: #3a2a55; }
.nav .submenu {
  display: none; position: absolute; right: 0; top: 100%;
  background: rgba(0,0,0,.67); padding: 6px 0; min-width: 130px;
}
.nav .submenu a { border-top: 0; margin: 0; padding: 6px 14px; }
.nav li.more:hover .submenu, .nav li.more:focus-within .submenu, .nav li.more.open .submenu { display: block; }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 54px; right: 0; left: 0;
    background: rgba(0,0,0,.92); padding: 8px 0;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; }
  .nav a, .nav .more-btn { border-top: 0; padding: 10px 16px; margin: 0; font-size: 16px; }
  .nav .submenu { display: block; position: static; background: none; padding: 0 0 0 16px; }
  .logo img.word { width: 180px; height: auto; }
}

/* ---------- Stage: 980px Wix-style canvas, scaled down on small screens ---------- */
.stage-wrap { position: relative; width: 100%; overflow: hidden; }
.stage {
  position: absolute; top: 0; left: 50%;
  width: 980px;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--s, 1));
}
.stage > * { position: absolute; display: block; }
.stage img { object-fit: cover; }
.stage a > img { width: 100%; height: 100%; display: block; }
.stage iframe { border: 0; background: transparent; }

/* Wix "shiny" buttons */
.btn {
  display: flex !important; align-items: center; justify-content: center;
  color: #f6f6f6; text-decoration: none; text-align: center;
  font: 800 16px/22.4px "Avenir Next", Avenir, "Nunito Sans", sans-serif;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.38) 0%, rgba(255,255,255,.12) 48%, rgba(0,0,0,.04) 52%, rgba(0,0,0,.16) 100%);
  transition: background-color .4s ease, color .4s ease;
}
/* Colours + hover colours copied from the old Wix buttons */
.btn.orange { background-color: rgb(237,153,27); }          .btn.orange:hover { background-color: rgb(255,177,61); }
.btn.yellow { background-color: rgba(255,255,90,.66); }     .btn.yellow:hover { background-color: rgba(255,255,90,.9); }
.btn.green  { background-color: rgba(56,120,83,.66); }      .btn.green:hover  { background-color: rgb(56,120,83); }
.btn.red    { background-color: rgba(226,28,33,.66); }      .btn.red:hover    { background-color: rgb(226,28,33); }
.btn.purple { background-color: rgb(71,32,183); }           .btn.purple:hover { background-color: rgb(144,122,207); }
.btn.tf2    { background-color: rgba(255,117,24,.88); }     .btn.tf2:hover    { background-color: rgb(29,103,205); }
/* TF2 Section button font - kept here, not inline: Netlify's pretty-URL rewrite re-quotes the
   <a> tag and broke the quoted font names inside its style="" attribute */
.btn.tf2-btn { font: 76px/95px 'Creepster', 'Chelsea Market', fantasy; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 3px 6px rgba(0,0,0,.55); }

/* Wix entrance effect: fade in + turn in (used on the server buttons) */
@keyframes wix-turn-in {
  from { opacity: 0; transform: rotate(-50deg); }
  to   { opacity: 1; transform: rotate(0); }
}
.turn-in { transform-origin: -50% 50%; animation: wix-turn-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@media (prefers-reduced-motion: reduce) { .turn-in { animation: none; } }

/* Credit popup (replaces the Wix attribution widgets) */
.credit-hit { background: transparent; border: 0; padding: 0; cursor: pointer; }
.credit-modal {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #333; color: #fff; padding: 15px; border-radius: 6px; z-index: 10000;
  text-align: center; max-width: 300px; font: 14px/1.4 sans-serif;
}
.credit-modal.show { display: block; }
.credit-modal a { color: #1e90ff; }
.credit-modal a:hover { color: #63b3ff; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; height: 70px; background: rgb(189,233,251);
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.site-footer img { width: 55px; height: 55px; }
.site-footer span { font: 800 12px "Avenir Next", Avenir, "Nunito Sans", sans-serif; color: #fff; letter-spacing: .5px; }

/* Click-to-enlarge images (like Wix "expand" mode) */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 20000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); cursor: zoom-out;
  opacity: 0; transition: opacity .25s ease;
}
.lightbox.show { display: flex; }
.lightbox.visible { opacity: 1; }
.lightbox img {
  max-width: 90vw; max-height: 90vh; width: auto; height: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  transform: scale(.85); transition: transform .25s ease;
}
.lightbox.visible img { transform: scale(1); }
.lightbox .lb-close {
  position: absolute; top: 14px; right: 18px;
  background: none; border: 0; color: #fff; font: 36px/1 sans-serif; cursor: pointer;
}