/* Noirplay · motyw „Noir”: noc, światło lampy, cień żaluzji i jedna karmazynowa nuta.
   Ładowany po stylach gier na każdej stronie. Bez zewnętrznych fontów i skryptów (CSP style-src 'self'). */

:root{
  color-scheme:dark;
  --bg:#08080b;--bg-2:#0f0f14;--ink:#16161c;
  --surface:rgba(255,255,255,.04);--surface-2:rgba(255,255,255,.07);--surface-solid:#141419;
  --line:rgba(244,242,238,.12);--line-2:rgba(244,242,238,.24);
  --text:#f4f2ee;--muted:#c9c6c0;--soft:#9d9a94;
  --rose:#e84a5f;--rose-2:#f2a2ab;--blush:#f4f2ee;--gold:#f3d9a4;--violet:#a9b3c4;--mint:#8fc7b0;
  --crimson:#c9213b;--crimson-lip:#5e0b18;--lamp:#f3d9a4;--silver:#d9d6d0;
  --grad:linear-gradient(120deg,#f4f2ee 0%,#d9d6d0 42%,#e84a5f 100%);
  --grad-soft:linear-gradient(135deg,rgba(232,74,95,.18),rgba(243,217,164,.08));
  --danger:#ff8f9c;--ring:#f3d9a4;
  --glow:0 14px 40px -14px rgba(201,33,59,.65);
  --display:Didot,"Bodoni 72","Bodoni MT","Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  /* Bańka noir: przydymione szkło, srebrna krawędź i ciepły odblask lampy. */
  --np-bubble:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0 4%,rgba(255,255,255,.25) 9%,rgba(255,255,255,0) 20%),
    radial-gradient(circle at 70% 76%,rgba(243,217,164,.35) 0,rgba(243,217,164,0) 30%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0 50%,rgba(217,214,208,.22) 66%,rgba(244,242,238,.65) 70.5%,rgba(255,255,255,0) 71%);
  --np-bubble-red:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0 4%,rgba(255,255,255,.25) 9%,rgba(255,255,255,0) 20%),
    radial-gradient(circle at 70% 76%,rgba(232,74,95,.45) 0,rgba(232,74,95,0) 32%),
    radial-gradient(circle at 50% 50%,rgba(232,74,95,.05) 0 50%,rgba(201,33,59,.35) 66%,rgba(255,190,196,.7) 70.5%,rgba(201,33,59,0) 71%);
  --np-bubble-solid:radial-gradient(circle at 34% 30%,#6a6a74 0 6%,#24242c 32%,#0a0a0d 78%,#000 100%);
}

