/* ===== Bible Rounds — modern regal theme ===== */

:root{
  /* ground */
  --bg-0:#080610;
  --bg-1:#120e20;
  --bg-2:#1a1430;

  /* raised surfaces */
  --surface:#221a3d;
  --surface-hi:#2c2350;
  --surface-sunk:#150f28;

  /* antique gold */
  --gold:#c9a961;
  --gold-lt:#e8d3a0;
  --gold-dp:#8a6d33;
  --line:rgba(201,169,97,.20);
  --line-hi:rgba(201,169,97,.48);

  /* type */
  --ink:#f3efe6;
  --ink-dim:rgba(243,239,230,.58);
  --ink-faint:rgba(243,239,230,.34);

  --garnet:#a8434b;
  --jade:#4a9d8f;

  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--sans);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, #2a2050 0%, transparent 60%),
    radial-gradient(900px 600px at 15% 110%, #1d2a46 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment:fixed;
}

/* ---------- screens ---------- */
.screen{display:none}
.screen.active{display:block;flex:1 0 auto}
.hidden{display:none !important}

/* ---------- footer ---------- */
.site-footer{
  flex:0 0 auto;
  padding:1.7rem 1.25rem 2.1rem;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.75rem;
  line-height:1.7;
  letter-spacing:.05em;
  color:var(--ink-faint);
}
.site-footer strong{font-weight:600;color:var(--ink-dim)}
.site-footer a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.32);
  padding-bottom:1px;
  transition:color .18s, border-color .18s;
}
.site-footer a:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.site-footer a:focus-visible{
  outline:1px solid var(--gold-lt);outline-offset:3px;border-radius:2px;
}

/* ---------- wordmark ---------- */
.logo{
  font-family:var(--serif);
  text-align:center;
  line-height:1;
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.62em;
  text-indent:.62em;
  text-transform:uppercase;
  color:var(--gold);
}
.logo span{
  display:block;
  margin-top:.55rem;
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  letter-spacing:.10em;
  text-indent:.10em;
  color:var(--ink);
  text-shadow:0 2px 30px rgba(201,169,97,.18);
}
.logo.small{
  font-size:.56rem;letter-spacing:.34em;text-indent:.34em;
  text-align:left;color:var(--gold);
}
.logo.small span{
  display:inline;margin:0 0 0 .7em;font-size:.95rem;
  letter-spacing:.16em;text-shadow:none;
}

/* ---------- setup ---------- */
.setup-wrap{max-width:600px;margin:0 auto;padding:8vh 1.25rem 4rem}
.tagline{
  text-align:center;color:var(--ink-faint);
  font-family:var(--serif);font-style:italic;
  font-size:.9rem;letter-spacing:.04em;
  margin:1.6rem 0 2.6rem;
}
.tagline::before,.tagline::after{
  content:"";display:inline-block;width:34px;height:1px;
  background:var(--line-hi);vertical-align:middle;margin:0 .9rem;
}
.setup-card{
  background:linear-gradient(180deg, rgba(44,35,80,.72), rgba(26,20,48,.72));
  border:1px solid var(--line);
  border-radius:10px;
  padding:2.2rem 2rem;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.setup-label{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;font-weight:600;
}
.team-count{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:2rem}
.count-btn{
  font-family:var(--serif);font-size:1.55rem;
  padding:.75rem 0;border:1px solid var(--line);
  background:var(--surface-sunk);color:var(--ink-dim);
  border-radius:7px;cursor:pointer;
  transition:all .2s ease;
}
.count-btn:hover{border-color:var(--line-hi);color:var(--ink)}
.count-btn.selected{
  background:linear-gradient(180deg,#d8bb77,#b18f45);
  color:#181129;border-color:var(--gold-lt);
  box-shadow:0 4px 18px rgba(201,169,97,.28);
}
.team-names{display:grid;gap:.55rem;margin-bottom:1.9rem}
.name-row{display:flex;align-items:center;gap:.8rem}
.name-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 10px currentColor}
.name-row input{
  flex:1;padding:.72rem .95rem;border-radius:7px;font-size:.95rem;
  border:1px solid var(--line);background:var(--surface-sunk);
  color:var(--ink);font-family:var(--sans);
  transition:border-color .2s;
}
.name-row input:focus{outline:none;border-color:var(--line-hi)}

.toggle-row{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;
  font-size:.88rem;color:var(--ink-dim);cursor:pointer;
  transition:color .18s;
}
.toggle-row:hover{color:var(--ink)}
.toggle-row input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}

