/* =========================================================
   PUT 'EM IN ORDER
   GAME DEV — COMPLETE VISUAL SYSTEM
   FILE: game-dev.CSS
   VERSION: 1.3

   GAME DEV ONLY
   Everything stays scoped inside #gd-game.
========================================================= */


/* =========================================================
   ROOT
========================================================= */

#gd-game {
  --gd-bg: #07101f;
  --gd-bg-2: #101d38;

  --gd-surface: #151c36;
  --gd-surface-2: #1d2a4a;
  --gd-card: #27375f;

  --gd-text: #ffffff;
  --gd-muted: #b9c5db;

  --gd-accent: #8c79ff;
  --gd-accent-2: #46b8ff;
  --gd-accent-3: #ff6fcf;

  --gd-green: #53e7a6;
  --gd-yellow: #ffd75d;
  --gd-orange: #ff9a4d;
  --gd-red: #ff667b;

  --gd-border: rgba(255, 255, 255, 0.12);
  --gd-border-strong: rgba(255, 255, 255, 0.22);

  --gd-shadow:
    0 22px 60px rgba(0, 0, 0, 0.38);

  --gd-shadow-soft:
    0 12px 30px rgba(0, 0, 0, 0.25);

  position: relative;

  left: 50%;

  width: 100vw;
  max-width: none;

  margin-left: -50vw;

  min-height: 100svh;

  overflow: hidden;

  color: var(--gd-text);

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(120, 100, 255, 0.28),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(70, 184, 255, 0.18),
      transparent 33%
    ),
    radial-gradient(
      circle at 50% 70%,
      rgba(255, 111, 207, 0.07),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #12203c 0%,
      #091326 48%,
      #050b16 100%
    );

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  isolation: isolate;
}


#gd-game *,
#gd-game *::before,
#gd-game *::after {
  box-sizing: border-box;
}


#gd-game button {
  font: inherit;

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


#gd-game button,
#gd-game [role="button"] {
  touch-action: manipulation;
}


/* =========================================================
   ROUND THEMES
========================================================= */

#gd-game.gd-theme-cinemaPurple {
  --gd-surface: #17152d;
  --gd-surface-2: #242044;
  --gd-card: #2d2852;

  --gd-accent: #b78cff;
  --gd-accent-2: #6f7cff;
  --gd-accent-3: #ff73ce;
}


#gd-game.gd-theme-snackRush {
  --gd-surface: #27150f;
  --gd-surface-2: #3b2117;
  --gd-card: #4a2a1d;

  --gd-accent: #ffb14a;
  --gd-accent-2: #ff6b62;
  --gd-accent-3: #ffd95a;
}


#gd-game.gd-theme-electricBlue {
  --gd-surface: #0b1730;
  --gd-surface-2: #13274b;
  --gd-card: #17345e;

  --gd-accent: #54c8ff;
  --gd-accent-2: #557cff;
  --gd-accent-3: #71efff;
}


#gd-game.gd-theme-neonTV {
  --gd-surface: #1e1029;
  --gd-surface-2: #321742;
  --gd-card: #45205a;

  --gd-accent: #ff6fd8;
  --gd-accent-2: #8d6cff;
  --gd-accent-3: #4ce6ff;
}


#gd-game.gd-theme-arcadeGreen {
  --gd-surface: #0d201a;
  --gd-surface-2: #13342a;
  --gd-card: #184536;

  --gd-accent: #55f2a7;
  --gd-accent-2: #35c7ff;
  --gd-accent-3: #d7ff64;
}


#gd-game.gd-theme-historyGold {
  --gd-surface: #241c10;
  --gd-surface-2: #362a17;
  --gd-card: #49391f;

  --gd-accent: #ffd269;
  --gd-accent-2: #c99245;
  --gd-accent-3: #fff0a8;
}


#gd-game.gd-theme-cosmicNavy {
  --gd-surface: #090f28;
  --gd-surface-2: #111a3e;
  --gd-card: #19244f;

  --gd-accent: #8ed5ff;
  --gd-accent-2: #9d7dff;
  --gd-accent-3: #ff7be8;
}


#gd-game.gd-theme-worldGreen {
  --gd-surface: #0d211c;
  --gd-surface-2: #14362d;
  --gd-card: #19483b;

  --gd-accent: #61e7a5;
  --gd-accent-2: #4fb8ff;
  --gd-accent-3: #e0e95c;
}


#gd-game.gd-theme-brainCoral {
  --gd-surface: #291413;
  --gd-surface-2: #3f1d1b;
  --gd-card: #552723;

  --gd-accent: #ff8678;
  --gd-accent-2: #ffca55;
  --gd-accent-3: #ff6fb1;
}


#gd-game.gd-theme-crownNight {
  --gd-surface: #171327;
  --gd-surface-2: #282044;
  --gd-card: #352a59;

  --gd-accent: #ffe26b;
  --gd-accent-2: #b991ff;
  --gd-accent-3: #ff76d3;
}


/* =========================================================
   APP BACKGROUND ENERGY
========================================================= */

#gd-game .gd-bg-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.065;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px
    );

  background-size:
    44px 44px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 80%
    );
}


#gd-game .gd-bg-orb {
  position: absolute;

  pointer-events: none;

  border-radius: 999px;

  filter: blur(5px);

  opacity: 0.72;
}


#gd-game .gd-bg-orb--one {
  width: 280px;
  height: 280px;

  top: 70px;
  left: -150px;

  background:
    rgba(125, 100, 255, 0.19);

  animation:
    gdOrbOne
    9s
    ease-in-out
    infinite;
}


#gd-game .gd-bg-orb--two {
  width: 320px;
  height: 320px;

  top: 450px;
  right: -185px;

  background:
    rgba(65, 185, 255, 0.14);

  animation:
    gdOrbTwo
    11s
    ease-in-out
    infinite;
}


/* =========================================================
   APP SHELL
========================================================= */