/* ── Noc: lampa w rogu, mgła i ziarno filmu ── */
body{background:
  radial-gradient(42rem 34rem at 6% -6%,rgba(243,217,164,.16),transparent 62%),
  radial-gradient(60rem 40rem at 100% 0%,rgba(201,33,59,.10),transparent 60%),
  radial-gradient(50rem 30rem at 50% 115%,rgba(169,179,196,.08),transparent 60%),
  linear-gradient(180deg,#0b0b0f 0%,#08080b 60%,#050507 100%);background-attachment:fixed}
::selection{background:#c9213b;color:#fff}

/* ── Typografia noir: nagłówki szeryfowe, akcent jak szminka ── */
h1,h2,.big,.section-heading h2,.room-title h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
h1{font-weight:700}
em{background:linear-gradient(100deg,#f4f2ee 0%,#e9e4dc 35%,#e84a5f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--lamp);letter-spacing:.24em}
.eyebrow::before{background:var(--lamp)}
a{color:var(--text)}

/* ── Logo: czarna bańka z literą N ── */
.brand{font-family:var(--display);letter-spacing:.01em}
.brand strong{color:#e84a5f;font-weight:700}
.brand-mark,.brand-symbol{display:inline-block;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;
  background:url("icons/mark.svg") center/contain no-repeat;box-shadow:0 8px 18px -8px rgba(201,33,59,.7);
  color:transparent!important;-webkit-text-fill-color:transparent;font-size:0;line-height:0;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.brand:hover .brand-mark,.brand:hover .brand-symbol{transform:rotate(-10deg) scale(1.07)}
.site-header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ── Przyciski 3D: czerwony lakier i grafit ── */
.nav-cta{background:linear-gradient(180deg,#e0344f,#a4162d)!important;color:#fff!important;box-shadow:0 3px 0 var(--crimson-lip),inset 0 1px 0 rgba(255,255,255,.3)!important}
.primary{background:linear-gradient(180deg,#e0344f 0%,#c9213b 55%,#a4162d 100%);color:#fff7f2;
  box-shadow:0 5px 0 var(--crimson-lip),0 16px 34px -12px rgba(201,33,59,.8),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(70,0,12,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s,filter .2s}
.primary:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 7px 0 var(--crimson-lip),0 22px 44px -12px rgba(201,33,59,.9),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(70,0,12,.4)}
.primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--crimson-lip),0 6px 16px -8px rgba(201,33,59,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.secondary,.quiet,.mini,.select-game,.btn-ghost,.tab{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:var(--line-2);color:var(--text);
  box-shadow:0 3px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px -14px rgba(0,0,0,.9)}
.secondary:active,.quiet:active,.mini:active,.select-game:active,.btn-ghost:active,.tab:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.tab.is-active,.filter.is-active{background:linear-gradient(180deg,#e0344f,#a4162d);color:#fff;border-color:transparent;box-shadow:0 3px 0 var(--crimson-lip),inset 0 1px 0 rgba(255,255,255,.3)}
.danger{background:linear-gradient(180deg,#3a0d16,#22070d);color:#ffd6db;border:1px solid rgba(232,74,95,.5);box-shadow:0 3px 0 #120306,inset 0 1px 0 rgba(255,255,255,.08)}

/* ── Karty: czarny lakier z odblaskiem ── */
.game-card,.feature,.plan,.promise,.entry-card,.app-band,.faq details,.panel,.host-panel,.invite-bar,.roster>*{
  background:linear-gradient(170deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 45%,rgba(0,0,0,.25)),var(--surface-solid);
  border-color:var(--line);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.4)}
.game-card::before{filter:none;opacity:.85;width:140px;height:140px;right:-36px;top:-44px;background:var(--np-bubble)}
.game-card:hover::before{opacity:1;transform:translate(-6px,6px) scale(1.08)}
.game-card:hover{border-color:var(--line-2);box-shadow:0 36px 70px -32px rgba(0,0,0,1),0 0 0 1px rgba(243,217,164,.14),inset 0 1px 0 rgba(255,255,255,.12)}
.plan.featured{border-color:rgba(232,74,95,.55);box-shadow:0 30px 70px -30px rgba(201,33,59,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.promise .ico,.science .ico,.game-section-ico{border-radius:50%;background:var(--np-bubble-solid);color:#f4f2ee;border:1px solid rgba(244,242,238,.25);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.18),0 10px 20px -10px rgba(0,0,0,.9)}
.badge{background:rgba(201,33,59,.16);color:#ffd2d8;border:1px solid rgba(232,74,95,.4)}

/* ── Bohater: światło przez żaluzje za telefonem ── */
.hero-visual{background:url("noir-scena.svg") center 30%/cover no-repeat;border-radius:32px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,1),inset 0 0 0 1px rgba(244,242,238,.08);overflow:visible}
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:32px;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,11,0) 55%,rgba(8,8,11,.75) 100%)}
.orb{filter:none;opacity:1;animation:np-float 12s ease-in-out infinite;transition:scale .7s cubic-bezier(.2,1.5,.4,1),opacity .7s ease}
.orb-1{background:var(--np-bubble);width:220px;height:220px}
.orb-2{background:var(--np-bubble-red);width:150px;height:150px}
@keyframes np-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8px,-18px,0)}}
.phone{box-shadow:0 50px 100px -30px rgba(0,0,0,1),0 0 0 1px rgba(244,242,238,.16),inset 0 1px 0 rgba(255,255,255,.12)}
.float-chip{background:rgba(12,12,16,.85);border-color:var(--line-2);box-shadow:0 18px 40px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14)}
.marquee span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;vertical-align:0;background:#e84a5f;box-shadow:0 0 12px rgba(232,74,95,.8)}

/* ── Formularze ── */
input,select,textarea{background:#0d0d11;border-color:var(--line-2);color:var(--text);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
input:focus,select:focus,textarea:focus{border-color:var(--lamp)}
input[type=checkbox],input[type=radio]{accent-color:#e84a5f}
:focus-visible{outline-color:var(--lamp)}

/* ── Bramka 18+ (assets/noir-gate.js) ── */
.np-gate{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;
  background:radial-gradient(40rem 30rem at 20% 0%,rgba(243,217,164,.14),transparent 60%),rgba(4,4,6,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.np-gate[hidden]{display:none}
.np-gate-card{max-width:480px;width:100%;padding:34px 28px;border-radius:28px;text-align:center;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.01)),#111116;border:1px solid var(--line-2);
  box-shadow:0 50px 100px -30px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.1)}
.np-gate-card img{width:84px;height:84px;margin:0 auto 6px;display:block}
.np-gate-card h2{font-family:var(--display);font-size:clamp(30px,6vw,40px);margin:8px 0 10px;line-height:1.05}
.np-gate-card p{color:var(--muted);margin:0 0 12px}
.np-gate-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.np-gate-actions .primary{margin-top:0}
.np-gate-note{font-size:13px;color:var(--soft)!important;margin-top:16px!important}
html.np-gate-open{overflow:hidden}

/* ── Bańki noir do przebijania (assets/noir-banki.js) ── */
.np-bubbles-on .shell,.np-bubbles-on .page-shell{position:relative;z-index:1}
.np-bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.np-bubbles-fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.np-bubble{position:absolute;left:var(--x);top:calc(100vh + 8px);width:var(--size);height:var(--size);border-radius:50%;
  background:var(--np-bubble);opacity:.8;will-change:transform;
  animation:np-rise var(--dur,24s) linear var(--delay,0s) infinite;transition:scale .24s ease-out,opacity .24s ease-out}
.np-bubble--red{background:var(--np-bubble-red)}
.np-bubble.is-popping,.orb.is-popping{scale:1.45;opacity:0}
.orb.is-popping{transition-duration:.22s}
@keyframes np-rise{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(var(--sway,20px),calc(-50vh - var(--size) / 2),0)}
  100%{transform:translate3d(0,calc(-100vh - var(--size) - 40px),0)}}
.np-drop{position:absolute;left:var(--px);top:var(--py);width:4px;height:12px;margin:-6px 0 0 -2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(217,214,208,.2));transform:rotate(var(--rot,0deg));
  animation:np-drop .55s cubic-bezier(.2,.8,.3,1) forwards}
.np-drop--red{background:linear-gradient(180deg,#ffd2d8,#c9213b)}
@keyframes np-drop{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot,0deg)) scale(.3);opacity:0}}
.np-word{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);
  font-family:var(--display);font-style:italic;font-weight:700;font-size:22px;color:#f4f2ee;text-shadow:0 0 14px rgba(243,217,164,.7);
  animation:np-word .95s ease-out forwards}
@keyframes np-word{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-70%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.np-toast{position:fixed;left:50%;bottom:84px;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:12px 20px;border-radius:999px;background:linear-gradient(180deg,#1a1a20,#0d0d11);border:1px solid rgba(243,217,164,.45);
  color:#f4f2ee;font-family:var(--display);font-style:italic;font-size:16px;box-shadow:0 18px 40px -14px rgba(0,0,0,1),0 0 30px -10px rgba(243,217,164,.5);
  transition:opacity .25s,transform .25s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.np-toast.is-on{opacity:1;transform:translate(-50%,0)}
.np-toast:empty{display:none}

/* ── Mniej ruchu na życzenie systemu ── */
@media (prefers-reduced-motion:reduce){
  .orb,.np-bubble{animation:none}
  .np-bubble{top:var(--y,50vh)}
  .np-word{animation-duration:.6s}
  .primary,.primary:hover,.primary:active{transition:none;transform:none}
}
@media (max-width:640px){
  .hero-visual{border-radius:24px}
  .orb-1{width:150px;height:150px}.orb-2{width:100px;height:100px}
}
@media (forced-colors:active){
  .np-bubbles,.np-bubbles-fx{display:none}
}

/* ── Między Nami (styles.css ma własne nazwy zmiennych) ── */
:root:has(.page-shell){--bg:#08080b;--surface:#141419;--surface2:#1c1c23;--border:#3a3a44;--text:#f4f2ee;--muted:#c9c6c0;--soft:#9d9a94;
  --accent:#e84a5f;--accent2:#f2a2ab;--focus:#f3d9a4}

/* ── Zapowiedź czatu na stronie głównej ── */
.czat-demo{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:24px;background:rgba(0,0,0,.45);border:1px solid var(--line);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.7);min-width:min(320px,100%)}
.czat-demo .msg{margin:0;max-width:85%;padding:11px 15px;border-radius:18px;line-height:1.4}
.czat-demo .msg.other{align-self:flex-start;background:#1b1b22;border:1px solid var(--line-2);border-bottom-left-radius:6px}
.czat-demo .msg.mine{align-self:flex-end;background:linear-gradient(180deg,#c9213b,#9c1429);color:#fff;border-bottom-right-radius:6px}
.czat-demo .msg.system{align-self:center;border:1px dashed rgba(243,217,164,.5);color:var(--lamp);font-style:italic;font-size:14px}