/* Comic Hunt v2 — theme carried over from v1 (comic-book look) */
:root {
  --paper: #f6f1e5;
  --ink: #1a1a1a;
  --ink-2: #4a4a42;
  --yellow: #ffd23f;
  --red: #d7263d;
  --blue: #1b6ca8;
  --green: #1f7a4d;
  --card: #fffdf6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--paper);
  background-image: radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1.5px);
  background-size: 14px 14px;
  color: var(--ink);
  padding-bottom: 60px;
}
.display { font-family: 'Bangers', 'Comic Sans MS', cursive; letter-spacing: .04em; }

header {
  background: var(--red);
  border-bottom: 4px solid var(--ink);
  padding: 18px 16px 14px;
  text-align: center;
  position: relative;
}
header h1 {
  font-family: 'Bangers', cursive;
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--yellow);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
  letter-spacing: .05em;
}
header p { color: #ffe9a8; font-weight: 600; font-size: .85rem; margin-top: 2px; }
.user-chip {
  position: absolute; top: 10px; right: 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700; color: #ffe9a8;
}
.user-chip button {
  cursor: pointer; font: 700 .7rem 'Inter', sans-serif;
  background: var(--card); border: 2px solid var(--ink); border-radius: 6px;
  padding: 3px 8px; box-shadow: 2px 2px 0 var(--ink);
}
.user-chip button:active { transform: translate(2px,2px); box-shadow: none; }

/* top bar: list tabs + stats */
.top-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 4px solid var(--yellow);
  flex-wrap: wrap;
}
.list-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.list-tab {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.05rem; letter-spacing: .05em;
  background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.55); padding: 6px 14px;
}
.list-tab.active { background: var(--yellow); transform: rotate(-2deg); }
.list-tab:active { transform: translate(2px,2px); box-shadow: none; }
.list-tab .role-badge { font-size: .8rem; margin-left: 4px; }
.list-tab.add-tab { background: var(--green); color: #fff; }
.stat {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.55);
  padding: 6px 14px; text-align: center; min-width: 92px;
}
.stat .label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.stat .value { font-family: 'Bangers', cursive; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.stat.over .value { color: var(--red); }
.view-toggle, .gear-btn {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.05rem; letter-spacing: .05em;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.55); padding: 6px 14px; align-self: center;
}
.view-toggle:active, .gear-btn:active { transform: translate(2px,2px); box-shadow: none; }

/* minimal view — covers hidden, compact rows */
body.minimal .cover-wrap { display: none; }
body.minimal .grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
body.minimal .comic-card:hover { transform: none; }
body.minimal .comic-card.show-cover .cover-wrap { display: block; }
.cover-peek { display: none; }
body.minimal .cover-peek {
  display: block; position: absolute; top: 8px; right: 10px; z-index: 3;
  cursor: pointer; width: 36px; height: 30px; line-height: 1;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 6px;
  box-shadow: 2px 2px 0 var(--ink); font-size: .85rem;
}
body.minimal .cover-peek:active { transform: translate(2px,2px); box-shadow: none; }
body.minimal .comic-card:not(.show-cover) .card-body h3 { padding-right: 44px; }
body.minimal .photo-btn { display: none; }
body.minimal .comic-card:not(.show-cover) .badge { display: none; }

main { max-width: 1080px; margin: 0 auto; padding: 0 14px; }

.section-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin: 34px 0 4px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.section-title .burst {
  background: var(--yellow); border: 3px solid var(--ink);
  padding: 0 12px; transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink); border-radius: 4px;
}
.section-sub { font-size: .85rem; color: var(--ink-2); margin-bottom: 14px; font-weight: 600; }

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

