/*!
 * PlayVlay site theme — the Find The Flow home page's look (public/playvlay-home.html)
 * for every page of the main site: colours, font, the header (Home · Selfie to Game ·
 * More games ▸ Game Rooms / Search games · Get the app) and the footer.
 * The header and footer are drawn by /js/pv-site.js into #pvsHeader / #pvsFooter.
 * Classes are prefixed pvs- so they never clash with a page's own styles.
 * Not used by the learn, selfie and discover pages (they keep their own look).
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root{
  --pvs-bg:#0B0F19; --pvs-bg2:#080B14;
  --pvs-surface:#111728; --pvs-surface2:#161D31; --pvs-surface3:#1D2540;
  --pvs-line:rgba(255,255,255,.08); --pvs-line2:rgba(255,255,255,.14);
  --pvs-text:#EEF1FA; --pvs-muted:#A3ABC4; --pvs-dim:#7A83A1;
  --pvs-mint:#4EF3B0; --pvs-cyan:#38D9F5; --pvs-violet:#B69CFF; --pvs-coral:#FF7A6B; --pvs-amber:#FFC46B;
  --pvs-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pvs-max:1180px; --pvs-gut:16px; --pvs-headH:64px;
}
@media (min-width:720px){:root{--pvs-gut:28px}}

/* ── header ── */
.pvs-top{position:sticky;top:0;z-index:70;background:rgba(9,12,22,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--pvs-line);font-family:var(--pvs-font);color:var(--pvs-text);padding-top:env(safe-area-inset-top,0px)}
.pvs-top *{box-sizing:border-box}
.pvs-bar{display:flex;align-items:center;gap:20px;height:var(--pvs-headH);width:100%;max-width:var(--pvs-max);margin:0 auto;padding:0 var(--pvs-gut)}
.pvs-brand{display:flex;align-items:center;flex:none;text-decoration:none}
.pvs-brand img{height:30px;width:auto;display:block}
.pvs-nav{display:none;gap:4px;margin-left:auto;align-items:center}
.pvs-nav > a,.pvs-ddBtn{padding:8px 12px;border-radius:999px;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--pvs-muted);transition:color .15s,background .15s;
  background:transparent;border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.pvs-nav > a:hover,.pvs-ddBtn:hover,.pvs-dd.open .pvs-ddBtn{color:var(--pvs-text);background:rgba(255,255,255,.06)}
.pvs-nav > a[aria-current="page"],.pvs-dd.cur .pvs-ddBtn{color:var(--pvs-text)}
.pvs-ddBtn svg{transition:transform .15s}.pvs-dd.open .pvs-ddBtn svg{transform:rotate(180deg)}
.pvs-dd{position:relative}
.pvs-ddPanel{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;border-radius:16px;background:var(--pvs-surface);
  border:1px solid var(--pvs-line2);box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:80}
.pvs-dd.open .pvs-ddPanel{display:block}
@media (hover:hover){.pvs-dd:hover .pvs-ddPanel{display:block}.pvs-dd:hover .pvs-ddBtn{color:var(--pvs-text);background:rgba(255,255,255,.06)}.pvs-dd:hover .pvs-ddBtn svg{transform:rotate(180deg)}}
.pvs-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.pvs-ddPanel a,.pvs-menuGroup a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pvs-arrow{flex:none;opacity:.6;transition:transform .15s,opacity .15s}
.pvs-ddPanel a:hover .pvs-arrow,.pvs-menuGroup a:hover .pvs-arrow{opacity:1;transform:translateX(3px)}
.pvs-ddPanel a{display:block;padding:10px 12px;border-radius:10px;color:var(--pvs-text);font-weight:700;font-size:14.5px;text-decoration:none}
.pvs-ddPanel a:hover,.pvs-ddPanel a[aria-current="page"]{background:rgba(255,255,255,.06)}
.pvs-ddPanel small{display:block;margin-top:2px;color:var(--pvs-dim);font-weight:500;font-size:12.5px}
.pvs-get{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--pvs-mint);color:#04140D;font-weight:800;font-size:14.5px;
  text-decoration:none;flex:none;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.pvs-get:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(78,243,176,.3)}
