* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { background: #000; color: #ddd; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }

header { text-align: center; padding-top: 12px; }
.hammer { display: block; margin: 0 auto; height: clamp(90px, 22vh, 230px); width: auto; max-width: 90vw; object-fit: contain; }
h1 { font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; margin-top: 8px; }

main { flex: 1; display: flex; flex-direction: column; align-items: center; }
.tools { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
#q { width: min(340px, 70vw); padding: 8px 12px; border-radius: 18px; border: 1px solid #333; background: #111; color: #eee; font: inherit; }
#q:focus { outline: none; border-color: #777; }
#count { color: #777; font-size: 13px; min-width: 60px; }

.stage { --w: min(560px, 72vw); position: relative; width: 100%; height: calc(var(--w) * 0.625 + 40px); perspective: 1400px; margin-top: 18px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.track { position: absolute; inset: 0; transform-style: preserve-3d; }
.card {
  position: absolute; left: 50%; top: 0; width: var(--w); aspect-ratio: 16 / 10; margin-left: calc(var(--w) / -2);
  display: block; background: #000; transition: transform .45s ease, opacity .45s ease; will-change: transform; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card img {
  width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
  -webkit-box-reflect: below 6px linear-gradient(transparent 65%, rgba(255, 255, 255, .22));
  -webkit-user-drag: none; user-select: none;
}
.card.center { cursor: zoom-in; }
.card.center:focus-visible { outline: 2px solid #888; outline-offset: 4px; }

.nav { position: absolute; top: calc(var(--w) * 0.3125); transform: translateY(-50%); z-index: 1000; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #333; background: rgba(20, 20, 20, .8); color: #ccc; font-size: 28px; line-height: 40px; cursor: pointer; }
.nav:hover { background: #222; color: #fff; }
.prev { left: 2vw; }
.next { right: 2vw; }
.empty { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; color: #777; }

.caption { text-align: center; min-height: 54px; padding: 0 16px; position: relative; z-index: 1001; }
.meta { color: #888; font-size: 13px; letter-spacing: .04em; }
.title { color: #eee; font-size: 19px; text-decoration: none; }
.title:hover { text-decoration: underline; }
.hint { color: #555; font-size: 12px; margin: 10px 0 18px; text-align: center; padding: 0 16px; }

@media (max-width: 640px) {
  .stage { --w: 84vw; height: calc(var(--w) * 0.625 + 30px); }
  .nav { display: none; }
  .title { font-size: 17px; }
}