/* The Dhaba Card Table: a warm dhaba at night. String lights, one hanging bulb, a wooden table with a green
   cloth, chai cups, and the cards lying on a tilted 3D table top. Same ink, paper and teal family as MK's Lahore. */
:root{--paper:#F4EBDD;--card:#FBF6EC;--ink:#1E1A2B;--teal:#2BB3A3;--teal-d:#1D7F74;--brick:#B23A2E;--gold:#E9B949;
  --wall:#2A1C15;--wall-d:#140D0A;--cloth:#1E6A57;--cloth-d:#0F3F33;--wood:#7A4A2A;--wood-d:#3E2414;
  --cw:clamp(56px,7.6vw,96px);--tcw:calc(var(--pw,900px)*.074);--zoom:1;--tilt:34deg}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--wall-d);color:var(--paper);font-family:'DM Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.ct{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);overflow:hidden;position:relative}
.bar,.table,.me{min-width:0}

/* ---------- top bar: a strip of newsprint */
.bar{display:flex;align-items:center;gap:10px;padding:7px max(12px,env(safe-area-inset-left));background:var(--paper);color:var(--ink);border-bottom:3px double var(--ink);min-height:50px;z-index:4;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.bar .back{width:34px;height:34px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;text-decoration:none;font-weight:700;flex:none}
.bar h1{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(1.1rem,2.4vw,1.55rem);line-height:1;flex:none}
.info{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;min-width:0}
.info::-webkit-scrollbar{display:none}
.info span{display:flex;flex-direction:column;padding:3px 9px;border:1px solid rgba(30,26,43,.3);border-radius:6px;white-space:nowrap;line-height:1.15;background:rgba(255,255,255,.4)}
.info small{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.info b{font-size:.84rem}
.tools{display:flex;gap:6px;flex:none}
.tools button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card);font-weight:700;line-height:1;display:grid;place-items:center}

