/* web99.css — the 1999 homepage view. Everything is scoped under #web99. */

#web99 {
    min-height: 100vh; margin: 0; padding: 0 0 70px; position: relative;
    background: #000 radial-gradient(ellipse at 50% -10%, #102040 0, #000010 55%, #000 100%) fixed;
    font-family: Verdana, Arial, sans-serif; color: #fff; overflow-x: hidden;
}
#web99 .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#web99 .stars i { position: absolute; width: 2px; height: 2px; background: #fff; animation: w99-twinkle 3s ease-in-out infinite; }
#web99 .stars i.b { width: 3px; height: 3px; background: #ffe9a0; box-shadow: 0 0 4px #ffd; }
@keyframes w99-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

#web99 a { color: #00ffee; }
#web99 a:visited { color: #ff99ff; }
#web99 a:hover { color: #ffff00; }
#web99 .page-shell { position: relative; z-index: 1; width: 1000px; max-width: 100%; margin: 10px auto 0; border: 3px ridge #c8a050; background: rgba(0, 0, 34, 0.94); border-collapse: collapse; box-shadow: 0 0 40px rgba(242, 194, 48, 0.15); }
#web99 .page-shell > tbody > tr > td { vertical-align: top; }

/* ---- header ---- */
#web99 .header-cell { background: linear-gradient(180deg, #2a1400, #120800 70%, #000); padding: 8px 6px 4px; border-bottom: 3px ridge #c8a050; }
#web99 .hdr { display: flex; align-items: center; gap: 8px; }
#web99 .hdr .mid { flex: 1; text-align: center; min-width: 0; }
#web99 .hdr .right { width: 300px; flex: none; }
#web99 .spin-wrap { width: 150px; flex: none; perspective: 600px; }
#web99 .spin { animation: w99-spin 6s linear infinite; transform-style: preserve-3d; }
#web99 .spin svg { width: 150px; height: auto; display: block; }
@keyframes w99-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
#web99 .hdr .mid svg { width: 250px; max-width: 100%; height: auto; }
#web99 .site-title { font: 900 30px/1 "Cinzel Decorative", Cinzel, Impact, serif; letter-spacing: 2px; margin-top: 2px;
    background: linear-gradient(0deg, #ff3000, #ff9000 35%, #ffe000 60%, #fff6c0 85%); background-size: 100% 200%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: w99-flame 1.2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.6)); }
@keyframes w99-flame { from { background-position: 0 0; } to { background-position: 0 100%; } }
#web99 .slogan { font: italic 12px "Times New Roman", serif; color: #ffdd66; }
#web99 .backro { font-size: 10px; color: #8cc; margin-top: 2px; }

#web99 .torch { width: 26px; height: 120px; flex: none; position: relative; }
#web99 .torch::before { content: ""; position: absolute; left: 9px; top: 40px; width: 8px; height: 76px; background: linear-gradient(90deg, #3a2008, #8b5a2b, #3a2008); border: 1px solid #000; }
#web99 .torch::after { content: ""; position: absolute; left: 3px; top: 34px; width: 20px; height: 10px; background: #555; border: 1px solid #000; border-radius: 2px; }
#web99 .torch i { position: absolute; left: 1px; top: 2px; width: 24px; height: 36px; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
    background: radial-gradient(ellipse at 50% 80%, #fff8c0 0, #ffd000 25%, #ff7000 55%, rgba(255, 40, 0, 0.6) 75%, transparent 78%);
    animation: w99-fire 0.35s ease-in-out infinite alternate; transform-origin: 50% 100%; filter: drop-shadow(0 0 8px #ff7000); }
@keyframes w99-fire { from { transform: scale(1, 1) skewX(-3deg); opacity: 0.9; } to { transform: scale(0.9, 1.12) skewX(4deg); opacity: 1; } }

#web99 .banner { border: 2px groove #00ffff; background: #000; margin-bottom: 4px; overflow: hidden; white-space: nowrap; position: relative; height: 24px; }
#web99 .marquee { position: absolute; left: 100%; top: 0; display: block; animation: w99-marq 40s linear infinite; font-size: 12px; color: #00ff99; line-height: 20px; }
#web99 .marquee b { color: #ff0; }
@keyframes w99-marq { to { left: 0; transform: translateX(-100%); } }
#web99 .counter { font-size: 11px; text-align: right; }
#web99 .odo { display: inline-flex; background: #000; border: 2px inset #555; padding: 1px 2px; gap: 1px; vertical-align: middle; }
#web99 .odo span { display: inline-block; width: 11px; height: 16px; overflow: hidden; background: linear-gradient(#222, #000 50%, #222); color: #0f0; font: bold 13px/16px "Courier New", monospace; text-align: center; }
#web99 .odo span b { display: block; font-weight: bold; transition: transform 2.4s cubic-bezier(.2, .8, .2, 1); }

#web99 .backbtn {
    font: bold 13px "Arial Black", Arial, sans-serif; color: #000 !important; background: linear-gradient(#ffe680, #f2c230 50%, #b8860b);
    border: 3px outset #f2c230; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
#web99 .backbtn:active { border-style: inset; }
#web99 .backbtn img { width: 24px; height: 24px; }
#web99 .float-back { position: fixed; right: 12px; bottom: 54px; z-index: 50; box-shadow: 3px 3px 0 #000; animation: w99-pulse 2s ease-in-out infinite; }
@keyframes w99-pulse { 50% { filter: brightness(1.25); } }

/* ---- layout cells ---- */
#web99 .nav-cell { width: 180px; background: #000011; border-right: 1px solid #003333; padding: 4px; }
#web99 .content-cell { background: transparent; padding: 6px 10px; }
#web99 .sidebar-cell { width: 210px; background: #000011; border-left: 1px solid #003333; padding: 4px; }
#web99 .box-title { font: 11px "Courier New", monospace; color: #00ffcc; background: #001133; border: 1px solid #00ffff; text-align: center; padding: 3px; }
#web99 .nav a { display: flex; align-items: center; gap: 4px; background: #000022; border-bottom: 1px solid #002244; font-size: 11px; padding: 4px 6px; text-decoration: none; }
#web99 .nav a:hover { text-decoration: underline; background: #001a3a; }
#web99 .nav a img { width: 16px; height: 16px; flex: none; }
#web99 .nav a:hover img { animation: w99-wiggle 0.4s steps(2) infinite; }
@keyframes w99-wiggle { 50% { transform: rotate(-20deg) scale(1.15); } }
#web99 .status { font-size: 11px; padding: 4px; line-height: 1.5; }
#web99 .led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0f0; box-shadow: 0 0 6px #0f0; animation: w99-blink 1s steps(2, start) infinite; vertical-align: 0; }
#web99 .led.off { background: #f00; box-shadow: 0 0 6px #f00; }
#web99 .blink { animation: w99-blink 1s steps(2, start) infinite; }
@keyframes w99-blink { to { visibility: hidden; } }
#web99 .rainbow { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: w99-rb 3s linear infinite; font-weight: bold; }
@keyframes w99-rb { to { background-position: 200% 0; } }
#web99 hr.rb { border: 0; height: 3px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-size: 200% 100%; animation: w99-rb 2s linear infinite; margin: 10px 0; }
#web99 .new { display: inline-block; font: bold 9px Arial, sans-serif; color: #fff; background: #e00; padding: 1px 4px; margin-left: 4px; transform: rotate(-8deg); animation: w99-new 0.8s ease-in-out infinite alternate; vertical-align: 2px; }
@keyframes w99-new { to { transform: rotate(8deg) scale(1.15); background: #f80; } }

/* ---- sections ---- */
#web99 .section { margin-bottom: 14px; border: 1px solid #004466; background: rgba(0, 0, 16, 0.9); }
#web99 .section-title { font: bold 12px "Courier New", monospace; color: #00ffcc; background: linear-gradient(90deg, #001144, #003366, #001144); padding: 4px 6px; border-bottom: 1px solid #004466; display: flex; align-items: center; gap: 6px; }
#web99 .section-title img { width: 16px; height: 16px; }
#web99 .section-title .live { margin-left: auto; font: bold 10px Arial, sans-serif; color: #f33; display: flex; align-items: center; gap: 4px; }
#web99 .section-body { padding: 6px 8px; font-size: 12px; line-height: 1.45; }
#web99 .section-body p { margin: 4px 0; }
#web99 .uc { margin-top: 8px; padding: 6px; text-align: center; font: bold 11px Arial, sans-serif; color: #000;
    background: repeating-linear-gradient(-45deg, #ffcc00 0 12px, #000 12px 24px); background-size: 34px 34px; animation: w99-uc 1s linear infinite; }
@keyframes w99-uc { to { background-position: 34px 0; } }
#web99 .uc span { background: #ffcc00; padding: 2px 8px; }
#web99 .members, #web99 .tbl { width: 100%; border-collapse: collapse; background: #000022; }
#web99 .members th, #web99 .members td, #web99 .tbl th, #web99 .tbl td { border: 1px solid #004466; padding: 3px 4px; font-size: 11px; vertical-align: top; }
#web99 .members th, #web99 .tbl th { background: #001144; color: #00ffcc; text-align: left; }
#web99 .tbl tr:hover td { background: #001a3a; }
#web99 .gold { color: #f2c230; }
#web99 .dim { color: #8aa; }
#web99 .up { color: #0f0; } #web99 .down { color: #f55; }
#web99 .build { margin: 8px 0; padding: 6px; border: 1px solid #004466; background: #000020; }
#web99 .build-title { font: 12px "Courier New", monospace; color: #ffdd66; margin-bottom: 4px; }
#web99 .build ol { margin: 0; padding-left: 22px; }
#web99 pre.form { background: #000; color: #00ff99; font: 11px "Courier New", monospace; padding: 6px; border: 1px inset #004466; white-space: pre-wrap; }
#web99 .hero { display: block; width: 100%; max-width: 480px; margin: 4px auto 8px; border: 3px ridge #c8a050; }
#web99 .center { text-align: center; }
#web99 .w99btn { font: bold 11px Arial, sans-serif; background: #c0c0c0; color: #000; border: 2px outset #fff; padding: 2px 8px; cursor: pointer; }
#web99 .w99btn:active { border-style: inset; }
#web99 .loadmsg { color: #0f0; font: 11px "Courier New", monospace; }
#web99 .loadmsg::after { content: "_"; animation: w99-blink 0.7s steps(2, start) infinite; }

/* tasty dubs */
#web99 .dubwrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#web99 .gauge { width: 170px; flex: none; text-align: center; }
#web99 .gauge svg { width: 170px; height: auto; }
#web99 .gauge .needle { transition: transform 2s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 85px 85px; }
#web99 .bestdub { flex: 1; min-width: 220px; border: 2px dashed #f2c230; padding: 6px 8px; background: #1a0d00; }
#web99 .bestdub .t { font: bold 13px Arial, sans-serif; color: #f2c230; }
#web99 .drums { display: inline-flex; gap: 1px; vertical-align: -3px; }
#web99 .drums img { width: 16px; height: 16px; }
#web99 .drums img.off { opacity: 0.2; filter: grayscale(1); }
#web99 .drums img:not(.off) { animation: w99-bob 1.2s ease-in-out infinite; }
#web99 .drums img:nth-child(2) { animation-delay: .15s; } #web99 .drums img:nth-child(3) { animation-delay: .3s; } #web99 .drums img:nth-child(4) { animation-delay: .45s; } #web99 .drums img:nth-child(5) { animation-delay: .6s; }
@keyframes w99-bob { 50% { transform: translateY(-3px); } }
#web99 .dublist li { margin: 3px 0; }

/* map pool */
#web99 .pool { font: 12px "Courier New", monospace; width: 100%; border-collapse: collapse; }
#web99 .pool td { padding: 1px 4px; white-space: nowrap; }
#web99 .pool .bar { color: #0f0; text-shadow: 0 0 4px #070; }
#web99 .pooltabs { margin-bottom: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
#web99 .pooltabs .on { background: #f2c230; border-style: inset; }

/* sidebar */
#web99 .sbox { border: 1px solid #004466; background: #000020; margin-bottom: 10px; }
#web99 .sbox .body { padding: 5px; font-size: 11px; line-height: 1.4; }
#web99 .shout p { margin: 3px 0; }
#web99 .b88 { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 31px; border: 1px solid #fff; font: bold 9px/1.05 Verdana, sans-serif; text-align: center; margin: 2px; vertical-align: top; overflow: hidden; }
#web99 .b88.a { background: linear-gradient(135deg, #000044, #004488); color: #fff; }
#web99 .b88.b { background: #000; color: #0f0; font-family: "Courier New", monospace; }
#web99 .b88.c { background: linear-gradient(#f2c230, #b8860b); color: #000; }
#web99 .b88.d { background: #800000; color: #ff0; animation: w99-flash 1s steps(2) infinite; }
@keyframes w99-flash { 50% { background: #ff0; color: #800000; } }
#web99 .b88.e { background: #fff; color: #000080; }
#web99 .b88.f { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #f00); background-size: 200% 100%; color: #000; animation: w99-rb 2s linear infinite; }
#web99 .b88.g { background: #000; padding: 0; }
#web99 .b88.g svg { height: 29px; width: auto; }
#web99 .webring { border: 1px dashed #00ffff; padding: 4px; font-size: 10px; text-align: center; }
#web99 .webring a { margin: 0 2px; }
#web99 .guestbook input, #web99 .guestbook textarea { background: #000; color: #0f0; border: 2px inset #446; font: 11px "Courier New", monospace; width: 100%; padding: 3px; margin: 2px 0; }
#web99 .guestbook button { font: bold 11px Arial, sans-serif; background: #c0c0c0; border: 2px outset #fff; padding: 2px 8px; margin-top: 2px; cursor: pointer; }
#web99 .guestbook .entry { border-bottom: 1px dotted #004466; padding: 4px 0; }
#web99 .guestbook .entry b { color: #ffdd66; }
#web99 .guestbook .entry i { color: #888; font-size: 10px; }

#web99 .footer { margin-top: 10px; text-align: center; font-size: 11px; }
#web99 .footer hr { border: 0; height: 2px; background: linear-gradient(90deg, transparent, #00ffff, transparent); }
#web99 .ie { color: #00ffcc; }

/* parade across the bottom of the screen */
#web99 .parade { position: fixed; left: 0; right: 0; bottom: 0; height: 44px; z-index: 40; pointer-events: none; overflow: hidden;
    background: linear-gradient(180deg, transparent, rgba(30, 60, 10, 0.9) 60%); border-top: 0; }
#web99 .parade .troop { position: absolute; bottom: 4px; left: -260px; display: flex; gap: 10px; align-items: flex-end; animation: w99-march 32s linear infinite; }
#web99 .parade .troop.r { animation-duration: 47s; animation-delay: -20s; }
#web99 .parade img { width: 32px; height: 32px; animation: w99-step 0.5s steps(2) infinite; }
#web99 .parade img.k { width: 40px; height: 40px; }
@keyframes w99-march { to { left: 105%; } }
@keyframes w99-step { 50% { transform: translateY(-2px); } }

/* cursor sparkles */
#web99 .spark { position: fixed; pointer-events: none; z-index: 60; font-size: 14px; line-height: 1; animation: w99-spark 0.9s ease-out forwards; text-shadow: 0 0 4px currentColor; }
@keyframes w99-spark { to { transform: translate(var(--dx), 26px) scale(0.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    #web99 *, #web99 *::before, #web99 *::after { animation: none !important; transition: none !important; }
    #web99 .marquee { position: static; padding-left: 4px; }
    #web99 .parade { display: none; }
}

@media (max-width: 860px) {
    #web99 .page-shell, #web99 .page-shell > tbody, #web99 .page-shell > tbody > tr, #web99 .page-shell > tbody > tr > td { display: block; width: auto !important; }
    #web99 .nav-cell, #web99 .sidebar-cell { border: 0; }
    #web99 .hdr { flex-wrap: wrap; justify-content: center; }
    #web99 .hdr .right { width: 100%; }
    #web99 .torch { display: none; }
    #web99 .spin-wrap { width: 90px; } #web99 .spin svg { width: 90px; }
    #web99 .site-title { font-size: 22px; }
    #web99 .members, #web99 .tbl { display: block; overflow-x: auto; }
}