@charset "utf-8";
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
    color: white;
  }

  /* --- Light animated noise background --- */
/* --- Light animated noise background (pure CSS, no data URL) --- */
body::before {
  content:"";
  position:fixed;
  inset:-50px;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.07) 0 1px,transparent 1px),
    radial-gradient(circle at 60% 70%,rgba(255,255,255,.05) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 30%,rgba(255,255,255,.06) 0 1px,transparent 1px),
    radial-gradient(circle at 40% 60%,rgba(255,255,255,.06) 0 1px,transparent 1px);
  background-size:3px 3px,4px 4px,5px 5px,6px 6px;
  animation: noiseShift .6s steps(2) infinite;
  opacity:.12;
  pointer-events:none;
  z-index:0;
}
@keyframes noiseShift {
  0%{transform:translate(0,0)}
  50%{transform:translate(-12px,7px)}
  100%{transform:translate(0,0)}
}

/* Make cards row a positioning context for the tracker */
#cards { position: relative; }

/* --- Audio progress tracker (3px) --- */
#progressTrack {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #2a2a2a;
  overflow: visible;
}

#progressFill {
  height: 100%;
  width: 0%;
  background: #b0b0b0;
  transition: none; /* we'll animate manually */
}

#progressTime {
  position: absolute;
  bottom: -1.4em;
  width: 100%;
  text-align: center;
  font-size: 0.7em;
  color: #999;
  user-select: none;
}
  /* --- Upper Cards Section --- */
  #cards {
    flex: 0 0 22vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 5px;
    background: linear-gradient(to bottom, #111, #090909);
  }

  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    transition: transform 0.15s ease;
  }

  .card img {
    height: 9vh;
    max-height: 170px;
    border: 2px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #888;
  }

  .card:hover { transform: scale(1.04); }
/* --- Authentic Win95 Radio Button --- */
.card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 6px;
  background: #c0c0c0;
  border: 2px solid #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
  cursor: pointer;
  position: relative;
}

.card input[type="radio"]:active {
  background: #b0b0b0;
}

.card input[type="radio"]:checked {
  background: #dcdcdc;
  border: 2px solid #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}

.card input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
}

  hr {
    border: none;
    height: 1px;
    background-color: black;
    margin: 0;
  }

  /* --- Game Section --- */
  #game {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.4em;
    text-align: center;
    cursor: default;
    position: relative;
    z-index: 1;
  }

  #game span {
    max-width: 80%;
    color: #e0e0e0;
  }