/* WBET Dragon Tiger — cloned styles */
.dt-page { color: #f6f1dc; touch-action: pan-y; background: 0 0; min-height: 100vh; padding: 10px 10px 18px; overflow: hidden visible; display: block; gap: normal; font-family: 'Inter','Exo 2',system-ui,sans-serif; }
.dt-wrap { position: relative; width: min(100%, 1180px); margin: 0 auto; }
.dt-table { aspect-ratio: 1728/1080; touch-action: pan-y; background: 0 0; border-radius: 7px; width: min(100%, 1180px); margin: 0 auto; position: relative; overflow: hidden; display: block; padding: 0; gap: normal; }
.dt-table:before, .dt-table:after { display: none; }
.dt-tableImage { object-fit: contain; user-select: none; pointer-events: none; border-radius: 7px; width: 100%; height: 100%; position: absolute; inset: 0; }
.dt-tableImage-mob { display: none; }
.dt-error { z-index: 12; color: #ffd0d0; background: #460d0db8; border: 1px solid #ff656559; border-radius: 8px; max-width: 24%; padding: .6% .8%; font-size: clamp(10px,.74vw,13px); font-weight: 600; position: absolute; top: 4.8%; right: 5.5%; display: none; }
.dt-roundTicker { z-index: 9; color: #f3d17a; text-align: center; pointer-events: none; background: #060d0a94; border: 1px solid #d9b86e4d; border-radius: 999px; min-width: clamp(60px,6vw,100px); padding: 5px 12px; font-size: clamp(11px,.9vw,15px); font-weight: 800; position: absolute; top: 50.1%; left: 50%; transform: translate(-50%); white-space: nowrap; }
.dt-progressBar { z-index: 9; pointer-events: none; background: linear-gradient(#201406b8,#090704c2); border: 1px solid #d9b86e5c; border-radius: 999px; width: min(30%,340px); height: clamp(7px,.72vw,11px); position: absolute; top: 55.1%; left: 50%; overflow: hidden; transform: translate(-50%); box-shadow: inset 0 2px 4px #fff2ae1f,inset 0 -2px 5px #0009,0 5px 14px #0003; }
.dt-progressBar span { width: var(--progress); border-radius: inherit; background: linear-gradient(#fff7bf 0%,#ffd447 32%,#e8a51b 68%,#9b5f08 100%); height: 100%; transition: width 1s linear; display: block; position: relative; box-shadow: inset 0 1px #ffffffb8,inset 0 -2px 3px #4f2a0075,0 0 16px #f5ca5575; }
.dt-progressBar span:after { content: ""; background: linear-gradient(105deg,#0000 0%,#ffffff94 42%,#0000 64%); animation: 1.8s linear infinite dt-progressShine; position: absolute; inset: 0; transform: translate(-100%); }
@keyframes dt-progressShine { to { transform: translate(120%); } }

.dt-cardSlot { z-index: 4; border-radius: 7px; width: 5.7%; height: 14.9%; position: absolute; overflow: visible; }
.dt-cardSlot img { object-fit: contain; filter: drop-shadow(0 8px 10px #00000057); border-radius: 8px; width: 100%; height: 100%; animation: .62s cubic-bezier(.16,1,.3,1) both dt-dealCard; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) perspective(420px) rotateX(4deg); }
.dt-dragonCard { top: 23.1%; left: 31.6%; }
.dt-tigerCard { top: 23.1%; right: 31.6%; }
.dt-cardTag { color: #fff7dc; text-align: center; text-transform: uppercase; border-radius: 999px; min-width: 54px; padding: 3px 8px; font-size: 9px; font-weight: 900; line-height: 1; display: inline-block; position: absolute; bottom: 80px; left: 50%; transform: translate(-50%); box-shadow: 0 4px 10px #00000052; }
.dt-dragonCard .dt-cardTag { background: linear-gradient(#1e81fff0,#083e8ef0); left: 10%; }
.dt-tigerCard .dt-cardTag { background: linear-gradient(#ff674df0,#911916f0); left: 85%; }
@keyframes dt-dealCard { 0% { opacity: 0; filter: blur(3px); transform: translate(250%,-180%) perspective(420px) rotateX(8deg) rotate(18deg) scale(.58); } 42% { opacity: 1; filter: blur(1px); transform: translate(12%,-86%) perspective(420px) rotateX(7deg) rotate(9deg) scale(.86); } 72% { opacity: 1; transform: translate(-54%,-52%) perspective(420px) rotateX(5deg) rotate(-2deg) scale(1.04); } to { opacity: 1; transform: translate(-50%,-50%) perspective(420px) rotateX(4deg) scale(1); } }

.dt-scoreBadge { z-index: 6; background: #080c0a94; border: 1px solid #d1ad6857; border-radius: 999px; place-items: center; min-width: clamp(34px,3.1vw,52px); min-height: clamp(28px,2.5vw,42px); display: grid; position: absolute; box-shadow: 0 7px 18px #00000047; }
.dt-scoreBadge strong { color: #f3d17a; font-family: Georgia,serif; font-size: clamp(14px,1.25vw,22px); font-weight: 800; line-height: 1; }
.dt-dragonScore { top: 33.4%; left: 30.7%; }
.dt-tigerScore { top: 33.4%; right: 30.7%; }

.dt-betSpot { z-index: 10; color: #f6f1dce6; cursor: pointer; touch-action: pan-y; background: 0 0; border: 0; flex-direction: column; justify-content: center; align-items: center; display: flex; position: absolute; font-family: inherit; }
.dt-betSpot:hover:not(:disabled) { box-shadow: none; background: 0 0; }
.dt-betSpot:disabled { cursor: not-allowed; opacity: .62; }
.dt-betSpot em { z-index: 2; color: #f6f1dcf0; text-shadow: 0 2px 5px #0000008c; margin-top: 58%; font-size: clamp(11px,1vw,17px); font-style: normal; font-weight: 800; display: block; position: relative; }
.dt-betSpot b { z-index: 2; color: #f6f1dc; letter-spacing: .04em; text-transform: uppercase; background: #070b086b; border: 1px solid; border-radius: 999px; margin-top: 5px; padding: 3px 9px; font-size: clamp(9px,.72vw,12px); font-weight: 800; display: block; position: relative; }
.dt-dragonSpot { width: 27.2%; height: 35.5%; top: 45.2%; left: 8.5%; }
.dt-tieSpot { width: 25.2%; height: 35.2%; top: 45.8%; left: 37.7%; }
.dt-tigerSpot { width: 27.2%; height: 33.5%; top: 46.2%; left: 63.8%; }
.dt-dragonSpot.dt-winningSpot { --winner-rgb: 77,163,255; }
.dt-tieSpot.dt-winningSpot { --winner-rgb: 157,240,113; }
.dt-tigerSpot.dt-winningSpot { --winner-rgb: 255,102,90; }
.dt-winningSpot { }

.dt-winOverlay { z-index: 20; pointer-events: none; place-items: center; display: none; position: absolute; inset: 0; overflow: hidden; }
.dt-winOverlay.visible { display: grid; animation: 4.7s both dt-winOverlayFade; }
.dt-winOverlay.visible::before { content: ""; position: absolute; inset: 0; }
.dt-dragonWinOverlay.visible::before { background: radial-gradient(circle at 50% 45%,#4fa9ff38,transparent 68%); }
.dt-tigerWinOverlay.visible::before { background: radial-gradient(circle at 50% 45%,#ff70493d,transparent 68%); }
.dt-tieWinOverlay.visible::before { background: radial-gradient(circle at 50% 45%,#9fff7d33,transparent 68%); }
@keyframes dt-winOverlayFade { 0% { opacity: 1; } 88% { opacity: 1; } to { opacity: 0; } }
.dt-winOverlay img { object-fit: contain; filter: drop-shadow(0 22px 28px #00000080) drop-shadow(0 0 30px #52abff6b); width: min(64%,720px); max-height: 58%; position: absolute; top: 17%; left: -24%; animation: 4.2s cubic-bezier(.12,.72,.28,1) both dt-dragonFlyAcross; }
.dt-winOverlay strong { z-index: 1; color: #eaf6ff; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 2px #225fbe,0 5px #0b2f72,0 13px 22px #0000009e,0 0 28px #5cb7ffb8; margin-top: 4%; font-family: Georgia,serif; font-size: clamp(34px,6.2vw,96px); font-weight: 900; position: relative; }
.dt-tigerWinOverlay img { filter: drop-shadow(0 22px 28px #00000080) drop-shadow(0 0 30px #ff5d376b); left: auto; right: -24%; animation-name: dt-tigerRunAcross; }
.dt-tigerWinOverlay strong { color: #fff1df; text-shadow: 0 2px #d44a22,0 5px #742112,0 13px 22px #0000009e,0 0 28px #ff6a40b8; }
.dt-tieWinOverlay img { filter: drop-shadow(0 22px 28px #0000007a) drop-shadow(0 0 30px #99ff6c66); width: min(44%,520px); top: 17%; left: 50%; animation-name: dt-tieSwordsClash; }
.dt-tieWinOverlay strong { color: #f2ffe6; text-shadow: 0 2px #4fb93b,0 5px #1f6b22,0 13px 22px #0000009e,0 0 28px #8fff6bb8; }
@keyframes dt-dragonFlyAcross { 0% { opacity: 0; transform: translate(-20%) translateY(8%) scale(.72) rotate(-5deg); } 15% { opacity: 1; } 54% { transform: translate(66%) translateY(-5%) scale(1.05) rotate(1deg); } to { opacity: 0; transform: translate(184%) translateY(-8%) scale(1.18) rotate(4deg); } }
@keyframes dt-tigerRunAcross { 0% { opacity: 0; transform: translate(22%) translateY(9%) scale(.72) rotate(4deg); } 15% { opacity: 1; } 54% { transform: translate(-68%) translateY(-3%) scale(1.05) rotate(-1deg); } to { opacity: 0; transform: translate(-184%) translateY(-7%) scale(1.18) rotate(-4deg); } }
@keyframes dt-tieSwordsClash { 0% { opacity: 0; filter: blur(3px); transform: translate(-50%) translateY(24px) scale(.62) rotate(-8deg); } 18% { opacity: 1; filter: blur(); } 42% { transform: translate(-50%) translateY(-2px) scale(1.12) rotate(3deg); } 70% { opacity: 1; transform: translate(-50%) translateY(0) scale(1); } to { opacity: 0; transform: translate(-50%) translateY(-18px) scale(.9); } }

.dt-history { z-index: 8; pointer-events: none; justify-content: center; align-items: center; gap: clamp(3px,.42vw,6px); width: 39%; display: flex; position: absolute; top: 40.5%; left: 50%; transform: translate(-50%); }
.dt-history img { object-fit: contain; filter: drop-shadow(0 3px 5px #0000006b); width: clamp(20px,1.86vw,32px); height: clamp(20px,1.86vw,32px); }
.dt-history span { color: #f6f1dc94; text-transform: uppercase; font-size: clamp(9px,.68vw,12px); font-weight: 700; }
.dt-history strong { color: #f3d17a; text-transform: uppercase; font-size: clamp(9px,.68vw,12px); font-weight: 800; margin-right: 2px; }

.dt-tableChip { z-index: 11; pointer-events: none; flex-direction: column; justify-content: center; align-items: center; width: clamp(24px,2.15vw,38px); height: clamp(24px,2.15vw,38px); display: flex; position: absolute; }
.dt-tableChip img { object-fit: contain; filter: drop-shadow(0 3px 6px #00000075); width: 100%; height: 100%; border-radius: 50%; }
.dt-tableChip span { z-index: 1; color: #f6f1dc; text-shadow: 0 1px 2px #000000d9,0 0 4px #00000091; font-size: clamp(7px,.55vw,10px); font-weight: 800; position: absolute; }
.dt-tableChip.settled { transition: none; }
.dt-botChip img { background: #0a0f0ab8; }

.dt-soundButton { z-index: 12; color: #f6f1dc; cursor: pointer; background: #060d0a94; border: 1px solid #d9b86e4d; border-radius: 999px; place-items: center; width: clamp(30px,2.6vw,42px); height: clamp(30px,2.6vw,42px); padding: 0; display: grid; position: absolute; top: 3.4%; right: 3.2%; }
.dt-soundButton:hover { filter: brightness(1.2); }

.dt-clearButton { color: #f6f1dc; cursor: pointer; background: #f5ca5522; border: 1px solid #f5ca555c; border-radius: 999px; place-items: center; width: clamp(32px,3vw,44px); height: clamp(32px,3vw,44px); padding: 0; flex: 0 0 auto; display: grid; transition: transform .16s; }
.dt-clearButton:hover { transform: translateY(-6%); filter: brightness(1.15); }

.dt-controlBar { z-index: 12; background: linear-gradient(#191939 0%,#191939 100%); border-radius: 7px; justify-content: center; align-items: center; gap: clamp(8px,1vw,14px); width: min(78%,860px); min-height: clamp(60px,6vw,84px); padding: 8px 12px; display: flex; position: absolute; bottom: 1.8%; left: 50%; transform: translate(-50%); box-shadow: inset 0 1px #ffefb714,inset 0 -1px #0000006b,0 12px 28px #050a1252; }
.dt-customAmount { background: linear-gradient(#191939 0%,#191939 100%); border: 1px solid #f5ca555c; border-radius: 7px; align-items: center; gap: 10px; width: min(28%,240px); min-width: 170px; height: clamp(38px,3.5vw,50px); padding: 0 13px; display: flex; }
.dt-customAmount span { color: #f5ca55; text-transform: uppercase; border-right: 1px solid #f5ca553d; padding-right: 9px; font-size: clamp(10px,.78vw,13px); font-weight: 700; }
.dt-customAmount input { color: #f6f1dc; text-align: right; background: 0 0; border: 0; outline: 0; width: 100%; min-width: 0; font-size: clamp(13px,1vw,17px); font-weight: 650; }
.dt-chipRack { justify-content: center; align-items: center; gap: clamp(5px,.7vw,10px); display: flex; }
.dt-chipRack button { color: #f6f1dc; cursor: pointer; background: 0 0; border: 0; border-radius: 999px; width: clamp(32px,3.2vw,54px); height: clamp(46px,4.7vw,74px); padding: 0; transition: transform .16s; position: relative; }
.dt-chipRack button:hover:not(:disabled), .dt-chipRack button.dt-selectedChip { transform: translateY(-8%); }
.dt-chipRack img { object-fit: contain; pointer-events: none; width: 100%; height: clamp(32px,3.2vw,54px); display: block; }
.dt-chipRack span { color: #f6f1dc; text-shadow: 0 1px 3px #000000d1; margin-top: 2px; font-size: clamp(7px,.6vw,10px); font-weight: 700; display: block; }

@media (max-width: 900px) {
    .dt-wrap { width: min(100%, 430px); }
    .dt-table { aspect-ratio: 864/1540; width: min(100%,430px); }
    .dt-tableImage-desk { display: none; }
    .dt-tableImage-mob { display: block; object-fit: fill; }
    .dt-roundTicker { top: 31.7%; }
    .dt-progressBar { top: 36%; }
    .dt-cardTag { bottom: auto; top: -14px; }
    .dt-dragonCard { top: 18.7%; left: 15.6%; }
    .dt-tigerCard { top: 18.7%; right: 15.6%; }
    .dt-cardSlot { width: 18%; height: 11.2%; }
    .dt-dragonScore { top: 29.5%; left: 16.4%; }
    .dt-tigerScore { top: 29.5%; right: 16.4%; }
    .dt-dragonSpot { width: 90.4%; height: 18.6%; top: 37%; left: 4.8%; }
    .dt-tieSpot { width: 90.4%; height: 17.5%; top: 56.2%; left: 4.8%; }
    .dt-tigerSpot { width: 90.4%; height: 17.7%; top: 74.9%; left: 4.8%; }
    .dt-history { width: 88%; top: 2.6%; }
    .dt-controlBar { position: static; transform: none; width: 100%; margin-top: 12px; flex-direction: column; gap: 6px; }
    .dt-customAmount { align-self: center; width: min(92%, 360px); min-width: 0; }
}