/* 1 rem = 10px */
/* html {
  font-size: 62.5%;
}  */

/* 1 rem = 10px */
html {
  font-size: 50%;
} 

@media (max-width: 600px) {
  html {
    font-size: 50%;
  } /* 1 rem ≈ 8.8 px */
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--duck-blue);
}

/* Disable user selection everywhere */
body, * {
  -webkit-user-select: none;  /* Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE10+/Edge */
  user-select: none;          /* Standard */
  -webkit-touch-callout: none; /* Disable tap-hold callout on iOS */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
}

/* Disable drag images on images */
img, svg {
  -webkit-user-drag: none;
-webkit-user-drag: none;
}

:root {
  --duck-christmas-green: #2fa86f;
  --duck-christmas-green-mid: #289060;
  --duck-christmas-green-dark: #227951;
  --duck-christmas-red: #ff595e;
  --duck-blue-light: #cfefff;
  --duck-blue: #b6e9fe;
  --duck-blue2: #91c9e8;
  --duck-blue-shadow: #2972b2;
  --duck-yellow: #ffd166;
  --duck-yellow-light: #ffe699;
  --duck-banana: #ffe26f;
  --duck-banana-light: #ffe8a3;
  --duck-butter: #ffd76f;
  --duck-pink: #ff8fa3;
  --duck-pink-light: #ff97ac;
  --duck-pink-lighter: #ffa8bc;
  --duck-pink-lightest: #ffb9c9;
  --duck-pink-white: #ffd6e2;
  --duck-pink-deep: #e4687d;
  --duck-blush: #ffc2d1;
  --duck-charcoal: #2b2d42;
  --duck-charcoal-light: #434654;
  --duck-light-charcoal: #434654;
  --duck-white: #f4f4f9;
  --duck-white-light: #fafbff;
  --duck-whiter: #e3e4e8;
  --duck-gray: #8d99ae;
  --duck-grey: #8d99ae;
  --duck-gray-light: #AAB3C3;
  --duck-grey-light: #AAB3C3;
  --duck-gray-deep: #5f6b82;
  --duck-grey-deep: #5f6b82;
  --duck-disabled: #c7ccd8;
  --duck-light-gray: #e4e8f1;
  --duck-gray-rgb: 141, 153, 174;
  --duck-mint: #a8e6cf;
  --duck-plum: #6a4c93;
  --duck-orange: #ff9f1c;
  --duck-apricot: #e48b3c;
  --duck-lavender-light: #d8c9f8;
  --duck-lavender: #bfa8f1;
  --duck-lavender-dark: #9d83de;
  --duck-cream: #fff7e6;
  --duck-slate: #495867;
  --duck-teal: #48b8a9;
  --duck-teal-deep: #369b8e;
  --team-blue: #4da3ff;
  --team-red: #ff595e;
  --team-1: #ff595e;
  --team-2: #4da3ff;
  --team-3: #48b8a9;
  --team-4: #6a4c93;
  --team-5: #e48b3c;
  --team-6: #bfa8f1;
  --text-charcoal: #2b2d42;
  --text-white: #f4f4f9;
  --correct-green: #28a745;
  --correct-green-light: #7fd89a;
  --correct-green-deep: #1f8a57;  
  --incorrect-red: #dc3545;
  --incorrect-red-light: #ff8f93;
  --incorrect-red-deep: #c73d50;
  --my-category-green: #1f8a57;

  --reset-btn-light: #ff7f8f;
  --reset-btn-mid: #f04f63;
  --reset-btn-deep: #c73d50;

  --fb-blue: #1877f2;

/* ============================================================ */
/* COWBOY / DESERT THEME */
/* ============================================================ */

--cowboy-sky-0: #9fd8f7;
--cowboy-sky-1: #6fb9e8;

--cowboy-sand-0: #f7e7bf;
--cowboy-sand-1: #e7c98d;
--cowboy-sand-2: #cfa66a;

--cowboy-canyon-0: #f6b3a2;
--cowboy-canyon-1: #e98f7c;
--cowboy-canyon-2: #c96a57;

--cowboy-sun: #ffd166;
--cowboy-hay: #ffe26f;

--cowboy-cactus-0: #7bc7b3;
--cowboy-cactus-1: #4ea18f;

--cowboy-denim-0: #79aee8;
--cowboy-denim-1: #4f84c4;

--cowboy-wood-0: #c98b52;
--cowboy-wood-1: #9f6738;

--cowboy-dust: #f3dcc4;
--cowboy-cream: #fff7e8;
--cowboy-ink: #2b2d42;  

/* ============================================================ */
/* SPACE THEME  */
/* ============================================================ */

--space-bg-0: #1a2452;
--space-bg-1: #3f50bd;
--space-text: #f4f4f9;
--space-moon: #f6d77a;
--space-moon-0: #f3f1ea;
--space-moon-1: #e2ded4;
--space-moon-2: #cfc9bd;
--space-tile-2: #23377a;
--space-tile-3: #2f4aa3;
--space-planet-0: #f4eadb;
--space-planet-1: #e3c8aa;
--space-planet-2: #c58f63;
--space-planet-3: #8a5d41;
--space-mars-0: #f2e5df;
--space-mars-1: #d8a08e;
--space-mars-2: #b35a45;
--space-mars-3: #743529;

/* ============================================================ */
/* PIRATE THEME  */
/* ============================================================ */
--pirate-ocean-0: #1a6f9b;
--pirate-ocean-1: #2a8fb9;

--pirate-ink: #2b2d42;

--pirate-gold: #ffd166;
--pirate-rum: #ff9f1c;


/* ============================================================ */
/* HTML COMMENT BARS  */
/* ============================================================ */

/* <!-- ========================================================== --> */


/* ============================================================ */
/* PAGE BACKGROUND GRADIENTS */
/* ============================================================ */
--page-gradient-1: linear-gradient(180deg, var(--duck-blue) 0%, var(--duck-blue2) 100%);
--page-gradient-2: radial-gradient(circle at top, var(--duck-blue2) 0%, var(--duck-blue) 45%, var(--duck-blue) 100%);
--page-gradient-3: radial-gradient(circle at top left, var(--duck-white) 0%, var(--duck-blue) 38%, var(--duck-blue) 100%);
--page-gradient-4: radial-gradient(circle at center, var(--duck-white) 0%, var(--duck-blue) 55%, var(--duck-blue) 100%);
--page-gradient-5: linear-gradient(135deg, var(--duck-white) 0%, var(--duck-blue) 45%, var(--duck-blue) 100%);

/* ============================================================ */
/* BORDER RADIUS */
/* ============================================================ */
--border-radius-XL: 3.6rem;
--border-radius-L: 2.7rem;
--border-radius-M: 1.8rem;
--border-radius-S: 0.9rem;

/* ============================================================ */
/* SHADOWS */
/* ============================================================ */

--page-title-card-shadow: 0 0.8rem 1.8rem rgba(var(--duck-charcoal-rgb), 0.18),
                          0 0.25rem 0.6rem rgba(var(--duck-charcoal-rgb), 0.12);

--card-div-shadow: 0 0.6rem 0.6rem 0 rgba(var(--duck-charcoal-rgb), 0.2);


--game-card-shadow: 0 0.4rem 0.4rem 0 rgba(44, 62, 80, 0.12), 
0 0.2rem 0.6rem 0 rgba(44, 62, 80, 0.16);

--game-image-shadow: 0 0.4rem 0.4rem 0 rgba(44, 62, 80, 0.12),
0 0.2rem 0.6rem 0 rgba(44, 62, 80, 0.16);


--scoreboard-shadow: 0 0.4rem 0.4rem 0 rgba(44, 62, 80, 0.12),
0 0.2rem 0.6rem 0 rgba(44, 62, 80, 0.16);

--start-game-btn-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);



