/* =========================================================
   ROTOPIA WEBSITE
   Complete CSS
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;

  font-family: "Press Start 2P", cursive;

  color: #ffffff;

  overflow-x: hidden;

  /* =======================================================
     BACKGROUND IMAGE
     
     Put your image here:
     images/background.png
     ======================================================= */

  background-color: #172c38;

  background-image: url("images/background.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  background-attachment: fixed;
}


/* =========================================================
   HEADER
   ========================================================= */

.top-bar {
  position: sticky;

  top: 0;

  z-index: 100;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 13px clamp(18px, 4vw, 55px);

  background: rgba(28, 101, 143, 0.94);

  border-bottom: 3px solid rgba(255, 255, 255, 0.2);

  box-shadow:
    0 4px 0 rgba(18, 72, 98, 0.45),
    0 8px 25px rgba(24, 78, 103, 0.18);

  backdrop-filter: blur(8px);
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #ffffff;

  text-decoration: none;
}

.logo-img {
  width: 43px;
  height: 43px;

  object-fit: contain;

  filter:
    drop-shadow(
      3px 3px 0 rgba(18, 68, 91, 0.55)
    );
}

.logo h1 {
  font-size: 19px;

  letter-spacing: 1px;

  color: #ffffff;

  text-shadow:
    3px 3px 0 #24647d;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {
  display: flex;

  align-items: center;

  gap: 8px;
}

.nav-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 10px 14px;

  font-family: "Press Start 2P", cursive;

  font-size: 8px;

  color: rgba(255, 255, 255, 0.92);

  text-decoration: none;

  background: rgba(255, 255, 255, 0.08);

  border: 2px solid rgba(255, 255, 255, 0.14);

  border-radius: 9px;

  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.14);

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.nav-btn:hover {
  transform: translateY(-2px);

  background: rgba(255, 255, 255, 0.16);

  border-color: rgba(255, 255, 255, 0.3);
}

.nav-btn:active {
  transform: translateY(1px);
}

.nav-btn.active {
  background: #28b979;

  border-color: rgba(255, 255, 255, 0.32);

  box-shadow:
    0 4px 0 #168052;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.content {
  position: relative;

  z-index: 5;

  width: min(1120px, 92%);

  margin: 0 auto;

  padding: 60px 0 90px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  max-width: 820px;

  margin: 10px auto 55px;

  text-align: center;
}

.hero-character {
  width: 110px;
  height: 110px;

  object-fit: contain;

  margin-bottom: 24px;

  filter:
    drop-shadow(
      5px 6px 0 rgba(0, 0, 0, 0.3)
    )
    drop-shadow(
      0 15px 25px rgba(0, 0, 0, 0.15)
    );
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.tagline {
  max-width: 800px;

  margin: 0 auto 18px;

  font-size: clamp(17px, 3vw, 25px);

  line-height: 1.65;

  color: #ffffff;

  text-shadow:
    4px 4px 0 #28728d,
    0 6px 15px rgba(0, 0, 0, 0.25);
}

.subtitle {
  display: inline-block;

  max-width: 680px;

  padding: 12px 19px;

  font-size: 9px;

  line-height: 1.8;

  color: #28576a;

  background:
    rgba(255, 255, 255, 0.9);

  border:
    2px solid rgba(255, 255, 255, 0.96);

  border-radius: 10px;

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   MAIN BUTTONS
   ========================================================= */

.buttons-section {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;

  margin: 0 auto 75px;
}


/* =========================================================
   GAME BUTTON
   ========================================================= */

.game-btn {
  position: relative;

  min-height: 132px;

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 21px;

  color: #ffffff;

  text-decoration: none;

  overflow: hidden;

  border-radius: 17px;

  border:
    2px solid rgba(255, 255, 255, 0.28);

  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.19),
    0 16px 30px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}


/* =========================================================
   BUTTON TOP HIGHLIGHT
   ========================================================= */

.game-btn::after {
  content: "";

  position: absolute;

  top: 0;

  left: 14px;

  right: 14px;

  height: 2px;

  background: rgba(255, 255, 255, 0.28);

  border-radius: 10px;
}


/* =========================================================
   BUTTON SHINE
   ========================================================= */

.game-btn::before {
  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 70%;

  height: 100%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    );

  transform: skewX(-20deg);

  transition:
    left 0.55s ease;
}