#gd-game .gd-shell {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      780px
    );

  margin:
    0 auto;

  padding:
    max(
      15px,
      env(safe-area-inset-top)
    )
    max(
      13px,
      env(safe-area-inset-right)
    )
    calc(
      34px +
      env(safe-area-inset-bottom)
    )
    max(
      13px,
      env(safe-area-inset-left)
    );
}


/* =========================================================
   TOP BAR
========================================================= */

#gd-game .gd-topbar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 15px;
}


#gd-game .gd-brand {
  min-width: 0;
}


#gd-game .gd-brand-eyebrow {
  margin:
    0 0 3px;

  color:
    var(--gd-accent);

  font-size: 9px;

  line-height: 1;

  font-weight: 950;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


#gd-game .gd-brand-name {
  margin: 0;

  color: #fff;

  font-size:
    clamp(
      22px,
      6vw,
      34px
    );

  line-height: 0.98;

  font-weight: 1000;

  letter-spacing:
    -0.045em;
}


#gd-game .gd-brand-name span {
  color:
    var(--gd-accent);
}


#gd-game .gd-top-actions {
  display: flex;

  align-items: center;

  gap: 8px;

  flex: 0 0 auto;
}


/* =========================================================
   TOP WALLET + SOUND
========================================================= */

#gd-game .gd-wallet-btn,
#gd-game .gd-audio-btn,
#gd-game .gd-icon-btn {
  min-height: 48px;

  border:
    1px solid
    var(--gd-border);

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

  color: #fff;

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      0.06
    );

  cursor: pointer;
}


#gd-game .gd-wallet-btn {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 66px;

  padding:
    7px 10px;

  border-radius:
    16px;

  font-size:
    12px;

  font-weight:
    950;
}


#gd-game .gd-wallet-btn strong {
  color:
    var(--gd-yellow);
}


#gd-game .gd-audio-btn,
#gd-game .gd-icon-btn {
  display: grid;

  place-items: center;

  min-width: 48px;

  padding: 0;

  border-radius:
    16px;

  font-size:
    20px;
}


#gd-game .gd-wallet-btn:active,
#gd-game .gd-audio-btn:active,
#gd-game .gd-icon-btn:active {
  transform:
    scale(0.95);
}


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

#gd-game .gd-home {
  position: relative;

  overflow: hidden;

  padding:
    18px 13px 16px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    29px;

  background:
    linear-gradient(
      155deg,
      rgba(
        37,
        49,
        89,
        0.97
      ),
      rgba(
        15,
        23,
        47,
        0.98
      )
    );

  box-shadow:
    var(--gd-shadow);
}


#gd-game .gd-home::before {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  top: -120px;
  right: -100px;

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(
        140,
        121,
        255,
        0.22
      ),
      transparent 70%
    );

  pointer-events: none;
}


#gd-game .gd-home-hero {
  position: relative;

  z-index: 1;

  text-align: center;
}


#gd-game .gd-home-burst {
  display: grid;

  place-items: center;

  width: 86px;
  height: 86px;

  margin:
    4px auto 12px;

  border-radius:
    27px;

  background:
    linear-gradient(
      145deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  box-shadow:
    0
    16px
    36px
    rgba(
      91,
      112,
      255,
      0.34
    );

  color:
    #07101a;

  font-size:
    41px;

  animation:
    gdHeroPulse
    2.4s
    ease-in-out
    infinite;
}


#gd-game .gd-home-kicker {
  margin:
    0 0 5px;

  color:
    var(--gd-accent);

  font-size:
    9px;

  font-weight:
    950;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


#gd-game .gd-home-title {
  margin: 0;

  color: #fff;

  font-size:
    clamp(
      31px,
      9vw,
      49px
    );

  line-height:
    0.93;

  font-weight:
    1000;

  letter-spacing:
    -0.055em;
}


#gd-game .gd-home-subtitle {
  max-width:
    440px;

  margin:
    10px auto 0;

  color:
    var(--gd-muted);

  font-size:
    14px;

  line-height:
    1.4;

  font-weight:
    700;
}


/* =========================================================
   HOME STATS
========================================================= */

#gd-game .gd-home-stats {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;

  margin-top:
    17px;
}


#gd-game .gd-home-stat {
  min-width: 0;

  min-height: 80px;

  padding:
    10px 6px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    18px;

  background:
    linear-gradient(
      160deg,
      rgba(
        255,
        255,
        255,
        0.09
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );

  text-align: center;
}


#gd-game .gd-home-stat-icon {
  display: block;

  margin-bottom:
    5px;

  font-size:
    22px;

  line-height: 1;
}


#gd-game .gd-home-stat-value {
  display: block;

  color: #fff;

  font-size:
    20px;

  line-height: 1;

  font-weight:
    1000;
}


#gd-game .gd-home-stat-label {
  display: block;

  margin-top:
    5px;

  color:
    var(--gd-muted);

  font-size:
    8px;

  line-height:
    1.1;

  font-weight:
    900;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


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

#gd-game .gd-home-play {
  width: 100%;

  min-height: 64px;

  margin-top:
    14px;

  padding:
    15px 18px;

  border: 0;

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      #a494ff,
      #66d4ff
    );

  color:
    #07101a;

  box-shadow:
    0
    16px
    34px
    rgba(
      86,
      141,
      255,
      0.28
    );

  font-size:
    19px;

  font-weight:
    1000;

  letter-spacing:
    0.025em;

  cursor: pointer;
}


#gd-game .gd-home-play:active {
  transform:
    scale(0.985);
}


/* =========================================================
   TODAY / COLLECTION QUICK CARDS
========================================================= */

#gd-game .gd-home-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;

  margin-top:
    10px;
}


#gd-game .gd-home-action {
  min-height: 98px;

  padding:
    12px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    19px;

  background:
    linear-gradient(
      150deg,
      rgba(
        255,
        255,
        255,
        0.08
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );

  color: #fff;

  text-align: left;

  cursor: pointer;
}


