/* =====================================================
   Playin' for Keeps Sports Cards — street edition
   Midnight blues + earth tones, spray-paint accents,
   sticker-slapped cards. City at night, not a museum.
   ===================================================== */

@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Permanent Marker';
  src: url('fonts/permanent-marker.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* headline tag font — "A Dripping Marker" by Wick van den Belt (dafont) */
@font-face {
  font-family: 'A Dripping Marker';
  src: url('fonts/a-dripping-marker.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b101a;            /* midnight ink-blue */
  --bg-raised: #131b29;
  --ink: #e7ecf4;
  --ink-soft: #91a2b8;      /* concrete */
  --spray: #4f9dff;         /* electric spray blue */
  --spray-deep: #2b6fd4;
  --clay: #c9744a;          /* rust / clay earth tone */
  --line: #223047;
  --radius: 10px;
  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --graffiti: 'A Dripping Marker', 'Permanent Marker', cursive;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  background-color: var(--bg);
  /* faint concrete-wall grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 16, 26, 0.94);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--ink);
}

/* the P4K tag — a slapped sticker, marker on black */
.logo-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 7px;
  background: #080b12;
  border: 2px solid var(--spray);
  color: var(--spray);
  font-family: var(--marker);
  font-size: 19px;
  transform: rotate(-4deg);
  box-shadow: 3px 3px 0 rgba(43, 111, 212, 0.35);
}

.logo-text {
  font-family: var(--graffiti);
  font-size: 23px;
  letter-spacing: 1.5px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.logo-sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: 3.5px;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 1.5px;
  padding: 8px 12px 6px;
}

.site-nav a:hover { color: var(--ink); }

/* active page gets a hand-drawn marker underline */
.site-nav a.active {
  color: var(--spray);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='6' viewBox='0 0 70 6'%3E%3Cpath d='M2 4 C 18 1.5, 40 5, 68 2.5' stroke='%234f9dff' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom 2px;
  background-size: 80% 6px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 8px;
  position: relative;
  overflow: hidden;
}

/* soft spray-can bloom behind the headline */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 420px 200px at 18% 55%, rgba(43, 111, 212, 0.22), transparent 70%),
    radial-gradient(ellipse 260px 140px at 45% 30%, rgba(201, 116, 74, 0.10), transparent 70%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  font-family: var(--graffiti);
  font-weight: 400;
  font-size: clamp(48px, 9.5vw, 100px);
  line-height: 1.05;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(43, 111, 212, 0.45);
}

.hero-tag {
  position: relative;
  font-family: var(--marker);
  color: var(--spray);
  font-size: 23px;
  margin-top: 16px;
  max-width: 46ch;
}

/* ---------- Filter chips ---------- */

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 34px 0 4px;
}

.chip {
  border: 1.5px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 1.5px;
  padding: 7px 15px 5px;
  border-radius: 4px;
  cursor: pointer;
}

.chip:hover { color: var(--ink); border-color: var(--ink-soft); }

/* the collection switcher on gallery pages uses chips that are real links */
a.chip { display: inline-block; text-decoration: none; }

.chip-active {
  background: var(--spray);
  border-color: var(--spray);
  color: #0a0f18;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(43, 111, 212, 0.4);
}

/* Two different jobs, deliberately two classes. .empty-note is the filter's
   "nothing here yet" state and script.js shows and hides it. .grid-note is a
   standing caption under a gallery grid — it must never be hidden, which is
   exactly what happened while it shared the .empty-note class. */
.empty-note,
.grid-note {
  font-family: var(--marker);
  color: var(--ink-soft);
  font-size: 16px;
  padding: 40px 0 24px;
}

/* ---------- The Rotation: favourite Shaqs on the homepage ----------
   Blackout stage — near-black with one spray-blue shaft cutting behind the
   card. Every word on it comes from the spreadsheet via data/favs.js.
   Stepping happens on invisible 96px zones down each edge; the thumbnail
   strip is the visible affordance. Arrows were tried and dropped — they
   pulled attention off the cards. ------------------------------------- */

.rot-stage {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 34px 40px;
  border-radius: 12px;
  background: #04060a;
  border: 1px solid #16202e;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}

.rot-stage::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 70%;
  height: 170%;
  background: linear-gradient(180deg, rgba(43, 111, 212, 0.30), rgba(43, 111, 212, 0));
  transform: rotate(14deg);
  filter: blur(2px);
}

.rot-stage > * { position: relative; z-index: 1; }

