/* 主题变量定义在 themes.css，本文件只消费变量。 */

html,
body {
  -ms-overflow-style: none;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.page-loader {
  align-items: center;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 9999;
}

.page-loader.is-hidden {
  pointer-events: none;
}

.loader-mark {
  background: var(--color-loader-mark);
  border-radius: 12px;
  box-shadow: 0 16px 40px var(--color-shadow);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: .75rem 1rem;
}

.loader-bar {
  background: var(--color-loader-track);
  border-radius: 999px;
  height: .32rem;
  overflow: hidden;
  width: 8rem;
}

.loader-bar span {
  animation: loader-slide 1.05s ease-in-out infinite;
  background: var(--color-loader-bar);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: 42%;
}

.refresh-indicator {
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-primary-hover), transparent);
  height: 2px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(-100%);
  z-index: 9998;
}

.refresh-indicator.is-active {
  animation: refresh-sweep 1.1s ease-in-out infinite;
  opacity: 1;
}

@keyframes loader-slide {
  0% {
    transform: translateX(-110%);
  }
  50% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(260%);
  }
}

@keyframes refresh-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1 0 auto;
}

.site-footer {
  background: var(--color-footer-bg);
  border-top: 1px solid var(--color-border-light);
  color: var(--color-footer-text);
  flex-shrink: 0;
  font-size: .875rem;
  padding: 1.75rem 1rem;
  text-align: center;
}

/* .site-header 的配色由 themes.css 提供，随主题变化。 */

.notice-strip {
  background: var(--color-strip);
  color: var(--color-text-muted);
}

.notice-marquee {
  display: inline-flex;
  min-width: max-content;
  animation: notice-scroll 30s linear infinite;
}

@keyframes notice-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  overflow: visible;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  padding: .75rem 1.25rem;
  transition: all .15s ease;
}

/* hover 只是浅色底提示可点，别和"已选中"长得一样，
   否则鼠标划过哪个都像选中了哪个。 */
.category-tab:hover {
  background: var(--color-tab-bg);
  color: var(--color-primary);
}

.category-tab.active {
  background: var(--color-tab-active);
  color: #fff;
  box-shadow: 0 4px 14px var(--color-shadow);
}

.lottery-grid {
  align-items: stretch;
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
  overflow: visible;
}

.lottery-grid.is-filtering {
  overflow-anchor: none;
}

