/* Benitachell Bowls Club — Quiz & Bingo
   Palette lifted directly from the club crest:
   gold ribbon, red shield field, blue bend, green ground, black wood. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&display=swap');

:root{
  --baize:#0E3D28;
  --baize-deep:#07251796;
  --baize-dark:#072417;
  --gold:#F9C84D;
  --gold-deep:#C79A2E;
  --red:#ED1C24;
  --red-deep:#A11319;
  --blue:#394DA1;
  --green:#3F9263;
  --cream:#FBF3DE;
  --cream-dim:#E4D9BC;
  --ink:#14110C;
  --ink-soft:#4A4436;

  --display:'Archivo Black','Arial Black','Helvetica Neue',Impact,sans-serif;
  --body:'Archivo','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;

  --r:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  background:var(--baize);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}

/* the baize has a faint weave so large flat areas don't look like flat CSS */
.baize{
  background:
    radial-gradient(ellipse at 50% 0%, #17553A 0%, var(--baize) 55%, var(--baize-dark) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 4px);
}

/* ---------- the gold slat: the club's ribbon, reused as a header device ---------- */
.slat{
  background:linear-gradient(180deg,var(--gold) 0%,#EDB93F 100%);
  color:var(--ink);
  font-family:var(--display);
  letter-spacing:.02em;
  border-top:3px solid var(--gold-deep);
  border-bottom:3px solid var(--gold-deep);
}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;margin:0}

.crest{display:block;image-rendering:auto}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);
  font-weight:700;
  font-size:19px;
  line-height:1.15;
  min-height:64px;
  padding:14px 22px;
  border-radius:var(--r);
  border:3px solid transparent;
  background:var(--cream);
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-align:center;
  transition:transform .08s ease, filter .15s ease;
  width:100%;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.btn[disabled]{opacity:.38;cursor:not-allowed;transform:none;filter:none}

.btn-go{background:var(--gold);border-color:var(--gold-deep);font-size:24px;min-height:82px}
.btn-red{background:var(--red);border-color:var(--red-deep);color:#fff}
.btn-quiet{background:transparent;border-color:var(--cream-dim);color:var(--cream);font-weight:600;min-height:52px;font-size:16px}
.btn-quiet:hover{background:rgba(251,243,222,.1)}
.btn-sm{min-height:46px;font-size:15px;padding:10px 14px}

/* ---------- cards ---------- */
.card{
  background:var(--cream);
  color:var(--ink);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--shadow);
}
.card h2{color:var(--ink);font-size:20px;margin-bottom:14px}

label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
input,select,textarea{
  font-family:var(--body);font-size:18px;padding:12px 14px;width:100%;
  border:2px solid #C9BE9E;border-radius:10px;background:#fff;color:var(--ink);
}
input:focus,select:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}

.pill{
  display:inline-block;padding:5px 12px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}