#hand-rank-effect-layer{
  --hand-rank-color:215,230,244;
  --hand-rank-accent:255,255,255;
  --hand-rank-suit-color:194,218,241;
  position:absolute;
  left:6.3%;
  right:6.3%;
  top:11.8%;
  bottom:13.2%;
  z-index:18;
  overflow:hidden;
  clip-path:polygon(18% 0,82% 0,97% 28%,97% 72%,82% 100%,18% 100%,3% 72%,3% 28%);
  pointer-events:none !important;
  contain:layout style paint;
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  transition:opacity 160ms ease,visibility 0s linear 160ms;
}

#hand-rank-effect-layer[hidden]{display:none !important;}

#hand-rank-effect-layer.hand-rank-active{
  opacity:1;
  visibility:visible;
  background:transparent;
  transition:opacity 180ms ease,visibility 0s linear 0s;
}

/* Color-correct only the original table bitmap. Seats, cards and action UI live above it. */
#stage::before{
  transition:filter 220ms ease;
}

#stage:has(#hand-rank-effect-layer.hand-rank-active)::after{
  mix-blend-mode:color;
  transition:background 220ms ease,opacity 220ms ease;
  opacity:1;
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-pair)::before{
  filter:grayscale(.92) saturate(.52) brightness(1.12) contrast(1.08);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-two-pair)::before{
  filter:saturate(.72) brightness(1.04) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-trips)::before{
  filter:saturate(.72) brightness(1.03) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-straight)::before{
  filter:saturate(.7) brightness(1.03) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-spades)::before{
  filter:grayscale(.68) saturate(.72) brightness(1.08) contrast(1.07);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-clubs)::before{
  filter:saturate(.7) brightness(1.03) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-diamonds)::before{
  filter:saturate(.72) brightness(1.04) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-hearts)::before{
  filter:saturate(.7) brightness(1.03) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-full-house)::before{
  filter:saturate(.72) brightness(1.03) contrast(1.06);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-quads)::before{
  filter:saturate(.68) brightness(1.04) contrast(1.07);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-straight-flush)::before{
  filter:saturate(1.45) brightness(1.05) contrast(1.08);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-royal-flush)::before{
  filter:saturate(1.12) brightness(1.08) contrast(1.07);
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-pair)::after{
  background:linear-gradient(rgba(235,242,250,.24),rgba(235,242,250,.24));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-two-pair)::after{
  background:linear-gradient(rgba(20,101,255,.58),rgba(20,101,255,.58));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-trips)::after{
  background:linear-gradient(rgba(154,42,255,.58),rgba(154,42,255,.58));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-straight)::after{
  background:linear-gradient(rgba(28,214,91,.58),rgba(28,214,91,.58));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-spades)::after{
  background:linear-gradient(rgba(139,184,225,.45),rgba(139,184,225,.45));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-clubs)::after{
  background:linear-gradient(rgba(25,207,91,.58),rgba(25,207,91,.58));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-diamonds)::after{
  background:linear-gradient(rgba(20,112,255,.6),rgba(20,112,255,.6));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-flush.hand-rank-suit-hearts)::after{
  background:linear-gradient(rgba(239,35,69,.6),rgba(239,35,69,.6));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-full-house)::after{
  background:linear-gradient(rgba(241,26,170,.62),rgba(241,26,170,.62));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-quads)::after{
  background:linear-gradient(rgba(255,62,22,.64),rgba(255,62,22,.64));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-straight-flush)::after{
  background:conic-gradient(from 24deg at center,rgba(38,222,144,.46),rgba(35,136,255,.5),rgba(191,65,255,.48),rgba(255,64,102,.46),rgba(255,207,56,.48),rgba(38,222,144,.46));
}

#stage:has(#hand-rank-effect-layer.hand-rank-active.hand-rank-royal-flush)::after{
  background:conic-gradient(from 18deg at center,rgba(255,216,58,.62),rgba(255,113,48,.48),rgba(220,70,255,.45),rgba(47,190,255,.42),rgba(55,225,148,.42),rgba(255,216,58,.62));
}

#hand-rank-effect-layer::before{
  content:"";
  position:absolute;
  inset:8% 1.2%;
  z-index:5;
  background:
    linear-gradient(180deg,transparent,rgba(var(--hand-rank-color),.28) 18%,rgba(var(--hand-rank-accent),.82) 50%,rgba(var(--hand-rank-color),.28) 82%,transparent) left center / 2px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(var(--hand-rank-color),.28) 18%,rgba(var(--hand-rank-accent),.82) 50%,rgba(var(--hand-rank-color),.28) 82%,transparent) right center / 2px 100% no-repeat;
  opacity:.58;
  filter:drop-shadow(0 0 .35em rgba(var(--hand-rank-color),.52));
}

