/* GiroGuessr — la photo mystère, l'épingle, le verdict */
:root { --accent: #7c6cf0; --accent-fonce: #5646c9; }

.start { display: flex; flex-direction: column; gap: 12px; }
.start .btn { align-self: stretch; }

.gu-status {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "Saira Condensed", sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: .6px; text-transform: uppercase;
}
.gu-status #gu-total { color: var(--sodium); font-size: 22px; font-weight: 800; }

.gu-photo {
  display: block; width: 100%; height: clamp(220px, 32vh, 400px); object-fit: cover;
  border-radius: 16px; border: 1px solid var(--ligne); background: #0f1316;
  box-shadow: 0 14px 34px #0007;
}
#gu-photo-link { display: block; }

.gu-result {
  background: var(--asphalte-2); border: 1px solid var(--accent); border-radius: 16px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.gu-result .pts {
  font-family: "Saira Condensed", sans-serif; font-weight: 800; font-size: 40px;
  line-height: 1; color: var(--sodium);
}
.gu-result .dist { font-size: 17px; }
.gu-result .dist strong { color: var(--craie); }
.gu-result .lieu { color: var(--craie-douce); font-size: 16px; }
.gu-result .bravo { color: #4caf50; font-weight: 600; }

.gu-end { display: flex; flex-direction: column; gap: 10px; }
.block { display: flex; flex-direction: column; gap: 8px; }

/* rappel affiché quand la partie du jour a déjà été courue */
.gu-deja {
  background: var(--asphalte-2); border: 1px solid var(--sodium); border-radius: 14px;
  padding: 13px 16px; color: var(--craie-douce); font-size: 16px;
}