/* ── MOBILE / PORTRAIT MODE ── */
@media (max-width: 768px), (orientation: portrait) {

  /* ── TOP LEFT BUTTONS — smaller, stack horizontally ── */
  #top-left-wrap {
    top: 12px;
    left: 12px;
    gap: 6px;
  }

  #hamburger-btn,
  #game-btn,
  #bird-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
    border-radius: 8px;
  }

  /* ── WEATHER — shrink and move down slightly ── */
  #weather-label {
    top: 12px;
    font-size: 11px;
    padding: 5px 12px;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── TITLE ── */
  #title-label {
    top: 50px;
    font-size: 20px;
    max-width: 80vw;
  }

  /* ── FUN FACTS ── */
  #fun_facts {
    top: 80px;
    font-size: 11px;
    max-width: 80vw;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
  }

  /* ── TASK PANEL — full width bottom drawer instead of right side ── */
  #task-panel {
    position: fixed;
    top: auto;
    bottom: 140px;
    right: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 35vh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding: 14px 16px;
    z-index: 20;
  }

  #task-list {
    max-height: calc(35vh - 100px);
  }

  /* ── CANVAS / GAME WIDGET — centred, smaller ── */
  #canvas-wrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92vw;
  }

  #game-widget canvas {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  /* ── TIMER — move up so it doesn't clash with task panel ── */
  #timer-wrap {
    bottom: 290px;
  }

  #btn-start-pause {
    width: 110px;
    height: 110px;
  }

  #timer-label {
    font-size: 22px;
  }

  #timer-state {
    font-size: 9px;
  }

  /* ── MUSIC PLAYER — full width ── */
  #music-player {
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 12px 16px 20px;
  }

  #track-name {
    font-size: 12px;
  }

  /* ── HAMBURGER MENU — full width ── */
  #hamburger-menu {
    width: calc(100vw - 24px);
    max-width: 320px;
  }

  /* ── BIRD MENU — full width ── */
  #bird-menu {
    width: calc(100vw - 24px);
    max-width: 320px;
  }

  #bird-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  /* ── FOCUS MODE BUTTON ── */
  #btn-focus-mode {
    bottom: 145px;
    right: 12px;
    font-size: 11px;
    padding: 6px 12px;
  }

  /* ── UNLOCK NOTIFICATION ── */
  #unlock-notification {
    bottom: 160px;
    font-size: 12px;
    padding: 10px 18px;
    max-width: 90vw;
    text-align: center;
    white-space: normal;
  }

  /* ── TRACK PICKER — taller on mobile ── */
  #track-picker {
    max-height: 180px;
  }

  /* ── HIDE game widget close button text overflow ── */
  #game-btn {
    overflow: hidden;
  }
}

/* ── VERY SMALL PHONES (SE etc) ── */
@media (max-width: 375px) {
  #timer-wrap {
    bottom: 310px;
  }

  #btn-start-pause {
    width: 95px;
    height: 95px;
  }

  #timer-label {
    font-size: 19px;
  }

  #task-panel {
    bottom: 130px;
    max-height: 30vh;
  }

  #weather-label {
    font-size: 10px;
    max-width: 50vw;
  }
}

.ambiance-slider, #progress-slider {
  -webkit-appearance: none;
  height: 20px; /* bigger touch target */
  cursor: pointer;
}

.ambiance-slider::-webkit-slider-thumb,
#progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent2);
}