:root {
  --bg: #5c4a36;
  --fg: #f5f7f0;
  --muted: rgba(245, 247, 240, 0.5);
}

.is-hidden {
  display: none !important;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Always-full-coverage backdrop, independent of the orb's own animation.
   A radial-gradient with no explicit size keyword defaults to
   "farthest-corner" sizing, so on a position:fixed, inset:0 element its
   last color stop (var(--bg)) always lands exactly at the viewport edges/
   corners - guaranteed full coverage by construction, not by tuning a
   vmax size to be "big enough". This exists specifically so the orb above
   it is free to shrink for the breathing animation without ever exposing
   the flat body background as bars (the bug that happened when the orb
   itself was relied on for coverage). Do not remove this layer. */
.backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, #bcd49c 0%, #82a564 32%, #44582f 62%, var(--bg) 100%);
  opacity: 0.4;
  pointer-events: none;
}

/* Breathing orb. Scales distinctly per phase (rest at half the viewport,
   slightly exceeding it at full lungs) - the backdrop above guarantees
   coverage, so this is purely the breathing visual now. */

.orb {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 130vmax;
  height: 130vmax;
  transform: translate(-50%, -50%) scale(0.5);
  transition: transform 4s ease-in-out;
  will-change: transform;
  pointer-events: none;
}

.orb.orb--expanded {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Inner element carries the visual fill plus a continuous, independent
   "organic" micro-pulse (scale + opacity). Kept separate from .orb itself
   because a CSS animation and a transitioning class on the same element
   would fight over the transform property - nesting lets them compose. */
.orb-glow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    #eef4e2 0%,
    #c3dba4 28%,
    #87a86c 55%,
    #36482a 80%,
    transparent 100%
  );
  filter: blur(80px);
  opacity: 0.55;
  animation: orb-pulse 7s ease-in-out infinite;
}

@keyframes orb-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.035);
    opacity: 0.65;
  }
}

/* Subtle film grain overlay */

.grain {
  position: fixed;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Layout */

.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
}

.top-stepper {
  position: absolute;
  top: calc(1.75rem + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
}

.bottom-cluster {
  position: absolute;
  bottom: calc(1.75rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.reset-corner {
  position: absolute;
  bottom: calc(1.75rem + env(safe-area-inset-bottom));
  left: calc(1.5rem + env(safe-area-inset-left));
}

.home-corner {
  position: absolute;
  top: calc(1.75rem + env(safe-area-inset-top));
  left: calc(1.5rem + env(safe-area-inset-left));
  text-decoration: none;
}

/* Duration stepper */

.stepper-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stepper-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.duration {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.duration-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}

.duration-btn:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.94);
}

.duration-value {
  min-width: 3.25rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.duration-unit {
  opacity: 0.5;
  margin-left: 0.15rem;
  font-size: 0.85em;
}

/* Phase display */

.phase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.phase-label {
  font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
}

.phase-count {
  font-size: clamp(3rem, 15vw, 6rem);
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.phase-subtitle {
  max-width: 24rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.phase-label--finished {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}

/* Icons - inline SVG so they render as crisp glyphs everywhere instead of
   being substituted with color emoji (which iOS does for characters like
   the play/pause/reset symbols). */

.icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  flex: none;
}

/* Outline (stroke-drawn) icons. A CSS fill rule overrides the SVG's
   fill="none" attribute, so without this the reset icon gets filled into a
   solid blob instead of drawn as an outline. */
.icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-btn .icon {
  width: 1.05em;
  height: 1.05em;
}

.icon-btn .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-btn--primary .icon {
  width: 1.7rem;
  height: 1.7rem;
}

/* Controls */

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.icon-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--fg);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn--primary {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-size: 1.4rem;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.05rem 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.cta-btn:active {
  transform: scale(0.97);
}

.install-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.install-hint {
  max-width: 20rem;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0;
}