/* ── LIDL·TRON · CRT a tope ─────────────────────────────────────────── */

:root {
  --bg: #07070f;
  --panel: #0d0d1c;
  --panel2: #11112a;
  --cyan: #00f0ff;
  --magenta: #ff2d95;
  --yellow: #ffe600;
  --green: #39ff14;
  --red: #ff3355;
  --dim: #8888bb;
  --pixel: "Press Start 2P", monospace;
  --mono: "VT323", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #000; }

body {
  background: var(--bg);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 20px;
  min-height: 100vh;
  overflow-x: hidden;
  animation: powerOn 0.9s ease-out;
}

@keyframes powerOn {
  0%   { transform: scaleY(0.005) scaleX(0.6); filter: brightness(6); }
  40%  { transform: scaleY(0.005) scaleX(1); filter: brightness(6); }
  70%  { transform: scaleY(1) scaleX(1); filter: brightness(2); }
  100% { transform: none; filter: none; }
}

/* Capas CRT */
/* z bajo: las fotos (z 6) y las modales (z 80+) quedan fuera del efecto */
#scanlines {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px, rgba(0, 0, 0, 0.22) 4px
  );
  mix-blend-mode: multiply;
}
#vignette {
  position: fixed; inset: 0; z-index: 91; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Boot screen */
#boot {
  position: fixed; inset: 0; z-index: 95;
  background: #000; color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 26px;
  text-shadow: 0 0 8px var(--green);
  transition: opacity 0.4s;
}
#boot.off { opacity: 0; pointer-events: none; }

/* Cabecera */
header { text-align: center; padding: 22px 12px 10px; }

h1 {
  font-family: var(--pixel);
  font-size: clamp(26px, 6vw, 52px);
  letter-spacing: 2px;
}
h1 .c1 { color: var(--yellow); text-shadow: 0 0 6px var(--yellow), 0 0 24px rgba(255, 230, 0, .6), 3px 3px 0 #7a2; }
h1 .c2 { color: var(--red); text-shadow: 0 0 10px var(--red); }
h1 .c3 { color: var(--magenta); text-shadow: 0 0 6px var(--magenta), 0 0 24px rgba(255, 45, 149, .6), 3px 3px 0 #518; }

.tagline {
  color: var(--dim);
  font-size: 18px;
  letter-spacing: 6px;
  margin-top: 8px;
}

.hud {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: 14px auto 0; padding: 8px 14px;
  max-width: 900px;
  border: 2px solid var(--panel2);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.12) inset;
  font-family: var(--pixel); font-size: 11px; color: var(--dim);
}
.hud b { color: var(--green); text-shadow: 0 0 8px var(--green); margin-left: 4px; }
.hud .hud-sync b { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }

/* Controles */
#controls { max-width: 1600px; margin: 14px auto 0; padding: 0 14px; }

.searchrow {
  display: flex; align-items: center; gap: 10px;
  border: 3px solid var(--cyan);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.35), 0 0 18px rgba(0, 240, 255, 0.2) inset;
  padding: 4px 14px;
  background: var(--panel);
}
.prompt { color: var(--magenta); font-family: var(--pixel); font-size: 18px; animation: promptBlink 1.1s steps(1) infinite; }
@keyframes promptBlink { 50% { opacity: 0.15; } }

#q {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--yellow); font-family: var(--mono); font-size: 30px;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.7);
  caret-color: var(--yellow);
}
#q::placeholder { color: #665; }
#q::-webkit-search-cancel-button { filter: hue-rotate(180deg); }

