:root {
   font-size: 62.5%;
   --color-primary: hsl(145, 24%, 40%); /* muted moss green */
   --color-secondary: hsl(14, 61%, 75%); /* peachy coral */

   --color-accent: hsl(34, 70%, 65%); /* honey gold for warmth */
   
   --color-font: hsla(0, 0%, 98%, 0.95); /* soft off-white */
   
   --color-shadow: hsla(145, 20%, 20%, 0.4); /* moss-tinted shadow */
   --color-secondary-shadow: hsla(12, 20%, 25%, 0.25); /* blush-tinted shadow */
     
}

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

html, body {
   height: 100%;
   background-color: var(--color-primary);
   font-size: 1.6rem;
   font-family: 'Open Sans', sans-serif;
   
}

p, i, h1 {
   color: var(--color-font)
}

i {
   font-size: 3.2rem;
}

h1 {
   font-size: 3.2rem;
}

/* CONTENT */

section {
   display: flex;
   align-items: center;
   height: 100%;
}

.container {
   width: min(42.5rem, 100%);
   margin-inline: auto;
   padding-inline: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.panel {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   text-align: center;
   width: 25rem;
   margin-block: 5rem;
   padding: 1rem;
   border-radius: 10rem;
   box-shadow: 0px 0px 15px 10px var(--color-shadow);
}

.panel p {
   transition: 1s ease-in;
}

.panel p.active {
   opacity: 1;
   color: var(--color-secondary);
}

.timer {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 30rem;
   height: 30rem;
   border-radius: 50%;
   box-shadow: 0px 0px 15px 10px var(--color-shadow);
}

.circle {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 26rem;
   height: 26rem;
   border-radius: 50%;
   background-color: var(--color-secondary);
   position: relative;
}

.circle::before {
   content: '';
   position: absolute;
   width: 95%;
   height: 95%;
   border-radius: 50%;
   background-color: var(--color-primary);
}

.time {
   position: relative;
   display: flex;
   flex-direction: row;
}

.time p {
   font-size: 5.6rem;
}

.time p:nth-of-type(2) {
    position: relative;
    top: -.5rem;
    margin-inline: 1rem;
}

.controls {
   margin-top: 3rem;
}

.controls button {
   border: none;
   background-color: transparent;
   cursor: pointer;
}

.controls #reset {
   display: none;
}

/* START COUNTDOWN */

#countdown-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

.countdown-content {
   text-align: center;
}

.countdown-number {
   font-size: 12rem;
   font-weight: bold;
   color: var(--color-font);
   transition: all 0.3s ease;
}

.countdown-animate {
   transform: scale(1.2);
   animation: bounce 0.6s ease-in-out;
}

.lockin-animate {
   color: var(--color-secondary);
   animation: pulse 1s ease-in-out;
   font-size: 8rem;
}

@keyframes bounce {
   0%, 20%, 53%, 80%, 100% {
      transform: scale(1);
   }
   40%, 43% {
      transform: scale(1.3);
   }
}

@keyframes pulse {
   0% {
      transform: scale(1);
      opacity: 1;
   }
   50% {
      transform: scale(1.1);
      opacity: 0.8;
   }
   100% {
      transform: scale(1);
      opacity: 1;
   }
}

/* INFO */

.info {
   position: relative;
   cursor: help;
 }
 
 .info::after {
   content: attr(data-info);
   position: absolute;
   bottom: 220%; /* above text */
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--color-primay);
   color: var(--color-font);
   padding: 6px 10px;
   border-radius: 8px;
   white-space: nowrap;
   font-size: 1rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
   /* box-shadow: 0 4px 8px var(--color-secondary-shadow); */
 }
 
 .info:hover::after {
   opacity: 1;
 }

 /* CHARACHTER */

 #tipCharacter {
   position: fixed;
   top: -100px; /* start off-screen */
   right: 20px;
   width: 180px;
   text-align: center;
   opacity: 0;
   transition: top 0.6s ease, opacity 0.6s ease;
   z-index: 1000; /* stay on top */
   padding-bottom: 0;
}

#tipCharacter.show {
   opacity: 1;
   top: -15px; /* final visible position, adjust as you like */
}
 
 #tipCharacter img {
   width: 60%;
   max-width: 120px;
   rotate: 180deg;;
 }

 .speech-bubble {
   position: relative;
   background: var(--color-secondary, #fff);
   border-radius: 8px;
   padding: 10px 15px;
   margin-top: 10px;
   color: var(--color-font, #000);
   font-size: 1rem;
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
   right: 35%;
   top: -50px;
 }
 
/* Triangle pointer - upside down */
.speech-bubble::after {
   content: '';
   position: absolute;
   bottom: 100%; /* place it above the bubble */
   right: 20px;
   border-width: 8px;
   border-style: solid;
   border-color: transparent transparent var(--color-secondary, #fff) transparent;
}