/* Maßstab – game specific styles (shared styles: ../shared/base.css) */

.labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.label { display: flex; align-items: flex-start; gap: 8px; }
.label.target { text-align: right; flex-direction: row-reverse; }
.label b { display: block; }
.swatch { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 3px; }
.label.ref .swatch { background: var(--ref); }
.label.target .swatch { background: var(--target); }

:root { --ref: #8a97a8; --target: #344966; --actual: #bfcc94; }
@media (prefers-color-scheme: dark) { :root { --ref: #6f819a; --target: #b4cded; } }
html.halloween { --ref: #6f819a; --target: #b4cded; }

#stage {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
#stage .ground { stroke: var(--line); stroke-width: 2; }
#stage .ref { color: var(--ref); fill: var(--ref); }
#stage .target { color: var(--target); fill: var(--target); }
#stage .actual { color: var(--actual); fill: var(--actual); opacity: 0.6; }
#stage .guess { opacity: 0.8; }
#stage .cut { fill: var(--card); }
#stage .actual .cut { fill: none; }

.controls { margin-top: 14px; text-align: center; }
.estimate { margin: 0 0 8px; font-size: 1.05rem; }
.estimate b { color: var(--accent); }

.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step { width: 44px; height: 44px; padding: 0; font-size: 1.4rem; line-height: 1; flex: none; }

#slider {
  flex: 1;
  height: 44px;
  accent-color: var(--accent);
  cursor: pointer;
}

.controls .btn { min-width: 180px; }

.round-result, .final {
  margin-top: 14px;
  padding: 18px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.round-result .points { font: 700 2rem "Outfit", system-ui, sans-serif; color: var(--accent); }
.round-result p { margin: 6px 0; }
.round-result .legend { font-size: 0.85rem; color: var(--muted); }
.round-result .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; }

.final h2 { font: 700 1.6rem "Outfit", system-ui, sans-serif; margin: 0; }
.final .total { font: 700 3rem "Outfit", system-ui, sans-serif; color: var(--accent); margin: 4px 0; }
.final ol { list-style: none; padding: 0; margin: 16px auto; max-width: 420px; text-align: left; }
.final li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.final .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.final .next { color: var(--muted); font-size: 0.9rem; margin-top: 14px; }