.game-btn:hover::before {
  left: 140%;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.game-btn:hover {
  transform: translateY(-5px);

  filter: brightness(1.05);

  box-shadow:
    0 11px 0 rgba(0, 0, 0, 0.19),
    0 22px 35px rgba(0, 0, 0, 0.18);
}

.game-btn:active {
  transform: translateY(2px);

  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18);
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.play-btn {
  background:
    linear-gradient(
      145deg,
      #42d889 0%,
      #29b96d 52%,
      #1f9b5b 100%
    );
}

.play-btn:hover {
  background:
    linear-gradient(
      145deg,
      #4ee598 0%,
      #2dca77 52%,
      #22a963 100%
    );
}


/* =========================================================
   DISCORD BUTTON
   ========================================================= */

.discord-btn {
  background:
    linear-gradient(
      145deg,
      #7f93ed 0%,
      #656fd5 52%,
      #515bb8 100%
    );
}

.discord-btn:hover {
  background:
    linear-gradient(
      145deg,
      #8b9ff5 0%,
      #717de2 52%,
      #5b65c8 100%
    );
}


/* =========================================================
   UPDATES BUTTON
   ========================================================= */

.updates-btn {
  background:
    linear-gradient(
      145deg,
      #f8bd55 0%,
      #eb9a35 52%,
      #d77c27 100%
    );
}

.updates-btn:hover {
  background:
    linear-gradient(
      145deg,
      #ffca68 0%,
      #f1a943 52%,
      #df8730 100%
    );
}


/* =========================================================
   BUTTON ICON CONTAINER
   ========================================================= */

.btn-icon-wrap {
  position: relative;

  width: 58px;
  height: 58px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(0, 0, 0, 0.15);

  border:
    2px solid rgba(255, 255, 255, 0.23);

  border-radius: 14px;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 4px 9px rgba(0, 0, 0, 0.11);
}


/* =========================================================
   BUTTON ICON
   ========================================================= */

.btn-icon-img {
  width: 35px;
  height: 35px;

  object-fit: contain;

  filter:
    drop-shadow(
      2px 2px 0 rgba(0, 0, 0, 0.14)
    );
}


/* =========================================================
   DISCORD ICON
   FILL THE SQUARE
   ========================================================= */

.discord-btn .btn-icon-img {
  width: 54px;
  height: 54px;

  max-width: none;
  max-height: none;

  object-fit: contain;

  filter:
    drop-shadow(
      2px 2px 0 rgba(0, 0, 0, 0.16)
    );
}


/* =========================================================
   BUTTON CONTENT
   ========================================================= */

.btn-content {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 7px;

  min-width: 0;
}

.btn-label {
  font-size: 8px;

  letter-spacing: 1.5px;

  opacity: 0.67;
}

.btn-text {
  font-size: 15px;

  line-height: 1.5;

  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.18);
}


/* =========================================================
   BUTTON ARROW
   ========================================================= */

.btn-arrow {
  position: relative;

  z-index: 2;

  margin-left: auto;

  flex-shrink: 0;

  font-family: Arial, sans-serif;

  font-size: 28px;

  font-weight: 900;

  opacity: 0.52;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.game-btn:hover .btn-arrow {
  opacity: 1;

  transform: translateX(5px);
}


/* =========================================================
   ABOUT ROTOPIA
   ========================================================= */

.about-section {
  width: 100%;

  margin: 0 auto 75px;
}

.about-card {
  display: flex;

  align-items: center;

  gap: 25px;

  max-width: 880px;

  margin: 0 auto;

  padding: 30px 34px;

  color: #294f5e;

  background:
    rgba(255, 255, 255, 0.9);

  border:
    2px solid rgba(255, 255, 255, 0.96);

  border-radius: 18px;

  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.16),
    0 18px 35px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   ABOUT ICON
   ========================================================= */

.about-icon {
  width: 64px;
  height: 64px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: Arial, sans-serif;

  font-size: 28px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #56cce9,
      #318eb8
    );

  border-radius: 15px;

  box-shadow:
    0 5px 0 #276f8b;
}


