/* Quiet paper background keeps the collectible cards in focus. */
.gallery{position:relative;padding:28px 4vw 60px;border-bottom:3px solid var(--ink);background:var(--cream);color:var(--ink)}
.gallery-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.gallery-intro>div{min-width:0}.gallery-intro .section-tag{margin:0 0 10px}.gallery-intro h1{margin:0;font:clamp(28px,3.2vw,48px)/1.05 var(--marker);letter-spacing:-1px}.gallery-intro h1 em{color:var(--orange)}.gallery-intro p:last-child{margin:10px 0 0;font-size:17px}.gallery-story-link{flex-shrink:0;max-width:100%;padding:10px 12px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shade,var(--ink));background:var(--yellow);color:var(--ink);font:12px/1.4 var(--marker);text-decoration:none;transform:rotate(-2deg)}
.gallery-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}.gallery-results{min-width:0}.gallery-guides{margin-top:42px}.gallery-guides .gallery-rarity-guide,.gallery-guides .gallery-mileage-guide{width:100%;max-width:none}
.gallery-tools{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:end;margin:0 5vw 26px;padding:18px;border:3px solid var(--ink);background:var(--cream);box-shadow:7px 7px 0 var(--shade,var(--ink));transform:rotate(-.4deg)}.tool-title{width:100%;font:500 11px var(--mono);letter-spacing:1px}.tool-title span{display:inline-block;margin-left:6px;padding:3px 7px;border:2px solid var(--ink);background:var(--yellow);font:700 10px var(--mono);transform:rotate(1deg)}.gallery-tools label{display:grid;gap:6px;font:500 10px var(--mono);letter-spacing:.5px}.gallery select,.gallery input{border:3px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);padding:9px 10px;font:500 12px var(--mono);box-shadow:3px 3px 0 var(--shade,var(--ink))}.gallery input::placeholder{color:#7a857d}.gallery select:focus-visible,.gallery input:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}.number-search input{width:150px}
.trait-filter{flex-basis:100%;border:3px dashed var(--ink);background:rgba(255,255,255,.55)}.trait-filter summary{cursor:pointer;min-height:44px;padding:11px 12px;font:700 11px var(--mono);letter-spacing:1px}.trait-filter summary:focus-visible{outline:3px dashed var(--ink);outline-offset:-5px}.trait-filter[open] summary{border-bottom:3px dashed var(--ink)}.trait-controls{display:flex;flex-wrap:wrap;gap:12px;padding:12px}
.gallery-tools button,.gallery-bottom button{border:3px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--shade,var(--ink));padding:10px 13px;color:var(--ink);font:700 11px var(--mono);cursor:pointer;transform:rotate(-1deg)}.gallery-tools button:hover,.gallery-bottom button:hover{background:var(--pink);transform:translate(2px,2px) rotate(-1deg);box-shadow:2px 2px 0 var(--shade,var(--ink))}.gallery-tools .export-button{background:var(--green);transform:rotate(1deg)}.gallery-tools button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.gallery-tools button:focus-visible,.gallery-bottom button:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.puppet-tile{position:relative;min-width:0;background:var(--orange);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--shade,var(--ink));overflow:hidden;transition:transform .1s ease-out}.puppet-tile:nth-child(3n+1){transform:rotate(-1.5deg);background:var(--pink)}.puppet-tile:nth-child(3n+2){transform:rotate(1deg);background:var(--blue)}.gallery .puppet-tile:hover{z-index:2;transform:rotate(0);box-shadow:9px 9px 0 var(--shade,var(--ink))}
:is(.gallery,.offer-art-frame) .puppet-tile{border:7px solid var(--cream);border-radius:6px;outline:3px solid var(--ink);box-shadow:7px 8px 0 var(--shade,var(--ink))}:is(.gallery,.offer-art-frame) .puppet-tile .puppet-slab{border:2px solid var(--ink)}:is(.gallery,.offer-art-frame) .puppet-tile .tile-note{border-top:2px solid var(--ink)}
.gallery .puppet-grid{grid-template-columns:repeat(auto-fill,270px);justify-content:center;gap:20px}
:is(.gallery,.offer-art-frame) .puppet-tile img{object-fit:scale-down}
@media(max-width:640px){.gallery .puppet-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:552px;margin-inline:auto}.gallery .puppet-tile{border-width:5px}}
.gallery-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:38px 5vw 0;font:13px var(--mono)}#gallery-hint{padding:8px 12px;border:2px dashed var(--ink);background:rgba(255,255,255,.6)}
.gallery .gallery-tools{display:block;min-width:0;margin:0;padding:14px;transform:none}.gallery .tool-title{cursor:pointer;line-height:1.5;min-height:44px}.gallery .tool-title span{display:block;margin:8px 0 0;color:var(--ink);overflow-wrap:anywhere}.gallery-filter-fields{display:grid;gap:16px;padding-top:18px}.gallery .trait-controls{display:grid;padding:10px;gap:12px}.gallery .gallery-tools label{min-width:0}.gallery .gallery-tools select,.gallery .gallery-tools input{width:100%;min-width:0;max-width:100%}.gallery .gallery-bottom{margin:28px 0 0;flex-wrap:wrap}.gallery-story-link:focus-visible,.gallery .tool-title:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
@media(max-width:900px){.gallery-layout{grid-template-columns:minmax(0,1fr);gap:24px}.gallery-intro{align-items:flex-start}.gallery-story-link{display:none}.gallery .tool-title span{display:inline-block;margin:0 0 0 8px}.gallery .tool-title{min-height:0}.gallery-filter-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery .trait-filter{grid-column:1/-1}.gallery .trait-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gallery{padding:20px 6vw 45px}.gallery-intro{margin-bottom:20px}.gallery-intro .section-tag{font-size:9px}.gallery-intro p:last-child{font-size:15px}.gallery .tool-title span{display:block;margin:6px 0 0}.gallery-filter-fields{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.gallery-tools{padding:14px;transform:none}.gallery-bottom{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.gallery-tools,.gallery-tools button,.gallery-bottom button,.tool-title span{transform:none}.puppet-tile{transition:none}}
