@layer components {
  /* ── Round 2 live ranking (admin "jury mode") ── */
  .ranking-hint {
    color: var(--ink-600);
    font-size: 0.9rem;
    margin-bottom: var(--s4);
  }

  .ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }

  .ranking-card {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    cursor: grab;
  }

  .ranking-card.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
  }

  .ranking-rank {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--forest-900);
    background: var(--forest-50);
    border-radius: var(--r-sm);
  }

  .ranking-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--ink-50);
  }

  .ranking-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ranking-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
  }

  .ranking-title {
    font-weight: 500;
    color: var(--ink-950);
  }

  .ranking-photo-id {
    font-size: 0.8125rem;
    color: var(--ink-400);
  }
}