.roll { gap: 1rem; }
.roll-head { text-align: center; }
.roll-head .eyebrow { color: var(--rad-green); letter-spacing: 0.42em; font-size: 0.78rem; }
.roll-head h2 { font-size: clamp(1.3rem, 4vw, 2rem); color: #e7e1d5; margin-top: 0.6rem; font-weight: 700; }

.roll-viewport {
  position: relative;
  width: min(680px, 92vw);
  height: 66svh;
  margin-top: 0.4rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
}
.roll-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
  transition: opacity 600ms ease;
}
.roll-track.dim { opacity: 0; }

/* 手动/列表模式：原生滚动 */
.roll-viewport.manual { overflow-y: auto; scrollbar-width: thin; }
.roll-viewport.manual .roll-track { position: static; transform: none !important; opacity: 1 !important; }
.roll-viewport.manual .roll-dup,
.roll-viewport.manual .roll-gap { display: none; } /* 手动模式只看一份，无需复制份与留白 */

/* 首尾衔接处的留白：一段空白，提示"重新来过了"（约半屏，明显） */
.roll-gap { height: clamp(8rem, 28vh, 18rem); }

/* 名字少、一屏放得下：静止居中（不被上下渐隐裁切） */
.roll-viewport.fits { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.roll-viewport.fits .roll-track { position: static; transform: none !important; opacity: 1 !important; }

.roll-row { text-align: center; padding: 0.28rem 0.5rem; }
.roll-name { font-size: 1.02rem; color: var(--ash); letter-spacing: 0.06em; }
.roll-row .role { color: var(--ash-faint); font-size: 0.7rem; margin-left: 0.5em; letter-spacing: 0.12em; }
.roll-row .uid { display: block; color: var(--ash-faint); font-size: 0.64rem; letter-spacing: 0.08em; margin-top: 0.1em; font-family: var(--font-num); }
.roll-row .note { display: block; color: var(--rad-green-dim); font-size: 0.7rem; margin-top: 0.08em; }

.roll-row.is-hero { padding: 0.42rem 0.5rem; }
.roll-row.is-hero .roll-name { color: var(--gold); text-shadow: var(--hero-glow); font-size: 1.16rem; }
.roll-row.is-hero .badge { color: var(--ember); margin-left: 0.4em; font-size: 0.85em; }

.roll-band { text-align: center; padding: 2.4rem 0 1.1rem; }
.roll-band:first-child { padding-top: 1rem; }
.roll-band h3 { color: var(--rad-green); letter-spacing: 0.3em; font-size: 1.02rem; font-weight: 700; }
.roll-band .narr { color: var(--ash-faint); font-style: italic; font-size: 0.82rem; margin-top: 0.45rem; letter-spacing: 0.04em; }

.roll-spacer { height: 40vh; }
.roll-empty { text-align: center; color: var(--ash-dim); padding: 1.6rem; line-height: 2; }

.roll-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.4rem;
}
.roll-controls .btn { font-size: 0.78rem; padding: 0.48em 0.95em; letter-spacing: 0.08em; }
.roll-controls .btn[aria-pressed="true"] { border-color: var(--ember-soft); color: var(--ember); }

@media (max-width: 540px) {
  .roll-viewport { height: 60svh; }
  .roll-controls .btn { font-size: 0.72rem; padding: 0.44em 0.7em; }
}