*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #e4e9f0;
  --shadow-dark: #bec3cc;
  --shadow-light: #ffffff;
  --text: #8e95a3;
  --text-heading: #9aa1b0;
  --accent: #a7b5d4;
  --accent-bg: rgba(167, 181, 212, 0.12);
}

html, body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
  padding-left: calc(1.5rem + env(safe-area-inset-left));
  padding-right: calc(1.5rem + env(safe-area-inset-right));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
}

/* Above-fold area: button centered in viewport */
.above-fold {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  width: 100%;
  max-width: 360px;
  position: relative;
}

/* Title */
.app-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #b3b9c6;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  margin-bottom: 2rem;
}

/* Disc wrapper */
.disc-wrapper {
  position: relative;
  margin-bottom: 2rem;
}

/* Wobble on the wrapper */
.disc-wrapper.hit {
  animation: wobble 0.5s ease-out;
}

@keyframes wobble {
  0%   { scale: 1; }
  15%  { scale: 0.94; }
  30%  { scale: 1.03; }
  45%  { scale: 0.98; }
  60%  { scale: 1.01; }
  100% { scale: 1; }
}

/* Hit button */
.hit-btn {
  width: clamp(200px, 55vw, 260px);
  height: clamp(200px, 55vw, 260px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 10px 10px 20px var(--shadow-dark),
              -10px -10px 20px var(--shadow-light),
              6px 6px 12px var(--shadow-dark),
              -6px -6px 12px var(--shadow-light);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}

.hit-btn:active {
  opacity: 0.85;
}

/* Dot ring — transparent overlay that spins */
.dot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.dot-ring::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 3px 3px 6px var(--shadow-dark),
              inset -3px -3px 6px var(--shadow-light);
}

.dot-ring.spin {
  animation: dot-spin 2.55s cubic-bezier(0.1, 0.4, 0.3, 1);
}

@keyframes dot-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes iridescent {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.count {
  display: block;
  font-size: clamp(5.3rem, 19.8vw, 10.6rem);
  transform: translateY(5px);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  color: var(--shadow-dark);
  line-height: 1;
  font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 50;
  background: linear-gradient(135deg, #cdd6e8, #d5c6e2, #c3d6e0, #d3cde4);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: iridescent 6s ease infinite;
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.08))
          drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.9));
}

.time-since {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top));
  font-size: 0.9rem;
  color: #b0b6c2;
}

/* Undo toast */
.toast {
  position: fixed;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #b0b6c2;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.toast.visible {
  opacity: 1;
  pointer-events: auto;
}

.toast[hidden] {
  display: none;
}

.toast-undo {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.25rem 0.25rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Weekly card */
.weekly-card {
  width: 100%;
  max-width: 360px;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 8px 8px 18px var(--shadow-dark),
              -8px -8px 18px var(--shadow-light);
}

.weekly-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #b3b9c6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

/* Weekly rows */
.week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
}

.week-row.today {
  background: var(--accent-bg);
}

.week-day {
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.week-day .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.week-count {
  font-size: 0.95rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  min-width: 2ch;
  text-align: right;
}

.week-count.empty {
  color: #bbb;
  font-weight: 400;
}