* {
  box-sizing: border-box;
}

:root {
  --mobile-primary: #ff7a18;
  --mobile-primary-dark: #e9580c;
  --mobile-primary-soft: #fff2e8;
  --mobile-primary-line: #ffd2ad;
  --mobile-accent: #ffb33f;
  --mobile-panel: #fffaf5;
  --mobile-ink: #172033;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff6ef;
  color: var(--mobile-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

[v-cloak] {
  display: none;
}

.mobile-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: #667085;
}

.mobile-shell {
  width: min(100vw, 540px);
  min-height: 100vh;
  margin: 0 auto;
  background: #f3f4f9;
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .04);
}

.wap-desktop-frame {
  min-height: 100vh;
}

.wap-mobile-preview {
  margin: 0;
}

.mobile-page {
  min-height: 0;
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

.mobile-home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.mobile-simple-page,
.mobile-game-page,
.mobile-settings {
  background: #f2f3f8;
}

.mobile-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  width: fit-content;
  max-width: min(82vw, 360px);
  transform: translate(-50%, -50%);
  padding: 9px 16px;
  border-radius: 6px;
  background: rgba(31, 41, 55, .88);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: break-word;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}

.mobile-home-top,
.mobile-titlebar {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid #d9dee8;
  position: sticky;
  top: 0;
  z-index: 30;
}

.mobile-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.mobile-brand img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.mobile-brand strong {
  display: block;
  color: #2f3136;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
}

.mobile-brand small {
  display: block;
  margin-top: 1px;
  color: #30343a;
  font-size: 8px;
  line-height: 10px;
}

.mobile-top-user {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.mobile-top-user.guest {
  gap: 5px;
}

.mobile-user-pill {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 142px;
  height: 32px;
  padding: 3px 10px 2px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid #d7dde7;
  border-radius: 6px;
  background: #fff;
  color: #1d2430;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}

.mobile-user-pill strong,
.mobile-user-pill em {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: normal;
}

.mobile-user-pill strong {
  line-height: 14px;
  font-size: 12px;
  font-weight: 800;
}

.mobile-user-pill em {
  line-height: 12px;
  color: #8a5160;
  font-size: 10px;
}

.mobile-auth-btn {
  height: 31px;
  min-width: 44px;
  padding: 0 9px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 31px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.mobile-auth-btn.login {
  background: #5bbbd0;
  color: #fff;
}

.mobile-auth-btn.register {
  border: 1px solid #d5dde8;
  background: #fff;
  color: #2b3441;
}

.mobile-menu-dot {
  width: 28px;
  height: 32px;
  position: relative;
}

.mobile-menu-dot::before,
.mobile-menu-dot::after,
.mobile-menu-dot span {
  content: "";
  position: absolute;
  right: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #22b36b;
}

.mobile-menu-dot::before {
  top: 8px;
}

.mobile-menu-dot span {
  top: 15px;
}

.mobile-menu-dot::after {
  top: 22px;
}

.mobile-home-pop {
  position: absolute;
  right: 8px;
  top: 44px;
  width: 116px;
  background: #fff;
  border: 1px solid #e1e3e8;
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .16);
  z-index: 50;
}

.mobile-home-pop::before {
  content: "";
  position: absolute;
  right: 14px;
  top: -8px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: #fff;
  border-left: 1px solid #e1e3e8;
  border-top: 1px solid #e1e3e8;
}

.mobile-home-pop button {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid #eef0f3;
  background: #fff;
  font-size: 15px;
}

.mobile-home-pop button:last-child {
  border-bottom: 0;
}

.mobile-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, .34);
}

.mobile-confirm-dialog {
  width: min(86vw, 320px);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .26);
}

.mobile-confirm-dialog h2 {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid #edf0f5;
  color: #d72d2d;
  font-size: 16px;
  line-height: 22px;
}

.mobile-confirm-dialog p {
  margin: 0;
  padding: 24px 18px;
  color: #243042;
  font-size: 15px;
  line-height: 22px;
}

.mobile-confirm-dialog div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px;
  background: #f7f9fc;
  border-top: 1px solid #edf0f5;
}

.mobile-confirm-dialog button {
  min-width: 72px;
  height: 34px;
  border: 1px solid #c8d0dc;
  border-radius: 4px;
  background: #fff;
  color: #2d3748;
  font-weight: 700;
}

.mobile-confirm-dialog button.primary {
  border-color: #0b5da8;
  background: #1269b0;
  color: #fff;
}

.mini-icon {
  width: 17px;
  height: 17px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

.mini-icon.pc::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 14px;
  height: 9px;
  border: 1px solid #111827;
  border-radius: 2px;
}

.mini-icon.pc::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  width: 8px;
  border-top: 1px solid #111827;
}

.mini-icon.exit::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 7px;
  height: 11px;
  border: 1px solid #111827;
  border-right: 0;
}

.mini-icon.exit::after {
  content: ">";
  position: absolute;
  right: 0;
  top: -1px;
  color: #111827;
  font-size: 16px;
}

.mobile-hero {
  height: 236px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 90%, rgba(255, 229, 164, .78) 0 18%, transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(255, 248, 220, .82) 0 18%, transparent 30%),
    linear-gradient(105deg, #d69039 0%, #c67524 42%, #f2b863 100%);
}

.mobile-hero.has-slides {
  background: #f5f7fb;
}

.mobile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../blue/images/eggyx_home/mobile-entry-bg.png");
  background-size: cover;
  background-position: center;
  opacity: .12;
}

.mobile-hero.has-slides::before {
  display: none;
}

.mobile-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  opacity: 0;
  background-color: #f5f7fb;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: opacity .28s ease;
}

.mobile-hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.mobile-hero-copy {
  position: absolute;
  left: 58px;
  top: 38px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(117, 55, 6, .24);
}

.mobile-hero-copy span,
.mobile-hero-copy strong,
.mobile-hero-copy b {
  display: block;
  font-weight: 900;
  letter-spacing: 0;
}

.mobile-hero-copy span {
  font-size: 22px;
  line-height: 34px;
}

.mobile-hero-copy strong {
  font-size: 38px;
  line-height: 48px;
}

.mobile-hero-copy b {
  font-size: 42px;
  line-height: 50px;
}

.mobile-hero-mark {
  position: absolute;
  right: 28px;
  top: 42px;
  z-index: 2;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 18px rgba(90, 35, 0, .16));
}

.mobile-hero-mark img {
  width: 104px;
  height: 104px;
  object-fit: contain;
}

.mobile-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.mobile-hero-dots button,
.mobile-hero-dots i {
  width: 7px;
  height: 7px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(76, 112, 148, .45);
  cursor: pointer;
}

.mobile-hero-dots button.active,
.mobile-hero-dots i:first-child {
  background: #fff;
}

.mobile-notice {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-bottom: 1px solid #d9dee8;
}

.mobile-notice i {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  border-radius: 50%;
  background: #91afd0;
  position: relative;
  flex: 0 0 auto;
}

.mobile-notice i::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 14px;
  height: 11px;
  background: #fff;
  clip-path: polygon(0 24%, 60% 0, 60% 100%, 0 76%);
}

.mobile-notice marquee {
  min-width: 0;
  flex: 1;
  color: #2f3744;
  font-size: 13px;
}

.mobile-notice button {
  width: 58px;
  height: 26px;
  margin-right: 3px;
  border: 1px solid #8a98aa;
  border-radius: 2px;
  background: #fff;
}

.mobile-home-actions,
.mine-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
}

.mobile-home-actions {
  padding: 12px 0 8px;
  border-bottom: 1px solid #e1e6ef;
}

.mobile-home-actions button,
.mine-tool-grid button {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  color: #121826;
  font-size: 13px;
}

.action-icon,
.mine-tool-grid i {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}

.action-icon.ad {
  background: #dec6a7;
}

.action-icon.gift {
  background: #b9e1f4;
}

.action-icon.notice {
  background: #477fcd;
}

.action-icon.forum {
  background: #735dd9;
}

.action-icon.rank {
  background: #a8bdd9;
}

.action-icon::before,
.mine-tool-grid i:not(.mine-tool-symbol)::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.action-icon::after {
  content: "";
  position: absolute;
}

.action-icon.gift::before {
  width: 23px;
  height: 18px;
  border-radius: 4px;
}

.action-icon.gift::after {
  width: 2px;
  height: 22px;
  background: #fff;
  box-shadow: 0 0 0 999px transparent, -10px -4px 0 -8px #fff, 10px -4px 0 -8px #fff;
}

