.w[data-wtype^="ufl-"] { container-type: inline-size; }

.ufl-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6em;
  margin-bottom: clamp(.5rem, 2cqi, .9rem);
}
.ufl-title {
  font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(.85rem, 3.2cqi, 1.35rem);
  color: var(--text-1, #111);
}
.ufl-sub {
  font-size: clamp(.62rem, 2.1cqi, .9rem); font-weight: 600;
  color: var(--text-3, #777); font-variant-numeric: tabular-nums;
}

.ufl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5em; height: 100%; min-height: 4em; text-align: center;
  color: var(--text-3, #888);
}
.ufl-empty-ic { width: clamp(1.6rem, 7cqi, 2.8rem); height: auto; opacity: .55; }
.ufl-empty-t { font-weight: 700; font-size: clamp(.75rem, 2.6cqi, 1.05rem); color: var(--text-2, #666); }
.ufl-empty-s { font-size: clamp(.65rem, 2.1cqi, .88rem); opacity: .8; }

.ufl-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(1.2rem, 4.6cqi, 2rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--surface-3, #e6e6e6); color: var(--text-2, #555);
  font-size: clamp(.55rem, 1.9cqi, .8rem); font-weight: 800; flex: none;
  margin-inline-end: .4em;
}
.ufl-av--g { background: var(--color-gold, #b8860b); color: #1a1400; }
.ufl-av--win { background: var(--color-gold, #b8860b); color: #1a1400; }

.ufl-pk {
  display: flex; flex-direction: column; gap: clamp(.5rem, 2cqi, 1rem);
  height: 100%;
  background: linear-gradient(168deg, #2B2340 0%, #171326 42%, #0C0A16 100%);
  color: #fff;
  border-radius: var(--radius-lg, 14px);
  padding: clamp(.7rem, 3cqi, 1.6rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.ufl-pk-meta {
  display: flex; align-items: center; justify-content: space-between; gap: .6em;
  font-size: clamp(.6rem, 2cqi, .85rem); font-weight: 700;
  color: rgba(255,255,255,.62); flex: none;
}
.ufl-pk-round { font-variant-numeric: tabular-nums; }
.ufl-pk-judge { display: inline-flex; align-items: center; }
.ufl-pk-judge .ufl-av { background: rgba(255,255,255,.14); color: #fff; }

.ufl-pk-text {
  flex: 1 1 auto; display: flex; align-items: center;
  font-weight: 800; line-height: 1.22; letter-spacing: -.015em;
  font-size: clamp(1rem, 6.2cqi, 2.6rem);
  overflow: hidden;
}
.ufl-pk-prose { display: block; width: 100%; }
.ufl-blank {
  display: inline-block;    min-width: 3.5em; vertical-align: baseline;
  border-bottom: .12em solid var(--color-gold, #b8860b);
  margin-inline: .12em;
}
.ufl-fill {
  display: inline;
  color: var(--color-gold, #f0c040);
  border-bottom: .1em solid rgba(255,255,255,.18);
  animation: ufl-fill-in .45s ease-out both;
}
@keyframes ufl-fill-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ufl-pk-phase {
  flex: none; font-size: clamp(.62rem, 2.1cqi, .9rem); font-weight: 600;
  color: rgba(255,255,255,.5);
}
.ufl-pk-winner {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .4em;
  font-size: clamp(.68rem, 2.3cqi, 1rem); font-weight: 800;
}
.ufl-tag, .ufl-credit {
  font-size: .78em; font-weight: 600; padding: .18em .55em;
  border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.72);
}

.ufl-backs {
  display: flex; flex-wrap: wrap; gap: clamp(.3rem, 1.6cqi, .7rem);
  align-content: flex-start;
}
.ufl-back {
  width: clamp(1.6rem, 8cqi, 3rem); aspect-ratio: 33/47;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-3, #ddd);
  border: 1px solid var(--border, rgba(0,0,0,.1));
}
.ufl-back.is-in {
  background: linear-gradient(160deg, #2B2340, #0C0A16);
  border-color: transparent;
  animation: ufl-drop .32s cubic-bezier(.2,.8,.3,1) both;
}
.ufl-back.is-wait { opacity: .38; border-style: dashed; background: transparent; }
@keyframes ufl-drop {
  from { opacity: 0; transform: translateY(-.4em) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

.ufl-slots { display: grid; gap: clamp(.3rem, 1.6cqi, .6rem); }
.ufl-slot {
  display: flex; align-items: flex-start; gap: .5em;
  padding: clamp(.4rem, 1.8cqi, .8rem);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #f5f5f5);
  border: 1px solid var(--border, rgba(0,0,0,.08));
}
.ufl-slot-no {
  flex: none; font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(.6rem, 2cqi, .85rem); color: var(--text-3, #999);
  min-width: 1.4em;
}
.ufl-slot-text {
  flex: 1 1 auto; font-weight: 600; line-height: 1.3;
  font-size: clamp(.7rem, 2.6cqi, 1.1rem); color: var(--text-1, #111);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ufl-slot-who {
  flex: none; display: inline-flex; align-items: center;
  font-size: clamp(.58rem, 1.9cqi, .8rem); font-weight: 700; color: var(--text-2, #555);
}
.ufl-slot.is-closed {
  justify-content: center; align-items: center;
  min-height: 2.2em; opacity: .5;
  background: repeating-linear-gradient(135deg, var(--surface-3, #e8e8e8) 0 6px, transparent 6px 12px);
}
.ufl-slot.is-win {
  background: color-mix(in srgb, var(--color-gold, #b8860b) 16%, var(--surface-2, #fff));
  border-color: var(--color-gold, #b8860b);
  box-shadow: 0 0 0 1px var(--color-gold, #b8860b) inset;
}

.ufl-revealing .ufl-slot.is-open { animation: ufl-flip .52s cubic-bezier(.2,.8,.3,1) both; }
.ufl-revealing .ufl-slot.is-open:nth-child(1) { animation-delay: 0s; }
.ufl-revealing .ufl-slot.is-open:nth-child(2) { animation-delay: .22s; }
.ufl-revealing .ufl-slot.is-open:nth-child(3) { animation-delay: .44s; }
.ufl-revealing .ufl-slot.is-open:nth-child(4) { animation-delay: .66s; }
.ufl-revealing .ufl-slot.is-open:nth-child(5) { animation-delay: .88s; }
.ufl-revealing .ufl-slot.is-open:nth-child(n+6) { animation-delay: 1.1s; }
@keyframes ufl-flip {
  from { opacity: 0; transform: perspective(600px) rotateY(-82deg); }
  to   { opacity: 1; transform: none; }
}

.ufl-lb { display: grid; gap: clamp(.25rem, 1.4cqi, .55rem); }
.ufl-lbrow { display: flex; align-items: center; gap: .5em; }
.ufl-lbrow.is-idle { opacity: .45; }
.ufl-pos, .ufl-medal {
  flex: none; min-width: 1.5em; text-align: center; font-weight: 800;
  font-size: clamp(.6rem, 2cqi, .85rem); font-variant-numeric: tabular-nums;
  color: var(--text-3, #999);
}
.ufl-medal { border-radius: 50%; aspect-ratio: 1; display: inline-grid; place-items: center; color: #1a1400; }
.ufl-medal.m1 { background: var(--color-gold, #d4af37); }
.ufl-medal.m2 { background: #c0c4c8; }
.ufl-medal.m3 { background: #cd7f32; color: #fff; }
.ufl-lbav { flex: none; display: inline-flex; }
.ufl-lbmain { flex: 1 1 auto; min-width: 0; }
.ufl-lbtop { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.ufl-nm {
  font-weight: 700; font-size: clamp(.68rem, 2.3cqi, .98rem); color: var(--text-1, #111);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ufl-ct {
  flex: none; font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(.7rem, 2.5cqi, 1.05rem); color: var(--text-1, #111);
}
.ufl-bar {
  margin-top: .22em; height: clamp(.2rem, .9cqi, .4rem);
  border-radius: 999px; background: var(--surface-3, #e6e6e6); overflow: hidden;
}
.ufl-bar-fill {
  display: block; height: 100%; border-radius: inherit;
  background: var(--color-gold, #b8860b);
  transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.ufl-lbrow.lead .ufl-bar-fill { box-shadow: 0 0 .5em color-mix(in srgb, var(--color-gold, #b8860b) 60%, transparent); }

[data-theme="dark"] .ufl-slot { background: var(--surface-2, #1c1c20); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ufl-slot.is-closed { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px); }
[data-theme="dark"] .ufl-back { background: var(--surface-3, #26262c); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ufl-av { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
[data-theme="dark"] .ufl-bar { background: rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) {
  .ufl-back.is-in, .ufl-fill, .ufl-revealing .ufl-slot.is-open { animation: none; }
  .ufl-bar-fill { transition: none; }
}

.ufl-pk-dealing { opacity: .72; font-size: clamp(.9rem, 4cqi, 1.6rem); }
.ufl-pk.is-over .ufl-pk-text { font-size: clamp(1rem, 5cqi, 2.1rem); color: var(--color-gold, #f0c040); }

[data-theme="dark"] .ufl-slot.is-win {
  background: color-mix(in srgb, var(--color-gold, #d4af37) 22%, var(--surface-2, #1a1a1f));
  border-color: var(--color-gold, #d4af37);
  box-shadow: 0 0 0 1px var(--color-gold, #d4af37) inset;
}
[data-theme="dark"] .ufl-back.is-in {
  background: linear-gradient(160deg, #3a3050, #14101f);
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .ufl-av--g,
[data-theme="dark"] .ufl-av--win {
  background: var(--color-gold, #d4af37);
  color: #1a1400;
}