/* DuelPesa v3: 3D game UI */
:root{
  --bg:#140e38;--card:#2a1f6e;--card2:#35288a;--line:#5646b8;
  --gold:#ffd166;--gold2:#ffb830;--green:#9be22b;--green2:#5da80c;--red:#ff5d73;--blue:#4cc9f0;--violet:#9d5cff;
  --txt:#fff;--mut:#bdb5ee;
  --font:'Baloo 2',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;color:var(--txt);font-family:var(--font);font-weight:500}
body{min-height:100vh;background:radial-gradient(120% 70% at 50% -10%,#4a35b8 0%,#271b70 38%,#140e38 100%) fixed;overflow-x:hidden}
.hidden{display:none!important}
a{color:var(--green)}
.bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:drift 18s ease-in-out infinite alternate}
.bg i:nth-child(1){width:260px;height:260px;background:#7b3fe0;left:-80px;top:10%}
.bg i:nth-child(2){width:220px;height:220px;background:#1f8fc0;right:-70px;top:45%;animation-duration:22s}
.bg i:nth-child(3){width:240px;height:240px;background:#ff5d73;left:30%;bottom:-100px;animation-duration:26s;opacity:.2}
@keyframes drift{to{transform:translate(40px,-50px) scale(1.15)}}
#app,.screen,#toast{position:relative;z-index:1}
.noanim *,.noanim *::before,.noanim *::after{animation:none!important;transition:none!important}

.screen{padding:36px 20px;max-width:440px;margin:auto}
.brand{font-weight:800;font-size:26px;letter-spacing:.5px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.brand span{color:var(--gold)}
.brand.big{font-size:44px;text-align:center;margin-top:6px}
.sub{color:var(--mut);margin:2px 0 14px;line-height:1.25}
.center{text-align:center}
h2{margin:6px 0;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.3)}
h2.hi{font-size:30px;margin:2px 0}
h3{margin:0 0 12px;font-size:22px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.fine{font-size:12px;color:var(--mut);margin:8px 0 0}

/* ---------- cards + buttons ---------- */
.card{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),var(--card);border:2px solid rgba(255,209,102,.6);border-radius:26px;padding:16px;margin-bottom:16px;
  box-shadow:0 14px 28px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18)}
input{width:100%;padding:14px;margin-bottom:10px;border-radius:14px;border:2px solid var(--line);background:rgba(15,9,48,.65);color:#fff;font:600 16px var(--font);box-shadow:inset 0 3px 6px rgba(0,0,0,.35)}
input:focus{outline:none;border-color:var(--gold)}
input::placeholder{color:#8f86cf}
.btn{display:block;width:100%;padding:12px 16px;border:0;border-radius:18px;font:800 19px var(--font);color:#1b1446;cursor:pointer;margin-top:10px;
  background:linear-gradient(#b9f351,#86cf1a);box-shadow:0 6px 0 #4f9208,0 12px 18px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.6);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #4f9208,0 4px 8px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.4)}
.btn.gold{background:linear-gradient(#ffe38f,#ffb22e);box-shadow:0 6px 0 #a76a05,0 12px 18px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.65)}
.btn.gold:active{box-shadow:0 1px 0 #a76a05,0 4px 8px rgba(0,0,0,.35)}
.btn.ghost{background:linear-gradient(#41349d,#2e2278);color:#fff;box-shadow:0 5px 0 #170f48,0 10px 16px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.16)}
.btn.ghost:active{box-shadow:0 1px 0 #170f48}
.btn.small{padding:8px 18px;font-size:15px;width:auto;margin:14px auto 0}
.btn:disabled{filter:grayscale(.6) brightness(.8);cursor:default}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{flex:1;padding:10px;border-radius:14px;border:0;background:rgba(0,0,0,.25);color:var(--mut);font:800 16px var(--font)}
.tabs button.on{background:linear-gradient(#ffe38f,#ffb22e);color:#1b1446;box-shadow:0 4px 0 #a76a05}

/* ---------- header / nav ---------- */
header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;position:sticky;top:0;z-index:8;
  background:linear-gradient(rgba(39,27,112,.96),rgba(30,20,90,.94));border-bottom:3px solid rgba(255,209,102,.5);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.hr{display:flex;align-items:center;gap:8px}
.pill{background:rgba(10,6,36,.7);border:2px solid var(--line);color:#fff;border-radius:999px;padding:5px 8px 5px 6px;font:700 15px var(--font);display:flex;align-items:center;gap:6px;box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.pill .coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1a8,#ffb22e);color:#7a4a00;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #a76a05}
.pill b{color:var(--gold)}
.pill i{font-style:normal;background:linear-gradient(#b9f351,#86cf1a);color:#1b1446;border-radius:50%;width:22px;height:22px;line-height:22px;text-align:center;font-weight:900;box-shadow:0 2px 0 #4f9208}
.gear{background:linear-gradient(#41349d,#2e2278);border:0;border-radius:14px;width:40px;height:40px;font-size:18px;box-shadow:0 4px 0 #170f48,inset 0 2px 0 rgba(255,255,255,.16)}
main{padding:14px 16px 110px;max-width:480px;margin:auto}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;z-index:9;padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(rgba(30,20,90,.96),rgba(20,13,64,.98));border-top:3px solid rgba(255,209,102,.5);box-shadow:0 -8px 20px rgba(0,0,0,.4)}
nav button{flex:1;background:none;border:0;color:var(--mut);padding:8px 0 9px;font:700 12px var(--font);display:flex;flex-direction:column;align-items:center;gap:0}
nav button i{font-style:normal;font-size:24px;transition:transform .2s;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
nav button.on{color:var(--gold)}
nav button.on i{transform:translateY(-4px) scale(1.18)}

/* ---------- home ---------- */
.strip{display:flex;gap:10px;margin:0 0 14px}
.strip span{flex:1;background:rgba(10,6,36,.55);border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--mut);text-align:center}
.strip b{color:var(--gold)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 10px var(--green);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.35}}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mode{border:0;border-radius:20px;padding:12px 4px 10px;color:#fff;font:800 13px var(--font);display:flex;flex-direction:column;align-items:center;gap:4px;
  background:linear-gradient(#4a3bb0,#35288a);box-shadow:0 6px 0 #1d1456,0 12px 16px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.22);transition:transform .15s}
.mode i{font-style:normal;font-size:32px;filter:drop-shadow(0 5px 3px rgba(0,0,0,.45))}
.mode.on{background:linear-gradient(#bd7dff,#7b3fe0);box-shadow:0 6px 0 #4a1fa0,0 0 0 3px rgba(255,209,102,.8),0 14px 20px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.35);transform:translateY(-3px)}
.games{display:grid;grid-template-columns:repeat(var(--n,2),1fr) 46px;gap:10px}
.gcard{border:0;border-radius:20px;padding:12px 4px 9px;min-width:0;color:#fff;display:flex;flex-direction:column;gap:2px;align-items:center;font:800 14px/1.1 var(--font);text-align:center;
  background:linear-gradient(#4a3bb0,#35288a);box-shadow:0 7px 0 #1d1456,0 14px 18px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.22);transition:transform .15s}
.gcard .gi{font-size:28px;filter:drop-shadow(0 6px 3px rgba(0,0,0,.45))}
.gcard small{color:var(--mut);font-weight:600;font-size:12px}
.gcard.on{background:linear-gradient(#ffe38f,#ffb22e);color:#2a1a00;box-shadow:0 7px 0 #a76a05,0 14px 20px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.7);transform:translateY(-3px)}
.gcard.on small{color:#6b4600}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{flex:1 0 28%;position:relative;padding:12px 6px;border:0;border-radius:16px;color:#fff;font:800 19px var(--font);
  background:linear-gradient(#4a3bb0,#35288a);box-shadow:0 5px 0 #1d1456,inset 0 2px 0 rgba(255,255,255,.2);transition:transform .12s}
.chip.on{background:linear-gradient(#ffe38f,#ffb22e);color:#2a1a00;box-shadow:0 5px 0 #a76a05,0 0 0 3px rgba(255,255,255,.5);transform:translateY(-2px)}
.chip em{position:absolute;top:-8px;right:-4px;min-width:22px;height:22px;border-radius:11px;background:var(--green);color:#1b1446;font:800 12px/22px var(--font);font-style:normal;padding:0 5px;box-shadow:0 2px 0 #4f9208}
.custom{margin:14px 0 0}
.prize3d{display:block;border:0;width:fit-content;max-width:100%;font-family:var(--font);cursor:pointer;margin:14px auto 0;padding:10px 16px;border-radius:18px;text-align:center;color:#3b2400;font-weight:800;font-size:18px;
  background:linear-gradient(#ffe38f,#ffb22e);box-shadow:0 5px 0 #a76a05,0 10px 16px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.7)}
.sugs{display:flex;flex-direction:column;gap:10px}
.sug{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:18px;padding:10px 12px;color:#fff;font-family:var(--font);
  background:linear-gradient(#4a3bb0,#35288a);box-shadow:0 5px 0 #1d1456,inset 0 2px 0 rgba(255,255,255,.2)}
.sug:active{transform:translateY(4px);box-shadow:0 1px 0 #1d1456}
.sug .si{font-size:26px;filter:drop-shadow(0 4px 2px rgba(0,0,0,.4))}
.sug .st{flex:1;display:flex;flex-direction:column;line-height:1.15}
.sug .st b{font-size:17px}.sug .st small{color:var(--mut);font-size:13px}
.sug .go{background:linear-gradient(#b9f351,#86cf1a);color:#1b1446;border-radius:12px;padding:6px 12px;font-weight:800;box-shadow:0 3px 0 #4f9208}

/* ---------- 3D loader cube ---------- */
.loader3d{width:64px;height:64px;margin:12px auto;perspective:500px}
.loader3d.big{width:84px;height:84px;margin:6px auto 10px}
.loader3d .cube{animation:spin3d 3.2s linear infinite;transition:none}
@keyframes spin3d{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(340deg) rotateY(360deg)}}
.timer{font-size:34px;font-weight:800;margin:2px 0;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.35)}
.linkbox{display:flex;gap:8px;align-items:center}
.linkbox input{margin:0;flex:1;font-size:13px}
.linkbox .btn{width:auto;margin:0;padding:12px 16px}

/* ---------- dice (3D cube) ---------- */
.die{width:var(--d,54px);height:var(--d,54px);--h:calc(var(--d,54px) / 2);perspective:420px;display:inline-block;margin:0 10px}
.tilt{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-26deg) rotateY(-34deg)}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.8,.2,1)}
.f{position:absolute;inset:0;border-radius:20%;background:linear-gradient(145deg,#fff,#d9d4f7);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;box-shadow:inset 0 0 10px rgba(60,40,140,.35)}
.f1{transform:translateZ(var(--h))}
.f6{transform:rotateY(180deg) translateZ(var(--h))}
.f2{transform:rotateY(90deg) translateZ(var(--h))}
.f5{transform:rotateY(-90deg) translateZ(var(--h))}
.f3{transform:rotateX(90deg) translateZ(var(--h))}
.f4{transform:rotateX(-90deg) translateZ(var(--h))}
.pip{width:78%;height:78%;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6a59dd,#1b1446);box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.f1 .pip{background:radial-gradient(circle at 35% 30%,#ff9aa9,#d3263f)}
.die.q .pip{display:none}
.die.q .f1::after{content:'?';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 calc(var(--d,54px) * .6) var(--font);color:#5646b8}
.die.q .tilt{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:rotateX(-26deg) rotateY(-34deg) translateY(-8px)}}
.die.rolling .tilt{animation:none}
.loader3d .die{margin:0}

/* ---------- match arena ---------- */
.arena{display:grid;grid-template-columns:1fr 70px 1fr;gap:6px;align-items:center}
.plate{display:flex;align-items:center;gap:8px;padding:8px;border-radius:20px;min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),var(--card);border:2px solid var(--line);box-shadow:0 8px 16px rgba(0,0,0,.3);transition:box-shadow .25s,border-color .25s,transform .25s}
.plate.opp{flex-direction:row-reverse;text-align:right}
.plate.turn{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 0 0 3px rgba(255,209,102,.35),0 0 26px rgba(255,209,102,.55)}
.av{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ffa05c,#f0501c);box-shadow:0 3px 0 #8a2d0c,inset 0 2px 0 rgba(255,255,255,.4)}
.plate.opp .av{background:radial-gradient(circle at 35% 30%,#6fd7ff,#1f8fc0);box-shadow:0 3px 0 #0e5a80,inset 0 2px 0 rgba(255,255,255,.4)}
.nm{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.nm small{color:var(--mut);font-size:12px}
.nm em{font-style:normal;color:var(--gold)}
.ring{position:relative;width:64px;height:64px;margin:auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.ring circle{fill:rgba(15,9,48,.8);stroke-width:5}
.ring .trk{stroke:#3a2d92}
.ring .bar{fill:none;stroke:var(--green);stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:0;transition:stroke .2s}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.ring.low .bar{stroke:var(--red)}
.ring.low b{color:var(--red);animation:throb .5s infinite alternate}
@keyframes throb{to{transform:scale(1.25)}}
.status{text-align:center;font-size:21px;font-weight:800;margin:14px 0 4px;min-height:32px;text-shadow:0 3px 0 rgba(0,0,0,.3)}

/* ---------- 3D tic-tac-toe ---------- */
.tttWrap{perspective:850px;padding:6px 0 30px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(88vw,340px);margin:0 auto;padding:12px;border-radius:28px;
  background:linear-gradient(160deg,#6b57dd,#2e2180);transform:rotateX(30deg);transform-style:preserve-3d;
  box-shadow:0 16px 0 #1a1254,0 30px 36px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,255,255,.28)}
.cell{aspect-ratio:1;border:0;border-radius:18px;position:relative;padding:0;
  background:linear-gradient(#4636ad,#2c2079);box-shadow:inset 0 -6px 0 rgba(0,0,0,.28),inset 0 3px 0 rgba(255,255,255,.14);transition:background .2s,opacity .3s}
.cell.canplay{animation:glowcell 1.3s ease-in-out infinite}
@keyframes glowcell{50%{box-shadow:inset 0 -6px 0 rgba(0,0,0,.28),inset 0 0 0 3px rgba(155,226,43,.9),0 0 14px rgba(155,226,43,.55)}}
.piece{position:absolute;inset:16%;display:block;animation:drop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes drop{from{transform:translateY(-70px) scale(1.7);opacity:0}to{transform:none;opacity:1}}
.piece.X i{position:absolute;left:-8%;right:-8%;top:41%;height:18%;border-radius:12px;background:linear-gradient(#9ae8ff,#1f8fc0);box-shadow:0 6px 0 #0e5a80,0 10px 10px rgba(0,0,0,.4)}
.piece.X i:nth-child(1){transform:rotate(45deg)}
.piece.X i:nth-child(2){transform:rotate(-45deg)}
.piece.O{border-radius:50%;border:clamp(9px,3.4vw,14px) solid #ff5d73;box-shadow:0 7px 0 #a02338,0 11px 10px rgba(0,0,0,.4),inset 0 5px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.2)}
.cell.win{background:linear-gradient(#ffe38f,#ffb22e);animation:winpulse .7s ease-in-out infinite alternate}
@keyframes winpulse{to{box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 0 22px rgba(255,209,102,.9)}}
.cell.dim{opacity:.5}

/* ---------- 3D dice table ---------- */
.diceArea{padding-top:4px}
.seat{display:flex;align-items:center;gap:8px;padding:16px 10px 14px;border-radius:26px;
  background:radial-gradient(120% 140% at 50% 0%,#2f8f5b,#145a38);border:3px solid #0c3a24;box-shadow:inset 0 6px 14px rgba(0,0,0,.45),0 10px 18px rgba(0,0,0,.35)}
.seat>small{width:62px;color:#bdf3d4;font-weight:700;overflow:hidden;text-overflow:ellipsis;word-break:break-all;line-height:1.1}
.dpair{flex:1;display:flex;justify-content:center;align-items:center;min-height:90px}
.tot{width:46px;text-align:center;font-size:30px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4)}
.vsmark{text-align:center;font-weight:800;color:var(--gold);margin:6px 0;letter-spacing:3px}
#rollBtn{margin-top:14px;font-size:22px;padding:14px}

.moneybar{margin:16px auto 0;width:fit-content;max-width:100%;padding:8px 18px;border-radius:999px;background:rgba(10,6,36,.6);border:2px solid var(--line);font-size:15px;color:var(--mut);text-align:center}
.moneybar b{color:var(--gold)}
.moneybar.free{color:var(--green)}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;background:rgba(8,4,28,.82);display:flex;align-items:center;justify-content:center;z-index:40;padding:20px;backdrop-filter:blur(4px)}
.mbox{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)),var(--card);border:3px solid var(--gold);border-radius:30px;padding:26px 22px 20px;max-width:360px;width:100%;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.6);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6) rotateX(40deg);opacity:0}to{transform:none;opacity:1}}
.mbox>*{position:relative}
.rays{position:absolute!important;inset:-60%;background:repeating-conic-gradient(rgba(255,209,102,.16) 0 9deg,transparent 9deg 24deg);animation:spin 14s linear infinite;-webkit-mask:radial-gradient(circle,#000 8%,transparent 55%);mask:radial-gradient(circle,#000 8%,transparent 55%);display:none}
.mbox.win .rays{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.mico{font-size:72px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45));animation:float 2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.conf{position:fixed;top:-20px;width:10px;height:15px;z-index:60;border-radius:2px;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--rot))}}

/* ---------- chat ---------- */
.chatlist{background:rgba(10,6,36,.55);border:2px solid var(--line);border-radius:22px;padding:10px;height:calc(100vh - 380px);min-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 4px 10px rgba(0,0,0,.35)}
.msg{max-width:82%;background:linear-gradient(#41349d,#35288a);border-radius:18px 18px 18px 6px;padding:7px 12px;align-self:flex-start;word-break:break-word;box-shadow:0 3px 0 #1d1456}
.msg.mine{align-self:flex-end;background:linear-gradient(#8a5cf0,#6a3fd0);border-radius:18px 18px 6px 18px;box-shadow:0 3px 0 #3d1f8a}
.msg .who{font-size:12px;font-weight:800;color:var(--gold)}
.msg .who em{font-style:normal;background:var(--green);color:#1b1446;border-radius:6px;padding:0 5px;margin-left:4px;font-size:10px}
.msg .t{font-size:11px;color:var(--mut);margin-left:6px;font-weight:500}
.msg div{font-size:15px;margin-top:1px;line-height:1.2}
.chatform{display:flex;gap:8px;margin-top:12px}
.chatform input{margin:0;flex:1}
.chatform .btn{width:auto;margin:0;padding:12px 18px}

/* ---------- wallet / profile ---------- */
.big2{font-size:42px;font-weight:800;color:var(--gold);text-shadow:0 4px 0 rgba(0,0,0,.35)}
.list .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
.row .pos{color:var(--green);font-weight:800}.row .neg{color:var(--red);font-weight:800}.row small{color:var(--mut);display:block}
.phead{display:flex;gap:14px;align-items:center}
.phead h3{margin:0;font-size:26px}
.avatar{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffa05c,#f0501c);color:#fff;font-weight:800;font-size:32px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 5px 0 #8a2d0c,inset 0 3px 0 rgba(255,255,255,.4)}
.handle{color:var(--green);font-weight:800;font-size:14px}
.meta2{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;gap:10px}
.meta2 small,.detail small,.sgrid small{display:block;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.meta2 b{font-size:17px}.meta2 .g{color:var(--green)}
.split{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.split h3{margin:0}
.linkbtn{background:none;border:0;color:var(--green);font:800 15px var(--font)}
.detail{background:rgba(10,6,36,.45);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:10px}
.detail b{display:block;font-size:17px;margin-top:0;word-break:break-all}
.detail em{display:block;font-style:normal;color:var(--mut);font-size:12px}
#pForm{margin-top:12px}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sgrid div{background:linear-gradient(#41349d,#35288a);border-radius:16px;padding:10px;text-align:center;box-shadow:0 4px 0 #1d1456}
.sgrid b{font-size:22px;display:block}

/* ---------- settings ---------- */
.sheet{position:fixed;inset:0;background:rgba(8,4,28,.85);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:14px;overflow-y:auto}
.sbox{background:var(--bg);border:3px solid var(--gold);border-radius:28px;width:100%;max-width:460px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.shead{background:linear-gradient(#b02ad8,#8c1fb4);text-align:center;padding:16px 50px;position:relative;border-bottom:3px solid var(--gold)}
.shead h2{margin:0;color:#ffe48a;letter-spacing:1px}.shead p{margin:2px 0 0;font-size:13px}
.xbtn{position:absolute;right:12px;top:14px;width:38px;height:38px;border-radius:12px;border:2px solid #000;background:linear-gradient(#ff7f90,#e03a53);color:#fff;font-weight:900;box-shadow:0 3px 0 #8a1f30}
.sbody{padding:16px}
.sbody h4{color:#cbbff5;letter-spacing:1px;text-transform:uppercase;margin:6px 0 10px;font-size:20px}
.scard{background:var(--card);border:1px solid var(--gold);border-radius:22px;padding:4px 14px;margin-bottom:18px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none}
.srow:last-child{border-bottom:0}
.srow b{display:block}.srow small{color:var(--mut);font-size:12px}
.plink span{font-size:22px;color:var(--mut)}
.rng{display:flex;align-items:center;gap:8px;min-width:150px}.rng input{margin:0;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--green);flex:1}
.rng b{width:40px;text-align:right;font-size:13px}
.tg{width:76px;height:40px;border-radius:999px;border:0;background:#4a3d96;position:relative;display:flex;align-items:center;padding:0 10px;flex:none;color:#fff;font:800 11px var(--font);box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.tg i{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:linear-gradient(#fff,#d9d4f7);transition:.2s;box-shadow:0 3px 4px rgba(0,0,0,.4)}
.tg span{margin-left:auto}
.tg.on{background:var(--green);color:#1b1446}.tg.on i{left:40px}.tg.on span{margin:0 auto 0 0}

#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:rgba(8,4,28,.92);border:2px solid var(--line);color:#fff;padding:10px 18px;border-radius:16px;opacity:0;transition:.25s;pointer-events:none;z-index:70;max-width:90%;text-align:center;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.5)}
#toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- v4: more-games arrow, lobby, payout sheet ---------- */
.gmore{border:0;border-radius:20px;color:var(--gold);font:800 30px var(--font);background:linear-gradient(#4a3bb0,#35288a);box-shadow:0 7px 0 #1d1456,inset 0 2px 0 rgba(255,255,255,.22);animation:nudge 1.6s ease-in-out infinite;display:flex;align-items:center;justify-content:center}
.gmore:active{transform:translateY(4px)}
@keyframes nudge{50%{transform:translateX(3px)}}
.prize3d i{font-style:normal;font-size:15px;opacity:.7}
.prize3d:active{transform:translateY(3px);box-shadow:0 2px 0 #a76a05}
.moneybar.clickable{cursor:pointer}
.moneybar.clickable:active{transform:scale(.97)}
.glist{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grow{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;text-align:center;border:0;border-radius:20px;padding:12px 14px;color:#fff;font-family:var(--font);
  background:linear-gradient(#4a3bb0,#35288a);box-shadow:0 6px 0 #1d1456,inset 0 2px 0 rgba(255,255,255,.2)}
.grow.on{background:linear-gradient(#ffe38f,#ffb22e);color:#2a1a00;box-shadow:0 6px 0 #a76a05}
.grow:active{transform:translateY(4px)}
.grow .gi{font-size:40px;white-space:nowrap;line-height:1.1;filter:drop-shadow(0 6px 3px rgba(0,0,0,.45))}
.grow .gt{display:flex;flex-direction:column;line-height:1.15}
.grow .gt b{font-size:19px}.grow .gt small{color:var(--mut);font-size:13px}
.grow.on .gt small{color:#6b4600}
.grow .gw{font-size:12px;font-weight:800;background:var(--green);color:#1b1446;border-radius:999px;padding:3px 10px;white-space:nowrap}
.grow .gw.zero{background:rgba(0,0,0,.25);color:var(--mut)}
.paytbl{background:rgba(10,6,36,.5);border:2px solid var(--line);border-radius:18px;padding:6px 14px;margin:10px 0}
.paytbl div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
.paytbl div:last-child{border-bottom:0;font-size:20px;font-weight:800;color:var(--gold)}
.paytbl .neg{color:var(--red)}

/* ---------- v4: Kadi card table ---------- */
.ktable{position:relative;border-radius:30px;padding:14px 10px;display:flex;flex-direction:column;gap:6px;
  background:radial-gradient(ellipse at 50% 50%,#1f5a76 0,#173a4a 55%,#0d2230 100%);border:3px solid #0a1822;
  box-shadow:0 0 0 4px #2a1d12,0 0 0 6px var(--gold),inset 0 0 50px rgba(0,0,0,.55),0 18px 28px rgba(0,0,0,.45)}
.khand{display:flex;flex-direction:column;align-items:center;gap:8px}
.kinfo{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);border-radius:14px;padding:4px 12px;font-size:14px}
.kinfo em{font-style:normal;color:var(--gold);font-size:12px}
.pips{display:flex;gap:4px}.pips i{width:9px;height:9px;border-radius:50%;background:var(--gold)}.pips i.off{background:rgba(255,255,255,.25)}
.khand.act .kinfo{box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(242,177,52,.6)}
.kcards{display:flex;gap:8px;min-height:104px;justify-content:center}
.kcenter{text-align:center;padding:2px 0}
.kpot{font-size:30px;font-weight:800;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.45);line-height:1}
.kcenter small{color:#aebcc6;font-size:12px}
.pcard{width:70px;height:98px;perspective:700px;position:relative;animation:dealin .55s ease-out both;animation-delay:calc(var(--i,0) * .14s)}
@keyframes dealin{from{transform:translateY(var(--dy,-90px)) rotate(-10deg) scale(.5);opacity:0}}
.pc{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s}
.pcard.down .pc{transform:rotateY(180deg)}
.pf,.pb{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 5px 10px rgba(0,0,0,.45)}
.pf{background:#fbf7ec;color:#1b1a22;padding:5px 6px;display:flex;flex-direction:column;justify-content:space-between;font-weight:800;font-size:24px;line-height:1}
.pf.red{color:#c8372d}
.pf .su{align-self:flex-end;font-size:30px}
.pb{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#2b4b6b 0 5px,#233f5b 5px 10px);border:3px solid #fbf7ec}
.khand.me .pcard{width:84px;height:118px}
.khand.me .kcards{min-height:124px}
.khand.me .pf{font-size:28px}.khand.me .pf .su{font-size:36px}
.kbtns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.kbtns .btn{flex:1;margin-top:0;min-width:120px}
.kbtns .btn:disabled{opacity:.4}
@media (prefers-reduced-motion:reduce){.pcard{animation:none}.pc{transition:none}}

/* ---------- v4: Ludo board ---------- */
.ludoArea{padding-top:2px}
.lhome{text-align:center;font-weight:800;font-size:13px;margin:2px 0 4px;color:#fff}
.lwrap{perspective:1100px;padding:0 0 22px;margin-top:-2%}
.lboard{--lred:#d6443a;--lgrn:#3aa17e;--lyel:#f2b134;--lblu:#3b6fd4;position:relative;width:min(94vw,390px);aspect-ratio:1;margin:0 auto;background:#fbf7ec;border-radius:14px;
  box-shadow:0 0 0 5px #2a1d12,0 14px 0 #2a1d12,0 26px 30px rgba(0,0,0,.55);transform:rotateX(26deg);transform-origin:50% 100%;transform-style:preserve-3d}
.lc{position:absolute;width:6.6667%;height:6.6667%;border:1px solid rgba(0,0,0,.13);display:grid;place-items:center;font-size:clamp(7px,2.4vw,11px);color:rgba(27,26,34,.67);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.47)}
.lbs{position:absolute;width:40%;height:40%;border-radius:12px}
.lsl{position:absolute;width:11%;height:11%;border-radius:50%;background:#fff;border:3px solid;box-shadow:inset 0 0 0 3px rgba(0,0,0,.07)}
.lctr{position:absolute;left:40%;top:40%;width:20%;height:20%;background:conic-gradient(from -45deg,var(--lgrn) 0 25%,var(--lyel) 0 50%,var(--lblu) 0 75%,var(--lred) 0)}
.ltk{position:absolute;width:5.6%;height:6.6%;z-index:3;transition:left .19s ease-in-out,top .19s ease-in-out}
.ltk.fly{transition:left .7s cubic-bezier(.3,1.5,.5,1),top .7s cubic-bezier(.3,1.5,.5,1)}
.ltk b{position:absolute;left:8%;bottom:4%;width:84%;height:26%;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(1.5px)}
.ltk i{position:absolute;left:8%;top:0;width:84%;height:78%;border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.8) 0 10%,rgba(255,255,255,0) 32%),radial-gradient(circle at 50% 65%,var(--c),color-mix(in srgb,var(--c) 50%,#000));
  border:2px solid rgba(255,255,255,.67);box-shadow:0 3px 5px rgba(0,0,0,.4);transform:rotateX(-26deg);transform-origin:50% 100%}
.ltk.hop i{animation:lhop .19s ease-out}
@keyframes lhop{50%{translate:0 -55%;scale:1.12}}
.ltk.pick{z-index:9!important;cursor:pointer}
.ltk.pick i{animation:lglow .5s infinite alternate}
@keyframes lglow{to{box-shadow:0 0 0 4px #ffd166,0 0 14px #ffd166;translate:0 -22%}}
@media (prefers-reduced-motion:reduce){.ltk{transition:none}.ltk.pick i,.ltk.hop i{animation:none}}
.lctl{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:6px}
.ldie{min-width:84px;display:flex;justify-content:center}
.lside{flex:1;max-width:210px;display:flex;flex-direction:column;gap:2px}
.lside small{color:var(--mut);min-height:18px;text-align:center}
.lside .btn{margin-top:0}
.lside .btn:disabled{opacity:.4}

#vGame{padding-bottom:96px}

.gcard{position:relative}
.tag{position:absolute;top:-8px;right:-4px;z-index:2;font:800 11px/1 var(--font);letter-spacing:.5px;padding:4px 8px;border-radius:999px;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.tag.new{background:linear-gradient(#b9f351,#6fb512);color:#1b1446}
.tag.hot{background:linear-gradient(#ff8a4c,#e8341c)}
.tag.soon{position:static;background:rgba(255,255,255,.14);color:var(--gold);box-shadow:none;border:1px solid var(--gold)}
.card.soon{opacity:.85;border-style:dashed}
#stakeCard #findBtn{margin-top:14px}
#stakeCard #rule{margin:10px 0 0}

/* ---------- v5: tournaments ---------- */
.tcard{border-radius:22px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),#2a1f6e;border:2px solid rgba(255,209,102,.45);box-shadow:0 10px 0 rgba(10,6,36,.5),inset 0 2px 0 rgba(255,255,255,.14)}
.tcard.on{border-color:var(--green);box-shadow:0 10px 0 rgba(10,6,36,.5),0 0 0 3px rgba(155,226,43,.35)}
.tcard .trow{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:15px}
.tcard .trow.m{color:var(--mut);font-size:13px}
.tcard b.tn{font-size:19px}
.tfee{background:var(--gold);color:#2a1a00;border-radius:999px;padding:2px 12px;font-weight:800;font-size:14px}
.tfee.free{background:var(--green);color:#1b1446}
.tcard .btn{margin-top:4px}
.thdr{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:var(--mut);margin-bottom:8px}.thdr b{color:#fff}
.ttable{position:relative;height:520px;border-radius:30px;background:#0a141c;overflow:hidden;box-shadow:0 10px 0 rgba(10,6,36,.5)}
.tfelt{position:absolute;inset:5% 2%;border-radius:50%;background:radial-gradient(closest-side,#1f5a76,#173a4a 60%,#0d2230);box-shadow:0 0 0 6px #2a1d12,0 0 0 8px var(--gold),inset 0 0 40px rgba(0,0,0,.55)}
.tcenter{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;width:150px;color:#f1ede2}
.tpot{font-size:34px;font-weight:800;color:var(--gold);line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.tcenter small{font-size:12px;color:#aebcc6}
.tmsg{margin-top:6px;font-size:13px;min-height:36px;color:#dfe6ec;line-height:1.25}
.tseat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:112px;transform:translate(-50%,-50%);color:#f1ede2;transition:opacity .3s}
.tseat.s0{left:50%;top:76%;width:210px}.tseat.s1{left:15%;top:47%}.tseat.s2{left:50%;top:21%}.tseat.s3{left:85%;top:47%}
.tseat .kcards{min-height:56px;gap:4px}
.tseat .pcard{width:38px;height:54px}.tseat .pf{font-size:14px;padding:3px 4px}.tseat .pf .su{font-size:18px}.tseat .pb{border-width:2px}
.tseat.s0 .kcards{min-height:100px;gap:8px}.tseat.s0 .pcard{width:68px;height:96px}.tseat.s0 .pf{font-size:24px}.tseat.s0 .pf .su{font-size:30px}
.tinfo{background:rgba(0,0,0,.62);border-radius:12px;padding:3px 10px;text-align:center;font-size:12px;line-height:1.25;max-width:112px}
.tseat.s0 .tinfo{max-width:none}
.tinfo b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tinfo em{font-style:normal;color:var(--gold)}
.ttags{font-size:11px;color:#c7d0da;min-height:15px;display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap}
.tdb{background:var(--gold);color:#1b1a22;border-radius:50%;width:17px;height:17px;font-weight:800;font-size:10px;display:inline-grid;place-items:center}
.tbet{background:var(--gold);color:#1b1a22;border-radius:99px;padding:0 7px;font-weight:800}
.tseat.act .tinfo{box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(242,177,52,.6)}
.tseat.fold{opacity:.4}.tseat.win .tinfo{background:var(--gold);color:#1b1a22}.tseat.win .tinfo em{color:#1b1a22}
.tbar{height:8px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-top:12px}.tbar i{display:block;height:100%;width:0;background:var(--green)}
.tsecs{font-size:13px;color:var(--mut);height:18px;margin:2px 0 6px}
.tacts{display:flex;gap:8px;flex-wrap:wrap;min-height:54px}.tacts .btn{flex:1;min-width:92px;margin-top:0}
.tamt{display:flex;gap:10px;align-items:center;margin:8px 0}.tamt input[type=range]{flex:1;accent-color:var(--gold)}
.tamt input[type=number]{width:120px;padding:10px;border-radius:12px;border:2px solid var(--gold);background:rgba(0,0,0,.3);color:#fff;font:800 18px var(--font)}
#tResult{text-align:center}#tResult .res{font-size:26px;font-weight:800;color:var(--gold)}
#tResult .row2{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.12)}
#tResult .btn{margin-top:10px}

.tstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.tstat{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),#2a1f6e;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:7px 4px;text-align:center;box-shadow:0 4px 0 rgba(10,6,36,.5)}
.tstat small{display:block;font-size:11px;color:var(--mut);letter-spacing:.3px}
.tstat b{display:block;font-size:17px;color:#fff;margin-top:1px}
.tstat.pos b{color:var(--gold);font-size:20px}.tstat.pos.money b{color:var(--green)}
.tstat em{font-style:normal;font-size:10px;color:var(--mut)}
.tbadge{display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:99px;font-weight:800;font-size:12px;background:rgba(255,255,255,.12);color:#fff}
.tbadge.money{background:var(--green);color:#1b1446}.tbadge.bubble{background:#ff8a4c}
#tBoard .row2{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
#tBoard .row2.me{color:var(--gold);font-weight:800}
.pcard.out{animation:discard .38s ease-in forwards!important}
@keyframes discard{to{transform:translateY(-70px) rotate(22deg) scale(.55);opacity:0}}
.pcard.fresh{animation:dealin .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0)*.14s)}
.tseat.redeal .tinfo{animation:redealpop .9s ease-out}
@keyframes redealpop{0%{transform:scale(1)}30%{transform:scale(1.14);box-shadow:0 0 0 3px var(--green),0 0 20px rgba(155,226,43,.8)}100%{transform:scale(1)}}
.tswap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:800;color:#1b1446;background:var(--green);padding:2px 8px;border-radius:99px;animation:swap 1s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes swap{from{opacity:0;transform:translate(-50%,-10%)}25%{opacity:1}to{opacity:0;transform:translate(-50%,-140%)}}

.twatch{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(76,201,240,.16);border:1px solid #4cc9f0;border-radius:14px;padding:8px 10px;margin-bottom:10px;font-size:14px}
.twatch .btn{width:auto;flex:none;margin:0;padding:8px 12px;font-size:13px}
#tTables .trow2{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
#tTables .trow2 small{display:block;color:var(--mut)}
#tTables .btn{width:auto;flex:none;margin:0;padding:6px 12px;font-size:13px}
.tacts{position:sticky;bottom:84px;z-index:5;padding:10px 0 4px;background:linear-gradient(rgba(27,20,70,0),#1b1446 28%)}
.tacts:empty{display:none}

/* tournament lobby (detail) */
.tdhero{border-radius:22px;padding:16px;margin-bottom:10px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 0,rgba(255,209,102,.28),transparent 60%),linear-gradient(160deg,#3a2a96,#1d1457);border:2px solid rgba(255,209,102,.5);box-shadow:0 10px 0 rgba(10,6,36,.5)}
.tdhero h2{margin:0 0 4px;font-size:22px}
.tdhero .big{font-size:34px;font-weight:800;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4);line-height:1.1}
.tdhero small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.tdhero .tdg{display:flex;justify-content:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.tdhero .tdpill{background:rgba(0,0,0,.3);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:700}
.tdhero .tdpill.live{background:var(--green);color:#1b1446}.tdhero .tdpill.reg{background:var(--gold);color:#2a1a00}.tdhero .tdpill.bad{background:#ff5d73}
.tdacts{display:flex;gap:8px;margin-bottom:10px}.tdacts .btn{flex:1;margin-top:0}
.tdtabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:8px;padding-bottom:2px}
.tdtabs button{flex:1;min-width:64px;padding:9px 6px;border:0;border-radius:12px 12px 0 0;background:rgba(255,255,255,.08);color:var(--mut);font:700 13px var(--font);cursor:pointer;border-bottom:3px solid transparent}
.tdtabs button.on{background:rgba(255,255,255,.16);color:#fff;border-bottom-color:var(--gold)}
.tdpane .kv,.tdpane .pr{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.tdpane .kv span:first-child{color:var(--mut)}
.tdpane .pr.me{color:var(--gold);font-weight:800}.tdpane .pr.out{opacity:.6}
.tdpane .pr .rk{width:34px;color:var(--mut);flex:none}.tdpane .pr .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdpane .pr.cur{background:rgba(155,226,43,.15);border-radius:8px;padding-left:6px;padding-right:6px;color:var(--green);font-weight:800}
.tdpane .hd{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);letter-spacing:.4px;padding-bottom:4px}
.tdpane .tabrow{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px}
.tdpane .tabrow small{display:block;color:var(--mut)}
.tdpane .btn{width:auto;flex:none;margin:0;padding:6px 12px;font-size:13px}
.tdpane .note{font-size:12px;color:var(--mut);margin:8px 0 0}
.tcard{cursor:pointer}

.thdr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.thdr #tMini{grid-column:1;color:var(--gold);font-weight:800}.thdr #tH2{grid-column:2;text-align:right}
.tlobby{grid-column:2;grid-row:1;border:1px solid rgba(255,209,102,.6);background:rgba(0,0,0,.35);color:var(--gold);font:800 12px var(--font);padding:5px 10px;border-radius:99px;cursor:pointer}
.ttable{height:500px}
.tlobby{justify-self:end}

/* ---- v5.4 fit-to-screen table ---- */
#vTable{padding-bottom:92px}
.thdr{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;margin-bottom:6px;font-size:12px}
.thdr #tH1{grid-column:1;grid-row:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.thdr .tlobby{grid-column:2;grid-row:1;justify-self:end}
.thdr #tMini{grid-column:1;grid-row:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thdr #tH2{grid-column:2;grid-row:2;text-align:right;white-space:nowrap}
#tAmt{margin:6px 0}
.ttable{height:clamp(320px,calc(100dvh - 330px),520px);border-radius:26px}
.tfelt{inset:3% 1.5%}
.tcenter{top:43%;width:128px}
.tpot{font-size:28px}
.tmsg{font-size:11px;min-height:28px;max-height:30px;overflow:hidden;margin-top:3px}
.tseat{width:96px;gap:3px}
.tseat.s0{left:50%;top:auto;bottom:1.5%;transform:translate(-50%,0);width:190px}
.tseat.s2{left:50%;top:1.5%;transform:translate(-50%,0)}
.tseat.s1{left:14%;top:44%}.tseat.s3{left:86%;top:44%}
.tseat .kcards{min-height:48px;gap:3px}
#vTable .tseat .pcard{width:33px;height:47px}
#vTable .tseat .pf{font-size:12px;padding:2px 3px}#vTable .tseat .pf .su{font-size:14px}
#vTable .tseat.s0 .kcards{min-height:84px;gap:8px}
#vTable .tseat.s0 .pcard{width:58px;height:82px}
#vTable .tseat.s0 .pf{font-size:20px}#vTable .tseat.s0 .pf .su{font-size:24px}
.tinfo{padding:2px 8px;max-width:96px;font-size:11px;border-radius:10px}.tinfo b{font-size:12px}
.tseat.s0 .tinfo{max-width:none;padding:2px 14px}
.ttags{min-height:14px;font-size:10px}
.tbarrow{display:flex;align-items:center;gap:8px;margin:8px 0 6px}
.tbarrow .tbar{flex:1;margin:0;height:7px}.tbarrow .tsecs{margin:0;height:auto;min-width:34px;text-align:right;font-weight:800;color:#fff}
.tacts{position:static;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;min-height:0;padding:0;background:none}
.tacts .btn{grid-column:span 2;min-width:0;margin:0;padding:12px 4px;font-size:15px;min-height:48px;white-space:nowrap}
.tacts .btn:nth-last-child(2):nth-child(4){grid-column:span 3}.tacts .btn:last-child:nth-child(5){grid-column:span 3}
.tacts .btn:first-child:nth-last-child(2),.tacts .btn:last-child:nth-child(2){grid-column:span 3}
.tacts .btn:first-child:nth-last-child(1){grid-column:span 6}
.twatch{margin-bottom:6px;padding:6px 10px;font-size:13px}
.tcenter small{font-size:11px}
@media (max-width:360px){#vTable .tseat.s0 .pcard{width:52px;height:74px}.tseat{width:88px}.tinfo{max-width:88px}}
.tacts .btn:last-child:nth-child(4){grid-column:span 6}
.ttable{height:clamp(320px,calc(100dvh - 288px),540px)}
.tcenter{top:45%}

.rankbtn{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:linear-gradient(160deg,rgba(255,209,102,.25),rgba(255,209,102,.06));border:2px solid rgba(255,209,102,.6);border-radius:16px;padding:8px 12px;box-shadow:0 5px 0 rgba(10,6,36,.5)}
.rankbtn small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.rankbtn b{display:inline-block;font-size:22px;margin-right:8px}.rankbtn span{font-weight:800;color:var(--gold);font-size:13px}
.rankbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(10,6,36,.5)}

.plhead{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.plav{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:800 24px var(--font);color:#fff;background:radial-gradient(circle at 30% 25%,#ffb36b,#e8590c);box-shadow:0 4px 0 #8a3304,inset 0 2px 0 rgba(255,255,255,.35);flex:none}
.plhead h3{margin:0;font-size:20px}.plhead small{color:var(--mut)}
.plgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.plgrid div{background:rgba(255,255,255,.08);border-radius:12px;padding:8px 4px;text-align:center}
.plgrid small{display:block;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.3px}.plgrid b{font-size:17px}
.pl2{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin:10px 0 2px}
.plrow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
.clk{cursor:pointer}.clk:active{opacity:.7}

.gsvg{width:1em;height:1em;display:block}.gcard .gi .gsvg{width:40px;height:40px;filter:drop-shadow(0 4px 2px rgba(0,0,0,.4))}.si .gsvg{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.2em}

.paynote{margin:10px 0 0;text-align:center;font-size:12px;color:var(--mut)}.paynote b{color:var(--gold);letter-spacing:.5px}

#avYou.lred{background:radial-gradient(circle at 30% 25%,#ff8a7d,#d6443a)!important;box-shadow:0 4px 0 #7c1d16,inset 0 2px 0 rgba(255,255,255,.35)!important}
#avOpp.lyel{background:radial-gradient(circle at 30% 25%,#ffe08a,#f2b134)!important;color:#2a1a00!important;box-shadow:0 4px 0 #8a5b00,inset 0 2px 0 rgba(255,255,255,.45)!important}

#avYou.lgrn,#avOpp.lgrn{background:radial-gradient(circle at 30% 25%,#7be0b8,#3aa17e)!important;box-shadow:0 4px 0 #17573f,inset 0 2px 0 rgba(255,255,255,.35)!important}
#avYou.lblu,#avOpp.lblu{background:radial-gradient(circle at 30% 25%,#8fb4ff,#3b6fd4)!important;box-shadow:0 4px 0 #1a3a80,inset 0 2px 0 rgba(255,255,255,.35)!important}
.ltk.mine i::after{content:'';position:absolute;left:50%;top:42%;width:34%;height:34%;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.3)}

.refbtn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;margin:0 0 14px;padding:12px 14px;border-radius:20px;color:#fff;
  background:linear-gradient(160deg,rgba(155,226,43,.28),rgba(155,226,43,.06)),#2a1f6e;border:2px solid rgba(155,226,43,.6);box-shadow:0 7px 0 rgba(10,6,36,.5),inset 0 2px 0 rgba(255,255,255,.14)}
.refbtn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(10,6,36,.5)}
.refico{position:relative;font-size:34px;line-height:1;flex:none}
.refico em{position:absolute;right:-12px;top:-8px;font:800 11px var(--font);font-style:normal;background:var(--gold);color:#2a1a00;border-radius:99px;padding:2px 6px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.4);border:2px solid #1b1446}
.reftxt{flex:1;display:flex;flex-direction:column;gap:2px;margin-left:6px}.reftxt b{font-size:17px}.reftxt small{color:var(--mut);font-size:12px;line-height:1.25}
.refbtn i{font-style:normal;font-size:26px;color:var(--green);font-weight:800}
.refpill{background:var(--gold);color:#2a1a00;border-radius:99px;padding:2px 10px;font-size:13px;margin-left:6px;vertical-align:middle}
.reflink{display:flex;gap:8px;margin:8px 0}.reflink input{flex:1;min-width:0}.reflink .btn{width:auto;flex:none;margin:0;padding:10px 16px}
.refstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}.refstats div{background:rgba(255,255,255,.08);border-radius:12px;padding:8px;text-align:center}
.refstats small{display:block;color:var(--mut);font-size:11px;text-transform:uppercase}.refstats b{font-size:18px}
#ptMsg{width:100%;box-sizing:border-box;border-radius:14px;border:2px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);color:#fff;padding:12px;font:inherit;resize:vertical;margin-bottom:8px}

.or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--mut);font:700 13px var(--font)}
.or:before,.or:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.gbtn{display:flex;justify-content:center;min-height:44px}

.seo{max-width:420px;margin:18px auto 30px;padding:0 18px;text-align:center;color:var(--mut);font-size:13px;position:relative;z-index:1}
.seo h2{font:800 15px var(--font);color:#fff;margin:0 0 6px}
.seo p{margin:0}
.seonav{margin-top:8px}.seonav a{color:var(--gold);text-decoration:none;font-weight:700}

.strip .tap{cursor:pointer;border-color:var(--gold);color:#fff}
.strip .tap .chev{font-style:normal;color:var(--gold);font-weight:800;margin-left:2px}
.wtlist{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.wtrow{display:flex;align-items:center;gap:10px;background:rgba(10,6,36,.55);border:2px solid var(--line);border-radius:16px;padding:8px 10px}
.wtrow .av{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(#ffe38f,#ffb22e);color:#1b1446;display:grid;place-items:center;font:800 18px var(--font)}
.wtrow .in{flex:1;min-width:0;text-align:left}
.wtrow .in b{display:block;color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.wtrow .in small{color:var(--mut);font-size:12px}
.wtrow .btn{width:auto;margin:0;padding:8px 14px;font-size:14px}
.wtempty{text-align:center;color:var(--mut);padding:18px 6px}
.msg .rp{font-size:12px;color:var(--gold);cursor:pointer;margin-left:8px;font-weight:700}
.msg .quote{border-left:3px solid var(--gold);background:rgba(0,0,0,.25);border-radius:6px;padding:3px 8px;margin:4px 0 2px;font-size:12px;color:var(--mut);line-height:1.2}
.msg .quote b{color:var(--gold);display:block;font-size:12px}
.msg.tome{box-shadow:0 0 0 2px var(--gold),0 3px 0 #1d1456}
.replybar{display:flex;align-items:center;gap:8px;margin-top:10px;background:rgba(10,6,36,.7);border:2px solid var(--gold);border-radius:14px;padding:6px 10px}
.replybar>div{flex:1;min-width:0}.replybar b{color:var(--gold);font-size:13px;display:block}
.replybar small{color:var(--mut);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replybar button{background:none;border:0;color:#fff;font-size:18px}