/* ============================================
   SUMMERVILLE NEIGHBORHOOD - PAGE RENDERER
   GeoCities / Angelfire / Y2K Retro Vibes
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Press+Start+2P&family=VT323&display=swap');

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive;
    color: #00ff00;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

a { color: #00ffff; }
a:visited { color: #ff00ff; }
a:hover { color: #ffff00; text-decoration: underline; }

/* === BACKGROUNDS === */
.bg-stars {
    background: #000011 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3CradialGradient id='a'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='1' fill='%23fff'/%3E%3Ccircle cx='150' cy='80' r='0.5' fill='%23aaf'/%3E%3Ccircle cx='250' cy='30' r='1.2' fill='%23fff'/%3E%3Ccircle cx='350' cy='120' r='0.8' fill='%23ffa'/%3E%3Ccircle cx='80' cy='200' r='0.6' fill='%23fff'/%3E%3Ccircle cx='200' cy='180' r='1' fill='%23aff'/%3E%3Ccircle cx='320' cy='220' r='0.7' fill='%23fff'/%3E%3Ccircle cx='30' cy='300' r='1.1' fill='%23faf'/%3E%3Ccircle cx='180' cy='350' r='0.9' fill='%23fff'/%3E%3Ccircle cx='300' cy='310' r='0.5' fill='%23aaf'/%3E%3Ccircle cx='100' cy='380' r='1.3' fill='%23fff'/%3E%3Ccircle cx='370' cy='370' r='0.8' fill='%23ffa'/%3E%3C/svg%3E");
}

