* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(245, 185, 66, 0.14), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(233, 75, 75, 0.16), transparent 60%),
    linear-gradient(160deg, #1c1122 0%, #241530 55%, #1b0f24 100%);
  color: #f3e9ff;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 12px 56px;
}

/* ---------- 顶栏 ---------- */
.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(28, 17, 34, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 12px 14px 10px;
  border-radius: 0 0 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

h1 {
  font-size: 19px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ffd45e, #ff9d5c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
}

.stat .k {
  display: block;
  font-size: 11px;
  color: #b9a8cc;
}

.stat .v {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  margin-top: 2px;
}

.stat .u {
  font-size: 11px;
  color: #b9a8cc;
  margin-left: 2px;
}

.stat.money {
  background: rgba(245, 185, 66, 0.12);
  border-color: rgba(245, 185, 66, 0.35);
}

.stat.money .v {
  color: #ffd45e;
}

.progress-wrap {
  margin-top: 10px;
}

.progress {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd45e, #ff9d5c);
  border-radius: 10px;
  transition: width 0.6s ease;
}

.goal-text {
  font-size: 12px;
  color: #d9cceb;
  margin-top: 5px;
}

.pity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 12px;
  color: #ffd45e;
}

.pity-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

.pity-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9d5c, #ff6b6b);
  border-radius: 6px;
  transition: width 0.5s ease;
}

/* ---------- 操作卡片 ---------- */
.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}

.card:active {
  transform: scale(0.96);
}

.card .ico {
  font-size: 30px;
}

.card b {
  font-size: 16px;
}

.card small {
  color: #b9a8cc;
  font-size: 12px;
  text-align: center;
}

