/* ============================================================
   PCBGames — GeoCities theme: homepage-only styles (PH-11)
   index.html loads css/style.css (the shared page shell) first and
   this file second. It holds what only the homepage has: the
   search box, NeoQ's 18+ row extras, the lab strip, the news list
   and the guestbook box. Promoted from the PH-9 mock-up
   (since removed); the game table and the odometer hit counter
   moved to css/style.css in PH-12, when the Prototypes Lab got them too.
   ============================================================ */

/* ---------- Search box and its results (js/search.js, PH-16) ---------- */

.search { margin: 0 0 10px; }
.search-t {
  width: 100%;
  background: var(--box-bg);
  border: 2px outset var(--bevel);
  font-family: var(--font-alt);
  font-size: 13px;
}
.search-l { white-space: nowrap; width: 1%; padding-right: 8px; }
/* may wrap: on one line the row is wider than the centre cell at 1024px (PH-19) */
.search-f { line-height: 26px; }
.search input[type="text"], .search input[type="search"], .search select {
  font-family: var(--font-alt);
  font-size: 13px;
  border: 2px inset var(--bevel);
  background: var(--field-bg);
  color: var(--field-fg);
  padding: 1px 3px;
  vertical-align: middle;
}
/* same bevel as .btn in css/style.css */
.search input[type="submit"], .search input[type="reset"] {
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: bold;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px outset var(--btn-edge);
  padding: 2px 10px;
  cursor: pointer;
  vertical-align: middle;
}
.search input[type="submit"]:active { border-style: inset; }
.search input[type="search"] { -webkit-appearance: none; appearance: none; border-radius: 0; }
.search input[type="reset"]:active { border-style: inset; }
.search-tip { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); margin: 3px 2px 0; }
.search-tip [hidden] { display: none; }

/* AltaVista-style result list: count line, numbered hits, green URL line */
.search-results { font-family: var(--font-alt); font-size: 14px; margin: 0 0 10px; }
.search-results[hidden] { display: none; }
.sr-count {
  margin: 0 0 8px;
  padding: 3px 6px;
  background: var(--note-bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.sr-list { margin: 0; padding-left: 26px; }
.sr-list li { margin-bottom: 12px; }
.sr-title { font-size: 16px; font-weight: bold; }
.sr-title b { text-decoration: underline; }
.sr-list .tags { margin: 1px 0; }
.sr-desc { font-size: 13px; }
.sr-url { font-size: 12px; color: var(--url); word-break: break-all; }
.sr-help { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.sr-syntax { margin: 2px 0 0; padding-left: 18px; list-style: square; }
.sr-syntax code { font-family: "Courier New", Courier, monospace; font-size: 12px; background: var(--note-bg); }
.sr-back { font-family: var(--font-ui); font-size: 12px; margin: 0; }

/* ---------- NeoQ's row (the shared game table is in css/style.css) ---------- */

.adult-tag { color: var(--red-text); font-weight: bold; }
.adult-badge {
  display: inline-block;
  background: #c00;
  color: #fff;
  font-family: var(--font-alt);
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border: 1px solid #000;
  vertical-align: middle;
}
.btn.adult { background: var(--btn-adult); }

/* ---------- Prototype strip, news ---------- */

.strip { width: 100%; text-align: center; font-family: var(--font-ui); font-size: 11px; font-weight: bold; }
.strip td { width: 25%; vertical-align: top; }
/* 110x68 inside the border, but may shrink: four full-size ones are wider than
   the centre cell at 1024px and would push the right column off the page (PH-19) */
.strip img { border: 2px inset var(--shade); box-sizing: border-box; width: 114px; max-width: 100%; height: auto; aspect-ratio: 114 / 72; object-fit: cover; background: #000; display: block; margin: 0 auto 2px; }
.strip a { text-decoration: none; }
.strip a:hover { text-decoration: underline; }

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

/* ---------- Guestbook teaser ---------- */

.gb-sign { text-decoration: none; display: inline-block; }
.gb-sign .comic { font-size: 15px; font-weight: bold; color: var(--red-text); }
.gb-sign img { image-rendering: pixelated; }
.gb-teaser {
  text-align: left;
  background: var(--sheet);
  border: 2px inset var(--bevel);
  padding: 4px 6px;
  font-size: 11px;
  margin-top: 6px;
}
.gb-teaser .gb-entry { margin: 0 0 6px; }
.gb-teaser .gb-entry b { display: block; }
.gb-teaser .gb-entry q { font-style: italic; }

/* ---------- Phones (the shell's own phone rules are in css/style.css) ---------- */

@media (max-width: 700px) {
  .search-t tr, .search-t td { display: block; width: auto; }
  .search-f { line-height: normal; }
  .search input[type="text"], .search input[type="search"] { width: 100%; box-sizing: border-box; margin-bottom: 4px; }

  .strip, .strip tbody, .strip tr { display: block; }
  .strip td { display: inline-block; width: 48%; box-sizing: border-box; }
}