/* =========================================================================
   extra.css — phần bổ sung cho các trạng thái tương tác không có trong
   bản HTML gốc đã lưu (chọn cược, thanh chọn tiền, popup, dropdown, toast…).
   app.css giữ nguyên 100% CSS trích từ trang gốc, không sửa đổi.
   Bảng màu lấy đúng từ theme K3 gốc:
     #317455 nền chính · #19593c bảng phụ · #164630 tiêu đề · #1e4b37 chân bảng
     #caebda chữ nhạt · #212121 đường kẻ · #d83442→#b82541 đỏ chọn
     #252525 footer · #dc3b40 nút đặt cược · #ffaf36 nút xoá
   ========================================================================= */

:root {
  --k3-green: #317455;
  --k3-green-2: #19593c;
  --k3-green-3: #164630;
  --k3-green-4: #1e4b37;
  --k3-text-soft: #caebda;
  --k3-line: rgba(255, 255, 255, .3);
  --k3-red-1: #d83442;
  --k3-red-2: #c62c41;
  --k3-red-3: #b82541;
}

/* app.css đã có sẵn reset (body,html{margin:0} · li,ul{margin:0;padding:0}
   · h5,p{margin:0} · button{font:inherit}) nên ở đây không reset lại. */

/* ---------- 1. Ô cược: trạng thái đã chọn ---------- */
.BetItemsK3 ul li { position: relative; cursor: pointer; transition: background .12s linear, color .12s linear; }
.BetItemsK3.mode_0 ul li.on {
  background: linear-gradient(var(--k3-red-1), var(--k3-red-2), var(--k3-red-3));
  border-color: var(--k3-red-3);
  color: #fff;
}
.BetItemsK3.mode_0 ul li.on .rebate_text { color: rgba(255, 255, 255, .85); }
.BetItemsK3 ul li:active { background: rgba(255, 255, 255, .12); }
.BetItemsK3.mode_0 ul li.on:active { background: linear-gradient(var(--k3-red-2), var(--k3-red-3)); }
.BetItemsK3 ul li.on:after {
  content: ""; position: absolute; right: 0; top: 0;
  border: .32em solid transparent; border-right-color: #ffd45e; border-top-color: #ffd45e;
}

