/* Gemeinsamer Pomodoro-Timer. Die Werte stammen 1:1 aus dem Design-Handoff
   (Canvas 1440×900). Die oklch-Farben setzen Chrome 111 / Safari 15.4 /
   Firefox 113 voraus. */

/* Jost, SIL Open Font License 1.1 — Lizenztext in assets/fonts/OFL.txt, muss
   mitgeliefert werden. Variable Font: eine Datei je Zeichensatz deckt alle
   Gewichte ab, daher font-weight als Bereich. Latin-Ext nur für Namen mit
   ł, ş oder č — weglassen spart 17 KB. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --grad-1: oklch(0.44 0.15 277);
  --grad-2: oklch(0.33 0.14 287);
  --grad-3: oklch(0.25 0.11 301);
  --grad-4: oklch(0.18 0.08 283);
  --blob-1: oklch(0.6 0.17 273 / 0.5);
  --blob-2: oklch(0.5 0.15 310 / 0.45);
  --vignette: oklch(0.14 0.06 283 / 0.5);

  --surface-05: oklch(1 0 0 / 0.05);
  --surface-06: oklch(1 0 0 / 0.06);
  --surface-07: oklch(1 0 0 / 0.07);
  --surface-09: oklch(1 0 0 / 0.09);
  --surface-12: oklch(1 0 0 / 0.12);
  --surface-14: oklch(1 0 0 / 0.14);
  --line-10: oklch(1 0 0 / 0.1);
  --line-12: oklch(1 0 0 / 0.12);
  --line-16: oklch(1 0 0 / 0.16);
  --line-20: oklch(1 0 0 / 0.2);
  --line-30: oklch(1 0 0 / 0.3);
  --line-34: oklch(1 0 0 / 0.34);

  --text: oklch(0.95 0.02 300);
  --text-90: oklch(0.94 0.02 300 / 0.9);
  --text-85: oklch(0.94 0.02 300 / 0.85);
  --text-75: oklch(0.88 0.03 300 / 0.75);
  --text-70: oklch(0.88 0.04 300 / 0.7);
  --text-60: oklch(0.88 0.03 300 / 0.6);
  --text-55: oklch(0.9 0.03 300 / 0.55);

  --accent-live: oklch(0.82 0.13 200);
  --accent-glow: oklch(0.82 0.13 200 / 0.8);
  --avatar-fill: oklch(0.72 0.11 300 / 0.35);
  --avatar-line: oklch(0.85 0.08 300 / 0.4);
  --primary-fill: oklch(0.94 0.02 300 / 0.94);
  --primary-text: oklch(0.3 0.12 296);
  --ring-progress: oklch(0.9 0.07 300 / 0.9);
  --ring-core: oklch(0.78 0.12 296 / 0.28);

  /* Werden in den Media Queries überschrieben. */
  --dial-size: 520px;
  --clock-size: 150px;
  --gutter: 56px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  /* Fallback aus dem Handoff, sichtbar hinter dem fixierten Verlauf. */
  background: #17102b;
}

body {
  min-height: 100vh;
  font-family: Jost, Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Hintergrund */

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Fixiert, damit niedrige Fenster scrollen können, ohne den Verlauf zu zerren. */
.stage__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(
    158deg,
    var(--grad-1) 0%,
    var(--grad-2) 38%,
    var(--grad-3) 68%,
    var(--grad-4) 100%
  );
}

.stage__blobs {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(42% 46% at 28% 24%, var(--blob-1), transparent 70%),
    radial-gradient(38% 40% at 78% 76%, var(--blob-2), transparent 72%);
  filter: blur(20px);
  animation: drift 34s ease-in-out infinite;
}

.stage__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 50%, transparent 40%, var(--vignette) 100%);
}

@keyframes drift {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

@keyframes breathe {
  0%,
  100% { transform: scale(1); opacity: 0.55; }
  50%  { transform: scale(1.06); opacity: 0.8; }
}

/* Header */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 28px var(--gutter);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.presence {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--line-10);
  border-radius: 999px;
  background: var(--surface-07);
}

.pill--more {
  padding: 7px 8px;
}

.pill__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--avatar-line);
  border-radius: 50%;
  background: var(--avatar-fill);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.pill__name {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-85);
  white-space: nowrap;
}

/* Die eigene Pille ist zum Umbenennen direkt editierbar. */
.pill--you .pill__name {
  min-width: 1ch;
  padding: 0 2px;
  border-radius: 4px;
  outline: none;
  cursor: text;
  transition: background 0.25s ease;
}

.pill--you .pill__name:hover,
.pill--you .pill__name:focus {
  background: var(--surface-12);
}

.pill__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-live);
}

.share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border: 1px solid var(--line-16);
  border-radius: 999px;
  background: var(--surface-05);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.share:hover {
  background: var(--surface-12);
  border-color: var(--line-30);
}

/* Ring und Zeitwert */

.stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.dial {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dial-size);
  height: var(--dial-size);
}

.dial__core {
  position: absolute;
  /* 54px von 520px — als Prozentwert skaliert der Kern mit dem Ring mit. */
  inset: 10.3846%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ring-core), transparent 68%);
  animation: breathe 11s ease-in-out infinite;
}

.dial__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dial__track {
  fill: none;
  stroke: var(--line-12);
  stroke-width: 2;
}

