:root {
  --pink: #ff71ce;
  --hot: #ff2a6d;
  --cyan: #01cdfe;
  --mint: #05ffa1;
  --purple: #b967ff;
  --violet: #7b2ff7;
  --yellow: #fffb96;
  --deep: #12002b;
  --ink: #1a0f2e;
  --gray: #c0c0c0;
  --gray-dk: #808080;
  --o0: #ff71ce;
  --o1: #01cdfe;
  --o2: #05ffa1;
  --o3: #b967ff;
  --ui: 'VT323', ui-monospace, 'Courier New', monospace;
  --logo: 'Monoton', 'VT323', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--deep);
  color: #fff;
  font-family: var(--ui);
  -webkit-font-smoothing: none;
  overflow: hidden;
}
button { font: inherit; }

/* ---- Windows 98, but make it vaporwave ---- */
.win {
  background: var(--gray);
  color: #111;
  border: 2px solid;
  border-color: #fff #222 #222 #fff;
  box-shadow: inset -2px -2px 0 var(--gray-dk), inset 2px 2px 0 #dfdfdf, .45em .45em 0 rgba(10, 0, 30, .45);
  padding: 3px;
}
.win > .tb {
  display: flex;
  align-items: center;
  gap: .5em;
  background: linear-gradient(90deg, var(--violet), var(--pink) 55%, var(--cyan));
  color: #fff;
  padding: .1em .2em .1em .45em;
  letter-spacing: .03em;
  text-shadow: 1px 1px 0 #3a0a5a;
}
.win > .tb .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb { display: flex; gap: 2px; }
.wb i, .tb .x {
  width: 1.15em;
  height: 1.05em;
  background: var(--gray);
  border: 2px solid;
  border-color: #fff #222 #222 #fff;
  color: #111;
  font-style: normal;
  font-size: .85em;
  display: grid;
  place-items: center;
  line-height: 1;
  text-shadow: none;
  padding: 0;
}
.win > .bd { padding: .7em .9em; }

.btn98 {
  font: inherit;
  background: var(--gray);
  color: #111;
  border: 2px solid;
  border-color: #fff #222 #222 #fff;
  box-shadow: inset -2px -2px 0 var(--gray-dk), inset 2px 2px 0 #dfdfdf;
  padding: .25em 1em;
  cursor: pointer;
}
.btn98:active:not(:disabled), .btn98.on {
  border-color: #222 #fff #fff #222;
  box-shadow: inset 2px 2px 0 var(--gray-dk);
}
.btn98.on { background: #d8d8d8; }
.btn98:disabled { color: var(--gray-dk); text-shadow: 1px 1px 0 #fff; cursor: default; }
.btn98.go { background: var(--mint); }
.btn98.go:disabled { background: var(--gray); }

.inset {
  background: #fff;
  border: 2px solid;
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 0 #222;
}

/* segmented Win98 progress bar */
.pbar { height: 1.3em; padding: 2px; overflow: hidden; }
.pbar > div {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--violet) 0 .7em, transparent .7em .85em);
  transition: width .25s linear;
}

.cat-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pips { display: inline-flex; gap: 2px; }
.pips i { width: .5em; height: .5em; background: rgba(255, 255, 255, .18); border: 1px solid rgba(0, 0, 0, .4); }
.pips i.on { background: var(--hot); box-shadow: 0 0 4px var(--pink); }
.ad-tag {
  display: inline-block;
  background: var(--yellow);
  color: #111;
  font-size: .8em;
  padding: 0 .35em;
  border: 1px solid #111;
  letter-spacing: .1em;
}

.chip {
  display: inline-block;
  background: var(--ink);
  color: var(--yellow);
  padding: .05em .5em;
  margin-right: .4em;
}
.chip.bad { background: var(--hot); color: #fff; }
.chip.warn { background: var(--yellow); color: #111; }

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, .14) 0 2px, transparent 2px 4px);
  z-index: 50;
}

.o0 { --oc: var(--o0); } .o1 { --oc: var(--o1); } .o2 { --oc: var(--o2); } .o3 { --oc: var(--o3); }

@keyframes pop-in { from { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.05); } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes glitch {
  0%, 100% { transform: translate(0); filter: none; }
  20% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
  40% { transform: translate(3px, -1px); filter: hue-rotate(-90deg) saturate(3); }
  60% { transform: translate(-1px, 2px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Twemoji images sit inline like text */
img.emoji { height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.12em; display: inline-block; }

/* Cats blink every few seconds (each one on its own schedule). */
.cat-svg .lids { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: blink 5.5s infinite; animation-delay: var(--b, 0s); }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }