/* ================================
   style-1.css
   Fully matches your prior layout
   with minimal improvements
   ================================ */

/* Global Reset & Body */
* {
    box-sizing: border-box;
  }
  html, body {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: "Comic Sans MS", Comic Sans, cursive;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    user-select: none;
    /* For large screens, keep the "wood" gradient behind everything */
    background: linear-gradient(90deg, rgb(193, 154, 107), rgb(160, 82, 45), rgb(193, 154, 107));
    /* Original code forced no scrolling:
       max-height: 100vh; overflow: hidden;
       We'll keep them if you truly want, but better to allow scrolling if content overflows.
       If you want to re-lock it, uncomment below:
    */
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  /* Keyframes (unchanged) */
  @keyframes clickUpd {
    0% {
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    40% {
      top: 10%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0.8;
    }
    100% {
      top: 0%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }
  @keyframes particle {
    0% {
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
      opacity: 1;
    }
    20% {
      top: 55%;
      left: 47%;
      transform: translate(-50%, -50%) scale(0.7) rotate(120deg);
      opacity: 0.85;
    }
    40% {
      top: 45%;
      left: 45%;
      transform: translate(-50%, -50%) scale(0.6) rotate(220deg);
      opacity: 0.7;
    }
    60% {
      top: 50%;
      left: 43%;
      transform: translate(-50%, -50%) scale(0.5) rotate(280deg);
      opacity: 0.5;
    }
    80% {
      top: 60%;
      left: 40%;
      transform: translate(-50%, -50%) scale(0.5) rotate(320deg);
      opacity: 0.3;
    }
    100% {
      top: 70%;
      left: 36%;
      transform: translate(-50%, -50%) scale(0.3) rotate(360deg);
      opacity: 0;
    }
  }
  @keyframes particle2 {
    0% {
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
      opacity: 1;
    }
    20% {
      top: 60%;
      left: 53%;
      transform: translate(-50%, -50%) scale(0.7) rotate(100deg);
      opacity: 0.85;
    }
    40% {
      top: 45%;
      left: 56%;
      transform: translate(-50%, -50%) scale(0.6) rotate(200deg);
      opacity: 0.7;
    }
    60% {
      top: 55%;
      left: 58%;
      transform: translate(-50%, -50%) scale(0.6) rotate(260deg);
      opacity: 0.45;
    }
    80% {
      top: 65%;
      left: 68%;
      transform: translate(-50%, -50%) scale(0.5) rotate(340deg);
      opacity: 0.2;
    }
    100% {
      top: 70%;
      left: 75%;
      transform: translate(-50%, -50%) scale(0.3) rotate(420deg);
      opacity: 0;
    }
  }
  @keyframes disappear {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  
  /* Utility classes */
  .clickable {
    cursor: pointer;
    pointer-events: auto;
  }
  .unclickable {
    cursor: not-allowed;
    pointer-events: none;
  }
  .darkFilter {
    filter: brightness(0) blur(3px);
  }
  .lighterFilter {
    filter: brightness(0.7);
  }
  .normalFilter {
    filter: none;
  }
  .design {
    filter: drop-shadow(1px 1px 1px black);
  }
  .divider {
    height: 6px;
    background-image: url(Images/WoodBorder-2.png);
    border: 3px solid saddlebrown;
  }
  .minImgHoldNorm, .minImgHoldSto, .minImgHoldBro, .minImgHoldIro, .minImgHoldGol, .minImgHoldDia, .minImgHoldAme, .minImgHoldAda, .minImgHoldHell {
	width: 10%;
	height: 10%;
	position: absolute;
	z-index: 1;
}
.minImgHoldNorm {
	background: url(Images/AutoClickerCompressed.png);
}
.minImgHoldSto {
	background: url(Images/stone_AutoClickerCompressed.png);
}
.minImgHoldBro {
	background: url(Images/bronze_AutoClickerCompressed.png);
}
.minImgHoldIro {
	background: url(Images/iron_AutoClickerCompressed.png);
}
.minImgHoldGol {
	background: url(Images/gold_AutoClickerCompressed.png);
}
.minImgHoldDia {
	background: url(Images/diamond_AutoClickerCompressed.png);
}
.minImgHoldAme {
	background: url(Images/amethyst_AutoClickerCompressed.png);
}
.minImgHoldAda {
	background: url(Images/adamantium_AutoClickerCompressed.png);
}
.minImgHoldHell {
	background: url(Images/hell_AutoClickerCompressed.png);
}
  
  /* ================================
     Main Layout
     ================================ */
  .holder {
    display: flex;
    flex-wrap: nowrap; /* columns side by side */
    width: 100vw;      /* original used 100vw, keep if you want */
    height: 100vh;     /* original forced full height */
    background: url("Images/cookieBackground2.png");
    background-size: cover;
    background-position: center;
  }
  
  /* Left Column: CookieSection (35% wide) */
  .CookieSection {
    position: relative;
    min-width: calc(35% - 10px);
    max-width: calc(35% - 10px);
    height: 100vh; /* same height as holder */
    display: inline-block;
    background: url("Images/cookieBackground2.png");
    background-size: cover;
    background-position: center;
  }
  
  /* Middle Column: MidSection (35% wide) */
  .MidSection {
    text-align: center;
    top: 0%;
    left: 35%;
    width: 30%;
    height: 100vh;
    border: 12px;
    border-style: solid;
    border-bottom: none;
    border-image: url(Images/WoodBorder-2.png) 30;
    background: url("Images/cookieBackground2.png");
    background-attachment: fixed; /* as your older code had */
    filter: brightness(1.1);
    z-index: 5;
  }
  
  /* Right Column: SectionRight (35% wide) */
  .SectionRight {
    position: absolute;
    width: 35%;
    left: 65%;
    height: 100%;
    cursor: pointer;
    user-select: none;
    background: url("Images/cookieBackground2.png");
    background-size: cover;
    background-position: center;
    border-left: 1vw ridge #a5693d;
    padding: 4px;
    overflow-y: auto; /* so we can scroll in the shop if too tall */
  }
  .SectionRight::-webkit-scrollbar {
    background: rgba(100,100,100,0);
    width: 1vw;
  }
  .SectionRight::-webkit-scrollbar-thumb {
    background: rgba(150,150,150,1);
    border-radius: 1px;
  }
  .SectionRight::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.1);
  }
  /* ================================
     Bakery Name Design
     ================================ */

  #cookieBakeryName {
    width: 50%;
    margin: auto;
  }
  #bakeryName {
    background-color: rgba(200, 200, 200, 0.4);
    border-radius: 4px;
  }
  
  /* ================================
     Cookie Container & Effects
     ================================ */
  .Center {
    margin: 0 auto;
    text-align: center;
  }
  #Cookie {
    z-index: 2;
    transition: all 0.08s cubic-bezier(0.65, 0.05, 0.36, 1);
  }
  #ThingToClick:hover {
    transform: scale(1.05);
  }
  .CookieNumContainer {
    background-color: rgba(200,200,200,0);
    width: 100%;
    position: absolute;
    text-align: center;
    margin: 2vh 0px;
    font-weight: bold;
    text-shadow: 2px 2px 2px black;
    z-index: 3;
  }
  .CookieContainer {
    width: 256px;
    height: 256px;
    /* replaced margin: 50% auto; => margin: 2rem auto; to prevent flicker */
    margin: 12rem auto;
    display: flex; /* keep the cookie centered horizontally within this container */
    transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
    position: relative;
  }
  .CookieContainer > img {
    pointer-events: none;
    user-select: none;
    max-width: 100%;
    max-height: 100%;
    scale: 1.2; /* as your older code had */
    margin: auto; /* center the cookie image within the container */
  }
  /* #ThingToClick {
    border-radius: 100%;
    box-shadow: 0 0 15px 2px #aaa;
  } */
  #AutoHolder {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    animation: rotate 180s linear infinite;
  }
  .cookiesPer {
    visibility: hidden;
    position: absolute;
    z-index: 6;
    top: 15%;
    left: 0;
    width: 100%;
    height: 5vh;
  }
  .cookieParticle {
    visibility: hidden;
    position: absolute;
    z-index: 6;
    top: 50%;
    left: calc(50% - 2vw);
    width: 4vw;
    height: 4vw;
    filter: brightness(0.6);
  }
  
  /* Animations */
  .animateClickAmount {
    animation: clickUpd 0.5s cubic-bezier(0.34, 0.16, 0.38, 0.69);
  }
  .animateParticles {
    animation: particle 0.8s cubic-bezier(0.15, -0.07, 1, 1);
  }
  .animateParticles2 {
    animation: particle2 0.8s cubic-bezier(0.15, -0.07, 1, 1);
  }
  .animateDisappear {
    animation: disappear 4s ease-in;
  }
  
  /* Building Container beneath cookie if needed */
  #BuildingContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: end;
    height: calc(100% - 100px);
    align-content: space-around;
  }
  
  /* ================================
     Middle Section (Updates / Info)
     ================================ */
  #Buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem auto;
  }
  .Button {
    background-color: burlywood;
    cursor: pointer;
    border: none;
    font-size: 16px;
    transition: 0.1s;
    box-shadow: 0 4px #bb996e;
    user-select: none;
    filter: brightness(0.9);
    margin: 0.2rem;
    padding: 0.5rem 1rem;
  }
  .Button:hover {
    filter: brightness(1.1);
  }
  .Button:active {
    transform: translateY(2px);
  }
  
  /* The panels inside MidSection */
  #updSection, #optionsHold, #infoSection {
    background: #222;
    list-style-position: inside;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-height: 60vh;
    padding: 0;
    margin: 3vh 0;
    overflow-y: scroll;
    border: 4px solid #555;
  }
  #updSection > p,
  .updList > li {
    width: 100%;
  }
  .updList {
    list-style-position: inside;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 4px 12px;
  }
  /* === Add this block at the END of your CSS === */
  /* Style the quest board in the middle column */
  .questBoardContainer {
    /* Provide a visible background that complements the wood theme: */
    background: rgba(100, 50, 0, 0.9);
    border: 2px ridge #a5693d;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 1.2rem;
    margin: 2rem auto;
    width: 96%;
    max-height: 50vh; /* optional scrolling if too tall */
    overflow-y: auto;
    text-align: center;
    color: #fff; /* text color stands out */
    text-shadow: 1px 1px 2px #000; /* mild drop-shadow for text */
    box-shadow: 0 0 12px #222; /* slight outer shadow */
  }

  /* If your quest board content includes headings or text, style them here: */
  .questBoardContainer h3, .questBoardContainer h2 {
    margin-top: 0;  
    color: #ffe;    
    padding: 0.4rem;
  }

  /* If your quest board has buttons for 'Start' or similar: */
  .questBoardContainer button {
    background-color: burlywood;
    border: 2px outset darkgoldenrod;
    color: #222;
    cursor: pointer;
    transition: 0.2s;
    margin: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
  }
  .questBoardContainer button:hover {
    filter: brightness(1.1);
  }
  .questBoardContainer button:active {
    transform: translateY(2px);
  }
  /* Remove visible scrollbar track & style the thumb */
  .questBoardContainer::-webkit-scrollbar {
     width: 8px;          /* or desired width */
     background: none;    /* remove default scrollbar track */
  }
  .questBoardContainer::-webkit-scrollbar-thumb {
     background: #444;    /* darker thumb */
     border-radius: 4px;
  }
  .questBoardContainer::-webkit-scrollbar-thumb:hover {
     background: #666;    /* lighter hover effect */
  }

    /* Quest Board Styling */
  .questCard {
    background: rgba(100, 50, 0, 0.9);
    border: 2px solid #a5693d;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 0 12px #222;
    transition: transform 0.3s ease;
  }
  .questCard:hover {
    transform: scale(1.02);
  }
  .questHeader {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .questName {
    width: 100%;
    font-size: 1.2rem;
    color: #ffe;
    margin: 0;
  }
  .questStartBtn {
    background-color: burlywood;
    border: 2px outset darkgoldenrod;
    color: #222;
    cursor: pointer;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
  }
  .questStartBtn:hover {
    background-color: darkkhaki;
  }
  .questDetails {
    font-size: 0.9rem;
    color: #fff;
  }
  .questDescription {
    margin: 0.5rem 0;
  }
  .questProgressText {
    margin: 0.5rem 0;
    font-weight: bold;
  }
  .questProgress {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .progressBar {
    background: #333;
    width: 70%;
    height: 12px;
    margin: auto;
    border-radius: 6px;
    overflow: hidden;
  }
  .progressFill {
    background: #a5693d;
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
  }
  .questTimer {
    font-size: 0.8rem;
    color: #ffe;
  }

  

  .date {
    width: 100%;
    border-top: 4px solid grey;
    border-bottom: 4px solid grey;
    margin: 1vh;
  }
  #baseSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 4px 12px;
  }
  #storySection {
    display: flex;
    margin: 2vh 0;
    background: rgba(150,75,0,0.95);
    text-shadow: 2px 2px 2px #111;
    padding: 8px;
    border: 2px solid #222;
    border-radius: 4px;
    width: 100%;
    justify-content: center;
  }
  #offlineEarned {
    margin: 1rem auto;
    text-align: center;
  }
  #optionsHold, #infoSection {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    margin: 3vh 0;
  }
  #optionsHold::-webkit-scrollbar,
  #updSection::-webkit-scrollbar,
  #infoSection::-webkit-scrollbar {
    background-color: rgba(17,17,17,0.5);
    width: 0.8vw;
  }
  #optionsHold::-webkit-scrollbar-thumb,
  #updSection::-webkit-scrollbar-thumb,
  #infoSection::-webkit-scrollbar-thumb {
    background: rgba(100,100,100,1);
    border-radius: 1px;
  }
  #optionsHold::-webkit-scrollbar-thumb:hover,
  #updSection::-webkit-scrollbar-thumb:hover,
  #infoSection::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.1);
  }
  #statSection > p {
    text-align: center;
    width: 100%;
  }
  #optionSection > p {
    width: 100%;
  }
  #optionSection {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 4px solid #555;
  }
  .numFormat {
    display: flex;
    justify-content: center;
    height: 8vh;
    align-content: space-around;
    flex-wrap: wrap;
  }
  
  /* Shop / Upgrades (Right Column) */
  .UpgradeSection {
    border: darkgray ridge thick;
    padding: 2px;
    max-height: 10vh;
  }
  .ShopNameContainer {
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ShopTitle {
    margin: 0;
  }
  .ShopSection {
    padding: 2px;
    max-height: 80vh;
  }
  .scroll-y {
    overflow-y: scroll;
    min-height: 10vh;
  }
  #ShopContainer {
    max-height: 75vh;
    display: block;
    margin-top: 2vh;
    position: relative;
    transform-style: preserve-3d;
  }
  .shopButtons {
    background: none;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    margin: 4px 0px 0px 0px;
    border-style: solid;
    border-color: #a7a37e;
    position: relative;
    transition: 0.2s;
    text-align: left;
  }
  .shopButtons:hover {
    background-color: #a5693d;
  }
  .shopButtons:active {
    filter: brightness(0.9);
  }
  .shopButtons img {
    height: 64px;
    width: 64px;
    filter: drop-shadow(1px 2px 2px black);
  }
  .shopButtons #GenImg {
    width: 30%;
  }
  .shopButtons #NameAndCost p {
    position: relative;
    margin: 10px;
    width: 100%;
  }
  .shopButtons #NameAndCost p:first-of-type {
    font-size: 24px;
    width: 100%;
    text-shadow: 3px 2px 4px black;
  }
  .shopButtons #AmountOfGen {
    text-align: center;
    padding: 0;
    width: auto;
    text-shadow: 3px 2px 4px black;
  }
  
  /* Tooltip */
  #tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
  }
  #tooltip-text {
    opacity: 1;
    background: linear-gradient(135deg, #8B4513, #654321);
    position: relative;
    visibility: hidden;
    width: 300px;
    max-width: 90vw;
    border: 2px ridge #a5693d;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: opacity 0.2s ease-in-out;
    font-family: "Comic Sans MS", Comic Sans, cursive;
    text-shadow: 1px 1px 2px #000;
  }
  
  #miniCursor {
    max-width: 3vw;
    max-height: 3vh;
    z-index: 6;
  }
  
  /* Upgrades Container */
  #UpgradeContainer {
    max-height: 1000vh;
  }
  #UpgradeContainer img {
    min-height: 64px;
    min-width: 64px;
    max-height: 64px;
    min-width: 64px;
    border-color: #a7a37e;
    border-style: solid;
    filter: brightness(1.05);
    filter: drop-shadow(2px 6px 2px #453326);
    transition: 0.3s;
  }
  #UpgradeContainer img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    background-color: #a5693d;
  }
  
  /* Achievements, Stats, etc. */
  #statSection, #achieveSection {
    width: 100%;
  }
  #achievementContainer {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 80%;
  }
  #achievementContainer > tbody {
    max-width: 25%;
  }
  .Achievements {
    width: 25%;
    height: 25%;
  }
  #achieveImage img {
    max-width: 100%;
    max-height: 100%;
    border: 4px inset gold;
  }
  
  /* Notification bar at bottom of mid column */
  #notification {
    background: linear-gradient(to bottom, #35180d, #561f06);
    position: absolute;
    bottom: 0;
    height: auto;
    min-height: 80px;
    max-height: 120px;
    width: 100%;
    border: 3px ridge #8B4513;
    border-bottom: 0;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  }

  .notifImg {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .notifImg > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
  }

  .notifContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
  }

  .notifTitle {
    margin: 0;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    font-size: 1.1em;
    font-weight: bold;
  }

  .notifTxt {
    margin: 0;
    color: #fff;
    font-size: 0.9em;
    line-height: 1.4;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Add animation for notification appearance */
  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  #notification.show {
    animation: slideUp 0.3s ease-out forwards;
  }

  /* Add animation for notification disappearance */
  @keyframes slideDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  #notification.hide {
    animation: slideDown 0.3s ease-in forwards;
  }
  
  /* Nav links inside MidSection */
  nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem auto;
  }
  nav a {
    color: blue;
    text-decoration: none;
  }
  nav a:hover {
    color: black;
  }
  
  /* Buy options top bar in the right column */
  .buyOptionBackground {
    background: #5c371c;
    border: 2px inset #453326;
    width: 100%;
    height: 1vh;
    margin-top: calc(2vh - 4px);
  }
  .buyOptionText {
    margin: 0;
  }
  .buyOption {
    background: saddlebrown;
    cursor: pointer;
    justify-content: center;
    border: 2px outset darkgoldenrod;
    font-size: 16px;
    transition: 0.1s;
    user-select: none;
    filter: brightness(0.9);
    margin: 0 0.3rem;
    padding: 0.2rem 0.4rem;
  }
  .buyOption:hover {
    filter: brightness(0.7);
  }
  .buyOption:active {
    transform: translateY(1px);
  }
  
  /* Buttons & Option/Data classes */
  .optionButton, .dataButton {
    background-color: #559876;
    border: 1px solid #446754;
    border-radius: 2px;
    box-shadow: 0 2px #446754;
    margin: 0.3rem;
    padding: 0.4rem 0.6rem;
  }
  .optionButton:hover, .dataButton:hover {
    filter: brightness(1.1);
  }
  .optionButton:active, .dataButton:active {
    transform: translateY(2px);
  }
  
  /* Links visited & hovered */
  a:visited {
    color: blue;
  }
  a:hover {
    color: black;
  }

  .on {
    filter: brightness(1.1);
    transform: translate(0, -2px);
  }
  
  /* ================================
     Media Queries (Responsive)
     ================================ */
  @media screen and (max-width: 1024px) {
    /* Let columns stack or become adjustable on smaller screens if desired */
    .holder {
      flex-wrap: wrap;
      height: auto;
    }
    .CookieSection,
    .MidSection,
    .SectionRight {
      position: static !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      border: none !important;
      margin: 0 auto !important;
    }
  }
  
  @media screen and (max-width: 768px) {
    /* Shrink cookie a bit on narrower screens */
    .CookieContainer {
      max-width: 220px;
      max-height: 220px;
      margin: 2rem auto;
    }
    .CookieContainer > img {
      scale: 1; /* remove the extra 1.25 scaling if you want smaller cookie */
    }
    .CookieContainer > .AutoClickHold {
        scale: 0.75;
    }
    .SectionRight {
      font-size: 0.9rem;
    }
  }
  
  @media screen and (max-width: 480px) {
    /* On very narrow phones, reduce text size further if needed */
    .CookieNumContainer p {
      font-size: 4vw;
    }
    .Button {
      font-size: 0.9rem;
      padding: 0.3rem 0.6rem;
    }
    .buyOption {
      font-size: 0.9rem;
    }
  }
  
  /* Add styles for the countdown */
  .questCountdown {
    background: rgba(165, 105, 61, 0.9);
    padding: 10px;
    margin: 10px auto;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    border: 2px solid #8B4513;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(165, 105, 61, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(165, 105, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(165, 105, 61, 0); }
  }