:root{
  --bg:#0f0f12;
  --fg:#ffffff;
  --muted:#9aa0a6;
  --red:#c40000;
  --red-pressed:#a20000;
  --card:#16181d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
}
.container{
  max-width:560px; margin:0 auto; padding:24px; display:flex; flex-direction:column; gap:20px;
}
.app-title{margin:8px 0 12px; font-weight:700; text-align:center; letter-spacing:.3px}

.controls{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--card); padding:14px 16px; border-radius:16px;
}
.controls label{color:var(--muted); font-size:14px}
#secondsInput{
  width:120px; font-size:20px; padding:10px 12px; border-radius:12px;
  border:1px solid #2a2e35; background:#0f1216; color:var(--fg); text-align:center;
}

.display{
  font-variant-numeric:tabular-nums;
  text-align:center; font-size:88px; line-height:1; font-weight:800;
  padding:24px 12px; background:transparent; user-select:none;
}

.btn-start{
  display:block; margin:0 auto;
  width:220px; height:220px; border-radius:9999px; border:none;
  background:var(--red); color:#fff; font-weight:800; font-size:22px;
  box-shadow:0 14px 40px rgba(196,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.08);
  cursor:pointer; transition:transform .06s ease, background .2s ease;
  touch-action:manipulation;
}
.btn-start:active{ transform:scale(.98); background:var(--red-pressed); }

.btn-install{
  display:block; margin:6px auto 0; padding:10px 16px; border-radius:12px;
  border:1px solid #2a2e35; background:#16181d; color:#fff; font-weight:600; cursor:pointer;
}

@media (max-width:420px){
  .btn-start{ width:180px; height:180px; font-size:20px }
  .display{ font-size:72px }
}

/* === Overrides für dein UI (ans Ende von styles.css einfügen) === */

/* 1) "App installieren"-Button zuverlässig ausblenden */
#installButton,
#install-btn,
#install,
.install,
[data-install],
button[aria-label="App installieren"] {
  display: none !important; /* robust, egal wie das Element heisst */
}

/* 2) Roter START-Button: fast volle Breite & deutlich grösser */
#startButton,
#start,
.start-btn,
button.start {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto;
  padding: 2.4rem 1.6rem;           /* mehr Fläche */
  font-size: clamp(2.4rem, 10vw, 4.8rem); /* sehr gross auf Mobile */
  line-height: 1.1;
  border: none;
  border-radius: 9999px;            /* schön rund */
  background: #d32f2f;              /* sattes Rot */
  color: #fff;
  touch-action: manipulation;
}

/* 3) Sekundenzähler über START doppelt so gross (sehr präsent) */
#display,
#counter,
#time,
#timer,
#countdown,
.timer-display {
  font-size: clamp(3.2rem, 16vw, 7.2rem); /* ~2x */
  font-weight: 800;
  text-align: center;
}

/* 4) Zentrierter Inhalt & sinnvolle Maxbreite */
main,
.container,
#app {
  max-width: min(900px, 100%);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  text-align: center;
}

/* 5) Auf grösseren Screens START-Button nicht überbreit wirken lassen */
@media (min-width: 768px) {
  #startButton,
  #start,
  .start-btn,
  button.start {
    max-width: 900px;
  }
}

/* === UI-Update (am Ende von styles.css einfügen) === */

/* START-Button: bleibt vollbreit, wirkt "rund" dank mehr Höhe (Pill-Form) */
#startButton,
#start,
.start-btn,
button.start {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto;
  /* mehr Höhe => rundere Optik */
  padding: clamp(2.8rem, 6vw, 4.8rem) 1.6rem !important; /* oben/unten | links/rechts */
  min-height: clamp(6rem, 14vw, 12rem) !important;
  line-height: 1.1;
  border: none;
  border-radius: 9999px !important;  /* volle Abrundung (Pill) */
  background: #d32f2f;
  color: #fff;
  touch-action: manipulation;
}

/* Sekundenzähler: 3x so gross wie vorher (zuvor: clamp(3.2rem,16vw,7.2rem)) */
#display,
#counter,
#time,
#timer,
#countdown,
.timer-display {
  font-size: clamp(9.6rem, 48vw, 21.6rem) !important; /* = 3x */
  font-weight: 800;
  text-align: center;
}

/* === Kreis-START-Button (ans Ende von styles.css) === */

/* Macht den Button wirklich rund: Breite = Höhe (Kreis) */
#startButton,
#start,
.start-btn,
button.start {
  display: grid !important;          /* Inhalt zentrieren */
  place-items: center !important;
  width: min(92vw, 900px) !important;/* volle Breite (wie jetzt) */
  aspect-ratio: 1 / 1 !important;    /* Höhe = Breite → Kreis */
  height: auto !important;
  margin: 2rem auto !important;

  padding: 0 !important;             /* kein vertikales Padding */
  border: none;
  border-radius: 50% !important;     /* rund */
  background: #d32f2f;
  color: #fff;
  line-height: 1.1;

  /* gut lesbarer Text im Kreis */
  font-size: clamp(2.2rem, 7vw, 3.6rem) !important;

  /* optionaler Glow wie im Screenshot */
  box-shadow: 0 14px 24px rgba(211,47,47,0.35);
}

/* Abstand unterhalb Zeitzähler zum Button halbieren */

/* kompaktere Zahl + weniger Abstand nach unten */
#display,
#counter,
#time,
#timer,
#countdown,
.timer-display {
  line-height: 0.9 !important;
  margin-bottom: 0 !important; /* halber Abstand */
}

/* Button: oberen Aussenabstand halbieren (vorher 2rem) */
#startButton,
#start,
.start-btn,
button.start {
  margin: -10px auto 2rem !important; /* top | horiz | bottom */
}