@font-face { font-family: "Atkinson"; src: url("/static/fonts/atkinson-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/static/fonts/atkinson-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pixel"; src: url("/static/fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }

:root {
  --moss: #26331F;      /* Grund */
  --moss-2: #2F3E27;    /* erhöhte Flächen */
  --sage: #57674D;      /* Markenfarbe Green Ocean */
  --leaf: #8FA876;      /* Akzent, Handlung */
  --cream: #EFE9D8;     /* Text */
  --cream-soft: #C9C6B4;
  --amber: #E2B04A;     /* Hinweise */
  --dock-h: 92px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--moss); color: var(--cream);
  font: 17px/1.5 "Atkinson", system-ui, sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(var(--dock-h) + env(safe-area-inset-bottom) + 16px);
  max-width: 560px; margin-inline: auto;
}
img { display: block; max-width: 100%; }
a { color: var(--cream); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* Kopf */
.top { display: flex; align-items: center; gap: 12px; margin: 4px 0 28px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 20px/1 "Pixel", monospace; letter-spacing: 1px; }
.brand img { width: 44px; height: 44px; image-rendering: pixelated;
  /* heller Pixelrand: die dunkle Ballhälfte hebt sich so vom gleichfarbigen Hintergrund ab */
  filter: drop-shadow(2px 0 0 var(--cream)) drop-shadow(-2px 0 0 var(--cream)) drop-shadow(0 2px 0 var(--cream)) drop-shadow(0 -2px 0 var(--cream)); }
.tagline { margin: 4px 0 0; color: var(--cream-soft); font-size: 15px; }

/* Sammlungswert */
.worth { margin-bottom: 24px; }
.worth-label { margin: 0 0 10px; color: var(--cream-soft); font-size: 16px; }
.worth-value { margin: 0; font: clamp(26px, 8.5vw, 38px)/1.15 "Pixel", monospace; color: var(--leaf); word-break: break-word; }
.worth-meta { margin: 12px 0 0; color: var(--cream-soft); font-size: 15px; }

/* Ergebnis eines Scans */
.result {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start;
  background: var(--moss-2); border: 2px solid var(--sage); border-radius: 14px; padding: 14px; margin-bottom: 20px;
}
.result h3 { margin: 0 0 2px; font-size: 21px; line-height: 1.2; }
.result .sub { margin: 0 0 10px; color: var(--cream-soft); font-size: 15px; }
.result .price { margin: 0; font: 18px/1.3 "Pixel", monospace; color: var(--leaf); }
.result .price.none { font: 700 16px/1.4 "Atkinson", sans-serif; color: var(--amber); }
.result .price.bulk { font: 700 16px/1.4 "Atkinson", sans-serif; color: var(--cream-soft); }
.result .usd { margin: 6px 0 0; color: var(--cream-soft); font-size: 14px; }
.result .note { margin: 10px 0 0; font-size: 13px; color: var(--cream-soft); }
.result .note.warn { color: var(--amber); }
.result .market { display: inline-block; margin-top: 10px; font-size: 15px; color: var(--leaf); text-underline-offset: 3px; }
.result .actions { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.cardimg { position: relative; border-radius: 7px; overflow: hidden; background: var(--moss); aspect-ratio: 245 / 342; }
.cardimg img { width: 100%; height: 100%; object-fit: cover; }

/* Holo-Glanz: der eine Moment, wenn eine Karte erkannt wurde */
.cardimg.reveal::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(239,233,216,.55) 45%, rgba(143,168,118,.45) 50%, rgba(226,176,74,.4) 55%, transparent 65%);
  transform: translateX(-120%); animation: sheen 1.1s ease-out .15s forwards; pointer-events: none;
}
@keyframes sheen { to { transform: translateX(120%); } }

.status { min-height: 1.5em; margin: 0 0 16px; color: var(--cream-soft); font-size: 15px; }
.status.err { color: var(--amber); }
.link { background: none; border: 0; padding: 0; color: var(--cream); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Sammlung */
.coll-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.coll-head h2 { margin: 0; font-size: 19px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile-btn { width: 100%; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.tile img { width: 100%; height: auto; aspect-ratio: 245 / 342; object-fit: cover; border-radius: 6px; background: var(--moss-2); }
img.ph { object-fit: contain !important; padding: 22%; background: var(--moss-2); }
.tile-price { display: block; margin-top: 6px; font: 10px/1.4 "Pixel", monospace; color: var(--leaf); }
.tile-price.none { font: 13px/1.4 "Atkinson", sans-serif; color: var(--cream-soft); }
.empty p { margin: 0 0 12px; color: var(--cream-soft); max-width: 46ch; }
.empty .hint { font-size: 15px; }

.foot { margin-top: 36px; color: var(--cream-soft); font-size: 14px; }
.foot p { margin: 0 0 6px; }
.foot a { margin-right: 16px; color: var(--cream-soft); }

/* Scan-Knopf, unten in Daumenreichweite */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--moss) 70%, transparent);
}
.scan {
  display: flex; align-items: center; justify-content: center; max-width: 528px; margin: 0 auto; height: 60px;
  background: var(--leaf); color: var(--moss); border-radius: 14px; cursor: pointer;
  font: 700 19px/1 "Atkinson", sans-serif; box-shadow: 0 4px 0 #5f7550;
}
.scan:active { transform: translateY(3px); box-shadow: 0 1px 0 #5f7550; }
.scan:focus-within { outline: 3px solid var(--amber); outline-offset: 3px; }
.scan.busy { opacity: .6; pointer-events: none; }
.scan input { position: absolute; opacity: 0; width: 1px; height: 1px; }

@media (min-width: 480px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cardimg.reveal::after { animation: none; display: none; } .scan:active { transform: none; } }

/* Textseiten (Impressum, Datenschutz) */
.page h1 { font-size: 26px; margin: 8px 0 16px; }
.page h2 { font-size: 19px; margin: 28px 0 8px; }
.page p, .page li { color: var(--cream); max-width: 68ch; }
.page .draft { border: 2px solid var(--amber); color: var(--amber); border-radius: 10px; padding: 10px 14px; }
.page .back { display: inline-block; margin-bottom: 8px; }