.rank-place { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.tier-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 76px; padding: 14px 20px; border: 0; border-radius: var(--radius); color: var(--chip-ink); font: 1rem var(--font); text-align: left; cursor: pointer; }
.tier-btn strong { font-size: 1.15rem; }
.tier-0 { background: var(--great); }
.tier-1 { background: var(--meh); }
.tier-2 { background: var(--bad); }

.vs-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 96px; padding: 16px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 1rem var(--font); text-align: left; box-shadow: 0 6px 20px rgb(20 18 15 / 0.12); cursor: pointer; }
.vs-card .kanji { width: 52px; height: 52px; font-size: 1.5rem; }
.vs-card .name { font-size: 1.1rem; white-space: normal; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .vs-card { transition: transform 0.1s; }
  .vs-card:active { transform: scale(0.97); }
}
.vs { margin: 0; text-align: center; font: 900 0.95rem var(--font-num); color: var(--ink2); letter-spacing: 0.1em; }
.stack > .hint { text-align: center; margin: 0; }

textarea { resize: vertical; font-weight: 400; }

.reveal { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8vh; text-align: center; }
.reveal > * { margin: 0; }
.reveal h1 { font-size: 1.3rem; }
.reveal .name { max-width: 100%; }