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

      body {
        /* font-family: "Segoe UI", sans-serif; */
        background-image: url(bg1.svg), url(bg2.svg); 
        background-attachment: fixed;
        background-size: 10rem;
        background-repeat: repeat;
        background-position: 0 20px, 60px 50px;
      }

header{
  width: 100%;
  display: inline-block;
  text-align: center;
  top: 0;
  /* z-index: 10;
 position: sticky; */
}
      h1 {
        background-image: linear-gradient(45deg, #FF5656 0%, #fa3325 33%, #ffb23f 66%, #ffff63 100%);
       -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
        font-size: 4rem;
        font-family: "Momo Trust Display", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0.8rem 0;
        overflow: visible;
      }

header .burst-circle {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: burstMove 4s ease-out forwards, fadeOut 5s ease-out forwards;
}

@keyframes burstMove {
  to {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

      h2{
        font-size: 1.3rem;
        font-family: "Montserrat", sans-serif;
        font-style: normal;
        font-weight: 600;
        color: #747474;
        margin: 1rem 0;
        text-shadow: 1px 1px 3px rgba(239, 237, 237, 0.3);
      }

     

/* Hamburger icon */
.hamburger {
  position: absolute;
  width: 30px;
  cursor: pointer;
  display: flex;
  top: 25px;
  right: 20px;
  flex-direction: column;
  gap: 6px;
}

.hamburger span {
  height: 3px;
  background: #000;
  border-radius: 2px;
  transition: 0.3s;
}

.hamburger:hover span{
  background: #646464;
}

/* Dropdown menu */
.drop-menu {
  position: absolute;
 top: 25px;
  right: 55px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  display: none;
  flex-direction: column;
  min-width: 130px;
  overflow: hidden;
  z-index: 1000;
}

.drop-menu a {
  padding: 12px 16px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #000;
  border-bottom: 1px solid #eee;
}

.drop-menu a:last-child {
  border-bottom: none;
}

.drop-menu a:hover {
  background: #f2f2f2;
}

/* Show menu */
.drop-menu.active {
  display: flex;
}

      .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-template-rows: repeat(3, 1fr); /* 3 rows */
        row-gap: 45px; /* gap between tiles */
        column-gap: 190px;
        max-width: 1150px;
        margin: 50px auto; /* center the container */
      }

      .tile {
        position: relative;
        border-radius: 0.5rem;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 325px;
        min-height: 325px;
       /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);*/
        text-align: center;
      }

      .tile:hover {
        box-shadow: 0 3px 12px rgba(30, 156, 175, 0.8);
      }

      /*CSS FOR TRIVIA TILE*/

      .trivia-tile {
        position: relative;
        background-image: url(trivia.svg);
        background-size: cover;
        
      }

      #triviaTitle {
        position: absolute;
        font-family: "Titillium Web", sans-serif;
        font-optical-sizing: auto;
        font-size: 1.4rem;
        font-weight: 700;
        color: #9b4e17;
        top: 15px;
        margin: 0.2rem 0 1rem 0;
        text-align: center;
        width: fit-content;
        align-self: center;
      }
      #triviaTagline {
        font-family: "Titillium Web", sans-serif;
        font-size: 1rem;
        font-weight: 200;
        color: #ffffff;
      }
      .btn-group {
        margin-top: 25px;
        display: flex;
        justify-content: left;
        flex-direction: column;
        gap: 0.8rem;
      }

      .trivia-btn {
        background-color: #cacbcd;
        border: none;
        border-radius: 6px;
        padding: 0.6rem 1.2rem;
        font-family: "Titillium Web", sans-serif;
        color: #000000;
        font-weight: bold;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 140px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        outline: none;
      }
      .trivia-btn:hover {
        background-color: #ffffff;
      }
      .trivia-btn.active {
        background-color: #88c5eb;
      }

      .output.trivia-output {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 100%;
        max-width: 600px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 0.8rem;
        min-width: 90px;
      }

      img.flag {
        margin-left: 105px;
        width: 80px;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      strong {
        color: #0a0a0a;
        font-size: 1.1rem;
      }

      #triviaNote {
        color: #3a3a3a;
        font-weight: bold;
        font-size: 0.8rem;
      }

      #clearTrivia,
      #clearJumble, #clearPixel {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #cacbcd;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
        font-size: 0;
        z-index: 5;
        transition: background-color 0.3s;
      }
      #clearTrivia:hover,
      #clearJumble:hover, #clearPixel:hover {
        background-color: #f4f4f7;
      }

      /*CSS FOR JUMBLE TILE*/

      .wordJumble-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center; /* center children horizontally */
        justify-content: center;
        background-image: url(jumble.svg);
        background-size: cover;
      }

      #jumbleTitle {
        position: absolute;
        top: 15px;
        font-family: "Stack Sans Notch", sans-serif;
        font-size: 1.4rem;
        font-weight: 500;
        color: #edaafa;
        margin: 0.2rem 0 1rem 0;
        text-align: center;
        width: fit-content;
        align-self: center;
      }

      #jumbleTagline {
        display: flex;
        font-family: "Stack Sans Notch", sans-serif;
        font-size: 1rem;
        font-weight: 150;
        color: #bdbdbd;
      }

      #jumble {
        font-size: 1.6rem;
        margin-top: 15px;
        letter-spacing: 4px;
        font-weight: bold;
        color: #000000;
        min-height: 1.5em;
      }

      input {
        padding: 10px;
        width: 200px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #fff;
      }

      #message {
        font-size: 1em;
        margin-top: 6px;
        min-height: 1.5em;
      }

      #streak {
        position: absolute;
        top: 30px;
        left: 10px;
        font-family: "Stack Sans Notch", sans-serif;
        background: rgba(216, 94, 227, 0.2); /* optional: make visible */
        color: #fff;
        padding: 4px 8px; /* just enough space for text */
        border-radius: 4px;
        font-size: 0.9rem;
        width: auto;
        height: auto;
        white-space: nowrap; /* keep it on one line */
      }

      .button-container {
        display: flex;
        justify-content: center; /* puts buttons side by side and centered */
        align-items: center;
        gap: 10px; /* space between buttons */
      }
      .round-btn {
        align-items: center;
        justify-content: center;
        background:  #cacbcd;
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        line-height: 1;
        padding: 0;
        font-size: 0;
        margin: 10px;
        transition: background-color 0.3s;
      }

      .round-btn:hover {
        background-color: #f4f4f7;
      }

      .round-btn svg,
      #jumble svg,
      #message svg {
        width: 16px;
        height: 16px;
        stroke: #222;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .spaceshoot-tile{
      display: block;
      width: 100%;
      height: auto; 
       background-image:url(shoot.svg);
       font-family: "Doto", monospace;
       font-weight: 150;
        display: flex;
        align-items: center;
        justify-content: center;
        
      } 
      .spaceshoot-tile canvas {
        display: block;
        width: 98%;
  height: 95%;
  background: #000000;
        
        image-rendering: pixelated;
      }
      /* .hud {
        position: absolute;
        left: 8px;
        top: 6px;
        color: #fff;
        font-size: 13px;
      }
      .hud span {
        margin-right: 12px;
      } */

      .hud {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  color: #fff;
  font-size: 0.8rem;
  font-family: "Doto", monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  pointer-events: none; /* lets clicks pass through if overlay/game uses mouse */
}

