:root {
  --green-0: #043b25;
  --green-1: #075536;
  --green-2: #0b7046;
  --ink: #173b2b;
  --gold: #ffe08a;
  --shadow: 0 8px 22px rgba(2, 35, 21, .22);
  --ease-out: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #d9efe4;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
}

button, input { font: inherit; }
button { cursor: pointer; }

.responsive-picture { display: contents; }
.responsive-picture source { display: none; }

.page {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  overflow: clip;
  touch-action: pan-x pan-y;
  background:
    radial-gradient(80% 44% at 50% 0%, rgba(255, 255, 255, .9), transparent 72%),
    linear-gradient(165deg, #eaf8f1 0%, #ddf3e7 46%, #d3efe1 100%);
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background:
    radial-gradient(ellipse 20% 9% at 12% 32%, #b9f4d5 0 18%, transparent 19%),
    radial-gradient(ellipse 24% 10% at 88% 62%, #9be7c2 0 16%, transparent 17%),
    radial-gradient(ellipse 18% 8% at 72% 12%, #d9ffe9 0 12%, transparent 13%);
  filter: blur(1px);
}

/* 顶部栏：与幸运投注选号页保持一致，滚动时始终置顶 */
.guess-topbar {
  position: -webkit-sticky;
  position: sticky;
  z-index: 24;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: max(10px, calc(env(safe-area-inset-top, 0px) + 6px)) 16px 8px;
  background: linear-gradient(to bottom, rgba(246, 251, 248, .97) 72%, rgba(246, 251, 248, 0));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.guess-back {
  display: grid;
  width: 38px;
  height: 38px;
  justify-self: start;
  place-items: center;
  border: 1px solid rgba(22, 75, 55, .08);
  border-radius: 50%;
  color: #22332b;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(26, 70, 52, .05);
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out);
}

.guess-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guess-back:active {
  background: #fff;
  transform: scale(.92);
}

.guess-topbar-center {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
  text-align: center;
}

.guess-draw-time {
  color: #5d7d6d;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.guess-draw-time b {
  color: #0b6b49;
  font-weight: 800;
}

.guess-guide {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-self: end;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid rgba(22, 75, 55, .09);
  border-radius: 999px;
  color: #24735a;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 2px 8px rgba(26, 70, 52, .04);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out);
}

.guess-guide svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guess-guide:active {
  background: #fff;
  transform: scale(.97);
}

.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #eaf8f1;
}

.hero-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}

.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 40, 24, .20), transparent 26%),
    linear-gradient(180deg, transparent 70%, rgba(7, 85, 54, .9) 100%);
}

