/* App shell: router.js sets html[data-route], so each section becomes one screen.
   Without JavaScript the site stays one long page. */
:root { --dock-h: 58px; --view-pad-y: clamp(12px, 2.4vh, 30px); --view-pad-x: clamp(16px, 3vw, 52px); }

html[data-route] { scroll-behavior: auto; scroll-padding-top: 0; }
html[data-route] body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

html[data-route]:not([data-route="gallery"]) [data-view="gallery"],
html[data-route]:not([data-route="my-puppets"]) [data-view="my-puppets"],
html[data-route]:not([data-route="market"]) [data-view="market"],
html[data-route]:not([data-route="rarity"]) [data-view="rarity"],
html[data-route]:not([data-route="shed"]) [data-view="shed"],
html[data-route]:not([data-route="about"]) [data-view="about"],
html[data-route]:not([data-panel="collection-story"]) [data-panel="collection-story"],
html[data-route]:not([data-panel="manifesto"]) [data-panel="manifesto"],
html[data-route]:not([data-panel="lore"]) [data-panel="lore"],
html[data-route]:not([data-panel="crew"]) [data-panel="crew"] { display: none !important; }

html[data-route] .marquee { flex: none; height: 26px; font-size: 12px; }
html[data-route] header { flex: none; height: 66px; min-height: 0; padding: 0 clamp(14px, 2.4vw, 40px); }
html[data-route] header .logo-smile { width: 38px; }
html[data-route] main { display: flex; flex-direction: column; flex: 1; min-height: 0; }