@media (min-width: 900px) {
  .lottery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lottery-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 10px 22px var(--color-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 210px;
  min-width: 0;
  padding: 1.35rem 1.5rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.lottery-card:hover {
  background: var(--color-card-hover);
  border-color: var(--color-primary);
  box-shadow: 0 8px 30px var(--color-shadow);
  transform: translateY(-2px);
}

.lottery-card:active {
  transform: scale(.98);
}

.lottery-card.is-hidden {
  display: none;
}

.lottery-card.is-updated {
  border-color: var(--color-primary);
}

.lottery-icon {
  align-items: center;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: .76rem;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  line-height: 1.05;
  text-align: center;
  width: 42px;
}

.lottery-icon img {
  display: block;
  height: 42px;
  width: 42px;
}

.lottery-icon.racing {
  background: linear-gradient(135deg, #ff7a18, #ffb020);
}

.lottery-icon.ssc {
  background: linear-gradient(135deg, #6d4cff, #3b82f6);
}

.lottery-icon.pc {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.lottery-icon.six {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

.balls-row,
.history-balls,
.detail-balls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

/* ------------------------------------------------------------
   Keno（澳洲幸运20 / 台湾宾果）：20 个正码 + 1 个特别号。
   球多，单行排不下，一律走网格；特别号跟在最后。
   ------------------------------------------------------------ */

/* Keno 是 20 个球，台彩官方排成 7 列 3 行。
   列宽必须写死：用 minmax(0, auto) 的话表格一挤，这些列会塌缩到 0 宽，
   20 个球叠成一摞。 */
.detail-balls.balls-keno {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(7, 2.25rem);
  justify-content: start;
}

/* 历史表格里一行一期，20 个球压成两行更省纵向空间 */
.history-balls.balls-keno {
  display: grid;
  gap: .3rem;
  grid-template-columns: repeat(10, 1.75rem);
  justify-content: start;
}

@media (max-width: 900px) {
  .history-balls.balls-keno {
    grid-template-columns: repeat(7, 1.75rem);
  }
}

.lottery-card .balls-row {
  align-content: center;
  flex: 1 1 auto;
  min-height: 82px;
  overflow: hidden;
}

.lottery-card .balls-row.balls-keno {
  align-content: start;
  display: grid;
  gap: .55rem .5rem;
  grid-template-columns: repeat(10, 2rem);
  justify-content: start;
  max-width: calc(10 * 2rem + 9 * .5rem);
}

.lottery-ball {
  align-items: center;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(30, 64, 175, .16), inset 0 -2px 0 rgba(0, 0, 0, .13);
  color: #fff;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  min-width: 2rem;
  padding: 0 .42rem;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .25),
    1px -1px 0 rgba(0, 0, 0, .25),
    -1px 1px 0 rgba(0, 0, 0, .25),
    1px 1px 0 rgba(0, 0, 0, .25);
}

.ball-red,
.ball-pc {
  background: #ef4444;
}

.ball-blue {
  background: #3b82f6;
}

.ball-green {
  background: #16a34a;
}

.ball-yellow {
  background: #e6de00;
}

.ball-orange {
  background: #f97316;
}

.ball-indigo {
  background: #4f46e5;
}

.ball-violet {
  background: #7c3aed;
}

.ball-cyan {
  background: #0891b2;
}

.ball-gray {
  background: #94a3b8;
}

.ball-brown {
  background: #92400e;
}

.ball-pk0,
.ball-pk1,
.ball-pk2,
.ball-pk3,
.ball-pk4,
.ball-pk5,
.ball-pk6,
.ball-pk7,
.ball-pk8,
.ball-pk9,
.ball-pk10 {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  color: #fff;
  font-size: .9rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .55),
    1px -1px 0 rgba(0, 0, 0, .55),
    -1px 1px 0 rgba(0, 0, 0, .55),
    1px 1px 0 rgba(0, 0, 0, .55);
}

.ball-pk0 {
  background: #94a3b8;
}

.ball-pk1 {
  background: #e6de00;
}

.ball-pk2 {
  background: #0092dd;
}

.ball-pk3 {
  background: #4b4b4b;
}

.ball-pk4 {
  background: #ff7600;
}

.ball-pk5 {
  background: #17e2e5;
}

.ball-pk6 {
  background: #5234ff;
}

.ball-pk7 {
  background: #bfbfbf;
}

.ball-pk8 {
  background: #ff2600;
}

.ball-pk9 {
  background: #780b00;
}

.ball-pk10 {
  background: #07bf00;
}

.plus-sign {
  color: var(--color-text-muted);
  font-weight: 900;
  padding: 0 .1rem;
}

.mark-six-item {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: .2rem;
  line-height: 1;
}

.mark-six-number {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-size: 1.55rem;
  font-weight: 900;
  height: 3.05rem;
  justify-content: center;
  letter-spacing: 0;
  min-width: 3.05rem;
  padding: 0 .26rem;
}

.mark-six-red {
  background: #f41414;
}

.mark-six-blue {
  background: #1016ee;
}

.mark-six-green {
  background: #07870d;
}

.mark-six-gray {
  background: #94a3b8;
}

.mark-six-zodiac {
  color: var(--color-text);
  font-size: .95rem;
  font-weight: 800;
  min-height: 1em;
}

.tags-row,
.history-tags {
  align-items: center;
  color: #4f86d9;
  display: flex;
  flex-wrap: wrap;
  font-size: .9rem;
  font-weight: 700;
  gap: .5rem;
}

.lottery-card > .mt-4.flex {
  flex: 0 0 22px;
  margin-top: .75rem !important;
}

.lottery-card .tags-row {
  max-height: 22px;
  min-width: 0;
  overflow: hidden;
}

.tags-row span:nth-child(1),
.history-tags span:nth-child(1) {
  color: #ef4444;
}

.tags-row span:nth-child(3),
.history-tags span:nth-child(3) {
  color: #ef4444;
}

.countdown-box {
  min-width: 96px;
  text-align: right;
}

.live-dot {
  background: #22c55e;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .12);
  display: inline-block;
  height: .55rem;
  width: .55rem;
}

.countdown-track {
  background: var(--color-countdown-track);
  border-radius: 999px;
  flex-shrink: 0;
  height: .28rem;
  overflow: hidden;
  width: 4.25rem;
}

.countdown-bar {
  background: var(--color-countdown-bar);
  border-radius: inherit;
  height: 100%;
  transition: width 1s linear;
}

.history-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: space-between;
}

.history-date-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.history-date-form label {
  color: var(--color-text-muted);
  font-size: .85rem;
  font-weight: 800;
}

.history-date-form input {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 800;
  height: 2.25rem;
  padding: 0 .65rem;
}

.history-date-form button,
.history-date-form a {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: .85rem;
  font-weight: 900;
  height: 2.25rem;
  padding: 0 .85rem;
  text-decoration: none;
}

.history-date-form button {
  background: var(--color-primary);
  border: 0;
  color: #fff;
  cursor: pointer;
}

.history-date-form a {
  background: var(--color-strip);
  color: var(--color-text);
}

.history-table {
  background: var(--color-card);
  border-collapse: collapse;
  font-size: .85rem;
  width: 100%;
}

.history-table th {
  background: var(--color-table-head);
  color: var(--color-text-muted);
  font-weight: 800;
  padding: .75rem;
  text-align: left;
}

.history-table td {
  border-top: 1px solid var(--color-table-border);
  color: var(--color-text);
  font-weight: 700;
  padding: .75rem;
  vertical-align: middle;
}

.history-empty {
  color: var(--color-text-muted) !important;
  font-weight: 700;
  padding: 1.6rem !important;
  text-align: center;
}

.history-balls .lottery-ball {
  height: 1.85rem;
  min-width: 1.85rem;
}

.history-balls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.history-balls .mark-six-number {
  font-size: 1.25rem;
  height: 2.45rem;
  min-width: 2.45rem;
}

.history-balls .mark-six-zodiac {
  font-size: .78rem;
}

.lottery-card .mark-six-item {
  gap: .16rem;
}

.lottery-card .mark-six-number {
  font-size: 1.15rem;
  height: 2.25rem;
  min-width: 2.25rem;
}

.lottery-card .mark-six-zodiac {
  font-size: .74rem;
}

@keyframes rolling-pulse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.lottery-card[data-drawing="true"] .lottery-ball {
  animation: rolling-pulse .42s ease-in-out infinite;
}

@media (max-width: 640px) {
  .site-header .max-w-7xl {
    height: 3.15rem;
    padding-inline: .9rem;
  }

  .site-header span {
    font-size: 1.08rem;
  }

  .site-content {
    padding-bottom: 1.4rem !important;
  }

  .site-content > section {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .site-content > section:first-child {
    padding-top: .75rem !important;
  }

  .notice-strip {
    border-radius: 12px !important;
    gap: .5rem !important;
    padding: .72rem .9rem !important;
  }

  .notice-strip .text-base {
    font-size: .95rem;
  }

  .notice-strip span,
  .notice-strip div {
    font-size: .82rem;
  }

  .notice-marquee {
    animation-duration: 22s;
  }

  .category-tabs {
    display: grid;
    gap: .48rem .35rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-block: .1rem;
  }

  .category-tab {
    border-radius: 999px;
    font-size: .88rem;
    min-width: 0;
    padding: .62rem .2rem;
    text-align: center;
    width: 100%;
  }

  .lottery-grid {
    gap: .75rem;
  }

  .lottery-card {
    border-radius: 14px;
    height: 204px;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    width: 100%;
  }

  .lottery-card > .flex:first-child {
    align-items: flex-start;
    gap: .55rem;
    min-height: 2.8rem;
    padding-right: 5.2rem;
  }

  .lottery-card > .flex:first-child > .flex {
    flex: 1 1 auto;
    gap: .65rem;
    min-width: 0;
  }

  .lottery-icon,
  .lottery-icon img {
    height: 2.55rem;
    width: 2.55rem;
  }

  .lottery-card h2 {
    font-size: 1rem !important;
    line-height: 1.18;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .lottery-card h2 + p {
    font-size: .72rem !important;
    line-height: 1.2;
  }

  .countdown-box {
    max-width: 4.9rem;
    min-width: 4.9rem;
    position: absolute;
    right: 1rem;
    text-align: right;
    top: 1rem;
  }

  .countdown-box .flex {
    gap: .28rem;
  }

  .countdown-display {
    font-size: 1rem !important;
    white-space: nowrap;
  }

  .countdown-box p {
    font-size: .62rem !important;
    line-height: 1.1;
  }

  .live-dot {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .11);
    height: .48rem;
    width: .48rem;
  }

  .balls-row {
    gap: .42rem .36rem;
    margin-top: .95rem !important;
    max-width: 100%;
  }

  .lottery-card .balls-row {
    align-content: center;
    flex: 1 1 auto;
    min-height: 76px;
  }

  .lottery-ball {
    font-size: .8rem;
    height: 1.72rem;
    min-width: 1.72rem;
    padding: 0 .32rem;
  }

  .ball-pk0,
  .ball-pk1,
  .ball-pk2,
  .ball-pk3,
  .ball-pk4,
  .ball-pk5,
  .ball-pk6,
  .ball-pk7,
  .ball-pk8,
  .ball-pk9,
  .ball-pk10 {
    font-size: .76rem;
    height: 1.58rem;
    min-width: 1.58rem;
  }

  .lottery-card .balls-row.balls-keno {
    gap: .42rem .32rem;
    grid-template-columns: repeat(10, minmax(0, 1.58rem));
    max-width: 100%;
  }

  .lottery-card .balls-row.balls-keno .lottery-ball {
    font-size: .72rem;
    height: 1.58rem;
    min-width: 1.58rem;
    padding: 0;
  }

  .lottery-card .mark-six-number {
    font-size: .92rem;
    height: 1.85rem;
    min-width: 1.85rem;
  }

  .lottery-card .mark-six-zodiac {
    font-size: .64rem;
  }

  .plus-sign {
    padding-inline: .02rem;
  }

  .lottery-card > .mt-4.flex {
    align-items: flex-end;
    flex: 0 0 20px;
    gap: .6rem;
    margin-top: .9rem !important;
  }

  .tags-row {
    font-size: .8rem;
    gap: .3rem;
    line-height: 1.2;
    max-height: 20px;
    min-width: 0;
  }

  .countdown-track {
    width: 3.25rem;
  }

  .site-footer {
    font-size: .78rem;
    padding: 1rem .75rem;
  }

  .site-content > section .rounded-lg.bg-white,
  .site-content > section .shadow-soft {
    border-radius: 14px !important;
    padding: 1rem !important;
  }

  .site-content > section > a {
    display: inline-flex;
    font-size: .9rem;
    margin-bottom: .15rem;
  }

  .site-content h1 {
    font-size: 1.45rem !important;
    line-height: 1.2;
  }

  .site-content h1 + p {
    display: none;
  }

  .site-content .rounded-lg.bg-blue-50 {
    padding: .55rem .75rem !important;
  }

  .site-content .rounded-lg.bg-blue-50 .countdown-display {
    font-size: 1.12rem !important;
  }

  .site-content .grid {
    gap: .65rem !important;
  }

  .history-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  .history-toolbar h2 {
    font-size: 1.05rem !important;
    line-height: 1.15;
  }

  .history-date-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .38rem;
    width: 100%;
  }

  .history-date-form label {
    align-self: center;
    font-size: .72rem;
    white-space: nowrap;
  }

  .history-date-form input,
  .history-date-form button,
  .history-date-form a {
    font-size: .75rem;
    height: 1.9rem;
    padding-inline: .55rem;
  }

  .history-date-form a {
    grid-column: 2 / 4;
    justify-content: center;
  }

  .history-table,
  .history-table thead,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
  }

  .history-table thead {
    display: none;
  }

  .history-table tr {
    border-top: 1px solid var(--color-table-border);
    padding: .55rem .62rem;
  }

  .history-table tr:first-child {
    border-top: 0;
  }

  .history-table td {
    align-items: flex-start;
    border-top: 0;
    display: flex;
    gap: .48rem;
    justify-content: space-between;
    padding: .22rem 0;
  }

  .history-table td::before {
    color: var(--color-text-muted);
    flex: 0 0 3.65rem;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.35;
  }

  .history-table td:nth-child(1)::before {
    content: "期号";
  }

  .history-table td:nth-child(2)::before {
    content: "开奖时间";
  }

  .history-table td:nth-child(3)::before {
    content: "开奖号码";
  }

  .history-table td:nth-child(4)::before {
    content: "统计";
  }

  .history-table {
    font-size: .68rem;
    line-height: 1.35;
  }

  .history-balls {
    gap: .28rem .24rem;
    justify-content: flex-end;
    max-width: calc(100% - 4.05rem);
  }

  .history-balls .lottery-ball {
    font-size: .66rem;
    height: 1.36rem;
    min-width: 1.36rem;
    padding: 0 .2rem;
  }

  .history-balls .ball-pk0,
  .history-balls .ball-pk1,
  .history-balls .ball-pk2,
  .history-balls .ball-pk3,
  .history-balls .ball-pk4,
  .history-balls .ball-pk5,
  .history-balls .ball-pk6,
  .history-balls .ball-pk7,
  .history-balls .ball-pk8,
  .history-balls .ball-pk9,
  .history-balls .ball-pk10 {
    font-size: .64rem;
    height: 1.28rem;
    min-width: 1.28rem;
  }

  .history-balls .mark-six-number {
    font-size: .74rem;
    height: 1.5rem;
    min-width: 1.5rem;
  }

  .history-balls .mark-six-zodiac {
    font-size: .58rem;
  }

  .history-tags {
    font-size: .68rem;
    gap: .28rem;
    justify-content: flex-end;
    line-height: 1.35;
    max-width: calc(100% - 4.05rem);
  }

  .history-empty {
    display: block !important;
    padding: 1rem !important;
    text-align: center;
  }

  .history-empty::before {
    display: none;
  }
}

@media (max-width: 380px) {
  .site-content > section {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  .lottery-card {
    height: 192px;
    padding: .85rem;
  }

  .lottery-card > .flex:first-child {
    padding-right: 4.65rem;
  }

  .lottery-icon,
  .lottery-icon img {
    height: 2.35rem;
    width: 2.35rem;
  }

  .countdown-box {
    max-width: 4.45rem;
    min-width: 4.45rem;
    right: .85rem;
    top: .85rem;
  }

  .countdown-display {
    font-size: .92rem !important;
  }

  .balls-row {
    gap: .36rem .3rem;
  }

  .lottery-card .balls-row {
    min-height: 68px;
  }

  .lottery-ball {
    font-size: .74rem;
    height: 1.55rem;
    min-width: 1.55rem;
    padding: 0 .25rem;
  }

  .ball-pk0,
  .ball-pk1,
  .ball-pk2,
  .ball-pk3,
  .ball-pk4,
  .ball-pk5,
  .ball-pk6,
  .ball-pk7,
  .ball-pk8,
  .ball-pk9,
  .ball-pk10 {
    font-size: .7rem;
    height: 1.42rem;
    min-width: 1.42rem;
  }

  .lottery-card .balls-row.balls-keno {
    gap: .34rem .24rem;
    grid-template-columns: repeat(10, minmax(0, 1.42rem));
  }

  .lottery-card .balls-row.balls-keno .lottery-ball {
    font-size: .66rem;
    height: 1.42rem;
    min-width: 1.42rem;
  }

  .category-tab {
    font-size: .82rem;
  }

  .history-table {
    font-size: .62rem;
  }

  .history-table tr {
    padding: .48rem .52rem;
  }

  .history-table td {
    gap: .36rem;
    padding: .18rem 0;
  }

  .history-table td::before {
    flex-basis: 3.2rem;
    font-size: .62rem;
  }

  .history-balls,
  .history-tags {
    max-width: calc(100% - 3.55rem);
  }

  .history-balls {
    gap: .22rem .2rem;
  }

  .history-balls .lottery-ball {
    font-size: .6rem;
    height: 1.18rem;
    min-width: 1.18rem;
    padding: 0 .16rem;
  }

  .history-balls .ball-pk0,
  .history-balls .ball-pk1,
  .history-balls .ball-pk2,
  .history-balls .ball-pk3,
  .history-balls .ball-pk4,
  .history-balls .ball-pk5,
  .history-balls .ball-pk6,
  .history-balls .ball-pk7,
  .history-balls .ball-pk8,
  .history-balls .ball-pk9,
  .history-balls .ball-pk10 {
    font-size: .58rem;
    height: 1.14rem;
    min-width: 1.14rem;
  }

  .history-tags {
    font-size: .62rem;
  }
}

/* ============================================================
   Keno 号码球（澳洲幸运20 / 台湾宾果）
   ------------------------------------------------------------
   白底描边而非实心：20 个球密排时实心太吵。
   前区（1-40）浅蓝、后区（41-80）深色、特别号橙色，
   这样"前后多"那一列的统计在号码本身的深浅上就能看出来。

   放在文件末尾是有意的：必须排在 .lottery-ball 和
   .history-balls .lottery-ball 之后，否则实心球的
   min-width / padding / 阴影会把描边球撑宽——20 个球一撑，
   整张表就宽到把右侧的统计列挤出屏幕。
   ============================================================ */

.lottery-ball.ball-keno,
.lottery-ball.ball-keno-super {
  align-items: center;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .18);
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  height: 1.75rem;
  justify-content: center;
  /* 实心球那套 padding / min-width 会把球撑宽，
     20 个球一排就宽到把右侧统计列挤出屏幕 */
  min-width: 0;
  padding: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  width: 1.75rem;
}

.lottery-ball.ball-keno {
  background: linear-gradient(160deg, #fbbf24, #f97316);
}

/* 超级奖号：它不是第 21 颗球，就是这 20 个正码里的一个，标红即可 */
.lottery-ball.ball-keno-super {
  background: linear-gradient(160deg, #f87171, #dc2626);
}

/* 详情页顶部空间宽裕，球可以大一点 */
.detail-balls .lottery-ball.ball-keno,
.detail-balls .lottery-ball.ball-keno-super {
  font-size: .875rem;
  height: 2.25rem;
  width: 2.25rem;
}

/* 号码列按内容撑开即可，但不能被压缩——
   给它 width:1% 会让 11 列的球网格塌陷成一摞重叠的圆圈。 */
.history-table .col-balls {
  white-space: nowrap;
  width: auto;
}

/* 大小顺序 / 开出顺序 的切换，照台彩官方的做法 */
.ball-order-tabs {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
}

.ball-order-tab {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 600;
  padding: .375rem .875rem;
  transition: background .15s, color .15s, border-color .15s;
}

.ball-order-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ball-order-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.detail-balls[hidden] {
  display: none;
}