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

:root {
  --cyan: #00ffff;
  --magenta: #ff00ff;
  --yellow: #ffff00;
  --lime: #00ff00;
  --red: #ff0000;
  --navy: #000080;
  --bg: #5588cc;
  --silver: #c0c0c0;
}

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

html {
  min-height: 100%;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 12px),
    linear-gradient(160deg, #88bbee 0%, #5599dd 40%, #3377cc 100%);
  background-attachment: fixed;
}

body {
  background: transparent;
  font-family: 'VT323', monospace;
  color: #fff;
  min-height: 100%;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpolygon points='0,0 0,20 5,15 8,22 11,21 8,14 14,14' fill='%2300ffff' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0, crosshair;
}

::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: var(--silver); border: 2px inset #fff; }
::-webkit-scrollbar-thumb { background: var(--navy); border: 2px outset #fff; }

/* ===== MARQUEE ===== */

/* ===== BANNER SPRITES ===== */
.top-banner {
  background: var(--magenta);
  border-bottom: 4px solid var(--yellow);
  border-top: 4px solid var(--yellow);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 0;
}

.banner-sprite-track {
  height: 28px;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
}

.banner-marquee-row {
  padding: 5px 0 6px;
}

/* Base sprite element — 1px = 2px on screen */
.bsprite {
  position: absolute;
  top: 4px;
  width: 2px;
  height: 2px;
  image-rendering: pixelated;
}

/* Each sprite walks across via animation */
@keyframes bwalk {
  0%   { left: -30px; }
  100% { left: calc(100% + 30px); }
}
@keyframes bwalk-rev {
  0%   { left: calc(100% + 30px); transform: scaleX(-1); }
  100% { left: -30px;              transform: scaleX(-1); }
}

/* leg wiggle */
@keyframes bleg {
  0%,100% { box-shadow: var(--s0); }
  50%      { box-shadow: var(--s1); }
}

/* ---- Kirby-blob (round pink thing) ---- */
.b-kirby {
  animation: bwalk 9s linear infinite;
  --c: #ff88bb;
  --e: #cc3366;
  --f: #ffaad4;
  box-shadow:
    /* body */
    2px 0px 0 0 var(--c), 4px 0px 0 0 var(--c), 6px 0px 0 0 var(--c),
    0px 2px 0 0 var(--c), 2px 2px 0 0 var(--c), 4px 2px 0 0 var(--c), 6px 2px 0 0 var(--c), 8px 2px 0 0 var(--c),
    0px 4px 0 0 var(--c), 2px 4px 0 0 var(--f), 4px 4px 0 0 var(--e), 6px 4px 0 0 var(--c), 8px 4px 0 0 var(--c),
    0px 6px 0 0 var(--c), 2px 6px 0 0 var(--c), 4px 6px 0 0 var(--c), 6px 6px 0 0 var(--c), 8px 6px 0 0 var(--c),
    2px 8px 0 0 var(--c), 4px 8px 0 0 var(--c), 6px 8px 0 0 var(--c),
    /* feet */
    0px 10px 0 0 var(--e), 2px 10px 0 0 var(--e), 6px 10px 0 0 var(--e), 8px 10px 0 0 var(--e),
    /* cheek */
    6px 6px 0 0 #ff6699;
  animation: bwalk 9s linear infinite;
}
.b-kirby-2 {
  animation: bwalk 9s 4.5s linear infinite;
  box-shadow:
    2px 0px 0 0 #ff88bb, 4px 0px 0 0 #ff88bb, 6px 0px 0 0 #ff88bb,
    0px 2px 0 0 #ff88bb, 2px 2px 0 0 #ff88bb, 4px 2px 0 0 #ff88bb, 6px 2px 0 0 #ff88bb, 8px 2px 0 0 #ff88bb,
    0px 4px 0 0 #ff88bb, 2px 4px 0 0 #ffaad4, 4px 4px 0 0 #cc3366, 6px 4px 0 0 #ff88bb, 8px 4px 0 0 #ff88bb,
    0px 6px 0 0 #ff88bb, 2px 6px 0 0 #ff88bb, 4px 6px 0 0 #ff88bb, 6px 6px 0 0 #ff88bb, 8px 6px 0 0 #ff88bb,
    2px 8px 0 0 #ff88bb, 4px 8px 0 0 #ff88bb, 6px 8px 0 0 #ff88bb,
    0px 10px 0 0 #cc3366, 2px 10px 0 0 #cc3366, 6px 10px 0 0 #cc3366, 8px 10px 0 0 #cc3366,
    6px 6px 0 0 #ff6699;
}

/* ---- Little ninja (black, red headband) ---- */
.b-ninja {
  animation: bwalk 7s 1s linear infinite;
  box-shadow:
    2px 0px 0 0 #222, 4px 0px 0 0 #222, 6px 0px 0 0 #222,
    2px 2px 0 0 #ff2222, 4px 2px 0 0 #ff2222, 6px 2px 0 0 #ff2222,
    0px 2px 0 0 #ff2222, 8px 2px 0 0 #ff2222,
    2px 4px 0 0 #333, 4px 4px 0 0 #fff, 6px 4px 0 0 #333,
    2px 6px 0 0 #333, 4px 6px 0 0 #333, 6px 6px 0 0 #333,
    0px 6px 0 0 #333, 8px 6px 0 0 #333,
    4px 8px 0 0 #333,
    2px 10px 0 0 #333, 6px 10px 0 0 #333;
}
.b-ninja-2 {
  animation: bwalk-rev 11s 2s linear infinite;
  box-shadow:
    2px 0px 0 0 #222, 4px 0px 0 0 #222, 6px 0px 0 0 #222,
    2px 2px 0 0 #ff2222, 4px 2px 0 0 #ff2222, 6px 2px 0 0 #ff2222,
    0px 2px 0 0 #ff2222, 8px 2px 0 0 #ff2222,
    2px 4px 0 0 #333, 4px 4px 0 0 #fff, 6px 4px 0 0 #333,
    2px 6px 0 0 #333, 4px 6px 0 0 #333, 6px 6px 0 0 #333,
    0px 6px 0 0 #333, 8px 6px 0 0 #333,
    4px 8px 0 0 #333,
    2px 10px 0 0 #333, 6px 10px 0 0 #333;
}

/* ---- Little wizard (purple robe, pointy hat) ---- */
.b-wizard {
  animation: bwalk 13s 3s linear infinite;
  box-shadow:
    4px 0px 0 0 #9944cc,
    2px 2px 0 0 #9944cc, 4px 2px 0 0 #9944cc, 6px 2px 0 0 #9944cc,
    2px 4px 0 0 #ffdd44, 4px 4px 0 0 #ffcc88, 6px 4px 0 0 #ffdd44,
    2px 6px 0 0 #9944cc, 4px 6px 0 0 #cc66ff, 6px 6px 0 0 #9944cc,
    0px 6px 0 0 #9944cc, 8px 6px 0 0 #9944cc,
    2px 8px 0 0 #9944cc, 4px 8px 0 0 #9944cc, 6px 8px 0 0 #9944cc,
    4px 10px 0 0 #9944cc,
    2px 10px 0 0 #9944cc, 6px 10px 0 0 #9944cc;
}

/* ---- Ghost (white, wavy bottom) ---- */
.b-ghost {
  animation: bwalk 15s 0.5s linear infinite;
  box-shadow:
    2px 0px 0 0 #eeeeff, 4px 0px 0 0 #eeeeff, 6px 0px 0 0 #eeeeff,
    0px 2px 0 0 #eeeeff, 2px 2px 0 0 #eeeeff, 4px 2px 0 0 #eeeeff, 6px 2px 0 0 #eeeeff, 8px 2px 0 0 #eeeeff,
    0px 4px 0 0 #eeeeff, 2px 4px 0 0 #3333ff, 4px 4px 0 0 #eeeeff, 6px 4px 0 0 #3333ff, 8px 4px 0 0 #eeeeff,
    0px 6px 0 0 #eeeeff, 2px 6px 0 0 #eeeeff, 4px 6px 0 0 #eeeeff, 6px 6px 0 0 #eeeeff, 8px 6px 0 0 #eeeeff,
    0px 8px 0 0 #eeeeff, 2px 8px 0 0 #eeeeff, 4px 8px 0 0 #eeeeff, 6px 8px 0 0 #eeeeff, 8px 8px 0 0 #eeeeff,
    0px 10px 0 0 #eeeeff, 4px 10px 0 0 #eeeeff, 8px 10px 0 0 #eeeeff;
  animation: bwalk-ghost 10s 0.5s linear infinite;
}
@keyframes bwalk-ghost {
  0%   { left: -30px; top: 4px; }
  25%  { top: 8px; }
  50%  { top: 4px; }
  75%  { top: 10px; }
  100% { left: calc(100% + 30px); top: 4px; }
}

/* ---- Little dino (green) ---- */
.b-dino {
  animation: bwalk 11s 6s linear infinite;
  box-shadow:
    4px 0px 0 0 #44bb44,
    2px 2px 0 0 #44bb44, 4px 2px 0 0 #44bb44, 6px 2px 0 0 #44bb44,
    0px 4px 0 0 #44bb44, 2px 4px 0 0 #44bb44, 4px 4px 0 0 #fff, 6px 4px 0 0 #44bb44, 8px 4px 0 0 #44bb44,
    0px 6px 0 0 #44bb44, 2px 6px 0 0 #44bb44, 4px 6px 0 0 #44bb44, 6px 6px 0 0 #44bb44, 8px 6px 0 0 #44bb44,
    2px 8px 0 0 #44bb44, 6px 8px 0 0 #44bb44, 8px 8px 0 0 #44bb44,
    0px 8px 0 0 #338833,
    2px 10px 0 0 #44bb44, 4px 10px 0 0 #44bb44, 6px 10px 0 0 #44bb44, 8px 10px 0 0 #44bb44;
}

/* ---- Lil robot (grey/blue) ---- */
.b-robot {
  animation: bwalk-rev 8s 3s linear infinite;
  box-shadow:
    0px 0px 0 0 #aaaacc, 2px 0px 0 0 #aaaacc, 4px 0px 0 0 #aaaacc, 6px 0px 0 0 #aaaacc, 8px 0px 0 0 #aaaacc,
    0px 2px 0 0 #8888aa, 2px 2px 0 0 #00ccff, 4px 2px 0 0 #8888aa, 6px 2px 0 0 #00ccff, 8px 2px 0 0 #8888aa,
    0px 4px 0 0 #8888aa, 2px 4px 0 0 #8888aa, 4px 4px 0 0 #8888aa, 6px 4px 0 0 #8888aa, 8px 4px 0 0 #8888aa,
    0px 6px 0 0 #8888aa, 2px 6px 0 0 #aaaacc, 4px 6px 0 0 #aaaacc, 6px 6px 0 0 #aaaacc, 8px 6px 0 0 #8888aa,
    0px 8px 0 0 #8888aa, 8px 8px 0 0 #8888aa,
    2px 10px 0 0 #8888aa, 4px 10px 0 0 #8888aa, 6px 10px 0 0 #8888aa, 8px 10px 0 0 #8888aa;
}

/* ---- Star (yellow, spinning) ---- */
.b-star {
  animation: bwalk 20s 1s linear infinite;
  box-shadow:
    4px 0px 0 0 #ffee00,
    2px 2px 0 0 #ffee00, 4px 2px 0 0 #ffee00, 6px 2px 0 0 #ffee00,
    0px 4px 0 0 #ffee00, 2px 4px 0 0 #ffee00, 4px 4px 0 0 #fff, 6px 4px 0 0 #ffee00, 8px 4px 0 0 #ffee00,
    2px 6px 0 0 #ffee00, 4px 6px 0 0 #ffee00, 6px 6px 0 0 #ffee00,
    4px 8px 0 0 #ffee00;
  animation: bwalk-spin 12s 1s linear infinite;
}
@keyframes bwalk-spin {
  0%   { left: -20px; transform: rotate(0deg); }
  100% { left: calc(100% + 20px); transform: rotate(720deg); }
}

/* leg-bob for all walking sprites */
.b-kirby, .b-kirby-2, .b-ninja, .b-ninja-2, .b-wizard, .b-dino, .b-robot {
  animation-timing-function: linear;
}
.b-kirby     { animation: bwalk 9s linear infinite, bbob 0.4s ease-in-out infinite alternate; }
.b-kirby-2   { animation: bwalk 9s 4.5s linear infinite, bbob 0.4s 0.2s ease-in-out infinite alternate; }
.b-ninja     { animation: bwalk 7s 1s linear infinite, bbob 0.25s ease-in-out infinite alternate; }
.b-ninja-2   { animation: bwalk-rev 11s 2s linear infinite, bbob 0.25s 0.1s ease-in-out infinite alternate; }
.b-wizard    { animation: bwalk 13s 3s linear infinite, bbob 0.5s ease-in-out infinite alternate; }
.b-dino      { animation: bwalk 11s 6s linear infinite, bbob 0.35s ease-in-out infinite alternate; }
.b-robot     { animation: bwalk-rev 8s 3s linear infinite, bbob 0.5s ease-in-out infinite alternate; }

@keyframes bbob {
  from { margin-top: 0px; }
  to   { margin-top: 2px; }
}

.marquee-text {
  display: inline-block;
  animation: scroll-left 18s linear infinite;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--yellow);
  text-shadow: 2px 2px #ff0000;
  letter-spacing: 4px;
}
@keyframes scroll-left {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ===== LAYOUT ===== */
.container { max-width: 820px; margin: 0 auto; padding: 10px; }
@media (min-width: 1100px) { .container { max-width: 1600px; } }

.layout-table { width: 100%; border-collapse: separate; border-spacing: 8px; }
.sidebar { width: 185px; vertical-align: top; }
.main-content { vertical-align: top; }

/* ===== PAGE TITLE ===== */
.page-title {
  text-align: center;
  margin: 16px 0;
  padding: 14px;
  background: rgba(0,0,60,0.55);
  border: 6px ridge var(--cyan);
  border-radius: 14px;
}
.page-title h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 2.5vw, 24px);
  color: var(--lime);
  text-shadow: 0 0 10px var(--lime), 3px 3px 0 var(--magenta);
  animation: blink-glow 1.5s step-end infinite;
  line-height: 1.6;
}
@keyframes blink-glow {
  0%, 100% { text-shadow: 0 0 10px var(--lime), 3px 3px 0 var(--magenta); }
  50%       { text-shadow: 0 0 30px var(--lime), 0 0 60px #00ff88, 3px 3px 0 var(--magenta); }
}
.subtitle {
  font-size: 20px;
  margin-top: 6px;
  animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
  0%   { color: #ff0000; } 16%  { color: #ff8800; } 33%  { color: #ffff00; }
  50%  { color: #00ff00; } 66%  { color: #00ffff; } 83%  { color: #ff00ff; } 100% { color: #ff0000; }
}

/* ===== CARDS ===== */
.win95 {
  position: relative;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  margin: 10px 0;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08);
  overflow: visible;
}
.win95-titlebar {
  background: rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 7px 12px;
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  display: flex; align-items: center; justify-content: space-between;
  text-shadow: 0 0 8px rgba(180,140,255,0.8);
  letter-spacing: 0.5px;
}
.win95-titlebar .title-icon { margin-right: 8px; font-size: 14px; }
.win95-buttons { display: none; }
.win95-content { padding: 14px; }

/* ===== NAVIGATION ===== */
.nav-box {
  position: relative;
  background: rgba(255,255,255,0.15);
  border: 3px ridge #cc88ff;
  padding: 8px 6px;
  border-radius: 12px;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.3);
}
.nav-box h3 {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff;
  margin-bottom: 8px; text-align: center;
  border-bottom: 2px dashed rgba(255,255,255,0.5);
  padding-bottom: 6px; letter-spacing: 1px;
  text-shadow: 0 0 6px #ffaa00, 1px 1px 0 #000;
}
.nav-box ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-box ul li { margin: 0; }

.nav-box a {
  display: flex; align-items: center;
  text-decoration: none;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  border: 3px solid; border-radius: 8px;
  overflow: hidden; letter-spacing: 0.3px; line-height: 1.2;
}
.nav-box a:active  { filter: brightness(0.8); transform: translateY(1px); }
.nav-box a:visited { filter: saturate(0.75); }

/* active page highlight */
.nav-box a.active { filter: brightness(1.3); box-shadow: 0 0 8px rgba(255,255,255,0.4); }

/* Junimo container */
.junimo { width: 36px; min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-label { flex: 1; padding: 0 6px; white-space: nowrap; }

/* always bounce */
.junimo-sprite { animation: junimo-bounce 0.7s steps(2) infinite; }
.nav-box li:nth-child(1) .junimo-sprite { animation-delay: 0.00s; }
.nav-box li:nth-child(2) .junimo-sprite { animation-delay: 0.09s; }
.nav-box li:nth-child(3) .junimo-sprite { animation-delay: 0.18s; }
.nav-box li:nth-child(4) .junimo-sprite { animation-delay: 0.27s; }
.nav-box li:nth-child(5) .junimo-sprite { animation-delay: 0.36s; }
.nav-box li:nth-child(6) .junimo-sprite { animation-delay: 0.45s; }
.nav-box li:nth-child(7) .junimo-sprite { animation-delay: 0.54s; }
.nav-box li:nth-child(8) .junimo-sprite { animation-delay: 0.63s; }

@keyframes junimo-bounce {
  0%   { transform: translateY(0px)  scaleY(1)   scaleX(1);    }
  50%  { transform: translateY(-3px) scaleY(1.1) scaleX(0.95); }
  100% { transform: translateY(0px)  scaleY(1)   scaleX(1);    }
}

@keyframes junimo-hop {
  0%   { transform: translateY(0px)   scaleY(1)    scaleX(1);    }
  20%  { transform: translateY(-12px) scaleY(1.2)  scaleX(0.85); }
  50%  { transform: translateY(-16px) scaleY(1.15) scaleX(0.9);  }
  75%  { transform: translateY(-4px)  scaleY(0.9)  scaleX(1.1);  }
  90%  { transform: translateY(0px)   scaleY(1.15) scaleX(0.9);  }
  100% { transform: translateY(0px)   scaleY(1)    scaleX(1);    }
}

.junimo-sprite.hopping {
  animation: junimo-hop 0.5s ease-out forwards !important;
}

.junimo-sprite {
  width: 2px; height: 2px;
  position: relative; display: block; image-rendering: pixelated;
}

/* Junimo pixel art */
.j-green   { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #5ecf4a,6px 6px 0 0 #5ecf4a,8px 6px 0 0 #5ecf4a,10px 6px 0 0 #5ecf4a,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #5ecf4a,6px 8px 0 0 #ffffff,8px 8px 0 0 #5ecf4a,10px 8px 0 0 #ffffff,12px 8px 0 0 #5ecf4a,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #5ecf4a,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #5ecf4a,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #5ecf4a,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #5ecf4a,6px 12px 0 0 #5ecf4a,8px 12px 0 0 #ff9999,10px 12px 0 0 #5ecf4a,12px 12px 0 0 #5ecf4a,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #5ecf4a,8px 14px 0 0 #5ecf4a,10px 14px 0 0 #5ecf4a,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #5ecf4a,8px 18px 0 0 #5ecf4a,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #5ecf4a,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #5ecf4a,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #5ecf4a; }
.j-yellow  { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #f5d020,6px 6px 0 0 #f5d020,8px 6px 0 0 #f5d020,10px 6px 0 0 #f5d020,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #f5d020,6px 8px 0 0 #ffffff,8px 8px 0 0 #f5d020,10px 8px 0 0 #ffffff,12px 8px 0 0 #f5d020,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #f5d020,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #f5d020,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #f5d020,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #f5d020,6px 12px 0 0 #f5d020,8px 12px 0 0 #ff9999,10px 12px 0 0 #f5d020,12px 12px 0 0 #f5d020,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #f5d020,8px 14px 0 0 #f5d020,10px 14px 0 0 #f5d020,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #f5d020,8px 18px 0 0 #f5d020,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #f5d020,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #f5d020,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #f5d020; }
.j-orange  { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #f07820,6px 6px 0 0 #f07820,8px 6px 0 0 #f07820,10px 6px 0 0 #f07820,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #f07820,6px 8px 0 0 #ffffff,8px 8px 0 0 #f07820,10px 8px 0 0 #ffffff,12px 8px 0 0 #f07820,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #f07820,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #f07820,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #f07820,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #f07820,6px 12px 0 0 #f07820,8px 12px 0 0 #ff9999,10px 12px 0 0 #f07820,12px 12px 0 0 #f07820,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #f07820,8px 14px 0 0 #f07820,10px 14px 0 0 #f07820,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #f07820,8px 18px 0 0 #f07820,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #f07820,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #f07820,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #f07820; }
.j-cyan    { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #20d8e0,6px 6px 0 0 #20d8e0,8px 6px 0 0 #20d8e0,10px 6px 0 0 #20d8e0,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #20d8e0,6px 8px 0 0 #ffffff,8px 8px 0 0 #20d8e0,10px 8px 0 0 #ffffff,12px 8px 0 0 #20d8e0,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #20d8e0,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #20d8e0,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #20d8e0,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #20d8e0,6px 12px 0 0 #20d8e0,8px 12px 0 0 #ff9999,10px 12px 0 0 #20d8e0,12px 12px 0 0 #20d8e0,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #20d8e0,8px 14px 0 0 #20d8e0,10px 14px 0 0 #20d8e0,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #20d8e0,8px 18px 0 0 #20d8e0,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #20d8e0,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #20d8e0,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #20d8e0; }
.j-magenta { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #e040c8,6px 6px 0 0 #e040c8,8px 6px 0 0 #e040c8,10px 6px 0 0 #e040c8,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #e040c8,6px 8px 0 0 #ffffff,8px 8px 0 0 #e040c8,10px 8px 0 0 #ffffff,12px 8px 0 0 #e040c8,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #e040c8,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #e040c8,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #e040c8,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #e040c8,6px 12px 0 0 #e040c8,8px 12px 0 0 #ff9999,10px 12px 0 0 #e040c8,12px 12px 0 0 #e040c8,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #e040c8,8px 14px 0 0 #e040c8,10px 14px 0 0 #e040c8,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #e040c8,8px 18px 0 0 #e040c8,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #e040c8,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #e040c8,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #e040c8; }
.j-red     { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #e83030,6px 6px 0 0 #e83030,8px 6px 0 0 #e83030,10px 6px 0 0 #e83030,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #e83030,6px 8px 0 0 #ffffff,8px 8px 0 0 #e83030,10px 8px 0 0 #ffffff,12px 8px 0 0 #e83030,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #e83030,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #e83030,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #e83030,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #e83030,6px 12px 0 0 #e83030,8px 12px 0 0 #ff9999,10px 12px 0 0 #e83030,12px 12px 0 0 #e83030,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #e83030,8px 14px 0 0 #e83030,10px 14px 0 0 #e83030,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #e83030,8px 18px 0 0 #e83030,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #e83030,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #e83030,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #e83030; }
.j-blue    { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #5080f0,6px 6px 0 0 #5080f0,8px 6px 0 0 #5080f0,10px 6px 0 0 #5080f0,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #5080f0,6px 8px 0 0 #ffffff,8px 8px 0 0 #5080f0,10px 8px 0 0 #ffffff,12px 8px 0 0 #5080f0,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #5080f0,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #5080f0,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #5080f0,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #5080f0,6px 12px 0 0 #5080f0,8px 12px 0 0 #ff9999,10px 12px 0 0 #5080f0,12px 12px 0 0 #5080f0,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #5080f0,8px 14px 0 0 #5080f0,10px 14px 0 0 #5080f0,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #5080f0,8px 18px 0 0 #5080f0,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #5080f0,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #5080f0,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #5080f0; }
.j-purple  { margin-left:7px; margin-top:7px; box-shadow: 4px 4px 0 0 #3a3a3a,6px 4px 0 0 #3a3a3a,8px 4px 0 0 #3a3a3a,10px 4px 0 0 #3a3a3a,2px 6px 0 0 #3a3a3a,4px 6px 0 0 #9944dd,6px 6px 0 0 #9944dd,8px 6px 0 0 #9944dd,10px 6px 0 0 #9944dd,12px 6px 0 0 #3a3a3a,2px 8px 0 0 #3a3a3a,4px 8px 0 0 #9944dd,6px 8px 0 0 #ffffff,8px 8px 0 0 #9944dd,10px 8px 0 0 #ffffff,12px 8px 0 0 #9944dd,14px 8px 0 0 #3a3a3a,2px 10px 0 0 #3a3a3a,4px 10px 0 0 #9944dd,6px 10px 0 0 #1a1a1a,8px 10px 0 0 #9944dd,10px 10px 0 0 #1a1a1a,12px 10px 0 0 #9944dd,14px 10px 0 0 #3a3a3a,2px 12px 0 0 #3a3a3a,4px 12px 0 0 #9944dd,6px 12px 0 0 #9944dd,8px 12px 0 0 #ff9999,10px 12px 0 0 #9944dd,12px 12px 0 0 #9944dd,14px 12px 0 0 #3a3a3a,4px 14px 0 0 #3a3a3a,6px 14px 0 0 #9944dd,8px 14px 0 0 #9944dd,10px 14px 0 0 #9944dd,12px 14px 0 0 #3a3a3a,4px 16px 0 0 #3a3a3a,8px 16px 0 0 #3a3a3a,12px 16px 0 0 #3a3a3a,4px 18px 0 0 #9944dd,8px 18px 0 0 #9944dd,10px 18px 0 0 #3a3a3a,12px 18px 0 0 #9944dd,0px 10px 0 0 #3a3a3a,2px 8px 0 0 #9944dd,16px 10px 0 0 #3a3a3a,14px 8px 0 0 #9944dd; }

/* Button colors */
.nav-btn-home      { background: rgba(180,140,255,0.35); color:#fff; border-color:#cc99ff #7744aa #7744aa #cc99ff; text-shadow:1px 1px 0 #330066; }
.nav-btn-home:hover      { background: rgba(200,160,255,0.55); }
.nav-btn-about     { background: rgba(100,210,100,0.35); color:#fff; border-color:#88ee88 #336633 #336633 #88ee88; text-shadow:1px 1px 0 #004400; }
.nav-btn-about:hover     { background: rgba(120,230,120,0.55); }
.nav-btn-blog      { background: rgba(255,180,60,0.35);  color:#fff; border-color:#ffcc66 #996600 #996600 #ffcc66; text-shadow:1px 1px 0 #553300; }
.nav-btn-blog:hover      { background: rgba(255,200,80,0.55);  }
.nav-btn-prog      { background: rgba(60,180,255,0.35);  color:#fff; border-color:#66ccff #005588 #005588 #66ccff; text-shadow:1px 1px 0 #003355; }
.nav-btn-prog:hover      { background: rgba(80,200,255,0.55);  }
.nav-btn-kb        { background: rgba(255,100,220,0.35); color:#fff; border-color:#ff88ee #881166 #881166 #ff88ee; text-shadow:1px 1px 0 #440033; }
.nav-btn-kb:hover        { background: rgba(255,130,230,0.55); }
.nav-btn-gb        { background: rgba(255,100,100,0.35); color:#fff; border-color:#ff8888 #881111 #881111 #ff8888; text-shadow:1px 1px 0 #550000; }
.nav-btn-gb:hover        { background: rgba(255,130,130,0.55); }
.nav-btn-links     { background: rgba(60,220,220,0.35);  color:#fff; border-color:#66eeee #006666 #006666 #66eeee; text-shadow:1px 1px 0 #003333; }
.nav-btn-links:hover     { background: rgba(80,240,240,0.55);  }
.nav-btn-impressum { background: rgba(160,100,255,0.35); color:#fff; border-color:#bb88ff #552299 #552299 #bb88ff; text-shadow:1px 1px 0 #220044; }
.nav-btn-impressum:hover { background: rgba(180,120,255,0.55); }

/* ===== SIDEBAR EXTRAS ===== */
.counter-box {
  margin-top: 10px; background: rgba(0,0,80,0.5);
  border: 2px inset var(--silver); padding: 8px;
  text-align: center; border-radius: 8px;
}
.counter-box p { font-size: 14px; color: var(--silver); margin-bottom: 4px; }
.counter-display { font-family:'Press Start 2P',monospace; font-size:18px; color:var(--red); text-shadow:0 0 6px var(--red); letter-spacing:4px; }

.best-viewed {
  text-align: center; font-size: 13px; color: var(--silver);
  padding: 6px; background: rgba(0,0,0,0.4);
  border: 1px dashed var(--silver); margin-top: 6px; border-radius: 8px;
}

/* ===== DIVIDER ===== */
.divider {
  width:100%; height:8px; margin:10px 0;
  background: repeating-linear-gradient(90deg,#ff0000 0px,#ff0000 10px,#ff8800 10px,#ff8800 20px,#ffff00 20px,#ffff00 30px,#00ff00 30px,#00ff00 40px,#00ffff 40px,#00ffff 50px,#0000ff 50px,#0000ff 60px,#ff00ff 60px,#ff00ff 70px);
  animation: slide-colors 1s linear infinite;
}
@keyframes slide-colors { 0% { background-position:0px; } 100% { background-position:70px; } }

/* ===== BLINK ===== */
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{visibility:visible;} 50%{visibility:hidden;} }

/* ===== SECTION HEADER ===== */
.section-header {
  font-family:'Press Start 2P',monospace; font-size:11px; color:#ffee88;
  background:rgba(255,255,255,0.1); padding:4px 8px;
  border-left:4px solid rgba(180,255,180,0.7); margin-bottom:8px;
  text-shadow: 0 0 6px rgba(255,220,100,0.6);
}

/* ===== CONTENT ===== */
.content-text { font-size:20px; line-height:1.5; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.content-text a { color:#aaddff; text-decoration:underline; }
.content-text a:visited { color:#cc99ff; }

/* ===== UNDER CONSTRUCTION ===== */
.construction {
  text-align:center; padding:15px; border:4px solid #ff0000; margin:10px 0; border-radius:10px;
  background:repeating-linear-gradient(45deg,#000 0px,#000 10px,#ffff00 10px,#ffff00 20px);
}
.construction p {
  font-family:'Press Start 2P',monospace; font-size:10px; color:#ff0000;
  background:white; padding:8px; display:inline-block;
  text-shadow:1px 1px #ff8800; animation:shake 0.3s infinite; border-radius:4px;
}
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-2px) rotate(-0.5deg);} 75%{transform:translateX(2px) rotate(0.5deg);} }

/* ===== TABLES ===== */
.retro-table { width:100%; border-collapse:collapse; font-size:18px; }
.retro-table th { background:rgba(255,255,255,0.2); color:#fff; padding:5px 8px; font-family:'Press Start 2P',monospace; font-size:9px; border:1px solid rgba(255,255,255,0.3); text-shadow:0 0 6px rgba(180,140,255,0.8); }
.retro-table td { padding:5px 8px; border:1px solid rgba(255,255,255,0.15); vertical-align:top; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.4); }
.retro-table tr:nth-child(even) td { background:rgba(255,255,255,0.1); }
.retro-table tr:nth-child(odd)  td { background:rgba(0,0,0,0.05); }

/* ===== SPIN STAR ===== */
.spin-star { display:inline-block; animation:spin 3s linear infinite; color:var(--yellow); font-size:24px; }
@keyframes spin { 0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.3);} 100%{transform:rotate(360deg) scale(1);} }

/* ===== AWARDS ===== */
.awards { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0; }
.award-badge { width:88px; height:31px; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:5px; text-align:center; line-height:1.4; cursor:default; border-radius:6px; }
.award-badge.netscape { background:#808080; color:white; border:2px outset #c0c0c0; }
.award-badge.ie       { background:linear-gradient(135deg,#003399,#0066cc); color:white; border:2px outset #0044aa; }
.award-badge.geocities{ background:linear-gradient(90deg,#ff6600,#ffcc00); color:#000; border:2px outset #ff8800; }
.award-badge.java     { background:#cc0000; color:white; border:2px outset #ff4444; }

/* ===== TOOLTIP ===== */
.tooltip-wrap { position:relative; display:inline-block; }
.tooltip-wrap .tooltip-text { visibility:hidden; background:#ffffe0; color:#000; border:1px solid #808080; font-size:14px; padding:3px 6px; position:absolute; z-index:1; bottom:125%; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:'VT323',monospace; }
.tooltip-wrap:hover .tooltip-text { visibility:visible; }

/* ===== FOOTER ===== */
footer { background:rgba(0,0,60,0.55); border-top:4px double var(--cyan); padding:15px; text-align:center; margin-top:20px; font-size:16px; color:var(--silver); cursor:pointer; }
footer .webring { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
footer .webring a { background:var(--navy); border:2px outset var(--silver); color:var(--cyan); padding:3px 8px; font-family:'Press Start 2P',monospace; font-size:8px; text-decoration:none; border-radius:6px; }
footer .webring a:hover { background:var(--magenta); color:#fff; }

/* ===== WIN95 DIALOG ===== */
.w95-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:999999; display:flex; align-items:center; justify-content:center; }
.w95-dialog { background:#c0c0c0; border:2px solid; border-color:#fff #808080 #808080 #fff; box-shadow:2px 2px 0 #000; min-width:280px; max-width:360px; font-family:'VT323',monospace; }
.w95-dialog-titlebar { background:linear-gradient(90deg,#000080,#1084d0); color:#fff; padding:3px 6px; display:flex; align-items:center; justify-content:space-between; font-size:14px; }
.w95-dialog-titlebar span { display:flex; align-items:center; gap:6px; }
.w95-dialog-close { background:#c0c0c0; border:2px solid; border-color:#fff #808080 #808080 #fff; color:#000; font-size:12px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:monospace; }
.w95-dialog-close:active { border-color:#808080 #fff #fff #808080; }
.w95-dialog-body { padding:16px 20px; display:flex; gap:14px; align-items:flex-start; color:#000; font-size:18px; line-height:1.3; }
.w95-dialog-icon { font-size:32px; flex-shrink:0; }
.w95-dialog-footer { padding:8px 16px 12px; display:flex; justify-content:center; }
.w95-dialog-btn { background:#c0c0c0; border:2px solid; border-color:#fff #808080 #808080 #fff; padding:4px 24px; font-family:'VT323',monospace; font-size:18px; cursor:pointer; min-width:80px; }
.w95-dialog-btn:active { border-color:#808080 #fff #fff #808080; }

/* ===== STARFIELD ===== */
.starfield { position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:-1; overflow:hidden; }
.star { position:absolute; width:2px; height:2px; background:white; border-radius:50%; animation:twinkle 2s infinite; }
@keyframes twinkle { 0%,100%{opacity:1;} 50%{opacity:0.2;} }
.star:nth-child(1){top:5%;left:10%;animation-delay:0.0s} .star:nth-child(2){top:15%;left:30%;animation-delay:0.3s} .star:nth-child(3){top:8%;left:55%;animation-delay:0.7s} .star:nth-child(4){top:25%;left:75%;animation-delay:1.1s} .star:nth-child(5){top:40%;left:20%;animation-delay:0.5s} .star:nth-child(6){top:60%;left:88%;animation-delay:0.9s} .star:nth-child(7){top:70%;left:5%;animation-delay:1.4s} .star:nth-child(8){top:85%;left:45%;animation-delay:0.2s} .star:nth-child(9){top:50%;left:60%;animation-delay:1.8s} .star:nth-child(10){top:92%;left:70%;animation-delay:0.6s} .star:nth-child(11){top:33%;left:42%;animation-delay:1.2s} .star:nth-child(12){top:78%;left:22%;animation-delay:0.4s} .star:nth-child(13){top:12%;left:82%;animation-delay:1.6s} .star:nth-child(14){top:55%;left:38%;animation-delay:0.8s} .star:nth-child(15){top:20%;left:5%;animation-delay:1.0s}

/* ===== MUSIC PLAYER ===== */
#music-player { position:fixed; bottom:20px; right:20px; z-index:9999; background:linear-gradient(135deg,rgba(40,10,80,0.92),rgba(20,5,50,0.95)); border:3px solid #cc88ff; border-radius:16px; padding:10px 14px 12px; width:210px; box-shadow:0 4px 24px rgba(0,0,0,0.5),inset 0 0 10px rgba(180,100,255,0.1); font-family:'Press Start 2P',monospace; color:#fff; backdrop-filter:blur(4px); }
#music-player .mp-title-bar { font-size:7px; color:#cc88ff; text-align:center; margin-bottom:8px; letter-spacing:1px; text-shadow:0 0 6px #cc88ff; }
#music-player .mp-track { font-size:7px; color:#ffdd88; text-align:center; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:1px 1px 0 #000; }
#music-player .mp-track-num { font-size:6px; color:#aaaacc; text-align:center; margin-bottom:8px; }
#music-player .mp-controls { display:flex; justify-content:center; gap:6px; }
#music-player .mp-btn { background:rgba(180,100,255,0.25); border:2px solid #cc88ff; border-radius:50%; width:34px; height:34px; color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.1s; line-height:1; }
#music-player .mp-btn:hover { background:rgba(200,130,255,0.5); border-color:#ff88ff; }
#music-player .mp-btn:active { background:rgba(255,150,255,0.6); transform:scale(0.93); }
#music-player .mp-btn.play-pause { width:42px; height:42px; font-size:18px; background:rgba(200,120,255,0.35); }
#music-player .mp-visualizer { display:flex; justify-content:center; align-items:flex-end; gap:3px; height:16px; margin-bottom:8px; }
#music-player .mp-bar { width:4px; background:#cc88ff; border-radius:2px; animation:mp-dance 0.6s ease-in-out infinite alternate; }
#music-player.paused .mp-bar { animation:none; height:3px !important; }
#music-player .mp-bar:nth-child(1){height:6px;animation-delay:0.00s} #music-player .mp-bar:nth-child(2){height:12px;animation-delay:0.10s} #music-player .mp-bar:nth-child(3){height:8px;animation-delay:0.20s} #music-player .mp-bar:nth-child(4){height:14px;animation-delay:0.05s} #music-player .mp-bar:nth-child(5){height:5px;animation-delay:0.15s} #music-player .mp-bar:nth-child(6){height:10px;animation-delay:0.25s} #music-player .mp-bar:nth-child(7){height:7px;animation-delay:0.08s}
@keyframes mp-dance { from{transform:scaleY(0.3);opacity:0.7;} to{transform:scaleY(1.4);opacity:1;} }

/* ===== PROGRAMMING SUBMENU ===== */
.submenu {
  list-style: none; padding: 0;
  margin-top: 3px; margin-left: 4px;
  display: flex; flex-direction: column; gap: 3px;
  border-left: 2px dashed rgba(255,255,255,0.3);
  padding-left: 4px;
}
.submenu li a {
  font-size: 7px !important;
  border-width: 2px !important;
  border-radius: 6px !important;
  opacity: 0.92;
}
.submenu li a .junimo { width:28px; min-width:28px; height:28px; }
.nav-btn-sub { background:rgba(40,160,220,0.28); color:#fff; border-color:#55bbdd #003355 #003355 #55bbdd; text-shadow:1px 1px 0 #002244; }
.nav-btn-sub:hover { background:rgba(60,190,240,0.48); }

/* ===== MOBILE ===== */
@media (max-width: 600px) {

  .layout-table, .layout-table tbody, .layout-table tr {
    display: block;
    width: 100%;
  }

  .sidebar {
    display: block;
    width: 100% !important;
    background: var(--bg);
  }

  .main-content {
    display: block;
    width: 100% !important;
  }

  /* iframe auf Mobile: postMessage setzt die Höhe per JS */
  #content-frame {
    height: 400px;
  }

  /* Footer immer nach dem Content */
  footer {
    position: static !important;
    margin-top: 20px;
    clear: both;
  }

  /* Musikplayer auf Mobile kleiner und unten links damit er weniger überlappt */
  #music-player {
    position: fixed;
    bottom: 8px;
    right: 8px;
    width: 140px;
    padding: 6px 8px 8px;
    font-size: 8px;
    z-index: 9999;
  }

  /* Nav buttons horizontal wrapping grid */
  .nav-box ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
  }

  .nav-box ul li {
    flex: 1 1 calc(50% - 5px);
    min-width: 120px;
  }

  /* Submenu full width */
  .submenu {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 2px dashed rgba(255,255,255,0.3);
    padding-left: 0;
    padding-top: 4px;
    margin-top: 5px;
    margin-left: 0;
    width: 100%;
  }

  .submenu li {
    flex: 1 1 calc(50% - 5px);
  }

  .nav-label {
    font-size: 7px;
  }

  /* Sidebar extras side by side */
  .counter-box, .best-viewed {
    display: inline-block;
    width: calc(50% - 6px);
    vertical-align: top;
    margin-top: 8px;
  }
  .counter-box {
    margin-right: 4px;
    margin-top: 8px; /* desktop .counter-box hat margin-top:10px, override */
  }

  /* Page title smaller */
  .page-title h1 {
    font-size: 14px;
  }

  .page-title {
    margin: 10px 0;
    padding: 10px;
  }

  /* Cards full width */
  .win95 { margin: 8px 0; }

  /* Table scrollable */
  .win95-content { overflow-x: auto; }
  .retro-table { min-width: 340px; }

  #music-player .mp-btn { width: 28px; height: 28px; font-size: 12px; }
  #music-player .mp-btn.play-pause { width: 34px; height: 34px; font-size: 15px; }
  #music-player .mp-title-bar { font-size: 6px; }
  #music-player .mp-track { font-size: 6px; }

  /* Marquee text smaller */
  .marquee-text { font-size: 10px; }

  /* Container padding */
  .container { padding: 6px; }

  /* Footer webring wrap */
  footer .webring { gap: 4px; }
  footer .webring a { font-size: 7px; padding: 3px 6px; }

  /* Construction banner */
  .construction p { font-size: 8px; }

  /* Link-back box volle Breite */
  .win95[style*="margin-bottom:8px"] { width: 100%; box-sizing: border-box; }
}

/* ===== WANDERNDE KUH ===== */
#cow-walker {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 8888;
  pointer-events: none;
  image-rendering: pixelated;
}

.cow-sprite {
  width: 2px;
  height: 2px;
  position: relative;
  display: block;
  image-rendering: pixelated;
}

/* Kuh geht nach rechts (default) */
.cow-body-right {
  box-shadow:
    /* Körper */
    4px  2px 0 0 #fff, 6px  2px 0 0 #fff, 8px  2px 0 0 #fff, 10px  2px 0 0 #fff, 12px  2px 0 0 #fff, 14px  2px 0 0 #fff,
    2px  4px 0 0 #fff, 4px  4px 0 0 #000, 6px  4px 0 0 #fff, 8px  4px 0 0 #000, 10px  4px 0 0 #fff, 12px  4px 0 0 #fff, 14px  4px 0 0 #fff, 16px  4px 0 0 #fff,
    2px  6px 0 0 #fff, 4px  6px 0 0 #fff, 6px  6px 0 0 #fff, 8px  6px 0 0 #fff, 10px  6px 0 0 #000, 12px  6px 0 0 #fff, 14px  6px 0 0 #fff, 16px  6px 0 0 #fff,
    2px  8px 0 0 #fff, 4px  8px 0 0 #fff, 6px  8px 0 0 #fff, 8px  8px 0 0 #fff, 10px  8px 0 0 #fff, 12px  8px 0 0 #fff, 14px  8px 0 0 #fff, 16px  8px 0 0 #fff,
    2px 10px 0 0 #fff, 4px 10px 0 0 #fff, 6px 10px 0 0 #fff, 8px 10px 0 0 #fff, 10px 10px 0 0 #fff, 12px 10px 0 0 #fff, 14px 10px 0 0 #fff,
    /* Kopf rechts */
    16px  4px 0 0 #fff, 18px  4px 0 0 #fff, 20px  4px 0 0 #fff,
    16px  6px 0 0 #fff, 18px  6px 0 0 #000, 20px  6px 0 0 #fff,
    16px  8px 0 0 #fff, 18px  8px 0 0 #fff, 20px  8px 0 0 #fff,
    18px 10px 0 0 #ffccaa, 20px 10px 0 0 #ffccaa,
    /* Hörner */
    18px  2px 0 0 #ffddaa, 22px  2px 0 0 #ffddaa,
    /* Beine */
    4px 12px 0 0 #fff, 6px 12px 0 0 #fff, 10px 12px 0 0 #fff, 12px 12px 0 0 #fff,
    4px 14px 0 0 #fff, 6px 14px 0 0 #fff, 10px 14px 0 0 #fff, 12px 14px 0 0 #fff,
    /* Euter */
    8px 12px 0 0 #ffaaaa,
    /* Schwanz links */
    0px  6px 0 0 #fff, 0px  8px 0 0 #fff;
}

/* Kuh geht nach links (gespiegelt) */
.cow-body-left {
  box-shadow:
    4px  2px 0 0 #fff, 6px  2px 0 0 #fff, 8px  2px 0 0 #fff, 10px  2px 0 0 #fff, 12px  2px 0 0 #fff, 14px  2px 0 0 #fff,
    2px  4px 0 0 #fff, 4px  4px 0 0 #fff, 6px  4px 0 0 #fff, 8px  4px 0 0 #000, 10px  4px 0 0 #fff, 12px  4px 0 0 #000, 14px  4px 0 0 #fff, 16px  4px 0 0 #fff,
    2px  6px 0 0 #fff, 4px  6px 0 0 #fff, 6px  6px 0 0 #000, 8px  6px 0 0 #fff, 10px  6px 0 0 #fff, 12px  6px 0 0 #fff, 14px  6px 0 0 #fff, 16px  6px 0 0 #fff,
    2px  8px 0 0 #fff, 4px  8px 0 0 #fff, 6px  8px 0 0 #fff, 8px  8px 0 0 #fff, 10px  8px 0 0 #fff, 12px  8px 0 0 #fff, 14px  8px 0 0 #fff, 16px  8px 0 0 #fff,
    2px 10px 0 0 #fff, 4px 10px 0 0 #fff, 6px 10px 0 0 #fff, 8px 10px 0 0 #fff, 10px 10px 0 0 #fff, 12px 10px 0 0 #fff, 14px 10px 0 0 #fff,
    /* Kopf links */
    0px  4px 0 0 #fff, -2px  4px 0 0 #fff, -4px  4px 0 0 #fff,
    0px  6px 0 0 #fff, -2px  6px 0 0 #000, -4px  6px 0 0 #fff,
    0px  8px 0 0 #fff, -2px  8px 0 0 #fff, -4px  8px 0 0 #fff,
    -2px 10px 0 0 #ffccaa, -4px 10px 0 0 #ffccaa,
    /* Hörner */
    0px  2px 0 0 #ffddaa, -4px  2px 0 0 #ffddaa,
    /* Beine */
    4px 12px 0 0 #fff, 6px 12px 0 0 #fff, 10px 12px 0 0 #fff, 12px 12px 0 0 #fff,
    4px 14px 0 0 #fff, 6px 14px 0 0 #fff, 10px 14px 0 0 #fff, 12px 14px 0 0 #fff,
    /* Euter */
    8px 12px 0 0 #ffaaaa,
    /* Schwanz rechts */
    18px  6px 0 0 #fff, 18px  8px 0 0 #fff;
}

/* Grasen: Kopf runter */
.cow-body-graze {
  box-shadow:
    4px  0px 0 0 #fff, 6px  0px 0 0 #fff, 8px  0px 0 0 #fff, 10px  0px 0 0 #fff, 12px  0px 0 0 #fff, 14px  0px 0 0 #fff,
    2px  2px 0 0 #fff, 4px  2px 0 0 #000, 6px  2px 0 0 #fff, 8px  2px 0 0 #000, 10px  2px 0 0 #fff, 12px  2px 0 0 #fff, 14px  2px 0 0 #fff, 16px  2px 0 0 #fff,
    2px  4px 0 0 #fff, 4px  4px 0 0 #fff, 6px  4px 0 0 #fff, 8px  4px 0 0 #fff, 10px  4px 0 0 #fff, 12px  4px 0 0 #fff, 14px  4px 0 0 #fff, 16px  4px 0 0 #fff,
    2px  6px 0 0 #fff, 4px  6px 0 0 #fff, 6px  6px 0 0 #fff, 8px  6px 0 0 #fff, 10px  6px 0 0 #fff, 12px  6px 0 0 #fff, 14px  6px 0 0 #fff,
    /* Kopf unten (grasend) */
    14px  6px 0 0 #fff, 16px  6px 0 0 #fff, 18px  6px 0 0 #fff,
    14px  8px 0 0 #fff, 16px  8px 0 0 #000, 18px  8px 0 0 #fff,
    14px 10px 0 0 #fff, 16px 10px 0 0 #fff, 18px 10px 0 0 #fff,
    16px 12px 0 0 #ffccaa, 18px 12px 0 0 #ffccaa,
    /* Gras */
    14px 14px 0 0 #00cc44, 16px 14px 0 0 #00cc44, 18px 14px 0 0 #00cc44, 20px 12px 0 0 #00cc44,
    /* Hörner */
    16px  4px 0 0 #ffddaa, 20px  4px 0 0 #ffddaa,
    /* Beine */
    4px  8px 0 0 #fff, 6px  8px 0 0 #fff, 10px  8px 0 0 #fff, 12px  8px 0 0 #fff,
    4px 10px 0 0 #fff, 6px 10px 0 0 #fff, 10px 10px 0 0 #fff, 12px 10px 0 0 #fff,
    /* Euter */
    8px  8px 0 0 #ffaaaa,
    /* Schwanz */
    0px  4px 0 0 #fff, 0px  6px 0 0 #fff;
}

/* walk animation: leichtes auf/ab wippen */
@keyframes cow-walk {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-2px); }
}
@keyframes cow-graze {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(1px); }
}

.cow-sprite.walking { animation: cow-walk 0.3s steps(1) infinite; }
.cow-sprite.grazing { animation: cow-graze 0.6s ease-in-out infinite; }

/* scale up so man sie gut sieht: 1 pixel = 4px */
#cow-walker { transform-origin: bottom left; }

/* ===== PIXEL GRASS ===== */
.pixel-grass {
  width: 100%;
  height: 24px;
  position: relative;
  overflow: hidden;
  background: #2a6e1a;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.pixel-grass::before {
  content: '';
  display: block;
  width: 100%;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='0' y='8' width='16' height='8' fill='%232a6e1a'/%3E%3C!-- blade 1 --%3E%3Crect x='1' y='4' width='2' height='8' fill='%2344aa22'/%3E%3Crect x='1' y='2' width='2' height='2' fill='%2344aa22'/%3E%3Crect x='0' y='0' width='2' height='2' fill='%2355cc33'/%3E%3C!-- blade 2 --%3E%3Crect x='5' y='5' width='2' height='7' fill='%2355cc33'/%3E%3Crect x='4' y='3' width='2' height='2' fill='%2355cc33'/%3E%3Crect x='3' y='1' width='2' height='2' fill='%2366dd44'/%3E%3C!-- blade 3 --%3E%3Crect x='9' y='6' width='2' height='6' fill='%2344aa22'/%3E%3Crect x='10' y='4' width='2' height='2' fill='%2344aa22'/%3E%3Crect x='11' y='2' width='2' height='2' fill='%2355cc33'/%3E%3C!-- blade 4 --%3E%3Crect x='13' y='5' width='2' height='7' fill='%2366dd44'/%3E%3Crect x='14' y='3' width='2' height='2' fill='%2366dd44'/%3E%3Crect x='13' y='1' width='2' height='2' fill='%2377ee55'/%3E%3C!-- flower --%3E%3Crect x='7' y='3' width='2' height='5' fill='%2344aa22'/%3E%3Crect x='6' y='1' width='2' height='2' fill='%23ffee00'/%3E%3Crect x='8' y='1' width='2' height='2' fill='%23ffee00'/%3E%3Crect x='7' y='0' width='2' height='2' fill='%23ffaaaa'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%23ffaaaa'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 32px 16px;
}

/* swaying animation */
@keyframes grass-sway {
  0%,100% { transform: skewX(0deg);   }
  25%      { transform: skewX(2deg);  }
  75%      { transform: skewX(-2deg); }
}

.pixel-grass::before {
  animation: grass-sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

/* ===== CARD TOP GRASS + MINI COWS ===== */
.win95 {
  position: relative;
  margin-top: 18px !important;
}

.win95::before {
  content: '';
  display: block;
  width: 100%;
  height: 14px;
  position: absolute;
  top: -14px;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Crect x='0' y='6' width='16' height='8' fill='%2333991a'/%3E%3Crect x='1' y='2' width='2' height='8' fill='%2344aa22'/%3E%3Crect x='0' y='0' width='2' height='2' fill='%2355cc33'/%3E%3Crect x='5' y='3' width='2' height='7' fill='%2355cc33'/%3E%3Crect x='4' y='1' width='2' height='2' fill='%2366dd44'/%3E%3Crect x='9' y='4' width='2' height='6' fill='%2344aa22'/%3E%3Crect x='10' y='2' width='2' height='2' fill='%2355cc33'/%3E%3Crect x='13' y='3' width='2' height='7' fill='%2366dd44'/%3E%3Crect x='14' y='1' width='2' height='2' fill='%2377ee55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 32px 14px;
  pointer-events: none;
  animation: grass-sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}


/* Mini cow sitting on card edge — pure CSS box-shadow */
/* Mini-Kühe werden per JS gezeichnet, kein ::after mehr */
.win95-cow {
  position: absolute;
  top: -14px;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 10;
}

@keyframes minicow-bob {
  0%   { transform: translateY(0px) rotate(0deg); }
  20%  { transform: translateY(-2px) rotate(-1deg); }
  40%  { transform: translateY(0px) rotate(0deg); }
  55%  { transform: translateY(-1px) rotate(1deg); }
  70%  { transform: translateY(0px) rotate(0deg); }
  85%  { transform: translateY(-3px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* cow canvas position is handled by the JS */

/* ===== NAV-BOX GRASS ===== */
.nav-box {
  margin-top: 16px !important;
}
.nav-box::before {
  content: '';
  display: block;
  width: 100%;
  height: 12px;
  position: absolute;
  top: -12px;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='0' y='4' width='12' height='8' fill='%23220044'/%3E%3Crect x='1' y='1' width='1' height='6' fill='%23aa44ff'/%3E%3Crect x='0' y='0' width='2' height='1' fill='%23cc77ff'/%3E%3Crect x='4' y='2' width='1' height='5' fill='%23cc77ff'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23dd99ff'/%3E%3Crect x='7' y='1' width='1' height='6' fill='%23aa44ff'/%3E%3Crect x='7' y='0' width='2' height='1' fill='%23cc77ff'/%3E%3Crect x='10' y='2' width='1' height='5' fill='%23cc77ff'/%3E%3Crect x='10' y='1' width='2' height='1' fill='%23dd99ff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 12px;
  pointer-events: none;
  animation: grass-sway 4s ease-in-out infinite;
  transform-origin: bottom center;
}

/* ===== IFRAME LAYOUT ===== */
html { min-height: 100%; }
body { min-height: 100%; }
.layout-table { height: auto; }
.main-content { height: 100%; }
#content-frame { width: 100%; height: 400px; border: none; display: block; background: transparent; }
body.subpage { background: transparent; padding: 8px; box-sizing: border-box; height: auto; overflow: visible; }
body.subpage .divider { margin: 8px 0; }

/* Blauer Cursor überall */
*, *:hover, a, a:hover, button, button:hover, input, label, [role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpolygon points='0,0 0,20 5,15 8,22 11,21 8,14 14,14' fill='%2300ffff' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0, crosshair !important;
}
.retro-link {
  color: #ffff66;
  text-decoration: underline;
  font-weight: bold;
}
.retro-link:visited {
  color: #ffcc88;
}
.retro-link:hover {
  color: #ffffff;
  text-shadow: 0 0 6px #ffff66;
}
.retro-table a, .retro-table .retro-link {
  color: #ffff66;
  font-weight: bold;
}
/* Gedämpfter Text lesbarer */
.content-text small, p[style*="color:#aaa"] {
  color: #bbbbdd !important;
}