/* ART WACO TX — guess.css
   Styles for NAME THAT WALL (guess.html + js/guess.js). Every rule lives under
   .g-* or #guess so nothing here can reach the rest of the site; every colour
   and radius is a token from style.css :root, so a palette change there lands
   here for free. Loaded after style.css and relies on its .btn/.btn-primary,
   .kicker, .facts, .hunt-top and h2 rules. */

#guess { max-width: 520px; margin: 0 auto; }

/* House rule: anything that sets display restates [hidden]. */
#guess [hidden], .g-app [hidden] { display: none !important; }

/* Focus: green ring, same as the hunt card. Never gold. */
#guess :focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }

/* ---------- shared bits ---------- */

.g-big-btn {
  min-height: 56px;
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
}
.g-btn-quiet {
  background: var(--ivory-deep);
  color: var(--ink);
  border: 1.5px solid rgba(34, 31, 26, .18);
}
.g-btn-quiet:hover { background: #fff; border-color: var(--green); color: var(--green-deep); }

.g-actions, .g-start-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
@media (min-width: 480px) {
  .g-actions { grid-template-columns: 1fr 1fr; }
}
.g-start-actions { margin-top: 0; }

.g-note {
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 16px 0 0;
}
.g-note strong { color: var(--ink); }

/* ---------- progress bar ---------- */

.g-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
.g-dots {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.g-dots li {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(34, 31, 26, .14);
}
.g-dots li.is-now  { background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.g-dots li.is-hit  { background: var(--green); }
.g-dots li.is-miss { background: var(--rust); }

/* ---------- the stage: one square, two layers cross-fading ---------- */

.g-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory-deep);
  box-shadow: var(--shadow);
}
.g-stage::before { content: ''; display: block; padding-top: 100%; }
.g-tile {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 300%;   /* the sprite is three squares tall */
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .45s ease, transform .7s ease;
}
.g-tile.g-on { opacity: 1; transform: none; }
.g-level {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34, 31, 26, .78);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
}

.g-hint {
  margin: 12px 0 0;
  min-height: 1.4em;
  color: var(--ink-soft);
  font-size: .95rem;
}
.g-hint strong { color: var(--ink); }

/* ---------- the four names ---------- */

.g-choices {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
@media (min-width: 480px) {
  .g-choices { grid-template-columns: 1fr 1fr; }
}
.g-choice {
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid rgba(34, 31, 26, .14);
  box-shadow: var(--shadow);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.g-choice:hover { border-color: var(--green); }
.g-choice:active { transform: scale(.985); }
.g-choice.g-struck, .g-choice:disabled {
  text-decoration: line-through;
  opacity: .55;
  cursor: default;
  box-shadow: none;
}
.g-choice.g-struck:hover { border-color: rgba(34, 31, 26, .14); }

/* Screen-reader announcements only. */
.g-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- the reveal ---------- */

.g-verdict {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.g-verdict.is-hit  { color: var(--green-deep); }
.g-verdict.is-miss { color: var(--rust); }
.g-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--ivory-deep);
}
.g-photo img { width: 100%; height: auto; }
.g-name {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin: 18px 0 4px;
  text-wrap: balance;
}
.g-official { margin: 0 0 10px; color: var(--ink-soft); font-weight: 600; }
.g-look { margin: 0 0 6px; }
.g-look em { font-style: italic; color: var(--green-deep); }
.g-where { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ---------- the score ---------- */

.g-final { text-align: center; }
.g-total {
  margin: 4px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.g-total .g-num { font-size: clamp(4rem, 18vw, 6rem); color: var(--green); }
.g-total .g-den { font-size: clamp(1.4rem, 6vw, 2rem); color: var(--ink-soft); margin-left: 4px; }
.g-rank { margin: 12px 0 4px; }
.g-rank-line { margin: 0 auto; max-width: 34ch; color: var(--ink-soft); }

.g-recap {
  list-style: none;
  margin: 22px 0 0;
  padding: 6px 0;
  text-align: left;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  counter-reset: wall;
}
.g-recap li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid rgba(34, 31, 26, .08);
  font-variant-numeric: tabular-nums;
}
.g-recap li:first-child { border-top: 0; }
.g-recap li::before {
  counter-increment: wall;
  content: counter(wall);
  flex: 0 0 1.6em;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: .85rem;
}
.g-recap a { flex: 1 1 auto; color: var(--ink); text-decoration: none; font-weight: 600; }
.g-recap a:hover { color: var(--teal); text-decoration: underline; }
.g-recap .g-pts { font-weight: 800; flex: 0 0 auto; }
.g-recap li.is-hit  .g-pts { color: var(--green-deep); }
.g-recap li.is-miss .g-pts { color: var(--rust); }

.g-toast {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--green-deep);
  font-weight: 600;
  word-break: break-word;
}
.g-links { margin-top: 18px; color: var(--ink-soft); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .g-tile, .g-choice { transition: none; }
  .g-tile { transform: none; }
}