#hand-rank-effect-layer::after{
  content:"";
  position:absolute;
  inset:1.2%;
  z-index:0;
  pointer-events:none;
  clip-path:inherit;
  background:
    radial-gradient(ellipse at center,rgba(var(--hand-rank-color),.1),transparent 56%),
    linear-gradient(90deg,rgba(var(--hand-rank-color),.11),transparent 24% 76%,rgba(var(--hand-rank-color),.11));
  box-shadow:inset 0 0 3em rgba(var(--hand-rank-color),.16);
  mix-blend-mode:soft-light;
  opacity:.34;
}

.hand-rank-table-pattern,
.hand-rank-pulse,
.hand-rank-streams,
.hand-rank-suit-field,
.hand-rank-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.hand-rank-table-pattern{
  z-index:1;
  opacity:.2;
  -webkit-mask-image:radial-gradient(ellipse 42% 58% at 50% 51%,#000 0 48%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.42) 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 42% 58% at 50% 51%,#000 0 48%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.42) 75%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  background:
    linear-gradient(90deg,transparent 0 49.7%,rgba(var(--hand-rank-color),.18) 50%,transparent 50.3%),
    linear-gradient(0deg,transparent 0 49.7%,rgba(var(--hand-rank-color),.12) 50%,transparent 50.3%);
}

.hand-rank-pulse{
  z-index:2;
  left:18%;
  right:18%;
  top:21%;
  bottom:21%;
  border:1px solid rgba(var(--hand-rank-color),.34);
  border-radius:50%;
  opacity:.14;
  transform:scale(.92);
}

.hand-rank-streams{
  z-index:2;
  opacity:.18;
}

.hand-rank-suit-field{
  z-index:3;
  overflow:hidden;
  color:rgba(var(--hand-rank-suit-color),.62);
  font-weight:900;
  text-shadow:0 0 .55em rgba(var(--hand-rank-suit-color),.58);
  -webkit-mask-image:radial-gradient(ellipse 44% 60% at 50% 50%,#000 0 46%,rgba(0,0,0,.84) 60%,rgba(0,0,0,.4) 77%,transparent 100%);
  mask-image:radial-gradient(ellipse 44% 60% at 50% 50%,#000 0 46%,rgba(0,0,0,.84) 60%,rgba(0,0,0,.4) 77%,transparent 100%);
}

.hand-rank-suit-mark{
  position:absolute;
  left:var(--mark-x);
  top:var(--mark-y);
  font-size:calc(clamp(17px,2.65vw,39px) * var(--mark-size));
  line-height:1;
  opacity:var(--mark-opacity);
  transform:translate(-50%,-50%) rotate(var(--mark-rotate));
}

.hand-rank-suit-mark:nth-child(1){--mark-x:14%;--mark-y:22%;--mark-size:1.6;--mark-opacity:.62;--mark-rotate:-14deg;}
.hand-rank-suit-mark:nth-child(2){--mark-x:30%;--mark-y:13%;--mark-size:.92;--mark-opacity:.42;--mark-rotate:9deg;}
.hand-rank-suit-mark:nth-child(3){--mark-x:49%;--mark-y:24%;--mark-size:3.65;--mark-opacity:.56;--mark-rotate:-5deg;}
.hand-rank-suit-mark:nth-child(4){--mark-x:71%;--mark-y:16%;--mark-size:1.1;--mark-opacity:.5;--mark-rotate:16deg;}
.hand-rank-suit-mark:nth-child(5){--mark-x:86%;--mark-y:28%;--mark-size:2.1;--mark-opacity:.62;--mark-rotate:-11deg;}
.hand-rank-suit-mark:nth-child(6){--mark-x:21%;--mark-y:43%;--mark-size:1.25;--mark-opacity:.5;--mark-rotate:13deg;}
.hand-rank-suit-mark:nth-child(7){--mark-x:39%;--mark-y:48%;--mark-size:1.75;--mark-opacity:.64;--mark-rotate:-17deg;}
.hand-rank-suit-mark:nth-child(8){--mark-x:62%;--mark-y:42%;--mark-size:.9;--mark-opacity:.46;--mark-rotate:7deg;}
.hand-rank-suit-mark:nth-child(9){--mark-x:79%;--mark-y:51%;--mark-size:2.85;--mark-opacity:.64;--mark-rotate:14deg;}
.hand-rank-suit-mark:nth-child(10){--mark-x:11%;--mark-y:68%;--mark-size:1;--mark-opacity:.44;--mark-rotate:18deg;}
.hand-rank-suit-mark:nth-child(11){--mark-x:29%;--mark-y:75%;--mark-size:2.6;--mark-opacity:.62;--mark-rotate:-9deg;}
.hand-rank-suit-mark:nth-child(12){--mark-x:47%;--mark-y:66%;--mark-size:1.2;--mark-opacity:.4;--mark-rotate:12deg;}
.hand-rank-suit-mark:nth-child(13){--mark-x:59%;--mark-y:79%;--mark-size:1.7;--mark-opacity:.58;--mark-rotate:-15deg;}
.hand-rank-suit-mark:nth-child(14){--mark-x:75%;--mark-y:72%;--mark-size:1.1;--mark-opacity:.48;--mark-rotate:8deg;}
.hand-rank-suit-mark:nth-child(15){--mark-x:89%;--mark-y:64%;--mark-size:2;--mark-opacity:.58;--mark-rotate:-7deg;}
.hand-rank-suit-mark:nth-child(16){--mark-x:18%;--mark-y:58%;--mark-size:1.9;--mark-opacity:.56;--mark-rotate:21deg;}
.hand-rank-suit-mark:nth-child(17){--mark-x:35%;--mark-y:31%;--mark-size:1.25;--mark-opacity:.48;--mark-rotate:-24deg;}
.hand-rank-suit-mark:nth-child(18){--mark-x:57%;--mark-y:13%;--mark-size:1.55;--mark-opacity:.5;--mark-rotate:11deg;}
.hand-rank-suit-mark:nth-child(19){--mark-x:68%;--mark-y:62%;--mark-size:2.35;--mark-opacity:.6;--mark-rotate:-13deg;}
.hand-rank-suit-mark:nth-child(20){--mark-x:82%;--mark-y:38%;--mark-size:1.4;--mark-opacity:.46;--mark-rotate:26deg;}
.hand-rank-suit-mark:nth-child(21){--mark-x:52%;--mark-y:54%;--mark-size:2;--mark-opacity:.58;--mark-rotate:-8deg;}
.hand-rank-suit-mark:nth-child(22){--mark-x:41%;--mark-y:82%;--mark-size:1;--mark-opacity:.4;--mark-rotate:17deg;}
.hand-rank-suit-mark:nth-child(23){--mark-x:91%;--mark-y:48%;--mark-size:1.1;--mark-opacity:.42;--mark-rotate:-19deg;}
.hand-rank-suit-mark:nth-child(24){--mark-x:8%;--mark-y:42%;--mark-size:1.45;--mark-opacity:.45;--mark-rotate:6deg;}

.hand-rank-label-suit{
  color:rgb(var(--hand-rank-suit-color));
}

.hand-rank-particles{
  z-index:3;
  opacity:0;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 92% 86% at center,#000 0 68%,rgba(0,0,0,.84) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 92% 86% at center,#000 0 68%,rgba(0,0,0,.84) 84%,transparent 100%);
}

.hand-rank-petal{
  position:absolute;
  --petal-group-x:0%;
  --petal-group-y:0%;
  left:calc(var(--petal-x) + var(--petal-group-x));
  top:calc(var(--petal-y) + var(--petal-group-y));
  width:clamp(5px,.72vw,11px);
  height:clamp(8px,1.08vw,16px);
  border-radius:100% 0 100% 0;
  background:linear-gradient(145deg,rgba(var(--hand-rank-suit-color),.95),rgba(var(--hand-rank-suit-color),.34));
  border:1px solid rgba(var(--hand-rank-accent),.16);
  box-shadow:0 0 .52em rgba(var(--hand-rank-suit-color),.72);
  opacity:.78;
  transform-origin:50% 80%;
  animation:handRankPetalFall var(--petal-time) linear var(--petal-delay) infinite;
}

.hand-rank-petal:nth-child(18n + 1){--petal-x:10%;--petal-y:8%;--petal-time:6.4s;--petal-delay:-1.2s;--petal-drift:34px;--petal-rotate:12deg;--petal-scale:.72;}
.hand-rank-petal:nth-child(18n + 2){--petal-x:19%;--petal-y:36%;--petal-time:7.1s;--petal-delay:-4.8s;--petal-drift:-24px;--petal-rotate:68deg;--petal-scale:1.05;}
.hand-rank-petal:nth-child(18n + 3){--petal-x:27%;--petal-y:14%;--petal-time:5.8s;--petal-delay:-3.1s;--petal-drift:42px;--petal-rotate:118deg;--petal-scale:.86;}
.hand-rank-petal:nth-child(18n + 4){--petal-x:35%;--petal-y:54%;--petal-time:7.8s;--petal-delay:-6.3s;--petal-drift:-37px;--petal-rotate:34deg;--petal-scale:1.18;}
.hand-rank-petal:nth-child(18n + 5){--petal-x:44%;--petal-y:21%;--petal-time:6.8s;--petal-delay:-2.7s;--petal-drift:29px;--petal-rotate:152deg;--petal-scale:.64;}
.hand-rank-petal:nth-child(18n + 6){--petal-x:52%;--petal-y:8%;--petal-time:8.1s;--petal-delay:-7.4s;--petal-drift:-31px;--petal-rotate:88deg;--petal-scale:1.1;}
.hand-rank-petal:nth-child(18n + 7){--petal-x:61%;--petal-y:43%;--petal-time:6.1s;--petal-delay:-5.2s;--petal-drift:38px;--petal-rotate:7deg;--petal-scale:.8;}
.hand-rank-petal:nth-child(18n + 8){--petal-x:70%;--petal-y:18%;--petal-time:7.5s;--petal-delay:-1.9s;--petal-drift:-43px;--petal-rotate:133deg;--petal-scale:1.22;}
.hand-rank-petal:nth-child(18n + 9){--petal-x:79%;--petal-y:57%;--petal-time:5.9s;--petal-delay:-4.1s;--petal-drift:27px;--petal-rotate:55deg;--petal-scale:.68;}
.hand-rank-petal:nth-child(18n + 10){--petal-x:88%;--petal-y:25%;--petal-time:7.2s;--petal-delay:-6.7s;--petal-drift:-34px;--petal-rotate:170deg;--petal-scale:1.08;}
.hand-rank-petal:nth-child(18n + 11){--petal-x:15%;--petal-y:63%;--petal-time:8.3s;--petal-delay:-3.6s;--petal-drift:45px;--petal-rotate:103deg;--petal-scale:.9;}
.hand-rank-petal:nth-child(18n + 12){--petal-x:25%;--petal-y:77%;--petal-time:6.5s;--petal-delay:-5.6s;--petal-drift:-29px;--petal-rotate:42deg;--petal-scale:1.16;}
.hand-rank-petal:nth-child(18n + 13){--petal-x:39%;--petal-y:69%;--petal-time:7.7s;--petal-delay:-.8s;--petal-drift:33px;--petal-rotate:148deg;--petal-scale:.74;}
.hand-rank-petal:nth-child(18n + 14){--petal-x:50%;--petal-y:58%;--petal-time:6s;--petal-delay:-4.5s;--petal-drift:-41px;--petal-rotate:21deg;--petal-scale:1;}
.hand-rank-petal:nth-child(18n + 15){--petal-x:64%;--petal-y:74%;--petal-time:8s;--petal-delay:-2.3s;--petal-drift:36px;--petal-rotate:76deg;--petal-scale:.84;}
.hand-rank-petal:nth-child(18n + 16){--petal-x:73%;--petal-y:66%;--petal-time:6.9s;--petal-delay:-6.1s;--petal-drift:-25px;--petal-rotate:125deg;--petal-scale:1.2;}
.hand-rank-petal:nth-child(18n + 17){--petal-x:84%;--petal-y:79%;--petal-time:7.3s;--petal-delay:-3.3s;--petal-drift:40px;--petal-rotate:11deg;--petal-scale:.7;}
.hand-rank-petal:nth-child(18n + 18){--petal-x:93%;--petal-y:49%;--petal-time:6.2s;--petal-delay:-5.1s;--petal-drift:-32px;--petal-rotate:160deg;--petal-scale:1.12;}
.hand-rank-petal:nth-child(n + 19):nth-child(-n + 36){--petal-group-x:3%;--petal-group-y:-5%;animation-delay:calc(var(--petal-delay) - 2.15s);}
.hand-rank-petal:nth-child(n + 37){--petal-group-x:-3%;--petal-group-y:4%;animation-delay:calc(var(--petal-delay) - 4.05s);}

.hand-rank-label{
  position:absolute;
  z-index:6;
  left:26.5%;
  top:84%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.42em;
  min-width:clamp(104px,12.5vw,180px);
  min-height:clamp(25px,4.4vh,40px);
  padding:.16em .9em;
  transform:translate(-50%,-50%);
  border:0;
  background:linear-gradient(90deg,transparent,rgba(1,7,13,.88) 13%,rgba(var(--hand-rank-color),.12) 50%,rgba(1,7,13,.88) 87%,transparent);
  color:rgb(var(--hand-rank-color));
  font-size:clamp(12px,1.35vw,21px);
  font-weight:1000;
  letter-spacing:.16em;
  line-height:1;
  text-align:center;
  text-shadow:0 0 .42em rgba(var(--hand-rank-color),.88),0 0 .75em rgba(var(--hand-rank-color),.36);
  white-space:nowrap;
}

.hand-rank-label::before,
.hand-rank-label::after{
  content:"";
  width:.24em;
  height:.24em;
  transform:rotate(45deg);
  background:rgba(var(--hand-rank-accent),.82);
  box-shadow:0 0 .5em rgba(var(--hand-rank-color),.7);
}

.hand-rank-label-suit{
  font-size:1.05em;
  line-height:1;
  letter-spacing:0;
}

.hand-rank-crown{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%);
  color:#ffe46f;
  font-size:1.55em;
  line-height:1;
  text-shadow:0 0 .45em rgba(255,205,57,.72);
}

#hand-rank-effect-layer.hand-rank-pair{
  --hand-rank-color:222,232,242;
  --hand-rank-accent:255,255,255;
}

.hand-rank-pair .hand-rank-table-pattern{
  opacity:.52;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 320'%3E%3Cpath d='M24 174h92v-38h72v58h86v-88h100v54h74v-34h90v78h78v-50h92v32h92v-58h76' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M24 174h92v-38h72v58h86v-88h100v54h74v-34h90v78h78v-50h92v32h92v-58h76' fill='none' stroke='%23f7fbff' stroke-opacity='.82' stroke-width='1.15' stroke-linejoin='round'/%3E%3Cg fill='%23ffffff' fill-opacity='.82'%3E%3Ccircle cx='116' cy='174' r='2.2'/%3E%3Ccircle cx='188' cy='194' r='2.2'/%3E%3Ccircle cx='274' cy='106' r='2.2'/%3E%3Ccircle cx='374' cy='160' r='2.2'/%3E%3Ccircle cx='538' cy='204' r='2.2'/%3E%3Ccircle cx='708' cy='186' r='2.2'/%3E%3Ccircle cx='800' cy='128' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:78% 56%;
}

#hand-rank-effect-layer.hand-rank-two-pair{
  --hand-rank-color:54,139,255;
  --hand-rank-accent:116,203,255;
}