#gd-game .gd-home-action:active {
  transform:
    scale(0.98);
}


#gd-game .gd-home-action-icon {
  display: block;

  margin-bottom:
    7px;

  font-size:
    26px;
}


#gd-game .gd-home-action-title {
  display: block;

  font-size:
    12px;

  font-weight:
    950;
}


#gd-game .gd-home-action-copy {
  display: block;

  margin-top:
    4px;

  color:
    var(--gd-muted);

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    700;
}


/* =========================================================
   HOME SECTIONS
========================================================= */

#gd-game .gd-home-section {
  margin-top:
    16px;
}


#gd-game .gd-section-head {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 10px;

  margin-bottom:
    8px;
}


#gd-game .gd-section-title-wrap {
  min-width: 0;
}


#gd-game .gd-section-kicker {
  margin:
    0 0 2px;

  color:
    var(--gd-accent);

  font-size:
    8px;

  line-height: 1;

  font-weight:
    950;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


#gd-game .gd-section-title {
  margin: 0;

  color: #fff;

  font-size:
    17px;

  line-height:
    1.05;

  font-weight:
    1000;
}


#gd-game .gd-section-subtitle {
  margin:
    4px 0 0;

  color:
    var(--gd-muted);

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    650;
}


/* =========================================================
   REWARD ROAD
========================================================= */

#gd-game .gd-reward-road {
  position: relative;

  overflow: hidden;

  padding:
    13px 12px 14px;

  border:
    1px solid
    rgba(
      255,
      215,
      93,
      0.18
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      160deg,
      rgba(
        255,
        214,
        92,
        0.08
      ),
      rgba(
        151,
        117,
        255,
        0.08
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );
}


#gd-game .gd-reward-road-scroll {
  display: flex;

  gap: 9px;

  overflow-x: auto;

  padding:
    2px 2px 8px;

  scroll-snap-type:
    x mandatory;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


#gd-game .gd-reward-road-scroll::-webkit-scrollbar {
  display: none;
}


#gd-game .gd-reward-node {
  position: relative;

  flex:
    0 0
    132px;

  min-height:
    139px;

  scroll-snap-align:
    start;

  overflow: hidden;

  padding:
    11px 9px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    18px;

  background:
    linear-gradient(
      160deg,
      rgba(
        255,
        255,
        255,
        0.10
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );

  text-align: center;
}


#gd-game .gd-reward-node.is-earned {
  border-color:
    rgba(
      83,
      231,
      166,
      0.40
    );

  background:
    linear-gradient(
      160deg,
      rgba(
        83,
        231,
        166,
        0.15
      ),
      rgba(
        255,
        255,
        255,
        0.05
      )
    );
}


#gd-game .gd-reward-node.is-next {
  border-color:
    rgba(
      255,
      215,
      93,
      0.46
    );

  box-shadow:
    0
    0
    0
    2px
    rgba(
      255,
      215,
      93,
      0.07
    );
}


#gd-game .gd-reward-node.is-locked::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(
        15,
        22,
        45,
        0.12
      ),
      rgba(
        15,
        22,
        45,
        0.34
      )
    );

  backdrop-filter:
    blur(1.6px);

  pointer-events: none;
}


#gd-game .gd-reward-node-content {
  position: relative;

  z-index: 2;
}


#gd-game .gd-reward-node-lock {
  position: absolute;

  z-index: 3;

  top: 6px;
  right: 7px;

  font-size:
    13px;
}


#gd-game .gd-reward-node-icon {
  display: block;

  margin:
    4px 0 8px;

  font-size:
    35px;

  line-height: 1;
}


#gd-game .gd-reward-node-title {
  display: block;

  color: #fff;

  font-size:
    11px;

  line-height:
    1.1;

  font-weight:
    950;
}


#gd-game .gd-reward-node-level {
  display: block;

  margin-top:
    5px;

  color:
    var(--gd-yellow);

  font-size:
    9px;

  font-weight:
    900;
}


#gd-game .gd-reward-node-copy {
  display: block;

  margin-top:
    4px;

  color:
    var(--gd-muted);

  font-size:
    8px;

  line-height:
    1.25;
}


/* =========================================================
   REWARD ROAD PROGRESS
========================================================= */

#gd-game .gd-road-progress {
  margin-top:
    10px;
}


#gd-game .gd-road-progress-meta {
  display: flex;

  justify-content:
    space-between;

  gap: 8px;

  margin-bottom:
    6px;

  color:
    var(--gd-muted);

  font-size:
    9px;

  font-weight:
    800;
}


#gd-game .gd-road-track {
  height: 8px;

  overflow: hidden;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


#gd-game .gd-road-fill {
  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--gd-yellow),
      var(--gd-orange),
      var(--gd-accent)
    );

  box-shadow:
    0
    0
    16px
    rgba(
      255,
      211,
      80,
      0.20
    );
}


/* =========================================================
   BONUS PACKS
========================================================= */

#gd-game .gd-bonus-shelf {
  padding:
    13px 12px 14px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    22px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}


#gd-game .gd-bonus-scroll {
  display: flex;

  gap: 10px;

  overflow-x: auto;

  padding:
    2px 2px 8px;

  scroll-snap-type:
    x mandatory;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


#gd-game .gd-bonus-scroll::-webkit-scrollbar {
  display: none;
}


#gd-game .gd-bonus-pack {
  position: relative;

  flex:
    0 0
    176px;

  min-height:
    188px;

  overflow: hidden;

  scroll-snap-align:
    start;

  padding:
    13px 12px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    20px;

  background:
    linear-gradient(
      155deg,
      rgba(
        255,
        255,
        255,
        0.11
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );
}


#gd-game .gd-bonus-pack::before {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  top: -56px;
  right: -45px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.075
    );
}


#gd-game .gd-bonus-pack-icon {
  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom:
    12px;

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  color:
    #07101a;

  font-size:
    27px;
}


