/* ==========================================================================
   Kabounce — kabouncegame.com rebuild
   Static rebuild of the original Wix site for self-hosting (Hostinger).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'KabounceNav'; /* original Wix uploaded font (nav / buttons) */
  src: url('../fonts/heading.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KabounceBody'; /* original Wix uploaded font (body copy) */
  src: url('../fonts/body.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Play';
  src: url('../fonts/play-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Play';
  src: url('../fonts/play-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #08101a;        /* main page background (matches original Wix site) */
  --bg-deep: #070b14;   /* darker band: steam widget strip, footer */
  --line: #272d3a;      /* horizontal separator lines */
  --bg-panel: #070b14;
  --text: #dae2e6;
  --heading: #00c0ff;
  --accent: #eea201;
  --nav-text: #fffefc;
  --header-h: 64px;
  --font-nav: 'KabounceNav', 'Play', Arial, sans-serif;
  --font-heading: 'Play', Arial, sans-serif;
  --font-body: 'KabounceBody', 'Play', Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* decorative art may poke past the viewport edge. On html ONLY: the root's
   overflow propagates to the viewport (clip x, scroll y). Adding body to this
   rule would turn body into a scroll container and break anchor scrolling. */
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: inline-block; }
a { color: var(--heading); text-decoration: none; }
a:hover { color: var(--accent); }

.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}
h2 { font-size: 24px; margin-bottom: 16px; }
h3 { font-size: 18px; margin-bottom: 10px; }

section { padding: 60px 0; }
section[id] { scroll-margin-top: 8px; }

/* Horizontal separator lines between sections (and below the hero video) */
main > section + section { border-top: 1px solid var(--line); }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
/* the steam widget band draws its own lines — no extra ones around that section */
main > section.steam-section,
main > section.steam-section + section { border-top: none; }

/* in-section divider (e.g. between the About body and Key Features) */
hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 30px 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  /* floats transparently over the hero video, like the Wix original */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}
.site-header .container {
  max-width: 1200px;
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  gap: 12px;
}
.header-logo img { height: 40px; width: auto; display: block; }

.main-nav { display: flex; align-items: stretch; margin-left: 24px; }
.main-nav a {
  font-family: var(--font-nav);
  font-size: 15px;
  color: var(--nav-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.main-nav a:hover { background: rgba(0, 0, 0, 0.45); color: var(--accent); }
.main-nav a.active { background: rgba(0, 0, 0, 0.4); color: var(--accent); }

.header-social { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-social a { position: relative; display: block; line-height: 0; }
.header-social a img { height: 28px; width: auto; }
.header-social a img.hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s; }
.header-social a:hover img.hover { opacity: 1; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid #333;
  color: var(--nav-text);
  font-size: 22px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: calc(100vh - var(--header-h) - 60px);
  min-height: 480px;
  max-height: 776px;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.hero--short {
  height: 330px;
  min-height: 280px;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dark tint + scanline texture over the video, same as the original site */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.35) url('../images/scanlines.png') repeat top left;
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* top padding keeps content clear of the transparent overlaid header */
  padding: calc(var(--header-h) + 20px) 20px 20px;
}
.hero-logo { width: min(539px, 80vw); margin-bottom: 48px; }
.hero--short .hero-logo { width: min(440px, 70vw); margin-bottom: 0; }

.btn-trailer {
  display: inline-block;
  position: relative;
  width: 270px;
  line-height: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.btn-trailer img { width: 100%; }
.btn-trailer img.hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s; }
.btn-trailer:hover img.hover { opacity: 1; }

.hero-ratings {
  position: absolute;
  z-index: 2;
  /* align with the left edge of the 980px text container */
  left: max(calc((100% - 980px) / 2 + 20px), 20px);
  bottom: 24px;
  display: flex;
  gap: 24px;
}
.rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text);
}
.rating img { height: 84px; width: auto; }

/* ==========================================================================
   About / feature sections
   ========================================================================== */
#about { padding-top: 100px; }

.feature-list { list-style: none; }
.feature-list li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 4px;
}
.feature-list li::before {
  content: '»';
  position: absolute;
  left: 0;
  color: var(--heading);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
}
.feature-row.reverse .feature-media { order: -1; }
.feature-media img {
  width: 100%;
  border: 1px solid #1c1c1c;
  border-radius: 4px;
}

/* ==========================================================================
   Steam widget
   ========================================================================== */
.steam-section {
  position: relative;
  padding: 46px 0;
}
/* darker band behind the widget, 3/4 of its height, edged with lines */
.steam-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 143px; /* 75% of the 190px widget */
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steam-widget-wrap {
  position: relative;
  width: 646px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}
.steam-widget {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
}
/* Kabounce ball + trail tucked at the top-right corner of the widget,
   clear of the Steam logo inside the embed */
.steam-ball {
  position: absolute;
  top: -130px;
  right: -280px;
  width: 320px;
  height: 150px;
  z-index: 2;
  pointer-events: none;
}
.steam-ball .ball {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110px;
  z-index: 2;
}
/* trail emerges from the ball: starts ~18% into it, vertically centered on it
   (matches the composition on the original site) */
.steam-ball .trail {
  position: absolute;
  left: 20px;
  top: 64px;
  width: 245px;
  z-index: 1;
}

