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

html, body {
  height: 100%;
  background: #008080;
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
  overflow: hidden;
  user-select: none;
}

.crt-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #008080;
  overflow: hidden;
}

.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 10;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.6);
}

.crt-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0,0,0,0.4) 90%,
    rgba(0,0,0,0.7) 100%
  );
  pointer-events: none;
  z-index: 11;
}

.crt-phosphor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(160,255,160,0.03) 0%,
    rgba(0,0,0,0) 70%
  );
  pointer-events: none;
  z-index: 14;
  mix-blend-mode: screen;
}

.screen-flicker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.02);
  pointer-events: none;
  z-index: 15;
  opacity: 0.98;
  animation: flicker 0.4s steps(2) infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 0.98; }
  50% { opacity: 1; }
}

.desktop {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  height: calc(100% - 42px);
  padding: 8px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  padding: 6px 4px;
  text-decoration: none;
  color: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border 0.1s;
}

.desktop-icon:hover {
  border: 2px dotted #fff;
  background: rgba(0,0,128,0.3);
}

.desktop-icon:active .icon-label {
  color: #fff;
  background: #000080;
}

.icon-image {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}

.icon-github { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.8 1.3 3.49 1 .1-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.17 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.65.24 2.87.12 3.17.77.84 1.24 1.91 1.24 3.22 0 4.61-2.8 5.63-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.22.7.82.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>'); }
.icon-twitter { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%231DA1F2" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>'); }
.icon-linkedin { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%230077B5" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'); }
.icon-youtube { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>'); }
.icon-email { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'); }
.icon-twitch { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%239146FF" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>'); }
.icon-label {
  font-size: 12px;
  text-align: center;
  text-shadow: 1px 1px 0 #000, 0 0 4px rgba(255,255,255,0.3);
  padding: 1px 2px;
}

.crt-retrace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.06),
    rgba(255,255,255,0)
  );
  pointer-events: none;
  z-index: 17;
  opacity: 0.5;
  transform: translateY(-4px);
  animation: retrace 8s linear infinite;
  will-change: transform;
}

@keyframes retrace {
  0% { transform: translateY(-4px); }
  100% { transform: translateY(100vh); }
}

.taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 4px;
  z-index: 20;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 2px 8px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2);
}

.start-button:active {
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

.start-button.active {
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

.start-logo {
  color: #000;
  font-size: 16px;
  line-height: 1;
}

.taskbar-divider {
  width: 2px;
  height: 24px;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  margin: 0 2px;
}

.taskbar-items {
  flex: 1;
  display: flex;
  gap: 4px;
}

.taskbar-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  font-size: 12px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
  min-width: 70px;
}

.start-menu {
  position: absolute;
  bottom: 42px;
  left: 4px;
  width: 320px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  display: none;
  flex-direction: row;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.5);
  z-index: 100;
}

.start-menu.visible {
  display: flex;
}

.start-menu-sidebar {
  width: 28px;
  background: linear-gradient(to bottom, #000080, #1084d0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px 4px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 2px;
}

.start-menu-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2px;
}

.start-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
  color: #000;
}

.start-item:hover {
  background: #000080;
  color: #fff;
}

.start-item:hover .icon-image {
  filter: brightness(1.2);
}

.start-item.shutdown {
  justify-content: flex-start;
  border-top: 1px solid #808080;
  margin-top: 2px;
  padding-top: 8px;
}

.start-item.shutdown:hover {
  background: #000080;
  color: #fff;
}

.start-menu-divider {
  height: 2px;
  background: #808080;
  border-bottom: 1px solid #fff;
  margin: 2px 0;
}

.about-content {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}

.about-content p {
  margin-bottom: 8px;
}

.shutdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  color: #fff;
  font-size: 24px;
  animation: fadeToBlack 0.5s ease-out;
}

@keyframes fadeToBlack {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .desktop-icon {
    width: 64px;
  }

  .icon-image {
    width: 32px;
    height: 32px;
  }

  .icon-label {
    font-size: 10px;
  }

  .taskbar {
    height: 32px;
  }

  .start-button {
    height: 26px;
    font-size: 11px;
    padding: 2px 6px;
  }

  .start-menu {
    left: 4px;
    width: 300px;
    bottom: 36px;
  }

}