* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #111;
  color: #eee;
  font-family: system-ui, sans-serif;
}
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app { max-width: 480px; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h3 { margin: 1rem 0 0.4rem; }
p.muted, .muted { color: #999; }

button {
  font-size: 1.1rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  display: block;
  width: 100%;
  margin: 0.5rem 0;
}
.primary-btn { background: #3aa0ff; color: #111; font-weight: bold; }
.link-btn { background: transparent; color: #6bd1ff; text-decoration: underline; }
.back-btn { background: transparent; color: #aaa; width: auto; padding: 0.4rem 0; }

.card { background: #1b1b1b; border-radius: 0.6rem; padding: 0.8rem; margin: 0.6rem 0; line-height: 1.5; }
.card.success { border-left: 4px solid #9fe870; }
.card.fail { border-left: 4px solid #ff6b6b; }

.streak { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.streak-day {
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #222; font-size: 0.8rem; color: #666;
}
.streak-day.practiced { background: #3aa0ff; color: #111; font-weight: bold; }
.streak-day.today { box-shadow: 0 0 0 2px #ffd166; color: #eee; }
.streak-day.today.practiced { box-shadow: 0 0 0 2px #ffd166; }
.streak-label { font-size: 0.8rem; color: #999; margin-top: 0.5rem; }

.option-card {
  display: block; background: #1b1b1b; border-radius: 0.6rem; padding: 0.8rem;
  margin: 0.5rem 0; cursor: pointer;
}
.option-card input[type="radio"] { margin-right: 0.5rem; }
.option-card p { margin: 0.3rem 0; color: #aaa; font-size: 0.9rem; }
.option-card input[type="number"] { font-size: 1rem; width: 4rem; padding: 0.2rem; }

.status { min-height: 1.4rem; color: #ffd166; margin-top: 0.5rem; }
.warn { color: #ff6b6b; font-weight: bold; min-height: 1.2rem; }

.countin { font-size: 3rem; text-align: center; min-height: 4rem; color: #ffd166; }

.approach-lane {
  position: relative; height: 14rem; background: #1b1b1b; border-radius: 0.6rem;
  overflow: hidden; margin: 0.8rem 0;
}
.approach-hitline {
  position: absolute; left: 0.5rem; right: 0.5rem; top: 80%; height: 4px;
  background: #3aa0ff; border-radius: 2px; transition: background 0.1s ease-out;
}
.approach-hitline.flash { background: #ffd166; box-shadow: 0 0 12px #ffd166; }
.approach-note {
  position: absolute; left: 50%; width: 2.4rem; height: 2.4rem; margin-left: -1.2rem;
  border-radius: 50%; background: #6bd1ff;
}
.approach-note.countin { background: #555; }
.approach-countin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; font-weight: bold; color: #ffd166; pointer-events: none;
}

.live-marker { position: relative; height: 2.5rem; background: #1b1b1b; border-radius: 0.4rem; margin: 1rem 0; }
.live-marker-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  background: #6bd1ff; color: #111; font-size: 0.75rem; font-weight: bold;
  padding: 0.2rem 0.4rem; border-radius: 0.3rem; white-space: nowrap;
}
.hitcount { text-align: center; font-size: 1.5rem; margin: 0.5rem 0; }

.stats-row { display: flex; gap: 0.5rem; margin: 1rem 0; }
.stat { flex: 1; background: #1b1b1b; border-radius: 0.6rem; padding: 0.6rem; text-align: center; }
.stat-value { display: block; font-size: 1.3rem; font-weight: bold; }
.stat-label { display: block; font-size: 0.75rem; color: #999; }

.deviation-graph { width: 100%; background: #1b1b1b; border-radius: 0.4rem; }
.graph-caption { text-align: center; color: #999; font-size: 0.8rem; margin-bottom: 0.5rem; }

.week-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.85rem; }
.week-table th, .week-table td { padding: 0.4rem; text-align: left; border-bottom: 1px solid #222; }