/* ============================================================
   PCBGames — GeoCities theme: Prototypes Lab styles (PH-12)
   prototypes.html loads css/style.css (the shared page shell, which
   also holds the game table and the hit counter) first and this
   file second. It holds what only the lab has: the build-status
   pills, the read-this-first warning sign, the lab notes list and
   the lab status key.
   ============================================================ */

/* ---------- Build-status pills: BETA / ALPHA / WIP ---------- */

.pill {
  display: inline-block;
  font-family: var(--font-alt);
  font-size: 10px;
  font-weight: bold;
  line-height: 1.4;
  padding: 0 4px;
  border: 1px solid #000;
  vertical-align: middle;
  color: #000;
}
.pill.beta  { background: #9f9; }
.pill.alpha { background: #fc6; }
.pill.wip   { background: #f66; color: #fff; }

/* ---------- Read-this-first warning sign ---------- */

.warn {
  background: var(--note-bg);
  border: 3px double var(--alert);
  padding: 6px 10px;
  margin: 0 0 12px;
}
.warn-h {
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: bold;
  color: var(--alert);
  text-align: center;
  margin: 2px 0 6px;
}
.warn-h img { vertical-align: middle; image-rendering: pixelated; }
.warn p { margin: 6px 0; font-size: 15px; }
.warn p.meta { font-size: 12px; }

/* the WIP row's own construction tape, under its screenshot */
.shot img.tape {
  width: 100%; height: 14px; margin-top: 3px;
  border: 0; background: none; object-fit: fill; image-rendering: pixelated;
}

/* ---------- Lab notes (dated list under the table) ---------- */

.notes { margin: 0; padding-left: 20px; font-size: 14px; }
.notes li { margin-bottom: 6px; }

/* ---------- Lab status key (right column) ---------- */

.key { list-style: none; margin: 0; padding: 0; }
.key li { margin: 0 0 6px; }

@media (max-width: 700px) {
  .warn { padding: 4px 6px; }
  .warn p:not(.meta) { font-size: 14px; }
}