/* Homepage, laid out like Fightdle's: logo, a stack of pill buttons (one per game), then the
   about section. Tokens, background, logo and footer come from style.css. */

.home-main {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 560px; padding: 28px 16px 8px; text-align: center;
}
.home-logo img { width: min(520px, 100%); }
.home .tag { font-size: 1.15rem; margin-top: 10px; }

/* --- game buttons: emblem | centred label | status, the outer columns equal so the label sits dead centre --- */
.game-list { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: 10px 0 8px; }
.game-btn {
  --emblem: clamp(62px, 17vw, 76px);
  display: grid; grid-template-columns: var(--emblem) 1fr var(--emblem); align-items: center;
  width: min(460px, 100%); padding: 4px 8px;
  text-decoration: none; color: var(--ink);
  background: rgba(19, 32, 26, 0.85);
  border: 3px solid var(--gold); border-radius: 999px;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .game-btn:hover { transform: translateY(-2px); background: rgba(34, 56, 44, 0.92); box-shadow: 5px 6px 0 #000; }
  .game-btn:hover .game-btn__title { color: var(--gold); }
}
.game-btn:active { transform: translateY(1px); box-shadow: 2px 2px 0 #000; }
.game-btn:focus-visible { outline: 3px solid var(--parchment); outline-offset: 3px; }

.game-btn__emblem { width: var(--emblem); height: var(--emblem); }
.game-btn__emblem img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 #000); }

.game-btn__text { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.game-btn__title {
  font: 800 clamp(1.25rem, 5vw, 1.6rem) "Cinzel", serif; letter-spacing: 0.06em; line-height: 1.05;
  text-shadow: 2px 2px 0 #000; transition: color 0.15s ease;
}
.game-btn__sub { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Solved today: a green tick disc in the right-hand column. */
.game-btn__status { justify-self: center; }
.game-btn.solved .game-btn__status {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--hit); color: #fff; font: 800 1.3rem/1 system-ui, sans-serif;
  border: 2px solid #fff; box-shadow: 2px 2px 0 #000;
}
.game-btn.solved .game-btn__sub { color: #9fd6a8; }

.next-daily { margin: 14px 0 4px; color: var(--muted); font-size: 1rem; }
#countdown { font: 800 1rem "Cinzel", serif; color: var(--gold); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* --- How to play --- */
.about-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 #000; font-size: 0.9rem;
}
.about-btn span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #1a140a; font: 800 0.85rem Georgia, serif; font-style: italic;
}
.about-dialog {
  max-width: min(520px, calc(100vw - 32px)); padding: 20px 22px; border-radius: 10px;
  background: var(--parchment); color: #2a2010; border: 3px solid var(--gold);
  box-shadow: 6px 6px 0 #000; font-size: 1rem; line-height: 1.4;
}
.about-dialog::backdrop { background: rgba(5, 10, 7, 0.75); }
.about-dialog h2 { font-family: "Cinzel", serif; margin: 0 0 8px; color: #6b5420; }
.about-dialog a { color: #6b4a26; }
.about-close {
  position: absolute; top: 8px; right: 10px; padding: 0 8px; background: none; color: #6b5420;
  font: 400 1.8rem/1 Georgia, serif; box-shadow: none;
}
.about-legend { list-style: none; padding: 0; margin: 8px 0; }
.about-legend li { margin: 6px 0; }
.about-legend .sq { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; border-color: #2a2010; }
.about-small { font-size: 0.85rem; color: #6b5420; }

/* --- about section (for first-time visitors and search) --- */
.about-game {
  width: 100%; max-width: 640px; margin: 28px 16px 0; padding: 18px 20px; text-align: left;
  background: rgba(19, 32, 26, 0.82); border: 1px solid var(--line); border-radius: 10px;
}
.about-game h2, .about-game h3 { font-family: "Cinzel", serif; color: var(--gold); margin: 0 0 8px; }
.about-game h3 { font-size: 1rem; margin-top: 16px; }
.about-game p, .about-game li { color: var(--ink); line-height: 1.45; }
.about-game a { color: var(--gold); }
.about-game details { border-top: 1px solid var(--line); padding: 8px 0; }
.about-game summary { cursor: pointer; font-weight: 600; }
.about-game details p { margin: 6px 0 0; color: var(--muted); }