/* ---------- buttons ---------- */
.btn-primary{
  display:block;width:100%;margin-top:2rem;padding:.95rem 1rem;
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(180deg,#d8bb77,#b08d43);
  color:#181129;border:none;border-radius:7px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 28px rgba(0,0,0,.4);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary:hover{
  filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 14px 34px rgba(201,169,97,.22);
}
.btn-primary:active{transform:translateY(1px);filter:brightness(.96)}
.btn-primary kbd{
  font-size:.85em;opacity:.5;font-family:inherit;letter-spacing:.1em;
  border:1px solid rgba(24,17,41,.3);border-radius:3px;
  padding:.1em .45em;margin-left:.7em;
}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  padding:.55rem 1.1rem;border-radius:6px;cursor:pointer;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--sans);transition:all .2s;
}
.btn-ghost:hover{border-color:var(--line-hi);color:var(--ink)}
.btn-ghost.wide{display:block;width:100%;margin-top:.7rem}
.bank-note{
  margin-top:1.3rem;text-align:center;font-size:.7rem;
  color:var(--ink-faint);letter-spacing:.04em;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(26,20,48,.6), transparent);
}
.turn-note{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
}
.turn-note strong{font-weight:600;letter-spacing:.12em}
.topbar-actions{display:flex;gap:.5rem;align-items:center}
#btnSound{min-width:6.4rem}
#btnSound[aria-pressed="false"]{color:var(--ink-faint);border-style:dashed}
.hint-key{
  font-style:normal;font-size:.9em;color:var(--ink-faint);
  letter-spacing:.04em;
}

/* ---------- board ---------- */
.board{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  padding:1.5rem;max-width:1500px;margin:0 auto;
}
.cat-cell{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.9rem .55rem;min-height:82px;
  background:linear-gradient(180deg, rgba(201,169,97,.09), rgba(201,169,97,.02));
  border:1px solid var(--line-hi);
  border-radius:6px;
  font-family:var(--serif);
  font-size:clamp(.62rem,.95vw,.86rem);
  text-transform:uppercase;letter-spacing:.13em;line-height:1.45;
  color:var(--gold-lt);
}
.tile{
  min-height:96px;
  appearance:none;-webkit-appearance:none;
  width:100%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, var(--surface-hi), var(--surface));
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--serif);
  font-size:clamp(1.1rem,2.1vw,1.85rem);
  letter-spacing:.03em;
  color:var(--gold);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.3);
  transition:transform .18s ease, border-color .18s, box-shadow .18s, background .18s;
}
.tile:hover:not(.used){
  transform:translateY(-3px);
  color:var(--gold-lt);
  border-color:var(--line-hi);
  background:linear-gradient(180deg,#372b62, var(--surface-hi));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.45),
             0 0 0 1px rgba(201,169,97,.14);
}
.tile.used,.tile:disabled{
  background:rgba(255,255,255,.014);
  border-color:rgba(255,255,255,.045);
  color:transparent;cursor:default;box-shadow:none;
  transform:none;opacity:1;
}

/* ---------- scoreboard ---------- */
.scoreboard{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;
  padding:.75rem 1.5rem 2.5rem;
}
.score-card{
  min-width:160px;flex:0 1 200px;text-align:center;
  background:linear-gradient(180deg, rgba(44,35,80,.5), rgba(21,15,40,.5));
  border:1px solid;border-radius:8px;padding:1rem 1.1rem;
  transition:transform .25s ease, box-shadow .25s, border-color .25s;
}
.score-card.active{transform:translateY(-5px)}
.score-name{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;margin-bottom:.5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.score-value{
  font-family:var(--serif);font-size:1.75rem;letter-spacing:.02em;
  color:var(--ink);
}
.score-value.neg{color:var(--garnet)}
.score-adjust{
  display:flex;gap:.3rem;justify-content:center;margin-top:.5rem;
  opacity:0;transition:opacity .2s;
}
.score-card:hover .score-adjust,
.score-adjust:focus-within{opacity:1}
.adj{
  width:1.7rem;height:1.5rem;line-height:1;
  border:1px solid var(--line);border-radius:5px;
  background:var(--surface-sunk);color:var(--ink-dim);
  cursor:pointer;font-family:var(--sans);font-size:.85rem;
  transition:all .16s;
}
.adj:hover{color:var(--ink);border-color:var(--line-hi)}
.score-hint{
  text-align:center;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin:-1.4rem 0 2rem;
}

/* visible only to screen readers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* keyboard focus — visible on every interactive element */
.tile:focus-visible,.count-btn:focus-visible,.btn-primary:focus-visible,
.btn-ghost:focus-visible,.judge-btn:focus-visible,.adj:focus-visible,
input:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:2px;
}
.btn-ghost:disabled{opacity:.35;cursor:default}
.btn-ghost:disabled:hover{border-color:var(--line);color:var(--ink-dim)}

/* ---------- clue overlay ---------- */
.overlay{
  display:none;position:fixed;inset:0;z-index:50;
  background:rgba(6,4,14,.86);
  backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:1.5rem;
}
.overlay.open{display:flex}
.clue-panel{
  width:min(920px,100%);max-height:92vh;overflow-y:auto;
  background:linear-gradient(180deg, #2a2150, #1a1332);
  border:1px solid var(--line-hi);
  border-radius:12px;
  padding:2.2rem 2.4rem 2.4rem;
  box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);
  animation:rise .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}

.clue-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.9rem;margin-bottom:1.2rem;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;
}
#clueValue{
  font-family:var(--serif);color:var(--gold-lt);
  font-size:1.3rem;letter-spacing:.04em;text-transform:none;
}

