/* ABOUTME: Styles for the fake 90s internet sites rendered inside the browser content area. */
/* ABOUTME: Covers Zone 1 (bright/goofy), Zone 2 (dark/chaotic), and Zone 3 (eerie/minimal) aesthetics. */

/* ============================================================
   GLOBAL 90s STYLES — shared across all zones
   ============================================================ */

/* Marquee animation (CSS replacement for the real <marquee> tag) */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-inner {
    display: inline-block;
    animation: marquee-scroll 15s linear infinite;
}

@keyframes marquee-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Blinking text (the most beloved 90s HTML feature) */
.blink {
    animation: blink-text 1s steps(1) infinite;
}

@keyframes blink-text {
    50% { opacity: 0; }
}

/* Hit counter (every 90s site needed one) */
.hit-counter {
    font-family: 'Courier New', monospace;
    background: #000;
    color: #0f0;
    padding: 2px 8px;
    display: inline-block;
    border: 2px inset #666;
}

/* Under construction banner (because the site is never done) */
.under-construction {
    display: inline-block;
    background: repeating-linear-gradient(
        45deg,
        #ff0,
        #ff0 10px,
        #000 10px,
        #000 20px
    );
    padding: 4px 12px;
    color: #000;
    font-weight: bold;
}

/* Clickable elements — added by SiteRegistry.attachClickTargets */
.clickable {
    cursor: pointer;
}

.clickable:hover {
    filter: brightness(1.2);
}

.clicked {
    animation: click-pulse 0.2s ease-out;
}

@keyframes click-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Guest book entries */
.guestbook-entry {
    border-bottom: 1px dashed #999;
    padding: 8px;
    margin: 4px 0;
}

/* Banner ads — the bread and butter of the 90s web */
.banner-ad {
    border: 2px solid #000;
    padding: 8px;
    text-align: center;
    background: linear-gradient(to right, #ff6b6b, #ffd93d, #6bcb77);
    color: #000;
    font-weight: bold;
    cursor: pointer;
    margin: 8px 0;
}

.banner-ad:hover {
    filter: brightness(1.1);
}

/* Horizontal rule — 90s style with a beveled look */
.retro-hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #888, transparent);
    margin: 12px 0;
}

/* Webring navigation bar */
.webring-nav {
    text-align: center;
    padding: 8px;
    border: 1px solid #999;
    background: #eee;
    margin: 8px 0;
    font-size: 12px;
}

/* Reward float animation ("+5 clicks" floating up from click location) */
.reward-float {
    position: fixed;
    pointer-events: none;
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold;
    font-size: 14px;
    color: #ffd700;
    text-shadow: 1px 1px 0 #000;
    animation: float-up 1s ease-out forwards;
    z-index: 9999;
}

@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

/* ============================================================
   ZONE 1 — Surface Web (bright, nostalgic, 90s fun)
   ============================================================ */

.zone-1 {
    font-family: 'Times New Roman', Times, serif;
}

.zone-1 a {
    color: #0000ff;
    text-decoration: underline;
}

.zone-1 a:visited {
    color: #800080;
}

.zone-1 h1 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}

.zone-1 h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 1.2em;
}

.zone-1 hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #888, transparent);
}

/* Table-based layout feel (using CSS grid to mimic 90s table layouts) */
.zone-1 .table-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: 1px solid #999;
    padding: 4px;
}

.zone-1 .table-cell {
    border: 1px solid #ccc;
    padding: 8px;
}

/* ============================================================
   ZONE 2 — Weird Web (chaotic, dark-ish, absurdist)
   ============================================================ */

.zone-2 {
    font-family: 'Arial', sans-serif;
    background: #1a1a1a;
    color: #ccc;
}

.zone-2 a {
    color: #66aaff;
}

.zone-2 h1 {
    font-family: 'Impact', sans-serif;
    letter-spacing: 2px;
}

.zone-2 h2 {
    font-family: 'Impact', sans-serif;
    letter-spacing: 1px;
}

/* Chaotic overlapping elements */
.zone-2 .overlap-container {
    position: relative;
}

.zone-2 .overlap-item {
    position: absolute;
}

/* Rotating text for absurdist effect */
.zone-2 .tilted {
    transform: rotate(-3deg);
}

.zone-2 .tilted-right {
    transform: rotate(3deg);
}

/* ============================================================
   ZONE 3 — Deep Web (creepy, minimal, eerie)
   ============================================================ */

.zone-3 {
    font-family: 'Courier New', monospace;
    background: #0a0a0a;
    color: #888;
}

.zone-3 a {
    color: #444;
}

.zone-3 a:hover {
    color: #aaa;
}

/* VHS scanline overlay */
.scanlines {
    position: relative;
}

.scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
}

/* Glitch text effect */
.glitch-text {
    animation: glitch 2s infinite;
}

@keyframes glitch {
    2% { transform: translate(2px, 0); }
    4% { transform: translate(-2px, 0); }
    6% { transform: translate(0, 0); }
}

/* Flickering text for eerie vibe */
.flicker {
    animation: flicker-effect 3s infinite;
}

@keyframes flicker-effect {
    0% { opacity: 1; }
    3% { opacity: 0.4; }
    6% { opacity: 1; }
    7% { opacity: 0.4; }
    8% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: 0.6; }
    53% { opacity: 1; }
}

/* Static noise overlay for Zone 3 */
.static-noise {
    position: relative;
}

.static-noise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="1" height="1" fill="rgba(255,255,255,0.02)"/><rect x="2" y="2" width="1" height="1" fill="rgba(255,255,255,0.02)"/></svg>');
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================================
   YUGAAAAA! HOMEPAGE — The 90s Yahoo-like starting portal
   ============================================================ */

.yugaaaaa-page {
    background: #ffffff;
    color: #000;
    padding: 0;
}

/* Top welcome marquee */
.yugaaaaa-top-marquee {
    background: #000080;
    color: #ffff00;
    padding: 4px 0;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

/* Header with giant logo */
.yugaaaaa-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: #f0f0f0;
    border-bottom: 2px solid #ccc;
}

.yugaaaaa-logo {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 48px;
    color: #cc0000;
    text-shadow:
        2px 2px 0 #ff6600,
        4px 4px 0 #ffcc00;
    letter-spacing: 4px;
    margin: 0 0 4px 0;
}

