/* Design nach Vorbild der iOS-App „pushr":
   pures Schwarz, strikt monochrom, große runde Karten, riesige Zahlen,
   durchgehend Kleinschreibung, geometrische Schrift (Poppins). */

@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(fonts/poppins-800.woff2) format('woff2'); }

:root {
  --bg: #000000;
  --card: #141414;
  --card-inner: #1e1e1e;
  --fill: #2c2c2e;
  --text: #ffffff;
  --dim: #8e8e93;
  --dimmer: #5a5a5e;
  --danger: #ff453a;
  /* Monochrom bleibt die Basis: weiß = tagesziel erfüllt.
     Gold ist die einzige Farbe und bedeutet genau eine Sache:
     tagessieger — höchste zahl ab 100, immer nur eine person. */
  --gold: #ffc93c;
  --gold-soft: rgba(255, 201, 60, 0.16);
  --radius: 28px;
  --radius-sm: 18px;
  --nav-h: 58px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Durchgehende Kleinschreibung wie bei pushr. Rein visuell — die Daten
     (Namen, Achievement-Texte) bleiben im DOM unverändert.
     Diese eine Zeile entfernen, um zur normalen Schreibweise zurückzukehren. */
  text-transform: lowercase;
}

.view {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 14px calc(var(--nav-h) + 28px);
}
.spacer { height: 16px; }

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 6px 16px;
}
.brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dim);
}
.brand b { font-weight: 800; color: var(--text); }
/* Kein Schriftzug oben — nur das Datum als ruhiger Anker links */
.topbar-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--dimmer);
}
.icon-btn {
  background: var(--card);
  border: none;
  border-radius: 999px;
  color: var(--dim);
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-btn:active { background: var(--card-inner); }

.title-note {
  float: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--dimmer);
  padding-top: 4px;
}

/* ===== Karten ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  overflow: hidden;
}
.card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

/* ===== Hero ===== */
.hero-main {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.hero-num {
  font-size: 88px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum";
}
.hero-label {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  padding-bottom: 4px;
}
/* Ab vier Stellen wird es neben dem Label eng — Zahl mitskalieren,
   sonst wird „liegestütze heute" am Kartenrand abgeschnitten. */
.hero-num.digits-4 { font-size: 72px; }
.hero-num.digits-5 { font-size: 56px; }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
.hero-num.pop { animation: pop 0.4s ease; transform-origin: left center; }

.hero-bar {
  height: 6px;
  background: var(--fill);
  border-radius: 999px;
  margin: 20px 0 10px;
  overflow: hidden;
}
.hero-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--text);
  border-radius: 999px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--dim);
}
.hero-note b { color: var(--text); font-weight: 700; }

/* Ziel erfüllt bleibt weiß, nur der Tagessieger wird gold */
.hero.leader .hero-num { color: var(--gold); }
.hero.leader .hero-bar i { background: var(--gold); }
.hero.leader { box-shadow: inset 0 0 0 1.5px var(--gold-soft); }

/* ===== Auth ===== */
#view-auth { display: flex; min-height: 100dvh; align-items: center; }
.auth-wrap { width: 100%; padding: 32px 10px; }
/* Die Zahl ist das Logo — letzte Null in Gold, wie im App-Icon */
.auth-mark {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--text);
  line-height: 1;
}
.auth-mark b { font-weight: 800; color: var(--gold); }
.auth-sub {
  color: var(--dim);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 14px 0 38px;
}
#auth-form { display: flex; flex-direction: column; gap: 10px; }
#auth-form input {
  background: var(--card);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 18px 20px;
  outline: none;
}
#auth-form input::placeholder { color: var(--dimmer); font-weight: 500; }
#auth-form input:focus { background: var(--card-inner); }
.auth-hint { color: var(--dimmer); font-size: 13px; margin-top: 20px; line-height: 1.5; }
.auth-error { color: var(--danger); font-size: 14px; font-weight: 600; margin-top: 14px; }

