/* ── Layout ───────────────────────────────────────────────────────────── */
html, html body { height: 100%; }
html body { overflow: hidden; font-family: 'Nunito', sans-serif; }

html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 220px;   /* leaves room for keyboard (~170px) + footer strip (40px) */
  right: 0;
  left: 0;
  padding: 0 2vw;
  overflow-y: auto;
}

header {
  position: absolute;
  left: 0; right: 0; top: 0;
  background-color: white;
  height: 50px;
  z-index: 100;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  justify-content: space-between;
}

/* keyboard-footer: fixed at the bottom, auto-sizes to fit keyboard */
keyboard-footer {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: white;
  z-index: 100;
  border-top: 1px solid #ddd;
}

/* ── Game board — sticky so Current Guess stays visible while scrolling ── */
#game-board {
  position: sticky;
  top: 0;
  background: white;
  z-index: 50;
  text-align: center;
  padding: 4px 0 6px;
  border-bottom: 1px solid #eee;
  margin-bottom: 6px;
}

/* ── Current guess row ────────────────────────────────────────────────── */
.letter-row {
  display: flex;
  justify-content: center;
  margin: 2px 0;
}

.letter-box {
  width:  34px;
  height: 34px;
  border: 2px solid #999;
  margin: 2px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  text-transform: uppercase;
  user-select: none;
  background: white;
}

.filled-box { border-color: #555; }

/* ── Future guess indicator rows ─────────────────────────────────────── */
.future-letter-row {
  display: flex;
  justify-content: center;
  margin: 1px 0;
}

.half-letter-box {
  width:  18px;
  height: 7px;
  border: 1px solid #b0c4de;
  margin: 1px;
  background: #dce8f5;
}

/* ── Puzzle columns ──────────────────────────────────────────────────── */
#puzzle-container { margin-top: 4px; }

#puzzle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 8px;
  padding-bottom: 8px;
}

.game-col {
  border: 2px solid #00c;
  border-radius: 10px;
  background: #b0c4de;
  padding: 5px;
  min-width: 130px;
  max-width: 200px;
  flex: 1 1 130px;
  text-align: center;
}

.puzzle-title {
  background: #f9f2e2;
  border: 1px solid #00c;
  border-radius: 6px 6px 0 0;
  padding: 4px 2px;
  font-weight: bold;
  font-size: clamp(0.7rem, 1.5vw, 0.95rem);
  margin-bottom: 4px;
}

.previousGuesses { margin-bottom: 3px; }

/* ── Letter dropdowns ────────────────────────────────────────────────── */
#selectLetters-1, #selectLetters-2, #selectLetters-3,
#selectLetters-4, #selectLetters-5, #selectLetters-6,
[id^="selectLetters-"] .letter-row { background: transparent; }

.letter-select {
  width:  32px;
  height: 32px;
  border: 2px solid #999;
  margin: 1px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  padding: 0;
  cursor: pointer;
  background: white;
  appearance: none;
  -webkit-appearance: none;
  text-align-last: center;
}

/* ── Scripture display ───────────────────────────────────────────────── */
.scripture {
  font-style: italic;
  font-size: 0.75rem;
  margin: 3px 0;
  display: none;
  background: #fffde7;
  border-radius: 4px;
  padding: 3px;
}

/* ── "See Words" button — override global .btn sizing ───────────────── */
.game-col .btn {
  font-size: 0.75rem !important;
  padding: 0.2rem 0.4rem !important;
  margin-top: 4px;
}

/* ── Score / share area ──────────────────────────────────────────────── */
#sharable-score { display: none; text-align: center; margin: 6px 0; }
#game-over      { display: none; text-align: center; margin: 6px 0; }

/* ── Simple keyboard overrides ───────────────────────────────────────── */
.simple-keyboard {
  max-width: 600px;
  margin: 0 auto;
  padding: 4px 4px 0 !important;
}
.simple-keyboard .hg-button {
  font-size: clamp(11px, 2vw, 15px);
  height: 46px !important;
}

/* ── Footer strip inside keyboard-footer ─────────────────────────────── */
.keyboard-footer-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  gap: 1rem;
}

/* ── Loading / error ─────────────────────────────────────────────────── */
#loading { text-align: center; padding: 2rem; font-size: 1.2rem; color: #666; }

/* ── Games list (index page) ─────────────────────────────────────────── */
html body.index-page .container-fluid.body-content { bottom: 40px; }

.game-card {
  display: block;
  padding: 1rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.game-card:hover { background: #f0f4ff; }
.game-card h5    { margin: 0 0 4px; }
.game-card small { color: #666; }

/* ── Cookie alert ────────────────────────────────────────────────────── */
.cookiealert {
  position: fixed;
  bottom: 44px; left: 0; right: 0;
  background: #333; color: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  transform: translateY(100%);
  transition: transform 0.3s;
  z-index: 200;
}
.cookiealert.show    { transform: translateY(0); }
.acceptcookies       { margin-left: 1rem; white-space: nowrap; }

/* ── Global .btn reset (don't use vw units globally) ─────────────────── */
.btn { padding: 0.375rem 0.75rem; }