/* 제비뽑기 */
.lt-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.lt-labels .field { min-width: 0; }
.lt-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lt-presets .hint { margin-right: 2px; }
.lt-info { margin: 0; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--text-2); }
.lt-info.is-error { color: var(--danger); }

.lt-banner .lt-bname {
  display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.lt-status { margin: -6px 0 0; text-align: center; color: var(--text-2); font-weight: 700; font-size: 14.5px; min-height: 1.5em; }

/* 제비가 놓인 탁자 */
.lt-table {
  --lt-bg: var(--surface-2);
  background-color: var(--lt-bg);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-3) 24%, transparent) 1px, transparent 0);
  background-size: 14px 14px;
  border-radius: var(--radius-lg); padding: 18px 14px 20px;
}
.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 88px), 1fr)); gap: 16px 12px; }

/* 접힌 종이 제비 */
.lt-slip {
  --rot: 0deg; --c: #ff5a36;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; aspect-ratio: 4 / 3; min-height: 58px; padding: 6px 4px; border: 0; border-radius: 5px;
  cursor: pointer; color: #7a6848; font-weight: 800; line-height: 1.2; -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 44%, rgba(125,95,45,.2) 50%, rgba(255,255,255,.45) 53%, rgba(255,255,255,0) 72%),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(125,95,45,.045) 9px 10px),
    #f8f0dc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 -1px #e3d2a9, 0 7px 14px rgba(60,35,10,.18);
  transform: rotate(var(--rot));
  transition: transform .18s ease, box-shadow .18s ease;
  animation: lt-in .42s cubic-bezier(.2, 1.3, .4, 1) backwards;
  animation-delay: var(--d, 0ms);
}
.lt-slip::before {
  content: "?"; font-size: 24px; font-weight: 900; color: rgba(122, 104, 72, .32); font-family: var(--font-num);
}
/* 접힌 모서리 */
.lt-slip::after {
  content: ""; position: absolute; top: 0; right: 0; width: 15px; height: 15px;
  background: linear-gradient(225deg, var(--lt-bg, var(--surface-2)) 0 50%, #e2d0a4 50% 100%);
  border-bottom-left-radius: 3px; box-shadow: -1px 1px 2px rgba(60,35,10,.14);
}
.lt-no {
  position: absolute; left: 7px; bottom: 4px; font-size: 11px; font-weight: 800; opacity: .55; font-family: var(--font-num);
}
.lt-slip:not(:disabled):hover {
  transform: rotate(var(--rot)) translateY(-4px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 -1px #e3d2a9, 0 12px 20px rgba(60,35,10,.22);
}
.lt-slip:disabled { cursor: default; }
.lt-slip.is-picking { z-index: 2; animation: lt-wiggle .52s ease-in-out forwards; }

/* 펼친 제비 */
.lt-slip.is-open {
  transform: none; color: #5b4a2e; background: #fffdf7;
  background-image: repeating-linear-gradient(180deg, transparent 0 15px, rgba(90,140,200,.13) 15px 16px);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 6px 14px rgba(60,35,10,.14);
  animation: lt-unfold .5s cubic-bezier(.2, 1.3, .4, 1);
}
.lt-slip.is-open::before, .lt-slip.is-open::after { display: none; }
.lt-slip.is-lose { opacity: .92; }
.lt-slip.is-win {
  color: #fff;
  background: linear-gradient(160deg, #ff7452, #e8431f);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 10px 22px rgba(232,67,31,.38);
  animation: lt-unfold .5s cubic-bezier(.2, 1.3, .4, 1), lt-glow 1.1s .5s ease-in-out 2;
}
.lt-res { font-size: clamp(15px, 3.8vw, 20px); font-weight: 900; letter-spacing: -0.02em; text-align: center; max-width: 100%; word-break: keep-all; }
.lt-who { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12px; font-weight: 800; }
.lt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.lt-slip.is-win .lt-dot { box-shadow: 0 0 0 1.5px #fff; }
.lt-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* 뽑는 순서 */
.lt-queue { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lt-q {
  --c: var(--text-3);
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; max-width: 100%;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-2);
}
.lt-q-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.lt-q-name { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-q.is-current {
  background: var(--surface); color: var(--text); border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
}
.lt-q.is-done { opacity: .62; }
.lt-q-res { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); white-space: nowrap; }
.lt-q.is-win { color: var(--text); border-color: var(--primary); }
.lt-q.is-win .lt-q-res { background: var(--primary); color: #fff; }

@keyframes lt-in {
  from { opacity: 0; transform: translateY(-14px) rotate(var(--rot)) scale(.75); }
  to { opacity: 1; transform: rotate(var(--rot)); }
}
@keyframes lt-wiggle {
  0% { transform: rotate(var(--rot)) scale(1); }
  20% { transform: rotate(calc(var(--rot) - 7deg)) scale(1.12); }
  40% { transform: rotate(calc(var(--rot) + 6deg)) scale(1.15); }
  60% { transform: rotate(calc(var(--rot) - 4deg)) scale(1.15); }
  82% { transform: rotate(0deg) scaleX(1.08) scaleY(.3); }
  100% { transform: rotate(0deg) scaleX(1.1) scaleY(.06); }
}
@keyframes lt-unfold {
  0% { transform: scaleX(1.1) scaleY(.06); }
  60% { transform: scaleX(.98) scaleY(1.08); }
  100% { transform: none; }
}
@keyframes lt-glow {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 10px 22px rgba(232,67,31,.38); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 0 0 6px rgba(255,90,54,.25), 0 12px 28px rgba(232,67,31,.5); }
}
@media (max-width: 520px) {
  .lt-grid { gap: 14px 10px; }
  .lt-table { padding: 14px 10px 16px; }
}