.hand-rank-two-pair .hand-rank-table-pattern{
  opacity:.48;
  background:
    radial-gradient(ellipse at center,transparent 0 21%,rgba(63,139,255,.7) 21.5% 22%,transparent 22.5% 34%,rgba(91,181,255,.62) 34.5% 35%,transparent 35.5%),
    radial-gradient(ellipse at center,rgba(29,87,220,.12),transparent 66%);
}

.hand-rank-two-pair .hand-rank-streams{
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 140'%3E%3Cg fill='none' stroke='%235aa8ff' stroke-opacity='.8' stroke-width='1'%3E%3Cpath d='M0 19h31v16h34V24h43v25h27v21h39V51h48v20h38'/%3E%3Cpath d='M0 111h39V93h33v21h40V86h35v17h44V81h33v25h36'/%3E%3Cpath d='M24 0v20M74 0v34h22M181 0v28h-24M232 140v-27h-32M46 140v-24h21'/%3E%3C/g%3E%3Cg fill='%2394c9ff'%3E%3Ccircle cx='65' cy='35' r='2'/%3E%3Ccircle cx='135' cy='70' r='2'/%3E%3Ccircle cx='222' cy='71' r='2'/%3E%3Ccircle cx='112' cy='114' r='2'/%3E%3Ccircle cx='191' cy='103' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 140px;
  -webkit-mask-image:radial-gradient(ellipse 43% 58% at center,transparent 0 38%,rgba(0,0,0,.62) 47%,#000 64%,rgba(0,0,0,.42) 79%,transparent 100%);
  mask-image:radial-gradient(ellipse 43% 58% at center,transparent 0 38%,rgba(0,0,0,.62) 47%,#000 64%,rgba(0,0,0,.42) 79%,transparent 100%);
}

#hand-rank-effect-layer.hand-rank-trips{
  --hand-rank-color:174,79,255;
  --hand-rank-accent:224,145,255;
}

.hand-rank-trips .hand-rank-table-pattern{
  opacity:.4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 48.5'%3E%3Cg fill='%23b94cff' fill-opacity='.035' stroke='%23df8cff' stroke-opacity='.94' stroke-width='.72'%3E%3Cpath d='M0 12.125 7 0h14l7 12.125-7 12.125H7Z'/%3E%3Cpath d='M0 36.375 7 24.25h14l7 12.125L21 48.5H7Z'/%3E%3Cpath d='m21 24.25 7-12.125h14l7 12.125-7 12.125H28Z'/%3E%3Cpath d='m-21 24.25 7-12.125H0L7 24.25 0 36.375h-14Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:42px 48.5px;
}

#hand-rank-effect-layer.hand-rank-straight{
  --hand-rank-color:46,230,120;
  --hand-rank-accent:132,255,186;
}

