.cardlet {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fcff;
}
.selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 10px;
  text-align: left;
}
.selector-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--line);
}
.round-preview {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff6cc;
  border: 1px solid #f4d26c;
  display: grid;
  gap: 4px;
}
.round-preview strong { color: #735c0f; }
.round-preview span { color: var(--muted); font-weight: 800; }
.local-join-card {
  display: grid;
  place-items: center;
  min-width: 190px;
  min-height: 190px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
    #fff;
  background-size: 18px 18px;
  border: 8px solid #14213d;
  color: #14213d;
  box-shadow: 0 14px 24px rgba(20,33,61,0.16);
}
.local-join-card strong { font-size: 1rem; letter-spacing: 0.2em; }
.local-join-card span { font-size: 2.7rem; font-weight: 1000; letter-spacing: 0.08em; }
.local-join-card small { font-weight: 800; color: var(--muted); }
.badges, .review-mode {
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  background: #f8fcff;
  border: 1px solid var(--line);
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.badge-card {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--line);
  animation: badge-pop 0.5s ease both;
}
.badge-card span { font-size: 2rem; }
.badge-card strong { color: var(--brand-dark); }
.badge-card em { font-style: normal; font-weight: 900; color: var(--muted); }
.review-output {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.review-output article {
  padding: 12px;
  border-radius: 16px;
  background: white;
  border: 1px solid var(--line);
}
.review-output small, .review-output em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}
@keyframes badge-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .selector-grid { grid-template-columns: 1fr; }
  .local-join-card { width: 100%; min-height: 150px; }
}