/* Original Playmates-era comic direction. Shared layout remains in theme.css. */
:root { --primary:#216c2b; --secondary:#173c29; --accent:#e94b25; --light:#fff5c9; --dark:#181917; --bg-card:#fffdf0; --card-bg:#fffdf0; --bg-filter:#fff9dc; --text-main:#202219; --text-secondary:#596044; --tag-bg:#f9e8a5; --tag-text:#34402d; --modal-details-bg:#fff4c8; --border-color:#202219; --ooze:#fbc83c; --comic-ink:#191d18; }
body.dark-mode { --primary:#a1d356; --secondary:#29482f; --accent:#ff8650; --light:#203328; --dark:#15231a; --bg-card:#2c4431; --card-bg:#2c4431; --bg-filter:#263d2d; --text-main:#fff6d7; --text-secondary:#d0d8b6; --tag-bg:#365237; --tag-text:#ecf0ca; --modal-details-bg:#243b29; --border-color:#111c13; --ooze:#fbc83c; }
body { background-color:var(--light); background-image:radial-gradient(#43502518 .7px,transparent .8px); background-size:6px 6px; }
.main-content { background:transparent; }
header { background:var(--bg-card); border-bottom:3px solid var(--comic-ink); }
.logo-icon { width:136px; height:62px; border-radius:2px; object-fit:cover; object-position:center; border:2px solid var(--comic-ink); background:#ff6b00; }
.logo span { font-weight:800; }.logo span b { font-weight:950; }.logo span small { font-size:11px; letter-spacing:1px; }
.sidebar { background:#19442c; border-right:3px solid var(--comic-ink); }
.rail-brand { color:#ffe259; }.rail-brand strong { font-family:'Arial Black',Impact,sans-serif; text-shadow:2px 2px #101d15; }
.sidebar .nav-item { color:#fff5d2; border:2px solid transparent; border-radius:3px; }
.sidebar .nav-item.active { background:#ffd347; color:#18281a; border:2px solid var(--comic-ink); box-shadow:3px 3px 0 var(--comic-ink); }
.sidebar .nav-item:hover:not(.active) { background:#34683a; color:#fff5d2; }
.rail-footer { color:#ffe259; }.rail-footer small { color:#e2e7bc; }.rail-footer strong { font-family:'Arial Black',Impact,sans-serif; }
.four-colors { height:9px; width:122px; border:2px solid var(--comic-ink); background:linear-gradient(90deg,#1e70c1 25%,#d9382c 25%,#d9382c 50%,#82519b 50%,#82519b 75%,#f08024 75%); }
.controls button,.lang-selector select { border:2px solid var(--comic-ink); border-radius:3px; }
.controls .join-btn { background:#fbc83c; color:#202219; border-color:var(--comic-ink); box-shadow:2px 2px 0 var(--comic-ink); }
.search-box { border:2px solid var(--comic-ink); border-radius:3px; box-shadow:3px 3px 0 var(--comic-ink); }
.search-box button { color:#fff9df; background:#216c2b; border-left:2px solid var(--comic-ink); font-weight:800; }
.archive-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.8fr); grid-template-rows:auto auto; gap:15px 24px; margin:24px 36px; padding:24px; border:3px solid var(--comic-ink); background-color:#f58b30; background-image:radial-gradient(#96360e30 .85px,transparent 1px); background-size:5px 5px; box-shadow:6px 6px 0 var(--comic-ink); color:#19261a; }
.intro-copy { grid-column:1; grid-row:1; min-width:0; }
.eyebrow { color:#222916; font-size:12px; letter-spacing:1.2px; font-weight:900; }.eyebrow span { background:#246530; }
.archive-intro h1 { font-size:clamp(30px,3.2vw,48px); letter-spacing:-1px; font-weight:950; line-height:1.18; color:#fff3c4; -webkit-text-stroke:1px #1a301a; text-shadow:3px 3px 0 #1a301a; margin:10px 0 12px; }
.archive-intro h1 span { display:block; color:#b8da54; -webkit-text-stroke:1px #1a301a; }
.intro-description { font-size:15px; line-height:1.6; color:#292e1c; font-weight:600; max-width:440px; }
.archive-stats { grid-column:1; grid-row:2; align-self:end; border:0; padding:0; gap:22px; }
.archive-stats strong { color:#23361c; font-family:'Arial Black',Impact,sans-serif; font-size:25px; letter-spacing:-1px; }
.archive-stats span { color:#333c23; font-size:12px; font-weight:650; }
.classic-comic { grid-column:2; grid-row:1 / span 2; width:100%; height:228px; object-fit:cover; object-position:center; border:3px solid var(--comic-ink); border-radius:2px; background:#ffd53f; box-shadow:3px 3px 0 var(--comic-ink); }
.character-filters { padding-top:8px; gap:10px; }
.character-filters button { border:2px solid var(--comic-ink); border-radius:3px; background:var(--bg-card); box-shadow:2px 2px 0 var(--comic-ink); min-height:42px; }
.character-filters button.active { background:#fbc83c; border-color:var(--comic-ink); color:#19251a; }
.character-filters button:hover { border-color:var(--comic-ink); transform:translateY(-2px); box-shadow:3px 4px 0 var(--comic-ink); }
.character-filters i { width:11px; height:11px; border:1px solid var(--comic-ink); border-radius:2px; }
.filters-content { border-top:2px solid var(--comic-ink); border-bottom:2px solid var(--comic-ink); }
.filter-group label { font-weight:750; }.filter-group select { border:2px solid var(--comic-ink); border-radius:3px; }
.collection-heading h2 { font-weight:900; }.collection-heading h2 span { font-weight:800; }
.toys-grid { gap:22px; }
.toy-card { border:3px solid var(--comic-ink); border-radius:4px; box-shadow:4px 4px 0 var(--comic-ink); }
.toy-card:hover { border-color:var(--comic-ink); transform:translateY(-4px) rotate(-.35deg); box-shadow:5px 8px 0 var(--comic-ink); }
.toy-image-wrap { background:#fffbee; border-bottom:3px solid var(--comic-ink); }
.toy-image { background:#fffbee; }
.toy-info { border-top:6px solid #37753a; }
.toy-card:nth-child(4n+1) .toy-info { border-top-color:#1e70c1; }
.toy-card:nth-child(4n+2) .toy-info { border-top-color:#d9382c; }
.toy-card:nth-child(4n+3) .toy-info { border-top-color:#82519b; }
.toy-card:nth-child(4n+4) .toy-info { border-top-color:#f08024; }
.toy-name { font-weight:850; }.toy-series-label { font-size:12px; }
.card-index { background:#ffdc57; color:#192519; border:2px solid var(--comic-ink); border-radius:0; font-size:12px; padding:1px 5px; }
.card-open { color:#fff5c9; background:#235e2f; border:2px solid var(--comic-ink); border-radius:3px; }
.toy-tags .tag { border:1px solid var(--comic-ink); border-radius:2px; font-size:12px; font-weight:650; }
.load-more-btn,.catalog-error button { background:#ffd447; border:2px solid var(--comic-ink); border-radius:3px; color:#1b281b; box-shadow:3px 3px 0 var(--comic-ink); font-weight:850; }
.modal-content { border:3px solid var(--comic-ink); border-radius:5px; box-shadow:8px 8px 0 #0f1a13; }
.modal-close { border:2px solid var(--comic-ink); border-radius:3px; }.section { background:var(--light); }
@media(min-width:1750px) { .archive-intro { max-width:1600px; margin-left:auto; margin-right:auto; } }
@media(max-width:1250px) { .archive-intro { margin:22px 24px; grid-template-columns:minmax(0,1fr) minmax(220px,.85fr); padding:20px; gap:12px 20px; }.archive-stats { gap:16px; }.archive-stats div { display:grid; gap:1px; }.classic-comic { height:235px; }.logo-icon { width:108px; height:52px; } }
@media(max-width:1000px) and (min-width:769px) { .archive-intro { grid-template-columns:1fr 1fr; }.archive-intro h1 { font-size:34px; }.archive-stats { grid-column:1 / -1; grid-row:2; display:flex; gap:28px; }.archive-stats div { display:flex; align-items:baseline; gap:6px; }.classic-comic { grid-row:1; height:185px; }.intro-description { font-size:14px; } }
@media(max-width:768px) {
 .sidebar,.sidebar.expanded { background:#19442c; border-top:3px solid var(--comic-ink); border-right:0; }.sidebar .nav-item { border-radius:3px; }.sidebar .nav-item.active { box-shadow:2px 2px 0 var(--comic-ink); }
 .logo-icon { width:100px; height:47px; }.logo { gap:9px; }.logo span { font-size:14px; }.logo span small { display:none; }.controls { margin-left:auto; }.header-content { gap:12px; }
 .archive-intro { margin:18px 16px 22px; padding:16px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:12px; box-shadow:4px 4px 0 var(--comic-ink); }.archive-intro h1 { font-size:29px; letter-spacing:-1px; margin:9px 0; -webkit-text-stroke:.7px #1a301a; text-shadow:2px 2px #1a301a; }.archive-intro h1 span { -webkit-text-stroke:.7px #1a301a; }.eyebrow { font-size:12px; letter-spacing:0; line-height:1.35; }.eyebrow span { display:none; }.intro-description { display:none; }.classic-comic { grid-row:1; height:145px; align-self:center; box-shadow:2px 2px 0 var(--comic-ink); }.archive-stats { grid-column:1 / -1; grid-row:2; display:flex; justify-content:space-between; border-top:2px solid #272b1b; padding-top:10px; gap:8px; }.archive-stats div { display:grid; gap:0; }.archive-stats strong { font-size:22px; }.archive-stats span { font-size:12px; }
 .character-filters { padding-top:2px; padding-bottom:18px; }.character-filters button { font-size:14px; min-height:40px; }.toys-grid { gap:15px; }.toy-card { border-width:2px; box-shadow:3px 3px 0 var(--comic-ink); }.toy-image-wrap { border-bottom-width:2px; }.toy-info { padding:10px; border-top-width:5px; }.toy-name { font-size:14px; }.card-index { font-size:12px; }.collection-heading h2 { font-size:18px; }
}
@media(max-width:360px) { .logo span { display:none; }.archive-intro { gap:10px; padding:12px; }.archive-intro h1 { font-size:25px; }.classic-comic { height:125px; } }
/* Source category lineups, kept uncropped so every figure remains visible. */
.category-overviews { margin:0 40px 28px; padding:22px; background:var(--light); border:3px solid var(--comic-ink); box-shadow:5px 5px 0 var(--comic-ink); border-radius:4px; }
.overview-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:18px; }.overview-heading h2 { margin:4px 0; font-size:26px; }.overview-heading p { margin:4px 0; }.overview-controls { display:flex; gap:8px; flex-wrap:wrap; }.overview-controls select { max-width:230px; border:2px solid var(--comic-ink); padding:9px; border-radius:3px; background:var(--light); color:var(--text-main); }
.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.overview-card { min-width:0; border:2px solid var(--comic-ink); background:var(--light); border-radius:3px; overflow:hidden; }.overview-image { display:flex; align-items:center; justify-content:center; height:210px; padding:10px; position:relative; background:#fffbee; color:#173b24; border-bottom:2px solid var(--comic-ink); }.overview-image img { width:100%; height:100%; object-fit:contain; }.overview-zoom { position:absolute; bottom:8px; right:8px; padding:3px 6px; font-size:11px; font-weight:700; background:#ffdc57; border:1px solid #182c20; }.overview-body { padding:14px; }.overview-meta { font-size:11px; opacity:.75; margin:0; }.overview-body h3 { font-size:16px; line-height:1.4; margin:8px 0 12px; min-height:44px; }.overview-body button,.overview-pagination button,.active-overview button { background:#ffd447; color:#172e1d; border:2px solid var(--comic-ink); border-radius:3px; padding:8px 12px; cursor:pointer; font-weight:750; }.overview-body button { width:100%; }.overview-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:18px; font-size:13px; }.overview-pagination button:disabled { opacity:.4; cursor:default; }.active-overview:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#ffdc57; color:#182c20; border:2px solid var(--comic-ink); padding:14px; margin-bottom:20px; scroll-margin-top:110px; }
@media(max-width:1000px) { .category-overviews { margin-left:24px; margin-right:24px; }.overview-heading { align-items:start; flex-direction:column; }.overview-image { height:175px; } }
@media(max-width:768px) { .category-overviews { margin:0 16px 24px; padding:14px; box-shadow:3px 3px 0 var(--comic-ink); }.overview-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; gap:12px; }.overview-card { flex:0 0 86%; scroll-snap-align:start; }.overview-image { height:190px; }.overview-heading h2 { font-size:22px; }.overview-controls { width:100%; }.overview-controls select { min-width:0; max-width:none; flex:1; width:40%; font-size:12px; }.overview-pagination { gap:8px; font-size:11px; }.overview-pagination button { padding:7px; font-size:11px; }.active-overview:not([hidden]) { align-items:start; flex-direction:column; } }

.active-overview:not([hidden]) { flex-direction:column; align-items:stretch; }.active-overview-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }.active-overview-photo { display:block; padding:12px; background:#fffbee; }.active-overview-photo img { display:block; width:100%; max-height:430px; object-fit:contain; }
@media(max-width:768px) { .active-overview-heading { align-items:start; flex-direction:column; }.active-overview-photo { padding:5px; } }
/* A playable CRT at the left of the original comic masthead. */
.archive-intro { grid-template-columns:minmax(300px,1.4fr) minmax(170px,.8fr) minmax(170px,.8fr); align-items:center; }
.retro-tv { grid-column:1; grid-row:1 / span 2; min-width:0; padding-top:24px; position:relative; }
.intro-copy,.archive-stats { grid-column:2; }.classic-comic { grid-column:3; }.archive-stats { flex-wrap:wrap; gap:12px; }
.tv-antenna { position:absolute; width:50px; height:16px; border:3px solid #191d18; border-radius:50% 50% 0 0; background:#343d32; top:11px; left:43%; }
.tv-antenna::before,.tv-antenna::after { content:''; position:absolute; bottom:10px; width:3px; height:32px; background:#191d18; transform-origin:bottom; }.tv-antenna::before { left:15px; transform:rotate(-47deg); }.tv-antenna::after { right:15px; transform:rotate(42deg); }
.tv-cabinet { display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:10px; padding:14px 12px 8px; border:3px solid #191d18; border-radius:22px 22px 16px 16px; background:linear-gradient(135deg,#617742,#35492d); box-shadow:5px 6px 0 #191d18,inset 0 3px 0 #b3b875; }
.tv-screen { position:relative; aspect-ratio:4 / 3; min-width:0; overflow:hidden; border:6px solid #242920; border-radius:24px / 18px; background:#111b14; box-shadow:0 0 0 2px #899471; }
.tv-screen iframe { display:block; width:100%; height:100%; border:0; background:#000; }.tv-screen [hidden] { display:none; }
.tv-start { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:10px; border:0; color:#e3eeab; background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px),radial-gradient(ellipse,#355f42,#101e18); cursor:pointer; font:600 11px/1.4 Arial,sans-serif; }.tv-start strong { font:900 clamp(19px,2vw,29px)/1 'Arial Black',Impact,sans-serif; color:#d6e584; text-shadow:2px 2px #101b13; letter-spacing:-1px; }.tv-channel { font:700 10px monospace; letter-spacing:3px; }.tv-play { display:grid; place-items:center; width:37px; height:37px; border:2px solid #151f16; border-radius:50%; background:#ffcf49; color:#1b2c20; font-size:16px; padding-left:2px; }
.tv-panel { display:flex; flex-direction:column; align-items:center; gap:15px; padding-top:6px; }.tv-dial { width:33px; height:33px; border:3px solid #161e16; border-radius:50%; background:linear-gradient(70deg,#bdad76 45%,#253223 47% 55%,#bdad76 57%); box-shadow:2px 2px #1b251c; }.tv-speaker { flex:1; min-height:35px; width:28px; background:repeating-linear-gradient(0deg,#1b271b 0 3px,transparent 3px 6px); }.tv-power { display:flex; flex-direction:column; gap:4px; align-items:center; color:#fff5c9; border:0; background:transparent; font-size:10px; cursor:pointer; padding:3px; }.tv-power i { width:18px; height:18px; background:#cf4b30; border:2px solid #171f17; border-radius:50%; box-shadow:1px 2px #152116; }.is-on .tv-power i { background:#b9e764; box-shadow:0 0 6px #b9e764; }.tv-brand { grid-column:1 / -1; display:flex; justify-content:space-between; font:800 9px monospace; letter-spacing:1px; color:#f2e5ac; }.tv-caption { display:flex; justify-content:space-between; gap:8px; margin:13px 2px 0; font-size:11px; font-weight:700; }.tv-caption a { color:#172d1c; text-underline-offset:3px; }.retro-tv button:focus-visible,.tv-caption a:focus-visible { outline:3px solid #fff1ab; outline-offset:3px; }
@media(max-width:1150px) and (min-width:769px) { .archive-intro { grid-template-columns:minmax(280px,1.4fr) minmax(190px,1fr); }.retro-tv { grid-column:1; grid-row:1 / span 3; }.intro-copy { grid-column:2; grid-row:1; }.classic-comic { grid-column:2; grid-row:2; height:130px; }.archive-stats { grid-column:2; grid-row:3; display:flex; gap:10px; }.archive-stats div { display:grid; }.archive-stats strong { font-size:20px; } }
@media(max-width:768px) { .archive-intro { grid-template-columns:1fr 1fr; }.retro-tv { grid-column:1 / -1; grid-row:1; width:100%; max-width:480px; justify-self:center; margin-bottom:10px; }.intro-copy { grid-column:1; grid-row:2; }.classic-comic { grid-column:2; grid-row:2; }.archive-stats { grid-column:1 / -1; grid-row:3; }.tv-start strong { font-size:28px; }.tv-screen { aspect-ratio:4 / 3; }.tv-caption { font-size:12px; } }
/* Search previews stay in the document flow directly beneath the search field. */
.search-preview { margin-top:12px; padding:16px; background:var(--bg-card); color:var(--text-main); border:2px solid var(--comic-ink); box-shadow:4px 4px 0 var(--comic-ink); max-height:60vh; overflow:auto; }
.search-preview[hidden] { display:none; }.preview-status { margin:0 0 12px; font-size:13px; font-weight:700; }.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.preview-item { display:flex; align-items:center; gap:10px; text-align:left; border:1px solid var(--comic-ink); background:var(--light); color:var(--text-main); padding:8px; min-width:0; cursor:pointer; }.preview-item img { width:60px; height:64px; object-fit:contain; background:#fffbee; flex-shrink:0; }.preview-item span { min-width:0; }.preview-item strong { display:block; font-size:13px; line-height:1.4; }.preview-item small { display:block; font-size:11px; margin-top:5px; opacity:.75; }.preview-actions { display:flex; justify-content:space-between; gap:12px; margin-top:12px; }.preview-actions button,.search-preview>button { border:2px solid var(--comic-ink); background:#ffd447; color:#172e1d; padding:8px 12px; font-weight:700; cursor:pointer; }.preview-item:hover { background:var(--tag-bg); }.preview-item:focus-visible,.preview-actions button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }.container:has(#toysGrid) { scroll-margin-top:24px; }
/* Two rows of complete lineup photographs, browsable by swipe or arrow controls. */
.overview-grid { display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc((100% - 36px)/3); overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; padding:4px 4px 12px; scrollbar-width:thin; }
.overview-card { scroll-snap-align:start; box-shadow:2px 3px 0 var(--comic-ink); }.overview-image { height:170px; }.overview-body { padding:10px; }.overview-body h3 { font-size:14px; min-height:40px; margin:6px 0 8px; }.overview-body button { font-size:12px; }.overview-grid:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:1000px) { .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.overview-grid { grid-auto-columns:calc((100% - 18px)/2); } }
@media(max-width:768px) { .search-preview { padding:12px; }.preview-grid { grid-template-columns:1fr; }.preview-item img { width:52px; height:52px; }.overview-grid { display:grid; grid-template-rows:repeat(2,auto); grid-auto-columns:85%; gap:12px; }.overview-image { height:170px; }.preview-actions button { font-size:12px; } }

#toyModal [hidden] { display:none !important; }
#modalSource { display:inline-block; margin-top:16px; color:var(--primary); font-weight:700; text-underline-offset:3px; }