/* ── JohtoMarket Bumper-Studio · Collector's-Vault-Theme ───────────── */

:root {
  --bg: #0c0d12;
  --bg-soft: #14151d;
  --panel: #181a23;
  --panel-edge: #262837;
  --ink: #f2efe6;
  --ink-dim: #9b9aa8;
  --holo: linear-gradient(115deg, #7df0ff 0%, #9a8bff 32%, #ff9ad5 64%, #ffd98a 100%);
  --holo-soft: linear-gradient(115deg, rgba(125,240,255,.16), rgba(154,139,255,.16), rgba(255,154,213,.16), rgba(255,217,138,.16));
  --radius: 18px;
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(154,139,255,.13), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(125,240,255,.10), transparent 60%),
    var(--bg);
}

/* Korn-Overlay für Tiefe */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 999;
}

a { color: inherit; }

/* ── Kopfzeile ──────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px 14px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-gem {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--holo);
  position: relative;
  box-shadow: 0 0 24px rgba(154,139,255,.45);
  animation: gem-shift 7s ease-in-out infinite alternate;
}
.brand-gem::after {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 6px;
  border: 2px solid rgba(12,13,18,.85);
}
@keyframes gem-shift {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(50deg); }
}

.brand-text h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 750;
  letter-spacing: .01em;
  margin: 0;
  line-height: 1;
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text p {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.topnav { display: flex; gap: 8px; }

.nav-btn {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .15s;
}
.nav-btn:hover { color: var(--ink); transform: translateY(-1px); }
.nav-btn.is-active {
  color: #0c0d12;
  background: var(--holo);
  border-color: transparent;
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 290px;
  gap: 18px;
  padding: 8px 28px 28px;
  align-items: start;
}

.panel {
  min-width: 0;          /* Grid-Items duerfen nie breiter als ihre Spur werden */
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.panel::before {           /* feine Holo-Kante oben */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--holo);
  opacity: .55;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.step {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  font-size: 12px;
  border-radius: 7px;
  background: var(--holo);
  color: #0c0d12;
}

/* ── Suche ──────────────────────────────────────────────────────────── */

.search-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 130px);
  position: sticky;
  top: 14px;
}

.source-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.pill {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: var(--bg-soft);
  color: var(--ink-dim);
  cursor: pointer;
  transition: all .18s;
}
.pill:hover { color: var(--ink); border-color: #3a3d52; }
.pill.is-active {
  color: #0c0d12;
  background: var(--holo);
  border-color: transparent;
}

.search-row { display: flex; gap: 8px; }

#searchInput {
  flex: 1;
  min-width: 0;
  font: 500 14px var(--font-body);
  color: var(--ink);
  padding: 11px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  outline: none;
  transition: border-color .2s;
}
#searchInput:focus { border-color: #8f86e8; }
#searchInput::placeholder { color: #5b5a68; }

#searchBtn {
  width: 44px;
  font-size: 19px;
  border-radius: 12px;
  border: none;
  background: var(--holo);
  color: #0c0d12;
  cursor: pointer;
  transition: transform .15s;
}
#searchBtn:hover { transform: scale(1.06); }

