/* =====================================================
   TAP THE SAME
   COMPLETE WEBSITE STYLE
   HOME + GAME
   ===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #302044;

  background:
    linear-gradient(
      135deg,
      #fff1f7,
      #f5efff,
      #eaf7ff
    );

  min-height: 100vh;
}


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

.topbar {

  width: 100%;

  min-height: 82px;

  padding:
    18px
    30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

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

  box-shadow:
    0 3px 18px
    rgba(50,30,70,0.08);

  position: relative;

  z-index: 100;
}


.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 30px;

  font-weight: 900;

  color: #35204e;
}


.topbar nav {

  display: flex;

  align-items: center;

  gap: 25px;
}


.topbar nav a {

  text-decoration: none;

  color: #49315c;

  font-size: 16px;

  font-weight: 700;
}


.topbar nav a:hover {

  color: #ff477d;
}


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

.hero {

  width: 100%;

  min-height:
    calc(100vh - 82px);

  padding:
    55px
    20px
    70px;

  display: flex;

  justify-content: center;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #ffddea,
      #eee5ff,
      #dff5ff
    );
}


.hero-card {

  width: 100%;

  max-width: 780px;

  padding:
    55px
    35px
    45px;

  text-align: center;

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

  border-radius: 45px;

  box-shadow:
    0 20px 55px
    rgba(65,35,90,0.14);
}


.hero-label {

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 4px;

  color: #e53e76;

  margin-bottom: 18px;
}


.hero h1 {

  margin: 0;

  font-size:
    clamp(55px, 9vw, 90px);

  line-height: 1;

  font-weight: 900;

  background:
    linear-gradient(
      90deg,
      #e63778,
      #944be7,
      #258de0
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;
}


.hero-animals {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin:
    25px
    0
    20px;

  font-size: 60px;
}


.hero-text {

  max-width: 650px;

  margin:
    0
    auto
    30px;

  font-size: 22px;

  line-height: 1.6;

  color: #443152;
}


/* =====================================================
   PLAY NOW
   ===================================================== */

.play-now {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 230px;

  min-height: 70px;

  padding:
    10px
    30px;

  border-radius: 50px;

  text-decoration: none;

  color: white;

  font-size: 25px;

  font-weight: 900;

  background:
    linear-gradient(
      90deg,
      #ff3e79,
      #ff9b43
    );

  box-shadow:
    0 12px 30px
    rgba(255,70,120,0.28);

  transition:
    transform 0.15s ease;
}


.play-now:hover {

  transform:
    translateY(-3px);
}


.play-now:active {

  transform:
    scale(0.95);
}


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

.hero-stats {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 35px;

  margin-top: 30px;

  font-size: 22px;

  font-weight: 700;
}


.hero-stats div {

  display: flex;

  align-items: center;

  gap: 7px;
}


.hero-stats span {

  font-weight: 900;
}


/* =====================================================
   HOW TO PLAY
   ===================================================== */

.info-section {

  width: 100%;

  padding:
    70px
    20px;
}


.info-card {

  width: 100%;

  max-width: 1050px;

  margin: auto;

  padding:
    40px
    30px;

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

  border-radius: 35px;

  box-shadow:
    0 12px 35px
    rgba(60,35,90,0.10);
}


.info-card h2 {

  margin:
    0
    0
    35px;

  text-align: center;

  font-size: 38px;
}


.steps {

  display: grid;

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

  gap: 20px;
}


.step {

  text-align: center;

  padding: 20px;

  border-radius: 25px;

  background:
    linear-gradient(
      135deg,
      #fff5fa,
      #f3f0ff
    );
}


.step-icon {

  font-size: 55px;

  margin-bottom: 10px;
}


.step h3 {

  margin:
    5px
    0
    10px;

  font-size: 22px;
}


.step p {

  margin: 0;

  line-height: 1.5;

  font-size: 16px;

  color: #624d6e;
}


/* =====================================================
   ANIMAL PREVIEW
   ===================================================== */

.animals-section {

  width: 100%;

  padding:
    20px
    20px
    80px;

  text-align: center;
}


.animals-section h2 {

  font-size: 38px;

  margin-bottom: 30px;
}


