*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}body{margin:0;background:#050505;color:white;font-family:Arial,Helvetica,sans-serif;user-select:none;transform-origin:top left}
.app{height:100vh;padding:6px 348px 6px 6px;overflow:hidden;background:radial-gradient(circle at top,#21170c,#030303 62%)}
.topbar{max-width:none;margin:0 0 4px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{width:150px;height:46px;display:flex;align-items:center}.brand img{max-height:46px;max-width:150px;object-fit:contain}.logoText{font-size:32px;font-weight:900;color:#ffe487}.logoText span{color:#d5202f}
.status{flex:1;text-align:center;color:#ddd;font-size:12px}.status strong{color:#ffe487;font-size:15px;letter-spacing:1px}
.bank{min-width:215px;border:1px solid rgba(243,199,79,.6);border-radius:14px;background:rgba(0,0,0,.65);padding:5px 10px}.bank div{display:flex;justify-content:space-between;gap:18px;padding:2px 0;font-weight:700}.bank b{color:#ffe487}
.tableStage{max-width:none;margin:0;position:relative;width:calc(100vw - 362px);height:calc(100vh - 66px);overflow:hidden}
.feltWrap{position:relative;width:100%;height:100%;aspect-ratio:auto;border-radius:28px;overflow:hidden;background-image:url("../images/table-background.jpg");background-size:100% 100%;background-position:center;background-repeat:no-repeat;box-shadow:0 22px 45px rgba(0,0,0,.75),inset 0 0 0 3px rgba(243,199,79,.55)}
.feltWrap:after{content:"";position:absolute;inset:14px;border:2px solid rgba(255,228,135,.5);border-radius:22px;pointer-events:none;z-index:2}
.card{position:absolute;width:7.8%;aspect-ratio:63/88;border-radius:7%;background:#f8f8f8;color:#111;border:2px solid #eee;box-shadow:0 16px 30px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.25) inset;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,3.6vw,54px);font-weight:900;z-index:8;transition:transform .22s ease,box-shadow .22s ease}
.card.red{color:#c31624}.card small{position:absolute;top:6%;left:8%;font-size:38%;line-height:1}.card .br{position:absolute;bottom:6%;right:8%;font-size:38%;transform:rotate(180deg)}
.card.back{background:linear-gradient(135deg,#1e5098,#092e68),repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 3px,transparent 3px 7px)!important;color:white!important;border-color:#dce9ff}.card.back:after{content:"B16";border:2px solid rgba(255,255,255,.85);padding:12% 8%;border-radius:10%;font-size:38%;color:white}
.card.undealt{opacity:0;pointer-events:none}
.card.dealing{z-index:30;will-change:transform,opacity}
.card.flipping{z-index:31;will-change:transform}
#dealer1{left:35.5%;top:9.2%}#dealer2{left:45.2%;top:9.2%}#dealer3{left:54.9%;top:9.2%}#playerCard{left:36.1%;top:62%}
.resultTag{position:absolute;min-width:10%;text-align:center;font-weight:900;font-size:clamp(12px,1.1vw,16px);z-index:12;text-shadow:0 2px 5px #000;background:rgba(0,0,0,.68);border:1px solid rgba(243,199,79,.72);border-radius:999px;padding:5px 8px;display:none;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;box-shadow:0 8px 18px rgba(0,0,0,.45)}.resultTag.show{opacity:1;visibility:visible;transform:scale(1);transition:opacity .42s ease,transform .42s ease,visibility 0s}
#res1{left:38.2%;top:35.5%}#res2{left:46.8%;top:35.5%}#res3{left:55.4%;top:35.5%}#power4Result{left:53.5%;top:73.2%}.win{color:#75ff91}.lose{color:#ff7a7a}.gold{color:#ffe487}
.chip{width:clamp(48px,5.2vw,78px);height:clamp(48px,5.2vw,78px);border-radius:50%;background:radial-gradient(circle,#ff6969 0 28%,#a80e18 29% 55%,#fff 56% 64%,#a80e18 65%);border:4px dashed white;display:flex;align-items:center;justify-content:center;color:white;font-size:clamp(11px,1vw,15px);font-weight:900;text-shadow:0 1px 3px #000;box-shadow:0 10px 18px rgba(0,0,0,.78),inset 0 2px 5px rgba(255,255,255,.35)}
.chip.goldChip{background:radial-gradient(circle,#ffe98c 0 28%,#b98212 29% 55%,#fff 56% 64%,#b98212 65%);color:#111;text-shadow:none}
.stack{position:absolute;width:6.6%;aspect-ratio:1/1;z-index:10;display:none;pointer-events:none}.stack .chip{position:absolute;width:75%;height:75%;left:12%;top:14%}.stack.double .chip:nth-child(1){left:5%;top:21%}.stack.double .chip:nth-child(2){left:18%;top:5%}.stack:not(.double) .chip:nth-child(2){display:none}
#chip1{left:37.6%;top:50.8%}#chip2{left:46.5%;top:50.8%}#chip3{left:55.4%;top:50.8%}#winChip1{left:35.1%;top:55.6%}#winChip2{left:51.9%;top:55.6%}#winChip3{left:59.2%;top:55.6%}#power4Chip{left:47.2%;top:68.5%}#power4WinChip{left:53.2%;top:73.2%}
.hotspot{position:absolute;border-radius:50%;z-index:20;cursor:pointer}.hotspot:hover{outline:2px solid rgba(255,228,135,.8);outline-offset:3px}#hotH1{left:41%;top:57.2%;width:4.3%;height:7.3%}#hotH2{left:48.3%;top:57.2%;width:4.3%;height:7.3%}#hotH3{left:55.6%;top:57.2%;width:4.3%;height:7.3%}#hotPower4{left:48.2%;top:71.7%;width:4.8%;height:8%}

#power4Badge{display:flex!important;position:absolute;left:46.8%;top:67.8%;width:8.2%;aspect-ratio:1/1;z-index:6;border:2px solid #d4a63b;border-radius:50%;background:rgba(18,10,6,.18);flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:900;color:#ffe487;text-shadow:0 3px 7px #000,0 0 10px rgba(0,0,0,.9);letter-spacing:.45px;font-size:clamp(13px,1.05vw,19px);line-height:1.02;box-shadow:0 0 10px rgba(0,0,0,.35), inset 0 0 8px rgba(212,166,59,.18);pointer-events:none}

.controlDock{position:fixed;top:8px;right:8px;bottom:8px;width:332px;margin:0;z-index:100;background:linear-gradient(180deg,rgba(16,13,8,.96),rgba(0,0,0,.92));border:1px solid rgba(243,199,79,.9);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.75),inset 0 0 30px rgba(243,199,79,.05);padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.controlDock h2{display:block;margin:0 0 2px;text-align:center;color:#ffe487;font-size:16px;letter-spacing:1px}.msg{min-height:56px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px;font-size:12px;line-height:1.3;margin:0}.row{display:grid;grid-template-columns:1fr;gap:6px}.row3{display:grid;grid-template-columns:1fr;gap:6px}label{font-size:12px;color:#ddd;display:block;margin-bottom:4px;font-weight:700}
select,button{width:100%;border-radius:11px;padding:10px 9px;font-size:13px;border:1px solid rgba(243,199,79,.72)}select{background:#111;color:#fff}button{background:linear-gradient(#fff1a6 0%,#e5bd48 42%,#a87315 100%);color:#111;border:1px solid rgba(255,240,170,.55);font-weight:900;cursor:pointer;box-shadow:0 5px 0 rgba(92,55,5,.9),0 10px 18px rgba(0,0,0,.45);letter-spacing:.25px;text-transform:uppercase}button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(92,55,5,.9),0 5px 12px rgba(0,0,0,.45)}button.secondary{background:linear-gradient(#f7f7f7,#b8b8b8);color:#111}button.danger{background:linear-gradient(#ff7777,#b41420);color:white;border-color:rgba(255,255,255,.35);box-shadow:0 5px 0 rgba(92,0,0,.9),0 10px 18px rgba(0,0,0,.45)}button:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.toast{display:none;position:absolute;left:50%;top:43%;transform:translate(-50%,-44%) scale(.96);opacity:0;visibility:hidden;transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;z-index:50;border:1px solid rgba(255,228,135,.9);background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.84),rgba(0,0,0,.12));box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 22px rgba(255,228,135,.22);border-radius:999px;padding:9px 34px;text-align:center;font-weight:900;font-size:clamp(15px,2vw,28px);letter-spacing:1px;min-width:min(560px,54vw);pointer-events:none}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition:opacity .42s ease,transform .42s ease,visibility 0s}
.fullScreenBtn{position:absolute;right:2.2%;top:2.2%;z-index:40;width:auto;padding:8px 12px;opacity:.78}
@media(max-width:1000px){.topbar{flex-direction:column}.controlDock{grid-template-columns:1fr 1fr}.msg{grid-column:1/-1}}

.stack.collecting{
  display:block!important;
  animation:collectToDealer 1.4s ease-in forwards;
}
@keyframes collectToDealer{
  0%{transform:translateY(0) scale(1);opacity:1}
  60%{transform:translateY(-120px) scale(.92);opacity:.9}
  100%{transform:translateY(-220px) scale(.7);opacity:0}
}


.stack.paying{
  display:block!important;
  animation:payFromDealer 1.2s ease-out forwards;
}
@keyframes payFromDealer{
  0%{transform:translateY(-220px) scale(.7);opacity:0}
  45%{opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}

#power4Chip.floatIn{
  display:block!important;
  animation:chipSlideInFromBottom 2.1s cubic-bezier(.18,.82,.25,1) forwards;
}
#chip1.floatIn, #chip2.floatIn, #chip3.floatIn{
  display:block!important;
  animation:chipSlideInFromBottom 2.1s cubic-bezier(.18,.82,.25,1) forwards;
}
.stack.floatIn{
  display:block!important;
}
@keyframes chipSlideInFromBottom{
  0%{transform:translateY(145px) scale(.9);opacity:0}
  60%{opacity:1}
  82%{transform:translateY(-4px) scale(1.02);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}


/* Polish pass: clearer control states and better small-screen behavior */
button:not(:disabled):hover{filter:brightness(1.08)}
#reveal:not(:disabled){box-shadow:0 0 0 2px rgba(255,228,135,.18),0 0 18px rgba(255,228,135,.15)}
@media(max-width:900px){html,body{overflow:auto}.app{height:auto;min-height:100vh;padding:6px}.tableStage{width:100%;height:66vh}.controlDock{position:relative;inset:auto;width:100%;margin-top:8px}.fullScreenBtn{display:none}}

.nhvBrandBlock{
  margin-top:2px;
  padding:8px;
  border:1px solid rgba(243,199,79,.45);
  border-radius:12px;
  background:rgba(0,0,0,.35);
  text-align:center;
}
.nhvBrandBlock img{
  width:100%;
  max-height:130px;
  object-fit:contain;
  display:block;
}


/* Paytables overlay */
.paytableBtn{background:linear-gradient(#ffe98b,#c79a28);color:#111;border:0;font-weight:900}
.paytableOverlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.72);
  display:none;align-items:center;justify-content:center;
  padding:18px;
}
.paytableOverlay.show{display:flex}
.paytableModal{
  width:min(780px,92vw);
  max-height:88vh;
  overflow:auto;
  background:linear-gradient(180deg,rgba(38,14,20,.98),rgba(5,5,5,.98));
  border:2px solid rgba(243,199,79,.95);
  border-radius:20px;
  box-shadow:0 18px 55px rgba(0,0,0,.85), inset 0 0 35px rgba(243,199,79,.08);
  color:#fff;
  padding:18px;
}
.paytableHeader{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(243,199,79,.45);
  padding-bottom:10px;margin-bottom:12px;
}
.paytableHeader h2{margin:0;color:#ffe487;letter-spacing:1px;font-size:24px}
.paytableClose{
  width:auto;min-width:44px;border-radius:10px;padding:8px 12px;
  background:linear-gradient(#ff7474,#b41420);color:white;border:0;font-weight:900;cursor:pointer;
}
.paytableTabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 14px}
.paytableTab{
  border:1px solid rgba(243,199,79,.75);
  background:rgba(255,255,255,.06);
  color:#ffe487;
  border-radius:10px;
  padding:10px;
  font-weight:900;
  cursor:pointer;
}
.paytableTab.active{background:linear-gradient(#ffe98b,#c79a28);color:#111}
.paytablePanel{display:none}
.paytablePanel.active{display:block}
.paytablePanel h3{color:#ffe487;margin:10px 0 8px;font-size:18px}
.paytableGrid{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 14px;
  background:rgba(0,0,0,.22);
  border-radius:12px;
  overflow:hidden;
}
.paytableGrid th,.paytableGrid td{
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:9px 10px;
  text-align:left;
  font-size:14px;
}
.paytableGrid th{
  color:#ffe487;
  background:rgba(0,0,0,.35);
  font-weight:900;
}
.paytableGrid tr:last-child td{border-bottom:0}
.paytableNote{
  color:#ddd;
  font-size:13px;
  line-height:1.4;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px;
}
.paytableCallout{
  color:#ffe487;
  font-weight:900;
  margin-top:8px;
}


.nhvBrandBlock{
  margin-top:2px;
  padding:8px;
  border:1px solid rgba(243,199,79,.45);
  border-radius:12px;
  background:rgba(0,0,0,.35);
  text-align:center;
}
.nhvBrandBlock img{
  width:100%;
  max-height:130px;
  object-fit:contain;
  display:block;
}