/* ---------- 2. Thanh chọn tiền (multip-select) ---------- */
.multip-select { box-shadow: 0 -1px 0 rgba(0, 0, 0, .12); }
.multip-select .van-line {
  display: flex; align-items: center;
  padding: .26rem .45rem; color: #414753; position: relative;
}
.multip-select .van-line + .van-line:before {
  content: ""; position: absolute; left: .45rem; right: .45rem; top: 0;
  height: 1px; background: #e7e7e7; transform: scaleY(.5);
}
.multip-select .chip_label { flex: none; margin-right: .35rem; color: #8b8f99; }
.multip-select .bar_chip { display: flex; flex: 1; gap: .22rem; overflow-x: auto; }
.multip-select .bar_chip::-webkit-scrollbar { display: none; }
.multip-select .bar_chip li {
  flex: none; min-width: 1.9rem; text-align: center; cursor: pointer;
  padding: .12rem .3rem; border-radius: .16rem;
  border: 1px solid #d6d9e0; background: #fff; color: #414753;
}
.multip-select .bar_chip li.on {
  background: linear-gradient(var(--k3-red-1), var(--k3-red-3));
  border-color: var(--k3-red-3); color: #fff;
}
.multip-select .unit_tip { margin-left: auto; color: #8b8f99; }

.multip-select .van-stepper { display: flex; align-items: center; }
.multip-select .van-stepper button {
  position: relative; width: 1.2rem; height: 1.2rem; padding: 0;
  border: 0; background: #ebedf0; cursor: pointer;
}
.multip-select .van-stepper__minus { border-radius: .16rem 0 0 .16rem; }
.multip-select .van-stepper__plus { border-radius: 0 .16rem .16rem 0; }
.multip-select .van-stepper__minus:after { display: none; }
.multip-select .van-stepper__input {
  width: 2.1rem; height: 1.2rem; margin: 0 2px; padding: 0; border: 0;
  text-align: center; background: #f2f3f5; color: #414753;
  font-size: inherit; -moz-appearance: textfield;
}
.multip-select .balance-box { padding: 0 .6rem 0 .4rem; font-size: .58rem; }

/* ---------- 3. Danh sách "我的投注" ---------- */
.MyBetK3 .k3_row.bet_item { display: flex; text-align: center; border-top: 1px solid var(--k3-line); }
.MyBetK3 .k3_row.bet_item li { padding: .3rem 0; line-height: 1.35; }
.MyBetK3 .bet_item .play { display: block; color: var(--k3-text-soft); font-size: .85em; }
.MyBetK3 .bet_item .win { color: #ffd45e; }
.MyBetK3 .bet_item .lose { color: var(--k3-text-soft); opacity: .75; }
.MyBetK3 .bet_item .pending { color: #8fd6b4; }
.MyBetK3 .bet_item .cancel_btn {
  border: 1px solid var(--k3-line); border-radius: .16rem;
  padding: .08rem .28rem; background: none; color: #fff; cursor: pointer;
}
.MyBetK3 .bet_item .cancel_btn[disabled] { opacity: .45; }
.k3_more_text a { color: var(--k3-text-soft); text-decoration: none; }

/* ---------- 4. Tab 投注记录 ---------- */
.record_pane { padding: .6rem .7rem 3rem; color: #fff; }
.record_wrap { font-size: .62rem; }
.record_empty { padding: 3rem 0; text-align: center; color: var(--k3-text-soft); }
.record_empty .TCIcon { width: 3rem; height: 3rem; fill: currentColor; opacity: .5; }
.record_empty p { margin-top: .5rem; }
.record_row {
  border: 1px solid var(--k3-line); border-radius: .2rem;
  padding: .4rem .5rem; margin-bottom: .4rem; background: rgba(0, 0, 0, .12);
}
.record_row .r_top { display: flex; justify-content: space-between; color: var(--k3-text-soft); }
.record_row .r_mid { display: flex; justify-content: space-between; margin-top: .25rem; }
.record_row .r_mid b { font-weight: 500; }
.record_row .r_win { color: #ffd45e; }
.record_row .r_lose { color: var(--k3-text-soft); }
.record_row .r_pending { color: #8fd6b4; }

/* ---------- 5. Dropdown menu góc phải (GameMenus) ---------- */
.GameMenus { position: relative; }
.menu_arrow { cursor: pointer; }
.menu_arrow.on .rotate_arrow { transform: rotate(180deg); }
.rotate_arrow { transition: transform .3s; }
.list_wrapper { position: absolute !important; right: .3rem; top: 100%; z-index: 120; }
.list_wrapper .menu_list {
  background: hsla(0, 0%, 100%, .96); border-radius: .2rem;
  min-width: 5.2rem; overflow: hidden; color: #333; text-align: left;
  box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .35); font-size: .62rem; line-height: 1.6;
}
.list_wrapper .menu_list li { padding: .38rem .6rem; cursor: pointer; }
.list_wrapper .menu_list li + li { border-top: 1px solid rgba(0, 0, 0, .08); }
.list_wrapper .menu_list li:active { background: rgba(0, 0, 0, .06); }

/* ---------- 6. Bảng chọn玩法 ---------- */
.lottery_mode { cursor: pointer; }
.lottery_mode.on .rotate_box { transform: rotate(180deg); }
.mode-mask { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .55); }
.mode-panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--k3-green-2); color: #fff;
  border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem;
  padding-bottom: .5rem; animation: modeDown .22s ease-out;
}
@keyframes modeDown { from { transform: translateY(-100%); } to { transform: none; } }
.mode-panel__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .7rem; font-size: .7rem; background: var(--k3-green-3);
}
.mode-panel__hd .close { cursor: pointer; font-size: .8rem; }
.mode-panel ul { display: flex; flex-wrap: wrap; padding: .5rem .35rem 0; }
.mode-panel li {
  width: calc(33.333% - .5rem); margin: .25rem; padding: .35rem 0;
  text-align: center; font-size: .62rem; cursor: pointer;
  border: 1px solid var(--k3-line); border-radius: .2rem;
}
.mode-panel li .p2 { position: relative; display: block; font-size: .8em; color: var(--k3-text-soft); }
.mode-panel li.on { background: linear-gradient(var(--k3-red-1), var(--k3-red-3)); border-color: var(--k3-red-3); }
.mode-panel li.on .p2 { color: rgba(255, 255, 255, .85); }

/* ---------- 7. Dialog ---------- */
.tc-dialog-mask {
  position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .7);
  display: flex; align-items: center; justify-content: center;
}
.tc-dialog {
  width: 14rem; background: #fff; border-radius: .35rem; overflow: hidden;
  color: #323233; animation: dialogIn .2s ease-out;
}
@keyframes dialogIn { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.van-dialog__header { padding: .7rem .6rem .2rem; text-align: center; font-size: .7rem; font-weight: 500; }
.van-dialog__content { max-height: 12rem; overflow-y: auto; }
.van-dialog__message {
  padding: .4rem .8rem .7rem; text-align: center;
  font-size: .62rem; line-height: 1.6; color: #646566; word-break: break-word;
}
.van-dialog__message .d_line { display: flex; justify-content: space-between; }
.van-dialog__message .d_line span:last-child { color: #323233; }
.van-dialog__message .d_total { margin-top: .3rem; color: #ee0a24; font-size: .68rem; }
.van-dialog__footer { display: flex; border-top: 1px solid #ebedf0; }
.van-dialog__footer button {
  flex: 1; height: 1.85rem; border: 0; background: #fff;
  font-size: .68rem; cursor: pointer;
}
.van-dialog__cancel { color: #646566; border-right: 1px solid #ebedf0 !important; }
.van-dialog__confirm { color: #1989fa; font-weight: 500; }

/* Hộp "温馨提示" khi kỳ vừa đổi — chỉ 1 nút, không có Huỷ */
.notice_row { color: #323233; }
.notice_row + .notice_row { margin-top: .15rem; }
.notice_hl { color: #ee0a24; font-weight: 700; }

/* ---------- 8. Sheet (走势 / 长龙 / 玩法说明) ---------- */
.tc-sheet-mask { position: fixed; inset: 0; z-index: 350; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; }
.tc-sheet {
  width: 100%; max-height: 72%; display: flex; flex-direction: column;
  background: var(--k3-green-2); color: #fff;
  border-top-left-radius: .5rem; border-top-right-radius: .5rem;
  animation: sheetUp .24s ease-out;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.tc-sheet__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .7rem; font-size: .68rem; background: var(--k3-green-3);
  border-top-left-radius: .5rem; border-top-right-radius: .5rem;
}
.tc-sheet__hd .close { cursor: pointer; font-size: .8rem; }
.tc-sheet__bd { padding: .5rem .7rem 1rem; overflow-y: auto; font-size: .6rem; line-height: 1.8; }
.tc-sheet__bd::-webkit-scrollbar { display: none; }
.tc-sheet__bd h6 { margin: .4rem 0 .2rem; font-size: .64rem; color: #ffd45e; }
.tc-sheet__bd p { color: var(--k3-text-soft); }

/* bảng 走势 */
.trend_table { width: 100%; border-collapse: collapse; font-size: .55rem; }
.trend_table th, .trend_table td { border: 1px solid var(--k3-line); padding: .18rem 0; text-align: center; }
.trend_table th { background: var(--k3-green-3); color: var(--k3-text-soft); font-weight: 400; }
.trend_table .hit { background: #cc5848; border-radius: 50%; display: inline-block; width: 1.1em; height: 1.1em; line-height: 1.1em; }
.trend_table .hit.blue { background: #2e93b0; }

/* 长龙 */
.dragon_row { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--k3-line); }
.dragon_row .d_name { color: var(--k3-text-soft); }
.dragon_row .d_cnt { color: #ffd45e; font-size: .8rem; }

/* ---------- 9. Toast ---------- */
.tc-toast {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  z-index: 500; max-width: 70%; padding: .45rem .7rem;
  background: rgba(0, 0, 0, .82); color: #fff; border-radius: .25rem;
  font-size: .62rem; line-height: 1.5; text-align: center; pointer-events: none;
}

/* ---------- 10. Nút trợ giúp (AssistiveTouch) ---------- */
.helpBtn { touch-action: none; }
.helpBtn .circle { transition: transform .2s; }
.helpBtn.dragging .circle { transform: scale(1.06); }
.helpBtn .mainBtn { transition: opacity .12s; }
.helpBtn.on .mainBtn { opacity: 0; }
.helpBtn.on .bar { display: block !important; }
.helpBtn .helpItem { cursor: pointer; }
.helpBtn.on .helpItem { transform: scale(1); }
.helpBtn.on .helpItem:nth-child(1) { transform: translate(-3.05em, 0) scale(1); }
.helpBtn.on .helpItem:nth-child(2) { transform: translate(-2.16em, -2.16em) scale(1); }
.helpBtn.on .helpItem:nth-child(3) { transform: translate(0, -3.05em) scale(1); }
.helpBtn .list li { transition: transform .18s cubic-bezier(.4, 1.6, .6, 1); }

/* ---------- 11. Chi tiết nhỏ ---------- */
.k3-icon { cursor: pointer; }
.choose_tab .tabs { cursor: pointer; -webkit-user-select: none; user-select: none; }
.menu_btn { cursor: pointer; }
.new-btn-more span { cursor: pointer; }
.q-virtual-scroll::-webkit-scrollbar { width: 0; display: none; }
.time-box.hurry { color: #ff6a6a !important; }
/* JS tự lo cuộn + đà trôi sau khi buông tay cho khung lịch sử phiên (xem
   app.js) — tắt quán tính gốc của trình duyệt để khỏi bị cộng dồn 2 lần. */
#pastScroll { touch-action: none; -webkit-overflow-scrolling: auto; overscroll-behavior: contain; }
/* Tắt "scroll anchoring": danh sách ảo liên tục đổi chiều cao phần đệm nằm
   trên vùng nhìn, trình duyệt sẽ tự dời scrollTop để neo lại chỗ đang xem —
   nhìn đúng như danh sách tự trôi thêm dù tay đã giữ yên. */
#pastScroll, #pastScroll * { overflow-anchor: none; }
/* Đổi mặt lúc đang quay do JS tự làm (setInterval đổi background-image lần
   lượt qua dice-tilt-1..4.png — ảnh xúc xắc nghiêng người dùng cung cấp, đã
   xoá nền). KHÔNG xoay ngang dọc gì thêm, chỉ display nối tiếp nhau. Trước
   đó thử animate "background-position" bằng % qua @keyframes CSS nhưng
   không nội suy đúng trên nền background-size:600%, đứng yên không đổi mặt. */
.billiard li.Dice.rolling {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center !important;
}

/* ---------- 12. Phóng to xúc xắc theo yêu cầu ---------- */
/* Bản gốc: hàng xúc xắc kỳ hiện tại và trong bảng lịch sử đều dùng 1.4em.
   Ghi đè !important vì app.css định nghĩa cùng mức độ cụ thể (class+class). */
.billiard li.Dice { width: 1.75em !important; height: 1.75em !important; }
.Dice[data-v-47e8e20c] { width: 1.7em !important; height: 1.7em !important; }

/* ---------- 13. Trạng thái "đã bấm mắt" của 余额 ---------- */
/* Mắt nhắm + ¥0 (luôn là 0, đây là dạng CHE chứ không phải hiện số thật) +
   nút làm mới — thay hẳn cho nhãn "余额 + mắt mở" mặc định, không phải cùng
   một khối chỉ đổi chữ bên trong. */
.balance_revealed { display: flex; align-items: center; gap: .3rem; color: #fff; }
.balance_revealed .v-icon-eye { font-size: .78rem; }
.balance_revealed .balance_masked { font-size: .66rem; font-weight: 600; }
.balance_revealed .icon { width: .62rem; height: .62rem; fill: currentColor; }