/* Panggung Lucky Draw */
.dr-stage {
  position: relative; min-height: 460px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; border-radius: .75rem; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--ip-primary) 0%, var(--ip-primary-pressed) 55%, var(--ip-navy) 100%);
}
.dr-stage-tools { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .375rem; }
.dr-tool { width: 2.25rem; height: 2.25rem; border: 0; border-radius: .5rem; color: #fff; background: rgba(255, 255, 255, .14); }
.dr-tool:hover { background: rgba(255, 255, 255, .26); }
.dr-event h1 { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.5rem); margin-bottom: .125rem; }
.dr-event p { color: rgba(255, 255, 255, .8); margin-bottom: 0; }
.dr-prize { min-height: 1.75rem; margin-top: .75rem; font-family: "Outfit", sans-serif; font-weight: 600; font-size: clamp(1.125rem, 2.2vw, 1.5rem); color: var(--ip-yellow); }

.dr-reel { width: 100%; max-width: 760px; margin: 1.25rem 0; }
.dr-row { min-height: 2rem; font-size: clamp(1rem, 2vw, 1.375rem); color: rgba(255, 255, 255, .45); overflow-wrap: anywhere; }
.dr-row-main {
  padding: .75rem 1rem; border-radius: .75rem; color: #fff; background: rgba(255, 255, 255, .1);
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1.15;
}
.dr-stage.is-final .dr-row-main { color: var(--ip-navy); background: var(--ip-yellow); box-shadow: 0 0 40px rgba(255, 203, 5, .5); animation: dr-pop .5s ease; }
.dr-stage.is-final .dr-row { color: rgba(255, 255, 255, .85); }
.dr-stage.is-final .dr-row-main.is-absent { color: #fff; background: rgba(255, 255, 255, .15); box-shadow: none; text-decoration: line-through; }
.dr-note { min-height: 1.5rem; color: rgba(255, 255, 255, .8); }

.dr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; max-width: 900px; margin: 1.25rem 0; }
.dr-chip { flex: 0 1 210px; min-width: 150px; padding: .625rem .75rem; border-radius: .5rem; color: var(--ip-navy); background: var(--ip-yellow); animation: dr-pop .4s ease both; overflow-wrap: anywhere; }
.dr-chip strong { display: block; font-family: "Outfit", sans-serif; font-size: 1.0625rem; }
.dr-chip span { font-size: .75rem; }
.dr-chip.is-absent { color: #fff; background: rgba(255, 255, 255, .15); text-decoration: line-through; }
@keyframes dr-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dr-confetti { position: fixed; inset: 0; z-index: 1060; width: 100%; height: 100%; pointer-events: none; }

.dr-side { height: 100%; max-height: 640px; }
.dr-side .card-body { overflow-y: auto; }
.dr-result + .dr-result { margin-top: 1rem; }
.dr-result-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 600; color: var(--ip-navy); }
.dr-result-list { margin: .375rem 0 0; padding-left: 1.25rem; font-size: .875rem; }
.dr-result-list .is-absent { color: var(--ip-text-muted); text-decoration: line-through; }

/* Layar penuh untuk proyektor */
body.dr-full { background: var(--ip-navy); }
body.dr-full .ip-header, body.dr-full .ip-footer, body.dr-full .col-lg-4 { display: none; }
body.dr-full .dr-page { max-width: none; padding: 0 !important; }
body.dr-full .dr-page .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }
body.dr-full .col-lg-8 { flex: 0 0 100%; width: 100%; }
body.dr-full .dr-stage { height: 100vh; border-radius: 0; }
body.dr-full .dr-row-main { font-size: clamp(2.5rem, 7vw, 6rem); }

/* Kontrol */
.dr-prize-item {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; margin-bottom: .5rem;
  padding: .75rem; border: 1px solid #E0E0E0; border-radius: .5rem; background: #fff; color: var(--ip-text); text-align: left;
}
.dr-prize-item:hover:not(:disabled) { border-color: var(--ip-primary-border); }
.dr-prize-item:disabled { opacity: .55; cursor: not-allowed; }
.dr-prize-item.is-active { border-color: var(--ip-primary); background: var(--ip-primary-surface); }
.dr-reveal-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .375rem 0; border-top: 1px solid #EDEDED; }

@media (prefers-reduced-motion: reduce) {
  .dr-stage.is-final .dr-row-main, .dr-chip { animation: none; }
}

/* Latar Panggung: gambar atau video dari admin */
.dr-bg, .dr-bg-dim { position: absolute; inset: 0; pointer-events: none; }
.dr-bg img, .dr-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-bg-dim { background: var(--ip-navy); opacity: 0; transition: opacity .3s ease; }
.dr-event, .dr-prize, .dr-reel, .dr-grid, .dr-note { position: relative; z-index: 1; }
.dr-stage-tools { z-index: 2; }
.dr-stage.has-bg .dr-event, .dr-stage.has-bg .dr-note, .dr-stage.has-bg .dr-prize { text-shadow: 0 1px 8px rgba(16, 34, 69, .9); }
.dr-stage.has-bg .dr-event p, .dr-stage.has-bg .dr-note { color: #fff; }

.dr-bg-card { height: 100%; border: 2px solid #E0E0E0; border-radius: .5rem; overflow: hidden; background: #fff; }
.dr-bg-card.is-active { border-color: var(--ip-primary); }
.dr-bg-card img, .dr-bg-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ip-navy); }