#jt-lottery-fab {
  z-index: 61;
  color: #fff8ea;
  letter-spacing: .12em;
  background: radial-gradient(circle at 35% 30%, #f3d27a, #c45a12 42%, #8c1224 78%);
  border: 0;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  font-family: Noto Serif SC, Songti SC, serif;
  font-size: 13px;
  line-height: 1.1;
  display: none;
  position: fixed;
  box-shadow: 0 12px 28px #8c122473, 0 0 0 4px #f3d27a59;
}

#jt-lottery-fab i {
  background: radial-gradient(circle at 35% 30%, #fff, #f3d27a 40%, #c98a1a);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 8px #fff3;
}

#jt-lottery-fab:after {
  content: "";
  pointer-events: none;
  border: 1px dashed #f3d27ad9;
  border-radius: 50%;
  animation: 8s linear infinite jtLotSpin;
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -7px;
  right: -7px;
}

#jt-lottery-fab:active {
  transform: scale(.96);
}

@keyframes jtLotSpin {
  to {
    transform: rotate(360deg);
  }
}

.jt-lot {
  z-index: 480;
  color: #fff6ea;
  background: radial-gradient(520px 280px at 50% 12%, #f3d27a57, #0000 62%), radial-gradient(380px 260px at 0 30%, #c4233859, #0000 55%), radial-gradient(380px 260px at 100% 70%, #c4233847, #0000 50%), repeating-linear-gradient(135deg, #f3d27a0b 0, #f3d27a0b 1px, #0000 1px, #0000 14px), linear-gradient(#6a1828 0%, #3a0c16 38%, #14060c 100%);
  font-family: Noto Serif SC, Songti SC, PingFang SC, Microsoft YaHei, serif;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

.jt-lot.on {
  display: block;
}

.jt-lot-sky {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.jt-lot-sky span {
  opacity: .75;
  background: #f3d27a;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: linear infinite jtLotFall;
  position: absolute;
  top: -12px;
  box-shadow: 0 0 8px #f3d27a;
}

@keyframes jtLotFall {
  to {
    opacity: .05;
    transform: translateY(110vh);
  }
}

.jt-lot-close {
  top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 2;
  color: #f3d27a;
  background: #28080e8c;
  border: 1px solid #f3d27abf;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  position: absolute;
  right: 14px;
  box-shadow: 0 8px 18px #00000040;
}

.jt-lot-wrap {
  z-index: 1;
  width:100%;width:min(440px, 100%);
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(28px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  position: relative;
}

.jt-lot-head {
  text-align: center;
}

.jt-lot-seal {
  color: #f3d27a;
  letter-spacing: 0;
  background: radial-gradient(circle at 35% 30%, #d23a4c, #6d0d1b 72%);
  border: 1px solid #e6c87a;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 6px;
  font-style: normal;
  font-weight: 700;
  display: grid;
  box-shadow: 0 0 0 5px #e6c87a29, 0 8px 16px #00000040;
}

.jt-lot-kicker {
  letter-spacing: .46em;
  text-indent: .46em;
  color: #f3d27a;
  margin: 0;
  font-size: 12px;
}

.jt-lot h1 {
  letter-spacing: .34em;
  text-indent: .34em;
  background: linear-gradient(#fff8df 10%, #f0d48a 46%, #b8893b 100%);
  color: #0000;
  filter: drop-shadow(0 6px 10px #00000047);
  -webkit-background-clip: text;
  background-clip: text;
  margin: 2px 0 0;
  font-size: 42px;
}

.jt-lot-sub {
  letter-spacing: .22em;
  color: #ffecc4d1;
  margin: 2px 0 0;
  font-size: 13px;
}

.jt-lot-meters {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 8px 0;
  display: grid;
}

.jt-lot-meters div {
  text-align: center;
  background: linear-gradient(#fff8e61f, #00000029);
  border: 1px solid #f3d27a66;
  border-radius: 16px;
  padding: 8px 10px 9px;
  box-shadow: inset 0 1px #ffffff1f;
}

.jt-lot-meters b {
  color: #f6e2a8;
  font-size: 26px;
  line-height: 1.1;
  display: block;
}

.jt-lot-meters span {
  letter-spacing: .16em;
  color: #ffecd2cc;
  font-size: 12px;
}

.jt-lot-board {
  gap: 8px;
  width:94vw;width:min(420px, 94vw);
  margin: 16px auto 8px;
  display: grid;
}

.jt-lot-cell {
  cursor: default;
  border: 2px solid #fff6d461;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 84px;
  margin: 0;
  padding: 6px 4px;
  display: flex;
}

.jt-lot-cell.red {
  color: #fff8ea;
  background: linear-gradient(#c4283c, #6e1020);
}

.jt-lot-cell.gold {
  color: #6d1020;
  background: linear-gradient(#fff6d4, #f0d48a);
}

.jt-lot-cell img {
  object-fit: contain;
  width: 34px;
  height: 34px;
}

.jt-lot-cell span {
  text-align: center;
  word-break: break-all;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.25;
}

.jt-lot-cell.on {
  z-index: 2;
  border-color: #fff;
  position: relative;
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #f3d27a, 0 0 18px #f3d27ae6;
}

.jt-lot-hub {
  z-index: 3;
  color: #fff8ea;
  letter-spacing: .2em;
  text-indent: .2em;
  background: radial-gradient(circle at 35% 28%, #f06a78, #b42338 46%, #6d0d1b 78%);
  border: 3px solid #fff6d4;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width:94vw;width:min(420px, 94vw);
  height: 58px;
  margin: 8px auto 0;
  font-size: 22px;
  display: flex;
  position: relative;
  box-shadow: 0 10px 18px #00000059, inset 0 0 0 4px #f3d27a73;
}

.jt-lot-hub.in-grid {
  border-radius: 16px;
  width: auto;
  height: auto;
  min-height: 84px;
  margin: 0;
  font-size: 28px;
}

.jt-lot-hub:disabled {
  filter: saturate(.7);
}

.jt-lot-hub:active:not(:disabled) {
  transform: scale(.96);
}

.jt-lot-msg {
  text-align: center;
  color: #ffd0d0;
  min-height: 1.3em;
  margin: 10px 0 0;
  font-size: 14px;
}

.jt-lot-legend, .jt-lot-recent {
  background: linear-gradient(#fff8ec1a, #fff8ec0a);
  border: 1px solid #f3d27a52;
  border-radius: 18px;
  margin-top: 14px;
  padding: 14px 12px 12px;
  box-shadow: inset 0 1px #ffffff14;
}

.jt-lot-legend h2, .jt-lot-recent h2 {
  letter-spacing: .28em;
  text-align: center;
  color: #f3d27a;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.jt-lot-odds {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.jt-lot-odds span {
  background: #14060a47;
  border: 1px solid #f3d27a2e;
  border-radius: 14px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  font-size: 13px;
  display: flex;
}

.jt-lot-odds img {
  object-fit: contain;
  flex: none;
  width: 28px;
  height: 28px;
}

.jt-lot-odds em {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  overflow: hidden;
}

.jt-lot-odds b {
  display: none;
}

.jt-lot-recent ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jt-lot-recent li {
  border-top: 1px solid #f3d27a29;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  font-size: 14px;
  display: flex;
}

.jt-lot-recent li:first-child {
  border-top: 0;
}

.jt-lot-recent img {
  object-fit: contain;
  width: 32px;
  height: 32px;
}

.jt-lot-recent em {
  color: #f3d27a;
  margin-left: auto;
  font-style: normal;
}

.jt-lot-recent time {
  color: #ffecd2b3;
  font-size: 12px;
}

.jt-lot-mask {
  z-index: 6;
  background: #100408a8;
  place-items: center;
  padding: 24px;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.jt-lot-mask.on {
  display: grid;
}

.jt-lot-card {
  text-align: center;
  color: #3a2218;
  background: radial-gradient(200px 110px at 50% 0, #f3d27a80, #0000 70%), linear-gradient(#fffdf8, #f4e0bc);
  border: 1px solid #e6c87a;
  border-radius: 24px;
  width:100%;width:min(320px, 100%);
  padding: 28px 20px 20px;
  animation: .45s cubic-bezier(.16, 1, .3, 1) jtLotPop;
  position: relative;
  box-shadow: 0 24px 60px #00000073, inset 0 0 0 5px #fffaf0a6;
}

.jt-lot-card.win {
  box-shadow: 0 24px 60px #00000073, 0 0 0 1px #f3d27a, 0 0 40px #f3d27a59;
}

@keyframes jtLotPop {
  from {
    opacity: 0;
    transform: scale(.84) translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.jt-lot-medal {
  background: radial-gradient(circle at 35% 30%, #fff, #f6e2a8 55%, #e7c98a);
  border: 3px solid #8c1224;
  border-radius: 50%;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
  display: grid;
  box-shadow: 0 8px 16px #8c12242e;
}

.jt-lot-medal img {
  object-fit: contain;
  width: 64px;
  height: 64px;
  margin: 0;
}

.jt-lot-card p {
  letter-spacing: .28em;
  color: #8c1224;
  margin: 0;
  font-size: 14px;
}

.jt-lot-card h3 {
  letter-spacing: .1em;
  color: #8c1224;
  margin: 8px 0;
  font-size: 30px;
}

.jt-lot-card .pay {
  letter-spacing: 0;
  color: #7a4e12;
  margin: 0 0 16px;
  font-size: 15px;
}

.jt-lot-card button {
  color: #fff8ea;
  letter-spacing: .28em;
  background: linear-gradient(#d23a4c, #7a1020);
  border: 0;
  border-radius: 14px;
  width: 100%;
  padding: 12px;
  box-shadow: 0 8px 16px #8c122440;
}

#jt-lot-confetti {
  z-index: 5;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  #jt-lottery-fab:after, .jt-lot-sky span {
    animation: none;
  }
}

.service-fab {
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 168px) !important;
  z-index: 80 !important;
}