/* =========================================================
   ABOUT CONTENT
   ========================================================= */

.about-content {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.about-label {
  font-size: 7px;

  letter-spacing: 1.5px;

  color: #5b9bb1;
}

.about-content h2 {
  font-size: 18px;

  color: #285769;
}

.about-content p {
  font-size: 8px;

  line-height: 1.9;

  color: #607982;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading {
  text-align: center;

  margin-bottom: 30px;
}

.section-heading span {
  display: block;

  margin-bottom: 11px;

  font-size: 7px;

  letter-spacing: 2px;

  color: rgba(255, 255, 255, 0.76);

  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.25);
}

.section-heading h2 {
  font-size: 18px;

  color: #ffffff;

  text-shadow:
    3px 3px 0 #28728d;
}


/* =========================================================
   FEATURES
   ========================================================= */

.features-section {
  margin-bottom: 70px;
}

.features-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;

  max-width: 960px;

  margin: 0 auto;
}

.feature-card {
  padding: 27px 23px;

  text-align: center;

  color: #294f5e;

  background:
    rgba(255, 255, 255, 0.88);

  border:
    2px solid rgba(255, 255, 255, 0.94);

  border-radius: 16px;

  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.15),
    0 14px 28px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.15),
    0 20px 35px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.feature-icon {
  width: 54px;
  height: 54px;

  margin: 0 auto 17px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: Arial, sans-serif;

  font-size: 23px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #54cce8,
      #378fb5
    );

  border-radius: 13px;

  box-shadow:
    0 4px 0 #286f8a;
}


/* =========================================================
   FEATURE TEXT
   ========================================================= */

.feature-card h3 {
  margin-bottom: 12px;

  font-size: 10px;

  color: #315d6c;
}

.feature-card p {
  font-size: 7px;

  line-height: 1.9;

  color: #71858c;
}


/* =========================================================
   UPDATES PAGE
   ========================================================= */

.updates-list {
  display: grid;

  grid-template-columns: 1fr;

  gap: 18px;

  max-width: 850px;

  margin: 0 auto 50px;
}

.update-card {
  position: relative;

  padding: 26px;

  color: #284a59;

  background:
    rgba(255, 255, 255, 0.92);

  border:
    2px solid rgba(255, 255, 255, 0.96);

  border-radius: 16px;

  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.16),
    0 15px 35px rgba(0, 0, 0, 0.09);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.update-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.16),
    0 20px 40px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   UPDATE BADGES
   ========================================================= */

.update-badge {
  position: absolute;

  top: 16px;

  right: 18px;

  padding: 7px 11px;

  font-size: 7px;

  color: #ffffff;

  background: #5b9fd1;

  border-radius: 7px;

  box-shadow:
    0 3px 0 rgba(41, 91, 117, 0.3);
}

.update-badge.new {
  background: #27b878;

  box-shadow:
    0 3px 0 #168052;
}

.update-badge.planned {
  background: #8798a0;

  box-shadow:
    0 3px 0 #65757c;
}


/* =========================================================
   UPDATE CONTENT
   ========================================================= */

.update-card h3 {
  max-width: 70%;

  margin-bottom: 13px;

  font-size: 14px;

  line-height: 1.6;

  color: #244654;
}

.update-card p {
  margin-bottom: 15px;

  font-size: 9px;

  line-height: 1.9;

  color: #59717a;
}