#gd-game .gd-bonus-pack-title {
  position: relative;

  z-index: 1;

  display: block;

  color: #fff;

  font-size:
    14px;

  line-height:
    1.08;

  font-weight:
    1000;
}


#gd-game .gd-bonus-pack-count {
  position: relative;

  z-index: 1;

  display: inline-block;

  margin-top:
    6px;

  padding:
    4px 7px;

  border-radius:
    999px;

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

  color:
    var(--gd-muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.06em;
}


#gd-game .gd-bonus-pack-bottom {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 8px;

  margin-top:
    16px;
}


#gd-game .gd-bonus-pack-price {
  color:
    var(--gd-yellow);

  font-size:
    15px;

  font-weight:
    1000;
}


#gd-game .gd-bonus-pack-lock {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 34px;

  padding:
    6px 9px;

  border-radius:
    11px;

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

  color: #fff;

  font-size:
    9px;

  font-weight:
    950;
}


#gd-game .gd-bonus-pack.is-owned {
  border-color:
    rgba(
      83,
      231,
      166,
      0.40
    );
}


#gd-game .gd-bonus-pack.is-owned .gd-bonus-pack-lock {
  background:
    rgba(
      83,
      231,
      166,
      0.15
    );

  color:
    #9dffd0;
}


/* =========================================================
   MY COLLECTION PREVIEW
========================================================= */

#gd-game .gd-collection-preview {
  padding:
    13px 12px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    22px;

  background:
    linear-gradient(
      150deg,
      rgba(
        255,
        255,
        255,
        0.07
      ),
      rgba(
        255,
        255,
        255,
        0.03
      )
    );
}


#gd-game .gd-collection-preview-row {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;

  margin-top:
    10px;
}


#gd-game .gd-mini-trophy {
  position: relative;

  min-width: 0;

  padding:
    9px 4px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    15px;

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

  text-align: center;
}


#gd-game .gd-mini-trophy.is-locked {
  opacity:
    0.45;

  filter:
    grayscale(
      0.55
    );
}


#gd-game .gd-mini-trophy-icon {
  display: block;

  font-size:
    23px;

  line-height: 1;
}


#gd-game .gd-mini-trophy-title {
  display: block;

  margin-top:
    5px;

  overflow: hidden;

  color: #fff;

  font-size:
    7px;

  line-height:
    1.15;

  font-weight:
    900;

  text-overflow:
    ellipsis;
}


/* =========================================================
   SAVE GAME TO PHONE — HOME SECTION
========================================================= */

#gd-game .gd-save-card {
  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    13px 12px;

  border:
    1px solid
    rgba(
      70,
      184,
      255,
      0.18
    );

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(
        70,
        184,
        255,
        0.08
      ),
      rgba(
        140,
        121,
        255,
        0.06
      )
    );
}


#gd-game .gd-save-icon {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 48px;
  height: 48px;

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  color:
    #07101a;

  font-size:
    25px;
}


#gd-game .gd-save-copy {
  min-width: 0;

  flex: 1;
}


#gd-game .gd-save-title {
  display: block;

  color: #fff;

  font-size:
    12px;

  font-weight:
    950;
}


#gd-game .gd-save-subtitle {
  display: block;

  margin-top:
    3px;

  color:
    var(--gd-muted);

  font-size:
    9px;

  line-height:
    1.3;
}


#gd-game .gd-save-button {
  flex:
    0 0 auto;

  min-height: 44px;

  padding:
    8px 10px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    13px;

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

  color: #fff;

  font-size:
    9px;

  font-weight:
    950;

  cursor: pointer;
}


/* =========================================================
   NEXT UNLOCK
========================================================= */

#gd-game .gd-next-unlock {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top:
    11px;

  padding:
    11px 12px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    16px;

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );
}


#gd-game .gd-next-unlock-icon {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  border-radius:
    14px;

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

  font-size:
    24px;
}


#gd-game .gd-next-unlock-copy {
  min-width: 0;

  flex: 1;
}


#gd-game .gd-next-unlock-title {
  display: block;

  color: #fff;

  font-size:
    12px;

  font-weight:
    900;
}


#gd-game .gd-next-unlock-subtitle {
  display: block;

  margin-top:
    2px;

  color:
    var(--gd-muted);

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    700;
}


/* =========================================================
   GAME STATUS
========================================================= */

#gd-game .gd-status-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;

  margin-bottom:
    12px;
}


#gd-game .gd-stat {
  min-height:
    76px;

  padding:
    10px 8px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.09
      ),
      rgba(
        255,
        255,
        255,
        0.025
      )
    );
}


#gd-game .gd-stat-label {
  display: block;

  margin-bottom:
    5px;

  color:
    var(--gd-muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


#gd-game .gd-stat-value {
  display: flex;

  align-items: center;

  gap: 4px;

  color: #fff;

  font-size:
    20px;

  line-height: 1;

  font-weight:
    1000;
}


#gd-game .gd-stat--streak {
  border-color:
    rgba(
      255,
      146,
      72,
      0.30
    );
}


#gd-game .gd-flame {
  display: inline-block;

  transform-origin:
    50%
    80%;

  animation:
    gdFlame
    1.3s
    ease-in-out
    infinite;
}


/* =========================================================
   XP
========================================================= */

#gd-game .gd-xp-wrap {
  margin:
    -2px 0 14px;
}


#gd-game .gd-xp-meta {
  display: flex;

  justify-content:
    space-between;

  gap: 10px;

  margin-bottom:
    6px;

  color:
    var(--gd-muted);

  font-size:
    9px;

  font-weight:
    750;
}


#gd-game .gd-progress-track {
  width: 100%;
  height: 9px;

  overflow: hidden;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


#gd-game .gd-progress-fill {
  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  transition:
    width
    500ms
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );
}


/* =========================================================
   DAILY CARD
========================================================= */