.hand-rank-straight .hand-rank-table-pattern,
.hand-rank-straight-flush .hand-rank-streams{
  inset:13% 10% 18%;
  opacity:.5;
  background:
    repeating-linear-gradient(128deg,transparent 0 2.78%,rgba(var(--hand-rank-color),.48) 2.82% 2.89%,rgba(var(--hand-rank-accent),.25) 2.9% 2.93%,transparent 2.98%),
    repeating-linear-gradient(128deg,transparent 0 8.38%,rgba(var(--hand-rank-accent),.6) 8.46% 8.7%,rgba(var(--hand-rank-color),.25) 8.74% 8.84%,transparent 8.92% 11.84%);
  background-size:112% 112%;
  clip-path:polygon(13% 0,87% 0,100% 29%,100% 71%,87% 100%,13% 100%,0 71%,0 29%);
  -webkit-mask-image:radial-gradient(ellipse 48% 63% at center,#000 0 54%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.38) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 48% 63% at center,#000 0 54%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.38) 84%,transparent 100%);
  animation:handRankSteadyFlow 9s linear infinite;
}

#hand-rank-effect-layer.hand-rank-flush{
  --hand-rank-color:83,179,255;
  --hand-rank-accent:184,230,255;
}

.hand-rank-flush .hand-rank-table-pattern{
  opacity:.32;
  background:radial-gradient(ellipse at center,rgba(var(--hand-rank-color),.28) 0 12%,transparent 13% 26%,rgba(var(--hand-rank-color),.32) 27%,transparent 28% 43%,rgba(var(--hand-rank-color),.2) 44%,transparent 45%);
}

