/* Bull-o-Mat – Vollbild-Komponenten mit Matchkopf, Gestenmenüs und responsiven Statistik-Overlays. */
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--color-page, #414145);
  color: var(--color-text, #070707);
  font-family: var(--font-ui, sans-serif);
  overscroll-behavior: none;
  font-size: clamp(16px, 1.7vmin, 24px);
}

button,
input,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-shell {
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  place-items: stretch;
  padding: 0;
}

.loading-screen,
.landing-card,
.pairing-card,
.error-card {
  width: min(100%, 520px);
  margin: auto;
  padding: clamp(24px, 6vw, 42px);
  border-radius: 18px;
  background: var(--color-shell);
  box-shadow: var(--shadow-shell);
  text-align: center;
}

.brand-mark {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-active);
  font-size: 38px;
  font-weight: 900;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.muted {
  color: var(--color-text-muted);
}

.form-stack {
  display: grid;
  gap: 14px;
  text-align: left;
}

.field {
  display: grid;
  gap: 7px;
  font-weight: 750;
}

.field input,
.field select {
  min-height: 52px;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #e9e9e9;
  padding: 0 15px;
  color: var(--color-text);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-active-dark);
  background: #fff;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  padding: 0 20px;
  font-weight: 850;
  cursor: pointer;
}

.primary-button {
  background: var(--color-active);
  color: var(--color-text);
}