/* ---------- the room */
.table{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 80% 70% at 50% 30%,#4A3022 0%,var(--wall) 45%,var(--wall-d) 100%)}
.room{position:absolute;inset:0;pointer-events:none;z-index:0}
.room::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 90px),linear-gradient(transparent 62%,rgba(0,0,0,.35));opacity:.8}
.lights{position:absolute;left:-2%;right:-2%;top:14px;height:40px;display:flex;justify-content:space-between;padding:0 3%}
.lights::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;border-bottom:1.5px solid rgba(0,0,0,.6);border-radius:0 0 50% 50%/0 0 100% 100%}
.lights i{position:relative;top:calc(10px + sin(var(--i) * 0.35rad) * 14px);width:9px;height:12px;border-radius:50% 50% 45% 45%;background:hsl(calc(var(--i) * 47) 85% 62%);box-shadow:0 0 14px 4px hsl(calc(var(--i) * 47) 90% 60% / .55);animation:twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
@keyframes twinkle{50%{opacity:.55;box-shadow:0 0 6px 1px hsl(calc(var(--i) * 47) 90% 60% / .3)}}
.bulb{position:absolute;left:50%;top:0;width:2px;height:9%;background:#0b0705;transform:translateX(-50%)}
.bulb i{position:absolute;left:50%;bottom:-14px;width:22px;height:26px;margin-left:-11px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 40%,#fff8dc,#ffd36b 55%,#c98a1c);box-shadow:0 0 30px 12px rgba(255,200,90,.45),0 0 140px 60px rgba(255,190,80,.18);animation:flicker 6s infinite}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.82}49%{opacity:1}72%{opacity:.93}}

/* ---------- the 3D table */
.stage{position:absolute;inset:0;perspective:1150px;perspective-origin:50% 8%;z-index:1;touch-action:none}
.plane{position:absolute;left:50%;top:57%;width:min(84vw,980px,calc((100dvh - 250px) * 1.75));aspect-ratio:16/9.4;transform:translate(-50%,-50%) rotateX(var(--tilt)) scale(var(--zoom));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.wood{position:absolute;inset:0;border-radius:46%/52%;background:radial-gradient(ellipse at 50% 30%,#9B6638,var(--wood) 55%,var(--wood-d));box-shadow:0 34px 40px -10px rgba(0,0,0,.75),0 0 0 3px #2A170C,inset 0 2px 0 rgba(255,220,170,.25);padding:3.2%}
.wood::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(100deg,rgba(0,0,0,.08) 0 3px,transparent 3px 22px);mix-blend-mode:multiply;pointer-events:none}
.cloth{position:relative;width:100%;height:100%;border-radius:46%/52%;background:radial-gradient(ellipse 70% 65% at 50% 42%,#2B8A71,var(--cloth) 50%,var(--cloth-d));box-shadow:inset 0 0 0 2px rgba(233,185,73,.35),inset 0 8px 30px rgba(0,0,0,.45);overflow:hidden}
.cloth::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.4px);background-size:5px 5px;opacity:.6}
.cloth::after{content:"";position:absolute;inset:7%;border-radius:46%/52%;border:1.5px dashed rgba(244,235,221,.16)}
.shine{position:absolute;inset:0;border-radius:46%/52%;pointer-events:none;background:radial-gradient(ellipse 45% 40% at 50% 34%,rgba(255,214,140,.22),transparent 70%);mix-blend-mode:screen}
/* props */
.props span{position:absolute;transform:translate(-50%,-50%)}
.cup{width:calc(var(--pw,900px)*.05);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#B57946 0 48%,#8E5A33 50%,#F4F1EA 53% 66%,#D8D2C6 68%);box-shadow:0 6px 8px rgba(0,0,0,.45)}
.cup::after{content:"";position:absolute;right:-22%;top:36%;width:28%;height:28%;border:3px solid #E7E1D5;border-left:0;border-radius:0 50% 50% 0}
.cup.c1{left:10%;top:70%}
.cup.c2{left:89%;top:30%;transform:translate(-50%,-50%) scale(.9)}
.glass{width:calc(var(--pw,900px)*.034);aspect-ratio:1;border-radius:50%;left:14%;top:28%;background:radial-gradient(circle,rgba(220,240,255,.35) 0 55%,rgba(255,255,255,.65) 60%,rgba(200,220,240,.25) 70%);box-shadow:0 4px 6px rgba(0,0,0,.35)}

/* ---------- cards */
.card{--w:var(--cw);width:var(--w);aspect-ratio:5/7;border-radius:calc(var(--w)*.085);background:linear-gradient(160deg,#FFFDF7,var(--card) 50%,#EFE6D5);color:var(--ink);border:1px solid rgba(30,26,43,.45);position:relative;user-select:none;flex:none;font-family:'Antonio','DM Sans',sans-serif;box-shadow:0 1px 0 #d8cfbd,0 2px 0 #c9bfac,0 3px 6px rgba(0,0,0,.35)}
.card.red{color:var(--brick)}
.card .ix{position:absolute;top:5%;left:7%;display:flex;flex-direction:column;align-items:center;line-height:.95}
.card .ix b{font-size:calc(var(--w)*.27);font-weight:700}
.card .ix i{font-style:normal;font-size:calc(var(--w)*.22);font-family:'DM Sans',sans-serif}
.card .ix.bt{top:auto;left:auto;bottom:5%;right:7%;transform:rotate(180deg)}
.card .pip{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--w)*.5);font-family:'DM Sans',sans-serif}
.card .pip em{font-style:normal;font-family:'Playfair Display',serif;font-weight:900;font-size:calc(var(--w)*.44);border:1.5px solid currentColor;border-radius:4px;padding:0 .12em;line-height:1.05;background:rgba(233,185,73,.12)}
.card.back{background:#7E2C25;background-image:radial-gradient(circle at 50% 50%,rgba(233,185,73,.55) 0 9%,transparent 10%),repeating-linear-gradient(45deg,rgba(244,235,221,.18) 0 2px,transparent 2px 7px),repeating-linear-gradient(-45deg,rgba(244,235,221,.18) 0 2px,transparent 2px 7px);border:3px solid var(--card);box-shadow:0 1px 0 #6a241e,0 2px 0 #5a1e19,0 3px 6px rgba(0,0,0,.35)}
/* cards lying on the table */
.tc{--w:var(--tcw);position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));transform-style:preserve-3d;box-shadow:0 1px 0 #d8cfbd,0 2px 0 #c9bfac,2px 5px 8px rgba(0,0,0,.45)}
.tc[style*="--depth"]{box-shadow:0 1px 0 #ccc2ae,0 2px 0 #c2b8a4,0 3px 0 #b8ae9a,0 calc(var(--depth) * 1px) 0 #a89e8a,2px calc(var(--depth) * 1px + 5px) 10px rgba(0,0,0,.5)}
.tc.back[style*="--depth"]{box-shadow:0 1px 0 #6a241e,0 2px 0 #5a1e19,0 calc(var(--depth) * 1px) 0 #4a1813,2px calc(var(--depth) * 1px + 5px) 10px rgba(0,0,0,.5)}
.tc.win{box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(233,185,73,.8),2px 5px 8px rgba(0,0,0,.45);z-index:3}
.tc[data-mark]::after{content:attr(data-mark);position:absolute;top:-12px;right:-14px;background:var(--brick);color:#fff;font:700 calc(var(--w)*.15)/1 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;border-radius:4px;transform:rotate(10deg);box-shadow:0 2px 4px rgba(0,0,0,.4)}

/* ---------- seats round the table */
.spots{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.spot{position:absolute;width:0;height:0;transform-style:preserve-3d}
.spot .bb{position:absolute;left:0;bottom:0;transform:translateX(-50%) rotateX(calc(var(--tilt) * -1)) scale(calc(1 / var(--zoom) * .55 + .45));transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.av{position:relative;width:clamp(48px,6vw,74px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px var(--paper),0 8px 18px rgba(0,0,0,.55);transition:transform .3s}
.av .face{width:100%;height:100%;display:block;border-radius:50%}
.ring{position:absolute;inset:-7px;border-radius:50%;border:3px solid transparent}
.spot.on .ring{border-color:var(--gold);box-shadow:0 0 18px rgba(233,185,73,.8);animation:ring 1.4s ease-in-out infinite}
@keyframes ring{50%{transform:scale(1.07);opacity:.7}}
.spot.mate .av{box-shadow:0 0 0 3px var(--teal),0 8px 18px rgba(0,0,0,.55)}
.spot.foe .av{box-shadow:0 0 0 3px #D9665A,0 8px 18px rgba(0,0,0,.55)}
.dots{position:absolute;right:-8px;top:-4px;display:flex;gap:3px;background:var(--paper);padding:5px 6px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.dots b{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:dot 1s infinite}
.dots b:nth-child(2){animation-delay:.15s}.dots b:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-3px);opacity:.4}}
.plate{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;padding:3px 9px;text-align:center;line-height:1.15;box-shadow:2px 3px 0 rgba(0,0,0,.4);white-space:nowrap}
.plate b{display:block;font-size:.82rem}
.plate span{font-size:.68rem;opacity:.75}
.plate em{display:block;font-style:normal;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-d)}
.plate small{display:none}
.spot.out{opacity:.45;filter:grayscale(.7)}
/* faces come alive */
.face .eyes{animation:blink 5s infinite;transform-origin:50% 44%}
.spot:nth-child(3n) .face .eyes{animation-delay:-1.7s}.spot:nth-child(3n+1) .face .eyes{animation-delay:-3.1s}
@keyframes blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.1)}}
.talk .face .mouth{animation:talk .22s ease-in-out infinite alternate;transform-origin:50% 61%}
@keyframes talk{to{transform:scaleY(3.2)}}
.m-gloat .av,.myav.m-gloat{animation:hop .5s ease 2}
.m-sad .av,.myav.m-sad{animation:droop 1s ease}
.m-angry .av,.myav.m-angry{animation:shake .35s ease 2}
@keyframes hop{50%{transform:translateY(-10px) rotate(-6deg)}}
@keyframes droop{40%{transform:translateY(6px) rotate(4deg) scale(.95)}}
@keyframes shake{25%{transform:translateX(-5px) rotate(-4deg)}75%{transform:translateX(5px) rotate(4deg)}}

/* their cards on the table */
.tfan{position:absolute;width:0;height:0;transform:rotate(var(--a))}
.tfan i{position:absolute;left:calc(var(--tcw)*-.35);top:calc(var(--tcw)*-.5);width:calc(var(--tcw)*.7);aspect-ratio:5/7;border-radius:4px;background:#7E2C25;border:2px solid var(--card);background-image:repeating-linear-gradient(45deg,rgba(244,235,221,.2) 0 2px,transparent 2px 6px);transform-origin:50% 140%;transform:rotate(calc(var(--j) * 8deg));box-shadow:0 2px 4px rgba(0,0,0,.4)}
.tpile{position:absolute;width:0;height:0}
.tpile .tc{--w:calc(var(--tcw)*.8);left:0;top:0}
.tpile span{position:absolute;left:0;top:calc(var(--tcw)*.62);transform:translateX(-50%);font-size:.7rem;font-weight:700;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:999px;white-space:nowrap}

/* ---------- middle of the table */
.centerlayer{position:absolute;inset:0;transform-style:preserve-3d}
.midpile{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.midpile .tc{position:relative;left:auto;top:auto;transform:none;--w:calc(var(--tcw)*.8)}
.midpile span,.pcount,.tnote{font-size:.72rem;font-weight:700;background:rgba(0,0,0,.4);padding:3px 8px;border-radius:999px;white-space:nowrap}
.pcount,.tnote{position:absolute;transform:translate(-50%,-50%)}
.tnote{font-style:italic;font-weight:500;opacity:.8;background:none}
.trumpmark{position:absolute;transform:translate(-50%,-50%);font-size:calc(var(--pw,900px)*.07);line-height:1;color:rgba(244,235,221,.35);display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.trumpmark.red{color:rgba(242,140,128,.5)}
.trumpmark small{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em}
.trumpmark.faint{opacity:.35}
.claimchip{position:absolute;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:6px 12px;display:flex;flex-direction:column;box-shadow:3px 4px 0 rgba(0,0,0,.45)}
.claimchip small{text-transform:uppercase;font-size:.6rem;letter-spacing:.12em;opacity:.7}
.claimchip b{font-family:'Playfair Display',serif;font-size:1.4rem;line-height:1}
.claimchip span{font-size:.72rem}

/* ---------- overlays on the table */
.fx,.bubbles{position:absolute;inset:0;pointer-events:none;z-index:6}
.bubble{position:absolute;transform:translate(-50%,-100%);background:var(--card);color:var(--ink);font-weight:700;font-size:.84rem;padding:7px 12px;border-radius:14px;border:1.5px solid var(--ink);box-shadow:2px 3px 0 rgba(0,0,0,.45);max-width:240px;text-align:center;animation:bub 2.4s ease forwards}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--card);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.bubble.chat{font-weight:500;font-style:italic;font-family:'Playfair Display',serif}
.bubble.loud{background:var(--gold);font-size:1rem}.bubble.loud::after{background:var(--gold)}
.bubble.soft{opacity:.85;font-weight:500}
@keyframes bub{0%{opacity:0;transform:translate(-50%,-80%) scale(.7)}10%{opacity:1;transform:translate(-50%,-100%) scale(1.05)}16%{transform:translate(-50%,-100%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-125%)}}
.floater{position:absolute;font-size:2.4rem;transform:translate(-50%,-50%);animation:float 2.2s ease-out forwards;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.floater.phrase{font-size:.95rem;font-weight:700;background:var(--teal);color:var(--ink);padding:6px 12px;border-radius:999px;white-space:nowrap}
@keyframes float{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-80%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.reveal{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:12px 16px;text-align:center;box-shadow:6px 6px 0 rgba(0,0,0,.45);animation:pop .35s cubic-bezier(.3,1.6,.5,1);z-index:7}
.reveal b{font-family:'Playfair Display',serif;font-size:1.3rem}
.reveal.liar b{color:var(--brick)}.reveal.truth b{color:var(--teal-d)}
.reveal .rv{display:flex;gap:6px;justify-content:center;margin-top:8px}
.reveal .card{--w:clamp(44px,6vw,64px)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}
.conf{position:absolute;bottom:30%;width:9px;height:14px;border-radius:2px}
.log{position:absolute;left:12px;bottom:10px;margin:0;padding:0;list-style:none;font-size:.74rem;line-height:1.35;max-width:min(46%,360px);pointer-events:none;z-index:5;text-shadow:0 1px 2px #000}
.log li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log b{color:var(--gold)}
.cam{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:5}
.cam button{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(244,235,221,.6);background:rgba(20,13,10,.6);color:var(--paper);font-weight:700;font-size:1.1rem;backdrop-filter:blur(4px)}
.timer{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(20,13,10,.75);border:1.5px solid rgba(244,235,221,.4);padding:5px 12px;border-radius:999px;font-weight:700;font-size:.82rem;z-index:5}
.timer.low{background:var(--brick);border-color:var(--brick);animation:ring .8s infinite}
.reactbar{position:absolute;right:56px;bottom:10px;z-index:7}
.rtoggle{width:44px;height:44px;border-radius:50%;border:2px solid var(--paper);background:rgba(20,13,10,.7);font-size:1.3rem;backdrop-filter:blur(4px)}
.rpanel{position:absolute;right:0;bottom:52px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:8px;width:min(300px,80vw);box-shadow:5px 5px 0 rgba(0,0,0,.45)}
.remo{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.remo button{font-size:1.5rem;border:0;background:none;border-radius:8px;padding:4px}
.remo button:hover{background:rgba(43,179,163,.2)}
.rphr{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;border-top:1px solid rgba(30,26,43,.2);padding-top:6px}
.rphr button{border:1.5px solid var(--ink);background:var(--card);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:700}

/* ---------- my side */
.me{background:linear-gradient(#20150F,#120C09);padding:6px max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));border-top:1px solid rgba(244,235,221,.12);z-index:3;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.meline{display:flex;align-items:center;gap:10px;min-height:40px}
.mine{display:flex;align-items:center;gap:8px;flex:none;font-size:.72rem;line-height:1.25}
.myav{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--paper);flex:none}
.myav .face{width:100%;height:100%;display:block;border-radius:50%}
.myav.on{box-shadow:0 0 0 3px var(--gold),0 0 16px rgba(233,185,73,.7)}
.mybits b{color:var(--gold)}
.status{margin:0;font-size:.92rem;font-weight:500;flex:1}
.ct.myturn .status{color:var(--gold);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.actions:empty{margin:0}
.act{border:1.5px solid var(--paper);background:transparent;color:var(--paper);padding:8px 15px;border-radius:999px;font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:transform .12s}
.act:active{transform:scale(.96)}
.act.hot{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 3px 0 #9c7a26}
.act.on{background:var(--teal);color:var(--ink);border-color:var(--teal)}
.act.suit{background:var(--card);color:var(--ink);border-color:var(--card);font-size:1rem;box-shadow:0 3px 0 #b8ae9a}
.act.suit.red{color:var(--brick)}
.act:disabled{opacity:.4;cursor:not-allowed}
.act.ghost{border-color:transparent;text-decoration:underline}
.selnote{font-size:.8rem;opacity:.8}
.ranks{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.rlabel{font-size:.82rem;margin-right:4px}
.rk{width:40px;height:40px;border-radius:8px;border:1.5px solid var(--card);background:var(--card);color:var(--ink);font-family:'Antonio',sans-serif;font-weight:700;font-size:1.05rem}
.rk.ghost{background:transparent;color:var(--paper)}

/* my hand: a fan, like holding real cards */
.hand{position:relative;height:calc(var(--cw)*1.4 + 44px);perspective:900px}
.hand .card{bottom:24px!important}
.hand .card{position:absolute;left:50%;bottom:4px;transform:translateX(calc(-50% + var(--x))) translateY(var(--lift)) rotate(var(--rot));transform-origin:50% 120%;transition:transform .22s cubic-bezier(.3,1.4,.5,1),filter .2s,box-shadow .2s;cursor:default;box-shadow:-2px 2px 6px rgba(0,0,0,.4)}
.hand .card.ok{cursor:pointer}
.hand .card.ok:hover,.hand .card.ok:focus-visible{transform:translateX(calc(-50% + var(--x))) translateY(calc(var(--lift) - 16px)) rotate(var(--rot)) scale(1.04);z-index:50!important}
.hand .card.sel{transform:translateX(calc(-50% + var(--x))) translateY(calc(var(--lift) - 26px)) rotate(var(--rot)) scale(1.06);box-shadow:0 0 0 3px var(--gold),0 12px 22px rgba(0,0,0,.5);z-index:51!important}
.hand .card.dim{filter:brightness(.55) saturate(.6)}
.hand .card[data-hint]::before{content:attr(data-hint);position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--teal);color:var(--ink);font:700 .62rem/1 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;border-radius:3px;z-index:2;white-space:nowrap}
.hand .card[data-hint="Rob!"]::before{background:var(--brick);color:#fff}
.hand.stackmode{display:flex;justify-content:center;align-items:center}
.mystack{display:flex;align-items:center;gap:14px;background:none;border:0;color:var(--paper);padding:6px 14px;border-radius:14px}
.mystack .card{--w:calc(var(--cw)*.9)}
.mystack .stxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.mystack b{font-family:'Playfair Display',serif;font-size:2rem}
.mystack small{font-size:.8rem;opacity:.8}
.mystack.go{background:rgba(233,185,73,.12);box-shadow:0 0 0 2px var(--gold);animation:ring 1.3s ease-in-out infinite}
.mystack:disabled{cursor:default}

/* ---------- sheets */
.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(10,6,4,.6);padding:14px;backdrop-filter:blur(3px)}
.overlay[hidden]{display:none}
.sheet{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.45);border-radius:4px;max-width:540px;width:100%;max-height:calc(100dvh - 28px);overflow:auto;padding:clamp(18px,4vw,30px);background-image:radial-gradient(rgba(30,26,43,.04) 1px,transparent 1.3px);background-size:5px 5px;animation:sheet .3s cubic-bezier(.3,1.3,.5,1)}
@keyframes sheet{from{transform:translateY(16px) scale(.97);opacity:0}}
.sheet.small{max-width:420px}
.sheet.result.good{box-shadow:8px 8px 0 var(--teal)}
.sheet .kick{margin:0;font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}
.sheet h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.6rem,4.6vw,2.3rem);line-height:1.05;margin:6px 0 10px}
.sheet h2 small{font-size:.5em;font-weight:600;font-style:italic}
.sheet h3{margin:14px 0 4px;font-family:'Antonio',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.sheet p{margin:6px 0;line-height:1.45}
.sheet .lede{font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem}
.sheet .note{font-size:.84rem;opacity:.8}
.sheet fieldset{border:0;padding:0;margin:12px 0 4px}
.sheet legend{font-family:'Antonio',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;margin-bottom:6px}
.cast{display:flex;align-items:center;margin:4px 0 12px}
.castface{width:40px;height:40px;border-radius:50%;margin-right:-8px;box-shadow:0 0 0 2px var(--paper);overflow:hidden}
.castface .face{width:100%;height:100%;display:block}
.cast span:last-child{margin-left:16px;font-size:.84rem;font-style:italic;opacity:.75}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--ink);margin-top:6px}
.tabs button{border:2px solid var(--ink);border-bottom:0;background:transparent;padding:7px 12px;border-radius:8px 8px 0 0;font-weight:700;font-size:.86rem;margin-bottom:-2px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.tabbody{padding-top:4px}
.field{display:flex;flex-direction:column;gap:4px;margin:12px 0 4px}
.field span{font-family:'Antonio',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.86rem}
.field input{font:inherit;padding:10px 12px;border:1.5px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);font-size:1rem}
.join{display:flex;gap:8px;align-items:flex-end}
.join .field{flex:1;margin-bottom:0}
.opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1.5px solid rgba(30,26,43,.3);border-radius:6px;margin-bottom:6px;cursor:pointer}
.opt:has(input:checked){border-color:var(--ink);background:rgba(43,179,163,.14)}
.opt input{margin-top:3px;accent-color:var(--teal-d)}
.opt b{display:block}
.opt small{display:block;font-size:.82rem;opacity:.8;line-height:1.35}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill input{position:absolute;opacity:0}
.pill span{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--ink);border-radius:50%;font-weight:700;font-size:1.1rem;cursor:pointer}
.pill input:checked+span{background:var(--ink);color:var(--paper)}
.pill input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.sheet .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.sheet .act{border-color:var(--ink);color:var(--ink)}
.sheet .act.hot{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.code{font-family:'Antonio',sans-serif;letter-spacing:.14em;background:var(--ink);color:var(--gold);padding:0 .3em;border-radius:6px}
.seatlist{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.seatlist li{display:flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px 4px 4px;font-size:.86rem}
.seatlist li.open{border-style:dashed;opacity:.6}
.seatlist .sf{width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(30,26,43,.1)}
.seatlist .sf .face{width:100%;height:100%}
.share{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.share .act.hot{background:#25D366;border-color:#25D366;color:#0b2b17}
.tablerow{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--ink);background:var(--card);border-radius:8px;padding:8px 12px;margin-bottom:6px;text-align:left;color:var(--ink)}
.tablerow b{font-family:'Antonio',sans-serif;letter-spacing:.1em}
.tablerow span{flex:1;font-size:.84rem}
.tablerow em{font-style:normal;font-weight:700}
.lt{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.ltc{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8rem}
.ltc .card{--w:58px}
.ltc.win .card{box-shadow:0 0 0 3px var(--gold)}
.toast{position:absolute;left:50%;bottom:calc(var(--cw)*1.4 + 120px);transform:translateX(-50%);background:var(--ink);color:var(--paper);border:1.5px solid var(--paper);padding:8px 14px;border-radius:999px;font-weight:700;font-size:.86rem;z-index:30;max-width:90vw;text-align:center;animation:sheet .25s ease}
.toast[hidden]{display:none}

/* ---------- phones */
@media (max-width:640px){
  :root{--cw:clamp(52px,15vw,70px)}
  .bar{gap:6px;padding:6px 8px}
  .bar .back,.tools button{width:32px;height:32px}
  .info span{padding:2px 6px}
  .info b{font-size:.76rem}
  .plane{top:47%;width:94vw}
  .av{width:44px}
  .plate{padding:2px 6px}.plate b{font-size:.72rem}.plate span{font-size:.6rem}
  .status{font-size:.84rem}
  .act{padding:7px 12px;font-size:.84rem}
  .rk{width:34px;height:36px}
  .log{max-width:60%;font-size:.68rem}
  .lights{display:none}
}
@media (orientation:portrait) and (max-width:700px){
  .plane{aspect-ratio:1/1.12;width:min(94vw,calc(100dvh - 330px))}
  .wood,.cloth,.shine{border-radius:48%}
  .cloth::after{border-radius:48%}
  :root{--tcw:calc(var(--pw,360px)*.15)}
  .tc{--w:calc(var(--pw,360px)*.15)}
  .cup.c1{left:12%;top:80%}.cup.c2{left:86%;top:18%}.glass{left:16%;top:20%}
}
@media (max-height:520px) and (orientation:landscape){
  :root{--cw:clamp(44px,7vw,60px)}
  .bar{min-height:40px;padding:4px 10px}
  .plane{width:min(80vw,calc((100dvh - 150px) * 2.2))}
  .hand{height:calc(var(--cw)*1.4 + 18px)}
  .lights{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Ludo: the board lies on the dhaba table, pawns stand up, the die is a real cube */
.ct{--c-red:#D9483B;--c-green:#2E9D5B;--c-yellow:#E7B22C;--c-blue:#2F6FC4}
.plane{container-type:size}
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.centerlayer[data-kind="ludo"] .ludo{position:absolute;left:50%;top:50%;width:min(78cqw,80cqh);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--rot));transform-style:preserve-3d;container-type:size;background:#FBF6EC;border:3px solid var(--ink);border-radius:6px;box-shadow:0 0 0 6px #E7DCC5,0 0 0 8px rgba(0,0,0,.4),6px 14px 26px rgba(0,0,0,.55)}
.ludo .sq,.ludo .yard,.ludo .lhome{position:absolute;left:calc(var(--c) * 100cqw / 15);top:calc(var(--r) * 100cqh / 15);width:calc(100cqw / 15);height:calc(100cqh / 15)}
.ludo .sq{border:1px solid rgba(30,26,43,.35);display:grid;place-items:center;font-size:calc(100cqw / 15 * .55);color:rgba(30,26,43,.4);line-height:1}
.ludo .sq.start,.ludo .sq.hm{background:var(--col)}
.ludo .sq.hm{opacity:.85}
.ludo .yard{width:calc(600cqw / 15);height:calc(600cqh / 15);background:var(--col);border:2px solid var(--ink);display:grid;place-items:center}
.ludo .yard i{width:66%;height:66%;background:#FBF6EC;border-radius:10%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.ludo .yard.empty{filter:grayscale(.85) brightness(.95)}
.ludo .lhome{left:calc(600cqw / 15);top:calc(600cqh / 15);width:calc(300cqw / 15);height:calc(300cqh / 15);overflow:hidden;border:1.5px solid var(--ink)}
.ludo .lhome .tr{position:absolute;inset:0}
.ludo .lhome .r{background:var(--c-red);clip-path:polygon(0 0,50% 50%,0 100%)}
.ludo .lhome .g{background:var(--c-green);clip-path:polygon(0 0,100% 0,50% 50%)}
.ludo .lhome .y{background:var(--c-yellow);clip-path:polygon(100% 0,100% 100%,50% 50%)}
.ludo .lhome .b{background:var(--c-blue);clip-path:polygon(0 100%,50% 50%,100% 100%)}
.ludo .pawn{position:absolute;left:calc((var(--c) + .5) * 100cqw / 15);top:calc((var(--r) + .72) * 100cqh / 15);width:0;height:0;padding:0;border:0;background:none;transform-style:preserve-3d;transition:left .14s ease,top .14s ease;z-index:2;cursor:default}
.ludo .pawn .pb{position:absolute;left:calc(100cqw / 15 * -.46);bottom:0;width:calc(100cqw / 15 * .92);transform-origin:50% 100%;transform:rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1));pointer-events:none}
.ludo .pawn .pb svg{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.ludo .pawn.can{cursor:pointer;z-index:4}
.ludo .pawn.can .pb{pointer-events:auto}
.ludo .pawn.can .pb svg{animation:pawnbob .7s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 2px #fff)}
.ludo .pawn.hopping .pb svg{animation:hop .15s ease-in-out infinite alternate}
.ludo .pawn.knocked{transition:left .55s cubic-bezier(.5,-0.4,.5,1.4),top .55s cubic-bezier(.5,-0.4,.5,1.4)}
.ludo .pawn.done .pb{width:calc(100cqw / 15 * .6);left:calc(100cqw / 15 * -.3)}
@keyframes pawnbob{50%{transform:translateY(-14%)}}
@keyframes hop{to{transform:translateY(-35%)}}
.die3{position:absolute;left:50%;top:50%;width:calc(min(78cqw,80cqh) / 15 * 2.1);aspect-ratio:1;transform:translate(-50%,-50%) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05));transform-style:preserve-3d;border:0;background:none;padding:0;z-index:5;cursor:default}
.die3 .cube{position:absolute;inset:0;transform-style:preserve-3d}
.die3 .f{position:absolute;inset:0;background:linear-gradient(145deg,#fff,#efe7d6);border:1px solid rgba(0,0,0,.25);border-radius:16%;display:grid;grid-template-columns:repeat(3,1fr);padding:14%;gap:4%;box-shadow:inset 0 0 8px rgba(0,0,0,.15)}
.die3 .f i{border-radius:50%}
.die3 .f i.p{background:radial-gradient(circle at 35% 35%,#555,#111)}
.die3 .f1 i.p{background:radial-gradient(circle at 35% 35%,#e05a4f,#8d1c14)}
.die3 .f1{transform:translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}
.die3 .f6{transform:rotateY(180deg) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}
.die3 .f2{transform:rotateY(90deg) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}
.die3 .f5{transform:rotateY(-90deg) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}
.die3 .f3{transform:rotateX(90deg) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}
.die3 .f4{transform:rotateX(-90deg) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}
.die3.ready{cursor:pointer}
.die3.ready .f{box-shadow:inset 0 0 8px rgba(0,0,0,.15),0 0 14px var(--gold)}
.die3.rolling{animation:diejump .9s cubic-bezier(.3,.6,.4,1)}
@keyframes diejump{0%{transform:translate(-50%,-50%) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}40%{transform:translate(-50%,-50%) translateZ(calc(min(78cqw,80cqh) / 15 * 5))}100%{transform:translate(-50%,-50%) translateZ(calc(min(78cqw,80cqh) / 15 * 1.05))}}
.rollbtn{font:700 1.15rem 'Antonio','DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:14px 34px;border-radius:999px;border:2px solid var(--paper);background:transparent;color:var(--paper)}
.rollbtn.go{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 4px 0 #9c7a26;animation:ring 1.3s ease-in-out infinite}
.rollbtn:disabled{opacity:.6}
.opt.sw{align-items:center}

/* ---------- Carrom: a canvas board lying flat on the table */
.centerlayer[data-kind="carrom"] .carrom{position:absolute;left:50%;top:50%;width:min(80cqw,92cqh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.carrom canvas{width:100%;height:100%;display:block;touch-action:none;border-radius:12px;cursor:crosshair}
.ct.flat [data-a="tilt"]{display:none}

.ct[data-game="carrom"] .hand,.ct[data-game="snooker"] .hand{display:none}
.ct.flat .spots{z-index:3}
.ct.flat .plane{top:52%}

/* ---------- Shahi Shatranj: a WebGL scene behind the (empty, flat) table plane */
.ct[data-game="chess"] .wood,.ct[data-game="chess"] .props,.ct[data-game="chess"] .shine,.ct[data-game="chess"] .cam,.ct[data-game="chess"] .hand{display:none}
.ct[data-game="chess"] .plane{pointer-events:none}
.ct[data-game="chess"] .spots{z-index:3}
.chess3d{position:absolute;inset:0;z-index:0}
.chess3d canvas{width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
.promo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:12px 14px;box-shadow:6px 6px 0 rgba(0,0,0,.45);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:300px;z-index:8}
.promo p{width:100%;margin:0 0 4px;text-align:center;font-family:'Playfair Display',serif;font-weight:900}
.promo button{border:1.5px solid var(--ink);background:var(--card);border-radius:999px;padding:8px 14px;font-weight:700}
.ct[data-game="chess"] .plane{z-index:2}

/* ---------- Snooker */
.centerlayer[data-kind="snooker"] .snooker{position:absolute;left:50%;top:50%;width:min(96cqw,180cqh);aspect-ratio:2140/1140;transform:translate(-50%,-50%);border-radius:14px;box-shadow:0 20px 44px rgba(0,0,0,.65)}
.centerlayer[data-kind="snooker"] .snooker.tall{width:auto;height:min(96cqh,180cqw);aspect-ratio:1140/2140}
.snooker canvas{width:100%;height:100%;display:block;touch-action:none;border-radius:14px;cursor:crosshair}
.pbar{position:absolute;right:-46px;top:8%;bottom:8%;width:34px;border-radius:17px;background:rgba(20,13,10,.75);border:2px solid var(--paper);touch-action:none;cursor:ns-resize;overflow:hidden}
.snooker.tall .pbar{right:auto;left:calc(100% + 8px)}
.pbar span{position:absolute;top:6px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75;pointer-events:none}
.pbar i{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(var(--gold),var(--brick));pointer-events:none}
.pbar[hidden]{display:none}
@media (max-width:640px){.pbar{right:-38px;width:30px}}

/* =====================================================================================
   v3 look: the painted dhaba behind everything, a rustic wooden table, painted portraits,
   truck-art card backs, the HUD floating over the scene (like the reference screens)
   ===================================================================================== */
.ct{grid-template-rows:auto minmax(0,1fr) auto}
.ct .table{grid-row:1 / 4;grid-column:1;background:#140D0A url(art/dhaba-wide.webp) center 30% / cover no-repeat}
@media (orientation:portrait){.ct .table{background-image:url(art/dhaba-tall.webp);background-position:center 18%}}
.ct .bar{grid-row:1;grid-column:1;background:linear-gradient(rgba(12,7,4,.82),rgba(12,7,4,0));color:var(--paper);border:0;box-shadow:none;z-index:8}
.ct .me{grid-row:3;grid-column:1;background:linear-gradient(rgba(12,7,4,0),rgba(12,7,4,.78) 38%,rgba(12,7,4,.92));border:0;box-shadow:none;z-index:7}
.bar .back,.tools button{background:rgba(20,12,8,.6);color:var(--paper);border-color:rgba(244,235,221,.7);backdrop-filter:blur(4px)}
.info span{background:rgba(20,12,8,.55);border-color:rgba(244,235,221,.35);color:var(--paper);backdrop-filter:blur(4px)}
.room::before{background:radial-gradient(ellipse 85% 75% at 50% 55%,transparent 40%,rgba(8,4,2,.55)),linear-gradient(rgba(8,4,2,.25),transparent 30%)}
.lights,.bulb{display:none}
/* the table: weathered planks under lamp light */
.wood{border-radius:7%/11%;background:#5d3a1f;background-image:linear-gradient(rgba(255,214,150,.18),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 13.5%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),linear-gradient(100deg,#6e4524,#5a361b 40%,#7a4e2a 70%,#4f2f17);box-shadow:0 40px 50px -14px rgba(0,0,0,.8),0 0 0 4px #2c180b,inset 0 3px 0 rgba(255,220,170,.22),inset 0 -14px 24px rgba(0,0,0,.35);padding:0}
.wood::after{border-radius:inherit;background:repeating-radial-gradient(ellipse at 30% 40%,rgba(0,0,0,.06) 0 3px,transparent 3px 26px);opacity:.8}
.cloth{background:none;box-shadow:none;border-radius:inherit}
.cloth::before,.cloth::after{display:none}
.shine{border-radius:7%/11%;background:radial-gradient(ellipse 45% 40% at 50% 40%,rgba(255,206,130,.28),transparent 70%)}
.cup{background:radial-gradient(circle at 50% 50%,#C98D57 0 50%,rgba(255,255,255,.55) 53% 60%,rgba(220,235,245,.35) 62% 70%,transparent 72%);box-shadow:0 6px 8px rgba(0,0,0,.4)}
.cup::after{display:none}
.lamp{left:8%;top:22%;width:calc(var(--pw,900px)*.05);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#c99a3a 0 40%,#8a6420 42% 60%,transparent 62%);box-shadow:0 0 60px 26px rgba(255,180,80,.35)}
.lamp i{position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6c8,#ffb43c 60%,transparent 70%);animation:flame 1.8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes flame{50%{transform:scale(1.15,1.3) translateY(-6%)}}
/* painted portraits */
.av{box-shadow:0 0 0 3px #1D7F74,0 0 0 5px rgba(244,235,221,.85),0 10px 22px rgba(0,0,0,.6);background:#2a1a10;overflow:visible}
.av .pimg{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av .face.mouthonly{position:absolute;inset:0;opacity:0;pointer-events:none}
.spot.mate .av{box-shadow:0 0 0 3px var(--teal),0 0 0 5px rgba(244,235,221,.85),0 10px 22px rgba(0,0,0,.6)}
.spot.foe .av{box-shadow:0 0 0 3px #D9665A,0 0 0 5px rgba(244,235,221,.85),0 10px 22px rgba(0,0,0,.6)}
.talk .av .pimg{animation:nod .5s ease-in-out infinite alternate}
@keyframes nod{to{transform:translateY(-2px) rotate(-2deg) scale(1.03)}}
.plate{background:rgba(14,8,5,.78);color:var(--paper);border:1px solid rgba(244,235,221,.35);backdrop-filter:blur(4px)}
.plate em{color:var(--gold)}
.castface img{width:100%;height:100%;object-fit:cover;display:block}
/* truck-art card backs */
.card.back,.tfan i,.pilefan .card,.mystack .card.back{background:#7E2C25 url(art/cardback.webp) center / cover no-repeat}
.card.back{border:2px solid #f2e3c4}
/* "It's your turn" chip and the Hukum card */
.timer{top:62px;background:rgba(14,8,5,.82);border-color:var(--gold);color:var(--paper);font-size:.95rem;padding:7px 16px}
.ct.myturn .timer{animation:pulse 1.2s ease-in-out infinite}
.hukum{position:absolute;right:14px;top:70px;z-index:6;background:rgba(14,8,5,.78);border:1.5px solid var(--gold);border-radius:12px;padding:8px 10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--paper);backdrop-filter:blur(4px);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.hukum[hidden]{display:none}
.hukum small{font-family:'Playfair Display',serif;font-weight:900;font-size:.95rem;color:var(--gold)}
.hukum .card{--w:clamp(46px,5vw,64px)}
.hukum .card .pip{font-size:calc(var(--w)*.62)}
.hukum b{font-size:.72rem;opacity:.85}
@media (max-width:640px){.hukum{top:auto;bottom:calc(var(--cw)*1.4 + 90px);right:8px;padding:6px}.timer{top:56px}}
/* board skins picker */
.skins{display:flex;gap:12px;flex-wrap:wrap}
.skin{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.skin input{position:absolute;opacity:0}
.skin span{width:84px;height:84px;border-radius:10px;border:3px solid transparent;box-shadow:0 0 0 1.5px var(--ink)}
.skin input:checked+span{border-color:var(--gold)}
.skin input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.sw-marble{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 40%),repeating-linear-gradient(35deg,rgba(255,255,255,.12) 0 2px,transparent 2px 14px),linear-gradient(135deg,#2f7d55,#145234 60%,#0d3a24);box-shadow:inset 0 0 0 6px #5b3216,0 0 0 1.5px var(--ink)!important}
.sw-ply{background:radial-gradient(circle at 50% 50%,#f3ddb0,#d9b57a);box-shadow:inset 0 0 0 6px #6b3a1e,0 0 0 1.5px var(--ink)!important}
.cam,.reactbar{bottom:calc(var(--cw)*1.4 + 96px)}
.log{bottom:calc(var(--cw)*1.4 + 100px)}
.ct[data-game="carrom"] .cam,.ct[data-game="carrom"] .reactbar,.ct[data-game="snooker"] .cam,.ct[data-game="snooker"] .reactbar,.ct[data-game="chess"] .reactbar{bottom:70px}
.ct[data-game="carrom"] .log,.ct[data-game="snooker"] .log,.ct[data-game="chess"] .log{bottom:70px}

/* ---------- 3D board games share the chess treatment: the WebGL scene fills the table area */
.ct.gl .wood,.ct.gl .props,.ct.gl .shine{display:none}
.ct.gl .plane{pointer-events:none;z-index:2}
.ct.gl .spots{z-index:3}
.ct.gl .cam{display:flex}
.ct.gl [data-a="tilt"]{display:grid!important}
.gl3d{position:absolute;inset:0;z-index:0}
.gl3d canvas{width:100%;height:100%;display:block;touch-action:none}
.pbar.s3{right:14px;top:22%;bottom:auto;height:46%;z-index:9}
.ct[data-game="ludo"] .hand{height:auto;min-height:64px}