/* Team draw reveal. Tokens from app.css only; three font sizes; no rounded corners. */

.draw-view { --reel: min(72vw, 320px); }

.draw-col {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 24px max(var(--gap), var(--sar)) 24px max(var(--gap), var(--sal));
  text-align: center;
}

.draw-label { color: var(--butter-dim); }

.draw-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: var(--reel);
  min-height: calc(var(--reel) + 8px);
}
.draw-stage.multi { width: min(88vw, 420px); min-height: calc((min(88vw, 420px) - 8px) / 2 + 8px); }

.reel-frame {
  flex: 1 1 0;
  min-width: 0;
  border: 4px solid var(--accent);
  background: var(--ink-2);
  transform-origin: 50% 50%;
}

.reel-window {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-2);
}

.reel-strip {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.draw-tile {
  position: relative;
  flex: none;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-3);
}
.draw-tile .avatar {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  font-size: var(--fs-mega);
}
.draw-tile.blank {
  display: grid;
  place-items: center;
  color: var(--butter-dim);
  font-size: var(--fs-mega);
  font-weight: 800;
  line-height: 1;
}

.draw-names {
  max-width: 100%;
  min-height: 1em;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}
.draw-names.pending { visibility: hidden; }

.draw-actions {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Keep the space reserved so the reel doesn't jump when the buttons appear. */
.draw-actions[hidden] { display: flex !important; visibility: hidden; }

/* Waiting for the synchronised start: a slow shimmer behind the countdown (transform only, so it is cheap). */
.draw-tile.waiting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 229, 138, .14) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: draw-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes draw-shimmer { to { transform: translateX(100%); } }
.draw-count { color: var(--butter); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .draw-tile.waiting::after { animation: none; display: none; }
}