/* One light, quiet surface by design. Bold choice lives in one place: the single red end dot. */
:root {
  --bg: #f3f3f1;        /* soft paper white, slightly cool */
  --ink: #222222;
  --ink-dim: #8a8a86;
  --ghost: #dcdcd8;     /* spent dots */
  --signal: #d23a28;    /* used once: session end */
  --f-num: "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-label: "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --dot: 4px;
  --gap: 8px;
  --cols: 20;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-label);
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
#stage {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 36px;
  outline: none;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
}
#stage:focus-visible #minutes { text-decoration: underline 1px var(--ink-dim); text-underline-offset: 10px; }

#dots {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--dot));
  gap: var(--gap);
  position: relative;
  z-index: 1;
}
#dots i {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--ink);
}
#dots i.spent { background: var(--ghost); }
/* a spent dot falls like a raindrop, then its ghost settles back in place */
/* it hangs for a moment, then accelerates all the way down the screen */
#dots i.spent.falling { animation: fall 5s linear both; }
@keyframes fall {
  0%   { transform: translateY(0) scaleY(1);       background: var(--ink); opacity: 1; animation-timing-function: ease-in-out; }
  10%  { transform: translateY(3px) scaleY(1.4);   background: var(--ink); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  84%  { transform: translateY(75vh) scaleY(2.6);  background: var(--ink); opacity: 0.85; }
  88%  { transform: translateY(80vh) scaleY(2.6);  background: var(--ink); opacity: 0; }
  89%  { transform: translateY(0) scaleY(1);       background: var(--ghost); opacity: 0; }
  100% { transform: translateY(0) scaleY(1);       background: var(--ghost); opacity: 1; }
}
/* during a break, dots drift back in from above, like clouds gathering */
#dots i.rising { animation: rise 2.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rise {
  0%   { transform: translateY(-28px); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#minutes, #hint, #end-dot, #durations { position: relative; z-index: 1; }

#minutes {
  font-family: var(--f-num);
  font-weight: 200;
  font-size: clamp(72px, 22vw, 136px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: opacity 1.5s ease, color 1.5s ease;
}
#hint {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  min-height: 1em;
  transition: opacity 0.8s ease;
}
#end-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  transition: opacity 2s ease;
}

#durations {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-block: 28px 12px;
  transition: opacity 0.8s ease;
}
#durations button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink-dim);
  font-family: var(--f-num);
  font-weight: 300;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  padding: 10px 6px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
#durations button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
#durations button:focus-visible { outline: 1px solid var(--ink-dim); outline-offset: 4px; }

/* states */
[data-status="running"] #minutes { opacity: 0.22; }
[data-status="running"] #hint { opacity: 0; }
[data-status="paused"] #minutes { opacity: 0.6; }
[data-status="done"] #end-dot { opacity: 1; }
[data-status="done"] #minutes { opacity: 0.4; }
body:not(.idle) #durations, body:not(.idle) #about-link { opacity: 0; pointer-events: none; }

@media (max-height: 520px) {
  #stage { gap: 20px; }
  #minutes { font-size: clamp(56px, 16vh, 96px); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

#about-link {
  justify-self: center;
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 12px 24px;
  transition: opacity 0.8s ease;
}
#about-link:hover, #about-link:focus-visible { color: var(--ink); outline: none; text-decoration: underline; text-underline-offset: 4px; }

/* break: the hint stays readable, no red end dot */
[data-phase="break"][data-status="running"] #hint { opacity: 1; }
[data-phase="break"] #end-dot { opacity: 0; }