/* ============================================================ */
/* HOMEPAGE GO BUTTONS */
/* ============================================================ */
--homepage-go-btn-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.2);
--homepages-go-btn-padding-L: 1rem 1.5rem;



/* ============================================================ */
/* GAME GO BUTTONS */
/* ============================================================ */
--go-btn-font-size-L: 2.6rem;
--go-btn-font-weight: 700;

--go-btn-padding-L: 2rem 6rem;
--go-btn-width-L: 25rem;

--go-btn-shadow: 0 0.6rem 0.6rem 0 rgba(var(--duck-charcoal-rgb), 0.3);
--go-btn-shadow-soft: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.2);
--go-btn-shadow-softer: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);



--go-btn-width-S: 20rem;

text-shadow: 0 0.12rem 0.28rem rgba(0,0,0,0.28);

/* --game-card-shadow: 
0 0.4rem 0.4rem 0 rgba(var(--duck-charcoal-rgb), 0.12),
0 0.2rem 0.6rem 0 rgba(var(--duck-charcoal-rgb), 0.16); */

/* ============================================================ */
/* START BTB SIZES */
/* ============================================================ */
--start-btn-width-L: 30rem;
--start-btn-width-S: 20rem;

--start-btn-padding-L: 1.6rem 3rem;
--start-btn-padding-S: 1.2rem 2.5rem;