.hero--compact {
  min-height: 64px;
  background:
    radial-gradient(80% 150% at 50% 0%, rgba(255, 255, 255, .95), transparent 75%),
    linear-gradient(180deg, #eaf8f1, #ddf3e7);
}

.hero--compact .hero-art,
.hero--compact .hero-shade {
  display: none;
}

.hero--compact .top-btn,
.hero--compact .hero-actions {
  top: 12px;
}

.top-btn {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  color: #173a29;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 4px 12px rgba(2, 31, 18, .24);
}

.top-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-btn--back {
  left: 12px;
  top: max(12px, env(safe-area-inset-top, 0px));
}

.top-btn:active { transform: scale(.96); }

.hero-actions {
  position: absolute;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: 10px;
  display: flex;
  gap: 7px;
}

.top-pill {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 13px;
  color: #fff;
  background: rgba(7, 36, 23, .70);
  box-shadow: 0 3px 9px rgba(2, 31, 18, .20);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.top-pill svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #ffe08a;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-pill:active { transform: scale(.97); }

.main {
  position: relative;
  z-index: 2;
  padding: 9px 10px 0;
}

.issue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 15px;
  background: linear-gradient(180deg, #fff, #f6fbf8);
  box-shadow: 0 5px 14px rgba(2, 39, 24, .20);
}

.issue-tip {
  margin-left: auto;
  color: #6f8779;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.issue-pick {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  gap: 3px;
  color: #203e2f;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.issue-pick b {
  color: #0d6c45;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.issue-pick svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #597266;
  stroke-width: 1.8;
}

.issue-pick select {
  position: absolute;
  inset: -8px -4px;
  width: calc(100% + 8px);
  height: calc(100% + 16px);
  opacity: 0;
  cursor: pointer;
}

.issue-pick:focus-within {
  outline: 2px solid #28a66e;
  outline-offset: 3px;
  border-radius: 6px;
}

.guess-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.guess-switch-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 3px 6px;
  border: 1.5px solid rgba(255, 255, 255, .85);
  border-radius: 14px;
  color: #203e2f;
  background: linear-gradient(180deg, #fff, #f6fbf8);
  box-shadow: 0 5px 14px rgba(2, 39, 24, .16);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease,
    box-shadow .16s ease;
}

.guess-switch-card:active {
  transform: scale(.97);
}

.guess-switch-card.is-selected {
  border-color: #18a875;
  background: linear-gradient(135deg, #f2fbf7, #e8f8f0);
  box-shadow: 0 4px 12px rgba(15, 142, 104, .18);
}

.guess-switch-icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 5px rgba(70, 40, 20, .10);
}

.guess-switch-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guess-switch-copy {
  display: block;
  min-width: 0;
  text-align: center;
}

.guess-switch-copy strong {
  display: block;
  color: #27332d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.guess-switch-copy small {
  display: block;
  margin-top: 2px;
  color: #8b9891;
  font-size: 8.5px;
  line-height: 1.15;
  white-space: nowrap;
}

.guess-switch-card.is-selected .guess-switch-copy small {
  color: #18a875;
  font-weight: 700;
}

.guess-switch-check {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: none;
  width: 16px;
  height: 16px;
  color: #18a875;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(16, 120, 88, .16);
}

.guess-switch-card.is-selected .guess-switch-check {
  display: block;
}

.guess-switch-check svg {
  display: block;
  width: 100%;
  height: 100%;
}

.guess-switch-check circle {
  fill: currentColor;
  stroke: none;
}

.guess-switch-check path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.countdown {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
  text-align: center;
}

.countdown-label {
  color: #4f685a;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.countdown-label b {
  color: #0d6c45;
  font-weight: 800;
}

.countdown-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.countdown-line[hidden] {
  display: none;
}

.clock {
  display: inline-flex;
  min-width: 26px;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border: 1px solid rgba(210, 26, 43, .24);
  border-radius: 6px;
  color: #d21a2b;
  background: #fff5f6;
  box-shadow: 0 1px 3px rgba(210, 26, 43, .06);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: .02em;
}

.clock-sep {
  color: #c94a56;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.clock-done {
  color: #d52231;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.help-chip {
  display: grid;
  width: 25px;
  height: 25px;
  flex: none;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #5a3b00;
  background: linear-gradient(145deg, #ffe58b, #ffc933);
  box-shadow: 0 2px 5px rgba(96, 62, 0, .2);
  font-size: 15px;
  font-weight: 900;
}

.positions-card {
  margin-top: 9px;
  padding: 9px 9px 7px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(236, 249, 241, .92));
  box-shadow: 0 7px 18px rgba(2, 39, 24, .17);
}

.positions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.position { min-width: 0; text-align: center; }

.ball {
  position: relative;
  display: grid;
  width: min(100%, 48px);
  aspect-ratio: 1;
  margin: 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  color: #fff;
  font-size: clamp(19px, 6vw, 26px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .22);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, .5),
    inset 0 -5px 8px rgba(101, 60, 0, .28),
    0 4px 8px rgba(28, 42, 34, .22);
}

.ball--gold {
  background: radial-gradient(circle at 34% 24%, #fff9d0 0 8%, #ffe778 20%, #f7bf28 50%, #d9930b 78%, #a96700 100%);
}

.ball--silver {
  background: radial-gradient(circle at 34% 24%, #ffffff 0 8%, #e9efec 20%, #bdc9c4 50%, #8e9c96 78%, #697771 100%);
}

.ball--pink {
  background: radial-gradient(circle at 34% 24%, #fff0f7 0 8%, #ffbdd9 20%, #ff69aa 50%, #dd1f70 78%, #9a0a49 100%);
}

.ball--blue {
  background: radial-gradient(circle at 34% 24%, #eef7ff 0 8%, #aed7ff 20%, #4aa6ff 50%, #1a6bd8 78%, #0a3f96 100%);
}

.ball--gold::after,
.ball--silver::after,
.ball--pink::after,
.ball--blue::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  pointer-events: none;
}

.ball.is-number { font-size: clamp(21px, 6.8vw, 29px); }

.pos-label {
  margin-top: 4px;
  color: #294f3d;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.last-draw {
  margin: 5px 0 0;
  color: #71867a;
  font-size: 9.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.bet-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.bet-card {
  --bet-a: #ff4a50;
  --bet-b: #a70817;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 196 / 188;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 6px 9px;
  border: 2px solid rgba(255, 219, 125, .88);
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 227, 139, .35), transparent 40%),
    linear-gradient(180deg, var(--bet-a), var(--bet-b));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .3),
    inset 0 -4px 10px rgba(35, 0, 8, .32),
    0 6px 14px rgba(2, 34, 20, .22);
  text-align: center;
  isolation: isolate;
}

.bet-card--blue { --bet-a: #3d91ff; --bet-b: #0643bd; }
.bet-card--green { --bet-a: #27b873; --bet-b: #06703f; }
.bet-card--gold { --bet-a: #ffc447; --bet-b: #a35d00; }

.bet-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .28), transparent 65%);
  pointer-events: none;
}

.bet-card:active { transform: translateY(1px); }

.bet-card.is-selected {
  border-color: #fff3a6;
  box-shadow:
    0 0 0 3px rgba(255, 225, 112, .9),
    0 0 20px rgba(255, 211, 76, .65),
    inset 0 2px 0 rgba(255, 255, 255, .35),
    0 7px 16px rgba(2, 34, 20, .26);
}

.bet-card-crown {
  display: block;
  width: 28px;
  height: 20px;
  margin-bottom: 2px;
  color: #ffe283;
  filter: drop-shadow(0 2px 2px rgba(54, 18, 0, .35));
}

.bet-card-crown svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.bet-card-title {
  display: block;
  color: #ffe9a9;
  font-size: clamp(24px, 7.5vw, 31px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-shadow: 0 2px 0 #7a1f00, 0 3px 4px rgba(45, 12, 0, .55);
  white-space: nowrap;
}

.bet-card-mark {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 1px 12px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 999px;
  color: #fff;
  background: rgba(87, 0, 12, .38);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.bet-card-desc {
  display: block;
  margin-top: 6px;
  color: rgba(255, 250, 226, .9);
  font-size: 9.5px;
  font-weight: 550;
  line-height: 1.25;
}

.bet-card-odds {
  display: block;
  margin-top: 5px;
  color: rgba(255, 246, 216, .85);
  font-size: 10px;
  line-height: 1.2;
}

.bet-card-odds b {
  color: #fff3ba;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* 逐位定胜沿用整图按钮 */
.bet-card--image {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bet-card--image::before { display: none; }

.bet-card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px;
  pointer-events: none;
}

.bet-grid:not([data-count="3"]) .bet-card--image img {
  transform: scale(1.05);
}

.bet-card--image.is-selected {
  box-shadow: 0 0 0 3px rgba(255, 225, 112, .92), 0 0 18px rgba(255, 211, 76, .6);
}

.bet-card--square {
  aspect-ratio: 1 / 1;
  border-radius: 15px;
}

.bet-card--square img {
  height: 100%;
  object-fit: cover;
}

.bet-grid[data-count="3"] .bet-card {
  min-height: 138px;
  aspect-ratio: auto;
  padding: 8px 3px 7px;
  border-radius: 15px;
}

.bet-grid[data-count="3"] .bet-card--square {
  min-height: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  box-shadow: none;
}

.bet-grid[data-count="3"] .bet-card-crown {
  width: 23px;
  height: 17px;
}

.bet-grid[data-count="3"] .bet-card-title {
  font-size: clamp(22px, 7vw, 28px);
}

.bet-grid[data-count="3"] .bet-card-mark {
  min-height: 20px;
  padding-inline: 8px;
  font-size: 10.5px;
}

.bet-grid[data-count="3"] .bet-card-desc {
  font-size: 8.5px;
}

.bet-grid[data-count="3"] .bet-card-odds {
  font-size: 9px;
}

.bet-grid[data-count="3"] .bet-card-odds b {
  font-size: 13px;
}

.bet-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.bet-summary[hidden] {
  display: none;
}

.bet-summary-item {
  min-width: 0;
  padding: 9px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(239, 250, 244, .93));
  box-shadow: 0 6px 14px rgba(2, 39, 24, .15);
}

.bet-summary-item--total {
  border-color: rgba(255, 216, 122, .92);
  background: linear-gradient(180deg, #fffdf6, #fff3d6);
}

.bet-summary-item--total span {
  color: #9a7a3f;
}

.bet-summary-item--total b {
  color: #8a5a00;
}

.bet-summary-item span {
  display: block;
  overflow: hidden;
  color: #6f8478;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-summary-item b {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #134d34;
  font-size: clamp(14px, 4.3vw, 18px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-summary-item b::before {
  content: "¥";
  margin-right: 1px;
  color: #879a90;
  font-size: 9px;
  font-weight: 750;
}

.bet-summary-item--mine b {
  color: #c0192b;
}

.bet-summary-item.is-plain b {
  color: #6f8478;
  font-size: 13px;
  font-weight: 750;
}

.bet-summary-item.is-plain b::before {
  content: none;
}

.stake-card {
  margin-top: 9px;
  padding: 10px 9px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(239, 250, 244, .93));
  box-shadow: 0 7px 18px rgba(2, 39, 24, .17);
}

.chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 9px;
}

.chip {
  --chip: #15944a;
  --chip-light: #56cf86;
  --chip-dark: #08622d;
  position: relative;
  display: grid;
  width: clamp(44px, 12.6vw, 54px);
  aspect-ratio: 1;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 57%, rgba(255, 255, 255, .9) 58% 62%, transparent 63%),
    repeating-conic-gradient(from 0deg, var(--chip) 0deg 18deg, #fff 18deg 36deg);
  box-shadow: 0 4px 8px rgba(3, 37, 22, .28);
  transition: transform .14s ease, filter .14s ease;
}

.chip::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 2px dashed rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, var(--chip-light) 0 8%, var(--chip) 38%, var(--chip-dark) 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .25);
}

.chip b {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .58);
}

.chip--10 { --chip: #15944a; --chip-light: #59d98d; --chip-dark: #07642c; }
.chip--50 { --chip: #1c55d6; --chip-light: #6c9aff; --chip-dark: #0c2e8d; }
.chip--100 { --chip: #d01822; --chip-light: #ff6b70; --chip-dark: #880b11; }
.chip--500 { --chip: #8520c9; --chip-light: #ce7cff; --chip-dark: #530b84; }
.chip--1000 { --chip: #e29a1b; --chip-light: #ffd56a; --chip-dark: #a36400; }

.chip.is-picked {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #ffe68a, 0 6px 11px rgba(3, 37, 22, .3);
}

.amount-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px 70px;
  gap: 6px;
  align-items: center;
}

.step,
.flat {
  height: 38px;
  border: 1px solid rgba(181, 124, 12, .35);
  border-radius: 9px;
  color: #4a3000;
  background: linear-gradient(180deg, #ffe993, #ffd052);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 4px rgba(95, 61, 0, .15);
  font-weight: 900;
}

.step { font-size: 22px; line-height: 1; }
.flat { font-size: 11.5px; }

.flat--custom {
  padding-inline: 4px;
  border-color: rgba(15, 138, 95, .32);
  color: #0b6b49;
  background: linear-gradient(180deg, #eafaf2, #c9efdd);
  font-size: 11px;
  white-space: nowrap;
}

.step:active,
.flat:active { transform: translateY(1px); }

#amount {
  width: 100%;
  height: 38px;
  min-width: 0;
  border: 1px solid #dbe6df;
  border-radius: 9px;
  color: #1f3b2d;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(18, 48, 33, .07);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}

#amount:focus {
  border-color: #24a972;
  box-shadow: 0 0 0 2px rgba(36, 169, 114, .16);
}

.confirm-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.confirm-row[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.confirm {
  --confirm-a: #ff3945;
  --confirm-b: #c80c1c;
  min-height: 56px;
  padding: 0 6px;
  border: 2px solid rgba(255, 255, 255, .62);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(180deg, var(--confirm-a), var(--confirm-b));
  font-size: clamp(12px, 3.7vw, 14px);
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 5px 10px rgba(2, 31, 18, .28);
}

.confirm--blue { --confirm-a: #3b8dff; --confirm-b: #0646c9; }
.confirm--green { --confirm-a: #2cc781; --confirm-b: #067240; }

.confirm:active { transform: translateY(1px); filter: brightness(.97); }

.confirm:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
  filter: grayscale(.15);
}

.confirm-row[data-count="3"] .confirm {
  min-height: 52px;
  padding-inline: 2px;
  font-size: clamp(11px, 3.4vw, 12.5px);
}

.confirm--image {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.confirm--image img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: fill;
  border-radius: 999px;
  pointer-events: none;
}

.confirm-row:not([data-count="3"]) .confirm {
  min-height: 64px;
}

.confirm-row:not([data-count="3"]) .confirm--image {
  min-height: 64px;
}

.confirm-row:not([data-count="3"]) .confirm--image img {
  height: 64px;
}

.confirm--image:active {
  transform: translateY(1px);
  filter: brightness(.97);
}

.confirm-row[data-count="3"] .confirm--image {
  min-height: 56px;
  padding: 0;
}

.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(14% + env(safe-area-inset-bottom, 0px));
  max-width: min(82vw, 330px);
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 30, 21, .88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (max-height: 700px) {
  .positions-card { padding-top: 7px; }
  .ball { width: min(100%, 42px); }
  .chip { width: clamp(42px, 11.8vw, 48px); }
  .confirm { min-height: 46px; }
  .bet-card { min-height: 134px; }
}

@media (max-width: 349px) {
  .top-pill { padding-inline: 6px; font-size: 8.5px; }
  .top-pill svg { width: 14px; height: 14px; }
  .bet-card-title { font-size: 23px; }
}

/* ---------- 每日开奖结果 / 近30期分布 ---------- */

.daily-card {
  margin-top: 10px;
  padding: 12px 11px 11px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 252, 248, .96));
  box-shadow: 0 7px 18px rgba(2, 39, 24, .16);
}

.daily-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.daily-title-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.daily-bars {
  display: flex;
  height: 16px;
  align-items: flex-end;
  gap: 2px;
}

.daily-bars i {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #33c98b, #08784c);
}

.daily-bars i:nth-child(1) { height: 8px; }
.daily-bars i:nth-child(2) { height: 12px; }
.daily-bars i:nth-child(3) { height: 16px; }

.daily-head h2 {
  margin: 0;
  overflow: hidden;
  color: #123c2a;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-range {
  flex: none;
  color: #84968c;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.daily-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px 3px;
  margin-top: 11px;
}

.daily-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.daily-dot {
  display: grid;
  width: clamp(29px, 8.4vw, 35px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  color: #fff;
  font-size: clamp(12px, 3.7vw, 14px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .32),
    inset 0 -3px 6px rgba(0, 0, 0, .2),
    0 3px 7px rgba(26, 47, 36, .16);
}

.daily-dot--red,
.daily-dist-label--red,
.daily-pip--red,
.daily-dist-fill--red {
  background: #e5323f;
}

.daily-dot--red {
  background: radial-gradient(circle at 34% 24%, #ff9a9e 0 8%, #f45a61 30%, #dd2735 68%, #aa0c18 100%);
}

.daily-dot--blue,
.daily-dist-label--blue,
.daily-pip--blue,
.daily-dist-fill--blue {
  background: #1976f0;
}

.daily-dot--blue {
  background: radial-gradient(circle at 34% 24%, #a9ccff 0 8%, #5a9bf7 30%, #1f6fe8 68%, #0b42b5 100%);
}

.daily-dot--green,
.daily-dist-label--green,
.daily-pip--green,
.daily-dist-fill--green {
  background: #1fa86f;
}

.daily-dot--green {
  background: radial-gradient(circle at 34% 24%, #b8f0d5 0 8%, #55d29a 30%, #1aa66c 68%, #06693f 100%);
}

.daily-date {
  max-width: 100%;
  overflow: hidden;
  color: #5f7669;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-dist {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #edf2ee;
}

.daily-dist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.daily-dist-head h3 {
  margin: 0;
  color: #123c2a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.daily-dist-head > span {
  color: #84968c;
  font-size: 9.5px;
  font-weight: 600;
}

.daily-dist-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 9px;
}

.daily-dist-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 34px 36px 58px;
  align-items: center;
  gap: 5px;
}

.daily-dist-label {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

.daily-dots {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

.daily-pip {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #e2e6e3;
}

.daily-pip.is-on {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.daily-dist-count {
  color: #33473b;
  font-size: 10.5px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.daily-dist-pct {
  color: #82948a;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.daily-dist-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edea;
}

.daily-dist-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .3s ease;
}

.daily-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 8px;
  color: #8a9a91;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 349px) {
  .daily-grid { gap: 8px 2px; }
  .daily-dot { width: 28px; font-size: 12px; }
  .daily-date { font-size: 8.5px; }
  .daily-dist-row {
    grid-template-columns: 20px minmax(0, 1fr) 30px 32px 46px;
    gap: 4px;
  }
  .daily-dist-label { width: 20px; height: 20px; font-size: 9.5px; }
  .daily-dots { gap: 1.5px; }
  .daily-pip { width: 3px; height: 3px; flex-basis: 3px; }
  .daily-dist-count { font-size: 9.5px; }
  .daily-dist-pct { font-size: 8.5px; }
}

.daily-pip.is-on.daily-pip--red { background: #e5323f; }
.daily-pip.is-on.daily-pip--blue { background: #1976f0; }
.daily-pip.is-on.daily-pip--green { background: #1fa86f; }

@media (max-width: 379px) {
  .guess-topbar { padding-inline: 12px; }
  .guess-draw-time { font-size: 8.8px; }
  .countdown-line { gap: 1px; }
  .clock { min-width: 24px; padding: 2px 3px; font-size: 13px; }
  .clock-sep { font-size: 11px; }
  .guess-guide { padding-inline: 7px; font-size: 9px; }
  .issue-tip { font-size: 9px; }
}