/* ===== PlayZone Vivid: colourful + lively design layer (loaded last; pure CSS, easy to remove) ===== */
:root{--c-pink:#ff3d8b;--c-orange:#ff9a1f;--c-yellow:#ffd23f;--c-green:#19c37d;--c-teal:#00bfb3;--c-blue:#2f6bff;--c-cyan:#12b8ff;--c-purple:#9b4dff;
  --rainbow:linear-gradient(90deg,#ff3d8b,#ff9a1f,#ffd23f,#19c37d,#12b8ff,#9b4dff,#ff3d8b)}
@keyframes vvFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(6deg)}}
@keyframes vvShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes vvShine{0%{transform:translateX(-130%)}60%,100%{transform:translateX(330%)}}
@keyframes vvPop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes vvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* page background: soft rainbow glow that slowly moves */
body::before{background:linear-gradient(160deg,#ede9fe 0%,#fde7f3 30%,#dbf4ff 62%,#fff6cf 100%);background-size:220% 220%;animation:vvShift 18s ease infinite}
html.dark body::before{background:linear-gradient(160deg,#0b0726 0%,#1b0b3a 35%,#06203a 70%,#0b0726 100%);background-size:220% 220%}

/* header: moving rainbow underline */
.top{position:relative}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rainbow);background-size:200% 100%;animation:vvShift 6s linear infinite}

/* coin hero */
.ehero{background:linear-gradient(120deg,#ff3d8b,#9b4dff,#2f6bff,#12b8ff,#9b4dff,#ff3d8b)!important;background-size:300% 300%!important;animation:vvShift 12s ease infinite;box-shadow:0 20px 40px -16px rgba(155,77,255,.7)}
.ehero:after{animation:vvFloat 5s ease-in-out infinite;opacity:.2}
.ehero .row button.solid{background:#fff;color:#c026d3}

/* video hero stays hot-pink; add gentle bounce on its icon */
.vh-ico{animation:vvBob 2.6s ease-in-out infinite}

/* quick buttons: every one has its own colour */
.quick button{border:0!important;color:#fff!important;box-shadow:0 10px 18px -10px rgba(0,0,0,.4)}
.quick button b{background:rgba(255,255,255,.28)!important}
.quick button:nth-child(1){background:linear-gradient(145deg,#ff9a1f,#ff3d6e)!important}
.quick button:nth-child(2){background:linear-gradient(145deg,#19c37d,#12b8ff)!important}
.quick button:nth-child(3){background:linear-gradient(145deg,#ffb11a,#ffd23f)!important;color:#5b3b00!important}
.quick button:nth-child(4){background:linear-gradient(145deg,#9b4dff,#ff3fa4)!important}
#quickChat button{background:var(--glass2)!important;color:inherit!important;box-shadow:none}

/* section titles */
.sec{color:var(--ink)!important;font-size:19px;text-transform:none;letter-spacing:-.2px}
.sec i{width:8px;height:22px;background:linear-gradient(180deg,#ff3d8b,#ff9a1f,#19c37d,#12b8ff)!important;background-size:100% 300%;animation:vvShift 5s linear infinite}

/* GAME CARDS: full colour, floating emoji */
.pgrid{gap:14px}
html body .pgame{border:0;color:#fff;padding:18px 10px 16px;min-height:178px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 16px 28px -14px rgba(0,0,0,.45)}
html body .pgame.c1{background:linear-gradient(150deg,#ffb11a,#ff3d6e)}
html body .pgame.c2{background:linear-gradient(150deg,#00c2b8,#38d96b)}
html body .pgame.c3{background:linear-gradient(150deg,#9b4dff,#ff3fa4)}
html body .pgame.c4{background:linear-gradient(150deg,#2f6bff,#12b8ff)}
html body .pgame h3,html body .pgame .meta{color:#fff!important;text-shadow:0 2px 6px rgba(0,0,0,.25)}
html body .pgame .meta{opacity:.92}
html body .pgame .ico{background:rgba(255,255,255,.28)!important;width:68px;height:68px;font-size:36px;animation:vvBob 3s ease-in-out infinite;backdrop-filter:blur(2px)}
html body .pgame:nth-child(even) .ico{animation-delay:-1.5s}
html body .pgame .play{background:#fff;color:#1f1147;box-shadow:0 8px 16px rgba(0,0,0,.22)}
.pgame::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:vvShine 5s infinite;pointer-events:none}
.pgame .fl{position:absolute;font-style:normal;opacity:.18;pointer-events:none;animation:vvFloat 6s ease-in-out infinite}
.pgame .f1{font-size:46px;right:-6px;top:-6px}.pgame .f2{font-size:34px;left:-4px;bottom:2px;animation-delay:-3s}
html body .pgame:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 24px 36px -14px rgba(0,0,0,.5)}

/* more tiles: Promote (blue) + Jobs (green) */
html body .tcard{border:0;color:#fff;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 14px 24px -14px rgba(0,0,0,.45)}
html body #tilePromote{background:linear-gradient(145deg,#2f6bff,#12b8ff)}
html body #tileGigs{background:linear-gradient(145deg,#19c37d,#ffd23f)}
html body .tcard h3{color:#fff;font-size:17px;text-shadow:0 2px 6px rgba(0,0,0,.25)}
html body .tcard p{display:block;color:#fff;opacity:.95;font-size:12px;font-weight:700;margin:2px 0 0}
html body .tcard .ticon{background:rgba(255,255,255,.3);color:#fff;animation:vvBob 3s ease-in-out infinite}

/* me card + leaderboard */
.mecard{border:0;background:linear-gradient(#fff,#fff) padding-box,var(--rainbow) border-box;border:2px solid transparent}
html.dark .mecard{background:linear-gradient(#0f172a,#0f172a) padding-box,var(--rainbow) border-box}
.board .brow:nth-child(1){background:linear-gradient(90deg,rgba(255,210,63,.35),transparent);border-radius:14px}
.board .brow:nth-child(2){background:linear-gradient(90deg,rgba(160,174,192,.3),transparent);border-radius:14px}
.board .brow:nth-child(3){background:linear-gradient(90deg,rgba(255,138,76,.28),transparent);border-radius:14px}

/* ad box */
.ad{border:2px dashed #ff9a1f;background:linear-gradient(135deg,#fff7e0,#ffe4f1)}
html.dark .ad{background:linear-gradient(135deg,rgba(255,154,31,.15),rgba(255,61,139,.15))}

/* bottom menu: coloured active tab */
.nav-i{transition:transform .2s,color .2s}.nav-i.on{color:#ff3d8b!important;transform:translateY(-3px)}
.nav-i.on svg{filter:drop-shadow(0 4px 6px rgba(255,61,139,.45))}
.nav-i.on span{font-weight:800}

/* ===== each game gets its own colour in LOBBY and ROOM ===== */
#view-lobby[data-game=ludo],#view-room[data-game=ludo]{--g1:#ffb11a;--g2:#ff3d6e;--gdark:#3a0f1f;--gmid:#7a1f3a}
#view-lobby[data-game=carrom],#view-room[data-game=carrom]{--g1:#00c2b8;--g2:#38d96b;--gdark:#052b24;--gmid:#0b6b52}
#view-lobby[data-game=callbreak],#view-room[data-game=callbreak]{--g1:#9b4dff;--g2:#ff3fa4;--gdark:#220a40;--gmid:#5a1d9c}
#view-lobby[data-game=tictactoe],#view-room[data-game=tictactoe]{--g1:#2f6bff;--g2:#12b8ff;--gdark:#0a1b4a;--gmid:#1b4fc4}
#view-lobby .card,#view-lobby .howto{border:0;border-top:5px solid var(--g1,#7c3aed);border-radius:22px}
#view-lobby .howto{border-top:0;border-left:6px solid var(--g2,#7c3aed);background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.6))}
html.dark #view-lobby .howto{background:rgba(255,255,255,.07)}
#view-lobby .card h2{color:var(--g2,#7c3aed)}
#view-lobby .btn.primary,#view-room .btn.primary{background:linear-gradient(120deg,var(--g1,#7c3aed),var(--g2,#c026d3))!important;box-shadow:0 12px 22px -10px rgba(0,0,0,.45)}
#view-lobby .btn.soft{background:#fff;color:var(--g2,#4338ca);border:2px solid var(--g1,#c7d2fe)}
html.dark #view-lobby .btn.soft{background:rgba(255,255,255,.08)}
#view-lobby .codeinput{border:2px solid var(--g1,#c7d2fe)}
.lobby-head{animation:vvPop .4s both}
.lobby-head .ltile{animation:vvBob 3s ease-in-out infinite}
#view-room .room-bar h1{background:linear-gradient(90deg,var(--g1,#7c3aed),var(--g2,#c026d3));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:800}
#view-room .codechip{background:linear-gradient(120deg,var(--g1,#7c3aed),var(--g2,#c026d3));color:#fff;border:0}
#view-room #gameArea{background:radial-gradient(120% 120% at 20% 0%,var(--gmid,#4338ca) 0%,var(--gdark,#1e1b4b) 62%,#0a0620 100%);box-shadow:0 18px 34px -16px var(--g2,#4338ca),inset 0 0 0 2px rgba(255,255,255,.12)}
#view-room .side-col{background:linear-gradient(180deg,var(--gdark,#1e1b4b),#120a30);box-shadow:0 18px 34px -16px var(--g1,#4338ca)}
#view-room .tab.on{background:linear-gradient(120deg,var(--g1,#7c3aed),var(--g2,#c026d3));color:#fff}
#view-room .bigcode{background:linear-gradient(90deg,var(--g1,#fff),var(--g2,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Jobs page */
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.cats button{border:0;border-radius:99px;padding:7px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;background:#fff;color:#4338ca;box-shadow:0 4px 10px -6px rgba(0,0,0,.35)}
.cats button.on{background:linear-gradient(120deg,#19c37d,#12b8ff);color:#fff}
html.dark .cats button{background:rgba(255,255,255,.1);color:#e0e7ff}
.gig{border:0!important;border-left:6px solid #19c37d!important}
.gig:nth-of-type(3n+2){border-left-color:#ff9a1f!important}.gig:nth-of-type(3n){border-left-color:#9b4dff!important}
.gig .meta span{background:linear-gradient(120deg,#e0f7ff,#fdeaff);color:#4338ca}
html.dark .gig .meta span{background:rgba(255,255,255,.12);color:#e0e7ff}

/* Terms / Privacy / Rules pages */
.doc{background:#fff;border-radius:26px;margin-top:12px;padding:20px 18px 40px;box-shadow:0 16px 30px -16px rgba(79,70,229,.45);border-top:6px solid transparent;border-image:var(--rainbow) 1}
html.dark .doc{background:#0f172a}
.doc h1{background:linear-gradient(90deg,#ff3d8b,#9b4dff,#2f6bff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.doc h2{display:inline-block;background:linear-gradient(120deg,#ede9fe,#fde7f3);color:#6d28d9;padding:6px 14px;border-radius:99px;font-size:16px;margin:24px 0 6px}
html.dark .doc h2{background:rgba(155,77,255,.22);color:#e9d5ff}
.doc ul{list-style:none;padding-left:0}
.doc li{position:relative;padding:6px 0 6px 26px}
.doc li::before{content:"✦";position:absolute;left:4px;color:#ff3d8b;font-weight:800}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}