*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  min-width:320px;
  overflow:hidden;
  background:#000;
  color:#fff;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}
button,input,textarea{font:inherit}

.app-screen,.clone-scroll,.clone-screen{background:#000}
.clone-scroll{
  -webkit-overflow-scrolling:touch;
  width:100%;
  height:100dvh;
  overflow:hidden;
}
.clone-screen{
  color:#fff;
  width:100%;
  min-height:100dvh;
  container-type:inline-size;
}
.source-page{
  --source-unit:clamp(1px, calc(100cqw / 980), 1.55px);
  background:#523821;
  flex-direction:column;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  display:flex;
  position:relative;
  overflow:hidden;
}
@media (width>=1440px){
  .source-page{
    width:min(100%,1600px);
    margin-inline:auto;
    box-shadow:0 0 48px #0000008c;
  }
}

.game-header{
  flex:0 0 clamp(48px,6.2dvh,62px);
  height:clamp(48px,6.2dvh,62px);
  padding:0 clamp(12px,1.4vw,24px);
  color:#cdb170;
  font-size:clamp(12px,1.05vw,16px);
  background:#171722 url(/assets/clone/header.png) 50%/100% 100% no-repeat;
  align-items:center;
  font-weight:700;
  display:flex;
}
.table-name{
  color:#ffdc7b;
  font-size:clamp(24px,2vw,32px);
  line-height:1;
}
.timer-label{
  width:clamp(100px,10vw,150px);
  height:42px;
  margin-left:auto;
  margin-right:16px;
  color:#ff3030;
  opacity:1;
  font-size:clamp(24px,2vw,32px);
  white-space:nowrap;
  justify-content:center;
  align-items:center;
  font-weight:700;
  display:flex;
}
.fullscreen-button{
  width:clamp(28px,3vw,36px);
  height:clamp(28px,3vw,36px);
  margin-right:10px;
  padding:6px;
  border-radius:6px;
  background:#cdb1701a;
  border:1px solid #cdb1704d;
  place-items:center;
  display:grid;
  cursor:pointer;
}
.fullscreen-button img,.round-control img{width:100%;height:100%;display:block}

.video-and-brand{
  flex:auto;
  grid-template-columns:minmax(0,72fr) minmax(96px,28fr);
  min-height:0;
  display:grid;
}
.video-area{
  background:#000;
  width:100%;
  min-width:0;
  height:100%;
  min-height:0;
  position:relative;
  overflow:hidden;
}
.video-area video,
.video-area .video-canvas,
.video-area .video-poster{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
  position:absolute;
  inset:0;
}
.video-area .video-canvas{
  object-fit:contain;
  /* iOS: keep a real box so NodePlayer setView can bind pixels */
  min-width:100%;
  min-height:100%;
  z-index:1;
}
.video-area video[hidden],
.video-area .video-canvas[hidden],
.video-area .video-poster[hidden]{
  display:none !important;
}
.video-loader-text{
  margin:0;
  position:absolute;
  inset:auto 12px 12px 12px;
  color:#ffecbecc;
  font-size:clamp(11px,1vw,13px);
  pointer-events:none;
  text-shadow:0 1px 2px #000;
  z-index:3;
}
.round-control{
  right:10px;
  width:32px;
  height:32px;
  padding:6px;
  border:2px solid #ffffff59;
  box-sizing:border-box;
  background:#0000007a;
  border-radius:50%;
  position:absolute;
  cursor:pointer;
  color:inherit;
  z-index:20;
  pointer-events:auto;
}
.video-button{top:10px}
.network-indicator{top:50px;pointer-events:none;z-index:15}

.brand-area{
  background:#523821;
  width:100%;
  min-width:0;
  height:100%;
  padding:0;
  position:relative;
  overflow:hidden;
}
.brand-pages-scroll{
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:auto;
  width:100%;
  height:100%;
  position:relative;
  overflow:auto hidden;
}
.brand-pages-scroll::-webkit-scrollbar{display:none}
.brand-pages-track{
  width:200%;
  min-width:200%;
  height:100%;
  display:flex;
}
.brand-page{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  flex:0 0 50%;
  width:50%;
  min-width:0;
  height:100%;
  position:relative;
  overflow:hidden;
}
.brand-ad-page{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(8px,1.4vh,16px);
  padding:clamp(8px,3vh,34px) clamp(8px,2vw,32px) clamp(22px,4vh,42px);
  display:flex;
}
.brand-data-page{
  background:linear-gradient(160deg,#1b2636,#101824 68%,#2d2118);
}
.brand-card{
  width:min(86%,320px);
  aspect-ratio:195/125;
  background-color:#fff;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  flex:0 auto;
  overflow:hidden;
  text-decoration:none;
  position:relative;
  display:block;
}
.brand-card.default-brand{
  padding:10px;
  border-radius:4px;
  color:#522f00;
  font-size:clamp(18px,1.6vw,34px);
  letter-spacing:.08em;
  text-align:center;
  text-shadow:0 1px #ffffffbf;
  background:linear-gradient(145deg,#fff7cf,#dca72b 46%,#7f4c07);
  border:1px solid #ffda7099;
  place-items:center;
  font-weight:900;
  display:grid;
}
.brand-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}
.brand-card img[src=""],
.brand-card img:not([src]){display:none}
.brand-caption{
  width:min(86%,320px);
  padding:clamp(6px,.9vh,10px) 8px;
  box-shadow:2px 2px 5px #0000004d;
  color:#fff;
  font-size:clamp(14px,1.25vw,20px);
  text-align:center;
  white-space:pre-line;
  background:#00000040;
  line-height:1.15;
}
.brand-swipe-tip{
  right:50px;
  bottom:5px;
  color:#ffecbecc;
  font-size:max(9px,9px);
  text-align:center;
  pointer-events:none;
  line-height:1;
  position:absolute;
  left:0;
}
.brand-page-button{
  z-index:8;
  right:7px;
  bottom:5px;
  min-width:38px;
  height:22px;
  padding:0 8px;
  border-radius:11px;
  color:#ffe18a;
  font-size:max(10px,10px);
  background:#121823db;
  border:1px solid #ffe29db3;
  line-height:1;
  position:absolute;
  box-shadow:0 2px 6px #0000004d;
  cursor:pointer;
}
.brand-page-button:active{background:#334156f5;transform:scale(.96)}

.card-stats-panel{
  color:#fff;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:8px 7px 20px;
  gap:5px;
  grid-template-rows:auto auto minmax(112px,1fr) auto;
  display:grid;
}
.card-stats-heading{
  justify-content:space-between;
  align-items:center;
  display:flex;
}
.card-stats-heading strong{color:#ffe18a;font-size:max(15px,17px)}
.card-stats-heading span,
.card-stats-footer{color:#b9c8dd;font-size:max(9px,9px)}
.shoe-summary-grid{
  gap:4px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  display:grid;
}
.shoe-summary-grid article{
  min-width:0;
  padding:5px;
  border-radius:5px;
  background:#ffffff12;
  border:1px solid #ffde8f3d;
  grid-template-columns:1fr auto;
  align-items:end;
  display:grid;
}
.shoe-summary-grid span,
.shoe-summary-grid em{
  font-size:max(8px,8px);
  font-style:normal;
}
.shoe-summary-grid strong{
  color:#ffe18a;
  font-size:max(19px,23px);
  grid-row:span 2;
  line-height:1;
}
.shoe-summary-grid em{color:#aebed3}
.exact-card-grid{
  background:#ffffff1f;
  border:1px solid #ffffff29;
  grid-template-rows:minmax(16px,.55fr) repeat(4,minmax(22px,1fr));
  grid-template-columns:minmax(19px,.8fr) repeat(13,minmax(16px,1fr));
  gap:1px;
  min-height:0;
  display:grid;
  overflow:hidden;
}
.card-grid-corner,
.card-grid-rank,
.card-grid-suit,
.exact-card-cell{
  background:#070d17d6;
  place-items:center;
  min-width:0;
  line-height:1;
  display:grid;
}
.card-grid-corner,
.card-grid-rank{color:#dce5f2;font-size:max(7px,8px)}
.card-grid-suit{font-size:max(13px,15px)}
.exact-card-cell{color:#ffe18a;font-size:max(9px,11px);font-weight:600}
.suit-2,.suit-4{color:#ff6f6f}
.suit-1,.suit-3{color:#dce7ff}
.card-stats-footer{
  gap:6px;
  padding-right:44px;
  white-space:nowrap;
  justify-content:space-between;
  align-items:center;
  display:flex;
}
.card-stats-footer em{color:#ffe18a;margin-left:auto;font-style:normal}

.prediction-bar{
  flex:0 0 clamp(30px,4.2dvh,40px);
  min-height:24px;
  padding:1px clamp(10px,1.2vw,20px);
  justify-content:space-between;
  align-items:center;
  gap:4px;
  color:#666;
  background:#f7f7f7;
  border-bottom:1px solid #bbb;
  display:flex;
  overflow:hidden;
}
.stat-strip,.prediction-actions{
  white-space:nowrap;
  align-items:center;
  min-width:0;
  display:flex;
}
.stat-strip{
  gap:clamp(3px,6px,11px);
  flex:auto;
  justify-content:space-between;
  overflow:hidden;
}
.stat-item{
  align-items:center;
  gap:2px;
  font-size:clamp(8px,9px,14px);
  flex:none;
  line-height:1;
  display:inline-flex;
}
.stat-label{
  min-width:0;
  min-height:0;
  padding:1.5px 3px;
  border-radius:5px;
  color:#fff;
  place-items:center;
  display:inline-grid;
}
.stat-label.plain{
  background:#535353;
}
.stat-value{color:#777;font-weight:400}
.prediction-actions{gap:3px;flex:none}
.prediction{
  height:clamp(18px,20px,28px);
  min-width:clamp(54px,61px,92px);
  padding:0 3px;
  border-radius:4px;
  justify-content:space-around;
  align-items:center;
  gap:2px;
  font-size:clamp(8px,9px,14px);
  background:#fff;
  border:1px solid;
  line-height:1;
  display:inline-flex;
  cursor:pointer;
}
.prediction.banker{color:#a74728;border-color:#a74728}
.prediction.player{color:#2027b8;border-color:#2027b8}
.prediction[data-predicting="true"]{background:#eee;box-shadow:inset 0 0 0 1px}
.prediction i{
  width:clamp(6px,7px,10px);
  height:clamp(6px,7px,10px);
  flex:none;
  display:inline-block;
  position:relative;
}
.prediction-ring{border:1.5px solid;border-radius:50%}
.prediction-dot:after{
  content:"";
  background:currentColor;
  border-radius:50%;
  position:absolute;
  inset:20%;
}
.prediction-slash:after{
  content:"";
  background:currentColor;
  width:94%;
  height:1.5px;
  position:absolute;
  top:47%;
  left:4%;
  transform:rotate(-55deg);
}
.prediction .blue{color:#2027b8}
.prediction .red{color:#a74728}
.prediction .neutral{color:#999}

.road-section{
  flex:0 0 clamp(160px,30dvh,300px);
  background:#fff;
  min-height:160px;
  display:flex;
  position:relative;
  overflow:hidden;
}
.road-grid{
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  display:block;
}
.road-grid:active{cursor:grabbing}
.road-status{
  position:absolute;
  right:8px;
  bottom:4px;
  margin:0;
  color:#999;
  font-size:10px;
  pointer-events:none;
  text-shadow:0 0 4px #fff;
}
.road-status.stale{color:#c45c1a}

.card-result-overlay{
  z-index:20;
  top:auto;
  right:0;
  bottom:clamp(10px,1.8dvh,20px);
  height:clamp(160px,30dvh,300px);
  pointer-events:none;
  isolation:isolate;
  display:flex;
  position:absolute;
  left:0;
  overflow:hidden;
}
.card-result-overlay[hidden]{display:none !important}
.result-hand-side{
  color:#fff;
  justify-content:center;
  align-items:center;
  gap:clamp(8px,3cqw,24px);
  width:50%;
  height:100%;
  display:flex;
  position:relative;
}
.result-hand-side:after{
  z-index:-1;
  content:"";
  background:transparent;
  position:absolute;
  inset:0;
}
.result-hand-side.winner:after{
  animation:.6s ease-in-out infinite alternate winner-flash;
}
.player-hand{
  clip-path:polygon(0 0,100% 0,90% 100%,0 100%);
  background:linear-gradient(100deg,#00a5ff 0%,#1d9df0 78%,#009cffb3 100%);
  flex-direction:row-reverse;
  animation:6s ease-out forwards player-result-life;
}
.banker-hand{
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(80deg,#ff3e3eb8 0%,#ff3434 22%,#f3252d 100%);
  animation:6s ease-out forwards banker-result-life;
}
.hand-point{
  flex-direction:column;
  flex:none;
  justify-content:center;
  align-items:center;
  gap:clamp(8px,2cqw,18px);
  font-size:clamp(34px,10cqw,60px);
  line-height:1;
  display:flex;
}
.hand-point strong{
  background:#fff;
  border-radius:50%;
  place-items:center;
  width:clamp(40px,11cqw,66px);
  height:clamp(40px,11cqw,66px);
  font-size:clamp(26px,7cqw,40px);
  font-weight:700;
  display:grid;
}
.player-hand .hand-point strong{color:#1a1686}
.banker-hand .hand-point strong{color:#b73627}
.hand-cards{
  justify-content:center;
  align-items:center;
  gap:clamp(6px,2cqw,16px);
  min-width:0;
  display:flex;
}
.player-hand .hand-point,
.player-hand .hand-cards{
  position:relative;
  left:calc(-1 * clamp(16px,5cqw,30px));
}
.banker-hand .hand-point,
.banker-hand .hand-cards{
  position:relative;
  left:clamp(16px,5cqw,30px);
}
.playing-card{
  aspect-ratio:60/86;
  color:#171717;
  background:linear-gradient(145deg,#fff 0%,#f4f4f4 100%);
  border:1px solid #00000042;
  border-radius:clamp(3px,1cqw,7px);
  flex:none;
  width:clamp(46px,16cqw,76px);
  font-family:Georgia,"Times New Roman",serif;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 5px #00000047;
}
.playing-card.red-suit{color:#cf1e1e}
.playing-card.sideways{
  margin-inline:clamp(8px,3cqw,20px);
  transform:rotate(90deg);
}
.card-rank{
  font-size:clamp(22px,6.5cqw,35px);
  font-weight:700;
  line-height:1;
  position:absolute;
  top:5%;
  left:10%;
}
.card-suit{
  font-size:clamp(27px,8cqw,44px);
  line-height:1;
  position:absolute;
  bottom:4%;
  right:8%;
}
.hand-result{
  z-index:3;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  border-radius:clamp(4px,1.2cqw,8px);
  min-width:clamp(100px,27cqw,154px);
  padding:clamp(9px,2.4cqw,14px) clamp(14px,3.5cqw,22px);
  font-size:clamp(25px,7cqw,42px);
  line-height:1;
  animation:6s ease-out forwards hand-result-life;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  box-shadow:3px 3px 5px 1px #00000073;
}
.hand-result.banker{background:#a93724}
.hand-result.player{background:#171a8e}
.hand-result.tie{background:#24822d}
@keyframes player-result-life{
  0%,to{transform:translate(-100%)}
  9%,91%{transform:translate(0)}
}
@keyframes banker-result-life{
  0%,to{transform:translate(100%)}
  9%,91%{transform:translate(0)}
}
@keyframes hand-result-life{
  0%,to{transform:translate(-50%,-50%) scale(0)}
  12%,88%{transform:translate(-50%,-50%) scale(1)}
}
@keyframes winner-flash{
  0%{background:#fff0}
  to{background:#ffffff38}
}

.game-footer{
  flex:0 0 clamp(10px,1.8dvh,20px);
  background:#523821;
  min-height:10px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:767px) and (orientation:portrait){
  .source-page{--source-unit:calc(100cqw / 375)}
  .game-header{
    flex:0 0 calc(var(--source-unit) * 50);
    height:calc(var(--source-unit) * 50);
    padding-inline:calc(var(--source-unit) * 5);
  }
  .table-name{font-size:calc(var(--source-unit) * 18)}
  .timer-label{
    width:calc(var(--source-unit) * 64);
    height:calc(var(--source-unit) * 38);
    font-size:calc(var(--source-unit) * 18);
    margin-right:calc(var(--source-unit) * 10);
  }
  .video-and-brand{flex-direction:column;display:flex}
  .video-area{aspect-ratio:375/210;flex:none;width:100%;height:auto}
  .brand-area{flex:auto;width:100%}
  .road-section{flex:0 0 calc(var(--source-unit) * 120);min-height:0}
  .game-footer{flex:0 0 calc(var(--source-unit) * 12);min-height:calc(var(--source-unit) * 12)}
  .brand-card,.brand-caption{width:min(50%, calc(var(--source-unit) * 220))}

  /* H5 settlement: overlay matches road height; points sit under cards */
  .card-result-overlay{
    bottom:calc(var(--source-unit) * 12);
    height:calc(var(--source-unit) * 120);
  }
  .result-hand-side{
    gap:2px;
    padding-bottom:50px;
  }
  .player-hand .hand-point,
  .banker-hand .hand-point{
    z-index:4;
    gap:1px;
    font-size:21px;
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translate(-50%);
  }
  .hand-point strong{
    width:30px;
    height:30px;
    font-size:20px;
  }
  .player-hand .hand-cards{
    left:calc(var(--source-unit) * -34);
    transform:none;
  }
  .banker-hand .hand-cards{
    left:calc(var(--source-unit) * 34);
    transform:none;
  }
  .playing-card{width:calc(var(--source-unit) * 42)}
  .playing-card.sideways{margin-inline:9px}
  .hand-cards.has-three{gap:0}
  .hand-cards.has-three .playing-card + .playing-card{margin-left:-8px}
  .hand-cards.has-three .playing-card.sideways{
    margin-left:-13px;
    margin-right:7px;
  }
  .card-rank{font-size:calc(var(--source-unit) * 20)}
  .card-suit{font-size:calc(var(--source-unit) * 24)}
  .hand-result{
    min-width:100px;
    padding:10px 14px;
    font-size:26px;
  }
}