.dial__progress {
  fill: none;
  stroke: var(--ring-progress);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.9s linear;
}

.dial__readout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.dial__phase {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-70);
}

.dial__clock {
  font-size: var(--clock-size);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 8px 60px oklch(0.3 0.12 300 / 0.6);
}

/* Buttons */

.controls {
  display: flex;
  align-items: center;
  gap: 22px;
}

.btn {
  border-radius: 999px;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

.btn--primary {
  min-width: 300px;
  padding: 24px 56px;
  border: none;
  background: var(--primary-fill);
  color: var(--primary-text);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.1em;
  box-shadow: 0 22px 60px oklch(0.2 0.1 296 / 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 70px oklch(0.2 0.1 296 / 0.55);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--ghost {
  padding: 24px 46px;
  border: 1px solid var(--line-20);
  background: transparent;
  color: var(--text-90);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.08em;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.btn--ghost:hover {
  background: var(--surface-09);
  border-color: var(--line-34);
}

/* Dauer-Stepper */

.steppers {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 6px;
}

.stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.stepper__label {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-60);
}

.stepper__control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line-10);
  border-radius: 999px;
  background: var(--surface-06);
}

.stepper__btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease;
}

.stepper__btn:hover {
  background: var(--surface-14);
}

/* Sieht aus wie "25 min", ist aber Eingabefeld plus Einheit. Die 66px aus dem
   Handoff gelten für die Gruppe, nicht für das Feld allein. */
.stepper__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 66px;
  font-size: 22px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

/* Bewusst alles ausgeschrieben: mit `font: inherit` allein schlägt das weisse
   Kästchen des Browsers durch, sobald irgendetwas dazwischenkommt. */
.stepper__input {
  -webkit-appearance: none;
  appearance: none;
  width: 2.2ch;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: inherit;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: text;
  transition: background 0.25s ease;
}

.stepper__input:hover {
  background: var(--surface-09);
}

.stepper__input:focus {
  outline: none;
  background: var(--surface-14);
}

/* Die Pfeilchen von Zahlenfeldern würden die +/- Kreise doppeln. */
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.stepper__unit {
  color: inherit;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

/* Beitreten */

.join {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  min-height: 100vh;
  padding: 0 var(--gutter);
  text-align: center;
}

.join__title {
  margin: 0;
  font-size: 46px;
  font-weight: 200;
  letter-spacing: -0.01em;
}

.join__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 420px;
}

.join__input {
  width: 100%;
  padding: 18px 28px;
  border: 1px solid var(--line-20);
  border-radius: 999px;
  background: var(--surface-06);
  color: var(--text);
  font-family: inherit;
  font-size: 22px;
  font-weight: 300;
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.join__input::placeholder {
  color: var(--text-55);
}

.join__input:focus {
  outline: none;
  background: var(--surface-09);
  border-color: var(--line-34);
}

.join__error {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-70);
}

/* Hinweisseite */

.notice {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 100vh;
  padding: 0 var(--gutter);
  text-align: center;
}

.notice__title {
  margin: 0;
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -0.01em;
}

.notice__text {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  color: var(--text-70);
}

.notice .btn--ghost {
  margin-top: 10px;
  text-decoration: none;
  font-size: 17px;
  padding: 18px 34px;
}

:focus-visible {
  outline: 2px solid oklch(0.9 0.07 300 / 0.8);
  outline-offset: 3px;
}

/* Kleinere Bildschirme: dasselbe Layout skaliert über die Variablen mit,
   statt umzubrechen. */

@media (max-width: 1180px), (max-height: 860px) {
  :root {
    --dial-size: 420px;
    --clock-size: 118px;
    --gutter: 36px;
  }

  .btn--primary { min-width: 240px; padding: 19px 44px; font-size: 22px; }
  .btn--ghost   { padding: 19px 36px; font-size: 19px; }
  .steppers     { gap: 36px; }
}

@media (max-width: 820px), (max-height: 700px) {
  :root {
    --dial-size: 320px;
    --clock-size: 84px;
    --gutter: 24px;
  }

  .join__title { font-size: 32px; }
  .join__input { padding: 15px 22px; font-size: 19px; }
  .join { gap: 26px; }
  .stack { gap: 14px; }
  .dial__readout { gap: 12px; }
  .dial__phase { font-size: 13px; letter-spacing: 0.28em; }
  .btn--primary { min-width: 150px; padding: 15px 28px; font-size: 17px; }
  .btn--ghost   { padding: 15px 22px; font-size: 15px; }
  .controls { gap: 12px; }
  .steppers { gap: 22px; }
  .stepper__btn { width: 38px; height: 38px; font-size: 21px; }
  .stepper__value { min-width: 58px; font-size: 19px; }
  .stepper__input,
  .stepper__unit { font-size: 19px; }
}

/* Nur Breite, nicht Höhe: ein niedriges, aber breites Fenster behält die Zeile. */
@media (max-width: 820px) {
  .topbar {
    padding: 20px var(--gutter);
  }

  .topbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 14px;
  }

  .presence { flex-wrap: wrap; }

  .stack {
    width: 100%;
    padding: 0 16px;
  }

  .controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .dial__progress,
  .btn,
  .share,
  .stepper__btn {
    transition: none;
  }
}