/* ═══════════════════════════════════════════════════
   ZEALPALACE — GEOCITIES AESTHETIC (circa 1997)
   "Best viewed in Netscape Navigator 4.0 at 800x600"
   ═══════════════════════════════════════════════════ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: #000022;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #ffffff44, transparent),
        radial-gradient(1px 1px at 30% 70%, #ffffff33, transparent),
        radial-gradient(1px 1px at 50% 40%, #ffffff22, transparent),
        radial-gradient(1px 1px at 70% 80%, #ffffff44, transparent),
        radial-gradient(1px 1px at 90% 10%, #ffffff33, transparent),
        radial-gradient(1px 1px at 15% 90%, #ffffff22, transparent),
        radial-gradient(1px 1px at 45% 55%, #ffffff44, transparent),
        radial-gradient(1px 1px at 75% 30%, #ffffff33, transparent),
        radial-gradient(1px 1px at 85% 65%, #ffffff22, transparent),
        radial-gradient(1px 1px at 5% 50%, #ffffff44, transparent),
        radial-gradient(1px 1px at 60% 15%, #ffffff33, transparent),
        radial-gradient(1px 1px at 25% 45%, #ffffff22, transparent),
        radial-gradient(2px 2px at 40% 90%, #ffff0066, transparent),
        radial-gradient(2px 2px at 80% 50%, #00ffff44, transparent),
        radial-gradient(1.5px 1.5px at 95% 95%, #ff00ff33, transparent);
    background-size: 300px 300px;
    background-attachment: fixed;
    color: #00ff00;
    font-family: "Courier New", "Lucida Console", monospace;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext x='0' y='14' font-size='14'%3E%E2%98%A0%3C/text%3E%3C/svg%3E"), auto;
}

/* --- Container --- */
.palace {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 16px;
    border-left: 2px solid #333366;
    border-right: 2px solid #333366;
    background: #000022ee;
}

/* --- Typography --- */
h1 {
    text-align: center;
    color: #ff00ff;
    font-size: 2em;
    text-shadow: 3px 3px #0000ff, -2px -2px #ff0066, 0 0 20px #ff00ff88;
    margin: 0.3em 0;
    letter-spacing: 2px;
}

h2 {
    color: #ffff00;
    text-align: center;
    text-shadow: 1px 1px #ff660088;
    font-size: 1.3em;
    margin: 0.5em 0;
}

h3 {
    color: #00ffff;
    border-bottom: 1px dashed #00ffff44;
    padding-bottom: 4px;
    margin-top: 1.5em;
}

