@charset "UTF-8";
/* =============================================================================
   GeoBingo (GEOBINGO.md) · One UI · Handy (#gbView), Cockpit (#gbPanel), Bühne (#phaseGeoBingo)
   Nur Tokens, kein Glow. Street View und Karte füllen auf dem Handy den Bildschirm, darüber Zeit
   und Begriffe, darunter die drei Knöpfe. Funde erscheinen als eingebettetes Street View.
   ========================================================================== */

.gb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ou-primary-ink);
  font: 600 var(--ou-fs-xs)/1.3 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.gb-lead { margin: 6px 0 0; color: var(--ou-muted); }
.gb-hint { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.gb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  color: var(--ou-text);
  font-size: var(--ou-fs-sm);
}
button.gb-chip { cursor: pointer; }
.gb-chip.is-on { border-color: var(--ou-primary); background: color-mix(in srgb, var(--ou-primary) 14%, transparent); color: var(--ou-primary-ink); }
.gb-chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: inherit; }
.gb-timer { font: 400 2rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gb-timer.is-low { color: var(--ou-danger-ink); }
.gb-totals { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: gbt; }
.gb-totals li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.gb-totals li span { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Funde */
.gb-embed { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.gb-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.gb-mock-embed { display: grid; place-content: center; gap: 4px; text-align: center; background: color-mix(in srgb, var(--ou-primary) 10%, var(--ou-surface-2)); }
.gb-mock-embed span { font: 400 1.4rem/1 var(--ou-font-display); text-transform: uppercase; }
.gb-mock-embed small { color: var(--ou-muted); }
.gb-finds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.gb-find { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--ou-line); border-left: 3px solid var(--ou-line-strong); border-radius: var(--ou-radius); background: var(--ou-surface); }
.gb-find.is-ok { border-left-color: var(--ou-green); }
.gb-find.is-no { border-left-color: var(--ou-danger); }
.gb-find.is-mine { background: color-mix(in srgb, var(--ou-primary) 6%, var(--ou-surface)); }
.gb-find-body { display: grid; gap: 6px; }
.gb-find-who { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.gb-find-who span { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.gb-find-who em { color: var(--ou-yellow-ink); font-style: normal; }
.gb-find-state, .gb-find-votes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.gb-find.is-ok .gb-find-state { color: var(--ou-green-ink); }
.gb-votes, .gb-decide { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-votes .is-on, .gb-decide .is-on { border-color: var(--ou-green); color: var(--ou-green-ink); background: color-mix(in srgb, var(--ou-green) 12%, transparent); }
.gb-votes .is-on.is-down, .gb-decide .is-on.is-down { border-color: var(--ou-danger); color: var(--ou-danger-ink); background: color-mix(in srgb, var(--ou-danger) 12%, transparent); }

/* ---------------------------------------------------------------- Handy: Intro, Auswertung, Ende */
.gb-card { display: grid; gap: 14px; }
.gb-card h2 { margin: 0; }
.gb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.gb-facts div { padding: 10px 12px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.gb-facts dt { color: var(--ou-muted); font-size: var(--ou-fs-xs); text-transform: uppercase; letter-spacing: var(--ou-label-tracking); }
.gb-facts dd { margin: 4px 0 0; font-weight: 600; }
.gb-rules { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ou-text); }
.gb-wait { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ou-muted); }
.gb-review { display: grid; gap: 14px; }
.gb-review-head h2, .gb-review-head h3 { margin: 4px 0 0; }

/* ---------------------------------------------------------------- Handy: Suche */
.gb-play { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; height: calc(100dvh - 150px); min-height: 440px; }
.gb-top { display: grid; gap: 8px; }
.gb-prompts { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.gb-prompt {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  color: var(--ou-text);
  font-size: var(--ou-fs-sm);
}
.gb-prompt.is-found { border-color: var(--ou-green); color: var(--ou-green-ink); background: color-mix(in srgb, var(--ou-green) 12%, transparent); }
.gb-area { position: relative; overflow: hidden; border: 1px solid var(--ou-line); border-radius: var(--ou-radius); background: var(--ou-surface-2); }
.gb-area .gb-sv { position: absolute; inset: 0; }
.gb-area .gb-mini { position: absolute; inset: 0; z-index: 2; display: none; }
.gb-area.show-map .gb-mini, .gb-area:not(.has-view) .gb-mini { display: block; }
.gb-area .gb-hint { position: absolute; top: 10px; left: 50%; z-index: 3; display: none; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: var(--ou-radius-sm); background: var(--ou-surface); translate: -50% 0; text-align: center; }
.gb-area.show-map .gb-hint, .gb-area:not(.has-view) .gb-hint { display: block; }
.gb-bar { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.gb-bar button { justify-content: center; }
.gb-bar .is-on { border-color: var(--ou-green); color: var(--ou-green-ink); }
.gb-sheet {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 60;
  display: grid;
  gap: 10px;
  max-width: 560px;
  max-height: 72dvh;
  margin: 0 auto;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  box-shadow: var(--ou-drop);
}
.gb-sheet.hidden { display: none; }
.gb-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gb-sheet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.gb-pick { justify-content: space-between; }
.gb-pick small { color: var(--ou-muted); }
.gb-find-meta { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); }

/* Test-Attrappe statt Google */
.gb-mock-view { display: grid; place-content: center; gap: 10px; text-align: center; background: color-mix(in srgb, var(--ou-primary) 8%, var(--ou-surface-2)); }
.gb-mock-place { font: 400 1.8rem/1 var(--ou-font-display); text-transform: uppercase; }
.gb-mock-pov { color: var(--ou-muted); }
.gb-mock-turn { display: inline-flex; justify-content: center; gap: 6px; }
.gb-area.show-map .gb-mini.gb-mock-map, .gb-area:not(.has-view) .gb-mini.gb-mock-map { display: flex; }
.gb-mock-map { flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; padding: 20px; background: var(--ou-surface); }

/* ---------------------------------------------------------------- Cockpit */
.gb-setup { display: grid; gap: 12px; }
.gb-h-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.gb-h-head h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.gb-h-meta { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.gb-setup-label { margin: 6px 0 0; color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.3 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.gb-setup-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.gb-setup-card { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); color: var(--ou-text); text-align: left; }
.gb-setup-card.is-on { border-color: var(--ou-primary); background: color-mix(in srgb, var(--ou-primary) 10%, var(--ou-surface-2)); }
.gb-setup-card:disabled { opacity: .55; }
.gb-setup-title { font-weight: 600; }
.gb-setup-meta, .gb-setup-desc { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.gb-setup-row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.gb-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-seg .is-on { border-color: var(--ou-primary); color: var(--ou-primary-ink); background: color-mix(in srgb, var(--ou-primary) 12%, transparent); }
.gb-region { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); }
.gb-region.hidden { display: none; }
.gb-country-pick { display: grid; gap: 6px; max-width: 420px; }
.gb-country-results { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-region-text { margin: 0; color: var(--ou-text); font-size: var(--ou-fs-sm); }
label.gb-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ou-text); font: 500 var(--ou-fs-sm)/1.4 var(--ou-font-body); letter-spacing: 0; text-transform: none; }
.gb-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ou-primary); }
.gb-setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.gb-h-time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.gb-h-time .gb-timer { margin-right: 8px; font-size: 2.6rem; }
.gb-progress-wrap { overflow-x: auto; }
.gb-progress { width: 100%; border-collapse: collapse; font-size: var(--ou-fs-sm); }
.gb-progress th, .gb-progress td { padding: 6px 8px; border-bottom: 1px solid var(--ou-line); text-align: center; white-space: nowrap; }
.gb-progress th:first-child, .gb-progress td:first-child, .gb-progress .gb-countries { text-align: left; }
.gb-progress td.is-found { color: var(--ou-green-ink); }
.gb-progress .gb-countries { color: var(--ou-muted); white-space: normal; }
.gb-done { color: var(--ou-green-ink); font-size: var(--ou-fs-xs); }

/* ---------------------------------------------------------------- Bühne */
.gb-st { display: grid; gap: 28px; width: min(100%, 1600px); margin: 0 auto; text-align: center; }
.gb-st-head h1 { margin: 6px 0 0; font: 400 clamp(3rem, 5vw, 5.5rem)/.95 var(--ou-font-display); text-transform: uppercase; }
.gb-st-head p { margin: 6px 0 0; color: var(--ou-muted); font-size: 1.4rem; }
.gb-st-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.gb-st-facts div { display: grid; min-width: 160px; padding: 18px 24px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius); background: var(--ou-surface); }
.gb-st-facts b { font: 400 3.4rem/1 var(--ou-font-display); }
.gb-st-facts span { color: var(--ou-muted); }
.gb-st-note { margin: 0; font-size: 1.5rem; }
.gb-st-search { display: grid; grid-template-columns: auto minmax(0, max-content); justify-content: center; align-items: center; gap: 40px; text-align: left; }
.gb-st-clock { display: grid; gap: 6px; }
.gb-st-clock .gb-timer { font-size: 7rem; }
.gb-st-paused { color: var(--ou-yellow-ink); font-size: 1.3rem; text-transform: uppercase; letter-spacing: var(--ou-label-tracking); }
.gb-st-prompts { display: flex; flex-wrap: wrap; gap: 10px; }
.gb-st-prompts .gb-chip { padding: 10px 16px; font-size: 1.35rem; }
.gb-st-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); justify-content: center; gap: 10px; text-align: left; }
.gb-st-player { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 18px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface); font-size: 1.25rem; }
.gb-st-player.is-done { border-color: var(--ou-green); }
.gb-st-dots { display: flex; gap: 6px; grid-column: 1 / -1; }
.gb-st-dots i { width: 18px; height: 18px; border: 2px solid var(--ou-line-strong); border-radius: 50%; }
.gb-st-dots i.is-on { border-color: var(--ou-green); background: var(--ou-green); }
.gb-st-count { color: var(--ou-muted); font-variant-numeric: tabular-nums; }
.gb-st-finds { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; text-align: left; }
.gb-st-finds[data-n="1"] { grid-template-columns: minmax(0, 900px); justify-content: center; }
.gb-st-finds .gb-find { padding: 12px; font-size: 1.2rem; }
.gb-st-totals { width: min(100%, 720px); margin: 0 auto; text-align: left; }
.gb-st-totals li { padding: 14px 20px; font-size: 1.5rem; }