#hand-rank-effect-layer.hand-rank-suit-spades{
  --hand-rank-color:194,218,241;
  --hand-rank-accent:126,190,255;
  --hand-rank-suit-color:194,218,241;
}

#hand-rank-effect-layer.hand-rank-suit-clubs{
  --hand-rank-color:46,225,118;
  --hand-rank-accent:142,255,187;
  --hand-rank-suit-color:46,225,118;
}

#hand-rank-effect-layer.hand-rank-suit-diamonds{
  --hand-rank-color:48,145,255;
  --hand-rank-accent:127,210,255;
  --hand-rank-suit-color:48,145,255;
}

#hand-rank-effect-layer.hand-rank-suit-hearts{
  --hand-rank-color:255,69,91;
  --hand-rank-accent:255,143,158;
  --hand-rank-suit-color:255,69,91;
}

#hand-rank-effect-layer.hand-rank-full-house{
  --hand-rank-color:255,63,190;
  --hand-rank-accent:255,147,220;
}

.hand-rank-full-house .hand-rank-table-pattern{
  opacity:.35;
  background:
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,61,190,.35) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,61,190,.32) 39px 40px),
    repeating-linear-gradient(135deg,transparent 0 54px,rgba(255,147,220,.22) 55px 56px);
}

#hand-rank-effect-layer.hand-rank-quads{
  --hand-rank-color:255,91,47;
  --hand-rank-accent:255,170,73;
}