.comic-card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(26,26,26,.85);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .12s ease;
}
.comic-card:hover { transform: translateY(-3px); }
.photo-btn { z-index: 2; }
.trash-btn {
  cursor: pointer; width: 38px; flex-shrink: 0; font-size: .95rem; line-height: 1;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 7px;
  box-shadow: 2px 2px 0 var(--ink);
}
.trash-btn:active { transform: translate(2px,2px); box-shadow: none; }
.cover-wrap { position: relative; overflow: hidden; background: #ddd; aspect-ratio: 2 / 3; }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-bottom: 3px solid var(--ink); }

.badge {
  position: absolute; font-family: 'Bangers', cursive;
  border: 2.5px solid var(--ink); border-radius: 6px;
  padding: 1px 9px; font-size: 1.05rem; letter-spacing: .05em;
  box-shadow: 2px 2px 0 var(--ink);
}
.badge.paid { bottom: 8px; left: 8px; background: var(--green); color: #fff; font-size: .9rem; }

.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: .95rem; line-height: 1.25; }
.card-body .note { font-size: .74rem; color: var(--ink-2); font-weight: 600; }
.card-body .comment {
  font-size: .76rem; font-style: italic; color: var(--ink);
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px;
  padding: 5px 8px; white-space: pre-wrap; word-break: break-word;
}
.comment-btn {
  cursor: pointer; font-size: .8rem; line-height: 1; vertical-align: 2px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 6px;
  padding: 2px 5px; box-shadow: 1px 1px 0 var(--ink);
}
.comment-btn:active { transform: translate(1px,1px); box-shadow: none; }
.comment-editor { display: flex; flex-direction: column; gap: 6px; }
.comment-editor textarea {
  font: 600 .8rem 'Inter', sans-serif; resize: vertical;
  border: 2.5px solid var(--ink); border-radius: 7px; padding: 6px 8px; background: #fff;
}
.card-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

.ebay-link {
  display: block; text-align: center; text-decoration: none;
  font-weight: 700; font-size: .8rem;
  background: var(--blue); color: #fff;
  border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 7px 8px; box-shadow: 2px 2px 0 var(--ink);
}
.ebay-link:active { transform: translate(2px,2px); box-shadow: none; }

.buy-row { display: flex; gap: 8px; align-items: stretch; }
.buy-btn {
  flex: 1; cursor: pointer;
  font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: .05em;
  background: var(--card); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 6px 4px; box-shadow: 2px 2px 0 var(--ink);
}
.buy-btn.on { background: var(--green); color: #fff; }
.buy-btn:active { transform: translate(2px,2px); box-shadow: none; }
.paid-input {
  width: 82px; font: 700 .9rem 'Inter', sans-serif;
  border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 4px 8px; background: #fff;
}
.paid-row .paid-input { flex: 1; width: auto; min-width: 0; }
.cur-btn {
  cursor: pointer; width: 56px; flex-shrink: 0;
  font: 700 .78rem 'Inter', sans-serif; letter-spacing: .04em;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 7px;
  box-shadow: 2px 2px 0 var(--ink);
}
.cur-btn:active { transform: translate(2px,2px); box-shadow: none; }
select.move-select {
  flex: 1; min-width: 0; font: 700 .8rem 'Inter', sans-serif;
  border: 2.5px solid var(--ink); border-radius: 7px; padding: 4px 6px; background: #fff;
}

.panel {
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(26,26,26,.85); padding: 16px 18px; margin-bottom: 8px;
}
.panel table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.panel th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 4px 6px; border-bottom: 2px solid var(--ink); }
.panel td { padding: 7px 6px; border-bottom: 1px dashed #c9c2b0; }

/* grade prices */
.price-btn {
  cursor: pointer; font-weight: 700; font-size: .8rem;
  background: var(--yellow); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 7px 8px; box-shadow: 2px 2px 0 var(--ink);
}
.price-btn:active { transform: translate(2px,2px); box-shadow: none; }
.price-btn:disabled { opacity: .6; cursor: wait; }
.price-table { display: none; font-size: .8rem; }
.price-table.show { display: block; }
.price-table table { width: 100%; border-collapse: collapse; }
.price-table td { padding: 4px 2px; border-bottom: 1px dashed #c9c2b0; }
.price-table td.val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-table a { color: var(--blue); text-decoration: none; font-weight: 700; }
.price-table .pnote { font-size: .68rem; color: var(--ink-2); font-weight: 600; padding-top: 5px; }
.price-table .perr { color: var(--red); font-weight: 700; }

/* scanner / add-a-comic */
.scan-panel { text-align: center; }
.scan-btn {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.5rem; letter-spacing: .06em;
  background: var(--red); color: var(--yellow);
  border: 3px solid var(--ink); border-radius: 10px;
  padding: 12px 28px; box-shadow: 4px 4px 0 var(--ink);
}
.scan-btn:active { transform: translate(3px,3px); box-shadow: none; }
.scan-btn:disabled { opacity: .6; cursor: wait; }
.search-row { display: flex; gap: 8px; max-width: 480px; margin: 14px auto 0; }
.search-row input {
  flex: 1; min-width: 0; font: 600 .95rem 'Inter', sans-serif;
  border: 2.5px solid var(--ink); border-radius: 7px; padding: 9px 12px; background: #fff;
}
.search-go, .search-clear { flex-shrink: 0; }
.search-go {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: .05em;
  background: var(--blue); color: #fff; border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 6px 16px; box-shadow: 2px 2px 0 var(--ink);
}
.search-go:active { transform: translate(2px,2px); box-shadow: none; }
.search-go:disabled { opacity: .6; cursor: wait; }
.search-clear {
  display: none; cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: .05em;
  background: var(--card); color: var(--ink-2); border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 6px 12px; box-shadow: 2px 2px 0 var(--ink);
}
.search-clear.show { display: block; }
.search-clear:active { transform: translate(2px,2px); box-shadow: none; }
.search-results { text-align: left; max-width: 620px; margin: 0 auto; }
.search-hit {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  border: 2.5px solid var(--ink); border-radius: 8px; background: #fff;
  padding: 9px 12px; margin-top: 10px; box-shadow: 2px 2px 0 rgba(26,26,26,.7);
  flex-wrap: wrap;
}
.search-hit .thumb {
  width: 46px; height: 69px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 4px;
  background: #eee; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; overflow: hidden;
}
.search-hit .thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-hit .meta { flex: 1; min-width: 160px; }
.search-hit .meta strong { font-size: .95rem; }
.search-hit .meta .note { font-size: .74rem; color: var(--ink-2); font-weight: 600; }
.search-hit .hit-actions { display: flex; gap: 8px; }
.search-hit .hit-actions .ebay-link { font-size: .72rem; padding: 6px 8px; }
.search-hit .hit-actions .add-btn { font-size: .95rem; padding: 5px 12px; }
.scan-note { font-size: .78rem; color: var(--ink-2); font-weight: 600; margin-top: 10px; }
.scan-status { font-family: 'Bangers', cursive; font-size: 1.2rem; margin-top: 12px; min-height: 1.4em; }
.scan-status.err { color: var(--red); }

.scan-result {
  display: none; margin-top: 14px; text-align: left;
  border-top: 3px dashed var(--ink); padding-top: 14px;
  gap: 14px; align-items: flex-start; flex-wrap: wrap;
}
.scan-result.show { display: flex; }
.scan-result img { width: 110px; border: 3px solid var(--ink); border-radius: 8px; }
.scan-result .info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.scan-result h3 { font-size: 1.15rem; }
.conf-badge {
  display: inline-block; font-family: 'Bangers', cursive; font-size: .95rem;
  border: 2px solid var(--ink); border-radius: 6px; padding: 0 8px; margin-left: 8px;
}
.conf-high { background: var(--green); color: #fff; }
.conf-medium { background: var(--yellow); }
.conf-low { background: #ccc; }
.scan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.add-btn {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: .05em;
  background: var(--green); color: #fff;
  border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 7px 16px; box-shadow: 2px 2px 0 var(--ink);
}
.add-btn:active { transform: translate(2px,2px); box-shadow: none; }
.add-btn:disabled { opacity: .6; }

/* card cover placeholder */
.find-cover {
  aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--yellow) 0deg 12deg, #ffb703 12deg 24deg);
  border-bottom: 3px solid var(--ink); position: relative;
}
.find-cover .snap {
  font-family: 'Bangers', cursive; font-size: 2rem; color: var(--red);
  -webkit-text-stroke: 1px var(--ink); transform: rotate(-8deg);
  text-shadow: 2px 2px 0 var(--ink);
}
.photo-btn {
  position: absolute; bottom: 8px; right: 8px; cursor: pointer;
  width: 34px; height: 32px; line-height: 1; font-size: 1rem;
  background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink);
}
.photo-btn:disabled { opacity: .6; cursor: wait; }

/* live eBay listings */
.listing-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed #c9c2b0; font-size: .74rem;
}
.listing-row a { flex: 1; min-width: 0; color: var(--blue); text-decoration: none; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.listing-thumb {
  width: 30px; height: 40px; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 4px; background: #eee;
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
}

/* lightbox — click a search thumbnail to see the cover big */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(26,26,26,.82); align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox img {
  max-width: min(92vw, 480px); max-height: 90vh;
  border: 4px solid var(--ink); border-radius: 10px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.6); background: #fff;
}
.search-hit .thumb img { cursor: zoom-in; }
.cover-wrap img { cursor: zoom-in; }

/* modal (shares, new list) */
.modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(26,26,26,.6); align-items: flex-start; justify-content: center;
  padding: 60px 14px 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.6); padding: 18px 20px;
  width: 100%; max-width: 480px;
}
.modal h2 { font-family: 'Bangers', cursive; font-size: 1.6rem; margin-bottom: 12px; }
.modal .row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.modal input[type=text], .modal input[type=email], .modal input[type=password] {
  flex: 1; min-width: 140px; font: 600 .95rem 'Inter', sans-serif;
  border: 2.5px solid var(--ink); border-radius: 7px; padding: 8px 12px; background: #fff;
}
.modal select {
  font: 700 .85rem 'Inter', sans-serif;
  border: 2.5px solid var(--ink); border-radius: 7px; padding: 6px 8px; background: #fff;
}
.modal .close-row { margin-top: 16px; text-align: right; }
.modal .err { color: var(--red); font-size: .8rem; font-weight: 700; margin-top: 8px; min-height: 1em; }
.share-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #c9c2b0; }
.share-row .who { flex: 1; font-weight: 600; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* kind picker chips */
.kind-chip {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1rem;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 6px 14px; box-shadow: 2px 2px 0 var(--ink);
}
.kind-chip.on { background: var(--blue); color: #fff; }

/* login page */
.auth-wrap { max-width: 420px; margin: 40px auto 0; padding: 0 14px; }
.auth-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-panel label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.auth-panel input {
  width: 100%; font: 600 1rem 'Inter', sans-serif;
  border: 2.5px solid var(--ink); border-radius: 7px; padding: 10px 12px; background: #fff;
}
.auth-btn {
  cursor: pointer; font-family: 'Bangers', cursive; font-size: 1.3rem; letter-spacing: .05em;
  background: var(--red); color: var(--yellow);
  border: 3px solid var(--ink); border-radius: 8px;
  padding: 10px; box-shadow: 3px 3px 0 var(--ink);
}
.auth-btn:active { transform: translate(2px,2px); box-shadow: none; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; font-weight: 700; font-size: .95rem;
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px;
  padding: 10px; box-shadow: 3px 3px 0 var(--ink);
}
.google-btn:active { transform: translate(2px,2px); box-shadow: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 700; font-size: .75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 2px dashed var(--ink-2); }
.auth-toggle { text-align: center; font-size: .85rem; font-weight: 600; }
.auth-toggle a { color: var(--blue); cursor: pointer; }
.auth-err { color: var(--red); font-weight: 700; font-size: .85rem; min-height: 1.2em; }

footer { text-align: center; margin-top: 44px; font-size: .75rem; color: var(--ink-2); font-weight: 600; }