#gd-game .gd-daily-card {
  margin-bottom:
    13px;

  padding:
    13px;

  border:
    1px solid
    rgba(
      255,
      215,
      90,
      0.30
    );

  border-radius:
    20px;

  background:
    linear-gradient(
      120deg,
      rgba(
        255,
        215,
        90,
        0.12
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );
}


#gd-game .gd-daily-row {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;
}


#gd-game .gd-daily-kicker {
  margin:
    0 0 3px;

  color:
    var(--gd-yellow);

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    0.11em;
}


#gd-game .gd-daily-title {
  margin: 0;

  color: #fff;

  font-size:
    12px;

  line-height:
    1.25;

  font-weight:
    900;
}


#gd-game .gd-daily-status {
  flex: 0 0 auto;

  min-height:
    34px;

  display: inline-flex;

  align-items: center;

  padding:
    6px 9px;

  border-radius:
    999px;

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

  color: #fff;

  font-size:
    8px;

  font-weight:
    950;
}


/* =========================================================
   GAME PANEL
========================================================= */

#gd-game .gd-game-panel {
  position: relative;

  overflow: hidden;

  padding:
    18px 12px 15px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    28px;

  background:
    linear-gradient(
      180deg,
      var(--gd-surface-2),
      var(--gd-surface)
    );

  box-shadow:
    var(--gd-shadow);
}


#gd-game .gd-round-top {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  margin-bottom:
    8px;
}


#gd-game .gd-kicker {
  color:
    var(--gd-accent);

  font-size:
    9px;

  font-weight:
    950;

  letter-spacing:
    0.07em;
}


#gd-game .gd-round-number {
  flex: 0 0 auto;

  min-height:
    30px;

  display: inline-flex;

  align-items: center;

  padding:
    5px 8px;

  border-radius:
    999px;

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

  color:
    var(--gd-muted);

  font-size:
    8px;

  font-weight:
    900;
}


#gd-game .gd-question {
  margin:
    0 0 7px;

  color: #fff;

  font-size:
    clamp(
      24px,
      7vw,
      34px
    );

  line-height:
    1.02;

  font-weight:
    1000;

  letter-spacing:
    -0.04em;
}


#gd-game .gd-instruction {
  margin:
    0 0 14px;

  color:
    var(--gd-muted);

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    650;
}


#gd-game .gd-instruction strong {
  color: #fff;
}


#gd-game .gd-round-strip {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  margin-bottom:
    11px;

  padding:
    9px 10px;

  border-radius:
    14px;

  background:
    rgba(
      0,
      0,
      0,
      0.17
    );

  color:
    var(--gd-muted);

  font-size:
    9px;

  font-weight:
    900;
}


/* =========================================================
   SORT CARDS
========================================================= */

#gd-game .gd-sort-list {
  display: grid;

  gap: 9px;

  margin:
    0 0 14px;

  padding: 0;

  touch-action:
    pan-y;
}


#gd-game .gd-item {
  display: grid;

  grid-template-columns:
    44px
    minmax(
      0,
      1fr
    )
    31px;

  align-items: center;

  gap: 9px;

  width: 100%;

  min-height:
    76px;

  padding:
    10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      var(--gd-card),
      rgba(
        17,
        26,
        53,
        0.88
      )
    );

  box-shadow:
    var(--gd-shadow-soft);

  color: #fff;

  cursor: pointer;

  user-select: none;
}


#gd-game .gd-item:active {
  transform:
    scale(0.985);
}


#gd-game .gd-item[aria-pressed="true"] {
  border-color:
    var(--gd-yellow);

  box-shadow:
    0
    0
    0
    2px
    rgba(
      255,
      215,
      90,
      0.13
    ),
    var(--gd-shadow-soft);
}


#gd-game .gd-item.is-correct {
  border-color:
    rgba(
      83,
      231,
      166,
      0.72
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        83,
        231,
        166,
        0.18
      ),
      rgba(
        83,
        231,
        166,
        0.06
      )
    );
}


#gd-game .gd-item.is-wrong {
  border-color:
    rgba(
      255,
      102,
      123,
      0.70
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        102,
        123,
        0.17
      ),
      rgba(
        255,
        102,
        123,
        0.06
      )
    );
}


#gd-game .gd-item-position {
  display: grid;

  place-items: center;

  width: 40px;
  height: 40px;

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  color:
    #07101a;

  font-size:
    20px;

  font-weight:
    1000;
}


#gd-game .gd-item-copy {
  min-width: 0;
}


#gd-game .gd-item-title {
  display: block;

  color: #fff;

  font-size:
    15px;

  line-height:
    1.18;

  font-weight:
    900;
}


#gd-game .gd-item-subtitle {
  display: block;

  margin-top:
    3px;

  color:
    var(--gd-muted);

  font-size:
    9px;

  line-height:
    1.25;
}


#gd-game .gd-grip {
  display: grid;

  place-items: center;

  min-height:
    42px;

  color:
    rgba(
      255,
      255,
      255,
      0.42
    );

  font-size:
    20px;
}


/* =========================================================
   BUTTONS
========================================================= */

#gd-game .gd-actions {
  display: grid;

  grid-template-columns:
    1fr;

  gap: 9px;
}


#gd-game .gd-btn {
  width: 100%;

  min-height:
    56px;

  padding:
    13px 16px;

  border: 0;

  border-radius:
    17px;

  font-size:
    14px;

  line-height: 1;

  font-weight:
    1000;

  cursor: pointer;
}


#gd-game .gd-btn:active {
  transform:
    scale(0.985);
}


#gd-game .gd-btn--primary {
  background:
    linear-gradient(
      135deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  color:
    #07101a;
}


#gd-game .gd-btn--secondary {
  border:
    1px solid
    var(--gd-border);

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

  color: #fff;
}


/* =========================================================
   FREE METER
========================================================= */

