:root {
  --ink: #12151c;
  --muted: #6b7280;
  --bg: #0f1117;
  --card: #171a23;
  --border: #262b38;
  --accent: #38bdf8;
  --max: 1100px;
  --wide: 1400px;
  --content: 760px;

  /* text that sits directly over the scene photo/scrim — auto-switched by JS
     (via the .scene-theme-light class on body) based on sampled photo brightness */
  --photo-text: #f4f6fb;
  --photo-nav: #cbd2e0;
  --photo-muted: #9aa2b1;
}

body.scene-theme-light {
  --photo-text: #211b12;
  --photo-nav: #3a3122;
  --photo-muted: #574c3b;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--photo-text);
  background: var(--bg);
  line-height: 1.5;
  transition: color 0.4s ease;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.scene-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}
.scene-bg {
  position: absolute;
  inset: -2%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
  /* light polish only — these are meant to look like beautiful, natural photos */
  filter: saturate(1.05) contrast(1.03) brightness(0.97);
}
.scene-bg.visible { opacity: 1; }
.scene-grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.scene-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,10,12,0) 45%, rgba(8,8,10,0.4) 100%);
}
.scene-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,10,15,0.46) 0%, rgba(9,10,15,0.28) 45%, rgba(9,10,15,0.58) 100%);
  transition: background 0.4s ease;
}
body.scene-theme-light .scene-scrim {
  background: linear-gradient(180deg, rgba(255,252,244,0.4) 0%, rgba(255,252,244,0.22) 45%, rgba(255,252,244,0.52) 100%);
}

.scene-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.scene-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: #cbd2e0;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.scene-btn.active { background: var(--accent); color: #06202b; border-color: var(--accent); }
.scene-btn:hover:not(.active) { border-color: var(--accent); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  max-width: var(--wide);
  margin: 0 auto;
  position: relative;
}
.logo { font-weight: 800; font-size: 1.2rem; color: var(--photo-text); transition: color 0.4s ease; }
.logo span { color: var(--accent); }
/* The header itself is capped at max-width: var(--wide) and centered, so on
   wide viewports "flush right within the header" still leaves a big gap
   before the true edge of the browser window. Pin the nav directly to the
   viewport corner instead so it actually sits at the page's top-right. */
.site-header nav {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 20;
}
.site-header nav a { margin-left: 16px; font-size: 0.9rem; color: var(--photo-nav); transition: color 0.4s ease; }

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 24px 60px;
  text-align: center;
}

.page-title {
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 800;
  margin: 6px 0 4px;
  color: var(--photo-text);
  transition: color 0.4s ease;
}
.subhead { color: var(--photo-muted); margin-top: 0; transition: color 0.4s ease; }
.page-intro {
  max-width: 620px;
  margin: 0 auto 4px;
  padding: 0 8px;
  color: var(--photo-muted);
  font-size: 0.95rem;
  transition: color 0.4s ease;
}

.more-timers {
  max-width: var(--content);
  margin: 32px auto 0;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.more-timers h2 {
  font-size: 1rem;
  color: var(--photo-muted);
  transition: color 0.4s ease;
  margin: 0 0 12px;
}
.more-timers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.more-timers-list a {
  background: var(--card);
  border: 1px solid var(--border);
  color: #cbd2e0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.more-timers-list a:hover { border-color: var(--accent); color: var(--accent); }

.quote-of-day {
  position: relative;
  max-width: 560px;
  margin: 10px auto 22px;
  padding: 8px 26px 4px;
  animation: quote-rise 0.9s ease both;
}
.quote-text {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
  line-height: 1.45;
  color: var(--photo-text);
  margin: 0;
  transition: color 0.4s ease;
}
.quote-char {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}
@keyframes quote-rise {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

.watch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}

.pendulum-stage {
  margin: 0;
  max-width: min(220px, 55vw);
  flex: 0 0 auto;
}
.pendulum-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); }

.pendulum-arm {
  transform-box: view-box;
  transform-origin: 120px 19px;
  transform: rotate(0deg);
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.pendulum-arm.to-left { transform: rotate(34deg); }
.pendulum-arm.to-right { transform: rotate(-34deg); }

.presets {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}
.preset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: #cbd2e0;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.preset-btn.active { background: var(--accent); color: #06202b; border-color: var(--accent); }
.preset-btn:hover:not(.active) { border-color: var(--accent); }

.custom-duration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
}
.custom-duration-label {
  font-size: 0.8rem;
  color: var(--photo-muted);
  transition: color 0.4s ease;
}
.custom-duration-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.custom-duration-row input {
  width: 140px;
  background: var(--card);
  border: 1px solid var(--border);
  color: #f4f6fb;
  padding: 7px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 16px; /* prevents iOS Safari from auto-zooming in on focus */
  text-align: center;
}
.custom-duration-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.custom-duration-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: #cbd2e0;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.custom-duration-row button:hover { border-color: var(--accent); }
.custom-duration-note {
  font-size: 0.78rem;
  color: #f87171;
  min-height: 1.1em;
  margin: 0;
  transition: color 0.2s ease;
}