/* Chips de categoría */
#cats {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 6px;
  scrollbar-width: thin; scrollbar-color: var(--panel2) transparent;
}
.cat {
  flex: 0 0 auto;
  font-family: var(--pixel); font-size: 10px;
  color: var(--cyan); background: var(--panel);
  border: 2px solid var(--panel2); padding: 8px 10px;
  cursor: pointer; white-space: nowrap;
}
.cat small { color: var(--dim); font-family: var(--mono); font-size: 14px; margin-left: 6px; }
.cat em { font-style: normal; color: var(--magenta); margin-right: 6px; }
.cat.on em { color: #802; }
.cat:hover { border-color: var(--cyan); }
.cat.on {
  color: #000; background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}
.cat.on small { color: #044; }

/* Fila de filtros */
.filterrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 4px; align-items: stretch; }

.filterrow input, .filterrow select, .toggle {
  font-family: var(--mono); font-size: 20px;
  background: var(--panel); color: var(--cyan);
  border: 2px solid var(--panel2); padding: 5px 10px; outline: 0;
}
.filterrow input:focus, .filterrow select:focus { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 240, 255, .4); }
#brand { width: 200px; }
.pricebox { display: inline-flex; align-items: center; gap: 4px; }
.pricebox input { width: 92px; -moz-appearance: textfield; }
.pricebox input::-webkit-outer-spin-button, .pricebox input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dash { color: var(--dim); }
select { cursor: pointer; }

.toggle { cursor: pointer; color: var(--dim); letter-spacing: 1px; }
.toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.toggle[aria-pressed="true"] {
  color: #000; background: var(--green); border-color: var(--green);
  box-shadow: 0 0 14px var(--green); text-shadow: none;
}
#f-new[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
#f-sale[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 14px var(--magenta); }
#f-fav[aria-pressed="true"] { background: var(--red); border-color: var(--red); box-shadow: 0 0 14px var(--red); }
.blink-border { animation: newPulse 1.6s infinite; }
@keyframes newPulse { 50% { border-color: var(--yellow); } }
.reset { color: var(--red); border-color: #402; }
.reset:hover { background: var(--red); color: #000; border-color: var(--red); box-shadow: 0 0 12px var(--red); }
.helpbtn { color: var(--yellow); border-color: #430; font-family: var(--pixel); font-size: 13px; }
.helpbtn:hover { background: var(--yellow); color: #000; border-color: var(--yellow); box-shadow: 0 0 12px var(--yellow); }

#status {
  max-width: 1600px; margin: 8px auto 0; padding: 0 16px;
  color: var(--dim); font-size: 19px; min-height: 24px;
}
#status b { color: var(--green); }

/* Grid denso */
#grid {
  max-width: 1600px; margin: 8px auto; padding: 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 2px solid var(--panel2);
  text-decoration: none; color: inherit;
  transition: transform 0.06s steps(2), border-color 0.06s;
}
/* z 7: el transform crea stacking context y sin él la foto volvería bajo las scanlines */
.card:hover {
  border-color: var(--magenta);
  box-shadow: 0 0 16px rgba(255, 45, 149, 0.5);
  transform: translateY(-2px);
  z-index: 7;
}
.card.sel {
  border-color: var(--green);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.6);
  transform: translateY(-2px);
  z-index: 7;
}

.imgbox { position: relative; z-index: 6; aspect-ratio: 1; background: #fff; overflow: hidden; }
.imgbox img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card.oos .imgbox img { filter: grayscale(1) brightness(0.75); }

.badge {
  position: absolute; font-family: var(--pixel); font-size: 8px;
  padding: 4px 5px; line-height: 1;
}
.badge.new { top: 4px; left: 4px; background: var(--yellow); color: #000; box-shadow: 0 0 10px var(--yellow); animation: promptBlink 1.2s steps(1) infinite; }
.badge.pct { top: 4px; right: 4px; background: var(--magenta); color: #fff; box-shadow: 0 0 10px var(--magenta); }
.badge.oos {
  top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(0, 0, 0, 0.85); color: var(--red); border: 1px solid var(--red);
  font-size: 9px; padding: 5px 7px; letter-spacing: 1px;
}

/* Corazón de favorito sobre la imagen */
.fav {
  position: absolute; bottom: 4px; right: 4px; z-index: 1;
  width: 30px; height: 30px; padding: 0;
  background: rgba(0, 0, 0, 0.55); color: var(--dim);
  border: 2px solid rgba(136, 136, 187, 0.45);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.fav:hover { color: var(--red); border-color: var(--red); }
.fav.on {
  color: var(--red); border-color: var(--red);
  text-shadow: 0 0 8px var(--red);
  box-shadow: 0 0 10px rgba(255, 51, 85, 0.5);
}

.cbody { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px 9px; flex: 1; }

.cbrand {
  font-family: var(--pixel); font-size: 7px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctitle {
  font-size: 17px; line-height: 1.1; color: #cfe;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.2em;
}
.cfoot { margin-top: auto; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cprice {
  font-family: var(--pixel); font-size: 13px; color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.8);
}
.card:hover .cprice { color: var(--green); text-shadow: 0 0 8px var(--green); }
.cold { font-size: 15px; color: var(--red); text-decoration: line-through; }
.crating { font-size: 14px; color: var(--cyan); margin-left: auto; }

#sentinel { height: 2px; }

/* Estado vacío */
.empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px;
  font-family: var(--pixel); font-size: 14px; color: var(--red);
  text-shadow: 0 0 10px var(--red); line-height: 2.4;
}
.empty small { display: block; font-family: var(--mono); font-size: 20px; color: var(--dim); text-shadow: none; }

/* ── Modal de detalle ─────────────────────────────────────────────── */

#modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
#modal[hidden] { display: none; }

#modal-back { position: absolute; inset: 0; background: rgba(2, 2, 8, 0.82); }

#modal-box {
  position: relative; z-index: 1;
  width: min(960px, 100%); max-height: 92vh; overflow: hidden;
  background: var(--panel);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 30px rgba(0, 240, 255, 0.15) inset;
  padding: 22px;
  animation: modalIn 0.14s steps(3);
}
@keyframes modalIn { from { transform: scale(0.92); opacity: 0; } }

/* La ✕ vive en el marco (que no scrollea); el scroll va dentro de .m-cols */
#m-close {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: var(--panel); border: 2px solid var(--red); color: var(--red);
  font-family: var(--pixel); font-size: 14px;
  width: 40px; height: 40px; cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 51, 85, 0.5);
}
#m-close:hover { background: var(--red); color: #000; box-shadow: 0 0 12px var(--red); }

.m-cols {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px;
  max-height: calc(92vh - 50px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--panel2) transparent;
}

.m-imgwrap { position: relative; background: #fff; aspect-ratio: 1; }
.m-imgwrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  background: rgba(0, 0, 0, 0.65); color: var(--yellow); border: 2px solid var(--yellow);
  font-family: var(--pixel); font-size: 13px; padding: 8px 8px; cursor: pointer;
}
.m-arrow:hover { background: var(--yellow); color: #000; box-shadow: 0 0 12px var(--yellow); }
#m-prev { left: 6px; }
#m-next { right: 6px; }

.m-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.m-thumbs img {
  width: 56px; height: 56px; object-fit: contain; background: #fff;
  border: 2px solid var(--panel2); cursor: pointer; opacity: 0.55;
}
.m-thumbs img.on, .m-thumbs img:hover { opacity: 1; border-color: var(--cyan); }

.m-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-brand { font-family: var(--pixel); font-size: 10px; color: var(--dim); }
.m-title { font-family: var(--pixel); font-size: 15px; line-height: 1.6; color: #cfe; }
.m-cat { font-size: 16px; color: var(--dim); }

.m-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.m-now { font-family: var(--pixel); font-size: 26px; color: var(--yellow); text-shadow: 0 0 12px rgba(255, 230, 0, 0.8); }
.m-old { font-size: 22px; color: var(--red); text-decoration: line-through; }
.m-pct { font-family: var(--pixel); font-size: 12px; background: var(--magenta); color: #fff; padding: 5px 7px; box-shadow: 0 0 10px var(--magenta); }
.m-ends { font-family: var(--pixel); font-size: 9px; color: var(--magenta); }

.m-stats { font-size: 18px; color: var(--cyan); }
.m-stats small { color: var(--dim); }
.m-new { color: var(--yellow); }
.m-ok { color: var(--green); }
.m-oos { color: var(--red); }

.m-specs h3 { font-family: var(--pixel); font-size: 11px; color: var(--magenta); margin-bottom: 6px; }
.m-specs ul { list-style: none; }
.m-specs li { font-size: 18px; line-height: 1.35; color: #bce; padding-left: 16px; position: relative; }
.m-specs li::before { content: "►"; position: absolute; left: 0; color: var(--magenta); font-size: 11px; top: 4px; }

.m-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.m-go {
  font-family: var(--pixel); font-size: 11px; text-decoration: none;
  background: var(--green); color: #000; padding: 12px 14px;
  box-shadow: 0 0 14px var(--green);
}
.m-go:hover { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.m-go kbd { background: rgba(0, 0, 0, 0.3); color: #dfd; border-color: rgba(0, 0, 0, 0.45); margin-left: 4px; }
.m-fav {
  font-family: var(--pixel); font-size: 11px; cursor: pointer;
  background: transparent; color: var(--red); border: 2px solid #402; padding: 12px 14px;
}
.m-fav:hover, .m-fav.on { background: var(--red); color: #000; border-color: var(--red); box-shadow: 0 0 14px var(--red); }
.m-fav.on kbd, .m-fav:hover kbd { background: rgba(0, 0, 0, 0.3); color: #fdd; border-color: rgba(0, 0, 0, 0.45); }
.m-fav kbd { margin-left: 4px; }
.m-esc {
  font-family: var(--pixel); font-size: 11px; cursor: pointer;
  background: transparent; color: var(--dim); border: 2px solid var(--panel2); padding: 12px 14px;
}
.m-esc:hover { color: var(--red); border-color: var(--red); }

@media (max-width: 700px) {
  .m-cols { grid-template-columns: 1fr; gap: 14px; }
  #modal { padding: 8px; }
  #modal-box { padding: 14px; padding-top: 52px; }
  #m-close { width: 44px; height: 44px; }
}

/* ── Ayuda de atajos ──────────────────────────────────────────────── */

kbd {
  font-family: var(--pixel); font-size: 10px; color: var(--yellow);
  background: var(--panel2); border: 2px solid #334;
  padding: 3px 6px; white-space: nowrap;
}

#help { position: fixed; inset: 0; z-index: 82; display: flex; align-items: center; justify-content: center; padding: 20px; }
#help[hidden] { display: none; }
#help-back { position: absolute; inset: 0; background: rgba(2, 2, 8, 0.82); }

#help-box {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--panel);
  border: 3px solid var(--yellow);
  box-shadow: 0 0 30px rgba(255, 230, 0, 0.4), 0 0 30px rgba(255, 230, 0, 0.1) inset;
  padding: 24px;
  animation: modalIn 0.14s steps(3);
}
#help-box h2 {
  font-family: var(--pixel); font-size: 16px; color: var(--yellow);
  text-shadow: 0 0 10px var(--yellow); text-align: center; margin-bottom: 18px;
}
#help-box table { width: 100%; border-collapse: collapse; }
#help-box td { padding: 6px 8px; font-size: 19px; color: #bce; vertical-align: top; }
#help-box td:first-child { text-align: right; width: 118px; }
#help-box tr:nth-child(odd) td { background: rgba(17, 17, 42, 0.5); }
.help-foot { text-align: center; margin-top: 16px; color: var(--dim); font-size: 17px; }

footer {
  text-align: center; color: #555; padding: 26px 10px 90px; font-size: 17px;
}
footer a { color: var(--dim); }

@media (max-width: 560px) {
  #grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 7px; }
  #q { font-size: 24px; }
  .hud { gap: 8px 14px; font-size: 9px; }
}