html[data-route] main > [data-view] { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border-bottom: 0; }
html[data-route] :is(#gallery, #my-puppets, #market, #rarity, #shed, #collection-story, #manifesto, #crew) { padding: var(--view-pad-y) var(--view-pad-x); }
html[data-route] main :is(h1, h2)[tabindex="-1"]:focus { outline: none; }
html[data-route] main h2.section-title { font-size: clamp(26px, min(3.2vw, 5.4vh), 54px); }
html[data-route] main .section-tag { margin-bottom: clamp(6px, 1.2vh, 14px); }

/* THE PILE: intro strip, filter rail, and a grid that fits whole Puppets. */
html[data-route] .gallery { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 20px); }
html[data-route] .gallery-intro { flex: none; align-items: flex-end; margin: 0; }
html[data-route] .gallery-intro h1 { font-size: clamp(24px, min(2.8vw, 4.6vh), 44px); }
html[data-route] .gallery-intro p:last-child { margin-top: 6px; font-size: 15px; }
html[data-route] .gallery .gallery-bottom { flex: none; flex-wrap: nowrap; gap: 12px; margin: 0; font-size: 12px; }
html[data-route] #gallery-hint { white-space: nowrap; }
.gallery-pager { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.gallery-pager span { min-width: 88px; font: 700 12px var(--mono); text-align: center; }
.gallery-bottom button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.gallery-bottom button:disabled:hover { background: var(--yellow); transform: none; box-shadow: none; }

html[data-route] .gallery-layout { flex: 1; min-height: 0; grid-template-columns: clamp(190px, 17vw, 250px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
html[data-route] .gallery .gallery-tools { max-height: 100%; overflow: auto; overscroll-behavior: contain; }
html[data-route] .gallery .tool-title span { display: block; margin: 8px 0 0; }
html[data-route] .gallery .tool-title { min-height: 44px; }
html[data-route] .gallery-filter-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; }
html[data-route] .gallery .trait-controls { grid-template-columns: minmax(0, 1fr); }
.gallery-links { display: grid; gap: 10px; margin: 4px 0 0; }
.gallery-links a { display: block; padding: 8px 10px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade,var(--ink)); background: var(--blue); color: var(--ink); font: 12px/1.35 var(--marker); text-decoration: none; transform: rotate(1deg); }
html[data-route] .gallery-links .gallery-story-link { display: block; background: var(--yellow); transform: rotate(-1deg); }
.gallery-links a:hover { background: var(--pink); }
.gallery-links a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

html[data-route] .gallery-results { display: flex; flex-direction: column; min-height: 0; }
html[data-route] .gallery .puppet-grid { flex: 1; min-height: 0; }

@media (min-width: 641px) {
  html[data-route] .gallery .puppet-grid[style*="--fit-columns"] { grid-template-columns: repeat(var(--fit-columns), calc(var(--fit-art) + 14px)); align-content: center; gap: 18px; }
  html[data-route] .gallery .puppet-tile .mileage-grade { min-width: 38px; padding: 2px 5px 3px; }
  html[data-route] .gallery .puppet-tile .mileage-grade b { font-size: 19px; }
  html[data-route] .gallery .puppet-tile .mileage-grade small { font-size: 6.5px; }
  html[data-route] .gallery .puppet-tile { container-type: inline-size; }
  html[data-route] .gallery .puppet-tile .slab-id :is(small, .slab-cert) { overflow: hidden; text-overflow: ellipsis; }
  /* Small cards keep every detail; the mileage badge just shrinks to make room. */
  @container (max-width: 160px) {
    html[data-route] .gallery .puppet-tile .puppet-slab { gap: 4px; padding-inline: 5px; }
    html[data-route] .gallery .puppet-tile .mileage-grade { min-width: 30px; padding: 1px 3px 2px; }
    html[data-route] .gallery .puppet-tile .mileage-grade b { font-size: 16px; }
    html[data-route] .gallery .puppet-tile .mileage-grade small { font-size: 7px; letter-spacing: 0; }
  }
  /* Hold the mileage badge's spot while it loads so the page size doesn't jump when it lands. */
  html[data-route]:not([data-mileage="offline"]) .gallery .puppet-tile .mileage-grade[hidden] { display: flex; visibility: hidden; }
  html[data-route] .gallery .puppet-tile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-content: start; }
  html[data-route] .gallery .puppet-tile .puppet-slab { gap: 6px; }
  html[data-route] .gallery .puppet-tile > a { grid-column: 1 / -1; }
  html[data-route] .gallery .puppet-tile .puppet-slab { min-height: 55px; padding: 3px 7px; }
  html[data-route] .gallery .puppet-tile .tile-note { min-height: 0; padding: 5px 8px; }
  html[data-route] .gallery .puppet-tile .tile-note :is(b, span) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html[data-route] .gallery .puppet-tile .tile-note b { font-size: 15px; }
  html[data-route] .gallery .puppet-tile .tile-rarity { min-width: 0; padding: 0; }
  html[data-route] .gallery .puppet-tile .tile-rarity summary { min-height: 34px; padding: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
  html[data-route] .gallery .puppet-tile .tile-rarity summary span { font-size: 9px; }
  html[data-route] .gallery .puppet-tile .tile-rarity[open] { position: absolute; inset: 0; z-index: 3; overflow: auto; overscroll-behavior: contain; border-top: 0; }
  html[data-route] .gallery .puppet-tile .tile-rarity[open] summary { position: sticky; top: 0; }
  html[data-route] .gallery .puppet-tile .tile-rarity-unavailable { min-width: 0; margin: 0; padding: 8px; border-top: 3px solid var(--ink); font-size: 9px; }
  html[data-route] .gallery .tile-offers-button { width: auto; min-height: 34px; margin: 0; padding: 4px 10px; border-width: 3px 0 0 2px; box-shadow: none; transform: none; font-size: 12px; }
  html[data-route] .gallery .tile-offers-button { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html[data-route] .gallery .tile-offers-button { line-height: 1; }
  html[data-route] .gallery .tile-offers-button small { overflow: hidden; margin-top: 2px; text-overflow: ellipsis; font-size: 8px; line-height: 1.1; }
  html[data-route] .gallery-intro .section-tag { display: none; }
}

/* MY PUPPETS: form on the left, the wall of cards on the right. */
html[data-route] .wallet-puppets { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); gap: clamp(20px, 3vw, 46px); align-items: stretch; }
html[data-route] .wallet-puppets-copy { align-self: center; min-height: 0; }
html[data-route] .wallet-puppets-board { display: flex; flex-direction: column; min-height: 0; }
html[data-route] .wallet-puppets-results { flex: 1; min-height: 0; max-width: none; }
html[data-route] .wallet-puppets-results[style*="--fit-columns"] { grid-template-columns: repeat(var(--fit-columns), calc(var(--fit-art) + 6px)); justify-content: center; align-content: center; }
html[data-route] .wallet-puppets-pagination { flex: none; margin-top: 12px; }
@media (min-width: 641px) {
  html[data-route] .wallet-puppet-card > div { padding: 7px 9px; }
  html[data-route] .wallet-puppet-card small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html[data-route] .wallet-puppet-card strong { margin: 4px 0; font-size: 16px; }
  html[data-route] .wallet-puppet-card small:last-child { padding-top: 4px; }
}

/* MARKET: heading strip, sticker stats, then as many freshly adopted cards as fit. */
html[data-route] main .market-board { gap: clamp(10px, 1.8vh, 18px); }
html[data-route] .market-board:before { display: none; }
html[data-route] .market-board > * { flex: none; }
html[data-route] .market-board > .market-sales { flex: 1 1 auto; min-height: 0; }
html[data-route] .market-title p { font-size: clamp(14px, 1.9vh, 16px); }
html[data-route] .market-sales h3 { margin-bottom: clamp(6px, 1.2vh, 12px); }
html[data-route] .market-stats strong { margin: 4px 0 3px; }
html[data-route] .sale-chart-panel { position: absolute; z-index: 6; top: 50%; left: var(--view-pad-x); right: var(--view-pad-x); max-width: 980px; max-height: calc(100% - 2 * var(--view-pad-y)); margin: 0 auto; overflow: auto; overscroll-behavior: contain; transform: translateY(-50%); }
@media (min-width: 760px) {
  html[data-route] .market-sale-grid[style*="--fit-columns"] { grid-template-columns: repeat(var(--fit-columns), calc(var(--fit-art) + 14px)); align-content: start; gap: 18px; }
  html[data-route] .market-sales { overflow: hidden; }
  html[data-route] .market-sale-grid { padding: 4px 12px 12px 6px; }
}
@media (max-width: 759px) {
  html[data-route] .market-board > .market-sales { flex: none; }
}
/* Desktop: title, links and stats pin up as a sidebar so the sale cards get the whole wall. */
@media (min-width: 760px) {
  html[data-route] main .market-board { display: grid; grid-template-columns: clamp(280px, 31vw, 470px) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "title sales" "collect sales" "tools sales" "stats sales" "foot foot"; gap: clamp(8px, 1.6vh, 14px) clamp(20px, 2.4vw, 36px); }
  html[data-route] .market-board__heading { display: contents; }
  html[data-route] .market-title { grid-area: title; }
  html[data-route] .market-collect { grid-area: collect; gap: 10px 14px; }
  html[data-route] .market-collect .market-links { gap: 8px; }
  html[data-route] .market-collect .market-links a { padding: 5px 8px; font-size: 12px; }
  html[data-route] .market-tools { grid-area: tools; justify-content: flex-start; max-width: none; }
  html[data-route] .market-tools time { text-align: left; }
  html[data-route] .market-stats { grid-area: stats; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vh, 16px) 16px; min-height: 0; padding: 4px 6px 6px 0; }
  html[data-route] .market-stats article { display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; }
  html[data-route] .market-sales { grid-area: sales; min-height: 0; }
  html[data-route] .market-footnote { grid-area: foot; }
}
@media (max-height: 820px) and (min-width: 641px) {
  html[data-route] .market-title p { display: none; }
  html[data-route] .market-stats article { padding: 7px 10px 6px; }
  html[data-route] .market-stats small { font-size: 12px; }
  html[data-route] .market-collect .market-links a { padding: 6px 10px; }
}
@media (min-width: 760px) and (max-height: 820px) {
  html[data-route] .market-collect .market-links a { padding: 5px 8px; }
}
@media (min-width: 760px) and (max-height: 760px) {
  html[data-route] .market-collect .collect-quote { display: none; }
}
@media (min-width: 760px) and (max-height: 719px) {
  html[data-route] .market-stats span { display: none; }
}