.rot-card {
  height: 340px;
  width: auto;
  border-radius: 6px;
  transform: rotate(3deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  justify-self: end;
}

.rot-year {
  font-family: var(--graffiti);
  font-size: clamp(40px, 7.4vw, 88px);
  line-height: 0.92;
  text-transform: uppercase;
  text-shadow: 5px 5px 0 rgba(43, 111, 212, 0.5);
}

.rot-set {
  font-family: var(--marker);
  color: var(--spray);
  font-size: 16px;
  margin-top: 12px;
  max-width: 40ch;
}

.rot-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 15px; }

.rot-tag {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 1.4px;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  border-radius: 4px;
  padding: 4px 10px 2px;
}

.rot-tag.sn { color: var(--spray); border-color: var(--spray); }
.rot-tag.gr { color: #7fc98a; border-color: #3d6a46; }
.rot-tag.nat { color: var(--clay); border-color: var(--clay); }

/* step zones — no glyph, the edge lights up instead */
.rot-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  z-index: 3;
  border: 0;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease;
}

.rot-zone.l { left: 0;  background: linear-gradient(90deg,  rgba(0, 0, 0, 0.55), transparent); }
.rot-zone.r { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.55), transparent); }
.rot-zone.l:hover { background: linear-gradient(90deg,  rgba(43, 111, 212, 0.45), transparent); }
.rot-zone.r:hover { background: linear-gradient(270deg, rgba(43, 111, 212, 0.45), transparent); }

/* Sized so eleven thumbnails span the full 1060px without spilling. Landscape
   cards run about double the width of portrait ones, so the fit depends on the
   line-up, not just the count — overflow-x is the safety net if a future pick
   leans wide. */
.rot-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 2px 8px;
  justify-content: space-between;
  overflow-x: auto;
  scrollbar-width: thin;
}

.rot-thumbs button {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
  line-height: 0;
  opacity: 0.45;
  transition: opacity 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.rot-thumbs button:hover { opacity: 0.9; transform: translateY(-3px); }
.rot-thumbs button.on { opacity: 1; border-color: var(--spray); }
.rot-thumbs img { height: 104px; width: auto; border-radius: 3px; display: block; }

@media (max-width: 700px) {
  .rot-stage { grid-template-columns: 1fr; padding: 26px 22px; min-height: 0; }
  .rot-card { height: 250px; justify-self: center; }
  .rot-zone { width: 56px; }
  .rot-thumbs { overflow-x: auto; justify-content: flex-start; }
  .rot-thumbs img { height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .rot-thumbs button { transition: none; }
}

/* ---------- Checklist search (homepage) ----------
   A plain GET form to checklist.html?q=… — works without JavaScript.
   The recess is lit from inside and out: the drip strokes sit in the light. */

.home-search { padding: 4px 0 34px; }

.search-pill {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 30px;
  border-radius: 999px;
  background: #05070c;
  border: 2px solid var(--spray);
  box-shadow:
    inset 0 0 26px rgba(79, 157, 255, 0.26),
    inset 0 2px 9px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(79, 157, 255, 0.20);
}

.search-pill svg {
  color: var(--spray);
  flex-shrink: 0;
}

/* the drip font has descenders and actual drips — it needs the height */
.search-pill input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--graffiti);
  font-size: clamp(26px, 4.6vw, 36px);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1.35;
  padding: 2px 0;
}

.search-pill input::placeholder { color: #3a4b66; }

/* the browser's own clear button fights the dark recess */
.search-pill input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (max-width: 640px) {
  .search-pill { padding: 12px 20px; gap: 11px; }
}

/* ---------- Collection panels ---------- */

.panels {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 30px 0 40px;
}

.panel {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-height: 330px;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-raised);
  transform: rotate(-0.4deg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.panel:nth-child(even) { transform: rotate(0.4deg); }

a.panel:hover {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--spray);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* the wall: dark brick under a spray-blue streetlight glow — same on every panel */
.panel-art {
  position: absolute;
  inset: 0;
  background-color: #0a0e16;
  background-image:
    radial-gradient(ellipse 65% 130% at 22% 62%, rgba(43, 111, 212, 0.30), transparent 68%),
    url('images/panels/brick-tile.svg');
  background-size: auto, 580px auto;
}

.panel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the card front, propped against the wall — never covered by text */
.card-prop {
  position: absolute;
  z-index: 1;
  right: 4.5%;
  top: 50%;
  transform: translateY(-50%) rotate(2.2deg);
  height: 82%;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.5);
}

/* .two-up — a panel carrying two cards leaned together, the first sitting
   back and left, the second overlapping in front on the right.
   Used by the Ernie Johnson panel (father and son) and the homepage panel. */
.two-up .card-prop {
  right: 21%;
  transform: translateY(-50%) rotate(-3deg);
}

.card-prop-2 {
  position: absolute;
  z-index: 2;
  right: 4.5%;
  top: 50%;
  transform: translateY(-50%) rotate(2.6deg);
  height: 82%;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.5);
}

