/* ============================================================
   KOINO ENERGY - retro.css - GEMAAKT MET NOTEPAD.EXE IN 1996
   Als u dit leest: NIET AANRAKEN. Het werkt. Niemand weet waarom.
   ============================================================ */

html { scroll-behavior: auto; }
body {
  margin: 0;
  padding: 0;
  background-color: #000033;
  background-image: url('../assets/images/bg_tile.gif');
  background-repeat: repeat;
  color: #ffffff;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  font-size: 15px;
  cursor: url('../assets/images/cursor_bolt.png') 2 2, auto;
  overflow-x: auto;
  min-width: 800px;
}
a { color: #00ffff; }
a:visited { color: #ff00ff; }
a:hover { color: #ffff00; background: #ff0000; text-decoration: none; }
a, button, .w95btn, .navbtn, .bigbutton, input[type=submit] { cursor: url('../assets/images/cursor_hand.png') 6 0, pointer; }
img { image-rendering: pixelated; }
table { border-collapse: separate; }
td { vertical-align: top; }
hr { border: 0; height: 6px; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet); }
hr.ugly { height: 10px; border: 3px ridge #ff00ff; background: #00ff00; }
hr.thin { height: 2px; background: #ffff00; }
.center { text-align: center; }
.tiny { font-size: 9px; }
.small { font-size: 11px; }
.big { font-size: 24px; }
.huge { font-size: 42px; }
.fat { font-weight: bold; }
.yell { text-transform: uppercase; }
.wrap { max-width: 1000px; margin: 0 auto; }
.courier { font-family: "Courier New", Courier, monospace; }
.times { font-family: "Times New Roman", Times, serif; }
.impact { font-family: Impact, "Arial Black", sans-serif; }
.mssans { font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* ---------- SCROLLBAR, WINDOWS 95 UIT DE HEL ---------- */
html { scrollbar-face-color: #00ff00; scrollbar-track-color: #8800ff; scrollbar-arrow-color: #ffff00; scrollbar-shadow-color: #000; scrollbar-highlight-color: #fff; }
::-webkit-scrollbar { width: 22px; height: 22px; }
::-webkit-scrollbar-track { background: repeating-linear-gradient(45deg, #8800ff 0 4px, #5500aa 4px 8px); border: 2px solid #000; }
::-webkit-scrollbar-thumb { background: #00ff00; border: 3px outset #88ff88; box-shadow: inset -2px -2px 0 #006600; }
::-webkit-scrollbar-thumb:hover { background: #ffff00; }
::-webkit-scrollbar-button { background: #c0c0c0; border: 2px outset #fff; height: 22px; width: 22px; }
::-webkit-scrollbar-corner { background: #ff00ff; }
* { scrollbar-color: #00ff00 #8800ff; scrollbar-width: auto; }

/* ---------- MARQUEES & SCROLLING TEXT ---------- */
.marq { overflow: hidden; white-space: nowrap; position: relative; }
.marq > span { display: inline-block; padding-left: 100%; animation: marq-left 18s linear infinite; }
.marq.rev > span { padding-left: 0; padding-right: 100%; animation: marq-right 22s linear infinite; }
.marq.fast > span { animation-duration: 9s; }
.marq.slow > span { animation-duration: 35s; }
@keyframes marq-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes marq-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
.vmarq { height: 120px; overflow: hidden; position: relative; }
.vmarq > div { position: absolute; width: 100%; animation: marq-up 14s linear infinite; }
@keyframes marq-up { 0% { top: 100%; } 100% { top: -100%; } }
.diag { position: fixed; pointer-events: none; z-index: 5; font: bold 22px Impact, sans-serif; color: #ff0; text-shadow: 2px 2px 0 #f00; animation: diag 25s linear infinite; left: -400px; top: 10%; white-space: nowrap; }
@keyframes diag { 0% { transform: translate(0, 0) rotate(-12deg); } 100% { transform: translate(140vw, 70vh) rotate(-12deg); } }

/* ---------- BLINK, RAINBOW, BOUNCE, ROTATE ---------- */
.blink { animation: blink 1s steps(2, start) infinite; }
.blink2 { animation: blink 0.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
blink { animation: blink 1s steps(2, start) infinite; }
.rainbow { animation: rainbow 2s linear infinite; font-weight: bold; }
.rainbow.slow { animation-duration: 6s; }
@keyframes rainbow { 0% { color: #ff0000; } 16% { color: #ff8800; } 33% { color: #ffff00; } 50% { color: #00ff00; } 66% { color: #00ffff; } 83% { color: #0000ff; } 100% { color: #ff00ff; } }
.rainbowbg { background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet, red); background-size: 400% 100%; animation: rainbowbg 4s linear infinite; }
@keyframes rainbowbg { to { background-position: 400% 0; } }
.rainbowtext { background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: rainbowbg 3s linear infinite; font-weight: bold; }
.bounce { display: inline-block; animation: bounce 0.8s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.bouncebox { position: relative; height: 60px; overflow: hidden; border: 3px dotted #0f0; }
.bouncebox > span { position: absolute; left: 0; top: 0; animation: bx 5s linear infinite alternate, by 2.3s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes bx { from { left: 0; } to { left: calc(100% - 180px); } }
@keyframes by { from { top: 0; } to { top: 30px; } }
.spin { display: inline-block; animation: spin 3s linear infinite; }
.spin.fast { animation-duration: 1s; }
@keyframes spin { to { transform: rotate(360deg); } }
.wobble { display: inline-block; animation: wobble 1.2s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.rot3d { display: inline-block; animation: rot3d 4s linear infinite; }
@keyframes rot3d { to { transform: rotateY(360deg); } }
.pulse { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.shake { animation: shake 0.3s linear infinite; }
@keyframes shake { 0% { transform: translate(1px, 1px); } 25% { transform: translate(-2px, 0); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 2px); } 100% { transform: translate(1px, -1px); } }
.casey { animation: casey 1s steps(1) infinite; }
@keyframes casey { 0% { text-transform: uppercase; } 50% { text-transform: lowercase; } }

/* ---------- NEON, EMBOSS, SHADOWS ---------- */
.neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff, 0 0 80px #00f; animation: neon 1.5s ease-in-out infinite alternate; }
@keyframes neon { from { text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #00f; } to { text-shadow: 0 0 2px #fff, 0 0 5px #f0f, 0 0 10px #f0f, 0 0 20px #f0f; } }
.emboss { color: #c0c0c0; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #404040, 2px 2px 0 #000; font-family: Impact, "Arial Black", sans-serif; }
.shadow3d { color: #ff0; text-shadow: 1px 1px 0 #f00, 2px 2px 0 #f00, 3px 3px 0 #a00, 4px 4px 0 #a00, 5px 5px 0 #500, 6px 6px 0 #500, 7px 7px 8px #000; font-family: Impact, "Arial Black", sans-serif; }
.multishadow { color: #0ff; text-shadow: 3px 3px 0 #f0f, -3px -3px 0 #ff0, 3px -3px 0 #0f0, -3px 3px 0 #f00, 6px 6px 0 #000; font-family: Impact, sans-serif; }
.rainbowborder { border: 8px solid; border-image: repeating-linear-gradient(45deg, red 0 10px, yellow 10px 20px, lime 20px 30px, cyan 30px 40px, blue 40px 50px, magenta 50px 60px) 8; animation: borderspin 1s steps(6) infinite; }
@keyframes borderspin { 0% { border-image-source: repeating-linear-gradient(45deg, red 0 10px, yellow 10px 20px, lime 20px 30px, cyan 30px 40px, blue 40px 50px, magenta 50px 60px); } 50% { border-image-source: repeating-linear-gradient(45deg, blue 0 10px, magenta 10px 20px, red 20px 30px, yellow 30px 40px, lime 40px 50px, cyan 50px 60px); } }
.dashborder { border: 6px dashed #ff0; animation: dash 0.8s steps(2) infinite; }
@keyframes dash { 50% { border-color: #f0f; } }
.hazard { background: repeating-linear-gradient(45deg, #ffcc00 0 20px, #000 20px 40px); }
.hazardbox { border: 10px solid; border-image: repeating-linear-gradient(45deg, #fc0 0 15px, #000 15px 30px) 10; }

/* ---------- WINDOWS 95 WIDGETS ---------- */
.w95btn, .navbtn, .w95 button, button.w95 {
  background: #c0c0c0; color: #000; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040;
  font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; font-size: 12px; padding: 3px 10px; box-shadow: 1px 1px 0 #000;
}
.w95btn:active, .navbtn:active, .w95 button:active { border-style: inset; }
.w95panel { background: #c0c0c0; color: #000; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; padding: 6px; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; font-size: 12px; }
.w95inset { background: #fff; color: #000; border: 2px inset #808080; padding: 4px; }
.w95title { background: #000080; color: #fff; font-weight: bold; padding: 2px 4px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.w95title.inactive { background: #808080; }
.w95title .tbtns span { display: inline-block; width: 14px; height: 12px; line-height: 10px; text-align: center; background: #c0c0c0; color: #000; border: 1px outset #fff; font-size: 10px; font-weight: bold; margin-left: 2px; cursor: pointer; font-family: Arial, sans-serif; }
input.w95, textarea.w95, select.w95 { background: #fff; color: #000; border: 2px inset #808080; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; font-size: 12px; padding: 2px; }

/* ---------- NAVIGATION ---------- */
#nav { background: #c0c0c0; border: 4px ridge #808080; padding: 6px; text-align: center; }
.navbtn { display: inline-block; margin: 3px; padding: 6px 12px; font-weight: bold; text-decoration: none; color: #000 !important; position: relative; font-size: 13px; transition: none; }
.navbtn:hover { background: #ff00ff; color: #ffff00 !important; font-family: "Comic Sans MS", cursive; transform: rotate(-3deg) scale(1.1); z-index: 2; }
.navbtn:nth-child(odd):hover { background: #00ff00; color: #ff0000 !important; transform: rotate(3deg) scale(1.1); }
.navbtn img { position: absolute; top: -14px; right: -16px; height: 18px; }
.navbtn.ultra { background: #000; color: #0f0 !important; }

/* ---------- HEADER ---------- */
#header { text-align: center; padding: 10px 0; position: relative; }
#logo { font-family: Impact, "Arial Black", sans-serif; font-size: 96px; line-height: 1; letter-spacing: 4px; margin: 0; cursor: pointer; user-select: none; display: inline-block;
  background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: rainbowbg 2s linear infinite, logowobble 3s ease-in-out infinite; filter: drop-shadow(4px 4px 0 #000) drop-shadow(8px 8px 0 #004) drop-shadow(0 0 12px #0ff); transform-style: preserve-3d; }
@keyframes logowobble { 0%,100% { transform: perspective(300px) rotateX(10deg) skewX(-6deg); } 50% { transform: perspective(300px) rotateX(-10deg) skewX(6deg) scale(1.03); } }
#logo small { font-size: 40px; display: block; letter-spacing: 12px; }
.headbolt { font-size: 90px; display: inline-block; vertical-align: middle; animation: boltflash 0.5s steps(2) infinite; filter: drop-shadow(0 0 10px #ff0); }
@keyframes boltflash { 50% { opacity: 0.2; transform: scale(1.3) rotate(10deg); } }
.badge { display: inline-block; margin: 2px; border: 2px outset #ccc; background: #222; color: #fff; font: bold 9px/1 Arial, sans-serif; padding: 4px 6px; text-transform: uppercase; vertical-align: middle; height: 31px; width: 88px; box-sizing: border-box; text-align: center; overflow: hidden; }
.badge.ie { background: #0033aa; color: #fff; } .badge.ns { background: #006600; color: #ffff00; } .badge.y2k { background: #ff0000; color: #ffff00; animation: blink 0.7s steps(2) infinite; } .badge.js { background: #ffcc00; color: #000; } .badge.cool { background: #ff00ff; color: #00ffff; } .badge.dx { background: #333; color: #0f0; font-family: "Courier New", monospace; } .badge.np { background: #fff; color: #000; } .badge.res { background: #000080; color: #fff; }
.badge.icq { background: #fff; color: #000; } .badge.icq i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #0f0; animation: blink 1s steps(2) infinite; }
.award { display: inline-block; background: gold; color: #800; border: 6px double #a60; padding: 10px; font: bold 14px "Times New Roman", serif; text-align: center; transform: rotate(-3deg); box-shadow: 4px 4px 0 #000; }
.counter { display: inline-block; background: #000; border: 3px inset #666; padding: 2px 4px; }
.counter span { display: inline-block; background: #111; color: #0f0; font: bold 22px "Courier New", monospace; border: 1px solid #333; padding: 0 3px; margin: 0 1px; min-width: 16px; text-align: center; text-shadow: 0 0 6px #0f0; }

/* ---------- SECTIONS ---------- */
.section { margin: 20px auto; padding: 14px; border: 6px ridge; position: relative; width: 94%; box-sizing: border-box; color: #000; }
.section h2 { font-family: Impact, "Arial Black", sans-serif; font-size: 40px; margin: 0 0 10px; text-transform: uppercase; }
.section.lime { background: #00ff00; border-color: #ff00ff; color: #000080; width: 96%; }
.section.pink { background: #ff69b4; border-color: #00ffff; color: #000; width: 90%; }
.section.yellow { background: #ffff00; border-color: #ff0000; color: #0000ff; width: 98%; }
.section.blue { background: #0000ff; border-color: #ffff00; color: #ffff00; width: 92%; }
.section.rainbow { background: linear-gradient(135deg, #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f); border-color: #fff; color: #000; }
.section.black { background: #000; border-color: #0f0; color: #0f0; font-family: "Courier New", monospace; }
.section.grey { background: #c0c0c0; border: 4px outset #fff; color: #000; }
.section.purple { background: #800080; border-color: #ff0; color: #0f0; width: 88%; }
.section.orange { background: #ff8800; border-color: #0000ff; color: #000; width: 95%; }
.section.teal { background: #008080; border-color: #fff; color: #fff; }
.section.cyan { background: #00ffff; border-color: #ff0000; color: #800000; width: 97%; }
.section.checker { background: repeating-conic-gradient(#ff00ff 0 25%, #00ffff 0 50%) 0 0 / 40px 40px; }
.section.stripes { background: repeating-linear-gradient(90deg, #f00 0 20px, #ff0 20px 40px); }
.section .gifrow { text-align: center; margin: 6px 0; }
.gifrow img { vertical-align: middle; margin: 0 4px; max-height: 80px; }
.float-left { float: left; margin: 0 12px 6px 0; }
.float-right { float: right; margin: 0 0 6px 12px; }
.clear { clear: both; }
.sidebox { position: absolute; width: 150px; background: #ffffcc; color: #000; border: 3px dotted #f00; padding: 6px; font-size: 11px; transform: rotate(4deg); z-index: 3; }
.sidebox.left { left: -40px; top: 60px; } .sidebox.right { right: -30px; top: 120px; transform: rotate(-5deg); }
.inline-img { max-width: 100%; }
.uglytable { border: 5px ridge #0f0; background: #ff0; color: #000; width: 100%; }
.uglytable td, .uglytable th { border: 3px inset #f0f; padding: 6px; }
.uglytable th { background: #f00; color: #ff0; font-family: Impact, sans-serif; font-size: 18px; }
.uglytable tr:nth-child(even) td { background: #ffcc00; } .uglytable tr:nth-child(odd) td { background: #ccffcc; }
.bigbutton { display: inline-block; font: bold 22px Impact, sans-serif; padding: 14px 30px; background: #f00; color: #ff0; border: 6px outset #f88; text-transform: uppercase; box-shadow: 4px 4px 0 #000; }
.bigbutton:active { border-style: inset; }
.bigbutton.green { background: #0a0; color: #fff; border-color: #8f8; }
.bigbutton.blue { background: #00a; color: #0ff; border-color: #88f; }
.bigbutton.red { background: #c00; color: #fff; border-color: #f88; animation: pulse 1.2s ease-in-out infinite; }
.bigbutton.red:hover { background: #f00; }
.panic { position: fixed; right: 10px; bottom: 10px; z-index: 9000; }
.panic .bigbutton { font-size: 13px; padding: 8px 12px; }
.ticker { background: #000; color: #0f0; font-family: "Courier New", monospace; border: 3px solid #0f0; padding: 4px; }
.news { background: #ff0; color: #000; border: 4px double #f00; font-family: "Times New Roman", serif; font-size: 18px; font-weight: bold; }
.floatstar { position: fixed; pointer-events: none; z-index: 4; font-size: 14px; color: #ff0; animation: floatup linear forwards; text-shadow: 0 0 4px #fff; }
@keyframes floatup { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(-110vh) rotate(720deg); opacity: 0; } }
.floatbolt { position: fixed; pointer-events: none; z-index: 4; font-size: 28px; animation: boltmove linear infinite; filter: drop-shadow(0 0 6px #ff0); }
@keyframes boltmove { from { transform: translateX(-60px) rotate(0); } to { transform: translateX(110vw) rotate(360deg); } }
.sparkle { position: fixed; pointer-events: none; z-index: 9999; width: 6px; height: 6px; background: #ff0; box-shadow: 0 0 6px #0ff; animation: sparkle 0.6s linear forwards; }
@keyframes sparkle { to { transform: translateY(20px) scale(0); opacity: 0; } }
.clickspark { position: fixed; pointer-events: none; z-index: 9999; font-size: 24px; animation: clickspark 0.5s ease-out forwards; }
@keyframes clickspark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
.loader { display: inline-block; width: 300px; height: 22px; border: 2px inset #888; background: #fff; position: relative; overflow: hidden; }
.loader i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 10px, #fff 10px 12px); animation: load 6s steps(30) infinite; }
@keyframes load { 0% { width: 0; } 70% { width: 99%; } 100% { width: 99%; } }
.gauge { display: inline-block; width: 120px; height: 60px; border: 3px solid #0f0; border-bottom: 0; border-radius: 120px 120px 0 0; position: relative; background: #111; overflow: hidden; }
.gauge i { position: absolute; left: 50%; bottom: 0; width: 3px; height: 54px; background: #f00; transform-origin: bottom center; transform: rotate(-80deg); transition: transform 0.6s; box-shadow: 0 0 4px #f00; }
.led { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #333; vertical-align: middle; margin-right: 4px; }
.led.red { background: #f00; box-shadow: 0 0 8px #f00; animation: blink 0.5s steps(2) infinite; } .led.green { background: #0f0; box-shadow: 0 0 8px #0f0; } .led.yellow { background: #ff0; box-shadow: 0 0 8px #ff0; animation: blink 1.3s steps(2) infinite; } .led.off { background: #300; }
.digital { background: #000; color: #0f0; font: bold 20px "Courier New", monospace; border: 3px inset #666; padding: 4px 8px; display: inline-block; text-shadow: 0 0 6px #0f0; letter-spacing: 2px; }
.mechbtn { font: bold 16px Arial, sans-serif; padding: 12px 18px; border: 5px outset #999; background: radial-gradient(#ddd, #777); color: #000; text-transform: uppercase; margin: 4px; }
.mechbtn:active { border-style: inset; }
.mechbtn.red { background: radial-gradient(#f66, #900); color: #fff; border-color: #f99; }
.mechbtn.danger { background: radial-gradient(#ff0, #a80); animation: shake 0.5s linear infinite; }
.webring { background: #ffffcc; border: 4px groove #808000; color: #000; width: 540px; margin: 10px auto; font-family: "Times New Roman", serif; }
.webring td { padding: 6px; text-align: center; }
.avatar { display: inline-block; font-size: 24px; width: 32px; text-align: center; }
.gbentry { background: #fff; color: #000; border: 3px ridge #00f; margin: 6px 0; padding: 6px; font-family: "Times New Roman", serif; }
.gbentry .who { font-weight: bold; color: #800; }
.gbentry .when { font-size: 10px; color: #666; }
.poll bar { display: block; height: 18px; background: repeating-linear-gradient(90deg, #f00 0 6px, #ff0 6px 12px); border: 2px solid #000; }
.pollrow { margin: 4px 0; }
.pollbar { display: inline-block; height: 20px; background: repeating-linear-gradient(90deg, #00f 0 8px, #0ff 8px 16px); border: 2px outset #88f; vertical-align: middle; transition: width 0.5s; }
.dl { background: #fff; color: #000; border: 2px solid #000; font-family: "Courier New", monospace; width: 100%; }
.dl td { border-bottom: 1px dashed #888; padding: 4px; }
.dl .fn { color: #00a; font-weight: bold; }
.secret { background: #000; color: #0f0; font-family: "Courier New", monospace; border: 4px double #f00; padding: 10px; }
.secret h2 { color: #f00; font-family: "Courier New", monospace; animation: blink 0.8s steps(2) infinite; }
.stamp { display: inline-block; border: 4px solid #f00; color: #f00; font: bold 28px Impact, sans-serif; padding: 2px 10px; transform: rotate(-15deg); opacity: 0.85; }
.testimonial { background: #fff; color: #000; border: 4px dotted #f0f; padding: 8px; margin: 6px; font-style: italic; font-family: "Times New Roman", serif; }
.testimonial b { font-style: normal; color: #00a; }
.product { border: 4px ridge #ff0; background: #fff; color: #000; padding: 6px; margin: 4px; text-align: center; vertical-align: top; }
.price { color: #f00; font: bold 24px Impact, sans-serif; text-decoration: line-through; }
.price2 { color: #080; font: bold 28px Impact, sans-serif; }
.webcam { background: #000; border: 8px ridge #888; display: inline-block; position: relative; }
.webcam canvas { display: block; image-rendering: pixelated; }
.webcam .stamp2 { position: absolute; left: 6px; bottom: 6px; color: #fff; font: 12px "Courier New", monospace; background: rgba(0,0,0,.5); padding: 2px 4px; }
.webcam .rec { position: absolute; right: 8px; top: 6px; color: #f00; font: bold 14px Arial, sans-serif; animation: blink 1s steps(2) infinite; }
.radar { width: 220px; height: 220px; border-radius: 50%; border: 4px solid #0f0; background: radial-gradient(circle, #003300 0, #000 70%); position: relative; overflow: hidden; display: inline-block; box-shadow: 0 0 20px #0f0; }
.radar .sweep { position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; background: linear-gradient(90deg, #0f0, transparent); transform-origin: left center; animation: spin 3s linear infinite; box-shadow: 0 0 10px #0f0; }
.radar .ring { position: absolute; border: 1px solid #060; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.radar .dot { position: absolute; width: 10px; height: 10px; background: #f00; border-radius: 50%; box-shadow: 0 0 8px #f00; animation: blink 0.6s steps(2) infinite; transition: left 2s, top 2s; }
.stock { background: #000; color: #0f0; font-family: "Courier New", monospace; border: 3px solid #ff0; }
.stock .up { color: #0f0; } .stock .down { color: #f00; }
.weather { background: #87ceeb; color: #000; border: 4px solid #fff; padding: 8px; font-family: "Times New Roman", serif; display: inline-block; text-align: left; }
.weather .day { font-weight: bold; font-size: 18px; }
.employee { display: inline-block; width: 150px; vertical-align: top; margin: 6px; background: #ffffcc; color: #000; border: 3px solid #000; padding: 6px; font-size: 12px; text-align: center; }
.employee img { height: 60px; }
.employee b { display: block; color: #800; font-size: 14px; }
.employee i { display: block; color: #008; font-size: 10px; }
.banana-wall { text-align: center; }
.banana-wall img { height: 50px; margin: 2px; }
.emergency { position: fixed; inset: 0; z-index: 8000; background: rgba(255,0,0,0.35); pointer-events: none; animation: emerg 0.3s steps(2) infinite; }
@keyframes emerg { 50% { background: rgba(255,255,0,0.35); } }
.emergmsg { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); z-index: 8001; background: #ff0; color: #f00; border: 10px double #f00; font: bold 32px Impact, sans-serif; padding: 20px; text-align: center; box-shadow: 0 0 40px #f00; pointer-events: auto; }
.chaosbanana { position: fixed; z-index: 7999; pointer-events: none; height: 60px; animation: bfall linear forwards; }
@keyframes bfall { from { transform: translateY(-80px) rotate(0); } to { transform: translateY(110vh) rotate(1080deg); } }
.meltdown { position: fixed; inset: 0; z-index: 8500; background: #000; color: #f00; font: bold 36px "Courier New", monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: emerg 0.25s steps(2) infinite; }
.meltdown .count { font-size: 140px; color: #ff0; text-shadow: 0 0 30px #f00; }
.speedbar { width: 400px; height: 24px; border: 2px inset #888; background: #fff; display: inline-block; position: relative; overflow: hidden; vertical-align: middle; }
.speedbar i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 12px, #fff 12px 14px); }
.sitemap ul { list-style: square; margin: 0 0 0 20px; padding: 0; }
.sitemap { font-size: 12px; column-count: 3; }
.legal { font-size: 8px; line-height: 1.3; text-align: justify; color: #ccc; font-family: "Times New Roman", serif; max-height: 140px; overflow: auto; border: 1px solid #666; padding: 4px; background: #222; }
#footer { background: #000; border-top: 10px ridge #f0f; padding: 20px; text-align: center; color: #fff; margin-top: 30px; }
#footer img { vertical-align: middle; margin: 2px; max-height: 64px; }
.thanks { font: bold 60px Impact, sans-serif; color: #ff0; animation: blink 0.8s steps(2) infinite, rainbow 2s linear infinite; }
.backtotop { position: fixed; left: 10px; bottom: 10px; z-index: 9000; text-align: center; font-size: 10px; color: #ff0; text-decoration: none; }
.backtotop img { display: block; height: 40px; margin: 0 auto; }
.modem { display: inline-block; background: #c0c0c0; color: #000; border: 2px outset #fff; font: 11px "MS Sans Serif", Tahoma, sans-serif; padding: 2px 6px; }
.modem i { display: inline-block; width: 10px; height: 10px; background: #0f0; margin: 0 1px; animation: blink 0.2s steps(2) infinite; }
.modem i:nth-child(2) { animation-duration: 0.37s; }

/* ---------- WIN95 DESKTOP ---------- */
#desktop { width: 100%; max-width: 820px; height: 520px; background: #008080; position: relative; border: 3px solid #000; margin: 0 auto; overflow: hidden; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; font-size: 12px; color: #000; user-select: none; }
#desktop .icons { position: absolute; left: 10px; top: 10px; display: grid; grid-template-columns: 76px; gap: 12px; }
#desktop .dicon { width: 76px; text-align: center; color: #fff; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#desktop .dicon:hover span { background: #000080; }
#desktop .dicon .ic { font-size: 32px; display: block; height: 36px; }
#desktop .dicon span { display: inline-block; padding: 1px 2px; }
#taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: #c0c0c0; border-top: 2px solid #fff; display: flex; align-items: center; padding: 0 4px; gap: 4px; }
#startbtn { font-weight: bold; padding: 2px 8px; height: 22px; display: inline-flex; align-items: center; gap: 4px; }
#startbtn.open { border-style: inset; }
#tasks { flex: 1; display: flex; gap: 3px; overflow: hidden; }
#tasks .task { background: #c0c0c0; border: 2px outset #fff; padding: 2px 8px; font-size: 11px; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
#tasks .task.active { border-style: inset; background: #ddd; }
#tray { border: 2px inset #808080; padding: 2px 8px; font-size: 11px; display: flex; gap: 6px; align-items: center; }
#startmenu { position: absolute; left: 2px; bottom: 30px; width: 190px; background: #c0c0c0; border: 2px outset #fff; display: none; z-index: 60; }
#startmenu .sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: #808080; color: #c0c0c0; font: bold 16px Arial, sans-serif; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; padding: 4px 2px; }
#startmenu ul { list-style: none; margin: 0 0 0 22px; padding: 2px; }
#startmenu li { padding: 6px 8px; cursor: pointer; }
#startmenu li:hover { background: #000080; color: #fff; }
.win { position: absolute; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 2px 2px 0 #000; min-width: 200px; display: flex; flex-direction: column; z-index: 10; }
.win .w95title { cursor: move; }
.win .content { padding: 6px; background: #c0c0c0; flex: 1; overflow: auto; max-height: 360px; }
.win .content.white { background: #fff; border: 2px inset #808080; margin: 4px; }
.win .menubar { background: #c0c0c0; font-size: 12px; padding: 2px 4px; border-bottom: 1px solid #808080; }
.win .menubar span { margin-right: 10px; }
.win textarea { width: 100%; height: 160px; border: 2px inset #808080; font: 12px "Courier New", monospace; box-sizing: border-box; resize: none; }
.win.min { display: none; }
.filelist div { padding: 2px 4px; cursor: default; }
.filelist div:hover { background: #000080; color: #fff; }
.mine { display: inline-grid; grid-template-columns: repeat(9, 22px); gap: 0; border: 3px inset #808080; background: #c0c0c0; }
.mine div { width: 22px; height: 22px; border: 2px outset #fff; box-sizing: border-box; font: bold 12px Arial, sans-serif; text-align: center; line-height: 18px; cursor: pointer; }
.mine div.open { border: 1px solid #808080; background: #c0c0c0; }
.mine div.boom { background: #f00; }
.mine .n1 { color: #00f; } .mine .n2 { color: #080; } .mine .n3 { color: #f00; } .mine .n4 { color: #008; }
.lcd { background: #000; color: #f00; font: bold 20px "Courier New", monospace; border: 2px inset #808080; padding: 0 4px; display: inline-block; min-width: 40px; text-align: right; }
.slider { width: 100%; }
.popup { position: fixed; z-index: 9500; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 3px 3px 0 #000; width: 360px; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; font-size: 12px; color: #000; }
.popup .body { display: flex; gap: 12px; padding: 14px; align-items: center; }
.popup .icon { font-size: 36px; }
.popup .btns { text-align: center; padding: 0 0 12px; }
.popup .btns button { min-width: 80px; }

/* ---------- TERMINAL ---------- */
#terminal { background: #000; color: #c0c0c0; font: 15px "Courier New", "Lucida Console", monospace; border: 6px ridge #888; padding: 8px; height: 420px; overflow-y: auto; cursor: text; position: relative; }
#terminal .out { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; }
#terminal .line { display: flex; }
#terminal input { background: transparent; border: 0; color: #fff; font: inherit; flex: 1; outline: none; caret-color: #0f0; padding: 0; }
#terminal .g { color: #0f0; } #terminal .r { color: #f55; } #terminal .y { color: #ff5; } #terminal .c { color: #5ff; } #terminal .m { color: #f5f; }
#terminal canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- ARCADE ---------- */
.arcade-frame { border: 12px ridge #f0f; background: #000; box-shadow: 0 0 20px #0ff, inset 0 0 20px #f0f; display: inline-block; }
.arcade-frame iframe { display: block; border: 4px dashed #ff0; background: #000; }
.gamebox { background: #000; border: 6px groove #0ff; display: inline-block; padding: 6px; color: #0f0; font-family: "Courier New", monospace; text-align: center; }
.gamebox canvas { display: block; background: #000; border: 2px solid #0f0; image-rendering: pixelated; margin: 0 auto; }
.gamebox .hud { display: flex; justify-content: space-between; padding: 4px; font-weight: bold; }
.roulette { background: #333; border: 8px solid #ff0; padding: 10px; color: #0f0; font-family: "Courier New", monospace; text-align: center; }
.roulette .screen { background: #000; border: 4px inset #888; padding: 10px; min-height: 60px; font-size: 16px; margin: 8px 0; color: #0f0; }

/* ---------- REDUCED MOTION / PANIC ---------- */
body.calm *, body.calm *::before, body.calm *::after { animation-play-state: paused !important; }
body.calm .diag, body.calm .floatstar, body.calm .floatbolt, body.calm .sparkle { display: none !important; }
body.calm .marq > span, body.calm .vmarq > div { animation: none !important; padding: 0 !important; position: static !important; }
@media (prefers-reduced-motion: reduce) { body:not(.chaos) *, body:not(.chaos) *::before, body:not(.chaos) *::after { animation-play-state: paused !important; } body:not(.chaos) .diag, body:not(.chaos) .floatstar, body:not(.chaos) .floatbolt { display: none !important; } }

/* ---------- ULTRA KOINO MODE ---------- */
body.ultra { animation: ultra 0.5s steps(2) infinite; }
@keyframes ultra { 50% { filter: hue-rotate(180deg) invert(1); } }
body.ultra .section { animation: shake 0.4s linear infinite; }

/* ---------- MOBILE (NEE) ---------- */
@media (max-width: 800px) { body { min-width: 0; } #logo { font-size: 48px; } #logo small { font-size: 20px; letter-spacing: 4px; } .headbolt { font-size: 40px; } .section h2 { font-size: 24px; } .sidebox { display: none; } #desktop { height: 480px; } .speedbar { width: 220px; } .sitemap { column-count: 1; } }

/* ---------- TIJDLIJN (horizontaal scrollen zoals in 1996) ---------- */
.tl-wrap { position: relative; background: #000; border: 8px ridge #ff0; padding: 10px 0 14px; }
.tl-track { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; padding: 16px 20px 20px; scroll-behavior: smooth; scrollbar-color: #0f0 #800080; }
.tl-track::-webkit-scrollbar { height: 26px; }
.tl-line { position: absolute; left: 0; right: 0; top: 118px; height: 8px; background: repeating-linear-gradient(90deg, #ff0 0 20px, #f00 20px 40px); pointer-events: none; opacity: .7; }
.tl-card { flex: 0 0 260px; background: #ffffcc; color: #000; border: 5px ridge #f0f; padding: 8px; position: relative; font-family: "Times New Roman", serif; font-size: 13px; transform: rotate(-1deg); }
.tl-card:nth-child(even) { transform: rotate(1.2deg); border-color: #0ff; background: #ccffcc; margin-top: 30px; }
.tl-card:nth-child(3n) { border-color: #ff0; background: #ffccff; }
.tl-card h4 { margin: 0 0 4px; font: bold 16px Impact, sans-serif; color: #800; text-transform: uppercase; }
.tl-year { display: inline-block; background: #000080; color: #ff0; font: bold 20px "Courier New", monospace; padding: 2px 8px; border: 3px outset #88f; margin-bottom: 6px; }
.tl-year.q { background: #800; animation: blink 1s steps(2) infinite; }
.tl-photo { width: 100%; height: 150px; background: #222; border: 4px inset #888; display: flex; align-items: center; justify-content: center; color: #0f0; font: 11px "Courier New", monospace; text-align: center; overflow: hidden; margin-bottom: 6px; position: relative; }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.tl-photo .gifs img { width: auto; height: 60px; object-fit: contain; margin: 0 3px; }
.tl-card .tag { display: inline-block; background: #f00; color: #ff0; font: bold 10px Arial, sans-serif; padding: 1px 5px; margin: 2px 2px 0 0; border: 1px solid #000; }
.tl-nav { text-align: center; margin-top: 6px; }
.tl-nav button { font-size: 16px; padding: 6px 18px; }
.tl-now { border: 6px double #f00 !important; background: #fff !important; transform: rotate(0) scale(1.03) !important; }

/* Dubai 2021-2023: woestijn-editie */
.tl-card.tl-dubai { background: repeating-linear-gradient(135deg, #f7d26a 0 12px, #f0b64a 12px 24px) !important; border-color: #ff8800 !important; box-shadow: 0 0 0 3px #000, 0 0 18px #ff0; }
.tl-card.tl-dubai h4 { color: #a00; text-shadow: 2px 2px 0 #ff0, -1px -1px 0 #fff; animation: dubaiglow 1.2s steps(2) infinite; }
@keyframes dubaiglow { 50% { text-shadow: 2px 2px 0 #f0f, -1px -1px 0 #0ff; } }
.tl-marq { display: block; background: #000; color: #0f0; font: bold 11px "Courier New", monospace; border: 2px inset #888; margin: 0 0 6px; }
.tl-card.tl-dubai .gifs img, .tl-card.tl-katten .gifs img { image-rendering: pixelated; animation: catwobble 0.8s ease-in-out infinite alternate; }
.tl-card.tl-katten .gifs img:nth-child(2) { animation-delay: 0.3s; }
@keyframes catwobble { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-4px); } }
.tl-card.tl-katten { background: #ffe0f0 !important; border-color: #f0f !important; cursor: url('../assets/gifs/cat1.gif'), auto; }
.tl-card.tl-katten .tl-photo { background: #402 ; }
.tl-miauw { margin: 0 0 4px; text-align: center; font: bold 14px "Comic Sans MS", cursive; color: #f0f; }
.tl-miauw .blink { animation: blink 0.7s steps(2) infinite; }
.tl-miauw .blink:nth-child(2) { animation-delay: 0.23s; } .tl-miauw .blink:nth-child(3) { animation-delay: 0.46s; }
/* Geen horizontale paginascroll: de beursticker-tabel mag niet breder worden dan de sectie */
table:has(.marq) { table-layout: fixed; width: 100%; }
.marq { max-width: 100%; }
html, body { overflow-x: hidden; }
/* Staande foto's helemaal tonen in plaats van afsnijden */
.tl-photo.portrait { height: 260px; background: #000; }
.tl-photo.portrait img { object-fit: contain; }

/* ---------- V19: HERO (eerste scherm) ---------- */
.herokid { display: inline-block; font: bold 18px "Comic Sans MS", cursive; color: #ff0; background: repeating-linear-gradient(90deg, #000080 0 16px, #0000c0 16px 32px); padding: 6px 18px; border: 3px ridge #ff0; margin: 4px auto 8px; letter-spacing: 1px; }
.herointro { max-width: 820px; margin: 10px auto; text-align: center; padding: 0 0 10px; box-shadow: 6px 6px 0 #000; }
.herointro .w95title { text-align: left; }
.heroline { font: bold 20px Impact, "Arial Black", sans-serif; color: #000080; padding: 12px 16px 6px; letter-spacing: 1px; line-height: 1.35; }
.heroline a { color: #c00; background: #ff0; padding: 0 6px; text-decoration: underline; }
.heroline a:hover { background: #0f0; color: #000; }
.herobtns { padding: 6px 10px; }
.herobtns.small .w95btn { font-size: 13px; padding: 6px 12px; margin: 3px; display: inline-block; text-decoration: none; }
#brainbtn { font-size: 26px; padding: 16px 28px; animation: pulse 1.2s ease-in-out infinite; box-shadow: 4px 4px 0 #000, 0 0 24px #0ff; }
#brainbtn:hover { background: #00f; }
#certs { margin: 6px auto; }

/* ---------- V19: SYSTEEMDIAGNOSE ---------- */
body.scanning::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 128, .45); z-index: 9550; }
.scanwin { position: fixed; left: 50%; top: 8%; transform: translateX(-50%); width: 640px; max-width: 96vw; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 4px 4px 0 #000; z-index: 9600; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000; }
.scanwin .w95title { cursor: move; }
.scanbody { padding: 10px; }
.scanlog { background: #000; color: #0f0; font: 14px "Courier New", monospace; min-height: 120px; max-height: 160px; overflow: hidden; padding: 8px; border: 2px inset #808080; text-align: left; }
.scanbar { height: 22px; border: 2px inset #808080; background: #fff; margin: 8px 0 2px; position: relative; overflow: hidden; }
.scanbar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 14px, #fff 14px 18px); transition: width .3s steps(3); }
.scanpct { font: bold 13px Arial, sans-serif; text-align: right; }
.scanresult { background: #000; color: #0f0; border: 2px inset #808080; padding: 12px; margin-top: 8px; font: bold 16px "Courier New", monospace; text-align: left; line-height: 1.5; }
.scanresult .big { color: #ff0; font-size: 28px; line-height: 1.2; margin: 4px 0; text-shadow: 2px 2px 0 #800; }
.scanresult .scanlink { color: #fff; font-weight: normal; font-size: 13px; margin-top: 10px; border-top: 1px dashed #0f0; padding-top: 8px; }
.scanresult .scanlink a { color: #ff0; }
.scanbtns { text-align: center; padding: 10px 0 4px; }
.scanfoot { padding: 4px 6px 0; }
.scanfoot a { color: #000080; }
.hidden { display: none !important; }

/* ---------- V19: 90S-KID CERTIFICAAT ---------- */
.kid90 { background: #fff8dc; border: 5px double #800; padding: 10px; margin: 14px 0; }
.kidcard { background: #fff; border: 3px ridge #c0c0c0; padding: 8px; font-size: 13px; text-align: center; min-height: 110px; }
.kidic { display: block; font-size: 34px; }

/* ---------- V19: telefoon (viewport blijft 1000px breed, dus groter maken wat telt) ---------- */
@media (max-device-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  .herokid { font-size: 26px; }
  .heroline { font-size: 30px; }
  .herobtns.small .w95btn { font-size: 22px; padding: 12px 18px; }
  #brainbtn { font-size: 40px; padding: 22px 30px; }
  .herointro .tiny { font-size: 18px; }
  .scanwin { width: 940px; top: 3%; }
  .scanlog { font-size: 24px; min-height: 180px; max-height: 240px; }
  .scanbar { height: 34px; }
  .scanpct { font-size: 22px; }
  .scanresult { font-size: 26px; }
  .scanresult .big { font-size: 44px; }
  .scanresult .scanlink { font-size: 22px; }
  .scanbtns .w95btn { font-size: 24px; padding: 12px 18px; }
  .scanfoot, .scanfoot a { font-size: 18px; }
  .w95title { font-size: 20px; }
  .w95title .tbtns span { width: 26px; height: 24px; line-height: 22px; font-size: 18px; }
  .popup { width: 600px; font-size: 22px; }
  .popup .btns button { font-size: 22px; padding: 10px 20px; }
}