.hud-left, .hud-right, .hud-center {
  flex: 1;
  text-align: center;
}

.hud-left {
  text-align: left;
}

.hud-right {
  text-align: right;
}

.hud-center {
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 0.98rem;
}

           #overlay {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-align: center;
      }
        #overlay button {
        font-family: "Doto", monospace;
        font-weight: bold;  
        margin-top: 8px;
        padding: 6px 10px;
        background: #111;
        color: #fff;
        border: 1px solid #fff;
        cursor: pointer;
      }

      /*CSS FOR PIXEL ART TILE*/

       .pixelArt-tile {
      position: relative;  
      background-image: url(pixel.svg);  
      background-size: cover;
      font-family: Inter, system-ui, sans-serif;  
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      /* box-sizing: border-box;
      padding: 6px;
      border-radius: 8px; */
      
    }

    #pixelTitle {
        position: absolute;
        top: 8px;
        font-family: "Micro 5", sans-serif;
        font-size: 2rem;
        font-weight: 500;
        color: #000000;
        margin: 0.2rem 0 1rem 0;
        text-align: center;
        width: fit-content;
        align-self: center;
      }

    select, button {
      padding: 2px 2px;
      border-radius: 6px;
      border: 1px solid #ccc;
      background: #fafafa;
      cursor: pointer;
      font-size: 10px;
    }

    .icon-btn {
      width: 24px;
      height: 24px;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

   /* .canvas-area {
      position: relative;
      margin: 35px 0 0 40px;
      background: #0a877a; */
      /* display: flex;
      justify-content: center;
      align-items: flex-start; */
      /* gap: 6px;
      width: 95%;
      flex: 1;
    } */

    .grid-root {
      position: absolute;
      width: 100%;
      max-width: 270px;
      aspect-ratio: 1/1;
      top: 40px;
      left: 30px;
      background: #d6d6d6;
      display: flex;
     justify-content: center;
     align-items: center;
      border-radius: 3px;
      /* border: 0.8px #575656; */
    }

    .grid {
      display: grid;
      grid-gap: var(--gap);

      background: var(--grid-line);
      /* padding: 0.08rem; */
      width: 98%;
      height: 98%;
      aspect-ratio: 1/1;
      box-sizing: content-box;
    }

    .cell {
      width: var(--cell-size);
      height: var(--cell-size);
      background: #ffffff;
      cursor: pointer;
    }

   

    .palette {
      position: absolute;
      top: 7.5rem;
      right: 2.5rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* display: flex;
      flex-direction: column; */
      /*justify-content: right; */
      gap: 0.7rem; 
    }

    .swatch {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      border: 1px solid #aaa;
      cursor: pointer;
    }

    .swatch.selected {
      outline: 2px solid #646464;
      transform: scale(1.15);
    }

    #gridSize{
      position: absolute;
      top: 2.8rem;
      right: 1.5rem;
    }

    #export{
      position: absolute;
      top: 5rem;
      right: 1.5rem;
    }

    .new-tile{
      background-color: rgba(227, 225, 225, 0.8);
      font-family: "Montserrat", sans-serif;
      font-size: 1.8rem;
      color: #e125fa;
    }

    .next-tile{
      visibility: hidden;
    }

    .footer{
      /* position: absolute; */
      /* display: inline-block; */
      width: 100%;
      text-align: center;
      font-family: "Montserrat", sans-serif;
      font-size: 0.8rem;
      
    }

