/*
  CommodoreGames.Net archive theme layer
  Loaded after the legacy stylesheet and shared header styles.
  Detail/archive rules are deliberately scoped so emulator controls and
  account tools retain their existing behaviour.
*/
:root {
  --cgn-paper: #f2efe8;
  --cgn-paper-light: #fffdf8;
  --cgn-ink: #242a32;
  --cgn-muted: #626a73;
  --cgn-blue: #344b9a;
  --cgn-blue-deep: #263776;
  --cgn-rust: #a64b32;
  --cgn-line: #d8d1c5;
}

/* Shared masthead: keep the navigation compact, legible and useful on mobile. */
#topbar {
  min-height: 52px;
  height: auto;
  padding: 7px 22px;
  background: #263776;
  border-bottom: 3px solid var(--cgn-rust);
  box-shadow: 0 2px 8px rgba(27, 35, 54, .12);
  gap: 4px;
}
#topbar .cgn-sitename {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
#topbar .cgn-main-links { gap: 3px; }
#topbar .cgn-main-links a {
  color: #e1e6f2;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: .83rem;
}
#topbar .cgn-main-links a:hover,
#topbar .cgn-main-links a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.13);
}
#topbar .cgn-btn { border-color: rgba(255,255,255,.28); color: #fff !important; }
#topbar .cgn-btn:hover { background: rgba(255,255,255,.14); color: #fff !important; }
#main-content { background: var(--cgn-paper); }

