.live-lottery {
  display: none;
  grid-auto-columns: 1fr;
  gap: 5px;
  overflow: hidden;
}

.live-lottery.on-live {
  display: grid;
}

.live-lottery #stage4d {
  display: none;
  align-self: stretch;
}
.live-lottery #stage4d > .result {
  height: 100%;
  display: none;
}

.lottery {
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 10px;
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  font-weight: 700;
  filter: grayscale(1);
}
.lottery.is-started {
  filter: grayscale(0);
}
.lottery.is-started .lottery-indicator {
  display: block;
}
.lottery.on-draw .lottery-prize {
  display: block;
}
.lottery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.lottery-indicator {
  background-color: #fe0000;
  color: white;
  font-size: 10px;
  text-transform: uppercase;
  padding: 3px 5px;
  display: none;
}
.lottery-logo {
  max-width: 40px;
  margin-right: 5px;
}
.lottery-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lottery-numbers {
  display: flex;
}
.lottery-number {
  flex: 1;
  border: 2px solid black;
  border-left: none;
  font-size: 32px;
  background-color: #ccc;
  text-align: center;
  padding: 2px 6px;
  min-width: 35px;
}
.lottery-number.completed {
  background-color: white;
}
.lottery-number:first-child {
  border-left: 2px solid black;
}
.lottery-prize {
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 5px;
  padding: 5px 8px;
  min-width: 105px;
  display: none;
}

.lottery.l-magnum4d {
  background-color: var(--color-magnum);
}
.lottery.l-magnum4d .lottery-prize {
  background-color: black;
  color: var(--color-magnum);
}

.lottery.l-sportstoto4d {
  background-color: var(--color-sportstoto);
}
.lottery.l-sportstoto4d .lottery-name {
  color: white;
}
.lottery.l-sportstoto4d .lottery-number {
  color: var(--color-sportstoto);
}
.lottery.l-sportstoto4d .lottery-prize {
  background-color: black;
  color: white;
}

.lottery.l-sabah884d {
  background-color: var(--color-sabah88);
}
.lottery.l-sabah884d .lottery-name {
  color: white;
}
.lottery.l-sabah884d .lottery-number {
  color: #cf1b24;
}
.lottery.l-sabah884d .lottery-prize {
  background-color: #cf1b24;
  color: white;
}

.lottery.l-sandakan4d {
  background-color: var(--color-sandakan);
}
.lottery.l-sandakan4d .lottery-name {
  color: black;
}
.lottery.l-sandakan4d .lottery-number {
  color: #056034;
}
.lottery.l-sandakan4d .lottery-prize {
  background-color: #056034;
  color: white;
}

.lottery.l-damacai4d {
  background-color: var(--color-damacai);
}
.lottery.l-damacai4d .lottery-name {
  color: white;
}
.lottery.l-damacai4d .lottery-number {
  color: var(--color-damacai);
}
.lottery.l-damacai4d .lottery-prize {
  background-color: #d41618;
  color: white;
}

.lottery.l-sgpools4d {
  background-color: var(--color-sgpools);
}
.lottery.l-sgpools4d .lottery-name {
  color: white;
}
.lottery.l-sgpools4d .lottery-number {
  color: var(--color-sgpools);
}
.lottery.l-sgpools4d .lottery-prize {
  background-color: #4695c0;
  color: white;
}

.lottery.l-cashsweep4d {
  background-color: var(--color-cashsweep);
}
.lottery.l-cashsweep4d .lottery-name {
  color: white;
}
.lottery.l-cashsweep4d .lottery-prize {
  background-color: #056034;
  color: white;
}

.lottery.l-granddragon4d {
  background-color: var(--color-granddragon);
}
.lottery.l-granddragon4d .lottery-name {
  color: white;
}
.lottery.l-granddragon4d .lottery-number {
  color: #cc2a35;
}
.lottery.l-granddragon4d .lottery-prize {
  background-color: #f3c033;
  color: #cc2a35;
}

