/* Draw Hall draw page: the broadcast. The draw's title card hangs on the
   studio wall with its facts on cells of the results board; the ticket
   machine is a vision mixer on the desk with the results rack waiting
   for its balls; the prize ladder is the results board; and the draw
   itself plays on the set, drum, chute, rack and board.
   Builds on the plugin's own page styles. */
@import url("../../../views/detail.css");
@import url("../_balls.css");

.lot-page { background: transparent !important; }

/* ── The title card ── */
.drh-tc .lottery-hero-frame {
  position: relative; overflow: hidden;
  background: var(--drh-wall);
  border: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 50px -28px rgba(4, 12, 60, .65);
  color: #ffffff;
}
html.dark .drh-tc .lottery-hero-frame { box-shadow: inset 0 0 0 1px rgba(93, 128, 255, .3), 0 0 70px -20px rgba(61, 102, 255, .7); }
/* The floor along the foot of the card */
.drh-tc .lottery-hero-frame::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(90deg, #ff1f4b 0 64px, transparent 64px), var(--drh-floor);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .6);
}
[dir="rtl"] .drh-tc .lottery-hero-frame::after { background: linear-gradient(270deg, #ff1f4b 0 64px, transparent 64px), var(--drh-floor); }
/* The prize on a monitor with its tally on top */
.drh-tc .lh-media {
  position: relative;
  border-radius: 14px;
  background: radial-gradient(70% 70% at 50% 30%, #ffffff, #dfe6ff);
  box-shadow: 0 0 0 6px #0b1433, 0 0 0 7px rgba(255, 255, 255, .25), 0 20px 30px -16px rgba(0, 0, 0, .6);
  margin: 1.1rem;
}
.drh-tc .lh-media::before { content: ''; position: absolute; z-index: 2; top: -9px; left: 50%; width: 22px; height: 5px; margin-left: -11px; border-radius: 3px; background: #ff1f4b; box-shadow: 0 0 10px #ff1f4b; }
.drh-tc[data-state="ended"] .lh-media::before, .drh-tc[data-state="upcoming"] .lh-media::before { background: #4a2030; box-shadow: none; }
html.dark .drh-tc .lh-media { background: radial-gradient(70% 70% at 50% 30%, #e8eeff, #9fb3ff); }
.drh-tc .lh-media img { border-radius: 8px; }
.drh-tc .lh-body { position: relative; z-index: 1; padding-bottom: 1.6rem; }
.drh-tc .lh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.drh-tc .lh-chip, .drh-tc .lh-chip-soft {
  padding: .3rem .8rem .3rem .6rem; border: 0; border-radius: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #0b1433; background: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
[dir="rtl"] .drh-tc .lh-chip { padding: .3rem .6rem .3rem .8rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%); }
.drh-tc .lh-title {
  margin-top: .7rem;
  font-family: var(--font-display); font-weight: 900; font-stretch: 120%; letter-spacing: -.02em; line-height: 1.04;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #ffffff; background: none; -webkit-text-fill-color: currentColor;
  overflow-wrap: break-word;
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .drh-tc .lh-title { letter-spacing: 0; line-height: 1.2; }
.drh-tc .lh-desc { color: #e6ecff; }
/* Facts on cells of the results board */
.drh-tc .lh-facts { gap: .5rem; }
.drh-tc .lh-fact {
  position: relative;
  background: var(--drh-flap);
  border: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 18px -12px rgba(0, 0, 0, .6);
}
.drh-tc .lh-fact-label { color: #b9c6f2; letter-spacing: .1em; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .drh-tc .lh-fact-label { letter-spacing: 0; }
.drh-tc .lh-fact-value { font-family: var(--font-num); font-weight: 700; letter-spacing: -.03em; color: #ffffff; overflow-wrap: normal; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .35rem; }
.drh-tc .lh-fact-countdown { background: linear-gradient(180deg, #2a0a18 0 49%, #12030a 49% 51%, #22061a 51%); box-shadow: inset 0 0 0 1px rgba(255, 31, 75, .45), 0 0 22px -6px rgba(255, 31, 75, .6); }
.drh-tc .lh-fact-countdown .lh-fact-label { color: #ff9ab0; }
.drh-tc .lh-fact-countdown .lh-fact-value { color: #ffc21f; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.drh-tc .lh-fact-countdown.drh-final .lh-fact-value { color: #ff1f4b !important; text-shadow: 0 0 12px rgba(255, 31, 75, .8); }
.drh-tc .drh-coin { width: 1.2rem; height: 1.2rem; }
.drh-tc .lh-foot { gap: .5rem .7rem; }
.drh-tc .lh-foot .lh-progress { flex: 1 1 8rem; }
@media (max-width: 639px) { .drh-tc .lh-foot > .lh-when:first-child { flex-basis: 100%; } }
.drh-tc .lh-when { color: #e6ecff; font-family: var(--font-num); font-size: 12px; letter-spacing: -.01em; }
.drh-tc .lh-progress { height: 8px; border-radius: 0; background: rgba(4, 12, 60, .45); -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px); mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px); }
.drh-tc .lh-progress span { border-radius: 0; background: #ffc21f; box-shadow: 0 0 10px #ffc21f; }

/* ── The ticket machine: a vision mixer on the desk ── */
.lot-page .ticket-machine-shell {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.lot-page .ticket-machine-shell::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
.lot-page .ticket-machine-frame { background: transparent; }
.lot-page .status-chip {
  border: 0; border-radius: 0; background: #0b1433; color: #ffffff;
  padding: .3rem .8rem .3rem .55rem; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
[dir="rtl"] .lot-page .status-chip { clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%); padding: .3rem .55rem .3rem .8rem; }
html.dark .lot-page .status-chip { background: #eef2ff; color: #0b1433; }
.lot-page .status-chip > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; }
.drh-status-bead { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #8e9bbd; }
.drh-status-bead--live { background: #ff1f4b; box-shadow: 0 0 8px #ff1f4b; }
.drh-status-bead--upcoming { background: #ffc21f; }
.drh-status-bead--ended { background: #13b47a; }
.lot-page .ticket-machine-frame h2.font-display { font-family: var(--font-display); font-weight: 900 !important; font-stretch: 118%; letter-spacing: -.01em; }
.lot-page .meta-pill {
  border-radius: 8px; border: 1.5px solid var(--rule); background: var(--paper-2); color: var(--ink);
  font-weight: 700; box-shadow: 0 2px 0 var(--rule);
}
.lot-page button.meta-pill:hover { border-color: var(--drh-blue); }
.lot-page button.meta-pill:active { transform: translateY(2px); box-shadow: none; }
.lot-page #ticketBadge { background: #ff1f4b !important; box-shadow: 0 0 10px rgba(255, 31, 75, .7) !important; }
/* The numbers to come: the empty cups of the results rack */
.drh-tm-rack { background: linear-gradient(180deg, #18224a, #0b1433) !important; border: 0 !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 #040818; }
html.dark .drh-tm-rack { background: linear-gradient(180deg, #0b1230, #03050f) !important; box-shadow: inset 0 0 0 1px rgba(93, 128, 255, .25), 0 0 30px -10px rgba(61, 102, 255, .6); }
.drh-tm-note { background: transparent !important; border: 0 !important; }
.drh-tm-note span { color: #c9d3f2 !important; }

/* ── The desk: state panels ── */
.lot-page .state-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; }
.lot-page #desktopPurchaseSection h3 { font-family: var(--font-display); font-stretch: 115%; font-weight: 800; letter-spacing: .04em; }
.drh-state-l3 { justify-content: center; }
.drh-state-art { width: 140px; margin: 0 auto; }
.drh-state-art svg { display: block; width: 100%; height: auto; }
.lot-page .drh-l3 { display: flex; justify-content: center; }
/* Waiting for the result: the drum turning on the desk */
.drh-standby { background: radial-gradient(70% 60% at 50% 0%, rgba(31, 69, 255, .1), transparent 70%), var(--paper-2) !important; }
html.dark .drh-standby { background: radial-gradient(70% 60% at 50% 0%, rgba(61, 102, 255, .28), transparent 70%), var(--paper-2) !important; }
.drh-standby__set { display: flex; justify-content: center; }
.drh-standby__drum { width: 130px; }
.drh-standby__svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .drh-standby__svg .drh-drum__balls { animation: drh-tumble 2s linear infinite; }
  .drh-standby__svg .drh-drum__hoop--a { animation: drh-hoop 1.8s linear infinite; }
  .drh-standby__svg .drh-drum__hoop--b { animation: drh-hoop 1.8s linear infinite -.9s; }
}
.drh-standby__lamp { display: flex; justify-content: center; }
/* Drawn: the winning balls in the rack over the board's cells */
.drh-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; justify-items: center; }
.drh-result__rack { width: fit-content !important; max-width: 100%; padding: 8px 12px; border-radius: 999px; background: linear-gradient(180deg, #18224a, #0b1433); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 3px 0 #040818; }
.drh-result__board { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.drh-result__cell, .drh-flapcell {
  position: relative; display: grid; place-items: center; min-width: 2.2rem; height: 2.6rem; padding: 0 .3rem;
  border-radius: 5px; background: var(--drh-flap);
  font: 700 1.15rem/1 var(--font-num); letter-spacing: -.02em; color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.drh-result__cell::after, .drh-flapcell::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.drh-result__cell:last-child { color: #ff4d72; }
@media (prefers-reduced-motion: no-preference) {
  .drh-result__cell { animation: drh-flap-turn .55s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(.2s + var(--i) * .12s); }
}
@keyframes drh-flap-turn { 0% { transform: perspective(200px) rotateX(-90deg); } 60% { transform: perspective(200px) rotateX(12deg); } 100% { transform: none; } }

/* Winners: caption cards, the place on a ball */
.lot-page .sw-section-header, .drh-draw .sw-section-header { background: transparent; border: 0; border-radius: 0; padding: 0; }
.lot-page .sw-section-label, .drh-draw .sw-section-label { color: var(--ink); font-size: 11.5px; letter-spacing: .14em; }
.lot-page .sw-winner-card, .drh-draw .sw-winner-card {
  position: relative; overflow: hidden;
  background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important;
  box-shadow: inset 4px 0 0 var(--drh-blue), var(--shadow) !important;
  color: var(--ink);
}
[dir="rtl"] .lot-page .sw-winner-card { box-shadow: inset -4px 0 0 var(--drh-blue), var(--shadow) !important; }
.lot-page .sw-winner-card.rank-gold, .drh-draw .sw-winner-card.rank-gold { box-shadow: inset 4px 0 0 #ff1f4b, var(--shadow) !important; }
.lot-page .sw-winner-name, .drh-draw .sw-winner-name { color: var(--ink) !important; font-family: var(--font-display); font-stretch: 110%; font-weight: 800; }
.lot-page .sw-prize-pill, .drh-draw .sw-prize-pill { background: var(--drh-chip-bg) !important; color: var(--ink-2) !important; border: 0 !important; border-radius: 3px !important; }
.lot-page .sw-place { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font: 700 .85rem/1 var(--font-num); color: #0b1433; background: radial-gradient(circle, #fff 0 52%, transparent 54%), var(--drh-ball-1); }
.lot-page .rank-gold .sw-place { background: radial-gradient(circle, #fff 0 52%, transparent 54%), var(--drh-ball-3); }
.lot-page .rank-silver .sw-place { background: radial-gradient(circle, #fff 0 52%, transparent 54%), var(--drh-ball-2); }
.lot-page .sw-avatar-initials, .drh-draw .sw-avatar-initials { background: #1f45ff !important; color: #fff !important; }
.lot-page .sw-match-num b { color: var(--drh-blue-ink); font-family: var(--font-num); }
.lot-page .sw-show-more-btn, .drh-draw .sw-show-more-btn { border-radius: 10px; border: 1.5px solid var(--ink); background: var(--paper-2); color: var(--ink); font-weight: 700; box-shadow: 0 3px 0 var(--ink); }

/* ── The prize ladder: the results board ── */
.lot-page .pl-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.lot-page .pl-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
.pl-head-icon.drh-pl-bowl { width: 64px; height: auto; border: 0; background: none; }
.drh-pl-bowl__art { display: block; width: 100%; height: auto; }
.lot-page .pl-title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; letter-spacing: -.01em; }
.lot-page .pl-row { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; transition: transform .2s ease, border-color .2s ease; }
.lot-page .pl-row:hover { transform: translateX(3px); border-color: rgba(31, 69, 255, .35); }
[dir="rtl"] .lot-page .pl-row:hover { transform: translateX(-3px); }
.lot-page .pl-row-top { background: linear-gradient(90deg, rgba(255, 31, 75, .08), transparent 60%), var(--paper) !important; border-color: rgba(255, 31, 75, .3) !important; }
.pl-place.drh-pl-place {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--hi), var(--c) 62%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .2), 0 3px 8px -3px rgba(0, 0, 0, .45);
  --c: var(--drh-ball-2); --hi: var(--drh-ball-2-hi);
}
.pl-place.drh-pl-place > span { display: grid; place-items: center; width: 60%; height: 60%; border-radius: 50%; background: #fff; font: 700 .78rem/1 var(--font-num); color: #0b1433; }
.drh-pl-place--1 { --c: var(--drh-ball-3); --hi: var(--drh-ball-3-hi); }
.drh-pl-place--2 { --c: var(--drh-ball-1); --hi: var(--drh-ball-1-hi); }
.drh-pl-place--3 { --c: var(--drh-ball-4); --hi: var(--drh-ball-4-hi); }
.lot-page .pl-name { font-weight: 700; color: var(--ink); }
.lot-page .pl-match { color: var(--ink-soft); }
.drh-pl-lamps { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .3rem; }
.drh-pl-lamps i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.drh-pl-lamps i.is-lit { background: #ff1f4b; box-shadow: 0 0 5px rgba(255, 31, 75, .7); }
.lot-page .pl-value { font-family: var(--font-num); font-weight: 700; letter-spacing: -.03em; color: var(--ink); overflow-wrap: normal; white-space: nowrap; }
html.dark .lot-page .pl-value { color: var(--ink); }

/* ── How it works: the running order ── */
.drh-howto { background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.drh-howto__steps { list-style: none; margin: 0; padding: .4rem .6rem .8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; }
.drh-howto__step { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem; border-radius: 10px; }
.drh-howto__ball { --s: 34px; }
.drh-howto__title { display: block; font-weight: 800; font-size: .86rem; line-height: 1.25; color: var(--ink); }
.drh-howto__desc { display: block; margin-top: .2rem; font-size: .76rem; line-height: 1.4; color: var(--ink-soft); }

/* ── Login gate: a caption card over a dim veil ── */
.lot-page .lg-veil { background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(5px); }
.lot-page .lg-card { position: relative; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-md); }
.lot-page .lg-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
.lot-page .lg-icon.drh-onair { width: auto; height: auto; margin-bottom: .6rem; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%), #ff1f4b; }
.lot-page .lg-title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; }
.lot-page .lg-btn { border-radius: 10px; }
.lot-page .lg-btn-primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); }
.lot-page .lg-btn-ghost { background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }

/* Mobile buy bar: quick picks as mixer keys */
#mobilePurchaseNav { box-shadow: 0 -3px 0 var(--drh-blue), 0 -16px 30px -16px rgba(11, 20, 51, .45) !important; border-top: 0 !important; }
#mobilePurchaseNav .draw-button { border-radius: 8px !important; font-family: var(--font-num); box-shadow: 0 2px 0 var(--rule); }

/* Picked tickets: rows of balls in the set's colours */
.lot-page .ticket-preview-ball { border: 0 !important; box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .45), inset 0 -2px 4px rgba(0, 0, 0, .18) !important; }
.lot-page .ticket-preview-ball.from-yellow-300 { background: radial-gradient(circle at 35% 30%, var(--drh-ball-1-hi), var(--drh-ball-1) 62%) !important; }
.lot-page .ticket-preview-ball.from-blue-400 { background: radial-gradient(circle at 35% 30%, var(--drh-ball-2-hi), var(--drh-ball-2) 62%) !important; }
.lot-page .ticket-preview-ball.from-pink-400 { background: radial-gradient(circle at 35% 30%, var(--drh-ball-3-hi), var(--drh-ball-3) 62%) !important; }
.lot-page .ticket-preview-ball.from-green-400 { background: radial-gradient(circle at 35% 30%, var(--drh-ball-4-hi), var(--drh-ball-4) 62%) !important; }
.lot-page .ticket-preview-ball.from-orange-400 { background: radial-gradient(circle at 35% 30%, var(--drh-ball-5-hi), var(--drh-ball-5) 62%) !important; }
.lot-page .ticket-preview-ball.from-gray-400 { background: radial-gradient(circle at 35% 30%, var(--drh-ball-6-hi), var(--drh-ball-6) 62%) !important; }
.lot-page .ticket-preview-ball > div:last-child { font-family: var(--font-num); border: 0 !important; background-color: #fff !important; color: #0b1433 !important; }

/* ── The draw, live from the studio ── */
.drh-draw {
  --drh-draw-soft: rgba(255, 255, 255, .75);
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 22vh), rgba(255, 255, 255, .7) calc(100% - 22vh), transparent calc(100% - 22vh + 2px)),
    linear-gradient(180deg, transparent 0 calc(100% - 22vh), rgba(31, 69, 255, .3) calc(100% - 22vh), #eef2fa calc(100% - 14vh), #e2e8f5 100%),
    var(--drh-wall) !important;
  color: #ffffff;
}
html.dark .drh-draw {
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 22vh), rgba(93, 128, 255, .6) calc(100% - 22vh), transparent calc(100% - 22vh + 2px)),
    linear-gradient(180deg, transparent 0 calc(100% - 22vh), rgba(61, 102, 255, .3) calc(100% - 22vh), #0a1030 calc(100% - 14vh), #050818 100%),
    var(--drh-wall) !important;
}
.drh-draw::before { display: none; }
/* The rig: lamps that come up one after another when the show starts */
.drh-draw__rig { position: fixed; z-index: 0; left: 6%; right: 6%; top: 0; height: 14px; display: flex; justify-content: space-around; background: repeating-linear-gradient(60deg, transparent 0 8px, rgba(255, 255, 255, .35) 8px 9.5px), linear-gradient(180deg, #5b6890, #3b4672); pointer-events: none; }
.drh-draw__lamp { position: relative; width: 22px; height: 24px; margin-top: 10px; border-radius: 5px 5px 8px 8px; background: linear-gradient(180deg, #2a3561, #0b1433); }
.drh-draw__lamp::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 5px; border-radius: 50%; background: #3a4060; }
.drh-draw__beam { position: absolute; left: 50%; top: 22px; width: 220px; height: 60vh; margin-left: -110px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 85%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .3s ease; transition-delay: calc(var(--i) * 110ms); }
.drh-draw--on .drh-draw__beam { opacity: 1; }
.drh-draw--on .drh-draw__lamp::after { background: #fff6d6; box-shadow: 0 0 10px 3px rgba(255, 246, 214, .8); transition: background .1s calc(var(--i) * 110ms); }
.drh-draw .draw-overlay-content { position: relative; z-index: 1; }
.drh-draw__live { display: inline-flex; align-items: center; gap: .6rem; }
.drh-draw__live-bar { padding: .3rem 1.2rem .3rem .7rem; font: 700 12px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #0b1433; background: #ffffff; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
[dir="rtl"] .drh-draw__live-bar { padding: .3rem .7rem .3rem 1.2rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .drh-draw__live-bar { letter-spacing: 0; font-size: 13px; }
.drh-draw__title { font-family: var(--font-display); font-weight: 900; font-stretch: 120%; letter-spacing: -.02em; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.08; color: #ffffff; text-shadow: 0 4px 20px rgba(0, 0, 0, .3); }
.drh-draw__sub { font-size: .95rem; color: rgba(255, 255, 255, .82); }
/* The drum: clear glass, blue hoops turning, a steel rim */
.drh-draw__machine { width: 250px; }
.drh-draw__drum { width: 230px; height: 230px; overflow: hidden; }
.drh-draw__glass { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .5), rgba(205, 216, 255, .18) 60%, rgba(142, 166, 255, .4)); }
html.dark .drh-draw__glass { background: radial-gradient(circle at 40% 35%, rgba(200, 215, 255, .3), rgba(61, 102, 255, .12) 60%, rgba(61, 102, 255, .35)); }
#drawTumblingBalls { border-radius: 50%; overflow: hidden; }
#drumCageSVG { stroke: rgba(255, 255, 255, .7); opacity: 1 !important; }
.drh-draw__rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 5px #c3cbe0, inset 0 0 0 7px rgba(11, 20, 51, .25), 0 0 40px rgba(255, 255, 255, .25); pointer-events: none; }
html.dark .drh-draw__rim { box-shadow: inset 0 0 0 5px #93abff, inset 0 0 0 7px rgba(0, 0, 0, .3), 0 0 50px rgba(61, 102, 255, .6); }
.drh-draw__shine { position: absolute; top: 14%; left: 16%; width: 30%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .45); filter: blur(4px); transform: rotate(-30deg); pointer-events: none; }
.drh-draw__hub { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #3b4672; box-shadow: inset 0 0 0 5px #5b6890; pointer-events: none; }
.drh-draw__stand { position: relative; height: 70px; margin-top: -6px; display: flex; justify-content: center; }
.drh-draw__leg { position: absolute; top: 0; width: 8px; height: 72px; border-radius: 4px; background: #5b6890; }
.drh-draw__leg--s { left: 70px; transform: rotate(16deg); transform-origin: top; }
.drh-draw__leg--e { right: 70px; transform: rotate(-16deg); transform-origin: top; }
.drh-draw__chute { width: 30px; height: 70px; border-radius: 0 0 15px 15px; background: linear-gradient(90deg, rgba(205, 216, 255, .5), rgba(255, 255, 255, .25) 40%, rgba(205, 216, 255, .55)); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .6), inset -2px 0 0 rgba(255, 255, 255, .6); }
.drh-draw__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .drh-draw__label { letter-spacing: 0; font-size: 13px; }
/* The rack: navy rail, a cup for every number */
.drh-draw__rack { border-radius: 999px; background: linear-gradient(180deg, #18224a, #0b1433); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 3px 0 #040818, 0 14px 24px -10px rgba(0, 0, 0, .6); }
.drh-draw__rack:empty { display: none; }
.drh-cup { border-radius: 50%; background: #050817; box-shadow: inset 0 3px 7px rgba(0, 0, 0, .8), 0 0 0 1.5px rgba(142, 155, 189, .4); }
.drh-cup.is-filled { background: transparent; box-shadow: none; }
.drh-jsball { position: relative; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .2), 0 6px 14px -4px rgba(0, 0, 0, .55); }
.drh-jsball > span { display: grid; place-items: center; width: 58%; height: 58%; border-radius: 50%; background: #fff; font-family: var(--font-num); font-weight: 700; letter-spacing: -.04em; color: #0b1433; }
.drh-jsball::after { content: ''; position: absolute; left: 18%; top: 12%; width: 28%; height: 15%; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-30deg); }
/* The board, flipping to the numbers */
.drh-draw__board { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 8px; border-radius: 10px; background: #0b1433; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 24px -12px rgba(0, 0, 0, .6); }
html.dark .drh-draw__board { background: #03050f; box-shadow: inset 0 0 0 1px rgba(93, 128, 255, .3), 0 0 30px -8px rgba(61, 102, 255, .6); }
.drh-flapcell { color: rgba(255, 255, 255, .35); }
.drh-flapcell.is-set { color: #ffc21f; animation: drh-flap-turn .5s cubic-bezier(.3, .7, .4, 1); }
/* The meter */
.drh-draw__meter { height: 10px; background: repeating-linear-gradient(90deg, rgba(4, 12, 60, .45) 0 8px, transparent 8px 11px); -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 11px); mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 11px); }
#drawSuspenseBar { background: #ffc21f; box-shadow: 0 0 10px #ffc21f; }
.drh-draw__meter-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.drh-draw__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff1f4b; box-shadow: 0 0 8px #ff1f4b; }
.drh-draw__note { border-radius: 10px; background: rgba(4, 12, 60, .45); box-shadow: inset 4px 0 0 #ff1f4b; color: #ffffff; }
html.dark .drh-draw__note { background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) {
  .drh-draw__beam { transition: none; }
  #drumCageSVG { animation: none !important; }
  [id^="tmbl-"] { animation: none !important; }
}
@media (max-width: 479px) {
  .drh-draw__machine { width: 210px; }
  .drh-draw__drum { width: 190px; height: 190px; }
  .drh-draw__leg--s { left: 56px; }
  .drh-draw__leg--e { right: 56px; }
}

/* Phones: seven numbers stay on one row of the board */
@media (max-width: 479px) { .drh-result__rack { padding: 6px 8px; } .drh-result__cell { min-width: 1.9rem; height: 2.3rem; font-size: 1rem; padding: 0 .2rem; } .drh-result__board { gap: 3px; } }

/* After the draw the drum steps back (.drh-draw--done, set when the result
   shows) so the heading, the numbers and the first winners fit the screen
   together */
#drawMachineWrap { transform-origin: 50% 0; transition: transform .6s cubic-bezier(.3, .8, .3, 1), margin .6s cubic-bezier(.3, .8, .3, 1); }
.drh-draw--done #drawMachineWrap { transform: scale(.5); margin-bottom: -146px; }
.drh-draw--done .drh-draw__sub { margin-bottom: 1rem; }
.drh-draw--done .drh-draw__live { margin-bottom: .75rem; }
@media (max-width: 479px) {
  .drh-draw--done #drawMachineWrap { margin-bottom: -126px; }
}
@media (max-height: 760px) {
  .drh-draw--done #drawMachineWrap { transform: scale(.4); margin-bottom: -176px; }
}
@media (prefers-reduced-motion: reduce) { #drawMachineWrap { transition: none; } }