.status {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 12px 2px;
  min-height: 18px;
}
.status.is-error { color: #ff9a9a; }

.results {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #34374a transparent;
}

.result {
  position: relative;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  background: var(--bg-soft);
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s, border-color .18s;
}
/* Hoehe kommt vom Bild selbst — aspect-ratio auf Grid-Items kollabiert in Safari */
.result img {
  width: 100%; height: auto;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  display: block;
}
.result:hover { transform: translateY(-3px) scale(1.02); }
.result.is-active { border-color: #9a8bff; box-shadow: 0 0 14px rgba(154,139,255,.5); }

/* ── Viewer ─────────────────────────────────────────────────────────── */

.viewer-panel { padding-bottom: 14px; }

/* Perspektive fuer den 3D-Tilt; overflow:hidden wuerde preserve-3d brechen,
   daher Rundung direkt auf Foto & Glanz statt Clipping */
.tilt-scene { perspective: 1100px; }

.stage-wrap {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  transform-style: preserve-3d;
  will-change: transform;
}

.stage {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;   /* quadratisch ohne aspect-ratio (Safari-Grid-Bug) */
  container-type: inline-size;
  transform-style: preserve-3d;
}

.stage-bumper {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: 14px;
}

/* wandernder Glanz, folgt dem Neigungswinkel (per JS via CSS-Variablen) */
.stage-shine {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 6;
  border-radius: 14px;
  opacity: var(--shine-o, 0);
  background:
    radial-gradient(45cqw circle at var(--shine-x, 50%) var(--shine-y, 40%),
      rgba(255,255,255,.30), rgba(255,255,255,0) 62%),
    linear-gradient(calc(100deg + var(--shine-rot, 0deg)),
      transparent 34%, rgba(125,240,255,.10) 46%,
      rgba(255,154,213,.10) 56%, transparent 70%);
  transition: opacity .3s;
}

/* Kartenfenster: ausgemessen am 1080×1080-Foto → x 357–710, y 357–843 */
.card-slot {
  position: absolute;
  left: 33.056%;
  top: 33.056%;
  width: 32.685%;
  height: 45.0%;
  border-radius: 1.1cqw;
  overflow: hidden;
  box-shadow: 0 0 0.65cqw rgba(30, 30, 40, .35);
  transform: translateZ(1.6cqw);   /* leichte Parallaxe beim Neigen */
}
.card-slot img {
  width: 100%; height: 100%;
  display: block;
  object-fit: fill;          /* Slot hat Karten-Seitenverhältnis; YGO wird minimal gestreckt */
}

/* dezenter Hüllen-Glanz, damit die flache Scan-Karte ins Foto passt */
.card-gloss {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 45%, rgba(120,120,140,.07) 100%);
  box-shadow: inset 0 0 1.2cqw rgba(40,40,55,.28);
  border-radius: inherit;
}

/* PSA-Label: Textband ausgemessen am 1080×1080-Foto → x 358–708, y 207–270 */
.label-slot {
  position: absolute;
  left: 33.148%;
  top: 19.167%;
  width: 32.407%;
  height: 5.833%;
  transform: translateZ(1.1cqw);
}
.label-patch {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.lbl {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.48cqw;               /* ≈ 16 px bei 1080 */
  line-height: 1;
  color: #2c2c34;
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* Zeilen-Oberkanten im Foto: y 216 / 235 / 254 → relativ zum Band (y 207) */
.lbl-l1 { left: .83cqw; top: .78cqw; max-width: 25.5cqw; }
.lbl-l2 { left: .83cqw; top: 2.54cqw; max-width: 23.5cqw; }
.lbl-l3 { left: .83cqw; top: 4.30cqw; max-width: 25.5cqw; }
.lbl-r1 { right: .74cqw; top: .78cqw; max-width: 9cqw; }
.lbl-r2 { right: .74cqw; top: 2.54cqw; }
.lbl-r3 { right: .74cqw; top: 4.30cqw; font-weight: 700; }

/* Bumper-Schnellleiste unter der Vorschau (nur mobil sichtbar) */
.strip-wrap { display: none; }

.stage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.meta-bumper {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}
.meta-card { margin: 3px 0 0; font-size: 13px; color: var(--ink-dim); }

.meta-actions { display: flex; gap: 8px; }
.ghost-btn.is-on {
  border-color: transparent;
  background: var(--holo);
  color: #0c0d12;
}

.ghost-btn {
  font: 600 13px var(--font-body);
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.ghost-btn:hover { border-color: #8f86e8; box-shadow: 0 0 12px rgba(154,139,255,.35); }

/* ── Bumper-Auswahl ─────────────────────────────────────────────────── */

.picker-panel {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  position: sticky;
  top: 14px;
  scrollbar-width: thin;
  scrollbar-color: #34374a transparent;
}

.series-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 16px 0 8px;
}
.series-name:first-child { margin-top: 0; }

.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.swatch {
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.swatch img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; transform: scale(1.5); }
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { border-color: #9a8bff; box-shadow: 0 0 12px rgba(154,139,255,.55); }

/* ── Galerie ────────────────────────────────────────────────────────── */

.gallery-panel { grid-column: 2 / 4; }
.gallery-title { margin-bottom: 16px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.mini {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  animation: mini-in .45s ease both;
}
.mini:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
@keyframes mini-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.mini .stage { background: #fff; }

.mini-label {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.mini-label small { color: var(--ink-dim); font-weight: 400; }

/* ── Fußzeile ───────────────────────────────────────────────────────── */

.foot {
  padding: 6px 28px 26px;
  font-size: 11.5px;
  color: #6a6977;
}
.foot a { color: #8f8da0; }

/* ── Responsiv ──────────────────────────────────────────────────────── */

@media (max-width: 1150px) {
  .layout { grid-template-columns: 300px minmax(0, 1fr); }
  .picker-panel { grid-column: 1 / 3; max-height: none; position: static; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .gallery-panel { grid-column: 1 / 3; }
}

@media (max-width: 760px) {
  /* Kopfzeile kompakt */
  .topbar { padding: 12px 14px 8px; gap: 10px; }
  .brand { gap: 10px; }
  .brand-gem { width: 30px; height: 30px; border-radius: 8px; }
  .brand-gem::after { inset: 4px; border-radius: 5px; }
  .brand-text h1 { font-size: 17px; }
  .brand-text p { font-size: 9.5px; letter-spacing: .1em; margin-top: 3px; }
  .nav-btn { font-size: 12.5px; padding: 8px 13px; }

  /* eine Spalte, Vorschau zuerst */
  .layout { grid-template-columns: 1fr; gap: 12px; padding: 4px 12px 20px; }
  .search-panel, .picker-panel, .gallery-panel, .viewer-panel { grid-column: auto; }
  .viewer-panel { order: -1; }
  .panel { padding: 14px; }
  .step { display: none; }   /* Schritt-Nummern passen zur Mobil-Reihenfolge nicht */

  .search-panel { position: static; max-height: none; }
  #searchInput { font-size: 16px; }   /* verhindert iOS-Auto-Zoom beim Fokus */
  .results {
    grid-template-columns: repeat(2, 1fr);   /* groessere Karten auf dem Handy */
    column-gap: 10px;
    row-gap: 0;
    max-height: 58vh;
    padding-top: 4px;
  }
  /* Karten stapeln sich wie ein Faecher: jede verdeckt die untere Haelfte
     der vorigen (Kartenhoehe = 139.7 % der Breite → halbe Hoehe ≈ 70 %) */
  .result {
    margin-bottom: -68%;
    align-self: start;
    box-shadow: 0 -10px 22px rgba(0, 0, 0, .55);
  }
  .result:nth-last-child(-n+2) { margin-bottom: 0; }
  .result:hover, .result:focus-visible, .result.is-active { z-index: 2; }

  /* Bumper-Auswahl wandert als Schnellleiste unter die Vorschau */
  .picker-panel { display: none; }
  .strip-wrap { display: block; margin-top: 12px; }
  .strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip .swatch { flex: 0 0 56px; }
  .strip-hint {
    margin: 7px 2px 0;
    font-size: 11px;
    color: var(--ink-dim);
  }

  .stage-meta { flex-wrap: wrap; }
  .meta-bumper { font-size: 15px; }

  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .foot { padding: 0 14px 22px; }
}