.lottery::after,
.lottery::before {
  position: absolute;
  content: '';
  width: 20px;
  height: 100%;
  top: 0;
  z-index: 0;
  display: none;
  /* background-color: black; */
}

.lottery#l-magnum4d::after,
.lottery#l-sportstoto4d::after,
.lottery#l-sabah884d::after,
.lottery#l-sandakan4d::after {
  right: 0;
  transform: translateX(50%);
}

.lottery#l-damacai4d::before,
.lottery#l-sgpools4d::before,
.lottery#l-cashsweep4d::before,
.lottery#l-granddragon4d::before {
  left: 0;
  transform: translateX(-50%);
}

.lottery#l-mobile {
  display: flex;
}

@media screen and (min-width: 768px) {
  .live-lottery {
    grid-template-areas:
      "magnum4d damacai4d"
      "sportstoto4d sgpools4d"
      "sabah884d cashsweep4d"
      "sandakan4d granddragon4d"
    ;
  }
  .lottery { display: flex; }
  .lottery#l-mobile { display: none; }
  .live-lottery #l-magnum { grid-area: magnum4d; }
  .live-lottery #l-sportstoto4d { grid-area: sportstoto4d; }
  .live-lottery #l-sabah884d { grid-area: sabah884d; }
  .live-lottery #l-sandakan4d { grid-area: sandakan4d; }
  .live-lottery #l-damacai4d { grid-area: damacai4d; }
  .live-lottery #l-sgpools4d { grid-area: sgpools4d; }
  .live-lottery #l-cashsweep4d { grid-area: cashsweep4d; }
  .live-lottery #l-granddragon4d { grid-area: granddragon4d; }
}

@media screen and (min-width: 1024px) {
  .live-lottery {
    grid-template-areas:
      "magnum4d stage4d damacai4d"
      "sportstoto4d stage4d sgpools4d"
      "sabah884d stage4d cashsweep4d"
      "sandakan4d stage4d granddragon4d"
    ;
  }
  .lottery { display: flex; }
  .lottery#l-mobile { display: none; }

  .live-lottery #stage4d {
    grid-area: stage4d;
  }

  .live-lottery:has(.on-stage) #stage4d {
    display: block;
  }

  .lottery#l-magnum4d.on-stage::after {
    display: block;
    background-color: var(--color-magnum);
  }
  .live-lottery:has(#l-magnum4d.on-stage) #l-magnum4d-r {
    display: block;
  }

  .lottery#l-sportstoto4d.on-stage::after {
    display: block;
    background-color: var(--color-sportstoto);
  }
  .live-lottery:has(#l-sportstoto4d.on-stage) #l-sportstoto4d-r {
    display: block;
  }

  .lottery#l-sabah884d.on-stage::after {
    display: block;
    background-color: var(--color-sabah88);
  }
  .live-lottery:has(#l-sabah884d.on-stage) #l-sabah884d-r {
    display: block;
  }

  .lottery#l-sandakan4d.on-stage::after {
    display: block;
    background-color: var(--color-sandakan);
  }
  .live-lottery:has(#l-sandakan4d.on-stage) #l-sandakan4d-r {
    display: block;
  }

  .lottery#l-damacai4d.on-stage::before {
    display: block;
    background-color: var(--color-damacai);
  }
  .live-lottery:has(#l-damacai4d.on-stage) #l-damacai4d-r {
    display: block;
  }

  .lottery#l-sgpools4d.on-stage::before {
    display: block;
    background-color: var(--color-sgpools);
  }
  .live-lottery:has(#l-sgpools4d.on-stage) #l-sgpools4d-r {
    display: block;
  }

  .lottery#l-cashsweep4d.on-stage::before {
    display: block;
    background-color: var(--color-cashsweep);
  }
  .live-lottery:has(#l-cashsweep4d.on-stage) #l-cashsweep4d-r {
    display: block;
  }

  .lottery#l-granddragon4d.on-stage::before {
    display: block;
    background-color: var(--color-granddragon);
  }
  .live-lottery:has(#l-granddragon4d.on-stage) #l-granddragon4d-r {
    display: block;
  }
}