/* Comic Scanner — EVERYTHING IS A COMIC BOOK (Quincy's ruling, 2026-11-08).
   Every surface reads as the comic itself or a cover: cover masthead,
   caption-box titles, a cover corner box for the price, the white UPC box,
   inked panels with halftone shading, splash-page verdicts, indicia fine
   print. Dark ink base kept from the dark pro-tool lock. */
:root {
  --bg:#0c0e11; --panel:#141a21; --panel2:#0d1218; --ink:#f4f6f8; --dim:#96a6b4;
  --line:#04060a; --edge:#2a3540;
  --paper:#f3ecd9; --paper-ink:#17130a;
  --accent:#ffd23f; --red:#d92b1f;
  --buy:#23d96e; --pass:#ff5147; --mid:#ffb02e;
}
* { box-sizing:border-box; }
body {
  margin:0; color:var(--ink);
  font-family:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg);
}
/* The page behind the page (Quincy's direction, 2026-11-08): black-and-white
   comic panels of every kind, a few key panels in full color, ink splashes
   across the gutters. Darkened so the working frames stay readable; the art
   shows through the gutters and margins. */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,11,.60), rgba(8,9,11,.72)),
    url('assets/bg-comics-hc2.jpg') center top/cover no-repeat;
}
/* Cover masthead */
header {
  padding:18px 16px 14px; position:relative; z-index:5;
  background:
    linear-gradient(180deg, rgba(8,10,13,.40) 0%, rgba(8,10,13,.76) 78%, rgba(8,10,13,.93) 100%),
    url('assets/masthead.jpg') center 38%/cover no-repeat,
    #0d1116;
  border-bottom:4px solid var(--line);
  box-shadow:0 5px 0 var(--red);
}
.brand {
  font-family:"Bangers", "Alfa Slab One", serif; font-size:44px; letter-spacing:.045em; line-height:1;
  color:var(--accent);
  text-shadow:3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 7px 7px 0 rgba(0,0,0,.45);
}
.brand-accent { color:#fff; }
.mast-sub { margin-top:5px; font-size:10.5px; font-weight:700; letter-spacing:.22em; color:var(--dim); }
.demo-tag { background:var(--red); color:#fff; font-family:"Barlow",sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border:2px solid #000; border-radius:3px; vertical-align:middle; display:inline-block; transform:rotate(-2deg); box-shadow:2px 2px 0 #000; }
.page-tabs { display:flex; gap:8px; padding:10px 12px; background:rgba(8,9,12,.92); backdrop-filter:blur(2px); border-bottom:3px solid var(--line); position:sticky; top:0; z-index:6; }
.mode { flex:1; font-family:"Bangers", cursive; letter-spacing:.07em; font-size:20px; text-align:center; background:linear-gradient(180deg,#232f3d,#161e28); color:var(--dim); border:3px solid var(--line); padding:9px 0 11px; border-radius:4px 12px 4px 4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 3px 3px 0 rgba(0,0,0,.6); }
.mode.active { color:var(--paper-ink); background:linear-gradient(180deg,#ffe066,#ffd23f); }

main { padding:14px 18px; display:grid; gap:22px; max-width:640px; margin:0 auto; }
/* Inked panels with a halftone patch in the corner */
.panel {
  position:relative; color:var(--paper-ink);
  background:
    radial-gradient(rgba(23,19,10,.07) 1px, transparent 1.4px) 0 0/10px 10px,
    linear-gradient(180deg, rgba(247,240,219,.81), rgba(234,223,192,.78));
  /* REAL ART frame (Quincy's rule: real art always): a generated hand-inked
     panel frame wrapped onto the box with border-image — CSS draws nothing. */
  border:30px solid transparent;
  border-image:url('assets/frame-panel.jpg') 11% stretch;
  box-shadow:inset 0 -14px 22px rgba(122,106,69,.16);
  padding:10px 12px 12px; margin-top:14px;
}
.panel::before {
  content:none;
  background:radial-gradient(circle, rgba(0,0,0,.10) 1.2px, transparent 1.7px) 0 0/11px 11px;
  -webkit-mask-image:linear-gradient(225deg, #000 30%, transparent 78%);
          mask-image:linear-gradient(225deg, #000 30%, transparent 78%);
}
/* Caption-box titles, straight off a splash page */
h2 {
  display:inline-block; color:var(--paper-ink);
  background:linear-gradient(180deg,#ffe066,#ffc61a);
  font-family:"Bangers", cursive; font-size:25px; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 14px 4px;
  border:15px solid transparent;
  border-image:url('assets/frame-caption.jpg') 9% 4% stretch;
  transform:rotate(-1.3deg); margin:-40px 0 10px -6px; position:relative; z-index:2;
}
h3 { font-size:15px; margin:14px 0 4px; color:#5d5340; text-transform:uppercase; letter-spacing:.08em; }

/* Cover art window: paper mat, inked frame */
.viewport-wrap { background:rgba(243,236,217,.72); padding:5px; border:22px solid transparent; border-image:url('assets/frame-panel.jpg') 11% stretch; position:relative; }
video { width:100%; aspect-ratio:4/3; background:#000; object-fit:cover; display:block; border:2px solid #000; }
.reticle { position:absolute; inset:19% 13%; border:3px solid rgba(255,210,63,.9); border-radius:4px; pointer-events:none; }
.scan-status {
  position:relative; display:inline-block; background:#fff; color:#141414; font-weight:600;
  border:3px solid #000; border-radius:14px; padding:8px 13px; margin:13px 2px 2px;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.scan-status::after {
  content:""; position:absolute; left:28px; top:-10px; width:15px; height:15px; background:#fff;
  border-left:3px solid #000; border-top:3px solid #000; transform:rotate(45deg) skew(10deg,10deg);
}
.row { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.btn { background:linear-gradient(180deg,#2b3847,#1a232e); color:var(--ink); border:3px solid var(--line); border-radius:6px; padding:12px 16px; font-size:16px; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.35), 3px 4px 0 rgba(0,0,0,.6); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.55); }
.btn.primary { background:linear-gradient(180deg,#ffe066,#ffc61a); color:var(--paper-ink); }
.btn.big { flex:1; padding:16px; font-size:18px; }
.btn.small { padding:8px 11px; font-size:14px; }
.btn:disabled { opacity:.4; box-shadow:none; }
.btn.dark { background:rgba(0,0,0,.38); color:#fff; border-color:rgba(0,0,0,.75); }
.btn.primary-dark { background:#0b0e11; }
.btn.wide { flex:1 1 100%; }
input { background:#fffdf6; color:#17130a; border:2.5px solid #000; border-radius:6px; padding:12px; font-size:16px; min-width:0; }
/* The UPC box, like the one printed on a real cover */
#upcInput { flex:1; background:#fff; color:#111; font-weight:700; letter-spacing:.05em; border:3px solid #000; box-shadow:inset 0 -7px 0 rgba(0,0,0,.08); }
#upcInput::placeholder { color:#8a8a8a; font-weight:600; }
#bundleAsk { width:90px; }

/* Cover corner box: where the price lives on a cover */
.price-block { margin-top:16px; transform:rotate(-.4deg); background-color:rgba(255,253,246,.72); background-image:radial-gradient(rgba(122,106,69,.16) 1px, transparent 1.4px), linear-gradient(180deg, rgba(255,254,249,.75), rgba(243,234,210,.72)); background-size:9px 9px, 100% 100%; color:var(--paper-ink); border:22px solid transparent; border-image:url('assets/frame-panel.jpg') 11% stretch; box-shadow:inset 0 -10px 18px rgba(122,106,69,.18); padding:10px; }
.price-label { font-weight:800; color:#7a6a45; letter-spacing:.1em; font-size:12.5px; }
.price-controls { display:flex; align-items:stretch; gap:10px; margin-top:8px; }
.stepper { flex:0 0 70px; font-size:32px; font-weight:800; background:#17130a; color:var(--accent); border:3px solid #000; border-radius:6px; box-shadow:3px 3px 0 rgba(0,0,0,.4); }
.stepper:active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.4); }
.ask-display { flex:1; text-align:center; font-family:"Barlow Condensed", sans-serif; font-weight:800; font-size:54px; line-height:1; padding:7px 0; background:#fff; color:#c22418; border:3px solid #000; border-radius:4px; }
.presets { display:flex; gap:8px; margin-top:10px; }
.preset { flex:1; padding:9px 0; font-family:"Barlow Condensed", sans-serif; font-size:20px; font-weight:700; background:transparent; color:#7a6a45; border:2.5px solid #17130a; border-radius:4px; }
.preset.on { color:var(--paper-ink); background:var(--accent); }
/* Caption strip for the current book */
.book-line { display:inline-block; margin-top:14px; font-weight:700; background:#fffdf6; color:var(--paper-ink); padding:5px 12px; border:2.5px solid #000; box-shadow:2px 2px 0 rgba(0,0,0,.4); transform:rotate(-.5deg); }
.hidden { display:none !important; }

/* Page-flip tab transitions: a sheet turns, the next page lands */
.page-sweep { display:none !important; }
/* A comic page flipping FROM ONE CORNER (Quincy, 2026-11-08): the sheet
   stays WHOLE and folds over on the diagonal hinge that runs from the
   bottom-left corner to the top-right corner — the bottom-right corner
   lifts toward you and swings over to the far side, like a thumb grabbed
   it. (Two earlier attempts are dead: the clip-path peel read as a
   dissolve, and the spine hinge was stiff.) */
.turning-page {
  position:fixed; z-index:60; pointer-events:none; margin:0; overflow:hidden;
  background:linear-gradient(180deg, rgba(8,9,11,.60), rgba(8,9,11,.72)), url('assets/bg-comics-hc2.jpg') center top/cover no-repeat, #0c0e11;
  filter:drop-shadow(-10px 14px 18px rgba(0,0,0,.45));
  animation:cornerFlip .7s cubic-bezier(.3,.7,.3,1.04) forwards;
}
.turning-page::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(45deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 38%, rgba(255,255,255,.16) 52%, rgba(0,0,0,.05) 66%, transparent 82%);
  animation:flipShade .7s ease forwards;
}
@keyframes cornerFlip {
  0% { transform:perspective(1400px) rotate3d(1,-1,0,0deg); }
  32% { transform:perspective(1400px) rotate3d(1,-1,0,42deg) translate(1.5%,1.5%); }
  68% { transform:perspective(1400px) rotate3d(1,-1,0,118deg) translate(4%,4%); }
  86% { transform:perspective(1400px) rotate3d(1,-1,0,146deg) translate(5.5%,5.5%); opacity:1; }
  100% { transform:perspective(1400px) rotate3d(1,-1,0,164deg) translate(7%,7%); opacity:.1; }
}
@keyframes flipShade { 0% { opacity:.15; } 55% { opacity:.65; } 100% { opacity:1; } }
body.turning { overflow:hidden; }

/* Verdict = splash page, framed like one */
.verdict-overlay { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:22px; }
.verdict-overlay::before { content:""; position:absolute; inset:10px; border:4px solid rgba(0,0,0,.6); pointer-events:none; }
.verdict-overlay::after { content:""; position:absolute; inset:17px; border:1.5px solid rgba(0,0,0,.45); pointer-events:none; }
.verdict-overlay.buy { background:radial-gradient(circle, rgba(0,0,0,.16) 1.2px, transparent 1.6px) 0 0/16px 16px, var(--buy); }
.verdict-overlay.pass { background:radial-gradient(circle, rgba(0,0,0,.16) 1.2px, transparent 1.6px) 0 0/16px 16px, var(--pass); }
.verdict-overlay.mid { background:radial-gradient(circle, rgba(0,0,0,.16) 1.2px, transparent 1.6px) 0 0/16px 16px, var(--mid); }
.verdict-overlay.none { background:#232b33; }
.verdict-inner { text-align:center; max-width:520px; width:100%; position:relative; z-index:2; }
.verdict-book { display:inline-block; font-weight:700; font-size:18px; color:var(--paper-ink); background:var(--paper); padding:4px 12px; border:2.5px solid #000; box-shadow:3px 3px 0 rgba(0,0,0,.4); transform:rotate(-.6deg); }
.verdict-overlay.none .verdict-book { background:transparent; color:var(--dim); border-color:var(--edge); box-shadow:none; }
.verdict-word { font-family:"Barlow Condensed", sans-serif; font-size:clamp(72px, 24vw, 132px); font-weight:800; line-height:.98; letter-spacing:.01em; color:#0b0e11; text-shadow:5px 5px 0 rgba(0,0,0,.25); margin-top:14px; }
.verdict-overlay.none .verdict-word { color:var(--ink); text-shadow:none; }
/* PASS is a rejection stamp */
.verdict-overlay.pass .verdict-word { display:inline-block; border:7px solid rgba(26,2,2,.85); border-radius:6px; padding:2px 30px 10px; transform:rotate(-4deg); background:rgba(0,0,0,.14); text-shadow:none; }
/* YOUR CALL sits in a starburst */
.verdict-overlay.mid .verdict-word { position:relative; z-index:0; display:inline-block; padding:8px 22px 14px; }
.verdict-overlay.mid .verdict-word::before {
  content:""; position:absolute; inset:-24% -9%; z-index:-1; background:#e09f00;
  clip-path:polygon(50% 0%, 61% 12%, 78% 4%, 82% 20%, 98% 18%, 94% 35%, 100% 50%, 94% 65%, 98% 82%, 82% 80%, 78% 96%, 61% 88%, 50% 100%, 39% 88%, 22% 96%, 18% 80%, 2% 82%, 6% 65%, 0% 50%, 6% 35%, 2% 18%, 18% 20%, 22% 4%, 39% 12%);
}
.verdict-detail { margin-top:12px; font-size:20px; font-weight:600; color:rgba(0,0,0,.82); }
.verdict-overlay.none .verdict-detail { color:var(--dim); }
.flags { display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.flag { padding:8px 14px; border-radius:4px; font-weight:800; font-size:16px; border:3px solid #000; box-shadow:3px 3px 0 rgba(0,0,0,.45); }
.flag.key { background:#b3231a; color:#fff; transform:rotate(-1.5deg); }
.flag.grade { background:#14632f; color:#eafff1; transform:rotate(1.2deg); }
.verdict-actions { display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.verdict-actions .btn { flex:1; padding:16px; font-size:17px; }

/* BUY splash (Quincy's reference + rulings, 2026-11-08 night): the page
   itself is BLACK AND WHITE — grayscale panels, halftone, speed lines,
   B/W KAPOW!/BOOM! lettering baked into the art — and the ONLY color on
   the page is the ink splash erupting from the center and the word BUY.
   No hands, no "COLOR SPLASH" words (his cuts). BUY is lettered in
   Spartan red like 300: chiseled capitals (Cinzel Decorative 900) run
   through the SVG rough filter, battle tilt. Original art, no assets
   from the reference or the film. */
.verdict-overlay.buy { background:url('assets/splash-bw.jpg') center/cover no-repeat, #e9e2cf; }
.verdict-overlay.buy .verdict-word {
  font-family:"Cinzel Decorative", "Barlow Condensed", sans-serif;
  font-weight:900; font-size:clamp(76px, 24vw, 124px); color:#b3001b;
  filter:url(#splashRough);
  transform:rotate(-2deg);
  text-shadow:4px 4px 0 rgba(60,0,8,.35);
}
/* Sound-effect accents + verdict taglines (Quincy: "a BOOM buy this, a
   POW shot dead, don't bother"): SFX in B/W ink lettering like the art,
   so the color rule holds; tags carry the punch line under the word. */
.verdict-sfx {
  position:absolute; top:-38px; right:-6px; z-index:3;
  font-family:"Bangers", cursive; font-size:46px; letter-spacing:.03em;
  color:#fff; transform:rotate(7deg);
  text-shadow:3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 6px 6px 0 rgba(0,0,0,.3);
}
.verdict-overlay.pass .verdict-sfx { top:auto; bottom:104px; right:2px; transform:rotate(-9deg); font-size:40px; }
.verdict-tag {
  display:inline-block; margin-top:10px; padding:3px 14px 5px;
  font-family:"Bangers", cursive; font-size:26px; letter-spacing:.05em;
  background:#fff; color:#141414; border:3px solid #000; border-radius:4px;
  box-shadow:3px 3px 0 rgba(0,0,0,.45); transform:rotate(-1.2deg);
}
.verdict-overlay.pass .verdict-tag { background:#141414; color:#fff; transform:rotate(1.4deg); }

.bundle-stats, .bundle-verdict { margin-top:10px; font-size:17px; }
.bundle-verdict { font-weight:800; }
/* The Bundle page is a LONG BOX, not a second copy of the Singles page
   (Quincy: "singles and bundles UI shouldn't look the exact same"): kraft
   cardboard paper, a dark marker caption, a tape strip across the top.
   The scanner block physically moves onto this page in bundle mode. */
.bundle-card {
  background:
    radial-gradient(rgba(59,42,20,.08) 1px, transparent 1.4px) 0 0/10px 10px,
    linear-gradient(180deg, rgba(226,201,155,.88), rgba(205,177,127,.85));
}
.bundle-card::after {
  content:""; position:absolute; top:-14px; right:30px; width:96px; height:27px; z-index:3;
  background:rgba(250,246,225,.55);
  border-left:2px dashed rgba(0,0,0,.15); border-right:2px dashed rgba(0,0,0,.15);
  transform:rotate(3deg);
}
.bundle-card h2 { background:linear-gradient(180deg,#3a2c1c,#2b2118); color:#f3e2b8; }
.bundle-card .price-label { color:#5d4a2a; }
.bundle-card .skim-list li { background:rgba(255,250,235,.92); }
.skim-list, .chase-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:9px; }
.skim-list li, .chase-list li {
  background:#fffdf6; border:3px solid var(--line); border-radius:5px;
  box-shadow:2px 2px 0 rgba(0,0,0,.35); padding:10px 12px;
}
.chase-item { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chase-name { font-weight:700; }
.chase-meta { color:#6a5f49; font-size:13.5px; margin-top:2px; }
.chase-actions { display:flex; gap:6px; flex-shrink:0; }
.vault-badge { display:inline-block; background:var(--buy); color:#08130c; font-weight:800; font-size:12px; padding:2px 8px; border:2px solid #000; border-radius:3px; margin-left:8px; transform:rotate(-1.5deg); }
.chase-list li.vaulted { opacity:.72; }
.chase-list li.vaulted .chase-name { text-decoration:line-through; }

/* The Chase List is NOT another scanner page — it's the collector's
   checklist leaf (Quincy: "looks just like the other two tabs?"): graph
   paper, red margin line, ruled index-card entries, red caption, and a
   stamped IN THE VAULT instead of a filled badge. */
.saved-card {
  background:
    linear-gradient(90deg, transparent 0 8px, rgba(210,60,50,.45) 8px 10px, transparent 10px),
    linear-gradient(rgba(70,110,160,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,110,160,.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(251,247,234,.83), rgba(241,232,207,.81));
  background-size:100% 100%, 22px 22px, 22px 22px, 100% 100%;
}
.saved-card h2 { background:linear-gradient(180deg,#e8483d,#c22418); color:#fff; }
.saved-card .chase-list li {
  background:
    repeating-linear-gradient(180deg, rgba(255,253,246,0) 0 25px, rgba(70,110,160,.28) 25px 26px),
    #fffdf6;
}
.vault-badge {
  background:transparent; color:#14632f; border:3px solid #14632f;
  font-family:"Bangers", cursive; letter-spacing:.06em; font-size:14px;
  padding:2px 9px 3px; transform:rotate(-4deg); box-shadow:none;
}

/* Back matter = the indicia */
.settings label { display:flex; justify-content:space-between; align-items:center; margin:0; padding:9px 0; color:#5d5340; font-weight:600; border-bottom:1.5px dashed rgba(23,19,10,.3); }
.settings input { width:90px; }
.fine { color:#6a5f49; font-size:12.5px; line-height:1.5; }
.account .fine, .settings .fine { border-top:3px double rgba(23,19,10,.4); padding-top:9px; margin-top:12px; }

/* The Counter Clerk (product assistant, green-lit 2026-11-08): a person
   behind the counter inside the comic page — painted art portrait, his
   words in word balloons, yours in caption bubbles. Not a chat widget. */
.clerk-head { display:flex; gap:12px; align-items:center; }
.clerk-art { width:92px; height:92px; object-fit:cover; flex-shrink:0; border:3px solid #000; box-shadow:0 0 0 2.5px #f3ecd9, 3px 3px 0 rgba(0,0,0,.45); transform:rotate(-1deg); }
.clerk-tagline { font-weight:800; font-size:17px; line-height:1.25; }
.clerk-mode { margin-top:4px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:#7a6a45; text-transform:uppercase; }
.clerk-log { display:grid; gap:10px; margin-top:14px; }
.msg { max-width:88%; padding:9px 13px; font-size:15.5px; line-height:1.45; white-space:pre-wrap; }
.msg.clerk { position:relative; justify-self:start; background:#fff; color:#141414; border:3px solid #000; border-radius:14px; box-shadow:3px 3px 0 rgba(0,0,0,.4); }
.msg.clerk::after { content:""; position:absolute; left:-9px; top:16px; width:14px; height:14px; background:#fff; border-left:3px solid #000; border-bottom:3px solid #000; transform:rotate(45deg) skew(8deg,8deg); }
.msg.user { justify-self:end; background:linear-gradient(180deg,#ffe066,#ffd23f); color:var(--paper-ink); border:3px solid #000; border-radius:6px; font-weight:600; box-shadow:3px 3px 0 rgba(0,0,0,.4); transform:rotate(.4deg); }
.msg.pending { opacity:.65; font-style:italic; }
.clerk-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; }
.chip { font-family:"Bangers", cursive; letter-spacing:.05em; font-size:16px; padding:6px 12px 8px; background:#fffdf6; color:var(--paper-ink); border:2.5px solid #000; border-radius:4px; box-shadow:2px 2px 0 rgba(0,0,0,.4); }
.chip:active { transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(0,0,0,.4); }
.clerk-row { align-items:stretch; }
#clerkInput { flex:1; background:#fff; font-weight:600; }