/* Look: Piracicaba street signs. Blue plates with a white frame and white rules,
   hung on a light grey wall. */
/* Archivo (SIL Open Font License, vendor/archivo-v25/OFL.txt): Google Fonts' own files, served
   from this site so players' browsers don't contact Google. Variable: width 85–100 %, weight 500–800. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("vendor/archivo-v25/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("vendor/archivo-v25/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #1f4fa0;
  --blue-dark: #183f80;
  --wall: #e4e7eb;
  --ink: #0f2347;
  --muted: #3d4c68;
  --line: #c9ced6;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--wall);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem; /* 18px, scales with the phone's text size */
  line-height: 1.45;
}

.hidden { display: none !important; }

.screen { min-height: 100%; }

/* Street sign: blue edge, white frame inside it, white rules between the rows */
.plate {
  container-type: inline-size; /* the logo and the score scale to the sign's width */
  margin: 5px; /* room for the blue edge drawn by the shadow */
  padding: 0.4rem 0.8rem 0.5rem;
  background: var(--blue);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 5px var(--blue), 0 10px 18px rgba(15, 35, 71, 0.28);
}
.plate-rule { height: 3px; margin: 0.35rem -0.8rem 0.5rem; background: #fff; }
.plate-small {
  margin: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.1rem 0.9rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Buttons: big, high contrast, thumb-sized, framed like a street sign */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 10px);
  min-height: 3.5rem;
  margin: 5px;
  padding: 0.6rem 1rem;
  border: 3px solid #fff;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 5px var(--blue), 0 8px 14px rgba(15, 35, 71, 0.25);
  font: inherit;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn + .btn { margin-top: 1rem; }
.btn:active { background: var(--blue-dark); box-shadow: 0 0 0 5px var(--blue-dark); }
.btn:disabled { background: #8a94a6; box-shadow: 0 0 0 5px #8a94a6; cursor: not-allowed; }

/* Start */
.start-inner, .result-inner {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.25rem 1.1rem 2rem;
}
.logo {
  margin: 0;
  font-size: min(3.1rem, 20cqi);
  line-height: 1;
  font-weight: 800;
  font-stretch: 96%;
  text-transform: uppercase;
}
.tagline {
  margin: 1.4rem 0 1.25rem;
  text-align: center;
  font-size: 1.65rem; font-weight: 800; font-stretch: 92%;
  color: var(--blue);
}
.start-msg { margin: 0 0 1.25rem; text-align: center; font-weight: 700; }
.start-best { margin: 1rem 0 0; text-align: center; font-weight: 600; color: var(--muted); }

.how { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.how li {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.75rem 0.9rem 0.75rem 0.8rem;
  background: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.3;
}
/* Step numbers: tiny street signs */
.how-n {
  flex: none;
  width: 2rem; height: 2rem;
  margin: 3px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* Game */
#screen-game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
#screen-game.hidden { display: none; }

.game-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  padding: 0.55rem 1rem 0.75rem;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
}
/* The street sign's white rule along the bottom */
.game-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.3rem;
  height: 3px; background: #fff;
}

.photo-wrap {
  position: relative;
  flex: 0 0 38%;
  background: #000;
  overflow: hidden;
}
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "2 de 5": a tiny street sign */
.photo-progress {
  position: absolute; right: calc(0.6rem + 3px); bottom: calc(0.6rem + 3px);
  padding: 0.15rem 0.6rem;
  border: 2px solid #fff;
  border-radius: 5px;
  background: var(--blue); color: #fff;
  box-shadow: 0 0 0 3px var(--blue);
  font-weight: 800; font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Mobile stays minimal: zoom button only on larger screens (tapping the photo still enlarges it). */
.photo-zoom { display: none; }
.photo-zoom {
  position: absolute; right: 0.6rem; top: 0.6rem;
  padding: 0.45rem 0.8rem;
  border: 0; border-radius: 999px;
  background: rgba(15,35,71,0.7); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 700;
}

.map-wrap { position: relative; flex: 1 1 auto; min-height: 12rem; }
#map { position: absolute; inset: 0; }
.map-center {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 500;
  display: flex; align-items: center; gap: 0.4rem;
  min-width: 3rem; min-height: 3rem; padding: 0.6rem;
  justify-content: center;
  border: 2px solid var(--blue); border-radius: 999px;
  background: #fff; color: var(--blue);
  font: inherit; font-size: 1rem; font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.map-center-label { display: none; }

/* Round action buttons (confirm, next): same look, same bottom-right spot.
   Round, but framed like a street sign: blue edge, white ring. */
.fab {
  flex: none;
  width: 4.25rem; height: 4.25rem;
  display: grid; place-items: center;
  border: 3px solid #fff; border-radius: 50%;
  background: var(--blue); color: #fff;
  box-shadow: 0 0 0 4px var(--blue), 0 4px 12px rgba(0,0,0,0.35);
  cursor: pointer;
}
.fab:active { background: var(--blue-dark); }
.confirm-fab {
  position: absolute; z-index: 600;
  right: calc(0.6rem + 4px); bottom: calc(0.6rem + 4px + env(safe-area-inset-bottom));
}

.reveal {
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--wall);
  border-top: 4px solid var(--blue);
  max-height: 55%;
  overflow-y: auto;
}
.reveal-points { margin: 0.1rem 0 0.5rem; font-size: 1.6rem; font-weight: 800; color: var(--blue); }
.reveal-title { margin: 0; font-size: 1.2rem; font-weight: 800; }
.reveal-caption { margin: 0.25rem 0 0.25rem; }

/* Map markers */
.pin { background: none; border: 0; }
.pin svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }


/* Closeness scale: same color plus words everywhere */
.tier-0 { --tier: #2f9e44; }
.tier-1 { --tier: #e0b000; }
.tier-2 { --tier: #e8740c; }
.tier-3 { --tier: #d0392b; }
/* In the results list the level's color is a stripe down the row's left edge */
.tile.small { flex: none; width: 0.6rem; align-self: stretch; border-radius: 4px; background: var(--tier); }
.row-left { display: flex; gap: 0.75rem; align-items: stretch; min-width: 0; }

/* Result: the score is a street sign */
/* The results must fit a phone screen down to the share button: tighter than the start screen */
.result-inner { padding-top: 1.25rem; }
.result-inner .plate { margin-bottom: 1rem; }
.result-total {
  margin: 0;
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: min(3rem, 19cqi); line-height: 1; font-weight: 800; font-stretch: 92%;
  font-variant-numeric: tabular-nums;
}
/* The round's title: a headline above the score sign, in even lines when it wraps */
.result-title {
  margin: 0 0.5rem 0.9rem;
  text-align: center;
  font-size: 1.6rem; line-height: 1.15; font-weight: 800; font-stretch: 92%;
  color: var(--blue);
  text-wrap: balance; /* never one word left alone on a line */
}
.result-total .unit { font-size: min(1.35rem, 8.5cqi); text-transform: uppercase; }
/* How close to the day's maximum */
.score-bar {
  flex: 1 1 auto;
  height: 0.75rem;
  border: 2px solid #fff;
  border-radius: 3px;
  overflow: hidden;
}
.score-fill { height: 100%; width: 0; background: #fff; }
.result-best { flex: none; }
.result-list { list-style: none; padding: 0; margin: 0 0 1.05rem; display: flex; flex-direction: column; gap: 0.4rem; }
.result-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  background: #fff;
  border-radius: var(--radius);
}
.result-list .name { font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.result-list .pts { font-weight: 800; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-list .dist { display: block; font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.copied { text-align: center; color: var(--blue); font-weight: 700; }
.next-round { margin: 0.9rem 0 0; text-align: center; color: var(--muted); font-weight: 600; }
.next-round strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.next-round + .btn { margin-top: 1rem; }

/* "Tem uma foto boa de Piracicaba?": a white card under the countdown, the whole card is the target */
.send-card {
  display: flex; align-items: center; gap: 0.85rem;
  min-height: 3.5rem; margin: 1.75rem 0 0; padding: 0.75rem 1rem;
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; line-height: 1.3;
}
.send-card svg { flex: none; color: var(--blue); }
.send-card strong { display: block; color: var(--blue); }
.send-card:active { background: #f1f3f6; }
body.testing .send-card { display: none; }

/* ---------- enviar.html: how to send a photo, terms, personal data ---------- */
.page-inner { max-width: 34rem; margin: 0 auto; padding: 1rem 1.1rem 2.5rem; }
.back {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 0.25rem;
  color: var(--blue); font-weight: 700; text-decoration: none;
}
.page-title {
  margin: 0.5rem 0 0.75rem; text-align: center;
  font-size: 1.85rem; line-height: 1.15; font-weight: 800; font-stretch: 92%;
  color: var(--blue); text-wrap: balance;
}
.page-lead { margin: 0 0 1.25rem; text-align: center; font-weight: 600; }
.page-inner .how { margin-bottom: 1.25rem; }
.page-inner a.btn { text-decoration: none; text-align: center; }
.important {
  margin: 0 0 1.5rem; padding: 0.8rem 1rem;
  background: #fff; border-left: 0.6rem solid var(--blue); border-radius: var(--radius);
  font-weight: 600;
}
.fallback {
  margin: 1.5rem 0 2rem; padding: 0.9rem 1rem 1rem;
  background: #fff; border-radius: var(--radius); text-align: center;
}
.fallback p { margin: 0 0 0.6rem; }
.address { display: block; margin: 0.2rem 0 0.75rem; font-size: 1.25rem; font-weight: 800; color: var(--ink); word-break: break-all; }
.copy-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.copy-btn {
  flex: 1 1 10rem; min-height: 3rem; padding: 0.4rem 0.75rem;
  border: 2px solid var(--blue); border-radius: var(--radius);
  background: #fff; color: var(--blue);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.copy-btn:active { background: #eef2fa; }
.copy-done { min-height: 1.45em; margin: 0.6rem 0 0 !important; color: var(--blue); font-weight: 700; }
/* The rules and the data notice: folded by default, a quieter but still legible size (about 16px, the usual minimum for contract terms) */
.terms { margin: 0; border-top: 2px solid var(--line); }
.terms summary {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; cursor: pointer; list-style: none;
  color: var(--muted); font-size: 1rem; font-weight: 700;
}
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after { content: "▾"; font-size: 0.9rem; }
.terms[open] summary::after { content: "▴"; }
.page-section { margin: 0.5rem 0 1.25rem; font-size: 0.9rem; color: var(--muted); } /* 1rem is 18px here */
.page-section h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 800; color: var(--ink); }
.page-section p { margin: 0 0 0.5rem; }

/* Zoom */
/* touch-action: none hands pinch and drag to app.js, so only the photo zooms, not the page. */
.zoom {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.zoom img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: 0 0;
  -webkit-touch-callout: none;
}
.zoom img.animate { transition: transform 0.2s ease-out; }
.zoom-close {
  position: absolute; z-index: 1;
  top: calc(env(safe-area-inset-top) + 0.75rem);
  right: calc(env(safe-area-inset-right) + 0.75rem);
  min-height: 3rem; padding: 0 1.1rem;
  display: flex; align-items: center; gap: 0.5rem;
  border: 2px solid rgba(255,255,255,0.6); border-radius: 999px;
  background: rgba(0,0,0,0.65); color: #fff;
  font: inherit; font-weight: 700;
  cursor: pointer;
}

/* Larger screens: room for labels and the zoom button */
@media (min-width: 900px) {
  .photo-zoom { display: block; }
  .map-center { padding: 0.5rem 0.9rem; }
  .map-center-label { display: inline; }
}

/* After confirming: on phones the photo gives its space to the map */
#screen-game.revealed .photo-wrap { display: none; }
/* The answer needs no header: the map starts at the top of the screen */
#screen-game.revealed .game-bar { display: none; }
#screen-game.revealed .photo-zoom,
#screen-game.revealed .photo-progress { display: none; }
/* Answer on phones: the map gets half the screen, the panel the rest.
   On short screens the map gives up height first, so "Próxima foto" always stays in view.
   Captions are written to fit in 4 lines (see SPEC §4); the button sits at the bottom. */
#screen-game.revealed .map-wrap { flex: 0 1 50%; }
.reveal {
  flex: 1 0 auto;
  display: flex; flex-direction: column;
  max-height: none; overflow-y: auto;
}
.reveal .reveal-points { margin: 0 0 1rem; text-align: center; }
.reveal .reveal-caption { margin: 0.25rem 0 0.75rem; }
.reveal #btn-next { margin-top: auto; flex: none; }

/* Landscape (phone on its side, tablet, desktop): photo and map side by side.
   These rules come after the phone rules above so they win where both apply. */
@media (orientation: landscape) and (min-width: 600px) {
  #screen-game { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; }
  .game-bar { grid-column: 1 / -1; grid-row: 1; }
  .photo-wrap { grid-column: 1; grid-row: 2 / 4; }
  .map-wrap { grid-column: 2; grid-row: 2; min-height: 0; }
  .reveal { grid-column: 2; grid-row: 3; flex: none; min-height: 0; }
  /* Answer, wide screens: the photo stays on the left, the map and the panel share the right */
  #screen-game.revealed .photo-wrap { display: block; }
  #screen-game.revealed .reveal { border-top: 4px solid var(--blue); }
  /* The photo column is taller and narrower than most photos (nearly all are landscape):
     show the whole photo, never cut its sides, and fill the space around it with a blurred,
     darkened copy of the same photo */
  .photo-wrap { isolation: isolate; }
  .photo-wrap img { object-fit: contain; }
  .photo-wrap::before {
    content: ""; position: absolute; inset: -2rem; z-index: -1;
    background: var(--photo, none) center / cover no-repeat;
    filter: blur(24px) brightness(0.55);
  }
}
/* Answer, short landscape (a phone on its side): no room for the panel under the map,
   so the map takes the photo's place on the left and the panel the right */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 599px) {
  #screen-game.revealed .photo-wrap { display: none; }
  #screen-game.revealed .map-wrap { grid-column: 1; grid-row: 1 / 4; }
  #screen-game.revealed .reveal { grid-column: 2; grid-row: 1 / 4; border-top: 0; border-left: 4px solid var(--blue); }
}

/* Chips over the map: verdict at the top, distance at the bottom (map fit leaves room) */
.chip {
  position: absolute; left: 50%; z-index: 650;
  transform: translateX(-50%);
  margin: 0; padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 700; font-size: 1.05rem;
  width: max-content; max-width: calc(100% - 1.5rem); /* wraps only when the map is narrower than the chip */
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
}
.chip-top { top: 0.6rem; background: var(--tier, var(--blue)); color: #fff; }
.chip-top.tier-1 { color: #1d1d1b; }
.chip-bottom { bottom: 0.6rem; background: rgba(15,35,71,0.88); color: #fff; }

/* OpenStreetMap credit must stay visible: run it up the left edge so the centered chip
   and the confirm button on the right have room. */
.leaflet-control-attribution.leaflet-control {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 4px 1px;
  line-height: 1.2;
}

/* Photo credit: small camera button on the photo, bottom-left */
.credit-btn {
  position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(15,35,71,0.6); color: #fff;
  cursor: pointer;
}
.credit-btn[aria-expanded="true"] { background: rgba(0,0,0,0.85); }
.photo-credit {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: 3.6rem; z-index: 3;
  margin: 0; padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: rgba(15,35,71,0.92); color: #fff;
  font-size: 0.9rem;
}
.photo-credit a { color: #fff; white-space: nowrap; } /* "CC BY-SA 4.0" stays on one line */
#screen-game.revealed .map-center { display: none; }

#game-hint { min-width: 0; }

/* ---------- Test mode (preview.js): only on this computer, never on the published site ---------- */
:root { --test: #ffd43b; --test-ink: #3b2f00; }
.test-bar {
  max-width: 30rem; margin: 0.75rem auto 0; padding: 0.6rem 0.75rem 0.75rem;
  background: var(--test); color: var(--test-ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 12px rgba(59, 47, 0, 0.18);
  text-align: center;
}
@media (max-width: 32rem) { .test-bar { margin: 0.5rem 0.75rem 0; } }
/* While playing, the bar steps aside; a yellow stripe says it's a test */
body:has(#screen-game:not(.hidden)) .test-bar { display: none; }
body.testing #screen-game { border-top: 6px solid var(--test); }
body.testing .next-round { display: none; }
.test-mode { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.test-nav { display: flex; align-items: center; gap: 0.5rem; }
.test-arrow {
  flex: none; width: 3.25rem; height: 3.25rem;
  border: 0; border-radius: var(--radius);
  background: var(--test-ink); color: var(--test);
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.test-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.test-day { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; display: flex; flex-direction: column; line-height: 1.2; }
/* Narrow screen or large text: the day goes on its own line above the arrows */
@media (max-width: 22em) {
  .test-nav { flex-wrap: wrap; justify-content: space-between; }
  .test-day { order: -1; flex-basis: 100%; margin-bottom: 0.4rem; }
}
.test-day strong { font-size: 1.2rem; }
.test-day span { font-size: 0.95rem; font-weight: 600; }
.test-status { margin: 0.45rem 0 0; font-size: 0.95rem; font-weight: 600; }
.test-state { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.55); }
.test-state.ok { background: #2f9e44; color: #fff; }
.test-state.warn { background: #d0392b; color: #fff; }
.test-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
.test-btn {
  flex: 1 1 8rem; min-height: 2.9rem; padding: 0.4rem 0.75rem;
  border: 2px solid var(--test-ink); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6); color: var(--test-ink);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.test-btn:active { background: #fff; }
.test-btn-wide { flex-basis: 100%; }
body.test-local .start-inner, body.test-local .result-inner { padding-top: 1.25rem; }

/* The five answers on one map */
.answers {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: var(--wall);
}
.answers-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0.75rem; background: var(--test); color: var(--test-ink);
}
.answers-head strong { font-size: 1rem; line-height: 1.2; }
.answers-close { position: static; flex: none; }
.answers-map { flex: 0 0 50%; }
.answers-list { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: 0.6rem 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.answers-list li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem; background: #fff; border-radius: var(--radius); cursor: pointer;
}
.answers-list img { flex: none; width: 4.5rem; height: 3.4rem; object-fit: cover; border-radius: 6px; }
.answers-list .answer-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.answers-list strong { font-size: 1rem; }
.answer-diff { font-size: 0.85rem; font-weight: 700; color: var(--blue); }
.answer-caption { font-size: 0.85rem; color: var(--muted); }
.answer-n, .answer-pin span {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border: 2px solid #fff; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.answer-pin { background: none; border: 0; }
.answer-pin span { width: 34px; height: 34px; }