.timer-track{
  height:2px;background:rgba(255,255,255,.07);border-radius:99px;
  overflow:hidden;margin-bottom:1.4rem;
}
.timer-fill{
  height:100%;width:100%;transform-origin:left;
  background:linear-gradient(90deg, var(--gold-lt), var(--gold) 55%, var(--garnet));
}

.clue-text{
  font-family:var(--serif);
  font-size:clamp(1.3rem,3vw,2.15rem);
  font-weight:400;line-height:1.5;text-align:center;
  color:var(--ink);
  padding:1.8rem 1rem 2rem;
  min-height:140px;display:flex;align-items:center;justify-content:center;
}
.clue-text.big{font-size:clamp(1.35rem,3.2vw,2.3rem)}

.answer-block{
  background:rgba(201,169,97,.07);
  border:1px solid var(--line-hi);
  border-radius:8px;padding:1.2rem 1.4rem;margin-bottom:1.4rem;
  animation:rise .22s ease-out;
}
.answer-label{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:.5rem;
}
.answer-text{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.3vw,1.65rem);color:var(--gold-lt);
}
.answer-text.big{font-size:clamp(1.3rem,2.7vw,1.95rem);text-align:center}

.award-block{margin-top:.4rem;animation:rise .22s ease-out}
.award-label{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;margin-bottom:.9rem;
}
.award-teams{display:grid;gap:.5rem}
.award-row{
  display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.025);
  border:1px solid;border-left-width:3px;border-radius:7px;
  padding:.65rem .9rem;
}
.award-row .who{
  flex:1;font-weight:600;font-size:.9rem;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- judge / award buttons ---------- */
.judge-btn{
  padding:.5rem .95rem;border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface-sunk);color:var(--ink-dim);
  cursor:pointer;font-family:var(--sans);
  font-size:.74rem;letter-spacing:.08em;white-space:nowrap;
  transition:all .18s;
}
.judge-btn:hover{color:var(--ink);border-color:var(--line-hi)}
.judge-btn.yes:hover,.judge-btn.on-yes{
  background:rgba(74,157,143,.2);border-color:var(--jade);color:#a8e0d5;
}
.judge-btn.no:hover,.judge-btn.on-no{
  background:rgba(168,67,75,.2);border-color:var(--garnet);color:#f0b4b8;
}

/* ---------- daily double ---------- */
.dd-splash{text-align:center;padding:1.5rem 0 .5rem;animation:rise .3s ease-out}
.dd-title{
  font-family:var(--serif);
  font-size:clamp(1.7rem,4.6vw,2.9rem);
  line-height:1.25;letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;color:var(--gold-lt);
  margin-bottom:1.6rem;
}
.dd-title::after{
  content:"";display:block;width:70px;height:1px;
  background:var(--line-hi);margin:1.3rem auto 0;
}
.dd-sub{font-size:1rem;color:var(--ink-dim);margin-bottom:.5rem}
.dd-sub strong{font-weight:600;letter-spacing:.06em}
.dd-range{
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1.3rem;
}
.wager-input{
  width:min(240px,100%);padding:.75rem 1rem;
  font-family:var(--serif);font-size:1.5rem;text-align:center;
  border-radius:7px;border:1px solid var(--line-hi);
  background:var(--surface-sunk);color:var(--gold-lt);
}
.wager-input:focus{outline:none;border-color:var(--gold)}
.dd-splash .btn-primary{width:min(240px,100%);margin:1.4rem auto 0}