.yugaaaaa-subtitle {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #666;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* Rainbow horizontal rule */
.rainbow-hr {
    border: none;
    height: 4px;
    background: linear-gradient(
        to right,
        #ff0000,
        #ff7700,
        #ffff00,
        #00ff00,
        #0000ff,
        #8b00ff
    );
    margin: 8px 0;
}

/* Search bar section */
.yugaaaaa-search {
    text-align: center;
    padding: 12px 16px;
    background: #ffffcc;
    border: 1px solid #cccc99;
    margin: 8px;
}

.yugaaaaa-search-label {
    display: block;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}

.yugaaaaa-search-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.yugaaaaa-search-input {
    width: 60%;
    max-width: 400px;
    padding: 4px 8px;
    font-size: 14px;
    border: 2px inset #999;
    font-family: 'Times New Roman', serif;
}

.yugaaaaa-search-btn {
    padding: 4px 16px;
    font-size: 14px;
    font-weight: bold;
    background: #ddd;
    border: 2px outset #ccc;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
}

.yugaaaaa-search-btn:active {
    border-style: inset;
}

.yugaaaaa-search-powered {
    font-size: 10px;
    color: #999;
    margin: 4px 0 0 0;
    font-family: 'Arial', sans-serif;
}

/* Banner ad overrides for Yugaaaaa page */
.yugaaaaa-banner {
    font-size: 18px;
    padding: 12px;
    margin: 8px;
    animation: banner-flash 1.5s ease-in-out infinite alternate;
}

@keyframes banner-flash {
    0% { background: linear-gradient(to right, #ff6b6b, #ffd93d, #6bcb77); }
    50% { background: linear-gradient(to right, #6bcb77, #ff6b6b, #ffd93d); }
    100% { background: linear-gradient(to right, #ffd93d, #6bcb77, #ff6b6b); }
}

/* Main content area: categories + sidebar */
.yugaaaaa-main {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 8px;
    padding: 8px;
}

/* Categories grid */
.yugaaaaa-categories {
    border: 1px solid #999;
    padding: 8px;
    background: #fafafa;
}

.yugaaaaa-categories h2 {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

.yugaaaaa-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.category-link {
    display: block;
    padding: 6px 8px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #0000cc;
    text-decoration: none;
    border-bottom: 1px dotted #ddd;
}

.category-link:hover {
    background: #e8e8ff;
    color: #0000ff;
    text-decoration: underline;
}

/* Sidebar widgets */
.yugaaaaa-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yugaaaaa-widget {
    border: 1px solid #999;
    padding: 8px;
    background: #f5f5f5;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
}

.yugaaaaa-widget h3 {
    font-size: 13px;
    color: #333;
    margin: 0 0 4px 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
}

.yugaaaaa-widget p {
    margin: 4px 0 0 0;
}

.email-widget {
    background: #ffe8e8;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.email-widget:hover {
    background: #ffd0d0;
}

/* News section */
.yugaaaaa-news {
    padding: 8px;
    margin: 0 8px;
    border: 1px solid #999;
    background: #fff8f0;
}

.yugaaaaa-news h2 {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

.yugaaaaa-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yugaaaaa-news-list li {
    padding: 4px 0;
    border-bottom: 1px dotted #ddd;
}

.news-link {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: #0000cc;
    text-decoration: none;
}

.news-link:hover {
    text-decoration: underline;
    color: #0000ff;
}

/* Stock ticker marquee */
.yugaaaaa-ticker {
    background: #000;
    color: #00ff00;
    padding: 4px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    margin-top: 8px;
}

.stock-item {
    cursor: pointer;
    padding: 2px 4px;
}

.stock-item:hover {
    background: #003300;
    color: #33ff33;
}

/* Footer */
.yugaaaaa-footer {
    text-align: center;
    padding: 12px 8px;
    background: #e0e0e0;
    border-top: 2px solid #999;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #666;
    margin-top: 8px;
}

.yugaaaaa-footer p {
    margin: 2px 0;
}

.yugaaaaa-footer .webring-nav {
    margin-top: 8px;
}

/* ============================================================
   HAMSTERTRAX — Your #1 Source for Hamster Info Since 1997
   ============================================================ */

.hamstertrax-page {
    background: #fff;
    color: #000;
    padding: 0;
}

.hamstertrax-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: #ffe8cc;
    border-bottom: 2px solid #cc8844;
}

.hamstertrax-logo {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 36px;
    color: #cc6600;
    text-shadow: 2px 2px 0 #ff9933;
    margin: 0 0 4px 0;
}

.hamstertrax-subtitle {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #886633;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* MIDI player widget */
.hamstertrax-midi {
    background: #c0c0c0;
    border: 2px inset #999;
    padding: 6px 12px;
    margin: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.midi-btn {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    padding: 2px 8px;
    background: #ddd;
    border: 2px outset #ccc;
    cursor: pointer;
}

.midi-btn:active {
    border-style: inset;
}

/* Main layout: gallery + sidebar */
.hamstertrax-main {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 8px;
    padding: 8px;
}

/* Photo gallery */
.hamstertrax-gallery {
    border: 1px solid #cc8844;
    padding: 8px;
    background: #fff8f0;
}

.hamstertrax-gallery h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #663300;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #cc8844;
    padding-bottom: 4px;
}

.hamstertrax-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.hamster-photo {
    border: 2px solid #996633;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s;
}

.hamster-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hamster-photo-emoji {
    font-size: 40px;
    margin-bottom: 4px;
}

.hamster-photo-name {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 11px;
    font-weight: bold;
    color: #333;
}

/* Sidebar: Stock exchange */
.hamstertrax-sidebar {
    border: 1px solid #996633;
    padding: 8px;
    background: #f5f0e8;
}

.hamstertrax-sidebar h3 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #663300;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #cc8844;
    padding-bottom: 4px;
}

.hamstertrax-stock-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.hamstertrax-stock-table th {
    background: #996633;
    color: #fff;
    padding: 4px;
    text-align: left;
    font-size: 10px;
}

.hamstertrax-stock-table td {
    padding: 4px;
    border-bottom: 1px dotted #cc8844;
}

.stock-row {
    cursor: pointer;
}

.stock-row:hover {
    background: #ffe8cc;
}

/* Adopt button */
.adopt-btn {
    display: block;
    width: 80%;
    margin: 12px auto;
    padding: 12px 24px;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(to bottom, #ffcc00, #ff9900);
    color: #663300;
    border: 3px outset #cc8800;
    cursor: pointer;
    text-align: center;
    animation: adopt-pulse 2s ease-in-out infinite alternate;
}

.adopt-btn:hover {
    background: linear-gradient(to bottom, #ffdd33, #ffaa33);
}

.adopt-btn:active {
    border-style: inset;
}

@keyframes adopt-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); }
}

/* Guestbook link */
.hamstertrax-guestbook {
    text-align: center;
    padding: 8px;
    margin: 8px;
    border: 1px dashed #cc8844;
    background: #fff8f0;
}

.hamstertrax-guestbook .guestbook-link {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #0000cc;
}

/* Footer */
.hamstertrax-footer {
    text-align: center;
    padding: 12px 8px;
    background: #ffe8cc;
    border-top: 2px solid #cc8844;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #886633;
}

.hamstertrax-footer p {
    margin: 4px 0;
}

.netscape-badge {
    display: inline-block;
    border: 2px outset #999;
    background: #c0c0c0;
    padding: 4px 8px;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    color: #333;
    margin-bottom: 4px;
}

/* ============================================================
   COOLGUYZ.NET — Kevin's Page
   ============================================================ */

.coolguyz-page {
    background: #6699ff;
    color: #000;
    padding: 0;
}

/* Under construction banner */
.under-construction-banner {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background: repeating-linear-gradient(
        45deg,
        #ffcc00,
        #ffcc00 10px,
        #333 10px,
        #333 20px
    );
    animation: uc-scroll 1s linear infinite;
    cursor: pointer;
}

@keyframes uc-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

.coolguyz-secret {
    background: #000;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 4px 8px;
    margin-top: 4px;
    animation: blink-text 1s steps(1) infinite;
}

/* WordArt-style header */
.coolguyz-header {
    text-align: center;
    padding: 12px 8px;
}

.coolguyz-wordart {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 36px;
    background: linear-gradient(
        to right,
        #ff0000,
        #ff7700,
        #ffff00,
        #00ff00,
        #0000ff,
        #8b00ff
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: rotate(-2deg);
    text-shadow: none;
    letter-spacing: 2px;
    margin: 0;
}

/* About Me section */
.coolguyz-about {
    background: #fff;
    border: 2px solid #003399;
    padding: 12px;
    margin: 8px;
}

.coolguyz-about h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    color: #003399;
    margin: 0 0 8px 0;
}

.coolguyz-about p {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    line-height: 1.6;
}

/* Spoon collection gallery */
.coolguyz-spoons {
    background: #fff;
    border: 2px solid #003399;
    padding: 12px;
    margin: 8px;
}

.coolguyz-spoons h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    color: #003399;
    margin: 0 0 8px 0;
    text-align: center;
}

.coolguyz-spoon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.spoon-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e8e8ff;
    border: 1px solid #9999cc;
    padding: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.spoon-item:hover {
    background: #d0d0ff;
}

.spoon-emoji {
    font-size: 28px;
    flex-shrink: 0;
}

.spoon-desc {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 11px;
    color: #333;
}

/* Visitor counter */
.coolguyz-counter {
    text-align: center;
    padding: 8px;
    margin: 8px;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #fff;
}

/* Guestbook link */
.coolguyz-guestbook {
    text-align: center;
    padding: 8px;
    margin: 4px 8px;
}

.coolguyz-guestbook .guestbook-link {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #ffff00;
}

/* Friend links */
.coolguyz-friends {
    text-align: center;
    padding: 8px;
    margin: 4px 8px;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 13px;
    color: #fff;
}

.friend-link {
    color: #ffff00;
    font-weight: bold;
    text-decoration: none;
}

.friend-link:hover {
    text-decoration: underline;
    color: #fff;
}

/* Footer */
.coolguyz-footer {
    text-align: center;
    padding: 8px;
    margin-top: 8px;
    background: #003399;
}

.coolguyz-footer .webring-nav {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 11px;
    color: #99bbff;
    background: #003399;
    border-color: #4466aa;
    margin: 4px 0;
}

/* ============================================================
   RECIPEZ4U — The Internet's Premier Toast Resource
   ============================================================ */

.recipez4u-page {
    background: #fff8e8;
    color: #000;
    padding: 0;
}

.recipez4u-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: #8B4513;
    border-bottom: 4px solid #D2691E;
}

.recipez4u-logo {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 40px;
    color: #FFD700;
    text-shadow: 2px 2px 0 #8B0000;
    margin: 0 0 4px 0;
}

.recipez4u-subtitle {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #FFE4B5;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* Featured recipe box */
.recipez4u-featured {
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    border: 3px solid #8B4513;
    padding: 16px;
    margin: 8px;
    text-align: center;
}

.recipez4u-featured h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 22px;
    color: #8B0000;
    margin: 0 0 8px 0;
}

.recipez4u-featured p {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #333;
}

/* Recipe cards */
.recipez4u-recipes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
}

.recipe-card {
    background: #fff;
    border: 2px solid #D2691E;
    padding: 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.recipe-card:hover {
    background: #FFF8DC;
}

.recipe-card h3 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #8B4513;
    margin: 0 0 6px 0;
}

.recipe-card p {
    font-family: 'Times New Roman', serif;
    font-size: 13px;
    color: #555;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.print-btn {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    padding: 4px 12px;
    background: #ddd;
    border: 2px outset #ccc;
    cursor: pointer;
}

.print-btn:active {
    border-style: inset;
}

/* Pro tip callout box */
.recipez4u-protip {
    background: #FFFACD;
    border: 2px dashed #DAA520;
    padding: 12px;
    margin: 8px;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    text-align: center;
}

/* Submit recipe form */
.recipez4u-submit {
    background: #fff;
    border: 2px solid #D2691E;
    padding: 12px;
    margin: 8px;
    text-align: center;
}

.recipez4u-submit h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #8B4513;
    margin: 0 0 8px 0;
}

.recipez4u-form-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.recipez4u-input {
    width: 60%;
    max-width: 400px;
    padding: 4px 8px;
    font-size: 13px;
    border: 2px inset #999;
    font-family: 'Times New Roman', serif;
}

.submit-recipe-btn {
    padding: 4px 16px;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    color: #8B4513;
    border: 2px outset #D2691E;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
}

.submit-recipe-btn:active {
    border-style: inset;
}

/* Cookbook banner ad */
.cookbook-ad {
    background: linear-gradient(to right, #8B4513, #D2691E, #8B4513);
    color: #FFD700;
    font-size: 18px;
    padding: 14px;
    margin: 8px;
    animation: banner-flash 1.5s ease-in-out infinite alternate;
}

/* Footer */
.recipez4u-footer {
    text-align: center;
    padding: 12px 8px;
    background: #8B4513;
    border-top: 2px solid #D2691E;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #FFE4B5;
}

.recipez4u-footer p {
    margin: 2px 0;
}

/* ============================================================
   WEBRING HUB — NetSurf WebRing, Connecting the World Wide Web
   ============================================================ */

.webring-page {
    background: #e8e8ff;
    color: #000;
    padding: 0;
}

.webring-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: #000080;
    border-bottom: 4px solid #0000cc;
}

.webring-logo {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 28px;
    color: #ffff00;
    text-shadow: 2px 2px 0 #000;
    margin: 0 0 4px 0;
}

.webring-subtitle {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #aaccff;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* Webring navigation bar (Previous / Random / Next) */
.webring-nav-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px;
    background: #c0c0c0;
    border: 2px inset #999;
    margin: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

.webring-nav-link {
    color: #0000cc;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

.webring-nav-link:hover {
    color: #ff0000;
}

/* Member site listings */
.webring-listings {
    padding: 8px;
}

.webring-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid #9999cc;
    padding: 10px 12px;
    margin: 6px 0;
    transition: background 0.1s;
}

.webring-entry:hover {
    background: #f0f0ff;
}

.webring-entry-num {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    color: #000080;
    min-width: 30px;
}

.webring-entry-info {
    flex: 1;
}

.webring-entry-info strong {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #000080;
}

.webring-entry-info p {
    font-family: 'Times New Roman', serif;
    font-size: 12px;
    color: #555;
    margin: 2px 0 0 0;
}

.webring-visit {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #0000cc;
    text-decoration: none;
    padding: 4px 10px;
    border: 2px outset #9999cc;
    background: #dde;
    cursor: pointer;
    white-space: nowrap;
}

.webring-visit:hover {
    background: #ccf;
}

.webring-visit:active {
    border-style: inset;
}

/* WebRing-specific banner ad styling */
.webring-banner {
    background: linear-gradient(to right, #000080, #0000cc, #000080);
    color: #ffff00;
    font-size: 16px;
    margin: 8px;
}

/* Join button */
.webring-join-section {
    text-align: center;
    padding: 12px;
    margin: 8px;
}

.join-btn {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 32px;
    background: linear-gradient(to bottom, #ffcc00, #ff9900);
    color: #000080;
    border: 3px outset #cc8800;
    cursor: pointer;
    animation: adopt-pulse 2s ease-in-out infinite alternate;
}

.join-btn:hover {
    background: linear-gradient(to bottom, #ffdd33, #ffaa33);
}

.join-btn:active {
    border-style: inset;
}

/* Footer */
.webring-footer {
    text-align: center;
    padding: 12px 8px;
    background: #000080;
    border-top: 2px solid #0000cc;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #aaccff;
    margin-top: 8px;
}

.webring-footer p {
    margin: 2px 0;
}

/* ============================================================
   TOTALLY REAL FACTS — 100% Verified by the Internet
   ============================================================ */

.totallyrealfacts-page {
    background: #fffff0;
    color: #000;
    padding: 0;
}

.trf-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: #2e4057;
    border-bottom: 4px solid #3a7;
}

.trf-logo {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 36px;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    margin: 0 0 4px 0;
}

.trf-subtitle {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #aaddcc;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* Featured "Did You Know?" box */
.trf-featured {
    background: linear-gradient(to bottom, #ffd700, #ffa500);
    border: 3px solid #cc8800;
    padding: 16px;
    margin: 8px;
    text-align: center;
}

.trf-featured h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 24px;
    color: #8b0000;
    margin: 0 0 8px 0;
}

.trf-featured-text {
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    color: #333;
    font-style: italic;
    line-height: 1.5;
}

/* Categories section */
.trf-categories {
    padding: 8px;
}

.trf-category {
    margin-bottom: 12px;
    border: 1px solid #ccc;
    background: #fff;
}

.category-header {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 18px;
    color: #fff;
    background: #2e4057;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
}

.category-header:hover {
    background: #3a5570;
}

/* Individual fact items */
.fact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px dotted #ddd;
    cursor: pointer;
    transition: background 0.1s;
}

.fact-item:hover {
    background: #f8f8e0;
}

.fact-item:last-child {
    border-bottom: none;
}

.trf-fact-text {
    font-family: 'Times New Roman', serif;
    font-size: 14px;
    color: #333;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.cite-btn {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    padding: 4px 10px;
    background: #ddd;
    border: 2px outset #ccc;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.cite-btn:active {
    border-style: inset;
}

/* Footer */
.trf-footer {
    text-align: center;
    padding: 12px 8px;
    background: #2e4057;
    border-top: 2px solid #3a7;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #aaddcc;
    margin-top: 8px;
}

.trf-footer p {
    margin: 2px 0;
}

/* ============================================================
   FREESMILEYZ.BIZ — FREE Downloads, No Virus We Promise
   ============================================================ */

.freesmileyz-page {
    background: #ff99ff;
    color: #000;
    padding: 0;
}

.freesmileyz-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: linear-gradient(to right, #ff00ff, #00ffff, #ff00ff);
    border-bottom: 4px solid #ff00ff;
}

.freesmileyz-logo {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 32px;
    color: #ffff00;
    text-shadow:
        2px 2px 0 #ff0000,
        4px 4px 0 #0000ff;
    margin: 0 0 4px 0;
}

.freesmileyz-novirus {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 18px;
    color: #ff0000;
    font-weight: bold;
    margin: 0 0 8px 0;
}

/* Current cursor indicator */
.freesmileyz-cursor-indicator {
    text-align: center;
    padding: 8px;
    margin: 8px;
    background: #fff;
    border: 2px solid #cc00cc;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.freesmileyz-cursor-value {
    color: #ff00ff;
}

/* Main layout: grid + sidebar */
.freesmileyz-main {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 8px;
    padding: 8px;
}

/* Smiley/cursor grid (4 columns) */
.freesmileyz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
}

.smiley-item {
    background: #fff;
    border: 2px solid #cc00cc;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s;
}

.smiley-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 0, 255, 0.3);
}

.smiley-emoji {
    font-size: 36px;
    margin-bottom: 4px;
}

.smiley-name {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

.smiley-download-count {
    font-family: 'Arial', sans-serif;
    font-size: 9px;
    color: #888;
    margin-bottom: 4px;
}

.download-btn {
    display: block;
    width: 100%;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    background: linear-gradient(to bottom, #00ff00, #009900);
    color: #fff;
    border: 2px outset #00cc00;
    cursor: pointer;
    text-shadow: 1px 1px 0 #006600;
}

.download-btn:hover {
    background: linear-gradient(to bottom, #33ff33, #00cc00);
}

.download-btn:active {
    border-style: inset;
}

/* Sidebar: Top Downloads */
.freesmileyz-sidebar {
    border: 2px solid #cc00cc;
    padding: 8px;
    background: #ffe0ff;
    font-family: 'Arial', sans-serif;
}

.freesmileyz-sidebar h3 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 13px;
    color: #660066;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #cc00cc;
    padding-bottom: 4px;
}

.freesmileyz-rank-item {
    font-size: 12px;
    color: #333;
    padding: 3px 0;
    border-bottom: 1px dotted #cc99cc;
}

/* Fake popup overlay */
.freesmileyz-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.freesmileyz-popup {
    background: #c0c0c0;
    border: 3px outset #ddd;
    padding: 20px;
    text-align: center;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
    max-width: 300px;
}

.freesmileyz-popup-title {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 12px 0;
}

.freesmileyz-popup-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.popup-btn {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 20px;
    background: #ddd;
    border: 2px outset #ccc;
    cursor: pointer;
}

.popup-btn:hover {
    background: #eee;
}

.popup-btn:active {
    border-style: inset;
}

/* Disclaimer */
.freesmileyz-disclaimer {
    text-align: center;
    padding: 8px;
    margin: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #666;
    font-style: italic;
    border: 1px dashed #cc00cc;
    background: #fff0ff;
}

/* Footer */
.freesmileyz-footer {
    text-align: center;
    padding: 12px 8px;
    background: linear-gradient(to right, #ff00ff, #00ffff, #ff00ff);
    border-top: 2px solid #ff00ff;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #fff;
}

.freesmileyz-footer p {
    margin: 2px 0;
}

/* ============================================================
   MEGA DEALS WAREHOUSE — EVERYTHING MUST GO
   ============================================================ */

.megadeals-page {
    background: #fff5e0;
    color: #000;
    padding: 0;
}

.megadeals-header {
    text-align: center;
    padding: 12px 8px 4px;
    background: #cc0000;
    border-bottom: 4px solid #990000;
}

.megadeals-logo {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 36px;
    color: #ffff00;
    text-shadow: 2px 2px 0 #000;
    margin: 0 0 4px 0;
}

.megadeals-subtitle {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #ffe0b0;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* Flashing SALE banner */
.megadeals-sale-banner {
    text-align: center;
    padding: 10px;
    background: linear-gradient(to right, #ff0000, #ffff00, #ff0000);
    color: #cc0000;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    border-bottom: 2px solid #cc0000;
}

/* Shopping cart indicator */
.megadeals-cart {
    text-align: right;
    padding: 6px 12px;
    background: #333;
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

/* Product grid (3 columns) */
.megadeals-products {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px;
}

.megadeals-product-card {
    background: #fff;
    border: 2px solid #cc0000;
    padding: 12px;
    text-align: center;
    transition: transform 0.1s;
}

.megadeals-product-card:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-img {
    font-size: 48px;
    margin-bottom: 8px;
    cursor: pointer;
}

.megadeals-product-name {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0 0 4px 0;
}

.megadeals-product-desc {
    font-family: 'Times New Roman', serif;
    font-size: 12px;
    color: #666;
    margin: 0 0 8px 0;
    line-height: 1.4;
    font-style: italic;
}

.megadeals-product-price {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    color: #cc0000;
    margin-bottom: 8px;
}

.add-to-cart {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 14px;
    background: linear-gradient(to bottom, #ff6600, #cc3300);
    color: #fff;
    border: 2px outset #cc3300;
    cursor: pointer;
}

.add-to-cart:hover {
    background: linear-gradient(to bottom, #ff8833, #ee5500);
}

.add-to-cart:active {
    border-style: inset;
}

.megadeals-buy-btn {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 18px;
    background: linear-gradient(to bottom, #00cc00, #009900);
    color: #fff;
    border: 2px outset #00aa00;
    cursor: pointer;
    animation: adopt-pulse 2s ease-in-out infinite alternate;
}

.megadeals-buy-btn:hover {
    background: linear-gradient(to bottom, #33ee33, #00cc00);
}

.megadeals-buy-btn:active {
    border-style: inset;
}

/* Congratulations message */
.megadeals-congrats {
    background: #00cc00;
    color: #fff;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 12px;
    font-weight: bold;
    padding: 6px;
    margin-top: 6px;
    animation: blink-text 1s steps(1) infinite;
}

/* Free shipping notice */
.megadeals-shipping {
    text-align: center;
    padding: 8px;
    margin: 8px;
    background: #ffe0b0;
    border: 2px dashed #cc6600;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #663300;
}

/* Customer reviews */
.megadeals-reviews {
    padding: 8px;
    margin: 0 8px;
    border: 1px solid #cc0000;
    background: #fff;
}

.megadeals-reviews h2 {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

.review-item {
    padding: 8px;
    border-bottom: 1px dotted #ddd;
    cursor: pointer;
    transition: background 0.1s;
    font-family: 'Times New Roman', serif;
    font-size: 13px;
}

.review-item:hover {
    background: #fff8e0;
}

.review-item:last-child {
    border-bottom: none;
}

.megadeals-review-stars {
    color: #ffcc00;
    font-size: 14px;
}

.megadeals-review-text {
    color: #555;
    font-style: italic;
}

/* Footer */
.megadeals-footer {
    text-align: center;
    padding: 12px 8px;
    background: #cc0000;
    border-top: 2px solid #990000;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #ffe0b0;
    margin-top: 8px;
}

.megadeals-footer p {
    margin: 2px 0;
}

/* ============================================================
   THE VOID — Almost entirely black, hidden cryptic poetry
   ============================================================ */

.the-void-page {
    background: #000 !important;
    color: #111;
    padding: 0;
    min-height: 400px;
}

.void-title {
    text-align: center;
    padding: 20px 0 10px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #222;
    letter-spacing: 8px;
}

/* Grid of invisible click zones arranged in two columns */
.void-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 10px 20px;
    min-height: 300px;
}

.void-zone {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #0a0a0a;
    transition: border-color 0.3s;
    padding: 12px;
}

.void-zone:hover {
    border-color: #1a1a1a;
}

/* Hidden phrase inside each zone — invisible until revealed */
.void-phrase {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: transparent;
    transition: color 2s ease-in;
    text-align: center;
    line-height: 1.6;
}

/* When a zone is clicked, the text fades in */
.void-zone.void-revealed .void-phrase {
    color: #555;
}

.void-zone.void-revealed {
    border-color: #1a1a1a;
    cursor: default;
}

/* Completion message — appears after all 10 phrases revealed */
.void-completion {
    text-align: center;
    padding: 30px 20px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #666;
    animation: void-fade-in 3s ease-in forwards;
    letter-spacing: 2px;
}

@keyframes void-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.void-footer {
    text-align: center;
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #111;
}

/* ============================================================
   INFINITE GUESTBOOK — Dark green-on-dark matrix-ish aesthetic
   ============================================================ */

.infinite-guestbook-page {
    background: #0d0d0d !important;
    color: #33cc33;
    padding: 0;
    font-family: 'Courier New', monospace;
}

.guestbook-header {
    text-align: center;
    padding: 16px 8px 8px;
    border-bottom: 1px solid #1a3a1a;
    background: #0a1a0a;
}

.guestbook-logo {
    font-family: 'Courier New', monospace !important;
    font-size: 28px;
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    margin: 0 0 4px 0;
    letter-spacing: 3px;
}

.guestbook-subtitle {
    font-size: 12px;
    color: #338833;
    margin: 0 0 8px 0;
    font-style: italic;
}

/* Sign section */
.guestbook-sign-section {
    text-align: center;
    padding: 12px;
    background: #0a1a0a;
    border-bottom: 1px solid #1a3a1a;
}

.sign-btn {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 24px;
    background: #003300;
    color: #00ff00;
    border: 2px solid #00ff00;
    cursor: pointer;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
    transition: background 0.2s;
}

.sign-btn:hover {
    background: #004400;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.sign-btn:active {
    background: #005500;
}

/* Entries list */
.guestbook-entries {
    padding: 8px;
    max-height: 500px;
    overflow-y: auto;
}

.infinite-guestbook-page .guestbook-entry {
    border-bottom: 1px solid #1a2a1a;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    transition: background 0.1s;
    background: transparent;
}

.infinite-guestbook-page .guestbook-entry:hover {
    background: #0a1a0a;
}

.guestbook-entry-text {
    font-size: 13px;
    color: #33cc33;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.guestbook-entry-author {
    font-size: 11px;
    color: #228822;
    margin: 0;
    text-align: right;
}

/* Newly signed entries get a brief glow */
.guestbook-entry-new {
    animation: guestbook-glow 1s ease-out;
}

@keyframes guestbook-glow {
    0% { background: #003300; }
    100% { background: transparent; }
}

.guestbook-footer {
    text-align: center;
    padding: 12px;
    border-top: 1px solid #1a3a1a;
    background: #0a1a0a;
    font-size: 11px;
    color: #226622;
}

/* ============================================================
   ASK THE ORB — Dark purple/black with glowing orb
   ============================================================ */

.ask-the-orb-page {
    background: #0a0010 !important;
    color: #bbaadd;
    padding: 0;
    text-align: center;
}

.orb-header {
    padding: 20px 8px 10px;
}

.orb-title {
    font-family: 'Georgia', serif !important;
    font-size: 28px;
    color: #cc99ff;
    text-shadow: 0 0 15px rgba(150, 100, 255, 0.5);
    margin: 0 0 4px 0;
    letter-spacing: 4px;
}

.orb-subtitle {
    font-family: 'Georgia', serif;
    font-size: 16px;
    color: #8866aa;
    margin: 0;
    font-style: italic;
}

/* The Orb container and the orb itself */
.orb-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

.the-orb {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 40% 40%,
        #e0b0ff,
        #9933ff 40%,
        #4400aa 70%,
        #1a0033
    );
    box-shadow:
        0 0 20px rgba(150, 50, 255, 0.6),
        0 0 40px rgba(150, 50, 255, 0.3),
        0 0 60px rgba(150, 50, 255, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    animation: orb-pulse 3s ease-in-out infinite;
}

@keyframes orb-pulse {
    0% { box-shadow: 0 0 20px rgba(150, 50, 255, 0.6), 0 0 40px rgba(150, 50, 255, 0.3), 0 0 60px rgba(150, 50, 255, 0.1); }
    50% { box-shadow: 0 0 30px rgba(150, 50, 255, 0.8), 0 0 60px rgba(150, 50, 255, 0.5), 0 0 90px rgba(150, 50, 255, 0.2); }
    100% { box-shadow: 0 0 20px rgba(150, 50, 255, 0.6), 0 0 40px rgba(150, 50, 255, 0.3), 0 0 60px rgba(150, 50, 255, 0.1); }
}

.the-orb:hover {
    animation: orb-pulse 1.5s ease-in-out infinite;
}

/* Input section */
.orb-input-section {
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.orb-question-input {
    width: 60%;
    max-width: 350px;
    padding: 8px 12px;
    font-family: 'Georgia', serif;
    font-size: 14px;
    background: #1a0033;
    color: #cc99ff;
    border: 1px solid #4400aa;
    outline: none;
}

.orb-question-input::placeholder {
    color: #553377;
}

.orb-question-input:focus {
    border-color: #9933ff;
    box-shadow: 0 0 8px rgba(150, 50, 255, 0.3);
}

.consult-btn {
    font-family: 'Georgia', serif;
    font-size: 14px;
    padding: 8px 20px;
    background: #2a0055;
    color: #cc99ff;
    border: 1px solid #6633aa;
    cursor: pointer;
    transition: background 0.2s;
}

.consult-btn:hover {
    background: #3a0077;
    box-shadow: 0 0 10px rgba(150, 50, 255, 0.3);
}

.consult-btn:active {
    background: #4a0099;
}

/* Response area */
.orb-response-area {
    padding: 20px;
    min-height: 40px;
}

.orb-response {
    font-family: 'Georgia', serif;
    font-size: 18px;
    color: #cc99ff;
    text-shadow: 0 0 10px rgba(200, 150, 255, 0.4);
    font-style: italic;
    margin: 0;
    animation: orb-response-appear 1s ease-in;
    cursor: pointer;
}

@keyframes orb-response-appear {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.orb-footer {
    padding: 16px 8px;
    font-family: 'Georgia', serif;
    font-size: 11px;
    color: #3a2255;
    border-top: 1px solid #1a0033;
}

/* ============================================================
   TIME CUBE — Chaotic multi-colored text on dark background
   ============================================================ */

.timecube-page {
    background: #111 !important;
    color: #ccc;
    padding: 0;
}

.timecube-header {
    text-align: center;
    padding: 16px 8px;
    background: #000;
    border-bottom: 4px solid #ff0000;
}

.timecube-logo {
    font-family: Impact, 'Arial Black', sans-serif !important;
    font-size: 42px;
    color: #ff0000;
    text-shadow:
        2px 2px 0 #ffff00,
        4px 4px 0 #00ff00;
    margin: 0;
    letter-spacing: 6px;
    animation: timecube-shake 0.5s infinite;
}

@keyframes timecube-shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* Content area with wall of text */
.timecube-content {
    padding: 16px;
}

.timecube-para {
    margin: 12px 0;
    line-height: 1.6;
    font-family: 'Times New Roman', serif;
    cursor: default;
}

/* Key phrases are clickable */
.key-phrase {
    cursor: pointer;
    padding: 4px 0;
    transition: text-shadow 0.2s;
}

.key-phrase:hover {
    text-shadow: 0 0 10px currentColor;
}

/* ASCII cube diagram */
.timecube-diagram-section {
    text-align: center;
    padding: 20px;
    border-top: 2px dashed #ffff00;
    border-bottom: 2px dashed #ffff00;
    margin: 16px;
}

.timecube-diagram-label {
    font-family: Impact, 'Arial Black', sans-serif !important;
    font-size: 22px;
    margin: 0 0 10px 0;
}

.cube-diagram {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.4);
    text-align: center;
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #333;
    background: #000;
    cursor: pointer;
    line-height: 1.4;
}

.cube-diagram:hover {
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
    border-color: #00ff00;
}

.timecube-footer {
    text-align: center;
    padding: 12px 8px;
    background: #000;
    border-top: 2px solid #ff0000;
    font-family: 'Times New Roman', serif;
    font-size: 12px;
    color: #666;
}

/* ============================================================
   UNDER CONSTRUCTION FOREVER — Yellow/black warning stripes
   ============================================================ */

.under-construction-page {
    background: #1a1a00 !important;
    color: #ffcc00;
    padding: 0;
}

.uc-header {
    text-align: center;
    padding: 16px 8px;
    background: repeating-linear-gradient(
        45deg,
        #ffcc00,
        #ffcc00 15px,
        #333 15px,
        #333 30px
    );
    border-bottom: 4px solid #ff9900;
}

.uc-title {
    font-family: Impact, 'Arial Black', sans-serif !important;
    font-size: 32px;
    color: #000;
    text-shadow: 1px 1px 0 #ffcc00;
    margin: 0 0 4px 0;
    background: rgba(255, 204, 0, 0.8);
    display: inline-block;
    padding: 4px 16px;
}

.uc-subtitle {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    background: rgba(255, 204, 0, 0.8);
    display: inline-block;
    padding: 2px 12px;
}

/* Click counter display */
.uc-counter {
    text-align: center;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #ffcc00;
    background: #1a1a00;
    border-bottom: 1px solid #333300;
}

.uc-counter-value {
    color: #ff9900;
    font-weight: bold;
}

/* Completion message area */
.uc-message-area {
    text-align: center;
    padding: 20px;
}

.uc-completion-msg {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    animation: void-fade-in 2s ease-in forwards;
    margin: 0;
}

/* Grid of construction signs (5 columns, 4 rows) */
.uc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 12px;
}

.construction-sign {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        #ffcc00,
        #ffcc00 8px,
        #222 8px,
        #222 16px
    );
    border: 2px solid #ff9900;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    animation: uc-scroll-sign 2s linear infinite;
}

@keyframes uc-scroll-sign {
    0% { background-position: 0 0; }
    100% { background-position: 22px 0; }
}

.construction-sign:hover {
    transform: scale(1.05);
    border-color: #ffff00;
}

.construction-sign-text {
    font-size: 28px;
    filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.5));
}

/* Faded-out state after clicking */
.construction-sign-removed {
    opacity: 0.3;
    transform: scale(0.9);
}

/* The final special sign after 100 clicks */
.construction-sign-final {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    padding: 30px;
    background: linear-gradient(
        45deg,
        #ffcc00,
        #ff9900,
        #ffcc00
    );
    animation: none;
    border: 4px solid #ffff00;
}

.construction-sign-final .construction-sign-text {
    font-size: 48px;
}

.uc-footer {
    text-align: center;
    padding: 12px 8px;
    background: #0d0d00;
    border-top: 2px solid #333300;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #666600;
}

/* ============================================================
   ETHEL'S INTERNET CORNER — Warm, floral, pastel
   A beacon of light in the weird web.
   ============================================================ */

.grandma-page {
    background: #fff5f0 !important;
    color: #4a3728;
    padding: 0;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}

.grandma-header {
    text-align: center;
    padding: 16px 8px 12px;
    background: linear-gradient(to bottom, #ffe0ec, #ffd6e0);
    border-bottom: 3px solid #ffb0c8;
}

.grandma-logo {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
    font-size: 28px;
    color: #cc3366;
    text-shadow: 1px 1px 0 #ffccdd;
    margin: 0 0 4px 0;
    letter-spacing: 1px;
}

.grandma-welcome {
    font-size: 16px;
    color: #996677;
    margin: 0;
    font-style: italic;
}

/* Section titles for Ethel's page */
.grandma-section-title {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
    font-size: 20px;
    color: #cc3366;
    margin: 0 0 10px 0;
    padding-bottom: 4px;
    border-bottom: 2px dashed #ffb0c8;
}

/* Garden section */
.grandma-garden {
    padding: 12px;
    margin: 8px;
    background: #f0fff0;
    border: 2px solid #99cc99;
    border-radius: 8px;
}

.grandma-garden-plot {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    background: linear-gradient(to top, #8B4513 0%, #8B4513 15%, #90EE90 15%, #90EE90 100%);
    border-radius: 6px;
    min-height: 100px;
    align-items: flex-end;
}

/* CSS flowers with stems and blooms */
.garden-flower {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.garden-flower:hover {
    transform: scale(1.1) rotate(5deg);
}

.flower-stem {
    width: 4px;
    height: 40px;
    background: #228B22;
    border-radius: 2px;
}

.flower-bloom {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-bottom: -2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    order: -1;
}

.flower-center {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFD700;
    margin-top: -18px;
    margin-bottom: 6px;
    order: -1;
    z-index: 1;
}

/* Blog posts */
.grandma-blog {
    padding: 12px;
    margin: 8px;
    background: #fff;
    border: 2px solid #ddbba0;
    border-radius: 8px;
}

.blog-post {
    padding: 10px;
    margin-bottom: 8px;
    background: #fffaf0;
    border: 1px solid #eeddc8;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.blog-post:hover {
    background: #fff0e0;
}

.blog-post-date {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #cc6633;
    margin: 0 0 6px 0;
    font-weight: bold;
}

.blog-post-text {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #554433;
    margin: 0;
    line-height: 1.6;
}

/* Email button */
.grandma-email-section {
    text-align: center;
    padding: 12px;
    margin: 8px;
}

.email-ethel {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 24px;
    background: linear-gradient(to bottom, #ffccdd, #ff99bb);
    color: #993355;
    border: 3px outset #ffaacc;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.1s;
}

.email-ethel:hover {
    transform: scale(1.05);
    background: linear-gradient(to bottom, #ffddee, #ffaacc);
}

.email-ethel:active {
    border-style: inset;
}

/* Photo album link */
.grandma-album-section {
    text-align: center;
    padding: 8px;
    margin: 4px 8px;
}

.photo-album-link {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #cc3366 !important;
    text-decoration: underline;
    cursor: pointer;
}

.photo-album-link:hover {
    color: #ff3377 !important;
}

/* Recipe section */
.grandma-recipe {
    padding: 12px;
    margin: 8px;
    background: #fffff0;
    border: 2px solid #ddbba0;
    border-radius: 8px;
    cursor: pointer;
}

.grandma-recipe:hover {
    background: #fff8e0;
}

.grandma-recipe-list {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #554433;
    padding-left: 24px;
    margin: 8px 0;
    line-height: 1.8;
}

.grandma-recipe-note {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 13px;
    color: #887766;
    font-style: italic;
    margin: 8px 0 0 0;
}

/* Visitor counter */
.grandma-counter {
    text-align: center;
    padding: 10px;
    margin: 8px;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #996677;
}

.grandma-counter-num {
    font-family: 'Courier New', monospace;
    background: #ffccdd;
    color: #cc3366;
    padding: 2px 8px;
    border: 1px inset #ffaacc;
}

/* Footer */
.grandma-footer {
    text-align: center;
    padding: 16px 8px;
    background: linear-gradient(to bottom, #ffd6e0, #ffe0ec);
    border-top: 3px solid #ffb0c8;
    font-size: 12px;
    color: #996677;
}

.grandma-footer p {
    margin: 4px 0;
}

/* ============================================================
   ZONE 3 — THE DEEP WEB
   Dark, minimal, unsettling. Near-black backgrounds,
   monospace fonts, VHS scanlines, glitch effects.
   ============================================================ */

/* ============================================================
   FOUND FOOTAGE — VHS archive with eerie photographs
   ============================================================ */

.found-footage-page {
    background: #080808 !important;
    color: #777;
    padding: 0;
    position: relative;
}

/* Film grain noise overlay */
.found-footage-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><rect x="0" y="0" width="1" height="1" fill="rgba(255,255,255,0.03)"/><rect x="3" y="2" width="1" height="1" fill="rgba(255,255,255,0.02)"/><rect x="1" y="4" width="1" height="1" fill="rgba(255,255,255,0.03)"/><rect x="4" y="5" width="1" height="1" fill="rgba(255,255,255,0.02)"/></svg>');
    pointer-events: none;
    z-index: 1;
}

.found-header {
    text-align: center;
    padding: 20px 8px 12px;
    border-bottom: 1px solid #1a1a1a;
}

.found-title {
    font-family: 'Courier New', monospace !important;
    font-size: 24px;
    color: #555;
    text-shadow: 0 0 4px rgba(100, 100, 100, 0.3);
    margin: 0 0 4px 0;
    letter-spacing: 4px;
}

.found-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #444;
    letter-spacing: 2px;
}

.found-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 16px;
}

.found-card {
    border: 1px solid #1a1a1a;
    padding: 8px;
    background: #0c0c0c;
}

/* The "photograph" — a dark rectangle */
.found-photo {
    width: 100%;
    height: 100px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s;
}

.found-photo:hover {
    border-color: #333;
}

.found-photo-large {
    height: 200px;
    margin-bottom: 8px;
}

/* Scene elements inside photos */
.found-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Window shape — faint yellow rectangle */
.found-scene-window::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 35%;
    width: 30%;
    height: 35%;
    background: rgba(60, 60, 0, 0.3);
    border: 1px solid rgba(80, 80, 0, 0.2);
}

/* Dots scattered — tiny white dots */
.found-scene-dots::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1px 1px at 20% 15%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 50% 30%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 75% 20%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 45% 85%, rgba(255, 255, 255, 0.3), transparent);
}

/* Green circle — forest clearing */
.found-scene-circle::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 30%;
    width: 40%;
    height: 50%;
    border-radius: 50%;
    background: rgba(26, 58, 26, 0.4);
}

/* Nearly all black with a faint lighter area */
.found-scene-faint::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 45%;
    width: 20%;
    height: 20%;
    background: rgba(30, 30, 30, 0.6);
    filter: blur(8px);
}

/* Thin white lines — web or grid */
.found-scene-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.08) 49%, rgba(255, 255, 255, 0.08) 51%, transparent 52%),
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.08) 49%, rgba(255, 255, 255, 0.08) 51%, transparent 52%);
    background-size: 25% 25%;
}

/* Completely black */
.found-scene-black {
    background: #000;
}

.found-filename {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #555;
    margin-top: 6px;
}

.found-date {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #444;
    margin-top: 2px;
}

.found-caption {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
    cursor: pointer;
}

.found-caption:hover {
    color: #888;
}

/* Expanded view (hidden by default) */
.found-expanded {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #1a1a1a;
}

.found-expanded-visible {
    display: block;
    animation: void-fade-in 1s ease-in forwards;
}

.found-hidden {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #555;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.5;
}

.found-footer {
    text-align: center;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #333;
    border-top: 1px solid #1a1a1a;
    letter-spacing: 1px;
}

/* ============================================================
   404 CLUB — Secret club behind a fake 404 page
   ============================================================ */

.club404-page {
    background: #000 !important;
    color: #aaa;
    padding: 0;
    min-height: 400px;
    position: relative;
}

.club404-error {
    padding: 40px 20px;
    font-family: 'Times New Roman', serif;
}

.club404-error h1 {
    font-family: 'Times New Roman', serif !important;
    font-size: 24px;
    font-weight: bold;
    color: #ccc;
    margin: 0 0 12px 0;
}

.error-text {
    cursor: pointer;
}

.error-text:hover {
    color: #ddd;
}

.club404-hr {
    border: none;
    height: 1px;
    background: #333;
    margin: 16px 0;
}

.club404-server-sig {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Hidden corner text — barely visible */
.hidden-corner {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    padding: 8px;
    transition: color 0.5s;
    z-index: 10;
}

.hidden-corner:hover {
    color: rgba(255, 255, 255, 0.25);
}

.club404-corner-top-left {
    top: 4px;
    left: 4px;
}

.club404-corner-top-right {
    top: 4px;
    right: 4px;
}

.club404-corner-bottom-left {
    bottom: 4px;
    left: 4px;
}

.club404-corner-bottom-right {
    bottom: 4px;
    right: 4px;
}

/* Members area */
.club404-members {
    padding: 40px 20px;
    text-align: center;
}

.club404-members-title {
    font-family: 'Courier New', monospace !important;
    font-size: 28px;
    color: #ccc;
    letter-spacing: 6px;
    margin: 0 0 4px 0;
}

.club404-members-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #666;
    letter-spacing: 4px;
    margin-bottom: 30px;
}

.club404-rules {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.club-rule {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #aaa;
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease-in, transform 0.8s ease-in;
    cursor: pointer;
}

.club-rule:hover {
    color: #ddd;
}

.club-rule-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   LAST VISITOR 1997 — Sarah's abandoned personal homepage
   Desaturated Zone 1 colors — a page left in the rain for 29 years
   ============================================================ */

.sarah-page {
    background: #1a1a18 !important;
    color: #8a8a78;
    padding: 0;
    font-family: 'Times New Roman', serif;
    filter: sepia(0.15) saturate(0.4) brightness(0.85);
}

.sarah-header {
    text-align: center;
    padding: 16px 8px 8px;
    background: #1e1e1a;
    border-bottom: 2px solid #2a2a24;
}

.sarah-title {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
    font-size: 24px;
    color: #9a9a78;
    margin: 0 0 4px 0;
}

.sarah-updated {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #666650;
    cursor: pointer;
}

.sarah-hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #3a3a30, transparent);
    margin: 8px 0;
}

.sarah-counter {
    text-align: center;
    padding: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #666650;
}

.sarah-counter-value {
    font-family: 'Courier New', monospace;
    background: #0a0a08;
    color: #447744;
    padding: 2px 8px;
    border: 2px inset #333;
    cursor: pointer;
}

.sarah-about {
    padding: 12px;
    margin: 8px;
    background: #1c1c18;
    border: 1px solid #2a2a24;
}

.sarah-about h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #8a8a6a;
    margin: 0 0 8px 0;
}

.sarah-about p {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #7a7a68;
    line-height: 1.6;
}

.sarah-links {
    padding: 12px;
    margin: 8px;
    background: #1c1c18;
    border: 1px solid #2a2a24;
}

.sarah-links h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #8a8a6a;
    margin: 0 0 8px 0;
}

.sarah-links-list {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
}

.sarah-links-list li {
    padding: 4px 0;
}

.sarah-link {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #556688 !important;
    text-decoration: underline;
    cursor: pointer;
}

.sarah-link:hover {
    color: #7788aa !important;
}

.sarah-dead-link-msg {
    font-size: 11px;
    color: #664444;
    font-style: italic;
    margin-top: 2px;
}

.sarah-promise {
    text-align: center;
    padding: 12px;
    margin: 8px;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 14px;
    color: #666650;
    font-style: italic;
}

.sarah-guestbook {
    padding: 12px;
    margin: 8px;
    background: #1c1c18;
    border: 1px solid #2a2a24;
}

.sarah-guestbook h2 {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 16px;
    color: #8a8a6a;
    margin: 0 0 8px 0;
    border-bottom: 1px dashed #2a2a24;
    padding-bottom: 4px;
}

.sarah-gb-entry {
    padding: 8px;
    border-bottom: 1px dashed #222220;
}

.sarah-gb-entry:last-child {
    border-bottom: none;
}

.sarah-gb-text {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 13px;
    color: #7a7a68;
}

.sarah-gb-date {
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    color: #555540;
    margin-top: 2px;
    text-align: right;
}

/* Today's guestbook entry — eerie highlight */
.today-entry {
    background: rgba(60, 60, 40, 0.2);
    border: 1px solid #3a3a2a;
    cursor: pointer;
}

.today-entry:hover {
    background: rgba(80, 80, 50, 0.3);
}

.today-entry .sarah-gb-text {
    color: #aaa;
}

.sarah-footer {
    text-align: center;
    padding: 12px;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    color: #444430;
    border-top: 1px solid #2a2a24;
}

/* ============================================================
   MIRROR.MIRROR.MIRROR — Inverted reflection of the last site
   ============================================================ */

.mirror-page {
    background: #0a0a0a !important;
    color: #888;
    padding: 0;
    min-height: 400px;
}

.mirror-top-text {
    text-align: center;
    padding: 20px 8px 10px;
}

.mirror-bottom-text {
    text-align: center;
    padding: 10px 8px 20px;
}

.mirror-text {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #444;
    letter-spacing: 2px;
    cursor: pointer;
    transition: color 0.3s;
}

.mirror-text:hover {
    color: #666;
}

/* Mirror content area — inverted colors */
.mirror-content {
    position: relative;
    margin: 0 16px;
    border: 1px solid #222;
    overflow: hidden;
    min-height: 200px;
    cursor: pointer;
}

.mirror-sub-container {
    filter: invert(1) hue-rotate(180deg);
    opacity: 0.7;
    pointer-events: none;
}

/* Glass overlay texture */
.mirror-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%, rgba(255, 255, 255, 0.03) 60%, transparent 100%),
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 8px);
    pointer-events: none;
    z-index: 5;
}