.ring-wrap {
  position: relative;
  width: min(280px, 62vw);
  height: min(280px, 62vw);
  margin: 0;
  flex: 0 0 auto;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg {
  fill: none;
  stroke: var(--card);
  stroke-width: 14;
}
.ring-fg {
  fill: none;
  stroke: #22c55e;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke 0.3s linear;
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.count-num {
  /* Scales with the ring's own min(280px, 62vw) sizing so the number never
     outgrows a shrunk ring on small phone screens. */
  font-size: clamp(2.4rem, 16vw, 4.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transform: scale(1);
  transition: transform 0.12s ease;
}
.count-num.pulse { transform: scale(1.18); }
.done-label {
  display: none;
  font-size: clamp(1.4rem, 9vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 2px;
  color: #22c55e;
}
.ring-wrap.done .count-num { display: none; }
.ring-wrap.done .done-label { display: block; }
.ring-wrap.pop .ring-fg { filter: drop-shadow(0 0 18px currentColor); }

.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: #f4f6fb;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.controls button:hover { border-color: var(--accent); }
.primary-btn {
  background: var(--accent) !important;
  color: #06202b !important;
  border-color: var(--accent) !important;
}
#sound-btn[aria-pressed="false"] { opacity: 0.5; }

.ad-slot {
  max-width: 1100px;
  margin: 20px auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.75rem;
  border: 1px dashed var(--border);
  background: repeating-linear-gradient(45deg, #14161d, #14161d 10px, #191c25 10px, #191c25 20px);
}
.ad-slot::before { content: "Ad slot"; }

.explainer {
  max-width: var(--content);
  margin: 36px auto 0;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.explainer h2 { font-size: 1.1rem; }
.explainer p { color: var(--photo-muted); font-size: 0.92rem; transition: color 0.4s ease; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 32px 40px;
  max-width: var(--wide);
  margin: 0 auto;
  font-size: 0.82rem;
  color: var(--photo-muted);
  text-align: center;
  transition: color 0.4s ease;
}

#confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0.95;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(100vh) rotate(540deg); opacity: 0.2; }
}

/* Browsers apply "overflow: hidden" to the fullscreen element by default
   (WebKit's UA stylesheet in particular), which blocks scrolling even when
   the page content is taller than the screen. Override it explicitly so
   fullscreen mode stays scrollable. */
body:fullscreen,
body:-webkit-full-screen {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
body:fullscreen .page,
body:-webkit-full-screen .page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
/* .ad-slot normally centers itself with "margin: 20px auto" as a block box.
   Once .page becomes a flex column above, that auto left/right margin takes
   priority over the default stretch alignment (per the flexbox spec), so the
   ad slot collapses to its own content width instead of spanning the page.
   Reset the horizontal margin here so it stretches full width as intended. */
body:fullscreen .page .ad-slot,
body:-webkit-full-screen .page .ad-slot {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* generic page (about/contact/privacy) */
.simple-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  text-align: left;
}
.simple-page h1 { margin-top: 0; }
.simple-page p { color: #cbd2e0; }
.byline { color: var(--muted); font-size: 0.9rem; margin-top: -6px; font-style: italic; }
.accent-word { color: var(--accent); font-weight: 700; }

.contact-form {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin-top: 18px;
}
.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9aa2b1;
  margin: 14px 0 6px;
}
.contact-form label:first-child { margin-top: 0; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  color: #f4f6fb;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* prevents iOS Safari from auto-zooming in on focus */
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form button {
  align-self: flex-start;
  margin-top: 16px;
  background: var(--accent);
  color: #06202b;
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.contact-form button:hover { filter: brightness(1.08); }
.contact-note {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #9aa2b1;
  min-height: 1.2em;
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .site-header { padding: 14px 20px; }
  .site-footer { padding: 18px 20px 32px; }
}

/* ===== Phones =====
   The layout is already fluid (clamp/min()/flex-wrap everywhere), so this
   tier mainly fixes touch-target size and breathing room rather than
   rebuilding the layout. */
@media (max-width: 600px) {
  .site-header { padding: 12px 16px; }
  .logo { font-size: 1.05rem; }
  .site-header nav { top: 15px; right: 16px; }
  .site-footer { padding: 16px 16px 28px; }

  .page { padding: 8px 16px 48px; }

  /* Bigger tap targets (Apple/Material guidelines suggest ~44px min). */
  .scene-btn { padding: 9px 14px; min-height: 40px; }
  .preset-btn { padding: 10px 16px; min-height: 40px; }
  .controls button { padding: 12px 16px; min-height: 44px; }

  .watch-row { gap: 20px; }
  .controls { gap: 8px; }
}

/* ===== Very small phones ===== */
@media (max-width: 360px) {
  .scene-picker { gap: 6px; }
  .scene-btn { padding: 8px 11px; font-size: 0.8rem; }
  .preset-btn { padding: 9px 13px; font-size: 0.85rem; }
  .quote-of-day { padding: 8px 14px 4px; }
}