/*
 * Colorquiz — Grundoberflaeche (Modus "Klassik").
 *
 * Ruhig gehalten: Klassik ist der Analysemodus, hier soll die Farbe die
 * einzige laute Sache auf dem Bildschirm sein. Der Arcade-Look liegt in
 * arcade.css und ueberschreibt von hier nur, was er braucht.
 */

.tool-page {
  padding: 2rem 1.5rem 3rem;
  min-height: 100vh;
}
.wrap { max-width: 760px; margin: 0 auto; }
h1 { font-size: 18px; font-weight: 500; margin-bottom: 0.25rem; }
.subtitle { font-size: 12px; color: #888; margin-bottom: 1.5rem; }

/* Mini-Status: kompakte Zeile mit Runde + Score + Abbrechen-× */
.mini-status {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.6rem;
  font-size: 12px;
}
.mini-status .ms-round {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #888;
}
.mini-status .ms-round::before { content: "Runde "; font-size: 10px; letter-spacing: 0.05em; }
.mini-status .ms-score {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
}
.mini-status .ms-score::before { content: "★ "; color: #888; }
.mini-status .ms-close {
  background: none; border: none; cursor: pointer;
  color: #aaa; font-size: 22px; line-height: 1; padding: 0 0.25rem;
}
.mini-status .ms-close:hover { color: #1a1a1a; }

/* Start-Screen */
.start { padding-top: 0.5rem; padding-bottom: 6rem; }
.start-title { font-size: 20px; font-weight: 500; margin-bottom: 0.5rem; }
.start-intro { font-size: 12px; color: #666; line-height: 1.55; margin-bottom: 1.75rem; max-width: 540px; }
.start-section { margin-bottom: 2rem; }
.start-section-title {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #888; font-weight: 500; margin-bottom: 0.75rem;
}
.mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.7rem;
}
.mode-card {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 0.85rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.1s, border-color 0.12s;
}
.mode-card:hover { transform: translateY(-2px); border-color: rgba(0,0,0,0.35); }
.mode-card.active { border-color: #1a1a1a; border-width: 1px; box-shadow: 0 0 0 2px rgba(0,0,0,0.06); }
.mode-card .mname { font-size: 13px; font-weight: 500; margin-bottom: 0.35rem; }
.mode-card .mcount { font-size: 10px; color: #888; margin-bottom: 0.5rem; }
.mode-card .mpreview { display: flex; gap: 3px; flex-wrap: wrap; }
.mode-card .mp {
  width: 18px; height: 18px; border-radius: 4px;
  border: 0.5px solid rgba(0,0,0,0.12);
}

.diff-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.diff-btn {
  flex: 1; min-width: 140px;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.diff-btn:hover { border-color: rgba(0,0,0,0.4); }
.diff-btn.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.diff-btn .dname { font-size: 14px; font-weight: 500; }
.diff-btn .ddesc { font-size: 11px; opacity: 0.7; margin-top: 0.2rem; }

/* Sticky Footer mit Quiz-starten-Button — nur auf Start-Screen */
.start-footer {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(245, 244, 240, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-top: 0.5px solid var(--line);
  padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 40;
}
.start-footer .btn.primary { width: 100%; max-width: 540px; margin: 0 auto; display: block; padding: 0.8rem 1.4rem; font-size: 14px; }
body.on-start .start-footer { display: block; }

/* Vergleichs-Swatch */
.compare {
  aspect-ratio: 4 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 0.5px solid rgba(0,0,0,0.12);
  margin-bottom: 0.5rem;
  position: relative;
}
.compare-half { position: relative; height: 100%; width: 100%; }
.compare-half .tag {
  position: absolute;
  top: 0.5rem; left: 0.75rem;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  color: #1a1a1a;
  font-weight: 500;
}
.compare-half.target { background: #ddd; }
.compare-half.mix    { background: #ddd; }
.compare-half.mix .tag { left: auto; right: 0.75rem; }
.compare-half.hidden {
  background: repeating-linear-gradient(45deg, #d8d4cc, #d8d4cc 10px, #e3dfd5 10px, #e3dfd5 20px);
}
.compare-half.hidden::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: rgba(0,0,0,0.25); font-weight: 300;
}

.delta-row {
  display: flex; justify-content: center; align-items: center; gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 14px;
}
.delta-badge {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: #eee;
  color: #555;
}
.delta-badge.good { background: #4a9c4a; color: #fff; }
.delta-badge.ok   { background: #d4a032; color: #fff; }
.delta-badge.bad  { background: #c04040; color: #fff; }

/* Palette */
.palette {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 0.85rem;
  margin-bottom: 1rem;
}
.palette-title {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #888; font-weight: 500; margin-bottom: 0.5rem;
}
.palette-grid {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.pcard {
  flex: 0 0 90px;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s, border-color 0.12s;
  padding: 0;
  font-family: inherit;
}
.pcard:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.4); }
.pcard-swatch { aspect-ratio: 3 / 2; }
.pcard-name {
  font-size: 10px; font-weight: 500;
  padding: 0.3rem 0.45rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slots */
.slots {
  background: #ece9e0;
  border-radius: 10px;
  padding: 0.7rem;
  margin-bottom: 1rem;
  min-height: 60px;
}
.slot {
  position: relative;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 0.6rem 0.75rem 0.55rem;
  margin-bottom: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.slot:last-child { margin-bottom: 0; }
.slot .pname {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 13px;
  padding-right: 2.2rem; /* Platz fürs × oben rechts */
  min-width: 0;
}
.slot .chip { width: 20px; height: 20px; border-radius: 5px; border: 0.5px solid rgba(0,0,0,0.15); flex-shrink: 0; }
.slot .ptitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.slot .slider-row {
  display: flex; align-items: center; gap: 0.7rem;
}
.slot input[type=range] { flex: 1; accent-color: #1a1a1a; min-width: 0; }
.slot .pct {
  font-family: ui-monospace, monospace; font-size: 12px; color: #555;
  text-align: right; min-width: 42px; flex-shrink: 0;
}
.slot .rm {
  position: absolute;
  top: 0.35rem; right: 0.35rem;
  background: #f0ece0;
  border: 0.5px solid rgba(0,0,0,0.15);
  color: #666;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  width: 26px; height: 26px;
  border-radius: 6px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.slot .rm:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.empty-hint { font-size: 11px; color: #888; text-align: center; padding: 0.5rem; }

.actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: space-between;
}
.btn {
  font-family: inherit;
  font-size: 13px;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 0.5px solid rgba(0,0,0,0.18);
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}
.btn:hover { border-color: rgba(0,0,0,0.4); }
.btn.primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn.primary:hover { background: #333; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Modal — Backdrop-Fade + Slide-up */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(20,20,20,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  display: flex;
  align-items: flex-end; justify-content: center;
  z-index: 100;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: background 0.25s ease, backdrop-filter 0.25s ease, opacity 0.25s ease;
  overscroll-behavior: contain;
}
.modal-bg.open {
  background: rgba(20,20,20,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: #f5f4f0;
  border-radius: 18px 18px 0 0;
  border: 0.5px solid rgba(0,0,0,0.15);
  border-bottom: none;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -10px 50px rgba(0,0,0,0.3);
  padding: 1.5rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-bg.open .modal { transform: translateY(0); }
/* Desktop: zentriertes Modal, kein Slide-up */
@media (min-width: 640px) {
  .modal-bg { align-items: center; padding: 1.5rem; }
  .modal {
    border-radius: 18px;
    border-bottom: 0.5px solid rgba(0,0,0,0.15);
    max-height: 90vh;
    transform: scale(0.94);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  }
  .modal-bg.open .modal { transform: scale(1); }
}
.modal-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 3 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid rgba(0,0,0,0.12);
  margin-bottom: 1rem;
}
.modal-half { position: relative; }
.modal-half .lbl {
  position: absolute;
  bottom: 0.5rem; left: 0.65rem;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.9);
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  color: #1a1a1a;
  font-weight: 500;
}
.modal-half.mix .lbl { left: auto; right: 0.65rem; }

.score-row {
  display: flex; justify-content: space-around; align-items: center;
  margin: 1rem 0;
  text-align: center;
}
.score-block .small {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #888; margin-bottom: 0.15rem;
}
.score-block .big {
  font-size: 28px; font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.score-block .big.good { color: #4a9c4a; }
.score-block .big.ok   { color: #d4a032; }
.score-block .big.bad  { color: #c04040; }
.score-block .micro {
  font-size: 10px;
  color: #888;
  margin-top: 0.2rem;
  font-family: ui-monospace, monospace;
}

/* Reveal panel */
.reveal {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 13px;
}
.reveal h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #888; font-weight: 500; margin-bottom: 0.5rem; }
.reveal-line { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.reveal-line .chip { width: 18px; height: 18px; border-radius: 4px; border: 0.5px solid rgba(0,0,0,0.15); }
.reveal-line .name { flex: 1; }
.reveal-line .pct { font-family: ui-monospace, monospace; color: #555; }
.reveal-score { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 0.5px solid rgba(0,0,0,0.08); font-size: 12px; color: #555; }
.recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.recipe-grid > div h3 { margin-bottom: 0.4rem; }
@media (max-width: 480px) {
  .recipe-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* Final screen */
.final {
  text-align: center;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 2rem 1.5rem;
}
.final .total { font-size: 36px; font-weight: 500; margin: 0.5rem 0; font-family: ui-monospace, monospace; }
.final .stars { font-size: 18px; color: #d4a032; margin-bottom: 0.5rem; letter-spacing: 0.15em; }
.final .verdict { font-size: 14px; color: #555; margin-bottom: 1.25rem; }
.final .rounds-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.3rem;
  margin: 1rem 0;
}
.round-tile {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  font-weight: 500;
  line-height: 1;
  gap: 2px;
}
.round-tile .rt-pts  { font-size: 11px; font-family: ui-monospace, monospace; }
.round-tile .rt-diff { font-size: 8px; opacity: 0.7; letter-spacing: 0.05em; }

/* Highscore form */
.hs-form {
  display: flex; gap: 0.5rem; margin: 1.25rem auto 0.4rem;
  max-width: 360px;
}
.hs-form input {
  flex: 1;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 14px;
  border: 0.5px solid rgba(0,0,0,0.2);
  border-radius: 8px;
  background: #fff;
}
.hs-form input:focus { outline: 1px solid #1a1a1a; outline-offset: 1px; }
.hs-note { font-size: 10px; color: #aaa; margin-bottom: 1rem; }
.hs-status { font-size: 12px; margin: 0.5rem 0; min-height: 18px; }
.hs-status.ok  { color: #4a9c4a; }
.hs-status.err { color: #c04040; }
.hs-list-wrap { margin-top: 1.25rem; text-align: left; }
.hs-list-title {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #888; font-weight: 500; margin-bottom: 0.5rem; text-align: center;
}
.hs-list { width: 100%; border-collapse: collapse; font-size: 12px; }
.hs-list td { padding: 0.4rem 0.5rem; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.hs-list .hs-rank  { width: 32px; color: #888; font-family: ui-monospace, monospace; }
.hs-list .hs-name  { font-weight: 500; }
.hs-list .hs-score { text-align: right; font-family: ui-monospace, monospace; font-weight: 500; }
.hs-list .hs-date  { text-align: right; color: #aaa; font-size: 10px; width: 60px; }
.hs-list .hs-row.own { background: rgba(74,156,74,0.12); }
.hs-list .hs-row.own .hs-name { color: #2e7a2e; }
.hs-empty { text-align: center; color: #888; font-style: italic; padding: 1rem; }

@media (max-width: 600px) {
  /* Site-Nav nicht sticky lassen — scrollt auf Mobile mit weg */
  .site-nav { position: static !important; }

  .tool-page { padding: 1rem 1rem 2rem; }
  h1 { font-size: 16px; }
  .subtitle { font-size: 11px; margin-bottom: 1rem; }

  /* Sticky-Header: Status + Compare bleibt beim Scrollen oben */
  .quiz-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg);
    margin: 0 -1rem 0.85rem;
    padding: 0.5rem 1rem 0.6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  /* Status kompakter */
  .status {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 11px;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .status .left, .status .right { gap: 0.4rem; flex-wrap: wrap; }
  .status .label { font-size: 9px; }
  .status .v { font-size: 11px; }
  .status-mode { font-size: 10px; }

  /* Compare flacher auf Mobile damit beides+Slots ungefähr auf einen Screen passen */
  .compare {
    aspect-ratio: 5 / 1;
    margin-bottom: 0;
    border-radius: 10px;
  }
  .compare-half .tag { font-size: 9px; top: 0.35rem; left: 0.5rem; padding: 0.1rem 0.4rem; }
  .compare-half.mix .tag { left: auto; right: 0.5rem; }
  .compare-half.hidden::after { font-size: 32px; }

  /* Palette kompakter */
  .palette { padding: 0.6rem; margin-bottom: 0.6rem; }
  .palette-title { font-size: 9px; margin-bottom: 0.4rem; }
  .pcard { flex: 0 0 70px; }
  .pcard-name { font-size: 10px; padding: 0.25rem 0.4rem; }

  /* Slots kompakter */
  .slots { padding: 0.5rem; }
  .slot { padding: 0.5rem 0.65rem; gap: 0.35rem; margin-bottom: 0.35rem; }
  .slot .pname { font-size: 12px; }
  .slot .chip { width: 18px; height: 18px; }

  .actions { margin-top: 0.5rem; }
  .btn { font-size: 12px; padding: 0.5rem 0.9rem; }

  /* Endscreen kompakter */
  .final { padding: 1.25rem 1rem; border-radius: 12px; }
  .final .total { font-size: 28px; }
  .final .stars { font-size: 16px; }
  .final .verdict { font-size: 13px; margin-bottom: 1rem; }
  .final .rounds-summary { gap: 4px; margin: 0.75rem 0; }
  .round-tile .rt-pts  { font-size: 10px; }
  .round-tile .rt-diff { font-size: 7px; }
}


/* Countdown. Balken plus Zahl — Farbe allein reicht nicht,
   Rot-Grün-Schwäche ist häufig. */
.timer {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
  height: 14px;
}
.timer[hidden] { display: none; }
.timer-track {
  flex: 1; height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px; overflow: hidden;
}
.timer-fill {
  height: 100%; width: 100%;
  background: #1a1a1a;
  transform-origin: left center;
  transition: background-color 200ms linear;
}
.timer.low .timer-fill { background: #c00; }
.timer.low .timer-secs { color: #c00; }
.timer.low { animation: timer-nudge 700ms ease-in-out infinite; }
.timer-secs {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: #888; min-width: 2.2em; text-align: right;
}
.timer.idle .timer-fill { background: #bbb; }
@keyframes timer-nudge { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Schalter auf dem Startscreen */
.start-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; cursor: pointer;
  border: 0.5px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 11px; color: #666;
  font-family: inherit;
}
.toggle .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ccc; transition: background-color 150ms ease;
}
.toggle.on { color: #1a1a1a; border-color: rgba(0,0,0,0.4); }
.toggle.on .dot { background: #1a1a1a; }

/* Persönlicher Rekord im Endscreen */
.final .record {
  margin: 0.5rem 0 1rem;
  font-size: 12px; font-weight: 600;
  color: #c85000;
}
.final .record.new { font-size: 14px; }

/* Bewegung reduzieren: alles Dekorative aus, Information bleibt.
   Der Countdown-Balken bleibt sichtbar, nur ohne Pulsieren. */
@media (prefers-reduced-motion: reduce) {
  .timer.low { animation: none; }
  .timer-fill { transition: none; }
}

/* ================================================================
   Modusauswahl auf dem Startscreen. Zwei Achsen untereinander:
   erst wie gespielt wird, dann womit.
   ================================================================ */
.gm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
}
.gm-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  position: relative;
}
.gm-card:hover { border-color: rgba(0,0,0,0.35); }
.gm-card.active {
  border-color: #1a1a1a;
  border-width: 1px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}
.gm-card .gm-icon { font-size: 17px; line-height: 1; }
.gm-card .gm-name { font-size: 14px; font-weight: 600; }
.gm-card .gm-tag  { font-size: 11px; color: #777; line-height: 1.35; }
.gm-card .gm-badge {
  margin-top: 0.35rem;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a8f4a;
  border: 0.5px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.gm-card .gm-badge.local { color: #999; }

.final .total-max {
  margin: -0.5rem 0 0.75rem;
  font-size: 11px;
  color: #aaa;
}

/* Abschluss der Arcade-Modi: keine Bestenliste, dafuer direkt nochmal. */
.arcade-final .af-mode {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.arcade-final .af-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 12px;
  color: #777;
  margin-bottom: 0.5rem;
}
.arcade-final .af-stats b {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  color: #1a1a1a;
}
.arcade-final .af-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.toggle:disabled { opacity: 0.35; cursor: not-allowed; }

/* ================================================================
   Spielfeld als ein Bildschirm.

   Waehrend des Spiels darf die Seite nicht scrollen: jeder Scroll
   waehrend einer laufenden Uhr ist verlorene Zeit, und auf dem Handy
   verschiebt schon das Ein- und Ausblenden der Browserleiste den
   Abschicken-Knopf unter den Daumen weg.

   dvh statt vh: vh rechnet mit der GROESSTEN Viewport-Hoehe, also der
   ohne Safari-Leisten. Genau deshalb ragte das Spielfeld auf dem iPhone
   unten heraus.
   ================================================================ */
body.in-game { overflow: hidden; }
body.in-game .tool-page { padding: 0; min-height: 0; }

body.in-game #playArea {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100dvh;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  max-width: 760px;
  margin: 0 auto;
}
/* Der Header war unter 600px sticky mit eigenem Hintergrund — sinnvoll,
   solange die Seite scrollte. Im Ein-Screen-Layout scrollt nichts mehr, und
   der helle Hintergrund lag als breiter Streifen ueber dem Arcade-Verlauf. */
body.in-game .quiz-header {
  position: static;
  background: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
body.in-game #playArea > .palette { flex: 0 0 auto; margin-bottom: 0; }
body.in-game #playArea > .actions { flex: 0 0 auto; }

/* Die Zielflaeche nimmt den freien Platz. Kein festes Seitenverhaeltnis
   mehr — 4:1 ergab auf dem Handy einen 72 Pixel hohen Streifen. */
body.in-game .compare {
  aspect-ratio: auto;
  flex: 1 1 0;
  min-height: 110px;
  margin-bottom: 0;
}
body.in-game .quiz-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* flex-basis 0 statt auto: mit auto ist die Ausgangsgroesse die
     Inhaltshoehe, und bei sechs Pigmenten im Mix passte die Summe aller
     Kinder nicht mehr in 100dvh. Weil body.in-game nicht scrollt, wurde der
     Ueberschuss dann abgeschnitten statt verteilt — die Palette verlor ihre
     obere Haelfte. Mit Basis 0 teilen sich Zielflaeche und Slots den freien
     Platz, und die Palette behaelt ihre natuerliche Hoehe. */
  flex: 1 1 0;
  min-height: 180px;
}

/* Eine Zeile fuer die ganze Palette: jede zweite Reihe kostet Hoehe, die der
   Zielfarbe fehlt. Die Karten teilen sich die Breite, statt eine feste Zahl
   pro Zeile zu erzwingen — bei drei Pigmenten werden sie gross, bei sieben
   bleiben rund 48px, immer noch ueber der Touch-Grenze. */
@media (max-width: 480px) {
  /* Grid statt Flexbox: bei Flexbox brach die letzte Karte schon an einer
     halben Pixelbreite in die naechste Zeile um. Spaltenfluss mit 1fr teilt
     die Breite exakt auf, egal wie viele Pigmente die Palette hat. */
  body.in-game .palette-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 5px;
  }
  body.in-game .pcard { flex: none; min-width: 0; }
  body.in-game .pcard-name { font-size: 9px; }
  body.in-game .palette { padding: 0.5rem; }
  body.in-game .palette-title { margin-bottom: 0.35rem; }
}

/* Der einzige Bereich, der scrollt — und zwar in sich, mit reservierter
   Hoehe. Dadurch verschiebt ein hinzugefuegtes Pigment nichts anderes:
   Palette, Zielflaeche und Knopf bleiben, wo sie sind. */
body.in-game .slots {
  flex: 1 1 0;
  min-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
}
body.in-game .actions .btn { width: 100%; }

/* ================================================================
   Anteils-Regler (slider.js)

   Ein Slot ist eine Zeile, nicht zwei: der Balken IST der Regler, Name und
   Prozentwert liegen darauf. Zwei Zeilen je Pigment passten bei drei
   Pigmenten nicht mehr auf einen Handy-Bildschirm, und die Trefferflaeche
   ist so ausserdem groesser statt kleiner.
   ================================================================ */
.slot {
  position: relative;
  display: flex;
  /* Ausdruecklich row: die aeltere .slot-Regel weiter oben setzt column,
     und ohne Ueberschreiben waechst der Regler in der falschen Achse. */
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 0.4rem;
}
.slot:last-child { margin-bottom: 0; }

.slot .slider {
  position: relative;
  flex: 1;
  min-width: 0;
  /* 54px Grifflaeche: waehrend einer laufenden Uhr das am haeufigsten
     getroffene Element im Spiel. */
  height: 54px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none; /* sonst nimmt der Browser die Geste als Scroll */
  -webkit-tap-highlight-color: transparent;
}
.slot .slider-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #ece9e0;
  border: 0.5px solid rgba(0,0,0,0.12);
  overflow: hidden;
}
.slot .slider-fill {
  position: absolute;
  inset: 0 auto 0 0;
  opacity: 0.9;
}
/* Der Knopf sitzt an der Kante der Fuellung und macht sichtbar, dass man
   hier ziehen kann — getippt werden darf trotzdem ueberall. */
.slot .slider-knob {
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  pointer-events: none;
}
.slot .slider.dragging .slider-knob { width: 8px; margin-left: -4px; }
.slot .slider:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; border-radius: 12px; }

.slot .slider-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0.7rem;
  pointer-events: none; /* Tippen soll den Regler treffen, nicht den Text */
  /* Der Text liegt auf wechselnden Pigmentfarben. Ein Schatten in
     Gegenrichtung haelt ihn auf Hell und Dunkel lesbar. */
  text-shadow: 0 1px 2px rgba(255,255,255,0.55);
}
.slot .slider-label .ptitle {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.slot .slider-label .pct {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  flex-shrink: 0;
}

.slot .rm {
  position: static;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  background: #ece9e0;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  color: #666;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.slot .rm:hover { background: #1a1a1a; color: #fff; }


/* ================================================================
   Ton-Entscheidung vor dem Start
   ================================================================ */
.sound-gate {
  min-height: 72dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
}
.sound-gate[hidden] { display: none; }
.sound-gate .sg-icon { font-size: 46px; line-height: 1; margin-bottom: 0.4rem; }
.sound-gate .sg-title { font-size: 26px; font-weight: 600; }
.sound-gate .sg-text {
  font-size: 13px; color: #666; line-height: 1.55;
  max-width: 22rem; margin-bottom: 1.25rem;
}
.sound-gate .sg-actions {
  display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
}
.sound-gate .sg-actions .btn { padding: 0.75rem 1.5rem; font-size: 14px; }
.sound-gate .sg-note { font-size: 11px; color: #aaa; margin-top: 1rem; }

body.in-game .pcard { min-height: 52px; }

/* Modus- und Palettenname duerfen die Statuszeile nicht zweizeilig machen —
   "Endlos · Munsell · Split-Primary" sprengte sonst die Hoehe. */
.mini-status .ms-mode {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sichtbare Kante, wenn die Slots doch scrollen (ab etwa fuenf Pigmenten).
   Ohne den Verlauf sieht ein halb abgeschnittener Regler nach Fehler aus. */
body.in-game .slots {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
body.in-game .slots:not(.scrollable) {
  -webkit-mask-image: none;
  mask-image: none;
}