/* ABOUT PAGE */
   main {
  margin: 45px auto;
  padding: 20px;
  max-width: 1000px;
  background-color: #f1efef;
  border-radius: 0.5rem;
  box-shadow: 0 3px 12px rgba(30, 156, 175, 0.8);
}

/* Heading */
main h2 {
  font-size: 2.5rem;
  color: #2718ff;
  margin-left: 10px;
}

/* Paragraph */
main p {
  font-size: 1.2rem;
  color: #454545;
  margin-left: 10px;
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  margin-bottom: 15px;
}

#myName{
  text-decoration: underline;
  text-decoration-style:double;
  text-decoration-color: orange;
}
    

      /* MEDIA QUERY */

      @media (max-width: 768px) {
        body {
          padding: 1rem;
        }

        h1 {
          font-size: 2rem;
          margin: 1rem 0;
        }

        h2{
          font-size: 0.9rem;
        }

        main h2 {
  font-size: 1.8rem;
  
}

        /* Stack all tiles vertically */
        .container {
          grid-template-columns: 1fr;
          row-gap: 20px;
          column-gap: 0;
          max-width: 100%;
          margin: 20px auto;
        }

        .tile {
          min-height: 280px;
          padding: 15px;
        }

        /* keep background same look */
        .trivia-tile,
        .wordJumble-tile {
          background-size: cover; /* use cover, not contain */
          background-position: center;
        }

        /* Adjust title position */
        #triviaTitle,
        #jumbleTitle {
          font-size: 1.1rem;
          top: 12px;
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
        }
        #triviaTagline,
        #jumbleTagline {
          font-size: 0.8rem;
          top: 10px;
          left: 50%;
          text-align: center;
          
        }

        /* Buttons centered but still vertical */
        .btn-group {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.6rem;
        }

        .trivia-btn {
          width: 130px;
          font-size: 0.9rem;
          padding: 0.5rem 1rem;
        }

        /* center flag */
        img.flag {
          display: block;
          margin: 10px auto 0 auto; /* auto centers horizontally */
        }

        strong {
        
        font-size: 0.9rem;
      }

      #triviaNote {
        
        font-size: 0.7rem;
      }

        /* streak visible */

        #streak {
          position: absolute;
          top: 10px;
          left: 10px; /* move away from clear button on right */
          right: auto;
          background: rgba(184, 97, 222, 0.25);
          color: #fff;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 0.8rem;
          z-index: 10; /* ensure above everything */
        }

        /* Buttons at bottom of tile */
        .button-container {
          flex-direction: row;
          justify-content: center;
          gap: 8px;
        }

        .round-btn {
          width: 34px;
          height: 34px;
          margin: 5px;
        }

 .grid-root {
     
      max-width: 230px;
    
      aspect-ratio: 1/1;
     
      
    }

    /* .grid {
      
      max-width: 98%;
      aspect-ratio: 1/1;
      
    }  */

       /* .palette {
      position: absolute;
      right: 1.5rem;
      gap: 0.6rem; 
    }

    .swatch {
      width: 1.3em;
      height: 1.3em;
      border-radius: 50%;
      border: 0.8px solid #aaa;
      cursor: pointer;
    } */

    .palette {
      position: absolute;
      top: 7.5rem;
      right: 1.5rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* gap: 0.7rem;  */
    }

    .swatch {
      width: 1.2rem;
      height: 1.2rem;
      /* border-radius: 50%; */
      border: 1px solid #aaa;
      cursor: pointer;
    }

 .new-tile{
     
      font-size: 1.3rem;
      
    }
    
 
      }