--start-btn-font-size-L: 2.5rem;
--start-btn-font-size-S: 1.8rem;


/* ============================================================ */
/* INSET TRIM */
/* ============================================================ */
--inset-trim-border: 0.15rem solid rgba(var(--duck-white-rgb), 0.55);
--inset-trim-outline: 0.15rem solid rgba(var(--duck-charcoal-rgb), 0.07);
--inset-offset: -0.8rem;


/* ============================================================ */
/* PAGE HEADER */
/* ============================================================ */
--page-title-card-margin: 2.5rem auto 1rem;
--page-title-card-padding: 1.5rem 2.6rem;

--page-title-font-size-L: 4.4rem;
--page-title-font-weight: 700;
--page-title-width: min(100%, 81rem);
--page-title-width-wider: min(100%, 81rem);

--page-title-font-size-M: clamp(2rem, 4vw, 3rem);
--page-title-font-margin-M: 0 0 1.2rem;

/* ============================================================ */
/* COOKIES CONSENT */
/* ============================================================ */
#duck-cookie-banner {
  position: fixed;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1rem;
  z-index: 99999;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.duck-cookie-banner-inner {
  max-width: 88rem;
  width: 100%;
  background: var(--duck-charcoal);
  color: var(--duck-white);
  border-radius: 2.7rem;
  box-shadow: var(--scoreboard-shadow);
  padding: 1.2rem 1.6rem;
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}

.duck-cookie-banner-inner p {
  margin: 0;
  font-size: 1.3rem;
  font-family: var(--font-main);
  line-height: 1.4;
}

.duck-cookie-banner-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.duck-cookie-banner-actions button {
  font-family: var(--font-main);
  font-size: 1.4rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 1rem 1.6rem;
  cursor: pointer;
}

#duck-cookie-accept {
  background: var(--duck-yellow);
  color: var(--duck-charcoal);
}

#duck-cookie-reject {
  background: var(--duck-disabled);
  color: var(--duck-charcoal);
}