/* ---------- final round ---------- */
.final-wrap{max-width:820px;margin:0 auto;padding:9vh 1.25rem 4rem;text-align:center}
.final-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,4vw,2.6rem);
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:.6rem;
}
.final-title::after{
  content:"";display:block;width:90px;height:1px;
  background:var(--line-hi);margin:1.6rem auto 2rem;
}
.final-label{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin:1.8rem 0 1rem;
}
.final-category{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,4vw,2.5rem);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink);
}
.wager-list,.judge-list{display:grid;gap:.55rem;margin-bottom:1.4rem;text-align:left}
.wager-row,.judge-row{
  display:flex;align-items:center;gap:.8rem;
  background:rgba(255,255,255,.025);
  border:1px solid;border-left-width:3px;border-radius:7px;
  padding:.75rem 1rem;
}
.wager-row .who,.judge-row .who{
  flex:1;font-weight:600;font-size:.9rem;letter-spacing:.06em;
}
.wager-row .cap,.judge-row .cap{
  display:block;margin-top:.25rem;
  font-size:.66rem;font-weight:400;letter-spacing:.1em;
  color:var(--ink-faint);
}
.wager-row input{
  width:120px;padding:.55rem .7rem;
  font-family:var(--serif);font-size:1.05rem;text-align:center;
  border-radius:6px;border:1px solid var(--line);
  background:var(--surface-sunk);color:var(--gold-lt);
}
.wager-row input:focus{outline:none;border-color:var(--line-hi)}
.final-wrap .btn-primary{max-width:300px;margin-left:auto;margin-right:auto}

/* ---------- results ---------- */
.results-wrap{max-width:660px;margin:0 auto;padding:11vh 1.25rem 4rem;text-align:center}
.results-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,4vw,2.6rem);
  letter-spacing:.16em;text-indent:.16em;
  color:var(--gold-lt);line-height:1.3;
}
.results-title::after{
  content:"";display:block;width:80px;height:1px;
  background:var(--line-hi);margin:1.7rem auto 2.4rem;
}
.podium{display:grid;gap:.6rem;margin-bottom:2.6rem}
.podium-row{
  display:flex;align-items:center;gap:1.1rem;
  background:rgba(255,255,255,.025);
  border:1px solid;border-left-width:3px;border-radius:8px;
  padding:1.05rem 1.4rem;text-align:left;
}
.podium-row.win{
  background:linear-gradient(90deg, rgba(201,169,97,.13), rgba(255,255,255,.02));
  box-shadow:0 8px 34px rgba(201,169,97,.14);
}
.rank{
  font-family:var(--serif);font-size:1.15rem;
  color:var(--ink-faint);width:1.6rem;flex:0 0 auto;
}
.podium-row.win .rank{color:var(--gold)}
.podium-name{flex:1;font-size:.95rem;font-weight:600;letter-spacing:.08em}
.podium-score{font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em}
.podium-score.neg{color:var(--garnet)}
.results-actions{display:grid;gap:.6rem;max-width:300px;margin:0 auto}
.results-actions .btn-primary{margin-top:0}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .board{gap:4px;padding:.7rem}
  .tile{min-height:58px;font-size:.9rem;border-radius:4px}
  .cat-cell{min-height:56px;font-size:.5rem;letter-spacing:.08em;padding:.4rem .25rem;border-radius:4px}
  .topbar{flex-wrap:wrap;gap:.6rem;padding:.8rem 1rem}
  .clue-panel{padding:1.5rem 1.2rem 1.7rem;border-radius:9px}
  .score-card{min-width:0;flex:1 1 44%;padding:.7rem .6rem}
  .score-value{font-size:1.3rem}
  .award-row{flex-wrap:wrap}
  .award-row .who{flex:1 0 100%;margin-bottom:.2rem}
  .award-row .judge-btn{flex:1;text-align:center}
  .setup-wrap{padding:5vh 1.1rem 3rem}
  .setup-card{padding:1.7rem 1.3rem}
}