/* RARITY: the table scrolls inside its frame; the guides sit alongside. */
html[data-route] .rarity-board { display: flex; flex-direction: column; }
html[data-route] .rarity-board .section-heading { flex: none; margin: 0 0 clamp(8px, 1.6vh, 18px); }
html[data-route] .rarity-board .side-note { padding: 10px 12px; font-size: 14px; }
.rarity-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 400px); gap: clamp(18px, 2.4vw, 32px); }
html[data-route] .rarity-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
html[data-route] .rarity-main { display: flex; flex-direction: column; min-height: 0; }
html[data-route] .rarity-main > * { flex-shrink: 0; }
html[data-route] .rarity-main > p { margin: 0; }
html[data-route] .rarity-tools { margin: 12px 0 10px; padding: 8px 12px; }
html[data-route] .rarity-facts { margin-bottom: 12px; }
html[data-route] .rarity-facts p { padding: 9px 11px; }
html[data-route] .rarity-table-wrap { flex: 1 1 auto; min-height: 120px; flex-shrink: 1; overflow: auto; overscroll-behavior: contain; }
html[data-route] .rarity-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ink); }
html[data-route] .rarity-table th, html[data-route] .rarity-table td { padding: 8px 12px; }
html[data-route] .gallery-guides { min-height: 0; margin: 0; padding: 0 10px 10px 0; overflow: auto; overscroll-behavior: contain; }