@media (max-width: 700px) {
  .duck-cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .duck-cookie-banner-actions {
    justify-content: center;
  }
}
/* ============================================================ */
/* BUTTON GRADIENTS */
/* ============================================================ */
  --egg-menu-gradient: linear-gradient(
    270deg,
    var(--duck-pink-light) 0%,
    var(--duck-pink) 35%,
    var(--duck-pink-deep) 100%
  );

  --go-btn-gradient: linear-gradient(
    180deg,
    var(--duck-pink-light) 0%,
    var(--duck-pink) 35%,
    var(--duck-pink-deep) 100%
  );

  --stop-btn-gradient: linear-gradient(
    180deg,
    var(--duck-grey-light) 0%,
    var(--duck-grey) 45%,
    var(--duck-grey-deep) 100%
  );

  --minus-btn-gradient: linear-gradient(
    180deg,
    var(--incorrect-red-light) 0%,
    var(--incorrect-red) 45%,
    var(--incorrect-red-deep) 100%
  );

  --add-btn-gradient: linear-gradient(
    180deg,
    var(--correct-green-light) 0%,
    var(--correct-green) 45%,
    var(--correct-green-deep) 100%
  );

  --reset-btn-gradient: linear-gradient(
  180deg,
  var(--reset-btn-light) 0%,
  var(--reset-btn-mid) 45%,
  var(--reset-btn-deep) 100%
);



  /* --duck-modal-shadow-rgb: 43, 45, 66; */
  --duck-banana-rgb: 255, 226, 111;
  --duck-modal-shadow-rgb: 40, 40, 52;
  --duck-blue-rgb: 182, 233, 254;
  --duck-blue2-rgb: 145, 201, 232;
  --duck-blue-shadow-rgb: 41, 114, 178;
  --duck-yellow-rgb: 255, 209, 102;
  --duck-pink-rgb: 255, 143, 163;
  --duck-pink-deep-rgb: 228, 104, 125;
  --duck-charcoal-rgb: 43, 45, 66;
  --duck-light-charcoal-rgb: 67, 70, 84;
  --duck-white-rgb: 244, 244, 249;
  --duck-gray-rgb: 141, 153, 174;
  --duck-light-gray-rgb: 228, 232, 241;
  --duck-mint-rgb: 168, 230, 207;
  --duck-plum-rgb: 106, 76, 147;
  --duck-orange-rgb: 255, 159, 28;
  --duck-apricot-rgb: 228, 139, 60;
  --duck-lavender-rgb: 191, 168, 241;
  --duck-cream-rgb: 255, 247, 230;
  --duck-slate-rgb: 73, 88, 103;
  --duck-teal-rgb: 72, 184, 169;
  --duck-teal-deep-rgb: 54, 155, 142;
  --team-blue-rgb: 77, 163, 255;
  --team-red-rgb: 255, 89, 94;
  --text-charcoal-rgb: 43, 45, 66;
  --text-white-rgb: 244, 244, 249;
  --correct-green-rgb: 40, 167, 69;
  --incorrect-red-rgb: 220, 53, 69;

  --duck-gold: #ffd700;
  --duck-gold-hover: #ffd166;
  --duck-gold-outline: #ffc107;
  --duck-old-gold: #e6b800;
  --duck-deep-gold: #b07d06;
  --duck-dark-gold: #7b5b12;
  --duck-gold-white: #fffbea;
  --duck-gold-charcoal: #2b2d42;

  --duck-gold-rgba: 255, 193, 7;

  --font-main: "Poppins", "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", Arial, Helvetica, sans-serif;

  --size-header: 3.2rem; /* 32 px */
  --size-button: 1.6rem; /* 16 px */
  --size-copy: 1.6rem;
  --size-score: 1.9rem;

  --title-font: "Baloo 2", "Poppins", "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", Arial, Helvetica, sans-serif;
  --title-size: 4rem;
  --title-weight: 900;

  --width-button: 200px;
  --width-mobile-button: 200px;

  /* IPAD FONT SIZES */
  --size-ipad-header: 2rem;
  --size-ipad-button: 1.2rem;
  --size-ipad-copy: 1.6rem;

  /* MOBILE FONT SIZES */
  --size-mobile-header: 1.5rem;
  --size-mobile-button: 1rem;
  --size-mobile-copy: 1rem;
  --size-mobile-header: 1.4rem;
  --size-mobile-banner: 1.6rem;

  /* GO BUTTON */
  --go-font-desktop: 2.6rem;
  --go-font-tablet: 2.4rem;
  --go-font-mobile: 1.6rem;

  --go-width-desktop: 20rem;
  --go-width-tablet: 18rem;
  --go-width-mobile: 14rem;

  --go-padding-desktop: 2rem;
  --go-padding-tablet: 1.6rem;
  --go-padding-mobile: 1.4rem;

  /* GAME ANSWER BUTTONS */
  --answer-mobile-size: 1.4rem;
  --answer-tablet-size: 2rem;
}



@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
         url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
         url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
         url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
         url('../fonts/Poppins-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/Baloo2-Regular.woff2') format('woff2'),
         url('../fonts/Baloo2-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/Baloo2-Medium.woff2') format('woff2'),
         url('../fonts/Baloo2-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/Baloo2-SemiBold.woff2') format('woff2'),
         url('../fonts/Baloo2-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/Baloo2-Bold.woff2') format('woff2'),
         url('../fonts/Baloo2-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/Baloo2-ExtraBold.woff2') format('woff2'),
         url('../fonts/Baloo2-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}