/* Guess the Spot — daily Hawaii photo game. Scoped .gts-*, px fonts,
   supporting text ≥14px per the readability convention. */

.gts-wrap { max-width: 780px; margin: 0 auto; padding-bottom: 40px; }

.gts-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  color: #fff;
}
.gts-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 39, 0.22), rgba(7, 27, 39, 0.88));
}
.gts-head {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 72px 20px 34px;
}
.gts-back {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.gts-back:hover { background: rgba(0,0,0,.62); color: #fff; }
.gts-title { font-size: 46px; margin: 0 0 8px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.52); }
.gts-sub { font-size: 19px; color: rgba(255,255,255,.94); margin: 0 auto 10px; max-width: 620px; text-shadow: 0 1px 6px rgba(0,0,0,.58); }
.gts-daynum {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin: 0 0 14px;
}

.gts-game {
  background: #fff;
  border: 1px solid #dce8ee;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(23,33,49,.08);
}
.gts-photo-wrap {
  position: relative;
  background: #0e1b26;
  padding-top: 62%;
  overflow: hidden;
}
.gts-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0; /* defeat global img radius inside the card clip */
}

.gts-stage { padding: 16px 18px 6px; }
.gts-q {
  font-size: 18px;
  font-weight: 800;
  color: #1a2b3c;
  margin: 0 0 10px;
  text-align: center;
}
.gts-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 12px;
}
.gts-opt {
  background: #f4f9fc;
  border: 1.5px solid #c9dce8;
  border-radius: 12px;
  padding: 13px 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: #1a2b3c;
  cursor: pointer;
  line-height: 1.25;
  transition: transform .1s ease, border-color .15s ease;
  min-width: 0;
}
.gts-opt:hover:not(:disabled) { border-color: #0a5793; transform: translateY(-1px); }
.gts-opt:disabled { cursor: default; opacity: .92; }
.gts-opt.is-right { background: #1D9771; border-color: #1D9771; color: #fff; }
.gts-opt.is-wrong { background: #c3232f; border-color: #c3232f; color: #fff; }

.gts-reveal {
  border-top: 1px dashed #dce8ee;
  padding: 16px 18px 18px;
  text-align: center;
}
.gts-verdict { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.gts-verdict.is-win { color: #157a5b; }
.gts-verdict.is-loss { color: #c3232f; }
.gts-answer { font-size: 17px; color: #34434e; margin: 0 0 14px; }
.gts-reveal-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none !important;
  line-height: 1.2;
}
.gts-btn-guide { background: #0a5793; color: #fff !important; }
.gts-btn-add { background: #1D9771; color: #fff; }
.gts-btn-add.is-added { background: #475569; cursor: default; }
.gts-btn-share { background: #f3be51; color: #4a3413; }
.gts-btn:hover { filter: brightness(.93); }
.gts-next { font-size: 14px; color: #7a8a96; margin: 12px 0 0; }

.gts-stats {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 14px 10px 0;
  font-size: 14.5px;
  color: #51606b;
}
.gts-stat strong { font-size: 18px; color: #1a2b3c; margin-right: 4px; }

.gts-how {
  background: #f7fafb;
  border: 1px solid #e2eaee;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 22px;
}
.gts-how h2 { font-size: 22px; margin: 0 0 8px; }
.gts-how p { font-size: 16px; line-height: 1.55; color: #34434e; }
.gts-how .gts-more { font-size: 15px; color: #51606b; margin-bottom: 0; }

@media (max-width: 560px) {
  .gts-head { padding: 80px 16px 28px; }
  .gts-title { font-size: 34px; }
  .gts-sub { font-size: 16px; }
  .gts-options { grid-template-columns: 1fr; }
  .gts-photo-wrap { padding-top: 72%; }
}
@media print { .gts-game, .gts-stats { display: none; } }