/* ==========================================================================
   WANLI 前台复刻 · 主样式
   四屏：登录 / 协议 / 大厅 / 牌桌
   所有坐标取自真实站的 getBoundingClientRect（1440×900 基准）
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 四屏用 hidden 属性切换；.game-screen 等设了 display 的元素会压掉默认的 display:none，这里强制兜底 */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: #050807;
  color: var(--wl-text);
  font: 400 16px/1.5 var(--wl-font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
img { display: block; }

/* 舞台：等比缩放到视口，保证 1440×900 的像素级还原 */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1440px; height: 900px;
  margin: -450px 0 0 -720px;
  transform-origin: 50% 50%;
  overflow: hidden;
}

/* 通用石纹/氛围层 */
.stone {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 72% 40%, rgba(246,198,113,.07), rgba(0,0,0,0) 38%),
    linear-gradient(90deg, rgba(61,5,10,.08), rgba(61,5,10,.016) 47%, rgba(35,3,7,.16));
}
.ambient-lights, .rail-glint, .motes { position: absolute; inset: 0; pointer-events: none; }

/* ==========================================================================
   1. 登录
   ========================================================================== */
.login-view {
  position: absolute; inset: 0;
  background: url("../assets/brand/wanli-phaser-inspired-login-bg-v8-three-gold-bitcoins.webp")
              no-repeat 50% 50% / cover;
}
.login-view::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,10,7,.55), rgba(2,10,7,.12) 42%, rgba(2,10,7,.62));
  pointer-events: none;
}

.topbar {
  position: absolute; left: 0; top: 0; width: 1440px; height: 64px;
  z-index: 4;
}
.agent {
  position: absolute; left: 52px; top: 15px; width: 164px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; line-height: 12px;
  color: #e8ce98;
  background: linear-gradient(rgba(51,71,59,.96), rgba(12,25,20,.98));
  border: 1px solid rgba(225,190,122,.5); border-radius: 6px;
  box-shadow: rgba(255,237,197,.12) 0 1px 0 inset, rgba(0,0,0,.3) 0 6px 14px;
  text-shadow: #000 0 1px 2px;
  transition: transform .2s, filter .2s;
}
.agent:hover { filter: brightness(1.14); transform: translateY(-1px); }

.languages {
  position: absolute; left: 782px; top: 9px;
  width: 606px; height: 46px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(rgba(27,46,38,.88), rgba(7,16,13,.92));
  border: 1px solid rgba(225,190,122,.32); border-radius: 16px;
  box-shadow: rgba(255,235,192,.06) 0 1px 0 inset, rgba(0,0,0,.28) 0 8px 24px;
  backdrop-filter: blur(10px);
}
.languages button {
  width: 48px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; opacity: .62;
  transition: opacity .18s, background .18s, transform .18s;
}
.languages button:hover { opacity: .95; background: rgba(255,232,182,.08); }
.languages button.active {
  opacity: 1; background: rgba(255,232,182,.13);
  box-shadow: rgba(255,231,178,.24) 0 0 0 1px inset;
}

.content {
  position: absolute; left: 40px; top: 64px; width: 1360px; height: 836px;
  display: flex; align-items: center; justify-content: flex-end;
}
.brand { flex: 1 1 auto; height: 420px; }

