.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.achievement-card {
  border: 1px solid rgba(36, 77, 59, .35);
  border-radius: 18px;
  background: #fffdf8;
  color: var(--forest);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  min-width: 0;
  transition: transform .2s, border-color .2s;
}

.achievement-card:hover,
.achievement-card:focus-visible { border-color: var(--ochre); transform: translateY(-2px); }
.achievement-card.is-earned { background: #fff8e9; border-color: var(--ochre); }
.achievement-card img { width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: contain; }
.achievement-card strong { font: 700 15px/1.25 var(--font-display); text-align: center; overflow-wrap: anywhere; }
.achievement-card small { font-size: 11px; opacity: .72; }
.achievement-modal { max-width: min(620px, calc(100vw - 28px)); }
.achievement-modal form,
.achievement-detail-view { padding: 24px; }
.achievement-dialog-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.achievement-dialog-head img { width: 130px; height: 130px; object-fit: contain; }
.achievement-dialog-head span,
.achievement-detail-view > span,
#achievement-notice-content > span { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--ochre); }
.achievement-dialog-head h3,
.achievement-detail-view h3 { font: normal 30px var(--font-display); margin: 6px 0; }
.achievement-detail-view { text-align: center; }
.achievement-detail-view > img { width: min(260px, 70vw); aspect-ratio: 1; object-fit: contain; }
.achievement-detail-view > p { font-size: 14px; line-height: 1.55; }
.achievement-detail-view > div { background: var(--white); border-radius: 14px; padding: 14px; text-align: left; margin: 16px 0; }
.achievement-detail-view > div p { font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.achievement-detail-view .achievement-earned { font-weight: 700; color: var(--ochre); }
.achievement-detail-view .achievement-photo { width: 100%; max-height: 320px; aspect-ratio: auto; object-fit: cover; border-radius: 14px; }
.drive-link { border: 0; background: transparent; color: var(--forest); text-decoration: underline; font-weight: 700; margin-top: 12px; cursor: pointer; }
.achievement-notice-modal { max-width: min(480px, calc(100vw - 28px)); overflow: hidden; }
.achievement-notice-modal::backdrop { background: rgba(36, 77, 59, .88); }
#achievement-notice-content { padding: 28px; text-align: center; background: var(--ivory); }
#achievement-notice-content img { width: min(260px, 70vw); aspect-ratio: 1; object-fit: contain; }
#achievement-notice-content h2 { font: normal 24px var(--font-display); margin: 8px 0 0; color: var(--ochre); }
#achievement-notice-content h3 { font: normal 30px/1.08 var(--font-display); margin: 4px 0 8px; }
#achievement-notice-content p { font-size: 13px; margin-bottom: 18px; }

@media (max-width: 520px) {
  .achievement-grid { gap: 8px; }
  .achievement-card { padding: 6px; border-radius: 14px; }
  .achievement-card strong { font-size: 12px; }
  .achievement-card small { font-size: 10px; }
  .achievement-dialog-head img { width: 96px; height: 96px; }
}