.hand-rank-quads .hand-rank-table-pattern{
  opacity:.42;
  background:
    repeating-linear-gradient(38deg,transparent 0 31px,rgba(255,99,50,.5) 32px 33px,rgba(255,188,94,.22) 34px,transparent 35px 66px),
    repeating-linear-gradient(-38deg,transparent 0 31px,rgba(255,123,50,.48) 32px 33px,rgba(255,196,105,.2) 34px,transparent 35px 66px);
  background-size:100% 100%;
}

.hand-rank-quads .hand-rank-streams{
  opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cg fill='none' stroke='%23ffad55' stroke-opacity='.8' stroke-width='1'%3E%3Cpath d='M20 60 45 35 70 60 45 85Z'/%3E%3Cpath d='m92 25 17-17 17 17-17 17Z'/%3E%3Cpath d='m115 86 22-22 22 22-22 22Z'/%3E%3Cpath d='M0 18h35l10 10M180 51h-32l-11 11M70 120V89l10-10'/%3E%3C/g%3E%3C/svg%3E");
  background-size:180px 120px;
  -webkit-mask-image:radial-gradient(ellipse 43% 58% at center,#000 0 50%,rgba(0,0,0,.76) 66%,rgba(0,0,0,.36) 81%,transparent 100%);
  mask-image:radial-gradient(ellipse 43% 58% at center,#000 0 50%,rgba(0,0,0,.76) 66%,rgba(0,0,0,.36) 81%,transparent 100%);
}

#hand-rank-effect-layer.hand-rank-straight-flush{
  --hand-rank-color:73,214,255;
  --hand-rank-accent:255,112,225;
}

.hand-rank-straight-flush .hand-rank-table-pattern{
  opacity:.38;
  background:
    radial-gradient(ellipse at center,rgba(var(--hand-rank-color),.22),transparent 58%),
    conic-gradient(from 0deg at center,rgba(255,82,134,.16),rgba(255,218,79,.2),rgba(54,240,156,.18),rgba(61,167,255,.18),rgba(202,80,255,.18),rgba(255,82,134,.16));
}

#hand-rank-effect-layer.hand-rank-royal-flush{
  --hand-rank-color:255,218,79;
  --hand-rank-accent:255,250,202;
}