#gd-game .gd-free-meter {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  margin-top:
    11px;

  padding:
    9px 10px;

  border-radius:
    14px;

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

  color:
    var(--gd-muted);

  font-size:
    9px;

  font-weight:
    800;
}


#gd-game .gd-free-meter strong {
  color: #fff;
}


/* =========================================================
   RESULTS
========================================================= */

#gd-game .gd-result {
  display: none;
}


#gd-game .gd-result.is-visible {
  display: block;

  animation:
    gdResultIn
    320ms
    ease-out;
}


#gd-game .gd-result-card {
  margin-top:
    13px;

  padding:
    17px 14px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    22px;

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

  text-align: center;
}


#gd-game .gd-result-emoji {
  display: block;

  margin-bottom:
    6px;

  font-size:
    43px;
}


#gd-game .gd-result-title {
  margin:
    0 0 5px;

  color: #fff;

  font-size:
    25px;

  font-weight:
    1000;
}


#gd-game .gd-result-copy {
  margin: 0;

  color:
    var(--gd-muted);

  font-size:
    11px;

  line-height:
    1.45;
}


#gd-game .gd-score-burst {
  display: inline-flex;

  align-items: baseline;

  gap: 5px;

  margin:
    14px 0 4px;
}


#gd-game .gd-score-number {
  color:
    var(--gd-yellow);

  font-size:
    42px;

  font-weight:
    1000;
}


#gd-game .gd-score-label {
  color:
    var(--gd-muted);

  font-size:
    9px;

  font-weight:
    900;
}


#gd-game .gd-stars {
  margin:
    5px 0 12px;

  color:
    var(--gd-yellow);

  font-size:
    25px;

  letter-spacing:
    4px;
}


#gd-game .gd-coin-earned {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  margin-top:
    11px;

  padding:
    9px 12px;

  border:
    1px solid
    rgba(
      255,
      215,
      90,
      0.28
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      215,
      90,
      0.10
    );

  color: #fff;

  font-size:
    11px;

  font-weight:
    950;
}


/* =========================================================
   COLLECTION FULL SCREEN
========================================================= */

#gd-game .gd-collection-head {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap: 10px;

  margin-bottom:
    13px;
}


#gd-game .gd-collection-title {
  margin: 0;

  color: #fff;

  font-size:
    24px;

  font-weight:
    1000;
}


#gd-game .gd-collection-subtitle {
  margin:
    4px 0 0;

  color:
    var(--gd-muted);

  font-size:
    10px;

  line-height:
    1.35;
}


#gd-game .gd-collection-group {
  margin-top:
    16px;
}


#gd-game .gd-collection-group:first-child {
  margin-top: 0;
}


#gd-game .gd-collection-group-title {
  margin:
    0 0 8px;

  color: #fff;

  font-size:
    13px;

  font-weight:
    950;
}


#gd-game .gd-trophy-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}


#gd-game .gd-trophy {
  position: relative;

  min-height:
    112px;

  padding:
    10px 6px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    17px;

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

  text-align: center;
}


#gd-game .gd-trophy.is-locked {
  opacity:
    0.48;

  filter:
    grayscale(
      0.55
    );
}


#gd-game .gd-trophy-icon {
  display: block;

  margin-bottom:
    6px;

  font-size:
    31px;
}


#gd-game .gd-trophy-title {
  display: block;

  color: #fff;

  font-size:
    9px;

  line-height:
    1.15;

  font-weight:
    950;
}


#gd-game .gd-trophy-copy {
  display: block;

  margin-top:
    4px;

  color:
    var(--gd-muted);

  font-size:
    7px;

  line-height:
    1.25;
}


/* =========================================================
   WALLET
========================================================= */

#gd-game .gd-wallet-panel {
  padding:
    18px 14px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    26px;

  background:
    linear-gradient(
      160deg,
      rgba(
        42,
        50,
        92,
        0.97
      ),
      rgba(
        15,
        23,
        47,
        0.98
      )
    );

  box-shadow:
    var(--gd-shadow);
}


#gd-game .gd-wallet-balance {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  padding:
    14px;

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        215,
        93,
        0.12
      ),
      rgba(
        255,
        255,
        255,
        0.05
      )
    );
}


#gd-game .gd-wallet-balance strong {
  color:
    var(--gd-yellow);

  font-size:
    29px;

  font-weight:
    1000;
}


/* =========================================================
   MODAL / INSTALL
========================================================= */

#gd-game .gd-modal-backdrop {
  position: fixed;

  z-index: 11500;

  inset: 0;

  background:
    rgba(
      2,
      6,
      13,
      0.80
    );

  backdrop-filter:
    blur(9px);
}


#gd-game .gd-install-sheet {
  position: fixed;

  z-index: 12000;

  left: 50%;
  bottom:
    calc(
      12px +
      env(
        safe-area-inset-bottom
      )
    );

  width:
    min(
      calc(
        100vw -
        24px
      ),
      520px
    );

  transform:
    translateX(
      -50%
    );

  padding:
    19px 15px;

  border:
    1px solid
    var(--gd-border-strong);

  border-radius:
    26px;

  background:
    linear-gradient(
      180deg,
      #243153,
      #141c35
    );

  box-shadow:
    0
    30px
    90px
    rgba(
      0,
      0,
      0,
      0.58
    );
}


#gd-game .gd-install-icon {
  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  margin:
    0 auto 10px;

  border-radius:
    19px;

  background:
    linear-gradient(
      145deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  font-size:
    30px;
}


#gd-game .gd-install-title {
  margin:
    0 0 5px;

  color: #fff;

  text-align: center;

  font-size:
    21px;

  font-weight:
    1000;
}


#gd-game .gd-install-copy {
  margin:
    0 auto 13px;

  max-width:
    400px;

  color:
    var(--gd-muted);

  text-align: center;

  font-size:
    11px;

  line-height:
    1.4;
}


#gd-game .gd-install-platform {
  margin-top:
    10px;

  padding:
    11px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    16px;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );
}