.mirror-empty {
    text-align: center;
    padding: 60px 20px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #555;
    font-style: italic;
}

/* Mirror crack */
.mirror-crack {
    text-align: center;
    padding: 20px;
    cursor: pointer;
}

.mirror-crack-line {
    display: inline-block;
    width: 200px;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #333 20%,
        #555 35%,
        transparent 36%,
        #444 50%,
        transparent 51%,
        #555 65%,
        #333 80%,
        transparent 100%
    );
    position: relative;
    transition: all 0.3s;
}

.mirror-crack-line::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 40%;
    width: 1px;
    height: 18px;
    background: linear-gradient(to bottom, transparent, #444, transparent);
    transform: rotate(-20deg);
}

.mirror-crack-line::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 60%;
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, transparent, #444, transparent);
    transform: rotate(15deg);
}

.mirror-crack:hover .mirror-crack-line {
    background: linear-gradient(
        to right,
        transparent 0%,
        #555 20%,
        #777 35%,
        transparent 36%,
        #666 50%,
        transparent 51%,
        #777 65%,
        #555 80%,
        transparent 100%
    );
}

/* Shatter animation */
.mirror-shattered {
    animation: mirror-shatter 0.6s ease-out forwards;
}

@keyframes mirror-shatter {
    0% {
        opacity: 1;
        filter: none;
    }
    30% {
        filter: blur(2px) brightness(1.5);
    }
    60% {
        opacity: 0.5;
        filter: blur(4px);
    }
    100% {
        opacity: 0.1;
        filter: blur(8px) grayscale(1);
    }
}