.card-shell { flex: 0 0 442px; width: 442px; height: 584px; position: relative; }
.card {
  width: 442px; height: 584px;
  padding: 32px 42px 34px;
  background:
    radial-gradient(circle at 76% 4%, rgba(95,130,99,.12), rgba(0,0,0,0) 34%),
    linear-gradient(145deg, rgba(16,39,29,.91), rgba(3,15,10,.965));
  border: 1px solid rgba(220,181,105,.48); border-radius: 1px;
  box-shadow: rgba(255,235,191,.024) 0 0 0 1px inset, rgba(0,0,0,.3) 0 28px 64px;
  backdrop-filter: blur(9px);
  overflow: hidden;
  position: relative;
}
.desktop-login-logo {
  width: 252px; height: 82px; margin: -18px 52px 12px;
  object-fit: contain;
}
.kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 3px; color: #b99b62;
}
.kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #d9b478; box-shadow: 0 0 8px rgba(217,180,120,.8);
}
.title {
  color: #f3dfb7;
  font: 500 30px/40px var(--wl-font-number);
  letter-spacing: 6px;
  margin: 10px 0 7px;
}
.copy {
  color: rgba(198,168,115,.82);
  font-size: 13px; letter-spacing: .6px; min-height: 23px;
}
.field { display: block; margin-top: 22px; }
.field-label {
  display: block; margin-bottom: 7px;
  color: var(--wl-text-dim);
  font-size: 14px; line-height: 19px; letter-spacing: 1.5px;
}
.field-box {
  width: 356px; height: 53px;
  display: flex; align-items: center;
  background: rgba(238,229,208,.055);
  border: 1px solid rgba(225,190,120,.28); border-radius: 2px;
  box-shadow: rgba(0,0,0,.17) 0 1px 8px inset;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-box:focus-within {
  border-color: rgba(225,190,120,.62);
  background: rgba(238,229,208,.08);
  box-shadow: rgba(0,0,0,.17) 0 1px 8px inset, rgba(225,190,120,.12) 0 0 0 3px;
}
.field-box .icon {
  width: 43px; display: flex; align-items: center; justify-content: center;
  color: rgba(198,168,115,.72); font-size: 15px;
}
.field-box input {
  flex: 1; height: 51px; padding-right: 12px;
  color: #f0e3ca; font-size: 16px; letter-spacing: 1px;
}
.field-box input::placeholder { color: rgba(198,168,115,.34); }

.verify-host { width: 356px; height: 65px; margin-top: 3px; position: relative; }
.native-verification {
  width: 300px; height: 65px; margin-left: 28px;
  display: flex; align-items: center;
  background: linear-gradient(rgba(38,58,47,.72), rgba(9,22,16,.82));
  border: 1px solid rgba(225,190,122,.42); border-radius: 4px;
  box-shadow: rgba(255,237,197,.1) 0 1px 0 inset, rgba(0,0,0,.24) 0 6px 16px;
  position: relative; overflow: hidden;
}
.native-verification.is-verified { border-color: rgba(225,190,122,.72); }
.native-verification-check {
  width: 30px; height: 30px; margin-left: 19px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #e2be77; border-radius: 50%;
  color: #ffe8b6; font-size: 17px; font-weight: 700;
}
.native-verification-title {
  margin-left: 3px; padding-left: 3px;
  color: #f7e3ad; font-size: 23px; font-weight: 700; line-height: 28px;
  letter-spacing: 1px;
}
.native-verification:not(.is-verified) .native-verification-check { opacity: .3; }
.native-verification:not(.is-verified) .native-verification-title { color: rgba(198,168,115,.7); }

.login {
  width: 356px; height: 52px; margin-top: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #24190b; font-size: 16px; font-weight: 700; letter-spacing: 5px;
  background: linear-gradient(105deg, #98703a, #e1bd74 38%, #c9974d 66%, #79552a);
  border-radius: 2px;
  box-shadow: rgba(255,239,205,.56) 0 1px 0 inset, rgba(0,0,0,.28) 0 11px 24px;
  transition: filter .18s, transform .12s;
}
.login:hover { filter: brightness(1.07); }
.login:active { transform: translateY(1px); }
.login[disabled] { filter: grayscale(.5) brightness(.8); cursor: not-allowed; }

.login-error {
  min-height: 18px; margin-top: 10px;
  color: #e8796c; font-size: 12.5px; letter-spacing: .4px;
}
.footer {
  position: absolute; left: 531px; top: 873px; width: 377px; height: 12px;
  color: rgba(226,204,162,.58); font-size: 9px; letter-spacing: 3px;
  text-align: center; text-transform: uppercase; z-index: 4;
}

/* ==========================================================================
   2. 协议确认
   ========================================================================== */
.license-screen { position: absolute; inset: 0; background: linear-gradient(145deg, #1a261f, #0a120e 62%, #070c0a); }
.license-composition {
  position: absolute; left: 65px; top: 38px;
  width: 1310px; height: 824px;
  display: grid; grid-template-columns: 1000px 310px;
}
.agreement-panel {
  width: 1000px; height: 824px; position: relative;
  background: linear-gradient(160deg, rgba(20,45,32,.96), rgba(6,17,12,.99));
  border: 1px solid rgba(229,193,123,.55);
  box-shadow: var(--wl-panel-shadow);
}
.vue-agreement-heading {
  position: absolute; left: 16px; top: 16px; width: 968px; height: 68px;
  display: grid; grid-template-columns: 180px 548px 180px; align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid rgba(225,190,122,.22);
}
.vue-agreement-heading h1 {
  grid-column: 2; text-align: center;
  color: #ffe8b6; font: 500 27px/1 var(--wl-font-number); letter-spacing: 8px;
  text-shadow: rgba(226,190,119,.34) 0 0 16px;
}
.vue-agreement-heading span {
  grid-column: 1; grid-row: 1; font-size: 0;
}
.vue-agreement-heading span::before {
  content: "••••"; font-size: 13px; letter-spacing: 5px; color: rgba(225,190,122,.6);
}
.vue-agreement-heading i {
  grid-column: 3; grid-row: 1; justify-self: end;
  width: 76px; height: 1px; background: linear-gradient(90deg, rgba(225,190,122,.05), rgba(225,190,122,.6));
}
.agreement-scroll {
  position: absolute; left: 15px; top: 85px; width: 970px; height: 724px;
  padding: 38px 70px 44px 52px;
  overflow-y: auto; overflow-x: hidden;
  font-size: 15.5px; line-height: 1.95;
  color: rgba(226,209,175,.9);
  scrollbar-width: thin; scrollbar-color: rgba(225,190,122,.4) transparent;
}
.agreement-scroll::-webkit-scrollbar { width: 8px; }
.agreement-scroll::-webkit-scrollbar-thumb { background: rgba(225,190,122,.34); border-radius: 4px; }
.agreement-scroll p { margin-bottom: 12px; text-indent: 0; }
.agreement-scroll p.notice-title {
  margin-top: 16px; color: #ffe8b6; font-weight: 700; letter-spacing: 2px;
}
.agreement-scroll p.final-line {
  margin-top: 14px; text-align: right; color: #e9c98c; letter-spacing: 2px;
}
.agreement-side {
  width: 310px; height: 824px; position: relative;
  background: linear-gradient(160deg, rgba(22,48,34,.92), rgba(7,19,13,.98));
  border: 1px solid rgba(229,193,123,.4); border-left: 0;
}
.agreement-logo {
  position: absolute; left: 52px; top: 37px; width: 206px; height: 120px;
  object-fit: contain;
}
.agreement-rule {
  position: absolute; left: 90px; top: 164px; width: 130px; height: 1px;
  background: linear-gradient(90deg, rgba(225,190,122,0), rgba(225,190,122,.75), rgba(225,190,122,0));
}
.vue-license-copy {
  position: absolute; left: 24px; top: 207px; width: 261px; height: 81px;
  text-align: center;
}
.vue-license-copy span {
  display: block; font-size: 13px; letter-spacing: 4px; color: #b99b62;
}
.vue-license-copy b {
  display: block; margin: 4px 0 6px;
  font: 500 25px/1.2 var(--wl-font-number); letter-spacing: 5px; color: #ffe8b6;
}
.vue-license-copy p { font-size: 11.5px; line-height: 1.7; color: rgba(198,168,115,.78); }
.vue-license-ornament {
  position: absolute; left: 34px; top: 327px; width: 241px; height: 6px;
  display: grid; grid-template-columns: 93px 34px 93px; gap: 10px; align-items: center;
  font-size: 6px; font-weight: 600; color: rgba(225,190,122,.55); letter-spacing: 2px;
  text-align: center;
}
.vue-license-ornament i { height: 1px; background: linear-gradient(90deg, rgba(225,190,122,.05), rgba(225,190,122,.55)); }
.vue-license-ornament i:last-child { background: linear-gradient(90deg, rgba(225,190,122,.55), rgba(225,190,122,.05)); }
.agreement-actions {
  position: absolute; left: 0; top: 637px; width: 309px; height: 128px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.agreement-button {
  width: 190px; height: 56px;
  font-size: 21px; font-weight: 700; letter-spacing: 6px;
  border-radius: 4px;
  transition: filter .18s, transform .12s;
}
.agreement-button.agree-action {
  color: #24190b;
  background: linear-gradient(#efcf87, #b77b33 54%, #83501d);
  box-shadow: rgba(255,248,220,.6) 0 1px 0 inset, rgba(39,3,4,.2) 0 7px 14px;
}
.agreement-button.disagree-action {
  color: #d8c3a0;
  background: linear-gradient(rgba(38,55,47,.96), rgba(13,25,20,.98));
  border: 1px solid rgba(225,190,122,.44);
  box-shadow: rgba(255,237,197,.12) 0 1px 0 inset;
}
.agreement-button:hover { filter: brightness(1.1); }
.agreement-button:active { transform: translateY(1px); }
.agreement-button[disabled] {
  filter: grayscale(.62) brightness(.66); cursor: not-allowed;
  box-shadow: none;
}
.agreement-button[disabled]:hover { filter: grayscale(.62) brightness(.66); }
.agreement-button[disabled]:active { transform: none; }

/* ==========================================================================
   3. 大厅
   ========================================================================== */
.hall-screen {
  position: absolute; inset: 0;
  background: url("../assets/brand/wanli-yongli-clean-hall-bg-emerald-v1.webp")
              no-repeat 50% 50% / cover;
  color: var(--wl-text-hall);
}
.hall-screen::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 12%, rgba(31,83,66,.4), rgba(0,0,0,0) 58%);
  pointer-events: none;
}
.hall-header {
  position: absolute; left: 0; top: 0; width: 1440px; height: 68px;
  display: flex; align-items: center;
  background: linear-gradient(rgba(37,57,47,.98), rgba(10,21,17,.99));
  box-shadow: rgba(0,0,0,.34) 0 11px 28px, rgba(255,232,182,.07) 0 1px 0 inset;
  z-index: 3;
}
.hall-brand-patch { width: 186px; height: 68px; display: grid; place-items: center; }
.hall-brand-patch img { width: 154px; height: 52px; object-fit: contain; }
.hall-news {
  width: 838px; height: 68px; position: relative; overflow: hidden;
  display: flex; align-items: center;
  font: 500 28px/1 var(--wl-font-serif);
  color: #e3cb9b; text-shadow: rgba(0,0,0,.6) 0 2px 5px;
}
.wanli-marquee-track {
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap; padding-left: 0;
  animation: marquee 38s linear infinite;
}
.wanli-marquee-track b {
  flex: 0 0 auto; padding: 2px 10px;
  font-size: 15px; letter-spacing: 2px; color: #ffe8b6;
  border: 1px solid rgba(225,190,122,.5); border-radius: 3px;
  background: rgba(48,32,12,.6);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hall-header-actions {
  position: absolute; left: 1024px; top: 10px; width: 394px; height: 48px;
  display: flex; align-items: center; padding: 4px;
}
.hall-header-actions button {
  width: 128px; height: 38px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 14px;
  font: 700 12px/1 var(--wl-font-serif); letter-spacing: 1px;
  color: #e4cda0; border-radius: 1px;
  text-shadow: rgba(44,2,5,.5) 0 1px 3px;
  transition: background .18s, color .18s;
}
.hall-header-actions button:hover { background: rgba(255,232,182,.08); color: #ffe8b6; }
.hall-action-icon {
  width: 17px; height: 17px; display: block; flex: 0 0 17px;
  background: currentColor; opacity: .85;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat;
}
.hall-action-icon.record { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16v3H4zM4 10h16v2H4zM4 15h10v2H4z'/></svg>"); }
.hall-action-icon.key { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM12 14l1.5 1.5L9 20H6v-3z'/></svg>"); }
.hall-action-icon.exit { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5zM15 7l-1.4 1.4L16.2 11H9v2h7.2l-2.6 2.6L15 17l5-5z'/></svg>"); }

.hall-list { position: absolute; left: 0; top: 68px; width: 1440px; height: 832px; }
.hall-tile-grid {
  position: absolute; left: 22px; top: 14px; width: 1396px; height: 800px;
  display: grid; grid-template-columns: 692px 692px; grid-auto-rows: 350px;
  gap: 12px;
}
.hall-tile-card {
  width: 692px; height: 350px; position: relative;
  background:
    linear-gradient(155deg, rgba(39,63,51,.98), rgba(15,31,24,.99) 54%, rgba(7,17,13,.996));
  border: 1px solid transparent; border-radius: 2px;
  box-shadow: var(--wl-card-shadow);
  background-clip: padding-box;
  cursor: pointer;
  transition: transform .18s, filter .18s, box-shadow .18s;
}
.hall-tile-card::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(247,214,152,.09); border-radius: 1px;
}
/* 金色描边：用 ::after 做 1px 渐变边 */
.hall-tile-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 2px; padding: 1px;
  background: linear-gradient(125deg, rgba(245,214,151,.78), rgba(106,83,43,.6), rgba(212,169,88,.72));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
.hall-tile-card:hover { filter: brightness(1.06); box-shadow: rgba(0,0,0,.34) 0 18px 34px, rgba(239,190,89,.16) 0 0 22px; }
.hall-tile-card.is-maintenance { cursor: default; }
.hall-tile-card.is-maintenance:hover { filter: none; box-shadow: var(--wl-card-shadow); }

.hall-tile-head {
  position: absolute; left: 1px; top: 1px; width: 690px; height: 66px;
  display: grid; grid-template-columns: 172px 432px 86px; align-items: center;
  background: linear-gradient(90deg, rgba(68,96,78,.55), rgba(31,55,44,.66) 46%, rgba(13,29,22,.84));
  box-shadow: rgba(255,233,186,.1) 0 1px 0 inset, rgba(44,2,6,.08) 0 -10px 22px inset;
}
.hall-tile-title {
  width: 172px; height: 65px; padding-left: 24px;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff0ca; font: 600 21px/1 var(--wl-font-serif);
  text-shadow: rgba(0,0,0,.5) 0 1px 4px;
}
.hall-tile-title small {
  display: block; margin-bottom: 3px;
  font: 600 10px/1 var(--wl-font); letter-spacing: 1.5px; color: rgba(198,168,115,.8);
  white-space: nowrap; overflow: hidden;
}
.hall-tile-title span {
  display: block; font-size: 25px; letter-spacing: 2px;
  /* 桌名必须单行：原站卡头是「VIP 1」这种短名，一旦折行会把 65px 的卡头撑破 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hall-tile-stats {
  width: 218px; height: 38px; justify-self: center;
  display: grid; grid-template-columns: 68px 68px 68px; gap: 7px;
}
.hall-tile-stats span {
  display: grid; grid-template-columns: 20px 32px; align-items: center;
  padding: 0 7px;
  border: 1px solid rgba(244,205,132,.12); border-radius: 2px;
  background: linear-gradient(rgba(255,238,198,.035), rgba(3,13,10,.14));
  box-shadow: rgba(255,237,194,.043) 0 1px 0 inset;
}
.hall-tile-stats em { font: 600 12px/1 var(--wl-font); font-style: normal; opacity: .92; }
.hall-tile-stats b { font: 500 18px/1 var(--wl-font-number); text-align: right; }
.hall-tile-stats .b { color: var(--wl-banker); }
.hall-tile-stats .p { color: var(--wl-player); }
.hall-tile-stats .t { color: var(--wl-tie); }

.hall-tile-time {
  width: 86px; height: 65px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #ffe0a1; font-family: var(--wl-font-number); font-weight: 500;
  background: linear-gradient(rgba(255,229,178,.024), rgba(3,13,10,.16));
}
.hall-tile-time b { font-size: 25px; line-height: 1.05; }
.hall-tile-time small { font: 500 9px/1 var(--wl-font); letter-spacing: 2px; opacity: .7; }
.hall-tile-time.critical b { color: #ff7569; text-shadow: rgba(224,52,46,.62) 0 0 8px; }
.hall-tile-time.maintenance { color: rgba(187,167,128,.72); }
.hall-tile-time.maintenance b { font-size: 21px; }

.hall-tile-road-wrap {
  position: absolute; left: 11px; top: 76px; width: 670px; height: 209px;
  padding: 3px;
  background: rgba(6,14,11,.62);
  border: 1px solid rgba(229,193,123,.22);
}
.hall-tile-road { width: 662px; height: 201px; display: block; background: #d8dcdc; }
.hall-tile-foot {
  position: absolute; left: 18px; top: 308px; width: 656px; height: 28px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
}
.hall-table-status { color: var(--wl-tie); letter-spacing: 1px; }
.hall-table-status.is-maintenance { color: rgba(187,167,128,.72); }
.hall-select-label {
  font-size: 28px; letter-spacing: 4px; color: #bba780;
  text-shadow: rgba(0,0,0,.5) 0 1px 4px;
}

/* ==========================================================================
   4. 牌桌
   --------------------------------------------------------------------------
   本节所有数值直接取自 capture5/table.styles.json（原站 getComputedStyle）。
   原站用的是 grid，不是绝对定位——这里照搬，避免逐像素对不齐：
     .game-screen  grid 1420px / 40px 596px 238px，padding 0 10px 10px，gap 8
     .game-topbar  grid 226px 860px 354px
     .game-main    grid 858.344px 552.641px，gap 9
     .game-side    grid 536.641px / 58 92 298 48 60，padding 7，gap 6
     .game-bets    grid 6×83.6 / 171.688 119.297，gap 7
     .game-controls grid 104 209.312 209.328，gap 7
     .game-road-shell grid 172 1225，padding 7，gap 7
   ========================================================================== */
.game-screen {
  position: absolute; inset: 0;
  background:
    radial-gradient(at 42% 35%, rgba(31,83,66,.28), rgba(0,0,0,0) 44%),
    linear-gradient(145deg, #1d2b25, #101916 42%, #080d0c 78%, #1b130b);
  box-shadow: var(--wl-inset-frame);
  color: var(--wl-text);
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: 1420px;
  grid-template-rows: 40px 596px 238px;
  gap: 8px;
}

/* ---- 顶栏 ---- */
.game-topbar {
  position: relative; width: 1440px; height: 40px;
  margin-left: -10px;
  /* 实测：顶栏高 40，内部三段（品牌 / 跑马灯 / 操作）都是 28 高，垂直居中 */
  display: grid; grid-template-columns: 226px 860px 354px;
  align-items: center;
  background: linear-gradient(#26372f, #131f1b 58%, #0b1210);
  box-shadow: rgba(237,204,138,.12) 0 -1px 0 inset, rgba(0,0,0,.28) 0 5px 18px;
  z-index: 3;
}
.game-brand {
  width: 226px; height: 40px;
  display: flex; align-items: center; gap: 10px; padding-left: 14px;
}
.game-brand img { width: 100px; height: 34px; object-fit: contain; }
.game-back {
  width: 82px; height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 1px 6px;
  font: 600 10px/1 var(--wl-font-serif); letter-spacing: 1px;
  color: #dfc58f;
  border: 1px solid transparent; border-radius: 0;
  background: linear-gradient(rgba(45,64,53,.7), rgba(14,26,21,.8));
  box-shadow: rgba(255,238,199,.1) 0 1px 0 inset, rgba(0,0,0,.16) 0 -7px 13px inset,
              rgba(0,0,0,.2) 0 4px 10px;
  text-shadow: rgba(0,0,0,.65) 0 1px 2px;
  transition: filter .18s;
}
.game-back:hover { filter: brightness(1.16); }
.game-top-icon {
  width: 17px; height: 17px; flex: 0 0 17px; background: currentColor; opacity: .85;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat;
}
.game-top-icon.back { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 6l-6 6 6 6z'/></svg>"); }
.game-top-icon.record { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16v3H4zM4 10h16v2H4zM4 15h10v2H4z'/></svg>"); }
.game-top-icon.key { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM12 14l1.5 1.5L9 20H6v-3z'/></svg>"); }
.game-top-icon.exit { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5zM15 7l-1.4 1.4L16.2 11H9v2h7.2l-2.6 2.6L15 17l5-5z'/></svg>"); }

.game-marquee {
  width: 860px; height: 28px;
  overflow: hidden; display: block;
  font: 600 15px/28px var(--wl-font-serif); color: #edcf92;
}
.game-marquee .wanli-marquee-track { gap: 10px; font-size: 15px; animation-duration: 44s; height: 28px; }
.game-marquee .wanli-marquee-track b { font-size: 11px; padding: 1px 7px; }

.game-top-actions {
  width: 354px; height: 28px; padding-right: 14px;
  display: flex; align-items: center; gap: 6px;
}
.game-top-action {
  width: 102px; height: 28px; padding: 1px 6px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 10px/1 var(--wl-font-serif); letter-spacing: 1px;
  color: #dfc58f;
  border: 1px solid transparent;
  text-shadow: rgba(0,0,0,.65) 0 1px 2px;
  transition: color .18s, background .18s, box-shadow .18s;
}
.game-top-action:hover {
  color: #ffe8b6; background: rgba(255,232,182,.07);
  box-shadow: rgba(255,238,199,.1) 0 1px 0 inset, rgba(0,0,0,.16) 0 -7px 13px inset;
}

/* ---- 主区：左视频 / 右操作 ---- */
.game-main {
  position: relative; width: 1420px; height: 596px;
  display: grid; grid-template-columns: 858.344px 552.641px; gap: 9px;
}
.game-video-shell {
  position: relative; width: 858.344px; height: 596px; padding: 7px;
  background: linear-gradient(rgba(31,45,38,.97), rgba(10,18,15,.99));
  border: 1px solid var(--wl-gold-line);
  box-shadow: var(--wl-panel-shadow);
}
.game-video-frame {
  position: relative; width: 842.344px; height: 580px;
  border: 1px solid rgba(234,191,112,.26);
}
.game-video-surface { position: absolute; inset: 0; background: #04120c; overflow: hidden; }
.game-video-surface canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-video-surface .video-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(20,74,52,.55), rgba(2,10,7,.95) 72%),
    linear-gradient(160deg, #0d2a1d, #05100b);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: rgba(198,168,115,.66); font-size: 13px; letter-spacing: 3px;
}
.game-video-surface .video-placeholder svg { width: 54px; height: 54px; opacity: .5; }
/* [hidden] 要压过 display:flex，否则占位层盖在视频上 */
.game-video-surface .video-placeholder[hidden] { display: none !important; }

/* 牌桌视讯：录像回放铺满整个视频区，保持 4:3 裁切不拉伸 */
.game-video-surface .table-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  background: #04120c; cursor: pointer;
  filter: saturate(1.02) contrast(1.02);
}

.game-video-caption {
  position: absolute; left: 23px; top: 71px; width: 220px; height: 66px;
  padding: 10px 18px 9px 22px;
  border: 1px solid transparent;
  box-shadow: rgba(242,231,195,.06) 0 1px 0 inset, rgba(0,0,0,.26) 0 8px 19px;
  color: #fff0ca;
  display: flex; flex-direction: column; justify-content: center;
  text-shadow: rgba(0,0,0,.6) 0 1px 3px;
}
.game-video-caption strong { font: 600 17px/1.25 var(--wl-font-serif); letter-spacing: 2px; }
.game-video-caption span { font-size: 12px; letter-spacing: 1px; opacity: .8; }

.game-video-pool {
  position: absolute; left: 23px; top: 130px; width: 220px; height: 216px;
  padding: 9px 11px;
  background: linear-gradient(160deg, rgba(19,57,41,.66), rgba(3,20,13,.72));
  box-shadow: rgba(235,245,221,.055) 0 1px 0 inset;
  backdrop-filter: blur(3px);
}
.game-video-pool-title {
  width: 198px; height: 42px; padding: 7px 12px 5px;
  display: flex; align-items: center;
  font: 700 20px/1 var(--wl-font-serif); color: #ead5a5;
  text-shadow: rgba(0,0,0,.55) 0 2px 6px;
  border-bottom: 1px solid rgba(225,190,122,.2);
}
.game-pool-row {
  width: 196px; height: 32px; padding: 0 7px;
  display: grid; grid-template-columns: 7px 72px 93px; grid-template-rows: 31px;
  align-items: center; gap: 5px;
  font-size: 15px; color: #d8c196;
  background: linear-gradient(90deg, rgba(255,236,191,.024), rgba(0,0,0,0) 62%);
}
.game-pool-accent { width: 7px; height: 18px; border-radius: 1px; }
.game-pool-row.banker .game-pool-accent { background: linear-gradient(#ef8b7d, #7f2923); }
.game-pool-row.player .game-pool-accent { background: linear-gradient(#7fafe6, #1d3c60); }
.game-pool-row.tie .game-pool-accent { background: linear-gradient(#78bf92, #17512f); }
.game-pool-row.banker-pair .game-pool-accent,
.game-pool-row.player-pair .game-pool-accent { background: linear-gradient(#d7b878, #4a3410); }

.game-pool-bar-track {
  position: relative; width: 93px; height: 22px; border-radius: 4px;
  background: rgba(0,0,0,.38);
  box-shadow: rgba(232,214,158,.08) 0 0 0 1px inset, rgba(0,0,0,.4) 0 1px 3px inset;
  overflow: hidden;
}
.game-pool-bar-track i {
  position: absolute; left: 0; top: 0; height: 22px; width: 0;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: rgba(255,255,255,.3) 0 1px 0 inset, rgba(0,0,0,.34) 0 -2px 3px inset;
  transition: width .34s linear;
}
.game-pool-row.banker .game-pool-bar-track i { background: linear-gradient(#ef8b7d, #b84b3d 25%, #7f2923 72%, #c86150); box-shadow: rgba(255,255,255,.3) 0 1px 0 inset, rgba(232,89,72,.38) 0 0 4px; }
.game-pool-row.player .game-pool-bar-track i { background: linear-gradient(#9dc4f0, #4b85cd 25%, #1d3c60 72%, #5f9bdd); box-shadow: rgba(255,255,255,.3) 0 1px 0 inset, rgba(74,140,220,.38) 0 0 4px; }
.game-pool-row.tie .game-pool-bar-track i { background: linear-gradient(#a6e0bd, #41a967 25%, #17512f 72%, #63c48a); box-shadow: rgba(255,255,255,.3) 0 1px 0 inset, rgba(65,169,103,.38) 0 0 4px; }
.game-pool-row.banker-pair .game-pool-bar-track i,
.game-pool-row.player-pair .game-pool-bar-track i { background: linear-gradient(#f0dfae, #c2a056 25%, #6b5220 72%, #d7bb78); box-shadow: rgba(255,255,255,.3) 0 1px 0 inset, rgba(194,160,86,.4) 0 0 4px; }
.game-pool-bar-track b {
  position: absolute; left: 0; top: 0; width: 83px; height: 22px;
  display: flex; align-items: center; justify-content: flex-end;
  font: 700 16px/1 Georgia, var(--wl-font-serif); letter-spacing: .3px;
  color: #ff9b7f;
  text-shadow: rgba(0,0,0,.96) 0 1px 2px, rgba(0,0,0,.74) 0 0 5px;
  pointer-events: none;
}
.game-pool-row.player .game-pool-bar-track b { color: #8fbcf0; }
.game-pool-row.tie .game-pool-bar-track b { color: #86cfa0; }
.game-pool-row.banker-pair .game-pool-bar-track b,
.game-pool-row.player-pair .game-pool-bar-track b { color: #dfc78e; }

.game-video-limit {
  position: absolute; left: 23px; top: 346px; width: 220px; height: 130px;
  padding: 9px 11px;
  background: linear-gradient(160deg, rgba(19,57,41,.66), rgba(3,20,13,.72));
  border: 1px solid rgba(207,190,132,.38);
  box-shadow: rgba(235,245,221,.055) 0 1px 0 inset, rgba(0,0,0,.3) 0 11px 22px;
}
.game-limit-title {
  width: 198px; height: 42px; padding: 7px 12px 5px;
  display: flex; align-items: center;
  font: 600 18px/1 var(--wl-font-serif); letter-spacing: 2px; color: #ead5a5;
  text-shadow: rgba(0,0,0,.55) 0 2px 6px;
  border-bottom: 1px solid rgba(225,190,122,.2);
}
.game-limit-row {
  width: 196px; height: 24px; padding: 0 8px;
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: #ceb685;
}
.game-limit-row span { width: 72px; flex: 0 0 72px; }
.game-limit-row b { font: 600 13px/1 var(--wl-font-number); color: #f2e0b8; }

/* 倒计时：原站是一个 86×86 的红环徽章，数字常红 */
.game-video-timer {
  position: absolute; right: 23px; top: 15px; width: 86px; height: 86px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff0c7;
  background: radial-gradient(circle at 50% 32%, rgba(78,22,18,.98), rgba(26,7,6,.99));
  box-shadow:
    rgba(91,25,21,.96) 0 0 0 2px,
    rgba(222,62,52,.16) 0 0 0 5px,
    rgba(255,202,186,.14) 0 1px 0 inset,
    rgba(0,0,0,.25) 0 -8px 14px inset,
    rgba(0,0,0,.44) 0 10px 24px;
}
.game-video-timer.critical { animation: wlTimerPulse 1s ease-in-out infinite; }
@keyframes wlTimerPulse {
  0%, 100% { box-shadow: rgba(91,25,21,.96) 0 0 0 2px, rgba(222,62,52,.16) 0 0 0 5px,
             rgba(255,202,186,.14) 0 1px 0 inset, rgba(0,0,0,.25) 0 -8px 14px inset,
             rgba(0,0,0,.44) 0 10px 24px; }
  50%      { box-shadow: rgba(140,36,30,.98) 0 0 0 2px, rgba(255,86,72,.5) 0 0 0 6px,
             rgba(255,202,186,.2) 0 1px 0 inset, rgba(0,0,0,.25) 0 -8px 14px inset,
             rgba(0,0,0,.44) 0 10px 24px; }
}
.game-timer-face { display: flex; flex-direction: column; align-items: center; }
.game-timer-value {
  font: 600 31px/1 Georgia, serif; color: #ff7569;
  text-shadow: rgba(224,52,46,.62) 0 0 8px, rgba(24,0,2,.8) 0 2px 5px;
  transition: color .16s;
}
.game-timer-face small {
  margin-top: 1px;
  font: 600 7px/1 var(--wl-font); letter-spacing: 2px;
  color: rgba(255,240,199,.72);
  text-shadow: rgba(0,0,0,.7) 0 1px 2px;
}

.game-video-sound {
  position: absolute; right: 25px; bottom: 25px; width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(226,190,119,.55);
  background: rgba(8,18,13,.6); color: rgba(198,168,115,.9);
  display: grid; place-items: center;
  box-shadow: rgba(0,0,0,.32) 0 5px 14px;
  transition: filter .18s, background .18s;
}
.game-video-sound:hover { filter: brightness(1.3); background: rgba(20,40,30,.8); }
.sound-control-icon {
  width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 9v6h4l5 4V5L8 9H4zm12.5-.5a5 5 0 0 1 0 7l1.4 1.4a7 7 0 0 0 0-9.8z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 9v6h4l5 4V5L8 9H4zm12.5-.5a5 5 0 0 1 0 7l1.4 1.4a7 7 0 0 0 0-9.8z'/></svg>") center/contain no-repeat;
}

/* ---- 右侧操作区（grid，行高 58/92/298/48/60） ---- */
.game-side {
  position: relative; width: 552.641px; height: 596px; padding: 7px;
  display: grid; grid-template-columns: 536.641px;
  grid-template-rows: 58px 92px 298px 48px 60px; gap: 6px;
  background: linear-gradient(160deg, rgba(26,46,37,.9), rgba(9,18,14,.97));
  border: 1px solid var(--wl-gold-line);
  box-shadow: var(--wl-panel-shadow);
}
.game-summary { width: 536.641px; height: 58px; }
.game-summary-card {
  width: 100%; height: 58px; padding: 0 18px;
  display: flex; align-items: center;
  background: linear-gradient(160deg, rgba(26,48,38,.9), rgba(7,18,13,.96));
  border: 1px solid rgba(220,184,112,.2);
  box-shadow: rgba(255,232,183,.05) 0 1px 0 inset;
}
.game-account { width: 100%; height: 100%; display: flex; align-items: center; }
.game-account-id { flex: 1; height: 44px; display: flex; flex-direction: column; justify-content: center; }
.game-account-id small { font-size: 10px; letter-spacing: 2px; color: #d9c293; }
.game-account-id strong { font: 600 19px/1.3 var(--wl-font); letter-spacing: 1px; color: #ffe8b6; }
.game-account-balance {
  height: 44px; padding-left: 14px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
}
.game-account-balance small { font-size: 10px; letter-spacing: 1px; color: #d9c293; }
.game-account-balance b { font: 600 21px/1.2 var(--wl-font-number); color: #ffe0a1; text-shadow: rgba(226,190,119,.4) 0 0 8px; }

.game-chips {
  width: 536.641px; height: 92px; padding: 3px 5px;
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  border: 1px solid rgba(220,184,112,.2);
  box-shadow: rgba(255,235,194,.055) 0 1px 0 inset;
}
.game-chip {
  width: 62px; height: 62px; border-radius: 50%; padding: 1px 6px;
  border: 1px solid transparent;
  background-position: 50% 50%; background-size: 60px 60px; background-repeat: no-repeat;
  display: grid; place-items: center;
  color: #bda477; font: 700 12px/1 var(--wl-font-number);
  text-shadow: rgba(0,0,0,.6) 0 1px 2px;
  transition: transform .15s, filter .15s, border-color .15s, box-shadow .15s;
}
.game-chip:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.1); }
.game-chip.active {
  transform: translateY(-4px) scale(1.08);
  border-color: #ffe8b6;
  box-shadow: rgba(255,231,169,.5) 0 0 0 2px, rgba(239,190,89,.5) 0 0 18px;
}
.game-chip span { pointer-events: none; }

/* 注位：6 栏网格，主注各占 2 栏（174），对子各占 3 栏（265） */
.game-bets {
  width: 536.641px; height: 298px;
  display: grid;
  grid-template-columns: repeat(6, 83.6px);
  grid-template-rows: 171.688px 119.297px;
  gap: 7px;
}
.game-bet {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 600 22px/1 var(--wl-font-serif);
  transition: filter .15s, box-shadow .15s, border-color .15s, transform .15s;
}
.game-bet em {
  font: 600 7px/1 Arial, sans-serif; font-style: normal; letter-spacing: 2px;
  color: rgba(255,237,200,.72); margin-bottom: 6px;
}
.game-bet strong {
  font-size: 56px; line-height: 1; font-weight: 600;
  text-shadow: rgba(30,1,4,.45) 0 2px 7px;
}
.game-bet small {
  font: 500 12px/1 var(--wl-font); letter-spacing: .3px;
  color: rgba(255,235,197,.72); margin-top: 7px;
}
.game-bet.banker {
  grid-column: 1 / span 2; grid-row: 1;
  color: #ea7b70;
  background:
    radial-gradient(circle at 50% 18%, rgba(227,92,75,.34), rgba(0,0,0,0) 56%),
    linear-gradient(160deg, #692a2a, #451b20 48%, #241015);
  border: 1px solid #f6d78c;
  box-shadow: rgba(255,231,169,.32) 0 0 0 2px inset, rgba(243,197,105,.12) 0 0 28px inset,
              rgba(91,54,20,.9) 0 0 0 1px, rgba(239,190,89,.42) 0 0 18px, rgba(0,0,0,.3) 0 8px 16px;
}
.game-bet.banker strong { color: #f08a7d; }
.game-bet.tie {
  grid-column: 3 / span 2; grid-row: 1;
  color: #78bf92;
  background:
    radial-gradient(circle at 50% 18%, rgba(65,169,103,.34), rgba(0,0,0,0) 56%),
    linear-gradient(160deg, #246043, #17452f 48%, #0a2518);
  border: 1px solid rgba(105,190,132,.4);
  box-shadow: rgba(255,238,200,.09) 0 1px 0 inset, rgba(76,190,122,.24) 0 0 28px inset, rgba(30,1,4,.12) 0 6px 12px;
}
.game-bet.tie strong { color: #86cf9f; }
.game-bet.player {
  grid-column: 5 / span 2; grid-row: 1;
  color: #7fafe6;
  background:
    radial-gradient(circle at 50% 18%, rgba(75,133,205,.34), rgba(0,0,0,0) 56%),
    linear-gradient(160deg, #244d72, #193653 48%, #0c1b2a);
  border: 1px solid rgba(112,165,222,.4);
  box-shadow: rgba(255,238,200,.09) 0 1px 0 inset, rgba(73,139,222,.27) 0 0 28px inset, rgba(30,1,4,.12) 0 6px 12px;
}
.game-bet.player strong { color: #8fbcf0; }
.game-bet.banker-pair {
  grid-column: 1 / span 3; grid-row: 2;
  color: #eab075;
  background:
    radial-gradient(circle at 50% 16%, rgba(199,100,60,.28), rgba(0,0,0,0) 60%),
    linear-gradient(160deg, #59352b, #38231f 52%, #1d1412);
  border: 1px solid rgba(215,184,120,.34);
  box-shadow: rgba(255,238,200,.07) 0 1px 0 inset, rgba(199,100,60,.16) 0 0 24px inset;
}
.game-bet.player-pair {
  grid-column: 4 / span 3; grid-row: 2;
  color: #b1c9e0;
  background:
    radial-gradient(circle at 50% 16%, rgba(79,120,166,.28), rgba(0,0,0,0) 60%),
    linear-gradient(160deg, #31445b, #213144 52%, #111b28);
  border: 1px solid rgba(140,175,210,.3);
  box-shadow: rgba(255,238,200,.07) 0 1px 0 inset, rgba(79,120,166,.16) 0 0 24px inset;
}
.game-bet.banker-pair strong,
.game-bet.player-pair strong { font-size: 46px; }
.game-bet:hover { filter: brightness(1.1); }
.game-bet.selected {
  box-shadow: rgba(255,231,169,.5) 0 0 0 2px inset, rgba(239,190,89,.55) 0 0 26px;
  border-color: #ffe8b6;
}
.game-bet.pending-amount::after,
.game-bet.confirmed-amount::after {
  content: attr(data-amount);
  position: absolute; right: 8px; top: 8px;
  padding: 3px 8px; border-radius: 10px;
  font: 700 13px/1 var(--wl-font-number); color: #1a1206;
  background: linear-gradient(#ffe8b6, #d5a44e);
  box-shadow: rgba(0,0,0,.3) 0 2px 6px;
}
.game-bet.confirmed-amount::after { background: linear-gradient(#b9e6c8, #4f9d6c); color: #06200f; }
.game-bets.is-closed .game-bet { filter: grayscale(.35) brightness(.72); }

.game-confirm-row {
  width: 536.641px; height: 48px;
  display: grid; grid-template-columns: 264.812px 264.828px; gap: 7px;
}
.game-confirm-button {
  width: 100%; height: 48px; padding: 1px 6px;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid transparent;
  font-size: 16px; font-weight: 600; letter-spacing: 1px;
  transition: filter .15s, transform .12s;
}
.game-confirm-button i { font-style: normal; font-size: 19px; }
.game-confirm-button span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.game-confirm-button small { font-size: 7px; letter-spacing: 1.6px; opacity: .74; }
.game-confirm-button.primary {
  color: #341609;
  background: linear-gradient(#efcf87, #b77b33 54%, #83501d);
  box-shadow: rgba(255,248,220,.6) 0 1px 0 inset, rgba(39,3,4,.2) 0 7px 14px;
}
.game-confirm-button.secondary {
  color: #efd5a1;
  background: linear-gradient(rgba(40,58,48,.96), rgba(14,26,21,.98));
  border-color: rgba(222,187,116,.26);
  box-shadow: rgba(255,232,185,.1) 0 1px 0 inset, rgba(39,3,4,.18) 0 7px 14px;
}
.game-confirm-button:hover { filter: brightness(1.09); }
.game-confirm-button:active { transform: translateY(1px); }
.game-confirm-button[disabled] { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }

.game-controls {
  width: 536.641px; height: 60px;
  display: grid; grid-template-columns: 104px 209.312px 209.328px; gap: 7px;
}
.game-control {
  height: 60px; padding: 4px 7px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 10px/1 var(--wl-font-serif); letter-spacing: 1px;
  background: linear-gradient(rgba(38,58,47,.9), rgba(12,24,19,.95));
  border: 1px solid rgba(222,187,116,.26);
  box-shadow: rgba(255,234,190,.05) 0 1px 0 inset;
  color: #ead09c;
  transition: filter .16s, border-color .16s;
}
.game-control:hover { filter: brightness(1.14); border-color: rgba(222,187,116,.5); }
.game-control.slip { flex-direction: column; gap: 2px; }
.game-control.slip span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.game-control.slip b { font-size: 12px; letter-spacing: 1px; }
.game-control.slip small { font-size: 7px; letter-spacing: 1.4px; opacity: .66; }
.slip-control-icon {
  width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 3h14v18l-7-4-7 4z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 3h14v18l-7-4-7 4z'/></svg>") center/contain no-repeat;
}
.game-control.ask-road {
  display: grid; grid-template-columns: 72px 123.312px; grid-template-rows: 50px;
  align-items: center; padding: 4px 6px;
  color: #d9c292;
  border-color: rgba(222,187,116,.3);
  box-shadow: rgba(255,238,201,.13) 0 1px 0 inset,
              rgba(223,111,74,.08) 0 0 24px inset,
              rgba(31,1,4,.16) 0 7px 13px;
}
.ask-road-label { display: flex; flex-direction: column; line-height: 1.16; }
.ask-road-label b { font-size: 12px; letter-spacing: 1px; }
.ask-road-label small { font-size: 7px; letter-spacing: 1.2px; opacity: .66; }
.ask-road-result { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ask-road-result span { width: 36px; height: 40px; display: grid; place-items: center; }
.ask-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; }
.ask-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.ask-slash { width: 16px; height: 16px; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.ask-ring.red, .ask-dot.red, .ask-slash.red { color: #e05a4c; }
.ask-ring.blue, .ask-dot.blue, .ask-slash.blue { color: #4b85cd; }

/* ---- 底部：桌签 + 全幅路单 ---- */
.game-road-shell {
  position: relative; width: 1420px; height: 238px; padding: 7px;
  display: grid; grid-template-columns: 172px 1225px; grid-template-rows: 222px; gap: 7px;
  background: linear-gradient(rgba(31,45,38,.97), rgba(10,18,15,.99));
  border: 1px solid var(--wl-gold-line);
  box-shadow: var(--wl-panel-shadow);
}
.game-table-tabs {
  width: 172px; height: 222px;
  display: grid; grid-template-columns: 172px;
  grid-template-rows: repeat(4, 51.75px); gap: 5px;
}
.game-tab {
  width: 172px; height: 51.75px;
  display: grid; grid-template-columns: 116px 54px; grid-template-rows: 49.75px;
  align-items: center;
  border: 1px solid rgba(229,193,123,.16);
  background: linear-gradient(rgba(31,48,39,.7), rgba(9,20,15,.85));
  font: 600 12px/1 var(--wl-font-serif);
  transition: filter .16s, box-shadow .16s, border-color .16s;
}
.game-tab:hover { filter: brightness(1.18); }
.game-tab-main { display: flex; flex-direction: column; justify-content: center; padding-left: 12px; line-height: 1.1; }
.game-tab-main small { font: 600 9px/1 var(--wl-font); letter-spacing: 1.5px; color: rgba(198,168,115,.72); }
.game-tab-main b { font: 600 15px/1.25 var(--wl-font-serif); color: #e8d2a4; letter-spacing: 1px; }
.game-tab-side { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.game-tab-side i { width: 5px; height: 5px; border-radius: 50%; background: rgba(115,189,141,.6); margin-bottom: 2px; }
.game-tab-side b { font: 600 13px/1 var(--wl-font-number); color: #e8d2a4; }
.game-tab-side small { font: 500 7px/1 var(--wl-font); letter-spacing: 1px; opacity: .6; }
.game-tab.active {
  color: #ffe6ac; border-color: rgba(239,205,138,.64);
  background: linear-gradient(rgba(55,79,65,.98), rgba(18,31,25,.99));
  box-shadow: #d7ad5d 3px 0 0 inset, rgba(187,144,67,.12) 0 0 14px;
}
.game-tab.active .game-tab-main b { color: #ffe6ac; }
.game-tab.is-maintenance .game-tab-side i { background: rgba(187,167,128,.4); }

.game-road-layout {
  width: 1225px; height: 222px; padding: 3px;
  border: 1px solid rgba(239,199,123,.45);
}
.game-road-full { width: 1217px; height: 214px; display: block; background: #d8dcdc; }

/* ---- 弹层：确认下注 / 注单 ---- */
.wl-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,8,5,.72); backdrop-filter: blur(4px);
}
.wl-overlay.is-visible { display: flex; }
.wl-dialog {
  min-width: 420px; max-width: 560px;
  padding: 26px 30px 22px;
  background: linear-gradient(160deg, rgba(24,48,36,.99), rgba(6,17,12,.995));
  border: 1px solid rgba(229,193,123,.62); border-radius: 3px;
  box-shadow: rgba(255,236,190,.1) 0 1px 0 inset, rgba(0,0,0,.6) 0 30px 70px;
}
.wl-dialog-title {
  font: 600 20px/1.2 var(--wl-font-serif); letter-spacing: 4px; color: #ffe8b6;
  text-align: center; padding-bottom: 14px;
  border-bottom: 1px solid rgba(225,190,122,.24);
}
.wl-dialog-body { padding: 16px 0 10px; max-height: 320px; overflow-y: auto; }
.wl-dialog-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; font-size: 14px; color: rgba(226,209,175,.9);
}
.wl-dialog-row strong { font: 600 16px/1 var(--wl-font-number); color: #ffe0a1; }
.wl-dialog-tip { font-size: 11.5px; line-height: 1.7; color: rgba(198,168,115,.72); padding: 4px 0 12px; white-space: pre-line; }
.wl-dialog-actions { display: flex; gap: 14px; justify-content: center; }
.wl-dialog-actions button {
  width: 150px; height: 44px; border-radius: 3px;
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
  transition: filter .15s;
}
.wl-dialog-actions button:hover { filter: brightness(1.1); }
.wl-dialog-actions .primary {
  color: #341609; background: linear-gradient(#efcf87, #b77b33 54%, #83501d);
  box-shadow: rgba(255,248,220,.6) 0 1px 0 inset;
}
.wl-dialog-actions .secondary {
  color: #d8c3a0; background: linear-gradient(rgba(40,58,48,.96), rgba(14,26,21,.98));
  border: 1px solid rgba(225,190,122,.36);
}

/* 飘字提示 */
.wl-toast {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(12px);
  padding: 10px 22px; border-radius: 3px;
  background: rgba(8,20,14,.94); border: 1px solid rgba(229,193,123,.5);
  color: #ffe8b6; font-size: 13.5px; letter-spacing: 1px;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  z-index: 30; white-space: nowrap;
}
.wl-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.wl-toast.is-error { border-color: rgba(232,121,108,.62); color: #ffb0a4; }