.two-up .panel-inner { max-width: 46%; }

.panel-inner {
  position: relative;
  z-index: 2;
  padding: 34px 30px 30px;
  max-width: 58%;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

/* panels with no card scan yet: let the text use the full width */
.panel.no-prop .panel-inner { max-width: 100%; }

.panel h2 {
  font-family: var(--graffiti);
  font-weight: 400;
  font-size: clamp(36px, 6.5vw, 60px);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.05;
  text-shadow: 3px 3px 0 rgba(43, 111, 212, 0.4);
}

.p-ej h2,
.p-international h2 { font-size: clamp(28px, 5.5vw, 46px); }

.panel-tag { font-family: var(--marker); color: var(--spray); font-size: 17px; }

.panel-count {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
}

.enter {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 2px;
  color: #0a0f18;
  background: var(--spray);
  padding: 8px 18px 6px;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  box-shadow: 2px 2px 0 rgba(43, 111, 212, 0.4);
  margin-top: 6px;
}

.enter.soon {
  background: transparent;
  border: 1.5px dashed var(--ink-soft);
  color: var(--ink-soft);
  box-shadow: none;
}

/* ---------- The tally: per-collection counts on the homepage ----------

   The bar is the WANT LIST, not the catalogue: blue is what's in hand,
   clay is what's still being hunted, and together they make the list
   actually being worked. The catalogued figure sits outside the bar as
   scale only.

   This matters. Measuring in-hand against the full catalogue would imply
   a finish line that doesn't exist for a player collection — and would
   render 2,234 Shaq cards as a mostly-empty bar while 60 Ernie Johnsons
   looked nearly done.
   -------------------------------------------------------------------- */

.tally { padding: 4px 0 14px; }

.tally-row {
  display: grid;
  grid-template-columns: 150px 1fr 132px;
  align-items: center;
  gap: 22px;
  padding: 15px 20px;
  margin-bottom: 9px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tally-row:hover {
  border-color: var(--spray);
  transform: translateX(4px);
}

/* International is a slice of the Shaq collection, not a fifth one, so its row
   hangs off Shaq's instead of standing beside it — indented, quieter, dashed.
   Its figures are already inside Shaq's above and are deliberately absent from
   the site total for that reason. */
.tally-row.tally-sub {
  margin-left: 26px;
  margin-top: -4px;
  background: transparent;
  border-style: dashed;
}

.tally-sub .tally-name {
  font-size: 19px;
  color: var(--ink-soft);
}

.tally-sub .tally-name::before {
  content: "↳ ";
  color: var(--clay);
}

.tally-name {
  font-family: var(--display);
  font-size: 23px;
  letter-spacing: 1px;
}

.tally-mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tally-bar {
  display: flex;
  height: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.tally-bar .got {
  background: var(--spray);
  box-shadow: 0 0 12px rgba(79, 157, 255, 0.5);
}

.tally-bar .need {
  background: var(--clay);
  opacity: 0.85;
}

.tally-key {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--ink-soft);
}

.tally-key b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tally-key .hunting b { color: var(--clay); }

.tally-cat {
  text-align: right;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.25;
}

.tally-cat b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .tally-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px 16px;
  }
  .tally-cat { text-align: left; }
  .tally-cat b { display: inline; margin-right: 5px; }
  .tally-row.tally-sub { margin-left: 12px; }
}

.about {
  max-width: 640px;
  padding: 0 0 50px;
  color: var(--ink-soft);
  font-size: 15px;
}

.about b { color: var(--ink); }

/* multi-paragraph page intro (Cameos) — same voice as .about, tighter rhythm */
.intro {
  max-width: 640px;
  padding: 4px 0 30px;
  color: var(--ink-soft);
  font-size: 15px;
}

.intro p + p { margin-top: 15px; }

.intro b { color: var(--ink); }

@media (max-width: 640px) {
  .panel-inner { max-width: 100%; padding: 26px 20px; }

  .card-prop { opacity: 0.28; right: -6%; }

  /* on a phone the cards become faint backdrop, so one is plenty */
  .card-prop-2 { display: none; }
  .two-up .panel-inner { max-width: 100%; }
  .two-up .card-prop { right: -6%; transform: translateY(-50%) rotate(2.2deg); }
}