#gd-game .gd-install-platform-title {
  margin:
    0 0 7px;

  color: #fff;

  font-size:
    12px;

  font-weight:
    950;
}


#gd-game .gd-install-steps {
  display: grid;

  gap: 6px;
}


#gd-game .gd-install-step {
  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    8px 9px;

  border-radius:
    12px;

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

  color: #fff;

  font-size:
    10px;

  line-height:
    1.3;
}


#gd-game .gd-install-step-number {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 25px;
  height: 25px;

  border-radius:
    8px;

  background:
    linear-gradient(
      145deg,
      var(--gd-accent),
      var(--gd-accent-2)
    );

  color:
    #07101a;

  font-size:
    10px;

  font-weight:
    1000;
}


/* =========================================================
   PAYWALL
========================================================= */

#gd-game .gd-paywall {
  display: none;

  position: fixed;

  z-index: 13000;

  inset: 0;

  align-items:
    flex-end;

  justify-content:
    center;

  padding:
    14px
    12px
    calc(
      14px +
      env(
        safe-area-inset-bottom
      )
    );

  background:
    rgba(
      2,
      6,
      13,
      0.82
    );

  backdrop-filter:
    blur(10px);
}


#gd-game .gd-paywall.is-visible {
  display: flex;
}


#gd-game .gd-paywall-card {
  width:
    min(
      100%,
      520px
    );

  max-height:
    calc(
      100svh -
      28px
    );

  overflow-y:
    auto;

  padding:
    21px 16px;

  border:
    1px solid
    var(--gd-border-strong);

  border-radius:
    28px;

  background:
    linear-gradient(
      180deg,
      #263253,
      #141d36
    );

  box-shadow:
    0
    32px
    90px
    rgba(
      0,
      0,
      0,
      0.62
    );
}


#gd-game .gd-paywall-badge {
  display:
    inline-flex;

  min-height:
    31px;

  align-items:
    center;

  padding:
    6px 9px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      215,
      90,
      0.13
    );

  color:
    var(--gd-yellow);

  font-size:
    8px;

  font-weight:
    950;
}


#gd-game .gd-paywall-title {
  margin:
    12px 0 6px;

  color: #fff;

  font-size:
    clamp(
      27px,
      8vw,
      34px
    );

  line-height:
    0.98;

  font-weight:
    1000;
}


#gd-game .gd-paywall-copy {
  margin:
    0 0 14px;

  color:
    var(--gd-muted);

  font-size:
    12px;

  line-height:
    1.42;
}


#gd-game .gd-paywall-list {
  display: grid;

  gap: 8px;

  margin:
    0 0 15px;

  padding: 0;

  list-style: none;
}


#gd-game .gd-paywall-list li {
  position: relative;

  padding-left:
    25px;

  color: #fff;

  font-size:
    11px;

  line-height:
    1.3;
}


#gd-game .gd-paywall-list li::before {
  content: "✓";

  position: absolute;

  left: 0;

  display: grid;

  place-items: center;

  width: 18px;
  height: 18px;

  border-radius:
    999px;

  background:
    rgba(
      83,
      231,
      166,
      0.15
    );

  color:
    var(--gd-green);
}


/* =========================================================
   REWARD POP
========================================================= */

#gd-game .gd-reward-pop {
  position: fixed;

  z-index: 12000;

  left: 50%;
  top: 50%;

  width:
    min(
      calc(
        100vw -
        28px
      ),
      390px
    );

  transform:
    translate(
      -50%,
      -50%
    );

  padding:
    23px 18px;

  border:
    1px solid
    rgba(
      255,
      215,
      90,
      0.38
    );

  border-radius:
    28px;

  background:
    linear-gradient(
      180deg,
      #263253,
      #141d36
    );

  box-shadow:
    0
    30px
    90px
    rgba(
      0,
      0,
      0,
      0.60
    );

  text-align: center;
}


#gd-game .gd-reward-pop-icon {
  display: block;

  margin-bottom:
    9px;

  font-size:
    58px;
}


#gd-game .gd-reward-pop-kicker {
  color:
    var(--gd-yellow);

  font-size:
    9px;

  font-weight:
    950;

  letter-spacing:
    0.10em;
}


#gd-game .gd-reward-pop-title {
  margin:
    6px 0 5px;

  color: #fff;

  font-size:
    27px;

  font-weight:
    1000;
}


#gd-game .gd-reward-pop-copy {
  margin:
    0 0 15px;

  color:
    var(--gd-muted);

  font-size:
    11px;

  line-height:
    1.4;
}


/* =========================================================
   LEVEL UP
========================================================= */

#gd-game .gd-level-up {
  position: fixed;

  z-index: 14000;

  top:
    max(
      14px,
      env(
        safe-area-inset-top
      )
    );

  left: 50%;

  width:
    min(
      calc(
        100vw -
        28px
      ),
      390px
    );

  transform:
    translateX(
      -50%
    );

  padding:
    13px 14px;

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      var(--gd-accent-2),
      var(--gd-accent)
    );

  color:
    #07101a;

  text-align: center;

  font-size:
    12px;

  font-weight:
    1000;
}


/* =========================================================
   TOAST
========================================================= */

#gd-game .gd-toast {
  position: fixed;

  z-index: 15000;

  left: 50%;

  bottom:
    calc(
      17px +
      env(
        safe-area-inset-bottom
      )
    );

  width:
    min(
      calc(
        100vw -
        28px
      ),
      430px
    );

  transform:
    translateX(
      -50%
    )
    translateY(
      18px
    );

  padding:
    11px 13px;

  border:
    1px solid
    var(--gd-border);

  border-radius:
    15px;

  background:
    #1d2948;

  color: #fff;

  text-align: center;

  font-size:
    10px;

  font-weight:
    900;

  opacity: 0;

  pointer-events: none;
}


#gd-game .gd-toast.is-visible {
  opacity: 1;

  transform:
    translateX(
      -50%
    )
    translateY(
      0
    );
}


