/* ---------------------------------------------------------------------------
   Bedienkonsole, späte 70er.
   Gehäuse aus Putty-farbenem Kunststoff mit harten Fasen (hell oben/links,
   dunkel unten/rechts), Sichtfenster als Phosphor-CRT, Beschriftung in
   gesperrten Versalien. Keine weichen Schatten, keine Verläufe im Gehäuse –
   die Tiefe kommt ausschließlich aus den Kanten.
   --------------------------------------------------------------------------- */

:root {
  --panel:     #c9c2b2;   /* Gehäuse */
  --panel-in:  #bdb5a4;   /* vertiefte Flächen */
  --bevel-hi:  #e4dfd2;   /* Fase, Lichtseite */
  --bevel-lo:  #8a8474;   /* Fase, Schattenseite */
  --ink:       #22201c;
  --ink-soft:  #5d574b;
  --crt:       #0b1410;   /* Bildröhre */
  --phosphor:  #4be38a;   /* P1-Grün */
  --amber:     #d98b12;
  --alert:     #b8342a;
  --blue:      #1b3a6b;   /* Typenschild, Primärtaste */

  --bevel: 2px;
  --gap: 10px;

  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --panel:     #3a3833;
    --panel-in:  #2e2c28;
    --bevel-hi:  #55524a;
    --bevel-lo:  #1d1b18;
    --ink:       #e8e3d6;
    --ink-soft:  #a49d8c;
    --blue:      #7ea8e0;
    --amber:     #f0ad3c;
    --alert:     #e0665c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--ink);
  font: 400 15px/1.4 var(--mono);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}

/* Gefräste Vertiefung: dunkle Kante oben/links, helle unten/rechts. */
.inset {
  border-top: var(--bevel) solid var(--bevel-lo);
  border-left: var(--bevel) solid var(--bevel-lo);
  border-right: var(--bevel) solid var(--bevel-hi);
  border-bottom: var(--bevel) solid var(--bevel-hi);
}
/* Erhabene Taste: umgekehrt. */
.raised {
  border-top: var(--bevel) solid var(--bevel-hi);
  border-left: var(--bevel) solid var(--bevel-hi);
  border-right: var(--bevel) solid var(--bevel-lo);
  border-bottom: var(--bevel) solid var(--bevel-lo);
}

/* --- Typenschild ------------------------------------------------------- */

.nameplate {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 8px;
}
/* Acht Balken – das Streifenmotiv der Zeit, hier als Kennzeichnung des Geräts. */
.bars { display: flex; flex-direction: column; gap: 2px; flex: none; width: 34px; }
.bars i { display: block; height: 3px; background: var(--blue); }
.bars i:nth-child(1), .bars i:nth-child(8) { width: 58%; }
.bars i:nth-child(2), .bars i:nth-child(7) { width: 76%; }
.bars i:nth-child(3), .bars i:nth-child(6) { width: 90%; }
.bars i:nth-child(4), .bars i:nth-child(5) { width: 100%; }

.nameplate-text { min-width: 0; }
h1 {
  margin: 0; font: 700 1.02rem/1.1 var(--sans);
  letter-spacing: .01em;
}
.strapline {
  margin: 2px 0 0; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* --- Statuszeile ------------------------------------------------------- */

.statusbar {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin: 0 14px; padding: 5px 9px;
  background: var(--panel-in);
  border-top: var(--bevel) solid var(--bevel-lo);
  border-left: var(--bevel) solid var(--bevel-lo);
  border-right: var(--bevel) solid var(--bevel-hi);
  border-bottom: var(--bevel) solid var(--bevel-hi);
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* Kontrollleuchte: aus = matt, bereit = Phosphor. */
.lamp {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--bevel-lo);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
}
.lamp[data-state="ready"] { background: var(--phosphor); box-shadow: 0 0 5px var(--phosphor); }
.lamp[data-state="busy"]  { background: var(--amber);    box-shadow: 0 0 5px var(--amber); }
.lamp[data-state="fault"] { background: var(--alert);    box-shadow: 0 0 5px var(--alert); }

/* --- Reiter ------------------------------------------------------------ */

.tabs { flex: none; display: flex; gap: var(--gap); padding: 10px 14px; }
.tabs button {
  flex: 1; padding: 9px 4px; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border-top: var(--bevel) solid var(--bevel-hi);
  border-left: var(--bevel) solid var(--bevel-hi);
  border-right: var(--bevel) solid var(--bevel-lo);
  border-bottom: var(--bevel) solid var(--bevel-lo);
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.tabs button.active {
  background: var(--blue); color: #f2efe6;
  border-top-color: var(--bevel-lo); border-left-color: var(--bevel-lo);
  border-right-color: var(--bevel-hi); border-bottom-color: var(--bevel-hi);
}

/* --- Panels ------------------------------------------------------------ */

main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px; }
main > section { min-height: 0; }
main > section[hidden] { display: none; }
section[data-panel="scan"] { flex: 1; display: flex; flex-direction: column; gap: var(--gap); padding-bottom: 12px; }
section[data-panel="collection"], section[data-panel="find"] { overflow-y: auto; padding-bottom: 24px; }

/* --- Sichtfenster ------------------------------------------------------ */

.stage {
  position: relative; flex: 1 1 34vh; min-height: 130px;
  aspect-ratio: 3 / 4; width: auto; max-width: 100%; margin: 0 auto;
  padding: 7px;
  background: var(--panel-in);
  border-top: var(--bevel) solid var(--bevel-hi);
  border-left: var(--bevel) solid var(--bevel-hi);
  border-right: var(--bevel) solid var(--bevel-lo);
  border-bottom: var(--bevel) solid var(--bevel-lo);
}
.bezel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--crt);
  border-top: var(--bevel) solid var(--bevel-lo);
  border-left: var(--bevel) solid var(--bevel-lo);
  border-right: var(--bevel) solid var(--bevel-hi);
  border-bottom: var(--bevel) solid var(--bevel-hi);
}
.bezel video, .bezel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bezel video { object-fit: cover; display: none; }
.stage.live video { display: block; }
.stage.live .placeholder { display: none; }

.placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 10px; text-align: center; overflow: hidden;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(75, 227, 138, .45);
}
.placeholder p { margin: 0; }
.crt-prompt {
  font-size: clamp(.72rem, 2.6vh, .95rem); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}
.crt-prompt::before { content: '\25AE\00A0'; }
.crt-hint {
  font-size: clamp(.56rem, 1.9vh, .72rem); line-height: 1.45;
  letter-spacing: .05em; opacity: .72;
}

/* --- Tasten ------------------------------------------------------------ */

.controls { flex: none; display: flex; gap: var(--gap); }
.key {
  flex: 1; padding: 11px 8px; cursor: pointer; text-align: center;
  background: var(--panel); color: var(--ink);
  border-top: var(--bevel) solid var(--bevel-hi);
  border-left: var(--bevel) solid var(--bevel-hi);
  border-right: var(--bevel) solid var(--bevel-lo);
  border-bottom: var(--bevel) solid var(--bevel-lo);
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
}
.key-primary { background: var(--blue); color: #f2efe6; }
.key:active {
  border-top-color: var(--bevel-lo); border-left-color: var(--bevel-lo);
  border-right-color: var(--bevel-hi); border-bottom-color: var(--bevel-hi);
}

.notice {
  flex: none; margin: 0; padding: 9px 10px;
  background: var(--panel-in); color: var(--ink-soft);
  border-left: 3px solid var(--amber);
  font-size: .72rem; line-height: 1.5;
}
.notice code { color: var(--ink); }

/* --- Auslesefeld ------------------------------------------------------- */

.readout { flex: none; display: flex; gap: 10px; align-items: flex-start; }
.crop {
  width: 54px; height: 77px; flex: none; object-fit: contain;
  background: var(--crt);
  border-top: var(--bevel) solid var(--bevel-lo);
  border-left: var(--bevel) solid var(--bevel-lo);
  border-right: var(--bevel) solid var(--bevel-hi);
  border-bottom: var(--bevel) solid var(--bevel-hi);
}
/* Feldpaare wie auf einem Anzeigefeld: Beschriftung links, Wert rechts. */
.readout-fields {
  margin: 0; flex: 1; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-content: start;
}
.readout-fields dt {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); align-self: center;
}
.readout-fields dd { margin: 0; font-size: .8rem; min-width: 0; }
.confidence { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.confidence.sure   { color: #1f7a45; }
.confidence.likely { color: var(--amber); }
.confidence.unsure { color: var(--alert); }
@media (prefers-color-scheme: dark) { .confidence.sure { color: var(--phosphor); } }
.segstatus { color: var(--ink-soft); font-size: .74rem; }

/* --- Trefferliste ------------------------------------------------------ */

.results { display: flex; flex-direction: column; gap: 6px; flex: none; }
.hit {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 6px; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border-top: var(--bevel) solid var(--bevel-hi);
  border-left: var(--bevel) solid var(--bevel-hi);
  border-right: var(--bevel) solid var(--bevel-lo);
  border-bottom: var(--bevel) solid var(--bevel-lo);
  font: inherit;
}
/* Rangziffer: die Reihenfolge ist hier echte Information, kein Dekor. */
.hit-rank {
  flex: none; width: 20px; text-align: center;
  font-size: .72rem; font-weight: 700; color: var(--ink-soft);
}
.hit.primary .hit-rank { color: var(--blue); }
.hit.primary { border-left: var(--bevel) solid var(--blue); }
.hit.owned { background: var(--panel-in); }
.hit img {
  width: 34px; height: 49px; object-fit: contain; flex: none; background: #fff;
  border: 1px solid var(--bevel-lo);
}
.hit-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hit-id {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.hit-name { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-score {
  flex: none; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Segmentierter Balken statt glattem Verlauf: Blöcke lassen sich zählen,
   ein Verlauf lässt sich nur schätzen. */
.bar {
  display: block; height: 7px; margin-top: 1px;
  background: var(--panel-in);
  border: 1px solid var(--bevel-lo);
}
.bar i {
  display: block; height: 100%;
  background: repeating-linear-gradient(
    to right, var(--blue) 0 3px, transparent 3px 5px);
}
.hit.primary .bar i {
  background: repeating-linear-gradient(
    to right, #1f7a45 0 3px, transparent 3px 5px);
}

.more {
  padding: 7px; cursor: pointer; background: transparent; color: var(--ink-soft);
  border: 1px dashed var(--bevel-lo);
  font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}

/* --- Sammlung ---------------------------------------------------------- */

.collection-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.collection-head p { margin: 0; flex: 1; font-size: .74rem; letter-spacing: .06em;
                     text-transform: uppercase; color: var(--ink-soft); }
.collection-head .key { flex: none; padding: 9px 12px; }
#collection-list h3 {
  margin: 16px 0 6px; display: flex; gap: 8px; align-items: baseline;
  font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--bevel-lo); padding-bottom: 4px;
}
#collection-list h3 span { font-weight: 400; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* Anklickbar: von hier führt der Weg in die Detailansicht. */
.chip {
  padding: 4px 8px; cursor: pointer; font: inherit;
  font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--panel);
  border-top: 1px solid var(--bevel-hi); border-left: 1px solid var(--bevel-hi);
  border-right: 1px solid var(--bevel-lo); border-bottom: 1px solid var(--bevel-lo);
}
.chip:active {
  border-top-color: var(--bevel-lo); border-left-color: var(--bevel-lo);
  border-right-color: var(--bevel-hi); border-bottom-color: var(--bevel-hi);
}
.empty { color: var(--ink-soft); font-size: .8rem; }
textarea {
  width: 100%; padding: 8px; font: .74rem/1.5 var(--mono);
  background: var(--panel-in); color: var(--ink); border: 1px solid var(--bevel-lo);
}

/* --- Suche ------------------------------------------------------------- */

.field-label {
  display: block; margin-bottom: 5px;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
#search {
  width: 100%; padding: 10px 11px; margin-bottom: 12px;
  background: var(--panel-in); color: var(--ink); font: inherit; font-size: .9rem;
  border-top: var(--bevel) solid var(--bevel-lo);
  border-left: var(--bevel) solid var(--bevel-lo);
  border-right: var(--bevel) solid var(--bevel-hi);
  border-bottom: var(--bevel) solid var(--bevel-hi);
}

/* --- Meldung ----------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  max-width: 90vw; padding: 9px 14px; text-align: center;
  background: var(--crt); color: var(--phosphor);
  border: 1px solid var(--phosphor);
  font-size: .74rem; letter-spacing: .05em;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Grundausstattung -------------------------------------------------- */

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Standbild --------------------------------------------------------- */

#freeze { display: none; object-fit: cover; }
.stage.paused #freeze { display: block; }
.stage.paused video { visibility: hidden; }

/* Die ganze Röhre ist Schaltfläche – beim Abarbeiten hält man das Gerät mit
   einer Hand und trifft keine kleinen Ziele. */
.stagetap {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.freezeflag {
  position: absolute; z-index: 3; top: 5px; left: 5px;
  padding: 2px 6px;
  background: var(--amber); color: #1b1710;
  font: 600 .58rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}

.statusbtn {
  margin-left: auto; padding: 2px 7px; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border-top: 1px solid var(--bevel-hi); border-left: 1px solid var(--bevel-hi);
  border-right: 1px solid var(--bevel-lo); border-bottom: 1px solid var(--bevel-lo);
  font: 600 .6rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}

/* --- Detailansicht ----------------------------------------------------- */

.detail {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(11, 20, 16, .82);
}
.detail[hidden] { display: none; }
.detail-sheet {
  width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto;
  padding: 12px;
  background: var(--panel);
  border-top: var(--bevel) solid var(--bevel-hi);
  border-left: var(--bevel) solid var(--bevel-hi);
  border-right: var(--bevel) solid var(--bevel-lo);
  border-bottom: var(--bevel) solid var(--bevel-lo);
}
.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.detail-rank {
  font: 600 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.detail-img {
  display: block; width: 100%; max-height: 46vh; object-fit: contain;
  background: #fff; margin-bottom: 12px;
  border-top: var(--bevel) solid var(--bevel-lo);
  border-left: var(--bevel) solid var(--bevel-lo);
  border-right: var(--bevel) solid var(--bevel-hi);
  border-bottom: var(--bevel) solid var(--bevel-hi);
}
.detail-fields {
  margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
}
.detail-fields dt {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); align-self: center;
}
.detail-fields dd { margin: 0; font-size: .86rem; }
#detail-name { font-weight: 600; }
#detail-nr { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.detail-actions { display: flex; gap: var(--gap); }
.detail-actions-secondary { margin-top: var(--gap); }
.key-quiet { background: var(--panel-in); color: var(--ink-soft); }
#detail-score[hidden], #detail-score-label[hidden] { display: none; }
.detail-actions .key:disabled { opacity: .5; cursor: default; }