.mirror-reveal-text {
    text-align: center;
    padding: 30px 20px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #777;
    letter-spacing: 1px;
    animation: void-fade-in 2s ease-in forwards;
}

/* ============================================================
   THE END OF THE INTERNET — The final site
   ============================================================ */

.end-page {
    background: #050505 !important;
    color: #888;
    padding: 0;
}

.end-center-block {
    text-align: center;
    padding: 80px 20px 40px;
}

.end-text {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #777;
    margin: 0 0 20px 0;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1.6;
}

.end-text:first-child {
    font-size: 24px;
    color: #999;
    margin-bottom: 30px;
}

.end-text:hover {
    color: #999;
}

.end-spacer {
    height: 400px;
}

.end-cursor-area {
    text-align: center;
    padding: 20px;
}

/* Blinking cursor animation */
.end-cursor {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 24px;
    color: #555;
    cursor: pointer;
    animation: end-blink 1s steps(1) infinite;
}

@keyframes end-blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.end-cursor:hover {
    color: #888;
}

.end-reveal-container {
    margin-top: 20px;
}

.end-revealed-line {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #666;
    margin: 0 0 16px 0;
    animation: void-fade-in 1.5s ease-in forwards;
    line-height: 1.5;
}

/* Return link at the very end */
.return-link {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #999;
    margin-top: 40px;
    padding: 12px 24px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: color 0.3s;
    animation: void-fade-in 2s ease-in forwards;
}

.return-link:hover {
    color: #ccc;
}