/* =========================================================
   CONFETTI
========================================================= */

#gd-game .gd-confetti {
  position: absolute;

  z-index: 20;

  width: 8px;
  height: 15px;

  border-radius:
    3px;

  pointer-events: none;

  animation:
    gdConfettiFall
    900ms
    ease-out
    forwards;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

#gd-game button:focus-visible {
  outline:
    3px solid
    #ffffff;

  outline-offset:
    3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (
  min-width:
  700px
) {

  #gd-game .gd-shell {
    width:
      min(
        100%,
        900px
      );

    padding:
      25px 22px 45px;
  }


  #gd-game .gd-home {
    padding:
      27px 23px 23px;
  }


  #gd-game .gd-home-stats {
    gap: 11px;
  }


  #gd-game .gd-home-stat {
    min-height:
      88px;
  }


  #gd-game .gd-home-stat-value {
    font-size:
      24px;
  }


  #gd-game .gd-home-action {
    min-height:
      106px;
  }


  #gd-game .gd-game-panel {
    padding:
      25px 22px 21px;
  }


  #gd-game .gd-item {
    min-height:
      82px;

    grid-template-columns:
      50px
      minmax(
        0,
        1fr
      )
      36px;

    padding:
      12px 14px;
  }


  #gd-game .gd-item-position {
    width: 46px;
    height: 46px;

    font-size:
      23px;
  }


  #gd-game .gd-item-title {
    font-size:
      17px;
  }


  #gd-game .gd-actions {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        0.46fr
      );
  }


  #gd-game .gd-trophy-grid {
    grid-template-columns:
      repeat(
        4,
        1fr
      );
  }


  #gd-game .gd-reward-node {
    flex-basis:
      150px;

    min-height:
      148px;
  }


  #gd-game .gd-bonus-pack {
    flex-basis:
      195px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (
  min-width:
  1024px
) {

  #gd-game .gd-shell {
    width:
      min(
        100%,
        1040px
      );

    padding:
      32px 28px 58px;
  }


  #gd-game .gd-home {
    padding:
      31px 29px 28px;
  }


  #gd-game .gd-home-content-grid {
    display: grid;

    grid-template-columns:
      minmax(
        0,
        1.05fr
      )
      minmax(
        310px,
        0.95fr
      );

    align-items:
      center;

    gap: 24px;
  }


  #gd-game .gd-home-hero {
    text-align: left;
  }


  #gd-game .gd-home-burst {
    margin:
      0 0 14px;
  }


  #gd-game .gd-home-subtitle {
    margin:
      11px 0 0;
  }


  #gd-game .gd-home-play {
    min-height:
      68px;
  }


  #gd-game .gd-game-panel {
    padding:
      28px 27px 24px;
  }


  #gd-game .gd-item {
    min-height:
      86px;
  }


  #gd-game .gd-question {
    font-size:
      36px;
  }


  #gd-game .gd-trophy-grid {
    grid-template-columns:
      repeat(
        5,
        1fr
      );
  }

}


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

@media (
  max-width:
  370px
) {

  #gd-game .gd-shell {
    padding-left:
      9px;

    padding-right:
      9px;
  }


  #gd-game .gd-brand-name {
    font-size:
      21px;
  }


  #gd-game .gd-home {
    padding:
      16px 9px 14px;
  }


  #gd-game .gd-home-title {
    font-size:
      29px;
  }


  #gd-game .gd-home-subtitle {
    font-size:
      12px;
  }


  #gd-game .gd-home-stat {
    min-height:
      72px;
  }


  #gd-game .gd-item {
    grid-template-columns:
      39px
      minmax(
        0,
        1fr
      )
      27px;

    min-height:
      70px;

    gap: 7px;

    padding:
      9px 8px;
  }


  #gd-game .gd-item-position {
    width: 37px;
    height: 37px;

    font-size:
      18px;
  }


  #gd-game .gd-item-title {
    font-size:
      14px;
  }


  #gd-game .gd-collection-preview-row {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* =========================================================
   HOVER
========================================================= */

@media (
  hover: hover
)
and
(
  pointer: fine
) {

  #gd-game .gd-home-action:hover,
  #gd-game .gd-wallet-btn:hover,
  #gd-game .gd-audio-btn:hover,
  #gd-game .gd-save-button:hover,
  #gd-game .gd-icon-btn:hover {
    border-color:
      rgba(
        145,
        129,
        255,
        0.42
      );

    background:
      rgba(
        255,
        255,
        255,
        0.09
      );
  }


  #gd-game .gd-item:hover {
    transform:
      translateY(
        -1px
      );
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes gdHeroPulse {

  0%,
  100% {
    transform:
      scale(
        1
      )
      rotate(
        -1deg
      );
  }

  50% {
    transform:
      scale(
        1.045
      )
      rotate(
        1deg
      );
  }

}


@keyframes gdFlame {

  0%,
  100% {
    transform:
      rotate(
        -3deg
      )
      scale(
        1
      );
  }

  50% {
    transform:
      rotate(
        4deg
      )
      scale(
        1.08
      );
  }

}


@keyframes gdOrbOne {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        25px,
        18px,
        0
      );
  }

}


@keyframes gdOrbTwo {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        -25px,
        -17px,
        0
      );
  }

}


@keyframes gdResultIn {

  from {
    opacity: 0;

    transform:
      translateY(
        14px
      )
      scale(
        0.98
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }

}


@keyframes gdConfettiFall {

  0% {
    opacity: 1;

    transform:
      translate3d(
        0,
        -20px,
        0
      )
      rotate(
        0deg
      );
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(
          --gd-confetti-x,
          0
        ),
        240px,
        0
      )
      rotate(
        520deg
      );
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #gd-game *,
  #gd-game *::before,
  #gd-game *::after {
    animation-duration:
      0.01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.01ms
      !important;
  }

}