/* ============================================
   GAURAV'S CLOCK — MOBILE (max-width: 640px)
   Triggered dynamically via device.js namespace
   ============================================ */

.device-mobile .app {
  padding: 0.8rem 1rem;
  --app-pt: 0.8rem;
  --app-px: 1rem;
  /* Redefine layout for a true mobile app feel */
  justify-content: flex-start;
}

.device-mobile .topbar { padding: 0.2rem 0; margin-bottom: 0; }
.device-mobile .topbar__btn { width: 36px; height: 36px; border-radius: 50%; }
.device-mobile .topbar__btn-text { font-size: 0.95rem; }

/* Centralize the lock-screen aesthetic in clock-section */
.device-mobile .clock-section {
  flex: 1; /* Take remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}


.device-mobile .clock-date { 
  font-size: 1.1rem; 
  font-weight: 500; 
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Massive Edge-to-Edge Clock */
.device-mobile {
  --clock-size: 22vw;
  --clock-size-seconds: 14vw;
}

.device-mobile .clock { 
  padding: 0; 
  background: transparent; 
  border: none; 
  box-shadow: none; 
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: 100%;
  justify-content: center;
}
.device-mobile .clock__group {
  display: flex;
  align-items: baseline;
}
.device-mobile .clock__digit { font-size: var(--clock-size); font-weight: 300; letter-spacing: -0.05em; min-width: 0.55em; text-shadow: 0 0 40px var(--accent-glow); }
.device-mobile .clock__digit-pair { gap: 0; }
.device-mobile .clock__digit-pair--seconds .clock__digit { font-size: var(--clock-size-seconds); font-weight: 200; color: var(--text-secondary); text-shadow: none; }
.device-mobile .clock__colon { gap: clamp(8px, 2vw, 12px); padding: 0 clamp(2px, 1vw, 6px); align-self: center; transform: translateY(-0.05em); }
.device-mobile .clock__colon-dot { width: 6px; height: 6px; }
.device-mobile .clock__ampm { font-size: 1.2rem; margin-left: 0.5rem; font-weight: 600; opacity: 0.8; }

/* Minimal Meta info */
.device-mobile .clock-meta { display: none; } /* Hide technical meta to preserve clean UI */

/* Swipeable Horizontal Panels (Mobile Native Feel) */
.device-mobile .panels { 
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0.8rem;
  margin: 0;
  padding-bottom: 1rem;
  padding-top: 1rem;
  width: 100vw; /* Bleed to edges */
  margin-left: calc(50% - 50vw);
  padding-left: 1rem;
  padding-right: 1rem;
  scrollbar-width: none; /* Hide scrollbar Firefox */
}
.device-mobile .panels::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

.device-mobile .panel { 
  flex: 0 0 75%; 
  scroll-snap-align: center;
  padding: 1rem; 
  gap: 0.6rem; 
  border-radius: 1.2rem;
  background: rgba(255,255,255,0.03); /* Lighter glass */
}
.device-mobile .panel__icon { width: 34px; height: 34px; border-radius: 50%; }
.device-mobile .panel__icon svg { width: 16px; height: 16px; }
.device-mobile .panel__content { gap: 0.4rem; }
.device-mobile .panel__title { font-size: 0.85rem; font-weight: 600; }
.device-mobile .panel__label { font-size: 0.7rem; }
.device-mobile .panel__value { font-size: 0.75rem; }
.device-mobile .panel__moon-visual { padding: 0.4rem 0; }
.device-mobile .panel__moon-sphere { width: 32px; height: 32px; }
.device-mobile .panel__battery-visual { gap: 0.5rem; }
.device-mobile .panel__battery-bar { height: 8px; border-radius: 4px; }
.device-mobile .panel__progress { margin-top: 0.2rem; }

.device-mobile .theme-drawer__grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.device-mobile .theme-drawer__title { font-size: 1.1rem; }

.device-mobile .footer { display: none; } /* Remove footer on mobile for cleaner look */

/* Small phones (380px and below) */
@media (max-width: 380px) {
  :root { --clock-size: 20vw; --clock-size-seconds: 12vw; }
  .topbar__btn { width: 32px; height: 32px; }
  .topbar__btn svg { width: 14px; height: 14px; }
  .panel { flex: 0 0 85%; padding: 0.8rem; }
}

/* Landscape mobile */
@media (max-height: 450px) and (orientation: landscape) {
  :root { --clock-size: 15vh; --clock-size-seconds: 10vh; }
  .clock-date { display: none; }
  .panels { flex: 0 0 auto; width: 100%; margin: 0; padding: 0.5rem; gap: 0.5rem; }
  .panel { flex: 0 0 45%; scroll-snap-align: start; padding: 0.6rem; }
  .clock-section { flex-direction: row; justify-content: space-between; align-items: center; padding: 0 2rem; }
  .clock { width: auto; }
}