/* ========================================
   SALES SNAKE II
======================================== */

.sales-snake-game-overlay {
  --snake-surface:
    #0b1624;

  --snake-surface-soft:
    #111f30;

  --snake-surface-raised:
    #16263a;

  --snake-border:
    rgba(
      148,
      184,
      226,
      0.18
    );

  --snake-border-strong:
    rgba(
      148,
      184,
      226,
      0.3
    );

  --snake-text:
    #f8fafc;

  --snake-text-muted:
    #9fb0c5;

  --snake-accent:
    #3b82f6;

  --snake-accent-hover:
    #2563eb;

  --snake-shadow:
    0 30px 80px
    rgba(
      2,
      8,
      23,
      0.62
    );

  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;

  overflow-y:
    auto;

  background:
    rgba(
      2,
      8,
      23,
      0.78
    );

  backdrop-filter:
    blur(
      10px
    );

  -webkit-backdrop-filter:
    blur(
      10px
    );
}

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

.sales-snake-game-modal {
  width:
    min(
      920px,
      100%
    );

  display:
    grid;

  gap:
    22px;

  padding:
    26px;

  color:
    var(
      --snake-text
    );

  background:
    linear-gradient(
      155deg,
      var(
        --snake-surface-soft
      ),
      var(
        --snake-surface
      )
    );

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

  border-radius:
    24px;

  box-shadow:
    var(
      --snake-shadow
    );

  outline:
    none;
}

/* ========================================
   HEADER
======================================== */

.sales-snake-game-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;
}

.sales-snake-game-header > div {
  display:
    grid;

  gap:
    7px;
}

.sales-snake-game-header h2 {
  margin:
    0;

  color:
    var(
      --snake-text
    );

  font-size:
    clamp(
      28px,
      4vw,
      40px
    );

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}

.sales-snake-game-header p {
  max-width:
    620px;

  margin:
    0;

  color:
    var(
      --snake-text-muted
    );

  font-size:
    15px;

  line-height:
    1.55;
}

.sales-snake-game-header
.sales-dashboard-eyebrow {
  color:
    #7db4ff;
}

/* ========================================
   CLOSE BUTTON
======================================== */

.sales-snake-game-close {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  color:
    var(
      --snake-text-muted
    );

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

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

  border-radius:
    12px;

  font-family:
    inherit;

  font-size:
    27px;

  font-weight:
    400;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.sales-snake-game-close:hover {
  color:
    var(
      --snake-text
    );

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

  border-color:
    var(
      --snake-border-strong
    );

  transform:
    translateY(
      -1px
    );
}

.sales-snake-game-close:disabled {
  opacity:
    0.55;

  cursor:
    default;

  transform:
    none;
}

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

.sales-snake-game-meta {
  display:
    grid;

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

  gap:
    12px;
}

.sales-snake-game-meta > div {
  min-width:
    0;

  display:
    grid;

  gap:
    8px;

  padding:
    15px 16px;

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

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

  border-radius:
    15px;
}

.sales-snake-game-meta span {
  color:
    var(
      --snake-text-muted
    );

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.sales-snake-game-meta strong {
  overflow:
    hidden;

  color:
    var(
      --snake-text
    );

  font-size:
    23px;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

/* ========================================
   GAME STAGE
======================================== */

.sales-snake-game-stage {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  min-height:
    440px;

  padding:
    20px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at top,
      rgba(
        59,
        130,
        246,
        0.12
      ),
      transparent 58%
    ),
    #07111d;

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

  border-radius:
    20px;
}

#salesSnakeGameCanvas {
  display:
    block;

  width:
    min(
      400px,
      100%
    );

  height:
    auto;

  aspect-ratio:
    1;

  max-width:
    100%;

  background:
    #071523;

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.22
    );

  border-radius:
    14px;

  box-shadow:
    0 18px 50px
    rgba(
      0,
      0,
      0,
      0.36
    );

  image-rendering:
    pixelated;

  outline:
    none;
}

#salesSnakeGameCanvas:focus-visible {
  border-color:
    rgba(
      96,
      165,
      250,
      0.8
    );

  box-shadow:
    0 0 0 4px
    rgba(
      59,
      130,
      246,
      0.2
    ),
    0 18px 50px
    rgba(
      0,
      0,
      0,
      0.36
    );
}

/* ========================================
   GAME MESSAGE
======================================== */

.sales-snake-game-message {
  position:
    absolute;

  inset:
    50% auto auto 50%;

  width:
    min(
      310px,
      calc(
        100% -
        48px
      )
    );

  display:
    grid;

  gap:
    8px;

  padding:
    19px 22px;

  text-align:
    center;

  background:
    rgba(
      7,
      21,
      35,
      0.92
    );

  border:
    1px solid
    rgba(
      148,
      184,
      226,
      0.26
    );

  border-radius:
    16px;

  box-shadow:
    0 18px 45px
    rgba(
      0,
      0,
      0,
      0.4
    );

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

  pointer-events:
    none;
}

