/* ========================================
   COLOR SORT
   BUILD 8 - FINAL MOBILE POLISH
   ======================================== */


/* ========================================
   RESET
   ======================================== */

* {
  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}


html,
body {
  margin: 0;
  padding: 0;

  min-height: 100%;

  background: #0d1016;
}


body {
  min-height: 100vh;
  min-height: 100dvh;

  color: #ffffff;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  user-select: none;

  overscroll-behavior: none;
  overflow-y: auto;
}


/* ========================================
   GAME SHELL
   ======================================== */

.game {

  width: 100%;
  max-width: 480px;

  min-height: 100vh;
  min-height: 100dvh;

  margin: 0 auto;

  padding:
    max(22px, env(safe-area-inset-top))
    18px
    max(18px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;

  overflow: visible;
}


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

.header {
  text-align: center;

  padding-top: 4px;
}


.title {

  margin: 0;

  font-size: clamp(27px, 7vw, 32px);

  line-height: 1.1;

  font-weight: 850;

  letter-spacing: -0.8px;
}


.subtitle {

  margin: 7px 0 0;

  color: #7f899b;

  font-size: 13px;

  line-height: 1.4;
}

.home-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;

  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;

  background: rgba(15,18,32,.82);
  color: rgba(255,255,255,.8);

  text-decoration: none;

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

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;

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

  box-shadow: 0 4px 18px rgba(0,0,0,.2);

  transition:
    transform .15s ease,
    background .15s ease,
    color .15s ease;
}

.home-btn svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-btn:active {
  transform: scale(.93);
}

.home-btn:hover {
  background: rgba(255,255,255,.1);
  color: white;
}

/* ========================================
   LEVEL LABEL
   ======================================== */

.level {

  align-self: center;

  margin-top: 18px;

  padding: 7px 13px;

  border-radius: 999px;

  background: #171c25;

  color: #7f899b;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.3px;
}


#levelNumber {
  color: #ffffff;
}


/* ========================================
   GAME BOARD
   ======================================== */

.board {

  flex: 1;

  width: 100%;

  min-height: 360px;

  padding: 24px 2px;

  display: flex;

  justify-content: center;
  align-items: center;

  align-content: center;

  flex-wrap: wrap;

  gap: 14px;

  touch-action: manipulation;
}


/* ========================================
   TUBE
   ======================================== */

.tube {

  position: relative;

  width: 66px;
  height: 194px;

  padding: 9px 8px;

  border: 4px solid #4a5261;

  border-top: 0;

  border-radius:
    0
    0
    34px
    34px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025),
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.025)
    );

  display: flex;

  flex-direction: column-reverse;

  justify-content: flex-start;

  gap: 5px;

  cursor: pointer;

  touch-action: manipulation;

  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}


.tube::after {

  content: "";

  position: absolute;

  left: 10px;
  right: 10px;

  bottom: -5px;

  height: 5px;

  border-radius: 50%;

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

  filter: blur(4px);

  pointer-events: none;
}


.tube:active {

  transform: scale(0.96);

}


.tube.selected {

  border-color: #ffffff;

  transform: translateY(-9px);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.25),
    0 0 0 2px rgba(255,255,255,0.05);

  filter: brightness(1.12);
}


/* ========================================
   BALL
   ======================================== */

.ball {

  width: 100%;

  aspect-ratio: 1;

  flex-shrink: 0;

  border-radius: 50%;

  position: relative;

  box-shadow:
    inset 0 5px 8px rgba(255,255,255,0.26),
    inset 0 -5px 8px rgba(0,0,0,0.12),
    0 3px 7px rgba(0,0,0,0.30);

  animation:
    ballAppear 180ms ease-out;
}


.ball::before {

  content: "";

  position: absolute;

  width: 35%;
  height: 22%;

  top: 10%;
  left: 16%;

  border-radius: 50%;

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

  transform: rotate(-25deg);

  filter: blur(1px);
}


/* ========================================
   COLORS
   ======================================== */

.red {
  background:
    linear-gradient(
      145deg,
      #ff6a7e,
      #f13e59
    );
}


.blue {
  background:
    linear-gradient(
      145deg,
      #70a7ff,
      #397bf0
    );
}


.green {
  background:
    linear-gradient(
      145deg,
      #62e894,
      #31bd68
    );
}


.yellow {
  background:
    linear-gradient(
      145deg,
      #ffe477,
      #f4c533
    );
}


.purple {
  background:
    linear-gradient(
      145deg,
      #c18aff,
      #9655ed
    );
}