.secondary-button {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.danger-button {
  background: var(--color-danger);
  color: #fff;
}

.primary-button:active,
.secondary-button:active,
.danger-button:active,
.score-key:active,
.function-key:active,
.modifier-key:active {
  transform: scale(0.99);
}

.game-frame {
  position: relative;
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(150px, 30dvh) auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 0;
  background: var(--color-shell);
  box-shadow: none;
}

.game-header {
  min-height: clamp(58px, 8dvh, 86px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: #fff;
}

.game-meta {
  font-size: clamp(16px, 2.2vmin, 28px);
  font-weight: 750;
  line-height: 1.3;
  text-transform: uppercase;
}

.game-title {
  text-align: center;
}

.game-title strong {
  display: block;
  font-size: clamp(22px, 3.4vmin, 44px);
  font-weight: 750;
}

.game-title span {
  color: var(--color-text-muted);
  font-size: clamp(16px, 2.1vmin, 27px);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-badge {
  display: grid;
  place-items: center;
  font-size: clamp(14px, 1.8vmin, 22px);
  font-weight: 750;
  text-transform: uppercase;
}

.live-badge::before {
  content: "";
  width: 17px;
  height: 10px;
  margin-bottom: 3px;
  border: 2px solid currentColor;
}

.icon-button {
  width: clamp(38px, 5vmin, 56px);
  height: clamp(38px, 5vmin, 56px);
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: clamp(22px, 3vmin, 34px);
  cursor: pointer;
}

.player-panel {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(6px, 1.2vmin, 16px);
  background: var(--color-active);
  text-align: center;
}

.player-card-content {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(3px, 0.8vmin, 10px);
}

.player-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vmin, 28px);
}

.round-badge {
  width: clamp(42px, 6.2vmin, 80px);
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: clamp(2px, 0.32vmin, 4px) solid currentColor;
  border-radius: 50%;
  font-size: clamp(20px, 3.2vmin, 42px);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.round-badge[data-digits="3"] {
  font-size: clamp(17px, 2.7vmin, 35px);
}

.player-average {
  font-size: clamp(28px, 4.3vmin, 62px);
  font-weight: 750;
  line-height: 1;
}

.player-score {
  margin: 0;
  font-size: clamp(64px, 14vmin, 240px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.player-name {
  font-size: clamp(28px, 4.6vmin, 66px);
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
}

.dart-strip {
  min-height: clamp(76px, 10dvh, 124px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-active);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dart-slot {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px;
  font-weight: 750;
  cursor: pointer;
}

.dart-symbol {
  font-size: clamp(28px, 4.2vmin, 58px);
  line-height: 0.85;
}

.dart-points {
  font-size: clamp(24px, 3.8vmin, 52px);
  font-weight: 750;
  line-height: 0.9;
}

.dart-slot.empty {
  color: rgba(0, 0, 0, 0.38);
  cursor: default;
}

.score-area {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  background: var(--color-surface);
}

.score-key,
.function-key,
.modifier-key {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 750;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.score-key {
  font-size: clamp(17px, 3vmin, 46px);
  touch-action: none;
}

.function-key {
  grid-column: 5;
  background: var(--color-surface-alt);
  font-size: clamp(16px, 2.4vmin, 34px);
  line-height: 1.05;
}

.function-key[data-gesture-kind="menu"] { grid-row: 1; }
.function-key[data-gesture-kind="stats"] { grid-row: 2; }
.function-spacer { grid-row: 3; cursor: default; }
.function-key[data-gesture-kind="miss"] { grid-row: 4; }
.function-key[data-gesture-kind="bull"] { grid-row: 5; }

.future-key {
  color: var(--color-inactive-text);
}

.modifier-key {
  grid-row: 6;
  background: var(--color-surface-alt);
  font-size: clamp(15px, 2.5vmin, 36px);
  letter-spacing: 0.01em;
}

.modifier-double {
  grid-column: 1 / 3;
}

.modifier-triple {
  grid-column: 3 / 5;
}

.undo-key {
  grid-row: 6;
  grid-column: 5;
  font-size: clamp(15px, 2.4vmin, 34px);
}

.modifier-key.active {
  background: var(--color-active);
}

.gesture-key {
  touch-action: none;
}

.gesture-menu {
  position: fixed;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
  background: var(--color-inactive);
  color: #fff;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48);
  pointer-events: none;
}

.gesture-cell {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(14px, 2.1vmin, 30px);
  font-weight: 750;
  line-height: 1;
  text-align: center;
}

.gesture-cell-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.gesture-cell strong,
.gesture-cell small {
  display: block;
}

.gesture-cell small {
  margin-top: 3px;
  font-size: 0.58em;
  letter-spacing: 0.04em;
}

.gesture-cell.cancel-cell {
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(24px, 4vmin, 52px);
}

.gesture-cell.selected {
  background: var(--color-active);
  color: var(--color-text);
  border-color: #fff;
}

.gesture-cell.cancel-cell.selected {
  background: var(--color-danger);
  color: #fff;
}

.gesture-pause .gesture-cell {
  font-size: clamp(11px, 1.6vmin, 20px);
}

.viewer-frame {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.viewer-frame .player-panel {
  min-height: 0;
}

.viewer-frame .player-score {
  font-size: clamp(100px, 28vmin, 520px);
}

.viewer-frame .dart-strip {
  display: none;
}

.viewer-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: clamp(90px, 16dvh, 180px);
  background: var(--color-inactive);
  color: #fff;
}

.viewer-detail {
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.viewer-detail strong {
  display: block;
  font-size: clamp(21px, 5vmin, 70px);
}

.viewer-detail span {
  color: #aaa;
  font-size: clamp(14px, 1.9vmin, 23px);
  text-transform: uppercase;
}

.score-layout-left:not(.viewer-frame) {
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.score-layout-left:not(.viewer-frame) .game-header {
  grid-column: 1 / -1;
}

.score-layout-left:not(.viewer-frame) .player-panel {
  grid-column: 1;
  grid-row: 2;
}

.score-layout-left:not(.viewer-frame) .dart-strip {
  grid-column: 1;
  grid-row: 3;
}

.score-layout-left:not(.viewer-frame) .score-area {
  grid-column: 2;
  grid-row: 2 / 4;
}

.drawer-dismiss {
  border: 0;
  background: transparent;
}

.drawer-panel {
  overflow-y: auto;
  padding: clamp(18px, 3vmin, 34px);
  background: var(--color-shell);
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.compact-button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--color-surface-alt);
  font-size: clamp(15px, 1.8vmin, 22px);
  font-weight: 800;
  cursor: pointer;
}

.toast-region {
  position: fixed;
  z-index: 150;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--color-inactive);
  color: #fff;
  font-size: clamp(16px, 2vmin, 24px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.toast.error {
  background: var(--color-danger);
}

.dart-slot.editing {
  background: #f4d35e;
  color: #17130a;
  box-shadow: inset 0 0 0 4px rgba(92, 65, 0, 0.35);
}

.correction-mode .score-key,
.correction-mode .function-key[data-gesture-kind="miss"],
.correction-mode .function-key[data-gesture-kind="bull"] {
  background: #fff1a8;
}

.correction-mode .score-area {
  box-shadow: inset 0 0 0 5px #d4a900;
}

.pause-dialog,
.pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(18, 18, 20, 0.78);
}

.pause-dialog-card,
.pause-overlay-card {
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(20px, 4vmin, 42px);
  background: var(--color-shell);
}

.pause-estimates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.pause-estimate {
  min-height: clamp(82px, 13dvh, 150px);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 12px;
  cursor: pointer;
}

.pause-estimate:last-child {
  grid-column: 1 / -1;
}

.pause-estimate strong {
  display: block;
  font-size: clamp(18px, 2.7vmin, 34px);
}

.pause-estimate span {
  display: block;
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.8vmin, 22px);
}

.pause-overlay {
  z-index: 130;
  background: rgba(22, 22, 24, 0.94);
}

.pause-overlay-card {
  background: transparent;
  color: #fff;
  text-align: center;
}

.pause-symbol {
  font-size: clamp(80px, 18vmin, 240px);
  font-weight: 750;
  line-height: 0.8;
  color: var(--color-active);
}

.pause-kicker,
.pause-estimate-label,
.pause-waiting {
  font-size: clamp(18px, 3vmin, 42px);
}

.pause-overlay h2 {
  margin-bottom: 12px;
  font-size: clamp(42px, 9vmin, 140px);
  text-transform: uppercase;
}

.pause-device {
  font-size: clamp(14px, 2vmin, 26px);
}

.pause-end-button {
  min-height: clamp(62px, 10dvh, 110px);
  width: min(520px, 100%);
  margin-top: 22px;
  font-size: clamp(18px, 3vmin, 38px);
}

.correction-drawer,
.stats-drawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(560px, 96vw);
  background: rgba(0, 0, 0, 0.48);
}

.correction-drawer[hidden],
.stats-drawer[hidden] {
  display: none;
}

.correction-drawer .drawer-dismiss,
.stats-drawer .drawer-dismiss {
  width: 100%;
  height: 100%;
}

.correction-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.correction-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-left: 5px solid transparent;
  background: var(--color-surface);
}

.correction-row.focused {
  border-left-color: var(--color-active-dark);
  background: #fff;
}

.correction-row small {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.correction-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.danger-compact {
  background: var(--color-danger);
  color: #fff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.stat-card {
  min-height: 110px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 14px;
  background: var(--color-surface);
  text-align: center;
}

.stat-card strong {
  display: block;
  font-size: clamp(30px, 5vmin, 58px);
}

.stat-card span {
  color: var(--color-text-muted);
  font-size: clamp(15px, 1.7vmin, 20px);
  font-weight: 800;
  text-transform: uppercase;
}

.settings-section {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

@media (max-width: 620px) {
  .correction-drawer,
  .stats-drawer {
    grid-template-columns: 1fr;
  }

  .correction-drawer > .drawer-dismiss,
  .stats-drawer > .drawer-dismiss {
    display: none;
  }

  .correction-row {
    grid-template-columns: 1fr;
  }

  .correction-actions {
    justify-content: stretch;
  }

  .correction-actions .compact-button {
    flex: 1;
  }

  .pause-estimates {
    grid-template-columns: 1fr;
  }

  .pause-estimate:last-child {
    grid-column: auto;
  }

  .score-layout-left:not(.viewer-frame) {
    grid-template-columns: minmax(128px, 34%) minmax(0, 1fr);
  }

  .score-layout-left .player-score {
    font-size: clamp(54px, 18vw, 100px);
  }

  .score-layout-left .player-name {
    font-size: clamp(20px, 4.4vw, 30px);
  }

  .score-layout-left .player-average {
    font-size: clamp(18px, 4vw, 27px);
  }

  .score-layout-left .round-badge {
    width: clamp(34px, 8vw, 48px);
    font-size: clamp(16px, 3.6vw, 23px);
  }
}

@media (max-height: 560px) {
  .game-header {
    min-height: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .score-layout-top:not(.viewer-frame) {
    grid-template-rows: auto minmax(118px, 34dvh) minmax(48px, 14dvh) minmax(0, 1fr);
  }

  .player-panel {
    padding: 4px 8px;
  }

  .player-card-content {
    gap: 2px;
  }

  .player-summary {
    gap: 8px;
  }

  .round-badge {
    width: 34px;
    font-size: 16px;
    border-width: 2px;
  }

  .player-average {
    font-size: clamp(20px, 5.4vmin, 28px);
  }

  .player-name {
    font-size: clamp(22px, 6vmin, 30px);
  }

  .player-score {
    font-size: clamp(48px, 13vmin, 100px);
  }

  .dart-strip {
    min-height: 48px;
  }

  .dart-symbol {
    font-size: clamp(22px, 6vmin, 30px);
  }

  .dart-points {
    font-size: clamp(20px, 5.5vmin, 28px);
  }

  .function-key {
    font-size: clamp(11px, 3vmin, 15px);
    line-height: 0.82;
  }
}

/* Landing und Fehlermasken bleiben auf kleinen Displays scrollbar. */
.loading-screen,
.landing-card,
.pairing-card,
.error-card {
  max-height: 100dvh;
  overflow-y: auto;
}

/* 0.1.9 – Matchkopf, Menüs und Statistikansichten. */
.game-title-cluster {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vmin, 28px);
  min-width: 0;
}

.game-title {
  min-width: 0;
  text-align: left;
}

.header-round {
  width: clamp(42px, 5.2vmin, 62px);
  border-width: clamp(2px, 0.25vmin, 3px);
  font-size: clamp(19px, 2.7vmin, 32px);
}

.header-round[data-digits="3"] {
  font-size: clamp(16px, 2.2vmin, 27px);
}

.player-panel {
  padding-top: clamp(8px, 1.4vmin, 18px);
  padding-bottom: clamp(8px, 1.4vmin, 18px);
}

.function-spacer {
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}

.gesture-menu.gesture-menu .gesture-cell,
.gesture-menu.gesture-stats .gesture-cell {
  font-size: clamp(11px, 1.6vmin, 22px);
  overflow-wrap: anywhere;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(18, 18, 20, 0.64);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  width: min(960px, 100%);
  max-height: 100%;
  overflow: auto;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: color-mix(in srgb, var(--color-shell) 94%, transparent);
  color: var(--color-text);
  padding: clamp(18px, 3vmin, 36px);
}

.compact-modal {
  width: min(760px, 100%);
}

.throw-list-panel {
  width: min(980px, 100%);
}

.details-overlay {
  padding: clamp(10px, 2vmin, 24px);
}

.details-panel {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.details-table-wrap {
  min-height: 0;
  overflow: auto;
  margin-top: clamp(14px, 2vmin, 24px);
}

.details-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: clamp(16px, 2vmin, 28px);
}

.details-table th,
.details-table td {
  padding: clamp(10px, 1.6vmin, 20px);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  white-space: nowrap;
}

.details-table thead th,
.details-table tbody th {
  background: var(--color-surface-alt);
  font-weight: 750;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.reason-button {
  min-height: clamp(76px, 12dvh, 130px);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: clamp(18px, 3vmin, 36px);
  font-weight: 750;
  cursor: pointer;
}

.quick-stats-preview {
  position: fixed;
  z-index: 110;
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: clamp(14px, 2vmin, 24px);
  border: 2px solid rgba(255, 255, 255, 0.76);
  background: rgba(24, 24, 26, 0.94);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.quick-stats-preview h2 {
  margin-bottom: 12px;
  font-size: clamp(20px, 3vmin, 38px);
  text-transform: uppercase;
}

.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-stats-preview .stat-card {
  min-height: clamp(72px, 10dvh, 118px);
  background: rgba(255, 255, 255, 0.1);
}

.quick-stats-preview .stat-card strong {
  font-size: clamp(24px, 4vmin, 48px);
}

.quick-stats-preview .stat-card span {
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(12px, 1.6vmin, 18px);
}

@media (max-width: 620px) {
  .game-title-cluster {
    gap: 8px;
  }

  .header-round {
    width: 40px;
    font-size: 19px;
  }

  .game-title strong {
    font-size: clamp(18px, 5.2vw, 28px);
  }

  .game-title span {
    font-size: clamp(12px, 3.4vw, 18px);
  }

  .quick-stats-preview {
    left: 8px !important;
    right: 8px;
    width: auto !important;
  }

  .details-table {
    font-size: 15px;
  }

  .reason-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 560px) {
  .header-round {
    width: 34px;
    font-size: 16px;
  }

  .game-title-cluster {
    gap: 7px;
  }

  .quick-stats-preview {
    max-height: calc(100dvh - 8px);
    padding: 10px;
  }

  .quick-stats-preview .stat-card {
    min-height: 58px;
  }
}


/* 0.1.9 – Mobile Detailansicht ohne horizontales Tabellenrätsel. */
.details-cards {
  display: none;
  gap: 12px;
  margin-top: 16px;
}

.details-player-card {
  background: var(--color-surface);
  padding: 14px;
}

.details-player-card h3 {
  margin-bottom: 12px;
  font-size: clamp(22px, 6vw, 34px);
  text-transform: uppercase;
}

.details-player-card dl {
  margin: 0;
  display: grid;
  gap: 2px;
}

.details-player-card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.details-player-card dt,
.details-player-card dd {
  margin: 0;
  font-size: clamp(16px, 4.4vw, 24px);
}

.details-player-card dt {
  font-weight: 750;
}

.details-player-card dd {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 620px) {
  .details-cards {
    display: grid;
  }

  .details-table-wrap {
    display: none;
  }
}

/* 0.1.10 – Bereinigter Matchkopf, Entwicklungsstand, Pausentimer und Siegeransicht. */
.game-title {
  justify-self: center;
  min-width: 0;
  text-align: center;
}

.header-round-wrap {
  justify-self: end;
  display: grid;
  place-items: center;
}

.gesture-menu.gesture-menu .menu-symbol {
  display: block;
  font-size: clamp(32px, 5vmin, 58px);
  line-height: 1;
}

.pause-elapsed-label {
  margin: clamp(16px, 3vmin, 30px) 0 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(16px, 2.2vmin, 30px);
  text-transform: uppercase;
}

.pause-elapsed {
  display: block;
  font-size: clamp(42px, 8vmin, 110px);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.version-watermark {
  position: fixed;
  z-index: 200;
  right: max(3px, env(safe-area-inset-right));
  bottom: max(2px, env(safe-area-inset-bottom));
  color: rgba(0, 0, 0, 0.5);
  font-size: clamp(18px, 1.8vmin, 26px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}

.version-watermark[hidden] {
  display: none;
}

.winner-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(16, 16, 18, 0.9);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.winner-panel {
  width: min(1180px, 100%);
  max-height: 100%;
  overflow: auto;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.6vmin, 20px);
  padding: clamp(20px, 4vmin, 52px);
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: rgba(27, 27, 30, 0.88);
  text-align: center;
}

.winner-kicker {
  margin: 0;
  color: var(--color-active);
  font-size: clamp(18px, 2.8vmin, 38px);
  font-weight: 750;
  letter-spacing: 0.08em;
}

.winner-panel h2 {
  margin: 0;
  font-size: clamp(38px, 8vmin, 112px);
  font-weight: 750;
  line-height: 0.95;
}

.winner-name {
  color: var(--color-active);
  font-size: clamp(54px, 13vmin, 190px);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

.winner-checkout {
  margin: 0;
  font-size: clamp(18px, 3vmin, 42px);
}

.winner-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.2vmin, 14px);
  margin-top: clamp(8px, 1.4vmin, 18px);
}

.winner-stats > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: clamp(10px, 1.8vmin, 22px);
  background: rgba(255, 255, 255, 0.1);
}

.winner-stats strong {
  overflow-wrap: anywhere;
  font-size: clamp(24px, 4.2vmin, 58px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.winner-stats span {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(12px, 1.6vmin, 20px);
  text-transform: uppercase;
}

.winner-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(10px, 2vmin, 24px);
}

.winner-actions button {
  min-width: min(280px, 100%);
  min-height: clamp(54px, 7dvh, 82px);
  font-size: clamp(16px, 2.2vmin, 28px);
}


@media (max-width: 760px) {
  .winner-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .winner-stats > div:last-child {
    grid-column: 1 / -1;
  }

  .winner-panel {
    padding: 18px 12px;
  }
}

@media (max-height: 560px) {
  .winner-overlay {
    padding: 6px;
  }

  .winner-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto auto auto;
    align-items: center;
    padding: 10px;
  }

  .winner-kicker,
  .winner-panel h2,
  .winner-name,
  .winner-checkout {
    grid-column: 1;
  }

  .winner-stats,
  .winner-actions {
    grid-column: 2;
  }

  .winner-stats {
    grid-row: 1 / 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 0.1.12 – Vollflächige Lounge für Playerverwaltung und einen flüchtigen Matchentwurf. */
.lounge-screen {
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-shell);
}

.lounge-header {
  min-height: clamp(72px, 10dvh, 110px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
  border-bottom: 2px solid var(--color-border);
  background: #fff;
}

.lounge-brand,
.lounge-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lounge-brand-mark {
  width: clamp(48px, 6vmin, 72px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-active);
  font-size: clamp(26px, 3.5vmin, 42px);
  font-weight: 900;
}

.lounge-brand > span:last-child,
.lounge-draft-status,
.lounge-section-heading > div {
  display: grid;
  gap: 2px;
}

.lounge-brand strong {
  font-size: clamp(24px, 3.3vmin, 46px);
  line-height: 1;
}

.lounge-brand small,
.lounge-draft-status span,
.lounge-section-heading small,
.lounge-player-card small {
  color: var(--color-text-muted);
  font-size: clamp(13px, 1.5vmin, 20px);
  font-weight: 750;
}

.lounge-brand small {
  letter-spacing: 0.16em;
}

.lounge-draft-status {
  text-align: right;
}

.lounge-draft-status strong {
  font-size: clamp(18px, 2.2vmin, 30px);
}

.lounge-content {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(320px, 1.18fr);
  grid-template-areas:
    "access players"
    "game summary";
  gap: clamp(10px, 1.6vmin, 22px);
  padding: clamp(10px, 1.6vmin, 22px);
  overflow: auto;
  align-content: start;
}

.lounge-access-panel { grid-area: access; }
.lounge-players-panel { grid-area: players; }
.lounge-game-panel { grid-area: game; }
.lounge-summary-panel { grid-area: summary; }

.lounge-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: clamp(12px, 1.8vmin, 22px);
  padding: clamp(16px, 2.3vmin, 30px);
  border: 2px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
}

.lounge-panel[aria-disabled="true"] {
  opacity: 0.56;
}

.lounge-section-heading > span {
  width: clamp(38px, 4.4vmin, 54px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-active);
  font-size: clamp(19px, 2.4vmin, 30px);
  font-weight: 750;
}

.lounge-section-heading strong {
  font-size: clamp(20px, 2.6vmin, 34px);
}

.lounge-access-ok {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-left: 5px solid var(--color-active-dark);
  background: var(--color-surface-alt);
}

.lounge-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.lounge-player-card {
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 10px 12px;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.lounge-player-card.selected {
  border-color: var(--color-active-dark);
  background: var(--color-active);
}

.lounge-player-card > span:last-child {
  min-width: 0;
  display: grid;
}

.lounge-player-card strong {
  overflow: hidden;
  font-size: clamp(17px, 2vmin, 26px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lounge-player-avatar {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-surface-alt);
  font-weight: 750;
}

.lounge-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.lounge-inline-form button {
  min-width: clamp(116px, 13vmin, 170px);
}

.lounge-edit-form {
  padding-top: 12px;
  border-top: 2px solid var(--color-border);
}

.lounge-game-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lounge-game-form .field:first-child,
.lounge-game-form .field:last-child {
  grid-column: 1 / -1;
}

.lounge-summary {
  display: grid;
  gap: 8px;
}

.lounge-summary > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.65fr) minmax(0, 1.35fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.lounge-summary span {
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.7vmin, 22px);
  font-weight: 750;
  text-transform: uppercase;
}

.lounge-summary strong {
  overflow-wrap: anywhere;
  font-size: clamp(19px, 2.5vmin, 34px);
  text-align: right;
}

.lounge-start-button {
  min-height: clamp(62px, 8dvh, 94px);
  font-size: clamp(20px, 2.7vmin, 36px);
}

.lounge-note,
.lounge-empty,
.lounge-locked-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.6vmin, 21px);
}

@media (max-width: 760px) {
  .lounge-header {
    align-items: flex-start;
  }

  .lounge-draft-status span {
    display: none;
  }

  .lounge-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "access"
      "players"
      "game"
      "summary";
  }

  .lounge-game-form,
  .lounge-inline-form {
    grid-template-columns: 1fr;
  }

  .lounge-inline-form button {
    width: 100%;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .lounge-content {
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    grid-template-areas: "access players game summary";
    overflow-x: auto;
  }
}

/* 0.1.12 – Klare Lounge-Navigation, randstabile Gestenmenüs und direkte Auswahlbuttons. */
.player-stats-trigger {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: none;
}

.player-stats-trigger:active {
  background: rgba(255, 255, 255, 0.08);
}

.gesture-menu.anchor-right {
  transform-origin: center right;
}

.quick-stats-preview {
  width: min(460px, calc(100dvw - 16px));
  max-height: min(420px, calc(100dvh - 16px));
  padding: clamp(10px, 1.6vmin, 18px);
}

.quick-stats-preview h2 {
  margin-bottom: 8px;
  font-size: clamp(18px, 2.5vmin, 30px);
}

.quick-stats-preview .stat-card {
  min-height: clamp(54px, 7dvh, 82px);
  padding: 8px;
}

.quick-stats-preview .stat-card strong {
  font-size: clamp(20px, 3vmin, 34px);
}

.choice-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.choice-field > span {
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.7vmin, 21px);
  font-weight: 750;
}

.choice-field-wide {
  grid-column: 1 / -1;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-button {
  min-height: clamp(46px, 6dvh, 66px);
  flex: 1 1 130px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 8px 12px;
  font-size: clamp(15px, 1.9vmin, 24px);
  font-weight: 750;
  cursor: pointer;
}

.choice-button.selected {
  border-color: var(--color-active-dark);
  background: var(--color-active);
}

.choice-button:disabled {
  cursor: default;
  opacity: 0.78;
}

.custom-score-field {
  max-width: 320px;
}

.lounge-screen.has-current-match {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.lounge-current-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  border-bottom: 2px solid var(--color-border);
  background: var(--color-active);
}

.lounge-current-match > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lounge-current-match span,
.lounge-current-match small {
  font-size: clamp(12px, 1.4vmin, 18px);
  font-weight: 750;
}

.lounge-current-match strong {
  overflow: hidden;
  font-size: clamp(20px, 2.6vmin, 34px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lounge-current-match small {
  color: var(--color-text-muted);
}

.lounge-running-note {
  margin: 0;
  padding: 12px;
  border-left: 5px solid var(--color-active-dark);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.6vmin, 20px);
}

@media (max-width: 620px) {
  .quick-stats-preview {
    left: 8px !important;
    right: auto;
    width: min(360px, calc(100dvw - 16px)) !important;
  }

  .quick-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lounge-current-match {
    align-items: stretch;
    flex-direction: column;
  }

  .lounge-current-match button {
    width: 100%;
  }

  .choice-button {
    flex-basis: calc(50% - 4px);
  }
}

/* 0.1.18 – Authentifizierter Einstieg mit zufälliger Logo-Bühne. */
.login-screen {
  position: relative;
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: stretch;
  background: #000;
  color: #fff;
}

.login-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #000;
  user-select: none;
  -webkit-user-drag: none;
}

.login-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 52%, rgba(0, 0, 0, 0.2) 68%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.18), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.login-panel {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: center;
  width: min(520px, calc(100dvw - 24px));
  margin: 0 12px max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: clamp(16px, 2.6vmin, 28px);
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: rgba(10, 10, 11, 0.88);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.login-heading,
.login-message {
  grid-column: 1 / -1;
}

.login-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.login-heading strong {
  font-size: clamp(25px, 4vmin, 46px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.login-heading span,
.login-field > span {
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(14px, 1.7vmin, 20px);
  font-weight: 750;
  letter-spacing: 0.1em;
}

.login-message {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(14px, 1.6vmin, 19px);
}

.login-field input {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.96);
  color: #111;
}

.login-button {
  min-width: clamp(128px, 16vmin, 180px);
  min-height: 52px;
}

.lounge-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.lounge-logout {
  flex: 0 0 auto;
}

.lounge-content.authenticated {
  grid-template-columns: minmax(320px, 1.08fr) minmax(320px, 0.92fr);
  grid-template-areas:
    "players game"
    "players summary";
}

@media (max-width: 760px) {
  .login-panel {
    grid-template-columns: 1fr;
  }

  .login-button {
    width: 100%;
  }

  .login-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .lounge-header-actions {
    align-items: flex-end;
  }

  .lounge-draft-status {
    display: none;
  }

  .lounge-content.authenticated {
    grid-template-columns: 1fr;
    grid-template-areas:
      "players"
      "game"
      "summary";
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .login-panel {
    width: min(760px, calc(100dvw - 32px));
    grid-template-columns: auto minmax(240px, 1fr) auto;
    padding: 12px 16px;
  }

  .login-heading {
    grid-column: auto;
    display: grid;
    justify-content: start;
    gap: 0;
  }

  .login-message {
    display: none;
  }

  .lounge-content.authenticated {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    grid-template-areas: "players game summary";
    overflow-x: auto;
  }
}