/* DOS: 80x25 text mode on a black screen. EDIT.COM-style menu bar, double-line frame,
   centered section titles, drop shadows under buttons, QBasic-style
   help links (◄link►). */
@font-face {
  /* From the Ultimate Oldschool PC Font Pack (int10h.org), CC BY-SA 4.0.
     Put the .woff file in catalog/static/catalog/fonts/. Without it, the
     theme falls back to the next monospace font in the list. */
  font-family: "Web437 IBM VGA 8x16";
  src: url("fonts/Web437_IBM_VGA_8x16.342b88aacf9b.woff") format("woff");
  font-display: swap;
}
:root {
  --blue: #0000aa; --gray: #aaaaaa; --white: #ffffff; --black: #000000;
  --cyan: #00aaaa; --bcyan: #55ffff; --yellow: #ffff55;
  --vga: "Web437 IBM VGA 8x16", "Perfect DOS VGA 437", "Lucida Console", Consolas, "Courier New", monospace;
}
html { background: var(--black); }
body { color: var(--gray); font: 16px/1.25 var(--vga); }
::selection { background: var(--cyan); color: var(--black); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }

.desktop { padding: 0 0 8px; }
.window { max-width: none; }

/* Menu bar first, like EDIT.COM */
.menubar { order: -1; background: var(--gray); color: var(--black); padding: 0 1ch; gap: 0; min-height: 32px; }
.menubar > a { color: var(--black); padding: 4px 1ch; }
.menubar > a u { color: var(--white); text-decoration: none; }
.menubar > a:hover, .menubar > a:focus-visible, .menubar > a[aria-current="page"] { background: var(--black); color: var(--gray); outline: none; }
.menubar-search input { background: var(--blue); color: var(--white); }
.menubar-search .btn { box-shadow: none; padding: 2px 0; }

/* The title sits in the top line of the double frame */
.titlebar { order: 0; justify-content: center; margin: 16px 0 -10px; position: relative; z-index: 1; }
.ctl, .sizer { display: none; }
.titlebar-text { flex: none; background: var(--black); color: var(--white); font: 16px/1 var(--vga); padding: 0 1ch; }

.client { order: 1; border: 4px double var(--gray); margin: 0 1ch; padding: 24px 2ch 28px; }

.statusbar { order: 2; background: var(--cyan); color: var(--black); margin: 8px 0 0; padding: 2px 1ch; gap: 0; }
.panel + .panel::before { content: "│"; padding: 0 1ch; }
.panel a { color: var(--black); }

/* Controls */
.btn, .auth-page .client button { display: inline-block; font: 16px/1 var(--vga); color: var(--black); background: var(--gray); text-decoration: none;
  border: 0; padding: 4px 1ch; box-shadow: 8px 8px 0 #555555; cursor: pointer; }
.btn::before { content: "< "; } .btn::after { content: " >"; }
.btn:hover, .btn:focus-visible { color: var(--white); outline: none; }
.btn:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 #555555; }
.btn-default { color: var(--white); }
.filters .buttons { gap: 3ch; margin-top: 18px; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, select { font: 16px var(--vga); color: var(--white); background: var(--blue);
  border: 0; border-radius: 0; padding: 4px 1ch; min-height: 26px; }
select { appearance: none; padding-right: 4ch;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26'%3E%3Crect width='24' height='26' fill='%23aaaaaa'/%3E%3Cpath d='M7 10h10l-5 7z'/%3E%3C/svg%3E") no-repeat right center / 24px 100%, var(--blue); }
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; margin: 0; background: var(--blue);
  border: 2px solid var(--gray); }
input[type="checkbox"]:checked { background: var(--white); box-shadow: inset 0 0 0 3px var(--blue); }

/* Single-line boxes with centered titles, like DOS dialogs */
.group { border: 2px solid var(--gray); margin: 30px 0 0; padding: 22px 2ch 18px; }
.group > legend, .group > h2 { font: 16px/1 var(--vga); color: var(--white); background: var(--black); padding: 0 1ch; margin: 0 auto; }
.group > h2 { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.sunken { border: 2px solid var(--gray); margin: 0; }

/* QBasic-style help links */
.jump, .help a, .details dd a { color: var(--yellow); text-decoration: none; }
.jump::before, .details dd a::before { content: "◄"; }
.jump::after, .details dd a::after { content: "►"; }
.jump:hover, .details dd a:hover, .jump:focus-visible, .details dd a:focus-visible { background: var(--cyan); color: var(--black); outline: none; }

.tile { color: var(--white); }
.tile-art img { border: 2px solid var(--gray); }
.tile-noart { background: repeating-linear-gradient(0deg, var(--cyan) 0 2px, transparent 2px 6px); border: 2px solid var(--gray); }
.tile-year { color: var(--gray); }
.tile:hover .tile-label, .tile:focus-visible .tile-label { background: var(--cyan); color: var(--black); }

.empty { color: var(--white); max-width: 60ch; }
.details dt { color: var(--bcyan); }
.details dd { color: var(--white); }
.help { color: var(--gray); max-width: 72ch; line-height: 1.4; }
.help p { margin: 0 0 1.25em; } .help p:last-child { margin-bottom: 0; }
.shot figcaption, .game-cover figcaption, .covers figure { color: var(--bcyan); }
.covers img { border: 2px solid var(--gray); }
.aka td { color: var(--white); } .aka td + td { color: var(--bcyan); }
.collection-groups dt { color: var(--bcyan); margin-top: 6px; }
.versions { color: var(--white); }
.filters label, .filters span { color: var(--white); }

.result { color: var(--white); }
.result-meta { color: var(--gray); }
.result-aka { color: var(--bcyan); }
.result:hover, .result:focus-visible { background: var(--cyan); color: var(--black); }
.result:hover .result-meta, .result:hover .result-aka, .result:focus-visible .result-meta, .result:focus-visible .result-aka { color: var(--black); }

@media (max-width: 760px) {
  .client { margin: 0; border-left: 0; border-right: 0; padding: 22px 1ch 24px; }
}

/* Stories */
.editor { font: 16px/1.4 var(--vga); color: var(--white); background: var(--black); border: 2px solid var(--gray); }
.editor:focus-visible { outline: 2px solid var(--white); }
.tag-chip { color: var(--yellow); }
.tag-chip::before { content: "◄"; } .tag-chip::after { content: "►"; }
.tag-picker { background: var(--gray); color: var(--black); border: 4px double var(--black); box-shadow: 8px 8px 0 #555555; }
.tag-option[aria-selected="true"] { background: var(--black); color: var(--white); }
.message, .notice { color: var(--black); background: var(--cyan); border: 0; }
.field-error, .errorlist { color: #ff5555; }
.story-card-title { color: var(--yellow); }
.story-card-meta a { color: var(--bcyan); }
.menubar-link { color: var(--black); padding: 4px 1ch; }
.menubar-link:hover, .menubar-link:focus-visible { background: var(--black); color: var(--gray); outline: none; }
.story-byline, .story-license, .hint, .profile-stats dt { color: var(--bcyan); }
.profile-stats dd { color: var(--white); }
kbd { color: var(--white); }