.pvs-get{margin-left:auto}
.pvs-menuBtn{margin-left:-8px;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--pvs-line2);background:transparent;color:var(--pvs-text);cursor:pointer;flex:none}
.pvs-menu{display:none;border-top:1px solid var(--pvs-line);padding:10px var(--pvs-gut) 18px;max-width:var(--pvs-max);margin:0 auto}
.pvs-menu.open{display:block}
.pvs-menu a{display:block;padding:12px 4px;font-weight:600;text-decoration:none;color:var(--pvs-text);border-bottom:1px solid var(--pvs-line);font-size:16px}
.pvs-menu small{display:block;color:var(--pvs-dim);font-weight:500;font-size:13px}
.pvs-menuHead{display:flex;align-items:center;gap:6px;width:100%;padding:12px 4px;border:0;background:none;font:600 16px var(--pvs-font);color:var(--pvs-text);cursor:pointer;text-align:left}
.pvs-menuHead svg{transition:transform .15s}
.pvs-menuGroup.open .pvs-menuHead svg{transform:rotate(180deg)}
.pvs-menuSub{display:none}
.pvs-menuGroup.open .pvs-menuSub{display:block}
@media (hover:hover){.pvs-menuGroup:hover .pvs-menuSub{display:block}.pvs-menuGroup:hover .pvs-menuHead svg{transform:rotate(180deg)}}
.pvs-menuGroup a{padding-left:16px}
.pvs-menuGroup a:last-child{border-bottom:0}
@media (max-width:420px){.pvs-get{padding:9px 14px;font-size:14px}.pvs-bar{gap:12px}}
@media (min-width:1000px){.pvs-nav{display:flex}.pvs-menuBtn,.pvs-menu,.pvs-menu.open{display:none}.pvs-get{margin-left:8px}}

/* ── footer ── */
.pvs-foot{margin-top:40px;border-top:1px solid var(--pvs-line);background:rgba(0,0,0,.25);padding:48px 0 32px;font-family:var(--pvs-font);color:var(--pvs-text)}
.pvs-foot *{box-sizing:border-box}
.pvs-fwrap{width:100%;max-width:var(--pvs-max);margin:0 auto;padding:0 var(--pvs-gut)}
.pvs-fgrid{display:grid;gap:32px}
@media (min-width:860px){.pvs-fgrid{grid-template-columns:1.4fr repeat(4,1fr)}}
.pvs-fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media (min-width:860px){.pvs-fcols{display:contents}}
.pvs-fbrand img{height:26px;width:auto;margin-bottom:14px;display:block}
.pvs-fbrand p{color:var(--pvs-dim);font-size:14px;max-width:300px;line-height:1.55}
.pvs-foot h4{font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--pvs-dim);margin:0 0 12px}
.pvs-foot nav a{display:block;padding:5px 0;text-decoration:none;color:var(--pvs-muted);font-size:14.5px;font-weight:500}
.pvs-foot nav a:hover{color:var(--pvs-text)}
.pvs-socials{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.pvs-socials a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--pvs-line2);color:var(--pvs-muted)}
.pvs-socials a:hover{color:var(--pvs-text);border-color:var(--pvs-muted)}
.pvs-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--pvs-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--pvs-dim);font-size:13px}

/* ── pages that also use the catalogue theme (pv-catalog.css: /search, /rooms, /store,
   /r/CODE …): its tokens re-pointed to this palette. html:root out-specifies the
   catalogue's :root, so the learn / selfie pages (which don't link this file) keep theirs. */
html:root{
  --ink:#0B0F19; --ink2:#080B14; --surface:#111728; --surface2:#161D31;
  --line:rgba(255,255,255,0.08); --line2:rgba(255,255,255,0.14);
  --text:#EEF1FA; --muted:#A3ABC4; --dim:#7A83A1;
  --accent:#4EF3B0; --accentInk:#04140D;
  --hot:#FF7A6B; --cool:#38D9F5; --mint:#4EF3B0; --violet:#B69CFF; --brand:#38D9F5;
  --amber:#FFC46B;
  --glass:rgba(255,255,255,0.05); --glassStrong:rgba(255,255,255,0.08);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html .pageKicker{color:var(--pvs-mint);font-family:var(--pvs-font);font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
html .pageHead h1{font-size:clamp(30px,4.6vw,48px);letter-spacing:-.035em;line-height:1.04}