/* 1990s GemCites Neon Vaporwave Stylesheet */
* { box-sizing: border-box; }
body { margin: 0; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 14px; }
a { color: #00ffff; text-decoration: underline; }
a:visited { color: #ff00ff; }
.browser-window { max-width: 1200px; margin: 0 auto; background: #110726; border: 3px outset #c0c0c0; box-shadow: 0 0 25px rgba(255, 0, 127, 0.35); }
.titlebar { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; font-family: 'MS Sans Serif', Arial, sans-serif; font-weight: bold; font-size: 13px; }
.titlebar-controls { display: flex; gap: 3px; }
.win-btn { background: #c0c0c0; border: 2px outset #ffffff; color: #000; font-size: 12px; font-weight: bold; width: 20px; height: 20px; cursor: pointer; line-height: 14px; padding: 0; }
.toolbar { background: #c0c0c0; border-bottom: 2px solid #808080; padding: 6px; color: #000; font-family: 'MS Sans Serif', Arial, sans-serif; }
.nav-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tb-btn { background: #c0c0c0; border: 2px outset #ffffff; color: #000000; padding: 3px 8px; font-size: 12px; font-weight: bold; cursor: pointer; }
.location-bar { display: flex; align-items: center; gap: 6px; background: #c0c0c0; padding: 2px; border-top: 1px solid #808080; }
.location-label { font-size: 12px; font-weight: bold; }
.url-input { flex: 1; background: #ffffff; border: 2px inset #808080; padding: 2px 6px; font-family: monospace; font-size: 12px; color: #000000; }
.marquee-container { background: #000000; color: #ffe600; border-top: 2px solid #ff007f; border-bottom: 2px solid #00f0ff; padding: 4px 0; overflow: hidden; white-space: nowrap; }
.marquee-text { display: inline-block; font-weight: bold; font-size: 13px; animation: marquee 20s linear infinite; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.content-table { display: flex; flex-direction: row; }
@media (max-width: 800px) { .content-table { flex-direction: column; } }
.sidebar { width: 250px; min-width: 250px; background: #180933; border-right: 3px inset #ff007f; padding: 10px; }
.side-panel { background: #0b021a; border: 2px outset #00f0ff; margin-bottom: 12px; padding: 8px; }
.side-header { background: linear-gradient(90deg, #ff007f, #800080); color: #fff; font-weight: bold; font-size: 11px; text-align: center; padding: 3px 0; margin: -8px -8px 8px -8px; }
.nav-links { list-style: none; padding: 0; margin: 0; }
.nav-links li { margin: 6px 0; }
.counter-display { display: flex; justify-content: center; gap: 3px; background: #000; padding: 6px; border: 2px inset #555; }
.counter-digit { background: #111; color: #39ff14; border: 1px solid #333; padding: 2px 6px; font-family: monospace; font-size: 18px; font-weight: bold; text-shadow: 0 0 4px #39ff14; }
.badges-panel .badge-item { font-size: 10px; font-weight: bold; padding: 4px; margin: 4px 0; text-align: center; border: 1px solid; }
.badge-ns { background: #000080; border-color: #00f0ff; color: #00f0ff; }
.badge-res { background: #004d00; border-color: #39ff14; color: #39ff14; }
.badge-np { background: #664400; border-color: #ffe600; color: #ffe600; }
.badge-atari { background: #800000; border-color: #ff5555; color: #ffcccc; }
.badge-uc { background: #443300; border-color: #ffbb00; color: #ffff00; }
.main-body { flex: 1; padding: 16px; overflow-y: auto; }
.hero-banner { text-align: center; padding: 16px; background: radial-gradient(circle, #250d4f 0%, #0d0322 100%); border: 2px inset #ff007f; margin-bottom: 16px; }
.glow-pink { color: #ff007f; text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f; margin: 0; font-size: 32px; letter-spacing: 2px; }
.glow-cyan { color: #00f0ff; text-shadow: 0 0 8px #00f0ff; margin: 4px 0 0 0; font-size: 16px; }
.hero-desc { font-size: 13px; max-width: 750px; margin: 10px auto 0 auto; line-height: 1.5; color: #dddddd; }
.featured-section { border: 2px outset #ffe600; background: #170733; padding: 12px; margin-bottom: 20px; }
.section-badge { background: #ffe600; color: #000; font-weight: bold; display: inline-block; padding: 2px 8px; font-size: 11px; margin-bottom: 8px; }
.retro-btn { background: #c0c0c0; border: 2px outset #ffffff; color: #000; font-family: 'MS Sans Serif', Arial, sans-serif; font-weight: bold; padding: 4px 10px; cursor: pointer; margin-top: 6px; }
.section-title-bar { background: linear-gradient(90deg, #000080, #ff007f); color: #ffe600; font-weight: bold; font-size: 14px; padding: 6px 10px; border: 2px outset #c0c0c0; margin-bottom: 10px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filter-btn { background: #250d4f; border: 2px outset #800080; color: #ffffff; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.filter-btn.active { background: #ff007f; border-color: #ffe600; color: #ffffff; font-weight: bold; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cartridge-card { background: #0f0426; border: 2px outset #00f0ff; border-radius: 4px; overflow: hidden; }
.cartridge-header { padding: 10px; position: relative; }
.atari-stripes { display: flex; height: 4px; margin-bottom: 8px; }
.atari-stripes span { flex: 1; }
.game-title { margin: 0; font-size: 18px; color: #ffffff; text-shadow: 1px 1px 2px #000000; }
.game-subtitle { margin: 2px 0 0 0; font-size: 11px; color: #ffe600; }
.cartridge-body { padding: 10px; font-size: 12px; line-height: 1.4; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.meta-badge { background: #000000; border: 1px solid #333; padding: 2px 6px; font-size: 10px; color: #00f0ff; }
.tagline { color: #39ff14; font-style: italic; margin: 6px 0; }
.description { color: #cccccc; margin: 6px 0; }
.features-list ul { padding-left: 16px; margin: 4px 0 8px 0; }
.trivia-box { background: #170733; border: 1px dashed #ff007f; padding: 6px; font-size: 11px; color: #ffb3d9; }
.site-footer { margin-top: 24px; border-top: 2px solid #800080; padding-top: 12px; text-align: center; font-size: 11px; color: #888888; }
.footer-marquee { background: #000; color: #00f0ff; padding: 4px; border: 1px solid #333; margin-bottom: 8px; }