/* Polygon-specific styling. Everything else (topbar, sidebar, report card,
   legend, found list) comes from /projects/quiz/quiz.css. */

/* Unsolved: a flat blank tile. Found: filled with the city's accent, set
   inline by cities.js. Revealed: greyed, so 公布解答 reads differently from
   something the player actually remembered. */
.dist{
  fill:#dfe3e9;
  stroke:#ffffff;
  stroke-linejoin:round;
  transition:fill .25s ease;
}
.dist.found{ stroke:#ffffff; }
.dist.revealed{ fill:#c7ccd4; stroke:#eef0f3; }

/* Dark ink on a white halo (paint-order puts the stroke behind the fill), so
   the name stays readable over both an accent-filled district and the white
   border it inevitably straddles. stroke-width is set per label in cities.js
   so the halo scales with the type. */
.dist-label{
  fill:#1c2530;
  font-family:"PingFang TC","Noto Sans TC",sans-serif;
  font-weight:600;
  paint-order:stroke;
  stroke:rgba(255,255,255,.92);
  stroke-linejoin:round;
  pointer-events:none;
  user-select:none;
}

/* Pre-game city picker. Sits in a .overlay > .report card from quiz.css, so
   only the checklist itself needs styling here. */
.pick-card{ max-width:420px; }
.pick-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px;
  margin:14px 0 10px;
  text-align:left;
}
.pick-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #dfe3e9;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}
.pick-item:has(input:checked){ border-color:var(--accent); background:#f7f8fa; }
.pick-item input{ accent-color:var(--accent); width:16px; height:16px; flex:none; }
.pick-item .sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.pick-item .nm{ font-weight:600; }
.pick-item .ct{ margin-left:auto; color:#6c7480; font-size:13px; }
.pick-total{ color:#6c7480; font-size:14px; }
.pick-quick{ display:flex; gap:8px; justify-content:center; margin:10px 0 2px; }
.pick-quick button{ flex:1; }

@keyframes distPop{
  0%{ opacity:.25; }
  60%{ opacity:1; }
  100%{ opacity:1; }
}
.dist.pop-anim{ animation:distPop .45s ease-out; }