/* Archive components on top of ../service.css. Generators emit tables for grids;
   CSS turns them into responsive card grids without changing the markup. */
.service .browse-grid, .service .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; width:100%; margin:0 0 18px; border:0; }
.service .browse-grid tbody, .service .browse-grid tr, .service .gallery tbody, .service .gallery tr { display:contents; }
.service .browse-grid td, .service .gallery td { display:block; width:auto; padding:0; border:0; background:none; }
.service .browse-card, .service .gallery td { background:#fff; border:1px solid var(--line); padding:14px 16px; height:100%; }
.service .gallery td:empty { display:none; }
.service .browse-card h2, .service .gallery h3 { border:0; padding:0; margin:10px 0 6px; font-size:17px; color:var(--navy); }
.service .browse-card p, .service .gallery p { font-size:14px; margin:0 0 8px; }
.service .card-actions { border-top:1px solid #e1eaf3; padding-top:10px; margin:10px 0 0 !important; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.service .card-actions a { font-size:14px; }
.service .card-actions a.primary-link { padding:5px 12px; font-size:13px; }

/* Thumbnails: always show the whole picture inside a fixed frame. */
.service .thumb, .service .story-preview, .service .print-preview, .service .site-preview {
  display:flex; align-items:center; justify-content:center; height:190px; overflow:hidden; background:#f2f6fa; border:1px solid #e1eaf3; text-decoration:none; }
.service .print-preview { height:250px; }
.service .thumb img, .service .story-preview img, .service .print-preview img { max-width:100%; max-height:100%; width:auto; height:auto; }
.service .site-preview { align-items:flex-start; }
.service .site-preview img { width:100%; height:auto; max-height:none; }
.service .document-icon { display:block; padding:16px; background:#f2f6fa; font-size:14px; }

/* Directory and list tables */
.service .directory td { padding:12px 10px; }
.service .directory td:first-child { width:42%; font-weight:bold; }
.service .directory td:first-child .small { font-weight:normal; color:var(--muted); }
.service .data-table td.date { width:150px; color:var(--muted); font-size:13px; white-space:nowrap; }
.service .rank-dates a { display:inline-block; margin:0 10px 4px 0; font-size:13px; white-space:nowrap; }
.service .collection-list td:first-child, .service .asset-directory td:first-child { width:140px; text-align:center; }
.service .collection-list img, .service .asset-directory img { max-width:130px; max-height:100px; }
.service .paging { background:#f2f7fb; border:1px solid var(--line); padding:8px 12px; font-size:14px; }
.service .gallery-tabs { font-size:14px; }

/* Item pages: the description leads; the image is capped so details stay in view. */
.service .exhibit { text-align:center; background:#f4f8fb; border:1px solid #e1eaf3; padding:14px; margin:16px 0; }
.service .exhibit img { max-height:min(70vh,640px); width:auto; margin:0 auto 10px; display:block; }
.service .credit { font-size:13px; color:var(--muted); }
.service .file-details { font-size:13px; color:var(--muted); display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; }
.service .file-details dt { font-weight:bold; color:var(--ink); margin:0; }
.service .file-details dd { margin:0; }
.service .path, .service .hash { word-break:break-all; }
.service .hash { font-family:ui-monospace,"Courier New",monospace; font-size:12px; }
.service .source-text { background:#f7f9fb; border:1px solid #e1eaf3; padding:14px 16px; font-size:14px; max-height:520px; overflow:auto; }
.service .price { font-size:24px; font-weight:bold; color:#2f6a24; }

/* Home and story layouts */
.service .feature-story { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; background:#f2f7fb; border:1px solid var(--line); padding:18px; margin:0 0 24px; }
.service .feature-story h2 { border:0; padding:0; margin:6px 0; font-size:24px; }
.service .archive-about { font-size:13px; color:var(--muted); border-top:1px solid #e1eaf3; padding-top:14px; margin-top:24px !important; }
.service .game-directory { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.service .game-tile { display:block; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); }
.service .game-tile:hover { border-color:var(--cobalt); }
.service .game-tile img { display:block; width:100%; height:120px; object-fit:cover; background:#0a1b35; }
.service .game-tile span { display:block; padding:10px 12px; font-weight:bold; line-height:1.35; }
.service .game-tile small { display:block; font-weight:normal; color:var(--muted); }
.service .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:18px 0; }
.service .stats div { background:#f2f7fb; border:1px solid var(--line); padding:12px 14px; }
.service .stats b { display:block; font-size:26px; color:var(--navy); line-height:1.2; }

/* Game pages */
.service .game-preview, .service .game-art-window { display:block; position:relative; overflow:hidden; margin:0 auto 10px; background:#0a1b35; }
.service .game-preview img, .service .game-art-window img { position:absolute; max-width:none; max-height:none; }
.service .game-story-hero { background:#f2f7fb; border:1px solid var(--line); padding:16px; }
.service .game-opening { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:18px; align-items:center; }
.service .game-opening tbody, .service .game-opening tr { display:contents; }
.service .game-opening td { display:block; padding:0; border:0; }
.service .game-opening-copy { border-left:1px solid var(--line); padding-left:16px !important; }
.service .game-hook { font-size:22px; font-weight:bold; line-height:1.3; color:var(--navy); margin:6px 0 12px; }
.service .game-credit { font-size:13px; color:var(--muted); }
.service .art-caption { font-size:13px; color:var(--muted); text-align:center; margin:8px 0 0; }
.service .game-story-picture, .service .game-original-site, .service .card-scan-feature, .service .card-scan-collection, .service .card-scan-callout {
  background:#f7f9fb; border:1px solid var(--line); padding:16px; margin:20px 0; }
.service .game-original-site .site-preview { height:300px; max-width:520px; margin:0 auto 14px; }
.service .reading-copy { font-size:14px; }
.service .game-more-assets, .service .game-primary { margin:18px 0 !important; }
.service .card-scan-feature h2, .service .card-scan-collection h2 { margin:0 0 12px; }
.service .card-scan-image { display:block; text-align:center; margin:10px 0; }
.service .card-scan-image img { max-height:640px; width:auto; }
.service .fragment-art { height:200px; background:#f2f6fa; border:1px solid #e1eaf3; }
.service .site-viewer { display:block; width:100%; height:680px; border:1px solid var(--line); background:#fff; margin-bottom:12px; }
.service .viewer-tools { font-size:14px; }
.service #search-results p { padding:10px 0; margin:0; border-bottom:1px solid #e1eaf3; }
.service form.search-form { background:#f2f7fb; border:1px solid var(--line); padding:14px 16px; }
.service form.search-form input[type=text], .service form.search-form button[type=submit] { box-sizing:border-box; height:45px; vertical-align:middle; }

@media (max-width:720px) {
  .service .feature-story, .service .game-opening { grid-template-columns:1fr; }
  .service .game-opening-copy { border:0; padding:0 !important; }
  .service .directory td:first-child { width:auto; }
  .service .directory tr { display:flex; flex-direction:column; }
  .service .site-viewer { height:480px; }
}

/* Reading and narrow-screen layouts. Wide source tables scroll independently. */
.service .source-text { max-height:none; overflow:visible; }
.service .content, .service .game-story-hero, .service .game-opening td,
.service .browse-grid td, .service .gallery td { min-width:0; overflow-wrap:anywhere; }
.service .game-art-window { max-width:100%; }
.service .game-opening { table-layout:fixed; }
.service .table-wrap { max-width:100%; margin:14px 0; }
.service .table-wrap:focus-visible { outline:3px solid var(--focus); }
.service .table-wrap table { min-width:560px; }
.service .table-wrap caption { text-align:left; font-size:13px; padding:6px 0; }
.service .source-text p:empty { display:none; }
.service .unpublished-source { color:var(--muted); }
.service .unpublished-source:after { content:" (supporting file not published)"; font-size:12px; }
.service .ranking-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:18px; }
.service .ranking-filters label { flex:1 1 180px; }
.service .ranking-filters select, .service .ranking-filters input { max-width:100%; }
.service [hidden] { display:none !important; }
@media(max-width:720px) {
 .service .browse-grid, .service .gallery { grid-template-columns:minmax(0,1fr); }
 .service .file-details { grid-template-columns:minmax(0,1fr); }
 .service .file-details dd { margin-bottom:10px; }
 .service .game-opening, .service .game-opening tbody, .service .game-opening tr { display:block; }
 .service .game-opening-copy { margin-top:16px; }
 .service .game-story-hero { padding:12px; }
 .service .rank-dates a { white-space:normal; }
 .service .viewer-tools { display:flex; flex-wrap:wrap; gap:10px; }
}
.card-scan-feature,.card-scan-collection { margin:20px 0; padding:12px; background:#d0e4ee; border:3px double #edfaff; color:#14396b; font:12px/1.6 Arial,sans-serif; }
.card-scan-feature h2,.card-scan-collection h2 { margin:0 0 12px; padding:5px 8px; border:0; border-left:5px solid #94b357; color:white; background:#0878ad; font:bold 15px Arial,sans-serif; }
.card-scan-image { display:block; text-align:center; margin:10px 0; }
.card-scan-image img { display:block; max-width:100%; width:auto; height:auto; max-height:750px; margin:0 auto; border:0; }
.card-scan-feature p,.card-scan-collection p { margin:10px 0 0; }
body>.card-scan-feature { width:480px; margin:18px 15px; }
.card-scan-callout { padding:10px; background:#d0e4ee; border:3px double #edfaff; }