.animal-preview {

  width: 100%;

  max-width: 950px;

  margin: auto;

  display: grid;

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

  gap: 18px;
}


.animal-preview div {

  min-height: 150px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background:
    white;

  border-radius: 28px;

  box-shadow:
    0 8px 22px
    rgba(60,35,90,0.10);

  font-size: 65px;
}


.animal-preview span {

  font-size: 20px;

  font-weight: 900;

  color: #49315c;
}


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

footer {

  padding:
    35px
    20px;

  text-align: center;

  background:
    #302044;

  color: white;

  font-size: 21px;

  font-weight: 900;
}


footer span {

  font-size: 15px;

  font-weight: 500;

  opacity: 0.8;
}


/* =====================================================
   ================= GAME PAGE =========================
   ===================================================== */

.game-section {

  width: 100%;

  min-height:
    calc(100vh - 82px);

  padding:
    30px
    15px
    70px;
}


.game-shell {

  width: 100%;

  max-width: 760px;

  margin: auto;

  padding:
    28px
    22px
    35px;

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

  border-radius: 38px;

  box-shadow:
    0 18px 50px
    rgba(60,35,90,0.15);
}


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

.game-head {

  width: 100%;

  display: grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap: 10px;

  margin-bottom: 20px;

  text-align: center;

  font-size: 27px;

  font-weight: 900;
}


.game-head div {

  white-space: nowrap;
}


/* =====================================================
   TIMER
   ===================================================== */

.timer-wrap {

  width: 100%;

  height: 15px;

  margin-bottom: 25px;

  overflow: hidden;

  border-radius: 50px;

  background: #e8dff0;
}


#timerBar {

  width: 100%;

  height: 100%;

  border-radius: 50px;

  background:
    linear-gradient(
      90deg,
      #ff3f7b,
      #ff9d43
    );

  transition:
    width 0.1s linear;
}


/* =====================================================
   TARGET
   ===================================================== */

.target-card {

  width: 100%;

  min-height: 320px;

  padding: 28px 15px;

  border-radius: 35px;

  background:
    linear-gradient(
      135deg,
      #ffe4f0,
      #e5f3ff
    );

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin-bottom: 28px;
}


.small-label {

  font-size: 21px;

  font-weight: 900;

  letter-spacing: 3px;

  color: #74527e;
}


.target-animal {

  font-size: 110px;

  line-height: 1.05;

  margin:
    10px
    0;

  filter:
    drop-shadow(
      0 8px 8px
      rgba(0,0,0,0.15)
    );
}


.target-name {

  font-size: 40px;

  font-weight: 900;
}


/* =====================================================
   BIG OPTIONS
   ===================================================== */

.options {

  width: 100%;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;
}