/* THE SHED: four toys, one wall. */
html[data-route] .shed { grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 2vh, 24px); }
html[data-route] .shed .shed-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-items: stretch; gap: clamp(14px, 1.6vw, 24px); min-height: 0; }
html[data-route] .shed-tool, html[data-route] .shed .drawing-pad { position: relative; min-height: 0; max-width: none; padding: clamp(12px, 1.6vh, 20px); overflow: auto; overscroll-behavior: contain; }
html[data-route] .shed-tool .shed-card-title, html[data-route] .drawing-pad h3 { margin: 0 0 10px; font-size: clamp(20px, min(1.8vw, 3.2vh), 28px); }
html[data-route] .shed .tool-kicker, html[data-route] .drawing-pad__label { margin-bottom: 8px; }
html[data-route] .radio-dj { width: min(100%, 17vh); margin: 8px auto; }
html[data-route] .radio-player { margin: 8px 0 10px; }
html[data-route] .shed-tool .radio-controls button { margin-top: 8px; }
html[data-route] .shed-tool--picker .picker-art { width: min(100%, 34vh); margin-inline: auto; }
html[data-route] .shed-tool--picker button { margin-top: 12px; }
html[data-route] .picker-source { margin-top: 10px; }
html[data-route] .puppet-tv { margin-top: 34px; }
html[data-route] .tv-status { min-height: 0; margin-top: 12px; }
html[data-route] .drawing-pad__intro { margin: 6px 0 10px; font-size: 15px; }
html[data-route] .drawing-pad__tools legend { margin-bottom: 4px; }
html[data-route] .drawing-pad__paper { width: min(100%, 36vh); margin-inline: auto; }
html[data-route] .drawing-pad__actions { gap: 8px; margin: 10px 0; }
html[data-route] .drawing-pad__status { min-height: 0; }
/* Every toy stays in one row; the art soaks up whatever height the words leave behind. */
@media (min-width: 641px) {
  html[data-route] .shed-tool--tv { grid-column: auto; max-width: none; }
  html[data-route] :is(.shed-tool, .shed .drawing-pad) { display: flex; flex-direction: column; container-type: inline-size; }
  html[data-route] :is(.shed-tool, .shed .drawing-pad) > *, html[data-route] .radio-main > *, html[data-route] .picker-screen > * { flex: none; }
  html[data-route] .shed-tool--radio .radio-console, html[data-route] .radio-main, html[data-route] .shed-tool--picker .picker-screen { display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; }
  html[data-route] .shed .radio-dj { flex: 0 1 auto; width: auto; height: min(17vh, 100cqw, 256px); min-height: 48px; max-width: 100%; margin: 8px auto; }
  html[data-route] .shed-tool--picker .picker-art { flex: 0 1 auto; width: auto; height: min(34vh, 100cqw); min-height: 64px; max-width: 100%; margin-inline: auto; }
  html[data-route] .shed .drawing-pad__paper { flex: 0 1 auto; box-sizing: content-box; width: auto; height: min(28.8vh, (100cqw - 6px) * .8); min-height: 60px; max-width: calc(100% - 6px); aspect-ratio: 5 / 4; margin-inline: auto; }
  html[data-route] .shed .drawing-pad canvas { width: 100%; height: 100%; }
  html[data-route] .shed .drawing-pad__tools { min-width: 0; gap: 6px; }
  html[data-route] .shed .drawing-pad__color { flex: 0 1 48px; min-width: 28px; }
  html[data-route] .shed .radio-controls { flex-wrap: wrap; }
  /* Skinny TVs put the channel buttons under the screen instead of in a tall tower beside it. */
  @container (max-width: 300px) {
    html[data-route] .puppet-tv { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    html[data-route] .tv-screen { width: min(100%, 44vh); justify-self: center; }
    html[data-route] .tv-controls { display: flex; align-items: center; gap: 6px; }
    html[data-route] .tv-label { margin: 0; }
    html[data-route] #tv-channels { flex: 1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
    html[data-route] .shed-tool .tv-channel { min-height: 36px; }
    html[data-route] .tv-speaker { display: none; }
  }
  @container (max-width: 180px) {
    html[data-route] .tv-label { display: none; }
    html[data-route] .drawing-pad__help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    html[data-route] .radio-player { padding: 6px; }
    html[data-route] .radio-wave { height: 30px; }
    html[data-route] .shed-tool .radio-controls button { padding-inline: 4px; font-size: 10px; }
  }
}
@media (max-height: 700px) and (min-width: 641px) {
  html[data-route] .shed-tool .shed-card-title, html[data-route] .drawing-pad h3 { margin-bottom: 6px; }
  html[data-route] .radio-player { margin: 4px 0 6px; padding: 6px; }
  html[data-route] .radio-wave { height: 30px; margin-block: 4px; }
  html[data-route] .radio-main > h3 { font-size: 16px; }
  html[data-route] .radio-status { margin-block: 4px; }
  html[data-route] .shed-tool .radio-controls button { margin-top: 4px; }
  html[data-route] .puppet-tv { margin-top: 26px; }
  html[data-route] .puppet-tv:before, html[data-route] .puppet-tv:after { top: -26px; height: 24px; }
  html[data-route] .tv-status { margin-top: 8px; }
  html[data-route] .tv-screen { width: min(100%, 34vh); justify-self: center; }
}
@media (max-width: 1199px) and (min-width: 641px) {
  html[data-route] .shed .shed-tools { gap: 12px; }
  html[data-route] :is(.shed-tool, .shed .drawing-pad) { padding: 10px; box-shadow: 4px 5px 0 var(--shade, var(--ink)); }
  html[data-route] .shed-tool .shed-card-title, html[data-route] .drawing-pad h3 { font-size: clamp(16px, 2.1vw, 22px); overflow-wrap: anywhere; }
  html[data-route] .shed .tool-kicker, html[data-route] .drawing-pad__label { font-size: 10px; }
}

/* ABOUT: four pinned notes behind one row of tabs. */
html[data-route] .about { display: flex; flex-direction: column; overflow: hidden; }
.about-tabs { display: flex; flex: none; flex-wrap: wrap; gap: 10px; padding: 10px var(--view-pad-x); border-bottom: 3px solid var(--ink); background: var(--cream); }
html:not([data-route]) .about-tabs { display: none; }
.about-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade,var(--ink)); background: var(--cream); color: var(--ink); font: 15px/1.1 var(--marker); text-decoration: none; transform: rotate(-1deg); }
.about-tabs a:nth-child(even) { transform: rotate(1deg); }
.about-tabs a:hover { background: var(--yellow); }
.about-tabs a[aria-current="page"] { background: var(--yellow); box-shadow: 1px 1px 0 var(--shade,var(--ink)); text-decoration: underline wavy 2px; text-underline-offset: 5px; transform: translate(2px, 2px); }
.about-tabs a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
html[data-route] .about > [data-panel] { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border-bottom: 0; }
html[data-route] #collection-story { align-items: center; gap: clamp(20px, 3vw, 48px); }
html[data-route] #collection-story p:not(.section-tag) { font-size: clamp(15px, 2.1vh, 19px); }
@media (min-width: 641px) {
  html[data-route] #collection-story .no-collab-note { padding: clamp(16px, 2.6vh, 34px) clamp(16px, 2.4vw, 36px); }
  html[data-route] #collection-story .no-collab-note h3 { margin-bottom: clamp(10px, 2vh, 24px); }
  html[data-route] #collection-story .no-collab-note p:not(.section-tag) { margin-block: clamp(6px, 1.1vh, 14px); font-size: clamp(14px, min(1.9vh, 1.9vw), 18px); line-height: 1.45; }
  html[data-route] #collection-story .no-collab-note .no-collab-signoff { margin-top: clamp(10px, 2vh, 26px); padding-top: clamp(8px, 1.6vh, 18px); font-size: clamp(18px, 2.8vh, 24px); }
}
@media (min-width: 641px) and (max-width: 900px) {
  html[data-route] #collection-story { gap: 16px; }
  html[data-route] #collection-story .intro-copy p:not(.section-tag) { margin-block: 8px; font-size: clamp(14px, 2vw, 17px); }
  html[data-route] #collection-story .story-margin-note { margin-top: 10px; padding: 8px 0; font-size: 18px; }
}
/* Narrow and short: the intro and the note sit side by side instead of stacking. */
@media (min-width: 641px) and (max-width: 900px) and (max-height: 820px) {
  html[data-route] #collection-story { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; }
  html[data-route] #collection-story .intro-copy p:not(.section-tag) { font-size: 14px; }
  html[data-route] #collection-story .story-margin-note { font-size: 16px; }
  html[data-route] #collection-story .no-collab-note h3 { font-size: clamp(18px, 3vh, 24px); }
  html[data-route] #collection-story .no-collab-note p:not(.section-tag) { margin-block: 6px; font-size: 14px; line-height: 1.34; }
}
html[data-route] .manifesto-poster { align-items: center; gap: clamp(20px, 3vw, 40px); }
html[data-route] .manifesto-poster__card { width: min(100%, 60vh); }
html[data-route] .lore { grid-template-rows: minmax(0, 1fr); }
html[data-route] .lore-art { min-height: 0; }
html[data-route] .lore-copy { padding: var(--view-pad-y) var(--view-pad-x); overflow: auto; }
/* MUMBO JUMBO: the FAQ shrinks with the screen, and goes two-up when room runs out, so even the longest open answer fits. */
@media (min-width: 641px) {
  html[data-route] .lore-copy > p { margin-block: clamp(8px, 1.6vh, 18px); }
  html[data-route] .lore details { padding-block: clamp(6px, 1.1vh, 12px); }
  html[data-route] .lore summary { font-size: clamp(16px, 2.3vh, 20px); line-height: 1.15; }
  html[data-route] .lore details p { margin-top: 6px; font-size: clamp(14px, 1.9vh, 16px); line-height: 1.25; }
}
@media (min-width: 641px) and (max-width: 1100px), (min-width: 641px) and (max-height: 760px) {
  html[data-route] .lore { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  html[data-route] .lore-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: safe center; align-items: start; column-gap: clamp(14px, 2vw, 28px); }
  html[data-route] .lore-copy > :is(h2, p) { grid-column: 1 / -1; }
  html[data-route] .lore-bubble { top: 10%; left: 8%; width: min(210px, 80%); padding: 14px; font-size: clamp(14px, 1.8vw, 19px); }
  html[data-route] .lore-caption { left: 8%; bottom: 8%; font-size: clamp(13px, 1.6vw, 18px); }
}
html[data-route] .puppet-crew { gap: clamp(24px, 4vw, 55px); }
/* THE FOUNDER: intro and card on the left, the backstory pinned beside them, all on one screen. */
@media (min-width: 641px) {
  html[data-route] .puppet-crew { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "intro story" "card story"; align-content: center; align-items: center; gap: clamp(14px, 2.4vh, 28px) clamp(22px, 3vw, 48px); }
  html[data-route] .puppet-crew > div { grid-area: intro; align-self: end; }
  html[data-route] .puppet-crew > div > p:not(.section-tag) { margin-block: 8px; font-size: clamp(14px, 2vh, 18px); }
  html[data-route] .puppet-crew .crew-card { grid-area: card; align-self: start; grid-template-columns: clamp(84px, 13vh, 150px) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); padding: clamp(12px, 2vh, 20px); }
  html[data-route] .puppet-crew .crew-card img { width: clamp(84px, 13vh, 150px); height: clamp(84px, 13vh, 150px); }
  html[data-route] .puppet-crew .crew-card ul { margin-block: clamp(6px, 1.2vh, 13px); }
  html[data-route] .founder-story { grid-area: story; max-width: none; columns: 2; column-gap: clamp(18px, 2.4vw, 32px); padding: clamp(16px, 2.6vh, 32px) clamp(16px, 2.2vw, 32px); }
  html[data-route] .founder-story > :is(.section-tag, h3, .founder-story-signoff) { column-span: all; }
  html[data-route] .founder-story .section-tag { margin-bottom: 8px; }
  html[data-route] .founder-story h3 { margin-bottom: clamp(10px, 1.8vh, 18px); font-size: clamp(24px, min(3vw, 4.6vh), 40px); }
  html[data-route] .founder-story p:not(.section-tag) { max-width: none; margin: 0 0 clamp(8px, 1.2vh, 12px); font-size: clamp(13px, min(1.9vh, 1.9vw), 17px); line-height: 1.45; break-inside: avoid; }
  html[data-route] .founder-story .founder-story-signoff { margin-top: clamp(8px, 1.4vh, 16px); padding-top: clamp(8px, 1.4vh, 14px); font-size: clamp(16px, 2.4vh, 22px); }
}
@media (min-width: 641px) and (max-width: 1000px) {
  html[data-route] .puppet-crew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro card" "story story"; }
  html[data-route] .puppet-crew > div, html[data-route] .puppet-crew .crew-card { align-self: center; }
  html[data-route] .puppet-crew .crew-card { grid-template-columns: 84px minmax(0, 1fr); transform: rotate(.6deg); }
  html[data-route] .puppet-crew .crew-card img { width: 84px; height: 84px; }
  html[data-route] .puppet-crew .crew-card h3 { font-size: 26px; }
  html[data-route] .puppet-crew .crew-card ul { margin-block: 6px; }
  html[data-route] .puppet-crew .crew-contacts { gap: 6px; }
  html[data-route] .puppet-crew .crew-card a { padding: 5px 8px; font-size: 11px; }
}
@media (min-width: 641px) and (max-width: 760px), (min-width: 641px) and (max-height: 640px) {
  html[data-route] .puppet-crew { row-gap: 10px; }
  html[data-route] .puppet-crew > div > p:not(.section-tag) { margin-block: 5px; font-size: 13px; }
  html[data-route] .puppet-crew .crew-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  html[data-route] .puppet-crew .crew-card img { width: 64px; height: 64px; }
  html[data-route] .puppet-crew .crew-card h3 { font-size: 22px; }
  html[data-route] .puppet-crew .crew-card ul { margin-block: 4px; font-size: 10px; line-height: 1.45; }
  html[data-route] .founder-story { padding: 12px 16px; }
  html[data-route] .founder-story h3 { margin-bottom: 8px; font-size: 24px; }
  html[data-route] .founder-story p:not(.section-tag) { margin-bottom: 6px; font-size: 13px; line-height: 1.35; }
  html[data-route] .founder-story .founder-story-signoff { margin-top: 6px; padding-top: 6px; font-size: 16px; }
}
/* Narrow and short: the contact buttons get the full card width. */
@media (min-width: 641px) and (max-width: 760px) and (max-height: 760px) {
  html[data-route] .puppet-crew .crew-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 10px; row-gap: 2px; align-items: start; }
  html[data-route] .puppet-crew .crew-card > div { display: contents; }
  html[data-route] .puppet-crew .crew-card img { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  html[data-route] .puppet-crew .crew-card > div > :not(.crew-contacts) { grid-column: 2; margin-block: 0; }
  html[data-route] .puppet-crew .crew-contacts { grid-column: 1 / -1; flex-wrap: nowrap; margin-top: 6px; }
  html[data-route] .puppet-crew .crew-contacts a { flex: 1 1 auto; white-space: nowrap; text-align: center; }
  html[data-route] .puppet-crew { row-gap: 6px; }
  html[data-route] .founder-story { padding-block: 10px; }
  html[data-route] .founder-story .section-tag { margin-bottom: 4px; }
  html[data-route] .founder-story h3 { margin-bottom: 6px; font-size: 20px; }
  html[data-route] .founder-story p:not(.section-tag) { margin-bottom: 5px; font-size: 12.5px; line-height: 1.25; }
}

