:root { color-scheme: light; }
* { box-sizing: border-box; }
html { font-size: 100px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #eee; color: #111; font-family: Arial, "Microsoft YaHei", sans-serif; }
a { text-decoration: none; }
.main { width: 100%; }
.conten { width: 100%; }
.wrap { width: min(100%, 850px); margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 0 24px rgb(0 0 0 / 8%); }
.logo { position: relative; width: 100%; background: #fff; }
.logo img { display: block; width: 100%; height: auto; }
.logo-dizhi { position: absolute; right: .18rem; bottom: .08rem; margin: 0; color: #fff; font-weight: 800; font-size: .18rem; text-shadow: 0 1px 4px #000; }
.section-anchor { display: block; height: 0; scroll-margin-top: .1rem; }
.notice-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 58%); animation: notice-in .18s ease-out; }
.notice-overlay.is-closing { opacity: 0; transition: opacity .18s ease; }
.notice-card { position: relative; width: min(92vw, 460px); padding: 34px 28px 26px; border: 4px solid #ed1c24; border-radius: 12px; background: #fffbea; text-align: center; box-shadow: 0 20px 70px rgb(0 0 0 / 40%); }
.notice-icon { display: grid; place-items: center; width: 66px; height: 66px; margin: -66px auto 12px; border: 4px solid #fff; border-radius: 50%; background: #ed1c24; color: #fff; font-size: 34px; font-weight: 900; }
.notice-card h2 { margin: 0 0 12px; color: #d50000; font-size: 27px; }
.notice-card p { margin: 0; color: #222; font-size: 18px; font-weight: 700; line-height: 1.7; white-space: pre-wrap; }
.notice-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; color: #777; font-size: 30px; cursor: pointer; }
.notice-confirm { margin-top: 22px; min-width: 150px; padding: 11px 24px; border: 0; border-radius: 30px; background: #ed1c24; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
@keyframes notice-in { from { opacity: 0; transform: scale(.98); } }

.native-lottery { width: 100%; border: .04rem solid #078cff; background: #fff; font-family: Arial, "Microsoft YaHei", sans-serif; }
.lottery-tabs { display: flex; align-items: stretch; height: .44rem; overflow-x: auto; border-bottom: 1px solid #ddd; background: #f7f7f7; scrollbar-width: none; }
.lottery-tabs::-webkit-scrollbar { display: none; }
.lottery-tab { flex: 1 0 auto; min-width: 20%; padding: 0 .1rem; border: 0; border-right: 1px solid #ddd; background: transparent; color: #222; font-size: .21rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.lottery-tab.active { background: #fff; color: #409eff; font-weight: 700; }
.lottery-panel { background: #fff; }
.lottery-panel[hidden] { display: none; }
.lottery-topline,.lottery-nextline { display: flex; align-items: center; justify-content: space-between; gap: .12rem; min-height: .56rem; padding: 0 .16rem; font-size: .21rem; }
.lottery-topline p,.lottery-nextline p { min-width: 0; margin: 0; white-space: nowrap; }
.lottery-topline a { flex: none; color: #fa2727; font-size: .19rem; }
.lottery-accent { color: #f5222d; }
.lottery-balls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .06rem; min-height: 1rem; padding: .08rem .12rem; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.lottery-ball-card { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: .02rem; padding: .06rem .01rem .04rem; border: 1px solid #ddd; border-radius: .09rem; background: #fff; }
.lottery-ball { display: grid; place-items: center; width: .58rem; height: .58rem; border: .03rem solid currentColor; border-radius: 50%; background: #fff; font-size: .27rem; font-style: normal; font-weight: 900; line-height: 1; }
.lottery-ball.red { color: #ef3333; }.lottery-ball.blue { color: #258bdf; }.lottery-ball.green { color: #22a65c; }
.lottery-ball-card em { color: #050505; font-size: .18rem; font-style: normal; font-weight: 800; line-height: 1; }
.lottery-waiting,.lottery-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: .84rem; margin: 0; color: #777; font-size: .2rem; }
.lottery-nextline { min-height: .5rem; background: #f5f5f5; font-size: .18rem; }
.lottery-nextline time { color: #444; }
.lottery-nextline [data-countdown] { margin-left: .06rem; color: #e52626; }
.lottery-nextline button { flex: none; width: .9rem; height: .34rem; border: 0; border-radius: .3rem; background: #f5222d; color: #fff; font-size: .18rem; font-weight: 700; cursor: pointer; }
.lottery-nextline button:disabled { opacity: .6; }

.history-wrap { min-height: 100vh; padding-bottom: .3rem; }
.history-nav { display: grid; grid-template-columns: repeat(4, 1fr); border: .04rem solid #078cff; border-bottom: 0; }
.history-nav a { display: grid; place-items: center; min-height: .5rem; border-right: 1px solid #ddd; background: #f7f7f7; color: #222; font-size: .2rem; }
.history-nav a:last-child { border-right: 0; }.history-nav a.active { background: #fff; color: #409eff; font-weight: 800; }
.history-heading { display: flex; align-items: center; justify-content: space-between; padding: .2rem .22rem; border: .04rem solid #078cff; border-top: 1px solid #ddd; background: #fff; }
.history-heading small { color: #f5222d; font-size: .15rem; }.history-heading h1 { margin: .03rem 0 0; font-size: .28rem; }.history-heading > a { padding: .08rem .16rem; border-radius: .3rem; background: #f5222d; color: #fff; font-size: .16rem; }
.history-list { display: grid; gap: .12rem; padding: .14rem; background: #eef5ff; }
.history-draw { overflow: hidden; border: 1px solid #c9dcf4; border-radius: .1rem; background: #fff; }
.history-draw-head { display: flex; justify-content: space-between; align-items: center; gap: .12rem; padding: .12rem .16rem; border-bottom: 1px solid #e7edf5; font-size: .18rem; }.history-draw-head span { color: #f5222d; }.history-draw-head time { color: #64748b; font-size: .15rem; }
.history-balls { border: 0; }.history-empty { margin: 0; padding: .5rem .2rem; background: #fff; color: #777; text-align: center; font-size: .18rem; }
.history-pages { display: flex; align-items: center; justify-content: center; gap: .15rem; padding: .2rem; font-size: .16rem; }.history-pages a { padding: .08rem .15rem; border-radius: .08rem; background: #078cff; color: #fff; }

@media (max-width: 850px) {
  html { font-size: 13.333333vw; }
  body { background: #fff; }
  .wrap { box-shadow: none; }
  .logo-dizhi { right: .18rem; bottom: .08rem; font-size: .26rem; }
  .notice-card { padding: 32px 20px 22px; }
  .notice-card h2 { font-size: 24px; }
  .notice-card p { font-size: 16px; }
  .native-lottery { border-width: 2px; }
  .lottery-tabs { height: .48rem; }
  .lottery-tab { padding: 0 .07rem; font-size: .23rem; }
  .lottery-topline,.lottery-nextline { padding-right: .1rem; padding-left: .1rem; }
  .lottery-balls { gap: .035rem; padding-right: .06rem; padding-left: .06rem; }
  .lottery-ball { width: .58rem; height: .58rem; font-size: .27rem; }
  .history-nav,.history-heading { border-width: 2px; }
}

@media (max-width: 380px) {
  .lottery-tab { font-size: .21rem; }
  .lottery-topline { font-size: .19rem; }
  .lottery-topline a,.lottery-nextline { font-size: .17rem; }
  .lottery-ball { width: .54rem; height: .54rem; font-size: .25rem; }
}