.draw-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 96px;
}

.draw-header {
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-3);
}

.draw-header h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--blush-veil);
}

.draw-hint {
  margin-top: var(--space-2);
  color: var(--mauve-mute);
  font-size: 0.85rem;
}

.fan-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.fan-viewport.is-dragging {
  cursor: grabbing;
}

.fan-viewport.is-rotatable {
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.fan-canvas {
  --fan-rotation: 0deg;
  position: relative;
  left: 50%;
  margin-left: -560px;
  transform-origin: top center;
}

.fan-card {
  --lift: 0px;
  position: absolute;
  left: 560px;
  top: 980px;
  width: 82px;
  height: 139px;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-card);
  background-color: var(--mulberry);
  background-image: url('../img/card-back.svg');
  background-size: 72%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--hairline);
  transform-origin: center;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--base-angle) + var(--fan-rotation)))
    translateY(calc(var(--radius) * -1 - var(--lift)));
  transition: transform 240ms var(--ease-arc), filter 240ms, box-shadow 240ms;
}

/* 호버는 밝기만 올린다 — 색 있는 글로우 금지, 그림자는 무채색으로만 */
.fan-card:hover,
.fan-card:focus-visible {
  --lift: 28px;
  filter: brightness(1.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 999 !important;
}

.fan-card.is-selected {
  --lift: 48px;
  border: 1.5px solid var(--pearl);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 1000 !important;
}

.fan-card.is-dimmed {
  filter: saturate(0.35) brightness(0.62);
  pointer-events: none;
}

.fan-card.is-entering {
  transition: none !important;
  transform:
    translate(-50%, -50%)
    rotate(var(--entry-angle))
    translateY(calc(var(--radius) * -1));
  opacity: 0;
}

.fan-card.is-settling {
  transition: transform 380ms var(--ease-arc), opacity 380ms var(--ease-arc);
  transition-delay: var(--entry-delay, 0ms);
  opacity: 1;
}

.fan-card.is-leaving {
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--base-angle) + var(--fan-rotation)))
    translateY(calc(var(--radius) * -1 - var(--lift) + 120px));
  opacity: 0;
  transition: transform 240ms var(--ease-arc), opacity 240ms;
}

.fan-card.is-chosen {
  filter: brightness(1.15);
  border-color: var(--pearl);
}

.fan-bottombar.is-hidden {
  opacity: 0;
  transition: opacity 240ms;
}

/* §7: 원형 채움 배지가 아니라 테두리만 있는 작은 사각형 + 로마숫자 */
.fan-card .badge {
  position: absolute;
  top: -1px;
  left: -1px;
  min-width: 21px;
  height: 21px;
  padding: 0 3px;
  background: var(--noir-rose);
  border: 1px solid var(--pearl);
  color: var(--pearl);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fan-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--noir-rose);
  border-top: 1px solid var(--hairline);
  z-index: 2000;
}

.fan-count {
  color: var(--mauve-mute);
  font-size: 0.8125rem;
}