/* ===== PlayZone polish: dynamic + stylish layer. Loaded LAST. Pure additive. ===== */
:root{--g1:#5b4bff;--g2:#9b4dff;--g3:#ff4dc4;--g4:#ffb52e;--glow:0 0 0 1px rgba(255,255,255,.06),0 18px 50px rgba(91,75,255,.28)}
@keyframes pzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pzShine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(220%) skewX(-20deg)}}
@keyframes pzPulse{0%{box-shadow:0 0 0 0 rgba(91,75,255,.5)}100%{box-shadow:0 0 0 16px rgba(91,75,255,0)}}
@keyframes pzGrad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes pzPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04)}100%{transform:none;opacity:1}}
@keyframes pzRipple{to{transform:scale(3.2);opacity:0}}
@keyframes pzBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.15)}}
@keyframes pzTick{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* living background */
body{background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(420px 420px at 15% 20%,rgba(91,75,255,.16),transparent 70%),radial-gradient(380px 380px at 90% 70%,rgba(255,77,196,.12),transparent 70%);animation:pzBlob 14s ease-in-out infinite}

/* header */
.top{box-shadow:0 6px 24px rgba(36,40,110,.06)}
.logo-tile{animation:pzFloat 3.4s ease-in-out infinite;background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));background-size:200% 200%}
.coin-pill{transition:transform .2s}.coin-pill.tick{animation:pzTick .5s}
.conn:not(.off) .dot{animation:pzPulse 1.6s infinite}
.iconbtn{transition:transform .2s,box-shadow .2s}.iconbtn:hover{transform:translateY(-2px) rotate(-6deg);box-shadow:0 8px 18px rgba(91,75,255,.25)}

/* greeting + hero */
.greet{font-size:20px;font-weight:700;letter-spacing:-.3px}
.greet b{background:linear-gradient(90deg,var(--g1),var(--g3),var(--g4));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pzGrad 6s linear infinite}
.ehero{background:radial-gradient(circle at 90% -10%,rgba(255,255,255,.3),transparent 45%),radial-gradient(circle at 0 110%,rgba(255,120,200,.45),transparent 50%),linear-gradient(120deg,#1b1650,#5b4bff,#9b4dff,#ff4dc4);background-size:100% 100%,100% 100%,260% 260%;animation:rise .6s both,pzGrad 12s ease infinite;box-shadow:var(--glow)}
.ehero::before{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:pzShine 5s infinite;pointer-events:none}
.ehero .big{font-size:46px;letter-spacing:-1.5px;text-shadow:0 6px 24px rgba(0,0,0,.3)}
.ehero .row button{transition:transform .2s,box-shadow .2s}.ehero .row button:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.ehero .row button.solid{animation:pzPulse 2.4s infinite}

/* quick tiles */
.quick button{transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s;position:relative;overflow:hidden}
.quick button:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 16px 30px rgba(91,75,255,.22)}
.quick button b{display:inline-block;font-size:24px;transition:transform .3s}.quick button:hover b{transform:scale(1.25) rotate(-8deg)}

/* section headings */
.sec{letter-spacing:-.2px}.sec i{box-shadow:0 0 14px var(--g2);animation:pzPulse 2.6s infinite}

/* game cards: glossy, lift, tilt (tilt vars set by polish.js) */
.pgame,.tcard,.card,.mecard{transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s,border-color .35s}
.pgame{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--card) 90%,var(--p)))}
.pgame::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.pgame:hover{box-shadow:0 22px 44px rgba(91,75,255,.28);border-color:color-mix(in srgb,var(--p) 40%,var(--bd))}.pgame:hover::after{opacity:1}
.pgame .ico{font-size:34px;box-shadow:0 10px 22px rgba(0,0,0,.12);animation:pzFloat 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.6s);transform:translateZ(30px)}
.pgame .play{transition:transform .2s,letter-spacing .2s;transform:translateZ(20px)}.pgame:hover .play{transform:translateZ(20px) scale(1.08);letter-spacing:.4px}
.tcard:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(91,75,255,.2)}
.tcard .ticon{transition:transform .3s}.tcard:hover .ticon{transform:scale(1.12) rotate(-6deg)}
.card:hover{box-shadow:0 14px 34px rgba(36,40,110,.14)}

