/* Responsive rules extracted from styles.css (unchanged) */

@media (max-width: 980px){
  .wrap{width:min(1180px, 94vw); margin:0 auto; padding:0 0 18px;}

  .clock-grid{ grid-template-columns: 1fr; 
  justify-content:center;
}
  .plant-panel{margin-top: 10px; padding: 16px 18px 12px; border-radius: 20px; border: 1px solid rgba(60,52,44,.20); background: rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.06); position: sticky; top: 16px;}

}

@media (max-width: 760px){
  .phase-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 1120px){
  .clock-grid{
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap:18px;
  
  justify-content:center;
}
  /* slightly smaller dial on medium screens */
  canvas#dial{
    width:min(600px, 58vh, 92vw);
    height:min(600px, 58vh, 92vw);
  }
  .panel{
    width:100%;
  }
}

@media (max-width: 900px){
  .clock-grid{
    grid-template-columns: 1fr;
    gap:18px;
  
  justify-content:center;
}
  canvas#dial{
    width:min(680px, 62vh, 92vw);
    height:min(680px, 62vh, 92vw);
  }
  .panel{
    width:min(640px, 94vw);
    margin:0 auto;
  }
}

@media (min-width: 1200px){
  
}

@media (min-width:700px){
  .clock-center-gif{ width:74% !important; height:74% !important; }
}

@media (min-width:900px){
  .clock-center-gif{ width:74% !important; height:74% !important; }
}

@media (min-width:1200px){
  .clock-center-gif{ width:74% !important; height:74% !important; }
}

@media (min-width: 900px){
  .clock-center-life img{
    transform: translateY(10%) scale(1.16);
  }
}