.animal-option {

  width: 100%;

  min-height: 220px;

  padding: 15px;

  border: 4px solid white;

  border-radius: 30px;

  background: white;

  box-shadow:
    0 10px 25px
    rgba(60,35,90,0.14);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


.animal-option:active {

  transform:
    scale(0.94);
}


.option-animal {

  font-size: 95px;

  line-height: 1;
}


.option-name {

  font-size: 27px;

  font-weight: 900;

  text-align: center;

  color: #38234f;
}


/* =====================================================
   MESSAGE
   ===================================================== */

.message {

  min-height: 55px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-size: 27px;

  font-weight: 900;

  margin: 15px 0;
}


.message.correct {

  color: #16843c;
}


.message.wrong {

  color: #d82e38;
}


/* =====================================================
   GAME ACTIONS
   ===================================================== */

.game-actions {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 15px;

  margin-top: 18px;
}


.secondary {

  min-height: 65px;

  border: 0;

  border-radius: 40px;

  background: white;

  color: #54366b;

  box-shadow:
    0 8px 22px
    rgba(60,35,90,0.12);

  font-size: 21px;

  font-weight: 900;

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;
}


/* =====================================================
   START SCREEN
   ===================================================== */

.start-screen {

  grid-column:
    1 / -1;

  text-align: center;

  padding:
    25px
    10px
    35px;
}


.start-animals {

  font-size: 60px;

  margin-bottom: 15px;
}


.start-title {

  font-size: 38px;

  font-weight: 900;

  margin-bottom: 10px;
}


.start-screen p {

  font-size: 20px;

  line-height: 1.5;

  margin-bottom: 25px;
}


.play-again {

  min-height: 65px;

  padding:
    10px
    35px;

  border: 0;

  border-radius: 45px;

  background:
    linear-gradient(
      90deg,
      #ff3f79,
      #ff9a43
    );

  color: white;

  font-size: 22px;

  font-weight: 900;

  cursor: pointer;
}


/* =====================================================
   GAME OVER
   ===================================================== */

.game-over {

  grid-column:
    1 / -1;

  text-align: center;

  padding:
    25px;
}


.game-over-icon {

  font-size: 80px;
}


.game-over-title {

  font-size: 38px;

  font-weight: 900;
}


.final-score {

  font-size: 30px;

  font-weight: 900;

  margin: 10px;
}


.final-level {

  font-size: 23px;

  margin-bottom: 25px;
}


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

@media (max-width: 700px) {

  .topbar {

    min-height: 72px;

    padding:
      16px
      18px;
  }


  .brand {

    font-size: 25px;
  }


  .topbar nav {

    display: none;
  }


  .hero {

    min-height:
      calc(100vh - 72px);

    padding:
      25px
      10px
      50px;
  }


  .hero-card {

    padding:
      40px
      18px
      35px;

    border-radius: 32px;
  }


  .hero-label {

    font-size: 14px;

    letter-spacing: 2px;
  }


  .hero h1 {

    font-size: 53px;
  }


  .hero-animals {

    font-size: 45px;

    gap: 5px;
  }


  .hero-text {

    font-size: 19px;

    line-height: 1.5;
  }


  .play-now {

    min-width: 210px;

    min-height: 62px;

    font-size: 22px;
  }


  .hero-stats {

    gap: 15px;

    font-size: 18px;

    flex-direction: column;
  }


  .info-section {

    padding:
      50px
      12px;
  }


  .info-card {

    padding:
      30px
      15px;
  }


  .info-card h2 {

    font-size: 31px;
  }


  .steps {

    grid-template-columns:
      1fr 1fr;

    gap: 12px;
  }


  .step {

    padding: 15px;
  }


  .step-icon {

    font-size: 45px;
  }


  .step h3 {

    font-size: 19px;
  }


  .step p {

    font-size: 14px;
  }


  .animals-section {

    padding:
      10px
      12px
      60px;
  }


  .animals-section h2 {

    font-size: 31px;
  }


  .animal-preview {

    grid-template-columns:
      1fr 1fr;

    gap: 12px;
  }


  .animal-preview div {

    min-height: 130px;

    font-size: 52px;
  }


  .animal-preview span {

    font-size: 17px;
  }


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

  .game-section {

    padding:
      15px
      8px
      50px;
  }


  .game-shell {

    padding:
      20px
      12px
      30px;

    border-radius: 30px;
  }


  .game-head {

    font-size: 19px;

    gap: 4px;
  }


  .target-card {

    min-height: 285px;

    border-radius: 28px;
  }


  .small-label {

    font-size: 16px;

    letter-spacing: 2px;
  }


  .target-animal {

    font-size: 90px;
  }


  .target-name {

    font-size: 34px;
  }


  .options {

    gap: 12px;
  }


  .animal-option {

    min-height: 210px;

    border-radius: 25px;
  }


  .option-animal {

    font-size: 78px;
  }


  .option-name {

    font-size: 23px;
  }


  .message {

    font-size: 23px;
  }


  .secondary {

    min-height: 60px;

    font-size: 18px;
  }

}


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

@media (max-width: 390px) {

  .hero h1 {

    font-size: 47px;
  }


  .hero-animals {

    font-size: 38px;
  }


  .steps {

    grid-template-columns:
      1fr;
  }


  .game-head {

    font-size: 17px;
  }


  .target-animal {

    font-size: 80px;
  }


  .target-name {

    font-size: 30px;
  }


  .animal-option {

    min-height: 190px;
  }


  .option-animal {

    font-size: 68px;
  }


  .option-name {

    font-size: 20px;
  }

}