.orange {
  background:
    linear-gradient(
      145deg,
      #ffb36c,
      #f18432
    );
}


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

.message {

  min-height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  color: #70e1a1;

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.2px;
}


.message.success {

  animation:
    messagePop 320ms cubic-bezier(.2,.8,.2,1);
}


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

.controls {

  display: flex;

  justify-content: center;

  gap: 10px;

  padding:
    12px
    0
    8px;
}


.controls button {

  min-width: 112px;

  min-height: 48px;

  padding:
    12px
    20px;

  border: 1px solid #303744;

  border-radius: 15px;

  background: #1b202a;

  color: #ffffff;

  font: inherit;

  font-size: 15px;

  font-weight: 750;

  cursor: pointer;

  touch-action: manipulation;

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


.controls button:hover {

  background: #232a36;

  border-color: #3c4655;
}


.controls button:active {

  transform: scale(0.95);
}


/* ========================================
   LEVEL PANEL
   ======================================== */

.level-panel {

  position: fixed;

  inset: 0;

  z-index: 100;

  padding: 0;

  background:
    rgba(5,8,12,0.78);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  display: flex;

  align-items: flex-end;
  justify-content: center;
}


.level-panel.hidden {
  display: none;
}


.level-panel-inner {

  width: 100%;

  max-width: 480px;

  max-height: 82dvh;

  overflow-y: auto;

  padding:
    20px
    18px
    max(28px, env(safe-area-inset-bottom));

  border-radius:
    26px
    26px
    0
    0;

  background: #171b23;

  box-shadow:
    0 -15px 45px rgba(0,0,0,0.40);

  animation:
    panelUp 220ms cubic-bezier(.2,.8,.2,1);
}


.level-panel-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;
}


.level-panel-header h2 {

  margin: 0;

  font-size: 21px;

  letter-spacing: -0.4px;
}


.close-button {

  width: 44px;
  height: 44px;

  min-width: 44px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #252b36;

  color: #ffffff;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;
}


/* ========================================
   LEVEL GRID
   ======================================== */

.level-grid {

  display: grid;

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

  gap: 10px;
}


.level-button {

  width: 100%;

  aspect-ratio: 1;

  min-height: 52px;

  padding: 0;

  border: 1px solid #303744;

  border-radius: 14px;

  background: #222832;

  color: #ffffff;

  font: inherit;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;

  position: relative;

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


.level-button:active {

  transform: scale(0.93);
}


.level-button.current {

  background: #397bf0;

  border-color: #65a0ff;

  box-shadow:
    0 5px 16px rgba(57,123,240,0.25);
}


.level-button.completed {

  background: #245c45;

  border-color: #35785a;
}


.level-button.locked {

  background: #191e26;

  border-color: #252b34;

  color: #5c6573;

  cursor: default;
}


.level-button .lock {

  position: absolute;

  right: 6px;
  bottom: 5px;

  font-size: 10px;

  opacity: 0.75;
}


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

@keyframes ballAppear {

  from {
    opacity: 0;
    transform: scale(0.76);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


@keyframes ballLand {

  0% {
    transform: scale(0.82);
  }

  55% {
    transform: scale(1.09);
  }

  100% {
    transform: scale(1);
  }

}


@keyframes messagePop {

  from {
    opacity: 0;
    transform:
      translateY(6px)
      scale(0.92);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes panelUp {

  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes shake {

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

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-4px);
  }

}


.tube.invalid {

  animation:
    shake 250ms ease;
}


.tube.complete {

  border-color: #70e1a1;

  box-shadow:
    0 0 18px rgba(112,225,161,0.12);

  filter: brightness(1.12);
}


.board.level-complete {

  animation:
    boardSuccess 400ms ease;
}

.ball.just-moved {
  animation: ballLand 280ms ease;
}

@keyframes boardSuccess {

  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }

  100% {
    transform: scale(1);
  }

}


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

@media (max-width: 360px) {

  .game {
    padding-left: 13px;
    padding-right: 13px;
  }

  .board {
    gap: 9px;
  }

  .tube {
    width: 59px;
    height: 172px;
  }

  .controls button {
    min-width: 104px;
  }

  .level-grid {
    gap: 8px;
  }

}


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

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

  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

  }

}


/* ========================================
   SHORT PHONES
   ======================================== */

@media (max-height: 680px) {

  .game {
    padding-top: 16px;
    padding-bottom: 12px;
  }

  .board {
    min-height: 280px;
    padding: 12px 2px;
  }

  .tube {
    width: 58px;
    height: 160px;
  }

  .controls button {
    min-width: 100px;
    min-height: 42px;
  }

}