.hand-rank-royal-flush .hand-rank-table-pattern{
  opacity:.42;
  background:
    radial-gradient(ellipse at center,rgba(255,220,75,.25),transparent 51%),
    conic-gradient(from 0deg at center,rgba(255,70,114,.2),rgba(255,213,59,.24),rgba(50,235,157,.2),rgba(55,174,255,.2),rgba(204,77,255,.22),rgba(255,70,114,.2));
}

.hand-rank-royal-flush .hand-rank-particles{
  opacity:.9;
}

#hand-rank-effect-layer.hand-rank-entering::before{
  animation:handRankEdgeArrival 680ms ease-out both;
}

.hand-rank-entering .hand-rank-pulse{
  animation:handRankPulseArrival 620ms ease-out both;
}

.hand-rank-entering .hand-rank-table-pattern{
  animation:handRankPatternArrival 640ms ease-out both;
}

.hand-rank-entering .hand-rank-label{
  animation:handRankLabelArrival 480ms 160ms cubic-bezier(.2,.8,.25,1) both;
}

.hand-rank-entering.hand-rank-royal-flush .hand-rank-crown{
  animation:handRankCrownArrival 620ms 180ms ease-out both;
}

@keyframes handRankEdgeArrival{
  0%{opacity:0;filter:brightness(1);}
  38%{opacity:1;filter:brightness(1.75);}
  100%{opacity:.42;filter:brightness(1);}
}

@keyframes handRankPulseArrival{
  0%{opacity:0;transform:scale(.28);}
  55%{opacity:.66;}
  100%{opacity:.1;transform:scale(1.55);}
}

@keyframes handRankPatternArrival{
  0%{opacity:0;transform:scale(.72);}
  55%{opacity:.42;}
  100%{transform:scale(1);}
}

@keyframes handRankLabelArrival{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.88);}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
}

@keyframes handRankCrownArrival{
  0%{opacity:0;transform:translateX(-50%) translateY(.4em) scale(.5);}
  55%{opacity:1;transform:translateX(-50%) translateY(-.08em) scale(1.12);}
  100%{opacity:.9;transform:translateX(-50%) scale(1);}
}

@keyframes handRankSteadyFlow{
  from{background-position:0 0;}
  to{background-position:54% 0;}
}

@keyframes handRankPetalFall{
  0%{transform:translate3d(-12px,-24px,0) rotate(var(--petal-rotate)) scale(var(--petal-scale));opacity:0;}
  12%{opacity:.82;}
  42%{transform:translate3d(var(--petal-drift),22px,0) rotate(calc(var(--petal-rotate) + 115deg)) scale(var(--petal-scale));}
  72%{transform:translate3d(-18px,58px,0) rotate(calc(var(--petal-rotate) + 225deg)) scale(var(--petal-scale));opacity:.74;}
  100%{transform:translate3d(14px,102px,0) rotate(calc(var(--petal-rotate) + 355deg)) scale(var(--petal-scale));opacity:0;}
}

