:root {
    --ink-black: #0B0712;
    --newsprint-cream: #FFF1C7;
    --bid-burst-yellow: #FFD400;
    --paddle-pink: #FF3B8D;
    --socket-cyan: #00D9FF;
    --gavel-red: #F21B2D;
    --misfit-blue: #2447FF;
    --display-font: "Bungee Inline", "Impact", "Arial Black", system-ui, sans-serif;
    --stamp-font: "Ultra", "Rockwell Extra Bold", Georgia, serif;
    --body-font: "Atkinson Hyperlegible", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--ink-black);
    color: var(--ink-black);
    font-family: var(--body-font);
}

button { border: 0; font: inherit; color: inherit; }

.comic-strip {
    position: relative;
    isolation: isolate;
    background: var(--ink-black);
    --spot-x: 50%;
    --spot-y: 42%;
}

.auction-spotlight {
    position: fixed;
    left: calc(var(--spot-x) - 18rem);
    top: calc(var(--spot-y) - 18rem);
    width: 36rem;
    height: 36rem;
    pointer-events: none;
    z-index: 20;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 199, .24), rgba(0, 217, 255, .13) 34%, transparent 68%);
    mix-blend-mode: screen;
}

.halftone-field::before,
.fixed-dots {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 18;
    pointer-events: none;
    opacity: .24;
    background-image: radial-gradient(var(--ink-black) 1.1px, transparent 1.3px), radial-gradient(var(--paddle-pink) .9px, transparent 1.1px);
    background-position: 0 0, 8px 9px;
    background-size: 18px 18px, 26px 26px;
    mix-blend-mode: multiply;
}

.gutter-shout {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    font-family: var(--display-font);
    font-size: clamp(2rem, 8vw, 8rem);
    color: rgba(255, 241, 199, .08);
    white-space: nowrap;
    letter-spacing: .08em;
}
.rail-one { top: 13%; left: -14%; transform: rotate(-20deg); }
.rail-two { right: -26%; bottom: 11%; transform: rotate(-20deg); font-size: clamp(1.4rem, 5vw, 5rem); }

.comic-panel {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    padding: clamp(5rem, 8vw, 8rem) clamp(1rem, 6vw, 6rem);
    z-index: 5;
    overflow: hidden;
    border: clamp(.7rem, 1.2vw, 1.2rem) solid var(--ink-black);
    outline: .45rem solid var(--newsprint-cream);
    clip-path: polygon(0 4%, 8% 4%, 8% 0, 92% 0, 92% 5%, 100% 5%, 100% 88%, 96% 88%, 96% 100%, 10% 100%, 10% 94%, 0 94%);
}

.opening-panel { background: var(--bid-burst-yellow); grid-template-columns: 1fr; }
.paddles-panel { background: var(--socket-cyan); grid-template-columns: 1fr 1fr; clip-path: polygon(0 0, 89% 0, 100% 16%, 100% 100%, 7% 100%, 0 86%); }
.zz-panel { background: var(--misfit-blue); grid-template-columns: 1.25fr .75fr; color: var(--newsprint-cream); }
.gavel-panel { background: var(--paddle-pink); grid-template-columns: 1fr 1fr; }
.final-panel { background: var(--newsprint-cream); grid-template-columns: 1.15fr .85fr; padding-bottom: 9rem; }

.comic-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .36;
    background: radial-gradient(circle at 25% 30%, rgba(255, 241, 199, .2), transparent 18rem), radial-gradient(var(--ink-black) 1.6px, transparent 1.8px);
    background-size: auto, 20px 20px;
}

.panel-label,
.tab {
    position: absolute;
    z-index: 8;
    top: 2rem;
    left: clamp(1rem, 5vw, 5rem);
    display: inline-block;
    padding: .35rem .75rem;
    background: var(--paddle-pink);
    color: var(--newsprint-cream);
    border: .25rem solid var(--ink-black);
    box-shadow: .35rem .35rem 0 var(--socket-cyan);
    font-family: var(--display-font);
    text-transform: uppercase;
    transform: rotate(-3deg);
}
.tab { position: static; margin-bottom: .75rem; background: var(--gavel-red); box-shadow: .25rem .25rem 0 var(--misfit-blue); }

.wordmark {
    position: relative;
    z-index: 3;
    min-height: clamp(20rem, 35vw, 31rem);
    width: min(96vw, 82rem);
    margin: 4vh auto 0;
    transform: rotate(-7deg);
}