/* ---------- Checklist controls & rows ---------- */

.collection-bar { padding-top: 30px; }

/* Text sitting straight under the collection switcher needs room — otherwise
   it reads as a caption on the buttons. Only applies where a text block
   actually follows; the Shaq and Rookies pages have their own spacing below. */
.collection-bar + .intro,
.collection-bar + .about {
  padding-top: 24px;
}

.chip-coll {
  font-size: 17px;
  padding: 9px 18px 7px;
}

/* explainer that appears when a collection needs context (e.g. Cameos) */
.coll-note {
  font-family: var(--marker);
  font-size: 14.5px;
  color: var(--clay);
  border-left: 3px solid var(--clay);
  padding: 2px 0 2px 12px;
  margin-top: 16px;
  max-width: 62ch;
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 18px 0 4px;
}

.control {
  background: var(--bg-raised);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 12px;
}

.control:focus { outline: 2px solid var(--spray); outline-offset: 1px; }

.control-search { grid-column: 1 / -1; }

.toggles { padding-top: 12px; }

.toggle-gap { flex: 1; }

.chip-toggle { border-style: dashed; }

.chip-clear {
  color: var(--clay);
  border-color: var(--clay);
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chip-clear.armed {
  opacity: 1;
  background: var(--clay);
  border-color: var(--clay);
  color: #14181d;
  box-shadow: 2px 2px 0 rgba(201, 116, 74, 0.35);
}

.chip-clear.armed:hover { background: #dd8757; }

.result-count {
  font-family: var(--marker);
  color: var(--ink-soft);
  font-size: 14px;
  padding: 18px 0 10px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
}

/* Three columns: the card, the scan button, the have/want pill. Fixed widths
   on the last two so both sit in a straight line down the page no matter what
   any individual row contains. Flexbox could not do this - with space-between
   the button chased the end of the card name, and reserving width for the pill
   only held it while every pill stayed the same size. */
.check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 74px;
  align-items: center;
  gap: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
}

.check-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Both cells are rendered on every row, empty or not - that is what stops the
   columns collapsing and sliding the button right on a row with no pill. */
.check-scan,
.check-own {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.check-main strong { font-size: 15px; line-height: 1.3; }

.check-sub { font-size: 12.5px; color: var(--ink-soft); }

.check-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

.badge.b-sn { color: var(--spray); border-color: var(--spray); }
.badge.b-graded { color: #7fc98a; border-color: #3d6a46; }
.badge.b-intl { color: var(--clay); border-color: var(--clay); }

.pill {
  font-family: var(--marker);
  font-size: 13px;
  white-space: nowrap;
  padding: 3px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* rows whose card is scanned and on the site get a button to see it */
.scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 1.2px;
  padding: 5px 12px 4px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.scan-btn:hover,
.scan-btn:focus-visible {
  color: #0a0f18;
  background: var(--spray);
  border-color: var(--spray);
}

.scan-btn svg { display: block; }

.pill-have { background: rgba(79, 157, 255, 0.14); color: var(--spray); }
.pill-want { background: rgba(201, 116, 74, 0.14); color: var(--clay); }

/* On a phone the reserved columns cost more than the alignment is worth, so
   let them shrink to their contents and give the text back its room. */
@media (max-width: 560px) {
  .check-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }
}

.show-more {
  display: block;
  margin: 0 auto 56px;
  background: transparent;
  border: 1.5px solid var(--spray);
  color: var(--spray);
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 1.5px;
  padding: 9px 26px 7px;
  border-radius: 5px;
  cursor: pointer;
}

.show-more:hover { background: var(--spray); color: #0a0f18; }

/* ---------- Card grid ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 28px 0 56px;
  align-items: start;
}

/* cards slap on the wall slightly crooked, straighten on touch */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transform: rotate(0.9deg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card:nth-child(even) { transform: rotate(-0.9deg); }

.card:hover {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--spray);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--spray);
}

/* the scan images: front & back on black, straight from the scanner */
.card-img {
  display: block;
  width: 100%;
  height: auto;
  background: #060809;
}

.card.scan { cursor: zoom-in; }

.card figcaption {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card figcaption strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 1px;
}

.card figcaption span {
  font-size: 13px;
  color: var(--ink-soft);
}

/* little marker-pen annotations: rookie, for sale */
.mark-note {
  font-family: var(--marker);
  font-style: normal;
  font-size: 12px;
  color: var(--spray);
}

.mark-note.sale { color: var(--clay); }

/* ---------- The Plug (links page) ---------- */

.plug-section { padding: 26px 0 6px; }

.plug-section:last-of-type { padding-bottom: 56px; }

.plug-h {
  font-family: var(--marker);
  font-weight: 400;
  color: var(--spray);
  font-size: 21px;
  margin-bottom: 14px;
  transform: rotate(-0.8deg);
  display: inline-block;
}

.plug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.plug-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  transform: rotate(0.35deg);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.plug-card:nth-child(even) { transform: rotate(-0.35deg); }

.plug-card:hover {
  transform: rotate(0deg) translateY(-3px);
  border-color: var(--spray);
}

.plug-card strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1px;
}

.plug-dom { font-size: 12px; color: var(--spray); }

/* the P4K store card gets the clay treatment */
.plug-card.plug-mine { border: 1.5px solid var(--clay); }
.plug-card.plug-mine:hover { border-color: var(--clay); box-shadow: 3px 3px 0 rgba(201, 116, 74, 0.35); }
.plug-card.plug-mine .plug-dom { color: var(--clay); }

.plug-card p { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 44px;
  color: var(--ink-soft);
  font-size: 13px;
}

.footer-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-tag {
  font-family: var(--marker);
  color: var(--spray);
  font-size: 15px;
}

.footer-ebay {
  font-family: var(--marker);
  color: var(--clay);
  font-size: 14px;
  text-decoration: none;
}

.footer-ebay:hover { text-decoration: underline; }

/* ---------- Lightbox (click-to-enlarge) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.94);
  display: none;
  place-items: center;
  z-index: 50;
  cursor: zoom-out;
  padding: 18px;
}

.lightbox.open { display: grid; }

.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.lightbox-hint {
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--marker);
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- The Wire (blog) ---------- */

.sample-banner {
  font-family: var(--marker);
  font-size: 14px;
  color: var(--clay);
  border: 1.5px dashed var(--clay);
  border-radius: 6px;
  padding: 10px 16px;
  margin-top: 24px;
  display: inline-block;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 34px 0 56px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transform: rotate(0.6deg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:nth-child(even) { transform: rotate(-0.6deg); }

a.blog-card:hover {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--spray);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.blog-thumb {
  position: relative;
  height: 150px;
  background-color: #0a0e16;
  background-image:
    radial-gradient(ellipse 70% 130% at 25% 40%, rgba(43, 111, 212, 0.28), transparent 70%),
    url('images/panels/brick-tile.svg');
  background-size: auto, 420px auto;
}

.blog-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.blog-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--marker);
  font-size: 12px;
  color: #0a0f18;
  background: var(--clay);
  padding: 3px 10px 2px;
  border-radius: 999px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(201, 116, 74, 0.35);
  z-index: 1;
}

.blog-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.blog-meta {
  font-family: var(--marker);
  font-size: 12px;
  color: var(--ink-soft);
}

.blog-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.blog-excerpt {
  font-size: 14px;
  color: var(--ink-soft);
  flex: 1;
}

.blog-more {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--spray);
  margin-top: 4px;
}

a.blog-card:hover .blog-more { text-decoration: underline; }

.blog-card.soon { cursor: default; }

.blog-card.soon .blog-more {
  color: var(--ink-soft);
}

/* ---------- Article (single post) ---------- */

.back-link {
  display: inline-block;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
  text-decoration: none;
  margin: 24px 0 0;
}

.back-link:hover { color: var(--spray); }

.article {
  max-width: 720px;
  padding: 24px 0 60px;
}

.article-meta {
  font-family: var(--marker);
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 10px;
}

.article h1 {
  font-family: var(--graffiti);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 rgba(43, 111, 212, 0.4);
  margin-bottom: 10px;
}

.article .dek {
  font-family: var(--marker);
  color: var(--spray);
  font-size: 18px;
  margin: 0 0 30px;
  max-width: 56ch;
}

.article-body p {
  margin-bottom: 18px;
  font-size: 16px;
  color: var(--ink);
}

.article-body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--spray);
  margin: 34px 0 14px;
}

.article-body blockquote {
  border-left: 3px solid var(--clay);
  padding-left: 16px;
  margin: 24px 0;
  color: var(--ink-soft);
  font-family: var(--marker);
  font-size: 16px;
}

.article-sources {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---------- Phone screens ---------- */

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero { padding-top: 40px; }

  .site-nav a { padding: 8px 8px 6px; font-size: 16px; }
}

/* respect users who turn off motion effects */
@media (prefers-reduced-motion: reduce) {
  .card, .chip { transition: none; }
}