/* leaderboard */
.board .brow{transition:transform .2s,background .2s;border-radius:14px}.board .brow:hover{transform:translateX(5px);background:var(--soft)}
.board .brow:nth-child(1) .rk{filter:drop-shadow(0 0 8px #ffb52e)}

/* buttons: gradient flow, press, ripple */
.btn,.ea-btn,.ehero .row button{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn.primary,.ea-btn:not(.ghost){background-size:200% 200%;animation:pzGrad 7s ease infinite;transition:transform .2s,box-shadow .2s}
.btn.primary:hover,.ea-btn:not(.ghost):hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(91,75,255,.45)}
.btn:active,.ea-btn:active{transform:scale(.96)}
.pz-rip{position:absolute;border-radius:50%;width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(255,255,255,.55);transform:scale(0);animation:pzRipple .65s ease-out forwards;pointer-events:none}

/* bottom nav: floating glass with glowing active tab */
.nav{box-shadow:0 20px 50px rgba(30,30,90,.25),inset 0 1px 0 rgba(255,255,255,.4)}
.nav-i{transition:transform .25s cubic-bezier(.2,.9,.3,1.5),color .2s}.nav-i svg{transition:transform .25s}
.nav-i:hover svg{transform:translateY(-3px)}
.nav-i.on{transform:translateY(-4px)}.nav-i.on svg{filter:drop-shadow(0 6px 10px rgba(91,75,255,.55));animation:pzPop .4s}

/* lobby + room */
.lobby-head{position:relative;overflow:hidden;border-radius:26px;padding:18px;background:linear-gradient(135deg,var(--card),var(--soft));border:1px solid var(--bd);box-shadow:var(--sh);animation:pzPop .45s both}
.lobby-head .ltile{display:grid;place-items:center;animation:pzFloat 3s ease-in-out infinite;filter:drop-shadow(0 10px 16px rgba(91,75,255,.35))}
.codechip,.bigcode{background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3))!important;background-size:200% 200%!important;color:#fff!important;animation:pzGrad 6s ease infinite;box-shadow:var(--glow)}
.bigcode{letter-spacing:.35em;text-shadow:0 4px 18px rgba(0,0,0,.35);animation:pzGrad 6s ease infinite,pzPop .5s both}
.seats .seat,.seats li{transition:transform .25s,box-shadow .25s;animation:pzPop .4s both}.seats li:hover{transform:translateY(-3px)}
.seat.turn,.seats li.turn{box-shadow:0 0 0 2px var(--g2),0 0 26px rgba(155,77,255,.55);animation:pzPulse 1.6s infinite}
.searching .spin{box-shadow:0 0 22px rgba(91,75,255,.5)}
.tab{transition:transform .2s,background .2s}.tab.on{box-shadow:0 8px 18px rgba(91,75,255,.35)}
.msg{animation:pzPop .3s both}.snd{transition:transform .2s}.snd:hover{transform:scale(1.12) rotate(-4deg)}.snd:active{transform:scale(.9)}
.qchip{transition:transform .2s}.qchip:hover{transform:translateY(-2px)}

/* game boards */
.ludo-wrap,.carrom-wrap,.cb-table{border-radius:26px;box-shadow:0 24px 60px rgba(36,40,110,.28);animation:pzPop .5s both}
.dice{transition:transform .3s cubic-bezier(.2,.9,.3,1.5);filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}.dice:hover{transform:rotate(14deg) scale(1.12)}
.cell{transition:transform .15s,background .2s}.cell:hover{transform:scale(1.07)}
.hand .card-c,.card-c{transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s}.card-c:hover{transform:translateY(-14px) rotate(-2deg) scale(1.06);box-shadow:0 18px 28px rgba(0,0,0,.3);z-index:5}
.tok{transition:transform .25s}.tok:hover{transform:scale(1.2)}

/* login / landing */
.ea .bgf i{filter:blur(.5px)}
.landing h1{animation:pzPop .6s both}.landing h1 .hl{background-size:200% 100%;animation:pzGrad 5s linear infinite}
.landing p,.cta,.lstats,.feat{animation:rise .6s both}.lstats{animation-delay:.15s}.feat{animation-delay:.25s}
.lstats div{transition:transform .3s}.lstats div:hover{transform:translateY(-5px) scale(1.05)}
.feat{transition:transform .3s}.feat:hover{transform:translateX(6px)}
.cta{animation:rise .6s .1s both,pzPulse 2.4s 1s infinite}
.auth-box{animation:pzPop .5s both}.glass{box-shadow:0 30px 70px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.glass input{transition:box-shadow .25s,transform .25s}.glass input:focus{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(91,75,255,.22)}
.reccode{animation:pzPop .5s both;box-shadow:0 0 30px rgba(255,181,46,.35)}

/* admin-style pages + dialogs + toast */
.doc{animation:rise .5s both}.doc h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
dialog[open]{animation:pzPop .35s both}dialog::backdrop{backdrop-filter:blur(6px);background:rgba(10,12,40,.5)}
.toast{animation:pzPop .3s both;box-shadow:0 16px 40px rgba(0,0,0,.3)}

/* page switch + scroll reveal */
main:not([hidden]){animation:rise .4s both}
.pz-rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}.pz-rv.in{opacity:1;transform:none}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:linear-gradient(var(--g1),var(--g3));border-radius:8px}
::selection{background:var(--g2);color:#fff}
@media(hover:none){.pgame{transform:none!important}.pgame::after{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.pz-rv{opacity:1;transform:none}}

/* ===== Video Meet hero (top of home) ===== */
@keyframes pzLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.vidhero{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;margin:4px 0 16px;padding:20px 18px;border-radius:26px;color:#fff;cursor:pointer;
 background:radial-gradient(circle at 85% 0,rgba(255,255,255,.35),transparent 45%),linear-gradient(120deg,#ff2d87,#ff5e3a,#ff9f1c,#ff2d87);background-size:100% 100%,300% 300%;
 animation:pzGrad 8s ease infinite,pzPop .5s both;box-shadow:0 22px 46px rgba(255,45,135,.45);transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s}
.vidhero:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 28px 56px rgba(255,45,135,.55)}.vidhero:active{transform:scale(.97)}
.vidhero::before{content:"";position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:pzShine 3.6s infinite;pointer-events:none}
.vidhero.off{opacity:.55;filter:grayscale(.4)}
.vh-ico{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:22px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 10px 24px rgba(0,0,0,.2);animation:pzFloat 2.8s ease-in-out infinite}
.vh-txt{flex:1;min-width:0}.vh-txt h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-.5px;text-shadow:0 4px 14px rgba(0,0,0,.25)}
.vh-txt p{margin:3px 0 0;font-size:13px;font-weight:600;opacity:.95}
.vh-go{flex:none;background:#fff;color:#e11d74;font-weight:800;font-size:14px;padding:10px 16px;border-radius:99px;box-shadow:0 10px 22px rgba(0,0,0,.22);animation:pzPulse 2s infinite;white-space:nowrap}
.vh-go b{display:inline-block;transition:transform .2s}.vidhero:hover .vh-go b{transform:translateX(4px)}
.vh-live{position:absolute;top:9px;left:18px;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.8px;opacity:.95}
.vh-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pzLive 1.2s infinite}
.vidhero{padding-top:26px}
.tiles{grid-template-columns:1fr 1fr!important}
@media(max-width:360px){.vh-go{display:none}.vh-txt h2{font-size:22px}}

/* ===== Contact buttons ===== */
.cbtns{display:grid;gap:12px;margin:18px 0 8px}
.cbtn{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;text-decoration:none;background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);transition:transform .25s,box-shadow .25s;animation:pzPop .4s both}
.cbtn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(91,75,255,.25)}
.cbtn .ci{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:22px;background:var(--grad)}
.cbtn b{display:block;color:var(--tx);font-size:16px}.cbtn small{color:var(--mu);font-size:13px;font-weight:600;word-break:break-all}
.doc>a{color:var(--p)!important;font-weight:700}