.lot-letter,
.dot-lot,
.bid-lot {
    position: absolute;
    display: grid;
    place-items: center;
    font-family: var(--display-font);
    color: var(--ink-black);
    background: var(--newsprint-cream);
    border: .35rem solid var(--ink-black);
    box-shadow: .55rem .55rem 0 var(--misfit-blue), -.28rem -.2rem 0 var(--paddle-pink), .25rem -.3rem 0 var(--socket-cyan);
    text-shadow: .08em .06em 0 var(--socket-cyan), -.06em -.04em 0 var(--paddle-pink);
    transition: transform 700ms cubic-bezier(.15,1.45,.22,1), filter 300ms ease;
    clip-path: polygon(0 18%, 18% 18%, 18% 0, 82% 0, 82% 18%, 100% 18%, 100% 82%, 82% 82%, 82% 100%, 18% 100%, 18% 82%, 0 82%);
}
.lot-letter { width: clamp(4.4rem, 11vw, 10rem); height: clamp(5.2rem, 12vw, 11rem); font-size: clamp(3.1rem, 9vw, 8.4rem); }
.lot-letter:nth-child(1) { left: 3%; top: 21%; transform: rotate(-18deg) translateY(8rem); }
.lot-letter:nth-child(2) { left: 16%; top: 7%; transform: rotate(19deg) translateY(-7rem); background: var(--paddle-pink); color: var(--newsprint-cream); }
.lot-letter:nth-child(3) { left: 29%; top: 19%; transform: rotate(-4deg); }
.lot-letter:nth-child(4) { left: 42%; top: 5%; transform: rotate(9deg); }
.lot-letter:nth-child(5) { left: 55%; top: 18%; transform: rotate(-8deg); background: var(--socket-cyan); }
.lot-letter:nth-child(6) { left: 68%; top: 6%; transform: rotate(5deg); }
.dot-lot { left: 80%; top: 58%; width: clamp(2.5rem, 5vw, 4.8rem); height: clamp(2.5rem, 5vw, 4.8rem); font-size: clamp(2rem, 5vw, 4rem); background: var(--gavel-red); color: var(--newsprint-cream); border-radius: 50%; clip-path: none; transform: rotate(11deg); }
.bid-lot { left: 84%; top: 17%; width: clamp(6rem, 12vw, 11rem); height: clamp(4rem, 7vw, 6.2rem); font-size: clamp(1.7rem, 4vw, 3.8rem); background: var(--socket-cyan); clip-path: polygon(0 0, 82% 0, 82% 22%, 100% 22%, 100% 100%, 18% 100%, 18% 78%, 0 78%); }
.wordmark.is-snapped .lot-letter { transform: rotate(0deg) translateY(0) scale(1.02); }

.misregister-shadow::after {
    content: "PPUZZL.bid";
    position: absolute;
    left: 4%;
    top: 72%;
    font-family: var(--display-font);
    font-size: clamp(2rem, 5vw, 5rem);
    color: transparent;
    -webkit-text-stroke: .18rem var(--gavel-red);
    opacity: .45;
    transform: translate(.35rem, .25rem) rotate(2deg);
}

.puzzle-paddle {
    position: relative;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 9.2rem;
    height: 11.8rem;
    padding: 1rem;
    border: .35rem solid var(--ink-black);
    border-radius: 50% 50% 44% 44%;
    background: var(--paddle-pink);
    color: var(--newsprint-cream);
    box-shadow: .55rem .55rem 0 var(--socket-cyan), 1rem 1rem 0 var(--ink-black);
    font-family: var(--display-font);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: transform 450ms cubic-bezier(.2,1.4,.2,1), box-shadow 250ms ease;
}
.puzzle-paddle::after { content: ""; position: absolute; bottom: -5.4rem; width: 1.35rem; height: 5.5rem; background: var(--bid-burst-yellow); border: .3rem solid var(--ink-black); border-top: 0; }
.puzzle-paddle:hover, .puzzle-paddle.is-raised { transform: rotate(-9deg) translateY(-1.4rem); box-shadow: .8rem 1.1rem 0 var(--socket-cyan), 1.4rem 1.6rem 0 var(--ink-black); }
.hero-paddle { position: absolute; right: 12%; top: 14%; transform: rotate(14deg) scale(1.25); }
.ghost-paddle { position: absolute; right: 5%; top: 22%; background: var(--newsprint-cream); color: var(--ink-black); transform: rotate(25deg); opacity: .9; }