.update-date {
  display: inline-block;

  padding: 6px 10px;

  font-size: 7px;

  color: #367d9e;

  background:
    rgba(76, 170, 210, 0.12);

  border:
    1px solid rgba(76, 170, 210, 0.18);

  border-radius: 6px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  position: relative;

  z-index: 5;

  width: 100%;

  padding: 27px 20px;

  text-align: center;

  font-size: 7px;

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.72);

  background:
    rgba(0, 0, 0, 0.22);

  border-top:
    2px solid rgba(255, 255, 255, 0.16);

  backdrop-filter: blur(5px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .buttons-section {
    grid-template-columns: 1fr;

    max-width: 620px;
  }

  .game-btn {
    min-height: 115px;
  }

  .features-grid {
    grid-template-columns: 1fr;

    max-width: 620px;
  }

  .content {
    padding-top: 50px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .top-bar {
    position: relative;

    flex-direction: column;

    gap: 14px;

    padding: 14px 16px;
  }


  .logo h1 {
    font-size: 15px;
  }


  .logo-img {
    width: 36px;
    height: 36px;
  }


  nav {
    width: 100%;

    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;
  }


  .nav-btn {
    font-size: 7px;

    padding: 9px 11px;
  }


  .content {
    width: 92%;

    padding: 42px 0 65px;
  }


  .hero {
    margin-bottom: 42px;
  }


  .hero-character {
    width: 82px;
    height: 82px;

    margin-bottom: 19px;
  }


  .tagline {
    font-size: 14px;

    line-height: 1.7;

    text-shadow:
      3px 3px 0 #28728d;
  }


  .subtitle {
    font-size: 7px;

    padding: 9px 12px;

    line-height: 1.8;
  }


  /* Buttons */

  .buttons-section {
    gap: 14px;

    margin-bottom: 55px;
  }


  .game-btn {
    min-height: 102px;

    padding: 16px;

    gap: 13px;

    border-radius: 14px;
  }


  .btn-icon-wrap {
    width: 48px;
    height: 48px;

    border-radius: 11px;
  }


  .btn-icon-img {
    width: 29px;
    height: 29px;
  }


  /* Discord remains large */

  .discord-btn .btn-icon-img {
    width: 44px;
    height: 44px;

    max-width: none;
    max-height: none;
  }


  .btn-label {
    font-size: 6px;

    letter-spacing: 1px;
  }


  .btn-text {
    font-size: 11px;

    line-height: 1.5;
  }


  .btn-arrow {
    font-size: 22px;
  }


  /* About */

  .about-card {
    padding: 22px;

    gap: 17px;
  }


  .about-icon {
    width: 50px;
    height: 50px;

    font-size: 22px;
  }


  .about-content h2 {
    font-size: 15px;
  }


  .about-content p {
    font-size: 7px;
  }


  /* Features */

  .features-grid {
    grid-template-columns: 1fr;

    max-width: 500px;
  }


  .section-heading h2 {
    font-size: 14px;
  }


  /* Updates */

  .update-card {
    padding: 20px;
  }


  .update-card h3 {
    max-width: 65%;

    font-size: 11px;
  }


  .update-card p {
    font-size: 7px;
  }


  .update-badge {
    font-size: 6px;

    top: 13px;

    right: 13px;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 450px) {

  .about-card {
    flex-direction: column;

    text-align: center;
  }


  .about-content {
    align-items: center;
  }


  .section-heading h2 {
    font-size: 14px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .logo h1 {
    font-size: 13px;
  }


  .nav-btn {
    font-size: 6px;

    padding: 8px 9px;
  }


  .game-btn {
    min-height: 92px;

    padding: 13px;
  }


  .btn-icon-wrap {
    width: 43px;
    height: 43px;
  }


  .btn-icon-img {
    width: 25px;
    height: 25px;
  }


  /* Discord remains larger */

  .discord-btn .btn-icon-img {
    width: 40px;
    height: 40px;

    max-width: none;
    max-height: none;
  }


  .btn-text {
    font-size: 9px;
  }


  .btn-arrow {
    font-size: 19px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;

    transition-duration: 0.01ms !important;
  }
}