:root {
  --text: #e6e6e6;
  --muted: #cfcfcf;
  --card: rgba(0,0,0,0.72);
  --border: rgba(255,255,255,0.18);
  --icon-size: 18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 400 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}
body::before {
  will-change: transform;
  transform: translateZ(0);
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(6,8,15,0.7), rgba(6,8,15,0.7)),

}

.site-header, .site-footer, main {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 16px;
}

.site-header h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3.2vw, 36px);
}
.category { margin: 22px 0; }
.category h2 {
  margin: 16px 0 10px;
  font-size: clamp(16px, 2.8vw, 20px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.items li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(2px);
}
.items .ico {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  background-image: url('assets/pokeball.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.items .name {
  font-size: clamp(15px, 2.6vw, 18px);
  font-weight: 500;
  min-width: 0;
}
.items .price {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: clamp(15px, 2.4vw, 18px);
  white-space: nowrap;
}

.site-footer p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.site-footer a { color: var(--text); text-decoration: underline; }
.notice { margin-top: 8px; opacity: 0.95; }

@media (max-width: 540px) {
  .items li { padding: 12px; }
}
@media print {
  body::before {
  will-change: transform;
  transform: translateZ(0); display: none; }
  body {
  color: #000; }
  .items li { background: #fff; border-color: #ccc; backdrop-filter: none; }
  .site-footer { color: #000; }
}

/* Site background (single source of truth) */
body::before {
  will-change: transform;
  transform: translateZ(0);
  content: "";
  position: fixed;
  inset: 0;
  background: var(--scroll-card, url('assets/card_bg.png')) center / cover no-repeat fixed;
  z-index: -1;
}



/* === Changelog styles === */
/* greenish for up */
/* reddish for down */
/* --- iOS Safari background zoom fix ---
   iOS has bugs with `background-attachment: fixed` + `cover` that cause zoom-in.
   We disable fixed attachment on iOS and rely on the fixed positioned ::before layer.
*/
@supports (-webkit-touch-callout: none) {
  html, body { height: 100%; }
  body::before {
  will-change: transform;
  transform: translateZ(0);
    /* keep layer fixed via position, but no background-attachment */
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}


/* Ensure consistent grid placement even when .ico is missing (OTHER category) */
.items li .name { grid-column: 2; }
.items li .price { grid-column: 3; justify-self: end; }

/* small icon inside changelog items */
/* === Background layering v5.0 === */
#bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg, #0b0c10) center / cover no-repeat;
  /* Use the small viewport height unit to avoid URL bar jumps on mobile */
  height: 100svh;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scroll-card, url('assets/card_bg.png')) center / cover no-repeat;
  /* must scroll with the page to create the "cover up" effect */
  pointer-events: none;
}

/* Reduce scroll bounce influence */
html, body { overscroll-behavior: none; }


/* v5.1: Footer text black & bold */
.site-footer p { color: #000 !important; font-weight: 700 !important; }
.site-footer a { color: #000 !important; text-decoration: underline; font-weight: 700 !important; }


/* v5.2: White info card for footer */
.site-footer .info-card {
  display: inline-block;
  margin: 14px auto 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  color: #000 !important;
  font-weight: 700;
}
.site-footer { text-align: center; }
.site-footer .info-card a { color: #000 !important; text-decoration: underline; font-weight: 700; }


/* v5.4: Auto-contrast footer info card */
.site-footer .info-card {
  position: relative;
  background: rgba(255,255,255,0.62); /* base tint */
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  color: #000 !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4); /* subtle lift on very dark bg */
}
/* Two blended layers: lighten dark BG (screen) + slightly darken light BG (multiply) */
.site-footer .info-card::before,
.site-footer .info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.site-footer .info-card::before {
  background: #fff;
  opacity: 0.35;
  mix-blend-mode: screen;   /* lightens dark backgrounds */
}
.site-footer .info-card::after {
  background: #000;
  opacity: 0.18;
  mix-blend-mode: multiply; /* subtly darkens very light backgrounds */
}


/* === v6.0 Set name styling === */
.set-name {
  display: inline-block;
  background: rgba(255, 255, 255, 0.68);
  color: #000;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
}
.set-name + .items { margin-top: 8px; }


/* === v6.0.2 Last Updated positioning and color === */
.set-name,
.last-updated {
  color: #000 !important;
}

.last-updated {
  /* pull up visually ~two text rows */
  margin-top: -2.2em;
  display: inline-block;
}


/* === v6.0.3 Last Updated on its own line === */
.set-name,
.last-updated {
  color: #000 !important;
}

/* Keep set names inline pills, but force Last Updated to be its own line */
.last-updated {
  display: block;
  width: fit-content;
  margin-top: -1.4em;   /* pull it up a bit */
  margin-bottom: 10px;  /* add breathing room before first set */
}


/* === v6.0.4 Header pill styling (matches set-name/last-updated) === */
.site-header h1 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.68);
  color: #000 !important;
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
}


/* === v6.0.5 Last Updated spacing tweak === */
.last-updated {
  margin-top: -1.8em;  /* moved up a bit more for even spacing */
  margin-bottom: 12px; /* consistent gap before the first set */
}


/* === v6.1.1 Static changelog === */
#changelog { margin-top: 24px; }
#changelog .changelog-list { list-style: none; margin: 10px 0 0; padding: 0; }
#changelog .changelog-list .chg {
  display: grid;
  grid-template-columns: 220px 1fr auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#changelog .when { opacity: 0.9; font-size: 0.9rem; }
#changelog .set { font-weight: 700; letter-spacing: 0.02em; }
#changelog .dot { opacity: 0.8; text-align: center; }
#changelog .item { font-weight: 500; }
#changelog .sep { opacity: 0.8; text-align: center; }
#changelog .delta { font-weight: 700; justify-self: end; }
@media (max-width: 680px) {
  #changelog .changelog-list .chg {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #changelog .dot, #changelog .sep { display: none; }
  #changelog .delta { justify-self: start; }
}


/* === v6.1.2 Changelog panel styling === */
#changelog {
  margin-top: 28px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
#changelog .set-name { margin-left: 4px; }

#changelog .changelog-list { list-style: none; margin: 14px 0 0; padding: 0; }
#changelog .changelog-list .chg {
  display: grid;
  grid-template-columns: 240px 1fr auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.52);
  border-radius: 14px;
  margin: 10px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(0,0,0,0.3);
}
#changelog .when { opacity: 0.95; font-size: 0.95rem; }
#changelog .set { font-weight: 800; letter-spacing: 0.02em; }
#changelog .dot { opacity: 0.8; text-align: center; }
#changelog .item { font-weight: 600; }
#changelog .sep { opacity: 0.8; text-align: center; }
#changelog .delta { font-weight: 800; justify-self: end; }

@media (max-width: 800px) {
  #changelog { padding: 12px; }
  #changelog .changelog-list .chg {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 8px 4px;
  }
  #changelog .dot, #changelog .sep { display: none; }
  #changelog .delta { justify-self: start; }
}