/* ============================================================
   PCBGames — GeoCities theme: NeoQ age gate styles (PH-15)
   neoq.html loads css/style.css (the shared page shell) first and
   this file second. The gate uses the header, rainbow rules and
   footer from the shell but not the nav, ticker or layout table:
   it is a single centred "WARNING: Adults only" splash with one
   way forward (ENTER) and one way back (LEAVE).

   The inline ageGate() script in neoq.html reads #age-form,
   #birth-year, #age-certify, #enter-btn and #age-error. Nothing
   here may hide them; .btn.enter:disabled is presentation only.
   ============================================================ */

.splash {
  max-width: 500px;
  margin: 18px auto 20px;
  border: 8px solid transparent;
  border-image: repeating-linear-gradient(-45deg,
    #000 0 10px, #ffd700 10px 20px) 8;
  background: var(--note-bg);
  text-align: center;
}

.warn-h {
  margin: 0;
  padding: 10px 6px 8px;
  background: #c00;
  color: #ffff00;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  text-shadow: 2px 2px 0 #000;
  border-bottom: 3px double #000;
}

.splash-b { padding: 14px 16px 12px; }

/* the 18+ roundel, like a film-rating sticker */
.roundel {
  display: inline-block;
  width: 72px;
  height: 72px;
  line-height: 66px;
  border-radius: 50%;
  border: 4px solid #c00;
  background: #fff;
  color: #c00;
  font-family: var(--font-alt);
  font-size: 28px;
  font-weight: bold;
  box-sizing: border-box;
  box-shadow: 2px 2px 0 #000;
}

.gate-text { margin: 10px 0 12px; font-size: 17px; }
.gate-text b { color: var(--red-text); }

/* ---------- The form ---------- */

.gate-form { font-family: var(--font-alt); font-size: 14px; }

.year-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 10px;
}
.year-row label { font-weight: bold; }
.year-row input {
  width: 6em;
  font-family: var(--font-alt);
  font-size: 16px;   /* 16px stops iOS zooming in on focus */
  text-align: center;
  border: 2px inset var(--bevel);
  background: var(--field-bg);
  color: var(--field-fg);
  padding: 3px 4px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto 14px;
  padding: 6px 8px;
  border: 1px solid var(--shade);
  background: var(--sheet);
  text-align: left;
  font-size: 13px;
}
.checkbox-row input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.checkbox-row label { cursor: pointer; }

/* ---------- The two bevelled buttons ---------- */

.gate-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.gate-btns .btn {
  min-width: 150px;
  font-size: 14px;
  padding: 6px 14px;
  border-width: 3px;
  box-sizing: border-box;
}
.btn.enter { background: var(--btn-adult); }
.btn.enter:disabled {
  color: var(--text-off);
  background: var(--btn-bg);
  text-shadow: 1px 1px 0 var(--btn-off-shadow);
  cursor: not-allowed;
}
.btn.enter:disabled:active { border-style: outset; }

.gate-error {
  display: block;
  min-height: 1.4em;
  margin-top: 8px;
  color: var(--red-text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: bold;
}

/* ---------- Phones ---------- */

@media (max-width: 700px) {
  .splash { margin: 10px auto 12px; border-width: 6px; }
  .warn-h { font-size: 12px; padding: 8px 4px 6px; }
  .splash-b { padding: 10px 8px; }
  .gate-text { font-size: 16px; }
  /* full-width, stacked buttons: easy to tap, ENTER on top */
  .gate-btns { flex-direction: column; align-items: stretch; }
  .gate-btns .btn { width: 100%; padding: 10px 14px; text-align: center; }
}