/* 8bitcollections styles (v3) */
:root{
  --text:#e6e6f0;
  --alt:#aaaabb;
  --space:#18192d;
  --accent:#1d1d21;
  --divider:#ffffff;
  --dotted:#ff4d6d;
  --card-bg:#1b1b2b;
  --gold:#f6d13a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"VT323", monospace;
  background: var(--space);
  color: var(--text);
  line-height:1.3;
  overflow-x:hidden;
}

#galagaCanvas{
  position:fixed;
  inset:0;
  z-index:-1;
  background:#000;
}

/* Header */
.site-header{ position:relative; background:transparent; }
.header-bg{
  background: url('../assets/header-bg-placeholder.png') center/cover no-repeat, linear-gradient(180deg, #0e0f1f, #111);
  min-height: 180px;
  width:100%;
}
.header-inner{
  position:absolute; inset:0;
  display:grid; grid-template-columns: 160px 1fr 160px;
  align-items:center;
  justify-items:center;
  padding: 10px 16px;
}
.logo{ width:120px; height:120px; object-fit:contain; image-rendering: pixelated; }

.title{
  text-align:center;
  font-size:98px;
  letter-spacing:2px;
  line-height:1;
  text-shadow: 4px 4px 0 #000, -2px -2px 0 #000;
  color: var(--gold);
  -webkit-text-stroke: 1px #000;
}

.whatnot-btn{
  display:flex; align-items:center; justify-content:center;
  width:120px; height:120px;
  background:var(--accent);
  color:var(--gold);
  font-size:28px;
  text-align:center;
  text-decoration:none;
  border-radius:12px;
  border:2px solid #333;
  box-shadow:0 0 0 3px #000 inset;
}
.whatnot-btn:hover{ filter:brightness(1.1) }
.divider{ height:2px; background:var(--divider); }

/* Content */
.content{ max-width:1200px; margin: 24px auto 80px; padding: 0 16px; position:relative; }

/* Controls */
.controls{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.control-block{
  border:2px dotted var(--dotted);
  padding:12px;
  border-radius:12px;
  background:rgba(15,15,28,0.6);
  backdrop-filter: blur(2px);
}
.control-block h2{ margin:0 0 8px; font-size:32px; color:var(--alt)}
.filters{ display:flex; gap:8px; margin-bottom:10px }
.filters input, .filters select{
  flex:1;
  background:#0f1020;
  color:var(--text);
  border:2px solid #2a2a3a;
  border-radius:8px;
  padding:8px 10px;
  font-family:"VT323", monospace;
  font-size:20px;
}
.price-range label{ display:block; margin:6px 0 6px; color:var(--alt); font-size:22px }
.range-row{ display:flex; gap:8px }
.range-row input[type="range"]{ flex:1 }

/* Sections */
.section{ margin: 20px 0 32px; padding: 12px; border-radius:14px; background:rgba(10,10,20,0.55); }
.dotted{ border:2px dotted var(--dotted); }
.section-header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.section-header h3{ margin:6px 8px 14px; font-size:36px; color:#ffd1db }
.stats{ color:var(--alt); font-size:22px; margin-right:8px }

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:14px;
}
.card{
  background: var(--card-bg);
  border:2px solid #2a2a3a;
  border-radius:12px;
  padding:12px;
  box-shadow: 0 2px 0 #000, 0 4px 0 #222;
}
.card .thumb{
  position:relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius:10px;
  border:2px dashed #444;
  cursor: zoom-in;
  background:#000;
}
.card img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  image-rendering: pixelated;
  background:#000;
}
.card .meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.name{ font-size:24px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.price{ font-size:22px; color:#9fe870 }

/* Footer with Force Refresh (#7) */
.site-footer{
  border-top:2px solid var(--divider);
  background:#0f1020;
  position:sticky;
  bottom:0;
  z-index:10;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.force-refresh{
  font-family:"VT323", monospace;
  font-size:22px;
  padding:8px 12px;
  background:#101223;
  color:var(--text);
  border:2px dotted var(--dotted);
  border-radius:10px;
  cursor:pointer;
}
.force-refresh:hover{ filter:brightness(1.08) }
.footnote{ color:var(--alt); font-size:20px }

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.lightbox[hidden]{ display:none }
.lightbox img{ max-width:95vw; max-height:85vh; border-radius:12px; border:2px solid #666 }
.lightbox-close{
  position:absolute; top:16px; right:16px;
  background:#000; color:#fff; border:2px solid #999; border-radius:8px;
  font-size:28px; width:44px; height:44px; cursor:pointer;
}

/* Responsive */
@media (max-width: 900px){
  .title{ font-size:64px; }
  .header-bg{ min-height: 160px; }
  .header-inner{ grid-template-columns: 120px 1fr 120px; }
  .logo{ width:100px; height:100px; }
  .whatnot-btn{ width:100px; height:100px; font-size:24px; }
}
@media (max-width: 600px){
  .title{ font-size:48px; }
  .controls{ grid-template-columns:1fr }
}