.btn-primary {
  background: var(--text);
  border: none;
  border-radius: var(--radius-sm);
  color: #000;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 18px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.btn-primary:active { transform: scale(0.98); opacity: 0.85; }

/* ===== Schnell-Buttons ===== */
.quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.btn-quick {
  background: var(--card);
  border: none;
  border-radius: 999px;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 17px 0;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.btn-quick:active { transform: scale(0.95); background: #fff; color: #000; }
/* freies Zahlenfeld steht als vierte Pille neben den Schnell-Buttons */
.custom-input {
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  min-width: 0;
}
.custom-input::-webkit-outer-spin-button,
.custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.custom-input::placeholder { color: var(--dimmer); font-weight: 600; }
.custom-input:focus { background: var(--card-inner); }

/* Bestätigen erscheint erst, sobald eine Zahl getippt wurde */
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.custom-form { margin-bottom: 8px; animation: confirmIn 0.18s ease; }
.btn-confirm {
  width: 100%;
  background: var(--text);
  border: none;
  border-radius: 999px;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 15px;
  cursor: pointer;
}
.btn-confirm:active { opacity: 0.85; }

/* ===== Chips (heutige Einträge) ===== */
/* nowrap: die Zeile darf nie umbrechen, egal wie viele Einträge es gibt */
.chips { display: flex; flex-wrap: nowrap; gap: 7px; margin-bottom: 12px; overflow: hidden; }
.chip {
  background: var(--card);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  white-space: nowrap;
}
.chip b { color: var(--text); font-weight: 700; font-feature-settings: "tnum"; }
.chip button {
  background: var(--fill);
  border: none;
  border-radius: 999px;
  color: var(--dim);
  cursor: pointer;
  font-size: 12px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.chip button:hover { background: var(--danger); color: #fff; }
/* Sammelhinweis auf ältere Einträge — kein Eintrag, also zurückhaltender */
.chip-more { background: none; box-shadow: inset 0 0 0 1px var(--card-inner); color: var(--dimmer); }

/* ===== Wochen-Kapseln (pushr-Signature) ===== */
.week-caps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cap {
  position: relative;
  border-radius: 999px;
  aspect-ratio: 42 / 68;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0 9px;
  overflow: hidden;
}
.cap .cap-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--fill);
  z-index: 0;
}
.cap .dot {
  width: 40%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--fill);
  position: relative;
  z-index: 1;
}
.cap .d {
  font-size: 13px;
  font-weight: 700;
  color: var(--dimmer);
  position: relative;
  z-index: 1;
}
.cap.done { background: var(--text); }
.cap.leader { background: var(--gold); }
.cap.done .dot, .cap.leader .dot { background: #000; }
.cap.done .d, .cap.leader .d { color: #000; }
.cap.partial .dot { background: #48484a; }
.cap.partial .d { color: var(--dim); }
.cap.is-today:not(.done):not(.leader) { box-shadow: inset 0 0 0 1.5px var(--fill); }
.cap.future { opacity: 0.35; }

/* ===== Wochenraster: alle Personen × Mo–So ===== */
.week-grid { display: flex; flex-direction: column; gap: 10px; }
.wg-head, .wg-row {
  display: grid;
  grid-template-columns: 96px repeat(7, 1fr);
  gap: 5px;
  align-items: center;
}
.wg-head span {
  font-size: 11px;
  font-weight: 600;
  color: var(--dimmer);
  text-align: center;
}
.wg-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}
.wg-row.me .wg-name { color: var(--text); }
.wg-cell {
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--fill);
  position: relative;
  overflow: hidden;
}
.wg-cell .wg-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #48484a;
}
.wg-cell.done { background: var(--text); }
.wg-cell.leader { background: var(--gold); }
.wg-cell.future { opacity: 0.3; }
/* laufender Tag: hier ist noch nichts entschieden */
.wg-head span.is-today { color: var(--text); font-weight: 700; }
.wg-cell.is-today { box-shadow: 0 0 0 1.5px var(--fill); }
.wg-cell.is-today.leader { box-shadow: 0 0 0 1.5px var(--gold-soft); }

/* Kompakte Variante: 4-Wochen-Historie, schmalere Beschriftungsspalte */
.week-grid.compact .wg-head,
.week-grid.compact .wg-row { grid-template-columns: 46px repeat(7, 1fr); }
.week-grid.compact { gap: 7px; }
.wg-week {
  font-size: 11px;
  font-weight: 600;
  color: var(--dimmer);
  font-feature-settings: "tnum";
}
.wg-row.this-week .wg-week { color: var(--dim); }

/* ===== Wochen-/Monatssieger ===== */
.winners { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.winner-card {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.winner-lbl { font-size: 12px; font-weight: 500; color: var(--dim); }
.winner-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.winner-card.is-me .winner-name { color: var(--gold); }
.winner-total { font-size: 12px; color: var(--dimmer); font-feature-settings: "tnum"; }

/* ===== Personen-Liste ===== */
.people { display: flex; flex-direction: column; }
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--card-inner);
}
.person:first-child { border-top: none; padding-top: 0; }
.person-info { flex: 1; min-width: 0; }
.person-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-name .me-tag { color: var(--dimmer); font-weight: 600; }
.person-sub { font-size: 12px; color: var(--dim); margin-top: 1px; }
.person-bar {
  height: 4px;
  background: var(--fill);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.person-bar i {
  display: block;
  height: 100%;
  background: var(--dim);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.person.done .person-bar i { background: var(--text); }
.person.leader .person-bar i { background: var(--gold); }
.person-score {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
  color: var(--dim);
  min-width: 52px;
  text-align: right;
}
.person.done .person-score { color: var(--text); }
.person.leader .person-score { color: var(--gold); }
/* Haken bei erreichten 100 — beim Tagessieger derselbe Haken in Gold */
.person-check {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--text);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}
.person.leader .person-check { background: var(--gold); }

/* ===== Feed ===== */
.feed { display: flex; flex-direction: column; }
.feed-item {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--dim);
  padding: 11px 0;
  border-top: 1px solid var(--card-inner);
}
.feed-item:first-child { border-top: none; padding-top: 0; }
.feed-item .who { color: var(--text); font-weight: 700; }
.feed-item b { color: var(--text); font-weight: 700; }
.feed-item .when { color: var(--dimmer); font-size: 12px; }
.feed-item .amount { color: var(--text); font-weight: 700; font-feature-settings: "tnum"; }
.feed-item.is-ach b { color: var(--gold); }
.feed-empty, .board-empty { color: var(--dimmer); font-size: 14px; }

/* ===== Tabs / Leaderboard ===== */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--card);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 12px;
}
.tab {
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 11px 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tab.active { background: var(--text); color: #000; }

.board-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--dimmer);
  line-height: 1.5;
  padding: 0 8px 10px;
  margin-top: -4px;
}
.board-note b { color: var(--gold); font-weight: 700; }