a { color: #ff6600; text-decoration: underline; }
a:hover { color: #ff0000; text-decoration: underline overline; text-shadow: 0 0 8px #ff000088; }
a:visited { color: #cc6600; }

code, pre {
    background: #0a0a2a;
    color: #00ff00;
    border: 1px solid #004400;
    padding: 1px 4px;
    font-family: "Courier New", monospace;
}

pre {
    padding: 10px;
    overflow-x: auto;
    line-height: 1.2;
}

pre.ascii {
    color: #00ff00;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    border: none;
    background: transparent;
    text-shadow: 0 0 4px #00ff0044;
}

p { margin: 0.6em 0; }

/* --- Marquee (CSS-only) --- */
.marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    color: #ff0000;
    text-align: center;
    font-size: 13px;
    padding: 4px 0;
    border-top: 1px solid #330000;
    border-bottom: 1px solid #330000;
    background: #110000;
}

.marquee-wrap span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 28s linear infinite;
}

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

/* --- Blinking --- */
.blink { animation: blink-anim 1s step-end infinite; }
@keyframes blink-anim { 50% { opacity: 0; } }

/* --- NEW! tag --- */
.new-tag {
    display: inline-block;
    background: #ff0000;
    color: #ffff00;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 2px;
    animation: new-pulse 0.6s ease-in-out infinite alternate;
    vertical-align: middle;
    margin-left: 4px;
}
@keyframes new-pulse {
    0%   { background: #ff0000; transform: scale(1); }
    100% { background: #cc0000; transform: scale(1.15); }
}

/* --- Fire Divider --- */
.fire-divider {
    text-align: center;
    font-size: 16px;
    line-height: 1;
    padding: 4px 0;
    letter-spacing: -1px;
}

.fire-divider .flame {
    display: inline-block;
    animation: flicker 0.3s ease-in-out infinite alternate;
}
.fire-divider .flame:nth-child(2n) { animation-delay: 0.1s; }
.fire-divider .flame:nth-child(3n) { animation-delay: 0.2s; }
.fire-divider .flame:nth-child(5n) { animation-delay: 0.05s; }

@keyframes flicker {
    0%   { color: #ff0000; transform: scaleY(1); }
    50%  { color: #ff6600; transform: scaleY(1.2); }
    100% { color: #ffcc00; transform: scaleY(0.9); }
}

/* --- Spinning Globe --- */
.globe {
    display: inline-block;
    animation: spin-globe 3s linear infinite;
    font-size: 22px;
}
@keyframes spin-globe {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* --- Rainbow HR --- */
.rainbow-hr {
    height: 4px;
    border: none;
    margin: 14px 0;
    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
    background-size: 200% 100%;
    animation: rainbow-scroll 3s linear infinite;
}
@keyframes rainbow-scroll {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* --- Construction Tape --- */
.construction-tape {
    text-align: center;
    padding: 6px;
    margin: 8px 0;
    background: repeating-linear-gradient(45deg, #000 0px, #000 10px, #ffcc00 10px, #ffcc00 20px);
    border: 2px solid #ffcc00;
    font-weight: bold;
    color: #000;
    font-size: 12px;
}

/* --- Sparkle Field --- */
.sparkle-field {
    position: relative;
    height: 22px;
    overflow: hidden;
}
.sparkle {
    position: absolute;
    animation: twinkle 1.5s ease-in-out infinite;
    color: #ffff00;
    font-size: 10px;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* --- Stats Table --- */
table.stats {
    border: 2px ridge #00ff00;
    border-collapse: collapse;
    margin: 10px auto;
    background: #000a00;
    width: 100%;
}
table.stats td, table.stats th {
    border: 1px solid #004400;
    padding: 5px 10px;
    font-size: 12px;
    text-align: left;
}
table.stats td:first-child, table.stats th:first-child {
    color: #00cccc;
    font-weight: bold;
    white-space: nowrap;
}

/* --- Cast Table --- */
table.cast {
    border: 2px ridge #ff00ff;
    border-collapse: collapse;
    margin: 10px auto;
    background: #0a000a;
    width: 100%;
}
table.cast td, table.cast th {
    border: 1px solid #440044;
    padding: 5px 8px;
    font-size: 12px;
}
table.cast th {
    background: #220022;
    color: #ff00ff;
}

/* --- Demo Box (IRC/Terminal mockups) --- */
.demo-box {
    background: #0a0a0a;
    border: 2px inset #333;
    padding: 10px;
    margin: 10px 0;
    font-size: 12px;
    line-height: 1.4;
    overflow-x: auto;
}

.demo-box .nick-zealot { color: #ff00ff; font-weight: bold; }
.demo-box .nick-chmod { color: #ff6600; font-weight: bold; }
.demo-box .nick-nova { color: #00ccff; font-weight: bold; }
.demo-box .nick-dark { color: #ff0000; font-weight: bold; }
.demo-box .nick-pixel { color: #00ff00; font-weight: bold; }
.demo-box .nick-sage { color: #ffff00; font-weight: bold; }
.demo-box .nick-glitch { color: #ff66ff; font-weight: bold; }
.demo-box .nick-bot { color: #66ffff; font-weight: bold; }
.demo-box .nick-dm { color: #ffcc00; font-weight: bold; }
.demo-box .system { color: #666; font-style: italic; }
.demo-box .action { color: #cc66ff; font-style: italic; }
.demo-box .cmd { color: #00ff00; }
.demo-box .monster { color: #ff3333; }

/* --- Section Box --- */
.section-box {
    border: 2px ridge #333;
    padding: 12px;
    margin: 12px 0;
    background: #05051a;
}

.section-box.green  { border-color: #00ff00; }
.section-box.purple { border-color: #ff00ff; }
.section-box.cyan   { border-color: #00ffff; }
.section-box.yellow { border-color: #ffff00; }
.section-box.red    { border-color: #ff0000; }

/* --- Counter --- */
.counter {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin: 16px 0;
}
.counter-digits {
    display: inline-block;
    background: #000;
    border: 2px inset #444;
    padding: 3px 8px;
    font-family: "Courier New", monospace;
    letter-spacing: 4px;
}
.counter-digits b {
    color: #00ff00;
    font-size: 20px;
    text-shadow: 0 0 8px #00ff00;
}

/* --- Badges --- */
.badge-row {
    text-align: center;
    margin: 12px 0;
}
.badge {
    display: inline-block;
    border: 2px outset #444;
    padding: 3px 8px;
    margin: 3px;
    font-size: 10px;
    background: #111;
}
.badge-nn { border-color: #0066cc; color: #00ccff; background: #000044; }
.badge-linux { border-color: #ffcc00; color: #ffcc00; background: #222; }
.badge-pi { border-color: #cc0066; color: #ff66aa; background: #220022; }
.badge-ie { border-color: #00ccff; color: #99ffff; background: #001133; text-decoration: line-through; }
.badge-y2k { border-color: #00ff00; color: #00ff00; background: #002200; }
.badge-ollama { border-color: #ff6600; color: #ff6600; background: #221100; }

/* --- Webring --- */
.webring {
    text-align: center;
    margin: 20px 0;
    padding: 12px;
    border: 2px ridge #ff00ff;
    background: #110022;
}
.webring a {
    margin: 0 8px;
}

/* --- Guestbook --- */
.guestbook {
    background: #000044;
    border: 3px ridge #6666ff;
    padding: 12px;
    margin: 10px 0;
}
.guestbook-entry {
    border-bottom: 1px dotted #333366;
    padding: 6px 0;
    font-size: 12px;
}
.guestbook-entry:last-child { border-bottom: none; }
.guestbook-nick { color: #ff00ff; font-weight: bold; }
.guestbook-date { color: #666; font-size: 10px; }

/* --- Hardware Photo --- */
.hw-photo {
    text-align: center;
    margin: 16px 0;
}
.hw-photo img {
    max-width: 100%;
    width: 500px;
    border: 3px ridge #00ff00;
    box-shadow: 0 0 20px #00ff0033;
}

/* --- ASCII Monster --- */
.monster-card {
    display: inline-block;
    border: 1px solid #440000;
    padding: 8px;
    margin: 6px;
    background: #0a0000;
    text-align: center;
    vertical-align: top;
    min-width: 140px;
}
.monster-card pre {
    border: none;
    padding: 2px;
    margin: 0;
    background: transparent;
    color: #ff3333;
    font-size: 11px;
    line-height: 1.1;
}
.monster-card .name {
    color: #ff6600;
    font-weight: bold;
    font-size: 11px;
    margin-top: 4px;
}

/* --- Map --- */
.map-box {
    background: #050510;
    border: 2px ridge #00ffff;
    padding: 10px;
    margin: 10px 0;
    text-align: center;
}
.map-box pre {
    border: none;
    background: transparent;
    color: #00ffff;
    display: inline-block;
    text-align: left;
}

/* --- Footer --- */
footer {
    text-align: center;
    color: #666;
    font-size: 10px;
    margin-top: 20px;
    padding: 10px 0;
    border-top: 1px solid #222;
}

/* --- Slow Spin --- */
.spin-slow {
    display: inline-block;
    animation: spin-globe 6s linear infinite;
}

/* --- Glow Link --- */
.glow-link {
    animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
    0%   { text-shadow: 0 0 2px #ff6600; }
    100% { text-shadow: 0 0 12px #ff0000, 0 0 20px #ff6600; }
}

/* --- Typing cursor --- */
.cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: #00ff00;
    animation: cursor-blink 1s step-end infinite;
    vertical-align: text-bottom;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* --- ASCII portrait box --- */
.portrait {
    display: inline-block;
    border: 1px solid #333;
    padding: 4px;
    margin: 4px;
    background: #050510;
    text-align: center;
    vertical-align: top;
    min-width: 120px;
}
.portrait pre {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.1;
}
.portrait .label {
    font-size: 10px;
    margin-top: 2px;
    font-weight: bold;
}

/* --- Dead LAN box --- */
.dead-lan {
    border: 3px double #ff6600;
    padding: 16px;
    margin: 16px 0;
    background: #110800;
    text-align: center;
}
.dead-lan h3 {
    color: #ff6600;
    border: none;
    text-shadow: 0 0 10px #ff660066;
    font-size: 1.4em;
}
.dead-lan p {
    color: #ffcc88;
    max-width: 600px;
    margin: 0.5em auto;
}

/* --- Responsive (period-inaccurate but nice) --- */
@media (max-width: 640px) {
    .palace { padding: 6px 8px; }
    h1 { font-size: 1.3em; }
    pre.ascii { font-size: 8px; }
    .monster-card { min-width: 110px; }
}