/* Random Name Picker. The scene is its own size container, so the cards and
   the reel are sized against the space left between the chip and the
   buttons; --np-cw is the width of a full-size card. */

@property --np-cw { syntax: "<length>"; inherits: true; initial-value: 0px; }

.np {
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
.np-top {
  flex: none; margin-top: clamp(8px, 2.6cqmin, 28px); max-width: 92%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.np-scene {
  position: relative; flex: 1 1 0; min-height: 0; width: 100%;
  container-type: size; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.np.is-busy .np-scene { cursor: progress; }
.np-hint {
  flex: none; color: color-mix(in srgb, var(--stage-ink) 55%, transparent);
  font-size: clamp(12px, 2.7cqmin, 26px); text-align: center; padding: 0 1em .4em;
}

/* ---- cards ---- */
.np-cards { position: absolute; inset: 0; --np-cw: min(84cqw, 86cqh * 1.6); }
.np-deck, .np-big {
  position: absolute; left: 50%; top: 50%; width: var(--np-cw); aspect-ratio: 1.6; translate: -50% -50%;
}
.np-deck {
  --spread: 6deg;
  transform: translateY(6%) scale(.46);
  transition: transform .45s cubic-bezier(.3, 1.25, .5, 1), opacity .3s;
}
.np-cards:hover .np-deck { --spread: 9deg; }
.np.has-card .np-deck { opacity: 0; transform: translateY(34%) scale(.34); }
.np-deck .np-card {
  transform-origin: 50% 230%;
  transform: rotate(calc(var(--r) * var(--spread)));
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.np-deck.is-shuffling .np-card {
  animation: np-shuffle .64s cubic-bezier(.45, .05, .35, 1) infinite;
  animation-delay: calc(var(--k) * -.128s);
}
@keyframes np-shuffle {
  0%, 100% { transform: rotate(calc(var(--r) * 3deg)); }
  32% { transform: translate(calc(var(--d) * 64%), -9%) rotate(calc(var(--d) * 13deg)); }
  62% { transform: translate(calc(var(--d) * -7%), 3%) rotate(calc(var(--d) * -3deg)); }
}

.np-big { perspective: calc(var(--np-cw) * 3.2); z-index: 2; }
.np-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.3, 1.3, .45, 1);
}
.np-inner.is-up { transform: rotateY(180deg); }
.np-inner.no-tr { transition: none; }

.np-face {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: calc(var(--np-cw) * .05); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  container-type: size;
}
.np-back {
  --edge: calc(var(--np-cw) * .022);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 calc(var(--np-cw) * .004), transparent 0 calc(var(--np-cw) * .03)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 calc(var(--np-cw) * .004), transparent 0 calc(var(--np-cw) * .03)),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cat) 62%, #fff) 0, var(--cat) 46%, color-mix(in srgb, var(--cat) 55%, #000) 100%);
  border: var(--edge) solid #fdfbf6;
  box-shadow:
    inset 0 0 0 calc(var(--np-cw) * .01) rgba(255, 255, 255, .6),
    0 1px 2px rgba(0, 0, 0, .2), 0 calc(var(--np-cw) * .025) calc(var(--np-cw) * .06) rgba(10, 20, 35, .28);
}
.np-q {
  display: grid; place-items: center; width: calc(var(--np-cw) * .3); aspect-ratio: 1; border-radius: 50%;
  font: 700 calc(var(--np-cw) * .2)/1 var(--font-display); color: #fff;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 calc(var(--np-cw) * .01) rgba(255, 255, 255, .65);
  text-shadow: 0 calc(var(--np-cw) * .006) 0 rgba(0, 0, 0, .25);
}
.np-front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #fffefb 0%, #f5f0e6 100%); color: #18212d;
  box-shadow:
    inset 0 0 0 calc(var(--np-cw) * .014) #fffefb,
    inset 0 0 0 calc(var(--np-cw) * .019) color-mix(in srgb, var(--cat) 55%, transparent),
    0 1px 2px rgba(0, 0, 0, .2), 0 calc(var(--np-cw) * .03) calc(var(--np-cw) * .08) rgba(10, 20, 35, .3);
}
.np-name {
  --n: 6;
  max-width: 88cqw; padding: 0 2cqw; text-align: center; white-space: nowrap;
  font: 650 min(40cqh, calc(122cqw / var(--n)))/1.04 var(--font-display); letter-spacing: -.01em;
  transition: opacity .3s;
}
.np-name.is-wrap { white-space: normal; font-size: min(28cqh, calc(122cqw / var(--n))); }
.np-corner {
  position: absolute; top: 7cqh; left: 5cqw;
  font: 700 12cqh/1 var(--font-display); color: color-mix(in srgb, var(--cat) 85%, #000);
}
.np-corner.is-b { top: auto; left: auto; bottom: 7cqh; right: 5cqw; transform: rotate(180deg); }
.np-stamp {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; display: none;
  padding: .15em .5em; border: .9cqh solid currentColor; border-radius: 3cqh;
  font: 700 10cqh/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: #c92a2a; background: rgba(255, 254, 251, .88);
}
.np-front.is-back .np-stamp { display: block; animation: t-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.np-front.is-back .np-name { opacity: .3; }

/* ---- slot reel ---- */
.np-reel {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(94cqw, 150cqh); height: min(90cqh, 58cqw);
  padding: clamp(6px, 2.4cqmin, 24px) clamp(14px, 4.6cqmin, 46px);
  border-radius: clamp(14px, 5cqmin, 46px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 70%, #fff), var(--cat) 40%, color-mix(in srgb, var(--cat) 62%, #000));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 14px 34px rgba(10, 20, 35, .28);
}
/* Pointers at the pay line. */
.np-reel::before, .np-reel::after {
  content: ""; position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  border: clamp(7px, 2.4cqmin, 24px) solid transparent;
}
.np-reel::before { left: clamp(1px, .5cqmin, 6px); border-left-color: #fff; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .3)); }
.np-reel::after { right: clamp(1px, .5cqmin, 6px); border-right-color: #fff; filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, .3)); }
.np-reel-win {
  position: relative; width: 100%; height: 100%; overflow: hidden; container-type: size;
  border-radius: clamp(8px, 3cqmin, 30px);
  background: linear-gradient(180deg, #e4e7ec, #fff 30%, #fff 70%, #e4e7ec);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.np-reel-win::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(20, 28, 40, .42), rgba(20, 28, 40, .06) 30%, transparent 40%, transparent 60%, rgba(20, 28, 40, .06) 70%, rgba(20, 28, 40, .42));
}
.np-strip { will-change: transform; }
.np-item {
  --n: 6;
  height: 33.333cqh; display: flex; align-items: center; justify-content: center; padding: 0 4cqw;
  white-space: nowrap; overflow: hidden; color: #18212d;
  font: 650 min(21cqh, calc(118cqw / var(--n)))/1 var(--font-display); letter-spacing: -.01em;
}
.np-item.is-q { color: #a3adba; }
.np-item.is-win { color: color-mix(in srgb, var(--cat) 78%, #000); }
.np-item.is-back { opacity: .35; text-decoration: line-through; text-decoration-thickness: .06em; }
.np-band {
  position: absolute; left: 0; right: 0; top: 33.333%; height: 33.334%; z-index: 1; pointer-events: none;
  border-block: clamp(2px, .7cqh, 6px) solid color-mix(in srgb, var(--cat) 75%, transparent);
  background: color-mix(in srgb, var(--cat) 9%, transparent);
  transition: box-shadow .3s, background .3s;
}
.np-reel.is-won .np-band {
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  box-shadow: 0 0 2.4cqh color-mix(in srgb, var(--cat) 55%, transparent), inset 0 0 2cqh color-mix(in srgb, var(--cat) 30%, transparent);
}

/* ---- which reveal, and the empty class ---- */
.np[data-style="card"] .np-reel, .np[data-style="reel"] .np-cards { display: none; }
.np-empty { display: none; }
.np.is-empty .np-cards, .np.is-empty .np-reel { display: none; }
.np.is-empty .np-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqmin;
  text-align: center; color: color-mix(in srgb, var(--stage-ink) 65%, transparent); font-size: clamp(14px, 4cqmin, 34px);
}
.np-empty p { margin: 0; }

/* ---- picked names ---- */
.np-hist {
  flex: none; display: flex; align-items: center; gap: .45em; max-width: 96%; overflow: hidden; padding: .3em 1em .1em;
  font-size: clamp(12px, 2.6cqmin, 26px);
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.np-hist-label { flex: none; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; font-size: .8em; color: color-mix(in srgb, var(--stage-ink) 50%, transparent); }
.np-hist-chip {
  flex: none; padding: .2em .75em; border-radius: 999px; white-space: nowrap; font-weight: 600;
  background: color-mix(in srgb, var(--stage-ink) 7%, transparent);
}
.np-hist-chip.is-now { background: var(--cat); color: #fff; }

/* ---- settings list ---- */
.np-used { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.np-used li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 2px 4px; border-bottom: 1px solid var(--line-soft); }
.np-used li:last-child { border-bottom: 0; }
.np-used li.is-empty { color: var(--muted); padding: 4px 0; }
.np-used .btn { min-height: 30px; padding: 0 8px; }

@container (max-width: 480px) {
  .np-side { width: clamp(36px, 8.4cqmin, 84px); padding: 0; }
  .np-side span { display: none; }
}
@container (max-height: 420px) {
  .np-hint { display: none; }
}
@container (max-height: 340px) {
  .np-hist { display: none; }
}
@container (max-height: 260px) {
  .np-top { display: none; }
}