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

/* Dark theme (default) */
:root {
  --bg: transparent;
  --html-bg: #191919;
  --surface: rgba(255, 255, 255, 0.05);
  --border: #242428;
  --text: #ffffff;
  --muted: #5a5a62;
  --accent: #e8c97a;
  --accent-focus: #e8c97a;
  --accent-break: #7ac4e8;
  --accent-long: #a07ae8;
  --accent-deep: #e87a7a;
  --ring-track: #1e1e22;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Light theme via ?theme=light */
:root.light {
  --bg: transparent;
  --html-bg: #ffffff;
  --surface: rgba(0, 0, 0, 0.03);
  --border: #e2e0db;
  --text: #1a1a1a;
  --muted: #8a8a8e;
  --accent: #c4943a;
  --accent-focus: #c4943a;
  --accent-break: #4a9ebb;
  --accent-long: #7a5abb;
  --accent-deep: #bb4a4a;
  --ring-track: #eae8e3;
}

html { background: var(--html-bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.6s ease;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  animation: fade-in 0.5s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mode tabs */
.modes {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.mode-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.mode-group button {
  padding: 0.45rem 1rem;
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.25s ease;
}

.mode-group button:last-child { border-right: none; }

.mode-group button.active {
  color: #0c0c0e;
  font-weight: 500;
  background: var(--accent);
}

:root.light .mode-group button.active {
  color: #ffffff;
}

.modes-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

/* Ring */
.ring {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: 2rem;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(90deg) scaleX(-1);
}

.ring-track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 2;
}

.ring-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.4s ease;
}

.ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.time {
  font-family: var(--font);
  font-size: 3.2rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  transition: color 0.4s ease, opacity 0.3s ease;
}

/* Controls */
.controls {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.btn-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-play:active { transform: scale(0.95); }

.btn-play.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.btn-reset {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-reset:hover { color: var(--text); border-color: var(--muted); }
.btn-reset:active { transform: scale(0.95); }

svg.icon { pointer-events: none; }

/* Completion pulse */
@keyframes bg-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}

body.pulse { animation: bg-pulse 0.8s ease; }

/* Mode fade */
.time.switching { opacity: 0.3; }

/* ── Compact (embedded in iframe) ── */
html.compact body {
  min-height: 0;
  align-items: flex-start;
}

html.compact .container {
  padding: 1rem 1rem 0.5rem;
}

html.compact .modes {
  margin-bottom: 1rem;
}

html.compact .ring {
  width: 160px;
  height: 160px;
  margin-bottom: 1rem;
}

html.compact .time {
  font-size: 2.4rem;
}

@media (max-width: 300px) {
  .ring { width: 180px; height: 180px; }
  .time { font-size: 2.6rem; }
  .container { padding: 1rem; }
}