:root{color-scheme:dark;--night:#0b1026;--deep:#1c2250;--lila:#b9a6ff;--mint:#7fe0c9;--mist:#f4f2ff;--pink:#f4a6cf;--border:#46517c;--focus:#ffdf80;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 70% -10%,#30336c 0%,var(--night) 56%);color:var(--mist);line-height:1.6;min-height:100vh}
a{color:var(--mint)}a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip{position:absolute;top:-100px;left:12px;background:var(--mist);color:var(--night);padding:12px;z-index:4}.skip:focus{top:12px}
.header{max-width:1120px;margin:auto;padding:25px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-size:2rem;font-weight:900;letter-spacing:-.07em;color:white;text-decoration:none}.bubble-logo{font-size:1.7rem;color:var(--mint);margin-right:8px}.dot{color:var(--pink)}
.beta{font-size:.77rem;letter-spacing:.05em;border:1px solid var(--border);padding:6px 12px;border-radius:99px;color:#d9d7f4}
.layout{max-width:1040px;margin:auto;padding:25px 22px 40px}
.intro{max-width:820px;margin:40px auto 45px;text-align:center}
.eyebrow{color:var(--mint);font-weight:800;letter-spacing:.16em;font-size:.76rem}
h1,h2,legend{line-height:1.15}h1{font-size:clamp(2.7rem,7vw,5.1rem);margin:17px 0 22px;letter-spacing:-.055em}h1 span{color:var(--lila)}
.intro>p:last-child{color:#d5d3e9;font-size:1.12rem}
.notice{max-width:750px;margin:0 auto 23px;padding:13px 18px;border:1px solid var(--border);border-radius:14px;background:#1b2348;min-height:48px}
.panel{background:linear-gradient(140deg,#1b224b,#151b3b);border:1px solid var(--border);border-radius:24px;padding:clamp(18px,4vw,36px);max-width:750px;margin:auto;box-shadow:0 18px 60px #05081755}
.panel h2{font-size:1.6rem;margin:0 0 12px}.panel p{color:#dcddf2}
form{display:grid;gap:14px}label{font-weight:600}
input[type=password],textarea,select{background:#0a1130;border:1px solid #64739c;border-radius:12px;color:white;padding:13px;font:inherit;width:100%}
textarea{resize:vertical;min-height:68px}
button{background:var(--mint);color:#071f23;border:2px solid transparent;border-radius:12px;padding:12px 22px;min-height:46px;font:inherit;font-weight:800;cursor:pointer}
button:hover:not(:disabled){filter:brightness(1.09)}
button:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:#28335d;color:var(--mist);border-color:#61709a}
button.danger{background:#3e2539;color:#ffd7ce;border-color:#b36d77}
button.subtle{background:transparent;color:#ded9ff;border-color:var(--border)}
fieldset{border:0;padding:0;margin:16px 0;display:grid;gap:12px}
legend{font-weight:800;font-size:1.12rem;margin:0 0 12px}
.choice{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid #64739c;border-radius:18px;cursor:pointer}
.choice:has(input:checked){border-color:var(--mint);background:#123d41}
.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
.choice input{flex:none;width:20px;height:20px;accent-color:var(--mint)}
.choice strong,.choice small{display:block}.choice small{font-weight:400;color:#d6d8eb}
input[type=radio],input[type=checkbox]{accent-color:var(--mint);width:18px;height:18px;vertical-align:middle}
.confirm{display:flex;gap:13px;align-items:flex-start;margin:18px 0}.confirm input{flex:none;margin-top:5px}
.hint{font-size:.88rem;color:#c8c8e4!important;margin:0}
.chatbar{display:flex;justify-content:space-between;align-items:start;gap:16px}
.chatbar p{margin:0 0 14px}.pill{font-size:.8rem;background:#292b5c;color:var(--lila);border-radius:99px;padding:6px 12px}
.chatlog{height:min(45vh,460px);min-height:230px;overflow-y:auto;border:1px solid var(--border);background:#0b1230;border-radius:17px;padding:17px;display:flex;flex-direction:column;gap:12px;scrollbar-color:#59638b #0b1230}
.msg{max-width:82%;padding:10px 15px;border-radius:16px;overflow-wrap:anywhere;white-space:pre-wrap;background:#35416c;align-self:start}
.msg.mine{align-self:end;background:#19554f;color:#f1fffa}
.msg.system{align-self:center;font-size:.9rem;background:transparent;border:1px solid var(--border);text-align:center}
.composer{margin-top:18px}.compose-row{display:flex;gap:12px;align-items:stretch}.compose-row textarea{flex:1;min-width:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.gamebox{padding:16px;margin-top:16px;border:1px solid var(--border);border-radius:16px;background:#161e43}
.gamebox blockquote{margin:14px 0;padding:14px 18px;border-left:4px solid var(--lila);font-size:1.15rem}
.controls{border-top:1px solid var(--border);padding-top:15px}
.ad-slot{margin:0 0 14px;padding:12px 14px;border:1px dashed #61709a;border-radius:14px;background:#121939}
.ad-label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#c8c8e4;margin-bottom:6px}
.ad-link{display:flex;gap:14px;align-items:center;color:var(--mist);text-decoration:none}
.ad-link:hover .ad-text strong{text-decoration:underline}
.ad-link img{flex:none;width:72px;height:72px;border-radius:12px;object-fit:cover}
.ad-text{font-size:.92rem;color:#dcddf2}.ad-text strong{color:white}
.adsbygoogle{display:block;min-height:90px}
footer{max-width:1050px;margin:auto;padding:8px 22px 36px;color:#b5b7d3;font-size:.82rem}
.article{max-width:770px}.article h1{font-size:2.8rem}.article h2{margin-top:30px;font-size:1.35rem}
@media(max-width:600px){.header{padding:16px}.layout{padding:12px 14px 35px}.intro{margin:25px auto 28px}.panel{border-radius:18px}.chatbar{flex-wrap:wrap}.compose-row{flex-wrap:wrap}.compose-row button{width:100%}.controls button{flex:1 1 45%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== Motyw baniek 3D (bez stylów inline i zewnętrznych czcionek, zgodnie z CSP) ===== */
:root{--accent:var(--mint);--accent-deep:#3e9c86;--accent-ink:#062520}
.scene{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.header,.layout,footer{position:relative;z-index:1}
.bubble{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.95) 0,rgba(255,255,255,.95) 4%,rgba(255,255,255,.3) 9%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 72% 78%,rgba(127,224,201,.6) 0,rgba(127,224,201,0) 42%),
    radial-gradient(circle at 24% 78%,rgba(255,170,220,.4) 0,rgba(255,170,220,0) 38%),
    radial-gradient(circle at 50% 50%,rgba(185,166,255,.05) 0,rgba(185,166,255,.08) 50%,rgba(185,166,255,.5) 64%,rgba(255,255,255,.7) 69.5%,rgba(255,255,255,0) 70.7%);
  box-shadow:inset -12px -16px 34px rgba(11,16,38,.35),inset 10px 12px 26px rgba(255,255,255,.16),0 30px 60px rgba(0,0,0,.3);
  animation:unos 9s ease-in-out infinite}
.bubble.mint{background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.95) 0,rgba(255,255,255,.95) 4%,rgba(255,255,255,.3) 9%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 72% 78%,rgba(127,224,201,.75) 0,rgba(127,224,201,0) 46%),
    radial-gradient(circle at 24% 78%,rgba(185,166,255,.35) 0,rgba(185,166,255,0) 38%),
    radial-gradient(circle at 50% 50%,rgba(127,224,201,.05) 0,rgba(127,224,201,.1) 50%,rgba(127,224,201,.5) 64%,rgba(255,255,255,.7) 69.5%,rgba(255,255,255,0) 70.7%)}
.bubble.pink{background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.95) 0,rgba(255,255,255,.95) 4%,rgba(255,255,255,.3) 9%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 72% 78%,rgba(244,166,207,.7) 0,rgba(244,166,207,0) 44%),
    radial-gradient(circle at 24% 78%,rgba(185,166,255,.5) 0,rgba(185,166,255,0) 38%),
    radial-gradient(circle at 50% 50%,rgba(244,166,207,.05) 0,rgba(244,166,207,.1) 50%,rgba(244,166,207,.55) 64%,rgba(255,255,255,.7) 69.5%,rgba(255,255,255,0) 70.7%)}
.scene .s1{width:340px;height:340px;left:-130px;top:42vh;animation-duration:12s}
.scene .s2{width:190px;height:190px;right:-55px;top:16vh;animation-delay:-3s}
.scene .s3{width:96px;height:96px;right:11%;bottom:10vh;animation-duration:7s;animation-delay:-1s}
.scene .s4{width:48px;height:48px;left:16%;top:13vh;animation-duration:6s;animation-delay:-4s}
.scene .s5{width:110px;height:110px;left:-30px;bottom:-40px;animation-duration:11s;animation-delay:-6s}
@keyframes unos{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* Logo: mała bańka zamiast znaku */
.bubble-logo{position:relative;display:inline-block;width:32px;height:32px;vertical-align:-5px;margin-right:10px;font-size:0;animation:none;box-shadow:inset -4px -5px 10px rgba(11,16,38,.35),inset 3px 4px 8px rgba(255,255,255,.16)}

/* Dymki 3D w nagłówku (tylko na szerokich ekranach) */
.intro{position:relative}
.hero-bubbles{display:none}
@media(min-width:1180px){.hero-bubbles{display:block;position:absolute;inset:0;pointer-events:none}}
.dymek{position:absolute;max-width:230px;padding:13px 17px;font-size:.95rem;line-height:1.4;text-align:left;color:var(--mist);
  border-radius:22px 22px 22px 6px;background:linear-gradient(160deg,#2c3470,#1b2049);border:1px solid rgba(255,255,255,.12);
  transform:perspective(900px) rotateY(-18deg) rotateX(9deg);
  box-shadow:1px 1px 0 #10143a,2px 2px 0 #10143a,3px 3px 0 #10143a,4px 4px 0 #10143a,5px 5px 0 #10143a,6px 6px 0 #10143a,7px 7px 0 #10143a,22px 30px 44px rgba(0,0,0,.45);
  animation:unos 7s ease-in-out infinite}
.dymek.mine{border-radius:22px 22px 6px 22px;background:linear-gradient(160deg,#d6caff,#a894f7);color:#0b1026;border-color:rgba(255,255,255,.5);
  transform:perspective(900px) rotateY(16deg) rotateX(9deg);
  box-shadow:-1px 1px 0 #6e5bd0,-2px 2px 0 #6e5bd0,-3px 3px 0 #6e5bd0,-4px 4px 0 #6e5bd0,-5px 5px 0 #6e5bd0,-6px 6px 0 #6e5bd0,-7px 7px 0 #6e5bd0,-22px 30px 44px rgba(0,0,0,.45)}
.dymek.karta{border-radius:20px;max-width:260px;background:linear-gradient(160deg,#173f45,#10282f);border-color:rgba(127,224,201,.45);color:#d8fbf2}
.dymek small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:4px}
.dymek.d1{left:-210px;top:10px}
.dymek.d2{right:-200px;top:70px;animation-delay:-2.3s}
.dymek.d3{left:-240px;bottom:-160px;animation-delay:-4.6s}

/* Panele i karty z głębią */
.panel{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 0 #0a0e26,0 28px 60px #05081788}
.notice{box-shadow:0 4px 0 #0a0e26}
.choice{position:relative;background:linear-gradient(170deg,#1c2250,#141938);box-shadow:0 5px 0 #0a0e26;transition:transform .15s,box-shadow .15s}
.choice:hover:not(:has(input:disabled)){transform:translateY(-2px);box-shadow:0 7px 0 #0a0e26}
.choice-bubble{position:relative;flex:none;width:46px;height:46px;animation-duration:6s}
input[type=radio],input[type=checkbox],.choice input{accent-color:var(--accent)}
.gamebox{box-shadow:0 5px 0 #0a0e26}

/* Przyciski z grubością */
button{background:linear-gradient(180deg,#a5f0de,#6fd3bb);color:var(--accent-ink);box-shadow:0 4px 0 var(--accent-deep);transition:transform .1s,box-shadow .1s}
button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
button.secondary{box-shadow:0 4px 0 #161c3f}button.secondary:active:not(:disabled){box-shadow:0 1px 0 #161c3f}
button.danger{box-shadow:0 4px 0 #6e2f3d}button.danger:active:not(:disabled){box-shadow:0 1px 0 #6e2f3d}
button.subtle{box-shadow:none}

/* Wiadomości jako wytłoczone dymki */
.msg{border-radius:18px 18px 18px 6px;background:linear-gradient(160deg,#2c3470,#1e2453);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 3px 0 #10143a}
.msg.mine{border-radius:18px 18px 6px 18px;background:linear-gradient(170deg,#d6caff,#a894f7);color:#0b1026;border-color:rgba(255,255,255,.5);box-shadow:0 3px 0 #6e5bd0}
.msg.system{border-radius:12px;box-shadow:none;background:transparent}
.pill{background:rgba(127,224,201,.14);color:#bff3e6}

/* Karta gry: lekko pochylona, z grubością */
.gamebox blockquote{border-left:0;border-radius:18px;padding:18px 20px;background:linear-gradient(160deg,#173f45,#10282f);border:1px solid rgba(127,224,201,.45);color:#d8fbf2;
  transform:perspective(900px) rotateX(6deg);box-shadow:0 2px 0 #0a1f24,0 4px 0 #0a1f24,0 6px 0 #0a1f24,0 18px 30px rgba(0,0,0,.4)}

/* „pyk!”: bańka pęka, gdy zmieniasz rozmówcę */
.chatbar{position:relative}
.pyk-pop{position:absolute;right:120px;top:2px;font-weight:900;font-size:1.3rem;color:var(--accent);opacity:0;pointer-events:none}
.pyk-pop::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.pyk-pop.go{animation:pyk .9s ease-out}
.pyk-pop.go::before{animation:pykRing .7s ease-out}
@keyframes pyk{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.5) translateY(-14px)}}
@keyframes pykRing{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.2)}}

@media(max-width:600px){.scene .s1{width:220px;height:220px}.scene .s2{width:120px;height:120px}.choice-bubble{width:38px;height:38px}.pyk-pop{right:12px;top:-18px}}
@media(prefers-reduced-motion:reduce){.bubble,.dymek,.pyk-pop,.pyk-pop::before{animation:none!important}.choice,button{transition:none}}

/* Jeden tryb: informacyjna karta zamiast wyboru */
.choice-static{cursor:default;margin-bottom:16px}
.choice-static:hover{transform:none;box-shadow:0 5px 0 #0a0e26}

/* Nasz drugi projekt: SzeptoGra */
.partner{display:flex;gap:16px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:18px;
  background:linear-gradient(170deg,#2e1636,#1b0f26);border:1px solid rgba(244,166,207,.28);box-shadow:0 5px 0 #12081a}
.partner-bubble{position:relative;flex:none;width:56px;height:56px;animation-duration:7s}
.partner strong{display:block;font-size:1.1rem;color:white}
.partner p{margin:4px 0 8px;color:#e6d4df;font-size:.93rem}
.partner a{color:#f4a6cf;font-weight:700}
.partner .ad-label{color:#e9c3d8;margin-bottom:2px}