.action-icon.notice::before {
  width: 24px;
  height: 18px;
  border-radius: 4px;
  background:
    linear-gradient(#fff 0 0) 6px 5px / 12px 2px no-repeat,
    linear-gradient(#fff 0 0) 6px 10px / 10px 2px no-repeat;
}

.action-icon.notice::after {
  right: 8px;
  top: 12px;
  width: 5px;
  height: 20px;
  border-radius: 5px;
  background: #fff;
  transform: rotate(-14deg);
}

.action-icon.forum::before {
  width: 25px;
  height: 18px;
  border-radius: 6px;
}

.action-icon.forum::after {
  left: 16px;
  bottom: 13px;
  border-top: 8px solid #fff;
  border-left: 6px solid transparent;
}

.action-icon.rank::before {
  width: 24px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#fff 0 0) 3px 12px / 4px 10px no-repeat,
    linear-gradient(#fff 0 0) 10px 7px / 4px 15px no-repeat,
    linear-gradient(#fff 0 0) 17px 3px / 4px 19px no-repeat;
}

.action-icon.rank::after {
  left: 11px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

.mobile-task-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 6px 6px;
  background: #fff8f1;
  border-bottom: 1px solid #f0d8c6;
}

.mobile-task-tabs button {
  min-width: 0;
  height: 32px;
  border-radius: 5px;
  background: #f2ece7;
  color: #66554b;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-task-tabs button.active {
  background: #fff0e7;
  color: #de4f14;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #ffb184;
}

.mobile-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: #fff;
  border-top: 1px solid #f0d8c6;
}

.mobile-task-grid button {
  min-width: 0;
  min-height: 104px;
  padding: 10px 5px 8px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  border-right: 1px solid #f0d8c6;
  border-bottom: 1px solid #f0d8c6;
  background: #fff;
}

.mobile-task-grid button:nth-child(3n) {
  border-right: 0;
}

.mobile-task-grid strong,
.mobile-task-grid em {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: normal;
}

.mobile-task-grid strong {
  color: #212b3c;
  font-size: 13px;
  line-height: 18px;
}

.mobile-task-grid em {
  color: #e44f19;
  font-size: 11px;
  line-height: 16px;
}

.mobile-task-empty {
  grid-column: 1 / -1;
  height: 92px;
  display: grid;
  place-items: center;
  color: #8b94a4;
  font-size: 13px;
  border-bottom: 1px solid #f0d8c6;
}

.mobile-task-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #ffb35e, #f05b1e);
  box-shadow: inset 0 -8px 18px rgba(120, 45, 8, .12), 0 5px 12px rgba(210, 82, 22, .16);
}

.mobile-task-icon::before,
.mobile-task-icon::after {
  content: "";
  position: absolute;
}

.task-icon-register::before,
.task-icon-realname::before,
.task-icon-downline::before {
  top: 11px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.task-icon-register::after,
.task-icon-realname::after,
.task-icon-downline::after {
  bottom: 10px;
  width: 25px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 15px 15px 5px 5px;
}

.task-icon-realname {
  background: linear-gradient(135deg, #3bc5a6, #1a8f6f);
}

.task-icon-homepage,
.task-icon-quick,
.task-icon-promo-click {
  background: linear-gradient(135deg, #47b8ff, #0d74c4);
}

.task-icon-homepage::before,
.task-icon-quick::before,
.task-icon-promo-click::before {
  width: 25px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.task-icon-homepage::after,
.task-icon-quick::after,
.task-icon-promo-click::after {
  bottom: 12px;
  width: 13px;
  height: 2px;
  background: #fff;
}

.task-icon-signin,
.task-icon-question {
  background: linear-gradient(135deg, #ffcf61, #f08b16);
}

.task-icon-signin::before,
.task-icon-question::before {
  width: 24px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.task-icon-signin::after,
.task-icon-question::after {
  top: 18px;
  width: 14px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}

.task-icon-forum,
.task-icon-promo-register {
  background: linear-gradient(135deg, #8b78ff, #4b50d7);
}

.task-icon-forum::before,
.task-icon-promo-register::before {
  width: 26px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 7px;
}

.task-icon-forum::after,
.task-icon-promo-register::after {
  left: 17px;
  bottom: 12px;
  border-top: 8px solid #fff;
  border-left: 6px solid transparent;
}

.task-icon-consume,
.task-icon-income {
  background: linear-gradient(135deg, #ff7869, #d93651);
}

.task-icon-consume::before,
.task-icon-income::before {
  width: 24px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.task-icon-consume::after,
.task-icon-income::after {
  top: 15px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.task-icon-levels {
  background: linear-gradient(135deg, #2bc6d0, #1284a6);
}

.task-icon-levels::before {
  width: 29px;
  height: 24px;
  background:
    linear-gradient(#fff 0 0) 2px 14px / 5px 10px no-repeat,
    linear-gradient(#fff 0 0) 12px 8px / 5px 16px no-repeat,
    linear-gradient(#fff 0 0) 22px 3px / 5px 21px no-repeat;
  border-radius: 0;
}

.mobile-category-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 6px 4px;
  background: #f6f6f6;
  border-bottom: 1px solid #e5e8ef;
}

.mobile-category-tabs button {
  min-width: 0;
  height: 31px;
  border-radius: 4px;
  background: #ececec;
  color: #777;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-category-tabs button.active {
  background: #ffe6dc;
  color: #ff4e20;
  font-weight: 700;
}

.mobile-home-games {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border-top: 1px solid #ebedf2;
}

.mobile-home-games button {
  height: 86px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  border-right: 1px solid #ebedf2;
  border-bottom: 1px solid #ebedf2;
}

.mobile-home-games button:nth-child(4n) {
  border-right: 0;
}

.mobile-game-logo {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #f4f5f8, #fff);
  box-shadow: inset 0 0 0 1px #d6dde8;
}

.mobile-game-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-game-logo i,
.mobile-hall-grid i {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, #fff 0 16%, transparent 17%),
    conic-gradient(from 20deg, #d60f1f, #fff 18%, #1a62ad 38%, #fff 53%, #d60f1f 74%, #fff 88%, #d60f1f);
  border: 2px solid #d2d5dc;
}

.mobile-home-games em {
  max-width: 100%;
  font-style: normal;
  color: #121826;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-copyright {
  height: 44px;
  flex: none;
  margin-top: auto;
  display: grid;
  place-items: center;
  color: #8b94a4;
  font-size: 10px;
  background: #fff;
}

.mobile-titlebar {
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

.mobile-titlebar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.mobile-titlebar > span,
.mobile-titlebar > button {
  position: absolute;
  top: 0;
  width: 46px;
  height: 46px;
}

.mobile-titlebar > span {
  left: 0;
}

.mobile-titlebar > button:last-child:not(.round-back) {
  right: 8px;
}

.mobile-titlebar > button.round-back {
  left: 8px;
  right: auto;
}

.round-back {
  top: 8px !important;
  width: 29px !important;
  height: 29px !important;
  border-radius: 50%;
  background: #de5165;
}

.round-back::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.round-back::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 13px;
  width: 12px;
  border-top: 2px solid #fff;
}

.mobile-merchant-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 8px;
}

.mobile-merchant-card {
  min-height: 149px;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 12px 10px 10px 70px;
  box-shadow: 0 3px 9px rgba(15, 23, 42, .08);
}

.mobile-merchant-card.scenic {
  background:
    linear-gradient(115deg, rgba(255,255,255,.86), rgba(255,255,255,.36)),
    linear-gradient(150deg, #dfeef4 0%, #f4f0e4 48%, #b8c8c0 100%);
  color: #a50000;
}

.mobile-merchant-card.tech {
  background:
    radial-gradient(circle at 88% 45%, rgba(64, 147, 215, .45), transparent 30%),
    linear-gradient(135deg, #071225 0%, #123f67 100%);
}

.mobile-merchant-card::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -18px;
  height: 54px;
  background: rgba(0, 0, 0, .12);
  transform: skewY(-8deg);
}

.merchant-avatar {
  position: absolute;
  left: 13px;
  top: 14px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.8);
  background: #fff;
}

.mobile-merchant-card h2,
.mobile-merchant-card p,
.copy-line {
  position: relative;
  z-index: 1;
}

.mobile-merchant-card h2 {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

.mobile-merchant-card p {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: inherit;
}

.copy-line {
  display: block;
  width: 100%;
  height: 26px;
  line-height: 26px;
  margin-top: 6px;
  padding: 0 8px 0 30px;
  border-radius: 3px;
  background: rgba(22, 30, 39, .58);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.copy-line.muted {
  opacity: .74;
}

.copy-line::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.2);
}

.copy-line::after {
  content: "";
  position: absolute;
  z-index: 1;
}

.copy-line.qq::before {
  background: transparent url("../../images/contact/qq-logo.svg") center/100% 100% no-repeat;
}

.copy-line.qq::after {
  content: none;
}

.copy-line.wechat::before {
  border-radius: 5px;
  background: linear-gradient(180deg, #49d964, #19a93c);
}

.copy-line.wechat::after {
  left: 13px;
  top: 50%;
  width: 10px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-35%);
  background:
    radial-gradient(circle at 37% 42%, #19a93c 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 42%, #19a93c 0 1px, transparent 1.5px),
    #fff;
  box-shadow:
    -4px -4px 0 1px #fff,
    0 0 0 1px rgba(25,169,60,.12);
}

.mobile-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 10px 8px 16px;
}

.mobile-mall-filters {
  display: grid;
  gap: 8px;
  padding: 9px 8px 0;
  background: #f0f2f7;
}

.mobile-mall-category-row,
.mobile-mall-price-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-mall-category-row::-webkit-scrollbar,
.mobile-mall-price-row::-webkit-scrollbar {
  display: none;
}

.mobile-mall-category-row button,
.mobile-mall-price-row button {
  flex: 0 0 auto;
  min-width: 64px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d9dee8;
  border-radius: 15px;
  background: #fff;
  color: #4b5563;
  font-size: 12px;
  white-space: nowrap;
}

.mobile-mall-category-row button.active,
.mobile-mall-price-row button.active {
  border-color: #ff6b2a;
  background: #fff4ed;
  color: #ff5a1f;
  font-weight: 700;
}

.mobile-diamond-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #d9dee8;
}

.diamond-cover {
  height: 104px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--diamond-mid, #3165ff), var(--diamond-base, #1639ba));
}

.diamond-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.diamond-cover::before,
.mobile-diamond-detail-visual::before {
  content: "";
  position: absolute;
  inset: -25px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 44%, rgba(255,255,255,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 70%, rgba(255,255,255,.22) 0 3px, transparent 4px);
  opacity: .9;
}

.mobile-diamond-svg {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 82px;
  height: 70px;
  margin-left: -41px;
  z-index: 1;
}

.mobile-diamond-svg path:first-of-type {
  stroke: #1f2937;
  stroke-width: 3;
  stroke-linejoin: round;
}

.mobile-diamond-svg path:nth-of-type(2) {
  fill: none;
  stroke: #1f2937;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}

.mobile-diamond-svg path:nth-of-type(3) {
  fill: #fff;
  opacity: .22;
}

.mobile-diamond-svg path:nth-of-type(4) {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .62;
}

.diamond-cover strong {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .22), 0 0 4px rgba(255,255,255,.9);
}

.diamond-shape {
  width: 104px;
  height: 58px;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.78);
  clip-path: polygon(14% 0, 86% 0, 100% 36%, 50% 100%, 0 36%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
}

.tone-green .diamond-cover {
  background: radial-gradient(circle, #8df28c, #16b95b);
}

.tone-blue .diamond-cover {
  background: radial-gradient(circle, #8fd2ff, #3336d7);
}

.tone-purple .diamond-cover {
  background: radial-gradient(circle, #f0a5ff, #9333c8);
}

.tone-yellow .diamond-cover {
  background: radial-gradient(circle, #fcfd9d, #e7b119);
}

.tone-gold .diamond-cover {
  background: radial-gradient(circle, #fff092, #f29b29);
}

.tone-red .diamond-cover {
  background: radial-gradient(circle, #ff928e, #da1f47);
}

.tone-black .diamond-cover {
  background: radial-gradient(circle, #707070, #202020);
}

.tone-rainbow .diamond-cover {
  background: conic-gradient(#e92727, #ffc629, #2ac76f, #1494e8, #7c3aed, #e92727);
}

.tone-1 .diamond-cover,
.mobile-diamond-detail-visual.tone-1 {
  background: linear-gradient(135deg, #16e37b, #94f65b 58%, #f0b44a);
}

.tone-2 .diamond-cover,
.mobile-diamond-detail-visual.tone-2 {
  background: linear-gradient(135deg, #5225e8, #1879ff 63%, #24386d);
}

.tone-3 .diamond-cover,
.mobile-diamond-detail-visual.tone-3 {
  background: linear-gradient(135deg, #b33de6, #fe48e0 55%, #8233a3);
}

.tone-4 .diamond-cover,
.mobile-diamond-detail-visual.tone-4 {
  background: linear-gradient(135deg, #ebff34, #fff07b 52%, #9f6b21);
}

.tone-5 .diamond-cover,
.mobile-diamond-detail-visual.tone-5 {
  background: linear-gradient(135deg, #fff16e, #ffc561 48%, #ca7220);
}

.tone-6 .diamond-cover,
.mobile-diamond-detail-visual.tone-6 {
  background: linear-gradient(135deg, #ff6b39, #f11f50 56%, #80223f);
}

.tone-7 .diamond-cover,
.mobile-diamond-detail-visual.tone-7 {
  background: linear-gradient(135deg, #222, #6d6d6d 58%, #161616);
}

.tone-8 .diamond-cover,
.mobile-diamond-detail-visual.tone-8 {
  background: linear-gradient(135deg, #ff243e, #ffb800 20%, #26e773 40%, #21c6ff 60%, #4b20d4 82%);
}

.mobile-diamond-card p {
  margin: 5px 6px;
  font-size: 12px;
}

.mobile-diamond-card b {
  color: #ff1f1f;
}

.mobile-diamond-card em {
  color: #148a26;
  font-style: normal;
  font-weight: 700;
}

.mobile-diamond-card button {
  width: calc(100% - 12px);
  height: 29px;
  margin: 4px 6px 8px;
  border: 1px solid #c8ccd4;
  border-radius: 2px;
  background: #fff;
}

.mobile-mall-detail {
  margin: 10px;
}

.mobile-mall-cover {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.mobile-mall-cover img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border: 1px solid #d9dee8;
  background: #f6f8fb;
}

.mobile-diamond-detail-visual {
  width: 104px;
  height: 104px;
  position: relative;
  overflow: hidden;
  border: 1px solid #d9dee8;
  background: linear-gradient(135deg, var(--diamond-mid, #3165ff), var(--diamond-base, #1639ba));
}

.mobile-diamond-detail-visual .mobile-diamond-svg {
  top: 17px;
}

.mobile-mall-cover h2 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #17324c;
}

.mobile-mall-cover p {
  margin: 4px 0;
  color: #66717b;
}

.mobile-mall-cover em {
  color: #148a26;
  font-style: normal;
  font-weight: 700;
}

.mobile-forum-page {
  background: #f7f1eb;
}

.mobile-forum-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px;
  gap: 6px;
  padding: 9px 10px;
  background: #fff;
  border-bottom: 1px solid #e1e6ef;
}

.mobile-forum-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,246,235,.98)),
    radial-gradient(circle at 92% 20%, rgba(69,83,211,.15), transparent 35%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-forum-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #8b78ff, #2782cd);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(75,80,215,.2);
}

.mobile-forum-hero > i::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 17px;
  width: 34px;
  height: 24px;
  border-radius: 8px;
  background: #fff;
}

.mobile-forum-hero > i::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 33px;
  border-top: 11px solid #fff;
  border-right: 9px solid transparent;
}

.mobile-forum-hero span,
.mobile-forum-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-forum-hero strong {
  display: block;
  margin: 4px 0;
  color: #4b50d7;
  font-size: 23px;
  line-height: 1.2;
}

.mobile-forum-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 10px 8px;
  border: 1px solid #f0d8c6;
  border-radius: 10px;
  overflow: hidden;
  background: #f0d8c6;
}

.mobile-forum-metrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 9px 4px;
  background: #fffaf5;
  color: #7a5b43;
  font-size: 12px;
}

.mobile-forum-metrics b {
  color: #2f241d;
  font-size: 15px;
}

.mobile-forum-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 10px 8px;
}

.mobile-forum-section-grid button {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #f0d8c6;
  border-radius: 10px;
  background: #fffaf5;
  text-align: left;
}

.mobile-forum-section-grid button.active {
  border-color: #8b78ff;
  background: #f4f0ff;
}

.mobile-forum-section-grid img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(90,60,30,.08);
}

.mobile-forum-section-grid strong,
.mobile-forum-section-grid em {
  min-width: 0;
  grid-column: 2;
  display: block;
  overflow: hidden;
}

.mobile-forum-section-grid strong {
  color: #2f241d;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-forum-section-grid em {
  color: #7a5b43;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mobile-forum-search input {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e6d2c1;
  border-radius: 7px;
  background: #fff;
}

.mobile-forum-search button {
  border: 1px solid #f0b486;
  border-radius: 7px;
  background: #fff7ef;
  color: #d85b18;
  font-weight: 700;
}

.mobile-forum-search button:first-of-type {
  color: #fff;
  border-color: #4b50d7;
  background: #4b50d7;
}

.mobile-forum-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 8px 10px;
}

.mobile-forum-actions button {
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff9d3e, #e95a0c);
  color: #fff;
  font-weight: 700;
}

.mobile-forum-thread-list {
  display: grid;
  gap: 8px;
  margin: 8px 10px;
}

.mobile-forum-thread-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid #f0d8c6;
  border-radius: 10px;
  background: #fffaf5;
  text-align: left;
  transition: border-color .18s ease, transform .18s ease;
}

.mobile-forum-thread-card:active {
  transform: scale(.99);
}

.mobile-forum-thread-card span {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f4f0ff;
  color: #4b50d7;
  font-size: 12px;
  font-weight: 700;
}

.mobile-forum-thread-card strong {
  min-width: 0;
  color: #2f241d;
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-forum-thread-card em {
  color: #5b4637;
  font-size: 13px;
  line-height: 1.55;
  font-style: normal;
  overflow-wrap: anywhere;
}

.mobile-forum-thread-card small {
  color: #8a735f;
  font-size: 12px;
}

.mobile-forum-read {
  padding: 10px;
}

.mobile-forum-post {
  margin-bottom: 10px;
  padding: 12px;
  background: #fffaf5;
  border: 1px solid #f0d8c6;
  border-radius: 10px;
}

.mobile-forum-post header {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1dac9;
}

.mobile-forum-post header span {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f4f0ff;
  color: #4b50d7;
  font-size: 12px;
  font-weight: 700;
}

.mobile-forum-post h2,
.mobile-forum-post h3 {
  margin: 0;
  color: #2f241d;
  font-size: 16px;
  line-height: 1.45;
}

.mobile-forum-post h3 {
  font-size: 14px;
}

.mobile-forum-post header em {
  color: #8a735f;
  font-size: 12px;
  font-style: normal;
}

.mobile-forum-post .content {
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.75;
  color: #3d4b57;
}

.mobile-forum-post .content p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.mobile-forum-reply-head {
  margin: 10px 10px 8px;
  color: #2f241d;
  font-weight: 700;
}

.mobile-forum-reply-head b {
  color: #e95a0c;
}

.mobile-forum-compose-hero {
  margin: 10px 10px 8px;
  min-height: 92px;
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf5, #f7f0ff);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-forum-compose-hero > i {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: linear-gradient(135deg, #ff9d3e, #4b50d7);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.55);
}

.mobile-forum-compose-hero > i::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 13px;
  width: 26px;
  height: 32px;
  border-radius: 5px;
  background: #fffaf5;
}

.mobile-forum-compose-hero > i::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 25px;
  width: 15px;
  height: 3px;
  border-radius: 999px;
  background: #4b50d7;
  box-shadow: 0 7px 0 #4b50d7;
}

.mobile-forum-compose-hero span,
.mobile-forum-compose-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-forum-compose-hero strong {
  display: block;
  margin: 4px 0;
  color: #4b50d7;
  font-size: 22px;
  line-height: 1.2;
}

.mobile-forum-compose-card {
  display: grid;
  gap: 10px;
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background: #fffaf5;
  box-shadow: 0 3px 12px rgba(112, 63, 20, .07);
}

.mobile-forum-compose-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mobile-forum-compose-sections button {
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #f0d8c6;
  border-radius: 8px;
  background: #fff;
  color: #5b4637;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-forum-compose-sections button.active {
  border-color: #8b78ff;
  background: #f4f0ff;
  color: #4b50d7;
}

.mobile-forum-compose-card label {
  display: grid;
  gap: 6px;
}

.mobile-forum-compose-card label span {
  color: #2f241d;
  font-weight: 700;
}

.mobile-forum-compose-card input,
.mobile-forum-compose-card textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #e6d2c1;
  border-radius: 8px;
  background: #fff;
  color: #2f241d;
  font-size: 14px;
}

.mobile-forum-compose-card input {
  height: 38px;
  padding: 0 10px;
}

.mobile-forum-compose-card textarea {
  min-height: 168px;
  padding: 10px;
  line-height: 1.65;
  resize: vertical;
}

.mobile-forum-compose-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.mobile-forum-compose-actions button {
  height: 38px;
  border-radius: 8px;
  font-weight: 700;
}

.mobile-forum-compose-actions button:first-child {
  border: 1px solid #f0b486;
  background: #fff7ef;
  color: #d85b18;
}

.mobile-forum-compose-actions button:last-child {
  background: linear-gradient(90deg, #ff9d3e, #e95a0c);
  color: #fff;
}

.mobile-forum-compose-actions button:disabled {
  opacity: .55;
}

.mobile-game-page {
  min-height: 0;
  padding-bottom: 0;
  overflow: visible;
}

.mobile-hall-mode-tabs {
  height: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  border-bottom: 1px solid #e3e8f0;
}

.mobile-hall-mode-tabs button {
  min-width: 0;
  height: 32px;
  border: 1px solid #d9e0ea;
  border-radius: 16px;
  background: #f7f9fc;
  color: #465366;
  font-size: 14px;
  font-weight: 800;
}

.mobile-hall-mode-tabs button.active {
  border-color: #fc812f;
  background: linear-gradient(135deg, #ff8b32, #f15d18);
  color: #fff;
  box-shadow: 0 5px 12px rgba(241, 93, 24, .2);
}

.mobile-game-hall {
  min-height: 0;
  display: grid;
  grid-template-columns: 86px 1fr;
  background: #fff;
}

.mobile-game-side {
  overflow-y: visible;
  background: #f5f7fb;
  border-right: 1px solid #dde3ec;
}

.mobile-game-side button {
  width: 100%;
  min-height: 41px;
  padding: 8px 4px;
  position: relative;
  border-bottom: 1px solid #e5e9f0;
  background: #f8fafc;
  font-size: 13px;
  line-height: 18px;
}

.mobile-game-side button.active {
  background: #fff;
  color: #d8261f;
  font-weight: 700;
}

.mobile-game-side button.active::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: #fc812f;
}

.mobile-game-main {
  overflow-y: visible;
  padding: 9px 9px 16px;
  background: #fff;
}

.mobile-game-main h2 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  color: #97a0b4;
  font-size: 17px;
  font-weight: 500;
}

.mobile-game-main h2 span {
  width: 74px;
  border-top: 2px solid #f2eadc;
}

.mobile-hall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 13px;
}

.mobile-hall-grid button {
  min-width: 0;
  height: 82px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #e9f2fb);
  box-shadow: 0 2px 5px rgba(15, 23, 42, .24);
  position: relative;
  overflow: hidden;
}

.mobile-hall-grid button.active {
  box-shadow: 0 0 0 2px #20c871, 0 4px 10px rgba(15, 23, 42, .18);
}

.mobile-hall-grid strong {
  position: absolute;
  left: 9px;
  top: 11px;
  max-width: 78%;
  color: #ef2020;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-hall-grid span {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.mobile-hall-grid img {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  object-fit: cover;
}

.mobile-official-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.72), transparent 0 14%, transparent 15%),
    linear-gradient(145deg, var(--official-from, #f59e0b), var(--official-to, #b45309));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.48), 0 3px 8px rgba(112,63,20,.22);
}

.mobile-official-logo::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.36);
}

.mobile-official-logo mark,
.mobile-official-logo em,
.mobile-official-logo u {
  position: relative;
  z-index: 1;
  max-width: 82%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  font-style: normal;
  background: transparent;
}

.mobile-official-logo mark {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.mobile-official-logo em {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
}

.mobile-official-logo u {
  margin-top: 3px;
  font-size: 8px;
  opacity: .88;
}

.mobile-hall-grid i:not(:empty) {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(145deg, #1e293b, #475569);
  border-color: rgba(255,255,255,.74);
}

.mine-head {
  min-height: 146px;
  padding: 16px 14px 20px;
  position: relative;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, #fff7e8 0%, #f0e4d0 58%, #e7d0a8 100%);
}

.mine-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.35));
}

.mine-top-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(148, 163, 184, .65);
  box-shadow: 0 2px 7px rgba(31, 41, 55, .14);
}

.mine-top-icon.refresh {
  position: absolute;
  left: 10px;
  top: 13px;
}

.mine-top-icon.refresh::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 3px solid #ef4444;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
}

.mine-top-icon.refresh::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 9px;
  width: 0;
  height: 0;
  border-left: 7px solid #ef4444;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translate(-50%, -50%) rotate(14deg);
}

.mine-top-tools {
  position: absolute;
  right: 9px;
  top: 13px;
  display: flex;
  gap: 8px;
}

.mine-top-icon.settings {
  background: #fff;
}

.mine-top-icon.settings::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #334155;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 -7px 0 -4px #334155,
    0 7px 0 -4px #334155,
    -7px 0 0 -4px #334155,
    7px 0 0 -4px #334155;
}

.mine-top-icon.settings::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ef4444;
  transform: translate(-50%, -50%);
}

.mine-profile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}

.mine-profile > img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(15,23,42,.16);
}

.mine-profile h1 {
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
}

.vip-pill {
  min-width: 64px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(90deg, #a995ff, #5e73d9);
}

.coin-badge,
.stat-line b::after,
.mobile-stat-card strong::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff7a4 0 18%, #ffb01f 19% 70%, #f27b12 71%);
  vertical-align: -1px;
}

.mine-profile p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: #1f2937;
}

.mine-profile p span {
  padding: 2px 5px;
  border-radius: 3px;
  background: #fff;
}

.mine-profile p button {
  width: 20px;
  height: 20px;
  border: 1px solid #bdc5d1;
  border-radius: 3px;
  background: #fff;
  position: relative;
}

.mine-profile p button::before,
.mine-profile p button::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #596579;
  background: #fff;
}

.mine-profile p button::before {
  left: 5px;
  top: 4px;
}

.mine-profile p button::after {
  left: 8px;
  top: 7px;
}

.mine-profile p em {
  font-style: normal;
}

.mine-balance {
  margin: -20px 4px 4px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.mine-balance div {
  height: 55px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border-right: 1px solid #f0f1f4;
  border-bottom: 1px solid #f0f1f4;
}

.mine-balance div.wide {
  grid-column: span 2;
}

.mine-balance div:nth-child(2),
.mine-balance div:nth-child(6) {
  border-right: 0;
}

.mine-balance strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff6200;
  font-size: 12px;
  line-height: 15px;
}

.mine-balance .balance-coin {
  flex: 0 0 auto;
  margin-left: 4px;
}

.mine-balance span {
  color: #0e1726;
  font-size: 13px;
}

.mine-tool-grid {
  margin: 4px;
  border-radius: 5px;
  overflow: hidden;
}

.mine-tool-grid.primary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mine-tool-grid.welfare {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mine-security-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 4px;
  border-radius: 5px;
  overflow: hidden;
}

.mine-tool-grid button {
  min-height: 71px;
  border-bottom: 1px solid #edf0f5;
  text-align: center;
  place-items: center;
  position: relative;
}

.mine-security-grid button {
  min-height: 68px;
}

.mine-tool-grid i {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.mine-tool-grid button span {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.tool-tone-1 {
  background: #5f9ee8;
}

.tool-tone-2 {
  background: #e67b5b;
}

.tool-tone-3 {
  background: #7bd2a6;
}

.tool-tone-4 {
  background: #f3cc62;
}

.tool-tone-5 {
  background: #6aa9f0;
}

.tool-tone-6 {
  background: #8fc65a;
}

.tool-tone-7 {
  background: #88d196;
}

.tool-tone-8 {
  background: #b9b9b9;
}

.tool-tone-9 {
  background: #6f8fd8;
}

.tool-tone-10 {
  background: #f16d72;
}

.tool-tone-11 {
  background: #4965a6;
}

.tool-tone-12 {
  background: #b75672;
}

.tool-tone-13 {
  background: #f0b84f;
}

.tool-tone-14 {
  background: #f58b64;
}

.tool-tone-15 {
  background: #9ca3af;
}

.tool-tone-16 {
  background: #8da1c3;
}

.tool-tone-17 {
  background: #ff7b4d;
}

.tool-tone-18 {
  background: #4f8feb;
}

.tool-tone-19 {
  background: #ef6a5b;
}

.tool-tone-20 {
  background: #55b889;
}

.tool-tone-21 {
  background: #697b9b;
}

.tool-tone-22 {
  background: #f0a741;
}

.mine-tool-grid button.muted {
  color: #4f5663;
}

.mine-tool-unread-dot {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: 14px;
  border-radius: 999px;
  background: #f43f3f;
  box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(244, 63, 63, 0.48);
  pointer-events: none;
  animation: mineUnreadPulse 1.05s ease-in-out infinite;
}

@keyframes mineUnreadPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.86);
  }

  45% {
    opacity: 1;
    transform: scale(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mine-tool-unread-dot {
    animation: none;
    opacity: 1;
  }
}

.mine-tool-symbol::before,
.mine-tool-symbol::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
}

.mine-tool-symbol::before {
  border-color: #fff;
}

.tool-icon-wallet::before {
  width: 23px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.tool-icon-wallet::after {
  right: 8px;
  top: 13px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.tool-icon-profile::before {
  top: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.tool-icon-profile::after {
  bottom: 8px;
  width: 22px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 12px 12px 4px 4px;
}

.tool-icon-message::before {
  width: 23px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.tool-icon-message::after {
  width: 15px;
  height: 15px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.tool-icon-prize::before {
  width: 22px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 6px 6px 4px 4px;
}

.tool-icon-prize::after {
  top: 7px;
  width: 2px;
  height: 24px;
  background: #fff;
  box-shadow: -9px 6px 0 -1px #fff, 9px 6px 0 -1px #fff;
}

.tool-icon-detail::before {
  width: 20px;
  height: 23px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.tool-icon-detail::after {
  width: 12px;
  height: 2px;
  background: #fff;
  box-shadow: 0 -6px #fff, 0 6px #fff;
}

.tool-icon-bank::before {
  left: 50%;
  top: 54%;
  width: 26px;
  height: 16px;
  border: 0;
  border-top: 5px solid #fff;
  border-bottom: 2px solid #fff;
  background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 8px);
  transform: translate(-50%, -50%);
}

.tool-icon-bank::after {
  left: 50%;
  top: 9px;
  width: 26px;
  height: 8px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.tool-icon-card::before {
  width: 24px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.tool-icon-card::after {
  left: 11px;
  top: 14px;
  width: 14px;
  height: 2px;
  background: #fff;
  box-shadow: 0 5px #fff;
}

.tool-icon-diamond::before,
.tool-icon-member::before {
  width: 24px;
  height: 20px;
  border: 2px solid #fff;
  clip-path: polygon(15% 0, 85% 0, 100% 35%, 50% 100%, 0 35%);
}

.tool-icon-diamond::after,
.tool-icon-member::after {
  width: 2px;
  height: 18px;
  background: rgba(255,255,255,.85);
  transform: rotate(35deg);
}

.tool-icon-receiver::before {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.tool-icon-receiver::after {
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: -6px -6px #fff, 6px -6px #fff, -6px 6px #fff, 6px 6px #fff;
}

.tool-icon-signin::before {
  width: 22px;
  height: 23px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.tool-icon-signin::after {
  width: 11px;
  height: 7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}

.tool-icon-first::before {
  width: 23px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.tool-icon-first::after {
  width: 2px;
  height: 24px;
  background: #fff;
  box-shadow: 8px 0 0 -1px #fff, -8px 0 0 -1px #fff;
}

.tool-icon-loss::before {
  width: 22px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 10px 10px 4px 4px;
}

.tool-icon-loss::after {
  width: 11px;
  height: 11px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}

.tool-icon-rank::before {
  width: 23px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 9px 9px;
}

.tool-icon-rank::after {
  bottom: 8px;
  width: 16px;
  height: 7px;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.tool-icon-barcode::before {
  width: 25px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 3px;
}

.tool-icon-barcode::after {
  width: 18px;
  height: 14px;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 7px);
}

.tool-icon-points::before {
  width: 22px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 0 -2px #fff;
}

.tool-icon-points::after {
  right: 8px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.tool-icon-stats::before {
  bottom: 9px;
  width: 4px;
  height: 15px;
  background: #fff;
  box-shadow: -8px 5px #fff, 8px -4px #fff;
}

.tool-icon-stats::after {
  bottom: 7px;
  width: 27px;
  height: 2px;
  background: #fff;
}

.tool-icon-verify::before {
  top: 8px;
  width: 21px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 12px 12px 9px 9px;
  clip-path: polygon(50% 0, 92% 15%, 86% 72%, 50% 100%, 14% 72%, 8% 15%);
}

.tool-icon-verify::after {
  width: 12px;
  height: 7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}

.tool-icon-password::before {
  top: 7px;
  width: 17px;
  height: 12px;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.tool-icon-password::after {
  bottom: 8px;
  width: 24px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: linear-gradient(#fff, #fff) center 6px/4px 7px no-repeat;
}

.tool-icon-security::before {
  width: 23px;
  height: 23px;
  border: 2px solid #fff;
  border-radius: 7px;
}

.tool-icon-security::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 -7px 0 0 #fff, 0 8px 0 0 #fff;
}

.tool-icon-log::before {
  width: 21px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.tool-icon-log::after {
  width: 13px;
  height: 2px;
  background: #fff;
  box-shadow: 0 -6px #fff, 0 6px #fff;
}

.tool-icon-promotion::before {
  left: 50%;
  top: 9px;
  right: auto;
  bottom: auto;
  width: 8px;
  height: 8px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: -10px 14px 0 -2px #f0a741, -10px 14px 0 0 #fff, 10px 14px 0 -2px #f0a741, 10px 14px 0 0 #fff;
  transform: translateX(-50%);
}

.tool-icon-promotion::after {
  left: 50%;
  top: 19px;
  right: auto;
  bottom: auto;
  width: 24px;
  height: 14px;
  margin: 0;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  border-radius: 10px 10px 0 0;
  transform: translateX(-50%);
}

.login-reward-panel {
  height: 70px;
  margin: 4px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #213757;
  background:
    linear-gradient(135deg, rgba(138, 220, 60, .94), rgba(44, 153, 160, .94));
}

.login-reward-panel h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.login-reward-panel p {
  margin: 0;
}

.login-reward-panel b {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 27px;
  border-radius: 5px;
  background: #31353e;
  color: #fff;
}

.login-reward-panel b.hot {
  background: #f40508;
}

.login-reward-panel button {
  height: 25px;
  margin-left: 6px;
  padding: 0 9px;
  border-radius: 3px;
  background: #fff;
}

.mobile-login-reward-page {
  background: #f4f7fb;
}

.mobile-login-reward-hero {
  margin: 10px 10px 8px;
  padding: 14px;
  min-height: 112px;
  border-radius: 14px;
  display: grid;
  align-content: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(135deg, #82cf32, #168fa5);
  box-shadow: 0 8px 18px rgba(36, 118, 94, .18);
}

.mobile-login-reward-hero span {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-weight: 700;
}

.mobile-login-reward-hero strong {
  font-size: 23px;
  line-height: 1.15;
}

.mobile-login-reward-hero em {
  font-style: normal;
  opacity: .92;
}

.mobile-login-reward-countdown {
  margin: 0 10px 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d9e7d5;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #213757;
}

.mobile-login-reward-countdown span {
  margin-right: 5px;
  font-weight: 700;
}

.mobile-login-reward-countdown b {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 28px;
  border-radius: 6px;
  background: #303745;
  color: #fff;
}

.mobile-login-reward-countdown b.hot {
  background: #f40508;
}

.mobile-login-reward-countdown i {
  font-style: normal;
}

.mobile-login-reward-summary {
  margin: 0 10px 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-login-reward-summary div {
  min-height: 68px;
  padding: 9px;
  border: 1px solid #d9e7d5;
  border-radius: 12px;
  background: #fff;
  display: grid;
  align-content: center;
  gap: 5px;
}

.mobile-login-reward-summary span {
  color: #66817f;
}

.mobile-login-reward-summary strong {
  color: #173d4b;
  line-height: 1.35;
}

.mobile-login-reward-rules,
.mobile-login-reward-records {
  margin: 8px 10px;
  border-radius: 12px;
  overflow: hidden;
}

.mobile-stat-card {
  margin: 8px 4px;
  border: 1px solid #c5d6ef;
  background: #fff;
}

.mobile-stat-card h3 {
  margin: 0;
  padding: 6px 5px;
  border-bottom: 1px solid #c5d6ef;
  font-size: 15px;
}

.stat-line,
.bar-row,
.mini-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 29px;
  border-bottom: 1px solid #c5d6ef;
}

.stat-line span,
.bar-row em,
.bar-row strong,
.mini-table span {
  padding: 0 8px;
  font-weight: 400;
  font-style: normal;
}

.stat-line span:last-child,
.bar-row strong {
  text-align: right;
}

.stat-line b,
.bar-row em {
  color: #ff5a00;
}

.bar-row {
  grid-template-columns: 80px 1fr 1fr;
}

.bar-row i {
  height: 17px;
  border-radius: 9px;
  overflow: hidden;
  background: #ebedf1;
}

.bar-row i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f9cf7, #55d6c2);
}

.mobile-stat-card.mini .mini-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
  min-height: 60px;
}

.mini-table span {
  height: 100%;
  display: grid;
  align-content: center;
  gap: 10px;
  border-right: 1px solid #c5d6ef;
}

.mini-table span:last-child {
  border-right: 0;
}

.settings-list {
  background: #fff;
  border-top: 1px solid #dfe3ea;
  border-bottom: 1px solid #dfe3ea;
}

.mobile-settings-page {
  min-height: 0;
  background: #f0f2f7;
}

.mobile-settings-page .mobile-titlebar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

.settings-list button,
.settings-row,
.settings-user {
  width: 100%;
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid #e1e5ec;
  background: #fff;
  font-size: 16px;
}

.settings-list button:last-child {
  border-bottom: 0;
}

.settings-list i,
.settings-user i {
  width: 9px;
  height: 9px;
  border-right: 1px solid #a7b0bf;
  border-top: 1px solid #a7b0bf;
  transform: rotate(45deg);
}

.settings-user {
  margin: 10px 0;
  justify-content: flex-start;
  gap: 10px;
}

.settings-user img {
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.settings-user span {
  flex: 1;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.settings-user strong {
  font-size: 18px;
  font-weight: 500;
}

.settings-user em {
  color: #667085;
  font-style: normal;
  font-size: 14px;
}

.settings-row {
  justify-content: space-between;
}

.money-switch {
  width: 112px;
  height: 31px;
  border-radius: 16px;
  border: 1px solid #d8dbe2;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(16,24,40,.12);
  position: relative;
  color: #9aa2ad;
  padding: 0 10px 0 34px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.settings-row .money-switch {
  width: 112px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 10px 0 34px;
  line-height: 29px;
  border-bottom: 0;
}

.money-switch span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-switch i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15,23,42,.24);
  border: 1px solid #d2d2d2;
  transform: none;
}

.money-switch.active {
  background: #f3f9ff;
  border-color: #b8dbff;
  color: #1f8cff;
  padding-left: 10px;
  padding-right: 34px;
}

.money-switch.active i {
  left: auto;
  right: 3px;
  border-color: #1f8cff;
  background: #1f8cff;
  box-shadow: 0 1px 3px rgba(31,140,255,.24);
}

.mobile-logout {
  width: calc(100% - 20px);
  height: 58px;
  margin: 12px 10px 0;
  border: 1px solid #f0c7c7;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
  color: #f04040;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(240,64,64,.08);
}

.mine-links {
  margin: 8px 0 0;
}

.mine-links button {
  min-height: 45px;
  padding-left: 48px;
  position: relative;
  font-size: 15px;
}

.mine-links button::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 1px solid #687386;
  border-radius: 3px;
}

.mobile-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 40;
  width: min(100vw, 540px);
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid #cbd1dc;
}

.mobile-bottom-nav button {
  min-width: 0;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  color: #606a78;
  font-size: 11px;
  line-height: 1.15;
}

.mobile-bottom-nav button.active {
  color: #e53935;
}

.mobile-bottom-nav i {
  width: 24px;
  height: 24px;
  position: relative;
}

.mobile-bottom-nav i::before,
.mobile-bottom-nav i::after {
  content: "";
  position: absolute;
}

.mobile-list-page,
.mobile-form-page,
.mobile-member-card-page,
.mobile-rank-page,
.mobile-signin-page,
.mobile-stats-page,
.mobile-agent-withdraw-page,
.mobile-play-page {
  background: #f0f2f7;
}

.mobile-filter-tabs,
.mobile-line-tabs,
.play-tabs {
  height: 45px;
  display: grid;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e1e6ef;
}

.mobile-filter-tabs {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}

.mobile-filter-tabs button,
.mobile-line-tabs button,
.play-tabs button {
  height: 100%;
  color: #111827;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}

.mobile-filter-tabs button.active,
.mobile-line-tabs button.active {
  color: #ff3f75;
  border-bottom-color: #ff4f86;
}

.mobile-line-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-line-tabs.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-line-tabs.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-wallet-card {
  margin: 10px;
  padding: 12px;
  border: 1px solid #e2e6ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
}

.mobile-wallet-note,
.mobile-wallet-fee {
  padding: 10px;
  border: 1px solid #e2e6eb;
  border-radius: 5px;
  background: #f4f6f9;
  color: #3f4b5c;
  line-height: 1.7;
}

.mobile-wallet-note p {
  margin: 0 0 4px;
}

.mobile-wallet-note p:last-child {
  margin-bottom: 0;
}

.mobile-wallet-fee {
  margin-top: 10px;
}

.mobile-wallet-field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.mobile-wallet-field span {
  color: #2f3744;
  font-weight: 700;
}

.mobile-wallet-field select,
.mobile-wallet-field input {
  width: 100%;
  height: 42px;
  border: 1px solid #cfd6e2;
  border-radius: 5px;
  background: #fff;
  padding: 0 10px;
  color: #111827;
}

.mobile-wallet-field em {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 5px;
  background: #f5f7fa;
  color: #5b6778;
  font-style: normal;
  line-height: 1.5;
}

.mobile-receiver-links,
.mobile-wallet-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mobile-receiver-links button,
.mobile-wallet-quick button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d6dde7;
  border-radius: 4px;
  background: #fff;
  color: #111827;
}

.mobile-wallet-amount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.mobile-wallet-amount b {
  color: #2f3744;
}

.mobile-wallet-cost {
  margin-top: 8px;
  color: #56616b;
}

.mobile-wallet-cost b {
  color: #f00;
}

.mobile-wallet-quick .blue {
  background: #2473a8;
  color: #fff;
  border-color: #2473a8;
}

.recharge-withdraw-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 52px;
  align-items: center;
  gap: 8px;
}

.recharge-withdraw-amount-row .mobile-wallet-amount {
  min-width: 0;
}

.recharge-withdraw-amount-row button {
  height: 42px;
  padding: 0;
  border: 1px solid #d6dde7;
  border-radius: 4px;
  background: #fff;
  color: #172033;
  font-size: 14px;
  white-space: nowrap;
}

.recharge-withdraw-amount-row button.blue {
  border-color: #e95a0c;
  background: #e95a0c;
  color: #fff;
}

.mobile-wallet-submit,
.mobile-wallet-reset {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border-radius: 5px;
  color: #fff;
}

.mobile-wallet-submit {
  background: #2375a8;
}

.mobile-wallet-submit:disabled {
  cursor: not-allowed;
  opacity: .58;
  background: #9ca3af;
}

.mobile-wallet-reset {
  background: #9aa3af;
}

.mobile-wallet-warn {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ffd2d2;
  border-radius: 5px;
  background: #fff5f5;
  color: #b91c1c;
  line-height: 1.6;
}

.mobile-wallet-warn.ok {
  border-color: #badbcc;
  background: #f0fdf4;
  color: #166534;
}

.mobile-wallet-warn.ok button {
  min-height: 28px;
  margin-left: 8px;
  padding: 0 10px;
  border-radius: 4px;
  background: #16a34a;
  color: #fff;
}

.mobile-recharge-withdraw-page {
  background: #f0f2f7;
}

.recharge-withdraw-card {
  display: grid;
  gap: 10px;
}

.recharge-withdraw-balance {
  margin: 0;
}

.recharge-withdraw-pane {
  display: grid;
  gap: 10px;
}

.mobile-recharge-business-list {
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-recharge-business-list .mobile-merchant-card {
  min-height: 138px;
}

.recharge-wallet-heading {
  min-height: 28px;
  display: flex;
  align-items: center;
  color: #1f2937;
  font-weight: 800;
}

.recharge-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recharge-channel-grid button {
  min-height: 58px;
  border: 1px solid #dce3ee;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #f7f9fc);
  color: #263241;
  display: grid;
  place-items: center;
  gap: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}

.recharge-channel-grid button.active {
  border-color: #ff7b3d;
  background: linear-gradient(180deg, #fff7ed, #ffe6d2);
  color: #c2410c;
}

.recharge-channel-grid i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2f80ed, #1b4e9b);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.recharge-channel-grid span {
  max-width: 100%;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recharge-channel-grid em {
  color: #e23b12;
  font-size: 11px;
  font-style: normal;
}

.mobile-usdt-deposit {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfe6dc;
  border-radius: 7px;
  background: #f7fffb;
}

.mobile-usdt-rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 8px;
  color: #253041;
}

.mobile-usdt-rate b {
  color: #059669;
}

.mobile-usdt-rate button,
.mobile-usdt-receiver button {
  min-height: 32px;
  border: 1px solid #17a36b;
  border-radius: 4px;
  background: #10b981;
  color: #fff;
  font-weight: 700;
}

.mobile-usdt-rate button:disabled {
  opacity: .62;
}

.mobile-usdt-receiver {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.mobile-usdt-receiver img {
  width: 86px;
  height: 86px;
  border: 1px solid #e0e7ef;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.mobile-usdt-receiver div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.mobile-usdt-receiver strong {
  color: #111827;
}

.mobile-usdt-receiver span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #4b5563;
  line-height: 1.45;
}

.recharge-guide-wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recharge-guide-wallet-grid button {
  min-height: 48px;
  border: 1px solid #dde4ee;
  border-radius: 6px;
  background: #fff;
  color: #263241;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 8px;
}

.recharge-guide-wallet-grid button.active {
  border-color: #ff7b3d;
  background: #fff7ed;
  color: #c2410c;
}

.recharge-guide-wallet-grid i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #10b981, #0f766e);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.recharge-guide-wallet-grid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.recharge-guide-note {
  background: #fff;
}

.recharge-guide-link {
  height: 42px;
  border: 1px solid #ff8a4b;
  border-radius: 5px;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 800;
}

.mobile-record-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-record-tools button,
.recharge-record-list .mobile-log-row > button {
  min-height: 34px;
  border: 1px solid #f0b18a;
  border-radius: 5px;
  background: #fff7ed;
  color: #c2410c;
}

.recharge-record-list .mobile-log-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.recharge-record-list .mobile-log-row > button {
  grid-column: 1 / -1;
}

.mobile-receiver-page {
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

.mobile-receiver-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  height: 46px;
  border-bottom: 1px solid #e1e6ef;
  background: #fff;
}

.mobile-receiver-tabs button {
  min-width: 0;
  border-bottom: 2px solid transparent;
  color: #111827;
  font-size: 14px;
}

.mobile-receiver-tabs button.active {
  color: #ff3f75;
  border-bottom-color: #ff4f86;
}

.mobile-receiver-tabs span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: inherit;
  opacity: .78;
}

.mobile-receiver-card {
  display: grid;
  gap: 12px;
}

.mobile-receiver-note p {
  margin: 0 0 4px;
}

.mobile-receiver-note p:last-child {
  margin-bottom: 0;
  color: #168346;
}

.mobile-receiver-list {
  display: grid;
  gap: 10px;
}

.mobile-receiver-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  background: #fff;
}

.mobile-receiver-list div {
  min-width: 0;
}

.mobile-receiver-list strong,
.mobile-receiver-list span,
.mobile-receiver-list em,
.mobile-receiver-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-receiver-list strong {
  color: #1f2d3d;
}

.mobile-receiver-list span {
  margin: 4px 0;
  color: #536273;
}

.mobile-receiver-list em {
  color: #111827;
  font-family: Consolas, "Courier New", monospace;
  font-style: normal;
}

.mobile-receiver-list small {
  margin-top: 4px;
  color: #7b8494;
}

.mobile-receiver-list img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid #e1e6ef;
  border-radius: 5px;
}

.mobile-receiver-list button {
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  background: #d24b4b;
  color: #fff;
}

.mobile-receiver-list button:disabled {
  opacity: .55;
}

.mobile-receiver-form {
  margin: 0;
  display: grid;
  gap: 12px;
  box-shadow: none;
}

.mobile-receiver-form input[type="file"] {
  padding-top: 9px;
  line-height: 20px;
}

.receiver-empty {
  height: 178px;
  border: 1px dashed #d6dde7;
  border-radius: 6px;
}

.mobile-bank-page {
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

.mobile-bank-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.mobile-bank-balance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-bank-balance div {
  min-width: 0;
  min-height: 68px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  border: 1px solid #dfe7f2;
  border-radius: 6px;
  background: #f4f8fd;
}

.mobile-bank-balance span {
  color: #4b5563;
}

.mobile-bank-balance strong {
  color: #e53935;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.mobile-bank-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
  border: 1px solid #f0d8c6;
  border-radius: 6px;
  background: #fffdf9;
}

.mobile-bank-page .mobile-wallet-note {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.55;
}

.mobile-bank-page .mobile-wallet-note p {
  margin-bottom: 2px;
}

.mobile-bank-page .mobile-wallet-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.mobile-bank-form .mobile-wallet-field,
.mobile-bank-form .mobile-wallet-quick {
  grid-column: 1 / -1;
}

.mobile-bank-page .mobile-wallet-field select,
.mobile-bank-page .mobile-wallet-field input,
.mobile-bank-page .mobile-wallet-field em {
  min-width: 0;
  height: 38px;
}

.mobile-bank-page .mobile-wallet-field em {
  min-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bank-form .mobile-wallet-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
}

.mobile-bank-venue-panel .mobile-wallet-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
}

.mobile-bank-form .mobile-wallet-quick button,
.mobile-bank-venue-panel .mobile-wallet-quick button {
  min-width: 0;
  padding: 0 6px;
  white-space: nowrap;
}

.mobile-bank-form .mobile-wallet-submit,
.mobile-bank-form .mobile-wallet-reset {
  width: 100%;
  margin-top: 0;
}

.mobile-bank-form .mobile-wallet-reset {
  background: #eef2f7;
  color: #4b5563;
}

.mobile-bank-venue {
  display: grid;
  gap: 9px;
  padding: 9px;
  border: 1px solid #dfe7f2;
  border-radius: 6px;
  background: #f8fafc;
  color: #4b5563;
  line-height: 1.5;
  overflow: hidden;
}

.mobile-bank-venue strong {
  color: #26364b;
}

.mobile-bank-venue p {
  margin: 0;
}

.mobile-bank-venue-tip {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  background: #fff6ee;
  color: #8a4b24;
  line-height: 1.5;
  font-size: 12px;
}

.mobile-bank-section-head,
.mobile-bank-venue-tools,
.mobile-bank-venue-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-bank-section-head {
  justify-content: space-between;
}

.mobile-bank-switch {
  min-width: 96px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  color: #526174;
}

.mobile-bank-switch i {
  width: 22px;
  height: 12px;
  border-radius: 10px;
  background: #c9d3df;
  position: relative;
}

.mobile-bank-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}

.mobile-bank-switch.on {
  border-color: #24a06b;
  color: #15825a;
}

.mobile-bank-switch.on i {
  background: #26b176;
}

.mobile-bank-switch.on i::after {
  transform: translateX(10px);
}

.mobile-bank-venue-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.mobile-bank-venue-amount-field {
  margin-top: 0;
}

.mobile-bank-venue-amount-field span {
  white-space: nowrap;
}

.mobile-bank-venue-amount-field input {
  min-width: 0;
  height: 38px;
}

.mobile-bank-venue-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px 50px;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.mobile-bank-venue-amount-row button {
  height: 38px;
  padding: 0;
  border: 1px solid #cfd9e5;
  border-radius: 4px;
  background: #fff;
  color: #314257;
  font-size: 14px;
}

.mobile-bank-venue-amount-row button.blue {
  border-color: #e95a0c;
  background: #e95a0c;
  color: #fff;
}

.mobile-bank-venue-offset-row {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

.mobile-bank-venue-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-bank-venue-mode button,
.mobile-bank-venue-actions button,
.mobile-bank-venue-tools button,
.mobile-bank-venue-list button {
  height: 34px;
  border-radius: 4px;
  border: 1px solid #cfd9e5;
  background: #fff;
  color: #314257;
}

.mobile-bank-venue-mode button.active,
.mobile-bank-venue-actions .primary {
  border-color: #2375a8;
  background: #2375a8;
  color: #fff;
}

.mobile-bank-venue-actions button {
  min-width: 0;
  padding: 0 12px;
}

.mobile-bank-venue-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
}

.mobile-bank-venue-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 5px;
  background: #eef4fa;
  font-size: 12px;
}

.mobile-bank-venue-tools label {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.mobile-bank-venue-tools input {
  flex: 0 0 auto;
}

.mobile-bank-venue-tools span {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  color: #25364b;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bank-venue-tools button {
  min-width: 0;
  width: 100%;
  padding: 0;
  white-space: nowrap;
}

.mobile-bank-venue-tools button:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
}

.mobile-bank-venue-tools button:nth-of-type(2) {
  grid-column: 3;
  grid-row: 1;
}

.mobile-bank-venue-list {
  display: grid;
  gap: 7px;
}

.mobile-bank-venue-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(64px, auto) 52px;
  align-items: center;
  gap: 7px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid #d9e2ee;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.mobile-bank-venue-list article.active {
  border-color: #ff9b45;
  background: #fff8ed;
}

.mobile-bank-venue-list div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-bank-venue-list strong,
.mobile-bank-venue-list em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bank-venue-list em {
  color: #7b8794;
  font-style: normal;
  font-size: 12px;
}

.mobile-bank-venue-list b {
  color: #e65a28;
  white-space: nowrap;
  font-size: 12px;
  text-align: right;
}

.mobile-bank-venue-list button {
  width: 52px;
}

.mobile-bank-logs {
  padding: 0;
}

.mobile-bank-logs .mobile-log-row {
  gap: 10px;
}

.mobile-bank-logs .mobile-log-row div {
  min-width: 0;
  flex: 1 1 auto;
}

.mobile-bank-logs .mobile-log-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bank-logs .mobile-log-row b {
  max-width: 48%;
  flex: 0 1 auto;
  text-align: right;
  overflow-wrap: anywhere;
}

.mobile-empty {
  height: 252px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  background: #fff;
  color: #9098a6;
}

.mobile-empty.large {
  height: 278px;
}

.mobile-route-fallback .mobile-empty {
  min-height: calc(100vh - 132px);
  height: auto;
  padding: 28px 18px;
}

.mobile-route-fallback .primary-submit {
  width: min(220px, 72vw);
}

.mobile-empty i {
  width: 104px;
  height: 86px;
  position: relative;
  display: block;
}

.mobile-empty i::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 6px;
  width: 48px;
  height: 60px;
  border: 5px solid #566174;
  border-radius: 9px;
  background: linear-gradient(#eef4fb, #fff);
  transform: rotate(-8deg);
  box-shadow: 0 14px 28px rgba(84, 100, 130, .18);
}

.mobile-empty i::after {
  content: "";
  position: absolute;
  left: 42px;
  top: 23px;
  width: 27px;
  height: 3px;
  background: #b6c2d4;
  box-shadow: 0 12px 0 #b6c2d4, 0 24px 0 #b6c2d4;
}

.mobile-empty.loading {
  color: #b45a18;
  background:
    linear-gradient(180deg, rgba(255, 246, 238, .72), rgba(255, 255, 255, .96)),
    #fff;
}

.mobile-empty.loading i {
  width: 34px;
  height: 34px;
  border: 3px solid #ffe1ca;
  border-top-color: var(--mobile-primary);
  border-radius: 50%;
  animation: mobileLoadingSpin .82s linear infinite;
}

.mobile-empty.loading i::before,
.mobile-empty.loading i::after {
  display: none;
}

.mobile-empty.loading p {
  margin: 0;
  color: #9f4f15;
  font-weight: 700;
}

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

.mobile-account-list {
  background: #fff;
}

.mobile-ledger-filter {
  padding: 10px 10px 8px;
  background: #f0f2f7;
}

.mobile-ledger-filter-toggle {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #d8e0ec;
  border-radius: 7px;
  background: #fff;
  color: #26364b;
  text-align: left;
  box-shadow: 0 4px 12px rgba(39, 55, 84, .05);
}

.mobile-ledger-filter-toggle i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f80ed, #23b26d);
  position: relative;
}

.mobile-ledger-filter-toggle i::before,
.mobile-ledger-filter-toggle i::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.mobile-ledger-filter-toggle i::before {
  top: 8px;
  box-shadow: 0 4px 0 #fff;
}

.mobile-ledger-filter-toggle i::after {
  top: 16px;
}

.mobile-ledger-filter-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-ledger-filter-toggle b {
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 12px;
  background: #fff4ec;
  color: #f05d23;
  text-align: center;
  font-size: 12px;
}

.mobile-ledger-filter-panel {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid #d8e0ec;
  border-radius: 7px;
  background: #fff;
}

.mobile-ledger-filter-panel label {
  display: grid;
  gap: 5px;
  color: #4b5563;
  font-size: 12px;
}

.mobile-ledger-filter-panel select {
  height: 36px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid #cfd9e5;
  border-radius: 5px;
  background: #f9fbfd;
  color: #26364b;
}

.mobile-ledger-filter-panel button {
  height: 36px;
  border-radius: 5px;
  border: 1px solid #cfd9e5;
  background: #fff;
  color: #314257;
}

.mobile-ledger-filter-panel button.primary {
  border-color: #2375a8;
  background: #2375a8;
  color: #fff;
}

.mobile-ledger-list .mobile-log-row b {
  min-width: 92px;
  text-align: right;
}

.mobile-log-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #eef1f5;
}

.mobile-log-row strong,
.mobile-log-row span {
  display: block;
}

.mobile-log-row strong {
  font-weight: 500;
}

.mobile-log-row span {
  margin-top: 3px;
  color: #8a94a5;
  font-size: 12px;
}

.mobile-log-row b {
  color: #ef4b16;
}

.mobile-play-top {
  height: 42px;
  display: grid;
  grid-template-columns: 112px 1fr 56px 28px;
  align-items: center;
  background: #f2f2f2;
  border-bottom: 1px solid #cfd5dd;
  position: sticky;
  top: 0;
  z-index: 32;
}

.play-tool-icons {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 8px;
}

.play-tool-icons button {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
}

.play-tool-icons i {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  color: #666f7d;
}

.play-tool-icons i::before,
.play-tool-icons i::after {
  content: "";
  position: absolute;
}

.tool-mute::before {
  left: 2px;
  top: 7px;
  width: 13px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.tool-refresh::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.tool-help::before {
  content: "?";
  inset: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  font-weight: 700;
}

.tool-home::before {
  left: 1px;
  top: 8px;
  width: 16px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 42%, 86% 42%, 86% 100%, 14% 100%, 14% 42%, 0 42%);
}

.mobile-play-top h1 {
  margin: 0;
  text-align: center;
  font-size: 14px;
}

.mobile-play-top h1 span {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  background: linear-gradient(90deg, #bf3434 0 50%, #fff 50%);
  border: 1px solid #d9dde6;
}

.play-title-button {
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
  color: #121826;
  font-size: 14px;
  font-weight: 700;
}

.play-title-button span {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #bf3434 0 50%, #fff 50%);
  border: 1px solid #d9dde6;
}

.play-title-button strong {
  min-width: 0;
  max-width: 112px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-title-button i {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #121826;
}

.play-money {
  color: #ff6200;
  font-size: 13px;
}

.play-more {
  width: 28px;
  height: 42px;
  position: relative;
}

.play-more::before,
.play-more::after,
.play-more span {
  content: "";
  position: absolute;
  left: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e23b36;
}

.play-more::before {
  top: 12px;
}

.play-more::after {
  top: 26px;
}

.play-more {
  background: radial-gradient(circle at 13px 21px, #e23b36 0 2px, transparent 3px);
}

.play-popover {
  position: absolute;
  right: 5px;
  top: 54px;
  z-index: 50;
  width: 98px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .18);
}

.play-popover::before {
  content: "";
  position: absolute;
  right: 9px;
  top: -9px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
}

.play-popover button {
  width: 100%;
  height: 43px;
  border-bottom: 1px solid #edf0f5;
  font-size: 16px;
}

.play-popover button:last-child {
  border-bottom: 0;
}

.mobile-game-picker-mask {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: rgba(15, 23, 42, .42);
}

.mobile-game-picker {
  width: min(430px, 86vw);
  max-width: 100%;
  height: calc(100vh - 58px - env(safe-area-inset-bottom));
  background: #fff;
  display: grid;
  grid-template-rows: 46px 1fr;
  box-shadow: 8px 0 28px rgba(15, 23, 42, .18);
}

.mobile-game-picker header {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  border-bottom: 1px solid #dbe1ea;
  background: #fff;
}

.mobile-game-picker header > span {
  position: relative;
  width: 46px;
  height: 46px;
}

.mobile-game-picker header strong {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

.mobile-game-picker header button:last-child {
  position: relative;
  right: auto;
  justify-self: center;
}

.mobile-game-picker-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 78px 1fr;
}

.mobile-game-picker .mobile-game-side,
.mobile-game-picker .mobile-game-main {
  min-height: 0;
}

.mobile-game-picker .mobile-game-main {
  padding: 10px 10px 18px;
}

.mobile-picker-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-picker-grid button {
  height: 67px;
  border-radius: 12px;
}

.mobile-picker-grid span,
.mobile-picker-grid img {
  width: 44px;
  height: 44px;
}

.play-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #587464;
  height: 34px;
  overflow: hidden;
}

.play-tabs button {
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.55);
}

.play-tabs button.active {
  background: #fff;
  color: #1f2937;
}

.play-draw-board {
  background: #fff;
  border-bottom: 1px solid #e1e6ef;
}

.play-draw-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #edf1f6;
}

.play-draw-row:last-child {
  border-bottom: 0;
}

.play-draw-row > strong {
  font-size: 12px;
  color: #111827;
}

.play-draw-row.pending {
  grid-template-columns: 90px 1fr 1fr 58px;
  min-height: 42px;
  color: #667085;
}

.play-draw-row.pending b {
  color: #10a23d;
  font-weight: 700;
}

.play-draw-row.pending button {
  height: 28px;
  color: #0b73ff;
}

.play-result-line,
.play-record-result {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.play-result-stack,
.play-record-result-stack {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.play-result-line em,
.play-record-result em {
  color: #111827;
  font-style: normal;
  font-weight: 700;
}

.play-result-class-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
}

.play-result-class-badge {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 4px;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
}

.play-result-class-badge.class-big,
.play-result-class-badge.class-big-odd { background: #d9165b; }
.play-result-class-badge.class-small,
.play-result-class-badge.class-big-even { background: #ff7a1a; }
.play-result-class-badge.class-odd,
.play-result-class-badge.class-small-odd { background: #0878ee; }
.play-result-class-badge.class-even,
.play-result-class-badge.class-small-even { background: #2ca06f; }
.play-result-class-badge.class-extreme-small { background: #12a8c8; }
.play-result-class-badge.class-extreme-big { background: #7b47d8; }
.play-result-class-badge.class-dragon { background: #f30606; }
.play-result-class-badge.class-tiger { background: #0500ff; }
.play-result-class-badge.class-harmony { background: #2f3d4a; }
.play-result-class-badge.class-leopard { background: #6250ad; }
.play-result-class-badge.class-empty {
  border: 1px solid #d8dee8;
  background: #fff;
  color: #98a2b3 !important;
  box-shadow: none;
}
.play-result-class-badge.class-default { background: #607d8b; }

.play-result-class-badge.class-big-odd,
.play-result-class-badge.class-small-odd,
.play-result-class-badge.class-big-even,
.play-result-class-badge.class-small-even,
.play-result-class-badge.class-extreme-small,
.play-result-class-badge.class-extreme-big {
  font-size: 10px !important;
}

.play-result-muted {
  color: #98a2b3;
  text-align: center;
}

.play-verify-btn,
.play-record-verify {
  height: 24px;
  padding: 0 9px;
  border: 1px solid #1f74b5;
  border-radius: 3px;
  background: #fff;
  color: #1f74b5;
  font-size: 11px;
}

.play-record-verify {
  margin-top: 5px;
}

.play-result-chip {
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #4f8df7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.play-result-chip.wide {
  min-width: 34px;
  border-radius: 4px;
}

.play-result-chip.kind-dice,
.play-result-chip.kind-pk10,
.play-result-chip.kind-number {
  color: #102033;
  background: #eef4ee;
  border: 1px solid #dfe8df;
}

.play-result-chip.kind-category36,
.play-result-chip.kind-zjh {
  border-radius: 4px;
}

.play-result-chip.tone-0 { background: #16c172; color: #fff; border-color: transparent; }
.play-result-chip.tone-1 { background: #4f8df7; color: #fff; border-color: transparent; }
.play-result-chip.tone-2 { background: #ff6b1f; color: #fff; border-color: transparent; }
.play-result-chip.tone-3 { background: #e22974; color: #fff; border-color: transparent; }
.play-result-chip.tone-4 { background: #6b62b3; color: #fff; border-color: transparent; }
.play-result-chip.tone-5 { background: #667085; color: #fff; border-color: transparent; }

.play-result-chip.color-red,
.play-result-chip.official-ball.color-red {
  border-color: transparent;
  background: #e83b57;
  color: #fff;
}

.play-result-chip.color-blue,
.play-result-chip.official-ball.color-blue {
  border-color: transparent;
  background: #3478f6;
  color: #fff;
}

.play-result-chip.color-green,
.play-result-chip.official-ball.color-green {
  border-color: transparent;
  background: #21aa5f;
  color: #fff;
}

.play-result-chip.kind-official_lhc {
  min-width: 24px;
  border-radius: 50%;
}

.play-result-chip.kind-official_kl8.kl8-light {
  border-color: #a6d8f1;
  background: #dff3ff;
  color: #0f5480;
}

.play-result-chip.kind-official_kl8.kl8-dark,
.play-result-chip.kind-official_ssc.ssc-blue {
  border-color: transparent;
  background: #16a9dd;
  color: #fff;
}

.play-result-chip.pk10-1 { background: #f5e400; color: #111; border-color: #d5c800; }
.play-result-chip.pk10-2 { background: #2f86ff; color: #fff; border-color: #1f62c4; }
.play-result-chip.pk10-3 { background: #555b66; color: #fff; border-color: #3a4048; }
.play-result-chip.pk10-4 { background: #ff7b1a; color: #fff; border-color: #ca5b08; }
.play-result-chip.pk10-5 { background: #32d7f0; color: #fff; border-color: #14a8bf; }
.play-result-chip.pk10-6 { background: #233bff; color: #fff; border-color: #1729b5; }
.play-result-chip.pk10-7 { background: #cfd5dc; color: #1f2937; border-color: #a6afb9; }
.play-result-chip.pk10-8 { background: #ef2525; color: #fff; border-color: #b81717; }
.play-result-chip.pk10-9 { background: #7a1111; color: #fff; border-color: #4f0909; }
.play-result-chip.pk10-10 { background: #18b943; color: #fff; border-color: #0f842d; }

.play-result-chip.kind-dice,
.play-result-chip.kind-official_k3 {
  border-radius: 5px;
  background: #e5e7eb;
  color: #111;
}

.play-result-chip.kind-dice:not(.dice-final),
.play-result-chip.kind-official_k3:not(.dice-final) {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.play-result-chip.kind-dice img,
.play-result-chip.kind-official_k3 img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.play-result-chip.dice-1,
.play-result-chip.dice-4 {
  color: #b71919;
}

.play-result-chip.dice-final {
  border-radius: 5px;
  color: #fff;
}

.play-result-chip.dice-final.color-red {
  border-color: #c92a3e;
  background: #e83b57;
}

.play-result-chip.dice-final.color-blue {
  border-color: #1e63bf;
  background: #3478f6;
}

.play-result-chip.dice-final.color-green {
  border-color: #168848;
  background: #21aa5f;
}

.play-result-chip.cat36-0,
.play-result-chip.zjh-0 {
  min-width: 42px;
  border-color: #ffd66a;
  border-radius: 3px;
  background: #c98905;
  color: #fff;
}

.play-result-chip.cat36-1,
.play-result-chip.zjh-4 {
  min-width: 42px;
  border-color: #b94cff;
  border-radius: 3px;
  background: #7422c8;
  color: #fff;
}

.play-result-chip.cat36-2,
.play-result-chip.zjh-3 {
  min-width: 42px;
  border-color: #1e9bff;
  border-radius: 3px;
  background: #075fc0;
  color: #fff;
}

.play-result-chip.cat36-3,
.play-result-chip.zjh-2 {
  min-width: 42px;
  border-color: #70e2a0;
  border-radius: 3px;
  background: #21a85b;
  color: #fff;
}

.play-result-chip.cat36-4,
.play-result-chip.zjh-5 {
  min-width: 42px;
  border-color: #ff8a98;
  border-radius: 3px;
  background: #e21f3b;
  color: #fff;
}

.play-result-chip.zjh-1 {
  min-width: 42px;
  border-color: #ff3045;
  border-radius: 3px;
  background: #b80014;
  color: #fff;
}

.play-result-chip.card-suit-0,
.play-result-chip.card-suit-2 {
  background: #fff5f5;
  color: #d0182d;
  border-color: #f2b2bd;
}

.play-result-chip.card-suit-1,
.play-result-chip.card-suit-3 {
  background: #f8fafc;
  color: #1f2937;
  border-color: #b8c2cf;
}

.play-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
  border-bottom: 1px solid #e0e5ed;
}

.play-summary div {
  min-height: 42px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-right: 1px solid #e6e9ef;
}

.play-summary div:last-child {
  border-right: 0;
}

.play-summary b {
  color: #ff4b00;
  font-size: 11px;
}

.mobile-draw-verify-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding: 18px 10px;
  background: rgba(15, 23, 42, .36);
}

.mobile-draw-verify-dialog {
  width: min(100%, 520px);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #cfd6df;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .22);
}

.mobile-draw-verify-dialog header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid #d7dce3;
  background: #f8fafc;
}

.mobile-draw-verify-dialog header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.mobile-draw-verify-dialog header button {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #334155;
  font-size: 25px;
}

.mobile-draw-verify-body {
  padding: 8px;
  overflow: auto;
}

.mobile-draw-verify-body table {
  width: 100%;
  border-collapse: collapse;
  color: #334155;
  font-size: 12px;
}

.mobile-draw-verify-body th,
.mobile-draw-verify-body td {
  border: 1px solid #d6d6d6;
  padding: 8px 7px;
  text-align: center;
  vertical-align: middle;
}

.mobile-draw-verify-body th {
  width: 78px;
  background: #fbfbfb;
  font-weight: 400;
}

.mobile-draw-verify-body code {
  font-family: Consolas, Monaco, monospace;
  word-break: break-all;
}

.mobile-draw-verify-body a {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  background: #1f5f8f;
  color: #fff;
  text-decoration: none;
}

.mobile-draw-verify-numbers {
  color: #e62424;
  font-weight: 700;
}

.mobile-draw-verify-body .ok {
  color: #16803e;
}

.mobile-draw-verify-body .bad {
  color: #c91f1f;
}

.play-summary span {
  font-size: 11px;
  font-weight: 700;
}

.play-bet-tools {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  background: #fff;
  border-bottom: 1px solid #e4e8f0;
}

.play-mobile-betbar label {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #12284d;
  font-size: 13px;
  font-weight: 700;
}

.play-mobile-betbar input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #fbfdff;
  color: #12284d;
}

.play-bet-chip-row,
.play-bet-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.play-bet-chip-row button,
.play-bet-actions button {
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #12284d;
  font-size: 13px;
}

.play-bet-chip-row button {
  border-color: #50d18d;
  box-shadow: inset 0 0 0 2px rgba(80, 209, 141, .18);
}

.play-bet-actions .warn {
  border-color: #ff7d42;
  color: #f05d23;
  background: #fff7f1;
}

.play-bet-actions .primary {
  border-color: #0f75b7;
  background: #0f75b7;
  color: #fff;
}

.play-bet-actions .primary:disabled {
  border-color: #cbd5e1;
  background: #e5e7eb;
  color: #94a3b8;
}

.play-bet-tools p {
  margin: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
}

.play-bet-tools b {
  min-width: 118px;
  padding: 7px 8px;
  border: 1px solid #e0e6ef;
  border-radius: 4px;
  background: #fff;
  color: #ff4b00;
  text-align: center;
}

.play-bet-tools em {
  color: #12284d;
  font-style: normal;
}

.play-odds-layout {
  display: grid;
  grid-template-columns: 78px 1fr;
  min-height: 0;
  background: #fff;
  border-bottom: 1px solid #e3e8f0;
}

.play-side-nav {
  max-height: 480px;
  overflow-y: auto;
  background: #f4f7fb;
  border-right: 1px solid #dbe3ee;
}

.play-side-nav button {
  width: 100%;
  min-height: 46px;
  padding: 4px 6px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #dfe6f0;
  color: #12284d;
  background: #f4f7fb;
  font-size: 13px;
  line-height: 18px;
}

.play-side-nav button.active {
  color: #0bbb63;
  font-weight: 700;
  background: #fff;
  box-shadow: inset 4px 0 0 #12c46d;
}

.play-odds-main {
  min-width: 0;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
}

.play-odds-main h2 {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 32px;
  margin: 0;
  display: grid;
  place-items: center;
  background: #f2f4f8;
  border-bottom: 1px solid #e2e8f0;
  color: #12284d;
  font-size: 13px;
  font-weight: 500;
}

.play-odds-main h2 span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #7d899a;
}

.play-odds-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #edf1f6;
  border-left: 1px solid #edf1f6;
}

.play-odd-cell {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 7px;
  padding: 8px;
  border-right: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
  color: #12284d;
  font-size: 14px;
}

.play-odd-cell b {
  color: #ff1d00;
  font-weight: 500;
}

.play-odd-cell em {
  grid-column: 1 / -1;
  color: #0f8f54;
  font-size: 11px;
  font-style: normal;
  text-align: center;
}

.play-odd-cell.selected {
  background: #fff8e8;
  box-shadow: inset 0 0 0 2px #ffb020;
}

.play-odd-cell.locked {
  color: #94a3b8;
  background: #f8fafc;
}

.play-odds-empty {
  height: 220px;
  display: grid;
  place-items: center;
  color: #98a2b3;
}

.play-record-table {
  width: 100%;
  border-collapse: collapse;
  background: #587464;
  color: #fff;
}

.play-record-table th {
  height: 37px;
  border-right: 1px solid rgba(255,255,255,.55);
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
}

.play-record-table td {
  min-height: 44px;
  padding: 6px 4px;
  border-right: 1px solid #e5e9f0;
  border-bottom: 1px solid #e5e9f0;
  background: #fff;
  color: #111827;
  text-align: center;
  font-size: 12px;
}

.play-record-table td:first-child {
  width: 112px;
}

.play-record-table td:last-child {
  width: 74px;
  color: #ff4b00;
}

.play-record-table td strong {
  font-size: 13px;
  font-weight: 500;
}

.play-record-table td span {
  color: #8a94a6;
  font-size: 11px;
}

.stats-filter-card,
.stats-day-card,
.mobile-form-card,
.member-empty-card,
.member-tip-card,
.rank-reward-card,
.signin-summary,
.signin-calendar,
.signin-users {
  margin: 4px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
}

.stats-filter-card {
  padding: 10px 12px;
}

.stats-filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.stats-filter-line strong {
  margin-right: 4px;
  font-size: 15px;
}

.stats-filter-line button {
  height: 26px;
  padding: 0 9px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}

.stats-filter-line select {
  min-width: 104px;
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #334155;
}

.stats-filter-line .active {
  border-color: #8b65e8;
  background: #8b65e8;
  color: #fff;
}

.stats-total-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
  color: #7b8494;
}

.stats-filter-note {
  margin: 8px 0 0;
  color: #8a6653;
  font-size: 12px;
  line-height: 1.45;
}

.stats-total-grid span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #edf1f6;
  border-radius: 6px;
  background: #f8fafc;
  box-sizing: border-box;
}

.stats-total-grid b {
  display: block;
  margin-top: 5px;
  color: #0d1524;
}

.stats-day-card {
  padding: 0 13px 9px;
}

.stats-day-head {
  min-height: 50px;
  display: grid;
  grid-template-columns: 42px 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid #e5e9f0;
}

.stats-day-head em {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 2px solid #7b8088;
  border-radius: 50%;
  font-style: normal;
}

.stats-day-head span {
  color: #7c8798;
}

.stats-day-card b,
.stats-day-card p {
  color: #0b1220;
}

.stats-day-card p {
  margin: 9px 0 0;
  font-size: 14px;
}

.stats-day-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  padding-top: 10px;
}

.stats-day-detail-grid span {
  min-width: 0;
  color: #7c8798;
  font-size: 13px;
}

.stats-day-detail-grid b {
  display: block;
  margin-top: 4px;
  color: #0b1220;
  overflow-wrap: anywhere;
}

.mobile-form-card {
  margin-top: 0;
  padding: 12px 9px;
}

.mobile-auth-page {
  min-height: 0;
  padding-bottom: 14px;
  background: linear-gradient(180deg, #fff7ed 0%, #f3f4f9 42%, #f3f4f9 100%);
}

.mobile-login-hero,
.mobile-reset-hero {
  margin: 8px 8px 10px;
  min-height: 112px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border: 1px solid #ffd6b7;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 122, 24, .16), rgba(255, 255, 255, .9) 58%),
    #fff;
  box-shadow: 0 5px 16px rgba(255, 122, 24, .12);
}

.mobile-login-hero img,
.mobile-auth-icon {
  width: 66px;
  height: 66px;
  display: block;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}

.mobile-login-hero img {
  object-fit: contain;
}

.mobile-auth-icon {
  position: relative;
  border: 2px solid #ffd4b1;
}

.mobile-auth-icon.reset::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 15px;
  width: 26px;
  height: 22px;
  border: 4px solid #f97316;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.mobile-auth-icon.reset::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  width: 32px;
  height: 23px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff7a18, #ef4444);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.34);
}

.mobile-login-hero span,
.mobile-reset-hero span {
  display: block;
  color: #f36a12;
  font-size: 13px;
  font-weight: 800;
}

.mobile-login-hero strong,
.mobile-reset-hero strong {
  display: block;
  margin-top: 4px;
  color: #162238;
  font-size: 20px;
  line-height: 1.25;
}

.mobile-login-hero em,
.mobile-reset-hero em {
  display: block;
  margin-top: 7px;
  color: #6b7280;
  font-style: normal;
  line-height: 1.45;
}

.mobile-login-card,
.mobile-reset-card,
.mobile-reset-result-card {
  display: grid;
  gap: 12px;
  margin: 0 8px;
  padding: 14px 12px;
  border: 1px solid #e8edf5;
}

.mobile-note-line {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.mobile-login-options {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #5f6b7a;
  font-size: 13px;
}

.mobile-login-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mobile-login-options input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.mobile-login-options button {
  color: #f05f18;
  font-weight: 700;
}

.mobile-reset-result-card {
  text-align: center;
}

.mobile-reset-result-card strong {
  color: #f36a12;
  font-size: 14px;
}

.mobile-reset-result-card b {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #fed7aa;
  border-radius: 5px;
  background: #fff7ed;
  color: #111827;
  font-size: 22px;
  letter-spacing: 0;
}

.mobile-reset-result-card p {
  margin: 0;
  color: #5f6b7a;
  line-height: 1.55;
}

.mobile-form-card label {
  display: grid;
  gap: 9px;
  color: #6e7788;
}

.mobile-form-card input {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #cfd6e2;
  border-radius: 3px;
  font-size: 16px;
}

.mobile-form-card select {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #cfd6e2;
  border-radius: 3px;
  background: #fff;
  font-size: 16px;
}

.mobile-form-card input.locked {
  background: #f3f4f6;
  color: #6b7280;
}

.mobile-inline-note {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 13px;
  text-align: right;
}

.mobile-check-row {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
  gap: 8px !important;
  color: #4b5563;
  font-size: 13px;
}

.mobile-check-row input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.mobile-form-card label em {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: #0f172a;
  font-style: normal;
}

.mobile-profile-card {
  display: grid;
  gap: 12px;
}

.mobile-profile-tip {
  margin: -4px 0 2px;
  color: #7b8494;
  line-height: 1.5;
}

.mobile-profile-required {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 0 6px;
  border: 1px solid #ffd1b5;
  border-radius: 3px;
  background: #fff6ef;
  color: #e85b11;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
}

.mobile-password-card {
  display: grid;
  gap: 12px;
}

.mobile-password-rule {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #e1e6ef;
  border-radius: 4px;
  background: #f6f8fb;
  color: #667085;
  line-height: 1.5;
}

.mobile-password-captcha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 9px;
  align-items: center;
}

.mobile-password-captcha img {
  width: 78px;
  height: 32px;
  border: 1px solid #cfd6e2;
  border-radius: 2px;
  background: #fff;
}

.mobile-security-card {
  display: grid;
  gap: 12px;
}

.mobile-security-tips {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid #e1e6ef;
  border-radius: 4px;
  background: #f6f8fb;
  color: #667085;
  line-height: 1.5;
}

.mobile-security-tips p {
  margin: 0;
}

.mobile-security-tips strong {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 3px;
  background: #fff0f0;
  color: #c53030;
}

.mobile-security-tips strong.ok {
  background: #e7f8ed;
  color: #168346;
}

.mobile-security-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 9px;
  align-items: center;
}

.mobile-security-code button {
  height: 40px;
  border: 0;
  border-radius: 3px;
  background: #2473a8;
  color: #fff;
}

.mobile-security-code button:disabled {
  opacity: .55;
  background: #9ca3af;
}

.mobile-message-page {
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

.mobile-message-tabs span {
  margin-left: 3px;
}

.mobile-message-fee {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #e1e6ef;
  border-radius: 4px;
  background: #f6f8fb;
  color: #667085;
}

.mobile-message-fee b {
  color: #ef4444;
}

.mobile-message-compose {
  display: grid;
  gap: 12px;
}

.mobile-message-compose textarea {
  width: 100%;
  min-height: 118px;
  padding: 10px 13px;
  border: 1px solid #cfd6e2;
  border-radius: 3px;
  font-size: 16px;
  resize: vertical;
}

.mobile-message-captcha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 9px;
  align-items: center;
}

.mobile-message-captcha img {
  width: 78px;
  height: 32px;
  border: 1px solid #cfd6e2;
  border-radius: 2px;
  background: #fff;
}

.mobile-message-toolbar {
  padding: 0 10px 8px;
  display: flex;
  justify-content: flex-end;
}

.mobile-message-toolbar button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #cfd6e2;
  border-radius: 3px;
  background: #fff;
  color: #334155;
}

.mobile-message-list .mobile-log-row {
  cursor: pointer;
}

.mobile-message-list .mobile-log-row.unread {
  background: #fff9eb;
}

.mobile-message-list .mobile-log-row div {
  min-width: 0;
}

.mobile-message-list .mobile-log-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-message-list .mobile-log-row em {
  display: block;
  margin-top: 4px;
  color: #7a8495;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  word-break: break-word;
}

.mobile-message-list .mobile-log-row button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: #e85c5c;
  color: #fff;
}

.mobile-message-detail {
  margin: 0 10px;
  padding: 12px;
  border: 1px solid #cbd8ea;
  border-radius: 6px;
  background: #fff;
}

.mobile-message-detail div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 34px;
  border-bottom: 1px solid #edf1f7;
  align-items: center;
}

.mobile-message-detail span {
  color: #7a8495;
}

.mobile-message-detail b {
  color: #202c3d;
  word-break: break-word;
}

.mobile-message-detail p {
  min-height: 120px;
  margin: 12px 0;
  padding: 10px;
  border-radius: 4px;
  background: #f8fafc;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.secondary-submit.danger {
  border-color: #efb0b0;
  color: #c53030;
}

.mobile-loginlog-page {
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

.mobile-loginlog-list {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.mobile-loginlog-card {
  padding: 12px;
  border: 1px solid #cbd8ea;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 45, 80, .05);
}

.mobile-loginlog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mobile-loginlog-head strong {
  color: #1e293b;
  font-family: Consolas, "Courier New", monospace;
  font-size: 16px;
}

.mobile-loginlog-head span {
  flex: 0 0 auto;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 12px;
}

.mobile-loginlog-head .ok {
  background: #e6f7ed;
  color: #168346;
}

.mobile-loginlog-head .fail {
  background: #fff0f0;
  color: #c53030;
}

.mobile-loginlog-card p {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  margin: 4px 0;
  line-height: 22px;
}

.mobile-loginlog-card em {
  color: #7b8494;
  font-style: normal;
}

.mobile-loginlog-card b {
  color: #26364b;
  font-weight: 500;
  word-break: break-word;
}

.mobile-loginlog-card time {
  display: block;
  margin-top: 8px;
  color: #7b8494;
  font-size: 12px;
}

.primary-submit,
.secondary-submit {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border-radius: 3px;
}

.primary-submit {
  background: #e55252;
  color: #fff;
  font-size: 18px;
}

.secondary-submit {
  border: 1px solid #cdd3dd;
  background: #fff;
  font-size: 17px;
}

.primary-submit:disabled,
.secondary-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.mobile-note-box {
  margin-top: 20px;
  padding: 9px 10px;
  border-radius: 6px;
  background: #f1f7ff;
  font-size: 12px;
  line-height: 22px;
}

.mobile-note-box p {
  margin: 0;
}

.mobile-welfare-code-hero {
  min-height: 72px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ffe0c2;
  border-radius: 7px;
  background: linear-gradient(135deg, #fff7ed, #f7fbff);
}

.mobile-welfare-code-hero i {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(135deg, #ff7a18, #f94b2f);
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

.mobile-welfare-code-hero i::before,
.mobile-welfare-code-hero i::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  height: 4px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 9px #fff, 0 18px #fff;
}

.mobile-welfare-code-hero i::before {
  top: 12px;
}

.mobile-welfare-code-hero i::after {
  left: 28px;
  right: auto;
  top: 12px;
  width: 4px;
  height: 22px;
  box-shadow: none;
}

.mobile-welfare-code-hero strong {
  display: block;
  color: #172033;
  font-size: 17px;
}

.mobile-welfare-code-hero span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.mobile-welfare-record-list .mobile-log-row em {
  margin-top: 4px;
  color: #16a34a;
  font-style: normal;
  font-size: 12px;
}

.member-empty-card {
  height: 172px;
  display: flex;
  align-items: center;
  padding: 0 36px;
  position: relative;
  border: 1px solid #cbd8ea;
}

.member-empty-card span {
  width: 33px;
  height: 25px;
  margin-right: 10px;
  background: currentColor;
  color: #59616e;
  clip-path: polygon(20% 0, 80% 0, 100% 38%, 50% 100%, 0 38%);
}

.member-empty-card strong {
  font-size: 21px;
  color: #384154;
  font-weight: 500;
}

.member-empty-card i {
  margin-left: auto;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0 32%, #7cc2ff 34% 50%, transparent 52%);
  position: relative;
}

.member-empty-card i::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 8px;
  width: 42px;
  height: 10px;
  border-radius: 50%;
  background: #cbe8ff;
}

.member-tip-card {
  padding: 10px 16px;
  background: #fff6f0;
  line-height: 26px;
  font-size: 12px;
}

.member-tip-card p {
  margin: 0;
}

.rank-reward-card {
  padding: 6px;
  border: 1px solid #cbd8ea;
}

.rank-reward-card table,
.signin-users table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.rank-reward-card th,
.rank-reward-card td,
.signin-users th,
.signin-users td {
  height: 34px;
  border: 1px solid #c8d8ee;
  font-weight: 400;
}

.rank-reward-card th,
.signin-users th {
  background: #f2f8ff;
}

.rank-reward-card b {
  color: #ff5400;
}

.mobile-rank-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.mobile-rank-type-tabs button {
  height: 34px;
  border: 1px solid #d6e1ef;
  border-radius: 5px;
  background: #fff;
  color: #314257;
  font-size: 13px;
}

.mobile-rank-type-tabs button.active {
  border-color: #ff7b3d;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 800;
}

.mobile-rank-reward-card td em {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8f8f0;
  color: #149160;
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
}

.rank-time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 45px;
  align-items: center;
  padding: 0 5px;
  line-height: 22px;
}

.rank-time span:last-child {
  text-align: right;
}

.rank-time em {
  display: inline-block;
  padding: 0 4px;
  border-radius: 8px;
  background: #13b9d3;
  color: #fff;
  font-style: normal;
}

.mobile-pager {
  display: flex;
  width: max-content;
  max-width: calc(100% - 16px);
  align-self: center;
  margin: 8px auto;
  justify-content: center;
  text-align: center;
  border: 1px solid #b8bec9;
  border-radius: 3px;
  overflow: hidden;
}

.mobile-pager button,
.mobile-pager span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-right: 1px solid #b8bec9;
  background: #fff;
}

.mobile-pager button:last-child {
  border-right: 0;
}

.signin-summary {
  margin: 10px 10px 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-radius: 10px;
  background: #fff;
  line-height: 1.4;
}

.signin-summary div {
  min-height: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 8px;
  background: #fff6ee;
}

.signin-summary span,
.signin-summary em {
  color: #7a6659;
  font-style: normal;
  font-size: 12px;
}

.signin-summary b,
.signin-summary strong {
  color: #ff4a00;
}

.signin-summary b {
  font-size: 21px;
}

.signin-summary p {
  grid-column: 1 / -1;
  margin: 0;
  color: #4d3b2f;
  font-size: 12px;
}

.signin-calendar {
  margin: 0 10px 8px;
  padding: 6px;
  border: 1px solid #c8d8ee;
  border-radius: 9px;
  background: #fff;
}

.cal-title {
  height: 35px;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  text-align: center;
  background: #f2f8ff;
  border: 1px solid #c8d8ee;
  border-bottom: 0;
}

.cal-title button {
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: #d92e3b;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.cal-week,
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid #c8d8ee;
}

.cal-week span,
.cal-days span {
  min-height: 35px;
  display: grid;
  place-items: center;
  border-right: 1px solid #c8d8ee;
  border-bottom: 1px solid #c8d8ee;
}

.cal-days span {
  min-height: 47px;
  align-content: center;
  gap: 3px;
  color: #475467;
}

.cal-days span.empty {
  background: #fffaf5;
}

.cal-days span.today {
  color: #e95a0c;
  font-weight: 700;
}

.cal-days span.future {
  color: #b5bdc9;
}

.cal-days i {
  width: 16px;
  height: 16px;
  background: #d9dde4;
  clip-path: polygon(12% 25%, 88% 25%, 88% 100%, 12% 100%);
}

.cal-days .signed i {
  background: #28b36b;
}

.signin-tip {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  background: #fff6ee;
  color: #6b4b35;
  font-size: 12px;
}

.signin-users {
  margin: 0 10px 8px;
  overflow: hidden;
  border: 1px solid #c8d8ee;
  border-radius: 9px;
  background: #fff;
}

.signin-users h2 {
  margin: 0;
  height: 36px;
  display: grid;
  place-items: center;
  background: #f2f8ff;
  border-bottom: 1px solid #c8d8ee;
  font-size: 14px;
}

.signin-users em {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 10px;
  background: #e5e7eb;
  font-style: normal;
  font-size: 10px;
}

.signin-rule-note {
  margin-bottom: 8px;
}

.signin-rule-list {
  display: grid;
  gap: 8px;
}

.signin-rule-list article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #f0d8c6;
  border-radius: 8px;
  background: #fff;
}

.signin-rule-list article.current {
  border-color: #ff9d3e;
  background: #fff8ef;
}

.signin-rule-list strong {
  color: #e95a0c;
  font-size: 15px;
}

.signin-rule-list span {
  color: #715c4d;
  font-size: 12px;
}

.signin-rule-list p {
  margin: 0;
  color: #39475c;
  line-height: 1.55;
}

.mobile-first-charge-page {
  background: #f6f7fb;
}

.mobile-first-charge-hero {
  margin: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8ef 0%, #ffffff 56%, #eef7ff 100%);
  border: 1px solid #f3d7be;
}

.mobile-first-charge-hero > i {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff8a1f, #18b6a5);
  position: relative;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.45);
}

.mobile-first-charge-hero > i::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 15px;
  width: 26px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 5px;
}

.mobile-first-charge-hero > i::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 12px;
  width: 3px;
  height: 30px;
  background: #fff;
  box-shadow: -9px 5px 0 -1px #fff, 9px 5px 0 -1px #fff;
}

.mobile-first-charge-hero div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mobile-first-charge-hero span {
  width: max-content;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef6f1;
  color: #16814f;
  font-size: 12px;
}

.mobile-first-charge-hero span.status-off {
  background: #f1f3f6;
  color: #7a8493;
}

.mobile-first-charge-hero span.status-wait {
  background: #fff2d8;
  color: #aa6700;
}

.mobile-first-charge-hero strong {
  color: #213047;
  font-size: 18px;
}

.mobile-first-charge-hero em {
  color: #687385;
  font-size: 12px;
  font-style: normal;
}

.mobile-first-rule-card,
.mobile-first-progress-card,
.mobile-first-records {
  margin: 0 10px 10px;
  padding: 12px;
  border: 1px solid #e4d3c4;
  border-radius: 10px;
  background: #fff;
}

.mobile-first-rule-card h2,
.mobile-first-progress-card h2,
.mobile-first-records h2 {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #27364b;
  font-size: 15px;
}

.mobile-first-rule-card h2 i {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff8a1f, #ffcf58);
  position: relative;
}

.mobile-first-rule-card h2 i::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 7px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(35deg);
}

.mobile-first-rule-card p {
  margin: 0 0 7px;
  color: #445269;
  line-height: 1.65;
  font-size: 12px;
}

.mobile-first-rule-card p span {
  color: #f04438;
}

.mobile-first-meta {
  margin-top: 9px;
  display: grid;
  gap: 6px;
}

.mobile-first-meta span {
  padding: 8px;
  border-radius: 7px;
  background: #f8fafc;
  color: #586579;
  font-size: 12px;
}

.mobile-first-meta b {
  color: #162133;
}

.mobile-first-meta b.on {
  color: #16a05d;
}

.mobile-first-meta b.off {
  color: #8b94a3;
}

.mobile-first-meta b.wait {
  color: #b56800;
}

.mobile-first-progress-card h2 {
  justify-content: space-between;
}

.mobile-first-progress-card h2 em {
  color: #8b6570;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.mobile-first-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mobile-first-progress-grid span {
  min-height: 54px;
  padding: 7px 4px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #f4f8ff;
  color: #5a6778;
  font-size: 12px;
  text-align: center;
}

.mobile-first-progress-grid b {
  max-width: 100%;
  color: #ff5a00;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mobile-first-warning {
  margin: 9px 0 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: #fff5eb;
  color: #b45a00;
  font-size: 12px;
}

.mobile-first-progress-row {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid #e6edf7;
  border-radius: 8px;
  background: #fcfdff;
}

.mobile-first-progress-row.done {
  border-color: #9ee4bd;
  background: #f4fff8;
}

.mobile-first-progress-row header,
.mobile-first-progress-row footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #526173;
  font-size: 12px;
}

.mobile-first-progress-row header strong {
  color: #223049;
}

.mobile-first-progress-row header span {
  color: #ff5a00;
}

.mobile-first-progress-row header em {
  color: #16814f;
  font-style: normal;
}

.mobile-first-progress-row i {
  margin: 8px 0;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #edf0f5;
  overflow: hidden;
}

.mobile-first-progress-row i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a1f, #18b6a5);
}

.mobile-first-record-list {
  display: grid;
  gap: 8px;
}

.mobile-first-record-card {
  padding: 10px;
  display: grid;
  gap: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fbfcff;
}

.mobile-first-record-card header,
.mobile-first-record-card p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #576476;
  font-size: 12px;
}

.mobile-first-record-card header strong {
  color: #1e2b3d;
  font-size: 14px;
}

.mobile-first-record-card header span {
  color: #16a05d;
}

.mobile-first-record-card b {
  max-width: 62%;
  color: #253246;
  text-align: right;
  overflow-wrap: anywhere;
}

.mobile-first-record-card b.hot {
  color: #ff5a00;
}

.mobile-loss-rebate-page {
  background: #f6f7fb;
}

.mobile-loss-rebate-hero {
  margin: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff3f1 0%, #ffffff 56%, #eef6ff 100%);
  border: 1px solid #f0c8c2;
}

.mobile-loss-rebate-hero > i {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: linear-gradient(135deg, #ef4444, #3b82f6);
  position: relative;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.45);
}

.mobile-loss-rebate-hero > i::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 13px;
  width: 24px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 14px 14px 5px 5px;
}

.mobile-loss-rebate-hero > i::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 15px;
  height: 15px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(45deg);
}

.mobile-loss-rebate-hero div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mobile-loss-rebate-hero span {
  width: max-content;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef6f1;
  color: #16814f;
  font-size: 12px;
}

.mobile-loss-rebate-hero span.status-off {
  background: #f1f3f6;
  color: #7a8493;
}

.mobile-loss-rebate-hero span.status-wait {
  background: #fff2d8;
  color: #aa6700;
}

.mobile-loss-rebate-hero strong {
  color: #213047;
  font-size: 18px;
}

.mobile-loss-rebate-hero em {
  color: #687385;
  font-size: 12px;
  font-style: normal;
}

.mobile-loss-rule-card,
.mobile-loss-progress-card,
.mobile-loss-records {
  margin: 0 10px 10px;
  padding: 12px;
  border: 1px solid #e4d3c4;
  border-radius: 10px;
  background: #fff;
}

.mobile-loss-rule-card h2,
.mobile-loss-progress-card h2,
.mobile-loss-records h2 {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #27364b;
  font-size: 15px;
}

.mobile-loss-rule-card h2 i {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ef4444, #ffae57);
  position: relative;
}

.mobile-loss-rule-card h2 i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.mobile-loss-rule-card p {
  margin: 0 0 7px;
  color: #445269;
  line-height: 1.65;
  font-size: 12px;
}

.mobile-loss-rule-card p span {
  color: #f04438;
}

.mobile-loss-meta {
  margin-top: 9px;
  display: grid;
  gap: 6px;
}

.mobile-loss-meta span {
  padding: 8px;
  border-radius: 7px;
  background: #f8fafc;
  color: #586579;
  font-size: 12px;
}

.mobile-loss-meta b {
  color: #162133;
}

.mobile-loss-meta b.on {
  color: #16a05d;
}

.mobile-loss-meta b.off {
  color: #8b94a3;
}

.mobile-loss-meta b.wait {
  color: #b56800;
}

.mobile-loss-progress-card h2 {
  justify-content: space-between;
}

.mobile-loss-progress-card h2 em {
  color: #8b6570;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.mobile-loss-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mobile-loss-progress-grid span {
  min-height: 54px;
  padding: 7px 4px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #fff6f6;
  color: #5a6778;
  font-size: 12px;
  text-align: center;
}

.mobile-loss-progress-grid b {
  max-width: 100%;
  color: #ef4444;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mobile-loss-warning {
  margin: 9px 0 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: #fff5eb;
  color: #b45a00;
  font-size: 12px;
}

.mobile-loss-progress-row {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid #e6edf7;
  border-radius: 8px;
  background: #fcfdff;
}

.mobile-loss-progress-row.done {
  border-color: #9ee4bd;
  background: #f4fff8;
}

.mobile-loss-progress-row header,
.mobile-loss-progress-row footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #526173;
  font-size: 12px;
}

.mobile-loss-progress-row header strong {
  color: #223049;
}

.mobile-loss-progress-row header span {
  color: #ef4444;
}

.mobile-loss-progress-row header em {
  color: #16814f;
  font-style: normal;
}

.mobile-loss-progress-row i {
  margin: 8px 0;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #edf0f5;
  overflow: hidden;
}

.mobile-loss-progress-row i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #3b82f6);
}

.mobile-loss-record-list {
  display: grid;
  gap: 8px;
}

.mobile-loss-record-card {
  padding: 10px;
  display: grid;
  gap: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fbfcff;
}

.mobile-loss-record-card header,
.mobile-loss-record-card p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #576476;
  font-size: 12px;
}

.mobile-loss-record-card header strong {
  color: #1e2b3d;
  font-size: 14px;
}

.mobile-loss-record-card header span {
  color: #16a05d;
}

.mobile-loss-record-card b {
  max-width: 62%;
  color: #253246;
  text-align: right;
  overflow-wrap: anywhere;
}

.mobile-loss-record-card b.hot {
  color: #ef4444;
}

.nav-home::before {
  left: 2px;
  top: 9px;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-top: 0;
}

.nav-home::after {
  left: 4px;
  top: 3px;
  width: 15px;
  height: 15px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.nav-agent::before {
  left: 3px;
  top: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 11px 0 0 -2px #fff, 11px 0 0 0 currentColor;
}

.nav-agent::after {
  left: 1px;
  bottom: 3px;
  width: 20px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 8px 8px 2px 2px;
}

.nav-game::before {
  left: 2px;
  top: 7px;
  width: 20px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 7px;
}

.nav-game::after {
  left: 7px;
  top: 12px;
  width: 10px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}

.nav-mall::before {
  left: 5px;
  top: 8px;
  width: 14px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

.nav-mall::after {
  left: 8px;
  top: 4px;
  width: 8px;
  height: 7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.nav-mine::before {
  left: 8px;
  top: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-mine::after {
  left: 4px;
  bottom: 2px;
  width: 16px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 10px 10px 2px 2px;
}

.mobile-bottom-nav i {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f5f7fb);
  box-shadow: inset 0 0 0 1px rgba(131, 141, 157, .22);
}

.mobile-bottom-nav button.active i {
  background: linear-gradient(135deg, #fff1e7, #ffd7be);
  box-shadow: inset 0 0 0 1px rgba(255, 131, 64, .35), 0 5px 12px rgba(225, 92, 30, .14);
}

.nav-home::before,
.nav-agent::before,
.nav-game::before,
.nav-mall::before,
.nav-mine::before,
.nav-home::after,
.nav-agent::after,
.nav-game::after,
.nav-mall::after,
.nav-mine::after {
  box-sizing: border-box;
}

.nav-home::before {
  left: 7px;
  top: 12px;
  width: 14px;
  height: 10px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.nav-home::after {
  left: 8px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.nav-agent::before {
  left: 6px;
  top: 8px;
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 10px 0 0 -2px #fff, 10px 0 0 0 currentColor, 5px 10px 0 -2px #fff, 5px 10px 0 0 currentColor;
}

.nav-agent::after {
  left: 10px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.nav-game::before {
  left: 5px;
  top: 9px;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.nav-game::after {
  left: 11px;
  top: 13px;
  width: 6px;
  height: 2px;
  background: currentColor;
  box-shadow: -3px 3px 0 0 currentColor, 7px -2px 0 1px currentColor;
}

.nav-mall::before {
  left: 7px;
  top: 11px;
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.nav-mall::after {
  left: 10px;
  top: 7px;
  width: 8px;
  height: 7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.nav-mine::before {
  left: 10px;
  top: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-mine::after {
  left: 7px;
  top: 17px;
  width: 14px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 10px 10px 4px 4px;
}

/* GO28-like orange mobile theme and image-forward game layout. */
.mobile-shell {
  background: #f6f2ee;
}

.mobile-home-top,
.mobile-titlebar {
  border-bottom-color: #f1d5bf;
}

.mobile-brand strong {
  color: #2b241f;
}

.mobile-user-pill {
  border-color: #31261f;
  box-shadow: inset 0 -1px 0 rgba(255, 122, 24, .18);
}

.mobile-menu-dot::before,
.mobile-menu-dot::after,
.mobile-menu-dot span,
.play-more::before,
.play-more::after,
.play-more span {
  background: var(--mobile-primary);
}

.play-more {
  background: radial-gradient(circle at 13px 21px, var(--mobile-primary) 0 2px, transparent 3px);
}

.mobile-hero {
  height: 212px;
  background:
    radial-gradient(circle at 15% 84%, rgba(255, 221, 153, .72) 0 18%, transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 249, 218, .8) 0 17%, transparent 31%),
    linear-gradient(105deg, #ffb14b 0%, #ff8021 48%, #ffe2a8 100%);
}

.mobile-hero-slide {
  background-size: cover;
}

.mobile-hero-copy {
  text-shadow: 0 2px 6px rgba(116, 49, 4, .28);
}

.mobile-hero-dots button.active,
.mobile-hero-dots i:first-child {
  background: var(--mobile-primary);
}

.mobile-notice {
  border-bottom-color: #f0d6c4;
}

.mobile-notice i {
  background: linear-gradient(135deg, #ffb33f, #ff6b17);
}

.mobile-notice button {
  border-color: var(--mobile-primary-line);
  color: var(--mobile-primary-dark);
}

.mobile-home-actions {
  border-bottom-color: #f0d7c4;
}

.action-icon.ad {
  background: linear-gradient(135deg, #ffcf88, #f19535);
}

.action-icon.gift {
  background: linear-gradient(135deg, #ffd9a1, #ff7a18);
}

.action-icon.forum {
  background: linear-gradient(135deg, #9b86ff, #5a45d8);
}

.action-icon.notice {
  background: linear-gradient(135deg, #ffad62, #ea5211);
}

.action-icon.rank {
  background: linear-gradient(135deg, #ffe0a7, #f6a21e);
}

.mobile-category-tabs {
  background: #fff8f1;
  border-bottom-color: #f0d8c6;
}

.mobile-category-tabs button {
  background: #f2ece7;
}

.mobile-category-tabs button.active {
  background: var(--mobile-primary-soft);
  color: var(--mobile-primary-dark);
}

.mobile-home-games {
  border-top-color: #f0d8c6;
}

.mobile-home-games button {
  border-right-color: #f0d8c6;
  border-bottom-color: #f0d8c6;
}

.mobile-game-logo {
  background: linear-gradient(145deg, #fff, #fff1df);
  box-shadow: inset 0 0 0 1px #f3c397;
}

.round-back {
  background: linear-gradient(135deg, #ff9d3e, #e94f0c);
}

.mobile-filter-tabs button.active,
.mobile-line-tabs button.active {
  color: var(--mobile-primary-dark);
  border-bottom-color: var(--mobile-primary);
}

.mobile-hall-mode-tabs {
  background: #fff7ef;
  border-bottom-color: #f0d8c6;
}

.mobile-hall-mode-tabs button {
  border-color: #f0c9ab;
  background: #fffaf5;
  color: #6f4b35;
}

.mobile-hall-mode-tabs button.active {
  border-color: var(--mobile-primary);
  background: linear-gradient(135deg, #ff9d3e, #e94f0c);
  color: #fff;
}

.mobile-bottom-nav {
  border-top-color: #e8cbb4;
}

.mobile-bottom-nav button.active {
  color: var(--mobile-primary-dark);
}

.mobile-game-hall {
  grid-template-columns: 86px 1fr;
  background: #fff;
}

.mobile-game-side {
  background: #fff7ef;
  border-right-color: #f0d8c6;
}

.mobile-game-side button {
  min-height: 44px;
  background: #fff9f2;
  border-bottom-color: #f1dccb;
  color: #3c2a1f;
}

.mobile-game-side button.active {
  background: #fff;
  color: var(--mobile-primary-dark);
  box-shadow: none;
}

.mobile-game-side button.active::after {
  background: var(--mobile-primary);
}

.route-games .mobile-game-page {
  min-height: 0;
  padding-bottom: 0;
  background: #fff;
}

.route-games .mobile-game-hall {
  height: auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content max-content;
  align-content: start;
}

.route-games .mobile-game-side {
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  padding: 7px 8px 6px;
  border-right: 0;
  border-bottom: 1px solid #f0d8c6;
}

.route-games .mobile-game-side button {
  min-height: 34px;
  height: 34px;
  padding: 0 4px;
  border: 1px solid #f1dccb;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.route-games .mobile-game-side button.active {
  border-color: var(--mobile-primary);
  background: #fff;
}

.route-games .mobile-game-side button.active::after {
  display: none;
}

.route-games .mobile-game-main {
  min-height: 0;
  padding-bottom: 10px;
}

.mobile-game-main {
  background: #fff;
}

.mobile-game-main h2 {
  color: #c48a62;
}

.mobile-game-main h2 span {
  border-top-color: #f4dac4;
}

.route-games .mobile-hall-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.route-games .mobile-hall-grid button {
  height: 98px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 86% 42%, rgba(255, 255, 255, .85) 0 0, transparent 29px),
    linear-gradient(120deg, #fff9ef 0%, #ffe5c0 46%, #f9b767 100%);
  box-shadow: 0 2px 7px rgba(112, 63, 20, .2);
}

.route-games .mobile-hall-grid button::before,
.mobile-picker-grid button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255,255,255,.42), transparent 46%),
    radial-gradient(circle at 94% 10%, rgba(255,255,255,.58) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.5) 0 7px, transparent 8px);
  pointer-events: none;
}

.mobile-hall-grid strong {
  color: #d83218;
}

.mobile-hall-grid small {
  position: absolute;
  left: 9px;
  top: 34px;
  max-width: 58%;
  color: #9c6f4c;
  font-size: 10px;
  line-height: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.route-games .mobile-hall-grid span {
  right: 14px;
  bottom: 14px;
  width: 62px;
  height: 62px;
}

.route-games .mobile-hall-grid img,
.route-games .mobile-hall-grid i {
  width: 62px;
  height: 62px;
}

.route-games .mobile-game-cover-card.entertainment span {
  right: 15px;
  bottom: 17px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .22);
}

.route-games .mobile-hall-grid .mobile-ent-provider-logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: contain;
  background: #f6f8fb;
  box-shadow: 0 2px 5px rgba(54, 38, 21, .16);
}

.mobile-hall-grid button.active {
  box-shadow: 0 0 0 2px var(--mobile-primary), 0 5px 12px rgba(112, 63, 20, .18);
}

.mobile-game-cover-card.box-dodge {
  background:
    radial-gradient(circle at 82% 44%, rgba(255,255,255,.88) 0 0, transparent 34px),
    linear-gradient(120deg, #fff7d6 0%, #ffd77a 48%, #e77c27 100%);
}

.mobile-game-cover-card.box-dodge span {
  border-color: rgba(255,255,255,.8);
  background: linear-gradient(145deg, #db3f2a, #7a2718);
  box-shadow: inset 0 2px 8px rgba(255,255,255,.25), 0 8px 16px rgba(121,39,24,.24);
}

.mobile-game-cover-card.box-dodge i {
  display: grid;
  place-items: center;
  color: #fff8d0;
  font-size: 24px;
  font-weight: 900;
  background: transparent;
}

.mobile-game-picker header button:last-child {
  color: var(--mobile-primary-dark);
}

.mobile-game-picker .mobile-game-side button.active {
  color: var(--mobile-primary-dark);
  box-shadow: none;
}

.mobile-picker-grid button {
  background: linear-gradient(145deg, #fff, #fff1df);
  box-shadow: 0 2px 7px rgba(112, 63, 20, .14);
}

.mobile-picker-grid small {
  max-width: 50%;
}

.route-box-dodge .mobile-bottom-nav button:nth-child(3) {
  color: #e53935;
}

.mobile-box-dodge-page {
  min-height: 0;
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
  background: #f2f4f8;
}

.mobile-box-dodge-page .mobile-titlebar {
  background: #fff;
  box-shadow: 0 1px 6px rgba(15,23,42,.08);
}

.box-dodge-hero {
  margin: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #e4d6c2;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff7df, #fff);
}

.box-dodge-hero div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 12px;
  border-right: 1px solid #efe2cf;
  border-bottom: 1px solid #efe2cf;
}

.box-dodge-hero div:nth-child(2n) {
  border-right: 0;
}

.box-dodge-hero div:nth-child(n+3) {
  border-bottom: 0;
}

.box-dodge-hero span {
  color: #755c43;
  font-size: 12px;
}

.box-dodge-hero strong {
  color: #e55719;
  font-size: 15px;
}

.box-dodge-panel {
  margin: 10px;
  border: 1px solid #dde5ef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.box-dodge-panel > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  border-bottom: 1px solid #e7edf5;
  background: #fbfcff;
}

.box-dodge-panel h2 {
  margin: 0;
  color: #172033;
  font-size: 15px;
}

.box-dodge-panel header button {
  height: 27px;
  padding: 0 10px;
  border: 1px solid #d7e0ec;
  border-radius: 4px;
  background: #fff;
  color: #276bba;
  font-size: 12px;
}

.box-card-grid {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.box-open-card {
  min-height: 128px;
  position: relative;
  padding: 12px 12px 12px 86px;
  border-radius: 8px;
  border: 1px solid #f0dec3;
  background: linear-gradient(135deg, #fffaf0, #fff2d2);
}

.box-open-card.silver {
  border-color: #d9e2ee;
  background: linear-gradient(135deg, #f9fbff, #e9eef7);
}

.box-open-card.bronze {
  border-color: #efd3bf;
  background: linear-gradient(135deg, #fff8f2, #f3d5bc);
}

.box-open-card > i {
  position: absolute;
  left: 18px;
  top: 26px;
  width: 48px;
  height: 42px;
  border-radius: 9px 9px 7px 7px;
  background: linear-gradient(145deg, #ffcf56, #c57a16);
  box-shadow: inset 0 6px rgba(255,255,255,.25), 0 7px 12px rgba(128,72,16,.18);
}

.box-open-card.silver > i {
  background: linear-gradient(145deg, #dce6f2, #8fa0b8);
}

.box-open-card.bronze > i {
  background: linear-gradient(145deg, #d59668, #8d4f32);
}

.box-open-card > i::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -12px;
  width: 28px;
  height: 18px;
  border: 6px solid rgba(255,255,255,.78);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}

.box-open-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.box-open-card p {
  margin: 3px 0;
  color: #6b7280;
  font-size: 12px;
}

.box-open-card label,
.box-dodge-form label,
.dodge-open-list label {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.box-open-card label span,
.box-dodge-form label span,
.dodge-open-list label span {
  flex: 0 0 auto;
  color: #566173;
  font-size: 12px;
}

.box-open-card input,
.box-dodge-form input,
.dodge-open-list input {
  min-width: 0;
  flex: 1;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #cfd8e5;
  border-radius: 5px;
  background: #fff;
}

.box-open-card button,
.dodge-open-list article > button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 32px;
  padding: 0 12px;
  border-radius: 5px;
  background: #ee5b23;
  color: #fff;
  font-weight: 700;
}

.box-open-card button:disabled,
.dodge-open-list article > button:disabled,
.box-dodge-form .primary-submit:disabled {
  background: #b8c0cc;
}

.box-dodge-form {
  padding: 10px;
  display: grid;
  gap: 9px;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.choice-row button {
  height: 34px;
  border: 1px solid #d5dee9;
  border-radius: 5px;
  background: #fff;
  color: #344054;
}

.choice-row button.active {
  border-color: #ef6a24;
  background: #fff2e8;
  color: #d54817;
  font-weight: 800;
}

.choice-row.small button {
  height: 30px;
  font-size: 12px;
}

.box-dodge-form p {
  margin: 0;
  color: #7a4f2e;
  font-size: 12px;
}

.dodge-open-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.dodge-open-list article {
  position: relative;
  padding: 10px;
  border: 1px solid #e1e8f1;
  border-radius: 7px;
  background: #fcfdff;
}

.dodge-row-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 8px;
}

.dodge-row-main strong {
  color: #172033;
  font-size: 14px;
}

.dodge-row-main span {
  color: #7b8494;
  font-size: 12px;
}

.dodge-row-main b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #e64e16;
}

.dodge-open-list article > button {
  position: static;
  width: 100%;
  margin-top: 9px;
}

.box-record-list {
  padding: 4px 10px 10px;
}

.box-record-list div {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #eef2f6;
  color: #344054;
  font-size: 12px;
}

.box-record-list div:last-child {
  border-bottom: 0;
}

.box-record-list b {
  flex: 0 0 auto;
  color: #ef5b16;
}

.box-record-list p {
  margin: 14px 0 8px;
  color: #7b8494;
  text-align: center;
}

.mobile-play-top {
  background: #fffaf5;
  border-bottom-color: #f0d8c6;
}

.play-tool-icons i {
  color: #8a6a55;
}

.play-title-button span {
  background: linear-gradient(90deg, #ff6b17 0 50%, #fff 50%);
  border-color: #f2c1a0;
}

.play-title-button i {
  border-top-color: var(--mobile-primary-dark);
}

.play-money {
  color: var(--mobile-primary-dark);
}

.play-tabs {
  background: linear-gradient(90deg, #f08b2d, #e86a16);
}

.play-tabs button.active {
  color: var(--mobile-primary-dark);
}

.play-summary b,
.play-record-table td:last-child,
.mobile-log-row b {
  color: var(--mobile-primary-dark);
}

.play-draw-row,
.play-summary,
.play-bet-tools {
  border-bottom-color: #f0d8c6;
}

.play-stepper button,
.play-stepper em {
  background: #fff1df;
  color: #9a6230;
}

.play-odds-layout {
  grid-template-columns: 78px 1fr;
  border-bottom-color: #f0d8c6;
}

.play-side-nav {
  background: #fff7ef;
  border-right-color: #f0d8c6;
}

.play-side-nav button {
  background: #fff8f1;
  border-bottom-color: #f0d8c6;
  color: #3c2a1f;
}

.play-side-nav button.active {
  color: var(--mobile-primary-dark);
  box-shadow: inset 4px 0 0 var(--mobile-primary);
}

.play-odds-main h2 {
  background: #fff6ee;
  border-bottom-color: #f0d8c6;
  color: #4a2f1f;
}

.play-odds-main h2 span {
  border-top-color: #c8844e;
}

.play-odds-grid {
  border-top-color: #f3dfcf;
  border-left-color: #f3dfcf;
}

.play-odd-cell {
  border-right-color: #f3dfcf;
  border-bottom-color: #f3dfcf;
}

.play-odd-cell b {
  color: #e04510;
}

.play-record-table {
  background: linear-gradient(90deg, #f08b2d, #e86a16);
}

.play-record-table td {
  border-right-color: #f0d8c6;
  border-bottom-color: #f0d8c6;
}

.mobile-wallet-submit {
  background: linear-gradient(90deg, #ff9d3e, #e95a0c);
}

.mobile-wallet-quick .blue {
  background: var(--mobile-primary-dark);
  border-color: var(--mobile-primary-dark);
}

.mobile-game-cover-card {
  isolation: isolate;
  position: relative;
}

.mobile-game-cover-card::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background-image: var(--game-card-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .16;
  filter: saturate(1.08);
  pointer-events: none;
}

.mobile-game-cover-card::before {
  z-index: 1;
}

.mobile-game-cover-card strong,
.mobile-game-cover-card small,
.mobile-game-cover-card span {
  z-index: 2;
}

.route-games .mobile-game-cover-card {
  border: 1px solid rgba(255, 175, 97, .55);
}

.route-games .mobile-game-cover-card::after {
  right: 28px;
  bottom: 8px;
  width: 112px;
  height: 112px;
  opacity: .18;
}

.route-games .mobile-game-cover-card.disabled,
.mobile-picker-grid .mobile-game-cover-card.disabled {
  filter: grayscale(.4);
  opacity: .62;
}

.route-games .mobile-game-cover-card.tone-2 {
  background:
    radial-gradient(circle at 82% 48%, rgba(255,255,255,.78) 0 0, transparent 31px),
    linear-gradient(120deg, #fff6e8 0%, #ffd49e 48%, #ff9d3e 100%);
}

.route-games .mobile-game-cover-card.tone-3 {
  background:
    radial-gradient(circle at 82% 48%, rgba(255,255,255,.78) 0 0, transparent 31px),
    linear-gradient(120deg, #fff9ef 0%, #ffe2b9 50%, #f3b75a 100%);
}

.route-games .mobile-game-cover-card.tone-4 {
  background:
    radial-gradient(circle at 82% 48%, rgba(255,255,255,.78) 0 0, transparent 31px),
    linear-gradient(120deg, #fff4e9 0%, #ffd2b0 48%, #ff8750 100%);
}

.route-games .mobile-game-cover-card.tone-5 {
  background:
    radial-gradient(circle at 82% 48%, rgba(255,255,255,.78) 0 0, transparent 31px),
    linear-gradient(120deg, #fffaf0 0%, #ffe8bf 48%, #eda94b 100%);
}

.route-games .mobile-game-cover-card.tone-6 {
  background:
    radial-gradient(circle at 82% 48%, rgba(255,255,255,.78) 0 0, transparent 31px),
    linear-gradient(120deg, #fff5ee 0%, #ffc99a 48%, #f36a24 100%);
}

.play-mobile-function {
  margin: 8px 8px 0;
  padding: 13px;
  border: 1px solid #f0d8c6;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 247, 239, .96), rgba(255, 255, 255, .98)),
    radial-gradient(circle at right top, rgba(255, 166, 68, .26), transparent 42%);
  box-shadow: 0 3px 12px rgba(112, 63, 20, .08);
}

.play-mobile-function h2 {
  margin: 0 0 8px;
  color: #3c2a1f;
  font-size: 16px;
}

.play-function-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.play-function-head h2 {
  margin: 0;
}

.play-function-head p {
  margin: 3px 0 0;
  color: #9a7058;
  font-size: 12px;
  line-height: 1.35;
}

.play-function-head button {
  min-width: 72px;
  height: 32px;
  border: 1px solid #ffb071;
  border-radius: 999px;
  background: #fff7ef;
  color: #e65c10;
  font-weight: 700;
}

.play-function-symbol {
  width: 42px;
  height: 42px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffb35f, #f15d16);
  box-shadow: 0 8px 16px rgba(233, 91, 12, .2);
}

.play-function-symbol::before,
.play-function-symbol::after {
  content: "";
  position: absolute;
}

.play-function-symbol.rule::before {
  width: 19px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 4px;
}

.play-function-symbol.rule::after {
  width: 12px;
  height: 2px;
  background: #fff;
  box-shadow: 0 6px 0 #fff;
}

.play-function-symbol.trend::before {
  width: 24px;
  height: 18px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.play-function-symbol.trend::after {
  width: 22px;
  height: 14px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: skew(-24deg) rotate(-18deg);
}

.play-function-symbol.profit::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.play-function-symbol.profit::after {
  width: 12px;
  height: 18px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(-38deg);
}

.play-function-symbol.flow::before {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid #fff;
}

.play-function-symbol.flow::after {
  width: 18px;
  height: 3px;
  background: #fff;
  box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}

.play-function-symbol.bet-records::before {
  width: 22px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.play-function-symbol.bet-records::after {
  width: 14px;
  height: 2px;
  background: #fff;
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}

.play-function-symbol.auto::before {
  width: 23px;
  height: 23px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.play-function-symbol.auto::after {
  width: 11px;
  height: 11px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg) translate(1px, -1px);
}

.play-function-symbol.chase::before {
  width: 22px;
  height: 15px;
  border: 2px solid #fff;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

.play-function-symbol.chase::after {
  width: 9px;
  height: 9px;
  right: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

.play-mobile-function p {
  margin: 6px 0;
  color: #6b4a34;
  line-height: 1.6;
}

.play-function-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.play-function-grid-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.play-rule-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.play-function-grid span {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #f1d2b7;
  border-radius: 7px;
  background: #fff;
}

.play-function-grid b {
  max-width: 100%;
  overflow: hidden;
  color: var(--mobile-primary-dark);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-function-grid b.win {
  color: #e53935;
}

.play-function-grid b.lose {
  color: #0f8f54;
}

.play-function-grid em {
  color: #98715a;
  font-style: normal;
  font-size: 12px;
}

.play-mobile-function > button {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff9d3e, #e95a0c);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.play-auto-panel {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #f1d2b7;
  border-radius: 8px;
  background: #fff;
}

.play-auto-running {
  display: grid;
  gap: 10px;
}

.play-auto-running header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3dfcd;
}

.play-auto-running header strong {
  color: #07804d;
  font-size: 15px;
}

.play-auto-running header span {
  min-width: 0;
  color: #6b4a34;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-auto-running-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.play-auto-running-grid span {
  min-width: 0;
  padding: 8px;
  display: grid;
  gap: 3px;
  border: 1px solid #edf0f4;
  border-radius: 6px;
  background: #f8fafc;
}

.play-auto-running-grid b {
  color: #26384f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-auto-running-grid em {
  color: #8a6470;
  font-size: 12px;
  font-style: normal;
}

.play-auto-running button,
.play-auto-empty button,
.play-auto-form > button {
  width: 100%;
  height: 39px;
  border-radius: 7px;
  color: #fff;
  font-weight: 800;
}

.play-auto-running .danger {
  background: linear-gradient(90deg, #ff7043, #e6451a);
}

.play-auto-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 6px;
  text-align: center;
}

.play-auto-empty b {
  color: #3c2a1f;
}

.play-auto-empty p {
  margin: 0;
  color: #8a6470;
  font-size: 13px;
}

.play-auto-empty button,
.play-auto-form > button.primary {
  background: linear-gradient(90deg, #20a66a, #128452);
}

.play-auto-running button:disabled,
.play-auto-form > button:disabled {
  background: #cfd7e3;
  color: #7b8796;
}

.play-auto-form {
  display: grid;
  gap: 10px;
}

.play-auto-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #6b4a34;
  font-size: 12px;
  font-weight: 700;
}

.play-auto-form input,
.play-auto-form select {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #d6dfeb;
  border-radius: 6px;
  background: #fff;
  color: #26384f;
  font-size: 14px;
}

.play-auto-form input[readonly] {
  background: #f5f7fb;
  color: #7a8491;
}

.play-auto-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.play-rule-section,
.play-stat-panel {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #f1d2b7;
  border-radius: 8px;
  background: #fff;
}

.play-rule-section h3,
.play-stat-panel h3 {
  margin: 0 0 8px;
  color: #3c2a1f;
  font-size: 14px;
}

.play-rule-section p {
  margin: 7px 0;
  color: #6b4a34;
  line-height: 1.65;
}

.play-rule-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.play-rule-tags span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #fff3e6;
  color: #7a4b27;
  font-size: 12px;
}

.play-rule-tags b {
  color: #f05d12;
}

.play-trend-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

.play-trend-summary span {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #f1d2b7;
}

.play-trend-summary b {
  max-width: 100%;
  overflow: hidden;
  color: #e85b0d;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-trend-summary em {
  color: #8f6d58;
  font-size: 11px;
  font-style: normal;
}

.play-trend-table-wrap {
  width: 100%;
  overflow-x: visible;
  border: 1px solid #e8d3c2;
  border-radius: 8px;
  background: #fff;
}

.play-trend-stat-groups {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.play-trend-stat-groups article {
  padding: 9px;
  border: 1px solid #f1d2b7;
  border-radius: 8px;
  background: #fff;
}

.play-trend-stat-groups strong {
  display: block;
  margin-bottom: 7px;
  color: #5d3822;
  font-size: 13px;
}

.play-trend-stat-groups article div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.play-trend-stat-groups span {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 6px;
  background: #fff7ef;
}

.play-trend-stat-groups b {
  max-width: 100%;
  overflow: hidden;
  color: #72513d;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-trend-stat-groups em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #e85b0d;
  font-style: normal;
  font-weight: 700;
}

.play-trend-stat-groups em i {
  min-width: 24px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #e85b0d;
  font-size: 10px;
  font-style: normal;
  line-height: 18px;
}

.play-trend-card-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.play-trend-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #efd1bb;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(112, 63, 20, .05);
}

.play-trend-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.play-trend-card header strong {
  color: #172033;
  font-size: 14px;
}

.play-trend-card header span {
  color: #8a6653;
  font-size: 12px;
}

.play-trend-card-result {
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border-radius: 8px;
  background: #f8fafc;
}

.play-trend-card-result i {
  color: #172033;
  font-style: normal;
  font-weight: 800;
}

.play-trend-card-result > em {
  color: #98a2b3;
  font-style: normal;
}

.play-trend-card-tags {
  justify-content: flex-start;
  margin-top: 8px;
}

.play-trend-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.play-trend-card-details > span {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 7px;
  background: #fff7ef;
}

.play-trend-card-details b {
  min-width: 0;
  overflow: hidden;
  color: #8a6653;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-trend-card-details em {
  min-width: 0;
  justify-self: end;
  color: #172033;
  font-style: normal;
  font-weight: 700;
}

.play-trend-card-details em.trend-red {
  color: #e83a62;
}

.play-trend-card-details em.trend-blue {
  color: #397ce8;
}

.play-trend-card-details .play-result-class-tags {
  justify-content: flex-end;
  gap: 3px;
}

.play-trend-card-details .play-result-class-badge {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border: 0;
  text-decoration: none;
  line-height: 22px;
}

.play-trend-card footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.play-trend-limit-note {
  margin-top: 9px;
  color: #9a7058;
  font-size: 12px;
  text-align: center;
}

.play-trend-table {
  min-width: max-content;
  border-collapse: collapse;
  font-size: 10px;
}

.play-trend-table th,
.play-trend-table td {
  min-width: 34px;
  height: 30px;
  padding: 1px 2px;
  border-right: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  color: #243447;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.play-trend-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f4f7fb;
  color: #2d3d50;
  font-weight: 700;
}

.play-trend-table .play-trend-count-row th {
  position: static;
  background: #fffaf5;
  color: #e85b0d;
  font-weight: 700;
}

.play-trend-table .issue {
  min-width: 68px;
}

.play-trend-table .time {
  min-width: 68px;
}

.play-trend-table .shape {
  min-width: 86px;
}

.play-trend-table .issue strong {
  display: inline-block;
  margin-right: 1px;
  color: #162033;
}

.play-trend-table .issue em,
.play-trend-table td > em {
  color: #98a2b3;
  font-style: normal;
}

.play-trend-table .final .play-result-chip {
  margin: 0 auto;
}

.play-trend-table .play-result-chip {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 11px;
}

.play-trend-table .play-result-chip img {
  width: 18px;
  height: 18px;
}

.play-trend-table .play-result-class-tags {
  justify-content: center;
  gap: 2px;
  max-width: 140px;
  margin: 0 auto;
}

.play-trend-table .play-result-class-badge {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  font-size: 10px;
  line-height: 20px;
}

.play-trend-table .verify {
  min-width: 52px;
}

.play-trend-table .trend-col-result {
  min-width: 148px;
}

.play-trend-result-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.play-trend-result-line i {
  color: #111827;
  font-style: normal;
  font-weight: 700;
}

.play-trend-cell {
  min-width: 20px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  margin: 0 auto;
  color: #243447;
  font-weight: 700;
}

.play-trend-cell.trend-red,
.play-trend-cell.trend-blue {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
}

.play-trend-cell.trend-red {
  background: #e83a62;
}

.play-trend-cell.trend-blue {
  background: #397ce8;
}

.play-trend-cell.trend-blank,
.play-trend-cell.trend-placeholder,
.play-trend-cell.trend-attr-empty,
.play-trend-cell.trend-empty {
  color: transparent;
}

.play-trend-cell.trend-odd-h,
.play-trend-cell.trend-big-h,
.play-trend-cell.trend-tail-big-h,
.play-trend-cell.trend-hot,
.play-trend-cell.trend-hot-value {
  min-width: 24px;
  min-height: 18px;
  padding: 0 4px;
  border: 1px solid #ffd7c8;
  background: #fff4ed;
  color: #ff5a2a;
}

.play-trend-cell.trend-even-h,
.play-trend-cell.trend-small-h,
.play-trend-cell.trend-tail-small-h,
.play-trend-cell.trend-middle-h,
.play-trend-cell.trend-beside-h,
.play-trend-cell.trend-mod-h {
  min-width: 24px;
  min-height: 18px;
  padding: 0 4px;
  border: 1px solid #cfe7da;
  background: #f0fff7;
  color: #1c9b5f;
}

.play-trend-cell[class*="trend-class-"] {
  min-width: 24px;
  min-height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
}

.play-bet-record-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.play-bet-record-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.play-bet-record-list article {
  padding: 10px;
  border: 1px solid #efd1bb;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(112, 63, 20, .05);
}

.play-bet-record-list article header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.play-bet-record-list article header div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.play-bet-record-list article header strong {
  color: #172033;
  font-size: 14px;
}

.play-bet-record-list article header em {
  color: #8a6653;
  font-size: 12px;
  font-style: normal;
}

.play-bet-record-list article header span {
  flex: 0 0 auto;
  min-width: 64px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff3e6;
  color: #e95a0c;
  font-size: 12px;
  font-weight: 700;
}

.play-bet-record-list article.win header span {
  background: #fff1f1;
  color: #e53935;
}

.play-bet-record-list article.lose header span {
  background: #f1f7f4;
  color: #0f8f54;
}

.play-bet-record-list article.pending header span {
  background: #eef6ff;
  color: #1976d2;
}

.play-bet-record-list article.refunded header span {
  background: #f2f4f7;
  color: #667085;
}

.play-bet-record-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.play-bet-record-money span {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 7px;
  background: #fff7ef;
}

.play-bet-record-money b {
  max-width: 100%;
  overflow: hidden;
  color: #e95a0c;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profit-win {
  color: #e53935 !important;
  font-weight: 700;
}

.profit-loss {
  color: #0f8f54 !important;
  font-weight: 700;
}

.profit-neutral {
  color: #4a5565 !important;
  font-weight: 700;
}

.play-bet-record-money b.win {
  color: #e53935;
}

.play-bet-record-money b.lose {
  color: #0f8f54;
}

.play-bet-record-money em {
  color: #98715a;
  font-size: 11px;
  font-style: normal;
}

.play-bet-record-list article p {
  min-height: 26px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  border-top: 1px solid #f3e2d5;
  color: #4b5563;
  font-size: 12px;
}

.play-bet-record-list article p span {
  color: #98715a;
}

.play-bet-record-list article p b {
  min-width: 0;
  overflow: hidden;
  color: #263241;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-bet-record-detail-btn {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border: 1px solid #ffb071;
  border-radius: 6px;
  background: #fff7ef;
  color: #e65c10;
  font-weight: 700;
}

.play-bet-record-details {
  margin-top: 8px;
  border: 1px solid #f1d2b7;
  border-radius: 7px;
  overflow: hidden;
}

.play-bet-record-details div {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 58px 70px 70px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-bottom: 1px solid #f3e2d5;
  background: #fffaf4;
  font-size: 12px;
}

.play-bet-record-details div:last-child {
  border-bottom: 0;
}

.play-bet-record-details span {
  min-width: 0;
  overflow: hidden;
  color: #263241;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-bet-record-details em {
  color: #e95a0c;
  font-style: normal;
  text-align: center;
}

.play-bet-record-details b {
  color: #172033;
  text-align: right;
}

.play-bet-record-details strong {
  color: #667085;
  font-weight: 500;
  text-align: right;
}

.play-bet-record-details .empty {
  grid-template-columns: 1fr;
  place-items: center;
  color: #98a2b3;
}

.play-bet-record-pager {
  margin-top: 12px;
  justify-content: center;
}

.play-function-empty {
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px dashed #edc6a8;
  border-radius: 8px;
  background: #fffaf4;
  color: #9b7358;
}

.play-function-pager {
  margin-top: 12px;
  justify-content: center;
}

.play-function-more {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border: 1px solid #ffb071;
  border-radius: 7px;
  background: #fff7ef;
  color: #e65c10;
  font-weight: 700;
}

.play-stat-table-wrap {
  overflow-x: visible;
}

.play-stat-day-list {
  display: grid;
  gap: 8px;
}

.play-stat-day-card {
  padding: 9px;
  border: 1px solid #efd1bb;
  border-radius: 8px;
  background: #fff;
}

.play-stat-day-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3dfcd;
}

.play-stat-day-card header strong {
  color: #172033;
  font-size: 14px;
}

.play-stat-day-card header b {
  color: #e95a0c;
  font-size: 15px;
}

.play-stat-day-items {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.play-stat-day-items span {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: #f8fafc;
}

.play-stat-day-items em {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-stat-day-items b {
  color: #172033;
  font-size: 13px;
}

.play-stat-day-card p {
  margin: 8px 0 0;
  color: #98a2b3;
  font-size: 12px;
}

.play-stat-table {
  width: max(620px, 100%);
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.play-stat-table th,
.play-stat-table td {
  padding: 8px 7px;
  border: 1px solid #ecd5c1;
  text-align: center;
  white-space: nowrap;
}

.play-stat-table thead th,
.play-stat-table tbody th {
  background: #fff4e9;
  color: #5d3822;
  font-weight: 700;
}

.play-stat-table td {
  color: #334155;
}

.play-stat-table .win {
  color: #e53935;
  font-weight: 800;
}

.play-stat-table .lose {
  color: #0b9f5b;
  font-weight: 800;
}

.mobile-list-page,
.mobile-form-page,
.mobile-member-card-page,
.mobile-rank-page,
.mobile-signin-page,
.mobile-stats-page,
.mobile-agent-withdraw-page,
.mobile-recharge-withdraw-page,
.mobile-homepage-reward-page,
.mobile-activities-page,
.mobile-ranking-page,
.mobile-notice-page,
.mobile-help-page,
.mobile-about-page,
.mobile-register-page {
  background: #f7f1eb;
}

.mobile-list-page .mobile-titlebar,
.mobile-form-page .mobile-titlebar,
.mobile-member-card-page .mobile-titlebar,
.mobile-rank-page .mobile-titlebar,
.mobile-signin-page .mobile-titlebar,
.mobile-stats-page .mobile-titlebar,
.mobile-agent-withdraw-page .mobile-titlebar,
.mobile-recharge-withdraw-page .mobile-titlebar,
.mobile-homepage-reward-page .mobile-titlebar,
.mobile-activities-page .mobile-titlebar,
.mobile-ranking-page .mobile-titlebar,
.mobile-notice-page .mobile-titlebar,
.mobile-help-page .mobile-titlebar,
.mobile-about-page .mobile-titlebar,
.mobile-register-page .mobile-titlebar {
  background: #fffaf5;
  border-bottom-color: #f0d8c6;
}

.mobile-filter-tabs,
.mobile-line-tabs {
  background: #fffaf5;
  border-bottom-color: #f0d8c6;
}

.mobile-filter-tabs button,
.mobile-line-tabs button {
  color: #3c2a1f;
}

.stats-filter-card,
.stats-day-card,
.mobile-form-card,
.member-empty-card,
.member-tip-card,
.rank-reward-card,
.signin-summary,
.signin-calendar,
.signin-users,
.mobile-activity-card,
.mobile-notice-card,
.mobile-notice-detail-card,
.mobile-help-card,
.mobile-help-detail-card,
.mobile-about-detail-card,
.mobile-wallet-card {
  border: 1px solid #f0d8c6;
  box-shadow: 0 3px 12px rgba(112, 63, 20, .07);
}

.stats-filter-line .active,
.primary-submit {
  border-color: var(--mobile-primary);
  background: linear-gradient(90deg, #ff9d3e, #e95a0c);
  color: #fff;
}

.stats-total-grid b:not(.profit-win):not(.profit-loss):not(.profit-neutral),
.stats-day-card b:not(.profit-win):not(.profit-loss):not(.profit-neutral),
.rank-reward-card b,
.signin-summary b,
.mobile-form-card label span {
  color: var(--mobile-primary-dark);
}

.homepage-reward-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,240,222,.96)),
    radial-gradient(circle at 88% 18%, rgba(255,157,62,.22), transparent 35%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.homepage-reward-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #47b8ff, #0d74c4);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(13,116,196,.22);
}

.homepage-reward-hero > i::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 30px;
  height: 23px;
  border: 3px solid #fff;
  border-radius: 5px;
}

.homepage-reward-hero > i::after {
  content: "";
  position: absolute;
  left: 23px;
  bottom: 14px;
  width: 18px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
}

.homepage-reward-hero span,
.homepage-reward-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.homepage-reward-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 24px;
}

.homepage-rule-card h2,
.homepage-claim-card h2,
.homepage-history-card h2 {
  margin: 0 0 10px;
  color: #3c2a1f;
  font-size: 15px;
}

.homepage-copy-row {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 8px;
  margin-bottom: 10px;
}

.homepage-copy-row input {
  min-width: 0;
  height: 38px;
  border: 1px solid #e6d2c1;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #5b4637;
}

.homepage-copy-row button {
  border-radius: 8px;
  background: #fff7ef;
  border: 1px solid #f0b486;
  color: #d85b18;
  font-weight: 700;
}

.homepage-rule-card ol {
  margin: 0;
  padding-left: 18px;
  color: #5b4637;
  line-height: 1.7;
}

.homepage-claim-card .secondary-submit {
  margin-top: 8px;
}

.homepage-history-card {
  margin: 8px 10px;
}

.mobile-platform-notice-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,246,235,.98)),
    radial-gradient(circle at 92% 20%, rgba(39,130,205,.16), transparent 35%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-platform-notice-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff9d3e, #2782cd);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(39,130,205,.2);
}

.mobile-platform-notice-hero > i::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 16px;
  width: 28px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
}

.mobile-platform-notice-hero > i::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 23px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: #2782cd;
  box-shadow: 0 7px 0 #2782cd, 0 14px 0 #2782cd;
}

.mobile-platform-notice-hero span,
.mobile-platform-notice-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-platform-notice-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 23px;
  line-height: 1.2;
}

.mobile-notice-detail-card {
  margin: 0 10px 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fffaf5;
}

.mobile-notice-detail-card header {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1dac9;
}

.mobile-notice-detail-card header span {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #176ba8;
  font-size: 12px;
  font-weight: 700;
}

.mobile-notice-detail-card header strong {
  color: #2f241d;
  font-size: 16px;
  line-height: 1.45;
}

.mobile-notice-detail-card header em {
  color: #8a735f;
  font-size: 12px;
  font-style: normal;
}

.mobile-notice-detail-content {
  padding-top: 10px;
  color: #5b4637;
  font-size: 14px;
  line-height: 1.7;
}

.mobile-notice-detail-content p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.mobile-notice-list {
  display: grid;
  gap: 8px;
  margin: 0 10px 10px;
}

.mobile-notice-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #fffaf5;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.mobile-notice-card.active {
  border-color: #f3a15f;
  background: #fff4e8;
}

.mobile-notice-card:active {
  transform: scale(.99);
}

.mobile-notice-badge-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2782cd, #1f9f7a);
}

.mobile-notice-badge-icon::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 16px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
}

.mobile-notice-badge-icon::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #2782cd;
  box-shadow: 0 5px 0 #2782cd;
}

.mobile-notice-card span {
  max-width: 54px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #176ba8;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-notice-card strong {
  min-width: 0;
  color: #2f241d;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-notice-card em {
  grid-column: 2 / 4;
  color: #8a735f;
  font-size: 12px;
  font-style: normal;
}

.mobile-help-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,246,235,.98)),
    radial-gradient(circle at 88% 18%, rgba(31,159,122,.18), transparent 36%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-help-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1f9f7a, #2782cd);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(31,159,122,.2);
}

.mobile-help-hero > i::before {
  content: "?";
  position: absolute;
  left: 16px;
  top: 13px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #1f9f7a;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 30px;
}

.mobile-help-hero > i::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 13px;
  width: 22px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.95);
}

.mobile-help-hero span,
.mobile-help-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-help-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 23px;
  line-height: 1.2;
}

.mobile-help-tabs {
  display: flex;
  gap: 7px;
  margin: 0 10px 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.mobile-help-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-help-tabs button {
  flex: 0 0 auto;
  min-width: 58px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e8cdb7;
  border-radius: 999px;
  background: #fffaf5;
  color: #6c4f3b;
  font-size: 13px;
  font-weight: 700;
}

.mobile-help-tabs button.active {
  border-color: #1f9f7a;
  background: #e9fff7;
  color: #0e7c5d;
}

.mobile-help-detail-card {
  margin: 0 10px 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fffaf5;
}

.mobile-help-detail-card header {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1dac9;
}

.mobile-help-detail-card header span {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e9fff7;
  color: #0e7c5d;
  font-size: 12px;
  font-weight: 700;
}

.mobile-help-detail-card header strong {
  color: #2f241d;
  font-size: 16px;
  line-height: 1.45;
}

.mobile-help-detail-card header em {
  color: #8a735f;
  font-size: 12px;
  font-style: normal;
}

.mobile-help-detail-content {
  padding-top: 10px;
  color: #5b4637;
  font-size: 14px;
  line-height: 1.7;
}

.mobile-help-detail-content p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.mobile-help-list {
  display: grid;
  gap: 8px;
  margin: 0 10px 10px;
}

.mobile-help-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #fffaf5;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.mobile-help-card.active {
  border-color: #8ccfad;
  background: #f0fff7;
}

.mobile-help-card:active {
  transform: scale(.99);
}

.mobile-help-badge-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f9f7a, #2782cd);
}

.mobile-help-badge-icon::before {
  content: "?";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #1f9f7a;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
}

.mobile-help-badge-icon::after {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 8px;
  width: 12px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
}

.mobile-help-card span {
  max-width: 68px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e9fff7;
  color: #0e7c5d;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-help-card strong {
  min-width: 0;
  color: #2f241d;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-help-card em {
  grid-column: 2 / 4;
  color: #8a735f;
  font-size: 12px;
  font-style: normal;
}

.mobile-about-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,246,235,.98)),
    radial-gradient(circle at 88% 18%, rgba(37,117,168,.16), transparent 36%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-about-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2575a8, #1f9f7a);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(37,117,168,.2);
}

.mobile-about-hero > i::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 13px;
  width: 25px;
  height: 32px;
  border: 3px solid #fff;
  border-radius: 5px;
  background: rgba(255,255,255,.14);
}

.mobile-about-hero > i::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 21px;
  width: 17px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 8px 0 #fff, 0 16px 0 rgba(255,255,255,.9);
}

.mobile-about-hero > i.terms {
  background: linear-gradient(135deg, #ff9d3e, #e95a0c);
}

.mobile-about-hero span,
.mobile-about-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-about-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 23px;
  line-height: 1.2;
}

.mobile-about-tabs {
  display: flex;
  gap: 7px;
  margin: 0 10px 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.mobile-about-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-about-tabs button {
  flex: 0 0 auto;
  min-width: 58px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e8cdb7;
  border-radius: 999px;
  background: #fffaf5;
  color: #6c4f3b;
  font-size: 13px;
  font-weight: 700;
}

.mobile-about-tabs button.active {
  border-color: #2575a8;
  background: #eef7ff;
  color: #145d91;
}

.mobile-about-page.terms .mobile-about-tabs button.active {
  border-color: #ff9d3e;
  background: #fff2e6;
  color: #d85b18;
}

.mobile-about-detail-card {
  margin: 0 10px 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fffaf5;
}

.mobile-about-detail-card header {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1dac9;
}

.mobile-about-detail-card header span {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef7ff;
  color: #145d91;
  font-size: 12px;
  font-weight: 700;
}

.mobile-about-page.terms .mobile-about-detail-card header span {
  background: #fff2e6;
  color: #d85b18;
}

.mobile-about-detail-card header strong {
  color: #2f241d;
  font-size: 16px;
  line-height: 1.45;
}

.mobile-about-detail-content {
  padding-top: 10px;
  color: #5b4637;
  font-size: 14px;
  line-height: 1.75;
}

.mobile-about-detail-content p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.mobile-activities-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,246,235,.98)),
    linear-gradient(90deg, rgba(255,157,62,.12), rgba(38,139,111,.08));
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-activities-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff9d3e, #e95a0c);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(233,90,12,.2);
}

.mobile-activities-hero > i::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 24px;
  width: 36px;
  height: 24px;
  border-radius: 7px;
  background: #fff;
}

.mobile-activities-hero > i::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 17px;
  width: 6px;
  height: 35px;
  border-radius: 4px;
  background: #ffe1c2;
  box-shadow: -12px -5px 0 -2px #fff, 12px -5px 0 -2px #fff;
}

.mobile-activities-hero span,
.mobile-activities-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-activities-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 23px;
  line-height: 1.2;
}

.mobile-activity-list {
  display: grid;
  gap: 10px;
  margin: 0 10px 10px;
}

.mobile-activity-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
  background: #fffaf5;
  overflow: hidden;
}

.mobile-activity-cover {
  position: relative;
  min-width: 0;
  width: 88px;
  max-width: 24vw;
  height: 66px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff2e2, #f7dfc7);
  box-shadow: inset 0 0 0 1px rgba(112, 63, 20, .08);
}

.mobile-activity-cover img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.mobile-activity-cover.empty {
  display: grid;
  place-items: center;
}

.mobile-activity-cover.empty i {
  position: relative;
  width: 48px;
  height: 42px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff9d3e, #e95a0c);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}

.mobile-activity-cover.empty i::before,
.mobile-activity-cover.empty i::after {
  content: "";
  position: absolute;
  background: #fff7ed;
}

.mobile-activity-cover.empty i::before {
  left: 21px;
  top: 5px;
  width: 6px;
  height: 32px;
  border-radius: 4px;
}

.mobile-activity-cover.empty i::after {
  left: 7px;
  top: 17px;
  width: 34px;
  height: 5px;
  border-radius: 4px;
}

.mobile-activity-body {
  min-width: 0;
  display: grid;
  gap: 7px;
  overflow: hidden;
}

.mobile-activity-body header {
  display: grid;
  gap: 4px;
}

.mobile-activity-body strong {
  min-width: 0;
  color: #2f241d;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mobile-activity-body header span {
  justify-self: start;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff2e2;
  color: #d85b18;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.mobile-activity-time {
  margin: 0;
  color: #8a735f;
  font-size: 12px;
  line-height: 1.4;
}

.mobile-activity-content {
  color: #5b4637;
  font-size: 13px;
  line-height: 1.55;
}

.mobile-activity-content p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.mobile-ranking-hero {
  margin: 10px 10px 8px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f1d7aa;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,252,244,.98), rgba(255,241,219,.98)),
    radial-gradient(circle at 92% 18%, rgba(40,116,86,.16), transparent 35%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-ranking-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffd35a, #f08b25);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), 0 8px 18px rgba(201, 116, 16, .2);
}

.mobile-ranking-hero > i::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  width: 28px;
  height: 27px;
  border-radius: 0 0 14px 14px;
  background: #fff8de;
  clip-path: polygon(15% 0, 85% 0, 76% 74%, 50% 100%, 24% 74%);
}

.mobile-ranking-hero > i::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 41px;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: #fff8de;
  box-shadow: 0 8px 0 3px rgba(255,248,222,.82);
}

.mobile-ranking-hero span,
.mobile-ranking-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-ranking-hero strong {
  display: block;
  margin: 4px 0;
  color: #245a42;
  font-size: 22px;
  line-height: 1.2;
}

.mobile-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 10px 8px;
}

.mobile-ranking-tabs button {
  height: 36px;
  border: 1px solid #f0d8c6;
  border-radius: 9px;
  background: #fffaf5;
  color: #6a4b33;
  font-weight: 700;
}

.mobile-ranking-tabs button.active {
  border-color: #e3a23c;
  background: linear-gradient(180deg, #fff3c7, #ffd56d);
  color: #2f241d;
}

.mobile-ranking-panel {
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background: #fffaf5;
  box-shadow: 0 3px 12px rgba(112, 63, 20, .07);
}

.mobile-ranking-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid #f1dac9;
}

.mobile-ranking-panel > header strong {
  min-width: 0;
  color: #2f241d;
  font-size: 16px;
}

.mobile-ranking-panel > header button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e3a23c;
  border-radius: 999px;
  background: #fff7e1;
  color: #b45d08;
  font-weight: 700;
}

.mobile-ranking-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.mobile-ranking-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #f1dac9;
  border-radius: 10px;
  background: #fffdf8;
}

.mobile-ranking-main {
  min-width: 0;
}

.mobile-ranking-main strong,
.mobile-ranking-main em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-ranking-main strong {
  color: #d85b18;
  font-size: 15px;
}

.mobile-ranking-main em {
  margin-top: 3px;
  color: #7a5b43;
  font-style: normal;
  font-size: 12px;
}

.mobile-ranking-reward-cell {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  color: #2f241d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mobile-ranking-reward-cell span,
.mobile-ranking-reward-cell .eggyx-rank-card-days {
  min-width: 0;
  color: #2f241d;
  font-size: 12px;
  font-weight: 700;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon {
  width: 18px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-block;
  clip-path: polygon(18% 0, 82% 0, 100% 35%, 50% 100%, 0 35%);
  background: linear-gradient(135deg, #ffffff, #d8e2ef 55%, #9aa7b9);
  border: 1px solid rgba(31, 41, 55, .38);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.pink {
  background: linear-gradient(135deg, #ffe8f3, #ff86b8 55%, #c33272);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.green {
  background: linear-gradient(135deg, #e6fff4, #4edb8a 55%, #14935a);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.blue {
  background: linear-gradient(135deg, #e6f1ff, #4da3ff 55%, #1763c6);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.purple {
  background: linear-gradient(135deg, #f1e8ff, #8b5cf6 55%, #5b21b6);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.yellow,
.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.gold {
  background: linear-gradient(135deg, #fff7cc, #f6c343 55%, #c27c00);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.red {
  background: linear-gradient(135deg, #ffe6e6, #ef4444 55%, #a91616);
}

.mobile-ranking-reward-cell .eggyx-rank-diamond-icon.black {
  background: linear-gradient(135deg, #e5e7eb, #475569 55%, #0f172a);
}

.mobile-ranking-reward-cell .eggyx-rank-reward-sep {
  color: #9a8068;
}

.mobile-ranking-medal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #edf2f0;
  color: #54655f;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.65);
}

.mobile-ranking-medal.gold {
  background: linear-gradient(135deg, #fff2a9, #f3a51e);
  color: #7c3e00;
}

.mobile-ranking-medal.silver {
  background: linear-gradient(135deg, #f7fbff, #aab9c8);
  color: #3c4b59;
}

.mobile-ranking-medal.bronze {
  background: linear-gradient(135deg, #ffd6a1, #ba6931);
  color: #fff8ee;
}

.mobile-task-detail-hero {
  margin: 10px 10px 8px;
  min-height: 98px;
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,232,.96)),
    radial-gradient(circle at 90% 18%, rgba(255,157,62,.18), transparent 34%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-task-detail-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(31,111,165,.18);
}

.mobile-task-detail-hero.consume > i {
  background: linear-gradient(135deg, #24c6a3, #168b6e);
}

.mobile-task-detail-hero.question > i {
  background: linear-gradient(135deg, #47b8ff, #0d74c4);
}

.mobile-task-detail-hero > i::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 18px;
  width: 32px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 7px;
}

.mobile-task-detail-hero.consume > i::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 13px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.mobile-task-detail-hero.question > i::after {
  content: "?";
  position: absolute;
  left: 24px;
  top: 12px;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

.mobile-task-detail-hero span,
.mobile-task-detail-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-task-detail-hero strong {
  display: block;
  margin: 4px 0;
  overflow: hidden;
  color: #e95a0c;
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-task-detail-card,
.mobile-task-rule-card,
.mobile-task-submit-card,
.mobile-question-card,
.mobile-task-history-card {
  margin: 8px 10px;
  border: 1px solid #f0d8c6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(112, 63, 20, .07);
}

.mobile-task-detail-card {
  padding: 10px;
}

.mobile-task-detail-card img {
  width: 100%;
  max-height: 132px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  background: #f6f8fb;
}

.mobile-task-detail-card p,
.mobile-task-rule-card p {
  margin: 8px 0 0;
  color: #5b4637;
  line-height: 1.65;
}

.mobile-task-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.mobile-question-stats {
  margin: 8px 10px;
}

.mobile-task-detail-stats span {
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #f1d2b7;
  border-radius: 8px;
  background: #fffaf5;
  color: #7a5b43;
  font-size: 12px;
}

.mobile-task-detail-stats b {
  color: #e95a0c;
  font-size: 15px;
}

.mobile-task-submit-card h2,
.mobile-task-history-card h2 {
  margin: 0 0 10px;
  color: #3c2a1f;
  font-size: 15px;
}

.mobile-task-submit-card .secondary-submit {
  margin-top: 8px;
}

.mobile-task-rule-card {
  padding: 10px 12px;
}

.mobile-task-rule-card p:first-child {
  margin-top: 0;
}

.mobile-question-card {
  padding: 12px 10px;
}

.mobile-question-card h2 {
  margin: 0 0 10px;
  color: #3c2a1f;
  font-size: 16px;
  line-height: 1.5;
}

.mobile-question-card > button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #e6d2c1;
  border-radius: 8px;
  background: #fff;
  color: #3c2a1f;
  text-align: left;
}

.mobile-question-card > button i {
  width: 18px;
  height: 18px;
  border: 2px solid #c9aa8f;
  border-radius: 50%;
  background: #fff;
}

.mobile-question-card > button.active {
  border-color: #ff9d3e;
  background: #fff6ef;
  color: #d85b18;
}

.mobile-question-card > button.active i {
  border-color: #e95a0c;
  background: radial-gradient(circle, #e95a0c 42%, #fff 46%);
}

.mobile-question-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.mobile-question-actions a,
.mobile-question-actions button {
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 700;
}

.mobile-question-actions a {
  border: 1px solid #f0b486;
  background: #fff7ef;
  color: #d85b18;
}

.mobile-question-actions button {
  background: linear-gradient(90deg, #ff9d3e, #e95a0c);
  color: #fff;
}

.mobile-question-actions button:disabled {
  background: #d7dce4;
  color: #fff;
}

.mobile-promotion-hero {
  margin: 10px 10px 8px;
  min-height: 100px;
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,246,236,.96)),
    radial-gradient(circle at 88% 20%, rgba(59,197,166,.18), transparent 34%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-promotion-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2bc6d0, #1284a6);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(18,132,166,.18);
}

.mobile-promotion-hero > i::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 17px 0 0 -3px #2bc6d0, 17px 0 0 0 #fff, 8px 20px 0 -3px #2bc6d0, 8px 20px 0 0 #fff;
}

.mobile-promotion-hero > i::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 31px;
  width: 26px;
  height: 16px;
  border: 3px solid #fff;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.mobile-promotion-hero span,
.mobile-promotion-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-promotion-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 22px;
  line-height: 1.2;
}

.mobile-promotion-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 10px 8px;
}

.mobile-promotion-stats span {
  min-height: 54px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #f1d2b7;
  border-radius: 9px;
  background: #fffaf5;
  color: #7a5b43;
  font-size: 12px;
}

.mobile-promotion-stats b {
  color: #e95a0c;
  font-size: 16px;
}

.mobile-promotion-tabs {
  margin: 0 10px 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #f0d8c6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.mobile-promotion-tabs button {
  height: 38px;
  border-right: 1px solid #f0d8c6;
  background: #fff;
  color: #6b5444;
  font-weight: 700;
}

.mobile-promotion-tabs button:last-child {
  border-right: 0;
}

.mobile-promotion-tabs button.active {
  background: #fff0e7;
  color: #e95a0c;
}

.mobile-promotion-panel {
  margin: 8px 10px 14px;
  padding: 11px 10px;
  border: 1px solid #f0d8c6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(112, 63, 20, .07);
}

.mobile-promotion-panel h2,
.mobile-promotion-rule h3 {
  margin: 0 0 10px;
  color: #3c2a1f;
  font-size: 15px;
}

.mobile-promotion-list,
.mobile-promotion-income {
  display: grid;
  gap: 8px;
}

.mobile-promotion-list article,
.mobile-promotion-income article {
  min-width: 0;
  padding: 10px;
  border: 1px solid #efd8c5;
  border-radius: 9px;
  background: #fffaf5;
}

.mobile-promotion-list article > div,
.mobile-promotion-income article > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.mobile-promotion-list strong,
.mobile-promotion-income strong {
  color: #1f2937;
}

.mobile-promotion-list em,
.mobile-promotion-income em {
  color: #e95a0c;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.mobile-promotion-list p,
.mobile-promotion-income p,
.mobile-promotion-rule p {
  margin: 7px 0 0;
  color: #5b4637;
  line-height: 1.55;
}

.mobile-promotion-list small,
.mobile-promotion-income small {
  display: block;
  margin-top: 6px;
  color: #8b7665;
}

.mobile-promotion-copy {
  display: grid;
  gap: 9px;
}

.mobile-promotion-copy label {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 6px;
}

.mobile-promotion-copy span {
  color: #6b5444;
  font-weight: 700;
}

.mobile-promotion-copy input {
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e6d2c1;
  border-radius: 7px;
  background: #fff;
  color: #5b4637;
  font-size: 12px;
}

.mobile-promotion-copy button {
  height: 36px;
  border-radius: 7px;
  background: #fff7ef;
  border: 1px solid #f0b486;
  color: #d85b18;
  font-weight: 700;
}

.mobile-promotion-rule {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f0d8c6;
}

.mobile-promotion-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.mobile-promotion-levels span {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid #f1d2b7;
  border-radius: 8px;
  background: #fffaf5;
  color: #6b5444;
  font-weight: 800;
}

.mobile-promotion-levels b {
  color: #e95a0c;
}

.mobile-promotion-levels em {
  color: #1284a6;
  font-style: normal;
}

.mobile-register-hero {
  margin: 10px 10px 8px;
  min-height: 98px;
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0d8c6;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,232,.96)),
    radial-gradient(circle at 90% 20%, rgba(59,197,166,.18), transparent 34%);
  box-shadow: 0 5px 15px rgba(112, 63, 20, .08);
}

.mobile-register-hero > i {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffb35e, #f05b1e);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.58), 0 8px 18px rgba(240,91,30,.2);
}

.mobile-register-hero > i::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}

.mobile-register-hero > i::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 13px;
  width: 32px;
  height: 17px;
  border-radius: 18px 18px 6px 6px;
  background: #fff;
  box-shadow: 22px -13px 0 -9px #fff, 22px -2px 0 -10px #fff;
}

.mobile-register-hero span,
.mobile-register-hero em {
  display: block;
  color: #7a5b43;
  font-style: normal;
}

.mobile-register-hero strong {
  display: block;
  margin: 4px 0;
  color: #e95a0c;
  font-size: 22px;
}

.mobile-register-card .secondary-submit + .secondary-submit {
  margin-top: 8px;
}

.mobile-register-result {
  width: 278px;
}

.stats-day-head,
.rank-reward-card th,
.signin-users th,
.cal-title {
  background: #fff6ee;
}

.rank-reward-card th,
.rank-reward-card td,
.signin-users th,
.signin-users td,
.cal-title,
.cal-week,
.cal-week span,
.cal-days span,
.signin-calendar {
  border-color: #f0d8c6;
}

.member-tip-card,
.mobile-note-box,
.mobile-wallet-note,
.mobile-wallet-fee {
  background: #fff6ee;
  border-color: #f0d8c6;
}

.mobile-log-row {
  border-bottom-color: #f0d8c6;
}

.mobile-log-row b,
.mobile-wallet-cost b {
  color: var(--mobile-primary-dark);
}

@media (max-width: 420px) {
  .mobile-hero {
    height: 204px;
  }

  .mobile-hero-copy {
    left: 38px;
  }

  .mobile-hero-copy strong {
    font-size: 32px;
  }

  .mobile-hero-copy b {
    font-size: 37px;
  }

  .mobile-hero-mark {
    right: 12px;
    width: 108px;
    height: 108px;
  }

  .mobile-hero-mark img {
    width: 88px;
    height: 88px;
  }

  .mobile-hall-grid {
    gap: 10px;
  }

  .route-games .mobile-hall-grid button {
    height: 92px;
  }
}

@media (min-width: 768px) {
  body {
    background: #f4f6fa;
  }

  .wap-mobile-preview {
    width: min(1200px, calc(100% - 24px));
    max-width: 1200px;
    margin: 24px auto 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .wap-desktop-frame .mobile-shell {
    width: 540px;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .08);
  }

  .wap-desktop-frame .mobile-bottom-nav {
    position: sticky;
    left: auto;
    bottom: 0;
    width: 100%;
    transform: none;
  }

  .wap-desktop-frame .mobile-page {
    min-height: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .wap-desktop-only {
    display: none !important;
  }
}

/* Mobile game lobby/play rebuild */
.mobile-play-page {
  --play-ink: #142033;
  --play-muted: #64748b;
  --play-line: #d9e1ea;
  --play-green: #365f50;
  --play-green-soft: #eaf3ee;
  --play-orange: #f26a21;
  --play-blue: #1d74b7;
  min-height: 0;
  padding-bottom: 0;
  background: #fff;
  color: var(--play-ink);
}

.route-play.mobile-shell {
  background: #fff;
  min-height: 0;
}

.route-play .mobile-page {
  padding-bottom: 0;
}

.route-play .mobile-bottom-nav {
  position: sticky;
  left: auto;
  bottom: 0;
  width: 100%;
  transform: none;
}

.mobile-play-page:not(.manual-game-bet) {
  min-height: 0;
  padding-bottom: 0;
}

.mobile-play-page .mobile-play-top {
  height: 44px;
  grid-template-columns: 96px minmax(92px, 1fr) minmax(82px, auto) 32px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--play-line);
}

.mobile-play-page .play-tool-icons {
  gap: 7px;
  padding-left: 8px;
}

.mobile-play-page .play-tool-icons button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d7dee8;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}

.mobile-play-page .play-tool-icons i {
  width: 18px;
  height: 18px;
}

.mobile-play-page .play-tool-icons button.active {
  color: #0da866;
  background: #ecfff5;
  box-shadow: inset 0 0 0 1px rgba(13, 168, 102, .55), 0 0 0 2px rgba(13, 168, 102, .09);
}

.tool-back::before {
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-38%, -50%) rotate(45deg);
}

.tool-auto-refresh::before {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tool-auto-refresh::after {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: translate(2px, -8px) rotate(20deg);
}

.tool-mipai::before {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  transform: translate(-50%, -50%);
}

.tool-mipai::after {
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-38deg);
}

.mobile-play-page .play-tool-icons button.active .tool-mipai::after {
  opacity: 0;
}

.mobile-play-page .play-title-button {
  height: 44px;
  gap: 6px;
}

.mobile-play-page .play-title-button strong {
  max-width: min(168px, 42vw);
  font-size: 15px;
}

.mobile-play-page .play-title-button span {
  width: 16px;
  height: 16px;
  border-color: #f0c3aa;
  background:
    linear-gradient(90deg, #e14f43 0 48%, #fff 48% 52%, #e14f43 52% 100%),
    linear-gradient(#fff 0 48%, transparent 48% 52%, #fff 52% 100%);
}

.mobile-play-page .play-money {
  min-width: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 2px;
  overflow: hidden;
  color: var(--play-orange);
  font-weight: 800;
  white-space: nowrap;
}

.mobile-play-page .play-money span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}

.mobile-play-page .play-money .play-coin {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff8a8 0 16%, #ffd84a 17% 58%, #e89d09 59% 100%);
  box-shadow: inset 0 0 0 1px rgba(149, 91, 0, .28), 0 1px 2px rgba(149, 91, 0, .25);
}

.mobile-play-page .play-more {
  height: 44px;
}

.mobile-play-page .play-popover {
  top: 47px;
  right: 6px;
  width: 132px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 10px;
}

.mobile-play-page .play-popover button {
  height: 42px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #1f2937;
  font-size: 13px;
  text-align: left;
}

.mobile-play-page .play-popover button span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-menu-icon {
  width: 22px;
  height: 22px;
  position: relative;
  display: inline-block;
  border-radius: 7px;
  background: #fff4ec;
  box-shadow: inset 0 0 0 1px rgba(242, 106, 33, .22);
}

.play-menu-icon::before,
.play-menu-icon::after {
  content: "";
  position: absolute;
}

.play-menu-icon.rule::before {
  left: 6px;
  top: 5px;
  width: 10px;
  height: 12px;
  border: 2px solid #f26a21;
  border-radius: 3px;
}

.play-menu-icon.rule::after {
  left: 9px;
  top: 8px;
  width: 6px;
  height: 1px;
  background: #f26a21;
  box-shadow: 0 4px 0 #f26a21;
}

.play-menu-icon.trend::before {
  left: 5px;
  bottom: 5px;
  width: 3px;
  height: 6px;
  background: #1d74b7;
  box-shadow: 5px -3px 0 #1d74b7, 10px -7px 0 #1d74b7;
}

.play-menu-icon.trend::after {
  left: 4px;
  top: 13px;
  width: 14px;
  height: 2px;
  background: #1d74b7;
  transform: rotate(-28deg);
}

.play-menu-icon.profit::before {
  left: 5px;
  top: 11px;
  width: 12px;
  height: 6px;
  border-left: 2px solid #12a15f;
  border-bottom: 2px solid #12a15f;
  transform: rotate(-38deg);
}

.play-menu-icon.profit::after {
  right: 4px;
  top: 5px;
  width: 0;
  height: 0;
  border-left: 5px solid #12a15f;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(-38deg);
}

.play-menu-icon.flow::before {
  left: 5px;
  top: 6px;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 5px 0 #8b5cf6, 0 10px 0 #8b5cf6;
}

.play-menu-icon.flow::after {
  right: 4px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-right: 2px solid #8b5cf6;
  border-top: 2px solid #8b5cf6;
  transform: rotate(45deg);
  box-shadow: 4px 4px 0 -1px #fff;
}

.play-menu-icon.bet-records::before {
  left: 5px;
  top: 4px;
  width: 12px;
  height: 14px;
  border: 2px solid #f26a21;
  border-radius: 3px;
}

.play-menu-icon.bet-records::after {
  left: 8px;
  top: 8px;
  width: 8px;
  height: 1px;
  background: #f26a21;
  box-shadow: 0 4px 0 #f26a21, 0 8px 0 #f26a21;
}

.mobile-play-page .egg-mi-scratch {
  position: relative;
  overflow: hidden;
}

.mobile-play-page .egg-mi-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  cursor: crosshair;
  border-radius: inherit;
  touch-action: none;
}

.mobile-play-page.mipai-on .egg-mi-scratch {
  box-shadow: inset 0 0 0 1px rgba(80,104,126,.18);
}

.mobile-play-page .mobile-game-picker {
  width: min(430px, calc(100vw - 34px));
  height: calc(100vh - env(safe-area-inset-bottom));
  max-height: 100vh;
  grid-template-rows: 46px 42px minmax(0, 1fr);
  overflow: hidden;
}

.mobile-picker-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid #e8edf3;
  background: #fff;
}

.mobile-picker-mode-tabs button {
  min-width: 0;
  height: 42px;
  border-bottom: 2px solid transparent;
  color: #334155;
  font-weight: 700;
}

.mobile-picker-mode-tabs button.active {
  color: #10a15f;
  border-bottom-color: #10c878;
}

.mobile-play-page .mobile-game-picker-body {
  min-height: 0;
  grid-template-columns: 82px minmax(0, 1fr);
  overflow: hidden;
}

.mobile-play-page .mobile-game-picker .mobile-game-side {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.mobile-play-page .mobile-game-picker .mobile-game-main {
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.mobile-play-page .mobile-picker-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-play-page .mobile-picker-grid button {
  min-width: 0;
}

.mobile-play-page .play-tabs {
  position: sticky;
  top: 44px;
  z-index: 28;
  height: 38px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--play-green);
  border-bottom: 0;
  overflow: hidden;
  scrollbar-width: none;
}

.mobile-play-page .play-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-play-page .play-tabs button {
  color: #fff;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.32);
  font-size: 13px;
  font-weight: 700;
}

.mobile-play-page .play-tabs button.active {
  color: var(--play-green);
  background: #fff;
}

.mobile-play-page .play-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
  border-bottom-color: var(--play-line);
}

.mobile-play-page .play-summary div {
  min-height: 48px;
  gap: 2px;
  border-right-color: #edf1f5;
}

.mobile-play-page .play-summary b {
  max-width: 100%;
  overflow: hidden;
  color: var(--play-orange);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-play-page .play-summary span {
  color: #1f2937;
  font-size: 11px;
}

.mobile-play-page .play-draw-board {
  margin: 6px 0 0;
  border-top: 1px solid var(--play-line);
  border-bottom: 1px solid var(--play-line);
  background: #fff;
}

.mobile-play-page .play-draw-row {
  grid-template-columns: 86px minmax(0, 1fr);
  min-height: 48px;
  padding: 7px 9px;
  border-bottom-color: #edf1f5;
}

.mobile-play-page .play-draw-row.pending {
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) 48px;
  min-height: 38px;
  font-size: 12px;
}

.mobile-play-page .play-draw-row.pending b {
  color: #e60012;
}

.mobile-play-page .play-draw-row.pending span:nth-of-type(2) b {
  color: #00a65a;
}

.mobile-play-page .play-draw-row.pending button {
  color: #0b73ff;
  font-size: 12px;
}

.mobile-play-page .play-result-line,
.mobile-play-page .play-record-result {
  justify-content: center;
  gap: 4px;
}

.mobile-play-page .play-bet-actions .primary {
  border: 0;
  background: linear-gradient(90deg, #1677b7, #0c5f95);
  color: #fff;
}

.mobile-play-page .play-bet-tools {
  gap: 8px;
  padding: 9px;
  background: #fff;
  border-bottom-color: var(--play-line);
}

.play-bet-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(130px, .9fr);
  align-items: center;
  gap: 8px;
}

.mobile-play-page .play-bet-chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.mobile-play-page .play-bet-chip-row button {
  height: 34px;
  border: 2px solid #31c979;
  border-radius: 50%;
  background: #fff;
  color: #152033;
  font-weight: 800;
  box-shadow: inset 0 0 0 3px rgba(49, 201, 121, .18);
}

.mobile-play-page .play-mobile-betbar label {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
}

.mobile-play-page .play-mobile-betbar input {
  height: 34px;
  border-color: #cbd6e3;
}

.mobile-play-page .play-bet-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.mobile-play-page .play-bet-actions button {
  height: 34px;
  border-radius: 5px;
  font-weight: 700;
}

.mobile-play-page .play-bet-actions .warn {
  border-color: var(--play-orange);
  background: #fff4ed;
  color: #e45112;
}

.mobile-play-page .play-bet-tools p {
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto) auto;
  min-height: 34px;
  font-size: 11px;
}

.mobile-play-page .play-bet-tools b {
  min-width: 132px;
  color: var(--play-orange);
}

.mobile-play-page.official-game-bet .play-bet-tools {
  gap: 7px;
  padding: 8px 5px 7px;
  border-top: 1px solid #e3ebf4;
}

.mobile-play-page.official-game-bet .play-bet-primary-row {
  grid-template-columns: minmax(0, 1fr) 154px;
  gap: 6px;
}

.mobile-play-page.official-game-bet .play-bet-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-play-page.official-game-bet .play-bet-chip-row::-webkit-scrollbar {
  display: none;
}

.mobile-play-page.official-game-bet .play-bet-chip-row button {
  flex: 0 0 48px;
  height: 31px;
  min-width: 0;
  border: 2px solid #25c873;
  border-radius: 999px;
  background: #fff;
  color: #0f1f35;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 0 0 3px rgba(37, 200, 115, .14), 0 1px 0 rgba(15, 23, 42, .04);
}

.mobile-play-page.official-game-bet .play-mobile-betbar label {
  height: 36px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px;
  color: #071b44;
}

.mobile-play-page.official-game-bet .play-mobile-betbar input {
  height: 34px;
  border-radius: 5px;
  background: #fbfdff;
}

.mobile-play-page.official-game-bet .play-bet-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.mobile-play-page.official-game-bet .play-bet-actions button {
  height: 34px;
  border-radius: 5px;
  background: #f8fafc;
}

.mobile-play-page.official-game-bet .play-bet-actions .warn {
  border-color: var(--play-orange);
  background: #fff4ed;
  color: #e45112;
}

.mobile-play-page.official-game-bet .play-bet-actions .primary {
  background: linear-gradient(90deg, #1479b8, #0d679f);
}

.mobile-play-page.official-game-bet .play-bet-tools p {
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto) auto;
  gap: 7px;
  min-height: 34px;
  align-items: center;
}

.mobile-play-page.official-game-bet .play-bet-tools p span {
  min-width: 0;
  color: #516173;
}

.mobile-play-page.official-game-bet .play-bet-tools p b {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid #d8e0eb;
  border-radius: 5px;
  background: #fff;
  color: var(--play-orange);
  white-space: nowrap;
}

.mobile-play-page.official-game-bet .play-bet-tools p em {
  color: #1f2d3c;
  white-space: nowrap;
}

.mobile-play-page.manual-game-bet {
  padding-bottom: 0;
}

.mobile-play-page.manual-game-bet.manual-bet-active {
  padding-bottom: calc(66px + env(safe-area-inset-bottom));
}

.mobile-play-page.manual-game-bet .play-bet-tools {
  padding: 6px 6px 7px;
  gap: 7px;
  border-top: 1px solid #e3ebf4;
}

.play-manual-desktop-panel {
  display: grid;
  gap: 3px;
  padding: 3px;
  overflow: visible;
  border: 1px solid #e4ebf4;
  background: #fbfdff;
}

.play-manual-preset-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
}

.play-manual-preset-label {
  min-height: 27px;
  height: auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  border: 1px solid #ff4b4b;
  border-radius: 2px;
  background: #fff;
  color: #ff2e2e;
  font-size: 12px;
  font-weight: 700;
}

.play-manual-preset-buttons {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}

.play-manual-preset-buttons button {
  height: 27px;
  min-width: 0;
  padding: 0 2px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd8e5;
  border-radius: 3px;
  background: linear-gradient(#fff, #f4f6f9);
  color: #111827;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.play-manual-preset-buttons button.active {
  border-color: #00a98f;
  background: #eafff9;
  color: #00836f;
}

.play-manual-preset-buttons button.mode {
  grid-column: span 2;
  border-color: #cfd8e5;
  background: #fff;
  color: #203047;
}

.play-manual-preset-buttons button.current,
.play-manual-preset-buttons button.editing {
  border-color: #2f80ed;
  background: #eaf3ff;
  color: #1768c7;
}

.play-manual-preset-buttons button.disabled,
.play-manual-preset-buttons button:disabled {
  color: #b6c0cc;
  background: #f7f9fc;
  border-color: #e1e7ef;
}

.play-manual-mode-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 5px;
  align-items: center;
  padding-top: 3px;
}

.play-manual-mode-editor input {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #cfd8e5;
  border-radius: 4px;
  background: #fff;
  color: #111827;
  font-size: 12px;
}

.play-manual-mode-editor button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #cfd8e5;
  border-radius: 4px;
  background: #fff;
  color: #203047;
  font-size: 12px;
  font-weight: 700;
}

.play-manual-mode-editor .primary {
  border-color: #1f7cc1;
  background: #1f7cc1;
  color: #fff;
}

.play-manual-mode-editor .danger {
  border-color: #ff5a2a;
  color: #e45112;
}

.play-manual-stake-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0 0;
  border-top: 1px solid #eef2f7;
}

.mobile-play-page.manual-game-bet .play-bet-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 0 0 auto;
}

.mobile-play-page.manual-game-bet .play-bet-chip-row button {
  width: 48px;
  height: 34px;
  padding: 0;
  border: 2px solid #29c875;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(41, 200, 117, .15), 0 1px 0 rgba(15, 23, 42, .04);
  color: #101827;
  font-size: 11px;
}

.mobile-play-page.manual-game-bet .play-bet-chip-row button:nth-child(2) {
  border-color: #25a9e0;
  box-shadow: inset 0 0 0 3px rgba(37, 169, 224, .16), 0 1px 0 rgba(15, 23, 42, .04);
}

.mobile-play-page.manual-game-bet .play-bet-chip-row button:nth-child(3) {
  border-color: #cf48ca;
  box-shadow: inset 0 0 0 3px rgba(207, 72, 202, .15), 0 1px 0 rgba(15, 23, 42, .04);
}

.mobile-play-page.manual-game-bet .play-bet-chip-row button:nth-child(4) {
  border-color: #d89614;
  box-shadow: inset 0 0 0 3px rgba(216, 150, 20, .16), 0 1px 0 rgba(15, 23, 42, .04);
}

.mobile-play-page.manual-game-bet .play-bet-chip-row button:nth-child(5) {
  border-color: #db3e2f;
  box-shadow: inset 0 0 0 3px rgba(219, 62, 47, .15), 0 1px 0 rgba(15, 23, 42, .04);
}

.mobile-play-page.manual-game-bet .play-bet-chip-row button:nth-child(6) {
  border-color: #25c873;
  box-shadow: inset 0 0 0 3px rgba(37, 200, 115, .16), 0 1px 0 rgba(15, 23, 42, .04);
}

.play-manual-inline-actions {
  display: flex;
  gap: 5px;
  flex: 1 1 158px;
}

.play-manual-inline-actions button {
  position: relative;
  z-index: 2;
  flex: 1 1 52px;
  height: 32px;
  min-width: 0;
  touch-action: manipulation;
  border: 1px solid #cfd8e5;
  border-radius: 5px;
  background: linear-gradient(#fff, #f7f9fc);
  color: #172033;
  font-weight: 700;
}

.play-manual-inline-actions .warn {
  border-color: var(--play-orange);
  background: #fff4ed;
  color: #e45112;
}

.mobile-play-page.manual-game-bet .play-manual-amount {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: #071b44;
  font-size: 12px;
  font-weight: 700;
}

.mobile-play-page.manual-game-bet .play-mobile-betbar input {
  width: 100%;
  height: 32px;
  border-radius: 4px;
  background: #fbfdff;
}

.play-manual-fixed {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 32px;
  touch-action: manipulation;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.play-manual-fixed {
  border-color: #ff5a2a;
  background: #ff5a2a;
  color: #fff;
}

.play-manual-stake-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(126px, 168px) 78px minmax(120px, 1fr);
  gap: 6px;
  align-items: center;
  justify-content: start;
}

.play-manual-stake-row .play-manual-fixed,
.play-manual-stake-row .play-manual-total {
  width: 100%;
  min-width: 0;
  flex: none;
}

.play-manual-total {
  min-width: 0;
  height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 0 6px;
  border: 1px solid #dce5ef;
  border-radius: 4px;
  background: #fff;
  color: #111827;
  font-size: 12px;
}

.play-manual-total b {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--play-orange);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.play-manual-total em {
  color: #1f2d3c;
  font-style: normal;
  white-space: nowrap;
}

.mobile-play-page.manual-game-bet .play-bet-tools p {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.mobile-play-page.manual-game-bet .play-manual-range span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 460px) {
  .play-manual-preset-buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .play-manual-stake-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .play-manual-stake-row {
    grid-template-columns: minmax(116px, 150px) 74px minmax(104px, 1fr);
    gap: 5px;
  }

  .play-manual-mode-editor {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  }

  .mobile-play-page.manual-game-bet .play-bet-chip-row,
  .play-manual-inline-actions,
  .play-manual-stake-row {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 340px) {
  .play-manual-stake-row {
    grid-template-columns: minmax(104px, 132px) 68px minmax(88px, 1fr);
    gap: 4px;
  }

  .mobile-play-page.manual-game-bet .play-manual-amount {
    grid-template-columns: 24px minmax(0, 1fr);
    font-size: 11px;
  }

  .play-manual-fixed,
  .play-manual-total b {
    font-size: 11px;
  }
}

.mobile-play-page.manual-game-bet .play-odds-layout {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-play-page.manual-game-bet .play-side-nav {
  display: none;
}

.mobile-play-page.manual-game-bet .play-odds-main {
  min-width: 0;
}

.mobile-play-page.manual-game-bet .play-odd-cell {
  min-height: 90px;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  grid-template-areas:
    "head input"
    "bet input";
  align-items: center;
  align-content: center;
  column-gap: 8px;
  row-gap: 4px;
  padding: 8px 9px;
}

.mobile-play-page.manual-game-bet .play-odd-head {
  grid-area: head;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 5px;
}

.mobile-play-page.manual-game-bet .play-odd-head b {
  align-self: center;
  color: #f00000;
  font-size: 12px;
}

.mobile-play-page.manual-game-bet .play-odd-input {
  grid-area: input;
}

.mobile-play-page.manual-game-bet .play-odd-input input {
  height: 32px;
}

.mobile-play-page.manual-game-bet .play-odd-cell em {
  grid-area: bet;
  min-height: 14px;
  color: #058b52;
  font-size: 10px;
  text-align: center;
}

.play-bottom-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 68;
  width: min(100vw, 540px);
  height: calc(60px + env(safe-area-inset-bottom));
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  transform: translateX(-50%);
  overflow: hidden;
  border-top: 1px solid #cfd9e6;
  background: rgba(248, 251, 255, .98);
  box-shadow: 0 -10px 24px rgba(20, 32, 51, .12);
  backdrop-filter: blur(8px);
}

.play-bottom-actions button {
  min-width: 0;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd9e6;
  border-radius: 9px;
  background: #fff;
  color: #26384f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.play-bottom-actions button:last-child {
  border-right: 1px solid transparent;
}

.play-bottom-actions .back {
  border-color: #4f6f61;
  background: linear-gradient(180deg, #6f8d7f, #557668);
  color: #fff;
}

.play-bottom-actions button:nth-child(2) {
  border-color: #d5dde8;
  background: #fff;
}

.play-bottom-actions button:nth-child(3) {
  border-color: #dfe6ef;
  background: #f7fafc;
  color: #2d3d50;
}

.play-bottom-actions .primary {
  border-color: #2396d4;
  background: linear-gradient(135deg, #22c3d3, #3182f6);
  color: #fff;
  box-shadow: 0 6px 14px rgba(49, 130, 246, .18);
}

.play-bottom-actions .primary:disabled {
  border-color: #d7dde7;
  background: #d7dde7;
  color: #8a95a5;
  box-shadow: none;
}

@media (min-width: 768px) {
  .wap-desktop-frame .mobile-play-page.manual-game-bet.manual-bet-active {
    padding-bottom: 0;
  }

  .wap-desktop-frame .play-bottom-actions {
    position: sticky;
    left: auto;
    bottom: 0;
    width: 100%;
    transform: none;
  }
}

.mobile-play-page .play-odds-layout {
  grid-template-columns: 78px minmax(0, 1fr);
  min-height: 0;
  border-top: 1px solid var(--play-line);
  border-bottom-color: var(--play-line);
}

.mobile-play-page .play-odds-layout.sectioned-odds {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-play-page .play-odds-layout.official-fold-odds {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-play-page .play-side-nav {
  max-height: none;
  overflow: visible;
  background: #f2f6f8;
  border-right-color: var(--play-line);
}

.mobile-play-page .play-side-nav button {
  min-height: 48px;
  background: #f2f6f8;
  border-bottom-color: #e3e9f0;
  color: var(--play-ink);
}

.mobile-play-page .play-side-nav button.active {
  color: #058b52;
  background: #fff;
  box-shadow: inset 4px 0 0 #14c878;
}

.mobile-play-page .play-odds-main {
  max-height: none;
  overflow: visible;
}

.mobile-play-page .play-odds-main h2 {
  height: 34px;
  background: #f2f5f9;
  border-bottom-color: var(--play-line);
  color: var(--play-ink);
  font-weight: 700;
}

.mobile-play-page .play-odds-main.sectioned h2 {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f6fa;
  border-top: 1px solid #e5ebf3;
  color: #0f284a;
  font-size: 13px;
}

.mobile-play-page .play-odds-main.sectioned h2 span {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8a98aa;
}

.mobile-play-page .play-odds-section:first-child h2 {
  border-top: 0;
}

.mobile-play-page .play-odds-section.official-fold {
  border-bottom: 1px solid #e5ebf3;
}

.mobile-play-page .play-official-section-head {
  width: 100%;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-top: 1px solid #e5ebf3;
  background: #f3f6fa;
  color: #0f284a;
  font-size: 13px;
  font-weight: 700;
}

.mobile-play-page .play-odds-section:first-child .play-official-section-head {
  border-top: 0;
}

.mobile-play-page .play-odds-section.active .play-official-section-head {
  background: #fff;
  color: #058b52;
}

.mobile-play-page .play-official-section-head span {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8a98aa;
}

.mobile-play-page .play-odds-section.active .play-official-section-head span {
  border-top: 0;
  border-bottom: 5px solid #058b52;
}

.mobile-play-page .play-official-subgroups {
  display: grid;
  gap: 0;
}

.mobile-play-page .play-official-subgroup {
  min-width: 0;
}

.mobile-play-page .play-official-subgroup-head {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-top: 1px solid #e5ebf3;
  border-bottom: 1px solid #e5ebf3;
  background: #f5f8fb;
  color: #263e5a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.mobile-play-page .play-official-subgroup:first-child .play-official-subgroup-head {
  border-top: 0;
}

.mobile-play-page .play-official-subgroup-head span {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8a98aa;
}

.mobile-play-page .play-official-subgroup .play-odds-grid {
  border-top: 0;
}

.mobile-play-page .play-odds-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-color: #e7edf3;
}

.mobile-play-page .play-odd-cell {
  min-height: 106px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
  border-right: 1px solid #e7edf3;
  border-bottom: 1px solid #e7edf3;
  background: #fff;
  color: var(--play-ink);
}

.play-odd-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.play-odd-head span {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.play-odd-head b {
  color: #e60012;
  font-size: 12px;
}

.mobile-play-page.official-game-bet .play-odd-cell {
  min-height: 74px;
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
  grid-template-areas:
    "head input"
    "bet input";
  align-items: center;
  align-content: center;
  column-gap: 8px;
  row-gap: 4px;
  padding: 8px 9px;
}

.mobile-play-page.official-game-bet .play-odd-head {
  grid-area: head;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 5px;
}

.mobile-play-page.official-game-bet .play-odd-head b {
  align-self: center;
  color: #f00000;
  font-size: 12px;
}

.mobile-play-page.official-game-bet .play-odd-input {
  grid-area: input;
}

.mobile-play-page.official-game-bet .play-odd-input input {
  height: 32px;
}

.mobile-play-page.official-game-bet .play-odd-multipliers {
  display: none;
}

.mobile-play-page.official-game-bet .play-odd-cell em {
  grid-area: bet;
  min-height: 14px;
  color: #058b52;
  font-size: 10px;
  text-align: center;
}

.official-bet-token {
  min-width: 28px;
  max-width: 74px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef4ff;
  color: #0f2b4c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .1);
}

.mobile-play-page.official-game-bet .play-odd-head .official-bet-token {
  min-width: 28px;
  overflow: visible;
  text-overflow: clip;
}

.official-bet-token-number {
  width: 30px;
  max-width: 30px;
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .26);
}

.official-bet-token.color-red {
  background: linear-gradient(135deg, #ff7b82, #dd1456);
}

.official-bet-token.color-blue {
  background: linear-gradient(135deg, #7fb4ff, #2169d8);
}

.official-bet-token.color-green {
  background: linear-gradient(135deg, #5edaa0, #159b61);
}

.official-bet-token-word {
  color: #fff;
}

.official-bet-token-long {
  max-width: 88px;
  min-height: 26px;
  border-radius: 6px;
  background: #edf3f8;
  color: #16304a;
  font-size: 12px;
}

.official-bet-token.word-pink {
  background: #d91b63;
}

.official-bet-token.word-orange {
  background: #ff7a1a;
}

.official-bet-token.word-blue {
  background: #0878ea;
}

.official-bet-token.word-green {
  background: #31a474;
}

.official-bet-token.word-red {
  background: #f01818;
}

.official-bet-token.word-slate {
  background: #26394f;
}

.official-bet-token.word-default {
  background: #eef3f8;
  color: #172033;
}

.manual-bet-token {
  min-width: 30px;
  max-width: 84px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: #0f2b4c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .1);
}

.mobile-play-page.manual-game-bet .play-odd-head .manual-bet-token {
  min-width: 30px;
  overflow: visible;
  text-overflow: clip;
}

.manual-bet-token-number {
  width: 32px;
  max-width: 32px;
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .26);
}

.manual-bet-token.color-red {
  background: linear-gradient(135deg, #ff7b82, #dd1456);
}

.manual-bet-token.color-blue {
  background: linear-gradient(135deg, #7fb4ff, #2169d8);
}

.manual-bet-token.color-green {
  background: linear-gradient(135deg, #5edaa0, #159b61);
}

.manual-bet-token-word {
  color: #fff;
}

.manual-bet-token-long {
  max-width: 96px;
  min-height: 28px;
  border-radius: 7px;
  background: #edf3f8;
  color: #16304a;
  font-size: 12px;
}

.manual-bet-token.word-pink {
  background: #d91b63;
}

.manual-bet-token.word-orange {
  background: #ff7a1a;
}

.manual-bet-token.word-blue {
  background: #0878ea;
}

.manual-bet-token.word-green {
  background: #31a474;
}

.manual-bet-token.word-red {
  background: #f01818;
}

.manual-bet-token.word-slate {
  background: #26394f;
}

.manual-bet-token.word-purple {
  background: #7c2bd9;
}

.manual-bet-token.word-indigo {
  background: #2259b8;
}

.manual-bet-token.word-default {
  background: #eef3f8;
  color: #172033;
}

.mobile-play-page .play-odd-cell em {
  min-height: 16px;
  color: #06864e;
  text-align: left;
}

.play-odd-input {
  display: grid;
  gap: 5px;
}

.play-odd-input input {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 7px;
  border: 1px solid #cbd6e3;
  border-radius: 5px;
  background: #fbfdff;
  color: var(--play-ink);
}

.play-odd-multipliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.play-odd-multipliers button {
  height: 26px;
  border: 1px solid #aeb9c7;
  border-radius: 5px;
  background: linear-gradient(#fff, #e9eef4);
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}

.mobile-play-page .play-odd-cell.wide .play-odd-multipliers {
  display: none;
}

.mobile-play-page .play-odd-cell.selected {
  background: #fff0cb;
  box-shadow: inset 0 0 0 2px #ffb020;
}

.mobile-play-page .play-odd-cell.locked {
  color: #9aa6b6;
  background: #f8fafc;
}

.mobile-play-page .play-record-table {
  table-layout: fixed;
  background: var(--play-green);
}

.mobile-play-page .play-record-table th {
  height: 40px;
  background: var(--play-green);
  color: #fff;
  font-weight: 700;
}

.mobile-play-page .play-record-table td {
  height: 52px;
  border-right-color: #e7edf3;
  border-bottom-color: #e7edf3;
}

.mobile-play-page .play-record-table td:first-child {
  width: 104px;
}

.mobile-play-page .play-record-table td:last-child {
  width: 76px;
  color: var(--play-orange);
}

.mobile-play-page .play-record-table tr.pending td {
  background: #f9fcff;
}

.play-record-bet-btn {
  min-width: 72px;
  height: 30px;
  border: 1px solid #1d74b7;
  border-radius: 5px;
  color: #0b73ff;
  background: #fff;
}

.play-record-state {
  display: inline-block;
  color: #94a3b8;
}

.play-record-pager {
  justify-content: center;
  margin: 8px auto;
}

@media (max-width: 420px) {
  .play-bet-primary-row {
    grid-template-columns: 1fr;
  }

  .mobile-play-page.official-game-bet .play-bet-primary-row {
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: 5px;
  }

  .mobile-play-page.official-game-bet .play-bet-chip-row button {
    flex-basis: 46px;
    font-size: 10.5px;
  }

  .mobile-play-page.official-game-bet .play-mobile-betbar label {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .mobile-play-page .play-odds-grid {
    grid-template-columns: 1fr;
  }

  .mobile-play-page .play-odd-cell {
    min-height: 92px;
  }
}