/* Theme: Dial-Up '95 — way back: MS-DOS text mode, Windows 3.1 windows, a Netscape status bar and a screaming 14.4k modem */
@font-face { font-family: "VT323"; src: url(/static/fonts/vt323.woff2?v=1) format("woff2"); font-display: swap; }   /* SIL OFL 1.1, see /static/fonts/OFL.txt */

:root {
  /* CGA / text-mode palette */
  --c-black: #000; --c-blue: #0000aa; --c-lblue: #5555ff; --c-cyan: #00aaaa; --c-lcyan: #55ffff; --c-grey: #aaaaaa; --c-dgrey: #555555;
  --c-white: #fff; --c-yellow: #ffff55; --c-green: #00aa00; --c-lgreen: #55ff55; --c-red: #aa0000; --c-lred: #ff5555; --c-magenta: #aa00aa; --c-brown: #aa5500;
  --bg: var(--c-blue); --fg: var(--c-grey); --muted: #a0a0e8; --card: var(--c-blue); --line: var(--c-lcyan); --field: #000;
  --accent: var(--c-lcyan); --accent-fg: #000; --accent-soft: #003a6a; --danger: var(--c-lred); --ok: var(--c-lgreen);
  --radius: 0; --radius-s: 0; --shadow: none;
  --font: "VT323", "Lucida Console", "Courier New", monospace; --font-head: var(--font);
  --win: "MS Sans Serif", "Microsoft Sans Serif", Arial, Helvetica, sans-serif;
  --serif: "Times New Roman", Times, "Liberation Serif", serif;
  color-scheme: dark;
}
html { background: #000; scrollbar-color: var(--c-cyan) var(--c-blue); }
body {
  font-size: 20px; line-height: 1.25; color: var(--c-grey); padding-bottom: 30px;
  background-color: var(--c-blue);
  background-image: radial-gradient(rgb(85 85 255 / .5) 1px, transparent 1.3px);
  background-size: 4px 4px;
}
/* CRT: scanlines + a little vignette over everything (dialogs sit above it in the top layer) */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: repeating-linear-gradient(rgb(0 0 0 / .14) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / .38));
}
::selection { background: var(--c-cyan); color: #000; }
a { color: var(--c-lcyan); }
:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 1px; }
@keyframes dl-blink { 50% { visibility: hidden; } }
@keyframes dl-boot { from { height: 0; } }
@keyframes dl-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- menu bar (EDIT.COM look, Netscape's menus) ---------- */
.menubar.deco { display: flex; position: sticky; top: 0; z-index: 20; background: var(--c-grey); color: #000; padding: 0 6px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 20px; line-height: 26px; }
.menubar span { padding: 0 9px; cursor: default; }
.menubar span::first-letter { color: var(--c-red); }
.menubar span:last-child { margin-left: auto; }

/* ---------- Netscape status bar with a 1997 status-bar scroller ---------- */
.ticker { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 28px; background: #c0c0c0; color: #000;
  border-top: 2px solid #fff; box-shadow: 0 -1px 0 #808080; overflow: hidden; white-space: nowrap; font: 13px/26px var(--win); }
.ticker::before { content: "🔑 Document: Done"; flex: none; position: relative; z-index: 1; padding: 0 12px; background: #c0c0c0; border-right: 2px groove #fff; }
.ticker::after { content: "14.4 kbps  ▓▓▓▓▓░░"; position: absolute; right: 0; top: 0; bottom: 0; padding: 0 10px; background: #c0c0c0; border-left: 2px groove #fff; }
.ticker-track { display: inline-flex; padding-left: 14px; animation: dl-ticker 45s linear infinite; }
.ticker-track span { padding-right: 90px; }

/* ---------- header: a DOS prompt that dials in ---------- */
.site-header { max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 16px auto 10px; padding: 0; background: #000; border: 4px double var(--c-grey); box-shadow: 10px 10px 0 #000; }
.header-inner { padding: 10px 16px 16px; gap: 10px 18px; }
.header-inner::before {
  content: "BudgetBIOS v1.0   (C) 1995 Budget Megatrends Inc.   640K RAM OK\A Mouse driver loaded.  Sound Blaster 16 at A220 I5 D1\A ATDT 555-0199 ... *beee-doo-dee* *KSSHHHHHHH* ... CONNECT 14400\A C:\\BUDGET> NETSCAPE.EXE budgetgames.top";
  flex-basis: 100%; display: block; white-space: pre; overflow: hidden; font-size: 18px; line-height: 1.3; height: 5.2em; color: var(--c-grey);
  animation: dl-boot 2.2s steps(4, end) both;
}
.brand { color: var(--c-yellow); gap: 14px; }
.logo { width: 44px; height: 44px; image-rendering: pixelated; }
.brand-name { font: 60px/0.9 var(--font); color: var(--c-yellow); text-transform: uppercase; letter-spacing: 2px; text-shadow: 4px 4px 0 var(--c-red); background: none; }
.tagline { color: var(--c-lgreen); font-size: 22px; }
.tagline::before { content: "> "; }
.tagline::after { content: "_"; animation: dl-blink 1s steps(1) infinite; }

/* ---------- buttons: Turbo Vision green with a hard black shadow ---------- */
.btn { border: 0; border-radius: 0; background: var(--c-green); color: #000; font: 20px/1 var(--font); font-weight: 400; min-height: 34px; padding: 5px 14px 4px; box-shadow: 6px 6px 0 #000; }
.btn:hover { background: var(--c-lgreen); border: 0; filter: none; }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #000; }
.btn-primary { background: var(--c-green); color: var(--c-white); }
.btn-primary::before { content: "<\00a0"; }
.btn-primary::after { content: "\00a0>"; }
.btn-primary:hover { color: #000; }
.linkish { color: var(--c-lcyan); }

/* ---------- fields: black text-mode inputs ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  border: 2px solid var(--c-cyan); border-radius: 0; background: #000; color: var(--c-lgreen); font: 20px/1.2 var(--font); caret-color: var(--c-lgreen); padding: 6px 10px;
}
::placeholder { color: #2d8a2d; opacity: 1; }

/* ---------- toolbar + tags ---------- */
.toolbar { max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 0 auto 6px; padding: 8px; background: var(--c-blue); border: 4px double var(--c-lcyan); align-items: center; }
.toolbar .search { display: flex; align-items: center; gap: 8px; }
.toolbar .search::before { content: "C:\\GAMES> FIND"; color: var(--c-white); white-space: nowrap; }
.tagbar { padding-top: 6px; padding-bottom: 8px; gap: 2px; }
.chip { border: 0; border-radius: 0; background: transparent; color: var(--c-lcyan); font: 20px/1 var(--font); padding: 3px 5px; }
.chip::before { content: "["; color: var(--c-grey); }
.chip::after { content: "]"; color: var(--c-grey); }
.chip:hover { background: var(--c-cyan); color: #000; }
.chip.active, .chip[aria-pressed=true] { background: var(--c-lcyan); color: #000; border: 0; }
.chip.active::before, .chip.active::after, .chip[aria-pressed=true]::before, .chip[aria-pressed=true]::after { color: #000; }
.result-line { display: inline-block; background: #000; color: var(--c-white); padding: 1px 8px; margin: 8px 0 18px; font-size: 20px; }
.result-line::before { content: "Directory of C:\\GAMES\\   "; color: var(--c-grey); }

/* ---------- game cards: Norton Commander panels ---------- */
.grid { gap: 26px 18px; }
.card-link { background: var(--c-blue); color: var(--c-grey); border: 4px double var(--c-lcyan); border-radius: 0; box-shadow: 8px 8px 0 rgb(0 0 0 / .85); padding: 12px 8px 8px; overflow: visible; transition: none; }
.card-link:hover { transform: none; border-color: var(--c-yellow); box-shadow: 8px 8px 0 #000; }
.card-wintitle { display: flex; justify-content: center; align-self: center; max-width: calc(100% - 16px); margin: -26px auto 8px; padding: 0 8px; background: var(--c-blue); color: var(--c-white); font-size: 20px; line-height: 1.2; }
.card-wintitle .win-title-text { font-weight: 400; }
.card-wintitle .tb-btns { display: none; }
.card-link:hover .card-wintitle, .card-link:focus-visible .card-wintitle { background: var(--c-cyan); color: #000; }
.card.featured .card-link { border-color: var(--c-yellow); }
.card.featured .card-wintitle::before { content: "★\00a0"; color: var(--c-yellow); }
.card-link:hover .card-wintitle::before { color: #000; }
.card-title { display: none; }
.thumb { background: #000; border: 2px solid var(--c-grey); overflow: hidden; }
.thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgb(0 0 0 / .3) 0 1px, transparent 1px 3px); }
.thumb > img { filter: contrast(1.15) saturate(1.3); image-rendering: pixelated; }
.ph { background: repeating-conic-gradient(hsl(var(--h) 70% 38%) 0 25%, #000 0 50%) 0 0 / 4px 4px; font: 72px/1 var(--font); color: var(--c-yellow); text-shadow: 4px 4px 0 #000; }
.card-body { padding: 8px 2px 2px; gap: 6px; }
.card-desc { color: var(--c-grey); font-size: 19px; line-height: 1.1; }
.card-meta { color: var(--c-white); border-top: 2px solid var(--c-cyan); padding-top: 5px; font-size: 18px; }
.card-tags .tag { color: var(--c-lcyan); }
.sticker { top: 6px; left: 6px; z-index: 2; border-radius: 0; background: var(--c-red); color: var(--c-yellow); font: 18px/1 var(--font); letter-spacing: 1px; padding: 3px 6px 2px; box-shadow: 3px 3px 0 #000; }
.sticker.kind-hosted { background: var(--c-lgreen); color: #000; animation: dl-blink 1.2s steps(1) infinite; }
.sticker.kind-youtube, .sticker.kind-itch { background: var(--c-lred); color: var(--c-white); }
.sticker.kind-reddit { background: var(--c-brown); color: var(--c-white); }
.sticker.kind-steam, .sticker.kind-github, .sticker.kind-git { background: var(--c-cyan); color: #000; }
.sticker.kind-gog { background: var(--c-magenta); color: var(--c-white); }
.sticker.inline { animation: none; box-shadow: 2px 2px 0 #000; }

/* ---------- footer ---------- */
.site-footer { border-top: 0; color: var(--c-grey); font-size: 18px; padding-bottom: 50px; }
.counter { color: var(--c-white); font-size: 20px; }
.odometer { display: inline-block; background: #000; color: var(--c-lgreen); border: 2px solid var(--c-grey); padding: 0 6px; letter-spacing: 3px; font-size: 26px; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; }
.b88 { display: inline-grid; place-items: center; width: 88px; height: 31px; border: 1px solid #000; font-size: 0; box-shadow: 3px 3px 0 #000; }
.b88::before { font: bold 10px/1.1 Verdana, Arial, sans-serif; white-space: pre; text-align: center; }
.b-notepad { background: #000080; }
.b-notepad::before { content: "Netscape\A NOW!"; color: var(--c-yellow); }
.b-res { background: #000; }
.b-res::before { content: "Best viewed at\A 640×480"; color: var(--c-lgreen); }
.b-free { background: var(--c-yellow); }
.b-free::before { content: "BudgetOnline\A Keyword: GAMES"; color: #000080; }
.b-uc { background: repeating-linear-gradient(-45deg, var(--c-yellow) 0 7px, #000 7px 14px); }
.b-uc::before { content: "UNDER\A CONSTRUCTION"; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.fineprint a { color: var(--c-lcyan); }

/* ---------- windows: Windows 3.1 frame, Netscape page inside ---------- */
.dialog, .notfound {
  --fg: #000; --muted: #404040; --card: #c0c0c0; --line: #808080; --field: #fff; --bg: #c0c0c0;
  --accent: #0000ee; --accent-fg: #fff; --accent-soft: #c8c8ff; --danger: #a00000; --ok: #006000;
  --font: var(--serif);
  color-scheme: light; font: 17px/1.35 var(--serif); background: #c0c0c0; color: #000;
  border: 4px solid #c0c0c0; border-radius: 0; outline: 1px solid #000; padding: 0; box-shadow: 10px 10px 0 rgb(0 0 0 / .75);
}
.dialog::backdrop { background: repeating-conic-gradient(rgb(0 0 0 / .6) 0 25%, rgb(0 0 0 / .3) 0 50%) 0 0 / 4px 4px; backdrop-filter: none; }
.dialog[open] { animation: none; }
.dialog > .win-title, .notfound > .win-title {
  position: relative; display: flex; justify-content: center; gap: 0; min-height: 24px; padding: 0; background: #000080; color: #fff;
  border: 1px solid #000; font: bold 14px/22px var(--win);
}
.dialog > .win-title .win-title-text, .notfound .win-title-text { flex: 1; text-align: center; padding: 0 56px 0 8px; }
.dialog > .win-title::after { content: "▼ ▲"; position: absolute; right: 0; top: 0; bottom: 0; padding: 0 5px; background: #c0c0c0; color: #000; border-left: 1px solid #000; font: 10px/22px var(--win); letter-spacing: 3px; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; }
#detail .win-title-text::before { content: "Netscape - ["; }
#detail .win-title-text::after { content: "]"; }
#add .win-title-text::before { content: "BudgetOnline - "; }
/* Windows 3.1 control-menu box on the left doubles as the close button */
.win-close { order: -1; position: relative; width: 26px; height: 22px; border: 0; border-right: 1px solid #000; border-radius: 0; background: #c0c0c0; font-size: 0; color: transparent; }
.win-close::before { content: ''; position: absolute; left: 6px; right: 6px; top: 9px; height: 3px; background: #fff; border: 1px solid #000; box-shadow: 1px 1px 0 #808080; }
.win-close:hover { background: #d8d8d8; }
.win-body { background: #c0c0c0; border: 1px solid #000; border-top: 0; padding: 14px 16px; }
#detail .win-body::before {
  content: "◄ Back    ► Forward    ⌂ Home    ↻ Reload    ▣ Images    ✎ Print    ✖ Stop";
  display: block; margin: -14px -16px 14px; padding: 6px 12px; border-bottom: 2px groove #f4f4f4; font: 13px var(--win); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#add .win-body::before {
  content: "Welcome!  You've got games.";
  display: block; margin: -14px -16px 16px; padding: 12px 16px; background: linear-gradient(90deg, #002e8a, #2f6fd6 60%, #6fb0ff);
  color: #fff; font: italic bold 28px/1.1 var(--serif); text-shadow: 2px 2px 0 #001a4d; border-bottom: 3px solid #ffd400;
}
.dialog :focus-visible, .notfound :focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.dialog a { color: #0000ee; }
.dialog a:visited { color: #551a8b; }
.dialog .detail-title { font: bold 34px/1.15 var(--serif); color: #000; text-shadow: none; margin-top: 2px; }
.dialog .detail-sub, .dialog .detail-kind { color: #000; font-style: italic; }
.dialog .hero { border-radius: 0; background: #000; border: 2px solid #0000ee; }
.dialog .hero > img { image-rendering: auto; }
.dialog .gal { border: 2px solid #0000ee; border-radius: 0; }
.dialog .gal.active { border-color: #551a8b; outline: 2px solid #000; }
.dialog .desc { background: transparent; padding: 0; font-size: 18px; }
.dialog .comments { border-top: 2px groove #f4f4f4; }
.dialog .comments-title { font: bold 24px/1.2 var(--serif); }
.dialog .comments-title::before { content: "📖 Guestbook — "; }
.dialog .comment { background: transparent; border-radius: 0; padding: 6px 0 8px; border-bottom: 2px groove #f4f4f4; }
.dialog .comment-name { color: #000; }
.dialog .comment-form, .dialog .human-check { background: #c0c0c0; border: 2px groove #f4f4f4; border-radius: 0; }
.dialog .hc-pic, .dialog .img-opt { border: 2px inset #e8e8e8; border-radius: 0; }
.dialog .img-opt[aria-pressed=true] { outline: 2px solid #0000ee; box-shadow: none; }
.dialog .step-details { border-top: 2px groove #f4f4f4; }
.dialog .status-line { color: #000; font: 15px "Courier New", monospace; }
.dialog .chip, .dialog .chip.active { background: none; border: 0; color: #0000ee; text-decoration: underline; font: 17px var(--serif); padding: 0 4px; }
.dialog .chip::before, .dialog .chip::after { content: none; }
.dialog .chip:hover { background: none; color: #ff0000; }
.dialog input:not([type=checkbox]):not([type=radio]):not([type=file]), .dialog select, .dialog textarea {
  background: #fff; color: #000; border: 2px inset #e8e8e8; font: 16px "Courier New", monospace; caret-color: auto;
}
.dialog ::placeholder { color: #7a7a7a; }
/* Windows 3.1 push buttons inside windows */
.dialog .btn, .notfound .btn { background: #c0c0c0; color: #000; font: bold 14px/1 var(--win); border: 1px solid #000; border-radius: 3px;
  box-shadow: inset -2px -2px #808080, inset 2px 2px #fff; min-height: 32px; padding: 6px 14px; }
.dialog .btn:hover, .notfound .btn:hover { background: #c8c8c8; border: 1px solid #000; }
.dialog .btn:active, .notfound .btn:active { transform: none; box-shadow: inset 2px 2px #808080; }
.dialog .btn-primary, .notfound .btn-primary { border-width: 2px; }
.dialog .btn-primary::before, .dialog .btn-primary::after, .notfound .btn-primary::before, .notfound .btn-primary::after { content: none; }
.dialog .play-here { font-size: 18px; }
.dialog .game-bar { background: #c0c0c0; border-top: 1px solid #000; }

/* ---------- AIM-style pop-up instead of a toast ---------- */
.toast { background: #fff; color: #000; border: 1px solid #000; border-radius: 0; padding: 0 14px 10px; min-width: 260px; font: 16px var(--serif); box-shadow: 6px 6px 0 rgb(0 0 0 / .7); }
.toast::before { content: "Instant Message from BudgetBot"; display: block; margin: 0 -14px 8px; padding: 0 8px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: bold 13px/22px var(--win); }

/* ---------- 404 ---------- */
.notfound { max-width: 480px; }
.notfound .big { font: 72px/1 var(--font); color: #000; }
.notfound .big::after { content: "\A Bad command or file name"; white-space: pre; font-size: 26px; }

@media (max-width: 640px) {
  body { font-size: 18px; }
  .site-header, .toolbar { margin-left: 8px; margin-right: 8px; box-shadow: 6px 6px 0 #000; }
  .header-inner::before { content: "BudgetBIOS v1.0  640K RAM OK\A Mouse driver loaded.\A ATDT 555-0199 *KSSHHH* CONNECT 14400\A C:\\BUDGET> NETSCAPE.EXE"; font-size: 15px; }
  .brand-name { font-size: 42px; }
  .logo { width: 36px; height: 36px; }
  .tagline { font-size: 19px; }
  .toolbar .search::before { content: "FIND>"; }
  .grid { gap: 24px 12px; }
  .card-link { box-shadow: 5px 5px 0 #000; padding: 10px 6px 6px; }
  .card-wintitle { font-size: 18px; margin-top: -23px; }
  .card-desc { font-size: 17px; }
  .sticker { font-size: 15px; }
  .ph { font-size: 52px; }
  .ticker::after { display: none; }
  .dialog { outline: 0; box-shadow: none; }
  .dialog > .win-title { min-height: 30px; line-height: 28px; }
  .win-close { width: 34px; height: 28px; }
  .win-close::before { top: 12px; left: 9px; right: 9px; }
  .dialog > .win-title::after { line-height: 28px; }
  #add .win-body::before { font-size: 23px; }
}

/* custom css */