body.ponder-table-transitioning #hand-rank-effect-layer,
body.ponder-table-intro-active #hand-rank-effect-layer,
body.ponder-table-ui-locked #hand-rank-effect-layer,
body.ranked-pre-transition-freeze #hand-rank-effect-layer,
body.ranked-pre-table-hidden #hand-rank-effect-layer{
  display:none !important;
}

html.low-power-mode #hand-rank-effect-layer *,
html.low-power #hand-rank-effect-layer *,
body.low-power-mode #hand-rank-effect-layer *,
body.low-power #hand-rank-effect-layer *{
  animation:none !important;
}

html.low-power-mode .hand-rank-particles,
html.low-power .hand-rank-particles,
body.low-power-mode .hand-rank-particles,
body.low-power .hand-rank-particles{
  display:none !important;
}

@media (max-width:900px),(max-height:520px),(pointer:coarse){
  .hand-rank-label{
    left:26.5%;
    top:84%;
    min-width:clamp(96px,13vw,132px);
    min-height:clamp(20px,4vh,30px);
    padding:.1em .72em;
    font-size:clamp(10px,1.42vw,15px);
    letter-spacing:.13em;
  }
  .hand-rank-suit-mark{
    font-size:calc(clamp(13px,2.45vw,24px) * var(--mark-size));
  }
}

@media (prefers-reduced-motion:reduce){
  #stage::before,
  #stage::after{
    transition:none !important;
  }
  #hand-rank-effect-layer,
  #hand-rank-effect-layer *{
    animation:none !important;
    transition:none !important;
  }
  #hand-rank-effect-layer.hand-rank-active{
    transition:opacity 100ms linear !important;
  }
  .hand-rank-pulse,
  .hand-rank-particles{
    display:none !important;
  }
}

/*
 * Label-only production mode.
 * The role-specific table visuals above are intentionally retained for a
 * possible future return. Remove hand-rank-label-only from the layer and set
 * VISUAL_EFFECTS_ENABLED in hand-rank-effect.js to restore the full system.
 */
#stage:has(#hand-rank-effect-layer.hand-rank-label-only)::before{
  filter:none !important;
  transition:none !important;
}

#stage:has(#hand-rank-effect-layer.hand-rank-label-only)::after{
  background:radial-gradient(ellipse at center,rgba(8,13,23,0),rgba(0,0,0,.10) 68%) !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  transition:none !important;
}

#hand-rank-effect-layer.hand-rank-label-only,
#hand-rank-effect-layer.hand-rank-label-only.hand-rank-active{
  background:transparent !important;
  transition:none !important;
}

#hand-rank-effect-layer.hand-rank-label-only::before,
#hand-rank-effect-layer.hand-rank-label-only::after,
.hand-rank-label-only .hand-rank-table-pattern,
.hand-rank-label-only .hand-rank-pulse,
.hand-rank-label-only .hand-rank-streams,
.hand-rank-label-only .hand-rank-suit-field,
.hand-rank-label-only .hand-rank-particles,
.hand-rank-label-only .hand-rank-label-suit,
.hand-rank-label-only .hand-rank-crown{
  display:none !important;
}

.hand-rank-label-only .hand-rank-label{
  left:auto;
  right:66.2%;
  top:81.5%;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(223,248,255,.64);
  text-shadow:0 0 .3em rgba(85,224,255,.22);
  transform:translateY(-50%);
  animation:none !important;
  transition:none !important;
}

.hand-rank-label-only .hand-rank-label::before,
.hand-rank-label-only .hand-rank-label::after{
  display:none !important;
}

.hand-rank-label-only .hand-rank-label-text{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}

.hand-rank-label-only .hand-rank-label-char{
  display:inline-block;
  opacity:1;
  transform:translateX(0);
}

.hand-rank-label-only.hand-rank-label-revealing .hand-rank-label-char{
  animation:handRankLabelCharReveal 320ms ease-out both;
  animation-delay:calc(var(--hand-rank-char-index) * 52ms);
}

@keyframes handRankLabelCharReveal{
  0%{opacity:0;transform:translateX(-.72em);}
  62%{opacity:.76;}
  100%{opacity:1;transform:translateX(0);}
}