.board-list { display: flex; flex-direction: column; }
.board-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--card-inner);
}
.board-row:first-child { border-top: none; padding-top: 0; }
.board-rank {
  font-size: 15px;
  font-weight: 800;
  color: var(--dimmer);
  min-width: 26px;
  font-feature-settings: "tnum";
}
.board-row.r1 .board-rank { color: var(--text); }
.board-row.leader .board-rank,
.board-row.leader .board-value { color: var(--gold); }
.board-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-name .me-tag { color: var(--dimmer); font-weight: 600; }
.board-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}
.board-value small { color: var(--dimmer); font-weight: 600; font-size: 12px; letter-spacing: 0; }

/* ===== Legende ===== */
.cell {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--fill);
  display: inline-block;
  flex: none;
}
/* halb gefüllt, genau wie ein angefangener Tag im Raster aussieht */
.cell.l1 { background: linear-gradient(to top, #48484a 50%, var(--fill) 50%); }
.cell.l3 { background: var(--text); }
.cell.gold { background: var(--gold); }
.cell.ring { background: var(--fill); box-shadow: 0 0 0 1.5px var(--fill); }
.grid-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 4px;
  color: var(--dimmer); font-size: 11px; font-weight: 500; margin-top: 14px;
}
.grid-legend span { margin-right: 7px; }

/* ===== Errungenschaften-Liste ===== */
.ach-list { display: flex; flex-direction: column; }
.ach-item {
  padding: 13px 0;
  border-top: 1px solid var(--card-inner);
}
.ach-item:first-child { border-top: none; padding-top: 0; }
.ach-item .t { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.ach-item .d { color: var(--dim); font-size: 13px; margin-top: 3px; line-height: 1.45; }

/* antippbar: Errungenschaften lassen sich zum Nachlesen öffnen */
.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tappable:active { opacity: 0.55; }

/* ===== Bottom-Nav ===== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid #1c1c1c;
  display: flex;
  z-index: 10;
}
.nav-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--dimmer);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.nav-btn.active { color: var(--text); }

/* ===== Tagesabschluss ===== */
.result-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 26px;
}
@keyframes resultIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-card {
  max-width: 380px;
  width: 100%;
  animation: resultIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-day {
  font-size: 12px;
  font-weight: 600;
  color: var(--dimmer);
}
.result-headline {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 8px 0 2px;
}
.result-headline.is-gold { color: var(--gold); }
.result-score {
  font-size: 15px;
  font-weight: 600;
  color: var(--dim);
  font-feature-settings: "tnum";
}
.result-text {
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: 26px 0 10px;
}
.result-meta {
  color: var(--dimmer);
  font-size: 13px;
  margin-bottom: 28px;
  font-feature-settings: "tnum";
}
.result-card .btn-primary { width: 100%; }

/* ===== Achievement-Overlay ===== */
.ach-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 22px;
}
@keyframes achIn {
  from { transform: scale(0.85) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.ach-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 24px 22px;
  max-width: 360px;
  width: 100%;
  animation: achIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ach-banner {
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
}
.ach-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 10px 0 12px;
}
.ach-text { color: var(--dim); font-size: 15px; line-height: 1.45; margin-bottom: 26px; }
.ach-card .btn-primary { width: 100%; }

/* ===== Toast & Konfetti ===== */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 18px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-inner);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 40;
  white-space: nowrap;
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 45; }

@media (min-width: 480px) {
  .hero-num { font-size: 104px; }
  .hero-num.digits-4 { font-size: 88px; }
  .hero-num.digits-5 { font-size: 70px; }
}