* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif; background: #fbf9ea; color: #222; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.site-header { background: #b71c1c; color: #fff; padding: .8rem 1rem; }
.site-header h1 { margin: 0; font-size: clamp(1.1rem, 4vw, 1.6rem); }
.container { max-width: 960px; margin: 0 auto; padding: 1rem; }
.spot-image { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.btn { display: inline-block; margin: .5rem 0; padding: .75rem 1.2rem; border: 0; border-radius: 8px; background: #1976d2; color: #fff; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn-sub { background: #607d8b; }
.progress { font-weight: bold; }
.spot-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.spot-card { position: relative; background: #fff; border: 1px solid #e2e1d5; border-radius: 10px; overflow: hidden; }
.spot-card a { display: block; color: inherit; text-decoration: none; }
.spot-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.spot-name { display: block; padding: .5rem; font-weight: bold; }
.stamp-mark { position: absolute; top: .3rem; right: .5rem; font-size: 2.2rem; color: #ccc; }
.spot-card.stamped .stamp-mark { color: #d32f2f; }
.badge { position: absolute; left: .3rem; top: .3rem; background: #555; color: #fff; font-size: .75rem; padding: .1rem .4rem; border-radius: 4px; }
.complete { text-align: center; font-size: 1.3rem; color: #d32f2f; font-weight: bold; }
.location { list-style: none; padding: 0; font-size: .85rem; color: #555; }
.status { font-weight: bold; }
.stamp-area { text-align: center; margin: 1rem 0; }
.stamp-btn { width: 9rem; height: 9rem; border-radius: 50%; border: 3px solid #d32f2f; background: #fff; color: #d32f2f; font-size: 1.1rem; font-weight: bold; cursor: pointer; }
.stamp-done { display: inline-flex; flex-direction: column; align-items: center; }
.stamp-star { font-size: 7rem; line-height: 1; color: #d32f2f; animation: pop 1s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .stamp-star { animation: none; } }