.bid-burst {
    position: absolute;
    z-index: 10;
    display: grid;
    place-items: center;
    width: clamp(9rem, 20vw, 18rem);
    aspect-ratio: 1;
    background: var(--bid-burst-yellow);
    border: .35rem solid var(--ink-black);
    color: var(--gavel-red);
    font-family: var(--display-font);
    font-size: clamp(2.2rem, 5vw, 5rem);
    text-shadow: .08em .08em 0 var(--socket-cyan);
    clip-path: polygon(50% 0, 57% 28%, 82% 12%, 72% 40%, 100% 48%, 72% 58%, 88% 86%, 59% 72%, 50% 100%, 40% 72%, 12% 88%, 27% 59%, 0 49%, 28% 40%, 14% 12%, 42% 28%);
    transform: scale(.01) rotate(-25deg);
    transition: transform 620ms cubic-bezier(.1,1.6,.2,1);
}
.bid-burst small { display: block; font-size: .28em; color: var(--ink-black); }
.first-bid { left: 8%; top: 11%; }
.bid-burst.is-popped { transform: scale(1) rotate(-9deg); }
.twin-burst { right: 7%; bottom: 13%; transform: scale(1) rotate(8deg); animation: burstPulse 1.4s ease-in-out infinite; }

.lot-ticket {
    position: relative;
    z-index: 7;
    max-width: 35rem;
    padding: clamp(1.1rem, 2vw, 2rem);
    background: var(--newsprint-cream);
    color: var(--ink-black);
    border: .35rem solid var(--ink-black);
    box-shadow: .55rem .55rem 0 var(--paddle-pink), 1rem 1rem 0 var(--misfit-blue);
    clip-path: polygon(0 10%, 8% 10%, 8% 0, 92% 0, 92% 9%, 100% 9%, 100% 90%, 94% 90%, 94% 100%, 8% 100%, 8% 91%, 0 91%);
}
.lot-ticket h2 { margin: .25rem 0 .75rem; font-family: var(--display-font); font-size: clamp(1.8rem, 4vw, 4.2rem); line-height: .92; }
.lot-ticket p, .lot-ticket span { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.45; }
.opener-ticket { margin-left: auto; margin-right: 5%; transform: rotate(5deg); }
.reflection-ticket { transform: rotate(-4deg); }
.zap-ticket { justify-self: center; transform: rotate(4deg); }
.gavel-ticket { transform: rotate(-4deg); }
.final-ticket { transform: rotate(5deg); }

.hand-silhouette { position: absolute; left: -3rem; bottom: -2rem; width: 27rem; height: 21rem; background: var(--ink-black); clip-path: polygon(0 100%, 0 45%, 12% 45%, 12% 20%, 23% 20%, 23% 42%, 31% 42%, 31% 10%, 43% 10%, 43% 43%, 51% 43%, 51% 22%, 63% 22%, 63% 48%, 75% 54%, 92% 100%); opacity: .95; }

.speech-mask {
    position: relative;
    z-index: 6;
    justify-self: center;
    width: min(76vw, 32rem);
    min-height: 22rem;
    display: grid;
    place-items: center;
    background: var(--newsprint-cream);
    border: .4rem solid var(--ink-black);
    border-radius: 55% 45% 50% 48%;
    font-family: var(--stamp-font);
    font-size: clamp(2rem, 5vw, 5rem);
    box-shadow: .7rem .7rem 0 var(--gavel-red);
    transform: rotate(-8deg);
}
.speech-mask::after { content: ""; position: absolute; right: 8%; bottom: -3rem; width: 5rem; height: 5rem; background: inherit; border-right: .4rem solid var(--ink-black); border-bottom: .4rem solid var(--ink-black); transform: rotate(37deg); }
.paddle-rack { position: relative; height: 24rem; }
.small-paddle { position: absolute; }
.pink-paddle { left: 6%; top: 19%; transform: rotate(-24deg); }
.cream-paddle { left: 28%; top: 4%; background: var(--newsprint-cream); color: var(--ink-black); transform: rotate(9deg); }
.blue-paddle { left: 51%; top: 23%; background: var(--misfit-blue); transform: rotate(22deg); }

