@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas-neue.woff2") format("woff2");
  font-display: block;
}

:root {
  --prepare: #fdfd48;
  --work: #9cfe4b;
  --rest: #4fc3ff;
  --cycleRest: #ffa53a;
  --done: #ff6fb5;
  --display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #000;
  font-family: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

svg { display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.app {
  --bg: var(--prepare);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
.app[data-phase="work"] { --bg: var(--work); }
.app[data-phase="rest"] { --bg: var(--rest); }
.app[data-phase="cycleRest"] { --bg: var(--cycleRest); }
.app[data-phase="done"] { --bg: var(--done); }

/* Header */
.top {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: min(28cqw, 13dvh);
  padding-top: env(safe-area-inset-top);
  background: #000;
  color: #fff;
  border-bottom: 6px solid #000;
}
.close {
  width: min(28cqw, 13dvh);
  background: #f43a2f;
  display: grid;
  place-items: center;
}
.close svg { width: 45%; stroke-width: 3.2; }
.summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: right;
  padding: 0 6cqw 2.5cqw;
  font-family: var(--display);
  line-height: 0.95;
}
.total { font-size: min(12cqw, 6dvh); }
.name { font-size: min(7cqw, 3.4dvh); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60cqw; }

/* Main */
.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background-color .25s;
}
.tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4cqw 5cqw 0;
}
.tool {
  display: flex;
  align-items: center;
  gap: 3.5cqw;
  font-weight: 800;
  font-size: min(3.6cqw, 2.2dvh);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: left;
  padding: 2cqw 0;
}
.tool svg { width: min(6cqw, 4dvh); flex: none; }
.tool .fill { fill: currentColor; }
#sound-icon .mute, #sound-icon.muted .wave { display: none; }
#sound-icon.muted .mute { display: block; }

.clock {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  line-height: 0.85;
}
.phase { font-size: min(16cqw, 9dvh); text-transform: uppercase; margin-bottom: 0.25em; }
.time {
  font-size: min(48cqw, 28dvh);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.intervals {
  align-self: stretch;
  justify-content: center;
  position: relative;
  padding: 4cqw 5cqw;
}
.intervals svg { position: absolute; right: 7cqw; width: min(8cqw, 5dvh); }

/* Next band */
.next {
  --nbg: var(--work);
  border-top: 6px solid #000;
  height: min(26cqw, 13dvh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='200' viewBox='0 0 88 200'%3E%3Cpath d='M0 0h28l44 100-44 100H0l44-100z' fill='%23fff' fill-opacity='.18'/%3E%3C/svg%3E") left center / auto 100% repeat-x,
    var(--nbg);
}
.next[data-phase="prepare"] { --nbg: var(--prepare); }
.next[data-phase="rest"] { --nbg: var(--rest); }
.next[data-phase="cycleRest"] { --nbg: var(--cycleRest); }
.next[data-phase="done"] { --nbg: var(--done); }
.next-label { font-weight: 800; font-size: min(3.6cqw, 2dvh); text-transform: uppercase; opacity: .6; }
.next-phase { font-family: var(--display); font-size: min(12cqw, 7dvh); line-height: 1; text-transform: uppercase; }

/* Controls */
.controls {
  display: grid;
  grid-template-columns: 1fr min(31cqw, 15dvh) 1fr;
  align-items: center;
  gap: 2cqw;
  padding: 0 2cqw calc(2cqw + env(safe-area-inset-bottom));
  background: #000;
  color: #fff;
}
.counter { text-align: center; }
.counter-label { color: #9a9a9a; font-weight: 800; font-size: min(3.6cqw, 2dvh); text-transform: uppercase; line-height: 1.1; margin-top: 1cqw; }
.counter-value { font-family: var(--display); font-size: min(22cqw, 12dvh); line-height: 1; }
.rounds { color: #1a8cff; }
.cycles { color: #ffc800; }

.play {
  aspect-ratio: 1 / 1.1;
  margin: 2cqw 0;
  background: var(--work);
  color: #000;
  display: grid;
  place-items: center;
}
.play svg { width: 42%; fill: currentColor; stroke-width: 1.5; grid-area: 1 / 1; }
.play .icon-pause, .play .icon-replay { display: none; }
.app.running .play { background: #fff; }
.app.running .play .icon-play { display: none; }
.app.running .play .icon-pause { display: block; }
.app[data-phase="done"] .play .icon-play { display: none; }
.app[data-phase="done"] .play .icon-replay { display: block; stroke: none; }

/* Dialogs */
dialog {
  width: min(92vw, 420px);
  max-height: 85dvh;
  border: 0;
  padding: 0;
  background: #111;
  color: #fff;
}
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
dialog h2 { font-family: var(--display); font-weight: 400; font-size: 36px; margin: 0; line-height: 1; }
dialog label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
dialog input {
  font: inherit;
  width: 7.5em;
  padding: 8px 10px;
  border: 0;
  background: #fff;
  color: #000;
  text-align: right;
}
dialog input[name="name"] { width: 11em; text-align: left; }
dialog input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--work); }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.actions button { padding: 10px 16px; font-weight: 800; text-transform: uppercase; background: #333; }
.actions .primary { background: var(--work); color: #000; }

#interval-list { list-style: none; margin: 0; padding: 0; overflow: auto; max-height: 55dvh; }
#interval-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-left: 8px solid var(--c);
  font-weight: 700;
  text-align: left;
}
#interval-list .current button { background: #333; }
#interval-list .past { opacity: .4; }