.rarity-common { color: #ffffff; }
.rarity-rare { color: #137dbb; }
.rarity-epic { color: #9b30ff; font-weight: 700; }
.rarity-legendary { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   Carousel
   ========================================================================== */
.carousel-section { padding: 40px 0 70px; }
.carousel {
  position: relative;
  max-width: 972px;
  margin: 0 auto;
  overflow: hidden;
  background: #050505;
  /* thin light frame, as on the original site */
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.carousel-track {
  display: flex;
  transition: transform 0.45s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-counter {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 3px;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  width: 46px;
  height: 62px;
  cursor: pointer;
  transition: background 0.15s;
}
.carousel-btn:hover { background: rgba(0, 0, 0, 0.8); }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
}
.carousel-dots button.active { background: var(--heading); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-item { margin-bottom: 26px; }
.faq-item .question { color: #fff; font-weight: 700; margin-bottom: 6px; }
.faq-item .answer .label { color: var(--heading); }
.faq-note { font-size: 13px; color: #9aa4a9; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter {
  text-align: center;
  background: var(--bg-panel);
}
/* original Wix layout: stacked full-width underline fields + full-width button */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 700px;
  margin: 28px auto 0;
}
.newsletter-form input[type="text"]:not(.hp),
.newsletter-form input[type="email"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 2px;
}
.newsletter-form input::placeholder { color: var(--text); opacity: 0.85; }
.newsletter-form input[type="text"]:not(.hp):focus,
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--heading);
}
.btn-subscribe {
  width: 100%;
  margin-top: 12px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  color: #fff;
  background: #c78843;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 12px 16px;
  transition: background 0.15s;
}
.btn-subscribe:hover { background: #d69a55; }
.btn-subscribe:disabled { opacity: 0.6; cursor: default; }
/* honeypot: parked far off-screen, never display:none (bots skip hidden fields) */
.hp { position: absolute; left: -5000px; top: 0; }
.newsletter-msg { margin-top: 14px; min-height: 1.4em; }
.newsletter-msg.ok { color: #4cd964; }
.newsletter-msg.error { color: #ff5c5c; }
.newsletter-privacy { margin-top: 6px; font-size: 12px; color: #8b959b; }
.newsletter-privacy a { color: var(--text); }
.newsletter-privacy a:hover { color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 50px 0 40px;
  text-align: center;
}
.footer-logo img { height: 90px; width: auto; }
.footer-partners {
  margin: 18px 0 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.footer-partners img { height: 52px; width: auto; }
.footer-legal { font-size: 12px; color: #8b959b; line-height: 1.8; }
.footer-legal a {
  color: var(--text);
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 10px;
}
.footer-legal a:hover { color: var(--accent); }

/* ==========================================================================
   Trailer modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  position: relative;
  width: min(960px, 100%);
}
.modal-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}
.modal-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--accent); }

/* ==========================================================================
   Press kit page
   ========================================================================== */
.presskit-grid {
  display: grid;
  grid-template-columns: 1fr 1.9fr; /* factsheet left, main copy right */
  gap: 50px;
  align-items: start;
}
.presskit-main h2 { margin-top: 40px; }
.presskit-main h2:first-child { margin-top: 0; }
.presskit-main p { margin-bottom: 14px; }

.factsheet {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px;
  font-size: 14px;
}
.factsheet h2 { font-size: 20px; }
.factsheet dt { color: #fff; font-weight: 700; margin-top: 16px; }
.factsheet dd { margin: 2px 0 0; }
.factsheet .presskit-download {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.factsheet .presskit-download img { height: 24px; width: auto; flex: 0 0 auto; }

.video-embed {
  aspect-ratio: 16 / 9;
  max-width: 860px;
  margin: 30px auto 0;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #1c1c1c;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.gallery-grid img:hover { border-color: rgba(255, 255, 255, 0.45); }

/* fullscreen image lightbox */
.modal-box--image { width: min(1400px, 100%); }
.lightbox-holder img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 86vh;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.logos-row img { max-height: 200px; width: auto; }
.section-links { text-align: center; }
.section-links h2 { margin-top: 50px; }
/* section headers double as download/watch links */
.section-links h2 a { color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.section-links h2 a:hover { color: var(--accent); }
.section-links h2 img { height: 26px; width: auto; }

/* ==========================================================================
   Legal pages (EULA / privacy)
   ========================================================================== */
/* pushes content below the absolutely-positioned transparent header */
.page-offset { padding-top: calc(var(--header-h) + 40px); }

.legal-content { max-width: 860px; }
.legal-content h1 { font-size: 26px; margin-bottom: 8px; }
.legal-content h2 { font-size: 19px; margin: 34px 0 12px; }
.legal-content p { margin-bottom: 14px; }
.legal-content .meta { color: #8b959b; font-size: 13px; margin-bottom: 30px; }
.legal-content ul { margin: 0 0 14px 22px; }
.legal-content li { margin-bottom: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    background: var(--bg-deep);
    margin: 0;
    border-bottom: 1px solid var(--line);
  }
  .main-nav a:hover, .main-nav a.active { background: rgba(0, 0, 0, 0.5); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 16px 24px; }
  .header-social { display: none; }

  .feature-row, .presskit-grid { grid-template-columns: 1fr; }
  .feature-row.reverse .feature-media { order: 0; }
  .presskit-grid .presskit-main { order: -1; } /* description above factsheet on mobile */
  .hero-ratings { left: 20px; gap: 14px; }
  .rating img { height: 64px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .steam-ball { width: 200px; height: 96px; top: -82px; right: -80px; }
  .steam-ball .ball { width: 70px; }
  .steam-ball .trail { left: 13px; top: 42px; width: 152px; }
}