/* Bible Match Game — ETX Christians light learning theme */

:root{
  --bg:#f7f3ea;
  --card:#ffffff;
  --text:#24342b;
  --muted:#667085;
  --border:rgba(0,0,0,.08);
  --shadow:0 16px 34px rgba(45,39,28,.055);
  --green:#4f6f52;
  --green-dark:#3f6543;
  --green-soft:rgba(79,111,82,.10);
  --gold:#f4b942;
  --gold-soft:rgba(244,185,66,.16);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.08);
  --radius:22px;
}

*{ box-sizing:border-box; }

html{
  color-scheme: light;
  background:#f7f3ea;
}


body{
  margin:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:
    radial-gradient(circle at top left, #fffaf0 0, #f7f3ea 40%, #f5f1e8 100%);
  color:var(--text);
  min-height:100vh;
  padding:0;
}


 .app{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:28px 22px 54px;
  display:grid;
  gap:22px;
}

.game-header,
main{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.game-header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:center;
  padding:30px 32px;
  background:linear-gradient(135deg,#f3fff7 0%,#ffffff 58%,#fff8e8 100%);
}

.title{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.title h1{
  margin:0;
  font-size:clamp(34px,5vw,52px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.035em;
}
.title p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
  max-width:740px;
  font-weight:650;
}
.title b{ color:var(--green-dark); }

.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(92px,1fr));
  gap:10px;
  align-items:stretch;
}

.pill{
  background:#fff;
  border:1px solid var(--border);
  padding:12px 14px;
  border-radius:18px;
  font-size:14px;
  color:var(--text);
  display:grid;
  gap:3px;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
  user-select:none;
  min-width:96px;
}
.pill span.label{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pill span:not(.label){ font-size:22px; font-weight:950; }

.controls{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.app button,
.back-link{
  cursor:pointer;
  border:0;
  background:var(--green);
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  font-weight:950;
  font-size:15px;
  box-shadow:0 14px 26px rgba(79,111,82,.16);
  transition: transform .12s ease, box-shadow .14s ease, filter .14s ease;
  user-select:none;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.app button:hover,
.back-link:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.app button:active,
.back-link:active{ transform:translateY(0); }
.app button.secondary,
.back-link{
  background:var(--green-soft);
  color:#36523a;
  box-shadow:none;
}

main{
  padding:24px;
  overflow:hidden;
}

.toprow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.hint{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
  font-weight:650;
  max-width:760px;
}

.toast{
  background:#fbfefc;
  border:1px solid var(--border);
  border-radius:16px;
  padding:11px 13px;
  display:flex;
  gap:8px;
  align-items:center;
  min-height:42px;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}
.toast strong{ color:var(--green-dark); }

.colHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 2px 12px;
  color:var(--green-dark);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:950;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  align-items:stretch;
}

.card{
  position:relative;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 25px rgba(0,0,0,.04);
  padding:16px;
  min-height:98px;
  display:flex;
  flex-direction:column;
  gap:8px;
  user-select:none;
  cursor:pointer;
  transition: transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .14s ease, opacity .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.08);
  border-color:rgba(79,111,82,.22);
}
.card:active{ transform: translateY(0); }

.card .type{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:950;
}
.card .text{
  font-size:15px;
  line-height:1.32;
  font-weight:850;
  color:var(--text);
}

.card.term{
  background:linear-gradient(180deg,#f4fff8,#fff);
}
.card.term .type{ color:var(--green-dark); }
.card.def{
  background:linear-gradient(180deg,#fffaf0,#fff);
}
.card.def .type{ color:#8a5a00; }

.card.selected{
  border-color:rgba(79,111,82,.58);
  background:linear-gradient(180deg,#ecfff3,#fff);
  transform:scale(1.01);
  box-shadow:0 18px 38px rgba(79,111,82,.10);
}

.card.wrong{
  border-color:rgba(239,68,68,.7);
  background:var(--danger-soft);
  animation:shake .22s ease;
}

@keyframes shake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  50%{ transform:translateX(4px); }
  75%{ transform:translateX(-3px); }
  100%{ transform:translateX(0); }
}

.card.matched{
  opacity:0;
  transform:scale(.98);
  pointer-events:none;
}

.footer{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}
.footer code{
  background:#f2f4f7;
  color:#475467;
  border-radius:8px;
  padding:2px 6px;
}

dialog{
  border:none;
  border-radius:22px;
  padding:0;
  width:min(520px, 92vw);
  background:#fff;
  color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  border:1px solid var(--border);
}
dialog::backdrop{
  background:rgba(15,23,42,.32);
  backdrop-filter:blur(4px);
}
.modal{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal h2{ margin:0; font-size:24px; font-weight:950; }
.modal p{ margin:0; color:var(--muted); line-height:1.45; font-size:15px; font-weight:650; }
.modal .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:6px;
}

.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;
}

@media(max-width:900px){
  .game-header{ grid-template-columns:1fr; padding:24px; }
  .stats{ grid-template-columns:repeat(3,1fr); }
}

@media(max-width:620px){
  .app{ padding:18px 14px 38px; }
  .game-header,main{ border-radius:20px; }
  .game-header{ padding:20px; }
  main{ padding:18px; }
  .stats{ grid-template-columns:1fr; }
  .controls{ width:100%; }
  .app button,.back-link{ width:100%; }
  .grid{ grid-template-columns:1fr; }
  .toprow{ align-items:stretch; }
  .toast{ width:100%; }
}


/* Force the Match Game to stay on the light ETX Christians theme */
body, .app, .game-header, main, dialog, .modal {
  color-scheme: light;
}
.game-header, main, .pill, .toast, .card, .review-item, dialog {
  color:#24342b;
}
#gameGrid, section {
  background:transparent;
}
.card, .pill, .toast, main, dialog {
  background-color:#ffffff;
}
.card.term {
  background:linear-gradient(180deg,#effff5 0%,#ffffff 100%);
}
.card.def {
  background:linear-gradient(180deg,#fff8e7 0%,#ffffff 100%);
}
.card.selected {
  background:linear-gradient(180deg,#eafff1 0%,#ffffff 100%);
}
.app button.secondary, .back-link {
  background:#eaf8ef;
  color:#126b3c;
}