.sales-snake-game-message[hidden] {
  display:
    none;
}

.sales-snake-game-message strong {
  color:
    var(
      --snake-text
    );

  font-size:
    18px;

  line-height:
    1.25;
}

.sales-snake-game-message span {
  color:
    var(
      --snake-text-muted
    );

  font-size:
    14px;

  line-height:
    1.45;
}

/* ========================================
   DIRECTION CONTROLS
======================================== */

.sales-snake-game-controls {
  display:
    grid;

  justify-content:
    center;

  gap:
    8px;
}

.sales-snake-game-controls > button {
  justify-self:
    center;
}

.sales-snake-game-controls > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;
}

.sales-snake-game-controls button {
  width:
    52px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  color:
    var(
      --snake-text
    );

  background:
    var(
      --snake-surface-raised
    );

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

  border-radius:
    13px;

  font-family:
    inherit;

  font-size:
    22px;

  font-weight:
    800;

  line-height:
    1;

  cursor:
    pointer;

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    manipulation;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

.sales-snake-game-controls button:hover {
  background:
    #1d3350;

  border-color:
    rgba(
      96,
      165,
      250,
      0.55
    );
}

.sales-snake-game-controls button:active {
  transform:
    scale(
      0.95
    );
}

/* ========================================
   FOOTER
======================================== */

.sales-snake-game-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding-top:
    2px;
}

.sales-snake-game-footer > div {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}

#salesSnakeGameStatus {
  color:
    var(
      --snake-text
    );

  font-size:
    14px;

  font-weight:
    750;
}

.sales-snake-game-footer small {
  color:
    var(
      --snake-text-muted
    );

  font-size:
    12px;

  line-height:
    1.45;
}

#salesSnakeGamePrimaryAction {
  min-width:
    144px;

  flex:
    0 0 auto;
}

/* ========================================
   FOCUS
======================================== */

.sales-snake-game-overlay button:focus-visible {
  outline:
    3px solid
    rgba(
      96,
      165,
      250,
      0.42
    );

  outline-offset:
    3px;
}

/* ========================================
   SMALL LAPTOP
======================================== */

@media (
  max-height:
  820px
) and (
  min-width:
  701px
) {

  .sales-snake-game-overlay {
    place-items:
      start center;

    padding:
      18px;
  }

  .sales-snake-game-modal {
    gap:
      16px;

    padding:
      20px;
  }

  .sales-snake-game-stage {
    min-height:
      370px;

    padding:
      14px;
  }

  #salesSnakeGameCanvas {
    width:
      min(
        350px,
        100%
      );
  }

}

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

@media (
  max-width:
  760px
) {

  .sales-snake-game-overlay {
    place-items:
      start center;

    padding:
      14px;
  }

  .sales-snake-game-modal {
    gap:
      18px;

    padding:
      20px;

    border-radius:
      20px;
  }

  .sales-snake-game-header {
    gap:
      14px;
  }

  .sales-snake-game-header h2 {
    font-size:
      31px;
  }

  .sales-snake-game-meta {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .sales-snake-game-stage {
    min-height:
      auto;

    padding:
      16px;
  }

  .sales-snake-game-footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  #salesSnakeGamePrimaryAction {
    width:
      100%;
  }

}

/* ========================================
   MOBILE
======================================== */

@media (
  max-width:
  520px
) {

  .sales-snake-game-overlay {
    padding:
      0;

    background:
      #07111d;
  }

  .sales-snake-game-modal {
    width:
      100%;

    min-height:
      100dvh;

    gap:
      16px;

    padding:
      17px;

    border:
      0;

    border-radius:
      0;

    box-shadow:
      none;
  }

  .sales-snake-game-header p {
    font-size:
      13px;
  }

  .sales-snake-game-close {
    width:
      40px;

    height:
      40px;
  }

  .sales-snake-game-meta {
    gap:
      8px;
  }

  .sales-snake-game-meta > div {
    gap:
      6px;

    padding:
      12px;
  }

  .sales-snake-game-meta span {
    font-size:
      10px;
  }

  .sales-snake-game-meta strong {
    font-size:
      19px;
  }

  .sales-snake-game-stage {
    padding:
      10px;

    border-radius:
      16px;
  }

  #salesSnakeGameCanvas {
    border-radius:
      10px;
  }

  .sales-snake-game-message {
    width:
      min(
        280px,
        calc(
          100% -
          30px
        )
      );

    padding:
      16px;
  }

  .sales-snake-game-controls {
    gap:
      7px;
  }

  .sales-snake-game-controls > div {
    gap:
      7px;
  }

  .sales-snake-game-controls button {
    width:
      58px;

    height:
      50px;
  }

  .sales-snake-game-footer small {
    display:
      none;
  }

}

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

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

  .sales-snake-game-overlay *,
  .sales-snake-game-overlay *::before,
  .sales-snake-game-overlay *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}