/* The dock: radio, offer feed, and Trollbox ride along on every page. */
html[data-route] footer.dock { --dock-line: #fff9e9; flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; height: var(--dock-h); padding: 0 clamp(10px, 2vw, 28px); border-top: 3px solid var(--ink); text-align: left; position: relative; z-index: 28; }
.dock-radio { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.dock-radio-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 3px solid var(--dock-line, #fff9e9); border-radius: 50%; background: #ffe500; color: #17251d; box-shadow: 3px 3px 0 #ff00a8; font: 16px/1 var(--marker); cursor: pointer; transform: rotate(-4deg); }
.dock-radio-toggle.playing { background: #8fff32; }
.dock-radio-toggle:hover:not(:disabled) { background: #ff00a8; color: #fff; }
.dock-radio-toggle:disabled { opacity: .55; cursor: wait; }
.dock-radio-toggle:focus-visible, .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher):focus-visible { outline: 3px dashed var(--dock-line, #fff9e9); outline-offset: 3px; }
.dock-radio-now { display: grid; min-width: 0; margin: 0; }
footer .dock-radio-now { font: 14px/1.15 var(--marker); text-align: left; }
footer .dock-radio-now small { color: #8fff32; font: 700 9px/1.3 var(--mono); letter-spacing: 1px; }
#dock-radio-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
footer .dock-note { flex: 0 1 auto; font: 13px/1.25 var(--marker); text-align: center; }
footer .dock-note small { font: 9px/1.4 var(--mono); letter-spacing: .5px; }
.dock-actions { display: flex; align-items: center; gap: 12px; flex: none; }

html[data-route] .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher) { position: static; flex: none; border-width: 3px; transform: rotate(-1.5deg); padding: 5px 11px; box-shadow: 3px 3px 0 #00a4ff; font-size: 14px; line-height: 1.15; white-space: nowrap; }
html[data-route] .dock .radio-playlist-launcher { border: 3px solid var(--dock-line, #fff9e9) !important; padding: 5px 11px !important; box-shadow: 3px 3px 0 #8fff32 !important; font: 14px/1.15 var(--marker) !important; }
html[data-route] .dock .offer-feed-launcher { box-shadow: 3px 3px 0 var(--pink); transform: rotate(1deg); }
html[data-route] .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher) span { font-size: 8px; }
html[data-route] .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher)[aria-expanded="true"] { display: block; transform: translate(2px, 2px); box-shadow: none !important; text-decoration: underline wavy 2px; text-underline-offset: 3px; }

html[data-route] :is(.radio-playlist-popup, .trollbox-popup, .offer-feed) { bottom: calc(var(--dock-h) + 12px); }
html[data-route] .offer-feed { max-height: calc(100dvh - var(--dock-h) - 36px); }
html[data-route] .trollbox-popup .messages { height: min(38vh, 310px); }

@media (max-width: 1279px) { footer .dock-note { display: none; } }

@media (max-height: 960px) and (min-width: 641px) {
  html[data-route] .gallery-intro p:last-child { display: none; }
}

@media (max-height: 820px) and (min-width: 641px) {
  :root { --dock-h: 50px; --view-pad-y: clamp(10px, 1.6vh, 14px); }
  html[data-route] header { height: 56px; }
  html[data-route] header .logo-smile { width: 32px; }
  html[data-route] .gallery { gap: 10px; }
  html[data-route] .gallery-intro h1 { font-size: clamp(22px, 2.2vw, 30px); }
  html[data-route] .gallery .puppet-tile .tile-note { padding-block: 3px; }
  html[data-route] .gallery .tile-offers-button { min-height: 32px; padding-block: 3px; }
  html[data-route] .gallery .puppet-tile .tile-rarity summary { min-height: 32px; padding-block: 6px; }
}

/* Shorter screens: the tile note goes on one line so two rows of Puppets still fit. */
@media (max-height: 860px) and (min-width: 641px) {
  html[data-route] .gallery .puppet-tile .tile-note { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html[data-route] .gallery .puppet-tile .tile-note :is(b, span) { display: inline; }
  html[data-route] .gallery .puppet-tile .tile-note b::after { content: " · "; }
}

@media (max-height: 860px) and (min-width: 641px) {
  html[data-route] .drawing-pad__intro, html[data-route] .picker-note, html[data-route] .tv-note, html[data-route] .radio-note { display: none; }
  html[data-route] .shed .drawing-pad__paper { height: min(26.4vh, (100cqw - 6px) * .8); }
  html[data-route] .lore-copy p { font-size: 16px; }
}

@media (max-height: 760px) and (min-width: 641px) {
  html[data-route] .shed .radio-dj { height: min(13vh, 100cqw); margin-block: 4px; }
  html[data-route] .shed-tool--picker .picker-art { height: min(26vh, 100cqw); }
  html[data-route] .drawing-pad__help, html[data-route] .drawing-pad__tools legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-route] .drawing-pad__actions { margin: 6px 0; }
  html[data-route] #collection-story .no-collab-note h3 { font-size: clamp(20px, 3.4vh, 26px); }
  html[data-route] #collection-story p:not(.section-tag) { font-size: 15px; margin-block: 8px; }
  html[data-route] .lore-copy p { font-size: 15px; }
}

@media (max-width: 900px) and (min-width: 641px) {
  html[data-route] .manifesto-poster { grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 2.4vh, 32px); }
  html[data-route] .manifesto-exhibit { grid-template-columns: minmax(0, 1fr) minmax(175px, .55fr); max-width: none; width: 100%; }
  html[data-route] .manifesto-poster__card { width: min(100%, 60vh, 100vh - 420px); }
}
/* Short screens: the museum plaque squeezes its facts into two columns. */
@media (max-height: 760px) and (min-width: 641px) {
  html[data-route] .manifesto-plaque { padding: 12px; }
  html[data-route] .manifesto-plaque p { margin-bottom: 6px; }
  html[data-route] .manifesto-plaque h3 { font-size: 20px; }
  html[data-route] .manifesto-plaque dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; margin: 10px 0; }
  html[data-route] .manifesto-plaque dl div { padding: 6px 0; }
  html[data-route] .manifesto-plaque dd { overflow-wrap: anywhere; }
}

@media (max-width: 1000px) and (min-width: 641px) {
  html[data-route] header .language-choice { margin-left: 0; }
  html[data-route] header { height: 66px; }
  html[data-route] .gallery-intro { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  html[data-route] .gallery .gallery-bottom { width: 100%; justify-content: space-between; }
  html[data-route] .wallet-puppets { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  html[data-route] .rarity-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; }
  html[data-route] .rarity-board .gallery-guides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; max-height: 26vh; }
  html[data-route] .rarity-board .gallery-guides > * { margin: 0; }
  html[data-route] .rarity-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html[data-route] .rarity-facts p { padding: 7px 9px; font-size: 11px; }
}
/* Short screens: the rarity intro and table shrink before anything spills. */
@media (min-width: 641px) and (max-height: 760px) {
  html[data-route] .rarity-main > p { font-size: 15px; line-height: 1.35; }
  html[data-route] .rarity-tools { margin: 8px 0; padding-block: 6px; }
  html[data-route] .rarity-facts { margin-bottom: 8px; }
  html[data-route] .rarity-table-wrap { min-height: 84px; }
}

/* Phones scroll inside a page; the dock stays put. */
@media (max-width: 640px) {
  :root { --dock-h: 56px; }
  html[data-route] header { flex-wrap: wrap; height: auto; min-height: 64px; gap: 8px; padding: 8px 12px; }
  html[data-route] header .menu-toggle { gap: 8px; padding-inline: 10px; }
  html[data-route] main > [data-view] { -webkit-overflow-scrolling: touch; }
  html[data-route] .gallery-intro { display: contents; }
  html[data-route] .gallery .gallery-bottom { order: 3; flex-wrap: wrap; justify-content: center; }
  html[data-route] #gallery-hint { white-space: normal; text-align: center; }
  html[data-route] .gallery-layout { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  html[data-route] .gallery .gallery-tools { max-height: none; overflow: visible; }
  html[data-route] .wallet-puppets, html[data-route] .rarity-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  html[data-route] .wallet-puppets-results { flex: none; }
  html[data-route] .rarity-table-wrap, html[data-route] .gallery-guides { max-height: none; overflow: visible; }
  html[data-route] .rarity-table-wrap { overflow: auto; }
  html[data-route] .rarity-board { display: block; }
  html[data-route] .shed { grid-template-rows: auto; }
  html[data-route] .shed .shed-tools { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  html[data-route] .shed-tool, html[data-route] .shed .drawing-pad { overflow: visible; }
  html[data-route] .about { overflow: auto; }
  html[data-route] .about > [data-panel] { flex: none; overflow: visible; }
  html[data-route] .lore { grid-template-rows: auto; }
  html[data-route] .lore-art { min-height: 300px; }
  .about-tabs { position: sticky; top: 0; z-index: 2; flex-wrap: nowrap; overflow-x: auto; }
  .about-tabs a { flex: none; min-height: 44px; font-size: 14px; }
  html[data-route] footer.dock { gap: 8px; padding: 0 10px; }
  .dock-radio { gap: 8px; }
  html[data-route] .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher) { padding: 5px 8px !important; font-size: 12px !important; }
  html[data-route] .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher) span { display: none; }
  .dock-actions { gap: 8px; }
}
@media (max-width: 480px) {
  .dock-radio-now { display: none; }
  html[data-route] .dock .radio-playlist-launcher { font-size: 0 !important; line-height: 0 !important; padding: 6px 10px !important; }
  html[data-route] .dock .radio-playlist-launcher::before { content: "♫" / ""; font: 18px/1 var(--marker); }
}
@media (max-width: 760px) and (min-width: 641px) {
  html[data-route] header { gap: 8px; padding-inline: 12px; }
  html[data-route] header .theme-toggle { padding-inline: 8px; }
  html[data-route] header .menu-toggle { position: relative; }
  html[data-route] header .menu-toggle [data-menu-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 400px) {
  html[data-route] header .menu-toggle { position: relative; }
  html[data-route] header .menu-toggle [data-menu-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-links a, .about-tabs a, .dock-radio-toggle, html[data-route] .dock :is(.radio-playlist-launcher, .offer-feed-launcher, .trollbox-launcher) { transform: none; }
}