/**
 * UGH.im — Bloodlust Edition
 * NESticle / Genecyst / Bloodlust Software aesthetic
 * Dark, polarizing, 90s emulator skin vibe
 */

:root {
    --bl-bg: #0a0808;
    --bl-bg-panel: #0d0a0a;
    --bl-bg-inner: #0f0c0c;
    --bl-border-light: #2a2525;
    --bl-border-dark: #1a1616;
    --bl-green: #00cc66;
    --bl-green-dim: #008844;
    --bl-red: #cc3333;
    --bl-red-dim: #991111;
    --bl-text: #c0c0c0;
    --bl-text-dim: #808080;
    --bl-mono: "Share Tech Mono", "VT323", "Courier New", monospace;
    --bl-display: "VT323", "Share Tech Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bl-bg);
    color: var(--bl-text);
    font-family: var(--bl-mono);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

a {
    color: var(--bl-green);
    text-decoration: none;
}

a:hover { color: #33ff99; }

/* CRT / Scanline overlay */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    opacity: 0.4;
}

.crt-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* Main frame - window border */
.frame {
    max-width: 680px;
    margin: 1rem auto;
    border: 4px solid var(--bl-border-light);
    border-style: outset;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.05),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        0 0 0 2px var(--bl-border-dark);
    background: var(--bl-bg-panel);
}

/* Title bar - NESticle-style */
.title-bar {
    background: linear-gradient(180deg, #1a1616 0%, #0d0a0a 100%);
    border-bottom: 2px solid var(--bl-red-dim);
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--bl-display);
    font-size: 1.1rem;
}

.title-text { color: var(--bl-green); letter-spacing: 0.05em; }
.title-ver { color: var(--bl-text-dim); font-size: 0.9rem; }
.title-skull { color: var(--bl-red); }

/* Window panels - chunky 3D inset */
.win-panel {
    margin: 0.5rem;
    border: 3px solid var(--bl-border-light);
    border-style: inset;
    background: var(--bl-bg-inner);
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.panel-title {
    background: linear-gradient(90deg, var(--bl-red-dim), #1a1010);
    color: var(--bl-green);
    font-family: var(--bl-display);
    font-size: 1rem;
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid var(--bl-border-dark);
}

.panel-inner { padding: 1rem; }

/* Header */
header.win-panel .panel-inner { text-align: center; }

header h1 {
    font-family: var(--bl-display);
    font-size: 2.5rem;
    font-weight: 400;
}

.bl-red { color: var(--bl-red); }
.bl-green { color: var(--bl-green); }
.bl-skull { color: var(--bl-red); }

.tagline { color: var(--bl-text-dim); font-size: 0.95rem; margin: 0.2rem 0; }
.tagline.sub { font-style: italic; }

.header-buttons { margin-top: 0.75rem; }
.header-buttons .bl-btn { margin: 0 0.25rem; }

/* Nav */
.nav-panel .panel-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.nav-link {
    color: var(--bl-text-dim);
    padding: 0.25rem 0.5rem;
}

.nav-link:hover { color: var(--bl-green); }

/* Meter / stats bar */
.meter-panel .panel-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--bl-mono);
}

.meter-date { color: var(--bl-text-dim); font-size: 0.9rem; }

/* Bl box - info panels */
.bl-box {
    border: 2px solid var(--bl-border-light);
    border-style: inset;
    padding: 0.75rem;
    margin: 1rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.box-title {
    color: var(--bl-red);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.bl-big { color: var(--bl-green); font-size: 1.05rem; margin-bottom: 0.5rem; }

.bl-list { margin: 0.5rem 0 0 1rem; }
.bl-list li { margin: 0.25rem 0; }

.bl-code {
    background: #000;
    padding: 0.1rem 0.3rem;
    color: var(--bl-green);
}

.bl-code.small { font-size: 0.75rem; word-break: break-all; }

.bl-note { font-size: 0.8rem; color: var(--bl-text-dim); margin-top: 0.5rem; }

.bl-label { color: var(--bl-text-dim); }

/* Two column layout */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (max-width: 560px) {
    .two-col { grid-template-columns: 1fr; }
}

/* Link list */
.bl-link-list { list-style: none; }
.bl-link-list li { margin: 0.4rem 0; }

.bl-link {
    display: block;
    padding: 0.4rem;
    border: 1px solid transparent;
    color: var(--bl-green);
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.bl-link:hover { background: rgba(0, 204, 102, 0.1); }
.bl-link.danger { color: var(--bl-red); }
.bl-link.danger:hover { background: rgba(204, 51, 51, 0.1); }

.contact-row { margin: 0.35rem 0; font-size: 0.9rem; }

/* Services grid - from renderServicesForUGH */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.service-group {
    border: 2px solid var(--bl-border-light);
    border-style: inset;
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.2);
}

.service-group:hover { border-color: var(--bl-green-dim); }

.service-group h3 {
    font-size: 0.85rem;
    color: var(--bl-green);
    margin-bottom: 0.4rem;
}

.service-group ul li { margin: 0.2rem 0; font-size: 0.85rem; }
.service-group a { color: var(--bl-text); }
.service-group a:hover { color: var(--bl-green); }
.service-group .alt { color: var(--bl-text-dim); font-size: 0.8rem; }

/* Donate */
.donate-col { text-align: center; }
.donate-col .bl-btn { margin: 0.25rem; display: inline-block; }

.crypto-row { margin: 0.5rem 0; text-align: left; font-size: 0.85rem; }

/* Bl button - 3D raised */
.bl-btn {
    background: linear-gradient(180deg, #2a2525 0%, #1a1616 100%);
    border: 2px solid var(--bl-border-light);
    border-style: outset;
    color: var(--bl-green);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.bl-btn:hover {
    background: linear-gradient(180deg, #1a1616 0%, #2a2525 100%);
    border-style: inset;
}

/* Links wrap */
.links-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bl-chip {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bl-border-light);
    color: var(--bl-text);
    font-size: 0.85rem;
}

.bl-chip:hover {
    border-color: var(--bl-green);
    color: var(--bl-green);
}

/* Footer */
.footer-panel .panel-inner {
    text-align: center;
    font-size: 0.9rem;
    color: var(--bl-text-dim);
}