/* Gemeinsames Retro-Design: Schriften (selbst gehostet), WordArt, Windows-98-Fenster */
@font-face { font-family: "Anton"; src: url("/static/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("/static/fonts/comic-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("/static/fonts/comic-neue-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("/static/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --purple: #2a0f7a;
  --ink: #1a0a5c;
  --yellow: #ffe600;
  --red: #d10000;
  --win: #d4d0c8;
  --win-dark: #404040;
  --rainbow: linear-gradient(90deg, #ff2d2d, #ff9a00, #ffe600, #2ee62e, #00c8ff, #7a3cff, #ff2dd2);
}

* { box-sizing: border-box; }

.stars {
  background-color: var(--purple);
  background-image: radial-gradient(#ffffff55 1px, transparent 1.5px), radial-gradient(#ffe60066 1px, transparent 1.5px);
  background-size: 38px 38px, 57px 57px;
  background-position: 0 0, 19px 23px;
}

.wordart {
  font-family: "Anton", Impact, sans-serif;
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 var(--ink));
  letter-spacing: 1px;
}
.wordart.tilt { transform: perspective(300px) rotateX(16deg) skewX(-8deg); }

.comic { font-family: "Comic Neue", "Comic Sans MS", cursive; }

.win {
  background: var(--win);
  border: 2px solid;
  border-color: #fff var(--win-dark) var(--win-dark) #fff;
  color: #000;
}
.win .tb {
  background: linear-gradient(90deg, #0a246a, #a6caf0);
  color: #fff;
  font: 700 13px Tahoma, Verdana, sans-serif;
  padding: 3px 6px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win .body { padding: 10px; }
.sunken { border: 2px solid; border-color: var(--win-dark) #fff #fff var(--win-dark); background: #fff; }

.btn98 {
  font: 700 15px Tahoma, Verdana, sans-serif;
  background: var(--win);
  color: #000;
  border: 2px solid;
  border-color: #fff var(--win-dark) var(--win-dark) #fff;
  padding: 8px 14px;
  cursor: pointer;
}
.btn98:active { border-color: var(--win-dark) #fff #fff var(--win-dark); }
.btn98:disabled { color: #808080; cursor: not-allowed; }
.btn98.big { font-size: 20px; padding: 12px 18px; width: 100%; }
.btn98.go { background: var(--yellow); }

.starburst { position: absolute; width: 90px; height: 90px; animation: wob 1.2s ease-in-out infinite; }
@keyframes wob { 50% { transform: rotate(-8deg) scale(1.08); } }

input.retro, textarea.retro, select.retro {
  font: 17px "Comic Neue", "Comic Sans MS", cursive;
  width: 100%;
  padding: 8px;
  border: 2px solid;
  border-color: var(--win-dark) #fff #fff var(--win-dark);
  background: #fff;
  color: #000;
}