.zz-stage { position: relative; min-height: 42rem; }
.snap-word { font-family: var(--display-font); color: var(--newsprint-cream); text-shadow: .07em .06em 0 var(--socket-cyan), -.06em -.05em 0 var(--paddle-pink), .13em .12em 0 var(--ink-black); }
.zword { position: absolute; font-size: clamp(11rem, 28vw, 25rem); line-height: .8; }
.zword.one { left: 4%; top: 5%; transform: rotate(-18deg); }
.zword.two { left: 34%; top: 34%; transform: rotate(12deg); color: var(--bid-burst-yellow); }
.lightning-seam { position: absolute; left: 26%; top: 8%; width: 22rem; height: 34rem; background: var(--gavel-red); clip-path: polygon(46% 0, 72% 0, 58% 36%, 84% 36%, 25% 100%, 41% 53%, 14% 53%); filter: drop-shadow(.45rem .45rem 0 var(--socket-cyan)); animation: seamZap 1.8s steps(2, end) infinite; }
.socket-ring { position: absolute; border: .6rem solid var(--bid-burst-yellow); border-radius: 50%; box-shadow: inset 0 0 0 .6rem var(--ink-black); }
.ring-a { width: 9rem; height: 9rem; left: 9%; bottom: 13%; }
.ring-b { width: 6rem; height: 6rem; right: 13%; top: 14%; border-color: var(--socket-cyan); }
.ticket-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.ticket-row span { font-family: var(--display-font); background: var(--ink-black); color: var(--bid-burst-yellow); padding: .25rem .55rem; }

.gavel-impact { position: relative; min-height: 31rem; }
.gavel-head { position: absolute; left: 12%; top: 13%; width: 15rem; height: 6rem; background: var(--bid-burst-yellow); border: .4rem solid var(--ink-black); border-radius: 1rem; box-shadow: inset 0 -1rem 0 rgba(242,27,45,.35), .8rem .8rem 0 var(--misfit-blue); transform: rotate(-16deg); }
.gavel-handle { position: absolute; left: 22%; top: 35%; width: 23rem; height: 2.3rem; background: var(--bid-burst-yellow); border: .35rem solid var(--ink-black); border-radius: 2rem; transform: rotate(31deg); }
.impact-rings { position: absolute; left: 10%; top: 45%; width: 20rem; height: 13rem; border: .55rem dashed var(--socket-cyan); border-radius: 50%; transform: rotate(-9deg); animation: ringThump 1.7s ease-in-out infinite; }
.caption-button { position: absolute; left: 37%; bottom: 8%; padding: .75rem 1rem; background: var(--newsprint-cream); border: .3rem solid var(--ink-black); box-shadow: .35rem .35rem 0 var(--socket-cyan); font-family: var(--display-font); cursor: pointer; transform: rotate(4deg); }
.big-snap { font-size: clamp(6rem, 17vw, 17rem); transform: rotate(-10deg) scale(.9); opacity: .75; transition: transform 260ms ease, opacity 260ms ease; }
.big-snap.is-called { transform: rotate(-4deg) scale(1.06); opacity: 1; color: var(--bid-burst-yellow); }