/* A consistent, understated footer. */
footer {
  background: #202a3b;
  color: #f3f0e9;
  border-top: 4px solid var(--cgn-rust);
  padding: 38px 0 18px;
}
footer .container { max-width: 1160px; }
footer .footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
footer .footer-col h4 {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 13px;
}
footer .footer-col ul { list-style: none; margin: 0; padding: 0; gap: 8px; }
footer .footer-col a { color: #d2d8e2; text-decoration: none; }
footer .footer-col a:hover,
footer .footer-col a:focus-visible { color: #f0c579; text-decoration: underline; }
footer .footer-col p { color: #c5ccd7 !important; line-height: 1.6; }
footer .footer-col .logo { color: #fff; display: inline-block; font-weight: 700; text-decoration: none; }
footer .footer-col .logo span { color: #edbd70; }
footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 15px;
  color: #c5ccd7;
  font-size: .82rem;
}
footer .footer-bottom p { color: #c5ccd7 !important; margin: 0; }

/* Shared paper-and-ink treatment for individual game records. */
body.cgn-detail-page,
body.cgn-archive-page,
body.cgn-search-page {
  background: var(--cgn-paper);
  color: var(--cgn-ink);
  font-family: Arial, Helvetica, sans-serif;
}
body.cgn-detail-page #hero,
body.cgn-archive-page #hero,
body.cgn-search-page #hero {
  min-height: 0;
  padding: 25px 0 23px;
  background: #2d3f6b;
  background-image: none;
  background-attachment: scroll;
  border-top: 3px solid #c18a4c;
  margin: 0;
}
body.cgn-detail-page #hero:before,
body.cgn-archive-page #hero:before,
body.cgn-search-page #hero:before { display: none; }
body.cgn-detail-page #hero .container,
body.cgn-archive-page #hero .container,
body.cgn-search-page #hero .container {
  position: relative;
  z-index: 1;
  padding-top: 0;
}
body.cgn-detail-page #hero h1,
body.cgn-archive-page #hero h1,
body.cgn-search-page #hero h1 {
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-shadow: none;
}
body.cgn-detail-page #hero .container { text-align: left; }
body.cgn-detail-page #hero h1 { text-align: left !important; }
body.cgn-detail-page .breadcrumb { margin: 0; font-size: .86rem; }
body.cgn-detail-page .breadcrumb a { color: var(--cgn-blue); text-decoration: none; }
body.cgn-detail-page .breadcrumb a:hover { text-decoration: underline; }
body.cgn-detail-page .container { max-width: 1220px; }
body.cgn-detail-page .card,
body.cgn-archive-page .card,
body.cgn-search-page .card {
  background: var(--cgn-paper-light);
  border: 1px solid var(--cgn-line) !important;
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(34, 39, 46, .055);
  backdrop-filter: none;
}
body.cgn-detail-page .card:hover,
body.cgn-archive-page .card:hover,
body.cgn-search-page .card:hover { transform: none; box-shadow: 0 2px 7px rgba(34,39,46,.055); }
body.cgn-detail-page .card-header:not(.bg-warning):not(.bg-info):not(.bg-light),
body.cgn-archive-page .card-header:not(.bg-warning):not(.bg-info):not(.bg-light),
body.cgn-search-page .card-header:not(.bg-warning):not(.bg-info):not(.bg-light) {
  background: #293b67 !important;
  color: #fff !important;
  border: 0;
  border-bottom: 2px solid #b06a45;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
}
body.cgn-detail-page .card-header:after,
body.cgn-archive-page .card-header:after,
body.cgn-search-page .card-header:after { display: none; }
body.cgn-detail-page .card-body,
body.cgn-archive-page .card-body,
body.cgn-search-page .card-body { padding: 1.2rem; }
body.cgn-detail-page h2,
body.cgn-detail-page h3,
body.cgn-detail-page h4,
body.cgn-archive-page h2,
body.cgn-search-page h2 { color: #293b67; }
body.cgn-detail-page a { text-underline-offset: 2px; }
body.cgn-detail-page .btn,
body.cgn-archive-page .btn,
body.cgn-search-page .btn { border-radius: 5px; box-shadow: none; }
body.cgn-detail-page .btn-primary,
body.cgn-archive-page .btn-primary,
body.cgn-search-page .btn-primary {
  color: #fff;
  background: var(--cgn-blue);
  border-color: var(--cgn-blue);
}
body.cgn-detail-page .btn-primary:hover,
body.cgn-archive-page .btn-primary:hover,
body.cgn-search-page .btn-primary:hover { background: var(--cgn-blue-deep); border-color: var(--cgn-blue-deep); }
body.cgn-detail-page .game-info-card .card-img-top {
  border-radius: 4px;
  box-shadow: none;
}

/* PET archive listing already has its own compact layout; align it with the home page. */
body.cgn-pet-archive #hero { text-align: center; }
body.cgn-pet-archive #hero .container { text-align: center; }
body.cgn-pet-archive #hero h1 { text-align: center !important; }
body.cgn-pet-archive .pet-archive-intro { color: #e7eaf3; }
body.cgn-pet-archive .pet-archive-about { box-shadow: 0 2px 7px rgba(34,39,46,.045); }
body.cgn-pet-archive .game-list { max-height: 560px; }
body.cgn-pet-archive .box-title { background: #293b67; border-bottom: 2px solid #b06a45; }

/* PET emulator canvas scales down without changing its 4:2.5 aspect ratio. */
body.cgn-pet-detail .petvid,
body.cgn-pet-detail #petscreen {
  display: block;
  width: 100% !important;
  max-width: 640px;
  height: auto !important;
  aspect-ratio: 8 / 5;
  margin-left: auto;
  margin-right: auto;
}
body.cgn-pet-detail .shaded-box { background: #f8f5ee; border-color: var(--cgn-line); box-shadow: none; }

/* Search pages: restrained form panels, readable tables and result spacing. */
body.cgn-search-page .form-section,
body.cgn-search-page .search-panel {
  background: var(--cgn-paper-light);
  border: 1px solid var(--cgn-line);
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(34,39,46,.05);
}
body.cgn-search-page .form-control,
body.cgn-search-page .form-select { border-color: #cfc8bc; border-radius: 4px; }
body.cgn-search-page .form-control:focus,
body.cgn-search-page .form-select:focus { border-color: var(--cgn-blue); box-shadow: 0 0 0 3px rgba(52,75,154,.12); }
body.cgn-search-page table { background: var(--cgn-paper-light); }

/* Keyboard focus and motion preferences. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #c18a4c;
  outline-offset: 2px;
}
@media (max-width: 860px) {
  #topbar { min-height: 50px; flex-wrap: wrap; padding: 7px 12px 5px; }
  #topbar .cgn-main-links {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    margin: 2px 0 0;
    overflow-x: auto;
    max-width: 100%;
    padding: 2px 0 3px;
    scrollbar-width: thin;
  }
  #topbar .cgn-main-links a { padding: 7px 9px; }
  #topbar .cgn-user-links { margin-left: auto; }
  footer .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
}
@media (max-width: 520px) {
  body.cgn-detail-page #hero,
  body.cgn-archive-page #hero,
  body.cgn-search-page #hero { padding: 19px 0 17px; }
  body.cgn-detail-page #hero .container { text-align: left; }
  footer { padding-top: 30px; }
  footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  footer .footer-grid > .footer-col:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  #topbar *, footer *, body.cgn-detail-page *, body.cgn-archive-page *, body.cgn-search-page * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}