/* ===== LIGHT MODE: deeper, richer, less washed-out ===== */
html:not(.dark){--bg:#e6e9fb;--tx:#0a0c24;--ink:#0a0c24;--mu:#454b76;--mute:#454b76;--bd:#c9cef0;--bd2:#b9bfe8;--soft:#dde1ff;--glass2:#dde1ff;
 --sh:0 12px 30px rgba(40,44,130,.16),0 2px 6px rgba(40,44,130,.08);--shadow:var(--sh)}
html:not(.dark) body{background:radial-gradient(900px 480px at 100% -5%,rgba(155,77,255,.28),transparent 62%),radial-gradient(800px 480px at -10% 5%,rgba(91,75,255,.24),transparent 62%),radial-gradient(700px 500px at 50% 110%,rgba(255,77,196,.16),transparent 60%),var(--bg)}
html:not(.dark) .top{background:rgba(255,255,255,.88);border-bottom:1px solid #c9cef0;box-shadow:0 8px 26px rgba(40,44,130,.14)}
html:not(.dark) .card,html:not(.dark) .pgame,html:not(.dark) .tcard,html:not(.dark) .quick button,html:not(.dark) .mecard{border:1px solid #c3c9ee;background:linear-gradient(165deg,#fff,#f1f3ff)}
html:not(.dark) .pgame:hover,html:not(.dark) .tcard:hover{border-color:var(--p)}
html:not(.dark) .pgame.c1 .ico{background:linear-gradient(135deg,#ffb3c6,#ff7a9c)}html:not(.dark) .pgame.c2 .ico{background:linear-gradient(135deg,#9fd2ff,#4fa8ff)}
html:not(.dark) .pgame.c3 .ico{background:linear-gradient(135deg,#d2b0ff,#a56bff)}html:not(.dark) .pgame.c4 .ico{background:linear-gradient(135deg,#9ff0bf,#38d27f)}
html:not(.dark) .pgame h3,html:not(.dark) .tcard h3{color:#0a0c24;font-weight:800}
html:not(.dark) .pgame .meta,html:not(.dark) .tcard p,html:not(.dark) .muted{color:#454b76}
html:not(.dark) .sec{color:#0a0c24;font-weight:800}
html:not(.dark) .nav{background:rgba(255,255,255,.94);border:1px solid #bfc5ee;box-shadow:0 18px 44px rgba(40,44,130,.28)}
html:not(.dark) .nav-i{color:#454b76}html:not(.dark) .nav-i.on{color:var(--p)}
html:not(.dark) .btn.soft,html:not(.dark) .btn.ghost{background:#dfe3ff;border:1px solid #b7bdf0;color:#2a2490;font-weight:700}
html:not(.dark) .iconbtn,html:not(.dark) .chip{background:#fff;border:1px solid #c3c9ee;box-shadow:0 4px 12px rgba(40,44,130,.12)}
html:not(.dark) input,html:not(.dark) textarea,html:not(.dark) select{border-color:#b7bdf0}
html:not(.dark) .board .brow:hover{background:#dde1ff}
html:not(.dark) .t-pink{background:#ffd0e4}html:not(.dark) .t-blue{background:#cfeaff}html:not(.dark) .t-green{background:#c6f5df}
html:not(.dark) footer,html:not(.dark) footer a{color:#454b76}
html:not(.dark) .doc p,html:not(.dark) .doc li{color:#1a1d3d}