/* ---------------------------------------------------------------
   Design-Ansatz: Kneipen-Dartboard trifft Kreide-Scoreboard.
   Farben aus der Welt des Dartsports: Baize-Grün, Chalk-Weiß,
   Board-Rot/-Schwarz. Zahlen laufen im monospaced "Anzeigetafel"-Stil,
   damit sich Punktestände wie auf einer echten Wurftafel anfühlen.
------------------------------------------------------------------ */

:root {
  --baize:        #0d1f17;   /* dunkles Filz-/Board-Umfeld-Grün */
  --baize-light:  #143526;
  --chalk:        #f2ede0;   /* Kreideweiß für Zahlen/Text */
  --chalk-dim:    #b9c2ba;
  --board-red:    #b8342f;
  --board-green:  #3c7a4f;
  --board-black:  #17140f;
  --gold:         #c9a227;   /* Checkout / Sieg */

  --font-display: 'Courier New', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius: 10px;
}

* { box-sizing: border-box; }

/* Kein Doppel-Tap-Zoom, kein ~300ms Tap-Delay auf Touch-Geräten (iPad/iPhone) */
button {
  touch-action: manipulation;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--baize);
  color: var(--chalk);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  background-image:
    radial-gradient(circle at 50% -10%, var(--baize-light), var(--baize) 60%);
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
}

.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

/* ---------- Start ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 40px;
}
.brand-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 6px solid var(--board-red);
  box-shadow: inset 0 0 0 6px var(--board-black), inset 0 0 0 12px var(--board-green);
  flex-shrink: 0;
}
.brand h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  margin: 0;
}

.menu { display: flex; flex-direction: column; gap: 14px; }

.hint {
  color: var(--chalk-dim);
  font-size: 0.85rem;
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}
.hint-top {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 20px;
  text-align: left;
}

/* ---------- Buttons & Felder ---------- */
.btn {
  border: none;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--board-green);
  color: var(--chalk);
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary {
  background: var(--chalk);
  color: var(--baize);
}

.btn-ghost {
  background: transparent;
  color: var(--chalk);
  border: 1px solid rgba(242, 237, 224, 0.35);
}

.btn-back {
  background: none;
  border: none;
  color: var(--chalk-dim);
  font-size: 0.9rem;
  align-self: flex-start;
  padding: 0 0 20px;
  cursor: pointer;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--chalk-dim);
}
.field input {
  font-size: 1.1rem;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(242, 237, 224, 0.25);
  background: rgba(242, 237, 224, 0.06);
  color: var(--chalk);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.field input::placeholder { color: rgba(242, 237, 224, 0.35); }

.error {
  color: var(--board-red);
  font-size: 0.85rem;
  min-height: 1.2em;
}

/* ---------- Einladung / Warten ---------- */
.invite-box {
  background: rgba(242, 237, 224, 0.06);
  border: 1px solid rgba(242, 237, 224, 0.15);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.invite-box-muted { text-align: center; }
.invite-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chalk-dim);
  margin: 0 0 8px;
}
.invite-url {
  font-family: var(--font-display);
  font-size: 0.9rem;
  word-break: break-all;
  margin: 0 0 14px;
}
.invite-code {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin: 0;
}

/* ---------- Scoreboard ---------- */
.scoreboard {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.score-card {
  flex: 1;
  background: var(--board-black);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  border: 2px solid transparent;
}
.score-card.is-active {
  border-color: var(--gold);
}
.score-card .name {
  font-size: 0.75rem;
  color: var(--chalk-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score-card .remaining {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
}
.score-card .status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  background: var(--board-red);
}
.score-card .status-dot.online { background: var(--board-green); }

.connection-banner {
  background: rgba(184, 52, 47, 0.2);
  border: 1px solid var(--board-red);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 14px;
}

/* ---------- Wurf-Log ---------- */
.throw-log {
  display: flex;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 18px;
}
.throw-chip {
  background: rgba(242, 237, 224, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  min-width: 44px;
  text-align: center;
}
.throw-chip.bust { background: rgba(184, 52, 47, 0.35); }
.throw-chip.checkout { background: rgba(201, 162, 39, 0.4); }

/* ---------- Leg-Anzeige ---------- */
.leg-indicator {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--chalk-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.game-id-display {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--chalk-dim);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.game-id-display strong {
  color: var(--chalk);
  letter-spacing: 0.1em;
}

/* ---------- Reconnect: "Wer bist du?"-Auswahl ---------- */
.reclaim-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.reclaim-picker .hint-top { margin-bottom: 4px; }

.score-card .legs-won {
  font-size: 0.7rem;
  color: var(--gold);
  margin-top: 4px;
}
.score-card .average {
  font-size: 0.7rem;
  color: var(--chalk-dim);
  margin-top: 2px;
}

/* ---------- Dart-Bereiche (aktuelles Leg) ---------- */
.dart-ranges {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--chalk-dim);
  text-align: center;
  min-height: 1.2em;
  margin-bottom: 10px;
}

/* ---------- Leg-Gewonnen-Toast ---------- */
.leg-toast {
  background: rgba(201, 162, 39, 0.25);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 14px;
}

/* ---------- Numpad (Aufnahme-Gesamtpunktzahl-Eingabe) ---------- */
.numpad-wrap {
  margin-top: auto;
}
.score-display {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  background: rgba(242, 237, 224, 0.06);
  border: 1px solid rgba(242, 237, 224, 0.15);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.numpad .num {
  aspect-ratio: 1.4;
  border: none;
  border-radius: 8px;
  background: rgba(242, 237, 224, 0.1);
  color: var(--chalk);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numpad .num:active { filter: brightness(1.3); }
.numpad .num:disabled { opacity: 0.4; }
.numpad .num-clear { background: rgba(184, 52, 47, 0.35); }
.numpad .num-ok { background: var(--board-green); }

/* ---------- Checkout: Darts-Anzahl-Nachfrage ---------- */
.darts-used-picker {
  margin-top: auto;
  text-align: center;
}
.darts-used-question {
  color: var(--gold);
  font-family: var(--font-display);
  margin-bottom: 12px;
}
.darts-used-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.darts-used-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: var(--board-green);
  color: var(--chalk);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
}
.darts-used-btn:active { filter: brightness(1.2); }

.turn-preview {
  text-align: center;
  color: var(--chalk-dim);
  font-family: var(--font-display);
  font-size: 0.9rem;
  min-height: 1.4em;
  margin-top: 10px;
}

/* ---------- Spielende ---------- */
#screen-finished { align-items: center; justify-content: center; text-align: center; gap: 20px; }
#screen-finished h2 { color: var(--gold); font-family: var(--font-display); }

.match-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(242, 237, 224, 0.06);
  border: 1px solid rgba(242, 237, 224, 0.15);
  border-radius: var(--radius);
  padding: 18px 22px;
  width: 100%;
  max-width: 320px;
}
.match-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.match-stat span {
  color: var(--chalk-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.finished-multiplayer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.match-stat strong {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1rem;
  text-align: right;
}

/* ---------- Responsive: größere Screens (Tablet) ---------- */
@media (min-width: 700px) {
  #app { max-width: 640px; padding-top: 48px; }
  .keypad .seg { font-size: 1.1rem; }
}