.final-picture {
    position: relative;
    z-index: 6;
    min-height: clamp(28rem, 58vw, 42rem);
    background: var(--ink-black);
    border: .45rem solid var(--ink-black);
    box-shadow: .8rem .8rem 0 var(--paddle-pink), 1.35rem 1.35rem 0 var(--misfit-blue);
    overflow: hidden;
    clip-path: polygon(0 8%, 9% 8%, 9% 0, 91% 0, 91% 9%, 100% 9%, 100% 91%, 91% 91%, 91% 100%, 9% 100%, 9% 91%, 0 91%);
}
.picture-piece { position: absolute; border: .35rem solid var(--ink-black); display: grid; place-items: center; font-family: var(--display-font); }
.sun { left: 7%; top: 8%; width: 38%; height: 42%; border-radius: 50%; background: var(--bid-burst-yellow); box-shadow: 0 0 0 1rem var(--socket-cyan); }
.river { left: 5%; bottom: 5%; width: 90%; height: 39%; background: var(--socket-cyan); clip-path: polygon(0 36%, 20% 12%, 40% 48%, 60% 16%, 79% 52%, 100% 23%, 100% 100%, 0 100%); }
.moon { right: 6%; top: 8%; width: 43%; height: 54%; background: var(--misfit-blue); clip-path: polygon(0 0, 100% 0, 100% 74%, 72% 74%, 72% 100%, 0 100%); }
.burst-piece { left: 18%; top: 51%; width: 22%; height: 18%; background: var(--gavel-red); color: var(--newsprint-cream); transform: rotate(-12deg); clip-path: polygon(50% 0, 62% 26%, 90% 12%, 75% 42%, 100% 52%, 72% 62%, 84% 90%, 55% 75%, 45% 100%, 36% 75%, 8% 88%, 24% 60%, 0 50%, 27% 39%, 12% 13%, 40% 27%); }
.missing-socket { position: absolute; right: 20%; bottom: 20%; width: 14rem; height: 9rem; display: grid; place-items: center; background: var(--newsprint-cream); color: var(--ink-black); font-family: var(--display-font); border: .35rem dashed var(--paddle-pink); clip-path: polygon(0 20%, 25% 20%, 25% 0, 74% 0, 74% 20%, 100% 20%, 100% 80%, 74% 80%, 74% 100%, 25% 100%, 25% 80%, 0 80%); animation: missingPulse 2.4s ease-in-out infinite; }
.sold-question { display: inline-block; margin-top: 1.3rem; padding: .25rem .8rem; border: .4rem solid var(--gavel-red); color: var(--gavel-red); font-family: var(--stamp-font); font-size: clamp(2.7rem, 7vw, 5.5rem); transform: rotate(-10deg); background: rgba(255, 241, 199, .1); }
.sold-question.is-stamped { animation: stampHit 420ms cubic-bezier(.14,1.7,.3,1); }

.comic-panel:not(.is-visible) .lot-ticket,
.comic-panel:not(.is-visible) .final-picture,
.comic-panel:not(.is-visible) .zz-stage,
.comic-panel:not(.is-visible) .gavel-impact { opacity: .45; transform: translateY(1rem) rotate(-2deg); }
.comic-panel.is-visible .lot-ticket,
.comic-panel.is-visible .final-picture,
.comic-panel.is-visible .zz-stage,
.comic-panel.is-visible .gavel-impact { opacity: 1; transition: opacity 650ms ease, transform 750ms cubic-bezier(.2,1.15,.24,1); }

@keyframes burstPulse { 0%,100% { transform: scale(1) rotate(8deg); } 50% { transform: scale(1.08) rotate(4deg); } }
@keyframes seamZap { 0%,100% { filter: drop-shadow(.45rem .45rem 0 var(--socket-cyan)); } 50% { filter: drop-shadow(-.45rem .25rem 0 var(--paddle-pink)); } }
@keyframes ringThump { 0%,100% { transform: rotate(-9deg) scale(.92); opacity: .7; } 50% { transform: rotate(-9deg) scale(1.08); opacity: 1; } }
@keyframes missingPulse { 0%,100% { box-shadow: 0 0 0 rgba(0,217,255,0); } 50% { box-shadow: 0 0 2rem rgba(0,217,255,.8); } }
@keyframes stampHit { 0% { transform: rotate(-10deg) scale(2.2); opacity: .2; } 100% { transform: rotate(-10deg) scale(1); opacity: 1; } }

@media (max-width: 900px) {
    .paddles-panel, .zz-panel, .gavel-panel, .final-panel { grid-template-columns: 1fr; }
    .wordmark { min-height: 31rem; transform: rotate(-4deg) scale(.92); transform-origin: left center; }
    .hero-paddle, .ghost-paddle { transform: scale(.85); }
    .hero-paddle { right: 19%; top: 39%; }
    .ghost-paddle { right: 4%; top: 43%; }
    .opener-ticket { margin-top: 8rem; }
}

@media (max-width: 560px) {
    .comic-panel { padding-inline: 1rem; }
    .wordmark { width: 42rem; margin-left: -1.2rem; }
    .lot-letter { width: 4.2rem; height: 4.8rem; font-size: 3rem; }
    .dot-lot { left: 79%; }
    .bid-lot { left: 84%; }
    .lot-ticket { box-shadow: .35rem .35rem 0 var(--paddle-pink), .65rem .65rem 0 var(--misfit-blue); }
    .missing-socket { width: 9rem; height: 6rem; right: 12%; }
}