.brand-bottom,.brand-bottom-break{display:none!important}
@media(max-width:759px){.brand-bottom-break{display:block!important;height:32px}.brand-bottom{display:block!important;width:100%;margin:0 0 24px}.brand-bottom img{display:block;width:100%;height:auto}}
 .topbar .group:last-child .btn:nth-child(3),
 .draw-actions .draw-btn:nth-child(2) {
     display: none
 }
 
 @keyframes green-blink {
     0%,
     100% {
         opacity: .65;
         box-shadow: 0 0 0 rgba(32, 189, 103, 0)
     }
     50% {
         opacity: 1;
         box-shadow: 0 0 14px rgba(32, 189, 103, .85)
     }
 }
 
 .contact-title::before {
     content: '◉';
     margin-inline-end: 9px;
     color: #20bd67;
     text-shadow: 0 0 9px rgba(32, 189, 103, .45);
     animation: green-blink 1.2s ease-in-out infinite
 }
 
 .wa-icon {
     color: #20bd67;
     background: #20bd67;
     animation: green-blink 1.2s ease-in-out infinite
 }
 
 .wa-icon svg {
     color: #fff
 }
 
 @media (prefers-reduced-motion:reduce) {
     .contact-title::before,
     .wa-icon {
         animation: none
     }
 }
 
 * {
     box-sizing: border-box
 }
 
 html,
 body {
     margin: 0;
     min-height: 100%;
     font-family: Cairo, Tahoma, Arial, sans-serif;
     background: #020a1c;
     color: #f7fbff
 }
 
 body {
     background-image: linear-gradient(180deg, rgba(3, 21, 47, .35), rgba(2, 10, 28, .9)), url('texture.png');
     background-size: cover;
     background-attachment: fixed
 }
 
 a {
     color: inherit
 }
 
 .auth-page {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 0 72px
 }
 
 .logo-wide {
     width: 100vw;
     display: block
 }
 
 .logo-wide img {
     width: 100%;
     height: auto;
     display: block
 }
 
 .login-card {
     width: min(380px, calc(100% - 24px));
     margin-top: 24px
 }
 
 .login-card form {
     display: grid;
     grid-template-columns: 112px 1fr;
     gap: 10px 12px;
     align-items: center
 }
 
 .login-card label {
     font-weight: 700;
     text-align: right;
     text-shadow: 0 2px 5px #000
 }
 
 .login-card input {
     min-height: 35px;
     border: 1px solid #12233c;
     border-radius: 2px;
     padding: 6px 10px
 }
 
 .btn {
     border: 1px solid #9cecff;
     border-radius: 6px;
     padding: 7px 18px;
     color: #fff;
     background: linear-gradient(#239eff, #0757ad);
     font: 700 14px Cairo;
     cursor: pointer
 }
 
 .login-card .btn {
     grid-column: 2;
     justify-self: start
 }
 
 .error {
     margin: 12px auto;
     color: #ffc1cc;
     font-size: 13px;
     text-align: center
 }
 
 .contact {
     width: min(1180px, calc(100% - 28px));
     margin-top: 22px
 }
 
 .contact-title {
     width: max-content;
     margin: 0 0 9px auto;
     padding: 6px 15px;
     border: 1px solid #b7f0c6;
     border-radius: 20px;
     color: #073223;
     background: #f8fff8;
     font-weight: 800
 }
 
 .wa-list {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: 8px;
 }
 
 .wa {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 8px 13px;
     background: #f8fff8;
     border: 1px solid #a6eabd;
     color: #073223;
     border-radius: 6px;
     text-decoration: none;
     font-weight: 700
 }
 
 .wa-icon {
     width: 23px;
     height: 23px;
     border-radius: 50%;
     background: #20bd67;
     display: grid;
     place-items: center;
     color: white
 }
 
 .wa-icon svg {
     width: 15px;
     height: 15px;
     fill: currentColor
 }
 
 .dash {
     min-height: 100vh
 }
 
 .topbar {
     height: 42px;
     background: linear-gradient(#373846, #20212b);
     border: 1px solid #0a0b10;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 4px 8px;
     direction: rtl
 }
 
 .topbar .group {
     display: flex;
     gap: 7px;
     align-items: center
 }
 
 .topbar .btn {
     padding: 4px 12px;
     font-size: 13px;
     background: linear-gradient(#33353e, #20212a);
     border-color: #e5a51c;
     border-radius: 10px
 }
 
 .balance {
     height: 40px;
     background: rgba(35, 36, 47, .92);
     border-inline: 2px solid #bb1a27;
     border-bottom: 1px solid #8d1d2b;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 20px;
     gap: 5px;
     font-weight: 700
 }
 
 .balance b {
     font-size: 20px;
     color: #fff
 }
 
 .telegram {
     position: absolute;
     top: 47px;
     left: 8px;
     width: 31px;
     height: 31px;
     border-radius: 50%;
     background: #2ca5e0;
     display: grid;
     place-items: center;
     font-weight: 800
 }
 
 .draw-wrap {
     width: min(1020px, calc(100% - 24px));
     margin: 10px auto 70px;
     background: rgba(24, 24, 32, .96);
     border: 1px solid #33343e
 }
 
 .section-head {
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(#3d3f4a, #20212b);
     font-weight: 700
 }
 
 .draw-row {
     display: grid;
     grid-template-columns: 110px 1fr;
     direction: ltr;
     min-height: 118px;
     border-top: 1px solid #353640
 }
 
 .draw-actions {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 7px
 }
 
 .draw-actions .draw-btn {
     width: 78px;
     border: 1px dotted #ffdb00;
     border-radius: 5px;
     padding: 7px 3px;
     background: #0d34d4;
     color: #fff;
     text-align: center;
     font-weight: 700;
     font-size: 12px;
     text-decoration: none
 }
 
 .draw-actions .draw-btn.alt {
     background: #10911b
 }
 
 .draw-copy {
     direction: rtl;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 18px 20px;
     font-size: 14px;
     line-height: 1.9
 }
 
 .ended {
     margin-top: 16px
 }
 
 .admin-wrap {
     width: min(1000px, calc(100% - 24px));
     margin: 24px auto
 }
 
 .user-table {
     width: 100%;
     border-collapse: collapse;
     background: #20212b
 }
 
 .user-table th,
 .user-table td {
     padding: 9px;
     border: 1px solid #3b3c48;
     text-align: right
 }
 
 .status-active {
     color: #69e69c
 }
 
 .status-blocked {
     color: #ffadad
 }
 
 .admin-actions {
     display: flex;
     gap: 6px;
     flex-wrap: wrap
 }
 
 .small-danger {
     background: #9a2130;
     border-color: #ff9b9b
 }
 
 .small-safe {
     background: #237a4b;
     border-color: #a4ffd0
 }
 
 @media(max-width:700px) {
     .topbar {
         height: auto;
         min-height: 44px;
         flex-wrap: wrap;
         gap: 5px
     }
     .topbar .btn {
         font-size: 11px;
         padding: 4px 8px
     }
     .balance {
         height: 38px;
         padding-inline: 10px;
         font-size: 12px
     }
     .draw-wrap {
         width: calc(100% - 12px);
         margin-top: 7px
     }
     .draw-row {
         grid-template-columns: 84px 1fr;
         min-height: 135px
     }
     .draw-actions .draw-btn {
         width: 68px;
         font-size: 11px
     }
     .draw-copy {
         font-size: 12px;
         line-height: 1.75;
         padding: 12px 8px
     }
     .login-card {
         margin-top: 18px
     }
     .login-card form {
         grid-template-columns: 96px 1fr;
         gap: 9px 8px
     }
     .login-card label {
         font-size: 13px
     }
     .contact {
         width: calc(100% - 20px)
     }
     .contact-title {
         margin-inline: auto
     }
     .wa-list {
         display: grid;
         grid-template-columns: 1fr
     }
     .wa {
         justify-content: flex-start
     }
     .admin-wrap {
         overflow: auto
     }
 }
 /* Dashboard signature treatment: navy / teal / amber, not a copy of the reference palette. */
 
 :root {
     --ink: #061126;
     --panel: #0d1b33;
     --panel-2: #122442;
     --teal: #19c3b1;
     --cyan: #65e6ff;
     --amber: #f2b84b;
     --text: #eefcff
 }
 
 .dash {
     background: radial-gradient(circle at 50% -18%, rgba(26, 195, 177, .16), transparent 36%), linear-gradient(180deg, rgba(5, 17, 38, .42), rgba(1, 7, 20, .94))
 }
 
 .topbar {
     background: linear-gradient(135deg, #0e1f3c, #10162b 55%, #173a55);
     border-color: #16375c;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .3)
 }
 
 .topbar .btn {
     background: linear-gradient(135deg, #173958, #10233d);
     border-color: var(--amber);
     box-shadow: 0 0 0 1px rgba(242, 184, 75, .1) inset;
     transition: transform .16s cubic-bezier(.23, 1, .32, 1), background .2s, box-shadow .2s
 }
 
 .topbar .btn:hover {
     background: linear-gradient(135deg, #1b5b6b, #17304d);
     box-shadow: 0 0 16px rgba(101, 230, 255, .2)
 }
 
 .topbar .btn:active,
 .draw-btn:active,
 .wa:active {
     transform: scale(.97)
 }
 
 .balance {
     background: linear-gradient(90deg, rgba(11, 26, 50, .96), rgba(17, 46, 67, .96), rgba(11, 26, 50, .96));
     border-inline-color: var(--teal);
     box-shadow: 0 3px 16px rgba(0, 0, 0, .2)
 }
 
 .balance b {
     color: var(--cyan);
     text-shadow: 0 0 12px rgba(101, 230, 255, .35)
 }
 
 .draw-wrap {
     background: linear-gradient(180deg, rgba(8, 18, 37, .97), rgba(9, 16, 32, .98));
     border-color: #1b4662;
     box-shadow: 0 15px 45px rgba(0, 0, 0, .3), 0 0 0 1px rgba(25, 195, 177, .07) inset;
     overflow: hidden
 }
 
 .section-head {
     background: linear-gradient(90deg, #10213d, #153754, #10213d);
     color: #dffcff;
     letter-spacing: .1px;
     border-bottom: 1px solid rgba(101, 230, 255, .16)
 }
 
 .draw-row {
     background: linear-gradient(90deg, rgba(11, 29, 51, .86), rgba(12, 21, 39, .98));
     border-color: rgba(101, 230, 255, .12);
     animation: row-reveal .55s cubic-bezier(.23, 1, .32, 1) both;
     transition: background .22s, transform .22s
 }
 
 .draw-row:nth-of-type(3) {
     animation-delay: .05s
 }
 
 .draw-row:nth-of-type(4) {
     animation-delay: .1s
 }
 
 .draw-row:nth-of-type(5) {
     animation-delay: .15s
 }
 
 .draw-row:nth-of-type(6) {
     animation-delay: .2s
 }
 
 .draw-row:nth-of-type(7) {
     animation-delay: .25s
 }
 
 .draw-row:hover {
     background: linear-gradient(90deg, rgba(17, 62, 76, .72), rgba(14, 29, 51, .98));
     box-shadow: inset 4px 0 0 var(--teal)
 }
 
 .draw-actions .draw-btn {
     background: linear-gradient(145deg, #106f85, #0a415e);
     border-color: var(--cyan);
     box-shadow: 0 5px 12px rgba(2, 11, 25, .32);
     transition: transform .18s cubic-bezier(.23, 1, .32, 1), filter .2s, box-shadow .2s
 }
 
 .draw-actions .draw-btn.alt {
     background: linear-gradient(145deg, #a36a19, #67400d);
     border-color: #ffd889;
     color: #fff7df
 }
 
 .draw-actions .draw-btn:hover {
     filter: brightness(1.18);
     transform: translateY(-2px);
     box-shadow: 0 8px 18px rgba(25, 195, 177, .2)
 }
 
 .draw-copy {
     color: #e4f6f7
 }
 
 .ended {
     margin-top: 22px;
     background: linear-gradient(90deg, #153246, #27334b, #153246);
     color: #ffe2a1
 }
 
 .telegram {
     background: linear-gradient(145deg, #20b9da, #1474ad);
     box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
     transition: transform .18s, box-shadow .18s
 }
 
 .telegram:hover {
     transform: translateY(-2px) rotate(-5deg);
     box-shadow: 0 8px 20px rgba(32, 185, 218, .28)
 }
 
 @keyframes row-reveal {
     from {
         opacity: 0;
         transform: translateY(12px)
     }
     to {
         opacity: 1;
         transform: translateY(0)
     }
 }
 
 @media(prefers-reduced-motion:reduce) {
     *,
     *::before,
     *::after {
         animation-duration: .01ms!important;
         animation-iteration-count: 1!important;
         scroll-behavior: auto!important;
         transition-duration: .01ms!important
     }
 }
 
 @media (min-width:760px) {
     .page {
         padding-top: 0;
     }
     .contact-area {
         width: calc(100% - 28px);
     }
     .brand {
         width: 100vw;
         max-width: none;
         height: 630px;
         margin-top: 0;
         overflow: hidden;
     }
     .brand img {
         width: 100%;
         height: 630px;
         object-fit: fill;
     }
     .login-shell {
         margin-top: 24px;
     }
     .contact-area {
         margin-top: 18px;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
         direction: rtl;
     }
     .wa-list {
         width: auto;
         justify-content: flex-start;
     }
     .wa {
         min-width: 188px;
     }
 }
 /* Responsive restoration and admin-selected draw presentation. The original login visual system remains intact. */
 
 html,
 body {
     overflow-x: hidden
 }
 
 .brand {
     display: block;
     width: 100%;
     max-width: 100%;
     margin: 0
 }
 
 .brand img {
     display: block;
     width: 100%;
     height: auto;
     max-width: 100%
 }
 
 .draw-row {
     border-inline-start: 5px solid var(--draw-color, #16a34a);
     min-width: 0
 }
 
 .draw-actions .draw-btn:first-child {
     background: var(--draw-color, #16a34a);
     border-color: rgba(255, 255, 255, .65)
 }
 
 .draw-copy-inner {
     max-width: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px
 }
 
 .draw-copy-inner strong {
     color: var(--draw-color, #65e6ff);
     font-size: 15px
 }
 
 .draw-description {
     display: block;
     max-width: 100%;
     overflow-wrap: anywhere;
     word-break: normal
 }
 
 .draw-row-vertical .draw-description {
     line-height: 1.9
 }
 
 .draw-price {
     color: #d6f6f7;
     font-size: 12px
 }
 
 .draw-date {
     color: #91b3bf;
     font-size: 10px
 }
 
 .draw-status {
     display: inline-flex;
     align-items: center;
     padding: 2px 8px;
     border-radius: 10px;
     font-size: 10px;
     font-weight: 800
 }
 
 .status-live {
     color: #a8ffd1;
     background: rgba(32, 189, 103, .18);
     border: 1px solid rgba(32, 189, 103, .42)
 }
 
 .status-not_started {
     color: #ffe0a0;
     background: rgba(234, 163, 40, .16);
     border: 1px solid rgba(234, 163, 40, .4)
 }
 
 .status-ended {
     color: #bcd0da;
     background: rgba(157, 202, 224, .13);
     border: 1px solid rgba(157, 202, 224, .24)
 }
 
 .state-live {
     color: #a8ffd1
 }
 
 .state-not-started {
     color: #ffe0a0
 }
 
 .draw-empty {
     padding: 20px 12px;
     text-align: center;
     color: #8faab6;
     font-size: 12px;
     border-top: 1px solid rgba(101, 230, 255, .1)
 }
 
 @media(max-width:759px) {
     .auth-page {
         width: 100%;
         padding-bottom: 30px
     }
     .brand {
         height: auto;
         overflow: visible
     }
     .brand img {
         height: auto;
         object-fit: contain
     }
     .login-card {
         width: calc(100% - 24px);
         margin-top: 16px
     }
     .login-card form {
         width: 100%;
         grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
         gap: 9px 8px
     }
     .login-card input {
         width: 100%;
         min-width: 0
     }
     .login-card .btn {
         max-width: 100%;
         padding-inline: 12px
     }
     .contact {
         width: calc(100% - 20px);
         margin-top: 19px
     }
     .wa-list {
         width: 100%;
         display: grid;
         grid-template-columns: 1fr;
         gap: 8px
     }
     .wa {
         width: 100%;
         min-width: 0
     }
     .draw-wrap {
         width: calc(100% - 12px);
         max-width: 100%;
         margin-bottom: 35px
     }
     .draw-row {
         grid-template-columns: minmax(76px, 24%) minmax(0, 1fr);
         min-height: 0
     }
     .draw-actions {
         min-width: 0;
         padding: 7px 4px
     }
     .draw-actions .draw-btn {
         width: 100%;
         max-width: 78px;
         padding-inline: 2px;
         font-size: 10px;
         overflow-wrap: anywhere
     }
     .draw-copy {
         min-width: 0;
         padding: 14px 8px;
         font-size: 12px;
         line-height: 1.75
     }
     .draw-copy-inner strong {
         font-size: 13px
     }
     .draw-description {
         max-width: 100%;
         white-space: normal
     }
     .draw-price {
         font-size: 10px
     }
     .draw-status {
         font-size: 9px
     }
     .telegram {
         top: 8px;
         left: 6px
     }
     .section-head {
         min-height: 31px;
         height: auto;
         padding: 5px 8px;
         font-size: 12px;
         text-align: center
     }
     .topbar {
         width: 100%;
         overflow: hidden
     }
     .topbar .group {
         min-width: 0;
         flex-wrap: wrap
     }
     .topbar .group:last-child {
         justify-content: flex-start
     }
     .topbar .group:last-child span {
         max-width: 90px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap
     }
 }
 
 @media(max-width:380px) {
     .login-card form {
         grid-template-columns: 78px minmax(0, 1fr);
         gap: 8px 6px
     }
     .login-card label {
         font-size: 12px
     }
     .draw-row {
         grid-template-columns: 70px minmax(0, 1fr)
     }
     .draw-actions .draw-btn {
         font-size: 9px
     }
     .draw-copy {
         font-size: 11px;
         padding-inline: 5px
     }
     .draw-copy-inner strong {
         font-size: 12px
     }
     .wa {
         padding-inline: 9px
     }
 }
 
 @media(min-width:760px) {
     .brand {
         width: 100vw;
         max-width: none;
         height: 630px;
         overflow: hidden
     }
     .brand img {
         width: 100%;
         height: 630px;
         object-fit: fill
     }
     .draw-copy-inner {
         padding-inline: 8px
     }
 }
 /* Booking page: same Iraqi visual language, animated and mobile-first. */
 
 .booking-body {
     min-height: 100vh;
     overflow-x: hidden;
     background: #020a1c
 }
 
 .booking-page {
     min-height: 100vh;
     background: radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--draw-color, #19c3b1) 18%, transparent), transparent 36%), linear-gradient(180deg, rgba(5, 17, 38, .35), rgba(1, 7, 20, .96))
 }
 
 .booking-topbar {
     position: sticky;
     top: 0;
     z-index: 10;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     gap: 12px;
     min-height: 48px;
     height: auto;
     padding: 6px 10px;
     background: linear-gradient(135deg, #0e1f3c, #10162b 55%, #173a55);
     border-color: #16375c;
     box-shadow: 0 5px 22px rgba(0, 0, 0, .35)
 }
 
 .booking-topbar>a {
     justify-self: start
 }
 
 .booking-topbar-title {
     display: flex;
     align-items: center;
     gap: 8px;
     min-width: 0;
     color: #dffcff
 }
 
 .booking-topbar-title span {
     color: var(--draw-color, #65e6ff);
     font-size: 10px;
     font-weight: 800
 }
 
 .booking-topbar-title strong {
     max-width: 260px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 13px
 }
 
 .booking-balance {
     justify-self: end;
     display: flex;
     align-items: center;
     gap: 5px;
     color: #b8dbe3;
     font-size: 11px
 }
 
 .booking-balance b {
     color: #9cf5e8;
     font-size: 15px
 }
 
 .booking-balance small {
     color: #7ea5b2
 }
 
 .booking-content {
     width: min(1020px, calc(100% - 24px));
     margin: 0 auto;
     padding: 16px 0 70px
 }
 
 .booking-hero,
 .panel-booking,
 .shared-note {
     border: 1px solid color-mix(in srgb, var(--draw-color, #19c3b1) 32%, #213b57);
     box-shadow: 0 15px 45px rgba(0, 0, 0, .24)
 }
 
 .booking-hero {
     position: relative;
     overflow: hidden;
     padding: 25px 28px;
     background: linear-gradient(135deg, rgba(17, 39, 65, .96), rgba(7, 19, 38, .98));
     border-radius: 14px;
     text-align: center;
     animation: booking-rise .55s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .booking-hero::after {
     content: '';
     position: absolute;
     inset: auto -15% -70%;
     height: 170px;
     background: radial-gradient(ellipse, color-mix(in srgb, var(--draw-color, #19c3b1) 18%, transparent), transparent 65%);
     pointer-events: none
 }
 
 .booking-hero-head {
     position: relative;
     z-index: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     color: #99b8c5;
     font-size: 11px
 }
 
 .booking-draw-number {
     color: #dceff2;
     font-weight: 700
 }
 
 .booking-hero h1 {
     position: relative;
     z-index: 1;
     margin: 12px 0 8px;
     color: var(--draw-color, #65e6ff);
     font-size: 25px;
     text-shadow: 0 0 18px color-mix(in srgb, var(--draw-color, #19c3b1) 25%, transparent)
 }
 
 .booking-description {
     position: relative;
     z-index: 1;
     max-width: 760px;
     margin: 0 auto;
     color: #e4f6f7;
     font-size: 13px;
     line-height: 1.9
 }
 
 .booking-hero-line {
     position: relative;
     z-index: 1;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 9px 24px;
     margin-top: 15px;
     color: #789baa;
     font-size: 10px
 }
 
 .booking-hero-line b {
     color: #c9eef1
 }
 
 .booking-info-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
     margin: 13px 0
 }
 
 .booking-info-card {
     padding: 13px 10px;
     text-align: center;
     background: linear-gradient(145deg, rgba(15, 44, 69, .96), rgba(8, 22, 41, .98));
     border: 1px solid rgba(101, 230, 255, .13);
     border-radius: 11px;
     animation: booking-rise .55s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .booking-info-card:nth-child(2) {
     animation-delay: .05s
 }
 
 .booking-info-card:nth-child(3) {
     animation-delay: .1s
 }
 
 .booking-info-card:nth-child(4) {
     animation-delay: .15s
 }
 
 .info-kicker {
     display: block;
     color: #81a6b3;
     font-size: 10px
 }
 
 .booking-info-card strong {
     display: block;
     margin: 3px 0;
     color: #eaffff;
     font-size: 20px
 }
 
 .booking-info-card small {
     color: var(--draw-color, #9de7e6);
     font-size: 9px
 }
 
 .shared-price-card {
     border-color: color-mix(in srgb, var(--draw-color, #19c3b1) 35%, rgba(101, 230, 255, .13))
 }
 
 .booking-alert {
     margin: 13px 0;
     padding: 11px 14px;
     border-radius: 9px;
     text-align: center;
     font-size: 11px
 }
 
 .panel-booking {
     overflow: hidden;
     margin-top: 14px;
     background: linear-gradient(145deg, rgba(10, 29, 50, .97), rgba(5, 16, 31, .98));
     border-radius: 13px
 }
 
 .booking-section-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 16px 18px;
     border-bottom: 1px solid rgba(157, 202, 224, .1)
 }
 
 .booking-section-title h2 {
     margin: 3px 0 0;
     color: #efffff;
     font-size: 17px
 }
 
 .booking-section-title>span:last-child {
     color: var(--draw-color, #65e6ff);
     font-size: 10px;
     font-weight: 800
 }
 
 .section-eyebrow {
     display: block;
     color: #20bd9f;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: 1.8px
 }
 
 .booking-prize-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0 18px;
     padding: 8px 18px 14px
 }
 
 .booking-prize-row {
     display: flex;
     align-items: center;
     gap: 8px;
     min-width: 0;
     padding: 9px 0;
     border-bottom: 1px solid rgba(157, 202, 224, .08);
     font-size: 11px;
     color: #bdd3da
 }
 
 .booking-prize-row span {
     flex: 1;
     min-width: 0
 }
 
 .booking-prize-row strong {
     color: #c8fff1;
     white-space: nowrap
 }
 
 .booking-prize-row strong small {
     font-size: 8px;
     color: #7ca9af
 }
 
 .booking-prize-row em {
     padding: 2px 5px;
     border-radius: 5px;
     background: rgba(101, 230, 255, .1);
     color: #a4eaf0;
     font-size: 9px;
     font-style: normal
 }
 
 .shared-note {
     display: flex;
     align-items: flex-start;
     gap: 11px;
     margin: 14px 0;
     padding: 15px 18px;
     background: linear-gradient(135deg, rgba(26, 72, 71, .72), rgba(8, 30, 46, .92));
     border-radius: 11px;
     animation: booking-rise .6s .12s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .shared-note.individual-note {
     background: linear-gradient(135deg, rgba(31, 55, 72, .8), rgba(8, 24, 43, .94))
 }
 
 .shared-note-icon {
     display: grid;
     place-items: center;
     width: 31px;
     height: 31px;
     flex: 0 0 31px;
     border-radius: 10px;
     background: color-mix(in srgb, var(--draw-color, #19c3b1) 25%, #123a45);
     color: #baffdd;
     font-size: 17px;
     font-weight: 800
 }
 
 .shared-note strong {
     display: block;
     color: #dffff4;
     font-size: 12px
 }
 
 .shared-note p {
     margin: 4px 0 0;
     color: #a7c9ca;
     font-size: 10px;
     line-height: 1.8
 }
 
 .sheet-title {
     align-items: flex-end
 }
 
 .sheet-legend {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: 8px;
     color: #89aab6;
     font-size: 9px
 }
 
 .sheet-legend>span {
     display: inline-flex;
     align-items: center;
     gap: 4px
 }
 
 .legend-dot {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%
 }
 
 .available-dot {
     background: #f5ffff;
     box-shadow: 0 0 0 3px rgba(245, 255, 255, .08)
 }
 
 .shared-dot {
     background: #f3ba4e;
     box-shadow: 0 0 0 3px rgba(243, 186, 78, .1)
 }
 
 .full-dot {
     background: #ec596b;
     box-shadow: 0 0 0 3px rgba(236, 89, 107, .1)
 }
 
 .sheet-grid {
     display: grid;
     grid-template-columns: repeat(10, minmax(0, 1fr));
     gap: 8px;
     padding: 18px
 }
 
 .sheet-card {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2px;
     min-width: 0;
     min-height: 58px;
     padding: 7px 3px;
     border: 1px solid rgba(101, 230, 255, .12);
     border-radius: 8px;
     background: linear-gradient(180deg, #132843, #0a1b31);
     color: #dffcff;
     font: 700 12px Cairo;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
     animation: sheet-pop .42s cubic-bezier(.23, 1, .32, 1) both;
     animation-delay: calc(var(--sheet-index, 0) * 8ms)
 }
 
 .sheet-card:nth-child(n) {
     --sheet-index: 0
 }
 
 .sheet-card.is-clickable {
     cursor: pointer
 }
 
 .sheet-card.is-clickable:hover,
 .sheet-card.is-selected {
     transform: translateY(-3px) scale(1.025);
     border-color: var(--draw-color, #65e6ff);
     box-shadow: 0 8px 19px color-mix(in srgb, var(--draw-color, #19c3b1) 22%, transparent)
 }
 
 .sheet-card:disabled {
     cursor: not-allowed
 }
 
 .sheet-number {
     font-size: 13px;
     line-height: 1
 }
 
 .sheet-label {
     font-size: 8px;
     line-height: 1.3;
     white-space: nowrap
 }
 
 .sheet-available {
     background: linear-gradient(180deg, #f8ffff, #dceff1);
     color: #102d3a;
     border-color: #a9f2ed
 }
 
 .sheet-available .sheet-label {
     color: #207e73
 }
 
 .sheet-full,
 .sheet-full-mine {
     background: linear-gradient(180deg, #7c2232, #4b1423);
     border-color: #e55369;
     color: #fff
 }
 
 .sheet-full .sheet-label {
     color: #ffbdc5
 }
 
 .sheet-full-mine {
     background: linear-gradient(180deg, #9c2a38, #641622);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18)
 }
 
 .sheet-shared-waiting,
 .sheet-shared-mine {
     background: linear-gradient(180deg, #765b1c, #4d3713);
     border-color: #f0c15d;
     color: #fff7d6
 }
 
 .sheet-shared-waiting .sheet-label,
 .sheet-shared-mine .sheet-label {
     color: #ffe0a0
 }
 
 .sheet-shared-complete,
 .sheet-shared-mine-complete {
     background: linear-gradient(180deg, #4b3855, #2c2435);
     border-color: #9d83a9;
     color: #d7c9dc
 }
 
 .purchase-dialog {
     width: min(100% - 24px, 540px);
     padding: 0;
     border: 0;
     border-radius: 16px;
     color: #efffff;
     background: transparent;
     box-shadow: 0 25px 85px rgba(0, 0, 0, .55)
 }
 
 .purchase-dialog::backdrop {
     background: rgba(1, 8, 22, .78);
     backdrop-filter: blur(5px)
 }
 
 .purchase-dialog-inner {
     position: relative;
     padding: 27px 22px;
     background: linear-gradient(145deg, #122c48, #071829);
     border: 1px solid color-mix(in srgb, var(--draw-color, #19c3b1) 42%, #264a62);
     border-radius: 16px
 }
 
 .dialog-close {
     position: absolute;
     top: 9px;
     left: 11px;
     width: 30px;
     height: 30px;
     border: 1px solid rgba(157, 202, 224, .2);
     border-radius: 8px;
     background: rgba(255, 255, 255, .04);
     color: #bedbe0;
     font-size: 20px;
     line-height: 1
 }
 
 .purchase-dialog h2 {
     margin: 8px 0 4px;
     font-size: 20px
 }
 
 .purchase-dialog h2 b {
     color: var(--draw-color, #65e6ff)
 }
 
 .dialog-intro {
     margin: 0 0 16px;
     color: #90b2bf;
     font-size: 11px
 }
 
 .purchase-options {
     display: grid;
     gap: 9px
 }
 
 .purchase-option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 13px;
     border: 1px solid rgba(157, 202, 224, .15);
     border-radius: 11px;
     background: rgba(4, 16, 30, .44)
 }
 
 .purchase-option>div {
     display: flex;
     flex-direction: column;
     gap: 2px;
     min-width: 0
 }
 
 .purchase-option strong {
     font-size: 13px
 }
 
 .purchase-option span {
     color: #9affdd;
     font-size: 13px;
     font-weight: 800
 }
 
 .purchase-option small {
     color: #85a6b2;
     font-size: 9px
 }
 
 .purchase-btn {
     flex: 0 0 auto;
     padding: 9px 12px;
     border: 1px solid transparent;
     border-radius: 8px;
     color: #061426;
     font: 800 11px Cairo;
     cursor: pointer;
     transition: transform .18s, filter .18s
 }
 
 .purchase-btn:hover {
     filter: brightness(1.1);
     transform: translateY(-2px)
 }
 
 .full-purchase {
     background: #f05b6b
 }
 
 .shared-purchase {
     background: #edc260
 }
 
 .dialog-waiting {
     margin-top: 11px;
     padding: 9px;
     border-radius: 8px;
     background: rgba(243, 186, 78, .1);
     color: #ffe0a0;
     font-size: 10px;
     line-height: 1.7
 }
 
 .dialog-waiting[hidden],
 .purchase-option[hidden] {
     display: none
 }
 
 .booking-body .error-flash {
     border-color: rgba(242, 120, 134, .4);
     color: #ffb4bd;
     background: rgba(242, 120, 134, .1)
 }
 
 @keyframes booking-rise {
     from {
         opacity: 0;
         transform: translateY(16px)
     }
     to {
         opacity: 1;
         transform: translateY(0)
     }
 }
 
 @keyframes sheet-pop {
     from {
         opacity: 0;
         transform: scale(.86)
     }
     to {
         opacity: 1;
         transform: scale(1)
     }
 }
 
 @media(max-width:760px) {
     .booking-topbar {
         grid-template-columns: auto minmax(0, 1fr) auto;
         gap: 6px
     }
     .booking-topbar-title {
         justify-content: center;
         flex-direction: column;
         gap: 0;
         text-align: center
     }
     .booking-topbar-title strong {
         max-width: 125px;
         font-size: 10px
     }
     .booking-topbar-title span {
         font-size: 8px
     }
     .booking-balance {
         font-size: 9px;
         gap: 2px
     }
     .booking-balance b {
         font-size: 12px
     }
     .booking-topbar .btn {
         padding: 4px 8px;
         font-size: 11px
     }
     .booking-content {
         width: calc(100% - 12px);
         padding-top: 8px
     }
     .booking-hero {
         padding: 18px 11px
     }
     .booking-hero-head {
         font-size: 9px
     }
     .booking-hero h1 {
         font-size: 19px
     }
     .booking-description {
         font-size: 11px;
         line-height: 1.8
     }
     .booking-hero-line {
         font-size: 8px;
         gap: 5px 12px
     }
     .booking-info-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 7px;
         margin: 8px 0
     }
     .booking-info-card {
         padding: 10px 6px
     }
     .booking-info-card strong {
         font-size: 16px
     }
     .info-kicker {
         font-size: 8px
     }
     .booking-section-title {
         padding: 13px 11px
     }
     .booking-section-title h2 {
         font-size: 14px
     }
     .booking-prize-grid {
         grid-template-columns: 1fr;
         padding: 5px 11px 10px
     }
     .booking-prize-row {
         font-size: 10px;
         padding: 8px 0
     }
     .shared-note {
         padding: 12px 11px
     }
     .shared-note p {
         font-size: 9px
     }
     .sheet-title {
         align-items: flex-start;
         flex-direction: column;
         gap: 8px
     }
     .sheet-legend {
         justify-content: flex-start
     }
     .sheet-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 7px;
         padding: 12px 8px
     }
     .sheet-card {
         min-height: 53px
     }
     .sheet-number {
         font-size: 12px
     }
     .sheet-label {
         font-size: 8px
     }
     .purchase-dialog-inner {
         padding: 24px 14px 16px
     }
     .purchase-option {
         align-items: stretch;
         flex-direction: column
     }
     .purchase-btn {
         width: 100%
     }
 }
 
 @media(max-width:360px) {
     .booking-topbar-title strong {
         max-width: 100px
     }
     .booking-balance span,
     .booking-balance small {
         display: none
     }
     .sheet-grid {
         gap: 5px;
         padding-inline: 5px
     }
     .sheet-card {
         min-height: 49px
     }
     .sheet-number {
         font-size: 11px
     }
 }
 /* Finished draw winners. */
 
 .ended-winning {
     margin: 16px 12px;
     padding-bottom: 10px;
     border: 1px solid #36d6b0;
     border-radius: 10px;
     background: #08283a;
     overflow: hidden
 }
 
 .ended-winning h2 {
     margin: 0;
     padding: 13px 16px;
     background: linear-gradient(90deg, #087f78, #0b4e61);
     color: #effff8;
     font-size: 23px
 }
 
 .ended-empty {
     margin: 0;
     padding: 18px;
     color: #b9d9dc;
     font-size: 18px;
     text-align: center
 }
 
 .ended-winning-list {
     display: grid;
     gap: 12px;
     padding: 12px
 }
 
 .ended-winning-card {
     padding: 10px;
     border: 2px solid #f0b248;
     border-radius: 8px;
     background: #eafff5;
     color: #10222a
 }
 
 .ended-winning-head {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 4px 12px;
     align-items: center;
     margin-bottom: 9px;
     font-size: 17px
 }
 
 .ended-winning-head strong {
     color: #087f78;
     font-size: 20px
 }
 
 .ended-winning-head span {
     color: #315c66
 }
 
 .ended-winning-head b {
     grid-row: 1 / span 2;
     grid-column: 2;
     color: #d32634;
     font-size: 19px
 }
 
 .ended-ticket-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 5px;
     direction: ltr
 }
 
 .ended-ticket-grid {
     border: 1px solid #173c4b;
     background: #f8fbf9
 }
 
 .ended-ticket-row {
     display: grid;
     grid-template-columns: repeat(9, minmax(0, 1fr))
 }
 
 .ended-ticket-row span {
     display: grid;
     place-items: center;
     min-height: 30px;
     border-right: 1px solid #173c4b;
     border-bottom: 1px solid #173c4b;
     color: #101820;
     font: 800 16px/1 Arial, sans-serif
 }
 
 .ended-winning-number {
     background: #e32232!important;
     color: #fff!important
 }
 
 .ended-empty-cell {
     background: #dcebe5;
     color: transparent!important
 }
 
 .ended-winning-card:has(.ended-ticket-row span:nth-child(5)) .ended-ticket-row {
     grid-template-columns: repeat(5, minmax(0, 1fr))
 }
 
 .ended-winning-card:has(.ended-ticket-row span:nth-child(5)) .ended-ticket-row span {
     min-height: clamp(42px, 8vw, 72px);
     font-size: clamp(20px, 3vw, 34px)
 }
 
 @media(max-width:600px) {
     .ended-winning {
         margin: 10px 7px
     }
     .ended-winning h2 {
         font-size: 20px
     }
     .ended-winning-list {
         padding: 8px
     }
     .ended-winning-head {
         font-size: 15px
     }
     .ended-winning-head strong {
         font-size: 18px
     }
     .ended-winning-head b {
         font-size: 17px
     }
     .ended-ticket-list {
         grid-template-columns: 1fr
     }
     .ended-ticket-row span {
         min-height: 28px;
         font-size: 15px
     }
     .ended-winning-card:has(.ended-ticket-row span:nth-child(5)) .ended-ticket-row span {
         min-height: clamp(38px, 12vw, 54px);
         font-size: clamp(18px, 5vw, 26px)
     }
 }
 
 .watch-ticket-cell.watch-winning-number,
 .ended-ticket-row span.ended-winning-number {
     background: #e32232 !important;
     color: #fff !important;
     border-color: #14222b !important;
     box-shadow: inset 0 0 0 2px #14222b !important;
     opacity: 1 !important;
 }
 
 .watch-winning-set-card>.watch-ticket-list {
     margin-top: 12px;
 }
 
 .watch-winning-sheet>.watch-ticket-list {
     margin-top: 12px;
 }
 
 #drawDetails~.watch-prizes {
     display: none;
 }
 
 .player-ended-view #drawDetails,
 .player-ended-view #drawDetails~.watch-prizes {
     display: none;
 }
 
 .watch-winning-sheet+.watch-winning-sheet {
     margin-top: 10px;
     padding-top: 10px;
     border-top: 2px solid #173c4b;
 }
 
 .watch-shared-win>.watch-award-row .watch-award-toast-copy span {
     color: #b51e17;
 }
 /* Player activity history. */
 
 .activity-body {
     min-height: 100vh;
     background: #020a1c;
     color: #f4ffff
 }
 
 .activity-page {
     width: min(100%, 1000px);
     margin: auto;
     padding-bottom: 45px
 }
 
 .activity-topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     padding: 12px 18px;
     background: linear-gradient(135deg, #0e1f3c, #173a55);
     border-bottom: 2px solid #19c3b1
 }
 
 .activity-topbar h1 {
     margin: 0;
     color: #eaffff;
     font-size: 25px
 }
 
 .activity-topbar>span {
     color: #9fe9df;
     font-size: 18px
 }
 
 .activity-topbar .btn {
     min-height: 45px;
     font-size: 18px
 }
 
 .activity-balance {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 16px 12px;
     padding: 18px 22px;
     border: 1px solid #36d6b0;
     border-radius: 10px;
     background: linear-gradient(90deg, #092737, #07505f);
     font-size: 22px
 }
 
 .activity-balance strong {
     color: #bfff74;
     font-size: 29px
 }
 
 .activity-section {
     margin: 14px 12px;
     background: rgba(8, 30, 50, .94);
     border: 1px solid rgba(54, 214, 176, .4);
     border-radius: 10px;
     overflow: hidden
 }
 
 .activity-section h2 {
     margin: 0;
     padding: 13px 18px;
     background: linear-gradient(90deg, #07505f, #0b3548);
     color: #e8fff9;
     font-size: 23px
 }
 
 .activity-list {
     display: grid;
     gap: 8px;
     padding: 10px
 }
 
 .activity-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     padding: 14px 16px;
     border: 1px solid rgba(142, 224, 210, .25);
     border-radius: 7px;
     background: #0d263d;
     font-size: 18px
 }
 
 .activity-card>div:first-child {
     display: grid;
     gap: 4px;
     min-width: 0
 }
 
 .activity-card strong {
     color: #f4ffb0;
     font-size: 20px
 }
 
 .activity-card span {
     color: #b8f1e6
 }
 
 .activity-card small {
     color: #a9c6d0;
     overflow-wrap: anywhere
 }
 
 .activity-amount {
     display: grid;
     justify-items: end;
     gap: 4px;
     flex: 0 0 auto
 }
 
 .activity-amount b {
     color: #8fffcf;
     font-size: 21px
 }
 
 .activity-amount small,
 .activity-card time {
     color: #a5c5cc;
     font-size: 16px
 }
 
 .activity-empty {
     padding: 18px;
     margin: 0;
     color: #b2cbd0;
     font-size: 18px;
     text-align: center
 }
 
 .booking-reserved-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     margin: 12px auto 10px;
     padding: 11px 14px;
     border: 1px solid rgba(101, 230, 255, .45);
     border-radius: 9px;
     background: linear-gradient(135deg, rgba(4, 35, 54, .95), rgba(7, 79, 89, .86));
     box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
     text-align: right
 }
 
 .booking-reserved-box>div {
     display: flex;
     align-items: center;
     gap: 10px;
     flex: 0 0 auto
 }
 
 .booking-reserved-box span {
     color: #b9e9df;
     font-size: 13px;
     font-weight: 800
 }
 
 .booking-reserved-box strong {
     display: grid;
     place-items: center;
     min-width: 38px;
     height: 38px;
     border: 2px solid #9bdc24;
     border-radius: 50%;
     background: #b9eb66;
     color: #102a2e;
     font-size: 20px
 }
 
 .booking-reserved-box p {
     margin: 0;
     color: #e9fff8;
     font-size: 13px;
     font-weight: 700;
     line-height: 1.7;
     overflow-wrap: anywhere
 }
 
 .booking-reserved-box p:first-letter {
     color: #b9eb66
 }
 
 .dashboard-reserved-box {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     flex-wrap: wrap;
     width: min(100%, 420px);
     margin: 6px auto 2px;
     padding: 6px 10px;
     border: 1px solid rgba(101, 230, 255, .5);
     border-radius: 8px;
     background: linear-gradient(135deg, rgba(4, 35, 54, .96), rgba(7, 79, 89, .9));
     color: #e9fff8;
     font-size: 13px;
     line-height: 1.5;
     text-align: center
 }
 
 .dashboard-reserved-box b {
     display: grid;
     place-items: center;
     min-width: 27px;
     height: 27px;
     border-radius: 50%;
     background: #b9eb66;
     color: #102a2e;
     font-size: 16px
 }
 
 .dashboard-reserved-box span {
     font-weight: 800;
     color: #b9e9df
 }
 
 .dashboard-reserved-box small {
     flex-basis: 100%;
     color: #e9fff8;
     font-size: 12px;
     font-weight: 700;
     overflow-wrap: anywhere
 }
 
 .dashboard-reserved-box span {
     font-family: Tahoma, Arial, sans-serif;
     font-size: 14px;
     font-weight: 900;
     color: #e9ffff;
     line-height: 1.4
 }
 
 @media(max-width:600px) {
     .activity-topbar {
         padding: 10px;
         gap: 8px
     }
     .activity-topbar h1 {
         font-size: 21px
     }
     .activity-topbar>span {
         font-size: 15px;
         max-width: 120px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap
     }
     .activity-topbar .btn {
         font-size: 16px;
         padding-inline: 10px
     }
     .activity-balance {
         margin: 10px 7px;
         padding: 14px;
         font-size: 18px
     }
     .activity-balance strong {
         font-size: 23px
     }
     .activity-section {
         margin: 10px 7px
     }
     .activity-section h2 {
         padding: 11px 13px;
         font-size: 20px
     }
     .activity-card {
         align-items: stretch;
         flex-direction: column;
         gap: 10px;
         padding: 12px;
         font-size: 16px
     }
     .activity-card strong {
         font-size: 18px
     }
     .activity-amount {
         justify-items: start;
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap
     }
     .activity-amount b {
         font-size: 19px
     }
     .activity-amount small,
     .activity-card time {
         font-size: 14px
     }
     .activity-empty {
         font-size: 16px
     }
 }
 
 .dashboard-reserved-label {
     font-family: "Times New Roman", Tahoma, serif!important;
     font-size: 10px!important;
     font-weight: 900!important;
     letter-spacing: 0!important;
     white-space: nowrap;
     text-shadow: 0 1px 0 rgba(255, 255, 255, .22)
 }
 
 .draw-actions .draw-btn:first-child {
     font-size: 16px;
     font-weight: 900;
     line-height: 1.2
 }
 
 .draw-row {
     position: relative
 }
 
 .draw-row[data-draw-status="live"] {
     border-inline-start: 0
 }
 
 .draw-row[data-draw-status="live"]::after {
     display: none
 }
 
 .live-camera-link {
     position: absolute;
     top: 50%;
     right: 2px;
     z-index: 2;
     display: grid;
     place-items: center;
     width: 30px;
     height: 25px;
     margin: 0;
     padding: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
     color: #fff;
     text-decoration: none;
     transform: translateY(-50%);
     animation: none;
     box-shadow: none
 }
 
 .camera-glyph {
     display: block;
     width: 27px;
     height: 23px;
     background: url("https://uxwing.com/wp-content/themes/uxwing/download/video-photography-multimedia/video-camera-white-icon.png") center/contain no-repeat
 }
 
 .live-camera-link:hover {
     background: transparent;
     filter: brightness(1.2)
 }
 
 @keyframes live-camera-pulse {
     0%,
     100% {
         opacity: .65;
         box-shadow: 0 0 4px rgba(255, 48, 76, .2)
     }
     50% {
         opacity: 1;
         box-shadow: 0 0 15px rgba(255, 48, 76, .72)
     }
 }
 
 @media(max-width:600px) {
     .booking-reserved-box {
         align-items: stretch;
         flex-direction: column;
         gap: 7px;
         margin-top: 9px;
         padding: 9px 11px
     }
     .booking-reserved-box>div {
         justify-content: space-between
     }
     .booking-reserved-box p {
         font-size: 12px
     }
 }
 /* Live draw watch: reference-inspired board with the site's navy/teal identity. */
 
 .live-body {
     min-height: 100vh;
     background: #020a1c;
     overflow-x: hidden
 }
 
 .live-page {
     min-height: 100vh;
     background: radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--draw-color, #19c3b1) 18%, transparent), transparent 34%), linear-gradient(180deg, rgba(5, 17, 38, .35), rgba(1, 7, 20, .97))
 }
 
 .live-topbar {
     position: sticky;
     top: 0;
     z-index: 12;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     gap: 12px;
     min-height: 48px;
     height: auto;
     padding: 6px 10px;
     background: linear-gradient(135deg, #0e1f3c, #10162b 55%, #173a55);
     border-color: #16375c;
     box-shadow: 0 5px 22px rgba(0, 0, 0, .35)
 }
 
 .live-topbar>a {
     justify-self: start
 }
 
 .live-title {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-width: 0;
     text-align: center
 }
 
 .live-title span {
     color: var(--draw-color, #65e6ff);
     font-size: 9px;
     font-weight: 800
 }
 
 .live-title strong {
     max-width: 440px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: #e6ffff;
     font-size: 13px
 }
 
 .live-identity {
     display: flex;
     align-items: center;
     gap: 5px;
     justify-self: end;
     color: #b4d7dd;
     font-size: 10px;
     white-space: nowrap
 }
 
 .live-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #20bd67;
     box-shadow: 0 0 0 4px rgba(32, 189, 103, .12), 0 0 15px rgba(32, 189, 103, .8);
     animation: live-pulse 1.3s ease-in-out infinite
 }
 
 .live-content {
     width: min(1060px, calc(100% - 24px));
     margin: 0 auto;
     padding: 16px 0 80px
 }
 
 .live-hero {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     padding: 22px 26px;
     background: linear-gradient(135deg, rgba(17, 39, 65, .97), rgba(7, 19, 38, .99));
     border: 1px solid color-mix(in srgb, var(--draw-color, #19c3b1) 34%, #213b57);
     border-radius: 14px;
     box-shadow: 0 15px 45px rgba(0, 0, 0, .28);
     animation: live-rise .55s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .live-hero-copy {
     min-width: 0
 }
 
 .live-hero-copy h1 {
     margin: 9px 0 5px;
     color: var(--draw-color, #65e6ff);
     font-size: 25px
 }
 
 .live-hero-copy p {
     margin: 0;
     color: #b5d4d8;
     font-size: 11px;
     line-height: 1.8
 }
 
 .live-hero-meta {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3px;
     min-width: 130px;
     padding: 12px 15px;
     border: 1px solid rgba(101, 230, 255, .13);
     border-radius: 11px;
     background: rgba(3, 14, 29, .54);
     text-align: center
 }
 
 .live-hero-meta span {
     color: #7ea4b1;
     font-size: 9px
 }
 
 .live-hero-meta b {
     color: #c8fff1;
     font-size: 18px
 }
 
 .live-hero-meta small {
     color: #6f98a7;
     font-size: 8px
 }
 
 .panel-live {
     margin-top: 14px;
     border: 1px solid rgba(101, 230, 255, .14);
     border-radius: 13px;
     background: linear-gradient(145deg, rgba(10, 29, 50, .97), rgba(5, 16, 31, .98));
     box-shadow: 0 15px 45px rgba(0, 0, 0, .22);
     overflow: hidden
 }
 
 .live-alert {
     margin-top: 13px;
     padding: 11px 14px;
     border-radius: 9px;
     text-align: center;
     font-size: 11px
 }
 
 .live-success {
     border: 1px solid rgba(32, 189, 103, .35);
     background: rgba(32, 189, 103, .12);
     color: #b8ffd7
 }
 
 .live-error {
     border: 1px solid rgba(242, 120, 134, .4);
     background: rgba(242, 120, 134, .1);
     color: #ffb4bd
 }
 
 .live-section-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 15px 18px;
     border-bottom: 1px solid rgba(157, 202, 224, .1)
 }
 
 .live-section-title h2 {
     margin: 3px 0 0;
     color: #efffff;
     font-size: 16px
 }
 
 .live-section-title>span:last-child {
     color: var(--draw-color, #65e6ff);
     font-size: 10px;
     font-weight: 800
 }
 
 .operator-hint {
     color: #87a6b2!important;
     font-size: 9px!important;
     font-weight: 400!important
 }
 
 .ball-scan-form {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     gap: 9px;
     padding: 15px 18px 4px
 }
 
 .ball-scan-form label {
     color: #cde9ec;
     font-size: 11px;
     font-weight: 700;
     white-space: nowrap
 }
 
 .ball-scan-form input {
     width: 100%;
     min-width: 0;
     min-height: 39px;
     padding: 8px 12px;
     border: 1px solid #2e6275;
     border-radius: 8px;
     outline: 0;
     background: #06182e;
     color: #eaffff;
     font: 700 12px Cairo;
     direction: ltr;
     text-align: left;
     transition: border-color .2s, box-shadow .2s
 }
 
 .ball-scan-form input:focus {
     border-color: var(--draw-color, #65e6ff);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw-color, #19c3b1) 18%, transparent)
 }
 
 .scan-button {
     min-height: 39px;
     padding: 8px 15px;
     border: 1px solid #a8f0e4;
     border-radius: 8px;
     background: linear-gradient(145deg, #19b8a8, #087d8b);
     color: #041825;
     font: 800 11px Cairo;
     cursor: pointer;
     transition: transform .18s, filter .18s
 }
 
 .scan-button:hover {
     filter: brightness(1.12);
     transform: translateY(-2px)
 }
 
 .scan-help {
     margin: 0;
     padding: 0 18px 15px;
     color: #7399a5;
     font-size: 9px
 }
 
 .ball-count {
     color: #90b2bf!important;
     font-weight: 400!important
 }
 
 .ball-count b {
     color: #bcffe1;
     font-size: 16px
 }
 
 .last-ball-stage {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     padding: 19px 12px 15px;
     border-bottom: 1px solid rgba(157, 202, 224, .08);
     background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--draw-color, #19c3b1) 18%, transparent), transparent 27%)
 }
 
 .last-ball-stage>span {
     color: #7fa7b2;
     font-size: 9px
 }
 
 .last-ball-stage>strong {
     display: grid;
     place-items: center;
     width: 82px;
     height: 82px;
     border: 4px solid var(--draw-color, #19c3b1);
     border-radius: 50%;
     background: radial-gradient(circle at 32% 25%, #f8ffff, #a9d4da 42%, #3b6678 100%);
     box-shadow: 0 0 0 7px color-mix(in srgb, var(--draw-color, #19c3b1) 13%, transparent), 0 0 34px color-mix(in srgb, var(--draw-color, #19c3b1) 42%, transparent);
     color: #082031;
     font-size: 30px;
     line-height: 1;
     animation: ball-bounce .55s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .last-ball-stage small {
     color: #608390;
     font-size: 8px
 }
 
 .called-balls {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 7px;
     padding: 17px 18px
 }
 
 .called-ball {
     display: grid;
     place-items: center;
     width: 32px;
     height: 32px;
     border: 1px solid rgba(101, 230, 255, .23);
     border-radius: 50%;
     background: linear-gradient(145deg, #173858, #0b2037);
     color: #d9ffff;
     font: 800 11px Cairo;
     box-shadow: 0 3px 9px rgba(0, 0, 0, .23);
     animation: ball-in .38s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .called-ball.latest-ball {
     border-color: #b9ffe5;
     background: linear-gradient(145deg, #25c999, #0d6e6c);
     color: #041b26;
     box-shadow: 0 0 0 4px rgba(37, 201, 153, .13), 0 0 18px rgba(37, 201, 153, .34)
 }
 
 .no-balls,
 .empty-bookings {
     display: block;
     padding: 24px;
     text-align: center;
     color: #799ba7;
     font-size: 11px
 }
 
 .live-prize-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0 20px;
     padding: 6px 18px 13px
 }
 
 .live-prize {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 9px 0;
     border-bottom: 1px solid rgba(157, 202, 224, .08);
     color: #b8d1d7;
     font-size: 11px
 }
 
 .live-prize span {
     flex: 1
 }
 
 .live-prize strong {
     color: #c6fff0;
     white-space: nowrap
 }
 
 .live-prize strong small {
     font-size: 8px;
     color: #77a1a9
 }
 
 .live-prize em {
     color: #9ee5ee;
     font-size: 9px;
     font-style: normal
 }
 
 .booking-watch-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
     padding: 14px
 }
 
 .watch-booking {
     min-width: 0;
     padding: 10px;
     border: 1px solid rgba(101, 230, 255, .16);
     border-radius: 11px;
     background: linear-gradient(145deg, rgba(17, 48, 70, .72), rgba(5, 18, 34, .96));
     animation: live-rise .5s cubic-bezier(.23, 1, .32, 1) both
 }
 
 .watch-full {
     border-color: rgba(239, 86, 107, .42)
 }
 
 .watch-shared,
 .watch-shared-partner {
     border-color: rgba(240, 193, 93, .38)
 }
 
 .watch-booking-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 8px;
     padding-bottom: 8px;
     border-bottom: 1px solid rgba(157, 202, 224, .1)
 }
 
 .watch-booking-head>div {
     display: flex;
     align-items: center;
     gap: 6px;
     min-width: 0
 }
 
 .watch-kicker {
     padding: 3px 6px;
     border-radius: 5px;
     background: rgba(101, 230, 255, .12);
     color: #9be9ee;
     font-size: 9px;
     font-weight: 800;
     white-space: nowrap
 }
 
 .watch-booking-head strong {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: #dffbfb;
     font-size: 10px
 }
 
 .watch-booking-label {
     color: #ffdfa0;
     font-size: 8px;
     white-space: nowrap
 }
 
 .watch-full .watch-booking-label {
     color: #ffb8c0
 }
 
 .ticket-set-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px
 }
 
 .ticket-card-live {
     min-width: 0;
     padding: 6px;
     border: 1px solid rgba(157, 202, 224, .13);
     border-radius: 7px;
     background: rgba(1, 10, 24, .58)
 }
 
 .ticket-number-label {
     margin-bottom: 5px;
     color: #7fa9b1;
     text-align: center;
     font-size: 8px
 }
 
 .ticket-grid-live {
     display: grid;
     gap: 2px
 }
 
 .ticket-row-live {
     display: grid;
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 2px
 }
 
 .ticket-cell-live {
     display: grid;
     place-items: center;
     min-width: 0;
     aspect-ratio: 1/1;
     border-radius: 3px;
     background: #e9fbfa;
     color: #0e3340;
     font: 800 8px Cairo;
     transition: background .2s, color .2s, transform .2s
 }
 
 .ticket-empty {
     background: rgba(125, 170, 179, .08);
     color: transparent
 }
 
 .ticket-called {
     background: linear-gradient(145deg, #29d99e, #078370);
     color: #04251d;
     box-shadow: 0 0 0 1px rgba(185, 255, 229, .55), 0 0 7px rgba(37, 201, 153, .42);
     transform: scale(1.06)
 }
 
 .data-warning {
     margin: 10px 14px;
     padding: 9px;
     border: 1px solid rgba(240, 193, 93, .3);
     border-radius: 8px;
     background: rgba(240, 193, 93, .08);
     color: #ffdfa0;
     font-size: 10px;
     text-align: center
 }
 
 .ticket-missing {
     padding: 18px;
     color: #829eaa;
     text-align: center;
     font-size: 10px
 }
 
 @keyframes live-rise {
     from {
         opacity: 0;
         transform: translateY(13px)
     }
     to {
         opacity: 1;
         transform: translateY(0)
     }
 }
 
 @keyframes ball-in {
     from {
         opacity: 0;
         transform: scale(.5) translateY(8px)
     }
     to {
         opacity: 1;
         transform: scale(1) translateY(0)
     }
 }
 
 @keyframes ball-bounce {
     from {
         opacity: 0;
         transform: scale(.55) rotate(-12deg)
     }
     to {
         opacity: 1;
         transform: scale(1) rotate(0)
     }
 }
 
 @keyframes live-pulse {
     0%,
     100% {
         opacity: .65;
         transform: scale(.9)
     }
     50% {
         opacity: 1;
         transform: scale(1.1)
     }
 }
 
 @media(max-width:760px) {
     .live-topbar {
         gap: 6px;
         padding-inline: 7px
     }
     .live-title {
         flex-direction: column;
         gap: 0
     }
     .live-title strong {
         max-width: 170px;
         font-size: 10px
     }
     .live-title span {
         font-size: 8px
     }
     .live-identity {
         font-size: 8px
     }
     .live-content {
         width: calc(100% - 12px);
         padding-top: 8px
     }
     .live-hero {
         align-items: stretch;
         flex-direction: column;
         gap: 12px;
         padding: 17px 12px
     }
     .live-hero-copy {
         text-align: center
     }
     .live-hero-copy h1 {
         font-size: 19px
     }
     .live-hero-copy p {
         font-size: 10px
     }
     .live-hero-meta {
         min-width: 0;
         padding: 8px;
         flex-direction: row;
         justify-content: center;
         gap: 6px
     }
     .live-hero-meta b {
         font-size: 16px
     }
     .live-hero-meta small {
         font-size: 8px
     }
     .live-section-title {
         padding: 12px 11px
     }
     .live-section-title h2 {
         font-size: 13px
     }
     .ball-scan-form {
         grid-template-columns: 1fr;
         gap: 7px;
         padding: 12px 11px 4px
     }
     .ball-scan-form label {
         font-size: 10px
     }
     .ball-scan-form input,
     .scan-button {
         min-height: 37px
     }
     .scan-button {
         width: 100%
     }
     .scan-help {
         padding: 0 11px 12px;
         font-size: 8px
     }
     .last-ball-stage>strong {
         width: 70px;
         height: 70px;
         font-size: 26px
     }
     .called-balls {
         gap: 5px;
         padding: 13px 8px
     }
     .called-ball {
         width: 28px;
         height: 28px;
         font-size: 10px
     }
     .live-prize-grid {
         grid-template-columns: 1fr;
         padding-inline: 11px
     }
     .live-prize {
         font-size: 10px
     }
     .booking-watch-list {
         grid-template-columns: 1fr;
         gap: 9px;
         padding: 8px
     }
     .watch-booking {
         padding: 8px
     }
     .ticket-set-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 5px
     }
     .ticket-card-live {
         padding: 4px
     }
     .ticket-cell-live {
         font-size: 7px
     }
     .watch-booking-head {
         margin-bottom: 6px;
         padding-bottom: 6px
     }
     .watch-booking-label {
         font-size: 7px
     }
 }
 
 @media(max-width:380px) {
     .live-title strong {
         max-width: 125px;
         font-size: 9px
     }
     .live-identity {
         font-size: 7px
     }
     .live-topbar .btn {
         padding-inline: 7px;
         font-size: 10px
     }
     .ticket-set-grid {
         grid-template-columns: 1fr
     }
     .ticket-cell-live {
         font-size: 8px
     }
 }
 /* Exact watch-screen layout for gameDamblaWatch-style live broadcasting. */
 
 .watch-body {
     min-height: 100vh;
     margin: 0;
     background: #ececec;
     color: #fff;
     overflow-x: hidden
 }
 
 .watch-page {
     width: min(100%, 520px);
     min-height: 100vh;
     margin: 0 auto;
     background: #fff;
     box-shadow: 0 0 26px rgba(25, 8, 38, .28);
     font-family: inherit
 }
 
 .watch-topbar {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     gap: 5px;
     min-height: 31px;
     padding: 2px 5px;
     background: linear-gradient(90deg, #260d3a 0%, #5a154b 52%, #261337 100%);
     border-bottom: 2px solid #efbb56;
     box-sizing: border-box
 }
 
 .watch-back {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 21px;
     padding: 1px 7px;
     border: 1px solid #f5c76e;
     border-radius: 4px;
     background: rgba(0, 0, 0, .19);
     color: #ffe39b;
     text-decoration: none;
     font-size: 9px;
     line-height: 1
 }
 
 .watch-heading {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     min-width: 0;
     color: #ffe49a;
     text-align: center;
     white-space: nowrap;
     overflow: hidden
 }
 
 .watch-heading strong {
     font-size: 10px
 }
 
 .watch-heading span {
     font-size: 9px
 }
 
 .watch-heading small {
     color: #ffd877;
     font-size: 8px
 }
 
 .watch-live-state {
     display: flex;
     align-items: center;
     gap: 3px;
     color: #ffedb0;
     font-size: 8px;
     white-space: nowrap
 }
 
 .watch-live-state i {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #33dc80;
     box-shadow: 0 0 7px #33dc80;
     animation: watch-live-pulse 1.3s ease-in-out infinite
 }
 
 .watch-stage {
     min-height: calc(100vh - 31px);
     padding: 6px 5px 35px;
     background: linear-gradient(180deg, #32103f 0%, #52133f 38%, #291038 100%);
     box-sizing: border-box
 }
 
 .watch-draw-title {
     padding: 2px 4px 4px;
     text-align: center;
     color: #ffe7a6
 }
 
 .watch-draw-title span {
     display: block;
     color: #ffcf6a;
     font-size: 9px;
     font-weight: 800
 }
 
 .watch-draw-title h1 {
     display: inline;
     margin: 0 3px;
     color: #fff3bd;
     font-size: 12px;
     font-weight: 800
 }
 
 .watch-draw-title p {
     display: inline;
     color: #ffe9b1;
     font-size: 9px;
     line-height: 1.8
 }
 
 .watch-alert {
     margin: 3px 0;
     padding: 5px 6px;
     border-radius: 4px;
     text-align: center;
     font-size: 9px
 }
 
 .watch-success {
     border: 1px solid #59dd8d;
     background: rgba(40, 199, 113, .14);
     color: #b9ffcf
 }
 
 .watch-error {
     border: 1px solid #ff6b82;
     background: rgba(220, 50, 79, .16);
     color: #ffc6ce
 }
 
 .watch-scanner {
     margin: 3px 0 5px;
     padding: 5px;
     border: 1px solid rgba(255, 211, 115, .6);
     border-radius: 5px;
     background: rgba(31, 9, 40, .64)
 }
 
 .watch-scanner-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 4px;
     color: #ffe4a0;
     font-size: 9px
 }
 
 .watch-scanner-title span {
     color: #d8aebf;
     font-size: 8px
 }
 
 .watch-scanner form {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 4px
 }
 
 .watch-scanner input {
     min-width: 0;
     height: 27px;
     padding: 3px 7px;
     border: 1px solid #dc9b4a;
     border-radius: 3px;
     background: #fffaf0;
     color: #301332;
     font: 700 10px Cairo;
     direction: ltr;
     text-align: left;
     outline: 0
 }
 
 .watch-scanner input:focus {
     border-color: #fff0a4;
     box-shadow: 0 0 0 2px rgba(255, 224, 127, .2)
 }
 
 .watch-scanner button {
     height: 27px;
     padding: 2px 10px;
     border: 1px solid #ffe295;
     border-radius: 3px;
     background: #b83d62;
     color: #fff4c8;
     font: 800 9px Cairo;
     cursor: pointer
 }
 
 .watch-section-caption {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 20px;
     margin: 4px 0;
     padding: 2px 7px;
     border-radius: 3px;
     background: linear-gradient(90deg, #21102f, #771b4f, #26112f);
     color: #ffe8a1
 }
 
 .watch-section-caption h2 {
     margin: 0;
     font-size: 11px;
     font-weight: 800
 }
 
 .watch-section-caption span {
     color: #ffd777;
     font-size: 8px
 }
 
 .watch-ball-panel,
 .watch-prizes,
 .watch-purchased {
     margin-top: 5px
 }
 
 .watch-balls {
     display: grid;
     grid-template-columns: repeat(10, minmax(0, 1fr));
     gap: 3px 4px;
     padding: 5px 5px 7px;
     border: 1px solid rgba(247, 203, 110, .52);
     border-radius: 3px;
     background: rgba(34, 10, 49, .83)
 }
 
 .watch-ball {
     display: grid;
     place-items: center;
     min-width: 0;
     width: 100%;
     aspect-ratio: 1;
     border: 1px solid #c98268;
     border-radius: 50%;
     background: radial-gradient(circle at 32% 24%, #fff9de, #f2d09e 68%, #c68a63);
     color: #3b1535;
     font: 800 9px Cairo;
     line-height: 1;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
     animation: watch-ball-in .25s ease both
 }
 
 .watch-last-ball {
     border-color: #ffed86;
     background: radial-gradient(circle at 30% 22%, #fff7a4, #ff4d50 61%, #ae163e);
     color: #fffde8;
     box-shadow: 0 0 0 2px rgba(255, 223, 117, .33), 0 0 8px rgba(255, 86, 76, .45);
     transform: scale(1.08)
 }
 
 .watch-empty {
     padding: 12px 5px;
     color: #e5b4c2;
     text-align: center;
     font-size: 9px
 }
 
 .watch-empty-large {
     padding: 25px 5px;
     border: 1px solid rgba(246, 206, 116, .33);
     border-radius: 4px
 }
 
 .watch-last-read {
     padding: 2px 6px;
     color: #f2c5c1;
     text-align: center;
     font-size: 8px
 }
 
 .watch-last-read b {
     color: #fff18b
 }
 
 .watch-prize-list {
     padding: 4px;
     border: 1px solid rgba(245, 197, 104, .58);
     border-radius: 4px;
     background: rgba(44, 11, 52, .84)
 }
 
 .watch-prize-line {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 7px;
     min-height: 19px;
     padding: 1px 5px;
     border-bottom: 1px solid rgba(246, 189, 104, .28);
     color: #ffe9b0;
     font-size: 9px
 }
 
 .watch-prize-line:last-child {
     border-bottom: 0
 }
 
 .watch-prize-line span {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap
 }
 
 .watch-prize-line b {
     min-width: 26px;
     color: #fff2a0;
     font-size: 9px;
     text-align: left
 }
 
 .watch-warning {
     margin: 4px 0;
     padding: 5px;
     border: 1px solid #dc9b4a;
     border-radius: 3px;
     color: #ffe2a2;
     text-align: center;
     font-size: 8px
 }
 
 .watch-set-list {
     display: flex;
     flex-direction: column;
     gap: 5px
 }
 
 .watch-set-card {
     padding: 4px;
     border: 1px solid #ecb057;
     border-radius: 4px;
     background: linear-gradient(180deg, rgba(64, 15, 58, .98), rgba(36, 11, 43, .98));
     box-shadow: 0 2px 4px rgba(12, 2, 22, .25);
     animation: watch-set-in .35s ease both
 }
 
 .watch-set-head {
     display: flex;
     align-items: center;
     gap: 6px;
     min-height: 22px;
     padding: 2px 4px;
     border-bottom: 1px solid rgba(250, 205, 111, .42)
 }
 
 .watch-set-number {
     display: flex;
     align-items: center;
     gap: 3px;
     min-width: 46px;
     color: #ffe9ae
 }
 
 .watch-set-number span {
     font-size: 8px
 }
 
 .watch-set-number b {
     color: #fff5bf;
     font-size: 12px
 }
 
 .watch-buyers {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: 3px
 }
 
 .watch-buyers>span {
     display: flex;
     align-items: center;
     gap: 3px;
     padding: 1px 4px;
     border-radius: 3px;
     background: rgba(255, 216, 122, .1);
     color: #ffe4a4;
     font-size: 8px
 }
 
 .watch-buyers small {
     color: #edb3bc;
     font-size: 7px
 }
 
 .buyer-full {
     border-right: 2px solid #f2616e
 }
 
 .buyer-shared,
 .buyer-shared-partner {
     border-right: 2px solid #f6c159
 }
 
 .watch-ticket-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 4px;
     padding-top: 4px
 }
 
 .watch-ticket {
     padding: 3px;
     border: 1px solid rgba(248, 204, 119, .42);
     border-radius: 3px;
     background: rgba(246, 224, 171, .97)
 }
 
 .watch-ticket-id {
     margin-bottom: 2px;
     color: #5f214a;
     font: 800 8px Cairo;
     text-align: right
 }
 
 .watch-ticket-id span {
     color: #9c3d55
 }
 
 .watch-ticket-grid {
     display: grid;
     gap: 2px
 }
 
 .watch-ticket-row {
     display: grid;
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 2px
 }
 
 .watch-ticket-cell {
     display: grid;
     place-items: center;
     min-width: 0;
     aspect-ratio: 1;
     border: 1px solid rgba(94, 45, 70, .25);
     border-radius: 2px;
     background: #fff9e8;
     color: #431b45;
     font: 800 8px Cairo;
     line-height: 1;
     transition: background .2s, color .2s, transform .2s, box-shadow .2s
 }
 
 .watch-cell-empty {
     background: rgba(133, 91, 94, .1);
     color: transparent
 }
 
 .watch-cell-called {
     border-color: #6effb7;
     background: linear-gradient(145deg, #40eeae, #078c74);
     color: #062c2c;
     box-shadow: 0 0 0 1px rgba(222, 255, 165, .58), 0 0 6px rgba(61, 236, 170, .6);
     transform: scale(1.08);
     z-index: 1
 }
 
 .watch-set-card:nth-child(2n) {
     border-color: #ca77a7
 }
 
 .watch-set-card:nth-child(3n) {
     border-color: #8fd08e
 }
 
 @keyframes watch-ball-in {
     from {
         opacity: 0;
         transform: scale(.5)
     }
     to {
         opacity: 1;
         transform: scale(1)
     }
 }
 
 @keyframes watch-set-in {
     from {
         opacity: 0;
         transform: translateY(5px)
     }
     to {
         opacity: 1;
         transform: translateY(0)
     }
 }
 
 @keyframes watch-live-pulse {
     0%,
     100% {
         opacity: .55
     }
     50% {
         opacity: 1
     }
 }
 
 @media(min-width:521px) {
     .watch-stage {
         padding-inline: 9px
     }
     .watch-topbar {
         padding-inline: 10px
     }
     .watch-ticket-list {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
     .watch-balls {
         grid-template-columns: repeat(12, minmax(0, 1fr));
         gap: 5px
     }
     .watch-ball {
         font-size: 10px
     }
     .watch-set-head {
         min-height: 26px
     }
     .watch-set-number b {
         font-size: 14px
     }
     .watch-ticket-cell {
         font-size: 9px
     }
 }
 
 @media(max-width:340px) {
     .watch-stage {
         padding-inline: 3px
     }
     .watch-topbar {
         grid-template-columns: auto minmax(0, 1fr);
         row-gap: 0
     }
     .watch-live-state {
         display: none
     }
     .watch-heading {
         justify-content: flex-start
     }
     .watch-heading strong {
         font-size: 9px
     }
     .watch-balls {
         gap: 2px 2px
     }
     .watch-ball {
         font-size: 8px
     }
     .watch-ticket-cell {
         font-size: 7px
     }
     .watch-buyers>span {
         font-size: 7px
     }
     .watch-buyers small {
         font-size: 6px
     }
 }
 /* Site identity override: two tables per row on every viewport. */
 
 .watch-body {
     background: #061725;
     color: #e4fbff
 }
 
 .watch-page {
     background: #071b2b
 }
 
 .watch-topbar {
     background: linear-gradient(90deg, #041827 0%, #07505f 52%, #041827 100%);
     border-bottom-color: #36d6b0
 }
 
 .watch-back {
     border-color: #65e5c4;
     background: rgba(4, 25, 39, .5);
     color: #a8ffe3
 }
 
 .watch-heading {
     color: #b9fff0
 }
 
 .watch-heading small {
     color: #82daca
 }
 
 .watch-live-state {
     color: #b8ffe5
 }
 
 .watch-stage {
     background: linear-gradient(180deg, #062032 0%, #073c4d 44%, #061b2c 100%)
 }
 
 .watch-draw-title {
     color: #d5fff5
 }
 
 .watch-draw-title span {
     color: #6de0c2
 }
 
 .watch-draw-title h1 {
     color: #edfffc
 }
 
 .watch-draw-title p {
     color: #a8dfdc
 }
 
 .watch-section-caption {
     background: linear-gradient(90deg, #041827, #08646b, #041827);
     color: #d9fff5
 }
 
 .watch-section-caption span {
     color: #7ff0c2
 }
 
 .watch-scanner {
     border-color: rgba(65, 226, 186, .62);
     background: rgba(3, 26, 42, .78)
 }
 
 .watch-scanner-title {
     color: #a7ffe4
 }
 
 .watch-scanner-title span {
     color: #8bbbc1
 }
 
 .watch-scanner input {
     border-color: #48cfb0;
     background: #f3fffc;
     color: #082d3b
 }
 
 .watch-scanner button {
     border-color: #81f4d0;
     background: #087f78;
     color: #e7fff8
 }
 
 .watch-balls {
     border-color: rgba(55, 214, 178, .5);
     background: rgba(3, 22, 37, .86)
 }
 
 .watch-ball {
     border-color: #2b9a9b;
     background: radial-gradient(circle at 32% 24%, #ecffff, #8bdad3 66%, #267a82);
     color: #07333f
 }
 
 .watch-last-ball {
     border-color: #b7ffcf;
     background: radial-gradient(circle at 30% 22%, #dbfff0, #16be99 61%, #07636b);
     color: #022b2d;
     box-shadow: 0 0 0 2px rgba(117, 255, 207, .33), 0 0 8px rgba(48, 225, 174, .45)
 }
 
 .watch-last-read {
     color: #8bc8c8
 }
 
 .watch-last-read b {
     color: #8fffcf
 }
 
 .watch-prize-list {
     border-color: rgba(55, 214, 178, .5);
     background: rgba(3, 27, 42, .86)
 }
 
 .watch-prize-line {
     border-bottom-color: rgba(69, 206, 177, .23);
     color: #c5eee7
 }
 
 .watch-prize-line b {
     color: #9fffe0
 }
 
 .watch-warning {
     border-color: #d6a64f;
     color: #ffe7a4
 }
 
 .watch-empty {
     color: #8ec4c3
 }
 
 .watch-set-card {
     border-color: #32b99e;
     background: linear-gradient(180deg, rgba(8, 65, 76, .98), rgba(4, 26, 42, .98));
     box-shadow: 0 2px 5px rgba(0, 8, 17, .34)
 }
 
 .watch-set-head {
     border-bottom-color: rgba(75, 224, 187, .38)
 }
 
 .watch-set-number {
     color: #bbffed
 }
 
 .watch-set-number b {
     color: #f1fffb
 }
 
 .watch-buyers>span {
     background: rgba(81, 224, 185, .1);
     color: #b9f5e6
 }
 
 .watch-buyers small {
     color: #9ac9cb
 }
 
 .buyer-full {
     border-right-color: #ff6b75
 }
 
 .buyer-shared,
 .buyer-shared-partner {
     border-right-color: #ffd36d
 }
 
 .watch-ticket-list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     align-items: start
 }
 
 .watch-ticket {
     border-color: rgba(55, 214, 178, .55);
     background: rgba(225, 255, 250, .98)
 }
 
 .watch-ticket-id {
     color: #075267
 }
 
 .watch-ticket-id span {
     color: #138d80
 }
 
 .watch-ticket-cell {
     border-color: rgba(22, 105, 111, .22);
     background: #f2fffc;
     color: #073d4b
 }
 
 .watch-cell-empty {
     background: rgba(109, 175, 169, .12);
     color: transparent
 }
 
 .watch-cell-called {
     border-color: #61ffc1;
     background: linear-gradient(145deg, #79ffd0, #0ab58f);
     color: #032f32;
     box-shadow: 0 0 0 1px rgba(225, 255, 210, .62), 0 0 6px rgba(48, 225, 174, .58)
 }
 
 .watch-set-card:nth-child(2n),
 .watch-set-card:nth-child(3n) {
     border-color: #32b99e
 }
 
 @media(min-width:521px) {
     .watch-ticket-list {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 }
 
 @media(max-width:340px) {
     .watch-ticket-list {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
     .watch-ticket-cell {
         font-size: 7px
     }
     .watch-ticket-id {
         font-size: 7px
     }
 }
 /* Card header matches the supplied reference: sheet left, card right, one line. */
 
 .watch-ticket-id {
     display: flex;
     align-items: center;
     justify-content: space-between;
     direction: ltr;
     width: 100%;
     min-height: 13px;
     margin-bottom: 2px;
     padding: 0 3px;
     color: #075267;
     font: 800 8px Cairo;
     box-sizing: border-box
 }
 
 .watch-ticket-id .watch-sheet-no {
     color: #075267;
     text-align: left
 }
 
 .watch-ticket-id .watch-card-no {
     color: #138d80;
     text-align: right
 }
 
 .watch-ticket-id span {
     display: inline-block
 }
 
 @media(max-width:340px) {
     .watch-ticket-id {
         font-size: 7px;
         min-height: 12px
     }
 }
 
 .watch-set-card {
     direction: ltr
 }
 /* Ticket card skin based on the supplied 377x242 reference image. */
 
 .watch-set-card {
     direction: ltr;
     padding: 3px;
     border: 1px solid #071b27;
     border-radius: 8px;
     background: #eef2f0;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
     animation: watch-set-in .35s ease both
 }
 
 .watch-ticket-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 2px 3px;
     padding: 0
 }
 
 .watch-ticket {
     min-width: 0;
     padding: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
     box-shadow: none
 }
 
 .watch-ticket-id {
     display: flex;
     align-items: center;
     justify-content: space-between;
     direction: ltr;
     width: 100%;
     min-height: 15px;
     margin: 0;
     padding: 0 5px;
     border: 1px solid #14222b;
     border-bottom: 0;
     border-radius: 4px 4px 0 0;
     background: #edf1ef;
     color: #0c1720;
     font: 700 11px/15px Arial, Tahoma, sans-serif;
     box-sizing: border-box
 }
 
 .watch-ticket-id .watch-sheet-no {
     color: #111b21;
     text-align: left
 }
 
 .watch-ticket-id .watch-card-no {
     color: #111b21;
     text-align: right
 }
 
 .watch-ticket-grid {
     display: grid;
     gap: 0;
     border-top: 1px solid #14222b;
     border-left: 1px solid #14222b;
     background: #f8faf8
 }
 
 .watch-ticket-row {
     display: grid;
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 0
 }
 
 .watch-ticket-cell {
     display: grid;
     place-items: center;
     min-width: 0;
     height: 21px;
     aspect-ratio: auto;
     border: 0;
     border-right: 1px solid #14222b;
     border-bottom: 1px solid #14222b;
     border-radius: 0;
     background: #f7f9f6;
     color: #10171c;
     font: 700 11px/21px Arial, Tahoma, sans-serif;
     line-height: 21px;
     transition: background .15s, color .15s
 }
 
 .watch-cell-empty {
     background: #f7f9f6;
     color: transparent
 }
 
 .watch-cell-called {
     border-color: #14222b;
     background: #e32232;
     color: #fff;
     box-shadow: none;
     transform: none;
     z-index: 1
 }
 
 .watch-set-card:nth-child(2n),
 .watch-set-card:nth-child(3n) {
     border-color: #071b27
 }
 
 @media(max-width:520px) {
     .watch-set-card {
         padding: 2px;
         border-radius: 6px
     }
     .watch-ticket-list {
         gap: 2px
     }
     .watch-ticket-id {
         min-height: 13px;
         padding-inline: 3px;
         font-size: 9px;
         line-height: 13px
     }
     .watch-ticket-cell {
         height: 16px;
         font-size: 8px;
         line-height: 16px
     }
 }
 
 @media(max-width:340px) {
     .watch-set-card {
         padding: 1px
     }
     .watch-ticket-list {
         gap: 1px
     }
     .watch-ticket-id {
         min-height: 11px;
         padding-inline: 2px;
         font-size: 7px;
         line-height: 11px
     }
     .watch-ticket-cell {
         height: 13px;
         font-size: 7px;
         line-height: 13px
     }
 }
 /* Reference-size readable ticket numbers. */
 
 .watch-ticket-cell {
     font-family: Arial, Tahoma, sans-serif;
     font-size: 12px;
     font-weight: 700;
     line-height: 22px
 }
 
 .watch-ticket-id {
     font-size: 11px;
     font-weight: 700
 }
 
 @media(max-width:520px) {
     .watch-ticket-cell {
         height: 21px;
         font-size: 11px;
         font-weight: 700;
         line-height: 21px
     }
     .watch-ticket-id {
         font-size: 10px;
         font-weight: 700
     }
 }
 
 @media(max-width:340px) {
     .watch-ticket-cell {
         height: 18px;
         font-size: 10px;
         line-height: 18px
     }
     .watch-ticket-id {
         font-size: 9px
     }
 }
 /* Extra-large readable numbers requested by the player. */
 
 .watch-ticket-cell {
     font-size: 15px;
     font-weight: 800;
     line-height: 22px
 }
 
 .watch-ticket-id {
     font-size: 14px;
     font-weight: 800;
     line-height: 17px
 }
 
 .watch-ticket-id .watch-sheet-no,
 .watch-ticket-id .watch-card-no {
     font-weight: 800
 }
 
 @media(max-width:520px) {
     .watch-ticket-cell {
         height: 23px;
         font-size: 14px;
         font-weight: 800;
         line-height: 23px
     }
     .watch-ticket-id {
         min-height: 17px;
         font-size: 13px;
         font-weight: 800;
         line-height: 17px
     }
 }
 
 @media(max-width:340px) {
     .watch-ticket-cell {
         height: 20px;
         font-size: 12px;
         line-height: 20px
     }
     .watch-ticket-id {
         min-height: 15px;
         font-size: 11px;
         line-height: 15px
     }
 }
 /* Slightly larger card identifiers with edge spacing. */
 
 .watch-ticket-id {
     padding-left: 8px;
     padding-right: 8px;
     font-size: 16px;
     font-weight: 800;
     line-height: 19px
 }
 
 .watch-ticket-id .watch-sheet-no,
 .watch-ticket-id .watch-card-no {
     font-size: 16px;
     font-weight: 800
 }
 
 @media(max-width:520px) {
     .watch-ticket-id {
         padding-left: 7px;
         padding-right: 7px;
         min-height: 19px;
         font-size: 15px;
         line-height: 19px
     }
     .watch-ticket-id .watch-sheet-no,
     .watch-ticket-id .watch-card-no {
         font-size: 15px
     }
 }
 
 @media(max-width:340px) {
     .watch-ticket-id {
         padding-left: 5px;
         padding-right: 5px;
         min-height: 17px;
         font-size: 13px;
         line-height: 17px
     }
     .watch-ticket-id .watch-sheet-no,
     .watch-ticket-id .watch-card-no {
         font-size: 13px
     }
 }
 /* Broadcast layout follows gameDamblaWatch: prize pills, black player, green divider. */
 
 .watch-prizes {
     margin-top: 5px
 }
 
 .watch-prize-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 4px 6px;
     padding: 5px;
     border: 0;
     border-radius: 0;
     background: transparent
 }
 
 .watch-prize-line {
     min-height: 27px;
     padding: 3px 10px;
     border: 2px solid #e9a63d;
     border-bottom: 2px solid #e9a63d;
     border-radius: 18px;
     background: #f3eee8;
     color: #101820;
     font-size: 10px;
     font-weight: 700;
     box-sizing: border-box
 }
 
 .watch-prize-line:last-child {
     border-bottom: 2px solid #e9a63d
 }
 
 .watch-prize-line span {
     overflow: visible;
     text-overflow: clip;
     white-space: nowrap;
     text-align: center
 }
 
 .watch-prize-line small {
     color: #10212b;
     font-size: 9px;
     font-weight: 800
 }
 
 .watch-prize-line b {
     min-width: 26px;
     color: #b51e17;
     font-size: 11px;
     text-align: center
 }
 
 .watch-stream {
     margin-top: 5px
 }
 
 .watch-stream-frame {
     position: relative;
     width: 100%;
     aspect-ratio: 16/9;
     min-height: 150px;
     overflow: hidden;
     border: 3px dashed #d30022;
     border-radius: 2px;
     background: #000;
     box-sizing: border-box
 }
 
 .watch-stream-frame::after {
     content: "";
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
     height: 5px;
     background: #9bdc24;
     border-top: 1px solid #d4ef6b;
     z-index: 2
 }
 
 .watch-stream-frame iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0;
     background: #000
 }
 
 .watch-stream-placeholder {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 6px;
     color: #fff;
     z-index: 1
 }
 
 .watch-stream-placeholder b {
     font-size: 14px
 }
 
 .watch-stream-placeholder small {
     color: #aab4b8;
     font-size: 9px
 }
 
 .watch-stream-play {
     display: grid;
     place-items: center;
     width: 44px;
     height: 44px;
     border: 2px solid #cfd6d7;
     border-radius: 50%;
     color: #cfd6d7;
     font-size: 18px;
     padding-left: 3px
 }
 
 .watch-stream>.watch-section-caption {
     display: none
 }
 
 @media(max-width:520px) {
     .watch-prize-list {
         gap: 3px 5px;
         padding: 4px
     }
     .watch-prize-line {
         min-height: 26px;
         padding-inline: 6px;
         font-size: 9px
     }
     .watch-prize-line small {
         font-size: 8px
     }
     .watch-prize-line b {
         font-size: 10px
     }
     .watch-stream-frame {
         min-height: 145px
     }
 }
 
 @media(max-width:340px) {
     .watch-prize-list {
         gap: 2px 3px;
         padding: 3px
     }
     .watch-prize-line {
         min-height: 24px;
         padding-inline: 3px;
         font-size: 8px
     }
     .watch-prize-line small {
         font-size: 7px
     }
     .watch-prize-line b {
         font-size: 9px
     }
     .watch-stream-frame {
         min-height: 125px
     }
 }
 /* Final mobile watch skin based on the supplied 396x554 reference. */
 
 .watch-page {
     position: relative;
     width: min(100%, 396px);
     overflow: visible
 }
 
 .watch-topbar {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 47px;
     padding: 5px 8px;
     background: linear-gradient(180deg, #373740 0%, #272830 100%);
     border-bottom: 2px solid #6c6d7a;
     direction: ltr;
     box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset
 }
 
 .watch-back {
     order: 1;
     min-width: 58px;
     min-height: 31px;
     padding: 3px 9px;
     border: 2px solid #f3ac39;
     border-radius: 8px;
     background: #25252b;
     color: #fff;
     font: 800 14px/25px Arial, Tahoma, sans-serif;
     box-shadow: 0 1px 0 rgba(0, 0, 0, .6);
     white-space: nowrap
 }
 
 .watch-heading {
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: 1;
     width: calc(100% - 145px);
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     color: #fff6ed;
     direction: rtl;
     white-space: nowrap;
     overflow: hidden;
     text-align: center
 }
 
 .watch-heading strong,
 .watch-heading span,
 .watch-heading small {
     font: 800 10px/14px Arial, Tahoma, sans-serif;
     color: #fff6ed
 }
 
 .watch-heading small {
     display: none
 }
 
 .watch-live-state {
     display: none
 }
 
 .watch-message-toggle {
     order: 3;
     display: grid;
     place-items: center;
     width: 31px;
     height: 31px;
     margin-left: auto;
     border: 2px solid #f3ac39;
     border-radius: 50%;
     background: #611a48;
     color: #fff5c6;
     font: 800 16px/1 Arial, Tahoma, sans-serif;
     cursor: pointer;
     box-shadow: 0 1px 0 rgba(0, 0, 0, .6)
 }
 
 .watch-message-panel {
     position: absolute;
     top: 43px;
     right: 7px;
     z-index: 50;
     width: min(250px, calc(100% - 14px));
     padding: 9px;
     border: 2px solid #eea537;
     border-radius: 7px;
     background: #2b2035;
     color: #fff;
     box-shadow: 0 5px 18px rgba(0, 0, 0, .42);
     direction: rtl
 }
 
 .watch-message-panel[hidden] {
     display: none
 }
 
 .watch-message-panel strong {
     display: block;
     margin-bottom: 5px;
     color: #ffe4a1;
     font: 800 12px/1.2 Arial, Tahoma, sans-serif
 }
 
 .watch-message-panel textarea {
     display: block;
     width: 100%;
     min-height: 56px;
     box-sizing: border-box;
     resize: vertical;
     border: 1px solid #dfa04a;
     border-radius: 4px;
     background: #fff;
     color: #291b31;
     font: 700 12px Arial, Tahoma, sans-serif;
     padding: 5px
 }
 
 .watch-message-panel button {
     margin-top: 5px;
     padding: 5px 14px;
     border: 1px solid #ffd06a;
     border-radius: 4px;
     background: #7b1c51;
     color: #fff7d4;
     font: 800 11px Arial, Tahoma, sans-serif;
     cursor: pointer
 }
 
 .watch-message-panel small {
     display: block;
     margin-top: 4px;
     color: #98efca;
     font: 700 9px Arial, Tahoma, sans-serif
 }
 
 .watch-stage {
     min-height: calc(100vh - 47px);
     padding: 6px 5px 30px;
     background: linear-gradient(180deg, #54133f 0%, #721344 37%, #3b1039 100%);
     direction: rtl
 }
 
 .watch-draw-title {
     padding: 1px 2px 4px;
     color: #fff;
     text-align: center
 }
 
 .watch-draw-title h1 {
     display: block;
     margin: 0;
     color: #fffaf0;
     font: 800 16px/23px Arial, Tahoma, sans-serif;
     white-space: nowrap
 }
 
 .watch-draw-title h1 small {
     font: 800 11px Arial, Tahoma, sans-serif
 }
 
 .watch-draw-title span {
     display: block;
     margin-top: 1px;
     color: #ffe49f;
     font: 800 12px/17px Arial, Tahoma, sans-serif
 }
 
 .watch-draw-title p {
     display: block;
     margin: 0;
     color: #ffe8b0;
     font: 700 10px/17px Arial, Tahoma, sans-serif
 }
 
 .watch-draw-name,
 .watch-draw-description {
     display: none
 }
 
 .watch-prizes {
     margin: 1px 0 5px
 }
 
 .watch-prize-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 4px 20px;
     padding: 0;
     border: 0;
     background: transparent
 }
 
 .watch-prize-line {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     min-height: 27px;
     padding: 2px 5px;
     border: 2px solid #eaa337;
     border-radius: 16px;
     background: #f4efe8;
     color: #15151b;
     font: 800 11px/18px Arial, Tahoma, sans-serif;
     box-sizing: border-box;
     white-space: nowrap
 }
 
 .watch-prize-line span {
     overflow: visible;
     color: #15151b;
     font: 800 11px/18px Arial, Tahoma, sans-serif;
     text-align: center
 }
 
 .watch-prize-line b {
     min-width: auto;
     color: #b21416;
     font: 800 12px/18px Arial, Tahoma, sans-serif
 }
 
 .watch-prize-line:nth-child(8n) {
     background: #ffed58
 }
 
 .watch-prize-line small {
     display: none
 }
 
 .watch-stream {
     margin: 5px -5px 0
 }
 
 .watch-stream>.watch-section-caption {
     display: none
 }
 
 .watch-stream-frame {
     width: 100%;
     aspect-ratio: auto;
     height: 218px;
     min-height: 0;
     border: 0;
     border-radius: 0;
     background: #000;
     box-sizing: border-box
 }
 
 .watch-stream-frame::after {
     display: none
 }
 
 .watch-stream-placeholder {
     gap: 0
 }
 
 .watch-stream-play {
     width: 28px;
     height: 28px;
     border: 3px solid #fff;
     color: #fff;
     font-size: 16px;
     background: transparent
 }
 
 .watch-ball-panel {
     margin: 0 -1px
 }
 
 .watch-ball-panel>.watch-section-caption {
     display: flex;
     justify-content: center;
     min-height: 22px;
     margin: 0;
     padding: 1px 8px;
     border-radius: 0;
     background: #9dde24;
     border: 2px solid #071a18;
     color: #061817
 }
 
 .watch-ball-panel>.watch-section-caption h2 {
     font: 800 11px/16px Arial, Tahoma, sans-serif
 }
 
 .watch-ball-panel>.watch-section-caption span {
     display: none
 }
 
 .watch-balls {
     grid-template-columns: repeat(10, minmax(0, 1fr));
     gap: 3px;
     padding: 4px 2px 5px;
     border: 0;
     border-radius: 0;
     background: #8a1b52
 }
 
 .watch-ball {
     height: auto;
     aspect-ratio: 1;
     min-width: 0;
     border: 1px solid #c78d63;
     background: radial-gradient(circle at 32% 24%, #fff8da, #f0d4a6 68%, #bf765d);
     color: #401835;
     font: 800 13px/1 Arial, Tahoma, sans-serif
 }
 
 .watch-last-ball {
     transform: scale(1.04);
     background: radial-gradient(circle at 30% 22%, #fff4a2, #f04c4f 61%, #ae123d);
     color: #fff
 }
 
 .watch-last-read {
     display: none
 }
 
 .watch-results-panel {
     margin: 0 -1px;
     background: linear-gradient(180deg, #8a1b52 0%, #681541 100%);
     min-height: 105px
 }
 
 .watch-results-title {
     height: 18px;
     padding: 1px 4px;
     border: 2px solid #0a1718;
     background: #9dde24;
     color: #071717;
     text-align: center;
     font: 800 11px/14px Arial, Tahoma, sans-serif;
     box-sizing: border-box
 }
 
 .watch-award-feed {
     padding: 5px 3px
 }
 
 .watch-award-feed[hidden] {
     display: none
 }
 
 .watch-award-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 27px;
     padding: 2px 6px;
     border-radius: 12px;
     color: #fff6de;
     font: 800 12px/20px Arial, Tahoma, sans-serif
 }
 
 .watch-purchased {
     margin-top: 5px
 }
 
 .watch-purchased>.watch-section-caption {
     min-height: 20px
 }
 
 .watch-scanner {
     margin-top: 6px
 }
 
 @media(min-width:397px) {
     .watch-page {
         box-shadow: 0 0 20px rgba(0, 0, 0, .25)
     }
 }
 
 @media(max-width:340px) {
     .watch-heading {
         width: calc(100% - 112px)
     }
     .watch-heading strong,
     .watch-heading span {
         font-size: 8px
     }
     .watch-message-toggle {
         width: 27px;
         height: 27px;
         font-size: 14px
     }
     .watch-back {
         min-width: 50px;
         min-height: 27px;
         font-size: 12px
     }
     .watch-draw-title h1 {
         font-size: 14px
     }
     .watch-prize-list {
         gap: 3px 8px
     }
     .watch-prize-line,
     .watch-prize-line span {
         font-size: 9px
     }
     .watch-prize-line b {
         font-size: 10px
     }
     .watch-stream-frame {
         height: 185px
     }
     .watch-ball {
         font-size: 11px
     }
 }
 /* Latest requested layout: full viewport width with Iraqi site identity colors. */
 
 .watch-body {
     width: 100%;
     min-width: 0;
     background: #061725;
     color: #e4fbff
 }
 
 .watch-page {
     width: 100%;
     max-width: none;
     min-height: 100vh;
     background: #071b2b;
     box-shadow: none
 }
 
 .watch-topbar {
     width: 100%;
     background: linear-gradient(180deg, #092737 0%, #061b2b 100%);
     border-bottom-color: #36d6b0
 }
 
 .watch-stage {
     width: 100%;
     background: linear-gradient(180deg, #062032 0%, #073c4d 44%, #061b2c 100%)
 }
 
 .watch-prize-line {
     border-color: #36d6b0;
     background: #e8fffa;
     color: #073d4b
 }
 
 .watch-prize-line span {
     color: #073d4b
 }
 
 .watch-prize-line b {
     color: #087f78
 }
 
 .watch-prize-line:nth-child(8n) {
     background: #c8f36a;
     border-color: #93d52c
 }
 
 .watch-stream {
     width: 100%;
     margin-inline: 0
 }
 
 .watch-stream-frame {
     width: 100%;
     background: #000
 }
 
 .watch-balls {
     background: #07505f
 }
 
 .watch-results-panel {
     background: linear-gradient(180deg, #07505f 0%, #062e42 100%)
 }
 
 .watch-results-title {
     border-color: #36d6b0;
     background: #9bdc24;
     color: #06252d
 }
 
 .watch-purchased {
     width: 100%;
     margin-inline: 0
 }
 
 .watch-message-toggle {
     border-color: #36d6b0;
     background: #087f78;
     color: #e7fff8
 }
 
 .watch-message-panel {
     border-color: #36d6b0;
     background: #062d3d
 }
 
 .watch-message-panel strong {
     color: #a8ffe3
 }
 
 .watch-message-panel textarea {
     border-color: #36d6b0
 }
 
 .watch-message-panel button {
     border-color: #81f4d0;
     background: #087f78;
     color: #e7fff8
 }
 
 @media(max-width:520px) {
     .watch-stage {
         padding-inline: 5px
     }
     .watch-prize-list {
         gap: 4px 20px
     }
     .watch-ticket-list {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 }
 
 @media(min-width:521px) {
     .watch-stage {
         padding-inline: 14px
     }
     .watch-prize-list {
         max-width: 760px;
         margin-inline: auto
     }
     .watch-stream-frame {
         height: min(48vw, 520px)
     }
     .watch-set-list {
         max-width: 1200px;
         margin-inline: auto
     }
 }
 /* Keep the live watch screen calm while it polls for new data. */
 
 .watch-ball,
 .watch-last-ball,
 .watch-set-card,
 .watch-prize-line {
     animation: none!important;
     transition: none!important
 }
 /* Compact ball board matching the supplied 10-column reference. */
 
 .watch-ball-panel {
     margin: 0;
     padding: 0;
     background: linear-gradient(180deg, #092737 0%, #061b2b 100%);
     direction: ltr
 }
 
 .watch-ball-panel>.watch-section-caption,
 .watch-last-read {
     display: none!important
 }
 
 .watch-balls {
     display: grid;
     grid-template-columns: repeat(10, minmax(0, 1fr));
     gap: 5px clamp(3px, 1.8vw, 7px);
     padding: 5px 6px 8px;
     border: 0;
     border-radius: 0;
     background: linear-gradient(180deg, #092737 0%, #061b2b 100%);
     direction: ltr
 }
 
 .watch-ball,
 .watch-last-ball {
     width: clamp(22px, 7.32vw, 29px);
     height: clamp(22px, 7.32vw, 29px);
     min-width: 0;
     justify-self: center;
     display: grid;
     place-items: center;
     border: 0;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 28%, #ffe9bb 0%, #f1c17d 72%, #d89a58 100%);
     color: #171018;
     font: 800 clamp(12px, 4vw, 16px)/1 Arial, Tahoma, sans-serif;
     box-shadow: 0 1px 1px rgba(0, 0, 0, .22)
 }
 
 .watch-last-ball {
     background: radial-gradient(circle at 35% 28%, #ffe9bb 0%, #f1c17d 72%, #d89a58 100%);
     color: #171018;
     box-shadow: 0 1px 1px rgba(0, 0, 0, .22)
 }
 /* Live controls and prize emphasis. */
 
 .watch-refresh {
     order: 3;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: auto;
     height: 31px;
     margin-left: auto;
     padding-inline: 9px;
     border: 2px solid #fff;
     border-radius: 7px;
     background: transparent;
     color: #fff;
     font: 800 11px/1 Arial, sans-serif;
     cursor: pointer;
     box-shadow: none
 }
 
 .watch-refresh {
     background: transparent;
     border: 2px solid #fff;
     box-shadow: none
 }
 
 .watch-refresh:hover {
     filter: brightness(1.15)
 }
 
 .watch-message-panel {
     display: block;
     position: relative;
     top: auto;
     right: auto;
     width: 100%;
     margin-top: 5px;
     padding: 8px 10px;
     border: 2px solid #36d6b0;
     border-radius: 7px;
     background: linear-gradient(135deg, #062d3d, #073c4d);
     color: #e7fff8;
     box-shadow: 0 3px 10px rgba(0, 0, 0, .24);
     direction: rtl
 }
 
 .watch-message-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 5px
 }
 
 .watch-message-heading strong {
     color: #a8ffe3;
     font: 800 13px/1.2 Arial, Tahoma, sans-serif
 }
 
 .watch-message-heading small {
     color: #b8e9df;
     font-size: 9px
 }
 
 .watch-message-form {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 7px;
     align-items: stretch
 }
 
 .watch-message-panel textarea {
     display: block;
     width: 100%;
     min-height: 42px;
     box-sizing: border-box;
     resize: vertical;
     border: 1px solid #36d6b0;
     border-radius: 4px;
     background: #f3fffc;
     color: #082d3b;
     font: 700 12px Arial, Tahoma, sans-serif;
     padding: 6px
 }
 
 .watch-message-panel button {
     align-self: stretch;
     margin: 0;
     padding: 5px 15px;
     border: 1px solid #81f4d0;
     border-radius: 4px;
     background: #087f78;
     color: #e7fff8;
     font: 800 11px Arial, Tahoma, sans-serif;
     cursor: pointer
 }
 
 .watch-message-panel button:disabled {
     cursor: wait;
     opacity: .65
 }
 
 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0
 }
 
 .watch-prize-line {
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
     align-items: center
 }
 
 .watch-prize-line span {
     color: #111;
     font-size: 12px;
     font-weight: 900;
     text-shadow: 0 1px 0 rgba(255, 255, 255, .45)
 }
 
 .watch-prize-line b {
     display: flex;
     align-items: center;
     gap: 3px;
     color: #e32232;
     font-size: 18px;
     font-weight: 900
 }
 
 .watch-prize-line b i {
     color: #e32232;
     font-style: normal;
     font-size: 19px
 }
 
 @media(max-width:520px) {
     .watch-refresh {
         width: auto;
         height: 29px;
         padding-inline: 7px;
         font-size: 11px
     }
     .watch-message-form {
         grid-template-columns: minmax(0, 1fr) 62px
     }
     .watch-message-panel {
         padding: 7px
     }
     .watch-prize-line span {
         font-size: 11px
     }
     .watch-prize-line b {
         font-size: 16px
     }
 }
 /* Bingo15 card shown before purchase. */
 
 .banko15-preview {
     width: min(100%, 330px);
     margin: 10px auto 14px;
     padding: 9px;
     border: 2px solid #36d6b0;
     border-radius: 8px;
     background: #071b2b;
     direction: ltr
 }
 
 .banko15-preview-row {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr))
 }
 
 .banko15-preview-row span {
     display: grid;
     place-items: center;
     min-height: 42px;
     border: 1px solid #183b47;
     background: #f7f9f6;
     color: #10171c;
     font: 800 16px/1 Arial, Tahoma, sans-serif
 }
 
 .banko15-preview-row:first-child span {
     border-top: 2px solid #36d6b0
 }
 
 .banko15-preview-row:last-child span {
     border-bottom: 2px solid #36d6b0
 }
 
 .banko15-preview-row span:first-child {
     border-left: 2px solid #36d6b0
 }
 
 .banko15-preview-row span:last-child {
     border-right: 2px solid #36d6b0
 }
 
 @media(max-width:520px) {
     .banko15-preview {
         width: min(100%, 280px);
         margin-block: 8px 11px;
         padding: 6px
     }
     .banko15-preview-row span {
         min-height: 36px;
         font-size: 14px
     }
 }
 
 .banko15-sheet-card {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 4px;
     padding: 8px;
     background: linear-gradient(145deg, #143953, #0b2238);
     border: 1px solid #36d6b0;
     border-radius: 10px;
     color: #fff;
     direction: ltr
 }
 
 .banko15-sheet-number {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     color: #0011ff;
     font: 800 12px/1.2 Arial, Tahoma, sans-serif;
     text-align: center
 }
 
 .banko15-sheet-number b {
     display: grid;
     place-items: center;
     width: 30px;
     height: 30px;
     border: 2px solid #7c6b62;
     border-radius: 50%;
     background: #fff;
     color: #1a1a1a;
     font-size: 17px;
     line-height: 1
 }
 
 .banko15-sheet-number em {
     font-style: normal;
     color: #0011ff;
     font-size: 12px
 }
 
 .banko15-sheet-grid {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     direction: ltr
 }
 
 .banko15-sheet-grid span {
     display: grid;
     place-items: center;
     min-height: 38px;
     border: 1px solid #7b8738;
     background: #f7f9f6;
     color: #10171c;
     font: 800 14px/1 Arial, Tahoma, sans-serif
 }
 
 .banko15-sheet-grid span:nth-child(-n+5) {
     border-top: 2px solid #7b8738
 }
 
 .banko15-sheet-grid span:nth-child(5n+1) {
     border-left: 2px solid #7b8738
 }
 
 .banko15-sheet-grid span:nth-child(5n) {
     border-right: 2px solid #7b8738
 }
 
 .banko15-sheet-grid span:nth-last-child(-n+5) {
     border-bottom: 2px solid #7b8738
 }
 
 .banko15-sheet-card .sheet-label {
     direction: rtl;
     text-align: center;
     color: #a8ffe3;
     font-size: 10px
 }
 
 .banko15-sheet-section .sheet-grid {
     direction: ltr
 }
 
 @media(max-width:520px) {
     .banko15-sheet-card {
         padding: 5px;
         gap: 3px
     }
     .banko15-sheet-number {
         font-size: 10px
     }
     .banko15-sheet-number b {
         width: 25px;
         height: 25px;
         font-size: 14px
     }
     .banko15-sheet-number em {
         font-size: 10px
     }
     .banko15-sheet-grid span {
         min-height: 29px;
         font-size: 11px
     }
     .banko15-sheet-card .sheet-label {
         font-size: 9px
     }
 }
 
 .banko15-sheet-card.sheet-available {
     background: linear-gradient(180deg, #f8ffff, #dceff1);
     border-color: #a9f2ed;
     color: #102d3a
 }
 
 .banko15-sheet-card.sheet-available .banko15-sheet-number,
 .banko15-sheet-card.sheet-available .sheet-label {
     color: #207e73
 }
 
 .banko15-sheet-card.sheet-shared-waiting,
 .banko15-sheet-card.sheet-shared-mine {
     background: linear-gradient(180deg, #765b1c, #4d3713);
     border-color: #f0c15d;
     color: #fff7d6
 }
 
 .banko15-sheet-card.sheet-shared-waiting .banko15-sheet-number,
 .banko15-sheet-card.sheet-shared-waiting .sheet-label,
 .banko15-sheet-card.sheet-shared-mine .banko15-sheet-number,
 .banko15-sheet-card.sheet-shared-mine .sheet-label {
     color: #ffe0a0
 }
 
 .banko15-sheet-card.sheet-full,
 .banko15-sheet-card.sheet-full-mine {
     background: linear-gradient(180deg, #7c2232, #4b1423);
     border-color: #e55369;
     color: #fff
 }
 
 .banko15-sheet-card.sheet-full .banko15-sheet-number,
 .banko15-sheet-card.sheet-full .sheet-label,
 .banko15-sheet-card.sheet-full-mine .banko15-sheet-number,
 .banko15-sheet-card.sheet-full-mine .sheet-label {
     color: #ffbdc5
 }
 
 .banko15-sheet-card.sheet-full .banko15-sheet-grid,
 .banko15-sheet-card.sheet-full-mine .banko15-sheet-grid,
 .banko15-sheet-card.sheet-shared-complete .banko15-sheet-grid,
 .banko15-sheet-card.sheet-shared-mine-complete .banko15-sheet-grid {
     opacity: .16
 }
 
 .banko15-sheet-card.sheet-shared-complete,
 .banko15-sheet-card.sheet-shared-mine-complete {
     background: linear-gradient(180deg, #4b3855, #2c2435);
     border-color: #9d83a9;
     color: #d7c9dc
 }
 
 .watch-refresh {
     min-width: 58px;
     min-height: 31px;
     width: auto;
     height: 31px;
     padding: 3px 9px;
     border: 2px solid #f3ac39;
     border-radius: 8px;
     background: #25252b;
     color: #fff;
     font: 800 14px/25px Arial, Tahoma, sans-serif;
     box-shadow: 0 1px 0 rgba(0, 0, 0, .6)
 }
 
 @media(max-width:340px) {
     .watch-refresh {
         min-width: 50px;
         min-height: 27px;
         height: 27px;
         padding: 3px 7px;
         font-size: 12px;
         line-height: 21px
     }
 }
 /* Live draws are visually distinct and lead players directly to the broadcast. */
 
 .live-now-badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 8px;
     border: 1px solid #ff5268;
     border-radius: 999px;
     background: rgba(210, 24, 48, .2);
     color: #ff6679;
     font: 900 10px/1 Arial, sans-serif;
     box-shadow: 0 0 10px rgba(255, 48, 76, .25);
     animation: live-badge-pulse 1.15s ease-in-out infinite
 }
 
 .live-now-badge span {
     font-size: 13px;
     line-height: 1;
     color: #ff334e
 }
 
 @keyframes live-badge-pulse {
     0%,
     100% {
         opacity: .72;
         box-shadow: 0 0 5px rgba(255, 48, 76, .18)
     }
     50% {
         opacity: 1;
         box-shadow: 0 0 15px rgba(255, 48, 76, .62)
     }
 }
 /* Banko15 uses one wide 3x5 card per purchased set. */
 
 .watch-purchased-banko15 .watch-set-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
     width: 100%
 }
 
 .watch-purchased-banko15 .watch-set-card {
     width: 100%;
     padding: 8px;
     border-radius: 8px
 }
 
 .watch-purchased-banko15 .watch-ticket-list {
     display: block;
     width: 100%
 }
 
 .watch-purchased-banko15 .watch-banko15-ticket {
     width: 100%
 }
 
 .watch-purchased-banko15 .watch-ticket-id {
     min-height: 30px;
     padding-inline: 12px;
     font-size: 18px;
     line-height: 30px
 }
 
 .watch-purchased-banko15 .watch-ticket-id .watch-sheet-no,
 .watch-purchased-banko15 .watch-ticket-id .watch-card-no {
     font-size: 18px
 }
 
 .watch-purchased-banko15 .watch-banko15-grid {
     width: 100%
 }
 
 .watch-purchased-banko15 .watch-banko15-grid .watch-ticket-row {
     grid-template-columns: repeat(5, minmax(0, 1fr))
 }
 
 .watch-purchased-banko15 .watch-banko15-grid .watch-ticket-cell {
     height: clamp(42px, 7vw, 72px);
     font-size: clamp(20px, 3vw, 34px);
     line-height: 1
 }
 
 .watch-purchased-banko15 .watch-set-card:nth-child(2n),
 .watch-purchased-banko15 .watch-set-card:nth-child(3n) {
     border-color: #071b27
 }
 
 @media(max-width:520px) {
     .watch-purchased-banko15 .watch-set-card {
         padding: 4px
     }
     .watch-purchased-banko15 .watch-ticket-id {
         min-height: 25px;
         padding-inline: 7px;
         font-size: 14px;
         line-height: 25px
     }
     .watch-purchased-banko15 .watch-ticket-id .watch-sheet-no,
     .watch-purchased-banko15 .watch-ticket-id .watch-card-no {
         font-size: 14px
     }
     .watch-purchased-banko15 .watch-banko15-grid .watch-ticket-cell {
         height: clamp(38px, 12vw, 54px);
         font-size: clamp(17px, 5vw, 25px)
     }
 }
 
 .watch-results-panel {
     margin: 0;
     background: linear-gradient(180deg, #1b0a24 0%, #2a0c25 100%);
     padding: 0;
     border-top: 1px solid rgba(255, 216, 129, .35)
 }
 
 .watch-results-title {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 34px;
     padding: 0 12px;
     background: linear-gradient(90deg, #9edc59, #b7eb74);
     border: 2px solid rgba(18, 34, 44, .9);
     border-radius: 0;
     color: #0d2731;
     font: 900 18px/34px Arial, Tahoma, sans-serif;
     text-align: center;
     letter-spacing: .02em
 }
 
 .watch-award-feed {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 10px 8px 8px
 }
 
 .watch-award-item {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding: 8px 12px;
     border: 2px solid #f0a94e;
     border-radius: 18px;
     background: rgba(255, 255, 255, .04);
     color: #f8f7ff;
     font: 900 18px/1.6 Arial, Tahoma, sans-serif;
     text-align: right;
     direction: rtl;
     box-shadow: 0 0 0 1px rgba(255, 220, 169, .2) inset
 }
 
 .watch-award-item:last-child {
     margin-bottom: 2px
 }
 
 .watch-award-modal[hidden] {
     display: none
 }
 
 .watch-award-modal {
     position: fixed;
     inset: 0;
     z-index: 100;
     display: grid;
     place-items: center;
     padding: 16px;
     background: rgba(1, 12, 20, .76)
 }
 
 .watch-award-modal-box {
     position: relative;
     width: min(420px, 100%);
     padding: 28px 22px 20px;
     border: 2px solid #9bdc24;
     border-radius: 12px;
     background: linear-gradient(145deg, #0b4654, #062333);
     box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
     color: #efffc0;
     text-align: center
 }
 
 .watch-award-modal-icon {
     color: #ffd34f;
     font-size: 38px;
     line-height: 1
 }
 
 .watch-award-modal-box h2 {
     margin: 8px 0;
     color: #fff4b0;
     font: 900 24px/1.3 Arial, Tahoma, sans-serif
 }
 
 .watch-award-modal-box p {
     margin: 10px 0 18px;
     color: #efffc0;
     font: 800 15px/1.8 Arial, Tahoma, sans-serif
 }
 
 .watch-award-modal-close {
     position: absolute;
     top: 7px;
     right: 9px;
     border: 0;
     background: transparent;
     color: #fff;
     font-size: 28px;
     line-height: 1;
     cursor: pointer
 }
 
 .watch-award-modal-ok {
     min-width: 110px;
     padding: 8px 18px;
     border: 1px solid #b9ef55;
     border-radius: 6px;
     background: #23854e;
     color: #fff;
     font: 800 13px Arial, sans-serif;
     cursor: pointer
 }
 /* Shared sets are labeled above the whole dambala set and inside the Banko15 card. */
 
 .watch-shared-label {
     display: block;
     width: max-content;
     margin: 0 auto 6px;
     padding: 3px 18px;
     border: 2px solid #f0b248;
     border-radius: 999px;
     background: #fff1b8;
     color: #6b3b00;
     font: 900 15px/1.2 Arial, Tahoma, sans-serif;
     text-align: center
 }
 
 .watch-shared-inline {
     display: inline-block;
     color: #111b21;
     font: inherit;
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
     text-align: center;
     white-space: nowrap
 }
 
 @media(max-width:520px) {
     .watch-shared-label {
         margin-bottom: 4px;
         padding: 3px 14px;
         font-size: 13px
     }
 }
 
 .watch-award-stack {
     position: fixed;
     top: 10px;
     right: 10px;
     z-index: 120;
     display: flex;
     flex-direction: column;
     gap: 8px;
     width: min(100vw - 16px, 100%);
     pointer-events: none
 }
 
 .watch-award-toast {
     display: flex;
     align-items: center;
     gap: 12px;
     width: min(100vw - 18px, 100%);
     padding: 10px 12px;
     border: 2px solid #f0b248;
     border-radius: 9px;
     background: linear-gradient(135deg, #073d4b, #062536);
     box-shadow: 0 7px 20px #0008;
     color: #fff;
     direction: rtl;
     animation: award-toast-in .25s ease-out
 }
 
 .watch-award-toast.is-leaving {
     animation: award-toast-out .25s ease-in forwards
 }
 
 .watch-award-toast-copy {
     display: flex;
     flex: 1;
     min-width: 0;
     flex-direction: column;
     align-items: stretch;
     gap: 2px;
     text-align: right
 }
 
 .watch-award-toast-copy span {
     display: block;
     overflow: visible;
     color: #eafef6;
     font: 900 18px/1.35 Arial, sans-serif;
     white-space: nowrap
 }
 
 .watch-award-ball {
     box-sizing: border-box;
     display: grid;
     flex: 0 0 46px;
     place-items: center;
     width: 46px;
     height: 46px;
     margin: 0;
     padding: 0;
     border: 2px solid #fff0a8;
     border-radius: 50%;
     background: radial-gradient(circle at 32% 25%, #fffbdc, #f1b84e 70%, #a75d17);
     color: #402308;
     font: 900 22px/1 Arial, sans-serif;
     text-align: center;
     direction: ltr;
     unicode-bidi: plaintext
 }
 
 @keyframes award-toast-in {
     from {
         opacity: 0;
         transform: translateX(25px)
     }
     to {
         opacity: 1;
         transform: translateX(0)
     }
 }
 
 @keyframes award-toast-out {
     to {
         opacity: 0;
         transform: translateY(-12px)
     }
 }
 
 .watch-results-panel {
     background: linear-gradient(180deg, #07505f 0%, #062e42 100%)
 }
 
 .watch-award-feed {
     gap: 0
 }
 
 .watch-award-item {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 10px;
     border: 2px solid transparent;
     background: #e8fff4;
     color: #000;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset;
     direction: rtl
 }
 
 .watch-award-item .watch-award-toast-copy {
     min-width: 0;
     flex: 1
 }
 
 .watch-award-item .watch-award-ball {
     box-sizing: border-box;
     display: grid;
     place-items: center;
     flex-basis: 30px;
     width: 30px;
     height: 30px;
     font-size: 14px;
     line-height: 1;
     text-align: center;
     direction: ltr;
     unicode-bidi: plaintext;
     margin: 0;
     padding: 0
 }
 
 .watch-award-item .watch-award-toast-copy>span {
     display: block;
     white-space: nowrap;
     font-size: 20px;
     line-height: 1.35
 }
 
 .watch-award-item .watch-award-toast-copy>span .watch-award-bracket,
 .watch-award-item .watch-award-toast-copy>span span {
     display: inline-block;
     white-space: nowrap
 }
 
 .watch-award-item-single {
     border-color: #64752a;
     background: linear-gradient(90deg, #aebd68 0%, #c6d58a 100%);
     color: #000
 }
 
 .watch-award-item-single .watch-award-toast-copy span {
     color: #000
 }
 
 .watch-award-item-shared {
     border-color: #3f4c17;
     background: linear-gradient(90deg, #66752b 0%, #81933b 100%);
     color: #fff
 }