:root{
  --bg-tint: rgba(255,255,255,0.88);
  --muted: #7d6b61;
  --accent: #6f5a4e;
  --accent-2: #6a5cff;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

body{
  background: url("background.png") center/cover no-repeat fixed;
  color: #2e2a28;
}

/* layout */
.layout{display:grid;grid-template-columns:1fr 360px;gap:28px;max-width:1200px;margin:auto}

/* cards */
.card{
  background:var(--bg-tint);
  border-radius:16px;
  padding:18px;
  box-shadow:0 14px 40px rgba(0,0,0,0.08);
}

/* ring */
.ring-wrap{position:relative;width:240px;height:240px;margin:auto}
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12}
.ring-bg{stroke:rgba(0,0,0,0.08)}
.ring-progress{
  stroke:var(--accent-2);
  stroke-linecap:round;
  stroke-dasharray:598;
  stroke-dashoffset:598;
}

/* time */
.time-display{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#timeText{font-size:48px;font-weight:800}

/* buttons */
button{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.1);
  cursor:pointer;
}

/* people box */
.people-box{
  background:#1c1c1c;
  color:white;
  padding:14px;
  border-radius:12px;
  width:260px;
}

/* ✅ streak + motivation */
.streak-popup{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.7);
  background:linear-gradient(135deg,#ff9800,#ff4d00);
  color:white;
  padding:18px 26px;
  border-radius:18px;
  font-size:22px;
  font-weight:800;
  z-index:9999;
  opacity:0;
  transition:.35s ease;
}
.streak-popup.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.streak-popup.hidden{display:none;}