@media (min-width: 600px) {
  .actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 面板 ---------- */
.panel {
  margin-top: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 16px;
}

.panel .form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel h3 {
  font-size: 18px;
}

.price {
  color: #ffd45e;
  font-weight: 700;
  font-size: 14px;
}

.hint {
  color: #b9a8cc;
  font-size: 13px;
  margin: 12px 0 8px;
}

.lbl {
  display: block;
  color: #d9cceb;
  font-size: 13px;
  margin: 14px 0 6px;
}

.tabbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.tab {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: #b9a8cc;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

.tab.active {
  background: rgba(245, 185, 66, 0.14);
  border-color: #ffd45e;
  color: #ffd45e;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

.count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  color: #d9cceb;
  font-size: 14px;
}

.chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8dcf5;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.chip.sel {
  background: rgba(245, 185, 66, 0.2);
  border-color: #ffd45e;
  color: #ffd45e;
  font-weight: 700;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

/* ---------- 按钮与输入 ---------- */
.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.btn.primary {
  background: linear-gradient(135deg, #ffd45e, #f5a623);
  color: #3a2400;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #e8dcf5;
}

.btn.danger {
  background: linear-gradient(135deg, #ff8a8a, #e94b4b);
  color: #fff;
}

.btn.big {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  margin-top: 12px;
}

.btn:active {
  transform: scale(0.98);
}

input[type="number"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
  font-family: inherit;
}

/* ---------- 号码球 ---------- */
.balls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ball {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  -webkit-user-select: none;
  user-select: none;
  flex: none;
}

.ball.red {
  background: radial-gradient(circle at 32% 28%, #ff8f8f, #d92e2e);
}

.ball.blue {
  background: radial-gradient(circle at 32% 28%, #8fb8ff, #2f66d9);
}

.ball.sel {
  border-color: #ffd45e;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 212, 94, 0.55);
}

.ball.static {
  cursor: default;
}

/* ---------- 开奖结果 ---------- */
.draw-title {
  color: #b9a8cc;
  font-size: 13px;
  margin-bottom: 8px;
}

.draw {
  text-align: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  margin-bottom: 12px;
}

.balls-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.banner {
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  margin: 10px 0;
  font-weight: 700;
  font-size: 15px;
}

.banner.gold {
  background: rgba(245, 185, 66, 0.16);
  color: #ffd45e;
  border: 1px solid rgba(245, 185, 66, 0.35);
}

.banner.green {
  background: rgba(123, 241, 168, 0.14);
  color: #7bf1a8;
  border: 1px solid rgba(123, 241, 168, 0.35);
}

.banner.red {
  background: rgba(233, 75, 75, 0.16);
  color: #ff9d9d;
  border: 1px solid rgba(233, 75, 75, 0.35);
}

.ticket-table {
  max-height: 260px;
  overflow: auto;
  margin-bottom: 8px;
  border-radius: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 7px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

th {
  color: #b9a8cc;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #241530;
}

td.l {
  text-align: left;
  font-size: 12px;
  color: #d9cceb;
  white-space: nowrap;
}

.prize-win {
  color: #7bf1a8;
  font-weight: 700;
}

.prize-none {
  color: #8d7ea3;
}

.total-line {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: #ffd45e;
  margin: 10px 0 4px;
}

/* ---------- 竞猜 ---------- */
.match-card {
  text-align: center;
  padding: 4px 0 10px;
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
}

.match-vs {
  color: #b9a8cc;
  font-size: 14px;
  font-weight: 400;
}

.odds-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.odds-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 6px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
}

.odds-btn .odds {
  color: #ffd45e;
  font-weight: 800;
  font-size: 17px;
  margin-top: 3px;
}

.odds-btn.sel {
  border-color: #ffd45e;
  background: rgba(245, 212, 94, 0.12);
}

.score-line {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  margin: 8px 0;
}

/* ---------- 投资 ---------- */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.inv-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-align: center;
}

.inv-card .ico {
  font-size: 26px;
}

.inv-card b {
  font-size: 15px;
}

.inv-card small {
  color: #b9a8cc;
  font-size: 12px;
}

.inv-card.sel {
  border-color: #ffd45e;
  background: rgba(245, 212, 94, 0.1);
}

/* ---------- 履历 ---------- */
.log-wrap {
  margin-top: 16px;
}

.log-wrap h2 {
  font-size: 15px;
  color: #b9a8cc;
  margin-bottom: 8px;
}

.log {
  list-style: none;
  max-height: 320px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 8px 12px;
}

.log li {
  font-size: 13px;
  color: #d9cceb;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  line-height: 1.45;
}

.log li:last-child {
  border-bottom: 0;
}

/* ---------- 小统计 ---------- */
.stats-mini {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stat-mini {
  flex: 1;
  min-width: 110px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px 10px;
}

.stat-mini .k {
  display: block;
  font-size: 12px;
  color: #b9a8cc;
}

.stat-mini .v {
  font-size: 14px;
  font-weight: 800;
  word-break: break-all;
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal-mask[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow: auto;
  background: linear-gradient(165deg, #2c1a3a, #20132b);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 24px 20px;
  animation: pop 0.25s ease;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #d9cceb;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.modal h2 {
  font-size: 22px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.modal .big-emoji {
  font-size: 52px;
  display: block;
  margin-bottom: 8px;
}

.modal p {
  color: #d9cceb;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.modal .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0;
}

@keyframes pop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.confetti {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: fall linear forwards;
  pointer-events: none;
}

@keyframes fall {
  to {
    transform: translateY(75vh) rotate(720deg);
    opacity: 0.15;
  }
}

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%) translateY(20px);
  background: #2b1a38;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 300;
  font-size: 14px;
  max-width: 86vw;
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.footer-note {
  text-align: center;
  color: #7c6b92;
  font-size: 12px;
  margin-top: 24px;
  line-height: 1.6;
}

.empty-tip {
  text-align: center;
  color: #b9a8cc;
  font-size: 14px;
  padding: 14px 6px;
  line-height: 1.8;
}

/* 刮刮乐 */
.scratch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin:12px 0; }
.scratch-card { background:#2a1b33; border:1px solid #4a2f5d; border-radius:12px; padding:12px 6px; text-align:center; }
.scratch-card.win { border-color:#ffd45e; background:#3a2a1a; }
.scratch-emoji { font-size:30px; display:block; margin-bottom:4px; }
.scratch-card b { display:block; color:#ffd45e; font-size:15px; }
.scratch-card small { color:#b39cc4; font-size:11px; }

/* 老虎机 */
.slot-reels { display:flex; justify-content:center; gap:14px; margin:16px 0; }
.slot-symbol { font-size:54px; line-height:1.2; background:#241430; border:2px solid #4a2f5d; border-radius:14px; padding:6px 14px; }