.bg-purple {
    background: linear-gradient(180deg, #1a0033 0%, #2d0066 30%, #1a0033 60%, #0d001a 100%);
    background-attachment: fixed;
}

.bg-matrix {
    background: #000a00;
    position: relative;
}

.bg-fire {
    background: linear-gradient(180deg, #1a0000 0%, #330000 20%, #661a00 50%, #993300 75%, #cc6600 100%);
    background-attachment: fixed;
}

.bg-ocean {
    background: linear-gradient(180deg, #000033 0%, #000066 30%, #003366 60%, #006699 100%);
    background-attachment: fixed;
}

.bg-rainbow {
    background: linear-gradient(180deg, 
        #ff0000 0%, #ff7700 14%, #ffff00 28%, 
        #00ff00 42%, #0000ff 57%, #4b0082 71%, 
        #8b00ff 85%, #ff0000 100%);
    background-size: 100% 400%;
    animation: rainbowScroll 8s linear infinite;
    background-attachment: fixed;
}

.bg-cyber {
    background: #0a0a1a;
    background-image: 
        linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

.bg-grunge {
    background: #1a1a0a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23222200'/%3E%3C/svg%3E");
}

.bg-y2k {
    background: linear-gradient(135deg, #ff69b4, #00bfff, #ff69b4, #00bfff);
    background-size: 400% 400%;
    animation: y2kShift 6s ease infinite;
}

@keyframes rainbowScroll { 0%{background-position:0 0} 100%{background-position:0 400%} }
@keyframes y2kShift { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }

/* === SCANLINES OVERLAY === */
.scanlines {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.08) 0px,
        rgba(0,0,0,0.08) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* === PAGE CONTAINER === */
.page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* === HEADER BLOCK === */
.block-header h1 {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive;
    text-align: center;
    margin: 15px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.block-header h1.font-comic-sans { font-family: 'Comic Neue', 'Comic Sans MS', cursive; }
.block-header h1.font-press-start { font-family: 'Press Start 2P', monospace; font-size: 0.6em; }
.block-header h1.font-vt323 { font-family: 'VT323', monospace; }
.block-header h1.font-times { font-family: 'Times New Roman', serif; }
.block-header h1.font-impact { font-family: Impact, 'Arial Black', sans-serif; }

/* Rainbow animated text */
.rainbow-text, h1.rainbow-true {
    background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 3s linear infinite;
}
@keyframes rainbowText { 0%{background-position:0} 100%{background-position:200%} }

/* === TEXT BLOCK === */
.block-text {
    padding: 10px 15px;
    margin: 10px 0;
    line-height: 1.6;
}

/* === MARQUEE === */
marquee {
    padding: 8px 0;
    margin: 10px 0;
}

/* === IMAGE BLOCK === */
.block-image {
    margin: 15px 0;
}
.block-image img {
    border: 3px ridge #808080;
    image-rendering: auto;
}

/* === DIVIDER === */
.block-divider {
    margin: 15px 0;
    text-align: center;
    overflow: hidden;
}
.block-divider img {
    max-width: 100%;
    height: auto;
}
/* Fallback dividers */
.divider-rainbow {
    height: 4px;
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
}
.divider-fire {
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #ff6600, #ffcc00, #ff6600, #ff0000);
    animation: firePulse 1s ease infinite;
}
@keyframes firePulse { 0%,100%{opacity:1} 50%{opacity:0.7} }

.divider-barbed {
    height: 8px;
    background: repeating-linear-gradient(90deg, #666 0px, #666 8px, transparent 8px, transparent 12px);
}
.divider-stars {
    text-align: center;
    color: #ffff00;
    letter-spacing: 8px;
}
.divider-stars::before { content: '★ ★ ★ ★ ★ ★ ★ ★ ★ ★'; }

/* === LINKS BLOCK === */
.block-links {
    background: rgba(0,0,0,0.4);
    border: 2px ridge #808080;
    padding: 12px;
    margin: 15px 0;
}
.block-links h3 {
    margin-bottom: 8px;
    font-family: 'Comic Neue', cursive;
}
.block-links ul { list-style: none; padding: 0; }
.block-links li { margin: 4px 0; }
.block-links li::before { content: '👉 '; }

/* === GUESTBOOK === */
.block-guestbook {
    background: rgba(0,0,0,0.5);
    border: 3px ridge #808080;
    padding: 15px;
    margin: 15px 0;
}
.block-guestbook input,
.block-guestbook textarea {
    width: 100%;
    background: #000020;
    color: #00ff00;
    border: 2px inset #808080;
    padding: 6px;
    font-family: 'Courier New', monospace;
    margin-bottom: 8px;
}
.block-guestbook button {
    background: #000080;
    color: #ffffff;
    border: 3px outset #0000cc;
    padding: 6px 16px;
    font-family: 'Comic Neue', cursive;
    cursor: pointer;
    font-weight: bold;
}
.block-guestbook button:hover { background: #0000aa; }
.block-guestbook button:active { border-style: inset; }

.guestbook-entry {
    margin: 8px 0;
    padding: 8px;
    background: #000020;
    border: 1px solid #333;
}
.guestbook-entry .author { color: #ffff00; font-weight: bold; }
.guestbook-entry .date { color: #666; font-size: 11px; }
.guestbook-entry .message { color: #00ffff; }

/* === VISITOR COUNTER === */
.block-counter {
    text-align: center;
    margin: 15px 0;
}
.counter-display {
    font-family: 'Courier New', monospace;
    font-size: 22px;
    color: #00ff00;
    background: #000000;
    padding: 6px 16px;
    border: 3px inset #808080;
    display: inline-block;
    letter-spacing: 3px;
}
.counter-label {
    color: #888;
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
}

/* === UNDER CONSTRUCTION === */
.block-construction {
    text-align: center;
    padding: 20px;
    margin: 15px 0;
}
.block-construction .uc-text {
    color: #ffff00;
    font-weight: bold;
    font-size: 18px;
    animation: blinky 1s step-end infinite;
}
@keyframes blinky { 0%,100%{opacity:1} 50%{opacity:0} }

/* === BADGES === */
.block-badges {
    text-align: center;
    margin: 15px 0;
}
.block-badges img {
    margin: 4px;
    image-rendering: pixelated;
    vertical-align: middle;
}

/* === WEBRING === */
.webring-bar {
    text-align: center;
    padding: 15px;
    margin-top: 20px;
    border-top: 1px dashed #333;
}
.webring-bar .title {
    color: #888;
    font-size: 11px;
    font-family: 'VT323', monospace;
    letter-spacing: 2px;
}
.webring-bar .nav {
    font-size: 12px;
    margin-top: 4px;
}
.webring-bar a { color: #00ffff; text-decoration: none; }
.webring-bar a:hover { text-decoration: underline; }
.webring-bar .home { color: #ffff00; }

/* === MIDI PLAYER === */
.midi-player {
    background: #c0c0c0;
    border: 3px outset #fff;
    padding: 6px 12px;
    margin: 15px auto;
    max-width: 300px;
    text-align: center;
    font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    color: #000;
}
.midi-player .title {
    background: #000080;
    color: #fff;
    padding: 2px 6px;
    margin-bottom: 6px;
    font-weight: bold;
}
.midi-player button {
    background: #c0c0c0;
    border: 2px outset #fff;
    padding: 2px 10px;
    cursor: pointer;
    font-size: 12px;
    margin: 2px;
}
.midi-player button:active { border-style: inset; }

/* === BLINK TAG EMULATION === */
.blink {
    animation: blinky 1s step-end infinite;
}

/* === RAW HTML BLOCK === */
.block-raw {
    margin: 15px 0;
}

/* === ABOUT ME === */
.block-about {
    background: rgba(0,0,0,0.4);
    border: 3px double #ff00ff;
    padding: 15px;
    margin: 15px 0;
}
.block-about h3 {
    color: #ff00ff;
    margin-bottom: 8px;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
    .page-container { padding: 10px; }
    .block-header h1 { font-size: 1.5em; }
    .midi-player { max-width: 100%; }
}