/* styles/pomodoro.css */
.pom-wrap {
  padding: 28px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(120,80,255,.12), transparent 60%),
    radial-gradient(800px 600px at 120% 20%, rgba(0,200,255,.12), transparent 50%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  transition: box-shadow .22s ease, transform .22s ease, background .3s ease;
}

/* running = tiny lift + slightly brighter */
.pom-wrap.is-running {
  box-shadow: 0 16px 60px rgba(50,120,255,.12), inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateY(-0.5px);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(120,80,255,.16), transparent 60%),
    radial-gradient(800px 600px at 120% 20%, rgba(0,200,255,.16), transparent 50%),
    rgba(255,255,255,0.045);
}

/* micro “tap” on start/stop — very light */
.pom-wrap.kick { animation: kick .14s ease; }
@keyframes kick {
  0%   { transform: translateY(-0.6px) scale(1); }
  50%  { transform: translateY(-0.8px) scale(1.005); }
  100% { transform: translateY(-0.5px) scale(1); }
}

.pom-header {
  display:flex; align-items:center; gap:14px; justify-content:space-between; margin-bottom:10px;
}
#pom-task {
  flex:1; height:46px; padding:0 14px; border-radius:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#e8eefc;
}
.pom-controls { display:flex; gap:8px; }

/* timer */
.pom-timer {
  font-variant-numeric: tabular-nums;
  text-align:center;
  font-size: clamp(64px, 12vw, 160px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.1;
  margin: 8px 0 6px;
  background: linear-gradient(180deg, #e9f0ff 0%, #93a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 34px rgba(72,145,255,0.18);
  transition: text-shadow .22s ease, filter .22s ease, transform .22s ease, opacity .22s ease;
}

/* extremely subtle breath while running (long period, tiny scale) */
.pom-wrap.is-running .pom-timer {
  animation: breathe 6s ease-in-out infinite;
  text-shadow: 0 10px 40px rgba(72,145,255,0.22);
}
@keyframes breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.0035); } /* ~0.35% */
  100% { transform: scale(1); }
}

/* paused = a hair dimmer, no breath */
.pom-wrap.is-paused .pom-timer {
  animation: none;
  filter: saturate(.9) brightness(.95);
  text-shadow: 0 7px 28px rgba(72,145,255,0.16);
}

.pom-phase {
  text-align:center; color:#aabbd8; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  margin-bottom: 14px;
}

/* stats */
.pom-stats {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  margin-bottom: 12px;
}
.pom-stats .stat { padding:12px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); }
.pom-stats .label { color:#9fb2d8; font-size:.9rem; }
.pom-stats .value { color:#e9f0ff; font-weight:800; margin-top:2px; }

.pom-history {
  margin-top: 6px; color:#9fb2d8; font-size: .95rem;
}
.pom-history .item { padding:8px 0; border-top:1px dashed rgba(255,255,255,0.09); }
.pom-history .item:first-child { border-top:none; }

/* Modal */
.pomodal[hidden] { display:none; }
.pomodal {
  position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:saturate(120%) blur(6px);
  display:grid; place-items:center; z-index: 1000;
}
.pomodal-box {
  width:min(520px, 92vw); padding:22px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 60px rgba(0,0,0,.35);
}
.pomodal-title { font-size:1.1rem; font-weight:800; color:#eaf0ff; margin-bottom:8px; }
.pomodal-msg { color:#b6c6e6; margin-bottom:14px; }
.pomodal-score { margin-bottom:14px; }
.pomodal-score select {
  height:40px; padding:0 12px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#e8eefc;
}
.pomodal-actions { display:flex; justify-content:flex-end; gap:8px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pom-wrap, .pom-timer { transition: none !important; animation: none !important; }
  .pom-wrap.is-running, .pom-wrap.is-paused { transform: none !important; }
}

/* responsive */
@media (max-width:980px){
  .pom-stats { grid-template-columns:1fr; }
}